From 26cc3bf4bb49bfa3f5abbedbd100d6332c700f76 Mon Sep 17 00:00:00 2001
From: Nathan Lamy <nathan.lamycharrier@gmail.com>
Date: Tue, 19 Aug 2025 12:46:23 +0200
Subject: [PATCH] ui: add tabs navigation

---
 app/components/home/bottom-nav.tsx  |  2 +-
 app/components/home/date-picker.tsx |  2 +-
 app/components/home/index.tsx       | 79 +++++++++++++----------------
 3 files changed, 37 insertions(+), 46 deletions(-)

diff --git a/app/components/home/bottom-nav.tsx b/app/components/home/bottom-nav.tsx
index 50f1262..8ea46dc 100644
--- a/app/components/home/bottom-nav.tsx
+++ b/app/components/home/bottom-nav.tsx
@@ -18,7 +18,7 @@ const navigationMenuItems = [
 
 export default function BottomNavigation({ activeId }: { activeId: string }) {
   return (
-    <div className="fixed bottom-0 left-0 right-0 bg-background border-t border-border md:hidden z-50">
+    <div className="fixed bottom-0 left-0 right-0 bg-background border-t border-border z-50">
       <div className="flex items-center justify-center">
         <NavigationMenu>
           <NavigationMenuList>
diff --git a/app/components/home/date-picker.tsx b/app/components/home/date-picker.tsx
index f44eb0b..96f40b0 100644
--- a/app/components/home/date-picker.tsx
+++ b/app/components/home/date-picker.tsx
@@ -33,7 +33,7 @@ export default function DatePickerWithRange({
           <button
             id="date"
             className={
-              "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive h-9 px-4 py-2 has-[>svg]:px-3 border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 " +
+              "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive h-9 px-4 py-2 has-[>svg]:px-3 border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:border-input dark:hover:bg-input/50 " +
               cn(
                 "w-full justify-start text-left font-normal",
                 !startDate && "text-muted-foreground"
diff --git a/app/components/home/index.tsx b/app/components/home/index.tsx
index b38627d..389d128 100644
--- a/app/components/home/index.tsx
+++ b/app/components/home/index.tsx
@@ -32,6 +32,9 @@ import { useSearchParams } from "react-router";
 import { useColles } from "~/lib/api";
 import TabContent from "~/components/home/tab-content";
 
+const tabsStyle =
+  "rounded-none bg-background data-[state=active]:bg-background! h-full data-[state=active]:shadow-none border-b-2 border-transparent border-t-0 border-r-0 border-l-0 data-[state=active]:border-primary!";
+
 export default function Home() {
   // Handle query parameters
   const [query, setQuery] = useSearchParams();
@@ -119,64 +122,52 @@ export default function Home() {
 
   return (
     <div className="space-y-6 pb-20 md:pb-0">
+      {/* Tabs */}
+      <Tabs
+        defaultValue="all"
+        value={activeTab}
+        onValueChange={setActiveTab}
+        className="max-w-md w-full"
+      >
+        <TabsList className="w-full p-0 bg-background justify-start border-b rounded-none">
+          <TabsTrigger value="you" className={tabsStyle}>
+            <User className="h-4 w-4" />
+            Vous
+          </TabsTrigger>
+          <TabsTrigger value="favorites" className={tabsStyle}>
+            <Star className="h-4 w-4" />
+            Favoris
+          </TabsTrigger>
+          <TabsTrigger value="class" className={tabsStyle}>
+            <Users className="h-4 w-4" />
+            Classe
+          </TabsTrigger>
+        </TabsList>
+      </Tabs>
+
       {/* Week Navigation */}
-      <div className="mb-4">
-        <div className="flex flex-row items-center justify-between gap-4">
+      <div className="mb-0">
+        <div className="flex flex-row items-center justify-between gap-2">
+          <Button variant="outline" size="sm" onClick={handlePreviousWeek}>
+            <ChevronLeft className="h-10 w-10" />
+          </Button>
           <div className="flex-1">
             <DatePickerWithRange
               startDate={startDate}
               setStartDate={setStartDate}
             />
           </div>
-          <div className="flex items-center space-x-2">
-            <Button variant="outline" size="sm" onClick={handlePreviousWeek}>
-              <ChevronLeft className="h-4 w-4" />
-            </Button>
-            <Button variant="outline" size="sm" onClick={handleNextWeek}>
-              <ChevronRight className="h-4 w-4" />
-            </Button>
-          </div>
+          <Button variant="outline" size="sm" onClick={handleNextWeek}>
+            <ChevronRight className="h-10 w-10" />
+          </Button>
         </div>
       </div>
 
-      <Tabs
-        defaultValue="all"
-        value={activeTab}
-        onValueChange={setActiveTab}
-        className="hidden md:block"
-      >
-        <div className="mb-4">
-          <TabsList className="w-full">
-            <TabsTrigger
-              value="you"
-              className="flex-1 flex items-center justify-center gap-1"
-            >
-              <User className="h-4 w-4" />
-              Vos colles ({studentColles.length})
-            </TabsTrigger>
-            <TabsTrigger
-              value="favorites"
-              className="flex-1 flex items-center justify-center gap-1"
-            >
-              <Star className="h-4 w-4" />
-              Vos favoris ({0 /* TODO: stars.length */})
-            </TabsTrigger>
-            <TabsTrigger
-              value="class"
-              className="flex-1 flex items-center justify-center gap-1"
-            >
-              <Users className="h-4 w-4" />
-              Votre classe ({classColles.length})
-            </TabsTrigger>
-          </TabsList>
-        </div>
-      </Tabs>
-
       {/* TODO: Filter component */}
       <Collapsible open={isFilterOpen} onOpenChange={setIsFilterOpen}>
         <div className="flex justify-between">
           <div className="flex gap-2">
-            {activeTab === "all" && (
+            {activeTab === "class" && (
               <>
                 <Button
                   variant="outline"