WIP jordan

app/pages/account/index.vue

@@ -0,0 +1,88 @@
+<script setup lang="ts">
+usePageTitle('Account')
+
+const tab = ref('profile')
+
+const tabItems = [
+  { label: 'Profile', value: 'profile', icon: 'i-heroicons-user', slot: 'profile' },
+  { label: 'Theme & appearance', value: 'theme', icon: 'i-heroicons-swatch', slot: 'theme' },
+  { label: 'Preferences', value: 'prefs', icon: 'i-heroicons-adjustments-horizontal', slot: 'prefs' }
+]
+</script>
+
+<template>
+  <div class="mx-auto max-w-3xl space-y-8">
+    <div class="flex flex-wrap items-center gap-x-3 gap-y-2 text-sm">
+      <NuxtLink
+        to="/"
+        class="inline-flex items-center gap-1.5 font-medium text-[var(--text-muted)] transition hover:text-[var(--text-primary)]"
+      >
+        <UIcon name="i-heroicons-home" class="h-4 w-4" />
+        Home
+      </NuxtLink>
+      <span class="text-[var(--text-muted)] opacity-50" aria-hidden="true">|</span>
+      <span class="text-[var(--text-muted)]">Signed-in user (mock)</span>
+    </div>
+
+    <div>
+      <h1 class="mt-1 text-2xl font-semibold tracking-tight text-[var(--text-primary)]">Your account</h1>
+      <p class="mt-2 max-w-2xl text-[14px] leading-relaxed text-[var(--text-muted)]">
+        Profile, photo, and how the app looks for you. Software-wide configuration stays under Settings; company branding
+        is managed separately by a tenant administrator.
+      </p>
+    </div>
+
+    <UTabs v-model="tab" :items="tabItems" variant="link" color="primary" class="w-full">
+      <template #profile>
+        <div class="space-y-8 pt-4">
+          <div class="flex flex-col gap-6 sm:flex-row sm:items-start">
+            <div class="flex shrink-0 flex-col items-center gap-2">
+              <div
+                class="flex h-24 w-24 items-center justify-center rounded-full border border-[var(--sidebar-border)] bg-[var(--brand-faint)] text-[var(--brand)] ring-2 ring-[var(--brand)]/20"
+              >
+                <UIcon name="i-heroicons-user" class="h-14 w-14" />
+              </div>
+              <UButton size="sm" color="neutral" variant="soft" disabled>Change photo (soon)</UButton>
+              <p class="max-w-[12rem] text-center text-[11px] text-[var(--text-muted)]">Avatar syncs when directory login is connected.</p>
+            </div>
+            <div class="min-w-0 flex-1 space-y-4">
+              <UFormField label="Display name" description="Shown in the top bar when profiles are wired up.">
+                <UInput placeholder="Your name" disabled class="max-w-md" />
+              </UFormField>
+              <UFormField label="Email" description="From your identity provider (not editable here yet).">
+                <UInput model-value="you@company.com" type="email" disabled class="max-w-md" />
+              </UFormField>
+            </div>
+          </div>
+        </div>
+      </template>
+
+      <template #theme>
+        <div class="pt-4">
+          <AccountThemeSection />
+        </div>
+      </template>
+
+      <template #prefs>
+        <div class="space-y-4 pt-4">
+          <p class="text-sm text-[var(--text-muted)]">Locale, density, and defaults will live here when account APIs exist.</p>
+          <div class="rounded-xl border border-[var(--sidebar-border)] bg-[var(--surface)] p-4 ring-1 ring-black/5">
+            <UFormField label="Language" class="max-w-md">
+              <USelect
+                model-value="en"
+                disabled
+                :items="[
+                  { label: 'English (default)', value: 'en' },
+                  { label: 'Español (soon)', value: 'es' }
+                ]"
+                value-key="value"
+                label-key="label"
+                class="w-full"
+              />
+            </UFormField>
+          </div>
+        </div>
+      </template>
+    </UTabs>
+  </div>
+</template>