update: buttons in [id].vue

pages/notes/[id].vue

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