Skip to content

Commit 2e43c32

Browse files
author
GCWing
committed
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
1 parent 8b23640 commit 2e43c32

13 files changed

Lines changed: 314 additions & 91 deletions

File tree

‎src/web-ui/src/app/components/AboutDialog/AboutDialog.scss‎

Lines changed: 8 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@
3131
.bitfun-about-dialog__title {
3232
font-family: var(--font-family-sans);
3333
font-size: 28px;
34-
font-weight: 700;
34+
font-weight: 800;
3535
margin: 0 0 10px 0;
3636
letter-spacing: -0.03em;
3737
color: var(--color-text-primary);
@@ -176,15 +176,14 @@
176176

177177
.bitfun-about-dialog__info-label {
178178
flex-shrink: 0;
179-
font-size: 11px;
180-
color: var(--color-text-muted);
181-
font-weight: 400;
182-
opacity: 0.7;
179+
font-size: 12px;
180+
color: var(--color-text-secondary);
181+
font-weight: 500;
183182
}
184183

185184
.bitfun-about-dialog__info-value {
186-
font-size: 11px;
187-
color: var(--color-text-muted);
185+
font-size: 12px;
186+
color: var(--color-text-primary);
188187
font-weight: 400;
189188
text-align: right;
190189
overflow: hidden;
@@ -193,8 +192,8 @@
193192

194193
&--mono {
195194
font-family: 'Consolas', 'Monaco', monospace;
196-
font-size: 10px;
197-
opacity: 0.8;
195+
font-size: 11px;
196+
font-weight: 500;
198197
}
199198
}
200199

‎src/web-ui/src/app/components/NavPanel/sections/workspaces/DotMatrixArrowRightIcon.tsx‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
import React from 'react';
2+
3+
/**
4+
* Right-pointing filled triangle rendered as a 3-column × 5-row dot grid (▶ style).
5+
*
6+
* Grid (col 0 = left, col 2 = tip on the right):
7+
* • . .
8+
* • • .
9+
* • • • ← rightmost tip
10+
* • • .
11+
* • . .
12+
*/
13+
export const DotMatrixArrowRightIcon: React.FC<{
14+
size?: number;
15+
className?: string;
16+
}> = ({ size = 14, className }) => {
17+
const rows = [
18+
'100',
19+
'110',
20+
'111',
21+
'110',
22+
'100',
23+
];
24+
25+
const cell = 4;
26+
const dotR = 1.5;
27+
const w = rows[0].length * cell;
28+
const h = rows.length * cell;
29+
30+
const dots: React.ReactNode[] = [];
31+
rows.forEach((row, y) => {
32+
for (let x = 0; x < row.length; x += 1) {
33+
if (row[x] !== '1') continue;
34+
dots.push(
35+
<circle
36+
key={`${x}-${y}`}
37+
cx={x * cell + cell / 2}
38+
cy={y * cell + cell / 2}
39+
r={dotR}
40+
/>
41+
);
42+
}
43+
});
44+
45+
return (
46+
<svg
47+
width={size}
48+
height={size}
49+
viewBox={`0 0 ${w} ${h}`}
50+
className={className}
51+
aria-hidden="true"
52+
>
53+
<g fill="currentColor">{dots}</g>
54+
</svg>
55+
);
56+
};

‎src/web-ui/src/app/components/NavPanel/sections/workspaces/WorkspaceItem.tsx‎

Lines changed: 20 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import React, { useCallback, useContext, useEffect, useRef, useState } from 'react';
22
import { createPortal } from 'react-dom';
3-
import { Folder, FolderOpen, MoreHorizontal, GitBranch, FolderSearch, Plus, ChevronDown, Trash2, RotateCcw, Copy, FileText } from 'lucide-react';
3+
import { Folder, FolderOpen, MoreHorizontal, FolderSearch, Plus, ChevronDown, Trash2, RotateCcw, Copy, FileText, GitBranch } from 'lucide-react';
4+
import { DotMatrixArrowRightIcon } from './DotMatrixArrowRightIcon';
45
import { ConfirmDialog, Tooltip } from '@/component-library';
56
import { useI18n } from '@/infrastructure/i18n';
67
import { i18nService } from '@/infrastructure/i18n';
@@ -401,6 +402,7 @@ const WorkspaceItem: React.FC<WorkspaceItemProps> = ({
401402
sessionsCollapsed && 'is-sessions-collapsed',
402403
isSingle && 'is-single',
403404
].filter(Boolean).join(' ')}
405+
aria-current={isActive ? 'location' : undefined}
404406
aria-grabbed={draggable ? isDragging : undefined}>
405407
<div
406408
className="bitfun-nav-panel__assistant-item-card"
@@ -416,9 +418,15 @@ const WorkspaceItem: React.FC<WorkspaceItemProps> = ({
416418
aria-expanded={!sessionsCollapsed}
417419
>
418420
<span className="bitfun-nav-panel__assistant-item-avatar" aria-hidden="true">
419-
<span className="bitfun-nav-panel__assistant-item-avatar-letter">
420-
{workspaceDisplayName.charAt(0)}
421-
</span>
421+
{isActive ? (
422+
<span className="bitfun-nav-panel__assistant-item-active-icon">
423+
<DotMatrixArrowRightIcon size={14} />
424+
</span>
425+
) : (
426+
<span className="bitfun-nav-panel__assistant-item-avatar-letter">
427+
{workspaceDisplayName.charAt(0)}
428+
</span>
429+
)}
422430
<span className={`bitfun-nav-panel__assistant-item-icon-toggle${sessionsCollapsed ? ' is-collapsed' : ''}`}>
423431
<ChevronDown size={12} />
424432
</span>
@@ -568,6 +576,7 @@ const WorkspaceItem: React.FC<WorkspaceItemProps> = ({
568576
sessionsCollapsed && 'is-sessions-collapsed',
569577
isSingle && 'is-single',
570578
].filter(Boolean).join(' ')}
579+
aria-current={isActive ? 'location' : undefined}
571580
aria-grabbed={draggable ? isDragging : undefined}>
572581
<div
573582
className="bitfun-nav-panel__workspace-item-card"
@@ -584,7 +593,13 @@ const WorkspaceItem: React.FC<WorkspaceItemProps> = ({
584593
>
585594
<span className="bitfun-nav-panel__workspace-item-icon" aria-hidden="true">
586595
<span className="bitfun-nav-panel__workspace-item-icon-default">
587-
<FolderOpen size={14} />
596+
{isActive ? (
597+
<span className="bitfun-nav-panel__workspace-item-active-icon">
598+
<DotMatrixArrowRightIcon size={14} />
599+
</span>
600+
) : (
601+
<FolderOpen size={14} />
602+
)}
588603
</span>
589604
<span className={`bitfun-nav-panel__workspace-item-icon-toggle${sessionsCollapsed ? ' is-collapsed' : ''}`}>
590605
<ChevronDown size={14} />
@@ -608,12 +623,6 @@ const WorkspaceItem: React.FC<WorkspaceItemProps> = ({
608623
</span>
609624
)}
610625
</span>
611-
{!isRemoteWorkspace(workspace) && currentBranch ? (
612-
<span className="bitfun-nav-panel__workspace-item-branch">
613-
<GitBranch size={11} />
614-
<span>{currentBranch}</span>
615-
</span>
616-
) : null}
617626
</button>
618627

619628
<div className="bitfun-nav-panel__workspace-item-menu" ref={menuRef}>

0 commit comments

Comments
 (0)