Filtres avancés — refonte du menu web + facettes par ville · 2f08659 · lou-ka

Filtres avancés — refonte du menu web + facettes par ville

- /api/facets accepte ?city= : quartiers restreints à la ville (sélecteur dépendant)
- Menu de filtres refait : rangée principale compacte (recherche, ville,
  quartier, loyer min–max, « Plus de filtres ») + panneau avancé repliable
  en segments (disponibilité, meublé, animaux, superficie, gestionnaire)
- Correction du débordement horizontal (colonnes 1fr → contrôles bornés)
- Chips rapides (dispo maintenant, animaux, meublé) + pastilles de filtres
  actifs retirables ; api.ts : price_min, pets, furnished, available_by, area_min
- ios/ ignoré : l'app iOS native vit dans son propre dépôt (lou-ka-ios)

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

Simon-Pierre Boucher committed 3 mo ago (Aug 11, 2026) parent 802fb2f Browse files

5 changed files +388 −71

modified .gitignore +3 −0

				`@@ -9,3 +9,6 @@ frontend/dist/`
9	reponse.txt	9	reponse.txt
10	data/staging-*.db	10	data/staging-*.db
11	data/quartier.db	11	data/quartier.db
		12	+
		13	+# app iOS native — dépôt séparé (git.spboucher.ai/lou-ka-ios)
		14	+ios/

modified frontend/src/api.ts +14 −1

				`@@ -162,7 +162,12 @@ export interface ListingFilters {`
162	sector?: string;	162	sector?: string;
163	unit_type?: string;	163	unit_type?: string;
164	source?: string;	164	source?: string;
		165	+ price_min?: string;
165	price_max?: string;	166	price_max?: string;
		167	+ pets?: string; // "oui" -> acceptés (oui OU conditions)
		168	+ furnished?: string; // "1" \| "0"
		169	+ available_by?: string; // ISO : dispo maintenant ou avant cette date
		170	+ area_min?: string; // superficie minimale (pi²)
166	q?: string;	171	q?: string;
167	}	172	}
168		173
				`@@ -226,7 +231,15 @@ export const fetchDetailedStats = () => get<DetailedStats>("/api/stats/detailed"`
226		231
227	export const fetchListing = (uid: string) =>	232	export const fetchListing = (uid: string) =>
228	get<Listing>(`/api/listings/${encodeURIComponent(uid)}`);	233	get<Listing>(`/api/listings/${encodeURIComponent(uid)}`);
229	−export const fetchFacets = () => get<Facets>("/api/facets");	234	+export const fetchFacets = (city?: string) =>
		235	+ get<Facets>(`/api/facets${city ? `?city=${encodeURIComponent(city)}` : ""}`);
		236	+
		237	+/** Date ISO à +n jours (pour « dispo d'ici 1 mois », etc.) */
		238	+export function isoInDays(n: number): string {
		239	+ const d = new Date();
		240	+ d.setDate(d.getDate() + n);
		241	+ return d.toISOString().slice(0, 10);
		242	+}
230	export const fetchSources = () => get<{ sources: Source[] }>("/api/sources");	243	export const fetchSources = () => get<{ sources: Source[] }>("/api/sources");
231	export const fetchStats = () => get<Stats>("/api/stats");	244	export const fetchStats = () => get<Stats>("/api/stats");
232		245

modified frontend/src/pages/Home.tsx +247 −61

				`@@ -1,13 +1,15 @@`
1	// -----------------------------------------------------------------------------	1	// -----------------------------------------------------------------------------
2	// Lou-Ka — Agrégateur de logements à louer (province de Québec)	2	// Lou-Ka — Agrégateur de logements à louer (province de Québec)
3	// Auteur : Simon-Pierre Boucher — contact@spboucher.ai	3	// Auteur : Simon-Pierre Boucher — contact@spboucher.ai
4	−// pages/Home.tsx : accueil — héro, statistiques, filtres, grille d'annonces	4	+// pages/Home.tsx : accueil — héro, statistiques, filtres avancés, grille
		5	+// Filtres : ville, quartier, taille, loyer min/max, dispo, animaux, meublé,
		6	+// superficie, gestionnaire, recherche — avec pastilles de filtres actifs.
