Files
OSIT-AE-App-Svelte/documentation/AE_UI_Journals_module_update_2026.md
Scott Idem 8fd11d7224 feat(journals): implement Quick Add and unified Append/Prepend shared component
- Created AeCompJournalEntryQuickAdd for high-velocity note creation
- Extracted robust append/prepend logic from List View into AeCompModalJournalEntryAppend
- Unified List and Detail views to use the shared modal for content manipulation
- Added explicit Append/Prepend actions to Journal Entry settings menu
- Updated TODO.md and Journals module documentation
2026-01-13 22:59:08 -05:00

94 lines
3.8 KiB
Markdown

# Aether Journals UI Update (2026)
> **Status:** Active
> **Last Updated:** 2026-01-13
> **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`
---
## 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:** JSON container vs. Raw Markdown files.
* **Integration:** potential drag-and-drop zone for Nextcloud Note files.
---
## 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 (Active)
- [x] Create `ae_comp__journal_entry_quick_add.svelte`.
- [x] Integrate Quick Add into `+page.svelte`.
- [ ] Update `ae_journals_stores.ts` to manage Quick Add state/visibility.
### Phase 3: Content Manipulation
- [x] Update `JournalEntry_SettingsMenu.svelte` with Append/Prepend actions.
- [x] Implement Append/Prepend logic in `ae_comp__journal_entry_obj_id_view.svelte`.
### Phase 4: Polish & Security
- [ ] Audit encryption flow for Quick Added entries.
- [ ] Styling and Mobile responsiveness check.
---
## 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.