refactor(ui): replace modal implementation with Dialog component in R… - #448
Draft
Loosand wants to merge 15 commits into
Draft
refactor(ui): replace modal implementation with Dialog component in R…#448Loosand wants to merge 15 commits into
Loosand wants to merge 15 commits into
Conversation
…emotePathPickerModal and GitBranchSelector
StackCairn
marked this pull request as draft
August 13, 2026 03:47
Contributor
|
PR governance checks failed — this PR has been converted to draft.
Fix the items above, then click Ready for review to re-run the checks. |
…Modal for clarity and consistency
…oss various components for consistency and improved user experience
- Introduced a new test file to validate the visibility of shared settings dialogs. - Added assertions to check for specific CSS rules related to dialog content opacity and styles. - Updated common-settings.css to ensure proper handling of dialog visibility based on data attributes.
- Eliminated the `useModalMotion` hook and its associated CSS for dialog animations. - Updated various components to manage dialog visibility using local state instead of the removed utility. - Cleaned up CSS by removing outdated modal styles and ensuring proper dialog handling across the application. - Added new tests to validate dialog visibility and interactions in the settings context.
- Updated various dialog components to use standardized z-index variables instead of hardcoded values. - Removed outdated overlay and viewport class names from dialog components for cleaner code. - Enhanced the styling of dialog content to improve consistency across the application. - Adjusted related tests to ensure proper validation of dialog visibility and interactions.
…lity - Updated various dialog components to utilize standardized headers, bodies, and footers for improved consistency. - Enhanced accessibility by adding close buttons and labels to dialog components. - Cleaned up CSS styles related to dialog components for better maintainability. - Adjusted related tests to ensure proper validation of dialog structure and interactions.
…Hub and Skills Hub - Added new translation keys for basic settings, connection settings, and optional details in both English and Chinese. - Updated existing translation for skills import scanning to be more concise in both languages. - Improved the structure of the MCP Server Edit Modal for better organization and clarity. - Introduced a minimum loading duration for skills scanning to enhance user experience.
… improve state management - Replaced Input with NumberInput for better number handling in FailoverNumberField. - Updated state management to use number type instead of string for draft value. - Enhanced commitDraft function to handle null values and ensure proper value commitment. - Adjusted layout and spacing in FailoverSettingsCard for improved UI consistency.
…ric input handling - Added a new NumberInput component to improve numeric input handling with increment and decrement functionality. - Replaced existing Input components with NumberInput in various settings pages for better user experience. - Updated state management to handle numeric values directly, ensuring proper value commitment and UI consistency. - Enhanced translations for memory refresh actions in both English and Chinese to improve user feedback during operations.
…files - Updated the `RemotePathPickerModal` to use responsive height constraints for better UI adaptability. - Refactored tests to align with updated component structures, including changes to popover and tooltip implementations. - Enhanced styling consistency in `SkillsImportView` and other components by removing unnecessary background opacity and adjusting padding. - Cleaned up imports and ensured proper usage of components in `SshTunnelPanel` and `McpRegistryBrowser`. - Improved code readability by formatting and restructuring conditional statements in `FileTreeRow` and `modelCatalog.ts`.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
关联 Issue
无
概要
将
RemotePathPickerModal和GitBranchSelector中手写的模态框实现替换为基于 Base UI 的共享 shadcn 风格Dialog组件。原实现通过
createPortal、fixed和手动设置z-index管理弹层。当用户在“新建 Worktree”模态框中继续打开远程目录选择器时，会形成两层相互独立的手写模态框，容易出现遮罩层、焦点锁定、Escape 键响应和层级顺序冲突。本次改动：
@base-ui/react/dialog的共享Dialog组件；变更范围
agent-ui、agent-gateway/webcrates/agent-ui/src/components/ui/dialog.tsxcrates/agent-ui/src/components/git/GitBranchSelector.tsxcrates/agent-gateway/web/src/components/RemotePathPickerModal.tsxcrates/agent-ui/src/styles/base.css截图 / 运行预览
修改前
修改后
嵌套目录选择器
运行时检查步骤：
验证
已执行：
cd crates/agent-gui && node_modules/.bin/tsc --noEmitcd crates/agent-gateway/web && node_modules/.bin/tsc --noEmitcd crates/agent-gui && node_modules/.bin/vite buildcd crates/agent-gateway/web && node_modules/.bin/vite buildnode scripts/check-ui-boundaries.mjsgit diff --checkGUI 和 WebUI 的 TypeScript 检查、生产构建及 UI 边界检查均通过。
本次改动仅替换模态框基础组件，Worktree 创建与路径选择的业务逻辑保持不变，因此未新增专项业务测试；嵌套 Dialog 的交互通过上述运行流程验证。
提交前检查