cleanup, lint

Author: izadoesdev

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

@@ -1,6 +1,7 @@
 'use client';
 
 import { GlobeIcon } from '@phosphor-icons/react';
+import Image from 'next/image';
 import { useState } from 'react';
 
 interface FaviconImageProps {
@@ -10,6 +11,9 @@ interface FaviconImageProps {
 	className?: string;
 }
 
+const hostnameRegex = /^https?:\/\//;
+const wwwRegex = /^www\./;
+
 export function FaviconImage({
 	domain,
 	altText,
@@ -19,8 +23,8 @@ export function FaviconImage({
 	const [error, setError] = useState(false);
 
 	const hostname = domain
-		.replace(/^https?:\/\//, '')
-		.replace(/^www\./, '')
+		.replace(hostnameRegex, '')
+		.replace(wwwRegex, '')
 		.split('/')[0]
 		.split('?')[0]
 		.split('#')[0];
@@ -34,15 +38,15 @@ export function FaviconImage({
 		hostname.includes('localhost') ||
 		hostname.includes('127.0.0.1');
 
-	if (error || invalid) {
+	if (invalid || error) {
 		return (
 			<div
 				className={`${className} flex items-center justify-center rounded-sm`}
 				style={{ width: size, height: size }}
 			>
 				<GlobeIcon
 					aria-label={altText || 'Website icon'}
-					className="text-muted-foreground"
+					className="not-dark:text-primary text-muted-foreground"
 					size={size}
 					weight="duotone"
 				/>
@@ -51,19 +55,12 @@ export function FaviconImage({
 	}
 
 	return (
-		<img
+		<Image
 			alt={altText || `${domain} favicon`}
 			className={className}
 			height={size}
 			onError={() => setError(true)}
 			src={`https://icons.duckduckgo.com/ip3/${hostname}.ico`}
-			style={{
-				width: size,
-				height: size,
-				objectFit: 'contain',
-				imageRendering: '-webkit-optimize-contrast',
-				filter: 'contrast(1.1) saturate(1.1)',
-			}}
 			width={size}
 		/>
 	);

apps/dashboard/components/atomic/FormattedNumber.tsx

@@ -4,7 +4,7 @@ import type React from 'react';
 import { formatMetricNumber } from '@/lib/formatters';
 
 interface FormattedNumberProps {
-	id?: string; // Optional unique ID
+	id?: string;
 	value: number;
 	className?: string;
 }

apps/dashboard/components/atomic/PageLinkCell.tsx

@@ -1,8 +1,8 @@
 'use client';
 
-import { ExternalLinkIcon, FileTextIcon } from 'lucide-react'; // Using FileTextIcon as a generic page icon
+import { ArrowSquareOutIcon, FileTextIcon } from '@phosphor-icons/react';
 import type React from 'react';
-import { formatDomainLink } from '@/app/(main)/websites/[id]/_components/utils/analytics-helpers'; // Adjusted path
+import { formatDomainLink } from '@/app/(main)/websites/[id]/_components/utils/analytics-helpers';
 import { cn } from '@/lib/utils';
 
 export interface PageLinkCellData {
@@ -50,15 +50,21 @@ export const PageLinkCell: React.FC<PageLinkCellProps> = ({
 			rel={isExternal ? 'noopener noreferrer' : undefined}
 			target={isExternal ? '_blank' : undefined}
 		>
-			<FileTextIcon className={cn('flex-shrink-0', iconClassName)} />
+			<FileTextIcon
+				className={cn('flex-shrink-0', iconClassName)}
+				weight="duotone"
+			/>
 			<span
 				className={cn('truncate group-hover:text-primary', textClassName)}
 				style={{ maxWidth: `${maxLength + 2}ch` }}
 			>
 				{display}
 			</span>
 			{isExternal && (
-				<ExternalLinkIcon className="h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100" />
+				<ArrowSquareOutIcon
+					className="h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100"
+					weight="duotone"
+				/>
 			)}
 		</a>
 	);

apps/dashboard/components/atomic/ReferrerSourceCell.tsx

@@ -3,16 +3,10 @@
 import type React from 'react';
 import { FaviconImage } from '../analytics/favicon-image';
 
-// Mirroring the ReferrerItem type from WebsiteOverviewTab.tsx
-// Ideally, this would be a shared type if used in multiple places outside atomic components.
 export interface ReferrerSourceCellData {
-	// The primary display name, maps to 'value' if accessorKey is 'name' in a table
 	name?: string;
-	// The raw referrer string
 	referrer?: string;
-	// The domain used for fetching the favicon
 	domain?: string;
-	// Optional unique ID for the component instance
 	id?: string;
 }
 

apps/dashboard/components/atomic/TrendArrow.tsx

@@ -1,12 +1,12 @@
 'use client';
 
 import type React from 'react';
-import { cn } from '@/lib/utils'; // Assuming cn is available for class name composition
+import { cn } from '@/lib/utils';
 
 interface TrendArrowProps {
 	id?: string;
-	value: number; // Positive, negative, or zero
-	invertColor?: boolean; // If true, positive is red, negative is green
+	value: number;
+	invertColor?: boolean;
 	className?: string;
 }
 

apps/dashboard/components/atomic/TrendPercentage.tsx

@@ -5,10 +5,10 @@ import { cn } from '@/lib/utils';
 
 interface TrendPercentageProps {
 	id?: string;
-	value: number; // The percentage value (e.g., 10.5, -5.2)
-	invertColor?: boolean; // If true, positive is red, negative is green
+	value: number;
+	invertColor?: boolean;
 	className?: string;
-	digits?: number; // Number of digits after the decimal point
+	digits?: number;
 }
 
 const formatPercentage = (value: number, digits = 1): string => {
@@ -23,10 +23,9 @@ export const TrendPercentage: React.FC<TrendPercentageProps> = ({
 	className,
 	digits = 1,
 }) => {
-	let colorClass = 'text-muted-foreground'; // Default for zero or NaN
+	let colorClass = 'text-muted-foreground';
 
 	if (Number.isNaN(value)) {
-		// Handle NaN case, perhaps display '--%'
 		return (
 			<span className={cn('text-muted-foreground', className)} id={id}>
 				--%