feat(default): mode-picker dialog before Create API Key drawer - #2
Merged
Conversation
User-facing: clicking "Create API Key" now shows a small dialog that asks
"Simple or Advanced?" with two large clickable cards explaining each
mode, instead of putting a Tabs toggle inside the drawer header. Cleaner
first-impression for the 90% of users who don't know what the modes mean.
- New ApiKeyModePickerDialog (2 cards: Simple recommended / Advanced)
- New ApiKeysDialogType 'mode-picker'
- "+ Create" button and empty-state CTA both open the picker first
- Picker persists choice via savePreferredMode() then setOpen('create')
- Drawer SheetHeader now shows the chosen mode + a discreet
"Switch to {other}" link that re-opens the picker (drawer-state stays
in form so toggling mid-flow doesn't lose typed values)
- Removed the Tabs toggle that lived inside the drawer body
- Removed unused use-api-key-form-mode hook (lib's load/save
PreferredMode is the canonical mode-persistence path)
Update flow is unchanged: the picker only triggers for create, edit
still infers the right mode from the token's actual state via
detectAdvancedMode().
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
Re-applies PRD §4.1 Simple-mode UI that a prior refactor had stripped to "hide a few Advanced fields", and fixes adjacent end-user-facing ratio / group leaks. All changes are additive to the mode-picker dialog flow introduced in this branch. Restore PRD §4.1 Simple body: - ApiKeyPurposePicker (6 cards: 💬 Chat / 💻 Coding / 🎨 Image / 🎬 Video / 🎙️ Voice / ⚡ All-Auto) is back in the drawer - ApiKeyBrandFilter (Claude / OpenAI / Gemini / DeepSeek chips, optional) - ApiKeyPriceTier (4 tiers, Standard default, Ultra requires confirm) when purpose = "all" - ApiKeySuccessDialog on Simple-mode single-key create — reveals key + base URL + recommended model name + 6 client-tutorial chips Backend-fallback for the picker: - New lib/api-key-purposes-fallback.ts mirrors setting/alias_setting/seed/aliases.yaml as hardcoded constants - getApiKeyPurposes() now falls through to the fallback when the Go backend hasn't shipped /api/user/self/api-key-purposes yet (binary needs rebuild) — frontend works regardless End-user ratio / group hides: - Hide the "用户分组" column from the /keys table for non-admin users (admin still sees it via the usual isAdmin >= 10 gate). The 1.2x / 5x markup badge that was rendering next to user keys was leaking pricing internals to customers — same problem PR #0 fixed for the Create form, now resolved at the table too - "Allowed models" promoted out of the Advanced Settings Collapsible into its own main-area section. The old "Model Limits" label was technical and buried — non-tech users couldn't find where to pick e.g. DeepSeek. Now it's a labelled section with a clear placeholder and a live count description Other: - Pin dev server to port 17231 in rsbuild.config.ts. 3000/3001/4200/ 5173/8000/8080 routinely collide with other Node/Vite/Next dev servers; 17231 is uncommon enough to own across dev boxes - i18n: 5 new en + zh keys for the renamed model-limits section Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This was referenced May 16, 2026
10 tasks
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
use-api-key-form-mode.tshook，统一用lib/api-key-form.ts里的loadPreferredMode/savePreferredMode背景
原来 Simple/Advanced 是 drawer 顶部的 Tabs，用户一打开看到两个 tab 不知道是啥。改成弹窗先问一下"你想怎么建？"——两张卡片各带描述，对小白更友好。
Test plan
bun run typecheck通过文件
api-key-mode-picker-dialog.tsxapi-keys-dialogs.tsx、api-keys-mutate-drawer.tsx、api-keys-primary-buttons.tsx、api-keys-table.tsx、types.tshooks/use-api-key-form-mode.ts🤖 Generated with Claude Code