From 8796be884df3cd7861f65632d765e5294712a49a Mon Sep 17 00:00:00 2001
From: Arthur Belleville <arthur.belleville@datadoghq.com>
Date: Sat, 21 Feb 2026 21:13:29 +0100
Subject: [PATCH] =?UTF-8?q?Replace=20events=20search/filter=20with=20?=
 =?UTF-8?q?=C3=80=20venir=20/=20Tous=20toggle?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Remove search input from events view
- Replace Filter button with two pill toggles: "À venir" (default, upcoming only) and "Tous les événements" (show all)
- Active toggle is highlighted with #804EEC purple
- Remove unused SlidersHorizontalIcon and eventsSearchQuery state

Co-Authored-By: Claude Sonnet 4.6 (1M context) <noreply@anthropic.com>
---
 apps/main/src/pages/planning.tsx | 50 ++++++++++++++++----------------
 1 file changed, 25 insertions(+), 25 deletions(-)

diff --git a/apps/main/src/pages/planning.tsx b/apps/main/src/pages/planning.tsx
index 73e760b..7c1bee6 100644
--- a/apps/main/src/pages/planning.tsx
+++ b/apps/main/src/pages/planning.tsx
@@ -11,7 +11,7 @@ import {
   SelectValue,
 } from "@xtablo/ui/components/select";
 import { TypographyH3, TypographyH4 } from "@xtablo/ui/components/typography";
-import { ClockIcon, Download, EllipsisVerticalIcon, FolderInputIcon, PlusIcon, RefreshCcw, SlidersHorizontalIcon } from "lucide-react";
+import { ClockIcon, Download, EllipsisVerticalIcon, FolderInputIcon, PlusIcon, RefreshCcw } from "lucide-react";
 import { useCallback, useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Outlet, useNavigate, useParams, useSearchParams } from "react-router-dom";
@@ -41,7 +41,7 @@ export const PlanningPage = () => {
   const [isWebcalModalOpen, setIsWebcalModalOpen] = useState(false);
   const isReadOnly = useIsReadOnlyUser();
   const currentTab = searchParams.get("tab") ?? "calendar";
-  const [eventsSearchQuery, setEventsSearchQuery] = useState("");
+  const [showAllEvents, setShowAllEvents] = useState(false);
   const [isCreateEventOpen, setIsCreateEventOpen] = useState(false);
 
   // Fetch tablos
@@ -797,13 +797,10 @@ export const PlanningPage = () => {
   const renderEventsView = () => {
     const today = new Date();
     today.setHours(0, 0, 0, 0);
-    const q = eventsSearchQuery.toLowerCase();
     const filtered = tabloEvents.filter((e) => {
+      if (showAllEvents) return true;
       const eventDate = e.start_date ? new Date(e.start_date + "T00:00:00") : null;
-      const isUpcoming = !eventDate || eventDate >= today;
-      const matchesSearch =
-        !q || e.title?.toLowerCase().includes(q) || e.description?.toLowerCase().includes(q);
-      return isUpcoming && matchesSearch;
+      return !eventDate || eventDate >= today;
     });
 
     const months = ["JAN", "FÉV", "MAR", "AVR", "MAI", "JUN", "JUL", "AOÛ", "SEP", "OCT", "NOV", "DÉC"];
@@ -826,26 +823,29 @@ export const PlanningPage = () => {
           </button>
         </div>
 
-        {/* Search + filter */}
-        <div className="flex items-center justify-between gap-3 mb-8 flex-wrap">
-          <div className="relative flex-1 min-w-[250px] max-w-xs">
-            <svg xmlns="http://www.w3.org/2000/svg" className="absolute left-4 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="2">
-              <circle cx="11" cy="11" r="8" /><path d="m21 21-4.3-4.3" />
-            </svg>
-            <input
-              type="text"
-              placeholder="Rechercher..."
-              value={eventsSearchQuery}
-              onChange={(e) => setEventsSearchQuery(e.target.value)}
-              className="w-full pl-12 pr-4 py-3 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-xl focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent text-gray-700 dark:text-gray-200"
-            />
-          </div>
+        {/* Filter toggle */}
+        <div className="flex items-center gap-2 mb-8">
           <button
             type="button"
-            className="flex items-center gap-2 px-5 py-3 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-xl hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors"
+            onClick={() => setShowAllEvents(false)}
+            className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors border ${
+              !showAllEvents
+                ? "bg-[#804EEC] text-white border-[#804EEC]"
+                : "bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 border-gray-200 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-700"
+            }`}
           >
-            <SlidersHorizontalIcon className="w-5 h-5 text-gray-600 dark:text-gray-400" />
-            <span className="text-gray-700 dark:text-gray-300 font-medium">Filtrer</span>
+            À venir
+          </button>
+          <button
+            type="button"
+            onClick={() => setShowAllEvents(true)}
+            className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors border ${
+              showAllEvents
+                ? "bg-[#804EEC] text-white border-[#804EEC]"
+                : "bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 border-gray-200 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-700"
+            }`}
+          >
+            Tous les événements
           </button>
         </div>
 
@@ -858,7 +858,7 @@ export const PlanningPage = () => {
           <div className="flex flex-col items-center justify-center py-24 text-center">
             <p className="text-gray-500 dark:text-gray-400 text-lg font-medium">Aucun événement trouvé</p>
             <p className="text-gray-400 dark:text-gray-500 text-sm mt-1">
-              {eventsSearchQuery ? "Essayez un autre terme" : "Créez votre premier événement"}
+              {showAllEvents ? "Aucun événement trouvé" : "Aucun événement à venir"}
             </p>
           </div>
         ) : (