From 700645919c99af44b4cfac4042e5a99cae79a969 Mon Sep 17 00:00:00 2001
From: SamidyFR <168582143+SamidyFR@users.noreply.github.com>
Date: Mon, 23 Feb 2026 22:58:08 +0000
Subject: [PATCH] style: auto-fix linting issues

---
 THEME_GUIDE.md   |  52 +++----
 index.html       | 352 +++++++++++++++++++++++++++++++++++++----------
 js/api.js        |  11 +-
 js/settings.js   |   4 +-
 js/themeStore.js | 130 +++++++++--------
 js/ui.js         |  24 ++--
 styles.css       |   4 +-
 7 files changed, 408 insertions(+), 169 deletions(-)

diff --git a/THEME_GUIDE.md b/THEME_GUIDE.md
index 11ed14f..6ec7d38 100644
--- a/THEME_GUIDE.md
+++ b/THEME_GUIDE.md
@@ -13,22 +13,22 @@ Themes in Monochrome are essentially CSS snippets that override the default CSS
     /* Base Colors */
     --background: #0a0a0a;
     --foreground: #ededed;
-    
+
     /* UI Elements */
     --card: #1a1a1a;
     --card-foreground: #ededed;
     --border: #2a2a2a;
-    
+
     /* Accents */
     --primary: #3b82f6;
     --primary-foreground: #ffffff;
     --secondary: #2a2a2a;
     --secondary-foreground: #ededed;
-    
+
     /* Text */
     --muted: #2a2a2a;
     --muted-foreground: #a0a0a0;
-    
+
     /* Special */
     --highlight: #3b82f6;
     --ring: #3b82f6;
@@ -39,39 +39,39 @@ Themes in Monochrome are essentially CSS snippets that override the default CSS
 
 ## CSS Variables Reference
 
-| Variable | Description |
-| :--- | :--- |
-| `--background` | The main background color for your theme. |
-| `--foreground` | The main text color. |
-| `--card` | Background color for cards, modals, and panels. |
-| `--card-foreground` | Text color inside cards. |
-| `--border` | Color for borders and separators. |
-| `--primary` | Main accent color (buttons, active states). |
-| `--primary-foreground` | Text color on top of primary elements. |
-| `--secondary` | Secondary background (hover states, secondary buttons). |
-| `--secondary-foreground` | Text color on secondary elements. |
-| `--muted` | Muted background color (placeholders, skeletons). |
-| `--muted-foreground` | Muted text color (subtitles, metadata). |
-| `--highlight` | Color used for text highlighting and focus rings. |
-| `--radius` | Border radius for cards and buttons (e.g., `8px`, `0px`). |
-| `--font-family` | Font stack for the theme. |
+| Variable                 | Description                                               |
+| :----------------------- | :-------------------------------------------------------- |
+| `--background`           | The main background color for your theme.                 |
+| `--foreground`           | The main text color.                                      |
+| `--card`                 | Background color for cards, modals, and panels.           |
+| `--card-foreground`      | Text color inside cards.                                  |
+| `--border`               | Color for borders and separators.                         |
+| `--primary`              | Main accent color (buttons, active states).               |
+| `--primary-foreground`   | Text color on top of primary elements.                    |
+| `--secondary`            | Secondary background (hover states, secondary buttons).   |
+| `--secondary-foreground` | Text color on secondary elements.                         |
+| `--muted`                | Muted background color (placeholders, skeletons).         |
+| `--muted-foreground`     | Muted text color (subtitles, metadata).                   |
+| `--highlight`            | Color used for text highlighting and focus rings.         |
+| `--radius`               | Border radius for cards and buttons (e.g., `8px`, `0px`). |
+| `--font-family`          | Font stack for the theme.                                 |
 
 ## Using the Theme Editor
 
 1.  **Open the Theme Store**: Go to Settings > Appearance > Open Theme Store.
 2.  **Go to Upload Tab**: Click on the "Upload" tab.
 3.  **Use the Toolbar**:
-    *   **Colors**: Use the color pickers to quickly set the main colors.
-    *   **Styles**: Use the dropdowns to set font and border radius.
-    *   **Template**: Click "Template" to insert a starter CSS block.
-    *   **Preview**: Click "Preview" to see your changes in real-time on a sample card.
+    - **Colors**: Use the color pickers to quickly set the main colors.
+    - **Styles**: Use the dropdowns to set font and border radius.
+    - **Template**: Click "Template" to insert a starter CSS block.
+    - **Preview**: Click "Preview" to see your changes in real-time on a sample card.
 4.  **Manual Editing**: You can manually edit the CSS in the text area for fine-grained control.
 
 ## Uploading Your Theme
 
 1.  **Name & Description**: Give your theme a unique name and a brief description.
 2.  **Author Website**: Optionally provide a link to your website.
-    *   *Note:* If you have a Monochrome profile, your name will automatically link to it.
+    - _Note:_ If you have a Monochrome profile, your name will automatically link to it.
 3.  **Submit**: Click "Upload Theme".
 
-Once uploaded, your theme will be available for everyone to browse and apply!
\ No newline at end of file
+Once uploaded, your theme will be available for everyone to browse and apply!
diff --git a/index.html b/index.html
index b9acf8d..8b404a4 100644
--- a/index.html
+++ b/index.html
@@ -1260,92 +1260,233 @@
 
         <div id="theme-store-modal" class="modal">
             <div class="modal-overlay"></div>
-            <div class="modal-content wide" style="height: 80vh; display: flex; flex-direction: column; max-height: 80vh;">
-                <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem;">
-                    <h3 style="margin: 0;">Theme Store</h3>
-                    <button class="close-modal-btn" style="background:none; border:none; font-size:1.5rem; cursor:pointer; color:var(--muted-foreground);">&times;</button>
+            <div
+                class="modal-content wide"
+                style="height: 80vh; display: flex; flex-direction: column; max-height: 80vh"
+            >
+                <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem">
+                    <h3 style="margin: 0">Theme Store</h3>
+                    <button
+                        class="close-modal-btn"
+                        style="
+                            background: none;
+                            border: none;
+                            font-size: 1.5rem;
+                            cursor: pointer;
+                            color: var(--muted-foreground);
+                        "
+                    >
+                        &times;
+                    </button>
                 </div>
-                
-                <div class="search-tabs" style="margin-bottom: 1rem;">
+
+                <div class="search-tabs" style="margin-bottom: 1rem">
                     <button class="search-tab active" data-tab="browse">Browse</button>
                     <button class="search-tab" data-tab="upload">Upload</button>
                 </div>
 
-                <div id="theme-store-details" style="display: none; flex-direction: column; height: 100%; overflow: hidden;">
-                    <button class="btn-secondary" id="theme-details-back-btn" style="align-self: flex-start; margin-bottom: 1rem; display: flex; align-items: center; gap: 0.5rem;">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m15 18-6-6 6-6"/></svg>
+                <div
+                    id="theme-store-details"
+                    style="display: none; flex-direction: column; height: 100%; overflow: hidden"
+                >
+                    <button
+                        class="btn-secondary"
+                        id="theme-details-back-btn"
+                        style="
+                            align-self: flex-start;
+                            margin-bottom: 1rem;
+                            display: flex;
+                            align-items: center;
+                            gap: 0.5rem;
+                        "
+                    >
+                        <svg
+                            xmlns="http://www.w3.org/2000/svg"
+                            width="16"
+                            height="16"
+                            viewBox="0 0 24 24"
+                            fill="none"
+                            stroke="currentColor"
+                            stroke-width="2"
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                        >
+                            <path d="m15 18-6-6 6-6" />
+                        </svg>
                         Back
                     </button>
