Sco 1753 language UI

.cursorignore

@@ -0,0 +1 @@
+.env

histoire.config.ts

@@ -83,6 +83,10 @@ export default defineConfig({
         id: 'team',
         title: 'Team',
       },
+      {
+        id: 'settings',
+        title: 'Settings',
+      },
       {
         id: 'shared',
         title: 'Shared',

src/backend/define_config.ts

@@ -10,6 +10,7 @@ export function defineConfig(config: Partial<CmsConfig>): CmsConfig {
       hasAppPreview: false,
       helpUrl: 'https://journeys.helpscoutdocs.com/',
       logo: 'https://res.cloudinary.com/journeys/image/upload/v1756295658/logo_g8k7tf.png',
+      mailFromAddress: 'ops@scoutredeem.co',
       ...config.meta,
     },
 

src/backend/stubs/config/cms.stub

@@ -80,6 +80,11 @@ const cmsConfig: CmsConfig = defineConfig({
      * Are we embedding a Flutter preview?
      */
     hasAppPreview: false,
+
+    /**
+     * Contact email for enquiries (from MAIL_FROM_ADDRESS)
+     */
+    mailFromAddress: 'ops@scoutredeem.co',
   },
 
   languages: {

src/frontend/dashboard/ring-block.story.vue

@@ -0,0 +1,51 @@
+<template>
+  <Story title="Ring block" group="dashboard" :layout="{ type: 'grid', width: 350 }">
+    <Variant title="Incomplete">
+      <div class="bg-white p-8">
+        <RingBlock
+          :progress="[
+            { name: 'Interface', done: 75, draft: 0, total: 100 },
+            { name: 'Content', done: 100, draft: 20, total: 100 },
+          ]"
+        />
+      </div>
+    </Variant>
+
+    <Variant title="All done">
+      <div class="bg-white p-8">
+        <RingBlock
+          :progress="[
+            { name: 'Interface', done: 100, draft: 50, total: 100 },
+            { name: 'Content', done: 300, draft: 10, total: 300 },
+          ]"
+        />
+      </div>
+    </Variant>
+
+    <Variant title="Not started">
+      <div class="bg-white p-8">
+        <RingBlock
+          :progress="[
+            { name: 'Interface', done: 0, draft: 0, total: 100 },
+            { name: 'Content', done: 0, draft: 0, total: 300 },
+          ]"
+        />
+      </div>
+    </Variant>
+
+    <Variant title="In progress">
+      <div class="bg-white p-8">
+        <RingBlock
+          :progress="[
+            { name: 'Interface', done: 50, draft: 10, total: 100 },
+            { name: 'Content', done: 150, draft: 0, total: 300 },
+          ]"
+        />
+      </div>
+    </Variant>
+  </Story>
+</template>
+
+<script setup lang="ts">
+import RingBlock from './ring-block.vue';
+</script>

src/frontend/dashboard/ring-block.vue

