From c6556a0ae52533e6b04a1ca386ff8e278534ac68 Mon Sep 17 00:00:00 2001
From: Timothy Koech <timosville@gmail.com>
Date: Wed, 13 May 2026 07:34:33 +0300
Subject: [PATCH 01/22] feat: add NavigationPane component with icon support
 and corresponding story

---
 src/frontend/shared/icon.vue                  | 88 +++++++++++++++++++
 src/frontend/shared/navigation-pane.story.vue | 39 ++++++++
 src/frontend/shared/navigation-pane.vue       | 53 +++++++++++
 src/types.ts                                  |  7 ++
 4 files changed, 187 insertions(+)
 create mode 100644 src/frontend/shared/navigation-pane.story.vue
 create mode 100644 src/frontend/shared/navigation-pane.vue

diff --git a/src/frontend/shared/icon.vue b/src/frontend/shared/icon.vue
index 91997306..64750129 100644
--- a/src/frontend/shared/icon.vue
+++ b/src/frontend/shared/icon.vue
@@ -3219,6 +3219,94 @@
         fill="currentColor"
       />
     </svg>
+    <svg
+      v-if="name === 'book-open'"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M8 4.66602V13.9993"
+        stroke="currentColor"
+        stroke-width="1.33333"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <path
+        d="M1.99998 12C1.82317 12 1.6536 11.9298 1.52858 11.8047C1.40355 11.6797 1.33331 11.5101 1.33331 11.3333V2.66667C1.33331 2.48986 1.40355 2.32029 1.52858 2.19526C1.6536 2.07024 1.82317 2 1.99998 2H5.33331C6.04056 2 6.71883 2.28095 7.21893 2.78105C7.71903 3.28115 7.99998 3.95942 7.99998 4.66667C7.99998 3.95942 8.28093 3.28115 8.78103 2.78105C9.28113 2.28095 9.9594 2 10.6666 2H14C14.1768 2 14.3464 2.07024 14.4714 2.19526C14.5964 2.32029 14.6666 2.48986 14.6666 2.66667V11.3333C14.6666 11.5101 14.5964 11.6797 14.4714 11.8047C14.3464 11.9298 14.1768 12 14 12H9.99998C9.46955 12 8.96084 12.2107 8.58577 12.5858C8.21069 12.9609 7.99998 13.4696 7.99998 14C7.99998 13.4696 7.78927 12.9609 7.41419 12.5858C7.03912 12.2107 6.53041 12 5.99998 12H1.99998Z"
+        stroke="currentColor"
+        stroke-width="1.33333"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </svg>
+    <svg
+      v-if="name === 'list-bullet'"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M2 8H2.00667"
+        stroke="currentColor"
+        stroke-width="1.33333"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <path
+        d="M2 12H2.00667"
+        stroke="currentColor"
+        stroke-width="1.33333"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <path
+        d="M2 4H2.00667"
+        stroke="currentColor"
+        stroke-width="1.33333"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <path
+        d="M5.33331 8H14"
+        stroke="currentColor"
+        stroke-width="1.33333"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <path
+        d="M5.33331 12H14"
+        stroke="currentColor"
+        stroke-width="1.33333"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <path
+        d="M5.33331 4H14"
+        stroke="currentColor"
+        stroke-width="1.33333"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </svg>
+    <svg
+      v-if="name === 'folder'"
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      stroke-width="1.5"
+      stroke="currentColor"
+    >
+      <path
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        d="M2.25 12.75V12A2.25 2.25 0 0 1 4.5 9.75h15A2.25 2.25 0 0 1 21.75 12v.75m-8.69-6.44-2.12-2.12a1.5 1.5 0 0 0-1.061-.44H4.5A2.25 2.25 0 0 0 2.25 6v12a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9a2.25 2.25 0 0 0-2.25-2.25h-5.379a1.5 1.5 0 0 1-1.06-.44Z"
+      />
+    </svg>
   </span>
 </template>
 
diff --git a/src/frontend/shared/navigation-pane.story.vue b/src/frontend/shared/navigation-pane.story.vue
new file mode 100644
index 00000000..db589b58
--- /dev/null
+++ b/src/frontend/shared/navigation-pane.story.vue
@@ -0,0 +1,39 @@
+<template>
+  <Story title="Navigation pane" group="shared">
+    <Variant title="With icons">
+      <NavigationPane :tabs="tabItems" :current-tab="currentTab" @change="changeTab" />
+      <div class="mt-2 text-sm text-gray-600">Active: {{ currentTab }}</div>
+    </Variant>
+    <Variant title="Label only">
+      <NavigationPane
+        :tabs="labelOnlyTabs"
+        :current-tab="currentTab"
+        @change="changeTab"
+      />
+    </Variant>
+  </Story>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import NavigationPane from './navigation-pane.vue';
+import type { NavigationPaneTab } from '../../types';
+
+const currentTab = ref('Details');
+
+const changeTab = (tab: string) => {
+  currentTab.value = tab;
+};
+
+const tabItems: NavigationPaneTab[] = [
+  { label: 'Details', icon: 'book-open' },
+  { label: 'Sections', icon: 'list-bullet' },
+  { label: 'Resources', icon: 'folder' },
+];
+
+const labelOnlyTabs: NavigationPaneTab[] = [
+  { label: 'Details' },
+  { label: 'Sections' },
+  { label: 'Resources' },
+];
+</script>
diff --git a/src/frontend/shared/navigation-pane.vue b/src/frontend/shared/navigation-pane.vue
new file mode 100644
index 00000000..b6c864a3
--- /dev/null
+++ b/src/frontend/shared/navigation-pane.vue
@@ -0,0 +1,53 @@
+<template>
+  <nav class="border-b border-gray-200" aria-label="Section navigation">
+    <div class="-mb-px flex flex-wrap gap-x-1">
+      <button
+        v-for="tab in tabs"
+        :key="tab.label"
+        type="button"
+        :aria-current="tab.current ? 'page' : undefined"
+        :class="[
+          'relative inline-flex items-center gap-2 border-b-2 px-4 py-3 text-sm font-medium leading-none transition-colors duration-75',
+          tab.current
+            ? 'border-indigo-600 text-indigo-700'
+            : 'border-transparent text-gray-600 hover:border-gray-300 hover:text-gray-900',
+        ]"
+        @click.prevent="emit('change', tab.label)"
+      >
+        <span
+          v-if="tab.icon"
+          class="inline-flex h-5 w-5 shrink-0 items-center justify-center text-current [&_svg]:block [&_svg]:h-4 [&_svg]:max-h-full [&_svg]:w-4 [&_svg]:max-w-full"
+        >
+          <Icon :name="tab.icon" />
+        </span>
+        <span>{{ tab.label }}</span>
+      </button>
+    </div>
+  </nav>
+</template>
+
+<script setup lang="ts">
+import { computed, type PropType } from 'vue';
+import type { NavigationPaneTab } from '../../types';
+import Icon from './icon.vue';
+
+const props = defineProps({
+  tabs: {
+    type: Array as PropType<NavigationPaneTab[]>,
+    required: true,
+  },
+  currentTab: {
+    type: String,
+    required: true,
+  },
+});
+
+const emit = defineEmits(['change']);
+
+const tabs = computed(() =>
+  props.tabs.map((tab: NavigationPaneTab) => ({
+    ...tab,
+    current: tab.label === props.currentTab,
+  })),
+);
+</script>
diff --git a/src/types.ts b/src/types.ts
index 34928441..b155fcd5 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -398,6 +398,13 @@ export interface TabItem {
   count: number;
 }
 
+/** Tabs for `navigation-pane` (icon + label). */
+export interface NavigationPaneTab {
+  label: string;
+  /** Registered `Icon` name; omitted for label-only tabs. */
+  icon?: string;
+}
+
 export interface StatMetric {
   name: string;
   stat: number;

From 442bf0e7b5392d8bc30312662e3eecbd849c518a Mon Sep 17 00:00:00 2001
From: Timothy Koech <timosville@gmail.com>
Date: Wed, 13 May 2026 07:34:40 +0300
Subject: [PATCH 02/22] feat: refactor story edit page to use tabbed navigation
 and modular components for details, sections, and resources

---
 .../stories/components/story-edit-details.vue | 61 ++++++++++++++
 .../components/story-edit-resources.vue       |  5 ++
 .../components/story-edit-sections.vue        |  5 ++
 src/frontend/stories/story-edit.vue           | 83 +++++++------------
 4 files changed, 99 insertions(+), 55 deletions(-)
 create mode 100644 src/frontend/stories/components/story-edit-details.vue
 create mode 100644 src/frontend/stories/components/story-edit-resources.vue
 create mode 100644 src/frontend/stories/components/story-edit-sections.vue

diff --git a/src/frontend/stories/components/story-edit-details.vue b/src/frontend/stories/components/story-edit-details.vue
new file mode 100644
index 00000000..a98544b4
--- /dev/null
+++ b/src/frontend/stories/components/story-edit-details.vue
@@ -0,0 +1,61 @@
+<template>
+  <div class="space-y-8">
+    <StringField
+      :field="{
+        name: 'name',
+        label: 'Title',
+        widget: 'string',
+      }"
+      :is-nested="true"
+      class="px-8"
+    />
+    <ImageField
+      :field="{
+        label: 'Cover Image',
+        name: 'coverImage',
+        widget: 'image',
+        description: 'JPG file up to 300K',
+        extensions: ['.jpeg', '.jpg'],
+        maxSize: 300000,
+      }"
+      :is-nested="true"
+      class="px-8"
+    />
+    <NumberField
+      :field="{
+        name: 'chapterLimit',
+        label: 'Chapters',
+        widget: 'number',
+      }"
+      :is-nested="true"
+      class="px-8"
+    />
+    <TagField
+      :field="{
+        name: 'tags',
+        label: 'Tags',
+        widget: 'tags',
+      }"
+      :is-nested="true"
+      class="px-8"
+    />
+    <MarkdownField
+      :field="{
+        name: 'description',
+        label: 'Description',
+        widget: 'markdown',
+        toolbar: [],
+      }"
+      :is-nested="true"
+      class="px-8"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import MarkdownField from '../../fields/markdown-field.vue';
+import StringField from '../../fields/string-field.vue';
+import ImageField from '../../fields/image-field.vue';
+import NumberField from '../../fields/number-field.vue';
+import TagField from '../../fields/tag-field.vue';
+</script>
diff --git a/src/frontend/stories/components/story-edit-resources.vue b/src/frontend/stories/components/story-edit-resources.vue
new file mode 100644
index 00000000..d9767791
--- /dev/null
+++ b/src/frontend/stories/components/story-edit-resources.vue
@@ -0,0 +1,5 @@
+<template>
+  <div class="px-8">
+    <h2 class="text-lg font-medium">Resources</h2>
+  </div>
+</template>
diff --git a/src/frontend/stories/components/story-edit-sections.vue b/src/frontend/stories/components/story-edit-sections.vue
new file mode 100644
index 00000000..f9542ec1
--- /dev/null
+++ b/src/frontend/stories/components/story-edit-sections.vue
@@ -0,0 +1,5 @@
+<template>
+  <div class="px-8">
+    <h2 class="text-lg font-medium">Sections</h2>
+  </div>
+</template>
diff --git a/src/frontend/stories/story-edit.vue b/src/frontend/stories/story-edit.vue
index 9ecc311f..791f9a80 100644
--- a/src/frontend/stories/story-edit.vue
+++ b/src/frontend/stories/story-edit.vue
@@ -7,6 +7,15 @@
           <ActionButton v-if="isNew" icon="trash" @tap="deleteStory" />
           <LabelButton label="Save" @tap="saveStory" />
         </template>
+        <template #extra-actions>
+          <div class="pb-6">
+            <NavigationPane
+              :tabs="storyEditTabs"
+              :current-tab="currentStoryTab"
+              @change="onStoryTabChange"
+            />
+          </div>
+        </template>
       </ContentHeader>
     </template>
 
@@ -21,55 +30,9 @@
         ]"
       >
         <form class="space-y-8 bg-white py-4">
-          <StringField
-            :field="{
-              name: 'name',
-              label: 'Title',
-              widget: 'string',
-            }"
-            :is-nested="true"
-            class="px-8"
-          />
-          <ImageField
-            :field="{
-              label: 'Cover Image',
-              name: 'coverImage',
-              widget: 'image',
-              description: 'JPG file up to 300K',
-              extensions: ['.jpeg', '.jpg'],
-              maxSize: 300000,
-            }"
-            :is-nested="true"
-            class="px-8"
-          />
-          <NumberField
-            :field="{
-              name: 'chapterLimit',
-              label: 'Chapters',
-              widget: 'number',
-            }"
-            :is-nested="true"
-            class="px-8"
-          />
-          <TagField
-            :field="{
-              name: 'tags',
-              label: 'Tags',
-              widget: 'tags',
-            }"
-            :is-nested="true"
-            class="px-8"
-          />
-          <MarkdownField
-            :field="{
-              name: 'description',
-              label: 'Description',
-              widget: 'markdown',
-              toolbar: [],
-            }"
-            :is-nested="true"
-            class="px-8"
-          />
+          <StoryEditDetails v-if="currentStoryTab === 'Details'" />
+          <StoryEditSections v-if="currentStoryTab === 'Sections'" />
+          <StoryEditResources v-if="currentStoryTab === 'Resources'" />
         </form>
 
         <ContentSidebar>
@@ -93,20 +56,19 @@ import { onMounted, ref } from 'vue';
 import { DateTime } from 'luxon';
 import { router } from '@inertiajs/vue3';
 
-import { SharedPageProps } from '../../types';
+import type { NavigationPaneTab, SharedPageProps } from '../../types';
 import AppLayout from '../shared/app-layout.vue';
 import ContentHeader from '../shared/content-header.vue';
 import { useSharedStore, useWidgetsStore, useModelStore } from '../store';
-import MarkdownField from '../fields/markdown-field.vue';
 import { ResponseStatus, StoryEditProps } from '../../types';
 import LabelButton from '../shared/label-button.vue';
 import MetaMetaBox from './components/meta-meta-box.vue';
 import ActionButton from '../shared/action-button.vue';
-import StringField from '../fields/string-field.vue';
-import ImageField from '../fields/image-field.vue';
-import NumberField from '../fields/number-field.vue';
-import TagField from '../fields/tag-field.vue';
 import ContentSidebar from '../shared/content-sidebar.vue';
+import StoryEditDetails from './components/story-edit-details.vue';
+import StoryEditResources from './components/story-edit-resources.vue';
+import StoryEditSections from './components/story-edit-sections.vue';
+import NavigationPane from '../shared/navigation-pane.vue';
 
 const props = defineProps<StoryEditProps & SharedPageProps>();
 const shared = useSharedStore();
