vndangkhoa/kv-music
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat(ui): add cmdk-style command palette

Browse source
This commit is contained in:
akane 2026-03-21 11:35:09 -07:00
parent fc9132157e
commit 3415901bdb
3 changed files with 1351 additions and 729 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
index.html
View file

@ -1484,14 +1484,36 @@
<div id="command-palette-overlay" style="display: none"> <div id="command-palette-overlay" style="display: none">
<div class="command-palette"> <div class="command-palette">
<div class="command-palette-header"> <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 <input
type="text" type="text"
id="command-palette-input" id="command-palette-input"
placeholder="Type > to start a command..." placeholder="Search commands, music, settings..."
autocomplete="off" autocomplete="off"
spellcheck="false"
/> />
<kbd class="command-palette-kbd">ESC</kbd>
</div> </div>
<div id="command-palette-results" class="command-palette-results"></div> <div id="command-palette-results" class="command-palette-results"></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> </div>
</div> </div>

1750
js/commandPalette.js
View file

File diff suppressed because it is too large Load diff

278
styles.css
View file

@ -8381,69 +8381,297 @@ body:has(#side-panel.active) #close-fullscreen-cover-btn {
#command-palette-overlay { #command-palette-overlay {
position: fixed; position: fixed;
inset: 0; 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; z-index: 10000;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: flex-start; 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 { .command-palette {
width: 100%; width: 100%;
max-width: 600px; max-width: 640px;
margin: 0 1rem;
background: var(--card); background: var(--card);
border: 1px solid var(--border); border: 1px solid var(--border);
border-radius: 16px; 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; display: flex;
flex-direction: column; flex-direction: column;
overflow: hidden; overflow: hidden;
max-height: 60vh; max-height: min(60vh, 480px);
animation: cmdk-scale-in 150ms ease-out;
} }
.command-palette-header { .command-palette-header {
padding: 1.25rem 1.5rem; display: flex;
align-items: center;
gap: 12px;
padding: 14px 16px;
border-bottom: 1px solid var(--border); border-bottom: 1px solid var(--border);
} }
.command-palette-search-icon {
flex-shrink: 0;
color: var(--muted-foreground);
}
#command-palette-input { #command-palette-input {
width: 100%; flex: 1;
min-width: 0;
background: transparent; background: transparent;
border: none; border: none;
font-size: 1.2rem; font-size: 1rem;
font-weight: 500; font-weight: 400;
color: var(--foreground); color: var(--foreground);
outline: none; 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; 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); 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); 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 { .video-card .card-image-container {
aspect-ratio: 16 / 9 !important; aspect-ratio: 16 / 9 !important;
margin-bottom: var(--spacing-sm); margin-bottom: var(--spacing-sm);