alice.pds.demo.boltless.dev
This repository has no description
web/components: build the issue search from Input and Button
same as the repo toolbar: the field and the clear control were raw elements
reimplementing the primitives' border, padding, focus ring and hover states. the
clear button keeps its absolute placement since Input has no interactive icon
slot, and pr-9 only applies while it's on screen.
Signed-off-by: eti <eti@eti.tf>
author
eti
committer
dawn
date
(Jul 30, 2026, 7:45 PM +0300)
commit
4a33c074
4a33c0744432156bde0634cb1b21b481715b18a7
parent
a9a04e62
a9a04e623c05e84705e9ed7a1e76e815ee5e0bb9
change-id
tmqlponn
tmqlponnqoumntvqtplsrootqlylsywm
+12
-12
+12
-12
web/src/lib/components/repo/issues/IssueSearch.svelte
+12
-12
web/src/lib/components/repo/issues/IssueSearch.svelte
···
2
2
import { page } from "$app/state";
3
3
import Search from "$icon/search";
4
4
import X from "$icon/x";
5
+
import Button from "$lib/components/ui/Button.svelte";
6
+
import Input from "$lib/components/ui/Input.svelte";
5
7
6
8
let form: HTMLFormElement;
7
9
// seed from the url so the query (and the clear button) survive a submit
···
13
15
};
14
16
</script>
15
17
16
-
<form bind:this={form} class="flex" method="GET">
18
+
<form bind:this={form} class="flex w-full" method="GET">
17
19
<!-- TODO: wire up search query submission -->
18
20
<div class="relative flex w-full items-center">
19
-
<Search
20
-
class="pointer-events-none absolute left-2 size-4 text-foreground-placeholder"
21
-
aria-hidden="true"
22
-
/>
23
-
<input
21
+
<Input
24
22
bind:value
25
-
class="h-full w-full rounded border border-border-default bg-background-default py-1.5 pr-8 pl-8 text-sm outline-none focus:border-border-strong"
26
23
type="text"
27
24
name="q"
28
25
placeholder="Search issues..."
29
26
aria-label="Search issues"
27
+
iconLeft={Search}
28
+
class={value ? "w-full pr-9" : "w-full"}
30
29
/>
31
30
{#if value}
32
-
<button
31
+
<Button
33
32
type="button"
33
+
variant="ghost"
34
+
size="sm"
35
+
icon={X}
34
36
onclick={clear}
35
-
class="absolute right-2 flex items-center text-foreground-placeholder transition-colors hover:text-foreground-default"
36
37
aria-label="Clear search"
37
-
>
38
-
<X class="size-4" aria-hidden="true" />
39
-
</button>
38
+
class="absolute right-1"
39
+
/>
40
40
{/if}
41
41
</div>
42
42
</form>