feat(ui): 优化项目树左侧栏视觉样式

[ttmouse]

改动内容

优化了左侧项目树导航栏的视觉样式

功能变更

• 图标栈：折叠箭头与文件夹图标在同一位置互斥切换（默认显示文件夹，hover 显示箭头）
• 文件夹图标：展开时显示 FolderOpen，折叠时显示 Folder
• 无子节点项目也支持展开/折叠操作
• 新建会话图标从 SquarePen 改为 + 号
• 一级菜单右侧操作图标默认隐藏，悬停时显示

视觉调整

• 项目名称分层弱化：有子节点使用 fg-dim/fg-faint 混合，空项目使用 fg-faint
• 二级菜单整行宽展示，选中前后文字样式不变
• 右侧时间展示字号缩小，颜色更淡
• 展开的项目与下一项目之间增加 6px 间距（仅限有子节点时）
• 一级菜单 hover 加 60% 弱背景，二级菜单保持 100% 背景
• 置顶/归档图标按钮去除背景和边框
• 移除右侧位移动画

问题修复

• 二级菜单高度固定，有无时间信息保持一致
• 移除了 children grid-template-rows 过渡动画，避免展开时后续项目抖动
• aria-expanded 改为跟随 isExpanded，空项目也能正确展示状态
• 时间筛选器和搜索栏固定在顶部，不随列表滚动

文件变更

• desktop/frontend/src/components/ProjectTree.tsx — 结构优化，header 移出列表
• desktop/frontend/src/styles.css — 新增 200+ 行视觉样式规则

[ttmouse]

[ttmouse]

2026-06-16.16.15.00.mov

[dovewi]

可以可以，这个简洁清晰

[SivanCola]

Thanks, this is directionally right and the visual cleanup is nicely scoped. Before merging, please address:

• desktop/frontend/src/styles.css: .project-tree__folder-action-slot is hidden with opacity: 0 and pointer-events: none, but it only becomes visible on .project-tree__folder:hover. The menu/create buttons remain tabbable, so keyboard users can focus invisible controls. Please also reveal the slot on :focus-within or while the menu/create action is active/open.
• desktop/frontend/src/styles.css: the expanded-project spacing adds both margin-bottom: 6px on the expanded wrapper and margin-top: 6px on the following wrapper. Since these wrappers are flex items, the margins do not collapse, so the intended 6px gap becomes 12px. Please keep the spacing on only one side.

I checked the PR against the current main-v2 head. The diff is UI-only, with no cache/provider-prefix risk and no security-sensitive surface. git diff --check passed, pnpm --dir desktop/frontend check:css passed, and GitHub CI is green.

Once these are addressed and CI stays green, I will consider merging it into main-v2.

[SivanCola]

Thanks for the follow-up. The two earlier review items are addressed now:

• .project-tree__folder-action-slot is revealed on :focus-within, so keyboard focus no longer lands on invisible folder action buttons.
• The expanded-project spacing is now one-sided (margin-bottom: 6px only), so the 6px gap no longer doubles.

One regression still needs fixing before merge:

• desktop/frontend/src/components/ProjectTree.tsx: the folder button now calls toggleExpand(key) unconditionally and sets aria-expanded from isExpanded alone. For a project with no children, clicking the row can put a non-collapsible item into an expanded state, switch the icon to FolderOpen, and expose aria-expanded="true" even though no child list is rendered. Please keep the new icon stack, but gate the expand toggle, aria-expanded, and open-folder state on hasChildren so empty projects remain non-expandable.

I also checked the broader risk surface: this PR is UI-only, with no cache/provider-prefix risk and no security-sensitive behavior. #4567 is related UI work and may need merge-order attention, but it does not change this ProjectTree.tsx expand logic.

Verified:

• git diff --check origin/main-v2...HEAD passed
• pnpm --dir desktop/frontend check:css passed
• wails generate module followed by pnpm --dir desktop/frontend build passed
• GitHub CI is green on the latest head

Once the empty-project expand behavior is fixed and CI stays green, I will consider merging it into main-v2.

[SivanCola]

Approved. I pushed 85fcffd to this PR branch to address the remaining empty-project disclosure regression.

What changed:

• Kept the new project-tree icon stack, but now gates the expand toggle, aria-expanded, and open-folder state on hasChildren.
• Scoped the hover chevron CSS to expandable icon stacks so empty projects keep their folder icon on hover instead of looking like disclosure rows.
• Added focused runtime coverage for expandable and non-expandable project folder states.

Authorship note: @ttmouse remains the primary author of this PR. @SivanCola contributed as a collaborator by fixing the follow-up issue found during review and verifying the final state.

Verified:

• pnpm --dir desktop/frontend exec tsx src/__tests__/project-tree-runtime.test.ts passed
• pnpm --dir desktop/frontend check:css passed
• git diff --check origin/main-v2...HEAD passed
• wails generate module followed by pnpm --dir desktop/frontend build passed
• GitHub CI passed on 85fcffd

[SivanCola]

@codex review

[chatgpt-codex-connector]

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 323715a133

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

• Open a pull request for review
• Mark a draft as ready
• Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".