feat: add recently viewed models with localStorage persistence

src/app/models/page.tsx

@@ -1,5 +1,6 @@
 "use client";
-
+import TrackModelView from '@/components/models/TrackModelView';
+import RecentlyViewed from '@/components/models/RecentlyViewed';
 import { useState, useMemo, useEffect } from "react";
 import { mockModels, getUniqueProviders, getUniqueModalities, getUniqueLicenses } from "@/lib/mock-data";
 import { ModelFilters as ModelFiltersType, Model } from "@/types";
@@ -61,6 +62,8 @@ export default function ModelsPage() {
     }, [filters, models]);
 
     return (
+        <TrackModelView model={{ slug: model.slug, name: model.name, avatar: model.logoUrl ?? '' }} />
+
         <div className="max-w-[1400px] mx-auto px-4 sm:px-6 lg:px-8 py-8">
             {/* Header */}
             <div className="flex items-center justify-between mb-6">
@@ -148,5 +151,6 @@ export default function ModelsPage() {
                 </div>
             )}
         </div>
+        <RecentlyViewed />
     );
 }

src/components/models/RecentlyViewed.tsx

@@ -0,0 +1,51 @@
+// src/components/models/RecentlyViewed.tsx
+'use client';
+
+import { useEffect, useState } from 'react';
+import Link from 'next/link';
+import Image from 'next/image';
+import { RecentlyViewedModel } from '@/hooks/useRecentlyViewed';
+
+const STORAGE_KEY = 'aiatlas_recently_viewed';
+
+export default function RecentlyViewed() {
+  const [models, setModels] = useState<RecentlyViewedModel[]>([]);
+  const [mounted, setMounted] = useState(false);
+
+  // Only run on client — prevents Next.js hydration mismatch
+  useEffect(() => {
+    try {
+      const stored = localStorage.getItem(STORAGE_KEY);
+      if (stored) setModels(JSON.parse(stored));
+    } catch {}
+    setMounted(true);
+  }, []);
+
+  if (!mounted || models.length === 0) return null;
+
+  return (
+    <section className="mt-12">
+      <h2 className="text-lg font-semibold mb-4 text-foreground">Recently Viewed</h2>
+      <div className="flex flex-wrap gap-3">
+        {models.map(model => (
+          <Link
+            key={model.slug}
+            href={`/models/${model.slug}`}
+            className="flex items-center gap-2 px-3 py-2 rounded-lg border border-border bg-card hover:bg-accent transition-colors text-sm"
+          >
+            {model.avatar && (
+              <Image
+                src={model.avatar}
+                alt={model.name}
+                width={20}
+                height={20}
+                className="rounded-full"
+              />
+            )}
+            <span className="text-foreground">{model.name}</span>
+          </Link>
+        ))}
+      </div>
+    </section>
+  );
+}

src/components/models/TrackModelView.tsx

@@ -0,0 +1,20 @@
+// src/components/models/TrackModelView.tsx
+'use client';
+
+import { useEffect } from 'react';
+import { useRecentlyViewed, RecentlyViewedModel } from '@/hooks/useRecentlyViewed';
+
+interface Props {
+  model: RecentlyViewedModel;
+}
+
+export default function TrackModelView({ model }: Props) {
+  const { addModel } = useRecentlyViewed();
+
+  useEffect(() => {
+    addModel(model);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [model.slug]);
+
+  return null; // renders nothing, just tracks
+}

src/hooks/useRecentlyviewed.ts

@@ -0,0 +1,38 @@
+// src/hooks/useRecentlyViewed.ts
+import { useState, useEffect } from 'react';
+
+export interface RecentlyViewedModel {
+  slug: string;
+  name: string;
+  avatar: string; // provider logo / avatar URL
+}
+
+const STORAGE_KEY = 'aiatlas_recently_viewed';
+const MAX_ITEMS = 5;
+
+export function useRecentlyViewed() {
+  const [recentlyViewed, setRecentlyViewed] = useState<RecentlyViewedModel[]>([]);
+
+  // Load from localStorage on mount (client-only)
+  useEffect(() => {
+    try {
+      const stored = localStorage.getItem(STORAGE_KEY);
+      if (stored) setRecentlyViewed(JSON.parse(stored));
+    } catch {}
+  }, []);
+
+  const addModel = (model: RecentlyViewedModel) => {
+    setRecentlyViewed(prev => {
+      // Remove duplicate if it already exists
+      const filtered = prev.filter(m => m.slug !== model.slug);
+      // Prepend new item, cap at MAX_ITEMS
+      const updated = [model, ...filtered].slice(0, MAX_ITEMS);
+      try {
+        localStorage.setItem(STORAGE_KEY, JSON.stringify(updated));
+      } catch {}
+      return updated;
+    });
+  };
+
+  return { recentlyViewed, addModel };
+}