From 3415901bdb797358f4b947a31d587acef17b00d8 Mon Sep 17 00:00:00 2001
From: akane <107654710+genericness@users.noreply.github.com>
Date: Sat, 21 Mar 2026 11:35:09 -0700
Subject: [PATCH 1/4] feat(ui): add cmdk-style command palette
---
index.html | 24 +-
js/commandPalette.js | 1778 +++++++++++++++++++++++++-----------------
styles.css | 278 ++++++-
3 files changed, 1351 insertions(+), 729 deletions(-)
diff --git a/index.html b/index.html
index 68f6935..4ef6d04 100644
--- a/index.html
+++ b/index.html
@@ -1484,14 +1484,36 @@
+
+ ↑↓ navigate↵ selectesc close
diff --git a/js/commandPalette.js b/js/commandPalette.js
index 154f477..2fce066 100644
--- a/js/commandPalette.js
+++ b/js/commandPalette.js
@@ -3,6 +3,72 @@ import { db } from './db.js';
import Fuse from 'fuse.js';
import { navigate } from './router.js';
+const ICONS = {
+ search: 'No results found
';
+ this.renderGroups(groups);
+ }
+
+ searchCommands(query) {
+ const fuseResults = this.fuse.search(query).slice(0, 12);
+ const matched = fuseResults.map((r) => r.item);
+
+ if (matched.length === 0) {
+ this.renderGroups({});
return;
}
- results.forEach((result, index) => {
- const div = document.createElement('div');
- div.className = `command-result-item ${index === this.selectedIndex ? 'selected' : ''}`;
+ const groups = this.groupBy(matched, 'group');
+ this.renderGroups(groups);
+ }
- const imgHtml = result.image
- ? `
- ${imgHtml}
-
${result.name} ${result.description || ''}
-
Searching music...';
+ this.resultsContainer.appendChild(loading);
+ }
+
+ removeMusicLoading() {
+ this.resultsContainer.querySelector('[data-music-loading]')?.remove();
+ }
+
+ appendMusicGroups(musicGroups) {
+ this.removeMusicLoading();
+ this.resultsContainer.querySelectorAll('[data-music-group]').forEach((el) => el.remove());
+
+ const startIndex = this.flatItems.length;
+ let index = startIndex;
+
+ for (const [heading, items] of Object.entries(musicGroups)) {
+ const groupEl = document.createElement('div');
+ groupEl.className = 'cmdk-group';
+ groupEl.setAttribute('data-music-group', '');
+
+ const headingEl = document.createElement('div');
+ headingEl.className = 'cmdk-group-heading';
+ headingEl.textContent = heading;
+ groupEl.appendChild(headingEl);
+
+ for (const item of items) {
+ const itemEl = this.createItemElement(item, index);
+ groupEl.appendChild(itemEl);
+ this.flatItems.push(item);
+ index++;
+ }
+
+ this.resultsContainer.appendChild(groupEl);
+ }
+ }
+
+ groupBy(items, key) {
+ const groups = {};
+ for (const item of items) {
+ const group = item[key] || 'Other';
+ if (!groups[group]) groups[group] = [];
+ groups[group].push(item);
+ }
+ return groups;
+ }
+
+ renderGroups(groups) {
+ this.resultsContainer.innerHTML = '';
+ this.flatItems = [];
+ let index = 0;
+
+ const groupEntries = Object.entries(groups);
+ if (groupEntries.length === 0) {
+ const query = this.input.value.trim();
+ if (query) {
+ const empty = document.createElement('div');
+ empty.className = 'cmdk-empty';
+ empty.textContent = 'No commands found';
+ this.resultsContainer.appendChild(empty);
+ }
+ return;
+ }
+
+ for (const [heading, items] of groupEntries) {
+ const groupEl = document.createElement('div');
+ groupEl.className = 'cmdk-group';
+
+ const headingEl = document.createElement('div');
+ headingEl.className = 'cmdk-group-heading';
+ headingEl.textContent = heading;
+ groupEl.appendChild(headingEl);
+
+ for (const item of items) {
+ const itemEl = this.createItemElement(item, index);
+ groupEl.appendChild(itemEl);
+ this.flatItems.push(item);
+ index++;
+ }
+
+ this.resultsContainer.appendChild(groupEl);
+ }
+
+ this.updateSelection();
+ }
+
+ createItemElement(item, index) {
+ const el = document.createElement('div');
+ el.className = 'cmdk-item';
+ el.setAttribute('data-index', index);
+ if (index === this.selectedIndex) el.setAttribute('data-selected', 'true');
+
+ let iconHtml = '';
+ if (item.image) {
+ iconHtml = ``;
+ } else if (item.icon && ICONS[item.icon]) {
+ iconHtml = `${ICONS[item.icon]}
`;
+ }
+
+ let shortcutHtml = '';
+ if (item.shortcut) {
+ const keys = item.shortcut.split('+');
+ shortcutHtml = `${keys.map((k) => `${escapeHtml(k)} `).join('')}
`;
+ }
+
+ const descHtml = item.description
+ ? `${escapeHtml(item.description)} `
+ : '';
+
+ el.innerHTML = `${iconHtml}${escapeHtml(item.label)} ${descHtml}
${shortcutHtml}`;
+
+ el.addEventListener('click', () => {
+ this.selectedIndex = index;
+ this.executeSelected();
});
+
+ el.addEventListener('mouseenter', () => {
+ this.selectedIndex = index;
+ this.updateSelection();
+ });
+
+ return el;
}
updateSelection() {
- const items = this.resultsContainer.querySelectorAll('.command-result-item');
- items.forEach((item, index) => {
- if (index === this.selectedIndex) {
- item.classList.add('selected');
+ const items = this.resultsContainer.querySelectorAll('.cmdk-item');
+ items.forEach((item) => {
+ const idx = parseInt(item.getAttribute('data-index'));
+ if (idx === this.selectedIndex) {
+ item.setAttribute('data-selected', 'true');
item.scrollIntoView({ block: 'nearest' });
} else {
- item.classList.remove('selected');
+ item.removeAttribute('data-selected');
}
});
}
- async executeSelected() {
- const result = this.results[this.selectedIndex];
- if (result && result.action) {
- await result.action();
- if (result.type !== 'hint') {
- this.close();
- }
- } else if (result && result.type === 'command') {
- this.input.value = `>${result.name} `;
- await this.handleInput();
- }
- }
+ executeSelected() {
+ const item = this.flatItems[this.selectedIndex];
+ if (!item || !item.action) return;
- handleTheme(args) {
- if (!args) return;
- const theme = args.trim().toLowerCase();
- document.documentElement.setAttribute('data-theme', theme);
- localStorage.setItem('theme', theme);
-
- const themeOptions = document.querySelectorAll('.theme-option');
- themeOptions.forEach((opt) => {
- if (opt.dataset.theme === theme) opt.classList.add('active');
- else opt.classList.remove('active');
- });
- }
-
- async showNotification(message) {
- const { showNotification } = await import('./downloads.js');
- showNotification(message);
- }
-
- async handleQueue(args) {
- const player = window.monochromePlayer;
- const ui = window.monochromeUi;
-
- if (!player || !ui) {
- console.error('Player or UI not available for queue command');
- return;
- }
-
- if (!args || !args.trim()) {
- await this.renderResults(
- [
- { name: '>queue wipe', description: 'Clear the queue and stop playback' },
- { name: '>queue like all', description: 'Like all tracks in the current queue' },
- { name: '>queue download', description: 'Download all tracks in the current queue' },
- ].map((c) => ({
- ...c,
- type: 'command',
- action: async () => {
- this.input.value = c.name;
- await this.handleInput();
- },
- }))
- );
- return;
- }
-
- const subCommand = args.trim().toLowerCase();
-
- switch (subCommand) {
- case 'wipe':
- player.wipeQueue();
- this.showNotification('Queue wiped.');
- this.close();
- break;
- case 'like all':
- this.likeAllInQueue(player, ui);
- break;
- case 'download':
- this.downloadQueue(player, ui);
- break;
- default:
- this.showNotification(`Unknown queue command: ${subCommand}`);
- break;
- }
- }
-
- async likeAllInQueue(player, ui) {
- const queue = player.getCurrentQueue();
- if (queue.length === 0) {
- this.showNotification('Queue is empty.');
- return;
- }
-
- const { handleTrackAction } = await import('./events.js');
- const scrobbler = window.monochromeScrobbler;
-
- let likedCount = 0;
- this.showNotification('Liking all tracks in queue...');
- for (const track of queue) {
- const isLiked = await db.isFavorite('track', track.id);
- if (!isLiked) {
- await handleTrackAction('toggle-like', track, player, ui.api, ui.lyricsManager, 'track', ui, scrobbler);
- likedCount++;
- }
- }
- this.showNotification(`Liked ${likedCount} new track(s) in the queue.`);
+ item.action();
this.close();
}
- async downloadQueue(player, ui) {
- const queue = player.getCurrentQueue();
- if (queue.length === 0) {
- this.showNotification('Queue is empty.');
- return;
- }
+ renderSettingsResults(query) {
+ if (this.allSettings.length === 0) this.cacheAllSettings();
- const { downloadTracks } = await import('./downloads.js');
- const { downloadQualitySettings } = await import('./storage.js');
- const lyricsManager = ui.lyricsManager;
-
- downloadTracks(queue, ui.api, downloadQualitySettings.getQuality(), lyricsManager);
- this.close();
- }
-
- async handleNavigation(args) {
- const validPages = ['home', 'library', 'recent', 'settings', 'unreleased', 'about', 'download'];
-
- if (!args || !args.trim()) {
- await this.renderResults(
- validPages.map((p) => ({
- name: `>go ${p}`,
- description: `Navigate to ${p}`,
- action: () => {
- this.close();
- navigate(p === 'home' ? '/' : `/${p}`);
- },
- type: 'command',
- }))
- );
- return;
- }
-
- const page = args.trim().toLowerCase();
-
- if (validPages.includes(page)) {
- this.close();
- navigate(page === 'home' ? '/' : `/${page}`);
- } else {
- this.showNotification(`Unknown page: ${page}`);
- }
- }
-
- async handleSleepTimer(args) {
- if (!args || !args.trim()) {
- await this.renderResults(
- [15, 30, 45, 60, 120].map((m) => ({
- name: `>sleep ${m}`,
- description: `Set sleep timer for ${m} minutes`,
- action: () => {
- this.setSleepTimer(m);
- this.close();
- },
- type: 'command',
- }))
- );
- return;
- }
-
- const minutes = parseInt(args.trim());
- if (!isNaN(minutes) && minutes > 0) {
- this.setSleepTimer(minutes);
- this.close();
- } else {
- this.showNotification('Invalid duration');
- }
- }
-
- setSleepTimer(minutes) {
- if (window.monochromePlayer) {
- window.monochromePlayer.setSleepTimer(minutes);
- this.showNotification(`Sleep timer set for ${minutes} minutes`);
- }
- }
-
- async handleQuality(args) {
- const qualityMap = {
- low: 'LOW',
- high: 'HIGH',
- lossless: 'LOSSLESS',
- hires: 'HI_RES_LOSSLESS',
- 'hi-res': 'HI_RES_LOSSLESS',
- master: 'HI_RES_LOSSLESS',
- };
-
- const displayQualities = [
- { id: 'low', name: 'Low', code: 'LOW' },
- { id: 'high', name: 'High', code: 'HIGH' },
- { id: 'lossless', name: 'Lossless', code: 'LOSSLESS' },
- { id: 'hi-res', name: 'Hi-Res', code: 'HI_RES_LOSSLESS' },
- ];
-
- if (!args || !args.trim()) {
- const results = displayQualities.map((q) => ({
- name: `>quality ${q.id}`,
- description: `Set quality to ${q.name}`,
- action: () => {
- this.setQuality(q.code, true, true);
- this.close();
- },
- type: 'command',
- }));
-
- results.push({
- name: 'Usage: >quality [level] [-S] [-D]',
- description: '-S for Streaming only, -D for Download only',
- action: () => {},
- type: 'hint',
+ let results = this.allSettings;
+ if (query) {
+ const fuse = new Fuse(this.allSettings, {
+ keys: ['label', 'description'],
+ includeScore: true,
+ threshold: 0.4,
+ ignoreLocation: true,
});
- await this.renderResults(results);
- return;
+ results = fuse.search(query).map((r) => r.item);
}
- const parts = args.trim().split(/\s+/);
- const qualityKey = parts.find((p) => !p.startsWith('-'))?.toLowerCase();
- const flags = parts.filter((p) => p.startsWith('-')).map((f) => f.toLowerCase());
+ const items = results.map((setting) => ({
+ id: `setting-${setting.id}`,
+ group: `Settings \u2022 ${setting.tab}`,
+ icon: 'settings',
+ label: setting.label,
+ description: setting.description,
+ action: () => this.navigateToSetting(setting),
+ }));
- if (!qualityKey || !qualityMap[qualityKey]) {
- this.showNotification('Invalid quality setting');
- return;
- }
-
- const qualityCode = qualityMap[qualityKey];
- let setStreaming = true;
- let setDownload = true;
-
- if (flags.includes('-d') && !flags.includes('-s')) {
- setStreaming = false;
- } else if (flags.includes('-s') && !flags.includes('-d')) {
- setDownload = false;
- }
-
- this.setQuality(qualityCode, setStreaming, setDownload);
- this.close();
- }
-
- async setQuality(quality, setStreaming, setDownload) {
- const messages = [];
- const qualityName = this.getQualityName(quality);
-
- if (setStreaming) {
- if (window.monochromePlayer) {
- window.monochromePlayer.setQuality(quality);
- localStorage.setItem('playback-quality', quality);
- messages.push('Streaming');
-
- const streamingSelect = document.getElementById('streaming-quality-setting');
- if (streamingSelect) {
- streamingSelect.value = quality;
- }
- }
- }
-
- if (setDownload) {
- const { downloadQualitySettings } = await import('./storage.js');
- downloadQualitySettings.setQuality(quality);
- messages.push('Download');
-
- const downloadSelect = document.getElementById('download-quality-setting');
- if (downloadSelect) {
- downloadSelect.value = quality;
- }
- }
-
- if (messages.length > 0) {
- this.showNotification(`${messages.join(' & ')} quality set to ${qualityName}`);
- }
- }
-
- getQualityName(code) {
- const names = {
- LOW: 'Low',
- HIGH: 'High',
- LOSSLESS: 'Lossless',
- HI_RES_LOSSLESS: 'Hi-Res',
- };
- return names[code] || code;
- }
-
- async handleVisualizer(args) {
- if (!args || !args.trim()) {
- await this.renderResults(
- [
- { name: '>visualizer toggle', description: 'Toggle visualizer on/off', cmd: 'toggle' },
- { name: '>visualizer butterchurn', description: 'Set preset to Butterchurn', cmd: 'butterchurn' },
- { name: '>visualizer kawarp', description: 'Set preset to Kawarp', cmd: 'kawarp' },
- { name: '>visualizer lcd', description: 'Set preset to LCD', cmd: 'lcd' },
- { name: '>visualizer particles', description: 'Set preset to Particles', cmd: 'particles' },
- {
- name: '>visualizer unknown-pleasures',
- description: 'Set preset to Unknown Pleasures',
- cmd: 'unknown-pleasures',
- },
- ].map((c) => ({
- ...c,
- action: () => {
- if (c.cmd === 'toggle') {
- this.toggleVisualizer();
- } else {
- this.setVisualizerPreset(c.cmd);
- }
- this.close();
- },
- type: 'command',
- }))
- );
- return;
- }
-
- const subCmd = args.trim().toLowerCase();
- if (subCmd === 'toggle') {
- this.toggleVisualizer();
- this.close();
- } else {
- const presets = ['butterchurn', 'kawarp', 'lcd', 'particles', 'unknown-pleasures'];
- if (presets.includes(subCmd)) {
- this.setVisualizerPreset(subCmd);
- this.close();
- } else {
- this.showNotification('Unknown visualizer command');
- }
- }
- }
-
- async toggleVisualizer() {
- const { visualizerSettings } = await import('./storage.js');
- const current = visualizerSettings.isEnabled();
- visualizerSettings.setEnabled(!current);
- this.showNotification(`Visualizer ${!current ? 'enabled' : 'disabled'}`);
-
- const overlay = document.getElementById('fullscreen-cover-overlay');
- if (overlay && getComputedStyle(overlay).display !== 'none') {
- window.monochromeUi?.closeFullscreenCover();
- }
- }
-
- async setVisualizerPreset(preset) {
- const { visualizerSettings } = await import('./storage.js');
- visualizerSettings.setPreset(preset);
- if (window.monochromeUi?.visualizer) {
- window.monochromeUi.visualizer.setPreset(preset);
- }
- this.showNotification(`Visualizer preset set to ${preset}`);
- }
-
- async handleClearCache() {
- const api = window.monochromeUi?.api;
- if (api) {
- await api.clearCache();
- this.showNotification('Cache cleared');
- this.close();
- }
+ const groups = this.groupBy(items, 'group');
+ this.renderGroups(groups);
}
cacheAllSettings() {
@@ -617,62 +1076,11 @@ class CommandPalette {
: `setting-item-${Math.random().toString(36).substr(2, 9)}`;
}
- return {
- id: item.id,
- label,
- description,
- tab,
- };
+ return { id: item.id, label, description, tab };
})
.filter((s) => s.label);
}
- async handleSettingSearch(args, autoPick = false) {
- const query = args.trim().toLowerCase();
-
- if (!query) {
- await this.renderResults(
- this.allSettings.map((setting) => ({
- name: setting.label,
- description: `[${setting.tab}] ${setting.description}`,
- action: () => {
- this.navigateToSetting(setting);
- this.close();
- },
- type: 'setting',
- }))
- );
- return;
- }
-
- const fuse = new Fuse(this.allSettings, {
- keys: ['label', 'description'],
- includeScore: true,
- threshold: 0.4,
- ignoreLocation: true,
- });
-
- const results = fuse.search(query).map((r) => r.item);
-
- if (autoPick && results.length > 0) {
- this.navigateToSetting(results[0]);
- this.close();
- return;
- }
-
- await this.renderResults(
- results.map((setting) => ({
- name: setting.label,
- description: `[${setting.tab}] ${setting.description}`,
- action: () => {
- this.navigateToSetting(setting);
- this.close();
- },
- type: 'setting',
- }))
- );
- }
-
async navigateToSetting(setting) {
navigate('/settings');
@@ -698,166 +1106,130 @@ class CommandPalette {
}
}
- async performSearch(cmdName, query) {
- if (!this.isOpen) return;
+ setTheme(theme) {
+ document.documentElement.setAttribute('data-theme', theme);
+ localStorage.setItem('theme', theme);
+ const themeOptions = document.querySelectorAll('.theme-option');
+ themeOptions.forEach((opt) => {
+ if (opt.dataset.theme === theme) opt.classList.add('active');
+ else opt.classList.remove('active');
+ });
+ this.notify(`Theme set to ${theme}`);
+ }
- const api = window.monochromeUi?.api;
- if (!api) return;
+ async toggleVisualizer() {
+ const { visualizerSettings } = await import('./storage.js');
+ const current = visualizerSettings.isEnabled();
+ visualizerSettings.setEnabled(!current);
+ this.notify(`Visualizer ${!current ? 'enabled' : 'disabled'}`);
- let results = [];
-
- try {
- if (cmdName === 'play') {
- const data = await api.searchTracks(query);
- results = data.items.map((track) => ({
- name: track.title,
- description: `${track.artist?.name || 'Unknown'} • ${track.album?.title || 'Unknown'}`,
- image: api.getCoverUrl(track.album?.cover, 80),
- action: async () => {
- window.monochromePlayer.setQueue([track], 0);
- await window.monochromePlayer.playTrackFromQueue();
- this.close();
- },
- type: 'result',
- }));
- } else if (cmdName === 'shuffle') {
- const [albums, artists, playlists, userPlaylists] = await Promise.all([
- api.searchAlbums(query),
- api.searchArtists(query),
- api.searchPlaylists(query),
- db.getPlaylists(true),
- ]);
-
- let matchedUserPlaylists = [];
- if (Fuse) {
- const fuse = new Fuse(userPlaylists, { keys: ['name'] });
- matchedUserPlaylists = fuse.search(query).map((r) => r.item);
- } else {
- matchedUserPlaylists = userPlaylists.filter((p) =>
- p.name.toLowerCase().includes(query.toLowerCase())
- );
- }
-
- const formatResult = (item, type, subtitle, image) => ({
- name: item.title || item.name,
- description: `${type} • ${subtitle}`,
- image: image,
- action: () => this.playCollection(item, type, true),
- type: 'result',
- });
-
- results = [
- ...matchedUserPlaylists.map((p) =>
- formatResult(
- p,
- 'User Playlist',
- `${p.tracks?.length || 0} tracks`,
- p.cover || (p.images && p.images[0])
- )
- ),
- ...artists.items.map((a) =>
- formatResult(a, 'Artist', 'Artist', api.getArtistPictureUrl(a.picture, 80))
- ),
- ...albums.items.map((a) => formatResult(a, 'Album', a.artist?.name, api.getCoverUrl(a.cover, 80))),
- ...playlists.items.map((p) =>
- formatResult(p, 'Playlist', p.creator?.name || 'Tidal', api.getCoverUrl(p.image, 80))
- ),
- ];
- }
- } catch (e) {
- console.error('Command palette search error:', e);
- }
-
- if (this.isOpen && results.length > 0) {
- await this.renderResults(results);
+ const overlay = document.getElementById('fullscreen-cover-overlay');
+ if (overlay && getComputedStyle(overlay).display !== 'none') {
+ window.monochromeUi?.closeFullscreenCover();
}
}
- async handlePlay(args, autoPick) {
- if (!args) return;
+ async setVisualizerPreset(preset) {
+ const { visualizerSettings } = await import('./storage.js');
+ visualizerSettings.setPreset(preset);
+ if (window.monochromeUi?.visualizer) {
+ window.monochromeUi.visualizer.setPreset(preset);
+ }
+ this.notify(`Visualizer preset: ${preset}`);
+ }
- if (autoPick) {
- const api = window.monochromeUi?.api;
- const results = await api.searchTracks(args);
- if (results.items.length > 0) {
- const track = results.items[0];
- window.monochromePlayer.setQueue([track], 0);
- await window.monochromePlayer.playTrackFromQueue();
- this.close();
- }
+ async setQuality(quality) {
+ const qualityNames = { LOW: 'Low', HIGH: 'High', LOSSLESS: 'Lossless', HI_RES_LOSSLESS: 'Hi-Res' };
+
+ if (window.monochromePlayer) {
+ window.monochromePlayer.setQuality(quality);
+ localStorage.setItem('playback-quality', quality);
+ const streamingSelect = document.getElementById('streaming-quality-setting');
+ if (streamingSelect) streamingSelect.value = quality;
+ }
+
+ const { downloadQualitySettings } = await import('./storage.js');
+ downloadQualitySettings.setQuality(quality);
+ const downloadSelect = document.getElementById('download-quality-setting');
+ if (downloadSelect) downloadSelect.value = quality;
+
+ this.notify(`Quality set to ${qualityNames[quality] || quality}`);
+ }
+
+ setSleepTimer(minutes) {
+ if (window.monochromePlayer) {
+ window.monochromePlayer.setSleepTimer(minutes);
+ this.notify(`Sleep timer: ${minutes} minutes`);
}
}
- async handleShuffle(args, autoPick) {
- if (!args) return;
-
- if (autoPick) {
- this.performSearch('shuffle', args).then(() => {
- if (this.results.length > 0 && this.results[0].action) {
- this.results[0].action();
- }
- });
- }
- }
-
- async playCollection(item, type, shuffle) {
+ async likeAllInQueue() {
const player = window.monochromePlayer;
- const api = window.monochromeUi.api;
- let tracks = [];
+ const ui = window.monochromeUi;
+ if (!player || !ui) return;
- try {
- if (type === 'User Playlist') {
- tracks = item.tracks;
- } else if (type === 'Artist') {
- const artist = await api.getArtist(item.id);
- const allReleases = [...(artist.albums || []), ...(artist.eps || [])];
- const trackSet = new Set();
- const allTracks = [];
-
- const chunkSize = 8;
- for (let i = 0; i < allReleases.length; i += chunkSize) {
- const chunk = allReleases.slice(i, i + chunkSize);
- await Promise.all(
- chunk.map(async (album) => {
- try {
- const { tracks: albumTracks } = await api.getAlbum(album.id);
- albumTracks.forEach((track) => {
- if (!trackSet.has(track.id)) {
- trackSet.add(track.id);
- allTracks.push(track);
- }
- });
- } catch (err) {
- console.warn(`Failed to fetch tracks for album ${album.title}:`, err);
- }
- })
- );
- }
-
- if (allTracks.length > 0) {
- tracks = allTracks;
- } else {
- tracks = artist.tracks || [];
- }
- } else if (type === 'Album') {
- tracks = (await api.getAlbum(item.id)).tracks;
- } else if (type === 'Playlist') {
- tracks = (await api.getPlaylist(item.uuid)).tracks;
- }
-
- if (tracks && tracks.length > 0) {
- if (shuffle) {
- tracks = [...tracks].sort(() => Math.random() - 0.5);
- player.shuffleActive = true;
- document.getElementById('shuffle-btn')?.classList.add('active');
- }
- player.setQueue(tracks, 0);
- player.playTrackFromQueue();
- this.close();
- }
- } catch (e) {
- console.error('Failed to play collection:', e);
+ const queue = player.getCurrentQueue();
+ if (queue.length === 0) {
+ this.notify('Queue is empty');
+ return;
}
+
+ const { handleTrackAction } = await import('./events.js');
+ const scrobbler = window.monochromeScrobbler;
+
+ let likedCount = 0;
+ this.notify('Liking all tracks in queue...');
+ for (const track of queue) {
+ const isLiked = await db.isFavorite('track', track.id);
+ if (!isLiked) {
+ await handleTrackAction('toggle-like', track, player, ui.api, ui.lyricsManager, 'track', ui, scrobbler);
+ likedCount++;
+ }
+ }
+ this.notify(`Liked ${likedCount} new track(s)`);
+ }
+
+ async downloadQueue() {
+ const player = window.monochromePlayer;
+ const ui = window.monochromeUi;
+ if (!player || !ui) return;
+
+ const queue = player.getCurrentQueue();
+ if (queue.length === 0) {
+ this.notify('Queue is empty');
+ return;
+ }
+
+ const { downloadTracks } = await import('./downloads.js');
+ const { downloadQualitySettings } = await import('./storage.js');
+ downloadTracks(queue, ui.api, downloadQualitySettings.getQuality(), ui.lyricsManager);
+ }
+
+ async createPlaylist() {
+ const name = `New Playlist ${new Date().toLocaleDateString()}`;
+ await db.createPlaylist(name);
+ navigate('/library');
+ this.notify('Playlist created');
+ }
+
+ async createFolder() {
+ const name = `New Folder ${new Date().toLocaleDateString()}`;
+ await db.createFolder(name);
+ navigate('/library');
+ this.notify('Folder created');
+ }
+
+ async clearCache() {
+ const api = window.monochromeUi?.api;
+ if (api) {
+ await api.clearCache();
+ this.notify('Cache cleared');
+ }
+ }
+
+ async notify(message) {
+ const { showNotification } = await import('./downloads.js');
+ showNotification(message);
}
}
diff --git a/styles.css b/styles.css
index c50347c..95d3844 100644
--- a/styles.css
+++ b/styles.css
@@ -8381,69 +8381,297 @@ body:has(#side-panel.active) #close-fullscreen-cover-btn {
#command-palette-overlay {
position: fixed;
inset: 0;
- background: rgb(0, 0, 0, 0.5);
- backdrop-filter: blur(4px);
+ background: rgb(0 0 0 / 60%);
+ backdrop-filter: blur(8px);
z-index: 10000;
display: flex;
justify-content: center;
align-items: flex-start;
- padding-top: 10vh;
- animation: fade-in 0.2s ease-out;
+ padding-top: min(10vh, 120px);
+ animation: cmdk-overlay-in 150ms ease-out;
+}
+
+@keyframes cmdk-overlay-in {
+ from {
+ opacity: 0;
+ }
+
+ to {
+ opacity: 1;
+ }
+}
+
+@keyframes cmdk-scale-in {
+ from {
+ opacity: 0;
+ transform: scale(0.96);
+ }
+
+ to {
+ opacity: 1;
+ transform: scale(1);
+ }
}
.command-palette {
width: 100%;
- max-width: 600px;
+ max-width: 640px;
+ margin: 0 1rem;
background: var(--card);
border: 1px solid var(--border);
border-radius: 16px;
- box-shadow: var(--shadow-2xl);
+ box-shadow:
+ 0 16px 70px rgb(0 0 0 / 50%),
+ 0 0 0 1px rgb(255 255 255 / 5%) inset;
display: flex;
flex-direction: column;
overflow: hidden;
- max-height: 60vh;
+ max-height: min(60vh, 480px);
+ animation: cmdk-scale-in 150ms ease-out;
}
.command-palette-header {
- padding: 1.25rem 1.5rem;
+ display: flex;
+ align-items: center;
+ gap: 12px;
+ padding: 14px 16px;
border-bottom: 1px solid var(--border);
}
+.command-palette-search-icon {
+ flex-shrink: 0;
+ color: var(--muted-foreground);
+}
+
#command-palette-input {
- width: 100%;
+ flex: 1;
+ min-width: 0;
background: transparent;
border: none;
- font-size: 1.2rem;
- font-weight: 500;
+ font-size: 1rem;
+ font-weight: 400;
color: var(--foreground);
outline: none;
}
-.command-palette-results {
- overflow-y: auto;
- padding: 0.5rem;
+#command-palette-input::placeholder {
+ color: var(--muted-foreground);
}
-.command-result-item {
- padding: 0.75rem 1rem;
- border-radius: var(--radius);
- cursor: pointer;
- display: flex;
- justify-content: space-between;
+.command-palette-kbd {
+ flex-shrink: 0;
+ display: inline-flex;
align-items: center;
- color: var(--foreground);
+ justify-content: center;
+ padding: 2px 6px;
+ font-size: 11px;
+ font-family: inherit;
+ font-weight: 500;
+ color: var(--muted-foreground);
+ background: var(--secondary);
+ border: 1px solid var(--border);
+ border-radius: 6px;
+ line-height: 1.4;
}
-.command-result-item:hover,
-.command-result-item.selected {
+.command-palette-results {
+ flex: 1;
+ overflow-y: auto;
+ overscroll-behavior: contain;
+ padding: 6px 8px;
+}
+
+.cmdk-group + .cmdk-group {
+ margin-top: 4px;
+}
+
+.cmdk-group-heading {
+ padding: 6px 10px 4px;
+ font-size: 11px;
+ font-weight: 600;
+ color: var(--muted-foreground);
+ text-transform: uppercase;
+ letter-spacing: 0.04em;
+ user-select: none;
+}
+
+.cmdk-item {
+ display: flex;
+ align-items: center;
+ gap: 10px;
+ padding: 8px 10px;
+ border-radius: var(--radius, 8px);
+ cursor: pointer;
+ font-size: 0.875rem;
+ color: var(--foreground);
+ transition: background 80ms ease;
+ user-select: none;
+ position: relative;
+}
+
+.cmdk-item:hover {
background: var(--secondary);
}
-.command-result-desc {
- font-size: 0.85rem;
+.cmdk-item[data-selected='true'] {
+ background: var(--secondary);
+}
+
+.cmdk-item-icon {
+ flex-shrink: 0;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ min-width: 20px;
+ min-height: 20px;
color: var(--muted-foreground);
}
+.cmdk-item-icon img {
+ width: 28px;
+ height: 28px;
+ border-radius: 4px;
+ object-fit: cover;
+ aspect-ratio: 1 / 1;
+}
+
+.cmdk-item-content {
+ flex: 1;
+ min-width: 0;
+ display: flex;
+ flex-direction: column;
+ gap: 1px;
+}
+
+.cmdk-item-label {
+ font-weight: 500;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
+.cmdk-item-description {
+ font-size: 0.75rem;
+ color: var(--muted-foreground);
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
+.cmdk-item-shortcut {
+ flex-shrink: 0;
+ display: flex;
+ align-items: center;
+ gap: 4px;
+ margin-left: auto;
+}
+
+.cmdk-item-shortcut kbd {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ min-width: 20px;
+ height: 20px;
+ padding: 0 5px;
+ font-size: 10px;
+ font-family: inherit;
+ font-weight: 500;
+ color: var(--muted-foreground);
+ background: var(--secondary);
+ border: 1px solid var(--border);
+ border-radius: 4px;
+ line-height: 1;
+}
+
+.cmdk-empty {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ height: 64px;
+ color: var(--muted-foreground);
+ font-size: 0.875rem;
+}
+
+.cmdk-loading {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ gap: 8px;
+ padding: 12px;
+ color: var(--muted-foreground);
+ font-size: 0.8rem;
+}
+
+.cmdk-loading-spinner {
+ width: 14px;
+ height: 14px;
+ border: 2px solid var(--border);
+ border-top-color: var(--foreground);
+ border-radius: 50%;
+ animation: cmdk-spin 600ms linear infinite;
+}
+
+@keyframes cmdk-spin {
+ to {
+ transform: rotate(360deg);
+ }
+}
+
+.cmdk-separator {
+ height: 1px;
+ background: var(--border);
+ margin: 4px 8px;
+}
+
+.command-palette-footer {
+ display: flex;
+ align-items: center;
+ gap: 16px;
+ padding: 8px 16px;
+ border-top: 1px solid var(--border);
+ font-size: 0.7rem;
+ color: var(--muted-foreground);
+}
+
+.command-palette-hint {
+ display: flex;
+ align-items: center;
+ gap: 4px;
+}
+
+.command-palette-hint kbd {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ padding: 1px 4px;
+ font-size: 10px;
+ font-family: inherit;
+ font-weight: 500;
+ color: var(--muted-foreground);
+ background: var(--secondary);
+ border: 1px solid var(--border);
+ border-radius: 4px;
+}
+
+@media (width <= 640px) {
+ #command-palette-overlay {
+ padding-top: 0;
+ align-items: flex-start;
+ }
+
+ .command-palette {
+ max-width: 100%;
+ max-height: 100dvh;
+ margin: 0;
+ border-radius: 0;
+ border: none;
+ }
+
+ .command-palette-footer {
+ display: none;
+ }
+}
+
.video-card .card-image-container {
aspect-ratio: 16 / 9 !important;
margin-bottom: var(--spacing-sm);
From d75f0e3196d318e2852e6987feed5379ce4799fb Mon Sep 17 00:00:00 2001
From: akane <107654710+genericness@users.noreply.github.com>
Date: Sat, 21 Mar 2026 11:53:16 -0700
Subject: [PATCH 2/4] refactor(ui): use icons.ts for command palette icons
---
js/commandPalette.js | 162 +++++++++++++++++++++++++------------------
js/icons.ts | 31 +++++++++
2 files changed, 125 insertions(+), 68 deletions(-)
diff --git a/js/commandPalette.js b/js/commandPalette.js
index 2fce066..5ea9dd5 100644
--- a/js/commandPalette.js
+++ b/js/commandPalette.js
@@ -2,65 +2,92 @@ import { debounce } from './utils.js';
import { db } from './db.js';
import Fuse from 'fuse.js';
import { navigate } from './router.js';
+import {
+ SVG_SEARCH,
+ SVG_HOUSE,
+ SVG_LIBRARY,
+ SVG_CLOCK,
+ SVG_CALENDAR,
+ SVG_SETTINGS,
+ SVG_INFO,
+ SVG_DOWNLOAD,
+ SVG_HAND_HEART,
+ SVG_PLAY,
+ SVG_SKIP_FORWARD,
+ SVG_SKIP_BACK,
+ SVG_SHUFFLE,
+ SVG_REPEAT,
+ SVG_MUTE,
+ SVG_VOLUME_1,
+ SVG_HEART,
+ SVG_LIST,
+ SVG_TRASH,
+ SVG_ALIGN_LEFT,
+ SVG_MAXIMIZE,
+ SVG_SPARKLES,
+ SVG_MONITOR,
+ SVG_MOON,
+ SVG_SUN,
+ SVG_PALETTE,
+ SVG_STORE,
+ SVG_SLIDERS,
+ SVG_PLUS,
+ SVG_FOLDER_PLUS,
+ SVG_KEYBOARD,
+ SVG_UPLOAD,
+ SVG_USER,
+ SVG_PENCIL,
+ SVG_LOG_OUT,
+ SVG_LOG_IN,
+ SVG_MUSIC,
+ SVG_DISC,
+ SVG_MIC,
+ SVG_RADIO,
+} from './icons.js';
+
+const ICON_SIZE = 16;
const ICONS = {
- search: '${ICONS[item.icon]}
`;
+ iconHtml = `${ICONS[item.icon](ICON_SIZE)}
`;
}
let shortcutHtml = '';
diff --git a/js/icons.ts b/js/icons.ts
index 0c6d5e3..29ba9ee 100644
--- a/js/icons.ts
+++ b/js/icons.ts
@@ -1,45 +1,76 @@
+export { default as SVG_ALIGN_LEFT } from '!lucide/align-left.svg?svg&icon';
export { default as SVG_ANIMATE_SPIN } from '../images/animate-spin.svg?svg&icon';
export { default as SVG_APPLE } from '../images/apple.svg?svg&icon';
export { default as SVG_BIN } from '!lucide/trash-2.svg?svg&icon';
+export { default as SVG_CALENDAR } from '!lucide/calendar.svg?svg&icon';
export { default as SVG_CHECK } from '!lucide/check.svg?svg&icon';
export { default as SVG_CHECKBOX } from '!lucide/square.svg?svg&icon';
export { default as SVG_CHECKBOX_CHECKED } from '!lucide/check-square.svg?svg&icon';
export { default as SVG_CLOCK } from '!lucide/clock.svg?svg&icon';
export { default as SVG_CLOSE } from '!lucide/x.svg?svg&icon';
+export { default as SVG_DISC } from '!lucide/disc.svg?svg&icon';
export { default as SVG_DOWNLOAD } from '!lucide/download.svg?svg&icon';
export { default as SVG_EQUAL } from '!lucide/equal.svg?svg&icon';
export { default as SVG_FACEBOOK } from '../images/facebook.svg?svg&icon';
+export { default as SVG_FOLDER_PLUS } from '!lucide/folder-plus.svg?svg&icon';
export { default as SVG_GENIUS_ACTIVE } from '../images/genius-active.svg?svg&icon';
export { default as SVG_GENIUS_INACTIVE } from '../images/genius-inactive.svg?svg&icon';
export { default as SVG_GLOBE } from '!lucide/globe.svg?svg&icon';
+export { default as SVG_HAND_HEART } from '!lucide/hand-heart.svg?svg&icon';
export { default as SVG_HEART } from '!lucide/heart.svg?svg&icon&class=heart-icon';
export { default as SVG_HEART_FILLED } from '!lucide/heart.svg?svg&icon&class=heart-icon+filled';
+export { default as SVG_HOUSE } from '!lucide/house.svg?svg&icon';
+export { default as SVG_INFO } from '!lucide/info.svg?svg&icon';
export { default as SVG_INSTAGRAM } from '../images/instagram.svg?svg&icon';
+export { default as SVG_KEYBOARD } from '!lucide/keyboard.svg?svg&icon';
export { default as SVG_LEFT_ARROW } from '!lucide/chevron-left.svg?svg&icon';
+export { default as SVG_LIBRARY } from '!lucide/library.svg?svg&icon';
export { default as SVG_LINK } from '!lucide/link.svg?svg&icon';
+export { default as SVG_LIST } from '!lucide/list.svg?svg&icon';
+export { default as SVG_LOG_IN } from '!lucide/log-in.svg?svg&icon';
+export { default as SVG_LOG_OUT } from '!lucide/log-out.svg?svg&icon';
+export { default as SVG_MAXIMIZE } from '!lucide/maximize.svg?svg&icon';
export { default as SVG_MENU } from '!lucide/ellipsis-vertical.svg?svg&icon';
+export { default as SVG_MIC } from '!lucide/mic.svg?svg&icon';
export { default as SVG_MINUS } from '!lucide/minus.svg?svg&icon';
export { default as SVG_MIX } from '../images/mix.svg?svg&icon';
+export { default as SVG_MONITOR } from '!lucide/monitor.svg?svg&icon';
+export { default as SVG_MOON } from '!lucide/moon.svg?svg&icon';
export { default as SVG_MOVE_DOWN } from '!lucide/move-down.svg?svg&icon';
export { default as SVG_MOVE_UP } from '!lucide/move-up.svg?svg&icon';
+export { default as SVG_MUSIC } from '!lucide/music.svg?svg&icon';
export { default as SVG_MUTE } from '!lucide/volume-x.svg?svg&icon';
export { default as SVG_OFFLINE } from '!lucide/triangle-alert.svg?svg&icon';
+export { default as SVG_PALETTE } from '!lucide/palette.svg?svg&icon';
export { default as SVG_PAUSE } from '../images/pause.svg?svg&icon';
export { default as SVG_PAUSE_LARGE } from '../images/pause-large.svg?svg&icon';
+export { default as SVG_PENCIL } from '!lucide/pencil.svg?svg&icon';
export { default as SVG_PLAY } from '../images/play.svg?svg&icon';
export { default as SVG_PLAY_LARGE } from '../images/play-large.svg?svg&icon';
export { default as SVG_PLUS } from '!lucide/plus.svg?svg&icon';
+export { default as SVG_RADIO } from '!lucide/radio.svg?svg&icon';
export { default as SVG_REPEAT } from '!lucide/repeat.svg?svg&icon';
export { default as SVG_REPEAT_ONE } from '!lucide/repeat-1.svg?svg&icon';
export { default as SVG_RESET } from '!lucide/rotate-ccw.svg?svg&icon';
export { default as SVG_RIGHT_ARROW } from '!lucide/chevron-right.svg?svg&icon';
+export { default as SVG_SEARCH } from '!lucide/search.svg?svg&icon';
+export { default as SVG_SETTINGS } from '!lucide/settings.svg?svg&icon';
export { default as SVG_SHARE } from '!lucide/share.svg?svg&icon';
export { default as SVG_SHUFFLE } from '!lucide/shuffle.svg?svg&icon';
+export { default as SVG_SKIP_BACK } from '!lucide/skip-back.svg?svg&icon';
+export { default as SVG_SKIP_FORWARD } from '!lucide/skip-forward.svg?svg&icon';
+export { default as SVG_SLIDERS } from '!lucide/sliders-horizontal.svg?svg&icon';
export { default as SVG_SORT } from '../images/sort.svg?svg&icon';
export { default as SVG_SOUNDCLOUD } from '../images/soundcloud.svg?svg&icon';
+export { default as SVG_SPARKLES } from '!lucide/sparkles.svg?svg&icon';
export { default as SVG_SQUARE_PEN } from '!lucide/square-pen.svg?svg&icon';
+export { default as SVG_STORE } from '!lucide/store.svg?svg&icon';
+export { default as SVG_SUN } from '!lucide/sun.svg?svg&icon';
export { default as SVG_TRASH } from '!lucide/trash.svg?svg&icon';
export { default as SVG_TWITTER } from '../images/twitter.svg?svg&icon';
+export { default as SVG_UPLOAD } from '!lucide/upload.svg?svg&icon';
+export { default as SVG_USER } from '!lucide/user.svg?svg&icon';
export { default as SVG_VIDEO } from '!lucide/video.svg?svg&icon';
export { default as SVG_VOLUME } from '!lucide/volume-2.svg?svg&icon';
+export { default as SVG_VOLUME_1 } from '!lucide/volume-1.svg?svg&icon';
export { default as SVG_YOUTUBE } from '../images/youtube.svg?svg&icon';
From 7e56fc50301c441540941491ab4657976099d7fa Mon Sep 17 00:00:00 2001
From: akane <107654710+genericness@users.noreply.github.com>
Date: Sat, 21 Mar 2026 11:56:34 -0700
Subject: [PATCH 3/4] fix(ui): command palette accessibility, theme handling,
and edge cases
---
index.html | 7 ++++++-
js/commandPalette.js | 31 ++++++++++++++++++++++++++-----
styles.css | 1 +
3 files changed, 33 insertions(+), 6 deletions(-)
diff --git a/index.html b/index.html
index 4ef6d04..9af8e98 100644
--- a/index.html
+++ b/index.html
@@ -1505,10 +1505,15 @@
placeholder="Search commands, music, settings..."
autocomplete="off"
spellcheck="false"
+ aria-label="Command palette search"
+ role="combobox"
+ aria-expanded="true"
+ aria-controls="command-palette-results"
+ aria-autocomplete="list"
/>
ESC
-
+
↑↓ navigate↵ select