From 3d865c2b7413bd3b77cbf630d574e6ce20213598 Mon Sep 17 00:00:00 2001
From: Timothy Koech <timosville@gmail.com>
Date: Tue, 9 Jun 2026 08:18:26 +0300
Subject: [PATCH 01/10] fix: update LanguagesEdit component to use
 sharedProps.config for languages

---
 src/frontend/settings/languages/languages-edit.story.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/frontend/settings/languages/languages-edit.story.vue b/src/frontend/settings/languages/languages-edit.story.vue
index 67a6a9e8..1cf4ffb4 100644
--- a/src/frontend/settings/languages/languages-edit.story.vue
+++ b/src/frontend/settings/languages/languages-edit.story.vue
@@ -2,10 +2,10 @@
   <Story title="Languages Edit" group="settings">
     <Variant title="Edit" :setup-app="miniSidebar">
       <LanguagesEdit
-        :meta="sharedProps.meta"
+        :config="sharedProps.config"
         :user="sharedProps.user"
         :language="sharedProps.language"
-        :languages="sharedProps.languages"
+        :languages="sharedProps.config.languages"
         :errors="sharedProps.errors"
         :bookmarks="sharedProps.bookmarks"
         :exclude="[]"

From ed18f81acf20f62522949cdbceb8ae2fd01fdcb0 Mon Sep 17 00:00:00 2001
From: Timothy Koech <timosville@gmail.com>
Date: Tue, 9 Jun 2026 08:49:57 +0300
Subject: [PATCH 02/10] refactor: update language handling in settings
 components to use LanguageTableItem type and improve structure

---
 .../controllers/settings_controller.stub      |  26 +++-
 .../components/language-table-row.vue         | 118 ++++++++++++++++++
 .../components/language-table.story.vue       |  10 +-
 .../languages/components/language-table.vue   | 108 ++++------------
 src/frontend/settings/settings-index.vue      |  15 +--
 src/frontend/test/mocks.ts                    |  32 ++++-
 src/types.ts                                  |   2 +-
 7 files changed, 207 insertions(+), 104 deletions(-)
 create mode 100644 src/frontend/settings/languages/components/language-table-row.vue

