Add multi-language audio tracks and self-hosted flag-icons

Introduce per-video language support and multiple audio tracks
(VideoAudioTrack model + migrations for language, description, title),
a reusable language-select component, and a track-editor form. Bundle
the self-hosted flag-icons v7.2.3 library and a NAS auto-sync command.

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

CLAUDE.md

@@ -126,7 +126,7 @@ Structure: `<button class="action-btn"><i class="bi bi-..."></i> <span>Label</sp
 
 **Edit modal and edit page must always stay in sync** — the desktop edit UI lives in `resources/views/layouts/partials/edit-video-modal.blade.php` and the mobile edit UI lives in `resources/views/videos/edit.blade.php`. On mobile (< 992px), `openEditVideoModal(videoId)` redirects to `/videos/{id}/edit` instead of opening the modal. **Any change made to one must be applied to the other immediately in the same task.** — the desktop upload UI lives in `resources/views/layouts/partials/upload-modal.blade.php` and the mobile upload UI lives in `resources/views/videos/create.blade.php`. On mobile, `openUploadModal()` redirects to the create page instead of showing the modal. **Any change made to one must be applied to the other immediately in the same task** — this includes new fields, validation logic, file-type support, JS behaviour, labels, and error handling. Never update only one side.
 
-**Never build custom dropdowns for country, nationality, phone code, timezone, or currency** — reusable Blade components already exist for these. Always use them; never roll a new `<select>`, inline list, or custom picker:
+**Never build custom dropdowns for country, nationality, phone code, timezone, currency, or language** — reusable Blade components already exist for these. Always use them; never roll a new `<select>`, inline list, or custom picker:
 
 | Need | Component | Stored value |
 |---|---|---|
@@ -134,8 +134,9 @@ Structure: `<button class="action-btn"><i class="bi bi-..."></i> <span>Label</sp
 | Phone / dial-code picker | `<x-phone-code-select name="…" />` | `"+973|BH"` — split on `|` to get code alone |
 | Timezone picker | `<x-timezone-select name="…" />` | IANA string e.g. `"Asia/Bahrain"` |
 | Currency | read from `App\Data\Countries::all()[$iso2]['currency']` | ISO 4217 code e.g. `"BHD"` |
+| Language picker | `<x-language-select name="…" />` | ISO 639-1 code e.g. `"ar"`, `"en"` |
 
-All three components accept `name`, `id`, `value`, `label`, `placeholder`, `required`, `class`, and `style` props. The full dataset lives in `app/Data/Countries.php`. Usage is tracked in `.claude/component-usage.md` — add a row to the relevant table whenever you place one of these components in a view.
+All four select components accept `name`, `id`, `value`, `label`, `placeholder`, `required`, `class`, and `style` props. Country/phone/timezone data lives in `app/Data/Countries.php`; language data lives in `app/Data/Languages.php`. Usage is tracked in `.claude/component-usage.md` — add a row to the relevant table whenever you place one of these components in a view.
 
 **Component usage tracker is mandatory and must always be kept current** — the tracker lives at `.claude/component-usage.md`. These rules apply without exception:
 
