feat(search): panneau de filtres unifié, clavier/focus du typeahead

Barre de recherche
- Panneau de filtres unifié (remplace le ProviderPicker) : sources, type
  (vidéos/shorts/direct/chaînes), période (heure/jour/semaine/mois/année),
  durée (<4 / 4-20 / >20 min) et tri. Pastilles + roving tabindex
  (←/→ dans un groupe, ↑/↓ entre groupes), focus trap, Échap, Ctrl/⌘+Maj+F,
  recherches récentes, « mémoriser par défaut », « Réinitialiser ».
- Pastilles des filtres actifs sous la barre (retrait en un clic) + compteur.
- Typeahead : un seul keydown (fin du double Enter), ↑/↓ bouclants,
  Home/End, PageUp/PageDown, Entrée valide la ligne surlignée (sinon
  recherche brute), Tab complète sans chercher, Échap ferme puis vide,
  ligne « Rechercher <q> », défilement de l'option active, aria à jour.
- Focus : le panneau se referme dès que le focus quitte la barre
  (focusout + relatedTarget + activeElement), pointerdown neutralisé sur les
  lignes pour garder le focus dans l'input (plus de scintillement).
- Opérateurs en clair : `linux live:`, `tuto today: long:` deviennent des
  filtres et sont retirés de la requête (autocomplétion après le `:`).

Filtres côté serveur
- Modèle partagé : src/app/search/filters.ts + server/search-filters.mjs.
- /api/search?type=&duration=&period=&sort= : InnerTube (upload_date, type,
  duration, features), Data API v3 (type, videoDuration, publishedAfter),
  yt-dlp --dateafter ; post-filtrage pour les providers sans filtre natif.
  Un champ manquant ne fait jamais disparaître un résultat.
- Filtres dans l'URL (partageables) + adapters + SearchService (clé de cache).
- Correction : la recherche Shorts renvoyait 0 (ShortsLockupView/GridShelfView
  non mappés, id/titre dans l'endpoint) -> mappage + shelf + vignette/vues.

Tests / docs
- 23 tests unitaires (clavier, focus, opérateurs, panneau de filtres),
  server/tests/search-filters.test.mjs (npm run test:filters) + CI,
  scénarios e2e des filtres, README/api/README/todo/MCP à jour.

src/app/search/adapters/dm.ts

@@ -2,6 +2,7 @@ import { HttpClient, HttpParams } from '@angular/common/http';
 import { firstValueFrom } from 'rxjs';
 import type { ProviderAdapter, ProviderSearchParams, SearchResult } from '../models';
 import { VideoItem } from 'src/app/shared/models/video-item.model';
+import { withFilterParams } from './filter-params';
 
 // TODO: Make SearchResult generic
 export class DmAdapter implements ProviderAdapter<VideoItem> {
@@ -12,6 +13,9 @@ export class DmAdapter implements ProviderAdapter<VideoItem> {
     let httpParams = new HttpParams().set('q', params.q).set('providers', 'dm');
     if (params.pageToken) httpParams = httpParams.set('page', params.pageToken);
     if (params.sort) httpParams = httpParams.set('sort', params.sort);
+    // Filtres (type / durée / période) : appliqués côté serveur quand le provider
+    // le sait, affinés en post-traitement sinon.
+    httpParams = withFilterParams(httpParams, params.filters);
     const res = await firstValueFrom(this.http.get<any>(`/api/search`, { params: httpParams }));
     const providerError = typeof res?.errors?.dm?.message === 'string' ? res.errors.dm.message : undefined;
     const items: VideoItem[] = (res?.groups?.dm || []).map((it: any) => ({
@@ -25,7 +29,10 @@ export class DmAdapter implements ProviderAdapter<VideoItem> {
       publishedAt: undefined, // Dailymotion API does not provide published date in search results
       channelExternalId: it.channelId || undefined,
       channelAvatarUrl: it.uploaderAvatar || undefined,
-    }));
+      // Signaux de type pour le raffinement client des filtres.
+      type: typeof it.type === 'string' ? it.type : undefined,
+      isShort: it.isShort === true ? true : undefined,
+    } as VideoItem));
     return { items, total: Array.isArray(res?.groups?.dm) ? res.groups.dm.length : 0, providerError };
   }
 }

src/app/search/adapters/filter-params.ts

@@ -0,0 +1,17 @@
+import { HttpParams } from '@angular/common/http';
+import { activeFilters, type SearchFilters } from '../filters';
+
+/**
+ * Ajoute les filtres de recherche à une `HttpParams` d'adapter.
+ * Les valeurs par défaut ne sont pas envoyées (URL/backend plus lisibles, cache
+ * serveur plus efficace : deux recherches sans filtre partagent la même entrée).
+ */
+export function withFilterParams(params: HttpParams, filters: Partial<SearchFilters> | null | undefined): HttpParams {
+  const active = activeFilters(filters);
+  let out = params;
+  if (active.type) out = out.set('type', active.type);
+  if (active.duration) out = out.set('duration', active.duration);
+  if (active.period) out = out.set('period', active.period);
+  if (active.sort) out = out.set('sort', active.sort);
+  return out;
+}

