From 3ff810e9b5f3d7be095a01ab864af8788908a474 Mon Sep 17 00:00:00 2001
From: TZGyn <ca538901d@mozmail.com>
Date: Sun, 12 Feb 2023 16:14:32 +0800
Subject: [PATCH] update: note card UI

---
 components/card/Note.vue | 32 +++++++++++++++++++++++++-------
 pages/notes/index.vue    |  4 ++--
 2 files changed, 27 insertions(+), 9 deletions(-)

diff --git a/components/card/Note.vue b/components/card/Note.vue
index 11cbd29..f0eb5cb 100644
--- a/components/card/Note.vue
+++ b/components/card/Note.vue
@@ -1,11 +1,20 @@
 <template>
 	<div
-		class="bg-secondary flex w-96 cursor-pointer flex-col gap-4 rounded-lg p-4"
-		@click="noteDetail(props.uuid)">
-		<div class="w-full text-center text-2xl font-bold">
-			{{ props.title }}
+		class="bg-secondary group/note flex w-full cursor-pointer flex-col gap-4 p-2"
+		v-auto-animate
+		@click="toggleDetail()">
+		<div class="flex items-center">
+			<div class="w-full text-center text-2xl font-bold">
+				{{ props.title }}
+			</div>
+
+			<ElementButton @click.stop="toggleOptions()">
+				<Icon
+					class="invisible group-hover/note:visible"
+					name="fa6-solid:ellipsis-vertical" />
+			</ElementButton>
 		</div>
-		<div>
+		<div v-if="showDetail">
 			{{ props.description }}
 		</div>
 	</div>
@@ -20,9 +29,18 @@
 	}
 
 	const props = defineProps<Props>();
-	const router = useRouter();
+	const showDetail = ref<boolean>(false);
+	const showOptions = ref<boolean>(false);
+
+	const toggleOptions = () => {
+		showOptions.value = !showOptions.value;
+	};
+
+	const toggleDetail = () => {
+		showDetail.value = !showDetail.value;
+	};
 
 	const noteDetail = (id: string | number) => {
-		router.push(`/notes/${id}`);
+		navigateTo(`/notes/${id}`);
 	};
 </script>
diff --git a/pages/notes/index.vue b/pages/notes/index.vue
index 3f2120e..0a5470b 100644
--- a/pages/notes/index.vue
+++ b/pages/notes/index.vue
@@ -22,10 +22,10 @@
 		</div>
 
 		<div
-			class="mx-12 flex h-full w-full max-w-3xl flex-row justify-center gap-4">
+			class="mx-12 flex h-full w-full max-w-3xl flex-row justify-center gap-4 p-2">
 			<div
 				v-if="data"
-				class="flex flex-col gap-4">
+				class="flex w-full flex-col gap-4">
 				<div v-for="note in data.notes">
 					<LazyCardNote
 						:id="note.id"