Merge pull request #375 from genericness/main

feat(ui): add cmdk-style command palette

index.html

@@ -1484,14 +1484,41 @@
         <div id="command-palette-overlay" style="display: none">
             <div class="command-palette">
                 <div class="command-palette-header">
+                    <svg
+                        class="command-palette-search-icon"
+                        xmlns="http://www.w3.org/2000/svg"
+                        width="18"
+                        height="18"
+                        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>
                     <input
                         type="text"
                         id="command-palette-input"
-                        placeholder="Type > to start a command..."
+                        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"
                     />
+                    <kbd class="command-palette-kbd">ESC</kbd>
+                </div>
+                <div id="command-palette-results" class="command-palette-results" role="listbox"></div>
+                <div class="command-palette-footer">
+                    <span class="command-palette-hint"><kbd>&uarr;&darr;</kbd> navigate</span>
+                    <span class="command-palette-hint"><kbd>&crarr;</kbd> select</span>
+                    <span class="command-palette-hint"><kbd>esc</kbd> close</span>
                 </div>
-                <div id="command-palette-results" class="command-palette-results"></div>
             </div>
         </div>
 

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';

styles.css

@@ -8381,69 +8381,298 @@ body:has(#side-panel.active) #close-fullscreen-cover-btn {
 #command-palette-overlay {
     position: fixed;
     inset: 0;
-    background: rgb(0, 0, 0, 0.5);
+    background: rgb(0 0 0 / 60%);
-    backdrop-filter: blur(4px);
+    backdrop-filter: blur(8px);
     z-index: 10000;
     display: flex;
     justify-content: center;
     align-items: flex-start;
-    padding-top: 10vh;
+    padding-top: min(10vh, 120px);
-    animation: fade-in 0.2s ease-out;
+    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-size: 1rem;
-    font-weight: 500;
+    font-weight: 400;
     color: var(--foreground);
     outline: none;
 }
 
-.command-palette-results {
+#command-palette-input::placeholder {
-    overflow-y: auto;
+    color: var(--muted-foreground);
-    padding: 0.5rem;
 }
 
-.command-result-item {
+.command-palette-kbd {
-    padding: 0.75rem 1rem;
+    flex-shrink: 0;
-    border-radius: var(--radius);
+    display: inline-flex;
-    cursor: pointer;
-    display: flex;
-    justify-content: space-between;
     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-palette-results {
-.command-result-item.selected {
+    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 {
+.cmdk-item[data-selected='true'] {
-    font-size: 0.85rem;
+    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);
 }
 
+/* stylelint-disable-next-line no-descending-specificity */
+.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);