feat(sets): multiple artists in sets view

src/components/Index/FestivalSetContext.tsx

@@ -0,0 +1,90 @@
+import { createContext, useContext, ReactNode, useMemo } from "react";
+import { FestivalSet } from "@/services/queries";
+
+interface FestivalSetContextValue {
+  set: FestivalSet;
+  userVote?: number;
+  userKnowledge?: boolean;
+  votingLoading?: boolean;
+  onVote: (
+    setId: string,
+    voteType: number,
+  ) => Promise<{ requiresAuth: boolean }>;
+  onKnowledgeToggle: (setId: string) => Promise<{ requiresAuth: boolean }>;
+  onAuthRequired: () => void;
+  use24Hour?: boolean;
+
+  // Computed helpers
+  isMultiArtist: boolean;
+  getVoteCount: (voteType: number) => number;
+}
+
+const FestivalSetContext = createContext<FestivalSetContextValue | null>(null);
+
+interface FestivalSetProviderProps {
+  children: ReactNode;
+  set: FestivalSet;
+  userVote?: number;
+  userKnowledge?: boolean;
+  votingLoading?: boolean;
+  onVote: (
+    setId: string,
+    voteType: number,
+  ) => Promise<{ requiresAuth: boolean }>;
+  onKnowledgeToggle: (setId: string) => Promise<{ requiresAuth: boolean }>;
+  onAuthRequired: () => void;
+  use24Hour?: boolean;
+}
+
+export function FestivalSetProvider({
+  children,
+  set,
+  userVote,
+  userKnowledge,
+  votingLoading,
+  onVote,
+  onKnowledgeToggle,
+  onAuthRequired,
+  use24Hour = false,
+}: FestivalSetProviderProps) {
+  const isMultiArtist = set.artists.length > 1;
+
+  const voteCounts = useMemo(() => {
+    const counts: Record<number, number> = {};
+    for (const vc of set.votes) {
+      counts[vc.vote_type] = (counts[vc.vote_type] || 0) + 1;
+    }
+    return counts;
+  }, [set.votes]);
+
+  function getVoteCount(voteType: number) {
+    return voteCounts[voteType] || 0;
+  }
+
+  const contextValue: FestivalSetContextValue = {
+    set,
+    userVote,
+    userKnowledge,
+    votingLoading,
+    onVote,
+    onKnowledgeToggle,
+    onAuthRequired,
+    use24Hour,
+    isMultiArtist,
+    getVoteCount,
+  };
+
+  return (
+    <FestivalSetContext.Provider value={contextValue}>
+      {children}
+    </FestivalSetContext.Provider>
+  );
+}
+
+export function useFestivalSet() {
+  const context = useContext(FestivalSetContext);
+  if (!context) {
+    throw new Error("useFestivalSet must be used within a FestivalSetProvider");
+  }
+  return context;
+}

src/components/Index/GenreBadge.tsx

@@ -3,9 +3,10 @@ import { useGenres } from "@/hooks/queries/useGenresQuery";
 
 interface GenreBadgeProps {
   genreId: string;
+  size?: "default" | "sm";
 }
 
-export function GenreBadge({ genreId }: GenreBadgeProps) {
+export function GenreBadge({ genreId, size = "default" }: GenreBadgeProps) {
   const { genres, loading, error } = useGenres();
 
   if (loading || error) return null;
@@ -16,7 +17,9 @@ export function GenreBadge({ genreId }: GenreBadgeProps) {
   return (
     <Badge
       variant="secondary"
-      className="bg-purple-600/50 text-purple-100 mb-2"
+      className={`bg-purple-600/50 text-purple-100 ${
+        size === "sm" ? "text-xs px-2 py-1" : ""
+      }`}
     >
       {genre.name}
     </Badge>

src/components/Index/MultiArtistSetCard.tsx

@@ -0,0 +1,30 @@
+import { Card, CardContent, CardHeader } from "@/components/ui/card";
+import { SetHeader } from "./shared/SetHeader";
+import { SetImage } from "./shared/SetImage";
+import { SetMetadata } from "./shared/SetMetadata";
+import { SetDescription } from "./shared/SetDescription";
+import { SetVotingButtons } from "./shared/SetVotingButtons";
+
+export function MultiArtistSetCard() {
+  return (
+    <Card className="bg-white/10 backdrop-blur-md border-purple-400/30 hover:bg-white/15 transition-all duration-300 overflow-hidden">
+      <CardHeader className="pb-4">
+        {/* Set Image with Mixed Artists */}
+        <SetImage />
+
+        <div className="flex items-start justify-between">
+          <div className="flex-1">
+            <SetHeader />
+            <SetMetadata />
+          </div>
+        </div>
+
+        <SetDescription />
+      </CardHeader>
+
+      <CardContent>
+        <SetVotingButtons />
+      </CardContent>
+    </Card>
+  );
+}

src/components/Index/MultiArtistSetListItem.tsx

@@ -0,0 +1,50 @@
+import { SetHeader } from "./shared/SetHeader";
+import { SetImage } from "./shared/SetImage";
+import { SetMetadata } from "./shared/SetMetadata";
+import { SetDescription } from "./shared/SetDescription";
+import { SetVotingButtons } from "./shared/SetVotingButtons";
+
+export function MultiArtistSetListItem() {
+  return (
+    <div
+      className="bg-white/10 backdrop-blur-md border-purple-400/30 hover:bg-white/15 transition-all duration-300 rounded-lg p-4"
+      data-testid="artist-item"
+    >
+      {/* Mobile Layout (sm and below) */}
+      <div className="block md:hidden space-y-3">
+        <div className="flex items-start gap-3 relative">
+          <SetImage size="sm" />
+          <div className="flex-1 min-w-0">
+            <SetHeader size="sm" />
+            <SetMetadata />
+          </div>
+        </div>
+
+        <SetDescription className="text-purple-200 text-sm" />
+
+        <SetVotingButtons size="sm" layout="horizontal" />
+      </div>
+
+      {/* Desktop Layout (md and above) */}
+      <div className="hidden md:flex items-center gap-4 relative">
+        <SetImage size="md" />
+
+        <div className="flex-1 min-w-0">
+          <div className="flex items-start justify-between mb-2">
+            <div className="flex-1 min-w-0">
+              <SetHeader size="sm" />
+
+              <SetMetadata />
+            </div>
+          </div>
+
+          <SetDescription className="text-purple-200 text-sm mb-2" />
+        </div>
+
+        <div className="flex items-center gap-2 flex-shrink-0">
+          <SetVotingButtons size="sm" layout="horizontal" />
+        </div>
+      </div>
+    </div>
+  );
+}