From 066906f914f53ced368840a9daaae5aea3642fe7 Mon Sep 17 00:00:00 2001 From: GCWing Date: Mon, 13 Apr 2026 11:40:34 +0800 Subject: [PATCH] feat(web-ui): polish workspace nav, agents scene, and flow chat header - Workspace list styling and dot-matrix arrow icon - Agents scene and card layout tweaks - Flow chat header, session files badge, and i18n strings - About dialog style adjustments --- .../components/AboutDialog/AboutDialog.scss | 17 ++- .../workspaces/DotMatrixArrowRightIcon.tsx | 56 ++++++++ .../sections/workspaces/WorkspaceItem.tsx | 33 +++-- .../workspaces/WorkspaceListSection.scss | 130 ++++++++++++------ .../src/app/scenes/agents/AgentsScene.tsx | 26 ++-- .../scenes/agents/components/AgentCard.scss | 9 +- .../agents/components/CreateAgentPage.scss | 9 +- .../components/modern/FlowChatHeader.scss | 29 ++++ .../components/modern/FlowChatHeader.tsx | 13 +- .../modern/ModernFlowChatContainer.tsx | 1 + .../components/modern/SessionFilesBadge.scss | 16 ++- src/web-ui/src/locales/en-US/flow-chat.json | 33 ++++- src/web-ui/src/locales/zh-CN/flow-chat.json | 35 ++++- 13 files changed, 315 insertions(+), 92 deletions(-) create mode 100644 src/web-ui/src/app/components/NavPanel/sections/workspaces/DotMatrixArrowRightIcon.tsx diff --git a/src/web-ui/src/app/components/AboutDialog/AboutDialog.scss b/src/web-ui/src/app/components/AboutDialog/AboutDialog.scss index bdbb590d2..6417e7b75 100644 --- a/src/web-ui/src/app/components/AboutDialog/AboutDialog.scss +++ b/src/web-ui/src/app/components/AboutDialog/AboutDialog.scss @@ -31,7 +31,7 @@ .bitfun-about-dialog__title { font-family: var(--font-family-sans); font-size: 28px; - font-weight: 700; + font-weight: 800; margin: 0 0 10px 0; letter-spacing: -0.03em; color: var(--color-text-primary); @@ -176,15 +176,14 @@ .bitfun-about-dialog__info-label { flex-shrink: 0; - font-size: 11px; - color: var(--color-text-muted); - font-weight: 400; - opacity: 0.7; + font-size: 12px; + color: var(--color-text-secondary); + font-weight: 500; } .bitfun-about-dialog__info-value { - font-size: 11px; - color: var(--color-text-muted); + font-size: 12px; + color: var(--color-text-primary); font-weight: 400; text-align: right; overflow: hidden; @@ -193,8 +192,8 @@ &--mono { font-family: 'Consolas', 'Monaco', monospace; - font-size: 10px; - opacity: 0.8; + font-size: 11px; + font-weight: 500; } } diff --git a/src/web-ui/src/app/components/NavPanel/sections/workspaces/DotMatrixArrowRightIcon.tsx b/src/web-ui/src/app/components/NavPanel/sections/workspaces/DotMatrixArrowRightIcon.tsx new file mode 100644 index 000000000..9be40fa11 --- /dev/null +++ b/src/web-ui/src/app/components/NavPanel/sections/workspaces/DotMatrixArrowRightIcon.tsx @@ -0,0 +1,56 @@ +import React from 'react'; + +/** + * Right-pointing filled triangle rendered as a 3-column × 5-row dot grid (▶ style). + * + * Grid (col 0 = left, col 2 = tip on the right): + * • . . + * • • . + * • • • ← rightmost tip + * • • . + * • . . + */ +export const DotMatrixArrowRightIcon: React.FC<{ + size?: number; + className?: string; +}> = ({ size = 14, className }) => { + const rows = [ + '100', + '110', + '111', + '110', + '100', + ]; + + const cell = 4; + const dotR = 1.5; + const w = rows[0].length * cell; + const h = rows.length * cell; + + const dots: React.ReactNode[] = []; + rows.forEach((row, y) => { + for (let x = 0; x < row.length; x += 1) { + if (row[x] !== '1') continue; + dots.push( + + ); + } + }); + + return ( + + ); +}; diff --git a/src/web-ui/src/app/components/NavPanel/sections/workspaces/WorkspaceItem.tsx b/src/web-ui/src/app/components/NavPanel/sections/workspaces/WorkspaceItem.tsx index 882e87a20..e2d593043 100644 --- a/src/web-ui/src/app/components/NavPanel/sections/workspaces/WorkspaceItem.tsx +++ b/src/web-ui/src/app/components/NavPanel/sections/workspaces/WorkspaceItem.tsx @@ -1,6 +1,7 @@ import React, { useCallback, useContext, useEffect, useRef, useState } from 'react'; import { createPortal } from 'react-dom'; -import { Folder, FolderOpen, MoreHorizontal, GitBranch, FolderSearch, Plus, ChevronDown, Trash2, RotateCcw, Copy, FileText } from 'lucide-react'; +import { Folder, FolderOpen, MoreHorizontal, FolderSearch, Plus, ChevronDown, Trash2, RotateCcw, Copy, FileText, GitBranch } from 'lucide-react'; +import { DotMatrixArrowRightIcon } from './DotMatrixArrowRightIcon'; import { ConfirmDialog, Tooltip } from '@/component-library'; import { useI18n } from '@/infrastructure/i18n'; import { i18nService } from '@/infrastructure/i18n'; @@ -56,7 +57,7 @@ const WorkspaceItem: React.FC = ({ } = useWorkspaceContext(); const { switchLeftPanelTab } = useApp(); const openNavScene = useNavSceneStore(s => s.openNavScene); - const { isRepository, currentBranch } = useGitBasicInfo(workspace.rootPath); + const { isRepository } = useGitBasicInfo(workspace.rootPath); const [menuOpen, setMenuOpen] = useState(false); const [worktreeModalOpen, setWorktreeModalOpen] = useState(false); const [deleteDialogOpen, setDeleteDialogOpen] = useState(false); @@ -401,6 +402,7 @@ const WorkspaceItem: React.FC = ({ sessionsCollapsed && 'is-sessions-collapsed', isSingle && 'is-single', ].filter(Boolean).join(' ')} + aria-current={isActive ? 'location' : undefined} aria-grabbed={draggable ? isDragging : undefined}>
= ({ aria-expanded={!sessionsCollapsed} >