133 lines
3.3 KiB
Svelte
133 lines
3.3 KiB
Svelte
<script lang="ts">
|
|
import FragmentEditor from "$lib/components/editor/FragmentEditor.svelte";
|
|
import ListEditor from "$lib/components/editor/ListEditor.svelte";
|
|
import TodoEditor from "$lib/components/editor/TodoEditor.svelte";
|
|
import MarkdownEditor from "$lib/components/editor/MarkdownEditor.svelte";
|
|
|
|
export let activeSection = "entries";
|
|
export let openDocumentId = "entries/daily-notes";
|
|
export let openDocumentName = "Daily Notes";
|
|
export let openDocumentContent = "";
|
|
export let onDocumentContentChange: (content: string) => void = () => {};
|
|
export let onOpenDocument: (doc: {
|
|
id: string;
|
|
label: string;
|
|
initialContent: string;
|
|
linkedFrom?: {
|
|
id: string;
|
|
label: string;
|
|
initialContent: string;
|
|
section: "entries" | "fragments" | "todos" | "lists" | "calendar";
|
|
};
|
|
}) => void = () => {};
|
|
export let onDeleteDocument: (id: string) => void = () => {};
|
|
export let showLinkedBackButton = false;
|
|
export let onLinkedBack: () => void = () => {};
|
|
export let previewOnly = true;
|
|
</script>
|
|
|
|
<main class="editor-panel" aria-label="Editor area">
|
|
{#if showLinkedBackButton}
|
|
<div class="editor-nav">
|
|
<button type="button" class="back-btn" on:click={onLinkedBack} aria-label="Back to source entry">
|
|
<span class="material-symbols-outlined" aria-hidden="true">arrow_back</span>
|
|
</button>
|
|
</div>
|
|
{/if}
|
|
|
|
{#if !openDocumentId}
|
|
<div class="editor-empty">
|
|
<span class="material-symbols-outlined empty-icon">edit_note</span>
|
|
<p>Select or create an item to get started</p>
|
|
</div>
|
|
{:else if activeSection === "fragments"}
|
|
<FragmentEditor
|
|
{openDocumentId}
|
|
{openDocumentName}
|
|
{openDocumentContent}
|
|
{onDocumentContentChange}
|
|
{onOpenDocument}
|
|
{onDeleteDocument}
|
|
externalEditRequested={!previewOnly}
|
|
/>
|
|
{:else if activeSection === "todos"}
|
|
<TodoEditor
|
|
{openDocumentId}
|
|
{openDocumentName}
|
|
{openDocumentContent}
|
|
{onDocumentContentChange}
|
|
/>
|
|
{:else if activeSection === "lists"}
|
|
<ListEditor
|
|
{openDocumentId}
|
|
{openDocumentName}
|
|
{openDocumentContent}
|
|
{onDocumentContentChange}
|
|
/>
|
|
{:else}
|
|
<MarkdownEditor
|
|
{openDocumentId}
|
|
{openDocumentName}
|
|
{openDocumentContent}
|
|
{onDocumentContentChange}
|
|
{onOpenDocument}
|
|
{previewOnly}
|
|
/>
|
|
{/if}
|
|
</main>
|
|
|
|
<style>
|
|
.editor-panel {
|
|
background: var(--bg-editor);
|
|
padding: 18px 20px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 16px;
|
|
min-height: 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.editor-nav {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
.back-btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 34px;
|
|
height: 34px;
|
|
border-radius: 8px;
|
|
border: 1px solid var(--border-soft);
|
|
background: color-mix(in srgb, var(--surface-1) 90%, var(--bg-editor) 10%);
|
|
color: var(--text-primary);
|
|
padding: 0;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.back-btn:hover {
|
|
background: var(--bg-hover);
|
|
}
|
|
|
|
.editor-empty {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 12px;
|
|
color: var(--text-dim);
|
|
|
|
.empty-icon {
|
|
font-size: 2.4rem;
|
|
opacity: 0.5;
|
|
}
|
|
|
|
p {
|
|
font-size: 0.88rem;
|
|
}
|
|
}
|
|
</style>
|