fix: ChatList 布局优化 + 多语言适配
- ChatList 字体从 12px 放大到 13px，图标同步放大，改善点击体验 - ConnectionStatus 胶囊移到顶部 header 区域，与下方按钮左对齐 - "Threads" 改为会话列表上方的小标题，充当分割作用 - ConnectionStatus 文字（Connected/Disconnected/Checking）多语言适配 - "从 Claude CLI 导入" 改为 "从 Claude Code 导入" - 新增 i18n key: chatList.threads, connection.connected/disconnected/checking Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
7418andClaude Opus 4.6 committed
1 parent
68bb6b60bb
commit
b174527719
4 files changed
+32
-20
No files matched your search
@@ -358,10 +358,7 @@ export function ChatListPanel({ open, width }: ChatListPanelProps) {
|
||||
style={{ width: width ?? 240 }}
|
||||
>
|
||||
{/* Header - extra top padding for macOS traffic lights */}
|
||||
<div className="flex h-12 shrink-0 items-center justify-between px-3 mt-5 pl-6">
|
||||
<span className="text-[13px] font-semibold tracking-tight text-sidebar-foreground">
|
||||
Threads
|
||||
</span>
|
||||
<div className="flex h-12 shrink-0 items-center px-3 mt-5">
|
||||
<ConnectionStatus />
|
||||
</div>
|
||||
|
||||
@@ -425,12 +422,19 @@ export function ChatListPanel({ open, width }: ChatListPanelProps) {
|
||||
{/* Session list grouped by project */}
|
||||
<ScrollArea className="flex-1 min-h-0 px-3">
|
||||
<div className="flex flex-col pb-3">
|
||||
{/* Section title */}
|
||||
<div className="px-2 pt-1 pb-1.5">
|
||||
<span className="text-[11px] font-medium uppercase tracking-wider text-muted-foreground/60">
|
||||
{t('chatList.threads')}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Split group section */}
|
||||
{isSplitActive && (
|
||||
<div className="mb-2 rounded-lg border border-border/60 bg-muted/30 p-1.5">
|
||||
<div className="flex items-center gap-1.5 px-2 py-1">
|
||||
<Columns2 className="h-3 w-3 text-muted-foreground" />
|
||||
<span className="text-[11px] font-medium text-muted-foreground">{t('split.splitGroup')}</span>
|
||||
<Columns2 className="h-3.5 w-3.5 text-muted-foreground" />
|
||||
<span className="text-xs font-medium text-muted-foreground">{t('split.splitGroup')}</span>
|
||||
</div>
|
||||
<div className="mt-0.5 flex flex-col gap-0.5">
|
||||
{splitSessions.map((session) => {
|
||||
@@ -466,7 +470,7 @@ export function ChatListPanel({ open, width }: ChatListPanelProps) {
|
||||
</span>
|
||||
)}
|
||||
<div className="flex-1 min-w-0">
|
||||
<span className="line-clamp-1 text-[12px] font-medium leading-tight break-all">
|
||||
<span className="line-clamp-1 text-[13px] font-medium leading-tight break-all">
|
||||
{session.title}
|
||||
</span>
|
||||
</div>
|
||||
@@ -532,13 +536,13 @@ export function ChatListPanel({ open, width }: ChatListPanelProps) {
|
||||
>
|
||||
<HugeiconsIcon
|
||||
icon={isCollapsed ? ArrowRight01Icon : ArrowDown01Icon}
|
||||
className="h-3 w-3 shrink-0 text-muted-foreground"
|
||||
className="h-3.5 w-3.5 shrink-0 text-muted-foreground"
|
||||
/>
|
||||
<HugeiconsIcon
|
||||
icon={isCollapsed ? Folder01Icon : FolderOpenIcon}
|
||||
className="h-3.5 w-3.5 shrink-0 text-muted-foreground"
|
||||
className="h-4 w-4 shrink-0 text-muted-foreground"
|
||||
/>
|
||||
<span className="flex-1 truncate text-[12px] font-medium text-sidebar-foreground">
|
||||
<span className="flex-1 truncate text-[13px] font-medium text-sidebar-foreground">
|
||||
{group.displayName}
|
||||
</span>
|
||||
{/* New chat in project button (on hover) */}
|
||||
@@ -562,7 +566,7 @@ export function ChatListPanel({ open, width }: ChatListPanelProps) {
|
||||
>
|
||||
<HugeiconsIcon
|
||||
icon={PlusSignIcon}
|
||||
className="h-3 w-3"
|
||||
className="h-3.5 w-3.5"
|
||||
/>
|
||||
<span className="sr-only">
|
||||
New chat in {group.displayName}
|
||||
@@ -634,7 +638,7 @@ export function ChatListPanel({ open, width }: ChatListPanelProps) {
|
||||
});
|
||||
}}
|
||||
>
|
||||
<Columns2 className="h-3 w-3" />
|
||||
<Columns2 className="h-3.5 w-3.5" />
|
||||
</button>
|
||||
)}
|
||||
{/* Streaming indicator: hidden when hover shows split icon */}
|
||||
@@ -658,14 +662,14 @@ export function ChatListPanel({ open, width }: ChatListPanelProps) {
|
||||
)}
|
||||
</span>
|
||||
<div className="flex-1 min-w-0">
|
||||
<span className="line-clamp-1 text-[12px] font-medium leading-tight break-all">
|
||||
<span className="line-clamp-1 text-[13px] font-medium leading-tight break-all">
|
||||
{session.title}
|
||||
</span>
|
||||
</div>
|
||||
{/* Right area — fixed width, time and delete stacked with opacity */}
|
||||
<div className="relative w-[38px] h-4 shrink-0">
|
||||
<span className={cn(
|
||||
"absolute inset-0 flex items-center justify-end text-[10px] text-muted-foreground/40 truncate transition-opacity",
|
||||
"absolute inset-0 flex items-center justify-end text-[11px] text-muted-foreground/40 truncate transition-opacity",
|
||||
(isHovered || isDeleting) ? "opacity-0" : "opacity-100"
|
||||
)}>
|
||||
{formatRelativeTime(session.updated_at, t)}
|
||||
@@ -678,7 +682,7 @@ export function ChatListPanel({ open, width }: ChatListPanelProps) {
|
||||
onClick={(e) => handleDeleteSession(e, session.id)}
|
||||
disabled={isDeleting}
|
||||
>
|
||||
<HugeiconsIcon icon={Delete02Icon} className="h-3 w-3" />
|
||||
<HugeiconsIcon icon={Delete02Icon} className="h-3.5 w-3.5" />
|
||||
</button>
|
||||
</div>
|
||||
</Link>
|
||||
|
||||
@@ -141,10 +141,10 @@ export function ConnectionStatus() {
|
||||
)}
|
||||
/>
|
||||
{status === null
|
||||
? "Checking"
|
||||
? t('connection.checking')
|
||||
: connected
|
||||
? "Connected"
|
||||
: "Disconnected"}
|
||||
? t('connection.connected')
|
||||
: t('connection.disconnected')}
|
||||
</button>
|
||||
|
||||
<Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
|
||||
|
||||
+5
-1
@@ -22,8 +22,9 @@ const en = {
|
||||
'chatList.delete': 'Delete',
|
||||
'chatList.searchSessions': 'Search sessions...',
|
||||
'chatList.noSessions': 'No sessions yet',
|
||||
'chatList.importFromCli': 'Import from Claude CLI',
|
||||
'chatList.importFromCli': 'Import from Claude Code',
|
||||
'chatList.addProjectFolder': 'Add project folder',
|
||||
'chatList.threads': 'Threads',
|
||||
|
||||
// ── Message list ────────────────────────────────────────────
|
||||
'messageList.claudeChat': 'Claude Chat',
|
||||
@@ -270,6 +271,9 @@ const en = {
|
||||
'connection.installAuto': 'Install Claude Code Automatically',
|
||||
'connection.refresh': 'Refresh',
|
||||
'connection.installClaude': 'Install Claude Code',
|
||||
'connection.connected': 'Connected',
|
||||
'connection.disconnected': 'Disconnected',
|
||||
'connection.checking': 'Checking',
|
||||
|
||||
// ── Install wizard ──────────────────────────────────────────
|
||||
'install.title': 'Install Claude Code',
|
||||
|
||||
+5
-1
@@ -19,8 +19,9 @@ const zh: Record<TranslationKey, string> = {
|
||||
'chatList.delete': '删除',
|
||||
'chatList.searchSessions': '搜索会话...',
|
||||
'chatList.noSessions': '暂无会话',
|
||||
'chatList.importFromCli': '从 Claude CLI 导入',
|
||||
'chatList.importFromCli': '从 Claude Code 导入',
|
||||
'chatList.addProjectFolder': '添加项目文件夹',
|
||||
'chatList.threads': '对话列表',
|
||||
|
||||
// ── Message list ────────────────────────────────────────────
|
||||
'messageList.claudeChat': 'Claude 对话',
|
||||
@@ -267,6 +268,9 @@ const zh: Record<TranslationKey, string> = {
|
||||
'connection.installAuto': '自动安装 Claude Code',
|
||||
'connection.refresh': '刷新',
|
||||
'connection.installClaude': '安装 Claude Code',
|
||||
'connection.connected': '已连接',
|
||||
'connection.disconnected': '未连接',
|
||||
'connection.checking': '检测中',
|
||||
|
||||
// ── Install wizard ──────────────────────────────────────────
|
||||
'install.title': '安装 Claude Code',
|
||||
|
||||
Reference in new issue
Block a user