refactor(ui): use icons.ts for command palette icons
This commit is contained in:
akane
parent
3415901bdb
commit
d75f0e3196
2 changed files with 125 additions and 68 deletions
|
|
@ -2,65 +2,92 @@ import { debounce } from './utils.js';
|
||||||
import { db } from './db.js';
|
import { db } from './db.js';
|
||||||
import Fuse from 'fuse.js';
|
import Fuse from 'fuse.js';
|
||||||
import { navigate } from './router.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 = {
|
const ICONS = {
|
||||||
search: '<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"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>',
|
search: SVG_SEARCH,
|
||||||
house: '<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 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8"/><path d="M3 10a2 2 0 0 1 .709-1.528l7-5.999a2 2 0 0 1 2.582 0l7 5.999A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/></svg>',
|
house: SVG_HOUSE,
|
||||||
library:
|
library: SVG_LIBRARY,
|
||||||
'<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="m16 6 4 14"/><path d="M12 6v14"/><path d="M8 8v12"/><path d="M4 4v16"/></svg>',
|
clock: SVG_CLOCK,
|
||||||
clock: '<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"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>',
|
calendar: SVG_CALENDAR,
|
||||||
calendar:
|
settings: SVG_SETTINGS,
|
||||||
'<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="M8 2v4"/><path d="M16 2v4"/><rect width="18" height="18" x="3" y="4" rx="2"/><path d="M3 10h18"/></svg>',
|
info: SVG_INFO,
|
||||||
settings:
|
download: SVG_DOWNLOAD,
|
||||||
'<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="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/><circle cx="12" cy="12" r="3"/></svg>',
|
handHeart: SVG_HAND_HEART,
|
||||||
info: '<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"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>',
|
play: SVG_PLAY,
|
||||||
download:
|
skipForward: SVG_SKIP_FORWARD,
|
||||||
'<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="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" x2="12" y1="15" y2="3"/></svg>',
|
skipBack: SVG_SKIP_BACK,
|
||||||
heart: '<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="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z"/></svg>',
|
shuffle: SVG_SHUFFLE,
|
||||||
play: '<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"><polygon points="6 3 20 12 6 21 6 3"/></svg>',
|
repeat: SVG_REPEAT,
|
||||||
pause: '<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"><rect x="14" y="4" width="4" height="16" rx="1"/><rect x="6" y="4" width="4" height="16" rx="1"/></svg>',
|
volumeX: SVG_MUTE,
|
||||||
skipForward:
|
volume: SVG_VOLUME_1,
|
||||||
'<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"><polygon points="5 4 15 12 5 20 5 4"/><line x1="19" x2="19" y1="5" y2="19"/></svg>',
|
heart: SVG_HEART,
|
||||||
skipBack:
|
list: SVG_LIST,
|
||||||
'<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"><polygon points="19 20 9 12 19 4 19 20"/><line x1="5" x2="5" y1="19" y2="5"/></svg>',
|
trash: SVG_TRASH,
|
||||||
shuffle:
|
text: SVG_ALIGN_LEFT,
|
||||||
'<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="M2 18h1.4c1.3 0 2.5-.6 3.3-1.7l6.1-8.6c.7-1.1 2-1.7 3.3-1.7H22"/><path d="m18 2 4 4-4 4"/><path d="M2 6h1.9c1.5 0 2.9.9 3.6 2.2"/><path d="M22 18h-5.9c-1.3 0-2.6-.7-3.3-1.8l-.5-.8"/><path d="m18 14 4 4-4 4"/></svg>',
|
maximize: SVG_MAXIMIZE,
|
||||||
repeat: '<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="m17 2 4 4-4 4"/><path d="M3 11v-1a4 4 0 0 1 4-4h14"/><path d="m7 22-4-4 4-4"/><path d="M21 13v1a4 4 0 0 1-4 4H3"/></svg>',
|
sparkles: SVG_SPARKLES,
|
||||||
volumeX:
|
monitor: SVG_MONITOR,
|
||||||
'<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="M11 4.702a.705.705 0 0 0-1.203-.498L6.413 7.587A1.4 1.4 0 0 1 5.416 8H3a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h2.416a1.4 1.4 0 0 1 .997.413l3.383 3.384A.705.705 0 0 0 11 19.298z"/><line x1="22" x2="16" y1="9" y2="15"/><line x1="16" x2="22" y1="9" y2="15"/></svg>',
|
moon: SVG_MOON,
|
||||||
volume: '<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="M11 4.702a.705.705 0 0 0-1.203-.498L6.413 7.587A1.4 1.4 0 0 1 5.416 8H3a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h2.416a1.4 1.4 0 0 1 .997.413l3.383 3.384A.705.705 0 0 0 11 19.298z"/><path d="M16 9a5 5 0 0 1 0 6"/></svg>',
|
sun: SVG_SUN,
|
||||||
list: '<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"><line x1="8" x2="21" y1="6" y2="6"/><line x1="8" x2="21" y1="12" y2="12"/><line x1="8" x2="21" y1="18" y2="18"/><line x1="3" x2="3.01" y1="6" y2="6"/><line x1="3" x2="3.01" y1="12" y2="12"/><line x1="3" x2="3.01" y1="18" y2="18"/></svg>',
|
palette: SVG_PALETTE,
|
||||||
trash: '<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="M3 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/></svg>',
|
store: SVG_STORE,
|
||||||
text: '<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="M17 6.1H3"/><path d="M21 12.1H3"/><path d="M15.1 18H3"/></svg>',
|
sliders: SVG_SLIDERS,
|
||||||
maximize:
|
plus: SVG_PLUS,
|
||||||
'<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="M8 3H5a2 2 0 0 0-2 2v3"/><path d="M21 8V5a2 2 0 0 0-2-2h-3"/><path d="M3 16v3a2 2 0 0 0 2 2h3"/><path d="M16 21h3a2 2 0 0 0 2-2v-3"/></svg>',
|
folderPlus: SVG_FOLDER_PLUS,
|
||||||
sparkles:
|
keyboard: SVG_KEYBOARD,
|
||||||
'<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="M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z"/><path d="M20 3v4"/><path d="M22 5h-4"/><path d="M4 17v2"/><path d="M5 18H3"/></svg>',
|
upload: SVG_UPLOAD,
|
||||||
palette:
|
user: SVG_USER,
|
||||||
'<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"><circle cx="13.5" cy="6.5" r=".5" fill="currentColor"/><circle cx="17.5" cy="10.5" r=".5" fill="currentColor"/><circle cx="8.5" cy="7.5" r=".5" fill="currentColor"/><circle cx="6.5" cy="12.5" r=".5" fill="currentColor"/><path d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10c.926 0 1.648-.746 1.648-1.688 0-.437-.18-.835-.437-1.125-.29-.289-.438-.652-.438-1.125a1.64 1.64 0 0 1 1.668-1.668h1.996c3.051 0 5.555-2.503 5.555-5.554C21.965 6.012 17.461 2 12 2z"/></svg>',
|
pencil: SVG_PENCIL,
|
||||||
sun: '<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"><circle cx="12" cy="12" r="4"/><path d="M12 2v2"/><path d="M12 20v2"/><path d="m4.93 4.93 1.41 1.41"/><path d="m17.66 17.66 1.41 1.41"/><path d="M2 12h2"/><path d="M20 12h2"/><path d="m6.34 17.66-1.41 1.41"/><path d="m19.07 4.93-1.41 1.41"/></svg>',
|
logOut: SVG_LOG_OUT,
|
||||||
moon: '<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="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"/></svg>',
|
logIn: SVG_LOG_IN,
|
||||||
sliders:
|
music: SVG_MUSIC,
|
||||||
'<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"><line x1="4" x2="4" y1="21" y2="14"/><line x1="4" x2="4" y1="10" y2="3"/><line x1="12" x2="12" y1="21" y2="12"/><line x1="12" x2="12" y1="8" y2="3"/><line x1="20" x2="20" y1="21" y2="16"/><line x1="20" x2="20" y1="12" y2="3"/><line x1="2" x2="6" y1="14" y2="14"/><line x1="10" x2="14" y1="8" y2="8"/><line x1="18" x2="22" y1="16" y2="16"/></svg>',
|
disc: SVG_DISC,
|
||||||
plus: '<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="M5 12h14"/><path d="M12 5v14"/></svg>',
|
mic: SVG_MIC,
|
||||||
folderPlus:
|
radio: SVG_RADIO,
|
||||||
'<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="M12 10v6"/><path d="M9 13h6"/><path d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z"/></svg>',
|
|
||||||
user: '<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="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>',
|
|
||||||
logOut: '<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="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/><polyline points="16 17 21 12 16 7"/><line x1="21" x2="9" y1="12" y2="12"/></svg>',
|
|
||||||
logIn: '<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 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4"/><polyline points="10 17 15 12 10 7"/><line x1="15" x2="3" y1="12" y2="12"/></svg>',
|
|
||||||
keyboard:
|
|
||||||
'<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"><rect width="20" height="16" x="2" y="4" rx="2"/><path d="M6 8h.001"/><path d="M10 8h.001"/><path d="M14 8h.001"/><path d="M18 8h.001"/><path d="M8 12h.001"/><path d="M12 12h.001"/><path d="M16 12h.001"/><path d="M7 16h10"/></svg>',
|
|
||||||
music: '<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="M9 18V5l12-2v13"/><circle cx="6" cy="18" r="3"/><circle cx="18" cy="16" r="3"/></svg>',
|
|
||||||
disc: '<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"><circle cx="12" cy="12" r="10"/><circle cx="12" cy="12" r="2"/></svg>',
|
|
||||||
mic: '<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="M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z"/><path d="M19 10v2a7 7 0 0 1-14 0v-2"/><line x1="12" x2="12" y1="19" y2="22"/></svg>',
|
|
||||||
upload: '<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="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" x2="12" y1="3" y2="15"/></svg>',
|
|
||||||
handHeart:
|
|
||||||
'<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="M11 14h2a2 2 0 1 0 0-4h-3c-.6 0-1.1.2-1.4.6L3 16"/><path d="m7 20 1.6-1.4c.3-.4.8-.6 1.4-.6h4c1.1 0 2.1-.4 2.8-1.2l4.6-4.4a2 2 0 0 0-2.75-2.91l-4.2 3.9"/><path d="m2 15 6 6"/><path d="M19.5 8.5c.7-.7 1.5-1.6 1.5-2.7A2.73 2.73 0 0 0 16 4a2.78 2.78 0 0 0-5 1.8c0 1.2.8 2 1.5 2.8L16 12Z"/></svg>',
|
|
||||||
monitor:
|
|
||||||
'<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"><rect width="20" height="14" x="2" y="3" rx="2"/><line x1="8" x2="16" y1="21" y2="21"/><line x1="12" x2="12" y1="17" y2="21"/></svg>',
|
|
||||||
pencil: '<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="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"/></svg>',
|
|
||||||
radio: '<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="M4.9 19.1C1 15.2 1 8.8 4.9 4.9"/><path d="M7.8 16.2c-2.3-2.3-2.3-6.1 0-8.5"/><circle cx="12" cy="12" r="2"/><path d="M16.2 7.8c2.3 2.3 2.3 6.1 0 8.5"/><path d="M19.1 4.9C23 8.8 23 15.1 19.1 19"/></svg>',
|
|
||||||
store: '<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="m2 7 4.41-4.41A2 2 0 0 1 7.83 2h8.34a2 2 0 0 1 1.42.59L22 7"/><path d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8"/><path d="M15 22v-4a2 2 0 0 0-2-2h-2a2 2 0 0 0-2 2v4"/><path d="M2 7h20"/><path d="M22 7v3a2 2 0 0 1-2 2a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 16 12a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 12 12a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 8 12a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 4 12a2 2 0 0 1-2-2V7"/></svg>',
|
|
||||||
};
|
};
|
||||||
|
|
||||||
function escapeHtml(str) {
|
function escapeHtml(str) {
|
||||||
|
|
@ -196,7 +223,7 @@ class CommandPalette {
|
||||||
icon: 'skipForward',
|
icon: 'skipForward',
|
||||||
label: 'Next Track',
|
label: 'Next Track',
|
||||||
keywords: ['next', 'skip', 'forward'],
|
keywords: ['next', 'skip', 'forward'],
|
||||||
shortcut: 'Shift+→',
|
shortcut: 'Shift+\u2192',
|
||||||
action: () => {
|
action: () => {
|
||||||
window.monochromePlayer?.playNext();
|
window.monochromePlayer?.playNext();
|
||||||
},
|
},
|
||||||
|
|
@ -207,7 +234,7 @@ class CommandPalette {
|
||||||
icon: 'skipBack',
|
icon: 'skipBack',
|
||||||
label: 'Previous Track',
|
label: 'Previous Track',
|
||||||
keywords: ['previous', 'back', 'rewind'],
|
keywords: ['previous', 'back', 'rewind'],
|
||||||
shortcut: 'Shift+←',
|
shortcut: 'Shift+\u2190',
|
||||||
action: () => {
|
action: () => {
|
||||||
window.monochromePlayer?.playPrev();
|
window.monochromePlayer?.playPrev();
|
||||||
},
|
},
|
||||||
|
|
@ -252,7 +279,7 @@ class CommandPalette {
|
||||||
icon: 'volume',
|
icon: 'volume',
|
||||||
label: 'Volume Up',
|
label: 'Volume Up',
|
||||||
keywords: ['volume', 'louder'],
|
keywords: ['volume', 'louder'],
|
||||||
shortcut: '↑',
|
shortcut: '\u2191',
|
||||||
action: () => {
|
action: () => {
|
||||||
const p = window.monochromePlayer;
|
const p = window.monochromePlayer;
|
||||||
if (p) p.setVolume(p.userVolume + 0.1);
|
if (p) p.setVolume(p.userVolume + 0.1);
|
||||||
|
|
@ -264,7 +291,7 @@ class CommandPalette {
|
||||||
icon: 'volume',
|
icon: 'volume',
|
||||||
label: 'Volume Down',
|
label: 'Volume Down',
|
||||||
keywords: ['volume', 'quieter', 'softer'],
|
keywords: ['volume', 'quieter', 'softer'],
|
||||||
shortcut: '↓',
|
shortcut: '\u2193',
|
||||||
action: () => {
|
action: () => {
|
||||||
const p = window.monochromePlayer;
|
const p = window.monochromePlayer;
|
||||||
if (p) p.setVolume(p.userVolume - 0.1);
|
if (p) p.setVolume(p.userVolume - 0.1);
|
||||||
|
|
@ -478,7 +505,7 @@ class CommandPalette {
|
||||||
id: 'theme-frappe',
|
id: 'theme-frappe',
|
||||||
group: 'Theme',
|
group: 'Theme',
|
||||||
icon: 'palette',
|
icon: 'palette',
|
||||||
label: 'Theme: Frappé',
|
label: 'Theme: Frapp\u00e9',
|
||||||
keywords: ['theme', 'frappe', 'catppuccin'],
|
keywords: ['theme', 'frappe', 'catppuccin'],
|
||||||
action: () => this.setTheme('frappe'),
|
action: () => this.setTheme('frappe'),
|
||||||
},
|
},
|
||||||
|
|
@ -823,7 +850,7 @@ class CommandPalette {
|
||||||
musicGroups['Tracks'] = tracks.items.map((track) => ({
|
musicGroups['Tracks'] = tracks.items.map((track) => ({
|
||||||
id: `track-${track.id}`,
|
id: `track-${track.id}`,
|
||||||
group: 'Tracks',
|
group: 'Tracks',
|
||||||
icon: null,
|
icon: 'music',
|
||||||
image: api.getCoverUrl(track.album?.cover, 80),
|
image: api.getCoverUrl(track.album?.cover, 80),
|
||||||
label: track.title,
|
label: track.title,
|
||||||
description: `${track.artist?.name || 'Unknown'} \u2022 ${track.album?.title || ''}`,
|
description: `${track.artist?.name || 'Unknown'} \u2022 ${track.album?.title || ''}`,
|
||||||
|
|
@ -838,7 +865,7 @@ class CommandPalette {
|
||||||
musicGroups['Albums'] = albums.items.map((album) => ({
|
musicGroups['Albums'] = albums.items.map((album) => ({
|
||||||
id: `album-${album.id}`,
|
id: `album-${album.id}`,
|
||||||
group: 'Albums',
|
group: 'Albums',
|
||||||
icon: null,
|
icon: 'disc',
|
||||||
image: api.getCoverUrl(album.cover, 80),
|
image: api.getCoverUrl(album.cover, 80),
|
||||||
label: album.title,
|
label: album.title,
|
||||||
description: album.artist?.name || 'Unknown',
|
description: album.artist?.name || 'Unknown',
|
||||||
|
|
@ -852,7 +879,7 @@ class CommandPalette {
|
||||||
musicGroups['Artists'] = artists.items.map((artist) => ({
|
musicGroups['Artists'] = artists.items.map((artist) => ({
|
||||||
id: `artist-${artist.id}`,
|
id: `artist-${artist.id}`,
|
||||||
group: 'Artists',
|
group: 'Artists',
|
||||||
icon: null,
|
icon: 'mic',
|
||||||
image: api.getArtistPictureUrl(artist.picture, 80),
|
image: api.getArtistPictureUrl(artist.picture, 80),
|
||||||
label: artist.name,
|
label: artist.name,
|
||||||
description: 'Artist',
|
description: 'Artist',
|
||||||
|
|
@ -898,8 +925,7 @@ class CommandPalette {
|
||||||
this.removeMusicLoading();
|
this.removeMusicLoading();
|
||||||
this.resultsContainer.querySelectorAll('[data-music-group]').forEach((el) => el.remove());
|
this.resultsContainer.querySelectorAll('[data-music-group]').forEach((el) => el.remove());
|
||||||
|
|
||||||
const startIndex = this.flatItems.length;
|
let index = this.flatItems.length;
|
||||||
let index = startIndex;
|
|
||||||
|
|
||||||
for (const [heading, items] of Object.entries(musicGroups)) {
|
for (const [heading, items] of Object.entries(musicGroups)) {
|
||||||
const groupEl = document.createElement('div');
|
const groupEl = document.createElement('div');
|
||||||
|
|
@ -981,7 +1007,7 @@ class CommandPalette {
|
||||||
if (item.image) {
|
if (item.image) {
|
||||||
iconHtml = `<div class="cmdk-item-icon"><img src="${escapeHtml(item.image)}" crossorigin="anonymous" alt="" loading="lazy" /></div>`;
|
iconHtml = `<div class="cmdk-item-icon"><img src="${escapeHtml(item.image)}" crossorigin="anonymous" alt="" loading="lazy" /></div>`;
|
||||||
} else if (item.icon && ICONS[item.icon]) {
|
} else if (item.icon && ICONS[item.icon]) {
|
||||||
iconHtml = `<div class="cmdk-item-icon">${ICONS[item.icon]}</div>`;
|
iconHtml = `<div class="cmdk-item-icon">${ICONS[item.icon](ICON_SIZE)}</div>`;
|
||||||
}
|
}
|
||||||
|
|
||||||
let shortcutHtml = '';
|
let shortcutHtml = '';
|
||||||
|
|
|
||||||
31
js/icons.ts
31
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_ANIMATE_SPIN } from '../images/animate-spin.svg?svg&icon';
|
||||||
export { default as SVG_APPLE } from '../images/apple.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_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_CHECK } from '!lucide/check.svg?svg&icon';
|
||||||
export { default as SVG_CHECKBOX } from '!lucide/square.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_CHECKBOX_CHECKED } from '!lucide/check-square.svg?svg&icon';
|
||||||
export { default as SVG_CLOCK } from '!lucide/clock.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_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_DOWNLOAD } from '!lucide/download.svg?svg&icon';
|
||||||
export { default as SVG_EQUAL } from '!lucide/equal.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_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_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_GENIUS_INACTIVE } from '../images/genius-inactive.svg?svg&icon';
|
||||||
export { default as SVG_GLOBE } from '!lucide/globe.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 } 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_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_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_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_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_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_MINUS } from '!lucide/minus.svg?svg&icon';
|
||||||
export { default as SVG_MIX } from '../images/mix.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_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_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_MUTE } from '!lucide/volume-x.svg?svg&icon';
|
||||||
export { default as SVG_OFFLINE } from '!lucide/triangle-alert.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 } from '../images/pause.svg?svg&icon';
|
||||||
export { default as SVG_PAUSE_LARGE } from '../images/pause-large.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 } from '../images/play.svg?svg&icon';
|
||||||
export { default as SVG_PLAY_LARGE } from '../images/play-large.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_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 } from '!lucide/repeat.svg?svg&icon';
|
||||||
export { default as SVG_REPEAT_ONE } from '!lucide/repeat-1.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_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_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_SHARE } from '!lucide/share.svg?svg&icon';
|
||||||
export { default as SVG_SHUFFLE } from '!lucide/shuffle.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_SORT } from '../images/sort.svg?svg&icon';
|
||||||
export { default as SVG_SOUNDCLOUD } from '../images/soundcloud.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_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_TRASH } from '!lucide/trash.svg?svg&icon';
|
||||||
export { default as SVG_TWITTER } from '../images/twitter.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_VIDEO } from '!lucide/video.svg?svg&icon';
|
||||||
export { default as SVG_VOLUME } from '!lucide/volume-2.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';
|
export { default as SVG_YOUTUBE } from '../images/youtube.svg?svg&icon';
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue