Open skins and drinks inside Profile's tabs

[ryanbarlow97]

New skin, New drink and the wardrobe cards now open inside the Skins or Drinks tab. Profile's header and tabs stay, instead of a separate narrower page with "← Profile".

What changes

• /profile?tab=skins&skin=new is the skin editor, and &skin=<id> one skin's status. Drinks use &drink=. The editor or item replaces the grid, with ← Skins / ← Drinks back to it.
• Profile reads its tab and open item from the address (useSearchParams). Back, Forward, the header's Profile link and the tabs all update the view.
• Opening an item adds a history entry, so Back returns to the grid. A submit replaces the editor's entry with the new item and reloads the wardrobe, so Back never lands on a spent editor. Bounces with nothing to show (no session, the editor already submitted) replace the entry in place.
• A card is a real link: a plain click opens it in the tab, and a modifier click opens the address in a new tab.
• Discord sign-in returns to the same skin or drink. Entering a code whose tab is the one open keeps the item.
• UploadForm and BrewForm take onSubmitted(id) instead of pushing a route. The editor and status code moved from app/profile/{skins,drinks}/{new,[id]} into ProfileItems.tsx, and ProfileSubpage is gone.

Removed addresses

/profile/skins/*, /profile/drinks/*, /skins and /skins/<id>, and /drinks/<id> no longer exist and have no redirects. Only /drinks still redirects to the Drinks tab, because TFMCWeb's /token create drink message names it.

Not changed

• The editor is the same form at Profile's width. The mockup's side preview column needs the per-kind 3D previews pulled out of UploadForm, which is left as a follow-up.
• Custom items still open /character/<id>/kits.

Testing

• Frontend: npx vitest run (2,113 passed), npx tsc --noEmit, npx oxfmt --check, npx oxlint (only the set-state-in-effect warnings the moved effects already had).
• New tests cover: opening the editor and a skin in the tab, Back and ← returning to the grid, submit replacing the editor, the header link closing an open item, a Strict Mode bounce not going back twice, a second code in a code wardrobe, and the sign-in return address.
• Lab: a production build against a mock API serving Main preview renders, at desktop and iPhone 12 Pro sizes. Checked New skin in the tab, ← Skins, card → Back → Forward, header Profile link, tab switch while open, and the redirects with curl.
• Reviewed by GPT-6-Astra. A design round picked this layout and query addresses. A code round found three issues, all fixed in the second commit: a stale code session after redeeming a second code, the header link leaving the editor open, and a doubled Back in Strict Mode.

Docs: TF-Minecraft/Docs (linked below).

🤖 Generated with Claude Code

[ryanbarlow97]

Docs: TF-Minecraft/Docs#139

[coderabbitai]

Note

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

⚙️ Run configuration

• Configuration used: Organization UI
• Review profile: CHILL
• Plan: Advanced
• Run ID: ca9d827c-ef19-46ff-aa14-1e2521a5f251

---

📥 Commits

Reviewing files that changed from the base of the PR and between 75ea84d and fc3edfa.

---

📒 Files selected for processing (17)

• backend/src/skins/naming.py
• frontend/app/components/drinks/BrewForm.tsx
• frontend/app/components/profile/ProfileItems.tsx
• frontend/app/components/profile/ProfilePanel.test.tsx
• frontend/app/components/profile/ProfilePanel.tsx
• frontend/app/components/profile/ProfileSubpage.tsx
• frontend/app/components/profile/ProfileWardrobes.tsx
• frontend/app/components/profile/Wardrobe.tsx
• frontend/app/components/skins/UploadForm.tsx
• frontend/app/profile/drinks/[id]/page.tsx
• frontend/app/profile/drinks/new/page.tsx
• frontend/app/profile/page.tsx
• frontend/app/profile/skins/[id]/page.tsx
• frontend/app/profile/skins/new/page.tsx
• frontend/lib/profile/paths.ts
• frontend/lib/profile/session.ts
• frontend/next.config.ts

---

• 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.}