GCWing / GCWing/OpenBitFun

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

Fermée
#2,430 0 commentaires 0 réactions 0 personnes assignées Voir sur GitHub
Langage dominant
Rust
Étoiles
2.3k
Forks
231
Merge moyen
2 h 49 min
PR mergées (30 j)
589

Description

### 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).

Guide de contribution

Ouvrir le guide de contribution

Piste de recherche

Commencez par src/web-ui/src/app/components/FlowChatHeader.tsx et FlowChatHeader.test.tsx, puis suivez LayoutState et les hooks de useApp.ts. Examinez les règles SCSS de ChatPane, de ChatInput et les règles associées, ainsi que les traductions de flow-chat.json. Le travail est terminé lorsque le bouton bascule l’état de la mise en page, que les libellés et les icônes sont localisés, que les largeurs s’adaptent correctement et que les tests indiqués de type-check, i18n, token-build et les tests ciblés passent.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Évaluation

Stack technique
react, scss, typescript
Domaine
design, frontend, internationalization, testing
Type d'issue
Fonctionnalité
Difficulté
4/5
Temps estimé
3-5 jours
Activité
Active
Clarté
Clairement spécifiée
Accessibilité débutants
68/100

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.