GCWing / GCWing/OpenBitFun

[Feature]: 会话全宽平铺切换(chat full-width tiled toggle)

オープン
#2,430 コメント 0 件 リアクション 0 件 担当者 0 名 GitHub で見る
主要言語
Rust
スター
2.3k
フォーク
231
平均マージ
2時間 46分
マージ済み PR(30日)
577

説明

### Problem / opportunity

The chat reading column in the web UI is capped at a fixed `900px` max-width (hard-coded in multiple SCSS rules). On wide windows or when the side panels are collapsed, users cannot expand the conversation to use the available width, forcing a narrow centered column even when there is plenty of horizontal space.

### Proposed behavior

Add a full-width tiled toggle to the FlowChatHeader. When enabled, the chat reading column (message list, composer, runtime-status, explore region, file-modifications bar) stretches edge-to-edge instead of capping at `900px`; the layout returns to the centered `900px` column when the toggle is off, including when the chat pane is collapsed.

A new appearance token ``--bf-appearance-token-flowchat-content-max-width`` (default `900px`) replaces the hard-coded `900px`, so the full-width behavior is backed by the appearance token system and other surfaces keep their existing width.

### Product surface

- Web UI

### Details, examples, or constraints

- New `layout.chatFullWidth` boolean in `LayoutState` / `DEFAULT_LAYOUT_STATE` (`src/web-ui/src/app/types/index.ts`).
- Fine-grained hooks `useChatFullWidth` and `useToggleChatFullWidth` in `useApp.ts` (uses `useSyncExternalStore` so only observing components re-render, and the action reads the manager directly).
- Toggle button in `FlowChatHeader.tsx` (Maximize2 / Minimize2 icons), aria-label + tooltip via i18n.
- i18n strings for en-US / zh-CN / zh-TW in `flow-chat.json` (``layout.fullWidth.enter`` / ``layout.fullWidth.exit``).
- `ChatPane` / `ChatInput` / related SCSS rules switched from hard-coded `900px` to the appearance token, plus a full-width modifier that removes the cap.
- Focused test added in `FlowChatHeader.test.tsx` (``session-fullwidth-toggle`` renders and flips the layout).
- Verification: `pnpm run type-check:web`, i18n check (0 warnings), apperance/theme token build, `vitest` focused tests (6 passed).

コントリビューションガイド

コントリビューションガイドを開く

調査の方向性

Start with src/web-ui/src/app/components/FlowChatHeader.tsx and FlowChatHeader.test.tsx, then trace LayoutState and the useApp.ts hooks. Inspect the ChatPane, ChatInput, and related SCSS rules plus flow-chat.json translations. Done means the toggle changes layout state, labels and icons are localized, widths respond correctly, and the listed type-check, i18n, token-build, and focused tests pass.

索引モデルが issue の本文から書いたものです。

評価

技術スタック
react, scss, typescript
領域
design, frontend, internationalization, testing
issue の種類
機能追加
難易度
4/5
見積もり時間
3〜5日
活発さ
活発
明瞭さ
明確に書かれている
初心者へのやさしさ
68/100

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。