Prettier for Journals

src/routes/journals/ae_comp__journal_entry_header.svelte

@@ -1,75 +1,85 @@
 <script lang="ts">
-    /**
-     * ae_comp__journal_entry_header.svelte
-     * Standardized Journal Entry Header.
-     * Manages name, sync status, and triggers the modular config.
-     */
-    import { ChevronLeft, CircleCheck, CircleX, Eye, Fingerprint, LoaderCircle, LockKeyhole, LockKeyholeOpen, Pencil, RefreshCw, Save, Settings } from '@lucide/svelte';
-    import { ae_util } from '$lib/ae_utils/ae_utils';
-    import {
-        journals_loc,
-        journals_sess
-    } from '$lib/ae_journals/ae_journals_stores';
-    import type { ae_JournalEntry, ae_Journal } from '$lib/types/ae_types';
+/**
+ * ae_comp__journal_entry_header.svelte
+ * Standardized Journal Entry Header.
+ * Manages name, sync status, and triggers the modular config.
+ */
+import {
+    ChevronLeft,
+    CircleCheck,
+    CircleX,
+    Eye,
+    Fingerprint,
+    LoaderCircle,
+    LockKeyhole,
+    LockKeyholeOpen,
+    Pencil,
+    RefreshCw,
+    Save,
+    Settings
+} from '@lucide/svelte';
+import { ae_util } from '$lib/ae_utils/ae_utils';
+import {
+    journals_loc,
+    journals_sess
+} from '$lib/ae_journals/ae_journals_stores';
+import type { ae_JournalEntry, ae_Journal } from '$lib/types/ae_types';
 