@@ -0,0 +1,116 @@
+<template>
+  <div class="flex flex-col items-center text-gray-500">
+    <template v-if="hasCompleteRings">
+      <div class="relative mx-auto size-20 rounded-full border-[3px] border-teal-500">
+        <div class="absolute inset-0 flex items-center justify-center">
+          <Icon name="check-large" class="h-auto w-6 text-teal-500" />
+        </div>
+      </div>
+      <p class="mt-2 text-center text-xs font-medium leading-4">All done</p>
+    </template>
+    <template v-else>
+      <div class="flex justify-between gap-8">
+        <div v-for="item in ringData" :key="item.name" class="flex flex-col items-center">
+          <p class="mb-2 text-center text-sm font-medium leading-4">
+            {{ item.name }}
+          </p>
+          <div class="relative flex flex-col items-center justify-center">
+            <svg
+              v-if="item.label !== ''"
+              class="-rotate-90"
+              :height="circleWidth"
+              :width="circleWidth"
+            >
+              <circle
+                class="fill-transparent stroke-teal-500 stroke-[6px]"
+                stroke="currentColor"
+                :r="circleRadius"
+                :cx="center"
+                :cy="center"
+                :stroke-dasharray="`${item.tealSegment} ${circumference}`"
+                stroke-dashoffset="0"
+              />
+              <circle
+                class="fill-transparent stroke-blue-500 stroke-[6px]"
+                stroke="currentColor"
+                :r="circleRadius"
+                :cx="center"
+                :cy="center"
+                :stroke-dasharray="`${item.blueSegment} ${circumference}`"
+                :stroke-dashoffset="`-${item.tealSegment}`"
+              />
+              <circle
+                class="fill-transparent stroke-gray-200 stroke-[6px]"
+                stroke="currentColor"
+                :r="circleRadius"
+                :cx="center"
+                :cy="center"
+                :stroke-dasharray="`${item.unfilledSegment} ${circumference}`"
+                :stroke-dashoffset="`-${item.tealSegment + item.blueSegment}`"
+              />
+            </svg>
+            <div class="absolute inset-0 flex items-center justify-center">
+              <div v-if="item.donePercentage === 100 && item.draftPercentage === 0">
+                <Icon name="check" class="h-auto w-4 text-teal-500" />
+              </div>
+              <span v-else class="text-sm font-bold leading-none text-gray-800">
+                {{ item.label }}
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import Icon from '../shared/icon.vue';
+import type { Progress } from '../../types';
+
+const props = defineProps<{ progress: Omit<Progress, 'lastUpdated'>[] }>();
+
+const hasCompleteRings = computed(() => {
+  return props.progress.every((stat) => stat.done === stat.total);
+});
+
+const circleWidth = 80;
+const center = circleWidth / 2;
+const circleRadius = circleWidth / 2 - 6;
+const circumference = 2 * Math.PI * circleRadius;
+
+function computeRingData(item: Omit<Progress, 'lastUpdated'>) {
+  const isOverdone = item.done + item.draft > item.total;
+  const workingDone = isOverdone
+    ? item.done - (item.done + item.draft - item.total)
+    : item.done;
+  const donePercentage =
+    item.total === 0 ? 0 : Math.round((workingDone / item.total) * 100);
+  const draftPercentage =
+    item.total === 0 ? 0 : Math.round((item.draft / item.total) * 100);
+  const unfilledPercentage = 100 - (donePercentage + draftPercentage);
+
+  let label = '';
+  const nr = donePercentage + draftPercentage;
+  if (!isNaN(nr)) {
+    label = nr > 100 ? '100%' : `${nr}%`;
+  }
+
+  const tealSegment = circumference * (donePercentage / 100);
+  const blueSegment = circumference * (draftPercentage / 100);
+  const unfilledSegment = circumference * (unfilledPercentage / 100);
+
+  return {
+    name: item.name,
+    label,
+    donePercentage,
+    draftPercentage,
+    tealSegment,
+    blueSegment,
+    unfilledSegment,
+  };
+}
+
+const ringData = computed(() => props.progress.map(computeRingData));
+</script>

src/frontend/index.ts

@@ -23,6 +23,8 @@ import ImageField from './fields/image-field.vue';
 import IndexCard from './stories/components/index-card.vue';
 import IndexFilter from './shared/index-filter.vue';
 import LabelButton from './shared/label-button.vue';
+import LanguagesEdit from './settings/languages/languages-edit.vue';
+import SettingsIndex from './settings/settings-index.vue';
 import ListField from './fields/list-field.vue';
 import ListSwitcher from './shared/list-switcher.vue';
 import Login from './auth/login-index.vue';
