feat(search): preselect first result in resource picker

Add the local UI design system reference and update frontend references to it.
This commit is contained in:
Andras Bacsai committed 2026-08-10 15:17:26 +02:00
1 parent 3d64eb214a
commit 8cf22d7739
6 files changed
+718 -7

No files matched your search

+1 -1
View File
@@ -46,7 +46,7 @@
--color-coolgray-500: #323232;
/* Graphite design language (ported from ref/frontend). Layered neutral
surfaces + translucent hairlines. See UI_REDESIGN.md. */
surfaces + translucent hairlines. See DESIGN.md. */
--color-app: #0c0c0d;
/* Canvas: neutral near-black (oklch), not pure black */
--color-panel: oklch(10% 0 0);
+1 -1
View File
@@ -4,7 +4,7 @@
// Icon glyphs from the reicon pack (OUTLINE group), converted to
// currentColor so they inherit the surrounding text color. To add more:
// copy the inner markup from the reicon Outline weight and swap
// #000000 -> currentColor. See UI_REDESIGN.md.
// #000000 -> currentColor. See DESIGN.md.
$icons = [
'cloud' => '<path d="M7.5 19.25h9.75a4.5 4.5 0 0 0 .62-8.96A6.25 6.25 0 0 0 5.8 8.65 5.25 5.25 0 0 0 7.5 19.25Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>',
'code' => '<path d="m8.5 7-5 5 5 5M15.5 7l5 5-5 5M13.5 4l-3 16" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>',
@@ -127,6 +127,21 @@
this.isPaletteTransitioning = false;
});
},
preselectFirstResult() {
this.$nextTick(() => {
const results = Array.from(this.$el.querySelectorAll('.search-result-item'))
.filter(item => item.offsetParent !== null);
if (results.length === 0) {
this.selectedIndex = -1;
return;
}
this.selectedIndex = 0;
results[0].focus();
results[0].scrollIntoView({ block: 'nearest' });
});
},
navigateResults(direction) {
const results = Array.from(this.$el.querySelectorAll('.search-result-item'))
.filter(item => item.offsetParent !== null);
@@ -366,7 +381,7 @@
wire:loading.class="pointer-events-none opacity-40 blur-[2px]"
wire:target="selectServer,selectDestination,selectProject,selectEnvironment">
@if ($selectedServerId === null)
<div x-init="selectedIndex = -1">
<div x-init="preselectFirstResult()">
<div class="command-palette-step-header">
<button type="button" @click="runPaletteTransition(() => $wire.goBack())" class="command-palette-step-back"
title="Back">
@@ -413,7 +428,7 @@
@endif
@if ($selectedServerId !== null && $selectedDestinationUuid === null)
<div x-init="selectedIndex = -1">
<div x-init="preselectFirstResult()">
<div class="command-palette-step-header">
<button type="button" @click="runPaletteTransition(() => $wire.goBack())" class="command-palette-step-back"
title="Back">
@@ -461,7 +476,7 @@
@endif
@if ($selectedDestinationUuid !== null && $selectedProjectUuid === null)
<div x-init="selectedIndex = -1">
<div x-init="preselectFirstResult()">
<div class="command-palette-step-header">
<button type="button" @click="runPaletteTransition(() => $wire.goBack())" class="command-palette-step-back"
title="Back">
@@ -509,7 +524,7 @@
@endif
@if ($selectedProjectUuid !== null && $selectedEnvironmentUuid === null)
<div x-init="selectedIndex = -1">
<div x-init="preselectFirstResult()">
<div class="command-palette-step-header">
<button type="button" @click="runPaletteTransition(() => $wire.goBack())" class="command-palette-step-back"
title="Back">