5	// -----------------------------------------------------------------------------	7	// -----------------------------------------------------------------------------
6	import { Suspense, lazy, useEffect, useMemo, useState } from "react";	8	import { Suspense, lazy, useEffect, useMemo, useState } from "react";
7	import { useSearchParams } from "react-router-dom";	9	import { useSearchParams } from "react-router-dom";
8	import {	10	import {
9	Facets, Listing, ListingFilters, Stats,	11	Facets, Listing, ListingFilters, Stats,
10	− fetchFacets, fetchListings, fetchSources, fetchStats,	12	+ fetchFacets, fetchListings, fetchSources, fetchStats, isoInDays,
11	registerSourceNames, sourceName,	13	registerSourceNames, sourceName,
12	} from "../api";	14	} from "../api";
13	import ListingCard from "../components/ListingCard";	15	import ListingCard from "../components/ListingCard";
				`@@ -16,11 +18,23 @@ import ListingCard from "../components/ListingCard";`
16	const MapView = lazy(() => import("../components/MapView"));	18	const MapView = lazy(() => import("../components/MapView"));
17		19
18	const UNIT_TYPES = ["1½", "2½", "3½", "4½", "5½", "Loft", "Studio"];	20	const UNIT_TYPES = ["1½", "2½", "3½", "4½", "5½", "Loft", "Studio"];
		21	+const PRICE_STEPS = [600, 800, 1000, 1200, 1400, 1600, 1800, 2000, 2500, 3000];
		22	+const AREA_STEPS = [400, 600, 800, 1000, 1200];
		23	+
		24	+/** Choix « Disponibilité » → paramètre API available_by (date ISO) */
		25	+const DISPO_CHOICES: { key: string; label: string; days: number \| null }[] = [
		26	+ { key: "", label: "Peu importe", days: null },
		27	+ { key: "now", label: "Maintenant", days: 0 },
		28	+ { key: "30", label: "D'ici 1 mois", days: 30 },
		29	+ { key: "60", label: "D'ici 2 mois", days: 60 },
		30	+ { key: "90", label: "D'ici 3 mois", days: 90 },
		31	+];
19		32
20	export default function Home() {	33	export default function Home() {
21	const [listings, setListings] = useState<Listing[] \| null>(null);	34	const [listings, setListings] = useState<Listing[] \| null>(null);
22	const [total, setTotal] = useState(0);	35	const [total, setTotal] = useState(0);
23	const [facets, setFacets] = useState<Facets \| null>(null);	36	const [facets, setFacets] = useState<Facets \| null>(null);
		37	+ const [sectors, setSectors] = useState<string[]>([]);
24	const [stats, setStats] = useState<Stats \| null>(null);	38	const [stats, setStats] = useState<Stats \| null>(null);
25	const [error, setError] = useState<string \| null>(null);	39	const [error, setError] = useState<string \| null>(null);
26		40
				`@@ -28,12 +42,21 @@ export default function Home() {`
28	const [params] = useSearchParams();	42	const [params] = useSearchParams();
29	const [q, setQ] = useState(params.get("q") ?? "");	43	const [q, setQ] = useState(params.get("q") ?? "");
30	const [city, setCity] = useState(params.get("city") ?? "");	44	const [city, setCity] = useState(params.get("city") ?? "");
		45	+ const [sector, setSector] = useState(params.get("sector") ?? "");
31	const [source, setSource] = useState(params.get("source") ?? "");	46	const [source, setSource] = useState(params.get("source") ?? "");
		47	+ const [priceMin, setPriceMin] = useState(params.get("price_min") ?? "");
32	const [priceMax, setPriceMax] = useState(params.get("price_max") ?? "");	48	const [priceMax, setPriceMax] = useState(params.get("price_max") ?? "");
33	const [unitType, setUnitType] = useState(params.get("unit_type") ?? "");	49	const [unitType, setUnitType] = useState(params.get("unit_type") ?? "");
34	− // feuille de filtres mobile (bottom sheet)	50	+ const [dispo, setDispo] = useState(params.get("dispo") ?? "");
		51	+ const [pets, setPets] = useState(params.get("pets") ?? "");
		52	+ const [furnished, setFurnished] = useState(params.get("furnished") ?? "");
		53	+ const [areaMin, setAreaMin] = useState(params.get("area_min") ?? "");
		54	+ // feuille de filtres mobile (bottom sheet) + panneau avancé desktop
35	const [sheetOpen, setSheetOpen] = useState(false);	55	const [sheetOpen, setSheetOpen] = useState(false);
36	− const activeFilters = [q, city, source, priceMax, unitType].filter(Boolean).length;	56	+ const [advOpen, setAdvOpen] = useState(false);
		57	+ const activeFilters = [q, city, sector, source, priceMin, priceMax, unitType,
		58	+ dispo, pets, furnished, areaMin].filter(Boolean).length;
		59	+ const advCount = [dispo, pets, furnished, areaMin, source].filter(Boolean).length;
37	// vue liste ou carte (mémorisée dans l'URL : /?view=carte)	60	// vue liste ou carte (mémorisée dans l'URL : /?view=carte)
38	const [view, setView] = useState<"liste" \| "carte">(	61	const [view, setView] = useState<"liste" \| "carte">(
39	params.get("view") === "carte" ? "carte" : "liste");	62	params.get("view") === "carte" ? "carte" : "liste");
				`@@ -41,9 +64,16 @@ export default function Home() {`
41	// suivre l'URL quand on navigue via le menu (« Carte » -> /?view=carte)	64	// suivre l'URL quand on navigue via le menu (« Carte » -> /?view=carte)
42	setView(params.get("view") === "carte" ? "carte" : "liste");	65	setView(params.get("view") === "carte" ? "carte" : "liste");
43	}, [params]);	66	}, [params]);
44	− const filters: ListingFilters = useMemo(	67	+
45	− () => ({ q, city, source, price_max: priceMax, unit_type: unitType }),	68	+ const filters: ListingFilters = useMemo(() => {
46	− [q, city, source, priceMax, unitType]);	69	+ const d = DISPO_CHOICES.find((c) => c.key === dispo);
		70	+ return {
		71	+ q, city, sector, source, unit_type: unitType,
		72	+ price_min: priceMin, price_max: priceMax,
		73	+ pets, furnished, area_min: areaMin,
		74	+ available_by: d?.days != null ? isoInDays(d.days) : "",
		75	+ };
		76	+ }, [q, city, sector, source, unitType, priceMin, priceMax, pets, furnished, areaMin, dispo]);
