refactor: replace AppHeader with TopBar in various components and introduce FestivalIndicator for better context handling

Author: chiptus

src/components/layout/AppHeader.tsx

@@ -3,6 +3,7 @@ import { TooltipProvider } from "@/components/ui/tooltip";
 import { useScrollVisibility } from "@/hooks/useScrollVisibility";
 import { TopBar } from "./TopBar";
 import { TitleSection } from "./AppHeader/TitleSection";
+import { FestivalIndicator } from "./AppHeader/FestivalIndicator";
 
 interface AppHeaderProps {
   // Navigation
@@ -50,10 +51,13 @@ export function AppHeader({
           showBackButton={showBackButton}
           backLabel={backLabel}
           showGroupsButton={showGroupsButton}
-          isTitleVisible={!shouldShowFestivalIcon}
-          logoUrl={logoUrl}
-          title={title}
-        />
+        >
+          <FestivalIndicator
+            isTitleVisible={!shouldShowFestivalIcon}
+            logoUrl={logoUrl}
+            title={title}
+          />
+        </TopBar>
 
         <div ref={titleRef}>
           <TitleSection

src/components/layout/AppHeader/FestivalIndicator.tsx

@@ -1,7 +1,7 @@
 import { useFestivalEdition } from "@/contexts/FestivalEditionContext";
 
 interface FestivalIndicatorProps {
-  isTitleVisible: boolean;
+  isTitleVisible?: boolean;
   logoUrl?: string | null;
   title?: string;
 }

src/components/layout/TopBar.tsx

@@ -1,40 +1,29 @@
 import { useIsMobile } from "@/hooks/use-mobile";
 import { AppBranding } from "./AppHeader/AppBranding";
-import { FestivalIndicator } from "./AppHeader/FestivalIndicator";
 import { UserActions } from "./AppHeader/UserActions";
+import { PropsWithChildren } from "react";
 
 interface TopBarProps {
   showBackButton?: boolean;
   backLabel?: string;
   showGroupsButton?: boolean;
-
-  // Festival context
-  isTitleVisible?: boolean;
-  logoUrl?: string | null;
-  title?: string;
 }
 
 export function TopBar({
   showBackButton = false,
   backLabel = "Back",
   showGroupsButton = false,
 
-  isTitleVisible = false,
-  logoUrl,
-  title,
-}: TopBarProps) {
+  children,
+}: PropsWithChildren<TopBarProps>) {
   const isMobile = useIsMobile();
 
   return (
     <>
       <div className="fixed top-0 left-0 right-0 z-50 backdrop-blur-md border-b border-purple-400/20 flex items-center px-4 py-3 md:py-4">
         <AppBranding isMobile={isMobile} />
 
-        <FestivalIndicator
-          isTitleVisible={isTitleVisible}
-          logoUrl={logoUrl}
-          title={title}
-        />
+        {children}
 
         <UserActions
           showBackButton={showBackButton}

src/components/router/EditionRoutes.tsx

@@ -1,5 +1,5 @@
 import { Navigate, Route } from "react-router-dom";
-import EditionView from "@/pages/EditionView/EditionView";
+import EditionLayout from "@/pages/EditionView/EditionLayout";
 import { SetDetails } from "@/pages/SetDetails";
 import { ExploreSetPage } from "@/pages/ExploreSetPage/ExploreSetPage";
 
@@ -22,8 +22,8 @@ export function createEditionRoutes({
   WrapperComponent,
 }: EditionRoutesProps) {
   const EditionComponent = WrapperComponent
-    ? () => <WrapperComponent component={EditionView} />
-    : EditionView;
+    ? () => <WrapperComponent component={EditionLayout} />
+    : EditionLayout;
 
   const SetDetailsComponent = WrapperComponent
     ? () => <WrapperComponent component={SetDetails} />

src/contexts/FestivalEditionContext.tsx

@@ -11,7 +11,7 @@ import { Festival } from "@/hooks/queries/festivals/types";
 import { useFestivalEditionBySlugQuery } from "@/hooks/queries/festivals/editions/useFestivalEditionBySlug";
 import { FestivalEdition } from "@/hooks/queries/festivals/editions/types";
 import { getSubdomainInfo } from "@/lib/subdomain";
-import { AppHeader } from "@/components/layout/AppHeader";
+import { TopBar } from "@/components/layout/TopBar";
 import { useToast } from "@/hooks/use-toast";
 
 interface FestivalEditionContextType {
@@ -170,10 +170,10 @@ export function FestivalEditionProvider({
       <FestivalEditionContext.Provider value={contextValue}>
         <div className="min-h-screen bg-app-gradient">
           <div className="container mx-auto px-4 py-8">
-            <AppHeader
-              backLabel="Back to Festivals"
-              title="Festival not found"
-            />
+            <TopBar backLabel="Back to Festivals" />
+            <h1 className="text-4xl font-bold text-white text-center mb-8">
+              No valid festival or edition found
+            </h1>
             <Navigate to="/" />
           </div>
         </div>

src/pages/EditionSelection.tsx

@@ -15,6 +15,7 @@ import { useFestivalEditionsForFestivalQuery } from "@/hooks/queries/festivals/e
 import { FestivalEdition } from "@/hooks/queries/festivals/editions/types";
 import { useEffect } from "react";
 import { getSubdomainInfo } from "@/lib/subdomain";
+import { TopBar } from "@/components/layout/TopBar";
 
 export default function EditionSelection() {
   const { festival } = useFestivalEdition();
@@ -80,11 +81,10 @@ export default function EditionSelection() {
     return (
       <div className="min-h-screen bg-app-gradient">
         <div className="container mx-auto px-4 py-8">
-          <AppHeader
-            showBackButton
-            backLabel="Back to Festivals"
-            title={festival.name}
-          />
+          <TopBar showBackButton backLabel="Back to Festivals" />
+          <h1 className="text-4xl font-bold text-white text-center mb-8">
+            {festival.name}
+          </h1>
 
           <div className="flex items-center justify-center mt-16">
             <Card className="w-full max-w-md bg-white/10 border-purple-400/30">
@@ -144,6 +144,8 @@ export default function EditionSelection() {
           showBackButton
           backLabel="Back to Festivals"
           title={festival.name}
+          logoUrl={festival.logo_url}
+          showGroupsButton
         />
 
         <div className="mt-12 grid gap-6 md:grid-cols-2 lg:grid-cols-3">

src/pages/EditionView/EditionView.tsx src/pages/EditionView/EditionLayout.tsxsrc/pages/EditionView/EditionView.tsx renamed to src/pages/EditionView/EditionLayout.tsx

@@ -5,10 +5,8 @@ import { useFestivalEdition } from "@/contexts/FestivalEditionContext";
 import { Outlet } from "react-router-dom";
 
 export default function EditionView() {
-  // Get festival/edition context
   const { festival, edition, isContextReady } = useFestivalEdition();
 
-  // Show loading while context is not ready
   if (!isContextReady) {
     return (
       <div className="min-h-screen bg-app-gradient flex items-center justify-center">
@@ -34,7 +32,6 @@ export default function EditionView() {
           showGroupsButton
         />
 
-        {/* Main Tab Navigation */}
         <MainTabNavigation />
 
         <div className="mt-4 md:mt-8">

src/pages/FestivalSelection.tsx

@@ -8,7 +8,6 @@ import {
 } from "@/components/ui/card";
 import { useFestivalsQuery } from "@/hooks/queries/festivals/useFestivals";
 import { Festival } from "@/hooks/queries/festivals/types";
-import { AppHeader } from "@/components/layout/AppHeader";
 import { useEffect } from "react";
 import {
   createFestivalSubdomainUrl,
@@ -17,6 +16,8 @@ import {
 import { Link } from "react-router-dom";
 import { useCustomLinksQuery } from "@/hooks/queries/custom-links/useCustomLinks";
 import { PageTitle } from "@/components/PageTitle/PageTitle";
+import { TopBar } from "@/components/layout/TopBar";
+import { AppHeader } from "@/components/layout/AppHeader";
 
 export default function FestivalSelection() {
   const { data: availableFestivals = [], isLoading: festivalsLoading } =
@@ -52,7 +53,7 @@ export default function FestivalSelection() {
       <div className="min-h-screen bg-app-gradient">
         <div className="container mx-auto px-4 py-8">
           <PageTitle title="Select Festival" />
-          <AppHeader title="UpLine" />
+          <TopBar />
 
           <div className="flex items-center justify-center mt-16">
             <Card className="w-full max-w-md bg-white/10 border-purple-400/30">

src/pages/SetDetails.tsx

@@ -14,6 +14,7 @@ import { useAuth } from "@/contexts/AuthContext";
 import { useVoteCount } from "@/hooks/useVoteCount";
 import { PageTitle } from "@/components/PageTitle/PageTitle";
 import { TopBar } from "@/components/layout/TopBar";
+import { FestivalIndicator } from "@/components/layout/AppHeader/FestivalIndicator";
 
 export function SetDetails() {
   const { user } = useAuth();
@@ -47,11 +48,12 @@ export function SetDetails() {
       <PageTitle title={setTitle} prefix={festival?.name} />
       <div className="min-h-screen bg-app-gradient">
         <div className="container mx-auto px-4 py-8">
-          <TopBar
-            showBackButton
-            backLabel="Back to Artists"
-            logoUrl={festival?.logo_url}
-          />
+          <TopBar showBackButton backLabel="Back to Artists" showGroupsButton>
+            <FestivalIndicator
+              title={festival?.name}
+              logoUrl={festival?.logo_url}
+            />
+          </TopBar>
 
           {/* Set Header */}
           {isMultiArtistSet ? (

src/pages/admin/AdminLayout.tsx

@@ -70,11 +70,7 @@ export default function AdminLayout() {
   return (
     <div className="min-h-screen bg-app-gradient">
       <div className="container mx-auto px-4 py-8">
-        <TopBar
-          showBackButton
-          backLabel="Back to app"
-          title="Admin Dashboard"
-        />
+        <TopBar showBackButton backLabel="Back to app" />
 
         <div>
           <Tabs