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:
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user