Skip to content

Shell redesign#141

Merged
voliva merged 5 commits into
mainfrom
vo/app-shell
May 15, 2026
Merged

Shell redesign#141
voliva merged 5 commits into
mainfrom
vo/app-shell

Conversation

@voliva
Copy link
Copy Markdown
Contributor

@voliva voliva commented May 14, 2026

This changes the PAPI Console overall design to a shell:

  • All navigation links are moved to a left-hand side menu (which collapses on narrow screens)
  • The top bar now features a command palette. Currently has:
    • Access block by hash
    • Access block by number
    • Navigate to a page
    • This can be later expanded to include navigate directly to a storage query, extrinsic, etc.

More breathing room overall :)

For the icons of each page I've selected some sensible ones, but some of them I wasn't too sure about. I've left a few alternatives commented in the code just in case we want to change them.

image

@voliva voliva requested review from carlosala and josepot May 14, 2026 15:05
@vercel
Copy link
Copy Markdown

vercel Bot commented May 14, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
papi-console Ready Ready Preview, Comment May 14, 2026 3:05pm

Request Review

Copy link
Copy Markdown

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

This PR redesigns the PAPI Console layout into a shell with a collapsible left-hand sidebar for navigation and a top bar that hosts a new global command palette. The previous header (with inline nav links and the block-search input on the BlockTable) is replaced; the command palette absorbs block-by-hash / block-by-number lookup and quick navigation.

Changes:

  • Introduce AppShell (sidebar + topbar) and wire it into App.tsx, removing the old Header component.
  • Add GlobalCommandPalette with Cmd/Ctrl+K shortcut for navigation, block hash and block number lookups.
  • Remove the on-table BlockInput / SearchInput and trim Title accordingly; refactor NetworkSwitcher to take a className instead of a forSmallScreen flag; add GitHub themed icon assets.

Reviewed changes

Copilot reviewed 9 out of 11 changed files in this pull request and generated no comments.

Show a summary per file
File Description
src/App.tsx Replace inline header/layout with AppShell wrapping the routes.
src/pages/AppShell.tsx New shell with sidebar groups, mobile sheet, top bar, theme toggle, GitHub link.
src/pages/Header.tsx Deleted; replaced by AppShell.
src/components/GlobalCommandPalette.tsx New command palette (block hash/number/route + section nav, Cmd/Ctrl+K).
src/pages/Network/Network.tsx NetworkSwitcher now takes className; minor tailwind size token swap.
src/pages/Explorer/BlockTable.tsx Drop BlockInput/search input from the recent-blocks title.
src/pages/Explorer/FinalizingTable.tsx Remove the search slot from the Title component.
src/components/ui/search-input.tsx Removed (no longer used).
src/components/Icons.tsx Add GithubIcon themed icon.
src/components/icons/github_light.svg, github_dark.svg New GitHub mark assets.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

@voliva voliva merged commit 20574d8 into main May 15, 2026
3 checks passed
@voliva voliva deleted the vo/app-shell branch May 15, 2026 15:31
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants