OSIT-AE-App-Svelte/src/routes/journals/ae_comp__journal_entry_obj_qry.svelte

<script lang="ts">
    interface Props {
        log_lvl?: number;
        lq__journal_obj: any;
    }

    let { log_lvl = $bindable(0), lq__journal_obj }: Props = $props();

    import {
        ArrowDown01,
        ArrowDown10,
        ArrowDownUp,
        BetweenVerticalEnd,
        BetweenVerticalStart,
        BookHeart,
        BookImage,
        Bookmark,
        BookOpenText,
        BriefcaseBusiness,
        Check,
        Copy,
        Expand,
        Eye,
        EyeOff,
        Flag,
        FlagOff,
        FilePlus,
        Fingerprint,
        Globe,
        Library,
        MessageSquareWarning,
        Minus,
        Notebook,
        Pencil,
        Plus,
        RemoveFormatting,
        SquareLibrary,
        Shapes,
        Share2,
        ShieldCheck,
        ShieldMinus,
        Siren,
        Skull,
        Tags,
        Target,
        ToggleLeft,
        ToggleRight,
        Trash2,
        TypeOutline,
        X
    } from '@lucide/svelte';

    import {
        ae_snip,
        ae_loc,
        ae_sess,
        ae_api,
        ae_trig,
        slct,
        slct_trigger
    } from '$lib/stores/ae_stores';
    import {
        journals_loc,
        journals_sess,
        journals_slct,
        journals_prom,
        journals_trig
    } from '$lib/ae_journals/ae_journals_stores';
    import { journals_func } from '$lib/ae_journals/ae_journals_functions';

    // *** Functions and Logic
    function handle_search_trigger() {
        if ($journals_loc.entry.search_version === undefined) {
            $journals_loc.entry.search_version = 0;
        }
        $journals_loc.entry.search_version++;
    }

    function prevent_default<T extends Event>(fn: (event: T) => void) {
        return function (event: T) {
            event.preventDefault();
            fn(event);
        };
    }
</script>

<div
    class="ae_group filters_and_search flex flex-row flex-wrap items-center justify-center gap-2"
>
    <!-- Search input form -->
    <span class="flex flex-row flex-wrap items-center justify-center gap-1">
        <form
            onsubmit={prevent_default(() => {
                handle_search_trigger();
            })}
            autocomplete="off"
            class="search_form flex flex-row flex-wrap gap-1 items-center justify-center"
        >
            <span class="text-sm text-gray-500 hidden lg:inline">
                Search:
            </span>
            <input
                disabled={false}
                type="text"
                placeholder="Search Journal Entries"
                bind:value={$journals_loc.entry.qry__search_text}
                onkeyup={(event) => {
                    // Reactive effect in parent handles this debounced
                }}
                title={`Search for Entries in "${$lq__journal_obj?.name}. Press Enter to search.`}
                autocomplete="off"
                class="
                    input input-sm
                    w-44 md:w-52
                    text-sm
                    "
                class:bg-red-200={$journals_sess.entry_li == null}
                class:dark:bg-red-800={$journals_sess.entry_li == null}
            />

            <button
                type="submit"
                class="btn btn-sm preset-filled-primary transition"
                title="Perform detailed search"
            >
                <Library size="1.25em" />
            </button>

            <!-- Clear search text button -->
            <button
                type="button"
                class:hidden={!$journals_loc.entry.qry__search_text &&
                    !$journals_loc.entry.qry__category_code}
                onclick={() => {
                    $journals_loc.entry.qry__search_text = '';
                    $journals_loc.entry.qry__category_code = '';
                    handle_search_trigger();
                }}
                class="
                    btn btn-sm
                    preset-tonal-surface
                    hover:preset-filled-surface-500
                    transition-all
                    "
                title="Clear search query text"
            >
                <RemoveFormatting
                    size="1.25em"
                    class="text-neutral-800/60 dark:text-neutral-50/60"
                />
                <span class="hidden md:inline"> Clear </span>
            </button>
        </form>
    </span>

    <!-- Give list of categories to base the new entry on -->
    <span class="flex flex-row items-center gap-2">
        <span class="text-sm text-gray-500 hidden md:inline"> Category: </span>
        <select
            class="select select-sm"
            bind:value={$journals_loc.entry.qry__category_code}
            onchange={(event) => {
                handle_search_trigger();
            }}
            title="Filter by category"
        >
            <option value="">All Categories</option>
            {#each $lq__journal_obj?.cfg_json?.category_li as category (category.code)}
                <option value={category.code}>{category.name}</option>
            {/each}
        </select>
    </span>

    <!-- Search Control Toggles -->
    <span
        class="flex flex-row flex-wrap items-center gap-2 border-l border-surface-300-700 pl-2"
    >
        <!-- Global Search hidden until backend supports person_id in entries 2026-01-27 -->
        <!--
        <label
            class="flex items-center gap-1 cursor-pointer"
            title="When enabled, searches all journals for this person. When disabled, only searches the current journal."
        >
            <span class="text-xs font-semibold text-gray-500"> Global Search? </span>
            <input
                type="checkbox"
                bind:checked={$journals_loc.entry.qry__global_person_search}
                onchange={handle_search_trigger}
                class="checkbox checkbox-sm"
            />
        </label>
        -->

        {#if $ae_loc.edit_mode}
            <label
                class="flex items-center gap-1 cursor-pointer"
                title="When enabled, search results are fetched directly from the server first."
            >
                <span class="text-xs font-semibold text-gray-500">
                    Remote First?
                </span>
                <input
                    type="checkbox"
                    bind:checked={$journals_loc.entry.qry__remote_first}
                    onchange={handle_search_trigger}
                    class="checkbox checkbox-sm"
                />
            </label>
        {/if}
    </span>
</div>