fix: overlapping tabs

Author: rogaldh

app/address/[address]/layout.tsx

@@ -377,7 +377,9 @@ function getNavigationTabs(pubkey: PublicKey, account: Account): AddressTab[] {
         tabs.push(...TABS_LOOKUP[`${programTypeKey}:metaplexNFT`]);
     }
 
-    // Compressed NFTs: show tabs immediately for accounts with no data
+    // Compressed NFTs: show tabs immediately for accounts with no data.
+    // TODO: duplicates with async CompressedNftTabs on desktop tablist — refactor
+    // to a single source once NavigationTabLink supports static deduplication.
     if ((!account.data.raw || account.data.raw.length === 0) && !account.data.parsed) {
         tabs.push({ path: 'metadata', title: 'Metadata' });
         tabs.push({ path: 'attributes', title: 'Attributes' });

app/entities/navigation-tabs/model/navigation-tabs-context.ts

@@ -8,6 +8,7 @@ export type NavigationTabsContextValue = {
     activeValue: string;
     buildHref: (path: string) => string;
     registerTab: (tab: NavigationTab) => void;
+    staticPaths: Set<string>;
     unregisterTab: (path: string) => void;
 };
 

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

@@ -27,15 +27,17 @@ export function BaseNavigationTabs({
 }: 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, unregisterTab }),
-        [activeValue, buildHref, registerTab, unregisterTab]
+        () => ({ activeValue, buildHref, registerTab, staticPaths, unregisterTab }),
+        [activeValue, buildHref, registerTab, staticPaths, unregisterTab]
     );
 
-    const allTabs = React.useMemo(() => {
-        const staticPaths = new Set(tabs.map(t => t.path));
-        return [...tabs, ...registeredTabs.filter(t => !staticPaths.has(t.path))];
-    }, [tabs, registeredTabs]);
+    const allTabs = React.useMemo(
+        () => [...tabs, ...registeredTabs.filter(t => !staticPaths.has(t.path))],
+        [tabs, registeredTabs, staticPaths]
+    );
 
     return (
         <NavigationTabsContext.Provider value={contextValue}>

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

@@ -16,5 +16,7 @@ export function NavigationTabLink({ path, title, className }: { path: string; ti
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [path, title]);
 
+    if (ctx.staticPaths.has(path)) return null;
+
     return <TabLink path={path} title={title} className={className} />;
 }

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

@@ -118,8 +118,8 @@ export const OverlappingAsyncTabs: Story = {
         const tablist = canvas.getByRole('tablist', { hidden: true });
         const tabs = within(tablist).getAllByRole('tab', { hidden: true });
 
-        // Desktop tablist: 4 static + 2 children rendered (both appear in DOM)
-        expect(tabs).toHaveLength(6);
+        // Desktop tablist: 4 static + 1 new (overlapping "rewards" is deduplicated)
+        expect(tabs).toHaveLength(5);
 
         // Mobile select: should deduplicate "rewards", so 4 static + 1 new = 5
         const select = canvasElement.querySelector('select') as HTMLSelectElement;