Skip to content

feat(terminal): add Close All Tabs + unify dark-mode borders and search input icons - #84

Merged
GOODBOY008 merged 6 commits into
GOODBOY008:mainfrom
sunxiaobin89:fix/close-all-tabs-and-search-input-overlap
Aug 13, 2026
Merged

feat(terminal): add Close All Tabs + unify dark-mode borders and search input icons#84
GOODBOY008 merged 6 commits into
GOODBOY008:mainfrom
sunxiaobin89:fix/close-all-tabs-and-search-input-overlap

Conversation

@sunxiaobin89

Copy link
Copy Markdown
Contributor

Summary

Two UI refinements for the terminal window:

  1. Tab context menu now offers "Close All Tabs" — previously you could only close the current tab, other tabs, or tabs to the left/right; closing everything required closing tabs one by one.
  2. Search input icons no longer overlap the text in the log monitor / log viewer, and borders are now consistent across the app in dark mode.

Root cause

  • The tab menu simply lacked a "close all" action in the reducer.
  • src/index.css mixed Tailwind v3 @tailwind directives 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.
  • Many border utilities across panels, dialogs, and base components used a bare border class with no color, which falls back to currentColor — bright white lines in dark mode, inconsistent with the sidebar's border-border.

Changes

  • Close All Tabs: new CLOSE_ALL_TABS reducer action (empties a group's tabs, clears tabToGroupMap, removes the group unless it is the last one), a context-menu item, and i18n keys (en + zh-CN).
  • Tailwind cleanup: strip the pasted v4 output from index.css (leaving only the v3 directives), install tailwindcss-animate to keep shadcn enter/exit animations generated by v3, remove v4-only syntax from globals.css, and re-declare the typography variables it relied on.
  • Border unification: 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, 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: clean
  • pnpm i18n:check: 951 keys in parity
  • DMG manually verified: search icons, "Close All Tabs", popup animations, and dark-mode borders all confirmed by the user

- 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

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Comment thread src/styles/globals.css
--text-xl: 1.25rem;
--text-2xl: 1.5rem;
--text-3xl: 1.875rem;
--font-weight-semibold: 600;

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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 })}>

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.
@GOODBOY008

Copy link
Copy Markdown
Owner

@sunxiaobin89 Thanks for your continuous contributions. LGTM ~

@GOODBOY008
GOODBOY008 merged commit 9a5ec2f into GOODBOY008:main Aug 13, 2026
4 checks passed
@sunxiaobin89
sunxiaobin89 deleted the fix/close-all-tabs-and-search-input-overlap branch August 14, 2026 04:56
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants