Move the large workspace dialogs onto the design-system dialogs

[DoodleBears]

Requested by Vain

Why the change

The larger dialogs (model editor, folder browser, avatar, Marketplace, permission groups, IM pairing, backups and others) each had their own widths, spacing, footers and legacy CSS. #1608 gave form and confirm dialogs one layout; this does the same for the rest.

Refs #1589
Closes #1601

Special things to note

• New PanelDialog in packages/client/src/client/ds/panel-dialog.tsx for dialogs that aren't a form: title, description, actions on the right, an optional action on the left, scroll and fill body modes.
• Dialog widths are now three sizes, as Vain asked: small 440, medium 760, wide 1060 (dialog consts in ds/tokens.stylex.ts). The 560 size from Give form and confirm dialogs one design-system layout #1608 is gone, and the dialogs that used it moved to 440 or 760. A token test pins the three widths.
• Visible changes: Marketplace 880 → 760, hidden channels 380 → 440, memory backups 380 → 440, folder browser 580 → 760. In the group and behaviour-permission editors, the header row now scrolls with the content. Some footer buttons go from toolbar to outline style. Deleting a permission group uses a red button. Role, permission-exception and group-deletion dialogs submit on Enter.
• Fixed in passing (visible in screenshots): profile backup section headings are bold again and its actions are outline buttons; the "show hidden folders" label is body size.
• About 50 legacy rules removed from styles.ts (each class checked for zero references in packages/ and scripts/). Rules for shared inner content now key off data attributes (data-im-grant, data-pairing-panel, data-external-panel, data-group-editor).
• e2e selectors updated in e2e-human-inbox-list.mjs, e2e-inbox-grant-assignment.mjs and e2e-group-management.mjs (not run).
• Not changed here: onboarding, telemetry notice, release notes, source policy, bridge image/source author and human inbox dialogs (later slices).
• Known gaps, unchanged from before: the "Receiving account" box in the permission group editor has no visible label; "Choose image" / "Remove avatar" wrap in English.
• Verification:
  • pnpm typecheck, pnpm lint, pnpm format:check, pnpm build pass.
  • packages/client tests: 1524 passed, 1 skipped; client-observer.test.ts fails as on main.
  • New tests: panel-dialog.test.ts, folder-browser.test.ts; updated model preset, avatar editor and token tests.
  • Screenshots from a local dev instance with synthetic data. The model editor and Marketplace show their empty/error states because the sandbox has no provider and can't reach Marketplace; permission group and IM pairing tables are empty.
  • Human QA: not done.

Change outline

ds/panel-dialog.tsx   PanelDialog: small 440 | medium 760 | wide 1060, scroll | fill, actions + secondary
ds/form-dialog.tsx    sizes: small | medium | wide
23 dialogs            Modal + bh-* layout  ->  FormDialog / ConfirmDialog / PanelDialog + Field / Callout / Note
styles.ts             ~50 legacy rules removed

Each image: rows zh light, zh dark, en light, en dark; left Before, right After.

Model editor

Folder browser

Avatar

Marketplace

Permission group

IM pairing

Profile backup

Memory backups

Hidden channels

🤖 Generated with Claude Code

https://claude.ai/code/session_0152zfVCAc6MNB8R8xVq9b76

[coderabbitai]

Note

Currently processing new changes in this PR. This may take a few minutes, please wait...

⚙️ Run configuration

• Configuration used: defaults
• Review profile: CHILL
• Plan: Advanced
• Run ID: ee7ff9d3-78ae-4896-98dd-31ae65ca9cbc

📥 Commits

Reviewing files that changed from the base of the PR and between 27af4b4 and d0fda4d.

⛔ Files ignored due to path filters: 9

• .github/pr-screenshots/design-system-workspace-dialogs/avatar.png is excluded by !**/*.png
• .github/pr-screenshots/design-system-workspace-dialogs/folder-browser.png is excluded by !**/*.png
• .github/pr-screenshots/design-system-workspace-dialogs/hidden-channels.png is excluded by !**/*.png
• .github/pr-screenshots/design-system-workspace-dialogs/im-pairing.png is excluded by !**/*.png
• .github/pr-screenshots/design-system-workspace-dialogs/marketplace.png is excluded by !**/*.png
• .github/pr-screenshots/design-system-workspace-dialogs/memory-backups.png is excluded by !**/*.png
• .github/pr-screenshots/design-system-workspace-dialogs/model-editor.png is excluded by !**/*.png
• .github/pr-screenshots/design-system-workspace-dialogs/permission-group.png is excluded by !**/*.png
• .github/pr-screenshots/design-system-workspace-dialogs/profile-backup.png is excluded by !**/*.png

📒 Files selected for processing: 38

• changes/1601-design-system-workspace-dialogs.md
• packages/client/src/client/avatar-appearance-editor.tsx
• packages/client/src/client/behavior-permission-settings.tsx
• packages/client/src/client/channel-history.tsx
• packages/client/src/client/channel-sidebar-builtins.tsx
• packages/client/src/client/composer-context-styles.ts
• packages/client/src/client/diagnostic-bundle.tsx
• packages/client/src/client/dm-composer-context.tsx
• packages/client/src/client/ds/form-dialog.tsx
• packages/client/src/client/ds/panel-dialog.tsx
• packages/client/src/client/ds/tokens.stylex.ts
• packages/client/src/client/external-entries.tsx
• packages/client/src/client/external-identity-list.tsx
• packages/client/src/client/group-composer-context.tsx
• packages/client/src/client/group-member-controls.tsx
• packages/client/src/client/hidden-channels.tsx
• packages/client/src/client/marketplace.tsx
• packages/client/src/client/messaging-grant.tsx
• packages/client/src/client/model-preset-profile.tsx
• packages/client/src/client/pairing-settings.tsx
• packages/client/src/client/permission-group-settings.tsx
• packages/client/src/client/personabot-deletion.tsx
• packages/client/src/client/primary-color-editor.tsx
• packages/client/src/client/profile-backup.tsx
• packages/client/src/client/profile-header.tsx
• packages/client/src/client/schedules-entry.tsx
• packages/client/src/client/styles.ts
• packages/client/src/client/workspace-grants-entry.tsx
• packages/client/test/avatar-appearance-editor.test.ts
• packages/client/test/design-system-tokens.test.ts
• packages/client/test/folder-browser.test.ts
• packages/client/test/model-preset-profile.test.ts
• packages/client/test/panel-dialog.test.ts
• packages/client/test/primitive-mocks.ts
• packages/client/test/styles-tokens.test.ts
• scripts/e2e-group-management.mjs
• scripts/e2e-human-inbox-list.mjs
• scripts/e2e-inbox-grant-assignment.mjs

 ___________________________________________________________
< Your API returns 200 OK; your users return 404 Not Found. >
 -----------------------------------------------------------
  \
   \   (\__/)
       (•ㅅ•)
       / 　 づ

✨ Finishing Touches

📝 Generate docstrings

• Commit to this branch
• Create a new PR

🧪 Generate unit tests (beta)

• Commit to this branch
• Create a new PR

• Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}