feat(app): bigger box-free Tangle logo + collapsible sidebar (arena-style)#28
Merged
Conversation
…tyle) The sidebar logo sat as a 24px mark inside a 34px tinted/bordered chip — small and boxed. Drop the chip; render the Tangle mark standalone at 38px with a 20px wordmark, matching the ai-trading-blueprint arena shell. `compact` is the bare 30px mark for the collapsed rail. Make the desktop sidebar collapsible like the arena shell: width animates w-60 <-> w-16 (transition-[width] duration-200), state persisted to localStorage (surplus:sidebar-collapsed). A caret-left button collapses; collapsed shows the mark with a hover/focus-revealed caret-right to expand. Nav items become an icon-only rail (label moves to the native title tooltip) and the Base Sepolia footer collapses to a single status chip. Verified both states via headless screenshots (expanded + collapsed icon rail).
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.
Two sidebar fixes to match the ai-trading-blueprint arena shell.
1. Logo — bigger, no box
The Tangle mark was a 24px glyph inside a 34px tinted/bordered chip — small and "in a little box." Dropped the chip; the mark now stands alone at 38px with a 20px wordmark (collapsed rail uses a bare 30px mark).
TangleLogo.tsx.2. Sidebar — collapsible/expandable
Ported the arena pattern into our design system (
Shell.tsx):transition-[width] duration-200).surplus:sidebar-collapsed).titletooltips); the Base Sepolia footer collapses to a single status chip.Verification
Built + screenshotted both states headlessly:
pnpm typecheck+pnpm buildclean. Desktop-only sidebar (mobile uses the existing top bar + drawer, which now shows the larger logo).Ships to surplus-market.pages.dev once #26 (auto-deploy) lands; until then via the manual deploy path.
🤖 Generated with Claude Code