style: auto-fix linting issues
This commit is contained in:
parent
434d1ae164
commit
98741b4f18
1 changed files with 305 additions and 338 deletions
643
index.html
643
index.html
|
|
@ -1584,7 +1584,14 @@
|
|||
></textarea>
|
||||
</div>
|
||||
<div class="modal-actions">
|
||||
<button type="button" id="theme-upload-cancel-edit" class="btn-secondary" style="display: none;">Cancel Edit</button>
|
||||
<button
|
||||
type="button"
|
||||
id="theme-upload-cancel-edit"
|
||||
class="btn-secondary"
|
||||
style="display: none"
|
||||
>
|
||||
Cancel Edit
|
||||
</button>
|
||||
<button type="submit" id="theme-upload-submit-btn" class="btn-primary">Upload Theme</button>
|
||||
</div>
|
||||
</form>
|
||||
|
|
@ -4839,378 +4846,338 @@
|
|||
</div>
|
||||
|
||||
<div class="settings-group">
|
||||
<div class="info">
|
||||
<span class="label">Compact Artists</span>
|
||||
<span class="description"
|
||||
>Show artist cards in a compact, horizontal layout</span
|
||||
>
|
||||
</div>
|
||||
<label class="toggle-switch">
|
||||
<input type="checkbox" id="compact-artist-toggle" />
|
||||
<span class="slider"></span>
|
||||
</label>
|
||||
<div class="info">
|
||||
<span class="label">Compact Artists</span>
|
||||
<span class="description">Show artist cards in a compact, horizontal layout</span>
|
||||
</div>
|
||||
<div class="setting-item">
|
||||
<div class="info">
|
||||
<span class="label">Compact Albums</span>
|
||||
<span class="description"
|
||||
>Show album cards in a compact, horizontal layout</span
|
||||
>
|
||||
</div>
|
||||
<label class="toggle-switch">
|
||||
<input type="checkbox" id="compact-album-toggle" />
|
||||
<span class="slider"></span>
|
||||
</label>
|
||||
<label class="toggle-switch">
|
||||
<input type="checkbox" id="compact-artist-toggle" />
|
||||
<span class="slider"></span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="setting-item">
|
||||
<div class="info">
|
||||
<span class="label">Compact Albums</span>
|
||||
<span class="description">Show album cards in a compact, horizontal layout</span>
|
||||
</div>
|
||||
<label class="toggle-switch">
|
||||
<input type="checkbox" id="compact-album-toggle" />
|
||||
<span class="slider"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="settings-tab-content" id="settings-tab-downloads">
|
||||
<div class="settings-list">
|
||||
<div class="settings-group">
|
||||
<div class="setting-item">
|
||||
<div class="info">
|
||||
<span class="label">Zipped Bulk Downloads</span>
|
||||
<span class="description"
|
||||
>Download multiple tracks as a single ZIP file (requires browser
|
||||
support)</span
|
||||
>
|
||||
</div>
|
||||
<label class="toggle-switch">
|
||||
<input type="checkbox" id="zipped-bulk-downloads-toggle" checked />
|
||||
<span class="slider"></span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="settings-tab-content" id="settings-tab-downloads">
|
||||
<div class="settings-list">
|
||||
<div class="settings-group">
|
||||
<div class="setting-item">
|
||||
<div class="info">
|
||||
<span class="label">Zipped Bulk Downloads</span>
|
||||
<span class="description"
|
||||
>Download multiple tracks as a single ZIP file (requires browser support)</span
|
||||
>
|
||||
</div>
|
||||
<div class="setting-item">
|
||||
<div class="info">
|
||||
<span class="label">Download Lyrics</span>
|
||||
<span class="description"
|
||||
>Include .lrc files when downloading tracks/albums</span
|
||||
>
|
||||
</div>
|
||||
<label class="toggle-switch">
|
||||
<input type="checkbox" id="download-lyrics-toggle" />
|
||||
<span class="slider"></span>
|
||||
</label>
|
||||
<label class="toggle-switch">
|
||||
<input type="checkbox" id="zipped-bulk-downloads-toggle" checked />
|
||||
<span class="slider"></span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="setting-item">
|
||||
<div class="info">
|
||||
<span class="label">Download Lyrics</span>
|
||||
<span class="description">Include .lrc files when downloading tracks/albums</span>
|
||||
</div>
|
||||
<div class="setting-item">
|
||||
<div class="info">
|
||||
<span class="label">Romaji Lyrics</span>
|
||||
<span class="description"
|
||||
>Convert Japanese lyrics to Romaji (Latin characters)</span
|
||||
>
|
||||
</div>
|
||||
<label class="toggle-switch">
|
||||
<input type="checkbox" id="romaji-lyrics-toggle" />
|
||||
<span class="slider"></span>
|
||||
</label>
|
||||
<label class="toggle-switch">
|
||||
<input type="checkbox" id="download-lyrics-toggle" />
|
||||
<span class="slider"></span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="setting-item">
|
||||
<div class="info">
|
||||
<span class="label">Romaji Lyrics</span>
|
||||
<span class="description"
|
||||
>Convert Japanese lyrics to Romaji (Latin characters)</span
|
||||
>
|
||||
</div>
|
||||
<div class="setting-item">
|
||||
<div class="info">
|
||||
<span class="label">Filename Template</span>
|
||||
<span class="description"
|
||||
>Customize download filenames. Available: {trackNumber}, {artist}, {title},
|
||||
{album}</span
|
||||
>
|
||||
</div>
|
||||
<input
|
||||
type="text"
|
||||
id="filename-template"
|
||||
class="template-input"
|
||||
placeholder="{trackNumber} - {artist} - {title}"
|
||||
/>
|
||||
<label class="toggle-switch">
|
||||
<input type="checkbox" id="romaji-lyrics-toggle" />
|
||||
<span class="slider"></span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="setting-item">
|
||||
<div class="info">
|
||||
<span class="label">Filename Template</span>
|
||||
<span class="description"
|
||||
>Customize download filenames. Available: {trackNumber}, {artist}, {title},
|
||||
{album}</span
|
||||
>
|
||||
</div>
|
||||
<div class="setting-item">
|
||||
<div class="info">
|
||||
<span class="label">ZIP Folder Template</span>
|
||||
<span class="description"
|
||||
>Customize album folder names. Available: {albumTitle}, {albumArtist},
|
||||
{year}</span
|
||||
>
|
||||
</div>
|
||||
<input
|
||||
type="text"
|
||||
id="zip-folder-template"
|
||||
class="template-input"
|
||||
placeholder="{albumTitle} - {albumArtist} - monochrome.tf"
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
id="filename-template"
|
||||
class="template-input"
|
||||
placeholder="{trackNumber} - {artist} - {title}"
|
||||
/>
|
||||
</div>
|
||||
<div class="setting-item">
|
||||
<div class="info">
|
||||
<span class="label">ZIP Folder Template</span>
|
||||
<span class="description"
|
||||
>Customize album folder names. Available: {albumTitle}, {albumArtist},
|
||||
{year}</span
|
||||
>
|
||||
</div>
|
||||
<div class="setting-item">
|
||||
<div class="info">
|
||||
<span class="label">Generate M3U</span>
|
||||
<span class="description">Include M3U playlist files in downloads</span>
|
||||
</div>
|
||||
<label class="toggle-switch">
|
||||
<input type="checkbox" id="generate-m3u-toggle" checked />
|
||||
<span class="slider"></span>
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="zip-folder-template"
|
||||
class="template-input"
|
||||
placeholder="{albumTitle} - {albumArtist} - monochrome.tf"
|
||||
/>
|
||||
</div>
|
||||
<div class="setting-item">
|
||||
<div class="info">
|
||||
<span class="label">Generate M3U</span>
|
||||
<span class="description">Include M3U playlist files in downloads</span>
|
||||
</div>
|
||||
<div class="setting-item">
|
||||
<div class="info">
|
||||
<span class="label">Generate M3U8</span>
|
||||
<span class="description"
|
||||
>Include extended M3U8 playlist files in downloads</span
|
||||
>
|
||||
</div>
|
||||
<label class="toggle-switch">
|
||||
<input type="checkbox" id="generate-m3u8-toggle" />
|
||||
<span class="slider"></span>
|
||||
</label>
|
||||
<label class="toggle-switch">
|
||||
<input type="checkbox" id="generate-m3u-toggle" checked />
|
||||
<span class="slider"></span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="setting-item">
|
||||
<div class="info">
|
||||
<span class="label">Generate M3U8</span>
|
||||
<span class="description">Include extended M3U8 playlist files in downloads</span>
|
||||
</div>
|
||||
<div class="setting-item">
|
||||
<div class="info">
|
||||
<span class="label">Generate CUE</span>
|
||||
<span class="description"
|
||||
>Include CUE sheets for gapless playback in downloads</span
|
||||
>
|
||||
</div>
|
||||
<label class="toggle-switch">
|
||||
<input type="checkbox" id="generate-cue-toggle" />
|
||||
<span class="slider"></span>
|
||||
</label>
|
||||
<label class="toggle-switch">
|
||||
<input type="checkbox" id="generate-m3u8-toggle" />
|
||||
<span class="slider"></span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="setting-item">
|
||||
<div class="info">
|
||||
<span class="label">Generate CUE</span>
|
||||
<span class="description"
|
||||
>Include CUE sheets for gapless playback in downloads</span
|
||||
>
|
||||
</div>
|
||||
<div class="setting-item">
|
||||
<div class="info">
|
||||
<span class="label">Generate NFO</span>
|
||||
<span class="description"
|
||||
>Include NFO files for media center compatibility</span
|
||||
>
|
||||
</div>
|
||||
<label class="toggle-switch">
|
||||
<input type="checkbox" id="generate-nfo-toggle" />
|
||||
<span class="slider"></span>
|
||||
</label>
|
||||
<label class="toggle-switch">
|
||||
<input type="checkbox" id="generate-cue-toggle" />
|
||||
<span class="slider"></span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="setting-item">
|
||||
<div class="info">
|
||||
<span class="label">Generate NFO</span>
|
||||
<span class="description">Include NFO files for media center compatibility</span>
|
||||
</div>
|
||||
<div class="setting-item">
|
||||
<div class="info">
|
||||
<span class="label">Generate JSON</span>
|
||||
<span class="description">Include JSON files with rich metadata</span>
|
||||
</div>
|
||||
<label class="toggle-switch">
|
||||
<input type="checkbox" id="generate-json-toggle" />
|
||||
<span class="slider"></span>
|
||||
</label>
|
||||
<label class="toggle-switch">
|
||||
<input type="checkbox" id="generate-nfo-toggle" />
|
||||
<span class="slider"></span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="setting-item">
|
||||
<div class="info">
|
||||
<span class="label">Generate JSON</span>
|
||||
<span class="description">Include JSON files with rich metadata</span>
|
||||
</div>
|
||||
<div class="setting-item">
|
||||
<div class="info">
|
||||
<span class="label">Relative Paths</span>
|
||||
<span class="description">Use relative paths in playlist files</span>
|
||||
</div>
|
||||
<label class="toggle-switch">
|
||||
<input type="checkbox" id="relative-paths-toggle" checked />
|
||||
<span class="slider"></span>
|
||||
</label>
|
||||
<label class="toggle-switch">
|
||||
<input type="checkbox" id="generate-json-toggle" />
|
||||
<span class="slider"></span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="setting-item">
|
||||
<div class="info">
|
||||
<span class="label">Relative Paths</span>
|
||||
<span class="description">Use relative paths in playlist files</span>
|
||||
</div>
|
||||
<div class="setting-item">
|
||||
<div class="info">
|
||||
<span class="label">Separate Discs in ZIP</span>
|
||||
<span class="description"
|
||||
>Put tracks in Disc folders when a release has multiple discs</span
|
||||
>
|
||||
</div>
|
||||
<label class="toggle-switch">
|
||||
<input type="checkbox" id="separate-discs-zip-toggle" />
|
||||
<span class="slider"></span>
|
||||
</label>
|
||||
<label class="toggle-switch">
|
||||
<input type="checkbox" id="relative-paths-toggle" checked />
|
||||
<span class="slider"></span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="setting-item">
|
||||
<div class="info">
|
||||
<span class="label">Separate Discs in ZIP</span>
|
||||
<span class="description"
|
||||
>Put tracks in Disc folders when a release has multiple discs</span
|
||||
>
|
||||
</div>
|
||||
<label class="toggle-switch">
|
||||
<input type="checkbox" id="separate-discs-zip-toggle" />
|
||||
<span class="slider"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="settings-tab-content" id="settings-tab-system">
|
||||
<div class="settings-list">
|
||||
<div class="settings-group">
|
||||
<div class="setting-item">
|
||||
<div class="info">
|
||||
<span class="label">Keyboard Shortcuts</span>
|
||||
<span class="description">View and customize keyboard shortcuts</span>
|
||||
</div>
|
||||
<button id="customize-shortcuts-btn" class="btn-secondary">Customize</button>
|
||||
</div>
|
||||
<div class="settings-tab-content" id="settings-tab-system">
|
||||
<div class="settings-list">
|
||||
<div class="settings-group">
|
||||
<div class="setting-item">
|
||||
<div class="info">
|
||||
<span class="label">Keyboard Shortcuts</span>
|
||||
<span class="description">View and customize keyboard shortcuts</span>
|
||||
</div>
|
||||
<div class="setting-item">
|
||||
<div class="info">
|
||||
<span class="label">Cache</span>
|
||||
<span class="description" id="cache-info"
|
||||
>Stores API responses to reduce requests</span
|
||||
>
|
||||
</div>
|
||||
<button id="clear-cache-btn" class="btn-secondary">Clear Cache</button>
|
||||
<button id="customize-shortcuts-btn" class="btn-secondary">Customize</button>
|
||||
</div>
|
||||
<div class="setting-item">
|
||||
<div class="info">
|
||||
<span class="label">Cache</span>
|
||||
<span class="description" id="cache-info"
|
||||
>Stores API responses to reduce requests</span
|
||||
>
|
||||
</div>
|
||||
<div class="setting-item">
|
||||
<div class="info">
|
||||
<span class="label">Auto-Update App</span>
|
||||
<span class="description"
|
||||
>Automatically reload when a new version is available</span
|
||||
>
|
||||
</div>
|
||||
<label class="toggle-switch">
|
||||
<input type="checkbox" id="pwa-auto-update-toggle" checked />
|
||||
<span class="slider"></span>
|
||||
</label>
|
||||
<button id="clear-cache-btn" class="btn-secondary">Clear Cache</button>
|
||||
</div>
|
||||
<div class="setting-item">
|
||||
<div class="info">
|
||||
<span class="label">Auto-Update App</span>
|
||||
<span class="description"
|
||||
>Automatically reload when a new version is available</span
|
||||
>
|
||||
</div>
|
||||
<div class="setting-item">
|
||||
<div class="info">
|
||||
<span class="label">Analytics</span>
|
||||
<span class="description"
|
||||
>Send anonymous usage data to help improve the app</span
|
||||
>
|
||||
</div>
|
||||
<label class="toggle-switch">
|
||||
<input type="checkbox" id="analytics-toggle" checked />
|
||||
<span class="slider"></span>
|
||||
</label>
|
||||
<label class="toggle-switch">
|
||||
<input type="checkbox" id="pwa-auto-update-toggle" checked />
|
||||
<span class="slider"></span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="setting-item">
|
||||
<div class="info">
|
||||
<span class="label">Analytics</span>
|
||||
<span class="description">Send anonymous usage data to help improve the app</span>
|
||||
</div>
|
||||
<div class="setting-item">
|
||||
<div class="info">
|
||||
<span class="label">Reset Local Data</span>
|
||||
<span class="description"
|
||||
>Clear all local storage and cached data (does not affect cloud sync)</span
|
||||
>
|
||||
</div>
|
||||
<button id="reset-local-data-btn" class="btn-secondary danger">Reset</button>
|
||||
<label class="toggle-switch">
|
||||
<input type="checkbox" id="analytics-toggle" checked />
|
||||
<span class="slider"></span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="setting-item">
|
||||
<div class="info">
|
||||
<span class="label">Reset Local Data</span>
|
||||
<span class="description"
|
||||
>Clear all local storage and cached data (does not affect cloud sync)</span
|
||||
>
|
||||
</div>
|
||||
<div class="setting-item">
|
||||
<button id="reset-local-data-btn" class="btn-secondary danger">Reset</button>
|
||||
</div>
|
||||
<div class="setting-item">
|
||||
<div class="info">
|
||||
<span class="label">Clear Cloud Data</span>
|
||||
<span class="description"
|
||||
>Delete all your data from the cloud (cannot be undone)</span
|
||||
>
|
||||
</div>
|
||||
<button id="firebase-clear-cloud-btn" class="btn-secondary danger">
|
||||
Clear Cloud Data
|
||||
</button>
|
||||
</div>
|
||||
<div class="setting-item">
|
||||
<div class="info">
|
||||
<span class="label">Backup & Restore</span>
|
||||
<span class="description">Export or import your library and history as JSON</span>
|
||||
</div>
|
||||
<div style="display: flex; gap: 0.5rem">
|
||||
<button id="export-library-btn" class="btn-secondary">Export</button>
|
||||
<button id="import-library-btn" class="btn-secondary">Import</button>
|
||||
<input type="file" id="import-library-input" style="display: none" accept=".json" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="setting-item">
|
||||
<div class="info">
|
||||
<span class="label">Export All Settings</span>
|
||||
<span class="description">Export all app settings as JSON</span>
|
||||
</div>
|
||||
<div style="display: flex; gap: 0.5rem">
|
||||
<button id="export-settings-btn" class="btn-secondary">Export</button>
|
||||
<button id="import-settings-btn" class="btn-secondary">Import</button>
|
||||
<input
|
||||
type="file"
|
||||
id="import-settings-input"
|
||||
style="display: none"
|
||||
accept=".json"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="setting-item">
|
||||
<div class="info">
|
||||
<span class="label">ADVANCED: Custom Database/Auth</span>
|
||||
<span class="description">Configure custom PocketBase and Firebase instances</span>
|
||||
</div>
|
||||
<button id="custom-db-btn" class="btn-secondary">Configure</button>
|
||||
</div>
|
||||
<div id="api-instance-manager">
|
||||
<div class="setting-item" style="padding-bottom: 1rem; border: none">
|
||||
<div class="info">
|
||||
<span class="label">Clear Cloud Data</span>
|
||||
<span class="description"
|
||||
>Delete all your data from the cloud (cannot be undone)</span
|
||||
>
|
||||
<span class="label">API Instances</span>
|
||||
<span class="description">Manage and prioritize API instances.</span>
|
||||
</div>
|
||||
<button id="firebase-clear-cloud-btn" class="btn-secondary danger">
|
||||
Clear Cloud Data
|
||||
<button id="refresh-speed-test-btn" class="btn-secondary">
|
||||
Refresh Instance List
|
||||
</button>
|
||||
</div>
|
||||
<div class="setting-item">
|
||||
<div class="info">
|
||||
<span class="label">Backup & Restore</span>
|
||||
<span class="description"
|
||||
>Export or import your library and history as JSON</span
|
||||
>
|
||||
</div>
|
||||
<div style="display: flex; gap: 0.5rem">
|
||||
<button id="export-library-btn" class="btn-secondary">Export</button>
|
||||
<button id="import-library-btn" class="btn-secondary">Import</button>
|
||||
<input
|
||||
type="file"
|
||||
id="import-library-input"
|
||||
style="display: none"
|
||||
accept=".json"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="setting-item">
|
||||
<div class="info">
|
||||
<span class="label">Export All Settings</span>
|
||||
<span class="description"
|
||||
>Export all app settings as JSON</span
|
||||
>
|
||||
</div>
|
||||
<div style="display: flex; gap: 0.5rem">
|
||||
<button id="export-settings-btn" class="btn-secondary">Export</button>
|
||||
<button id="import-settings-btn" class="btn-secondary">Import</button>
|
||||
<input
|
||||
type="file"
|
||||
id="import-settings-input"
|
||||
style="display: none"
|
||||
accept=".json"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="setting-item">
|
||||
<div class="info">
|
||||
<span class="label">ADVANCED: Custom Database/Auth</span>
|
||||
<span class="description"
|
||||
>Configure custom PocketBase and Firebase instances</span
|
||||
>
|
||||
</div>
|
||||
<button id="custom-db-btn" class="btn-secondary">Configure</button>
|
||||
</div>
|
||||
<div id="api-instance-manager">
|
||||
<div class="setting-item" style="padding-bottom: 1rem; border: none">
|
||||
<div class="info">
|
||||
<span class="label">API Instances</span>
|
||||
<span class="description">Manage and prioritize API instances.</span>
|
||||
</div>
|
||||
<button id="refresh-speed-test-btn" class="btn-secondary">
|
||||
Refresh Instance List
|
||||
</button>
|
||||
</div>
|
||||
<ul id="api-instance-list"></ul>
|
||||
</div>
|
||||
<ul id="api-instance-list"></ul>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="setting-item"
|
||||
style="padding-bottom: 1rem; border-top: 1px solid var(--border)"
|
||||
>
|
||||
<div class="info">
|
||||
<span class="label">Blocked Content</span>
|
||||
<span class="description"
|
||||
>Manage artists, albums, and tracks you've blocked from
|
||||
recommendations</span
|
||||
>
|
||||
</div>
|
||||
<div style="display: flex; gap: 0.5rem">
|
||||
<button id="manage-blocked-btn" class="btn-secondary">Manage</button>
|
||||
<button
|
||||
id="clear-all-blocked-btn"
|
||||
class="btn-secondary danger"
|
||||
style="display: none"
|
||||
>
|
||||
Clear All
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div id="blocked-content-list" style="display: none">
|
||||
<div id="blocked-artists-section" style="margin-bottom: 1rem">
|
||||
<h4
|
||||
style="
|
||||
font-size: 0.9rem;
|
||||
margin-bottom: 0.5rem;
|
||||
color: var(--muted-foreground);
|
||||
"
|
||||
>
|
||||
Blocked Artists
|
||||
</h4>
|
||||
<ul id="blocked-artists-list" class="blocked-items-list"></ul>
|
||||
</div>
|
||||
<div id="blocked-albums-section" style="margin-bottom: 1rem">
|
||||
<h4
|
||||
style="
|
||||
font-size: 0.9rem;
|
||||
margin-bottom: 0.5rem;
|
||||
color: var(--muted-foreground);
|
||||
"
|
||||
>
|
||||
Blocked Albums
|
||||
</h4>
|
||||
<ul id="blocked-albums-list" class="blocked-items-list"></ul>
|
||||
</div>
|
||||
<div id="blocked-tracks-section" style="margin-bottom: 1rem">
|
||||
<h4
|
||||
style="
|
||||
font-size: 0.9rem;
|
||||
margin-bottom: 0.5rem;
|
||||
color: var(--muted-foreground);
|
||||
"
|
||||
>
|
||||
Blocked Tracks
|
||||
</h4>
|
||||
<ul id="blocked-tracks-list" class="blocked-items-list"></ul>
|
||||
</div>
|
||||
<div
|
||||
id="blocked-empty-message"
|
||||
style="
|
||||
text-align: center;
|
||||
padding: 1rem;
|
||||
color: var(--muted-foreground);
|
||||
display: none;
|
||||
"
|
||||
<div class="setting-item" style="padding-bottom: 1rem; border-top: 1px solid var(--border)">
|
||||
<div class="info">
|
||||
<span class="label">Blocked Content</span>
|
||||
<span class="description"
|
||||
>Manage artists, albums, and tracks you've blocked from recommendations</span
|
||||
>
|
||||
No blocked content
|
||||
</div>
|
||||
</div>
|
||||
<div style="display: flex; gap: 0.5rem">
|
||||
<button id="manage-blocked-btn" class="btn-secondary">Manage</button>
|
||||
<button
|
||||
id="clear-all-blocked-btn"
|
||||
class="btn-secondary danger"
|
||||
style="display: none"
|
||||
>
|
||||
Clear All
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div id="blocked-content-list" style="display: none">
|
||||
<div id="blocked-artists-section" style="margin-bottom: 1rem">
|
||||
<h4
|
||||
style="font-size: 0.9rem; margin-bottom: 0.5rem; color: var(--muted-foreground)"
|
||||
>
|
||||
Blocked Artists
|
||||
</h4>
|
||||
<ul id="blocked-artists-list" class="blocked-items-list"></ul>
|
||||
</div>
|
||||
<div id="blocked-albums-section" style="margin-bottom: 1rem">
|
||||
<h4
|
||||
style="font-size: 0.9rem; margin-bottom: 0.5rem; color: var(--muted-foreground)"
|
||||
>
|
||||
Blocked Albums
|
||||
</h4>
|
||||
<ul id="blocked-albums-list" class="blocked-items-list"></ul>
|
||||
</div>
|
||||
<div id="blocked-tracks-section" style="margin-bottom: 1rem">
|
||||
<h4
|
||||
style="font-size: 0.9rem; margin-bottom: 0.5rem; color: var(--muted-foreground)"
|
||||
>
|
||||
Blocked Tracks
|
||||
</h4>
|
||||
<ul id="blocked-tracks-list" class="blocked-items-list"></ul>
|
||||
</div>
|
||||
<div
|
||||
id="blocked-empty-message"
|
||||
style="
|
||||
text-align: center;
|
||||
padding: 1rem;
|
||||
color: var(--muted-foreground);
|
||||
display: none;
|
||||
"
|
||||
>
|
||||
No blocked content
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="page-about" class="page">
|
||||
<h2 class="section-title">About Monochrome</h2>
|
||||
|
|
|
|||
Loading…
Reference in a new issue