FabledScribe/frontend/src/components/InceptionCard.vue

<script setup lang="ts">
/**
 * The inception form (milestone 297): "what does this project inherit?"
 *
 * Two homes, one component. mode="create" rides the New-project modal's
 * second step and only emits the choices (the project does not exist yet);
 * mode="decide" sits on ProjectView for an undecided project, loads that
 * project's current defaults, and records the decision itself.
 *
 * Platforms (milestone 463) start UNANSWERED (null). Ticking any box makes
 * the list the whole answer; in decide mode the boxes start from what
 * detection already found, so recording confirms it.
 */
import { computed, onMounted, ref, watch } from "vue";
import { apiErrorMessage } from "@/api/client";
import { fetchDesignSystems } from "@/api/designSystems";
import { MEMBER_STATES } from "@/api/platforms";
import { usePlatformsStore } from "@/stores/platforms";
import {
  decideInception, emptyChoices, fetchInceptionDefaults,
  type InceptionChoices, type InceptionDecision, type InceptionDefaults,
} from "@/api/inception";

const props = withDefaults(defineProps<{
  mode: "create" | "decide";
  projectId?: number;
  choices?: InceptionChoices;
}>(), { projectId: 0, choices: undefined });

const emit = defineEmits<{
  "update:choices": [value: InceptionChoices];
  decided: [decision: InceptionDecision];
}>();

const local = ref<InceptionChoices>(props.choices ? { ...props.choices } : emptyChoices());
const designSystems = ref<{ id: number; title: string }[]>([]);
const systemsCount = ref(0);
const platforms = ref<{ slug: string; name: string }[]>([]);
const detected = ref<Set<string>>(new Set());
const platformsStore = usePlatformsStore();
const loading = ref(true);
const saving = ref(false);
const error = ref("");

function emitChoices() {
  emit("update:choices", { ...local.value });
}
watch(local, emitChoices, { deep: true });

async function load() {
  loading.value = true;
  error.value = "";
  try {
    if (props.mode === "decide" && props.projectId) {
      const d: InceptionDefaults = await fetchInceptionDefaults(props.projectId);
      designSystems.value = d.design_systems;
      systemsCount.value = d.systems;
      platforms.value = d.platforms;
      const members = d.project_platforms
        .filter((p) => MEMBER_STATES.includes(p.state))
        .map((p) => p.slug);
      detected.value = new Set(
        d.project_platforms.filter((p) => p.state === "detected").map((p) => p.slug),
      );
      // Start from what stands today, so "record" without changes keeps it.
      local.value = {
        design_system_id: d.design_system_id,
        seed_systems: false,
        platforms: members.length ? members : null,
      };
    } else {
      const [ds, catalog] = await Promise.all([
        fetchDesignSystems(), platformsStore.fetchCatalog(),
      ]);
      designSystems.value = ds.design_systems.map((d) => ({ id: d.id, title: d.title }));
      platforms.value = catalog.map((p) => ({ slug: p.slug, name: p.name }));
    }
  } catch (e: unknown) {
    error.value = apiErrorMessage(e, "Could not load what this project could inherit");
  } finally {
    loading.value = false;
  }
}

const nothingToDecide = computed(() => !designSystems.value.length);

function isChecked(slug: string): boolean {
  return (local.value.platforms ?? []).includes(slug);
}

function togglePlatform(slug: string, on: boolean) {
  const current = new Set(local.value.platforms ?? []);
  if (on) current.add(slug);
  else current.delete(slug);
  local.value.platforms = [...current].sort();
}

/** Back to "not answered" — distinct from an empty list, which says "none". */
function clearPlatforms() {
  local.value.platforms = null;
}

async function record() {
  if (!props.projectId) return;
  saving.value = true;
  error.value = "";
  try {
    const decision = await decideInception(props.projectId, local.value);
    emit("decided", decision);
  } catch (e: unknown) {
    error.value = apiErrorMessage(e, "Could not record the decision");
  } finally {
    saving.value = false;
  }
}

