feat(festivals): add stage order and color (#18)

* wip

* feat: add stage ordering and color coding system

- Add stage_order column and color column to stages table
- Update stage queries to order by stage_order then by name
- Implement stage color coding in timeline components
- Update timeline calculations to use stage ordering
- Apply stage colors to labels and timeline tracks

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <[email protected]>

* feat(admin): add stage order and color management UI

- Add stage_order and color fields to create/update mutations
- Extend StageManagement component with order and color controls
- Add number input for stage ordering with minimum value of 0
- Add color picker with hex input for stage colors
- Display order and color columns in admin stage table
- Show color preview swatches in table rows

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <[email protected]>

* fix(stages): prioritize explicitly ordered stages over default order

- Stages with order > 0 now appear first, sorted by their order value
- Stages with order 0 (default/unordered) appear last, sorted alphabetically
- This ensures main stages and other explicitly ordered stages are prioritized
- Updated sorting logic across all timeline and schedule components

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <[email protected]>

* feat: create reusable StageBadge component with color backgrounds

- Add StageBadge component with stage color as background
- Use stage color with 80% opacity for subtle but visible background
- Apply StageBadge to list view cards (MobileSetCard)
- Apply StageBadge to voting view (SetMetadata in ArtistsTab)
- Remove redundant colored dot since background now uses stage color
- Make badge text white with font-medium for better contrast

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <[email protected]>

* refactor: extract shared stage sorting logic into utility functions

- Create stageUtils.ts with reusable sorting functions
- Add sortStagesByOrder for generic item sorting based on stage data
- Add sortStages for direct stage array sorting
- Replace duplicated sorting logic in useStagesByEdition
- Replace duplicated sorting logic in useScheduleData
- Replace duplicated sorting logic in timelineCalculator (both horizontal and vertical)
- Maintain consistent stage ordering: priority stages (order > 0) first, then default stages (order 0) alphabetically

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <[email protected]>

* refactor(stages): sort

* refactor(timeline): remove vertical timeline calc

* refactor(admin): break stage management components

* fix(stages): update stage

* fix(infra): remove caching for supabase

* refactor(stages): move components

* refactor(stages): move default color to constants

---------

Co-authored-by: Claude <[email protected]>

Author: chiptus

src/components/StageBadge.tsx

@@ -0,0 +1,38 @@
+import { MapPin } from "lucide-react";
+
+interface StageBadgeProps {
+  stageName: string;
+  stageColor?: string;
+  size?: "sm" | "md";
+  showIcon?: boolean;
+}
+
+export function StageBadge({
+  stageName,
+  stageColor,
+  size = "sm",
+  showIcon = true,
+}: StageBadgeProps) {
+  const sizeClasses = {
+    sm: "text-xs px-2 py-1 gap-1",
+    md: "text-sm px-3 py-1.5 gap-2",
+  };
+
+  const iconSize = {
+    sm: "h-3 w-3",
+    md: "h-4 w-4",
+  };
+
+  return (
+    <div
+      className={`inline-flex items-center rounded-full backdrop-blur-sm border text-white font-medium ${sizeClasses[size]}`}
+      style={{
+        backgroundColor: stageColor ? `${stageColor}80` : "#7c3aed80",
+        borderColor: stageColor ? stageColor : "#7c3aed",
+      }}
+    >
+      {showIcon && <MapPin className={iconSize[size]} />}
+      <span>{stageName}</span>
+    </div>
+  );
+}

src/hooks/queries/stages/useCreateStage.ts

@@ -7,6 +7,8 @@ import { generateSlug } from "@/lib/slug";
 async function createStage(stageData: {
   name: string;
   festival_edition_id: string;
+  stage_order?: number;
+  color?: string;
 }) {
   const { data, error } = await supabase
     .from("stages")
@@ -27,8 +29,10 @@ export function useCreateStageMutation() {
 
   return useMutation({
     mutationFn: createStage,
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: stagesKeys.all });
+    onSuccess: async () => {
+      await queryClient.invalidateQueries({
+        queryKey: stagesKeys.all,
+      });
       toast({
         title: "Success",
         description: "Stage created successfully",

src/hooks/queries/stages/useDeleteStage.ts

@@ -18,8 +18,10 @@ export function useDeleteStageMutation() {
 
   return useMutation({
     mutationFn: deleteStage,
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: stagesKeys.all });
+    onSuccess: async () => {
+      await queryClient.invalidateQueries({
+        queryKey: stagesKeys.all,
+      });
       toast({
         title: "Success",
         description: "Stage deleted successfully",

src/hooks/queries/stages/useStagesByEdition.ts

@@ -1,6 +1,7 @@
 import { useQuery } from "@tanstack/react-query";
 import { supabase } from "@/integrations/supabase/client";
 import { Stage, stagesKeys } from "./types";
+import { sortStagesByOrder } from "@/lib/stageUtils";
 
 async function fetchStagesByEdition(editionId: string): Promise<Stage[]> {
   const { data, error } = await supabase
@@ -14,7 +15,8 @@ async function fetchStagesByEdition(editionId: string): Promise<Stage[]> {
     throw new Error("Failed to load stages for edition");
   }
 
-  return data || [];
+  // Apply custom sorting using shared utility
+  return sortStagesByOrder(data || []);
 }
 
 export function useStagesByEditionQuery(editionId: string | undefined) {

src/hooks/queries/stages/useUpdateStage.ts

@@ -3,7 +3,10 @@ import { useToast } from "@/hooks/use-toast";
 import { supabase } from "@/integrations/supabase/client";
 import { stagesKeys } from "./types";
 
-async function updateStage(stageId: string, stageData: { name: string }) {
+async function updateStage(
+  stageId: string,
+  stageData: { name: string; stage_order?: number; color?: string },
+) {
   const { data, error } = await supabase
     .from("stages")
     .update(stageData)
@@ -25,10 +28,12 @@ export function useUpdateStageMutation() {
       stageData,
     }: {
       stageId: string;
-      stageData: { name: string };
+      stageData: { name: string; stage_order?: number; color?: string };
     }) => updateStage(stageId, stageData),
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: stagesKeys.all });
+    onSuccess: async () => {
+      await queryClient.invalidateQueries({
+        queryKey: stagesKeys.all,
+      });
       toast({
         title: "Success",
         description: "Stage updated successfully",

src/hooks/useScheduleData.ts

@@ -3,6 +3,7 @@ import { formatDateTime } from "@/lib/timeUtils";
 import { format, startOfDay } from "date-fns";
 import type { FestivalSet } from "@/hooks/queries/sets/useSets";
 import { Stage } from "./queries/stages/types";
+import { sortStagesByOrder } from "@/lib/stageUtils";
 
 export interface ScheduleDay {
   date: string;
@@ -13,6 +14,7 @@ export interface ScheduleDay {
 export interface ScheduleStage {
   id: string;
   name: string;
+  stage_order: number;
   sets: ScheduleSet[];
 }
 
@@ -127,18 +129,19 @@ export function useScheduleData(
             return {
               id: stageId,
               name: stage?.name,
+              stage_order: stage?.stage_order,
               sets: stageSets.sort((a, b) => {
                 if (!a.startTime || !b.startTime) return 0;
                 return a.startTime.getTime() - b.startTime.getTime();
               }),
-            };
+            } satisfies ScheduleStage;
           })
           .filter((v: ScheduleStage | null): v is ScheduleStage => !!v);
 
         return {
           date: dateKey,
           displayDate: format(date, "EEEE, MMM d"),
-          stages: scheduleStages.sort((a, b) => a.name.localeCompare(b.name)),
+          stages: sortStagesByOrder(scheduleStages),
         };
       });
 

src/integrations/supabase/types.ts

@@ -640,29 +640,35 @@ export type Database = {
       stages: {
         Row: {
           archived: boolean;
+          color: string | null;
           created_at: string;
           festival_edition_id: string;
           id: string;
           name: string;
           slug: string;
+          stage_order: number;
           updated_at: string;
         };
         Insert: {
           archived?: boolean;
+          color?: string | null;
           created_at?: string;
           festival_edition_id: string;
           id?: string;
           name: string;
           slug: string;
+          stage_order?: number;
           updated_at?: string;
         };
         Update: {
           archived?: boolean;
+          color?: string | null;
           created_at?: string;
           festival_edition_id?: string;
           id?: string;
           name?: string;
           slug?: string;
+          stage_order?: number;
           updated_at?: string;
         };
         Relationships: [];

src/lib/constants/stages.ts

@@ -0,0 +1 @@
+export const DEFAULT_STAGE_COLOR = "#6b7280";

src/lib/stageUtils.ts

@@ -0,0 +1,28 @@
+import type { Stage } from "@/hooks/queries/stages/types";
+
+/**
+ * Sorts stages by priority: stages with order > 0 come first (sorted by order),
+ * then stages with order 0 come last (sorted alphabetically by name)
+ */
+export function sortStagesByOrder<
+  T extends Pick<Stage, "stage_order" | "name">,
+>(items: T[]): T[] {
+  return items.sort((stageA, stageB) => {
+    const orderA = stageA.stage_order ?? 0;
+    const orderB = stageB.stage_order ?? 0;
+
+    // Stages with order > 0 come first, sorted by order
+    // Stages with order 0 come last, sorted by name
+    if (orderA > 0 && orderB > 0) {
+      return orderA - orderB;
+    }
+    if (orderA > 0 && orderB === 0) {
+      return -1; // A comes before B
+    }
+    if (orderA === 0 && orderB > 0) {
+      return 1; // B comes before A
+    }
+    // Both are 0, sort by name
+    return stageA.name.localeCompare(stageB.name);
+  });
+}