khal-os 1.260324.2

package/src/stores/keybind-store.ts

@@ -0,0 +1,66 @@
+import { create } from 'zustand';
+import { DEFAULT_SHORTCUTS } from '@/lib/keyboard/defaults';
+import type { KeyCombo, ShortcutDefinition } from '@/lib/keyboard/types';
+
+const STORAGE_KEY = 'sandcastle:keybinds';
+
+interface KeybindStore {
+	overrides: Record<string, KeyCombo | null>;
+	definitions: ShortcutDefinition[];
+	/** When true, the global listener ignores all keypresses (e.g. during rebinding) */
+	suspended: boolean;
+
+	getBinding: (id: string) => KeyCombo | null;
+	setBinding: (id: string, combo: KeyCombo | null) => void;
+	resetBinding: (id: string) => void;
+	resetAll: () => void;
+	setSuspended: (value: boolean) => void;
+}
+
+function loadOverrides(): Record<string, KeyCombo | null> {
+	if (typeof window === 'undefined') return {};
+	try {
+		const raw = localStorage.getItem(STORAGE_KEY);
+		if (raw) return JSON.parse(raw);
+	} catch {}
+	return {};
+}
+
+function saveOverrides(overrides: Record<string, KeyCombo | null>) {
+	try {
+		localStorage.setItem(STORAGE_KEY, JSON.stringify(overrides));
+	} catch {}
+}
+
+export const useKeybindStore = create<KeybindStore>((set, get) => ({
+	overrides: loadOverrides(),
+	definitions: DEFAULT_SHORTCUTS,
+	suspended: false,
+
+	setSuspended: (value) => set({ suspended: value }),
+
+	getBinding: (id) => {
+		const { overrides, definitions } = get();
+		if (id in overrides) return overrides[id];
+		const def = definitions.find((d) => d.id === id);
+		return def?.defaultBinding ?? null;
+	},
+
+	setBinding: (id, combo) => {
+		const next = { ...get().overrides, [id]: combo };
+		set({ overrides: next });
+		saveOverrides(next);
+	},
+
+	resetBinding: (id) => {
+		const next = { ...get().overrides };
+		delete next[id];
+		set({ overrides: next });
+		saveOverrides(next);
+	},
+
+	resetAll: () => {
+		set({ overrides: {} });
+		saveOverrides({});
+	},
+}));

package/src/stores/notification-store.ts