-                    <div style="flex: 1; overflow-y: auto; padding-right: 0.5rem;">
-                        <div style="display: flex; gap: 1.5rem; flex-wrap: wrap; margin-bottom: 2rem;">
-                             <div id="theme-details-preview-container" style="width: 300px; height: 220px; flex-shrink: 0; border: 1px solid var(--border); border-radius: var(--radius);"></div>
-                             <div style="flex: 1; min-width: 250px;">
-                                 <h2 id="theme-details-name" style="font-size: 2rem; margin-bottom: 0.5rem;"></h2>
-                                 <div class="meta" style="color: var(--muted-foreground); font-size: 0.9rem; margin-bottom: 1rem; line-height: 1.6;">
-                                     <div id="theme-details-author"></div>
-                                     <div>Created: <span id="theme-details-created"></span> - Updated: <span id="theme-details-updated"></span></div>
-                                     <div>Installs: <span id="theme-details-installs">0</span></div>
-                                 </div>
-                                 <button id="theme-details-apply-btn" class="btn-primary" style="width: 100%; max-width: 200px;">Apply Theme</button>
-                             </div>
+                    <div style="flex: 1; overflow-y: auto; padding-right: 0.5rem">
+                        <div style="display: flex; gap: 1.5rem; flex-wrap: wrap; margin-bottom: 2rem">
+                            <div
+                                id="theme-details-preview-container"
+                                style="
+                                    width: 300px;
+                                    height: 220px;
+                                    flex-shrink: 0;
+                                    border: 1px solid var(--border);
+                                    border-radius: var(--radius);
+                                "
+                            ></div>
+                            <div style="flex: 1; min-width: 250px">
+                                <h2 id="theme-details-name" style="font-size: 2rem; margin-bottom: 0.5rem"></h2>
+                                <div
+                                    class="meta"
+                                    style="
+                                        color: var(--muted-foreground);
+                                        font-size: 0.9rem;
+                                        margin-bottom: 1rem;
+                                        line-height: 1.6;
+                                    "
+                                >
+                                    <div id="theme-details-author"></div>
+                                    <div>
+                                        Created: <span id="theme-details-created"></span> - Updated:
+                                        <span id="theme-details-updated"></span>
+                                    </div>
+                                    <div>Installs: <span id="theme-details-installs">0</span></div>
+                                </div>
+                                <button
+                                    id="theme-details-apply-btn"
+                                    class="btn-primary"
+                                    style="width: 100%; max-width: 200px"
+                                >
+                                    Apply Theme
+                                </button>
+                            </div>
                         </div>
-                        <div style="margin-bottom: 2rem;">
-                            <h3 style="font-size: 1.2rem; margin-bottom: 0.5rem;">Description</h3>
-                            <p id="theme-details-desc" style="white-space: pre-wrap; color: var(--foreground); line-height: 1.6;"></p>
+                        <div style="margin-bottom: 2rem">
+                            <h3 style="font-size: 1.2rem; margin-bottom: 0.5rem">Description</h3>
+                            <p
+                                id="theme-details-desc"
+                                style="white-space: pre-wrap; color: var(--foreground); line-height: 1.6"
+                            ></p>
                         </div>
                     </div>
                 </div>
 
-                <div id="theme-store-browse" class="search-tab-content active" style="flex: 1; overflow-y: auto; min-height: 0;">
-                    <div class="track-list-search-container" style="margin: 0 0 1rem 0;">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="search-icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
-                        <input type="search" id="theme-store-search" placeholder="Search themes..." class="track-list-search-input" autocomplete="off">
+                <div
+                    id="theme-store-browse"
+                    class="search-tab-content active"
+                    style="flex: 1; overflow-y: auto; min-height: 0"
+                >
+                    <div class="track-list-search-container" style="margin: 0 0 1rem 0">
+                        <svg
+                            xmlns="http://www.w3.org/2000/svg"
+                            width="20"
+                            height="20"
+                            viewBox="0 0 24 24"
+                            fill="none"
+                            stroke="currentColor"
+                            stroke-width="2"
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                            class="search-icon"
+                        >
+                            <circle cx="11" cy="11" r="8"></circle>
+                            <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
+                        </svg>
+                        <input
+                            type="search"
+                            id="theme-store-search"
+                            placeholder="Search themes..."
+                            class="track-list-search-input"
+                            autocomplete="off"
+                        />
                     </div>
-                    <div id="community-themes-grid" class="card-grid">
-                    </div>
-                    <div id="theme-store-loading" style="text-align: center; padding: 2rem; display: none;">
-                        <div class="animate-spin" style="display: inline-block;">
-                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12a9 9 0 1 1-6.219-8.56"/></svg>
+                    <div id="community-themes-grid" class="card-grid"></div>
+                    <div id="theme-store-loading" style="text-align: center; padding: 2rem; display: none">
+                        <div class="animate-spin" style="display: inline-block">
+                            <svg
+                                xmlns="http://www.w3.org/2000/svg"
+                                width="24"
+                                height="24"
+                                viewBox="0 0 24 24"
+                                fill="none"
+                                stroke="currentColor"
+                                stroke-width="2"
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                            >
+                                <path d="M21 12a9 9 0 1 1-6.219-8.56" />
+                            </svg>
                         </div>
                     </div>
                 </div>
 
-                <div id="theme-store-upload" class="search-tab-content" style="flex: 1; overflow-y: auto; min-height: 0;">
-                    <div id="theme-upload-auth-message" style="display: none; text-align: center; padding: 2rem; flex-direction: column; align-items: center; gap: 1rem;">
+                <div
+                    id="theme-store-upload"
+                    class="search-tab-content"
+                    style="flex: 1; overflow-y: auto; min-height: 0"
+                >
+                    <div
+                        id="theme-upload-auth-message"
+                        style="
+                            display: none;
+                            text-align: center;
+                            padding: 2rem;
+                            flex-direction: column;
+                            align-items: center;
+                            gap: 1rem;
+                        "
+                    >
                         <p>You need to be logged in to upload themes.</p>
                         <button class="btn-primary" id="theme-store-login-btn">Go to Login</button>
                     </div>
                     <form id="theme-upload-form">
-                        <div style="margin-bottom: 1rem;">
-                            <label style="display: block; margin-bottom: 0.5rem; font-size: 0.9rem;">Theme Name</label>
-                            <input type="text" id="theme-upload-name" class="template-input" placeholder="My Awesome Theme" required>
+                        <div style="margin-bottom: 1rem">
+                            <label style="display: block; margin-bottom: 0.5rem; font-size: 0.9rem">Theme Name</label>
+                            <input
+                                type="text"
+                                id="theme-upload-name"
+                                class="template-input"
+                                placeholder="My Awesome Theme"
+                                required
+                            />
                         </div>
-                        <div style="margin-bottom: 1rem;">
-                            <label style="display: block; margin-bottom: 0.5rem; font-size: 0.9rem;">Description</label>
-                            <textarea id="theme-upload-desc" class="template-input" placeholder="Describe your theme..." style="min-height: 80px; resize: vertical;"></textarea>
+                        <div style="margin-bottom: 1rem">
+                            <label style="display: block; margin-bottom: 0.5rem; font-size: 0.9rem">Description</label>
+                            <textarea
+                                id="theme-upload-desc"
+                                class="template-input"
+                                placeholder="Describe your theme..."
+                                style="min-height: 80px; resize: vertical"
+                            ></textarea>
                         </div>
-                        <div style="margin-bottom: 1rem;">
-                            <label style="display: block; margin-bottom: 0.5rem; font-size: 0.9rem;">Author Website (Optional)</label>
-                            <input type="url" id="theme-upload-website" class="template-input" placeholder="https://example.com">
-                            <p style="font-size: 0.8rem; color: var(--muted-foreground); margin-top: 0.25rem;">
+                        <div style="margin-bottom: 1rem">
+                            <label style="display: block; margin-bottom: 0.5rem; font-size: 0.9rem"
+                                >Author Website (Optional)</label
+                            >
+                            <input
+                                type="url"
+                                id="theme-upload-website"
+                                class="template-input"
+                                placeholder="https://example.com"
+                            />
+                            <p style="font-size: 0.8rem; color: var(--muted-foreground); margin-top: 0.25rem">
                                 It is recommended to create a Monochrome profile instead.
                             </p>
                         </div>
-                        <div style="margin-bottom: 1rem;">
-                            <label style="display: block; margin-bottom: 0.5rem; font-size: 0.9rem;">CSS</label>
-                            <p style="font-size: 0.8rem; color: var(--muted-foreground); margin-bottom: 0.5rem;">
-                                Define your CSS variables or custom styles here. <a href="https://github.com/monochrome-music/monochrome/blob/main/THEME_GUIDE.md" target="_blank" style="text-decoration: underline; color: var(--primary);">Read the Theme Guide</a>.
+                        <div style="margin-bottom: 1rem">
+                            <label style="display: block; margin-bottom: 0.5rem; font-size: 0.9rem">CSS</label>
+                            <p style="font-size: 0.8rem; color: var(--muted-foreground); margin-bottom: 0.5rem">
+                                Define your CSS variables or custom styles here.
+                                <a
+                                    href="https://github.com/monochrome-music/monochrome/blob/main/THEME_GUIDE.md"
+                                    target="_blank"
+                                    style="text-decoration: underline; color: var(--primary)"
+                                    >Read the Theme Guide</a
+                                >.
                             </p>
                             <div class="theme-editor-toolbar">
                                 <div class="color-picker-group">