@@ -120,6 +82,17 @@ model.setModel(props.story);
 const title = ref(props.story.name);
 const savedAt = ref(props.story.updatedAt as unknown as string);
 
+const storyEditTabs: NavigationPaneTab[] = [
+  { label: 'Details', icon: 'book-open' },
+  { label: 'Sections', icon: 'list-bullet' },
+  { label: 'Resources', icon: 'folder' },
+];
+const currentStoryTab = ref('Details');
+
+const onStoryTabChange = (tab: string) => {
+  currentStoryTab.value = tab;
+};
+
 onMounted(() => {
   model.$subscribe(() => {
     title.value = model.getField('name', 'New Story');

From 2493845d9f55313fbe23df1b5d0f98e8caf0be30 Mon Sep 17 00:00:00 2001
From: Timothy Koech <timosville@gmail.com>
Date: Wed, 13 May 2026 08:10:34 +0300
Subject: [PATCH 03/22] feat: add content classification panel with story,
 section, and chapter type fields to story edit details

---
 .../stories/components/story-edit-details.vue | 27 +++++++++++++++++++
 1 file changed, 27 insertions(+)

diff --git a/src/frontend/stories/components/story-edit-details.vue b/src/frontend/stories/components/story-edit-details.vue
index a98544b4..ddc8fafe 100644
--- a/src/frontend/stories/components/story-edit-details.vue
+++ b/src/frontend/stories/components/story-edit-details.vue
@@ -49,6 +49,32 @@
       :is-nested="true"
       class="px-8"
     />
+    <PanelField
+      :field="{
+        label: 'Content Classification',
+        name: 'contentClassification',
+        widget: 'panel',
+        fields: [
+          {
+            label: 'Story Type',
+            name: 'storyType',
+            widget: 'string',
+          },
+          {
+            label: 'Section Type',
+            name: 'sectionType',
+            widget: 'string',
+          },
+          {
+            label: 'Chapter Type',
+            name: 'chapterType',
+            widget: 'string',
+          },
+        ],
+      }"
+      :is-nested="true"
+      class="px-8"
+    />
   </div>
 </template>
 
@@ -58,4 +84,5 @@ import StringField from '../../fields/string-field.vue';
 import ImageField from '../../fields/image-field.vue';
 import NumberField from '../../fields/number-field.vue';
 import TagField from '../../fields/tag-field.vue';
+import PanelField from '../../fields/panel-field.vue';
 </script>

From cf975d6b56b67694ce11498367492f60d747589f Mon Sep 17 00:00:00 2001
From: Timothy Koech <timosville@gmail.com>
Date: Wed, 13 May 2026 08:16:29 +0300
Subject: [PATCH 04/22] feat: add visibility select field to story edit details
 component

---
 .../stories/components/story-edit-details.vue     | 15 +++++++++++++++
 1 file changed, 15 insertions(+)

diff --git a/src/frontend/stories/components/story-edit-details.vue b/src/frontend/stories/components/story-edit-details.vue
index ddc8fafe..286f75c7 100644
--- a/src/frontend/stories/components/story-edit-details.vue
+++ b/src/frontend/stories/components/story-edit-details.vue
@@ -75,6 +75,20 @@
       :is-nested="true"
       class="px-8"
     />
+    <SelectField
+      :field="{
+        name: 'Visibility',
+        label: 'Visibility',
+        widget: 'select',
+        options: [
+          { label: 'Public', value: 'public' },
+          { label: 'Private', value: 'private' },
+        ],
+        default: 'public',
+      }"
+      :is-nested="true"
+      class="px-8"
+    />
   </div>
 </template>
 
@@ -85,4 +99,5 @@ import ImageField from '../../fields/image-field.vue';
 import NumberField from '../../fields/number-field.vue';
 import TagField from '../../fields/tag-field.vue';
 import PanelField from '../../fields/panel-field.vue';
+import SelectField from '../../fields/select-field.vue';
 </script>

From 3163a3855c170aa11216bfa13ae0f96b1bc86c6b Mon Sep 17 00:00:00 2001
From: Timothy Koech <timosville@gmail.com>
Date: Wed, 13 May 2026 15:24:15 +0300
Subject: [PATCH 05/22] wip: add section-panel

---
 .../fields/section-panel-field.story.vue      |  66 +++++
 src/frontend/fields/section-panel-field.vue   | 236 ++++++++++++++++++
 src/frontend/fields/widget-fields.ts          |   3 +
 src/frontend/shared/icon.vue                  |   2 +-
 .../components/story-edit-resources.vue       |  51 +++-
 .../components/story-edit-sections.vue        |  31 ++-
 src/frontend/stories/story-edit.story.vue     |   4 +-
 7 files changed, 387 insertions(+), 6 deletions(-)
 create mode 100644 src/frontend/fields/section-panel-field.story.vue
 create mode 100644 src/frontend/fields/section-panel-field.vue

diff --git a/src/frontend/fields/section-panel-field.story.vue b/src/frontend/fields/section-panel-field.story.vue
new file mode 100644
index 00000000..0e979336
--- /dev/null
+++ b/src/frontend/fields/section-panel-field.story.vue
@@ -0,0 +1,66 @@
+<template>
+  <Story title="Section Panel Field" group="widgets">
+    <Variant title="Default" :setup-app="loadData">
+      <SectionPanelField :field="sectionsSpec" />
+      <ModelControl :model="listModel" />
+    </Variant>
+
+    <Variant title="Readonly" :setup-app="loadData">
+      <SectionPanelField :field="sectionsSpec" :is-read-only="true" />
+      <ModelControl :model="listModel" />
+    </Variant>
+
+    <Variant title="Empty Error" :setup-app="loadData">
+      <SectionPanelField :field="sectionsSpec" />
+      <template #controls>
+        <ErrorControl :errors="emptyListError" />
+      </template>
+    </Variant>
+  </Story>
+</template>
+
+<script setup lang="ts">
+import { useModelStore, useSharedStore } from '../store';
+import SectionPanelField from './section-panel-field.vue';
+import ModelControl from '../test/model-control.vue';
+import ErrorControl from '../test/error-control.vue';
+import { listModel } from '../test/mocks';
+import type { StoryHandler } from '../shared/helpers';
+
+const sectionsSpec = {
+  label: 'Section',
+  name: 'sections',
+  widget: 'sectionPanel',
+  index: 'scripture.reference',
+  fields: [
+    {
+      label: 'Scripture',
+      name: 'scripture',
+      widget: 'scripture',
+    },
+    {
+      label: 'Commentary',
+      name: 'commentary',
+      widget: 'markdown',
+    },
+  ],
+};
+
+const emptyListError = {
+  'bundle.sections': ['The sections field must have at least 1 items'],
+};
+
+const loadData: StoryHandler = ({ variant }): void => {
+  const store = useModelStore();
+  const shared = useSharedStore();
+
+  if (variant?.title === 'Empty Error') {
+    store.model = { sections: [] };
+    shared.errors = emptyListError;
+    return;
+  }
+
+  store.model = listModel;
+  shared.errors = {};
+};
+</script>
diff --git a/src/frontend/fields/section-panel-field.vue b/src/frontend/fields/section-panel-field.vue
new file mode 100644
index 00000000..b6bceb30
--- /dev/null
+++ b/src/frontend/fields/section-panel-field.vue
@@ -0,0 +1,236 @@
+<template>
+  <div class="subgrid ml-8 w-full">
+    <ul
+      v-for="(_listItem, index) in listItems"
+      :key="index"
+      class="relative my-2 w-full list-none rounded-xl border border-gray-200 bg-white p-0"
+      :draggable="canMutate"
+      @dragstart="onDragStart(index)"
+      @dragover.prevent
+      @drop="onDrop(index)"
+      @dragend="onDragEnd"
+    >
+      <li>
+        <div
+          :class="[
+            'flex items-center justify-between gap-3 px-4 py-3',
+            { 'border-b border-gray-100': isExpanded(index) },
+          ]"
+        >
+          <div class="flex items-center gap-3">
+            <button
+              type="button"
+              :disabled="!canMutate"
+              class="cursor-move text-gray-400 disabled:cursor-not-allowed disabled:opacity-40"
+              aria-label="Reorder section"
+            >
+              <Icon name="drag" class="h-5 w-5" />
+            </button>
+            <button
+              type="button"
+              class="inline-flex items-center text-left text-sm font-semibold text-gray-800"
+              @click="toggle(index)"
+            >
+              <span>{{ sectionTitle(index) }}</span>
+            </button>
+          </div>
+          <div class="flex items-center justify-center gap-x-3">
+            <button
+              v-if="canMutate"
+              type="button"
+              class="inline-flex h-8 w-8 shrink-0 items-center justify-center"
+              @click="onDelete(index)"
+            >
+              <Icon name="trash" class="size-4 hover:text-error" />
+            </button>
+            <button
+              type="button"
+              class="inline-flex h-8 w-8 shrink-0 items-center justify-center text-gray-500 hover:bg-gray-50"
+              @click="toggle(index)"
+            >
+              <Icon
+                :name="isExpanded(index) ? 'chevron-down' : 'chevron-right'"
+                class="size-4"
+              />
+            </button>
+          </div>
+        </div>
+
+        <ul
+          v-if="isExpanded(index)"
+          class="subgrid m-0 w-full list-none gap-y-6 bg-white px-4 py-6"
+        >
+          <li
+            v-for="(item, itemIndex) in fields"
+            :key="item.name + itemIndex.toString()"
+            :class="item.widget === 'object' || item.widget === 'list' ? 'subgrid' : ''"
+          >
+            <component
+              :is="widgets.picker(item.widget)"
+              :field="item"
+              :is-read-only="props.isReadOnly"
+              :root-path="`${fieldPath}.${index.toString()}`"
+              :is-nested="true"
+            />
+          </li>
+        </ul>
+      </li>
+    </ul>
+
+    <div v-if="canMutate" class="mt-6 flex w-full flex-col">
+      <button
+        type="button"
+        class="inline-flex items-center justify-center rounded-xl border-2 border-dashed border-indigo-700 bg-indigo-50 px-3 py-[18px] text-sm font-medium leading-4 text-indigo-700 shadow-sm"
+        @click.prevent="addSet"
+      >
+        <div class="inline-flex items-center justify-center gap-2">
+          <span>
+            <svg
+              width="12"
+              height="12"
+              viewBox="0 0 10 10"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M5 1V5M5 5V9M5 5H9M5 5L1 5"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                fill="currentColor"
+              />
+            </svg>
+          </span>
+          <span class="ml-2">Add {{ field.label }}</span>
+        </div>
+      </button>
+
+      <div v-if="showEmptyListWarning()">
+        <div
+          class="flex flex-row items-center rounded-full border bg-white p-2 text-error"
+        >
+          <Icon name="exclamation" class="pr-2" />
+          <p class="text-sm">At least one item is required</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue';
+import type { FieldSpec } from '../../types';
+import { commonProps } from '../shared/helpers';
+import { useModelStore, useSharedStore, useWidgetsStore } from '../store';
+import Icon from '../shared/icon.vue';
+
+const props = defineProps({
+  ...commonProps,
+});
+
+const emit = defineEmits<{
+  (event: 'delete', index: number): void;
+}>();
+
+const field = computed(() => props.field as FieldSpec);
+const fields = computed(() => (field.value.fields || []) as FieldSpec[]);
+const fieldPath = computed(() => {
+  if (props.rootPath === undefined) return field.value.name;
+  return `${props.rootPath}.${field.value.name}`;
+});
+
+const model = useModelStore();
+const shared = useSharedStore();
+const widgets = useWidgetsStore();
+
+const listItems = computed(() => {
+  return model.getField(fieldPath.value, []) as Record<string, unknown>[];
+});
+
+const canMutate = computed(() => {
+  if (props.isReadOnly) return false;
+  if (field.value.isFlexible) return true;
+  return !shared.isTranslation;
+});
+
+const expanded = ref<boolean[]>([]);
+const syncExpanded = () => {
+  const count = listItems.value.length;
+  if (expanded.value.length === count) return;
+  const fresh = [...expanded.value];
+  while (fresh.length < count) fresh.push(true);
+  fresh.length = count;
+  expanded.value = fresh;
+};
+
+watch(listItems, syncExpanded, { deep: true, immediate: true });
+
+const isExpanded = (index: number): boolean => expanded.value[index] ?? true;
+
+const toggle = (index: number) => {
+  const fresh = [...expanded.value];
+  fresh[index] = !isExpanded(index);
+  expanded.value = fresh;
+};
+
+const sectionTitle = (index: number): string => {
+  let path = `${fieldPath.value}.${index.toString()}`;
+  if (field.value.index) {
+    path = `${path}.${field.value.index}`;
+  } else if (fields.value[0]) {
+    path = `${path}.${fields.value[0].name}`;
+  }
+
+  const title = model.getField(path, 'New Section') as string;
+  return title && title.length > 0 ? title : 'New Section';
+};
+
+const addSet = () => {
+  model.addListItem(fieldPath.value);
+};
+
+const onDelete = (index: number) => {
+  emit('delete', index);
+  model.removeListItem(fieldPath.value, index);
+};
+
+const dragFromIndex = ref<number | null>(null);
+const onDragStart = (index: number) => {
+  if (!canMutate.value) return;
+  dragFromIndex.value = index;
+};
+
+const onDragEnd = () => {
+  dragFromIndex.value = null;
+};
+
+const onDrop = (toIndex: number) => {
+  if (!canMutate.value) return;
+  if (dragFromIndex.value === null) return;
+  if (dragFromIndex.value === toIndex) return;
+
+  const items = [...listItems.value];
+  const [moved] = items.splice(dragFromIndex.value, 1);
+  if (!moved) return;
+  items.splice(toIndex, 0, moved);
+  model.setField(fieldPath.value, items);
+
+  const toggles = [...expanded.value];
+  const [movedToggle] = toggles.splice(dragFromIndex.value, 1);
+  toggles.splice(toIndex, 0, movedToggle ?? true);
+  expanded.value = toggles;
+  dragFromIndex.value = null;
+};
+
+const showEmptyListWarning = (): boolean => {
+  if (props.isReadOnly) return false;
+  if (listItems.value.length > 0) return false;
+
+  for (const key in shared.errors) {
+    const needle = `bundle.${fieldPath.value}`;
+    if (key.startsWith(needle)) return true;
+  }
+  return false;
+};
+</script>
diff --git a/src/frontend/fields/widget-fields.ts b/src/frontend/fields/widget-fields.ts
index 2667fda8..5ab35941 100644
--- a/src/frontend/fields/widget-fields.ts
+++ b/src/frontend/fields/widget-fields.ts
@@ -17,6 +17,7 @@ import DateField from './date-field.vue';
 import DateRangeField from './date-range-field.vue';
 import TagField from './tag-field.vue';
 import RegionField from './region-field.vue';
+import SectionPanelField from './section-panel-field.vue';
 
 export const widgetField = (widget: string) => {
   const up = widget[0].toUpperCase() + widget.substring(1);
@@ -62,6 +63,8 @@ export const widgetField = (widget: string) => {
       return TagField;
     case 'RegionField':
       return RegionField;
+    case 'SectionPanelField':
+      return SectionPanelField;
     default:
       return NullField;
   }
diff --git a/src/frontend/shared/icon.vue b/src/frontend/shared/icon.vue
index 64750129..da04c809 100644
--- a/src/frontend/shared/icon.vue
+++ b/src/frontend/shared/icon.vue
@@ -143,7 +143,7 @@
     >
       <path
         d="M10 4V6H14V4H10ZM6.86523 19.0713C6.90265 19.5946 7.33769 20 7.8623 20H16.1377C16.6623 20 17.0974 19.5946 17.1348 19.0713L17.9268 8H6.07324L6.86523 19.0713ZM9 17V11C9 10.4477 9.44772 10 10 10C10.5523 10 11 10.4477 11 11V17C11 17.5523 10.5523 18 10 18C9.44772 18 9 17.5523 9 17ZM13 17V11C13 10.4477 13.4477 10 14 10C14.5523 10 15 10.4477 15 11V17C15 17.5523 14.5523 18 14 18C13.4477 18 13 17.5523 13 17ZM16 6H20C20.5523 6 21 6.44772 21 7C21 7.55228 20.5523 8 20 8H19.9307L19.1299 19.2139C19.0177 20.7837 17.7116 22 16.1377 22H7.8623C6.28844 22 4.98232 20.7837 4.87012 19.2139L4.06934 8H4C3.44772 8 3 7.55228 3 7C3 6.44772 3.44772 6 4 6H8V4C8 2.89543 8.89543 2 10 2H14C15.1046 2 16 2.89543 16 4V6Z"
-        fill="#111827"
+        fill="currentColor"
       />
     </svg>
 
diff --git a/src/frontend/stories/components/story-edit-resources.vue b/src/frontend/stories/components/story-edit-resources.vue
index d9767791..808396af 100644
--- a/src/frontend/stories/components/story-edit-resources.vue
+++ b/src/frontend/stories/components/story-edit-resources.vue
@@ -1,5 +1,52 @@
 <template>
-  <div class="px-8">
-    <h2 class="text-lg font-medium">Resources</h2>
+  <div class="space-y-8 px-6">
+    <ListField
+      :field="{
+        label: 'Resource',
+        name: 'resource',
+        widget: 'list',
+        canFold: true,
+        fields: [
+          { label: 'Title', name: 'title', widget: 'string' },
+          { label: 'URL/Link', name: 'urlOrLink', widget: 'string' },
+          // {
+          //   label: 'Video',
+          //   name: 'video',
+          //   widget: 'video',
+          //   description: 'MP4 file up to 3GB',
+          //   extensions: ['.mp4'],
+          //   maxSize: 3000000000,
+          //   collectionId: '3cd72f8e-46ae-4ef6-9f3b-8c445aa609ca',
+          // },
+          {
+            name: 'thumbnail',
+            label: 'Thumbnail',
+            widget: 'image',
+            description: '500px square JPG or PNG up to 10MB',
+            extensions: ['.jpeg', '.jpg', '.png'],
+            maxSize: 10485760,
+            uploadPreset: 'story-meta-thumbnail',
+          },
+          { label: 'URL', name: 'url', widget: 'string' },
+          { label: 'Label', name: 'label', widget: 'string' },
+          {
+            label: 'Visibility',
+            name: 'visibility',
+            widget: 'select',
+            options: [
+              { label: 'Public', value: 'public' },
+              { label: 'Private', value: 'private' },
+            ],
+            default: 'public',
+          },
+        ],
+      }"
+      :is-nested="true"
+      class="px-8"
+    />
   </div>
 </template>
+
+<script setup lang="ts">
+import ListField from '../../fields/list-field.vue';
+</script>
diff --git a/src/frontend/stories/components/story-edit-sections.vue b/src/frontend/stories/components/story-edit-sections.vue
index f9542ec1..47e6c311 100644
--- a/src/frontend/stories/components/story-edit-sections.vue
+++ b/src/frontend/stories/components/story-edit-sections.vue
@@ -1,5 +1,32 @@
 <template>
-  <div class="px-8">
-    <h2 class="text-lg font-medium">Sections</h2>
+  <div class="space-y-8 px-6">
+    <SectionPanelField
+      :field="sectionsField"
+      :is-nested="true"
+      class="px-8"
+    />
   </div>
 </template>
+
+<script setup lang="ts">
+import SectionPanelField from '../../fields/section-panel-field.vue';
+
+const sectionsField = {
+  label: 'Section',
+  name: 'sections',
+  widget: 'sectionPanel',
+  index: 'scripture.reference',
+  fields: [
+    {
+      label: 'Scripture',
+      name: 'scripture',
+      widget: 'scripture',
+    },
+    {
+      label: 'Commentary',
+      name: 'commentary',
+      widget: 'markdown',
+    },
+  ],
+};
+</script>
diff --git a/src/frontend/stories/story-edit.story.vue b/src/frontend/stories/story-edit.story.vue
index 520b0e0e..5da2393e 100644
--- a/src/frontend/stories/story-edit.story.vue
+++ b/src/frontend/stories/story-edit.story.vue
@@ -30,7 +30,7 @@
 
 <script setup lang="ts">
 import StoryEdit from './story-edit.vue';
-import { sharedProps, miniSidebar } from '../test/mocks';
+import { listModel, sharedProps, miniSidebar } from '../test/mocks';
 import { useSharedStore } from '../store';
 import type { StoryHandler } from '../shared/helpers';
 
@@ -47,6 +47,7 @@ const storyData = {
     '# The Gospel of John\n\nThis is the fourth gospel in the New Testament...',
   createdAt: '2024-01-15T10:30:00Z',
   updatedAt: '2024-01-20T14:45:00Z',
+  sections: listModel.sections,
 };
 
 const newStoryData = {
@@ -60,6 +61,7 @@ const newStoryData = {
   description: '',
   createdAt: '2024-01-25T09:00:00Z',
   updatedAt: '2024-01-25T09:00:00Z',
+  sections: [],
 };
 
 const loadNormalData: StoryHandler = ({ app, story, variant }): void => {

From 17f2206c9b563a3a7b9c2ad793d20de59ee5a4be Mon Sep 17 00:00:00 2001
From: Timothy Koech <timosville@gmail.com>
Date: Wed, 13 May 2026 16:24:02 +0300
Subject: [PATCH 06/22] feat: enhance section panel field with improved icon
 sizes and toggle button functionality

---
 src/frontend/fields/section-panel-field.vue | 25 ++++++++++++++++-----
 1 file changed, 19 insertions(+), 6 deletions(-)

diff --git a/src/frontend/fields/section-panel-field.vue b/src/frontend/fields/section-panel-field.vue
index b6bceb30..27f89811 100644
--- a/src/frontend/fields/section-panel-field.vue
+++ b/src/frontend/fields/section-panel-field.vue
@@ -41,17 +41,30 @@
               class="inline-flex h-8 w-8 shrink-0 items-center justify-center"
               @click="onDelete(index)"
             >
-              <Icon name="trash" class="size-4 hover:text-error" />
+              <Icon name="trash" class="size-5 hover:text-error" />
             </button>
             <button
               type="button"
-              class="inline-flex h-8 w-8 shrink-0 items-center justify-center text-gray-500 hover:bg-gray-50"
+              class="inline-flex size-8 items-center justify-center text-gray-500 hover:bg-gray-50"
               @click="toggle(index)"
             >
-              <Icon
-                :name="isExpanded(index) ? 'chevron-down' : 'chevron-right'"
-                class="size-4"
-              />
+              <span>
+                <svg
+                  class="size-5 origin-center transition-transform duration-200 ease-out"
+                  :class="[isExpanded(index) ? 'rotate-180' : '']"
+                  viewBox="0 0 20 20"
+                  fill="none"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M15 12.5L10 7.5L5 12.5"
+                    stroke="currentColor"
+                    stroke-width="1.66667"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                  />
+                </svg>
+              </span>
             </button>
           </div>
         </div>

From 860fae5c277181e4d02fe71b06c8975b30a12803 Mon Sep 17 00:00:00 2001
From: Timothy Koech <timosville@gmail.com>
Date: Wed, 13 May 2026 16:25:46 +0300
Subject: [PATCH 07/22] feat: update icon component with new SVG paths for
 improved visual representation

---
 src/frontend/shared/icon.vue | 86 ++++++++++++++++++------------------
 1 file changed, 43 insertions(+), 43 deletions(-)

diff --git a/src/frontend/shared/icon.vue b/src/frontend/shared/icon.vue
index da04c809..4c37909f 100644
--- a/src/frontend/shared/icon.vue
+++ b/src/frontend/shared/icon.vue
@@ -283,6 +283,7 @@
         fill="currentColor"
       />
     </svg>
+
     <svg
       v-if="name == 'drag'"
       width="20"
@@ -291,49 +292,48 @@
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
     >
-      <g clip-path="url(#clip0_1288_3562)">
-        <path
-          d="M10 4C8.89543 4 8 3.10457 8 2C8 0.89543 8.89543 -4.82823e-08 10 0C11.1046 4.82823e-08 12 0.895431 12 2C12 3.10457 11.1046 4 10 4Z"
-          fill="currentColor"
-        />
-        <path
-          d="M10 12C8.89543 12 8 11.1046 8 10C8 8.89543 8.89543 8 10 8C11.1046 8 12 8.89543 12 10C12 11.1046 11.1046 12 10 12Z"
-          fill="currentColor"
-        />
-        <path
-          d="M10 20C8.89543 20 8 19.1046 8 18C8 16.8954 8.89543 16 10 16C11.1046 16 12 16.8954 12 18C12 19.1046 11.1046 20 10 20Z"
-          fill="currentColor"
-        />
-        <path
-          d="M2 4C0.89543 4 -4.82823e-08 3.10457 0 2C4.82823e-08 0.895431 0.895431 -4.82823e-08 2 0C3.10457 4.82823e-08 4 0.895431 4 2C4 3.10457 3.10457 4 2 4Z"
-          fill="currentColor"
-        />
-        <path
-          d="M2 12C0.89543 12 -4.82823e-08 11.1046 0 10C4.82823e-08 8.89543 0.895431 8 2 8C3.10457 8 4 8.89543 4 10C4 11.1046 3.10457 12 2 12Z"
-          fill="currentColor"
-        />
-        <path
-          d="M2 20C0.89543 20 -4.82823e-08 19.1046 0 18C4.82823e-08 16.8954 0.895431 16 2 16C3.10457 16 4 16.8954 4 18C4 19.1046 3.10457 20 2 20Z"
-          fill="currentColor"
-        />
-        <path
-          d="M18 4C16.8954 4 16 3.10457 16 2C16 0.895431 16.8954 -4.82823e-08 18 0C19.1046 4.82823e-08 20 0.895431 20 2C20 3.10457 19.1046 4 18 4Z"
-          fill="currentColor"
-        />
-        <path
-          d="M18 12C16.8954 12 16 11.1046 16 10C16 8.89543 16.8954 8 18 8C19.1046 8 20 8.89543 20 10C20 11.1046 19.1046 12 18 12Z"
-          fill="currentColor"
-        />
-        <path
-          d="M18 20C16.8954 20 16 19.1046 16 18C16 16.8954 16.8954 16 18 16C19.1046 16 20 16.8954 20 18C20 19.1046 19.1046 20 18 20Z"
-          fill="currentColor"
-        />
-      </g>
-      <defs>
-        <clipPath id="clip0_1288_3562">
-          <rect width="20" height="20" fill="white" />
-        </clipPath>
-      </defs>
+      <path
+        d="M7.49996 10.8327C7.9602 10.8327 8.33329 10.4596 8.33329 9.99935C8.33329 9.53911 7.9602 9.16602 7.49996 9.16602C7.03972 9.16602 6.66663 9.53911 6.66663 9.99935C6.66663 10.4596 7.03972 10.8327 7.49996 10.8327Z"
+        stroke="#99A1AF"
+        stroke-width="1.66667"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <path
+        d="M7.49996 5.00065C7.9602 5.00065 8.33329 4.62756 8.33329 4.16732C8.33329 3.70708 7.9602 3.33398 7.49996 3.33398C7.03972 3.33398 6.66663 3.70708 6.66663 4.16732C6.66663 4.62756 7.03972 5.00065 7.49996 5.00065Z"
+        stroke="#99A1AF"
+        stroke-width="1.66667"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <path
+        d="M7.49996 16.6667C7.9602 16.6667 8.33329 16.2936 8.33329 15.8333C8.33329 15.3731 7.9602 15 7.49996 15C7.03972 15 6.66663 15.3731 6.66663 15.8333C6.66663 16.2936 7.03972 16.6667 7.49996 16.6667Z"
+        stroke="#99A1AF"
+        stroke-width="1.66667"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <path
+        d="M12.5 10.8327C12.9602 10.8327 13.3333 10.4596 13.3333 9.99935C13.3333 9.53911 12.9602 9.16602 12.5 9.16602C12.0397 9.16602 11.6666 9.53911 11.6666 9.99935C11.6666 10.4596 12.0397 10.8327 12.5 10.8327Z"
+        stroke="#99A1AF"
+        stroke-width="1.66667"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <path
+        d="M12.5 5.00065C12.9602 5.00065 13.3333 4.62756 13.3333 4.16732C13.3333 3.70708 12.9602 3.33398 12.5 3.33398C12.0397 3.33398 11.6666 3.70708 11.6666 4.16732C11.6666 4.62756 12.0397 5.00065 12.5 5.00065Z"
+        stroke="#99A1AF"
+        stroke-width="1.66667"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <path
+        d="M12.5 16.6667C12.9602 16.6667 13.3333 16.2936 13.3333 15.8333C13.3333 15.3731 12.9602 15 12.5 15C12.0397 15 11.6666 15.3731 11.6666 15.8333C11.6666 16.2936 12.0397 16.6667 12.5 16.6667Z"
+        stroke="#99A1AF"
+        stroke-width="1.66667"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
     </svg>
 
     <svg

From f2a2d8bc8cebcc0670670bc8397963d29e6890d2 Mon Sep 17 00:00:00 2001
From: Timothy Koech <timosville@gmail.com>
Date: Wed, 13 May 2026 16:34:52 +0300
Subject: [PATCH 08/22] feat: integrate resources section into story edit
 component with new structure and fields

---
 src/frontend/fields/section-panel-field.vue   | 10 ++--
 .../components/story-edit-resources.vue       | 60 +++++--------------
 src/frontend/stories/story-edit.story.vue     | 14 +++++
 src/frontend/stories/story-edit.vue           |  2 +-
 4 files changed, 34 insertions(+), 52 deletions(-)

diff --git a/src/frontend/fields/section-panel-field.vue b/src/frontend/fields/section-panel-field.vue
index 27f89811..07e35b0e 100644
--- a/src/frontend/fields/section-panel-field.vue
+++ b/src/frontend/fields/section-panel-field.vue
@@ -1,19 +1,19 @@
 <template>
-  <div class="subgrid ml-8 w-full">
+  <div class="subgrid ml-8">
     <ul
       v-for="(_listItem, index) in listItems"
       :key="index"
-      class="relative my-2 w-full list-none rounded-xl border border-gray-200 bg-white p-0"
+      class="relative my-2 list-none rounded-xl border border-gray-200 p-0"
       :draggable="canMutate"
       @dragstart="onDragStart(index)"
       @dragover.prevent
       @drop="onDrop(index)"
       @dragend="onDragEnd"
     >
-      <li>
+      <li class="rounded-xl bg-white">
         <div
           :class="[
-            'flex items-center justify-between gap-3 px-4 py-3',
+            'flex items-center justify-between gap-3 overflow-hidden px-4 py-3',
             { 'border-b border-gray-100': isExpanded(index) },
           ]"
         >
@@ -71,7 +71,7 @@
 
         <ul
           v-if="isExpanded(index)"
-          class="subgrid m-0 w-full list-none gap-y-6 bg-white px-4 py-6"
+          class="subgrid m-0 w-full list-none gap-y-6 px-4 py-6"
         >
           <li
             v-for="(item, itemIndex) in fields"
diff --git a/src/frontend/stories/components/story-edit-resources.vue b/src/frontend/stories/components/story-edit-resources.vue
index 808396af..ea5ecb8f 100644
--- a/src/frontend/stories/components/story-edit-resources.vue
+++ b/src/frontend/stories/components/story-edit-resources.vue
@@ -1,52 +1,20 @@
 <template>
-  <div class="space-y-8 px-6">
-    <ListField
-      :field="{
-        label: 'Resource',
-        name: 'resource',
-        widget: 'list',
-        canFold: true,
-        fields: [
-          { label: 'Title', name: 'title', widget: 'string' },
-          { label: 'URL/Link', name: 'urlOrLink', widget: 'string' },
-          // {
-          //   label: 'Video',
-          //   name: 'video',
-          //   widget: 'video',
-          //   description: 'MP4 file up to 3GB',
-          //   extensions: ['.mp4'],
-          //   maxSize: 3000000000,
-          //   collectionId: '3cd72f8e-46ae-4ef6-9f3b-8c445aa609ca',
-          // },
-          {
-            name: 'thumbnail',
-            label: 'Thumbnail',
-            widget: 'image',
-            description: '500px square JPG or PNG up to 10MB',
-            extensions: ['.jpeg', '.jpg', '.png'],
-            maxSize: 10485760,
-            uploadPreset: 'story-meta-thumbnail',
-          },
-          { label: 'URL', name: 'url', widget: 'string' },
-          { label: 'Label', name: 'label', widget: 'string' },
-          {
-            label: 'Visibility',
-            name: 'visibility',
-            widget: 'select',
-            options: [
-              { label: 'Public', value: 'public' },
-              { label: 'Private', value: 'private' },
-            ],
-            default: 'public',
-          },
-        ],
-      }"
-      :is-nested="true"
-      class="px-8"
-    />
+  <div class="space-y-8">
+    <SectionPanelField :field="resourcesField" :is-nested="true" />
   </div>
 </template>
 
 <script setup lang="ts">
-import ListField from '../../fields/list-field.vue';
+import SectionPanelField from '../../fields/section-panel-field.vue';
+
+const resourcesField = {
+  label: 'Resource',
+  name: 'resources',
+  widget: 'sectionPanel',
+  fields: [
+    { label: 'Title', name: 'title', widget: 'string' },
+    { label: 'URL', name: 'url', widget: 'string' },
+    { label: 'Summary', name: 'summary', widget: 'markdown' },
+  ],
+};
 </script>
diff --git a/src/frontend/stories/story-edit.story.vue b/src/frontend/stories/story-edit.story.vue
index 5da2393e..702ef2f4 100644
--- a/src/frontend/stories/story-edit.story.vue
+++ b/src/frontend/stories/story-edit.story.vue
@@ -48,6 +48,19 @@ const storyData = {
   createdAt: '2024-01-15T10:30:00Z',
   updatedAt: '2024-01-20T14:45:00Z',
   sections: listModel.sections,
+  resources: [
+    {
+      title: 'Study companion PDF',
+      url: 'https://example.com/guides/john-study.pdf',
+      summary:
+        '# About this resource\n\nA printable **study guide** with discussion questions for small groups.',
+    },
+    {
+      title: 'Sermon series',
+      url: 'https://example.com/series/gospel-of-john',
+      summary: 'Weekly audio and outlines covering *John* chapters 1–12.',
+    },
+  ],
 };
 
 const newStoryData = {
@@ -62,6 +75,7 @@ const newStoryData = {
   createdAt: '2024-01-25T09:00:00Z',
   updatedAt: '2024-01-25T09:00:00Z',
   sections: [],
+  resources: [],
 };
 
 const loadNormalData: StoryHandler = ({ app, story, variant }): void => {
diff --git a/src/frontend/stories/story-edit.vue b/src/frontend/stories/story-edit.vue
index 791f9a80..9c1adcef 100644
--- a/src/frontend/stories/story-edit.vue
+++ b/src/frontend/stories/story-edit.vue
@@ -29,7 +29,7 @@
           },
         ]"
       >
-        <form class="space-y-8 bg-white py-4">
+        <form class="space-y-8 py-4">
           <StoryEditDetails v-if="currentStoryTab === 'Details'" />
           <StoryEditSections v-if="currentStoryTab === 'Sections'" />
           <StoryEditResources v-if="currentStoryTab === 'Resources'" />

From 0b4b9faa0ff08772029f5436c3aa82b545775c8f Mon Sep 17 00:00:00 2001
From: Timothy Koech <timosville@gmail.com>
Date: Wed, 13 May 2026 16:46:37 +0300
Subject: [PATCH 09/22] feat: enhance story edit components with tab icons and
 improved section panel field integration

---
 src/frontend/fields/section-panel-field.vue   | 13 ++++++++++-
 .../stories/components/story-edit-details.vue |  9 +++++++-
 .../components/story-edit-resources.vue       | 13 ++++++++++-
 .../components/story-edit-sections.vue        | 15 +++++++-----
 src/frontend/stories/story-edit.vue           | 23 +++++++++++++++----
 5 files changed, 59 insertions(+), 14 deletions(-)

diff --git a/src/frontend/fields/section-panel-field.vue b/src/frontend/fields/section-panel-field.vue
index 07e35b0e..9561e483 100644
--- a/src/frontend/fields/section-panel-field.vue
+++ b/src/frontend/fields/section-panel-field.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="subgrid ml-8">
+  <div class="subgrid">
     <ul
       v-for="(_listItem, index) in listItems"
       :key="index"
@@ -26,6 +26,13 @@
             >
               <Icon name="drag" class="h-5 w-5" />
             </button>
+            <span
+              v-if="headerIcon"
+              class="inline-flex shrink-0 items-center justify-center text-gray-400"
+              aria-hidden="true"
+            >
+              <Icon :name="headerIcon" class="h-5 w-5" />
+            </span>
             <button
               type="button"
               class="inline-flex items-center text-left text-sm font-semibold text-gray-800"
@@ -140,6 +147,10 @@ import Icon from '../shared/icon.vue';
 
 const props = defineProps({
   ...commonProps,
+  headerIcon: {
+    type: String,
+    default: '',
+  },
 });
 
 const emit = defineEmits<{
diff --git a/src/frontend/stories/components/story-edit-details.vue b/src/frontend/stories/components/story-edit-details.vue
index 286f75c7..b4298ebd 100644
--- a/src/frontend/stories/components/story-edit-details.vue
+++ b/src/frontend/stories/components/story-edit-details.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="space-y-8">
+  <div class="space-y-8 rounded-xl bg-white py-3">
     <StringField
       :field="{
         name: 'name',
@@ -100,4 +100,11 @@ import NumberField from '../../fields/number-field.vue';
 import TagField from '../../fields/tag-field.vue';
 import PanelField from '../../fields/panel-field.vue';
 import SelectField from '../../fields/select-field.vue';
+
+withDefaults(
+  defineProps<{
+    tabIcon?: string;
+  }>(),
+  { tabIcon: '' },
+);
 </script>
diff --git a/src/frontend/stories/components/story-edit-resources.vue b/src/frontend/stories/components/story-edit-resources.vue
index ea5ecb8f..bb257cd9 100644
--- a/src/frontend/stories/components/story-edit-resources.vue
+++ b/src/frontend/stories/components/story-edit-resources.vue
@@ -1,12 +1,23 @@
 <template>
   <div class="space-y-8">
-    <SectionPanelField :field="resourcesField" :is-nested="true" />
+    <SectionPanelField
+      :field="resourcesField"
+      :header-icon="tabIcon"
+      :is-nested="true"
+    />
   </div>
 </template>
 
 <script setup lang="ts">
 import SectionPanelField from '../../fields/section-panel-field.vue';
 
+withDefaults(
+  defineProps<{
+    tabIcon?: string;
+  }>(),
+  { tabIcon: '' },
+);
+
 const resourcesField = {
   label: 'Resource',
   name: 'resources',
diff --git a/src/frontend/stories/components/story-edit-sections.vue b/src/frontend/stories/components/story-edit-sections.vue
index 47e6c311..fd7fd113 100644
--- a/src/frontend/stories/components/story-edit-sections.vue
+++ b/src/frontend/stories/components/story-edit-sections.vue
@@ -1,16 +1,19 @@
 <template>
-  <div class="space-y-8 px-6">
-    <SectionPanelField
-      :field="sectionsField"
-      :is-nested="true"
-      class="px-8"
-    />
+  <div class="space-y-8">
+    <SectionPanelField :field="sectionsField" :header-icon="tabIcon" :is-nested="true" />
   </div>
 </template>
 
 <script setup lang="ts">
 import SectionPanelField from '../../fields/section-panel-field.vue';
 
+withDefaults(
+  defineProps<{
+    tabIcon?: string;
+  }>(),
+  { tabIcon: '' },
+);
+
 const sectionsField = {
   label: 'Section',
   name: 'sections',
diff --git a/src/frontend/stories/story-edit.vue b/src/frontend/stories/story-edit.vue
index 9c1adcef..a93e4d29 100644
--- a/src/frontend/stories/story-edit.vue
+++ b/src/frontend/stories/story-edit.vue
@@ -29,10 +29,19 @@
           },
         ]"
       >
-        <form class="space-y-8 py-4">
-          <StoryEditDetails v-if="currentStoryTab === 'Details'" />
-          <StoryEditSections v-if="currentStoryTab === 'Sections'" />
-          <StoryEditResources v-if="currentStoryTab === 'Resources'" />
+        <form class="space-y-8">
+          <StoryEditDetails
+            v-if="currentStoryTab === 'Details'"
+            :tab-icon="currentStoryTabIcon"
+          />
+          <StoryEditSections
+            v-if="currentStoryTab === 'Sections'"
+            :tab-icon="currentStoryTabIcon"
+          />
+          <StoryEditResources
+            v-if="currentStoryTab === 'Resources'"
+            :tab-icon="currentStoryTabIcon"
+          />
         </form>
 
         <ContentSidebar>
@@ -52,7 +61,7 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted, ref } from 'vue';
+import { computed, onMounted, ref } from 'vue';
 import { DateTime } from 'luxon';
 import { router } from '@inertiajs/vue3';
 
@@ -89,6 +98,10 @@ const storyEditTabs: NavigationPaneTab[] = [
 ];
 const currentStoryTab = ref('Details');
 
+const currentStoryTabIcon = computed(
+  () => storyEditTabs.find((t) => t.label === currentStoryTab.value)?.icon ?? '',
+);
+
 const onStoryTabChange = (tab: string) => {
   currentStoryTab.value = tab;
 };

From 5acabf3a523848e01ca3f3cb89e45f0efc90fafd Mon Sep 17 00:00:00 2001
From: Timothy Koech <timosville@gmail.com>
Date: Wed, 13 May 2026 17:03:55 +0300
Subject: [PATCH 10/22] feat: introduce sectionPanel widget to enhance story
 editing with structured card layouts and improved editor functionality

---
 src/frontend/index.story.md               | 54 +++++++++++++--
 src/frontend/stories/story-edit.story.vue | 80 +++++++++++++++--------
 2 files changed, 103 insertions(+), 31 deletions(-)

diff --git a/src/frontend/index.story.md b/src/frontend/index.story.md
index 6e13810d..27c07386 100644
--- a/src/frontend/index.story.md
+++ b/src/frontend/index.story.md
@@ -19,7 +19,7 @@ Following are the widgets that are currently implemented:
 
 [string](#string), [number](#number), [markdown](#markdown), [image](#image),
 [audio](#audio), [boolean](#boolean), [select](#select), [object](#object),
-[panel](#panel), [list](#list), [scripture](#scripture),
+[panel](#panel), [list](#list), [sectionPanel](#sectionpanel), [scripture](#scripture),
 [scriptureReference](#scripturereference), [date](#date), [dateRange](#daterange),
 [region](#region)
 
@@ -112,7 +112,7 @@ Remove the toolbar by passing an empty toolbar array. Example:
   name: 'excerpt',
   widget: 'markdown',
   minimal: true,
-  toobar: []
+  toolbar: []
 },
 ```
 
@@ -138,7 +138,7 @@ the component to the `toolbar` Example:
   name: 'excerpt',
   widget: 'markdown',
   minimal: true,
-  toobar: ['footnote']
+  toolbar: ['footnote']
 },
 ```
 
@@ -491,13 +491,59 @@ example:
     },
     {
       label: 'Passage',
-      name: 'paxssage',
+      name: 'passage',
       widget: 'scripture',
     },
   ]
 }
 ```
 
+## sectionPanel
+
+A repeating editor that renders a [SectionPanelField](#). Each item is a **card**: drag
+handle, optional row title, expand/collapse, and optional delete. Nested `fields` render
+inside the expanded body. Use this when editors should skim many groups as a stack of
+panels rather than a single long list.
+
+Specialised keys:
+
+- `fields`: required array of field specs for one row (same idea as [list](#list)).
+- `index`: optional dotted path into one row’s data (e.g. `scripture.reference`) used as
+  the **collapsed row label**. If omitted, the **first** field in `fields` supplies the
+  title string.
+- `isFlexible`: optional boolean; when `true`, row add/remove/reorder stays enabled in
+  translation workflows where list-like widgets are normally read-only.
+
+example (scripture + commentary rows):
+
+```ts
+{
+  label: 'Section',
+  name: 'sections',
+  widget: 'sectionPanel',
+  index: 'scripture.reference',
+  fields: [
+    { label: 'Scripture', name: 'scripture', widget: 'scripture' },
+    { label: 'Commentary', name: 'commentary', widget: 'markdown' },
+  ],
+}
+```
+
+example (title-driven rows, no `index`):
+
+```ts
+{
+  label: 'Resource',
+  name: 'resources',
+  widget: 'sectionPanel',
+  fields: [
+    { label: 'Title', name: 'title', widget: 'string' },
+    { label: 'URL', name: 'url', widget: 'string' },
+    { label: 'Summary', name: 'summary', widget: 'markdown' },
+  ],
+}
+```
+
 ## scripture
 
 A compound widget that renders a [ScriptureField](#). It has a Bible reference field that
diff --git a/src/frontend/stories/story-edit.story.vue b/src/frontend/stories/story-edit.story.vue
index 702ef2f4..1f9b2ea9 100644
--- a/src/frontend/stories/story-edit.story.vue
+++ b/src/frontend/stories/story-edit.story.vue
@@ -94,7 +94,9 @@ const loadNormalData: StoryHandler = ({ app, story, variant }): void => {
 <docs lang="md">
 # Story Edit
 
-A comprehensive page component for creating and editing stories in the CMS.
+Full-page story editor shell: header with navigation, tabbed main form, and a sidebar meta
+panel. It wires `SharedPageProps` into the shared store, loads the Pinia model from
+`story`, and registers media `providers` for upload widgets.
 
 ## Usage
 
@@ -106,36 +108,60 @@ A comprehensive page component for creating and editing stories in the CMS.
   :errors="errors"
   :bookmarks="bookmarks"
   :story="story"
+  :is-new="false"
   :providers="providers"
 />
 ```
 
 ## Props
 
-- `config` - CMS config from sharedProps
-- `user` - User data from sharedProps
-- `language` - Current language from sharedProps
-- `errors` - Error state from sharedProps
-- `bookmarks` - Available bookmarks array
-- `story` - Story data object with fields like name, coverImage, chapterLimit, tags, description
-- `providers` - Media providers for file uploads
-
-## Features
-
-- Form fields for story title, cover image, chapter limit, tags, and description
-- Image upload with file validation
-- Markdown editor for story description
-- Tag management
-- Meta box showing story metadata
-- Save and delete functionality
-- Responsive layout with sidebar
-- Error handling and validation
-- RTL language support
-
-## Variants
-
-- **Default** - Standard story editing interface
-- **New story** - Interface for creating a new story
-- **With errors** - Shows validation error states with ErrorControl
-- **RTL** - Right-to-left language support testing
+`StoryEdit` expects `StoryEditProps` merged with `SharedPageProps`:
+
+| Prop | Description |
+| --- | --- |
+| `config` | CMS UI config (`UiConfig`). |
+| `user` | Signed-in user (`AppUserInterface`). |
+| `language` | Active locale and direction (`LanguageSpecification`). |
+| `errors` | Optional server/validation errors map for the shared store. |
+| `bookmarks` | Optional bookmarks list for layout chrome. |
+| `story` | Story record and **bundle** fields consumed by the model store (see below). |
+| `isNew` | When `true`, shows the delete-story control in the header; still use a real or stub `story.id` for routes in demos. |
+| `providers` | Widget providers (e.g. image upload); passed to `useWidgetsStore().setProviders()`. |
+
+## Story bundle (model)
+
+On mount, `model.setModel(props.story)` runs. The **Details** tab edits the usual meta
+fields (`name`, `coverImage`, `chapterLimit`, `tags`, `description`). The **Sections** and
+**Resources** tabs render nested `sectionPanel` UIs
+backed by `sections` and `resources` arrays on the same object when those keys are present.
+
+Example shape (Histoire mocks in this file):
+
+- `sections` — list of `{ scripture, commentary }` rows (scripture widget + markdown).
+- `resources` — list of `{ title, url, summary }` rows (strings + markdown).
+
+Saving in this kit story only posts the **Details** payload (`name`, `coverImage`,
+`chapterLimit`, `tags`, `description`); extend `getPayload()` in `story-edit.vue` when
+your app persists nested lists too.
+
+## UI behavior
+
+- **Tabs** — Details, Sections, Resources (`NavigationPane`). The tab icon is passed into
+  the Sections/Resources subtrees as `tab-icon` and shown on each section panel row
+  (`headerIcon` on `SectionPanelField`).
+- **Title** — Header title tracks `name` from the model (falls back to “New Story”).
+- **Sidebar** — `MetaMetaBox` shows story type, chapter type, name, created/updated times;
+  `savedAt` refreshes after a successful save.
+- **Layout** — Two columns with sidebar when not single-column; otherwise a single centered
+  column (from `useSharedStore().isSingleColumn`).
+
+## Histoire variants
+
+| Variant | Purpose |
+| --- | --- |
+| **Default** | Existing story (`is-new: false`) with populated details, `sections` from `listModel`, and sample `resources`. |
+| **New story** | Create flow (`is-new: true`), `id: 0`, empty details and empty `sections` / `resources` arrays. |
+
+Each variant uses `setup-app="loadNormalData"` to set English LTR language and apply the
+shared `miniSidebar` story handler.
 </docs>

From 5953c5fa789b5408a8ed62c3f53f3d7e699a5a49 Mon Sep 17 00:00:00 2001
From: Jannie Theunissen <jannie@scoutredeem.co>
Date: Wed, 27 May 2026 12:00:07 +0200
Subject: [PATCH 11/22] Merge branch 'sco-2435-standard-story-templates' into
 sco-2195-widgets-and-screens-for-editing-story-metadata

---
 src/frontend/stories/story-edit.vue | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/frontend/stories/story-edit.vue b/src/frontend/stories/story-edit.vue
index a93e4d29..703d0d09 100644
--- a/src/frontend/stories/story-edit.vue
+++ b/src/frontend/stories/story-edit.vue
@@ -47,10 +47,10 @@
         <ContentSidebar>
           <template #meta-box>
             <MetaMetaBox
-              :story-type="story.storyType"
-              :chapter-type="story.chapterType"
-              :name="story.name"
-              :created-at="story.createdAt"
+              :story-type="props.model.storyType"
+              :chapter-type="props.model.chapterType"
+              :name="props.model.title"
+              :created-at="props.model.createdAt"
               :updated-at="savedAt"
             />
           </template>
@@ -86,10 +86,10 @@ shared.clearErrors();
 useWidgetsStore().setProviders(props.providers);
 
 const model = useModelStore();
-model.setModel(props.story);
+model.setModel(props.model);
 
-const title = ref(props.story.name);
-const savedAt = ref(props.story.updatedAt as unknown as string);
+const title = ref(props.model.title);
+const savedAt = ref(props.model.updatedAt as unknown as string);
 
 const storyEditTabs: NavigationPaneTab[] = [
   { label: 'Details', icon: 'book-open' },
@@ -113,7 +113,7 @@ onMounted(() => {
 });
 
 const deleteStory = () => {
-  router.delete(`/${shared.locale}/story/${props.story.id}`, {
+  router.delete(`/${shared.locale}/story/${props.model.id}`, {
     onSuccess: () => shared.addMessage(ResponseStatus.Confirmation, 'Story deleted'),
     onError: () => shared.addMessage(ResponseStatus.Failure, 'Error deleting story'),
   });
@@ -132,7 +132,7 @@ const getPayload = () => {
 const saveStory = () => {
   shared.clearErrors();
 
-  router.post(`/${shared.locale}/story/${props.story.id}`, getPayload(), {
+  router.post(`/${shared.locale}/story/${props.model.id}`, getPayload(), {
     preserveScroll: true,
 
     onSuccess: () => {

From 08594c8c646a9b9747cf6630fb8c2fd6a5567056 Mon Sep 17 00:00:00 2001
From: Jannie Theunissen <jannie@scoutredeem.co>
Date: Wed, 27 May 2026 13:23:35 +0200
Subject: [PATCH 12/22] refactor: export components temporarily needed in
 client

---
 src/frontend/index.ts | 18 ++++++++++++++----
 1 file changed, 14 insertions(+), 4 deletions(-)

diff --git a/src/frontend/index.ts b/src/frontend/index.ts
index 9043691f..1fc1132a 100644
--- a/src/frontend/index.ts
+++ b/src/frontend/index.ts
@@ -56,11 +56,15 @@ import UiPage from './ui/ui-page.vue';
 import UsersIndex from './team/users-index.vue';
 import VideoField from './fields/video-field.vue';
 
+import ContentSidebar from './shared/content-sidebar.vue';
+import NavigationPane from './shared/navigation-pane.vue';
+import SectionPanelField from './fields/section-panel-field.vue';
+
 export { createInertiaApp, usePage, useForm, router } from '@inertiajs/vue3';
 
 export * from './store/index';
 
-export { commonProps, helpScoutWidget } from './shared/helpers';
+export { commonProps, helpScoutWidget, formatDate } from './shared/helpers';
 
 export {
   ActionButton,
@@ -70,8 +74,6 @@ export {
   AudienceIndex,
   AudioField,
   BooleanField,
-  InvitationsEdit,
-  InvitationsIndex,
   ChapterPreview,
   ContentHeader,
   ContextMenu,
@@ -81,12 +83,15 @@ export {
   DateRangeField,
   DraftIndex,
   DropDown,
+  DropEdit,
   ForgotPassword,
   Icon,
   IconButton,
   ImageField,
   IndexCard,
   IndexFilter,
+  InvitationsEdit,
+  InvitationsIndex,
   LabelButton,
   ListField,
   ListSwitcher,
@@ -110,7 +115,6 @@ export {
   StoryEdit,
   StoryGallery,
   StoryIndex,
-  DropEdit,
   StreamGallery,
   StreamIndex,
   StringField,
@@ -120,4 +124,10 @@ export {
   UiPage,
   UsersIndex,
   VideoField,
+  // ---------------
+  // TODO: remove once landed
+  // ---------------
+  ContentSidebar,
+  NavigationPane,
+  SectionPanelField,
 };

From cba91e926d84b627e6b3a611926c1da697f4cca7 Mon Sep 17 00:00:00 2001
From: Jannie Theunissen <jannie@scoutredeem.co>
Date: Thu, 28 May 2026 09:37:04 +0200
Subject: [PATCH 13/22] increment: field widget enrichment number error state
 panel background colour

---
 src/frontend/fields/number-field.vue      |  4 +--
 src/frontend/fields/panel-field.story.vue | 10 ++++++++
 src/frontend/fields/panel-field.vue       |  9 ++++++-
 src/frontend/index.story.md               | 31 ++++++++++++++++++++++-
 src/types.ts                              |  1 +
 tailwind.config.js                        |  9 ++++++-
 6 files changed, 59 insertions(+), 5 deletions(-)

diff --git a/src/frontend/fields/number-field.vue b/src/frontend/fields/number-field.vue
index ccaef207..18407dd3 100644
--- a/src/frontend/fields/number-field.vue
+++ b/src/frontend/fields/number-field.vue
@@ -16,7 +16,7 @@
         v-model="modelValue"
         type="number"
         :readonly="props.isReadOnly"
-        class="w-24 input-field"
+        class="input-field w-24"
         :class="{
           'border-error': hasError,
           'text-gray-600': props.isReadOnly,
@@ -24,7 +24,7 @@
         }"
         @input="update"
       />
-      <p v-if="hasError" class="text-sm text-error">Please enter a number</p>
+      <p v-if="hasError" class="text-sm text-error">{{ errors[0] }}</p>
     </div>
   </div>
 </template>
diff --git a/src/frontend/fields/panel-field.story.vue b/src/frontend/fields/panel-field.story.vue
index dbac5d57..7090228a 100644
--- a/src/frontend/fields/panel-field.story.vue
+++ b/src/frontend/fields/panel-field.story.vue
@@ -31,6 +31,11 @@
       <PanelField :field="noLabel" />
       <ModelControl :model="panelModel" />
     </Variant>
+
+    <Variant title="Background Color" :setup-app="loadData">
+      <PanelField :field="withBackgroundColor" />
+      <ModelControl :model="panelModel" />
+    </Variant>
   </Story>
 </template>
 
@@ -86,6 +91,11 @@ const noLabel = {
   label: '',
 };
 
+const withBackgroundColor = {
+  ...spec,
+  backgroundColor: 'indigo-50',
+};
+
 const isRowWithNoLabel = {
   label: '',
   name: 'note',
diff --git a/src/frontend/fields/panel-field.vue b/src/frontend/fields/panel-field.vue
index 98aa91eb..5b5b1fcf 100644
--- a/src/frontend/fields/panel-field.vue
+++ b/src/frontend/fields/panel-field.vue
@@ -1,7 +1,8 @@
 <template>
   <div
     :class="[
-      'subgrid bg-white',
+      'subgrid',
+      panelBackgroundClass,
       {
         'p-8 pt-2': !field.isRow,
       },
@@ -64,6 +65,12 @@ const store = useWidgetsStore();
 const field = computed(() => props.field as FieldSpec);
 const fields = field.value.fields as FieldSpec[];
 
+const backgroundColor = computed(() => {
+  return field.value.backgroundColor ? field.value.backgroundColor : 'white';
+});
+
+const panelBackgroundClass = computed(() => `bg-${backgroundColor.value}`);
+
 const childRootPath = computed(() => props.rootPath);
 
 const widgetFor = (key: number) => {
diff --git a/src/frontend/index.story.md b/src/frontend/index.story.md
index 27c07386..1e50d07f 100644
--- a/src/frontend/index.story.md
+++ b/src/frontend/index.story.md
@@ -398,10 +398,11 @@ example:
 ## panel
 
 Suitable to group several primitive fields visually together.  
-Has two special properties
+Has these special properties:
 
 - `isRow` Optional boolean to specify that the panel item should be rendered side by side
   and not vertically aligned.
+- `backgroundColor` Optional string value that accepts a Tailwind color. Defaults to `white`
 - `fields` which is a required list with primitive fields that should be grouped together
   visually.  
   Note: The same visual effect can be achieved by wrapping primitive fields in an `object`
@@ -432,6 +433,34 @@ example:
 },
 ```
 
+With a custom background color:
+
+```ts
+{
+  widget: 'panel',
+  backgroundColor: 'indigo-50',
+  fields: [
+    {
+      label: 'Title',
+      name: 'title',
+      widget: 'string',
+    },
+  ],
+},
+```
+
+Note: You will have to whitelist any custom background colors in the project's
+`tailwind.config.cjs` file. For example, for the custom 'indigo-50' value used in the
+example above, you will have to include these variants:
+
+```js
+module.exports = {
+  content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
+  safelist: ['bg-indigo-50', 'indigo-50'], 👈
+  // rest of the Tailwind config
+};
+```
+
 For horizontal layouts
 
 ```ts
diff --git a/src/types.ts b/src/types.ts
index 5b8545c1..fb3b3585 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -54,6 +54,7 @@ export interface FieldSpec {
   extensions?: string[];
   maxSize?: number;
   tintColor?: string;
+  backgroundColor?: string;
   labelOrder?: string;
   folder?: string;
   collectionId?: string;
diff --git a/tailwind.config.js b/tailwind.config.js
index 864f1ca7..773989d7 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -7,7 +7,14 @@ export default {
   content: [
     "./src/frontend/**/*.{vue,js,ts,jsx,tsx}",
   ],
-  safelist: ['bg-green-400', 'green-400', 'focus:ring-green-400', 'cursor-default'],
+  safelist: [
+    'bg-green-400',
+    'green-400',
+    'focus:ring-green-400',
+    'cursor-default',
+    'bg-indigo-50',
+    'indigo-50',
+  ],
   theme: {
     extend: {
       colors: {

From 1d2e6023617b7a39db89d917c3c643859699dda2 Mon Sep 17 00:00:00 2001
From: Jannie Theunissen <jannie@scoutredeem.co>
Date: Thu, 28 May 2026 13:28:37 +0200
Subject: [PATCH 14/22] increment: string and markdown fields can specify
 placeholder text

---
 src/frontend/fields/markdown-field.story.vue |  6 ++++++
 src/frontend/fields/markdown-field.vue       |  1 +
 src/frontend/fields/string-field.story.vue   |  6 ++++++
 src/frontend/fields/string-field.vue         |  1 +
 src/frontend/index.story.md                  | 20 ++++++++++++++++++--
 src/frontend/stories/draft-index.vue         |  2 ++
 src/types.ts                                 |  1 +
 7 files changed, 35 insertions(+), 2 deletions(-)

diff --git a/src/frontend/fields/markdown-field.story.vue b/src/frontend/fields/markdown-field.story.vue
index 1e92653e..8fa41c9a 100644
--- a/src/frontend/fields/markdown-field.story.vue
+++ b/src/frontend/fields/markdown-field.story.vue
@@ -78,6 +78,12 @@
       <ModelControl :model="objectModel" />
       <LanguageControl />
     </Variant>
+
+    <Variant title="With placeholder" :setup-app="loadData">
+      <MarkdownField
+        :field="{ ...spec, placeholderText: 'Write your notes here…' }"
+      />
+    </Variant>
   </Story>
 </template>
 
diff --git a/src/frontend/fields/markdown-field.vue b/src/frontend/fields/markdown-field.vue
index a93f4af9..77731006 100644
--- a/src/frontend/fields/markdown-field.vue
+++ b/src/frontend/fields/markdown-field.vue
@@ -138,6 +138,7 @@ onMounted(async () => {
     spellChecker: false,
     nativeSpellcheck: false,
     status: false,
+    placeholder: field.value.placeholderText,
     // @ts-expect-error toolbar is not typed
     toolbar: toolbar.value,
   });
diff --git a/src/frontend/fields/string-field.story.vue b/src/frontend/fields/string-field.story.vue
index 8160d12c..28f99f6d 100644
--- a/src/frontend/fields/string-field.story.vue
+++ b/src/frontend/fields/string-field.story.vue
@@ -20,6 +20,12 @@
     <Variant title="Readonly" :setup-app="loadData">
       <StringField :field="spec" :is-read-only="true" />
     </Variant>
+
+    <Variant title="With placeholder">
+      <StringField
+        :field="{ ...spec, placeholderText: 'Enter your name' }"
+      />
+    </Variant>
   </Story>
 </template>
 
diff --git a/src/frontend/fields/string-field.vue b/src/frontend/fields/string-field.vue
index 5e5ee1d6..9bcc569a 100644
--- a/src/frontend/fields/string-field.vue
+++ b/src/frontend/fields/string-field.vue
@@ -20,6 +20,7 @@
         :readonly="props.isReadOnly"
         autocomplete="given-name"
         :value="modelValue"
+        :placeholder="field.placeholderText"
         class="input-field"
         :class="{
           'border-error': hasError,
diff --git a/src/frontend/index.story.md b/src/frontend/index.story.md
index 1e50d07f..40809e39 100644
--- a/src/frontend/index.story.md
+++ b/src/frontend/index.story.md
@@ -27,8 +27,22 @@ Following are the widgets that are currently implemented:
 
 ## string
 
-Suitable for short, single line plain text strings. It has only the common properties and
-renders a [StringField](#)
+Suitable for short, single line plain text strings and renders a [StringField](#). It has
+one optional special property:
+
+- `placeholderText` an optional string displayed as placeholder text in the input when the
+  field is empty
+
+Example:
+
+```ts
+{
+  label: 'Title',
+  name: 'title',
+  widget: 'string',
+  placeholderText: 'Enter a title',
+},
+```
 
 ## number
 
@@ -74,6 +88,8 @@ these optional extra properties:
   minimal height possible.
 - `noMarkup` a boolean value which is `false` by default. `noMarkup` sets the widget to
   not allow any markup and only display the text as plain text.
+- `placeholderText` an optional string displayed as placeholder text in the editor when the
+  field is empty
 - `toolbar` accepts an array of strings
   `['bold', 'italic', 'strikethrough', 'heading', 'heading-smaller', 'heading-bigger', 'heading-1', 'heading-2', 'heading-3', 'code', 'quote', 'unordered-list', 'ordered-list', 'clean-block', 'link', 'image', 'upload-image', 'table', 'horizontal-rule', 'preview', 'side-by-side', 'fullscreen', 'guide','undo', 'redo'`
   representing the formatting buttons to display.
diff --git a/src/frontend/stories/draft-index.vue b/src/frontend/stories/draft-index.vue
index 21cfddc0..7f89e659 100644
--- a/src/frontend/stories/draft-index.vue
+++ b/src/frontend/stories/draft-index.vue
@@ -195,6 +195,8 @@ const metaChapter = computed(
   () => `${padZero(props.draft.number)} of ${padZero(props.story.chapterLimit)}`,
 );
 
+// TODO: this might leak memory, because pinia does not auto-unsubscribe
+// outside an effect scope like inside onMounted or outside setup
 onMounted(() => {
   model.$subscribe(() => {
     if (isSettingErrors) {
diff --git a/src/types.ts b/src/types.ts
index fb3b3585..724aabcc 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -51,6 +51,7 @@ export interface FieldSpec {
   noMarkup?: boolean;
   toolbar?: string[];
   description?: string;
+  placeholderText?: string;
   extensions?: string[];
   maxSize?: number;
   tintColor?: string;

From 528b53062a55436a4bb7517438347ebcf7fb97a5 Mon Sep 17 00:00:00 2001
From: Jannie Theunissen <jannie@scoutredeem.co>
Date: Thu, 28 May 2026 16:20:44 +0200
Subject: [PATCH 15/22] feat: slugify

---
 src/backend/services/helpers.ts | 22 +++++++++++---------
 tests/unit/slugify.spec.ts      | 37 +++++++++++++++++++++++++++++++++
 2 files changed, 49 insertions(+), 10 deletions(-)
 create mode 100644 tests/unit/slugify.spec.ts

diff --git a/src/backend/services/helpers.ts b/src/backend/services/helpers.ts
index 2a377b54..5705fcfe 100644
--- a/src/backend/services/helpers.ts
+++ b/src/backend/services/helpers.ts
@@ -4,16 +4,6 @@ export {
   standardAudienceKeys,
 } from '../../shared/audience_helpers.js';
 
-// The model store on the client requires that the error messages
-// each have a "bundle" prefix
-export const bundledErrors = (plain: Record<string, string[]>): object => {
-  const result: Record<string, unknown> = {};
-  for (const key in plain) {
-    result[`bundle.${key}`] = plain[key];
-  }
-  return result;
-};
-
 export const getCredentialsFrom = (key: string): any => {
   const credentialsBase64 = process.env[key] || '';
   if (!credentialsBase64) {
@@ -28,3 +18,15 @@ export const getCredentialsFrom = (key: string): any => {
     throw new Error(`${key} environment variable is not a valid encoded JSON string.`);
   }
 };
+
+export const slugify = (text: string): string => {
+  return text
+    .normalize('NFD')
+    .replace(/[\u0300-\u036f]/g, '')
+    .toLowerCase()
+    .trim()
+    .replace(/[^\w\s-]/g, '')
+    .replace(/[\s_]+/g, '-')
+    .replace(/-+/g, '-')
+    .replace(/^-+|-+$/g, '');
+};
diff --git a/tests/unit/slugify.spec.ts b/tests/unit/slugify.spec.ts
new file mode 100644
index 00000000..936bd1b9
--- /dev/null
+++ b/tests/unit/slugify.spec.ts
@@ -0,0 +1,37 @@
+import { test, expect } from '@playwright/test';
+
+import { slugify } from '../../src/backend/services/helpers.js';
+
+test.describe('slugify', () => {
+  test('lowercases and hyphenates simple titles', () => {
+    expect(slugify('My Cool Story!')).toBe('my-cool-story');
+    expect(slugify('Genesis Devotional')).toBe('genesis-devotional');
+  });
+
+  test('collapses whitespace and underscores to a single hyphen', () => {
+    expect(slugify('My  Cool  Story')).toBe('my-cool-story');
+    expect(slugify('hello_world')).toBe('hello-world');
+    expect(slugify('hello\tworld')).toBe('hello-world');
+  });
+
+  test('transliterates accented characters', () => {
+    expect(slugify('Café Stories')).toBe('cafe-stories');
+    expect(slugify('Naïve')).toBe('naive');
+  });
+
+  test('trims leading and trailing whitespace and punctuation', () => {
+    expect(slugify(' Hello ')).toBe('hello');
+    expect(slugify('---Hello---')).toBe('hello');
+  });
+
+  test('preserves existing hyphens and numbers', () => {
+    expect(slugify('pre-existing')).toBe('pre-existing');
+    expect(slugify('Chapter 1')).toBe('chapter-1');
+  });
+
+  test('returns an empty string when nothing slug-worthy remains', () => {
+    expect(slugify('')).toBe('');
+    expect(slugify('!!!')).toBe('');
+    expect(slugify('   ')).toBe('');
+  });
+});

From 78d9d2bdad64246116f36a9c5ebc3399544c98bf Mon Sep 17 00:00:00 2001
From: Jannie Theunissen <jannie@scoutredeem.co>
Date: Tue, 2 Jun 2026 16:35:45 +0200
Subject: [PATCH 16/22] Merge branch 'main' into
 sco-2195-widgets-and-screens-for-editing-story-metadata

---
 src/backend/stubs/inertia/middleware.stub     | 5 +++++
 src/backend/stubs/tests/helpers/cms_mock.stub | 1 +
 2 files changed, 6 insertions(+)

diff --git a/src/backend/stubs/inertia/middleware.stub b/src/backend/stubs/inertia/middleware.stub
index eadc8b83..8e16a6f7 100644
--- a/src/backend/stubs/inertia/middleware.stub
+++ b/src/backend/stubs/inertia/middleware.stub
@@ -34,8 +34,13 @@ export default class InertiaMiddleware extends BaseInertiaMiddleware {
      */
     return {
       ...cmsShared,
+
+      // these errors triggers the router onError callback
       errors: ctx.inertia.always(getTrimmedValidationErrors(ctx)),
+
+      // these messages are received in the router onSuccess callback
       flash: ctx.inertia.always({
+        // resolve as follows: const flashError = (page.props as { flash?: { error?: string } }).flash?.error;
         error: error,
       }),
       // the rest of the shared props are injected by CmsService.sharedProps()
diff --git a/src/backend/stubs/tests/helpers/cms_mock.stub b/src/backend/stubs/tests/helpers/cms_mock.stub
index 0d61fbdb..0391ad22 100644
--- a/src/backend/stubs/tests/helpers/cms_mock.stub
+++ b/src/backend/stubs/tests/helpers/cms_mock.stub
@@ -13,6 +13,7 @@ export const testCmsConfig: CmsConfig = {
   helpUrl: 'https://example.com/help',
   hasAppPreview: false,
   microcopySource: '',
+  supportEmail: 'support@example.com',
   languages: [
     {
       locale: 'en',

From 8325c1d72ada888d211b377d9aa30bb5c1fb10fb Mon Sep 17 00:00:00 2001
From: Jannie Theunissen <jannie@scoutredeem.co>
Date: Wed, 3 Jun 2026 13:06:59 +0200
Subject: [PATCH 17/22] refactor: moved tags from stories to localisation table

---
 src/backend/factories/story_factory.ts              |  1 -
 src/backend/factories/story_localisation_factory.ts |  1 +
 src/backend/models/story.ts                         |  9 +++------
 src/backend/models/story_localisation.ts            | 12 ++++++++----
 src/backend/stubs/migrations/stories.stub           |  6 +++---
 src/types.ts                                        |  1 +
 6 files changed, 16 insertions(+), 14 deletions(-)

diff --git a/src/backend/factories/story_factory.ts b/src/backend/factories/story_factory.ts
index ea7ed9ab..28825c2d 100644
--- a/src/backend/factories/story_factory.ts
+++ b/src/backend/factories/story_factory.ts
@@ -5,7 +5,6 @@ import { StoryLocalisationFactory } from './story_localisation_factory.js';
 export const StoryFactory = factory
   .define(Story, async ({ faker }) => {
     return {
-      tags: faker.lorem.words(3).split(' ').join(','),
       chapterLimit: 10,
       storyType: 'Story',
       chapterType: 'Chapter',
diff --git a/src/backend/factories/story_localisation_factory.ts b/src/backend/factories/story_localisation_factory.ts
index a44043e5..a212f077 100644
--- a/src/backend/factories/story_localisation_factory.ts
+++ b/src/backend/factories/story_localisation_factory.ts
@@ -10,6 +10,7 @@ export const StoryLocalisationFactory = factory
       title: faker.lorem.sentence(),
       coverImage: faker.image.url(),
       description: faker.lorem.paragraph(),
+      tags: faker.lorem.words(3).split(' ').join(','),
       sections: [
         {
           id: faker.string.uuid(),
diff --git a/src/backend/models/story.ts b/src/backend/models/story.ts
index eabecd6e..6d3e0ec7 100644
--- a/src/backend/models/story.ts
+++ b/src/backend/models/story.ts
@@ -7,9 +7,6 @@ export default class Story extends BaseModel {
   @column({ isPrimary: true })
   declare id: number;
 
-  @column()
-  declare tags: string;
-
   @column()
   declare chapterLimit: number;
 
@@ -20,7 +17,7 @@ export default class Story extends BaseModel {
   declare chapterType: string;
 
   @column()
-  declare sectionType: string;
+  declare sectionType: string | null;
 
   @column()
   declare visibility: string;
@@ -38,10 +35,10 @@ export default class Story extends BaseModel {
   declare isPublished: boolean;
 
   @column.dateTime({ autoCreate: true })
-  declare createdAt: DateTime;
+  declare createdAt: DateTime | null;
 
   @column.dateTime({ autoCreate: true, autoUpdate: true })
-  declare updatedAt: DateTime;
+  declare updatedAt: DateTime | null;
 
   @hasMany(() => StoryLocalisation)
   declare localisations: HasMany<typeof StoryLocalisation>;
diff --git a/src/backend/models/story_localisation.ts b/src/backend/models/story_localisation.ts
index 01ebb1fc..ee8c8c4b 100644
--- a/src/backend/models/story_localisation.ts
+++ b/src/backend/models/story_localisation.ts
@@ -24,10 +24,13 @@ export default class StoryLocalisation extends BaseModel {
   declare title: string;
 
   @column()
-  declare coverImage: string;
+  declare coverImage: string | null;
 
   @column()
-  declare description: string;
+  declare description: string | null;
+
+  @column()
+  declare tags: string | null;
 
   @column({
     prepare: (value) => prepareJsonColumn(value),
@@ -45,16 +48,17 @@ export default class StoryLocalisation extends BaseModel {
   declare updatedBy: number | null;
 
   @column.dateTime({ autoCreate: true })
-  declare createdAt: DateTime;
+  declare createdAt: DateTime | null;
 
   @column.dateTime({ autoCreate: true, autoUpdate: true })
-  declare updatedAt: DateTime;
+  declare updatedAt: DateTime | null;
 }
 
 export const emptyTranslation: Partial<StoryLocalisation> = {
   title: '',
   coverImage: '',
   description: '',
+  tags: '',
   sections: [],
   resources: [],
 };
diff --git a/src/backend/stubs/migrations/stories.stub b/src/backend/stubs/migrations/stories.stub
index e25aff2e..33e13160 100644
--- a/src/backend/stubs/migrations/stories.stub
+++ b/src/backend/stubs/migrations/stories.stub
@@ -20,8 +20,6 @@ export default class extends BaseSchema {
         .notNullable()
         .comment('unique handle for referencing the story');
 
-      table.string('tags').nullable().comment('comma-separated list of tags');
-
       table
         .integer('chapter_limit')
         .notNullable()
@@ -73,7 +71,7 @@ export default class extends BaseSchema {
     });
 
     // ---------------------------------------
-    // story_meta
+    // story_localisations
     // ---------------------------------------
     this.schema.createTable(this.localTableName, (table) => {
       table.increments('id');
@@ -88,6 +86,8 @@ export default class extends BaseSchema {
 
       table.text('description').nullable();
 
+      table.string('tags').nullable().comment('comma-separated list of tags');
+
       table
         .jsonb('sections')
         .notNullable()
diff --git a/src/types.ts b/src/types.ts
index 980cebd9..077d5cd2 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -287,6 +287,7 @@ export interface StoryEditProps {
     title: string;
     coverImage: string;
     description: string;
+    tags: string | null;
     sections: StorySection[];
     resources: string[];
   };

From 043881d0a40b5f8d5febe784a712b543221dfac5 Mon Sep 17 00:00:00 2001
From: Jannie Theunissen <jannie@scoutredeem.co>
Date: Wed, 3 Jun 2026 13:10:53 +0200
Subject: [PATCH 18/22] feat: story store route

---
 src/backend/stubs/routes/stories.stub | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/backend/stubs/routes/stories.stub b/src/backend/stubs/routes/stories.stub
index 7e626f89..47561509 100644
--- a/src/backend/stubs/routes/stories.stub
+++ b/src/backend/stubs/routes/stories.stub
@@ -11,6 +11,7 @@ export default () => {
   // stories
   router.get(':locale/story', [StoriesController, 'index']);
   router.get(':locale/story/create', [StoriesController, 'create']);
+  router.post(':locale/story', [StoriesController, 'store']);
   router.get(':locale/story/:storyId/edit', [StoriesController, 'edit']);
   router.delete(':locale/story/:storyId', [StoriesController, 'delete']);
   router.post(':locale/story/:storyId', [StoriesController, 'update']);

From e441f2d674bec1b781fedb9035cb8fda24e1578f Mon Sep 17 00:00:00 2001
From: Jannie Theunissen <jannie@scoutredeem.co>
Date: Wed, 3 Jun 2026 13:27:45 +0200
Subject: [PATCH 19/22] fix: linting on sories_service

---
 src/backend/services/story_service.ts | 29 ++++++++++++++-------------
 1 file changed, 15 insertions(+), 14 deletions(-)

diff --git a/src/backend/services/story_service.ts b/src/backend/services/story_service.ts
index 964015b8..5383f14a 100644
--- a/src/backend/services/story_service.ts
+++ b/src/backend/services/story_service.ts
@@ -54,7 +54,6 @@ export class StoryService {
     return {
       model: {
         id: story.id,
-        tags: story.tags ?? null,
         chapterLimit: story.chapterLimit,
         storyType: story.storyType,
         chapterType: story.chapterType,
@@ -63,8 +62,8 @@ export class StoryService {
         slug: story.slug,
         template: story.template,
         isPublished: story.isPublished,
-        createdAt: story.createdAt.toISO()!,
-        updatedAt: story.updatedAt.toISO()!,
+        createdAt: story.createdAt?.toISO() ?? '',
+        updatedAt: story.updatedAt?.toISO() ?? '',
         ...this.localisationFields(target),
       },
       source: this.localisationFields(source),
@@ -136,12 +135,12 @@ export class StoryService {
       return {
         id: story.id,
         name: local.title,
-        description: local.description,
-        coverImage: local.coverImage,
+        description: local.description ?? '',
+        coverImage: local.coverImage ?? '',
         chapterLimit: story.chapterLimit,
         isPublished: story.isPublished,
-        createdAt: story.createdAt.toISO()!,
-        updatedAt: story.updatedAt.toISO()!,
+        createdAt: story.createdAt?.toISO() ?? '',
+        updatedAt: story.updatedAt?.toISO() ?? '',
         draftCount: index?.draftsList.length ?? 0,
       };
     });
@@ -199,7 +198,7 @@ export class StoryService {
     return {
       id: story.id,
       name: localisation.title,
-      coverImage: localisation.coverImage,
+      coverImage: localisation.coverImage ?? '',
       chapterLimit: story.chapterLimit,
       chapterType: story.chapterType,
       storyType: story.storyType,
@@ -210,19 +209,21 @@ export class StoryService {
   }
 
   private localisationFields(local: {
-    title?: string;
-    coverImage?: string;
-    description?: string;
-    sections?: StoryEditProps['model']['sections'];
-    resources?: string[];
+    title?: string | null;
+    coverImage?: string | null;
+    description?: string | null;
+    tags?: string | null;
+    sections?: StoryEditProps['model']['sections'] | null;
+    resources?: string[] | null;
   }): Pick<
     StoryEditProps['model'],
-    'title' | 'coverImage' | 'description' | 'sections' | 'resources'
+    'title' | 'coverImage' | 'description' | 'tags' | 'sections' | 'resources'
   > {
     return {
       title: local.title ?? '',
       coverImage: local.coverImage ?? '',
       description: local.description ?? '',
+      tags: local.tags ?? '',
       sections: local.sections ?? [],
       resources: local.resources ?? [],
     };

From ed6c0268b7d699bec26a8b01668511fdbbb39c67 Mon Sep 17 00:00:00 2001
From: Jannie Theunissen <jannie@scoutredeem.co>
Date: Wed, 3 Jun 2026 15:01:52 +0200
Subject: [PATCH 20/22] increment: export pill button

---
 src/frontend/index.ts |  4 +++-
 src/types.ts          | 33 ++++++++++++++++++++++++---------
 2 files changed, 27 insertions(+), 10 deletions(-)

diff --git a/src/frontend/index.ts b/src/frontend/index.ts
index 2e60b558..76c24b59 100644
--- a/src/frontend/index.ts
+++ b/src/frontend/index.ts
@@ -23,6 +23,7 @@ import ImageField from './fields/image-field.vue';
 import IndexCard from './stories/components/index-card.vue';
 import IndexFilter from './shared/index-filter.vue';
 import LabelButton from './shared/label-button.vue';
+import PillButton from './shared/pill-button.vue';
 import LanguagesEdit from './settings/languages/languages-edit.vue';
 import SettingsIndex from './settings/settings-index.vue';
 import ListField from './fields/list-field.vue';
@@ -96,7 +97,6 @@ export {
   InvitationsIndex,
   LabelButton,
   LanguagesEdit,
-  SettingsIndex,
   ListField,
   ListSwitcher,
   Login,
@@ -110,11 +110,13 @@ export {
   PagesIndex,
   PanelField,
   Pagination,
+  PillButton,
   PublicLayout,
   RegionField,
   ResetPassword,
   ScriptureField,
   SelectField,
+  SettingsIndex,
   StatusTag,
   StoryEdit,
   StoryGallery,
diff --git a/src/types.ts b/src/types.ts
index 077d5cd2..009dfdea 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -263,11 +263,32 @@ export interface JournaStoryEditProps {
   isNew: boolean;
 }
 
+export interface StoryCreateProps {
+  model: {
+    title: string;
+    coverImage: string;
+    description: string;
+    chapterLimit: number;
+    tags: string | null;
+    storyType: string;
+    chapterType: string;
+    sectionType: string | null;
+    visibility: string;
+    slug: string | null;
+    template: string;
+  };
+  templates: BundleTemplate[];
+  providers: Providers;
+}
+
 export interface StoryEditProps {
   model: {
     id: number;
-    tags: string | null;
+    title: string;
+    coverImage: string;
+    description: string;
     chapterLimit: number;
+    tags: string | null;
     storyType: string;
     chapterType: string;
     sectionType: string | null;
@@ -275,23 +296,17 @@ export interface StoryEditProps {
     slug: string;
     template: string;
     isPublished: boolean;
-    createdAt: string;
-    updatedAt: string;
-    title: string;
-    coverImage: string;
-    description: string;
     sections: StorySection[];
     resources: string[];
   };
-  source: {
+  source?: {
     title: string;
     coverImage: string;
     description: string;
-    tags: string | null;
     sections: StorySection[];
     resources: string[];
   };
-  isNew: boolean;
+  hasNoContent: boolean;
   providers: Providers;
 }
 

From d6413c49918a831272150c5d562604457677c386 Mon Sep 17 00:00:00 2001
From: Jannie Theunissen <jannie@scoutredeem.co>
Date: Wed, 3 Jun 2026 15:17:21 +0200
Subject: [PATCH 21/22] increment: export exceptions

---
 .../exceptions/story_delete_exception.ts      |  17 +++
 src/backend/index.ts                          |   1 +
 src/backend/services/story_service.ts         | 121 +++++++++++++--
 src/frontend/stories/story-edit.vue           | 144 +-----------------
 4 files changed, 132 insertions(+), 151 deletions(-)
 create mode 100644 src/backend/exceptions/story_delete_exception.ts

diff --git a/src/backend/exceptions/story_delete_exception.ts b/src/backend/exceptions/story_delete_exception.ts
new file mode 100644
index 00000000..c0ddad74
--- /dev/null
+++ b/src/backend/exceptions/story_delete_exception.ts
@@ -0,0 +1,17 @@
+import { Exception } from '@adonisjs/core/exceptions';
+
+export default class StoryDeleteException extends Exception {
+  static status = 500;
+  static code = 'E_STORY_DELETE_BLOCKED';
+
+  readonly messages: string[];
+
+  constructor(messages: string[]) {
+    super(messages.join('\n'));
+    this.messages = messages;
+  }
+
+  public get reasons(): string {
+    return this.messages.join(' | ');
+  }
+}
diff --git a/src/backend/index.ts b/src/backend/index.ts
index 270a6026..6bd64a96 100644
--- a/src/backend/index.ts
+++ b/src/backend/index.ts
@@ -3,6 +3,7 @@ export * from '../types.js';
 export { configure } from './configure.js';
 export { stubsRoot } from './stubs/main.js';
 export * from './define_config.js';
+export { default as StoryDeleteException } from './exceptions/story_delete_exception.js';
 export { default as Activity } from './models/activity.js';
 export { default as Invitation } from './models/invitation.js';
 export { default as Chapter } from './models/chapter.js';
diff --git a/src/backend/services/story_service.ts b/src/backend/services/story_service.ts
index 5383f14a..a93f6859 100644
--- a/src/backend/services/story_service.ts
+++ b/src/backend/services/story_service.ts
@@ -1,8 +1,11 @@
 import config from '@adonisjs/core/services/config';
 import { errors, HttpContext } from '@adonisjs/core/http';
+import db from '@adonisjs/lucid/services/db';
+import StoryDeleteException from '../exceptions/story_delete_exception.js';
+import Chapter from '../models/chapter.js';
 import Index from '../models/index.js';
 import Story from '../models/story.js';
-import { emptyTranslation } from '../models/story_localisation.js';
+import StoryLocalisation, { emptyTranslation } from '../models/story_localisation.js';
 import type {
   CmsConfig,
   FieldSpec,
@@ -11,7 +14,10 @@ import type {
   StorySpec,
   StoryVersion,
   Providers,
+  StoryCreateProps,
 } from '../../types.js';
+import Draft from '../models/draft.js';
+import { slugify } from './helpers.js';
 
 export class StoryService {
   public constructor(protected readonly config: CmsConfig) {}
@@ -26,6 +32,93 @@ export class StoryService {
     return { storyId: Number.parseInt(ctx.params.storyId), locale: ctx.params.locale };
   }
 
+  public async blockingPublishMessages(story: Story): Promise<string[]> {
+    // return ['Story not found.', 'Story is published.', 'Story has content.'];
+    const collected: string[] = [];
+    // source language chapter count
+    const sourceChapters = await Chapter.query()
+      .where('storyId', story.id)
+      .where('locale', this.config.languages[0].locale);
+    const missingChapters = story.chapterLimit - (sourceChapters?.length ?? 0);
+    if (missingChapters > 0)
+      collected.push(
+        `You need to add ${missingChapters} more ${story.chapterType}s to your ${story.storyType}.`,
+      );
+
+    return collected;
+  }
+
+  async blockingDeleteMessages(storyId: number): Promise<string[]> {
+    // return ['Story not found.', 'Story is published.', 'Story has content.'];
+    const collected: string[] = [];
+    const story = await Story.query().where('id', storyId).first();
+    if (!story) collected.push('Story not found.');
+    if (story?.isPublished) collected.push('Story is published.');
+
+    const chapters = await Chapter.query().where('storyId', storyId);
+    if (chapters.length > 0) collected.push('Story has published chapters.');
+
+    return collected;
+  }
+
+  public async delete(storyId: number) {
+    const messages = await this.blockingDeleteMessages(storyId);
+    if (messages.length > 0) throw new StoryDeleteException(messages);
+    // cascade delete drafts, chapters and index
+    await db.transaction(async (trx) => {
+      await Draft.query({ client: trx }).where('storyId', storyId).delete();
+      await Chapter.query({ client: trx }).where('storyId', storyId).delete();
+      await Index.query({ client: trx }).where('storyId', storyId).delete();
+      await StoryLocalisation.query({ client: trx }).where('storyId', storyId).delete();
+      await Story.query({ client: trx }).where('id', storyId).delete();
+    });
+  }
+
+  public async createProps(ctx: HttpContext): Promise<StoryCreateProps | undefined> {
+    // ready?
+    if (!this.config.storyTemplates.length) return undefined;
+    const params = this.paramsFromPath(ctx);
+    if (params?.locale !== this.config.languages[0].locale) return undefined;
+
+    // set
+    const template = this.config.storyTemplates[0].id;
+
+    const firstLocalisation = await StoryLocalisation.query()
+      .where('locale', this.config.languages[0].locale)
+      .first();
+
+    const target = firstLocalisation
+      ? {
+          ...emptyTranslation,
+          coverImage: firstLocalisation?.coverImage,
+        }
+      : emptyTranslation;
+
+    // go!
+    return {
+      model: {
+        chapterLimit: 10,
+        storyType: 'Story',
+        chapterType: 'Chapter',
+        sectionType: null,
+        visibility: 'public',
+        slug: null,
+        template,
+        ...this.localisationFields(target),
+      },
+      templates: this.config.storyTemplates,
+      providers: config.get<Providers>('providers')!,
+    };
+  }
+
+  public async uniqueSlug(title: string): Promise<string> {
+    const slug = slugify(title);
+    const story = await Story.query().where('slug', slug).first();
+    if (story)
+      return this.uniqueSlug(title + '-' + Math.random().toString(36).substring(2, 15));
+    return slug;
+  }
+
   public async editProps(ctx: HttpContext): Promise<StoryEditProps | undefined> {
     const params = this.paramsFromPath(ctx);
     if (!params) return undefined;
@@ -47,9 +140,19 @@ export class StoryService {
     const target =
       story.localisations.find((localisation) => localisation.locale === locale) ??
       emptyTranslation;
-    const source =
-      story.localisations.find((localisation) => localisation.locale === sourceLocale) ??
-      emptyTranslation;
+
+    let sourceSection = {};
+    if (locale !== sourceLocale) {
+      const source =
+        story.localisations.find(
+          (localisation) => localisation.locale === sourceLocale,
+        ) ?? emptyTranslation;
+      sourceSection = {
+        source: this.localisationFields(source),
+      };
+
+      target.coverImage = source.coverImage;
+    }
 
     return {
       model: {
@@ -62,12 +165,10 @@ export class StoryService {
         slug: story.slug,
         template: story.template,
         isPublished: story.isPublished,
-        createdAt: story.createdAt?.toISO() ?? '',
-        updatedAt: story.updatedAt?.toISO() ?? '',
         ...this.localisationFields(target),
       },
-      source: this.localisationFields(source),
-      isNew: hasNoContent,
+      ...sourceSection,
+      hasNoContent,
       providers: config.get<Providers>('providers')!,
     };
   }
@@ -193,7 +294,7 @@ export class StoryService {
     return this.specFrom(story);
   }
 
-  protected specFrom(story: Story): StorySpec {
+  public specFrom(story: Story): StorySpec {
     const localisation = story.localisations[0] ?? emptyTranslation;
     return {
       id: story.id,
@@ -223,7 +324,7 @@ export class StoryService {
       title: local.title ?? '',
       coverImage: local.coverImage ?? '',
       description: local.description ?? '',
-      tags: local.tags ?? '',
+      tags: local.tags ?? null,
       sections: local.sections ?? [],
       resources: local.resources ?? [],
     };
diff --git a/src/frontend/stories/story-edit.vue b/src/frontend/stories/story-edit.vue
index 703d0d09..1397c7d5 100644
--- a/src/frontend/stories/story-edit.vue
+++ b/src/frontend/stories/story-edit.vue
@@ -1,149 +1,11 @@
 <template>
   <AppLayout>
     <template #header>
-      <ContentHeader :title="title || 'New Story'">
-        <template #actions>
-          <ActionButton icon="info" @tap="shared.setShowMetaBox(!shared.showMetaBox)" />
-          <ActionButton v-if="isNew" icon="trash" @tap="deleteStory" />
-          <LabelButton label="Save" @tap="saveStory" />
-        </template>
-        <template #extra-actions>
-          <div class="pb-6">
-            <NavigationPane
-              :tabs="storyEditTabs"
-              :current-tab="currentStoryTab"
-              @change="onStoryTabChange"
-            />
-          </div>
-        </template>
-      </ContentHeader>
+      <ContentHeader title="Edit Story"> </ContentHeader>
     </template>
 
-    <section>
-      <div
-        :class="[
-          'relative grid',
-          {
-            'grid-cols-[1fr_375px] gap-x-4': !shared.isSingleColumn,
-            'mx-auto max-w-4xl grid-cols-1': shared.isSingleColumn,
-          },
-        ]"
-      >
-        <form class="space-y-8">
-          <StoryEditDetails
-            v-if="currentStoryTab === 'Details'"
-            :tab-icon="currentStoryTabIcon"
-          />
-          <StoryEditSections
-            v-if="currentStoryTab === 'Sections'"
-            :tab-icon="currentStoryTabIcon"
-          />
-          <StoryEditResources
-            v-if="currentStoryTab === 'Resources'"
-            :tab-icon="currentStoryTabIcon"
-          />
-        </form>
-
-        <ContentSidebar>
-          <template #meta-box>
-            <MetaMetaBox
-              :story-type="props.model.storyType"
-              :chapter-type="props.model.chapterType"
-              :name="props.model.title"
-              :created-at="props.model.createdAt"
-              :updated-at="savedAt"
-            />
-          </template>
-        </ContentSidebar>
-      </div>
-    </section>
+    <section>Coming Soon...</section>
   </AppLayout>
 </template>
 
-<script setup lang="ts">
-import { computed, onMounted, ref } from 'vue';
-import { DateTime } from 'luxon';
-import { router } from '@inertiajs/vue3';
-
-import type { NavigationPaneTab, SharedPageProps } from '../../types';
-import AppLayout from '../shared/app-layout.vue';
-import ContentHeader from '../shared/content-header.vue';
-import { useSharedStore, useWidgetsStore, useModelStore } from '../store';
-import { ResponseStatus, StoryEditProps } from '../../types';
-import LabelButton from '../shared/label-button.vue';
-import MetaMetaBox from './components/meta-meta-box.vue';
-import ActionButton from '../shared/action-button.vue';
-import ContentSidebar from '../shared/content-sidebar.vue';
-import StoryEditDetails from './components/story-edit-details.vue';
-import StoryEditResources from './components/story-edit-resources.vue';
-import StoryEditSections from './components/story-edit-sections.vue';
-import NavigationPane from '../shared/navigation-pane.vue';
-
-const props = defineProps<StoryEditProps & SharedPageProps>();
-const shared = useSharedStore();
-shared.setFromProps(props);
-shared.clearErrors();
-useWidgetsStore().setProviders(props.providers);
-
-const model = useModelStore();
-model.setModel(props.model);
-
-const title = ref(props.model.title);
-const savedAt = ref(props.model.updatedAt as unknown as string);
-
-const storyEditTabs: NavigationPaneTab[] = [
-  { label: 'Details', icon: 'book-open' },
-  { label: 'Sections', icon: 'list-bullet' },
-  { label: 'Resources', icon: 'folder' },
-];
-const currentStoryTab = ref('Details');
-
-const currentStoryTabIcon = computed(
-  () => storyEditTabs.find((t) => t.label === currentStoryTab.value)?.icon ?? '',
-);
-
-const onStoryTabChange = (tab: string) => {
-  currentStoryTab.value = tab;
-};
-
-onMounted(() => {
-  model.$subscribe(() => {
-    title.value = model.getField('name', 'New Story');
-  });
-});
-
-const deleteStory = () => {
-  router.delete(`/${shared.locale}/story/${props.model.id}`, {
-    onSuccess: () => shared.addMessage(ResponseStatus.Confirmation, 'Story deleted'),
-    onError: () => shared.addMessage(ResponseStatus.Failure, 'Error deleting story'),
-  });
-};
-
-const getPayload = () => {
-  return {
-    name: model.getField('name', ''),
-    coverImage: model.getField('coverImage', ''),
-    chapterLimit: model.getField('chapterLimit', 0),
-    tags: model.getField('tags', ''),
-    description: model.getField('description', ''),
-  };
-};
-
-const saveStory = () => {
-  shared.clearErrors();
-
-  router.post(`/${shared.locale}/story/${props.model.id}`, getPayload(), {
-    preserveScroll: true,
-
-    onSuccess: () => {
-      savedAt.value = DateTime.now().toISO() ?? '';
-      shared.addMessage(ResponseStatus.Confirmation, 'Story saved successfully');
-    },
-
-    onError: (errors) => {
-      shared.setErrors(errors);
-      shared.addMessage(ResponseStatus.Failure, 'Error saving story');
-    },
-  });
-};
-</script>
+<script setup lang="ts"></script>

From db46533863da70a4890cef200546bd3b68bcde07 Mon Sep 17 00:00:00 2001
From: Jannie Theunissen <jannie@scoutredeem.co>
Date: Fri, 19 Jun 2026 17:01:57 +0200
Subject: [PATCH 22/22] increment: screen props

---
 src/backend/services/story_service.ts | 44 +++++++++++++++++++++++++++
 src/types.ts                          |  8 ++---
 2 files changed, 48 insertions(+), 4 deletions(-)

diff --git a/src/backend/services/story_service.ts b/src/backend/services/story_service.ts
index 6ccf6c13..dd2c8db0 100644
--- a/src/backend/services/story_service.ts
+++ b/src/backend/services/story_service.ts
@@ -1,6 +1,7 @@
 import config from '@adonisjs/core/services/config';
 import { errors, HttpContext } from '@adonisjs/core/http';
 import db from '@adonisjs/lucid/services/db';
+import { randomUUID } from 'crypto';
 import StoryDeleteException from '../exceptions/story_delete_exception.js';
 import Draft from '../models/draft.js';
 import Chapter from '../models/chapter.js';
@@ -16,6 +17,7 @@ import type {
   StoryVersion,
   Providers,
   StoryCreateProps,
+  StorySection,
 } from '../../types.js';
 import { slugify } from './helpers.js';
 
@@ -253,6 +255,42 @@ export class StoryService {
     });
   }
 
+  public async prepSections(
+    version: StoryVersion,
+    sections?: PostedSection[],
+  ): Promise<StorySection[]> {
+    if (!sections) return [];
+    const sourceLocale = this.config.languages[0].locale;
+    if (version.locale === sourceLocale) return this.sourceSections(sections);
+
+    const sourceLocalisation = await StoryLocalisation.query()
+      .where('storyId', version.storyId)
+      .where('locale', sourceLocale)
+      .first();
+
+    const source = sourceLocalisation?.sections ?? [];
+    if (!source.length) return [];
+
+    return source.map((section, index) => {
+      const posted = sections[index];
+      return {
+        id: section.id,
+        title: posted?.title ?? '',
+        description: posted?.description ?? '',
+      };
+    });
+  }
+
+  sourceSections(sections: PostedSection[]): StorySection[] {
+    return sections.map((section) => {
+      return {
+        id: section.id?.trim() ? section.id : randomUUID(),
+        title: section.title,
+        description: section.description ?? '',
+      };
+    });
+  }
+
   private async hasNoContent(id: number): Promise<boolean> {
     const index = await Index.query().where('storyId', id).first();
     if (index === null) return true;
@@ -346,3 +384,9 @@ export class StoryService {
     return template.fields;
   }
 }
+
+export type PostedSection = {
+  id?: string;
+  title: string;
+  description?: string;
+};
diff --git a/src/types.ts b/src/types.ts
index 07de87ba..bc8ee2b4 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -263,7 +263,7 @@ export interface JournaStoryEditProps {
   isNew: boolean;
 }
 
-export interface StoryCreateProps {
+export type StoryCreateProps = {
   model: {
     title: string;
     coverImage: string;
@@ -279,9 +279,9 @@ export interface StoryCreateProps {
   };
   templates: BundleTemplate[];
   providers: Providers;
-}
+};
 
-export interface StoryEditProps {
+export type StoryEditProps = {
   model: {
     id: number;
     title: string;
@@ -308,7 +308,7 @@ export interface StoryEditProps {
   };
   hasNoContent: boolean;
   providers: Providers;
-}
+};
 
 export interface StoryIndexProps {
   index: IndexReadyItem[];