@@ -0,0 +1,271 @@
+import { create } from 'zustand';
+
+export type NotificationUrgency = 'low' | 'normal' | 'critical';
+export type DesktopNotifMode = 'background' | 'always' | 'off';
+
+export interface DesktopNotification {
+	id: number;
+	replacesId: number;
+	appName: string;
+	summary: string;
+	body: string;
+	icon: string | null;
+	actions: string[];
+	expires: number;
+	timestamp: number;
+	read: boolean;
+	urgency: NotificationUrgency;
+	category: string | null;
+	transient: boolean;
+	workspaceId: string | null;
+}
+
+export interface TrayIcon {
+	wid: number;
+	title: string;
+	icon: string | null;
+}
+
+interface NotificationStore {
+	notifications: DesktopNotification[];
+	history: DesktopNotification[];
+	trayIcons: Map<number, TrayIcon>;
+	centerOpen: boolean;
+	unreadCount: number;
+
+	// Preferences
+	doNotDisturb: boolean;
+	desktopNotifMode: DesktopNotifMode;
+	browserPermission: NotificationPermission;
+
+	setDoNotDisturb: (value: boolean) => void;
+	setDesktopNotifMode: (mode: DesktopNotifMode) => void;
+	requestBrowserPermission: () => Promise<NotificationPermission>;
+	syncBrowserPermission: () => void;
+
+	addNotification: (
+		notification: Omit<
+			DesktopNotification,
+			'timestamp' | 'read' | 'appName' | 'urgency' | 'category' | 'transient' | 'workspaceId'
+		> &
+			Partial<Pick<DesktopNotification, 'appName' | 'urgency' | 'category' | 'transient' | 'workspaceId'>>
+	) => void;
+	dismissNotification: (id: number) => void;
+	hideNotification: (id: number) => void;
+	clearHistory: () => void;
+	markAllRead: () => void;
+	toggleCenter: () => void;
+	closeCenter: () => void;
+
+	addTrayIcon: (icon: TrayIcon) => void;
+	removeTrayIcon: (wid: number) => void;
+	updateTrayIcon: (wid: number, updates: Partial<TrayIcon>) => void;
+}
+
+const MAX_VISIBLE = 5;
+const MAX_HISTORY = 50;
+
+const PREFS_KEY = 'sandcastle_notification_prefs';
+
+function loadPrefs(): {
+	doNotDisturb: boolean;
+	desktopNotifMode: DesktopNotifMode;
+} {
+	if (typeof window === 'undefined') return { doNotDisturb: false, desktopNotifMode: 'background' };
+	try {
+		const raw = localStorage.getItem(PREFS_KEY);
+		if (raw) return JSON.parse(raw);
+	} catch {}
+	return { doNotDisturb: false, desktopNotifMode: 'background' };
+}
+
+function savePrefs(prefs: { doNotDisturb: boolean; desktopNotifMode: DesktopNotifMode }) {
+	try {
+		localStorage.setItem(PREFS_KEY, JSON.stringify(prefs));
+	} catch {}
+}
+
+function getBrowserPermission(): NotificationPermission {
+	if (typeof window === 'undefined' || !('Notification' in window)) return 'denied';
+	return Notification.permission;
+}
+
+function sendBrowserNotification(notif: DesktopNotification) {
+	if (typeof window === 'undefined' || !('Notification' in window) || Notification.permission !== 'granted') return;
+
+	const n = new Notification(notif.summary, {
+		body: notif.body || undefined,
+		icon: notif.icon || undefined,
+		tag: String(notif.id),
+		silent: notif.urgency === 'low',
+	});
+
+	n.onclick = () => {
+		window.focus();
+		n.close();
+	};
+
+	if (notif.expires > 0) {
+		setTimeout(() => n.close(), notif.expires);
+	} else if (notif.urgency !== 'critical') {
+		setTimeout(() => n.close(), 6000);
+	}
+}
+
+const initialPrefs = loadPrefs();
+
+export const useNotificationStore = create<NotificationStore>()((set, get) => ({
+	notifications: [],
+	history: [],
+	trayIcons: new Map(),
+	centerOpen: false,
+	unreadCount: 0,
+
+	doNotDisturb: initialPrefs.doNotDisturb,
+	desktopNotifMode: initialPrefs.desktopNotifMode,
+	browserPermission: getBrowserPermission(),
+
+	setDoNotDisturb: (value) => {
+		set({ doNotDisturb: value });
+		savePrefs({ doNotDisturb: value, desktopNotifMode: get().desktopNotifMode });
+	},
+
+	setDesktopNotifMode: (mode) => {
+		set({ desktopNotifMode: mode });
+		savePrefs({ doNotDisturb: get().doNotDisturb, desktopNotifMode: mode });
+	},
+
+	requestBrowserPermission: async () => {
+		if (typeof window === 'undefined' || !('Notification' in window)) return 'denied';
+		const result = await Notification.requestPermission();
+		set({ browserPermission: result });
+		return result;
+	},
+
+	syncBrowserPermission: () => {
+		set({ browserPermission: getBrowserPermission() });
+	},
+
+	addNotification: (notification) => {
+		const full: DesktopNotification = {
+			...notification,
+			appName: notification.appName ?? '',
+			urgency: notification.urgency ?? 'normal',
+			category: notification.category ?? null,
+			transient: notification.transient ?? false,
+			workspaceId: notification.workspaceId ?? null,
+			timestamp: Date.now(),
+			read: false,
+		};
+
+		const { doNotDisturb, desktopNotifMode, browserPermission } = get();
+
+		// Always add to history regardless of DND
+		set((state) => {
+			const history = full.transient ? state.history : [full, ...state.history].slice(0, MAX_HISTORY);
+
+			// In DND mode, skip visible toasts (still record in history)
+			if (doNotDisturb && full.urgency !== 'critical') {
+				return {
+					history,
+					unreadCount: full.transient ? state.unreadCount : state.unreadCount + 1,
+				};
+			}
+
+			let notifications = [...state.notifications];
+
+			if (notification.replacesId) {
+				notifications = notifications.filter((n) => n.id !== notification.replacesId);
+			}
+
+			notifications = [full, ...notifications].slice(0, MAX_VISIBLE);
+
+			return {
+				notifications,
+				history,
+				unreadCount: full.transient ? state.unreadCount : state.unreadCount + 1,
+			};
+		});
+
+		// Bridge to browser desktop notifications
+		if (browserPermission === 'granted' && desktopNotifMode !== 'off' && !full.transient) {
+			const shouldSend = desktopNotifMode === 'always' || (desktopNotifMode === 'background' && document.hidden);
+			if (shouldSend) {
+				sendBrowserNotification(full);
+			}
+		}
+
+		const isCritical = full.urgency === 'critical';
+		if (full.expires > 0) {
+			setTimeout(() => {
+				get().hideNotification(full.id);
+			}, full.expires);
+		} else if (!isCritical) {
+			setTimeout(() => {
+				get().hideNotification(full.id);
+			}, 6000);
+		}
+	},
+
+	dismissNotification: (id) => {
+		set((state) => ({
+			notifications: state.notifications.filter((n) => n.id !== id),
+		}));
+	},
+
+	hideNotification: (id) => {
+		set((state) => ({
+			notifications: state.notifications.filter((n) => n.id !== id),
+		}));
+	},
+
+	clearHistory: () => {
+		set({ history: [], unreadCount: 0 });
+	},
+
+	markAllRead: () => {
+		set((state) => ({
+			history: state.history.map((n) => ({ ...n, read: true })),
+			unreadCount: 0,
+		}));
+	},
+
+	toggleCenter: () => {
+		const opening = !get().centerOpen;
+		set({ centerOpen: opening });
+		if (opening) {
+			get().markAllRead();
+		}
+	},
+
+	closeCenter: () => {
+		set({ centerOpen: false });
+	},
+
+	addTrayIcon: (icon) => {
+		set((state) => {
+			const next = new Map(state.trayIcons);
+			next.set(icon.wid, icon);
+			return { trayIcons: next };
+		});
+	},
+
+	removeTrayIcon: (wid) => {
+		set((state) => {
+			const next = new Map(state.trayIcons);
+			next.delete(wid);
+			return { trayIcons: next };
+		});
+	},
+
+	updateTrayIcon: (wid, updates) => {
+		set((state) => {
+			const next = new Map(state.trayIcons);
+			const existing = next.get(wid);
+			if (existing) {
+				next.set(wid, { ...existing, ...updates });
+			}
+			return { trayIcons: next };
+		});
+	},
+}));

