feat(journals): modernize UI with responsive grid and fix Quick Add integration

documentation/AE_UI_Journals_module_update_2026.md

@@ -1,6 +1,6 @@
 # Aether Journals UI Update (2026)
 
-> **Status:** Active
+> **Status:** 🚧 Stuck on Phase 4 (Security/Encryption Blockers)
 > **Last Updated:** 2026-01-14
 > **Primary Agent:** Frontend SvelteKit Agent
 
@@ -18,7 +18,7 @@ This document outlines the modernization of the Journals module UI in the Svelte
 2.  **Quick Add UI:** Implement a specialized interface for rapid, friction-free entry creation.
 3.  **Append/Prepend UI:** Allow users to quickly add text to the beginning or end of existing entries without full edit mode.
 4.  **Interop & Portability:** Robust import/export logic for Markdown/HTML (Nextcloud Notes compatibility).
-5.  **Security Hardening:** Review and harden client-side encryption logic.
+5.  **Security Hardening:** Review and harden client-side encryption logic (BLOCKED).
 
 ---
 
@@ -39,31 +39,17 @@ This document outlines the modernization of the Journals module UI in the Svelte
 
 ## 4. Feature Specifications
 
-### ⚡ Quick Add
-*   **Component:** `src/routes/journals/ae_comp__journal_entry_quick_add.svelte` (New)
-*   **Placement:**
-    *   Primary: Top of the Journal List view (`src/routes/journals/+page.svelte`).
-    *   Secondary: Sidebar or global hotkey (Future).
-*   **Behavior:**
-    *   Simple `textarea` input.
-    *   "Add Note" button.
-    *   **Logic:** Creates a new `journal_entry` attached to the active (or default) journal. Auto-sets `created_on` to `now`.
-    *   **UX:** Should not require opening a full editor modal. Optimistic UI update.
+### ⚡ Quick Add (Complete)
+*   **Component:** `src/routes/journals/ae_comp__journal_entry_quick_add.svelte`
+*   **Behavior:** Creates a new `journal_entry` attached to the active journal without leaving the list view.
 
-### 📝 Append / Prepend
-*   **Triggers:** Buttons added to `src/routes/journals/JournalEntry_SettingsMenu.svelte`.
-*   **Interaction:**
-    *   Clicking "Append" or "Prepend" opens a focused input area (inline or small modal).
-    *   User types text -> Submits.
-    *   **Logic:**
-        *   **Prepend:** `New Text` + `\n\n` + `Existing Content`
-        *   **Append:** `Existing Content` + `\n\n` + `New Text`
-    *   **UX:** seamless update of the view without entering full "Edit Mode".
+### 📝 Append / Prepend (Complete)
+*   **Interaction:** Fast text injection via `AeCompModalJournalEntryAppend`.
+*   **Logic:** Updates entry content without full editor state overhead.
 
-### 🔄 Interop (Markdown/HTML)
+### 🔄 Interop (Markdown/HTML) (Complete)
 *   **Goal:** Bulk export/import for data portability.
-*   **Format:** Optimized templates for different journal types (Standard, Personal Log, Amazon Vine).
-*   **Integration:** drag-and-drop zone for Nextcloud Note files and bulk parser logic in `ae_journals_parsers.ts`.
+*   **Templates:** Standard, Personal Log, Amazon Vine.
 
 ---
 
@@ -76,24 +62,38 @@ This document outlines the modernization of the Journals module UI in the Svelte
 ### Phase 2: Rapid Entry (Complete)
 - [x] Create `ae_comp__journal_entry_quick_add.svelte`.
 - [x] Integrate Quick Add into `+page.svelte`.
-- [x] Update `ae_journals_stores.ts` to manage Quick Add state/visibility.
 
 ### Phase 3: Content Manipulation & Portability (Complete)
-- [x] Update `JournalEntry_SettingsMenu.svelte` with Append/Prepend actions.
-- [x] Implement Append/Prepend logic in `ae_comp__journal_entry_obj_id_view.svelte`.
-- [x] Implement Bulk Export (Markdown/HTML/JSON) via `ae_comp__modal_journal_export.svelte`.
-- [x] Implement Bulk Import with Drag-and-Drop via `ae_comp__modal_journal_import.svelte`.
-- [x] Establish centralized Export Template system (`ae_journals_export_templates.ts`).
+- [x] Implement Append/Prepend logic.
+- [x] Implement Bulk Export/Import system.
+- [x] Establish centralized Export Template engine.
 
-### Phase 4: Polish & Security (Active)
+### Phase 4: Polish & Security (ACTIVE BLOCKER)
 - [x] Implement Auto-Save toggle and visual status indicators.
+- [ ] Solidify E2EE passcode system for Journals and Entries.
+- [ ] **BLOCKER:** Decryption workflow is currently unstable due to Svelte 5 reactivity loops.
 - [ ] Audit encryption flow for Quick Added and Imported entries.
-- [x] Styling and Mobile responsiveness check for Import/Export modals.
 - [ ] Integrate Outbound Email sharing.
 
 ---
 
-## 6. Reference Files
-*   `src/lib/ae_journals/ae_journals_stores.ts`: State definitions.
-*   `src/routes/journals/+page.svelte`: Main UI container.
-*   `src/routes/journals/JournalEntry_Editor.svelte`: Editor logic.
+## ⚠️ Technical Blocker: The "Decryption-Sync" Loop
+
+### The Issue
+The component is suffering from a **Reactive Feedback Loop** between decryption, auto-save, and background IDB refreshes.
+1.  **Decrypting content** triggers a change in `tmp_entry_obj.content`.
+2.  The **Auto-Save effect** sees this as a manual user edit and saves to the database.
+3.  **Dexie LiveQuery** detects the DB update and refreshes the object.
+4.  The **Sync effect** resets the entry to its encrypted state (from DB).
+5.  The **Auto-Decryption effect** fires again, starting the loop over.
+
+### What we tried:
+*   **`is_processing` flags:** Attempted to block reactivity during decryption.
+*   **`untrack()`:** Attempted to isolate store updates.
+*   **Reference Sync:** Attempted to update `orig_entry_obj` simultaneously with decryption to fool the change detector.
+*   **Direct Store Updates:** Switching from property assignment to `journals_sess.update()` to fix Svelte 5 notification failures.
+
+### Future Fix Ideas:
+1.  **Native Svelte 5 State:** Refactor `journals_sess` from a Svelte 4 `Writable` to a class using `$state`.
+2.  **Logic Extraction:** Move decryption logic into a non-reactive class/helper to isolate side effects from the UI render cycle.
+3.  **Hash Comparison:** Use content hashes for change detection instead of string comparisons to avoid whitespace/normalization loops.