From 63ed75f6e0cb0b3eee2d5cf1f763bbe2c4c5265b Mon Sep 17 00:00:00 2001
From: Timothy Koech <timosville@gmail.com>
Date: Mon, 23 Feb 2026 09:35:42 +0300
Subject: [PATCH 01/12] feat: enhance flat-list component with flexible button
 layout

---
 src/frontend/fields/list/flat-list.vue        |  33 +-
 .../stories/translation-index.story.vue       |  23 ++
 src/frontend/test/mocks.ts                    | 326 ++++++++++++++++++
 3 files changed, 372 insertions(+), 10 deletions(-)

diff --git a/src/frontend/fields/list/flat-list.vue b/src/frontend/fields/list/flat-list.vue
index 7fb3cab..dda9bc5 100644
--- a/src/frontend/fields/list/flat-list.vue
+++ b/src/frontend/fields/list/flat-list.vue
@@ -21,16 +21,29 @@
       :style="{ gridRow: `span ${totalSpan}` }"
     >
       <template v-if="!isEmpty(index)">
-        <div
-          v-if="canMutate"
-          class="absolute right-0 mr-3 cursor-pointer text-gray-500"
-          @click="emit('removeSet', index)"
-        >
-          <Icon
-            :name="field.isFlexible && canMutate ? 'minus' : 'trash'"
-            :class="field.isFlexible && canMutate ? 'size-5' : 'h-auto w-auto'"
-          />
-        </div>
+        <template v-if="canMutate">
+          <button
+            v-if="field.isFlexible"
+            type="button"
+            class="absolute z-[1] flex h-10 w-10 cursor-pointer items-center justify-center rounded-full border bg-white text-gray-500"
+            :style="{ right: `-${shared.sourceSectionWidth}px` }"
+            @click="emit('removeSet', index)"
+          >
+            <span v-if="!props.isReadOnly" class="flex h-10 w-10 items-center justify-center">
+              <Icon name="minus" class="size-5" />
+            </span>
+          </button>
+          <button
+            v-else
+            type="button"
+            class="absolute right-0 z-[1] flex h-10 w-10 cursor-pointer items-center justify-center rounded-full border bg-white text-gray-500"
+            @click="emit('removeSet', index)"
+          >
+            <span v-if="!props.isReadOnly" class="flex h-10 w-10 items-center justify-center">
+              <Icon name="trash" class="h-auto w-auto" />
+            </span>
+          </button>
+        </template>
 
         <li
           v-for="(item, i) in fields"
diff --git a/src/frontend/stories/translation-index.story.vue b/src/frontend/stories/translation-index.story.vue
index c47b8db..96d6fb9 100644
--- a/src/frontend/stories/translation-index.story.vue
+++ b/src/frontend/stories/translation-index.story.vue
@@ -84,6 +84,28 @@
         :exclude="[]"
       />
     </Variant>
+    <Variant title="AFS Course" :setup-app="miniSidebar">
+      <TranslationIndex
+        :meta="sharedProps.meta"
+        :user="sharedProps.user"
+        :language="spanish"
+        :languages="sharedProps.languages"
+        :errors="sharedProps.errors"
+        :draft="afsCourseStory.draft"
+        :bundle="afsCourseStory.bundle"
+        :source="afsCourseStory.source"
+        :providers="{}"
+        :last-published="'2021-10-10T14:48:00.000000Z'"
+        :story="{
+          ...afsCourseStory.story,
+          fields: afsCourseStory.story.fields as FieldSpec[],
+          chapterLimit: 16,
+        }"
+        :has-edit-review="false"
+        :bookmarks="sharedProps.bookmarks"
+        :exclude="[]"
+      />
+    </Variant>
   </Story>
 </template>
 
@@ -99,6 +121,7 @@ import {
   alMassira,
   flexibleListStory,
   alphaCourseStory,
+  afsCourseStory,
 } from '../test/mocks';
 import { FieldSpec } from '../../types';
 
