feat: cleanup settings menu and fix styles

pages/settings/account.vue

@@ -0,0 +1,64 @@
+<template>
+  <div class="border-b border-zinc-700 py-5">
+    <h3 class="text-base font-semibold font-display leading-6 text-zinc-100">
+      General
+    </h3>
+  </div>
+
+  <div class="mt-5 flex flex-col gap-4">
+    <div class="flex flex-row items-center justify-between">
+      <div>
+        <h3 class="text-sm font-medium leading-6 text-zinc-100">Sign out</h3>
+        <p class="mt-1 text-sm leading-6 text-zinc-400">
+          Sign out of your Drop account on this device
+        </p>
+      </div>
+      <button
+        @click="signOut"
+        type="button"
+        class="rounded-md bg-red-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-red-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-600"
+      >
+        Sign out
+      </button>
+    </div>
+
+    <div v-if="error" class="rounded-md bg-red-600/10 p-4">
+      <div class="flex">
+        <div class="flex-shrink-0">
+          <XCircleIcon class="h-5 w-5 text-red-600" aria-hidden="true" />
+        </div>
+        <div class="ml-3">
+          <h3 class="text-sm font-medium text-red-600">
+            {{ error }}
+          </h3>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { invoke } from "@tauri-apps/api/core";
+import { listen } from "@tauri-apps/api/event";
+import { useRouter } from "#imports";
+import { XCircleIcon } from "@heroicons/vue/16/solid";
+
+const router = useRouter();
+const error = ref<string | null>(null);
+
+// Listen for auth events
+onMounted(async () => {
+  await listen("auth/signedout", () => {
+    router.push("/auth/signedout");
+  });
+});
+
+async function signOut() {
+  try {
+    error.value = null;
+    await invoke("sign_out");
+  } catch (e) {
+    error.value = `Failed to sign out: ${e}`;
+  }
+}
+</script>