src/app/search/adapters/od.ts

@@ -2,6 +2,7 @@ import { HttpClient, HttpParams } from '@angular/common/http';
 import { firstValueFrom } from 'rxjs';
 import type { ProviderAdapter, ProviderSearchParams, SearchResult } from '../models';
 import { VideoItem } from 'src/app/shared/models/video-item.model';
+import { withFilterParams } from './filter-params';
 
 export class OdAdapter implements ProviderAdapter<VideoItem> {
   key = 'od' as const;
@@ -11,6 +12,9 @@ export class OdAdapter implements ProviderAdapter<VideoItem> {
     let httpParams = new HttpParams().set('q', params.q).set('providers', 'od');
     if (params.pageToken) httpParams = httpParams.set('page', params.pageToken);
     if (params.sort) httpParams = httpParams.set('sort', params.sort);
+    // Filtres (type / durée / période) : appliqués côté serveur quand le provider
+    // le sait, affinés en post-traitement sinon.
+    httpParams = withFilterParams(httpParams, params.filters);
     const res = await firstValueFrom(this.http.get<any>(`/api/search`, { params: httpParams }));
     const providerError = typeof res?.errors?.od?.message === 'string' ? res.errors.od.message : undefined;
     const items: VideoItem[] = (res?.groups?.od || []).map((it: any) => {
@@ -34,6 +38,9 @@ export class OdAdapter implements ProviderAdapter<VideoItem> {
         // Nom de chaîne LBRY (ex. @MaChaine) : le backend /api/channels/od
         // sait le résoudre avec ou sans préfixe @.
         channelExternalId: it.uploaderName || undefined,
+        // Signaux de type pour le raffinement client des filtres.
+        type: typeof it.type === 'string' ? it.type : undefined,
+        isShort: it.isShort === true ? true : undefined,
       } as VideoItem;
     });
     return { items, total: Array.isArray(res?.groups?.od) ? res.groups.od.length : 0, providerError };

src/app/search/adapters/pt.ts

@@ -2,6 +2,7 @@ import { HttpClient, HttpParams } from '@angular/common/http';
 import { firstValueFrom } from 'rxjs';
 import type { ProviderAdapter, ProviderSearchParams, SearchResult } from '../models';
 import { VideoItem } from 'src/app/shared/models/video-item.model';
+import { withFilterParams } from './filter-params';
 
 export class PtAdapter implements ProviderAdapter<VideoItem> {
   key = 'pt' as const;
@@ -11,6 +12,9 @@ export class PtAdapter implements ProviderAdapter<VideoItem> {
     let httpParams = new HttpParams().set('q', params.q).set('providers', 'pt');
     if (params.pageToken) httpParams = httpParams.set('page', params.pageToken);
     if (params.sort) httpParams = httpParams.set('sort', params.sort);
+    // Filtres (type / durée / période) : appliqués côté serveur quand le provider
+    // le sait, affinés en post-traitement sinon.
+    httpParams = withFilterParams(httpParams, params.filters);
     const res = await firstValueFrom(this.http.get<any>(`/api/search`, { params: httpParams }));
     const providerError = typeof res?.errors?.pt?.message === 'string' ? res.errors.pt.message : undefined;
     const items: VideoItem[] = (res?.groups?.pt || []).map((it: any) => {
@@ -31,7 +35,10 @@ export class PtAdapter implements ProviderAdapter<VideoItem> {
         viewCount: undefined,
         publishedAt: undefined,
         channelExternalId,
-      };
+        // Signaux de type pour le raffinement client des filtres.
+        type: typeof it.type === 'string' ? it.type : undefined,
+        isShort: it.isShort === true ? true : undefined,
+      } as VideoItem;
     });
     return { items, total: Array.isArray(res?.groups?.pt) ? res.groups.pt.length : 0, providerError };
   }

src/app/search/adapters/ru.ts

@@ -2,6 +2,7 @@ import { HttpClient, HttpParams } from '@angular/common/http';
 import { firstValueFrom } from 'rxjs';
 import type { ProviderAdapter, ProviderSearchParams, SearchResult } from '../models';
 import { VideoItem } from 'src/app/shared/models/video-item.model';
+import { withFilterParams } from './filter-params';
 
 export class RuAdapter implements ProviderAdapter<VideoItem> {
   key = 'ru' as const;
@@ -11,6 +12,9 @@ export class RuAdapter implements ProviderAdapter<VideoItem> {
     let httpParams = new HttpParams().set('q', params.q).set('providers', 'ru');
     if (params.pageToken) httpParams = httpParams.set('page', params.pageToken);
     if (params.sort) httpParams = httpParams.set('sort', params.sort);
+    // Filtres (type / durée / période) : appliqués côté serveur quand le provider
+    // le sait, affinés en post-traitement sinon.
+    httpParams = withFilterParams(httpParams, params.filters);
     const res = await firstValueFrom(this.http.get<any>(`/api/search`, { params: httpParams }));
     const providerError = typeof res?.errors?.ru?.message === 'string' ? res.errors.ru.message : undefined;
     const items: VideoItem[] = (res?.groups?.ru || []).map((it: any) => ({
@@ -22,7 +26,10 @@ export class RuAdapter implements ProviderAdapter<VideoItem> {
       thumbnailUrl: it.thumbnail,
       viewCount: typeof it.views === 'number' ? it.views : undefined,
       publishedAt: it.publishedAt,
-    }));
+      // Signaux de type (Shorts / direct) pour le raffinement client.
+      type: typeof it.type === 'string' ? it.type : undefined,
+      isShort: it.isShort === true ? true : undefined,
+    } as VideoItem));
     return { items, total: Array.isArray(res?.groups?.ru) ? res.groups.ru.length : 0, providerError };
   }
 }

