Scrollable, SPA-navigated filter bar with all languages

Removes the 12-chip cap on the language filter so every language that
appears in public content is listed (video 175 alone contributes 12).

The bar wrapper is now sticky and horizontally scrollable with chevron
buttons that appear only when the bar overflows in that direction, a
gradient fade behind each button, vertical-wheel → horizontal scroll
that hands off to the page at the edges, and sessionStorage-persisted
scroll position so navigation doesn't snap it back to the start.

Chip clicks are intercepted (only for /videos URLs; Trending/Shorts
still render different templates via a normal navigation) and swap
only the #filter-content region via fetch + DOMParser, updating
history.pushState, document.title, and active-chip state without a
full page reload. Modifier-clicks and middle-clicks fall through
to native "open in new tab" behaviour.

Co-Authored-By: Claude Opus 4.7 (1M context) <[email protected]>

resources/views/layouts/app.blade.php

@@ -435,6 +435,14 @@
         .action-btn.icon-only { padding: 8px; }
 
         /* Filter chip bar */
+        .yt-filter-bar-wrap {
+            position: sticky;
+            top: 56px;
+            z-index: 90;
+            margin: -24px -24px 20px;
+            background: var(--bg-dark);
+            border-bottom: 1px solid var(--border-color);
+        }
         .yt-filter-bar {
             display: flex;
             gap: 12px;
@@ -442,15 +450,35 @@
             scrollbar-width: none;
             -ms-overflow-style: none;
             padding: 12px 24px;
-            margin: -24px -24px 20px;
-            background: var(--bg-dark);
-            position: sticky;
-            top: 56px;
-            z-index: 90;
-            border-bottom: 1px solid var(--border-color);
+            scroll-behavior: smooth;
         }
         .yt-filter-bar::-webkit-scrollbar { display: none; }
 
+        /* Left / right scroll buttons — visible only when the bar overflows */
+        .yt-filter-nav {
+            position: absolute; top: 0; bottom: 0;
+            display: none; align-items: center;
+            width: 48px;
+            background: transparent;
+            border: none;
+            color: var(--text-primary);
+            cursor: pointer;
+            z-index: 2;
+            padding: 0;
+            font-size: 20px;
+            justify-content: center;
+        }
+        .yt-filter-nav.visible { display: flex; }
+        .yt-filter-nav.left  { left: 0;  background: linear-gradient(to right, var(--bg-dark) 40%, transparent); justify-content: flex-start; padding-left: 6px; }
+        .yt-filter-nav.right { right: 0; background: linear-gradient(to left,  var(--bg-dark) 40%, transparent); justify-content: flex-end;   padding-right: 6px; }
+        .yt-filter-nav i {
+            width: 32px; height: 32px; border-radius: 50%;
+            background: var(--bg-secondary);
+            display: flex; align-items: center; justify-content: center;
+            box-shadow: 0 2px 6px rgba(0,0,0,0.35);
+        }
+        .yt-filter-nav:hover i { background: #555; }
+
         .yt-chip {
             flex-shrink: 0;
             background: #3f3f3f;