OSIT-AE-App-Svelte/documentation/AE_UI_Journals_module_update_2026.md

Aether Journals UI Update (2026)

Status: Active Last Updated: 2026-01-14 Primary Agent: Frontend SvelteKit Agent

1. Project Overview

This document outlines the modernization of the Journals module UI in the SvelteKit frontend (aether_app_sveltekit). The primary goals are to fully leverage the generic V3 API architecture and introduce high-velocity productivity features for journal management.

Context: The backend transition to the generic api_crud_v3 router is complete. Custom legacy routers have been removed. The frontend must now fully align with this pattern and provide a frictionless user experience.

---

2. Core Objectives

🎯 Primary Goals

1. V3 API Verification: Ensure all CRUD operations utilize the generic api_crud_v3 endpoints (Verified).
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.

---

3. Technical Architecture

Backend (Completed)

• Router: api_crud_v3 (Generic)
• Definitions: app/ae_obj_types_def.py -> app/object_definitions/journals.py
• Endpoints: /v3/crud/journal/... and /v3/crud/journal_entry/...

Frontend (In Progress)

• State Management: src/lib/ae_journals/ae_journals_stores.ts
• Local Storage: Dexie.js (db_journals)
• API Client: src/lib/api/api.ts -> get_ae_obj_v3
• Export Engine: Centralized templates in src/lib/ae_journals/ae_journals_export_templates.ts.

---

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.

📝 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".

🔄 Interop (Markdown/HTML)

• 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.

---

5. Implementation Plan

Phase 1: Foundation (Done)

• Backend cleanup (remove legacy routers).
• Verify frontend uses V3 API (ae_journals__journal.ts).

Phase 2: Rapid Entry (Complete)

• Create ae_comp__journal_entry_quick_add.svelte.
• Integrate Quick Add into +page.svelte.
• Update ae_journals_stores.ts to manage Quick Add state/visibility.

Phase 3: Content Manipulation & Portability (Complete)

• Update JournalEntry_SettingsMenu.svelte with Append/Prepend actions.
• Implement Append/Prepend logic in ae_comp__journal_entry_obj_id_view.svelte.
• Implement Bulk Export (Markdown/HTML/JSON) via ae_comp__modal_journal_export.svelte.
• Implement Bulk Import with Drag-and-Drop via ae_comp__modal_journal_import.svelte.
• Establish centralized Export Template system (ae_journals_export_templates.ts).

Phase 4: Polish & Security (Active)

• Implement Auto-Save toggle and visual status indicators.
• Audit encryption flow for Quick Added and Imported entries.
• 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.