bvandeusen
8b0878f227
Note type gains description and consolidated_at fields. TaskEditorView adds a Goal textarea above the body editor (wired through dirty/save/ autosave paths). TaskViewerView renders Goal as a subordinate block above the body, plus a subtle 'Auto-summarized from work logs' banner when consolidated_at is set. Also adds a consolidateTask client function for the upcoming re-consolidate button (Task 11).
865 lines
24 KiB
Vue
865 lines
24 KiB
Vue
<script setup lang="ts">
|
|
import { onMounted, onUnmounted, computed, ref, watch } from "vue";
|
|
import { useRoute, useRouter } from "vue-router";
|
|
import { useTasksStore } from "@/stores/tasks";
|
|
import { useNotesStore } from "@/stores/notes";
|
|
import { renderMarkdown } from "@/utils/markdown";
|
|
import { relativeTime } from "@/composables/useRelativeTime";
|
|
import { apiPost, apiGet } from "@/api/client";
|
|
import type { Note } from "@/types/note";
|
|
import type { TaskStatus } from "@/types/task";
|
|
import StatusBadge from "@/components/StatusBadge.vue";
|
|
import PriorityBadge from "@/components/PriorityBadge.vue";
|
|
import TagPill from "@/components/TagPill.vue";
|
|
import TableOfContents from "@/components/TableOfContents.vue";
|
|
import ShareDialog from "@/components/ShareDialog.vue";
|
|
import { Clock, Pencil, Link as LinkIcon } from "lucide-vue-next";
|
|
|
|
const route = useRoute();
|
|
const router = useRouter();
|
|
const store = useTasksStore();
|
|
const notesStore = useNotesStore();
|
|
const backlinks = ref<{ type: string; id: number; title: string }[]>([]);
|
|
const converting = ref(false);
|
|
const showShare = ref(false);
|
|
|
|
// Context enrichment
|
|
const projectTitle = ref<string | null>(null);
|
|
const milestoneName = ref<string | null>(null);
|
|
const subTasks = ref<Note[]>([]);
|
|
|
|
const taskId = computed(() => Number(route.params.id));
|
|
|
|
const statusCycle: Record<TaskStatus, TaskStatus> = {
|
|
todo: "in_progress",
|
|
in_progress: "done",
|
|
done: "todo",
|
|
cancelled: "todo",
|
|
};
|
|
|
|
const statusDotClass: Record<TaskStatus, string> = {
|
|
todo: "dot-todo",
|
|
in_progress: "dot-in-progress",
|
|
done: "dot-done",
|
|
cancelled: "dot-cancelled",
|
|
};
|
|
|
|
function cycleSubTaskStatus(subTask: Note) {
|
|
if (!subTask.status) return;
|
|
const next = statusCycle[subTask.status as TaskStatus];
|
|
store.patchStatus(subTask.id, next).then(() => {
|
|
const idx = subTasks.value.findIndex((t) => t.id === subTask.id);
|
|
if (idx !== -1) subTasks.value[idx] = { ...subTasks.value[idx], status: next };
|
|
});
|
|
}
|
|
|
|
async function loadContext(task: Note) {
|
|
projectTitle.value = null;
|
|
milestoneName.value = null;
|
|
subTasks.value = [];
|
|
|
|
const promises: Promise<void>[] = [];
|
|
|
|
if (task.project_id) {
|
|
promises.push(
|
|
apiGet<any>(`/api/projects/${task.project_id}`).then((data) => {
|
|
projectTitle.value = data.title ?? null;
|
|
if (task.milestone_id && data.summary?.milestone_summary) {
|
|
const ms = (data.summary.milestone_summary as Array<{ id: number; title: string }>)
|
|
.find((m) => m.id === task.milestone_id);
|
|
if (ms) milestoneName.value = ms.title;
|
|
}
|
|
}).catch(() => {})
|
|
);
|
|
}
|
|
|
|
// Load sub-tasks via the notes endpoint with parent_id filter
|
|
promises.push(
|
|
apiGet<{ notes: Note[]; total: number }>(
|
|
`/api/notes?parent_id=${task.id}&type=task&sort=created_at&order=asc&limit=50`
|
|
).then((data) => {
|
|
subTasks.value = data.notes;
|
|
}).catch(() => {})
|
|
);
|
|
|
|
await Promise.all(promises);
|
|
}
|
|
|
|
async function loadTask(id: number) {
|
|
backlinks.value = [];
|
|
await store.fetchTask(id);
|
|
if (!store.currentTask) return;
|
|
|
|
const [bl] = await Promise.allSettled([
|
|
notesStore.fetchBacklinks(id),
|
|
loadContext(store.currentTask),
|
|
]);
|
|
if (bl.status === "fulfilled") backlinks.value = bl.value;
|
|
}
|
|
|
|
function handleKeydown(e: KeyboardEvent) {
|
|
if (e.key !== "Escape") return;
|
|
e.stopPropagation(); // prevent App.vue's global handler from also firing
|
|
const active = document.activeElement as HTMLElement | null;
|
|
if (active && active !== document.body) {
|
|
(active as HTMLElement).blur();
|
|
return;
|
|
}
|
|
if (store.currentTask?.project_id) {
|
|
router.push(`/projects/${store.currentTask.project_id}`);
|
|
} else {
|
|
router.push("/tasks");
|
|
}
|
|
}
|
|
|
|
onMounted(() => {
|
|
loadTask(taskId.value);
|
|
// Capture phase so this fires before App.vue's document-level handler
|
|
window.addEventListener("keydown", handleKeydown, true);
|
|
});
|
|
onUnmounted(() => window.removeEventListener("keydown", handleKeydown, true));
|
|
|
|
watch(() => route.params.id, (newId) => {
|
|
if (newId) loadTask(Number(newId));
|
|
});
|
|
|
|
const renderedBody = computed(() => {
|
|
if (!store.currentTask) return "";
|
|
return renderMarkdown(store.currentTask.body);
|
|
});
|
|
|
|
function cycleStatus() {
|
|
if (!store.currentTask) return;
|
|
store.patchStatus(
|
|
store.currentTask.id,
|
|
statusCycle[store.currentTask.status as TaskStatus]
|
|
);
|
|
}
|
|
|
|
const forwardStatus: Record<TaskStatus, TaskStatus | null> = {
|
|
todo: "in_progress",
|
|
in_progress: "done",
|
|
done: null,
|
|
cancelled: null,
|
|
};
|
|
|
|
function recurrenceSummary(rule: Record<string, unknown> | null): string | null {
|
|
if (!rule) return null;
|
|
if (rule.type === "interval") {
|
|
return `Every ${rule.every} ${rule.unit}(s)`;
|
|
}
|
|
if (rule.type === "calendar") {
|
|
if (rule.unit === "month") return `Monthly on day ${rule.day_of_month}`;
|
|
if (rule.unit === "year") {
|
|
const months = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];
|
|
const m = months[((rule.month as number) ?? 1) - 1];
|
|
return `Yearly on ${m} ${rule.day_of_month}`;
|
|
}
|
|
}
|
|
return null;
|
|
}
|
|
|
|
const advanceLabel = computed(() => {
|
|
const s = store.currentTask?.status as TaskStatus | undefined;
|
|
if (!s) return null;
|
|
const next = forwardStatus[s];
|
|
if (!next) return null;
|
|
return next === "in_progress" ? "→ In Progress" : "→ Done";
|
|
});
|
|
|
|
function advanceStatus() {
|
|
if (!store.currentTask) return;
|
|
const next = forwardStatus[store.currentTask.status as TaskStatus];
|
|
if (next) store.patchStatus(store.currentTask.id, next);
|
|
}
|
|
|
|
function isOverdue(): boolean {
|
|
if (!store.currentTask?.due_date || store.currentTask.status === "done")
|
|
return false;
|
|
const today = new Date().toISOString().slice(0, 10);
|
|
return store.currentTask.due_date < today;
|
|
}
|
|
|
|
async function convertToNote() {
|
|
if (converting.value) return;
|
|
converting.value = true;
|
|
try {
|
|
await notesStore.convertToNote(taskId.value);
|
|
const { useToastStore } = await import("@/stores/toast");
|
|
useToastStore().show("Converted to note");
|
|
router.push(`/notes/${taskId.value}`);
|
|
} catch {
|
|
const { useToastStore } = await import("@/stores/toast");
|
|
useToastStore().show("Failed to convert task", "error");
|
|
} finally {
|
|
converting.value = false;
|
|
}
|
|
}
|
|
|
|
async function onBodyClick(e: MouseEvent) {
|
|
const target = e.target as HTMLElement;
|
|
|
|
const tagLink = target.closest(".inline-tag") as HTMLAnchorElement | null;
|
|
if (tagLink) {
|
|
e.preventDefault();
|
|
const tag = tagLink.dataset.tag;
|
|
if (tag) {
|
|
router.push({ path: "/notes", query: { tag } });
|
|
}
|
|
return;
|
|
}
|
|
|
|
const wikilink = target.closest(".wikilink") as HTMLAnchorElement | null;
|
|
if (wikilink) {
|
|
e.preventDefault();
|
|
const title = wikilink.dataset.title;
|
|
if (title) {
|
|
try {
|
|
const note = await apiPost<Note>(
|
|
"/api/notes/resolve-title",
|
|
{ title }
|
|
);
|
|
router.push(`/notes/${note.id}`);
|
|
} catch {
|
|
const { useToastStore } = await import("@/stores/toast");
|
|
useToastStore().show(`Failed to resolve note "${title}"`, "error");
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
function onTagClick(tag: string) {
|
|
router.push({ path: "/tasks", query: { tag } });
|
|
}
|
|
|
|
// Sub-task progress
|
|
const subTaskProgress = computed(() => {
|
|
if (!subTasks.value.length) return null;
|
|
const done = subTasks.value.filter((t) => t.status === "done").length;
|
|
const total = subTasks.value.length;
|
|
return { done, total, pct: Math.round((done / total) * 100) };
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div class="viewer-layout">
|
|
<main class="viewer">
|
|
<div v-if="store.loading" class="viewer-skeleton" aria-label="Loading task">
|
|
<div class="skel-toolbar">
|
|
<div class="skel-btn"></div>
|
|
<div class="skel-btn skel-btn--wide"></div>
|
|
<div class="skel-btn"></div>
|
|
</div>
|
|
<div class="skel-title"></div>
|
|
<div class="skel-meta"></div>
|
|
<div class="skel-badges"></div>
|
|
<div class="skel-line"></div>
|
|
<div class="skel-line skel-line--short"></div>
|
|
<div class="skel-line"></div>
|
|
<div class="skel-line skel-line--medium"></div>
|
|
<div class="skel-line skel-line--short"></div>
|
|
</div>
|
|
<template v-else-if="store.currentTask">
|
|
<div class="toolbar">
|
|
<router-link
|
|
:to="store.currentTask.project_id ? `/projects/${store.currentTask.project_id}` : '/tasks'"
|
|
class="btn-back"
|
|
>{{ store.currentTask.project_id ? "← Project" : "← Tasks" }}</router-link>
|
|
<router-link
|
|
:to="`/tasks/${store.currentTask.id}/edit`"
|
|
class="btn-edit"
|
|
>
|
|
Edit
|
|
</router-link>
|
|
<button
|
|
v-if="advanceLabel"
|
|
class="btn-advance"
|
|
@click="advanceStatus"
|
|
>
|
|
{{ advanceLabel }}
|
|
</button>
|
|
<button
|
|
class="btn-convert"
|
|
@click="convertToNote"
|
|
:disabled="converting"
|
|
>
|
|
{{ converting ? "Converting..." : "Convert to Note" }}
|
|
</button>
|
|
<button class="btn-share" @click="showShare = true">Share</button>
|
|
</div>
|
|
|
|
<!-- Breadcrumb: parent task → project → milestone -->
|
|
<div
|
|
v-if="store.currentTask.parent_id || store.currentTask.project_id"
|
|
class="context-bar"
|
|
>
|
|
<router-link
|
|
v-if="store.currentTask.parent_id"
|
|
:to="`/tasks/${store.currentTask.parent_id}`"
|
|
class="ctx-crumb ctx-crumb-parent"
|
|
>
|
|
↑ {{ store.currentTask.parent_title || "Parent task" }}
|
|
</router-link>
|
|
<router-link
|
|
v-if="store.currentTask.project_id && projectTitle"
|
|
:to="`/projects/${store.currentTask.project_id}`"
|
|
class="ctx-crumb ctx-crumb-project"
|
|
>
|
|
{{ projectTitle }}
|
|
</router-link>
|
|
<span v-if="milestoneName" class="ctx-crumb ctx-crumb-milestone">
|
|
{{ milestoneName }}
|
|
</span>
|
|
</div>
|
|
|
|
<h1 class="task-title">{{ store.currentTask.title || "Untitled" }}</h1>
|
|
<p class="meta">
|
|
<span class="meta-item">
|
|
<Clock :size="16" />
|
|
Updated {{ relativeTime(store.currentTask.updated_at) }}
|
|
</span>
|
|
<span class="meta-sep" aria-hidden="true">·</span>
|
|
<span class="meta-item">
|
|
<Pencil :size="16" />
|
|
Created {{ relativeTime(store.currentTask.created_at) }}
|
|
</span>
|
|
</p>
|
|
<div class="badges">
|
|
<StatusBadge
|
|
:status="store.currentTask.status!"
|
|
clickable
|
|
@click="cycleStatus"
|
|
/>
|
|
<PriorityBadge :priority="store.currentTask.priority!" />
|
|
<span
|
|
v-if="store.currentTask.due_date"
|
|
:class="['due-date', { overdue: isOverdue() }]"
|
|
>
|
|
Due: {{ store.currentTask.due_date }}
|
|
</span>
|
|
</div>
|
|
<div class="task-meta-row" v-if="store.currentTask.started_at || store.currentTask.completed_at || store.currentTask.recurrence_rule">
|
|
<span v-if="store.currentTask.started_at" class="task-meta-item">
|
|
Started: {{ new Date(store.currentTask.started_at).toLocaleString() }}
|
|
</span>
|
|
<span v-if="store.currentTask.completed_at" class="task-meta-item">
|
|
Completed: {{ new Date(store.currentTask.completed_at).toLocaleString() }}
|
|
</span>
|
|
<span v-if="recurrenceSummary(store.currentTask.recurrence_rule as Record<string, unknown> | null)" class="task-meta-item task-meta-recurrence">
|
|
↻ {{ recurrenceSummary(store.currentTask.recurrence_rule as Record<string, unknown> | null) }}
|
|
</span>
|
|
</div>
|
|
<div class="tags" v-if="store.currentTask.tags.length">
|
|
<TagPill
|
|
v-for="tag in store.currentTask.tags"
|
|
:key="tag"
|
|
:tag="tag"
|
|
@click="onTagClick"
|
|
/>
|
|
</div>
|
|
<div
|
|
v-if="store.currentTask.description"
|
|
class="task-goal-display"
|
|
>
|
|
<h3 class="goal-label">Goal</h3>
|
|
<p class="goal-text">{{ store.currentTask.description }}</p>
|
|
</div>
|
|
|
|
<div
|
|
v-if="store.currentTask.consolidated_at"
|
|
class="auto-summary-banner"
|
|
>
|
|
<span class="auto-summary-icon" aria-hidden="true">✦</span>
|
|
Auto-summarized from work logs.
|
|
</div>
|
|
|
|
<div
|
|
class="body prose"
|
|
v-html="renderedBody"
|
|
@click="onBodyClick"
|
|
></div>
|
|
|
|
<!-- Sub-tasks -->
|
|
<div v-if="subTasks.length" class="subtasks">
|
|
<div class="subtasks-header">
|
|
<h2 class="subtasks-title">Sub-tasks</h2>
|
|
<span v-if="subTaskProgress" class="subtasks-progress">
|
|
{{ subTaskProgress.done }}/{{ subTaskProgress.total }}
|
|
<span class="subtasks-pct">({{ subTaskProgress.pct }}%)</span>
|
|
</span>
|
|
</div>
|
|
<div v-if="subTaskProgress" class="subtasks-track">
|
|
<div class="subtasks-fill" :style="{ width: subTaskProgress.pct + '%' }"></div>
|
|
</div>
|
|
<ul class="subtasks-list">
|
|
<li
|
|
v-for="sub in subTasks"
|
|
:key="sub.id"
|
|
class="subtask-row"
|
|
>
|
|
<button
|
|
:class="['sub-dot', statusDotClass[sub.status as TaskStatus] ?? 'dot-todo']"
|
|
:title="`${sub.status} — click to advance`"
|
|
@click="cycleSubTaskStatus(sub)"
|
|
></button>
|
|
<router-link :to="`/tasks/${sub.id}/edit`" class="sub-title" :class="{ 'sub-done': sub.status === 'done' }">
|
|
{{ sub.title || "Untitled" }}
|
|
</router-link>
|
|
<span v-if="sub.due_date" class="sub-due">{{ sub.due_date }}</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div v-if="backlinks.length" class="backlinks">
|
|
<h3 class="backlinks-heading">
|
|
<LinkIcon :size="16" />
|
|
Backlinks
|
|
<span class="backlinks-count">{{ backlinks.length }}</span>
|
|
</h3>
|
|
<div class="backlinks-grid">
|
|
<router-link
|
|
v-for="link in backlinks"
|
|
:key="`${link.type}-${link.id}`"
|
|
:to="`/${link.type === 'note' ? 'notes' : 'tasks'}/${link.id}`"
|
|
class="backlink-card"
|
|
>
|
|
<span :class="['backlink-type-badge', `badge-${link.type}`]">{{ link.type }}</span>
|
|
<span class="backlink-title">{{ link.title || "Untitled" }}</span>
|
|
</router-link>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<p v-else>Task not found.</p>
|
|
</main>
|
|
<TableOfContents
|
|
v-if="store.currentTask?.body"
|
|
:body="store.currentTask.body"
|
|
class="toc-sidebar"
|
|
/>
|
|
</div>
|
|
|
|
<ShareDialog
|
|
v-if="showShare && store.currentTask"
|
|
resource-type="note"
|
|
:resource-id="store.currentTask.id"
|
|
:resource-title="store.currentTask.title || '(untitled)'"
|
|
@close="showShare = false"
|
|
/>
|
|
</template>
|
|
|
|
<style src="@/assets/viewer-shared.css" />
|
|
<style scoped>
|
|
.viewer-layout {
|
|
display: flex;
|
|
max-width: 1400px;
|
|
margin: 0 auto;
|
|
gap: 2rem;
|
|
}
|
|
.viewer {
|
|
flex: 1;
|
|
min-width: 0;
|
|
max-width: 1100px;
|
|
margin: 2rem 0;
|
|
padding: 0 1rem;
|
|
}
|
|
.toc-sidebar {
|
|
margin-top: 2rem;
|
|
}
|
|
@media (max-width: 1200px) {
|
|
.toc-sidebar {
|
|
display: none;
|
|
}
|
|
}
|
|
.toolbar {
|
|
display: flex;
|
|
gap: 0.75rem;
|
|
margin-bottom: 0.75rem;
|
|
}
|
|
.btn-back {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
padding: 0.45rem 1rem;
|
|
border: 1px solid var(--color-border);
|
|
border-radius: var(--radius-sm);
|
|
background: none;
|
|
color: var(--color-text-secondary);
|
|
text-decoration: none;
|
|
cursor: pointer;
|
|
font-size: 0.9rem;
|
|
}
|
|
.btn-back:hover {
|
|
border-color: var(--color-primary);
|
|
color: var(--color-primary);
|
|
}
|
|
/* Edit + Advance: Moss action-primary — both are "operating the software"
|
|
workflow actions, not brand moments. */
|
|
.btn-edit,
|
|
.btn-advance {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
padding: 0.45rem 1.1rem;
|
|
border: none;
|
|
border-radius: var(--radius-sm);
|
|
background: var(--color-action-primary);
|
|
color: #fff;
|
|
text-decoration: none;
|
|
cursor: pointer;
|
|
font-size: 0.875rem;
|
|
font-weight: 500;
|
|
transition: background 0.15s;
|
|
}
|
|
.btn-edit:hover,
|
|
.btn-advance:hover {
|
|
background: var(--color-action-primary-hover);
|
|
color: #fff;
|
|
}
|
|
/* Convert + Share: Bronze action-secondary — alternate paths */
|
|
.btn-convert {
|
|
margin-left: auto;
|
|
padding: 0.3rem 0.75rem;
|
|
background: var(--color-action-secondary);
|
|
color: #fff;
|
|
border: none;
|
|
border-radius: var(--radius-sm);
|
|
cursor: pointer;
|
|
font-size: 0.85rem;
|
|
transition: background 0.15s;
|
|
}
|
|
.btn-convert:hover { background: var(--color-action-secondary-hover); }
|
|
.btn-convert:disabled {
|
|
opacity: 0.6;
|
|
cursor: default;
|
|
}
|
|
|
|
.btn-share {
|
|
padding: 0.3rem 0.75rem;
|
|
background: var(--color-action-secondary);
|
|
border: none;
|
|
border-radius: var(--radius-sm);
|
|
color: #fff;
|
|
cursor: pointer;
|
|
font-size: 0.85rem;
|
|
font-family: inherit;
|
|
transition: background 0.15s;
|
|
}
|
|
.btn-share:hover { background: var(--color-action-secondary-hover); }
|
|
|
|
.task-title {
|
|
font-family: "Fraunces", Georgia, serif;
|
|
font-size: 2rem;
|
|
font-weight: 500;
|
|
line-height: 1.2;
|
|
margin: 0.25rem 0 0.5rem;
|
|
color: var(--color-text);
|
|
}
|
|
|
|
.meta {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
flex-wrap: wrap;
|
|
font-size: 0.83rem;
|
|
color: var(--color-text-muted);
|
|
margin: 0 0 0.75rem;
|
|
}
|
|
.meta-item {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.3rem;
|
|
}
|
|
.meta-sep {
|
|
opacity: 0.5;
|
|
}
|
|
.badges {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
margin-bottom: 0.75rem;
|
|
}
|
|
.due-date {
|
|
font-size: 0.85rem;
|
|
color: var(--color-text-secondary);
|
|
}
|
|
.due-date.overdue {
|
|
color: var(--color-overdue);
|
|
font-weight: 500;
|
|
}
|
|
.task-meta-row {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.75rem;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
.task-meta-item {
|
|
font-size: 0.78rem;
|
|
color: var(--color-text-muted);
|
|
}
|
|
.task-meta-recurrence {
|
|
color: var(--color-primary);
|
|
font-weight: 500;
|
|
}
|
|
.tags {
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
margin-bottom: 1rem;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
/* Sub-tasks */
|
|
.subtasks {
|
|
margin-top: 2rem;
|
|
border-top: 1px solid var(--color-border);
|
|
padding-top: 1rem;
|
|
}
|
|
.subtasks-header {
|
|
display: flex;
|
|
align-items: baseline;
|
|
gap: 0.6rem;
|
|
margin-bottom: 0.4rem;
|
|
}
|
|
.subtasks-title {
|
|
font-size: 1rem;
|
|
margin: 0;
|
|
font-weight: 500;
|
|
}
|
|
.subtasks-progress {
|
|
font-size: 0.8rem;
|
|
color: var(--color-text-muted);
|
|
}
|
|
.subtasks-pct {
|
|
color: var(--color-text-muted);
|
|
}
|
|
.subtasks-track {
|
|
height: 4px;
|
|
background: var(--color-bg-secondary);
|
|
border-radius: 2px;
|
|
margin-bottom: 0.75rem;
|
|
overflow: hidden;
|
|
}
|
|
.subtasks-fill {
|
|
height: 100%;
|
|
background: var(--color-status-done, #22c55e);
|
|
border-radius: 2px;
|
|
transition: width 0.3s ease;
|
|
}
|
|
.subtasks-list {
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.2rem;
|
|
}
|
|
.subtask-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
padding: 0.3rem 0.5rem;
|
|
border-radius: var(--radius-sm);
|
|
}
|
|
.subtask-row:hover {
|
|
background: var(--color-bg-secondary);
|
|
}
|
|
.sub-dot {
|
|
flex-shrink: 0;
|
|
width: 12px;
|
|
height: 12px;
|
|
border-radius: 50%;
|
|
border: none;
|
|
cursor: pointer;
|
|
padding: 0;
|
|
transition: transform 0.1s, opacity 0.1s;
|
|
}
|
|
.sub-dot:hover {
|
|
transform: scale(1.25);
|
|
opacity: 0.8;
|
|
}
|
|
.dot-todo {
|
|
background: transparent;
|
|
border: 2px solid var(--color-text-muted);
|
|
}
|
|
.dot-in-progress {
|
|
background: var(--color-status-in-progress, #3b82f6);
|
|
}
|
|
.dot-done {
|
|
background: var(--color-status-done, #22c55e);
|
|
}
|
|
.dot-cancelled {
|
|
background: var(--color-text-muted, #6b7280);
|
|
}
|
|
.sub-title {
|
|
flex: 1;
|
|
font-size: 0.9rem;
|
|
color: var(--color-text);
|
|
text-decoration: none;
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
.sub-title:hover {
|
|
color: var(--color-primary);
|
|
}
|
|
.sub-title.sub-done {
|
|
color: var(--color-text-muted);
|
|
text-decoration: line-through;
|
|
}
|
|
.sub-due {
|
|
font-size: 0.75rem;
|
|
color: var(--color-text-muted);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.backlinks {
|
|
margin-top: 2.5rem;
|
|
border-top: 1px solid var(--color-border);
|
|
padding-top: 1.25rem;
|
|
}
|
|
.backlinks-heading {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.4rem;
|
|
font-size: 0.78rem;
|
|
font-weight: 500;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.06em;
|
|
color: var(--color-text-muted);
|
|
margin: 0 0 0.75rem;
|
|
}
|
|
.backlinks-count {
|
|
margin-left: 0.2rem;
|
|
font-size: 0.72rem;
|
|
background: var(--color-bg-secondary);
|
|
border: 1px solid var(--color-border);
|
|
border-radius: 999px;
|
|
padding: 0 0.4rem;
|
|
line-height: 1.4;
|
|
}
|
|
.backlinks-grid {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.4rem;
|
|
}
|
|
.backlink-card {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.6rem;
|
|
padding: 0.5rem 0.75rem;
|
|
border-radius: var(--radius-md);
|
|
background: var(--color-bg-card);
|
|
border: 1px solid var(--color-border);
|
|
text-decoration: none;
|
|
color: var(--color-text);
|
|
transition: border-color 0.15s, box-shadow 0.15s;
|
|
font-size: 0.9rem;
|
|
}
|
|
.backlink-card:hover {
|
|
border-color: color-mix(in srgb, var(--color-primary) 50%, transparent);
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
|
|
color: var(--color-primary);
|
|
}
|
|
.backlink-type-badge {
|
|
font-size: 0.68rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.04em;
|
|
font-weight: 500;
|
|
padding: 0.1rem 0.45rem;
|
|
border-radius: 999px;
|
|
flex-shrink: 0;
|
|
}
|
|
.badge-note {
|
|
background: color-mix(in srgb, var(--color-primary) 12%, transparent);
|
|
color: var(--color-primary);
|
|
border: 1px solid color-mix(in srgb, var(--color-primary) 25%, transparent);
|
|
}
|
|
.badge-task {
|
|
background: color-mix(in srgb, #f59e0b 12%, transparent);
|
|
color: #d97706;
|
|
border: 1px solid color-mix(in srgb, #f59e0b 30%, transparent);
|
|
}
|
|
.backlink-title {
|
|
flex: 1;
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* ── Skeleton loader ── */
|
|
@keyframes skel-shine {
|
|
to { background-position: 200% center; }
|
|
}
|
|
.viewer-skeleton {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.65rem;
|
|
padding-top: 0.5rem;
|
|
}
|
|
.skel-btn,
|
|
.skel-title,
|
|
.skel-meta,
|
|
.skel-badges,
|
|
.skel-line {
|
|
border-radius: var(--radius-sm);
|
|
background: linear-gradient(
|
|
90deg,
|
|
var(--color-bg-secondary) 25%,
|
|
color-mix(in srgb, var(--color-text-muted) 18%, var(--color-bg-secondary)) 50%,
|
|
var(--color-bg-secondary) 75%
|
|
);
|
|
background-size: 200% 100%;
|
|
animation: skel-shine 1.5s ease infinite;
|
|
}
|
|
.skel-toolbar {
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
margin-bottom: 0.25rem;
|
|
}
|
|
.skel-btn { width: 70px; height: 32px; }
|
|
.skel-btn--wide { width: 90px; }
|
|
.skel-title { height: 2.2rem; width: 65%; border-radius: var(--radius-md); }
|
|
.skel-meta { height: 0.85rem; width: 45%; }
|
|
.skel-badges { height: 1.6rem; width: 30%; border-radius: 999px; }
|
|
.skel-line { height: 0.9rem; }
|
|
.skel-line--short { width: 50%; }
|
|
.skel-line--medium { width: 78%; }
|
|
|
|
/* ── Goal block + auto-summary banner ─────────────────────────────────────── */
|
|
.task-goal-display {
|
|
border-left: 2px solid var(--color-border, rgba(255, 255, 255, 0.12));
|
|
padding: 0.4rem 0 0.4rem 0.9rem;
|
|
margin: 0.75rem 0 1.25rem;
|
|
background: rgba(255, 255, 255, 0.02);
|
|
}
|
|
.goal-label {
|
|
font-family: var(--font-display, "Fraunces", serif);
|
|
font-style: italic;
|
|
font-size: 0.78rem;
|
|
font-weight: 500;
|
|
letter-spacing: 0.04em;
|
|
text-transform: uppercase;
|
|
color: var(--color-text-muted, rgba(255, 255, 255, 0.5));
|
|
margin: 0 0 0.25rem;
|
|
}
|
|
.goal-text {
|
|
margin: 0;
|
|
font-size: 0.95rem;
|
|
line-height: 1.45;
|
|
color: var(--color-text, inherit);
|
|
white-space: pre-wrap;
|
|
}
|
|
.auto-summary-banner {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
font-size: 0.78rem;
|
|
font-style: italic;
|
|
color: var(--color-text-muted, rgba(255, 255, 255, 0.55));
|
|
margin: 0 0 0.75rem;
|
|
}
|
|
.auto-summary-icon {
|
|
color: var(--color-primary, #6366f1);
|
|
font-size: 0.85rem;
|
|
}
|
|
</style>
|