From 84008807bd811fe9cb2fe1e7467d169eaf0ed439 Mon Sep 17 00:00:00 2001
From: Kaycee276 <kizuaba@gmail.com>
Date: Sun, 26 Apr 2026 13:53:43 +0100
Subject: [PATCH] feat: add creator profile section anchor links (#159)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Enable enableHashRouting on ProfileTabPillGroup in LandingPage
- Initialise activeProfileTab from window.location.hash on first render
  so direct URL hash navigation (e.g. /#creations) works immediately
- Consolidate two duplicate useEffect calls in ProfileTabPillGroup into
  one effect that both syncs from the initial hash on mount and listens
  for subsequent hashchange events, eliminating a mount-time race
- Add id/aria-controls to each ProfileTabPill for tab ↔ panel ARIA wiring
- Wrap tab-panel content in a div with id, role=tabpanel, aria-labelledby,
  and tabIndex so the semantic relationship is complete
- Add ProfileTabPillGroup.test.tsx (8 tests) covering hash routing, ARIA
  attributes, initial hash read, hashchange listener, and edge cases
- Add docs/CreatorProfileAnchorLinks.md with implementation notes and
  manual verification steps
---
 docs/CreatorProfileAnchorLinks.md             |  54 ++++++
 src/components/common/ProfileTabPill.tsx      |  29 +--
 .../__tests__/ProfileTabPillGroup.test.tsx    | 173 ++++++++++++++++++
 src/pages/LandingPage.tsx                     |  68 +++++--
 4 files changed, 294 insertions(+), 30 deletions(-)
 create mode 100644 docs/CreatorProfileAnchorLinks.md
 create mode 100644 src/components/common/__tests__/ProfileTabPillGroup.test.tsx

diff --git a/docs/CreatorProfileAnchorLinks.md b/docs/CreatorProfileAnchorLinks.md
new file mode 100644
index 0000000..bea4a57
--- /dev/null
+++ b/docs/CreatorProfileAnchorLinks.md
@@ -0,0 +1,54 @@
+# Creator Profile Anchor Links
+
+> Issue #159 — Adds URL hash navigation for main creator profile sections.
+
+## Overview
+
+Each creator profile tab (`overview`, `creations`, `collectors`, `activity`) is now addressable via a URL hash fragment. This enables:
+
+- **Direct deep-linking** — share or bookmark a URL like `/#creations` and land on the correct tab.
+- **Browser back/forward navigation** — pressing back after switching tabs returns to the previous section.
+- **Preserved layout** — the visual appearance and existing component structure are unchanged.
+
+## How it works
+
+### `ProfileTabPillGroup` (`src/components/common/ProfileTabPill.tsx`)
+
+The `enableHashRouting` prop has been activated and the implementation improved:
+
+| Behaviour              | Detail                                                                                           |
+| ---------------------- | ------------------------------------------------------------------------------------------------ |
+| **On mount**           | Reads `window.location.hash` and calls `onTabChange` if the hash matches a tab value.            |
+| **Tab click**          | Calls `onTabChange` _and_ sets `window.location.hash` to the tab value.                          |
+| **`hashchange` event** | Listens for browser-level hash changes (e.g. back/forward) and syncs the active tab.             |
+| **ARIA attributes**    | Each `<button>` receives `id="profile-tab-{value}"` and `aria-controls="profile-panel-{value}"`. |
+
+The two previously-duplicated `useEffect` calls are now merged into one to eliminate a potential mount-time race condition.
+
+### `LandingPage` (`src/pages/LandingPage.tsx`)
+
+Three targeted changes:
+
+1. **Initial state** — `activeProfileTab` is initialised from `window.location.hash` so that a page load with a hash (e.g. `/#activity`) shows the correct tab immediately, without waiting for a re-render.
+2. **`enableHashRouting`** — passed to `ProfileTabPillGroup`, enabling the hash sync logic.
+3. **Panel markup** — the tab-panel `<div>` now carries `id="profile-panel-{activeTab}"`, `role="tabpanel"`, `aria-labelledby="profile-tab-{activeTab}"`, and `tabIndex={0}` so the tab ↔ panel relationship is semantically complete.
+
+## Validation
+
+```bash
+# Run the new unit tests
+pnpm test ProfileTabPillGroup
+
+# Run the full test suite
+pnpm test
+```
+
+### Manual verification
+
+1. Open the app at `/`.
+2. Navigate to the "Creator profile pattern" section.
+3. Click **Creations** — the URL bar should update to `/#creations`.
+4. Click **Collectors** — URL updates to `/#collectors`.
+5. Press the browser **Back** button — returns to `/#creations` and activates that tab.
+6. Open `/#activity` directly — the Activity tab should be active on load.
+7. Open `/#` or a non-matching hash — falls back to the Overview tab.
diff --git a/src/components/common/ProfileTabPill.tsx b/src/components/common/ProfileTabPill.tsx
index 8a18899..4953bba 100644
--- a/src/components/common/ProfileTabPill.tsx
+++ b/src/components/common/ProfileTabPill.tsx
@@ -77,10 +77,13 @@ export const ProfileTabPillGroup: React.FC<ProfileTabPillGroupProps> = ({
 	className,
 	enableHashRouting = false,
 }) => {
+	// Read the initial URL hash on mount and listen for subsequent changes.
+	// Both concerns share one effect so there is no race between the initial
+	// read and the listener being attached.
 	useEffect(() => {
 		if (!enableHashRouting) return;
 
-		const handleHashChange = () => {
+		const syncFromHash = () => {
 			const hash = window.location.hash.slice(1);
 			const validTab = tabs.find(tab => tab.value === hash);
 			if (validTab && hash !== activeTab) {
@@ -88,9 +91,15 @@ export const ProfileTabPillGroup: React.FC<ProfileTabPillGroupProps> = ({
 			}
 		};
 
-		window.addEventListener('hashchange', handleHashChange);
-		return () => window.removeEventListener('hashchange', handleHashChange);
-	}, [enableHashRouting, tabs, activeTab, onTabChange]);
+		// Sync immediately on mount so direct URL hash navigation works.
+		syncFromHash();
+
+		window.addEventListener('hashchange', syncFromHash);
+		return () => window.removeEventListener('hashchange', syncFromHash);
+		// activeTab is intentionally excluded: we only want to sync *from* the
+		// hash into state, never the other way round inside this effect.
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [enableHashRouting, tabs, onTabChange]);
 
 	const handleTabClick = (value: string) => {
 		onTabChange(value);
@@ -99,16 +108,6 @@ export const ProfileTabPillGroup: React.FC<ProfileTabPillGroupProps> = ({
 		}
 	};
 
-	useEffect(() => {
-		if (!enableHashRouting) return;
-
-		const hash = window.location.hash.slice(1);
-		const validTab = tabs.find(tab => tab.value === hash);
-		if (validTab && hash !== activeTab) {
-			onTabChange(hash);
-		}
-	}, [enableHashRouting, tabs, activeTab, onTabChange]);
-
 	return (
 		<nav
 			role="tablist"
@@ -118,8 +117,10 @@ export const ProfileTabPillGroup: React.FC<ProfileTabPillGroupProps> = ({
 			{tabs.map(tab => (
 				<ProfileTabPill
 					key={tab.value}
+					id={`profile-tab-${tab.value}`}
 					role="tab"
 					aria-selected={activeTab === tab.value}
+					aria-controls={`profile-panel-${tab.value}`}
 					isActive={activeTab === tab.value}
 					icon={tab.icon}
 					onClick={() => handleTabClick(tab.value)}
diff --git a/src/components/common/__tests__/ProfileTabPillGroup.test.tsx b/src/components/common/__tests__/ProfileTabPillGroup.test.tsx
new file mode 100644
index 0000000..54f8999
--- /dev/null
+++ b/src/components/common/__tests__/ProfileTabPillGroup.test.tsx
@@ -0,0 +1,173 @@
+import { render, screen, fireEvent } from '@testing-library/react';
+import { describe, it, expect, beforeEach, vi } from 'vitest';
+import { ProfileTabPillGroup } from '@/components/common/ProfileTabPill';
+
+// ---------------------------------------------------------------------------
+// Feature: creator-profile-anchor-links (#159)
+// Validates: URL hash navigation, hashchange listener, tab ↔ panel wiring
+// ---------------------------------------------------------------------------
+
+const TABS = [
+	{ label: 'Overview', value: 'overview' },
+	{ label: 'Creations', value: 'creations' },
+	{ label: 'Collectors', value: 'collectors' },
+	{ label: 'Activity', value: 'activity' },
+];
+
+describe('ProfileTabPillGroup – hash routing disabled (default)', () => {
+	beforeEach(() => {
+		window.location.hash = '';
+	});
+
+	it('does not update the URL hash when a tab is clicked', () => {
+		const onTabChange = vi.fn();
+		render(
+			<ProfileTabPillGroup
+				tabs={TABS}
+				activeTab="overview"
+				onTabChange={onTabChange}
+			/>
+		);
+
+		fireEvent.click(screen.getByRole('tab', { name: 'Creations' }));
+
+		expect(onTabChange).toHaveBeenCalledWith('creations');
+		expect(window.location.hash).toBe('');
+	});
+});
+
+describe('ProfileTabPillGroup – hash routing enabled', () => {
+	beforeEach(() => {
+		// Reset hash before each test
+		window.location.hash = '';
+	});
+
+	it('sets the URL hash when a tab is clicked', () => {
+		const onTabChange = vi.fn();
+		render(
+			<ProfileTabPillGroup
+				tabs={TABS}
+				activeTab="overview"
+				onTabChange={onTabChange}
+				enableHashRouting
+			/>
+		);
+
+		fireEvent.click(screen.getByRole('tab', { name: 'Collectors' }));
+
+		expect(onTabChange).toHaveBeenCalledWith('collectors');
+		expect(window.location.hash).toBe('#collectors');
+	});
+
+	it('reads the initial URL hash and activates the matching tab on mount', () => {
+		window.location.hash = '#activity';
+		const onTabChange = vi.fn();
+
+		render(
+			<ProfileTabPillGroup
+				tabs={TABS}
+				activeTab="overview"
+				onTabChange={onTabChange}
+				enableHashRouting
+			/>
+		);
+
+		// The component should call onTabChange with the hash value on mount
+		expect(onTabChange).toHaveBeenCalledWith('activity');
+	});
+
+	it('does not call onTabChange when the hash matches the active tab', () => {
+		window.location.hash = '#overview';
+		const onTabChange = vi.fn();
+
+		render(
+			<ProfileTabPillGroup
+				tabs={TABS}
+				activeTab="overview"
+				onTabChange={onTabChange}
+				enableHashRouting
+			/>
+		);
+
+		expect(onTabChange).not.toHaveBeenCalled();
+	});
+
+	it('ignores a URL hash that does not match any tab value', () => {
+		window.location.hash = '#unknown-section';
+		const onTabChange = vi.fn();
+
+		render(
+			<ProfileTabPillGroup
+				tabs={TABS}
+				activeTab="overview"
+				onTabChange={onTabChange}
+				enableHashRouting
+			/>
+		);
+
+		expect(onTabChange).not.toHaveBeenCalled();
+	});
+
+	it('responds to a hashchange event after mount', () => {
+		const onTabChange = vi.fn();
+		render(
+			<ProfileTabPillGroup
+				tabs={TABS}
+				activeTab="overview"
+				onTabChange={onTabChange}
+				enableHashRouting
+			/>
+		);
+
+		// Simulate the browser navigating to #creations (e.g. via back/forward)
+		window.location.hash = '#creations';
+		fireEvent(window, new HashChangeEvent('hashchange'));
+
+		expect(onTabChange).toHaveBeenCalledWith('creations');
+	});
+
+	it('renders each tab with an id and aria-controls pointing to its panel', () => {
+		const onTabChange = vi.fn();
+		render(
+			<ProfileTabPillGroup
+				tabs={TABS}
+				activeTab="overview"
+				onTabChange={onTabChange}
+				enableHashRouting
+			/>
+		);
+
+		for (const tab of TABS) {
+			const button = screen.getByRole('tab', { name: tab.label });
+			expect(button).toHaveAttribute('id', `profile-tab-${tab.value}`);
+			expect(button).toHaveAttribute(
+				'aria-controls',
+				`profile-panel-${tab.value}`
+			);
+		}
+	});
+
+	it('marks only the active tab as selected', () => {
+		const onTabChange = vi.fn();
+		render(
+			<ProfileTabPillGroup
+				tabs={TABS}
+				activeTab="creations"
+				onTabChange={onTabChange}
+				enableHashRouting
+			/>
+		);
+
+		expect(screen.getByRole('tab', { name: 'Creations' })).toHaveAttribute(
+			'aria-selected',
+			'true'
+		);
+
+		for (const tab of TABS.filter(t => t.value !== 'creations')) {
+			expect(screen.getByRole('tab', { name: tab.label })).toHaveAttribute(
+				'aria-selected',
+				'false'
+			);
+		}
+	});
+});
diff --git a/src/pages/LandingPage.tsx b/src/pages/LandingPage.tsx
index 51cf16c..2ff5e9c 100644
--- a/src/pages/LandingPage.tsx
+++ b/src/pages/LandingPage.tsx
@@ -129,7 +129,12 @@ function LandingPage() {
 	const { isMismatch: isNetworkMismatch } = useNetworkMismatch();
 	const [isLoading, setIsLoading] = useState(true);
 	const [searchQuery, setSearchQuery] = useState('');
-	const [activeProfileTab, setActiveProfileTab] = useState('overview');
+	const [activeProfileTab, setActiveProfileTab] = useState(() => {
+		if (typeof window === 'undefined') return 'overview';
+		const PROFILE_TABS = ['overview', 'creations', 'collectors', 'activity'];
+		const hash = window.location.hash.slice(1);
+		return PROFILE_TABS.includes(hash) ? hash : 'overview';
+	});
 	const [featuredHoldings, setFeaturedHoldings] = useState(3);
 	const [tradeSide, setTradeSide] = useState<TradeSide>('buy');
 	const [tradeDialogOpen, setTradeDialogOpen] = useState(false);
@@ -137,7 +142,9 @@ function LandingPage() {
 	const [pendingTxOpen, setPendingTxOpen] = useState(false);
 	const [sortOption, setSortOption] = useState<SortOption>(() => {
 		if (typeof window === 'undefined') return 'featured';
-		const saved = window.localStorage.getItem(CREATOR_SORT_KEY) as SortOption | null;
+		const saved = window.localStorage.getItem(
+			CREATOR_SORT_KEY
+		) as SortOption | null;
 		return saved ?? 'featured';
 	});
 	const [fetchRetryAttempt, setFetchRetryAttempt] = useState(0);
@@ -171,7 +178,10 @@ function LandingPage() {
 	useEffect(() => {
 		if (typeof window === 'undefined') return;
 		const handleScroll = () => {
-			window.sessionStorage.setItem(CREATOR_SCROLL_KEY, String(window.scrollY));
+			window.sessionStorage.setItem(
+				CREATOR_SCROLL_KEY,
+				String(window.scrollY)
+			);
 		};
 		window.addEventListener('scroll', handleScroll, { passive: true });
 		return () => window.removeEventListener('scroll', handleScroll);
@@ -207,7 +217,10 @@ function LandingPage() {
 						BASE_RETRY_DELAY_MS * 2 ** fetchRetryAttempt,
 						5000
 					);
-					window.setTimeout(() => setFetchRetryAttempt(nextAttempt), backoffDelay);
+					window.setTimeout(
+						() => setFetchRetryAttempt(nextAttempt),
+						backoffDelay
+					);
 					return;
 				}
 
@@ -249,7 +262,8 @@ function LandingPage() {
 				break;
 			case 'supply-desc':
 				sorted.sort(
-					(a, b) => (b.creatorShareSupply ?? 0) - (a.creatorShareSupply ?? 0)
+					(a, b) =>
+						(b.creatorShareSupply ?? 0) - (a.creatorShareSupply ?? 0)
 				);
 				break;
 			default:
@@ -262,7 +276,10 @@ function LandingPage() {
 		setPage(0);
 	}, [trimmedSearchQuery, sortOption]);
 
-	const totalPages = Math.max(1, Math.ceil(filteredCreators.length / PAGE_SIZE));
+	const totalPages = Math.max(
+		1,
+		Math.ceil(filteredCreators.length / PAGE_SIZE)
+	);
 	const safePage = Math.min(page, totalPages - 1);
 	const pagedCreators = useMemo(() => {
 		const start = safePage * PAGE_SIZE;
@@ -305,7 +322,9 @@ function LandingPage() {
 			await new Promise<void>(resolve => window.setTimeout(resolve, 900));
 
 			setFeaturedHoldings(current =>
-				tradeSide === 'buy' ? current + amount : Math.max(0, current - amount)
+				tradeSide === 'buy'
+					? current + amount
+					: Math.max(0, current - amount)
 			);
 
 			await new Promise<void>(resolve => window.setTimeout(resolve, 250));
@@ -437,7 +456,9 @@ function LandingPage() {
 									variant="outline"
 									size="sm"
 									disabled={safePage === 0}
-									onClick={() => handlePageChange(Math.max(0, safePage - 1))}
+									onClick={() =>
+										handlePageChange(Math.max(0, safePage - 1))
+									}
 								>
 									Previous
 								</Button>
@@ -507,6 +528,7 @@ function LandingPage() {
 							]}
 							activeTab={activeProfileTab}
 							onTabChange={setActiveProfileTab}
+							enableHashRouting
 							className="mb-4"
 						/>
 						<CompactSectionSubtitle className="max-w-xl">
@@ -514,10 +536,23 @@ function LandingPage() {
 							repeated creator facts into one responsive grid that stays
 							tidy on mobile and desktop.
 						</CompactSectionSubtitle>
-						<div className="mt-5 flex flex-wrap gap-2">
-							<MiniStatChip label="Status" value="Verified creator" />
-							<MiniStatChip label="Audience" value="12.4K collectors" />
-							<MiniStatChip label="Access" value="Member-first drops" />
+						<div
+							id={`profile-panel-${activeProfileTab}`}
+							role="tabpanel"
+							aria-labelledby={`profile-tab-${activeProfileTab}`}
+							tabIndex={0}
+						>
+							<div className="mt-5 flex flex-wrap gap-2">
+								<MiniStatChip label="Status" value="Verified creator" />
+								<MiniStatChip
+									label="Audience"
+									value="12.4K collectors"
+								/>
+								<MiniStatChip
+									label="Access"
+									value="Member-first drops"
+								/>
+							</div>
 						</div>
 					</div>
 					<div className="space-y-3">
@@ -534,9 +569,7 @@ function LandingPage() {
 							label="Creator Share Supply"
 							value={`${formatCompactNumber(250)} shares available`}
 						/>
-						{isNetworkMismatch && (
-							<NetworkMismatchBanner />
-						)}
+						{isNetworkMismatch && <NetworkMismatchBanner />}
 						<div className="hidden md:flex items-center gap-3">
 							<Button
 								className="rounded-xl"
@@ -589,7 +622,10 @@ function LandingPage() {
 					</div>
 				</div>
 
-				<SectionDivider title="Transaction timeline pattern" spacing="relaxed" />
+				<SectionDivider
+					title="Transaction timeline pattern"
+					spacing="relaxed"
+				/>
 				<MarketplaceSection spacing="relaxed">
 					<EmptyTransactionTimelineState />
 				</MarketplaceSection>