-                                    <input type="color" id="te-bg-color" title="Background">
-                                    <input type="color" id="te-fg-color" title="Foreground">
-                                    <input type="color" id="te-primary-color" title="Primary">
-                                    <input type="color" id="te-sec-color" title="Secondary">
-                                    <input type="color" id="te-accent-color" title="Accent/Highlight">
-                                    <input type="color" id="te-card-color" title="Card Background">
-                                    <input type="color" id="te-border-color" title="Border Color">
-                                    <input type="color" id="te-muted-color" title="Muted Text">
+                                    <input type="color" id="te-bg-color" title="Background" />
+                                    <input type="color" id="te-fg-color" title="Foreground" />
+                                    <input type="color" id="te-primary-color" title="Primary" />
+                                    <input type="color" id="te-sec-color" title="Secondary" />
+                                    <input type="color" id="te-accent-color" title="Accent/Highlight" />
+                                    <input type="color" id="te-card-color" title="Card Background" />
+                                    <input type="color" id="te-border-color" title="Border Color" />
+                                    <input type="color" id="te-muted-color" title="Muted Text" />
                                 </div>
                                 <div class="style-picker-group">
                                     <select id="te-font-family" title="Font Family">
@@ -1355,7 +1496,21 @@
                                         <option value="'Courier New', monospace">Mono</option>
                                         <option value="'Times New Roman', serif">Serif</option>
                                     </select>
-                                    <input type="text" id="te-font-custom" placeholder="Custom Font..." style="height: 24px; padding: 0 4px; font-size: 0.75rem; width: 100px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--input); color: var(--foreground);">
+                                    <input
+                                        type="text"
+                                        id="te-font-custom"
+                                        placeholder="Custom Font..."
+                                        style="
+                                            height: 24px;
+                                            padding: 0 4px;
+                                            font-size: 0.75rem;
+                                            width: 100px;
+                                            border: 1px solid var(--border);
+                                            border-radius: var(--radius-sm);
+                                            background: var(--input);
+                                            color: var(--foreground);
+                                        "
+                                    />
                                     <select id="te-radius" title="Border Radius">
                                         <option value="">Radius...</option>
                                         <option value="0px">Square</option>
@@ -1365,11 +1520,31 @@
                                     </select>
                                 </div>
                                 <div class="editor-actions">
-                                    <button type="button" id="te-insert-template" class="btn-secondary" style="padding: 2px 8px; font-size: 0.8rem;">Template</button>
-                                    <button type="button" id="te-toggle-preview" class="btn-secondary" style="padding: 2px 8px; font-size: 0.8rem;">Preview</button>
+                                    <button
+                                        type="button"
+                                        id="te-insert-template"
+                                        class="btn-secondary"
+                                        style="padding: 2px 8px; font-size: 0.8rem"
+                                    >
+                                        Template
+                                    </button>
+                                    <button
+                                        type="button"
+                                        id="te-toggle-preview"
+                                        class="btn-secondary"
+                                        style="padding: 2px 8px; font-size: 0.8rem"
+                                    >
+                                        Preview
+                                    </button>
                                 </div>
                             </div>
-                            <textarea id="theme-upload-css" class="template-input" style="min-height: 200px; font-family: monospace; white-space: pre;" placeholder=":root {&#10;    --background: #000000;&#10;    --foreground: #ffffff;&#10;    /* ... */&#10;}" required></textarea>
+                            <textarea
+                                id="theme-upload-css"
+                                class="template-input"
+                                style="min-height: 200px; font-family: monospace; white-space: pre"
+                                placeholder=":root {&#10;    --background: #000000;&#10;    --foreground: #ffffff;&#10;    /* ... */&#10;}"
+                                required
+                            ></textarea>
                         </div>
                         <div class="modal-actions">
                             <button type="submit" class="btn-primary">Upload Theme</button>
@@ -1379,7 +1554,7 @@
             </div>
         </div>
 
-        <div id="theme-preview-window" style="display: none;"></div>
+        <div id="theme-preview-window" style="display: none"></div>
 
         <div id="tracker-modal" class="modal tracker-modal">
             <div class="modal-overlay"></div>
@@ -3120,15 +3295,50 @@
                                     <div class="theme-option" data-theme="latte">Latte</div>
                                     <div class="theme-option" data-theme="custom">Custom</div>
                                 </div>
-                                <div id="applied-community-theme-container" style="display: none; margin-top: 1rem;">
-                                    <button id="applied-community-theme-btn" class="btn-secondary" style="width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 1rem;">
+                                <div id="applied-community-theme-container" style="display: none; margin-top: 1rem">
+                                    <button
+                                        id="applied-community-theme-btn"
+                                        class="btn-secondary"
+                                        style="
+                                            width: 100%;
+                                            display: flex;
+                                            justify-content: space-between;
+                                            align-items: center;
+                                            padding: 1rem;
+                                        "
+                                    >
                                         <span>Applied Community Theme</span>
-                                        <span id="applied-theme-name" style="color: var(--muted-foreground); font-size: 0.9rem;"></span>
+                                        <span
+                                            id="applied-theme-name"
+                                            style="color: var(--muted-foreground); font-size: 0.9rem"
+                                        ></span>
                                     </button>
-                                    <div id="community-theme-details-panel" style="display: none; padding: 1rem; background: var(--secondary); border-radius: var(--radius); margin-top: 0.5rem; border: 1px solid var(--border);">
-                                        <div style="margin-bottom: 0.5rem; font-weight: 600;" id="ct-details-title"></div>
-                                        <div style="margin-bottom: 1rem; font-size: 0.9rem; color: var(--muted-foreground);" id="ct-details-author"></div>
-                                        <button id="ct-unapply-btn" class="btn-secondary danger" style="width: 100%;">Unapply Theme</button>
+                                    <div
+                                        id="community-theme-details-panel"
+                                        style="
+                                            display: none;
+                                            padding: 1rem;
+                                            background: var(--secondary);
+                                            border-radius: var(--radius);
+                                            margin-top: 0.5rem;
+                                            border: 1px solid var(--border);
+                                        "
+                                    >
+                                        <div
+                                            style="margin-bottom: 0.5rem; font-weight: 600"
+                                            id="ct-details-title"
+                                        ></div>
+                                        <div
+                                            style="
+                                                margin-bottom: 1rem;
+                                                font-size: 0.9rem;
+                                                color: var(--muted-foreground);
+                                            "
+                                            id="ct-details-author"
+                                        ></div>
+                                        <button id="ct-unapply-btn" class="btn-secondary danger" style="width: 100%">
+                                            Unapply Theme
+                                        </button>
                                     </div>
                                 </div>
                                 <div class="custom-theme-editor" id="custom-theme-editor">
@@ -3142,7 +3352,9 @@
                                 <div class="setting-item">
                                     <div class="info">
                                         <span class="label">Community Themes</span>
-                                        <span class="description">Browse and apply themes created by the community</span>
+                                        <span class="description"
+                                            >Browse and apply themes created by the community</span
+                                        >
                                     </div>
                                     <button id="open-theme-store-btn" class="btn-secondary">Open Theme Store</button>
                                 </div>