@@ -147,11 +148,33 @@ All three components accept `name`, `id`, `value`, `label`, `placeholder`, `requ
 
 The tracker is the source of truth for blast radius. If the tracker is out of date and a change breaks an unlisted page, that is a process failure — always keep it accurate.
 
+**Always use the self-hosted flag-icons library for every flag in the project — never use emoji flags or external CDN flag sources.**
+
+The flag-icons v7.2.3 library is self-hosted at `public/vendor/flag-icons/` (CSS + 270 SVG files). It is loaded synchronously in both layouts:
+- Front-end: `resources/views/layouts/app.blade.php` via `asset('vendor/flag-icons/css/flag-icons.min.css')`
+- Admin: `resources/views/admin/layout.blade.php` via the same asset path
+
+Rules that must never be violated:
+
+1. **Never use emoji flags** (`🇧🇭`, `🇺🇸`, etc.) anywhere — they are invisible on Windows Chrome/Firefox. Always use `<span class="fi fi-{iso2}"></span>` where `{iso2}` is a lowercase two-letter country code (e.g. `bh`, `us`, `gb`).
+
+2. **Never load flag-icons from a CDN** (`jsdelivr`, `unpkg`, `flagcdn.com`, etc.). The library is already self-hosted; adding a CDN link creates a duplicate load and a network dependency.
+
+3. **`Countries::all()` `flag` field is a lowercase ISO2 code** — `app/Data/Countries.php` generates this via `$f = fn(string $c) => strtolower($c)`. Do not change it back to emoji. Every component that renders `$opt['flag']` already wraps it in `<span class="fi fi-{{ $opt['flag'] }}"></span>`.
+
+4. **`Languages::all()` `flag` field is also a lowercase ISO2 code** — e.g. Arabic → `'sa'`, English → `'gb'`. Render it the same way.
+
+5. **When updating JS that copies a selected flag into a button icon**, always use `innerHTML`, not `textContent` — the flag is now an HTML `<span>`, not a text character. The `_pick()` method in the custom-select components already does this.
+
+6. **For the admin chart flag overlays** (`admin/dashboard.blade.php`), use `<span class="fi fi-{code}">` elements positioned absolutely — not `<img>` tags from `flagcdn.com`.
+
+7. **Unknown/missing country fallback**: always use `<span class="fi fi-xx"></span>` — the library's own built-in placeholder (the SVG exists at `public/vendor/flag-icons/flags/4x3/xx.svg`). Never use any external icon, emoji, or Bootstrap Icons globe as a fallback. In Blade: `<span class="fi fi-{{ $flag ?: 'xx' }}"></span>`. In JS: `` `<span class="fi fi-${flag || 'xx'}"></span>` ``.
+
 **Match highlights sidebar must always match the video player height** — use a `ResizeObserver` on `#ytpWrap` to write `--sidebar-height` to `document.documentElement` and bind `.events-sidebar { height: var(--sidebar-height) }`. Never hardcode a pixel or viewport height for the sidebar. The pattern lives in `videos/types/match.blade.php` (`initSidebarHeightSync`).
 
-### NAS is always enabled — it is the only storage backend
+### NAS with automatic local fallback
 
-**The NAS is permanently enabled in this project. Local disk is never a storage destination — it is a temporary write buffer only. Every user file must end up on the NAS and be served from the NAS. No exceptions.**
+**NAS is the primary storage backend. When NAS is reachable, every user file must end up on the NAS and be served from the NAS. When NAS is unreachable, files are stored locally and automatically migrated to NAS when it comes back online.**
 
 File types and their NAS locations:
 
@@ -192,7 +215,7 @@ These directories may appear temporarily during an upload (as a write buffer bef
 
 5. **Set `video->status = 'ready'` before dispatching `GenerateHlsJob` for NAS uploads.** The job checks `if ($video->status !== 'ready') return` and silently does nothing otherwise. For NAS, the upload is the compression step — the video is ready as soon as `uploadDirectToNas()` completes. For local storage, `CompressVideoJob` handles the status transition automatically.
 
-6. **Never check `NasSyncService::isEnabled()` before doing a NAS operation in this project.** It is always enabled. Writing code with an `if ($nas->isEnabled())` branch that falls back to local-only storage will result in broken files the moment that branch is taken.
+6. **Always check `NasSyncService::isEnabled()` before doing a NAS operation.** It returns `false` when NAS is unreachable (TCP port-445 check, cached 2 minutes) or when the setting is disabled. Code with `if ($nas->isEnabled())` branches that fall back to local storage is correct — the `nas:auto-sync` scheduler will migrate local files to NAS when it comes back online.
 
 **If you find legacy local files that should be on NAS**, follow this migration procedure (same pattern used to clean up thumbnails and avatars):
 1. Identify which DB record owns each local file (`Video::where('thumbnail', $filename)`, `User::where('avatar', $filename)`, etc.)