Haystack/frontend/src/Search.tsx

import { Button } from "@kobalte/core/button";

import { IconSearch, IconSettings } from "@tabler/icons-solidjs";
import { listen } from "@tauri-apps/api/event";

import Fuse from "fuse.js";
import {
    For,
    createEffect,
    createResource,
    createSignal,
    onCleanup,
    onMount,
} from "solid-js";

import { SearchCard } from "./components/search-card/SearchCard";

import { invoke } from "@tauri-apps/api/core";
import { ItemModal } from "./components/item-modal/ItemModal";
import type { Shortcut } from "./components/shortcuts/hooks/useShortcutEditor";
import { type UserImage, getUserImages } from "./network";

// How wonderfully functional
const getAllValues = (object: object): Array<string> => {
    const loop = (acc: Array<string>, next: object): Array<string> => {
        for (const _value of Object.values(next)) {
            const value: unknown = _value;
            switch (typeof value) {
                case "object":
                    if (value != null) {
                        acc.push(...loop(acc, value));
                    }
                    break;
                case "string":
                case "number":
                case "boolean":
                    acc.push(value.toString());
                    break;
                default:
                    break;
            }
        }

        return acc;
    };

    return loop([], object);
};

export const Search = () => {
    const [searchResults, setSearchResults] = createSignal<UserImage[]>([]);
    const [searchQuery, setSearchQuery] = createSignal("");
    const [selectedItem, setSelectedItem] = createSignal<UserImage | null>(
        null,
    );

    const [data] = createResource(() =>
        getUserImages().then((data) =>
            data.map((d) => ({
                ...d,
                rawData: getAllValues(d),
            })),
        ),
    );

    let fuze = new Fuse<UserImage>(data() ?? [], {
        keys: [
            { name: "rawData", weight: 1 },
            { name: "title", weight: 1 },
        ],
        threshold: 0.4,
    });

    createEffect(() => {
        setSearchResults(data() ?? []);
        fuze = new Fuse<UserImage>(data() ?? [], {
            keys: [
                { name: "data.Name", weight: 2 },
                { name: "rawData", weight: 1 },
            ],
            threshold: 0.4,
        });
    });

    const onInputChange = (event: InputEvent) => {
        const query = (event.target as HTMLInputElement).value;
        setSearchQuery(query);
        setSearchResults(fuze.search(query).map((s) => s.item));
    };

    let searchInputRef: HTMLInputElement | undefined;

    onMount(() => {
        if (searchInputRef) {
            searchInputRef.focus();
        }
    });

    createEffect(() => {
        // Listen for the focus-search event from Tauri
        const unlisten = listen("focus-search", () => {
            if (searchInputRef) {
                searchInputRef.focus();
            }
        });

        onCleanup(() => {
            unlisten.then((fn) => fn());
        });
    });

    const [shortcut, setShortcut] = createSignal<Shortcut>([]);

    async function getCurrentShortcut() {
        try {
            const res: string = await invoke("get_current_shortcut");
            console.log("DBG: ", res);
            setShortcut(res?.split("+"));
        } catch (err) {
            console.error("Failed to fetch shortcut:", err);
        }
    }

    onMount(() => {
        getCurrentShortcut();
    });

    return (
        <>
            <main class="container pt-2">
                <div class="px-4 flex items-center">
                    <div class="inline-flex justify-between w-full rounded-xl text-base leading-none outline-none bg-white border border-neutral-200 text-neutral-900">
                        <div class="appearance-none inline-flex justify-center items-center w-auto outline-none rounded-md px-2.5 text-gray-900">
                            <IconSearch
                                size={20}
                                class="m-auto size-5 text-neutral-600"
                            />
                        </div>
                        <input
                            ref={searchInputRef}
                            type="text"
                            value={searchQuery()}
                            onInput={onInputChange}
                            placeholder="Search for stuff..."
                            autofocus
                            class="appearance-none inline-flex w-full min-h-[40px] text-base bg-transparent rounded-l-md outline-none placeholder:text-gray-600"
                        />
                    </div>
                    <Button
                        as="a"
                        href="/settings"
                        class="ml-2 p-2.5 bg-neutral-200 rounded-lg"
                    >
                        <IconSettings size={20} />
                    </Button>
                </div>

                <div class="px-4 mt-4 bg-white rounded-t-2xl">
                    <div class="h-[254px] mt-4 overflow-scroll scrollbar-hide">
                        {searchResults().length > 0 ? (
                            <div class="w-full grid grid-cols-9 gap-2 grid-flow-row-dense py-4">
                                <For each={searchResults()}>
                                    {(item) => (
                                        <div
                                            onClick={() =>
                                                setSelectedItem(item)
                                            }
                                            onKeyDown={(e) => {
                                                if (e.key === "Enter") {
                                                    setSelectedItem(item);
                                                }
                                            }}
                                            class="h-[144px] border relative col-span-3 border-neutral-200 cursor-pointer overflow-hidden rounded-xl"
                                        >
                                            <span class="sr-only">
                                                {item.data.Name}
                                            </span>
                                            <SearchCard item={item} />
                                        </div>
                                    )}
                                </For>
                            </div>
                        ) : (
                            <div class="text-center text-lg m-auto mt-6 text-neutral-700">
                                No results found
                            </div>
                        )}
                    </div>
                </div>

                <div class="w-full border-t h-10 bg-white px-4 flex items-center border-neutral-100">
                    <p class="text-sm text-neutral-700">
                        Use{" "}
                        {shortcut().length > 0
                            ? shortcut().join("+")
                            : "shortcut"}{" "}
                        globally to toggle and reload this window
                    </p>
                </div>
            </main>
            {selectedItem() && (
                <ItemModal
                    item={selectedItem() as UserImage}
                    onClose={() => setSelectedItem(null)}
                />
            )}
        </>
    );
};