mirror of
https://github.com/binaricat/Netcatty.git
synced 2026-11-11 00:30:57 +00:00
Several everyday interactions re-rendered the entire shell (AppView, TopTabs,
TerminalLayer and every pane) even though nothing they show had changed:
- Clicking or focusing a split pane always replaced the workspaces array
(twice per click: onClick + onFocusCapture), cascading through the whole
app and re-saving the session restore snapshot. setWorkspaceFocusedSession
and moveFocusInWorkspace now keep the same array when focus is unchanged
(domain/workspace.ts setWorkspaceFocusedSessionId).
- Every window focus/visibility change resynced app lock and produced a new
runtime state object even when nothing changed, re-rendering the provider
tree. Equal states keep the current object and useAppLockState's result is
memoized.
- Quick switcher keystrokes went through AppSideEffects state and the
app-local UI store, re-rendering AppSideEffects, every host island, AppShell,
AppView and TopTabs per character. QuickSwitcherOverlay now owns the query
and host results; the overlay unmounts on close, which resets the query
exactly where setQuickSearch('') used to.
- Pressing/releasing Ctrl/Cmd (every ⌘C/⌘V/Ctrl+C) re-rendered the whole tab
bar to toggle shortcut number badges. The held flag now lives in a small
store read only by each tab's TabIconSlot.
- AppView passed fresh inline callbacks that defeated TopTabs' memo comparator
and every open editor tab; TextEditorTabView is now memoized. TopTabs
memoizes per-workspace session lists and hoists the root tab icons.
- Workspace drag previews only update state when the drop hint actually moves.
React commits / render time for 10 repetitions in the real app (profiling
build, 2 split panes, 300 hosts), main -> this change:
window focus 42 / 17.1 ms -> 2 / 0.4 ms
press/release Cmd 50 / 41.9 ms -> 22 / 6.6 ms
click focused pane 42 / 69.6 ms -> 3 / 0.4 ms
quick switcher typing 41 / 61.3 ms -> 16 / 34.8 ms
Co-authored-by: Claude Opus 5.5 <noreply@anthropic.com>
118 lines
4.3 KiB
TypeScript
118 lines
4.3 KiB
TypeScript
import { useSyncExternalStore } from 'react';
|
|
|
|
import type { Host, PortForwardingRule } from '../../domain/models';
|
|
import type { VaultSection } from '../../components/VaultView';
|
|
import type { KeyboardInteractiveRequest } from '../../components/KeyboardInteractiveModal';
|
|
import type { PassphraseRequest } from '../../components/PassphraseModal';
|
|
import type { FidoPromptRequest } from '../../components/FidoPromptModal';
|
|
|
|
type Listener = () => void;
|
|
|
|
/**
|
|
* Dialog / queue / ephemeral UI owned outside the vault/session/settings
|
|
* mega hooks. DialogsHost / VaultHost / TerminalHost subscribe here so
|
|
* AppSideEffects never has to rebuild domain bags when a modal opens.
|
|
*
|
|
* `portForwardingRules` is published here as a thin derived slice: the PF
|
|
* hook still lives in AppSideEffects (tray / sync / auto-start), but Hosts
|
|
* must not receive a prepared terminal domain bag.
|
|
*/
|
|
export type AppLocalUiSnapshot = {
|
|
isQuickSwitcherOpen: boolean;
|
|
isCreateWorkspaceOpen: boolean;
|
|
addToWorkspaceDialog:
|
|
| { mode: 'append'; workspaceId: string }
|
|
| { mode: 'create' }
|
|
| null;
|
|
protocolSelectHost: Host | null;
|
|
navigateToSection: VaultSection | null;
|
|
deepLinkHostDraft: Host | null;
|
|
ephemeralHosts: readonly Host[];
|
|
portForwardingRules: readonly PortForwardingRule[];
|
|
keyboardInteractiveQueue: readonly KeyboardInteractiveRequest[];
|
|
passphraseQueue: readonly PassphraseRequest[];
|
|
fidoPromptQueue: readonly FidoPromptRequest[];
|
|
deleteHostConfirm: { hostId: string; name: string } | null;
|
|
vaultFocusRequest: unknown;
|
|
openNoteRequest: unknown;
|
|
emptyVaultConflict: unknown;
|
|
};
|
|
|
|
export const EMPTY_APP_LOCAL_UI: AppLocalUiSnapshot = Object.freeze({
|
|
isQuickSwitcherOpen: false,
|
|
isCreateWorkspaceOpen: false,
|
|
addToWorkspaceDialog: null,
|
|
protocolSelectHost: null,
|
|
navigateToSection: null,
|
|
deepLinkHostDraft: null,
|
|
ephemeralHosts: Object.freeze([]) as readonly Host[],
|
|
portForwardingRules: Object.freeze([]) as readonly PortForwardingRule[],
|
|
keyboardInteractiveQueue: Object.freeze([]) as readonly KeyboardInteractiveRequest[],
|
|
passphraseQueue: Object.freeze([]) as readonly PassphraseRequest[],
|
|
fidoPromptQueue: Object.freeze([]) as readonly FidoPromptRequest[],
|
|
deleteHostConfirm: null,
|
|
vaultFocusRequest: null,
|
|
openNoteRequest: null,
|
|
emptyVaultConflict: null,
|
|
});
|
|
class AppLocalUiStore {
|
|
private snapshot: AppLocalUiSnapshot = EMPTY_APP_LOCAL_UI;
|
|
private listeners = new Set<Listener>();
|
|
|
|
getSnapshot = (): AppLocalUiSnapshot => this.snapshot;
|
|
|
|
subscribe = (listener: Listener): (() => void) => {
|
|
this.listeners.add(listener);
|
|
return () => {
|
|
this.listeners.delete(listener);
|
|
};
|
|
};
|
|
|
|
setSnapshot(next: AppLocalUiSnapshot): void {
|
|
const prev = this.snapshot;
|
|
if (
|
|
prev.isQuickSwitcherOpen === next.isQuickSwitcherOpen
|
|
&& prev.isCreateWorkspaceOpen === next.isCreateWorkspaceOpen
|
|
&& prev.addToWorkspaceDialog === next.addToWorkspaceDialog
|
|
&& prev.protocolSelectHost === next.protocolSelectHost
|
|
&& prev.navigateToSection === next.navigateToSection
|
|
&& prev.deepLinkHostDraft === next.deepLinkHostDraft
|
|
&& prev.ephemeralHosts === next.ephemeralHosts
|
|
&& prev.portForwardingRules === next.portForwardingRules
|
|
&& prev.keyboardInteractiveQueue === next.keyboardInteractiveQueue
|
|
&& prev.passphraseQueue === next.passphraseQueue
|
|
&& prev.fidoPromptQueue === next.fidoPromptQueue
|
|
&& prev.deleteHostConfirm === next.deleteHostConfirm
|
|
&& prev.vaultFocusRequest === next.vaultFocusRequest
|
|
&& prev.openNoteRequest === next.openNoteRequest
|
|
&& prev.emptyVaultConflict === next.emptyVaultConflict
|
|
) {
|
|
return;
|
|
}
|
|
this.snapshot = next;
|
|
for (const listener of this.listeners) listener();
|
|
}
|
|
}
|
|
|
|
export const appLocalUiStore = new AppLocalUiStore();
|
|
|
|
export function publishAppLocalUi(snapshot: AppLocalUiSnapshot): void {
|
|
appLocalUiStore.setSnapshot(snapshot);
|
|
}
|
|
|
|
export function getAppLocalUiSnapshot(): AppLocalUiSnapshot {
|
|
return appLocalUiStore.getSnapshot();
|
|
}
|
|
|
|
export function subscribeAppLocalUi(listener: Listener): () => void {
|
|
return appLocalUiStore.subscribe(listener);
|
|
}
|
|
|
|
export function useAppLocalUiStore(): AppLocalUiSnapshot {
|
|
return useSyncExternalStore(
|
|
subscribeAppLocalUi,
|
|
getAppLocalUiSnapshot,
|
|
getAppLocalUiSnapshot,
|
|
);
|
|
}
|