94 lines
3.8 KiB
Markdown
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)
|
|
- [ ] 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
|
|
- [ ] Update `JournalEntry_SettingsMenu.svelte` with Append/Prepend actions.
|
|
- [ ] Implement Append/Prepend logic in `JournalEntry_Editor.svelte` or helper functions.
|
|
|
|
### 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.
|