feat: Improve tabs on mobile (#897)

## Description

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

## Type of change

-   [x] Bug fix
-   [x] New feature

## Screenshots

Desktop:

<img width="932" height="231" alt="image"
src="https://github.com/user-attachments/assets/1fedc73f-7753-4c3d-b7ec-fd1dfdd315ff"
/>


Mobile:

<img width="515" height="202" alt="image"
src="https://github.com/user-attachments/assets/d1e57b0c-6a76-4bbd-bd8d-95421e1aa05b"
/>
<img width="518" height="301" alt="image"
src="https://github.com/user-attachments/assets/501e83e2-bea6-4bea-bc38-d1e682a214e1"
/>


## 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](https://linear.app/solana-fndn/issue/HOO-107)
hoodieshq#50
hoodieshq#49
hoodieshq#48
hoodieshq#46
hoodieshq#57

## Checklist

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

---------

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

Author: 3 people

app/address/[address]/layout.tsx

@@ -9,18 +9,18 @@ import { Slot } from '@components/common/Slot';
 import { TableCardBody } from '@components/common/TableCardBody';
 import { BlockProvider, FetchStatus, useBlock, useFetchBlock } from '@providers/block';
 import { useCluster } from '@providers/cluster';
-import { cn } from '@shared/utils';
 import { ClusterStatus } from '@utils/cluster';
 import { displayTimestamp, displayTimestampUtc } from '@utils/date';
 import { IBRL_EXPLORER_URL } from '@utils/env';
-import { useClusterPath } from '@utils/url';
-import Link from 'next/link';
-import { notFound, useSelectedLayoutSegment } from 'next/navigation';
+import { notFound, useSearchParams } from 'next/navigation';
 import React, { PropsWithChildren } from 'react';
 import { ExternalLink } from 'react-feather';
 
+import { type NavigationTab, NavigationTabs } from '@/app/shared/ui/navigation-tabs';
+import { StickyHeader } from '@/app/shared/ui/sticky-header/StickyHeader';
 import { estimateRequestedComputeUnits } from '@/app/utils/compute-units-schedule';
 import { getEpochForSlot, getMaxComputeUnitsInBlock } from '@/app/utils/epoch-schedule';
+import { pickClusterParams } from '@/app/utils/url';
 
 type Props = PropsWithChildren<{ params: { slot: string } }>;
 
@@ -235,65 +235,28 @@ export default function BlockLayout({ children, params }: Props) {
     );
 }
 
