feat: Implement a new tag cloud with an alphabet filter, including dedicated templates, styles, and scripts.

shaarli-pro/page.footer.html

@@ -21,8 +21,7 @@
     <script src="{$root_path}/{$value}"></script>
     {/loop}
 </footer>
-    </div><!-- /.content-container -->
-
+    </div>
     <!-- Bulk Actions Bar (for multi-select) -->
     <div class="bulk-actions-bar" id="bulk-actions-bar">
         <div class="bulk-info">
@@ -35,4 +34,30 @@
             <button class="bulk-btn bulk-btn-private" id="bulk-private">SET PRIVATE</button>
         </div>
     </div>
+
+    <!-- Persistent Media Player -->
+    <div class="media-player-bar" id="media-player-bar">
+        <audio id="media-player-audio" preload="metadata"></audio>
+        <div class="media-player-inner">
+            <button class="media-player-btn" id="media-player-play" title="Play/Pause">
+                <i class="mdi mdi-play" id="media-player-play-icon"></i>
+            </button>
+            <div class="media-player-info">
+                <div class="media-player-title" id="media-player-title">No media</div>
+                <div class="media-player-progress-wrap">
+                    <input type="range" class="media-player-progress" id="media-player-progress" min="0" max="100" value="0" step="0.1">
+                </div>
+            </div>
+            <div class="media-player-time" id="media-player-time">0:00 / 0:00</div>
+            <div class="media-player-volume-wrap">
+                <button class="media-player-btn media-player-btn-sm" id="media-player-vol-btn" title="Mute/Unmute">
+                    <i class="mdi mdi-volume-high" id="media-player-vol-icon"></i>
+                </button>
+                <input type="range" class="media-player-volume" id="media-player-volume" min="0" max="1" value="0.8" step="0.01">
+            </div>
+            <button class="media-player-btn media-player-btn-sm media-player-close" id="media-player-close" title="Close player">
+                <i class="mdi mdi-close"></i>
+            </button>
+        </div>
+    </div>
 </div><!-- /.main-content -->