FabledScribe/frontend/src/views/LessonDetailView.vue

<script setup lang="ts">
/**
 * Read a LESSON, and see both ends of what it came from.
 *
 * THE TRIGGER LEADS. A lesson is retrieved by the situation it applies to, so
 * the page opens with that situation rather than with the claim — the same
 * ordering the editor uses, and for the same reason: the trigger is the half
 * a reader needs first to decide whether this is for them.
 *
 * GLOBAL BY DEFAULT HAS TO BE LEGIBLE. A lesson written on one project will
 * surface on another, which reads as a bug unless the page says why. The
 * origin line does exactly that, and says it as a property of the kind rather
 * than as an apology.
 *
 * IT BINDS NOBODY, and the page says so once, plainly. That sentence is the
 * difference between this kind and a rule, and it is the reason the kind
 * exists (#3727) — sessions were proposing rules for things that should never
 * have bound anyone.
 */
import { computed, onMounted, ref, watch } from "vue";
import { useRoute, useRouter } from "vue-router";

import { apiErrorMessage } from "@/api/client";
import { deleteLesson, getLesson, type Lesson } from "@/api/lessons";
import ConfirmDialog from "@/components/ConfirmDialog.vue";
import TagPill from "@/components/TagPill.vue";
import { useToastStore } from "@/stores/toast";
import { renderMarkdown } from "@/utils/markdown";

const route = useRoute();
const router = useRouter();
const toast = useToastStore();

const lesson = ref<Lesson | null>(null);
const loading = ref(true);
const error = ref<string | null>(null);
const confirming = ref(false);

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

/** The insight rendered — the body minus the lines the service composed, so
 *  the trigger is not printed twice on a page that already leads with it. */
const insightHtml = computed(() =>
  lesson.value?.insight ? renderMarkdown(lesson.value.insight) : "",
);

/** Where each source opens. A task and a note live at different routes, and a
 *  link that guesses wrong is worse than one that is plain. */
function sourceHref(rec: { id: number; is_task?: boolean; note_type?: string }) {
  if (rec.is_task) return `/tasks/${rec.id}`;
  if (rec.note_type === "snippet") return `/snippets/${rec.id}`;
  if (rec.note_type === "lesson") return `/lessons/${rec.id}`;
  return `/notes/${rec.id}`;
}

async function load() {
  loading.value = true;
  error.value = null;
  try {
    lesson.value = await getLesson(lessonId.value);
  } catch (e) {
    error.value = apiErrorMessage(e, "Failed to load this lesson");
  } finally {
    loading.value = false;
  }
}

async function remove() {
  confirming.value = false;
  try {
    await deleteLesson(lessonId.value);
    toast.show("Lesson moved to trash");
    router.push("/knowledge?type=lesson");
  } catch (e) {
    toast.show(apiErrorMessage(e, "Failed to delete this lesson"), "error");
  }
}

watch(lessonId, load);
onMounted(load);
</script>

<template>
  <div class="lesson-detail">
    <p v-if="loading" class="ld-muted">Loading…</p>
    <p v-else-if="error" class="ld-error" role="alert">{{ error }}</p>

    <article v-else-if="lesson">
      <header class="ld-head">
        <span class="ld-kind">Lesson</span>
        <!-- Said once, plainly. It is the whole difference from a rule. -->
        <span class="ld-binds">binds nobody</span>
      </header>

      <!-- The trigger leads, in its own block: it is what a reader needs first
           to decide whether this applies to them. -->
      <section class="ld-trigger">
        <h2 class="ld-trigger-label">When this applies</h2>
        <p class="ld-trigger-text">{{ lesson.when_to_apply }}</p>
      </section>

      <h1 class="ld-what">{{ lesson.what }}</h1>

      <div
        v-if="insightHtml"
        class="ld-insight markdown-body"
        v-html="insightHtml"
      />
      <p v-else class="ld-muted ld-empty">
        No detail was recorded — the claim above is the whole lesson.
      </p>

      <!-- What taught it. The provenance is the point: a lesson that loses its
           incidents loses its evidence. -->
      <section
        v-if="lesson.learned_from_records?.length"
        class="ld-panel"
      >
        <h2 class="ld-panel-label">Learned from</h2>
        <ul class="ld-sources">
          <li v-for="rec in lesson.learned_from_records" :key="rec.id">
            <router-link :to="sourceHref(rec)" class="ld-link">
              {{ rec.title }}
            </router-link>
            <span v-if="rec.status" class="ld-source-status">{{ rec.status }}</span>
          </li>
        </ul>
      </section>

      <section v-if="lesson.tags?.length" class="ld-tags">
        <TagPill v-for="t in lesson.tags" :key="t" :tag="t" />
      </section>

      <!-- Global-by-default, stated as a property rather than an apology. A
           lesson meeting you on a project it was not written on is the kind
           working, and the page has to say so or it reads as a bug. -->
      <footer class="ld-origin">
        <p v-if="lesson.project_id">
          Learned on another project, and offered everywhere — a lesson is
          retrieved by the situation it names, never by where it was written.
        </p>
        <p v-else>
          Not tied to a project. Offered wherever the situation it names comes
          up.
        </p>
      </footer>

      <div class="ld-actions">
        <router-link :to="`/lessons/${lesson.id}/edit`" class="ld-primary">
          Edit
        </router-link>
        <button type="button" class="ld-ghost" @click="confirming = true">
          Delete
        </button>
      </div>
    </article>

    <ConfirmDialog
      v-if="confirming"
      title="Delete this lesson?"
      message="It moves to the trash and can be restored."
      @confirm="remove"
      @cancel="confirming = false"
    />
  </div>
