melosh/mal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: standardize command palette styles

Browse Source 
Add ring, border separator, font-normal, and focus-visible styles to search and command palette.
This commit is contained in:
mkelvers
2026-05-25 01:55:28 +02:00
parent 48b5523d95
commit a9dfb77bc4
2 changed files with 9 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
static/search.ts
View File

@@ -193,7 +193,7 @@ const buildRow = (item: CommandPaletteItem, index: number): HTMLAnchorElement =>
const row = document.createElement('a'); const row = document.createElement('a');
row.href = item.href; row.href = item.href;
row.className = row.className =
'flex min-h-12 items-center gap-3 px-4 py-2 text-foreground no-underline transition-colors hover:bg-surface-hover hover:no-underline'; 'flex min-h-12 items-center gap-3 px-4 py-2 text-foreground no-underline transition-colors hover:bg-surface-hover hover:no-underline focus-visible:bg-surface-hover focus-visible:outline-none';
row.dataset.commandPaletteItem = item.id; row.dataset.commandPaletteItem = item.id;
row.setAttribute('role', 'option'); row.setAttribute('role', 'option');
row.setAttribute('aria-selected', String(index === selectedIndex)); row.setAttribute('aria-selected', String(index === selectedIndex));
@@ -206,13 +206,13 @@ const buildRow = (item: CommandPaletteItem, index: number): HTMLAnchorElement =>
copy.className = 'grid min-w-0 flex-1 gap-0.5'; copy.className = 'grid min-w-0 flex-1 gap-0.5';
const label = document.createElement('div'); const label = document.createElement('div');
label.className = 'truncate text-sm font-medium text-foreground'; label.className = 'truncate text-sm font-normal text-foreground';
label.textContent = item.label; label.textContent = item.label;
copy.appendChild(label); copy.appendChild(label);
if (item.subtitle && item.type !== 'navigation') { if (item.subtitle && item.type !== 'navigation') {
const subtitle = document.createElement('div'); const subtitle = document.createElement('div');
subtitle.className = 'truncate text-xs text-foreground-muted'; subtitle.className = 'truncate text-xs font-normal text-foreground-muted';
subtitle.textContent = item.subtitle; subtitle.textContent = item.subtitle;
copy.appendChild(subtitle); copy.appendChild(subtitle);
} }
@@ -223,7 +223,7 @@ const buildRow = (item: CommandPaletteItem, index: number): HTMLAnchorElement =>
const removeButton = document.createElement('button'); const removeButton = document.createElement('button');
removeButton.type = 'button'; removeButton.type = 'button';
removeButton.className = removeButton.className =
'flex h-8 w-8 shrink-0 items-center justify-center text-red-500/70 transition-colors hover:text-red-500'; 'flex h-8 w-8 shrink-0 items-center justify-center text-red-500/70 transition-colors hover:text-red-500 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-accent';
removeButton.setAttribute('aria-label', 'Remove from Continue Watching'); removeButton.setAttribute('aria-label', 'Remove from Continue Watching');
removeButton.appendChild(buildSvgIcon('M18 6 6 18 M6 6l12 12', 'size-4')); removeButton.appendChild(buildSvgIcon('M18 6 6 18 M6 6l12 12', 'size-4'));
removeButton.addEventListener('click', event => { removeButton.addEventListener('click', event => {
@@ -246,7 +246,7 @@ const buildContinueToggle = (hiddenCount: number): HTMLButtonElement => {
const button = document.createElement('button'); const button = document.createElement('button');
button.type = 'button'; button.type = 'button';
button.className = button.className =
'flex w-full items-center gap-3 px-4 py-2 text-left text-xs font-medium text-foreground-muted transition-colors hover:bg-surface-hover hover:text-foreground'; 'flex w-full items-center gap-3 px-4 py-2 text-left text-xs font-normal text-foreground-muted transition-colors hover:bg-surface-hover hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-accent';
const spacer = document.createElement('span'); const spacer = document.createElement('span');
spacer.className = 'h-8 w-8 shrink-0'; spacer.className = 'h-8 w-8 shrink-0';
@@ -304,7 +304,7 @@ const renderItems = (items: CommandPaletteItem[]): void => {
if (paletteItems.length === 0) { if (paletteItems.length === 0) {
const empty = document.createElement('div'); const empty = document.createElement('div');
empty.className = 'px-4 py-8 text-center text-sm text-foreground-muted'; empty.className = 'px-4 py-8 text-center text-sm font-normal text-foreground-muted';
empty.textContent = 'No commands found'; empty.textContent = 'No commands found';
paletteResults.replaceChildren(empty); paletteResults.replaceChildren(empty);
return; return;

6
templates/base.gohtml
View File

@@ -121,9 +121,9 @@
</div> </div>
<div class="fixed inset-0 z-[60] hidden items-start justify-center bg-black/50 px-4 pt-[12vh]" data-command-palette-dialog aria-hidden="true"> <div class="fixed inset-0 z-[60] hidden items-start justify-center bg-black/50 px-4 pt-[12vh]" data-command-palette-dialog aria-hidden="true">
<div class="w-full max-w-2xl overflow-hidden bg-background-button shadow-[var(--shadow-card)]" data-command-palette-root role="dialog" aria-modal="true" aria-label="Command palette"> <div class="w-full max-w-2xl overflow-hidden bg-background-button shadow-[var(--shadow-card)] ring-1 ring-black/10" data-command-palette-root role="dialog" aria-modal="true" aria-label="Command palette">
<label for="command-palette-input" class="sr-only">Search commands and anime</label> <label for="command-palette-input" class="sr-only">Search commands and anime</label>
<div class="flex items-center"> <div class="flex items-center border-b border-black/5">
<svg class="mx-4 size-5 shrink-0 text-foreground-muted" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"> <svg class="mx-4 size-5 shrink-0 text-foreground-muted" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
<circle cx="11" cy="11" r="8" /> <circle cx="11" cy="11" r="8" />
<path d="m21 21-4.35-4.35" /> <path d="m21 21-4.35-4.35" />
@@ -136,7 +136,7 @@
placeholder="Search or jump to..." placeholder="Search or jump to..."
class="min-w-0 flex-1 bg-transparent py-4 pr-4 text-base text-foreground placeholder:text-foreground-muted outline-none" class="min-w-0 flex-1 bg-transparent py-4 pr-4 text-base text-foreground placeholder:text-foreground-muted outline-none"
/> />
<button type="button" data-unstyled-button class="mr-3 px-2 py-1 text-xs text-foreground-muted transition-colors hover:text-foreground" data-command-palette-close>Esc</button> <button type="button" data-unstyled-button class="mr-3 px-2 py-1 text-xs font-normal text-foreground-muted transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-accent" data-command-palette-close>Esc</button>
</div> </div>
<div data-command-palette-results class="max-h-[min(70vh,34rem)] overflow-y-auto py-2"></div> <div data-command-palette-results class="max-h-[min(70vh,34rem)] overflow-y-auto py-2"></div>
</div> </div>