FabledGrimoire/frontend/src/views/NoteViewerView.vue

<script setup lang="ts">
import { onMounted, computed, ref, watch } from "vue";
import { useRoute, useRouter } from "vue-router";
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 TagPill from "@/components/TagPill.vue";
import TableOfContents from "@/components/TableOfContents.vue";

const route = useRoute();
const router = useRouter();
const store = useNotesStore();
const backlinks = ref<{ type: string; id: number; title: string }[]>([]);
const converting = ref(false);

// Context enrichment
const projectTitle = ref<string | null>(null);
const milestoneName = ref<string | null>(null);
const parentNoteTitle = ref<string | null>(null);

const noteId = computed(() => Number(route.params.id));

async function loadContext(note: Note) {
  projectTitle.value = null;
  milestoneName.value = null;
  parentNoteTitle.value = null;

  const promises: Promise<void>[] = [];

  if (note.project_id) {
    promises.push(
      apiGet<any>(`/api/projects/${note.project_id}`).then((data) => {
        projectTitle.value = data.title ?? null;
        if (note.milestone_id && data.summary?.milestone_summary) {
          const ms = (data.summary.milestone_summary as Array<{ id: number; title: string }>)
            .find((m) => m.id === note.milestone_id);
          if (ms) milestoneName.value = ms.title;
        }
      }).catch(() => {})
    );
  }

  if (note.parent_id) {
    promises.push(
      apiGet<Note>(`/api/notes/${note.parent_id}`).then((parent) => {
        parentNoteTitle.value = parent.title || "Untitled";
      }).catch(() => {})
    );
  }

  await Promise.all(promises);
}

async function loadNote(id: number) {
  backlinks.value = [];
  await store.fetchNote(id);

  // If note is empty (no body), redirect to editor
  if (store.currentNote && !store.currentNote.body.trim()) {
    router.replace(`/notes/${id}/edit`);
    return;
  }

  const [bl] = await Promise.allSettled([
    store.fetchBacklinks(id),
    loadContext(store.currentNote!),
  ]);
  if (bl.status === "fulfilled") backlinks.value = bl.value;
}

onMounted(() => loadNote(noteId.value));

// Re-fetch when navigating between notes (Vue reuses the component)
watch(() => route.params.id, (newId) => {
  if (newId) loadNote(Number(newId));
});

const renderedBody = computed(() => {
  if (!store.currentNote) return "";
  return renderMarkdown(store.currentNote.body);
});

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: "/notes", query: { tag } });
}

async function convertToTask() {
  if (converting.value) return;
  converting.value = true;
  try {
    await store.convertToTask(noteId.value);
    const { useToastStore } = await import("@/stores/toast");
    useToastStore().show("Converted to task");
    router.push(`/tasks/${noteId.value}`);
  } catch {
    const { useToastStore } = await import("@/stores/toast");
    useToastStore().show("Failed to convert note", "error");
  } finally {
    converting.value = false;
  }
}
</script>

<template>
  <div class="viewer-layout">
    <main class="viewer">
      <p v-if="store.loading">Loading...</p>
      <template v-else-if="store.currentNote">
        <div class="toolbar">
          <router-link to="/notes" class="btn-back">← Notes</router-link>
          <router-link
            :to="`/notes/${store.currentNote.id}/edit`"
            class="btn-edit"
          >
            Edit
          </router-link>
          <button
            v-if="!store.currentNote.is_task"
            class="btn-convert"
            @click="convertToTask"
            :disabled="converting"
          >
            {{ converting ? "Converting..." : "Convert to Task" }}
          </button>
        </div>

        <!-- Breadcrumb: parent → project → milestone -->
        <div
          v-if="store.currentNote.parent_id || store.currentNote.project_id"
          class="context-bar"
        >
          <router-link
            v-if="store.currentNote.parent_id"
            :to="`/notes/${store.currentNote.parent_id}`"
            class="ctx-crumb ctx-crumb-parent"
          >
            ↑ {{ parentNoteTitle || "Parent note" }}
          </router-link>
          <router-link
            v-if="store.currentNote.project_id && projectTitle"
            :to="`/projects/${store.currentNote.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>{{ store.currentNote.title || "Untitled" }}</h1>
        <p class="meta">
          Updated {{ relativeTime(store.currentNote.updated_at) }}
          &middot;
          Created {{ relativeTime(store.currentNote.created_at) }}
        </p>
        <div class="tags" v-if="store.currentNote.tags.length">
          <TagPill
            v-for="tag in store.currentNote.tags"
            :key="tag"
            :tag="tag"
            @click="onTagClick"
          />
        </div>
        <div
          class="body prose"
          v-html="renderedBody"
          @click="onBodyClick"
        ></div>

        <div v-if="backlinks.length" class="backlinks">
          <h2>Backlinks</h2>
          <ul class="backlinks-list">
            <li v-for="link in backlinks" :key="`${link.type}-${link.id}`" class="backlink-item">
              <span class="backlink-type">{{ link.type }}</span>
              <router-link
                :to="`/${link.type === 'note' ? 'notes' : 'tasks'}/${link.id}`"
                class="backlink-link"
              >
                {{ link.title || "Untitled" }}
              </router-link>
            </li>
          </ul>
        </div>
      </template>
      <p v-else>Note not found.</p>
    </main>
    <TableOfContents
      v-if="store.currentNote?.body"
      :body="store.currentNote.body"
      class="toc-sidebar"
    />
  </div>
</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,
.btn-edit {
  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,
.btn-edit:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}
.btn-convert {
  margin-left: auto;
  padding: 0.3rem 0.75rem;
  background: var(--color-bg-secondary);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 0.85rem;
}
.btn-convert:hover {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
}
.btn-convert:disabled {
  opacity: 0.6;
  cursor: default;
}

.meta {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  margin: 0 0 0.75rem;
}
.tags {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}
.backlinks {
  margin-top: 2rem;
  border-top: 1px solid var(--color-border);
  padding-top: 1rem;
}
.backlinks h2 {
  font-size: 1.1rem;
  margin: 0 0 0.75rem;
}
.backlinks-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.backlink-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.backlink-link {
  color: var(--color-text);
  text-decoration: none;
  font-size: 0.95rem;
}
.backlink-link:hover {
  color: var(--color-primary);
}
.backlink-type {
  font-size: 0.75rem;
  text-transform: uppercase;
  color: var(--color-text-muted);
  background: var(--color-bg-secondary);
  padding: 0.1rem 0.4rem;
  border-radius: var(--radius-sm);
}
</style>