Update note card to use element plus

components/card/Note.vue

@@ -1,36 +1,29 @@
 <template>
+	<el-card>
+		<template #header>
 			<div
-		class="group/note flex w-full cursor-pointer flex-col gap-4 bg-secondary px-4 py-2"
+				class="flex cursor-pointer items-center"
-		v-auto-animate
+				@click.stop="noteDetail(props.uuid)">
-		@click="toggleDetail()">
-		<div class="flex items-center">
 				<div class="w-full text-center text-2xl font-bold">
 					{{ props.title }}
 				</div>
-			<div class="flex flex-col">
-				<ElementButton @click.stop="toggleOptions()">
-					<Icon name="fa6-solid:ellipsis-vertical" />
-				</ElementButton>
-				<div class="relative">
-					<div
-						ref="contextMenu"
-						v-if="showOptions">
-						<div
-							class="absolute right-0 top-0 z-50 flex h-fit w-64 flex-col border border-lightgray bg-secondary">
-							<CardOptions
-								name="View Note"
-								@click.stop="noteDetail(props.uuid)" />
-						</div>
-					</div>
-				</div>
-			</div>
 			</div>
+		</template>
+		<div
+			class="flex w-full cursor-pointer flex-col gap-4"
+			v-auto-animate
+			@click="toggleDetail()">
 			<div
 				v-if="showDetail"
-			class="mb-2 line-clamp-6 whitespace-pre">
+				class="mb-2 line-clamp-6 whitespace-pre px-4 pt-2">
 				{{ props.description }}
 			</div>
+			<div
+				class="w-full px-4 py-2 text-center text-sm hover:bg-[--el-color-primary-light-9] hover:bg-opacity-50 hover:text-[--el-color-primary]"
+				>{{ showDetail ? 'Hide Details' : 'Show Details' }}</div
+			>
 		</div>
+	</el-card>
 </template>
 
 <script setup lang="ts">
@@ -63,3 +56,9 @@
 	toggleOptions()
 })
 </script>
+
+<style scoped>
+:deep(.el-card__body) {
+	--el-card-padding: 0;
+}
+</style>