Function App

apps/desktop/src/renderer/src/App.tsx:31–270

()

import { HubView } from './views/HubView';

export function App() {
  const t = useT();
  const config = useCodesignStore((s) => s.config);
  const configLoaded = useCodesignStore((s) => s.configLoaded);
  const loadConfig = useCodesignStore((s) => s.loadConfig);
  const loadDesigns = useCodesignStore((s) => s.loadDesigns);
  const syncGenerationStatus = useCodesignStore((s) => s.syncGenerationStatus);
  const switchDesign = useCodesignStore((s) => s.switchDesign);
  const setView = useCodesignStore((s) => s.setView);
  const view = useCodesignStore((s) => s.view);
  const previousView = useCodesignStore((s) => s.previousView);
  const designsViewOpen = useCodesignStore((s) => s.designsViewOpen);
  const closeDesignsView = useCodesignStore((s) => s.closeDesignsView);
  const createNewDesign = useCodesignStore((s) => s.createNewDesign);
  const designToDelete = useCodesignStore((s) => s.designToDelete);
  const designToRename = useCodesignStore((s) => s.designToRename);
  const requestDeleteDesign = useCodesignStore((s) => s.requestDeleteDesign);
  const requestRenameDesign = useCodesignStore((s) => s.requestRenameDesign);
  const interactionMode = useCodesignStore((s) => s.interactionMode);
  const setInteractionMode = useCodesignStore((s) => s.setInteractionMode);
  const _sidebarCollapsed = useCodesignStore((s) => s.sidebarCollapsed);
  const activeReportLocalId = useCodesignStore((s) => s.activeReportLocalId);
  const closeReportDialog = useCodesignStore((s) => s.closeReportDialog);

  const [prefillPrompt, setPrefillPrompt] = useState<{ id: number; text: string } | null>(null);
  const [sidebarWidth, setSidebarWidth] = useState(() =>
    Math.max(320, Math.round(window.innerWidth * 0.25)),
  );
  const [isResizing, setIsResizing] = useState(false);

  const [updateStore] = useState(() => createUpdateStore({ dismissedVersion: '' }));
  useUpdateWiring(updateStore);
  useAgentStream();

  useEffect(() => {
    if (!window.codesign) {
      updateStore.getState().markDismissedVersionReady('');
      return;
    }
    window.codesign.preferences
      .get()
      .then((prefs) => {
        updateStore.getState().markDismissedVersionReady(prefs.dismissedUpdateVersion ?? '');
      })
      .catch((err) => {
        console.warn('[App] failed to seed dismissedUpdateVersion', err);
        updateStore.getState().markDismissedVersionReady('');
      });
  }, [updateStore]);
  // Once the user has visited Hub we keep HubView mounted (toggled via
  // `hidden`) so going Workspace → Hub doesn't tear down the design-card
  // iframes and pay the srcDoc parse cost again.
  const [hubMounted, setHubMounted] = useState(view === 'hub');
  useEffect(() => {
    if (view === 'hub') setHubMounted(true);
  }, [view]);
  // Same trick for workspace — once visited, keep PreviewPane mounted so the
  // iframe pool survives Workspace ↔ Hub round trips. Without this, the pool