fix(offline): make the app a pwa (#16)

* feat(voting): remove offline voting

* feat(notes): remove offline notes

* feat(offline): remove offline

* fix(offline): cache data and pages

* chore(deps): remove unused packages

* chore(deps): remove pnpm-lock

* fix(sets): is multi artist for single artist

* fix(set): show social links for single artist

* feat(github): add rules for function hoisting

Author: chiptus

.claude/settings.local.json

@@ -16,7 +16,10 @@
       "mcp__ide__getDiagnostics",
       "Bash(git checkout:*)",
       "Bash(mkdir:*)",
-      "Bash(npx oxlint:*)"
+      "Bash(npx oxlint:*)",
+      "WebSearch",
+      "WebFetch(domain:tanstack.com)",
+      "Bash(node:*)"
     ],
     "deny": []
   }

.github/copilot-instructions.md

@@ -0,0 +1,7 @@
+# Copilot Custom Instructions
+
+see CLAUDE.md for more details and rules.
+
+## Function Definitions After Return in React Components
+
+In this codebase, it is acceptable and preferred to define helper functions (such as event handlers) after the main component’s return statement. This style improves readability by keeping the primary component logic at the top and allowing additional details to be found below. JavaScript and TypeScript support function hoisting for function declarations, so this pattern is safe and intentional. Please do not flag this as a style issue in reviews.

.gitignore

@@ -35,3 +35,4 @@ tests/screenshots/
 supabase/.temp
 supabase/.branches
 .vercel
+dev-dist

CLAUDE.md

@@ -114,6 +114,10 @@ src/
 - **Forms**: ALL forms must use react-hook-form with proper validation. Never use plain HTML forms or manual state management for form inputs. Use @hookform/resolvers for validation schemas when needed.
 - **Long Components**: Break long components (>150 lines) into smaller focused pieces. Follow the FilterSortControls pattern of primary controls + expandable sections.
 
+#### Function Definitions After Return in React Components
+
+In this codebase, it is acceptable and preferred to define helper functions (such as event handlers) after the main component’s return statement. This style improves readability by keeping the primary component logic at the top and allowing additional details to be found below. JavaScript and TypeScript support function hoisting for function declarations, so this pattern is safe and intentional. Please do not flag this as a style issue in reviews.
+
 ### Important Notes
 
 - Server runs on port 8080 (not standard 3000)

package-lock.json

@@ -55,8 +55,10 @@
     "@radix-ui/react-tooltip": "^1.1.4",
     "@supabase/supabase-js": "^2.50.0",
     "@tailwindcss/line-clamp": "^0.4.4",
+    "@tanstack/query-async-storage-persister": "^5.86.0",
     "@tanstack/react-query": "^5.56.2",
     "@tanstack/react-query-devtools": "^5.81.2",
+    "@tanstack/react-query-persist-client": "^5.85.9",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "^1.0.0",

package.json

@@ -3,6 +3,7 @@ import { Toaster as Sonner } from "@/components/ui/sonner";
 import { TooltipProvider } from "@/components/ui/tooltip";
 import { BrowserRouter } from "react-router-dom";
 import { CookieConsentBanner } from "@/components/layout/legal/CookieConsentBanner";
+import { OfflineIndicator } from "@/components/ui/OfflineIndicator";
 import {
   getSubdomainInfo,
   shouldRedirectFromWww,
@@ -40,6 +41,7 @@ function App() {
           </FestivalEditionProvider>
         </AuthProvider>
       </BrowserRouter>
+      <OfflineIndicator />
     </TooltipProvider>
   );
 }

src/App.tsx

@@ -8,7 +8,7 @@ import { MapTab } from "@/pages/EditionView/tabs/MapTab";
 import { InfoTab } from "@/pages/EditionView/tabs/InfoTab";
 import { SocialTab } from "@/pages/EditionView/tabs/SocialTab";
 import { ScheduleTabTimeline } from "@/pages/EditionView/tabs/ScheduleTab/TimelineTab";
-import { ScheduleTabList } from "@/pages/EditionView/tabs/ScheduleTab/ListTab";
+import { ScheduleTabList } from "@/pages/EditionView/tabs/ScheduleTab/list/ListTab";
 import { ScheduleTab } from "@/pages/EditionView/tabs/ScheduleTab";
 
 interface EditionRoutesProps {

src/components/router/EditionRoutes.tsx

@@ -0,0 +1,16 @@
+import { useOnlineStatus } from "@/hooks/useOnlineStatus";
+import { Badge } from "@/components/ui/badge";
+import { WifiOff } from "lucide-react";
+
+export function OfflineIndicator() {
+  const isOnline = useOnlineStatus();
+
+  if (isOnline) return null;
+
+  return (
+    <Badge variant="destructive" className="fixed top-4 right-4 z-50 gap-1">
+      <WifiOff size={12} />
+      Offline
+    </Badge>
+  );
+}

src/components/ui/OfflineIndicator.tsx

@@ -9,7 +9,6 @@ import {
 import { User } from "@supabase/supabase-js";
 import { supabase } from "@/integrations/supabase/client";
 import { useProfileQuery } from "@/hooks/queries/auth/useProfile";
-import { profileOfflineService } from "@/services/profileOfflineService";
 import { useToast } from "@/hooks/use-toast";
 import { AuthDialog } from "@/components/AuthDialog/AuthDialog";
 import { Profile } from "@/hooks/queries/auth/useProfile";
@@ -60,7 +59,7 @@ export function AuthProvider({ children }: AuthProviderProps) {
       if (event === "SIGNED_OUT") {
         // For sign out, use the current user state from closure
         if (user?.id) {
-          await profileOfflineService.clearCachedProfile(user.id);
+          // await profileOfflineService.clearCachedProfile(user.id);
         }
       }
 
@@ -127,7 +126,7 @@ export function AuthProvider({ children }: AuthProviderProps) {
   async function signOut() {
     // Clear cached profile before signing out
     if (user?.id) {
-      await profileOfflineService.clearCachedProfile(user.id);
+      // await profileOfflineService.clearCachedProfile(user.id);
     }
     await supabase.auth.signOut();
   }