Merge branch 'monochrome-music:main' into main

index.html

@@ -1639,6 +1639,32 @@
             </div>
         </div>
 
+        <div id="help-modal" class="modal">
+            <div class="modal-overlay"></div>
+            <div class="modal-content">
+                <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem">
+                    <h3 style="margin: 0">Monochrome Help</h3>
+                    <button class="close-modal-btn" id="close-help-modal" style="background: none; border: none; font-size: 24px; cursor: pointer; color: var(--muted-foreground);">&times;</button>
+                </div>
+                <div id="help-video-container" style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; background: #000; border-radius: var(--radius);">
+                     <iframe 
+                        style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0;"
+                        src="https://m.samidy.xyz/monochrome-help.mp4" 
+                        title="Monochrome Help" 
+                        frameborder="0" 
+                        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" 
+                        allowfullscreen>
+                    </iframe>
+                </div>
+                <p style="margin-top: 1rem; text-align: center; color: var(--muted-foreground); font-size: 0.9rem;">
+                    thank you to community member valerie for making this video!
+                </p>
+                <div class="modal-actions" style="justify-content: center">
+                    <button id="help-modal-done" class="btn-primary">Done</button>
+                </div>
+            </div>
+        </div>
+
         <div id="sidebar-overlay"></div>
 
         <div id="csv-import-progress" class="csv-import-progress" style="display: none">
@@ -1811,6 +1837,9 @@
                         </button>
                         <div id="search-history" class="search-history" style="display: none"></div>
                     </form>
+                    <button id="help-btn" class="btn-icon" title="Help">
+                        <use svg="!lucide/help-circle.svg" size="24" />
+                    </button>
                     <div class="header-account-control">
                         <button
                             id="header-account-btn"

js/app.js

@@ -453,6 +453,32 @@ document.addEventListener('DOMContentLoaded', async () => {
     }
 
     new ThemeStore();
+
+    const helpBtn = document.getElementById('help-btn');
+    const helpModal = document.getElementById('help-modal');
+    const closeHelpModal = document.getElementById('close-help-modal');
+    const helpModalDone = document.getElementById('help-modal-done');
+    const helpModalOverlay = helpModal?.querySelector('.modal-overlay');
+
+    if (helpBtn && helpModal) {
+        helpBtn.addEventListener('click', () => {
+            helpModal.classList.add('active');
+        });
+
+        const hideHelpModal = () => {
+            helpModal.classList.remove('active');
+            const iframe = helpModal.querySelector('iframe');
+            if (iframe) {
+                const src = iframe.src;
+                iframe.src = '';
+                iframe.src = src;
+            }
+        };
+
+        closeHelpModal?.addEventListener('click', hideHelpModal);
+        helpModalDone?.addEventListener('click', hideHelpModal);
+        helpModalOverlay?.addEventListener('click', hideHelpModal);
+    }
     await HiFiClient.initialize({
         storage: [
             localStorage,