From 3d8610abd057846e88e6ece0299768054897370c Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Sun, 4 Jan 2026 17:22:25 +0000
Subject: [PATCH] fix: Persist settings panel preferences to localStorage

Connect SettingsPanel inputs to useSettingsStore:
- Import useSettingsStore hook for state management
- Convert Weekly Hours Target to controlled input with onChange
- Convert Timesheet Reminders to controlled checkbox with onChange
- Settings now persist via Zustand's persist middleware to localStorage

Fixes #10
---
 src/components/settings/SettingsPanel.tsx | 18 ++++++++++++++++--
 1 file changed, 16 insertions(+), 2 deletions(-)

diff --git a/src/components/settings/SettingsPanel.tsx b/src/components/settings/SettingsPanel.tsx
index 99b241f..31b54c2 100644
--- a/src/components/settings/SettingsPanel.tsx
+++ b/src/components/settings/SettingsPanel.tsx
@@ -4,6 +4,7 @@ import { useState, useEffect } from 'react';
 import { Card } from '@/components/ui';
 import { bcClient } from '@/services/bc/bcClient';
 import { useAuth } from '@/services/auth';
+import { useSettingsStore } from '@/hooks/useSettingsStore';
 import {
   BuildingOffice2Icon,
   EnvelopeIcon,
@@ -26,6 +27,7 @@ interface CompanyInfo {
 
 export function SettingsPanel() {
   const { account } = useAuth();
+  const { weeklyHoursTarget, notificationsEnabled, updateSettings } = useSettingsStore();
   const [companyInfo, setCompanyInfo] = useState<CompanyInfo | null>(null);
   const [isLoading, setIsLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
@@ -136,7 +138,14 @@ export function SettingsPanel() {
             </div>
             <input
               type="number"
-              defaultValue={40}
+              value={weeklyHoursTarget}
+              onChange={(e) =>
+                updateSettings({
+                  weeklyHoursTarget: parseInt(e.target.value, 10) || 0,
+                })
+              }
+              min={0}
+              max={168}
               className="w-20 rounded-lg border border-dark-600 bg-dark-800 px-3 py-2 text-dark-100 focus:outline-none focus:ring-2 focus:ring-thyme-500"
             />
           </div>
@@ -146,7 +155,12 @@ export function SettingsPanel() {
               <p className="text-sm text-dark-400">Get reminded to fill in your timesheet</p>
             </div>
             <label className="relative inline-flex cursor-pointer items-center">
-              <input type="checkbox" defaultChecked className="peer sr-only" />
+              <input
+                type="checkbox"
+                checked={notificationsEnabled}
+                onChange={(e) => updateSettings({ notificationsEnabled: e.target.checked })}
+                className="peer sr-only"
+              />
               <div className="peer h-6 w-11 rounded-full bg-dark-600 after:absolute after:left-[2px] after:top-[2px] after:h-5 after:w-5 after:rounded-full after:bg-white after:transition-all after:content-[''] peer-checked:bg-thyme-600 peer-checked:after:translate-x-full peer-focus:outline-none peer-focus:ring-2 peer-focus:ring-thyme-500"></div>
             </label>
           </div>