From d8f0dfb38bd125b9dd34e71c7a4ec8d5d87a12d7 Mon Sep 17 00:00:00 2001
From: tilaplapya <noelmateo126@gmail.com>
Date: Tue, 14 Jul 2026 23:57:17 +0800
Subject: [PATCH 01/22] boom update

---
 app/db.ts                      |   36 +-
 app/globals.css                |  514 ++++++++++-
 app/layout.tsx                 |   31 +-
 app/login/page.tsx             |  198 +++++
 app/page.tsx                   | 1461 +++++++++++++++++++++++---------
 components/AuthGuard.tsx       |   43 +
 components/SpotDetailModal.tsx |  105 ++-
 lib/auth.tsx                   |  147 ++++
 lib/firebase.ts                |   81 ++
 lib/firestore.ts               |  124 +++
 package-lock.json              | 1124 +++++++++++++++++++++---
 package.json                   |    2 +
 12 files changed, 3283 insertions(+), 583 deletions(-)
 create mode 100644 app/login/page.tsx
 create mode 100644 components/AuthGuard.tsx
 create mode 100644 lib/auth.tsx
 create mode 100644 lib/firebase.ts
 create mode 100644 lib/firestore.ts

diff --git a/app/db.ts b/app/db.ts
index ff8deb6..4f75636 100644
--- a/app/db.ts
+++ b/app/db.ts
@@ -13,6 +13,10 @@ export interface FoodSpotLog {
   createdAt: number; // epoch ms
   /** Base64 JPEG data-URL thumbnail for fast list rendering. */
   thumbnail?: string;
+  /** Firestore document ID (for cloud sync). */
+  firebaseId?: string;
+  /** Firebase Auth UID that owns this entry. */
+  userId?: string;
 }
 
 /** Full-resolution image associated with a spot (one image per spot). */
@@ -23,6 +27,8 @@ export interface SpotImage {
   /** Compressed JPEG binary — stored but NOT indexed. */
   blob: Blob;
   createdAt: number; // epoch ms
+  /** Firestore document ID for the image. */
+  firebaseId?: string;
 }
 
 class KeepCheckDB extends Dexie {
@@ -54,11 +60,6 @@ class KeepCheckDB extends Dexie {
       );
 
     // v3 — adds `images` store + optional `thumbnail` field on spots.
-    // The spots index string is unchanged because `thumbnail` is NOT
-    // indexed (Dexie only requires indexed fields in the schema string).
-    // The images store indexes `spotId` for cascade-delete lookups and
-    // `createdAt` for chronological queries; `blob` is stored but never
-    // indexed to save space.
     this.version(3)
       .stores({
         spots: "++id, name, category, rating, createdAt",
@@ -69,14 +70,33 @@ class KeepCheckDB extends Dexie {
           .table<FoodSpotLog>("spots")
           .toCollection()
           .modify((spot) => {
-            // Backfill — existing rows simply get `undefined` so the
-            // TypeScript `?` optional field is satisfied. This is a
-            // no-op for the data but documents the migration intent.
             if (spot.thumbnail === undefined) {
               spot.thumbnail = undefined;
             }
           })
       );
+
+    // v4 — adds `firebaseId` and `userId` fields for cloud sync.
+    // These are indexed so we can look up spots by their Firestore ID
+    // and filter by user.
+    this.version(4)
+      .stores({
+        spots: "++id, name, category, rating, createdAt, firebaseId, userId",
+        images: "++id, spotId, createdAt, firebaseId",
+      })
+      .upgrade((tx) =>
+        tx
+          .table<FoodSpotLog>("spots")
+          .toCollection()
+          .modify((spot) => {
+            if (spot.firebaseId === undefined) {
+              spot.firebaseId = undefined;
+            }
+            if (spot.userId === undefined) {
+              spot.userId = undefined;
+            }
+          })
+      );
   }
 }
 
diff --git a/app/globals.css b/app/globals.css
index 1bd5261..448c378 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -2,48 +2,336 @@
 
 @custom-variant dark (&:where(.dark, .dark *));
 
+/* ================================================================== */
+/*  NEUMORPHISM DESIGN SYSTEM                                          */
+/* ================================================================== */
+
 :root {
-  --bg: #EFE7D8;
-  --surface: #FBF6EC;
+  /* Fonts family variables */
+  --font-fraunces: "Fraunces", Georgia, serif;
+  --font-work-sans: "Work Sans", system-ui, -apple-system, sans-serif;
+  --font-space-mono: "Space Mono", Consolas, Monaco, monospace;
+
+  /* Base palette — warm clay / parchment */
+  --bg: #ddd5c8;
+  --surface: #ddd5c8;
   --text-primary: #2C2018;
   --text-secondary: #6B5D4F;
-  --accent: #A6572B;
+  --accent: #c06830;
+  --accent-glow: #d68a4c;
   --category-cafe: #8B6F9E;
   --category-restaurant: #3E6E77;
+
+  /* Neumorphic shadow pairs (light) */
+  --neu-light: #efe7d8;
+  --neu-dark: #c5bdb0;
+  --neu-shadow-raised: 6px 6px 14px var(--neu-dark), -6px -6px 14px var(--neu-light);
+  --neu-shadow-inset: inset 4px 4px 10px var(--neu-dark), inset -4px -4px 10px var(--neu-light);
+  --neu-shadow-button: 4px 4px 10px var(--neu-dark), -4px -4px 10px var(--neu-light);
+  --neu-shadow-button-active: inset 3px 3px 8px var(--neu-dark), inset -3px -3px 8px var(--neu-light);
+  --neu-shadow-subtle: 3px 3px 8px var(--neu-dark), -3px -3px 8px var(--neu-light);
 }
 
 .dark {
-  --bg: #1E1712;
-  --surface: #2A2119;
+  --bg: #1a1410;
+  --surface: #1a1410;
   --text-primary: #F0E6D6;
   --text-secondary: #B8A890;
   --accent: #D68A4C;
-  --category-cafe: #7C5A3E;
-  --category-restaurant: #3E5A5E;
+  --accent-glow: #e9a868;
+  --category-cafe: #9b7fb0;
+  --category-restaurant: #4e8e97;
+
+  /* Neumorphic shadow pairs (dark) */
+  --neu-light: #231c16;
+  --neu-dark: #110e0b;
+  --neu-shadow-raised: 6px 6px 14px var(--neu-dark), -6px -6px 14px var(--neu-light);
+  --neu-shadow-inset: inset 4px 4px 10px var(--neu-dark), inset -4px -4px 10px var(--neu-light);
+  --neu-shadow-button: 4px 4px 10px var(--neu-dark), -4px -4px 10px var(--neu-light);
+  --neu-shadow-button-active: inset 3px 3px 8px var(--neu-dark), inset -3px -3px 8px var(--neu-light);
+  --neu-shadow-subtle: 3px 3px 8px var(--neu-dark), -3px -3px 8px var(--neu-light);
 }
 
+/* Tailwind theme bindings */
 @theme inline {
   --color-background: var(--bg);
   --color-foreground: var(--text-primary);
+  --color-bg: var(--bg);
   --color-surface: var(--surface);
   --color-text-primary: var(--text-primary);
   --color-text-secondary: var(--text-secondary);
   --color-accent: var(--accent);
+  --color-accent-glow: var(--accent-glow);
   --color-category-cafe: var(--category-cafe);
   --color-category-restaurant: var(--category-restaurant);
-  
+  --color-neu-light: var(--neu-light);
+  --color-neu-dark: var(--neu-dark);
+
+  --shadow-neu-raised: var(--neu-shadow-raised);
+  --shadow-neu-inset: var(--neu-shadow-inset);
+  --shadow-neu-button: var(--neu-shadow-button);
+  --shadow-neu-button-active: var(--neu-shadow-button-active);
+  --shadow-neu-subtle: var(--neu-shadow-subtle);
+
   --font-serif: var(--font-fraunces);
   --font-sans: var(--font-work-sans);
   --font-mono: var(--font-space-mono);
 }
 
+/* ================================================================== */
+/*  BASE                                                               */
+/* ================================================================== */
+
 body {
   background: var(--bg);
   color: var(--text-primary);
-  font-family: var(--font-work-sans), sans-serif;
+  font-family: var(--font-work-sans), system-ui, sans-serif;
+}
+
+/* ================================================================== */
+/*  NEUMORPHIC UTILITY CLASSES                                         */
+/* ================================================================== */
+
+.neu-raised {
+  background: var(--bg);
+  box-shadow: var(--neu-shadow-raised);
+  border-radius: 20px;
+}
+
+.neu-inset {
+  background: var(--bg);
+  box-shadow: var(--neu-shadow-inset);
+  border-radius: 16px;
+}
+
+.neu-button {
+  background: var(--bg);
+  box-shadow: var(--neu-shadow-button);
+  border-radius: 14px;
+  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.neu-button:hover {
+  box-shadow: var(--neu-shadow-raised);
+  transform: translateY(-1px);
+}
+
+.neu-button:active,
+.neu-button.active {
+  box-shadow: var(--neu-shadow-button-active);
+  transform: translateY(0);
+}
+
+.neu-input {
+  background: var(--bg);
+  box-shadow: var(--neu-shadow-inset);
+  border: none;
+  border-radius: 14px;
+  padding: 14px 16px;
+  color: var(--text-primary);
+  font-size: 0.9rem;
+  outline: none;
+  transition: box-shadow 0.3s ease, transform 0.2s ease;
+}
+
+.neu-input:focus {
+  box-shadow: inset 5px 5px 12px var(--neu-dark), inset -5px -5px 12px var(--neu-light), 0 0 0 2px var(--accent);
+}
+
+.neu-input::placeholder {
+  color: var(--text-secondary);
+  opacity: 0.5;
+}
+
+.neu-card {
+  background: var(--bg);
+  box-shadow: var(--neu-shadow-raised);
+  border-radius: 24px;
+  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.neu-card:hover {
+  box-shadow: 8px 8px 18px var(--neu-dark), -8px -8px 18px var(--neu-light);
+  transform: translateY(-3px);
+}
+
+.neu-card:active {
+  box-shadow: var(--neu-shadow-button-active);
+  transform: translateY(0);
+}
+
+/* ================================================================== */
+/*  GOOEY ANIMATIONS                                                   */
+/* ================================================================== */
+
+/* Blob floating animations for background */
+@keyframes blob-float-1 {
+  0%, 100% { transform: translate(0, 0) scale(1); }
+  25% { transform: translate(60px, -40px) scale(1.15); }
+  50% { transform: translate(20px, 50px) scale(0.9); }
+  75% { transform: translate(-30px, 20px) scale(1.08); }
+}
+
+@keyframes blob-float-2 {
+  0%, 100% { transform: translate(0, 0) scale(1); }
+  25% { transform: translate(-50px, 30px) scale(1.1); }
+  50% { transform: translate(-20px, -60px) scale(0.95); }
+  75% { transform: translate(40px, -20px) scale(1.12); }
+}
+
+@keyframes blob-float-3 {
+  0%, 100% { transform: translate(0, 0) scale(1); }
+  33% { transform: translate(30px, 40px) scale(1.2); }
+  66% { transform: translate(-40px, -30px) scale(0.85); }
+}
+
+.animate-blob-1 {
+  animation: blob-float-1 14s ease-in-out infinite;
+}
+
+.animate-blob-2 {
+  animation: blob-float-2 18s ease-in-out infinite;
+  animation-delay: -4s;
+}
+
+.animate-blob-3 {
+  animation: blob-float-3 12s ease-in-out infinite;
+  animation-delay: -7s;
+}
+
+/* Page entrance */
+@keyframes page-enter {
+  0% {
+    opacity: 0;
+    transform: translateY(16px) scale(0.97);
+    filter: blur(4px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+    filter: blur(0);
+  }
+}
+
+.animate-page-enter {
+  animation: page-enter 0.5s cubic-bezier(0.4, 0, 0.2, 1) both;
+}
+
+/* Card stagger entrance */
+@keyframes card-enter {
+  0% {
+    opacity: 0;
+    transform: translateY(24px) scale(0.95);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+.animate-card-enter {
+  animation: card-enter 0.4s cubic-bezier(0.4, 0, 0.2, 1) both;
+}
+
+/* Gooey press effect */
+@keyframes gooey-press {
+  0% { transform: scale(1); filter: blur(0); }
+  40% { transform: scale(0.93); filter: blur(1px); }
+  60% { transform: scale(1.03); filter: blur(0.5px); }
+  100% { transform: scale(1); filter: blur(0); }
+}
+
+.animate-gooey-press {
+  animation: gooey-press 0.45s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+/* Pulse glow for accent elements */
+@keyframes pulse-glow {
+  0%, 100% {
+    box-shadow: var(--neu-shadow-raised), 0 0 0 0 rgba(var(--accent), 0);
+  }
+  50% {
+    box-shadow: var(--neu-shadow-raised), 0 0 20px 4px var(--accent-glow);
+  }
+}
+
+/* Soft floating */
+@keyframes float-soft {
+  0%, 100% { transform: translateY(0); }
+  50% { transform: translateY(-6px); }
+}
+
+.animate-float {
+  animation: float-soft 3.5s ease-in-out infinite;
+}
+
+/* Gooey modal entrance */
+@keyframes modal-gooey-in {
+  0% {
+    opacity: 0;
+    transform: scale(0.8);
+    filter: blur(10px);
+  }
+  50% {
+    opacity: 1;
+    transform: scale(1.03);
+    filter: blur(2px);
+  }
+  100% {
+    opacity: 1;
+    transform: scale(1);
+    filter: blur(0);
+  }
+}
+
+.animate-modal-enter {
+  animation: modal-gooey-in 0.4s cubic-bezier(0.4, 0, 0.2, 1) both;
+}
+
+/* Backdrop fade */
+@keyframes backdrop-fade {
+  0% { opacity: 0; backdrop-filter: blur(0); }
+  100% { opacity: 1; backdrop-filter: blur(8px); }
+}
+
+.animate-backdrop {
+  animation: backdrop-fade 0.3s ease-out both;
+}
+
+/* Delete melt */
+@keyframes melt-away {
+  0% {
+    opacity: 1;
+    transform: scale(1) translateY(0);
+    filter: blur(0);
+  }
+  100% {
+    opacity: 0;
+    transform: scale(0.8) translateY(20px);
+    filter: blur(6px);
+  }
+}
+
+.animate-melt {
+  animation: melt-away 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
 }
 
-/* Hide scrollbar on horizontally-scrollable pill rows */
+/* Gooey ripple on tap */
+@keyframes ripple-gooey {
+  0% {
+    transform: scale(0);
+    opacity: 0.5;
+  }
+  100% {
+    transform: scale(2.5);
+    opacity: 0;
+  }
+}
+
+/* ================================================================== */
+/*  SCROLLBAR                                                          */
+/* ================================================================== */
+
 .scrollbar-none {
   -ms-overflow-style: none;
   scrollbar-width: none;
@@ -51,3 +339,209 @@ body {
 .scrollbar-none::-webkit-scrollbar {
   display: none;
 }
+
+/* Custom themed scrollbar */
+::-webkit-scrollbar {
+  width: 6px;
+}
+::-webkit-scrollbar-track {
+  background: var(--bg);
+}
+::-webkit-scrollbar-thumb {
+  background: var(--text-secondary);
+  border-radius: 3px;
+  opacity: 0.3;
+}
+::-webkit-scrollbar-thumb:hover {
+  background: var(--accent);
+}
+
+/* ================================================================== */
+/*  UTILITY OVERRIDES                                                  */
+/* ================================================================== */
+
+/* Smooth all transitions globally */
+*, *::before, *::after {
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+/* Selection color */
+::selection {
+  background: var(--accent);
+  color: white;
+}
+
+/* ================================================================== */
+/*  ADDITIONAL NEW STYLES FOR Restructured LAYOUT & GOOEY EFFECTS       */
+/* ================================================================== */
+
+/* 1. Carousel component container & behaviors */
+.carousel-container {
+  display: flex;
+  overflow-x: auto;
+  scroll-behavior: smooth;
+  scroll-snap-type: x mandatory;
+  -webkit-overflow-scrolling: touch;
+}
+
+.carousel-card {
+  scroll-snap-align: start;
+  flex: 0 0 280px;
+  max-width: 280px;
+}
+
+@media (min-width: 640px) {
+  .carousel-card {
+    flex: 0 0 340px;
+    max-width: 340px;
+  }
+}
+
+/* Edge fading gradient mask for carousel */
+.carousel-mask {
+  mask-image: linear-gradient(to right, transparent, white 20px, white calc(100% - 20px), transparent);
+  -webkit-mask-image: linear-gradient(to right, transparent, white 20px, white calc(100% - 20px), transparent);
+}
+
+/* 2. Gooey tab selectors styling */
+.gooey-tab-container {
+  position: relative;
+  display: flex;
+  padding: 6px;
+  background: var(--bg);
+  box-shadow: var(--neu-shadow-inset);
+  border-radius: 20px;
+}
+
+/* High-contrast container for gooey filter */
+.gooey-filter-layer {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  filter: url(#gooey-medium);
+  border-radius: 20px;
+  overflow: hidden;
+}
+
+.gooey-filter-blob {
+  position: absolute;
+  height: calc(100% - 12px);
+  top: 6px;
+  background: var(--accent);
+  border-radius: 16px;
+  transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+
+/* Rating scale selection gooey blobs */
+.rating-bar-container {
+  position: relative;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 4px;
+  background: var(--bg);
+  box-shadow: var(--neu-shadow-inset);
+  border-radius: 24px;
+}
+
+.rating-filter-layer {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  filter: url(#gooey-rating);
+  border-radius: 24px;
+}
+
+.rating-blob {
+  position: absolute;
+  width: 44px;
+  height: 44px;
+  background: var(--accent);
+  border-radius: 50%;
+  transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+
+/* Photo upload dropzone states */
+.upload-dropzone {
+  border: 2px dashed var(--text-secondary);
+  border-radius: 20px;
+  transition: all 0.3s ease;
+  background: var(--bg);
+  box-shadow: var(--neu-shadow-subtle);
+}
+
+.upload-dropzone:hover {
+  border-color: var(--accent);
+  box-shadow: var(--neu-shadow-raised);
+}
+
+.upload-dropzone.active-drop {
+  border-color: var(--accent);
+  background: rgba(var(--accent-glow), 0.05);
+  box-shadow: var(--neu-shadow-inset);
+}
+
+/* Liquid scale up for images */
+@keyframes liquid-pop {
+  0% { transform: scale(0.6) rotate(-5deg); filter: blur(4px); opacity: 0; }
+  60% { transform: scale(1.05) rotate(2deg); filter: blur(0); opacity: 0.9; }
+  100% { transform: scale(1) rotate(0deg); opacity: 1; }
+}
+
+.animate-liquid-pop {
+  animation: liquid-pop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
+}
+
+/* Quick tag anims */
+@keyframes tag-appear {
+  0% { transform: translateY(8px); opacity: 0; }
+  100% { transform: translateY(0); opacity: 1; }
+}
+
+.tag-anim {
+  animation: tag-appear 0.3s cubic-bezier(0.4, 0, 0.2, 1) both;
+}
+
+/* Pulse keyframes for active upload */
+@keyframes pulse-border {
+  0%, 100% { border-color: var(--text-secondary); }
+  50% { border-color: var(--accent); }
+}
+
+.animate-pulse-border {
+  animation: pulse-border 2s infinite ease-in-out;
+}
+
+/* Success save animation */
+@keyframes checkmark-pop {
+  0% { transform: scale(0.5); opacity: 0; }
+  50% { transform: scale(1.2); }
+  100% { transform: scale(1); opacity: 1; }
+}
+
+.animate-success-pop {
+  animation: checkmark-pop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
+}
+
+/* Bottom sheet slide-up animation for mobile */
+@keyframes sheet-slide-up {
+  0% {
+    transform: translateY(100%);
+  }
+  100% {
+    transform: translateY(0);
+  }
+}
+
+.animate-sheet-enter {
+  animation: sheet-slide-up 0.35s cubic-bezier(0.16, 1, 0.3, 1) both;
+}
+
+/* GSAP Initial States to avoid FOUC */
+.gsap-reveal {
+  opacity: 0;
+  will-change: transform, opacity;
+}
+
+
+
diff --git a/app/layout.tsx b/app/layout.tsx
index be45053..173f530 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -1,25 +1,7 @@
 import type { Metadata } from "next";
-import { Fraunces, Work_Sans, Space_Mono } from "next/font/google";
+import { AuthProvider } from "@/lib/auth";
 import "./globals.css";
 
-const fraunces = Fraunces({
-  variable: "--font-fraunces",
-  subsets: ["latin"],
-  weight: ["600"],
-});
-
-const workSans = Work_Sans({
-  variable: "--font-work-sans",
-  subsets: ["latin"],
-  weight: ["400", "500"],
-});
-
-const spaceMono = Space_Mono({
-  variable: "--font-space-mono",
-  subsets: ["latin"],
-  weight: ["400", "700"],
-});
-
 export const metadata: Metadata = {
   title: "KeepCheck",
   description:
@@ -38,10 +20,15 @@ export default function RootLayout({
   return (
     <html
       lang="en"
-      className={`${fraunces.variable} ${workSans.variable} ${spaceMono.variable} h-full antialiased`}
+      className="h-full antialiased"
       suppressHydrationWarning
     >
       <head>
+        {/* Google Fonts Link */}
+        <link rel="preconnect" href="https://fonts.googleapis.com" />
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" />
+        <link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,600&family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&family=Work+Sans:wght@400;500;600;700&display=swap" rel="stylesheet" />
+
         {/* Theme persistence helper to avoid flash of light/dark mode */}
         <script
           dangerouslySetInnerHTML={{
@@ -105,7 +92,9 @@ export default function RootLayout({
           }}
         />
       </head>
-      <body className="min-h-full flex flex-col">{children}</body>
+      <body className="min-h-full flex flex-col">
+        <AuthProvider>{children}</AuthProvider>
+      </body>
     </html>
   );
 }
diff --git a/app/login/page.tsx b/app/login/page.tsx
new file mode 100644
index 0000000..ea5898b
--- /dev/null
+++ b/app/login/page.tsx
@@ -0,0 +1,198 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { useRouter } from "next/navigation";
+import { useAuth, type QuickLoginAccount } from "@/lib/auth";
+
+/* ------------------------------------------------------------------ */
+/*  Google icon SVG                                                    */
+/* ------------------------------------------------------------------ */
+function GoogleIcon({ className = "h-5 w-5" }: { className?: string }) {
+  return (
+    <svg className={className} viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+      <path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92a5.06 5.06 0 0 1-2.2 3.32v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.1z" fill="#4285F4" />
+      <path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" fill="#34A853" />
+      <path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" fill="#FBBC05" />
+      <path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" fill="#EA4335" />
+    </svg>
+  );
+}
+
+/* ------------------------------------------------------------------ */
+/*  Quick-login account row                                            */
+/* ------------------------------------------------------------------ */
+function QuickLoginRow({
+  account,
+  onClick,
+}: {
+  account: QuickLoginAccount;
+  onClick: () => void;
+}) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      className="neu-raised group flex w-full items-center gap-3 rounded-2xl p-3 transition-all duration-300 hover:scale-[1.02] active:scale-[0.98] active:shadow-neu-inset cursor-pointer"
+    >
+      {account.photoURL ? (
+        <img
+          src={account.photoURL}
+          alt=""
+          className="h-10 w-10 rounded-full object-cover ring-2 ring-accent/30"
+          referrerPolicy="no-referrer"
+        />
+      ) : (
+        <div className="flex h-10 w-10 items-center justify-center rounded-full bg-accent/20 text-accent font-bold text-sm">
+          {(account.displayName?.[0] ?? account.email?.[0] ?? "?").toUpperCase()}
+        </div>
+      )}
+      <div className="min-w-0 flex-1 text-left">
+        <p className="truncate text-sm font-semibold text-text-primary">
+          {account.displayName ?? "User"}
+        </p>
+        <p className="truncate text-xs text-text-secondary">
+          {account.email ?? "No email"}
+        </p>
+      </div>
+      <svg
+        className="h-4 w-4 text-text-secondary/50 transition-transform group-hover:translate-x-0.5"
+        fill="none"
+        viewBox="0 0 24 24"
+        stroke="currentColor"
+        strokeWidth={2}
+      >
+        <path strokeLinecap="round" strokeLinejoin="round" d="M9 5l7 7-7 7" />
+      </svg>
+    </button>
+  );
+}
+
+/* ------------------------------------------------------------------ */
+/*  Login page                                                         */
+/* ------------------------------------------------------------------ */
+export default function LoginPage() {
+  const { user, loading, signInWithGoogle, quickLoginAccounts } = useAuth();
+  const router = useRouter();
+  const [signingIn, setSigningIn] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  // Redirect if already logged in.
+  useEffect(() => {
+    if (!loading && user) {
+      router.replace("/");
+    }
+  }, [user, loading, router]);
+
+  async function handleSignIn() {
+    setSigningIn(true);
+    setError(null);
+    try {
+      await signInWithGoogle();
+    } catch {
+      setError("Sign-in failed. Please try again.");
+    } finally {
+      setSigningIn(false);
+    }
+  }
+
+  // Don't render until auth state resolves (prevents flash).
+  if (loading || user) {
+    return (
+      <div className="flex min-h-dvh items-center justify-center bg-bg">
+        <div className="h-10 w-10 animate-spin rounded-full border-4 border-text-secondary/20 border-t-accent" />
+      </div>
+    );
+  }
+
+  return (
+    <div className="relative flex min-h-dvh flex-col items-center justify-center overflow-hidden bg-bg px-5 py-10">
+      {/* ---- SVG Gooey filter (reused by blobs) ---- */}
+      <svg className="absolute h-0 w-0" aria-hidden="true">
+        <defs>
+          <filter id="gooey-login">
+            <feGaussianBlur in="SourceGraphic" stdDeviation="12" result="blur" />
+            <feColorMatrix
+              in="blur"
+              mode="matrix"
+              values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 20 -8"
+              result="gooey"
+            />
+            <feComposite in="SourceGraphic" in2="gooey" operator="atop" />
+          </filter>
+        </defs>
+      </svg>
+
+      {/* ---- Animated background blobs ---- */}
+      <div className="pointer-events-none absolute inset-0 overflow-hidden" style={{ filter: "url(#gooey-login)" }}>
+        <div className="animate-blob-1 absolute -top-24 -left-24 h-72 w-72 rounded-full bg-accent/15" />
+        <div className="animate-blob-2 absolute -bottom-32 -right-20 h-80 w-80 rounded-full bg-category-cafe/15" />
+        <div className="animate-blob-3 absolute top-1/3 right-1/4 h-48 w-48 rounded-full bg-category-restaurant/15" />
+      </div>
+
+      {/* ---- Main card ---- */}
+      <div className="relative z-10 w-full max-w-sm animate-page-enter">
+        {/* Logo + title */}
+        <div className="mb-8 text-center">
+          <div className="neu-raised mx-auto mb-5 flex h-20 w-20 items-center justify-center rounded-3xl">
+            <img
+              src="/KeepCheck-Logo.png"
+              alt="KeepCheck"
+              className="h-14 w-14 object-contain"
+            />
+          </div>
+          <h1 className="text-3xl font-serif font-bold tracking-tight text-text-primary">
+            Keep<span className="text-accent">Check</span>
+          </h1>
+          <p className="mt-2 text-sm text-text-secondary">
+            Track &amp; rate every café and restaurant.
+          </p>
+        </div>
+
+        {/* Google sign-in button */}
+        <button
+          type="button"
+          onClick={handleSignIn}
+          disabled={signingIn}
+          className="neu-raised group flex w-full items-center justify-center gap-3 rounded-2xl px-6 py-4 text-sm font-semibold text-text-primary transition-all duration-300 hover:scale-[1.02] active:scale-[0.97] active:shadow-neu-inset disabled:opacity-50 cursor-pointer"
+        >
+          {signingIn ? (
+            <div className="h-5 w-5 animate-spin rounded-full border-2 border-text-secondary/30 border-t-accent" />
+          ) : (
+            <GoogleIcon />
+          )}
+          {signingIn ? "Signing in…" : "Continue with Google"}
+        </button>
+
+        {/* Error message */}
+        {error && (
+          <p className="mt-3 text-center text-xs text-red-500 animate-page-enter">
+            {error}
+          </p>
+        )}
+
+        {/* Quick login history */}
+        {quickLoginAccounts.length > 0 && (
+          <div className="mt-8 animate-page-enter" style={{ animationDelay: "150ms" }}>
+            <p className="mb-3 text-center text-xs font-medium uppercase tracking-wider text-text-secondary">
+              Recent accounts
+            </p>
+            <div className="flex flex-col gap-2.5">
+              {quickLoginAccounts.map((account) => (
+                <QuickLoginRow
+                  key={account.uid}
+                  account={account}
+                  onClick={handleSignIn}
+                />
+              ))}
+            </div>
+          </div>
+        )}
+
+        {/* Footer */}
+        <p className="mt-10 text-center text-[11px] text-text-secondary/60">
+          Your data is stored securely and syncs across devices.
+        </p>
+      </div>
+    </div>
+  );
+}
diff --git a/app/page.tsx b/app/page.tsx
index 8785c23..33bcd65 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,11 +1,22 @@
 "use client";
 
-import { useState, useEffect, useMemo, useRef, type FormEvent } from "react";
+import { useState, useEffect, useMemo, useRef, useCallback, type FormEvent } from "react";
 import { useLiveQuery } from "dexie-react-hooks";
 import { db, type FoodSpotLog, type SpotCategory } from "./db";
 import { makeThumbnail, compressToBlob } from "@/utils/image";
 import SpotDetailModal from "@/components/SpotDetailModal";
-import { Trash2, Camera } from "lucide-react";
+import AuthGuard from "@/components/AuthGuard";
+import { useAuth } from "@/lib/auth";
+import {
+  generateSpotId,
+  writeSpotToFirestore,
+  deleteSpotFromFirestore,
+  addImageToFirestore,
+  deleteImagesForSpotFromFirestore,
+  subscribeToSpots,
+} from "@/lib/firestore";
+import { Trash2, Camera, LogOut, ChevronLeft, ChevronRight, Clock, Plus, X } from "lucide-react";
+import { gsap } from "gsap";
 
 /* ------------------------------------------------------------------ */
 /*  Types                                                              */
@@ -28,44 +39,18 @@ function ThemeToggle({
       type="button"
       onClick={onToggle}
       aria-label={dark ? "Switch to light mode" : "Switch to dark mode"}
-      className="flex h-11 w-11 items-center justify-center rounded-full border border-text-secondary/20 bg-surface text-text-secondary shadow-sm transition-all hover:bg-bg active:scale-95 cursor-pointer"
+      className="neu-button flex h-11 w-11 items-center justify-center rounded-full text-text-secondary cursor-pointer"
     >
       {dark ? (
-        /* Sun icon */
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          width="20"
-          height="20"
-          viewBox="0 0 24 24"
-          fill="none"
-          stroke="currentColor"
-          strokeWidth="2"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-        >
+        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
           <circle cx="12" cy="12" r="4" />
-          <path d="M12 2v2" />
-          <path d="M12 20v2" />
-          <path d="m4.93 4.93 1.41 1.41" />
-          <path d="m17.66 17.66 1.41 1.41" />
-          <path d="M2 12h2" />
-          <path d="M20 12h2" />
-          <path d="m6.34 17.66-1.41 1.41" />
-          <path d="m19.07 4.93-1.41 1.41" />
+          <path d="M12 2v2" /><path d="M12 20v2" />
+          <path d="m4.93 4.93 1.41 1.41" /><path d="m17.66 17.66 1.41 1.41" />
+          <path d="M2 12h2" /><path d="M20 12h2" />
+          <path d="m6.34 17.66-1.41 1.41" /><path d="m19.07 4.93-1.41 1.41" />
         </svg>
       ) : (
-        /* Moon icon */
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          width="20"
-          height="20"
-          viewBox="0 0 24 24"
-          fill="none"
-          stroke="currentColor"
-          strokeWidth="2"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-        >
+        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
           <path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z" />
         </svg>
       )}
@@ -74,73 +59,90 @@ function ThemeToggle({
 }
 
 /* ------------------------------------------------------------------ */
-/*  Rating pill component                                              */
+/*  Gooey Category Selector Component                                  */
 /* ------------------------------------------------------------------ */
-function RatingPills({
+function CategoryPills({
   value,
   onChange,
 }: {
-  value: number;
-  onChange: (n: number) => void;
+  value: SpotCategory;
+  onChange: (c: SpotCategory) => void;
 }) {
   return (
-    <div className="flex flex-wrap gap-2">
-      {Array.from({ length: 10 }, (_, i) => i + 1).map((n) => (
-        <button
-          key={n}
-          type="button"
-          onClick={() => onChange(n)}
-          className={`
-            h-11 w-11 rounded-full text-sm font-bold font-mono
-            transition-all duration-150 cursor-pointer
-            ${n === value
-              ? "bg-accent text-white shadow-md scale-110"
-              : "bg-bg text-text-secondary hover:opacity-80 active:opacity-60"
-            }
-          `}
-        >
-          {n}
-        </button>
-      ))}
+    <div className="relative w-full overflow-hidden p-1.5 bg-bg/50 shadow-neu-inset rounded-2xl flex min-h-[50px] items-center">
+      {/* Gooey filter layer for background */}
+      <div className="absolute inset-0 pointer-events-none rounded-2xl overflow-hidden" style={{ filter: "url(#gooey-medium)" }}>
+        <div
+          className="absolute h-9 bg-accent rounded-xl transition-all duration-300 ease-out"
+          style={{
+            width: "calc(50% - 10px)",
+            left: value === "Cafe" ? "6px" : "calc(50% + 4px)",
+            top: "7px",
+          }}
+        />
+      </div>
+
+      {/* Actual buttons (crisp text layer above) */}
+      <button
+        type="button"
+        onClick={() => onChange("Cafe")}
+        className={`relative z-10 w-1/2 rounded-xl py-2 text-sm font-semibold transition-colors duration-300 min-h-[38px] cursor-pointer ${
+          value === "Cafe" ? "text-white font-bold" : "text-text-secondary hover:text-text-primary"
+        }`}
+      >
+        ☕ Cafe
+      </button>
+      <button
+        type="button"
+        onClick={() => onChange("Restaurant")}
+        className={`relative z-10 w-1/2 rounded-xl py-2 text-sm font-semibold transition-colors duration-300 min-h-[38px] cursor-pointer ${
+          value === "Restaurant" ? "text-white font-bold" : "text-text-secondary hover:text-text-primary"
+        }`}
+      >
+        🍽️ Restaurant
+      </button>
     </div>
   );
 }
 
 /* ------------------------------------------------------------------ */
-/*  Category pill selector (form)                                      */
+/*  Gooey Rating Selector Component                                    */
 /* ------------------------------------------------------------------ */
-const CATEGORIES: SpotCategory[] = ["Cafe", "Restaurant"];
-
-function CategoryPills({
+function RatingPills({
   value,
   onChange,
 }: {
-  value: SpotCategory;
-  onChange: (c: SpotCategory) => void;
+  value: number;
+  onChange: (n: number) => void;
 }) {
   return (
-    <div className="flex gap-2">
-      {CATEGORIES.map((cat) => {
-        const active = cat === value;
-        const colors: Record<SpotCategory, { active: string; idle: string }> = {
-          Cafe: {
-            active: "bg-category-cafe text-white shadow-md",
-            idle: "bg-bg text-text-secondary hover:opacity-85",
-          },
-          Restaurant: {
-            active: "bg-category-restaurant text-white shadow-md",
-            idle: "bg-bg text-text-secondary hover:opacity-85",
-          },
-        };
+    <div className="relative w-full p-1.5 bg-bg/50 shadow-neu-inset rounded-2xl flex justify-between items-center min-h-[52px]">
+      {/* Gooey filter layer */}
+      <div className="absolute inset-0 pointer-events-none overflow-hidden rounded-2xl" style={{ filter: "url(#gooey-rating)" }}>
+        <div
+          className="absolute h-9 w-9 rounded-full bg-accent transition-all duration-300 ease-out"
+          style={{
+            left: `calc(6px + ${(value - 1)} * (100% - 48px) / 9)`,
+            top: "8px",
+          }}
+        />
+      </div>
+
+      {/* Numbers */}
+      {Array.from({ length: 10 }, (_, i) => i + 1).map((n) => {
+        const active = n === value;
         return (
           <button
-            key={cat}
+            key={n}
             type="button"
-            onClick={() => onChange(cat)}
-            className={`rounded-full px-5 py-2.5 text-sm font-semibold transition-all duration-150 cursor-pointer min-h-[44px] ${active ? colors[cat].active : colors[cat].idle
-              }`}
+            onClick={() => onChange(n)}
+            className={`
+              relative z-10 h-9 w-9 rounded-full text-xs sm:text-sm font-bold font-mono
+              transition-colors duration-300 cursor-pointer flex items-center justify-center
+              ${active ? "text-white font-bold scale-105" : "text-text-secondary hover:text-text-primary"}
+            `}
           >
-            {cat === "Cafe" ? "☕ Cafe" : "🍽️ Restaurant"}
+            {n}
           </button>
         );
       })}
@@ -149,19 +151,15 @@ function CategoryPills({
 }
 
 /* ------------------------------------------------------------------ */
-/*  Category badge (card display - sticker treatment)                  */
+/*  Category badge (card display)                                      */
 /* ------------------------------------------------------------------ */
-function CategoryBadge({ category, seed = 0 }: { category: SpotCategory; seed?: number }) {
-  const styles: Record<SpotCategory, string> = {
-    Cafe: "bg-category-cafe text-white",
-    Restaurant: "bg-category-restaurant text-white",
-  };
+function CategoryBadge({ category }: { category: SpotCategory }) {
+  const bg = category === "Cafe" ? "bg-category-cafe" : "bg-category-restaurant";
   const label = category === "Cafe" ? "☕ Cafe" : "🍽️ Restaurant";
-  const rotation = seed % 2 === 0 ? "rotate-2" : "-rotate-2";
 
   return (
     <span
-      className={`inline-flex items-center rounded px-2 py-0.5 text-[10px] font-semibold tracking-wider uppercase font-sans shadow-sm ${styles[category]} ${rotation}`}
+      className={`inline-flex items-center rounded-full px-2.5 py-0.5 text-[10px] font-semibold tracking-wider uppercase text-white ${bg}`}
     >
       {label}
     </span>
@@ -169,14 +167,16 @@ function CategoryBadge({ category, seed = 0 }: { category: SpotCategory; seed?:
 }
 
 /* ------------------------------------------------------------------ */
-/*  Spot card (feed entry)                                             */
+/*  Spot card (neumorphic)                                             */
 /* ------------------------------------------------------------------ */
 function SpotCard({
   spot,
   onClick,
+  index,
 }: {
   spot: FoodSpotLog;
   onClick: () => void;
+  index: number;
 }) {
   const date = new Date(spot.createdAt);
   const formatted = date.toLocaleDateString(undefined, {
@@ -185,15 +185,9 @@ function SpotCard({
     day: "numeric",
   });
 
-  const seed = spot.id ?? 0;
-  const rotation = (seed * 7) % 17 - 8;
-  const categoryColorClass = (spot.category ?? "Restaurant") === "Cafe"
-    ? "border-category-cafe text-category-cafe"
-    : "border-category-restaurant text-category-restaurant";
-
   return (
     <div
-      className="relative border-t-2 border-dashed border-text-secondary/30 border-x border-b border-text-secondary/15 bg-surface rounded-b-xl rounded-t-none shadow-sm transition-shadow hover:shadow-md h-full cursor-pointer flex flex-col"
+      className="neu-card overflow-hidden cursor-pointer flex flex-col h-full"
       onClick={onClick}
       role="button"
       tabIndex={0}
@@ -204,42 +198,43 @@ function SpotCard({
         }
       }}
     >
-      {/* Stamp rating badge */}
-      <div
-        style={{ transform: `rotate(${rotation}deg)` }}
-        className={`absolute -top-3 -right-3 z-10 flex h-11 w-11 items-center justify-center rounded-full border-2 bg-surface font-mono text-base font-bold shadow-md ${categoryColorClass}`}
-      >
-        {spot.rating}
-      </div>
-
       {/* Thumbnail */}
-      {spot.thumbnail && (
-        <div className="relative h-48 w-full overflow-hidden bg-bg rounded-t-none">
+      {spot.thumbnail ? (
+        <div className="relative h-44 w-full overflow-hidden">
           <img
             src={spot.thumbnail}
             alt={`Photo of ${spot.name}`}
             loading="lazy"
-            className="h-full w-full object-cover transition-transform duration-300 group-hover:scale-105"
+            className="h-full w-full object-cover transition-transform duration-500 hover:scale-110"
           />
+          {/* Rating badge overlay */}
+          <div className="absolute top-3 right-3 flex h-10 w-10 items-center justify-center rounded-full bg-bg/90 shadow-neu-subtle font-mono text-sm font-bold text-accent backdrop-blur-sm">
+            {spot.rating}
+          </div>
+        </div>
+      ) : (
+        <div className="h-28 w-full bg-bg/40 flex items-center justify-center shadow-neu-inset relative">
+          <span className="text-3xl opacity-45">{spot.category === "Cafe" ? "☕" : "🍽️"}</span>
+          <div className="absolute top-3 right-3 flex h-9 w-9 items-center justify-center rounded-full bg-bg shadow-neu-subtle font-mono text-xs font-bold text-accent">
+            {spot.rating}
+          </div>
         </div>
       )}
 
       {/* Text content */}
-      <div className="p-4 md:p-5 pr-14 md:pr-14 flex-1 flex flex-col justify-between">
+      <div className="p-4 flex-1 flex flex-col justify-between">
         <div>
-          <div className="flex items-start justify-between gap-3">
-            <div className="min-w-0 flex-1">
-              <h3 className="truncate text-sm md:text-base font-sans font-semibold text-text-primary">
-                {spot.name}
-              </h3>
-              <div className="mt-1.5 flex flex-wrap items-center gap-2">
-                <p className="text-xs text-text-secondary font-mono">{formatted}</p>
-                <CategoryBadge category={spot.category ?? "Restaurant"} seed={seed} />
-              </div>
-            </div>
+          <h3 className="truncate text-sm md:text-base font-sans font-semibold text-text-primary mb-1">
+            {spot.name}
+          </h3>
+
+          <div className="flex flex-wrap items-center gap-2 mb-2">
+            <p className="text-[10px] text-text-secondary font-mono">{formatted}</p>
+            <CategoryBadge category={spot.category ?? "Restaurant"} />
           </div>
+
           {spot.comment && (
-            <p className="mt-2.5 text-sm leading-relaxed text-text-secondary">
+            <p className="text-xs sm:text-sm leading-relaxed text-text-secondary line-clamp-3">
               {spot.comment}
             </p>
           )}
@@ -250,7 +245,7 @@ function SpotCard({
 }
 
 /* ------------------------------------------------------------------ */
-/*  Pill button (reused for sort + category filter)                    */
+/*  Pill button (neumorphic)                                           */
 /* ------------------------------------------------------------------ */
 function PillButton({
   label,
@@ -265,10 +260,10 @@ function PillButton({
     <button
       type="button"
       onClick={onClick}
-      className={`rounded-lg px-3.5 py-2.5 text-xs md:text-sm font-medium transition-all cursor-pointer whitespace-nowrap min-h-[44px] ${
+      className={`rounded-xl px-4 py-2.5 text-xs md:text-sm font-medium transition-all duration-300 cursor-pointer whitespace-nowrap min-h-[40px] ${
         active
-          ? "bg-accent text-white shadow-sm"
-          : "bg-surface text-text-secondary border border-text-secondary/15 hover:opacity-85 active:scale-95"
+          ? "shadow-neu-inset text-accent font-semibold"
+          : "shadow-neu-subtle text-text-secondary hover:text-text-primary active:shadow-neu-inset"
       }`}
     >
       {label}
@@ -276,17 +271,78 @@ function PillButton({
   );
 }
 
+/* ------------------------------------------------------------------ */
+/*  User avatar/profile button                                         */
+/* ------------------------------------------------------------------ */
+function UserProfile({
+  photoURL,
+  displayName,
+  onSignOut,
+}: {
+  photoURL: string | null;
+  displayName: string | null;
+  onSignOut: () => void;
+}) {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <div className="relative">
+      <button
+        type="button"
+        onClick={() => setOpen((o) => !o)}
+        className="neu-button flex h-11 w-11 items-center justify-center rounded-full overflow-hidden cursor-pointer"
+      >
+        {photoURL ? (
+          <img src={photoURL} alt={displayName ?? "User"} className="h-full w-full object-cover" referrerPolicy="no-referrer" />
+        ) : (
+          <span className="text-sm font-bold text-accent">
+            {(displayName?.[0] ?? "U").toUpperCase()}
+          </span>
+        )}
+      </button>
+
+      {/* Dropdown */}
+      {open && (
+        <>
+          <div className="fixed inset-0 z-40" onClick={() => setOpen(false)} />
+          <div className="absolute right-0 top-14 z-50 w-52 neu-raised p-3 animate-page-enter">
+            <p className="truncate text-sm font-semibold text-text-primary mb-1">
+              {displayName ?? "User"}
+            </p>
+            <hr className="border-text-secondary/15 my-2" />
+            <button
+              type="button"
+              onClick={() => { setOpen(false); onSignOut(); }}
+              className="neu-button flex w-full items-center gap-2 rounded-xl px-3 py-2.5 text-sm text-text-secondary hover:text-red-500 cursor-pointer"
+            >
+              <LogOut className="h-4 w-4" />
+              Sign out
+            </button>
+          </div>
+        </>
+      )}
+    </div>
+  );
+}
+
 /* ------------------------------------------------------------------ */
 /*  Main page                                                          */
 /* ------------------------------------------------------------------ */
-export default function Home() {
+function HomePage() {
+  const { user, signOut } = useAuth();
   const [name, setName] = useState("");
   const [category, setCategory] = useState<SpotCategory>("Restaurant");
   const [rating, setRating] = useState(7);
   const [comment, setComment] = useState("");
   const [imageFile, setImageFile] = useState<File | null>(null);
   const [saving, setSaving] = useState(false);
+  const [success, setSuccess] = useState(false);
+  const [dragActive, setDragActive] = useState(false);
   const fileInputRef = useRef<HTMLInputElement>(null);
+  const [deletingIds, setDeletingIds] = useState<Set<number>>(new Set());
+
+  /* -- Modal control state -- */
+  const [isFormOpen, setIsFormOpen] = useState(false);
 
   /* -- Detail modal -- */
   const [selectedSpotId, setSelectedSpotId] = useState<number | null>(null);
@@ -294,10 +350,44 @@ export default function Home() {
   /* -- Theme -- */
   const [dark, setDark] = useState(true);
 
+  /* -- Carousel control -- */
+  const carouselRef = useRef<HTMLDivElement>(null);
+  const [scrollPercent, setScrollPercent] = useState(0);
+
+  /* -- GSAP Animation Refs -- */
+  const modalContainerRef = useRef<HTMLDivElement>(null);
+  const modalContentRef = useRef<HTMLDivElement>(null);
+  const modalGooeyBgRef = useRef<HTMLDivElement>(null);
+  const backdropOverlayRef = useRef<HTMLDivElement>(null);
+  const hasAnimatedRef = useRef(false);
+
+  useEffect(() => {
+    // Read stored theme preference
+    try {
+      const stored = localStorage.getItem("keepcheck-theme");
+      if (stored) setDark(stored === "dark");
+    } catch { /* ignore */ }
+  }, []);
+
   useEffect(() => {
     document.documentElement.classList.toggle("dark", dark);
+    try {
+      localStorage.setItem("keepcheck-theme", dark ? "dark" : "light");
+    } catch { /* ignore */ }
   }, [dark]);
 
+  /* -- Prevent body scroll when form modal is open -- */
+  useEffect(() => {
+    if (isFormOpen) {
+      document.body.style.overflow = "hidden";
+    } else {
+      document.body.style.overflow = "";
+    }
+    return () => {
+      document.body.style.overflow = "";
+    };
+  }, [isFormOpen]);
+
   /* -- Storage persistence (best-effort) -- */
   useEffect(() => {
     if (navigator.storage?.persist) {
@@ -309,7 +399,7 @@ export default function Home() {
     }
   }, []);
 
-  /* -- Image preview object URL (raw file, NOT compressed) -- */
+  /* -- Image preview object URL -- */
   const [previewUrl, setPreviewUrl] = useState<string | null>(null);
 
   useEffect(() => {
@@ -322,15 +412,56 @@ export default function Home() {
     return () => URL.revokeObjectURL(url);
   }, [imageFile]);
 
+  /* -- Firestore real-time sync -- */
+  const syncSpots = useCallback(async (firestoreSpots: (FoodSpotLog & { firebaseId: string })[]) => {
+    if (!user) return;
+
+    // Sync each Firestore spot into local Dexie if missing
+    for (const fSpot of firestoreSpots) {
+      const existing = await db.spots.where("firebaseId").equals(fSpot.firebaseId).first();
+      if (!existing) {
+        await db.spots.add({
+          name: fSpot.name,
+          category: fSpot.category ?? "Restaurant",
+          rating: fSpot.rating,
+          comment: fSpot.comment,
+          createdAt: fSpot.createdAt,
+          thumbnail: fSpot.thumbnail,
+          firebaseId: fSpot.firebaseId,
+          userId: user.uid,
+        });
+      }
+    }
+
+    // Remove local spots whose firebaseId no longer exists in Firestore
+    const firestoreIds = new Set(firestoreSpots.map((s) => s.firebaseId));
+    const localSpots = await db.spots.where("userId").equals(user.uid).toArray();
+    for (const local of localSpots) {
+      if (local.firebaseId && !firestoreIds.has(local.firebaseId)) {
+        if (local.id !== undefined) {
+          await db.images.where("spotId").equals(local.id).delete();
+          await db.spots.delete(local.id);
+        }
+      }
+    }
+  }, [user]);
+
+  useEffect(() => {
+    if (!user) return;
+    const unsubscribe = subscribeToSpots(user.uid, syncSpots);
+    return unsubscribe;
+  }, [user, syncSpots]);
+
   /* -- Search, Sort & Category filter -- */
   const [search, setSearch] = useState("");
   const [sortMode, setSortMode] = useState<SortMode>("newest");
   const [catFilter, setCatFilter] = useState<CategoryFilter>("All");
 
-  // Reactive query – re-renders whenever `spots` table changes
-  const spots = useLiveQuery(() =>
-    db.spots.orderBy("createdAt").reverse().toArray()
-  );
+  // Reactive query — re-renders whenever `spots` table changes
+  const spots = useLiveQuery(() => {
+    if (!user) return [];
+    return db.spots.where("userId").equals(user.uid).reverse().sortBy("createdAt");
+  }, [user]);
 
   /** Derived: filtered + sorted view of spots. */
   const filteredSpots = useMemo(() => {
@@ -338,7 +469,6 @@ export default function Home() {
 
     const query = search.trim().toLowerCase();
 
-    // Filter by search text
     let result = spots;
     if (query) {
       result = result.filter(
@@ -348,35 +478,267 @@ export default function Home() {
       );
     }
 
-    // Filter by category
     if (catFilter !== "All") {
       result = result.filter(
         (s) => (s.category ?? "Restaurant") === catFilter
       );
     }
 
-    // Sort
     if (sortMode === "highest") {
       result = [...result].sort((a, b) => b.rating - a.rating);
     } else if (sortMode === "lowest") {
       result = [...result].sort((a, b) => a.rating - b.rating);
+    } else if (sortMode === "newest") {
+      result = [...result].sort((a, b) => b.createdAt - a.createdAt);
     }
-    // "newest" is the default order from the query (createdAt desc)
 
     return result;
   }, [spots, search, sortMode, catFilter]);
 
+  /* -- Carousel scrolling listener -- */
+  const handleCarouselScroll = useCallback(() => {
+    if (carouselRef.current) {
+      const { scrollLeft, scrollWidth, clientWidth } = carouselRef.current;
+      const totalScrollable = scrollWidth - clientWidth;
+      if (totalScrollable > 0) {
+        setScrollPercent((scrollLeft / totalScrollable) * 100);
+      } else {
+        setScrollPercent(0);
+      }
+    }
+  }, []);
+
+  useEffect(() => {
+    const el = carouselRef.current;
+    if (el) {
+      el.addEventListener("scroll", handleCarouselScroll, { passive: true });
+      handleCarouselScroll();
+    }
+    return () => el?.removeEventListener("scroll", handleCarouselScroll);
+  }, [filteredSpots, handleCarouselScroll]);
+
+  const scrollCarousel = (direction: "left" | "right") => {
+    if (carouselRef.current) {
+      const scrollAmount = carouselRef.current.clientWidth * 0.75;
+      carouselRef.current.scrollBy({
+        left: direction === "left" ? -scrollAmount : scrollAmount,
+        behavior: "smooth",
+      });
+    }
+  };
+
+  /* ------------------------------------------------------------------ */
+  /*  GSAP Animation Implementation                                      */
+  /* ------------------------------------------------------------------ */
+
+  // 1. Page entrance animation timeline (Run once on mount when spots resolve)
+  useEffect(() => {
+    if (!user || spots === undefined || hasAnimatedRef.current) return;
+    hasAnimatedRef.current = true;
+
+    const ctx = gsap.context(() => {
+      const tl = gsap.timeline({ defaults: { ease: "power3.out" } });
+
+      if (document.querySelector(".gsap-header")) {
+        tl.fromTo(
+          ".gsap-header",
+          { y: -40, opacity: 0 },
+          { y: 0, opacity: 1, duration: 0.7 }
+        );
+      }
+      if (document.querySelector(".gsap-spotlight")) {
+        tl.fromTo(
+          ".gsap-spotlight",
+          { y: 35, opacity: 0 },
+          { y: 0, opacity: 1, duration: 0.8 },
+          "-=0.45"
+        );
+      }
+      if (document.querySelector(".gsap-feed-header")) {
+        tl.fromTo(
+          ".gsap-feed-header",
+          { y: 25, opacity: 0 },
+          { y: 0, opacity: 1, duration: 0.8 },
+          "-=0.55"
+        );
+      }
+      if (document.querySelector(".gsap-feed-filters")) {
+        tl.fromTo(
+          ".gsap-feed-filters",
+          { y: 20, opacity: 0 },
+          { y: 0, opacity: 1, duration: 0.8 },
+          "-=0.6"
+        );
+      }
+
+      // Stagger carousel cards
+      if (document.querySelectorAll(".carousel-card").length > 0) {
+        tl.fromTo(
+          ".carousel-card",
+          { scale: 0.92, opacity: 0, y: 15 },
+          { scale: 1, opacity: 1, y: 0, duration: 0.6, stagger: 0.07, ease: "back.out(1.15)" },
+          "-=0.4"
+        );
+      }
+    });
+
+    return () => ctx.revert();
+  }, [user, spots]);
+
+  // 2. Stagger feed items whenever spots or search query updates
+  useEffect(() => {
+    const elements = document.querySelectorAll(".gsap-list-item");
+    if (elements.length > 0) {
+      gsap.fromTo(
+        elements,
+        { opacity: 0, y: 20, scale: 0.98 },
+        {
+          opacity: 1,
+          y: 0,
+          scale: 1,
+          duration: 0.45,
+          stagger: 0.04,
+          ease: "power2.out",
+          overwrite: "auto"
+        }
+      );
+    }
+  }, [filteredSpots]);
+
+  // 3. Modal Form slide in/out animations
+  const openFormModal = () => {
+    setIsFormOpen(true);
+  };
+
+  const closeFormModal = () => {
+    if (modalContentRef.current && backdropOverlayRef.current && modalGooeyBgRef.current) {
+      const isMobile = window.innerWidth < 640;
+      
+      const tl = gsap.timeline({
+        onComplete: () => {
+          setIsFormOpen(false);
+        }
+      });
+
+      tl.to(backdropOverlayRef.current, {
+        opacity: 0,
+        duration: 0.25,
+        ease: "power2.in"
+      })
+      .to(
+        modalContentRef.current,
+        {
+          opacity: 0,
+          y: isMobile ? 30 : 15,
+          duration: 0.2,
+          ease: "power2.in"
+        },
+        "-=0.2"
+      )
+      .to(
+        modalGooeyBgRef.current,
+        {
+          y: isMobile ? "100%" : 100,
+          scale: isMobile ? 0.8 : 0.7,
+          opacity: 0,
+          duration: 0.45,
+          ease: "back.in(1.2)"
+        },
+        "-=0.2"
+      );
+    } else {
+      setIsFormOpen(false);
+    }
+  };
+
+  // Trigger GSAP entrance when form state flips to open
+  useEffect(() => {
+    if (isFormOpen && modalContentRef.current && backdropOverlayRef.current && modalGooeyBgRef.current) {
+      const isMobile = window.innerWidth < 640;
+
+      // Set initial values
+      gsap.set(backdropOverlayRef.current, { opacity: 0 });
+      gsap.set(modalContentRef.current, {
+        opacity: 0,
+        y: isMobile ? 25 : 15
+      });
+      gsap.set(modalGooeyBgRef.current, {
+        y: isMobile ? "100%" : 100,
+        scale: isMobile ? 0.8 : 0.7,
+        opacity: 0
+      });
+
+      const tl = gsap.timeline({ defaults: { ease: "power3.out" } });
+
+      tl.to(backdropOverlayRef.current, {
+        opacity: 1,
+        duration: 0.3
+      })
+      .to(
+        modalGooeyBgRef.current,
+        {
+          y: 0,
+          scale: 1,
+          opacity: 1,
+          duration: 0.55,
+          ease: isMobile ? "power3.out" : "back.out(1.3)"
+        },
+        "-=0.2"
+      )
+      .to(
+        modalContentRef.current,
+        {
+          opacity: 1,
+          y: 0,
+          duration: 0.35,
+          ease: "power2.out"
+        },
+        "-=0.25"
+      );
+    }
+  }, [isFormOpen]);
+
+  // 4. Elastic animations for FAB hover/clicks
+  const handleFABHover = (enter: boolean) => {
+    gsap.to(".gsap-fab", {
+      scale: enter ? 1.15 : 1,
+      rotation: enter ? 90 : 0,
+      duration: 0.5,
+      ease: "elastic.out(1, 0.4)",
+      overwrite: "auto"
+    });
+  };
+
+  const handleFABPress = (down: boolean) => {
+    gsap.to(".gsap-fab", {
+      scale: down ? 0.92 : 1.15,
+      duration: 0.25,
+      ease: "power2.out",
+      overwrite: "auto"
+    });
+  };
+
+  // Submit button success timeline
+  useEffect(() => {
+    if (success) {
+      gsap.fromTo(
+        ".gsap-success-tick",
+        { scale: 0.4, opacity: 0 },
+        { scale: 1, opacity: 1, duration: 0.5, ease: "elastic.out(1.1, 0.35)" }
+      );
+    }
+  }, [success]);
+
   /* ---------- handlers ---------- */
 
   async function handleSubmit(e: FormEvent) {
     e.preventDefault();
     const trimmed = name.trim();
-    if (!trimmed) return;
+    if (!trimmed || !user) return;
 
     setSaving(true);
 
     try {
-      // Compress image in parallel (if present) before opening the txn.
       let thumbnail: string | undefined;
       let compressedBlob: Blob | undefined;
 
@@ -396,35 +758,71 @@ export default function Home() {
         }
       }
 
-      // Dual-write transaction — keeps `spots` and `images` in sync.
-      await db.transaction("rw", db.spots, db.images, async () => {
-        const spotId = await db.spots.add({
-          name: trimmed,
-          category,
-          rating,
-          comment: comment.trim(),
-          createdAt: Date.now(),
-          thumbnail,
+      const spotData = {
+        name: trimmed,
+        category,
+        rating,
+        comment: comment.trim(),
+        createdAt: Date.now(),
+        thumbnail,
+      };
+
+      const firebaseId = generateSpotId(user.uid);
+
+      const spotId = await db.transaction("rw", db.spots, db.images, async () => {
+        const localId = await db.spots.add({
+          ...spotData,
+          firebaseId,
+          userId: user.uid,
         });
 
         if (compressedBlob) {
           await db.images.add({
-            spotId,
+            spotId: localId,
             blob: compressedBlob,
             createdAt: Date.now(),
           });
         }
+
+        return localId;
       });
 
-      // Reset form
+      await writeSpotToFirestore(user.uid, firebaseId, spotData);
+
+      if (compressedBlob) {
+        try {
+          const reader = new FileReader();
+          const base64 = await new Promise<string>((resolve, reject) => {
+            reader.onload = () => resolve(reader.result as string);
+            reader.onerror = reject;
+            reader.readAsDataURL(compressedBlob!);
+          });
+          await addImageToFirestore(user.uid, {
+            spotFirebaseId: firebaseId,
+            base64,
+            createdAt: Date.now(),
+          });
+        } catch (imgUploadErr) {
+          console.warn("[KeepCheck] Image upload to Firestore failed (will retry on next sync):", imgUploadErr);
+        }
+      }
+
+      console.log(`[KeepCheck] Spot saved (local: ${spotId}, firebase: ${firebaseId})`);
+
       setName("");
       setCategory("Restaurant");
       setRating(7);
       setComment("");
       setImageFile(null);
       if (fileInputRef.current) fileInputRef.current.value = "";
+      
+      setSuccess(true);
+      
+      setTimeout(() => {
+        setSuccess(false);
+        closeFormModal();
+      }, 1200);
     } catch (err: unknown) {
-      // Handle quota exceeded (phone out of disk space).
       if (
         err instanceof DOMException &&
         err.name === "QuotaExceededError"
@@ -442,7 +840,8 @@ export default function Home() {
   }
 
   async function handleExport() {
-    const allSpots = await db.spots.toArray();
+    if (!user) return;
+    const allSpots = await db.spots.where("userId").equals(user.uid).toArray();
     const json = JSON.stringify(allSpots, null, 2);
     const blob = new Blob([json], { type: "application/json" });
     const url = URL.createObjectURL(blob);
@@ -455,291 +854,584 @@ export default function Home() {
     URL.revokeObjectURL(url);
   }
 
-  /** Cascade delete: remove associated images THEN the spot record. */
   async function deleteEntry(id: number) {
     try {
+      setDeletingIds((prev) => new Set(prev).add(id));
+      const spot = await db.spots.get(id);
+
+      await new Promise((resolve) => setTimeout(resolve, 400));
+
       await db.transaction("rw", db.spots, db.images, async () => {
         await db.images.where("spotId").equals(id).delete();
         await db.spots.delete(id);
       });
+
+      if (spot?.firebaseId && user) {
+        try {
+          await deleteImagesForSpotFromFirestore(user.uid, spot.firebaseId);
+          await deleteSpotFromFirestore(user.uid, spot.firebaseId);
+        } catch (fireErr) {
+          console.warn("[KeepCheck] Firestore delete failed (offline?):", fireErr);
+        }
+      }
+
+      setDeletingIds((prev) => {
+        const next = new Set(prev);
+        next.delete(id);
+        return next;
+      });
     } catch (error) {
       console.error("Failed to delete entry:", error);
-      alert("Could not delete the entry. Please try again.");
+      setDeletingIds((prev) => {
+        const next = new Set(prev);
+        next.delete(id);
+        return next;
+      });
     }
   }
 
   /* ---------- render ---------- */
 
   return (
-    <div className="mx-auto flex min-h-dvh w-full max-w-screen-lg flex-col px-4 sm:px-6 lg:px-8 py-6 sm:py-10 lg:py-16">
-      {/* ---- Header ---- */}
-      <header className="relative mb-6 sm:mb-8 text-center">
-        {/* Theme toggle — top-right */}
-        <div className="absolute right-0 top-0">
-          <ThemeToggle dark={dark} onToggle={() => setDark((d) => !d)} />
-        </div>
+    <div className="relative mx-auto flex min-h-dvh w-full max-w-screen-lg flex-col px-4 sm:px-6 lg:px-8 py-6 sm:py-10">
+      {/* ---- SVG Gooey filters ---- */}
+      <svg className="absolute h-0 w-0" aria-hidden="true">
+        <defs>
+          <filter id="gooey-bg">
+            <feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" />
+            <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -7" result="gooey" />
+            <feComposite in="SourceGraphic" in2="gooey" operator="atop" />
+          </filter>
+          <filter id="gooey-medium">
+            <feGaussianBlur in="SourceGraphic" stdDeviation="6" result="blur" />
+            <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -8" result="gooey" />
+            <feComposite in="SourceGraphic" in2="gooey" operator="atop" />
+          </filter>
+          <filter id="gooey-rating">
+            <feGaussianBlur in="SourceGraphic" stdDeviation="4" result="blur" />
+            <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 16 -6" result="goo" />
+            <feComposite in="SourceGraphic" in2="goo" operator="atop" />
+          </filter>
+        </defs>
+      </svg>
 
-        <h1 className="text-2xl sm:text-3xl lg:text-4xl font-serif font-bold tracking-tight text-text-primary">
-          Keep<span className="text-accent">Check</span>
-        </h1>
-        <p className="mt-1 text-sm sm:text-base text-text-secondary">
-          Track &amp; rate every café and restaurant.
-        </p>
-      </header>
+      {/* ---- Background blobs ---- */}
+      <div className="pointer-events-none fixed inset-0 overflow-hidden opacity-40" style={{ filter: "url(#gooey-bg)" }}>
+        <div className="animate-blob-1 absolute -top-32 -left-32 h-80 w-80 rounded-full bg-accent/10" />
+        <div className="animate-blob-2 absolute -bottom-40 -right-24 h-96 w-96 rounded-full bg-category-cafe/10" />
+        <div className="animate-blob-3 absolute top-1/2 left-1/3 h-56 w-56 rounded-full bg-category-restaurant/10" />
+      </div>
 
-      {/* ---- Form ---- */}
-      <form
-        onSubmit={handleSubmit}
-        className="mx-auto w-full max-w-lg mb-8 sm:mb-10 rounded-2xl border border-text-secondary/15 bg-surface p-4 sm:p-5 shadow-sm"
-      >
-        {/* Name */}
-        <label
-          htmlFor="spot-name"
-          className="mb-1.5 block text-xs font-medium uppercase tracking-wider text-text-secondary"
-        >
-          Business / Spot Name
-        </label>
-        <input
-          id="spot-name"
-          type="text"
-          required
-          value={name}
-          onChange={(e) => setName(e.target.value)}
-          placeholder="e.g. Starbucks, Samgyupsal…"
-          className="mb-5 w-full rounded-lg border border-text-secondary/20 bg-bg px-3 py-3 text-sm sm:text-base text-text-primary outline-none transition-colors placeholder:text-text-secondary/40 focus:border-accent focus:ring-1 focus:ring-accent"
-        />
+      {/* ---- Header ---- */}
+      <header className="relative mb-6 sm:mb-8 gsap-header gsap-reveal">
+        <div className="flex items-center justify-between">
+          <div>
+            <h1 className="text-2xl sm:text-3xl lg:text-4xl font-serif font-bold tracking-tight text-text-primary">
+              Keep<span className="text-accent">Check</span>
+            </h1>
+            <p className="mt-1 text-sm sm:text-base text-text-secondary">
+              Track &amp; rate every café and restaurant.
+            </p>
+          </div>
 
-        {/* Category */}
-        <p className="mb-2 text-xs font-medium uppercase tracking-wider text-text-secondary">
-          Category
-        </p>
-        <div className="mb-5">
-          <CategoryPills value={category} onChange={setCategory} />
-        </div>
+          <div className="flex items-center gap-2.5">
+            <ThemeToggle dark={dark} onToggle={() => setDark((d) => !d)} />
+            
+            {/* Desktop Add Spot button */}
+            {user && (
+              <button
+                type="button"
+                onClick={openFormModal}
+                className="hidden sm:inline-flex items-center gap-1.5 neu-button rounded-xl px-4 py-2.5 text-xs sm:text-sm font-semibold text-accent cursor-pointer hover:text-accent-glow"
+              >
+                <Plus className="h-4 w-4" />
+                Add Spot
+              </button>
+            )}
 
-        {/* Rating */}
-        <p className="mb-2 text-xs font-medium uppercase tracking-wider text-text-secondary">
-          Rating&ensp;
-          <span className="normal-case tracking-normal text-text-secondary/60">
-            ({rating} / 10)
-          </span>
-        </p>
-        <div className="mb-5">
-          <RatingPills value={rating} onChange={setRating} />
+            {user && (
+              <UserProfile
+                photoURL={user.photoURL}
+                displayName={user.displayName}
+                onSignOut={signOut}
+              />
+            )}
+          </div>
         </div>
+      </header>
 
-        {/* Comment */}
-        <label
-          htmlFor="spot-comment"
-          className="mb-1.5 block text-xs font-medium uppercase tracking-wider text-text-secondary"
-        >
-          Comment
-        </label>
-        <textarea
-          id="spot-comment"
-          rows={3}
-          value={comment}
-          onChange={(e) => setComment(e.target.value)}
-          placeholder="Notes about the food, drink, vibe, or service…"
-          className="mb-5 w-full resize-none rounded-lg border border-text-secondary/20 bg-bg px-3 py-3 text-sm sm:text-base text-text-primary outline-none transition-colors placeholder:text-text-secondary/40 focus:border-accent focus:ring-1 focus:ring-accent"
-        />
-
-        {/* Photo upload */}
-        <p className="mb-2 text-xs font-medium uppercase tracking-wider text-text-secondary">
-          Photo{" "}
-          <span className="normal-case tracking-normal text-text-secondary/60">
-            (optional)
-          </span>
-        </p>
+      {/* ---- Spotlight Carousel ---- */}
+      <section className="relative w-full mb-8 sm:mb-12 gsap-spotlight gsap-reveal">
+        <div className="flex items-center justify-between mb-4">
+          <h2 className="text-base sm:text-lg font-serif font-semibold text-text-primary flex items-center gap-2">
+            <span>✨ Spotlight Logs</span>
+            {filteredSpots && filteredSpots.length > 0 && (
+              <span className="text-xs font-mono font-normal text-text-secondary/60">
+                ({filteredSpots.length} items)
+              </span>
+            )}
+          </h2>
 
-        <div className="mb-5">
-          {/* Custom file button */}
-          <label
-            htmlFor="spot-photo"
-            className="inline-flex items-center gap-2 rounded-lg border border-text-secondary/20 bg-bg px-4 py-3 text-sm font-medium text-text-secondary transition-all hover:opacity-85 cursor-pointer min-h-[44px]"
-          >
-            <Camera className="h-4 w-4" />
-            {imageFile ? "Change Photo" : "Take or Choose Photo"}
-          </label>
-          <input
-            ref={fileInputRef}
-            id="spot-photo"
-            type="file"
-            accept="image/*"
-            onChange={(e) => setImageFile(e.target.files?.[0] ?? null)}
-            className="sr-only"
-          />
+          <div className="flex items-center gap-2">
+            {spots && spots.length > 0 && (
+              <>
+                <button
+                  type="button"
+                  onClick={() => scrollCarousel("left")}
+                  className="neu-button flex h-9 w-9 items-center justify-center rounded-full text-text-secondary cursor-pointer hover:text-accent"
+                  aria-label="Scroll left"
+                >
+                  <ChevronLeft className="h-4 w-4" />
+                </button>
+                <button
+                  type="button"
+                  onClick={() => scrollCarousel("right")}
+                  className="neu-button flex h-9 w-9 items-center justify-center rounded-full text-text-secondary cursor-pointer hover:text-accent"
+                  aria-label="Scroll right"
+                >
+                  <ChevronRight className="h-4 w-4" />
+                </button>
+              </>
+            )}
+          </div>
+        </div>
 
-          {/* Preview strip — uses raw object URL, NOT makeThumbnail() */}
-          {previewUrl && (
-            <div className="relative mt-3 inline-block">
-              <img
-                src={previewUrl}
-                alt="Selected photo preview"
-                className="h-24 w-24 rounded-lg object-cover border border-text-secondary/20"
-              />
-              <button
-                type="button"
-                onClick={() => {
-                  setImageFile(null);
-                  if (fileInputRef.current) fileInputRef.current.value = "";
-                }}
-                className="absolute -right-2 -top-2 flex h-6 w-6 items-center justify-center rounded-full bg-accent text-white text-xs shadow-md hover:opacity-90 transition-colors cursor-pointer"
-                aria-label="Remove photo"
+        {/* Carousel Window */}
+        <div className="relative group rounded-3xl p-1 bg-transparent">
+          {spots === undefined ? (
+            <div className="py-20 text-center text-sm font-mono text-text-secondary animate-pulse neu-raised">Loading spots…</div>
+          ) : spots.length === 0 ? (
+            <div className="py-16 text-center neu-raised bg-bg/40 border border-dashed border-text-secondary/25">
+              <div className="neu-raised bg-bg inline-flex h-20 w-20 items-center justify-center rounded-3xl mx-auto mb-4">
+                <span className="text-3xl">☕</span>
+              </div>
+              <p className="text-sm text-text-secondary font-medium">
+                No spots logged yet — add your first cafe or restaurant to get started!
+              </p>
+            </div>
+          ) : filteredSpots && filteredSpots.length === 0 ? (
+            <div className="py-16 text-center neu-raised">
+              <p className="text-sm text-text-secondary">No spots match your current filters.</p>
+            </div>
+          ) : (
+            <div className="carousel-mask overflow-hidden rounded-3xl">
+              <div
+                ref={carouselRef}
+                className="carousel-container gap-6 py-6 px-4 scrollbar-none"
               >
-                ✕
-              </button>
+                {filteredSpots && filteredSpots.map((spot, index) => (
+                  <div
+                    key={spot.id}
+                    className={`carousel-card group/item relative shrink-0 transition-transform duration-300 ${deletingIds.has(spot.id!) ? "animate-melt" : ""}`}
+                  >
+                    <SpotCard
+                      spot={spot}
+                      index={index}
+                      onClick={() => spot.id !== undefined && setSelectedSpotId(spot.id)}
+                    />
+                    <button
+                      type="button"
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        spot.id !== undefined && deleteEntry(spot.id);
+                      }}
+                      className="absolute right-4 bottom-4 neu-button inline-flex h-9 w-9 items-center justify-center rounded-full text-text-secondary/70 opacity-0 group-hover/item:opacity-100 transition-opacity duration-300 hover:text-red-500 active:shadow-neu-inset cursor-pointer z-10 bg-bg"
+                      aria-label="Delete entry"
+                    >
+                      <Trash2 className="h-4 w-4" />
+                    </button>
+                  </div>
+                ))}
+              </div>
             </div>
           )}
         </div>
 
-        {/* Submit */}
-        <button
-          type="submit"
-          disabled={saving || !name.trim()}
-          className="w-full rounded-lg bg-accent py-3 text-sm sm:text-base font-semibold text-white transition-opacity hover:opacity-90 active:opacity-80 disabled:opacity-40 cursor-pointer min-h-[44px]"
-        >
-          {saving ? "Saving…" : "Log Spot"}
-        </button>
-      </form>
+        {/* Scroll Progress line indicator */}
+        {filteredSpots && filteredSpots.length > 1 && (
+          <div className="mt-4 flex items-center justify-center gap-3">
+            <span className="text-[9px] font-mono text-text-secondary/50 uppercase tracking-wider">START</span>
+            <div className="h-1.5 w-32 rounded-full shadow-neu-inset bg-bg/50 relative overflow-hidden">
+              <div
+                className="absolute top-0 bottom-0 bg-accent rounded-full transition-all duration-100"
+                style={{
+                  left: "0",
+                  width: "20px",
+                  transform: `translateX(calc(${scrollPercent} * (128px - 20px) / 100))`,
+                }}
+              />
+            </div>
+            <span className="text-[9px] font-mono text-text-secondary/50 uppercase tracking-wider">END</span>
+          </div>
+        )}
+      </section>
 
-      {/* ---- Feed ---- */}
-      <section className="flex flex-1 flex-col">
-        {/* Title + Export */}
-        <div className="mb-4 flex items-center justify-between gap-3">
+      {/* ---- Bottom Section: Activity Feed & Logs ---- */}
+      <section className="w-full mb-16">
+        
+        {/* Activity feed controls header */}
+        <div className="flex items-center justify-between mb-4 gsap-feed-header gsap-reveal">
           <h2 className="text-base sm:text-lg font-serif font-semibold text-text-primary">
-            Your Logs
-            {spots && spots.length > 0 && (
-              <span className="ml-2 text-sm font-mono font-normal text-text-secondary">
-                ({filteredSpots ? filteredSpots.length : spots.length})
-              </span>
-            )}
+            Activity Feed
           </h2>
-
           {spots && spots.length > 0 && (
             <button
               type="button"
               onClick={handleExport}
-              className="rounded-lg border border-text-secondary/20 bg-surface px-3.5 py-2.5 text-xs sm:text-sm font-medium text-text-secondary transition-all hover:bg-bg active:scale-95 cursor-pointer min-h-[44px]"
+              className="neu-button rounded-xl px-3 py-1.5 text-xs font-semibold text-text-secondary cursor-pointer min-h-[34px] hover:text-text-primary"
             >
               Export Backup
             </button>
           )}
         </div>
 
-        {/* ---- Control bar: Search + Category + Sort ---- */}
-        {spots && spots.length > 0 && (
-          <div className="mb-4 sm:mb-5 flex flex-col gap-3">
-            {/* Search */}
-            <div className="relative">
-              <svg
-                className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-text-secondary/50"
-                xmlns="http://www.w3.org/2000/svg"
-                viewBox="0 0 24 24"
-                fill="none"
-                stroke="currentColor"
-                strokeWidth="2"
-                strokeLinecap="round"
-                strokeLinejoin="round"
-              >
-                <circle cx="11" cy="11" r="8" />
-                <path d="m21 21-4.3-4.3" />
-              </svg>
-              <input
-                id="search-logs"
-                type="text"
-                value={search}
-                onChange={(e) => setSearch(e.target.value)}
-                placeholder="Search spots or comments…"
-                className="w-full rounded-lg border border-text-secondary/20 bg-surface py-3 pl-10 pr-3 text-sm sm:text-base text-text-primary outline-none transition-colors placeholder:text-text-secondary/40 focus:border-accent focus:ring-1 focus:ring-accent min-h-[44px]"
-              />
-            </div>
+        {spots && spots.length > 0 ? (
+          <div className="space-y-5">
+            {/* Filter controls row */}
+            <div className="neu-raised p-4 sm:p-5 flex flex-col md:flex-row gap-4 items-stretch md:items-center justify-between gsap-feed-filters gsap-reveal">
+              {/* Search */}
+              <div className="relative flex-1">
+                <svg
+                  className="pointer-events-none absolute left-4 top-1/2 h-4 w-4 -translate-y-1/2 text-text-secondary/50"
+                  xmlns="http://www.w3.org/2000/svg"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth="2"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                >
+                  <circle cx="11" cy="11" r="8" />
+                  <path d="m21 21-4.3-4.3" />
+                </svg>
+                <input
+                  id="search-logs"
+                  type="text"
+                  value={search}
+                  onChange={(e) => setSearch(e.target.value)}
+                  placeholder="Search spots by name or notes…"
+                  className="neu-input w-full pl-11 pr-4"
+                />
+                {search && (
+                  <button
+                    type="button"
+                    onClick={() => setSearch("")}
+                    className="absolute right-3.5 top-1/2 -translate-y-1/2 text-xs text-text-secondary/60 hover:text-accent font-bold p-1 cursor-pointer"
+                  >
+                    ✕
+                  </button>
+                )}
+              </div>
 
-            {/* Category filter + Sort buttons — scrollable row on mobile */}
-            <div className="flex items-center gap-1.5 overflow-x-auto pb-1 -mb-1 scrollbar-none">
-              {/* Category filter */}
-              <PillButton
-                label="All"
-                active={catFilter === "All"}
-                onClick={() => setCatFilter("All")}
-              />
-              <PillButton
-                label="☕ Cafe"
-                active={catFilter === "Cafe"}
-                onClick={() => setCatFilter("Cafe")}
-              />
-              <PillButton
-                label="🍽️ Restaurant"
-                active={catFilter === "Restaurant"}
-                onClick={() => setCatFilter("Restaurant")}
-              />
+              {/* Filters */}
+              <div className="flex items-center gap-2 overflow-x-auto pb-1 md:pb-0 scrollbar-none">
+                <PillButton label="All" active={catFilter === "All"} onClick={() => setCatFilter("All")} />
+                <PillButton label="☕ Cafe" active={catFilter === "Cafe"} onClick={() => setCatFilter("Cafe")} />
+                <PillButton label="🍽️ Restaurant" active={catFilter === "Restaurant"} onClick={() => setCatFilter("Restaurant")} />
 
-              {/* Divider */}
-              <div className="mx-1 h-5 w-px shrink-0 bg-text-secondary/20" />
+                <div className="mx-1 h-5 w-px shrink-0 bg-text-secondary/20" />
 
-              {/* Sort */}
-              <PillButton
-                label="Newest"
-                active={sortMode === "newest"}
-                onClick={() => setSortMode("newest")}
-              />
-              <PillButton
-                label="Highest"
-                active={sortMode === "highest"}
-                onClick={() => setSortMode("highest")}
-              />
-              <PillButton
-                label="Lowest"
-                active={sortMode === "lowest"}
-                onClick={() => setSortMode("lowest")}
-              />
+                <PillButton label="Newest" active={sortMode === "newest"} onClick={() => setSortMode("newest")} />
+                <PillButton label="Highest" active={sortMode === "highest"} onClick={() => setSortMode("highest")} />
+                <PillButton label="Lowest" active={sortMode === "lowest"} onClick={() => setSortMode("lowest")} />
+              </div>
             </div>
+
+            {/* Logs display */}
+            {filteredSpots && filteredSpots.length === 0 ? (
+              <div className="py-16 text-center neu-raised">
+                <p className="text-sm text-text-secondary">No logs match your current query or filters.</p>
+              </div>
+            ) : (
+              /* List/Table View Mode */
+              <div className="neu-raised p-4 space-y-3 pt-2">
+                {filteredSpots && filteredSpots.map((spot) => (
+                  <div
+                    key={spot.id}
+                    onClick={() => spot.id !== undefined && setSelectedSpotId(spot.id)}
+                    className="gsap-list-item neu-button p-4 flex items-center justify-between gap-3 text-sm cursor-pointer hover:bg-bg/85 relative transition-all"
+                  >
+                    <div className="min-w-0 flex-1 flex items-center gap-3.5">
+                      <span className="text-2xl flex-shrink-0">{spot.category === "Cafe" ? "☕" : "🍽️"}</span>
+                      <div className="min-w-0">
+                        <p className="font-semibold text-text-primary truncate text-base">{spot.name}</p>
+                        <div className="flex items-center gap-2.5 mt-1">
+                          <span className="text-[10px] text-text-secondary/60 font-mono flex items-center gap-1">
+                            <Clock className="h-3 w-3" />
+                            {new Date(spot.createdAt).toLocaleDateString(undefined, { month: "short", day: "numeric" })}
+                          </span>
+                          <span className="text-text-secondary/20">•</span>
+                          {spot.comment ? (
+                            <p className="text-xs text-text-secondary truncate max-w-[200px] sm:max-w-xs md:max-w-md">
+                              {spot.comment}
+                            </p>
+                          ) : (
+                            <span className="text-xs text-text-secondary/40 italic">No notes</span>
+                          )}
+                        </div>
+                      </div>
+                    </div>
+                    
+                    <div className="flex items-center gap-3.5 flex-shrink-0">
+                      <span className="font-bold font-mono text-accent text-xs bg-bg/50 shadow-neu-inset px-2.5 py-1 rounded-full">
+                        ★ {spot.rating}
+                      </span>
+                      <button
+                        type="button"
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          spot.id !== undefined && deleteEntry(spot.id);
+                        }}
+                        className="text-text-secondary/50 hover:text-red-500 transition-colors p-1"
+                        aria-label="Delete log"
+                      >
+                        <Trash2 className="h-4 w-4" />
+                      </button>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            )}
+          </div>
+        ) : (
+          <div className="py-12 text-center neu-raised">
+            <p className="text-sm text-text-secondary">Your logs feed will display here once you add a spot.</p>
           </div>
         )}
+      </section>
 
-        {/* ---- Feed content ---- */}
-        {spots === undefined && (
-          <p className="py-12 text-center text-sm font-mono text-text-secondary animate-pulse">Loading…</p>
-        )}
+      {/* ---- Form Modal Overlay ---- */}
+      {isFormOpen && (
+        <div
+          ref={modalContainerRef}
+          className="fixed inset-0 z-50 flex items-end sm:items-center justify-center p-0 sm:p-4"
+          role="dialog"
+          aria-modal="true"
+          aria-label="Log new food spot"
+        >
+          {/* Backdrop Overlay */}
+          <div
+            ref={backdropOverlayRef}
+            className="absolute inset-0 bg-black/60 backdrop-blur-sm shadow-[0_0_8px_rgba(0,0,0,0.4)]"
+            onClick={closeFormModal}
+          />
 
-        {spots && spots.length === 0 && (
-          <p className="py-12 text-center text-sm text-text-secondary">
-            No spots logged yet — add your first one above!
-          </p>
-        )}
+          {/* Localized SVG filter for gooey modal container background */}
+          <svg className="absolute h-0 w-0" aria-hidden="true">
+            <defs>
+              <filter id="gooey-modal">
+                <feGaussianBlur in="SourceGraphic" stdDeviation="15" result="blur" />
+                <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 28 -10" result="gooey" />
+                <feComposite in="SourceGraphic" in2="gooey" operator="atop" />
+              </filter>
+            </defs>
+          </svg>
 
-        {filteredSpots && filteredSpots.length === 0 && spots && spots.length > 0 && (
-          <p className="py-12 text-center text-sm text-text-secondary">
-            No logs match your current filters.
-          </p>
-        )}
+          {/* Sibling Layer 1: Gooey Background canvas */}
+          <div
+            className="absolute inset-0 pointer-events-none flex items-end sm:items-center justify-center p-0 sm:p-4 overflow-hidden"
+            style={{ filter: "url(#gooey-modal)" }}
+          >
+            {/* The liquid background block */}
+            <div
+              ref={modalGooeyBgRef}
+              className="w-full sm:max-w-md h-[92dvh] sm:h-[630px] rounded-t-[40px] sm:rounded-[40px] bg-bg relative"
+              style={{
+                boxShadow: "0 -3px 0 0 var(--accent)",
+                transformOrigin: "bottom center"
+              }}
+            >
+              {/* Extra floating liquid drops inside gooey layer to trigger organic morphing on open/close */}
+              <div className="absolute -top-6 left-1/4 w-8 h-8 rounded-full bg-accent opacity-20" />
+              <div className="absolute -top-4 right-1/3 w-6 h-6 rounded-full bg-accent opacity-30" />
+            </div>
+          </div>
 
-        {filteredSpots && filteredSpots.length > 0 && (
-          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5 sm:gap-6 pb-6 pt-3">
-            {filteredSpots.map((spot) => (
-              <div key={spot.id} className="group relative">
-                <SpotCard
-                  spot={spot}
-                  onClick={() =>
-                    spot.id !== undefined && setSelectedSpotId(spot.id)
-                  }
+          {/* Sibling Layer 2: Clean Crisp Form Content */}
+          <div
+            ref={modalContentRef}
+            className="w-full sm:max-w-md rounded-t-3xl sm:rounded-3xl p-5 sm:p-6 overflow-y-auto max-h-[92dvh] sm:max-h-[85dvh] relative flex flex-col z-10 bg-transparent"
+          >
+            {/* Header */}
+            <div className="flex items-center justify-between mb-4 border-b border-text-secondary/10 pb-2.5">
+              <h3 className="text-base sm:text-lg font-serif font-bold text-text-primary">
+                Log a Food Spot
+              </h3>
+              <button
+                type="button"
+                onClick={closeFormModal}
+                className="neu-button flex h-8 w-8 items-center justify-center rounded-full text-text-secondary cursor-pointer hover:text-red-500"
+                aria-label="Close form"
+              >
+                <X className="h-4 w-4" />
+              </button>
+            </div>
+
+            {/* Form */}
+            <form onSubmit={handleSubmit} className="space-y-4">
+              {/* Business Name */}
+              <div>
+                <label
+                  htmlFor="spot-name"
+                  className="mb-1.5 block text-xs font-semibold uppercase tracking-wider text-text-secondary"
+                >
+                  Business / Spot Name
+                </label>
+                <input
+                  id="spot-name"
+                  type="text"
+                  required
+                  value={name}
+                  onChange={(e) => setName(e.target.value)}
+                  placeholder="e.g. Sam's Cafe, Shake Shack…"
+                  className="neu-input w-full"
                 />
-                <button
-                  type="button"
-                  onClick={(e) => {
-                    e.stopPropagation();
-                    spot.id !== undefined && deleteEntry(spot.id);
+              </div>
+
+              {/* Category selector */}
+              <div>
+                <p className="mb-1.5 text-xs font-semibold uppercase tracking-wider text-text-secondary">
+                  Category
+                </p>
+                <CategoryPills value={category} onChange={setCategory} />
+              </div>
+
+              {/* Rating selector */}
+              <div>
+                <p className="mb-1.5 text-xs font-semibold uppercase tracking-wider text-text-secondary flex justify-between">
+                  <span>Rating</span>
+                  <span className="font-mono text-accent">({rating} / 10)</span>
+                </p>
+                <RatingPills value={rating} onChange={setRating} />
+              </div>
+
+              {/* Comments textarea */}
+              <div>
+                <label
+                  htmlFor="spot-comment"
+                  className="mb-1.5 block text-xs font-semibold uppercase tracking-wider text-text-secondary"
+                >
+                  Comments
+                </label>
+                <textarea
+                  id="spot-comment"
+                  rows={4}
+                  value={comment}
+                  onChange={(e) => setComment(e.target.value)}
+                  placeholder="Notes on experience, cost, or delicious dishes…"
+                  className="neu-input w-full resize-none"
+                />
+              </div>
+
+              {/* Photo Area */}
+              <div>
+                <p className="mb-1.5 text-xs font-semibold uppercase tracking-wider text-text-secondary">
+                  Photo <span className="text-[10px] text-text-secondary/50 lowercase font-normal">(optional)</span>
+                </p>
+                <div
+                  onDragOver={(e) => { e.preventDefault(); setDragActive(true); }}
+                  onDragLeave={() => setDragActive(false)}
+                  onDrop={(e) => {
+                    e.preventDefault();
+                    setDragActive(false);
+                    if (e.dataTransfer.files?.[0]) {
+                      setImageFile(e.dataTransfer.files[0]);
+                    }
                   }}
-                  className="absolute right-3 bottom-3 inline-flex h-9 w-9 items-center justify-center rounded-full bg-surface border border-text-secondary/15 text-text-secondary/70 opacity-60 transition-all hover:opacity-100 hover:bg-red-50 hover:text-red-600 active:scale-95 active:opacity-100 active:bg-red-100 dark:bg-surface dark:text-text-secondary/70 dark:hover:bg-red-950/30 dark:hover:text-red-400 cursor-pointer backdrop-blur-sm shadow-sm z-10"
-                  aria-label="Delete entry"
+                  onClick={() => fileInputRef.current?.click()}
+                  className={`
+                    upload-dropzone p-4 flex flex-col items-center justify-center cursor-pointer transition-all duration-300 min-h-[100px]
+                    ${dragActive ? "active-drop animate-pulse-border" : ""}
+                    ${imageFile ? "border-accent/40 bg-accent/5" : "border-text-secondary/25"}
+                  `}
                 >
-                  <Trash2 className="h-4 w-4" />
-                </button>
+                  <Camera className={`h-5 w-5 mb-1 ${imageFile ? "text-accent" : "text-text-secondary/60"}`} />
+                  <p className="text-xs font-bold text-text-primary">
+                    {imageFile ? "Change Photo" : "Upload or Drop Image"}
+                  </p>
+                  <p className="text-[10px] text-text-secondary/45 mt-0.5">
+                    Max 1MB JPEG/PNG
+                  </p>
+                  <input
+                    ref={fileInputRef}
+                    id="spot-photo"
+                    type="file"
+                    accept="image/*"
+                    onChange={(e) => setImageFile(e.target.files?.[0] ?? null)}
+                    className="sr-only"
+                  />
+                </div>
+
+                {previewUrl && (
+                  <div className="relative mt-3 inline-block animate-liquid-pop">
+                    <img
+                      src={previewUrl}
+                      alt="Selected photo preview"
+                      className="h-16 w-16 rounded-2xl object-cover shadow-neu-subtle p-1 bg-bg border border-accent/20"
+                    />
+                    <button
+                      type="button"
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        setImageFile(null);
+                        if (fileInputRef.current) fileInputRef.current.value = "";
+                      }}
+                      className="absolute -right-2 -top-2 flex h-5 w-5 items-center justify-center rounded-full bg-accent text-white text-[9px] shadow hover:scale-110 active:scale-90 transition-all cursor-pointer border border-bg"
+                      aria-label="Remove photo"
+                    >
+                      ✕
+                    </button>
+                  </div>
+                )}
               </div>
-            ))}
+
+              {/* Submit Button */}
+              <button
+                type="submit"
+                disabled={saving || !name.trim() || success}
+                className={`
+                  w-full rounded-2xl py-3 text-sm sm:text-base font-semibold text-white
+                  transition-all duration-300 cursor-pointer min-h-[44px] flex items-center justify-center gap-2
+                  ${success
+                    ? "bg-green-600 shadow-neu-inset scale-[0.98]"
+                    : "bg-accent shadow-neu-button hover:shadow-neu-raised active:shadow-neu-inset"
+                  }
+                  disabled:opacity-40
+                `}
+              >
+                {saving ? (
+                  <>
+                    <div className="h-4 w-4 animate-spin rounded-full border-2 border-white/20 border-t-white" />
+                    Saving...
+                  </>
+                ) : success ? (
+                  <span className="gsap-success-tick flex items-center gap-1 font-bold">
+                    ✓ Saved!
+                  </span>
+                ) : (
+                  "Log Spot"
+                )}
+              </button>
+            </form>
           </div>
-        )}
-      </section>
+        </div>
+      )}
+
+      {/* ---- Floating Action Button (FAB) ---- */}
+      {user && (
+        <button
+          type="button"
+          onClick={openFormModal}
+          onMouseEnter={() => handleFABHover(true)}
+          onMouseLeave={() => handleFABHover(false)}
+          onMouseDown={() => handleFABPress(true)}
+          onMouseUp={() => handleFABPress(false)}
+          className="gsap-fab fixed bottom-6 right-6 z-40 neu-button h-14 w-14 rounded-full bg-accent text-white flex items-center justify-center shadow-lg cursor-pointer transition-all duration-300 group"
+          aria-label="Add new spot"
+        >
+          <Plus className="h-6 w-6 text-white" />
+        </button>
+      )}
 
       {/* ---- Detail modal ---- */}
       {selectedSpotId !== null && (
@@ -751,3 +1443,14 @@ export default function Home() {
     </div>
   );
 }
+
+/* ------------------------------------------------------------------ */
+/*  Export with AuthGuard wrapper                                       */
+/* ------------------------------------------------------------------ */
+export default function Home() {
+  return (
+    <AuthGuard>
+      <HomePage />
+    </AuthGuard>
+  );
+}
diff --git a/components/AuthGuard.tsx b/components/AuthGuard.tsx
new file mode 100644
index 0000000..244aaec
--- /dev/null
+++ b/components/AuthGuard.tsx
@@ -0,0 +1,43 @@
+"use client";
+
+import { useEffect } from "react";
+import { useRouter } from "next/navigation";
+import { useAuth } from "@/lib/auth";
+
+/**
+ * Client-side auth guard.
+ *
+ * Renders children only when the user is authenticated.
+ * Redirects to /login otherwise.
+ * Shows a neumorphic loading skeleton during the auth check.
+ */
+export default function AuthGuard({ children }: { children: React.ReactNode }) {
+  const { user, loading } = useAuth();
+  const router = useRouter();
+
+  useEffect(() => {
+    if (!loading && !user) {
+      router.replace("/login");
+    }
+  }, [user, loading, router]);
+
+  if (loading) {
+    return (
+      <div className="flex min-h-dvh items-center justify-center bg-bg">
+        <div className="neu-raised flex flex-col items-center gap-4 rounded-3xl p-10">
+          <div className="h-12 w-12 animate-spin rounded-full border-4 border-text-secondary/20 border-t-accent" />
+          <p className="text-sm font-medium text-text-secondary animate-pulse">
+            Loading…
+          </p>
+        </div>
+      </div>
+    );
+  }
+
+  if (!user) {
+    // Will redirect — render nothing to avoid flash.
+    return null;
+  }
+
+  return <>{children}</>;
+}
diff --git a/components/SpotDetailModal.tsx b/components/SpotDetailModal.tsx
index ba7d761..47db812 100644
--- a/components/SpotDetailModal.tsx
+++ b/components/SpotDetailModal.tsx
@@ -19,14 +19,7 @@ interface SpotDetailModalProps {
 /* ------------------------------------------------------------------ */
 
 /**
- * Full-resolution image viewer modal.
- *
- * Queries the `images` store for the Blob associated with `spotId`,
- * converts it to a displayable object URL, and revokes the URL on
- * unmount / image change to prevent memory leaks.
- *
- * Includes an opportunistic "Regenerate thumbnail" button so users can
- * fix old 150px thumbnails created before the resolution bump to 400px.
+ * Full-resolution image viewer modal — neumorphic design.
  */
 export default function SpotDetailModal({
   spotId,
@@ -65,6 +58,14 @@ export default function SpotDetailModal({
     return () => window.removeEventListener("keydown", handleKey);
   }, [onClose]);
 
+  /* ---- Prevent body scroll when modal is open ---- */
+  useEffect(() => {
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.body.style.overflow = "";
+    };
+  }, []);
+
   /* ---- Regenerate thumbnail from full-res Blob ---- */
   const handleRegenerate = useCallback(async () => {
     if (!image?.blob) return;
@@ -84,9 +85,8 @@ export default function SpotDetailModal({
   /* ---- Render ---- */
   return (
     <div
-      className="fixed inset-0 z-50 flex items-center justify-center bg-black/80 backdrop-blur-sm p-4"
+      className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 p-4 animate-backdrop"
       onClick={(e) => {
-        // Close when clicking the backdrop (not the image itself).
         if (e.target === e.currentTarget) onClose();
       }}
       role="dialog"
@@ -97,48 +97,61 @@ export default function SpotDetailModal({
       <button
         type="button"
         onClick={onClose}
-        className="absolute right-4 top-4 z-10 flex h-11 w-11 items-center justify-center rounded-full bg-surface/90 text-text-primary backdrop-blur-sm transition-all hover:bg-bg active:scale-95 cursor-pointer border border-text-secondary/15"
+        className="absolute right-4 top-4 z-10 neu-button flex h-11 w-11 items-center justify-center rounded-full text-text-primary cursor-pointer"
         aria-label="Close"
       >
         <X className="h-5 w-5" />
       </button>
 
-      {/* Image or placeholder */}
-      {image === undefined ? (
-        /* Still loading from IndexedDB */
-        <div className="text-sm font-mono text-text-secondary">Loading…</div>
-      ) : objectUrl ? (
-        <div className="flex flex-col items-center gap-3">
-          <img
-            src={objectUrl}
-            alt="Full-resolution spot photo"
-            className="max-h-[85dvh] max-w-full rounded-lg object-contain shadow-2xl border border-text-secondary/15"
-          />
-
-          {/* Regenerate thumbnail — fixes old 150px thumbnails */}
-          {!regenerated ? (
-            <button
-              type="button"
-              onClick={handleRegenerate}
-              disabled={regenerating}
-              className="inline-flex items-center gap-2 rounded-full bg-surface/90 px-4 py-2 text-xs font-medium text-text-primary backdrop-blur-sm transition-all hover:bg-bg active:scale-95 disabled:opacity-50 cursor-pointer border border-text-secondary/15"
-            >
-              <RefreshCw
-                className={`h-3.5 w-3.5 ${regenerating ? "animate-spin" : ""}`}
+      {/* Content */}
+      <div className="animate-modal-enter max-w-2xl w-full">
+        {image === undefined ? (
+          /* Still loading from IndexedDB */
+          <div className="neu-raised flex items-center justify-center p-12 rounded-3xl">
+            <div className="flex flex-col items-center gap-3">
+              <div className="h-8 w-8 animate-spin rounded-full border-3 border-text-secondary/20 border-t-accent" />
+              <p className="text-sm font-mono text-text-secondary">Loading…</p>
+            </div>
+          </div>
+        ) : objectUrl ? (
+          <div className="flex flex-col items-center gap-4">
+            <div className="neu-raised overflow-hidden p-2 rounded-3xl">
+              <img
+                src={objectUrl}
+                alt="Full-resolution spot photo"
+                className="max-h-[80dvh] max-w-full rounded-2xl object-contain"
               />
-              {regenerating ? "Regenerating…" : "Regenerate Thumbnail"}
-            </button>
-          ) : (
-            <p className="text-xs font-mono text-accent">✓ Thumbnail updated</p>
-          )}
-        </div>
-      ) : (
-        /* No image stored for this spot */
-        <div className="flex flex-col items-center gap-3 text-text-secondary">
-          <ImageOff className="h-12 w-12" />
-          <p className="text-sm font-mono">No photo attached</p>
-        </div>
-      )}
+            </div>
+
+            {/* Regenerate thumbnail */}
+            {!regenerated ? (
+              <button
+                type="button"
+                onClick={handleRegenerate}
+                disabled={regenerating}
+                className="neu-button inline-flex items-center gap-2 rounded-full px-5 py-2.5 text-xs font-medium text-text-primary disabled:opacity-50 cursor-pointer"
+              >
+                <RefreshCw
+                  className={`h-3.5 w-3.5 ${regenerating ? "animate-spin" : ""}`}
+                />
+                {regenerating ? "Regenerating…" : "Regenerate Thumbnail"}
+              </button>
+            ) : (
+              <p className="text-xs font-mono text-accent animate-page-enter">
+                ✓ Thumbnail updated
+              </p>
+            )}
+          </div>
+        ) : (
+          /* No image stored for this spot */
+          <div className="neu-raised flex flex-col items-center gap-4 p-12 rounded-3xl">
+            <div className="neu-inset flex h-20 w-20 items-center justify-center rounded-full">
+              <ImageOff className="h-8 w-8 text-text-secondary" />
+            </div>
+            <p className="text-sm font-mono text-text-secondary">No photo attached</p>
+          </div>
+        )}
+      </div>
     </div>
   );
 }
diff --git a/lib/auth.tsx b/lib/auth.tsx
new file mode 100644
index 0000000..118e78f
--- /dev/null
+++ b/lib/auth.tsx
@@ -0,0 +1,147 @@
+"use client";
+
+import {
+  createContext,
+  useContext,
+  useEffect,
+  useState,
+  useCallback,
+  type ReactNode,
+} from "react";
+import {
+  onAuthStateChanged,
+  signInWithPopup,
+  signOut as firebaseSignOut,
+  GoogleAuthProvider,
+  browserPopupRedirectResolver,
+  type User,
+} from "firebase/auth";
+import { getFirebaseAuth } from "./firebase";
+
+/* ------------------------------------------------------------------ */
+/*  Types                                                              */
+/* ------------------------------------------------------------------ */
+
+export interface QuickLoginAccount {
+  uid: string;
+  displayName: string | null;
+  email: string | null;
+  photoURL: string | null;
+  lastLoginAt: number;
+}
+
+interface AuthContextValue {
+  user: User | null;
+  loading: boolean;
+  signInWithGoogle: () => Promise<void>;
+  signOut: () => Promise<void>;
+  quickLoginAccounts: QuickLoginAccount[];
+}
+
+const QUICK_LOGIN_KEY = "keepcheck-quick-login";
+const MAX_QUICK_LOGIN = 5;
+
+/* ------------------------------------------------------------------ */
+/*  Context                                                            */
+/* ------------------------------------------------------------------ */
+
+const AuthContext = createContext<AuthContextValue | null>(null);
+
+/* ------------------------------------------------------------------ */
+/*  Provider                                                           */
+/* ------------------------------------------------------------------ */
+
+export function AuthProvider({ children }: { children: ReactNode }) {
+  const [user, setUser] = useState<User | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [quickLoginAccounts, setQuickLoginAccounts] = useState<
+    QuickLoginAccount[]
+  >([]);
+
+  // Load quick-login history from localStorage on mount.
+  useEffect(() => {
+    try {
+      const stored = localStorage.getItem(QUICK_LOGIN_KEY);
+      if (stored) setQuickLoginAccounts(JSON.parse(stored));
+    } catch {
+      // Ignore parse errors.
+    }
+  }, []);
+
+  // Persist a user to quick-login history.
+  const saveToQuickLogin = useCallback((u: User) => {
+    setQuickLoginAccounts((prev) => {
+      const filtered = prev.filter((a) => a.uid !== u.uid);
+      const entry: QuickLoginAccount = {
+        uid: u.uid,
+        displayName: u.displayName,
+        email: u.email,
+        photoURL: u.photoURL,
+        lastLoginAt: Date.now(),
+      };
+      const updated = [entry, ...filtered].slice(0, MAX_QUICK_LOGIN);
+
+      try {
+        localStorage.setItem(QUICK_LOGIN_KEY, JSON.stringify(updated));
+      } catch {
+        // Storage full — silently skip.
+      }
+
+      return updated;
+    });
+  }, []);
+
+  // Listen to Firebase auth state.
+  useEffect(() => {
+    const unsubscribe = onAuthStateChanged(getFirebaseAuth(), (firebaseUser) => {
+      setUser(firebaseUser);
+      setLoading(false);
+
+      if (firebaseUser) {
+        saveToQuickLogin(firebaseUser);
+      }
+    });
+    return unsubscribe;
+  }, [saveToQuickLogin]);
+
+  // Sign in with Google popup.
+  const signInWithGoogle = useCallback(async () => {
+    const provider = new GoogleAuthProvider();
+    provider.setCustomParameters({ prompt: "select_account" });
+    try {
+      const result = await signInWithPopup(getFirebaseAuth(), provider, browserPopupRedirectResolver);
+      saveToQuickLogin(result.user);
+    } catch (error: unknown) {
+      // User closed popup — not an error.
+      const code = (error as { code?: string })?.code;
+      if (code !== "auth/popup-closed-by-user" && code !== "auth/cancelled-popup-request") {
+        console.error("[KeepCheck] Google sign-in failed:", error);
+        throw error;
+      }
+    }
+  }, [saveToQuickLogin]);
+
+  // Sign out.
+  const signOut = useCallback(async () => {
+    await firebaseSignOut(getFirebaseAuth());
+    setUser(null);
+  }, []);
+
+  return (
+    <AuthContext.Provider
+      value={{ user, loading, signInWithGoogle, signOut, quickLoginAccounts }}
+    >
+      {children}
+    </AuthContext.Provider>
+  );
+}
+
+/* ------------------------------------------------------------------ */
+/*  Hook                                                               */
+/* ------------------------------------------------------------------ */
+
+export function useAuth(): AuthContextValue {
+  const ctx = useContext(AuthContext);
+  if (!ctx) throw new Error("useAuth must be used within <AuthProvider>");
+  return ctx;
+}
diff --git a/lib/firebase.ts b/lib/firebase.ts
new file mode 100644
index 0000000..385d7cf
--- /dev/null
+++ b/lib/firebase.ts
@@ -0,0 +1,81 @@
+import { initializeApp, getApps, getApp, type FirebaseApp } from "firebase/app";
+import {
+  getAuth,
+  indexedDBLocalPersistence,
+  browserLocalPersistence,
+  initializeAuth,
+  type Auth,
+} from "firebase/auth";
+import {
+  getFirestore,
+  initializeFirestore,
+  persistentLocalCache,
+  persistentMultipleTabManager,
+  type Firestore,
+} from "firebase/firestore";
+
+const firebaseConfig = {
+  apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
+  authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
+  projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
+  storageBucket: process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET,
+  messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID,
+  appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID,
+};
+
+// Ensure only one Firebase app is ever initialised (SSR + hot-reload safe).
+function getApp_(): FirebaseApp {
+  return getApps().length ? getApp() : initializeApp(firebaseConfig);
+}
+
+// ---------------------------------------------------------------------------
+// Lazy singletons — initialised on first access so they never run during SSR.
+// ---------------------------------------------------------------------------
+
+let _auth: Auth | null = null;
+let _firestore: Firestore | null = null;
+
+/**
+ * Returns the Firebase Auth singleton.
+ *
+ * Uses IndexedDB persistence (survives offline / PWA restarts).
+ * Falls back to browser localStorage if IndexedDB is unavailable.
+ */
+export function getFirebaseAuth(): Auth {
+  if (_auth) return _auth;
+
+  const app = getApp_();
+
+  try {
+    _auth = initializeAuth(app, {
+      persistence: [indexedDBLocalPersistence, browserLocalPersistence],
+    });
+  } catch {
+    // Already initialised (hot-reload) — use existing instance.
+    _auth = getAuth(app);
+  }
+
+  return _auth;
+}
+
+/**
+ * Returns the Firestore singleton with multi-tab offline persistence.
+ */
+export function getFirebaseFirestore(): Firestore {
+  if (_firestore) return _firestore;
+
+  const app = getApp_();
+
+  try {
+    _firestore = initializeFirestore(app, {
+      localCache: persistentLocalCache({
+        tabManager: persistentMultipleTabManager(),
+      }),
+    });
+  } catch {
+    // Already initialised (hot-reload).
+    _firestore = getFirestore(app);
+  }
+
+  return _firestore;
+}
diff --git a/lib/firestore.ts b/lib/firestore.ts
new file mode 100644
index 0000000..499cce0
--- /dev/null
+++ b/lib/firestore.ts
@@ -0,0 +1,124 @@
+import {
+  collection,
+  doc,
+  setDoc,
+  deleteDoc,
+  getDocs,
+  query,
+  orderBy,
+  onSnapshot,
+  addDoc,
+  type Unsubscribe,
+} from "firebase/firestore";
+import { getFirebaseFirestore } from "./firebase";
+import type { FoodSpotLog, SpotImage } from "@/app/db";
+
+/* ------------------------------------------------------------------ */
+/*  Path helpers                                                       */
+/* ------------------------------------------------------------------ */
+
+function spotsCol(uid: string) {
+  return collection(getFirebaseFirestore(), "users", uid, "spots");
+}
+
+function imagesCol(uid: string) {
+  return collection(getFirebaseFirestore(), "users", uid, "images");
+}
+
+/* ------------------------------------------------------------------ */
+/*  Spots                                                              */
+/* ------------------------------------------------------------------ */
+
+/** Pre-generate a Firestore document ID without writing anything. */
+export function generateSpotId(uid: string): string {
+  return doc(spotsCol(uid)).id;
+}
+
+/** Write a spot to Firestore using a pre-generated ID. */
+export async function writeSpotToFirestore(
+  uid: string,
+  firebaseId: string,
+  spot: Omit<FoodSpotLog, "id" | "firebaseId" | "userId">,
+): Promise<void> {
+  const docRef = doc(getFirebaseFirestore(), "users", uid, "spots", firebaseId);
+  await setDoc(docRef, {
+    ...spot,
+    userId: uid,
+  });
+}
+
+/** Delete a spot from Firestore by its document ID. */
+export async function deleteSpotFromFirestore(
+  uid: string,
+  firebaseId: string,
+): Promise<void> {
+  await deleteDoc(doc(getFirebaseFirestore(), "users", uid, "spots", firebaseId));
+}
+
+/** Fetch all spots for a user (one-shot). */
+export async function fetchSpotsFromFirestore(
+  uid: string,
+): Promise<(FoodSpotLog & { firebaseId: string })[]> {
+  const q = query(spotsCol(uid), orderBy("createdAt", "desc"));
+  const snapshot = await getDocs(q);
+  return snapshot.docs.map((d) => ({
+    ...(d.data() as Omit<FoodSpotLog, "id" | "firebaseId">),
+    firebaseId: d.id,
+  }));
+}
+
+/** Subscribe to real-time spot updates. Returns an unsubscribe function. */
+export function subscribeToSpots(
+  uid: string,
+  callback: (spots: (FoodSpotLog & { firebaseId: string })[]) => void,
+): Unsubscribe {
+  const q = query(spotsCol(uid), orderBy("createdAt", "desc"));
+  return onSnapshot(q, (snapshot) => {
+    const spots = snapshot.docs.map((d) => ({
+      ...(d.data() as Omit<FoodSpotLog, "id" | "firebaseId">),
+      firebaseId: d.id,
+    }));
+    callback(spots);
+  });
+}
+
+/* ------------------------------------------------------------------ */
+/*  Images                                                             */
+/* ------------------------------------------------------------------ */
+
+/**
+ * Add an image to Firestore.
+ *
+ * NOTE: We store the image as a base64 string (NOT a Blob) because
+ * Firestore doesn't natively support Blob storage. The images are
+ * already compressed JPEGs < 1 MB from the image utility pipeline.
+ */
+export async function addImageToFirestore(
+  uid: string,
+  image: {
+    spotFirebaseId: string;
+    base64: string;
+    createdAt: number;
+  },
+): Promise<string> {
+  const docRef = await addDoc(imagesCol(uid), {
+    spotFirebaseId: image.spotFirebaseId,
+    base64: image.base64,
+    createdAt: image.createdAt,
+    userId: uid,
+  });
+  return docRef.id;
+}
+
+/** Delete all images for a spot from Firestore. */
+export async function deleteImagesForSpotFromFirestore(
+  uid: string,
+  spotFirebaseId: string,
+): Promise<void> {
+  const q = query(imagesCol(uid));
+  const snapshot = await getDocs(q);
+  const deleteOps = snapshot.docs
+    .filter((d) => d.data().spotFirebaseId === spotFirebaseId)
+    .map((d) => deleteDoc(d.ref));
+  await Promise.all(deleteOps);
+}
diff --git a/package-lock.json b/package-lock.json
index e6a6364..d17c54d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,6 +11,8 @@
         "@serwist/next": "^9.5.11",
         "dexie": "^4.4.4",
         "dexie-react-hooks": "^4.4.0",
+        "firebase": "^12.16.0",
+        "gsap": "^3.15.0",
         "lucide-react": "^1.24.0",
         "next": "16.2.10",
         "react": "19.2.4",
@@ -458,6 +460,667 @@
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
       }
     },
+    "node_modules/@firebase/ai": {
+      "version": "2.13.1",
+      "resolved": "https://registry.npmjs.org/@firebase/ai/-/ai-2.13.1.tgz",
+      "integrity": "sha512-RhT/VViTPBSplhQSuEp62HhLvfsV+LowMh8ZUo5MMRDzG7oFtSget4Kmg5oHP50hDVyWQuQj6to9iPFEZk08Tw==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@firebase/app-check-interop-types": "0.3.4",
+        "@firebase/component": "0.7.3",
+        "@firebase/logger": "0.5.1",
+        "@firebase/util": "1.15.1",
+        "tslib": "^2.1.0"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      },
+      "peerDependencies": {
+        "@firebase/app": "0.x",
+        "@firebase/app-types": "0.x"
+      }
+    },
+    "node_modules/@firebase/analytics": {
+      "version": "0.10.22",
+      "resolved": "https://registry.npmjs.org/@firebase/analytics/-/analytics-0.10.22.tgz",
+      "integrity": "sha512-8BSaq/QRGU1+xyi8L2PTLTJU7MH9aMA72RQdIxrbhWFauOZY9OXo8f2YDN/972xA8d588tlnNVEQ2Mo69pT9Ow==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@firebase/component": "0.7.3",
+        "@firebase/installations": "0.6.22",
+        "@firebase/logger": "0.5.1",
+        "@firebase/util": "1.15.1",
+        "tslib": "^2.1.0"
+      },
+      "peerDependencies": {
+        "@firebase/app": "0.x"
+      }
+    },
+    "node_modules/@firebase/analytics-compat": {
+      "version": "0.2.28",
+      "resolved": "https://registry.npmjs.org/@firebase/analytics-compat/-/analytics-compat-0.2.28.tgz",
+      "integrity": "sha512-lIAlqUUbBu93FJMlQfslryQtBwwzdzvp23ePC6FNgymXk6Ook5v4Uvc0vdutvoIeqmyA3LfP0ZeRFK8+11kOOQ==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@firebase/analytics": "0.10.22",
+        "@firebase/analytics-types": "0.8.4",
+        "@firebase/component": "0.7.3",
+        "@firebase/util": "1.15.1",
+        "tslib": "^2.1.0"
+      },
+      "peerDependencies": {
+        "@firebase/app-compat": "0.x"
+      }
+    },
+    "node_modules/@firebase/analytics-types": {
+      "version": "0.8.4",
+      "resolved": "https://registry.npmjs.org/@firebase/analytics-types/-/analytics-types-0.8.4.tgz",
+      "integrity": "sha512-zQ+XTgkwH6CY/eUSHJRP7e4LxM30RCxlCmob5sy2axs25GE3Ny0XdgpDscMTHHQIGqWkxPXad4w2Mw9sCgT8zQ==",
+      "license": "Apache-2.0"
+    },
+    "node_modules/@firebase/app": {
+      "version": "0.15.1",
+      "resolved": "https://registry.npmjs.org/@firebase/app/-/app-0.15.1.tgz",
+      "integrity": "sha512-iD9+Z5HcPo0Uop5f72/VYMeXwKucBhW7iFrISkJFvQ+lSZikTNgTz0FgAtaaTkAG0pEZSnCymA2Fu49n0rcufQ==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@firebase/component": "0.7.3",
+        "@firebase/logger": "0.5.1",
+        "@firebase/util": "1.15.1",
+        "idb": "7.1.1",
+        "tslib": "^2.1.0"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      }
+    },
+    "node_modules/@firebase/app-check": {
+      "version": "0.12.0",
+      "resolved": "https://registry.npmjs.org/@firebase/app-check/-/app-check-0.12.0.tgz",
+      "integrity": "sha512-wMeT6HLWRAuW7Cp/5UjWBGKgjPNxWNOoNf4PRIv0weljoGMZVeqbUY7wNBWTI2/31cX1NlXx8gQruDLsUShB3Q==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@firebase/component": "0.7.3",
+        "@firebase/logger": "0.5.1",
+        "@firebase/util": "1.15.1",
+        "tslib": "^2.1.0"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      },
+      "peerDependencies": {
+        "@firebase/app": "0.x"
+      }
+    },
+    "node_modules/@firebase/app-check-compat": {
+      "version": "0.4.5",
+      "resolved": "https://registry.npmjs.org/@firebase/app-check-compat/-/app-check-compat-0.4.5.tgz",
+      "integrity": "sha512-JI17mVcZs34zO6ZeSCrw4U2iohqy+n6GIzkbmsA+TbVjmvFLkUKt3bs5M+qRBteQm/0IWzqSHYFzEQLzDTQebg==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@firebase/app-check": "0.12.0",
+        "@firebase/app-check-types": "0.5.4",
+        "@firebase/component": "0.7.3",
+        "@firebase/logger": "0.5.1",
+        "@firebase/util": "1.15.1",
+        "tslib": "^2.1.0"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      },
+      "peerDependencies": {
+        "@firebase/app-compat": "0.x"
+      }
+    },
+    "node_modules/@firebase/app-check-interop-types": {
+      "version": "0.3.4",
+      "resolved": "https://registry.npmjs.org/@firebase/app-check-interop-types/-/app-check-interop-types-0.3.4.tgz",
+      "integrity": "sha512-zz3i6e13B8BfWiLy8MABtTh8aGIACgKbf9UVnyHcWs+yQzJXgQcl8A46b0zfaiJHdQ+niF0ouAfcpuf+3LMPQg==",
+      "license": "Apache-2.0"
+    },
+    "node_modules/@firebase/app-check-types": {
+      "version": "0.5.4",
+      "resolved": "https://registry.npmjs.org/@firebase/app-check-types/-/app-check-types-0.5.4.tgz",
+      "integrity": "sha512-xV7JsIyzVr15aA7f3Pi0rB9gdBuVubs89FGA8VkRYA4g0l78poADgdfrScgf7NndSg9mm7cR7PJyY0+t22KaGw==",
+      "license": "Apache-2.0"
+    },
+    "node_modules/@firebase/app-compat": {
+      "version": "0.5.15",
+      "resolved": "https://registry.npmjs.org/@firebase/app-compat/-/app-compat-0.5.15.tgz",
+      "integrity": "sha512-HaiSM9TwbGIR4b7F6+UncHWlqdH89eeY7VUskaOGOlI2PxHS5Z+6hHsYGvNLy0SHDE6zyXO+3QSA6a4aqQxsqA==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@firebase/app": "0.15.1",
+        "@firebase/component": "0.7.3",
+        "@firebase/logger": "0.5.1",
+        "@firebase/util": "1.15.1",
+        "tslib": "^2.1.0"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      }
+    },
+    "node_modules/@firebase/app-types": {
+      "version": "0.9.5",
+      "resolved": "https://registry.npmjs.org/@firebase/app-types/-/app-types-0.9.5.tgz",
+      "integrity": "sha512-YevqTjvo7Iujsa9Dwowmd6dSoElhzmD63ZSrq6bzjvQ6POjYgNjOFHLmNIgJs48eNO093NCERibuFnxbfOvU7A==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@firebase/logger": "0.5.1"
+      }
+    },
+    "node_modules/@firebase/app/node_modules/idb": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/idb/-/idb-7.1.1.tgz",
+      "integrity": "sha512-gchesWBzyvGHRO9W8tzUWFDycow5gwjvFKfyV9FF32Y7F50yZMp7mP+T2mJIWFx49zicqyC4uefHM17o6xKIVQ==",
+      "license": "ISC"
+    },
+    "node_modules/@firebase/auth": {
+      "version": "1.13.3",
+      "resolved": "https://registry.npmjs.org/@firebase/auth/-/auth-1.13.3.tgz",
+      "integrity": "sha512-bqiq4uubDN2YyQkdvSWPQeJyXAv2O76ImF41En9b6UhV5JuBVYDoHYrrrE3NzIuGkpFMKagfhMRP4Vz6t+yQSQ==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@firebase/component": "0.7.3",
+        "@firebase/logger": "0.5.1",
+        "@firebase/util": "1.15.1",
+        "tslib": "^2.1.0"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      },
+      "peerDependencies": {
+        "@firebase/app": "0.x",
+        "@react-native-async-storage/async-storage": "^2.2.0 || ^3.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@react-native-async-storage/async-storage": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@firebase/auth-compat": {
+      "version": "0.6.8",
+      "resolved": "https://registry.npmjs.org/@firebase/auth-compat/-/auth-compat-0.6.8.tgz",
+      "integrity": "sha512-llcBREUC4iSNKZ6rvwud7Oz9Q7aAWU6KuQLa6pdu7Q+QAQsy4JLw6yFgxwtmzabsgznHmmcsX2UjHLLzqUxi3Q==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@firebase/auth": "1.13.3",
+        "@firebase/auth-types": "0.13.1",
+        "@firebase/component": "0.7.3",
+        "@firebase/util": "1.15.1",
+        "tslib": "^2.1.0"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      },
+      "peerDependencies": {
+        "@firebase/app-compat": "0.x"
+      }
+    },
+    "node_modules/@firebase/auth-interop-types": {
+      "version": "0.2.5",
+      "resolved": "https://registry.npmjs.org/@firebase/auth-interop-types/-/auth-interop-types-0.2.5.tgz",
+      "integrity": "sha512-1Li/YuBDBAXcKv7BzY4U28gontUmAaw53sYiqbaVOMCFb2lFKK/c3CGMUWqtwe7+TXrl3poWnTCL5umYBg85Eg==",
+      "license": "Apache-2.0"
+    },
+    "node_modules/@firebase/auth-types": {
+      "version": "0.13.1",
+      "resolved": "https://registry.npmjs.org/@firebase/auth-types/-/auth-types-0.13.1.tgz",
+      "integrity": "sha512-0c1Mnid0uMDfGJHeUS4zfvBa4/CedJXotGy/n/NZJnBjwiJawt0ZYU+wH2VAVLiRCEfG2ncCkAX3yd1/2nrB7g==",
+      "license": "Apache-2.0",
+      "peerDependencies": {
+        "@firebase/app-types": "0.x",
+        "@firebase/util": "1.x"
+      }
+    },
+    "node_modules/@firebase/component": {
+      "version": "0.7.3",
+      "resolved": "https://registry.npmjs.org/@firebase/component/-/component-0.7.3.tgz",
+      "integrity": "sha512-wFofIaa2879ogD/WvkjYXJxRmfnL0scen6ORgaC3na1FNOR9ASIUANQdhqQcmWu/h77/pVHY7ch5flewa5Bcew==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@firebase/util": "1.15.1",
+        "tslib": "^2.1.0"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      }
+    },
+    "node_modules/@firebase/data-connect": {
+      "version": "0.7.1",
+      "resolved": "https://registry.npmjs.org/@firebase/data-connect/-/data-connect-0.7.1.tgz",
+      "integrity": "sha512-2LbUU8mmSA63HknxQMmWHjpzuNLBKflvVwQc2tpoVKg0biWleNEJX031ELks0vzFs+dDjOUkCJR72RP6mQHFOg==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@firebase/auth-interop-types": "0.2.5",
+        "@firebase/component": "0.7.3",
+        "@firebase/logger": "0.5.1",
+        "@firebase/util": "1.15.1",
+        "tslib": "^2.1.0"
+      },
+      "peerDependencies": {
+        "@firebase/app": "0.x"
+      }
+    },
+    "node_modules/@firebase/database": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/@firebase/database/-/database-1.1.3.tgz",
+      "integrity": "sha512-XwWCa+E4TvNGpGwXrycLRNfdogADwFcvuhyow6wDWma9W54roaQIhe+4PM0KiLsIftBdSCGI7OKCXrdSRHbIhw==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@firebase/app-check-interop-types": "0.3.4",
+        "@firebase/auth-interop-types": "0.2.5",
+        "@firebase/component": "0.7.3",
+        "@firebase/logger": "0.5.1",
+        "@firebase/util": "1.15.1",
+        "faye-websocket": "0.11.4",
+        "tslib": "^2.1.0"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      }
+    },
+    "node_modules/@firebase/database-compat": {
+      "version": "2.1.4",
+      "resolved": "https://registry.npmjs.org/@firebase/database-compat/-/database-compat-2.1.4.tgz",
+      "integrity": "sha512-3pK35F1MAgmqFJQlf2nhQl44vtAXQO1uaCaQOEUI9kCRtLFqi7N+QRKR7lFZPg+xIZIyubgxQaxY69YgfZRZWg==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@firebase/component": "0.7.3",
+        "@firebase/database": "1.1.3",
+        "@firebase/database-types": "1.0.20",
+        "@firebase/logger": "0.5.1",
+        "@firebase/util": "1.15.1",
+        "tslib": "^2.1.0"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      }
+    },
+    "node_modules/@firebase/database-types": {
+      "version": "1.0.20",
+      "resolved": "https://registry.npmjs.org/@firebase/database-types/-/database-types-1.0.20.tgz",
+      "integrity": "sha512-kegbOk/w8iU64pr0q6k2ItyNGjnQBMHFhwS7ohdWI4W+pc0/zhhdGXTdFj6X1oxItRjPoYOsSQmERgBkn/ihxw==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@firebase/app-types": "0.9.5",
+        "@firebase/util": "1.15.1"
+      }
+    },
+    "node_modules/@firebase/firestore": {
+      "version": "4.16.0",
+      "resolved": "https://registry.npmjs.org/@firebase/firestore/-/firestore-4.16.0.tgz",
+      "integrity": "sha512-qdHMHMvMr0nRMuZyWNR/ArWa0YlPE3C4eAbmxTASJMYXAesKPL0Y54p70moggrNPzaK7MSIIq5RDJJyntQyIYA==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@firebase/component": "0.7.3",
+        "@firebase/logger": "0.5.1",
+        "@firebase/util": "1.15.1",
+        "@firebase/webchannel-wrapper": "1.0.6",
+        "@grpc/grpc-js": "~1.9.0",
+        "@grpc/proto-loader": "^0.7.8",
+        "re2js": "^0.4.2",
+        "tslib": "^2.1.0"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      },
+      "peerDependencies": {
+        "@firebase/app": "0.x"
+      }
+    },
+    "node_modules/@firebase/firestore-compat": {
+      "version": "0.4.11",
+      "resolved": "https://registry.npmjs.org/@firebase/firestore-compat/-/firestore-compat-0.4.11.tgz",
+      "integrity": "sha512-W7o1WdwWq5aABK5Up2ncSvTQs/QGLR/fy7cVpFBNqhsXtxoMtflHf2xBIG6+aoptcuGAobddq4g2Sq27wqHaYw==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@firebase/component": "0.7.3",
+        "@firebase/firestore": "4.16.0",
+        "@firebase/firestore-types": "3.0.4",
+        "@firebase/util": "1.15.1",
+        "tslib": "^2.1.0"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      },
+      "peerDependencies": {
+        "@firebase/app-compat": "0.x"
+      }
+    },
+    "node_modules/@firebase/firestore-types": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/@firebase/firestore-types/-/firestore-types-3.0.4.tgz",
+      "integrity": "sha512-jGn+JSS4X9zZsrfu7Yw66v5YRdOLD1oyQh4USR0xWl4CUqV/DA6bNIXRPpxH/cUl3iVTNiP6MN7g+EL42A4qfA==",
+      "license": "Apache-2.0",
+      "peerDependencies": {
+        "@firebase/app-types": "0.x",
+        "@firebase/util": "1.x"
+      }
+    },
+    "node_modules/@firebase/functions": {
+      "version": "0.13.5",
+      "resolved": "https://registry.npmjs.org/@firebase/functions/-/functions-0.13.5.tgz",
+      "integrity": "sha512-bWCx713f4kE/uFV7gdFOLBS7lDoiZj48MRkbAqe35gkXcCeWF4QjRNO07Jhmve7EJIoQOBczL29y2r8VRuN1kw==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@firebase/app-check-interop-types": "0.3.4",
+        "@firebase/auth-interop-types": "0.2.5",
+        "@firebase/component": "0.7.3",
+        "@firebase/messaging-interop-types": "0.2.5",
+        "@firebase/util": "1.15.1",
+        "tslib": "^2.1.0"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      },
+      "peerDependencies": {
+        "@firebase/app": "0.x"
+      }
+    },
+    "node_modules/@firebase/functions-compat": {
+      "version": "0.4.5",
+      "resolved": "https://registry.npmjs.org/@firebase/functions-compat/-/functions-compat-0.4.5.tgz",
+      "integrity": "sha512-10qlUXGY25G5/1g9UihqksPp2po+ZqSE7LEizsrdUP7vrTmkysXxGSZCDyojSEp6mQe/ecRDdDDI+z4XRdb4wQ==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@firebase/component": "0.7.3",
+        "@firebase/functions": "0.13.5",
+        "@firebase/functions-types": "0.6.4",
+        "@firebase/util": "1.15.1",
+        "tslib": "^2.1.0"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      },
+      "peerDependencies": {
+        "@firebase/app-compat": "0.x"
+      }
+    },
+    "node_modules/@firebase/functions-types": {
+      "version": "0.6.4",
+      "resolved": "https://registry.npmjs.org/@firebase/functions-types/-/functions-types-0.6.4.tgz",
+      "integrity": "sha512-zV6kgqtduR4rUAdC/ilS7kmb93XD7bEZoJDlVBZqlOw2uGGGCNBQBuleww2rr0Ulr3L9o2TDjumEt68/l1f9DQ==",
+      "license": "Apache-2.0"
+    },
+    "node_modules/@firebase/installations": {
+      "version": "0.6.22",
+      "resolved": "https://registry.npmjs.org/@firebase/installations/-/installations-0.6.22.tgz",
+      "integrity": "sha512-ef6nn3GGQTdReCfotRMG77PJZu8CqEbiK5pEoBnM0gTu/Z9v0i/az2p3HABsa/1beQmmyh1OsOjf7P5+pgwdZw==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@firebase/component": "0.7.3",
+        "@firebase/util": "1.15.1",
+        "idb": "7.1.1",
+        "tslib": "^2.1.0"
+      },
+      "peerDependencies": {
+        "@firebase/app": "0.x"
+      }
+    },
+    "node_modules/@firebase/installations-compat": {
+      "version": "0.2.22",
+      "resolved": "https://registry.npmjs.org/@firebase/installations-compat/-/installations-compat-0.2.22.tgz",
+      "integrity": "sha512-C/zpAuTP5S9OgKSPvXRupw3hoY/JZSlA1wFjD/Sb7LIQE0FNbcMdO8Y4KXVEkjVzma/DDDDIAzxEXqKMAzc88w==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@firebase/component": "0.7.3",
+        "@firebase/installations": "0.6.22",
+        "@firebase/installations-types": "0.5.4",
+        "@firebase/util": "1.15.1",
+        "tslib": "^2.1.0"
+      },
+      "peerDependencies": {
+        "@firebase/app-compat": "0.x"
+      }
+    },
+    "node_modules/@firebase/installations-types": {
+      "version": "0.5.4",
+      "resolved": "https://registry.npmjs.org/@firebase/installations-types/-/installations-types-0.5.4.tgz",
+      "integrity": "sha512-U2eFapdHwjb43Vx9o+Pmj4dFfvcHEK1IirEFLqMtWrTHvmdrS3gBpBD1kmJk/9HjsOtoHZxJ2Paoe79e+L1ZPg==",
+      "license": "Apache-2.0",
+      "peerDependencies": {
+        "@firebase/app-types": "0.x"
+      }
+    },
+    "node_modules/@firebase/installations/node_modules/idb": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/idb/-/idb-7.1.1.tgz",
+      "integrity": "sha512-gchesWBzyvGHRO9W8tzUWFDycow5gwjvFKfyV9FF32Y7F50yZMp7mP+T2mJIWFx49zicqyC4uefHM17o6xKIVQ==",
+      "license": "ISC"
+    },
+    "node_modules/@firebase/logger": {
+      "version": "0.5.1",
+      "resolved": "https://registry.npmjs.org/@firebase/logger/-/logger-0.5.1.tgz",
+      "integrity": "sha512-vZKLsqE1ABOy8OjQiE7cUTFn4gvaqlk88yp8N94Pk/sDpq61YqZGqmVFZTvOyflTwuYFcWirBdYGoJgbDaXKYQ==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "tslib": "^2.1.0"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      }
+    },
+    "node_modules/@firebase/messaging": {
+      "version": "0.13.0",
+      "resolved": "https://registry.npmjs.org/@firebase/messaging/-/messaging-0.13.0.tgz",
+      "integrity": "sha512-GZoo0uGRvEbszo83xcgbjJp4FpkmBEr4l8Z4hi8gl+P1Spn/MTK3HapanMzSX4yUHuTEiF5hasWRxOaz+o5sxQ==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@firebase/component": "0.7.3",
+        "@firebase/installations": "0.6.22",
+        "@firebase/messaging-interop-types": "0.2.5",
+        "@firebase/util": "1.15.1",
+        "idb": "7.1.1",
+        "tslib": "^2.1.0"
+      },
+      "peerDependencies": {
+        "@firebase/app": "0.x"
+      }
+    },
+    "node_modules/@firebase/messaging-compat": {
+      "version": "0.2.27",
+      "resolved": "https://registry.npmjs.org/@firebase/messaging-compat/-/messaging-compat-0.2.27.tgz",
+      "integrity": "sha512-JNOiu1PPgdHzEPEtoFiNxQuu0x9bm4bfETSQCpGfcTlgWkhlSK7uh7nlsjC10TQLUNgYetLmuutaYTh8aeYLVA==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@firebase/component": "0.7.3",
+        "@firebase/messaging": "0.13.0",
+        "@firebase/util": "1.15.1",
+        "tslib": "^2.1.0"
+      },
+      "peerDependencies": {
+        "@firebase/app-compat": "0.x"
+      }
+    },
+    "node_modules/@firebase/messaging-interop-types": {
+      "version": "0.2.5",
+      "resolved": "https://registry.npmjs.org/@firebase/messaging-interop-types/-/messaging-interop-types-0.2.5.tgz",
+      "integrity": "sha512-tUEKnaAP2Y/MNIqgnriPpV6e5l13Vs/+p2yrd6NGlncPJT9O3a8muYZtdnWe+IJ4fgKLHJVC79n/asxk/N5Msw==",
+      "license": "Apache-2.0"
+    },
+    "node_modules/@firebase/messaging/node_modules/idb": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/idb/-/idb-7.1.1.tgz",
+      "integrity": "sha512-gchesWBzyvGHRO9W8tzUWFDycow5gwjvFKfyV9FF32Y7F50yZMp7mP+T2mJIWFx49zicqyC4uefHM17o6xKIVQ==",
+      "license": "ISC"
+    },
+    "node_modules/@firebase/performance": {
+      "version": "0.7.12",
+      "resolved": "https://registry.npmjs.org/@firebase/performance/-/performance-0.7.12.tgz",
+      "integrity": "sha512-fe7nV8teUU3OBHlMUZ9Lw4gLhCW2k4m5Uc3pfWGV+fl8uwJQBGp9Q3lqsJ+HSrFu3Q2pJyLAgrClPGSKyDeYgQ==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@firebase/component": "0.7.3",
+        "@firebase/installations": "0.6.22",
+        "@firebase/logger": "0.5.1",
+        "@firebase/util": "1.15.1",
+        "tslib": "^2.1.0",
+        "web-vitals": "^4.2.4"
+      },
+      "peerDependencies": {
+        "@firebase/app": "0.x"
+      }
+    },
+    "node_modules/@firebase/performance-compat": {
+      "version": "0.2.25",
+      "resolved": "https://registry.npmjs.org/@firebase/performance-compat/-/performance-compat-0.2.25.tgz",
+      "integrity": "sha512-q6NjTXpIPoFuUmCmMN/maCdTgzT6aExs9xZo+PxfVLj6uLVGvpyAD6XWjmcrb7jChsFBYbq7E5dyNDF7Zhy9kA==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@firebase/component": "0.7.3",
+        "@firebase/logger": "0.5.1",
+        "@firebase/performance": "0.7.12",
+        "@firebase/performance-types": "0.2.4",
+        "@firebase/util": "1.15.1",
+        "tslib": "^2.1.0"
+      },
+      "peerDependencies": {
+        "@firebase/app-compat": "0.x"
+      }
+    },
+    "node_modules/@firebase/performance-types": {
+      "version": "0.2.4",
+      "resolved": "https://registry.npmjs.org/@firebase/performance-types/-/performance-types-0.2.4.tgz",
+      "integrity": "sha512-kJSEk7b0uhpcPRyL4SQ/GPujLqk52XNKcXlnsKDbWGAb9vugcLvOU3u6zfEdwd+d8hWJb5S5ZizV1JFFI0nkKg==",
+      "license": "Apache-2.0"
+    },
+    "node_modules/@firebase/remote-config": {
+      "version": "0.9.0",
+      "resolved": "https://registry.npmjs.org/@firebase/remote-config/-/remote-config-0.9.0.tgz",
+      "integrity": "sha512-aNn6/eJhsSC+gXSToiXiYPv3ypLP9lFtzl+/q9kSOBPB7D6rae0Rt2uENZZLXGYbEgHYKQblOhijJAXGbbJjtQ==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@firebase/component": "0.7.3",
+        "@firebase/installations": "0.6.22",
+        "@firebase/logger": "0.5.1",
+        "@firebase/util": "1.15.1",
+        "tslib": "^2.1.0"
+      },
+      "peerDependencies": {
+        "@firebase/app": "0.x"
+      }
+    },
+    "node_modules/@firebase/remote-config-compat": {
+      "version": "0.2.27",
+      "resolved": "https://registry.npmjs.org/@firebase/remote-config-compat/-/remote-config-compat-0.2.27.tgz",
+      "integrity": "sha512-FYwYWwSbUdza/pRX4NpSBm/Pimntum3jEIBpnDn5Ey1jHNWgjxrE8Z5SB4mCHd5wGCoYd3koJzxARl/VWIEx0Q==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@firebase/component": "0.7.3",
+        "@firebase/logger": "0.5.1",
+        "@firebase/remote-config": "0.9.0",
+        "@firebase/remote-config-types": "0.5.1",
+        "@firebase/util": "1.15.1",
+        "tslib": "^2.1.0"
+      },
+      "peerDependencies": {
+        "@firebase/app-compat": "0.x"
+      }
+    },
+    "node_modules/@firebase/remote-config-types": {
+      "version": "0.5.1",
+      "resolved": "https://registry.npmjs.org/@firebase/remote-config-types/-/remote-config-types-0.5.1.tgz",
+      "integrity": "sha512-cX/1LT6KQwkXzck2eSzeKnuvXZCyr8qaPpDcikoJs7jmI+oBOXixpDLeDtWj1U6GNMkIoXrEDNoyT2Ypcyp5/A==",
+      "license": "Apache-2.0"
+    },
+    "node_modules/@firebase/storage": {
+      "version": "0.14.3",
+      "resolved": "https://registry.npmjs.org/@firebase/storage/-/storage-0.14.3.tgz",
+      "integrity": "sha512-YX4/YL6P6/fufSSeGnVhjWddcIXbFq2cWIhMKFTZo1E/Rtcl2mJj/BYUQTwJfcE1Tl8un1FOya4L05jcSLN/Eg==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@firebase/component": "0.7.3",
+        "@firebase/util": "1.15.1",
+        "tslib": "^2.1.0"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      },
+      "peerDependencies": {
+        "@firebase/app": "0.x"
+      }
+    },
+    "node_modules/@firebase/storage-compat": {
+      "version": "0.4.3",
+      "resolved": "https://registry.npmjs.org/@firebase/storage-compat/-/storage-compat-0.4.3.tgz",
+      "integrity": "sha512-gruVqjtUGX8tEoeNbaWXZm0Zfcfcb7fvmDmBxV8yPAbWvExRnZYLO2+qw9idxNE7BvPXt5csyjSYHy//dAizxw==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@firebase/component": "0.7.3",
+        "@firebase/storage": "0.14.3",
+        "@firebase/storage-types": "0.8.4",
+        "@firebase/util": "1.15.1",
+        "tslib": "^2.1.0"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      },
+      "peerDependencies": {
+        "@firebase/app-compat": "0.x"
+      }
+    },
+    "node_modules/@firebase/storage-types": {
+      "version": "0.8.4",
+      "resolved": "https://registry.npmjs.org/@firebase/storage-types/-/storage-types-0.8.4.tgz",
+      "integrity": "sha512-BT7cwxJOx8SWwlQfrlC+bD/Sk3Cw+1odCi8UZNFNWTVZoPsBnA5W+mqtZzVnvsdJpXCFGSGQ7R7vOR6dtM/BRA==",
+      "license": "Apache-2.0",
+      "peerDependencies": {
+        "@firebase/app-types": "0.x",
+        "@firebase/util": "1.x"
+      }
+    },
+    "node_modules/@firebase/util": {
+      "version": "1.15.1",
+      "resolved": "https://registry.npmjs.org/@firebase/util/-/util-1.15.1.tgz",
+      "integrity": "sha512-LUdM4Wg7YM9Pq/49nGYySJA0CSQEKnGffFzWV8+6gXN7mGxn+FL1IqvFbuZUtAQcfZgHYDwCE1wwlK7rB7gl2g==",
+      "hasInstallScript": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "tslib": "^2.1.0"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      }
+    },
+    "node_modules/@firebase/webchannel-wrapper": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/@firebase/webchannel-wrapper/-/webchannel-wrapper-1.0.6.tgz",
+      "integrity": "sha512-Vr/Mqu79dMwGRAyGbJ4uN4+BtXB3/mRTdzetD1daWNeG8QaWuzhhbG77GltO5c0yYmYls8i250iX73624GJd7Q==",
+      "license": "Apache-2.0"
+    },
+    "node_modules/@grpc/grpc-js": {
+      "version": "1.9.16",
+      "resolved": "https://registry.npmjs.org/@grpc/grpc-js/-/grpc-js-1.9.16.tgz",
+      "integrity": "sha512-wE4Ut/olIzfKqp631XrG+wbF0v1vWFN4YL9FyXC2LJiG33DsV7PLzURjrCvY/6je2ntdRkeLpPDluzSRGaVltQ==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@grpc/proto-loader": "^0.7.8",
+        "@types/node": ">=12.12.47"
+      },
+      "engines": {
+        "node": "^8.13.0 || >=10.10.0"
+      }
+    },
+    "node_modules/@grpc/proto-loader": {
+      "version": "0.7.15",
+      "resolved": "https://registry.npmjs.org/@grpc/proto-loader/-/proto-loader-0.7.15.tgz",
+      "integrity": "sha512-tMXdRCfYVixjuFK+Hk0Q1s38gV9zDiDJfWL3h1rv4Qc39oILCu1TRTDt7+fGUI8K4G1Fj125Hx/ru3azECWTyQ==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "lodash.camelcase": "^4.3.0",
+        "long": "^5.0.0",
+        "protobufjs": "^7.2.5",
+        "yargs": "^17.7.2"
+      },
+      "bin": {
+        "proto-loader-gen-types": "build/bin/proto-loader-gen-types.js"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/@humanfs/core": {
       "version": "0.19.2",
       "resolved": "https://registry.npmjs.org/@humanfs/core/-/core-0.19.2.tgz",
@@ -617,9 +1280,6 @@
       "cpu": [
         "arm"
       ],
-      "libc": [
-        "glibc"
-      ],
       "license": "LGPL-3.0-or-later",
       "optional": true,
       "os": [
@@ -636,9 +1296,6 @@
       "cpu": [
         "arm64"
       ],
-      "libc": [
-        "glibc"
-      ],
       "license": "LGPL-3.0-or-later",
       "optional": true,
       "os": [
@@ -655,9 +1312,6 @@
       "cpu": [
         "ppc64"
       ],
-      "libc": [
-        "glibc"
-      ],
       "license": "LGPL-3.0-or-later",
       "optional": true,
       "os": [
@@ -674,9 +1328,6 @@
       "cpu": [
         "riscv64"
       ],
-      "libc": [
-        "glibc"
-      ],
       "license": "LGPL-3.0-or-later",
       "optional": true,
       "os": [
@@ -693,9 +1344,6 @@
       "cpu": [
         "s390x"
       ],
-      "libc": [
-        "glibc"
-      ],
       "license": "LGPL-3.0-or-later",
       "optional": true,
       "os": [
@@ -712,9 +1360,6 @@
       "cpu": [
         "x64"
       ],
-      "libc": [
-        "glibc"
-      ],
       "license": "LGPL-3.0-or-later",
       "optional": true,
       "os": [
@@ -731,9 +1376,6 @@
       "cpu": [
         "arm64"
       ],
-      "libc": [
-        "musl"
-      ],
       "license": "LGPL-3.0-or-later",
       "optional": true,
       "os": [
@@ -750,9 +1392,6 @@
       "cpu": [
         "x64"
       ],
-      "libc": [
-        "musl"
-      ],
       "license": "LGPL-3.0-or-later",
       "optional": true,
       "os": [
@@ -769,9 +1408,6 @@
       "cpu": [
         "arm"
       ],
-      "libc": [
-        "glibc"
-      ],
       "license": "Apache-2.0",
       "optional": true,
       "os": [
@@ -794,9 +1430,6 @@
       "cpu": [
         "arm64"
       ],
-      "libc": [
-        "glibc"
-      ],
       "license": "Apache-2.0",
       "optional": true,
       "os": [
@@ -819,9 +1452,6 @@
       "cpu": [
         "ppc64"
       ],
-      "libc": [
-        "glibc"
-      ],
       "license": "Apache-2.0",
       "optional": true,
       "os": [
@@ -844,9 +1474,6 @@
       "cpu": [
         "riscv64"
       ],
-      "libc": [
-        "glibc"
-      ],
       "license": "Apache-2.0",
       "optional": true,
       "os": [
@@ -869,9 +1496,6 @@
       "cpu": [
         "s390x"
       ],
-      "libc": [
-        "glibc"
-      ],
       "license": "Apache-2.0",
       "optional": true,
       "os": [
@@ -894,9 +1518,6 @@
       "cpu": [
         "x64"
       ],
-      "libc": [
-        "glibc"
-      ],
       "license": "Apache-2.0",
       "optional": true,
       "os": [
@@ -919,9 +1540,6 @@
       "cpu": [
         "arm64"
       ],
-      "libc": [
-        "musl"
-      ],
       "license": "Apache-2.0",
       "optional": true,
       "os": [
@@ -944,9 +1562,6 @@
       "cpu": [
         "x64"
       ],
-      "libc": [
-        "musl"
-      ],
       "license": "Apache-2.0",
       "optional": true,
       "os": [
@@ -1162,9 +1777,6 @@
       "cpu": [
         "arm64"
       ],
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1181,9 +1793,6 @@
       "cpu": [
         "arm64"
       ],
-      "libc": [
-        "musl"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1200,9 +1809,6 @@
       "cpu": [
         "x64"
       ],
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1219,9 +1825,6 @@
       "cpu": [
         "x64"
       ],
-      "libc": [
-        "musl"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1311,6 +1914,63 @@
         "node": ">=12.4.0"
       }
     },
+    "node_modules/@protobufjs/aspromise": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@protobufjs/aspromise/-/aspromise-1.1.2.tgz",
+      "integrity": "sha512-j+gKExEuLmKwvz3OgROXtrJ2UG2x8Ch2YZUxahh+s1F2HZ+wAceUNLkvy6zKCPVRkU++ZWQrdxsUeQXmcg4uoQ==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/@protobufjs/base64": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@protobufjs/base64/-/base64-1.1.2.tgz",
+      "integrity": "sha512-AZkcAA5vnN/v4PDqKyMR5lx7hZttPDgClv83E//FMNhR2TMcLUhfRUBHCmSl0oi9zMgDDqRUJkSxO3wm85+XLg==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/@protobufjs/codegen": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/@protobufjs/codegen/-/codegen-2.0.5.tgz",
+      "integrity": "sha512-zgXFLzW3Ap33e6d0Wlj4MGIm6Ce8O89n/apUaGNB/jx+hw+ruWEp7EwGUshdLKVRCxZW12fp9r40E1mQrf/34g==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/@protobufjs/eventemitter": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@protobufjs/eventemitter/-/eventemitter-1.1.1.tgz",
+      "integrity": "sha512-vW1GmwMZNnL+gMRaovlh9yZX74kc+TTU3FObkkurpMaRtBfLP3ldjS9KQWlwZgraRE0+dheEEoAxdzcJQ8eXZg==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/@protobufjs/fetch": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@protobufjs/fetch/-/fetch-1.1.1.tgz",
+      "integrity": "sha512-GpptLrs57adMSuHi3VNj0mAF8dwh36LMaYF6XyJ6JMWlVsc+t42tm1HSEDmOs3A8fC9yyeisgLhsTVQokOZ0zw==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "@protobufjs/aspromise": "^1.1.1"
+      }
+    },
+    "node_modules/@protobufjs/float": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@protobufjs/float/-/float-1.0.2.tgz",
+      "integrity": "sha512-Ddb+kVXlXst9d+R9PfTIxh1EdNkgoRe5tOX6t01f1lYWOvJnSPDBlG241QLzcyPdoNTsblLUdujGSE4RzrTZGQ==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/@protobufjs/path": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@protobufjs/path/-/path-1.1.2.tgz",
+      "integrity": "sha512-6JOcJ5Tm08dOHAbdR3GrvP+yUUfkjG5ePsHYczMFLq3ZmMkAD98cDgcT2iA1lJ9NVwFd4tH/iSSoe44YWkltEA==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/@protobufjs/pool": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@protobufjs/pool/-/pool-1.1.0.tgz",
+      "integrity": "sha512-0kELaGSIDBKvcgS4zkjz1PeddatrjYcmMWOlAuAPwAeccUrPHdUqo/J6LiymHHEiJT5NrF1UVwxY14f+fy4WQw==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/@protobufjs/utf8": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@protobufjs/utf8/-/utf8-1.1.2.tgz",
+      "integrity": "sha512-b1UQwcEZ4yCnMCD8DAL1VlbvBJE9/IX4FTIp7BG1xYpf29SLazLSrqUkj4w7Y5y7cCVP6E5tcqqcI0xemPkHug==",
+      "license": "BSD-3-Clause"
+    },
     "node_modules/@rtsao/scc": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@rtsao/scc/-/scc-1.1.0.tgz",
@@ -1652,9 +2312,6 @@
         "arm64"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1672,9 +2329,6 @@
         "arm64"
       ],
       "dev": true,
-      "libc": [
-        "musl"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1692,9 +2346,6 @@
         "x64"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1712,9 +2363,6 @@
         "x64"
       ],
       "dev": true,
-      "libc": [
-        "musl"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1838,7 +2486,6 @@
       "version": "20.19.43",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-20.19.43.tgz",
       "integrity": "sha512-6oYBAi5ikg4Pl+kGsoYtawUMBT2zZMCvPNF7pVLnHZfd1zf38DRiWn/gT01RYCdUqkv7Fhr+C9ot4/tb+2sVvA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "undici-types": "~6.21.0"
@@ -2271,9 +2918,6 @@
         "arm64"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2288,9 +2932,6 @@
         "arm64"
       ],
       "dev": true,
-      "libc": [
-        "musl"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2305,9 +2946,6 @@
         "loong64"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2322,9 +2960,6 @@
         "loong64"
       ],
       "dev": true,
-      "libc": [
-        "musl"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2339,9 +2974,6 @@
         "ppc64"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2356,9 +2988,6 @@
         "riscv64"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2373,9 +3002,6 @@
         "riscv64"
       ],
       "dev": true,
-      "libc": [
-        "musl"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2390,9 +3016,6 @@
         "s390x"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2407,9 +3030,6 @@
         "x64"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2424,9 +3044,6 @@
         "x64"
       ],
       "dev": true,
-      "libc": [
-        "musl"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2559,11 +3176,19 @@
         "url": "https://github.com/sponsors/epoberezkin"
       }
     },
+    "node_modules/ansi-regex": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/ansi-styles": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
       "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "color-convert": "^2.0.1"
@@ -2984,11 +3609,24 @@
       "integrity": "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==",
       "license": "MIT"
     },
+    "node_modules/cliui": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/cliui/-/cliui-8.0.1.tgz",
+      "integrity": "sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==",
+      "license": "ISC",
+      "dependencies": {
+        "string-width": "^4.2.0",
+        "strip-ansi": "^6.0.1",
+        "wrap-ansi": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/color-convert": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
       "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "color-name": "~1.1.4"
@@ -3001,7 +3639,6 @@
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
       "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/common-tags": {
@@ -3940,6 +4577,18 @@
         "reusify": "^1.0.4"
       }
     },
+    "node_modules/faye-websocket": {
+      "version": "0.11.4",
+      "resolved": "https://registry.npmjs.org/faye-websocket/-/faye-websocket-0.11.4.tgz",
+      "integrity": "sha512-CzbClwlXAuiRQAlUyfqPgvPoNKTckTPGfwZV4ZdAhVcP2lh9KUxJg2b5GkE7XbjKQ3YJnQ9z6D9ntLAlB+tP8g==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "websocket-driver": ">=0.5.1"
+      },
+      "engines": {
+        "node": ">=0.8.0"
+      }
+    },
     "node_modules/file-entry-cache": {
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-8.0.0.tgz",
@@ -3983,6 +4632,42 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/firebase": {
+      "version": "12.16.0",
+      "resolved": "https://registry.npmjs.org/firebase/-/firebase-12.16.0.tgz",
+      "integrity": "sha512-CNw6hFBdONkzF8UGLDx/RDRY9gVa5VmJNHd7qi4gdmA3ZuLkuOrhmWefB2l+FN+OxFpN77Itq7aO6zlTi780ag==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@firebase/ai": "2.13.1",
+        "@firebase/analytics": "0.10.22",
+        "@firebase/analytics-compat": "0.2.28",
+        "@firebase/app": "0.15.1",
+        "@firebase/app-check": "0.12.0",
+        "@firebase/app-check-compat": "0.4.5",
+        "@firebase/app-compat": "0.5.15",
+        "@firebase/app-types": "0.9.5",
+        "@firebase/auth": "1.13.3",
+        "@firebase/auth-compat": "0.6.8",
+        "@firebase/data-connect": "0.7.1",
+        "@firebase/database": "1.1.3",
+        "@firebase/database-compat": "2.1.4",
+        "@firebase/firestore": "4.16.0",
+        "@firebase/firestore-compat": "0.4.11",
+        "@firebase/functions": "0.13.5",
+        "@firebase/functions-compat": "0.4.5",
+        "@firebase/installations": "0.6.22",
+        "@firebase/installations-compat": "0.2.22",
+        "@firebase/messaging": "0.13.0",
+        "@firebase/messaging-compat": "0.2.27",
+        "@firebase/performance": "0.7.12",
+        "@firebase/performance-compat": "0.2.25",
+        "@firebase/remote-config": "0.9.0",
+        "@firebase/remote-config-compat": "0.2.27",
+        "@firebase/storage": "0.14.3",
+        "@firebase/storage-compat": "0.4.3",
+        "@firebase/util": "1.15.1"
+      }
+    },
     "node_modules/flat-cache": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-4.0.1.tgz",
@@ -4084,6 +4769,15 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/get-caller-file": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
+      "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==",
+      "license": "ISC",
+      "engines": {
+        "node": "6.* || 8.* || >= 10.*"
+      }
+    },
     "node_modules/get-intrinsic": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.3.0.tgz",
@@ -4270,6 +4964,12 @@
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/gsap": {
+      "version": "3.15.0",
+      "resolved": "https://registry.npmjs.org/gsap/-/gsap-3.15.0.tgz",
+      "integrity": "sha512-dMW4CWBTUK1AEEDeZc1g4xpPGIrSf9fJF960qbTZmN/QwZIWY5wgliS6JWl9/25fpTGJrMRtSjGtOmPnfjZB+A==",
+      "license": "Standard 'no charge' license: https://gsap.com/standard-license."
+    },
     "node_modules/has-bigints": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/has-bigints/-/has-bigints-1.1.0.tgz",
@@ -4381,6 +5081,12 @@
         "hermes-estree": "0.25.1"
       }
     },
+    "node_modules/http-parser-js": {
+      "version": "0.5.10",
+      "resolved": "https://registry.npmjs.org/http-parser-js/-/http-parser-js-0.5.10.tgz",
+      "integrity": "sha512-Pysuw9XpUq5dVc/2SMHpuTY01RFl8fttgcyunjL7eEMhGM3cI4eOmiCycJDVCo/7O7ClfQD3SaI6ftDzqOXYMA==",
+      "license": "MIT"
+    },
     "node_modules/idb": {
       "version": "8.0.3",
       "resolved": "https://registry.npmjs.org/idb/-/idb-8.0.3.tgz",
@@ -4639,6 +5345,15 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/is-fullwidth-code-point": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
+      "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/is-generator-function": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/is-generator-function/-/is-generator-function-1.1.2.tgz",
@@ -5198,9 +5913,6 @@
         "arm64"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "MPL-2.0",
       "optional": true,
       "os": [
@@ -5222,9 +5934,6 @@
         "arm64"
       ],
       "dev": true,
-      "libc": [
-        "musl"
-      ],
       "license": "MPL-2.0",
       "optional": true,
       "os": [
@@ -5246,9 +5955,6 @@
         "x64"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "MPL-2.0",
       "optional": true,
       "os": [
@@ -5270,9 +5976,6 @@
         "x64"
       ],
       "dev": true,
-      "libc": [
-        "musl"
-      ],
       "license": "MPL-2.0",
       "optional": true,
       "os": [
@@ -5344,6 +6047,12 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/lodash.camelcase": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz",
+      "integrity": "sha512-TwuEnCnxbc3rAvhf/LbG7tJUDzhqXyFnv3dtzLOPgCG/hODL7WFnsbwktkD7yUV0RrreP/l1PALq/YSg6VvjlA==",
+      "license": "MIT"
+    },
     "node_modules/lodash.merge": {
       "version": "4.6.2",
       "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
@@ -5357,6 +6066,12 @@
       "integrity": "sha512-HDWXG8isMntAyRF5vZ7xKuEvOhT4AhlRt/3czTSjvGUxjYCBVRQY48ViDHyfYz9VIoBkW4TMGQNapx+l3RUwdA==",
       "license": "MIT"
     },
+    "node_modules/long": {
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/long/-/long-5.3.2.tgz",
+      "integrity": "sha512-mNAgZ1GmyNhD7AuqnTG3/VQ26o760+ZYBPKjPvugO8+nLbYfX6TVpJPseBvopbdY+qpZ/lKUnmEc1LeZYS3QAA==",
+      "license": "Apache-2.0"
+    },
     "node_modules/loose-envify": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
@@ -5970,6 +6685,29 @@
         "react-is": "^16.13.1"
       }
     },
+    "node_modules/protobufjs": {
+      "version": "7.6.5",
+      "resolved": "https://registry.npmjs.org/protobufjs/-/protobufjs-7.6.5.tgz",
+      "integrity": "sha512-/FPD0nUc9jH6rfFjji9IBqOz4pcSE3CsT1m7Ep6Mdb0LxSUMj8hgl6GomOvZzpNpAqqGaXA0P3VSrZLFzIhQrw==",
+      "hasInstallScript": true,
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "@protobufjs/aspromise": "^1.1.2",
+        "@protobufjs/base64": "^1.1.2",
+        "@protobufjs/codegen": "^2.0.5",
+        "@protobufjs/eventemitter": "^1.1.1",
+        "@protobufjs/fetch": "^1.1.1",
+        "@protobufjs/float": "^1.0.2",
+        "@protobufjs/path": "^1.1.2",
+        "@protobufjs/pool": "^1.1.0",
+        "@protobufjs/utf8": "^1.1.1",
+        "@types/node": ">=13.7.0",
+        "long": "^5.3.2"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
     "node_modules/punycode": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
@@ -6000,6 +6738,12 @@
       ],
       "license": "MIT"
     },
+    "node_modules/re2js": {
+      "version": "0.4.3",
+      "resolved": "https://registry.npmjs.org/re2js/-/re2js-0.4.3.tgz",
+      "integrity": "sha512-EuNmh7jurhHEE8Ge/lBo9JuMLb3qf866Xjjfyovw3wPc7+hlqDkZq4LwhrCQMEI+ARWfrKrHozEndzlpNT0WDg==",
+      "license": "MIT"
+    },
     "node_modules/react": {
       "version": "19.2.4",
       "resolved": "https://registry.npmjs.org/react/-/react-19.2.4.tgz",
@@ -6072,6 +6816,15 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/require-directory": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
+      "integrity": "sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/resolve": {
       "version": "2.0.0-next.7",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-2.0.0-next.7.tgz",
@@ -6171,6 +6924,26 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/safe-buffer": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
+      "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT"
+    },
     "node_modules/safe-push-apply": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/safe-push-apply/-/safe-push-apply-1.0.0.tgz",
@@ -6489,6 +7262,26 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/string-width": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "license": "MIT",
+      "dependencies": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/string-width/node_modules/emoji-regex": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+      "license": "MIT"
+    },
     "node_modules/string.prototype.includes": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/string.prototype.includes/-/string.prototype.includes-2.0.1.tgz",
@@ -6603,6 +7396,18 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/strip-ansi": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/strip-bom": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-3.0.0.tgz",
@@ -6990,7 +7795,6 @@
       "version": "6.21.0",
       "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.21.0.tgz",
       "integrity": "sha512-iwDZqg0QAGrg9Rav5H4n0M64c3mkR59cJ6wQp+7C4nI0gsmExaedaYLNO44eT4AtBBwjbTiGPMlt2Md0T9H9JQ==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/unrs-resolver": {
@@ -7071,12 +7875,41 @@
         "punycode": "^2.1.0"
       }
     },
+    "node_modules/web-vitals": {
+      "version": "4.2.4",
+      "resolved": "https://registry.npmjs.org/web-vitals/-/web-vitals-4.2.4.tgz",
+      "integrity": "sha512-r4DIlprAGwJ7YM11VZp4R884m0Vmgr6EAKe3P+kO0PPj3Unqyvv59rczf6UiGcb9Z8QxZVcqKNwv/g0WNdWwsw==",
+      "license": "Apache-2.0"
+    },
     "node_modules/webidl-conversions": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-4.0.2.tgz",
       "integrity": "sha512-YQ+BmxuTgd6UXZW3+ICGfyqRyHXVlD5GtQr5+qjiNW7bF0cqrzX500HVXPBOvgXb5YnzDd+h0zqyv61KUD7+Sg==",
       "license": "BSD-2-Clause"
     },
+    "node_modules/websocket-driver": {
+      "version": "0.7.5",
+      "resolved": "https://registry.npmjs.org/websocket-driver/-/websocket-driver-0.7.5.tgz",
+      "integrity": "sha512-ZL2+3c7kMBdIRCMz6l8jQMHyGVxj+UL+xVk74Ombiciboca8rHa15L86B19E5oh1pL9Ii/uj54gtsIrZGMo6zA==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "http-parser-js": ">=0.5.1",
+        "safe-buffer": ">=5.1.0",
+        "websocket-extensions": ">=0.1.1"
+      },
+      "engines": {
+        "node": ">=0.8.0"
+      }
+    },
+    "node_modules/websocket-extensions": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/websocket-extensions/-/websocket-extensions-0.1.4.tgz",
+      "integrity": "sha512-OqedPIGOfsDlo31UNwYbCFMSaO9m9G/0faIHj5/dZFDMFqPTcx6UwqyOy3COEaEOg/9VsGIpdqn62W5KhoKSpg==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=0.8.0"
+      }
+    },
     "node_modules/whatwg-url": {
       "version": "7.1.0",
       "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-7.1.0.tgz",
@@ -7203,6 +8036,32 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/wrap-ansi": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
+      "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^4.0.0",
+        "string-width": "^4.1.0",
+        "strip-ansi": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+      }
+    },
+    "node_modules/y18n": {
+      "version": "5.0.8",
+      "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz",
+      "integrity": "sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/yallist": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
@@ -7210,6 +8069,33 @@
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/yargs": {
+      "version": "17.7.3",
+      "resolved": "https://registry.npmjs.org/yargs/-/yargs-17.7.3.tgz",
+      "integrity": "sha512-GZtjxm/J/4TSxuL3FNYjCmLktBTnIw/rVmKSIyKeYAZpmJB2ig9VauCC5xsa82GNKVKDAqpOn3KVzNt0zmrU0g==",
+      "license": "MIT",
+      "dependencies": {
+        "cliui": "^8.0.1",
+        "escalade": "^3.1.1",
+        "get-caller-file": "^2.0.5",
+        "require-directory": "^2.1.1",
+        "string-width": "^4.2.3",
+        "y18n": "^5.0.5",
+        "yargs-parser": "^21.1.1"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/yargs-parser": {
+      "version": "21.1.1",
+      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-21.1.1.tgz",
+      "integrity": "sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/yocto-queue": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
diff --git a/package.json b/package.json
index 414141d..a2ade93 100644
--- a/package.json
+++ b/package.json
@@ -12,6 +12,8 @@
     "@serwist/next": "^9.5.11",
     "dexie": "^4.4.4",
     "dexie-react-hooks": "^4.4.0",
+    "firebase": "^12.16.0",
+    "gsap": "^3.15.0",
     "lucide-react": "^1.24.0",
     "next": "16.2.10",
     "react": "19.2.4",

From 2f751a9b84c7fe98e55f94035f2a23bd4f25dafb Mon Sep 17 00:00:00 2001
From: tilaplapya <noelmateo126@gmail.com>
Date: Wed, 15 Jul 2026 05:34:51 +0800
Subject: [PATCH 02/22] updtae maangas

---
 app/layout.tsx           |   2 +-
 app/page.tsx             | 100 ++++++++++++++++++++++-----------------
 components/AuthGuard.tsx |   6 ++-
 lib/auth.tsx             |  12 ++++-
 4 files changed, 72 insertions(+), 48 deletions(-)

diff --git a/app/layout.tsx b/app/layout.tsx
index 173f530..28a0743 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -92,7 +92,7 @@ export default function RootLayout({
           }}
         />
       </head>
-      <body className="min-h-full flex flex-col">
+      <body className="min-h-full flex flex-col" suppressHydrationWarning>
         <AuthProvider>{children}</AuthProvider>
       </body>
     </html>
diff --git a/app/page.tsx b/app/page.tsx
index 33bcd65..2c92ae8 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -277,16 +277,36 @@ function PillButton({
 function UserProfile({
   photoURL,
   displayName,
+  email,
   onSignOut,
 }: {
   photoURL: string | null;
   displayName: string | null;
+  email: string | null;
   onSignOut: () => void;
 }) {
   const [open, setOpen] = useState(false);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!open) return;
+
+    function handleOutsideClick(event: MouseEvent | TouchEvent) {
+      if (containerRef.current && !containerRef.current.contains(event.target as Node)) {
+        setOpen(false);
+      }
+    }
+
+    document.addEventListener("mousedown", handleOutsideClick);
+    document.addEventListener("touchstart", handleOutsideClick);
+    return () => {
+      document.removeEventListener("mousedown", handleOutsideClick);
+      document.removeEventListener("touchstart", handleOutsideClick);
+    };
+  }, [open]);
 
   return (
-    <div className="relative">
+    <div ref={containerRef} className="relative z-50">
       <button
         type="button"
         onClick={() => setOpen((o) => !o)}
@@ -303,28 +323,36 @@ function UserProfile({
 
       {/* Dropdown */}
       {open && (
-        <>
-          <div className="fixed inset-0 z-40" onClick={() => setOpen(false)} />
-          <div className="absolute right-0 top-14 z-50 w-52 neu-raised p-3 animate-page-enter">
-            <p className="truncate text-sm font-semibold text-text-primary mb-1">
+        <div className="absolute right-0 top-14 w-60 rounded-2xl p-4 bg-bg/95 backdrop-blur-md border border-text-secondary/10 shadow-neu-raised animate-page-enter z-50">
+          <div className="flex flex-col gap-0.5 px-1 pb-2">
+            <p className="truncate text-sm font-bold text-text-primary">
               {displayName ?? "User"}
             </p>
-            <hr className="border-text-secondary/15 my-2" />
-            <button
-              type="button"
-              onClick={() => { setOpen(false); onSignOut(); }}
-              className="neu-button flex w-full items-center gap-2 rounded-xl px-3 py-2.5 text-sm text-text-secondary hover:text-red-500 cursor-pointer"
-            >
-              <LogOut className="h-4 w-4" />
-              Sign out
-            </button>
+            {email && (
+              <p className="truncate text-[11px] text-text-secondary/80 font-medium">
+                {email}
+              </p>
+            )}
           </div>
-        </>
+          <hr className="border-text-secondary/10 my-1" />
+          <button
+            type="button"
+            onClick={() => {
+              console.log("[KeepCheck UI] Sign-out button clicked!");
+              onSignOut();
+            }}
+            className="flex w-full items-center justify-center gap-2 rounded-xl border border-red-500/20 bg-red-500/10 px-4 py-2.5 text-sm font-semibold text-red-500 transition-all duration-300 hover:bg-red-500 hover:text-white hover:border-transparent active:scale-[0.97] cursor-pointer"
+          >
+            <LogOut className="h-4 w-4" />
+            <span>Sign out</span>
+          </button>
+        </div>
       )}
     </div>
   );
 }
 
+
 /* ------------------------------------------------------------------ */
 /*  Main page                                                          */
 /* ------------------------------------------------------------------ */
@@ -452,8 +480,8 @@ function HomePage() {
     return unsubscribe;
   }, [user, syncSpots]);
 
-  /* -- Search, Sort & Category filter -- */
   const [search, setSearch] = useState("");
+  const prevSearchRef = useRef("");
   const [sortMode, setSortMode] = useState<SortMode>("newest");
   const [catFilter, setCatFilter] = useState<CategoryFilter>("All");
 
@@ -585,25 +613,30 @@ function HomePage() {
     return () => ctx.revert();
   }, [user, spots]);
 
-  // 2. Stagger feed items whenever spots or search query updates
+  // 2. Stagger feed items whenever spots or filters update (skips animation during active search typing to prevent lag)
   useEffect(() => {
+    const isSearching = search !== prevSearchRef.current;
+    prevSearchRef.current = search;
+
+    if (isSearching) return; // skip staggers on search changes to keep typing smooth
+
     const elements = document.querySelectorAll(".gsap-list-item");
     if (elements.length > 0) {
       gsap.fromTo(
         elements,
-        { opacity: 0, y: 20, scale: 0.98 },
+        { opacity: 0, y: 15, scale: 0.98 },
         {
           opacity: 1,
           y: 0,
           scale: 1,
-          duration: 0.45,
-          stagger: 0.04,
+          duration: 0.4,
+          stagger: 0.03,
           ease: "power2.out",
           overwrite: "auto"
         }
       );
     }
-  }, [filteredSpots]);
+  }, [filteredSpots, search]);
 
   // 3. Modal Form slide in/out animations
   const openFormModal = () => {
@@ -839,20 +872,7 @@ function HomePage() {
     }
   }
 
-  async function handleExport() {
-    if (!user) return;
-    const allSpots = await db.spots.where("userId").equals(user.uid).toArray();
-    const json = JSON.stringify(allSpots, null, 2);
-    const blob = new Blob([json], { type: "application/json" });
-    const url = URL.createObjectURL(blob);
-
-    const a = document.createElement("a");
-    a.href = url;
-    a.download = "keepcheck-spots-backup.json";
-    a.click();
 
-    URL.revokeObjectURL(url);
-  }
 
   async function deleteEntry(id: number) {
     try {
@@ -923,7 +943,7 @@ function HomePage() {
       </div>
 
       {/* ---- Header ---- */}
-      <header className="relative mb-6 sm:mb-8 gsap-header gsap-reveal">
+      <header className="relative z-40 mb-6 sm:mb-8 gsap-header gsap-reveal">
         <div className="flex items-center justify-between">
           <div>
             <h1 className="text-2xl sm:text-3xl lg:text-4xl font-serif font-bold tracking-tight text-text-primary">
@@ -953,6 +973,7 @@ function HomePage() {
               <UserProfile
                 photoURL={user.photoURL}
                 displayName={user.displayName}
+                email={user.email}
                 onSignOut={signOut}
               />
             )}
@@ -1074,15 +1095,6 @@ function HomePage() {
           <h2 className="text-base sm:text-lg font-serif font-semibold text-text-primary">
             Activity Feed
           </h2>
-          {spots && spots.length > 0 && (
-            <button
-              type="button"
-              onClick={handleExport}
-              className="neu-button rounded-xl px-3 py-1.5 text-xs font-semibold text-text-secondary cursor-pointer min-h-[34px] hover:text-text-primary"
-            >
-              Export Backup
-            </button>
-          )}
         </div>
 
         {spots && spots.length > 0 ? (
diff --git a/components/AuthGuard.tsx b/components/AuthGuard.tsx
index 244aaec..a482e00 100644
--- a/components/AuthGuard.tsx
+++ b/components/AuthGuard.tsx
@@ -16,10 +16,12 @@ export default function AuthGuard({ children }: { children: React.ReactNode }) {
   const router = useRouter();
 
   useEffect(() => {
+    console.log("[KeepCheck AuthGuard] State check - Loading:", loading, "User:", user ? user.email : "null");
     if (!loading && !user) {
-      router.replace("/login");
+      console.log("[KeepCheck AuthGuard] Redirecting to /login via window.location");
+      window.location.href = "/login";
     }
-  }, [user, loading, router]);
+  }, [user, loading]);
 
   if (loading) {
     return (
diff --git a/lib/auth.tsx b/lib/auth.tsx
index 118e78f..09ea74f 100644
--- a/lib/auth.tsx
+++ b/lib/auth.tsx
@@ -123,7 +123,17 @@ export function AuthProvider({ children }: { children: ReactNode }) {
 
   // Sign out.
   const signOut = useCallback(async () => {
-    await firebaseSignOut(getFirebaseAuth());
+    console.log("[KeepCheck AuthContext] signOut called");
+    // Trigger Firebase sign-out in the background.
+    firebaseSignOut(getFirebaseAuth())
+      .then(() => {
+        console.log("[KeepCheck AuthContext] Firebase signOut completed successfully");
+      })
+      .catch((error) => {
+        console.error("[KeepCheck AuthContext] Background Firebase signOut error:", error);
+      });
+    // Immediately clear local state for instant redirect.
+    console.log("[KeepCheck AuthContext] Setting user to null");
     setUser(null);
   }, []);
 

From 0e399a28cf7dcd7df27315b819508d6804e761c2 Mon Sep 17 00:00:00 2001
From: tilaplapya <noelmateo126@gmail.com>
Date: Wed, 15 Jul 2026 07:05:53 +0800
Subject: [PATCH 03/22] dagdag

---
 app/db.ts          |  22 ++++
 app/globals.css    |  71 +++++++++++++
 app/page.tsx       | 105 ++++++++++++++-----
 lib/offlineSync.ts | 254 +++++++++++++++++++++++++++++++++++++++++++++
 4 files changed, 428 insertions(+), 24 deletions(-)
 create mode 100644 lib/offlineSync.ts

diff --git a/app/db.ts b/app/db.ts
index 4f75636..4f13585 100644
--- a/app/db.ts
+++ b/app/db.ts
@@ -17,6 +17,8 @@ export interface FoodSpotLog {
   firebaseId?: string;
   /** Firebase Auth UID that owns this entry. */
   userId?: string;
+  /** True when the entry has been saved locally but not yet synced to Firestore. */
+  pendingSync?: boolean;
 }
 
 /** Full-resolution image associated with a spot (one image per spot). */
@@ -97,6 +99,26 @@ class KeepCheckDB extends Dexie {
             }
           })
       );
+
+    // v5 — adds `pendingSync` index for offline-first sync tracking.
+    // When a spot is saved locally but hasn't been synced to Firestore
+    // yet, pendingSync = true. The sync manager uses this index to
+    // efficiently sweep all unsynced entries.
+    this.version(5)
+      .stores({
+        spots: "++id, name, category, rating, createdAt, firebaseId, userId, pendingSync",
+        images: "++id, spotId, createdAt, firebaseId",
+      })
+      .upgrade((tx) =>
+        tx
+          .table<FoodSpotLog>("spots")
+          .toCollection()
+          .modify((spot) => {
+            if (spot.pendingSync === undefined) {
+              spot.pendingSync = false;
+            }
+          })
+      );
   }
 }
 
diff --git a/app/globals.css b/app/globals.css
index 448c378..d2f9d6e 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -543,5 +543,76 @@ body {
   will-change: transform, opacity;
 }
 
+/* ================================================================== */
+/*  OFFLINE SYNC UI                                                    */
+/* ================================================================== */
+
+/* Fixed offline banner at the top */
+.offline-banner {
+  background: linear-gradient(135deg, #b45309, #d97706);
+  color: #fef3c7;
+  backdrop-filter: blur(12px);
+  box-shadow: 0 4px 20px rgba(180, 83, 9, 0.35), 0 1px 3px rgba(0, 0, 0, 0.2);
+  animation: offline-slide-in 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
+  letter-spacing: 0.02em;
+}
+
+@keyframes offline-slide-in {
+  0% { transform: translateY(-100%); opacity: 0; }
+  100% { transform: translateY(0); opacity: 1; }
+}
+
+/* Sync toast (success notification when reconnected) */
+.sync-toast {
+  background: linear-gradient(135deg, #065f46, #047857);
+  color: #d1fae5;
+  box-shadow: 0 8px 32px rgba(4, 120, 87, 0.4), var(--neu-shadow-raised);
+  animation: toast-pop-in 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
+}
+
+@keyframes toast-pop-in {
+  0% { transform: translate(-50%, -20px) scale(0.85); opacity: 0; }
+  100% { transform: translate(-50%, 0) scale(1); opacity: 1; }
+}
+
+/* Pending sync badge on carousel cards */
+.pending-sync-badge {
+  position: absolute;
+  top: 12px;
+  left: 12px;
+  z-index: 10;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 26px;
+  height: 26px;
+  border-radius: 50%;
+  background: linear-gradient(135deg, #b45309, #d97706);
+  color: #fef3c7;
+  box-shadow: 0 2px 8px rgba(180, 83, 9, 0.4);
+  animation: badge-pulse 2s ease-in-out infinite;
+}
+
+@keyframes badge-pulse {
+  0%, 100% { box-shadow: 0 2px 8px rgba(180, 83, 9, 0.4); transform: scale(1); }
+  50% { box-shadow: 0 2px 16px rgba(180, 83, 9, 0.7); transform: scale(1.08); }
+}
+
+/* Pending sync pill in activity feed list */
+.pending-sync-pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 3px 8px;
+  border-radius: 999px;
+  font-size: 10px;
+  font-weight: 600;
+  letter-spacing: 0.03em;
+  text-transform: uppercase;
+  background: linear-gradient(135deg, #b45309, #d97706);
+  color: #fef3c7;
+  box-shadow: 0 1px 4px rgba(180, 83, 9, 0.3);
+  white-space: nowrap;
+}
 
 
diff --git a/app/page.tsx b/app/page.tsx
index 2c92ae8..f10c250 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -15,7 +15,12 @@ import {
   deleteImagesForSpotFromFirestore,
   subscribeToSpots,
 } from "@/lib/firestore";
-import { Trash2, Camera, LogOut, ChevronLeft, ChevronRight, Clock, Plus, X } from "lucide-react";
+import {
+  syncSpotToFirestore,
+  queuePendingDelete,
+  startOnlineListener,
+} from "@/lib/offlineSync";
+import { Trash2, Camera, LogOut, ChevronLeft, ChevronRight, Clock, Plus, X, WifiOff, Cloud, CloudOff } from "lucide-react";
 import { gsap } from "gsap";
 
 /* ------------------------------------------------------------------ */
@@ -369,6 +374,10 @@ function HomePage() {
   const fileInputRef = useRef<HTMLInputElement>(null);
   const [deletingIds, setDeletingIds] = useState<Set<number>>(new Set());
 
+  /* -- Online/offline state -- */
+  const [isOnline, setIsOnline] = useState(true);
+  const [syncToastMsg, setSyncToastMsg] = useState<string | null>(null);
+
   /* -- Modal control state -- */
   const [isFormOpen, setIsFormOpen] = useState(false);
 
@@ -457,15 +466,21 @@ function HomePage() {
           thumbnail: fSpot.thumbnail,
           firebaseId: fSpot.firebaseId,
           userId: user.uid,
+          pendingSync: false,
         });
+      } else if (existing.pendingSync && existing.id !== undefined) {
+        // Spot confirmed in Firestore — clear pending flag
+        await db.spots.update(existing.id, { pendingSync: false });
       }
     }
 
-    // Remove local spots whose firebaseId no longer exists in Firestore
+    // Remove local spots whose firebaseId no longer exists in Firestore.
+    // IMPORTANT: Skip spots with pendingSync — they haven't been uploaded yet
+    // and will appear in Firestore once the device is back online.
     const firestoreIds = new Set(firestoreSpots.map((s) => s.firebaseId));
     const localSpots = await db.spots.where("userId").equals(user.uid).toArray();
     for (const local of localSpots) {
-      if (local.firebaseId && !firestoreIds.has(local.firebaseId)) {
+      if (local.firebaseId && !firestoreIds.has(local.firebaseId) && !local.pendingSync) {
         if (local.id !== undefined) {
           await db.images.where("spotId").equals(local.id).delete();
           await db.spots.delete(local.id);
@@ -480,6 +495,24 @@ function HomePage() {
     return unsubscribe;
   }, [user, syncSpots]);
 
+  /* -- Offline sync listener -- */
+  useEffect(() => {
+    if (!user) return;
+
+    const cleanup = startOnlineListener(
+      user.uid,
+      (online) => setIsOnline(online),
+      (syncedCount) => {
+        if (syncedCount > 0) {
+          setSyncToastMsg(`✓ Synced ${syncedCount} offline log${syncedCount > 1 ? "s" : ""}`);
+          setTimeout(() => setSyncToastMsg(null), 3500);
+        }
+      },
+    );
+
+    return cleanup;
+  }, [user]);
+
   const [search, setSearch] = useState("");
   const prevSearchRef = useRef("");
   const [sortMode, setSortMode] = useState<SortMode>("newest");
@@ -802,11 +835,13 @@ function HomePage() {
 
       const firebaseId = generateSpotId(user.uid);
 
+      // ---- 1. ALWAYS save locally first (instant, works offline) ----
       const spotId = await db.transaction("rw", db.spots, db.images, async () => {
         const localId = await db.spots.add({
           ...spotData,
           firebaseId,
           userId: user.uid,
+          pendingSync: true, // Mark as needing cloud sync
         });
 
         if (compressedBlob) {
@@ -820,28 +855,17 @@ function HomePage() {
         return localId;
       });
 
-      await writeSpotToFirestore(user.uid, firebaseId, spotData);
+      console.log(`[KeepCheck] Spot saved locally (id: ${spotId}, firebase: ${firebaseId})`);
 
-      if (compressedBlob) {
-        try {
-          const reader = new FileReader();
-          const base64 = await new Promise<string>((resolve, reject) => {
-            reader.onload = () => resolve(reader.result as string);
-            reader.onerror = reject;
-            reader.readAsDataURL(compressedBlob!);
-          });
-          await addImageToFirestore(user.uid, {
-            spotFirebaseId: firebaseId,
-            base64,
-            createdAt: Date.now(),
-          });
-        } catch (imgUploadErr) {
-          console.warn("[KeepCheck] Image upload to Firestore failed (will retry on next sync):", imgUploadErr);
-        }
+      // ---- 2. Attempt Firestore sync in background (non-blocking) ----
+      const savedSpot = await db.spots.get(spotId);
+      if (savedSpot) {
+        syncSpotToFirestore(user.uid, savedSpot).catch((err) => {
+          console.warn("[KeepCheck] Background Firestore sync failed (will retry when online):", err);
+        });
       }
 
-      console.log(`[KeepCheck] Spot saved (local: ${spotId}, firebase: ${firebaseId})`);
-
+      // ---- 3. Reset form & show success ----
       setName("");
       setCategory("Restaurant");
       setRating(7);
@@ -881,17 +905,21 @@ function HomePage() {
 
       await new Promise((resolve) => setTimeout(resolve, 400));
 
+      // Delete locally first (always works)
       await db.transaction("rw", db.spots, db.images, async () => {
         await db.images.where("spotId").equals(id).delete();
         await db.spots.delete(id);
       });
 
+      // Attempt Firestore delete (non-blocking)
       if (spot?.firebaseId && user) {
         try {
           await deleteImagesForSpotFromFirestore(user.uid, spot.firebaseId);
           await deleteSpotFromFirestore(user.uid, spot.firebaseId);
         } catch (fireErr) {
-          console.warn("[KeepCheck] Firestore delete failed (offline?):", fireErr);
+          console.warn("[KeepCheck] Firestore delete failed — queued for retry when online:", fireErr);
+          // Queue for retry when back online
+          queuePendingDelete(user.uid, spot.firebaseId);
         }
       }
 
@@ -942,8 +970,24 @@ function HomePage() {
         <div className="animate-blob-3 absolute top-1/2 left-1/3 h-56 w-56 rounded-full bg-category-restaurant/10" />
       </div>
 
+      {/* ---- Offline Banner ---- */}
+      {!isOnline && (
+        <div className="offline-banner fixed top-0 left-0 right-0 z-[100] flex items-center justify-center gap-2 px-4 py-2.5 text-xs sm:text-sm font-semibold">
+          <WifiOff className="h-4 w-4 animate-pulse" />
+          <span>You&apos;re offline — logs are saved locally and will sync when reconnected</span>
+        </div>
+      )}
+
+      {/* ---- Sync Toast ---- */}
+      {syncToastMsg && (
+        <div className="sync-toast fixed top-4 left-1/2 -translate-x-1/2 z-[100] flex items-center gap-2 px-5 py-2.5 rounded-2xl text-sm font-semibold">
+          <Cloud className="h-4 w-4" />
+          <span>{syncToastMsg}</span>
+        </div>
+      )}
+
       {/* ---- Header ---- */}
-      <header className="relative z-40 mb-6 sm:mb-8 gsap-header gsap-reveal">
+      <header className={`relative z-40 mb-6 sm:mb-8 gsap-header gsap-reveal ${!isOnline ? 'mt-10' : ''}`}>
         <div className="flex items-center justify-between">
           <div>
             <h1 className="text-2xl sm:text-3xl lg:text-4xl font-serif font-bold tracking-tight text-text-primary">
@@ -1050,6 +1094,12 @@ function HomePage() {
                       index={index}
                       onClick={() => spot.id !== undefined && setSelectedSpotId(spot.id)}
                     />
+                    {/* Pending sync badge */}
+                    {spot.pendingSync && (
+                      <div className="pending-sync-badge" title="Waiting to sync to cloud">
+                        <CloudOff className="h-3 w-3" />
+                      </div>
+                    )}
                     <button
                       type="button"
                       onClick={(e) => {
@@ -1185,6 +1235,13 @@ function HomePage() {
                     </div>
                     
                     <div className="flex items-center gap-3.5 flex-shrink-0">
+                      {/* Pending sync indicator in list view */}
+                      {spot.pendingSync && (
+                        <span className="pending-sync-pill" title="Pending sync">
+                          <CloudOff className="h-3 w-3" />
+                          <span className="hidden sm:inline">Offline</span>
+                        </span>
+                      )}
                       <span className="font-bold font-mono text-accent text-xs bg-bg/50 shadow-neu-inset px-2.5 py-1 rounded-full">
                         ★ {spot.rating}
                       </span>
diff --git a/lib/offlineSync.ts b/lib/offlineSync.ts
new file mode 100644
index 0000000..033af5d
--- /dev/null
+++ b/lib/offlineSync.ts
@@ -0,0 +1,254 @@
+/**
+ * Offline Sync Manager
+ *
+ * Coordinates syncing of locally-saved spots to Firestore when the device
+ * comes back online. Works in tandem with Dexie (local DB) and Firestore.
+ *
+ * Strategy:
+ *  1. When a spot is saved, it's ALWAYS written to Dexie first (instant).
+ *  2. The Firestore write is attempted in the background (non-blocking).
+ *  3. If the Firestore write fails (offline / network error), the spot's
+ *     `pendingSync` flag stays `true` in Dexie.
+ *  4. When the browser fires the `online` event, we sweep Dexie for any
+ *     `pendingSync === true` rows and retry their Firestore writes.
+ *  5. On success, `pendingSync` is cleared.
+ *
+ * For deletes that fail while offline, we queue them in localStorage
+ * under a `keepcheck-pending-deletes` key and retry on reconnect.
+ */
+
+import { db, type FoodSpotLog } from "@/app/db";
+import {
+  writeSpotToFirestore,
+  addImageToFirestore,
+  deleteSpotFromFirestore,
+  deleteImagesForSpotFromFirestore,
+} from "./firestore";
+
+/* ------------------------------------------------------------------ */
+/*  Pending-delete queue (localStorage-backed)                         */
+/* ------------------------------------------------------------------ */
+
+interface PendingDelete {
+  uid: string;
+  firebaseId: string;
+}
+
+const PENDING_DELETES_KEY = "keepcheck-pending-deletes";
+
+function getPendingDeletes(): PendingDelete[] {
+  try {
+    const raw = localStorage.getItem(PENDING_DELETES_KEY);
+    return raw ? JSON.parse(raw) : [];
+  } catch {
+    return [];
+  }
+}
+
+function savePendingDeletes(deletes: PendingDelete[]): void {
+  try {
+    localStorage.setItem(PENDING_DELETES_KEY, JSON.stringify(deletes));
+  } catch {
+    /* storage full — best effort */
+  }
+}
+
+export function queuePendingDelete(uid: string, firebaseId: string): void {
+  const current = getPendingDeletes();
+  // Dedupe
+  if (!current.some((d) => d.uid === uid && d.firebaseId === firebaseId)) {
+    current.push({ uid, firebaseId });
+    savePendingDeletes(current);
+  }
+}
+
+/* ------------------------------------------------------------------ */
+/*  Sync a single spot to Firestore                                    */
+/* ------------------------------------------------------------------ */
+
+/**
+ * Attempt to sync a single pending spot to Firestore.
+ * Returns `true` if successful, `false` if it should be retried later.
+ */
+export async function syncSpotToFirestore(
+  uid: string,
+  spot: FoodSpotLog,
+): Promise<boolean> {
+  if (!spot.firebaseId) return false;
+
+  try {
+    // Write the spot document
+    await writeSpotToFirestore(uid, spot.firebaseId, {
+      name: spot.name,
+      category: spot.category,
+      rating: spot.rating,
+      comment: spot.comment,
+      createdAt: spot.createdAt,
+      thumbnail: spot.thumbnail,
+    });
+
+    // If there's a local image for this spot, sync it too
+    if (spot.id !== undefined) {
+      const image = await db.images.where("spotId").equals(spot.id).first();
+      if (image && !image.firebaseId) {
+        try {
+          const reader = new FileReader();
+          const base64 = await new Promise<string>((resolve, reject) => {
+            reader.onload = () => resolve(reader.result as string);
+            reader.onerror = reject;
+            reader.readAsDataURL(image.blob);
+          });
+          const imgFirebaseId = await addImageToFirestore(uid, {
+            spotFirebaseId: spot.firebaseId,
+            base64,
+            createdAt: image.createdAt,
+          });
+          // Mark image as synced
+          await db.images.update(image.id!, { firebaseId: imgFirebaseId });
+        } catch (imgErr) {
+          console.warn("[OfflineSync] Image sync failed, will retry:", imgErr);
+          // Don't fail the whole spot sync for an image failure
+        }
+      }
+    }
+
+    // Mark spot as synced
+    if (spot.id !== undefined) {
+      await db.spots.update(spot.id, { pendingSync: false });
+    }
+
+    console.log(`[OfflineSync] ✓ Synced spot "${spot.name}" (${spot.firebaseId})`);
+    return true;
+  } catch (err) {
+    console.warn(`[OfflineSync] ✗ Sync failed for "${spot.name}":`, err);
+    return false;
+  }
+}
+
+/* ------------------------------------------------------------------ */
+/*  Sweep: retry ALL pending spots + deletes                           */
+/* ------------------------------------------------------------------ */
+
+let _sweepInProgress = false;
+
+/**
+ * Retry all pending spots and deletes. De-duped so only one sweep
+ * runs at a time.
+ */
+export async function sweepPendingSync(uid: string): Promise<number> {
+  if (_sweepInProgress) return 0;
+  _sweepInProgress = true;
+
+  let synced = 0;
+
+  try {
+    // 1. Sync pending spots
+    const pendingSpots = await db.spots
+      .where("pendingSync")
+      .equals(1) // Dexie stores booleans as 0/1 in indexes
+      .toArray();
+
+    // Also check for `true` value (non-indexed fallback)
+    const allUserSpots = await db.spots.where("userId").equals(uid).toArray();
+    const pending = allUserSpots.filter((s) => s.pendingSync === true);
+
+    // Merge & dedupe
+    const spotsToSync = new Map<number, FoodSpotLog>();
+    for (const s of [...pendingSpots, ...pending]) {
+      if (s.id !== undefined) spotsToSync.set(s.id, s);
+    }
+
+    for (const spot of spotsToSync.values()) {
+      const ok = await syncSpotToFirestore(uid, spot);
+      if (ok) synced++;
+    }
+
+    // 2. Retry pending deletes
+    const deletes = getPendingDeletes();
+    const remaining: PendingDelete[] = [];
+
+    for (const del of deletes) {
+      if (del.uid !== uid) {
+        remaining.push(del);
+        continue;
+      }
+      try {
+        await deleteImagesForSpotFromFirestore(del.uid, del.firebaseId);
+        await deleteSpotFromFirestore(del.uid, del.firebaseId);
+        console.log(`[OfflineSync] ✓ Deleted spot ${del.firebaseId} from Firestore`);
+      } catch {
+        remaining.push(del);
+      }
+    }
+
+    savePendingDeletes(remaining);
+
+    if (synced > 0) {
+      console.log(`[OfflineSync] Sweep complete: ${synced} spot(s) synced.`);
+    }
+  } finally {
+    _sweepInProgress = false;
+  }
+
+  return synced;
+}
+
+/* ------------------------------------------------------------------ */
+/*  Online/offline event wiring                                        */
+/* ------------------------------------------------------------------ */
+
+type OnlineStatusCallback = (online: boolean) => void;
+type SyncCompleteCallback = (syncedCount: number) => void;
+
+let _cleanupFn: (() => void) | null = null;
+
+/**
+ * Start listening for online/offline events.
+ * When the browser comes back online, automatically sweep pending syncs.
+ *
+ * Returns a cleanup function to remove event listeners.
+ */
+export function startOnlineListener(
+  uid: string,
+  onStatusChange?: OnlineStatusCallback,
+  onSyncComplete?: SyncCompleteCallback,
+): () => void {
+  // Clean up previous listener if any
+  if (_cleanupFn) _cleanupFn();
+
+  const handleOnline = async () => {
+    console.log("[OfflineSync] 🌐 Back online — sweeping pending syncs…");
+    onStatusChange?.(true);
+
+    // Small delay to let network stabilize
+    await new Promise((r) => setTimeout(r, 1500));
+
+    const synced = await sweepPendingSync(uid);
+    onSyncComplete?.(synced);
+  };
+
+  const handleOffline = () => {
+    console.log("[OfflineSync] 📡 Gone offline");
+    onStatusChange?.(false);
+  };
+
+  window.addEventListener("online", handleOnline);
+  window.addEventListener("offline", handleOffline);
+
+  // Fire initial status
+  onStatusChange?.(navigator.onLine);
+
+  // If we're online on mount, do a sweep in case there are stale pending items
+  if (navigator.onLine) {
+    sweepPendingSync(uid).then((synced) => {
+      if (synced > 0) onSyncComplete?.(synced);
+    });
+  }
+
+  _cleanupFn = () => {
+    window.removeEventListener("online", handleOnline);
+    window.removeEventListener("offline", handleOffline);
+  };
+
+  return _cleanupFn;
+}

From 78fe08139a921897645f559e94719048e51e7b33 Mon Sep 17 00:00:00 2001
From: tilaplapya <noelmateo126@gmail.com>
Date: Wed, 15 Jul 2026 07:31:29 +0800
Subject: [PATCH 04/22] push

---
 app/page.tsx | 37 ++++++++++++++++++++++++++++++-------
 1 file changed, 30 insertions(+), 7 deletions(-)

diff --git a/app/page.tsx b/app/page.tsx
index f10c250..9300a9e 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -841,7 +841,7 @@ function HomePage() {
           ...spotData,
           firebaseId,
           userId: user.uid,
-          pendingSync: true, // Mark as needing cloud sync
+          pendingSync: true, // Assume pending until Firestore write succeeds
         });
 
         if (compressedBlob) {
@@ -857,12 +857,35 @@ function HomePage() {
 
       console.log(`[KeepCheck] Spot saved locally (id: ${spotId}, firebase: ${firebaseId})`);
 
-      // ---- 2. Attempt Firestore sync in background (non-blocking) ----
-      const savedSpot = await db.spots.get(spotId);
-      if (savedSpot) {
-        syncSpotToFirestore(user.uid, savedSpot).catch((err) => {
-          console.warn("[KeepCheck] Background Firestore sync failed (will retry when online):", err);
-        });
+      // ---- 2. Attempt Firestore write directly (works offline via persistentLocalCache) ----
+      try {
+        await writeSpotToFirestore(user.uid, firebaseId, spotData);
+
+        // Firestore write succeeded (or queued by local cache) — clear pendingSync
+        await db.spots.update(spotId, { pendingSync: false });
+        console.log(`[KeepCheck] Spot synced to Firestore (${firebaseId})`);
+
+        // Upload image to Firestore (non-blocking, best-effort)
+        if (compressedBlob) {
+          try {
+            const reader = new FileReader();
+            const base64 = await new Promise<string>((resolve, reject) => {
+              reader.onload = () => resolve(reader.result as string);
+              reader.onerror = reject;
+              reader.readAsDataURL(compressedBlob!);
+            });
+            await addImageToFirestore(user.uid, {
+              spotFirebaseId: firebaseId,
+              base64,
+              createdAt: Date.now(),
+            });
+          } catch (imgUploadErr) {
+            console.warn("[KeepCheck] Image upload to Firestore failed (will retry on sync):", imgUploadErr);
+          }
+        }
+      } catch (firestoreErr) {
+        // Firestore write failed — pendingSync stays true, will retry when online
+        console.warn("[KeepCheck] Firestore write failed — queued for sync when online:", firestoreErr);
       }
 
       // ---- 3. Reset form & show success ----

From 155283a1e086bb25a0420774f24f9b07804c055f Mon Sep 17 00:00:00 2001
From: tilaplapya <noelmateo126@gmail.com>
Date: Wed, 15 Jul 2026 08:03:32 +0800
Subject: [PATCH 05/22] ayos

---
 app/page.tsx                   | 61 ++++++++++++++++++++++++++++++----
 components/SpotDetailModal.tsx | 27 +++++++++++++--
 lib/firestore.ts               | 17 ++++++++++
 3 files changed, 96 insertions(+), 9 deletions(-)

diff --git a/app/page.tsx b/app/page.tsx
index 9300a9e..db4bbfc 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -14,6 +14,7 @@ import {
   addImageToFirestore,
   deleteImagesForSpotFromFirestore,
   subscribeToSpots,
+  subscribeToImages,
 } from "@/lib/firestore";
 import {
   syncSpotToFirestore,
@@ -453,7 +454,7 @@ function HomePage() {
   const syncSpots = useCallback(async (firestoreSpots: (FoodSpotLog & { firebaseId: string })[]) => {
     if (!user) return;
 
-    // Sync each Firestore spot into local Dexie if missing
+    // Sync each Firestore spot into local Dexie — add if missing, update if changed
     for (const fSpot of firestoreSpots) {
       const existing = await db.spots.where("firebaseId").equals(fSpot.firebaseId).first();
       if (!existing) {
@@ -468,9 +469,21 @@ function HomePage() {
           userId: user.uid,
           pendingSync: false,
         });
-      } else if (existing.pendingSync && existing.id !== undefined) {
-        // Spot confirmed in Firestore — clear pending flag
-        await db.spots.update(existing.id, { pendingSync: false });
+      } else if (existing.id !== undefined) {
+        // Build an update payload with only the fields that actually changed
+        // to avoid unnecessary Dexie writes and re-renders
+        const updates: Partial<FoodSpotLog> = {};
+        if (existing.name !== fSpot.name) updates.name = fSpot.name;
+        if (existing.category !== (fSpot.category ?? "Restaurant")) updates.category = fSpot.category ?? "Restaurant";
+        if (existing.rating !== fSpot.rating) updates.rating = fSpot.rating;
+        if (existing.comment !== fSpot.comment) updates.comment = fSpot.comment;
+        if (existing.createdAt !== fSpot.createdAt) updates.createdAt = fSpot.createdAt;
+        if (existing.thumbnail !== fSpot.thumbnail) updates.thumbnail = fSpot.thumbnail;
+        if (existing.pendingSync) updates.pendingSync = false;
+
+        if (Object.keys(updates).length > 0) {
+          await db.spots.update(existing.id, updates);
+        }
       }
     }
 
@@ -489,11 +502,45 @@ function HomePage() {
     }
   }, [user]);
 
+  /* -- Firestore real-time image sync -- */
+  const syncImages = useCallback(async (firestoreImages: { firebaseId: string; spotFirebaseId: string; base64: string; createdAt: number }[]) => {
+    if (!user) return;
+
+    for (const fImg of firestoreImages) {
+      // Find the local spot this image belongs to
+      const spot = await db.spots.where("firebaseId").equals(fImg.spotFirebaseId).first();
+      if (!spot || spot.id === undefined) continue;
+
+      // Check if we already have this image locally
+      const existingImages = await db.images.where("spotId").equals(spot.id).toArray();
+      const alreadyHas = existingImages.some((img) => img.firebaseId === fImg.firebaseId);
+      if (alreadyHas) continue;
+
+      // Convert base64 data URL to Blob for local storage
+      try {
+        const response = await fetch(fImg.base64);
+        const blob = await response.blob();
+        await db.images.add({
+          spotId: spot.id,
+          blob,
+          createdAt: fImg.createdAt,
+          firebaseId: fImg.firebaseId,
+        });
+      } catch (err) {
+        console.warn("[KeepCheck] Failed to sync image from Firestore:", err);
+      }
+    }
+  }, [user]);
+
   useEffect(() => {
     if (!user) return;
-    const unsubscribe = subscribeToSpots(user.uid, syncSpots);
-    return unsubscribe;
-  }, [user, syncSpots]);
+    const unsubSpots = subscribeToSpots(user.uid, syncSpots);
+    const unsubImages = subscribeToImages(user.uid, syncImages);
+    return () => {
+      unsubSpots();
+      unsubImages();
+    };
+  }, [user, syncSpots, syncImages]);
 
   /* -- Offline sync listener -- */
   useEffect(() => {
diff --git a/components/SpotDetailModal.tsx b/components/SpotDetailModal.tsx
index 47db812..6d729cd 100644
--- a/components/SpotDetailModal.tsx
+++ b/components/SpotDetailModal.tsx
@@ -5,6 +5,8 @@ import { useLiveQuery } from "dexie-react-hooks";
 import { db } from "@/app/db";
 import { makeThumbnailFromBlob } from "@/utils/image";
 import { X, ImageOff, RefreshCw } from "lucide-react";
+import { useAuth } from "@/lib/auth";
+import { writeSpotToFirestore } from "@/lib/firestore";
 
 /* ------------------------------------------------------------------ */
 /*  Props                                                              */
@@ -30,6 +32,7 @@ export default function SpotDetailModal({
     [spotId],
   );
 
+  const { user } = useAuth();
   const [objectUrl, setObjectUrl] = useState<string | null>(null);
   const [regenerating, setRegenerating] = useState(false);
   const [regenerated, setRegenerated] = useState(false);
@@ -71,8 +74,28 @@ export default function SpotDetailModal({
     if (!image?.blob) return;
     setRegenerating(true);
     try {
+      const spot = await db.spots.get(spotId);
+      if (!spot) throw new Error("Spot not found locally");
+
       const newThumb = await makeThumbnailFromBlob(image.blob);
-      await db.spots.update(spotId, { thumbnail: newThumb });
+      await db.spots.update(spotId, { thumbnail: newThumb, pendingSync: true });
+
+      if (user && spot.firebaseId) {
+        try {
+          await writeSpotToFirestore(user.uid, spot.firebaseId, {
+            name: spot.name,
+            category: spot.category,
+            rating: spot.rating,
+            comment: spot.comment,
+            createdAt: spot.createdAt,
+            thumbnail: newThumb,
+          });
+          await db.spots.update(spotId, { pendingSync: false });
+        } catch (fireErr) {
+          console.warn("[KeepCheck] Firestore thumbnail sync failed, will retry on sweep:", fireErr);
+        }
+      }
+
       setRegenerated(true);
     } catch (err) {
       console.error("[KeepCheck] Thumbnail regeneration failed:", err);
@@ -80,7 +103,7 @@ export default function SpotDetailModal({
     } finally {
       setRegenerating(false);
     }
-  }, [image, spotId]);
+  }, [image, spotId, user]);
 
   /* ---- Render ---- */
   return (
diff --git a/lib/firestore.ts b/lib/firestore.ts
index 499cce0..1075550 100644
--- a/lib/firestore.ts
+++ b/lib/firestore.ts
@@ -122,3 +122,20 @@ export async function deleteImagesForSpotFromFirestore(
     .map((d) => deleteDoc(d.ref));
   await Promise.all(deleteOps);
 }
+
+/** Subscribe to real-time image updates. Returns an unsubscribe function. */
+export function subscribeToImages(
+  uid: string,
+  callback: (images: { firebaseId: string; spotFirebaseId: string; base64: string; createdAt: number }[]) => void,
+): Unsubscribe {
+  const q = query(imagesCol(uid), orderBy("createdAt", "desc"));
+  return onSnapshot(q, (snapshot) => {
+    const images = snapshot.docs.map((d) => ({
+      firebaseId: d.id,
+      spotFirebaseId: d.data().spotFirebaseId as string,
+      base64: d.data().base64 as string,
+      createdAt: d.data().createdAt as number,
+    }));
+    callback(images);
+  });
+}

From ddd631fc6993e3977ce1a076e3edc96d827c7598 Mon Sep 17 00:00:00 2001
From: tilaplapya <noelmateo126@gmail.com>
Date: Wed, 15 Jul 2026 09:07:14 +0800
Subject: [PATCH 06/22] mbnmb

---
 app/page.tsx     | 92 +++++++++++++++++++++++++-----------------------
 lib/firestore.ts | 18 +++++++---
 2 files changed, 61 insertions(+), 49 deletions(-)

diff --git a/app/page.tsx b/app/page.tsx
index db4bbfc..31ed9da 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -15,6 +15,7 @@ import {
   deleteImagesForSpotFromFirestore,
   subscribeToSpots,
   subscribeToImages,
+  type FirestoreSpotChange,
 } from "@/lib/firestore";
 import {
   syncSpotToFirestore,
@@ -451,52 +452,47 @@ function HomePage() {
   }, [imageFile]);
 
   /* -- Firestore real-time sync -- */
-  const syncSpots = useCallback(async (firestoreSpots: (FoodSpotLog & { firebaseId: string })[]) => {
+  const syncSpots = useCallback(async (changes: FirestoreSpotChange[]) => {
     if (!user) return;
 
-    // Sync each Firestore spot into local Dexie — add if missing, update if changed
-    for (const fSpot of firestoreSpots) {
-      const existing = await db.spots.where("firebaseId").equals(fSpot.firebaseId).first();
-      if (!existing) {
-        await db.spots.add({
-          name: fSpot.name,
-          category: fSpot.category ?? "Restaurant",
-          rating: fSpot.rating,
-          comment: fSpot.comment,
-          createdAt: fSpot.createdAt,
-          thumbnail: fSpot.thumbnail,
-          firebaseId: fSpot.firebaseId,
-          userId: user.uid,
-          pendingSync: false,
-        });
-      } else if (existing.id !== undefined) {
-        // Build an update payload with only the fields that actually changed
-        // to avoid unnecessary Dexie writes and re-renders
-        const updates: Partial<FoodSpotLog> = {};
-        if (existing.name !== fSpot.name) updates.name = fSpot.name;
-        if (existing.category !== (fSpot.category ?? "Restaurant")) updates.category = fSpot.category ?? "Restaurant";
-        if (existing.rating !== fSpot.rating) updates.rating = fSpot.rating;
-        if (existing.comment !== fSpot.comment) updates.comment = fSpot.comment;
-        if (existing.createdAt !== fSpot.createdAt) updates.createdAt = fSpot.createdAt;
-        if (existing.thumbnail !== fSpot.thumbnail) updates.thumbnail = fSpot.thumbnail;
-        if (existing.pendingSync) updates.pendingSync = false;
-
-        if (Object.keys(updates).length > 0) {
-          await db.spots.update(existing.id, updates);
+    for (const change of changes) {
+      const fSpot = change.spot;
+
+      if (change.type === "added" || change.type === "modified") {
+        const existing = await db.spots.where("firebaseId").equals(fSpot.firebaseId).first();
+        if (!existing) {
+          await db.spots.add({
+            name: fSpot.name,
+            category: fSpot.category ?? "Restaurant",
+            rating: fSpot.rating,
+            comment: fSpot.comment,
+            createdAt: fSpot.createdAt,
+            thumbnail: fSpot.thumbnail,
+            firebaseId: fSpot.firebaseId,
+            userId: user.uid,
+            pendingSync: false,
+          });
+        } else if (existing.id !== undefined) {
+          // Build an update payload with only the fields that actually changed
+          // to avoid unnecessary Dexie writes and re-renders
+          const updates: Partial<FoodSpotLog> = {};
+          if (existing.name !== fSpot.name) updates.name = fSpot.name;
+          if (existing.category !== (fSpot.category ?? "Restaurant")) updates.category = fSpot.category ?? "Restaurant";
+          if (existing.rating !== fSpot.rating) updates.rating = fSpot.rating;
+          if (existing.comment !== fSpot.comment) updates.comment = fSpot.comment;
+          if (existing.createdAt !== fSpot.createdAt) updates.createdAt = fSpot.createdAt;
+          if (existing.thumbnail !== fSpot.thumbnail) updates.thumbnail = fSpot.thumbnail;
+          if (existing.pendingSync) updates.pendingSync = false;
+
+          if (Object.keys(updates).length > 0) {
+            await db.spots.update(existing.id, updates);
+          }
         }
-      }
-    }
-
-    // Remove local spots whose firebaseId no longer exists in Firestore.
-    // IMPORTANT: Skip spots with pendingSync — they haven't been uploaded yet
-    // and will appear in Firestore once the device is back online.
-    const firestoreIds = new Set(firestoreSpots.map((s) => s.firebaseId));
-    const localSpots = await db.spots.where("userId").equals(user.uid).toArray();
-    for (const local of localSpots) {
-      if (local.firebaseId && !firestoreIds.has(local.firebaseId) && !local.pendingSync) {
-        if (local.id !== undefined) {
-          await db.images.where("spotId").equals(local.id).delete();
-          await db.spots.delete(local.id);
+      } else if (change.type === "removed") {
+        const existing = await db.spots.where("firebaseId").equals(fSpot.firebaseId).first();
+        if (existing && existing.id !== undefined) {
+          await db.images.where("spotId").equals(existing.id).delete();
+          await db.spots.delete(existing.id);
         }
       }
     }
@@ -641,7 +637,15 @@ function HomePage() {
 
   // 1. Page entrance animation timeline (Run once on mount when spots resolve)
   useEffect(() => {
-    if (!user || spots === undefined || hasAnimatedRef.current) return;
+    if (!user || spots === undefined) return;
+
+    // Check if the header is already visible. If it is and we've already
+    // animated, skip running it again to prevent glitchy re-runs.
+    // If it's invisible (e.g. on mount or after Fast Refresh), run the animation.
+    const headerEl = document.querySelector(".gsap-header");
+    const isAlreadyVisible = headerEl && window.getComputedStyle(headerEl).opacity === "1";
+    if (isAlreadyVisible && hasAnimatedRef.current) return;
+
     hasAnimatedRef.current = true;
 
     const ctx = gsap.context(() => {
diff --git a/lib/firestore.ts b/lib/firestore.ts
index 1075550..4a9f163 100644
--- a/lib/firestore.ts
+++ b/lib/firestore.ts
@@ -67,18 +67,26 @@ export async function fetchSpotsFromFirestore(
   }));
 }
 
+export interface FirestoreSpotChange {
+  type: "added" | "modified" | "removed";
+  spot: FoodSpotLog & { firebaseId: string };
+}
+
 /** Subscribe to real-time spot updates. Returns an unsubscribe function. */
 export function subscribeToSpots(
   uid: string,
-  callback: (spots: (FoodSpotLog & { firebaseId: string })[]) => void,
+  callback: (changes: FirestoreSpotChange[]) => void,
 ): Unsubscribe {
   const q = query(spotsCol(uid), orderBy("createdAt", "desc"));
   return onSnapshot(q, (snapshot) => {
-    const spots = snapshot.docs.map((d) => ({
-      ...(d.data() as Omit<FoodSpotLog, "id" | "firebaseId">),
-      firebaseId: d.id,
+    const changes = snapshot.docChanges().map((change) => ({
+      type: change.type,
+      spot: {
+        ...(change.doc.data() as Omit<FoodSpotLog, "id" | "firebaseId">),
+        firebaseId: change.doc.id,
+      },
     }));
-    callback(spots);
+    callback(changes);
   });
 }
 

From dae805de0cee42e023c3fa0af8fd496697f32435 Mon Sep 17 00:00:00 2001
From: tilaplapya <noelmateo126@gmail.com>
Date: Wed, 15 Jul 2026 09:23:27 +0800
Subject: [PATCH 07/22] kjhjh

---
 lib/firebase.ts  | 1 +
 lib/firestore.ts | 8 +++++++-
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/lib/firebase.ts b/lib/firebase.ts
index 385d7cf..d09a0f5 100644
--- a/lib/firebase.ts
+++ b/lib/firebase.ts
@@ -71,6 +71,7 @@ export function getFirebaseFirestore(): Firestore {
       localCache: persistentLocalCache({
         tabManager: persistentMultipleTabManager(),
       }),
+      ignoreUndefinedProperties: true,
     });
   } catch {
     // Already initialised (hot-reload).
diff --git a/lib/firestore.ts b/lib/firestore.ts
index 4a9f163..1685bf7 100644
--- a/lib/firestore.ts
+++ b/lib/firestore.ts
@@ -41,8 +41,14 @@ export async function writeSpotToFirestore(
   spot: Omit<FoodSpotLog, "id" | "firebaseId" | "userId">,
 ): Promise<void> {
   const docRef = doc(getFirebaseFirestore(), "users", uid, "spots", firebaseId);
+  
+  // Clean undefined properties to prevent Firestore error
+  const cleanedSpot = Object.fromEntries(
+    Object.entries(spot).filter(([_, v]) => v !== undefined)
+  );
+
   await setDoc(docRef, {
-    ...spot,
+    ...cleanedSpot,
     userId: uid,
   });
 }

From f07f70f08cce6de6f279d6759d76f38fd9872c6f Mon Sep 17 00:00:00 2001
From: tilaplapya <noelmateo126@gmail.com>
Date: Wed, 15 Jul 2026 09:57:25 +0800
Subject: [PATCH 08/22] update

---
 app/globals.css          |  40 ++++++
 app/page.tsx             | 256 ++++++++++++++++++++-------------------
 app/sw.ts                |  19 ++-
 components/AuthGuard.tsx |  28 +++--
 lib/auth.tsx             |  71 ++++++++++-
 lib/offlineSync.ts       |  24 +++-
 6 files changed, 298 insertions(+), 140 deletions(-)

diff --git a/app/globals.css b/app/globals.css
index d2f9d6e..eafd145 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -615,4 +615,44 @@ body {
   white-space: nowrap;
 }
 
+/* ================================================================== */
+/*  UI PERFORMANCE & VIRTUALIZATION OPTIMIZATIONS                       */
+/* ================================================================== */
+
+/* Virtualization performance helper for list feed items */
+.feed-list-item {
+  content-visibility: auto;
+  contain-intrinsic-size: auto 82px;
+}
+
+/* Performance boundary for continuous gooey SVG blobs to avoid main-thread paint invalidations */
+.blob-container {
+  contain: strict;
+  will-change: transform;
+}
+
+.animate-blob-1, .animate-blob-2, .animate-blob-3 {
+  will-change: transform;
+}
+
+/* Disable high-cost effects if user requests reduced motion */
+@media (prefers-reduced-motion: reduce) {
+  .animate-blob-1,
+  .animate-blob-2,
+  .animate-blob-3,
+  .animate-float,
+  .animate-page-enter,
+  .animate-card-enter,
+  .animate-sheet-enter,
+  .animate-modal-enter,
+  .animate-backdrop,
+  .offline-banner,
+  .sync-toast,
+  .pending-sync-badge {
+    animation: none !important;
+    transition: none !important;
+  }
+}
+
+
 
diff --git a/app/page.tsx b/app/page.tsx
index 31ed9da..5f17065 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { useState, useEffect, useMemo, useRef, useCallback, type FormEvent } from "react";
+import { useState, useEffect, useMemo, useRef, useCallback, memo, type FormEvent } from "react";
 import { useLiveQuery } from "dexie-react-hooks";
 import { db, type FoodSpotLog, type SpotCategory } from "./db";
 import { makeThumbnail, compressToBlob } from "@/utils/image";
@@ -31,10 +31,22 @@ import { gsap } from "gsap";
 type SortMode = "newest" | "highest" | "lowest";
 type CategoryFilter = "All" | SpotCategory;
 
+/* ------------------------------------------------------------------ */
+/*  Debounce hook                                                      */
+/* ------------------------------------------------------------------ */
+function useDebouncedValue<T>(value: T, delayMs: number): T {
+  const [debounced, setDebounced] = useState(value);
+  useEffect(() => {
+    const timer = setTimeout(() => setDebounced(value), delayMs);
+    return () => clearTimeout(timer);
+  }, [value, delayMs]);
+  return debounced;
+}
+
 /* ------------------------------------------------------------------ */
 /*  Theme toggle                                                       */
 /* ------------------------------------------------------------------ */
-function ThemeToggle({
+const ThemeToggle = memo(function ThemeToggle({
   dark,
   onToggle,
 }: {
@@ -63,12 +75,12 @@ function ThemeToggle({
       )}
     </button>
   );
-}
+});
 
 /* ------------------------------------------------------------------ */
 /*  Gooey Category Selector Component                                  */
 /* ------------------------------------------------------------------ */
-function CategoryPills({
+const CategoryPills = memo(function CategoryPills({
   value,
   onChange,
 }: {
@@ -110,12 +122,12 @@ function CategoryPills({
       </button>
     </div>
   );
-}
+});
 
 /* ------------------------------------------------------------------ */
 /*  Gooey Rating Selector Component                                    */
 /* ------------------------------------------------------------------ */
-function RatingPills({
+const RatingPills = memo(function RatingPills({
   value,
   onChange,
 }: {
@@ -155,12 +167,12 @@ function RatingPills({
       })}
     </div>
   );
-}
+});
 
 /* ------------------------------------------------------------------ */
 /*  Category badge (card display)                                      */
 /* ------------------------------------------------------------------ */
-function CategoryBadge({ category }: { category: SpotCategory }) {
+const CategoryBadge = memo(function CategoryBadge({ category }: { category: SpotCategory }) {
   const bg = category === "Cafe" ? "bg-category-cafe" : "bg-category-restaurant";
   const label = category === "Cafe" ? "☕ Cafe" : "🍽️ Restaurant";
 
@@ -171,15 +183,14 @@ function CategoryBadge({ category }: { category: SpotCategory }) {
       {label}
     </span>
   );
-}
+});
 
 /* ------------------------------------------------------------------ */
 /*  Spot card (neumorphic)                                             */
 /* ------------------------------------------------------------------ */
-function SpotCard({
+const SpotCard = memo(function SpotCard({
   spot,
   onClick,
-  index,
 }: {
   spot: FoodSpotLog;
   onClick: () => void;
@@ -212,6 +223,7 @@ function SpotCard({
             src={spot.thumbnail}
             alt={`Photo of ${spot.name}`}
             loading="lazy"
+            decoding="async"
             className="h-full w-full object-cover transition-transform duration-500 hover:scale-110"
           />
           {/* Rating badge overlay */}
@@ -249,12 +261,12 @@ function SpotCard({
       </div>
     </div>
   );
-}
+});
 
 /* ------------------------------------------------------------------ */
 /*  Pill button (neumorphic)                                           */
 /* ------------------------------------------------------------------ */
-function PillButton({
+const PillButton = memo(function PillButton({
   label,
   active,
   onClick,
@@ -276,7 +288,7 @@ function PillButton({
       {label}
     </button>
   );
-}
+});
 
 /* ------------------------------------------------------------------ */
 /*  User avatar/profile button                                         */
@@ -359,12 +371,80 @@ function UserProfile({
   );
 }
 
+/* ------------------------------------------------------------------ */
+/*  Activity Feed List Item (memoized)                                  */
+/* ------------------------------------------------------------------ */
+const FeedListItem = memo(function FeedListItem({
+  spot,
+  onSelect,
+  onDelete,
+}: {
+  spot: FoodSpotLog;
+  onSelect: () => void;
+  onDelete: () => void;
+}) {
+  return (
+    <div
+      onClick={onSelect}
+      className="feed-list-item neu-button p-4 flex items-center justify-between gap-3 text-sm cursor-pointer hover:bg-bg/85 relative transition-all"
+    >
+      <div className="min-w-0 flex-1 flex items-center gap-3.5">
+        <span className="text-2xl flex-shrink-0">{spot.category === "Cafe" ? "☕" : "🍽️"}</span>
+        <div className="min-w-0">
+          <p className="font-semibold text-text-primary truncate text-base">{spot.name}</p>
+          <div className="flex items-center gap-2.5 mt-1">
+            <span className="text-[10px] text-text-secondary/60 font-mono flex items-center gap-1">
+              <Clock className="h-3 w-3" />
+              {new Date(spot.createdAt).toLocaleDateString(undefined, { month: "short", day: "numeric" })}
+            </span>
+            <span className="text-text-secondary/20">•</span>
+            {spot.comment ? (
+              <p className="text-xs text-text-secondary truncate max-w-[200px] sm:max-w-xs md:max-w-md">
+                {spot.comment}
+              </p>
+            ) : (
+              <span className="text-xs text-text-secondary/40 italic">No notes</span>
+            )}
+          </div>
+        </div>
+      </div>
+      
+      <div className="flex items-center gap-3.5 flex-shrink-0">
+        {/* Pending sync indicator in list view */}
+        {spot.pendingSync && (
+          <span className="pending-sync-pill" title="Pending sync">
+            <CloudOff className="h-3 w-3" />
+            <span className="hidden sm:inline">Offline</span>
+          </span>
+        )}
+        <span className="font-bold font-mono text-accent text-xs bg-bg/50 shadow-neu-inset px-2.5 py-1 rounded-full">
+          ★ {spot.rating}
+        </span>
+        <button
+          type="button"
+          onClick={(e) => {
+            e.stopPropagation();
+            onDelete();
+          }}
+          className="text-text-secondary/50 hover:text-red-500 transition-colors p-1"
+          aria-label="Delete log"
+        >
+          <Trash2 className="h-4 w-4" />
+        </button>
+      </div>
+    </div>
+  );
+});
 
 /* ------------------------------------------------------------------ */
 /*  Main page                                                          */
 /* ------------------------------------------------------------------ */
 function HomePage() {
-  const { user, signOut } = useAuth();
+  const { user, signOut, cachedSession } = useAuth();
+
+  // Effective UID: use real user's UID when available, fall back to cached session
+  const effectiveUid = user?.uid ?? cachedSession?.uid ?? null;
+
   const [name, setName] = useState("");
   const [category, setCategory] = useState<SpotCategory>("Restaurant");
   const [rating, setRating] = useState(7);
@@ -400,6 +480,13 @@ function HomePage() {
   const backdropOverlayRef = useRef<HTMLDivElement>(null);
   const hasAnimatedRef = useRef(false);
 
+  /* -- Search with debouncing -- */
+  const [searchInput, setSearchInput] = useState("");
+  const search = useDebouncedValue(searchInput, 150);
+
+  const [sortMode, setSortMode] = useState<SortMode>("newest");
+  const [catFilter, setCatFilter] = useState<CategoryFilter>("All");
+
   useEffect(() => {
     // Read stored theme preference
     try {
@@ -451,7 +538,7 @@ function HomePage() {
     return () => URL.revokeObjectURL(url);
   }, [imageFile]);
 
-  /* -- Firestore real-time sync -- */
+  /* -- Firestore real-time sync (only when online and user is available) -- */
   const syncSpots = useCallback(async (changes: FirestoreSpotChange[]) => {
     if (!user) return;
 
@@ -474,7 +561,6 @@ function HomePage() {
           });
         } else if (existing.id !== undefined) {
           // Build an update payload with only the fields that actually changed
-          // to avoid unnecessary Dexie writes and re-renders
           const updates: Partial<FoodSpotLog> = {};
           if (existing.name !== fSpot.name) updates.name = fSpot.name;
           if (existing.category !== (fSpot.category ?? "Restaurant")) updates.category = fSpot.category ?? "Restaurant";
@@ -503,16 +589,13 @@ function HomePage() {
     if (!user) return;
 
     for (const fImg of firestoreImages) {
-      // Find the local spot this image belongs to
       const spot = await db.spots.where("firebaseId").equals(fImg.spotFirebaseId).first();
       if (!spot || spot.id === undefined) continue;
 
-      // Check if we already have this image locally
       const existingImages = await db.images.where("spotId").equals(spot.id).toArray();
       const alreadyHas = existingImages.some((img) => img.firebaseId === fImg.firebaseId);
       if (alreadyHas) continue;
 
-      // Convert base64 data URL to Blob for local storage
       try {
         const response = await fetch(fImg.base64);
         const blob = await response.blob();
@@ -528,6 +611,7 @@ function HomePage() {
     }
   }, [user]);
 
+  // Only subscribe to Firestore when we have a real authenticated user
   useEffect(() => {
     if (!user) return;
     const unsubSpots = subscribeToSpots(user.uid, syncSpots);
@@ -556,16 +640,11 @@ function HomePage() {
     return cleanup;
   }, [user]);
 
-  const [search, setSearch] = useState("");
-  const prevSearchRef = useRef("");
-  const [sortMode, setSortMode] = useState<SortMode>("newest");
-  const [catFilter, setCatFilter] = useState<CategoryFilter>("All");
-
-  // Reactive query — re-renders whenever `spots` table changes
+  // Reactive query — uses effectiveUid so data loads from Dexie even before Firebase auth resolves
   const spots = useLiveQuery(() => {
-    if (!user) return [];
-    return db.spots.where("userId").equals(user.uid).reverse().sortBy("createdAt");
-  }, [user]);
+    if (!effectiveUid) return [];
+    return db.spots.where("userId").equals(effectiveUid).reverse().sortBy("createdAt");
+  }, [effectiveUid]);
 
   /** Derived: filtered + sorted view of spots. */
   const filteredSpots = useMemo(() => {
@@ -637,11 +716,8 @@ function HomePage() {
 
   // 1. Page entrance animation timeline (Run once on mount when spots resolve)
   useEffect(() => {
-    if (!user || spots === undefined) return;
+    if (!effectiveUid || spots === undefined) return;
 
-    // Check if the header is already visible. If it is and we've already
-    // animated, skip running it again to prevent glitchy re-runs.
-    // If it's invisible (e.g. on mount or after Fast Refresh), run the animation.
     const headerEl = document.querySelector(".gsap-header");
     const isAlreadyVisible = headerEl && window.getComputedStyle(headerEl).opacity === "1";
     if (isAlreadyVisible && hasAnimatedRef.current) return;
@@ -695,34 +771,9 @@ function HomePage() {
     });
 
     return () => ctx.revert();
-  }, [user, spots]);
-
-  // 2. Stagger feed items whenever spots or filters update (skips animation during active search typing to prevent lag)
-  useEffect(() => {
-    const isSearching = search !== prevSearchRef.current;
-    prevSearchRef.current = search;
+  }, [effectiveUid, spots]);
 
-    if (isSearching) return; // skip staggers on search changes to keep typing smooth
-
-    const elements = document.querySelectorAll(".gsap-list-item");
-    if (elements.length > 0) {
-      gsap.fromTo(
-        elements,
-        { opacity: 0, y: 15, scale: 0.98 },
-        {
-          opacity: 1,
-          y: 0,
-          scale: 1,
-          duration: 0.4,
-          stagger: 0.03,
-          ease: "power2.out",
-          overwrite: "auto"
-        }
-      );
-    }
-  }, [filteredSpots, search]);
-
-  // 3. Modal Form slide in/out animations
+  // 2. Modal Form slide in/out animations
   const openFormModal = () => {
     setIsFormOpen(true);
   };
@@ -815,7 +866,7 @@ function HomePage() {
     }
   }, [isFormOpen]);
 
-  // 4. Elastic animations for FAB hover/clicks
+  // 3. Elastic animations for FAB hover/clicks
   const handleFABHover = (enter: boolean) => {
     gsap.to(".gsap-fab", {
       scale: enter ? 1.15 : 1,
@@ -1012,6 +1063,11 @@ function HomePage() {
     }
   }
 
+  // Memoized profile props for UserProfile to avoid re-creating on every render
+  const profilePhotoURL = user?.photoURL ?? cachedSession?.photoURL ?? null;
+  const profileDisplayName = user?.displayName ?? cachedSession?.displayName ?? null;
+  const profileEmail = user?.email ?? cachedSession?.email ?? null;
+
   /* ---------- render ---------- */
 
   return (
@@ -1037,8 +1093,8 @@ function HomePage() {
         </defs>
       </svg>
 
-      {/* ---- Background blobs ---- */}
-      <div className="pointer-events-none fixed inset-0 overflow-hidden opacity-40" style={{ filter: "url(#gooey-bg)" }}>
+      {/* ---- Background blobs (GPU-contained) ---- */}
+      <div className="pointer-events-none fixed inset-0 overflow-hidden opacity-40 blob-container" style={{ filter: "url(#gooey-bg)" }}>
         <div className="animate-blob-1 absolute -top-32 -left-32 h-80 w-80 rounded-full bg-accent/10" />
         <div className="animate-blob-2 absolute -bottom-40 -right-24 h-96 w-96 rounded-full bg-category-cafe/10" />
         <div className="animate-blob-3 absolute top-1/2 left-1/3 h-56 w-56 rounded-full bg-category-restaurant/10" />
@@ -1076,7 +1132,7 @@ function HomePage() {
             <ThemeToggle dark={dark} onToggle={() => setDark((d) => !d)} />
             
             {/* Desktop Add Spot button */}
-            {user && (
+            {effectiveUid && (
               <button
                 type="button"
                 onClick={openFormModal}
@@ -1087,11 +1143,11 @@ function HomePage() {
               </button>
             )}
 
-            {user && (
+            {effectiveUid && (
               <UserProfile
-                photoURL={user.photoURL}
-                displayName={user.displayName}
-                email={user.email}
+                photoURL={profilePhotoURL}
+                displayName={profileDisplayName}
+                email={profileEmail}
                 onSignOut={signOut}
               />
             )}
@@ -1243,15 +1299,15 @@ function HomePage() {
                 <input
                   id="search-logs"
                   type="text"
-                  value={search}
-                  onChange={(e) => setSearch(e.target.value)}
+                  value={searchInput}
+                  onChange={(e) => setSearchInput(e.target.value)}
                   placeholder="Search spots by name or notes…"
                   className="neu-input w-full pl-11 pr-4"
                 />
-                {search && (
+                {searchInput && (
                   <button
                     type="button"
-                    onClick={() => setSearch("")}
+                    onClick={() => setSearchInput("")}
                     className="absolute right-3.5 top-1/2 -translate-y-1/2 text-xs text-text-secondary/60 hover:text-accent font-bold p-1 cursor-pointer"
                   >
                     ✕
@@ -1282,56 +1338,12 @@ function HomePage() {
               /* List/Table View Mode */
               <div className="neu-raised p-4 space-y-3 pt-2">
                 {filteredSpots && filteredSpots.map((spot) => (
-                  <div
+                  <FeedListItem
                     key={spot.id}
-                    onClick={() => spot.id !== undefined && setSelectedSpotId(spot.id)}
-                    className="gsap-list-item neu-button p-4 flex items-center justify-between gap-3 text-sm cursor-pointer hover:bg-bg/85 relative transition-all"
-                  >
-                    <div className="min-w-0 flex-1 flex items-center gap-3.5">
-                      <span className="text-2xl flex-shrink-0">{spot.category === "Cafe" ? "☕" : "🍽️"}</span>
-                      <div className="min-w-0">
-                        <p className="font-semibold text-text-primary truncate text-base">{spot.name}</p>
-                        <div className="flex items-center gap-2.5 mt-1">
-                          <span className="text-[10px] text-text-secondary/60 font-mono flex items-center gap-1">
-                            <Clock className="h-3 w-3" />
-                            {new Date(spot.createdAt).toLocaleDateString(undefined, { month: "short", day: "numeric" })}
-                          </span>
-                          <span className="text-text-secondary/20">•</span>
-                          {spot.comment ? (
-                            <p className="text-xs text-text-secondary truncate max-w-[200px] sm:max-w-xs md:max-w-md">
-                              {spot.comment}
-                            </p>
-                          ) : (
-                            <span className="text-xs text-text-secondary/40 italic">No notes</span>
-                          )}
-                        </div>
-                      </div>
-                    </div>
-                    
-                    <div className="flex items-center gap-3.5 flex-shrink-0">
-                      {/* Pending sync indicator in list view */}
-                      {spot.pendingSync && (
-                        <span className="pending-sync-pill" title="Pending sync">
-                          <CloudOff className="h-3 w-3" />
-                          <span className="hidden sm:inline">Offline</span>
-                        </span>
-                      )}
-                      <span className="font-bold font-mono text-accent text-xs bg-bg/50 shadow-neu-inset px-2.5 py-1 rounded-full">
-                        ★ {spot.rating}
-                      </span>
-                      <button
-                        type="button"
-                        onClick={(e) => {
-                          e.stopPropagation();
-                          spot.id !== undefined && deleteEntry(spot.id);
-                        }}
-                        className="text-text-secondary/50 hover:text-red-500 transition-colors p-1"
-                        aria-label="Delete log"
-                      >
-                        <Trash2 className="h-4 w-4" />
-                      </button>
-                    </div>
-                  </div>
+                    spot={spot}
+                    onSelect={() => spot.id !== undefined && setSelectedSpotId(spot.id)}
+                    onDelete={() => spot.id !== undefined && deleteEntry(spot.id)}
+                  />
                 ))}
               </div>
             )}
@@ -1561,7 +1573,7 @@ function HomePage() {
       )}
 
       {/* ---- Floating Action Button (FAB) ---- */}
-      {user && (
+      {effectiveUid && (
         <button
           type="button"
           onClick={openFormModal}
diff --git a/app/sw.ts b/app/sw.ts
index ec2eee5..e99bb51 100644
--- a/app/sw.ts
+++ b/app/sw.ts
@@ -1,5 +1,5 @@
 import { defaultCache } from "@serwist/next/worker";
-import { type PrecacheEntry, Serwist, cacheNames } from "serwist";
+import { type PrecacheEntry, Serwist, cacheNames, StaleWhileRevalidate, ExpirationPlugin } from "serwist";
 
 declare const self: ServiceWorkerGlobalScope & {
   __SW_MANIFEST: (PrecacheEntry | string)[] | undefined;
@@ -13,7 +13,22 @@ const serwist = new Serwist({
   // so users never need a manual refresh to get the new SW.
   clientsClaim: true,
   navigationPreload: true,
-  runtimeCaching: defaultCache,
+  runtimeCaching: [
+    {
+      matcher: /^https:\/\/lh[0-9]*\.googleusercontent\.com\/.*/i,
+      handler: new StaleWhileRevalidate({
+        cacheName: "google-user-avatars",
+        plugins: [
+          new ExpirationPlugin({
+            maxEntries: 50,
+            maxAgeSeconds: 30 * 24 * 60 * 60, // 30 days
+            maxAgeFrom: "last-used",
+          }),
+        ],
+      }),
+    },
+    ...defaultCache,
+  ],
   // Serve the precached /offline page when a NetworkFirst handler fails
   // for a navigation request (e.g. deep link the user has never visited).
   fallbacks: {
diff --git a/components/AuthGuard.tsx b/components/AuthGuard.tsx
index a482e00..4b98de1 100644
--- a/components/AuthGuard.tsx
+++ b/components/AuthGuard.tsx
@@ -1,7 +1,6 @@
 "use client";
 
 import { useEffect } from "react";
-import { useRouter } from "next/navigation";
 import { useAuth } from "@/lib/auth";
 
 /**
@@ -9,21 +8,27 @@ import { useAuth } from "@/lib/auth";
  *
  * Renders children only when the user is authenticated.
  * Redirects to /login otherwise.
- * Shows a neumorphic loading skeleton during the auth check.
+ *
+ * Offline behaviour:
+ * - While Firebase Auth is still loading, checks `cachedSession` from
+ *   localStorage. If a cached session exists, renders children immediately
+ *   using the cached UID (Dexie queries work offline with this UID).
+ * - Only redirects to /login when Firebase confirms no user AND there
+ *   is no cached session — prevents offline redirect loops.
  */
 export default function AuthGuard({ children }: { children: React.ReactNode }) {
-  const { user, loading } = useAuth();
-  const router = useRouter();
+  const { user, loading, cachedSession } = useAuth();
 
   useEffect(() => {
-    console.log("[KeepCheck AuthGuard] State check - Loading:", loading, "User:", user ? user.email : "null");
-    if (!loading && !user) {
-      console.log("[KeepCheck AuthGuard] Redirecting to /login via window.location");
+    // Only redirect when auth has fully resolved AND there's no cached session
+    if (!loading && !user && !cachedSession) {
+      console.log("[KeepCheck AuthGuard] No user or cached session — redirecting to /login");
       window.location.href = "/login";
     }
-  }, [user, loading]);
+  }, [user, loading, cachedSession]);
 
-  if (loading) {
+  // Show loading spinner only when there's no cached session to fall back on
+  if (loading && !cachedSession) {
     return (
       <div className="flex min-h-dvh items-center justify-center bg-bg">
         <div className="neu-raised flex flex-col items-center gap-4 rounded-3xl p-10">
@@ -36,10 +41,11 @@ export default function AuthGuard({ children }: { children: React.ReactNode }) {
     );
   }
 
-  if (!user) {
-    // Will redirect — render nothing to avoid flash.
+  // No user AND no cached session → will redirect, render nothing to avoid flash
+  if (!user && !cachedSession) {
     return null;
   }
 
+  // Either the real user is present, or we have a cached session to work with offline
   return <>{children}</>;
 }
diff --git a/lib/auth.tsx b/lib/auth.tsx
index 09ea74f..8aa3568 100644
--- a/lib/auth.tsx
+++ b/lib/auth.tsx
@@ -30,17 +30,66 @@ export interface QuickLoginAccount {
   lastLoginAt: number;
 }
 
+/** Lightweight cached session stored in localStorage for instant offline access. */
+export interface CachedSession {
+  uid: string;
+  displayName: string | null;
+  email: string | null;
+  photoURL: string | null;
+}
+
 interface AuthContextValue {
   user: User | null;
   loading: boolean;
   signInWithGoogle: () => Promise<void>;
   signOut: () => Promise<void>;
   quickLoginAccounts: QuickLoginAccount[];
+  /** Cached session from localStorage — available instantly, even offline. */
+  cachedSession: CachedSession | null;
 }
 
 const QUICK_LOGIN_KEY = "keepcheck-quick-login";
+const SESSION_CACHE_KEY = "keepcheck-session";
 const MAX_QUICK_LOGIN = 5;
 
+/* ------------------------------------------------------------------ */
+/*  Session cache helpers                                              */
+/* ------------------------------------------------------------------ */
+
+function loadCachedSession(): CachedSession | null {
+  try {
+    const raw = localStorage.getItem(SESSION_CACHE_KEY);
+    if (!raw) return null;
+    const parsed = JSON.parse(raw);
+    if (parsed && typeof parsed.uid === "string") return parsed as CachedSession;
+    return null;
+  } catch {
+    return null;
+  }
+}
+
+function saveCachedSession(user: User): void {
+  try {
+    const session: CachedSession = {
+      uid: user.uid,
+      displayName: user.displayName,
+      email: user.email,
+      photoURL: user.photoURL,
+    };
+    localStorage.setItem(SESSION_CACHE_KEY, JSON.stringify(session));
+  } catch {
+    /* storage full — best effort */
+  }
+}
+
+function clearCachedSession(): void {
+  try {
+    localStorage.removeItem(SESSION_CACHE_KEY);
+  } catch {
+    /* ignore */
+  }
+}
+
 /* ------------------------------------------------------------------ */
 /*  Context                                                            */
 /* ------------------------------------------------------------------ */
@@ -57,8 +106,9 @@ export function AuthProvider({ children }: { children: ReactNode }) {
   const [quickLoginAccounts, setQuickLoginAccounts] = useState<
     QuickLoginAccount[]
   >([]);
+  const [cachedSession, setCachedSession] = useState<CachedSession | null>(null);
 
-  // Load quick-login history from localStorage on mount.
+  // Load cached session + quick-login history from localStorage on mount.
   useEffect(() => {
     try {
       const stored = localStorage.getItem(QUICK_LOGIN_KEY);
@@ -66,6 +116,12 @@ export function AuthProvider({ children }: { children: ReactNode }) {
     } catch {
       // Ignore parse errors.
     }
+
+    // Load cached session for instant offline rendering
+    const cached = loadCachedSession();
+    if (cached) {
+      setCachedSession(cached);
+    }
   }, []);
 
   // Persist a user to quick-login history.
@@ -99,6 +155,14 @@ export function AuthProvider({ children }: { children: ReactNode }) {
 
       if (firebaseUser) {
         saveToQuickLogin(firebaseUser);
+        // Persist session for offline access
+        saveCachedSession(firebaseUser);
+        setCachedSession({
+          uid: firebaseUser.uid,
+          displayName: firebaseUser.displayName,
+          email: firebaseUser.email,
+          photoURL: firebaseUser.photoURL,
+        });
       }
     });
     return unsubscribe;
@@ -124,6 +188,9 @@ export function AuthProvider({ children }: { children: ReactNode }) {
   // Sign out.
   const signOut = useCallback(async () => {
     console.log("[KeepCheck AuthContext] signOut called");
+    // Clear cached session immediately
+    clearCachedSession();
+    setCachedSession(null);
     // Trigger Firebase sign-out in the background.
     firebaseSignOut(getFirebaseAuth())
       .then(() => {
@@ -139,7 +206,7 @@ export function AuthProvider({ children }: { children: ReactNode }) {
 
   return (
     <AuthContext.Provider
-      value={{ user, loading, signInWithGoogle, signOut, quickLoginAccounts }}
+      value={{ user, loading, signInWithGoogle, signOut, quickLoginAccounts, cachedSession }}
     >
       {children}
     </AuthContext.Provider>
diff --git a/lib/offlineSync.ts b/lib/offlineSync.ts
index 033af5d..f0725f5 100644
--- a/lib/offlineSync.ts
+++ b/lib/offlineSync.ts
@@ -69,6 +69,9 @@ export function queuePendingDelete(uid: string, firebaseId: string): void {
 /**
  * Attempt to sync a single pending spot to Firestore.
  * Returns `true` if successful, `false` if it should be retried later.
+ *
+ * Pre-checks `navigator.onLine` to avoid unnecessary Firestore errors
+ * when clearly offline.
  */
 export async function syncSpotToFirestore(
   uid: string,
@@ -76,6 +79,11 @@ export async function syncSpotToFirestore(
 ): Promise<boolean> {
   if (!spot.firebaseId) return false;
 
+  // Skip if we're clearly offline — saves error noise and CPU
+  if (typeof navigator !== "undefined" && !navigator.onLine) {
+    return false;
+  }
+
   try {
     // Write the spot document
     await writeSpotToFirestore(uid, spot.firebaseId, {
@@ -133,10 +141,15 @@ let _sweepInProgress = false;
 
 /**
  * Retry all pending spots and deletes. De-duped so only one sweep
- * runs at a time.
+ * runs at a time. Each item is wrapped in its own try/catch so one
+ * failure doesn't block the rest.
  */
 export async function sweepPendingSync(uid: string): Promise<number> {
   if (_sweepInProgress) return 0;
+
+  // Don't even attempt if clearly offline
+  if (typeof navigator !== "undefined" && !navigator.onLine) return 0;
+
   _sweepInProgress = true;
 
   let synced = 0;
@@ -159,8 +172,13 @@ export async function sweepPendingSync(uid: string): Promise<number> {
     }
 
     for (const spot of spotsToSync.values()) {
-      const ok = await syncSpotToFirestore(uid, spot);
-      if (ok) synced++;
+      try {
+        const ok = await syncSpotToFirestore(uid, spot);
+        if (ok) synced++;
+      } catch (spotErr) {
+        // Per-item catch: don't let one failure block the rest
+        console.warn(`[OfflineSync] Per-item sync error for "${spot.name}":`, spotErr);
+      }
     }
 
     // 2. Retry pending deletes

From dff7fcd33b173b8ca977523552d67a7499690ee7 Mon Sep 17 00:00:00 2001
From: "Mateo, Noel John" <125169838+NoLmuna@users.noreply.github.com>
Date: Thu, 16 Jul 2026 01:25:46 +0800
Subject: [PATCH 09/22] Changes

- implement firebase and change the workflow of how offline mode is handled
---
 .vscode/settings.json          |   3 +-
 app/db.ts                      |   2 +
 app/login/page.tsx             |  10 +-
 app/page.tsx                   | 141 +++++-----
 components/SpotDetailModal.tsx |   1 +
 lib/auth.tsx                   |  74 ++++-
 lib/firebase.ts                |  14 +
 lib/firestore.ts               |  65 +----
 lib/offlineSync.ts             |  46 ++--
 lib/storage.ts                 |  79 ++++++
 package-lock.json              | 484 ++++++++++++++++++---------------
 package.json                   |   2 +-
 storage.rules                  |   9 +
 13 files changed, 539 insertions(+), 391 deletions(-)
 create mode 100644 lib/storage.ts
 create mode 100644 storage.rules

diff --git a/.vscode/settings.json b/.vscode/settings.json
index 8ef924f..0eee02d 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -1,4 +1,5 @@
 {
   "css.customData": [],
-  "css.lint.unknownAtRules": "ignore"
+  "css.lint.unknownAtRules": "ignore",
+  "typescript.tsdk": "node_modules/typescript/lib"
 }
diff --git a/app/db.ts b/app/db.ts
index 4f13585..82374f8 100644
--- a/app/db.ts
+++ b/app/db.ts
@@ -19,6 +19,8 @@ export interface FoodSpotLog {
   userId?: string;
   /** True when the entry has been saved locally but not yet synced to Firestore. */
   pendingSync?: boolean;
+  /** Firebase Storage download URL for the full-resolution image. */
+  downloadURL?: string;
 }
 
 /** Full-resolution image associated with a spot (one image per spot). */
diff --git a/app/login/page.tsx b/app/login/page.tsx
index ea5898b..a5eac72 100644
--- a/app/login/page.tsx
+++ b/app/login/page.tsx
@@ -83,11 +83,11 @@ export default function LoginPage() {
     }
   }, [user, loading, router]);
 
-  async function handleSignIn() {
+  async function handleSignIn(email?: string) {
     setSigningIn(true);
     setError(null);
     try {
-      await signInWithGoogle();
+      await signInWithGoogle(email);
     } catch {
       setError("Sign-in failed. Please try again.");
     } finally {
@@ -151,7 +151,7 @@ export default function LoginPage() {
         {/* Google sign-in button */}
         <button
           type="button"
-          onClick={handleSignIn}
+          onClick={() => handleSignIn()}
           disabled={signingIn}
           className="neu-raised group flex w-full items-center justify-center gap-3 rounded-2xl px-6 py-4 text-sm font-semibold text-text-primary transition-all duration-300 hover:scale-[1.02] active:scale-[0.97] active:shadow-neu-inset disabled:opacity-50 cursor-pointer"
         >
@@ -177,11 +177,11 @@ export default function LoginPage() {
               Recent accounts
             </p>
             <div className="flex flex-col gap-2.5">
-              {quickLoginAccounts.map((account) => (
+               {quickLoginAccounts.map((account) => (
                 <QuickLoginRow
                   key={account.uid}
                   account={account}
-                  onClick={handleSignIn}
+                  onClick={() => handleSignIn(account.email || undefined)}
                 />
               ))}
             </div>
diff --git a/app/page.tsx b/app/page.tsx
index 5f17065..9b4bf06 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -11,16 +11,15 @@ import {
   generateSpotId,
   writeSpotToFirestore,
   deleteSpotFromFirestore,
-  addImageToFirestore,
-  deleteImagesForSpotFromFirestore,
   subscribeToSpots,
-  subscribeToImages,
   type FirestoreSpotChange,
 } from "@/lib/firestore";
+import { uploadSpotImage, deleteSpotImage } from "@/lib/storage";
 import {
   syncSpotToFirestore,
   queuePendingDelete,
   startOnlineListener,
+  getPendingDeletes,
 } from "@/lib/offlineSync";
 import { Trash2, Camera, LogOut, ChevronLeft, ChevronRight, Clock, Plus, X, WifiOff, Cloud, CloudOff } from "lucide-react";
 import { gsap } from "gsap";
@@ -328,7 +327,7 @@ function UserProfile({
     <div ref={containerRef} className="relative z-50">
       <button
         type="button"
-        onClick={() => setOpen((o) => !o)}
+        onClick={() => setOpen((o: boolean) => !o)}
         className="neu-button flex h-11 w-11 items-center justify-center rounded-full overflow-hidden cursor-pointer"
       >
         {photoURL ? (
@@ -542,24 +541,42 @@ function HomePage() {
   const syncSpots = useCallback(async (changes: FirestoreSpotChange[]) => {
     if (!user) return;
 
+    const pendingDeletes = getPendingDeletes();
+
     for (const change of changes) {
       const fSpot = change.spot;
 
+      // 3. DELETE-RESURRECTION RACE CONDITION PATCH
+      // If a user deletes a spot while offline, and the app comes online, the Firestore
+      // snapshot listener might re-download the document before the pending delete
+      // queue processes it. Ignore incoming added/modified snapshots for flagged IDs.
+      const isPendingDelete = pendingDeletes.some(
+        (d) => d.uid === user.uid && d.firebaseId === fSpot.firebaseId
+      );
+      if (isPendingDelete) {
+        console.log(`[KeepCheck] Ignoring incoming snapshot for "${fSpot.name}" (${fSpot.firebaseId}) — pending local delete`);
+        continue;
+      }
+
       if (change.type === "added" || change.type === "modified") {
         const existing = await db.spots.where("firebaseId").equals(fSpot.firebaseId).first();
+        let localSpotId: number | undefined;
+
         if (!existing) {
-          await db.spots.add({
+          localSpotId = await db.spots.add({
             name: fSpot.name,
             category: fSpot.category ?? "Restaurant",
             rating: fSpot.rating,
             comment: fSpot.comment,
             createdAt: fSpot.createdAt,
             thumbnail: fSpot.thumbnail,
+            downloadURL: fSpot.downloadURL,
             firebaseId: fSpot.firebaseId,
             userId: user.uid,
             pendingSync: false,
           });
         } else if (existing.id !== undefined) {
+          localSpotId = existing.id;
           // Build an update payload with only the fields that actually changed
           const updates: Partial<FoodSpotLog> = {};
           if (existing.name !== fSpot.name) updates.name = fSpot.name;
@@ -568,12 +585,33 @@ function HomePage() {
           if (existing.comment !== fSpot.comment) updates.comment = fSpot.comment;
           if (existing.createdAt !== fSpot.createdAt) updates.createdAt = fSpot.createdAt;
           if (existing.thumbnail !== fSpot.thumbnail) updates.thumbnail = fSpot.thumbnail;
+          if (existing.downloadURL !== fSpot.downloadURL) updates.downloadURL = fSpot.downloadURL;
           if (existing.pendingSync) updates.pendingSync = false;
 
           if (Object.keys(updates).length > 0) {
             await db.spots.update(existing.id, updates);
           }
         }
+
+        // Fetch image from downloadURL if we have one and don't already have it locally
+        if (localSpotId !== undefined && fSpot.downloadURL) {
+          const existingImages = await db.images.where("spotId").equals(localSpotId).toArray();
+          if (existingImages.length === 0) {
+            try {
+              const response = await fetch(fSpot.downloadURL);
+              const blob = await response.blob();
+              await db.images.add({
+                spotId: localSpotId,
+                blob,
+                createdAt: fSpot.createdAt,
+                firebaseId: "uploaded",
+              });
+              console.log(`[KeepCheck] Successfully downloaded and cached image for spot: ${fSpot.name}`);
+            } catch (err) {
+              console.warn("[KeepCheck] Failed to fetch/cache image from downloadURL:", err);
+            }
+          }
+        }
       } else if (change.type === "removed") {
         const existing = await db.spots.where("firebaseId").equals(fSpot.firebaseId).first();
         if (existing && existing.id !== undefined) {
@@ -584,43 +622,14 @@ function HomePage() {
     }
   }, [user]);
 
-  /* -- Firestore real-time image sync -- */
-  const syncImages = useCallback(async (firestoreImages: { firebaseId: string; spotFirebaseId: string; base64: string; createdAt: number }[]) => {
-    if (!user) return;
-
-    for (const fImg of firestoreImages) {
-      const spot = await db.spots.where("firebaseId").equals(fImg.spotFirebaseId).first();
-      if (!spot || spot.id === undefined) continue;
-
-      const existingImages = await db.images.where("spotId").equals(spot.id).toArray();
-      const alreadyHas = existingImages.some((img) => img.firebaseId === fImg.firebaseId);
-      if (alreadyHas) continue;
-
-      try {
-        const response = await fetch(fImg.base64);
-        const blob = await response.blob();
-        await db.images.add({
-          spotId: spot.id,
-          blob,
-          createdAt: fImg.createdAt,
-          firebaseId: fImg.firebaseId,
-        });
-      } catch (err) {
-        console.warn("[KeepCheck] Failed to sync image from Firestore:", err);
-      }
-    }
-  }, [user]);
-
-  // Only subscribe to Firestore when we have a real authenticated user
+  // Only subscribe to Firestore spots when we have a real authenticated user
   useEffect(() => {
     if (!user) return;
     const unsubSpots = subscribeToSpots(user.uid, syncSpots);
-    const unsubImages = subscribeToImages(user.uid, syncImages);
     return () => {
       unsubSpots();
-      unsubImages();
     };
-  }, [user, syncSpots, syncImages]);
+  }, [user, syncSpots]);
 
   /* -- Offline sync listener -- */
   useEffect(() => {
@@ -961,30 +970,32 @@ function HomePage() {
 
       // ---- 2. Attempt Firestore write directly (works offline via persistentLocalCache) ----
       try {
-        await writeSpotToFirestore(user.uid, firebaseId, spotData);
-
-        // Firestore write succeeded (or queued by local cache) — clear pendingSync
-        await db.spots.update(spotId, { pendingSync: false });
-        console.log(`[KeepCheck] Spot synced to Firestore (${firebaseId})`);
+        let downloadURL: string | undefined;
 
-        // Upload image to Firestore (non-blocking, best-effort)
+        // Upload image to Firebase Storage first (best-effort, but before writing spot document)
         if (compressedBlob) {
           try {
-            const reader = new FileReader();
-            const base64 = await new Promise<string>((resolve, reject) => {
-              reader.onload = () => resolve(reader.result as string);
-              reader.onerror = reject;
-              reader.readAsDataURL(compressedBlob!);
-            });
-            await addImageToFirestore(user.uid, {
-              spotFirebaseId: firebaseId,
-              base64,
-              createdAt: Date.now(),
-            });
+            downloadURL = await uploadSpotImage(user.uid, firebaseId, compressedBlob);
+            // Mark image as synced locally since it's uploaded
+            const localImg = await db.images.where("spotId").equals(spotId).first();
+            if (localImg && localImg.id !== undefined) {
+              await db.images.update(localImg.id, { firebaseId: "uploaded" });
+            }
+            // Update local spot with downloadURL
+            await db.spots.update(spotId, { downloadURL });
           } catch (imgUploadErr) {
-            console.warn("[KeepCheck] Image upload to Firestore failed (will retry on sync):", imgUploadErr);
+            console.warn("[KeepCheck] Image upload to Storage failed (will retry on sync):", imgUploadErr);
           }
         }
+
+        await writeSpotToFirestore(user.uid, firebaseId, {
+          ...spotData,
+          downloadURL,
+        });
+
+        // Firestore write succeeded (or queued by local cache) — clear pendingSync
+        await db.spots.update(spotId, { pendingSync: false });
+        console.log(`[KeepCheck] Spot synced to Firestore (${firebaseId})`);
       } catch (firestoreErr) {
         // Firestore write failed — pendingSync stays true, will retry when online
         console.warn("[KeepCheck] Firestore write failed — queued for sync when online:", firestoreErr);
@@ -1025,7 +1036,7 @@ function HomePage() {
 
   async function deleteEntry(id: number) {
     try {
-      setDeletingIds((prev) => new Set(prev).add(id));
+      setDeletingIds((prev: Set<number>) => new Set<number>(prev).add(id));
       const spot = await db.spots.get(id);
 
       await new Promise((resolve) => setTimeout(resolve, 400));
@@ -1039,7 +1050,7 @@ function HomePage() {
       // Attempt Firestore delete (non-blocking)
       if (spot?.firebaseId && user) {
         try {
-          await deleteImagesForSpotFromFirestore(user.uid, spot.firebaseId);
+          await deleteSpotImage(user.uid, spot.firebaseId);
           await deleteSpotFromFirestore(user.uid, spot.firebaseId);
         } catch (fireErr) {
           console.warn("[KeepCheck] Firestore delete failed — queued for retry when online:", fireErr);
@@ -1048,15 +1059,15 @@ function HomePage() {
         }
       }
 
-      setDeletingIds((prev) => {
-        const next = new Set(prev);
+      setDeletingIds((prev: Set<number>) => {
+        const next = new Set<number>(prev);
         next.delete(id);
         return next;
       });
     } catch (error) {
       console.error("Failed to delete entry:", error);
-      setDeletingIds((prev) => {
-        const next = new Set(prev);
+      setDeletingIds((prev: Set<number>) => {
+        const next = new Set<number>(prev);
         next.delete(id);
         return next;
       });
@@ -1129,14 +1140,14 @@ function HomePage() {
           </div>
 
           <div className="flex items-center gap-2.5">
-            <ThemeToggle dark={dark} onToggle={() => setDark((d) => !d)} />
+            <ThemeToggle dark={dark} onToggle={() => setDark((d: boolean) => !d)} />
             
             {/* Desktop Add Spot button */}
             {effectiveUid && (
               <button
                 type="button"
                 onClick={openFormModal}
-                className="hidden sm:inline-flex items-center gap-1.5 neu-button rounded-xl px-4 py-2.5 text-xs sm:text-sm font-semibold text-accent cursor-pointer hover:text-accent-glow"
+                className="hidden md:inline-flex items-center gap-1.5 neu-button rounded-xl px-4 py-2.5 text-xs sm:text-sm font-semibold text-accent cursor-pointer hover:text-accent-glow"
               >
                 <Plus className="h-4 w-4" />
                 Add Spot
@@ -1214,7 +1225,7 @@ function HomePage() {
                 ref={carouselRef}
                 className="carousel-container gap-6 py-6 px-4 scrollbar-none"
               >
-                {filteredSpots && filteredSpots.map((spot, index) => (
+                {filteredSpots && (filteredSpots as FoodSpotLog[]).map((spot: FoodSpotLog, index: number) => (
                   <div
                     key={spot.id}
                     className={`carousel-card group/item relative shrink-0 transition-transform duration-300 ${deletingIds.has(spot.id!) ? "animate-melt" : ""}`}
@@ -1337,7 +1348,7 @@ function HomePage() {
             ) : (
               /* List/Table View Mode */
               <div className="neu-raised p-4 space-y-3 pt-2">
-                {filteredSpots && filteredSpots.map((spot) => (
+                {filteredSpots && (filteredSpots as FoodSpotLog[]).map((spot: FoodSpotLog) => (
                   <FeedListItem
                     key={spot.id}
                     spot={spot}
@@ -1581,7 +1592,7 @@ function HomePage() {
           onMouseLeave={() => handleFABHover(false)}
           onMouseDown={() => handleFABPress(true)}
           onMouseUp={() => handleFABPress(false)}
-          className="gsap-fab fixed bottom-6 right-6 z-40 neu-button h-14 w-14 rounded-full bg-accent text-white flex items-center justify-center shadow-lg cursor-pointer transition-all duration-300 group"
+          className="gsap-fab fixed bottom-6 right-6 z-40 neu-button h-14 w-14 rounded-full bg-accent text-white flex items-center justify-center shadow-lg cursor-pointer transition-all duration-300 group md:hidden"
           aria-label="Add new spot"
         >
           <Plus className="h-6 w-6 text-white" />
diff --git a/components/SpotDetailModal.tsx b/components/SpotDetailModal.tsx
index 6d729cd..b8ad085 100644
--- a/components/SpotDetailModal.tsx
+++ b/components/SpotDetailModal.tsx
@@ -89,6 +89,7 @@ export default function SpotDetailModal({
             comment: spot.comment,
             createdAt: spot.createdAt,
             thumbnail: newThumb,
+            downloadURL: spot.downloadURL,
           });
           await db.spots.update(spotId, { pendingSync: false });
         } catch (fireErr) {
diff --git a/lib/auth.tsx b/lib/auth.tsx
index 8aa3568..3e34b8d 100644
--- a/lib/auth.tsx
+++ b/lib/auth.tsx
@@ -6,11 +6,14 @@ import {
   useEffect,
   useState,
   useCallback,
+  useRef,
   type ReactNode,
 } from "react";
 import {
   onAuthStateChanged,
   signInWithPopup,
+  signInWithRedirect,
+  getRedirectResult,
   signOut as firebaseSignOut,
   GoogleAuthProvider,
   browserPopupRedirectResolver,
@@ -41,7 +44,7 @@ export interface CachedSession {
 interface AuthContextValue {
   user: User | null;
   loading: boolean;
-  signInWithGoogle: () => Promise<void>;
+  signInWithGoogle: (email?: string) => Promise<void>;
   signOut: () => Promise<void>;
   quickLoginAccounts: QuickLoginAccount[];
   /** Cached session from localStorage — available instantly, even offline. */
@@ -90,6 +93,24 @@ function clearCachedSession(): void {
   }
 }
 
+/* ------------------------------------------------------------------ */
+/*  PWA standalone detection                                           */
+/* ------------------------------------------------------------------ */
+
+/**
+ * Detects if the app is running in installed PWA / standalone mode.
+ *
+ * iOS Safari standalone (WKWebView) blocks `signInWithPopup`, so we
+ * must fall back to `signInWithRedirect` when this returns `true`.
+ */
+function isStandalonePWA(): boolean {
+  if (typeof window === "undefined") return false;
+  return (
+    window.matchMedia("(display-mode: standalone)").matches ||
+    (navigator as unknown as { standalone?: boolean }).standalone === true
+  );
+}
+
 /* ------------------------------------------------------------------ */
 /*  Context                                                            */
 /* ------------------------------------------------------------------ */
@@ -124,10 +145,30 @@ export function AuthProvider({ children }: { children: ReactNode }) {
     }
   }, []);
 
-  // Persist a user to quick-login history.
+  // Handle redirect result (iOS PWA standalone flow).
+  // Runs once on mount — if the user just returned from a signInWithRedirect,
+  // this resolves the pending credential and fires onAuthStateChanged.
+  const redirectHandled = useRef(false);
+  useEffect(() => {
+    if (redirectHandled.current) return;
+    redirectHandled.current = true;
+
+    getRedirectResult(getFirebaseAuth())
+      .then((result) => {
+        if (result?.user) {
+          console.log("[KeepCheck] Redirect sign-in resolved:", result.user.email);
+          saveToQuickLogin(result.user);
+        }
+      })
+      .catch((err) => {
+        console.warn("[KeepCheck] getRedirectResult error (non-fatal):", err);
+      });
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
   const saveToQuickLogin = useCallback((u: User) => {
-    setQuickLoginAccounts((prev) => {
-      const filtered = prev.filter((a) => a.uid !== u.uid);
+    setQuickLoginAccounts((prev: QuickLoginAccount[]) => {
+      const filtered = prev.filter((a: QuickLoginAccount) => a.uid !== u.uid);
       const entry: QuickLoginAccount = {
         uid: u.uid,
         displayName: u.displayName,
@@ -168,12 +209,29 @@ export function AuthProvider({ children }: { children: ReactNode }) {
     return unsubscribe;
   }, [saveToQuickLogin]);
 
-  // Sign in with Google popup.
-  const signInWithGoogle = useCallback(async () => {
+  // Sign in with Google — uses redirect on iOS PWA, popup everywhere else.
+  const signInWithGoogle = useCallback(async (email?: string) => {
     const provider = new GoogleAuthProvider();
-    provider.setCustomParameters({ prompt: "select_account" });
+    if (email) {
+      provider.setCustomParameters({ login_hint: email });
+    } else {
+      provider.setCustomParameters({ prompt: "select_account" });
+    }
+
+    const auth = getFirebaseAuth();
+
+    if (isStandalonePWA()) {
+      // iOS standalone / installed PWA — popup is blocked by WKWebView.
+      // signInWithRedirect navigates away; getRedirectResult (above) resolves
+      // the credential when the app reloads after the redirect.
+      console.log("[KeepCheck] Standalone PWA detected — using signInWithRedirect");
+      await signInWithRedirect(auth, provider);
+      return; // page will navigate away
+    }
+
+    // Desktop / mobile browser — popup is fine.
     try {
-      const result = await signInWithPopup(getFirebaseAuth(), provider, browserPopupRedirectResolver);
+      const result = await signInWithPopup(auth, provider, browserPopupRedirectResolver);
       saveToQuickLogin(result.user);
     } catch (error: unknown) {
       // User closed popup — not an error.
diff --git a/lib/firebase.ts b/lib/firebase.ts
index d09a0f5..a1bcf6b 100644
--- a/lib/firebase.ts
+++ b/lib/firebase.ts
@@ -13,6 +13,10 @@ import {
   persistentMultipleTabManager,
   type Firestore,
 } from "firebase/firestore";
+import {
+  getStorage as _getStorage,
+  type FirebaseStorage,
+} from "firebase/storage";
 
 const firebaseConfig = {
   apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
@@ -34,6 +38,7 @@ function getApp_(): FirebaseApp {
 
 let _auth: Auth | null = null;
 let _firestore: Firestore | null = null;
+let _storage: FirebaseStorage | null = null;
 
 /**
  * Returns the Firebase Auth singleton.
@@ -80,3 +85,12 @@ export function getFirebaseFirestore(): Firestore {
 
   return _firestore;
 }
+
+/**
+ * Returns the Firebase Storage singleton.
+ */
+export function getFirebaseStorage(): FirebaseStorage {
+  if (_storage) return _storage;
+  _storage = _getStorage(getApp_());
+  return _storage;
+}
diff --git a/lib/firestore.ts b/lib/firestore.ts
index 1685bf7..7eadc9b 100644
--- a/lib/firestore.ts
+++ b/lib/firestore.ts
@@ -7,11 +7,10 @@ import {
   query,
   orderBy,
   onSnapshot,
-  addDoc,
   type Unsubscribe,
 } from "firebase/firestore";
 import { getFirebaseFirestore } from "./firebase";
-import type { FoodSpotLog, SpotImage } from "@/app/db";
+import type { FoodSpotLog } from "@/app/db";
 
 /* ------------------------------------------------------------------ */
 /*  Path helpers                                                       */
@@ -21,10 +20,6 @@ function spotsCol(uid: string) {
   return collection(getFirebaseFirestore(), "users", uid, "spots");
 }
 
-function imagesCol(uid: string) {
-  return collection(getFirebaseFirestore(), "users", uid, "images");
-}
-
 /* ------------------------------------------------------------------ */
 /*  Spots                                                              */
 /* ------------------------------------------------------------------ */
@@ -95,61 +90,3 @@ export function subscribeToSpots(
     callback(changes);
   });
 }
-
-/* ------------------------------------------------------------------ */
-/*  Images                                                             */
-/* ------------------------------------------------------------------ */
-
-/**
- * Add an image to Firestore.
- *
- * NOTE: We store the image as a base64 string (NOT a Blob) because
- * Firestore doesn't natively support Blob storage. The images are
- * already compressed JPEGs < 1 MB from the image utility pipeline.
- */
-export async function addImageToFirestore(
-  uid: string,
-  image: {
-    spotFirebaseId: string;
-    base64: string;
-    createdAt: number;
-  },
-): Promise<string> {
-  const docRef = await addDoc(imagesCol(uid), {
-    spotFirebaseId: image.spotFirebaseId,
-    base64: image.base64,
-    createdAt: image.createdAt,
-    userId: uid,
-  });
-  return docRef.id;
-}
-
-/** Delete all images for a spot from Firestore. */
-export async function deleteImagesForSpotFromFirestore(
-  uid: string,
-  spotFirebaseId: string,
-): Promise<void> {
-  const q = query(imagesCol(uid));
-  const snapshot = await getDocs(q);
-  const deleteOps = snapshot.docs
-    .filter((d) => d.data().spotFirebaseId === spotFirebaseId)
-    .map((d) => deleteDoc(d.ref));
-  await Promise.all(deleteOps);
-}
-
-/** Subscribe to real-time image updates. Returns an unsubscribe function. */
-export function subscribeToImages(
-  uid: string,
-  callback: (images: { firebaseId: string; spotFirebaseId: string; base64: string; createdAt: number }[]) => void,
-): Unsubscribe {
-  const q = query(imagesCol(uid), orderBy("createdAt", "desc"));
-  return onSnapshot(q, (snapshot) => {
-    const images = snapshot.docs.map((d) => ({
-      firebaseId: d.id,
-      spotFirebaseId: d.data().spotFirebaseId as string,
-      base64: d.data().base64 as string,
-      createdAt: d.data().createdAt as number,
-    }));
-    callback(images);
-  });
-}
diff --git a/lib/offlineSync.ts b/lib/offlineSync.ts
index f0725f5..708adc6 100644
--- a/lib/offlineSync.ts
+++ b/lib/offlineSync.ts
@@ -20,23 +20,22 @@
 import { db, type FoodSpotLog } from "@/app/db";
 import {
   writeSpotToFirestore,
-  addImageToFirestore,
   deleteSpotFromFirestore,
-  deleteImagesForSpotFromFirestore,
 } from "./firestore";
+import { uploadSpotImage, deleteSpotImage } from "./storage";
 
 /* ------------------------------------------------------------------ */
 /*  Pending-delete queue (localStorage-backed)                         */
 /* ------------------------------------------------------------------ */
 
-interface PendingDelete {
+export interface PendingDelete {
   uid: string;
   firebaseId: string;
 }
 
 const PENDING_DELETES_KEY = "keepcheck-pending-deletes";
 
-function getPendingDeletes(): PendingDelete[] {
+export function getPendingDeletes(): PendingDelete[] {
   try {
     const raw = localStorage.getItem(PENDING_DELETES_KEY);
     return raw ? JSON.parse(raw) : [];
@@ -85,34 +84,18 @@ export async function syncSpotToFirestore(
   }
 
   try {
-    // Write the spot document
-    await writeSpotToFirestore(uid, spot.firebaseId, {
-      name: spot.name,
-      category: spot.category,
-      rating: spot.rating,
-      comment: spot.comment,
-      createdAt: spot.createdAt,
-      thumbnail: spot.thumbnail,
-    });
+    let downloadURL = spot.downloadURL;
 
     // If there's a local image for this spot, sync it too
     if (spot.id !== undefined) {
       const image = await db.images.where("spotId").equals(spot.id).first();
       if (image && !image.firebaseId) {
         try {
-          const reader = new FileReader();
-          const base64 = await new Promise<string>((resolve, reject) => {
-            reader.onload = () => resolve(reader.result as string);
-            reader.onerror = reject;
-            reader.readAsDataURL(image.blob);
-          });
-          const imgFirebaseId = await addImageToFirestore(uid, {
-            spotFirebaseId: spot.firebaseId,
-            base64,
-            createdAt: image.createdAt,
-          });
+          downloadURL = await uploadSpotImage(uid, spot.firebaseId, image.blob);
           // Mark image as synced
-          await db.images.update(image.id!, { firebaseId: imgFirebaseId });
+          await db.images.update(image.id!, { firebaseId: "uploaded" });
+          // Update local spot with downloadURL
+          await db.spots.update(spot.id, { downloadURL });
         } catch (imgErr) {
           console.warn("[OfflineSync] Image sync failed, will retry:", imgErr);
           // Don't fail the whole spot sync for an image failure
@@ -120,6 +103,17 @@ export async function syncSpotToFirestore(
       }
     }
 
+    // Write the spot document
+    await writeSpotToFirestore(uid, spot.firebaseId, {
+      name: spot.name,
+      category: spot.category,
+      rating: spot.rating,
+      comment: spot.comment,
+      createdAt: spot.createdAt,
+      thumbnail: spot.thumbnail,
+      downloadURL,
+    });
+
     // Mark spot as synced
     if (spot.id !== undefined) {
       await db.spots.update(spot.id, { pendingSync: false });
@@ -191,7 +185,7 @@ export async function sweepPendingSync(uid: string): Promise<number> {
         continue;
       }
       try {
-        await deleteImagesForSpotFromFirestore(del.uid, del.firebaseId);
+        await deleteSpotImage(del.uid, del.firebaseId);
         await deleteSpotFromFirestore(del.uid, del.firebaseId);
         console.log(`[OfflineSync] ✓ Deleted spot ${del.firebaseId} from Firestore`);
       } catch {
diff --git a/lib/storage.ts b/lib/storage.ts
new file mode 100644
index 0000000..03ab1b7
--- /dev/null
+++ b/lib/storage.ts
@@ -0,0 +1,79 @@
+/**
+ * Firebase Storage helpers for spot images.
+ *
+ * Replaces the old Firestore-based Base64 image storage with binary
+ * blob uploads to Firebase Storage. This avoids hitting Firestore's
+ * 1 MiB document limit and dramatically reduces sync bandwidth.
+ *
+ * Each spot gets one image at:
+ *   `users/{uid}/spots/{spotFirebaseId}/photo.jpg`
+ */
+
+import {
+  ref,
+  uploadBytes,
+  getDownloadURL,
+  deleteObject,
+} from "firebase/storage";
+import { getFirebaseStorage } from "./firebase";
+
+/* ------------------------------------------------------------------ */
+/*  Path helper                                                        */
+/* ------------------------------------------------------------------ */
+
+function spotImageRef(uid: string, spotFirebaseId: string) {
+  return ref(
+    getFirebaseStorage(),
+    `users/${uid}/spots/${spotFirebaseId}/photo.jpg`,
+  );
+}
+
+/* ------------------------------------------------------------------ */
+/*  Public API                                                         */
+/* ------------------------------------------------------------------ */
+
+/**
+ * Upload a compressed JPEG blob to Firebase Storage and return the
+ * permanent download URL.
+ *
+ * @param uid             - Firebase Auth UID of the image owner.
+ * @param spotFirebaseId  - Firestore document ID of the parent spot.
+ * @param blob            - Compressed JPEG binary from `compressToBlob`.
+ * @returns The public download URL string.
+ */
+export async function uploadSpotImage(
+  uid: string,
+  spotFirebaseId: string,
+  blob: Blob,
+): Promise<string> {
+  const imageRef = spotImageRef(uid, spotFirebaseId);
+  await uploadBytes(imageRef, blob, {
+    contentType: "image/jpeg",
+  });
+  return getDownloadURL(imageRef);
+}
+
+/**
+ * Delete a spot's image from Firebase Storage.
+ *
+ * Swallows `storage/object-not-found` so the caller doesn't need to
+ * guard against double-deletes or spots that never had an image.
+ *
+ * @param uid             - Firebase Auth UID of the image owner.
+ * @param spotFirebaseId  - Firestore document ID of the parent spot.
+ */
+export async function deleteSpotImage(
+  uid: string,
+  spotFirebaseId: string,
+): Promise<void> {
+  try {
+    await deleteObject(spotImageRef(uid, spotFirebaseId));
+  } catch (err: unknown) {
+    const code = (err as { code?: string })?.code;
+    if (code === "storage/object-not-found") {
+      // Image doesn't exist — nothing to delete, not an error.
+      return;
+    }
+    throw err;
+  }
+}
diff --git a/package-lock.json b/package-lock.json
index d17c54d..2409840 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -22,7 +22,7 @@
       "devDependencies": {
         "@tailwindcss/postcss": "^4",
         "@types/node": "^20",
-        "@types/react": "^19",
+        "@types/react": "^19.2.17",
         "@types/react-dom": "^19",
         "eslint": "^9",
         "eslint-config-next": "16.2.10",
@@ -99,6 +99,16 @@
         "url": "https://opencollective.com/babel"
       }
     },
+    "node_modules/@babel/core/node_modules/semver": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
     "node_modules/@babel/generator": {
       "version": "7.29.7",
       "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.29.7.tgz",
@@ -133,6 +143,16 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@babel/helper-compilation-targets/node_modules/semver": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
     "node_modules/@babel/helper-globals": {
       "version": "7.29.7",
       "resolved": "https://registry.npmjs.org/@babel/helper-globals/-/helper-globals-7.29.7.tgz",
@@ -609,12 +629,6 @@
         "@firebase/logger": "0.5.1"
       }
     },
-    "node_modules/@firebase/app/node_modules/idb": {
-      "version": "7.1.1",
-      "resolved": "https://registry.npmjs.org/idb/-/idb-7.1.1.tgz",
-      "integrity": "sha512-gchesWBzyvGHRO9W8tzUWFDycow5gwjvFKfyV9FF32Y7F50yZMp7mP+T2mJIWFx49zicqyC4uefHM17o6xKIVQ==",
-      "license": "ISC"
-    },
     "node_modules/@firebase/auth": {
       "version": "1.13.3",
       "resolved": "https://registry.npmjs.org/@firebase/auth/-/auth-1.13.3.tgz",
@@ -884,12 +898,6 @@
         "@firebase/app-types": "0.x"
       }
     },
-    "node_modules/@firebase/installations/node_modules/idb": {
-      "version": "7.1.1",
-      "resolved": "https://registry.npmjs.org/idb/-/idb-7.1.1.tgz",
-      "integrity": "sha512-gchesWBzyvGHRO9W8tzUWFDycow5gwjvFKfyV9FF32Y7F50yZMp7mP+T2mJIWFx49zicqyC4uefHM17o6xKIVQ==",
-      "license": "ISC"
-    },
     "node_modules/@firebase/logger": {
       "version": "0.5.1",
       "resolved": "https://registry.npmjs.org/@firebase/logger/-/logger-0.5.1.tgz",
@@ -940,12 +948,6 @@
       "integrity": "sha512-tUEKnaAP2Y/MNIqgnriPpV6e5l13Vs/+p2yrd6NGlncPJT9O3a8muYZtdnWe+IJ4fgKLHJVC79n/asxk/N5Msw==",
       "license": "Apache-2.0"
     },
-    "node_modules/@firebase/messaging/node_modules/idb": {
-      "version": "7.1.1",
-      "resolved": "https://registry.npmjs.org/idb/-/idb-7.1.1.tgz",
-      "integrity": "sha512-gchesWBzyvGHRO9W8tzUWFDycow5gwjvFKfyV9FF32Y7F50yZMp7mP+T2mJIWFx49zicqyC4uefHM17o6xKIVQ==",
-      "license": "ISC"
-    },
     "node_modules/@firebase/performance": {
       "version": "0.7.12",
       "resolved": "https://registry.npmjs.org/@firebase/performance/-/performance-0.7.12.tgz",
@@ -1280,6 +1282,9 @@
       "cpu": [
         "arm"
       ],
+      "libc": [
+        "glibc"
+      ],
       "license": "LGPL-3.0-or-later",
       "optional": true,
       "os": [
@@ -1296,6 +1301,9 @@
       "cpu": [
         "arm64"
       ],
+      "libc": [
+        "glibc"
+      ],
       "license": "LGPL-3.0-or-later",
       "optional": true,
       "os": [
@@ -1312,6 +1320,9 @@
       "cpu": [
         "ppc64"
       ],
+      "libc": [
+        "glibc"
+      ],
       "license": "LGPL-3.0-or-later",
       "optional": true,
       "os": [
@@ -1328,6 +1339,9 @@
       "cpu": [
         "riscv64"
       ],
+      "libc": [
+        "glibc"
+      ],
       "license": "LGPL-3.0-or-later",
       "optional": true,
       "os": [
@@ -1344,6 +1358,9 @@
       "cpu": [
         "s390x"
       ],
+      "libc": [
+        "glibc"
+      ],
       "license": "LGPL-3.0-or-later",
       "optional": true,
       "os": [
@@ -1360,6 +1377,9 @@
       "cpu": [
         "x64"
       ],
+      "libc": [
+        "glibc"
+      ],
       "license": "LGPL-3.0-or-later",
       "optional": true,
       "os": [
@@ -1376,6 +1396,9 @@
       "cpu": [
         "arm64"
       ],
+      "libc": [
+        "musl"
+      ],
       "license": "LGPL-3.0-or-later",
       "optional": true,
       "os": [
@@ -1392,6 +1415,9 @@
       "cpu": [
         "x64"
       ],
+      "libc": [
+        "musl"
+      ],
       "license": "LGPL-3.0-or-later",
       "optional": true,
       "os": [
@@ -1408,6 +1434,9 @@
       "cpu": [
         "arm"
       ],
+      "libc": [
+        "glibc"
+      ],
       "license": "Apache-2.0",
       "optional": true,
       "os": [
@@ -1430,6 +1459,9 @@
       "cpu": [
         "arm64"
       ],
+      "libc": [
+        "glibc"
+      ],
       "license": "Apache-2.0",
       "optional": true,
       "os": [
@@ -1452,6 +1484,9 @@
       "cpu": [
         "ppc64"
       ],
+      "libc": [
+        "glibc"
+      ],
       "license": "Apache-2.0",
       "optional": true,
       "os": [
@@ -1474,6 +1509,9 @@
       "cpu": [
         "riscv64"
       ],
+      "libc": [
+        "glibc"
+      ],
       "license": "Apache-2.0",
       "optional": true,
       "os": [
@@ -1496,6 +1534,9 @@
       "cpu": [
         "s390x"
       ],
+      "libc": [
+        "glibc"
+      ],
       "license": "Apache-2.0",
       "optional": true,
       "os": [
@@ -1518,6 +1559,9 @@
       "cpu": [
         "x64"
       ],
+      "libc": [
+        "glibc"
+      ],
       "license": "Apache-2.0",
       "optional": true,
       "os": [
@@ -1540,6 +1584,9 @@
       "cpu": [
         "arm64"
       ],
+      "libc": [
+        "musl"
+      ],
       "license": "Apache-2.0",
       "optional": true,
       "os": [
@@ -1562,6 +1609,9 @@
       "cpu": [
         "x64"
       ],
+      "libc": [
+        "musl"
+      ],
       "license": "Apache-2.0",
       "optional": true,
       "os": [
@@ -1777,6 +1827,9 @@
       "cpu": [
         "arm64"
       ],
+      "libc": [
+        "glibc"
+      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1793,6 +1846,9 @@
       "cpu": [
         "arm64"
       ],
+      "libc": [
+        "musl"
+      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1809,6 +1865,9 @@
       "cpu": [
         "x64"
       ],
+      "libc": [
+        "glibc"
+      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1825,6 +1884,9 @@
       "cpu": [
         "x64"
       ],
+      "libc": [
+        "musl"
+      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2004,15 +2066,6 @@
         }
       }
     },
-    "node_modules/@serwist/build/node_modules/zod": {
-      "version": "4.4.1",
-      "resolved": "https://registry.npmjs.org/zod/-/zod-4.4.1.tgz",
-      "integrity": "sha512-a6ENMBBGZBsnlSebQ/eKCguSBeGKSf4O7BPnqVPmYGtpBYI7VSqoVqw+QcB7kPRjbqPwhYTpFbVj/RqNz/CT0Q==",
-      "license": "MIT",
-      "funding": {
-        "url": "https://github.com/sponsors/colinhacks"
-      }
-    },
     "node_modules/@serwist/next": {
       "version": "9.5.11",
       "resolved": "https://registry.npmjs.org/@serwist/next/-/next-9.5.11.tgz",
@@ -2048,60 +2101,6 @@
         }
       }
     },
-    "node_modules/@serwist/next/node_modules/browserslist": {
-      "version": "4.28.2",
-      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.28.2.tgz",
-      "integrity": "sha512-48xSriZYYg+8qXna9kwqjIVzuQxi+KYWp2+5nCYnYKPTr0LvD89Jqk2Or5ogxz0NUMfIjhh2lIUX/LyX9B4oIg==",
-      "funding": [
-        {
-          "type": "opencollective",
-          "url": "https://opencollective.com/browserslist"
-        },
-        {
-          "type": "tidelift",
-          "url": "https://tidelift.com/funding/github/npm/browserslist"
-        },
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/ai"
-        }
-      ],
-      "license": "MIT",
-      "dependencies": {
-        "baseline-browser-mapping": "^2.10.12",
-        "caniuse-lite": "^1.0.30001782",
-        "electron-to-chromium": "^1.5.328",
-        "node-releases": "^2.0.36",
-        "update-browserslist-db": "^1.2.3"
-      },
-      "bin": {
-        "browserslist": "cli.js"
-      },
-      "engines": {
-        "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
-      }
-    },
-    "node_modules/@serwist/next/node_modules/semver": {
-      "version": "7.7.4",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.4.tgz",
-      "integrity": "sha512-vFKC2IEtQnVhpT78h1Yp8wzwrf8CM+MzKMHGJZfBtzhZNycRFnXsHk6E5TxIkkMsgNS7mdX3AGB7x2QM2di4lA==",
-      "license": "ISC",
-      "bin": {
-        "semver": "bin/semver.js"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/@serwist/next/node_modules/zod": {
-      "version": "4.4.1",
-      "resolved": "https://registry.npmjs.org/zod/-/zod-4.4.1.tgz",
-      "integrity": "sha512-a6ENMBBGZBsnlSebQ/eKCguSBeGKSf4O7BPnqVPmYGtpBYI7VSqoVqw+QcB7kPRjbqPwhYTpFbVj/RqNz/CT0Q==",
-      "license": "MIT",
-      "funding": {
-        "url": "https://github.com/sponsors/colinhacks"
-      }
-    },
     "node_modules/@serwist/utils": {
       "version": "9.5.11",
       "resolved": "https://registry.npmjs.org/@serwist/utils/-/utils-9.5.11.tgz",
@@ -2143,15 +2142,6 @@
         }
       }
     },
-    "node_modules/@serwist/webpack-plugin/node_modules/zod": {
-      "version": "4.4.1",
-      "resolved": "https://registry.npmjs.org/zod/-/zod-4.4.1.tgz",
-      "integrity": "sha512-a6ENMBBGZBsnlSebQ/eKCguSBeGKSf4O7BPnqVPmYGtpBYI7VSqoVqw+QcB7kPRjbqPwhYTpFbVj/RqNz/CT0Q==",
-      "license": "MIT",
-      "funding": {
-        "url": "https://github.com/sponsors/colinhacks"
-      }
-    },
     "node_modules/@serwist/window": {
       "version": "9.5.11",
       "resolved": "https://registry.npmjs.org/@serwist/window/-/window-9.5.11.tgz",
@@ -2312,6 +2302,9 @@
         "arm64"
       ],
       "dev": true,
+      "libc": [
+        "glibc"
+      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2329,6 +2322,9 @@
         "arm64"
       ],
       "dev": true,
+      "libc": [
+        "musl"
+      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2346,6 +2342,9 @@
         "x64"
       ],
       "dev": true,
+      "libc": [
+        "glibc"
+      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2363,6 +2362,9 @@
         "x64"
       ],
       "dev": true,
+      "libc": [
+        "musl"
+      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2518,17 +2520,17 @@
       "license": "MIT"
     },
     "node_modules/@typescript-eslint/eslint-plugin": {
-      "version": "8.63.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.63.0.tgz",
-      "integrity": "sha512-rvwSgqT+DHpWdzfSzPatRLm02a0GlESt++9iy3hLCDY4BgkaLcl8LBi9Yh7XGFBpwcBE/K3024QuXWTpbz4FfQ==",
+      "version": "8.64.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.64.0.tgz",
+      "integrity": "sha512-CGvQPBxN3wZLu6Rz2kFUpZeoCm78xUic92ck39KPePkO1NPOwjCqdQnm5Q87tpWw9vcBvW8XLrDXjH9PWYtJ3Q==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "@eslint-community/regexpp": "^4.12.2",
-        "@typescript-eslint/scope-manager": "8.63.0",
-        "@typescript-eslint/type-utils": "8.63.0",
-        "@typescript-eslint/utils": "8.63.0",
-        "@typescript-eslint/visitor-keys": "8.63.0",
+        "@typescript-eslint/scope-manager": "8.64.0",
+        "@typescript-eslint/type-utils": "8.64.0",
+        "@typescript-eslint/utils": "8.64.0",
+        "@typescript-eslint/visitor-keys": "8.64.0",
         "ignore": "^7.0.5",
         "natural-compare": "^1.4.0",
         "ts-api-utils": "^2.5.0"
@@ -2541,7 +2543,7 @@
         "url": "https://opencollective.com/typescript-eslint"
       },
       "peerDependencies": {
-        "@typescript-eslint/parser": "^8.63.0",
+        "@typescript-eslint/parser": "^8.64.0",
         "eslint": "^8.57.0 || ^9.0.0 || ^10.0.0",
         "typescript": ">=4.8.4 <6.1.0"
       }
@@ -2557,16 +2559,16 @@
       }
     },
     "node_modules/@typescript-eslint/parser": {
-      "version": "8.63.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-8.63.0.tgz",
-      "integrity": "sha512-gwh4gvvlaVDKKxyfxMG+Gnu1u9X0OQBwyGLkbwB65dIzBKnxeRiJlNFqlI3zwVhNXJIs6qV7mlFCn/BIajlVig==",
+      "version": "8.64.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-8.64.0.tgz",
+      "integrity": "sha512-KA0OshtlcCCXmbfqyZkM5pV3/WNraJf7DkJRLpyrmwPtud57H5BDX7C3k0LPSPxpprfRL+cJDGabF10mvNCoCw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@typescript-eslint/scope-manager": "8.63.0",
-        "@typescript-eslint/types": "8.63.0",
-        "@typescript-eslint/typescript-estree": "8.63.0",
-        "@typescript-eslint/visitor-keys": "8.63.0",
+        "@typescript-eslint/scope-manager": "8.64.0",
+        "@typescript-eslint/types": "8.64.0",
+        "@typescript-eslint/typescript-estree": "8.64.0",
+        "@typescript-eslint/visitor-keys": "8.64.0",
         "debug": "^4.4.3"
       },
       "engines": {
@@ -2582,14 +2584,14 @@
       }
     },
     "node_modules/@typescript-eslint/project-service": {
-      "version": "8.63.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/project-service/-/project-service-8.63.0.tgz",
-      "integrity": "sha512-e5dh0/UI0ok53AlZ5wRkXCB32z/f2jUZqPR/ygAw5WYaSw8j9EoJWlS7wQjr/dmOaqWjnPIn2m+HhVPCMWGZVQ==",
+      "version": "8.64.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/project-service/-/project-service-8.64.0.tgz",
+      "integrity": "sha512-tk4WpOJ6IEbGrVHaNmM0YRrwAD3exZlIK3iadQNAxh4YKk6jvUQ4ecq18n+v7+meh+cJ3j+D8nbk8sRKhlwLQg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@typescript-eslint/tsconfig-utils": "^8.63.0",
-        "@typescript-eslint/types": "^8.63.0",
+        "@typescript-eslint/tsconfig-utils": "^8.64.0",
+        "@typescript-eslint/types": "^8.64.0",
         "debug": "^4.4.3"
       },
       "engines": {
@@ -2604,14 +2606,14 @@
       }
     },
     "node_modules/@typescript-eslint/scope-manager": {
-      "version": "8.63.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-8.63.0.tgz",
-      "integrity": "sha512-uUyfMWCnDSN8bCpcrY8nGP2BLkQ9Xn0GsipcONcpIDWhwhO4ZSyHvyS14U3X75mzxWxL3I2UZIrenTzdzcJO8A==",
+      "version": "8.64.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-8.64.0.tgz",
+      "integrity": "sha512-CXEaFdYXjSTgKhisNkwCcJwTP8Pl+fmRrEQrri4nm3vU743bALrxzLmq7fHG/7e6a5xO0lDYeURpZmBuhHk54w==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@typescript-eslint/types": "8.63.0",
-        "@typescript-eslint/visitor-keys": "8.63.0"
+        "@typescript-eslint/types": "8.64.0",
+        "@typescript-eslint/visitor-keys": "8.64.0"
       },
       "engines": {
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
@@ -2622,9 +2624,9 @@
       }
     },
     "node_modules/@typescript-eslint/tsconfig-utils": {
-      "version": "8.63.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/tsconfig-utils/-/tsconfig-utils-8.63.0.tgz",
-      "integrity": "sha512-sUAbkulqBAsncKnbRP3+7CtQFRKicexnj7ZwNC6ddCR7EmrXvjvdCYMJbUIqMd6lwoEriZjwLo08aS5tSjVMHg==",
+      "version": "8.64.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/tsconfig-utils/-/tsconfig-utils-8.64.0.tgz",
+      "integrity": "sha512-2yo8rRNKuzbVWQp5kslhANqZ2uDAeROQHBRZNPu8JDsHmeFNj/XJJhX/FhNUWmkHHvoNsKa6+tHJiig87EzsQw==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -2639,15 +2641,15 @@
       }
     },
     "node_modules/@typescript-eslint/type-utils": {
-      "version": "8.63.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-8.63.0.tgz",
-      "integrity": "sha512-Nzzh/OGxVCOjObjaj1CQF2RUasyYy2Jfuh+zZ3PjLzG2fYRriAiZLib9UKtO+CpQAS3YHiAS+ckZDclwqI1TPA==",
+      "version": "8.64.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-8.64.0.tgz",
+      "integrity": "sha512-XWG4Fmmv/6SvyS9nH8jWrKs6terwJvE8cyRt1CzYYqzp9OrPhCT4cMc/f7C6RZCwG+qMmiffJS1/qJP8G1URtg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@typescript-eslint/types": "8.63.0",
-        "@typescript-eslint/typescript-estree": "8.63.0",
-        "@typescript-eslint/utils": "8.63.0",
+        "@typescript-eslint/types": "8.64.0",
+        "@typescript-eslint/typescript-estree": "8.64.0",
+        "@typescript-eslint/utils": "8.64.0",
         "debug": "^4.4.3",
         "ts-api-utils": "^2.5.0"
       },
@@ -2664,9 +2666,9 @@
       }
     },
     "node_modules/@typescript-eslint/types": {
-      "version": "8.63.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-8.63.0.tgz",
-      "integrity": "sha512-xyLtl9DUBBFrcJS4x2pIqGLH68/tC2uOa4Z7pUteW09D3bXnnXUom4dyPikzWgB7llmIc1zoeI3aoUdC4rPK/Q==",
+      "version": "8.64.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-8.64.0.tgz",
+      "integrity": "sha512-qjhfuTfLXjA4IOzXvz0rTjT01BqEiIgPoUeMwiEjnaHKJMTNo8rH5pYW1a2L/0Dnux2fPC85AeyJoWaGa8WxTA==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -2678,16 +2680,16 @@
       }
     },
     "node_modules/@typescript-eslint/typescript-estree": {
-      "version": "8.63.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-8.63.0.tgz",
-      "integrity": "sha512-ygBkU+B7ex5UI/gKhaqexWev79uISfIv7XQCRNYO/jmD8rGLPyWLAb3KMRT6nd8Gt9bmUBi9+iX6tBdYfOY81Q==",
+      "version": "8.64.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-8.64.0.tgz",
+      "integrity": "sha512-Pztpsn1aCE1oWDvDEfUk31nngvvF7vUB5SwHFEaZIFpvw7WJtqUHHL4plBZDA9HfWJJjL13BdG0YrJInTUvoVA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@typescript-eslint/project-service": "8.63.0",
-        "@typescript-eslint/tsconfig-utils": "8.63.0",
-        "@typescript-eslint/types": "8.63.0",
-        "@typescript-eslint/visitor-keys": "8.63.0",
+        "@typescript-eslint/project-service": "8.64.0",
+        "@typescript-eslint/tsconfig-utils": "8.64.0",
+        "@typescript-eslint/types": "8.64.0",
+        "@typescript-eslint/visitor-keys": "8.64.0",
         "debug": "^4.4.3",
         "minimatch": "^10.2.2",
         "semver": "^7.7.3",
@@ -2744,30 +2746,17 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
-    "node_modules/@typescript-eslint/typescript-estree/node_modules/semver": {
-      "version": "7.8.5",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.8.5.tgz",
-      "integrity": "sha512-Y7/KDsb8LjooZpwaqGyulO6DQlksgCncchHGk+sZIY4SBvUocMBEFH5Ur1fI4dV+Jvl0w6cjvucaIi40puRioA==",
-      "dev": true,
-      "license": "ISC",
-      "bin": {
-        "semver": "bin/semver.js"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
     "node_modules/@typescript-eslint/utils": {
-      "version": "8.63.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-8.63.0.tgz",
-      "integrity": "sha512-fUKaeAvrTuQg/Tgt3nliAUSZHJM6DlCcfyEmxCvlX8kieWSStBX+5O5Fnidtc3i2JrH+9c/GL4RY2iasd/GPTA==",
+      "version": "8.64.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-8.64.0.tgz",
+      "integrity": "sha512-aJUGVB3+U0htrrCjoA8qukw8cm8fNCGAxK/tVoS70k8aeb7DETKeFozRiVFIwEeN9WJLsjaP3ph8I60tY2XZoQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.9.1",
-        "@typescript-eslint/scope-manager": "8.63.0",
-        "@typescript-eslint/types": "8.63.0",
-        "@typescript-eslint/typescript-estree": "8.63.0"
+        "@typescript-eslint/scope-manager": "8.64.0",
+        "@typescript-eslint/types": "8.64.0",
+        "@typescript-eslint/typescript-estree": "8.64.0"
       },
       "engines": {
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
@@ -2782,13 +2771,13 @@
       }
     },
     "node_modules/@typescript-eslint/visitor-keys": {
-      "version": "8.63.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-8.63.0.tgz",
-      "integrity": "sha512-UexrHGnGTpbuQHct2ExOc2ZcFbGUS9FOesCxxqdBGcpI1BxYu/LZ6U8Aq6/72XtF/qRBk9nhuGHFJIXXMhPMdw==",
+      "version": "8.64.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-8.64.0.tgz",
+      "integrity": "sha512-mrtuL8Nsn6gi2H4mo5KMTp823M+3Q19Ew/i+Zlikq20tIMm99C3Ez0dCmkWWnxut20esQvTg8aUSEhMcAOXhEw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@typescript-eslint/types": "8.63.0",
+        "@typescript-eslint/types": "8.64.0",
         "eslint-visitor-keys": "^5.0.0"
       },
       "engines": {
@@ -2918,6 +2907,9 @@
         "arm64"
       ],
       "dev": true,
+      "libc": [
+        "glibc"
+      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2932,6 +2924,9 @@
         "arm64"
       ],
       "dev": true,
+      "libc": [
+        "musl"
+      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2946,6 +2941,9 @@
         "loong64"
       ],
       "dev": true,
+      "libc": [
+        "glibc"
+      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2960,6 +2958,9 @@
         "loong64"
       ],
       "dev": true,
+      "libc": [
+        "musl"
+      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2974,6 +2975,9 @@
         "ppc64"
       ],
       "dev": true,
+      "libc": [
+        "glibc"
+      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2988,6 +2992,9 @@
         "riscv64"
       ],
       "dev": true,
+      "libc": [
+        "glibc"
+      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -3002,6 +3009,9 @@
         "riscv64"
       ],
       "dev": true,
+      "libc": [
+        "musl"
+      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -3016,6 +3026,9 @@
         "s390x"
       ],
       "dev": true,
+      "libc": [
+        "glibc"
+      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -3030,6 +3043,9 @@
         "x64"
       ],
       "dev": true,
+      "libc": [
+        "glibc"
+      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -3044,6 +3060,9 @@
         "x64"
       ],
       "dev": true,
+      "libc": [
+        "musl"
+      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -3474,9 +3493,9 @@
       }
     },
     "node_modules/browserslist": {
-      "version": "4.28.5",
-      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.28.5.tgz",
-      "integrity": "sha512-Cu2E6QejHWzuDMTkuwgpABFgDfZrXLQq5V13YOACZx4mFAG4IwGTbTfHPMr4WtxlHoXSM8FIuRwYYCz5XiabaQ==",
+      "version": "4.28.2",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.28.2.tgz",
+      "integrity": "sha512-48xSriZYYg+8qXna9kwqjIVzuQxi+KYWp2+5nCYnYKPTr0LvD89Jqk2Or5ogxz0NUMfIjhh2lIUX/LyX9B4oIg==",
       "funding": [
         {
           "type": "opencollective",
@@ -3493,10 +3512,10 @@
       ],
       "license": "MIT",
       "dependencies": {
-        "baseline-browser-mapping": "^2.10.42",
-        "caniuse-lite": "^1.0.30001800",
-        "electron-to-chromium": "^1.5.387",
-        "node-releases": "^2.0.50",
+        "baseline-browser-mapping": "^2.10.12",
+        "caniuse-lite": "^1.0.30001782",
+        "electron-to-chromium": "^1.5.328",
+        "node-releases": "^2.0.36",
         "update-browserslist-db": "^1.2.3"
       },
       "bin": {
@@ -3567,9 +3586,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001803",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001803.tgz",
-      "integrity": "sha512-g/uHREV2ZpK9qMalCsWaxmA6ol+DX8GYhuf3T40RKoP+oL7vhRJh8LNt73PCjpnR6l14FzfPrB5Yux4PKm2meg==",
+      "version": "1.0.30001805",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001805.tgz",
+      "integrity": "sha512-52noaS3DubycKSXaU30TwPGIp+POyQSUVa5jBEq3vkRkY0kjyb3LQgvhU6WGyCcyXqVLWO0Cw0Q6BSdD0kUfVA==",
       "funding": [
         {
           "type": "opencollective",
@@ -3863,9 +3882,9 @@
       }
     },
     "node_modules/electron-to-chromium": {
-      "version": "1.5.389",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.389.tgz",
-      "integrity": "sha512-cEto7aeOqBfU1D+c5py5pE+ooscKE75JifxLBdFUZsqAxRS6y7kebtxAZvICszSl05gPjYHDTjY+lXpyGvpJbg==",
+      "version": "1.5.392",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.392.tgz",
+      "integrity": "sha512-1yQq3VQCZRwsnYc67Oc+1fge6Lwtn0hzi6zmEVkB61Zx21kTbwJAW4dFLadl5Rc1tKhG/kSpYXnfiAhu0f0a1g==",
       "license": "ISC"
     },
     "node_modules/emoji-regex": {
@@ -4339,6 +4358,16 @@
         "ms": "^2.1.1"
       }
     },
+    "node_modules/eslint-plugin-import/node_modules/semver": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
     "node_modules/eslint-plugin-jsx-a11y": {
       "version": "6.10.2",
       "resolved": "https://registry.npmjs.org/eslint-plugin-jsx-a11y/-/eslint-plugin-jsx-a11y-6.10.2.tgz",
@@ -4422,6 +4451,16 @@
         "eslint": "^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-0 || ^9.0.0 || ^10.0.0"
       }
     },
+    "node_modules/eslint-plugin-react/node_modules/semver": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
     "node_modules/eslint-scope": {
       "version": "8.4.0",
       "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-8.4.0.tgz",
@@ -5088,9 +5127,9 @@
       "license": "MIT"
     },
     "node_modules/idb": {
-      "version": "8.0.3",
-      "resolved": "https://registry.npmjs.org/idb/-/idb-8.0.3.tgz",
-      "integrity": "sha512-LtwtVyVYO5BqRvcsKuB2iUMnHwPVByPCXFXOpuU96IZPPoPN6xjOGxZQ74pgSVVLQWtUOYgyeL4GE98BY5D3wg==",
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/idb/-/idb-7.1.1.tgz",
+      "integrity": "sha512-gchesWBzyvGHRO9W8tzUWFDycow5gwjvFKfyV9FF32Y7F50yZMp7mP+T2mJIWFx49zicqyC4uefHM17o6xKIVQ==",
       "license": "ISC"
     },
     "node_modules/ignore": {
@@ -5226,19 +5265,6 @@
         "semver": "^7.7.1"
       }
     },
-    "node_modules/is-bun-module/node_modules/semver": {
-      "version": "7.8.5",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.8.5.tgz",
-      "integrity": "sha512-Y7/KDsb8LjooZpwaqGyulO6DQlksgCncchHGk+sZIY4SBvUocMBEFH5Ur1fI4dV+Jvl0w6cjvucaIi40puRioA==",
-      "dev": true,
-      "license": "ISC",
-      "bin": {
-        "semver": "bin/semver.js"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
     "node_modules/is-callable": {
       "version": "1.2.7",
       "resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.2.7.tgz",
@@ -5913,6 +5939,9 @@
         "arm64"
       ],
       "dev": true,
+      "libc": [
+        "glibc"
+      ],
       "license": "MPL-2.0",
       "optional": true,
       "os": [
@@ -5934,6 +5963,9 @@
         "arm64"
       ],
       "dev": true,
+      "libc": [
+        "musl"
+      ],
       "license": "MPL-2.0",
       "optional": true,
       "os": [
@@ -5955,6 +5987,9 @@
         "x64"
       ],
       "dev": true,
+      "libc": [
+        "glibc"
+      ],
       "license": "MPL-2.0",
       "optional": true,
       "os": [
@@ -5976,6 +6011,9 @@
         "x64"
       ],
       "dev": true,
+      "libc": [
+        "musl"
+      ],
       "license": "MPL-2.0",
       "optional": true,
       "os": [
@@ -6188,9 +6226,9 @@
       "license": "MIT"
     },
     "node_modules/nanoid": {
-      "version": "3.3.15",
-      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.15.tgz",
-      "integrity": "sha512-y7Wygv/7mEOvxTuEQDB8StXdMRBWf1kR/tlhAzBRUFkB2jfcLOAxO/SHmOO2zgz1pVgK29/kyupn059/bCHdjA==",
+      "version": "3.3.16",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.16.tgz",
+      "integrity": "sha512-bzlKTyNJ7+LdGIIwy8ijFpIqEQIvafahV7eYykJ8Cvh42EdJeODoJ6gUJXpQJvej1BddH8OqTXZNE/KfbWAu8Q==",
       "funding": [
         {
           "type": "github",
@@ -6328,6 +6366,16 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/node-exports-info/node_modules/semver": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
     "node_modules/node-releases": {
       "version": "2.0.51",
       "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.51.tgz",
@@ -6623,9 +6671,9 @@
       }
     },
     "node_modules/postcss": {
-      "version": "8.5.16",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.16.tgz",
-      "integrity": "sha512-vuwillviilfKZsg0VGj5R/YwwcHx4SLsIOI/7K6mQkWx+l5cUHTjj5g0AasTBcyXsbfTgrwsUNmVUb5xVwyPwg==",
+      "version": "8.5.19",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.19.tgz",
+      "integrity": "sha512-Mz8SaolMd8nB+G13WkORcxQKHZ/NE4xXevtkJHVuG+guo9/wYKlIMTKAqGdEmYOXR2ijPjTYNHssizdaVSUNdQ==",
       "dev": true,
       "funding": [
         {
@@ -6986,13 +7034,15 @@
       "license": "MIT"
     },
     "node_modules/semver": {
-      "version": "6.3.1",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
-      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
-      "dev": true,
+      "version": "7.7.4",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.4.tgz",
+      "integrity": "sha512-vFKC2IEtQnVhpT78h1Yp8wzwrf8CM+MzKMHGJZfBtzhZNycRFnXsHk6E5TxIkkMsgNS7mdX3AGB7x2QM2di4lA==",
       "license": "ISC",
       "bin": {
         "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
       }
     },
     "node_modules/serwist": {
@@ -7013,6 +7063,12 @@
         }
       }
     },
+    "node_modules/serwist/node_modules/idb": {
+      "version": "8.0.3",
+      "resolved": "https://registry.npmjs.org/idb/-/idb-8.0.3.tgz",
+      "integrity": "sha512-LtwtVyVYO5BqRvcsKuB2iUMnHwPVByPCXFXOpuU96IZPPoPN6xjOGxZQ74pgSVVLQWtUOYgyeL4GE98BY5D3wg==",
+      "license": "ISC"
+    },
     "node_modules/set-function-length": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.2.tgz",
@@ -7107,19 +7163,6 @@
         "@img/sharp-win32-x64": "0.34.5"
       }
     },
-    "node_modules/sharp/node_modules/semver": {
-      "version": "7.8.5",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.8.5.tgz",
-      "integrity": "sha512-Y7/KDsb8LjooZpwaqGyulO6DQlksgCncchHGk+sZIY4SBvUocMBEFH5Ur1fI4dV+Jvl0w6cjvucaIi40puRioA==",
-      "license": "ISC",
-      "optional": true,
-      "bin": {
-        "semver": "bin/semver.js"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
     "node_modules/shebang-command": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
@@ -7749,16 +7792,16 @@
       }
     },
     "node_modules/typescript-eslint": {
-      "version": "8.63.0",
-      "resolved": "https://registry.npmjs.org/typescript-eslint/-/typescript-eslint-8.63.0.tgz",
-      "integrity": "sha512-xgwXyzG4sK9ALkBxbyGkTMMOS+imnW65iPhxCQMK83KhxyoDNW7l+IDqEf9vMdoUidHpOoS967RCq4eMiTexwQ==",
+      "version": "8.64.0",
+      "resolved": "https://registry.npmjs.org/typescript-eslint/-/typescript-eslint-8.64.0.tgz",
+      "integrity": "sha512-0qg+pDNMnqYzqH9AnNK+39tejHvsShUOUUoRUgtnTGE7QuMZhiFDnozq8nHJVq+Wae6NMLKNWLg5WmkcC/ndyQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@typescript-eslint/eslint-plugin": "8.63.0",
-        "@typescript-eslint/parser": "8.63.0",
-        "@typescript-eslint/typescript-estree": "8.63.0",
-        "@typescript-eslint/utils": "8.63.0"
+        "@typescript-eslint/eslint-plugin": "8.64.0",
+        "@typescript-eslint/parser": "8.64.0",
+        "@typescript-eslint/typescript-estree": "8.64.0",
+        "@typescript-eslint/utils": "8.64.0"
       },
       "engines": {
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
@@ -8110,10 +8153,9 @@
       }
     },
     "node_modules/zod": {
-      "version": "4.4.3",
-      "resolved": "https://registry.npmjs.org/zod/-/zod-4.4.3.tgz",
-      "integrity": "sha512-ytENFjIJFl2UwYglde2jchW2Hwm4GJFLDiSXWdTrJQBIN9Fcyp7n4DhxJEiWNAJMV1/BqWfW/kkg71UDcHJyTQ==",
-      "dev": true,
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/zod/-/zod-4.4.1.tgz",
+      "integrity": "sha512-a6ENMBBGZBsnlSebQ/eKCguSBeGKSf4O7BPnqVPmYGtpBYI7VSqoVqw+QcB7kPRjbqPwhYTpFbVj/RqNz/CT0Q==",
       "license": "MIT",
       "funding": {
         "url": "https://github.com/sponsors/colinhacks"
diff --git a/package.json b/package.json
index a2ade93..ba80221 100644
--- a/package.json
+++ b/package.json
@@ -23,7 +23,7 @@
   "devDependencies": {
     "@tailwindcss/postcss": "^4",
     "@types/node": "^20",
-    "@types/react": "^19",
+    "@types/react": "^19.2.17",
     "@types/react-dom": "^19",
     "eslint": "^9",
     "eslint-config-next": "16.2.10",
diff --git a/storage.rules b/storage.rules
new file mode 100644
index 0000000..64086ae
--- /dev/null
+++ b/storage.rules
@@ -0,0 +1,9 @@
+rules_version = '2';
+service firebase.storage {
+  match /b/{bucket}/o {
+    // Users can only read and write to their own folder paths under users/{uid}
+    match /users/{uid}/{allPaths=**} {
+      allow read, write: if request.auth != null && request.auth.uid == uid;
+    }
+  }
+}

From c98576a431bc727e1c0c42ad6d33ea5510b1fe15 Mon Sep 17 00:00:00 2001
From: "Mateo, Noel John" <noelmateo126@gmail.com>
Date: Thu, 16 Jul 2026 04:22:12 +0800
Subject: [PATCH 10/22] quick fix

- pwa sucks in ios
---
 lib/auth.tsx | 52 +---------------------------------------------------
 1 file changed, 1 insertion(+), 51 deletions(-)

diff --git a/lib/auth.tsx b/lib/auth.tsx
index 3e34b8d..ac030c8 100644
--- a/lib/auth.tsx
+++ b/lib/auth.tsx
@@ -6,14 +6,11 @@ import {
   useEffect,
   useState,
   useCallback,
-  useRef,
   type ReactNode,
 } from "react";
 import {
   onAuthStateChanged,
   signInWithPopup,
-  signInWithRedirect,
-  getRedirectResult,
   signOut as firebaseSignOut,
   GoogleAuthProvider,
   browserPopupRedirectResolver,
@@ -93,23 +90,6 @@ function clearCachedSession(): void {
   }
 }
 
-/* ------------------------------------------------------------------ */
-/*  PWA standalone detection                                           */
-/* ------------------------------------------------------------------ */
-
-/**
- * Detects if the app is running in installed PWA / standalone mode.
- *
- * iOS Safari standalone (WKWebView) blocks `signInWithPopup`, so we
- * must fall back to `signInWithRedirect` when this returns `true`.
- */
-function isStandalonePWA(): boolean {
-  if (typeof window === "undefined") return false;
-  return (
-    window.matchMedia("(display-mode: standalone)").matches ||
-    (navigator as unknown as { standalone?: boolean }).standalone === true
-  );
-}
 
 /* ------------------------------------------------------------------ */
 /*  Context                                                            */
@@ -145,26 +125,6 @@ export function AuthProvider({ children }: { children: ReactNode }) {
     }
   }, []);
 
-  // Handle redirect result (iOS PWA standalone flow).
-  // Runs once on mount — if the user just returned from a signInWithRedirect,
-  // this resolves the pending credential and fires onAuthStateChanged.
-  const redirectHandled = useRef(false);
-  useEffect(() => {
-    if (redirectHandled.current) return;
-    redirectHandled.current = true;
-
-    getRedirectResult(getFirebaseAuth())
-      .then((result) => {
-        if (result?.user) {
-          console.log("[KeepCheck] Redirect sign-in resolved:", result.user.email);
-          saveToQuickLogin(result.user);
-        }
-      })
-      .catch((err) => {
-        console.warn("[KeepCheck] getRedirectResult error (non-fatal):", err);
-      });
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
 
   const saveToQuickLogin = useCallback((u: User) => {
     setQuickLoginAccounts((prev: QuickLoginAccount[]) => {
@@ -209,7 +169,7 @@ export function AuthProvider({ children }: { children: ReactNode }) {
     return unsubscribe;
   }, [saveToQuickLogin]);
 
-  // Sign in with Google — uses redirect on iOS PWA, popup everywhere else.
+  // Sign in with Google — always uses popup (iOS 16.4+ supports popups in PWAs).
   const signInWithGoogle = useCallback(async (email?: string) => {
     const provider = new GoogleAuthProvider();
     if (email) {
@@ -220,16 +180,6 @@ export function AuthProvider({ children }: { children: ReactNode }) {
 
     const auth = getFirebaseAuth();
 
-    if (isStandalonePWA()) {
-      // iOS standalone / installed PWA — popup is blocked by WKWebView.
-      // signInWithRedirect navigates away; getRedirectResult (above) resolves
-      // the credential when the app reloads after the redirect.
-      console.log("[KeepCheck] Standalone PWA detected — using signInWithRedirect");
-      await signInWithRedirect(auth, provider);
-      return; // page will navigate away
-    }
-
-    // Desktop / mobile browser — popup is fine.
     try {
       const result = await signInWithPopup(auth, provider, browserPopupRedirectResolver);
       saveToQuickLogin(result.user);

From b321b5839b40d815de5a778fa11cd3fc148896f0 Mon Sep 17 00:00:00 2001
From: "Mateo, Noel John" <noelmateo126@gmail.com>
Date: Thu, 16 Jul 2026 04:43:41 +0800
Subject: [PATCH 11/22] ios update

- it really sucks
---
 lib/auth.tsx | 83 +++++++++++++++++++++++++++++++++++++++-------------
 1 file changed, 63 insertions(+), 20 deletions(-)

diff --git a/lib/auth.tsx b/lib/auth.tsx
index ac030c8..af68313 100644
--- a/lib/auth.tsx
+++ b/lib/auth.tsx
@@ -6,14 +6,15 @@ import {
   useEffect,
   useState,
   useCallback,
+  useRef,
   type ReactNode,
 } from "react";
 import {
   onAuthStateChanged,
-  signInWithPopup,
+  signInWithRedirect,
+  getRedirectResult,
   signOut as firebaseSignOut,
   GoogleAuthProvider,
-  browserPopupRedirectResolver,
   type User,
 } from "firebase/auth";
 import { getFirebaseAuth } from "./firebase";
@@ -103,12 +104,36 @@ const AuthContext = createContext<AuthContextValue | null>(null);
 
 export function AuthProvider({ children }: { children: ReactNode }) {
   const [user, setUser] = useState<User | null>(null);
-  const [loading, setLoading] = useState(true);
   const [quickLoginAccounts, setQuickLoginAccounts] = useState<
     QuickLoginAccount[]
   >([]);
   const [cachedSession, setCachedSession] = useState<CachedSession | null>(null);
 
+  /*
+   * Loading-state strategy for signInWithRedirect:
+   *
+   * After a redirect round-trip (Google OAuth → back to app), the page fully
+   * remounts. Two async checks race on startup:
+   *   1. onAuthStateChanged — fires once Firebase restores (or doesn't find)
+   *      a persisted credential from IndexedDB.
+   *   2. getRedirectResult — resolves the pending redirect credential, if any.
+   *
+   * If we set `loading = false` as soon as *either* resolves, there's a window
+   * where AuthGuard sees `loading=false, user=null` and flashes the sign-in
+   * screen before the other check delivers the user. To prevent this, we gate
+   * `loading` behind BOTH checks completing.
+   */
+  const authStateResolved = useRef(false);
+  const redirectResultResolved = useRef(false);
+  const [loading, setLoading] = useState(true);
+
+  /** Only flip `loading` to false once both async checks have finished. */
+  const maybeFinishLoading = useCallback(() => {
+    if (authStateResolved.current && redirectResultResolved.current) {
+      setLoading(false);
+    }
+  }, []);
+
   // Load cached session + quick-login history from localStorage on mount.
   useEffect(() => {
     try {
@@ -125,7 +150,6 @@ export function AuthProvider({ children }: { children: ReactNode }) {
     }
   }, []);
 
-
   const saveToQuickLogin = useCallback((u: User) => {
     setQuickLoginAccounts((prev: QuickLoginAccount[]) => {
       const filtered = prev.filter((a: QuickLoginAccount) => a.uid !== u.uid);
@@ -148,11 +172,38 @@ export function AuthProvider({ children }: { children: ReactNode }) {
     });
   }, []);
 
+  // Resolve any pending redirect result (runs once on mount).
+  // After signInWithRedirect, the page reloads and this picks up the credential.
+  // On normal loads with no pending redirect, this resolves to null instantly.
+  const redirectHandled = useRef(false);
+  useEffect(() => {
+    if (redirectHandled.current) return;
+    redirectHandled.current = true;
+
+    getRedirectResult(getFirebaseAuth())
+      .then((result) => {
+        if (result?.user) {
+          console.log("[KeepCheck] Redirect sign-in resolved:", result.user.email);
+          saveToQuickLogin(result.user);
+        }
+      })
+      .catch((err) => {
+        // Non-fatal — this fires on every mount, including normal loads.
+        console.warn("[KeepCheck] getRedirectResult error (non-fatal):", err);
+      })
+      .finally(() => {
+        redirectResultResolved.current = true;
+        maybeFinishLoading();
+      });
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
   // Listen to Firebase auth state.
   useEffect(() => {
     const unsubscribe = onAuthStateChanged(getFirebaseAuth(), (firebaseUser) => {
       setUser(firebaseUser);
-      setLoading(false);
+      authStateResolved.current = true;
+      maybeFinishLoading();
 
       if (firebaseUser) {
         saveToQuickLogin(firebaseUser);
@@ -167,9 +218,11 @@ export function AuthProvider({ children }: { children: ReactNode }) {
       }
     });
     return unsubscribe;
-  }, [saveToQuickLogin]);
+  }, [saveToQuickLogin, maybeFinishLoading]);
 
-  // Sign in with Google — always uses popup (iOS 16.4+ supports popups in PWAs).
+  // Sign in with Google — uses redirect flow for iOS PWA (standalone WKWebView)
+  // compatibility. signInWithRedirect navigates away to Google's OAuth page;
+  // the getRedirectResult useEffect above catches the credential on reload.
   const signInWithGoogle = useCallback(async (email?: string) => {
     const provider = new GoogleAuthProvider();
     if (email) {
@@ -179,19 +232,9 @@ export function AuthProvider({ children }: { children: ReactNode }) {
     }
 
     const auth = getFirebaseAuth();
-
-    try {
-      const result = await signInWithPopup(auth, provider, browserPopupRedirectResolver);
-      saveToQuickLogin(result.user);
-    } catch (error: unknown) {
-      // User closed popup — not an error.
-      const code = (error as { code?: string })?.code;
-      if (code !== "auth/popup-closed-by-user" && code !== "auth/cancelled-popup-request") {
-        console.error("[KeepCheck] Google sign-in failed:", error);
-        throw error;
-      }
-    }
-  }, [saveToQuickLogin]);
+    // Page will navigate away to Google OAuth — no result to handle here.
+    await signInWithRedirect(auth, provider);
+  }, []);
 
   // Sign out.
   const signOut = useCallback(async () => {

From b27cc249dfbe63532bad0cafc854f1c7ed74140b Mon Sep 17 00:00:00 2001
From: "Mateo, Noel John" <noelmateo126@gmail.com>
Date: Thu, 16 Jul 2026 05:06:23 +0800
Subject: [PATCH 12/22] gusto ko na matulog

- stop it ios pls
---
 lib/auth.tsx    | 63 +++++++++++++++++++++++++++++++++++++++++++------
 lib/firebase.ts |  2 ++
 2 files changed, 58 insertions(+), 7 deletions(-)

diff --git a/lib/auth.tsx b/lib/auth.tsx
index af68313..309d9dc 100644
--- a/lib/auth.tsx
+++ b/lib/auth.tsx
@@ -11,10 +11,12 @@ import {
 } from "react";
 import {
   onAuthStateChanged,
+  signInWithPopup,
   signInWithRedirect,
   getRedirectResult,
   signOut as firebaseSignOut,
   GoogleAuthProvider,
+  browserPopupRedirectResolver,
   type User,
 } from "firebase/auth";
 import { getFirebaseAuth } from "./firebase";
@@ -92,6 +94,27 @@ function clearCachedSession(): void {
 }
 
 
+/* ------------------------------------------------------------------ */
+/*  PWA standalone detection                                           */
+/* ------------------------------------------------------------------ */
+
+/**
+ * Detects if the app is running as an installed / standalone PWA.
+ *
+ * In standalone WKWebView on iOS, signInWithPopup cannot open a separate
+ * window — so we must use signInWithRedirect there. In all other contexts
+ * (desktop browsers, regular Safari tabs) popup works and is more reliable
+ * because redirect-based auth is blocked by Safari ITP and Chrome's
+ * third-party storage partitioning.
+ */
+function isStandalonePWA(): boolean {
+  if (typeof window === "undefined") return false;
+  return (
+    window.matchMedia("(display-mode: standalone)").matches ||
+    (window.navigator as unknown as { standalone?: boolean }).standalone === true
+  );
+}
+
 /* ------------------------------------------------------------------ */
 /*  Context                                                            */
 /* ------------------------------------------------------------------ */
@@ -195,7 +218,7 @@ export function AuthProvider({ children }: { children: ReactNode }) {
         redirectResultResolved.current = true;
         maybeFinishLoading();
       });
-  // eslint-disable-next-line react-hooks/exhaustive-deps
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   // Listen to Firebase auth state.
@@ -220,9 +243,16 @@ export function AuthProvider({ children }: { children: ReactNode }) {
     return unsubscribe;
   }, [saveToQuickLogin, maybeFinishLoading]);
 
-  // Sign in with Google — uses redirect flow for iOS PWA (standalone WKWebView)
-  // compatibility. signInWithRedirect navigates away to Google's OAuth page;
-  // the getRedirectResult useEffect above catches the credential on reload.
+  // Sign in with Google.
+  //
+  // Uses signInWithPopup in normal browser tabs (desktop, mobile Safari, Chrome)
+  // because Firebase's redirect flow is broken by Safari ITP and Chrome's
+  // third-party storage partitioning (the auth relay iframe gets blocked).
+  //
+  // Uses signInWithRedirect ONLY in the installed standalone PWA, where
+  // WKWebView cannot host popup windows at all. The getRedirectResult()
+  // useEffect above handles the credential when the page reloads after
+  // the redirect round-trip.
   const signInWithGoogle = useCallback(async (email?: string) => {
     const provider = new GoogleAuthProvider();
     if (email) {
@@ -232,9 +262,28 @@ export function AuthProvider({ children }: { children: ReactNode }) {
     }
 
     const auth = getFirebaseAuth();
-    // Page will navigate away to Google OAuth — no result to handle here.
-    await signInWithRedirect(auth, provider);
-  }, []);
+
+    if (isStandalonePWA()) {
+      // Standalone PWA (iOS home screen) — popup is blocked by WKWebView.
+      // Page navigates away; getRedirectResult() resolves the credential on reload.
+      console.log("[KeepCheck] Standalone PWA detected — using signInWithRedirect");
+      await signInWithRedirect(auth, provider, browserPopupRedirectResolver);
+      return; // page will navigate away
+    }
+
+    // Normal browser tab — popup works reliably here.
+    try {
+      const result = await signInWithPopup(auth, provider, browserPopupRedirectResolver);
+      saveToQuickLogin(result.user);
+    } catch (error: unknown) {
+      // User closed the popup — not a real error.
+      const code = (error as { code?: string })?.code;
+      if (code !== "auth/popup-closed-by-user" && code !== "auth/cancelled-popup-request") {
+        console.error("[KeepCheck] Google sign-in failed:", error);
+        throw error;
+      }
+    }
+  }, [saveToQuickLogin]);
 
   // Sign out.
   const signOut = useCallback(async () => {
diff --git a/lib/firebase.ts b/lib/firebase.ts
index a1bcf6b..9bcd7b8 100644
--- a/lib/firebase.ts
+++ b/lib/firebase.ts
@@ -4,6 +4,7 @@ import {
   indexedDBLocalPersistence,
   browserLocalPersistence,
   initializeAuth,
+  browserPopupRedirectResolver,
   type Auth,
 } from "firebase/auth";
 import {
@@ -54,6 +55,7 @@ export function getFirebaseAuth(): Auth {
   try {
     _auth = initializeAuth(app, {
       persistence: [indexedDBLocalPersistence, browserLocalPersistence],
+      popupRedirectResolver: browserPopupRedirectResolver,
     });
   } catch {
     // Already initialised (hot-reload) — use existing instance.

From e5645be736d876e0aa5f3250b31aebbf8a385716 Mon Sep 17 00:00:00 2001
From: "Mateo, Noel John" <noelmateo126@gmail.com>
Date: Thu, 16 Jul 2026 05:22:07 +0800
Subject: [PATCH 13/22] last na haha

- pls stop na
---
 app/login/page.tsx | 114 ++++++++++++++++++++++++++++++---------------
 lib/auth.tsx       |  40 ++++++++--------
 2 files changed, 97 insertions(+), 57 deletions(-)

diff --git a/app/login/page.tsx b/app/login/page.tsx
index a5eac72..88f91d3 100644
--- a/app/login/page.tsx
+++ b/app/login/page.tsx
@@ -71,11 +71,14 @@ function QuickLoginRow({
 /*  Login page                                                         */
 /* ------------------------------------------------------------------ */
 export default function LoginPage() {
-  const { user, loading, signInWithGoogle, quickLoginAccounts } = useAuth();
+  const { user, loading, signInWithGoogle, quickLoginAccounts, standalonePWASignInBlocked } = useAuth();
   const router = useRouter();
   const [signingIn, setSigningIn] = useState(false);
   const [error, setError] = useState<string | null>(null);
 
+  /** The app's web URL, used in the standalone PWA guidance message. */
+  const APP_URL = process.env.NEXT_PUBLIC_APP_URL ?? window.location.origin;
+
   // Redirect if already logged in.
   useEffect(() => {
     if (!loading && user) {
@@ -148,44 +151,81 @@ export default function LoginPage() {
           </p>
         </div>
 
-        {/* Google sign-in button */}
-        <button
-          type="button"
-          onClick={() => handleSignIn()}
-          disabled={signingIn}
-          className="neu-raised group flex w-full items-center justify-center gap-3 rounded-2xl px-6 py-4 text-sm font-semibold text-text-primary transition-all duration-300 hover:scale-[1.02] active:scale-[0.97] active:shadow-neu-inset disabled:opacity-50 cursor-pointer"
-        >
-          {signingIn ? (
-            <div className="h-5 w-5 animate-spin rounded-full border-2 border-text-secondary/30 border-t-accent" />
-          ) : (
-            <GoogleIcon />
-          )}
-          {signingIn ? "Signing in…" : "Continue with Google"}
-        </button>
-
-        {/* Error message */}
-        {error && (
-          <p className="mt-3 text-center text-xs text-red-500 animate-page-enter">
-            {error}
-          </p>
-        )}
-
-        {/* Quick login history */}
-        {quickLoginAccounts.length > 0 && (
-          <div className="mt-8 animate-page-enter" style={{ animationDelay: "150ms" }}>
-            <p className="mb-3 text-center text-xs font-medium uppercase tracking-wider text-text-secondary">
-              Recent accounts
-            </p>
-            <div className="flex flex-col gap-2.5">
-               {quickLoginAccounts.map((account) => (
-                <QuickLoginRow
-                  key={account.uid}
-                  account={account}
-                  onClick={() => handleSignIn(account.email || undefined)}
-                />
-              ))}
+        {/* Sign-in area */}
+        {standalonePWASignInBlocked ? (
+          /* ---- Standalone PWA dead-end guidance ---- */
+          <div className="neu-raised rounded-2xl p-5 text-center">
+            <div className="mx-auto mb-3 flex h-12 w-12 items-center justify-center rounded-full bg-amber-500/15">
+              <svg className="h-6 w-6 text-amber-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+                <path strokeLinecap="round" strokeLinejoin="round" d="M12 9v2m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+              </svg>
             </div>
+            <h2 className="text-sm font-semibold text-text-primary mb-2">
+              Sign in via Safari first
+            </h2>
+            <p className="text-xs text-text-secondary leading-relaxed mb-4">
+              Sign-in isn&apos;t available directly from the installed app yet.
+              Open the link below in <strong>Safari</strong>, sign in there once, then
+              reopen KeepCheck from your home screen &mdash; you&apos;ll be logged in automatically.
+            </p>
+            <a
+              href={APP_URL}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="inline-flex items-center gap-1.5 rounded-xl bg-accent/10 px-4 py-2.5 text-xs font-semibold text-accent transition-colors hover:bg-accent/20"
+            >
+              <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+                <path strokeLinecap="round" strokeLinejoin="round" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
+              </svg>
+              Open in Safari
+            </a>
+            <p className="mt-3 text-[10px] text-text-secondary/50">
+              {APP_URL}
+            </p>
           </div>
+        ) : (
+          /* ---- Normal sign-in flow ---- */
+          <>
+            {/* Google sign-in button */}
+            <button
+              type="button"
+              onClick={() => handleSignIn()}
+              disabled={signingIn}
+              className="neu-raised group flex w-full items-center justify-center gap-3 rounded-2xl px-6 py-4 text-sm font-semibold text-text-primary transition-all duration-300 hover:scale-[1.02] active:scale-[0.97] active:shadow-neu-inset disabled:opacity-50 cursor-pointer"
+            >
+              {signingIn ? (
+                <div className="h-5 w-5 animate-spin rounded-full border-2 border-text-secondary/30 border-t-accent" />
+              ) : (
+                <GoogleIcon />
+              )}
+              {signingIn ? "Signing in\u2026" : "Continue with Google"}
+            </button>
+
+            {/* Error message */}
+            {error && (
+              <p className="mt-3 text-center text-xs text-red-500 animate-page-enter">
+                {error}
+              </p>
+            )}
+
+            {/* Quick login history */}
+            {quickLoginAccounts.length > 0 && (
+              <div className="mt-8 animate-page-enter" style={{ animationDelay: "150ms" }}>
+                <p className="mb-3 text-center text-xs font-medium uppercase tracking-wider text-text-secondary">
+                  Recent accounts
+                </p>
+                <div className="flex flex-col gap-2.5">
+                   {quickLoginAccounts.map((account) => (
+                    <QuickLoginRow
+                      key={account.uid}
+                      account={account}
+                      onClick={() => handleSignIn(account.email || undefined)}
+                    />
+                  ))}
+                </div>
+              </div>
+            )}
+          </>
         )}
 
         {/* Footer */}
diff --git a/lib/auth.tsx b/lib/auth.tsx
index 309d9dc..feb4b5c 100644
--- a/lib/auth.tsx
+++ b/lib/auth.tsx
@@ -12,7 +12,6 @@ import {
 import {
   onAuthStateChanged,
   signInWithPopup,
-  signInWithRedirect,
   getRedirectResult,
   signOut as firebaseSignOut,
   GoogleAuthProvider,
@@ -49,6 +48,13 @@ interface AuthContextValue {
   quickLoginAccounts: QuickLoginAccount[];
   /** Cached session from localStorage — available instantly, even offline. */
   cachedSession: CachedSession | null;
+  /**
+   * True when the app is running as a standalone PWA and there is no existing
+   * session (user or cachedSession). In this state, sign-in cannot succeed
+   * because both popup (blocked by WKWebView) and redirect (blocked by ITP)
+   * fail. The login UI should show guidance to sign in via Safari instead.
+   */
+  standalonePWASignInBlocked: boolean;
 }
 
 const QUICK_LOGIN_KEY = "keepcheck-quick-login";
@@ -243,16 +249,13 @@ export function AuthProvider({ children }: { children: ReactNode }) {
     return unsubscribe;
   }, [saveToQuickLogin, maybeFinishLoading]);
 
-  // Sign in with Google.
-  //
-  // Uses signInWithPopup in normal browser tabs (desktop, mobile Safari, Chrome)
-  // because Firebase's redirect flow is broken by Safari ITP and Chrome's
-  // third-party storage partitioning (the auth relay iframe gets blocked).
+  // Sign in with Google — popup flow only.
   //
-  // Uses signInWithRedirect ONLY in the installed standalone PWA, where
-  // WKWebView cannot host popup windows at all. The getRedirectResult()
-  // useEffect above handles the credential when the page reloads after
-  // the redirect round-trip.
+  // signInWithRedirect is NOT used: it fails silently in standalone PWAs due to
+  // Safari ITP blocking the cross-origin authDomain iframe, and also fails in
+  // normal browsers due to third-party storage partitioning. The standalone PWA
+  // dead-end is handled at the UI level (standalonePWASignInBlocked flag guides
+  // the user to sign in via Safari instead).
   const signInWithGoogle = useCallback(async (email?: string) => {
     const provider = new GoogleAuthProvider();
     if (email) {
@@ -263,15 +266,6 @@ export function AuthProvider({ children }: { children: ReactNode }) {
 
     const auth = getFirebaseAuth();
 
-    if (isStandalonePWA()) {
-      // Standalone PWA (iOS home screen) — popup is blocked by WKWebView.
-      // Page navigates away; getRedirectResult() resolves the credential on reload.
-      console.log("[KeepCheck] Standalone PWA detected — using signInWithRedirect");
-      await signInWithRedirect(auth, provider, browserPopupRedirectResolver);
-      return; // page will navigate away
-    }
-
-    // Normal browser tab — popup works reliably here.
     try {
       const result = await signInWithPopup(auth, provider, browserPopupRedirectResolver);
       saveToQuickLogin(result.user);
@@ -304,9 +298,15 @@ export function AuthProvider({ children }: { children: ReactNode }) {
     setUser(null);
   }, []);
 
+  // Standalone PWA dead-end detection: sign-in cannot work in this environment
+  // (popup blocked by WKWebView, redirect blocked by ITP). The user must sign
+  // in via a normal Safari tab first — the shared origin storage means the
+  // session will be available when the PWA is reopened.
+  const standalonePWASignInBlocked = !loading && isStandalonePWA() && !user && !cachedSession;
+
   return (
     <AuthContext.Provider
-      value={{ user, loading, signInWithGoogle, signOut, quickLoginAccounts, cachedSession }}
+      value={{ user, loading, signInWithGoogle, signOut, quickLoginAccounts, cachedSession, standalonePWASignInBlocked }}
     >
       {children}
     </AuthContext.Provider>

From 39a5bd11cf6d2969b51d1bcaeb879f3e6b918377 Mon Sep 17 00:00:00 2001
From: "Mateo, Noel John" <noelmateo126@gmail.com>
Date: Thu, 16 Jul 2026 05:28:44 +0800
Subject: [PATCH 14/22] joke

- ito na talaga
---
 app/login/page.tsx | 11 ++++++++---
 lib/auth.tsx       |  9 ++++++++-
 2 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/app/login/page.tsx b/app/login/page.tsx
index 88f91d3..f109886 100644
--- a/app/login/page.tsx
+++ b/app/login/page.tsx
@@ -77,7 +77,12 @@ export default function LoginPage() {
   const [error, setError] = useState<string | null>(null);
 
   /** The app's web URL, used in the standalone PWA guidance message. */
-  const APP_URL = process.env.NEXT_PUBLIC_APP_URL ?? window.location.origin;
+  const [appUrl, setAppUrl] = useState(process.env.NEXT_PUBLIC_APP_URL ?? "");
+  useEffect(() => {
+    if (!process.env.NEXT_PUBLIC_APP_URL) {
+      setAppUrl(window.location.origin);
+    }
+  }, []);
 
   // Redirect if already logged in.
   useEffect(() => {
@@ -169,7 +174,7 @@ export default function LoginPage() {
               reopen KeepCheck from your home screen &mdash; you&apos;ll be logged in automatically.
             </p>
             <a
-              href={APP_URL}
+              href={appUrl}
               target="_blank"
               rel="noopener noreferrer"
               className="inline-flex items-center gap-1.5 rounded-xl bg-accent/10 px-4 py-2.5 text-xs font-semibold text-accent transition-colors hover:bg-accent/20"
@@ -180,7 +185,7 @@ export default function LoginPage() {
               Open in Safari
             </a>
             <p className="mt-3 text-[10px] text-text-secondary/50">
-              {APP_URL}
+              {appUrl}
             </p>
           </div>
         ) : (
diff --git a/lib/auth.tsx b/lib/auth.tsx
index feb4b5c..d026643 100644
--- a/lib/auth.tsx
+++ b/lib/auth.tsx
@@ -138,6 +138,13 @@ export function AuthProvider({ children }: { children: ReactNode }) {
   >([]);
   const [cachedSession, setCachedSession] = useState<CachedSession | null>(null);
 
+  // Standalone PWA detection — must be in useState+useEffect to avoid
+  // accessing `window` during SSR/prerendering (where it doesn't exist).
+  const [isStandalone, setIsStandalone] = useState(false);
+  useEffect(() => {
+    setIsStandalone(isStandalonePWA());
+  }, []);
+
   /*
    * Loading-state strategy for signInWithRedirect:
    *
@@ -302,7 +309,7 @@ export function AuthProvider({ children }: { children: ReactNode }) {
   // (popup blocked by WKWebView, redirect blocked by ITP). The user must sign
   // in via a normal Safari tab first — the shared origin storage means the
   // session will be available when the PWA is reopened.
-  const standalonePWASignInBlocked = !loading && isStandalonePWA() && !user && !cachedSession;
+  const standalonePWASignInBlocked = !loading && isStandalone && !user && !cachedSession;
 
   return (
     <AuthContext.Provider

From 67f18ec9618382012ec8fb079f6291800b3a0817 Mon Sep 17 00:00:00 2001
From: "Mateo, Noel John" <125169838+NoLmuna@users.noreply.github.com>
Date: Fri, 17 Jul 2026 01:42:45 +0800
Subject: [PATCH 15/22] please work

- huhu
---
 app/api/auth/[...nextauth]/route.ts |    3 +
 app/api/firebase-token/route.ts     |   79 ++
 app/login/page.tsx                  |  119 +-
 auth.ts                             |   61 +
 lib/auth.tsx                        |  230 ++--
 lib/firebaseAdmin.ts                |   61 +
 package-lock.json                   | 1886 ++++++++++++++++++++++++++-
 package.json                        |    2 +
 8 files changed, 2199 insertions(+), 242 deletions(-)
 create mode 100644 app/api/auth/[...nextauth]/route.ts
 create mode 100644 app/api/firebase-token/route.ts
 create mode 100644 auth.ts
 create mode 100644 lib/firebaseAdmin.ts

diff --git a/app/api/auth/[...nextauth]/route.ts b/app/api/auth/[...nextauth]/route.ts
new file mode 100644
index 0000000..86c9f3d
--- /dev/null
+++ b/app/api/auth/[...nextauth]/route.ts
@@ -0,0 +1,3 @@
+import { handlers } from "@/auth";
+
+export const { GET, POST } = handlers;
diff --git a/app/api/firebase-token/route.ts b/app/api/firebase-token/route.ts
new file mode 100644
index 0000000..a7bfea4
--- /dev/null
+++ b/app/api/firebase-token/route.ts
@@ -0,0 +1,79 @@
+import { NextResponse } from "next/server";
+import { auth } from "@/auth";
+import { getAdminAuth } from "@/lib/firebaseAdmin";
+
+/**
+ * POST /api/firebase-token
+ *
+ * UID-Continuity Bridge: Converts a NextAuth session → Firebase custom token.
+ *
+ * Flow:
+ *   1. Verify the caller has a valid NextAuth session.
+ *   2. Extract email from the session.
+ *   3. Look up the EXISTING Firebase user by email (getUserByEmail).
+ *      - If found → use that uid.  This is CRITICAL: existing Firestore data
+ *        (spots, images, etc.) is scoped to the uid that Firebase originally
+ *        generated for this Google account.  If we created a new uid instead,
+ *        all existing data would be orphaned and invisible to the user.
+ *      - If NOT found → this is a genuinely new user who has never signed in.
+ *        Create a new Firebase user (createUser) and use the resulting uid.
+ *   4. Mint a custom token for that uid and return it.
+ *
+ * The client calls signInWithCustomToken(auth, customToken) to establish
+ * the Firebase session, which populates Firestore security-rules' request.auth.
+ */
+export async function POST() {
+  // 1. Verify NextAuth session
+  const session = await auth();
+  if (!session?.user?.email) {
+    return NextResponse.json(
+      { error: "Not authenticated" },
+      { status: 401 }
+    );
+  }
+
+  const { email, name, image } = session.user;
+  const adminAuth = getAdminAuth();
+
+  try {
+    let uid: string;
+
+    // 2. Look up existing Firebase user by email FIRST.
+    //
+    // WHY THIS MATTERS:
+    // Firebase Auth originally assigned a uid when this user first signed in
+    // via signInWithPopup/signInWithRedirect. All their Firestore documents
+    // (users/{uid}/spots/...) and Storage paths are keyed to that uid.
+    // If we skip this lookup and always call createUser(), the new user record
+    // gets a DIFFERENT uid, and every existing spot/image becomes unreachable.
+    try {
+      const existingUser = await adminAuth.getUserByEmail(email);
+      uid = existingUser.uid;
+    } catch (lookupError: unknown) {
+      // auth/user-not-found means this is a genuinely new user.
+      const code = (lookupError as { code?: string })?.code;
+      if (code === "auth/user-not-found") {
+        const newUser = await adminAuth.createUser({
+          email,
+          displayName: name ?? undefined,
+          photoURL: image ?? undefined,
+        });
+        uid = newUser.uid;
+      } else {
+        // Unexpected error — re-throw.
+        throw lookupError;
+      }
+    }
+
+    // 3. Mint custom token
+    const customToken = await adminAuth.createCustomToken(uid);
+
+    return NextResponse.json({ customToken });
+  } catch (error) {
+    console.error("[firebase-token] Error minting custom token:", error);
+    return NextResponse.json(
+      { error: "Failed to create Firebase token" },
+      { status: 500 }
+    );
+  }
+}
diff --git a/app/login/page.tsx b/app/login/page.tsx
index f109886..bae900f 100644
--- a/app/login/page.tsx
+++ b/app/login/page.tsx
@@ -71,19 +71,11 @@ function QuickLoginRow({
 /*  Login page                                                         */
 /* ------------------------------------------------------------------ */
 export default function LoginPage() {
-  const { user, loading, signInWithGoogle, quickLoginAccounts, standalonePWASignInBlocked } = useAuth();
+  const { user, loading, signInWithGoogle, quickLoginAccounts } = useAuth();
   const router = useRouter();
   const [signingIn, setSigningIn] = useState(false);
   const [error, setError] = useState<string | null>(null);
 
-  /** The app's web URL, used in the standalone PWA guidance message. */
-  const [appUrl, setAppUrl] = useState(process.env.NEXT_PUBLIC_APP_URL ?? "");
-  useEffect(() => {
-    if (!process.env.NEXT_PUBLIC_APP_URL) {
-      setAppUrl(window.location.origin);
-    }
-  }, []);
-
   // Redirect if already logged in.
   useEffect(() => {
     if (!loading && user) {
@@ -156,81 +148,44 @@ export default function LoginPage() {
           </p>
         </div>
 
-        {/* Sign-in area */}
-        {standalonePWASignInBlocked ? (
-          /* ---- Standalone PWA dead-end guidance ---- */
-          <div className="neu-raised rounded-2xl p-5 text-center">
-            <div className="mx-auto mb-3 flex h-12 w-12 items-center justify-center rounded-full bg-amber-500/15">
-              <svg className="h-6 w-6 text-amber-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
-                <path strokeLinecap="round" strokeLinejoin="round" d="M12 9v2m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
-              </svg>
-            </div>
-            <h2 className="text-sm font-semibold text-text-primary mb-2">
-              Sign in via Safari first
-            </h2>
-            <p className="text-xs text-text-secondary leading-relaxed mb-4">
-              Sign-in isn&apos;t available directly from the installed app yet.
-              Open the link below in <strong>Safari</strong>, sign in there once, then
-              reopen KeepCheck from your home screen &mdash; you&apos;ll be logged in automatically.
-            </p>
-            <a
-              href={appUrl}
-              target="_blank"
-              rel="noopener noreferrer"
-              className="inline-flex items-center gap-1.5 rounded-xl bg-accent/10 px-4 py-2.5 text-xs font-semibold text-accent transition-colors hover:bg-accent/20"
-            >
-              <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
-                <path strokeLinecap="round" strokeLinejoin="round" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
-              </svg>
-              Open in Safari
-            </a>
-            <p className="mt-3 text-[10px] text-text-secondary/50">
-              {appUrl}
-            </p>
-          </div>
-        ) : (
-          /* ---- Normal sign-in flow ---- */
-          <>
-            {/* Google sign-in button */}
-            <button
-              type="button"
-              onClick={() => handleSignIn()}
-              disabled={signingIn}
-              className="neu-raised group flex w-full items-center justify-center gap-3 rounded-2xl px-6 py-4 text-sm font-semibold text-text-primary transition-all duration-300 hover:scale-[1.02] active:scale-[0.97] active:shadow-neu-inset disabled:opacity-50 cursor-pointer"
-            >
-              {signingIn ? (
-                <div className="h-5 w-5 animate-spin rounded-full border-2 border-text-secondary/30 border-t-accent" />
-              ) : (
-                <GoogleIcon />
-              )}
-              {signingIn ? "Signing in\u2026" : "Continue with Google"}
-            </button>
+        {/* Google sign-in button */}
+        <button
+          type="button"
+          onClick={() => handleSignIn()}
+          disabled={signingIn}
+          className="neu-raised group flex w-full items-center justify-center gap-3 rounded-2xl px-6 py-4 text-sm font-semibold text-text-primary transition-all duration-300 hover:scale-[1.02] active:scale-[0.97] active:shadow-neu-inset disabled:opacity-50 cursor-pointer"
+        >
+          {signingIn ? (
+            <div className="h-5 w-5 animate-spin rounded-full border-2 border-text-secondary/30 border-t-accent" />
+          ) : (
+            <GoogleIcon />
+          )}
+          {signingIn ? "Signing in\u2026" : "Continue with Google"}
+        </button>
 
-            {/* Error message */}
-            {error && (
-              <p className="mt-3 text-center text-xs text-red-500 animate-page-enter">
-                {error}
-              </p>
-            )}
+        {/* Error message */}
+        {error && (
+          <p className="mt-3 text-center text-xs text-red-500 animate-page-enter">
+            {error}
+          </p>
+        )}
 
-            {/* Quick login history */}
-            {quickLoginAccounts.length > 0 && (
-              <div className="mt-8 animate-page-enter" style={{ animationDelay: "150ms" }}>
-                <p className="mb-3 text-center text-xs font-medium uppercase tracking-wider text-text-secondary">
-                  Recent accounts
-                </p>
-                <div className="flex flex-col gap-2.5">
-                   {quickLoginAccounts.map((account) => (
-                    <QuickLoginRow
-                      key={account.uid}
-                      account={account}
-                      onClick={() => handleSignIn(account.email || undefined)}
-                    />
-                  ))}
-                </div>
-              </div>
-            )}
-          </>
+        {/* Quick login history */}
+        {quickLoginAccounts.length > 0 && (
+          <div className="mt-8 animate-page-enter" style={{ animationDelay: "150ms" }}>
+            <p className="mb-3 text-center text-xs font-medium uppercase tracking-wider text-text-secondary">
+              Recent accounts
+            </p>
+            <div className="flex flex-col gap-2.5">
+               {quickLoginAccounts.map((account) => (
+                <QuickLoginRow
+                  key={account.uid}
+                  account={account}
+                  onClick={() => handleSignIn(account.email ?? undefined)}
+                />
+              ))}
+            </div>
+          </div>
         )}
 
         {/* Footer */}
diff --git a/auth.ts b/auth.ts
new file mode 100644
index 0000000..0f03b22
--- /dev/null
+++ b/auth.ts
@@ -0,0 +1,61 @@
+import NextAuth from "next-auth";
+import Google from "next-auth/providers/google";
+
+/**
+ * Auth.js v5 (NextAuth) configuration.
+ *
+ * NextAuth handles ONLY the Google OAuth handshake. It does NOT manage a user
+ * database — we use JWT sessions so NextAuth never needs its own DB tables.
+ * After NextAuth confirms the user's Google identity, the client exchanges the
+ * session for a Firebase custom token via /api/firebase-token, so Firebase Auth
+ * + Firestore remain the sole account/data backend.
+ *
+ * MANUAL SETUP REQUIRED:
+ * 1. Create a Google OAuth Client ID + Secret in Google Cloud Console
+ *    (separate from Firebase's auto-created one).
+ *    Authorized redirect URIs:
+ *      - http://localhost:3000/api/auth/callback/google  (dev)
+ *      - https://<your-vercel-domain>/api/auth/callback/google  (prod)
+ * 2. Set env vars: AUTH_GOOGLE_ID, AUTH_GOOGLE_SECRET, AUTH_SECRET
+ *    (AUTH_SECRET can be generated via `npx auth secret`)
+ */
+export const { handlers, auth, signIn, signOut } = NextAuth({
+  providers: [
+    Google({
+      clientId: process.env.AUTH_GOOGLE_ID,
+      clientSecret: process.env.AUTH_GOOGLE_SECRET,
+    }),
+  ],
+
+  // JWT session strategy — no database adapter needed.
+  session: { strategy: "jwt" },
+
+  // Redirect auth errors to our login page instead of NextAuth's built-in
+  // error page (which was returning a 500).
+  pages: {
+    signIn: "/login",
+    error: "/login",
+  },
+
+  callbacks: {
+    /** Persist user info from the OAuth profile into the JWT. */
+    async jwt({ token, profile }) {
+      if (profile) {
+        token.email = profile.email;
+        token.name = profile.name;
+        token.picture = profile.picture;
+      }
+      return token;
+    },
+
+    /** Expose the user info from the JWT in the session object. */
+    async session({ session, token }) {
+      if (session.user) {
+        session.user.email = token.email as string;
+        session.user.name = token.name as string;
+        session.user.image = token.picture as string;
+      }
+      return session;
+    },
+  },
+});
diff --git a/lib/auth.tsx b/lib/auth.tsx
index d026643..2083ec1 100644
--- a/lib/auth.tsx
+++ b/lib/auth.tsx
@@ -11,13 +11,16 @@ import {
 } from "react";
 import {
   onAuthStateChanged,
-  signInWithPopup,
-  getRedirectResult,
+  signInWithCustomToken,
   signOut as firebaseSignOut,
-  GoogleAuthProvider,
-  browserPopupRedirectResolver,
   type User,
 } from "firebase/auth";
+import {
+  signIn as nextAuthSignIn,
+  signOut as nextAuthSignOut,
+  useSession,
+  SessionProvider,
+} from "next-auth/react";
 import { getFirebaseAuth } from "./firebase";
 
 /* ------------------------------------------------------------------ */
@@ -48,13 +51,6 @@ interface AuthContextValue {
   quickLoginAccounts: QuickLoginAccount[];
   /** Cached session from localStorage — available instantly, even offline. */
   cachedSession: CachedSession | null;
-  /**
-   * True when the app is running as a standalone PWA and there is no existing
-   * session (user or cachedSession). In this state, sign-in cannot succeed
-   * because both popup (blocked by WKWebView) and redirect (blocked by ITP)
-   * fail. The login UI should show guidance to sign in via Safari instead.
-   */
-  standalonePWASignInBlocked: boolean;
 }
 
 const QUICK_LOGIN_KEY = "keepcheck-quick-login";
@@ -99,76 +95,50 @@ function clearCachedSession(): void {
   }
 }
 
+/* ------------------------------------------------------------------ */
+/*  Context                                                            */
+/* ------------------------------------------------------------------ */
+
+const AuthContext = createContext<AuthContextValue | null>(null);
 
 /* ------------------------------------------------------------------ */
-/*  PWA standalone detection                                           */
+/*  Provider (outer shell)                                             */
+/*                                                                     */
+/*  SessionProvider must wrap AuthProviderInner so that useSession()   */
+/*  inside AuthProviderInner is a valid descendant of the provider.    */
+/*  A component cannot render SessionProvider and also call            */
+/*  useSession() in the same function body — React context requires    */
+/*  the consumer to be a child in the tree.                            */
 /* ------------------------------------------------------------------ */
 
-/**
- * Detects if the app is running as an installed / standalone PWA.
- *
- * In standalone WKWebView on iOS, signInWithPopup cannot open a separate
- * window — so we must use signInWithRedirect there. In all other contexts
- * (desktop browsers, regular Safari tabs) popup works and is more reliable
- * because redirect-based auth is blocked by Safari ITP and Chrome's
- * third-party storage partitioning.
- */
-function isStandalonePWA(): boolean {
-  if (typeof window === "undefined") return false;
+export function AuthProvider({ children }: { children: ReactNode }) {
   return (
-    window.matchMedia("(display-mode: standalone)").matches ||
-    (window.navigator as unknown as { standalone?: boolean }).standalone === true
+    <SessionProvider>
+      <AuthProviderInner>{children}</AuthProviderInner>
+    </SessionProvider>
   );
 }
 
 /* ------------------------------------------------------------------ */
-/*  Context                                                            */
+/*  Provider (inner — has access to useSession)                        */
 /* ------------------------------------------------------------------ */
 
-const AuthContext = createContext<AuthContextValue | null>(null);
-
-/* ------------------------------------------------------------------ */
-/*  Provider                                                           */
-/* ------------------------------------------------------------------ */
+function AuthProviderInner({ children }: { children: ReactNode }) {
+  const { data: nextAuthSession, status: nextAuthStatus } = useSession();
 
-export function AuthProvider({ children }: { children: ReactNode }) {
   const [user, setUser] = useState<User | null>(null);
+  const [firebaseLoading, setFirebaseLoading] = useState(true);
+  const [bridgeError, setBridgeError] = useState<string | null>(null);
   const [quickLoginAccounts, setQuickLoginAccounts] = useState<
     QuickLoginAccount[]
   >([]);
   const [cachedSession, setCachedSession] = useState<CachedSession | null>(null);
 
-  // Standalone PWA detection — must be in useState+useEffect to avoid
-  // accessing `window` during SSR/prerendering (where it doesn't exist).
-  const [isStandalone, setIsStandalone] = useState(false);
-  useEffect(() => {
-    setIsStandalone(isStandalonePWA());
-  }, []);
-
-  /*
-   * Loading-state strategy for signInWithRedirect:
-   *
-   * After a redirect round-trip (Google OAuth → back to app), the page fully
-   * remounts. Two async checks race on startup:
-   *   1. onAuthStateChanged — fires once Firebase restores (or doesn't find)
-   *      a persisted credential from IndexedDB.
-   *   2. getRedirectResult — resolves the pending redirect credential, if any.
-   *
-   * If we set `loading = false` as soon as *either* resolves, there's a window
-   * where AuthGuard sees `loading=false, user=null` and flashes the sign-in
-   * screen before the other check delivers the user. To prevent this, we gate
-   * `loading` behind BOTH checks completing.
-   */
-  const authStateResolved = useRef(false);
-  const redirectResultResolved = useRef(false);
-  const [loading, setLoading] = useState(true);
-
-  /** Only flip `loading` to false once both async checks have finished. */
-  const maybeFinishLoading = useCallback(() => {
-    if (authStateResolved.current && redirectResultResolved.current) {
-      setLoading(false);
-    }
-  }, []);
+  // ---- Ref guard: prevent duplicate token-bridge calls ----
+  // Similar to the old redirectHandled ref — ensures the POST to
+  // /api/firebase-token fires at most once per session lifecycle,
+  // even if the effect re-runs before Firebase auth state has updated.
+  const tokenBridgeInFlight = useRef(false);
 
   // Load cached session + quick-login history from localStorage on mount.
   useEffect(() => {
@@ -208,38 +178,11 @@ export function AuthProvider({ children }: { children: ReactNode }) {
     });
   }, []);
 
-  // Resolve any pending redirect result (runs once on mount).
-  // After signInWithRedirect, the page reloads and this picks up the credential.
-  // On normal loads with no pending redirect, this resolves to null instantly.
-  const redirectHandled = useRef(false);
-  useEffect(() => {
-    if (redirectHandled.current) return;
-    redirectHandled.current = true;
-
-    getRedirectResult(getFirebaseAuth())
-      .then((result) => {
-        if (result?.user) {
-          console.log("[KeepCheck] Redirect sign-in resolved:", result.user.email);
-          saveToQuickLogin(result.user);
-        }
-      })
-      .catch((err) => {
-        // Non-fatal — this fires on every mount, including normal loads.
-        console.warn("[KeepCheck] getRedirectResult error (non-fatal):", err);
-      })
-      .finally(() => {
-        redirectResultResolved.current = true;
-        maybeFinishLoading();
-      });
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
   // Listen to Firebase auth state.
   useEffect(() => {
     const unsubscribe = onAuthStateChanged(getFirebaseAuth(), (firebaseUser) => {
       setUser(firebaseUser);
-      authStateResolved.current = true;
-      maybeFinishLoading();
+      setFirebaseLoading(false);
 
       if (firebaseUser) {
         saveToQuickLogin(firebaseUser);
@@ -254,66 +197,103 @@ export function AuthProvider({ children }: { children: ReactNode }) {
       }
     });
     return unsubscribe;
-  }, [saveToQuickLogin, maybeFinishLoading]);
+  }, [saveToQuickLogin]);
 
-  // Sign in with Google — popup flow only.
+  // ---- NextAuth → Firebase token bridge ----
   //
-  // signInWithRedirect is NOT used: it fails silently in standalone PWAs due to
-  // Safari ITP blocking the cross-origin authDomain iframe, and also fails in
-  // normal browsers due to third-party storage partitioning. The standalone PWA
-  // dead-end is handled at the UI level (standalonePWASignInBlocked flag guides
-  // the user to sign in via Safari instead).
-  const signInWithGoogle = useCallback(async (email?: string) => {
-    const provider = new GoogleAuthProvider();
-    if (email) {
-      provider.setCustomParameters({ login_hint: email });
-    } else {
-      provider.setCustomParameters({ prompt: "select_account" });
+  // When NextAuth has an active session (user authenticated via Google OAuth)
+  // but Firebase doesn't have a user yet, exchange the NextAuth session for a
+  // Firebase custom token. The ref guard prevents duplicate requests.
+  useEffect(() => {
+    // Only proceed when:
+    //  - NextAuth has resolved (not "loading")
+    //  - NextAuth has a session with an email
+    //  - Firebase doesn't have a user yet
+    //  - We haven't already started a bridge request
+    if (
+      nextAuthStatus !== "authenticated" ||
+      !nextAuthSession?.user?.email ||
+      user !== null ||
+      tokenBridgeInFlight.current
+    ) {
+      return;
     }
 
-    const auth = getFirebaseAuth();
+    tokenBridgeInFlight.current = true;
+    setBridgeError(null);
 
-    try {
-      const result = await signInWithPopup(auth, provider, browserPopupRedirectResolver);
-      saveToQuickLogin(result.user);
-    } catch (error: unknown) {
-      // User closed the popup — not a real error.
-      const code = (error as { code?: string })?.code;
-      if (code !== "auth/popup-closed-by-user" && code !== "auth/cancelled-popup-request") {
-        console.error("[KeepCheck] Google sign-in failed:", error);
-        throw error;
+    (async () => {
+      try {
+        const res = await fetch("/api/firebase-token", { method: "POST" });
+        if (!res.ok) {
+          const body = await res.text();
+          throw new Error(`Token bridge failed (${res.status}): ${body}`);
+        }
+
+        const { customToken } = await res.json();
+        await signInWithCustomToken(getFirebaseAuth(), customToken);
+        // onAuthStateChanged will pick up the new Firebase user and
+        // trigger saveToQuickLogin + saveCachedSession automatically.
+      } catch (err) {
+        console.error("[KeepCheck] Firebase token bridge error:", err);
+        // Reset the guard so the user can retry (e.g. by refreshing).
+        tokenBridgeInFlight.current = false;
+        setBridgeError(err instanceof Error ? err.message : String(err));
       }
-    }
-  }, [saveToQuickLogin]);
+    })();
+  }, [nextAuthStatus, nextAuthSession, user]);
 
-  // Sign out.
+  // Sign in with Google via NextAuth's OAuth flow.
+  // NextAuth handles the full OAuth redirect → callback → session lifecycle.
+  const signInWithGoogle = useCallback(async (email?: string) => {
+    // Reset the bridge guard so a fresh sign-in triggers the bridge.
+    tokenBridgeInFlight.current = false;
+    setBridgeError(null);
+    await nextAuthSignIn("google", undefined, email ? { login_hint: email } : undefined);
+  }, []);
+
+  // Sign out of BOTH NextAuth and Firebase.
+  // Uses { redirect: false } for NextAuth so we preserve the existing behavior
+  // of clearing local state instantly without a full page reload/navigation.
   const signOut = useCallback(async () => {
     console.log("[KeepCheck AuthContext] signOut called");
+
     // Clear cached session immediately
     clearCachedSession();
     setCachedSession(null);
-    // Trigger Firebase sign-out in the background.
+
+    // Reset bridge guard for next sign-in
+    tokenBridgeInFlight.current = false;
+    setBridgeError(null);
+
+    // Sign out of NextAuth without redirecting — matches the existing
+    // "instant local clear, no navigation" behavior.
+    nextAuthSignOut({ redirect: false }).catch((error) => {
+      console.error("[KeepCheck AuthContext] NextAuth signOut error:", error);
+    });
+
+    // Sign out of Firebase
     firebaseSignOut(getFirebaseAuth())
       .then(() => {
         console.log("[KeepCheck AuthContext] Firebase signOut completed successfully");
       })
       .catch((error) => {
-        console.error("[KeepCheck AuthContext] Background Firebase signOut error:", error);
+        console.error("[KeepCheck AuthContext] Firebase signOut error:", error);
       });
+
     // Immediately clear local state for instant redirect.
     console.log("[KeepCheck AuthContext] Setting user to null");
     setUser(null);
   }, []);
 
-  // Standalone PWA dead-end detection: sign-in cannot work in this environment
-  // (popup blocked by WKWebView, redirect blocked by ITP). The user must sign
-  // in via a normal Safari tab first — the shared origin storage means the
-  // session will be available when the PWA is reopened.
-  const standalonePWASignInBlocked = !loading && isStandalone && !user && !cachedSession;
+  const loading =
+    firebaseLoading ||
+    nextAuthStatus === "loading" ||
+    (nextAuthStatus === "authenticated" && !user && !bridgeError);
 
   return (
     <AuthContext.Provider
-      value={{ user, loading, signInWithGoogle, signOut, quickLoginAccounts, cachedSession, standalonePWASignInBlocked }}
+      value={{ user, loading, signInWithGoogle, signOut, quickLoginAccounts, cachedSession }}
     >
       {children}
     </AuthContext.Provider>
diff --git a/lib/firebaseAdmin.ts b/lib/firebaseAdmin.ts
new file mode 100644
index 0000000..1b799c6
--- /dev/null
+++ b/lib/firebaseAdmin.ts
@@ -0,0 +1,61 @@
+/**
+ * Firebase Admin SDK — server-only initialisation.
+ *
+ * ⚠️  SECURITY:
+ *   • FIREBASE_SERVICE_ACCOUNT_JSON must be set as a server-only env var
+ *     in Vercel (NOT prefixed with NEXT_PUBLIC_).
+ *   • Never commit the service account JSON to source control.
+ *   • Never log the full key — at most log the client_email for debugging.
+ *
+ * This module must NEVER be imported from client code. It runs only on the
+ * server (Route Handlers, Server Components, Server Actions).
+ */
+
+import { initializeApp, getApps, cert, type App } from "firebase-admin/app";
+import { getAuth, type Auth } from "firebase-admin/auth";
+
+let _adminApp: App | null = null;
+
+function getAdminApp(): App {
+  if (_adminApp) return _adminApp;
+
+  // Already initialised (hot-reload safety)
+  if (getApps().length > 0) {
+    _adminApp = getApps()[0];
+    return _adminApp;
+  }
+
+  const serviceAccountJSON = process.env.FIREBASE_SERVICE_ACCOUNT_JSON;
+  if (!serviceAccountJSON) {
+    throw new Error(
+      "[firebaseAdmin] FIREBASE_SERVICE_ACCOUNT_JSON env var is missing. " +
+        "Set it in Vercel → Settings → Environment Variables (server-only, NOT NEXT_PUBLIC_)."
+    );
+  }
+
+  let serviceAccount: Record<string, string>;
+  try {
+    serviceAccount = JSON.parse(serviceAccountJSON);
+  } catch {
+    throw new Error(
+      "[firebaseAdmin] FIREBASE_SERVICE_ACCOUNT_JSON is not valid JSON. " +
+        "Paste the entire contents of the downloaded service account key file."
+    );
+  }
+
+  _adminApp = initializeApp({
+    credential: cert(serviceAccount),
+  });
+
+  // Log only the client_email for deploy debugging — never the full key.
+  console.log(
+    `[firebaseAdmin] Admin SDK initialised for ${serviceAccount.client_email ?? "unknown"}`
+  );
+
+  return _adminApp;
+}
+
+/** Returns the Firebase Admin Auth instance (server-only). */
+export function getAdminAuth(): Auth {
+  return getAuth(getAdminApp());
+}
diff --git a/package-lock.json b/package-lock.json
index 2409840..1613ac5 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,9 +12,11 @@
         "dexie": "^4.4.4",
         "dexie-react-hooks": "^4.4.0",
         "firebase": "^12.16.0",
+        "firebase-admin": "^14.1.0",
         "gsap": "^3.15.0",
         "lucide-react": "^1.24.0",
         "next": "16.2.10",
+        "next-auth": "^5.0.0-beta.31",
         "react": "19.2.4",
         "react-dom": "19.2.4",
         "serwist": "^9.5.11"
@@ -43,6 +45,35 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/@auth/core": {
+      "version": "0.41.2",
+      "resolved": "https://registry.npmjs.org/@auth/core/-/core-0.41.2.tgz",
+      "integrity": "sha512-Hx5MNBxN2fJTbJKGUKAA0wca43D0Akl3TvufY54Gn8lop7F+34vU1zA1pn0vQfIoVuLIrpfc2nkyjwIaPJMW7w==",
+      "license": "ISC",
+      "dependencies": {
+        "@panva/hkdf": "^1.2.1",
+        "jose": "^6.0.6",
+        "oauth4webapi": "^3.3.0",
+        "preact": "10.24.3",
+        "preact-render-to-string": "6.5.11"
+      },
+      "peerDependencies": {
+        "@simplewebauthn/browser": "^9.0.1",
+        "@simplewebauthn/server": "^9.0.2",
+        "nodemailer": "^7.0.7"
+      },
+      "peerDependenciesMeta": {
+        "@simplewebauthn/browser": {
+          "optional": true
+        },
+        "@simplewebauthn/server": {
+          "optional": true
+        },
+        "nodemailer": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@babel/code-frame": {
       "version": "7.29.7",
       "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.29.7.tgz",
@@ -480,6 +511,12 @@
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
       }
     },
+    "node_modules/@fastify/busboy": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/@fastify/busboy/-/busboy-3.2.0.tgz",
+      "integrity": "sha512-m9FVDXU3GT2ITSe0UaMA5rU3QkfC/UXtCU8y0gSN/GugTqtVldOBWIB5V6V3sbmenVZUIpU6f+mPEO2+m5iTaA==",
+      "license": "MIT"
+    },
     "node_modules/@firebase/ai": {
       "version": "2.13.1",
       "resolved": "https://registry.npmjs.org/@firebase/ai/-/ai-2.13.1.tgz",
@@ -1092,6 +1129,126 @@
       "integrity": "sha512-Vr/Mqu79dMwGRAyGbJ4uN4+BtXB3/mRTdzetD1daWNeG8QaWuzhhbG77GltO5c0yYmYls8i250iX73624GJd7Q==",
       "license": "Apache-2.0"
     },
+    "node_modules/@google-cloud/firestore": {
+      "version": "8.6.0",
+      "resolved": "https://registry.npmjs.org/@google-cloud/firestore/-/firestore-8.6.0.tgz",
+      "integrity": "sha512-TdvZHfwQj5B5CSDEgDqyrhdVqtOSupmBXDQPasMAJiC64tjsGvyMooNiC43fdk1TsUHeklyoZ6/vQ1TjWKVMbg==",
+      "license": "Apache-2.0",
+      "optional": true,
+      "dependencies": {
+        "@opentelemetry/api": "^1.9.0",
+        "fast-deep-equal": "^3.1.3",
+        "functional-red-black-tree": "^1.0.1",
+        "google-gax": "^5.0.1",
+        "protobufjs": "^7.5.3"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@google-cloud/paginator": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/@google-cloud/paginator/-/paginator-5.0.2.tgz",
+      "integrity": "sha512-DJS3s0OVH4zFDB1PzjxAsHqJT6sKVbRwwML0ZBP9PbU7Yebtu/7SWMRzvO2J3nUi9pRNITCfu4LJeooM2w4pjg==",
+      "license": "Apache-2.0",
+      "optional": true,
+      "dependencies": {
+        "arrify": "^2.0.0",
+        "extend": "^3.0.2"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/@google-cloud/projectify": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/@google-cloud/projectify/-/projectify-4.0.0.tgz",
+      "integrity": "sha512-MmaX6HeSvyPbWGwFq7mXdo0uQZLGBYCwziiLIGq5JVX+/bdI3SAq6bP98trV5eTWfLuvsMcIC1YJOF2vfteLFA==",
+      "license": "Apache-2.0",
+      "optional": true,
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/@google-cloud/promisify": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/@google-cloud/promisify/-/promisify-4.0.0.tgz",
+      "integrity": "sha512-Orxzlfb9c67A15cq2JQEyVc7wEsmFBmHjZWZYQMUyJ1qivXyMwdyNOs9odi79hze+2zqdTtu1E19IM/FtqZ10g==",
+      "license": "Apache-2.0",
+      "optional": true,
+      "engines": {
+        "node": ">=14"
+      }
+    },
+    "node_modules/@google-cloud/storage": {
+      "version": "7.21.0",
+      "resolved": "https://registry.npmjs.org/@google-cloud/storage/-/storage-7.21.0.tgz",
+      "integrity": "sha512-l+IFTkd+6Y5LoAuXyYCKNAKtw/Ci+rAMqgdTB1jv4iZiLhw0rtq+0qjIRbBizXkNzEFmXiXUW0H7sZQQvk1ffA==",
+      "license": "Apache-2.0",
+      "optional": true,
+      "dependencies": {
+        "@google-cloud/paginator": "^5.0.0",
+        "@google-cloud/projectify": "^4.0.0",
+        "@google-cloud/promisify": "<4.1.0",
+        "abort-controller": "^3.0.0",
+        "async-retry": "^1.3.3",
+        "duplexify": "^4.1.3",
+        "fast-xml-parser": "^5.3.4",
+        "gaxios": "^6.0.2",
+        "google-auth-library": "^9.6.3",
+        "html-entities": "^2.5.2",
+        "mime": "^3.0.0",
+        "p-limit": "^3.0.1",
+        "retry-request": "^7.0.0",
+        "teeny-request": "^9.0.0"
+      },
+      "engines": {
+        "node": ">=14"
+      }
+    },
+    "node_modules/@google-cloud/storage/node_modules/gcp-metadata": {
+      "version": "6.1.1",
+      "resolved": "https://registry.npmjs.org/gcp-metadata/-/gcp-metadata-6.1.1.tgz",
+      "integrity": "sha512-a4tiq7E0/5fTjxPAaH4jpjkSv/uCaU2p5KC6HVGrvl0cDjA8iBZv4vv1gyzlmK0ZUKqwpOyQMKzZQe3lTit77A==",
+      "license": "Apache-2.0",
+      "optional": true,
+      "dependencies": {
+        "gaxios": "^6.1.1",
+        "google-logging-utils": "^0.0.2",
+        "json-bigint": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=14"
+      }
+    },
+    "node_modules/@google-cloud/storage/node_modules/google-auth-library": {
+      "version": "9.15.1",
+      "resolved": "https://registry.npmjs.org/google-auth-library/-/google-auth-library-9.15.1.tgz",
+      "integrity": "sha512-Jb6Z0+nvECVz+2lzSMt9u98UsoakXxA2HGHMCxh+so3n90XgYWkq5dur19JAJV7ONiJY22yBTyJB1TSkvPq9Ng==",
+      "license": "Apache-2.0",
+      "optional": true,
+      "dependencies": {
+        "base64-js": "^1.3.0",
+        "ecdsa-sig-formatter": "^1.0.11",
+        "gaxios": "^6.1.1",
+        "gcp-metadata": "^6.1.0",
+        "gtoken": "^7.0.0",
+        "jws": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=14"
+      }
+    },
+    "node_modules/@google-cloud/storage/node_modules/google-logging-utils": {
+      "version": "0.0.2",
+      "resolved": "https://registry.npmjs.org/google-logging-utils/-/google-logging-utils-0.0.2.tgz",
+      "integrity": "sha512-NEgUnEcBiP5HrPzufUkBzJOD/Sxsco3rLNo1F1TNf7ieU8ryUzBhqba8r756CjLX7rn3fHl6iLEwPYuqpoKgQQ==",
+      "license": "Apache-2.0",
+      "optional": true,
+      "engines": {
+        "node": ">=14"
+      }
+    },
     "node_modules/@grpc/grpc-js": {
       "version": "1.9.16",
       "resolved": "https://registry.npmjs.org/@grpc/grpc-js/-/grpc-js-1.9.16.tgz",
@@ -1703,6 +1860,102 @@
         "url": "https://opencollective.com/libvips"
       }
     },
+    "node_modules/@isaacs/cliui": {
+      "version": "8.0.2",
+      "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz",
+      "integrity": "sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==",
+      "license": "ISC",
+      "optional": true,
+      "dependencies": {
+        "string-width": "^5.1.2",
+        "string-width-cjs": "npm:string-width@^4.2.0",
+        "strip-ansi": "^7.0.1",
+        "strip-ansi-cjs": "npm:strip-ansi@^6.0.1",
+        "wrap-ansi": "^8.1.0",
+        "wrap-ansi-cjs": "npm:wrap-ansi@^7.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@isaacs/cliui/node_modules/ansi-regex": {
+      "version": "6.2.2",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.2.2.tgz",
+      "integrity": "sha512-Bq3SmSpyFHaWjPk8If9yc6svM8c56dB5BAtW4Qbw5jHTwwXXcTLoRMkpDJp6VL0XzlWaCHTXrkFURMYmD0sLqg==",
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-regex?sponsor=1"
+      }
+    },
+    "node_modules/@isaacs/cliui/node_modules/ansi-styles": {
+      "version": "6.2.3",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-6.2.3.tgz",
+      "integrity": "sha512-4Dj6M28JB+oAH8kFkTLUo+a2jwOFkuqb3yucU0CANcRRUbxS0cP0nZYCGjcc3BNXwRIsUVmDGgzawme7zvJHvg==",
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/@isaacs/cliui/node_modules/string-width": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz",
+      "integrity": "sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "eastasianwidth": "^0.2.0",
+        "emoji-regex": "^9.2.2",
+        "strip-ansi": "^7.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@isaacs/cliui/node_modules/strip-ansi": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.2.0.tgz",
+      "integrity": "sha512-yDPMNjp4WyfYBkHnjIRLfca1i6KMyGCtsVgoKe/z1+6vukgaENdgGBZt+ZmKPc4gavvEZ5OgHfHdrazhgNyG7w==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "ansi-regex": "^6.2.2"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/strip-ansi?sponsor=1"
+      }
+    },
+    "node_modules/@isaacs/cliui/node_modules/wrap-ansi": {
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-8.1.0.tgz",
+      "integrity": "sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "ansi-styles": "^6.1.0",
+        "string-width": "^5.0.1",
+        "strip-ansi": "^7.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+      }
+    },
     "node_modules/@jridgewell/gen-mapping": {
       "version": "0.3.13",
       "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz",
@@ -1753,6 +2006,17 @@
         "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
+    "node_modules/@js-sdsl/ordered-map": {
+      "version": "4.4.2",
+      "resolved": "https://registry.npmjs.org/@js-sdsl/ordered-map/-/ordered-map-4.4.2.tgz",
+      "integrity": "sha512-iUKgm52T8HOE/makSxjqoWhe95ZJA1/G1sYsGev2JDKUSS14KAgg1LHb+Ba+IPow0xflbnSkOsZcO08C7w1gYw==",
+      "license": "MIT",
+      "optional": true,
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/js-sdsl"
+      }
+    },
     "node_modules/@napi-rs/wasm-runtime": {
       "version": "1.1.6",
       "resolved": "https://registry.npmjs.org/@napi-rs/wasm-runtime/-/wasm-runtime-1.1.6.tgz",
@@ -1928,6 +2192,19 @@
         "node": ">= 10"
       }
     },
+    "node_modules/@nodable/entities": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/@nodable/entities/-/entities-3.0.0.tgz",
+      "integrity": "sha512-8L9xFeTYKhm49xfIypoe2W5wV1m/3Z58kT+7kR9A8OyFxcPduI4VmxaUMQyKYrRjUoLLSXv6EKKID5Tvj9cUVw==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/nodable"
+        }
+      ],
+      "license": "MIT",
+      "optional": true
+    },
     "node_modules/@nodelib/fs.scandir": {
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -1976,6 +2253,35 @@
         "node": ">=12.4.0"
       }
     },
+    "node_modules/@opentelemetry/api": {
+      "version": "1.9.1",
+      "resolved": "https://registry.npmjs.org/@opentelemetry/api/-/api-1.9.1.tgz",
+      "integrity": "sha512-gLyJlPHPZYdAk1JENA9LeHejZe1Ti77/pTeFm/nMXmQH/HFZlcS/O2XJB+L8fkbrNSqhdtlvjBVjxwUYanNH5Q==",
+      "license": "Apache-2.0",
+      "optional": true,
+      "engines": {
+        "node": ">=8.0.0"
+      }
+    },
+    "node_modules/@panva/hkdf": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@panva/hkdf/-/hkdf-1.2.1.tgz",
+      "integrity": "sha512-6oclG6Y3PiDFcoyk8srjLfVKyMfVCKJ27JwNPViuXziFpmdz+MZnZN/aKY0JGXgYuO/VghU0jcOAZgWXZ1Dmrw==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/panva"
+      }
+    },
+    "node_modules/@pkgjs/parseargs": {
+      "version": "0.11.0",
+      "resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz",
+      "integrity": "sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==",
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">=14"
+      }
+    },
     "node_modules/@protobufjs/aspromise": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/@protobufjs/aspromise/-/aspromise-1.1.2.tgz",
@@ -2452,6 +2758,16 @@
         "tailwindcss": "4.3.2"
       }
     },
+    "node_modules/@tootallnate/once": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-2.0.1.tgz",
+      "integrity": "sha512-HqmEUIGRJ5fSXchkVgR5F7qn48bDBzv0kWj/Kfu5e6uci4UlEeng4331LnBkWffb++Ei3FOVLxo8JJWMFBDMeQ==",
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">= 10"
+      }
+    },
     "node_modules/@tybys/wasm-util": {
       "version": "0.10.3",
       "resolved": "https://registry.npmjs.org/@tybys/wasm-util/-/wasm-util-0.10.3.tgz",
@@ -2463,6 +2779,13 @@
         "tslib": "^2.4.0"
       }
     },
+    "node_modules/@types/caseless": {
+      "version": "0.12.5",
+      "resolved": "https://registry.npmjs.org/@types/caseless/-/caseless-0.12.5.tgz",
+      "integrity": "sha512-hWtVTC2q7hc7xZ/RLbxapMvDMgUnDvKvMOpKal4DrMyfGBUfB1oKaZlIRr6mJL+If3bAP6sV/QneGzF6tJjZDg==",
+      "license": "MIT",
+      "optional": true
+    },
     "node_modules/@types/estree": {
       "version": "1.0.9",
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.9.tgz",
@@ -2484,6 +2807,22 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@types/jsonwebtoken": {
+      "version": "9.0.10",
+      "resolved": "https://registry.npmjs.org/@types/jsonwebtoken/-/jsonwebtoken-9.0.10.tgz",
+      "integrity": "sha512-asx5hIG9Qmf/1oStypjanR7iKTv0gXQ1Ov/jfrX6kS/EO0OFni8orbmGCn0672NHR3kXHwpAwR+B368ZGN/2rA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/ms": "*",
+        "@types/node": "*"
+      }
+    },
+    "node_modules/@types/ms": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/@types/ms/-/ms-2.1.0.tgz",
+      "integrity": "sha512-GsCCIZDE/p3i96vtEqx+7dBUGXrc7zeSK3wwPHIaRThS+9OhWIXRqzs4d6k1SVU8g91DrNRWxWUGhp5KXQb2VA==",
+      "license": "MIT"
+    },
     "node_modules/@types/node": {
       "version": "20.19.43",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-20.19.43.tgz",
@@ -2513,6 +2852,26 @@
         "@types/react": "^19.2.0"
       }
     },
+    "node_modules/@types/request": {
+      "version": "2.48.13",
+      "resolved": "https://registry.npmjs.org/@types/request/-/request-2.48.13.tgz",
+      "integrity": "sha512-FGJ6udDNUCjd19pp0Q3iTiDkwhYup7J8hpMW9c4k53NrccQFFWKRho6hvtPPEhnXWKvukfwAlB6DbDz4yhH5Gg==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@types/caseless": "*",
+        "@types/node": "*",
+        "@types/tough-cookie": "*",
+        "form-data": "^2.5.5"
+      }
+    },
+    "node_modules/@types/tough-cookie": {
+      "version": "4.0.5",
+      "resolved": "https://registry.npmjs.org/@types/tough-cookie/-/tough-cookie-4.0.5.tgz",
+      "integrity": "sha512-/Ad8+nIOV7Rl++6f1BdKxFSMgmoqEoYbHRpPcx3JEfv8VRsQe9Z4mCXeJBzxs7mbHY/XOZZuXlRNfhpVPbs6ZA==",
+      "license": "MIT",
+      "optional": true
+    },
     "node_modules/@types/trusted-types": {
       "version": "2.0.7",
       "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.7.tgz",
@@ -3155,6 +3514,19 @@
         "win32"
       ]
     },
+    "node_modules/abort-controller": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/abort-controller/-/abort-controller-3.0.0.tgz",
+      "integrity": "sha512-h8lQ8tacZYnR3vNQTgibj+tODHI5/+l06Au2Pcriv/Gmet0eaj4TwWH41sO9wnHDiQsEj19q0drzdWdeAHtweg==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "event-target-shim": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=6.5"
+      }
+    },
     "node_modules/acorn": {
       "version": "8.17.0",
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.17.0.tgz",
@@ -3178,6 +3550,15 @@
         "acorn": "^6.0.0 || ^7.0.0 || ^8.0.0"
       }
     },
+    "node_modules/agent-base": {
+      "version": "7.1.4",
+      "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-7.1.4.tgz",
+      "integrity": "sha512-MnA+YT8fwfJPgBx3m60MNqakm30XOkyIoH1y6huTQvC0PwZG7ki8NacLBcrPbNoo8vEZy7Jpuk7+jMO+CUovTQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 14"
+      }
+    },
     "node_modules/ajv": {
       "version": "6.15.0",
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.15.0.tgz",
@@ -3219,6 +3600,19 @@
         "url": "https://github.com/chalk/ansi-styles?sponsor=1"
       }
     },
+    "node_modules/anynum": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/anynum/-/anynum-1.0.1.tgz",
+      "integrity": "sha512-N6//FLET/tXYNM/F6ABca1oH6fWB+KlTt909Le28WMDBk8oaT4vY17DCrwg2MvmuqUKt3Ni4N5dGJ/EoBgcO6A==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/NaturalIntelligence"
+        }
+      ],
+      "license": "MIT",
+      "optional": true
+    },
     "node_modules/argparse": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
@@ -3396,6 +3790,16 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/arrify": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/arrify/-/arrify-2.0.1.tgz",
+      "integrity": "sha512-3duEwti880xqi4eAMN8AyR4a0ByT90zoYdLlevfrvU43vb0YZwZVfxOgxWrLXXXpyugL0hNZc9G6BiB5B3nUug==",
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/ast-types-flow": {
       "version": "0.0.8",
       "resolved": "https://registry.npmjs.org/ast-types-flow/-/ast-types-flow-0.0.8.tgz",
@@ -3413,6 +3817,23 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/async-retry": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/async-retry/-/async-retry-1.3.3.tgz",
+      "integrity": "sha512-wfr/jstw9xNi/0teMHrRW7dsz3Lt5ARhYNZ2ewpadnhaIp5mbALhOAP+EAdsC7t4Z6wqsDVv9+W6gm1Dk9mEyw==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "retry": "0.13.1"
+      }
+    },
+    "node_modules/asynckit": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
+      "license": "MIT",
+      "optional": true
+    },
     "node_modules/available-typed-arrays": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.7.tgz",
@@ -3453,7 +3874,27 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
       "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
-      "dev": true,
+      "devOptional": true,
+      "license": "MIT"
+    },
+    "node_modules/base64-js": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
+      "integrity": "sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
       "license": "MIT"
     },
     "node_modules/baseline-browser-mapping": {
@@ -3468,6 +3909,15 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/bignumber.js": {
+      "version": "9.3.1",
+      "resolved": "https://registry.npmjs.org/bignumber.js/-/bignumber.js-9.3.1.tgz",
+      "integrity": "sha512-Ko0uX15oIUS7wJ3Rb30Fs6SkVbLmPBAKdlm7q9+ak9bbIeFf0MwuBsQV6z7+X768/cHsfg+WlysDWJcmthjsjQ==",
+      "license": "MIT",
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/brace-expansion": {
       "version": "1.1.16",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.16.tgz",
@@ -3525,6 +3975,12 @@
         "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
       }
     },
+    "node_modules/buffer-equal-constant-time": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/buffer-equal-constant-time/-/buffer-equal-constant-time-1.0.1.tgz",
+      "integrity": "sha512-zRpUiDwd/xk6ADqPMATG8vc9VPrkck7T07OIx0gnjmJAnHnTVXNQG3vfvWNuiZIkwu9KrKdA1iJKfsfTVxE6NA==",
+      "license": "BSD-3-Clause"
+    },
     "node_modules/call-bind": {
       "version": "1.0.9",
       "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.9.tgz",
@@ -3548,7 +4004,7 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.2.tgz",
       "integrity": "sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "es-errors": "^1.3.0",
@@ -3660,10 +4116,23 @@
       "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
       "license": "MIT"
     },
-    "node_modules/common-tags": {
-      "version": "1.8.2",
-      "resolved": "https://registry.npmjs.org/common-tags/-/common-tags-1.8.2.tgz",
-      "integrity": "sha512-gk/Z852D2Wtb//0I+kRFNKKE9dIIVirjoqPoA1wJU+XePVXZfGeBpk45+A1rKO4Q43prqWBNY/MiIeRLbPWUaA==",
+    "node_modules/combined-stream": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
+      "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "delayed-stream": "~1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/common-tags": {
+      "version": "1.8.2",
+      "resolved": "https://registry.npmjs.org/common-tags/-/common-tags-1.8.2.tgz",
+      "integrity": "sha512-gk/Z852D2Wtb//0I+kRFNKKE9dIIVirjoqPoA1wJU+XePVXZfGeBpk45+A1rKO4Q43prqWBNY/MiIeRLbPWUaA==",
       "license": "MIT",
       "engines": {
         "node": ">=4.0.0"
@@ -3687,7 +4156,7 @@
       "version": "7.0.6",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
       "integrity": "sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "path-key": "^3.1.0",
@@ -3712,6 +4181,15 @@
       "dev": true,
       "license": "BSD-2-Clause"
     },
+    "node_modules/data-uri-to-buffer": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/data-uri-to-buffer/-/data-uri-to-buffer-4.0.1.tgz",
+      "integrity": "sha512-0R9ikRb668HB7QDxT1vkpuUBtqc53YyAwMwGeUFKRojY/NWKvdZ+9UYtRfGmhqNbRkTSVpMbmyhXipFFv2cb/A==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 12"
+      }
+    },
     "node_modules/data-view-buffer": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/data-view-buffer/-/data-view-buffer-1.0.2.tgz",
@@ -3770,7 +4248,6 @@
       "version": "4.4.3",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
       "integrity": "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "ms": "^2.1.3"
@@ -3827,6 +4304,16 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/delayed-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
+      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
     "node_modules/detect-libc": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.1.2.tgz",
@@ -3870,7 +4357,7 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
       "integrity": "sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "call-bind-apply-helpers": "^1.0.1",
@@ -3881,6 +4368,35 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/duplexify": {
+      "version": "4.1.3",
+      "resolved": "https://registry.npmjs.org/duplexify/-/duplexify-4.1.3.tgz",
+      "integrity": "sha512-M3BmBhwJRZsSx38lZyhE53Csddgzl5R7xGJNk7CVddZD6CcmwMCH8J+7AprIrQKH7TonKxaCjcv27Qmf+sQ+oA==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "end-of-stream": "^1.4.1",
+        "inherits": "^2.0.3",
+        "readable-stream": "^3.1.1",
+        "stream-shift": "^1.0.2"
+      }
+    },
+    "node_modules/eastasianwidth": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz",
+      "integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==",
+      "license": "MIT",
+      "optional": true
+    },
+    "node_modules/ecdsa-sig-formatter": {
+      "version": "1.0.11",
+      "resolved": "https://registry.npmjs.org/ecdsa-sig-formatter/-/ecdsa-sig-formatter-1.0.11.tgz",
+      "integrity": "sha512-nagl3RYrbNv6kQkeJIpt6NJZy8twLB/2vtz6yN9Z4vRKHN4/QZJIEbqohALSgwKdnksuY3k5Addp5lg8sVoVcQ==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "safe-buffer": "^5.0.1"
+      }
+    },
     "node_modules/electron-to-chromium": {
       "version": "1.5.392",
       "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.392.tgz",
@@ -3891,9 +4407,19 @@
       "version": "9.2.2",
       "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
       "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT"
     },
+    "node_modules/end-of-stream": {
+      "version": "1.4.5",
+      "resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.5.tgz",
+      "integrity": "sha512-ooEGc6HP26xXq/N+GCGOT0JKCLDGrq2bQUZrQ7gyrJiZANJ/8YDTxTpQBXGMn+WbIQXNVpyWymm7KYVICQnyOg==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "once": "^1.4.0"
+      }
+    },
     "node_modules/enhanced-resolve": {
       "version": "5.21.6",
       "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.21.6.tgz",
@@ -4000,7 +4526,7 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.1.tgz",
       "integrity": "sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "engines": {
         "node": ">= 0.4"
@@ -4010,7 +4536,7 @@
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz",
       "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "engines": {
         "node": ">= 0.4"
@@ -4048,7 +4574,7 @@
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.1.2.tgz",
       "integrity": "sha512-HWcBoN6NileqtSydK2FqHbS/LoDd2pqrnQHLyJzBj4kOp/ky2MWMN694xOfkK8/SnUsW2DH7EfyVlydKCsm1Zw==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "es-errors": "^1.3.0"
@@ -4061,7 +4587,7 @@
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/es-set-tostringtag/-/es-set-tostringtag-2.1.0.tgz",
       "integrity": "sha512-j6vWzfrGVfyXxge+O0x5sh6cvxAog0a/4Rdd2K36zCMV5eJ+/+tOAngRO8cODMNWbVRdVlmGZQL2YS3yR8bIUA==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "es-errors": "^1.3.0",
@@ -4555,11 +5081,35 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/event-target-shim": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/event-target-shim/-/event-target-shim-5.0.1.tgz",
+      "integrity": "sha512-i/2XbnSz/uxRCU6+NdVJgKWDTM427+MqYbkQzD321DuCQJUqOuJKIA0IM2+W2xtYHdKOmZ4dR6fExsd4SXL+WQ==",
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/extend": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz",
+      "integrity": "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==",
+      "license": "MIT"
+    },
+    "node_modules/farmhash-modern": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/farmhash-modern/-/farmhash-modern-1.1.0.tgz",
+      "integrity": "sha512-6ypT4XfgqJk/F3Yuv4SX26I3doUjt0GTG4a+JgWxXQpxXzTBq8fPUeGHfcYMMDPHJHm3yPOSjaeBwBGAHWXCdA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18.0.0"
+      }
+    },
     "node_modules/fast-deep-equal": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
       "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/fast-glob": {
@@ -4606,6 +5156,47 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/fast-xml-builder": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/fast-xml-builder/-/fast-xml-builder-1.3.0.tgz",
+      "integrity": "sha512-F74cZEdCvuw9P41GAC3rod4X04jjWGM1JPEv/GWSqFTWLsdyMSBMBMlm9Hk3GLBgLBbdBNY8yee0pQh2RBVESQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/NaturalIntelligence"
+        }
+      ],
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "path-expression-matcher": "^1.6.2",
+        "xml-naming": "^0.3.0"
+      }
+    },
+    "node_modules/fast-xml-parser": {
+      "version": "5.10.1",
+      "resolved": "https://registry.npmjs.org/fast-xml-parser/-/fast-xml-parser-5.10.1.tgz",
+      "integrity": "sha512-IEMIf7298kXuZSRFoGfMYrl7is8LpavODgbNz1cwIudv7KwVFnuU+UsMporfq6PD6aXSlawZlARiA3UywCTfMw==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/NaturalIntelligence"
+        }
+      ],
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@nodable/entities": "^3.0.0",
+        "fast-xml-builder": "^1.2.0",
+        "is-unsafe": "^2.0.0",
+        "path-expression-matcher": "^1.6.2",
+        "strnum": "^2.4.1",
+        "xml-naming": "^0.3.0"
+      },
+      "bin": {
+        "fxparser": "src/cli/cli.js"
+      }
+    },
     "node_modules/fastq": {
       "version": "1.20.1",
       "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.20.1.tgz",
@@ -4628,6 +5219,29 @@
         "node": ">=0.8.0"
       }
     },
+    "node_modules/fetch-blob": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/fetch-blob/-/fetch-blob-3.2.0.tgz",
+      "integrity": "sha512-7yAQpD2UMJzLi1Dqv7qFYnPbaPx7ZfFK6PiIxQ4PfkGPyNyl2Ugx+a/umUonmKqjhM4DnfbMvdX6otXq83soQQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/jimmywarting"
+        },
+        {
+          "type": "paypal",
+          "url": "https://paypal.me/jimmywarting"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "node-domexception": "^1.0.0",
+        "web-streams-polyfill": "^3.0.3"
+      },
+      "engines": {
+        "node": "^12.20 || >= 14.13"
+      }
+    },
     "node_modules/file-entry-cache": {
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-8.0.0.tgz",
@@ -4707,6 +5321,29 @@
         "@firebase/util": "1.15.1"
       }
     },
+    "node_modules/firebase-admin": {
+      "version": "14.1.0",
+      "resolved": "https://registry.npmjs.org/firebase-admin/-/firebase-admin-14.1.0.tgz",
+      "integrity": "sha512-GdHh6vHWm9LVRt+3hINWczaA7fPwnN/l4xZdqzn+wNPYErrLI1x6u1mvAJM/5IGgYI9EqQgLt1EyBG8ok/hWCg==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@fastify/busboy": "^3.0.0",
+        "@firebase/database-compat": "^2.1.4",
+        "@firebase/database-types": "^1.0.20",
+        "farmhash-modern": "^1.1.0",
+        "fast-deep-equal": "^3.1.1",
+        "google-auth-library": "^10.6.2",
+        "jsonwebtoken": "^9.0.0",
+        "jwks-rsa": "^4.0.1"
+      },
+      "engines": {
+        "node": ">=22"
+      },
+      "optionalDependencies": {
+        "@google-cloud/firestore": "^8.6.0",
+        "@google-cloud/storage": "^7.19.0"
+      }
+    },
     "node_modules/flat-cache": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-4.0.1.tgz",
@@ -4744,11 +5381,58 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/foreground-child": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-3.3.1.tgz",
+      "integrity": "sha512-gIXjKqtFuWEgzFRJA9WCQeSJLZDjgJUOMCMzxtvFq/37KojM1BFGufqsCy0r4qSQmYLsZYMeyRqzIWOMup03sw==",
+      "license": "ISC",
+      "optional": true,
+      "dependencies": {
+        "cross-spawn": "^7.0.6",
+        "signal-exit": "^4.0.1"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/form-data": {
+      "version": "2.5.6",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-2.5.6.tgz",
+      "integrity": "sha512-Ogz/E85h9tlfJzpI6TuFpGcHZFhLrb9Gw8wq9v40CxSCPnv7ahKr6Xgtkn0KYCDQJ8DNn5VoMO8EXr9V5PadyA==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "es-set-tostringtag": "^2.1.0",
+        "hasown": "^2.0.4",
+        "mime-types": "^2.1.35",
+        "safe-buffer": "^5.2.1"
+      },
+      "engines": {
+        "node": ">= 0.12"
+      }
+    },
+    "node_modules/formdata-polyfill": {
+      "version": "4.0.10",
+      "resolved": "https://registry.npmjs.org/formdata-polyfill/-/formdata-polyfill-4.0.10.tgz",
+      "integrity": "sha512-buewHzMvYL29jdeQTVILecSaZKnt/RJWjoZCF5OW60Z67/GmSLBkOFM7qh1PI3zFNtJbaZL5eQu1vLfazOwj4g==",
+      "license": "MIT",
+      "dependencies": {
+        "fetch-blob": "^3.1.2"
+      },
+      "engines": {
+        "node": ">=12.20.0"
+      }
+    },
     "node_modules/function-bind": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
       "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
@@ -4778,6 +5462,13 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/functional-red-black-tree": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/functional-red-black-tree/-/functional-red-black-tree-1.0.1.tgz",
+      "integrity": "sha512-dsKNQNdj6xA3T+QlADDA7mOSlX0qiMINjn0cgr+eGHGsbSHzTabcIogz2+p/iqP1Xs6EP/sS2SbqH+brGTbq0g==",
+      "license": "MIT",
+      "optional": true
+    },
     "node_modules/functions-have-names": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/functions-have-names/-/functions-have-names-1.2.3.tgz",
@@ -4788,6 +5479,69 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/gaxios": {
+      "version": "6.7.1",
+      "resolved": "https://registry.npmjs.org/gaxios/-/gaxios-6.7.1.tgz",
+      "integrity": "sha512-LDODD4TMYx7XXdpwxAVRAIAuB0bzv0s+ywFonY46k126qzQHT9ygyoa9tncmOiQmmDrik65UYsEkv3lbfqQ3yQ==",
+      "license": "Apache-2.0",
+      "optional": true,
+      "dependencies": {
+        "extend": "^3.0.2",
+        "https-proxy-agent": "^7.0.1",
+        "is-stream": "^2.0.0",
+        "node-fetch": "^2.6.9",
+        "uuid": "^9.0.1"
+      },
+      "engines": {
+        "node": ">=14"
+      }
+    },
+    "node_modules/gcp-metadata": {
+      "version": "8.1.2",
+      "resolved": "https://registry.npmjs.org/gcp-metadata/-/gcp-metadata-8.1.2.tgz",
+      "integrity": "sha512-zV/5HKTfCeKWnxG0Dmrw51hEWFGfcF2xiXqcA3+J90WDuP0SvoiSO5ORvcBsifmx/FoIjgQN3oNOGaQ5PhLFkg==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "gaxios": "^7.0.0",
+        "google-logging-utils": "^1.0.0",
+        "json-bigint": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/gcp-metadata/node_modules/gaxios": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/gaxios/-/gaxios-7.2.0.tgz",
+      "integrity": "sha512-CUVb4wcYe+771XevyH6HtGmXFAGGKkIC3kswAP8Z1JCe0j80JMaTPZH930DWFrvo0atjh18Arc0pEyUCWa5bfg==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "extend": "^3.0.2",
+        "https-proxy-agent": "^7.0.1",
+        "node-fetch": "^3.3.2"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/gcp-metadata/node_modules/node-fetch": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-3.3.2.tgz",
+      "integrity": "sha512-dRB78srN/l6gqWulah9SrxeYnxeddIG30+GOqK/9OlLVyLg3HPnr6SqOWTWOXKRwC2eGYCkZ59NNuSgvSrpgOA==",
+      "license": "MIT",
+      "dependencies": {
+        "data-uri-to-buffer": "^4.0.0",
+        "fetch-blob": "^3.1.4",
+        "formdata-polyfill": "^4.0.10"
+      },
+      "engines": {
+        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/node-fetch"
+      }
+    },
     "node_modules/generator-function": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/generator-function/-/generator-function-2.0.1.tgz",
@@ -4821,7 +5575,7 @@
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.3.0.tgz",
       "integrity": "sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "call-bind-apply-helpers": "^1.0.2",
@@ -4846,7 +5600,7 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/get-proto/-/get-proto-1.0.1.tgz",
       "integrity": "sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "dunder-proto": "^1.0.1",
@@ -4977,17 +5731,242 @@
         "gopd": "^1.0.1"
       },
       "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/google-auth-library": {
+      "version": "10.9.0",
+      "resolved": "https://registry.npmjs.org/google-auth-library/-/google-auth-library-10.9.0.tgz",
+      "integrity": "sha512-xtvUqvINPhTaBm7nXqlYPcrMHJPm1lCNdSovxnKKhTm+4JsvQ+KGVYJViLoH9Yxu8w+T0Qv5HubzYT9BLrppJg==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "base64-js": "^1.3.0",
+        "ecdsa-sig-formatter": "^1.0.11",
+        "gaxios": "^7.1.4",
+        "gcp-metadata": "8.1.2",
+        "google-logging-utils": "1.1.3",
+        "jws": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/google-auth-library/node_modules/gaxios": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/gaxios/-/gaxios-7.2.0.tgz",
+      "integrity": "sha512-CUVb4wcYe+771XevyH6HtGmXFAGGKkIC3kswAP8Z1JCe0j80JMaTPZH930DWFrvo0atjh18Arc0pEyUCWa5bfg==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "extend": "^3.0.2",
+        "https-proxy-agent": "^7.0.1",
+        "node-fetch": "^3.3.2"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/google-auth-library/node_modules/node-fetch": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-3.3.2.tgz",
+      "integrity": "sha512-dRB78srN/l6gqWulah9SrxeYnxeddIG30+GOqK/9OlLVyLg3HPnr6SqOWTWOXKRwC2eGYCkZ59NNuSgvSrpgOA==",
+      "license": "MIT",
+      "dependencies": {
+        "data-uri-to-buffer": "^4.0.0",
+        "fetch-blob": "^3.1.4",
+        "formdata-polyfill": "^4.0.10"
+      },
+      "engines": {
+        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/node-fetch"
+      }
+    },
+    "node_modules/google-gax": {
+      "version": "5.0.7",
+      "resolved": "https://registry.npmjs.org/google-gax/-/google-gax-5.0.7.tgz",
+      "integrity": "sha512-EhiqaWWJ+9h7sCcKJTsoo6tMcjokVHhWsbSuWCnZJT4vIBP3y4mAoFLnt9SzgkVZeq24ZsFaArr06nnYYku2yA==",
+      "license": "Apache-2.0",
+      "optional": true,
+      "dependencies": {
+        "@grpc/grpc-js": "^1.12.6",
+        "@grpc/proto-loader": "^0.8.0",
+        "duplexify": "^4.1.3",
+        "google-auth-library": "10.5.0",
+        "google-logging-utils": "1.1.3",
+        "node-fetch": "^3.3.2",
+        "object-hash": "^3.0.0",
+        "proto3-json-serializer": "3.0.4",
+        "protobufjs": "^7.5.4",
+        "retry-request": "^8.0.2",
+        "rimraf": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/google-gax/node_modules/@grpc/grpc-js": {
+      "version": "1.14.4",
+      "resolved": "https://registry.npmjs.org/@grpc/grpc-js/-/grpc-js-1.14.4.tgz",
+      "integrity": "sha512-k9Dj3DV/itK9D06Y8f190Qgop7/Ui+D0njFV3LHMPwPT75DpXLQohE9Wmz0QElrJnzsjB7KPWiKJbOl7IPDArQ==",
+      "license": "Apache-2.0",
+      "optional": true,
+      "dependencies": {
+        "@grpc/proto-loader": "^0.8.0",
+        "@js-sdsl/ordered-map": "^4.4.2"
+      },
+      "engines": {
+        "node": ">=12.10.0"
+      }
+    },
+    "node_modules/google-gax/node_modules/@grpc/proto-loader": {
+      "version": "0.8.1",
+      "resolved": "https://registry.npmjs.org/@grpc/proto-loader/-/proto-loader-0.8.1.tgz",
+      "integrity": "sha512-wtF6h+DY6M3YaDBPAmvuuA6jV8Sif9MjtOI5euKFWRgCDl5PeDpPsHR9u2l6St5ceY8AZgoNDww5+HvEsXFsGg==",
+      "license": "Apache-2.0",
+      "optional": true,
+      "dependencies": {
+        "lodash.camelcase": "^4.3.0",
+        "long": "^5.0.0",
+        "protobufjs": "^7.5.5",
+        "yargs": "^17.7.2"
+      },
+      "bin": {
+        "proto-loader-gen-types": "build/bin/proto-loader-gen-types.js"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/google-gax/node_modules/gaxios": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/gaxios/-/gaxios-7.2.0.tgz",
+      "integrity": "sha512-CUVb4wcYe+771XevyH6HtGmXFAGGKkIC3kswAP8Z1JCe0j80JMaTPZH930DWFrvo0atjh18Arc0pEyUCWa5bfg==",
+      "license": "Apache-2.0",
+      "optional": true,
+      "dependencies": {
+        "extend": "^3.0.2",
+        "https-proxy-agent": "^7.0.1",
+        "node-fetch": "^3.3.2"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/google-gax/node_modules/google-auth-library": {
+      "version": "10.5.0",
+      "resolved": "https://registry.npmjs.org/google-auth-library/-/google-auth-library-10.5.0.tgz",
+      "integrity": "sha512-7ABviyMOlX5hIVD60YOfHw4/CxOfBhyduaYB+wbFWCWoni4N7SLcV46hrVRktuBbZjFC9ONyqamZITN7q3n32w==",
+      "license": "Apache-2.0",
+      "optional": true,
+      "dependencies": {
+        "base64-js": "^1.3.0",
+        "ecdsa-sig-formatter": "^1.0.11",
+        "gaxios": "^7.0.0",
+        "gcp-metadata": "^8.0.0",
+        "google-logging-utils": "^1.0.0",
+        "gtoken": "^8.0.0",
+        "jws": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/google-gax/node_modules/gtoken": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/gtoken/-/gtoken-8.0.0.tgz",
+      "integrity": "sha512-+CqsMbHPiSTdtSO14O51eMNlrp9N79gmeqmXeouJOhfucAedHw9noVe/n5uJk3tbKE6a+6ZCQg3RPhVhHByAIw==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "gaxios": "^7.0.0",
+        "jws": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/google-gax/node_modules/http-proxy-agent": {
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/http-proxy-agent/-/http-proxy-agent-7.0.2.tgz",
+      "integrity": "sha512-T1gkAiYYDWYx3V5Bmyu7HcfcvL7mUrTWiM6yOfa3PIphViJ/gFPbvidQ+veqSOHci/PxBcDabeUNCzpOODJZig==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "agent-base": "^7.1.0",
+        "debug": "^4.3.4"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
+    "node_modules/google-gax/node_modules/node-fetch": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-3.3.2.tgz",
+      "integrity": "sha512-dRB78srN/l6gqWulah9SrxeYnxeddIG30+GOqK/9OlLVyLg3HPnr6SqOWTWOXKRwC2eGYCkZ59NNuSgvSrpgOA==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "data-uri-to-buffer": "^4.0.0",
+        "fetch-blob": "^3.1.4",
+        "formdata-polyfill": "^4.0.10"
+      },
+      "engines": {
+        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/node-fetch"
+      }
+    },
+    "node_modules/google-gax/node_modules/retry-request": {
+      "version": "8.0.3",
+      "resolved": "https://registry.npmjs.org/retry-request/-/retry-request-8.0.3.tgz",
+      "integrity": "sha512-qqoc4kkGgP9cmQDWELlOpAmfgJOg0Yi7MT82ZjiPWu451ayju4itwomjM4/dBEliify8C1b3tSaeCOldugtwPQ==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "extend": "^3.0.2",
+        "teeny-request": "^10.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/google-gax/node_modules/teeny-request": {
+      "version": "10.1.3",
+      "resolved": "https://registry.npmjs.org/teeny-request/-/teeny-request-10.1.3.tgz",
+      "integrity": "sha512-5yDliI1uWkYPo7W+Zvrxg6YmoWuj5iC5EydewqrRTvc68nyMTZhlPPlLg6cptUGfbQAb+N9XDPDPzF6N081lug==",
+      "license": "Apache-2.0",
+      "optional": true,
+      "dependencies": {
+        "http-proxy-agent": "^7.0.0",
+        "https-proxy-agent": "^7.0.1",
+        "node-fetch": "^3.3.2",
+        "stream-events": "^1.0.5"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/google-logging-utils": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/google-logging-utils/-/google-logging-utils-1.1.3.tgz",
+      "integrity": "sha512-eAmLkjDjAFCVXg7A1unxHsLf961m6y17QFqXqAXGj/gVkKFrEICfStRfwUlGNfeCEjNRa32JEWOUTlYXPyyKvA==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=14"
       }
     },
     "node_modules/gopd": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.2.0.tgz",
       "integrity": "sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "engines": {
         "node": ">= 0.4"
@@ -5009,6 +5988,20 @@
       "integrity": "sha512-dMW4CWBTUK1AEEDeZc1g4xpPGIrSf9fJF960qbTZmN/QwZIWY5wgliS6JWl9/25fpTGJrMRtSjGtOmPnfjZB+A==",
       "license": "Standard 'no charge' license: https://gsap.com/standard-license."
     },
+    "node_modules/gtoken": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/gtoken/-/gtoken-7.1.0.tgz",
+      "integrity": "sha512-pCcEwRi+TKpMlxAQObHDQ56KawURgyAf6jtIY046fJ5tIv3zDe/LEIubckAO8fj6JnAxLdmWkUfNyulQ2iKdEw==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "gaxios": "^6.0.0",
+        "jws": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
     "node_modules/has-bigints": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/has-bigints/-/has-bigints-1.1.0.tgz",
@@ -5065,7 +6058,7 @@
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.1.0.tgz",
       "integrity": "sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "engines": {
         "node": ">= 0.4"
@@ -5078,7 +6071,7 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.2.tgz",
       "integrity": "sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "has-symbols": "^1.0.3"
@@ -5094,7 +6087,7 @@
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.4.tgz",
       "integrity": "sha512-T2UbfbBEF32wiepXIsMlTW9+dDYC6wMh/t/vYA4tuOMKqWz/n3vr1NFSxQiyP+zk2mXsoMA/i/7qV6LKut1t1A==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "function-bind": "^1.1.2"
@@ -5120,12 +6113,70 @@
         "hermes-estree": "0.25.1"
       }
     },
+    "node_modules/html-entities": {
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/html-entities/-/html-entities-2.6.0.tgz",
+      "integrity": "sha512-kig+rMn/QOVRvr7c86gQ8lWXq+Hkv6CbAH1hLu+RG338StTpE8Z0b44SDVaqVu7HGKf27frdmUYEs9hTUX/cLQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/mdevils"
+        },
+        {
+          "type": "patreon",
+          "url": "https://patreon.com/mdevils"
+        }
+      ],
+      "license": "MIT",
+      "optional": true
+    },
     "node_modules/http-parser-js": {
       "version": "0.5.10",
       "resolved": "https://registry.npmjs.org/http-parser-js/-/http-parser-js-0.5.10.tgz",
       "integrity": "sha512-Pysuw9XpUq5dVc/2SMHpuTY01RFl8fttgcyunjL7eEMhGM3cI4eOmiCycJDVCo/7O7ClfQD3SaI6ftDzqOXYMA==",
       "license": "MIT"
     },
+    "node_modules/http-proxy-agent": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/http-proxy-agent/-/http-proxy-agent-5.0.0.tgz",
+      "integrity": "sha512-n2hY8YdoRE1i7r6M0w9DIw5GgZN0G25P8zLCRQ8rjXtTU3vsNFBI/vWK/UIeE6g5MUUz6avwAPXmL6Fy9D/90w==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@tootallnate/once": "2",
+        "agent-base": "6",
+        "debug": "4"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/http-proxy-agent/node_modules/agent-base": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-6.0.2.tgz",
+      "integrity": "sha512-RZNwNclF7+MS/8bDg70amg32dyeZGZxiDuQmZxKLAlQjr3jGyLx+4Kkk58UO7D2QdgFIQCovuSuZESne6RG6XQ==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "debug": "4"
+      },
+      "engines": {
+        "node": ">= 6.0.0"
+      }
+    },
+    "node_modules/https-proxy-agent": {
+      "version": "7.0.6",
+      "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-7.0.6.tgz",
+      "integrity": "sha512-vK9P5/iUfdl95AI+JVyUuIcVtd4ofvtrOr3HNtM2yxC9bnMbEdp3x01OhQNnjb8IJYi38VlTE3mBXwcfvywuSw==",
+      "license": "MIT",
+      "dependencies": {
+        "agent-base": "^7.1.2",
+        "debug": "4"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
     "node_modules/idb": {
       "version": "7.1.1",
       "resolved": "https://registry.npmjs.org/idb/-/idb-7.1.1.tgz",
@@ -5169,6 +6220,13 @@
         "node": ">=0.8.19"
       }
     },
+    "node_modules/inherits": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
+      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
+      "license": "ISC",
+      "optional": true
+    },
     "node_modules/internal-slot": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/internal-slot/-/internal-slot-1.1.0.tgz",
@@ -5514,6 +6572,19 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/is-stream": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-2.0.1.tgz",
+      "integrity": "sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg==",
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/is-string": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/is-string/-/is-string-1.1.1.tgz",
@@ -5565,6 +6636,19 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/is-unsafe": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/is-unsafe/-/is-unsafe-2.0.0.tgz",
+      "integrity": "sha512-2LdV822R+wmI86unXA93WCFpL6g+av8ynWk0nrHyJqGop5VoocYsSLFgN8jrfalT6iGeLNM4KXuVSsULP53kEA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/NaturalIntelligence"
+        }
+      ],
+      "license": "MIT",
+      "optional": true
+    },
     "node_modules/is-weakmap": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/is-weakmap/-/is-weakmap-2.0.2.tgz",
@@ -5622,7 +6706,7 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
       "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
-      "dev": true,
+      "devOptional": true,
       "license": "ISC"
     },
     "node_modules/iterator.prototype": {
@@ -5643,6 +6727,22 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/jackspeak": {
+      "version": "3.4.3",
+      "resolved": "https://registry.npmjs.org/jackspeak/-/jackspeak-3.4.3.tgz",
+      "integrity": "sha512-OGlZQpz2yfahA/Rd1Y8Cd9SIEsqvXkLVoSw/cgwhnhFMDbsQFeZYoJJ7bIZBS9BcamUW96asq/npPWugM+RQBw==",
+      "license": "BlueOak-1.0.0",
+      "optional": true,
+      "dependencies": {
+        "@isaacs/cliui": "^8.0.2"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      },
+      "optionalDependencies": {
+        "@pkgjs/parseargs": "^0.11.0"
+      }
+    },
     "node_modules/jiti": {
       "version": "2.7.0",
       "resolved": "https://registry.npmjs.org/jiti/-/jiti-2.7.0.tgz",
@@ -5653,6 +6753,15 @@
         "jiti": "lib/jiti-cli.mjs"
       }
     },
+    "node_modules/jose": {
+      "version": "6.2.3",
+      "resolved": "https://registry.npmjs.org/jose/-/jose-6.2.3.tgz",
+      "integrity": "sha512-YYVDInQKFJfR/xa3ojUTl8c2KoTwiL1R5Wg9YCydwH0x0B9grbzlg5HC7mMjCtUJjbQ/YnGEZIhI5tCgfTb4Hw==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/panva"
+      }
+    },
     "node_modules/js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -5696,6 +6805,15 @@
         "node": ">=6"
       }
     },
+    "node_modules/json-bigint": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/json-bigint/-/json-bigint-1.0.0.tgz",
+      "integrity": "sha512-SiPv/8VpZuWbvLSMtTDU8hEfrZWg/mH/nV/b4o0CYbSxu1UIQPLdwKOCIyLQX+VIPO5vrLX3i8qtqFyhdPSUSQ==",
+      "license": "MIT",
+      "dependencies": {
+        "bignumber.js": "^9.0.0"
+      }
+    },
     "node_modules/json-buffer": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/json-buffer/-/json-buffer-3.0.1.tgz",
@@ -5730,6 +6848,28 @@
         "node": ">=6"
       }
     },
+    "node_modules/jsonwebtoken": {
+      "version": "9.0.3",
+      "resolved": "https://registry.npmjs.org/jsonwebtoken/-/jsonwebtoken-9.0.3.tgz",
+      "integrity": "sha512-MT/xP0CrubFRNLNKvxJ2BYfy53Zkm++5bX9dtuPbqAeQpTVe0MQTFhao8+Cp//EmJp244xt6Drw/GVEGCUj40g==",
+      "license": "MIT",
+      "dependencies": {
+        "jws": "^4.0.1",
+        "lodash.includes": "^4.3.0",
+        "lodash.isboolean": "^3.0.3",
+        "lodash.isinteger": "^4.0.4",
+        "lodash.isnumber": "^3.0.3",
+        "lodash.isplainobject": "^4.0.6",
+        "lodash.isstring": "^4.0.1",
+        "lodash.once": "^4.0.0",
+        "ms": "^2.1.1",
+        "semver": "^7.5.4"
+      },
+      "engines": {
+        "node": ">=12",
+        "npm": ">=6"
+      }
+    },
     "node_modules/jsx-ast-utils": {
       "version": "3.3.5",
       "resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-3.3.5.tgz",
@@ -5746,6 +6886,53 @@
         "node": ">=4.0"
       }
     },
+    "node_modules/jwa": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/jwa/-/jwa-2.0.1.tgz",
+      "integrity": "sha512-hRF04fqJIP8Abbkq5NKGN0Bbr3JxlQ+qhZufXVr0DvujKy93ZCbXZMHDL4EOtodSbCWxOqR8MS1tXA5hwqCXDg==",
+      "license": "MIT",
+      "dependencies": {
+        "buffer-equal-constant-time": "^1.0.1",
+        "ecdsa-sig-formatter": "1.0.11",
+        "safe-buffer": "^5.0.1"
+      }
+    },
+    "node_modules/jwks-rsa": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/jwks-rsa/-/jwks-rsa-4.1.0.tgz",
+      "integrity": "sha512-sbkByqyATKYJP5F4RXj03N5TUNC0QLTjCAZvwTzC4BwJZ8e0/cWxN8YROnyUth2g1/ONWi4eSFHeu6oYalrc3Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/jsonwebtoken": "^9.0.4",
+        "debug": "^4.3.4",
+        "jose": "^6.1.3",
+        "limiter": "^1.1.5",
+        "lru-cache": "^11.0.0",
+        "lru-memoizer": "^3.0.0"
+      },
+      "engines": {
+        "node": "^20.19.0 || ^22.12.0 || >= 23.0.0"
+      }
+    },
+    "node_modules/jwks-rsa/node_modules/lru-cache": {
+      "version": "11.5.2",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-11.5.2.tgz",
+      "integrity": "sha512-4pfM1Ff0x50o0tQwb5ucw/RzNyD0/YJME6IVcStalZuMWxdt3sR3huStTtxz4PUmvZfRguvDejasvQ2kifR11g==",
+      "license": "BlueOak-1.0.0",
+      "engines": {
+        "node": "20 || >=22"
+      }
+    },
+    "node_modules/jws": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/jws/-/jws-4.0.1.tgz",
+      "integrity": "sha512-EKI/M/yqPncGUUh44xz0PxSidXFr/+r0pA70+gIYhjv+et7yxM+s29Y+VGDkovRofQem0fs7Uvf4+YmAdyRduA==",
+      "license": "MIT",
+      "dependencies": {
+        "jwa": "^2.0.1",
+        "safe-buffer": "^5.0.1"
+      }
+    },
     "node_modules/keyv": {
       "version": "4.5.4",
       "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz",
@@ -6069,6 +7256,11 @@
         "url": "https://opencollective.com/parcel"
       }
     },
+    "node_modules/limiter": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/limiter/-/limiter-1.1.5.tgz",
+      "integrity": "sha512-FWWMIEOxz3GwUI4Ts/IvgVy6LPvoMPgjMdQ185nN6psJyBJ4yOpzqm695/h5umdLJg2vW3GR5iG11MAkR2AzJA=="
+    },
     "node_modules/locate-path": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
@@ -6091,6 +7283,48 @@
       "integrity": "sha512-TwuEnCnxbc3rAvhf/LbG7tJUDzhqXyFnv3dtzLOPgCG/hODL7WFnsbwktkD7yUV0RrreP/l1PALq/YSg6VvjlA==",
       "license": "MIT"
     },
+    "node_modules/lodash.clonedeep": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz",
+      "integrity": "sha512-H5ZhCF25riFd9uB5UCkVKo61m3S/xZk1x4wA6yp/L3RFP6Z/eHH1ymQcGLo7J3GMPfm0V/7m1tryHuGVxpqEBQ==",
+      "license": "MIT"
+    },
+    "node_modules/lodash.includes": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/lodash.includes/-/lodash.includes-4.3.0.tgz",
+      "integrity": "sha512-W3Bx6mdkRTGtlJISOvVD/lbqjTlPPUDTMnlXZFnVwi9NKJ6tiAk6LVdlhZMm17VZisqhKcgzpO5Wz91PCt5b0w==",
+      "license": "MIT"
+    },
+    "node_modules/lodash.isboolean": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/lodash.isboolean/-/lodash.isboolean-3.0.3.tgz",
+      "integrity": "sha512-Bz5mupy2SVbPHURB98VAcw+aHh4vRV5IPNhILUCsOzRmsTmSQ17jIuqopAentWoehktxGd9e/hbIXq980/1QJg==",
+      "license": "MIT"
+    },
+    "node_modules/lodash.isinteger": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/lodash.isinteger/-/lodash.isinteger-4.0.4.tgz",
+      "integrity": "sha512-DBwtEWN2caHQ9/imiNeEA5ys1JoRtRfY3d7V9wkqtbycnAmTvRRmbHKDV4a0EYc678/dia0jrte4tjYwVBaZUA==",
+      "license": "MIT"
+    },
+    "node_modules/lodash.isnumber": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/lodash.isnumber/-/lodash.isnumber-3.0.3.tgz",
+      "integrity": "sha512-QYqzpfwO3/CWf3XP+Z+tkQsfaLL/EnUlXWVkIk5FUPc4sBdTehEqZONuyRt2P67PXAk+NXmTBcc97zw9t1FQrw==",
+      "license": "MIT"
+    },
+    "node_modules/lodash.isplainobject": {
+      "version": "4.0.6",
+      "resolved": "https://registry.npmjs.org/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz",
+      "integrity": "sha512-oSXzaWypCMHkPC3NvBEaPHf0KsA5mvPrOPgQWDsbg8n7orZ290M0BmC/jgRZ4vcJ6DTAhjrsSYgdsW/F+MFOBA==",
+      "license": "MIT"
+    },
+    "node_modules/lodash.isstring": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/lodash.isstring/-/lodash.isstring-4.0.1.tgz",
+      "integrity": "sha512-0wJxfxH1wgO3GrbuP+dTTk7op+6L41QCXbGINEmD+ny/G/eCqGzxyCsh7159S+mgDDcoarnBw6PC1PS5+wUGgw==",
+      "license": "MIT"
+    },
     "node_modules/lodash.merge": {
       "version": "4.6.2",
       "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
@@ -6098,6 +7332,12 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/lodash.once": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/lodash.once/-/lodash.once-4.1.1.tgz",
+      "integrity": "sha512-Sb487aTOCr9drQVL8pIxOzVhafOjZN9UU54hiN8PU3uAiSV7lx1yYNpbNmex2PK6dSJoNTSJUUswT651yww3Mg==",
+      "license": "MIT"
+    },
     "node_modules/lodash.sortby": {
       "version": "4.7.0",
       "resolved": "https://registry.npmjs.org/lodash.sortby/-/lodash.sortby-4.7.0.tgz",
@@ -6133,6 +7373,25 @@
         "yallist": "^3.0.2"
       }
     },
+    "node_modules/lru-memoizer": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/lru-memoizer/-/lru-memoizer-3.0.0.tgz",
+      "integrity": "sha512-m83w/cYXLdUIboKSPxzPAGfYnk+vqeDYXuoSrQRw1q+yVEd8IXhvMufN8Q5TIPe7e2jyX4SRNrDJI2Skw1yznQ==",
+      "license": "MIT",
+      "dependencies": {
+        "lodash.clonedeep": "^4.5.0",
+        "lru-cache": "^11.0.1"
+      }
+    },
+    "node_modules/lru-memoizer/node_modules/lru-cache": {
+      "version": "11.5.2",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-11.5.2.tgz",
+      "integrity": "sha512-4pfM1Ff0x50o0tQwb5ucw/RzNyD0/YJME6IVcStalZuMWxdt3sR3huStTtxz4PUmvZfRguvDejasvQ2kifR11g==",
+      "license": "BlueOak-1.0.0",
+      "engines": {
+        "node": "20 || >=22"
+      }
+    },
     "node_modules/lucide-react": {
       "version": "1.24.0",
       "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-1.24.0.tgz",
@@ -6156,7 +7415,7 @@
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
       "integrity": "sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "engines": {
         "node": ">= 0.4"
@@ -6186,6 +7445,42 @@
         "node": ">=8.6"
       }
     },
+    "node_modules/mime": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/mime/-/mime-3.0.0.tgz",
+      "integrity": "sha512-jSCU7/VB1loIWBZe14aEYHU/+1UMEHoaO7qxCOVJOw9GgH72VAWppxNcjU+x9a2k3GSIBXNKxXQFqRvvZ7vr3A==",
+      "license": "MIT",
+      "optional": true,
+      "bin": {
+        "mime": "cli.js"
+      },
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
+    "node_modules/mime-db": {
+      "version": "1.52.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
+      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/mime-types": {
+      "version": "2.1.35",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
+      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "mime-db": "1.52.0"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
     "node_modules/minimatch": {
       "version": "3.1.5",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.5.tgz",
@@ -6222,7 +7517,6 @@
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
       "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/nanoid": {
@@ -6319,6 +7613,33 @@
         }
       }
     },
+    "node_modules/next-auth": {
+      "version": "5.0.0-beta.31",
+      "resolved": "https://registry.npmjs.org/next-auth/-/next-auth-5.0.0-beta.31.tgz",
+      "integrity": "sha512-1OBgCKPzo+S7UWWMp3xgvGvIJ0OpV7B3vR4ZDRqD9a4Ch+OT6dakLXG9ivhtmIWVa71nTSXattOHyCg8sNi8/Q==",
+      "license": "ISC",
+      "dependencies": {
+        "@auth/core": "0.41.2"
+      },
+      "peerDependencies": {
+        "@simplewebauthn/browser": "^9.0.1",
+        "@simplewebauthn/server": "^9.0.2",
+        "next": "^14.0.0-0 || ^15.0.0 || ^16.0.0",
+        "nodemailer": "^7.0.7",
+        "react": "^18.2.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@simplewebauthn/browser": {
+          "optional": true
+        },
+        "@simplewebauthn/server": {
+          "optional": true
+        },
+        "nodemailer": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/next/node_modules/postcss": {
       "version": "8.4.31",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",
@@ -6347,6 +7668,26 @@
         "node": "^10 || ^12 || >=14"
       }
     },
+    "node_modules/node-domexception": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/node-domexception/-/node-domexception-1.0.0.tgz",
+      "integrity": "sha512-/jKZoMpw0F8GRwl4/eLROPA3cfcXtLApP0QzLmUT/HuPCZWyB7IY9ZrMeKw2O/nFIqPQB3PVM9aYm0F312AXDQ==",
+      "deprecated": "Use your platform's native DOMException instead",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/jimmywarting"
+        },
+        {
+          "type": "github",
+          "url": "https://paypal.me/jimmywarting"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">=10.5.0"
+      }
+    },
     "node_modules/node-exports-info": {
       "version": "1.6.2",
       "resolved": "https://registry.npmjs.org/node-exports-info/-/node-exports-info-1.6.2.tgz",
@@ -6376,6 +7717,52 @@
         "semver": "bin/semver.js"
       }
     },
+    "node_modules/node-fetch": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.7.0.tgz",
+      "integrity": "sha512-c4FRfUm/dbcWZ7U+1Wq0AwCyFL+3nt2bEw05wfxSz+DWpWsitgmSgYmy2dQdWyKC1694ELPqMs/YzUSNozLt8A==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "whatwg-url": "^5.0.0"
+      },
+      "engines": {
+        "node": "4.x || >=6.0.0"
+      },
+      "peerDependencies": {
+        "encoding": "^0.1.0"
+      },
+      "peerDependenciesMeta": {
+        "encoding": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/node-fetch/node_modules/tr46": {
+      "version": "0.0.3",
+      "resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz",
+      "integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==",
+      "license": "MIT",
+      "optional": true
+    },
+    "node_modules/node-fetch/node_modules/webidl-conversions": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz",
+      "integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==",
+      "license": "BSD-2-Clause",
+      "optional": true
+    },
+    "node_modules/node-fetch/node_modules/whatwg-url": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz",
+      "integrity": "sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "tr46": "~0.0.3",
+        "webidl-conversions": "^3.0.0"
+      }
+    },
     "node_modules/node-releases": {
       "version": "2.0.51",
       "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.51.tgz",
@@ -6385,6 +7772,15 @@
         "node": ">=18"
       }
     },
+    "node_modules/oauth4webapi": {
+      "version": "3.8.6",
+      "resolved": "https://registry.npmjs.org/oauth4webapi/-/oauth4webapi-3.8.6.tgz",
+      "integrity": "sha512-iwemM91xz8nryHti2yTmg5fhyEMVOkOXwHNqbvcATjyajb5oQxCQzrNOA6uElRHuMhQQTKUyFKV9y/CNyg25BQ==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/panva"
+      }
+    },
     "node_modules/object-assign": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
@@ -6395,6 +7791,16 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/object-hash": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/object-hash/-/object-hash-3.0.0.tgz",
+      "integrity": "sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==",
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/object-inspect": {
       "version": "1.13.4",
       "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.4.tgz",
@@ -6508,6 +7914,16 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/once": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
+      "integrity": "sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==",
+      "license": "ISC",
+      "optional": true,
+      "dependencies": {
+        "wrappy": "1"
+      }
+    },
     "node_modules/optionator": {
       "version": "0.9.4",
       "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.4.tgz",
@@ -6548,7 +7964,7 @@
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz",
       "integrity": "sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "yocto-queue": "^0.1.0"
@@ -6576,6 +7992,13 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/package-json-from-dist": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/package-json-from-dist/-/package-json-from-dist-1.0.1.tgz",
+      "integrity": "sha512-UEZIS3/by4OC8vL3P2dTXRETpebLI2NiI5vIrjaD/5UtrkFX/tNbwjTSRAGC/+7CAo2pIcBaRgWmcBBHcsaCIw==",
+      "license": "BlueOak-1.0.0",
+      "optional": true
+    },
     "node_modules/parent-module": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
@@ -6599,11 +8022,27 @@
         "node": ">=8"
       }
     },
+    "node_modules/path-expression-matcher": {
+      "version": "1.6.2",
+      "resolved": "https://registry.npmjs.org/path-expression-matcher/-/path-expression-matcher-1.6.2.tgz",
+      "integrity": "sha512-enSlaiat05iasnzmgNxRj8reFdj3puY2QpNgP1aPIaVfT6nn9ICuPoFlKHk8EN22HcwewshO+mN2DGbkCEOtqQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/NaturalIntelligence"
+        }
+      ],
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
     "node_modules/path-key": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
       "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "engines": {
         "node": ">=8"
@@ -6699,6 +8138,25 @@
         "node": "^10 || ^12 || >=14"
       }
     },
+    "node_modules/preact": {
+      "version": "10.24.3",
+      "resolved": "https://registry.npmjs.org/preact/-/preact-10.24.3.tgz",
+      "integrity": "sha512-Z2dPnBnMUfyQfSQ+GBdsGa16hz35YmLmtTLhM169uW944hYL6xzTYkJjC07j+Wosz733pMWx0fgON3JNw1jJQA==",
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/preact"
+      }
+    },
+    "node_modules/preact-render-to-string": {
+      "version": "6.5.11",
+      "resolved": "https://registry.npmjs.org/preact-render-to-string/-/preact-render-to-string-6.5.11.tgz",
+      "integrity": "sha512-ubnauqoGczeGISiOh6RjX0/cdaF8v/oDXIjO85XALCQjwQP+SB4RDXXtvZ6yTYSjG+PC1QRP2AhPgCEsM2EvUw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "preact": ">=10"
+      }
+    },
     "node_modules/prelude-ls": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
@@ -6733,6 +8191,19 @@
         "react-is": "^16.13.1"
       }
     },
+    "node_modules/proto3-json-serializer": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/proto3-json-serializer/-/proto3-json-serializer-3.0.4.tgz",
+      "integrity": "sha512-E1sbAYg3aEbXrq0n1ojJkRHQJGE1kaE/O6GLA94y8rnJBfgvOPTOd1b9hOceQK1FFZI9qMh1vBERCyO2ifubcw==",
+      "license": "Apache-2.0",
+      "optional": true,
+      "dependencies": {
+        "protobufjs": "^7.4.0"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/protobufjs": {
       "version": "7.6.5",
       "resolved": "https://registry.npmjs.org/protobufjs/-/protobufjs-7.6.5.tgz",
@@ -6820,6 +8291,21 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/readable-stream": {
+      "version": "3.6.2",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
+      "integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "inherits": "^2.0.3",
+        "string_decoder": "^1.1.1",
+        "util-deprecate": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/reflect.getprototypeof": {
       "version": "1.0.10",
       "resolved": "https://registry.npmjs.org/reflect.getprototypeof/-/reflect.getprototypeof-1.0.10.tgz",
@@ -6917,6 +8403,31 @@
         "url": "https://github.com/privatenumber/resolve-pkg-maps?sponsor=1"
       }
     },
+    "node_modules/retry": {
+      "version": "0.13.1",
+      "resolved": "https://registry.npmjs.org/retry/-/retry-0.13.1.tgz",
+      "integrity": "sha512-XQBQ3I8W1Cge0Seh+6gjj03LbmRFWuoszgK9ooCpwYIrhhoO80pfq4cUkU5DkknwfOfFteRwlZ56PYOGYyFWdg==",
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">= 4"
+      }
+    },
+    "node_modules/retry-request": {
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/retry-request/-/retry-request-7.0.2.tgz",
+      "integrity": "sha512-dUOvLMJ0/JJYEn8NrpOaGNE7X3vpI5XlZS/u0ANjqtcZVKnIxP7IgCFwrKTxENw29emmwug53awKtaMm4i9g5w==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@types/request": "^2.48.8",
+        "extend": "^3.0.2",
+        "teeny-request": "^9.0.0"
+      },
+      "engines": {
+        "node": ">=14"
+      }
+    },
     "node_modules/reusify": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.1.0.tgz",
@@ -6928,6 +8439,94 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/rimraf": {
+      "version": "5.0.10",
+      "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-5.0.10.tgz",
+      "integrity": "sha512-l0OE8wL34P4nJH/H2ffoaniAokM2qSmrtXHmlpvYr5AVVX8msAyW0l8NVJFDxlSK4u3Uh/f41cQheDVdnYijwQ==",
+      "license": "ISC",
+      "optional": true,
+      "dependencies": {
+        "glob": "^10.3.7"
+      },
+      "bin": {
+        "rimraf": "dist/esm/bin.mjs"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/rimraf/node_modules/brace-expansion": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.1.2.tgz",
+      "integrity": "sha512-w5JZcKgdhDOgOwm8H+KgbosopHMuGcl6qbulwjtz3SM7I7P3yW1eAjzMPLrIE+NQ9vjgANKHWeMHnrT0OXW1oA==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "balanced-match": "^1.0.0"
+      }
+    },
+    "node_modules/rimraf/node_modules/glob": {
+      "version": "10.5.0",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-10.5.0.tgz",
+      "integrity": "sha512-DfXN8DfhJ7NH3Oe7cFmu3NCu1wKbkReJ8TorzSAFbSKrlNaQSKfIzqYqVY8zlbs2NLBbWpRiU52GX2PbaBVNkg==",
+      "deprecated": "Old versions of glob are not supported, and contain widely publicized security vulnerabilities, which have been fixed in the current version. Please update. Support for old versions may be purchased (at exorbitant rates) by contacting i@izs.me",
+      "license": "ISC",
+      "optional": true,
+      "dependencies": {
+        "foreground-child": "^3.1.0",
+        "jackspeak": "^3.1.2",
+        "minimatch": "^9.0.4",
+        "minipass": "^7.1.2",
+        "package-json-from-dist": "^1.0.0",
+        "path-scurry": "^1.11.1"
+      },
+      "bin": {
+        "glob": "dist/esm/bin.mjs"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/rimraf/node_modules/lru-cache": {
+      "version": "10.4.3",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.4.3.tgz",
+      "integrity": "sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==",
+      "license": "ISC",
+      "optional": true
+    },
+    "node_modules/rimraf/node_modules/minimatch": {
+      "version": "9.0.9",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.9.tgz",
+      "integrity": "sha512-OBwBN9AL4dqmETlpS2zasx+vTeWclWzkblfZk7KTA5j3jeOONz/tRCnZomUyvNg83wL5Zv9Ss6HMJXAgL8R2Yg==",
+      "license": "ISC",
+      "optional": true,
+      "dependencies": {
+        "brace-expansion": "^2.0.2"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/rimraf/node_modules/path-scurry": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/path-scurry/-/path-scurry-1.11.1.tgz",
+      "integrity": "sha512-Xa4Nw17FS9ApQFJ9umLiJS4orGjm7ZzwUrwamcGQuHSzDyth9boKDaycYdDcZDuqYATXw4HFXgaqWTctW/v1HA==",
+      "license": "BlueOak-1.0.0",
+      "optional": true,
+      "dependencies": {
+        "lru-cache": "^10.2.0",
+        "minipass": "^5.0.0 || ^6.0.2 || ^7.0.0"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
     "node_modules/run-parallel": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
@@ -7167,7 +8766,7 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
       "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "shebang-regex": "^3.0.0"
@@ -7180,7 +8779,7 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
       "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "engines": {
         "node": ">=8"
@@ -7262,6 +8861,19 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/signal-exit": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz",
+      "integrity": "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==",
+      "license": "ISC",
+      "optional": true,
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
     "node_modules/source-map": {
       "version": "0.8.0-beta.0",
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.8.0-beta.0.tgz",
@@ -7305,6 +8917,33 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/stream-events": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/stream-events/-/stream-events-1.0.5.tgz",
+      "integrity": "sha512-E1GUzBSgvct8Jsb3v2X15pjzN1tYebtbLaMg+eBOUOAxgbLoSbT2NS91ckc5lJD1KfLjId+jXJRgo0qnV5Nerg==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "stubs": "^3.0.0"
+      }
+    },
+    "node_modules/stream-shift": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/stream-shift/-/stream-shift-1.0.3.tgz",
+      "integrity": "sha512-76ORR0DO1o1hlKwTbi/DM3EXWGf3ZJYO8cXX5RJwnul2DEg2oyoZyjLNoQM8WsvZiFKCRfC1O0J7iCvie3RZmQ==",
+      "license": "MIT",
+      "optional": true
+    },
+    "node_modules/string_decoder": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz",
+      "integrity": "sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "safe-buffer": "~5.2.0"
+      }
+    },
     "node_modules/string-width": {
       "version": "4.2.3",
       "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
@@ -7319,6 +8958,29 @@
         "node": ">=8"
       }
     },
+    "node_modules/string-width-cjs": {
+      "name": "string-width",
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/string-width-cjs/node_modules/emoji-regex": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+      "license": "MIT",
+      "optional": true
+    },
     "node_modules/string-width/node_modules/emoji-regex": {
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
@@ -7451,6 +9113,20 @@
         "node": ">=8"
       }
     },
+    "node_modules/strip-ansi-cjs": {
+      "name": "strip-ansi",
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/strip-bom": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-3.0.0.tgz",
@@ -7474,6 +9150,29 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/strnum": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/strnum/-/strnum-2.4.1.tgz",
+      "integrity": "sha512-M9eUSMT2dCB2cTNPG7UYj6KuK7RJR2SN2+yCV/fTW3xzTCS6EaGZ5pSMgDIjB7r8zSfTGk+dvvn9rTjpVS9Mwg==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/NaturalIntelligence"
+        }
+      ],
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "anynum": "^1.0.1"
+      }
+    },
+    "node_modules/stubs": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/stubs/-/stubs-3.0.0.tgz",
+      "integrity": "sha512-PdHt7hHUJKxvTCgbKX9C1V/ftOcjJQgz8BZwNfV5c4B6dcGqlpelTbJ999jBGZ2jYiPAwcX5dP6oBwVlBlUbxw==",
+      "license": "MIT",
+      "optional": true
+    },
     "node_modules/styled-jsx": {
       "version": "5.1.6",
       "resolved": "https://registry.npmjs.org/styled-jsx/-/styled-jsx-5.1.6.tgz",
@@ -7556,6 +9255,50 @@
         "url": "https://opencollective.com/webpack"
       }
     },
+    "node_modules/teeny-request": {
+      "version": "9.0.0",
+      "resolved": "https://registry.npmjs.org/teeny-request/-/teeny-request-9.0.0.tgz",
+      "integrity": "sha512-resvxdc6Mgb7YEThw6G6bExlXKkv6+YbuzGg9xuXxSgxJF7Ozs+o8Y9+2R3sArdWdW8nOokoQb1yrpFB0pQK2g==",
+      "license": "Apache-2.0",
+      "optional": true,
+      "dependencies": {
+        "http-proxy-agent": "^5.0.0",
+        "https-proxy-agent": "^5.0.0",
+        "node-fetch": "^2.6.9",
+        "stream-events": "^1.0.5",
+        "uuid": "^9.0.0"
+      },
+      "engines": {
+        "node": ">=14"
+      }
+    },
+    "node_modules/teeny-request/node_modules/agent-base": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-6.0.2.tgz",
+      "integrity": "sha512-RZNwNclF7+MS/8bDg70amg32dyeZGZxiDuQmZxKLAlQjr3jGyLx+4Kkk58UO7D2QdgFIQCovuSuZESne6RG6XQ==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "debug": "4"
+      },
+      "engines": {
+        "node": ">= 6.0.0"
+      }
+    },
+    "node_modules/teeny-request/node_modules/https-proxy-agent": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-5.0.1.tgz",
+      "integrity": "sha512-dFcAjpTQFgoLMzC2VwU+C/CbS7uRL0lWmxDITmqm7C+7F0Odmj6s9l6alZc6AELXhrnggM2CeWSXHGOdX2YtwA==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "agent-base": "6",
+        "debug": "4"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/tinyglobby": {
       "version": "0.2.17",
       "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.17.tgz",
@@ -7918,6 +9661,37 @@
         "punycode": "^2.1.0"
       }
     },
+    "node_modules/util-deprecate": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
+      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
+      "license": "MIT",
+      "optional": true
+    },
+    "node_modules/uuid": {
+      "version": "9.0.1",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-9.0.1.tgz",
+      "integrity": "sha512-b+1eJOlsR9K8HJpow9Ok3fiWOWSIcIzXodvv0rQjVoOVNpWMpxf1wZNpt4y9h10odCNrqnYp1OBzRktckBe3sA==",
+      "deprecated": "uuid@10 and below is no longer supported.  For ESM codebases, update to uuid@latest.  For CommonJS codebases, use uuid@11 (but be aware this version will likely be deprecated in 2028).",
+      "funding": [
+        "https://github.com/sponsors/broofa",
+        "https://github.com/sponsors/ctavan"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "bin": {
+        "uuid": "dist/bin/uuid"
+      }
+    },
+    "node_modules/web-streams-polyfill": {
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/web-streams-polyfill/-/web-streams-polyfill-3.3.3.tgz",
+      "integrity": "sha512-d2JWLCivmZYTSIoge9MsgFCZrt571BikcWGYkjC1khllbTeDlGqZ2D8vD8E/lJa8WGWbb7Plm8/XJYV7IJHZZw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 8"
+      }
+    },
     "node_modules/web-vitals": {
       "version": "4.2.4",
       "resolved": "https://registry.npmjs.org/web-vitals/-/web-vitals-4.2.4.tgz",
@@ -7968,7 +9742,7 @@
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
       "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
-      "dev": true,
+      "devOptional": true,
       "license": "ISC",
       "dependencies": {
         "isexe": "^2.0.0"
@@ -8096,6 +9870,48 @@
         "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
       }
     },
+    "node_modules/wrap-ansi-cjs": {
+      "name": "wrap-ansi",
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
+      "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "ansi-styles": "^4.0.0",
+        "string-width": "^4.1.0",
+        "strip-ansi": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+      }
+    },
+    "node_modules/wrappy": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
+      "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==",
+      "license": "ISC",
+      "optional": true
+    },
+    "node_modules/xml-naming": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/xml-naming/-/xml-naming-0.3.0.tgz",
+      "integrity": "sha512-ghig2TBE/H11aOVgmahA3MhimvkBr6JIYknH/Dhdk10nXwdbIqBJsbfMxpvFPG8bAw77gN29aQWvKpmVoPlvPQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/NaturalIntelligence"
+        }
+      ],
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">=16.0.0"
+      }
+    },
     "node_modules/y18n": {
       "version": "5.0.8",
       "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz",
@@ -8143,7 +9959,7 @@
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
       "integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "engines": {
         "node": ">=10"
diff --git a/package.json b/package.json
index ba80221..3150a73 100644
--- a/package.json
+++ b/package.json
@@ -13,9 +13,11 @@
     "dexie": "^4.4.4",
     "dexie-react-hooks": "^4.4.0",
     "firebase": "^12.16.0",
+    "firebase-admin": "^14.1.0",
     "gsap": "^3.15.0",
     "lucide-react": "^1.24.0",
     "next": "16.2.10",
+    "next-auth": "^5.0.0-beta.31",
     "react": "19.2.4",
     "react-dom": "19.2.4",
     "serwist": "^9.5.11"

From 28ad76804024c27d11344997c9330cee8de00661 Mon Sep 17 00:00:00 2001
From: "Mateo, Noel John" <noelmateo126@gmail.com>
Date: Fri, 17 Jul 2026 03:55:48 +0800
Subject: [PATCH 16/22] Update next.config.ts

---
 next.config.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/next.config.ts b/next.config.ts
index e6f039f..d5b6e6b 100644
--- a/next.config.ts
+++ b/next.config.ts
@@ -17,6 +17,7 @@ const withSerwist = withSerwistInit({
 
 const nextConfig: NextConfig = {
   /* config options here */
+  serverExternalPackages: ["firebase-admin"],
 };
 
 export default withSerwist(nextConfig);

From b0b4178fb44d756ef8735e128bec5a9e83015a14 Mon Sep 17 00:00:00 2001
From: "Mateo, Noel John" <noelmateo126@gmail.com>
Date: Fri, 17 Jul 2026 04:14:41 +0800
Subject: [PATCH 17/22] rawr

---
 app/api/auth/[...nextauth]/route.ts | 2 ++
 app/api/firebase-token/route.ts     | 2 ++
 next.config.ts                      | 2 +-
 package-lock.json                   | 9 +++++++++
 package.json                        | 5 +++++
 5 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/app/api/auth/[...nextauth]/route.ts b/app/api/auth/[...nextauth]/route.ts
index 86c9f3d..eeb4cb5 100644
--- a/app/api/auth/[...nextauth]/route.ts
+++ b/app/api/auth/[...nextauth]/route.ts
@@ -1,3 +1,5 @@
+export const runtime = "nodejs";
+
 import { handlers } from "@/auth";
 
 export const { GET, POST } = handlers;
diff --git a/app/api/firebase-token/route.ts b/app/api/firebase-token/route.ts
index a7bfea4..7e613f0 100644
--- a/app/api/firebase-token/route.ts
+++ b/app/api/firebase-token/route.ts
@@ -1,3 +1,5 @@
+export const runtime = "nodejs";
+
 import { NextResponse } from "next/server";
 import { auth } from "@/auth";
 import { getAdminAuth } from "@/lib/firebaseAdmin";
diff --git a/next.config.ts b/next.config.ts
index d5b6e6b..5664ed6 100644
--- a/next.config.ts
+++ b/next.config.ts
@@ -17,7 +17,7 @@ const withSerwist = withSerwistInit({
 
 const nextConfig: NextConfig = {
   /* config options here */
-  serverExternalPackages: ["firebase-admin"],
+  serverExternalPackages: ["firebase-admin", "google-auth-library", "gaxios", "gcp-metadata", "jose", "jwks-rsa"],
 };
 
 export default withSerwist(nextConfig);
diff --git a/package-lock.json b/package-lock.json
index 1613ac5..6751e67 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -6914,6 +6914,15 @@
         "node": "^20.19.0 || ^22.12.0 || >= 23.0.0"
       }
     },
+    "node_modules/jwks-rsa/node_modules/jose": {
+      "version": "4.15.9",
+      "resolved": "https://registry.npmjs.org/jose/-/jose-4.15.9.tgz",
+      "integrity": "sha512-1vUQX+IdDMVPj4k8kOxgUqlcK518yluMuGZwqlr44FS1ppZB/5GWh4rZG89erpOBOJjU/OBsnCVFfapsRz6nEA==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/panva"
+      }
+    },
     "node_modules/jwks-rsa/node_modules/lru-cache": {
       "version": "11.5.2",
       "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-11.5.2.tgz",
diff --git a/package.json b/package.json
index 3150a73..f45af50 100644
--- a/package.json
+++ b/package.json
@@ -31,5 +31,10 @@
     "eslint-config-next": "16.2.10",
     "tailwindcss": "^4",
     "typescript": "^5"
+  },
+  "overrides": {
+    "jwks-rsa": {
+      "jose": "4.15.9"
+    }
   }
 }

From d7043d7bc96a43e53760ba8c2ef3d463bf3e4223 Mon Sep 17 00:00:00 2001
From: "Mateo, Noel John" <noelmateo126@gmail.com>
Date: Fri, 17 Jul 2026 18:58:37 +0800
Subject: [PATCH 18/22] to be continued

hehe
---
 app/db.ts                      |  24 ++++-
 app/globals.css                |  82 +++++++++++++++
 app/map/page.tsx               | 102 ++++++++++++++++++
 app/page.tsx                   | 184 +++++++++++++++++++++++++--------
 app/sw.ts                      |  21 +++-
 components/SpotDetailModal.tsx |   3 +-
 components/SpotsMap.tsx        | 140 +++++++++++++++++++++++++
 lib/auth.tsx                   |  36 ++++---
 lib/firebase.ts                |  14 +--
 lib/firestore.ts               |  63 +++++++++++
 lib/offlineSync.ts             |  31 ++++--
 lib/storage.ts                 |  79 --------------
 package-lock.json              |  25 +++++
 package.json                   |   2 +
 storage.rules                  |   4 +
 utils/image.ts                 |  55 +++++++++-
 16 files changed, 694 insertions(+), 171 deletions(-)
 create mode 100644 app/map/page.tsx
 create mode 100644 components/SpotsMap.tsx
 delete mode 100644 lib/storage.ts

diff --git a/app/db.ts b/app/db.ts
index 82374f8..a402e59 100644
--- a/app/db.ts
+++ b/app/db.ts
@@ -19,8 +19,8 @@ export interface FoodSpotLog {
   userId?: string;
   /** True when the entry has been saved locally but not yet synced to Firestore. */
   pendingSync?: boolean;
-  /** Firebase Storage download URL for the full-resolution image. */
-  downloadURL?: string;
+  latitude?: number;
+  longitude?: number;
 }
 
 /** Full-resolution image associated with a spot (one image per spot). */
@@ -121,6 +121,26 @@ class KeepCheckDB extends Dexie {
             }
           })
       );
+
+    // v6 — adds `latitude` and `longitude` fields to spots for the map view.
+    this.version(6)
+      .stores({
+        spots: "++id, name, category, rating, createdAt, firebaseId, userId, pendingSync",
+        images: "++id, spotId, createdAt, firebaseId",
+      })
+      .upgrade((tx) =>
+        tx
+          .table<FoodSpotLog>("spots")
+          .toCollection()
+          .modify((spot) => {
+            if (spot.latitude === undefined) {
+              spot.latitude = undefined;
+            }
+            if (spot.longitude === undefined) {
+              spot.longitude = undefined;
+            }
+          })
+      );
   }
 }
 
diff --git a/app/globals.css b/app/globals.css
index eafd145..491270b 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -654,5 +654,87 @@ body {
   }
 }
 
+/* ================================================================== */
+/*  LEAFLET MAP INTEGRATION & POPUP THEME                             */
+/* ================================================================== */
+
+/* Container resets and theme bindings */
+.leaflet-container {
+  background: var(--bg) !important;
+  font-family: var(--font-work-sans), sans-serif !important;
+}
+
+/* Custom popups matching Neumorphism colors and styles */
+.leaflet-popup-content-wrapper {
+  background: var(--surface) !important;
+  color: var(--text-primary) !important;
+  border-radius: 1.25rem !important; /* 20px matching rounded-3xl/2xl cards */
+  border: 1px solid rgba(107, 93, 79, 0.15) !important; /* using fallback border */
+  box-shadow: var(--neu-shadow-raised) !important;
+  padding: 0 !important;
+}
+
+.leaflet-popup-tip {
+  background: var(--surface) !important;
+  border: 1px solid rgba(107, 93, 79, 0.15) !important;
+}
+
+.leaflet-popup-content {
+  margin: 12px !important;
+  font-family: var(--font-work-sans), sans-serif !important;
+  font-size: 0.875rem !important;
+  line-height: 1.25 !important;
+}
+
+.leaflet-popup-close-button {
+  color: var(--text-secondary) !important;
+  padding: 8px !important;
+  top: 4px !important;
+  right: 4px !important;
+  font-size: 14px !important;
+}
+
+.leaflet-popup-close-button:hover {
+  background: transparent !important;
+  color: var(--accent) !important;
+}
+
+/* Zoom controls customization */
+.leaflet-bar {
+  border: none !important;
+  box-shadow: var(--neu-shadow-button) !important;
+  border-radius: 12px !important;
+  overflow: hidden;
+  background: var(--surface) !important;
+}
+
+.leaflet-bar a {
+  background-color: var(--surface) !important;
+  color: var(--text-primary) !important;
+  border-bottom: 1px solid rgba(107, 93, 79, 0.15) !important;
+  transition: all 0.2s ease;
+}
+
+.leaflet-bar a:hover {
+  color: var(--accent) !important;
+  background-color: var(--bg) !important;
+}
+
+.leaflet-bar a:first-child {
+  border-top-left-radius: 12px !important;
+  border-top-right-radius: 12px !important;
+}
+
+.leaflet-bar a:last-child {
+  border-bottom-left-radius: 12px !important;
+  border-bottom-right-radius: 12px !important;
+  border-bottom: none !important;
+}
+
+/* Dark mode map tile filter */
+.dark .leaflet-tile-container {
+  filter: invert(100%) hue-rotate(180deg) brightness(95%) contrast(90%);
+}
+
 
 
diff --git a/app/map/page.tsx b/app/map/page.tsx
new file mode 100644
index 0000000..af75c88
--- /dev/null
+++ b/app/map/page.tsx
@@ -0,0 +1,102 @@
+"use client";
+
+import { useLiveQuery } from "dexie-react-hooks";
+import { db, type FoodSpotLog } from "../db";
+import Link from "next/link";
+import dynamic from "next/dynamic";
+import { ChevronLeft } from "lucide-react";
+import AuthGuard from "@/components/AuthGuard";
+import { useAuth } from "@/lib/auth";
+
+// Dynamically import the map component with SSR disabled
+const SpotsMap = dynamic(() => import("@/components/SpotsMap"), {
+  ssr: false,
+  loading: () => (
+    <div className="py-20 text-center text-sm font-mono text-text-secondary animate-pulse neu-raised rounded-2xl bg-bg/40 border border-text-secondary/15 h-[450px] flex items-center justify-center">
+      Loading Map Engine…
+    </div>
+  ),
+});
+
+export default function MapPage() {
+  const { user } = useAuth();
+  
+  // Query spots from Dexie. We only fetch if the user is authenticated.
+  const spots = useLiveQuery<FoodSpotLog[]>(
+    () => {
+      if (!user) return [];
+      return db.spots.where("userId").equals(user.uid).toArray();
+    },
+    [user]
+  );
+
+  // Filter spots that have both coordinates
+  const geotaggedSpots = spots
+    ? spots.filter((spot) => spot.latitude !== undefined && spot.longitude !== undefined)
+    : [];
+
+  return (
+    <AuthGuard>
+      {/* ---- Background blobs (GPU-contained) ---- */}
+      <div className="pointer-events-none fixed inset-0 overflow-hidden opacity-40 blob-container" style={{ filter: "url(#gooey-bg)" }}>
+        <div className="animate-blob-1 absolute -top-32 -left-32 h-80 w-80 rounded-full bg-accent/10" />
+        <div className="animate-blob-2 absolute -bottom-40 -right-24 h-96 w-96 rounded-full bg-category-cafe/10" />
+        <div className="animate-blob-3 absolute top-1/2 left-1/3 h-56 w-56 rounded-full bg-category-restaurant/10" />
+      </div>
+
+      {/* SVG Gooey filters for background */}
+      <svg className="absolute h-0 w-0" aria-hidden="true">
+        <defs>
+          <filter id="gooey-bg">
+            <feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" />
+            <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -7" result="gooey" />
+            <feComposite in="SourceGraphic" in2="gooey" operator="atop" />
+          </filter>
+        </defs>
+      </svg>
+
+      <div className="relative mx-auto flex min-h-dvh w-full max-w-screen-lg flex-col px-4 sm:px-6 lg:px-8 py-6 sm:py-10">
+        {/* ---- Header ---- */}
+        <header className="relative z-40 mb-6 sm:mb-8 flex items-center justify-between">
+          <div className="flex items-center gap-4">
+            <Link
+              href="/"
+              aria-label="Back to home"
+              className="neu-button flex h-11 w-11 items-center justify-center rounded-full text-text-secondary cursor-pointer"
+            >
+              <ChevronLeft className="h-5 w-5" />
+            </Link>
+            <div>
+              <h1 className="text-2xl sm:text-3xl font-serif font-bold tracking-tight text-text-primary">
+                Keep<span className="text-accent">Check</span> <span className="text-text-secondary font-sans font-normal text-lg sm:text-xl ml-1 sm:ml-2">/ Map</span>
+              </h1>
+            </div>
+          </div>
+        </header>
+
+        {/* ---- Main Map Content ---- */}
+        <main className="flex-1 flex flex-col justify-center">
+          {spots === undefined ? (
+            <div className="py-20 text-center text-sm font-mono text-text-secondary animate-pulse neu-raised rounded-2xl bg-bg/40 border border-text-secondary/15 h-[450px] flex items-center justify-center">
+              Loading spots data…
+            </div>
+          ) : geotaggedSpots.length === 0 ? (
+            <div className="py-16 text-center neu-raised bg-bg/40 border border-dashed border-text-secondary/25 rounded-3xl max-w-md mx-auto px-6 w-full">
+              <div className="neu-raised bg-bg inline-flex h-20 w-20 items-center justify-center rounded-3xl mx-auto mb-4">
+                <span className="text-3xl">📍</span>
+              </div>
+              <h2 className="text-base font-semibold text-text-primary mb-2">No locations found</h2>
+              <p className="text-sm text-text-secondary font-medium leading-relaxed">
+                None of your logged spots have location coordinates. Submit a new spot and allow location access to see them on the map!
+              </p>
+            </div>
+          ) : (
+            <div className="flex-1 h-full w-full relative">
+              <SpotsMap spots={geotaggedSpots} />
+            </div>
+          )}
+        </main>
+      </div>
+    </AuthGuard>
+  );
+}
diff --git a/app/page.tsx b/app/page.tsx
index 9b4bf06..987c5d9 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -3,7 +3,8 @@
 import { useState, useEffect, useMemo, useRef, useCallback, memo, type FormEvent } from "react";
 import { useLiveQuery } from "dexie-react-hooks";
 import { db, type FoodSpotLog, type SpotCategory } from "./db";
-import { makeThumbnail, compressToBlob } from "@/utils/image";
+import Link from "next/link";
+import { makeThumbnail, compressToBlob, compressBlobToSafeBase64 } from "@/utils/image";
 import SpotDetailModal from "@/components/SpotDetailModal";
 import AuthGuard from "@/components/AuthGuard";
 import { useAuth } from "@/lib/auth";
@@ -13,15 +14,17 @@ import {
   deleteSpotFromFirestore,
   subscribeToSpots,
   type FirestoreSpotChange,
+  addImageToFirestore,
+  deleteImagesForSpotFromFirestore,
+  subscribeToImages,
 } from "@/lib/firestore";
-import { uploadSpotImage, deleteSpotImage } from "@/lib/storage";
 import {
   syncSpotToFirestore,
   queuePendingDelete,
   startOnlineListener,
   getPendingDeletes,
 } from "@/lib/offlineSync";
-import { Trash2, Camera, LogOut, ChevronLeft, ChevronRight, Clock, Plus, X, WifiOff, Cloud, CloudOff } from "lucide-react";
+import { Trash2, Camera, LogOut, ChevronLeft, ChevronRight, Clock, Plus, X, WifiOff, Cloud, CloudOff, MapPin } from "lucide-react";
 import { gsap } from "gsap";
 
 /* ------------------------------------------------------------------ */
@@ -570,10 +573,11 @@ function HomePage() {
             comment: fSpot.comment,
             createdAt: fSpot.createdAt,
             thumbnail: fSpot.thumbnail,
-            downloadURL: fSpot.downloadURL,
             firebaseId: fSpot.firebaseId,
             userId: user.uid,
             pendingSync: false,
+            latitude: fSpot.latitude,
+            longitude: fSpot.longitude,
           });
         } else if (existing.id !== undefined) {
           localSpotId = existing.id;
@@ -585,33 +589,14 @@ function HomePage() {
           if (existing.comment !== fSpot.comment) updates.comment = fSpot.comment;
           if (existing.createdAt !== fSpot.createdAt) updates.createdAt = fSpot.createdAt;
           if (existing.thumbnail !== fSpot.thumbnail) updates.thumbnail = fSpot.thumbnail;
-          if (existing.downloadURL !== fSpot.downloadURL) updates.downloadURL = fSpot.downloadURL;
+          if (existing.latitude !== fSpot.latitude) updates.latitude = fSpot.latitude;
+          if (existing.longitude !== fSpot.longitude) updates.longitude = fSpot.longitude;
           if (existing.pendingSync) updates.pendingSync = false;
 
           if (Object.keys(updates).length > 0) {
             await db.spots.update(existing.id, updates);
           }
         }
-
-        // Fetch image from downloadURL if we have one and don't already have it locally
-        if (localSpotId !== undefined && fSpot.downloadURL) {
-          const existingImages = await db.images.where("spotId").equals(localSpotId).toArray();
-          if (existingImages.length === 0) {
-            try {
-              const response = await fetch(fSpot.downloadURL);
-              const blob = await response.blob();
-              await db.images.add({
-                spotId: localSpotId,
-                blob,
-                createdAt: fSpot.createdAt,
-                firebaseId: "uploaded",
-              });
-              console.log(`[KeepCheck] Successfully downloaded and cached image for spot: ${fSpot.name}`);
-            } catch (err) {
-              console.warn("[KeepCheck] Failed to fetch/cache image from downloadURL:", err);
-            }
-          }
-        }
       } else if (change.type === "removed") {
         const existing = await db.spots.where("firebaseId").equals(fSpot.firebaseId).first();
         if (existing && existing.id !== undefined) {
@@ -622,14 +607,43 @@ function HomePage() {
     }
   }, [user]);
 
-  // Only subscribe to Firestore spots when we have a real authenticated user
+  const syncImages = useCallback(async (firestoreImages: { firebaseId: string; spotFirebaseId: string; base64: string; createdAt: number }[]) => {
+    if (!user) return;
+
+    for (const fImg of firestoreImages) {
+      const spot = await db.spots.where("firebaseId").equals(fImg.spotFirebaseId).first();
+      if (!spot || spot.id === undefined) continue;
+
+      const existingImages = await db.images.where("spotId").equals(spot.id).toArray();
+      const alreadyHas = existingImages.some((img) => img.firebaseId === fImg.firebaseId);
+      if (alreadyHas) continue;
+
+      try {
+        const response = await fetch(fImg.base64);
+        const blob = await response.blob();
+        await db.images.add({
+          spotId: spot.id,
+          blob,
+          createdAt: fImg.createdAt,
+          firebaseId: fImg.firebaseId,
+        });
+        console.log(`[KeepCheck] Successfully downloaded and cached image for spot from base64: ${spot.name}`);
+      } catch (err) {
+        console.warn("[KeepCheck] Failed to sync image from Firestore:", err);
+      }
+    }
+  }, [user]);
+
+  // Only subscribe to Firestore when we have a real authenticated user
   useEffect(() => {
     if (!user) return;
     const unsubSpots = subscribeToSpots(user.uid, syncSpots);
+    const unsubImages = subscribeToImages(user.uid, syncImages);
     return () => {
       unsubSpots();
+      unsubImages();
     };
-  }, [user, syncSpots]);
+  }, [user, syncSpots, syncImages]);
 
   /* -- Offline sync listener -- */
   useEffect(() => {
@@ -908,6 +922,72 @@ function HomePage() {
 
   /* ---------- handlers ---------- */
 
+interface LocationCoords {
+  latitude?: number;
+  longitude?: number;
+}
+
+function getCoords(): Promise<LocationCoords> {
+  return new Promise((resolve) => {
+    console.log("[KeepCheck Geolocation] Attempting to capture current position (timeout: 5000ms)...");
+
+    if (typeof window === "undefined" || !navigator.geolocation) {
+      console.warn("[KeepCheck Geolocation] Geolocation is not supported by this browser or environment.");
+      resolve({});
+      return;
+    }
+
+    let resolved = false;
+    const timeoutId = setTimeout(() => {
+      if (!resolved) {
+        resolved = true;
+        console.warn("[KeepCheck Geolocation] Geolocation capture timed out after 5000ms.");
+        resolve({});
+      }
+    }, 5000);
+
+    navigator.geolocation.getCurrentPosition(
+      (position) => {
+        if (!resolved) {
+          clearTimeout(timeoutId);
+          resolved = true;
+          console.log(
+            `[KeepCheck Geolocation] Successfully captured position: lat=${position.coords.latitude}, lng=${position.coords.longitude} (accuracy: ${position.coords.accuracy}m)`
+          );
+          resolve({
+            latitude: position.coords.latitude,
+            longitude: position.coords.longitude,
+          });
+        }
+      },
+      (error) => {
+        if (!resolved) {
+          clearTimeout(timeoutId);
+          resolved = true;
+          
+          let reason = "Unknown error";
+          if (error.code === error.PERMISSION_DENIED) {
+            reason = "Permission denied by user";
+          } else if (error.code === error.POSITION_UNAVAILABLE) {
+            reason = "Position unavailable";
+          } else if (error.code === error.TIMEOUT) {
+            reason = "Timeout";
+          }
+          console.warn(
+            `[KeepCheck Geolocation] Geolocation capture failed: ${reason} (code: ${error.code}, message: ${error.message})`
+          );
+          resolve({});
+        }
+      },
+      {
+        enableHighAccuracy: false,
+        timeout: 5000,
+        maximumAge: 0,
+      }
+    );
+  });
+}
+
   async function handleSubmit(e: FormEvent) {
     e.preventDefault();
     const trimmed = name.trim();
@@ -935,6 +1015,13 @@ function HomePage() {
         }
       }
 
+      let coords: LocationCoords = {};
+      try {
+        coords = await getCoords();
+      } catch (e) {
+        console.error("[KeepCheck] Geolocation retrieval failed:", e);
+      }
+
       const spotData = {
         name: trimmed,
         category,
@@ -942,6 +1029,8 @@ function HomePage() {
         comment: comment.trim(),
         createdAt: Date.now(),
         thumbnail,
+        latitude: coords.latitude,
+        longitude: coords.longitude,
       };
 
       const firebaseId = generateSpotId(user.uid);
@@ -970,29 +1059,31 @@ function HomePage() {
 
       // ---- 2. Attempt Firestore write directly (works offline via persistentLocalCache) ----
       try {
-        let downloadURL: string | undefined;
+        await writeSpotToFirestore(user.uid, firebaseId, spotData);
 
-        // Upload image to Firebase Storage first (best-effort, but before writing spot document)
+        // Upload image as base64 to Firestore (non-blocking, best-effort)
         if (compressedBlob) {
           try {
-            downloadURL = await uploadSpotImage(user.uid, firebaseId, compressedBlob);
-            // Mark image as synced locally since it's uploaded
-            const localImg = await db.images.where("spotId").equals(spotId).first();
-            if (localImg && localImg.id !== undefined) {
-              await db.images.update(localImg.id, { firebaseId: "uploaded" });
+            const base64 = await compressBlobToSafeBase64(compressedBlob);
+            if (base64) {
+              const imgFirebaseId = await addImageToFirestore(user.uid, {
+                spotFirebaseId: firebaseId,
+                base64,
+                createdAt: Date.now(),
+              });
+              // Mark image as synced locally
+              const localImg = await db.images.where("spotId").equals(spotId).first();
+              if (localImg && localImg.id !== undefined) {
+                await db.images.update(localImg.id, { firebaseId: imgFirebaseId });
+              }
+            } else {
+              console.warn("[KeepCheck] compressBlobToSafeBase64 returned null (too large). Skipping image Firestore upload, keeping only local photo.");
             }
-            // Update local spot with downloadURL
-            await db.spots.update(spotId, { downloadURL });
           } catch (imgUploadErr) {
-            console.warn("[KeepCheck] Image upload to Storage failed (will retry on sync):", imgUploadErr);
+            console.warn("[KeepCheck] Image sync to Firestore failed (will retry on sync sweep):", imgUploadErr);
           }
         }
 
-        await writeSpotToFirestore(user.uid, firebaseId, {
-          ...spotData,
-          downloadURL,
-        });
-
         // Firestore write succeeded (or queued by local cache) — clear pendingSync
         await db.spots.update(spotId, { pendingSync: false });
         console.log(`[KeepCheck] Spot synced to Firestore (${firebaseId})`);
@@ -1050,7 +1141,7 @@ function HomePage() {
       // Attempt Firestore delete (non-blocking)
       if (spot?.firebaseId && user) {
         try {
-          await deleteSpotImage(user.uid, spot.firebaseId);
+          await deleteImagesForSpotFromFirestore(user.uid, spot.firebaseId);
           await deleteSpotFromFirestore(user.uid, spot.firebaseId);
         } catch (fireErr) {
           console.warn("[KeepCheck] Firestore delete failed — queued for retry when online:", fireErr);
@@ -1140,6 +1231,13 @@ function HomePage() {
           </div>
 
           <div className="flex items-center gap-2.5">
+            <Link
+              href="/map"
+              aria-label="View Map"
+              className="neu-button flex h-11 w-11 items-center justify-center rounded-full text-text-secondary cursor-pointer"
+            >
+              <MapPin className="h-5 w-5" />
+            </Link>
             <ThemeToggle dark={dark} onToggle={() => setDark((d: boolean) => !d)} />
             
             {/* Desktop Add Spot button */}
diff --git a/app/sw.ts b/app/sw.ts
index e99bb51..c5b2303 100644
--- a/app/sw.ts
+++ b/app/sw.ts
@@ -1,10 +1,28 @@
 import { defaultCache } from "@serwist/next/worker";
-import { type PrecacheEntry, Serwist, cacheNames, StaleWhileRevalidate, ExpirationPlugin } from "serwist";
+import { type PrecacheEntry, Serwist, cacheNames, StaleWhileRevalidate, CacheFirst, ExpirationPlugin } from "serwist";
 
 declare const self: ServiceWorkerGlobalScope & {
   __SW_MANIFEST: (PrecacheEntry | string)[] | undefined;
 };
 
+// Caching rule for OpenStreetMap tile requests.
+// OSM tiles are fetched from URLs matching "tile.openstreetmap.org".
+// We use a CacheFirst strategy so tiles are read from cache offline.
+// Note: map tiles become available offline only for areas the user has already viewed while online (opportunistic caching) — not a pre-downloaded full region.
+const osmTileCacheRule = {
+  matcher: /tile\.openstreetmap\.org/i,
+  handler: new CacheFirst({
+    cacheName: "openstreetmap-tiles",
+    plugins: [
+      new ExpirationPlugin({
+        maxEntries: 1000,
+        maxAgeSeconds: 30 * 24 * 60 * 60, // 30 days
+        maxAgeFrom: "last-used",
+      }),
+    ],
+  }),
+};
+
 const serwist = new Serwist({
   precacheEntries: self.__SW_MANIFEST,
   // Force immediate activation — don't wait for existing tabs to close.
@@ -14,6 +32,7 @@ const serwist = new Serwist({
   clientsClaim: true,
   navigationPreload: true,
   runtimeCaching: [
+    osmTileCacheRule,
     {
       matcher: /^https:\/\/lh[0-9]*\.googleusercontent\.com\/.*/i,
       handler: new StaleWhileRevalidate({
diff --git a/components/SpotDetailModal.tsx b/components/SpotDetailModal.tsx
index b8ad085..7ecfc00 100644
--- a/components/SpotDetailModal.tsx
+++ b/components/SpotDetailModal.tsx
@@ -89,7 +89,8 @@ export default function SpotDetailModal({
             comment: spot.comment,
             createdAt: spot.createdAt,
             thumbnail: newThumb,
-            downloadURL: spot.downloadURL,
+            latitude: spot.latitude,
+            longitude: spot.longitude,
           });
           await db.spots.update(spotId, { pendingSync: false });
         } catch (fireErr) {
diff --git a/components/SpotsMap.tsx b/components/SpotsMap.tsx
new file mode 100644
index 0000000..593d2d9
--- /dev/null
+++ b/components/SpotsMap.tsx
@@ -0,0 +1,140 @@
+"use client";
+
+import { useEffect, useRef } from "react";
+import L from "leaflet";
+import "leaflet/dist/leaflet.css";
+import type { FoodSpotLog } from "@/app/db";
+
+interface SpotsMapProps {
+  spots: FoodSpotLog[];
+}
+
+const createCustomIcon = (spot: FoodSpotLog) => {
+  const categoryColor = spot.category === "Cafe" ? "var(--category-cafe)" : "var(--category-restaurant)";
+  
+  const htmlContent = `
+    <div style="
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 32px;
+      height: 32px;
+      border-radius: 50%;
+      background-color: ${categoryColor};
+      border: 2px solid white;
+      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15), var(--neu-shadow-subtle);
+      color: white;
+      font-family: var(--font-space-mono), monospace;
+      font-weight: bold;
+      font-size: 11px;
+      position: relative;
+    ">
+      ${spot.rating}
+      <div style="
+        position: absolute;
+        bottom: -6px;
+        left: 50%;
+        transform: translateX(-50%);
+        width: 0;
+        height: 0;
+        border-left: 5px solid transparent;
+        border-right: 5px solid transparent;
+        border-top: 6px solid ${categoryColor};
+      "></div>
+    </div>
+  `;
+
+  return L.divIcon({
+    html: htmlContent,
+    className: "custom-leaflet-marker",
+    iconSize: [32, 38],
+    iconAnchor: [16, 38],
+    popupAnchor: [0, -38]
+  });
+};
+
+export default function SpotsMap({ spots }: SpotsMapProps) {
+  const mapContainerRef = useRef<HTMLDivElement>(null);
+  const mapRef = useRef<L.Map | null>(null);
+
+  useEffect(() => {
+    if (!mapContainerRef.current) return;
+
+    // Initialize map
+    const map = L.map(mapContainerRef.current, {
+      zoomControl: true,
+    });
+    mapRef.current = map;
+
+    // Add TileLayer with OpenStreetMap (OSM)
+    L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
+      attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
+    }).addTo(map);
+
+    // Filter spots with coordinates
+    const validSpots = spots.filter(
+      (s) => s.latitude !== undefined && s.longitude !== undefined
+    ) as (FoodSpotLog & { latitude: number; longitude: number })[];
+
+    const markers: L.Marker[] = [];
+
+    validSpots.forEach((spot) => {
+      const popupContent = `
+        <div style="display: flex; flex-direction: column; gap: 8px; width: 140px; font-family: var(--font-work-sans), sans-serif; padding: 2px;">
+          ${
+            spot.thumbnail
+              ? `<div style="width: 100%; height: 80px; overflow: hidden; border-radius: 8px;">
+                   <img src="${spot.thumbnail}" alt="${spot.name}" style="width: 100%; height: 100%; object-fit: cover;" />
+                 </div>`
+              : `<div style="width: 100%; height: 48px; background: rgba(0,0,0,0.05); display: flex; align-items: center; justify-content: center; font-size: 24px; border-radius: 8px;">
+                   ${spot.category === "Cafe" ? "☕" : "🍽️"}
+                 </div>`
+          }
+          <div style="display: flex; flex-direction: column; gap: 2px;">
+            <h3 style="font-family: var(--font-fraunces), Georgia, serif; font-weight: bold; font-size: 14px; margin: 0; color: var(--text-primary); text-overflow: ellipsis; overflow: hidden; white-space: nowrap;">${spot.name}</h3>
+            <div style="display: flex; align-items: center; gap: 6px; margin-top: 4px;">
+              <span style="font-family: var(--font-space-mono), monospace; font-size: 10px; font-weight: bold; color: var(--accent); background: rgba(107, 93, 79, 0.05); padding: 2px 6px; border-radius: 4px;">${spot.rating} / 10</span>
+              <span style="font-size: 9px; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.5px;">${spot.category}</span>
+            </div>
+          </div>
+        </div>
+      `;
+
+      const marker = L.marker([spot.latitude, spot.longitude], {
+        icon: createCustomIcon(spot),
+      })
+        .bindPopup(popupContent, {
+          maxWidth: 200,
+          minWidth: 140,
+        })
+        .addTo(map);
+
+      markers.push(marker);
+    });
+
+    // Fit bounds or center
+    if (validSpots.length > 0) {
+      if (validSpots.length === 1) {
+        map.setView([validSpots[0].latitude, validSpots[0].longitude], 15);
+      } else {
+        const bounds = L.latLngBounds(validSpots.map((s) => [s.latitude, s.longitude]));
+        map.fitBounds(bounds, { padding: [40, 40] });
+      }
+    } else {
+      map.setView([0, 0], 2);
+    }
+
+    return () => {
+      map.remove();
+      mapRef.current = null;
+    };
+  }, [spots]);
+
+  return (
+    <div
+      ref={mapContainerRef}
+      className="w-full h-full rounded-2xl overflow-hidden shadow-neu-inset border border-text-secondary/10"
+      style={{ minHeight: "450px" }}
+    />
+  );
+}
diff --git a/lib/auth.tsx b/lib/auth.tsx
index 2083ec1..8207f18 100644
--- a/lib/auth.tsx
+++ b/lib/auth.tsx
@@ -258,7 +258,24 @@ function AuthProviderInner({ children }: { children: ReactNode }) {
   const signOut = useCallback(async () => {
     console.log("[KeepCheck AuthContext] signOut called");
 
-    // Clear cached session immediately
+    try {
+      // 1. Sign out of NextAuth without redirecting — explicitly set { redirect: false }
+      // so it does NOT perform a full page reload redirect, avoiding races against Firebase's signOut.
+      await nextAuthSignOut({ redirect: false });
+      console.log("[KeepCheck AuthContext] NextAuth signOut completed successfully");
+    } catch (error) {
+      console.error("[KeepCheck AuthContext] NextAuth signOut error:", error);
+    }
+
+    try {
+      // 2. Sign out of Firebase
+      await firebaseSignOut(getFirebaseAuth());
+      console.log("[KeepCheck AuthContext] Firebase signOut completed successfully");
+    } catch (error) {
+      console.error("[KeepCheck AuthContext] Firebase signOut error:", error);
+    }
+
+    // 3. Clear cached session and local states only AFTER both operations complete
     clearCachedSession();
     setCachedSession(null);
 
@@ -266,22 +283,7 @@ function AuthProviderInner({ children }: { children: ReactNode }) {
     tokenBridgeInFlight.current = false;
     setBridgeError(null);
 
-    // Sign out of NextAuth without redirecting — matches the existing
-    // "instant local clear, no navigation" behavior.
-    nextAuthSignOut({ redirect: false }).catch((error) => {
-      console.error("[KeepCheck AuthContext] NextAuth signOut error:", error);
-    });
-
-    // Sign out of Firebase
-    firebaseSignOut(getFirebaseAuth())
-      .then(() => {
-        console.log("[KeepCheck AuthContext] Firebase signOut completed successfully");
-      })
-      .catch((error) => {
-        console.error("[KeepCheck AuthContext] Firebase signOut error:", error);
-      });
-
-    // Immediately clear local state for instant redirect.
+    // Set user to null to trigger AuthGuard redirect
     console.log("[KeepCheck AuthContext] Setting user to null");
     setUser(null);
   }, []);
diff --git a/lib/firebase.ts b/lib/firebase.ts
index 9bcd7b8..1481cd5 100644
--- a/lib/firebase.ts
+++ b/lib/firebase.ts
@@ -14,10 +14,6 @@ import {
   persistentMultipleTabManager,
   type Firestore,
 } from "firebase/firestore";
-import {
-  getStorage as _getStorage,
-  type FirebaseStorage,
-} from "firebase/storage";
 
 const firebaseConfig = {
   apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
@@ -39,7 +35,6 @@ function getApp_(): FirebaseApp {
 
 let _auth: Auth | null = null;
 let _firestore: Firestore | null = null;
-let _storage: FirebaseStorage | null = null;
 
 /**
  * Returns the Firebase Auth singleton.
@@ -88,11 +83,4 @@ export function getFirebaseFirestore(): Firestore {
   return _firestore;
 }
 
-/**
- * Returns the Firebase Storage singleton.
- */
-export function getFirebaseStorage(): FirebaseStorage {
-  if (_storage) return _storage;
-  _storage = _getStorage(getApp_());
-  return _storage;
-}
+
diff --git a/lib/firestore.ts b/lib/firestore.ts
index 7eadc9b..699fabe 100644
--- a/lib/firestore.ts
+++ b/lib/firestore.ts
@@ -7,6 +7,7 @@ import {
   query,
   orderBy,
   onSnapshot,
+  addDoc,
   type Unsubscribe,
 } from "firebase/firestore";
 import { getFirebaseFirestore } from "./firebase";
@@ -90,3 +91,65 @@ export function subscribeToSpots(
     callback(changes);
   });
 }
+
+/* ------------------------------------------------------------------ */
+/*  Images                                                             */
+/* ------------------------------------------------------------------ */
+
+function imagesCol(uid: string) {
+  return collection(getFirebaseFirestore(), "users", uid, "images");
+}
+
+/**
+ * Add an image to Firestore.
+ *
+ * NOTE: We store the image as a base64 string (NOT a Blob) because
+ * Firestore doesn't natively support Blob storage. The images are
+ * already compressed JPEGs < 1 MB from the image utility pipeline.
+ */
+export async function addImageToFirestore(
+  uid: string,
+  image: {
+    spotFirebaseId: string;
+    base64: string;
+    createdAt: number;
+  },
+): Promise<string> {
+  const docRef = await addDoc(imagesCol(uid), {
+    spotFirebaseId: image.spotFirebaseId,
+    base64: image.base64,
+    createdAt: image.createdAt,
+    userId: uid,
+  });
+  return docRef.id;
+}
+
+/** Delete all images for a spot from Firestore. */
+export async function deleteImagesForSpotFromFirestore(
+  uid: string,
+  spotFirebaseId: string,
+): Promise<void> {
+  const q = query(imagesCol(uid));
+  const snapshot = await getDocs(q);
+  const deleteOps = snapshot.docs
+    .filter((d) => d.data().spotFirebaseId === spotFirebaseId)
+    .map((d) => deleteDoc(d.ref));
+  await Promise.all(deleteOps);
+}
+
+/** Subscribe to real-time image updates. Returns an unsubscribe function. */
+export function subscribeToImages(
+  uid: string,
+  callback: (images: { firebaseId: string; spotFirebaseId: string; base64: string; createdAt: number }[]) => void,
+): Unsubscribe {
+  const q = query(imagesCol(uid), orderBy("createdAt", "desc"));
+  return onSnapshot(q, (snapshot) => {
+    const images = snapshot.docs.map((d) => ({
+      firebaseId: d.id,
+      spotFirebaseId: d.data().spotFirebaseId as string,
+      base64: d.data().base64 as string,
+      createdAt: d.data().createdAt as number,
+    }));
+    callback(images);
+  });
+}
diff --git a/lib/offlineSync.ts b/lib/offlineSync.ts
index 708adc6..84e18a8 100644
--- a/lib/offlineSync.ts
+++ b/lib/offlineSync.ts
@@ -21,8 +21,10 @@ import { db, type FoodSpotLog } from "@/app/db";
 import {
   writeSpotToFirestore,
   deleteSpotFromFirestore,
+  addImageToFirestore,
+  deleteImagesForSpotFromFirestore,
 } from "./firestore";
-import { uploadSpotImage, deleteSpotImage } from "./storage";
+import { compressBlobToSafeBase64 } from "@/utils/image";
 
 /* ------------------------------------------------------------------ */
 /*  Pending-delete queue (localStorage-backed)                         */
@@ -84,18 +86,24 @@ export async function syncSpotToFirestore(
   }
 
   try {
-    let downloadURL = spot.downloadURL;
-
     // If there's a local image for this spot, sync it too
     if (spot.id !== undefined) {
       const image = await db.images.where("spotId").equals(spot.id).first();
-      if (image && !image.firebaseId) {
+      // Sync if it exists and hasn't been uploaded to Firestore yet
+      if (image && (!image.firebaseId || image.firebaseId === "uploaded")) {
         try {
-          downloadURL = await uploadSpotImage(uid, spot.firebaseId, image.blob);
-          // Mark image as synced
-          await db.images.update(image.id!, { firebaseId: "uploaded" });
-          // Update local spot with downloadURL
-          await db.spots.update(spot.id, { downloadURL });
+          const base64 = await compressBlobToSafeBase64(image.blob);
+          if (base64) {
+            const imgFirebaseId = await addImageToFirestore(uid, {
+              spotFirebaseId: spot.firebaseId,
+              base64,
+              createdAt: image.createdAt,
+            });
+            // Mark image as synced locally
+            await db.images.update(image.id!, { firebaseId: imgFirebaseId });
+          } else {
+            console.warn("[OfflineSync] compressBlobToSafeBase64 returned null (too large). Skipping image Firestore upload, keeping only local photo.");
+          }
         } catch (imgErr) {
           console.warn("[OfflineSync] Image sync failed, will retry:", imgErr);
           // Don't fail the whole spot sync for an image failure
@@ -111,7 +119,8 @@ export async function syncSpotToFirestore(
       comment: spot.comment,
       createdAt: spot.createdAt,
       thumbnail: spot.thumbnail,
-      downloadURL,
+      latitude: spot.latitude,
+      longitude: spot.longitude,
     });
 
     // Mark spot as synced
@@ -185,7 +194,7 @@ export async function sweepPendingSync(uid: string): Promise<number> {
         continue;
       }
       try {
-        await deleteSpotImage(del.uid, del.firebaseId);
+        await deleteImagesForSpotFromFirestore(del.uid, del.firebaseId);
         await deleteSpotFromFirestore(del.uid, del.firebaseId);
         console.log(`[OfflineSync] ✓ Deleted spot ${del.firebaseId} from Firestore`);
       } catch {
diff --git a/lib/storage.ts b/lib/storage.ts
deleted file mode 100644
index 03ab1b7..0000000
--- a/lib/storage.ts
+++ /dev/null
@@ -1,79 +0,0 @@
-/**
- * Firebase Storage helpers for spot images.
- *
- * Replaces the old Firestore-based Base64 image storage with binary
- * blob uploads to Firebase Storage. This avoids hitting Firestore's
- * 1 MiB document limit and dramatically reduces sync bandwidth.
- *
- * Each spot gets one image at:
- *   `users/{uid}/spots/{spotFirebaseId}/photo.jpg`
- */
-
-import {
-  ref,
-  uploadBytes,
-  getDownloadURL,
-  deleteObject,
-} from "firebase/storage";
-import { getFirebaseStorage } from "./firebase";
-
-/* ------------------------------------------------------------------ */
-/*  Path helper                                                        */
-/* ------------------------------------------------------------------ */
-
-function spotImageRef(uid: string, spotFirebaseId: string) {
-  return ref(
-    getFirebaseStorage(),
-    `users/${uid}/spots/${spotFirebaseId}/photo.jpg`,
-  );
-}
-
-/* ------------------------------------------------------------------ */
-/*  Public API                                                         */
-/* ------------------------------------------------------------------ */
-
-/**
- * Upload a compressed JPEG blob to Firebase Storage and return the
- * permanent download URL.
- *
- * @param uid             - Firebase Auth UID of the image owner.
- * @param spotFirebaseId  - Firestore document ID of the parent spot.
- * @param blob            - Compressed JPEG binary from `compressToBlob`.
- * @returns The public download URL string.
- */
-export async function uploadSpotImage(
-  uid: string,
-  spotFirebaseId: string,
-  blob: Blob,
-): Promise<string> {
-  const imageRef = spotImageRef(uid, spotFirebaseId);
-  await uploadBytes(imageRef, blob, {
-    contentType: "image/jpeg",
-  });
-  return getDownloadURL(imageRef);
-}
-
-/**
- * Delete a spot's image from Firebase Storage.
- *
- * Swallows `storage/object-not-found` so the caller doesn't need to
- * guard against double-deletes or spots that never had an image.
- *
- * @param uid             - Firebase Auth UID of the image owner.
- * @param spotFirebaseId  - Firestore document ID of the parent spot.
- */
-export async function deleteSpotImage(
-  uid: string,
-  spotFirebaseId: string,
-): Promise<void> {
-  try {
-    await deleteObject(spotImageRef(uid, spotFirebaseId));
-  } catch (err: unknown) {
-    const code = (err as { code?: string })?.code;
-    if (code === "storage/object-not-found") {
-      // Image doesn't exist — nothing to delete, not an error.
-      return;
-    }
-    throw err;
-  }
-}
diff --git a/package-lock.json b/package-lock.json
index 6751e67..5b0b094 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,6 +14,7 @@
         "firebase": "^12.16.0",
         "firebase-admin": "^14.1.0",
         "gsap": "^3.15.0",
+        "leaflet": "^1.9.4",
         "lucide-react": "^1.24.0",
         "next": "16.2.10",
         "next-auth": "^5.0.0-beta.31",
@@ -23,6 +24,7 @@
       },
       "devDependencies": {
         "@tailwindcss/postcss": "^4",
+        "@types/leaflet": "^1.9.21",
         "@types/node": "^20",
         "@types/react": "^19.2.17",
         "@types/react-dom": "^19",
@@ -2793,6 +2795,13 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@types/geojson": {
+      "version": "7946.0.16",
+      "resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.16.tgz",
+      "integrity": "sha512-6C8nqWur3j98U6+lXDfTUWIfgvZU+EumvpHKcYjujKH7woYyLj2sUmff0tRhrqM7BohUw7Pz3ZB1jj2gW9Fvmg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@types/json-schema": {
       "version": "7.0.15",
       "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz",
@@ -2817,6 +2826,16 @@
         "@types/node": "*"
       }
     },
+    "node_modules/@types/leaflet": {
+      "version": "1.9.21",
+      "resolved": "https://registry.npmjs.org/@types/leaflet/-/leaflet-1.9.21.tgz",
+      "integrity": "sha512-TbAd9DaPGSnzp6QvtYngntMZgcRk+igFELwR2N99XZn7RXUdKgsXMR+28bUO0rPsWp8MIu/f47luLIQuSLYv/w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/geojson": "*"
+      }
+    },
     "node_modules/@types/ms": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/@types/ms/-/ms-2.1.0.tgz",
@@ -6978,6 +6997,12 @@
         "node": ">=0.10"
       }
     },
+    "node_modules/leaflet": {
+      "version": "1.9.4",
+      "resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.9.4.tgz",
+      "integrity": "sha512-nxS1ynzJOmOlHp+iL3FyWqK89GtNL8U8rvlMOsQdTTssxZwCXh8N2NB3GDQOL+YR3XnWyZAxwQixURb+FA74PA==",
+      "license": "BSD-2-Clause"
+    },
     "node_modules/levn": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz",
diff --git a/package.json b/package.json
index f45af50..69b4beb 100644
--- a/package.json
+++ b/package.json
@@ -15,6 +15,7 @@
     "firebase": "^12.16.0",
     "firebase-admin": "^14.1.0",
     "gsap": "^3.15.0",
+    "leaflet": "^1.9.4",
     "lucide-react": "^1.24.0",
     "next": "16.2.10",
     "next-auth": "^5.0.0-beta.31",
@@ -24,6 +25,7 @@
   },
   "devDependencies": {
     "@tailwindcss/postcss": "^4",
+    "@types/leaflet": "^1.9.21",
     "@types/node": "^20",
     "@types/react": "^19.2.17",
     "@types/react-dom": "^19",
diff --git a/storage.rules b/storage.rules
index 64086ae..7545b7c 100644
--- a/storage.rules
+++ b/storage.rules
@@ -1,3 +1,7 @@
+// NOTE: Firebase Storage is NOT currently enabled for this project.
+// All images sync via Firestore as Base64 strings.
+// This rules file is unused until/unless Storage is enabled in the future.
+
 rules_version = '2';
 service firebase.storage {
   match /b/{bucket}/o {
diff --git a/utils/image.ts b/utils/image.ts
index 2bdf271..e49fa0d 100644
--- a/utils/image.ts
+++ b/utils/image.ts
@@ -111,15 +111,15 @@ export async function makeThumbnailFromBlob(
  * compressed) binary, retrieved only when the user opens a detail view.
  *
  * @param file     - Raw image file from `<input type="file">`.
- * @param maxWidth - Maximum width in px (default 1000). Height scales
+ * @param maxWidth - Maximum width in px (default 900). Height scales
  *                   proportionally.
- * @param quality  - JPEG quality 0–1 (default 0.8).
+ * @param quality  - JPEG quality 0–1 (default 0.7).
  * @returns Compressed JPEG `Blob`.
  */
 export async function compressToBlob(
   file: File,
-  maxWidth = 1000,
-  quality = 0.8,
+  maxWidth = 900,
+  quality = 0.7,
 ): Promise<Blob> {
   const canvas = await resizeToCanvas(file, maxWidth);
 
@@ -134,3 +134,50 @@ export async function compressToBlob(
     );
   });
 }
+
+/**
+ * Convert a Blob into a base64 JPEG data-URL, making sure it stays
+ * safely under the target Firestore document size limit (e.g. ~700KB
+ * to leave headroom for other fields under the 1 MiB limit).
+ * If the resulting base64 string exceeds 700KB, it is progressively
+ * re-compressed with lower quality. If it still exceeds the limit
+ * after 3 retries, returns null.
+ *
+ * NOTE: Oversized document writes will fail Firestore's 1 MiB write limit
+ * outright with no clear error, so this check prevents sync failures.
+ */
+export async function compressBlobToSafeBase64(
+  blob: Blob,
+  maxDimension = 900,
+  initialQuality = 0.7,
+): Promise<string | null> {
+  let quality = initialQuality;
+  let canvas: HTMLCanvasElement;
+  try {
+    canvas = await resizeToCanvas(blob, maxDimension);
+  } catch (err) {
+    console.error("[KeepCheck] Failed to decode blob for re-compression:", err);
+    return null;
+  }
+
+  let base64 = canvas.toDataURL("image/jpeg", quality);
+  const targetLimitBytes = 700 * 1024; // 700KB string length
+
+  let retries = 0;
+  while (base64.length > targetLimitBytes && retries < 3) {
+    retries++;
+    quality -= 0.15; // Step down quality (e.g. 0.7 -> 0.55 -> 0.40 -> 0.25)
+    if (quality < 0.1) {
+      break;
+    }
+    console.log(`[KeepCheck] Base64 image size (${Math.round(base64.length / 1024)}KB) exceeds 700KB limit. Re-compressing with quality ${quality.toFixed(2)} (retry ${retries}/3)...`);
+    base64 = canvas.toDataURL("image/jpeg", quality);
+  }
+
+  if (base64.length > targetLimitBytes) {
+    console.warn(`[KeepCheck] Base64 image still too large (${Math.round(base64.length / 1024)}KB) after retries. Skipping sync to Firestore to prevent oversized document failure.`);
+    return null;
+  }
+
+  return base64;
+}

From 4fe1f6c5bec1033618b5b10e5a8d878fbdaf9bc2 Mon Sep 17 00:00:00 2001
From: "Mateo, Noel John" <125169838+NoLmuna@users.noreply.github.com>
Date: Fri, 24 Jul 2026 22:19:14 +0800
Subject: [PATCH 19/22] maps

- fixed the code where it doesn't show the maps
---
 app/page.tsx                       | 301 +++++++++++++++++++++++++++--
 components/LocationPickerMap.tsx   | 212 ++++++++++++++++++++
 components/LocationPickerModal.tsx | 123 ++++++++++++
 3 files changed, 625 insertions(+), 11 deletions(-)
 create mode 100644 components/LocationPickerMap.tsx
 create mode 100644 components/LocationPickerModal.tsx

diff --git a/app/page.tsx b/app/page.tsx
index 987c5d9..947e87d 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -24,7 +24,8 @@ import {
   startOnlineListener,
   getPendingDeletes,
 } from "@/lib/offlineSync";
-import { Trash2, Camera, LogOut, ChevronLeft, ChevronRight, Clock, Plus, X, WifiOff, Cloud, CloudOff, MapPin } from "lucide-react";
+import { Trash2, Camera, LogOut, ChevronLeft, ChevronRight, Clock, Plus, X, WifiOff, Cloud, CloudOff, MapPin, Locate, Navigation, LayoutList, LayoutGrid } from "lucide-react";
+import LocationPickerModal from "@/components/LocationPickerModal";
 import { gsap } from "gsap";
 
 /* ------------------------------------------------------------------ */
@@ -452,6 +453,9 @@ function HomePage() {
   const [rating, setRating] = useState(7);
   const [comment, setComment] = useState("");
   const [imageFile, setImageFile] = useState<File | null>(null);
+  const [manualCoords, setManualCoords] = useState<{ latitude: number; longitude: number } | null>(null);
+  const [isLocationPickerOpen, setIsLocationPickerOpen] = useState(false);
+  const [gettingGps, setGettingGps] = useState(false);
   const [saving, setSaving] = useState(false);
   const [success, setSuccess] = useState(false);
   const [dragActive, setDragActive] = useState(false);
@@ -489,6 +493,16 @@ function HomePage() {
   const [sortMode, setSortMode] = useState<SortMode>("newest");
   const [catFilter, setCatFilter] = useState<CategoryFilter>("All");
 
+  /* -- Feed View Mode & Pagination state -- */
+  const [feedViewMode, setFeedViewMode] = useState<"list" | "grid">("list");
+  const [currentPage, setCurrentPage] = useState<number>(1);
+  const [pageSize, setPageSize] = useState<number>(5);
+
+  // Reset to page 1 whenever filters change
+  useEffect(() => {
+    setCurrentPage(1);
+  }, [catFilter, sortMode, search, pageSize]);
+
   useEffect(() => {
     // Read stored theme preference
     try {
@@ -701,6 +715,26 @@ function HomePage() {
     return result;
   }, [spots, search, sortMode, catFilter]);
 
+  /* -- Pagination derived state -- */
+  const totalFilteredCount = filteredSpots?.length ?? 0;
+  const totalPages = Math.max(1, Math.ceil(totalFilteredCount / pageSize));
+
+  // Clamp current page if total pages decreases
+  useEffect(() => {
+    if (currentPage > totalPages) {
+      setCurrentPage(totalPages);
+    }
+  }, [currentPage, totalPages]);
+
+  const paginatedSpots = useMemo(() => {
+    if (!filteredSpots) return undefined;
+    const start = (currentPage - 1) * pageSize;
+    return filteredSpots.slice(start, start + pageSize);
+  }, [filteredSpots, currentPage, pageSize]);
+
+  const startItem = totalFilteredCount === 0 ? 0 : (currentPage - 1) * pageSize + 1;
+  const endItem = Math.min(totalFilteredCount, currentPage * pageSize);
+
   /* -- Carousel scrolling listener -- */
   const handleCarouselScroll = useCallback(() => {
     if (carouselRef.current) {
@@ -988,6 +1022,17 @@ function getCoords(): Promise<LocationCoords> {
   });
 }
 
+  const handleCaptureCurrentGPS = async () => {
+    setGettingGps(true);
+    const res = await getCoords();
+    setGettingGps(false);
+    if (res.latitude !== undefined && res.longitude !== undefined) {
+      setManualCoords({ latitude: res.latitude, longitude: res.longitude });
+    } else {
+      alert("Could not detect current position. You can pin the location manually on the map!");
+    }
+  };
+
   async function handleSubmit(e: FormEvent) {
     e.preventDefault();
     const trimmed = name.trim();
@@ -1016,10 +1061,17 @@ function getCoords(): Promise<LocationCoords> {
       }
 
       let coords: LocationCoords = {};
-      try {
-        coords = await getCoords();
-      } catch (e) {
-        console.error("[KeepCheck] Geolocation retrieval failed:", e);
+      if (manualCoords?.latitude !== undefined && manualCoords?.longitude !== undefined) {
+        coords = { latitude: manualCoords.latitude, longitude: manualCoords.longitude };
+        console.log(
+          `[KeepCheck] Using manually pinned location: lat=${coords.latitude}, lng=${coords.longitude}`
+        );
+      } else {
+        try {
+          coords = await getCoords();
+        } catch (e) {
+          console.error("[KeepCheck] Geolocation retrieval failed:", e);
+        }
       }
 
       const spotData = {
@@ -1098,6 +1150,7 @@ function getCoords(): Promise<LocationCoords> {
       setRating(7);
       setComment("");
       setImageFile(null);
+      setManualCoords(null);
       if (fileInputRef.current) fileInputRef.current.value = "";
       
       setSuccess(true);
@@ -1380,10 +1433,73 @@ function getCoords(): Promise<LocationCoords> {
       <section className="w-full mb-16">
         
         {/* Activity feed controls header */}
-        <div className="flex items-center justify-between mb-4 gsap-feed-header gsap-reveal">
-          <h2 className="text-base sm:text-lg font-serif font-semibold text-text-primary">
-            Activity Feed
-          </h2>
+        <div className="flex flex-wrap items-center justify-between gap-3 mb-4 gsap-feed-header gsap-reveal">
+          <div className="flex items-center gap-2.5">
+            <h2 className="text-base sm:text-lg font-serif font-semibold text-text-primary">
+              Activity Feed
+            </h2>
+            {totalFilteredCount > 0 && (
+              <span className="text-xs font-mono font-normal text-text-secondary/70 bg-bg/50 px-2.5 py-0.5 rounded-full shadow-neu-inset">
+                {totalFilteredCount} {totalFilteredCount === 1 ? "entry" : "entries"}
+              </span>
+            )}
+          </div>
+
+          {/* Controls: View mode switcher & Page size selector */}
+          {totalFilteredCount > 0 && (
+            <div className="flex items-center gap-3">
+              {/* Page Size selector */}
+              <div className="flex items-center gap-1.5 text-xs text-text-secondary">
+                <span className="hidden sm:inline font-medium">Show:</span>
+                <div className="flex items-center gap-1 bg-bg/50 p-1 rounded-xl shadow-neu-inset">
+                  {[5, 10, 20].map((size) => (
+                    <button
+                      key={size}
+                      type="button"
+                      onClick={() => setPageSize(size)}
+                      className={`px-2 py-0.5 rounded-lg text-xs font-mono font-bold transition-all cursor-pointer ${
+                        pageSize === size
+                          ? "bg-accent text-white shadow-neu-subtle"
+                          : "text-text-secondary hover:text-text-primary"
+                      }`}
+                    >
+                      {size}
+                    </button>
+                  ))}
+                </div>
+              </div>
+
+              {/* View Mode Toggle */}
+              <div className="flex items-center gap-1 bg-bg/50 p-1 rounded-xl shadow-neu-inset">
+                <button
+                  type="button"
+                  onClick={() => setFeedViewMode("list")}
+                  className={`p-1.5 rounded-lg transition-all cursor-pointer ${
+                    feedViewMode === "list"
+                      ? "bg-accent text-white shadow-neu-subtle"
+                      : "text-text-secondary hover:text-text-primary"
+                  }`}
+                  title="Compact List View"
+                  aria-label="List view"
+                >
+                  <LayoutList className="h-4 w-4" />
+                </button>
+                <button
+                  type="button"
+                  onClick={() => setFeedViewMode("grid")}
+                  className={`p-1.5 rounded-lg transition-all cursor-pointer ${
+                    feedViewMode === "grid"
+                      ? "bg-accent text-white shadow-neu-subtle"
+                      : "text-text-secondary hover:text-text-primary"
+                  }`}
+                  title="Grid Cards View"
+                  aria-label="Grid view"
+                >
+                  <LayoutGrid className="h-4 w-4" />
+                </button>
+              </div>
+            </div>
+          )}
         </div>
 
         {spots && spots.length > 0 ? (
@@ -1443,10 +1559,10 @@ function getCoords(): Promise<LocationCoords> {
               <div className="py-16 text-center neu-raised">
                 <p className="text-sm text-text-secondary">No logs match your current query or filters.</p>
               </div>
-            ) : (
+            ) : feedViewMode === "list" ? (
               /* List/Table View Mode */
               <div className="neu-raised p-4 space-y-3 pt-2">
-                {filteredSpots && (filteredSpots as FoodSpotLog[]).map((spot: FoodSpotLog) => (
+                {paginatedSpots && (paginatedSpots as FoodSpotLog[]).map((spot: FoodSpotLog) => (
                   <FeedListItem
                     key={spot.id}
                     spot={spot}
@@ -1455,6 +1571,84 @@ function getCoords(): Promise<LocationCoords> {
                   />
                 ))}
               </div>
+            ) : (
+              /* Grid Cards View Mode */
+              <div className="neu-raised p-4 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
+                {paginatedSpots && (paginatedSpots as FoodSpotLog[]).map((spot: FoodSpotLog, index: number) => (
+                  <div key={spot.id} className="relative group/item min-h-[220px]">
+                    <SpotCard
+                      spot={spot}
+                      index={index}
+                      onClick={() => spot.id !== undefined && setSelectedSpotId(spot.id)}
+                    />
+                    {spot.pendingSync && (
+                      <div className="pending-sync-badge" title="Waiting to sync to cloud">
+                        <CloudOff className="h-3 w-3" />
+                      </div>
+                    )}
+                    <button
+                      type="button"
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        spot.id !== undefined && deleteEntry(spot.id);
+                      }}
+                      className="absolute right-4 bottom-4 neu-button inline-flex h-8 w-8 items-center justify-center rounded-full text-text-secondary/70 opacity-0 group-hover/item:opacity-100 transition-opacity duration-300 hover:text-red-500 active:shadow-neu-inset cursor-pointer z-10 bg-bg"
+                      aria-label="Delete entry"
+                    >
+                      <Trash2 className="h-3.5 w-3.5" />
+                    </button>
+                  </div>
+                ))}
+              </div>
+            )}
+
+            {/* Pagination Controls Bar */}
+            {totalFilteredCount > 0 && (
+              <div className="neu-raised p-3.5 flex flex-col sm:flex-row items-center justify-between gap-3 text-xs">
+                <div className="text-text-secondary font-mono">
+                  Showing <span className="font-bold text-text-primary">{startItem}–{endItem}</span> of{" "}
+                  <span className="font-bold text-accent">{totalFilteredCount}</span> spots
+                </div>
+
+                <div className="flex items-center gap-1.5">
+                  <button
+                    type="button"
+                    disabled={currentPage === 1}
+                    onClick={() => setCurrentPage((p) => Math.max(1, p - 1))}
+                    className="neu-button px-3 py-1.5 rounded-xl text-xs font-semibold text-text-secondary hover:text-text-primary disabled:opacity-30 disabled:pointer-events-none cursor-pointer flex items-center gap-1"
+                  >
+                    <ChevronLeft className="h-3.5 w-3.5" />
+                    <span>Prev</span>
+                  </button>
+
+                  <div className="flex items-center gap-1">
+                    {Array.from({ length: totalPages }, (_, i) => i + 1).map((pageNum) => (
+                      <button
+                        key={pageNum}
+                        type="button"
+                        onClick={() => setCurrentPage(pageNum)}
+                        className={`h-8 w-8 rounded-xl text-xs font-mono font-bold transition-all cursor-pointer flex items-center justify-center ${
+                          currentPage === pageNum
+                            ? "bg-accent text-white shadow-neu-subtle"
+                            : "neu-button text-text-secondary hover:text-text-primary"
+                        }`}
+                      >
+                        {pageNum}
+                      </button>
+                    ))}
+                  </div>
+
+                  <button
+                    type="button"
+                    disabled={currentPage === totalPages}
+                    onClick={() => setCurrentPage((p) => Math.min(totalPages, p + 1))}
+                    className="neu-button px-3 py-1.5 rounded-xl text-xs font-semibold text-text-secondary hover:text-text-primary disabled:opacity-30 disabled:pointer-events-none cursor-pointer flex items-center gap-1"
+                  >
+                    <span>Next</span>
+                    <ChevronRight className="h-3.5 w-3.5" />
+                  </button>
+                </div>
+              </div>
             )}
           </div>
         ) : (
@@ -1587,6 +1781,81 @@ function getCoords(): Promise<LocationCoords> {
                 />
               </div>
 
+              {/* Location Picker Section */}
+              <div>
+                <p className="mb-1.5 text-xs font-semibold uppercase tracking-wider text-text-secondary flex justify-between items-center">
+                  <span>Location</span>
+                  <span className="text-[10px] text-text-secondary/50 lowercase font-normal">
+                    {manualCoords ? "custom pin set" : "auto-GPS fallback"}
+                  </span>
+                </p>
+
+                {manualCoords ? (
+                  <div className="neu-card p-3 rounded-2xl flex items-center justify-between gap-3 border border-accent/20 bg-accent/5">
+                    <div className="flex items-center gap-2.5 min-w-0">
+                      <div className="p-2 rounded-xl bg-accent text-white shrink-0 shadow-neu-subtle">
+                        <MapPin className="h-4 w-4" />
+                      </div>
+                      <div className="min-w-0">
+                        <p className="text-xs font-semibold text-text-primary truncate">
+                          Pinned Location
+                        </p>
+                        <p className="text-[11px] font-mono text-text-secondary truncate">
+                          {manualCoords.latitude.toFixed(5)}, {manualCoords.longitude.toFixed(5)}
+                        </p>
+                      </div>
+                    </div>
+                    <div className="flex items-center gap-1 shrink-0">
+                      <button
+                        type="button"
+                        onClick={() => setIsLocationPickerOpen(true)}
+                        className="neu-button px-2.5 py-1.5 rounded-xl text-xs font-semibold text-accent hover:text-accent-glow cursor-pointer"
+                      >
+                        Edit
+                      </button>
+                      <button
+                        type="button"
+                        onClick={() => setManualCoords(null)}
+                        className="neu-button px-2.5 py-1.5 rounded-xl text-xs font-semibold text-text-secondary hover:text-red-500 cursor-pointer"
+                        title="Remove pinned location"
+                      >
+                        Clear
+                      </button>
+                    </div>
+                  </div>
+                ) : (
+                  <div className="space-y-2">
+                    <div className="grid grid-cols-2 gap-2">
+                      <button
+                        type="button"
+                        onClick={() => setIsLocationPickerOpen(true)}
+                        className="neu-button p-2.5 rounded-2xl flex flex-col items-center justify-center text-center gap-1 cursor-pointer hover:border-accent/30 transition-all border border-text-secondary/10"
+                      >
+                        <MapPin className="h-4 w-4 text-accent" />
+                        <span className="text-xs font-semibold text-text-primary">Pin on Map</span>
+                        <span className="text-[10px] text-text-secondary/60">Choose exact point</span>
+                      </button>
+
+                      <button
+                        type="button"
+                        onClick={handleCaptureCurrentGPS}
+                        disabled={gettingGps}
+                        className="neu-button p-2.5 rounded-2xl flex flex-col items-center justify-center text-center gap-1 cursor-pointer hover:border-accent/30 transition-all border border-text-secondary/10 disabled:opacity-50"
+                      >
+                        <Locate className={`h-4 w-4 text-accent ${gettingGps ? "animate-spin" : ""}`} />
+                        <span className="text-xs font-semibold text-text-primary">
+                          {gettingGps ? "Locating…" : "Use Current GPS"}
+                        </span>
+                        <span className="text-[10px] text-text-secondary/60">Detect position</span>
+                      </button>
+                    </div>
+                    <p className="text-[10px] text-text-secondary/50 text-center italic">
+                      If unselected, device GPS will be captured automatically when submitting.
+                    </p>
+                  </div>
+                )}
+              </div>
+
               {/* Photo Area */}
               <div>
                 <p className="mb-1.5 text-xs font-semibold uppercase tracking-wider text-text-secondary">
@@ -1681,6 +1950,16 @@ function getCoords(): Promise<LocationCoords> {
         </div>
       )}
 
+      {/* ---- Location Picker Map Modal ---- */}
+      {isLocationPickerOpen && (
+        <LocationPickerModal
+          initialLat={manualCoords?.latitude}
+          initialLng={manualCoords?.longitude}
+          onConfirm={(coords) => setManualCoords(coords)}
+          onClose={() => setIsLocationPickerOpen(false)}
+        />
+      )}
+
       {/* ---- Floating Action Button (FAB) ---- */}
       {effectiveUid && (
         <button
diff --git a/components/LocationPickerMap.tsx b/components/LocationPickerMap.tsx
new file mode 100644
index 0000000..163b4df
--- /dev/null
+++ b/components/LocationPickerMap.tsx
@@ -0,0 +1,212 @@
+"use client";
+
+import { useEffect, useRef, useState, useCallback } from "react";
+import L from "leaflet";
+import "leaflet/dist/leaflet.css";
+import { Locate, Navigation } from "lucide-react";
+
+interface LocationPickerMapProps {
+  initialLat?: number;
+  initialLng?: number;
+  onLocationSelected: (coords: { latitude: number; longitude: number }) => void;
+}
+
+const createPickerPinIcon = () => {
+  const htmlContent = `
+    <div style="
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 38px;
+      height: 38px;
+      border-radius: 50%;
+      background-color: var(--accent, #e11d48);
+      border: 3px solid white;
+      box-shadow: 0 6px 14px rgba(0, 0, 0, 0.35);
+      color: white;
+      position: relative;
+    ">
+      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
+        <path d="M20 10c0 6-8 12-8 12s-8-6-8-10a8 8 0 0 1 16 0Z"/>
+        <circle cx="12" cy="10" r="3"/>
+      </svg>
+      <div style="
+        position: absolute;
+        bottom: -7px;
+        left: 50%;
+        transform: translateX(-50%);
+        width: 0;
+        height: 0;
+        border-left: 6px solid transparent;
+        border-right: 6px solid transparent;
+        border-top: 7px solid var(--accent, #e11d48);
+      "></div>
+    </div>
+  `;
+
+  return L.divIcon({
+    html: htmlContent,
+    className: "location-picker-marker",
+    iconSize: [38, 45],
+    iconAnchor: [19, 45],
+  });
+};
+
+export default function LocationPickerMap({
+  initialLat,
+  initialLng,
+  onLocationSelected,
+}: LocationPickerMapProps) {
+  const mapContainerRef = useRef<HTMLDivElement>(null);
+  const mapRef = useRef<L.Map | null>(null);
+  const markerRef = useRef<L.Marker | null>(null);
+
+  const [currentCoords, setCurrentCoords] = useState<{ latitude: number; longitude: number } | null>(
+    initialLat !== undefined && initialLng !== undefined
+      ? { latitude: initialLat, longitude: initialLng }
+      : null
+  );
+
+  const [locating, setLocating] = useState(false);
+
+  // Update marker position & fire callback
+  const setPin = useCallback(
+    (lat: number, lng: number) => {
+      const roundedLat = Number(lat.toFixed(6));
+      const roundedLng = Number(lng.toFixed(6));
+
+      setCurrentCoords({ latitude: roundedLat, longitude: roundedLng });
+      onLocationSelected({ latitude: roundedLat, longitude: roundedLng });
+
+      if (mapRef.current) {
+        if (!markerRef.current) {
+          const marker = L.marker([lat, lng], {
+            icon: createPickerPinIcon(),
+            draggable: true,
+          }).addTo(mapRef.current);
+
+          marker.on("dragend", () => {
+            const pos = marker.getLatLng();
+            const rLat = Number(pos.lat.toFixed(6));
+            const rLng = Number(pos.lng.toFixed(6));
+            setCurrentCoords({ latitude: rLat, longitude: rLng });
+            onLocationSelected({ latitude: rLat, longitude: rLng });
+          });
+
+          markerRef.current = marker;
+        } else {
+          markerRef.current.setLatLng([lat, lng]);
+        }
+      }
+    },
+    [onLocationSelected]
+  );
+
+  useEffect(() => {
+    if (!mapContainerRef.current || mapRef.current) return;
+
+    // Default starting center (if no initial coords, start at Manila center or 14.5995, 120.9842)
+    const defaultLat = initialLat ?? 14.5995;
+    const defaultLng = initialLng ?? 120.9842;
+    const zoom = initialLat && initialLng ? 16 : 13;
+
+    const map = L.map(mapContainerRef.current, {
+      zoomControl: true,
+    }).setView([defaultLat, defaultLng], zoom);
+
+    mapRef.current = map;
+
+    L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
+      attribution:
+        '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
+    }).addTo(map);
+
+    if (initialLat !== undefined && initialLng !== undefined) {
+      setPin(initialLat, initialLng);
+    } else {
+      // Try auto-locating on map load if no initial location
+      if (navigator.geolocation) {
+        setLocating(true);
+        navigator.geolocation.getCurrentPosition(
+          (pos) => {
+            setLocating(false);
+            const { latitude, longitude } = pos.coords;
+            map.setView([latitude, longitude], 15);
+            setPin(latitude, longitude);
+          },
+          () => {
+            setLocating(false);
+          },
+          { enableHighAccuracy: false, timeout: 4000 }
+        );
+      }
+    }
+
+    // Map click handler to move/set pin
+    map.on("click", (e: L.LeafletMouseEvent) => {
+      setPin(e.latlng.lat, e.latlng.lng);
+    });
+
+    return () => {
+      map.remove();
+      mapRef.current = null;
+      markerRef.current = null;
+    };
+  }, []);
+
+  // Button handler to center map on GPS position
+  const handleLocateUser = () => {
+    if (!navigator.geolocation) return;
+
+    setLocating(true);
+    navigator.geolocation.getCurrentPosition(
+      (pos) => {
+        setLocating(false);
+        const { latitude, longitude } = pos.coords;
+        if (mapRef.current) {
+          mapRef.current.flyTo([latitude, longitude], 16, { duration: 1 });
+        }
+        setPin(latitude, longitude);
+      },
+      (err) => {
+        setLocating(false);
+        alert("Could not access your location. Please tap directly on the map to set a pin.");
+      },
+      { enableHighAccuracy: false, timeout: 5000 }
+    );
+  };
+
+  return (
+    <div className="relative w-full h-full min-h-[350px] sm:min-h-[420px] rounded-2xl overflow-hidden border border-text-secondary/15 shadow-neu-inset">
+      {/* Map Element */}
+      <div ref={mapContainerRef} className="w-full h-full min-h-[350px] sm:min-h-[420px]" />
+
+      {/* Floating GPS Button */}
+      <button
+        type="button"
+        onClick={handleLocateUser}
+        disabled={locating}
+        className="absolute top-3 right-3 z-[400] neu-button bg-bg/90 backdrop-blur-md p-2.5 rounded-xl text-text-primary shadow-neu-subtle hover:text-accent flex items-center gap-2 text-xs font-semibold cursor-pointer active:scale-95 transition-all"
+        title="Locate me"
+      >
+        <Locate className={`h-4 w-4 text-accent ${locating ? "animate-spin" : ""}`} />
+        <span className="hidden sm:inline">{locating ? "Locating…" : "My Location"}</span>
+      </button>
+
+      {/* Pin Status Banner */}
+      <div className="absolute bottom-3 left-3 right-3 z-[400] bg-bg/95 backdrop-blur-md px-3.5 py-2.5 rounded-xl border border-text-secondary/15 shadow-neu-raised flex items-center justify-between text-xs">
+        <div className="flex items-center gap-2 truncate">
+          <Navigation className="h-4 w-4 text-accent shrink-0" />
+          <span className="font-mono text-text-primary font-medium truncate">
+            {currentCoords
+              ? `${currentCoords.latitude.toFixed(5)}, ${currentCoords.longitude.toFixed(5)}`
+              : "Tap map to set pin"}
+          </span>
+        </div>
+        <span className="text-[10px] text-text-secondary font-sans ml-2 shrink-0">
+          {currentCoords ? "✓ Pin placed" : "Click anywhere"}
+        </span>
+      </div>
+    </div>
+  );
+}
diff --git a/components/LocationPickerModal.tsx b/components/LocationPickerModal.tsx
new file mode 100644
index 0000000..42ad82f
--- /dev/null
+++ b/components/LocationPickerModal.tsx
@@ -0,0 +1,123 @@
+"use client";
+
+import { useState } from "react";
+import dynamic from "next/dynamic";
+import { X, MapPin, Check } from "lucide-react";
+
+const LocationPickerMap = dynamic(() => import("./LocationPickerMap"), {
+  ssr: false,
+  loading: () => (
+    <div className="w-full h-[350px] sm:h-[420px] rounded-2xl neu-raised bg-bg/40 flex flex-col items-center justify-center gap-3 text-text-secondary text-sm font-mono animate-pulse">
+      <MapPin className="h-8 w-8 text-accent/60" />
+      <span>Loading Interactive Map…</span>
+    </div>
+  ),
+});
+
+interface LocationPickerModalProps {
+  initialLat?: number;
+  initialLng?: number;
+  onConfirm: (coords: { latitude: number; longitude: number }) => void;
+  onClose: () => void;
+}
+
+export default function LocationPickerModal({
+  initialLat,
+  initialLng,
+  onConfirm,
+  onClose,
+}: LocationPickerModalProps) {
+  const [selectedCoords, setSelectedCoords] = useState<{
+    latitude: number;
+    longitude: number;
+  } | null>(
+    initialLat !== undefined && initialLng !== undefined
+      ? { latitude: initialLat, longitude: initialLng }
+      : null
+  );
+
+  return (
+    <div
+      className="fixed inset-0 z-[100] flex items-center justify-center p-3 sm:p-6"
+      role="dialog"
+      aria-modal="true"
+      aria-label="Pin spot location on map"
+    >
+      {/* Backdrop */}
+      <div
+        className="absolute inset-0 bg-black/70 backdrop-blur-md transition-opacity"
+        onClick={onClose}
+      />
+
+      {/* Modal Card */}
+      <div className="relative z-10 w-full max-w-2xl bg-bg rounded-3xl p-4 sm:p-6 border border-text-secondary/15 shadow-neu-raised flex flex-col max-h-[92dvh]">
+        {/* Header */}
+        <div className="flex items-center justify-between pb-3 mb-3 border-b border-text-secondary/10">
+          <div className="flex items-center gap-2.5">
+            <div className="p-2 rounded-xl bg-accent/10 text-accent">
+              <MapPin className="h-5 w-5" />
+            </div>
+            <div>
+              <h3 className="text-base sm:text-lg font-serif font-bold text-text-primary">
+                Pin Location on Map
+              </h3>
+              <p className="text-xs text-text-secondary">
+                Tap anywhere on the map or drag the pin to set the exact spot position.
+              </p>
+            </div>
+          </div>
+          <button
+            type="button"
+            onClick={onClose}
+            className="neu-button flex h-9 w-9 items-center justify-center rounded-full text-text-secondary cursor-pointer hover:text-red-500 shrink-0"
+            aria-label="Close location picker"
+          >
+            <X className="h-4 w-4" />
+          </button>
+        </div>
+
+        {/* Map Container */}
+        <div className="flex-1 w-full overflow-hidden my-1">
+          <LocationPickerMap
+            initialLat={initialLat}
+            initialLng={initialLng}
+            onLocationSelected={(coords) => setSelectedCoords(coords)}
+          />
+        </div>
+
+        {/* Footer Actions */}
+        <div className="pt-4 mt-2 border-t border-text-secondary/10 flex items-center justify-between gap-3">
+          <div className="text-xs font-mono text-text-secondary truncate hidden sm:block">
+            {selectedCoords
+              ? `📍 ${selectedCoords.latitude.toFixed(5)}, ${selectedCoords.longitude.toFixed(5)}`
+              : "No pin selected"}
+          </div>
+
+          <div className="flex items-center gap-2.5 w-full sm:w-auto justify-end">
+            <button
+              type="button"
+              onClick={onClose}
+              className="neu-button rounded-xl px-4 py-2.5 text-xs sm:text-sm font-semibold text-text-secondary hover:text-text-primary cursor-pointer flex-1 sm:flex-initial"
+            >
+              Cancel
+            </button>
+            <button
+              type="button"
+              disabled={!selectedCoords}
+              onClick={() => {
+                if (selectedCoords) {
+                  onConfirm(selectedCoords);
+                  onClose();
+                }
+              }}
+              className="neu-button rounded-xl px-5 py-2.5 text-xs sm:text-sm font-semibold bg-accent text-white hover:bg-accent/90 disabled:opacity-40 cursor-pointer flex items-center justify-center gap-1.5 flex-1 sm:flex-initial shadow-neu-button"
+            >
+              <Check className="h-4 w-4" />
+              <span>Confirm Location</span>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

From 3576a0394576ab294ec4544673c44b5b7b49529a Mon Sep 17 00:00:00 2001
From: "Mateo, Noel John" <125169838+NoLmuna@users.noreply.github.com>
Date: Sat, 25 Jul 2026 00:12:51 +0800
Subject: [PATCH 20/22] color scheme

- changed the color scheme
---
 app/globals.css                    | 95 +++++++++++++++++-------------
 app/login/page.tsx                 |  8 +--
 app/manifest.ts                    |  4 +-
 app/map/page.tsx                   |  8 +--
 app/offline/RetryButton.tsx        |  2 +-
 app/offline/page.tsx               |  2 +-
 app/page.tsx                       | 45 +++++++-------
 components/LocationPickerModal.tsx |  2 +-
 components/SpotDetailModal.tsx     |  2 +-
 9 files changed, 93 insertions(+), 75 deletions(-)

diff --git a/app/globals.css b/app/globals.css
index 491270b..3335455 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -12,19 +12,20 @@
   --font-work-sans: "Work Sans", system-ui, -apple-system, sans-serif;
   --font-space-mono: "Space Mono", Consolas, Monaco, monospace;
 
-  /* Base palette — warm clay / parchment */
-  --bg: #ddd5c8;
-  --surface: #ddd5c8;
-  --text-primary: #2C2018;
-  --text-secondary: #6B5D4F;
-  --accent: #c06830;
-  --accent-glow: #d68a4c;
-  --category-cafe: #8B6F9E;
-  --category-restaurant: #3E6E77;
+  /* Base palette — cream / caramel / sage */
+  --bg: #F8F1E7;
+  --surface: #FCF8F3;
+  --text-primary: #4E342E;
+  --text-secondary: #7D6558;
+  --accent: #D4A373;
+  --accent-glow: #F4C542;
+  --category-cafe: #A3B18A;
+  --category-restaurant: #4E342E;
+  --gold: #F4C542;
 
   /* Neumorphic shadow pairs (light) */
-  --neu-light: #efe7d8;
-  --neu-dark: #c5bdb0;
+  --neu-light: #ffffff;
+  --neu-dark: #e2d6c7;
   --neu-shadow-raised: 6px 6px 14px var(--neu-dark), -6px -6px 14px var(--neu-light);
   --neu-shadow-inset: inset 4px 4px 10px var(--neu-dark), inset -4px -4px 10px var(--neu-light);
   --neu-shadow-button: 4px 4px 10px var(--neu-dark), -4px -4px 10px var(--neu-light);
@@ -33,18 +34,19 @@
 }
 
 .dark {
-  --bg: #1a1410;
-  --surface: #1a1410;
-  --text-primary: #F0E6D6;
+  --bg: #1C1410;
+  --surface: #261D17;
+  --text-primary: #F8F1E7;
   --text-secondary: #B8A890;
-  --accent: #D68A4C;
-  --accent-glow: #e9a868;
-  --category-cafe: #9b7fb0;
-  --category-restaurant: #4e8e97;
+  --accent: #D4A373;
+  --accent-glow: #F4C542;
+  --category-cafe: #A3B18A;
+  --category-restaurant: #A4897A;
+  --gold: #F4C542;
 
   /* Neumorphic shadow pairs (dark) */
-  --neu-light: #231c16;
-  --neu-dark: #110e0b;
+  --neu-light: #261e18;
+  --neu-dark: #120e0b;
   --neu-shadow-raised: 6px 6px 14px var(--neu-dark), -6px -6px 14px var(--neu-light);
   --neu-shadow-inset: inset 4px 4px 10px var(--neu-dark), inset -4px -4px 10px var(--neu-light);
   --neu-shadow-button: 4px 4px 10px var(--neu-dark), -4px -4px 10px var(--neu-light);
@@ -66,6 +68,7 @@
   --color-category-restaurant: var(--category-restaurant);
   --color-neu-light: var(--neu-light);
   --color-neu-dark: var(--neu-dark);
+  --color-gold: var(--gold);
 
   --shadow-neu-raised: var(--neu-shadow-raised);
   --shadow-neu-inset: var(--neu-shadow-inset);
@@ -84,6 +87,11 @@
 
 body {
   background: var(--bg);
+  background-image: 
+    radial-gradient(at 0% 0%, rgba(212, 163, 115, 0.12) 0px, transparent 50%),
+    radial-gradient(at 100% 0%, rgba(163, 177, 138, 0.15) 0px, transparent 50%),
+    radial-gradient(at 50% 100%, rgba(244, 197, 66, 0.08) 0px, transparent 50%);
+  background-attachment: fixed;
   color: var(--text-primary);
   font-family: var(--font-work-sans), system-ui, sans-serif;
 }
@@ -93,8 +101,9 @@ body {
 /* ================================================================== */
 
 .neu-raised {
-  background: var(--bg);
+  background: var(--surface);
   box-shadow: var(--neu-shadow-raised);
+  border: 1px solid rgba(125, 101, 88, 0.12);
   border-radius: 20px;
 }
 
@@ -105,8 +114,9 @@ body {
 }
 
 .neu-button {
-  background: var(--bg);
+  background: var(--surface);
   box-shadow: var(--neu-shadow-button);
+  border: 1px solid rgba(125, 101, 88, 0.1);
   border-radius: 14px;
   transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
 }
@@ -123,18 +133,19 @@ body {
 }
 
 .neu-input {
-  background: var(--bg);
+  background: var(--surface);
   box-shadow: var(--neu-shadow-inset);
-  border: none;
+  border: 1px solid rgba(125, 101, 88, 0.15);
   border-radius: 14px;
   padding: 14px 16px;
   color: var(--text-primary);
   font-size: 0.9rem;
   outline: none;
-  transition: box-shadow 0.3s ease, transform 0.2s ease;
+  transition: box-shadow 0.3s ease, transform 0.2s ease, border-color 0.2s ease;
 }
 
 .neu-input:focus {
+  border-color: var(--accent);
   box-shadow: inset 5px 5px 12px var(--neu-dark), inset -5px -5px 12px var(--neu-light), 0 0 0 2px var(--accent);
 }
 
@@ -144,8 +155,9 @@ body {
 }
 
 .neu-card {
-  background: var(--bg);
+  background: var(--surface);
   box-shadow: var(--neu-shadow-raised);
+  border: 1px solid rgba(125, 101, 88, 0.12);
   border-radius: 24px;
   transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
 }
@@ -456,7 +468,7 @@ body {
   position: absolute;
   width: 44px;
   height: 44px;
-  background: var(--accent);
+  background: var(--gold);
   border-radius: 50%;
   transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
 }
@@ -549,10 +561,10 @@ body {
 
 /* Fixed offline banner at the top */
 .offline-banner {
-  background: linear-gradient(135deg, #b45309, #d97706);
-  color: #fef3c7;
+  background: linear-gradient(135deg, #4E342E, #7D6558);
+  color: #F8F1E7;
   backdrop-filter: blur(12px);
-  box-shadow: 0 4px 20px rgba(180, 83, 9, 0.35), 0 1px 3px rgba(0, 0, 0, 0.2);
+  box-shadow: 0 4px 20px rgba(78, 52, 46, 0.35), 0 1px 3px rgba(0, 0, 0, 0.2);
   animation: offline-slide-in 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
   letter-spacing: 0.02em;
 }
@@ -564,9 +576,10 @@ body {
 
 /* Sync toast (success notification when reconnected) */
 .sync-toast {
-  background: linear-gradient(135deg, #065f46, #047857);
-  color: #d1fae5;
-  box-shadow: 0 8px 32px rgba(4, 120, 87, 0.4), var(--neu-shadow-raised);
+  background: linear-gradient(135deg, #A3B18A, #8F9E75);
+  color: #1C1410;
+  font-weight: 600;
+  box-shadow: 0 8px 32px rgba(163, 177, 138, 0.4), var(--neu-shadow-raised);
   animation: toast-pop-in 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
 }
 
@@ -587,15 +600,15 @@ body {
   width: 26px;
   height: 26px;
   border-radius: 50%;
-  background: linear-gradient(135deg, #b45309, #d97706);
-  color: #fef3c7;
-  box-shadow: 0 2px 8px rgba(180, 83, 9, 0.4);
+  background: linear-gradient(135deg, #D4A373, #F4C542);
+  color: #4E342E;
+  box-shadow: 0 2px 8px rgba(212, 163, 115, 0.4);
   animation: badge-pulse 2s ease-in-out infinite;
 }
 
 @keyframes badge-pulse {
-  0%, 100% { box-shadow: 0 2px 8px rgba(180, 83, 9, 0.4); transform: scale(1); }
-  50% { box-shadow: 0 2px 16px rgba(180, 83, 9, 0.7); transform: scale(1.08); }
+  0%, 100% { box-shadow: 0 2px 8px rgba(212, 163, 115, 0.4); transform: scale(1); }
+  50% { box-shadow: 0 2px 16px rgba(244, 197, 66, 0.7); transform: scale(1.08); }
 }
 
 /* Pending sync pill in activity feed list */
@@ -609,9 +622,9 @@ body {
   font-weight: 600;
   letter-spacing: 0.03em;
   text-transform: uppercase;
-  background: linear-gradient(135deg, #b45309, #d97706);
-  color: #fef3c7;
-  box-shadow: 0 1px 4px rgba(180, 83, 9, 0.3);
+  background: linear-gradient(135deg, #D4A373, #F4C542);
+  color: #4E342E;
+  box-shadow: 0 1px 4px rgba(212, 163, 115, 0.3);
   white-space: nowrap;
 }
 
diff --git a/app/login/page.tsx b/app/login/page.tsx
index bae900f..0667b33 100644
--- a/app/login/page.tsx
+++ b/app/login/page.tsx
@@ -42,7 +42,7 @@ function QuickLoginRow({
           referrerPolicy="no-referrer"
         />
       ) : (
-        <div className="flex h-10 w-10 items-center justify-center rounded-full bg-accent/20 text-accent font-bold text-sm">
+        <div className="flex h-10 w-10 items-center justify-center rounded-full bg-gold/25 text-[#4E342E] font-bold text-sm">
           {(account.displayName?.[0] ?? account.email?.[0] ?? "?").toUpperCase()}
         </div>
       )}
@@ -125,8 +125,8 @@ export default function LoginPage() {
       {/* ---- Animated background blobs ---- */}
       <div className="pointer-events-none absolute inset-0 overflow-hidden" style={{ filter: "url(#gooey-login)" }}>
         <div className="animate-blob-1 absolute -top-24 -left-24 h-72 w-72 rounded-full bg-accent/15" />
-        <div className="animate-blob-2 absolute -bottom-32 -right-20 h-80 w-80 rounded-full bg-category-cafe/15" />
-        <div className="animate-blob-3 absolute top-1/3 right-1/4 h-48 w-48 rounded-full bg-category-restaurant/15" />
+        <div className="animate-blob-2 absolute -bottom-32 -right-20 h-80 w-80 rounded-full bg-category-cafe/20" />
+        <div className="animate-blob-3 absolute top-1/3 right-1/4 h-48 w-48 rounded-full bg-gold/20" />
       </div>
 
       {/* ---- Main card ---- */}
@@ -141,7 +141,7 @@ export default function LoginPage() {
             />
           </div>
           <h1 className="text-3xl font-serif font-bold tracking-tight text-text-primary">
-            Keep<span className="text-accent">Check</span>
+            Keep<span className="text-category-cafe">Check</span>
           </h1>
           <p className="mt-2 text-sm text-text-secondary">
             Track &amp; rate every café and restaurant.
diff --git a/app/manifest.ts b/app/manifest.ts
index c7af232..05af500 100644
--- a/app/manifest.ts
+++ b/app/manifest.ts
@@ -8,8 +8,8 @@ export default function manifest(): MetadataRoute.Manifest {
       "Log and rate your experiences at food and beverage businesses.",
     start_url: "/",
     display: "standalone",
-    background_color: "#ffffff",
-    theme_color: "#000000",
+    background_color: "#F8F1E7",
+    theme_color: "#4E342E",
     icons: [
       {
         src: "/KeepCheck-Logo.png",
diff --git a/app/map/page.tsx b/app/map/page.tsx
index af75c88..a74b1ea 100644
--- a/app/map/page.tsx
+++ b/app/map/page.tsx
@@ -39,9 +39,9 @@ export default function MapPage() {
     <AuthGuard>
       {/* ---- Background blobs (GPU-contained) ---- */}
       <div className="pointer-events-none fixed inset-0 overflow-hidden opacity-40 blob-container" style={{ filter: "url(#gooey-bg)" }}>
-        <div className="animate-blob-1 absolute -top-32 -left-32 h-80 w-80 rounded-full bg-accent/10" />
-        <div className="animate-blob-2 absolute -bottom-40 -right-24 h-96 w-96 rounded-full bg-category-cafe/10" />
-        <div className="animate-blob-3 absolute top-1/2 left-1/3 h-56 w-56 rounded-full bg-category-restaurant/10" />
+        <div className="animate-blob-1 absolute -top-32 -left-32 h-80 w-80 rounded-full bg-accent/15" />
+        <div className="animate-blob-2 absolute -bottom-40 -right-24 h-96 w-96 rounded-full bg-category-cafe/15" />
+        <div className="animate-blob-3 absolute top-1/2 left-1/3 h-56 w-56 rounded-full bg-gold/15" />
       </div>
 
       {/* SVG Gooey filters for background */}
@@ -68,7 +68,7 @@ export default function MapPage() {
             </Link>
             <div>
               <h1 className="text-2xl sm:text-3xl font-serif font-bold tracking-tight text-text-primary">
-                Keep<span className="text-accent">Check</span> <span className="text-text-secondary font-sans font-normal text-lg sm:text-xl ml-1 sm:ml-2">/ Map</span>
+                Keep<span className="text-category-cafe">Check</span> <span className="text-text-secondary font-sans font-normal text-lg sm:text-xl ml-1 sm:ml-2">/ Map</span>
               </h1>
             </div>
           </div>
diff --git a/app/offline/RetryButton.tsx b/app/offline/RetryButton.tsx
index 15438ef..8f462ae 100644
--- a/app/offline/RetryButton.tsx
+++ b/app/offline/RetryButton.tsx
@@ -5,7 +5,7 @@ export default function RetryButton() {
     <button
       type="button"
       onClick={() => window.location.reload()}
-      className="mt-8 rounded-lg bg-accent px-6 py-3 text-sm font-semibold text-white transition-all hover:opacity-90 active:scale-95 cursor-pointer min-h-[44px]"
+      className="mt-8 rounded-xl bg-gold px-6 py-3 text-sm font-bold text-[#4E342E] transition-all hover:bg-gold/90 active:scale-95 cursor-pointer min-h-[44px] shadow-neu-button"
     >
       Try Again
     </button>
diff --git a/app/offline/page.tsx b/app/offline/page.tsx
index 52c4c71..2152893 100644
--- a/app/offline/page.tsx
+++ b/app/offline/page.tsx
@@ -52,7 +52,7 @@ export default function OfflinePage() {
 
       {/* Branding */}
       <p className="mt-12 text-xs font-serif text-text-secondary/60">
-        Keep<span className="text-accent font-bold">Check</span>
+        Keep<span className="text-category-cafe font-bold">Check</span>
       </p>
     </div>
   );
diff --git a/app/page.tsx b/app/page.tsx
index 947e87d..9d49bca 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -95,7 +95,9 @@ const CategoryPills = memo(function CategoryPills({
       {/* Gooey filter layer for background */}
       <div className="absolute inset-0 pointer-events-none rounded-2xl overflow-hidden" style={{ filter: "url(#gooey-medium)" }}>
         <div
-          className="absolute h-9 bg-accent rounded-xl transition-all duration-300 ease-out"
+          className={`absolute h-9 rounded-xl transition-all duration-300 ease-out ${
+            value === "Cafe" ? "bg-category-cafe" : "bg-category-restaurant"
+          }`}
           style={{
             width: "calc(50% - 10px)",
             left: value === "Cafe" ? "6px" : "calc(50% + 4px)",
@@ -142,7 +144,7 @@ const RatingPills = memo(function RatingPills({
       {/* Gooey filter layer */}
       <div className="absolute inset-0 pointer-events-none overflow-hidden rounded-2xl" style={{ filter: "url(#gooey-rating)" }}>
         <div
-          className="absolute h-9 w-9 rounded-full bg-accent transition-all duration-300 ease-out"
+          className="absolute h-9 w-9 rounded-full bg-gold transition-all duration-300 ease-out"
           style={{
             left: `calc(6px + ${(value - 1)} * (100% - 48px) / 9)`,
             top: "8px",
@@ -176,12 +178,15 @@ const RatingPills = memo(function RatingPills({
 /*  Category badge (card display)                                      */
 /* ------------------------------------------------------------------ */
 const CategoryBadge = memo(function CategoryBadge({ category }: { category: SpotCategory }) {
-  const bg = category === "Cafe" ? "bg-category-cafe" : "bg-category-restaurant";
-  const label = category === "Cafe" ? "☕ Cafe" : "🍽️ Restaurant";
+  const isCafe = category === "Cafe";
+  const label = isCafe ? "☕ Cafe" : "🍽️ Restaurant";
+  const styles = isCafe
+    ? "bg-[#A3B18A] text-[#1C1410] font-bold shadow-sm"
+    : "bg-[#4E342E] text-[#F8F1E7] font-bold shadow-sm";
 
   return (
     <span
-      className={`inline-flex items-center rounded-full px-2.5 py-0.5 text-[10px] font-semibold tracking-wider uppercase text-white ${bg}`}
+      className={`inline-flex items-center rounded-full px-2.5 py-0.5 text-[10px] tracking-wider uppercase ${styles}`}
     >
       {label}
     </span>
@@ -230,14 +235,14 @@ const SpotCard = memo(function SpotCard({
             className="h-full w-full object-cover transition-transform duration-500 hover:scale-110"
           />
           {/* Rating badge overlay */}
-          <div className="absolute top-3 right-3 flex h-10 w-10 items-center justify-center rounded-full bg-bg/90 shadow-neu-subtle font-mono text-sm font-bold text-accent backdrop-blur-sm">
+          <div className="absolute top-3 right-3 flex h-10 w-10 items-center justify-center rounded-full bg-bg/90 shadow-neu-subtle font-mono text-sm font-bold text-gold backdrop-blur-sm">
             {spot.rating}
           </div>
         </div>
       ) : (
         <div className="h-28 w-full bg-bg/40 flex items-center justify-center shadow-neu-inset relative">
           <span className="text-3xl opacity-45">{spot.category === "Cafe" ? "☕" : "🍽️"}</span>
-          <div className="absolute top-3 right-3 flex h-9 w-9 items-center justify-center rounded-full bg-bg shadow-neu-subtle font-mono text-xs font-bold text-accent">
+          <div className="absolute top-3 right-3 flex h-9 w-9 items-center justify-center rounded-full bg-bg shadow-neu-subtle font-mono text-xs font-bold text-gold">
             {spot.rating}
           </div>
         </div>
@@ -420,7 +425,7 @@ const FeedListItem = memo(function FeedListItem({
             <span className="hidden sm:inline">Offline</span>
           </span>
         )}
-        <span className="font-bold font-mono text-accent text-xs bg-bg/50 shadow-neu-inset px-2.5 py-1 rounded-full">
+        <span className="font-bold font-mono text-gold text-xs bg-bg/50 shadow-neu-inset px-2.5 py-1 rounded-full">
           ★ {spot.rating}
         </span>
         <button
@@ -1276,7 +1281,7 @@ function getCoords(): Promise<LocationCoords> {
         <div className="flex items-center justify-between">
           <div>
             <h1 className="text-2xl sm:text-3xl lg:text-4xl font-serif font-bold tracking-tight text-text-primary">
-              Keep<span className="text-accent">Check</span>
+              Keep<span className="text-category-cafe">Check</span>
             </h1>
             <p className="mt-1 text-sm sm:text-base text-text-secondary">
               Track &amp; rate every café and restaurant.
@@ -1298,7 +1303,7 @@ function getCoords(): Promise<LocationCoords> {
               <button
                 type="button"
                 onClick={openFormModal}
-                className="hidden md:inline-flex items-center gap-1.5 neu-button rounded-xl px-4 py-2.5 text-xs sm:text-sm font-semibold text-accent cursor-pointer hover:text-accent-glow"
+                className="hidden md:inline-flex items-center gap-1.5 rounded-xl px-4 py-2.5 text-xs sm:text-sm font-bold bg-gold text-[#4E342E] shadow-neu-button hover:bg-gold/90 active:scale-95 transition-all cursor-pointer"
               >
                 <Plus className="h-4 w-4" />
                 Add Spot
@@ -1459,7 +1464,7 @@ function getCoords(): Promise<LocationCoords> {
                       onClick={() => setPageSize(size)}
                       className={`px-2 py-0.5 rounded-lg text-xs font-mono font-bold transition-all cursor-pointer ${
                         pageSize === size
-                          ? "bg-accent text-white shadow-neu-subtle"
+                          ? "bg-accent text-[#4E342E] shadow-neu-subtle font-extrabold"
                           : "text-text-secondary hover:text-text-primary"
                       }`}
                     >
@@ -1476,7 +1481,7 @@ function getCoords(): Promise<LocationCoords> {
                   onClick={() => setFeedViewMode("list")}
                   className={`p-1.5 rounded-lg transition-all cursor-pointer ${
                     feedViewMode === "list"
-                      ? "bg-accent text-white shadow-neu-subtle"
+                      ? "bg-accent text-[#4E342E] shadow-neu-subtle font-bold"
                       : "text-text-secondary hover:text-text-primary"
                   }`}
                   title="Compact List View"
@@ -1489,7 +1494,7 @@ function getCoords(): Promise<LocationCoords> {
                   onClick={() => setFeedViewMode("grid")}
                   className={`p-1.5 rounded-lg transition-all cursor-pointer ${
                     feedViewMode === "grid"
-                      ? "bg-accent text-white shadow-neu-subtle"
+                      ? "bg-accent text-[#4E342E] shadow-neu-subtle font-bold"
                       : "text-text-secondary hover:text-text-primary"
                   }`}
                   title="Grid Cards View"
@@ -1629,7 +1634,7 @@ function getCoords(): Promise<LocationCoords> {
                         onClick={() => setCurrentPage(pageNum)}
                         className={`h-8 w-8 rounded-xl text-xs font-mono font-bold transition-all cursor-pointer flex items-center justify-center ${
                           currentPage === pageNum
-                            ? "bg-accent text-white shadow-neu-subtle"
+                            ? "bg-accent text-[#4E342E] shadow-neu-subtle font-extrabold"
                             : "neu-button text-text-secondary hover:text-text-primary"
                         }`}
                       >
@@ -1758,7 +1763,7 @@ function getCoords(): Promise<LocationCoords> {
               <div>
                 <p className="mb-1.5 text-xs font-semibold uppercase tracking-wider text-text-secondary flex justify-between">
                   <span>Rating</span>
-                  <span className="font-mono text-accent">({rating} / 10)</span>
+                  <span className="font-mono text-gold">({rating} / 10)</span>
                 </p>
                 <RatingPills value={rating} onChange={setRating} />
               </div>
@@ -1923,11 +1928,11 @@ function getCoords(): Promise<LocationCoords> {
                 type="submit"
                 disabled={saving || !name.trim() || success}
                 className={`
-                  w-full rounded-2xl py-3 text-sm sm:text-base font-semibold text-white
+                  w-full rounded-2xl py-3 text-sm sm:text-base font-bold
                   transition-all duration-300 cursor-pointer min-h-[44px] flex items-center justify-center gap-2
                   ${success
-                    ? "bg-green-600 shadow-neu-inset scale-[0.98]"
-                    : "bg-accent shadow-neu-button hover:shadow-neu-raised active:shadow-neu-inset"
+                    ? "bg-green-600 text-white shadow-neu-inset scale-[0.98]"
+                    : "bg-gold text-[#4E342E] shadow-neu-button hover:bg-gold/90 hover:shadow-neu-raised active:shadow-neu-inset"
                   }
                   disabled:opacity-40
                 `}
@@ -1969,10 +1974,10 @@ function getCoords(): Promise<LocationCoords> {
           onMouseLeave={() => handleFABHover(false)}
           onMouseDown={() => handleFABPress(true)}
           onMouseUp={() => handleFABPress(false)}
-          className="gsap-fab fixed bottom-6 right-6 z-40 neu-button h-14 w-14 rounded-full bg-accent text-white flex items-center justify-center shadow-lg cursor-pointer transition-all duration-300 group md:hidden"
+          className="gsap-fab fixed bottom-6 right-6 z-40 h-14 w-14 rounded-full bg-gold text-[#4E342E] font-bold flex items-center justify-center shadow-lg cursor-pointer transition-all duration-300 group md:hidden hover:scale-105 active:scale-95"
           aria-label="Add new spot"
         >
-          <Plus className="h-6 w-6 text-white" />
+          <Plus className="h-6 w-6 text-[#4E342E]" />
         </button>
       )}
 
diff --git a/components/LocationPickerModal.tsx b/components/LocationPickerModal.tsx
index 42ad82f..f7f5ada 100644
--- a/components/LocationPickerModal.tsx
+++ b/components/LocationPickerModal.tsx
@@ -110,7 +110,7 @@ export default function LocationPickerModal({
                   onClose();
                 }
               }}
-              className="neu-button rounded-xl px-5 py-2.5 text-xs sm:text-sm font-semibold bg-accent text-white hover:bg-accent/90 disabled:opacity-40 cursor-pointer flex items-center justify-center gap-1.5 flex-1 sm:flex-initial shadow-neu-button"
+              className="neu-button rounded-xl px-5 py-2.5 text-xs sm:text-sm font-bold bg-gold text-[#4E342E] hover:bg-gold/90 disabled:opacity-40 cursor-pointer flex items-center justify-center gap-1.5 flex-1 sm:flex-initial shadow-neu-button"
             >
               <Check className="h-4 w-4" />
               <span>Confirm Location</span>
diff --git a/components/SpotDetailModal.tsx b/components/SpotDetailModal.tsx
index 7ecfc00..f90e8a0 100644
--- a/components/SpotDetailModal.tsx
+++ b/components/SpotDetailModal.tsx
@@ -162,7 +162,7 @@ export default function SpotDetailModal({
                 {regenerating ? "Regenerating…" : "Regenerate Thumbnail"}
               </button>
             ) : (
-              <p className="text-xs font-mono text-accent animate-page-enter">
+              <p className="text-xs font-mono text-category-cafe font-bold animate-page-enter">
                 ✓ Thumbnail updated
               </p>
             )}

From 544479b007475c9790ede8342f6e01ec8eb5ddaf Mon Sep 17 00:00:00 2001
From: "Mateo, Noel John" <125169838+NoLmuna@users.noreply.github.com>
Date: Mon, 27 Jul 2026 22:48:06 +0800
Subject: [PATCH 21/22] toast notification

- implemented toast notifs around the web app
---
 app/layout.tsx                 |   5 +-
 app/login/page.tsx             |   6 +-
 app/page.tsx                   | 305 ++++++++++++++++-----------------
 components/SpotDetailModal.tsx |   7 +-
 components/SpotsMap.tsx        |  11 +-
 lib/auth.tsx                   |  19 +-
 lib/toast.tsx                  | 101 +++++++++++
 7 files changed, 283 insertions(+), 171 deletions(-)
 create mode 100644 lib/toast.tsx

diff --git a/app/layout.tsx b/app/layout.tsx
index 28a0743..18b6a64 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -1,5 +1,6 @@
 import type { Metadata } from "next";
 import { AuthProvider } from "@/lib/auth";
+import { ToastProvider } from "@/lib/toast";
 import "./globals.css";
 
 export const metadata: Metadata = {
@@ -93,7 +94,9 @@ export default function RootLayout({
         />
       </head>
       <body className="min-h-full flex flex-col" suppressHydrationWarning>
-        <AuthProvider>{children}</AuthProvider>
+        <ToastProvider>
+          <AuthProvider>{children}</AuthProvider>
+        </ToastProvider>
       </body>
     </html>
   );
diff --git a/app/login/page.tsx b/app/login/page.tsx
index 0667b33..0ddc8b1 100644
--- a/app/login/page.tsx
+++ b/app/login/page.tsx
@@ -3,6 +3,7 @@
 import { useEffect, useState } from "react";
 import { useRouter } from "next/navigation";
 import { useAuth, type QuickLoginAccount } from "@/lib/auth";
+import { useToast } from "@/lib/toast";
 
 /* ------------------------------------------------------------------ */
 /*  Google icon SVG                                                    */
@@ -72,6 +73,7 @@ function QuickLoginRow({
 /* ------------------------------------------------------------------ */
 export default function LoginPage() {
   const { user, loading, signInWithGoogle, quickLoginAccounts } = useAuth();
+  const { showToast } = useToast();
   const router = useRouter();
   const [signingIn, setSigningIn] = useState(false);
   const [error, setError] = useState<string | null>(null);
@@ -89,7 +91,9 @@ export default function LoginPage() {
     try {
       await signInWithGoogle(email);
     } catch {
-      setError("Sign-in failed. Please try again.");
+      const msg = "Sign-in failed. Please try again.";
+      setError(msg);
+      showToast(msg, "error");
     } finally {
       setSigningIn(false);
     }
diff --git a/app/page.tsx b/app/page.tsx
index 9d49bca..b9d812b 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -8,6 +8,7 @@ import { makeThumbnail, compressToBlob, compressBlobToSafeBase64 } from "@/utils
 import SpotDetailModal from "@/components/SpotDetailModal";
 import AuthGuard from "@/components/AuthGuard";
 import { useAuth } from "@/lib/auth";
+import { useToast } from "@/lib/toast";
 import {
   generateSpotId,
   writeSpotToFirestore,
@@ -95,9 +96,8 @@ const CategoryPills = memo(function CategoryPills({
       {/* Gooey filter layer for background */}
       <div className="absolute inset-0 pointer-events-none rounded-2xl overflow-hidden" style={{ filter: "url(#gooey-medium)" }}>
         <div
-          className={`absolute h-9 rounded-xl transition-all duration-300 ease-out ${
-            value === "Cafe" ? "bg-category-cafe" : "bg-category-restaurant"
-          }`}
+          className={`absolute h-9 rounded-xl transition-all duration-300 ease-out ${value === "Cafe" ? "bg-category-cafe" : "bg-category-restaurant"
+            }`}
           style={{
             width: "calc(50% - 10px)",
             left: value === "Cafe" ? "6px" : "calc(50% + 4px)",
@@ -110,18 +110,16 @@ const CategoryPills = memo(function CategoryPills({
       <button
         type="button"
         onClick={() => onChange("Cafe")}
-        className={`relative z-10 w-1/2 rounded-xl py-2 text-sm font-semibold transition-colors duration-300 min-h-[38px] cursor-pointer ${
-          value === "Cafe" ? "text-white font-bold" : "text-text-secondary hover:text-text-primary"
-        }`}
+        className={`relative z-10 w-1/2 rounded-xl py-2 text-sm font-semibold transition-colors duration-300 min-h-[38px] cursor-pointer ${value === "Cafe" ? "text-white font-bold" : "text-text-secondary hover:text-text-primary"
+          }`}
       >
         ☕ Cafe
       </button>
       <button
         type="button"
         onClick={() => onChange("Restaurant")}
-        className={`relative z-10 w-1/2 rounded-xl py-2 text-sm font-semibold transition-colors duration-300 min-h-[38px] cursor-pointer ${
-          value === "Restaurant" ? "text-white font-bold" : "text-text-secondary hover:text-text-primary"
-        }`}
+        className={`relative z-10 w-1/2 rounded-xl py-2 text-sm font-semibold transition-colors duration-300 min-h-[38px] cursor-pointer ${value === "Restaurant" ? "text-white font-bold" : "text-text-secondary hover:text-text-primary"
+          }`}
       >
         🍽️ Restaurant
       </button>
@@ -287,11 +285,10 @@ const PillButton = memo(function PillButton({
     <button
       type="button"
       onClick={onClick}
-      className={`rounded-xl px-4 py-2.5 text-xs md:text-sm font-medium transition-all duration-300 cursor-pointer whitespace-nowrap min-h-[40px] ${
-        active
+      className={`rounded-xl px-4 py-2.5 text-xs md:text-sm font-medium transition-all duration-300 cursor-pointer whitespace-nowrap min-h-[40px] ${active
           ? "shadow-neu-inset text-accent font-semibold"
           : "shadow-neu-subtle text-text-secondary hover:text-text-primary active:shadow-neu-inset"
-      }`}
+        }`}
     >
       {label}
     </button>
@@ -416,7 +413,7 @@ const FeedListItem = memo(function FeedListItem({
           </div>
         </div>
       </div>
-      
+
       <div className="flex items-center gap-3.5 flex-shrink-0">
         {/* Pending sync indicator in list view */}
         {spot.pendingSync && (
@@ -469,7 +466,7 @@ function HomePage() {
 
   /* -- Online/offline state -- */
   const [isOnline, setIsOnline] = useState(true);
-  const [syncToastMsg, setSyncToastMsg] = useState<string | null>(null);
+  const { showToast } = useToast();
 
   /* -- Modal control state -- */
   const [isFormOpen, setIsFormOpen] = useState(false);
@@ -673,14 +670,13 @@ function HomePage() {
       (online) => setIsOnline(online),
       (syncedCount) => {
         if (syncedCount > 0) {
-          setSyncToastMsg(`✓ Synced ${syncedCount} offline log${syncedCount > 1 ? "s" : ""}`);
-          setTimeout(() => setSyncToastMsg(null), 3500);
+          showToast(`✓ Synced ${syncedCount} offline log${syncedCount > 1 ? "s" : ""}`, "success");
         }
       },
     );
 
     return cleanup;
-  }, [user]);
+  }, [user, showToast]);
 
   // Reactive query — uses effectiveUid so data loads from Dexie even before Firebase auth resolves
   const spots = useLiveQuery(() => {
@@ -840,10 +836,10 @@ function HomePage() {
     setIsFormOpen(true);
   };
 
-  const closeFormModal = () => {
+  const closeFormModal = useCallback(() => {
     if (modalContentRef.current && backdropOverlayRef.current && modalGooeyBgRef.current) {
       const isMobile = window.innerWidth < 640;
-      
+
       const tl = gsap.timeline({
         onComplete: () => {
           setIsFormOpen(false);
@@ -852,34 +848,39 @@ function HomePage() {
 
       tl.to(backdropOverlayRef.current, {
         opacity: 0,
-        duration: 0.25,
+        duration: 0.18,
         ease: "power2.in"
       })
-      .to(
-        modalContentRef.current,
-        {
-          opacity: 0,
-          y: isMobile ? 30 : 15,
-          duration: 0.2,
-          ease: "power2.in"
-        },
-        "-=0.2"
-      )
-      .to(
-        modalGooeyBgRef.current,
-        {
-          y: isMobile ? "100%" : 100,
-          scale: isMobile ? 0.8 : 0.7,
-          opacity: 0,
-          duration: 0.45,
-          ease: "back.in(1.2)"
-        },
-        "-=0.2"
-      );
+        .to(
+          modalContentRef.current,
+          {
+            opacity: 0,
+            y: isMobile ? 25 : 12,
+            duration: 0.15,
+            ease: "power2.in"
+          },
+          "-=0.15"
+        )
+        .to(
+          modalGooeyBgRef.current,
+          {
+            y: isMobile ? "100%" : 80,
+            scale: isMobile ? 0.85 : 0.75,
+            opacity: 0,
+            duration: 0.22,
+            ease: "power2.in"
+          },
+          "-=0.15"
+        );
+
+      // Fallback timer: guarantee modal is removed from DOM even if animation context is interrupted
+      setTimeout(() => {
+        setIsFormOpen(false);
+      }, 250);
     } else {
       setIsFormOpen(false);
     }
-  };
+  }, []);
 
   // Trigger GSAP entrance when form state flips to open
   useEffect(() => {
@@ -904,27 +905,27 @@ function HomePage() {
         opacity: 1,
         duration: 0.3
       })
-      .to(
-        modalGooeyBgRef.current,
-        {
-          y: 0,
-          scale: 1,
-          opacity: 1,
-          duration: 0.55,
-          ease: isMobile ? "power3.out" : "back.out(1.3)"
-        },
-        "-=0.2"
-      )
-      .to(
-        modalContentRef.current,
-        {
-          opacity: 1,
-          y: 0,
-          duration: 0.35,
-          ease: "power2.out"
-        },
-        "-=0.25"
-      );
+        .to(
+          modalGooeyBgRef.current,
+          {
+            y: 0,
+            scale: 1,
+            opacity: 1,
+            duration: 0.55,
+            ease: isMobile ? "power3.out" : "back.out(1.3)"
+          },
+          "-=0.2"
+        )
+        .to(
+          modalContentRef.current,
+          {
+            opacity: 1,
+            y: 0,
+            duration: 0.35,
+            ease: "power2.out"
+          },
+          "-=0.25"
+        );
     }
   }, [isFormOpen]);
 
@@ -961,71 +962,71 @@ function HomePage() {
 
   /* ---------- handlers ---------- */
 
-interface LocationCoords {
-  latitude?: number;
-  longitude?: number;
-}
-
-function getCoords(): Promise<LocationCoords> {
-  return new Promise((resolve) => {
-    console.log("[KeepCheck Geolocation] Attempting to capture current position (timeout: 5000ms)...");
+  interface LocationCoords {
+    latitude?: number;
+    longitude?: number;
+  }
 
-    if (typeof window === "undefined" || !navigator.geolocation) {
-      console.warn("[KeepCheck Geolocation] Geolocation is not supported by this browser or environment.");
-      resolve({});
-      return;
-    }
+  function getCoords(): Promise<LocationCoords> {
+    return new Promise((resolve) => {
+      console.log("[KeepCheck Geolocation] Attempting to capture current position (timeout: 5000ms)...");
 
-    let resolved = false;
-    const timeoutId = setTimeout(() => {
-      if (!resolved) {
-        resolved = true;
-        console.warn("[KeepCheck Geolocation] Geolocation capture timed out after 5000ms.");
+      if (typeof window === "undefined" || !navigator.geolocation) {
+        console.warn("[KeepCheck Geolocation] Geolocation is not supported by this browser or environment.");
         resolve({});
+        return;
       }
-    }, 5000);
 
-    navigator.geolocation.getCurrentPosition(
-      (position) => {
+      let resolved = false;
+      const timeoutId = setTimeout(() => {
         if (!resolved) {
-          clearTimeout(timeoutId);
           resolved = true;
-          console.log(
-            `[KeepCheck Geolocation] Successfully captured position: lat=${position.coords.latitude}, lng=${position.coords.longitude} (accuracy: ${position.coords.accuracy}m)`
-          );
-          resolve({
-            latitude: position.coords.latitude,
-            longitude: position.coords.longitude,
-          });
+          console.warn("[KeepCheck Geolocation] Geolocation capture timed out after 5000ms.");
+          resolve({});
         }
-      },
-      (error) => {
-        if (!resolved) {
-          clearTimeout(timeoutId);
-          resolved = true;
-          
-          let reason = "Unknown error";
-          if (error.code === error.PERMISSION_DENIED) {
-            reason = "Permission denied by user";
-          } else if (error.code === error.POSITION_UNAVAILABLE) {
-            reason = "Position unavailable";
-          } else if (error.code === error.TIMEOUT) {
-            reason = "Timeout";
+      }, 5000);
+
+      navigator.geolocation.getCurrentPosition(
+        (position) => {
+          if (!resolved) {
+            clearTimeout(timeoutId);
+            resolved = true;
+            console.log(
+              `[KeepCheck Geolocation] Successfully captured position: lat=${position.coords.latitude}, lng=${position.coords.longitude} (accuracy: ${position.coords.accuracy}m)`
+            );
+            resolve({
+              latitude: position.coords.latitude,
+              longitude: position.coords.longitude,
+            });
           }
-          console.warn(
-            `[KeepCheck Geolocation] Geolocation capture failed: ${reason} (code: ${error.code}, message: ${error.message})`
-          );
-          resolve({});
+        },
+        (error) => {
+          if (!resolved) {
+            clearTimeout(timeoutId);
+            resolved = true;
+
+            let reason = "Unknown error";
+            if (error.code === error.PERMISSION_DENIED) {
+              reason = "Permission denied by user";
+            } else if (error.code === error.POSITION_UNAVAILABLE) {
+              reason = "Position unavailable";
+            } else if (error.code === error.TIMEOUT) {
+              reason = "Timeout";
+            }
+            console.warn(
+              `[KeepCheck Geolocation] Geolocation capture failed: ${reason} (code: ${error.code}, message: ${error.message})`
+            );
+            resolve({});
+          }
+        },
+        {
+          enableHighAccuracy: false,
+          timeout: 5000,
+          maximumAge: 0,
         }
-      },
-      {
-        enableHighAccuracy: false,
-        timeout: 5000,
-        maximumAge: 0,
-      }
-    );
-  });
-}
+      );
+    });
+  }
 
   const handleCaptureCurrentGPS = async () => {
     setGettingGps(true);
@@ -1033,8 +1034,9 @@ function getCoords(): Promise<LocationCoords> {
     setGettingGps(false);
     if (res.latitude !== undefined && res.longitude !== undefined) {
       setManualCoords({ latitude: res.latitude, longitude: res.longitude });
+      showToast("📍 Location set to current GPS position", "info");
     } else {
-      alert("Could not detect current position. You can pin the location manually on the map!");
+      showToast("Could not detect GPS position. Pin manually on map!", "error");
     }
   };
 
@@ -1057,9 +1059,7 @@ function getCoords(): Promise<LocationCoords> {
           ]);
         } catch (imgErr) {
           console.error("[KeepCheck] Image processing failed:", imgErr);
-          alert(
-            "Could not process this image format. Try taking a JPEG photo instead.",
-          );
+          showToast("Could not process this image format. Try taking a standard JPEG photo.", "error");
           setSaving(false);
           return;
         }
@@ -1149,7 +1149,11 @@ function getCoords(): Promise<LocationCoords> {
         console.warn("[KeepCheck] Firestore write failed — queued for sync when online:", firestoreErr);
       }
 
-      // ---- 3. Reset form & show success ----
+      // ---- 3. Close modal immediately & show sleek toast notification ----
+      closeFormModal();
+      showToast(`🎉 "${trimmed}" logged successfully!`, "success", category === "Cafe" ? "☕" : "🍽️");
+
+      // Reset form fields
       setName("");
       setCategory("Restaurant");
       setRating(7);
@@ -1157,32 +1161,21 @@ function getCoords(): Promise<LocationCoords> {
       setImageFile(null);
       setManualCoords(null);
       if (fileInputRef.current) fileInputRef.current.value = "";
-      
-      setSuccess(true);
-      
-      setTimeout(() => {
-        setSuccess(false);
-        closeFormModal();
-      }, 1200);
     } catch (err: unknown) {
       if (
         err instanceof DOMException &&
         err.name === "QuotaExceededError"
       ) {
-        alert(
-          "Your device is out of storage space. Free some space and try again.",
-        );
+        showToast("Your device is out of storage space. Free space and try again.", "error");
       } else {
         console.error("[KeepCheck] Save failed:", err);
-        alert("Something went wrong while saving. Please try again.");
+        showToast("Something went wrong while saving spot. Please try again.", "error");
       }
     } finally {
       setSaving(false);
     }
   }
 
-
-
   async function deleteEntry(id: number) {
     try {
       setDeletingIds((prev: Set<number>) => new Set<number>(prev).add(id));
@@ -1208,6 +1201,8 @@ function getCoords(): Promise<LocationCoords> {
         }
       }
 
+      showToast(`🗑️ Spot deleted`, "delete");
+
       setDeletingIds((prev: Set<number>) => {
         const next = new Set<number>(prev);
         next.delete(id);
@@ -1215,6 +1210,7 @@ function getCoords(): Promise<LocationCoords> {
       });
     } catch (error) {
       console.error("Failed to delete entry:", error);
+      showToast("Failed to delete entry", "error");
       setDeletingIds((prev: Set<number>) => {
         const next = new Set<number>(prev);
         next.delete(id);
@@ -1268,13 +1264,7 @@ function getCoords(): Promise<LocationCoords> {
         </div>
       )}
 
-      {/* ---- Sync Toast ---- */}
-      {syncToastMsg && (
-        <div className="sync-toast fixed top-4 left-1/2 -translate-x-1/2 z-[100] flex items-center gap-2 px-5 py-2.5 rounded-2xl text-sm font-semibold">
-          <Cloud className="h-4 w-4" />
-          <span>{syncToastMsg}</span>
-        </div>
-      )}
+
 
       {/* ---- Header ---- */}
       <header className={`relative z-40 mb-6 sm:mb-8 gsap-header gsap-reveal ${!isOnline ? 'mt-10' : ''}`}>
@@ -1297,7 +1287,7 @@ function getCoords(): Promise<LocationCoords> {
               <MapPin className="h-5 w-5" />
             </Link>
             <ThemeToggle dark={dark} onToggle={() => setDark((d: boolean) => !d)} />
-            
+
             {/* Desktop Add Spot button */}
             {effectiveUid && (
               <button
@@ -1436,7 +1426,7 @@ function getCoords(): Promise<LocationCoords> {
 
       {/* ---- Bottom Section: Activity Feed & Logs ---- */}
       <section className="w-full mb-16">
-        
+
         {/* Activity feed controls header */}
         <div className="flex flex-wrap items-center justify-between gap-3 mb-4 gsap-feed-header gsap-reveal">
           <div className="flex items-center gap-2.5">
@@ -1462,11 +1452,10 @@ function getCoords(): Promise<LocationCoords> {
                       key={size}
                       type="button"
                       onClick={() => setPageSize(size)}
-                      className={`px-2 py-0.5 rounded-lg text-xs font-mono font-bold transition-all cursor-pointer ${
-                        pageSize === size
+                      className={`px-2 py-0.5 rounded-lg text-xs font-mono font-bold transition-all cursor-pointer ${pageSize === size
                           ? "bg-accent text-[#4E342E] shadow-neu-subtle font-extrabold"
                           : "text-text-secondary hover:text-text-primary"
-                      }`}
+                        }`}
                     >
                       {size}
                     </button>
@@ -1479,11 +1468,10 @@ function getCoords(): Promise<LocationCoords> {
                 <button
                   type="button"
                   onClick={() => setFeedViewMode("list")}
-                  className={`p-1.5 rounded-lg transition-all cursor-pointer ${
-                    feedViewMode === "list"
+                  className={`p-1.5 rounded-lg transition-all cursor-pointer ${feedViewMode === "list"
                       ? "bg-accent text-[#4E342E] shadow-neu-subtle font-bold"
                       : "text-text-secondary hover:text-text-primary"
-                  }`}
+                    }`}
                   title="Compact List View"
                   aria-label="List view"
                 >
@@ -1492,11 +1480,10 @@ function getCoords(): Promise<LocationCoords> {
                 <button
                   type="button"
                   onClick={() => setFeedViewMode("grid")}
-                  className={`p-1.5 rounded-lg transition-all cursor-pointer ${
-                    feedViewMode === "grid"
+                  className={`p-1.5 rounded-lg transition-all cursor-pointer ${feedViewMode === "grid"
                       ? "bg-accent text-[#4E342E] shadow-neu-subtle font-bold"
                       : "text-text-secondary hover:text-text-primary"
-                  }`}
+                    }`}
                   title="Grid Cards View"
                   aria-label="Grid view"
                 >
@@ -1632,11 +1619,10 @@ function getCoords(): Promise<LocationCoords> {
                         key={pageNum}
                         type="button"
                         onClick={() => setCurrentPage(pageNum)}
-                        className={`h-8 w-8 rounded-xl text-xs font-mono font-bold transition-all cursor-pointer flex items-center justify-center ${
-                          currentPage === pageNum
+                        className={`h-8 w-8 rounded-xl text-xs font-mono font-bold transition-all cursor-pointer flex items-center justify-center ${currentPage === pageNum
                             ? "bg-accent text-[#4E342E] shadow-neu-subtle font-extrabold"
                             : "neu-button text-text-secondary hover:text-text-primary"
-                        }`}
+                          }`}
                       >
                         {pageNum}
                       </button>
@@ -1960,7 +1946,10 @@ function getCoords(): Promise<LocationCoords> {
         <LocationPickerModal
           initialLat={manualCoords?.latitude}
           initialLng={manualCoords?.longitude}
-          onConfirm={(coords) => setManualCoords(coords)}
+          onConfirm={(coords) => {
+            setManualCoords(coords);
+            showToast("📍 Location pin saved", "info");
+          }}
           onClose={() => setIsLocationPickerOpen(false)}
         />
       )}
diff --git a/components/SpotDetailModal.tsx b/components/SpotDetailModal.tsx
index f90e8a0..bc06399 100644
--- a/components/SpotDetailModal.tsx
+++ b/components/SpotDetailModal.tsx
@@ -7,6 +7,7 @@ import { makeThumbnailFromBlob } from "@/utils/image";
 import { X, ImageOff, RefreshCw } from "lucide-react";
 import { useAuth } from "@/lib/auth";
 import { writeSpotToFirestore } from "@/lib/firestore";
+import { useToast } from "@/lib/toast";
 
 /* ------------------------------------------------------------------ */
 /*  Props                                                              */
@@ -33,6 +34,7 @@ export default function SpotDetailModal({
   );
 
   const { user } = useAuth();
+  const { showToast } = useToast();
   const [objectUrl, setObjectUrl] = useState<string | null>(null);
   const [regenerating, setRegenerating] = useState(false);
   const [regenerated, setRegenerated] = useState(false);
@@ -99,13 +101,14 @@ export default function SpotDetailModal({
       }
 
       setRegenerated(true);
+      showToast("✓ Thumbnail updated successfully!", "success");
     } catch (err) {
       console.error("[KeepCheck] Thumbnail regeneration failed:", err);
-      alert("Could not regenerate thumbnail. Please try again.");
+      showToast("Could not regenerate thumbnail. Please try again.", "error");
     } finally {
       setRegenerating(false);
     }
-  }, [image, spotId, user]);
+  }, [image, spotId, user, showToast]);
 
   /* ---- Render ---- */
   return (
diff --git a/components/SpotsMap.tsx b/components/SpotsMap.tsx
index 593d2d9..1e96226 100644
--- a/components/SpotsMap.tsx
+++ b/components/SpotsMap.tsx
@@ -11,7 +11,7 @@ interface SpotsMapProps {
 
 const createCustomIcon = (spot: FoodSpotLog) => {
   const categoryColor = spot.category === "Cafe" ? "var(--category-cafe)" : "var(--category-restaurant)";
-  
+
   const htmlContent = `
     <div style="
       display: flex;
@@ -81,15 +81,14 @@ export default function SpotsMap({ spots }: SpotsMapProps) {
     validSpots.forEach((spot) => {
       const popupContent = `
         <div style="display: flex; flex-direction: column; gap: 8px; width: 140px; font-family: var(--font-work-sans), sans-serif; padding: 2px;">
-          ${
-            spot.thumbnail
-              ? `<div style="width: 100%; height: 80px; overflow: hidden; border-radius: 8px;">
+          ${spot.thumbnail
+          ? `<div style="width: 100%; height: 80px; overflow: hidden; border-radius: 8px;">
                    <img src="${spot.thumbnail}" alt="${spot.name}" style="width: 100%; height: 100%; object-fit: cover;" />
                  </div>`
-              : `<div style="width: 100%; height: 48px; background: rgba(0,0,0,0.05); display: flex; align-items: center; justify-content: center; font-size: 24px; border-radius: 8px;">
+          : `<div style="width: 100%; height: 48px; background: rgba(0,0,0,0.05); display: flex; align-items: center; justify-content: center; font-size: 24px; border-radius: 8px;">
                    ${spot.category === "Cafe" ? "☕" : "🍽️"}
                  </div>`
-          }
+        }
           <div style="display: flex; flex-direction: column; gap: 2px;">
             <h3 style="font-family: var(--font-fraunces), Georgia, serif; font-weight: bold; font-size: 14px; margin: 0; color: var(--text-primary); text-overflow: ellipsis; overflow: hidden; white-space: nowrap;">${spot.name}</h3>
             <div style="display: flex; align-items: center; gap: 6px; margin-top: 4px;">
diff --git a/lib/auth.tsx b/lib/auth.tsx
index 8207f18..dab5695 100644
--- a/lib/auth.tsx
+++ b/lib/auth.tsx
@@ -22,6 +22,7 @@ import {
   SessionProvider,
 } from "next-auth/react";
 import { getFirebaseAuth } from "./firebase";
+import { useToast } from "./toast";
 
 /* ------------------------------------------------------------------ */
 /*  Types                                                              */
@@ -125,6 +126,7 @@ export function AuthProvider({ children }: { children: ReactNode }) {
 
 function AuthProviderInner({ children }: { children: ReactNode }) {
   const { data: nextAuthSession, status: nextAuthStatus } = useSession();
+  const { showToast } = useToast();
 
   const [user, setUser] = useState<User | null>(null);
   const [firebaseLoading, setFirebaseLoading] = useState(true);
@@ -134,6 +136,9 @@ function AuthProviderInner({ children }: { children: ReactNode }) {
   >([]);
   const [cachedSession, setCachedSession] = useState<CachedSession | null>(null);
 
+  // Guard to prevent repeating welcome toast
+  const prevUserRef = useRef<User | null>(null);
+
   // ---- Ref guard: prevent duplicate token-bridge calls ----
   // Similar to the old redirectHandled ref — ensures the POST to
   // /api/firebase-token fires at most once per session lifecycle,
@@ -181,6 +186,12 @@ function AuthProviderInner({ children }: { children: ReactNode }) {
   // Listen to Firebase auth state.
   useEffect(() => {
     const unsubscribe = onAuthStateChanged(getFirebaseAuth(), (firebaseUser) => {
+      if (firebaseUser && !prevUserRef.current) {
+        const name = firebaseUser.displayName ?? firebaseUser.email ?? "User";
+        showToast(`👋 Welcome back, ${name}!`, "success");
+      }
+      prevUserRef.current = firebaseUser;
+
       setUser(firebaseUser);
       setFirebaseLoading(false);
 
@@ -197,7 +208,7 @@ function AuthProviderInner({ children }: { children: ReactNode }) {
       }
     });
     return unsubscribe;
-  }, [saveToQuickLogin]);
+  }, [saveToQuickLogin, showToast]);
 
   // ---- NextAuth → Firebase token bridge ----
   //
@@ -239,9 +250,10 @@ function AuthProviderInner({ children }: { children: ReactNode }) {
         // Reset the guard so the user can retry (e.g. by refreshing).
         tokenBridgeInFlight.current = false;
         setBridgeError(err instanceof Error ? err.message : String(err));
+        showToast("Authentication session error. Please try again.", "error");
       }
     })();
-  }, [nextAuthStatus, nextAuthSession, user]);
+  }, [nextAuthStatus, nextAuthSession, user, showToast]);
 
   // Sign in with Google via NextAuth's OAuth flow.
   // NextAuth handles the full OAuth redirect → callback → session lifecycle.
@@ -257,6 +269,7 @@ function AuthProviderInner({ children }: { children: ReactNode }) {
   // of clearing local state instantly without a full page reload/navigation.
   const signOut = useCallback(async () => {
     console.log("[KeepCheck AuthContext] signOut called");
+    showToast("👋 Signed out successfully", "info");
 
     try {
       // 1. Sign out of NextAuth without redirecting — explicitly set { redirect: false }
@@ -286,7 +299,7 @@ function AuthProviderInner({ children }: { children: ReactNode }) {
     // Set user to null to trigger AuthGuard redirect
     console.log("[KeepCheck AuthContext] Setting user to null");
     setUser(null);
-  }, []);
+  }, [showToast]);
 
   const loading =
     firebaseLoading ||
diff --git a/lib/toast.tsx b/lib/toast.tsx
new file mode 100644
index 0000000..2fe4ec0
--- /dev/null
+++ b/lib/toast.tsx
@@ -0,0 +1,101 @@
+"use client";
+
+import {
+  createContext,
+  useContext,
+  useState,
+  useCallback,
+  type ReactNode,
+} from "react";
+import { Trash2, AlertTriangle, Info, CheckCircle2, X } from "lucide-react";
+
+export type ToastType = "success" | "delete" | "info" | "error";
+
+export interface ToastMessage {
+  id: number;
+  message: string;
+  type: ToastType;
+  icon?: string;
+}
+
+interface ToastContextValue {
+  showToast: (message: string, type?: ToastType, icon?: string) => void;
+}
+
+const ToastContext = createContext<ToastContextValue | null>(null);
+
+export function ToastProvider({ children }: { children: ReactNode }) {
+  const [toasts, setToasts] = useState<ToastMessage[]>([]);
+
+  const showToast = useCallback(
+    (message: string, type: ToastType = "success", icon?: string) => {
+      const id = Date.now() + Math.random();
+      const newToast: ToastMessage = { id, message, type, icon };
+
+      setToasts((prev) => [...prev.slice(-2), newToast]); // Keep max 3 visible
+
+      setTimeout(() => {
+        setToasts((prev) => prev.filter((t) => t.id !== id));
+      }, 3500);
+    },
+    []
+  );
+
+  const removeToast = useCallback((id: number) => {
+    setToasts((prev) => prev.filter((t) => t.id !== id));
+  }, []);
+
+  return (
+    <ToastContext.Provider value={{ showToast }}>
+      {children}
+      {/* Toast Notification Container */}
+      <div className="fixed top-4 left-1/2 -translate-x-1/2 z-[9999] flex flex-col items-center gap-2 max-w-sm sm:max-w-md w-full px-4 pointer-events-none">
+        {toasts.map((toast) => (
+          <div
+            key={toast.id}
+            className={`pointer-events-auto flex items-center gap-3 px-5 py-3 rounded-2xl text-xs sm:text-sm font-semibold shadow-neu-raised backdrop-blur-md animate-page-enter transition-all w-full border ${
+              toast.type === "success"
+                ? "bg-bg/95 border-category-cafe/40 text-text-primary"
+                : toast.type === "delete"
+                ? "bg-bg/95 border-red-500/30 text-red-500"
+                : toast.type === "error"
+                ? "bg-bg/95 border-red-500/40 text-red-500"
+                : "bg-bg/95 border-accent/40 text-text-primary"
+            }`}
+          >
+            {toast.icon ? (
+              <span className="text-base">{toast.icon}</span>
+            ) : toast.type === "delete" ? (
+              <Trash2 className="h-4 w-4 text-red-500 shrink-0" />
+            ) : toast.type === "error" ? (
+              <AlertTriangle className="h-4 w-4 text-red-500 shrink-0" />
+            ) : toast.type === "info" ? (
+              <Info className="h-4 w-4 text-accent shrink-0" />
+            ) : (
+              <CheckCircle2 className="h-4 w-4 text-category-cafe shrink-0" />
+            )}
+            <span className="flex-1 truncate">{toast.message}</span>
+            <button
+              type="button"
+              onClick={() => removeToast(toast.id)}
+              className="text-text-secondary/50 hover:text-text-primary cursor-pointer p-0.5 shrink-0"
+              aria-label="Dismiss notification"
+            >
+              <X className="h-3.5 w-3.5" />
+            </button>
+          </div>
+        ))}
+      </div>
+    </ToastContext.Provider>
+  );
+}
+
+export function useToast(): ToastContextValue {
+  const ctx = useContext(ToastContext);
+  if (!ctx) {
+    return {
+      showToast: (msg) => console.log("[Toast fallback]:", msg),
+    };
+  }
+  return ctx;
+}

From be65d2edfa203947846e1240e6cc56a7150663ce Mon Sep 17 00:00:00 2001
From: "Mateo, Noel John" <125169838+NoLmuna@users.noreply.github.com>
Date: Mon, 27 Jul 2026 22:57:00 +0800
Subject: [PATCH 22/22] Update README.md

---
 README.md | 159 ++++++++++++++++++++++++++++++++++--------------------
 1 file changed, 101 insertions(+), 58 deletions(-)

diff --git a/README.md b/README.md
index 678e5b3..080812e 100644
--- a/README.md
+++ b/README.md
@@ -1,71 +1,114 @@
 # KeepCheck
 
-An offline-first PWA for logging and rating food and drink spots. Built with Next.js, Dexie.js, and Tailwind CSS. Your data stays on your device—no cloud, no accounts, fully private.
+A Progressive Web App for logging and rating food and drink spots. Built offline-first with local IndexedDB storage and optional real-time cloud sync via Firebase. Works on desktop and mobile, with or without an internet connection.
 
+## Features
 
-## Project Structure
-
-    keepcheck/
-        app/            - Main UI, search/sort logic, components
-        public/         - Static assets (logo, icons)
-        manifest.ts     - PWA configuration
-        sw.js           - Service worker for offline mode
-        package.json    - Dependencies and scripts
-
-
-## Requirements
-
-- Node.js (v18 or later recommended)
-- A modern web browser (Chrome, Edge, Safari, etc.)
-- npm, yarn, pnpm, or bun
-
-
-## Setup Guide for New Cloners
-
-### Step 1 - Clone or Download
-
-    git clone https://github.com/yourusername/keepcheck.git
-    cd keepcheck
-
-
-### Step 2 - Install Dependencies
-
-Run this in your terminal:
-
-    npm install
-
-
-### Step 3 - Start Development
-
-    npm run dev
-
-Open http://localhost:3000 in your browser.
+- **Offline-First Storage** — All data is written instantly to IndexedDB (via Dexie.js) so the app works without a network. A service worker caches the app shell for full offline reliability.
+- **Cloud Sync** — Sign in with Google to sync spots and images across devices in real-time through Firestore. Offline edits queue automatically and sync when connectivity returns.
+- **Interactive Maps** — View logged spots on a Leaflet/OpenStreetMap view. Pick a location by tapping the map or use device GPS to auto-detect coordinates.
+- **Image Support** — Attach photos to spots. Images are compressed locally for thumbnails and cached in IndexedDB at full resolution.
+- **Search, Filter, and Sort** — Text search with debounce, category filters (Cafe, Restaurant), sort by date or rating, and toggle between list and grid views.
+- **Toast Notifications** — All user actions (logging, deleting, signing in/out, syncing, errors) surface as brief toast notifications instead of alerts or silent failures.
+- **PWA Installable** — Can be installed to the home screen on mobile or as a desktop app through the browser.
 
+## Tech Stack
 
-## Running KeepCheck
+| Technology | Role |
+| --- | --- |
+| Next.js 16 (App Router) | Framework and routing |
+| Dexie.js | IndexedDB wrapper for local storage |
+| Firebase Auth + Firestore | Authentication and cloud database |
+| NextAuth.js v5 | OAuth session management |
+| Tailwind CSS v4 | Styling and theming |
+| GSAP | Animations |
+| Leaflet.js | Map rendering |
+| Serwist | Service worker and PWA support |
 
-Just open the app in your browser. Since it is a PWA, you can "Install" it via your browser menu to use it as a standalone app on your desktop or phone home screen.
+## Project Structure
 
+```
+app/
+  api/              Server routes (auth callback, token exchange)
+  login/            Sign-in page
+  map/              Full-page map view
+  offline/          Offline fallback page
+  db.ts             IndexedDB schema
+  globals.css       Theme tokens and animations
+  layout.tsx        Root layout (providers)
+  page.tsx          Main application page
+
+components/
+  AuthGuard.tsx           Auth-protected wrapper
+  LocationPickerMap.tsx   Map pin selector
+  LocationPickerModal.tsx Modal for picking a location
+  SpotDetailModal.tsx     Full-res photo viewer
+  SpotsMap.tsx            Map with spot markers
+
+lib/
+  auth.tsx          Auth context (NextAuth + Firebase bridge)
+  firebase.ts       Firebase client setup
+  firestore.ts      Firestore read/write helpers
+  offlineSync.ts    Offline queue and reconnection sync
+  toast.tsx         Global toast notification provider
+
+utils/
+  image.ts          Image compression and resizing
+```
+
+## Setup
+
+### Prerequisites
+
+- Node.js 18 or later
+- npm (or yarn / pnpm / bun)
+
+### 1. Clone and install
+
+```bash
+git clone https://github.com/yourusername/keepcheck.git
+cd keepcheck
+npm install
+```
+
+### 2. Configure environment
+
+Create a `.env.local` file in the project root:
+
+```env
+# NextAuth
+AUTH_SECRET=
+AUTH_GOOGLE_ID=
+AUTH_GOOGLE_SECRET=
+
+# Firebase (client)
+NEXT_PUBLIC_FIREBASE_API_KEY=
+NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=
+NEXT_PUBLIC_FIREBASE_PROJECT_ID=
+NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=
+NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=
+NEXT_PUBLIC_FIREBASE_APP_ID=
+
+# Firebase Admin (server-side token exchange)
+FIREBASE_CLIENT_EMAIL=
+FIREBASE_PRIVATE_KEY=
+```
+
+### 3. Run
+
+```bash
+npm run dev
+```
+
+Open [http://localhost:3000](http://localhost:3000).
 
 ## How It Works
 
-    1. Your data is managed by Dexie.js (IndexedDB wrapper) stored locally in your browser.
-    2. Next.js App Router handles the UI state reactively using useLiveQuery.
-    3. Tailwind CSS handles the theme toggling via class-based dark mode.
-    4. Service Worker (sw.js) caches the app shell for offline reliability.
-
-
-## Tech Stack
-
-    Next.js         - React framework for the App Router
-    Dexie.js        - Local IndexedDB storage for offline-first data
-    Tailwind CSS    - Utility-first styling
-    Lucide React    - Clean, consistent iconography
-    Vercel          - Deployment platform
-
+1. When you log a spot, the data is written to IndexedDB immediately. If you are signed in and online, it also writes to Firestore in the background.
+2. If you are offline, spots are flagged as pending. When the app detects connectivity, it runs a sync sweep to push pending records to Firestore.
+3. Firestore snapshot listeners keep your local database in sync with cloud changes from other devices.
+4. Images are stored as blobs in IndexedDB and as compressed base64 strings in Firestore.
 
-## Roadmap & Future Scope
+## License
 
-- Direct JSON restoration (Import functionality)
-- Advanced categorization (Food Truck, Bakery, Bar, etc.)
-- Data visualization (Charts for your ratings over time)
+MIT