Note editor sidebar, full-doc assist, persistent drafts, version history
NoteEditorView: two-column sidebar layout (project/milestone/tags/assist always visible), removed assist toggle button, InlineAssistPanel removed. Writing assist: whole_doc mode rewrites entire document; DiffView.vue replaces editor during review showing full-document diff. Scope dropdown in sidebar switches between whole-document and section modes. Persistent drafts: migration 0022 adds note_drafts (UNIQUE per note+user) and note_versions (max 20, auto-pruned) tables. Draft saved after generation completes, restored on editor mount, cleared on accept/reject. Version snapshot created automatically whenever note body changes on save. HistoryPanel.vue: version list + DiffView modal, restore button writes body back to editor. Config: OLLAMA_NUM_CTX default raised to 65536; assist num_predict now tracks Config.OLLAMA_NUM_CTX instead of a hardcoded 4096. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -4,15 +4,16 @@ import { useRoute, useRouter, onBeforeRouteLeave } from "vue-router";
|
||||
import { useNotesStore } from "@/stores/notes";
|
||||
import { useToastStore } from "@/stores/toast";
|
||||
import { renderMarkdown } from "@/utils/markdown";
|
||||
import { useAssist } from "@/composables/useAssist";
|
||||
import { apiPost } from "@/api/client";
|
||||
import { useAssist, type NoteDraft } from "@/composables/useAssist";
|
||||
import { apiPost, apiGet } from "@/api/client";
|
||||
import type { Editor } from "@tiptap/vue-3";
|
||||
import MarkdownToolbar from "@/components/MarkdownToolbar.vue";
|
||||
import TiptapEditor from "@/components/TiptapEditor.vue";
|
||||
import TagInput from "@/components/TagInput.vue";
|
||||
import ProjectSelector from "@/components/ProjectSelector.vue";
|
||||
import MilestoneSelector from "@/components/MilestoneSelector.vue";
|
||||
import InlineAssistPanel from "@/components/InlineAssistPanel.vue";
|
||||
import DiffView from "@/components/DiffView.vue";
|
||||
import HistoryPanel from "@/components/HistoryPanel.vue";
|
||||
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
@@ -27,6 +28,8 @@ const milestoneId = ref<number | null>(null);
|
||||
const dirty = ref(false);
|
||||
const saving = ref(false);
|
||||
const showPreview = ref(false);
|
||||
const sidebarOpen = ref(true);
|
||||
const showHistory = ref(false);
|
||||
const editorRef = ref<InstanceType<typeof TiptapEditor> | null>(null);
|
||||
const tiptapEditor = computed<Editor | null>(() => {
|
||||
return (editorRef.value?.editor as Editor | undefined) ?? null;
|
||||
@@ -39,24 +42,46 @@ const isEditing = computed(() => noteId.value !== null);
|
||||
|
||||
const renderedPreview = computed(() => renderMarkdown(body.value));
|
||||
|
||||
// AI Assist
|
||||
const assist = useAssist(body);
|
||||
// AI Assist — pass noteId for draft persistence
|
||||
const assist = useAssist(body, noteId);
|
||||
|
||||
const assistLabel = computed(() => {
|
||||
if (assist.isProofreading.value) return "Proofreading document...";
|
||||
const t = assist.target.value;
|
||||
if (!t) return "Generating...";
|
||||
const heading = t.text.split("\n")[0];
|
||||
return `Revising: "${heading.length > 50 ? heading.slice(0, 50) + "..." : heading}"`;
|
||||
// Scope selector options: "Whole document" + one per section
|
||||
const scopeOptions = computed(() => {
|
||||
const opts: Array<{ value: string; label: string }> = [
|
||||
{ value: '__document__', label: 'Whole document' },
|
||||
];
|
||||
for (const section of assist.sections.value) {
|
||||
opts.push({
|
||||
value: String(assist.sections.value.indexOf(section)),
|
||||
label: section.heading || '(preamble)',
|
||||
});
|
||||
}
|
||||
return opts;
|
||||
});
|
||||
|
||||
// Assist panel toggle (persisted)
|
||||
const ASSIST_KEY = 'fa-assist-open';
|
||||
const assistOpen = ref(localStorage.getItem(ASSIST_KEY) !== 'false');
|
||||
function toggleAssist() {
|
||||
assistOpen.value = !assistOpen.value;
|
||||
localStorage.setItem(ASSIST_KEY, String(assistOpen.value));
|
||||
}
|
||||
const scopeSelectValue = computed({
|
||||
get() {
|
||||
if (assist.scopeMode.value === 'document') return '__document__';
|
||||
if (assist.selectedSection.value) {
|
||||
const idx = assist.sections.value.indexOf(assist.selectedSection.value);
|
||||
return idx >= 0 ? String(idx) : '__document__';
|
||||
}
|
||||
return '__document__';
|
||||
},
|
||||
set(val: string) {
|
||||
if (val === '__document__') {
|
||||
assist.scopeMode.value = 'document';
|
||||
assist.selectedSection.value = null;
|
||||
} else {
|
||||
const idx = Number(val);
|
||||
const section = assist.sections.value[idx];
|
||||
if (section) {
|
||||
assist.scopeMode.value = 'section';
|
||||
assist.selectSection(section);
|
||||
}
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
// Floating inline assist button
|
||||
const floatingAssist = ref({ show: false, top: 0, left: 0 });
|
||||
@@ -79,25 +104,17 @@ function onSelectionChange(payload: { text: string; start: number; end: number }
|
||||
|
||||
function handleInlineAssist() {
|
||||
if (!pendingSelection.value) return;
|
||||
assist.scopeMode.value = 'section';
|
||||
assist.selectTextRange(pendingSelection.value.start, pendingSelection.value.end);
|
||||
assistOpen.value = true;
|
||||
localStorage.setItem(ASSIST_KEY, 'true');
|
||||
floatingAssist.value.show = false;
|
||||
nextTick(() => instructionRef.value?.focus());
|
||||
}
|
||||
|
||||
function handleAssistAccept() {
|
||||
const newBody = assist.accept();
|
||||
if (newBody !== body.value) {
|
||||
body.value = newBody;
|
||||
markDirty();
|
||||
toast.show("Section updated");
|
||||
}
|
||||
}
|
||||
|
||||
function truncateTarget(text: string, max = 60): string {
|
||||
const first = text.split("\n")[0];
|
||||
return first.length > max ? first.slice(0, max) + "..." : first;
|
||||
body.value = newBody;
|
||||
markDirty();
|
||||
toast.show("Document updated");
|
||||
}
|
||||
|
||||
// Tag suggestions
|
||||
@@ -174,6 +191,14 @@ onMounted(async () => {
|
||||
savedProjectId = projectId.value;
|
||||
savedMilestoneId = milestoneId.value;
|
||||
}
|
||||
|
||||
// Restore pending draft if any
|
||||
try {
|
||||
const draft = await apiGet<NoteDraft>(`/api/notes/${noteId.value}/draft`);
|
||||
if (draft) assist.loadDraft(draft);
|
||||
} catch {
|
||||
// No draft — normal
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
@@ -218,9 +243,7 @@ async function save() {
|
||||
const showDeleteConfirm = ref(false);
|
||||
|
||||
function remove() {
|
||||
if (noteId.value) {
|
||||
showDeleteConfirm.value = true;
|
||||
}
|
||||
if (noteId.value) showDeleteConfirm.value = true;
|
||||
}
|
||||
|
||||
async function confirmDelete() {
|
||||
@@ -236,14 +259,17 @@ async function confirmDelete() {
|
||||
}
|
||||
}
|
||||
|
||||
// Auto-save every 5 minutes when editing an existing note
|
||||
// Auto-save every 5 minutes
|
||||
let autoSaveTimer: ReturnType<typeof setInterval> | null = null;
|
||||
|
||||
async function autoSave() {
|
||||
if (!isEditing.value || !dirty.value || saving.value) return;
|
||||
saving.value = true;
|
||||
try {
|
||||
await store.updateNote(noteId.value!, { title: title.value, body: body.value, tags: tags.value, project_id: projectId.value, milestone_id: milestoneId.value } as Record<string, unknown>);
|
||||
await store.updateNote(noteId.value!, {
|
||||
title: title.value, body: body.value, tags: tags.value,
|
||||
project_id: projectId.value, milestone_id: milestoneId.value,
|
||||
} as Record<string, unknown>);
|
||||
savedTitle = title.value;
|
||||
savedBody = body.value;
|
||||
savedTags = [...tags.value];
|
||||
@@ -252,7 +278,7 @@ async function autoSave() {
|
||||
dirty.value = false;
|
||||
toast.show("Auto-saved");
|
||||
} catch {
|
||||
// Silent — user can still save manually
|
||||
// Silent
|
||||
} finally {
|
||||
saving.value = false;
|
||||
}
|
||||
@@ -261,7 +287,6 @@ async function autoSave() {
|
||||
onMounted(() => { autoSaveTimer = setInterval(autoSave, 5 * 60 * 1000); });
|
||||
onUnmounted(() => { if (autoSaveTimer !== null) clearInterval(autoSaveTimer); });
|
||||
|
||||
// Ctrl+S handler
|
||||
function onKeydown(e: KeyboardEvent) {
|
||||
if ((e.ctrlKey || e.metaKey) && e.key === "s") {
|
||||
e.preventDefault();
|
||||
@@ -272,37 +297,27 @@ function onKeydown(e: KeyboardEvent) {
|
||||
onMounted(() => document.addEventListener("keydown", onKeydown));
|
||||
onUnmounted(() => document.removeEventListener("keydown", onKeydown));
|
||||
|
||||
// Unsaved changes guard — in-app navigation
|
||||
onBeforeRouteLeave(() => {
|
||||
if (dirty.value) {
|
||||
return confirm("You have unsaved changes. Leave anyway?");
|
||||
}
|
||||
if (dirty.value) return confirm("You have unsaved changes. Leave anyway?");
|
||||
});
|
||||
|
||||
// Unsaved changes guard — browser close/reload
|
||||
function onBeforeUnload(e: BeforeUnloadEvent) {
|
||||
if (dirty.value) {
|
||||
e.preventDefault();
|
||||
}
|
||||
if (dirty.value) e.preventDefault();
|
||||
}
|
||||
onMounted(() => window.addEventListener("beforeunload", onBeforeUnload));
|
||||
onUnmounted(() => window.removeEventListener("beforeunload", onBeforeUnload));
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<main class="editor-page">
|
||||
<main class="editor-page note-editor-page">
|
||||
<div class="editor-header">
|
||||
<div class="toolbar">
|
||||
<router-link to="/notes" class="btn-back">Back</router-link>
|
||||
<button class="btn-save" @click="save" :disabled="saving">
|
||||
{{ saving ? "Saving..." : "Save" }}
|
||||
</button>
|
||||
<button v-if="isEditing" class="btn-delete" @click="remove">
|
||||
Delete
|
||||
</button>
|
||||
<button class="btn-assist-toggle" :class="{ active: assistOpen }" @click="toggleAssist">
|
||||
✨ Assist
|
||||
</button>
|
||||
<button v-if="isEditing" class="btn-delete" @click="remove">Delete</button>
|
||||
<button v-if="isEditing" class="btn-history" @click="showHistory = true">History</button>
|
||||
</div>
|
||||
<input
|
||||
v-model="title"
|
||||
@@ -311,133 +326,129 @@ onUnmounted(() => window.removeEventListener("beforeunload", onBeforeUnload));
|
||||
class="title-input"
|
||||
@input="markDirty"
|
||||
/>
|
||||
|
||||
<div class="field-row-meta">
|
||||
<div class="meta-field">
|
||||
<label class="meta-label">Project</label>
|
||||
<ProjectSelector v-model="projectId" @update:modelValue="milestoneId = null; markDirty()" />
|
||||
</div>
|
||||
<div class="meta-field">
|
||||
<label class="meta-label">Milestone</label>
|
||||
<MilestoneSelector :projectId="projectId" v-model="milestoneId" @update:modelValue="markDirty" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<TagInput
|
||||
v-model="tags"
|
||||
:fetchTags="(q: string) => store.fetchAllTags(q)"
|
||||
@update:modelValue="markDirty"
|
||||
/>
|
||||
|
||||
<div class="tag-suggest-row">
|
||||
<button class="btn-suggest-tags" @click="fetchTagSuggestions" :disabled="suggestingTags">
|
||||
{{ suggestingTags ? "Suggesting..." : "Suggest tags" }}
|
||||
</button>
|
||||
<template v-if="suggestedTags.length > 0">
|
||||
<button
|
||||
v-for="tag in suggestedTags"
|
||||
:key="tag"
|
||||
:class="['tag-pill', { applied: appliedTags.has(tag) }]"
|
||||
:disabled="appliedTags.has(tag)"
|
||||
@click="applyTagSuggestion(tag)"
|
||||
>
|
||||
#{{ tag }}
|
||||
<span v-if="appliedTags.has(tag)" class="tag-check">✓</span>
|
||||
</button>
|
||||
<button class="btn-dismiss-tags" @click="dismissTagSuggestions">×</button>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<div class="editor-tabs">
|
||||
<button
|
||||
:class="['tab', { active: !showPreview }]"
|
||||
@click="showPreview = false"
|
||||
>
|
||||
Write
|
||||
</button>
|
||||
<button
|
||||
:class="['tab', { active: showPreview }]"
|
||||
@click="showPreview = true"
|
||||
>
|
||||
Preview
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<MarkdownToolbar v-show="!showPreview" :editor="tiptapEditor" />
|
||||
</div>
|
||||
|
||||
<div class="editor-body">
|
||||
<div class="editor-main">
|
||||
<!-- Inline assist output: streaming preview + review diff -->
|
||||
<InlineAssistPanel
|
||||
v-if="assist.state.value !== 'idle'"
|
||||
:phase="assist.state.value as 'streaming' | 'review'"
|
||||
:label="assistLabel"
|
||||
:streaming-text="assist.streamingText.value"
|
||||
:diff="assist.diff.value"
|
||||
:proposed-text="assist.proposedText.value"
|
||||
@accept="handleAssistAccept"
|
||||
@reject="assist.reject()"
|
||||
@cancel="assist.clearSelection()"
|
||||
/>
|
||||
<!-- Two-column body: main | sidebar -->
|
||||
<div class="note-body">
|
||||
|
||||
<!-- Editor hidden during review so diff takes full column -->
|
||||
<div v-show="!showPreview && assist.state.value !== 'review'">
|
||||
<TiptapEditor
|
||||
ref="editorRef"
|
||||
:modelValue="body"
|
||||
placeholder="Write your note in Markdown..."
|
||||
@update:modelValue="onBodyUpdate"
|
||||
@selectionChange="onSelectionChange"
|
||||
/>
|
||||
<!-- ── Main column ────────────────────────────────────────── -->
|
||||
<div class="note-main">
|
||||
<div class="body-tabs-row">
|
||||
<div class="editor-tabs">
|
||||
<button :class="['tab', { active: !showPreview }]" @click="showPreview = false">Write</button>
|
||||
<button :class="['tab', { active: showPreview }]" @click="showPreview = true">Preview</button>
|
||||
</div>
|
||||
<MarkdownToolbar v-show="!showPreview && assist.state.value === 'idle'" :editor="tiptapEditor" />
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-show="showPreview && assist.state.value !== 'review'"
|
||||
class="preview-pane prose"
|
||||
v-html="renderedPreview"
|
||||
></div>
|
||||
<!-- Streaming preview -->
|
||||
<template v-if="assist.state.value === 'streaming'">
|
||||
<div class="stream-label">Generating...</div>
|
||||
<div class="stream-preview prose" v-html="renderMarkdown(assist.streamingText.value)" />
|
||||
</template>
|
||||
|
||||
<!-- Review: full-document diff -->
|
||||
<template v-else-if="assist.state.value === 'review'">
|
||||
<DiffView :diff="assist.diff.value" class="main-diff" />
|
||||
</template>
|
||||
|
||||
<!-- Normal editor -->
|
||||
<template v-else>
|
||||
<div v-show="!showPreview" class="body-editor-wrap">
|
||||
<TiptapEditor
|
||||
ref="editorRef"
|
||||
:modelValue="body"
|
||||
placeholder="Write your note in Markdown..."
|
||||
@update:modelValue="onBodyUpdate"
|
||||
@selectionChange="onSelectionChange"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
v-show="showPreview"
|
||||
class="preview-pane prose"
|
||||
v-html="renderedPreview"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<!-- Error from assist -->
|
||||
<div v-if="assist.error.value" class="assist-error">{{ assist.error.value }}</div>
|
||||
</div>
|
||||
|
||||
<aside v-if="assistOpen" class="assist-panel">
|
||||
<!-- Panel header -->
|
||||
<div class="assist-panel-header">
|
||||
<span class="assist-panel-title">✨ AI Assist</span>
|
||||
<button
|
||||
class="btn-proofread"
|
||||
@click="assist.proofread()"
|
||||
:disabled="assist.state.value === 'streaming'"
|
||||
>Proofread</button>
|
||||
<button class="btn-close-assist" @click="toggleAssist">×</button>
|
||||
</div>
|
||||
<!-- ── Sidebar ──────────────────────────────────────────── -->
|
||||
<aside class="note-sidebar">
|
||||
<button class="sidebar-toggle" @click="sidebarOpen = !sidebarOpen">
|
||||
Details {{ sidebarOpen ? '▴' : '▾' }}
|
||||
</button>
|
||||
|
||||
<!-- Panel body -->
|
||||
<div class="assist-panel-body">
|
||||
<div :class="['sidebar-content', { 'sidebar-open': sidebarOpen }]">
|
||||
|
||||
<!-- IDLE -->
|
||||
<div v-if="assist.state.value === 'idle'" class="assist-idle">
|
||||
<div class="assist-sections-label">Sections</div>
|
||||
<div class="assist-sections">
|
||||
<div
|
||||
v-for="(section, i) in assist.sections.value"
|
||||
:key="i"
|
||||
:class="['assist-section-item', { selected: assist.selectedSection.value === section }]"
|
||||
@click="assist.selectSection(section)"
|
||||
<!-- Project / Milestone / Tags -->
|
||||
<div class="sb-field">
|
||||
<label class="sb-label">Project</label>
|
||||
<ProjectSelector
|
||||
v-model="projectId"
|
||||
@update:modelValue="milestoneId = null; markDirty()"
|
||||
/>
|
||||
</div>
|
||||
<div v-if="projectId" class="sb-field">
|
||||
<label class="sb-label">Milestone</label>
|
||||
<MilestoneSelector
|
||||
:projectId="projectId"
|
||||
v-model="milestoneId"
|
||||
@update:modelValue="markDirty"
|
||||
/>
|
||||
</div>
|
||||
<div class="sb-field">
|
||||
<label class="sb-label">Tags</label>
|
||||
<TagInput
|
||||
v-model="tags"
|
||||
:fetchTags="(q: string) => store.fetchAllTags(q)"
|
||||
@update:modelValue="markDirty"
|
||||
/>
|
||||
</div>
|
||||
<div class="tag-suggest-row">
|
||||
<button class="btn-suggest-tags" @click="fetchTagSuggestions" :disabled="suggestingTags">
|
||||
{{ suggestingTags ? "Suggesting..." : "Suggest tags" }}
|
||||
</button>
|
||||
<template v-if="suggestedTags.length > 0">
|
||||
<button
|
||||
v-for="tag in suggestedTags"
|
||||
:key="tag"
|
||||
:class="['tag-pill', { applied: appliedTags.has(tag) }]"
|
||||
:disabled="appliedTags.has(tag)"
|
||||
@click="applyTagSuggestion(tag)"
|
||||
>
|
||||
{{ section.heading || '(preamble)' }}
|
||||
</div>
|
||||
<div v-if="!assist.sections.value.length" class="assist-empty">
|
||||
Write some content to get started.
|
||||
</div>
|
||||
#{{ tag }}
|
||||
<span v-if="appliedTags.has(tag)" class="tag-check">✓</span>
|
||||
</button>
|
||||
<button class="btn-dismiss-tags" @click="dismissTagSuggestions">×</button>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<div class="sb-divider"></div>
|
||||
|
||||
<!-- Writing Assistant (always visible) -->
|
||||
<div class="assist-section">
|
||||
<div class="assist-section-title">✨ Writing Assistant</div>
|
||||
|
||||
<!-- Scope selector -->
|
||||
<div class="sb-field">
|
||||
<label class="sb-label">Scope</label>
|
||||
<select v-model="scopeSelectValue" class="sb-select" :disabled="assist.state.value === 'streaming'">
|
||||
<option
|
||||
v-for="opt in scopeOptions"
|
||||
:key="opt.value"
|
||||
:value="opt.value"
|
||||
>{{ opt.label }}</option>
|
||||
</select>
|
||||
</div>
|
||||
<template v-if="assist.target.value">
|
||||
<div class="assist-target-preview">
|
||||
Editing: <em>{{ truncateTarget(assist.target.value.text) }}</em>
|
||||
</div>
|
||||
|
||||
<!-- Idle: instruction + buttons -->
|
||||
<template v-if="assist.state.value === 'idle'">
|
||||
<textarea
|
||||
ref="instructionRef"
|
||||
v-model="assist.instruction.value"
|
||||
placeholder="What should I do with this section?"
|
||||
placeholder="What should I do?"
|
||||
class="assist-instruction"
|
||||
rows="3"
|
||||
></textarea>
|
||||
@@ -447,38 +458,52 @@ onUnmounted(() => window.removeEventListener("beforeunload", onBeforeUnload));
|
||||
@click="assist.submit()"
|
||||
:disabled="!assist.canSubmit.value"
|
||||
>Generate</button>
|
||||
<button class="btn-clear" @click="assist.clearSelection()">Clear</button>
|
||||
<button
|
||||
class="btn-proofread"
|
||||
@click="assist.proofread()"
|
||||
>Proofread</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- Streaming: cancel -->
|
||||
<template v-else-if="assist.state.value === 'streaming'">
|
||||
<div class="assist-active-hint">Generating… see main area</div>
|
||||
<button class="btn-clear" @click="assist.clearSelection()">Cancel</button>
|
||||
</template>
|
||||
|
||||
<!-- Review: accept / reject -->
|
||||
<template v-else-if="assist.state.value === 'review'">
|
||||
<div class="assist-active-hint">Review the diff in the main area</div>
|
||||
<div class="assist-actions">
|
||||
<button class="btn-accept" @click="handleAssistAccept">Accept</button>
|
||||
<button class="btn-reject" @click="assist.reject()">Reject</button>
|
||||
</div>
|
||||
</template>
|
||||
<div v-else class="assist-hint">
|
||||
Select a section above or highlight text in the editor.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ERROR -->
|
||||
<div v-if="assist.error.value" class="assist-error">{{ assist.error.value }}</div>
|
||||
|
||||
<!-- Hint when active (output shown inline in editor area) -->
|
||||
<div v-if="assist.state.value !== 'idle'" class="assist-active-hint">
|
||||
{{ assist.state.value === 'streaming' ? 'Generating in editor…' : 'Review diff in editor ↑' }}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div><!-- /sidebar-content -->
|
||||
</aside>
|
||||
</div>
|
||||
</div><!-- /note-body -->
|
||||
|
||||
<!-- Floating inline assist button (teleported to body) -->
|
||||
<!-- Floating inline assist button -->
|
||||
<teleport to="body">
|
||||
<button
|
||||
v-if="floatingAssist.show"
|
||||
class="inline-assist-btn"
|
||||
:style="{ top: floatingAssist.top + 'px', left: floatingAssist.left + 'px' }"
|
||||
@mousedown.prevent="handleInlineAssist"
|
||||
>
|
||||
✨ Assist
|
||||
</button>
|
||||
>✨ Assist</button>
|
||||
</teleport>
|
||||
|
||||
<!-- History panel -->
|
||||
<HistoryPanel
|
||||
v-if="showHistory && noteId"
|
||||
:note-id="noteId"
|
||||
:current-body="body"
|
||||
@restore="body = $event; markDirty()"
|
||||
@close="showHistory = false"
|
||||
/>
|
||||
|
||||
<!-- Delete confirmation -->
|
||||
<teleport to="body">
|
||||
<div v-if="showDeleteConfirm" class="modal-overlay" @click="showDeleteConfirm = false">
|
||||
@@ -497,23 +522,178 @@ onUnmounted(() => window.removeEventListener("beforeunload", onBeforeUnload));
|
||||
|
||||
<style src="@/assets/editor-shared.css" />
|
||||
<style scoped>
|
||||
.field-row-meta {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 0.25rem;
|
||||
/* ── Two-column note layout ──────────────────────────────────── */
|
||||
.note-editor-page {
|
||||
max-width: 1600px;
|
||||
}
|
||||
.meta-field {
|
||||
|
||||
.note-body {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* Main column */
|
||||
.note-main {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
overflow-y: auto;
|
||||
padding: 0.75rem 1.25rem 2rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.body-tabs-row {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.25rem;
|
||||
min-width: 180px;
|
||||
flex: 1;
|
||||
max-width: 300px;
|
||||
}
|
||||
.meta-label {
|
||||
|
||||
.body-editor-wrap {
|
||||
min-height: 200px;
|
||||
}
|
||||
|
||||
.stream-label {
|
||||
font-size: 0.8rem;
|
||||
color: var(--color-text-secondary);
|
||||
font-weight: 500;
|
||||
color: var(--color-text-muted);
|
||||
font-style: italic;
|
||||
}
|
||||
</style>
|
||||
|
||||
.stream-preview {
|
||||
border: 1px solid var(--color-input-border);
|
||||
border-radius: var(--radius-sm);
|
||||
padding: 0.75rem;
|
||||
background: var(--color-bg-card);
|
||||
min-height: 200px;
|
||||
}
|
||||
|
||||
.main-diff {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
/* Right sidebar */
|
||||
.note-sidebar {
|
||||
width: 280px;
|
||||
flex-shrink: 0;
|
||||
border-left: 1px solid var(--color-border);
|
||||
overflow-y: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* Mobile accordion toggle (hidden on desktop) */
|
||||
.sidebar-toggle {
|
||||
display: none;
|
||||
width: 100%;
|
||||
padding: 0.6rem 1rem;
|
||||
background: var(--color-bg-secondary);
|
||||
border: none;
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
font-size: 0.85rem;
|
||||
font-weight: 600;
|
||||
color: var(--color-text-secondary);
|
||||
cursor: pointer;
|
||||
text-align: left;
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
.sidebar-content {
|
||||
padding: 0.75rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.65rem;
|
||||
}
|
||||
|
||||
/* Sidebar field layout */
|
||||
.sb-field {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
.sb-label {
|
||||
font-size: 0.78rem;
|
||||
font-weight: 600;
|
||||
color: var(--color-text-secondary);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
.sb-select {
|
||||
width: 100%;
|
||||
padding: 0.35rem 0.5rem;
|
||||
border: 1px solid var(--color-input-border);
|
||||
border-radius: var(--radius-sm);
|
||||
background: var(--color-bg-card);
|
||||
color: var(--color-text);
|
||||
font-size: 0.875rem;
|
||||
font-family: inherit;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.sb-select:focus { outline: none; border-color: var(--color-primary); }
|
||||
|
||||
.sb-divider {
|
||||
height: 1px;
|
||||
background: var(--color-border);
|
||||
margin: 0.15rem 0;
|
||||
}
|
||||
|
||||
/* Tag suggest row inside sidebar */
|
||||
.tag-suggest-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.3rem;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* Writing Assistant section */
|
||||
.assist-section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.assist-section-title {
|
||||
font-size: 0.78rem;
|
||||
font-weight: 700;
|
||||
color: var(--color-text-secondary);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
/* History button */
|
||||
.btn-history {
|
||||
padding: 0.45rem 1rem;
|
||||
background: none;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-sm);
|
||||
cursor: pointer;
|
||||
font-size: 0.875rem;
|
||||
color: var(--color-text-secondary);
|
||||
font-family: inherit;
|
||||
}
|
||||
.btn-history:hover {
|
||||
border-color: var(--color-primary);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
/* Narrow screen: sidebar collapses */
|
||||
@media (max-width: 720px) {
|
||||
.note-body { flex-direction: column; overflow-y: auto; overflow-x: hidden; }
|
||||
.note-main { padding: 0.75rem 1rem 1rem; overflow-y: visible; }
|
||||
.note-sidebar {
|
||||
width: 100%;
|
||||
border-left: none;
|
||||
border-top: 1px solid var(--color-border);
|
||||
overflow-y: visible;
|
||||
}
|
||||
.sidebar-toggle { display: block; }
|
||||
.sidebar-content {
|
||||
display: none;
|
||||
padding: 0.75rem 1rem;
|
||||
}
|
||||
.sidebar-content.sidebar-open { display: flex; }
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user