feat: Improve tabs on mobile by rogaldh · Pull Request #897 · solana-foundation/explorer

rogaldh · 2026-03-21T01:46:32Z

Description

Improve tabs to make them work better on mobile by replacing plain tabs with <select>

Type of change

Bug fix
New feature

Screenshots

Desktop:

Mobile:

Testing

All tests work.
stories are provided that perform checks for the proper number of tabs according to the tab nature (static/dynamic)

Related Issues

HOO-107
hoodieshq#50 hoodieshq#49 hoodieshq#48 hoodieshq#46 hoodieshq#57

Checklist

My code follows the project's style guidelines
I have added tests that prove my fix/feature works
All tests pass locally and in CI
I have run build:info script to update build information
CI/CD checks pass
I have included screenshots for protocol screens (if applicable)

vercel · 2026-03-21T01:46:36Z

@rogaldh is attempting to deploy a commit to the Solana Foundation Team on Vercel.

A member of the Team first needs to authorize it.

greptile-apps · 2026-03-21T01:57:01Z

Greptile Summary

This PR replaces the legacy Bootstrap tab list with a new navigation-tabs shared UI module that renders a <select> dropdown on mobile and the existing link-based tablist on desktop, improving usability on small screens.

Key changes:

New BaseNavigationTabs, NavigationTabs, NavigationTabLink, and TabLink components with a context-based dynamic tab registration system (useTabRegistration), enabling async/conditional tabs to register themselves without prop drilling.
allTabs deduplication in BaseNavigationTabs correctly filters registered tabs against staticPaths, preventing duplicate <option> entries in the mobile select.
address/[address]/layout.tsx is significantly simplified: the old Tab/TabComponent/slug types are removed; async tabs (CompressedNftTabs, ProgramMultisigTab, AccountDataTab) are expressed as NavigationTabLink children rendered inside Suspense.
block/[slot]/layout.tsx migrated cleanly with no behavioural changes.
Previous concern about router.push without scroll: false on mobile select has been addressed.
The stale TABS_LOOKUP entry for NFToken collections (which had an incorrect path pointing to a non-existent route) has been removed in favour of the correct path used inline.
Acknowledged limitation: compressed NFT tabs are eagerly shown in the static list for any account with no raw/parsed data regardless of whether it is ultimately confirmed as a compressed NFT. A TODO comment documents the planned follow-up refactor.

Confidence Score: 4/5

Safe to merge with one minor efficiency fix remaining; all previously raised blocking concerns have been resolved.
The core mobile/desktop tab rendering is correct. Deduplication logic works. The { scroll: false } regression is fixed. The desktop duplicate tab issue for compressed NFTs is resolved. The one remaining new finding is a non-blocking P2: NavigationTabLink unnecessarily calls registerTab for paths already in staticPaths, causing extra re-renders. The acknowledged hasTokenMetadata duplicate-in-static-tabs edge case for Token-2022 NFT mint accounts is intentionally deferred. Convergence across multiple prior review rounds warrants a 4.
app/shared/ui/navigation-tabs/ui/NavigationTabLink.tsx — minor guard missing in useEffect for static paths

Important Files Changed

Filename	Overview
app/shared/ui/navigation-tabs/ui/NavigationTabs.tsx	Entry-point client component — derives `activeValue` from `useSelectedLayoutSegment`, wires up `router.push` with `{ scroll: false }` for the mobile select, and delegates rendering to `BaseNavigationTabs`. Clean and correct.
app/shared/ui/navigation-tabs/ui/BaseNavigationTabs.tsx	Renders both the mobile `<select>` and the desktop `role="tablist"`. Deduplication logic (`allTabs` filters `registeredTabs` against `staticPaths`) is correct and prevents duplicate options in the select. No `'use client'` directive, intentionally acceptable since it is only used inside client components.
app/shared/ui/navigation-tabs/ui/NavigationTabLink.tsx	Registers/unregisters dynamic tabs via context. Correctly suppresses desktop rendering when path is already in `staticPaths`. Minor: `registerTab` is called even for static-path entries, causing unnecessary extra state updates (see inline comment).
app/shared/ui/navigation-tabs/model/navigation-tabs-context.ts	Context and `useTabRegistration` hook. `registerTab` correctly deduplicates within `registeredTabs`. Stable `useCallback` refs with empty deps ensure no spurious re-registrations.
app/block/[slot]/layout.tsx	Straightforward migration from `<ul>` tab list to `NavigationTabs`. Static `TABS` array is clean with `path`/`title` only. `buildHref` correctly uses `pickClusterParams`.
app/shared/ui/navigation-tabs/ui/stories/navigation-tabs.stories.tsx	Good coverage: static tabs, many tabs, async children, mobile select interaction, and overlapping static/async tab deduplication. Play functions validate both desktop tablist and mobile select lengths and values.
app/styles.css	Adds `.navigation-tabs-select` styles with negative margins to bleed to card edges, and a `:has(.navigation-tabs-select)` media-query rule adjusting header padding on mobile. Dead `e-w-auto` that was previously flagged has been removed.
app/features/token-extensions/use-token-extension-navigation.ts	Imports `AddressTabPath` from the refactored layout. The `TOKEN_EXTENSIONS` constant now uses the exported type union correctly. No logic changes.
app/address/[address]/layout.tsx	Major refactor: removes old Tab slug system, introduces AddressTab type, and migrates async conditional tabs to NavigationTabLink children. Correctly uses 'nftoken-collection-nfts' path matching the actual route directory.

