feat(artists): mark as favorite

src/components/ArtistsColumn.tsx

@@ -1,14 +1,22 @@
 import RelistenAPI from '@/lib/RelistenAPI';
 import { getServerFilters } from '@/lib/serverFilterCookies';
 import ArtistsColumnWithControls from './ArtistsColumnWithControls';
+import { getServerFavorites } from '@/lib/serverFavoriteCookies';
 
 const ArtistsColumn = async () => {
-  const [artists, initialFilters] = await Promise.all([
+  const [artists, initialFilters, initialFavorites] = await Promise.all([
     RelistenAPI.fetchArtists(),
     getServerFilters('root', true),
+    getServerFavorites(),
   ]);
 
-  return <ArtistsColumnWithControls artists={artists} initialFilters={initialFilters} />;
+  return (
+    <ArtistsColumnWithControls
+      artists={artists}
+      initialFilters={initialFilters}
+      initialFavorites={initialFavorites}
+    />
+  );
 };
 
 export default ArtistsColumn;

src/components/ArtistsColumnWithControls.tsx

@@ -8,18 +8,31 @@ import { FilterState } from '@/lib/filterCookies';
 import ColumnWithToggleControls from './ColumnWithToggleControls';
 import Row from './Row';
 import RowHeader from './RowHeader';
+import { useFavoriteState } from '@/hooks/useFavoriteState';
 
 const byObject = {
   phish: 'Phish.in',
 };
 
+const artistGroups = {
+  0: 'Bands',
+  1: 'Featured',
+  2: 'Favorites',
+};
+
 type ArtistsColumnWithControlsProps = {
   artists: Artist[];
   initialFilters?: FilterState;
+  initialFavorites: string[];
 };
 
-const ArtistsColumnWithControls = ({ artists, initialFilters }: ArtistsColumnWithControlsProps) => {
+const ArtistsColumnWithControls = ({
+  artists,
+  initialFilters,
+  initialFavorites,
+}: ArtistsColumnWithControlsProps) => {
   const { alphaAsc, toggleFilter, clearFilters } = useFilterState(initialFilters, 'root');
+  const { favorites } = useFavoriteState(initialFavorites);
 
   const toggles = [
     {
@@ -31,24 +44,36 @@ const ArtistsColumnWithControls = ({ artists, initialFilters }: ArtistsColumnWit
   ];
 
   const processedArtists = useMemo(() => {
-    const grouped = groupBy(artists, 'featured');
-    const sortedGroups = Object.entries(grouped).sort(([a], [b]) => b.localeCompare(a));
-
-    return sortedGroups.map(([type, groupArtists]) => {
-      const sorted = [...groupArtists];
+    try {
+      const favoritesGroup = artists.filter(
+        (artist) => artist.uuid && favorites.includes(artist.uuid)
+      );
 
-      // Apply alphabetical sorting (default is desc/A-Z when no filter set)
-      if (alphaAsc) {
-        // Z-A (ascending)
-        sorted.sort((a, b) => (b.name || '').localeCompare(a.name || ''));
-      } else {
-        // Default: A-Z (descending)
-        sorted.sort((a, b) => (a.name || '').localeCompare(b.name || ''));
+      const grouped = groupBy(artists, 'featured');
+      if (favoritesGroup.length) {
+        grouped[2] = favoritesGroup;
       }
 
-      return [type, sorted] as [string, Artist[]];
-    });
-  }, [artists, alphaAsc]);
+      const sortedGroups = Object.entries(grouped).sort(([a], [b]) => b.localeCompare(a));
+      return sortedGroups.map(([type, groupArtists]) => {
+        const sorted = [...groupArtists];
+
+        // Apply alphabetical sorting (default is desc/A-Z when no filter set)
+        if (alphaAsc) {
+          // Z-A (ascending)
+          sorted.sort((a, b) => (b.name || '').localeCompare(a.name || ''));
+        } else {
+          // Default: A-Z (descending)
+          sorted.sort((a, b) => (a.name || '').localeCompare(b.name || ''));
+        }
+
+        return [type, sorted] as [string, Artist[]];
+      });
+    } catch (error) {
+      console.error('Error processing artists:', error);
+      return [];
+    }
+  }, [artists, alphaAsc, favorites]);
 
   const totalArtistCount = artists.length;
   const filteredArtistCount = processedArtists.reduce(
@@ -65,7 +90,7 @@ const ArtistsColumnWithControls = ({ artists, initialFilters }: ArtistsColumnWit
       onClearFilters={clearFilters}
     >
       {processedArtists.map(([type, groupArtists]) => [
-        <RowHeader key={`header-${type}`}>{type === '1' ? 'Featured' : 'Bands'}</RowHeader>,
+        <RowHeader key={`header-${type}`}>{artistGroups[type]}</RowHeader>,
         ...groupArtists.map((artist: Artist, idx: number) => (
           <Row
             key={[idx, artist.id].join(':')}

src/components/ColumnWithToggleControls.tsx

@@ -8,7 +8,7 @@ import Scroller from './Scroller';
 import { simplePluralize } from '@/lib/utils';
 
 type ToggleConfig = {
-  type: 'sort' | 'filter';
+  type: 'sort' | 'filter' | 'favorite';
   isActive: boolean;
   onToggle: () => void;
   title: string;

src/components/YearsColumn.tsx

@@ -5,12 +5,14 @@ import { getServerFilters } from '@/lib/serverFilterCookies';
 import YearsColumnWithControls from './YearsColumnWithControls';
 import TodayInHistoryRow from './TodayInHistoryRow';
 import RecentTapesRow from './RecentTapesRow';
+import { getServerFavorites } from '@/lib/serverFavoriteCookies';
 
 const YearsColumn = async ({ artistSlug }: Pick<RawParams, 'artistSlug'>) => {
-  const [artists, artistYears, initialFilters] = await Promise.all([
+  const [artists, artistYears, initialFilters, initialFavorites] = await Promise.all([
     RelistenAPI.fetchArtists(),
     RelistenAPI.fetchYears(artistSlug),
     getServerFilters(artistSlug || '', true),
+    getServerFavorites(),
   ]).catch(() => {
     notFound();
   });
@@ -22,7 +24,9 @@ const YearsColumn = async ({ artistSlug }: Pick<RawParams, 'artistSlug'>) => {
       artistSlug={artistSlug}
       artistName={artist?.name}
       artistYears={artistYears}
+      artistId={artist?.uuid}
       initialFilters={initialFilters}
+      initialFavorites={initialFavorites}
     >
       <TodayInHistoryRow artistSlug={artistSlug} />
       <RecentTapesRow artistSlug={artistSlug} />

src/components/YearsColumnWithControls.tsx

@@ -8,33 +8,49 @@ import sortActiveBands from '../lib/sortActiveBands';
 import { simplePluralize } from '../lib/utils';
 import ColumnWithToggleControls from './ColumnWithToggleControls';
 import Row from './Row';
+import { Heart } from 'lucide-react';
+import { useFavoriteState } from '@/hooks/useFavoriteState';
+import cn from '@/lib/cn';
 
 type YearsColumnWithControlsProps = {
   artistSlug?: string;
   artistName?: string;
   artistYears: Year[];
+  artistId?: string;
   initialFilters?: FilterState;
+  initialFavorites: string[];
 } & PropsWithChildren;
 
 const YearsColumnWithControls = ({
   artistSlug,
   artistName,
   artistYears,
+  artistId,
   children,
   initialFilters,
+  initialFavorites,
 }: YearsColumnWithControlsProps) => {
   const { dateAsc, sbdOnly, toggleFilter, clearFilters } = useFilterState(
     initialFilters,
     artistSlug
   );
 
+  const { toggleFavorite, isFavorite } = useFavoriteState(initialFavorites);
+
   const toggles = [
     {
       type: 'sort' as const,
       isActive: dateAsc, // Show as active when oldest first (ascending)
       onToggle: () => toggleFilter('date'),
       title: !dateAsc ? 'Newest First' : 'Oldest First',
     },
+    {
+      type: 'favorite' as const,
+      isActive: isFavorite(artistId!),
+      onToggle: () => toggleFavorite(artistId!),
+      title: isFavorite(artistId!) ? 'Unfavorite' : 'Favorite',
+      icon: <Heart size={20} className={cn(isFavorite(artistId!) ? 'fill-white' : 'text-white')} />,
+    },
   ];
 
   const processedYears = useMemo(() => {

src/hooks/useFavoriteState.ts

@@ -0,0 +1,60 @@
+'use client';
+
+import { useCallback, useMemo } from 'react';
+import useCookie from 'react-use-cookie';
+import { useRouter } from 'next/navigation';
+import { FAVORITE_ARTIST_COOKIE_NAME } from '@/lib/constants';
+
+export function useFavoriteState(initialFavorites: string[]) {
+  const router = useRouter();
+  const defaultValue = initialFavorites ? JSON.stringify(initialFavorites) : '[]';
+  const [_cookieValue, setCookieValue] = useCookie(FAVORITE_ARTIST_COOKIE_NAME, defaultValue);
+
+  const favorites = useMemo(() => {
+    try {
+      return initialFavorites;
+    } catch {
+      return [] as string[];
+    }
+  }, [initialFavorites]);
+
+  const isFavorite = useCallback(
+    (artistId: string) => {
+      return favorites.includes(artistId);
+    },
+    [favorites]
+  );
+
+  const setFavorites = useCallback(
+    (updatedFavorites: string[]) => {
+      setCookieValue(JSON.stringify(updatedFavorites), {
+        days: 3650, // 10 years
+        SameSite: 'Lax',
+      });
+
+      router.refresh();
+    },
+    [setCookieValue, router]
+  );
+
+  const toggleFavorite = useCallback(
+    (artistId: string) => {
+      const updatedFavorites = new Set([...initialFavorites]);
+
+      if (updatedFavorites.has(artistId)) {
+        updatedFavorites.delete(artistId);
+      } else {
+        updatedFavorites.add(artistId);
+      }
+
+      setFavorites([...updatedFavorites]);
+    },
+    [favorites, setFavorites]
+  );
+
+  return {
+    favorites,
+    toggleFavorite,
+    isFavorite,
+  };
+}

src/lib/constants.ts

@@ -1,2 +1,4 @@
 // http://localhost:3823
 export const API_DOMAIN = 'https://api.relisten.net';
+
+export const FAVORITE_ARTIST_COOKIE_NAME = 'relisten_favorites:artists';

src/lib/serverFavoriteCookies.ts

@@ -0,0 +1,20 @@
+import { cookies } from 'next/headers';
+import { FAVORITE_ARTIST_COOKIE_NAME } from './constants';
+
+
+
+// Server-side function to read filter cookies
+export async function getServerFavorites(): Promise<string[]> {
+  const cookieStore = await cookies();
+
+  try {
+    const value = cookieStore.get(FAVORITE_ARTIST_COOKIE_NAME)?.value;
+    if (value) {
+      return JSON.parse(value);
+    }
+  } catch (error) {
+    console.error('Error parsing favorites cookie on server:', error);
+  }
+
+  return [];
+}