src/app/search/adapters/tw.ts

@@ -2,6 +2,7 @@ import { HttpClient, HttpParams } from '@angular/common/http';
 import { firstValueFrom } from 'rxjs';
 import type { ProviderAdapter, ProviderSearchParams, SearchResult } from '../models';
 import { VideoItem } from 'src/app/shared/models/video-item.model';
+import { withFilterParams } from './filter-params';
 
 export class TwAdapter implements ProviderAdapter<VideoItem> {
   key = 'tw' as const;
@@ -11,6 +12,9 @@ export class TwAdapter implements ProviderAdapter<VideoItem> {
     let httpParams = new HttpParams().set('q', params.q).set('providers', 'tw');
     if (params.pageToken) httpParams = httpParams.set('page', params.pageToken);
     if (params.sort) httpParams = httpParams.set('sort', params.sort);
+    // Filtres (type / durée / période) : appliqués côté serveur quand le provider
+    // le sait, affinés en post-traitement sinon.
+    httpParams = withFilterParams(httpParams, params.filters);
     const res = await firstValueFrom(this.http.get<any>(`/api/search`, { params: httpParams }));
     const providerError = typeof res?.errors?.tw?.message === 'string' ? res.errors.tw.message : undefined;
     const items: VideoItem[] = (res?.groups?.tw || []).map((it: any) => {
@@ -41,6 +45,7 @@ export class TwAdapter implements ProviderAdapter<VideoItem> {
         type: typeof it.type === 'string' ? it.type : undefined,
         isLive: typeof it.isLive === 'boolean' ? it.isLive : undefined,
         kind: typeof it.kind === 'string' ? it.kind : undefined,
+        isShort: it.isShort === true ? true : undefined,
         game: typeof it.game === 'string' ? it.game : undefined,
       } as VideoItem;
     }).filter((v: VideoItem) => v.id != null && String(v.id).length > 0 && (v.thumbnailUrl || v.channelAvatarUrl));

src/app/search/adapters/yt.ts

@@ -2,6 +2,7 @@ import { HttpClient, HttpParams } from '@angular/common/http';
 import { firstValueFrom } from 'rxjs';
 import type { ProviderAdapter, ProviderSearchParams, SearchResult } from '../models';
 import { VideoItem } from 'src/app/shared/models/video-item.model';
+import { withFilterParams } from './filter-params';
 
 export class YtAdapter implements ProviderAdapter<VideoItem> {
   key = 'yt' as const;
@@ -11,6 +12,9 @@ export class YtAdapter implements ProviderAdapter<VideoItem> {
     let httpParams = new HttpParams().set('q', params.q).set('providers', 'yt');
     if (params.pageToken) httpParams = httpParams.set('page', params.pageToken);
     if (params.sort) httpParams = httpParams.set('sort', params.sort);
+    // Filtres (type / durée / période) : appliqués côté serveur quand le provider
+    // le sait, affinés en post-traitement sinon.
+    httpParams = withFilterParams(httpParams, params.filters);
     const res = await firstValueFrom(this.http.get<any>(`/api/search`, { params: httpParams }));
     const providerError = typeof res?.errors?.yt?.message === 'string' ? res.errors.yt.message : undefined;
     const items: VideoItem[] = (res?.groups?.yt || []).map((it: any) => ({
@@ -25,7 +29,12 @@ export class YtAdapter implements ProviderAdapter<VideoItem> {
       // ID chaîne conservé : rend le logo/nom cliquables vers /channel
       // (l'avatar est résolu via /api/channels, l'API search n'en fournit pas).
       channelExternalId: it.channelExternalId || it.channelId || undefined,
-    }));
+      // Signaux de type : indispensables au raffinement client des filtres
+      // (Shorts / direct / chaîne) quand le serveur les a déjà appliqués.
+      type: typeof it.type === 'string' ? it.type : undefined,
+      isLive: typeof it.isLive === 'boolean' ? it.isLive : undefined,
+      isShort: it.isShort === true ? true : undefined,
+    } as VideoItem));
     return { items, total: Array.isArray(res?.groups?.yt) ? res.groups.yt.length : 0, providerError };
   }
 }