Thing init

src/stores/appStore.ts

@@ -0,0 +1,160 @@
+import { defineStore } from 'pinia'
+import { ref } from 'vue'
+import { getCurrentWindow, Effect } from '@tauri-apps/api/window'
+
+export type Theme = 'light' | 'dark' | 'system'
+export type EffectType = 'normal' | 'mica' | 'acrylic'
+
+const STORAGE_KEY = 'thing_app_settings'
+
+export const useAppStore = defineStore('app', () => {
+  const theme = ref<Theme>('system')
+  const effect = ref<EffectType>('mica')
+  const isAutoStart = ref(false)
+  const isInitialized = ref(false)
+
+  const loadSettings = () => {
+    try {
+      const saved = localStorage.getItem(STORAGE_KEY)
+      if (saved) {
+        const settings = JSON.parse(saved)
+        if (settings.theme) theme.value = settings.theme
+        if (settings.effect) effect.value = settings.effect
+        if (settings.isAutoStart !== undefined) isAutoStart.value = settings.isAutoStart
+      }
+    } catch {
+      console.error('Failed to load settings from localStorage')
+    }
+  }
+
+  const saveSettings = () => {
+    try {
+      localStorage.setItem(STORAGE_KEY, JSON.stringify({
+        theme: theme.value,
+        effect: effect.value,
+        isAutoStart: isAutoStart.value
+      }))
+    } catch {
+      console.error('Failed to save settings to localStorage')
+    }
+  }
+
+  const setTheme = async (newTheme: Theme) => {
+    theme.value = newTheme
+    await applyTheme()
+    saveSettings()
+  }
+
+  const setEffect = async (newEffect: EffectType) => {
+    effect.value = newEffect
+    await applyEffect()
+    saveSettings()
+  }
+
+  const toggleAutoStart = () => {
+    isAutoStart.value = !isAutoStart.value
+    saveSettings()
+  }
+
+  const applyTheme = async () => {
+    const root = document.documentElement
+    root.classList.remove('dark')
+
+    let isDark = false
+    if (theme.value === 'dark') {
+      isDark = true
+      root.classList.add('dark')
+    } else if (theme.value === 'system') {
+      isDark = window.matchMedia('(prefers-color-scheme: dark)').matches
+      if (isDark) {
+        root.classList.add('dark')
+      }
+    }
+
+    try {
+      const tauriWindow = getCurrentWindow()
+      await tauriWindow.setTheme(isDark ? 'dark' : 'light')
+    } catch (e) {
+      console.error('Failed to set window theme:', e)
+    }
+
+    await applyEffect()
+  }
+
+  const applyEffect = async () => {
+    const root = document.documentElement
+    root.classList.remove('effect-mica', 'effect-acrylic', 'effect-normal')
+    root.classList.add(`effect-${effect.value}`)
+
+    try {
+      const tauriWindow = getCurrentWindow()
+      
+      const isDark = root.classList.contains('dark')
+
+      await tauriWindow.clearEffects()
+
+      if (effect.value === 'normal') {
+        await tauriWindow.setBackgroundColor(isDark ? '#0f172a' : '#ffffff')
+      } else if (effect.value === 'mica') {
+        await tauriWindow.setEffects({
+          effects: [Effect.Mica],
+          color: isDark ? '#1e293b' : '#f1f5f9'
+        })
+        await tauriWindow.setBackgroundColor('#00000000')
+      } else if (effect.value === 'acrylic') {
+        await tauriWindow.setEffects({
+          effects: [Effect.Acrylic],
+          color: isDark ? '#1e293b' : '#f1f5f9'
+        })
+        await tauriWindow.setBackgroundColor('#00000000')
+      }
+    } catch (e) {
+      console.error('Failed to set window effects:', e)
+    }
+  }
+
+  const handleSystemThemeChange = async (e: MediaQueryListEvent) => {
+    if (theme.value === 'system') {
+      const root = document.documentElement
+      if (e.matches) {
+        root.classList.add('dark')
+      } else {
+        root.classList.remove('dark')
+      }
+
+      try {
+        const tauriWindow = getCurrentWindow()
+        await tauriWindow.setTheme(e.matches ? 'dark' : 'light')
+      } catch (err) {
+        console.error('Failed to update window theme on system change:', err)
+      }
+
+      await applyEffect()
+    }
+  }
+
+  const init = async () => {
+    loadSettings()
+    await applyTheme()
+    await applyEffect()
+    
+    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)')
+    mediaQuery.addEventListener('change', handleSystemThemeChange)
+    
+    isInitialized.value = true
+  }
+
+  return {
+    theme,
+    effect,
+    isAutoStart,
+    isInitialized,
+    setTheme,
+    setEffect,
+    toggleAutoStart,
+    applyTheme,
+    applyEffect,
+    init,
+    loadSettings
+  }
+})