From b50cbe7972b0b72b64216c6ce9d6342e6d815310 Mon Sep 17 00:00:00 2001
From: Scott Idem <stidem@gmail.com>
Date: Thu, 8 Jan 2026 16:40:50 -0500
Subject: [PATCH] Fix ReferenceError: CalendarClock and Bot not defined in
 Journals Config modal

---
 .../journals/modal_journals_config.svelte     | 219 ++++++++----------
 1 file changed, 91 insertions(+), 128 deletions(-)

diff --git a/src/routes/journals/modal_journals_config.svelte b/src/routes/journals/modal_journals_config.svelte
index b0455c8b..bc6a8465 100644
--- a/src/routes/journals/modal_journals_config.svelte
+++ b/src/routes/journals/modal_journals_config.svelte
@@ -17,11 +17,13 @@
         ArrowDownUp,
         BetweenVerticalEnd,
         BetweenVerticalStart,
+        Bot,
         BookHeart,
         BookImage,
         Bookmark,
         BookOpenText,
         BriefcaseBusiness,
+        CalendarClock,
         Check,
         Copy,
         Expand,
@@ -162,143 +164,104 @@
             <!-- Section for the configuration form -->
             <div
                 class:hidden={tab !== 'form'}
-                class="flex flex-col gap-1 items-start justify-start"
+                class="flex flex-col gap-6 items-start justify-start p-2"
             >
-                <!-- <h2 class="font-semibold"></h2> -->
+                <div class="w-full space-y-4">
+                    <h2 class="h2 text-xl font-bold flex items-center gap-2 border-b border-surface-500/30 pb-2">
+                        <CalendarClock class="text-primary-500" />
+                        Date and Time Settings
+                    </h2>
 
-                <div class="w-full space-y-2 p-2 border-t border-surface-100-900">
-                    <h2 class="font-semibold">$journals_loc:</h2>
-                    <h3 class="font-semibold">Date and Time:</h3>
-
-                    <!-- datetime_format - default 'datetime_12_long'; select options -->
-                    <label class="flex items-center justify-start gap-1">
-                        DateTime Format:
-                        <select
-                            bind:value={$journals_loc.datetime_format}
-                            class="select select-sm select-bordered w-full max-w-xs p-1"
-                        >
-                            <option value="datetime_12_short">MMM D, YY hh:mm A</option>
-                            <option value="datetime_12_long">MMMM D, YYYY hh:mm A</option>
-                            <option value="datetime_short">MMM D, YY HH:mm</option>
-                            <option value="datetime_long">MMMM D, YYYY HH:mm</option>
-                            <option value="datetime_us">US (MM/DD/YYYY hh:mm:ss A)</option>
-                            <option value="datetime_iso">ISO (YYYY-MM-DD HH:mm:ss)</option>
-                        </select>
-                    </label>
-
-                    <!-- time_format - default 'time_12_short'; select options -->
-                    <label class="flex items-center justify-start gap-1">
-                        Time Format:
-                        <select
-                            bind:value={$journals_loc.time_format}
-                            class="select select-sm select-bordered w-full max-w-xs p-1"
-                        >
-                            <option value="time_12_short">12-hour short (e.g., 3:30 PM)</option>
-                            <option value="time_12_long">12-hour long (e.g., 3:30:45 PM)</option>
-                            <option value="time_short">24-hour short (e.g., 15:30)</option>
-                            <option value="time_long">24-hour long (e.g., 15:30:45)</option>
-                        </select>
-                    </label>
-
-                    <!-- time_hours 12 or 24; toggle -->
-                    <div class="flex flex-row gap-2 items-center justify-start">
-                        <label class="flex flex-row gap-1 items-center justify-start">
-                            12
-                            <input
-                                type="checkbox"
-                                checked={$journals_loc.time_hours == 12}
-                                value={12}
-                                onchange={() => {
-                                    $journals_loc.time_hours = 12;
-                                }}
-                                class="checkbox checkbox-sm"
-                            />
-                        </label>
-                        <label class="flex flex-row gap-1 items-center justify-start">
-                            24
-                            <input
-                                type="checkbox"
-                                checked={$journals_loc.time_hours == 24}
-                                value={24}
-                                onchange={() => {
-                                    $journals_loc.time_hours = 24;
-                                }}
-                                class="checkbox checkbox-sm"
-                            />
-                        </label>
-                        <span class="text-sm">
-                            Time Format: <span class="font-semibold"
-                                >{$journals_loc.time_hours}-hour</span
+                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                        <label class="label">
+                            <span>DateTime Format</span>
+                            <select
+                                bind:value={$journals_loc.datetime_format}
+                                class="select"
                             >
-                        </span>
+                                <option value="datetime_12_short">MMM D, YY hh:mm A</option>
+                                <option value="datetime_12_long">MMMM D, YYYY hh:mm A</option>
+                                <option value="datetime_short">MMM D, YY HH:mm</option>
+                                <option value="datetime_long">MMMM D, YYYY HH:mm</option>
+                                <option value="datetime_us">US (MM/DD/YYYY hh:mm:ss A)</option>
+                                <option value="datetime_iso">ISO (YYYY-MM-DD HH:mm:ss)</option>
+                            </select>
+                        </label>
+
+                        <label class="label">
+                            <span>Time Format</span>
+                            <select
+                                bind:value={$journals_loc.time_format}
+                                class="select"
+                            >
+                                <option value="time_12_short">12-hour short (e.g., 3:30 PM)</option>
+                                <option value="time_12_long">12-hour long (e.g., 3:30:45 PM)</option>
+                                <option value="time_short">24-hour short (e.g., 15:30)</option>
+                                <option value="time_long">24-hour long (e.g., 15:30:45)</option>
+                            </select>
+                        </label>
                     </div>