47		77
48	useEffect(() => {	78	useEffect(() => {
49	fetchSources().then((r) => registerSourceNames(r.sources)).catch(() => {});	79	fetchSources().then((r) => registerSourceNames(r.sources)).catch(() => {});
				`@@ -51,11 +81,18 @@ export default function Home() {`
51	fetchStats().then(setStats).catch(() => {});	81	fetchStats().then(setStats).catch(() => {});
52	}, []);	82	}, []);
53		83
		84	+ // quartiers dépendants de la ville choisie
		85	+ useEffect(() => {
		86	+ fetchFacets(city \|\| undefined)
		87	+ .then((f) => setSectors(f.sectors))
		88	+ .catch(() => setSectors([]));
		89	+ }, [city]);
		90	+
54	useEffect(() => {	91	useEffect(() => {
55	let cancelled = false;	92	let cancelled = false;
56	setListings(null);	93	setListings(null);
57	setError(null);	94	setError(null);
58	− fetchListings({ q, city, source, price_max: priceMax, unit_type: unitType })	95	+ fetchListings(filters)
59	.then((r) => {	96	.then((r) => {
60	if (!cancelled) {	97	if (!cancelled) {
61	setListings(r.listings);	98	setListings(r.listings);
				`@@ -66,13 +103,39 @@ export default function Home() {`
66	return () => {	103	return () => {
67	cancelled = true;	104	cancelled = true;
68	};	105	};
69	− }, [q, city, source, priceMax, unitType]);	106	+ }, [filters]);
70		107
71	const availableTypes = useMemo(() => {	108	const availableTypes = useMemo(() => {
72	const set = new Set(facets?.unit_types ?? []);	109	const set = new Set(facets?.unit_types ?? []);
73	return UNIT_TYPES.filter((t) => set.size === 0 \|\| set.has(t));	110	return UNIT_TYPES.filter((t) => set.size === 0 \|\| set.has(t));
74	}, [facets]);	111	}, [facets]);
75		112
		113	+ const resetAll = () => {
		114	+ setQ(""); setCity(""); setSector(""); setSource("");
		115	+ setPriceMin(""); setPriceMax(""); setUnitType("");
		116	+ setDispo(""); setPets(""); setFurnished(""); setAreaMin("");
		117	+ };
		118	+
		119	+ // pastilles « filtres actifs » — libellé + action de retrait
		120	+ const pills: { label: string; clear: () => void }[] = [];
		121	+ if (q) pills.push({ label: `« ${q} »`, clear: () => setQ("") });
		122	+ if (city) pills.push({ label: city, clear: () => { setCity(""); setSector(""); } });
		123	+ if (sector) pills.push({ label: sector, clear: () => setSector("") });
		124	+ if (unitType) pills.push({ label: unitType, clear: () => setUnitType("") });
		125	+ if (priceMin) pills.push({ label: `≥ ${priceMin} $`, clear: () => setPriceMin("") });
		126	+ if (priceMax) pills.push({ label: `≤ ${priceMax} $`, clear: () => setPriceMax("") });
		127	+ if (dispo) pills.push({
		128	+ label: `Dispo : ${DISPO_CHOICES.find((c) => c.key === dispo)?.label ?? dispo}`,
		129	+ clear: () => setDispo(""),
		130	+ });
		131	+ if (pets) pills.push({ label: "Animaux acceptés", clear: () => setPets("") });
		132	+ if (furnished) pills.push({
		133	+ label: furnished === "1" ? "Meublé" : "Non meublé",
		134	+ clear: () => setFurnished(""),
		135	+ });
		136	+ if (areaMin) pills.push({ label: `≥ ${areaMin} pi²`, clear: () => setAreaMin("") });
		137	+ if (source) pills.push({ label: sourceName(source), clear: () => setSource("") });
		138	+
76	return (	139	return (
77	<div className="container">	140	<div className="container">
78	<section className="hero">	141	<section className="hero">
				`@@ -119,63 +182,148 @@ export default function Home() {`
119	✕	182	✕
120	</button>	183	</button>
121	</div>	184	</div>
122	− <div className="field">	185	+
123	− <label htmlFor="f-q">Recherche</label>	186	+ {/* — rangée principale : recherche, ville, quartier, loyer, + filtres — */}
124	− <input	187	+ <div className="f-primary">
125	− id="f-q" placeholder="Adresse, quartier, rue…" value={q}	188	+ <div className="f-search">
126	− onChange={(e) => setQ(e.target.value)}	189	+ <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" aria-hidden="true">
127	− />	190	+ <circle cx="11" cy="11" r="7" /><path d="m20 20-3.5-3.5" />
128	− </div>	191	+ </svg>
129	− <div className="field">	192	+ <input
130	− <label htmlFor="f-city">Ville</label>	193	+ id="f-q" placeholder="Adresse, quartier, rue…" value={q}
131	− <select id="f-city" value={city} onChange={(e) => setCity(e.target.value)}>	194	+ onChange={(e) => setQ(e.target.value)}
132	− <option value="">Toutes</option>	195	+ aria-label="Recherche"
133	− {(facets?.cities ?? ["Québec", "Lévis"]).map((c) => (	196	+ />
134	− <option key={c} value={c}>{c}</option>	197	+ {q && (
135	− ))}	198	+ <button className="f-clear" onClick={() => setQ("")} aria-label="Effacer la recherche">✕</button>
136	− </select>	199	+ )}
137	− </div>	200	+ </div>
138	− <div className="field">	201	+ <label className="f-ctl">
139	− <label htmlFor="f-price">Loyer max</label>	202	+ <span>Ville</span>
140	− <select id="f-price" value={priceMax} onChange={(e) => setPriceMax(e.target.value)}>	203	+ <select value={city} onChange={(e) => { setCity(e.target.value); setSector(""); }}>
141	− <option value="">Aucun</option>	204	+ <option value="">Toutes</option>
142	− {[800, 1000, 1200, 1400, 1600, 1800, 2000, 2500].map((p) => (	205	+ {(facets?.cities ?? ["Québec", "Lévis"]).map((c) => (
143	− <option key={p} value={p}>{p} $</option>	206	+ <option key={c} value={c}>{c}</option>
144	− ))}	207	+ ))}
145	− </select>	208	+ </select>
146	− </div>	209	+ </label>
147	− <div className="field">	210	+ <label className="f-ctl">
148	− <label htmlFor="f-source">Gestionnaire</label>	211	+ <span>Quartier</span>
149	− <select id="f-source" value={source} onChange={(e) => setSource(e.target.value)}>	212	+ <select value={sector} onChange={(e) => setSector(e.target.value)}>
150	− <option value="">Tous</option>	213	+ <option value="">Tous</option>
151	− {(facets?.sources ?? []).map((s) => (	214	+ {sectors.map((s) => (
152	− <option key={s.source} value={s.source}>	215	+ <option key={s} value={s}>{s}</option>
153	− {sourceName(s.source)} ({s.n})	216	+ ))}
154	− </option>	217	+ </select>
155	− ))}	218	+ </label>
156	− </select>	219	+ <div className="f-ctl">
157	− </div>	220	+ <span>Loyer</span>
158	− <div className="field">	221	+ <div className="range-pair">
159	− <label htmlFor="f-type">Taille</label>	222	+ <select aria-label="Loyer minimum" value={priceMin}
160	− <select id="f-type" value={unitType} onChange={(e) => setUnitType(e.target.value)}>	223	+ onChange={(e) => setPriceMin(e.target.value)}>
161	− <option value="">Toutes</option>	224	+ <option value="">Min</option>
162	− {availableTypes.map((t) => (	225	+ {PRICE_STEPS.map((p) => (
163	− <option key={t} value={t}>{t}</option>	226	+ <option key={p} value={p} disabled={!!priceMax && p >= Number(priceMax)}>
164	− ))}	227	+ {p} $
165	− </select>	228	+ </option>
		229	+ ))}
		230	+ </select>
		231	+ <span className="range-sep">—</span>
		232	+ <select aria-label="Loyer maximum" value={priceMax}
		233	+ onChange={(e) => setPriceMax(e.target.value)}>
		234	+ <option value="">Max</option>
		235	+ {PRICE_STEPS.map((p) => (
		236	+ <option key={p} value={p} disabled={!!priceMin && p <= Number(priceMin)}>
		237	+ {p} $
		238	+ </option>
		239	+ ))}
		240	+ </select>
		241	+ </div>
		242	+ </div>
		243	+ <button
		244	+ className={`f-more ${advOpen \|\| advCount > 0 ? "on" : ""}`}
		245	+ onClick={() => setAdvOpen(!advOpen)}
		246	+ aria-expanded={advOpen}
		247	+ >
		248	+ Plus de filtres{advCount > 0 ? ` · ${advCount}` : ""} {advOpen ? "▴" : "▾"}
		249	+ </button>
166	</div>	250	</div>
167	− <button	251	+
168	− className="btn btn-ghost" style={{ alignSelf: "end" }}	252	+ {/* — panneau avancé : segments & sélecteurs — */}
169	− onClick={() => { setQ(""); setCity(""); setSource(""); setPriceMax(""); setUnitType(""); }}	253	+ {(advOpen \|\| sheetOpen) && (
170	− >	254	+ <div className="f-adv">
171	− Réinitialiser	255	+ <div className="f-group">
172	− </button>	256	+ <label>Disponibilité</label>
		257	+ <div className="seg" role="group">
		258	+ {DISPO_CHOICES.map((c) => (
		259	+ <button key={c.key} className={dispo === c.key ? "on" : ""}
		260	+ onClick={() => setDispo(c.key)}>
		261	+ {c.label}
		262	+ </button>
		263	+ ))}
		264	+ </div>
		265	+ </div>
		266	+ <div className="f-group">
		267	+ <label>Meublé</label>
		268	+ <div className="seg" role="group">
		269	+ {[["", "Peu importe"], ["1", "Oui"], ["0", "Non"]].map(([v, l]) => (
		270	+ <button key={v} className={furnished === v ? "on" : ""}
		271	+ onClick={() => setFurnished(v)}>
		272	+ {l}
		273	+ </button>
		274	+ ))}
		275	+ </div>
		276	+ </div>
		277	+ <div className="f-group">
		278	+ <label>Animaux</label>
		279	+ <div className="seg" role="group">
		280	+ {[["", "Peu importe"], ["oui", "🐾 Acceptés"]].map(([v, l]) => (
		281	+ <button key={v} className={pets === v ? "on" : ""}
		282	+ onClick={() => setPets(v)}>
		283	+ {l}
		284	+ </button>
		285	+ ))}
		286	+ </div>
		287	+ </div>
		288	+ <div className="f-group">
		289	+ <label>Superficie minimale</label>
		290	+ <div className="seg" role="group">
		291	+ <button className={areaMin === "" ? "on" : ""} onClick={() => setAreaMin("")}>
		292	+ Peu importe
		293	+ </button>
		294	+ {AREA_STEPS.map((a) => (
		295	+ <button key={a} className={areaMin === String(a) ? "on" : ""}
		296	+ onClick={() => setAreaMin(String(a))}>
		297	+ {a}+
		298	+ </button>
		299	+ ))}
		300	+ </div>
		301	+ </div>
		302	+ <div className="f-group">
		303	+ <label>Gestionnaire</label>
		304	+ <select className="f-native" value={source} onChange={(e) => setSource(e.target.value)}>
		305	+ <option value="">Tous</option>
		306	+ {(facets?.sources ?? []).map((s) => (
		307	+ <option key={s.source} value={s.source}>
		308	+ {sourceName(s.source)} ({s.n})
		309	+ </option>
		310	+ ))}
		311	+ </select>
		312	+ </div>
		313	+ <div className="f-group f-group-end">
		314	+ <button className="btn btn-ghost" onClick={resetAll} disabled={activeFilters === 0}>
		315	+ Tout réinitialiser{activeFilters > 0 ? ` (${activeFilters})` : ""}
		316	+ </button>
		317	+ </div>
		318	+ </div>
		319	+ )}
		320	+
173	<button className="btn btn-primary sheet-apply" onClick={() => setSheetOpen(false)}>	321	<button className="btn btn-primary sheet-apply" onClick={() => setSheetOpen(false)}>
174	Voir les résultats {listings ? `(${total})` : ""}	322	Voir les résultats {listings ? `(${total})` : ""}
175	</button>	323	</button>
176	</section>	324	</section>
177		325
178	− <div className="chips" role="group" aria-label="Filtrer par taille">	326	+ <div className="chips" role="group" aria-label="Filtres rapides">
179	{availableTypes.map((t) => (	327	{availableTypes.map((t) => (
180	<button	328	<button
181	key={t}	329	key={t}
				`@@ -185,8 +333,41 @@ export default function Home() {`
185	{t}	333	{t}
186	</button>	334	</button>
187	))}	335	))}
		336	+ <span className="chip-sep" aria-hidden="true" />
		337	+ <button
		338	+ className={`chip ${dispo === "now" ? "on" : ""}`}
		339	+ onClick={() => setDispo(dispo === "now" ? "" : "now")}
		340	+ >
		341	+ ⚡ Dispo maintenant
		342	+ </button>
		343	+ <button
		344	+ className={`chip ${pets === "oui" ? "on" : ""}`}
		345	+ onClick={() => setPets(pets === "oui" ? "" : "oui")}
		346	+ >
		347	+ 🐾 Animaux ok
		348	+ </button>
		349	+ <button
		350	+ className={`chip ${furnished === "1" ? "on" : ""}`}
		351	+ onClick={() => setFurnished(furnished === "1" ? "" : "1")}
		352	+ >
		353	+ 🛋 Meublé
		354	+ </button>
188	</div>	355	</div>
189		356
		357	+ {pills.length > 0 && (
		358	+ <div className="pills" aria-label="Filtres actifs">
		359	+ {pills.map((p) => (
		360	+ <button key={p.label} className="pill" onClick={p.clear}
		361	+ aria-label={`Retirer le filtre ${p.label}`}>
		362	+ {p.label} <span className="pill-x">✕</span>
		363	+ </button>
		364	+ ))}
		365	+ <button className="pill pill-clear" onClick={resetAll}>
		366	+ Tout effacer
		367	+ </button>
		368	+ </div>
		369	+ )}
		370	+
190	<div className="results-head">	371	<div className="results-head">
191	<h2>Logements disponibles</h2>	372	<h2>Logements disponibles</h2>
192	<div className="results-tools">	373	<div className="results-tools">
				`@@ -237,7 +418,12 @@ export default function Home() {`
237	<div className="notice">	418	<div className="notice">
238	<div className="big">🔍</div>	419	<div className="big">🔍</div>
239	<h2>Aucun logement ne correspond</h2>	420	<h2>Aucun logement ne correspond</h2>
240	− <p>Essayez d'élargir vos critères, ou lancez une synchronisation (<code>python run.py sync</code>).</p>	421	+ <p>
		422	+ Essayez d'élargir vos critères
		423	+ {activeFilters > 0 && (
		424	+ <> — ou <button className="link-btn" onClick={resetAll}>retirez les {activeFilters} filtres actifs</button></>
		425	+ )}.
		426	+ </p>
241	</div>	427	</div>
242	)}	428	)}
243		429

modified frontend/src/styles.css +112 −6

+ /* ================= Filter bar ================= */
+ .filterbar {
++  background: var(--surface); border: 2px solid var(--ink); border-radius: var(--r-card);
++  box-shadow: var(--shadow-off-soft); padding: 14px; margin: 30px 0 6px;
++  display: flex; flex-direction: column; gap: 0; min-width: 0;
++}
++
++/* — rangée principale — */
++.f-primary { display: flex; gap: 10px; align-items: stretch; flex-wrap: wrap; min-width: 0; }
++.f-search {
++  flex: 1 1 240px; min-width: 0; display: flex; align-items: center; gap: 9px;
++  border: 1.5px solid var(--ink); border-radius: 9px; background: var(--surface-2);
++  padding: 0 13px; min-height: 52px; color: var(--ink-2);
++  transition: box-shadow 0.15s ease;
++}
++.f-search:focus-within { box-shadow: 3px 3px 0 var(--lime); background: var(--surface); }
++.f-search input {
++  border: none; background: none; outline: none; flex: 1; min-width: 0;
++  font-size: 15px; color: var(--ink); font-family: inherit;
++}
++.f-clear {
++  border: none; background: var(--line); color: var(--ink-2); border-radius: 50%;
++  width: 20px; height: 20px; font-size: 10px; cursor: pointer; flex: none;
++  display: grid; place-items: center;
++}
++.f-ctl {
++  flex: 0 1 auto; min-width: 0; display: flex; flex-direction: column; justify-content: center;
++  gap: 2px; border: 1.5px solid var(--ink); border-radius: 9px; background: var(--surface);
++  padding: 7px 12px 6px; min-height: 52px; cursor: pointer;
++  transition: box-shadow 0.15s ease;
++}
++.f-ctl:focus-within { box-shadow: 3px 3px 0 var(--lime); }
++.f-ctl > span {
++  font-family: var(--font-mono); font-size: 9px; font-weight: 700;
++  text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-3);
++}
++.f-ctl select {
++  border: none; background: transparent; outline: none; font-family: var(--font-display);
++  font-weight: 700; font-size: 14.5px; color: var(--ink); cursor: pointer;
++  appearance: none; -webkit-appearance: none; padding-right: 16px; min-width: 0; max-width: 170px;
++  text-overflow: ellipsis;
++  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='5'%3E%3Cpath d='M0 0l4.5 5L9 0z' fill='%23141814'/%3E%3C/svg%3E");
++  background-repeat: no-repeat; background-position: right center;
++}
++.range-pair { display: flex; align-items: center; gap: 4px; }
++.range-pair select { max-width: 86px; }
++.range-sep { color: var(--ink-3); font-family: var(--font-mono); font-size: 11px; }
++.f-more {
++  flex: none; align-self: stretch; border: 1.5px solid var(--ink); border-radius: 9px;
++  background: var(--surface); color: var(--ink); padding: 0 18px; cursor: pointer;
++  font-family: var(--font-display); font-weight: 700; font-size: 14px; min-height: 52px;
++  transition: all 0.13s ease;
++}
++.f-more:hover { background: var(--lime-soft); }
++.f-more.on { background: var(--ink); color: var(--lime); box-shadow: 3px 3px 0 rgba(20,24,20,0.22); }
++
++/* — panneau avancé — */
++.f-adv {
++  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px 22px;
++  border-top: 1.5px dashed var(--line); margin-top: 14px; padding-top: 14px; min-width: 0;
++  animation: adv-in 0.18s ease;
++}
++@keyframes adv-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
++.f-group { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
++.f-group > label {
++  font-family: var(--font-mono); font-size: 10px; font-weight: 700;
++  text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-3);
++}
++.f-group-end { justify-content: flex-end; }
++.f-group .btn:disabled { opacity: 0.4; cursor: default; }
++.f-native {
++  border: 1.5px solid var(--line); background: var(--surface-2); border-radius: var(--r-ctl);
++  padding: 10px 30px 10px 12px; font-size: 14px; color: var(--ink); outline: none;
++  font-family: inherit; min-height: 42px; width: 100%; min-width: 0;
++  appearance: none; -webkit-appearance: none;
++  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23141814'/%3E%3C/svg%3E");
++  background-repeat: no-repeat; background-position: right 12px center;
++}
++.f-native:focus { border-color: var(--ink); box-shadow: 3px 3px 0 var(--lime); }
++
++/* segments (pilules soudées) */
++.seg { display: inline-flex; flex-wrap: wrap; row-gap: 6px; }
++.seg button {
++  border: 1.5px solid var(--ink); background: var(--surface); color: var(--ink-2);
++  padding: 8px 13px; font-family: var(--font-display); font-weight: 600; font-size: 13px;
++  cursor: pointer; margin-left: -1.5px; white-space: nowrap; min-height: 38px;
++  transition: all 0.12s ease;
++}
++.seg button:first-child { border-radius: 8px 0 0 8px; margin-left: 0; }
++.seg button:last-child { border-radius: 0 8px 8px 0; }
++.seg button:hover { background: var(--lime-soft); color: var(--ink); }
++.seg button.on { background: var(--ink); color: var(--lime); position: relative; z-index: 1; }
++
++/* pastilles de filtres actifs */
++.pills { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 2px; }
++.pill {
++  display: inline-flex; align-items: center; gap: 7px;
++  border: 1.5px solid var(--ink); background: var(--lime-soft); color: var(--ink);
++  border-radius: 999px; padding: 6px 13px; font-size: 12.5px; font-weight: 600;
++  font-family: var(--font-mono); cursor: pointer; transition: all 0.13s ease;
++}
++.pill:hover { background: var(--lime); }
++.pill-x { font-size: 10px; opacity: 0.65; }
++.pill-clear { background: var(--surface); border-color: var(--danger); color: var(--danger); }
++.pill-clear:hover { background: var(--danger); color: #fff; }
++.chip-sep { width: 1.5px; align-self: stretch; background: var(--line); margin: 4px 4px; flex: none; }
++.link-btn {
++  background: none; border: none; padding: 0; color: var(--green); font: inherit;
++  text-decoration: underline; cursor: pointer;
+ }
+−@media (max-width: 980px) { .filterbar { grid-template-columns: 1fr 1fr 1fr; } }
+−@media (max-width: 640px) { .filterbar { grid-template-columns: 1fr 1fr; padding: 14px; } }
+ .field { display: flex; flex-direction: column; gap: 5px; }
+ .field label {
+   font-family: var(--font-mono); font-size: 10px; font-weight: 700;
+   /* La barre de filtres devient une feuille coulissante (bottom sheet) */
+   .filterbar { display: none; }
++  .filterbar.open .f-primary { flex-direction: column; }
++  .filterbar.open .f-ctl select { max-width: none; width: 100%; }
++  .filterbar.open .f-more { display: none; }
++  .filterbar.open .f-adv { margin-top: 4px; }
+   .filterbar.open {
++    display: flex; flex-direction: column; gap: 12px;
+     position: fixed; left: 0; right: 0; bottom: 0; z-index: 95;
+     margin: 0; border-radius: 20px 20px 0 0; border-width: 2px 0 0 0;
+     max-height: 82dvh; overflow-y: auto; -webkit-overflow-scrolling: touch;

modified louka/web.py +12 −3

				`@@ -223,14 +223,23 @@ def get_listing(uid: str):`
223		223
224		224
225	@app.get("/api/facets")	225	@app.get("/api/facets")
226	−def facets():	226	+def facets(city: str \| None = None):
227	− """Valeurs distinctes pour construire les filtres du frontend."""	227	+ """Valeurs distinctes pour construire les filtres du frontend.
		228	+
		229	+ `city` (optionnel) restreint la liste des quartiers à cette ville —
		230	+ utilisé par le sélecteur « Quartier » dépendant de « Ville ».
		231	+ """
228	con = db.connect()	232	con = db.connect()
		233	+ sector_sql = "SELECT DISTINCT sector FROM listings WHERE active=1 AND sector<>''"
		234	+ sector_args: list = []
		235	+ if city:
		236	+ sector_sql += " AND city=?"
		237	+ sector_args.append(city)
229	out = {	238	out = {
230	"cities": [r["city"] for r in con.execute(	239	"cities": [r["city"] for r in con.execute(
231	"SELECT DISTINCT city FROM listings WHERE active=1 AND city<>'' ORDER BY city")],	240	"SELECT DISTINCT city FROM listings WHERE active=1 AND city<>'' ORDER BY city")],
232	"sectors": [r["sector"] for r in con.execute(	241	"sectors": [r["sector"] for r in con.execute(
233	− "SELECT DISTINCT sector FROM listings WHERE active=1 AND sector<>'' ORDER BY sector")],	242	+ sector_sql + " ORDER BY sector", sector_args)],
234	"unit_types": [r["unit_type"] for r in con.execute(	243	"unit_types": [r["unit_type"] for r in con.execute(
235	"SELECT DISTINCT unit_type FROM listings WHERE active=1 AND unit_type<>'' ORDER BY unit_type")],	244	"SELECT DISTINCT unit_type FROM listings WHERE active=1 AND unit_type<>'' ORDER BY unit_type")],
236	"sources": [dict(r) for r in con.execute(	245	"sources": [dict(r) for r in con.execute(
237		246

spb/lou-ka

Filtres avancés — refonte du menu web + facettes par ville

Theme