chore: update Angular build cache and TypeScript definitions

src/components/header/header.component.html

@@ -129,9 +129,11 @@
     <div class="justify-self-end flex items-center gap-3 pr-3 md:pr-4">
       <!-- Provider context indicator placed between search and user area -->
       <div *ngIf="providerContextLabel()" class="flex items-center gap-1 text-xs">
-        <span class="inline-flex items-center gap-1 px-2 py-0.5 rounded bg-yellow-400/30 border border-yellow-400/40 shadow-sm"
-              [ngClass]="{ 'text-black': isLightTheme(), 'text-yellow-200': !isLightTheme() }">
-          <span class="inline-block w-2 h-2 rounded-full bg-yellow-300 animate-pulse"></span>
+        <span class="inline-flex items-center px-2 py-0.5 rounded border shadow-sm gap-1"
+              [ngStyle]="getProviderColors(providerContext())">
+          <svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
+          </svg>
           <span>{{ providerContextLabel() }}</span>
         </span>
       </div>

src/components/header/header.component.ts

@@ -284,6 +284,29 @@ export class HeaderComponent {
     };
   }
 
+  // Brand colors for provider badge (inline styles to match History badges)
+  getProviderColors(providerId: string | null | undefined): { [key: string]: string } {
+    const id = (providerId || '').toLowerCase();
+    switch (id) {
+      case 'youtube':
+        return { backgroundColor: 'rgba(220, 38, 38, 0.15)', color: 'rgb(248, 113, 113)', borderColor: 'rgba(239, 68, 68, 0.3)' };
+      case 'vimeo':
+        return { backgroundColor: 'rgba(2, 132, 199, 0.15)', color: 'rgb(125, 211, 252)', borderColor: 'rgba(14, 165, 233, 0.3)' };
+      case 'dailymotion':
+        return { backgroundColor: 'rgba(37, 99, 235, 0.15)', color: 'rgb(147, 197, 253)', borderColor: 'rgba(59, 130, 246, 0.3)' };
+      case 'peertube':
+        return { backgroundColor: 'rgba(245, 158, 11, 0.15)', color: 'rgb(252, 211, 77)', borderColor: 'rgba(245, 158, 11, 0.3)' };
+      case 'rumble':
+        return { backgroundColor: 'rgba(22, 163, 74, 0.15)', color: 'rgb(134, 239, 172)', borderColor: 'rgba(34, 197, 94, 0.3)' };
+      case 'twitch':
+        return { backgroundColor: 'rgba(168, 85, 247, 0.15)', color: 'rgb(216, 180, 254)', borderColor: 'rgba(168, 85, 247, 0.3)' };
+      case 'odysee':
+        return { backgroundColor: 'rgba(236, 72, 153, 0.15)', color: 'rgb(251, 207, 232)', borderColor: 'rgba(236, 72, 153, 0.3)' };
+      default:
+        return { backgroundColor: 'rgba(30, 41, 59, 0.8)', color: 'rgb(203, 213, 225)', borderColor: 'rgb(51, 65, 85)' };
+    }
+  }
+
   // Helper to show the divider before the first generated item
   isFirstGenerated(index: number): boolean {
     const arr = this.suggestionItems();
@@ -304,9 +327,24 @@ export class HeaderComponent {
     } catch {}
   }
 
+  private updateProviderContext(provider: Provider) {
+    if (this.instances.providers().some(p => p.id === provider)) {
+      this.providerContext.set(provider);
+    }
+  }
+
   ngOnInit() {
     // Initialize and keep provider context in sync with URL
     this.updateProviderContextFromUrl(this.router.url);
+    
+    // Écouter les mises à jour de provider depuis d'autres composants
+    document.addEventListener('updateProviderContext', (event: Event) => {
+      const customEvent = event as CustomEvent<Provider>;
+      if (customEvent.detail) {
+        this.updateProviderContext(customEvent.detail);
+      }
+    });
+    
     this.router.events.subscribe(evt => {
       if (evt instanceof NavigationEnd) {
         this.updateProviderContextFromUrl(evt.urlAfterRedirects || evt.url);
@@ -323,7 +361,8 @@ export class HeaderComponent {
       const qIdx = afterHash.indexOf('?');
       const query = qIdx >= 0 ? afterHash.substring(qIdx + 1) : '';
       const params = new URLSearchParams(query);
-      let provider = (params.get('provider') || '').trim() as Provider;
+      // Support both ?provider= and legacy/alt ?p=
+      let provider = ((params.get('provider') || params.get('p') || '').trim()) as Provider;
 
       // If not provided via query, try path format /p/:provider/... (supports hash and non-hash routing)
       if (!provider) {
@@ -338,7 +377,7 @@ export class HeaderComponent {
         }
       }
 
-      // Validate against known providers list; if none and we're on Shorts, fall back to selected provider
+      // Validate against known providers list; if none and we're on Shorts/Watch, fall back to selected provider
       const known = this.providers().map(p => p.id);
       if (provider && known.includes(provider)) {
         this.providerContext.set(provider);
@@ -353,6 +392,14 @@ export class HeaderComponent {
             return;
           }
         }
+        // If current path looks like '/watch', also fall back to selected provider to show a consistent badge
+        if (segs.length > 0 && segs[0] === 'watch') {
+          const fallback = this.selectedProvider();
+          if (fallback && known.includes(fallback)) {
+            this.providerContext.set(fallback);
+            return;
+          }
+        }
         this.providerContext.set(null);
       }
     } catch {