feat(01-04): add onboarding wizard with settings API and persisted state
- Settings API: GET/PUT /api/settings/:key with SQLite persistence - useSettings hook with TanStack Query for settings CRUD - OnboardingWizard: 3-step modal overlay (welcome, create category, add item) - Root layout checks onboarding completion flag before rendering wizard - Skip option available at every step, all paths persist completion to DB Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
37
src/client/hooks/useSettings.ts
Normal file
37
src/client/hooks/useSettings.ts
Normal file
@@ -0,0 +1,37 @@
|
||||
import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
|
||||
import { apiGet, apiPut } from "../lib/api";
|
||||
|
||||
interface Setting {
|
||||
key: string;
|
||||
value: string;
|
||||
}
|
||||
|
||||
export function useSetting(key: string) {
|
||||
return useQuery({
|
||||
queryKey: ["settings", key],
|
||||
queryFn: async () => {
|
||||
try {
|
||||
const result = await apiGet<Setting>(`/api/settings/${key}`);
|
||||
return result.value;
|
||||
} catch (err: any) {
|
||||
if (err?.status === 404) return null;
|
||||
throw err;
|
||||
}
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
export function useUpdateSetting() {
|
||||
const queryClient = useQueryClient();
|
||||
return useMutation({
|
||||
mutationFn: ({ key, value }: { key: string; value: string }) =>
|
||||
apiPut<Setting>(`/api/settings/${key}`, { value }),
|
||||
onSuccess: (_data, variables) => {
|
||||
queryClient.invalidateQueries({ queryKey: ["settings", variables.key] });
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
export function useOnboardingComplete() {
|
||||
return useSetting("onboardingComplete");
|
||||
}
|
||||
Reference in New Issue
Block a user