-const TABS: Tab[] = [
-    {
-        path: '',
-        slug: 'history',
-        title: 'Transactions',
-    },
-    {
-        path: 'rewards',
-        slug: 'rewards',
-        title: 'Rewards',
-    },
-    {
-        path: 'programs',
-        slug: 'programs',
-        title: 'Programs',
-    },
-    {
-        path: 'accounts',
-        slug: 'accounts',
-        title: 'Accounts',
-    },
+const TABS: NavigationTab[] = [
+    { path: '', title: 'Transactions' },
+    { path: 'rewards', title: 'Rewards' },
+    { path: 'programs', title: 'Programs' },
+    { path: 'accounts', title: 'Accounts' },
 ];
 
-type MoreTabs = 'history' | 'rewards' | 'programs' | 'accounts';
-
-type Tab = {
-    slug: MoreTabs;
-    title: string;
-    path: string;
-};
-
 function MoreSection({ children, slot }: { children: React.ReactNode; slot: number }) {
+    const searchParams = useSearchParams();
+    const buildHref = React.useCallback(
+        (path: string) => pickClusterParams(`/block/${slot}/${path}`, searchParams ?? undefined),
+        [slot, searchParams],
+    );
+
     return (
         <>
-            <div className="container">
-                <div className="header">
-                    <div className="header-body pt-0">
-                        <ul className="nav nav-tabs nav-overflow header-tabs">
-                            {TABS.map(({ title, slug, path }) => (
-                                <TabLink key={slug} slot={slot} path={path} title={title} />
-                            ))}
-                        </ul>
-                    </div>
+            <StickyHeader>
+                <div className="container">
+                    <NavigationTabs buildHref={buildHref} tabs={TABS} />
                 </div>
-            </div>
+            </StickyHeader>
             {children}
         </>
     );
 }
-
-function TabLink({ path, slot, title }: { path: string; slot: number; title: string }) {
-    const tabPath = useClusterPath({ pathname: `/block/${slot}/${path}` });
-    const selectedLayoutSegment = useSelectedLayoutSegment();
-    const isActive = (selectedLayoutSegment === null && path === '') || selectedLayoutSegment === path;
-    return (
-        <li className="nav-item">
-            <Link className={cn(isActive && 'active', 'nav-link')} href={tabPath} scroll={false}>
-                {title}
-            </Link>
-        </li>
-    );
-}

app/block/[slot]/layout.tsx

@@ -1,12 +1,11 @@
 import { usePathname, useRouter, useSearchParams } from 'next/navigation';
 import { useEffect, useState } from 'react';
 
-import { type MoreTabs } from '@/app/address/[address]/layout';
+import { type AddressTabPath } from '@/app/address/[address]/layout';
 import { ParsedTokenExtension } from '@/app/components/account/types';
 import { TokenExtension } from '@/app/validators/accounts/token-extension';
 
-// extract type for the tab to not loose the functionality of the token extension navigation
-const TOKEN_EXTENSIONS: Extract<MoreTabs, 'token-extensions'> = 'token-extensions';
+const TOKEN_EXTENSIONS: Extract<AddressTabPath, 'token-extensions'> = 'token-extensions';
 const TOKEN_EXTENSIONS_COMPONENT = `/${TOKEN_EXTENSIONS}`;
 
 function getHash() {

app/features/token-extensions/use-token-extension-navigation.ts

@@ -0,0 +1,3 @@
+export { type NavigationTab } from './model/types';
+export { NavigationTabLink } from './ui/NavigationTabLink';
+export { NavigationTabs } from './ui/NavigationTabs';

app/shared/ui/navigation-tabs/index.ts

@@ -0,0 +1,39 @@
+'use client';
+
+import React from 'react';
+
+import { type NavigationTab } from './types';
+
+export type NavigationTabsContextValue = {
+    activeValue: string;
+    buildHref: (path: string) => string;
+    registerTab: (tab: NavigationTab) => void;
+    renderTabLink: boolean;
+    staticPaths: Set<string>;
+    unregisterTab: (path: string) => void;
+};
+
+export const NavigationTabsContext = React.createContext<NavigationTabsContextValue | undefined>(undefined);
+
+export function useNavigationTabsContext() {
+    const ctx = React.useContext(NavigationTabsContext);
+    if (!ctx) throw new Error('Tab components must be used within NavigationTabs');
+    return ctx;
+}
+
+export function useTabRegistration() {
+    const [registeredTabs, setRegisteredTabs] = React.useState<NavigationTab[]>([]);
+
+    const registerTab = React.useCallback((tab: NavigationTab) => {
+        setRegisteredTabs(prev => {
+            if (prev.some(t => t.path === tab.path)) return prev;
+            return [...prev, tab];
+        });
+    }, []);
+
+    const unregisterTab = React.useCallback((path: string) => {
+        setRegisteredTabs(prev => prev.filter(t => t.path !== path));
+    }, []);
+
+    return { registerTab, registeredTabs, unregisterTab };
+}

app/shared/ui/navigation-tabs/model/navigation-tabs-context.ts

@@ -0,0 +1,4 @@
+export type NavigationTab<P extends string = string> = {
+    path: P;
+    title: string;
+};

app/shared/ui/navigation-tabs/model/types.ts

@@ -0,0 +1,85 @@
+'use client';
+
+import React from 'react';
+
+import { type NavigationTab } from './types';
+
+function getTabsKey(tabs: NavigationTab[]) {
+    return tabs.map(tab => `${tab.path}:${tab.title}`).join('|');
+}
+
+function getVisibleTabsCount({
+    moreMeasure,
+    tabElements,
+    tablist,
+}: {
+    moreMeasure: HTMLDivElement;
+    tabElements: HTMLElement[];
+    tablist: HTMLDivElement;
+}) {
+    const containerRect = tablist.getBoundingClientRect();
+    const containerWidth = containerRect.width;
+
+    if (containerWidth === 0) return tabElements.length;
+
+    const gap = parseFloat(getComputedStyle(tablist).columnGap) || 0;
+    const moreWidth = moreMeasure.getBoundingClientRect().width;
+    const hiddenTabIndex = tabElements.findIndex((tabElement, index) => {
+        const tabRight = tabElement.getBoundingClientRect().right - containerRect.left;
+        const reservedMoreWidth = index < tabElements.length - 1 ? gap + moreWidth : 0;
+        return tabRight + reservedMoreWidth > containerWidth;
+    });
+
+    return hiddenTabIndex === -1 ? tabElements.length : hiddenTabIndex;
+}
+
+export function useTabOverflow(allTabs: NavigationTab[]) {
+    const tablistRef = React.useRef<HTMLDivElement>(null);
+    const moreMeasureRef = React.useRef<HTMLDivElement>(null);
+
+    const allTabsKey = React.useMemo(() => getTabsKey(allTabs), [allTabs]);
+
+    const [measuring, setMeasuring] = React.useState(true);
+    const [visibleCount, setVisibleCount] = React.useState<number>(allTabs.length);
+
+    React.useLayoutEffect(() => {
+        setMeasuring(true);
+        setVisibleCount(allTabs.length);
+    }, [allTabs.length, allTabsKey]);
+
+    React.useLayoutEffect(() => {
+        if (!measuring) return;
+
+        const tablist = tablistRef.current;
+        if (!tablist) return;
+        if (allTabs.length === 0) {
+            setVisibleCount(0);
+            setMeasuring(false);
+            return;
+        }
+
+        const moreMeasure = moreMeasureRef.current;
+        if (!moreMeasure) return;
+
+        const tabElements = Array.from(tablist.querySelectorAll<HTMLElement>('[role="tab"]'));
+        setVisibleCount(getVisibleTabsCount({ moreMeasure, tabElements, tablist }));
+        setMeasuring(false);
+    }, [allTabs.length, allTabsKey, measuring]);
+
+    React.useEffect(() => {
+        const tablist = tablistRef.current;
+        if (!tablist) return;
+
+        const observer = new ResizeObserver(() => setMeasuring(true));
+        observer.observe(tablist);
+
+        return () => {
+            observer.disconnect();
+        };
+    }, []);
+
+    const visibleTabs = measuring ? allTabs : allTabs.slice(0, visibleCount);
+    const moreTabs = measuring ? [] : allTabs.slice(visibleCount);
+
+    return { measuring, moreMeasureRef, moreTabs, tablistRef, visibleTabs };
+}

app/shared/ui/navigation-tabs/model/useTabOverflow.ts

@@ -0,0 +1,78 @@
+'use client';
+
+import React from 'react';
+
+import { cn } from '@/app/components/shared/utils';
+import {
+    NavigationTabsContext,
+    useTabRegistration,
+} from '@/app/shared/ui/navigation-tabs/model/navigation-tabs-context';
+import { type NavigationTab } from '@/app/shared/ui/navigation-tabs/model/types';
+import { useTabOverflow } from '@/app/shared/ui/navigation-tabs/model/useTabOverflow';
+
+import { MobileMoreDropdown } from './MobileMoreDropdown';
+import { TabLink } from './TabLink';
+
+export type BaseNavigationTabsProps = {
+    activeValue: string;
+    buildHref: (path: string) => string;
+    children?: React.ReactNode;
+    className?: string;
+    onSelectChange: (path: string) => void;
+    tabs: NavigationTab[];
+};
+
+export function BaseNavigationTabs({
+    tabs,
+    activeValue,
+    onSelectChange,
+    buildHref,
+    children,
+    className,
+}: BaseNavigationTabsProps) {
+    const { registeredTabs, registerTab, unregisterTab } = useTabRegistration();
+
+    const staticPaths = React.useMemo(() => new Set(tabs.map(t => t.path)), [tabs]);
+
+    const contextValue = React.useMemo(
+        () => ({ activeValue, buildHref, registerTab, renderTabLink: true, staticPaths, unregisterTab }),
+        [activeValue, buildHref, registerTab, staticPaths, unregisterTab],
+    );
+
+    const hiddenContextValue = React.useMemo(() => ({ ...contextValue, renderTabLink: false }), [contextValue]);
+
+    const allTabs = React.useMemo(
+        () => [...tabs, ...registeredTabs.filter(t => !staticPaths.has(t.path))],
+        [tabs, registeredTabs, staticPaths],
+    );
+
+    const { measuring, moreMeasureRef, moreTabs, tablistRef, visibleTabs } = useTabOverflow(allTabs);
+
+    return (
+        <NavigationTabsContext.Provider value={contextValue}>
+            <div
+                ref={tablistRef}
+                role="tablist"
+                className={cn('e-inline-flex e-w-full e-gap-3 e-overflow-hidden', className)}
+            >
+                {visibleTabs.map(tab => (
+                    <TabLink key={tab.path} path={tab.path} title={tab.title} />
+                ))}
+
+                {measuring && allTabs.length > 0 && (
+                    <div ref={moreMeasureRef} aria-hidden="true">
+                        <MobileMoreDropdown tabs={[]} />
+                    </div>
+                )}
+
+                {moreTabs.length > 0 && <MobileMoreDropdown tabs={moreTabs} onSelectChange={onSelectChange} />}
+            </div>
+
+            {children && (
+                <NavigationTabsContext.Provider value={hiddenContextValue}>
+                    <div className="e-hidden">{children}</div>
+                </NavigationTabsContext.Provider>
+            )}
+        </NavigationTabsContext.Provider>
+    );
+}

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

@@ -0,0 +1,56 @@
+'use client';
+
+import * as PopoverPrimitive from '@radix-ui/react-popover';
+import Link from 'next/link';
+import { ChevronDown } from 'react-feather';
+
+import { Popover, PopoverContent, PopoverTrigger } from '@/app/components/shared/ui/popover';
+import { cn } from '@/app/components/shared/utils';
+import { useNavigationTabsContext } from '@/app/shared/ui/navigation-tabs/model/navigation-tabs-context';
+import { type NavigationTab } from '@/app/shared/ui/navigation-tabs/model/types';
+
+import { tabLinkClassName } from './TabLink';
+
+type MobileMoreDropdownProps = {
+    onSelectChange?: (path: string) => void;
+    tabs: NavigationTab[];
+};
+
+export function MobileMoreDropdown({ tabs, onSelectChange }: MobileMoreDropdownProps) {
+    const ctx = useNavigationTabsContext();
+    const isActive = tabs.some(t => t.path === ctx.activeValue);
+
+    return (
+        <Popover>
+            <div className="e-ml-auto e-flex e-items-center">
+                <div className="e-mr-3 e-h-3/5 e-border-0 e-border-l e-border-solid e-border-neutral-700" />
+                <PopoverTrigger
+                    data-state={isActive ? 'active' : 'inactive'}
+                    className={cn(tabLinkClassName, 'e-inline-flex e-cursor-pointer e-items-center e-gap-1')}
+                >
+                    More <ChevronDown size={12} />
+                </PopoverTrigger>
+            </div>
+            <PopoverContent align="start" className="e-w-auto e-min-w-[8rem] e-p-1">
+                {tabs.map(tab => (
+                    <PopoverPrimitive.Close key={tab.path} asChild>
+                        <Link
+                            href={ctx.buildHref(tab.path)}
+                            scroll={false}
+                            onClick={() => onSelectChange?.(tab.path)}
+                            data-state={tab.path === ctx.activeValue ? 'active' : 'inactive'}
+                            className={cn(
+                                'e-block e-rounded e-px-3 e-py-2',
+                                'e-text-sm e-no-underline',
+                                'e-text-outer-space-200 data-[state=active]:e-text-accent',
+                                'hover:e-bg-outer-space-800 hover:e-text-white',
+                            )}
+                        >
+                            {tab.title}
+                        </Link>
+                    </PopoverPrimitive.Close>
+                ))}
+            </PopoverContent>
+        </Popover>
+    );
+}