@@ -91,6 +93,8 @@ export {
   IndexCard,
   IndexFilter,
   LabelButton,
+  LanguagesEdit,
+  SettingsIndex,
   ListField,
   ListSwitcher,
   Login,

src/frontend/settings/languages/components/bible-translations-modal.story.vue

@@ -0,0 +1,137 @@
+<template>
+  <Story title="Bible Translations Modal" group="settings">
+    <Variant title="With translations" :setup-app="setupWithTranslations">
+      <button
+        class="rounded bg-blue-500 px-4 py-2 text-white"
+        @click="showModal = true"
+      >
+        Choose Bible translation
+      </button>
+      <BibleTranslationsModal
+        :open="showModal"
+        :item="englishItem"
+        @close="showModal = false"
+        @confirm="onConfirm"
+      />
+    </Variant>
+    <Variant title="No translations for language" :setup-app="setupWithTranslations">
+      <button
+        class="rounded bg-blue-500 px-4 py-2 text-white"
+        @click="showEmptyModal = true"
+      >
+        Choose Bible translation
+      </button>
+      <BibleTranslationsModal
+        :open="showEmptyModal"
+        :item="obscureLanguageItem"
+        @close="showEmptyModal = false"
+        @confirm="onConfirm"
+      />
+    </Variant>
+    <Variant title="Multiple versions" :setup-app="setupWithMultipleVersions">
+      <button
+        class="rounded bg-blue-500 px-4 py-2 text-white"
+        @click="showMultipleModal = true"
+      >
+        Choose Bible translation
+      </button>
+      <BibleTranslationsModal
+        :open="showMultipleModal"
+        :item="spanishItem"
+        @close="showMultipleModal = false"
+        @confirm="onConfirm"
+      />
+    </Variant>
+  </Story>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import BibleTranslationsModal from './bible-translations-modal.vue';
+import { useSharedStore, useWidgetsStore } from '../../../store';
+import type { StoryHandler } from '../../../shared/helpers';
+import type { LanguageTableItem } from '../../../../types';
+
+const showModal = ref(false);
+const showEmptyModal = ref(false);
+const showMultipleModal = ref(false);
+
+const englishItem: LanguageTableItem = {
+  language: 'English',
+  languageDirection: 'ltr',
+  locale: 'en',
+  bibleVersion: 'de4e12af7f28f599-01',
+  bibleLabel: '(KJV) King James Version',
+};
+
+const obscureLanguageItem: LanguageTableItem = {
+  language: 'Klingon',
+  languageDirection: 'ltr',
+  locale: 'tlh',
+};
+
+const spanishItem: LanguageTableItem = {
+  language: 'Spanish',
+  languageDirection: 'ltr',
+  locale: 'es',
+  bibleVersion: '592420522e16049f-01',
+  bibleLabel: '(RVR1960) Reina-Valera 1960',
+};
+
+const mockEnglishTranslations = [
+  {
+    language: 'English',
+    bibleVersion: 'de4e12af7f28f599-01',
+    bibleLabel: '(KJV) King James Version',
+  },
+  {
+    language: 'English',
+    bibleVersion: '9879dbb7cfe39e4d-01',
+    bibleLabel: '(ERV) Easy-to-Read Version',
+  },
+  {
+    language: 'English',
+    bibleVersion: 'abc123-01',
+    bibleLabel: '(ESV) English Standard Version',
+  },
+];
+
+const mockTranslationsWithMultiple = [
+  ...mockEnglishTranslations,
+  {
+    language: 'Spanish',
+    bibleVersion: '592420522e16049f-01',
+    bibleLabel: '(RVR1960) Reina-Valera 1960',
+  },
+  {
+    language: 'Spanish',
+    bibleVersion: 'spa002-01',
+    bibleLabel: '(NTV) Nueva Traducción Viviente',
+  },
+  { language: 'Spanish', bibleVersion: 'spa003-01', bibleLabel: '(DHH) Dios Habla Hoy' },
+];
+
+const setupWithTranslations: StoryHandler = () => {
+  const shared = useSharedStore();
+  const widgets = useWidgetsStore();
+  shared.setBibleTranslations(mockEnglishTranslations);
+  widgets.setProviders({
+    ...widgets.providers,
+    scripture: { bibleApiKey: 'mock-key-for-story' },
+  });
+};
+
+const setupWithMultipleVersions: StoryHandler = () => {
+  const shared = useSharedStore();
+  const widgets = useWidgetsStore();
+  shared.setBibleTranslations(mockTranslationsWithMultiple);
+  widgets.setProviders({
+    ...widgets.providers,
+    scripture: { bibleApiKey: 'mock-key-for-story' },
+  });
+};
+
+const onConfirm = (bibleVersion: string, bibleVersionName: string) => {
+  alert(`Confirmed: ${bibleVersionName} (${bibleVersion})`);
+};
+</script>