J.A.R.V.I.S-rust/frontend/src/routes/commands/index.svelte

<script lang="ts">
    import { onMount } from "svelte"
    import { TextInput, Space, Badge, Tooltip, Loader } from "@svelteuidev/core"
    import { invoke } from "@tauri-apps/api/core"
    import { MagnifyingGlass } from "radix-icons-svelte"

    import HDivider from "@/components/elements/HDivider.svelte"
    import Footer from "@/components/Footer.svelte"
    import { currentLanguage, translations, translate } from "@/stores"

    $: t = (key: string) => translate($translations, key)

    type JCommand = {
        id: string
        type: string
        description?: string
        script?: string
        sandbox?: string
        timeout?: number
        phrases: Record<string, string[]>
        sounds?: Record<string, string[]>
    }

    let commands: JCommand[] = []
    let loading = true
    let filter = ""
    let errorMessage = ""

    async function load() {
        loading = true
        errorMessage = ""
        try {
            commands = await invoke<JCommand[]>("get_commands_list")
            commands = [...commands].sort((a, b) => a.id.localeCompare(b.id))
        } catch (err) {
            errorMessage = String(err)
            console.error("commands list load failed:", err)
        } finally {
            loading = false
        }
    }

    onMount(load)

    function phrasesForLang(c: JCommand, lang: string): string[] {
        return c.phrases?.[lang] ?? c.phrases?.["en"] ?? Object.values(c.phrases ?? {})[0] ?? []
    }

    function matches(c: JCommand, q: string): boolean {
        if (!q) return true
        const needle = q.toLowerCase()
        if (c.id.toLowerCase().includes(needle)) return true
        if ((c.description ?? "").toLowerCase().includes(needle)) return true
        if ((c.type ?? "").toLowerCase().includes(needle)) return true
        for (const list of Object.values(c.phrases ?? {})) {
            for (const p of list) {
                if (p.toLowerCase().includes(needle)) return true
            }
        }
        return false
    }

    function typeColor(type: string): string {
        switch (type) {
            case "lua": return "#5b8def"
            case "ahk": return "#b7411a"
            case "cli": return "#8a8d90"
            case "voice": return "#3aaf72"
            case "terminate": return "#c93a3a"
            case "stop_chaining": return "#9d6abf"
            default: return "#6c6e71"
        }
    }

    $: visible = commands.filter(c => matches(c, filter))
    $: countLabel = filter
        ? `${visible.length} / ${commands.length}`
        : `${commands.length}`
</script>

<Space h="md" />

<div class="toolbar">
    <TextInput
        bind:value={filter}
        placeholder={$currentLanguage === "ru" ? "Поиск по имени или фразе..." : "Search by id or phrase..."}
        icon={MagnifyingGlass}
        size="sm"
        radius="md"
        override={{ flex: 1 }}
    />
    <Tooltip label={$currentLanguage === "ru" ? "Перечитать" : "Reload"} position="bottom">
        <button class="reload-btn" on:click={load} aria-label="reload">↻</button>
    </Tooltip>
</div>

<div class="meta">
    <span class="count">{countLabel}</span>
    <span class="dot">·</span>
    <span class="hint">
        {$currentLanguage === "ru"
            ? "Скажи «Джарвис» + любую фразу из карточки"
            : "Say \"Jarvis\" + any phrase from a card"}
    </span>
</div>

{#if loading}
    <div class="state"><Loader size="sm" /></div>
{:else if errorMessage}
    <div class="state error">{errorMessage}</div>
{:else if visible.length === 0}
    <div class="state">
        {$currentLanguage === "ru" ? "Ничего не найдено" : "Nothing found"}
    </div>
{:else}
    <div class="grid">
        {#each visible as cmd (cmd.id)}
            <div class="card">
                <div class="card-head">
                    <span class="cmd-id">{cmd.id}</span>
                    <Badge
                        size="xs"
                        radius="sm"
                        variant="filled"
                        override={{ backgroundColor: typeColor(cmd.type), color: "#fff" }}
                    >
                        {cmd.type}
                    </Badge>
                    {#if cmd.sandbox}
                        <Badge size="xs" radius="sm" variant="outline">{cmd.sandbox}</Badge>
                    {/if}
                </div>
                {#if cmd.description}
                    <div class="card-desc">{cmd.description}</div>
                {/if}
                <ul class="phrases">
                    {#each phrasesForLang(cmd, $currentLanguage) as p}
                        <li>«{p}»</li>
                    {/each}
                </ul>
            </div>
        {/each}
    </div>
{/if}

<HDivider />
<Footer />

<style lang="scss">
    .toolbar {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 0 10px;
    }
    .reload-btn {
        background: transparent;
        border: 1px solid #3a3d40;
        color: #c8cacc;
        border-radius: 8px;
        height: 34px;
        width: 34px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: 0.2s;
        &:hover {
            border-color: #5b8def;
            color: #5b8def;
        }
    }
    .meta {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 6px 12px 12px;
        font-size: 12px;
        color: #8a8d90;
        .count {
            background: #5b8def;
            color: #fff;
            padding: 1px 8px;
            border-radius: 10px;
            font-weight: 600;
        }
        .dot { color: #46484b; }
    }
    .state {
        padding: 30px 12px;
        text-align: center;
        color: #8a8d90;
        font-size: 13px;
        &.error {
            color: #c93a3a;
            font-family: monospace;
        }
    }
    .grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
        padding: 0 10px 10px;
    }
    .card {
        background: #1c1d20;
        border: 1px solid #2a2c2f;
        border-radius: 8px;
        padding: 10px 12px;
        transition: border-color 0.15s;
        &:hover {
            border-color: #3a3d40;
        }
    }
    .card-head {
        display: flex;
        align-items: center;
        gap: 6px;
        margin-bottom: 4px;
        flex-wrap: wrap;
    }
    .cmd-id {
        font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
        font-size: 12px;
        color: #e0e2e4;
        font-weight: 600;
        margin-right: auto;
    }
    .card-desc {
        font-size: 12px;
        color: #a0a3a6;
        margin-bottom: 6px;
    }
    .phrases {
        list-style: none;
        margin: 0;
        padding: 0;
        font-size: 12px;
        color: #c8cacc;
        line-height: 1.6em;
        li {
            display: inline-block;
            background: #25272a;
            border-radius: 4px;
            padding: 1px 7px;
            margin: 2px 4px 2px 0;
        }
    }
</style>