update: buttons in [id].vue

pages/notes/[id].vue

@@ -1,35 +1,37 @@
 <template>
 	<App class="p-4">
-		<ClientOnly>
+		<ElementTextArea
-			<ElementTextArea
+			@keydown.ctrl.s.prevent="submit(note)"
-				@keydown.ctrl.s.prevent="submit(note)"
+			v-model="note.title"
-				v-model="note.title"
+			placeholder="untitled"
-				placeholder="untitled"
+			rows="1"
-				rows="1"
+			class="text-center" />
-				class="text-center" />
+		<div class="flex w-full max-w-2xl justify-end gap-4">
-			<div class="menu">
+			<ElementButton
-				<button @click="submit(note)">
+				class="hover:bg-blue-500 hover:text-black"
-					<Icon
+				@click="submit(note)">
-						v-if="isSubmitting"
+				<Icon
-						name="loading" />
+					v-if="isSubmitting"
-					<Icon
+					name="loading" />
-						v-if="!isSubmitting"
+				<Icon
-						name="fa6-solid:floppy-disk" />
+					v-if="!isSubmitting"
-				</button>
+					name="fa6-solid:floppy-disk" />
-				<button @click="deleteNote">
+			</ElementButton>
-					<Icon
+			<ElementButton
-						v-if="isDeleting"
+				class="hover:bg-red-500 hover:text-black"
-						name="loading" />
+				@click="deleteNote">
-					<Icon
+				<Icon
-						v-if="!isDeleting"
+					v-if="isDeleting"
-						name="fa6-solid:trash" />
+					name="loading" />
-				</button>
+				<Icon
-			</div>
+					v-if="!isDeleting"
-			<ElementTextArea
+					name="fa6-solid:trash" />
-				@keydown.ctrl.s.prevent="submit(note)"
+			</ElementButton>
-				v-model:model-value="note.description"
+		</div>
-				class="h-full p-4" />
+		<ElementTextArea
-		</ClientOnly>
+			@keydown.ctrl.s.prevent="submit(note)"
+			v-model:model-value="note.description"
+			class="h-full p-4" />
 	</App>
 </template>