Merge pull request #251 from jessicanath/feat/issue-169-precision-mode-tooltip

feat: add creator metrics tooltip for precision mode toggle

Author: Chucks1093

src/components/common/PrecisionModeToggle.tsx

@@ -0,0 +1,67 @@
+import { cn } from '@/lib/utils';
+import { Tooltip } from '@/components/ui/tooltip';
+
+export type PrecisionMode = 'compact' | 'full';
+
+interface PrecisionModeToggleProps {
+	mode: PrecisionMode;
+	onChange: (mode: PrecisionMode) => void;
+	className?: string;
+}
+
+const PRECISION_TOOLTIP =
+	'Compact shows abbreviated values (e.g. 1.2K). Full shows exact numbers.';
+
+/**
+ * Toggle between compact and full precision display for creator metrics.
+ * Includes an accessible tooltip explaining the difference between modes.
+ */
+const PrecisionModeToggle: React.FC<PrecisionModeToggleProps> = ({
+	mode,
+	onChange,
+	className,
+}) => {
+	return (
+		<Tooltip content={PRECISION_TOOLTIP}>
+			<div
+				role="group"
+				aria-label="Metrics display precision"
+				className={cn(
+					'inline-flex items-center rounded-lg border border-white/10 bg-white/[0.05] p-0.5',
+					className
+				)}
+			>
+				<button
+					type="button"
+					role="radio"
+					aria-checked={mode === 'compact'}
+					onClick={() => onChange('compact')}
+					className={cn(
+						'rounded-md px-3 py-1 text-xs font-semibold uppercase tracking-[0.14em] transition-colors',
+						mode === 'compact'
+							? 'bg-amber-400/20 text-amber-300'
+							: 'text-white/45 hover:text-white/70'
+					)}
+				>
+					Compact
+				</button>
+				<button
+					type="button"
+					role="radio"
+					aria-checked={mode === 'full'}
+					onClick={() => onChange('full')}
+					className={cn(
+						'rounded-md px-3 py-1 text-xs font-semibold uppercase tracking-[0.14em] transition-colors',
+						mode === 'full'
+							? 'bg-amber-400/20 text-amber-300'
+							: 'text-white/45 hover:text-white/70'
+					)}
+				>
+					Full
+				</button>
+			</div>
+		</Tooltip>
+	);
+};
+
+export default PrecisionModeToggle;

src/pages/LandingPage.tsx

@@ -26,6 +26,7 @@ import NetworkMismatchBanner from '@/components/common/NetworkMismatchBanner';
 import { useNetworkMismatch } from '@/hooks/useNetworkMismatch';
 import showToast from '@/utils/toast.util';
 import { formatCompactNumber, formatNumber } from '@/utils/numberFormat.utils';
+import PrecisionModeToggle, { type PrecisionMode } from '@/components/common/PrecisionModeToggle';
 
 const FEATURED_CREATOR_FACTS = [
 	{ label: 'Membership', value: 'Collectors Circle' },
@@ -143,6 +144,7 @@ function LandingPage() {
 		return PROFILE_TABS.includes(hash) ? hash : 'overview';
 	});
 	const [featuredHoldings, setFeaturedHoldings] = useState(3);
+	const [precisionMode, setPrecisionMode] = useState<PrecisionMode>('compact');
 	const [tradeSide, setTradeSide] = useState<TradeSide>('buy');
 	const [tradeDialogOpen, setTradeDialogOpen] = useState(false);
 	const [tradeSubmitting, setTradeSubmitting] = useState(false);
@@ -602,9 +604,22 @@ function LandingPage() {
 								},
 							]}
 						/>
+						<div className="flex items-center justify-between gap-2">
+							<span className="text-[0.65rem] font-bold uppercase tracking-[0.22em] text-white/40">
+								Metrics display
+							</span>
+							<PrecisionModeToggle
+								mode={precisionMode}
+								onChange={setPrecisionMode}
+							/>
+						</div>
 						<CreatorLabeledStatRow
 							label="Creator Share Supply"
-							value={`${formatCompactNumber(250)} shares available`}
+							value={
+								precisionMode === 'compact'
+									? `${formatCompactNumber(250)} shares available`
+									: `${formatNumber(250)} shares available`
+							}
 						/>
 						{isNetworkMismatch && <NetworkMismatchBanner />}
 						<div className="hidden md:flex items-center gap-3">