diff --git a/js/api.js b/js/api.js
index 1a76857..02d8557 100644
--- a/js/api.js
+++ b/js/api.js
@@ -711,7 +711,16 @@ export class LosslessAPI {
             const links = [];
             if (detailsData.relations) {
                 for (const rel of detailsData.relations) {
-                    if (['social network', 'streaming', 'official homepage', 'youtube', 'soundcloud', 'bandcamp'].includes(rel.type)) {
+                    if (
+                        [
+                            'social network',
+                            'streaming',
+                            'official homepage',
+                            'youtube',
+                            'soundcloud',
+                            'bandcamp',
+                        ].includes(rel.type)
+                    ) {
                         links.push({ type: rel.type, url: rel.url.resource });
                     }
                 }
diff --git a/js/settings.js b/js/settings.js
index e867b14..dd310ff 100644
--- a/js/settings.js
+++ b/js/settings.js
@@ -723,10 +723,10 @@ export function initializeSettings(scrobbler, player, api, ui) {
                 const styleEl = document.getElementById('custom-theme-style');
                 if (styleEl) styleEl.remove();
                 themeManager.setTheme('system');
-                
+
                 const themePicker = document.getElementById('theme-picker');
                 if (themePicker) {
-                    themePicker.querySelectorAll('.theme-option').forEach(opt => opt.classList.remove('active'));
+                    themePicker.querySelectorAll('.theme-option').forEach((opt) => opt.classList.remove('active'));
                     themePicker.querySelector('[data-theme="system"]')?.classList.add('active');
                 }
                 document.getElementById('custom-theme-editor').classList.remove('show');
diff --git a/js/themeStore.js b/js/themeStore.js
index 5bd9294..bf272b1 100644
--- a/js/themeStore.js
+++ b/js/themeStore.js
@@ -25,12 +25,11 @@ export class ThemeStore {
             this.modal.classList.remove('active');
         });
 
-
         const tabs = this.modal?.querySelectorAll('.search-tab');
-        tabs?.forEach(tab => {
+        tabs?.forEach((tab) => {
             tab.addEventListener('click', () => {
-                tabs.forEach(t => t.classList.remove('active'));
-                this.modal.querySelectorAll('.search-tab-content').forEach(c => c.classList.remove('active'));
+                tabs.forEach((t) => t.classList.remove('active'));
+                this.modal.querySelectorAll('.search-tab-content').forEach((c) => c.classList.remove('active'));
                 tab.classList.add('active');
                 const contentId = tab.dataset.tab === 'browse' ? 'theme-store-browse' : 'theme-store-upload';
                 document.getElementById(contentId)?.classList.add('active');
@@ -46,7 +45,6 @@ export class ThemeStore {
             debounceTimer = setTimeout(() => this.loadThemes(e.target.value), 300);
         });
 
-
         this.uploadForm?.addEventListener('submit', (e) => this.handleUpload(e));
 
         if (authManager) {
@@ -57,13 +55,11 @@ export class ThemeStore {
             });
         }
 
-
         document.getElementById('theme-store-login-btn')?.addEventListener('click', () => {
             this.modal.classList.remove('active');
             document.getElementById('email-auth-modal')?.classList.add('active');
         });
 
-
         this.setupEditorTools();
 
         document.getElementById('theme-details-back-btn')?.addEventListener('click', () => {
@@ -80,7 +76,11 @@ export class ThemeStore {
             const metadataStr = localStorage.getItem('community-theme');
             let metadata = null;
             if (metadataStr) {
-                try { metadata = JSON.parse(metadataStr); } catch (e) { console.warn(e); }
+                try {
+                    metadata = JSON.parse(metadataStr);
+                } catch (e) {
+                    console.warn(e);
+                }
             }
 
             if (metadata) {
@@ -88,7 +88,7 @@ export class ThemeStore {
                     css: css,
                     id: metadata.id,
                     name: metadata.name,
-                    authorName: metadata.author
+                    authorName: metadata.author,
                 });
             } else {
                 this.applyTheme(css);
@@ -104,7 +104,6 @@ export class ThemeStore {
         let currentUserId = null;
         if (authManager.user) {
             try {
-
                 const record = await syncManager._getUserRecord(authManager.user.uid);
                 currentUserId = record?.id;
             } catch (e) {
@@ -116,14 +115,14 @@ export class ThemeStore {
             const result = await this.pb.collection('themes').getList(1, 50, {
                 sort: '-created',
                 filter: query ? `name ~ "${query}" || description ~ "${query}"` : '',
-                expand: 'author'
+                expand: 'author',
             });
             this.loadingIndicator.style.display = 'none';
             if (result.items.length === 0) {
                 this.grid.innerHTML = '<div class="empty-state">No themes found.</div>';
                 return;
             }
-            result.items.forEach(theme => {
+            result.items.forEach((theme) => {
                 this.grid.appendChild(this.createThemeCard(theme, currentUserId));
             });
         } catch (err) {
@@ -136,14 +135,13 @@ export class ThemeStore {
     createThemeCard(theme, currentUserId) {
         const div = document.createElement('div');
         div.className = 'card theme-card';
-        const authorName = theme.expand?.author?.username
-            || theme.expand?.author?.display_name
-            || theme.authorName
-            || 'Unknown';
-        
+        const authorName =
+            theme.expand?.author?.username || theme.expand?.author?.display_name || theme.authorName || 'Unknown';
 
-        const shortDesc = theme.description ? 
-            (theme.description.length > 80 ? theme.description.substring(0, 80) + '...' : theme.description) 
+        const shortDesc = theme.description
+            ? theme.description.length > 80
+                ? theme.description.substring(0, 80) + '...'
+                : theme.description
             : '';
 
         let authorHtml = this.escapeHtml(authorName);
@@ -213,7 +211,7 @@ export class ThemeStore {
 
     async deleteTheme(themeId) {
         if (!confirm('Are you sure you want to delete this theme?')) return;
-        
+
         try {
             const fbUser = authManager.user;
             if (!fbUser) throw new Error('Not authenticated');
@@ -232,12 +230,12 @@ export class ThemeStore {
         const browseView = document.getElementById('theme-store-browse');
         const tabs = this.modal.querySelector('.search-tabs');
 
-
         document.getElementById('theme-details-name').textContent = theme.name;
-        
-        const authorName = theme.expand?.author?.username || theme.expand?.author?.display_name || theme.authorName || 'Unknown';
+
+        const authorName =
+            theme.expand?.author?.username || theme.expand?.author?.display_name || theme.authorName || 'Unknown';
         const authorEl = document.getElementById('theme-details-author');
-        
+
         if (theme.expand?.author?.username) {
             authorEl.innerHTML = `by <span style="cursor: pointer; text-decoration: underline; color: var(--primary);">${this.escapeHtml(authorName)}</span>`;
             authorEl.querySelector('span').onclick = () => {
@@ -247,13 +245,12 @@ export class ThemeStore {
         } else {
             authorEl.textContent = `by ${authorName}`;
         }
-        
+
         document.getElementById('theme-details-created').textContent = new Date(theme.created).toLocaleDateString();
         document.getElementById('theme-details-updated').textContent = new Date(theme.updated).toLocaleDateString();
         document.getElementById('theme-details-installs').textContent = theme.installs || 0;
         document.getElementById('theme-details-desc').textContent = theme.description || 'No description provided.';
 
-
         const applyBtn = document.getElementById('theme-details-apply-btn');
         applyBtn.onclick = async () => {
             this.applyTheme(theme);
@@ -262,18 +259,17 @@ export class ThemeStore {
             try {
                 const latest = await this.pb.collection('themes').getOne(theme.id);
                 await this.pb.collection('themes').update(theme.id, {
-                    installs: (latest.installs || 0) + 1
+                    installs: (latest.installs || 0) + 1,
                 });
             } catch (e) {
                 console.warn('Failed to update theme installs:', e);
             }
         };
 
-
         const previewContainer = document.getElementById('theme-details-preview-container');
         previewContainer.innerHTML = '';
         this.detailsPreviewShadow = previewContainer.attachShadow({ mode: 'open' });
-        
+
         const link = document.createElement('link');
         link.rel = 'stylesheet';
         link.href = '/styles.css';
@@ -300,7 +296,6 @@ export class ThemeStore {
         `;
         this.detailsPreviewShadow.appendChild(wrapper);
 
-
         browseView.style.display = 'none';
         tabs.style.display = 'none';
         detailsView.style.display = 'flex';
@@ -314,7 +309,6 @@ export class ThemeStore {
         detailsView.style.display = 'none';
         browseView.style.display = 'block';
         tabs.style.display = 'flex';
-        
 
         document.getElementById('theme-details-preview-container').innerHTML = '';
     }
@@ -322,7 +316,7 @@ export class ThemeStore {
     extractPreviewStyles(css) {
         const vars = ['--background', '--foreground', '--primary', '--card', '--border', '--muted-foreground'];
         let style = '';
-        vars.forEach(v => {
+        vars.forEach((v) => {
             const regex = new RegExp(`${v}\\s*:\\s*([^;]+)`);
             const match = css.match(regex);
             if (match) {
@@ -341,11 +335,12 @@ export class ThemeStore {
 
         localStorage.setItem('custom_theme_css', css);
         localStorage.setItem('monochrome-theme', 'custom');
-        
+
         const metadata = {
             id: theme.id,
             name: theme.name,
-            author: theme.authorName || theme.expand?.author?.username || theme.expand?.author?.display_name || 'Unknown',
+            author:
+                theme.authorName || theme.expand?.author?.username || theme.expand?.author?.display_name || 'Unknown',
         };
         localStorage.setItem('community-theme', JSON.stringify(metadata));
 
@@ -362,15 +357,34 @@ export class ThemeStore {
         if (fontMatch && fontMatch[1]) {
             const fontFamilyValue = fontMatch[1].trim();
             const mainFont = fontFamilyValue.split(',')[0].trim().replace(/['"]/g, '');
-            
+
             const genericFamilies = [
-                'serif', 'sans-serif', 'monospace', 'cursive', 'fantasy', 
-                'system-ui', 'inter', 'ibm plex mono', 'roboto', 'open sans', 
-                'lato', 'montserrat', 'poppins', 'apple music', 'sf pro display',
-                'courier new', 'times new roman', 'arial', 'helvetica', 'verdana',
-                'tahoma', 'trebuchet ms', 'impact', 'gill sans'
+                'serif',
+                'sans-serif',
+                'monospace',
+                'cursive',
+                'fantasy',
+                'system-ui',
+                'inter',
+                'ibm plex mono',
+                'roboto',
+                'open sans',
+                'lato',
+                'montserrat',
+                'poppins',
+                'apple music',
+                'sf pro display',
+                'courier new',
+                'times new roman',
+                'arial',
+                'helvetica',
+                'verdana',
+                'tahoma',
+                'trebuchet ms',
+                'impact',
+                'gill sans',
             ];
-            const isPresetOrGeneric = genericFamilies.some(generic => mainFont.toLowerCase() === generic);
+            const isPresetOrGeneric = genericFamilies.some((generic) => mainFont.toLowerCase() === generic);
 
             if (!isPresetOrGeneric) {
                 const FONT_LINK_ID = 'monochrome-dynamic-font';
@@ -418,14 +432,15 @@ export class ThemeStore {
 
         styleEl.textContent = css;
 
-
         const root = document.documentElement;
-        ['background', 'foreground', 'primary', 'secondary', 'muted', 'border', 'highlight', 'font-family'].forEach(key => {
-            root.style.removeProperty(`--${key}`);
-        });
+        ['background', 'foreground', 'primary', 'secondary', 'muted', 'border', 'highlight', 'font-family'].forEach(
+            (key) => {
+                root.style.removeProperty(`--${key}`);
+            }
+        );
         root.setAttribute('data-theme', 'custom');
 
-        document.querySelectorAll('.theme-option').forEach(el => el.classList.remove('active'));
+        document.querySelectorAll('.theme-option').forEach((el) => el.classList.remove('active'));
         document.querySelector('[data-theme="custom"]')?.classList.add('active');
 
         document.documentElement.style.display = 'none';
@@ -439,7 +454,6 @@ export class ThemeStore {
         if (this._isCheckingAuth) return;
         this._isCheckingAuth = true;
 
-
         const isLoggedIn = !!authManager?.user;
 
         const authMessage = document.getElementById('theme-upload-auth-message');
@@ -487,7 +501,6 @@ export class ThemeStore {
         let userName = null;
 
         try {
-
             const dbUser = await syncManager._getUserRecord(fbUser.uid);
             if (!dbUser) {
                 throw new Error('Could not find or create your user record. Please try again.');
@@ -499,7 +512,7 @@ export class ThemeStore {
             if (userId.length !== 15) {
                 throw new Error(
                     `Your user ID is corrupted (${userId.length} chars, expected 15). ` +
-                    `Please go to Settings > System > Clear Cloud Data, then log out and back in.`
+                        `Please go to Settings > System > Clear Cloud Data, then log out and back in.`
                 );
             }
 
@@ -513,12 +526,10 @@ export class ThemeStore {
             formData.append('authorName', userName);
             if (website) formData.append('authorUrl', website);
 
-
             await this.pb.collection('themes').create(formData, { f_id: fbUser.uid });
 
             alert('Theme uploaded successfully!');
             e.target.reset();
-            
 
             const previewWindow = document.getElementById('theme-preview-window');
             const togglePreviewBtn = document.getElementById('te-toggle-preview');
@@ -530,7 +541,6 @@ export class ThemeStore {
 
             this.modal.querySelector('[data-tab="browse"]').click();
             this.loadThemes();
-
         } catch (err) {
             console.error('Upload failed:', err);
             console.error('Response data:', err.data);
@@ -562,7 +572,7 @@ export class ThemeStore {
         const insertTemplateBtn = document.getElementById('te-insert-template');
         const togglePreviewBtn = document.getElementById('te-toggle-preview');
         const previewWindow = document.getElementById('theme-preview-window');
-        
+
         const colorMap = {
             'te-bg-color': '--background',
             'te-fg-color': '--foreground',
@@ -571,7 +581,7 @@ export class ThemeStore {
             'te-accent-color': '--highlight',
             'te-card-color': '--card',
             'te-border-color': '--border',
-            'te-muted-color': '--muted-foreground'
+            'te-muted-color': '--muted-foreground',
         };
 
         Object.entries(colorMap).forEach(([id, variable]) => {
@@ -583,7 +593,7 @@ export class ThemeStore {
 
         const styleMap = {
             'te-font-family': '--font-family',
-            'te-radius': '--radius'
+            'te-radius': '--radius',
         };
 
         Object.entries(styleMap).forEach(([id, variable]) => {
@@ -591,7 +601,7 @@ export class ThemeStore {
                 if (e.target.value) {
                     this.updateCssVariable(cssInput, variable, e.target.value);
                     this.updatePreview();
-                    e.target.value = "";
+                    e.target.value = '';
                 }
             });
         });
@@ -655,7 +665,7 @@ export class ThemeStore {
         let css = textarea.value;
         const regex = new RegExp(`${variable}:\\s*[^;\\}]+(?:;|(?=\\}))`, 'g');
         const newLine = `${variable}: ${value};`;
-        
+
         if (regex.test(css)) {
             css = css.replace(regex, newLine);
         } else {
@@ -672,7 +682,7 @@ export class ThemeStore {
         const container = document.getElementById('theme-preview-window');
         if (!this.previewShadow) {
             this.previewShadow = container.attachShadow({ mode: 'open' });
-            
+
             const link = document.createElement('link');
             link.rel = 'stylesheet';
             link.href = '/styles.css';
@@ -688,7 +698,7 @@ export class ThemeStore {
             wrapper.style.background = 'var(--background)';
             wrapper.style.color = 'var(--foreground)';
             wrapper.style.overflow = 'auto';
-            
+
             wrapper.innerHTML = `
                 <h3 style="margin-top: 0;">Preview</h3>
                 <div class="card" style="margin-bottom: 1rem;">
@@ -710,4 +720,4 @@ export class ThemeStore {
         const scopedCss = css.replace(/:root/g, ':host');
         this.previewStyleTag.textContent = scopedCss;
     }
-}
\ No newline at end of file
+}
diff --git a/js/ui.js b/js/ui.js
index a71e73e..30ca4d4 100644
--- a/js/ui.js
+++ b/js/ui.js
@@ -52,14 +52,22 @@ import { trackSearch, trackChangeSort } from './analytics.js';
 fontSettings.applyFont();
 fontSettings.applyFontSize();
 
-const SVG_GLOBE = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20"/><path d="M2 12h20"/></svg>';
-const SVG_INSTAGRAM = '<svg width="64px" height="64px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" stroke=""><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path fill-rule="evenodd" clip-rule="evenodd" d="M12 18C15.3137 18 18 15.3137 18 12C18 8.68629 15.3137 6 12 6C8.68629 6 6 8.68629 6 12C6 15.3137 8.68629 18 12 18ZM12 16C14.2091 16 16 14.2091 16 12C16 9.79086 14.2091 8 12 8C9.79086 8 8 9.79086 8 12C8 14.2091 9.79086 16 12 16Z" fill="#9E9E9E"></path> <path d="M18 5C17.4477 5 17 5.44772 17 6C17 6.55228 17.4477 7 18 7C18.5523 7 19 6.55228 19 6C19 5.44772 18.5523 5 18 5Z" fill="#9E9E9E"></path> <path fill-rule="evenodd" clip-rule="evenodd" d="M1.65396 4.27606C1 5.55953 1 7.23969 1 10.6V13.4C1 16.7603 1 18.4405 1.65396 19.7239C2.2292 20.8529 3.14708 21.7708 4.27606 22.346C5.55953 23 7.23969 23 10.6 23H13.4C16.7603 23 18.4405 23 19.7239 22.346C20.8529 21.7708 21.7708 20.8529 22.346 19.7239C23 18.4405 23 16.7603 23 13.4V10.6C23 7.23969 23 5.55953 22.346 4.27606C21.7708 3.14708 20.8529 2.2292 19.7239 1.65396C18.4405 1 16.7603 1 13.4 1H10.6C7.23969 1 5.55953 1 4.27606 1.65396C3.14708 2.2292 2.2292 3.14708 1.65396 4.27606ZM13.4 3H10.6C8.88684 3 7.72225 3.00156 6.82208 3.0751C5.94524 3.14674 5.49684 3.27659 5.18404 3.43597C4.43139 3.81947 3.81947 4.43139 3.43597 5.18404C3.27659 5.49684 3.14674 5.94524 3.0751 6.82208C3.00156 7.72225 3 8.88684 3 10.6V13.4C3 15.1132 3.00156 16.2777 3.0751 17.1779C3.14674 18.0548 3.27659 18.5032 3.43597 18.816C3.81947 19.5686 4.43139 20.1805 5.18404 20.564C5.49684 20.7234 5.94524 20.8533 6.82208 20.9249C7.72225 20.9984 8.88684 21 10.6 21H13.4C15.1132 21 16.2777 20.9984 17.1779 20.9249C18.0548 20.8533 18.5032 20.7234 18.816 20.564C19.5686 20.1805 20.1805 19.5686 20.564 18.816C20.7234 18.5032 20.8533 18.0548 20.9249 17.1779C20.9984 16.2777 21 15.1132 21 13.4V10.6C21 8.88684 20.9984 7.72225 20.9249 6.82208C20.8533 5.94524 20.7234 5.49684 20.564 5.18404C20.1805 4.43139 19.5686 3.81947 18.816 3.43597C18.5032 3.27659 18.0548 3.14674 17.1779 3.0751C16.2777 3.00156 15.1132 3 13.4 3Z" fill="#9E9E9E"></path> </g></svg>';
-const SVG_FACEBOOK = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"/></svg>';
-const SVG_YOUTUBE = '<svg viewBox="0 -3 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#000000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <title>youtube [#9E9E9E168]</title> <desc>Created with Sketch.</desc> <defs> </defs> <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g id="Dribbble-Light-Preview" transform="translate(-300.000000, -7442.000000)" fill="#9E9E9E"> <g id="icons" transform="translate(56.000000, 160.000000)"> <path d="M251.988432,7291.58588 L251.988432,7285.97425 C253.980638,7286.91168 255.523602,7287.8172 257.348463,7288.79353 C255.843351,7289.62824 253.980638,7290.56468 251.988432,7291.58588 M263.090998,7283.18289 C262.747343,7282.73013 262.161634,7282.37809 261.538073,7282.26141 C259.705243,7281.91336 248.270974,7281.91237 246.439141,7282.26141 C245.939097,7282.35515 245.493839,7282.58153 245.111335,7282.93357 C243.49964,7284.42947 244.004664,7292.45151 244.393145,7293.75096 C244.556505,7294.31342 244.767679,7294.71931 245.033639,7294.98558 C245.376298,7295.33761 245.845463,7295.57995 246.384355,7295.68865 C247.893451,7296.0008 255.668037,7296.17532 261.506198,7295.73552 C262.044094,7295.64178 262.520231,7295.39147 262.895762,7295.02447 C264.385932,7293.53455 264.28433,7285.06174 263.090998,7283.18289" id="youtube-[#9E9E9E168]"> </path> </g> </g> </g> </g></svg>';
-const SVG_TWITTER = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 4s-.7 2.1-2 3.4c1.6 10-9.4 17.3-18 11.6 2.2.1 4.4-.6 6-2C3 15.5.5 9.6 3 5c2.2 2.6 5.6 4.1 9 4-.9-4.2 4-6.6 7-3.8 1.1 0 3-1.2 3-1.2z"/></svg>';
-const SVG_LINK = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></svg>';
-const SVG_SOUNDCLOUD = '<svg fill="#9E9E9E" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve" stroke="#9E9E9E"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <g id="5151e0c8492e5103c096af88a50061c5"> <path display="inline" d="M25.173,355.106c1.076,0,1.946-0.849,2.117-2.067l5.717-44.884l-5.717-45.889 c-0.171-1.22-1.041-2.061-2.117-2.061c-1.091,0-1.982,0.862-2.125,2.061c0,0.007-5.026,45.889-5.026,45.889l5.026,44.876 C23.191,354.229,24.083,355.106,25.173,355.106z M8.328,336.058c0,0,0,0,0,0.007l0,0V336.058z M6.274,338.047 c1.041,0,1.875-0.813,2.053-1.982l4.42-27.909l-4.42-28.395c-0.171-1.169-1.012-1.981-2.053-1.981 c-1.062,0-1.896,0.819-2.046,1.996L0.5,308.155l3.729,27.896C4.378,337.227,5.212,338.047,6.274,338.047z M47.808,253.712 c-0.157-1.454-1.233-2.51-2.56-2.51c-1.354,0-2.424,1.063-2.566,2.51l-4.762,54.45l4.762,52.455 c0.143,1.461,1.212,2.509,2.566,2.509c1.326,0,2.402-1.048,2.552-2.495l5.425-52.469L47.808,253.712z M65.487,365.236 c1.568,0,2.852-1.269,3.001-2.944l0,0l5.119-54.123l-5.119-55.947c-0.149-1.675-1.433-2.944-3.001-2.944 c-1.583,0-2.873,1.27-3.001,2.951l-4.513,55.94l4.513,54.123C62.614,363.968,63.904,365.236,65.487,365.236z M85.89,366.127 c1.825,0,3.301-1.461,3.436-3.386l-0.007,0.007l4.827-54.571l-4.827-51.913c-0.128-1.918-1.604-3.372-3.429-3.372 c-1.839,0-3.315,1.454-3.429,3.387l-4.256,51.898l4.256,54.564C82.575,364.666,84.051,366.127,85.89,366.127z M114.848,308.198 l-4.527-84.436c-0.114-2.152-1.811-3.828-3.864-3.828s-3.764,1.676-3.864,3.828l-4,84.436l4,54.564 c0.1,2.124,1.811,3.813,3.864,3.813s3.75-1.689,3.864-3.828v0.015L114.848,308.198z M127.195,366.677 c2.303,0,4.185-1.868,4.299-4.264v0.036l4.228-54.244l-4.228-103.74c-0.114-2.395-1.996-4.27-4.299-4.27 c-2.317,0-4.213,1.875-4.313,4.27c0,0.008-3.735,103.74-3.735,103.74l3.743,54.229 C122.982,364.809,124.878,366.677,127.195,366.677z M148.09,191.112c-2.574,0-4.655,2.067-4.748,4.705 c0,0.008-3.472,112.402-3.472,112.402l3.479,53.666c0.085,2.616,2.167,4.677,4.741,4.677c2.552,0,4.641-2.061,4.741-4.698v0.036 l3.928-53.681l-3.928-112.409C152.73,193.173,150.642,191.112,148.09,191.112z M169.156,366.669c2.809,0,5.083-2.26,5.175-5.14 v0.035l3.622-53.338l-3.622-116.188c-0.093-2.887-2.366-5.146-5.175-5.146c-2.823,0-5.097,2.26-5.183,5.146l-3.223,116.188 l3.223,53.331C164.059,364.409,166.333,366.669,169.156,366.669z M190.378,366.619c3.065,0,5.532-2.452,5.611-5.589v0.043 l3.336-52.84l-3.336-113.229c-0.079-3.129-2.546-5.582-5.611-5.582c-3.072,0-5.546,2.46-5.617,5.582l-2.958,113.229l2.965,52.825 C184.832,364.167,187.306,366.619,190.378,366.619z M220.848,308.248l-3.03-109.108c-0.071-3.372-2.73-6.017-6.045-6.017 c-3.329,0-5.988,2.645-6.053,6.024l-2.702,109.093l2.702,52.49c0.064,3.344,2.724,5.988,6.053,5.988 c3.314,0,5.974-2.645,6.045-6.023v0.043L220.848,308.248z M233.33,366.826c3.515,0,6.423-2.901,6.48-6.466v0.043l2.737-52.148 l-2.737-129.824c-0.058-3.558-2.966-6.459-6.48-6.459c-3.521,0-6.431,2.901-6.487,6.459l-2.445,129.781 c0,0.079,2.445,52.184,2.445,52.184C226.899,363.925,229.809,366.826,233.33,366.826z M254.788,159.767 c-3.771,0-6.872,3.108-6.93,6.908l-2.83,141.595l2.83,51.385c0.058,3.75,3.158,6.851,6.93,6.851c3.764,0,6.865-3.101,6.922-6.9 v0.057l3.08-51.392l-3.08-141.602C261.653,162.875,258.552,159.767,254.788,159.767z M274.428,366.861 c0.157,0.015,173.098,0.101,174.224,0.101c34.718,0,62.849-28.146,62.849-62.863s-28.131-62.849-62.849-62.849 c-8.618,0-16.824,1.74-24.31,4.877c-4.997-56.646-52.512-101.089-110.448-101.089c-14.179,0-28.002,2.795-40.207,7.521 c-4.74,1.832-6.01,3.729-6.052,7.386c0,0.007,0,199.488,0,199.488C267.685,363.283,270.671,366.491,274.428,366.861z"> </path> </g> </g></svg>';
-const SVG_APPLE = '<svg viewBox="-1.5 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#000000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <title>apple [#9E9E9E173]</title> <desc>Created with Sketch.</desc> <defs> </defs> <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g id="Dribbble-Light-Preview" transform="translate(-102.000000, -7439.000000)" fill="#9E9E9E"> <g id="icons" transform="translate(56.000000, 160.000000)"> <path d="M57.5708873,7282.19296 C58.2999598,7281.34797 58.7914012,7280.17098 58.6569121,7279 C57.6062792,7279.04 56.3352055,7279.67099 55.5818643,7280.51498 C54.905374,7281.26397 54.3148354,7282.46095 54.4735932,7283.60894 C55.6455696,7283.69593 56.8418148,7283.03894 57.5708873,7282.19296 M60.1989864,7289.62485 C60.2283111,7292.65181 62.9696641,7293.65879 63,7293.67179 C62.9777537,7293.74279 62.562152,7295.10677 61.5560117,7296.51675 C60.6853718,7297.73474 59.7823735,7298.94772 58.3596204,7298.97372 C56.9621472,7298.99872 56.5121648,7298.17973 54.9134635,7298.17973 C53.3157735,7298.17973 52.8162425,7298.94772 51.4935978,7298.99872 C50.1203933,7299.04772 49.0738052,7297.68074 48.197098,7296.46676 C46.4032359,7293.98379 45.0330649,7289.44985 46.8734421,7286.3899 C47.7875635,7284.87092 49.4206455,7283.90793 51.1942837,7283.88393 C52.5422083,7283.85893 53.8153044,7284.75292 54.6394294,7284.75292 C55.4635543,7284.75292 57.0106846,7283.67793 58.6366882,7283.83593 C59.3172232,7283.86293 61.2283842,7284.09893 62.4549652,7285.8199 C62.355868,7285.8789 60.1747177,7287.09489 60.1989864,7289.62485" id="apple-[#9E9E9E173]"> </path> </g> </g> </g> </g></svg>';
+const SVG_GLOBE =
+    '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20"/><path d="M2 12h20"/></svg>';
+const SVG_INSTAGRAM =
+    '<svg width="64px" height="64px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" stroke=""><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path fill-rule="evenodd" clip-rule="evenodd" d="M12 18C15.3137 18 18 15.3137 18 12C18 8.68629 15.3137 6 12 6C8.68629 6 6 8.68629 6 12C6 15.3137 8.68629 18 12 18ZM12 16C14.2091 16 16 14.2091 16 12C16 9.79086 14.2091 8 12 8C9.79086 8 8 9.79086 8 12C8 14.2091 9.79086 16 12 16Z" fill="#9E9E9E"></path> <path d="M18 5C17.4477 5 17 5.44772 17 6C17 6.55228 17.4477 7 18 7C18.5523 7 19 6.55228 19 6C19 5.44772 18.5523 5 18 5Z" fill="#9E9E9E"></path> <path fill-rule="evenodd" clip-rule="evenodd" d="M1.65396 4.27606C1 5.55953 1 7.23969 1 10.6V13.4C1 16.7603 1 18.4405 1.65396 19.7239C2.2292 20.8529 3.14708 21.7708 4.27606 22.346C5.55953 23 7.23969 23 10.6 23H13.4C16.7603 23 18.4405 23 19.7239 22.346C20.8529 21.7708 21.7708 20.8529 22.346 19.7239C23 18.4405 23 16.7603 23 13.4V10.6C23 7.23969 23 5.55953 22.346 4.27606C21.7708 3.14708 20.8529 2.2292 19.7239 1.65396C18.4405 1 16.7603 1 13.4 1H10.6C7.23969 1 5.55953 1 4.27606 1.65396C3.14708 2.2292 2.2292 3.14708 1.65396 4.27606ZM13.4 3H10.6C8.88684 3 7.72225 3.00156 6.82208 3.0751C5.94524 3.14674 5.49684 3.27659 5.18404 3.43597C4.43139 3.81947 3.81947 4.43139 3.43597 5.18404C3.27659 5.49684 3.14674 5.94524 3.0751 6.82208C3.00156 7.72225 3 8.88684 3 10.6V13.4C3 15.1132 3.00156 16.2777 3.0751 17.1779C3.14674 18.0548 3.27659 18.5032 3.43597 18.816C3.81947 19.5686 4.43139 20.1805 5.18404 20.564C5.49684 20.7234 5.94524 20.8533 6.82208 20.9249C7.72225 20.9984 8.88684 21 10.6 21H13.4C15.1132 21 16.2777 20.9984 17.1779 20.9249C18.0548 20.8533 18.5032 20.7234 18.816 20.564C19.5686 20.1805 20.1805 19.5686 20.564 18.816C20.7234 18.5032 20.8533 18.0548 20.9249 17.1779C20.9984 16.2777 21 15.1132 21 13.4V10.6C21 8.88684 20.9984 7.72225 20.9249 6.82208C20.8533 5.94524 20.7234 5.49684 20.564 5.18404C20.1805 4.43139 19.5686 3.81947 18.816 3.43597C18.5032 3.27659 18.0548 3.14674 17.1779 3.0751C16.2777 3.00156 15.1132 3 13.4 3Z" fill="#9E9E9E"></path> </g></svg>';
+const SVG_FACEBOOK =
+    '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"/></svg>';
+const SVG_YOUTUBE =
+    '<svg viewBox="0 -3 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#000000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <title>youtube [#9E9E9E168]</title> <desc>Created with Sketch.</desc> <defs> </defs> <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g id="Dribbble-Light-Preview" transform="translate(-300.000000, -7442.000000)" fill="#9E9E9E"> <g id="icons" transform="translate(56.000000, 160.000000)"> <path d="M251.988432,7291.58588 L251.988432,7285.97425 C253.980638,7286.91168 255.523602,7287.8172 257.348463,7288.79353 C255.843351,7289.62824 253.980638,7290.56468 251.988432,7291.58588 M263.090998,7283.18289 C262.747343,7282.73013 262.161634,7282.37809 261.538073,7282.26141 C259.705243,7281.91336 248.270974,7281.91237 246.439141,7282.26141 C245.939097,7282.35515 245.493839,7282.58153 245.111335,7282.93357 C243.49964,7284.42947 244.004664,7292.45151 244.393145,7293.75096 C244.556505,7294.31342 244.767679,7294.71931 245.033639,7294.98558 C245.376298,7295.33761 245.845463,7295.57995 246.384355,7295.68865 C247.893451,7296.0008 255.668037,7296.17532 261.506198,7295.73552 C262.044094,7295.64178 262.520231,7295.39147 262.895762,7295.02447 C264.385932,7293.53455 264.28433,7285.06174 263.090998,7283.18289" id="youtube-[#9E9E9E168]"> </path> </g> </g> </g> </g></svg>';
+const SVG_TWITTER =
+    '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 4s-.7 2.1-2 3.4c1.6 10-9.4 17.3-18 11.6 2.2.1 4.4-.6 6-2C3 15.5.5 9.6 3 5c2.2 2.6 5.6 4.1 9 4-.9-4.2 4-6.6 7-3.8 1.1 0 3-1.2 3-1.2z"/></svg>';
+const SVG_LINK =
+    '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></svg>';
+const SVG_SOUNDCLOUD =
+    '<svg fill="#9E9E9E" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve" stroke="#9E9E9E"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <g id="5151e0c8492e5103c096af88a50061c5"> <path display="inline" d="M25.173,355.106c1.076,0,1.946-0.849,2.117-2.067l5.717-44.884l-5.717-45.889 c-0.171-1.22-1.041-2.061-2.117-2.061c-1.091,0-1.982,0.862-2.125,2.061c0,0.007-5.026,45.889-5.026,45.889l5.026,44.876 C23.191,354.229,24.083,355.106,25.173,355.106z M8.328,336.058c0,0,0,0,0,0.007l0,0V336.058z M6.274,338.047 c1.041,0,1.875-0.813,2.053-1.982l4.42-27.909l-4.42-28.395c-0.171-1.169-1.012-1.981-2.053-1.981 c-1.062,0-1.896,0.819-2.046,1.996L0.5,308.155l3.729,27.896C4.378,337.227,5.212,338.047,6.274,338.047z M47.808,253.712 c-0.157-1.454-1.233-2.51-2.56-2.51c-1.354,0-2.424,1.063-2.566,2.51l-4.762,54.45l4.762,52.455 c0.143,1.461,1.212,2.509,2.566,2.509c1.326,0,2.402-1.048,2.552-2.495l5.425-52.469L47.808,253.712z M65.487,365.236 c1.568,0,2.852-1.269,3.001-2.944l0,0l5.119-54.123l-5.119-55.947c-0.149-1.675-1.433-2.944-3.001-2.944 c-1.583,0-2.873,1.27-3.001,2.951l-4.513,55.94l4.513,54.123C62.614,363.968,63.904,365.236,65.487,365.236z M85.89,366.127 c1.825,0,3.301-1.461,3.436-3.386l-0.007,0.007l4.827-54.571l-4.827-51.913c-0.128-1.918-1.604-3.372-3.429-3.372 c-1.839,0-3.315,1.454-3.429,3.387l-4.256,51.898l4.256,54.564C82.575,364.666,84.051,366.127,85.89,366.127z M114.848,308.198 l-4.527-84.436c-0.114-2.152-1.811-3.828-3.864-3.828s-3.764,1.676-3.864,3.828l-4,84.436l4,54.564 c0.1,2.124,1.811,3.813,3.864,3.813s3.75-1.689,3.864-3.828v0.015L114.848,308.198z M127.195,366.677 c2.303,0,4.185-1.868,4.299-4.264v0.036l4.228-54.244l-4.228-103.74c-0.114-2.395-1.996-4.27-4.299-4.27 c-2.317,0-4.213,1.875-4.313,4.27c0,0.008-3.735,103.74-3.735,103.74l3.743,54.229 C122.982,364.809,124.878,366.677,127.195,366.677z M148.09,191.112c-2.574,0-4.655,2.067-4.748,4.705 c0,0.008-3.472,112.402-3.472,112.402l3.479,53.666c0.085,2.616,2.167,4.677,4.741,4.677c2.552,0,4.641-2.061,4.741-4.698v0.036 l3.928-53.681l-3.928-112.409C152.73,193.173,150.642,191.112,148.09,191.112z M169.156,366.669c2.809,0,5.083-2.26,5.175-5.14 v0.035l3.622-53.338l-3.622-116.188c-0.093-2.887-2.366-5.146-5.175-5.146c-2.823,0-5.097,2.26-5.183,5.146l-3.223,116.188 l3.223,53.331C164.059,364.409,166.333,366.669,169.156,366.669z M190.378,366.619c3.065,0,5.532-2.452,5.611-5.589v0.043 l3.336-52.84l-3.336-113.229c-0.079-3.129-2.546-5.582-5.611-5.582c-3.072,0-5.546,2.46-5.617,5.582l-2.958,113.229l2.965,52.825 C184.832,364.167,187.306,366.619,190.378,366.619z M220.848,308.248l-3.03-109.108c-0.071-3.372-2.73-6.017-6.045-6.017 c-3.329,0-5.988,2.645-6.053,6.024l-2.702,109.093l2.702,52.49c0.064,3.344,2.724,5.988,6.053,5.988 c3.314,0,5.974-2.645,6.045-6.023v0.043L220.848,308.248z M233.33,366.826c3.515,0,6.423-2.901,6.48-6.466v0.043l2.737-52.148 l-2.737-129.824c-0.058-3.558-2.966-6.459-6.48-6.459c-3.521,0-6.431,2.901-6.487,6.459l-2.445,129.781 c0,0.079,2.445,52.184,2.445,52.184C226.899,363.925,229.809,366.826,233.33,366.826z M254.788,159.767 c-3.771,0-6.872,3.108-6.93,6.908l-2.83,141.595l2.83,51.385c0.058,3.75,3.158,6.851,6.93,6.851c3.764,0,6.865-3.101,6.922-6.9 v0.057l3.08-51.392l-3.08-141.602C261.653,162.875,258.552,159.767,254.788,159.767z M274.428,366.861 c0.157,0.015,173.098,0.101,174.224,0.101c34.718,0,62.849-28.146,62.849-62.863s-28.131-62.849-62.849-62.849 c-8.618,0-16.824,1.74-24.31,4.877c-4.997-56.646-52.512-101.089-110.448-101.089c-14.179,0-28.002,2.795-40.207,7.521 c-4.74,1.832-6.01,3.729-6.052,7.386c0,0.007,0,199.488,0,199.488C267.685,363.283,270.671,366.491,274.428,366.861z"> </path> </g> </g></svg>';
+const SVG_APPLE =
+    '<svg viewBox="-1.5 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#000000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <title>apple [#9E9E9E173]</title> <desc>Created with Sketch.</desc> <defs> </defs> <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g id="Dribbble-Light-Preview" transform="translate(-102.000000, -7439.000000)" fill="#9E9E9E"> <g id="icons" transform="translate(56.000000, 160.000000)"> <path d="M57.5708873,7282.19296 C58.2999598,7281.34797 58.7914012,7280.17098 58.6569121,7279 C57.6062792,7279.04 56.3352055,7279.67099 55.5818643,7280.51498 C54.905374,7281.26397 54.3148354,7282.46095 54.4735932,7283.60894 C55.6455696,7283.69593 56.8418148,7283.03894 57.5708873,7282.19296 M60.1989864,7289.62485 C60.2283111,7292.65181 62.9696641,7293.65879 63,7293.67179 C62.9777537,7293.74279 62.562152,7295.10677 61.5560117,7296.51675 C60.6853718,7297.73474 59.7823735,7298.94772 58.3596204,7298.97372 C56.9621472,7298.99872 56.5121648,7298.17973 54.9134635,7298.17973 C53.3157735,7298.17973 52.8162425,7298.94772 51.4935978,7298.99872 C50.1203933,7299.04772 49.0738052,7297.68074 48.197098,7296.46676 C46.4032359,7293.98379 45.0330649,7289.44985 46.8734421,7286.3899 C47.7875635,7284.87092 49.4206455,7283.90793 51.1942837,7283.88393 C52.5422083,7283.85893 53.8153044,7284.75292 54.6394294,7284.75292 C55.4635543,7284.75292 57.0106846,7283.67793 58.6366882,7283.83593 C59.3172232,7283.86293 61.2283842,7284.09893 62.4549652,7285.8199 C62.355868,7285.8789 60.1747177,7287.09489 60.1989864,7289.62485" id="apple-[#9E9E9E173]"> </path> </g> </g> </g> </g></svg>';
 
 function sortTracks(tracks, sortType) {
     if (sortType === 'custom') return [...tracks];
diff --git a/styles.css b/styles.css
index 363f9e9..042eecb 100644
--- a/styles.css
+++ b/styles.css
@@ -7641,7 +7641,7 @@ textarea:focus {
     cursor: pointer;
 }
 
-.theme-editor-toolbar input[type="color"] {
+.theme-editor-toolbar input[type='color'] {
     width: 24px;
     height: 24px;
     padding: 0;
@@ -7663,7 +7663,7 @@ textarea:focus {
     right: 20px;
     width: 300px;
     height: 400px;
-    background: var(--background); 
+    background: var(--background);
     border: 1px solid var(--border);
     border-radius: var(--radius);
     box-shadow: var(--shadow-xl);