WIP jordan

app/components/account/AccountThemeSection.vue

@@ -0,0 +1,129 @@
+<script setup lang="ts">
+import type { AppThemeId } from '~/types/app-theme'
+
+const { themeId, themeOptions, applyTheme } = useAppTheme()
+
+const themeGradients: Record<string, string> = {
+  light: 'from-sky-100 via-blue-50 to-indigo-100',
+  purple: 'from-violet-100 via-fuchsia-50 to-purple-100',
+  dark: 'from-slate-700 via-slate-800 to-slate-900',
+  'dark-purple': 'from-violet-900 via-purple-950 to-slate-900'
+}
+
+const themeIcons: Record<string, string> = {
+  light: 'i-heroicons-sun',
+  purple: 'i-heroicons-sparkles',
+  dark: 'i-heroicons-moon',
+  'dark-purple': 'i-heroicons-star'
+}
+</script>
+
+<template>
+  <div class="space-y-6">
+    <div>
+      <p class="text-sm leading-relaxed text-[var(--text-muted)]">
+        Choose a theme for the entire application. Colors, inputs, buttons, cards, sidebar, and top bar all follow your choice.
+        Your preference is saved to this browser.
+      </p>
+    </div>
+
+    <!-- Theme grid -->
+    <div class="grid gap-4 sm:grid-cols-2">
+      <button
+        v-for="opt in themeOptions"
+        :key="opt.id"
+        type="button"
+        class="app-theme-card text-left"
+        :class="themeId === opt.id ? 'app-theme-card-selected' : ''"
+        @click="applyTheme(opt.id as AppThemeId)"
+      >
+        <!-- Header -->
+        <div class="flex items-start justify-between gap-3">
+          <div class="flex items-center gap-2.5">
+            <div
+              class="flex h-8 w-8 items-center justify-center rounded-lg"
+              :class="themeId === opt.id ? 'bg-[var(--brand-soft)] text-[var(--brand)]' : 'bg-[var(--badge-muted-bg)] text-[var(--text-muted)]'"
+            >
+              <UIcon :name="themeIcons[opt.id]" class="h-4 w-4" />
+            </div>
+            <div>
+              <p class="font-semibold text-[var(--text-primary)]">{{ opt.label }}</p>
+              <p class="mt-0.5 text-xs text-[var(--text-muted)]">{{ opt.description }}</p>
+            </div>
+          </div>
+          <Transition
+            enter-active-class="transition duration-200 ease-out"
+            enter-from-class="opacity-0 scale-75"
+            enter-to-class="opacity-100 scale-100"
+            leave-active-class="transition duration-150 ease-in"
+            leave-from-class="opacity-100"
+            leave-to-class="opacity-0 scale-75"
+          >
+            <UIcon
+              v-if="themeId === opt.id"
+              name="i-heroicons-check-circle-solid"
+              class="h-6 w-6 shrink-0 text-[var(--brand)]"
+            />
+          </Transition>
+        </div>
+
+        <!-- Gradient preview bar -->
+        <div
+          class="mt-4 h-8 overflow-hidden rounded-lg bg-gradient-to-r"
+          :class="themeGradients[opt.id]"
+        />
+
+        <!-- Component preview (scoped to this theme) -->
+        <div
+          class="mt-3 rounded-lg border border-[var(--sidebar-border)] bg-[var(--page-bg)] p-3"
+          :data-theme="opt.id"
+        >
+          <div class="space-y-3">
+            <!-- Buttons row -->
+            <div>
+              <p class="mb-2 text-[10px] font-semibold uppercase tracking-wider text-[var(--text-muted)]">Buttons</p>
+              <div class="flex flex-wrap gap-1.5">
+                <UButton size="xs" color="primary">Primary</UButton>
+                <UButton size="xs" color="primary" variant="soft">Soft</UButton>
+                <UButton size="xs" color="primary" variant="outline">Outline</UButton>
+                <UButton size="xs" color="neutral" variant="ghost">Ghost</UButton>
+              </div>
+            </div>
+            <!-- Input preview -->
+            <div>
+              <p class="mb-2 text-[10px] font-semibold uppercase tracking-wider text-[var(--text-muted)]">Input</p>
+              <div class="max-w-[200px]">
+                <UInput size="xs" placeholder="Search policies..." icon="i-heroicons-magnifying-glass" disabled />
+              </div>
+            </div>
+            <!-- Badges row -->
+            <div>
+              <p class="mb-2 text-[10px] font-semibold uppercase tracking-wider text-[var(--text-muted)]">Badges</p>
+              <div class="flex flex-wrap gap-1.5">
+                <UBadge color="primary" variant="soft" size="xs">Active</UBadge>
+                <UBadge color="success" variant="soft" size="xs">Bound</UBadge>
+                <UBadge color="warning" variant="soft" size="xs">Pending</UBadge>
+                <UBadge color="error" variant="soft" size="xs">Overdue</UBadge>
+              </div>
+            </div>
+          </div>
+        </div>
+      </button>
+    </div>
+
+    <!-- Extra info -->
+    <div class="rounded-xl border border-[var(--card-border)] bg-[var(--surface)] p-4 shadow-sm">
+      <div class="flex gap-3">
+        <UIcon name="i-heroicons-information-circle" class="mt-0.5 h-5 w-5 shrink-0 text-[var(--brand)]" />
+        <div class="text-sm text-[var(--text-muted)]">
+          <p>
+            Theme applies instantly to all pages including sidebar navigation, cards, inputs, buttons, badges, and KPI panels.
+            You can also quickly switch themes from the
+            <UIcon name="i-heroicons-swatch" class="inline h-3.5 w-3.5" />
+            icon in the top bar.
+          </p>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>