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] 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: '', - house: '', - library: - '', - clock: '', - calendar: - '', - settings: - '', - info: '', - download: - '', - heart: '', - play: '', - pause: '', - skipForward: - '', - skipBack: - '', - shuffle: - '', - repeat: '', - volumeX: - '', - volume: '', - list: '', - trash: '', - text: '', - maximize: - '', - sparkles: - '', - palette: - '', - sun: '', - moon: '', - sliders: - '', - plus: '', - folderPlus: - '', - user: '', - logOut: '', - logIn: '', - keyboard: - '', - music: '', - disc: '', - mic: '', - upload: '', - handHeart: - '', - monitor: - '', - pencil: '', - radio: '', - store: '', + search: SVG_SEARCH, + house: SVG_HOUSE, + library: SVG_LIBRARY, + clock: SVG_CLOCK, + calendar: SVG_CALENDAR, + settings: SVG_SETTINGS, + info: SVG_INFO, + download: SVG_DOWNLOAD, + handHeart: SVG_HAND_HEART, + play: SVG_PLAY, + skipForward: SVG_SKIP_FORWARD, + skipBack: SVG_SKIP_BACK, + shuffle: SVG_SHUFFLE, + repeat: SVG_REPEAT, + volumeX: SVG_MUTE, + volume: SVG_VOLUME_1, + heart: SVG_HEART, + list: SVG_LIST, + trash: SVG_TRASH, + text: SVG_ALIGN_LEFT, + maximize: SVG_MAXIMIZE, + sparkles: SVG_SPARKLES, + monitor: SVG_MONITOR, + moon: SVG_MOON, + sun: SVG_SUN, + palette: SVG_PALETTE, + store: SVG_STORE, + sliders: SVG_SLIDERS, + plus: SVG_PLUS, + folderPlus: SVG_FOLDER_PLUS, + keyboard: SVG_KEYBOARD, + upload: SVG_UPLOAD, + user: SVG_USER, + pencil: SVG_PENCIL, + logOut: SVG_LOG_OUT, + logIn: SVG_LOG_IN, + music: SVG_MUSIC, + disc: SVG_DISC, + mic: SVG_MIC, + radio: SVG_RADIO, }; function escapeHtml(str) { @@ -196,7 +223,7 @@ class CommandPalette { icon: 'skipForward', label: 'Next Track', keywords: ['next', 'skip', 'forward'], - shortcut: 'Shift+→', + shortcut: 'Shift+\u2192', action: () => { window.monochromePlayer?.playNext(); }, @@ -207,7 +234,7 @@ class CommandPalette { icon: 'skipBack', label: 'Previous Track', keywords: ['previous', 'back', 'rewind'], - shortcut: 'Shift+←', + shortcut: 'Shift+\u2190', action: () => { window.monochromePlayer?.playPrev(); }, @@ -252,7 +279,7 @@ class CommandPalette { icon: 'volume', label: 'Volume Up', keywords: ['volume', 'louder'], - shortcut: '↑', + shortcut: '\u2191', action: () => { const p = window.monochromePlayer; if (p) p.setVolume(p.userVolume + 0.1); @@ -264,7 +291,7 @@ class CommandPalette { icon: 'volume', label: 'Volume Down', keywords: ['volume', 'quieter', 'softer'], - shortcut: '↓', + shortcut: '\u2193', action: () => { const p = window.monochromePlayer; if (p) p.setVolume(p.userVolume - 0.1); @@ -478,7 +505,7 @@ class CommandPalette { id: 'theme-frappe', group: 'Theme', icon: 'palette', - label: 'Theme: Frappé', + label: 'Theme: Frapp\u00e9', keywords: ['theme', 'frappe', 'catppuccin'], action: () => this.setTheme('frappe'), }, @@ -823,7 +850,7 @@ class CommandPalette { musicGroups['Tracks'] = tracks.items.map((track) => ({ id: `track-${track.id}`, group: 'Tracks', - icon: null, + icon: 'music', image: api.getCoverUrl(track.album?.cover, 80), label: track.title, description: `${track.artist?.name || 'Unknown'} \u2022 ${track.album?.title || ''}`, @@ -838,7 +865,7 @@ class CommandPalette { musicGroups['Albums'] = albums.items.map((album) => ({ id: `album-${album.id}`, group: 'Albums', - icon: null, + icon: 'disc', image: api.getCoverUrl(album.cover, 80), label: album.title, description: album.artist?.name || 'Unknown', @@ -852,7 +879,7 @@ class CommandPalette { musicGroups['Artists'] = artists.items.map((artist) => ({ id: `artist-${artist.id}`, group: 'Artists', - icon: null, + icon: 'mic', image: api.getArtistPictureUrl(artist.picture, 80), label: artist.name, description: 'Artist', @@ -898,8 +925,7 @@ class CommandPalette { this.removeMusicLoading(); this.resultsContainer.querySelectorAll('[data-music-group]').forEach((el) => el.remove()); - const startIndex = this.flatItems.length; - let index = startIndex; + let index = this.flatItems.length; for (const [heading, items] of Object.entries(musicGroups)) { const groupEl = document.createElement('div'); @@ -981,7 +1007,7 @@ class CommandPalette { if (item.image) { iconHtml = `
`; } else if (item.icon && ICONS[item.icon]) { - iconHtml = `
${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';