Rework the site navigation, the account page and the Game page #399

New issue

Closed

opened 2026-10-14 13:24:41 +00:00 by root · 6 comments

root commented

2026-10-14 13:24:41 +00:00

(Migrated from gitlab.core-project.space)

Problem

The owner finds three screens not good enough after accounts v1 (!523): the site navigation (sidebar), the account page (/account) and the Game page. They work, but their layout and look need a design pass.

Where they live

Navigation: apps/front/src/app/site-header.tsx, apps/front/src/auth/account-nav.{view,ui}.tsx (the Username with links to the account page and "Sign out", or "Sign in")
Account page: apps/front/src/auth/account-page.{view,ui}.tsx (Username, email, join date, export download, deletion by password)
Game page: apps/front/src/games/game-page.{view,ui}.tsx (sides named by Username or "Guest", oriented to the reader's Color, PGN export)

To decide first

What is wrong with each screen, in the owner's words (layout, hierarchy, density, mobile, look)
Whether to explore with a throwaway prototype before a spec
Then to-spec, and tickets if it spans more than one merge request

Out of scope

Behaviour: what each screen does stays as accounts v1 defines it (#364).

## Problem The owner finds three screens not good enough after accounts v1 (!523): the site navigation (sidebar), the account page (`/account`) and the **Game** page. They work, but their layout and look need a design pass. ## Where they live - Navigation: `apps/front/src/app/site-header.tsx`, `apps/front/src/auth/account-nav.{view,ui}.tsx` (the **Username** with links to the account page and "Sign out", or "Sign in") - Account page: `apps/front/src/auth/account-page.{view,ui}.tsx` (**Username**, email, join date, export download, deletion by password) - **Game** page: `apps/front/src/games/game-page.{view,ui}.tsx` (sides named by **Username** or "Guest", oriented to the reader's **Color**, PGN export) ## To decide first - [ ] What is wrong with each screen, in the owner's words (layout, hierarchy, density, mobile, look) - [ ] Whether to explore with a throwaway `prototype` before a spec - [ ] Then `to-spec`, and tickets if it spans more than one merge request ## Out of scope - Behaviour: what each screen does stays as accounts v1 defines it (#364).

root commented

2026-10-14 14:27:35 +00:00

(Migrated from gitlab.core-project.space)

mentioned in commit c06f729de3

mentioned in commit c06f729de39bd6552b40bb179c4cbd01f7fc23c0

root commented

2026-10-14 14:30:15 +00:00

(Migrated from gitlab.core-project.space)

mentioned in issue #400

root commented

2026-10-14 14:30:26 +00:00

(Migrated from gitlab.core-project.space)

marked this issue as related to #400

root commented

2026-10-14 14:30:28 +00:00

(Migrated from gitlab.core-project.space)

Decided in a grilling and a prototype session; the spec is #400.

Navigation: D. A 256px shadcn Sidebar with New game as the first, highlighted item; "My games" shown once the Player owns a Game; the account in the footer (a Username menu with Account, Language and Sign out, or Sign in and Language); a Guest note linking to sign-up. A slim top bar below lg. The settings cog goes.
Account page: C. The Username and join date as the header; side tabs Profile / Your data / Delete account, the open one in the URL; deletion through a dialog that lists what is lost, then asks for the password.
Game page: C. Page-only, with the shared Game screen untouched. The rail header reads "You vs " with the date; Copy link (says "Copied") and Export PGN move into the rail footer.
My games: D, added to the scope in the session. The account page's frame; result filters with counts on the left, the chosen one in the URL; rich rows; Show more, with no "New game" in the heading.
The one behaviour change: game.list gains a result filter, a cursor and counts, replacing the cap of 50. account.me gains hasGames, so / and /local still ask the server one thing.
The problem was layout and hierarchy, not the look; the tokens and type stay.

Prototype (never merged): branch prototype/399-front-screens; run pnpm dev and use the "Prototype #399" panel.

Decided in a grilling and a prototype session; the spec is #400. - **Navigation: D.** A 256px shadcn `Sidebar` with **New game** as the first, highlighted item; "My games" shown once the Player owns a Game; the account in the footer (a Username menu with Account, Language and Sign out, or Sign in and Language); a Guest note linking to sign-up. A slim top bar below `lg`. The settings cog goes. - **Account page: C.** The Username and join date as the header; side tabs Profile / Your data / Delete account, the open one in the URL; deletion through a dialog that lists what is lost, then asks for the password. - **Game page: C.** Page-only, with the shared Game screen untouched. The rail header reads "You vs <opponent>" with the date; Copy link (says "Copied") and Export PGN move into the rail footer. - **My games: D,** added to the scope in the session. The account page's frame; result filters with counts on the left, the chosen one in the URL; rich rows; Show more, with no "New game" in the heading. - **The one behaviour change:** `game.list` gains a result filter, a cursor and counts, replacing the cap of 50. `account.me` gains `hasGames`, so `/` and `/local` still ask the server one thing. - **The problem was** layout and hierarchy, not the look; the tokens and type stay. Prototype (never merged): branch `prototype/399-front-screens`; run `pnpm dev` and use the "Prototype #399" panel.

root commented

2026-10-14 14:37:15 +00:00

(Migrated from gitlab.core-project.space)

mentioned in issue #401