feat: add favicons to sidebar;

Author: izadoesdev

apps/basket/src/hooks/auth.test.ts

@@ -10,7 +10,7 @@ import {
 } from './auth';
 
 // Mock the logger to prevent console output during tests
-vi.mock('../lib/logger', () => ({
+vi.mock('../../lib/logger', () => ({
 	logger: {
 		warn: vi.fn(),
 		error: vi.fn(),

apps/dashboard/components/analytics/favicon-image.tsx

@@ -9,6 +9,7 @@ interface FaviconImageProps {
 	altText?: string;
 	size?: number;
 	className?: string;
+	fallbackIcon?: React.ReactNode;
 }
 
 const hostnameRegex = /^https?:\/\//;
@@ -19,6 +20,7 @@ export function FaviconImage({
 	altText,
 	size = 20,
 	className = '',
+	fallbackIcon,
 }: FaviconImageProps) {
 	const [error, setError] = useState(false);
 
@@ -44,12 +46,14 @@ export function FaviconImage({
 				className={`${className} flex items-center justify-center rounded-sm`}
 				style={{ width: size, height: size }}
 			>
-				<GlobeIcon
-					aria-label={altText || 'Website icon'}
-					className="not-dark:text-primary text-muted-foreground"
-					size={size}
-					weight="duotone"
-				/>
+				{fallbackIcon || (
+					<GlobeIcon
+						aria-label={altText || 'Website icon'}
+						className="not-dark:text-primary text-muted-foreground"
+						size={size}
+						weight="duotone"
+					/>
+				)}
 			</div>
 		);
 	}

apps/dashboard/components/layout/navigation/website-header.tsx

@@ -3,6 +3,7 @@ import { CaretLeftIcon, PlanetIcon } from '@phosphor-icons/react';
 import Link from 'next/link';
 import { Button } from '@/components/ui/button';
 import { Skeleton } from '@/components/ui/skeleton';
+import { FaviconImage } from '@/components/analytics/favicon-image';
 
 interface WebsiteHeaderProps {
 	website: Website | null | undefined;
@@ -31,10 +32,18 @@ export function WebsiteHeader({ website }: WebsiteHeaderProps) {
 
 			<div className="rounded-lg border border-border/50 bg-accent/30 px-2 py-2">
 				<h2 className="flex items-center truncate font-semibold text-base">
-					<PlanetIcon
-						className="mr-2 h-5 w-5 text-primary/70"
-						size={64}
-						weight="duotone"
+					<FaviconImage
+						altText={`${website?.name || website?.domain || 'Website'} favicon`}
+						className="mr-2"
+						domain={website?.domain || ''}
+						fallbackIcon={
+							<PlanetIcon
+								className="text-primary/70"
+								size={20}
+								weight="duotone"
+							/>
+						}
+						size={20}
 					/>
 					{website?.name || website?.domain || (
 						<Skeleton className="h-5 w-36" />