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

<script lang="ts">
    import { api } from '$lib/api/api';
    import { ae_api } from '$lib/stores/ae_stores';
    import { journals_slct, journals_loc, journals_trig } from '$lib/ae_journals/ae_journals_stores';
    import { journals_func } from '$lib/ae_journals/ae_journals_functions';
    import { BookType } from '@lucide/svelte';
    
    // Props
    let { 
        class: className = "",
        placeholder = "Type your quick note... (First line = Title)",
        journals_li = [] // Optional list of journals to select from
    } = $props();

    // State
    let note_content = $state("");
    let is_submitting = $state(false);

    // Derived / Local target
    // We prefer the persisted 'qry__journal_id' if we are on the main landing page
    let selected_journal_id = $state($journals_loc.qry__journal_id);

    // If a journal is explicitly selected via slct (e.g. we are in a journal view), use that
    let target_journal_id = $derived($journals_slct.journal_id || selected_journal_id);

    async function handle_submit() {
        if (!note_content.trim()) return;
        if (!target_journal_id) {
            alert("Please select a target journal first.");
            return;
        }

        is_submitting = true;

        const lines = note_content.trim().split('\n');
        let name = lines[0].substring(0, 100);
        if (lines[0].length > 100) name += "...";
        
        // Remove the first line (title) from the content
        const entry_content = lines.slice(1).join('\n').trim();

        const data_kv = {
            name: name,
            content: entry_content,
            type_code: 'note',
            private: false, // Ensure notes are public/decrypted by default
            enable: true,
            hide: false
        };

        try {
            const res = await journals_func.create_ae_obj__journal_entry({
                api_cfg: $ae_api,
                journal_id: target_journal_id, // Pass string ID here
                data_kv: data_kv,
                log_lvl: 1
            });

            if (res) {
                note_content = "";
                // Trigger refresh
                $journals_trig.journal_entry_li = true;
            } else {
                alert("Failed to create note.");
            }
        } catch (error) {
            console.error("Error creating journal entry:", error);
            alert("Failed to create note.");
        }

        is_submitting = false;
    }

    function handle_keydown(e: KeyboardEvent) {
        if (e.ctrlKey && e.key === 'Enter') {
            handle_submit();
        }
    }

    function handle_journal_change(e: Event) {
        const val = (e.target as HTMLSelectElement).value;
        selected_journal_id = val;
        $journals_loc.qry__journal_id = val; // Persist choice
    }
</script>

<div class="card p-4 space-y-4 variant-filled-surface {className}">
    <header class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-2">
        <h3 class="h3 flex items-center gap-2">
            <BookType size="1.2em" class="text-primary-500" />
            Quick Add
        </h3>
        
        {#if journals_li && journals_li.length > 0}
            <div class="w-full sm:w-auto">
                <select 
                    class="select select-sm variant-filled-surface border-surface-500/30 font-bold"
                    value={target_journal_id}
                    onchange={handle_journal_change}
                >
                    <option value="" disabled selected={!target_journal_id}>Select Target Journal...</option>
                    {#each journals_li as journal}
                        <option value={journal.id}>{journal.name}</option>
                    {/each}
                </select>
            </div>
        {:else if !target_journal_id}
            <span class="badge variant-filled-error">No Journal Selected</span>
        {/if}
    </header>
    
    <textarea 
        class="textarea variant-filled-surface border-surface-500/20"
        rows="3"
        bind:value={note_content}
        {placeholder}
        onkeydown={handle_keydown}
        disabled={is_submitting}
    ></textarea>

    <div class="flex justify-between items-center">
        <span class="text-[10px] opacity-50 font-mono uppercase tracking-tighter hidden sm:block">
            Press Ctrl + Enter to save
        </span>
        <div class="flex justify-end space-x-2 grow sm:grow-0">
            <button 
                class="btn btn-sm variant-ghost-surface"
                onclick={() => note_content = ""}
                disabled={is_submitting || note_content.length === 0}
            >
                Clear
            </button>
            <button 
                class="btn btn-sm variant-filled-primary font-bold shadow-md"
                onclick={handle_submit}
                disabled={is_submitting || !target_journal_id || note_content.length === 0}
            >
                {#if is_submitting}Saving...{:else}Add Note{/if}
            </button>
        </div>
    </div>
</div>