onMounted(load);
</script>

<template>
  <section class="inception" aria-labelledby="inception-title">
    <h3 id="inception-title" class="inception-title">What does this project inherit?</h3>
    <p class="inception-lede">
      A project's inheritance is a decision, not a default. Until it is recorded,
      there is no design system and no Systems. Rules aren't part of this: global
      rules apply to every project, and a project's own rules are added on it.
    </p>
    <p v-if="loading" class="inception-muted">Loading…</p>
    <p v-else-if="error" class="error-msg">{{ error }}</p>
    <template v-else>
      <div class="inception-group">
        <h4>Design system</h4>
        <select v-model="local.design_system_id" class="inception-select" aria-label="Design system">
          <option :value="null">None</option>
          <option v-for="ds in designSystems" :key="ds.id" :value="ds.id">{{ ds.title }}</option>
        </select>
      </div>
      <div class="inception-group">
        <label class="inception-choice">
          <input type="checkbox" v-model="local.seed_systems" :disabled="systemsCount > 0" />
          <span>
            Seed the standard starter Systems (CI &amp; Release, Auth &amp; Access, Data Model &amp; Storage, …)
            <em v-if="systemsCount > 0" class="inception-muted"> — this project already has {{ systemsCount }}</em>
          </span>
        </label>
      </div>
      <div v-if="platforms.length" class="inception-group">
        <h4>Platforms</h4>
        <p class="inception-muted">
          What it is built on or ships as. Ideas the family has proven for a
          platform reach every project that is one.
          <template v-if="local.platforms === null"> Not answered yet.</template>
          <template v-else>
            Anything left unticked is recorded as "not this project".
            <button type="button" class="btn-ghost btn-sm" @click="clearPlatforms">Leave unanswered</button>
          </template>
        </p>
        <div class="inception-platforms">
          <label v-for="p in platforms" :key="p.slug" class="inception-choice">
            <input
              type="checkbox"
              :checked="isChecked(p.slug)"
              @change="togglePlatform(p.slug, ($event.target as HTMLInputElement).checked)"
            />
            <span>
              {{ p.name }}
              <em v-if="detected.has(p.slug)" class="inception-muted"> — detected</em>
            </span>
          </label>
        </div>
      </div>
      <p v-if="nothingToDecide" class="inception-muted">
        No design systems on this install yet — recording still settles the question.
      </p>
      <div v-if="mode === 'decide'" class="inception-actions">
        <button class="btn-primary" :disabled="saving" @click="record">
          {{ saving ? "Recording…" : "Record decision" }}
        </button>
      </div>
    </template>
  </section>
</template>

<style scoped>
.inception {
  background: var(--fs-surface-raised);
  border: 1px solid var(--fs-border-color);
  border-radius: var(--fs-radius-lg);
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.5rem;
}
.inception-title { margin: 0 0 0.35rem; font-size: 1.05rem; }
.inception-lede { margin: 0 0 1rem; color: var(--fs-text-secondary); font-size: 0.9rem; }
.inception-muted { color: var(--fs-text-tertiary); font-size: 0.85rem; margin: 0 0 0.35rem; }
.inception-group { margin-bottom: 1rem; }
.inception-group h4 { margin: 0 0 0.35rem; font-size: 0.9rem; font-weight: 500; }
.inception-choice { display: flex; align-items: flex-start; gap: 0.5rem; font-size: 0.9rem; margin: 0.25rem 0; }
.inception-choice input { margin-top: 0.2rem; accent-color: var(--fs-accent); }
.inception-platforms {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
  gap: 0 1rem;
}
.inception-select {
  padding: 0.45rem 0.7rem;
  border: 1px solid var(--fs-border-color);
  border-radius: var(--fs-radius-sm);
  background: var(--fs-surface-page);
  color: var(--fs-text-primary);
  font-size: 0.9rem;
}
.inception-actions { display: flex; justify-content: flex-end; margin-top: 0.5rem; }
</style>