feat(terminal): add Close All Tabs + unify dark-mode borders and search input icons - #84
Conversation
- Add CLOSE_ALL_TABS reducer action: empties a group's tabs, clears the tabToGroupMap, and removes the group unless it is the last one - Render a "Close All Tabs" item in the tab context menu - Add i18n keys (en + zh-CN) - Cover with reducer unit tests, a property test, and a context-menu component test Test: 572 tests pass, 7 new tests cover the change
Root cause: src/index.css mixed Tailwind v3 directives with a pasted v4.1.3 build output. The v4 rules used logical properties (padding-inline) that overrode v3 single-side utilities (pl-7/pl-8), so search inputs lost their left padding and their icons overlapped the text. The v4 output also made border utilities fall back to currentColor, which rendered as bright lines in dark mode. - Strip the pasted v4 output from index.css, leaving only the v3 directives (component code only uses standard classes v3 can emit) - Install tailwindcss-animate and register it to keep shadcn enter/exit animations (animate-in, slide-in-from-*, fade-*/zoom-*) generated by v3 - Remove v4-only syntax from globals.css and re-declare the typography variables it relied on - Add border-border to every bare border utility across panels, dialogs and base components (Card, Dialog, Popover, Sheet, Table, Alert, Badge, ContextMenu, etc.) so dark-mode borders match the sidebar Test: 572 tests pass, tsc clean, DMG manually verified in dark mode
There was a problem hiding this comment.
Pull request overview
Adds terminal “Close All Tabs,” removes bundled Tailwind v4 output, and standardizes dark-mode borders.
Changes:
- Adds close-all reducer, menu, translations, and tests.
- Restores animations through
tailwindcss-animate. - Applies consistent border colors across UI surfaces.
Reviewed changes
Copilot reviewed 42 out of 45 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
tailwind.config.js |
Enables animation plugin. |
package.json |
Adds animation dependency. |
pnpm-lock.yaml |
Locks dependency updates. |
src/index.css |
Removes generated Tailwind v4 CSS. |
src/styles/globals.css |
Removes v4 directives and restores typography tokens. |
src/locales/en.json |
Adds English close-all label. |
src/locales/zh-CN.json |
Adds Chinese close-all label. |
src/lib/terminal-group-types.ts |
Defines close-all action. |
src/lib/terminal-group-reducer.ts |
Implements close-all state transition. |
src/__tests__/terminal-group-reducer.test.ts |
Tests close-all behavior. |
src/__tests__/terminal-group-reducer.property.test.ts |
Adds close-all property test. |
src/__tests__/group-tab-bar-context-menu.test.tsx |
Tests menu dispatch. |
src/components/terminal/group-tab-bar.tsx |
Adds close-all menu item. |
src/components/welcome-screen.tsx |
Standardizes card borders. |
src/components/ui/table.tsx |
Standardizes table borders. |
src/components/ui/sheet.tsx |
Standardizes sheet borders. |
src/components/ui/select.tsx |
Standardizes select borders. |
src/components/ui/resizable.tsx |
Standardizes handle borders. |
src/components/ui/popover.tsx |
Standardizes popover borders. |
src/components/ui/hover-card.tsx |
Standardizes hover-card borders. |
src/components/ui/dropdown-menu.tsx |
Standardizes dropdown borders. |
src/components/ui/dialog.tsx |
Standardizes dialog borders. |
src/components/ui/context-menu.tsx |
Standardizes context-menu borders. |
src/components/ui/command.tsx |
Standardizes command input border. |
src/components/ui/card.tsx |
Standardizes card border. |
src/components/ui/badge.tsx |
Standardizes outline badge border. |
src/components/ui/alert.tsx |
Standardizes alert border. |
src/components/ui/alert-dialog.tsx |
Standardizes alert-dialog border. |
src/components/ui/accordion.tsx |
Standardizes accordion borders. |
src/components/transfer-queue.tsx |
Standardizes queue border. |
src/components/terminal/terminal-search-bar.tsx |
Standardizes search-bar borders. |
src/components/terminal.tsx |
Standardizes terminal search border. |
src/components/system-monitor.tsx |
Standardizes monitor table borders. |
src/components/sync-dialog.tsx |
Standardizes sync result borders. |
src/components/sftp-panel.tsx |
Standardizes SFTP panel borders. |
src/components/settings-modal.tsx |
Standardizes settings borders. |
src/components/log-monitor.tsx |
Standardizes monitor borders. |
src/components/integrated-file-browser.tsx |
Unifies file-browser borders. |
src/components/file-panel.tsx |
Unifies file-panel borders. |
src/components/file-editor-view.tsx |
Standardizes editor toolbar border. |
src/components/directory-tree.tsx |
Unifies directory-tree borders. |
src/components/directory-transfer-dialog.tsx |
Standardizes error-log border. |
src/components/desktop-toolbar.tsx |
Standardizes toolbar border. |
src/components/connection-dialog.tsx |
Standardizes connection-dialog borders. |
src/components/code-editor.tsx |
Standardizes editor border. |
Files not reviewed (1)
- pnpm-lock.yaml: Generated file
💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
| --text-xl: 1.25rem; | ||
| --text-2xl: 1.5rem; | ||
| --text-3xl: 1.875rem; | ||
| --font-weight-semibold: 600; |
There was a problem hiding this comment.
Fixed in f5af037: replaced calc(var(--spacing)*4) with a fixed 1rem in Alert's icon grid column, so the two-column layout works under Tailwind v3 (which does not define --spacing).
| )} | ||
| {/* Close All */} | ||
| {tabs.length > 0 && ( | ||
| <ContextMenuItem onClick={() => dispatch({ type: 'CLOSE_ALL_TABS', groupId })}> |
There was a problem hiding this comment.
Fixed in f5af037: close-all (and single close) now route through backend-aware handlers. New onCloseTab / onCloseAllTabs callbacks from App.tsx disconnect SFTP/FTP file-browser sessions before dispatching CLOSE_ALL_TABS / REMOVE_TAB, so backend connections are released.
Addresses Copilot review comments on PR GOODBOY008#84: - Tab close now routes through backend-aware handlers: close-all and single-close disconnect SFTP/FTP file-browser sessions before removing tabs (CLOSE_ALL_TABS and REMOVE_TAB were reducer-only and leaked the backend connections). Wired via new onCloseTab / onCloseAllTabs callbacks from App.tsx through the callbacks context. - Replace the Tailwind v4-only calc(var(--spacing)*4) in Alert's icon column with a fixed 1rem — v3 does not define --spacing, so the grid declaration was invalid and icon alerts lost their two-column layout. Test: 574 tests pass, 2 new tests cover the handler routing
This follow-effect test chains several async waits and has a history of timing out on slow CI runners (pre-existing flake, see fc2ff27). Bump the test timeout from the 5s default to 15s so slow macOS runners don't flake.
The Home-navigation wait uses findByTitle with the default 1000ms timeout, which flakes on slow CI runners (macOS timed out the whole test, Windows failed to find the /home breadcrumb in time). Give the findByTitle a 5s window on top of the test's 15s budget.
Resolve conflict in integrated-file-browser-keyboard.test.tsx: keep the upstream findByTitle 5s timeout (already merged in GOODBOY008#83) plus our test-level 15s budget for the terminal-follow test.
|
@sunxiaobin89 Thanks for your continuous contributions. LGTM ~ |
Summary
Two UI refinements for the terminal window:
Root cause
src/index.cssmixed Tailwind v3@tailwinddirectives with a pasted Tailwind v4.1.3 build output (introduced by a Figma migration). The v4 rules use logical properties (padding-inline) that override v3 single-side utilities (pl-7/pl-8), so the search inputs lost their left padding and their icons overlapped the placeholder/text.borderclass with no color, which falls back tocurrentColor— bright white lines in dark mode, inconsistent with the sidebar'sborder-border.Changes
CLOSE_ALL_TABSreducer action (empties a group's tabs, clearstabToGroupMap, removes the group unless it is the last one), a context-menu item, and i18n keys (en + zh-CN).index.css(leaving only the v3 directives), installtailwindcss-animateto keep shadcn enter/exit animations generated by v3, remove v4-only syntax fromglobals.css, and re-declare the typography variables it relied on.border-borderto every bare border utility across panels, dialogs, and base components (Card, Dialog, Popover, Sheet, Table, Alert, Badge, ContextMenu, etc.) so dark-mode borders match the sidebar, including the file browser's semi-transparent borders.Testing
pnpm test: 572 tests pass (7 new: reducer unit tests, a property test, and a context-menu component test)npx tsc --noEmit: cleanpnpm i18n:check: 951 keys in parity