feat(journals): modernize UI with responsive grid and fix Quick Add integration
This commit is contained in:
Scott Idem
@@ -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.
|
||||
|
||||
@@ -1,365 +1,213 @@
|
||||
<script lang="ts">
|
||||
let log_lvl: number = 0;
|
||||
// console.log(`ae_journals +page data:`, data);
|
||||
// console.log(`ae_journals Data Params:`, data.url.searchParams.get('journal_id'));
|
||||
|
||||
// *** Import Svelte specific
|
||||
/**
|
||||
* src/routes/journals/+page.svelte
|
||||
* Modernized Journals Index View
|
||||
* Focus: Simplicity for regular users, power tools for edit mode.
|
||||
*/
|
||||
import { onMount } from 'svelte';
|
||||
import { goto } from '$app/navigation';
|
||||
|
||||
// *** Import other supporting libraries
|
||||
import { BookPlus, FolderPlus, Library, Loader, SquareLibrary, Wrench, FileUp, FileDown } from '@lucide/svelte';
|
||||
// *** Icons
|
||||
import {
|
||||
BookPlus, SquareLibrary, Wrench,
|
||||
FileUp, Loader2, Sparkles
|
||||
} from '@lucide/svelte';
|
||||
|
||||
// *** Libraries & Stores
|
||||
import { liveQuery } from 'dexie';
|
||||
import { Modal } from 'flowbite-svelte';
|
||||
|
||||
// *** Import Aether specific variables and functions
|
||||
// import { api } from '$lib/api';
|
||||
import { db_journals } from '$lib/ae_journals/db_journals';
|
||||
import { journals_func } from '$lib/ae_journals/ae_journals_functions';
|
||||
import { ae_loc, ae_sess, ae_api, slct, slct_trigger } from '$lib/stores/ae_stores';
|
||||
import { ae_loc, ae_api, slct } from '$lib/stores/ae_stores';
|
||||
import {
|
||||
journals_loc,
|
||||
journals_sess,
|
||||
journals_slct,
|
||||
journals_trig
|
||||
} from '$lib/ae_journals/ae_journals_stores';
|
||||
import { ae_util } from '$lib/ae_utils/ae_utils';
|
||||
|
||||
// *** Components
|
||||
import Modal_journals_cfg from './modal_journals_config.svelte';
|
||||
import Journal_obj_li from './ae_comp__journal_obj_li.svelte';
|
||||
import AeCompJournalEntryQuickAdd from './ae_comp__journal_entry_quick_add.svelte';
|
||||
import AeCompModalJournalImport from './ae_comp__modal_journal_import.svelte';
|
||||
|
||||
interface Props {
|
||||
data: any;
|
||||
}
|
||||
|
||||
let { data }: Props = $props();
|
||||
|
||||
import Modal_journals_cfg from './modal_journals_config.svelte';
|
||||
import Journal_obj_li from './ae_comp__journal_obj_li.svelte';
|
||||
import AeCompJournalEntryQuickAdd from './ae_comp__journal_entry_quick_add.svelte';
|
||||
import AeCompModalJournalImport from './ae_comp__modal_journal_import.svelte';
|
||||
import AeCompModalJournalExport from './ae_comp__modal_journal_export.svelte';
|
||||
|
||||
// import Element_data_store from '$lib/element_data_store_v2.svelte';
|
||||
|
||||
let ae_acct = data[$slct.account_id];
|
||||
// *** State
|
||||
let show_import_modal = $state(false);
|
||||
let show_export_modal = $state(false);
|
||||
|
||||
function handle_import_complete() {
|
||||
// Trigger a refresh of the journal list?
|
||||
// Usually liveQuery handles it if data changed in IDB.
|
||||
// But if we just created entries, we might want to refresh the selected journal view if active.
|
||||
// $journals_trig.journal_entry_li = true;
|
||||
}
|
||||
// $journals_slct.journal_obj = ae_acct.slct.journal_obj;
|
||||
|
||||
// We need to access the currently filtered/displayed list of entries for export.
|
||||
// The list is actually managed inside 'Journal_obj_li' (the list component) or via a store.
|
||||
// However, looking at Journal_obj_li, it takes 'lq__journal_entry_obj_li' as a prop.
|
||||
// BUT wait, this page (+page.svelte) seems to be the Journal INDEX (list of journals),
|
||||
// NOT the list of entries within a journal.
|
||||
// Ah, checking the code...
|
||||
// The main page lists *Journals* (lq__journal_obj_li).
|
||||
// The entries are listed in [journal_id]/+page.svelte.
|
||||
|
||||
// Correction: Bulk Export should probably be on the [journal_id] page, OR here if we want to export ALL journals?
|
||||
// The user request was "export Journal Entries". Usually implies from a specific journal or context.
|
||||
// Let's check [journal_id]/+page.svelte.
|
||||
|
||||
// $journals_slct.journal_obj_li = ae_acct.slct.journal_obj_li;
|
||||
let log_lvl = 0;
|
||||
|
||||
// *** LiveQueries
|
||||
let lq__journal_obj_li = $derived(
|
||||
liveQuery(async () => {
|
||||
let results = await db_journals.journal
|
||||
return await db_journals.journal
|
||||
.where('person_id')
|
||||
.equals($ae_loc.person_id)
|
||||
// .sortBy('group')
|
||||
// .sortBy('priority')
|
||||
// .sortBy('sort')
|
||||
.reverse()
|
||||
.sortBy('tmp_sort_3');
|
||||
|
||||
// .orderBy('tmp_sort_3')
|
||||
// .reverse()
|
||||
// .toArray()
|
||||
|
||||
// .sortBy('start_datetime')
|
||||
// () => db_journals.journals
|
||||
// .where('conference')
|
||||
// // .aboveOrEqual(0)
|
||||
// .equals('true')
|
||||
// // .above(0)
|
||||
// .sortBy('name') // Use sortBy() instead of orderBy(). toArray() is also not needed???
|
||||
// // .sortBy('[priority+name]')
|
||||
// // .orderBy('name')
|
||||
// // .offset(10).limit(5)
|
||||
// // .toArray()
|
||||
|
||||
return results;
|
||||
})
|
||||
);
|
||||
// console.log(`lq__journal_obj_li:`, $lq__journal_obj_li);
|
||||
|
||||
let lq__journal_obj = $derived(
|
||||
liveQuery(async () => {
|
||||
let results = await db_journals.journal
|
||||
.where('id')
|
||||
.equals(ae_acct.slct.journal_id)
|
||||
.toArray();
|
||||
// .first()
|
||||
// .get($journals_slct.journal_id)
|
||||
|
||||
return results;
|
||||
})
|
||||
);
|
||||
|
||||
onMount(() => {
|
||||
console.log('Journals: +page.svelte');
|
||||
|
||||
console.log('ae_ slct:', $slct);
|
||||
|
||||
let href_url = window.location.href;
|
||||
// console.log(href_url);
|
||||
|
||||
$ae_loc.href_url = href_url;
|
||||
console.log(`lq__journal_obj = `, $lq__journal_obj);
|
||||
});
|
||||
|
||||
async function create_journal() {
|
||||
// Confirm before creating a new journal
|
||||
if (confirm('Are you sure you want to create a new journal?')) {
|
||||
console.log('Creating new journal...');
|
||||
} else {
|
||||
console.log('Journal creation cancelled.');
|
||||
return;
|
||||
}
|
||||
if (!confirm('Create a new journal?')) return;
|
||||
|
||||
if (
|
||||
$journals_sess.journal.new_journal_name &&
|
||||
$journals_sess.journal.new_journal_type_code
|
||||
) {
|
||||
$journals_slct.journal_id = null;
|
||||
const name = $journals_sess.journal.new_journal_name;
|
||||
const type = $journals_sess.journal.new_journal_type_code;
|
||||
|
||||
if (name && type) {
|
||||
try {
|
||||
let data_kv = {
|
||||
// account: $slct.account_id,
|
||||
person_id_random: $ae_loc.person_id,
|
||||
name: $journals_sess.journal.new_journal_name,
|
||||
type_code: $journals_sess.journal.new_journal_type_code,
|
||||
cfg_json: {
|
||||
category_li: [{ code: '', name: 'Default' }]
|
||||
const results = await journals_func.create_ae_obj__journal({
|
||||
api_cfg: $ae_api,
|
||||
account_id: $slct.account_id,
|
||||
data_kv: {
|
||||
person_id_random: $ae_loc.person_id,
|
||||
name,
|
||||
type_code: type,
|
||||
cfg_json: { category_li: [{ code: '', name: 'Default' }] }
|
||||
}
|
||||
};
|
||||
journals_func
|
||||
.create_ae_obj__journal({
|
||||
api_cfg: $ae_api,
|
||||
account_id: $slct.account_id,
|
||||
data_kv: data_kv,
|
||||
log_lvl: log_lvl
|
||||
})
|
||||
.then((results) => {
|
||||
console.log('New journal created:', results);
|
||||
$journals_slct.journal_id = results?.journal_id_random;
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error('Error creating journal:', error);
|
||||
alert('Failed to create journal.');
|
||||
})
|
||||
.finally(() => {
|
||||
if ($journals_slct.journal_id) {
|
||||
$journals_sess.show__modal_new__journal_obj = false;
|
||||
goto(`/journals/${$journals_slct.journal_id}`);
|
||||
}
|
||||
});
|
||||
// console.log('New journal created:', result);
|
||||
// $journals_sess.show__modal_new__journal_obj = false;
|
||||
// goto(`/journals/${result.journal_id_random}`);
|
||||
});
|
||||
if (results?.journal_id_random) {
|
||||
$journals_sess.show__modal_new__journal_obj = false;
|
||||
goto(`/journals/${results.journal_id_random}`);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error creating journal:', error);
|
||||
alert('Failed to create journal.');
|
||||
}
|
||||
} else {
|
||||
alert('Please provide both name and type for the journal.');
|
||||
alert('Please provide a name and type.');
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- Svelte Page for a AE Journals Module main page -->
|
||||
<section
|
||||
class="
|
||||
ae_journals
|
||||
mx-auto
|
||||
flex flex-col gap-1
|
||||
items-center
|
||||
min-h-full
|
||||
max-h-max
|
||||
min-w-full
|
||||
max-w-max
|
||||
space-y-2
|
||||
"
|
||||
>
|
||||
<h1 class="h1 text-4xl text-center text-gray-800 dark:text-gray-200">
|
||||
<!-- <Library size="1em" class="mx-1 inline-block" /> -->
|
||||
<SquareLibrary size="1em" class="mx-1 inline-block text-neutral-800/60" />
|
||||
Journals for {$ae_loc.account_name ?? 'Æ loading...'}
|
||||
{$ae_loc.person.given_name ? `- ${$ae_loc.person.given_name}` : ''}
|
||||
</h1>
|
||||
|
||||
<!-- Quick Add Section -->
|
||||
<div class="w-full max-w-2xl mx-auto px-4 pb-4">
|
||||
<AeCompJournalEntryQuickAdd class="shadow-lg" />
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="flex flex-row flex-wrap gap-1 items-center justify-center w-full border-gray-200 border-y-2 py-2"
|
||||
class:hidden={!$ae_loc.edit_mode}
|
||||
>
|
||||
<!-- Add new journal button -->
|
||||
<button
|
||||
type="button"
|
||||
class="
|
||||
btn btn-sm
|
||||
preset-tonal-secondary border border-secondary-500
|
||||
hover:preset-filled-secondary-500
|
||||
transition
|
||||
"
|
||||
onclick={() => {
|
||||
$journals_sess.show__modal_new__journal_obj = true;
|
||||
}}
|
||||
title="Create a new journal"
|
||||
>
|
||||
<!-- <FolderPlus class="mx-1" /> -->
|
||||
<BookPlus class="mx-1" />
|
||||
<span class="hidden md:inline"> New Journal </span>
|
||||
</button>
|
||||
|
||||
<!-- Import Entries button -->
|
||||
<button
|
||||
type="button"
|
||||
class="
|
||||
btn btn-sm
|
||||
preset-tonal-secondary border border-secondary-500
|
||||
hover:preset-filled-secondary-500
|
||||
transition
|
||||
"
|
||||
onclick={() => {
|
||||
show_import_modal = true;
|
||||
}}
|
||||
title="Import entries from Markdown files"
|
||||
>
|
||||
<FileUp class="mx-1" />
|
||||
<span class="hidden md:inline"> Import </span>
|
||||
</button>
|
||||
|
||||
<!-- Show Journals Config button -->
|
||||
<button
|
||||
type="button"
|
||||
class="
|
||||
btn btn-sm
|
||||
preset-tonal-secondary border border-secondary-500
|
||||
hover:preset-filled-secondary-500
|
||||
transition
|
||||
"
|
||||
onclick={() => {
|
||||
$journals_sess.show__modal__journals_config = true;
|
||||
// Redirect to the journals config page
|
||||
// goto('/journals/config');
|
||||
}}
|
||||
title="Configure Journals"
|
||||
>
|
||||
<Wrench class="mx-1" />
|
||||
<span class="hidden md:inline"> Journals Config </span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- <Element_data_store
|
||||
ds_code="journals___overview"
|
||||
ds_type="html"
|
||||
for_type="journal"
|
||||
for_id={$journals_slct.journal_id}
|
||||
display="block"
|
||||
class_li="p-2"
|
||||
/> -->
|
||||
|
||||
<!-- <Element_data_store
|
||||
ds_code="journals___example"
|
||||
ds_type="html"
|
||||
for_type="journal"
|
||||
for_id={$journals_slct.journal_id}
|
||||
ds_name="Default: Journals - Journals Example"
|
||||
store="local"
|
||||
display="block"
|
||||
class_li="variant-ghost-surface p-2"
|
||||
try_cache={true}
|
||||
show_edit={false}
|
||||
/> -->
|
||||
|
||||
{#await ae_acct.slct.journal_obj_li}
|
||||
<div class="flex flex-col items-center justify-center p-8">
|
||||
<Loader size="2em" class="animate-spin text-primary-500 mb-4" />
|
||||
<span class="text-lg text-gray-600 dark:text-gray-400">Loading journals...</span>
|
||||
<div class="page_container flex flex-col gap-8 items-center w-full min-h-screen p-4 md:p-8">
|
||||
|
||||
<!-- Header Section -->
|
||||
<header class="text-center space-y-2 max-w-3xl">
|
||||
<div class="flex items-center justify-center gap-3 mb-2">
|
||||
<div class="p-3 bg-surface-500/10 rounded-2xl">
|
||||
<SquareLibrary size="3em" class="text-primary-500" />
|
||||
</div>
|
||||
</div>
|
||||
{:then}
|
||||
<!-- <span class="flex flex-row items-center justify-center">
|
||||
<span class="fas fa-check text-green-500 mx-1"></span>
|
||||
<span>Loaded</span>
|
||||
</span> -->
|
||||
<h1 class="text-4xl md:text-5xl font-black tracking-tight text-surface-900 dark:text-surface-100">
|
||||
Journals
|
||||
</h1>
|
||||
<p class="text-surface-600 dark:text-surface-400 font-medium">
|
||||
Managed by <span class="text-primary-500">{$ae_loc.account_name ?? 'Æ loading...'}</span>
|
||||
{#if $ae_loc.person.given_name}
|
||||
• <span class="opacity-75">{$ae_loc.person.given_name}</span>
|
||||
{/if}
|
||||
</p>
|
||||
</header>
|
||||
|
||||
{#if $lq__journal_obj_li && $lq__journal_obj_li?.length}
|
||||
<!-- Quick Add Integrated Section -->
|
||||
<section class="w-full max-w-2xl">
|
||||
<div class="relative group">
|
||||
<div class="absolute -inset-1 bg-gradient-to-r from-primary-500 to-secondary-500 rounded-2xl blur opacity-25 group-hover:opacity-50 transition duration-1000 group-hover:duration-200"></div>
|
||||
<AeCompJournalEntryQuickAdd
|
||||
journals_li={$lq__journal_obj_li}
|
||||
class="relative shadow-2xl rounded-xl overflow-hidden border border-surface-500/10 bg-surface-50 dark:bg-surface-900"
|
||||
/>
|
||||
</div>
|
||||
<div class="mt-2 flex items-center justify-center gap-2 text-xs opacity-50 font-bold uppercase tracking-widest">
|
||||
<Sparkles size="1em" />
|
||||
<span>Fast Input Mode Active</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Administrative Action Bar (Edit Mode Only) -->
|
||||
{#if $ae_loc.edit_mode}
|
||||
<nav class="flex flex-row flex-wrap gap-3 items-center justify-center w-full py-4 border-y border-surface-500/10">
|
||||
<button
|
||||
type="button"
|
||||
class="btn variant-filled-secondary shadow-lg hover:scale-105 transition-transform"
|
||||
onclick={() => $journals_sess.show__modal_new__journal_obj = true}
|
||||
>
|
||||
<BookPlus size="1.2em" class="mr-2" />
|
||||
<span>New Journal</span>
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
class="btn variant-filled-surface border border-surface-500/30 shadow-lg hover:scale-105 transition-transform"
|
||||
onclick={() => show_import_modal = true}
|
||||
>
|
||||
<FileUp size="1.2em" class="mr-2" />
|
||||
<span>Import</span>
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
class="btn variant-soft-surface shadow-lg hover:scale-105 transition-transform"
|
||||
onclick={() => $journals_sess.show__modal__journals_config = true}
|
||||
>
|
||||
<Wrench size="1.2em" class="mr-2" />
|
||||
<span>Configure</span>
|
||||
</button>
|
||||
</nav>
|
||||
{/if}
|
||||
|
||||
<!-- Main List Section -->
|
||||
<main class="w-full flex justify-center">
|
||||
{#if $lq__journal_obj_li === undefined}
|
||||
<div class="flex flex-col items-center justify-center p-20 gap-4 opacity-50">
|
||||
<Loader2 size="3em" class="animate-spin" />
|
||||
<p class="text-xl font-bold">Accessing Brain...</p>
|
||||
</div>
|
||||
{:else if $lq__journal_obj_li.length > 0}
|
||||
<Journal_obj_li {lq__journal_obj_li} />
|
||||
{:else}
|
||||
<div class="flex flex-col items-center justify-center p-4 text-center">
|
||||
<p class="text-lg text-gray-600 dark:text-gray-400 mb-4">No journals found.</p>
|
||||
<p class="text-md text-gray-500 dark:text-gray-300">
|
||||
Click the "New Journal" button above to create your first journal.
|
||||
</p>
|
||||
<div class="max-w-md text-center p-12 bg-surface-500/5 rounded-3xl border-2 border-dashed border-surface-500/20">
|
||||
<SquareLibrary size="4em" class="mx-auto mb-4 opacity-20" />
|
||||
<h3 class="text-2xl font-bold mb-2">No Journals Found</h3>
|
||||
<p class="opacity-60 mb-6">You haven't created any journals yet. Start by creating one to begin your documentation journey.</p>
|
||||
<button
|
||||
type="button"
|
||||
class="btn variant-filled-primary"
|
||||
onclick={() => $journals_sess.show__modal_new__journal_obj = true}
|
||||
>
|
||||
Create Your First Journal
|
||||
</button>
|
||||
</div>
|
||||
{/if}
|
||||
{:catch error}
|
||||
<div class="text-red-800">
|
||||
<span class="fas fa-exclamation-triangle text-xl"></span>
|
||||
<span>Error: {error.message}</span>
|
||||
</div>
|
||||
{/await}
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<!-- Modal for creating new journal -->
|
||||
<!-- Modals -->
|
||||
{#if $journals_sess.show__modal_new__journal_obj}
|
||||
<Modal
|
||||
title="Create New Journal"
|
||||
bind:open={$journals_sess.show__modal_new__journal_obj}
|
||||
autoclose={false}
|
||||
placement="top-center"
|
||||
size="xl"
|
||||
class="top-center bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-200 rounded-lg border-gray-200 dark:border-gray-700 divide-gray-200 dark:divide-gray-700 shadow-md relative flex flex-col mx-auto w-full divide-y"
|
||||
size="md"
|
||||
class="bg-white dark:bg-surface-900 shadow-2xl rounded-2xl"
|
||||
>
|
||||
<div class="modal">
|
||||
<div class="modal-box">
|
||||
<h3 class="font-bold text-lg">Create New Journal</h3>
|
||||
<div class="py-4">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Journal Name"
|
||||
bind:value={$journals_sess.journal.new_journal_name}
|
||||
class="input input-bordered w-full mb-2"
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Journal Type"
|
||||
bind:value={$journals_sess.journal.new_journal_type_code}
|
||||
class="input input-bordered w-full mb-2"
|
||||
/>
|
||||
</div>
|
||||
<div class="modal-action">
|
||||
<button class="btn preset-tonal-primary" onclick={create_journal}>Create</button
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
onclick={() => {
|
||||
// Close the modal
|
||||
$journals_sess.show__modal_new__journal_obj = false;
|
||||
}}
|
||||
class="btn preset-tonal-secondary"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
<div class="p-2 space-y-4">
|
||||
<div class="space-y-1">
|
||||
<label class="label text-sm font-bold opacity-75">Journal Name</label>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="e.g. My Daily Logs"
|
||||
bind:value={$journals_sess.journal.new_journal_name}
|
||||
class="input variant-filled-surface rounded-lg"
|
||||
/>
|
||||
</div>
|
||||
<div class="space-y-1">
|
||||
<label class="label text-sm font-bold opacity-75">Type Code</label>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="e.g. diary, log, notebook"
|
||||
bind:value={$journals_sess.journal.new_journal_type_code}
|
||||
class="input variant-filled-surface rounded-lg"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex justify-end gap-2 pt-4">
|
||||
<button type="button" class="btn variant-soft-surface" onclick={() => $journals_sess.show__modal_new__journal_obj = false}>Cancel</button>
|
||||
<button type="button" class="btn variant-filled-primary font-bold" onclick={create_journal}>Create Journal</button>
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
@@ -372,8 +220,5 @@
|
||||
<AeCompModalJournalImport
|
||||
bind:open={show_import_modal}
|
||||
onClose={() => (show_import_modal = false)}
|
||||
onImportComplete={handle_import_complete}
|
||||
/>
|
||||
|
||||
<style lang="postcss">
|
||||
</style>
|
||||
onImportComplete={() => {}}
|
||||
/>
|
||||
@@ -74,7 +74,7 @@
|
||||
// 1. Initial Load & Background Sync
|
||||
$effect(() => {
|
||||
const entry = $lq__journal_entry_obj;
|
||||
if (entry && entry.updated_on) {
|
||||
if (entry && (entry.updated_on || entry.created_on)) {
|
||||
// Only sync if saved and not currently processing/editing
|
||||
if (save_status === 'saved' && !has_unsaved_changes && !is_processing) {
|
||||
const base = {
|
||||
|
||||
@@ -2,25 +2,31 @@
|
||||
import { api } from '$lib/api/api';
|
||||
import { ae_api } from '$lib/stores/ae_stores';
|
||||
import { journals_slct, journals_loc, journals_trig } from '$lib/ae_journals/ae_journals_stores';
|
||||
import { journals_func } from '$lib/ae_journals/ae_journals_functions';
|
||||
import { BookType } from '@lucide/svelte';
|
||||
|
||||
// Props
|
||||
let {
|
||||
class: className = "",
|
||||
placeholder = "Type your quick note... (First line = Title)"
|
||||
placeholder = "Type your quick note... (First line = Title)",
|
||||
journals_li = [] // Optional list of journals to select from
|
||||
} = $props();
|
||||
|
||||
// State
|
||||
let note_content = $state("");
|
||||
let is_submitting = $state(false);
|
||||
|
||||
// Derived
|
||||
// Determine target journal: Selected > Default Preference > First Available?
|
||||
let target_journal_id = $derived($journals_slct.journal_id || $journals_loc.qry__journal_id);
|
||||
// Derived / Local target
|
||||
// We prefer the persisted 'qry__journal_id' if we are on the main landing page
|
||||
let selected_journal_id = $state($journals_loc.qry__journal_id);
|
||||
|
||||
// If a journal is explicitly selected via slct (e.g. we are in a journal view), use that
|
||||
let target_journal_id = $derived($journals_slct.journal_id || selected_journal_id);
|
||||
|
||||
async function handle_submit() {
|
||||
if (!note_content.trim()) return;
|
||||
if (!target_journal_id) {
|
||||
alert("No journal selected!");
|
||||
alert("Please select a target journal first.");
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -30,33 +36,32 @@
|
||||
let name = lines[0].substring(0, 100);
|
||||
if (lines[0].length > 100) name += "...";
|
||||
|
||||
// If content is just one line, name is content, content is content.
|
||||
// If multiple lines, name is line 0, content is full text.
|
||||
|
||||
const payload = {
|
||||
journal_id: target_journal_id,
|
||||
const data_kv = {
|
||||
name: name,
|
||||
content: note_content,
|
||||
type_code: 'note', // Default to note
|
||||
// created_on: handled by backend usually, or we can send ISO
|
||||
enabled: true,
|
||||
hidden: false
|
||||
type_code: 'note',
|
||||
private: false, // Ensure notes are public/decrypted by default
|
||||
enable: true,
|
||||
hide: false
|
||||
};
|
||||
|
||||
// Use the store value directly via $ prefix
|
||||
const api_cfg = $ae_api;
|
||||
|
||||
const res = await api.create_ae_obj_v3({
|
||||
api_cfg: api_cfg,
|
||||
obj_type: 'journal_entry',
|
||||
fields: payload
|
||||
});
|
||||
try {
|
||||
const res = await journals_func.create_ae_obj__journal_entry({
|
||||
api_cfg: $ae_api,
|
||||
journal_id: target_journal_id, // Pass string ID here
|
||||
data_kv: data_kv,
|
||||
log_lvl: 1
|
||||
});
|
||||
|
||||
if (res) {
|
||||
note_content = "";
|
||||
// Trigger refresh
|
||||
$journals_trig.journal_entry_li = true;
|
||||
} else {
|
||||
if (res) {
|
||||
note_content = "";
|
||||
// Trigger refresh
|
||||
$journals_trig.journal_entry_li = true;
|
||||
} else {
|
||||
alert("Failed to create note.");
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Error creating journal entry:", error);
|
||||
alert("Failed to create note.");
|
||||
}
|
||||
|
||||
@@ -68,39 +73,67 @@
|
||||
handle_submit();
|
||||
}
|
||||
}
|
||||
|
||||
function handle_journal_change(e: Event) {
|
||||
const val = (e.target as HTMLSelectElement).value;
|
||||
selected_journal_id = val;
|
||||
$journals_loc.qry__journal_id = val; // Persist choice
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="card p-4 space-y-4 variant-filled-surface {className}">
|
||||
<header class="flex justify-between items-center">
|
||||
<h3 class="h3">Quick Add</h3>
|
||||
{#if !target_journal_id}
|
||||
<header class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-2">
|
||||
<h3 class="h3 flex items-center gap-2">
|
||||
<BookType size="1.2em" class="text-primary-500" />
|
||||
Quick Add
|
||||
</h3>
|
||||
|
||||
{#if journals_li && journals_li.length > 0}
|
||||
<div class="w-full sm:w-auto">
|
||||
<select
|
||||
class="select select-sm variant-filled-surface border-surface-500/30 font-bold"
|
||||
value={target_journal_id}
|
||||
onchange={handle_journal_change}
|
||||
>
|
||||
<option value="" disabled selected={!target_journal_id}>Select Target Journal...</option>
|
||||
{#each journals_li as journal}
|
||||
<option value={journal.id}>{journal.name}</option>
|
||||
{/each}
|
||||
</select>
|
||||
</div>
|
||||
{:else if !target_journal_id}
|
||||
<span class="badge variant-filled-error">No Journal Selected</span>
|
||||
{/if}
|
||||
</header>
|
||||
|
||||
<textarea
|
||||
class="textarea"
|
||||
rows="3"
|
||||
bind:value={note_content}
|
||||
class="textarea variant-filled-surface border-surface-500/20"
|
||||
rows="3"
|
||||
bind:value={note_content}
|
||||
{placeholder}
|
||||
onkeydown={handle_keydown}
|
||||
disabled={is_submitting}
|
||||
></textarea>
|
||||
|
||||
<div class="flex justify-end space-x-2">
|
||||
<button
|
||||
class="btn variant-ghost-surface"
|
||||
onclick={() => note_content = ""}
|
||||
disabled={is_submitting || note_content.length === 0}
|
||||
>
|
||||
Clear
|
||||
</button>
|
||||
<button
|
||||
class="btn variant-filled-primary"
|
||||
onclick={handle_submit}
|
||||
disabled={is_submitting || !target_journal_id || note_content.length === 0}
|
||||
>
|
||||
{#if is_submitting}Saving...{:else}Add Note{/if}
|
||||
</button>
|
||||
<div class="flex justify-between items-center">
|
||||
<span class="text-[10px] opacity-50 font-mono uppercase tracking-tighter hidden sm:block">
|
||||
Press Ctrl + Enter to save
|
||||
</span>
|
||||
<div class="flex justify-end space-x-2 grow sm:grow-0">
|
||||
<button
|
||||
class="btn btn-sm variant-ghost-surface"
|
||||
onclick={() => note_content = ""}
|
||||
disabled={is_submitting || note_content.length === 0}
|
||||
>
|
||||
Clear
|
||||
</button>
|
||||
<button
|
||||
class="btn btn-sm variant-filled-primary font-bold shadow-md"
|
||||
onclick={handle_submit}
|
||||
disabled={is_submitting || !target_journal_id || note_content.length === 0}
|
||||
>
|
||||
{#if is_submitting}Saving...{:else}Add Note{/if}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,31 +1,14 @@
|
||||
<script lang="ts">
|
||||
// let log_lvl: number = 0;
|
||||
|
||||
// *** Import Svelte specific
|
||||
// import { goto } from '$app/navigation';
|
||||
|
||||
// *** Import other supporting libraries
|
||||
// import { Spinner } from 'flowbite-svelte';
|
||||
import { BookOpenText, BookType } from '@lucide/svelte';
|
||||
|
||||
// *** Import Aether specific variables and functions
|
||||
/**
|
||||
* ae_comp__journal_obj_li.svelte
|
||||
* Modernized Journal List Component
|
||||
* Layout: Responsive Grid (1 col mobile, 2 col tablet, 3 col desktop)
|
||||
* Style: Tailwind 4 + Skeleton UI Reference Standard
|
||||
*/
|
||||
import { BookOpenText, BookType, Hash, Calendar, Clock } from '@lucide/svelte';
|
||||
import { ae_util } from '$lib/ae_utils/ae_utils';
|
||||
import {
|
||||
ae_snip,
|
||||
ae_loc,
|
||||
ae_sess,
|
||||
ae_api,
|
||||
ae_trig,
|
||||
slct,
|
||||
slct_trigger
|
||||
} from '$lib/stores/ae_stores';
|
||||
import {
|
||||
journals_loc,
|
||||
journals_sess,
|
||||
journals_slct
|
||||
} from '$lib/ae_journals/ae_journals_stores';
|
||||
import { ae_loc } from '$lib/stores/ae_stores';
|
||||
|
||||
// *** Setup Svelte properties
|
||||
interface Props {
|
||||
lq__journal_obj_li: any;
|
||||
}
|
||||
@@ -33,128 +16,99 @@
|
||||
let { lq__journal_obj_li }: Props = $props();
|
||||
</script>
|
||||
|
||||
<section class="journal_list flex flex-col gap-2 items-center justify-center w-full">
|
||||
<!-- Responsive Grid Container -->
|
||||
<section class="journal_list grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 w-full max-w-7xl px-4">
|
||||
{#if $lq__journal_obj_li && $lq__journal_obj_li.length}
|
||||
{#each $lq__journal_obj_li as journals_journal_obj, index}
|
||||
{#each $lq__journal_obj_li as journal, index}
|
||||
<div
|
||||
class="
|
||||
container journal journal_obj
|
||||
border border-surface-500/30 rounded-lg p-3 mb-4 space-y-3
|
||||
w-full max-w-2xl
|
||||
flex flex-col items-center justify-center
|
||||
bg-surface-50 dark:bg-surface-900
|
||||
shadow-sm hover:shadow-md transition-shadow
|
||||
"
|
||||
class:hidden={(journals_journal_obj?.hide || !journals_journal_obj?.enable) &&
|
||||
!$ae_loc.trusted_access}
|
||||
class:opacity-50={journals_journal_obj.hide}
|
||||
class:preset-filled-warning-100-900={!journals_journal_obj?.enable}
|
||||
journal_card
|
||||
group relative
|
||||
flex flex-col justify-between
|
||||
bg-surface-50 dark:bg-surface-900
|
||||
border border-surface-500/20 rounded-xl
|
||||
p-5 shadow-sm hover:shadow-xl hover:border-primary-500/50
|
||||
transition-all duration-200 ease-in-out
|
||||
"
|
||||
class:hidden={(journal?.hide || !journal?.enable) && !$ae_loc.trusted_access}
|
||||
class:opacity-60={journal.hide}
|
||||
class:border-warning-500={!journal?.enable}
|
||||
>
|
||||
<header
|
||||
class="
|
||||
ae_header
|
||||
flex flex-row gap-2 items-center justify-between
|
||||
w-full
|
||||
"
|
||||
>
|
||||
<h3 class="journal__name text-xl md:text-2xl font-bold flex items-center gap-2 text-surface-900 dark:text-surface-100">
|
||||
<BookType size="1.25em" class="text-primary-500" />
|
||||
<span class="journal__name truncate">{journals_journal_obj.name}</span>
|
||||
</h3>
|
||||
|
||||
<!-- Show a label if the type code is set -->
|
||||
{#if journals_journal_obj.type_code}
|
||||
<span
|
||||
class="
|
||||
preset-tonal-warning
|
||||
text-xs font-semibold
|
||||
mr-2 px-2.5 py-0.5
|
||||
rounded
|
||||
|
||||
"
|
||||
>
|
||||
<!-- <span class="ae_label">Type:</span> -->
|
||||
<span class="ae_value">{journals_journal_obj.type_code}</span>
|
||||
</span>
|
||||
{/if}
|
||||
</header>
|
||||
|
||||
<!-- {journals_journal_obj?.tmp_sort_3} -->
|
||||
|
||||
{#if journals_journal_obj.description && $ae_loc.edit_mode}
|
||||
<div
|
||||
class="
|
||||
prose
|
||||
space-y-1
|
||||
journal__description
|
||||
p-2
|
||||
w-full max-w-(--breakpoint-sm) md:max-w-(--breakpoint-md)
|
||||
font-mono
|
||||
text-gray-900
|
||||
dark:bg-blue-900 dark:text-gray-100
|
||||
shadow-md rounded-lg
|
||||
text-sm font-normal text-wrap word-break
|
||||
|
||||
prose-h1:underline prose-h1:decoration-double
|
||||
prose-h2:underline
|
||||
prose-h1:text-2xl prose-h2:text-xl prose-h3:text-lg
|
||||
prose-h1:m-0 prose-h2:m-0 prose-h3:m-0 prose-h4:m-0 prose-h5:m-0 prose-h6:m-0
|
||||
prose-li:m-0 prose-li:p-0 prose-li:line-height-none
|
||||
"
|
||||
>
|
||||
{@html journals_journal_obj.description_md_html}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<div class="ae_options flex flex-row flex-wrap gap-3 items-center justify-center">
|
||||
<a
|
||||
href="/journals/{journals_journal_obj?.journal_id}"
|
||||
class="btn variant-filled-primary md:btn-lg font-bold shadow-lg hover:scale-105 transition-transform"
|
||||
title={`View: ${journals_journal_obj?.name}`}
|
||||
>
|
||||
<BookOpenText size="1.25em" />
|
||||
<span>Open Journal</span>
|
||||
|
||||
{#if journals_journal_obj?.journal_entry_count}
|
||||
<span class="badge variant-filled-secondary ml-2">
|
||||
{journals_journal_obj?.journal_entry_count} {journals_journal_obj?.journal_entry_count === 1 ? 'entry' : 'entries'}
|
||||
<!-- Top Section: Title & Badge -->
|
||||
<div class="space-y-3">
|
||||
<header class="flex justify-between items-start gap-2">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="p-2 bg-primary-500/10 rounded-lg text-primary-500 group-hover:bg-primary-500 group-hover:text-white transition-colors">
|
||||
<BookType size="1.5em" />
|
||||
</div>
|
||||
<h3 class="text-xl font-bold text-surface-900 dark:text-surface-100 line-clamp-1">
|
||||
{journal.name}
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
{#if journal.type_code}
|
||||
<span class="badge preset-tonal-warning text-[10px] uppercase tracking-wider font-bold">
|
||||
{journal.type_code}
|
||||
</span>
|
||||
{/if}
|
||||
</a>
|
||||
</header>
|
||||
|
||||
<!-- Description (Power User / Edit Mode Only) -->
|
||||
{#if journal.description && $ae_loc.edit_mode}
|
||||
<div class="prose prose-sm dark:prose-invert max-h-24 overflow-y-auto bg-surface-100/50 dark:bg-surface-800/50 p-3 rounded-lg text-xs font-mono">
|
||||
{@html journal.description_md_html}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<!-- Quick Stats (Clean View) -->
|
||||
<div class="flex items-center gap-4 text-xs text-surface-600 dark:text-surface-400">
|
||||
<div class="flex items-center gap-1" title="Entry Count">
|
||||
<Hash size="1.2em" />
|
||||
<span class="font-bold">{journal.journal_entry_count ?? 0}</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-1" title="Last Updated">
|
||||
<Clock size="1.2em" />
|
||||
<span>{ae_util.iso_datetime_formatter(journal.updated_on || journal.created_on, 'date_short')}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<section
|
||||
class="ae_section ae_footer ae_meta journal__meta mt-2 flex flex-col sm:flex-row gap-1 items-center justify-center text-sm text-gray-500"
|
||||
class:hidden={!$ae_loc.administrator_access || !$ae_loc.edit_mode}
|
||||
>
|
||||
<div class="ae_group">
|
||||
{#if !journals_journal_obj.updated_on}
|
||||
<span class="journal__created_on">
|
||||
<span class="ae_label">Created on:</span>
|
||||
<span class="ae_value"
|
||||
>{ae_util.iso_datetime_formatter(
|
||||
journals_journal_obj.created_on,
|
||||
'datetime_12_long'
|
||||
)}</span
|
||||
>
|
||||
</span>
|
||||
{:else}
|
||||
<span class="journal__updated_on">
|
||||
<span class="ae_label">Updated on:</span>
|
||||
<span class="ae_value"
|
||||
>{ae_util.iso_datetime_formatter(
|
||||
journals_journal_obj.updated_on,
|
||||
'datetime_12_long'
|
||||
)}</span
|
||||
>
|
||||
</span>
|
||||
<!-- Bottom Section: Actions -->
|
||||
<div class="mt-6 pt-4 border-t border-surface-500/10 flex flex-col gap-3">
|
||||
<a
|
||||
href="/journals/{journal?.journal_id}"
|
||||
class="btn variant-filled-primary w-full font-bold shadow-md hover:scale-[1.02] active:scale-95 transition-all"
|
||||
>
|
||||
<BookOpenText size="1.2em" class="mr-2" />
|
||||
<span>Open Journal</span>
|
||||
</a>
|
||||
|
||||
<!-- Admin Metadata (Edit Mode Only) -->
|
||||
{#if $ae_loc.edit_mode && $ae_loc.administrator_access}
|
||||
<div class="flex items-center justify-center gap-2 text-[10px] opacity-50 font-mono">
|
||||
<Calendar size="1em" />
|
||||
<span>Created: {ae_util.iso_datetime_formatter(journal.created_on, 'datetime_iso_12_no_seconds')}</span>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<!-- Status Indicators (Edit Mode Only) -->
|
||||
{#if $ae_loc.edit_mode}
|
||||
<div class="absolute -top-2 -right-2 flex gap-1">
|
||||
{#if journal.hide}
|
||||
<span class="badge-icon variant-filled-surface shadow-sm" title="Hidden">🚫</span>
|
||||
{/if}
|
||||
{#if !journal.enable}
|
||||
<span class="badge-icon variant-filled-warning shadow-sm" title="Disabled">⚠️</span>
|
||||
{/if}
|
||||
</div>
|
||||
</section>
|
||||
{/if}
|
||||
</div>
|
||||
{/each}
|
||||
{:else}
|
||||
No journals found at this time
|
||||
<div class="col-span-full p-20 text-center opacity-50 flex flex-col items-center gap-4">
|
||||
<BookType size="4em" />
|
||||
<p class="text-xl">No journals found in this view.</p>
|
||||
</div>
|
||||
{/if}
|
||||
</section>
|
||||
<!-- {/if} -->
|
||||
</section>
|
||||
Reference in New Issue
Block a user