20-02-2026

frontend/src/stores/settings.js

@@ -0,0 +1,73 @@
+import { defineStore } from 'pinia'
+import { ref, watch } from 'vue'
+
+const STORAGE_KEY = 'thatsme-settings'
+
+const FLOATING_LINES_DEFAULTS = {
+  // Linien
+  speed: 1.0,
+  lineCount: 10,
+  spread: 0.05,
+  fanSpread: 0.05,
+  lineSharpness: 8.0,
+  waveFrequency: 7.0,
+  bezierCurvature: 0.2,
+  circleRadius: 75,
+  glowSize: 18,
+  glowStrength: 1.5,
+  // Hintergrund
+  bgCenter: '#0a0514',
+  bgEdge: '#000000',
+  gradientStops: '#e947f5\n#2f4ba2\n#0a0a12',
+  backgroundImage: ''
+}
+
+function loadFromStorage() {
+  try {
+    const stored = localStorage.getItem(STORAGE_KEY)
+    return stored ? JSON.parse(stored) : null
+  } catch {
+    return null
+  }
+}
+
+export { FLOATING_LINES_DEFAULTS }
+
+export const useSettingsStore = defineStore('settings', () => {
+  const stored = loadFromStorage()
+
+  const theme = ref(stored?.theme ?? 'light')
+  const floatingLines = ref(stored?.floatingLines ?? { ...FLOATING_LINES_DEFAULTS })
+
+  function persist() {
+    localStorage.setItem(
+      STORAGE_KEY,
+      JSON.stringify({
+        theme: theme.value,
+        floatingLines: floatingLines.value
+      })
+    )
+  }
+
+  watch([theme, floatingLines], persist, { deep: true })
+
+  function toggleTheme() {
+    theme.value = theme.value === 'light' ? 'dark' : 'light'
+  }
+
+  function updateFloatingLines(updates) {
+    floatingLines.value = { ...floatingLines.value, ...updates }
+  }
+
+  function resetFloatingLines() {
+    floatingLines.value = { ...FLOATING_LINES_DEFAULTS }
+  }
+
+  return {
+    theme,
+    floatingLines,
+    toggleTheme,
+    updateFloatingLines,
+    resetFloatingLines
+  }
+})