From 286c4e464499bb25adc355ecb63c46d6903edfaa Mon Sep 17 00:00:00 2001
From: DecDuck <declanahofmeyr@gmail.com>
Date: Thu, 1 May 2025 13:36:52 +1000
Subject: [PATCH] feat: cleanup settings menu and fix styles

---
 desktop/components/HeaderUserWidget.vue |  5 --
 desktop/pages/account.vue               | 72 -------------------
 desktop/pages/settings.vue              |  7 ++
 desktop/pages/settings/account.vue      | 64 +++++++++++++++++
 desktop/pages/settings/downloads.vue    | 13 +++-
 desktop/pages/settings/index.vue        | 91 ++++++++++++-------------
 6 files changed, 126 insertions(+), 126 deletions(-)
 delete mode 100644 desktop/pages/account.vue
 create mode 100644 desktop/pages/settings/account.vue

diff --git a/desktop/components/HeaderUserWidget.vue b/desktop/components/HeaderUserWidget.vue
index 26d44c46..c4a9a17d 100644
--- a/desktop/components/HeaderUserWidget.vue
+++ b/desktop/components/HeaderUserWidget.vue
@@ -99,11 +99,6 @@ function navigate(close: () => any, to: NavigationItem) {
 }
 
 const navigation: NavigationItem[] = [
-  {
-    label: "Account settings",
-    route: "/account",
-    prefix: "",
-  },
   {
     label: "App settings",
     route: "/settings",
diff --git a/desktop/pages/account.vue b/desktop/pages/account.vue
deleted file mode 100644
index 6a072de8..00000000
--- a/desktop/pages/account.vue
+++ /dev/null
@@ -1,72 +0,0 @@
-<template>
-  <div class="mx-auto max-w-7xl px-8">
-    <div class="border-b border-zinc-700 py-5">
-      <h3 class="text-base font-semibold font-display leading-6 text-zinc-100">
-        Account
-      </h3>
-    </div>
-
-    <div class="mt-5">
-      <div class="divide-y divide-zinc-700">
-        <div class="py-6">
-          <div class="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>
-        </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> 
diff --git a/desktop/pages/settings.vue b/desktop/pages/settings.vue
index 2b92ff94..b19b2dfc 100644
--- a/desktop/pages/settings.vue
+++ b/desktop/pages/settings.vue
@@ -45,6 +45,7 @@ import type { Component } from "vue";
 import type { NavigationItem } from "~/types";
 import { platform } from '@tauri-apps/plugin-os';
 import { invoke } from "@tauri-apps/api/core";
+import { UserIcon } from "@heroicons/vue/20/solid";
 
 const systemData = await invoke<{
   clientId: string;
@@ -101,6 +102,12 @@ const navigation = computed(() => [
     prefix: "/settings/downloads",
     icon: ArrowDownTrayIcon,
   },
+  {
+    label: "Account",
+    route: "/settings/account",
+    prefix: "/settings/account",
+    icon: UserIcon
+  },
   ...(isDebugMode.value ? [{
     label: "Debug Info",
     route: "/settings/debug", 
diff --git a/desktop/pages/settings/account.vue b/desktop/pages/settings/account.vue
new file mode 100644
index 00000000..637d6c6b
--- /dev/null
+++ b/desktop/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>
diff --git a/desktop/pages/settings/downloads.vue b/desktop/pages/settings/downloads.vue
index 32109040..2345aeed 100644
--- a/desktop/pages/settings/downloads.vue
+++ b/desktop/pages/settings/downloads.vue
@@ -1,8 +1,15 @@
 <template>
-  <div>
-    <div class="border-b border-zinc-600 py-2 px-1">
+  <div class="border-b border-zinc-700 py-5">
+    <h3 class="text-base font-semibold font-display leading-6 text-zinc-100">
+      Downloads
+    </h3>
+  </div>
+
+
+  <div class="mt-5">
+    <div class="border-b border-zinc-600">
       <div class="-ml-4 -mt-2 flex flex-wrap items-center justify-between sm:flex-nowrap">
-        <div class="ml-4 mt-2">
+        <div class="ml-4 mt-2 pb-4">
           <h3 class="text-base font-display font-semibold text-zinc-100">
             Install directories
           </h3>
diff --git a/desktop/pages/settings/index.vue b/desktop/pages/settings/index.vue
index 241c8409..752718c3 100644
--- a/desktop/pages/settings/index.vue
+++ b/desktop/pages/settings/index.vue
@@ -1,60 +1,59 @@
 <template>
-    <div class="divide-y divide-zinc-700">
-        <div class="py-6">
-            <h2 class="text-base font-semibold font-display leading-7 text-zinc-100">General</h2>
-            <p class="mt-1 text-sm leading-6 text-zinc-400">
-                Configure basic application settings
-            </p>
+  <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-10 space-y-8">
-                <div class="flex flex-row items-center justify-between">
-                    <div>
-                        <h3 class="text-sm font-medium leading-6 text-zinc-100">Start with system</h3>
-                        <p class="mt-1 text-sm leading-6 text-zinc-400">
-                            Drop will automatically start when you log into your computer
-                        </p>
-                    </div>
-                    <Switch
-                        v-model="autostartEnabled"
-                        :class="[
-                            autostartEnabled ? 'bg-blue-600' : 'bg-zinc-700',
-                            'relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out'
-                        ]"
-                    >
-                        <span
-                            :class="[
-                                autostartEnabled ? 'translate-x-5' : 'translate-x-0',
-                                'pointer-events-none relative inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out'
-                            ]"
-                        />
-                    </Switch>
-                </div>
-            </div>
-        </div>
+  <div class="mt-5 space-y-8">
+    <div class="flex flex-row items-center justify-between">
+      <div>
+        <h3 class="text-sm font-medium leading-6 text-zinc-100">
+          Start with system
+        </h3>
+        <p class="mt-1 text-sm leading-6 text-zinc-400">
+          Drop will automatically start when you log into your computer
+        </p>
+      </div>
+      <Switch
+        v-model="autostartEnabled"
+        :class="[
+          autostartEnabled ? 'bg-blue-600' : 'bg-zinc-700',
+          'relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out',
+        ]"
+      >
+        <span
+          :class="[
+            autostartEnabled ? 'translate-x-5' : 'translate-x-0',
+            'pointer-events-none relative inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out',
+          ]"
+        />
+      </Switch>
     </div>
+  </div>
 </template>
 
 <script setup lang="ts">
-import { Switch } from '@headlessui/vue'
+import { Switch } from "@headlessui/vue";
 import { invoke } from "@tauri-apps/api/core";
 
-defineProps<{}>()
+defineProps<{}>();
 
-const autostartEnabled = ref<boolean>(false)
+const autostartEnabled = ref<boolean>(false);
 
 // Load initial state
-invoke('get_autostart_enabled').then((enabled) => {
-    autostartEnabled.value = enabled as boolean
-})
+invoke("get_autostart_enabled").then((enabled) => {
+  autostartEnabled.value = enabled as boolean;
+});
 
 // Watch for changes and update autostart
 watch(autostartEnabled, async (newValue: boolean) => {
-    try {
-        await invoke('toggle_autostart', { enabled: newValue })
-    } catch (error) {
-        console.error('Failed to toggle autostart:', error)
-        // Revert the toggle if it failed
-        autostartEnabled.value = !newValue
-    }
-})
-</script>
\ No newline at end of file
+  try {
+    await invoke("toggle_autostart", { enabled: newValue });
+  } catch (error) {
+    console.error("Failed to toggle autostart:", error);
+    // Revert the toggle if it failed
+    autostartEnabled.value = !newValue;
+  }
+});
+</script>