diff --git a/src/frontend/test/mocks.ts b/src/frontend/test/mocks.ts
index 4faa93b..ef4cbd2 100644
--- a/src/frontend/test/mocks.ts
+++ b/src/frontend/test/mocks.ts
@@ -2199,6 +2199,7 @@ const alphaFields = [
     name: 'questions',
     widget: 'list',
     canFold: false,
+    isFlexible: true,
     fields: [
       {
         label: '',
@@ -2374,6 +2375,331 @@ export const alphaCourseStory = {
     fields: [...alphaFields] as FieldSpec[],
   },
 };
+
+const alphaFieldsAFS = [
+  {
+    label: 'Topic',
+    name: 'title',
+    widget: 'string',
+  },
+  {
+    widget: 'panel',
+    isRow: true,
+    fields: [
+      {
+        label: 'Poster Pic',
+        name: 'image',
+        widget: 'image',
+        uploadPreset: 'episode-banner',
+        description: 'at least 1400 x 410 JPG up to 2MB',
+        extensions: ['.jpeg', '.jpg', '.png'],
+        maxSize: 2662310,
+      },
+      {
+        label: 'Thumbnail Pic',
+        name: 'thumbnail',
+        widget: 'image',
+        uploadPreset: 'episode-thumbnail',
+        description: '500px square JPG up to 2MB',
+        extensions: ['.jpeg', '.jpg', '.png'],
+        maxSize: 2662310,
+      },
+    ],
+  } as FieldSpec,
+  {
+    label: 'Talk URL',
+    name: 'videoUrl',
+    widget: 'string',
+  },
+  {
+    label: 'Notes',
+    name: 'notes',
+    widget: 'markdown',
+  },
+  {
+    label: 'Questions',
+    name: 'questions',
+    widget: 'list',
+    canFold: false,
+    isFlexible: true,
+    fields: [
+      {
+        label: '',
+        name: 'question',
+        widget: 'markdown',
+        minimal: true,
+      },
+    ],
+  },
+  {
+    label: 'Resources',
+    name: 'resources',
+    widget: 'list',
+    canFold: true,
+    isFlexible: true,
+    fields: [
+      {
+        label: 'Title',
+        name: 'title',
+        widget: 'markdown',
+        minimal: true,
+      },
+      {
+        label: 'Description',
+        name: 'description',
+        widget: 'markdown',
+        minimal: true,
+      },
+      {
+        label: 'Author',
+        name: 'author',
+        widget: 'string',
+      },
+      {
+        label: 'Link',
+        name: 'link',
+        widget: 'string',
+      },
+      {
+        label: 'Cover image',
+        name: 'image',
+        widget: 'image',
+        uploadPreset: 'episode-thumbnail',
+        description: '500px square JPG or PNG up to 2MB',
+        extensions: ['.jpeg', '.jpg', '.png'],
+        maxSize: 2662310,
+      },
+      {
+        label: 'Partner',
+        name: 'partner',
+        widget: 'object',
+        isRow: false,
+        fields: [
+          {
+            label: 'Logo',
+            name: 'logo',
+            widget: 'image',
+            uploadPreset: 'episode-thumbnail',
+            description: 'PNG or JPG up to 2MB',
+            extensions: ['.jpeg', '.jpg', '.png'],
+            maxSize: 2662310,
+          },
+          {
+            label: 'Url',
+            name: 'url',
+            widget: 'string',
+          },
+          {
+            label: 'Name',
+            name: 'name',
+            widget: 'string',
+          },
+        ],
+      },
+    ],
+  },
+];
+
+export const afsCourseStory = {
+  draft: {
+    id: 1914,
+    number: 1,
+    status: 'started',
+    updatedAt: '2025-10-24T06:10:38.483+00:00',
+    createdAt: '2025-10-24T06:10:38.482+00:00',
+  },
+  bundle: {
+    title: '',
+    image: '',
+    thumbnail: '',
+    videoUrl: '',
+    notes: '',
+    questions: [],
+    resources: [
+      {
+        title: '',
+        description: '',
+        author: '',
+        link: '',
+        image: '',
+        partner: {
+          logo: '',
+          url: '',
+          name: '',
+        },
+      },
+    ],
+  },
+  source: {
+    image:
+      'https://res.cloudinary.com/ddks6yqbn/image/upload/v1722427496/alpha-course/ay46q4d6qolekrpaupks.jpg',
+    notes:
+      'What, if any, has been your experience of Christianity?\n**• Boring?\n• Untrue?\n• Irrelevant?**\n\nAt the heart of the Christian faith is a person: Jesus Christ.\n**Jesus said, ‘I am the bread of life.’ (John 6:35)**\n\n# 1. JESUS SAID, ‘I AM THE WAY.’\n\nThe first-order questions of life:\n• Is there more to life than this?\n• What am I doing on earth?\n• What is the point of life?\n• What is the purpose of my life?\n• Where am I heading?\n\nC. S. Lewis: ‘I believe in Christianity as I believe that the sun\nhas risen: not only because I see it, but because by it I see\neverything else.’\nJesus is the lens through which we see God. He is the way\nto God.\n\nJesus is also the lens by which we see the world in a totally\ndifferent dimension and clarity.\n\n# 2. JESUS SAID, ‘I AM THE TRUTH.’\n\nC. S. Lewis: ‘Christianity, if false, is of no importance, and if true, of infinite importance. The only thing it cannot be is moderately important.’\n• Truth – understood intellectually (head knowledge)\n• Truth – experienced as a relationship (heart knowledge)\n\n# 3. JESUS SAID, ‘I AM THE LIFE.’\n\n‘I have come that (you) may have life, and have it to the full’ (John 10:10).\nJesus came to deal with:\n• The things that spoil our lives\n• Our guilt\n\nGod loves you and he came, in the person of his Son, Jesus,\nto set you free to enjoy life to the full.\n\n>Jesus said, ‘I am the way and the truth and the life’ \n\n**John 14:6**',
+    title: 'Is there more to life than this?',
+    videoUrl: 'https://youtu.be/F8gnlP8r5Hc',
+    questions: [
+      { question: 'How and why did you end up coming to Alpha?' },
+      {
+        question:
+          'If it turned out there was a God after all, and you could ask one question, what would it be?',
+      },
+      {
+        question:
+          'What do you think about the idea of there being a spiritual side to life?',
+      },
+      {
+        question:
+          'What aspects of the evidence presented tonight did you find convincing/not convincing?',
+      },
+    ],
+    resources: [
+      {
+        link: 'https://vimeo.com/996190128?share=copy',
+        image:
+          'https://res.cloudinary.com/ddks6yqbn/image/upload/v1723127230/alpha-course/be9dhtveafx4axdt43um.png',
+        title: 'Quenching our Deepest Thirst',
+        author: 'Katherine Chow & Streams Studio',
+        partner: {
+          url: 'https://www.streams-studio.com/',
+          logo: 'https://res.cloudinary.com/ddks6yqbn/image/upload/v1747136561/alpha-course/bddlccqcvsqvng9eh3kj.jpg',
+          name: 'Streams Studio',
+        },
+        description: 'Katherine Chow & Streams Studio',
+      },
+      {
+        link: 'https://vimeo.com/1155042358?share=copy&fl=sv&fe=ci',
+        image:
+          'https://res.cloudinary.com/ddks6yqbn/image/upload/v1768575450/alpha-course/ms0phzcnsnemfhimvox4.png',
+        title: 'Next time - Who is Jesus?',
+        author: 'Alpha',
+        partner: {
+          url: 'https://www.alpha.org/',
+          logo: 'https://res.cloudinary.com/ddks6yqbn/image/upload/v1768575458/alpha-course/frykm8lgakxg6o8ngtz3.png',
+          name: 'Alpha International',
+        },
+        description: 'Next time - Who is Jesus?',
+      },
+      {
+        link: 'https://vimeo.com/996186148?share=copy',
+        image:
+          'https://res.cloudinary.com/ddks6yqbn/image/upload/v1723192399/alpha-course/fbgwtvs9d4lnrygea4ih.png',
+        title: 'Spiritual but not Religious',
+        author: 'Amanda Giannakos & Streams Studio',
+        partner: {
+          url: 'https://www.streams-studio.com/',
+          logo: 'https://res.cloudinary.com/ddks6yqbn/image/upload/v1747136840/alpha-course/o5drc4rvrdwirqzavcge.jpg',
+          name: 'Streams Studio',
+        },
+        description: 'Spiritual but not Religious',
+      },
+      {
+        link: 'https://open.spotify.com/episode/0E9dV7fqK45USBVinMhyMO?si=a4d2f97fa73e4b27',
+        image:
+          'https://res.cloudinary.com/ddks6yqbn/image/upload/v1754406801/alpha-course/cuybzpzw4qndhoi44s1b.png',
+        title: 'Podcast: Reconciling Faith with Science',
+        author: 'The Thread, from Alpha',
+        partner: {
+          url: 'https://www.leadershipconference.org.uk',
+          logo: 'https://res.cloudinary.com/ddks6yqbn/image/upload/v1747655065/alpha-course/q17pbh9eghnoggfbgatk.png',
+          name: 'Leadership Conference',
+        },
+        description: 'Podcast: Dr. Francis Collins on Reconciling Faith with Science',
+      },
+      {
+        link: 'https://guest-cdn.alpha.org/QoL%201%20Is%20There%20More%20To%20Life%20Than%20This.pdf',
+        image:
+          'https://res.cloudinary.com/ddks6yqbn/image/upload/v1725537437/alpha-course/ad094e7i1y6bo356wt2l.png',
+        title: 'Questions of Life: Is There More to Life than This',
+        author: 'Nicky Gumbel',
+        partner: {
+          url: 'https://www.hodder.co.uk/',
+          logo: 'https://res.cloudinary.com/ddks6yqbn/image/upload/v1747137372/alpha-course/sxrbvxzbrg5n4krkwcpj.jpg',
+          name: 'Hodder & Stoughton Publishers',
+        },
+        description: 'Questions of Life: Is There More to Life than This',
+      },
+      {
+        link: 'https://guest-cdn.alpha.org/SI%201%20Why%20Does%20God%20Allow%20Suffering.pdf',
+        image:
+          'https://res.cloudinary.com/ddks6yqbn/image/upload/v1725632348/alpha-course/bbq93r05rfdrjstse1fx.png',
+        title: 'Searching Issues: Why Does God Allow Suffering?',
+        author: 'Nicky Gumbel',
+        partner: {
+          url: 'https://www.hodder.co.uk/',
+          logo: 'https://res.cloudinary.com/ddks6yqbn/image/upload/v1747137416/alpha-course/bajv9p65ekgbtcqgn2kt.jpg',
+          name: 'Hodder & Stoughton Publishers',
+        },
+        description: 'Searching Issues: Why Does God Allow Suffering?',
+      },
+      {
+        link: 'https://vimeo.com/1009224911?share=copy',
+        image:
+          'https://res.cloudinary.com/ddks6yqbn/image/upload/v1726242030/alpha-course/vhsu1gb9sfxvuhlj5sj3.png',
+        title: 'For the Curious',
+        author: 'Alpha Stories',
+        partner: {
+          url: 'alpha.org',
+          logo: 'https://res.cloudinary.com/ddks6yqbn/image/upload/v1747137521/alpha-course/uyfjbnizmrsa89kn6wk8.png',
+          name: 'Alpha International',
+        },
+        description: 'For the Curious',
+      },
+      {
+        link: 'https://vimeo.com/1123253780?share=copy',
+        image:
+          'https://res.cloudinary.com/ddks6yqbn/image/upload/v1759250080/alpha-course/af1zjv4tiytr4qqtg4c5.png',
+        title: 'What is the Gospel?',
+        author: 'Nicky Gumbel ',
+        partner: {
+          url: 'https://www.youtube.com/@alpha_bnap',
+          logo: 'https://res.cloudinary.com/ddks6yqbn/image/upload/v1759250145/alpha-course/swuigqf33cphdpay2pmk.png',
+          name: 'The Bible with Nicky and Pippa Gumbel',
+        },
+        description: 'Taken from 30 Days: A practical introduction to reading the Bible',
+      },
+      {
+        link: 'https://vimeo.com/1123256290?share=copy',
+        image:
+          'https://res.cloudinary.com/ddks6yqbn/image/upload/v1759250729/alpha-course/gnetr2hi5l4bpumrso56.png',
+        title: 'Is Christianity a Crutch?',
+        author: 'Nicky Gumbel',
+        partner: {
+          url: 'https://www.youtube.com/@alpha_bnap',
+          logo: 'https://res.cloudinary.com/ddks6yqbn/image/upload/v1759250373/alpha-course/moabiertm1zft3g7fzus.png',
+          name: 'The Bible with Nicky and Pippa Gumbel',
+        },
+        description: 'From 30 Days: A practical introduction to reading the Bible',
+      },
+      {
+        link: 'https://vimeo.com/996398533?share=copy',
+        image:
+          'https://res.cloudinary.com/ddks6yqbn/image/upload/v1768575255/alpha-course/leqbhby7h3ldanlcjphb.jpg',
+        title: 'Alpha Stories: Scott, Sarah and Steve',
+        author: 'Filmed live at the Leadership Conference, 2024',
+        partner: {
+          url: 'https://www.leadershipconference.org.uk/',
+          logo: 'https://res.cloudinary.com/ddks6yqbn/image/upload/v1768575239/alpha-course/eydcsvppk1k8c4huqgdj.png',
+          name: 'Leadership Conference from Alpha',
+        },
+        description: "See the impact Jesus has had on Scott's life",
+      },
+    ],
+    thumbnail:
+      'https://res.cloudinary.com/ddks6yqbn/image/upload/v1722427500/alpha-course/mrgkd29t625z0phzmkre.jpg',
+  },
+  story: {
+    id: 1,
+    name: 'AFS Course',
+    coverImage:
+      'https://res.cloudinary.com/ddks6yqbn/image/upload/ar_1:1,c_fill,e_art:hokusai,g_auto,h_300,w_300/v1761902661/alpha-course/hrxmra2a5apgili9pt5a_i1i26d.png',
+    chapterType: 'Episode',
+    storyType: 'Alpha',
+    chapterLimit: 16,
+    schemaVersion: 1,
+    fields: [...alphaFieldsAFS] as FieldSpec[],
+  } as StorySpec,
+};
+
 export const mockCampaigns: CampaignItem[] = [
   {
     id: 1,

From 915077e86f4c3a369d5bc5b26142c6447f831c83 Mon Sep 17 00:00:00 2001
From: Timothy Koech <timosville@gmail.com>
Date: Mon, 23 Feb 2026 11:59:47 +0300
Subject: [PATCH 02/12] fix: conditionally render flexible button based on
 translation state in list components

---
 src/frontend/fields/list/flat-list.vue     | 2 +-
 src/frontend/fields/list/foldable-list.vue | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/frontend/fields/list/flat-list.vue b/src/frontend/fields/list/flat-list.vue
index dda9bc5..94a37ee 100644
--- a/src/frontend/fields/list/flat-list.vue
+++ b/src/frontend/fields/list/flat-list.vue
@@ -23,7 +23,7 @@
       <template v-if="!isEmpty(index)">
         <template v-if="canMutate">
           <button
-            v-if="field.isFlexible"
+            v-if="field.isFlexible && shared.isTranslation"
             type="button"
             class="absolute z-[1] flex h-10 w-10 cursor-pointer items-center justify-center rounded-full border bg-white text-gray-500"
             :style="{ right: `-${shared.sourceSectionWidth}px` }"
diff --git a/src/frontend/fields/list/foldable-list.vue b/src/frontend/fields/list/foldable-list.vue
index c36f33a..79451ff 100644
--- a/src/frontend/fields/list/foldable-list.vue
+++ b/src/frontend/fields/list/foldable-list.vue
@@ -68,7 +68,7 @@
 
           <template v-if="canMutate">
             <button
-              v-if="field.isFlexible"
+              v-if="field.isFlexible && shared.isTranslation"
               type="button"
               class="absolute z-[1] flex h-10 w-10 cursor-pointer items-center justify-center rounded-full border bg-white text-gray-500"
               :style="{ right: `-${shared.sourceSectionWidth}px` }"

From 94490dab76751bd87346052515c429d8bcae9a01 Mon Sep 17 00:00:00 2001
From: Timothy Koech <timosville@gmail.com>
Date: Mon, 23 Feb 2026 14:31:08 +0300
Subject: [PATCH 03/12] feat: add source item check for flexible button
 rendering in foldable list

---
 src/frontend/fields/list/foldable-list.vue | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/frontend/fields/list/foldable-list.vue b/src/frontend/fields/list/foldable-list.vue
index 79451ff..0a5bdbd 100644
--- a/src/frontend/fields/list/foldable-list.vue
+++ b/src/frontend/fields/list/foldable-list.vue
@@ -68,7 +68,7 @@
 
           <template v-if="canMutate">
             <button
-              v-if="field.isFlexible && shared.isTranslation"
+              v-if="field.isFlexible && shared.isTranslation && hasSourceItem(index)"
               type="button"
               class="absolute z-[1] flex h-10 w-10 cursor-pointer items-center justify-center rounded-full border bg-white text-gray-500"
               :style="{ right: `-${shared.sourceSectionWidth}px` }"
@@ -223,6 +223,11 @@ const isRemoved = (index: number): boolean => {
   return removedIndices.value.has(index);
 };
 
+const hasSourceItem = (index: number): boolean => {
+  const sourceList = model.getSourceField(props.fieldPath, []) as any[];
+  return Array.isArray(sourceList) && index < sourceList.length;
+};
+
 const sectionTitle = (index: number): string => {
   const peek = title(index);
   return `${field.value.label} : ${peek}`;

From fa12fb828d2d1e814b2d1053c6eb37b2f1a4d8df Mon Sep 17 00:00:00 2001
From: Timothy Koech <timosville@gmail.com>
Date: Mon, 23 Feb 2026 14:33:30 +0300
Subject: [PATCH 04/12] feat: integrate model store and enhance source item
 validation for flexible button in flat-list

---
 src/frontend/fields/list/flat-list.vue | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/frontend/fields/list/flat-list.vue b/src/frontend/fields/list/flat-list.vue
index 94a37ee..0104c68 100644
--- a/src/frontend/fields/list/flat-list.vue
+++ b/src/frontend/fields/list/flat-list.vue
@@ -23,7 +23,7 @@
       <template v-if="!isEmpty(index)">
         <template v-if="canMutate">
           <button
-            v-if="field.isFlexible && shared.isTranslation"
+            v-if="field.isFlexible && shared.isTranslation && hasSourceItem(index)"
             type="button"
             class="absolute z-[1] flex h-10 w-10 cursor-pointer items-center justify-center rounded-full border bg-white text-gray-500"
             :style="{ right: `-${shared.sourceSectionWidth}px` }"
@@ -80,7 +80,7 @@ import type { PropType } from 'vue';
 import type { FieldSpec } from '../../../types';
 import Icon from '../../shared/icon.vue';
 import AddItemButton from '../../shared/add-item-button.vue';
-import { useWidgetsStore, useSharedStore } from '../../store';
+import { useWidgetsStore, useSharedStore, useModelStore } from '../../store';
 
 const props = defineProps({
   field: {
@@ -112,6 +112,7 @@ const field = computed(() => props.field as FieldSpec);
 const fields = field.value.fields as FieldSpec[];
 const store = useWidgetsStore();
 const shared = useSharedStore();
+const model = useModelStore();
 
 const canMutate = computed(() => {
   if (props.isReadOnly) return false;
@@ -137,6 +138,11 @@ const isEmpty = (index: number): boolean => {
   return Object.keys(item).length === 0;
 };
 
+const hasSourceItem = (index: number): boolean => {
+  const sourceList = model.getSourceField(props.fieldPath, []) as any[];
+  return Array.isArray(sourceList) && index < sourceList.length;
+};
+
 const getFieldSpan = (field: FieldSpec): number => {
   if (field.widget === 'object' && field.fields) {
     return Object.keys(field.fields).length;

From 71b5256e4ac878f9ed3ac6879f91442dca175349 Mon Sep 17 00:00:00 2001
From: Timothy Koech <timosville@gmail.com>
Date: Tue, 24 Feb 2026 09:53:33 +0300
Subject: [PATCH 05/12] feat: add Simple Flexible List variant to translation
 index story and define corresponding mock data

---
 .../stories/translation-index.story.vue       |  23 ++++
 src/frontend/test/mocks.ts                    | 102 ++++++++++++++++++
 2 files changed, 125 insertions(+)

diff --git a/src/frontend/stories/translation-index.story.vue b/src/frontend/stories/translation-index.story.vue
index 96d6fb9..6f93ffe 100644
--- a/src/frontend/stories/translation-index.story.vue
+++ b/src/frontend/stories/translation-index.story.vue
@@ -106,6 +106,28 @@
         :exclude="[]"
       />
     </Variant>
+    <Variant title="Simple Flexible List" :setup-app="miniSidebar">
+      <TranslationIndex
+        :meta="sharedProps.meta"
+        :user="sharedProps.user"
+        :language="spanish"
+        :languages="sharedProps.languages"
+        :errors="sharedProps.errors"
+        :draft="simpleFlexibleListStory.draft"
+        :bundle="simpleFlexibleListStory.bundle"
+        :source="simpleFlexibleListStory.source"
+        :providers="{}"
+        :last-published="'2021-10-10T14:48:00.000000Z'"
+        :story="{
+          ...simpleFlexibleListStory.story,
+          fields: simpleFlexibleListStory.story.fields as FieldSpec[],
+          chapterLimit: 16,
+        }"
+        :has-edit-review="false"
+        :bookmarks="sharedProps.bookmarks"
+        :exclude="[]"
+      />
+    </Variant>
   </Story>
 </template>
 
@@ -120,6 +142,7 @@ import {
   miniSidebar,
   alMassira,
   flexibleListStory,
+  simpleFlexibleListStory,
   alphaCourseStory,
   afsCourseStory,
 } from '../test/mocks';
diff --git a/src/frontend/test/mocks.ts b/src/frontend/test/mocks.ts
index ef4cbd2..4535ce2 100644
--- a/src/frontend/test/mocks.ts
+++ b/src/frontend/test/mocks.ts
@@ -2287,6 +2287,108 @@ const alphaFields = [
   },
 ];
 
+const simpleFlexibleListFields: FieldSpec[] = [
+  {
+    label: 'Questions',
+    name: 'questions',
+    widget: 'list',
+    canFold: false,
+    isFlexible: true,
+    fields: [
+      {
+        label: '',
+        name: 'question',
+        widget: 'markdown',
+        minimal: true,
+      },
+    ],
+  },
+  {
+    label: 'Conclusion',
+    name: 'conclusion',
+    widget: 'list',
+    canFold: true,
+    isFlexible: true,
+    fields: [
+      {
+        label: 'Title',
+        name: 'title',
+        widget: 'string',
+      },
+      {
+        label: 'Statement',
+        name: 'statement',
+        widget: 'markdown',
+        minimal: true,
+      },
+      {
+        label: 'Excerpt',
+        name: 'excerpt',
+        widget: 'markdown',
+        minimal: true,
+      },
+    ],
+  },
+];
+
+export const simpleFlexibleListStory = {
+  draft: {
+    id: 1999,
+    number: 1,
+    status: 'started',
+    updatedAt: '2025-10-24T06:10:38.483+00:00',
+    createdAt: '2025-10-24T06:10:38.482+00:00',
+  },
+  bundle: {
+    questions: [],
+    conclusion: [],
+  },
+  source: {
+    questions: [
+      { question: 'How and why did you end up coming to Alpha?' },
+      {
+        question:
+          'If it turned out there was a God after all, and you could ask one question, what would it be?',
+      },
+      {
+        question:
+          'What do you think about the idea of there being a spiritual side to life?',
+      },
+      {
+        question:
+          'What aspects of the evidence presented tonight did you find convincing/not convincing?',
+      },
+    ],
+    conclusion: [
+      {
+        title: 'Is there more to life than this?',
+        statement:
+          'Jesus said, **"I am the way and the truth and the life"** (John 14:6). At the heart of the Christian faith is a person: Jesus Christ.',
+        excerpt:
+          'C. S. Lewis: *"I believe in Christianity as I believe that the sun has risen: not only because I see it, but because by it I see everything else."*',
+      },
+      {
+        title: 'Who is Jesus?',
+        statement:
+          'Jesus is the lens through which we see God. He is also the lens by which we see the world in a totally different dimension and clarity.',
+        excerpt:
+          'Christianity, if false, is of no importance, and if true, of infinite importance. The only thing it cannot be is moderately important.',
+      },
+    ],
+  },
+  story: {
+    id: 1,
+    name: 'Simple Flexible List',
+    coverImage:
+      'https://res.cloudinary.com/ddks6yqbn/image/upload/ar_1:1,c_fill,e_art:hokusai,g_auto,h_300,w_300/v1761902661/alpha-course/hrxmra2a5apgili9pt5a_i1i26d.png',
+    chapterType: 'Episode',
+    storyType: 'Alpha',
+    chapterLimit: 16,
+    schemaVersion: 1,
+    fields: simpleFlexibleListFields,
+  } as StorySpec,
+};
+
 export const alphaCourseStory = {
   draft: {
     id: 1913,

From ffd570bc2126657edcb065be828c28890aaa3def Mon Sep 17 00:00:00 2001
From: Timothy Koech <timosville@gmail.com>
Date: Tue, 24 Feb 2026 10:34:45 +0300
Subject: [PATCH 06/12] feat: implement item removal functionality in flat-list
 component and update store for tracking removed states

---
 src/frontend/fields/list/flat-list.vue | 61 +++++++++++++++++++++++---
 src/frontend/store/widgets.ts          | 13 ++++++
 2 files changed, 68 insertions(+), 6 deletions(-)

diff --git a/src/frontend/fields/list/flat-list.vue b/src/frontend/fields/list/flat-list.vue
index 0104c68..c9b47a0 100644
--- a/src/frontend/fields/list/flat-list.vue
+++ b/src/frontend/fields/list/flat-list.vue
@@ -15,19 +15,19 @@
       role="listitem"
       :class="[
         'subgrid relative my-2 gap-y-8',
-        isEmpty(index) ? '' : 'bg-gray-100 p-8',
+        isEmpty(index) || isRemoved(index) ? 'py-2' : 'bg-gray-100 p-8',
         { 'mr-2': shared.showSourceColumn && field.isFlexible },
       ]"
-      :style="{ gridRow: `span ${totalSpan}` }"
+      :style="{ gridRow: `span ${getItemSpan(index)}` }"
     >
-      <template v-if="!isEmpty(index)">
+      <template v-if="!isEmpty(index) && !isRemoved(index)">
         <template v-if="canMutate">
           <button
             v-if="field.isFlexible && shared.isTranslation && hasSourceItem(index)"
             type="button"
             class="absolute z-[1] flex h-10 w-10 cursor-pointer items-center justify-center rounded-full border bg-white text-gray-500"
             :style="{ right: `-${shared.sourceSectionWidth}px` }"
-            @click="emit('removeSet', index)"
+            @click="toggleRemove(index)"
           >
             <span v-if="!props.isReadOnly" class="flex h-10 w-10 items-center justify-center">
               <Icon name="minus" class="size-5" />
@@ -59,6 +59,24 @@
           />
         </li>
       </template>
+      <template v-else-if="isRemoved(index)">
+        <li class="relative flex items-center justify-between">
+          <span
+            class="absolute left-0 right-0 top-1/2 border-t border-gray-300"
+          ></span>
+          <button
+            v-if="canMutate"
+            type="button"
+            class="absolute z-[1] flex h-10 w-10 cursor-pointer items-center justify-center rounded-full border bg-white text-gray-500"
+            :style="{ right: `-${shared.sourceSectionWidth}px` }"
+            @click="toggleRemove(index)"
+          >
+            <span class="flex h-10 w-10 items-center justify-center">
+              <Icon name="plus-mini" class="size-5" />
+            </span>
+          </button>
+        </li>
+      </template>
     </ul>
     <div v-if="canMutate" class="mt-8 flex flex-row items-center gap-4">
       <AddItemButton :label="field.label" @add="emit('addSet')" />
@@ -75,7 +93,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue';
+import { computed, watch } from 'vue';
 import type { PropType } from 'vue';
 import type { FieldSpec } from '../../../types';
 import Icon from '../../shared/icon.vue';
@@ -143,6 +161,29 @@ const hasSourceItem = (index: number): boolean => {
   return Array.isArray(sourceList) && index < sourceList.length;
 };
 
+const removedState = computed(() => store.getListRemoved(props.fieldPath));
+
+const ensureRemoved = () => {
+  const current = removedState.value;
+  if (current.length < props.listItems.length) {
+    const needed = props.listItems.length - current.length;
+    const fresh = [...current, ...new Array(needed).fill(false)];
+    store.setListRemoved(props.fieldPath, fresh);
+  }
+};
+
+watch(() => props.listItems.length, ensureRemoved, { immediate: true });
+
+const toggleRemove = (index: number) => {
+  const fresh = [...removedState.value];
+  fresh[index] = !fresh[index];
+  store.setListRemoved(props.fieldPath, fresh);
+};
+
+const isRemoved = (index: number): boolean => {
+  return removedState.value[index] ?? false;
+};
+
 const getFieldSpan = (field: FieldSpec): number => {
   if (field.widget === 'object' && field.fields) {
     return Object.keys(field.fields).length;
@@ -154,7 +195,15 @@ const totalSpan = computed(() => {
   return fields.reduce((acc, field) => acc + getFieldSpan(field), 0);
 });
 
+const getItemSpan = (index: number): number => {
+  return isRemoved(index) ? 1 : totalSpan.value;
+};
+
 const containerSpan = computed(() => {
-  return props.listItems.length * totalSpan.value + 1;
+  let span = 1;
+  for (let i = 0; i < props.listItems.length; i++) {
+    span += getItemSpan(i);
+  }
+  return span;
 });
 </script>
diff --git a/src/frontend/store/widgets.ts b/src/frontend/store/widgets.ts
index 828d08b..1e8bbf1 100644
--- a/src/frontend/store/widgets.ts
+++ b/src/frontend/store/widgets.ts
@@ -48,6 +48,16 @@ export const useWidgetsStore = defineStore('widgets', () => {
   };
   const getListToggles = (path: string): boolean[] => listToggles.value[path] || [];
 
+  // list removed (for flat-list flexible translation items)
+
+  const listRemoved = ref<Record<string, boolean[]>>({});
+  const setListRemoved = (path: string, value: boolean[]): void => {
+    const fresh = { ...listRemoved.value };
+    fresh[path] = value;
+    listRemoved.value = fresh;
+  };
+  const getListRemoved = (path: string): boolean[] => listRemoved.value[path] || [];
+
   // providers
 
   const providers = ref<Providers>(defaultProviders);
@@ -68,6 +78,9 @@ export const useWidgetsStore = defineStore('widgets', () => {
     getListToggles,
     setListToggles,
 
+    getListRemoved,
+    setListRemoved,
+
     setProviders,
     providers,
 

From 8684629e05670cd2187fa4a05ed7ad3a05222e54 Mon Sep 17 00:00:00 2001
From: Timothy Koech <timosville@gmail.com>
Date: Tue, 24 Feb 2026 15:23:44 +0300
Subject: [PATCH 07/12] feat: enhance flat-list component with title display
 for removed items and add references to mock data

---
 src/frontend/fields/list/flat-list.vue | 32 ++++++++++++++++++++----
 src/frontend/test/mocks.ts             | 34 ++++++++++++++++++++++++++
 2 files changed, 61 insertions(+), 5 deletions(-)

diff --git a/src/frontend/fields/list/flat-list.vue b/src/frontend/fields/list/flat-list.vue
index c9b47a0..22bc248 100644
--- a/src/frontend/fields/list/flat-list.vue
+++ b/src/frontend/fields/list/flat-list.vue
@@ -29,7 +29,10 @@
             :style="{ right: `-${shared.sourceSectionWidth}px` }"
             @click="toggleRemove(index)"
           >
-            <span v-if="!props.isReadOnly" class="flex h-10 w-10 items-center justify-center">
+            <span
+              v-if="!props.isReadOnly"
+              class="flex h-10 w-10 items-center justify-center"
+            >
               <Icon name="minus" class="size-5" />
             </span>
           </button>
@@ -39,7 +42,10 @@
             class="absolute right-0 z-[1] flex h-10 w-10 cursor-pointer items-center justify-center rounded-full border bg-white text-gray-500"
             @click="emit('removeSet', index)"
           >
-            <span v-if="!props.isReadOnly" class="flex h-10 w-10 items-center justify-center">
+            <span
+              v-if="!props.isReadOnly"
+              class="flex h-10 w-10 items-center justify-center"
+            >
               <Icon name="trash" class="h-auto w-auto" />
             </span>
           </button>
@@ -61,9 +67,13 @@
       </template>
       <template v-else-if="isRemoved(index)">
         <li class="relative flex items-center justify-between">
-          <span
-            class="absolute left-0 right-0 top-1/2 border-t border-gray-300"
-          ></span>
+          <span class="absolute left-0 right-0 top-1/2 border-t border-gray-300"></span>
+          <div
+            v-if="canMutate"
+            class="z-[1] inline-flex items-center rounded-full border border-gray-300 bg-gray-200 px-4 py-1.5 text-sm font-medium leading-5 text-gray-500 shadow-sm"
+          >
+            <span>Removed: {{ String(title(index)) }}</span>
+          </div>
           <button
             v-if="canMutate"
             type="button"
@@ -184,6 +194,18 @@ const isRemoved = (index: number): boolean => {
   return removedState.value[index] ?? false;
 };
 
+const title = (index: number): string => {
+  let path = `${props.fieldPath}.${index.toString()}`;
+  if (field.value.index) {
+    path = `${path}.${field.value.index}`;
+  } else {
+    path = `${path}.${fields[0].name}`;
+  }
+  const itemTitle = model.getField(path, 'New Section') as string;
+
+  return itemTitle.length > 20 ? `${itemTitle.substring(0, 20)}...` : itemTitle;
+};
+
 const getFieldSpan = (field: FieldSpec): number => {
   if (field.widget === 'object' && field.fields) {
     return Object.keys(field.fields).length;
diff --git a/src/frontend/test/mocks.ts b/src/frontend/test/mocks.ts
index 4535ce2..c7e5b4b 100644
--- a/src/frontend/test/mocks.ts
+++ b/src/frontend/test/mocks.ts
@@ -2329,6 +2329,25 @@ const simpleFlexibleListFields: FieldSpec[] = [
       },
     ],
   },
+  {
+    label: 'References',
+    name: 'references',
+    widget: 'list',
+    isFlexible: true,
+    fields: [
+      {
+        label: 'Title',
+        name: 'title',
+        widget: 'string',
+      },
+      {
+        label: 'Summary Statement',
+        name: 'summaryStatement',
+        widget: 'markdown',
+        minimal: true,
+      },
+    ],
+  },
 ];
 
 export const simpleFlexibleListStory = {
@@ -2342,6 +2361,7 @@ export const simpleFlexibleListStory = {
   bundle: {
     questions: [],
     conclusion: [],
+    references: [],
   },
   source: {
     questions: [
@@ -2375,6 +2395,20 @@ export const simpleFlexibleListStory = {
           'Christianity, if false, is of no importance, and if true, of infinite importance. The only thing it cannot be is moderately important.',
       },
     ],
+    references: [
+      {
+        title: 'Mere Christianity',
+        summaryStatement: 'A classic introduction to the Christian faith by C. S. Lewis.',
+      },
+      {
+        title: 'The Case for Christ',
+        summaryStatement: 'An investigation into the evidence for Jesus.',
+      },
+      {
+        title: 'Knowing God',
+        summaryStatement: 'A deeper exploration of who God is and how we can know him.',
+      },
+    ],
   },
   story: {
     id: 1,

From 2281bc25058b6895593c28a2bdaf1002a184d6d5 Mon Sep 17 00:00:00 2001
From: Timothy Koech <timosville@gmail.com>
Date: Tue, 24 Feb 2026 15:27:57 +0300
Subject: [PATCH 08/12] feat: extend draft index story with additional mock
 data for list integration

---
 src/frontend/stories/draft-index.story.vue | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/src/frontend/stories/draft-index.story.vue b/src/frontend/stories/draft-index.story.vue
index 6c3854d..bd67506 100644
--- a/src/frontend/stories/draft-index.story.vue
+++ b/src/frontend/stories/draft-index.story.vue
@@ -22,7 +22,15 @@
 
 <script setup lang="ts">
 import DraftIndex from './draft-index.vue';
-import { sharedProps, listSpec, listModel, story, miniSidebar } from '../test/mocks';
+import {
+  sharedProps,
+  listSpec,
+  listModel,
+  listInListSpec,
+  listInListModel,
+  story,
+  miniSidebar,
+} from '../test/mocks';
 import { FieldSpec } from '../../types';
 
 const fields: FieldSpec[] = [
@@ -55,6 +63,7 @@ const fields: FieldSpec[] = [
     ],
   },
   { ...listSpec },
+  { ...listInListSpec },
   { name: 'image', label: 'Image', widget: 'image' },
   { name: 'description', label: 'Description', widget: 'string' },
   { name: 'body', label: 'Body', widget: 'markdown' },
@@ -78,6 +87,7 @@ const bundle = {
   animationUrl:
     'https://res.cloudinary.com/onesheep/raw/upload/v1685641667/cmsplayground/fnu2m4ogxi9wdhi91iqi.riv',
   ...listModel,
+  ...listInListModel,
   image: 'https://source.unsplash.com/random/800x600',
   description: 'We will look at the first chapter of the book of John.',
   body: '## The Word Became Flesh\n\nIn the beginning was the Word, and the Word was with God, and the Word was God. He was with God in the beginning. Through him all things were made; without him nothing was made that has been made. In him was life, and that life was the light of all mankind. The light shines in the darkness, and the darkness has not overcome it.',

From 78e24f66b65a39771d79e1b6f5ffe9664d9c1961 Mon Sep 17 00:00:00 2001
From: Timothy Koech <timosville@gmail.com>
Date: Tue, 24 Feb 2026 15:55:33 +0300
Subject: [PATCH 09/12] refactor: restructure removed item rendering in
 flat-list component to improve conditional display and styling

---
 src/frontend/fields/list/flat-list.vue | 43 ++++++++++++++------------
 1 file changed, 23 insertions(+), 20 deletions(-)

diff --git a/src/frontend/fields/list/flat-list.vue b/src/frontend/fields/list/flat-list.vue
index 22bc248..a1b123b 100644
--- a/src/frontend/fields/list/flat-list.vue
+++ b/src/frontend/fields/list/flat-list.vue
@@ -66,26 +66,29 @@
         </li>
       </template>
       <template v-else-if="isRemoved(index)">
-        <li class="relative flex items-center justify-between">
-          <span class="absolute left-0 right-0 top-1/2 border-t border-gray-300"></span>
-          <div
-            v-if="canMutate"
-            class="z-[1] inline-flex items-center rounded-full border border-gray-300 bg-gray-200 px-4 py-1.5 text-sm font-medium leading-5 text-gray-500 shadow-sm"
-          >
-            <span>Removed: {{ String(title(index)) }}</span>
-          </div>
-          <button
-            v-if="canMutate"
-            type="button"
-            class="absolute z-[1] flex h-10 w-10 cursor-pointer items-center justify-center rounded-full border bg-white text-gray-500"
-            :style="{ right: `-${shared.sourceSectionWidth}px` }"
-            @click="toggleRemove(index)"
-          >
-            <span class="flex h-10 w-10 items-center justify-center">
-              <Icon name="plus-mini" class="size-5" />
-            </span>
-          </button>
-        </li>
+        <template v-if="canMutate">
+          <li class="relative flex items-center justify-between">
+            <span
+              class="absolute left-0 right-0 top-1/2 border-t border-gray-300"
+              :style="{ width: `calc(100% + ${shared.sourceSectionWidth}px)` }"
+            ></span>
+            <div
+              class="z-[1] inline-flex items-center rounded-full border border-gray-300 bg-gray-200 px-4 py-1.5 text-sm font-medium leading-5 text-gray-500 shadow-sm"
+            >
+              <span>Removed: {{ String(title(index)) }}</span>
+            </div>
+            <button
+              type="button"
+              class="absolute z-[1] flex h-10 w-10 cursor-pointer items-center justify-center rounded-full border bg-white text-gray-500"
+              :style="{ right: `-${shared.sourceSectionWidth}px` }"
+              @click="toggleRemove(index)"
+            >
+              <span class="flex h-10 w-10 items-center justify-center">
+                <Icon name="plus-mini" class="size-5" />
+              </span>
+            </button>
+          </li>
+        </template>
       </template>
     </ul>
     <div v-if="canMutate" class="mt-8 flex flex-row items-center gap-4">

From ae0e04e1d73f0874cb7f6a17cfe2d663fd49336b Mon Sep 17 00:00:00 2001
From: Timothy Koech <timosville@gmail.com>
Date: Wed, 25 Feb 2026 09:59:31 +0300
Subject: [PATCH 10/12] refactor: remove list state to component

---
 src/frontend/fields/list/flat-list.vue | 54 +++++++++++---------------
 src/frontend/store/widgets.ts          | 13 -------
 src/frontend/test/mocks.ts             | 18 ++++++++-
 3 files changed, 40 insertions(+), 45 deletions(-)

diff --git a/src/frontend/fields/list/flat-list.vue b/src/frontend/fields/list/flat-list.vue
index a1b123b..3cec266 100644
--- a/src/frontend/fields/list/flat-list.vue
+++ b/src/frontend/fields/list/flat-list.vue
@@ -57,7 +57,7 @@
           :style="{ gridRow: `span ${getFieldSpan(item)}` }"
         >
           <component
-            :is="store.picker(item.widget)"
+            :is="widgets.picker(item.widget)"
             :field="item"
             :is-read-only="props.isReadOnly"
             :root-path="`${fieldPath}.${index.toString()}`"
@@ -75,7 +75,7 @@
             <div
               class="z-[1] inline-flex items-center rounded-full border border-gray-300 bg-gray-200 px-4 py-1.5 text-sm font-medium leading-5 text-gray-500 shadow-sm"
             >
-              <span>Removed: {{ String(title(index)) }}</span>
+              <span>Removed</span>
             </div>
             <button
               type="button"
@@ -106,12 +106,12 @@
 </template>
 
 <script setup lang="ts">
-import { computed, watch } from 'vue';
+import { computed, ref } from 'vue';
 import type { PropType } from 'vue';
 import type { FieldSpec } from '../../../types';
 import Icon from '../../shared/icon.vue';
 import AddItemButton from '../../shared/add-item-button.vue';
-import { useWidgetsStore, useSharedStore, useModelStore } from '../../store';
+import {  useSharedStore, useModelStore, useWidgetsStore } from '../../store';
 
 const props = defineProps({
   field: {
@@ -141,9 +141,9 @@ const props = defineProps({
 const emit = defineEmits(['addSet', 'removeSet']);
 const field = computed(() => props.field as FieldSpec);
 const fields = field.value.fields as FieldSpec[];
-const store = useWidgetsStore();
 const shared = useSharedStore();
 const model = useModelStore();
+const widgets = useWidgetsStore();
 
 const canMutate = computed(() => {
   if (props.isReadOnly) return false;
@@ -152,6 +152,9 @@ const canMutate = computed(() => {
   return !shared.isTranslation || field.value.isFlexible === true;
 });
 
+const sourceList = model.getSourceField(props.fieldPath, []) as any[];
+
+
 const showEmptyListWarning = (): boolean => {
   if (props.isReadOnly) return false;
   if (props.listItems.length > 0) return false;
@@ -170,45 +173,32 @@ const isEmpty = (index: number): boolean => {
 };
 
 const hasSourceItem = (index: number): boolean => {
-  const sourceList = model.getSourceField(props.fieldPath, []) as any[];
   return Array.isArray(sourceList) && index < sourceList.length;
 };
 
-const removedState = computed(() => store.getListRemoved(props.fieldPath));
+const removedList = ref<number[]>([]);
+
 
-const ensureRemoved = () => {
-  const current = removedState.value;
-  if (current.length < props.listItems.length) {
-    const needed = props.listItems.length - current.length;
-    const fresh = [...current, ...new Array(needed).fill(false)];
-    store.setListRemoved(props.fieldPath, fresh);
-  }
-};
 
-watch(() => props.listItems.length, ensureRemoved, { immediate: true });
 
-const toggleRemove = (index: number) => {
-  const fresh = [...removedState.value];
-  fresh[index] = !fresh[index];
-  store.setListRemoved(props.fieldPath, fresh);
-};
 
-const isRemoved = (index: number): boolean => {
-  return removedState.value[index] ?? false;
-};
 
-const title = (index: number): string => {
-  let path = `${props.fieldPath}.${index.toString()}`;
-  if (field.value.index) {
-    path = `${path}.${field.value.index}`;
+
+
+
+const toggleRemove = (index: number) => {
+  if (removedList.value.includes(index)) {
+    removedList.value.splice(removedList.value.indexOf(index), 1);
   } else {
-    path = `${path}.${fields[0].name}`;
+    removedList.value.push(index);
   }
-  const itemTitle = model.getField(path, 'New Section') as string;
+};
 
-  return itemTitle.length > 20 ? `${itemTitle.substring(0, 20)}...` : itemTitle;
+const isRemoved = (index: number): boolean => {
+  return removedList.value.includes(index);
 };
 
+
 const getFieldSpan = (field: FieldSpec): number => {
   if (field.widget === 'object' && field.fields) {
     return Object.keys(field.fields).length;
@@ -231,4 +221,6 @@ const containerSpan = computed(() => {
   }
   return span;
 });
+
+
 </script>
diff --git a/src/frontend/store/widgets.ts b/src/frontend/store/widgets.ts
index 1e8bbf1..828d08b 100644
--- a/src/frontend/store/widgets.ts
+++ b/src/frontend/store/widgets.ts
@@ -48,16 +48,6 @@ export const useWidgetsStore = defineStore('widgets', () => {
   };
   const getListToggles = (path: string): boolean[] => listToggles.value[path] || [];
 
-  // list removed (for flat-list flexible translation items)
-
-  const listRemoved = ref<Record<string, boolean[]>>({});
-  const setListRemoved = (path: string, value: boolean[]): void => {
-    const fresh = { ...listRemoved.value };
-    fresh[path] = value;
-    listRemoved.value = fresh;
-  };
-  const getListRemoved = (path: string): boolean[] => listRemoved.value[path] || [];
-
   // providers
 
   const providers = ref<Providers>(defaultProviders);
@@ -78,9 +68,6 @@ export const useWidgetsStore = defineStore('widgets', () => {
     getListToggles,
     setListToggles,
 
-    getListRemoved,
-    setListRemoved,
-
     setProviders,
     providers,
 
diff --git a/src/frontend/test/mocks.ts b/src/frontend/test/mocks.ts
index c7e5b4b..9247aca 100644
--- a/src/frontend/test/mocks.ts
+++ b/src/frontend/test/mocks.ts
@@ -2359,7 +2359,23 @@ export const simpleFlexibleListStory = {
     createdAt: '2025-10-24T06:10:38.482+00:00',
   },
   bundle: {
-    questions: [],
+    questions: [
+      { question: '¿Cómo y por qué terminaste viniendo a Alpha?' },
+      {
+        question: '',
+      },
+      {
+        question:
+          '¿Qué piensas sobre la idea de que exista un lado espiritual en la vida?',
+      },
+      {
+        question: '',
+      },
+      {
+        question:
+          '¿Qué aspectos de la evidencia presentada esta noche te parecieron convincentes o no convincentes?',
+      },
+    ],
     conclusion: [],
     references: [],
   },

From 5bf6f4469766b5ea8c3fe90fc4956139fe14ad3e Mon Sep 17 00:00:00 2001
From: Timothy Koech <timosville@gmail.com>
Date: Wed, 25 Feb 2026 11:26:25 +0300
Subject: [PATCH 11/12] ops: revert changes

---
 src/frontend/fields/list/flat-list.vue | 47 ++++++++++-----------
 src/frontend/store/widgets.ts          | 31 +++++++++++++-
 src/frontend/test/mocks.ts             | 58 +++++++++++++++++++++++++-
 3 files changed, 108 insertions(+), 28 deletions(-)

diff --git a/src/frontend/fields/list/flat-list.vue b/src/frontend/fields/list/flat-list.vue
index 3cec266..a30f089 100644
--- a/src/frontend/fields/list/flat-list.vue
+++ b/src/frontend/fields/list/flat-list.vue
@@ -15,12 +15,12 @@
       role="listitem"
       :class="[
         'subgrid relative my-2 gap-y-8',
-        isEmpty(index) || isRemoved(index) ? 'py-2' : 'bg-gray-100 p-8',
+        isPlaceholder(index) || isRemoved(index) ? 'py-2' : 'bg-gray-100 p-8',
         { 'mr-2': shared.showSourceColumn && field.isFlexible },
       ]"
       :style="{ gridRow: `span ${getItemSpan(index)}` }"
     >
-      <template v-if="!isEmpty(index) && !isRemoved(index)">
+      <template v-if="!isPlaceholder(index) && !isRemoved(index)">
         <template v-if="canMutate">
           <button
             v-if="field.isFlexible && shared.isTranslation && hasSourceItem(index)"
@@ -106,12 +106,12 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref } from 'vue';
+import { computed, watch } from 'vue';
 import type { PropType } from 'vue';
 import type { FieldSpec } from '../../../types';
 import Icon from '../../shared/icon.vue';
 import AddItemButton from '../../shared/add-item-button.vue';
-import {  useSharedStore, useModelStore, useWidgetsStore } from '../../store';
+import { useWidgetsStore, useSharedStore, useModelStore } from '../../store';
 
 const props = defineProps({
   field: {
@@ -141,9 +141,9 @@ const props = defineProps({
 const emit = defineEmits(['addSet', 'removeSet']);
 const field = computed(() => props.field as FieldSpec);
 const fields = field.value.fields as FieldSpec[];
+const widgets = useWidgetsStore();
 const shared = useSharedStore();
 const model = useModelStore();
-const widgets = useWidgetsStore();
 
 const canMutate = computed(() => {
   if (props.isReadOnly) return false;
@@ -152,9 +152,6 @@ const canMutate = computed(() => {
   return !shared.isTranslation || field.value.isFlexible === true;
 });
 
-const sourceList = model.getSourceField(props.fieldPath, []) as any[];
-
-
 const showEmptyListWarning = (): boolean => {
   if (props.isReadOnly) return false;
   if (props.listItems.length > 0) return false;
@@ -166,36 +163,38 @@ const showEmptyListWarning = (): boolean => {
   return false;
 };
 
-const isEmpty = (index: number): boolean => {
+const isPlaceholder = (index: number): boolean => {
   if (!props.isReadOnly) return false;
   const item = props.listItems[index] as Record<string, unknown>;
   return Object.keys(item).length === 0;
 };
 
 const hasSourceItem = (index: number): boolean => {
+  const sourceList = model.getSourceField(props.fieldPath, []) as any[];
   return Array.isArray(sourceList) && index < sourceList.length;
 };
 
-const removedList = ref<number[]>([]);
-
-
-
-
-
-
+const removedState = computed(() => widgets.getListRemoved(props.fieldPath));
 
+const ensureRemoved = () => {
+  const current = removedState.value;
+  if (current.length < props.listItems.length) {
+    const needed = props.listItems.length - current.length;
+    const fresh = [...current, ...new Array(needed).fill(false)];
+    widgets.setListRemoved(props.fieldPath, fresh);
+  }
+};
 
+watch(() => props.listItems.length, ensureRemoved, { immediate: true });
 
 const toggleRemove = (index: number) => {
-  if (removedList.value.includes(index)) {
-    removedList.value.splice(removedList.value.indexOf(index), 1);
-  } else {
-    removedList.value.push(index);
-  }
+  const fresh = [...removedState.value];
+  fresh[index] = !fresh[index];
+  widgets.setListRemoved(props.fieldPath, fresh);
 };
 
 const isRemoved = (index: number): boolean => {
-  return removedList.value.includes(index);
+  return removedState.value[index] ?? false;
 };
 
 
@@ -221,6 +220,4 @@ const containerSpan = computed(() => {
   }
   return span;
 });
-
-
-</script>
+</script>
\ No newline at end of file
diff --git a/src/frontend/store/widgets.ts b/src/frontend/store/widgets.ts
index 828d08b..c07bacb 100644
--- a/src/frontend/store/widgets.ts
+++ b/src/frontend/store/widgets.ts
@@ -38,7 +38,7 @@ export const useWidgetsStore = defineStore('widgets', () => {
     picker.value = fresh;
   };
 
-  // list toggles
+  // track folding in foldable lists
 
   const listToggles = ref<Record<string, boolean[]>>({});
   const setListToggles = (path: string, value: boolean[]): void => {
@@ -48,6 +48,30 @@ export const useWidgetsStore = defineStore('widgets', () => {
   };
   const getListToggles = (path: string): boolean[] => listToggles.value[path] || [];
 
+  // track removed items in flexible lists
+
+  const removedItems = ref<Record<string, number[]>>({});
+  const toggleRemovedIndex = (path: string, index: number): void => {
+    const fresh = { ...removedItems.value };
+    fresh[path] = Array.from(removedItems.value[path] || []);
+    if (fresh[path].includes(index)) {
+      fresh[path].splice(fresh[path].indexOf(index), 1);
+    } else {
+      fresh[path].push(index);
+    }
+    removedItems.value = fresh;
+  };
+  const isInRemovedList = (path: string, index: number): boolean =>
+    removedItems.value[path]?.includes(index) || false;
+
+  const listRemoved = ref<Record<string, boolean[]>>({});
+  const setListRemoved = (path: string, value: boolean[]): void => {
+    const fresh = { ...listRemoved.value };
+    fresh[path] = value;
+    listRemoved.value = fresh;
+  };
+  const getListRemoved = (path: string): boolean[] => listRemoved.value[path] || [];
+
   // providers
 
   const providers = ref<Providers>(defaultProviders);
@@ -68,6 +92,11 @@ export const useWidgetsStore = defineStore('widgets', () => {
     getListToggles,
     setListToggles,
 
+    toggleRemovedIndex,
+    isInRemovedList,
+    setListRemoved,
+    getListRemoved,
+
     setProviders,
     providers,
 
diff --git a/src/frontend/test/mocks.ts b/src/frontend/test/mocks.ts
index 9247aca..9a2064f 100644
--- a/src/frontend/test/mocks.ts
+++ b/src/frontend/test/mocks.ts
@@ -2376,8 +2376,62 @@ export const simpleFlexibleListStory = {
           '¿Qué aspectos de la evidencia presentada esta noche te parecieron convincentes o no convincentes?',
       },
     ],
-    conclusion: [],
-    references: [],
+    conclusion: [
+      {
+        title: '¿Hay algo más en la vida que esto?',
+        statement:
+          'Jesús dijo: **«Yo soy el camino, la verdad y la vida»** (Juan 14:6). En el corazón de la fe cristiana hay una persona: Jesucristo.',
+        excerpt:
+          'C. S. Lewis: *"Creo en el cristianismo como creo que el sol ha salido: no solo porque lo veo, sino porque por él veo todo lo demás."*',
+      },
+      {
+        title: '¿Quién es Jesús?',
+        statement:
+          'Jesús es el lente a través del cual vemos a Dios. También es el lente con el que vemos el mundo en una dimensión y claridad totalmente distintas.',
+        excerpt:
+          'El cristianismo, si es falso, no tiene importancia; y si es verdadero, tiene importancia infinita. Lo único que no puede ser es moderadamente importante.',
+      },
+      {
+        title: '',
+        statement: '',
+        excerpt: '',
+      },
+      {
+        title: '¿Quién es Jesús?',
+        statement:
+          'Jesús es el lente a través del cual vemos a Dios. También es el lente con el que vemos el mundo en una dimensión y claridad totalmente distintas.',
+        excerpt:
+          'El cristianismo, si es falso, no tiene importancia; y si es verdadero, tiene importancia infinita. Lo único que no puede ser es moderadamente importante.',
+      },
+    ],
+    references: [
+      {
+        title: 'Mero Cristianismo',
+        summaryStatement: 'Una introducción clásica a la fe cristiana de C. S. Lewis.',
+      },
+      {
+        title: '',
+        summaryStatement: '',
+      },
+      {
+        title: 'Conociendo a Dios',
+        summaryStatement:
+          'Una exploración más profunda de quién es Dios y cómo podemos conocerlo.',
+      },
+      {
+        title: 'Mero Cristianismo',
+        summaryStatement: 'Una introducción clásica a la fe cristiana de C. S. Lewis.',
+      },
+      {
+        title: 'El caso de Cristo',
+        summaryStatement: 'Una investigación sobre la evidencia de Jesús.',
+      },
+      {
+        title: 'Conociendo a Dios',
+        summaryStatement:
+          'Una exploración más profunda de quién es Dios y cómo podemos conocerlo.',
+      },
+    ],
   },
   source: {
     questions: [

From ebc3dc1d7176965505e03c24d74056bf53be0543 Mon Sep 17 00:00:00 2001
From: Timothy Koech <timosville@gmail.com>
Date: Wed, 25 Feb 2026 11:33:15 +0300
Subject: [PATCH 12/12] refactor: simplify removal state management in
 flat-list component and update store methods

---
 src/frontend/fields/list/flat-list.vue | 23 ++++-------------------
 src/frontend/store/widgets.ts          | 10 ----------
 2 files changed, 4 insertions(+), 29 deletions(-)

diff --git a/src/frontend/fields/list/flat-list.vue b/src/frontend/fields/list/flat-list.vue
index a30f089..d11430a 100644
--- a/src/frontend/fields/list/flat-list.vue
+++ b/src/frontend/fields/list/flat-list.vue
@@ -106,7 +106,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, watch } from 'vue';
+import { computed } from 'vue';
 import type { PropType } from 'vue';
 import type { FieldSpec } from '../../../types';
 import Icon from '../../shared/icon.vue';
@@ -174,30 +174,15 @@ const hasSourceItem = (index: number): boolean => {
   return Array.isArray(sourceList) && index < sourceList.length;
 };
 
-const removedState = computed(() => widgets.getListRemoved(props.fieldPath));
-
-const ensureRemoved = () => {
-  const current = removedState.value;
-  if (current.length < props.listItems.length) {
-    const needed = props.listItems.length - current.length;
-    const fresh = [...current, ...new Array(needed).fill(false)];
-    widgets.setListRemoved(props.fieldPath, fresh);
-  }
-};
-
-watch(() => props.listItems.length, ensureRemoved, { immediate: true });
 
 const toggleRemove = (index: number) => {
-  const fresh = [...removedState.value];
-  fresh[index] = !fresh[index];
-  widgets.setListRemoved(props.fieldPath, fresh);
+  widgets.toggleRemovedIndex(props.fieldPath, index);
 };
 
 const isRemoved = (index: number): boolean => {
-  return removedState.value[index] ?? false;
+  return widgets.isInRemovedList(props.fieldPath, index);
 };
 
-
 const getFieldSpan = (field: FieldSpec): number => {
   if (field.widget === 'object' && field.fields) {
     return Object.keys(field.fields).length;
@@ -220,4 +205,4 @@ const containerSpan = computed(() => {
   }
   return span;
 });
-</script>
\ No newline at end of file
+</script>
diff --git a/src/frontend/store/widgets.ts b/src/frontend/store/widgets.ts
index c07bacb..0162da9 100644
--- a/src/frontend/store/widgets.ts
+++ b/src/frontend/store/widgets.ts
@@ -64,14 +64,6 @@ export const useWidgetsStore = defineStore('widgets', () => {
   const isInRemovedList = (path: string, index: number): boolean =>
     removedItems.value[path]?.includes(index) || false;
 
-  const listRemoved = ref<Record<string, boolean[]>>({});
-  const setListRemoved = (path: string, value: boolean[]): void => {
-    const fresh = { ...listRemoved.value };
-    fresh[path] = value;
-    listRemoved.value = fresh;
-  };
-  const getListRemoved = (path: string): boolean[] => listRemoved.value[path] || [];
-
   // providers
 
   const providers = ref<Providers>(defaultProviders);
@@ -94,8 +86,6 @@ export const useWidgetsStore = defineStore('widgets', () => {
 
     toggleRemovedIndex,
     isInRemovedList,
-    setListRemoved,
-    getListRemoved,
 
     setProviders,
     providers,