diff --git a/src/backend/stubs/controllers/settings_controller.stub b/src/backend/stubs/controllers/settings_controller.stub
index e223e0a4..e8ef381a 100644
--- a/src/backend/stubs/controllers/settings_controller.stub
+++ b/src/backend/stubs/controllers/settings_controller.stub
@@ -79,7 +79,7 @@ export default class SettingsController {
   public async index(ctx: HttpContext) {
     cms.localeFromPath(ctx);
 
-    const sourceLanguage =
+    const sourceLanguageSpec =
       cms.config.languages.find(
         (lang: LanguageSpecification) => lang.locale === cms.sourceLocale,
       ) ?? cms.config.languages[0];
@@ -90,8 +90,26 @@ export default class SettingsController {
       (progressItems ?? []).map((item) => [item.locale, item.progress]),
     );
 
+    const defaultTranslationProgress = [
+      { name: 'Interface', done: 0, draft: 0, total: 0 },
+      { name: 'Content', done: 0, draft: 0, total: 0 },
+    ];
+
     const users = await User.query().where('name', '!=', 'redacted');
 
+    const sourceLanguage: LanguageTableItem = {
+      language: sourceLanguageSpec.language,
+      languageDirection: sourceLanguageSpec.languageDirection,
+      locale: sourceLanguageSpec.locale,
+      bibleLabel: sourceLanguageSpec.bibleLabel,
+      bibleVersion: sourceLanguageSpec.bibleVersion,
+      translationProgress:
+        translationProgressByLocale[sourceLanguageSpec.locale] ?? defaultTranslationProgress,
+      teamMembers: users
+        .filter((user) => user.language === sourceLanguageSpec.locale)
+        .map((user) => user.meta),
+    };
+
     const languageItems: LanguageTableItem[] = cms.config.languages
       .filter(
         (language: LanguageSpecification) => language.locale !== sourceLanguage.locale,
@@ -102,10 +120,8 @@ export default class SettingsController {
         locale: language.locale,
         bibleLabel: language.bibleLabel,
         bibleVersion: language.bibleVersion,
-        translationProgress: translationProgressByLocale[language.locale] ?? [
-          { name: 'Interface', done: 0, draft: 0, total: 0 },
-          { name: 'Content', done: 0, draft: 0, total: 0 },
-        ],
+        translationProgress:
+          translationProgressByLocale[language.locale] ?? defaultTranslationProgress,
         teamMembers: users
           .filter((user) => user.language === language.locale)
           .map((user) => user.meta),
diff --git a/src/frontend/settings/languages/components/language-table-row.vue b/src/frontend/settings/languages/components/language-table-row.vue
new file mode 100644
index 00000000..86f3178b
--- /dev/null
+++ b/src/frontend/settings/languages/components/language-table-row.vue
@@ -0,0 +1,118 @@
+<template>
+  <tr class="relative" :class="{ 'bg-gray-50': isSource }">
+    <td
+      class="flex flex-col whitespace-nowrap px-3 py-4 text-sm text-gray-800"
+      :class="{ 'gap-2': !isSource }"
+    >
+      <LangStrip :spec="item" />
+      <p
+        v-if="isSource"
+        class="text-xs font-normal uppercase leading-5 tracking-[0em] text-gray-500"
+      >
+        Source language
+      </p>
+    </td>
+    <td class="whitespace-nowrap px-3 py-4 align-top text-sm">
+      <RingBlock :progress="rowProgress" />
+    </td>
+    <td class="px-3 py-4 align-top text-sm text-gray-800">
+      <div v-if="item.teamMembers?.length" class="flex flex-col gap-1">
+        <MemberRow
+          v-for="member in item.teamMembers"
+          :key="member.id"
+          :name="member.name"
+          :email="member.email"
+        />
+      </div>
+      <div v-else class="flex flex-col text-xs font-medium leading-4">
+        <p class="text-black">No team members yet</p>
+        <p class="text-gray-500">
+          Press the three dots to <br />
+          assign team members.
+        </p>
+      </div>
+    </td>
+    <td class="whitespace-nowrap px-3 py-4 text-sm font-normal leading-5 text-gray-500">
+      {{ truncate(item.bibleLabel, 30) }}
+    </td>
+    <td class="py-4 pl-3 pr-4 text-right sm:pr-6">
+      <button
+        type="button"
+        class="cursor-pointer text-gray-400 hover:text-gray-600"
+        @click="emit('toggleActions', item.locale)"
+      >
+        <Icon name="dots-vertical" class="size-5" />
+      </button>
+      <div
+        v-show="openActionsLocale === item.locale"
+        class="absolute right-10 top-3 z-10 flex max-w-[250px] flex-col items-start overflow-hidden rounded-md bg-white shadow"
+      >
+        <a
+          :href="`/${item.locale}/user`"
+          class="w-full px-6 py-2 pt-3 text-left text-sm font-normal leading-5 text-gray-800 hover:bg-gray-100"
+        >
+          Assign team members
+        </a>
+        <button
+          class="w-full px-6 py-2 text-left text-sm font-normal leading-5 text-gray-800 hover:bg-gray-100"
+          :class="{ 'pb-3': isSource }"
+          @click="emit('openBibleTranslations', item)"
+        >
+          Change Bible translation
+        </button>
+        <button
+          v-if="!isSource"
+          class="w-full px-6 py-2 pb-3 text-left text-sm font-normal leading-5 text-gray-800 hover:bg-gray-100"
+          @click="emit('removeOrRequestDeletion', item)"
+        >
+          {{ hasContent(item) ? 'Request language deletion' : 'Remove language' }}
+        </button>
+      </div>
+    </td>
+  </tr>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import Icon from '../../../shared/icon.vue';
+import MemberRow from './member-row.vue';
+import RingBlock from '../../../dashboard/ring-block.vue';
+import LangStrip from './language-strip.vue';
+import type { LanguageTableItem } from '../../../../types';
+
+const props = withDefaults(
+  defineProps<{
+    item: LanguageTableItem;
+    isSource?: boolean;
+    openActionsLocale: string | null;
+  }>(),
+  { isSource: false },
+);
+
+const emit = defineEmits<{
+  toggleActions: [locale: string];
+  openBibleTranslations: [item: LanguageTableItem];
+  removeOrRequestDeletion: [item: LanguageTableItem];
+}>();
+
+const rowProgress = computed(() => {
+  if (props.isSource) {
+    const content = props.item.translationProgress?.find(
+      (progress) => progress.name === 'Content',
+    );
+    return [content ?? { name: 'Content', done: 0, draft: 0, total: 0 }];
+  }
+  return props.item.translationProgress ?? [];
+});
+
+const truncate = (s: string | null | undefined, max: number) => {
+  const text = s ?? '—';
+  return text.length > max ? `${text.slice(0, max)}…` : text;
+};
+
+const hasContent = (item: LanguageTableItem) => {
+  const content = item.translationProgress?.find((p) => p.name === 'Content');
+  const ui = item.translationProgress?.find((p) => p.name === 'Interface');
+  return (content?.done ?? 0) > 0 || (ui?.done ?? 0) > 0;
+};
+</script>
diff --git a/src/frontend/settings/languages/components/language-table.story.vue b/src/frontend/settings/languages/components/language-table.story.vue
index 83d576c3..577668eb 100644
--- a/src/frontend/settings/languages/components/language-table.story.vue
+++ b/src/frontend/settings/languages/components/language-table.story.vue
@@ -3,16 +3,18 @@
     <Variant title="Default">
       <LangTable
         :items="languageTableItems"
+        :source-language="sourceLanguage"
         @remove="onRemove"
         @request-deletion="onRequestDeletion"
       />
     </Variant>
     <Variant title="Empty">
-      <LangTable :items="[]" />
+      <LangTable :items="[]" :source-language="sourceLanguage" />
     </Variant>
     <Variant title="With pagination">
       <LangTable
         :items="manyLanguageTableItems"
+        :source-language="sourceLanguage"
         :items-per-page="5"
         @remove="onRemove"
         @request-deletion="onRequestDeletion"
@@ -23,7 +25,11 @@
 
 <script setup lang="ts">
 import LangTable from './language-table.vue';
-import { languageTableItems, manyLanguageTableItems } from '../../../test/mocks';
+import {
+  languageTableItems,
+  manyLanguageTableItems,
+  sourceLanguage,
+} from '../../../test/mocks';
 import type { LanguageTableItem } from '../../../../types';
 
 const onRemove = (item: LanguageTableItem) => {
diff --git a/src/frontend/settings/languages/components/language-table.vue b/src/frontend/settings/languages/components/language-table.vue
index 939cfdd3..e8bb62d5 100644
--- a/src/frontend/settings/languages/components/language-table.vue
+++ b/src/frontend/settings/languages/components/language-table.vue
@@ -39,70 +39,16 @@
         </tr>
       </thead>
       <tbody class="divide-y divide-gray-200 bg-white">
-        <tr v-for="item in paginatedItems" :key="item.locale" class="relative">
-          <td
-            class="flex flex-col gap-2 whitespace-nowrap px-3 py-4 text-sm text-gray-800"
-          >
-            <LangStrip :spec="item" />
-          </td>
-          <td class="whitespace-nowrap px-3 py-4 align-top text-sm">
-            <RingBlock :progress="item.translationProgress ?? []" />
-          </td>
-          <td class="px-3 py-4 align-top text-sm text-gray-800">
-            <div v-if="item.teamMembers?.length" class="flex flex-col gap-1">
-              <MemberRow
-                v-for="member in item.teamMembers"
-                :key="member.id"
-                :name="member.name"
-                :email="member.email"
-              />
-            </div>
-            <div v-else class="flex flex-col text-xs font-medium leading-4">
-              <p class="text-black">No team members yet</p>
-              <p class="text-gray-500">
-                Press the three dots to <br />
-                assign team members.
-              </p>
-            </div>
-          </td>
-          <td
-            class="whitespace-nowrap px-3 py-4 text-sm font-normal leading-5 text-gray-500"
-          >
-            {{ truncate(item.bibleLabel, 30) }}
-          </td>
-          <td class="py-4 pl-3 pr-4 text-right sm:pr-6">
-            <button
-              type="button"
-              class="cursor-pointer text-gray-400 hover:text-gray-600"
-              @click="toggleActions(item.locale)"
-            >
-              <Icon name="dots-vertical" class="size-5" />
-            </button>
-            <div
-              v-show="openActionsLocale === item.locale"
-              class="absolute right-10 top-3 z-10 flex max-w-[250px] flex-col items-start overflow-hidden rounded-md bg-white shadow"
-            >
-              <a
-                :href="`/${item.locale}/user`"
-                class="w-full px-6 py-2 pt-3 text-left text-sm font-normal leading-5 text-gray-800 hover:bg-gray-100"
-              >
-                Assign team members
-              </a>
-              <button
-                class="w-full px-6 py-2 text-left text-sm font-normal leading-5 text-gray-800 hover:bg-gray-100"
-                @click="openBibleTranslationsModal(item)"
-              >
-                Change Bible translation
-              </button>
-              <button
-                class="w-full px-6 py-2 pb-3 text-left text-sm font-normal leading-5 text-gray-800 hover:bg-gray-100"
-                @click="handleRemoveOrRequestDeletion(item)"
-              >
-                {{ hasContent(item) ? 'Request language deletion' : 'Remove language' }}
-              </button>
-            </div>
-          </td>
-        </tr>
+        <LanguageTableRow
+          v-for="row in displayRows"
+          :key="row.item.locale"
+          :item="row.item"
+          :is-source="row.isSource"
+          :open-actions-locale="openActionsLocale"
+          @toggle-actions="toggleActions"
+          @open-bible-translations="openBibleTranslationsModal"
+          @remove-or-request-deletion="handleRemoveOrRequestDeletion"
+        />
       </tbody>
     </table>
 
@@ -137,20 +83,18 @@
 
 <script setup lang="ts">
 import { ref, computed } from 'vue';
-import Icon from '../../../shared/icon.vue';
 import Pagination from '../../../shared/pagination.vue';
 import RemoveLanguageModal from './remove-language-modal.vue';
 import RequestDeletionModal from './request-deletion-modal.vue';
 import BibleTranslationsModal from './bible-translations-modal.vue';
+import LanguageTableRow from './language-table-row.vue';
 import type { LanguageTableItem } from '../../../../types';
-import MemberRow from './member-row.vue';
-import RingBlock from '../../../dashboard/ring-block.vue';
-import LangStrip from './language-strip.vue';
 import { sortLanguagesByDisplayName } from '../../../shared/helpers';
 
 const props = withDefaults(
   defineProps<{
     items: LanguageTableItem[];
+    sourceLanguage: LanguageTableItem;
     itemsPerPage?: number;
   }>(),
   { itemsPerPage: 10 },
@@ -174,6 +118,11 @@ const paginatedItems = computed(() => {
   return sortedItems.value.slice(startIndex, endIndex);
 });
 
+const displayRows = computed(() => [
+  { item: props.sourceLanguage, isSource: true },
+  ...paginatedItems.value.map((item) => ({ item, isSource: false })),
+]);
+
 const handlePageChange = (page: number) => {
   currentPage.value = page;
 };
@@ -183,8 +132,12 @@ const removeModalLocale = ref<string | null>(null);
 const requestDeletionModalLocale = ref<string | null>(null);
 const bibleTranslationsModalLocale = ref<string | null>(null);
 
+const allLanguageItems = computed(() => [props.sourceLanguage, ...props.items]);
+
 const bibleTranslationsModalItem = computed(
-  () => props.items.find((i) => i.locale === bibleTranslationsModalLocale.value) ?? null,
+  () =>
+    allLanguageItems.value.find((item) => item.locale === bibleTranslationsModalLocale.value) ??
+    null,
 );
 
 const toggleActions = (locale: string) => {
@@ -193,7 +146,11 @@ const toggleActions = (locale: string) => {
 
 const handleRemoveOrRequestDeletion = (item: LanguageTableItem) => {
   openActionsLocale.value = null;
-  if (hasContent(item)) {
+  const content = item.translationProgress?.find((p) => p.name === 'Content');
+  const ui = item.translationProgress?.find((p) => p.name === 'Interface');
+  const hasContent = (content?.done ?? 0) > 0 || (ui?.done ?? 0) > 0;
+
+  if (hasContent) {
     requestDeletionModalLocale.value = item.locale;
   } else {
     removeModalLocale.value = item.locale;
@@ -231,15 +188,4 @@ const handleBibleTranslationConfirm = (
   }
   closeBibleTranslationsModal();
 };
-
-const truncate = (s: string | null | undefined, max: number) => {
-  const text = s ?? '—';
-  return text.length > max ? `${text.slice(0, max)}…` : text;
-};
-
-const hasContent = (item: LanguageTableItem) => {
-  const content = item.translationProgress?.find((p) => p.name === 'Content');
-  const ui = item.translationProgress?.find((p) => p.name === 'Interface');
-  return (content?.done ?? 0) > 0 || (ui?.done ?? 0) > 0;
-};
 </script>
diff --git a/src/frontend/settings/settings-index.vue b/src/frontend/settings/settings-index.vue
index b907a161..e156a7f6 100644
--- a/src/frontend/settings/settings-index.vue
+++ b/src/frontend/settings/settings-index.vue
@@ -30,14 +30,9 @@
       </ContentHeader>
     </template>
     <div class="mt-5">
-      <SourceLang
-        :spec="sourceLanguage"
-        @bible-translation-change="handleSourceBibleTranslationChange"
-      />
-    </div>
-    <div class="mt-7">
       <LanguagesTable
         :items="languageItems"
+        :source-language="sourceLanguage"
         @remove="handleRemove"
         @request-deletion="handleRequestDeletion"
         @bible-translation-change="handleTableBibleTranslationChange"
@@ -67,7 +62,6 @@ import AppLayout from '../shared/app-layout.vue';
 import ContentHeader from '../shared/content-header.vue';
 import Icon from '../shared/icon.vue';
 import PillButton from '../shared/pill-button.vue';
-import SourceLang from './languages/components/source-language.vue';
 import LanguagesTable from './languages/components/language-table.vue';
 import RequestAppUpdateModal from './languages/components/request-app-update-modal.vue';
 import RequestFeedbackModal from './languages/components/request-feedback-modal.vue';
@@ -208,13 +202,6 @@ const persistBibleTranslation = (
   );
 };
 
-const handleSourceBibleTranslationChange = (
-  bibleVersion: string,
-  bibleVersionName: string,
-) => {
-  persistBibleTranslation(sourceLanguage.value.locale, bibleVersion, bibleVersionName);
-};
-
 const handleTableBibleTranslationChange = (
   item: LanguageTableItem,
   bibleVersion: string,
diff --git a/src/frontend/test/mocks.ts b/src/frontend/test/mocks.ts
index eedce499..788b3b32 100644
--- a/src/frontend/test/mocks.ts
+++ b/src/frontend/test/mocks.ts
@@ -1059,12 +1059,42 @@ export const languageTableItems: LanguageTableItem[] = [
   },
 ];
 
-export const sourceLanguage: LanguageSpecification = {
+export const sourceLanguage: LanguageTableItem = {
   language: 'English | American',
   locale: 'en',
   languageDirection: 'ltr',
   bibleVersion: 'de4e12af7f28f599-01',
   bibleLabel: '(KJV) King James Version',
+  translationProgress: [
+    { name: 'Interface', done: 100, draft: 0, total: 100 },
+    { name: 'Content', done: 250, draft: 25, total: 300 },
+  ],
+  teamMembers: [
+    {
+      id: 1,
+      name: 'John Doe',
+      initials: 'JD',
+      email: 'john@example.com',
+      isManager: true,
+      isAdmin: true,
+      role: 'editor',
+      language: null,
+      hasPendingInvite: false,
+      isAllowed: isAllowedMock(true),
+    },
+    {
+      id: 2,
+      name: 'Jane Smith',
+      initials: 'JS',
+      email: 'jane.smith@example.com',
+      isManager: false,
+      isAdmin: false,
+      role: 'editor',
+      language: null,
+      hasPendingInvite: false,
+      isAllowed: isAllowedMock(true),
+    },
+  ],
 };
 
 export const manyLanguageTableItems: LanguageTableItem[] = [
diff --git a/src/types.ts b/src/types.ts
index d458f410..0a2294e0 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -673,7 +673,7 @@ export interface Providers {
 /// ----------------------------------------------------
 
 export interface SettingsPageProps {
-  sourceLanguage: LanguageSpecification;
+  sourceLanguage: LanguageTableItem;
   languageItems: LanguageTableItem[];
   providers: Providers;
   requireAppUpdate: boolean;

From 690e7d17b9faf357ed87e727a9227a7800b232e0 Mon Sep 17 00:00:00 2001
From: Timothy Koech <timosville@gmail.com>
Date: Tue, 9 Jun 2026 08:55:03 +0300
Subject: [PATCH 03/10] refactor: enhance language handling in settings
 controller and streamline language table item creation

---
 .../controllers/settings_controller.stub      | 70 +++++++++----------
 .../components/language-table-row.vue         |  2 +-
 2 files changed, 34 insertions(+), 38 deletions(-)

diff --git a/src/backend/stubs/controllers/settings_controller.stub b/src/backend/stubs/controllers/settings_controller.stub
index e8ef381a..487f1441 100644
--- a/src/backend/stubs/controllers/settings_controller.stub
+++ b/src/backend/stubs/controllers/settings_controller.stub
@@ -53,19 +53,36 @@ const SUPPORT_CODES = {
 
 type SupportCode = (typeof SUPPORT_CODES)[keyof typeof SUPPORT_CODES]['code'];
 
-function languageDisplayName(language: string): string {
-  return language.split('|')[0].trim();
-}
+const defaultTranslationProgress = [
+  { name: 'Interface', done: 0, draft: 0, total: 0 },
+  { name: 'Content', done: 0, draft: 0, total: 0 },
+];
 
-function parseLanguageForSupport(
+function toLanguageTableItem(
   spec: LanguageSpecification,
-): SupportRequestLanguageSpec {
+  translationProgressByLocale: Record<string, LanguageTableItem['translationProgress']>,
+  users: InstanceType<typeof User>[],
+): LanguageTableItem {
+  return {
+    language: spec.language,
+    languageDirection: spec.languageDirection,
+    locale: spec.locale,
+    bibleLabel: spec.bibleLabel,
+    bibleVersion: spec.bibleVersion,
+    translationProgress:
+      translationProgressByLocale[spec.locale] ?? defaultTranslationProgress,
+    teamMembers: users
+      .filter((user) => user.language === spec.locale)
+      .map((user) => user.meta),
+  };
+}
+
+function parseLanguageForSupport(spec: LanguageSpecification): SupportRequestLanguageSpec {
   const { language, locale } = spec;
-  const name = languageDisplayName(language);
+  const name = language.split('|')[0].trim();
 
   if (language.includes('|')) {
-    const nativeName = language.split('|')[1].trim();
-    return { name, nativeName, locale };
+    return { name, nativeName: language.split('|')[1].trim(), locale };
   }
 
   return { name, nativeName: language, locale };
@@ -90,42 +107,21 @@ export default class SettingsController {
       (progressItems ?? []).map((item) => [item.locale, item.progress]),
     );
 
-    const defaultTranslationProgress = [
-      { name: 'Interface', done: 0, draft: 0, total: 0 },
-      { name: 'Content', done: 0, draft: 0, total: 0 },
-    ];
-
     const users = await User.query().where('name', '!=', 'redacted');
 
-    const sourceLanguage: LanguageTableItem = {
-      language: sourceLanguageSpec.language,
-      languageDirection: sourceLanguageSpec.languageDirection,
-      locale: sourceLanguageSpec.locale,
-      bibleLabel: sourceLanguageSpec.bibleLabel,
-      bibleVersion: sourceLanguageSpec.bibleVersion,
-      translationProgress:
-        translationProgressByLocale[sourceLanguageSpec.locale] ?? defaultTranslationProgress,
-      teamMembers: users
-        .filter((user) => user.language === sourceLanguageSpec.locale)
-        .map((user) => user.meta),
-    };
+    const sourceLanguage = toLanguageTableItem(
+      sourceLanguageSpec,
+      translationProgressByLocale,
+      users,
+    );
 
     const languageItems: LanguageTableItem[] = cms.config.languages
       .filter(
         (language: LanguageSpecification) => language.locale !== sourceLanguage.locale,
       )
-      .map((language: LanguageSpecification) => ({
-        language: language.language,
-        languageDirection: language.languageDirection,
-        locale: language.locale,
-        bibleLabel: language.bibleLabel,
-        bibleVersion: language.bibleVersion,
-        translationProgress:
-          translationProgressByLocale[language.locale] ?? defaultTranslationProgress,
-        teamMembers: users
-          .filter((user) => user.language === language.locale)
-          .map((user) => user.meta),
-      }));
+      .map((language: LanguageSpecification) =>
+        toLanguageTableItem(language, translationProgressByLocale, users),
+      );
 
     const props: SettingsPageProps = {
       sourceLanguage,
diff --git a/src/frontend/settings/languages/components/language-table-row.vue b/src/frontend/settings/languages/components/language-table-row.vue
index 86f3178b..66ac87bf 100644
--- a/src/frontend/settings/languages/components/language-table-row.vue
+++ b/src/frontend/settings/languages/components/language-table-row.vue
@@ -1,5 +1,5 @@
 <template>
-  <tr class="relative" :class="{ 'bg-gray-50': isSource }">
+  <tr class="relative">
     <td
       class="flex flex-col whitespace-nowrap px-3 py-4 text-sm text-gray-800"
       :class="{ 'gap-2': !isSource }"

From 29af7d038210fcbcd8a0632c8c07195edba36002 Mon Sep 17 00:00:00 2001
From: Timothy Koech <timosville@gmail.com>
Date: Tue, 9 Jun 2026 09:26:49 +0300
Subject: [PATCH 04/10] refactor: introduce utility functions for language
 configuration and enhance settings actions

---
 .../controllers/settings_controller.stub      | 28 +++---
 .../components/language-table-row.vue         | 15 ++--
 .../languages/components/language-table.vue   | 20 +++--
 .../components/source-language.story.vue      | 22 -----
 .../languages/components/source-language.vue  | 65 --------------
 .../languages/languages-edit.story.vue        |  6 +-
 .../settings/languages/languages-edit.vue     | 87 +++++++++----------
 src/frontend/settings/settings-actions.ts     | 69 +++++++++++++++
 src/frontend/settings/settings-index.vue      | 64 +++++---------
 9 files changed, 167 insertions(+), 209 deletions(-)
 delete mode 100644 src/frontend/settings/languages/components/source-language.story.vue
 delete mode 100644 src/frontend/settings/languages/components/source-language.vue
 create mode 100644 src/frontend/settings/settings-actions.ts

diff --git a/src/backend/stubs/controllers/settings_controller.stub b/src/backend/stubs/controllers/settings_controller.stub
index 487f1441..1c88c9a3 100644
--- a/src/backend/stubs/controllers/settings_controller.stub
+++ b/src/backend/stubs/controllers/settings_controller.stub
@@ -88,6 +88,16 @@ function parseLanguageForSupport(spec: LanguageSpecification): SupportRequestLan
   return { name, nativeName: language, locale };
 }
 
+function findConfiguredLanguage(locale: string): LanguageSpecification | undefined {
+  return cms.config.languages.find(
+    (lang: LanguageSpecification) => lang.locale === locale,
+  );
+}
+
+function patchLanguages(languages: LanguageSpecification[]) {
+  return cms.patchConfig({ languages });
+}
+
 function supportCodeDefinition(code: string): SupportCodeDefinition | undefined {
   return Object.values(SUPPORT_CODES).find((definition) => definition.code === code);
 }
@@ -157,7 +167,7 @@ export default class SettingsController {
     );
 
     if (toAdd.length > 0) {
-      await cms.patchConfig({ languages: [...cms.config.languages, ...toAdd] });
+      await patchLanguages([...cms.config.languages, ...toAdd]);
     }
 
     return ctx.response.redirect().back();
@@ -172,9 +182,7 @@ export default class SettingsController {
       'bibleVersionName',
     ]);
 
-    const language = cms.config.languages.find(
-      (lang: LanguageSpecification) => lang.locale === languageLocale,
-    );
+    const language = findConfiguredLanguage(languageLocale);
     if (!language) {
       return ctx.response.notFound({ error: 'Language not found' });
     }
@@ -185,7 +193,7 @@ export default class SettingsController {
         : lang,
     );
 
-    await cms.patchConfig({ languages });
+    await patchLanguages(languages);
 
     return ctx.response.redirect().back();
   }
@@ -199,9 +207,7 @@ export default class SettingsController {
       return ctx.response.badRequest({ error: 'Cannot remove the source language' });
     }
 
-    const language = cms.config.languages.find(
-      (lang: LanguageSpecification) => lang.locale === languageLocale,
-    );
+    const language = findConfiguredLanguage(languageLocale);
     if (!language) {
       return ctx.response.notFound({ error: 'Language not found' });
     }
@@ -210,7 +216,7 @@ export default class SettingsController {
       (lang: LanguageSpecification) => lang.locale !== languageLocale,
     );
 
-    await cms.patchConfig({ languages });
+    await patchLanguages(languages);
 
     return ctx.response.redirect().back();
   }
@@ -233,9 +239,7 @@ export default class SettingsController {
 
     let language: SupportRequestLanguageSpec | undefined;
     if (supportCode === 'REMOVE_LANGUAGE' && removeLanguageCode) {
-      const languageSpec = cms.config.languages.find(
-        (lang: LanguageSpecification) => lang.locale === removeLanguageCode,
-      );
+      const languageSpec = findConfiguredLanguage(removeLanguageCode);
       if (languageSpec) {
         language = parseLanguageForSupport(languageSpec);
       }
diff --git a/src/frontend/settings/languages/components/language-table-row.vue b/src/frontend/settings/languages/components/language-table-row.vue
index 66ac87bf..b32c70fa 100644
--- a/src/frontend/settings/languages/components/language-table-row.vue
+++ b/src/frontend/settings/languages/components/language-table-row.vue
@@ -61,11 +61,13 @@
           Change Bible translation
         </button>
         <button
-          v-if="!isSource"
+          v-if="!isSource && deletionMode"
           class="w-full px-6 py-2 pb-3 text-left text-sm font-normal leading-5 text-gray-800 hover:bg-gray-100"
           @click="emit('removeOrRequestDeletion', item)"
         >
-          {{ hasContent(item) ? 'Request language deletion' : 'Remove language' }}
+          {{
+            deletionMode === 'request' ? 'Request language deletion' : 'Remove language'
+          }}
         </button>
       </div>
     </td>
@@ -84,9 +86,10 @@ const props = withDefaults(
   defineProps<{
     item: LanguageTableItem;
     isSource?: boolean;
+    deletionMode?: 'remove' | 'request';
     openActionsLocale: string | null;
   }>(),
-  { isSource: false },
+  { isSource: false, deletionMode: undefined },
 );
 
 const emit = defineEmits<{
@@ -109,10 +112,4 @@ const truncate = (s: string | null | undefined, max: number) => {
   const text = s ?? '—';
   return text.length > max ? `${text.slice(0, max)}…` : text;
 };
-
-const hasContent = (item: LanguageTableItem) => {
-  const content = item.translationProgress?.find((p) => p.name === 'Content');
-  const ui = item.translationProgress?.find((p) => p.name === 'Interface');
-  return (content?.done ?? 0) > 0 || (ui?.done ?? 0) > 0;
-};
 </script>
diff --git a/src/frontend/settings/languages/components/language-table.vue b/src/frontend/settings/languages/components/language-table.vue
index e8bb62d5..bd32d5c2 100644
--- a/src/frontend/settings/languages/components/language-table.vue
+++ b/src/frontend/settings/languages/components/language-table.vue
@@ -44,6 +44,7 @@
           :key="row.item.locale"
           :item="row.item"
           :is-source="row.isSource"
+          :deletion-mode="row.deletionMode"
           :open-actions-locale="openActionsLocale"
           @toggle-actions="toggleActions"
           @open-bible-translations="openBibleTranslationsModal"
@@ -110,6 +111,12 @@ const emit = defineEmits<{
   ];
 }>();
 
+const hasTranslationContent = (item: LanguageTableItem) => {
+  const content = item.translationProgress?.find((p) => p.name === 'Content');
+  const ui = item.translationProgress?.find((p) => p.name === 'Interface');
+  return (content?.done ?? 0) > 0 || (ui?.done ?? 0) > 0;
+};
+
 const currentPage = ref(1);
 const sortedItems = computed(() => sortLanguagesByDisplayName(props.items));
 const paginatedItems = computed(() => {
@@ -119,8 +126,12 @@ const paginatedItems = computed(() => {
 });
 
 const displayRows = computed(() => [
-  { item: props.sourceLanguage, isSource: true },
-  ...paginatedItems.value.map((item) => ({ item, isSource: false })),
+  { item: props.sourceLanguage, isSource: true, deletionMode: undefined },
+  ...paginatedItems.value.map((item) => ({
+    item,
+    isSource: false,
+    deletionMode: hasTranslationContent(item) ? ('request' as const) : ('remove' as const),
+  })),
 ]);
 
 const handlePageChange = (page: number) => {
@@ -146,11 +157,8 @@ const toggleActions = (locale: string) => {
 
 const handleRemoveOrRequestDeletion = (item: LanguageTableItem) => {
   openActionsLocale.value = null;
-  const content = item.translationProgress?.find((p) => p.name === 'Content');
-  const ui = item.translationProgress?.find((p) => p.name === 'Interface');
-  const hasContent = (content?.done ?? 0) > 0 || (ui?.done ?? 0) > 0;
 
-  if (hasContent) {
+  if (hasTranslationContent(item)) {
     requestDeletionModalLocale.value = item.locale;
   } else {
     removeModalLocale.value = item.locale;
diff --git a/src/frontend/settings/languages/components/source-language.story.vue b/src/frontend/settings/languages/components/source-language.story.vue
deleted file mode 100644
index e90cf2ed..00000000
--- a/src/frontend/settings/languages/components/source-language.story.vue
+++ /dev/null
@@ -1,22 +0,0 @@
-<template>
-  <Story title="Source Language" group="settings">
-    <Variant title="Default">
-      <div class="rounded-lg bg-white p-4 shadow-md">
-        <SourceLang :spec="sourceLang" />
-      </div>
-    </Variant>
-  </Story>
-</template>
-
-<script setup lang="ts">
-import SourceLang from './source-language.vue';
-import type { LanguageSpecification } from '../../../../types';
-
-const sourceLang: LanguageSpecification = {
-  language: 'English',
-  locale: 'en',
-  languageDirection: 'ltr',
-  bibleVersion: 'de4e12af7f28f599-01',
-  bibleLabel: '(KJV) King James Version',
-};
-</script>
diff --git a/src/frontend/settings/languages/components/source-language.vue b/src/frontend/settings/languages/components/source-language.vue
deleted file mode 100644
index 7a69858a..00000000
--- a/src/frontend/settings/languages/components/source-language.vue
+++ /dev/null
@@ -1,65 +0,0 @@
-<template>
-  <div class="space-y-6 divide-y divide-gray-300">
-    <div class="px-3">
-      <h3 class="text-xl/7 font-semibold leading-7 text-gray-800">Source Language</h3>
-      <p class="text-sm/5 font-normal leading-5 text-gray-500">
-        You cannot change your source language. However upon request you can change the
-        Bible translation of your source language by pressing the three dots.
-      </p>
-    </div>
-    <div class="grid gap-8 px-6 py-3 sm:grid-cols-[minmax(200px,auto)_1fr_auto]">
-      <div class="pr-8">
-        <LangStrip :spec="spec" />
-      </div>
-      <div class="flex flex-col justify-center">
-        <p class="text-sm/5 font-normal leading-5 text-gray-500">
-          {{ spec.bibleLabel }}
-        </p>
-      </div>
-      <div class="flex flex-col items-center justify-center px-4">
-        <button
-          type="button"
-          class="cursor-pointer text-gray-400 hover:text-gray-600"
-          @click="showBibleTranslationsModal = true"
-        >
-          <Icon name="dots-vertical" class="size-5" />
-        </button>
-      </div>
-    </div>
-  </div>
-
-  <BibleTranslationsModal
-    :open="showBibleTranslationsModal"
-    :item="specAsItem"
-    @close="showBibleTranslationsModal = false"
-    @confirm="handleBibleTranslationConfirm"
-  />
-</template>
-
-<script setup lang="ts">
-import { ref, computed } from 'vue';
-import Icon from '../../../shared/icon.vue';
-import LangStrip from './language-strip.vue';
-import BibleTranslationsModal from './bible-translations-modal.vue';
-import type { LanguageSpecification, LanguageTableItem } from '../../../../types';
-
-const props = defineProps<{ spec: LanguageSpecification }>();
-
-const emit = defineEmits<{
-  bibleTranslationChange: [bibleVersion: string, bibleVersionName: string];
-}>();
-
-const showBibleTranslationsModal = ref(false);
-
-const specAsItem = computed<LanguageTableItem | null>(() =>
-  props.spec ? ({ ...props.spec } as LanguageTableItem) : null,
-);
-
-const handleBibleTranslationConfirm = (
-  bibleVersion: string,
-  bibleVersionName: string,
-) => {
-  emit('bibleTranslationChange', bibleVersion, bibleVersionName);
-  showBibleTranslationsModal.value = false;
-};
-</script>
diff --git a/src/frontend/settings/languages/languages-edit.story.vue b/src/frontend/settings/languages/languages-edit.story.vue
index 1cf4ffb4..f465fe0f 100644
--- a/src/frontend/settings/languages/languages-edit.story.vue
+++ b/src/frontend/settings/languages/languages-edit.story.vue
@@ -5,12 +5,8 @@
         :config="sharedProps.config"
         :user="sharedProps.user"
         :language="sharedProps.language"
-        :languages="sharedProps.config.languages"
         :errors="sharedProps.errors"
         :bookmarks="sharedProps.bookmarks"
-        :exclude="[]"
-        :source-language="sourceLanguage"
-        :language-items="[]"
         :added-languages="languages"
       />
     </Variant>
@@ -19,7 +15,7 @@
 
 <script setup lang="ts">
 import LanguagesEdit from './languages-edit.vue';
-import { miniSidebar, sharedProps, sourceLanguage } from '../../test/mocks';
+import { miniSidebar, sharedProps } from '../../test/mocks';
 import type { LanguageSpecification } from '../../../types';
 
 const languages: LanguageSpecification[] = [
diff --git a/src/frontend/settings/languages/languages-edit.vue b/src/frontend/settings/languages/languages-edit.vue
index e5a25557..5c65a2ab 100644
--- a/src/frontend/settings/languages/languages-edit.vue
+++ b/src/frontend/settings/languages/languages-edit.vue
@@ -28,12 +28,10 @@
                 <li
                   v-for="language in selectedLanguages"
                   :key="language.locale"
-                  class="flex items-center justify-between gap-2 rounded-full bg-blue-100 px-[10px] py-1 text-sm font-medium leading-5"
+                  class="flex items-center justify-between gap-2 rounded-full bg-blue-100 px-[10px] py-1"
                 >
-                  <span class="text-sm font-normal leading-5 text-blue-800">
-                    {{ language.language }}</span
-                  >
-                  <button @click="removeSelectedLanguage(language.locale)">
+                  <LangStrip :spec="language" />
+                  <button @click="setLocaleSelected(language.locale, false)">
                     <svg
                       width="8"
                       height="8"
@@ -57,27 +55,27 @@
         </template>
       </ContentHeader>
     </template>
-    <LanguageList :items="languageListItems" @update="handleSelectionUpdate" />
+    <LanguageList :items="languageListItems" @update="setLocaleSelected" />
   </AppLayout>
 </template>
 
 <script setup lang="ts">
 import { ref, computed } from 'vue';
-import { router } from '@inertiajs/vue3';
 import AppLayout from '../../shared/app-layout.vue';
 import ContentHeader from '../../shared/content-header.vue';
 import PillButton from '../../shared/pill-button.vue';
 import LanguageList from './language-list.vue';
-import type {
-  LanguageListItemProps,
-  LanguagesEditProps,
-  LanguageSpecification,
-  SharedPageProps,
+import LangStrip from './components/language-strip.vue';
+import {
+  ResponseStatus,
+  type LanguageListItemProps,
+  type LanguagesEditProps,
+  type LanguageSpecification,
+  type SharedPageProps,
 } from '../../../types';
-import { ResponseStatus } from '../../../types';
 import { languages as allLanguages } from './languages';
-
 import { useSharedStore } from '../../store';
+import { settingsActions } from '../settings-actions';
 import {
   compareLanguagesByDisplayName,
   sortLanguagesByDisplayName,
@@ -86,6 +84,7 @@ import {
 const props = defineProps<LanguagesEditProps & SharedPageProps>();
 
 const shared = useSharedStore();
+const { languagesAddPath, postSettings, visitSettings } = settingsActions();
 
 shared.setFromProps(props);
 shared.setCurrentStoryName('');
@@ -98,38 +97,39 @@ const selectedLocales = ref<Set<string>>(new Set());
 
 const addedLocales = computed(() => new Set(props.addedLanguages.map((l) => l.locale)));
 
-const selectedLanguages = computed((): LanguageSpecification[] =>
-  sortLanguagesByDisplayName(
-    allLanguages.filter((language) => selectedLocales.value.has(language.locale)),
-  ),
-);
-
-const languageListItems = computed((): LanguageListItemProps[] =>
-  allLanguages
-    .map((language): LanguageListItemProps => {
-      if (addedLocales.value.has(language.locale))
-        return { language, status: 'readonly' };
-      const status = selectedLocales.value.has(language.locale)
+const languageState = computed(() => {
+  const listItems: LanguageListItemProps[] = [];
+  const selected: LanguageSpecification[] = [];
+
+  for (const language of allLanguages) {
+    const status = addedLocales.value.has(language.locale)
+      ? 'readonly'
+      : selectedLocales.value.has(language.locale)
         ? 'selected'
         : 'available';
-      return { language, status };
-    })
-    .sort((a, b) => compareLanguagesByDisplayName(a.language, b.language)),
-);
 
-const handleSelectionUpdate = (locale: string, isSelected: boolean) => {
+    listItems.push({ language, status });
+    if (status === 'selected') selected.push(language);
+  }
+
+  return {
+    listItems: listItems.sort((a, b) =>
+      compareLanguagesByDisplayName(a.language, b.language),
+    ),
+    selectedLanguages: sortLanguagesByDisplayName(selected),
+  };
+});
+
+const languageListItems = computed(() => languageState.value.listItems);
+const selectedLanguages = computed(() => languageState.value.selectedLanguages);
+
+const setLocaleSelected = (locale: string, isSelected: boolean) => {
   const next = new Set(selectedLocales.value);
   if (isSelected) next.add(locale);
   else next.delete(locale);
   selectedLocales.value = next;
 };
 
-const removeSelectedLanguage = (locale: string) => {
-  const next = new Set(selectedLocales.value);
-  next.delete(locale);
-  selectedLocales.value = next;
-};
-
 const languageAddedMessage = (count: number) =>
   count === 1 ? 'Your language has been added.' : 'Your languages have been added.';
 
@@ -147,14 +147,13 @@ const submitLanguages = (languages: LanguageSpecification[]) => {
     languageDirection,
   }));
 
-  router.post(
-    `/${shared.locale}/settings/languages/add`,
+  postSettings(
+    languagesAddPath(),
     { languages: payload },
     {
-      preserveScroll: true,
+      failureMessage: 'Error adding languages',
       onSuccess: () => {
-        router.visit(`/${shared.locale}/settings`, {
-          preserveScroll: true,
+        visitSettings({
           onSuccess: () => {
             shared.addMessage(
               ResponseStatus.Confirmation,
@@ -164,10 +163,6 @@ const submitLanguages = (languages: LanguageSpecification[]) => {
           },
         });
       },
-      onError: (errors) => {
-        shared.setErrors(errors);
-        shared.addMessage(ResponseStatus.Failure, 'Error adding languages');
-      },
     },
   );
 };
diff --git a/src/frontend/settings/settings-actions.ts b/src/frontend/settings/settings-actions.ts
new file mode 100644
index 00000000..c11ab832
--- /dev/null
+++ b/src/frontend/settings/settings-actions.ts
@@ -0,0 +1,69 @@
+import { router } from '@inertiajs/vue3';
+import type { RequestPayload } from '@inertiajs/core';
+import { useSharedStore } from '../store';
+import { ResponseStatus } from '../../types';
+
+type PostSettingsOptions = {
+  onSuccess?: () => void;
+  onError?: () => void;
+  successMessage?: string;
+  successDetail?: string;
+  failureMessage?: string;
+};
+
+export const settingsActions = () => {
+  const shared = useSharedStore();
+  const locale = shared.locale;
+
+  const settingsPath = () => `/${locale}/settings`;
+  const languagesEditPath = () => `/${locale}/settings/languages/edit`;
+  const languagesAddPath = () => `/${locale}/settings/languages/add`;
+  const supportPath = () => `/${locale}/settings/support`;
+  const languageRemovePath = (languageLocale: string) =>
+    `/${locale}/settings/languages/${languageLocale}/remove`;
+  const languageBibleTranslationPath = (languageLocale: string) =>
+    `/${locale}/settings/languages/${languageLocale}/bible-translation`;
+
+  const postSettings = (
+    url: string,
+    payload: Record<string, unknown> | object = {},
+    options: PostSettingsOptions = {},
+  ) => {
+    router.post(url, payload as RequestPayload, {
+      preserveScroll: true,
+      onSuccess: () => {
+        if (options.successMessage) {
+          shared.addMessage(
+            ResponseStatus.Confirmation,
+            options.successMessage,
+            options.successDetail,
+          );
+        }
+        options.onSuccess?.();
+      },
+      onError: (errors) => {
+        shared.setErrors(errors);
+        if (options.failureMessage) {
+          shared.addMessage(ResponseStatus.Failure, options.failureMessage);
+        }
+        options.onError?.();
+      },
+    });
+  };
+
+  const visitSettings = (options: { onSuccess?: () => void } = {}) => {
+    router.visit(settingsPath(), { preserveScroll: true, ...options });
+  };
+
+  return {
+    settingsPath,
+    languagesEditPath,
+    languagesAddPath,
+    supportPath,
+    languageRemovePath,
+    languageBibleTranslationPath,
+    postSettings,
+    visitLanguagesEdit: () => router.visit(languagesEditPath()),
+    visitSettings,
+  };
+};
diff --git a/src/frontend/settings/settings-index.vue b/src/frontend/settings/settings-index.vue
index e156a7f6..8476162b 100644
--- a/src/frontend/settings/settings-index.vue
+++ b/src/frontend/settings/settings-index.vue
@@ -21,7 +21,7 @@
             </div>
             <button
               class="rounded-full bg-blue-500 p-1 shadow-md hover:bg-blue-700"
-              @click="router.visit(`/${shared.locale}/settings/languages/edit`)"
+              @click="visitLanguagesEdit"
             >
               <Icon name="plus" class="text-white" />
             </button>
@@ -56,7 +56,6 @@
 
 <script setup lang="ts">
 import { ref, computed } from 'vue';
-import { router } from '@inertiajs/vue3';
 import type { RequestPayload } from '@inertiajs/core';
 import AppLayout from '../shared/app-layout.vue';
 import ContentHeader from '../shared/content-header.vue';
@@ -65,6 +64,7 @@ import PillButton from '../shared/pill-button.vue';
 import LanguagesTable from './languages/components/language-table.vue';
 import RequestAppUpdateModal from './languages/components/request-app-update-modal.vue';
 import RequestFeedbackModal from './languages/components/request-feedback-modal.vue';
+import { settingsActions } from './settings-actions';
 import {
   type LanguageTableItem,
   type SettingsPageProps,
@@ -78,6 +78,13 @@ const props = defineProps<SettingsPageProps & SharedPageProps>();
 
 const shared = useSharedStore();
 const widgets = useWidgetsStore();
+const {
+  visitLanguagesEdit,
+  postSettings,
+  supportPath,
+  languageRemovePath,
+  languageBibleTranslationPath,
+} = settingsActions();
 
 shared.setFromProps(props);
 shared.setCurrentStoryName('');
@@ -114,18 +121,7 @@ const postSupportRequest = (
     onError?: () => void;
   } = {},
 ) => {
-  router.post(
-    `/${shared.locale}/settings/support`,
-    payload as unknown as RequestPayload,
-    {
-      preserveScroll: true,
-      onSuccess: options.onSuccess,
-      onError: (errors) => {
-        shared.setErrors(errors);
-        options.onError?.();
-      },
-    },
-  );
+  postSettings(supportPath(), payload as unknown as RequestPayload, options);
 };
 
 const handleRequestAppUpdateConfirm = (reasons: string[]) => {
@@ -151,18 +147,12 @@ const handleRequestAppUpdateConfirm = (reasons: string[]) => {
 };
 
 const handleRemove = (item: LanguageTableItem) => {
-  router.post(
-    `/${shared.locale}/settings/languages/${item.locale}/remove`,
+  postSettings(
+    languageRemovePath(item.locale),
     {},
     {
-      preserveScroll: true,
-      onSuccess: () => {
-        shared.addMessage(ResponseStatus.Confirmation, 'Language removed');
-      },
-      onError: (errors) => {
-        shared.setErrors(errors);
-        shared.addMessage(ResponseStatus.Failure, 'Error removing language');
-      },
+      successMessage: 'Language removed',
+      failureMessage: 'Error removing language',
     },
   );
 };
@@ -181,32 +171,18 @@ const handleRequestDeletion = (item: LanguageTableItem) => {
   );
 };
 
-const persistBibleTranslation = (
-  languageLocale: string,
+const handleTableBibleTranslationChange = (
+  item: LanguageTableItem,
   bibleVersion: string,
   bibleVersionName: string,
 ) => {
-  router.post(
-    `/${shared.locale}/settings/languages/${languageLocale}/bible-translation`,
+  postSettings(
+    languageBibleTranslationPath(item.locale),
     { bibleVersion, bibleVersionName },
     {
-      preserveScroll: true,
-      onSuccess: () => {
-        shared.addMessage(ResponseStatus.Confirmation, 'Bible translation changed');
-      },
-      onError: (errors) => {
-        shared.setErrors(errors);
-        shared.addMessage(ResponseStatus.Failure, 'Error updating Bible translation');
-      },
+      successMessage: 'Bible translation changed',
+      failureMessage: 'Error updating Bible translation',
     },
   );
 };
-
-const handleTableBibleTranslationChange = (
-  item: LanguageTableItem,
-  bibleVersion: string,
-  bibleVersionName: string,
-) => {
-  persistBibleTranslation(item.locale, bibleVersion, bibleVersionName);
-};
 </script>

From 9543b0c87ba154e5dfbbca98430357c591dd94db Mon Sep 17 00:00:00 2001
From: Timothy Koech <timosville@gmail.com>
Date: Tue, 9 Jun 2026 09:51:16 +0300
Subject: [PATCH 05/10] refactor: pagination pages

---
 .../components/language-table-row.vue         |  38 +-
 .../languages/components/language-table.vue   |  57 +-
 src/frontend/test/mocks.ts                    | 675 ++++++++++++++++++
 3 files changed, 733 insertions(+), 37 deletions(-)

diff --git a/src/frontend/settings/languages/components/language-table-row.vue b/src/frontend/settings/languages/components/language-table-row.vue
index b32c70fa..2b2b8b0d 100644
--- a/src/frontend/settings/languages/components/language-table-row.vue
+++ b/src/frontend/settings/languages/components/language-table-row.vue
@@ -1,25 +1,27 @@
 <template>
   <tr class="relative">
-    <td
-      class="flex flex-col whitespace-nowrap px-3 py-4 text-sm text-gray-800"
-      :class="{ 'gap-2': !isSource }"
-    >
-      <LangStrip :spec="item" />
-      <p
-        v-if="isSource"
-        class="text-xs font-normal uppercase leading-5 tracking-[0em] text-gray-500"
-      >
-        Source language
-      </p>
+    <td class="max-w-0 px-3 py-4 align-top text-sm text-gray-800">
+      <div class="flex min-w-0 flex-col" :class="{ 'gap-2': !isSource }">
+        <div class="min-w-0 [&_p]:truncate">
+          <LangStrip :spec="item" />
+        </div>
+        <p
+          v-if="isSource"
+          class="truncate text-xs font-normal uppercase leading-5 tracking-[0em] text-gray-500"
+        >
+          Source language
+        </p>
+      </div>
     </td>
     <td class="whitespace-nowrap px-3 py-4 align-top text-sm">
       <RingBlock :progress="rowProgress" />
     </td>
-    <td class="px-3 py-4 align-top text-sm text-gray-800">
-      <div v-if="item.teamMembers?.length" class="flex flex-col gap-1">
+    <td class="max-w-0 px-3 py-4 align-top text-sm text-gray-800">
+      <div v-if="item.teamMembers?.length" class="flex min-w-0 flex-col gap-1">
         <MemberRow
           v-for="member in item.teamMembers"
           :key="member.id"
+          class="min-w-0 [&_p]:truncate"
           :name="member.name"
           :email="member.email"
         />
@@ -32,8 +34,10 @@
         </p>
       </div>
     </td>
-    <td class="whitespace-nowrap px-3 py-4 text-sm font-normal leading-5 text-gray-500">
-      {{ truncate(item.bibleLabel, 30) }}
+    <td class="max-w-0 px-3 py-4 align-top text-sm font-normal leading-5 text-gray-500">
+      <p class="truncate" :title="item.bibleLabel ?? undefined">
+        {{ item.bibleLabel ?? '—' }}
+      </p>
     </td>
     <td class="py-4 pl-3 pr-4 text-right sm:pr-6">
       <button
@@ -108,8 +112,4 @@ const rowProgress = computed(() => {
   return props.item.translationProgress ?? [];
 });
 
-const truncate = (s: string | null | undefined, max: number) => {
-  const text = s ?? '—';
-  return text.length > max ? `${text.slice(0, max)}…` : text;
-};
 </script>
diff --git a/src/frontend/settings/languages/components/language-table.vue b/src/frontend/settings/languages/components/language-table.vue
index bd32d5c2..fee9ec21 100644
--- a/src/frontend/settings/languages/components/language-table.vue
+++ b/src/frontend/settings/languages/components/language-table.vue
@@ -6,12 +6,19 @@
     </p>
   </div>
   <div class="border-2 border-black/5 sm:rounded-lg">
-    <table class="min-w-full divide-y divide-gray-300">
+    <table class="w-full table-fixed divide-y divide-gray-300">
+      <colgroup>
+        <col class="w-[24%]" />
+        <col class="w-[16%]" />
+        <col class="w-[30%]" />
+        <col class="w-[22%]" />
+        <col class="w-[8%]" />
+      </colgroup>
       <thead class="bg-gray-50 uppercase">
         <tr>
           <th
             scope="col"
-            class="px-3 py-3 text-left text-xs font-medium uppercase tracking-wide text-gray-500"
+            class="max-w-0 px-3 py-3 text-left text-xs font-medium uppercase tracking-wide text-gray-500"
           >
             Active translations
           </th>
@@ -23,17 +30,17 @@
           </th>
           <th
             scope="col"
-            class="px-3 py-3 text-left text-xs font-medium uppercase tracking-wide text-gray-500"
+            class="max-w-0 px-3 py-3 text-left text-xs font-medium uppercase tracking-wide text-gray-500"
           >
             Team members
           </th>
           <th
             scope="col"
-            class="px-3 py-3 text-left text-xs font-medium uppercase tracking-wide text-gray-500"
+            class="max-w-0 px-3 py-3 text-left text-xs font-medium uppercase tracking-wide text-gray-500"
           >
             Bible translation
           </th>
-          <th scope="col" class="relative py-3.5 pl-3 pr-4 sm:pr-6">
+          <th scope="col" class="relative w-12 py-3.5 pl-3 pr-4 sm:pr-6">
             <span class="sr-only">Actions</span>
           </th>
         </tr>
@@ -73,9 +80,9 @@
     />
 
     <Pagination
-      v-if="items.length > itemsPerPage"
+      v-if="totalItems > itemsPerPage"
       :current-page="currentPage"
-      :total-items="items.length"
+      :total-items="totalItems"
       :items-per-page="itemsPerPage"
       @page-change="handlePageChange"
     />
@@ -119,20 +126,34 @@ const hasTranslationContent = (item: LanguageTableItem) => {
 
 const currentPage = ref(1);
 const sortedItems = computed(() => sortLanguagesByDisplayName(props.items));
+const totalItems = computed(() => props.items.length + 1);
+
 const paginatedItems = computed(() => {
-  const startIndex = (currentPage.value - 1) * props.itemsPerPage;
-  const endIndex = startIndex + props.itemsPerPage;
-  return sortedItems.value.slice(startIndex, endIndex);
+  const sorted = sortedItems.value;
+
+  if (currentPage.value === 1) {
+    return sorted.slice(0, props.itemsPerPage - 1);
+  }
+
+  const startIndex = props.itemsPerPage - 1 + (currentPage.value - 2) * props.itemsPerPage;
+  return sorted.slice(startIndex, startIndex + props.itemsPerPage);
 });
 
-const displayRows = computed(() => [
-  { item: props.sourceLanguage, isSource: true, deletionMode: undefined },
-  ...paginatedItems.value.map((item) => ({
-    item,
-    isSource: false,
-    deletionMode: hasTranslationContent(item) ? ('request' as const) : ('remove' as const),
-  })),
-]);
+const displayRows = computed(() => {
+  const sourceRow =
+    currentPage.value === 1
+      ? [{ item: props.sourceLanguage, isSource: true, deletionMode: undefined }]
+      : [];
+
+  return [
+    ...sourceRow,
+    ...paginatedItems.value.map((item) => ({
+      item,
+      isSource: false,
+      deletionMode: hasTranslationContent(item) ? ('request' as const) : ('remove' as const),
+    })),
+  ];
+});
 
 const handlePageChange = (page: number) => {
   currentPage.value = page;
diff --git a/src/frontend/test/mocks.ts b/src/frontend/test/mocks.ts
index 788b3b32..5b9c200e 100644
--- a/src/frontend/test/mocks.ts
+++ b/src/frontend/test/mocks.ts
@@ -1135,6 +1135,681 @@ export const manyLanguageTableItems: LanguageTableItem[] = [
       },
     ],
   },
+  {
+    language: 'Afrikaans',
+    languageDirection: 'ltr',
+    locale: 'af',
+    bibleLabel: 'Die Bybel',
+    translationProgress: [
+      { name: 'Interface', done: 42, draft: 8, total: 100 },
+      { name: 'Content', done: 120, draft: 15, total: 300 },
+    ],
+    teamMembers: [
+      {
+        id: 11,
+        name: 'Pieter van Wyk',
+        initials: 'PW',
+        email: 'pieter.vanwyk@example.com',
+        isManager: false,
+        isAdmin: false,
+        role: 'editor',
+        language: null,
+        hasPendingInvite: false,
+        isAllowed: isAllowedMock(true),
+      },
+    ],
+  },
+  {
+    language: 'Amharic - አማርኛ',
+    languageDirection: 'ltr',
+    locale: 'am',
+    bibleLabel: 'Amharic Bible',
+    translationProgress: [
+      { name: 'Interface', done: 15, draft: 5, total: 100 },
+      { name: 'Content', done: 45, draft: 10, total: 200 },
+    ],
+    teamMembers: [],
+  },
+  {
+    language: 'Assamese - অসমীয়া',
+    languageDirection: 'ltr',
+    locale: 'as',
+    bibleLabel: 'Assamese Bible',
+    translationProgress: [
+      { name: 'Interface', done: 60, draft: 0, total: 100 },
+      { name: 'Content', done: 180, draft: 20, total: 300 },
+    ],
+    teamMembers: [
+      {
+        id: 12,
+        name: 'Ananya Das',
+        initials: 'AD',
+        email: 'ananya.das@example.com',
+        isManager: false,
+        isAdmin: false,
+        role: 'translator',
+        language: null,
+        hasPendingInvite: false,
+        isAllowed: isAllowedMock(true),
+      },
+      {
+        id: 13,
+        name: 'Rohan Baruah',
+        initials: 'RB',
+        email: 'rohan.baruah@example.com',
+        isManager: false,
+        isAdmin: false,
+        role: 'editor',
+        language: null,
+        hasPendingInvite: true,
+        isAllowed: isAllowedMock(true),
+      },
+    ],
+  },
+  {
+    language: 'Azerbaijani - Azərbaycan',
+    languageDirection: 'ltr',
+    locale: 'az',
+    bibleLabel: 'Azərbaycan Müqəddəs Kitabı',
+    translationProgress: [
+      { name: 'Interface', done: 90, draft: 0, total: 100 },
+      { name: 'Content', done: 270, draft: 0, total: 300 },
+    ],
+    teamMembers: [
+      {
+        id: 14,
+        name: 'Elvin Mammadov',
+        initials: 'EM',
+        email: 'elvin.mammadov@example.com',
+        isManager: true,
+        isAdmin: false,
+        role: 'admin',
+        language: null,
+        hasPendingInvite: false,
+        isAllowed: isAllowedMock(true),
+      },
+    ],
+  },
+  {
+    language: 'Belarusian - Беларуская',
+    languageDirection: 'ltr',
+    locale: 'be',
+    bibleLabel: 'Біблія',
+    translationProgress: [
+      { name: 'Interface', done: 30, draft: 12, total: 100 },
+      { name: 'Content', done: 90, draft: 30, total: 250 },
+    ],
+    teamMembers: [],
+  },
+  {
+    language: 'Bulgarian - Български',
+    languageDirection: 'ltr',
+    locale: 'bg',
+    bibleLabel: 'Библия',
+    translationProgress: [
+      { name: 'Interface', done: 75, draft: 5, total: 100 },
+      { name: 'Content', done: 210, draft: 0, total: 300 },
+    ],
+    teamMembers: [
+      {
+        id: 15,
+        name: 'Ivana Petrova',
+        initials: 'IP',
+        email: 'ivana.petrova@example.com',
+        isManager: false,
+        isAdmin: false,
+        role: 'editor',
+        language: null,
+        hasPendingInvite: false,
+        isAllowed: isAllowedMock(true),
+      },
+    ],
+  },
+  {
+    language: 'Tibetan - བོད་ཡིག',
+    languageDirection: 'ltr',
+    locale: 'bo',
+    bibleLabel: 'Tibetan Bible',
+    translationProgress: [
+      { name: 'Interface', done: 5, draft: 2, total: 100 },
+      { name: 'Content', done: 12, draft: 3, total: 150 },
+    ],
+    teamMembers: [],
+  },
+  {
+    language: 'Bosnian - Bosanski',
+    languageDirection: 'ltr',
+    locale: 'bs',
+    bibleLabel: 'Biblija',
+    translationProgress: [
+      { name: 'Interface', done: 55, draft: 10, total: 100 },
+      { name: 'Content', done: 165, draft: 15, total: 300 },
+    ],
+    teamMembers: [
+      {
+        id: 16,
+        name: 'Amira Hodžić',
+        initials: 'AH',
+        email: 'amira.hodzic@example.com',
+        isManager: false,
+        isAdmin: false,
+        role: 'editor',
+        language: null,
+        hasPendingInvite: false,
+        isAllowed: isAllowedMock(true),
+      },
+    ],
+  },
+  {
+    language: 'Catalan Valencian - Català',
+    languageDirection: 'ltr',
+    locale: 'ca',
+    bibleLabel: 'Bíblia Catalana',
+    translationProgress: [
+      { name: 'Interface', done: 100, draft: 0, total: 100 },
+      { name: 'Content', done: 300, draft: 0, total: 300 },
+    ],
+    teamMembers: [
+      {
+        id: 17,
+        name: 'Marc Soler',
+        initials: 'MS',
+        email: 'marc.soler@example.com',
+        isManager: false,
+        isAdmin: true,
+        role: 'admin',
+        language: null,
+        hasPendingInvite: false,
+        isAllowed: isAllowedMock(true),
+      },
+      {
+        id: 18,
+        name: 'Laia Ferrer',
+        initials: 'LF',
+        email: 'laia.ferrer@example.com',
+        isManager: false,
+        isAdmin: false,
+        role: 'editor',
+        language: null,
+        hasPendingInvite: false,
+        isAllowed: isAllowedMock(true),
+      },
+    ],
+  },
+  {
+    language: 'Czech - Čeština',
+    languageDirection: 'ltr',
+    locale: 'cs',
+    bibleLabel: 'Bible kralická',
+    translationProgress: [
+      { name: 'Interface', done: 68, draft: 7, total: 100 },
+      { name: 'Content', done: 204, draft: 6, total: 300 },
+    ],
+    teamMembers: [
+      {
+        id: 19,
+        name: 'Tomáš Novák',
+        initials: 'TN',
+        email: 'tomas.novak@example.com',
+        isManager: false,
+        isAdmin: false,
+        role: 'editor',
+        language: null,
+        hasPendingInvite: false,
+        isAllowed: isAllowedMock(true),
+      },
+    ],
+  },
+  {
+    language: 'Welsh - Cymraeg',
+    languageDirection: 'ltr',
+    locale: 'cy',
+    bibleLabel: 'Y Beibl Cymraeg',
+    translationProgress: [
+      { name: 'Interface', done: 22, draft: 8, total: 100 },
+      { name: 'Content', done: 66, draft: 12, total: 200 },
+    ],
+    teamMembers: [],
+  },
+  {
+    language: 'Danish - Dansk',
+    languageDirection: 'ltr',
+    locale: 'da',
+    bibleLabel: 'Bibelen på dansk',
+    translationProgress: [
+      { name: 'Interface', done: 95, draft: 0, total: 100 },
+      { name: 'Content', done: 285, draft: 5, total: 300 },
+    ],
+    teamMembers: [
+      {
+        id: 20,
+        name: 'Freja Andersen',
+        initials: 'FA',
+        email: 'freja.andersen@example.com',
+        isManager: false,
+        isAdmin: false,
+        role: 'translator',
+        language: null,
+        hasPendingInvite: false,
+        isAllowed: isAllowedMock(true),
+      },
+    ],
+  },
+  {
+    language: 'Modern Greek - Ελληνικά',
+    languageDirection: 'ltr',
+    locale: 'el',
+    bibleLabel: 'Βίβλος',
+    translationProgress: [
+      { name: 'Interface', done: 80, draft: 0, total: 100 },
+      { name: 'Content', done: 240, draft: 0, total: 300 },
+    ],
+    teamMembers: [
+      {
+        id: 21,
+        name: 'Elena Papadopoulos',
+        initials: 'EP',
+        email: 'elena.papadopoulos@example.com',
+        isManager: false,
+        isAdmin: false,
+        role: 'editor',
+        language: null,
+        hasPendingInvite: false,
+        isAllowed: isAllowedMock(true),
+      },
+      {
+        id: 22,
+        name: 'Nikos Georgiou',
+        initials: 'NG',
+        email: 'nikos.georgiou@example.com',
+        isManager: false,
+        isAdmin: false,
+        role: 'editor',
+        language: null,
+        hasPendingInvite: false,
+        isAllowed: isAllowedMock(true),
+      },
+    ],
+  },
+  {
+    language: 'Estonian - Eesti',
+    languageDirection: 'ltr',
+    locale: 'et',
+    bibleLabel: 'Piibel',
+    translationProgress: [
+      { name: 'Interface', done: 50, draft: 15, total: 100 },
+      { name: 'Content', done: 150, draft: 25, total: 300 },
+    ],
+    teamMembers: [],
+  },
+  {
+    language: 'Basque - Euskara',
+    languageDirection: 'ltr',
+    locale: 'eu',
+    bibleLabel: 'Euskal Biblia',
+    translationProgress: [
+      { name: 'Interface', done: 35, draft: 5, total: 100 },
+      { name: 'Content', done: 105, draft: 10, total: 300 },
+    ],
+    teamMembers: [
+      {
+        id: 23,
+        name: 'Ane Iturrioz',
+        initials: 'AI',
+        email: 'ane.iturrioz@example.com',
+        isManager: false,
+        isAdmin: false,
+        role: 'editor',
+        language: null,
+        hasPendingInvite: false,
+        isAllowed: isAllowedMock(true),
+      },
+    ],
+  },
+  {
+    language: 'Persian - فارسی',
+    languageDirection: 'rtl',
+    locale: 'fa',
+    bibleLabel: 'ترجمه فارسی',
+    translationProgress: [
+      { name: 'Interface', done: 72, draft: 3, total: 100 },
+      { name: 'Content', done: 216, draft: 9, total: 300 },
+    ],
+    teamMembers: [
+      {
+        id: 24,
+        name: 'Sara Rahmani',
+        initials: 'SR',
+        email: 'sara.rahmani@example.com',
+        isManager: false,
+        isAdmin: false,
+        role: 'editor',
+        language: null,
+        hasPendingInvite: false,
+        isAllowed: isAllowedMock(true),
+      },
+    ],
+  },
+  {
+    language: 'Finnish - Suomi',
+    languageDirection: 'ltr',
+    locale: 'fi',
+    bibleLabel: 'Raamattu',
+    translationProgress: [
+      { name: 'Interface', done: 100, draft: 0, total: 100 },
+      { name: 'Content', done: 298, draft: 2, total: 300 },
+    ],
+    teamMembers: [
+      {
+        id: 25,
+        name: 'Mikko Virtanen',
+        initials: 'MV',
+        email: 'mikko.virtanen@example.com',
+        isManager: true,
+        isAdmin: false,
+        role: 'admin',
+        language: null,
+        hasPendingInvite: false,
+        isAllowed: isAllowedMock(true),
+      },
+    ],
+  },
+  {
+    language: 'Filipino Pilipino - Pilipino',
+    languageDirection: 'ltr',
+    locale: 'fil',
+    bibleLabel: 'Ang Biblia',
+    translationProgress: [
+      { name: 'Interface', done: 88, draft: 2, total: 100 },
+      { name: 'Content', done: 264, draft: 6, total: 300 },
+    ],
+    teamMembers: [
+      {
+        id: 26,
+        name: 'Maria Santos',
+        initials: 'MS',
+        email: 'maria.santos@example.com',
+        isManager: false,
+        isAdmin: false,
+        role: 'editor',
+        language: null,
+        hasPendingInvite: false,
+        isAllowed: isAllowedMock(true),
+      },
+      {
+        id: 27,
+        name: 'Jose Reyes',
+        initials: 'JR',
+        email: 'jose.reyes@example.com',
+        isManager: false,
+        isAdmin: false,
+        role: 'translator',
+        language: null,
+        hasPendingInvite: false,
+        isAllowed: isAllowedMock(true),
+      },
+    ],
+  },
+  {
+    language: 'Swiss French - Français suisse',
+    languageDirection: 'ltr',
+    locale: 'fr-ch',
+    bibleLabel: 'Bible Segond 21',
+    translationProgress: [
+      { name: 'Interface', done: 62, draft: 8, total: 100 },
+      { name: 'Content', done: 186, draft: 14, total: 300 },
+    ],
+    teamMembers: [],
+  },
+  {
+    language: 'Irish - Gaeilge',
+    languageDirection: 'ltr',
+    locale: 'ga',
+    bibleLabel: 'An Bíobla',
+    translationProgress: [
+      { name: 'Interface', done: 18, draft: 6, total: 100 },
+      { name: 'Content', done: 54, draft: 8, total: 200 },
+    ],
+    teamMembers: [
+      {
+        id: 28,
+        name: 'Siobhán Murphy',
+        initials: 'SM',
+        email: 'siobhan.murphy@example.com',
+        isManager: false,
+        isAdmin: false,
+        role: 'editor',
+        language: null,
+        hasPendingInvite: false,
+        isAllowed: isAllowedMock(true),
+      },
+    ],
+  },
+  {
+    language: 'Galician - Galego',
+    languageDirection: 'ltr',
+    locale: 'gl',
+    bibleLabel: 'Biblia Galega',
+    translationProgress: [
+      { name: 'Interface', done: 45, draft: 10, total: 100 },
+      { name: 'Content', done: 135, draft: 20, total: 300 },
+    ],
+    teamMembers: [],
+  },
+  {
+    language: 'Swiss German Alemannic Alsatian - Alemannisch',
+    languageDirection: 'ltr',
+    locale: 'gsw',
+    bibleLabel: 'Schwyzerdütsch Bibel',
+    translationProgress: [
+      { name: 'Interface', done: 28, draft: 4, total: 100 },
+      { name: 'Content', done: 84, draft: 6, total: 300 },
+    ],
+    teamMembers: [
+      {
+        id: 29,
+        name: 'Hans Müller',
+        initials: 'HM',
+        email: 'hans.muller@example.com',
+        isManager: false,
+        isAdmin: false,
+        role: 'editor',
+        language: null,
+        hasPendingInvite: false,
+        isAllowed: isAllowedMock(true),
+      },
+    ],
+  },
+  {
+    language: 'Gujarati - ગુજરાતી',
+    languageDirection: 'ltr',
+    locale: 'gu',
+    bibleLabel: 'Gujarati Bible',
+    translationProgress: [
+      { name: 'Interface', done: 58, draft: 12, total: 100 },
+      { name: 'Content', done: 174, draft: 18, total: 300 },
+    ],
+    teamMembers: [
+      {
+        id: 30,
+        name: 'Priya Shah',
+        initials: 'PS',
+        email: 'priya.shah@example.com',
+        isManager: false,
+        isAdmin: false,
+        role: 'editor',
+        language: null,
+        hasPendingInvite: false,
+        isAllowed: isAllowedMock(true),
+      },
+      {
+        id: 31,
+        name: 'Raj Patel',
+        initials: 'RP',
+        email: 'raj.patel@example.com',
+        isManager: false,
+        isAdmin: false,
+        role: 'translator',
+        language: null,
+        hasPendingInvite: true,
+        isAllowed: isAllowedMock(true),
+      },
+    ],
+  },
+  {
+    language: 'Hebrew - עברית',
+    languageDirection: 'rtl',
+    locale: 'he',
+    bibleLabel: 'תנ״ך',
+    translationProgress: [
+      { name: 'Interface', done: 92, draft: 0, total: 100 },
+      { name: 'Content', done: 276, draft: 0, total: 300 },
+    ],
+    teamMembers: [
+      {
+        id: 32,
+        name: 'David Cohen',
+        initials: 'DC',
+        email: 'david.cohen@example.com',
+        isManager: false,
+        isAdmin: false,
+        role: 'admin',
+        language: null,
+        hasPendingInvite: false,
+        isAllowed: isAllowedMock(true),
+      },
+    ],
+  },
+  {
+    language: 'Croatian - Hrvatski',
+    languageDirection: 'ltr',
+    locale: 'hr',
+    bibleLabel: 'Biblija',
+    translationProgress: [
+      { name: 'Interface', done: 70, draft: 5, total: 100 },
+      { name: 'Content', done: 210, draft: 10, total: 300 },
+    ],
+    teamMembers: [],
+  },
+  {
+    language: 'Hungarian - Magyar',
+    languageDirection: 'ltr',
+    locale: 'hu',
+    bibleLabel: 'Károli Biblia',
+    translationProgress: [
+      { name: 'Interface', done: 85, draft: 0, total: 100 },
+      { name: 'Content', done: 255, draft: 5, total: 300 },
+    ],
+    teamMembers: [
+      {
+        id: 33,
+        name: 'Zsófia Nagy',
+        initials: 'ZN',
+        email: 'zsofia.nagy@example.com',
+        isManager: false,
+        isAdmin: false,
+        role: 'editor',
+        language: null,
+        hasPendingInvite: false,
+        isAllowed: isAllowedMock(true),
+      },
+    ],
+  },
+  {
+    language: 'Armenian - Հայերեն',
+    languageDirection: 'ltr',
+    locale: 'hy',
+    bibleLabel: 'Աստվածաշունչ',
+    translationProgress: [
+      { name: 'Interface', done: 40, draft: 15, total: 100 },
+      { name: 'Content', done: 120, draft: 30, total: 300 },
+    ],
+    teamMembers: [
+      {
+        id: 34,
+        name: 'Armen Petrosyan',
+        initials: 'AP',
+        email: 'armen.petrosyan@example.com',
+        isManager: false,
+        isAdmin: false,
+        role: 'editor',
+        language: null,
+        hasPendingInvite: false,
+        isAllowed: isAllowedMock(true),
+      },
+    ],
+  },
+  {
+    language: 'Indonesian - Bahasa Indonesia',
+    languageDirection: 'ltr',
+    locale: 'id',
+    bibleLabel: 'Alkitab Terjemahan Baru',
+    translationProgress: [
+      { name: 'Interface', done: 100, draft: 0, total: 100 },
+      { name: 'Content', done: 300, draft: 0, total: 300 },
+    ],
+    teamMembers: [
+      {
+        id: 35,
+        name: 'Budi Santoso',
+        initials: 'BS',
+        email: 'budi.santoso@example.com',
+        isManager: false,
+        isAdmin: false,
+        role: 'editor',
+        language: null,
+        hasPendingInvite: false,
+        isAllowed: isAllowedMock(true),
+      },
+      {
+        id: 36,
+        name: 'Siti Wijaya',
+        initials: 'SW',
+        email: 'siti.wijaya@example.com',
+        isManager: false,
+        isAdmin: false,
+        role: 'translator',
+        language: null,
+        hasPendingInvite: false,
+        isAllowed: isAllowedMock(true),
+      },
+    ],
+  },
+  {
+    language: 'Icelandic - Íslenska',
+    languageDirection: 'ltr',
+    locale: 'is',
+    bibleLabel: 'Biblían',
+    translationProgress: [
+      { name: 'Interface', done: 33, draft: 7, total: 100 },
+      { name: 'Content', done: 99, draft: 11, total: 300 },
+    ],
+    teamMembers: [],
+  },
+  {
+    language: 'Georgian - ქართული',
+    languageDirection: 'ltr',
+    locale: 'ka',
+    bibleLabel: 'ბიბლია',
+    translationProgress: [
+      { name: 'Interface', done: 52, draft: 8, total: 100 },
+      { name: 'Content', done: 156, draft: 12, total: 300 },
+    ],
+    teamMembers: [
+      {
+        id: 37,
+        name: 'Nino Beridze',
+        initials: 'NB',
+        email: 'nino.beridze@example.com',
+        isManager: false,
+        isAdmin: false,
+        role: 'editor',
+        language: null,
+        hasPendingInvite: false,
+        isAllowed: isAllowedMock(true),
+      },
+    ],
+  },
 ];
 
 export const config: UiConfig = {

From af7892d9a8f87eb4d12900be7b72159ca17c7f80 Mon Sep 17 00:00:00 2001
From: Timothy Koech <timosville@gmail.com>
Date: Tue, 9 Jun 2026 10:49:37 +0300
Subject: [PATCH 06/10] refactor: simplify settings actions by removing unused
 paths and directly using locale in components

---
 .../settings/languages/languages-edit.vue     |  8 +++---
 src/frontend/settings/settings-actions.ts     | 26 +------------------
 src/frontend/settings/settings-index.vue      | 17 +++++-------
 3 files changed, 12 insertions(+), 39 deletions(-)

diff --git a/src/frontend/settings/languages/languages-edit.vue b/src/frontend/settings/languages/languages-edit.vue
index 5c65a2ab..efa36ea0 100644
--- a/src/frontend/settings/languages/languages-edit.vue
+++ b/src/frontend/settings/languages/languages-edit.vue
@@ -61,6 +61,7 @@
 
 <script setup lang="ts">
 import { ref, computed } from 'vue';
+import { router } from '@inertiajs/vue3';
 import AppLayout from '../../shared/app-layout.vue';
 import ContentHeader from '../../shared/content-header.vue';
 import PillButton from '../../shared/pill-button.vue';
@@ -84,7 +85,7 @@ import {
 const props = defineProps<LanguagesEditProps & SharedPageProps>();
 
 const shared = useSharedStore();
-const { languagesAddPath, postSettings, visitSettings } = settingsActions();
+const { postSettings } = settingsActions();
 
 shared.setFromProps(props);
 shared.setCurrentStoryName('');
@@ -148,12 +149,13 @@ const submitLanguages = (languages: LanguageSpecification[]) => {
   }));
 
   postSettings(
-    languagesAddPath(),
+    `/${shared.locale}/settings/languages/add`,
     { languages: payload },
     {
       failureMessage: 'Error adding languages',
       onSuccess: () => {
-        visitSettings({
+        router.visit(`/${shared.locale}/settings`, {
+          preserveScroll: true,
           onSuccess: () => {
             shared.addMessage(
               ResponseStatus.Confirmation,
diff --git a/src/frontend/settings/settings-actions.ts b/src/frontend/settings/settings-actions.ts
index c11ab832..438348be 100644
--- a/src/frontend/settings/settings-actions.ts
+++ b/src/frontend/settings/settings-actions.ts
@@ -13,16 +13,6 @@ type PostSettingsOptions = {
 
 export const settingsActions = () => {
   const shared = useSharedStore();
-  const locale = shared.locale;
-
-  const settingsPath = () => `/${locale}/settings`;
-  const languagesEditPath = () => `/${locale}/settings/languages/edit`;
-  const languagesAddPath = () => `/${locale}/settings/languages/add`;
-  const supportPath = () => `/${locale}/settings/support`;
-  const languageRemovePath = (languageLocale: string) =>
-    `/${locale}/settings/languages/${languageLocale}/remove`;
-  const languageBibleTranslationPath = (languageLocale: string) =>
-    `/${locale}/settings/languages/${languageLocale}/bible-translation`;
 
   const postSettings = (
     url: string,
@@ -51,19 +41,5 @@ export const settingsActions = () => {
     });
   };
 
-  const visitSettings = (options: { onSuccess?: () => void } = {}) => {
-    router.visit(settingsPath(), { preserveScroll: true, ...options });
-  };
-
-  return {
-    settingsPath,
-    languagesEditPath,
-    languagesAddPath,
-    supportPath,
-    languageRemovePath,
-    languageBibleTranslationPath,
-    postSettings,
-    visitLanguagesEdit: () => router.visit(languagesEditPath()),
-    visitSettings,
-  };
+  return { postSettings };
 };
diff --git a/src/frontend/settings/settings-index.vue b/src/frontend/settings/settings-index.vue
index 8476162b..19484684 100644
--- a/src/frontend/settings/settings-index.vue
+++ b/src/frontend/settings/settings-index.vue
@@ -21,7 +21,7 @@
             </div>
             <button
               class="rounded-full bg-blue-500 p-1 shadow-md hover:bg-blue-700"
-              @click="visitLanguagesEdit"
+              @click="router.visit(`/${shared.locale}/settings/languages/edit`)"
             >
               <Icon name="plus" class="text-white" />
             </button>
@@ -56,6 +56,7 @@
 
 <script setup lang="ts">
 import { ref, computed } from 'vue';
+import { router } from '@inertiajs/vue3';
 import type { RequestPayload } from '@inertiajs/core';
 import AppLayout from '../shared/app-layout.vue';
 import ContentHeader from '../shared/content-header.vue';
@@ -78,13 +79,7 @@ const props = defineProps<SettingsPageProps & SharedPageProps>();
 
 const shared = useSharedStore();
 const widgets = useWidgetsStore();
-const {
-  visitLanguagesEdit,
-  postSettings,
-  supportPath,
-  languageRemovePath,
-  languageBibleTranslationPath,
-} = settingsActions();
+const { postSettings } = settingsActions();
 
 shared.setFromProps(props);
 shared.setCurrentStoryName('');
@@ -121,7 +116,7 @@ const postSupportRequest = (
     onError?: () => void;
   } = {},
 ) => {
-  postSettings(supportPath(), payload as unknown as RequestPayload, options);
+  postSettings(`/${shared.locale}/settings/support`, payload as unknown as RequestPayload, options);
 };
 
 const handleRequestAppUpdateConfirm = (reasons: string[]) => {
@@ -148,7 +143,7 @@ const handleRequestAppUpdateConfirm = (reasons: string[]) => {
 
 const handleRemove = (item: LanguageTableItem) => {
   postSettings(
-    languageRemovePath(item.locale),
+    `/${shared.locale}/settings/languages/${item.locale}/remove`,
     {},
     {
       successMessage: 'Language removed',
@@ -177,7 +172,7 @@ const handleTableBibleTranslationChange = (
   bibleVersionName: string,
 ) => {
   postSettings(
-    languageBibleTranslationPath(item.locale),
+    `/${shared.locale}/settings/languages/${item.locale}/bible-translation`,
     { bibleVersion, bibleVersionName },
     {
       successMessage: 'Bible translation changed',

From 703fef963c2f2a8398efc6d8bad7d6933884aae2 Mon Sep 17 00:00:00 2001
From: Timothy Koech <timosville@gmail.com>
Date: Tue, 9 Jun 2026 10:52:43 +0300
Subject: [PATCH 07/10] refactor: remove settings-actions file and integrate
 postSettings function into shared helpers for better modularity

---
 .../settings/languages/languages-edit.vue     |  3 +-
 src/frontend/settings/settings-actions.ts     | 45 -------------------
 src/frontend/settings/settings-index.vue      |  3 +-
 src/frontend/shared/helpers.ts                | 42 ++++++++++++++++-
 4 files changed, 43 insertions(+), 50 deletions(-)
 delete mode 100644 src/frontend/settings/settings-actions.ts

diff --git a/src/frontend/settings/languages/languages-edit.vue b/src/frontend/settings/languages/languages-edit.vue
index efa36ea0..ac846bdc 100644
--- a/src/frontend/settings/languages/languages-edit.vue
+++ b/src/frontend/settings/languages/languages-edit.vue
@@ -76,16 +76,15 @@ import {
 } from '../../../types';
 import { languages as allLanguages } from './languages';
 import { useSharedStore } from '../../store';
-import { settingsActions } from '../settings-actions';
 import {
   compareLanguagesByDisplayName,
+  postSettings,
   sortLanguagesByDisplayName,
 } from '../../shared/helpers';
 
 const props = defineProps<LanguagesEditProps & SharedPageProps>();
 
 const shared = useSharedStore();
-const { postSettings } = settingsActions();
 
 shared.setFromProps(props);
 shared.setCurrentStoryName('');
diff --git a/src/frontend/settings/settings-actions.ts b/src/frontend/settings/settings-actions.ts
deleted file mode 100644
index 438348be..00000000
--- a/src/frontend/settings/settings-actions.ts
+++ /dev/null
@@ -1,45 +0,0 @@
-import { router } from '@inertiajs/vue3';
-import type { RequestPayload } from '@inertiajs/core';
-import { useSharedStore } from '../store';
-import { ResponseStatus } from '../../types';
-
-type PostSettingsOptions = {
-  onSuccess?: () => void;
-  onError?: () => void;
-  successMessage?: string;
-  successDetail?: string;
-  failureMessage?: string;
-};
-
-export const settingsActions = () => {
-  const shared = useSharedStore();
-
-  const postSettings = (
-    url: string,
-    payload: Record<string, unknown> | object = {},
-    options: PostSettingsOptions = {},
-  ) => {
-    router.post(url, payload as RequestPayload, {
-      preserveScroll: true,
-      onSuccess: () => {
-        if (options.successMessage) {
-          shared.addMessage(
-            ResponseStatus.Confirmation,
-            options.successMessage,
-            options.successDetail,
-          );
-        }
-        options.onSuccess?.();
-      },
-      onError: (errors) => {
-        shared.setErrors(errors);
-        if (options.failureMessage) {
-          shared.addMessage(ResponseStatus.Failure, options.failureMessage);
-        }
-        options.onError?.();
-      },
-    });
-  };
-
-  return { postSettings };
-};
diff --git a/src/frontend/settings/settings-index.vue b/src/frontend/settings/settings-index.vue
index 19484684..42bc86a5 100644
--- a/src/frontend/settings/settings-index.vue
+++ b/src/frontend/settings/settings-index.vue
@@ -65,7 +65,7 @@ import PillButton from '../shared/pill-button.vue';
 import LanguagesTable from './languages/components/language-table.vue';
 import RequestAppUpdateModal from './languages/components/request-app-update-modal.vue';
 import RequestFeedbackModal from './languages/components/request-feedback-modal.vue';
-import { settingsActions } from './settings-actions';
+import { postSettings } from '../shared/helpers';
 import {
   type LanguageTableItem,
   type SettingsPageProps,
@@ -79,7 +79,6 @@ const props = defineProps<SettingsPageProps & SharedPageProps>();
 
 const shared = useSharedStore();
 const widgets = useWidgetsStore();
-const { postSettings } = settingsActions();
 
 shared.setFromProps(props);
 shared.setCurrentStoryName('');
diff --git a/src/frontend/shared/helpers.ts b/src/frontend/shared/helpers.ts
index c737599c..e3c9da1b 100644
--- a/src/frontend/shared/helpers.ts
+++ b/src/frontend/shared/helpers.ts
@@ -1,8 +1,11 @@
 import type { App, PropType } from 'vue';
-import type { FieldSpec, LanguageSpecification } from '../../types';
+import { router } from '@inertiajs/vue3';
+import type { RequestPayload } from '@inertiajs/core';
+import { ResponseStatus, type FieldSpec, type LanguageSpecification } from '../../types';
 import { BibleBooksMap } from './bibleBooks';
 import type { Variant, Story } from 'histoire';
 import { DateTime } from 'luxon';
+import { useSharedStore } from '../store';
 
 export const commonProps = {
   field: {
@@ -349,3 +352,40 @@ export function replaceLocaleInPath(
   segments[0] = targetLocale;
   return `/${segments.join('/')}`;
 }
+
+type PostSettingsOptions = {
+  onSuccess?: () => void;
+  onError?: () => void;
+  successMessage?: string;
+  successDetail?: string;
+  failureMessage?: string;
+};
+
+export const postSettings = (
+  url: string,
+  payload: Record<string, unknown> | object = {},
+  options: PostSettingsOptions = {},
+) => {
+  const shared = useSharedStore();
+
+  router.post(url, payload as RequestPayload, {
+    preserveScroll: true,
+    onSuccess: () => {
+      if (options.successMessage) {
+        shared.addMessage(
+          ResponseStatus.Confirmation,
+          options.successMessage,
+          options.successDetail,
+        );
+      }
+      options.onSuccess?.();
+    },
+    onError: (errors) => {
+      shared.setErrors(errors);
+      if (options.failureMessage) {
+        shared.addMessage(ResponseStatus.Failure, options.failureMessage);
+      }
+      options.onError?.();
+    },
+  });
+};

From ae19784acc7817ac49dd2edbd50219ad5205dd7c Mon Sep 17 00:00:00 2001
From: Timothy Koech <timosville@gmail.com>
Date: Tue, 9 Jun 2026 11:22:14 +0300
Subject: [PATCH 08/10] refactor: update selected value

---
 src/frontend/settings/languages/languages-edit.vue | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/frontend/settings/languages/languages-edit.vue b/src/frontend/settings/languages/languages-edit.vue
index ac846bdc..571f64ce 100644
--- a/src/frontend/settings/languages/languages-edit.vue
+++ b/src/frontend/settings/languages/languages-edit.vue
@@ -24,14 +24,17 @@
             <div>
               <h3 class="text-sm font-medium leading-5 text-gray-800">Selected</h3>
 
-              <ul class="mt-2 flex flex-wrap gap-4">
+              <ul class="mt-2 flex flex-wrap gap-2">
                 <li
                   v-for="language in selectedLanguages"
                   :key="language.locale"
-                  class="flex items-center justify-between gap-2 rounded-full bg-blue-100 px-[10px] py-1"
+                  class="inline-flex items-center gap-1 rounded-full bg-blue-100 px-2 py-1 text-xs font-medium leading-4 text-blue-800"
                 >
-                  <LangStrip :spec="language" />
-                  <button @click="setLocaleSelected(language.locale, false)">
+                  {{ language.language }}
+                  <button
+                    type="button"
+                    @click="setLocaleSelected(language.locale, false)"
+                  >
                     <svg
                       width="8"
                       height="8"
@@ -66,7 +69,6 @@ import AppLayout from '../../shared/app-layout.vue';
 import ContentHeader from '../../shared/content-header.vue';
 import PillButton from '../../shared/pill-button.vue';
 import LanguageList from './language-list.vue';
-import LangStrip from './components/language-strip.vue';
 import {
   ResponseStatus,
   type LanguageListItemProps,

From 47ca60be53e3a9fe97772dd9b4c5716ac0d7a8ce Mon Sep 17 00:00:00 2001
From: Timothy Koech <timosville@gmail.com>
Date: Wed, 10 Jun 2026 06:48:02 +0300
Subject: [PATCH 09/10] refactor: replace postSettings with postWithPayload in
 settings components

---
 .../settings/languages/languages-edit.vue     | 47 +++++++++----------
 src/frontend/settings/settings-index.vue      | 29 ++++--------
 src/frontend/shared/helpers.ts                | 10 ++--
 3 files changed, 36 insertions(+), 50 deletions(-)

diff --git a/src/frontend/settings/languages/languages-edit.vue b/src/frontend/settings/languages/languages-edit.vue
index 571f64ce..15ffccb2 100644
--- a/src/frontend/settings/languages/languages-edit.vue
+++ b/src/frontend/settings/languages/languages-edit.vue
@@ -19,16 +19,16 @@
         <template #extra-actions>
           <div
             v-if="selectedLanguages.length > 0"
-            class="flex items-center justify-between pb-4"
+            class="flex justify-between items-center pb-4"
           >
             <div>
               <h3 class="text-sm font-medium leading-5 text-gray-800">Selected</h3>
 
-              <ul class="mt-2 flex flex-wrap gap-2">
+              <ul class="flex flex-wrap gap-2 mt-2">
                 <li
                   v-for="language in selectedLanguages"
                   :key="language.locale"
-                  class="inline-flex items-center gap-1 rounded-full bg-blue-100 px-2 py-1 text-xs font-medium leading-4 text-blue-800"
+                  class="inline-flex gap-1 items-center px-2 py-1 text-xs font-medium leading-4 text-blue-800 bg-blue-100 rounded-full"
                 >
                   {{ language.language }}
                   <button
@@ -80,7 +80,7 @@ import { languages as allLanguages } from './languages';
 import { useSharedStore } from '../../store';
 import {
   compareLanguagesByDisplayName,
-  postSettings,
+  postWithPayload,
   sortLanguagesByDisplayName,
 } from '../../shared/helpers';
 
@@ -99,31 +99,28 @@ const selectedLocales = ref<Set<string>>(new Set());
 
 const addedLocales = computed(() => new Set(props.addedLanguages.map((l) => l.locale)));
 
-const languageState = computed(() => {
-  const listItems: LanguageListItemProps[] = [];
-  const selected: LanguageSpecification[] = [];
-
-  for (const language of allLanguages) {
-    const status = addedLocales.value.has(language.locale)
+const languageListItems = computed(() => {
+  const listItems: LanguageListItemProps[] = allLanguages.map((language) => ({
+    language,
+    status: addedLocales.value.has(language.locale)
       ? 'readonly'
       : selectedLocales.value.has(language.locale)
         ? 'selected'
-        : 'available';
-
-    listItems.push({ language, status });
-    if (status === 'selected') selected.push(language);
-  }
-
-  return {
-    listItems: listItems.sort((a, b) =>
-      compareLanguagesByDisplayName(a.language, b.language),
-    ),
-    selectedLanguages: sortLanguagesByDisplayName(selected),
-  };
+        : 'available',
+  }));
+
+  return listItems.sort((a, b) =>
+    compareLanguagesByDisplayName(a.language, b.language),
+  );
 });
 
-const languageListItems = computed(() => languageState.value.listItems);
-const selectedLanguages = computed(() => languageState.value.selectedLanguages);
+const selectedLanguages = computed(() =>
+  sortLanguagesByDisplayName(
+    languageListItems.value
+      .filter((item) => item.status === 'selected')
+      .map((item) => item.language),
+  ),
+);
 
 const setLocaleSelected = (locale: string, isSelected: boolean) => {
   const next = new Set(selectedLocales.value);
@@ -149,7 +146,7 @@ const submitLanguages = (languages: LanguageSpecification[]) => {
     languageDirection,
   }));
 
-  postSettings(
+  postWithPayload(
     `/${shared.locale}/settings/languages/add`,
     { languages: payload },
     {
diff --git a/src/frontend/settings/settings-index.vue b/src/frontend/settings/settings-index.vue
index 42bc86a5..0e2ae41f 100644
--- a/src/frontend/settings/settings-index.vue
+++ b/src/frontend/settings/settings-index.vue
@@ -11,16 +11,16 @@
           />
         </template>
         <template #extra-actions>
-          <div class="flex items-center justify-between pb-4">
+          <div class="flex justify-between items-center pb-4">
             <div>
-              <h3 class="text-xl/7 font-semibold leading-7 text-gray-800">Languages</h3>
-              <p class="text-sm/5 font-normal leading-5 text-gray-500">
+              <h3 class="font-semibold leading-7 text-gray-800 text-xl/7">Languages</h3>
+              <p class="font-normal leading-5 text-gray-500 text-sm/5">
                 Here you can manage your languages. Press the blue + to add a new
                 language.
               </p>
             </div>
             <button
-              class="rounded-full bg-blue-500 p-1 shadow-md hover:bg-blue-700"
+              class="p-1 bg-blue-500 rounded-full shadow-md hover:bg-blue-700"
               @click="router.visit(`/${shared.locale}/settings/languages/edit`)"
             >
               <Icon name="plus" class="text-white" />
@@ -65,7 +65,7 @@ import PillButton from '../shared/pill-button.vue';
 import LanguagesTable from './languages/components/language-table.vue';
 import RequestAppUpdateModal from './languages/components/request-app-update-modal.vue';
 import RequestFeedbackModal from './languages/components/request-feedback-modal.vue';
-import { postSettings } from '../shared/helpers';
+import { postWithPayload } from '../shared/helpers';
 import {
   type LanguageTableItem,
   type SettingsPageProps,
@@ -108,16 +108,6 @@ const buildAppUpdatePayload = (reasons: string[]): SupportRequest | null => {
   return null;
 };
 
-const postSupportRequest = (
-  payload: SupportRequest,
-  options: {
-    onSuccess?: () => void;
-    onError?: () => void;
-  } = {},
-) => {
-  postSettings(`/${shared.locale}/settings/support`, payload as unknown as RequestPayload, options);
-};
-
 const handleRequestAppUpdateConfirm = (reasons: string[]) => {
   showRequestAppUpdateModal.value = false;
 
@@ -128,7 +118,7 @@ const handleRequestAppUpdateConfirm = (reasons: string[]) => {
     return;
   }
 
-  postSupportRequest(payload, {
+  postWithPayload(`/${shared.locale}/settings/support`, payload as unknown as RequestPayload, {
     onSuccess: () => {
       feedbackModalVariant.value = 'success';
       showFeedbackModal.value = true;
@@ -141,7 +131,7 @@ const handleRequestAppUpdateConfirm = (reasons: string[]) => {
 };
 
 const handleRemove = (item: LanguageTableItem) => {
-  postSettings(
+  postWithPayload(
     `/${shared.locale}/settings/languages/${item.locale}/remove`,
     {},
     {
@@ -152,7 +142,8 @@ const handleRemove = (item: LanguageTableItem) => {
 };
 
 const handleRequestDeletion = (item: LanguageTableItem) => {
-  postSupportRequest(
+  postWithPayload(
+    `/${shared.locale}/settings/support`,
     { supportCode: 'REMOVE_LANGUAGE', removeLanguageCode: item.locale },
     {
       onSuccess: () => {
@@ -170,7 +161,7 @@ const handleTableBibleTranslationChange = (
   bibleVersion: string,
   bibleVersionName: string,
 ) => {
-  postSettings(
+  postWithPayload(
     `/${shared.locale}/settings/languages/${item.locale}/bible-translation`,
     { bibleVersion, bibleVersionName },
     {
diff --git a/src/frontend/shared/helpers.ts b/src/frontend/shared/helpers.ts
index e3c9da1b..a6eca5ca 100644
--- a/src/frontend/shared/helpers.ts
+++ b/src/frontend/shared/helpers.ts
@@ -308,9 +308,7 @@ export function compareLanguagesByDisplayName(
   a: LanguageSortable,
   b: LanguageSortable,
 ): number {
-  return languageDisplayName(a.language).localeCompare(
-    languageDisplayName(b.language),
-  );
+  return languageDisplayName(a.language).localeCompare(languageDisplayName(b.language));
 }
 
 export function sortLanguagesByDisplayName<T extends LanguageSortable>(
@@ -353,7 +351,7 @@ export function replaceLocaleInPath(
   return `/${segments.join('/')}`;
 }
 
-type PostSettingsOptions = {
+type PostOptions = {
   onSuccess?: () => void;
   onError?: () => void;
   successMessage?: string;
@@ -361,10 +359,10 @@ type PostSettingsOptions = {
   failureMessage?: string;
 };
 
-export const postSettings = (
+export const postWithPayload = (
   url: string,
   payload: Record<string, unknown> | object = {},
-  options: PostSettingsOptions = {},
+  options: PostOptions = {},
 ) => {
   const shared = useSharedStore();
 

From cdea3ed00a8624383d2287a9181b85ad99581766 Mon Sep 17 00:00:00 2001
From: Timothy Koech <timosville@gmail.com>
Date: Wed, 10 Jun 2026 07:45:17 +0300
Subject: [PATCH 10/10] feat: implement LanguageService for managing language
 configurations and enhance settings controller with language handling

---
 src/backend/configure.ts                      |   1 +
 src/backend/index.ts                          |   1 +
 src/backend/services/language_service.ts      | 218 ++++++++++++++++
 .../controllers/settings_controller.stub      | 236 ++++--------------
 .../stubs/tests/unit/language_service.stub    | 168 +++++++++++++
 src/types.ts                                  |   2 +-
 6 files changed, 442 insertions(+), 184 deletions(-)
 create mode 100644 src/backend/services/language_service.ts
 create mode 100644 src/backend/stubs/tests/unit/language_service.stub

diff --git a/src/backend/configure.ts b/src/backend/configure.ts
index 55d74ca0..503f2c4d 100644
--- a/src/backend/configure.ts
+++ b/src/backend/configure.ts
@@ -164,6 +164,7 @@ export async function configure(command: Configure) {
   await codemods.makeUsingStub(stubsRoot, 'tests/unit/stream_service.stub', {});
   await codemods.makeUsingStub(stubsRoot, 'tests/unit/user_service.stub', {});
   await codemods.makeUsingStub(stubsRoot, 'tests/unit/progress_service.stub', {});
+  await codemods.makeUsingStub(stubsRoot, 'tests/unit/language_service.stub', {});
   await codemods.makeUsingStub(stubsRoot, 'tests/unit/model.stub', {});
   await codemods.makeUsingStub(stubsRoot, 'tests/helpers/cms_mock.stub', {});
   await codemods.makeUsingStub(stubsRoot, 'tests/helpers/story_test_helper.stub', {});
diff --git a/src/backend/index.ts b/src/backend/index.ts
index 270a6026..dd26af89 100644
--- a/src/backend/index.ts
+++ b/src/backend/index.ts
@@ -40,6 +40,7 @@ export * from './services/draft_service.js';
 export * from './services/index_service.js';
 export * from './services/page_service.js';
 export * from './services/progress_service.js';
+export * from './services/language_service.js';
 export * from './services/ui_service.js';
 export * from './services/user_service.js';
 export * from './services/stream_service.js';
diff --git a/src/backend/services/language_service.ts b/src/backend/services/language_service.ts
new file mode 100644
index 00000000..e3a81b33
--- /dev/null
+++ b/src/backend/services/language_service.ts
@@ -0,0 +1,218 @@
+import { inject } from '@adonisjs/core';
+import {
+  type LanguageSpecification,
+  type LanguageTableItem,
+  type LanguagesEditProps,
+  type SettingsPageProps,
+  type SupportCode,
+  type UserInterface,
+} from '../../types.js';
+import User from '../models/user.js';
+import { CmsService } from './cms_service.js';
+import { ProgressService } from './progress_service.js';
+
+export interface SupportRequestLanguageSpec {
+  name: string;
+  nativeName: string;
+  locale: string;
+}
+
+export interface SupportRequestDetails {
+  subject: string;
+  details: string;
+  language?: SupportRequestLanguageSpec;
+}
+
+interface SupportCodeDefinition {
+  code: SupportCode;
+  description: string;
+  subject: string;
+}
+
+const SUPPORT_CODES = {
+  REMOVE_LANGUAGE: {
+    code: 'REMOVE_LANGUAGE',
+    subject: 'Remove language',
+    description: 'Language requested to be removed',
+  },
+  UPDATE_LANGUAGE: {
+    code: 'UPDATE_LANGUAGE',
+    subject: 'App update - new language added.',
+    description: 'Language requested to be added',
+  },
+  UPDATE_CONTENT: {
+    code: 'UPDATE_CONTENT',
+    subject: 'App update - content added.',
+    description: 'Content requested to be updated',
+  },
+  UPDATE_APP: {
+    code: 'UPDATE_APP',
+    subject: 'App update - new language and content.',
+    description: 'App update requested for new language and new content',
+  },
+} as const satisfies Record<string, SupportCodeDefinition>;
+
+const defaultTranslationProgress = [
+  { name: 'Interface', done: 0, draft: 0, total: 0 },
+  { name: 'Content', done: 0, draft: 0, total: 0 },
+];
+
+@inject()
+export class LanguageService {
+  protected sourceLocale: string;
+
+  constructor(protected cms: CmsService) {
+    this.sourceLocale = cms.sourceLocale;
+  }
+
+  public find(locale: string): LanguageSpecification | undefined {
+    return this.cms.config.languages.find(
+      (lang: LanguageSpecification) => lang.locale === locale,
+    );
+  }
+
+  public languagesEdit(): LanguagesEditProps {
+    return {
+      addedLanguages: this.cms.config.languages,
+    };
+  }
+
+  public async settingsIndex(
+    user: UserInterface,
+  ): Promise<Pick<SettingsPageProps, 'sourceLanguage' | 'languageItems'>> {
+    const sourceLanguageSpec =
+      this.cms.config.languages.find(
+        (lang: LanguageSpecification) => lang.locale === this.sourceLocale,
+      ) ?? this.cms.config.languages[0];
+
+    const progressService = new ProgressService(this.cms);
+    const progressItems = await progressService.progress(user);
+    const translationProgressByLocale = Object.fromEntries(
+      (progressItems ?? []).map((item) => [item.locale, item.progress]),
+    );
+
+    const users = await User.query().where('name', '!=', 'redacted');
+
+    const sourceLanguage = this.toLanguageTableItem(
+      sourceLanguageSpec,
+      translationProgressByLocale,
+      users,
+    );
+
+    const languageItems = this.cms.config.languages
+      .filter(
+        (language: LanguageSpecification) => language.locale !== sourceLanguage.locale,
+      )
+      .map((language: LanguageSpecification) =>
+        this.toLanguageTableItem(language, translationProgressByLocale, users),
+      );
+
+    return { sourceLanguage, languageItems };
+  }
+
+  public async addLanguages(languages: LanguageSpecification[]): Promise<void> {
+    const existingLocales = new Set(
+      this.cms.config.languages.map((lang: LanguageSpecification) => lang.locale),
+    );
+    const toAdd = languages.filter((lang) => !existingLocales.has(lang.locale));
+
+    if (toAdd.length > 0) {
+      await this.save([...this.cms.config.languages, ...toAdd]);
+    }
+  }
+
+  public async updateBibleTranslation(
+    locale: string,
+    bibleVersion: string,
+    bibleLabel: string,
+  ): Promise<void> {
+    if (!this.find(locale)) {
+      throw new Error('Language not found');
+    }
+
+    const languages = this.cms.config.languages.map((lang: LanguageSpecification) =>
+      lang.locale === locale ? { ...lang, bibleVersion, bibleLabel } : lang,
+    );
+
+    await this.save(languages);
+  }
+
+  public async removeLanguage(locale: string): Promise<void> {
+    if (locale === this.sourceLocale) {
+      throw new Error('Cannot remove the source language');
+    }
+
+    if (!this.find(locale)) {
+      throw new Error('Language not found');
+    }
+
+    const languages = this.cms.config.languages.filter(
+      (lang: LanguageSpecification) => lang.locale !== locale,
+    );
+    await this.save(languages);
+  }
+
+  public getSupportRequestDetails(
+    supportCode: SupportCode,
+    removeLanguageCode?: string,
+  ): SupportRequestDetails {
+    const definition = this.supportCodeDefinition(supportCode);
+    if (!definition) {
+      throw new Error('Invalid support code');
+    }
+
+    let language: SupportRequestLanguageSpec | undefined;
+    if (supportCode === 'REMOVE_LANGUAGE' && removeLanguageCode) {
+      const languageSpec = this.find(removeLanguageCode);
+      if (languageSpec) {
+        language = this.parseLanguageForSupport(languageSpec);
+      }
+    }
+
+    return {
+      subject: `Support request: ${definition.subject}`,
+      details: definition.description,
+      language,
+    };
+  }
+
+  private toLanguageTableItem(
+    spec: LanguageSpecification,
+    translationProgressByLocale: Record<string, LanguageTableItem['translationProgress']>,
+    users: InstanceType<typeof User>[],
+  ): LanguageTableItem {
+    return {
+      language: spec.language,
+      languageDirection: spec.languageDirection,
+      locale: spec.locale,
+      bibleLabel: spec.bibleLabel,
+      bibleVersion: spec.bibleVersion,
+      translationProgress:
+        translationProgressByLocale[spec.locale] ?? defaultTranslationProgress,
+      teamMembers: users
+        .filter((user) => user.language === spec.locale)
+        .map((user) => user.meta),
+    };
+  }
+
+  private parseLanguageForSupport(
+    spec: LanguageSpecification,
+  ): SupportRequestLanguageSpec {
+    const { language, locale } = spec;
+    const name = language.split('|')[0].trim();
+
+    if (language.includes('|')) {
+      return { name, nativeName: language.split('|')[1].trim(), locale };
+    }
+
+    return { name, nativeName: language, locale };
+  }
+
+  private supportCodeDefinition(code: string): SupportCodeDefinition | undefined {
+    return Object.values(SUPPORT_CODES).find((definition) => definition.code === code);
+  }
+
+  private async save(languages: LanguageSpecification[]) {
+    await this.cms.patchConfig({ languages });
+  }
+}
diff --git a/src/backend/stubs/controllers/settings_controller.stub b/src/backend/stubs/controllers/settings_controller.stub
index 1c88c9a3..1319a5cf 100644
--- a/src/backend/stubs/controllers/settings_controller.stub
+++ b/src/backend/stubs/controllers/settings_controller.stub
@@ -4,11 +4,8 @@
 import type { HttpContext } from '@adonisjs/core/http';
 import mail from '@adonisjs/mail/services/main';
 import {
-  User,
-  ProgressService,
+  LanguageService,
   type LanguageSpecification,
-  type LanguageTableItem,
-  type LanguagesEditProps,
   type SettingsPageProps,
   type UserInterface,
 } from '@story-cms/kit';
@@ -16,123 +13,15 @@ import {
 import cms from '#services/cms';
 import providers from '#config/providers';
 
-interface SupportRequestLanguageSpec {
-  name: string;
-  nativeName: string;
-  locale: string;
-}
-
-interface SupportCodeDefinition {
-  code: string;
-  description: string;
-  subject: string;
-}
-
-const SUPPORT_CODES = {
-  REMOVE_LANGUAGE: {
-    code: 'REMOVE_LANGUAGE',
-    subject: 'Remove language',
-    description: 'Language requested to be removed',
-  },
-  UPDATE_LANGUAGE: {
-    code: 'UPDATE_LANGUAGE',
-    subject: 'App update - new language added.',
-    description: 'Language requested to be added',
-  },
-  UPDATE_CONTENT: {
-    code: 'UPDATE_CONTENT',
-    subject: 'App update - content added.',
-    description: 'Content requested to be updated',
-  },
-  UPDATE_APP: {
-    code: 'UPDATE_APP',
-    subject: 'App update - new language and content.',
-    description: 'App update requested for new language and new content',
-  },
-} as const satisfies Record<string, SupportCodeDefinition>;
-
-type SupportCode = (typeof SUPPORT_CODES)[keyof typeof SUPPORT_CODES]['code'];
-
-const defaultTranslationProgress = [
-  { name: 'Interface', done: 0, draft: 0, total: 0 },
-  { name: 'Content', done: 0, draft: 0, total: 0 },
-];
-
-function toLanguageTableItem(
-  spec: LanguageSpecification,
-  translationProgressByLocale: Record<string, LanguageTableItem['translationProgress']>,
-  users: InstanceType<typeof User>[],
-): LanguageTableItem {
-  return {
-    language: spec.language,
-    languageDirection: spec.languageDirection,
-    locale: spec.locale,
-    bibleLabel: spec.bibleLabel,
-    bibleVersion: spec.bibleVersion,
-    translationProgress:
-      translationProgressByLocale[spec.locale] ?? defaultTranslationProgress,
-    teamMembers: users
-      .filter((user) => user.language === spec.locale)
-      .map((user) => user.meta),
-  };
-}
-
-function parseLanguageForSupport(spec: LanguageSpecification): SupportRequestLanguageSpec {
-  const { language, locale } = spec;
-  const name = language.split('|')[0].trim();
-
-  if (language.includes('|')) {
-    return { name, nativeName: language.split('|')[1].trim(), locale };
-  }
-
-  return { name, nativeName: language, locale };
-}
-
-function findConfiguredLanguage(locale: string): LanguageSpecification | undefined {
-  return cms.config.languages.find(
-    (lang: LanguageSpecification) => lang.locale === locale,
-  );
-}
-
-function patchLanguages(languages: LanguageSpecification[]) {
-  return cms.patchConfig({ languages });
-}
-
-function supportCodeDefinition(code: string): SupportCodeDefinition | undefined {
-  return Object.values(SUPPORT_CODES).find((definition) => definition.code === code);
-}
-
 export default class SettingsController {
   public async index(ctx: HttpContext) {
     cms.localeFromPath(ctx);
 
-    const sourceLanguageSpec =
-      cms.config.languages.find(
-        (lang: LanguageSpecification) => lang.locale === cms.sourceLocale,
-      ) ?? cms.config.languages[0];
-
-    const progressService = new ProgressService(cms);
-    const progressItems = await progressService.progress(ctx.auth.user! as UserInterface);
-    const translationProgressByLocale = Object.fromEntries(
-      (progressItems ?? []).map((item) => [item.locale, item.progress]),
-    );
-
-    const users = await User.query().where('name', '!=', 'redacted');
-
-    const sourceLanguage = toLanguageTableItem(
-      sourceLanguageSpec,
-      translationProgressByLocale,
-      users,
+    const languageService = new LanguageService(cms);
+    const { sourceLanguage, languageItems } = await languageService.settingsIndex(
+      ctx.auth.user! as UserInterface,
     );
 
-    const languageItems: LanguageTableItem[] = cms.config.languages
-      .filter(
-        (language: LanguageSpecification) => language.locale !== sourceLanguage.locale,
-      )
-      .map((language: LanguageSpecification) =>
-        toLanguageTableItem(language, translationProgressByLocale, users),
-      );
-
     const props: SettingsPageProps = {
       sourceLanguage,
       languageItems,
@@ -147,9 +36,7 @@ export default class SettingsController {
   public async editLanguage(ctx: HttpContext) {
     cms.localeFromPath(ctx);
 
-    const props: LanguagesEditProps = {
-      addedLanguages: cms.config.languages,
-    };
+    const props = new LanguageService(cms).languagesEdit();
 
     // @ts-expect-error Inertia page name
     return ctx.inertia.render('LanguagesEdit', props);
@@ -159,16 +46,7 @@ export default class SettingsController {
     cms.localeFromPath(ctx);
 
     const payload = ctx.request.all() as { languages?: LanguageSpecification[] };
-    const existingLocales = new Set(
-      cms.config.languages.map((lang: LanguageSpecification) => lang.locale),
-    );
-    const toAdd = (payload.languages ?? []).filter(
-      (lang: LanguageSpecification) => !existingLocales.has(lang.locale),
-    );
-
-    if (toAdd.length > 0) {
-      await patchLanguages([...cms.config.languages, ...toAdd]);
-    }
+    await new LanguageService(cms).addLanguages(payload.languages ?? []);
 
     return ctx.response.redirect().back();
   }
@@ -176,48 +54,43 @@ export default class SettingsController {
   public async updateBibleTranslation(ctx: HttpContext) {
     cms.localeFromPath(ctx);
 
-    const languageLocale = ctx.params.languageLocale;
     const { bibleVersion, bibleVersionName } = ctx.request.only([
       'bibleVersion',
       'bibleVersionName',
     ]);
 
-    const language = findConfiguredLanguage(languageLocale);
-    if (!language) {
-      return ctx.response.notFound({ error: 'Language not found' });
+    try {
+      await new LanguageService(cms).updateBibleTranslation(
+        ctx.params.languageLocale,
+        bibleVersion,
+        bibleVersionName,
+      );
+    } catch (error) {
+      if ((error as Error).message === 'Language not found') {
+        return ctx.response.notFound({ error: 'Language not found' });
+      }
+      throw error;
     }
 
-    const languages = cms.config.languages.map((lang: LanguageSpecification) =>
-      lang.locale === languageLocale
-        ? { ...lang, bibleVersion, bibleLabel: bibleVersionName }
-        : lang,
-    );
-
-    await patchLanguages(languages);
-
     return ctx.response.redirect().back();
   }
 
   public async removeLanguage(ctx: HttpContext) {
     cms.localeFromPath(ctx);
 
-    const languageLocale = ctx.params.languageLocale;
-
-    if (languageLocale === cms.sourceLocale) {
-      return ctx.response.badRequest({ error: 'Cannot remove the source language' });
-    }
-
-    const language = findConfiguredLanguage(languageLocale);
-    if (!language) {
-      return ctx.response.notFound({ error: 'Language not found' });
+    try {
+      await new LanguageService(cms).removeLanguage(ctx.params.languageLocale);
+    } catch (error) {
+      const message = (error as Error).message;
+      if (message === 'Cannot remove the source language') {
+        return ctx.response.badRequest({ error: message });
+      }
+      if (message === 'Language not found') {
+        return ctx.response.notFound({ error: message });
+      }
+      throw error;
     }
 
-    const languages = cms.config.languages.filter(
-      (lang: LanguageSpecification) => lang.locale !== languageLocale,
-    );
-
-    await patchLanguages(languages);
-
     return ctx.response.redirect().back();
   }
 
@@ -227,41 +100,38 @@ export default class SettingsController {
     const { supportCode, removeLanguageCode } = ctx.request.only([
       'supportCode',
       'removeLanguageCode',
-    ]) as {
-      supportCode?: SupportCode;
-      removeLanguageCode?: string;
-    };
+    ]);
 
-    const definition = supportCode ? supportCodeDefinition(supportCode) : undefined;
-    if (!definition) {
+    if (!supportCode) {
       return ctx.response.badRequest({ error: 'Invalid support code' });
     }
 
-    let language: SupportRequestLanguageSpec | undefined;
-    if (supportCode === 'REMOVE_LANGUAGE' && removeLanguageCode) {
-      const languageSpec = findConfiguredLanguage(removeLanguageCode);
-      if (languageSpec) {
-        language = parseLanguageForSupport(languageSpec);
+    try {
+      const { subject, details, language } = new LanguageService(
+        cms,
+      ).getSupportRequestDetails(supportCode, removeLanguageCode);
+
+      await mail.send((message) => {
+        message
+          .to(cms.config.supportEmail, 'Journey Studio Support')
+          .subject(subject)
+          .htmlView('emails/support_request', {
+            appName: cms.config.name,
+            requester: ctx.auth.user?.name ?? 'Unknown',
+            subject,
+            supportCode,
+            details,
+            language,
+            logo: cms.config.logo,
+          });
+      });
+    } catch (error) {
+      if ((error as Error).message === 'Invalid support code') {
+        return ctx.response.badRequest({ error: 'Invalid support code' });
       }
+      throw error;
     }
 
-    const subject = {{ '`Support request: ${definition.subject}`' }};
-
-    await mail.send((message) => {
-      message
-        .to(cms.config.supportEmail, 'Journey Studio Support')
-        .subject(subject)
-        .htmlView('emails/support_request', {
-          appName: cms.config.name,
-          requester: ctx.auth.user?.name ?? 'Unknown',
-          subject,
-          supportCode,
-          details: definition.description,
-          language,
-          logo: cms.config.logo,
-        });
-    });
-
     return ctx.response.redirect().back();
   }
 }
diff --git a/src/backend/stubs/tests/unit/language_service.stub b/src/backend/stubs/tests/unit/language_service.stub
new file mode 100644
index 00000000..32376855
--- /dev/null
+++ b/src/backend/stubs/tests/unit/language_service.stub
@@ -0,0 +1,168 @@
+{{{ 
+  exports({ to: app.makePath('tests/unit/language_service.spec.ts') }) 
+}}}
+import testUtils from '@adonisjs/core/services/test_utils';
+import { test } from '@japa/runner';
+import {
+  Config,
+  User,
+  LanguageService,
+  type CmsConfig,
+  type LanguageSpecification,
+} from '@story-cms/kit';
+import cms from '#services/cms';
+import { setupMockCms, testCmsConfig } from '#tests/helpers/cms_mock';
+
+test.group('LanguageService', (group) => {
+  group.each.setup(() => testUtils.db().withGlobalTransaction());
+
+  const createConfigRecord = async () => {
+    return Config.create({
+      key: 'cms',
+      version: 1,
+      data: structuredClone(testCmsConfig) as unknown as Record<string, unknown>,
+    });
+  };
+
+  test('addLanguages skips duplicate locales', async ({ assert }) => {
+    await createConfigRecord();
+    setupMockCms(testCmsConfig);
+
+    const service = new LanguageService(cms);
+    await service.addLanguages([
+      { locale: 'es', language: 'Spanish', languageDirection: 'ltr' },
+      { locale: 'fr', language: 'French', languageDirection: 'ltr' },
+    ]);
+
+    assert.lengthOf(cms.config.languages, 4);
+    assert.isTrue(
+      cms.config.languages.some((lang: LanguageSpecification) => lang.locale === 'fr'),
+    );
+    assert.equal(
+      cms.config.languages.filter((lang: LanguageSpecification) => lang.locale === 'es')
+        .length,
+      1,
+    );
+  });
+
+  test('updateBibleTranslation updates one language and leaves others untouched', async ({
+    assert,
+  }) => {
+    const config = await createConfigRecord();
+    setupMockCms(testCmsConfig);
+
+    const service = new LanguageService(cms);
+    await service.updateBibleTranslation('es', 'new-es-version', 'Nueva Biblia');
+
+    await config.refresh();
+    const data = config.data as CmsConfig;
+
+    const spanish = data.languages.find((lang) => lang.locale === 'es');
+    assert.equal(spanish?.bibleVersion, 'new-es-version');
+    assert.equal(spanish?.bibleLabel, 'Nueva Biblia');
+
+    const english = data.languages.find((lang) => lang.locale === 'en');
+    assert.equal(english?.bibleVersion, 'test-bible-version');
+  });
+
+  test('updateBibleTranslation throws for unknown locale', async ({ assert }) => {
+    await createConfigRecord();
+    setupMockCms(testCmsConfig);
+
+    const service = new LanguageService(cms);
+
+    await assert.rejects(
+      () => service.updateBibleTranslation('xx', 'some-version', 'Some Version'),
+      /Language not found/,
+    );
+  });
+
+  test('removeLanguage rejects source locale', async ({ assert }) => {
+    await createConfigRecord();
+    setupMockCms(testCmsConfig);
+
+    const service = new LanguageService(cms);
+
+    await assert.rejects(
+      () => service.removeLanguage('en'),
+      /Cannot remove the source language/,
+    );
+    assert.lengthOf(cms.config.languages, 3);
+  });
+
+  test('removeLanguage throws for unknown locale', async ({ assert }) => {
+    await createConfigRecord();
+    setupMockCms(testCmsConfig);
+
+    const service = new LanguageService(cms);
+
+    await assert.rejects(() => service.removeLanguage('xx'), /Language not found/);
+    assert.lengthOf(cms.config.languages, 3);
+  });
+
+  test('removeLanguage deletes a non-source language', async ({ assert }) => {
+    const config = await createConfigRecord();
+    setupMockCms(testCmsConfig);
+
+    const service = new LanguageService(cms);
+    await service.removeLanguage('es');
+
+    await config.refresh();
+    const data = config.data as CmsConfig;
+    assert.isUndefined(data.languages.find((lang) => lang.locale === 'es'));
+  });
+
+  test('settingsIndex returns source language and non-source items', async ({
+    assert,
+  }) => {
+    await createConfigRecord();
+    setupMockCms(testCmsConfig);
+
+    await User.create({
+      name: 'Spanish Editor',
+      email: 'es@test.com',
+      password: 'password',
+      language: 'es',
+    });
+
+    const service = new LanguageService(cms);
+    const user = await User.create({
+      name: 'Admin',
+      email: 'admin@test.com',
+      password: 'password',
+      language: '*',
+    });
+
+    const { sourceLanguage, languageItems } = await service.settingsIndex(user);
+
+    assert.equal(sourceLanguage.locale, 'en');
+    assert.lengthOf(languageItems, 2);
+    assert.isTrue(languageItems.every((item) => item.locale !== 'en'));
+
+    const spanish = languageItems.find((item) => item.locale === 'es');
+    assert.isDefined(spanish);
+    assert.lengthOf(spanish!.teamMembers ?? [], 1);
+    assert.equal(spanish!.teamMembers![0].name, 'Spanish Editor');
+  });
+
+  test('languagesEdit returns configured languages', async ({ assert }) => {
+    setupMockCms(testCmsConfig);
+
+    const service = new LanguageService(cms);
+    const props = service.languagesEdit();
+
+    assert.lengthOf(props.addedLanguages, 3);
+    assert.equal(props.addedLanguages[0].locale, 'en');
+  });
+
+  test('getSupportRequestDetails throws for unknown support code', async ({ assert }) => {
+    setupMockCms(testCmsConfig);
+
+    const service = new LanguageService(cms);
+
+    await assert.rejects(
+      () => service.getSupportRequestDetails('UNKNOWN_CODE' as 'REMOVE_LANGUAGE'),
+      /Invalid support code/,
+    );
+  });
+});
diff --git a/src/types.ts b/src/types.ts
index 0a2294e0..1afb1741 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -635,7 +635,7 @@ export interface LanguageSpecification {
 
 export interface LanguageTableItem extends LanguageSpecification {
   translationProgress?: Omit<Progress, 'lastUpdated'>[];
-  teamMembers?: UserInterface[];
+  teamMembers?: UserMeta[];
 }
 
 export interface Providers {