refactor(app): use top bar instead of app header

Author: chiptus

src/components/layout/AppFooter.tsx

@@ -2,13 +2,11 @@ import { useState } from "react";
 import { Link } from "react-router-dom";
 import { Button } from "@/components/ui/button";
 import { Separator } from "@/components/ui/separator";
-import { PrivacyPolicyModal } from "./legal/PrivacyPolicyModal";
 import { Settings } from "lucide-react";
 import { useCookieConsent } from "@/hooks/useCookieConsent";
 import { CookiePreferencesDialog } from "./legal/CookiePreferencesDialog";
 
 export function AppFooter() {
-  const [showPrivacyModal, setShowPrivacyModal] = useState(false);
   const [showCookiePreferences, setShowCookiePreferences] = useState(false);
   const { revokeConsent } = useCookieConsent();
 
@@ -33,12 +31,12 @@ export function AppFooter() {
             <div className="space-y-4">
               <h4 className="font-medium">Legal</h4>
               <div className="flex flex-col space-y-2 text-sm">
-                <button
-                  onClick={() => setShowPrivacyModal(true)}
+                <Link
+                  to="/privacy"
                   className="text-left hover:text-primary transition-colors"
                 >
                   Privacy Policy
-                </button>
+                </Link>
                 <Link
                   to="/terms"
                   className="hover:text-primary transition-colors"
@@ -86,21 +84,16 @@ export function AppFooter() {
             <p className="mt-2 sm:mt-0">
               Questions? Contact us at{" "}
               <a
-                href="mailto:[email protected]"
+                href="mailto:[email protected]"
                 className="hover:text-primary transition-colors"
               >
-                [email protected]
+                [email protected]
               </a>
             </p>
           </div>
         </div>
       </footer>
 
-      <PrivacyPolicyModal
-        open={showPrivacyModal}
-        onOpenChange={setShowPrivacyModal}
-      />
-
       <CookiePreferencesDialog
         open={showCookiePreferences}
         onOpenChange={setShowCookiePreferences}

src/components/layout/AppHeader.tsx

@@ -1,7 +1,7 @@
 import { useRef, useCallback } from "react";
 import { TooltipProvider } from "@/components/ui/tooltip";
 import { useScrollVisibility } from "@/hooks/useScrollVisibility";
-import { TopBar } from "./AppHeader/TopBar";
+import { TopBar } from "./TopBar";
 import { TitleSection } from "./AppHeader/TitleSection";
 
 interface AppHeaderProps {
@@ -55,7 +55,7 @@ export function AppHeader({
           title={title}
         />
 
-        <div className="pt-16 md:pt-20" ref={titleRef}>
+        <div ref={titleRef}>
           <TitleSection
             title={title}
             logoUrl={logoUrl}

src/components/layout/AppHeader/TopBar.tsx

@@ -0,0 +1,49 @@
+import { useIsMobile } from "@/hooks/use-mobile";
+import { AppBranding } from "./AppHeader/AppBranding";
+import { FestivalIndicator } from "./AppHeader/FestivalIndicator";
+import { UserActions } from "./AppHeader/UserActions";
+
+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) {
+  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}
+        />
+
+        <UserActions
+          showBackButton={showBackButton}
+          backLabel={backLabel}
+          showGroupsButton={showGroupsButton}
+          isMobile={isMobile}
+        />
+      </div>
+      <div className="h-16 md:h-20" /> {/* Spacer to offset fixed top bar */}
+    </>
+  );
+}

src/components/layout/TopBar.tsx

@@ -30,8 +30,6 @@ export default function EditionView() {
       <div className="container mx-auto px-4 py-4 md:py-8 pb-20 md:pb-8">
         <AppHeader
           title={festival.name}
-          // subtitle={edition.name}
-          // description="Festival voting platform"
           logoUrl={festival.logo_url}
           showGroupsButton
         />