Fix frontend UX: debounce saves, Zustand selectors, init race, dialog

- Debounce project config saves: use local state + save-on-blur instead
  of firing IPC requests on every keystroke in text inputs
- Add Zustand selectors to all store consumers to prevent full-store
  re-renders on any state change
- Fix initialization race: chain checkImage after checkDocker resolves
- Fix DockerSettings setTimeout race: await checkImage after save
- Add console.error logging to all 11 empty catch blocks in ProjectCard
- Add keyboard support to AddProjectDialog: Escape to close,
  click-outside-to-close, form submit on Enter, auto-focus

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-02-28 20:42:40 +00:00
parent a03bdccdc7
commit 82f159d2a9
12 changed files with 370 additions and 114 deletions

View File

@@ -1,4 +1,5 @@
import { useEffect } from "react";
import { useShallow } from "zustand/react/shallow";
import Sidebar from "./components/layout/Sidebar";
import TopBar from "./components/layout/TopBar";
import StatusBar from "./components/layout/StatusBar";
@@ -12,13 +13,16 @@ export default function App() {
const { checkDocker, checkImage } = useDocker();
const { checkApiKey, loadSettings } = useSettings();
const { refresh } = useProjects();
const { sessions, activeSessionId } = useAppState();
const { sessions, activeSessionId } = useAppState(
useShallow(s => ({ sessions: s.sessions, activeSessionId: s.activeSessionId }))
);
// Initialize on mount
useEffect(() => {
loadSettings();
checkDocker();
checkImage();
checkDocker().then((available) => {
if (available) checkImage();
});
checkApiKey();
refresh();
}, []); // eslint-disable-line react-hooks/exhaustive-deps