feat(web): auth/ui/notifications pinia stores + theme composable

web/src/composables/useTheme.ts

@@ -0,0 +1,10 @@
+import { useUIStore } from '@/stores/ui'
+
+export function useTheme() {
+  const ui = useUIStore()
+  return {
+    mode: ui.themeMode,
+    isDark: ui.effectiveDark,
+    setMode: ui.setThemeMode,
+  }
+}

web/src/stores/auth.ts

@@ -0,0 +1,34 @@
+import { defineStore } from 'pinia'
+import { computed, ref } from 'vue'
+
+export interface User {
+  id: string
+  email: string
+  display_name: string
+  is_admin: boolean
+}
+
+export const useAuthStore = defineStore('auth', () => {
+  const token = ref<string | null>(localStorage.getItem('token'))
+  const user = ref<User | null>(
+    JSON.parse(localStorage.getItem('user') || 'null') as User | null,
+  )
+
+  const isAuthenticated = computed(() => !!token.value)
+
+  function setSession(t: string, u: User) {
+    token.value = t
+    user.value = u
+    localStorage.setItem('token', t)
+    localStorage.setItem('user', JSON.stringify(u))
+  }
+
+  function clearSession() {
+    token.value = null
+    user.value = null
+    localStorage.removeItem('token')
+    localStorage.removeItem('user')
+  }
+
+  return { token, user, isAuthenticated, setSession, clearSession }
+})

web/src/stores/notifications.ts

@@ -0,0 +1,27 @@
+import { defineStore } from 'pinia'
+import { ref } from 'vue'
+
+export interface Notification {
+  id: string
+  topic: string
+  severity: 'info' | 'warning' | 'error'
+  title: string
+  body: string
+  link?: string
+  read_at?: string
+  created_at: string
+}
+
+export const useNotificationsStore = defineStore('notifications', () => {
+  const items = ref<Notification[]>([])
+  const unreadCount = ref(0)
+
+  function setItems(list: Notification[]) {
+    items.value = list
+  }
+  function setUnreadCount(n: number) {
+    unreadCount.value = n
+  }
+
+  return { items, unreadCount, setItems, setUnreadCount }
+})

web/src/stores/ui.ts

@@ -0,0 +1,37 @@
+import { defineStore } from 'pinia'
+import { computed, ref, watch } from 'vue'
+
+type ThemeMode = 'light' | 'dark' | 'system'
+
+export const useUIStore = defineStore('ui', () => {
+  const themeMode = ref<ThemeMode>(
+    (localStorage.getItem('themeMode') as ThemeMode) || 'system',
+  )
+  const systemDark = ref(window.matchMedia('(prefers-color-scheme: dark)').matches)
+
+  window
+    .matchMedia('(prefers-color-scheme: dark)')
+    .addEventListener('change', (e) => (systemDark.value = e.matches))
+
+  const effectiveDark = computed(() =>
+    themeMode.value === 'system' ? systemDark.value : themeMode.value === 'dark',
+  )
+
+  watch(
+    effectiveDark,
+    (v) => document.documentElement.classList.toggle('dark', v),
+    { immediate: true },
+  )
+
+  function setThemeMode(mode: ThemeMode) {
+    themeMode.value = mode
+    localStorage.setItem('themeMode', mode)
+  }
+
+  const sidebarCollapsed = ref(localStorage.getItem('sidebarCollapsed') === 'true')
+  watch(sidebarCollapsed, (v) =>
+    localStorage.setItem('sidebarCollapsed', String(v)),
+  )
+
+  return { themeMode, effectiveDark, setThemeMode, sidebarCollapsed }
+})