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.
 */
import { computed, onMounted, ref, watch } from "vue";
import { apiErrorMessage } from "@/api/client";
import { fetchDesignSystems } from "@/api/designSystems";
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 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;
      // Start from what stands today, so "record" without changes keeps it.
      local.value = { design_system_id: d.design_system_id, seed_systems: false };
    } else {
      const ds = await fetchDesignSystems();
      designSystems.value = ds.design_systems.map((d) => ({ id: d.id, title: d.title }));
    }
  } 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);

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