-    interface Props {
-        entry: ae_JournalEntry;
-        journal: ae_Journal;
-        journals_li?: ae_Journal[];
-        tmp_entry_obj: any; // Bindable
-        has_changed: boolean;
-        save_status?: 'saved' | 'unsaved' | 'saving';
-        on_save: () => void;
-        on_decrypt: () => void;
-        on_show_config: () => void;
-        log_lvl?: number;
-    }
-
-    let {
-        entry,
-        journal,
-        tmp_entry_obj = $bindable(),
-        has_changed,
-        save_status = 'saved',
-        on_save,
-        on_decrypt,
-        on_show_config,
-        log_lvl = 0
-    }: Props = $props();
-
-    const is_decrypted = $derived(
-        $journals_sess?.journal_kv[journal?.id]?.journal_passcode_decrypted ===
-            true
-    );
-
-    function toggle_edit_mode() {
-        const isEditing =
-            $journals_loc.entry.edit_kv[entry.journal_entry_id] === 'current';
-        if (isEditing) {
-            if (has_changed) on_save();
-            else $journals_loc.entry.edit_kv[entry.journal_entry_id] = false;
-        } else {
-            $journals_loc.entry.edit_kv[entry.journal_entry_id] = 'current';
-        }
+interface Props {
+    entry: ae_JournalEntry;
+    journal: ae_Journal;
+    journals_li?: ae_Journal[];
+    tmp_entry_obj: any; // Bindable
+    has_changed: boolean;
+    save_status?: 'saved' | 'unsaved' | 'saving';
+    on_save: () => void;
+    on_decrypt: () => void;
+    on_show_config: () => void;
+    log_lvl?: number;
+}
+
+let {
+    entry,
+    journal,
+    tmp_entry_obj = $bindable(),
+    has_changed,
+    save_status = 'saved',
+    on_save,
+    on_decrypt,
+    on_show_config,
+    log_lvl = 0
+}: Props = $props();
+
+const is_decrypted = $derived(
+    $journals_sess?.journal_kv[journal?.id]?.journal_passcode_decrypted === true
+);
+
+function toggle_edit_mode() {
+    const isEditing =
+        $journals_loc.entry.edit_kv[entry.journal_entry_id] === 'current';
+    if (isEditing) {
+        if (has_changed) on_save();
+        else $journals_loc.entry.edit_kv[entry.journal_entry_id] = false;
+    } else {
+        $journals_loc.entry.edit_kv[entry.journal_entry_id] = 'current';
     }
+}
 </script>
 
 <header
-    class="flex flex-col md:flex-row items-center justify-between gap-4 p-3
-           bg-gray-50 dark:bg-gray-800
-           border border-gray-200 dark:border-gray-700
-           rounded-xl shadow-sm w-full"
->
-    <div class="flex items-center gap-3 w-full md:w-auto">
+    class="flex w-full flex-col items-center justify-between gap-4 rounded-xl
+           border border-gray-200
+           bg-gray-50 p-3 shadow-sm
+           md:flex-row dark:border-gray-700 dark:bg-gray-800">
+    <div class="flex w-full items-center gap-3 md:w-auto">
         <a
             href="/journals/{journal.journal_id}"
             class="btn-icon btn-icon-sm preset-tonal-surface"
-            title="Back to Journal"
-        >
+            title="Back to Journal">
             <ChevronLeft size="1.2em" />
         </a>
 
-        <div class="flex items-center gap-2 grow">
+        <div class="flex grow items-center gap-2">
             <button
                 type="button"
                 onclick={toggle_edit_mode}
@@ -77,12 +87,10 @@
                 $journals_loc.entry.edit_kv[entry.journal_entry_id] ===
                     'current'
                     ? 'preset-filled-success'
-                    : 'preset-tonal-surface'}"
-            >
+                    : 'preset-tonal-surface'}">
                 {#if $journals_loc.entry.edit_kv[entry.journal_entry_id] === 'current'}
                     {#if has_changed}<Save size="1.2em" />{:else}<Eye
-                            size="1.2em"
-                        />{/if}
+                            size="1.2em" />{/if}
                 {:else}
                     <Pencil size="1.2em" />
                 {/if}
@@ -92,12 +100,11 @@
                 <input
                     type="text"
                     bind:value={tmp_entry_obj.name}
-                    class="input input-sm font-bold text-lg grow md:min-w-[300px] border-none bg-transparent focus:ring-2 focus:ring-primary-500"
+                    class="input input-sm focus:ring-primary-500 grow border-none bg-transparent text-lg font-bold focus:ring-2 md:min-w-[300px]"
                     placeholder="Entry Title..."
-                    onchange={on_save}
-                />
+                    onchange={on_save} />
             {:else}
-                <h2 class="text-base md:text-lg font-bold truncate max-w-md">
+                <h2 class="max-w-md truncate text-base font-bold md:text-lg">
                     {entry.name ||
                         ae_util.iso_datetime_formatter(
                             entry.created_on,
@@ -108,12 +115,11 @@
         </div>
     </div>
 
-    <div class="flex items-center gap-2 w-full md:w-auto justify-end">
+    <div class="flex w-full items-center justify-end gap-2 md:w-auto">
         <!-- Auto-Save indicator -->
         {#if $journals_loc.entry.edit_kv[entry.journal_entry_id] === 'current'}
             <div
-                class="flex items-center gap-1 px-2 border-r border-surface-500/20 mr-1"
-            >
+                class="border-surface-500/20 mr-1 flex items-center gap-1 border-r px-2">
                 <button
                     type="button"
                     class="btn-icon btn-icon-sm {$journals_loc.entry.auto_save
@@ -122,19 +128,16 @@
                     onclick={() =>
                         ($journals_loc.entry.auto_save =
                             !$journals_loc.entry.auto_save)}
-                    title="Toggle Auto Save"
-                >
+                    title="Toggle Auto Save">
                     <RefreshCw size="1em" />
                 </button>
                 {#if $journals_loc.entry.auto_save}
                     {#if save_status === 'saving'}<LoaderCircle
                             size="1em"
-                            class="animate-spin text-primary-500"
-                        />
+                            class="text-primary-500 animate-spin" />
                     {:else if save_status === 'saved'}<CircleCheck
                             size="1em"
-                            class="text-success-500"
-                        />
+                            class="text-success-500" />
                     {:else}<CircleX size="1em" class="opacity-30" />{/if}
                 {/if}
             </div>
@@ -145,25 +148,22 @@
             <button
                 type="button"
                 class="btn-icon btn-icon-sm transition-all {is_decrypted
-                    ? 'preset-filled-success shadow-lg shadow-success-500/20'
+                    ? 'preset-filled-success shadow-success-500/20 shadow-lg'
                     : 'preset-tonal-warning'}"
                 onclick={on_decrypt}
-                title={is_decrypted ? 'Lock Content' : 'Decrypt Content'}
-            >
+                title={is_decrypted ? 'Lock Content' : 'Decrypt Content'}>
                 {#if is_decrypted}<LockKeyholeOpen
-                        size="1.2em"
-                    />{:else}<LockKeyhole size="1.2em" />{/if}
+                        size="1.2em" />{:else}<LockKeyhole size="1.2em" />{/if}
             </button>
         {/if}
 
-        <div class="w-[1px] h-6 bg-surface-500/20 mx-1"></div>
+        <div class="bg-surface-500/20 mx-1 h-6 w-[1px]"></div>
 
         <!-- Unified Config Button -->
         <button
             type="button"
             class="btn btn-sm preset-tonal-primary font-bold"
-            onclick={on_show_config}
-        >
+            onclick={on_show_config}>
             <Settings size="1.1em" class="mr-2" /> Config
         </button>
 
@@ -172,8 +172,7 @@
             <button
                 type="button"
                 class="btn btn-sm preset-filled-primary"
-                onclick={on_save}
-            >
+                onclick={on_save}>
                 <Save size="1.1em" class="mr-2" /> Save
             </button>
         {/if}