;
+}
+
+interface ToggleRowProps {
+ readonly label: string;
+ readonly checked: boolean;
+ readonly onChange: (v: boolean) => void;
+}
+
+function ToggleRow({ label, checked, onChange }: ToggleRowProps) {
+ return (
+
+ );
+}
+
+interface NumberRowProps {
+ readonly label: string;
+ readonly value: number;
+ readonly min: number;
+ readonly max: number;
+ readonly onChange: (v: number) => void;
+}
+
+function NumberRow({ label, value, min, max, onChange }: NumberRowProps) {
+ return (
+
+ );
+}
+
+function toggleDisplayIndex(indices: readonly number[], idx: number): number[] {
+ const next = indices.includes(idx)
+ ? indices.filter((i) => i !== idx)
+ : [...indices, idx].sort((a, b) => a - b);
+ return next.length > 0 ? next : [idx];
+}
+
+export function SettingsWindow({
+ settings,
+ monitors,
+ debugOverlay,
+ devtoolsOpen,
+ onUpdate,
+ onSetDebugOverlay,
+ onToggleDevtools,
+ containerRef,
+}: SettingsWindowProps) {
+ return (
+ } className="settings-window">
+ {settings && (
+ <>
+
+ General
+
+ onUpdate({ ...settings, caps: { ...settings.caps, max_focuses: v } })
+ }
+ />
+
+ onUpdate({ ...settings, caps: { ...settings.caps, max_tasks_per_focus: v } })
+ }
+ />
+
+
+
+ Widget
+
+ onUpdate({ ...settings, widget: { ...settings.widget, always_on_top: v } })
+ }
+ />
+
+ onUpdate({ ...settings, widget: { ...settings.widget, confirm_delete: v } })
+ }
+ />
+
+
+ {monitors.length > 0 && (
+
+ Displays
+ {monitors.map((m) => (
+
+ onUpdate({
+ ...settings,
+ displays: {
+ enabled_indices: toggleDisplayIndex(
+ settings.displays.enabled_indices,
+ m.idx,
+ ),
+ },
+ })
+ }
+ />
+ ))}
+
+ )}
+
+
+ Alerts
+
+ onUpdate({
+ ...settings,
+ alerts: { ...settings.alerts, system_notifications: v },
+ })
+ }
+ />
+
+
+ )}
+
+
+ Debug
+
+ {import.meta.env.DEV && (
+ onToggleDevtools()} />
+ )}
+
+
+ );
+}
diff --git a/src/hooks/useDebugOverlay.ts b/src/hooks/useDebugOverlay.ts
index 63553fc..e166fb7 100644
--- a/src/hooks/useDebugOverlay.ts
+++ b/src/hooks/useDebugOverlay.ts
@@ -14,7 +14,7 @@ export interface DebugOverlayState {
}
export function useDebugOverlay(): DebugOverlayState {
- const [visible, setVisible] = useState(import.meta.env.DEV);
+ const [visible, setVisible] = useState(false);
useEffect(() => {
const unsub = subscribeDebugOverlay(setVisible);
diff --git a/src/hooks/useSettingsWindow.ts b/src/hooks/useSettingsWindow.ts
new file mode 100644
index 0000000..67e624f
--- /dev/null
+++ b/src/hooks/useSettingsWindow.ts
@@ -0,0 +1,55 @@
+import { useCallback, useEffect, useState } from "react";
+import { getDebugOverlay, getDevtoolsOpen, setDebugOverlay, toggleDevtools } from "../api/debug";
+import { getMonitors } from "../api/monitors";
+import { getSettings, updateSettings } from "../api/settings";
+import type { MonitorInfo } from "../types/monitor";
+import type { Settings } from "../types/settings";
+
+export interface SettingsWindowState {
+ settings: Settings | null;
+ monitors: MonitorInfo[];
+ debugOverlay: boolean;
+ devtoolsOpen: boolean;
+ update: (next: Settings) => void;
+ setDebugOverlayEnabled: (enabled: boolean) => void;
+ toggleDevtoolsOpen: () => void;
+}
+
+export function useSettingsWindow(): SettingsWindowState {
+ const [settings, setSettings] = useState(null);
+ const [monitors, setMonitors] = useState([]);
+ const [debugOverlay, setDebugOverlayState] = useState(false); // real state loaded from backend on mount
+ const [devtoolsOpen, setDevtoolsOpen] = useState(false);
+
+ useEffect(() => {
+ getSettings().then(setSettings).catch(console.error);
+ getMonitors().then(setMonitors).catch(console.error);
+ getDebugOverlay().then(setDebugOverlayState).catch(console.error);
+ getDevtoolsOpen().then(setDevtoolsOpen).catch(console.error);
+ }, []);
+
+ const update = useCallback((next: Settings) => {
+ setSettings(next);
+ updateSettings(next).catch(console.error);
+ }, []);
+
+ const setDebugOverlayEnabled = useCallback((enabled: boolean) => {
+ setDebugOverlayState(enabled);
+ setDebugOverlay(enabled).catch(console.error);
+ }, []);
+
+ const toggleDevtoolsOpen = useCallback(() => {
+ setDevtoolsOpen((prev) => !prev);
+ toggleDevtools().catch(console.error);
+ }, []);
+
+ return {
+ settings,
+ monitors,
+ debugOverlay,
+ devtoolsOpen,
+ update,
+ setDebugOverlayEnabled,
+ toggleDevtoolsOpen,
+ };
+}
diff --git a/src/settings.tsx b/src/settings.tsx
new file mode 100644
index 0000000..e31b6b8
--- /dev/null
+++ b/src/settings.tsx
@@ -0,0 +1,53 @@
+import { LogicalSize, getCurrentWindow } from "@tauri-apps/api/window";
+import React, { useEffect, useRef } from "react";
+import ReactDOM from "react-dom/client";
+import { SettingsWindow } from "./components/SettingsWindow";
+import { useSettingsWindow } from "./hooks/useSettingsWindow";
+import "./styles.css";
+
+function SettingsApp() {
+ const containerRef = useRef(null);
+ const {
+ settings,
+ monitors,
+ debugOverlay,
+ devtoolsOpen,
+ update,
+ setDebugOverlayEnabled,
+ toggleDevtoolsOpen,
+ } = useSettingsWindow();
+
+ useEffect(() => {
+ const el = containerRef.current;
+ if (!el) return;
+ const win = getCurrentWindow();
+ const observer = new ResizeObserver(() => {
+ const h = Math.ceil(el.getBoundingClientRect().height);
+ win.setSize(new LogicalSize(380, h)).catch(console.error);
+ });
+ observer.observe(el);
+ return () => observer.disconnect();
+ }, []);
+
+ return (
+
+ );
+}
+
+const rootEl = document.getElementById("root");
+if (!rootEl) throw new Error("missing #root");
+
+ReactDOM.createRoot(rootEl).render(
+
+
+ ,
+);
diff --git a/src/styles.css b/src/styles.css
index 2898352..dbd1f03 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -526,3 +526,69 @@ body,
.pig-detail-add-task:focus {
border-color: rgba(255, 255, 255, 0.3);
}
+
+.settings-window {
+ display: flex;
+ flex-direction: column;
+ background: #16161a;
+ color: #f5f5f7;
+ padding: 12px 16px 16px;
+ box-sizing: border-box;
+}
+
+.settings-section {
+ margin-bottom: 12px;
+}
+
+.settings-section:last-child {
+ margin-bottom: 0;
+}
+
+.settings-section-title {
+ font-size: 10px;
+ font-weight: 600;
+ text-transform: uppercase;
+ letter-spacing: 0.07em;
+ opacity: 0.4;
+ margin: 0 0 4px;
+}
+
+.settings-row {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 4px 0;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+ cursor: pointer;
+}
+
+.settings-row:last-child {
+ border-bottom: none;
+}
+
+.settings-row-label {
+ font-size: 12px;
+}
+
+.settings-toggle {
+ cursor: pointer;
+ width: 14px;
+ height: 14px;
+ accent-color: #636ae8;
+}
+
+.settings-number {
+ background: rgba(255, 255, 255, 0.08);
+ border: 1px solid rgba(255, 255, 255, 0.18);
+ border-radius: 5px;
+ color: #f5f5f7;
+ font-size: 12px;
+ padding: 2px 5px;
+ width: 48px;
+ text-align: right;
+ outline: none;
+}
+
+.settings-number:focus {
+ border-color: rgba(255, 255, 255, 0.4);
+}
diff --git a/src/types/monitor.ts b/src/types/monitor.ts
new file mode 100644
index 0000000..8968410
--- /dev/null
+++ b/src/types/monitor.ts
@@ -0,0 +1,4 @@
+export interface MonitorInfo {
+ readonly idx: number;
+ readonly label: string;
+}
diff --git a/src/types/settings.ts b/src/types/settings.ts
new file mode 100644
index 0000000..dd27f36
--- /dev/null
+++ b/src/types/settings.ts
@@ -0,0 +1,24 @@
+export interface Caps {
+ readonly max_focuses: number;
+ readonly max_tasks_per_focus: number;
+}
+
+export interface Alerts {
+ readonly system_notifications: boolean;
+}
+
+export interface Widget {
+ readonly always_on_top: boolean;
+ readonly confirm_delete: boolean;
+}
+
+export interface DisplayConfig {
+ readonly enabled_indices: readonly number[];
+}
+
+export interface Settings {
+ readonly caps: Caps;
+ readonly alerts: Alerts;
+ readonly widget: Widget;
+ readonly displays: DisplayConfig;
+}
diff --git a/vite.config.ts b/vite.config.ts
index 44b7c9c..7d165df 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -17,6 +17,7 @@ export default defineConfig({
input: {
main: resolve(__dirname, "index.html"),
newFocus: resolve(__dirname, "new-focus.html"),
+ settings: resolve(__dirname, "settings.html"),
},
},
},