feat: add last sync and health

app/components/home/index.tsx

@@ -24,6 +24,9 @@ import Error from "~/components/error";
 import { useSearchParams } from "react-router";
 import { useColles, type User } from "~/lib/api";
 import TabContent from "~/components/home/tab-content";
+import { MainLayout } from "~/layout";
+import { forceReload } from "~/lib/utils";
+import { SyncButton } from "../sync-status";
 
 export default function Home({ user }: { user: User }) {
   // Handle query parameters
@@ -62,8 +65,15 @@ export default function Home({ user }: { user: User }) {
   };
 
   // Fetch colles from API
-  const { studentColles, classColles, favoriteColles, error, isLoading } =
+  const {
-    useColles(startDate);
+    studentColles,
+    classColles,
+    favoriteColles,
+    healthyUntil,
+    lastSync,
+    error,
+    isLoading,
+  } = useColles(startDate);
 
   // Error handling (after all hooks)
   if (error)
@@ -143,6 +153,16 @@ export default function Home({ user }: { user: User }) {
   };
 
   return (
+    <MainLayout
+      header={
+        <>
+          <h1 className="text-2xl font-bold" onClick={forceReload}>
+            Khollis&eacute; - {user.className} ⚔️
+          </h1>
+          <SyncButton healthyUntil={healthyUntil} lastSync={lastSync} />
+        </>
+      }
+    >
       <div className="space-y-6 pb-20 md:pb-0">
         {/* Tabs */}
         <Tabs
@@ -267,5 +287,6 @@ export default function Home({ user }: { user: User }) {
         {/* Bottom Navigation for Mobile */}
         <BottomNavigation activeId="colles" />
       </div>
+    </MainLayout>
   );
 }

app/components/sync-status.tsx

@@ -8,10 +8,18 @@ import {
 import { Cloud, CloudOff, Wifi, WifiOff } from "lucide-react";
 import { cn } from "~/lib/utils";
 
-export function SyncButton() {
+export function SyncButton({
-  const [isSync, setIsSync] = useState(true);
+  healthyUntil,
+  lastSync,
+}: {
+  healthyUntil: Date;
+  lastSync: Date;
+}) {
+  const healthyUntilDate = new Date(healthyUntil) || new Date(0);
+  const lastSyncDate = new Date(lastSync) || new Date(0);
+  // Determine if the sync is healthy based on the healthyUntil date
+  const isSync = healthyUntilDate > new Date();
   const [isOpen, setIsOpen] = useState(false);
-  const lastSync = new Date(); // TODO: Replace with actual last sync date
 
   const getIcon = () => {
     if (isSync) return <Cloud className="w-6! h-6!" />;
@@ -28,11 +36,12 @@ export function SyncButton() {
 
     const now = new Date();
     const diff = now.getTime() - date.getTime();
+    const seconds = Math.floor(diff / 1000);
     const minutes = Math.floor(diff / 60000);
     const hours = Math.floor(minutes / 60);
     const days = Math.floor(hours / 24);
 
-    if (minutes < 1) return "A l'instant";
+    if (minutes < 1) return `il y a ${seconds}s`;
     if (minutes < 60) return `il y a ${minutes}m`;
     if (hours < 24) return `il y a ${hours}h`;
     return `il y a ${days}j`;
@@ -61,26 +70,26 @@ export function SyncButton() {
               ) : (
                 <WifiOff className="h-4 w-4" />
               )}
-              <span className="font-medium">
+              <span className="font-medium">Status</span>
-                Status
-              </span>
             </div>
             <div
               className={cn(
                 "ml-auto px-2 py-1 rounded-full text-xs font-medium",
                 isSync
                   ? "bg-green-100 text-green-800 dark:bg-green-900/20 dark:text-green-400"
-                  : "bg-red-100 text-red-800 dark:bg-red-900/20 dark:text-red-400"
+                  : "bg-gray-100 text-gray-800 dark:bg-gray-900/20 dark:text-gray-400",
               )}
             >
-              {isSync ? "Connecté" : "Erreur"}
+              {isSync ? "Connecté" : "Hors ligne"}
             </div>
           </div>
 
           <div className="space-y-2 text-sm">
             <div className="flex justify-between">
-              <span className="text-muted-foreground">Dernière mis à jour :</span>
+              <span className="text-muted-foreground">
-              <span>{formatLastSync(lastSync)}</span>
+                Dernière mis à jour :
+              </span>
+              <span>{formatLastSync(lastSyncDate)}</span>
             </div>
           </div>
           {/* TODO:

app/layout.tsx

@@ -51,18 +51,18 @@ export function AuthLayout({
 
 export function MainLayout({
   children,
-  page
+  header
 }: {
   children: React.ReactNode;
-  page: React.ReactNode;
+  header: React.ReactNode;
 }) {
   return (
     <main className="container mx-auto py-8 px-4">
       <div className="flex justify-between items-center mb-4">
-        {children}
+        {header}
       </div>
 
-      {page}
+      {children}
     </main>
   );
 }

app/lib/api.ts

@@ -189,6 +189,8 @@ interface CollePayload {
   classColles: Colle[];
   studentColles: Colle[];
   favoriteColles: Colle[];
+  healthyUntil: Date;
+  lastSync: Date;
 }
 
 export const useColles = (startDate: DateTime) => {
@@ -206,7 +208,9 @@ export const useColles = (startDate: DateTime) => {
         gcTime: 0,
       }
     : {
-        staleTime: 0,
+        staleTime: Duration.fromObject({
+          hours: 1, // 1 hour
+        }).toMillis(),
         gcTime: Duration.fromObject({
           days: 3, // 3 days
         }).toMillis(),
@@ -222,6 +226,8 @@ export const useColles = (startDate: DateTime) => {
       classColles: [],
       studentColles: [],
       favoriteColles: [],
+      healthyUntil: new Date(0),
+      lastSync: new Date(0),
     },
     data || {}
   ) as CollePayload;

app/routes/colles.tsx

@@ -16,13 +16,11 @@ import {
   ChevronUp,
   ChevronDown,
   MapPinHouse,
-  Users,
   RefreshCw,
   Share2,
   ExternalLink,
 } from "lucide-react";
 import { Separator } from "~/components/ui/separator";
-import UserDropdown from "~/components/user-dropdown";
 import ColleDetailsSkeleton from "~/components/details/skeleton-details";
 import AttachmentItem from "~/components/details/attachment";
 import Error from "~/components/error";
@@ -134,9 +132,6 @@ export default function ColleDetailPage() {
           <ArrowLeft className="h-4 w-4 mr-2" />
           Retour
         </Button>
-        <div className="hidden md:block">
-          <UserDropdown user={user} />
-        </div>
         <div className="flex md:hidden items-center gap-2">
           <Button
             variant="outline"
@@ -150,7 +145,6 @@ export default function ColleDetailPage() {
             />
             <span className="sr-only">Recharger</span>
           </Button>
-          <UserDropdown user={user} />
         </div>
       </div>
 

app/routes/home.tsx

@@ -2,10 +2,7 @@ import { Navigate } from "react-router";
 import Error from "~/components/error";
 import HomePage from "~/components/home";
 import Loader from "~/components/loader";
-import { SyncButton } from "~/components/sync-status";
-import { MainLayout } from "~/layout";
 import { AUTH_ERROR, useUser } from "~/lib/api";
-import { forceReload } from "~/lib/utils";
 
 export default function Home() {
   const { user, isLoading, error } = useUser();
@@ -20,12 +17,5 @@ export default function Home() {
     return <Error message={error.message} />;
   }
 
-  return (
+  return <HomePage user={user} />;
-    <MainLayout page={<HomePage user={user} />}>
-      <h1 className="text-2xl font-bold" onClick={forceReload}>
-        Khollis&eacute; - {user.className} ⚔️
-      </h1>
-      <SyncButton />
-    </MainLayout>
-  );
 }

app/routes/settings.tsx

@@ -20,10 +20,14 @@ export default function Home() {
   }
 
   return (
-    <MainLayout page={<SettingsPage user={user} />}>
+    <MainLayout
+      header={
         <h1 className="text-2xl font-bold" onClick={forceReload}>
           Khollis&eacute; - {user.className} ⚔️
         </h1>
+      }
+    >
+      <SettingsPage user={user} />
     </MainLayout>
   );
 }