feat: add festival links to header

chiptus · chiptus · commit 7e61fe11e20b · 2025-10-14T04:47:25.000+03:00
diff --git a/src/components/layout/AppHeader.tsx b/src/components/layout/AppHeader.tsx
@@ -16,29 +16,29 @@ interface AppHeaderProps {
 
   // Navigation options
   showGroupsButton?: boolean;
+
+  // External links
+  websiteUrl?: string;
+  ticketsUrl?: string;
 }
 
 export function AppHeader({
   showBackButton = false,
   backLabel = "Back",
   title,
-
   logoUrl,
-
   showGroupsButton = false,
+  websiteUrl,
+  ticketsUrl,
 }: AppHeaderProps) {
-  // Track visibility of logo specifically for festival context in top bar
   const titleRef = useRef<HTMLDivElement | null>(null);
   const logoRef = useRef<HTMLElement | null>(null);
 
-  // Use logo visibility with top bar offset - trigger when logo hits the top bar
-  const isLogoVisible = useScrollVisibility(logoRef, {
-    rootMargin: "-80px 0px 0px 0px", // Negative top margin = trigger when logo is 80px from top (behind top bar)
+  const shouldShowFestivalIcon = useShouldShowIconInTitle({
+    logoRef,
+    titleRef,
+    logoUrl,
   });
-  const isTitleVisible = useScrollVisibility(titleRef, {
-    rootMargin: "-80px 0px 0px 0px", // Same offset for consistency
-  });
-  const shouldShowFestivalIcon = logoUrl ? !isLogoVisible : !isTitleVisible;
 
   const handleLogoRefChange = useCallback((node: HTMLElement | null) => {
     logoRef.current = node;
@@ -60,13 +60,36 @@ export function AppHeader({
         </TopBar>
 
         <div ref={titleRef}>
-          <TitleSection
-            title={title}
-            logoUrl={logoUrl}
-            onLogoRefChange={handleLogoRefChange}
-          />
+          {title && (
+            <TitleSection
+              title={title}
+              logoUrl={logoUrl}
+              onLogoRefChange={handleLogoRefChange}
+              websiteUrl={websiteUrl}
+              ticketsUrl={ticketsUrl}
+            />
+          )}
         </div>
       </div>
     </TooltipProvider>
   );
 }
+function useShouldShowIconInTitle({
+  logoRef,
+  logoUrl,
+  titleRef,
+}: {
+  logoRef: React.RefObject<Element>;
+  titleRef: React.RefObject<Element>;
+  logoUrl: string | null | undefined;
+}) {
+  const isLogoVisible = useScrollVisibility(logoRef, {
+    rootMargin: "-80px 0px 0px 0px", // Negative top margin = trigger when logo is 80px from top (behind top bar)
+  });
+
+  const isTitleVisible = useScrollVisibility(titleRef, {
+    rootMargin: "-80px 0px 0px 0px", // Same offset for consistency
+  });
+
+  return logoUrl ? !isLogoVisible : !isTitleVisible;
+}
diff --git a/src/components/layout/AppHeader/TitleSection.tsx b/src/components/layout/AppHeader/TitleSection.tsx
@@ -1,23 +1,26 @@
 import { forwardRef, useCallback } from "react";
-import { Music, Heart } from "lucide-react";
+import { Music, Heart, TicketIcon, ExternalLinkIcon } from "lucide-react";
+import { Button } from "@/components/ui/button";
 
 interface TitleSectionProps {
-  title?: string;
+  title: string;
   logoUrl?: string | null;
   onLogoRefChange?: (ref: HTMLElement | null) => void;
+  websiteUrl?: string;
+  ticketsUrl?: string;
 }
 
 export const TitleSection = forwardRef<HTMLDivElement, TitleSectionProps>(
-  ({ title, logoUrl, onLogoRefChange }, ref) => {
+  ({ title, logoUrl, onLogoRefChange, ticketsUrl, websiteUrl }, ref) => {
+    const hasLinks = !!(ticketsUrl || websiteUrl);
+
     const logoRefCallback = useCallback(
       (node: HTMLImageElement | null) => {
         onLogoRefChange?.(node);
       },
       [onLogoRefChange],
     );
 
-    if (!title) return null;
-
     return (
       <div
         ref={ref}
@@ -33,14 +36,43 @@ export const TitleSection = forwardRef<HTMLDivElement, TitleSectionProps>(
             />
           ) : (
             <>
-              <Music className="h-6 md:h-8 w-6 md:w-8 text-purple-400 animate-pulse md:block hidden" />
-              <h2 className="text-2xl md:text-3xl lg:text-4xl font-bold text-white tracking-tight hidden md:block">
+              <Music className="h-6 md:h-8 w-6 md:w-8 text-purple-400 animate-pulse" />
+              <h2 className="text-2xl md:text-3xl lg:text-4xl font-bold text-white tracking-tight">
                 {title}
               </h2>
-              <Heart className="h-6 md:h-8 w-6 md:w-8 text-pink-400 animate-pulse md:block hidden" />
+              <Heart className="h-6 md:h-8 w-6 md:w-8 text-pink-400 animate-pulse" />
             </>
           )}
         </div>
+
+        {hasLinks && (
+          <div className="flex gap-3 justify-center">
+            {ticketsUrl && (
+              <Button
+                size="sm"
+                asChild
+                className="gap-2 bg-white/10 backdrop-blur-sm border border-white/20 hover:bg-white/20 hover:border-white/30 text-white font-semibold transition-all"
+              >
+                <a href={ticketsUrl} target="_blank" rel="noopener noreferrer">
+                  <TicketIcon className="h-5 w-5" />
+                  Tickets
+                </a>
+              </Button>
+            )}
+            {websiteUrl && (
+              <Button
+                size="sm"
+                asChild
+                className="gap-2 bg-white/10 backdrop-blur-sm border border-white/20 hover:bg-white/20 hover:border-white/30 text-white font-semibold transition-all"
+              >
+                <a href={websiteUrl} target="_blank" rel="noopener noreferrer">
+                  <ExternalLinkIcon className="h-4 w-4" />
+                  Website
+                </a>
+              </Button>
+            )}
+          </div>
+        )}
       </div>
     );
   },
diff --git a/src/integrations/supabase/types.ts b/src/integrations/supabase/types.ts
@@ -210,6 +210,7 @@ export type Database = {
           display_order: number | null;
           festival_id: string;
           id: string;
+          link_type: Database["public"]["Enums"]["link_type"];
           title: string;
           updated_at: string | null;
           url: string;
@@ -219,6 +220,7 @@ export type Database = {
           display_order?: number | null;
           festival_id: string;
           id?: string;
+          link_type?: Database["public"]["Enums"]["link_type"];
           title: string;
           updated_at?: string | null;
           url: string;
@@ -228,6 +230,7 @@ export type Database = {
           display_order?: number | null;
           festival_id?: string;
           id?: string;
+          link_type?: Database["public"]["Enums"]["link_type"];
           title?: string;
           updated_at?: string | null;
           url?: string;
@@ -642,7 +645,6 @@ export type Database = {
           playlist_title: string | null;
           playlist_url: string | null;
           soundcloud_id: number | null;
-          soundcloud_url: string;
           updated_at: string | null;
           username: string | null;
         };
@@ -656,7 +658,6 @@ export type Database = {
           playlist_title?: string | null;
           playlist_url?: string | null;
           soundcloud_id?: number | null;
-          soundcloud_url: string;
           updated_at?: string | null;
           username?: string | null;
         };
@@ -670,7 +671,6 @@ export type Database = {
           playlist_title?: string | null;
           playlist_url?: string | null;
           soundcloud_id?: number | null;
-          soundcloud_url?: string;
           updated_at?: string | null;
           username?: string | null;
         };
@@ -798,9 +798,9 @@ export type Database = {
       use_invite_token: {
         Args: { token: string; user_id: string };
         Returns: {
-          success: boolean;
-          message: string;
           group_id: string;
+          message: string;
+          success: boolean;
         }[];
       };
       users_share_group: {
@@ -810,9 +810,9 @@ export type Database = {
       validate_invite_token: {
         Args: { token: string };
         Returns: {
-          invite_id: string;
           group_id: string;
           group_name: string;
+          invite_id: string;
           is_valid: boolean;
           reason: string;
         }[];
@@ -824,6 +824,7 @@ export type Database = {
     };
     Enums: {
       admin_role: "super_admin" | "admin" | "moderator";
+      link_type: "website" | "tickets" | "custom";
     };
     CompositeTypes: {
       [_ in never]: never;
@@ -958,6 +959,7 @@ export const Constants = {
   public: {
     Enums: {
       admin_role: ["super_admin", "admin", "moderator"],
+      link_type: ["website", "tickets", "custom"],
     },
   },
 } as const;
diff --git a/src/pages/EditionView/EditionLayout.tsx b/src/pages/EditionView/EditionLayout.tsx
@@ -3,9 +3,11 @@ import { MainTabNavigation } from "./TabNavigation/TabNavigation";
 import ErrorBoundary from "@/components/ErrorBoundary";
 import { useFestivalEdition } from "@/contexts/FestivalEditionContext";
 import { Outlet } from "react-router-dom";
+import { useCustomLinksQuery } from "@/hooks/queries/custom-links/useCustomLinks";
 
 export default function EditionView() {
   const { festival, edition, isContextReady } = useFestivalEdition();
+  const customLinksQuery = useCustomLinksQuery(festival?.id);
 
   if (!isContextReady) {
     return (
@@ -23,13 +25,23 @@ export default function EditionView() {
     );
   }
 
+  const customLinks = customLinksQuery.data || [];
+  const websiteUrl = customLinks.find(
+    (link) => link.link_type === "website",
+  )?.url;
+  const ticketsUrl = customLinks.find(
+    (link) => link.link_type === "tickets",
+  )?.url;
+  console.log(customLinks);
   return (
     <div className="min-h-screen bg-app-gradient">
       <div className="container mx-auto px-4 py-4 md:py-8 pb-20 md:pb-8">
         <AppHeader
-          title={festival.name}
+          title={`${festival.name} - ${edition.name}`}
           logoUrl={festival.logo_url}
           showGroupsButton
+          websiteUrl={websiteUrl}
+          ticketsUrl={ticketsUrl}
         />
 
         <MainTabNavigation />
diff --git a/src/pages/FestivalSelection.tsx b/src/pages/FestivalSelection.tsx
@@ -97,7 +97,9 @@ export default function FestivalSelection() {
 
 function FestivalCard({ festival }: { festival: Festival }) {
   const customLinksQuery = useCustomLinksQuery(festival.id);
-  const websiteUrl = customLinksQuery.data?.[0]?.url;
+  const websiteUrl = customLinksQuery.data?.find(
+    (link) => link.link_type === "website",
+  )?.url;
 
   return (
     <Link
diff --git a/supabase/migrations/20251013000000_add_custom_links_type.sql b/supabase/migrations/20251013000000_add_custom_links_type.sql
@@ -0,0 +1,23 @@
+-- Add link_type enum to custom_links table for type-safe link classification
+
+-- Create enum type for link types
+CREATE TYPE link_type AS ENUM ('website', 'tickets', 'custom');
+
+-- Add link_type column with default 'custom' for backward compatibility
+ALTER TABLE public.custom_links
+ADD COLUMN link_type link_type NOT NULL DEFAULT 'custom';
+
+-- Update existing links based on title
+UPDATE public.custom_links
+SET link_type = 'website'
+WHERE LOWER(title) = 'website';
+
+UPDATE public.custom_links
+SET link_type = 'tickets'
+WHERE LOWER(title) IN ('tickets', 'ticket', 'buy tickets');
+
+-- Create index for performance on link_type queries
+CREATE INDEX idx_custom_links_link_type ON public.custom_links(festival_id, link_type);
+
+-- Add comment for documentation
+COMMENT ON COLUMN public.custom_links.link_type IS 'Type of link: website (main festival site), tickets (ticket sales), or custom (user-defined)';