package/src/stores/theme-store.ts

@@ -0,0 +1,25 @@
+import { create } from 'zustand';
+import { persist } from 'zustand/middleware';
+
+type ThemeMode = 'light' | 'dark' | 'system';
+
+interface ThemeStore {
+	mode: ThemeMode;
+	setMode: (mode: ThemeMode) => void;
+	reduceMotion: boolean;
+	setReduceMotion: (value: boolean) => void;
+}
+
+export const useThemeStore = create<ThemeStore>()(
+	persist(
+		(set) => ({
+			mode: 'dark' as ThemeMode,
+			setMode: (mode) => set({ mode }),
+			reduceMotion: false,
+			setReduceMotion: (reduceMotion) => set({ reduceMotion }),
+		}),
+		{
+			name: 'khal-theme',
+		}
+	)
+);

package/src/stores/window-store.ts

@@ -0,0 +1,294 @@
+import { v4 as uuid } from 'uuid';
+import { create } from 'zustand';
+import { persist } from 'zustand/middleware';
+import type { SnapZone, WindowPosition, WindowSize, WindowState } from '@/types/window';
+
+interface WindowStore {
+	windowsByWorkspace: Record<string, WindowState[]>;
+	activeWorkspaceId: string | null;
+	nextZIndex: number;
+
+	getWindows: () => WindowState[];
+	setActiveWorkspace: (id: string | null) => void;
+	loadWindowState: (workspaceId: string, windows: WindowState[]) => void;
+
+	openWindow: (opts: {
+		title: string;
+		appId: string;
+		id?: string;
+		width?: number;
+		height?: number;
+		x?: number;
+		y?: number;
+		meta?: Record<string, unknown>;
+	}) => string;
+	closeWindow: (id: string) => void;
+	removeWindowImmediate: (id: string) => void;
+	focusWindow: (id: string) => void;
+	minimizeWindow: (id: string) => void;
+	maximizeWindow: (id: string) => void;
+	restoreWindow: (id: string) => void;
+	moveWindow: (id: string, position: WindowPosition) => void;
+	resizeWindow: (id: string, size: WindowSize) => void;
+	snapWindow: (id: string, zone: SnapZone) => void;
+	unsnapWindow: (id: string) => void;
+	setWindowTitle: (id: string, title: string) => void;
+	updateWindowMeta: (id: string, meta: Record<string, unknown>) => void;
+	getTopmostWindow: () => WindowState | undefined;
+	getSerializableState: (workspaceId?: string) => WindowState[];
+}
+
+const DEFAULT_WIDTH = 800;
+const DEFAULT_HEIGHT = 600;
+const CASCADE_OFFSET = 30;
+
+function currentWindows(state: {
+	windowsByWorkspace: Record<string, WindowState[]>;
+	activeWorkspaceId: string | null;
+}): WindowState[] {
+	if (!state.activeWorkspaceId) return [];
+	return state.windowsByWorkspace[state.activeWorkspaceId] || [];
+}
+
+function updateCurrentWindows(
+	state: { windowsByWorkspace: Record<string, WindowState[]>; activeWorkspaceId: string | null },
+	updater: (windows: WindowState[]) => WindowState[]
+) {
+	if (!state.activeWorkspaceId) return state.windowsByWorkspace;
+	const current = state.windowsByWorkspace[state.activeWorkspaceId] || [];
+	return {
+		...state.windowsByWorkspace,
+		[state.activeWorkspaceId]: updater(current),
+	};
+}
+
+export const useWindowStore = create<WindowStore>()(
+	persist(
+		(set, get) => ({
+			windowsByWorkspace: {},
+			activeWorkspaceId: null,
+			nextZIndex: 1,
+
+			getWindows: () => currentWindows(get()),
+
+			setActiveWorkspace: (id) => {
+				set({ activeWorkspaceId: id });
+			},
+
+			loadWindowState: (workspaceId, windows) => {
+				set((state) => ({
+					windowsByWorkspace: {
+						...state.windowsByWorkspace,
+						[workspaceId]: windows,
+					},
+					nextZIndex: Math.max(state.nextZIndex, ...windows.map((w) => w.zIndex + 1), 1),
+				}));
+			},
+
+			openWindow: (opts) => {
+				const id = opts.id ?? uuid();
+				set((state) => {
+					const windows = currentWindows(state);
+					const cascade = windows.length * CASCADE_OFFSET;
+					const z = state.nextZIndex;
+					const win: WindowState = {
+						id,
+						title: opts.title,
+						appId: opts.appId,
+						position: {
+							x: opts.x ?? 100 + (cascade % 300),
+							y: opts.y ?? 100 + (cascade % 200),
+						},
+						size: {
+							width: opts.width ?? DEFAULT_WIDTH,
+							height: opts.height ?? DEFAULT_HEIGHT,
+						},
+						minimized: false,
+						maximized: false,
+						focused: true,
+						zIndex: z,
+						...(opts.meta && { meta: opts.meta }),
+					};
+
+					return {
+						windowsByWorkspace: updateCurrentWindows(state, (ws) => [
+							...ws.map((w) => ({ ...w, focused: false })),
+							win,
+						]),
+						nextZIndex: z + 1,
+					};
+				});
+				return id;
+			},
+
+			closeWindow: (id) => {
+				// First, set closing flag so components can react
+				set((state) => ({
+					windowsByWorkspace: updateCurrentWindows(state, (ws) =>
+						ws.map((w) => (w.id === id ? { ...w, closing: true } : w))
+					),
+				}));
+				// Then remove on next tick to give components time to see the flag
+				queueMicrotask(() => {
+					set((state) => ({
+						windowsByWorkspace: updateCurrentWindows(state, (ws) => ws.filter((w) => w.id !== id)),
+					}));
+				});
+			},
+
+			removeWindowImmediate: (id) => {
+				set((state) => ({
+					windowsByWorkspace: updateCurrentWindows(state, (ws) => ws.filter((w) => w.id !== id)),
+				}));
+			},
+
+			focusWindow: (id) => {
+				set((state) => {
+					const z = state.nextZIndex;
+					return {
+						windowsByWorkspace: updateCurrentWindows(state, (ws) =>
+							ws.map((w) =>
+								w.id === id ? { ...w, focused: true, zIndex: z, minimized: false } : { ...w, focused: false }
+							)
+						),
+						nextZIndex: z + 1,
+					};
+				});
+			},
+
+			minimizeWindow: (id) => {
+				set((state) => ({
+					windowsByWorkspace: updateCurrentWindows(state, (ws) =>
+						ws.map((w) => (w.id === id ? { ...w, minimized: true, focused: false } : w))
+					),
+				}));
+			},
+
+			maximizeWindow: (id) => {
+				set((state) => ({
+					windowsByWorkspace: updateCurrentWindows(state, (ws) =>
+						ws.map((w) => (w.id === id ? { ...w, maximized: true } : w))
+					),
+				}));
+			},
+
+			restoreWindow: (id) => {
+				set((state) => ({
+					windowsByWorkspace: updateCurrentWindows(state, (ws) =>
+						ws.map((w) => (w.id === id ? { ...w, maximized: false, minimized: false } : w))
+					),
+				}));
+			},
+
+			moveWindow: (id, position) => {
+				set((state) => ({
+					windowsByWorkspace: updateCurrentWindows(state, (ws) =>
+						ws.map((w) => (w.id === id ? { ...w, position } : w))
+					),
+				}));
+			},
+
+			resizeWindow: (id, size) => {
+				set((state) => ({
+					windowsByWorkspace: updateCurrentWindows(state, (ws) => ws.map((w) => (w.id === id ? { ...w, size } : w))),
+				}));
+			},
+
+			snapWindow: (id, zone) => {
+				if (!zone) return;
+				const TASKBAR_HEIGHT = 44;
+				const vw = globalThis.innerWidth ?? 1280;
+				const vh = (globalThis.innerHeight ?? 800) - TASKBAR_HEIGHT;
+				const halfW = Math.round(vw / 2);
+				const halfH = Math.round(vh / 2);
+
+				const geometry: Record<NonNullable<SnapZone>, { x: number; y: number; w: number; h: number }> = {
+					left: { x: 0, y: 0, w: halfW, h: vh },
+					right: { x: halfW, y: 0, w: vw - halfW, h: vh },
+					top: { x: 0, y: 0, w: vw, h: vh },
+					'top-left': { x: 0, y: 0, w: halfW, h: halfH },
+					'top-right': { x: halfW, y: 0, w: vw - halfW, h: halfH },
+					'bottom-left': { x: 0, y: halfH, w: halfW, h: vh - halfH },
+					'bottom-right': { x: halfW, y: halfH, w: vw - halfW, h: vh - halfH },
+				};
+
+				const g = geometry[zone];
+				set((state) => ({
+					windowsByWorkspace: updateCurrentWindows(state, (ws) =>
+						ws.map((w) => {
+							if (w.id !== id) return w;
+							return {
+								...w,
+								snapped: zone,
+								preSnapPosition: w.snapped ? w.preSnapPosition : w.position,
+								preSnapSize: w.snapped ? w.preSnapSize : w.size,
+								position: { x: g.x, y: g.y },
+								size: { width: g.w, height: g.h },
+								maximized: false,
+							};
+						})
+					),
+				}));
+			},
+
+			unsnapWindow: (id) => {
+				set((state) => ({
+					windowsByWorkspace: updateCurrentWindows(state, (ws) =>
+						ws.map((w) => {
+							if (w.id !== id || !w.snapped) return w;
+							return {
+								...w,
+								snapped: null,
+								position: w.preSnapPosition ?? w.position,
+								size: w.preSnapSize ?? w.size,
+								preSnapPosition: undefined,
+								preSnapSize: undefined,
+							};
+						})
+					),
+				}));
+			},
+
+			setWindowTitle: (id, title) => {
+				set((state) => ({
+					windowsByWorkspace: updateCurrentWindows(state, (ws) => ws.map((w) => (w.id === id ? { ...w, title } : w))),
+				}));
+			},
+
+			updateWindowMeta: (id, meta) => {
+				set((state) => ({
+					windowsByWorkspace: updateCurrentWindows(state, (ws) =>
+						ws.map((w) => (w.id === id ? { ...w, meta: { ...w.meta, ...meta } } : w))
+					),
+				}));
+			},
+
+			getTopmostWindow: () => {
+				const windows = currentWindows(get());
+				const visible = windows.filter((w) => !w.minimized);
+				if (visible.length === 0) return undefined;
+				return visible.reduce((a, b) => (a.zIndex > b.zIndex ? a : b));
+			},
+
+			getSerializableState: (workspaceId) => {
+				const id = workspaceId || get().activeWorkspaceId;
+				if (!id) return [];
+				return get().windowsByWorkspace[id] || [];
+			},
+		}),
+		{
+			name: 'khal-windows',
+			version: 1,
+			partialize: (state) => ({
+				windowsByWorkspace: Object.fromEntries(
+					Object.entries(state.windowsByWorkspace).map(([workspace, windows]) => [
+						workspace,
+						windows.filter((w) => !w.closing).map(({ closing: _, ...rest }) => rest),
+					])
+				),
+				activeWorkspaceId: state.activeWorkspaceId,
+				nextZIndex: state.nextZIndex,
+			}),
+		}
+	)
+);