Description
Users often jump between different AI models while researching. To improve navigation, we should implement a "Recently Viewed" section at the bottom of the main directory and model detail pages.
Expected Behavior
- Track Views: Create a custom hook
useRecentlyViewed() that reads from and writes to the browser's localStorage.
- Save History: Whenever a user visits
/models/[slug], append that model's basic data (slug, name, avatar) to the localStorage array (keeping a maximum of 5 recent items to avoid bloat).
- Display: Create a
RecentlyViewed component that maps through this local array and displays mini-cards linking back to those models.
- Hydration Safety: Ensure the component only renders on the client side (after
useEffect) to prevent Next.js hydration mismatch errors.
Constraints
- Pure client-side feature. No API routes or Supabase updates needed.
- Prevent duplicate models from appearing in the history array.
Labels
enhancement, good first issue, frontend, local-storage
I would like to work on this under Nsoc 26 Kindly assign this to me!
@AditthyaSS
Description
Users often jump between different AI models while researching. To improve navigation, we should implement a "Recently Viewed" section at the bottom of the main directory and model detail pages.
Expected Behavior
useRecentlyViewed()that reads from and writes to the browser'slocalStorage./models/[slug], append that model's basic data (slug, name, avatar) to thelocalStoragearray (keeping a maximum of 5 recent items to avoid bloat).RecentlyViewedcomponent that maps through this local array and displays mini-cards linking back to those models.useEffect) to prevent Next.js hydration mismatch errors.Constraints
Labels
enhancement,good first issue,frontend,local-storageI would like to work on this under Nsoc 26 Kindly assign this to me!
@AditthyaSS