+                </div>
 
-                    <h3 class="font-semibold">LLM AI:</h3>
+                <div class="w-full space-y-4">
+                    <h2 class="h2 text-xl font-bold flex items-center gap-2 border-b border-surface-500/30 pb-2">
+                        <Bot class="text-primary-500" />
+                        AI Summary Configuration
+                    </h2>
 
-                    <button
-                        type="button"
-                        class="btn btn-sm preset-outlined-primary-400-600"
-                        onclick={() => {
-                            $journals_loc.llm__api_base_url =
-                                $ae_loc.site_cfg_json?.llm__api_base_url ??
-                                'https://ai.dgrzone.com/api';
-                            $journals_loc.llm__api_model =
-                                $ae_loc.site_cfg_json?.llm__api_model ??
-                                'dgrzone-deepseek-8b-quick';
-                            $journals_loc.llm__api_token =
-                                $ae_loc.site_cfg_json?.llm__api_token ?? '';
-                            $journals_loc.llm__api_dangerous_browser =
-                                $ae_loc.site_cfg_json?.llm__api_dangerous_browser ?? false;
-                            $journals_loc.entry.llm__system_prompt =
-                                $ae_loc.site_cfg_json?.llm__system_prompt ?? '';
-                        }}
-                    >
-                        <Copy class="inline-block mr-1" />
-                        LLM from Site Cfg
-                    </button>
+                    <div class="space-y-4 bg-surface-500/5 p-4 rounded-lg">
+                        <button
+                            type="button"
+                            class="btn variant-ghost-primary w-full md:w-auto"
+                            onclick={() => {
+                                $journals_loc.llm__api_base_url =
+                                    $ae_loc.site_cfg_json?.llm__api_base_url ??
+                                    'https://ai.dgrzone.com/api';
+                                $journals_loc.llm__api_model =
+                                    $ae_loc.site_cfg_json?.llm__api_model ??
+                                    'dgrzone-deepseek-8b-quick';
+                                $journals_loc.llm__api_token =
+                                    $ae_loc.site_cfg_json?.llm__api_token ?? '';
+                                $journals_loc.llm__api_dangerous_browser =
+                                    $ae_loc.site_cfg_json?.llm__api_dangerous_browser ?? false;
+                                $journals_loc.entry.llm__system_prompt =
+                                    $ae_loc.site_cfg_json?.llm__system_prompt ?? '';
+                            }}
+                        >
+                            <Copy size="1em" class="mr-2" />
+                            Sync from Site Configuration
+                        </button>
 
-                    <!-- llm__api_base_url - default 'https://ai.dgrzone.com/api'; input url -->
-                    <label class="flex items-center justify-start gap-1">
-                        LLM API Base URL:
-                        <input
-                            type="text"
-                            bind:value={$journals_loc.llm__api_base_url}
-                            placeholder="LLM API Base URL"
-                            class="input input-sm input-bordered w-full max-w-xs"
-                        />
-                    </label>
+                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                            <label class="label">
+                                <span>LLM API Base URL</span>
+                                <input
+                                    type="text"
+                                    bind:value={$journals_loc.llm__api_base_url}
+                                    placeholder="https://..."
+                                    class="input"
+                                />
+                            </label>
 
-                    <!-- llm__api_model - default 'dgrzone-deepseek-8b-quick'; input text -->
-                    <label class="flex items-center justify-start gap-1">
-                        LLM API Model:
-                        <input
-                            type="text"
-                            bind:value={$journals_loc.llm__api_model}
-                            placeholder="LLM API Model"
-                            class="input input-sm input-bordered w-full max-w-xs"
-                        />
-                    </label>
+                            <label class="label">
+                                <span>LLM Model</span>
+                                <input
+                                    type="text"
+                                    bind:value={$journals_loc.llm__api_model}
+                                    class="input"
+                                />
+                            </label>
+                        </div>
 
-                    <!-- llm__api_token; input text -->
-                    <label class="flex items-center justify-start gap-1">
-                        LLM API Token:
-                        <input
-                            type="text"
-                            bind:value={$journals_loc.llm__api_token}
-                            placeholder="LLM API Token"
-                            class="input input-sm input-bordered w-full max-w-4xl"
-                        />
-                    </label>
-
-                    <!-- llm__api_dangerous_browser - default false; checkbox -->
-                    <label class="flex flex-row gap-1 items-center justify-start">
-                        <input
-                            type="checkbox"
-                            bind:checked={$journals_loc.llm__api_dangerous_browser}
-                            class="checkbox checkbox-sm"
-                        />
-                        <span class="text-sm"> LLM API Dangerous Browser </span>
-                    </label>
+                        <label class="label">
+                            <span>LLM API Token</span>
+                            <input
+                                type="password"
+                                bind:value={$journals_loc.llm__api_token}
+                                class="input font-mono"
+                            />
+                        </label>
+                    </div>
                 </div>
 
                 <div class="w-full space-y-2 p-2 border-t border-surface-100-900">