Audio songs: one-folder storage, version-aware download/share, GPU-checked renders

Storage structure
- All audio tracks (primary + per-language) now live in one folder per song with
  unique lowercase names ({slug}-{lang}-{id}); no more tracks/ subfolder.
- Generated renders (download video + HLS) moved into the song's local-only cache/
  subfolder, separated from source files (never synced to NAS, safe to wipe).
- tracks:reorganize artisan command (dry-run default) consolidates legacy files,
  updates DB paths, and deletes orphans + empty folders.
- CLAUDE.md documents the canonical layout as a global rule (identical local + NAS).

Version-aware download & share
- Download MP3/Video and Share now act on the version being played; ?track={id}
  is carried through share links and auto-selects audio + title + flag + about +
  OG/meta on open.

GPU + visualizer
- Setting::gpuUsable() runs a cached health probe (nvidia-smi + nvenc smoke test,
  256x144) before sending any encode to the GPU; falls back to CPU otherwise.
- Visualizer "Download Video" bakes in equal-width, cover-coloured, translucent
  frequency bars; loop-filter rebuild makes generation ~25x faster.

Image cropper
- result-callback mode + per-song cover-slide cropper in upload/edit (modal + mobile).

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

resources/views/videos/partials/description-box.blade.php

@@ -5,11 +5,9 @@
 --}}
 @php
     $isVideoOwner  = Auth::check() && Auth::id() === $video->user_id;
-    $hasDesc       = !empty($video->description) || isset($descriptionSlot);
+    $renderedDescription = \App\Support\HtmlSanitizer::render($video->description ?? '');
+    $hasDesc       = $renderedDescription !== '' || isset($descriptionSlot);
     $showBox       = $hasDesc || $isVideoOwner;
-    $fullDescription  = $video->description ?? '';
-    $shortDescription = Str::limit($fullDescription, 200);
-    $needsExpand      = strlen($fullDescription) > 200;
 @endphp
 @if ($showBox)
 <style>
@@ -23,9 +21,17 @@
 .vdb-panel { display:none; padding:14px 16px 16px; }
 .vdb-panel.active { display:block; }
 .vdb-meta { font-size:13px; font-weight:600; color:var(--text-secondary); margin-bottom:10px; display:flex; gap:10px; flex-wrap:wrap; }
-.vdb-desc-text { font-size:14px; line-height:1.6; color:var(--text-primary); white-space:pre-wrap; }
-.vdb-desc-text p { margin-bottom:8px; }
+.vdb-desc-text { font-size:14px; line-height:1.6; color:var(--text-primary); word-break:break-word; }
+.vdb-desc-text p { margin:0 0 8px; }
+.vdb-desc-text p:last-child { margin-bottom:0; }
+.vdb-desc-text h2 { font-size:19px; font-weight:700; margin:6px 0 8px; }
+.vdb-desc-text h3 { font-size:16px; font-weight:700; margin:6px 0 6px; }
+.vdb-desc-text ul, .vdb-desc-text ol { margin:0 0 8px; padding-left:22px; }
+.vdb-desc-text blockquote { margin:0 0 8px; padding-left:12px; border-left:3px solid var(--border-color); color:var(--text-secondary); }
 .vdb-desc-text a { color:#3ea6ff; }
+.vdb-desc-text a.action-btn { display:inline-flex; margin:4px 6px 4px 0; color:inherit; text-decoration:none; vertical-align:middle; }
+.vdb-desc-text.vdb-clamp { max-height:130px; overflow:hidden; -webkit-mask-image:linear-gradient(180deg,#000 70%,transparent); mask-image:linear-gradient(180deg,#000 70%,transparent); }
+.vdb-desc-text.vdb-clamp.vdb-expanded { max-height:none; -webkit-mask-image:none; mask-image:none; }
 .vdb-show-more { background:none; border:none; color:var(--text-primary); font-weight:700; font-size:13px; cursor:pointer; padding:6px 0 0; }
 </style>
 
@@ -50,12 +56,9 @@
         </div>
         @if(isset($descriptionSlot))
             {!! $descriptionSlot !!}
-        @elseif($hasDesc)
-            <div id="vdbDescShort" class="vdb-desc-text">{{ $needsExpand ? $shortDescription : $fullDescription }}</div>
-            @if($needsExpand)
-            <div id="vdbDescFull" class="vdb-desc-text" style="display:none;">{{ $fullDescription }}</div>
-            <button class="vdb-show-more" onclick="toggleVdbDesc(this)">Show more</button>
-            @endif
+        @elseif($renderedDescription !== '')
+            <div id="vdbDescShort" class="vdb-desc-text vdb-clamp">{!! $renderedDescription !!}</div>
+            <button id="vdbShowMore" class="vdb-show-more" style="display:none;" onclick="toggleVdbDesc(this)">Show more</button>
         @else
             <p style="font-size:13px;color:var(--text-secondary);margin:0;">No description added.</p>
         @endif
@@ -80,10 +83,21 @@ function switchVdbTab(panelId, btn) {
     }
 }
 function toggleVdbDesc(btn) {
-    const s = document.getElementById('vdbDescShort'), f = document.getElementById('vdbDescFull');
-    if (!f) return;
-    if (f.style.display === 'none') { s.style.display='none'; f.style.display='block'; btn.textContent='Show less'; }
-    else { s.style.display='block'; f.style.display='none'; btn.textContent='Show more'; }
+    const d = document.getElementById('vdbDescShort');
+    if (!d) return;
+    const expanded = d.classList.toggle('vdb-expanded');
+    btn.textContent = expanded ? 'Show less' : 'Show more';
 }
+// Reveal "Show more" only when the description overflows the clamp. Compare the
+// natural content height to the clamp limit (130px) rather than clientHeight,
+// which is unreliable right after a content swap.
+function _vdbCheckOverflow() {
+    const d = document.getElementById('vdbDescShort'), b = document.getElementById('vdbShowMore');
+    if (!d || !b) return;
+    if (d.classList.contains('vdb-expanded')) { b.style.display = 'block'; return; }
+    b.style.display = (d.scrollHeight > 138) ? 'block' : 'none';
+}
+document.addEventListener('DOMContentLoaded', _vdbCheckOverflow);
+window.addEventListener('load', _vdbCheckOverflow);
 </script>
 @endif