Sequence Diagram

sequenceDiagram
    participant Layout as AddressLayout / BlockLayout
    participant NT as NavigationTabs (client)
    participant BNT as BaseNavigationTabs
    participant Ctx as NavigationTabsContext
    participant NTL as NavigationTabLink (async child)
    participant Router as Next.js Router

    Layout->>NT: tabs={staticTabs} buildHref={fn}
    NT->>NT: activeValue = useSelectedLayoutSegment() ?? ''
    NT->>BNT: tabs, activeValue, onSelectChange, buildHref
    BNT->>Ctx: provide {activeValue, buildHref, registerTab, staticPaths, unregisterTab}

    Note over BNT: Renders <select> (mobile) + tablist div (desktop)

    NTL->>Ctx: useNavigationTabsContext()
    NTL->>Ctx: registerTab({path, title}) via useEffect
    Ctx-->>BNT: registeredTabs state updated
    BNT->>BNT: allTabs = [...staticTabs, ...registeredTabs.filter(not in staticPaths)]
    BNT-->>BNT: <select> re-renders with allTabs options

    Note over BNT: Desktop: staticTabs.map(TabLink) + {children} (NavigationTabLinks)
    Note over BNT: Mobile: allTabs.map(option) in <select>

    Router->>NT: user selects option (mobile)
    NT->>Router: router.push(buildHref(path), {scroll: false})

_{Reviews (5): Last reviewed commit: "resolve comments" | Re-trigger Greptile}

app/shared/ui/navigation-tabs/ui/NavigationTabs.tsx

app/shared/ui/navigation-tabs/ui/BaseNavigationTabs.tsx

app/entities/navigation-tabs/ui/NavigationTabLink.tsx

app/shared/ui/navigation-tabs/ui/BaseNavigationTabs.tsx

app/styles.css

rogaldh · 2026-03-21T02:04:59Z

@greptile-apps check again

app/entities/navigation-tabs/ui/BaseNavigationTabs.tsx

vercel · 2026-03-21T02:25:31Z

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

Project	Deployment	Actions	Updated (UTC)
explorer	Ready	Preview, Comment	Mar 21, 2026 2:44am

rogaldh · 2026-03-21T02:27:38Z

@greptile-apps check again

app/shared/ui/navigation-tabs/ui/BaseNavigationTabs.tsx

rogaldh · 2026-03-21T02:39:31Z

@greptile-apps check again

app/address/[address]/layout.tsx

app/shared/ui/navigation-tabs/ui/BaseNavigationTabs.tsx

askov · 2026-03-23T08:03:54Z

app/entities/navigation-tabs/ui/TabLink.tsx

+import React from 'react';
+
+import { cn } from '@/app/components/shared/utils';
+import { useNavigationTabsContext } from '@/app/entities/navigation-tabs/model/navigation-tabs-context';


suggestion: While there’s nothing critically wrong here, this does not align with classic FSD principles. According to FSD, entities should represent a domain concept (e.g. address, transaction, etc.) rather than merely grouping UI atoms. This should be categorized under shared, per the methodology. Additionally, we should never expose module internals (except for shared). If there’s concern about making the barrel too large, it may indicate that the entity abstraction should be reevaluated.

askov · 2026-03-23T08:12:19Z

app/entities/navigation-tabs/ui/NavigationTabLink.tsx

