Move history to sidebar, simplify task assist, add content deduplication
- VersionHistorySection.vue: new sidebar component — collapsible timestamp list, click any snapshot to see inline diff + Restore/Back; replaces the modal - NoteEditorView: remove History toolbar button + HistoryPanel modal, add VersionHistorySection at bottom of sidebar - TaskEditorView: remove floating overlay assist panel + toggle button; add Writing Assistant section in sidebar matching note editor (scope selector, instruction textarea, generate/proofread/accept/reject); main area now shows streaming preview and DiffView like note editor; add VersionHistorySection - note_versions.py: add content deduplication before time-gap check — identical body + title + tags skips snapshot regardless of interval (git semantics) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -0,0 +1,258 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import { ref, computed } from "vue";
|
||||||
|
import { apiGet } from "@/api/client";
|
||||||
|
import DiffView from "@/components/DiffView.vue";
|
||||||
|
import type { DiffLine } from "@/composables/useAssist";
|
||||||
|
|
||||||
|
interface NoteVersion {
|
||||||
|
id: number;
|
||||||
|
note_id: number;
|
||||||
|
title: string;
|
||||||
|
tags: string[];
|
||||||
|
body?: string;
|
||||||
|
created_at: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
const props = defineProps<{
|
||||||
|
noteId: number;
|
||||||
|
currentBody: string;
|
||||||
|
}>();
|
||||||
|
|
||||||
|
const emit = defineEmits<{
|
||||||
|
(e: "restore", body: string, tags: string[]): void;
|
||||||
|
}>();
|
||||||
|
|
||||||
|
const expanded = ref(false);
|
||||||
|
const view = ref<"list" | "diff">("list");
|
||||||
|
const versions = ref<NoteVersion[]>([]);
|
||||||
|
const selectedVersion = ref<NoteVersion | null>(null);
|
||||||
|
const loading = ref(false);
|
||||||
|
const loadingDetail = ref(false);
|
||||||
|
|
||||||
|
const diff = computed<DiffLine[]>(() => {
|
||||||
|
if (!selectedVersion.value?.body) return [];
|
||||||
|
const aLines = props.currentBody.split("\n");
|
||||||
|
const bLines = selectedVersion.value.body.split("\n");
|
||||||
|
const m = aLines.length, n = bLines.length;
|
||||||
|
const dp: number[][] = Array.from({ length: m + 1 }, () => new Array(n + 1).fill(0));
|
||||||
|
for (let i = m - 1; i >= 0; i--)
|
||||||
|
for (let j = n - 1; j >= 0; j--)
|
||||||
|
dp[i][j] = aLines[i] === bLines[j]
|
||||||
|
? dp[i + 1][j + 1] + 1
|
||||||
|
: Math.max(dp[i + 1][j], dp[i][j + 1]);
|
||||||
|
const result: DiffLine[] = [];
|
||||||
|
let i = 0, j = 0;
|
||||||
|
while (i < m && j < n) {
|
||||||
|
if (aLines[i] === bLines[j]) { result.push({ type: "equal", text: aLines[i++] }); j++; }
|
||||||
|
else if (dp[i + 1][j] >= dp[i][j + 1]) result.push({ type: "delete", text: aLines[i++] });
|
||||||
|
else result.push({ type: "insert", text: bLines[j++] });
|
||||||
|
}
|
||||||
|
while (i < m) result.push({ type: "delete", text: aLines[i++] });
|
||||||
|
while (j < n) result.push({ type: "insert", text: bLines[j++] });
|
||||||
|
return result;
|
||||||
|
});
|
||||||
|
|
||||||
|
function formatDate(iso: string): string {
|
||||||
|
const d = new Date(iso);
|
||||||
|
const now = new Date();
|
||||||
|
const isToday = d.toDateString() === now.toDateString();
|
||||||
|
if (isToday) {
|
||||||
|
return d.toLocaleTimeString(undefined, { hour: "2-digit", minute: "2-digit" });
|
||||||
|
}
|
||||||
|
return d.toLocaleString(undefined, {
|
||||||
|
month: "short", day: "numeric",
|
||||||
|
hour: "2-digit", minute: "2-digit",
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
async function toggle() {
|
||||||
|
expanded.value = !expanded.value;
|
||||||
|
if (expanded.value && versions.value.length === 0) {
|
||||||
|
await loadVersions();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function loadVersions() {
|
||||||
|
loading.value = true;
|
||||||
|
try {
|
||||||
|
const data = await apiGet<{ versions: NoteVersion[] }>(
|
||||||
|
`/api/notes/${props.noteId}/versions`
|
||||||
|
);
|
||||||
|
versions.value = data.versions;
|
||||||
|
} catch {
|
||||||
|
// silent
|
||||||
|
} finally {
|
||||||
|
loading.value = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function selectVersion(v: NoteVersion) {
|
||||||
|
if (v.body === undefined) {
|
||||||
|
loadingDetail.value = true;
|
||||||
|
try {
|
||||||
|
const full = await apiGet<NoteVersion>(
|
||||||
|
`/api/notes/${props.noteId}/versions/${v.id}`
|
||||||
|
);
|
||||||
|
const listItem = versions.value.find((x) => x.id === v.id);
|
||||||
|
if (listItem) listItem.body = full.body;
|
||||||
|
selectedVersion.value = full;
|
||||||
|
} catch {
|
||||||
|
// silent
|
||||||
|
} finally {
|
||||||
|
loadingDetail.value = false;
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
selectedVersion.value = v;
|
||||||
|
}
|
||||||
|
view.value = "diff";
|
||||||
|
}
|
||||||
|
|
||||||
|
function back() {
|
||||||
|
view.value = "list";
|
||||||
|
selectedVersion.value = null;
|
||||||
|
}
|
||||||
|
|
||||||
|
function restore() {
|
||||||
|
if (!selectedVersion.value?.body) return;
|
||||||
|
emit("restore", selectedVersion.value.body, selectedVersion.value.tags ?? []);
|
||||||
|
back();
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="vh-section">
|
||||||
|
<button class="vh-header" @click="toggle">
|
||||||
|
<span class="vh-title">Version History</span>
|
||||||
|
<span class="vh-chevron">{{ expanded ? "▴" : "▾" }}</span>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<div v-if="expanded" class="vh-body">
|
||||||
|
|
||||||
|
<!-- List view -->
|
||||||
|
<template v-if="view === 'list'">
|
||||||
|
<div v-if="loading" class="vh-empty">Loading...</div>
|
||||||
|
<div v-else-if="!versions.length" class="vh-empty">No snapshots yet.</div>
|
||||||
|
<div
|
||||||
|
v-for="v in versions"
|
||||||
|
:key="v.id"
|
||||||
|
class="vh-item"
|
||||||
|
@click="selectVersion(v)"
|
||||||
|
>
|
||||||
|
{{ formatDate(v.created_at) }}
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<!-- Diff view -->
|
||||||
|
<template v-else>
|
||||||
|
<div class="vh-diff-actions">
|
||||||
|
<button class="vh-btn-back" @click="back">← Back</button>
|
||||||
|
<button
|
||||||
|
class="vh-btn-restore"
|
||||||
|
:disabled="!selectedVersion?.body"
|
||||||
|
@click="restore"
|
||||||
|
>Restore</button>
|
||||||
|
</div>
|
||||||
|
<div class="vh-diff-wrap">
|
||||||
|
<div v-if="loadingDetail" class="vh-empty">Loading...</div>
|
||||||
|
<DiffView v-else :diff="diff" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.vh-section {
|
||||||
|
border-top: 1px solid var(--color-border);
|
||||||
|
}
|
||||||
|
|
||||||
|
.vh-header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
width: 100%;
|
||||||
|
padding: 0.55rem 0.75rem;
|
||||||
|
background: none;
|
||||||
|
border: none;
|
||||||
|
cursor: pointer;
|
||||||
|
font-family: inherit;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
.vh-header:hover { background: var(--color-bg-secondary); }
|
||||||
|
|
||||||
|
.vh-title {
|
||||||
|
font-size: 0.75rem;
|
||||||
|
font-weight: 700;
|
||||||
|
color: var(--color-text-secondary);
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.05em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vh-chevron {
|
||||||
|
font-size: 0.7rem;
|
||||||
|
color: var(--color-text-muted);
|
||||||
|
}
|
||||||
|
|
||||||
|
.vh-body {
|
||||||
|
padding: 0 0 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vh-empty {
|
||||||
|
padding: 0.5rem 0.75rem;
|
||||||
|
font-size: 0.8rem;
|
||||||
|
color: var(--color-text-muted);
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vh-item {
|
||||||
|
padding: 0.35rem 0.75rem;
|
||||||
|
font-size: 0.8rem;
|
||||||
|
color: var(--color-text);
|
||||||
|
cursor: pointer;
|
||||||
|
font-family: monospace;
|
||||||
|
border-left: 2px solid transparent;
|
||||||
|
}
|
||||||
|
.vh-item:hover {
|
||||||
|
background: var(--color-bg-secondary);
|
||||||
|
border-left-color: var(--color-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.vh-diff-actions {
|
||||||
|
display: flex;
|
||||||
|
gap: 0.4rem;
|
||||||
|
padding: 0.4rem 0.75rem 0.35rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vh-btn-back {
|
||||||
|
background: none;
|
||||||
|
border: 1px solid var(--color-border);
|
||||||
|
border-radius: var(--radius-sm);
|
||||||
|
padding: 0.25rem 0.6rem;
|
||||||
|
font-size: 0.78rem;
|
||||||
|
color: var(--color-text-secondary);
|
||||||
|
cursor: pointer;
|
||||||
|
font-family: inherit;
|
||||||
|
}
|
||||||
|
.vh-btn-back:hover { border-color: var(--color-primary); color: var(--color-primary); }
|
||||||
|
|
||||||
|
.vh-btn-restore {
|
||||||
|
background: var(--color-primary);
|
||||||
|
border: none;
|
||||||
|
border-radius: var(--radius-sm);
|
||||||
|
padding: 0.25rem 0.6rem;
|
||||||
|
font-size: 0.78rem;
|
||||||
|
color: #fff;
|
||||||
|
cursor: pointer;
|
||||||
|
font-family: inherit;
|
||||||
|
}
|
||||||
|
.vh-btn-restore:disabled { opacity: 0.5; cursor: default; }
|
||||||
|
|
||||||
|
.vh-diff-wrap {
|
||||||
|
padding: 0 0.5rem 0.25rem;
|
||||||
|
max-height: 420px;
|
||||||
|
overflow-y: auto;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -18,7 +18,7 @@ import TagInput from "@/components/TagInput.vue";
|
|||||||
import ProjectSelector from "@/components/ProjectSelector.vue";
|
import ProjectSelector from "@/components/ProjectSelector.vue";
|
||||||
import MilestoneSelector from "@/components/MilestoneSelector.vue";
|
import MilestoneSelector from "@/components/MilestoneSelector.vue";
|
||||||
import DiffView from "@/components/DiffView.vue";
|
import DiffView from "@/components/DiffView.vue";
|
||||||
import HistoryPanel from "@/components/HistoryPanel.vue";
|
import VersionHistorySection from "@/components/VersionHistorySection.vue";
|
||||||
import ConfirmDialog from "@/components/ConfirmDialog.vue";
|
import ConfirmDialog from "@/components/ConfirmDialog.vue";
|
||||||
|
|
||||||
const route = useRoute();
|
const route = useRoute();
|
||||||
@@ -35,7 +35,6 @@ const dirty = ref(false);
|
|||||||
const saving = ref(false);
|
const saving = ref(false);
|
||||||
const showPreview = ref(false);
|
const showPreview = ref(false);
|
||||||
const sidebarOpen = ref(true);
|
const sidebarOpen = ref(true);
|
||||||
const showHistory = ref(false);
|
|
||||||
const editorRef = ref<InstanceType<typeof TiptapEditor> | null>(null);
|
const editorRef = ref<InstanceType<typeof TiptapEditor> | null>(null);
|
||||||
const titleRef = ref<HTMLInputElement | null>(null);
|
const titleRef = ref<HTMLInputElement | null>(null);
|
||||||
const tiptapEditor = computed<Editor | null>(() => {
|
const tiptapEditor = computed<Editor | null>(() => {
|
||||||
@@ -326,7 +325,6 @@ onUnmounted(() => assist.clearSelection());
|
|||||||
{{ saving ? "Saving..." : "Save" }}
|
{{ saving ? "Saving..." : "Save" }}
|
||||||
</button>
|
</button>
|
||||||
<button v-if="isEditing" class="btn-delete" @click="remove">Delete</button>
|
<button v-if="isEditing" class="btn-delete" @click="remove">Delete</button>
|
||||||
<button v-if="isEditing" class="btn-history" @click="showHistory = true">History</button>
|
|
||||||
<WordCount :body="body" />
|
<WordCount :body="body" />
|
||||||
</div>
|
</div>
|
||||||
<input
|
<input
|
||||||
@@ -513,6 +511,13 @@ onUnmounted(() => assist.clearSelection());
|
|||||||
</template>
|
</template>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<VersionHistorySection
|
||||||
|
v-if="noteId"
|
||||||
|
:note-id="noteId"
|
||||||
|
:current-body="body"
|
||||||
|
@restore="(b, t) => { body = b; tags = t; markDirty(); }"
|
||||||
|
/>
|
||||||
|
|
||||||
</div><!-- /sidebar-content -->
|
</div><!-- /sidebar-content -->
|
||||||
</aside>
|
</aside>
|
||||||
</div><!-- /note-body -->
|
</div><!-- /note-body -->
|
||||||
@@ -527,15 +532,6 @@ onUnmounted(() => assist.clearSelection());
|
|||||||
>✨ Assist</button>
|
>✨ Assist</button>
|
||||||
</teleport>
|
</teleport>
|
||||||
|
|
||||||
<!-- History panel -->
|
|
||||||
<HistoryPanel
|
|
||||||
v-if="showHistory && noteId"
|
|
||||||
:note-id="noteId"
|
|
||||||
:current-body="body"
|
|
||||||
@restore="(b: string, t: string[]) => { body = b; tags = t; markDirty(); }"
|
|
||||||
@close="showHistory = false"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<!-- Delete confirmation -->
|
<!-- Delete confirmation -->
|
||||||
<ConfirmDialog
|
<ConfirmDialog
|
||||||
v-if="showDeleteConfirm"
|
v-if="showDeleteConfirm"
|
||||||
@@ -738,22 +734,6 @@ onUnmounted(() => assist.clearSelection());
|
|||||||
letter-spacing: 0.05em;
|
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 */
|
/* Narrow screen: sidebar collapses */
|
||||||
@media (max-width: 720px) {
|
@media (max-width: 720px) {
|
||||||
.note-body { flex-direction: column; overflow-y: auto; overflow-x: hidden; }
|
.note-body { flex-direction: column; overflow-y: auto; overflow-x: hidden; }
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { ref, onMounted, computed, nextTick } from "vue";
|
import { ref, onMounted, computed, nextTick, onUnmounted } from "vue";
|
||||||
import { useRoute, useRouter } from "vue-router";
|
import { useRoute, useRouter } from "vue-router";
|
||||||
import { useTasksStore } from "@/stores/tasks";
|
import { useTasksStore } from "@/stores/tasks";
|
||||||
import { useNotesStore } from "@/stores/notes";
|
import { useNotesStore } from "@/stores/notes";
|
||||||
@@ -20,9 +20,9 @@ import TagInput from "@/components/TagInput.vue";
|
|||||||
import ProjectSelector from "@/components/ProjectSelector.vue";
|
import ProjectSelector from "@/components/ProjectSelector.vue";
|
||||||
import MilestoneSelector from "@/components/MilestoneSelector.vue";
|
import MilestoneSelector from "@/components/MilestoneSelector.vue";
|
||||||
import TaskLogSection from "@/components/TaskLogSection.vue";
|
import TaskLogSection from "@/components/TaskLogSection.vue";
|
||||||
import InlineAssistPanel from "@/components/InlineAssistPanel.vue";
|
import DiffView from "@/components/DiffView.vue";
|
||||||
import ConfirmDialog from "@/components/ConfirmDialog.vue";
|
import ConfirmDialog from "@/components/ConfirmDialog.vue";
|
||||||
import HistoryPanel from "@/components/HistoryPanel.vue";
|
import VersionHistorySection from "@/components/VersionHistorySection.vue";
|
||||||
|
|
||||||
const route = useRoute();
|
const route = useRoute();
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
@@ -117,46 +117,62 @@ const renderedPreview = computed(() => renderMarkdown(body.value));
|
|||||||
// AI Assist
|
// AI Assist
|
||||||
const assist = useAssist(body, taskId, projectId);
|
const assist = useAssist(body, taskId, projectId);
|
||||||
|
|
||||||
const assistLabel = computed(() => {
|
// Scope selector — matches note editor pattern
|
||||||
if (assist.isProofreading.value) return "Proofreading document...";
|
const scopeOptions = computed(() => {
|
||||||
const t = assist.target.value;
|
const opts: Array<{ value: string; label: string }> = [
|
||||||
if (!t) return "Generating...";
|
{ value: "__document__", label: "Whole document" },
|
||||||
const heading = t.text.split("\n")[0];
|
];
|
||||||
return `Revising: "${heading.length > 50 ? heading.slice(0, 50) + "..." : heading}"`;
|
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 scopeSelectValue = computed({
|
||||||
const ASSIST_KEY = 'fa-assist-open';
|
get() {
|
||||||
const assistOpen = ref(localStorage.getItem(ASSIST_KEY) !== 'false');
|
if (assist.scopeMode.value === "document") return "__document__";
|
||||||
function toggleAssist() {
|
if (assist.selectedSection.value) {
|
||||||
assistOpen.value = !assistOpen.value;
|
const idx = assist.sections.value.indexOf(assist.selectedSection.value);
|
||||||
localStorage.setItem(ASSIST_KEY, String(assistOpen.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
|
// Floating inline assist button
|
||||||
const instructionRef = ref<HTMLTextAreaElement | null>(null);
|
const instructionRef = ref<HTMLTextAreaElement | null>(null);
|
||||||
const { floatingAssist, onSelectionChange, handleInlineAssist } = useFloatingAssist(
|
const { floatingAssist, onSelectionChange, handleInlineAssist } = useFloatingAssist(
|
||||||
({ start, end }) => {
|
({ start, end }) => {
|
||||||
|
assist.scopeMode.value = "section";
|
||||||
assist.selectTextRange(start, end);
|
assist.selectTextRange(start, end);
|
||||||
assistOpen.value = true;
|
|
||||||
localStorage.setItem(ASSIST_KEY, 'true');
|
|
||||||
nextTick(() => instructionRef.value?.focus());
|
nextTick(() => instructionRef.value?.focus());
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
|
|
||||||
function handleAssistAccept() {
|
function handleAssistAccept() {
|
||||||
const newBody = assist.accept();
|
const newBody = assist.accept();
|
||||||
if (newBody !== body.value) {
|
body.value = newBody;
|
||||||
body.value = newBody;
|
markDirty();
|
||||||
markDirty();
|
toast.show("Task updated");
|
||||||
toast.show("Section updated");
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function truncateTarget(text: string, max = 60): string {
|
onUnmounted(() => assist.clearSelection());
|
||||||
const first = text.split("\n")[0];
|
|
||||||
return first.length > max ? first.slice(0, max) + "..." : first;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Tag suggestions
|
// Tag suggestions
|
||||||
const { suggestedTags, appliedTags, suggestingTags, fetchTagSuggestions, applyTagSuggestion, dismissTagSuggestions } =
|
const { suggestedTags, appliedTags, suggestingTags, fetchTagSuggestions, applyTagSuggestion, dismissTagSuggestions } =
|
||||||
@@ -322,7 +338,6 @@ async function save() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const showDeleteConfirm = ref(false);
|
const showDeleteConfirm = ref(false);
|
||||||
const showHistory = ref(false);
|
|
||||||
|
|
||||||
function remove() {
|
function remove() {
|
||||||
if (taskId.value) {
|
if (taskId.value) {
|
||||||
@@ -388,13 +403,7 @@ useEditorGuards(dirty, save);
|
|||||||
<button class="btn-save" @click="save" :disabled="saving">
|
<button class="btn-save" @click="save" :disabled="saving">
|
||||||
{{ saving ? "Saving..." : "Save" }}
|
{{ saving ? "Saving..." : "Save" }}
|
||||||
</button>
|
</button>
|
||||||
<button v-if="isEditing" class="btn-history" @click="showHistory = true">History</button>
|
<button v-if="isEditing" class="btn-delete" @click="remove">Delete</button>
|
||||||
<button v-if="isEditing" class="btn-delete" @click="remove">
|
|
||||||
Delete
|
|
||||||
</button>
|
|
||||||
<button class="btn-assist-toggle" :class="{ active: assistOpen }" @click="toggleAssist">
|
|
||||||
✨ Assist
|
|
||||||
</button>
|
|
||||||
<WordCount :body="body" />
|
<WordCount :body="body" />
|
||||||
</div>
|
</div>
|
||||||
<input
|
<input
|
||||||
@@ -422,38 +431,36 @@ useEditorGuards(dirty, save);
|
|||||||
<button :class="['tab', { active: !showPreview }]" @click="showPreview = false">Write</button>
|
<button :class="['tab', { active: !showPreview }]" @click="showPreview = false">Write</button>
|
||||||
<button :class="['tab', { active: showPreview }]" @click="showPreview = true">Preview</button>
|
<button :class="['tab', { active: showPreview }]" @click="showPreview = true">Preview</button>
|
||||||
</div>
|
</div>
|
||||||
<MarkdownToolbar v-show="!showPreview" :editor="tiptapEditor" />
|
<MarkdownToolbar v-show="!showPreview && assist.state.value === 'idle'" :editor="tiptapEditor" />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Inline assist output -->
|
<!-- Streaming preview -->
|
||||||
<InlineAssistPanel
|
<template v-if="assist.state.value === 'streaming'">
|
||||||
v-if="assist.state.value !== 'idle'"
|
<div class="stream-label">Generating...</div>
|
||||||
:phase="assist.state.value as 'streaming' | 'review'"
|
<div class="stream-preview prose" v-html="renderMarkdown(assist.streamingText.value)" />
|
||||||
:label="assistLabel"
|
</template>
|
||||||
:streaming-text="assist.streamingText.value"
|
|
||||||
:diff="assist.diff.value"
|
|
||||||
:proposed-text="assist.proposedText.value"
|
|
||||||
@accept="handleAssistAccept"
|
|
||||||
@reject="assist.reject()"
|
|
||||||
@cancel="assist.clearSelection()"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<!-- Editor / preview (hidden during review) -->
|
<!-- Review: full-document diff -->
|
||||||
<div v-show="!showPreview && assist.state.value !== 'review'" class="body-editor-wrap">
|
<template v-else-if="assist.state.value === 'review'">
|
||||||
<TiptapEditor
|
<DiffView :diff="assist.diff.value" class="main-diff" />
|
||||||
ref="editorRef"
|
</template>
|
||||||
:modelValue="body"
|
|
||||||
placeholder="Describe this task..."
|
<!-- Normal: editor or preview -->
|
||||||
@update:modelValue="onBodyUpdate"
|
<template v-else>
|
||||||
@selectionChange="onSelectionChange"
|
<div v-show="!showPreview" class="body-editor-wrap">
|
||||||
@escape="titleRef?.focus()"
|
<TiptapEditor
|
||||||
/>
|
ref="editorRef"
|
||||||
</div>
|
:modelValue="body"
|
||||||
<div
|
placeholder="Describe this task..."
|
||||||
v-show="showPreview && assist.state.value !== 'review'"
|
@update:modelValue="onBodyUpdate"
|
||||||
class="preview-pane prose"
|
@selectionChange="onSelectionChange"
|
||||||
v-html="renderedPreview"
|
@escape="titleRef?.focus()"
|
||||||
></div>
|
/>
|
||||||
|
</div>
|
||||||
|
<div v-show="showPreview" class="preview-pane prose" v-html="renderedPreview" />
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<div v-if="assist.error.value" class="assist-error">{{ assist.error.value }}</div>
|
||||||
|
|
||||||
<!-- Work log -->
|
<!-- Work log -->
|
||||||
<TaskLogSection v-if="taskId" :task-id="taskId" class="body-log" />
|
<TaskLogSection v-if="taskId" :task-id="taskId" class="body-log" />
|
||||||
@@ -591,51 +598,57 @@ useEditorGuards(dirty, save);
|
|||||||
</template>
|
</template>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div><!-- /sidebar-content -->
|
<div class="sb-divider"></div>
|
||||||
</aside><!-- /task-sidebar -->
|
|
||||||
|
|
||||||
<!-- ✨ Assist panel overlays on top of sidebar when open -->
|
<!-- Writing Assistant -->
|
||||||
<aside v-if="assistOpen" class="assist-panel">
|
<div class="assist-section">
|
||||||
<div class="assist-panel-header">
|
<div class="assist-section-title">✨ Writing Assistant</div>
|
||||||
<span class="assist-panel-title">✨ AI Assist</span>
|
|
||||||
<button class="btn-proofread" @click="assist.proofread()" :disabled="assist.state.value === 'streaming'">Proofread</button>
|
<div class="sb-field">
|
||||||
<button class="btn-close-assist" aria-label="Close assist panel" @click="toggleAssist">×</button>
|
<label class="sb-label">Scope</label>
|
||||||
</div>
|
<select v-model="scopeSelectValue" class="sb-select" :disabled="assist.state.value === 'streaming'">
|
||||||
<div class="assist-panel-body">
|
<option v-for="opt in scopeOptions" :key="opt.value" :value="opt.value">{{ opt.label }}</option>
|
||||||
<div v-if="assist.state.value === 'idle'" class="assist-idle">
|
</select>
|
||||||
<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)"
|
|
||||||
>{{ section.heading || '(preamble)' }}</div>
|
|
||||||
<div v-if="!assist.sections.value.length" class="assist-empty">Write some content to get started.</div>
|
|
||||||
</div>
|
</div>
|
||||||
<template v-if="assist.target.value">
|
|
||||||
<div class="assist-target-preview">Editing: <em>{{ truncateTarget(assist.target.value.text) }}</em></div>
|
<template v-if="assist.state.value === 'idle'">
|
||||||
<textarea
|
<textarea
|
||||||
ref="instructionRef"
|
ref="instructionRef"
|
||||||
v-model="assist.instruction.value"
|
v-model="assist.instruction.value"
|
||||||
placeholder="What should I do with this section?"
|
placeholder="What should I do?"
|
||||||
class="assist-instruction"
|
class="assist-instruction"
|
||||||
rows="3"
|
rows="3"
|
||||||
@keydown.enter.exact.prevent="assist.canSubmit.value && assist.submit()"
|
@keydown.enter.exact.prevent="assist.canSubmit.value && assist.submit()"
|
||||||
></textarea>
|
></textarea>
|
||||||
<div class="assist-input-actions">
|
<div class="assist-input-actions">
|
||||||
<button class="btn-generate" @click="assist.submit()" :disabled="!assist.canSubmit.value">Generate</button>
|
<button class="btn-generate" @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>
|
||||||
|
|
||||||
|
<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>
|
||||||
|
|
||||||
|
<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>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<div v-else class="assist-hint">Select a section above or highlight text in the editor.</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div v-if="assist.error.value" class="assist-error">{{ assist.error.value }}</div>
|
|
||||||
<div v-if="assist.state.value !== 'idle'" class="assist-active-hint">
|
<VersionHistorySection
|
||||||
{{ assist.state.value === 'streaming' ? 'Generating in editor…' : 'Review diff in editor ↑' }}
|
v-if="taskId"
|
||||||
</div>
|
:note-id="taskId"
|
||||||
</div>
|
:current-body="body"
|
||||||
</aside>
|
@restore="(b, t) => { body = b; tags = t; markDirty(); }"
|
||||||
|
/>
|
||||||
|
|
||||||
|
</div><!-- /sidebar-content -->
|
||||||
|
</aside><!-- /task-sidebar -->
|
||||||
|
|
||||||
</div><!-- /task-body -->
|
</div><!-- /task-body -->
|
||||||
|
|
||||||
@@ -657,15 +670,6 @@ useEditorGuards(dirty, save);
|
|||||||
@confirm="confirmDelete"
|
@confirm="confirmDelete"
|
||||||
@cancel="showDeleteConfirm = false"
|
@cancel="showDeleteConfirm = false"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<!-- History panel -->
|
|
||||||
<HistoryPanel
|
|
||||||
v-if="showHistory && taskId"
|
|
||||||
:note-id="taskId"
|
|
||||||
:current-body="body"
|
|
||||||
@restore="(b: string, t: string[]) => { body = b; tags = t; markDirty(); }"
|
|
||||||
@close="showHistory = false"
|
|
||||||
/>
|
|
||||||
</main>
|
</main>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@@ -855,20 +859,40 @@ useEditorGuards(dirty, save);
|
|||||||
font-family: inherit;
|
font-family: inherit;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* History button */
|
/* Streaming preview */
|
||||||
.btn-history {
|
.stream-label {
|
||||||
padding: 0.45rem 1rem;
|
font-size: 0.8rem;
|
||||||
background: none;
|
color: var(--color-text-muted);
|
||||||
border: 1px solid var(--color-border);
|
font-style: italic;
|
||||||
border-radius: var(--radius-sm);
|
|
||||||
cursor: pointer;
|
|
||||||
font-size: 0.875rem;
|
|
||||||
color: var(--color-text-secondary);
|
|
||||||
font-family: inherit;
|
|
||||||
}
|
}
|
||||||
.btn-history:hover {
|
.stream-preview {
|
||||||
border-color: var(--color-primary);
|
border: 1px solid var(--color-input-border);
|
||||||
color: var(--color-primary);
|
border-radius: var(--radius-sm);
|
||||||
|
padding: 0.75rem;
|
||||||
|
background: var(--color-bg-card);
|
||||||
|
min-height: 200px;
|
||||||
|
}
|
||||||
|
.main-diff {
|
||||||
|
flex: 1;
|
||||||
|
min-height: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Writing Assistant section (in sidebar) */
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
.assist-actions {
|
||||||
|
display: flex;
|
||||||
|
gap: 0.4rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Tag suggest row inside sidebar */
|
/* Tag suggest row inside sidebar */
|
||||||
|
|||||||
@@ -18,16 +18,24 @@ async def create_version(
|
|||||||
user_id: int, note_id: int, body: str, title: str, tags: list[str] | None = None
|
user_id: int, note_id: int, body: str, title: str, tags: list[str] | None = None
|
||||||
) -> NoteVersion | None:
|
) -> NoteVersion | None:
|
||||||
async with async_session() as session:
|
async with async_session() as session:
|
||||||
# Skip if a recent snapshot already exists within the minimum interval.
|
# Fetch the most recent snapshot once for both checks.
|
||||||
recent = await session.execute(
|
recent = await session.execute(
|
||||||
select(NoteVersion.created_at)
|
select(NoteVersion)
|
||||||
.where(NoteVersion.note_id == note_id, NoteVersion.user_id == user_id)
|
.where(NoteVersion.note_id == note_id, NoteVersion.user_id == user_id)
|
||||||
.order_by(NoteVersion.created_at.desc())
|
.order_by(NoteVersion.created_at.desc())
|
||||||
.limit(1)
|
.limit(1)
|
||||||
)
|
)
|
||||||
last_at = recent.scalar_one_or_none()
|
last = recent.scalars().first()
|
||||||
if last_at is not None:
|
if last is not None:
|
||||||
# created_at is stored with timezone; ensure comparison is tz-aware
|
# Skip if content is identical — no change, no snapshot (git semantics).
|
||||||
|
if (
|
||||||
|
last.body == body
|
||||||
|
and last.title == title
|
||||||
|
and sorted(last.tags or []) == sorted(tags or [])
|
||||||
|
):
|
||||||
|
return None
|
||||||
|
# Skip if within the minimum interval to prevent rapid-fire autosave snapshots.
|
||||||
|
last_at = last.created_at
|
||||||
if last_at.tzinfo is None:
|
if last_at.tzinfo is None:
|
||||||
last_at = last_at.replace(tzinfo=timezone.utc)
|
last_at = last_at.replace(tzinfo=timezone.utc)
|
||||||
age = (datetime.now(timezone.utc) - last_at).total_seconds()
|
age = (datetime.now(timezone.utc) - last_at).total_seconds()
|
||||||
|
|||||||
Reference in New Issue
Block a user