fix(profile): give the editor room — three panels instead of a cramped column
CI / Build & test (Node 20) (push) Canceled after 0s
CI / Build & test (Node 24) (push) Canceled after 0s
CI / Build & test (push) Canceled after 0s
CodeQL / Analyze (javascript-typescript) (push) Canceled after 0s
Security / Secret scan (gitleaks) (push) Canceled after 0s
Security / Dependency scan (OSV-Scanner) (push) Canceled after 0s
Security / IaC/config scan (Trivy) (push) Canceled after 0s
Security / License compliance scan (Trivy) (push) Canceled after 0s
OpenSSF Scorecard / Scorecard analysis (push) Canceled after 0s
CI / Build & test (Node 20) (push) Canceled after 0s
CI / Build & test (Node 24) (push) Canceled after 0s
CI / Build & test (push) Canceled after 0s
CodeQL / Analyze (javascript-typescript) (push) Canceled after 0s
Security / Secret scan (gitleaks) (push) Canceled after 0s
Security / Dependency scan (OSV-Scanner) (push) Canceled after 0s
Security / IaC/config scan (Trivy) (push) Canceled after 0s
Security / License compliance scan (Trivy) (push) Canceled after 0s
OpenSSF Scorecard / Scorecard analysis (push) Canceled after 0s
The owner's verdict on the first editor was "imprensado", and it was: the
settings shell caps its content at 640px, and the editor put a 360px preview
next to six-column tile grids inside that. Everything was legible and nothing
was usable.
Now it follows the shape of the reference (Discord's profile editor):
- left, 320px: the list of sections, each showing its current value as a
mini preview (the nameplate strip, the decorated avatar, the styled name,
the theme swatch, the effect thumbnail). Picking one replaces the list
with that section's editor, with a back arrow — a drill-down instead of
sub-modals, one level deep.
- centre: the live card, plus two in-context samples — how the name and tag
read on a chat line, and the row in the member list with its nameplate.
- right: the Board as others see it, with an Edit shortcut.
Tiles went from 5–6 per row to 2–3, with real size (Gg samples at 26px,
decorations on a 56px avatar, effect thumbnails 64px tall). The settings
shell drops its width cap and lets the panel fill the height for this tab
only; every other panel keeps the single reading column. Stacks to one
column below the lg breakpoint.
Verified: web build, 517 web tests. Not verified: pixels — there is no
browser here, so the proportions are from the reference and the numbers, and
a screenshot decides.
Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
This commit is contained in:
@@ -1141,6 +1141,21 @@ export const en = {
|
||||
'profile.widgets.rotation': 'Games in Rotation',
|
||||
'profile.widgets.wishlist': 'Want to Play',
|
||||
'profile.widgets.empty': 'Nothing on the board yet.',
|
||||
// Profile editor — three-panel layout
|
||||
'profile.section.nameplate': 'Nameplate',
|
||||
'profile.section.avatar': 'Avatar & Decoration',
|
||||
'profile.section.name': 'Display Name Style',
|
||||
'profile.section.theme': 'Theme',
|
||||
'profile.section.effect': 'Profile Effect',
|
||||
'profile.section.identity': 'Pronouns & Tag',
|
||||
'profile.section.links': 'Links',
|
||||
'profile.section.board': 'Board',
|
||||
'profile.editor.back': 'Back',
|
||||
'profile.editor.items': 'items',
|
||||
'profile.editor.inChat': 'In chat',
|
||||
'profile.editor.inChat.sample': 'does anyone read this?',
|
||||
'profile.editor.inMembers': 'In the member list',
|
||||
'profile.editor.editBoard': 'Edit',
|
||||
} as const;
|
||||
|
||||
export type TranslationKey = keyof typeof en;
|
||||
|
||||
Reference in New Issue
Block a user