From 28088b95667df00ccef7376b4b66de7ac7608888 Mon Sep 17 00:00:00 2001
From: Your Name <you@example.com>
Date: Tue, 17 Feb 2026 21:31:54 +0200
Subject: [PATCH] feat: redesign Settings - amber save, UI zoom, toasts

---
 src/views/Settings.vue | 279 +++++++++++++++++++++++++++++++++++++++++
 1 file changed, 279 insertions(+)
 create mode 100644 src/views/Settings.vue

diff --git a/src/views/Settings.vue b/src/views/Settings.vue
new file mode 100644
index 0000000..11cf9c8
--- /dev/null
+++ b/src/views/Settings.vue
@@ -0,0 +1,279 @@
+<template>
+  <div class="p-6">
+    <h1 class="text-[1.5rem] font-medium text-text-primary mb-6">Settings</h1>
+
+    <div class="space-y-6 max-w-lg">
+      <!-- Billing -->
+      <div>
+        <h2 class="text-[1rem] font-medium text-text-primary mb-4">Billing</h2>
+        <div class="pb-6 border-b border-border-subtle">
+          <label class="block text-[0.6875rem] text-text-tertiary uppercase tracking-[0.08em] mb-1.5">Default Hourly Rate ($)</label>
+          <input
+            v-model.number="hourlyRate"
+            type="number"
+            min="0"
+            step="0.01"
+            class="w-48 px-3 py-2 bg-bg-inset border border-border-subtle rounded text-[0.8125rem] text-text-primary focus:outline-none focus:border-border-visible"
+            placeholder="0.00"
+          />
+          <p class="text-[0.6875rem] text-text-tertiary mt-1.5">Default rate for new projects</p>
+        </div>
+      </div>
+
+      <!-- Timer -->
+      <div>
+        <h2 class="text-[1rem] font-medium text-text-primary mb-4">Timer</h2>
+        <div class="pb-6 border-b border-border-subtle space-y-6">
+          <!-- Idle Detection -->
+          <div class="flex items-center justify-between">
+            <div>
+              <p class="text-[0.8125rem] text-text-primary">Idle Detection</p>
+              <p class="text-[0.6875rem] text-text-secondary mt-0.5">Detect when idle and prompt to continue or stop</p>
+            </div>
+            <button
+              @click="idleDetection = !idleDetection"
+              :class="[
+                'relative inline-flex h-5 w-9 items-center rounded-full transition-colors duration-150',
+                idleDetection ? 'bg-status-running' : 'bg-bg-elevated'
+              ]"
+            >
+              <span
+                :class="[
+                  'inline-block h-3.5 w-3.5 transform rounded-full bg-text-primary transition-transform duration-150',
+                  idleDetection ? 'translate-x-[18px]' : 'translate-x-[3px]'
+                ]"
+              />
+            </button>
+          </div>
+
+          <!-- Reminder Interval -->
+          <div>
+            <label class="block text-[0.6875rem] text-text-tertiary uppercase tracking-[0.08em] mb-1.5">Reminder Interval (minutes)</label>
+            <input
+              v-model.number="reminderInterval"
+              type="number"
+              min="1"
+              max="120"
+              class="w-48 px-3 py-2 bg-bg-inset border border-border-subtle rounded text-[0.8125rem] text-text-primary focus:outline-none focus:border-border-visible"
+            />
+            <p class="text-[0.6875rem] text-text-tertiary mt-1.5">How often to remind while timer is running (0 to disable)</p>
+          </div>
+        </div>
+      </div>
+
+      <!-- Appearance -->
+      <div>
+        <h2 class="text-[1rem] font-medium text-text-primary mb-4">Appearance</h2>
+        <div class="pb-6 border-b border-border-subtle">
+          <div class="flex items-center justify-between">
+            <div>
+              <p class="text-[0.8125rem] text-text-primary">UI Scale</p>
+              <p class="text-xs text-text-secondary mt-0.5">Adjust the interface zoom level</p>
+            </div>
+            <div class="flex items-center gap-2">
+              <button
+                @click="decreaseZoom"
+                class="w-8 h-8 flex items-center justify-center border border-border-visible rounded text-text-secondary hover:text-text-primary hover:bg-bg-elevated transition-colors disabled:opacity-40 disabled:cursor-not-allowed"
+                :disabled="zoomLevel <= 80"
+              >
+                <Minus class="w-3.5 h-3.5" />
+              </button>
+              <span class="w-12 text-center text-sm font-mono text-text-primary">{{ zoomLevel }}%</span>
+              <button
+                @click="increaseZoom"
+                class="w-8 h-8 flex items-center justify-center border border-border-visible rounded text-text-secondary hover:text-text-primary hover:bg-bg-elevated transition-colors disabled:opacity-40 disabled:cursor-not-allowed"
+                :disabled="zoomLevel >= 150"
+              >
+                <Plus class="w-3.5 h-3.5" />
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Data Management -->
+      <div>
+        <h2 class="text-[1rem] font-medium text-text-primary mb-4">Data</h2>
+        <div class="space-y-4">
+          <!-- Export Data -->
+          <div class="flex items-center justify-between">
+            <div>
+              <p class="text-[0.8125rem] text-text-primary">Export All Data</p>
+              <p class="text-[0.6875rem] text-text-secondary mt-0.5">Download all your data as JSON</p>
+            </div>
+            <button
+              @click="exportData"
+              class="px-4 py-2 border border-border-visible text-text-primary text-[0.8125rem] rounded hover:bg-bg-elevated transition-colors duration-150"
+            >
+              Export
+            </button>
+          </div>
+
+          <!-- Clear Data -->
+          <div class="flex items-center justify-between pt-4 border-t border-border-subtle">
+            <div>
+              <p class="text-[0.8125rem] text-text-primary">Clear All Data</p>
+              <p class="text-[0.6875rem] text-text-secondary mt-0.5">Permanently delete all entries, projects, and clients</p>
+            </div>
+            <button
+              @click="showClearDataDialog = true"
+              class="px-4 py-2 border border-status-error text-status-error text-[0.8125rem] font-medium rounded hover:bg-status-error/10 transition-colors duration-150"
+            >
+              Clear Data
+            </button>
+          </div>
+        </div>
+      </div>
+
+      <!-- Save Button -->
+      <div class="flex justify-end pt-4">
+        <button
+          @click="saveSettings"
+          class="px-6 py-2 bg-accent text-bg-base text-[0.8125rem] font-medium rounded hover:bg-accent-hover transition-colors duration-150"
+        >
+          Save Settings
+        </button>
+      </div>
+    </div>
+
+    <!-- Clear Data Confirmation Dialog -->
+    <div
+      v-if="showClearDataDialog"
+      class="fixed inset-0 bg-black/70 backdrop-blur-[4px] flex items-center justify-center z-50"
+      @click.self="showClearDataDialog = false"
+    >
+      <div class="bg-bg-surface border border-border-subtle rounded shadow-[0_1px_3px_rgba(0,0,0,0.3)] w-full max-w-sm mx-4 p-6 animate-modal-enter">
+        <h2 class="text-[1rem] font-semibold text-text-primary mb-2">Clear All Data</h2>
+        <p class="text-[0.75rem] text-text-secondary mb-4">
+          Are you sure you want to delete all your data? This action cannot be undone.
+        </p>
+        <p class="text-[0.6875rem] text-status-error mb-6">
+          This will permanently delete all time entries, projects, clients, and invoices.
+        </p>
+        <div class="flex justify-end gap-3">
+          <button
+            @click="showClearDataDialog = false"
+            class="px-4 py-2 border border-border-subtle text-text-secondary rounded hover:bg-bg-elevated transition-colors duration-150"
+          >
+            Cancel
+          </button>
+          <button
+            @click="clearAllData"
+            class="px-4 py-2 border border-status-error text-status-error font-medium rounded hover:bg-status-error/10 transition-colors duration-150"
+          >
+            Delete Everything
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import { invoke } from '@tauri-apps/api/core'
+import { Plus, Minus } from 'lucide-vue-next'
+import { useSettingsStore } from '../stores/settings'
+import { useToastStore } from '../stores/toast'
+
+const settingsStore = useSettingsStore()
+const toastStore = useToastStore()
+
+// Settings state
+const hourlyRate = ref(0)
+const idleDetection = ref(true)
+const reminderInterval = ref(15)
+const zoomLevel = ref(100)
+
+// Dialog state
+const showClearDataDialog = ref(false)
+
+// Zoom steps
+const zoomSteps = [80, 90, 100, 110, 120, 130, 150]
+
+function increaseZoom() {
+  const currentIndex = zoomSteps.indexOf(zoomLevel.value)
+  if (currentIndex < zoomSteps.length - 1) {
+    zoomLevel.value = zoomSteps[currentIndex + 1]
+  } else if (currentIndex === -1) {
+    const next = zoomSteps.find(s => s > zoomLevel.value)
+    if (next) zoomLevel.value = next
+  }
+  applyZoom()
+}
+
+function decreaseZoom() {
+  const currentIndex = zoomSteps.indexOf(zoomLevel.value)
+  if (currentIndex > 0) {
+    zoomLevel.value = zoomSteps[currentIndex - 1]
+  } else if (currentIndex === -1) {
+    const prev = [...zoomSteps].reverse().find(s => s < zoomLevel.value)
+    if (prev) zoomLevel.value = prev
+  }
+  applyZoom()
+}
+
+function applyZoom() {
+  const app = document.getElementById('app')
+  if (app) {
+    (app.style as any).zoom = `${zoomLevel.value}%`
+  }
+  settingsStore.updateSetting('ui_zoom', zoomLevel.value.toString())
+}
+
+// Save settings
+async function saveSettings() {
+  try {
+    await settingsStore.updateSetting('hourly_rate', hourlyRate.value.toString())
+    await settingsStore.updateSetting('idle_detection', idleDetection.value.toString())
+    await settingsStore.updateSetting('reminder_interval', reminderInterval.value.toString())
+    toastStore.success('Settings saved')
+  } catch (error) {
+    console.error('Failed to save settings:', error)
+    toastStore.error('Failed to save settings')
+  }
+}
+
+// Export all data
+async function exportData() {
+  try {
+    const data = await invoke('export_data')
+
+    // Create and download JSON file
+    const json = JSON.stringify(data, null, 2)
+    const blob = new Blob([json], { type: 'application/json' })
+    const url = URL.createObjectURL(blob)
+    const a = document.createElement('a')
+    a.href = url
+    a.download = `zeroclock-export-${new Date().toISOString().split('T')[0]}.json`
+    a.click()
+    URL.revokeObjectURL(url)
+  } catch (error) {
+    console.error('Failed to export data:', error)
+    toastStore.error('Failed to export data')
+  }
+}
+
+// Clear all data
+async function clearAllData() {
+  try {
+    await invoke('clear_all_data')
+    showClearDataDialog.value = false
+    toastStore.success('All data has been cleared')
+  } catch (error) {
+    console.error('Failed to clear data:', error)
+    toastStore.error('Failed to clear data')
+  }
+}
+
+// Load settings on mount
+onMounted(async () => {
+  await settingsStore.fetchSettings()
+
+  // Set values from store
+  hourlyRate.value = parseFloat(settingsStore.settings.hourly_rate) || 0
+  idleDetection.value = settingsStore.settings.idle_detection !== 'false'
+  reminderInterval.value = parseInt(settingsStore.settings.reminder_interval) || 15
+  zoomLevel.value = parseInt(settingsStore.settings.ui_zoom) || 100
+})
+</script>