FabledScribe/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 } 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 bodyEl = ref<HTMLElement | null>(null);
const backlinks = ref<{ type: string; id: number; title: string }[]>([]);
const converting = ref(false);

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

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;
  }

  try {
    backlinks.value = await store.fetchBacklinks(id);
  } catch {
    backlinks.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">Back</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>
        <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
          ref="bodyEl"
          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 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: 1rem;
}
.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>