diff --git a/frontend/src/components/layout/Sidebar.tsx b/frontend/src/components/layout/Sidebar.tsx
index f41b619..54fb7ee 100644
--- a/frontend/src/components/layout/Sidebar.tsx
+++ b/frontend/src/components/layout/Sidebar.tsx
@@ -83,28 +83,20 @@ export default function Sidebar({ collapsed, onToggle, mobileOpen, onMobileClose
{
+ navigate('/projects');
+ if (mobileOpen) onMobileClose();
+ }}
>
-
{
- navigate('/projects');
- if (mobileOpen) onMobileClose();
- }}
- />
+
{showExpanded && (
<>
- {
- navigate('/projects');
- if (mobileOpen) onMobileClose();
- }}
- >
+
Projects
{trackedProjects && trackedProjects.length > 0 && (
diff --git a/frontend/src/hooks/useLock.tsx b/frontend/src/hooks/useLock.tsx
index fed762d..cdb2e1e 100644
--- a/frontend/src/hooks/useLock.tsx
+++ b/frontend/src/hooks/useLock.tsx
@@ -7,13 +7,15 @@ import {
useRef,
type ReactNode,
} from 'react';
-import { useIsMutating } from '@tanstack/react-query';
+import { useIsMutating, useQueryClient } from '@tanstack/react-query';
import { useSettings } from '@/hooks/useSettings';
import api from '@/lib/api';
+import type { AuthStatus } from '@/types';
interface LockContextValue {
isLocked: boolean;
- lock: () => void;
+ isLockResolved: boolean;
+ lock: () => Promise;
unlock: (password: string) => Promise;
}
@@ -23,7 +25,19 @@ const ACTIVITY_EVENTS = ['mousemove', 'keydown', 'click', 'scroll', 'touchstart'
const THROTTLE_MS = 5_000; // only reset timer every 5s of activity
export function LockProvider({ children }: { children: ReactNode }) {
- const [isLocked, setIsLocked] = useState(false);
+ const queryClient = useQueryClient();
+
+ // Initialize lock state from the auth status cache (server-persisted)
+ const [isLocked, setIsLocked] = useState(() => {
+ const cached = queryClient.getQueryData(['auth']);
+ return cached?.is_locked ?? false;
+ });
+
+ // Track whether lock state has been definitively resolved from the server
+ const [isLockResolved, setIsLockResolved] = useState(() => {
+ return queryClient.getQueryData(['auth']) !== undefined;
+ });
+
const { settings } = useSettings();
const activeMutations = useIsMutating();
@@ -32,8 +46,40 @@ export function LockProvider({ children }: { children: ReactNode }) {
const activeMutationsRef = useRef(activeMutations);
activeMutationsRef.current = activeMutations;
- const lock = useCallback(() => {
+ // Subscribe to auth query updates to catch server lock state on refresh
+ useEffect(() => {
+ const unsubscribe = queryClient.getQueryCache().subscribe((event) => {
+ if (
+ event.type === 'updated' &&
+ (event.action.type === 'success' || event.action.type === 'error') &&
+ event.query.queryKey[0] === 'auth'
+ ) {
+ setIsLockResolved(true);
+ if (event.action.type === 'success') {
+ const data = event.query.state.data as AuthStatus | undefined;
+ if (data?.is_locked) {
+ setIsLocked(true);
+ }
+ }
+ }
+ });
+ return unsubscribe;
+ }, [queryClient]);
+
+ // Listen for 423 responses from the API interceptor (server-side lock enforcement)
+ useEffect(() => {
+ const handler = () => setIsLocked(true);
+ window.addEventListener('umbra:session-locked', handler);
+ return () => window.removeEventListener('umbra:session-locked', handler);
+ }, []);
+
+ const lock = useCallback(async () => {
setIsLocked(true);
+ try {
+ await api.post('/auth/lock');
+ } catch {
+ // Lock locally even if server call fails — defense in depth
+ }
}, []);
const unlock = useCallback(async (password: string) => {
@@ -41,8 +87,12 @@ export function LockProvider({ children }: { children: ReactNode }) {
if (data.verified) {
setIsLocked(false);
lastActivityRef.current = Date.now();
+ // Update auth cache to reflect unlocked state
+ queryClient.setQueryData(['auth'], (old) =>
+ old ? { ...old, is_locked: false } : old
+ );
}
- }, []);
+ }, [queryClient]);
// Auto-lock idle timer
useEffect(() => {
@@ -97,7 +147,7 @@ export function LockProvider({ children }: { children: ReactNode }) {
}, [settings?.auto_lock_enabled, settings?.auto_lock_minutes, isLocked, lock]);
return (
-
+
{children}
);
diff --git a/frontend/src/hooks/usePrefetch.ts b/frontend/src/hooks/usePrefetch.ts
new file mode 100644
index 0000000..db78bab
--- /dev/null
+++ b/frontend/src/hooks/usePrefetch.ts
@@ -0,0 +1,72 @@
+import { useEffect, useRef } from 'react';
+import { useQueryClient } from '@tanstack/react-query';
+import api from '@/lib/api';
+import { useSettings } from './useSettings';
+
+/**
+ * Prefetches main page data in the background after the app unlocks.
+ * Ensures cache is warm before the user navigates to each tab,
+ * eliminating the skeleton flash on first visit.
+ */
+export function usePrefetch(enabled: boolean) {
+ const queryClient = useQueryClient();
+ const { settings } = useSettings();
+ const hasPrefetched = useRef(false);
+ const prevEnabled = useRef(false);
+
+ // Reset on re-lock so subsequent unlocks refresh stale data (W-02)
+ useEffect(() => {
+ if (prevEnabled.current && !enabled) {
+ hasPrefetched.current = false;
+ }
+ prevEnabled.current = enabled;
+ }, [enabled]);
+
+ useEffect(() => {
+ // Wait for settings to load so upcoming_days is accurate (S-05)
+ if (!enabled || hasPrefetched.current || !settings) return;
+ hasPrefetched.current = true;
+
+ const now = new Date();
+ const clientDate = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}-${String(now.getDate()).padStart(2, '0')}`;
+ const days = settings.upcoming_days || 7;
+
+ // Prefetch all main page queries (no-op if already cached and fresh)
+ queryClient.prefetchQuery({
+ queryKey: ['dashboard'],
+ queryFn: () => api.get(`/dashboard?client_date=${clientDate}`).then(r => r.data),
+ staleTime: 60_000,
+ });
+
+ queryClient.prefetchQuery({
+ queryKey: ['upcoming', days],
+ queryFn: () => api.get(`/upcoming?days=${days}&client_date=${clientDate}`).then(r => r.data),
+ staleTime: 60_000,
+ });
+
+ queryClient.prefetchQuery({
+ queryKey: ['todos'],
+ queryFn: () => api.get('/todos').then(r => r.data),
+ });
+
+ queryClient.prefetchQuery({
+ queryKey: ['reminders'],
+ queryFn: () => api.get('/reminders').then(r => r.data),
+ });
+
+ queryClient.prefetchQuery({
+ queryKey: ['projects'],
+ queryFn: () => api.get('/projects').then(r => r.data),
+ });
+
+ queryClient.prefetchQuery({
+ queryKey: ['people'],
+ queryFn: () => api.get('/people').then(r => r.data),
+ });
+
+ queryClient.prefetchQuery({
+ queryKey: ['locations'],
+ queryFn: () => api.get('/locations').then(r => r.data),
+ });
+ }, [enabled, queryClient, settings]);
+}
diff --git a/frontend/src/hooks/useTheme.ts b/frontend/src/hooks/useTheme.ts
index 27d4f5d..59cf453 100644
--- a/frontend/src/hooks/useTheme.ts
+++ b/frontend/src/hooks/useTheme.ts
@@ -15,16 +15,33 @@ const ACCENT_PRESETS: Record = {
export function useTheme() {
const { settings } = useSettings();
+ // Only apply accent color once settings have loaded from the API.
+ // Creates or updates a