</template>

<style scoped>
.lesson-detail {
  max-width: 780px;
  margin: 0 auto;
  padding: var(--fs-layout-page-pad);
  color: var(--fs-text-primary);
}

.ld-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
}
/* Neutral, matching the browse badge. A hue here would make the softest
   record in the corpus look like the loudest. */
.ld-kind {
  padding: 0.15rem 0.5rem;
  border-radius: 10px;
  background: var(--fs-surface-raised);
  color: var(--fs-text-secondary);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 500;
}
.ld-binds { color: var(--fs-text-tertiary); font-size: 0.8rem; }

.ld-trigger {
  padding: 0.9rem 1rem;
  border-left: 2px solid var(--fs-accent);
  border-radius: var(--fs-radius-sm);
  background: var(--fs-surface-raised);
  margin-bottom: 1rem;
}
.ld-trigger-label {
  margin: 0 0 0.3rem;
  font-size: 0.72rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--fs-text-tertiary);
}
.ld-trigger-text { margin: 0; font-size: 0.98rem; line-height: 1.5; }

.ld-what {
  margin: 0 0 1.25rem;
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.35;
}

.ld-insight { line-height: 1.6; font-size: 0.93rem; }
.ld-empty { font-style: italic; }

.ld-panel {
  margin-top: 1.75rem;
  padding-top: 1rem;
  border-top: 1px solid var(--fs-border-color);
}
.ld-panel-label {
  margin: 0 0 0.5rem;
  font-size: 0.72rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--fs-text-tertiary);
}
.ld-sources { margin: 0; padding-left: 1.1rem; }
.ld-sources li { margin-bottom: 0.3rem; font-size: 0.9rem; }
.ld-link { color: var(--fs-accent); }
.ld-source-status {
  margin-left: 0.4rem;
  color: var(--fs-text-tertiary);
  font-size: 0.78rem;
}

.ld-tags { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 1.25rem; }

.ld-origin {
  margin-top: 1.5rem;
  color: var(--fs-text-secondary);
  font-size: 0.82rem;
  line-height: 1.5;
}
.ld-origin p { margin: 0; }

.ld-actions {
  display: flex;
  gap: 0.6rem;
  margin-top: 1.75rem;
  padding-top: 1rem;
  border-top: 1px solid var(--fs-border-color);
}
.ld-primary {
  padding: 0.45rem 1rem;
  border-radius: var(--fs-radius-sm);
  background: var(--fs-accent);
  color: var(--fs-accent-fg);
  font-size: 0.88rem;
}
.ld-ghost {
  padding: 0.45rem 1rem;
  border: 1px solid var(--fs-border-color);
  border-radius: var(--fs-radius-sm);
  background: transparent;
  color: var(--fs-text-primary);
  font: inherit;
  font-size: 0.88rem;
  cursor: pointer;
}

.ld-muted { color: var(--fs-text-secondary); font-size: 0.88rem; }
.ld-error {
  padding: 0.6rem 0.8rem;
  border-radius: var(--fs-radius-sm);
  background: color-mix(in srgb, var(--fs-error) 12%, var(--fs-surface-raised));
  color: color-mix(in srgb, var(--fs-error) 55%, var(--fs-text-primary));
  font-size: 0.88rem;
}
</style>