+    React.useEffect(() => {
+        ctx.registerTab({ path, title });
+        return () => ctx.unregisterTab(path);
+        // registerTab/unregisterTab are stable (useCallback with []), ctx excluded intentionally


question: Assuming these are stable, could we destructure registerTab and unregisterTab and create a proper dependency list?

askov · 2026-03-23T08:25:06Z

app/shared/ui/navigation-tabs/ui/__stories__/navigation-tabs.stories.tsx

+        activeValue: 'rewards',
+        tabs: BLOCK_TABS,
+    },
+    parameters: {


issue: Doesn't work, should be:

globals: { viewport: { value: 'mobile1', isRotated: false }, },

askov · 2026-03-23T08:36:00Z

app/styles.css

+               e-bg-heavy-metal-900 e-px-4 e-py-2.5 e-text-sm
+               e-text-neutral-200 e-outline-none;
+        margin-left: -12px;
+        margin-right: -12px;


suggestion: Perhaps these hacks should have a comment explaining what they depend on

C0mberry · 2026-03-23T21:28:22Z

app/address/[address]/layout.tsx

-    const tabComponents = getTabs(pubkey, account).concat(getCustomLinkedTabs(pubkey, account));
+    const navigationTabs = getNavigationTabs(pubkey, account);

-    if (tab && tabComponents.filter(tabComponent => tabComponent.tab.slug === tab).length === 0) {


This guard is gone, please rollback those changes

remove non existent tab fix: restructure the navigation to make it follow fsd

Co-authored-by: greptile-apps[bot] <165735046+greptile-apps[bot]@users.noreply.github.com>

C0mberry · 2026-03-24T12:10:26Z

@greptile-apps check again

greptile-apps bot reviewed Mar 21, 2026

View reviewed changes

app/entities/navigation-tabs/ui/BaseNavigationTabs.tsx Outdated Show resolved Hide resolved

vercel bot had a problem deploying to Preview March 21, 2026 02:32 Failure

greptile-apps bot reviewed Mar 21, 2026

View reviewed changes

app/shared/ui/navigation-tabs/ui/BaseNavigationTabs.tsx Show resolved Hide resolved

This was referenced Mar 21, 2026

feat: tabs component hoodieshq/explorer#57

Closed

fix tabs on mobile hoodieshq/explorer#46

Closed

create Tabs and Tab component hoodieshq/explorer#48

Closed

vercel bot deployed to Preview March 21, 2026 02:44 View deployment

This was referenced Mar 21, 2026

refactor existing tabs with new component hoodieshq/explorer#49

Closed

replace tabs with select on mobile hoodieshq/explorer#50

Closed

greptile-apps bot reviewed Mar 21, 2026

View reviewed changes

app/address/[address]/layout.tsx Show resolved Hide resolved

app/shared/ui/navigation-tabs/ui/BaseNavigationTabs.tsx Show resolved Hide resolved

askov reviewed Mar 23, 2026

View reviewed changes

C0mberry reviewed Mar 23, 2026

View reviewed changes

rogaldh and others added 11 commits March 24, 2026 12:47

feat: improve tabs

0897d8c

remove non existent tab fix: restructure the navigation to make it follow fsd

fix: improve tests

dafde8e

fix: recover tabs for nfts as they were needed

8e646da

Update app/entities/navigation-tabs/ui/NavigationTabLink.tsx

0dde608

Co-authored-by: greptile-apps[bot] <165735046+greptile-apps[bot]@users.noreply.github.com>

Update app/entities/navigation-tabs/ui/NavigationTabs.tsx

79bfd5f

Co-authored-by: greptile-apps[bot] <165735046+greptile-apps[bot]@users.noreply.github.com>

fix: styles

1807d56

fix: minimize diff

86a8b27

fix: tabs

079d161

fix: deduplicate tabs

f189bb6

fix: add case with overlapping tabs

ba78de8

fix: codestyle

a48e2db

rogaldh and others added 2 commits March 24, 2026 12:47

fix: overlapping tabs

b42f117

resolve comments

9e3d12c

C0mberry force-pushed the development-improve-tabs-on-mobile branch from a8e8d13 to 9e3d12c Compare March 24, 2026 11:50

Conversation

rogaldh commented Mar 21, 2026

Description

Type of change

Screenshots

Testing

Related Issues

Checklist

Uh oh!

vercel bot commented Mar 21, 2026

Uh oh!

greptile-apps bot commented Mar 21, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Greptile Summary

Confidence Score: 4/5

Important Files Changed

Sequence Diagram

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

rogaldh commented Mar 21, 2026

Uh oh!

Uh oh!

vercel bot commented Mar 21, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

rogaldh commented Mar 21, 2026

Uh oh!

Uh oh!

rogaldh commented Mar 21, 2026

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

C0mberry commented Mar 24, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

greptile-apps bot commented Mar 21, 2026 •

edited

Loading

vercel bot commented Mar 21, 2026 •

edited

Loading