# 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)
- [x] Backend cleanup (remove legacy routers).
- [x] Verify frontend uses V3 API (`ae_journals__journal.ts`).

### 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`).

### Phase 4: Polish & Security (Active)
- [x] Implement Auto-Save toggle and visual status indicators.
- [ ] 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.