playnite init

src/components/BrowseView.tsx

@@ -1,7 +1,7 @@
 import { Media, MediaCategory } from '@/types';
 import MediaCard from './MediaCard';
 import MediaListItem from './MediaListItem';
-import { LayoutGrid, List, Star, ChevronLeft, ChevronRight, ArrowUpDown, Search } from 'lucide-react';
+import { LayoutGrid, List, Star, ChevronLeft, ChevronRight, ArrowUpDown, Search, Monitor, Users, FolderTree } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import React, { useState, useMemo, useEffect } from 'react';
 import { 
@@ -28,18 +28,27 @@ export default function BrowseView({ mediaList, onMediaClick, activeCategory }:
   // Filter states
   const [selectedGenre, setSelectedGenre] = useState<string | null>(null);
   const [selectedStudio, setSelectedStudio] = useState<string | null>(null);
+  const [selectedPlatform, setSelectedPlatform] = useState<string | null>(null);
+  const [selectedDeveloper, setSelectedDeveloper] = useState<string | null>(null);
+  const [selectedCategory, setSelectedCategory] = useState<string | null>(null);
 
   // Extract unique values for filters
   const allGenres = useMemo(() => Array.from(new Set(mediaList.flatMap(m => m.genres || []))), [mediaList]);
   const allStudios = useMemo(() => Array.from(new Set(mediaList.flatMap(m => m.studios || []))), [mediaList]);
+  const allPlatforms = useMemo(() => Array.from(new Set(mediaList.flatMap(m => m.platforms || []))), [mediaList]);
+  const allDevelopers = useMemo(() => Array.from(new Set(mediaList.flatMap(m => m.developers || []))), [mediaList]);
+  const allCategories = useMemo(() => Array.from(new Set(mediaList.flatMap(m => m.categories || []))), [mediaList]);
 
   const filteredMedia = useMemo(() => {
     return mediaList.filter(media => {
       if (selectedGenre && !media.genres?.includes(selectedGenre)) return false;
       if (selectedStudio && !media.studios?.includes(selectedStudio)) return false;
+      if (selectedPlatform && !media.platforms?.includes(selectedPlatform)) return false;
+      if (selectedDeveloper && !media.developers?.includes(selectedDeveloper)) return false;
+      if (selectedCategory && !media.categories?.includes(selectedCategory)) return false;
       return true;
     });
-  }, [mediaList, selectedGenre, selectedStudio]);
+  }, [mediaList, selectedGenre, selectedStudio, selectedPlatform, selectedDeveloper, selectedCategory]);
 
   // Reset to first page when mediaList or filters change
   useEffect(() => {
@@ -110,7 +119,61 @@ export default function BrowseView({ mediaList, onMediaClick, activeCategory }:
             </DropdownMenuContent>
           </DropdownMenu>
 
-          {(selectedGenre || selectedStudio) && (
+          {/* Platform Filter - Only for Games */}
+          {activeCategory === 'Games' && (
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <button type="button" className={cn("group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50 h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5 font-bold gap-2", selectedPlatform ? "text-[#6d28d9] bg-[#6d28d9]/10" : "text-zinc-600")}>
+                  <Monitor size={16} />
+                  {selectedPlatform || 'Platforms'}
+                </button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="start" className="max-h-[300px] overflow-y-auto">
+                <DropdownMenuItem onClick={() => setSelectedPlatform(null)}>All Platforms</DropdownMenuItem>
+                {allPlatforms.sort().map(platform => (
+                  <DropdownMenuItem key={platform} onClick={() => setSelectedPlatform(platform)}>{platform}</DropdownMenuItem>
+                ))}
+              </DropdownMenuContent>
+            </DropdownMenu>
+          )}
+
+          {/* Developer Filter - Only for Games */}
+          {activeCategory === 'Games' && (
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <button type="button" className={cn("group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50 h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5 font-bold gap-2", selectedDeveloper ? "text-[#6d28d9] bg-[#6d28d9]/10" : "text-zinc-600")}>
+                  <Users size={16} />
+                  {selectedDeveloper || 'Developers'}
+                </button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="start" className="max-h-[300px] overflow-y-auto">
+                <DropdownMenuItem onClick={() => setSelectedDeveloper(null)}>All Developers</DropdownMenuItem>
+                {allDevelopers.sort().map(developer => (
+                  <DropdownMenuItem key={developer} onClick={() => setSelectedDeveloper(developer)}>{developer}</DropdownMenuItem>
+                ))}
+              </DropdownMenuContent>
+            </DropdownMenu>
+          )}
+
+          {/* Category Filter - Only for Games */}
+          {activeCategory === 'Games' && (
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <button type="button" className={cn("group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50 h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5 font-bold gap-2", selectedCategory ? "text-[#6d28d9] bg-[#6d28d9]/10" : "text-zinc-600")}>
+                  <FolderTree size={16} />
+                  {selectedCategory || 'Categories'}
+                </button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="start" className="max-h-[300px] overflow-y-auto">
+                <DropdownMenuItem onClick={() => setSelectedCategory(null)}>All Categories</DropdownMenuItem>
+                {allCategories.sort().map(category => (
+                  <DropdownMenuItem key={category} onClick={() => setSelectedCategory(category)}>{category}</DropdownMenuItem>
+                ))}
+              </DropdownMenuContent>
+            </DropdownMenu>
+          )}
+
+          {(selectedGenre || selectedStudio || selectedPlatform || selectedDeveloper || selectedCategory) && (
             <Button 
               variant="link" 
               size="sm" 
@@ -118,6 +181,9 @@ export default function BrowseView({ mediaList, onMediaClick, activeCategory }:
               onClick={() => {
                 setSelectedGenre(null);
                 setSelectedStudio(null);
+                setSelectedPlatform(null);
+                setSelectedDeveloper(null);
+                setSelectedCategory(null);
               }}
             >
               Clear Filters