Add terminals to workspace + New Workspace from QuickSwitcher (#790)
* Add terminals to workspace + New Workspace from QuickSwitcher
Two entry points share a single multi-select picker that lets the
user add Local Terminal + any combination of hosts into a workspace:
1. Focus-mode sidebar "+" button appends the selected targets to the
active workspace as new panes.
2. QuickSwitcher "New Workspace" button (small inline action next to
the Jump To hint) spins up a brand-new workspace tab populated
with the selected targets.
## Changes
### domain/workspace.ts
- pruneWorkspaceNode now rebalances surviving siblings to EQUAL
sizes after removal, instead of re-normalising the prior skew.
Matches the "auto-redistribute on close" expectation.
- New appendPaneToWorkspaceRoot(root, sessionId, direction='vertical'):
if root already splits in the requested direction, pushes the new
pane onto its children and resets sizes to equal; otherwise wraps
root + new pane in a new 0.5/0.5 split. Flattens long chains of
appends instead of producing degenerate nested trees.
### application/state/useSessionState.ts
- appendHostToWorkspace(workspaceId, host, direction?) — atomic
"build a session for this host and append it to the root", keeps
activeTab on the workspace and focuses the new pane.
- appendLocalTerminalToWorkspace(workspaceId, options?, direction?)
— mirror of the above for local shells.
- createWorkspaceFromTargets(targets, name?) — accepts a mixed list
of {kind:'local',...} / {kind:'host',host} and creates a new
workspace with one pane per target. Defaults viewMode to 'focus'
so the QuickSwitcher flow lands in the sidebar layout.
- All three exported from the hook.
### components/workspace/AddToWorkspaceDialog.tsx (new)
QuickSwitcher-styled multi-select picker:
- Fixed top-center overlay, same chrome as QuickSwitcher (border,
shadow, rounded-xl, borderless search input, bg-primary/15 cursor).
- Two sections: Local Shells (currently just Local Terminal) and
Hosts. Hover follows keyboard cursor.
- Toggle rows with click or Space / Enter; ⌘/Ctrl+Enter submits;
Esc closes. Right-side Check marks visible items.
- Thin footer bar with Cancel + "Add N" button.
### App.tsx
- Root-mounted single instance of AddToWorkspaceDialog with a
discriminated-union state:
{ mode: 'append'; workspaceId } | { mode: 'create' } | null.
- onAdd dispatches based on mode — append loops through the picker
targets calling the two append helpers; create calls
createWorkspaceFromTargets once.
- TerminalLayer's focus "+" now sends an onRequestAddToWorkspace
(workspaceId) up to App instead of owning its own dialog.
- QuickSwitcher's onCreateWorkspace callback repurposed to open the
dialog in create mode (replaces the older CreateWorkspaceDialog
route for this specific flow).
### components/TerminalLayer.tsx
- Dropped the inline AddToWorkspaceDialog + addHostPanelOpen state;
replaced the two append callbacks with a single
onRequestAddToWorkspace prop wired to the "+" button.
- Focus-sidebar header: replaced the "Terminals · N" counter with an
immersive borderless search input (bg-transparent, shadow-none,
termFg color) for filtering the terminal list; "+" and Columns2
buttons moved to the right.
- Session list filtered client-side by the search term across
hostLabel / hostname / username.
### components/QuickSwitcher.tsx
- Re-introduced onCreateWorkspace prop (was removed as unused).
- "New Workspace" inline button (Plus icon + label) sits on the
right of the Jump To hint row: border, rounded, hover bg. Click
fires onCreateWorkspace then closes QS.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
* Add configurable New Workspace shortcut
Mirrors QuickSwitcher's "+ New Workspace" button via a keyboard
binding so the dialog can open in one keystroke without passing
through QS.
- domain/models.ts: new DEFAULT_KEY_BINDINGS entry id=new-workspace,
action=newWorkspace, default ⌘+Shift+J (Mac) / Ctrl+Shift+J (PC).
Audited the defaults — only quick-switch uses J (⌘+J), so the
shifted combo is free. The binding sits in the 'app' category so
it shows up in Settings → Shortcuts and can be rebound by the user.
- application/state/useGlobalHotkeys.ts: wire newWorkspace into the
HotkeyActions interface, getAppLevelActions() allowlist, and the
global keydown switch so the scheme-driven handler dispatches it.
- App.tsx: handle case 'newWorkspace' inside executeHotkeyAction by
calling setAddToWorkspaceDialog({ mode: 'create' }) — same entry
as QuickSwitcher's button, just without having to open QS first.
- application/i18n/locales/zh-CN.ts: add '新建工作区' translation for
settings.shortcuts.binding.new-workspace. English falls back to
the KeyBinding.label field ("New Workspace"), so no en.ts change.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
* Address codex P1: don't check setState flag after the updater returns
Codex flagged that appendHostToWorkspace / appendLocalTerminalToWorkspace
were racy: both flipped an `inserted` flag inside setWorkspaces'
updater and then read it synchronously to decide whether to commit
the matching session via setSessions. React does NOT guarantee
updaters run synchronously (concurrent rendering, StrictMode
double-invoke, etc.), so the flag could still be false at the read
site even though the workspace exists. In that case setSessions was
skipped while the queued workspace update could still insert a new
pane referencing newSessionId — leaving a pane with no backing
session in state.
Fix: add a workspacesRef kept in sync with the workspaces state on
every render, and perform the existence check synchronously *before*
queuing any setState. Once we've confirmed the workspace exists on
the latest committed state, both setWorkspaces and setSessions are
called unconditionally, so they can never diverge.
The ref approach also correctly handles the multi-target append
loop path — React batches the updaters and applies them in sequence,
so sibling pane/session writes land in matching order.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
* Address codex P1+P2: narrow prune rebalance; append in root direction
### P1 — pruneWorkspaceNode over-rebalanced ancestor splits
The equal-sizes rebalance was unconditional during the recursive
walk, so closing a pane deep in one branch also rewrote unrelated
ancestor ratios (e.g., a root 0.8/0.2 vertical split got normalised
to 0.5/0.5 when a grand-child horizontal pane closed).
Now each split level tracks whether it actually lost a DIRECT
child. Only splits where a direct child disappeared get their
siblings reset to equal sizes. Ancestors whose direct children all
survived keep their original ratios (defensively re-normalised in
case a descendant subtree collapsed shape).
### P2 — Append path ignored the root's current direction
onAdd in App.tsx called the two append helpers without a direction,
so both defaulted to 'vertical'. appendPaneToWorkspaceRoot only
flattens into the root split when the directions match; if the
workspace root was horizontal (e.g., user split top/bottom earlier),
each append wrapped the entire existing tree into one side of a new
vertical split — existing panes crammed into one branch, new pane
hoarding half the space.
Read the current root direction out of the target workspace and
pass it down so new panes become peers of the existing root
siblings regardless of horizontal vs vertical.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
* Address codex P2: allow serial hosts in create-workspace picker
The picker used to filter out every host with protocol='serial'
regardless of mode. That was correct for append mode (the
appendHostToWorkspace helper has no serial path and early-returns)
but a regression for create mode — the old createWorkspaceWithHosts
flow passed serial hosts through and createWorkspaceFromTargets
still builds a SerialConfig-backed session for them, so there was
no reason to block them in the "+ New Workspace" entry.
Move the filter from the dialog up to App.tsx:
- AddToWorkspaceDialog drops the serial filter; selectableHosts is
simply the hosts prop.
- App.tsx passes `hosts.filter(h => h.protocol !== 'serial')` when
mode is 'append', and the full list when mode is 'create'.
Result: users can once again build a workspace from serial hosts
via QuickSwitcher's "+ New Workspace" button or the ⌘/Ctrl+Shift+J
hotkey, while append-to-existing keeps its earlier safe behaviour.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
* Address codex P2: don't commit session when append target disappears
Follow-up to the earlier ref-based guard. The ref check eliminates
the common "workspace already gone" case but still leaves a small
race: if closeWorkspace runs between the ref read and setWorkspaces'
updater firing, prev.map returns the unchanged workspaces but
setSessions / setActiveTabId still execute — leaving an orphan
session whose workspaceId points at a deleted workspace and jumping
activeTabId to a closed tab.
Nest setSessions + setActiveTabId inside the setWorkspaces updater
so the writes are gated on the same authoritative match used for
the tree update. The setSessions updater also de-dupes by newSessionId
so React 18 StrictMode's dev-time double-invoke of the outer updater
doesn't append the same row twice. Same pattern applied to
appendLocalTerminalToWorkspace.
The existing closeSession already uses the nested-setState shape, so
this matches the codebase convention.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---------
Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
陈大猫
68
App.tsx
68
App.tsx
@@ -44,6 +44,7 @@ import { Label } from './components/ui/label';
|
||||
import { ToastProvider, toast } from './components/ui/toast';
|
||||
import { VaultView, VaultSection } from './components/VaultView';
|
||||
import { QuickAddSnippetDialog } from './components/QuickAddSnippetDialog';
|
||||
import { AddToWorkspaceDialog } from './components/workspace/AddToWorkspaceDialog';
|
||||
import { KeyboardInteractiveModal, KeyboardInteractiveRequest } from './components/KeyboardInteractiveModal';
|
||||
import { PassphraseModal, PassphraseRequest } from './components/PassphraseModal';
|
||||
import { cn } from './lib/utils';
|
||||
@@ -178,6 +179,15 @@ function App({ settings }: { settings: SettingsState }) {
|
||||
|
||||
const [isQuickSwitcherOpen, setIsQuickSwitcherOpen] = useState(false);
|
||||
const [isCreateWorkspaceOpen, setIsCreateWorkspaceOpen] = useState(false);
|
||||
// Combined state for the AddToWorkspaceDialog. null = closed; mode
|
||||
// determines whether picking targets appends them to an existing
|
||||
// workspace (focus sidebar "+") or spins up a brand-new workspace
|
||||
// tab (QuickSwitcher's New Workspace button).
|
||||
const [addToWorkspaceDialog, setAddToWorkspaceDialog] = useState<
|
||||
| { mode: 'append'; workspaceId: string }
|
||||
| { mode: 'create' }
|
||||
| null
|
||||
>(null);
|
||||
const [quickSearch, setQuickSearch] = useState('');
|
||||
// Protocol selection dialog state for QuickSwitcher
|
||||
const [protocolSelectHost, setProtocolSelectHost] = useState<Host | null>(null);
|
||||
@@ -292,6 +302,9 @@ function App({ settings }: { settings: SettingsState }) {
|
||||
createWorkspaceWithHosts,
|
||||
createWorkspaceFromSessions,
|
||||
addSessionToWorkspace,
|
||||
appendHostToWorkspace,
|
||||
appendLocalTerminalToWorkspace,
|
||||
createWorkspaceFromTargets,
|
||||
updateSplitSizes,
|
||||
splitSession,
|
||||
toggleWorkspaceViewMode,
|
||||
@@ -1232,6 +1245,12 @@ function App({ settings }: { settings: SettingsState }) {
|
||||
case 'commandPalette':
|
||||
setIsQuickSwitcherOpen(true);
|
||||
break;
|
||||
case 'newWorkspace':
|
||||
// Dedicated shortcut to launch the AddToWorkspaceDialog in
|
||||
// create mode — same entry as QuickSwitcher's "New Workspace"
|
||||
// button, but without having to open QS first.
|
||||
setAddToWorkspaceDialog({ mode: 'create' });
|
||||
break;
|
||||
case 'portForwarding':
|
||||
// Navigate to vault and open port forwarding section
|
||||
setActiveTabId('vault');
|
||||
@@ -1800,6 +1819,9 @@ function App({ settings }: { settings: SettingsState }) {
|
||||
onTerminalDataCapture={handleTerminalDataCapture}
|
||||
onCreateWorkspaceFromSessions={createWorkspaceFromSessions}
|
||||
onAddSessionToWorkspace={addSessionToWorkspace}
|
||||
onRequestAddToWorkspace={(workspaceId) =>
|
||||
setAddToWorkspaceDialog({ mode: 'append', workspaceId })
|
||||
}
|
||||
onUpdateSplitSizes={updateSplitSizes}
|
||||
onSetDraggingSessionId={setDraggingSessionId}
|
||||
onToggleWorkspaceViewMode={toggleWorkspaceViewMode}
|
||||
@@ -1856,6 +1878,49 @@ function App({ settings }: { settings: SettingsState }) {
|
||||
}
|
||||
/>
|
||||
|
||||
{/* Root-mounted AddToWorkspaceDialog — triggered by the focus-mode
|
||||
"+" button (mode='append') or QuickSwitcher's "New Workspace"
|
||||
button (mode='create'). Single instance so dialog state and
|
||||
styling stay consistent across entry points. */}
|
||||
{addToWorkspaceDialog && (
|
||||
<AddToWorkspaceDialog
|
||||
open
|
||||
onOpenChange={(open) => { if (!open) setAddToWorkspaceDialog(null); }}
|
||||
// Filter serial hosts only in append mode — appendHostToWorkspace
|
||||
// has no serial code path. Create mode goes through
|
||||
// createWorkspaceFromTargets, which builds a SerialConfig-backed
|
||||
// session for serial hosts, so those should remain pickable.
|
||||
hosts={addToWorkspaceDialog.mode === 'append'
|
||||
? hosts.filter((h) => h.protocol !== 'serial')
|
||||
: hosts}
|
||||
workspaceTitle={
|
||||
addToWorkspaceDialog.mode === 'append'
|
||||
? workspaces.find((w) => w.id === addToWorkspaceDialog.workspaceId)?.title
|
||||
: 'New Workspace'
|
||||
}
|
||||
onAdd={(targets) => {
|
||||
if (addToWorkspaceDialog.mode === 'append') {
|
||||
// Match the workspace root's current split direction so
|
||||
// the new panes peer the existing siblings instead of
|
||||
// wrapping the whole tree into one side of a fresh split
|
||||
// (which would happen if we always passed the helper's
|
||||
// default 'vertical').
|
||||
const ws = workspaces.find((w) => w.id === addToWorkspaceDialog.workspaceId);
|
||||
const rootDir = ws && ws.root.type === 'split' ? ws.root.direction : 'vertical';
|
||||
for (const target of targets) {
|
||||
if (target.kind === 'local') {
|
||||
appendLocalTerminalToWorkspace(addToWorkspaceDialog.workspaceId, undefined, rootDir);
|
||||
} else {
|
||||
appendHostToWorkspace(addToWorkspaceDialog.workspaceId, target.host, rootDir);
|
||||
}
|
||||
}
|
||||
} else {
|
||||
createWorkspaceFromTargets(targets);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
|
||||
{isQuickSwitcherOpen && (
|
||||
<Suspense fallback={null}>
|
||||
<LazyQuickSwitcher
|
||||
@@ -1879,7 +1944,8 @@ function App({ settings }: { settings: SettingsState }) {
|
||||
}}
|
||||
onCreateWorkspace={() => {
|
||||
setIsQuickSwitcherOpen(false);
|
||||
setIsCreateWorkspaceOpen(true);
|
||||
setQuickSearch('');
|
||||
setAddToWorkspaceDialog({ mode: 'create' });
|
||||
}}
|
||||
onClose={() => {
|
||||
setIsQuickSwitcherOpen(false);
|
||||
|
||||
@@ -1512,6 +1512,7 @@ const zhCN: Messages = {
|
||||
'settings.shortcuts.binding.port-forwarding': '打开端口转发',
|
||||
'settings.shortcuts.binding.command-palette': '打开命令面板',
|
||||
'settings.shortcuts.binding.quick-switch': '快速切换',
|
||||
'settings.shortcuts.binding.new-workspace': '新建工作区',
|
||||
'settings.shortcuts.binding.snippets': '打开代码片段',
|
||||
'settings.shortcuts.binding.broadcast': '切换广播模式',
|
||||
'settings.shortcuts.binding.sftp-copy': '复制文件',
|
||||
|
||||
@@ -13,6 +13,7 @@ interface HotkeyActions {
|
||||
openHosts: () => void;
|
||||
openSftp: () => void;
|
||||
quickSwitch: () => void;
|
||||
newWorkspace: () => void;
|
||||
commandPalette: () => void;
|
||||
portForwarding: () => void;
|
||||
snippets: () => void;
|
||||
@@ -61,6 +62,7 @@ export const getAppLevelActions = (): Set<string> => {
|
||||
'openHosts',
|
||||
'openSftp',
|
||||
'quickSwitch',
|
||||
'newWorkspace',
|
||||
'commandPalette',
|
||||
'portForwarding',
|
||||
'snippets',
|
||||
@@ -168,6 +170,9 @@ export const useGlobalHotkeys = ({
|
||||
case 'quickSwitch':
|
||||
currentActions.quickSwitch?.();
|
||||
break;
|
||||
case 'newWorkspace':
|
||||
currentActions.newWorkspace?.();
|
||||
break;
|
||||
case 'commandPalette':
|
||||
currentActions.commandPalette?.();
|
||||
break;
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
import { MouseEvent,useCallback,useMemo,useState } from 'react';
|
||||
import { MouseEvent,useCallback,useMemo,useRef,useState } from 'react';
|
||||
import { ConnectionLog,Host,SerialConfig,Snippet,TerminalSession,Workspace,WorkspaceViewMode } from '../../domain/models';
|
||||
import {
|
||||
appendPaneToWorkspaceRoot,
|
||||
collectSessionIds,
|
||||
createWorkspaceFromSessions as createWorkspaceEntity,
|
||||
createWorkspaceFromSessionIds,
|
||||
@@ -24,6 +25,12 @@ export interface LogView {
|
||||
export const useSessionState = () => {
|
||||
const [sessions, setSessions] = useState<TerminalSession[]>([]);
|
||||
const [workspaces, setWorkspaces] = useState<Workspace[]>([]);
|
||||
// Latest workspaces snapshot for synchronous existence checks outside
|
||||
// setWorkspaces updaters — React doesn't guarantee updaters run
|
||||
// synchronously, so relying on a flag flipped inside them to decide
|
||||
// whether to also call setSessions is racy and can leave orphan panes.
|
||||
const workspacesRef = useRef(workspaces);
|
||||
workspacesRef.current = workspaces;
|
||||
// activeTabId is now managed by external store - components subscribe directly
|
||||
const setActiveTabId = activeTabStore.setActiveTabId;
|
||||
const [draggingSessionId, setDraggingSessionId] = useState<string | null>(null);
|
||||
@@ -383,6 +390,89 @@ export const useSessionState = () => {
|
||||
setActiveTabId(workspace.id);
|
||||
}, [setActiveTabId]);
|
||||
|
||||
// Like createWorkspaceWithHosts but supports mixed targets — each
|
||||
// entry is either an SSH host or a local terminal. Used by the
|
||||
// "New Workspace" flow in QuickSwitcher.
|
||||
type WorkspaceTarget =
|
||||
| { kind: 'local'; shellType?: TerminalSession['shellType']; shell?: string; shellArgs?: string[]; shellName?: string; shellIcon?: string }
|
||||
| { kind: 'host'; host: Host };
|
||||
|
||||
const createWorkspaceFromTargets = useCallback((targets: WorkspaceTarget[], name: string = 'Workspace'): string | null => {
|
||||
if (targets.length === 0) return null;
|
||||
|
||||
const newSessions: TerminalSession[] = targets.map((target) => {
|
||||
if (target.kind === 'local') {
|
||||
const sessionId = crypto.randomUUID();
|
||||
return {
|
||||
id: sessionId,
|
||||
hostId: `local-${sessionId}`,
|
||||
hostLabel: target.shellName || 'Local Terminal',
|
||||
hostname: 'localhost',
|
||||
username: 'local',
|
||||
status: 'connecting',
|
||||
protocol: 'local',
|
||||
shellType: target.shellType,
|
||||
localShell: target.shell,
|
||||
localShellArgs: target.shellArgs,
|
||||
localShellName: target.shellName,
|
||||
localShellIcon: target.shellIcon,
|
||||
};
|
||||
}
|
||||
const host = target.host;
|
||||
if (host.protocol === 'serial') {
|
||||
const serialConfig: SerialConfig = host.serialConfig || {
|
||||
path: host.hostname,
|
||||
baudRate: host.port || 115200,
|
||||
dataBits: 8,
|
||||
stopBits: 1,
|
||||
parity: 'none',
|
||||
flowControl: 'none',
|
||||
localEcho: false,
|
||||
lineMode: false,
|
||||
};
|
||||
const portName = serialConfig.path.split('/').pop() || serialConfig.path;
|
||||
return {
|
||||
id: crypto.randomUUID(),
|
||||
hostId: host.id,
|
||||
hostLabel: host.label || `Serial: ${portName}`,
|
||||
hostname: serialConfig.path,
|
||||
username: '',
|
||||
status: 'connecting',
|
||||
protocol: 'serial',
|
||||
serialConfig,
|
||||
charset: host.charset,
|
||||
};
|
||||
}
|
||||
return {
|
||||
id: crypto.randomUUID(),
|
||||
hostId: host.id,
|
||||
hostLabel: host.label,
|
||||
hostname: host.hostname,
|
||||
username: host.username,
|
||||
status: 'connecting',
|
||||
protocol: host.protocol,
|
||||
port: host.port,
|
||||
moshEnabled: host.moshEnabled,
|
||||
charset: host.charset,
|
||||
};
|
||||
});
|
||||
|
||||
const sessionIds = newSessions.map((s) => s.id);
|
||||
// Default to focus-mode (sidebar layout) regardless of target
|
||||
// count — matches the intent behind the QuickSwitcher "New
|
||||
// Workspace" flow, which the user expects to land in focus view.
|
||||
const workspace = createWorkspaceFromSessionIds(sessionIds, {
|
||||
title: name,
|
||||
viewMode: 'focus',
|
||||
});
|
||||
const sessionsWithWorkspace = newSessions.map((s) => ({ ...s, workspaceId: workspace.id }));
|
||||
|
||||
setSessions((prev) => [...prev, ...sessionsWithWorkspace]);
|
||||
setWorkspaces((prev) => [...prev, workspace]);
|
||||
setActiveTabId(workspace.id);
|
||||
return workspace.id;
|
||||
}, [setActiveTabId]);
|
||||
|
||||
const createWorkspaceFromSessions = useCallback((
|
||||
baseSessionId: string,
|
||||
joiningSessionId: string,
|
||||
@@ -434,6 +524,118 @@ export const useSessionState = () => {
|
||||
});
|
||||
}, [setActiveTabId]);
|
||||
|
||||
// Add a host into an existing workspace by creating a new session for
|
||||
// that host and appending it as the last pane at the workspace root.
|
||||
// Sibling sizes are rebalanced equally by appendPaneToWorkspaceRoot.
|
||||
// Unlike addSessionToWorkspace (which takes a pre-created orphan
|
||||
// session and a SplitHint), this is atomic — the new session is born
|
||||
// already bound to the target workspace and focused.
|
||||
const appendHostToWorkspace = useCallback((
|
||||
workspaceId: string,
|
||||
host: Host,
|
||||
direction: SplitDirection = 'vertical',
|
||||
): string | null => {
|
||||
// Serial hosts use a different session constructor; they currently
|
||||
// only enter workspaces via createSerialSession + drag, so reject
|
||||
// them here to avoid a partially-constructed session.
|
||||
if (host.protocol === 'serial') return null;
|
||||
|
||||
// Cheap early-exit using the ref when the workspace is clearly
|
||||
// absent. The authoritative check lives inside the setWorkspaces
|
||||
// updater below so we also cover the concurrent-close race.
|
||||
if (!workspacesRef.current.some(w => w.id === workspaceId)) return null;
|
||||
|
||||
const newSessionId = crypto.randomUUID();
|
||||
const newSession: TerminalSession = {
|
||||
id: newSessionId,
|
||||
hostId: host.id,
|
||||
hostLabel: host.label,
|
||||
hostname: host.hostname,
|
||||
username: host.username,
|
||||
status: 'connecting',
|
||||
protocol: host.protocol,
|
||||
port: host.port,
|
||||
moshEnabled: host.moshEnabled,
|
||||
charset: host.charset,
|
||||
workspaceId,
|
||||
};
|
||||
|
||||
// Nest setSessions + setActiveTabId inside the setWorkspaces updater
|
||||
// so we only commit the session when the workspace update actually
|
||||
// matched — otherwise a concurrent closeWorkspace between the ref
|
||||
// check and the updater firing would leave an orphan session with a
|
||||
// workspaceId pointing at nothing, and active tab would jump to a
|
||||
// closed id. The inner setSessions is idempotent (id dedupe) so
|
||||
// StrictMode's dev-time double-invoke does not duplicate the row.
|
||||
setWorkspaces(prev => {
|
||||
const target = prev.find(w => w.id === workspaceId);
|
||||
if (!target) return prev;
|
||||
setSessions(s => s.some(x => x.id === newSessionId) ? s : [...s, newSession]);
|
||||
setActiveTabId(workspaceId);
|
||||
return prev.map(ws => {
|
||||
if (ws.id !== workspaceId) return ws;
|
||||
return {
|
||||
...ws,
|
||||
root: appendPaneToWorkspaceRoot(ws.root, newSessionId, direction),
|
||||
focusedSessionId: newSessionId,
|
||||
};
|
||||
});
|
||||
});
|
||||
return newSessionId;
|
||||
}, [setActiveTabId]);
|
||||
|
||||
// Atomic "append a local terminal pane" — mirror of appendHostToWorkspace
|
||||
// but constructs a local-protocol session instead of an SSH one.
|
||||
const appendLocalTerminalToWorkspace = useCallback((
|
||||
workspaceId: string,
|
||||
options?: {
|
||||
shellType?: TerminalSession['shellType'];
|
||||
shell?: string;
|
||||
shellArgs?: string[];
|
||||
shellName?: string;
|
||||
shellIcon?: string;
|
||||
},
|
||||
direction: SplitDirection = 'vertical',
|
||||
): string | null => {
|
||||
// Same pattern as appendHostToWorkspace — ref guard + authoritative
|
||||
// inside-updater match to cover concurrent closeWorkspace.
|
||||
if (!workspacesRef.current.some(w => w.id === workspaceId)) return null;
|
||||
|
||||
const newSessionId = crypto.randomUUID();
|
||||
const localHostId = `local-${newSessionId}`;
|
||||
const newSession: TerminalSession = {
|
||||
id: newSessionId,
|
||||
hostId: localHostId,
|
||||
hostLabel: options?.shellName || 'Local Terminal',
|
||||
hostname: 'localhost',
|
||||
username: 'local',
|
||||
status: 'connecting',
|
||||
protocol: 'local',
|
||||
shellType: options?.shellType,
|
||||
localShell: options?.shell,
|
||||
localShellArgs: options?.shellArgs,
|
||||
localShellName: options?.shellName,
|
||||
localShellIcon: options?.shellIcon,
|
||||
workspaceId,
|
||||
};
|
||||
|
||||
setWorkspaces(prev => {
|
||||
const target = prev.find(w => w.id === workspaceId);
|
||||
if (!target) return prev;
|
||||
setSessions(s => s.some(x => x.id === newSessionId) ? s : [...s, newSession]);
|
||||
setActiveTabId(workspaceId);
|
||||
return prev.map(ws => {
|
||||
if (ws.id !== workspaceId) return ws;
|
||||
return {
|
||||
...ws,
|
||||
root: appendPaneToWorkspaceRoot(ws.root, newSessionId, direction),
|
||||
focusedSessionId: newSessionId,
|
||||
};
|
||||
});
|
||||
});
|
||||
return newSessionId;
|
||||
}, [setActiveTabId]);
|
||||
|
||||
const updateSplitSizes = useCallback((workspaceId: string, splitId: string, sizes: number[]) => {
|
||||
setWorkspaces(prev => prev.map(ws => {
|
||||
if (ws.id !== workspaceId) return ws;
|
||||
@@ -838,8 +1040,11 @@ export const useSessionState = () => {
|
||||
closeWorkspace,
|
||||
updateSessionStatus,
|
||||
createWorkspaceWithHosts,
|
||||
createWorkspaceFromTargets,
|
||||
createWorkspaceFromSessions,
|
||||
addSessionToWorkspace,
|
||||
appendHostToWorkspace,
|
||||
appendLocalTerminalToWorkspace,
|
||||
updateSplitSizes,
|
||||
splitSession,
|
||||
toggleWorkspaceViewMode,
|
||||
|
||||
@@ -1,8 +1,9 @@
|
||||
import {
|
||||
Folder,
|
||||
LayoutGrid,
|
||||
Search,
|
||||
FolderLock,
|
||||
LayoutGrid,
|
||||
Plus,
|
||||
Search,
|
||||
Terminal,
|
||||
TerminalSquare,
|
||||
} from "lucide-react";
|
||||
@@ -68,7 +69,7 @@ interface QuickSwitcherProps {
|
||||
onSelectTab: (tabId: string) => void;
|
||||
onClose: () => void;
|
||||
onCreateLocalTerminal?: (shell?: { command: string; args?: string[]; name?: string; icon?: string }) => void;
|
||||
// onCreateWorkspace removed - feature not currently used
|
||||
onCreateWorkspace?: () => void;
|
||||
keyBindings?: KeyBinding[];
|
||||
showSftpTab: boolean;
|
||||
}
|
||||
@@ -84,6 +85,7 @@ const QuickSwitcherInner: React.FC<QuickSwitcherProps> = ({
|
||||
onSelectTab,
|
||||
onClose,
|
||||
onCreateLocalTerminal,
|
||||
onCreateWorkspace,
|
||||
keyBindings,
|
||||
showSftpTab,
|
||||
}) => {
|
||||
@@ -280,7 +282,7 @@ const QuickSwitcherInner: React.FC<QuickSwitcherProps> = ({
|
||||
<ScrollArea className="flex-1 h-full">
|
||||
{/* Categorized view: Hosts/Tabs/Quick connect */}
|
||||
<div>
|
||||
{/* Jump To hint */}
|
||||
{/* Jump To hint + New Workspace action */}
|
||||
<div className="px-4 py-2 flex items-center gap-2">
|
||||
<span className="text-xs text-muted-foreground">{t("qs.jumpTo")}</span>
|
||||
{quickSwitchKey && (
|
||||
@@ -288,6 +290,20 @@ const QuickSwitcherInner: React.FC<QuickSwitcherProps> = ({
|
||||
{quickSwitchKey.replace(/ \+ /g, '+')}
|
||||
</kbd>
|
||||
)}
|
||||
{onCreateWorkspace && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
onCreateWorkspace();
|
||||
onClose();
|
||||
}}
|
||||
className="ml-auto inline-flex items-center gap-1 text-[11px] text-muted-foreground hover:text-foreground border border-border rounded px-1.5 py-0.5 transition-colors hover:bg-muted/50"
|
||||
title="New Workspace"
|
||||
>
|
||||
<Plus size={11} />
|
||||
<span>New Workspace</span>
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Hosts section */}
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { Circle, FolderTree, LayoutGrid, MessageSquare, PanelLeft, PanelRight, Palette, Server, X, Zap } from 'lucide-react';
|
||||
import { Circle, Columns2, FolderTree, MessageSquare, PanelLeft, PanelRight, Palette, Plus, Search, Server, X, Zap } from 'lucide-react';
|
||||
import React, { createContext, memo, startTransition, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
|
||||
import { useActiveTabId } from '../application/state/activeTabStore';
|
||||
import {
|
||||
@@ -49,6 +49,7 @@ import { TerminalComposeBar } from './terminal/TerminalComposeBar';
|
||||
import { TERMINAL_THEMES } from '../infrastructure/config/terminalThemes';
|
||||
import { useCustomThemes } from '../application/state/customThemeStore';
|
||||
import { Button } from './ui/button';
|
||||
import { Input } from './ui/input';
|
||||
import { RippleButton } from './ui/ripple';
|
||||
import { ScrollArea } from './ui/scroll-area';
|
||||
import { setupMcpApprovalBridge } from '../infrastructure/ai/shared/approvalGate';
|
||||
@@ -411,6 +412,7 @@ interface TerminalLayerProps {
|
||||
onTerminalDataCapture?: (sessionId: string, data: string) => void;
|
||||
onCreateWorkspaceFromSessions: (baseSessionId: string, joiningSessionId: string, hint: Exclude<SplitHint, null>) => void;
|
||||
onAddSessionToWorkspace: (workspaceId: string, sessionId: string, hint: Exclude<SplitHint, null>) => void;
|
||||
onRequestAddToWorkspace?: (workspaceId: string) => void;
|
||||
onUpdateSplitSizes: (workspaceId: string, splitId: string, sizes: number[]) => void;
|
||||
onSetDraggingSessionId: (id: string | null) => void;
|
||||
onToggleWorkspaceViewMode?: (workspaceId: string) => void;
|
||||
@@ -469,6 +471,7 @@ const TerminalLayerInner: React.FC<TerminalLayerProps> = ({
|
||||
onTerminalDataCapture,
|
||||
onCreateWorkspaceFromSessions,
|
||||
onAddSessionToWorkspace,
|
||||
onRequestAddToWorkspace,
|
||||
onUpdateSplitSizes,
|
||||
onSetDraggingSessionId,
|
||||
onToggleWorkspaceViewMode,
|
||||
@@ -604,6 +607,8 @@ const TerminalLayerInner: React.FC<TerminalLayerProps> = ({
|
||||
const workspaceInnerRef = useRef<HTMLDivElement>(null);
|
||||
const workspaceOverlayRef = useRef<HTMLDivElement>(null);
|
||||
const [dropHint, setDropHint] = useState<SplitHint>(null);
|
||||
// Focus-mode sidebar: client-side filter for the terminal list.
|
||||
const [focusSidebarSearch, setFocusSidebarSearch] = useState('');
|
||||
const [themePreview, setThemePreview] = useState<{ targetSessionId: string | null; themeId: string | null }>({
|
||||
targetSessionId: null,
|
||||
themeId: null,
|
||||
@@ -1979,30 +1984,63 @@ const TerminalLayerInner: React.FC<TerminalLayerProps> = ({
|
||||
className="absolute top-0 right-[-3px] h-full w-2 cursor-ew-resize z-30"
|
||||
onMouseDown={handleFocusSidebarResizeStart}
|
||||
/>
|
||||
{/* Header with view toggle */}
|
||||
{/* Header — search box + actions (matches Vault-sidebar search
|
||||
style but skinned to the terminal theme so it blends with the
|
||||
sidebar's bg). */}
|
||||
<div
|
||||
className="h-10 flex items-center justify-between px-3"
|
||||
className="h-11 flex items-center gap-1.5 px-2"
|
||||
style={{ borderBottom: `1px solid ${separator}` }}
|
||||
>
|
||||
<span className="text-xs font-medium" style={{ color: mutedFg }}>
|
||||
Terminals · {workspaceSessions.length}
|
||||
</span>
|
||||
<div className="relative flex-1 min-w-0">
|
||||
<Search
|
||||
size={12}
|
||||
className="absolute left-1 top-1/2 -translate-y-1/2 pointer-events-none"
|
||||
style={{ color: mutedFg }}
|
||||
/>
|
||||
<Input
|
||||
value={focusSidebarSearch}
|
||||
onChange={(e) => setFocusSidebarSearch(e.target.value)}
|
||||
placeholder="Search terminals..."
|
||||
className="h-7 pl-6 pr-0 text-xs bg-transparent border-0 shadow-none focus-visible:ring-0 focus-visible:ring-offset-0"
|
||||
style={{ color: termFg }}
|
||||
/>
|
||||
</div>
|
||||
{onRequestAddToWorkspace && (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="h-7 w-7 p-0 flex-shrink-0 hover:text-inherit"
|
||||
style={{ color: mutedFg }}
|
||||
onClick={() => onRequestAddToWorkspace(activeWorkspace.id)}
|
||||
title="Add Terminal"
|
||||
>
|
||||
<Plus size={14} />
|
||||
</Button>
|
||||
)}
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="h-7 w-7 p-0 hover:text-inherit"
|
||||
className="h-7 w-7 p-0 flex-shrink-0 hover:text-inherit"
|
||||
style={{ color: mutedFg }}
|
||||
onClick={() => onToggleWorkspaceViewMode?.(activeWorkspace.id)}
|
||||
title="Switch to Split View"
|
||||
>
|
||||
<LayoutGrid size={14} />
|
||||
<Columns2 size={14} />
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Session list */}
|
||||
<ScrollArea className="flex-1">
|
||||
<div className="p-2 space-y-1">
|
||||
{workspaceSessions.map(session => {
|
||||
{workspaceSessions.filter((session) => {
|
||||
const term = focusSidebarSearch.trim().toLowerCase();
|
||||
if (!term) return true;
|
||||
return (
|
||||
session.hostLabel?.toLowerCase().includes(term)
|
||||
|| session.hostname?.toLowerCase().includes(term)
|
||||
|| session.username?.toLowerCase().includes(term)
|
||||
);
|
||||
}).map(session => {
|
||||
const host = sessionHostsMap.get(session.id);
|
||||
const isSelected = session.id === focusedSessionId;
|
||||
const statusColor = session.status === 'connected'
|
||||
@@ -2307,6 +2345,7 @@ const TerminalLayerInner: React.FC<TerminalLayerProps> = ({
|
||||
{/* Focus mode sidebar */}
|
||||
{isFocusMode && renderFocusModeSidebar()}
|
||||
|
||||
|
||||
<div ref={workspaceInnerRef} className="overflow-hidden relative flex-1">
|
||||
{draggingSessionId && !isFocusMode && (
|
||||
<div
|
||||
|
||||
276
components/workspace/AddToWorkspaceDialog.tsx
Normal file
276
components/workspace/AddToWorkspaceDialog.tsx
Normal file
@@ -0,0 +1,276 @@
|
||||
/**
|
||||
* AddToWorkspaceDialog — lightweight multi-select picker for appending
|
||||
* new panes into the active workspace. Visually matches QuickSwitcher
|
||||
* (fixed top overlay, same header / row chrome) but with checkmarks on
|
||||
* the right and a thin footer to commit the selection.
|
||||
*/
|
||||
import { Check, Search, Terminal } from 'lucide-react';
|
||||
import React, { useEffect, useMemo, useRef, useState } from 'react';
|
||||
import { Host } from '../../types';
|
||||
import { DistroAvatar } from '../DistroAvatar';
|
||||
import { Button } from '../ui/button';
|
||||
import { Input } from '../ui/input';
|
||||
import { ScrollArea } from '../ui/scroll-area';
|
||||
|
||||
export type AddTarget =
|
||||
| { kind: 'local' }
|
||||
| { kind: 'host'; host: Host };
|
||||
|
||||
interface AddToWorkspaceDialogProps {
|
||||
open: boolean;
|
||||
onOpenChange: (open: boolean) => void;
|
||||
hosts: Host[];
|
||||
workspaceTitle?: string;
|
||||
onAdd: (targets: AddTarget[]) => void;
|
||||
}
|
||||
|
||||
const LOCAL_ITEM_ID = '__local-terminal__';
|
||||
|
||||
type Item =
|
||||
| { type: 'local'; id: typeof LOCAL_ITEM_ID }
|
||||
| { type: 'host'; id: string; host: Host };
|
||||
|
||||
export const AddToWorkspaceDialog: React.FC<AddToWorkspaceDialogProps> = ({
|
||||
open,
|
||||
onOpenChange,
|
||||
hosts,
|
||||
workspaceTitle,
|
||||
onAdd,
|
||||
}) => {
|
||||
const [query, setQuery] = useState('');
|
||||
const [selected, setSelected] = useState<Set<string>>(new Set());
|
||||
const [selectedIndex, setSelectedIndex] = useState(0);
|
||||
const inputRef = useRef<HTMLInputElement>(null);
|
||||
const containerRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
// Reset on open + auto-focus the search input.
|
||||
useEffect(() => {
|
||||
if (!open) return;
|
||||
setQuery('');
|
||||
setSelected(new Set());
|
||||
setSelectedIndex(0);
|
||||
const timer = window.setTimeout(() => inputRef.current?.focus(), 40);
|
||||
return () => window.clearTimeout(timer);
|
||||
}, [open]);
|
||||
|
||||
// Close on click outside.
|
||||
useEffect(() => {
|
||||
if (!open) return;
|
||||
const handler = (e: MouseEvent) => {
|
||||
if (containerRef.current && !containerRef.current.contains(e.target as Node)) {
|
||||
onOpenChange(false);
|
||||
}
|
||||
};
|
||||
document.addEventListener('mousedown', handler);
|
||||
return () => document.removeEventListener('mousedown', handler);
|
||||
}, [open, onOpenChange]);
|
||||
|
||||
// NOTE: no serial filter here — callers decide which subset of
|
||||
// hosts to pass based on mode. `appendHostToWorkspace` cannot build
|
||||
// a serial session, so append mode passes non-serial hosts only;
|
||||
// `createWorkspaceFromTargets` handles serial explicitly, so create
|
||||
// mode passes everything.
|
||||
const selectableHosts = hosts;
|
||||
|
||||
const localMatches = useMemo(() => {
|
||||
const term = query.trim().toLowerCase();
|
||||
if (!term) return true;
|
||||
return 'local terminal localhost'.includes(term);
|
||||
}, [query]);
|
||||
|
||||
const filteredHosts = useMemo(() => {
|
||||
const term = query.trim().toLowerCase();
|
||||
if (!term) return selectableHosts;
|
||||
return selectableHosts.filter((h) =>
|
||||
(h.label?.toLowerCase().includes(term))
|
||||
|| (h.hostname?.toLowerCase().includes(term))
|
||||
|| (h.username?.toLowerCase().includes(term))
|
||||
|| (h.group?.toLowerCase().includes(term)),
|
||||
);
|
||||
}, [selectableHosts, query]);
|
||||
|
||||
const items = useMemo<Item[]>(() => {
|
||||
const list: Item[] = [];
|
||||
if (localMatches) list.push({ type: 'local', id: LOCAL_ITEM_ID });
|
||||
for (const h of filteredHosts) list.push({ type: 'host', id: h.id, host: h });
|
||||
return list;
|
||||
}, [localMatches, filteredHosts]);
|
||||
|
||||
const toggle = (id: string) => {
|
||||
setSelected((prev) => {
|
||||
const next = new Set(prev);
|
||||
if (next.has(id)) next.delete(id); else next.add(id);
|
||||
return next;
|
||||
});
|
||||
};
|
||||
|
||||
const handleCommit = () => {
|
||||
if (selected.size === 0) return;
|
||||
const targets: AddTarget[] = [];
|
||||
if (selected.has(LOCAL_ITEM_ID)) targets.push({ kind: 'local' });
|
||||
for (const host of selectableHosts) {
|
||||
if (selected.has(host.id)) targets.push({ kind: 'host', host });
|
||||
}
|
||||
if (targets.length === 0) return;
|
||||
onAdd(targets);
|
||||
onOpenChange(false);
|
||||
};
|
||||
|
||||
const handleKeyDown = (e: React.KeyboardEvent) => {
|
||||
if (e.key === 'Escape') {
|
||||
e.preventDefault();
|
||||
onOpenChange(false);
|
||||
return;
|
||||
}
|
||||
if (e.key === 'ArrowDown') {
|
||||
e.preventDefault();
|
||||
setSelectedIndex((i) => Math.min(i + 1, Math.max(items.length - 1, 0)));
|
||||
} else if (e.key === 'ArrowUp') {
|
||||
e.preventDefault();
|
||||
setSelectedIndex((i) => Math.max(i - 1, 0));
|
||||
} else if (e.key === ' ' || (e.key === 'Enter' && !(e.metaKey || e.ctrlKey))) {
|
||||
if (items.length === 0) return;
|
||||
e.preventDefault();
|
||||
toggle(items[selectedIndex].id);
|
||||
} else if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) {
|
||||
e.preventDefault();
|
||||
handleCommit();
|
||||
}
|
||||
};
|
||||
|
||||
if (!open) return null;
|
||||
|
||||
const count = selected.size;
|
||||
const localIndex = items.findIndex((it) => it.type === 'local');
|
||||
const firstHostIndex = items.findIndex((it) => it.type === 'host');
|
||||
|
||||
return (
|
||||
<div
|
||||
className="fixed inset-x-0 top-12 z-50 flex justify-center pt-2"
|
||||
style={{ pointerEvents: 'none' }}
|
||||
>
|
||||
<div
|
||||
ref={containerRef}
|
||||
className="w-full max-w-2xl mx-4 bg-background border border-border rounded-xl shadow-2xl overflow-hidden max-h-[520px] flex flex-col"
|
||||
style={{ pointerEvents: 'auto' }}
|
||||
>
|
||||
{/* Search header — mirrors QuickSwitcher chrome. */}
|
||||
<div className="flex items-center gap-3 px-4 py-3 border-b border-border">
|
||||
<Search size={16} className="text-muted-foreground" />
|
||||
<Input
|
||||
ref={inputRef}
|
||||
value={query}
|
||||
onChange={(e) => {
|
||||
setQuery(e.target.value);
|
||||
setSelectedIndex(0);
|
||||
}}
|
||||
onKeyDown={handleKeyDown}
|
||||
placeholder="Search hosts or local shells..."
|
||||
className="flex-1 h-8 border-0 bg-transparent focus-visible:ring-0 focus-visible:ring-offset-0 px-0 text-sm"
|
||||
/>
|
||||
{workspaceTitle && (
|
||||
<span className="text-[11px] text-muted-foreground truncate max-w-[180px]">
|
||||
{workspaceTitle}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<ScrollArea className="flex-1 h-full">
|
||||
<div>
|
||||
{/* Jump-to hint */}
|
||||
<div className="px-4 py-2 flex items-center gap-2">
|
||||
<span className="text-xs text-muted-foreground">Pick one or more</span>
|
||||
<kbd className="text-[10px] text-muted-foreground bg-muted px-1 py-0.5 rounded">Space</kbd>
|
||||
<span className="text-[10px] text-muted-foreground">toggle</span>
|
||||
<kbd className="text-[10px] text-muted-foreground bg-muted px-1 py-0.5 rounded">
|
||||
{typeof navigator !== 'undefined' && /Mac|iPhone|iPad/.test(navigator.platform) ? '⌘' : 'Ctrl'}+Enter
|
||||
</kbd>
|
||||
<span className="text-[10px] text-muted-foreground">add</span>
|
||||
</div>
|
||||
|
||||
{/* Local Shells section */}
|
||||
{localIndex !== -1 && (
|
||||
<div>
|
||||
<div className="px-4 py-1.5">
|
||||
<span className="text-xs font-medium text-muted-foreground">
|
||||
Local Shells
|
||||
</span>
|
||||
</div>
|
||||
{(() => {
|
||||
const idx = localIndex;
|
||||
const isCursor = idx === selectedIndex;
|
||||
const isChecked = selected.has(LOCAL_ITEM_ID);
|
||||
return (
|
||||
<div
|
||||
className={`flex items-center gap-3 px-4 py-2.5 cursor-pointer transition-colors ${isCursor ? 'bg-primary/15' : 'hover:bg-muted/50'}`}
|
||||
onClick={() => toggle(LOCAL_ITEM_ID)}
|
||||
onMouseEnter={() => setSelectedIndex(idx)}
|
||||
>
|
||||
<div className="h-6 w-6 rounded flex items-center justify-center text-muted-foreground">
|
||||
<Terminal size={16} />
|
||||
</div>
|
||||
<span className="text-sm font-medium flex-1 truncate">Local Terminal</span>
|
||||
{isChecked && <Check size={14} className="text-primary flex-shrink-0" />}
|
||||
</div>
|
||||
);
|
||||
})()}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Hosts section */}
|
||||
{filteredHosts.length > 0 && (
|
||||
<div>
|
||||
<div className="px-4 py-1.5">
|
||||
<span className="text-xs font-medium text-muted-foreground">Hosts</span>
|
||||
</div>
|
||||
{filteredHosts.map((host, i) => {
|
||||
const idx = firstHostIndex + i;
|
||||
const isCursor = idx === selectedIndex;
|
||||
const isChecked = selected.has(host.id);
|
||||
return (
|
||||
<div
|
||||
key={host.id}
|
||||
className={`flex items-center justify-between px-4 py-2.5 cursor-pointer transition-colors ${isCursor ? 'bg-primary/15' : 'hover:bg-muted/50'}`}
|
||||
onClick={() => toggle(host.id)}
|
||||
onMouseEnter={() => setSelectedIndex(idx)}
|
||||
>
|
||||
<div className="flex items-center gap-3 min-w-0">
|
||||
<DistroAvatar host={host} fallback={(host.label || host.hostname).slice(0, 2).toUpperCase()} size="sm" />
|
||||
<span className="text-sm font-medium truncate">{host.label || host.hostname}</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="text-[11px] text-muted-foreground">
|
||||
{host.group ? `Personal / ${host.group}` : 'Personal'}
|
||||
</div>
|
||||
{isChecked && <Check size={14} className="text-primary flex-shrink-0" />}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{items.length === 0 && (
|
||||
<div className="px-4 py-8 text-center text-xs text-muted-foreground">
|
||||
No matches
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</ScrollArea>
|
||||
|
||||
{/* Slim footer to commit. Kept minimal so the layout feels like
|
||||
QuickSwitcher's chrome with a single action strip tacked on. */}
|
||||
<div className="flex items-center justify-end gap-2 px-3 py-2 border-t border-border">
|
||||
<Button variant="ghost" size="sm" onClick={() => onOpenChange(false)}>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button size="sm" disabled={count === 0} onClick={handleCommit}>
|
||||
{count === 0 ? 'Add' : `Add ${count}`}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default AddToWorkspaceDialog;
|
||||
@@ -411,6 +411,7 @@ export const DEFAULT_KEY_BINDINGS: KeyBinding[] = [
|
||||
{ id: 'port-forwarding', action: 'portForwarding', label: 'Open Port Forwarding', mac: '⌘ + P', pc: 'Ctrl + P', category: 'app' },
|
||||
{ id: 'command-palette', action: 'commandPalette', label: 'Open Command Palette', mac: '⌘ + K', pc: 'Ctrl + K', category: 'app' },
|
||||
{ id: 'quick-switch', action: 'quickSwitch', label: 'Quick Switch', mac: '⌘ + J', pc: 'Ctrl + J', category: 'app' },
|
||||
{ id: 'new-workspace', action: 'newWorkspace', label: 'New Workspace', mac: '⌘ + Shift + J', pc: 'Ctrl + Shift + J', category: 'app' },
|
||||
{ id: 'snippets', action: 'snippets', label: 'Open Snippets', mac: '⌘ + Shift + S', pc: 'Ctrl + Shift + S', category: 'app' },
|
||||
{ id: 'broadcast', action: 'broadcast', label: 'Switch the Broadcast Mode', mac: '⌘ + B', pc: 'Ctrl + B', category: 'app' },
|
||||
|
||||
|
||||
@@ -16,24 +16,75 @@ export const pruneWorkspaceNode = (node: WorkspaceNode, targetSessionId: string)
|
||||
|
||||
const nextChildren: WorkspaceNode[] = [];
|
||||
const nextSizes: number[] = [];
|
||||
const sizeList = node.sizes && node.sizes.length === node.children.length ? node.sizes : node.children.map(() => 1);
|
||||
const sizeList = node.sizes && node.sizes.length === node.children.length
|
||||
? node.sizes
|
||||
: node.children.map(() => 1 / node.children.length);
|
||||
let removedDirectChild = false;
|
||||
|
||||
node.children.forEach((child, idx) => {
|
||||
const pruned = pruneWorkspaceNode(child, targetSessionId);
|
||||
if (pruned) {
|
||||
nextChildren.push(pruned);
|
||||
nextSizes.push(sizeList[idx] ?? 1);
|
||||
nextSizes.push(sizeList[idx] ?? 1 / node.children.length);
|
||||
} else {
|
||||
removedDirectChild = true;
|
||||
}
|
||||
});
|
||||
|
||||
if (nextChildren.length === 0) return null;
|
||||
if (nextChildren.length === 1) return nextChildren[0];
|
||||
|
||||
// Only rebalance siblings to equal sizes when this level actually
|
||||
// lost one of its direct children. If the prune happened deeper in
|
||||
// one branch, this split's direct children are unchanged and their
|
||||
// original ratios must be preserved (otherwise e.g. a root 0.8/0.2
|
||||
// split gets rewritten to 0.5/0.5 when a grand-child pane closes).
|
||||
if (removedDirectChild) {
|
||||
const equalSize = 1 / nextChildren.length;
|
||||
return { ...node, children: nextChildren, sizes: nextChildren.map(() => equalSize) };
|
||||
}
|
||||
|
||||
// Preserve existing ratios; normalise defensively in case sibling
|
||||
// subtrees changed shape (e.g. a split collapsed to a single pane).
|
||||
const total = nextSizes.reduce((acc, n) => acc + n, 0) || 1;
|
||||
const normalized = nextSizes.map(n => n / total);
|
||||
return { ...node, children: nextChildren, sizes: normalized };
|
||||
};
|
||||
|
||||
/**
|
||||
* Append a new pane containing `sessionId` to the end of the workspace
|
||||
* root's split. If the root already splits in the requested direction,
|
||||
* the new pane becomes its last sibling and all sibling sizes are reset
|
||||
* to equal. Otherwise the root is wrapped in a new split (same behaviour
|
||||
* as the existing `insertPaneIntoWorkspace(root, id, { targetSessionId:
|
||||
* undefined })` path) with two equal children.
|
||||
*/
|
||||
export const appendPaneToWorkspaceRoot = (
|
||||
root: WorkspaceNode,
|
||||
sessionId: string,
|
||||
direction: SplitDirection = 'vertical',
|
||||
): WorkspaceNode => {
|
||||
const newPane: WorkspaceNode = { id: crypto.randomUUID(), type: 'pane', sessionId };
|
||||
|
||||
if (root.type === 'split' && root.direction === direction) {
|
||||
const nextChildren = [...root.children, newPane];
|
||||
const equalSize = 1 / nextChildren.length;
|
||||
return {
|
||||
...root,
|
||||
children: nextChildren,
|
||||
sizes: nextChildren.map(() => equalSize),
|
||||
};
|
||||
}
|
||||
|
||||
return {
|
||||
id: crypto.randomUUID(),
|
||||
type: 'split',
|
||||
direction,
|
||||
children: [root, newPane],
|
||||
sizes: [0.5, 0.5],
|
||||
};
|
||||
};
|
||||
|
||||
const createSplitFromPane = (
|
||||
existingPane: WorkspaceNode,
|
||||
newPane: WorkspaceNode,
|
||||
|
||||
Reference in New Issue
Block a user