arthur/xtablo-source
1
0
Fork 0
Code Issues Pull requests 1 Projects Releases Packages Wiki Activity Actions 5

Replace events search/filter with À venir / Tous toggle

Browse source 
- 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>
This commit is contained in:
Arthur Belleville 2026-02-21 21:13:29 +01:00
parent c8699964fb
commit 8796be884d
No known key found for this signature in database
1 changed files with 25 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

50
apps/main/src/pages/planning.tsx
View file

@ -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>
) : (