Workspace UI overhaul: rail note panel, split task detail, project goal header
- WorkspaceNoteEditor: replace toggling list/editor views with always-visible
left rail (155px) showing note list alongside editor pane; persist last-open
note per project in localStorage (workspace_note_{projectId})
- WorkspaceTaskPanel: add priority dot + due date on task rows; replace full
overlay detail with bottom-split (44% list / 56% detail); close button
replaces back nav; active row highlighted; fade transition
- WorkspaceView: show project goal in header instead of 'Workspace'; non-equal
panel widths (0.8fr / 1.1fr / 1.1fr); empty chat quick-action chips (Project
status / New note / Add tasks); prefill() helper
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -28,23 +28,18 @@ interface NoteItem {
|
||||
const toast = useToastStore();
|
||||
const notesStore = useNotesStore();
|
||||
|
||||
// View state: "list" or "editor"
|
||||
const view = ref<"list" | "editor">("list");
|
||||
|
||||
// List state
|
||||
const projectNotes = ref<NoteItem[]>([]);
|
||||
const listLoading = ref(false);
|
||||
const deletingId = ref<number | null>(null); // confirming delete for this id
|
||||
const pendingDelete = ref<number | null>(null); // mid-deletion
|
||||
const deletingId = ref<number | null>(null);
|
||||
const pendingDelete = ref<number | null>(null);
|
||||
const searchQuery = ref("");
|
||||
|
||||
const filteredNotes = computed(() => {
|
||||
const q = searchQuery.value.trim().toLowerCase();
|
||||
if (!q) return projectNotes.value;
|
||||
return projectNotes.value.filter(
|
||||
(n) =>
|
||||
n.title.toLowerCase().includes(q) ||
|
||||
n.tags?.some((t) => t.toLowerCase().includes(q))
|
||||
(n) => n.title.toLowerCase().includes(q) || n.tags?.some((t) => t.toLowerCase().includes(q))
|
||||
);
|
||||
});
|
||||
|
||||
@@ -72,6 +67,8 @@ const newNoteTitle = ref("");
|
||||
const creatingNote = ref(false);
|
||||
const newNoteTitleRef = ref<HTMLInputElement | null>(null);
|
||||
|
||||
function _noteKey(pid: number) { return `workspace_note_${pid}`; }
|
||||
|
||||
async function startNewNote() {
|
||||
showNewNoteInput.value = true;
|
||||
newNoteTitle.value = "";
|
||||
@@ -104,7 +101,7 @@ async function createNote() {
|
||||
}
|
||||
}
|
||||
|
||||
// TipTap editor ref (for MarkdownToolbar)
|
||||
// TipTap editor ref
|
||||
const titleRef = ref<HTMLInputElement | null>(null);
|
||||
const editorRef = ref<InstanceType<typeof TiptapEditor> | null>(null);
|
||||
const tiptapEditor = computed<Editor | null>(() =>
|
||||
@@ -184,7 +181,7 @@ async function openNote(id: number) {
|
||||
dirty.value = false;
|
||||
tagSuggestions.dismissTagSuggestions();
|
||||
linkSuggestions.value = [];
|
||||
view.value = "editor";
|
||||
localStorage.setItem(_noteKey(props.projectId), String(id));
|
||||
fetchLinkSuggestions();
|
||||
emit("note-loaded", note.id);
|
||||
} catch {
|
||||
@@ -202,7 +199,6 @@ async function saveNote() {
|
||||
tags: noteTags.value,
|
||||
});
|
||||
dirty.value = false;
|
||||
// Refresh updated_at in the list
|
||||
const idx = projectNotes.value.findIndex((n) => n.id === editingId.value);
|
||||
if (idx !== -1) {
|
||||
projectNotes.value[idx] = {
|
||||
@@ -211,7 +207,6 @@ async function saveNote() {
|
||||
tags: noteTags.value,
|
||||
updated_at: new Date().toISOString(),
|
||||
};
|
||||
// Re-sort by updated_at
|
||||
projectNotes.value.sort((a, b) =>
|
||||
new Date(b.updated_at).getTime() - new Date(a.updated_at).getTime()
|
||||
);
|
||||
@@ -223,16 +218,9 @@ async function saveNote() {
|
||||
}
|
||||
}
|
||||
|
||||
function backToList() {
|
||||
view.value = "list";
|
||||
deletingId.value = null;
|
||||
searchQuery.value = "";
|
||||
}
|
||||
|
||||
function requestDelete(id: number, e: Event) {
|
||||
e.stopPropagation();
|
||||
if (deletingId.value === id) {
|
||||
// Second click — confirm
|
||||
confirmDelete(id);
|
||||
} else {
|
||||
deletingId.value = id;
|
||||
@@ -253,7 +241,7 @@ async function confirmDelete(id: number) {
|
||||
editingId.value = null;
|
||||
noteTitle.value = "";
|
||||
noteBody.value = "";
|
||||
view.value = "list";
|
||||
localStorage.removeItem(_noteKey(props.projectId));
|
||||
}
|
||||
} catch {
|
||||
toast.show("Failed to delete note", "error");
|
||||
@@ -292,93 +280,27 @@ watch(
|
||||
);
|
||||
|
||||
useAutoSave(dirty, saving, saveNote, 60_000);
|
||||
onMounted(loadProjectNotes);
|
||||
|
||||
onMounted(async () => {
|
||||
await loadProjectNotes();
|
||||
const stored = localStorage.getItem(_noteKey(props.projectId));
|
||||
if (stored) {
|
||||
const id = Number(stored);
|
||||
if (projectNotes.value.find((n) => n.id === id)) {
|
||||
openNote(id).catch(() => {});
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
onUnmounted(() => { if (linkCheckTimer) clearTimeout(linkCheckTimer); });
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="ws-note-editor">
|
||||
|
||||
<!-- ── EDITOR VIEW ── -->
|
||||
<template v-if="view === 'editor'">
|
||||
<div class="panel-header">
|
||||
<button class="btn-back-arrow" @click="backToList">← Notes</button>
|
||||
<div class="editor-header-right">
|
||||
<WordCount :body="noteBody" />
|
||||
<span v-if="dirty && !saving" class="unsaved">Unsaved</span>
|
||||
<span v-if="saving" class="saving-txt">Saving...</span>
|
||||
<button class="btn-save" :disabled="saving || !dirty" @click="saveNote">Save</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="note-title-row">
|
||||
<input
|
||||
ref="titleRef"
|
||||
v-model="noteTitle"
|
||||
class="note-title-input"
|
||||
placeholder="Note title"
|
||||
@keydown.ctrl.s.prevent="saveNote"
|
||||
@keydown.ctrl.e.prevent="editorRef?.editor?.commands.focus()"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="tag-row">
|
||||
<TagInput
|
||||
v-model="noteTags"
|
||||
:fetchTags="(q: string) => notesStore.fetchAllTags(q)"
|
||||
/>
|
||||
<button
|
||||
class="btn-suggest-tags"
|
||||
:disabled="tagSuggestions.suggestingTags.value"
|
||||
title="Auto-suggest tags from title and body"
|
||||
@click="tagSuggestions.fetchTagSuggestions()"
|
||||
>
|
||||
{{ tagSuggestions.suggestingTags.value ? '...' : 'Suggest' }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Tag suggestions strip -->
|
||||
<div v-if="tagSuggestions.suggestedTags.value.length" class="tag-suggestions">
|
||||
<span class="tag-suggestions-label">Suggested:</span>
|
||||
<button
|
||||
v-for="tag in tagSuggestions.suggestedTags.value"
|
||||
:key="tag"
|
||||
:class="['btn-tag-suggestion', { applied: tagSuggestions.appliedTags.value.has(tag) }]"
|
||||
@click="tagSuggestions.applyTagSuggestion(tag)"
|
||||
>
|
||||
#{{ tag }}{{ tagSuggestions.appliedTags.value.has(tag) ? ' ✓' : '' }}
|
||||
</button>
|
||||
<button class="btn-dismiss-suggestions" aria-label="Dismiss tag suggestions" @click="tagSuggestions.dismissTagSuggestions()">✕</button>
|
||||
</div>
|
||||
|
||||
<!-- Formatting toolbar -->
|
||||
<div class="toolbar-row">
|
||||
<MarkdownToolbar :editor="tiptapEditor" />
|
||||
</div>
|
||||
|
||||
<!-- Link suggestions strip -->
|
||||
<div v-if="linkSuggestions.length" class="link-suggest-strip">
|
||||
<span class="link-suggest-label">Links:</span>
|
||||
<span
|
||||
v-for="s in linkSuggestions"
|
||||
:key="s.note_id"
|
||||
class="link-suggest-chip"
|
||||
:title="`Appears ${s.count}× unlinked`"
|
||||
>
|
||||
<button class="btn-chip-link" @click="applyLink(s)">[[{{ s.title }}]]</button>
|
||||
</span>
|
||||
<button class="btn-link-all" @click="applyAllLinks" title="Link all suggestions">All</button>
|
||||
<button class="btn-dismiss-suggestions" aria-label="Dismiss link suggestions" @click="linkSuggestions = []">✕</button>
|
||||
</div>
|
||||
|
||||
<div class="editor-area" @keydown.ctrl.s.prevent="saveNote" @keydown.ctrl.e.prevent="editorRef?.editor?.commands.focus()">
|
||||
<TiptapEditor ref="editorRef" v-model="noteBody" @escape="titleRef?.focus()" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- ── LIST VIEW ── -->
|
||||
<template v-else>
|
||||
<div class="panel-header">
|
||||
<!-- Left rail: always-visible note list -->
|
||||
<div class="note-rail">
|
||||
<div class="rail-header">
|
||||
<template v-if="showNewNoteInput">
|
||||
<input
|
||||
ref="newNoteTitleRef"
|
||||
@@ -389,77 +311,134 @@ onUnmounted(() => { if (linkCheckTimer) clearTimeout(linkCheckTimer); });
|
||||
@keydown.enter="createNote"
|
||||
@keydown.escape="cancelNewNote"
|
||||
/>
|
||||
<button class="btn-new-note-confirm" :disabled="creatingNote || !newNoteTitle.trim()" @click="createNote">
|
||||
{{ creatingNote ? '...' : '+' }}
|
||||
<button class="btn-confirm" :disabled="creatingNote || !newNoteTitle.trim()" @click="createNote">
|
||||
{{ creatingNote ? '…' : '+' }}
|
||||
</button>
|
||||
<button class="btn-new-note-cancel" aria-label="Cancel new note" @click="cancelNewNote">✕</button>
|
||||
<button class="btn-cancel" aria-label="Cancel new note" @click="cancelNewNote">✕</button>
|
||||
</template>
|
||||
<template v-else>
|
||||
<span class="panel-title">Notes</span>
|
||||
<span class="rail-title">Notes</span>
|
||||
<button class="btn-new-note" @click="startNewNote" title="New note">+ New</button>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<div class="note-search-bar">
|
||||
<div class="rail-search">
|
||||
<input
|
||||
v-model="searchQuery"
|
||||
class="note-search-input"
|
||||
placeholder="Search notes..."
|
||||
class="rail-search-input"
|
||||
placeholder="Search…"
|
||||
type="search"
|
||||
aria-label="Search notes"
|
||||
/>
|
||||
<button v-if="searchQuery" class="btn-search-clear" @click="searchQuery = ''" title="Clear search">✕</button>
|
||||
<button v-if="searchQuery" class="btn-search-clear" aria-label="Clear search" @click="searchQuery = ''">✕</button>
|
||||
</div>
|
||||
|
||||
<div v-if="listLoading" class="state-msg">Loading...</div>
|
||||
|
||||
<div v-if="listLoading" class="rail-state">Loading…</div>
|
||||
<ul v-else class="note-list">
|
||||
<li
|
||||
v-for="note in filteredNotes"
|
||||
:key="note.id"
|
||||
class="note-row"
|
||||
:class="{ active: editingId === note.id }"
|
||||
:class="['note-row', { active: editingId === note.id }]"
|
||||
@click="openNote(note.id)"
|
||||
>
|
||||
<div class="note-row-main">
|
||||
<span class="note-row-title">{{ note.title }}</span>
|
||||
<span v-if="note.tags?.length" class="note-row-tags">
|
||||
<span
|
||||
v-for="tag in note.tags.slice(0, 3)"
|
||||
:key="tag"
|
||||
:class="['note-tag-pill', { 'tag-match': matchedTags(note).includes(tag) }]"
|
||||
>#{{ tag }}</span>
|
||||
<span v-if="note.tags.length > 3" class="note-tag-more">+{{ note.tags.length - 3 }}</span>
|
||||
</span>
|
||||
<span class="note-row-title">{{ note.title || 'Untitled' }}</span>
|
||||
<span class="note-row-age">{{ formatDate(note.updated_at) }}</span>
|
||||
</div>
|
||||
|
||||
<div v-if="note.tags?.length" class="note-row-tags">
|
||||
<span
|
||||
v-for="tag in note.tags.slice(0, 2)"
|
||||
:key="tag"
|
||||
:class="['note-tag-pill', { 'tag-match': matchedTags(note).includes(tag) }]"
|
||||
>#{{ tag }}</span>
|
||||
<span v-if="note.tags.length > 2" class="note-tag-more">+{{ note.tags.length - 2 }}</span>
|
||||
</div>
|
||||
<div class="note-row-actions" @click.stop>
|
||||
<template v-if="deletingId === note.id">
|
||||
<button
|
||||
class="btn-confirm-delete"
|
||||
:disabled="pendingDelete === note.id"
|
||||
@click="requestDelete(note.id, $event)"
|
||||
>
|
||||
{{ pendingDelete === note.id ? '...' : 'Delete?' }}
|
||||
<button class="btn-confirm-delete" :disabled="pendingDelete === note.id" @click="requestDelete(note.id, $event)">
|
||||
{{ pendingDelete === note.id ? '…' : 'Delete?' }}
|
||||
</button>
|
||||
<button class="btn-cancel-delete" aria-label="Cancel delete" @click="cancelDelete($event)">✕</button>
|
||||
</template>
|
||||
<button
|
||||
v-else
|
||||
class="btn-delete"
|
||||
title="Delete note"
|
||||
@click="requestDelete(note.id, $event)"
|
||||
>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"/><path d="M10 11v6"/><path d="M14 11v6"/><path d="M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2"/></svg>
|
||||
<button v-else class="btn-delete" title="Delete note" @click="requestDelete(note.id, $event)">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"/><path d="M10 11v6"/><path d="M14 11v6"/><path d="M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li v-if="filteredNotes.length === 0" class="state-msg">
|
||||
{{ searchQuery.trim() ? 'No notes match.' : 'No notes yet — ask the agent to create one.' }}
|
||||
<li v-if="filteredNotes.length === 0" class="rail-state">
|
||||
{{ searchQuery.trim() ? 'No matches.' : 'No notes yet.' }}
|
||||
</li>
|
||||
</ul>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<!-- Right pane: editor -->
|
||||
<div class="note-editor-pane">
|
||||
<template v-if="editingId">
|
||||
<div class="panel-header">
|
||||
<div class="editor-header-right">
|
||||
<WordCount :body="noteBody" />
|
||||
<span v-if="dirty && !saving" class="unsaved">Unsaved</span>
|
||||
<span v-if="saving" class="saving-txt">Saving…</span>
|
||||
<button class="btn-save" :disabled="saving || !dirty" @click="saveNote">Save</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="note-title-row">
|
||||
<input
|
||||
ref="titleRef"
|
||||
v-model="noteTitle"
|
||||
class="note-title-input"
|
||||
placeholder="Note title"
|
||||
@keydown.ctrl.s.prevent="saveNote"
|
||||
@keydown.ctrl.e.prevent="editorRef?.editor?.commands.focus()"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="tag-row">
|
||||
<TagInput v-model="noteTags" :fetchTags="(q: string) => notesStore.fetchAllTags(q)" />
|
||||
<button
|
||||
class="btn-suggest-tags"
|
||||
:disabled="tagSuggestions.suggestingTags.value"
|
||||
title="Auto-suggest tags from title and body"
|
||||
@click="tagSuggestions.fetchTagSuggestions()"
|
||||
>
|
||||
{{ tagSuggestions.suggestingTags.value ? '…' : 'Suggest' }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div v-if="tagSuggestions.suggestedTags.value.length" class="tag-suggestions">
|
||||
<span class="tag-suggestions-label">Suggested:</span>
|
||||
<button
|
||||
v-for="tag in tagSuggestions.suggestedTags.value"
|
||||
:key="tag"
|
||||
:class="['btn-tag-suggestion', { applied: tagSuggestions.appliedTags.value.has(tag) }]"
|
||||
@click="tagSuggestions.applyTagSuggestion(tag)"
|
||||
>#{{ tag }}{{ tagSuggestions.appliedTags.value.has(tag) ? ' ✓' : '' }}</button>
|
||||
<button class="btn-dismiss-suggestions" aria-label="Dismiss tag suggestions" @click="tagSuggestions.dismissTagSuggestions()">✕</button>
|
||||
</div>
|
||||
|
||||
<div class="toolbar-row">
|
||||
<MarkdownToolbar :editor="tiptapEditor" />
|
||||
</div>
|
||||
|
||||
<div v-if="linkSuggestions.length" class="link-suggest-strip">
|
||||
<span class="link-suggest-label">Links:</span>
|
||||
<span v-for="s in linkSuggestions" :key="s.note_id" class="link-suggest-chip" :title="`Appears ${s.count}× unlinked`">
|
||||
<button class="btn-chip-link" @click="applyLink(s)">[[{{ s.title }}]]</button>
|
||||
</span>
|
||||
<button class="btn-link-all" @click="applyAllLinks" title="Link all suggestions">All</button>
|
||||
<button class="btn-dismiss-suggestions" aria-label="Dismiss link suggestions" @click="linkSuggestions = []">✕</button>
|
||||
</div>
|
||||
|
||||
<div class="editor-area" @keydown.ctrl.s.prevent="saveNote" @keydown.ctrl.e.prevent="editorRef?.editor?.commands.focus()">
|
||||
<TiptapEditor ref="editorRef" v-model="noteBody" @escape="titleRef?.focus()" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div v-else class="editor-empty-state">
|
||||
<p>Select a note or create a new one</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
@@ -467,41 +446,278 @@ onUnmounted(() => { if (linkCheckTimer) clearTimeout(linkCheckTimer); });
|
||||
<style scoped>
|
||||
.ws-note-editor {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-direction: row;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
background: var(--color-surface);
|
||||
border-left: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
/* ── Left rail ── */
|
||||
.note-rail {
|
||||
width: 155px;
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
border-right: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
.rail-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.3rem;
|
||||
padding: 0.5rem 0.6rem;
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.rail-title {
|
||||
color: var(--color-text-muted);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.04em;
|
||||
font-size: 0.72rem;
|
||||
font-weight: 600;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.btn-new-note {
|
||||
background: none;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 4px;
|
||||
padding: 0.15rem 0.4rem;
|
||||
font-size: 0.7rem;
|
||||
color: var(--color-text-muted);
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.btn-new-note:hover { border-color: var(--color-primary); color: var(--color-primary); }
|
||||
|
||||
.rail-search {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.2rem;
|
||||
padding: 0.3rem 0.5rem;
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.rail-search-input {
|
||||
flex: 1;
|
||||
background: transparent;
|
||||
border: none;
|
||||
font-size: 0.78rem;
|
||||
color: var(--color-text);
|
||||
min-width: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.rail-search-input:focus { outline: none; }
|
||||
.rail-search-input::-webkit-search-cancel-button { display: none; }
|
||||
|
||||
.btn-search-clear {
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--color-text-muted);
|
||||
font-size: 0.68rem;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
line-height: 1;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.btn-search-clear:hover { color: var(--color-text); }
|
||||
|
||||
.rail-state {
|
||||
padding: 1rem 0.65rem;
|
||||
font-size: 0.78rem;
|
||||
color: var(--color-text-muted);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/* Note list */
|
||||
.note-list {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow-y: auto;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.note-row {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 0.4rem 0.6rem;
|
||||
border-bottom: 1px solid color-mix(in srgb, var(--color-border) 60%, transparent);
|
||||
cursor: pointer;
|
||||
gap: 0.15rem;
|
||||
border-left: 2px solid transparent;
|
||||
transition: background 0.12s;
|
||||
}
|
||||
.note-row:hover { background: color-mix(in srgb, var(--color-primary) 5%, var(--color-surface)); }
|
||||
.note-row.active {
|
||||
background: color-mix(in srgb, var(--color-primary) 8%, var(--color-surface));
|
||||
border-left-color: var(--color-primary);
|
||||
}
|
||||
|
||||
.note-row-main {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.note-row-title {
|
||||
flex: 1;
|
||||
font-size: 0.78rem;
|
||||
font-weight: 500;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.note-row-age {
|
||||
font-size: 0.62rem;
|
||||
color: var(--color-text-muted);
|
||||
white-space: nowrap;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.note-row-tags {
|
||||
display: flex;
|
||||
gap: 0.15rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.note-tag-pill {
|
||||
font-size: 0.58rem;
|
||||
color: var(--color-primary);
|
||||
background: color-mix(in srgb, var(--color-primary) 10%, transparent);
|
||||
border-radius: 999px;
|
||||
padding: 0 0.3rem;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
max-width: 5rem;
|
||||
}
|
||||
.note-tag-pill.tag-match {
|
||||
background: color-mix(in srgb, var(--color-primary) 22%, transparent);
|
||||
outline: 1px solid var(--color-primary);
|
||||
}
|
||||
|
||||
.note-tag-more {
|
||||
font-size: 0.58rem;
|
||||
color: var(--color-text-muted);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.note-row-actions {
|
||||
display: flex;
|
||||
gap: 0.2rem;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.btn-delete {
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--color-text-muted);
|
||||
cursor: pointer;
|
||||
padding: 0.1rem;
|
||||
border-radius: 3px;
|
||||
opacity: 0;
|
||||
transition: opacity 0.1s, color 0.1s;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.note-row:hover .btn-delete { opacity: 1; }
|
||||
.btn-delete:hover { color: var(--color-danger, #e74c3c); }
|
||||
|
||||
.btn-confirm-delete {
|
||||
background: none;
|
||||
border: 1px solid var(--color-danger, #e74c3c);
|
||||
color: var(--color-danger, #e74c3c);
|
||||
font-size: 0.65rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
padding: 0.1rem 0.3rem;
|
||||
border-radius: 3px;
|
||||
}
|
||||
.btn-confirm-delete:disabled { opacity: 0.5; cursor: default; }
|
||||
|
||||
.btn-cancel-delete {
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--color-text-muted);
|
||||
font-size: 0.7rem;
|
||||
cursor: pointer;
|
||||
padding: 0.1rem;
|
||||
}
|
||||
.btn-cancel-delete:hover { color: var(--color-text); }
|
||||
|
||||
/* Inline new note */
|
||||
.new-note-input {
|
||||
flex: 1;
|
||||
background: var(--color-input-bg, var(--color-bg));
|
||||
border: 1px solid var(--color-primary);
|
||||
border-radius: 4px;
|
||||
padding: 0.15rem 0.35rem;
|
||||
font-size: 0.78rem;
|
||||
color: var(--color-text);
|
||||
min-width: 0;
|
||||
}
|
||||
.new-note-input:focus { outline: none; }
|
||||
|
||||
.btn-confirm {
|
||||
background: var(--color-primary);
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
padding: 0.15rem 0.35rem;
|
||||
font-size: 0.85rem;
|
||||
cursor: pointer;
|
||||
flex-shrink: 0;
|
||||
line-height: 1;
|
||||
}
|
||||
.btn-confirm:disabled { opacity: 0.4; cursor: default; }
|
||||
|
||||
.btn-cancel {
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--color-text-muted);
|
||||
font-size: 0.72rem;
|
||||
cursor: pointer;
|
||||
padding: 0.1rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.btn-cancel:hover { color: var(--color-text); }
|
||||
|
||||
/* ── Right editor pane ── */
|
||||
.note-editor-pane {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.editor-empty-state {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: var(--color-text-muted);
|
||||
font-size: 0.85rem;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/* Editor UI */
|
||||
.panel-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0.6rem 0.75rem;
|
||||
padding: 0.5rem 0.75rem;
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
flex-shrink: 0;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.panel-title {
|
||||
color: var(--color-text-muted);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.04em;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.btn-back-arrow {
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--color-primary);
|
||||
font-size: 0.85rem;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.btn-back-arrow:hover { text-decoration: underline; }
|
||||
|
||||
.editor-header-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -523,7 +739,6 @@ onUnmounted(() => { if (linkCheckTimer) clearTimeout(linkCheckTimer); });
|
||||
}
|
||||
.btn-save:disabled { opacity: 0.4; cursor: default; }
|
||||
|
||||
/* Editor */
|
||||
.note-title-row {
|
||||
padding: 0.5rem 0.75rem;
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
@@ -549,11 +764,7 @@ onUnmounted(() => { if (linkCheckTimer) clearTimeout(linkCheckTimer); });
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.tag-row > :first-child {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
.tag-row > :first-child { flex: 1; min-width: 0; }
|
||||
|
||||
.btn-suggest-tags {
|
||||
background: none;
|
||||
@@ -567,10 +778,7 @@ onUnmounted(() => { if (linkCheckTimer) clearTimeout(linkCheckTimer); });
|
||||
flex-shrink: 0;
|
||||
align-self: center;
|
||||
}
|
||||
.btn-suggest-tags:hover:not(:disabled) {
|
||||
border-color: var(--color-primary);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
.btn-suggest-tags:hover:not(:disabled) { border-color: var(--color-primary); color: var(--color-primary); }
|
||||
.btn-suggest-tags:disabled { opacity: 0.5; cursor: default; }
|
||||
|
||||
.tag-suggestions {
|
||||
@@ -583,12 +791,7 @@ onUnmounted(() => { if (linkCheckTimer) clearTimeout(linkCheckTimer); });
|
||||
background: color-mix(in srgb, var(--color-primary) 5%, var(--color-surface));
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.tag-suggestions-label {
|
||||
font-size: 0.72rem;
|
||||
color: var(--color-text-muted);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.tag-suggestions-label { font-size: 0.72rem; color: var(--color-text-muted); flex-shrink: 0; }
|
||||
|
||||
.btn-tag-suggestion {
|
||||
background: none;
|
||||
@@ -633,7 +836,6 @@ onUnmounted(() => { if (linkCheckTimer) clearTimeout(linkCheckTimer); });
|
||||
background: color-mix(in srgb, var(--color-primary) 5%, var(--color-surface));
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.link-suggest-label {
|
||||
font-size: 0.7rem;
|
||||
color: var(--color-text-muted);
|
||||
@@ -642,10 +844,7 @@ onUnmounted(() => { if (linkCheckTimer) clearTimeout(linkCheckTimer); });
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
|
||||
.link-suggest-chip {
|
||||
display: inline-flex;
|
||||
}
|
||||
.link-suggest-chip { display: inline-flex; }
|
||||
|
||||
.btn-chip-link {
|
||||
background: none;
|
||||
@@ -658,9 +857,7 @@ onUnmounted(() => { if (linkCheckTimer) clearTimeout(linkCheckTimer); });
|
||||
font-family: monospace;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.btn-chip-link:hover {
|
||||
background: color-mix(in srgb, var(--color-primary) 15%, transparent);
|
||||
}
|
||||
.btn-chip-link:hover { background: color-mix(in srgb, var(--color-primary) 15%, transparent); }
|
||||
|
||||
.btn-link-all {
|
||||
background: none;
|
||||
@@ -679,212 +876,4 @@ onUnmounted(() => { if (linkCheckTimer) clearTimeout(linkCheckTimer); });
|
||||
overflow-y: auto;
|
||||
padding: 0.5rem 0.6rem;
|
||||
}
|
||||
|
||||
/* Search bar */
|
||||
.note-search-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.3rem;
|
||||
padding: 0.4rem 0.6rem;
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.note-search-input {
|
||||
flex: 1;
|
||||
background: var(--color-input-bg, var(--color-bg));
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 5px;
|
||||
padding: 0.25rem 0.5rem;
|
||||
font-size: 0.82rem;
|
||||
color: var(--color-text);
|
||||
min-width: 0;
|
||||
}
|
||||
.note-search-input:focus { outline: none; border-color: var(--color-primary); }
|
||||
.note-search-input::-webkit-search-cancel-button { display: none; }
|
||||
|
||||
.btn-search-clear {
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--color-text-muted);
|
||||
font-size: 0.72rem;
|
||||
cursor: pointer;
|
||||
padding: 0.1rem 0.25rem;
|
||||
flex-shrink: 0;
|
||||
border-radius: 3px;
|
||||
}
|
||||
.btn-search-clear:hover { color: var(--color-text); }
|
||||
|
||||
/* List */
|
||||
.note-list {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow-y: auto;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.note-row {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 0.45rem 0.75rem;
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
cursor: pointer;
|
||||
gap: 0.3rem;
|
||||
}
|
||||
.note-row:hover { background: color-mix(in srgb, var(--color-primary) 5%, var(--color-surface)); }
|
||||
.note-row.active { background: color-mix(in srgb, var(--color-primary) 8%, var(--color-surface)); }
|
||||
|
||||
.note-row-main {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.note-row-title {
|
||||
flex: 1;
|
||||
font-size: 0.85rem;
|
||||
font-weight: 500;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.note-row-tags {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.2rem;
|
||||
flex-shrink: 0;
|
||||
overflow: hidden;
|
||||
max-width: 40%;
|
||||
}
|
||||
|
||||
.note-tag-pill {
|
||||
font-size: 0.62rem;
|
||||
color: var(--color-primary);
|
||||
background: color-mix(in srgb, var(--color-primary) 10%, transparent);
|
||||
border-radius: 999px;
|
||||
padding: 0 0.35rem;
|
||||
white-space: nowrap;
|
||||
line-height: 1.6;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
max-width: 6rem;
|
||||
}
|
||||
|
||||
.note-tag-pill.tag-match {
|
||||
background: color-mix(in srgb, var(--color-primary) 22%, transparent);
|
||||
outline: 1px solid var(--color-primary);
|
||||
}
|
||||
|
||||
.note-tag-more {
|
||||
font-size: 0.62rem;
|
||||
color: var(--color-text-muted);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.note-row-age {
|
||||
font-size: 0.68rem;
|
||||
color: var(--color-text-muted);
|
||||
white-space: nowrap;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.note-row-actions {
|
||||
display: flex;
|
||||
gap: 0.3rem;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.btn-delete {
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--color-text-muted);
|
||||
font-size: 0.75rem;
|
||||
cursor: pointer;
|
||||
padding: 0.1rem 0.3rem;
|
||||
border-radius: 3px;
|
||||
opacity: 0;
|
||||
transition: opacity 0.1s, color 0.1s;
|
||||
}
|
||||
.note-row:hover .btn-delete { opacity: 1; }
|
||||
.btn-delete:hover { color: var(--color-danger, #e74c3c); }
|
||||
|
||||
.btn-confirm-delete {
|
||||
background: none;
|
||||
border: 1px solid var(--color-danger, #e74c3c);
|
||||
color: var(--color-danger, #e74c3c);
|
||||
font-size: 0.72rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
padding: 0.15rem 0.5rem;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.btn-confirm-delete:disabled { opacity: 0.5; cursor: default; }
|
||||
|
||||
.btn-cancel-delete {
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--color-text-muted);
|
||||
font-size: 0.75rem;
|
||||
cursor: pointer;
|
||||
padding: 0.1rem 0.3rem;
|
||||
}
|
||||
.btn-cancel-delete:hover { color: var(--color-text); }
|
||||
|
||||
.state-msg {
|
||||
padding: 1.5rem;
|
||||
text-align: center;
|
||||
font-size: 0.85rem;
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
.btn-new-note {
|
||||
margin-left: auto;
|
||||
background: none;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 5px;
|
||||
padding: 0.2rem 0.55rem;
|
||||
font-size: 0.75rem;
|
||||
color: var(--color-text-muted);
|
||||
cursor: pointer;
|
||||
}
|
||||
.btn-new-note:hover { border-color: var(--color-primary); color: var(--color-primary); }
|
||||
|
||||
.new-note-input {
|
||||
flex: 1;
|
||||
background: var(--color-input-bg, var(--color-bg));
|
||||
border: 1px solid var(--color-primary);
|
||||
border-radius: 5px;
|
||||
padding: 0.22rem 0.5rem;
|
||||
font-size: 0.83rem;
|
||||
color: var(--color-text);
|
||||
min-width: 0;
|
||||
}
|
||||
.new-note-input:focus { outline: none; }
|
||||
|
||||
.btn-new-note-confirm {
|
||||
background: var(--color-primary);
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
padding: 0.22rem 0.5rem;
|
||||
font-size: 0.9rem;
|
||||
cursor: pointer;
|
||||
flex-shrink: 0;
|
||||
line-height: 1;
|
||||
}
|
||||
.btn-new-note-confirm:disabled { opacity: 0.4; cursor: default; }
|
||||
|
||||
.btn-new-note-cancel {
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--color-text-muted);
|
||||
font-size: 0.75rem;
|
||||
cursor: pointer;
|
||||
padding: 0.1rem 0.3rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.btn-new-note-cancel:hover { color: var(--color-text); }
|
||||
</style>
|
||||
|
||||
@@ -56,6 +56,17 @@ const STATUS_ICON: Record<string, string> = {
|
||||
done: "✓",
|
||||
};
|
||||
|
||||
const PRIORITY_CLASS: Record<string, string> = {
|
||||
high: "priority-high",
|
||||
medium: "priority-medium",
|
||||
low: "priority-low",
|
||||
};
|
||||
|
||||
function isRowOverdue(task: Task): boolean {
|
||||
if (!task.due_date || task.status === "done") return false;
|
||||
return task.due_date < new Date().toISOString().slice(0, 10);
|
||||
}
|
||||
|
||||
// Group tasks by milestone, "No Milestone" first
|
||||
const groupedTasks = computed(() => {
|
||||
const noMs = tasks.value.filter((t) => t.milestone_id === null);
|
||||
@@ -207,45 +218,99 @@ defineExpose({ reload: loadAll });
|
||||
<template>
|
||||
<div class="ws-task-panel">
|
||||
|
||||
<!-- Slide-over detail view -->
|
||||
<Transition name="slide">
|
||||
<!-- Task list — always visible, shrinks when detail is open -->
|
||||
<div :class="['task-list-view', { 'has-detail': !!activeTask }]">
|
||||
<div class="panel-header">
|
||||
<span class="panel-title">Tasks</span>
|
||||
</div>
|
||||
|
||||
<div class="task-add">
|
||||
<input
|
||||
v-model="newTaskTitle"
|
||||
class="task-add-input"
|
||||
placeholder="New task..."
|
||||
@keydown.enter="addTask"
|
||||
/>
|
||||
<button class="btn-add" :disabled="addingTask || !newTaskTitle.trim()" @click="addTask">+</button>
|
||||
</div>
|
||||
|
||||
<div v-if="loading" class="state-msg">Loading...</div>
|
||||
|
||||
<div v-else class="groups-scroll">
|
||||
<!-- No Milestone group (always first) -->
|
||||
<div class="ms-group">
|
||||
<button class="ms-group-header" @click="toggleGroup(null)">
|
||||
<span class="ms-chevron">{{ collapsedGroups.has(null) ? '▶' : '▼' }}</span>
|
||||
<span class="ms-name">No Milestone</span>
|
||||
<span class="ms-count">{{ groupedTasks.noMilestone.length }}</span>
|
||||
</button>
|
||||
<ul v-show="!collapsedGroups.has(null)" class="task-items">
|
||||
<li
|
||||
v-for="task in groupedTasks.noMilestone"
|
||||
:key="task.id"
|
||||
:class="['task-row', { 'task-active': activeTask?.id === task.id }]"
|
||||
@click="openTask(task)"
|
||||
>
|
||||
<button :class="['status-dot', `status-${task.status}`]" :title="`${task.status} — click to cycle`" @click="cycleStatus(task, $event)">{{ STATUS_ICON[task.status] ?? '○' }}</button>
|
||||
<span v-if="task.priority && task.priority !== 'none'" :class="['priority-dot', PRIORITY_CLASS[task.priority] ?? '']"></span>
|
||||
<span class="task-title" :class="{ done: task.status === 'done' }">{{ task.title }}</span>
|
||||
<span v-if="task.due_date" :class="['task-due', { overdue: isRowOverdue(task) }]">{{ task.due_date }}</span>
|
||||
<span class="task-age">{{ formatDate(task.updated_at) }}</span>
|
||||
</li>
|
||||
<li v-if="groupedTasks.noMilestone.length === 0" class="empty-group">No tasks</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Milestone groups -->
|
||||
<div v-for="{ milestone, tasks: msTasks } in groupedTasks.milestoneGroups" :key="milestone.id" class="ms-group">
|
||||
<button class="ms-group-header" @click="toggleGroup(milestone.id)">
|
||||
<span class="ms-chevron">{{ collapsedGroups.has(milestone.id) ? '▶' : '▼' }}</span>
|
||||
<span class="ms-name">{{ milestone.title }}</span>
|
||||
<span :class="['ms-status', `ms-status-${milestone.status}`]">{{ milestone.status.replace('_',' ') }}</span>
|
||||
<span class="ms-count">{{ msTasks.length }}</span>
|
||||
</button>
|
||||
<ul v-show="!collapsedGroups.has(milestone.id)" class="task-items">
|
||||
<li
|
||||
v-for="task in msTasks"
|
||||
:key="task.id"
|
||||
:class="['task-row', { 'task-active': activeTask?.id === task.id }]"
|
||||
@click="openTask(task)"
|
||||
>
|
||||
<button :class="['status-dot', `status-${task.status}`]" :title="`${task.status} — click to cycle`" @click="cycleStatus(task, $event)">{{ STATUS_ICON[task.status] ?? '○' }}</button>
|
||||
<span v-if="task.priority && task.priority !== 'none'" :class="['priority-dot', PRIORITY_CLASS[task.priority] ?? '']"></span>
|
||||
<span class="task-title" :class="{ done: task.status === 'done' }">{{ task.title }}</span>
|
||||
<span v-if="task.due_date" :class="['task-due', { overdue: isRowOverdue(task) }]">{{ task.due_date }}</span>
|
||||
<span class="task-age">{{ formatDate(task.updated_at) }}</span>
|
||||
</li>
|
||||
<li v-if="msTasks.length === 0" class="empty-group">No tasks</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Detail pane — bottom split when a task is selected -->
|
||||
<Transition name="detail-fade">
|
||||
<div v-if="activeTask" class="task-detail">
|
||||
<div class="detail-header">
|
||||
<button class="btn-back-arrow" @click="closeTask">← Tasks</button>
|
||||
<RouterLink
|
||||
:to="`/tasks/${activeTask.id}/edit`"
|
||||
target="_blank"
|
||||
class="btn-edit-task"
|
||||
title="Open full editor"
|
||||
>Edit ↗</RouterLink>
|
||||
<span
|
||||
:class="['status-badge', `status-${activeTask.status}`]"
|
||||
@click="cycleStatus(activeTask, $event)"
|
||||
title="Click to cycle status"
|
||||
>
|
||||
{{ STATUS_ICON[activeTask.status] ?? "○" }}
|
||||
{{ activeTask.status.replace("_", " ") }}
|
||||
<RouterLink :to="`/tasks/${activeTask.id}/edit`" target="_blank" class="btn-edit-task" title="Open full editor">Edit ↗</RouterLink>
|
||||
<span :class="['status-badge', `status-${activeTask.status}`]" @click="cycleStatus(activeTask, $event)" title="Click to cycle status">
|
||||
{{ STATUS_ICON[activeTask.status] ?? "○" }} {{ activeTask.status.replace("_", " ") }}
|
||||
</span>
|
||||
<template v-if="deleteConfirmPending">
|
||||
<button class="btn-delete-confirm" :disabled="deletingTask" @click="deleteActiveTask">
|
||||
{{ deletingTask ? '...' : 'Delete?' }}
|
||||
</button>
|
||||
<button class="btn-delete-confirm" :disabled="deletingTask" @click="deleteActiveTask">{{ deletingTask ? '...' : 'Delete?' }}</button>
|
||||
<button class="btn-delete-cancel" aria-label="Cancel delete" @click="cancelDeleteTask">✕</button>
|
||||
</template>
|
||||
<button v-else class="btn-delete-task" title="Delete task" @click="deleteActiveTask">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"/><path d="M10 11v6"/><path d="M14 11v6"/><path d="M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2"/></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"/><path d="M10 11v6"/><path d="M14 11v6"/><path d="M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2"/></svg>
|
||||
</button>
|
||||
<button class="btn-close-detail" @click="closeTask" aria-label="Close detail">✕</button>
|
||||
</div>
|
||||
|
||||
<h3 class="detail-title">{{ activeTask.title }}</h3>
|
||||
|
||||
<div class="detail-meta">
|
||||
<span v-if="activeTask.priority && activeTask.priority !== 'none'" class="meta-chip priority">
|
||||
{{ activeTask.priority }}
|
||||
</span>
|
||||
<span v-if="activeTask.due_date" class="meta-chip due">
|
||||
Due {{ activeTask.due_date }}
|
||||
</span>
|
||||
<span v-if="activeTask.priority && activeTask.priority !== 'none'" class="meta-chip priority">{{ activeTask.priority }}</span>
|
||||
<span v-if="activeTask.due_date" class="meta-chip due">Due {{ activeTask.due_date }}</span>
|
||||
<select
|
||||
class="milestone-select"
|
||||
:value="activeTask.milestone_id ?? ''"
|
||||
@@ -268,90 +333,6 @@ defineExpose({ reload: loadAll });
|
||||
</div>
|
||||
</Transition>
|
||||
|
||||
<!-- Task list (always mounted, hidden during slide-over via v-show) -->
|
||||
<div v-show="!activeTask" class="task-list-view">
|
||||
<div class="panel-header">
|
||||
<span class="panel-title">Tasks</span>
|
||||
</div>
|
||||
|
||||
<div class="task-add">
|
||||
<input
|
||||
v-model="newTaskTitle"
|
||||
class="task-add-input"
|
||||
placeholder="New task..."
|
||||
@keydown.enter="addTask"
|
||||
/>
|
||||
<button class="btn-add" :disabled="addingTask || !newTaskTitle.trim()" @click="addTask">+</button>
|
||||
</div>
|
||||
|
||||
<div v-if="loading" class="state-msg">Loading...</div>
|
||||
|
||||
<div v-else class="groups-scroll">
|
||||
<!-- No Milestone group (always first) -->
|
||||
<div class="ms-group">
|
||||
<button
|
||||
class="ms-group-header"
|
||||
@click="toggleGroup(null)"
|
||||
>
|
||||
<span class="ms-chevron">{{ collapsedGroups.has(null) ? '▶' : '▼' }}</span>
|
||||
<span class="ms-name">No Milestone</span>
|
||||
<span class="ms-count">{{ groupedTasks.noMilestone.length }}</span>
|
||||
</button>
|
||||
<ul v-show="!collapsedGroups.has(null)" class="task-items">
|
||||
<li
|
||||
v-for="task in groupedTasks.noMilestone"
|
||||
:key="task.id"
|
||||
class="task-row"
|
||||
@click="openTask(task)"
|
||||
>
|
||||
<button
|
||||
:class="['status-dot', `status-${task.status}`]"
|
||||
:title="`${task.status} — click to cycle`"
|
||||
@click="cycleStatus(task, $event)"
|
||||
>{{ STATUS_ICON[task.status] ?? '○' }}</button>
|
||||
<span class="task-title" :class="{ done: task.status === 'done' }">{{ task.title }}</span>
|
||||
<span class="task-age">{{ formatDate(task.updated_at) }}</span>
|
||||
</li>
|
||||
<li v-if="groupedTasks.noMilestone.length === 0" class="empty-group">No tasks</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Milestone groups -->
|
||||
<div
|
||||
v-for="{ milestone, tasks: msTasks } in groupedTasks.milestoneGroups"
|
||||
:key="milestone.id"
|
||||
class="ms-group"
|
||||
>
|
||||
<button
|
||||
class="ms-group-header"
|
||||
@click="toggleGroup(milestone.id)"
|
||||
>
|
||||
<span class="ms-chevron">{{ collapsedGroups.has(milestone.id) ? '▶' : '▼' }}</span>
|
||||
<span class="ms-name">{{ milestone.title }}</span>
|
||||
<span :class="['ms-status', `ms-status-${milestone.status}`]">{{ milestone.status.replace('_',' ') }}</span>
|
||||
<span class="ms-count">{{ msTasks.length }}</span>
|
||||
</button>
|
||||
<ul v-show="!collapsedGroups.has(milestone.id)" class="task-items">
|
||||
<li
|
||||
v-for="task in msTasks"
|
||||
:key="task.id"
|
||||
class="task-row"
|
||||
@click="openTask(task)"
|
||||
>
|
||||
<button
|
||||
:class="['status-dot', `status-${task.status}`]"
|
||||
:title="`${task.status} — click to cycle`"
|
||||
@click="cycleStatus(task, $event)"
|
||||
>{{ STATUS_ICON[task.status] ?? '○' }}</button>
|
||||
<span class="task-title" :class="{ done: task.status === 'done' }">{{ task.title }}</span>
|
||||
<span class="task-age">{{ formatDate(task.updated_at) }}</span>
|
||||
</li>
|
||||
<li v-if="msTasks.length === 0" class="empty-group">No tasks</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -370,9 +351,16 @@ defineExpose({ reload: loadAll });
|
||||
.task-list-view {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
.task-list-view.has-detail {
|
||||
flex: 0 0 44%;
|
||||
}
|
||||
.task-active {
|
||||
background: color-mix(in srgb, var(--color-primary) 6%, var(--color-surface)) !important;
|
||||
}
|
||||
|
||||
.panel-header {
|
||||
padding: 0.6rem 0.75rem;
|
||||
@@ -510,15 +498,15 @@ defineExpose({ reload: loadAll });
|
||||
|
||||
.state-msg { padding: 1.5rem; text-align: center; font-size: 0.85rem; color: var(--color-text-muted); }
|
||||
|
||||
/* ── Slide-over detail ── */
|
||||
/* ── Detail pane (bottom split) ── */
|
||||
.task-detail {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: var(--color-surface);
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
z-index: 5;
|
||||
background: var(--color-surface);
|
||||
border-top: 2px solid var(--color-border);
|
||||
}
|
||||
|
||||
.detail-header {
|
||||
@@ -530,17 +518,6 @@ defineExpose({ reload: loadAll });
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.btn-back-arrow {
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--color-primary);
|
||||
font-size: 0.85rem;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.btn-back-arrow:hover { text-decoration: underline; }
|
||||
|
||||
.status-badge {
|
||||
padding: 0.2rem 0.55rem;
|
||||
border-radius: 12px;
|
||||
@@ -669,11 +646,45 @@ defineExpose({ reload: loadAll });
|
||||
border-top: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
/* Slide transition */
|
||||
.slide-enter-active,
|
||||
.slide-leave-active {
|
||||
transition: transform 0.2s ease;
|
||||
/* Detail fade transition */
|
||||
.detail-fade-enter-active,
|
||||
.detail-fade-leave-active { transition: opacity 0.15s; }
|
||||
.detail-fade-enter-from,
|
||||
.detail-fade-leave-to { opacity: 0; }
|
||||
|
||||
/* Priority dots on task rows */
|
||||
.priority-dot {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 2px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.slide-enter-from { transform: translateX(100%); }
|
||||
.slide-leave-to { transform: translateX(100%); }
|
||||
.priority-high { background: #ef4444; }
|
||||
.priority-medium { background: #f59e0b; }
|
||||
.priority-low { background: #3b82f6; }
|
||||
|
||||
/* Due date on task rows */
|
||||
.task-due {
|
||||
font-size: 0.65rem;
|
||||
color: var(--color-text-muted);
|
||||
white-space: nowrap;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.task-due.overdue {
|
||||
color: var(--color-danger, #e74c3c);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* Close detail button */
|
||||
.btn-close-detail {
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--color-text-muted);
|
||||
font-size: 0.75rem;
|
||||
cursor: pointer;
|
||||
padding: 0.15rem 0.3rem;
|
||||
border-radius: 3px;
|
||||
margin-left: 0.2rem;
|
||||
}
|
||||
.btn-close-detail:hover { color: var(--color-text); }
|
||||
</style>
|
||||
|
||||
@@ -22,6 +22,7 @@ const projectId = computed(() => Number(route.params.projectId));
|
||||
interface Project {
|
||||
id: number;
|
||||
title: string;
|
||||
goal?: string;
|
||||
}
|
||||
|
||||
const project = ref<Project | null>(null);
|
||||
@@ -56,12 +57,11 @@ function _loadPanelState(pid: number) {
|
||||
const panelOpen = ref({ tasks: true, chat: true, notes: true });
|
||||
|
||||
const gridColumns = computed(() => {
|
||||
const cols = [
|
||||
panelOpen.value.tasks ? "1fr" : "0px",
|
||||
panelOpen.value.chat ? "1fr" : "0px",
|
||||
panelOpen.value.notes ? "1fr" : "0px",
|
||||
];
|
||||
return cols.join(" ");
|
||||
return [
|
||||
panelOpen.value.tasks ? "minmax(0, 0.8fr)" : "0px",
|
||||
panelOpen.value.chat ? "minmax(0, 1.1fr)" : "0px",
|
||||
panelOpen.value.notes ? "minmax(0, 1.1fr)" : "0px",
|
||||
].join(" ");
|
||||
});
|
||||
|
||||
// SSE watcher
|
||||
@@ -124,6 +124,11 @@ function togglePanel(panel: keyof typeof panelOpen.value) {
|
||||
localStorage.setItem(_panelKey(projectId.value), JSON.stringify(panelOpen.value));
|
||||
}
|
||||
|
||||
function prefill(text: string) {
|
||||
messageInput.value = text;
|
||||
nextTick(() => inputEl.value?.focus());
|
||||
}
|
||||
|
||||
async function sendMessage() {
|
||||
const content = messageInput.value.trim();
|
||||
if (!content) return;
|
||||
@@ -230,7 +235,7 @@ onUnmounted(async () => {
|
||||
<router-link :to="project ? `/projects/${project.id}` : '/projects'" class="ws-back">
|
||||
← {{ project?.title ?? "Project" }}
|
||||
</router-link>
|
||||
<span class="ws-title">Workspace</span>
|
||||
<span class="ws-title">{{ project?.goal ?? '' }}</span>
|
||||
<div class="ws-panel-toggles">
|
||||
<button
|
||||
:class="['panel-toggle', { active: panelOpen.tasks }]"
|
||||
@@ -341,12 +346,17 @@ onUnmounted(async () => {
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<p
|
||||
<div
|
||||
v-if="chatStore.currentConversation && !chatStore.currentConversation.messages.length && !chatStore.streaming"
|
||||
class="empty-chat-msg"
|
||||
class="empty-chat-prompt"
|
||||
>
|
||||
Ask the agent to create notes or tasks for this project.
|
||||
</p>
|
||||
<p class="empty-hint">What would you like to work on?</p>
|
||||
<div class="quick-chips">
|
||||
<button class="quick-chip" @click="prefill('Summarize the current status of this project')">📊 Project status</button>
|
||||
<button class="quick-chip" @click="prefill('Create a note about ')">📝 New note</button>
|
||||
<button class="quick-chip" @click="prefill('Add tasks for ')">✓ Add tasks</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="chat-input-area">
|
||||
@@ -428,10 +438,13 @@ onUnmounted(async () => {
|
||||
}
|
||||
|
||||
.ws-title {
|
||||
font-weight: 600;
|
||||
font-size: 0.9rem;
|
||||
font-size: 0.78rem;
|
||||
color: var(--color-text-muted);
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.ws-panel-toggles {
|
||||
@@ -501,12 +514,37 @@ onUnmounted(async () => {
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.empty-chat-msg {
|
||||
color: var(--color-text-muted);
|
||||
font-size: 0.875rem;
|
||||
.empty-chat-prompt {
|
||||
text-align: center;
|
||||
padding: 2rem 1rem;
|
||||
}
|
||||
.empty-hint {
|
||||
margin: 0 0 1rem;
|
||||
color: var(--color-text-secondary);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
.quick-chips {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
justify-content: center;
|
||||
}
|
||||
.quick-chip {
|
||||
background: var(--color-surface);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 20px;
|
||||
padding: 0.4rem 0.85rem;
|
||||
font-size: 0.82rem;
|
||||
color: var(--color-text-secondary);
|
||||
cursor: pointer;
|
||||
transition: border-color 0.15s, color 0.15s, background 0.15s;
|
||||
font-family: inherit;
|
||||
}
|
||||
.quick-chip:hover {
|
||||
border-color: var(--color-primary);
|
||||
color: var(--color-primary);
|
||||
background: color-mix(in srgb, var(--color-primary) 5%, var(--color-surface));
|
||||
}
|
||||
|
||||
.chat-input-area {
|
||||
display: flex;
|
||||
|
||||
Reference in New Issue
Block a user