Add autocomplete suggestions to TagsField, use it for Daemon's module blocklist

TagsField now takes an optional suggestions list, rendered as a native
<datalist> on the tag input. Wired the Daemon page's "Disabled modules"
field to breadd's real built-in module names (bread.monitors/devices/
workspaces/binds, from bread/breadd/src/lua/mod.rs's BUILTIN_* registry)
so blocking one is a pick, not free-typed guesswork.
This commit is contained in:
Breadway 2026-07-22 19:28:52 +08:00
parent 93c3b88b10
commit f1c8b3d0e3
2 changed files with 20 additions and 3 deletions

View file

@ -1,7 +1,13 @@
<script lang="ts">
let { label, value = $bindable() }: { label: string; value: string[] } = $props();
let {
label,
value = $bindable(),
suggestions = [],
}: { label: string; value: string[]; suggestions?: string[] } = $props();
let text = $state("");
const listId = $props.id();
let available = $derived(suggestions.filter((s) => !value.includes(s)));
function commit() {
const v = text.trim();
@ -36,8 +42,15 @@
<button type="button" class="remove" onclick={() => remove(name)} aria-label={`Remove ${name}`}>×</button>
</span>
{/each}
<input type="text" bind:value={text} onkeydown={onKeydown} placeholder="Type and press Enter…" />
<input type="text" bind:value={text} onkeydown={onKeydown} placeholder="Type and press Enter…" list={available.length ? listId : undefined} />
</div>
{#if available.length}
<datalist id={listId}>
{#each available as s (s)}
<option value={s}></option>
{/each}
</datalist>
{/if}
</div>
<style>

View file

@ -58,7 +58,11 @@
<Group title="Modules">
<SwitchField label="Load built-in modules" bind:value={cfg.modules_builtin} />
<TagsField label="Disabled modules" bind:value={cfg.modules_disable} />
<TagsField
label="Disabled modules"
bind:value={cfg.modules_disable}
suggestions={["bread.monitors", "bread.devices", "bread.workspaces", "bread.binds"]}
/>
</Group>
<Group title="Adapters" hint="Sources breadd normalises into events. Disable any you don't use.">