From 665cd2c249e73989145c28125644e8c44f54842a Mon Sep 17 00:00:00 2001
From: Gordon Lin <75815453+gordlin@users.noreply.github.com>
Date: Fri, 4 Oct 2024 13:00:19 -0400
Subject: [PATCH] Implement ToC redesign/refactor, both-language previews

---
 src/app.vue                        |   2 +-
 src/components/editor.vue          | 215 ++++++--
 src/components/metadata-editor.vue |  69 ++-
 src/components/preview.vue         |   2 +-
 src/components/slide-editor.vue    |  10 +-
 src/components/slide-toc.vue       | 757 +++++++++++++++++++++++------
 src/definitions.ts                 |   5 +
 src/lang/lang.csv                  |  24 +-
 8 files changed, 875 insertions(+), 209 deletions(-)

diff --git a/src/app.vue b/src/app.vue
index e2a0351d..b892b25f 100644
--- a/src/app.vue
+++ b/src/app.vue
@@ -29,7 +29,7 @@ export default class App extends Vue {
 </script>
 
 <style lang="scss">
-$font-list: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+$font-list: 'Segoe UI', system-ui, ui-sans-serif, Tahoma, Geneva, Verdana, sans-serif;
 
 .ovwContainer .layerTile {
     max-width: initial;
diff --git a/src/components/editor.vue b/src/components/editor.vue
index e534677b..f3c10977 100644
--- a/src/components/editor.vue
+++ b/src/components/editor.vue
@@ -70,9 +70,36 @@
                 </span>
             </transition>
             <slot name="langModal" v-bind="{ unsavedChanges: unsavedChanges }"></slot>
-            <button @click="preview" class="editor-button bg-white border border-black hover:bg-gray-100">
-                {{ $t('editor.preview') }}
-            </button>
+            <!-- Preview dropdown -->
+            <div class="dropdown editor-button">
+                <button class="dropbtn flex gap-2 items-center">
+                    <p>{{ $t('editor.preview') }}</p>
+                    <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        xmlns:xlink="http://www.w3.org/1999/xlink"
+                        x="0px"
+                        y="0px"
+                        viewBox="0 0 122.88 66.91"
+                        style="enable-background: new 0 0 122.88 66.91"
+                        xml:space="preserve"
+                        height="12"
+                        width="12"
+                        class="fill-current transform rotate-180"
+                    >
+                        <g>
+                            <path
+                                d="M11.68,64.96c-2.72,2.65-7.08,2.59-9.73-0.14c-2.65-2.72-2.59-7.08,0.13-9.73L56.87,1.97l4.8,4.93l-4.81-4.95 c2.74-2.65,7.1-2.58,9.76,0.15c0.08,0.08,0.15,0.16,0.23,0.24L120.8,55.1c2.72,2.65,2.78,7.01,0.13,9.73 c-2.65,2.72-7,2.78-9.73,0.14L61.65,16.5L11.68,64.96L11.68,64.96z"
+                            />
+                        </g>
+                    </svg>
+                </button>
+                <div class="dropdown-content">
+                    <button @click.stop="preview('en')" class="border-b border-gray-400">
+                        {{ $t('editor.lang.en') }}
+                    </button>
+                    <button @click.stop="preview('fr')">{{ $t('editor.lang.fr') }}</button>
+                </div>
+            </div>
             <button @click="saveChanges" class="editor-button bg-black text-white hover:bg-gray-900" :disabled="saving">
                 <span class="inline-block">{{ saving ? $t('editor.savingChanges') : $t('editor.saveChanges') }}</span>
                 <span v-if="saving" class="align-middle inline-block px-1">
@@ -95,8 +122,8 @@
         <div class="flex">
             <div class="w-80 flex-shrink-0 border-r border-black editor-toc">
                 <div class="flex items-center justify-center border-b p-2">
-                    <button class="editor-toc-button editor-button" @click.stop="$vfm.open('metadata-edit-modal')">
-                        <span class="align-middle inline-block px-1"
+                    <button class="toc-popup-button" @click.stop="$vfm.open('metadata-edit-modal')">
+                        <span class="align-middle inline-block pr-1"
                             ><svg
                                 clip-rule="evenodd"
                                 fill-rule="evenodd"
@@ -117,7 +144,7 @@
                     </button>
                 </div>
                 <slide-toc
-                    :slides="slides"
+                    :bothLanguageSlides="bothLanguageSlides"
                     :currentSlide="currentSlide"
                     :slideIndex="slideIndex"
                     @slide-change="selectSlide"
@@ -127,29 +154,33 @@
                     :sourceCounts="sourceCounts"
                 ></slide-toc>
             </div>
-            <slide-editor
-                ref="slide"
-                :configFileStructure="configFileStructure"
-                :currentSlide="currentSlide"
-                :lang="configLang"
-                :slideIndex="slideIndex"
-                :isLast="slideIndex === slides.length - 1"
-                :uid="uuid"
-                @slide-change="selectSlide"
-                @slide-edit="onSlidesEdited"
-                @custom-slide-updated="updateCustomSlide"
-                :sourceCounts="sourceCounts"
-            ></slide-editor>
-        </div>
-        <div class="footer text-right pr-5 editor-button">
-            <a
-                :href="`mailto:applicationsdecartographieweb-webmappingapplications@ec.gc.ca?subject=${$t(
-                    'editor.feedback.subject'
-                )}`"
-            >
-                {{ $t('editor.feedback') }}
-            </a>
+            <div class="flex flex-col space-between w-full">
+                <slide-editor
+                    class="flex-1 w-full"
+                    ref="slide"
+                    :configFileStructure="configFileStructure"
+                    :currentSlide="currentSlide"
+                    :lang="bothLanguageSlides.find((slides) => slides.fr === currentSlide) ? 'fr' : 'en'"
+                    :slideIndex="slideIndex"
+                    :isLast="slideIndex === bothLanguageSlides.length - 1"
+                    :uid="uuid"
+                    @slide-change="selectSlide"
+                    @slide-edit="onSlidesEdited"
+                    @custom-slide-updated="updateCustomSlide"
+                    :sourceCounts="sourceCounts"
+                ></slide-editor>
+                <div class="footer text-right pr-5 editor-button h-fit">
+                    <a
+                        :href="`mailto:applicationsdecartographieweb-webmappingapplications@ec.gc.ca?subject=${$t(
+                            'editor.feedback.subject'
+                        )}`"
+                    >
+                        {{ $t('editor.feedback') }}
+                    </a>
+                </div>
+            </div>
         </div>
+
         <slot name="metadataModal"></slot>
         <help-panel :helpSections="helpSections" :originalTextArray="originalTextArray"></help-panel>
         <confirmation-modal
@@ -162,7 +193,15 @@
 
 <script lang="ts">
 import { Options, Prop, Vue, Watch } from 'vue-property-decorator';
-import { ConfigFileStructure, HelpSection, MetadataContent, Slide, SourceCounts, StoryRampConfig } from '@/definitions';
+import {
+    ConfigFileStructure,
+    HelpSection,
+    MetadataContent,
+    Slide,
+    SlideForBothLanguages,
+    SourceCounts,
+    StoryRampConfig
+} from '@/definitions';
 import { VueSpinnerOval } from 'vue3-spinners';
 import axios from 'axios';
 import { marked } from 'marked';
@@ -192,6 +231,8 @@ export default class EditorV extends Vue {
     @Prop() configFileStructure!: ConfigFileStructure | undefined;
     @Prop() sourceCounts!: SourceCounts;
     @Prop() metadata!: MetadataContent;
+
+    @Prop() bothLanguageSlides!: SlideForBothLanguages[];
     @Prop() slides!: Slide[];
     @Prop() configLang!: string;
     @Prop() saving!: boolean;
@@ -200,14 +241,14 @@ export default class EditorV extends Vue {
     // Form properties.
     uuid = '';
     logoImage: undefined | File = undefined;
-    loadSlides: undefined | Slide[] = undefined;
+    loadSlides: undefined | SlideForBothLanguages[] = undefined;
     currentSlide: Slide | string = '';
     slideIndex = -1;
     helpSections: HelpSection[] = [];
     helpMd = '';
     originalTextArray: string[] = [];
 
-    @Watch('slides', { deep: true })
+    @Watch('bothLanguageSlides', { deep: true })
     onSlidesEdited(): void {
         this.$emit('save-status', true);
     }
@@ -218,7 +259,7 @@ export default class EditorV extends Vue {
     }
 
     created(): void {
-        this.loadSlides = this.slides;
+        this.loadSlides = this.bothLanguageSlides;
         this.uuid = this.$route.params.uid as string;
 
         window.addEventListener('beforeunload', this.beforeWindowUnload);
@@ -242,7 +283,7 @@ export default class EditorV extends Vue {
     /**
      * Change current slide to selected slide.
      */
-    selectSlide(index: number): void {
+    selectSlide(index: number, lang?: string): void {
         // save changes to current slide before changing slides
         if (this.$refs.slide !== undefined) {
             (this.$refs.slide as SlideEditorV).saveChanges();
@@ -255,7 +296,22 @@ export default class EditorV extends Vue {
         };
 
         setTimeout(() => {
-            this.currentSlide = index === -1 ? '' : (this.loadSlides as Slide[])[index];
+            if (
+                index === -1 ||
+                !this.loadSlides ||
+                !this.loadSlides?.[index] ||
+                !this.loadSlides?.[index][
+                    (lang as keyof SlideForBothLanguages) ?? (this.configLang as keyof SlideForBothLanguages)
+                ]
+            ) {
+                this.currentSlide = '';
+            } else {
+                this.currentSlide =
+                    this.loadSlides[index][
+                        (lang as keyof SlideForBothLanguages) ?? (this.configLang as keyof SlideForBothLanguages)
+                    ]!;
+            }
+
             this.slideIndex = index;
             (this.$refs.slide as SlideEditorV).panelIndex = 0;
             (this.$refs.slide as SlideEditorV).advancedEditorView = false;
@@ -268,7 +324,7 @@ export default class EditorV extends Vue {
      */
     updateCustomSlide(slideConfig: Slide, save?: boolean): void {
         this.currentSlide = slideConfig;
-        this.slides[this.slideIndex] = slideConfig;
+        this.bothLanguageSlides[this.slideIndex][this.configLang as keyof SlideForBothLanguages] = slideConfig;
         // save changes emitted from advanced editor
         if (save) {
             this.$emit('save-changes');
@@ -278,9 +334,14 @@ export default class EditorV extends Vue {
     /**
      * Updates slides after adding, removing, or reordering.
      */
-    updateSlides(slides: Slide[]): void {
+    updateSlides(slides: SlideForBothLanguages[]): void {
         this.loadSlides = slides;
-        this.slideIndex = this.loadSlides.indexOf(this.currentSlide as Slide);
+        this.slideIndex = this.loadSlides.findIndex(
+            (bothSlides) =>
+                (this.currentSlide as Slide) === bothSlides['en'] || (this.currentSlide as Slide) === bothSlides['fr']
+        );
+        this.configs.en!.slides = this.bothLanguageSlides.filter((slides) => slides.en).map((slides) => slides.en!);
+        this.configs.fr!.slides = this.bothLanguageSlides.filter((slides) => slides.fr).map((slides) => slides.fr!);
     }
 
     /**
@@ -317,8 +378,9 @@ export default class EditorV extends Vue {
 
     /**
      * Open current editor config as a new Storylines product in new tab.
+     * @param language The config language to preview (either 'en' or 'fr')
      */
-    preview(): void {
+    preview(language: string): void {
         // save current slide final changes before previewing product
         if (this.$refs.slide != null && this.currentSlide !== '') {
             (this.$refs.slide as SlideEditorV).saveChanges();
@@ -327,7 +389,7 @@ export default class EditorV extends Vue {
         setTimeout(() => {
             const routeData = this.$router.resolve({
                 name: 'preview',
-                params: { lang: this.configLang, uid: this.uuid }
+                params: { lang: language, uid: this.uuid }
             });
             const previewTab = window.open(routeData.href, '_blank');
             (previewTab as Window).props = {
@@ -428,4 +490,79 @@ export default class EditorV extends Vue {
     font-size: 24px;
     line-height: 1.8rem;
 }
+
+.toc-popup-button {
+    border: 1px solid rgb(135, 135, 135);
+    background-color: rgb(243, 243, 243);
+    border-radius: 3px;
+    padding: 3px 12px;
+}
+.toc-popup-button:hover {
+    background-color: rgb(234, 234, 234);
+}
+.toc-popup-button:active {
+    background-color: rgb(221, 221, 221);
+}
+
+/* 
+ * Preview language selection dropdown styling
+ * Base (pre-styling) code graciously provided by 
+ * https://www.w3schools.com/howto/howto_css_dropdown.asp 
+ */
+
+/* Dropdown Button */
+.dropbtn {
+    background-color: white;
+    color: black;
+    padding: 5px 14px;
+    font-size: 16px;
+    font-weight: 600;
+    border: 1px solid black;
+    transition: background-color 0.2s;
+}
+
+/* Main dropdown icon - required for positioning */
+.dropdown {
+    position: relative;
+    display: inline-block;
+    margin: 0;
+    padding: 0;
+}
+
+/* The dropdown box with the links */
+.dropdown-content {
+    display: none;
+    position: absolute;
+    background-color: white;
+    min-width: 110px;
+    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
+    z-index: 1;
+    border: 1px solid lightgray;
+}
+
+/* Links inside the dropdown */
+.dropdown-content button {
+    color: black;
+    padding: 7px 10px;
+    text-decoration: none;
+    display: block;
+    text-align: center;
+    font-weight: 500;
+    width: 100%;
+}
+
+/* Change color of dropdown links on hover */
+.dropdown-content button:hover {
+    background-color: #e6e5e5;
+}
+
+/* Show the dropdown menu on hover */
+.dropdown:hover .dropdown-content {
+    display: block;
+}
+
+/* Change the background color of the dropdown button when the dropdown content is shown */
+.dropdown:hover .dropbtn {
+    background-color: #dbdbdb;
+}
 </style>
diff --git a/src/components/metadata-editor.vue b/src/components/metadata-editor.vue
index 873d1d42..87b2389d 100644
--- a/src/components/metadata-editor.vue
+++ b/src/components/metadata-editor.vue
@@ -248,7 +248,7 @@
                 :configFileStructure="configFileStructure"
                 :sourceCounts="sourceCounts"
                 :metadata="metadata"
-                :slides="slides"
+                :bothLanguageSlides="bothLanguageSlides"
                 :configLang="configLang"
                 :saving="saving"
                 :unsavedChanges="unsavedChanges"
@@ -257,20 +257,6 @@
                 @refresh-config="refreshConfig"
                 ref="mainEditor"
             >
-                <template v-slot:langModal="slotProps">
-                    <button
-                        class="editor-button"
-                        @click.stop="slotProps.unsavedChanges ? $vfm.open(`change-lang`) : swapLang()"
-                    >
-                        {{ configLang === 'en' ? $t('editor.frenchConfig') : $t('editor.englishConfig') }}
-                    </button>
-                    <confirmation-modal
-                        :name="`change-lang`"
-                        :message="$t('editor.changeLang.modal')"
-                        @ok="swapLang()"
-                    />
-                </template>
-
                 <template v-slot:metadataModal>
                     <vue-final-modal
                         modalId="metadata-edit-modal"
@@ -316,6 +302,7 @@ import {
     MetadataContent,
     PanelType,
     Slide,
+    SlideForBothLanguages,
     SlideshowPanel,
     SourceCounts,
     StoryRampConfig,
@@ -422,6 +409,8 @@ export default class MetadataEditorV extends Vue {
         uuid: true
     };
     slides: Slide[] = [];
+    bothLanguageSlides: SlideForBothLanguages[] = [];
+
     sourceCounts: SourceCounts = {};
 
     created(): void {
@@ -467,6 +456,22 @@ export default class MetadataEditorV extends Vue {
                 const logo = this.configs[this.configLang]?.introSlide.logo?.src;
                 const logoSrc = `assets/${this.configLang}/${this.metadata.logoName}`;
 
+                const frSlides = props.configs.en?.slides.map((engSlide) => {
+                    return {
+                        en: engSlide
+                    };
+                });
+                const engSlides = props.configs.fr?.slides.map((frSlide) => {
+                    return {
+                        fr: frSlide
+                    };
+                });
+
+                const maxLength = Math.max(frSlides!.length ?? 0, engSlides!.length ?? 0);
+                this.bothLanguageSlides = Array.from({ length: maxLength }, (_, index) =>
+                    Object.assign({}, engSlides?.[index] || { en: undefined }, frSlides?.[index] || { fr: undefined })
+                );
+
                 if (logo) {
                     const logoFile = this.configFileStructure?.zip.file(logoSrc);
                     if (logoFile) {
@@ -918,6 +923,22 @@ export default class MetadataEditorV extends Vue {
 
         this.slides = config.slides;
 
+        const frSlides = this.configs.fr?.slides.map((frSlide) => {
+            return {
+                fr: frSlide
+            };
+        });
+        const engSlides = this.configs.en?.slides.map((enSlide) => {
+            return {
+                en: enSlide
+            };
+        });
+
+        const maxLength = Math.max(frSlides!.length ?? 0, engSlides!.length ?? 0);
+        this.bothLanguageSlides = Array.from({ length: maxLength }, (_, index) =>
+            Object.assign({}, engSlides?.[index] || { en: undefined }, frSlides?.[index] || { fr: undefined })
+        );
+
         const logo = config.introSlide.logo?.src;
         if (logo) {
             // Set the alt text for the logo.
@@ -963,11 +984,15 @@ export default class MetadataEditorV extends Vue {
     generateConfig(): ConfigFileStructure {
         this.saving = true;
 
-        // Update the configuration file.
-        const fileName = `${this.uuid}_${this.configLang}.json`;
-        const formattedConfigFile = JSON.stringify(this.configs[this.configLang], null, 4);
+        // Update the configuration files, for both languages.
+        const engFileName = `${this.uuid}_en.json`;
+        const frFileName = `${this.uuid}_fr.json`;
+
+        const engFormattedConfigFile = JSON.stringify(this.configs.en, null, 4);
+        const frFormattedConfigFile = JSON.stringify(this.configs.fr, null, 4);
 
-        this.configFileStructure?.zip.file(fileName, formattedConfigFile);
+        this.configFileStructure?.zip.file(engFileName, engFormattedConfigFile);
+        this.configFileStructure?.zip.file(frFileName, frFormattedConfigFile);
 
         // Upload the ZIP file.
         this.configFileStructure?.zip.generateAsync({ type: 'blob' }).then((content: Blob) => {
@@ -1131,7 +1156,7 @@ export default class MetadataEditorV extends Vue {
             returnTop: true
         };
         this.configs = { en: undefined, fr: undefined };
-        this.slides = [];
+        this.bothLanguageSlides = [];
     }
 
     /**
@@ -1145,7 +1170,7 @@ export default class MetadataEditorV extends Vue {
         this.loadConfig(this.configs[this.configLang]);
 
         if (this.loadEditor) {
-            (this.$refs.mainEditor as EditorV).updateSlides(this.slides);
+            (this.$refs.mainEditor as EditorV).updateSlides(this.bothLanguageSlides);
             (this.$refs.mainEditor as EditorV).selectSlide(-1);
         }
     }
@@ -1365,7 +1390,7 @@ export default class MetadataEditorV extends Vue {
 </script>
 
 <style lang="scss">
-$font-list: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+$font-list: 'Segoe UI', system-ui, ui-sans-serif, Tahoma, Geneva, Verdana, sans-serif;
 
 .storyramp-app,
 .vfm {
diff --git a/src/components/preview.vue b/src/components/preview.vue
index a7607f2e..6892bdac 100644
--- a/src/components/preview.vue
+++ b/src/components/preview.vue
@@ -193,7 +193,7 @@ export default class StoryPreviewV extends Vue {
 </script>
 
 <style lang="scss">
-$font-list: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+$font-list: 'Segoe UI', system-ui, ui-sans-serif, Tahoma, Geneva, Verdana, sans-serif;
 
 .storyramp-app {
     h1,
diff --git a/src/components/slide-editor.vue b/src/components/slide-editor.vue
index 02cffde0..d1f889ce 100644
--- a/src/components/slide-editor.vue
+++ b/src/components/slide-editor.vue
@@ -1,8 +1,9 @@
 <template>
-    <div class="sticky top-20 h-auto self-start flex-grow m-5">
+    <div class="overflow-y-auto top-20 h-auto self-start flex-grow p-5">
         <div v-if="!!currentSlide">
             <div class="flex">
                 <div class="flex flex-col w-full">
+                    <h2 class="font-bold mb-3">{{ $t('editor.slides.currentLangLabel', { lang: langTranslate }) }}</h2>
                     <label class="editor-label" for="slideTitle">{{ $t('editor.slides.slideTitle') }}:</label>
                     <div class="flex">
                         <input
@@ -406,6 +407,8 @@ export default class SlideEditorV extends Vue {
     centerPanel = false;
     dynamicSelected = false;
 
+    langTranslate = '';
+
     editors: Record<string, string> = {
         text: 'text-editor',
         image: 'image-editor',
@@ -417,8 +420,13 @@ export default class SlideEditorV extends Vue {
         dynamic: 'dynamic-editor'
     };
 
+    mounted() {
+        this.langTranslate = this.$t(`editor.lang.${this.lang}`);
+    }
+
     @Watch('currentSlide', { deep: true })
     onSlideChange(): void {
+        this.langTranslate = this.$t(`editor.lang.${this.lang}`);
         this.currentSlide ? (this.rightOnly = this.currentSlide.panel.length === 1) : false;
     }
 
diff --git a/src/components/slide-toc.vue b/src/components/slide-toc.vue
index 71f07c80..4bd4313c 100644
--- a/src/components/slide-toc.vue
+++ b/src/components/slide-toc.vue
@@ -1,140 +1,513 @@
 <template>
     <div>
-        <div class="flex toc-header p-2 mt-10">
-            <span class="flex items-center justify-center font-bold"> {{ $t('editor.slides.title') }}</span>
-            <span class="flex-1"></span>
-            <span class="ml-auto"></span>
-            <button class="editor-button" v-on:click="addNewSlide">
-                <span class="align-middle inline-block px-1"
+        <div class="flex toc-header px-3 pt-2 mt-5 pb-2 border-b align-bottom items-end">
+            <p class="flex items-center justify-center font-bold">{{ $t('editor.slides.slideHeader') }}</p>
+            <p class="flex-1"></p>
+            <p class="ml-auto"></p>
+            <button class="mx-auto toc-popup-button py-0 px-2" @click="addNewSlide">
+                <span class="inline-block pr-1"
                     ><svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 24 24">
                         <path d="M24 10h-10v-10h-4v10h-10v4h10v10h4v-10h10z" />
                     </svg>
                 </span>
-                <span class="align-middle inline-block">{{ $t('editor.slides.addSlide') }}</span>
+                <span class="inline-block text-sm font-normal">{{ $t('editor.slides.addSlide') }}</span>
             </button>
-            <button
-                class="editor-button"
-                @click.stop="$vfm.open(`copy-from-other-lang`)"
-                v-tippy="{
-                    delay: '200',
-                    placement: 'right',
-                    content: $t('editor.slides.copyFromLang'),
-                    animateFill: true
-                }"
-                :aria-label="$t('editor.slides.copyFromLang')"
-            >
-                <svg xmlns="http://www.w3.org/2000/svg" height="24" width="24">
-                    <path
-                        d="M5 22q-.825 0-1.413-.587Q3 20.825 3 20V6h2v14h11v2Zm4-4q-.825 0-1.412-.587Q7 16.825 7 16V4q0-.825.588-1.413Q8.175 2 9 2h9q.825 0 1.413.587Q20 3.175 20 4v12q0 .825-.587 1.413Q18.825 18 18 18Zm0-2h9V4H9v12Zm0 0V4v12Z"
-                    />
-                </svg>
-            </button>
-            <vue-final-modal
-                modalId="copy-from-other-lang"
-                content-class="flex flex-col max-w-xl mx-4 p-4 bg-white border rounded-lg space-y-2"
-                class="flex justify-center items-center"
-            >
-                <h2 slot="header" class="text-xl font-bold">{{ $t('editor.slides.copyFromLang') }}</h2>
-                <div class="flex flex-col">
-                    <button class="editor-toc-button editor-button h-12 ml-0" @click="$vfm.open(`confirm-copy-all`)">
-                        {{ $t('editor.slides.copyAll') }}
-                    </button>
-                    <span class="text-lg font-bold my-3 text-center"> {{ $t('editor.label.or') }} </span>
-
-                    <select v-model="selectedForCopying" class="overflow-ellipsis copy-select border-2 p-2">
-                        <option
-                            v-for="(slide, index) in configFileStructure.configs[lang === 'en' ? 'fr' : 'en'].slides"
-                            :value="index"
-                            :key="slide.title + index"
-                        >
-                            {{ $t('editor.slides.slide') + ` ${index}: ` }}
-                            {{ slide.title ? slide.title : $t('editor.slide.untitled') }}
-                        </option>
-                    </select>
-
-                    <button
-                        class="editor-toc-button"
-                        @click="
-                            copyFromOtherLang(
-                                configFileStructure.configs[lang === 'en' ? 'fr' : 'en'].slides[selectedForCopying]
-                            )
-                        "
-                    >
-                        {{ $t('editor.slides.copy') }}
-                    </button>
-                    <confirmation-modal
-                        :name="`confirm-copy-all`"
-                        :message="$t('editor.slides.copyAll.confirm')"
-                        @ok="copyAllFromOtherLang(configFileStructure.configs[lang === 'en' ? 'fr' : 'en'].slides)"
-                    />
-                </div>
-            </vue-final-modal>
+            <br />
         </div>
-        <ul class="max-h-screen overflow-y-auto">
-            <draggable :list="slides" @update="$emit('slides-updated', slides)" :item-key="getSlideId" v-focus-list>
+
+        <ul class="toc-list">
+            <draggable
+                :list="bothLanguageSlides"
+                @update="$emit('slides-updated', bothLanguageSlides)"
+                :item-key="getSlideId"
+                v-focus-list
+            >
                 <template #item="{ element, index }">
                     <li
-                        class="toc-slide border-t flex px-2 cursor-pointer hover:bg-gray-300"
-                        :class="currentSlide === element ? 'bg-gray-300' : ''"
-                        @click="selectSlide(index)"
-                        :key="element.title + index"
-                        v-tippy="{
-                            delay: '200',
-                            placement: 'right',
-                            content: element.title,
-                            animateFill: true
-                        }"
+                        class="toc-slide border-t flex px-3 py-2 cursor-pointer hover:bg-gray-50"
+                        :class="slideIndex === index ? 'bg-gray-100 border-gray-300' : ''"
+                        :id="'slide' + index"
+                        :key="'slide' + index"
                         v-focus-item
                     >
-                        <div class="self-center overflow-ellipsis whitespace-nowrap overflow-hidden flex-grow ml-2">
-                            {{ $t('editor.slides.slide') }} {{ index + 1 }}:
-                            <span class="font-bold overflow-hidden">{{
-                                element.title || $t('editor.slides.addSlideTitle')
-                            }}</span>
-                        </div>
-                        <div class="flex">
-                            <div class="flex flex-col">
-                                <button class="slide-toc-button" @click.stop="$vfm.open(`delete-slide-${index}`)">
-                                    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24">
-                                        <path
-                                            d="M3 6l3 18h12l3-18h-18zm19-4v2h-20v-2h5.711c.9 0 1.631-1.099 1.631-2h5.316c0 .901.73 2 1.631 2h5.711z"
-                                        />
-                                    </svg>
-                                </button>
-                                <button class="slide-toc-button" @click.stop="copySlide(index)">
-                                    <svg xmlns="http://www.w3.org/2000/svg" height="24" width="24">
-                                        <path
-                                            d="M5 22q-.825 0-1.413-.587Q3 20.825 3 20V6h2v14h11v2Zm4-4q-.825 0-1.412-.587Q7 16.825 7 16V4q0-.825.588-1.413Q8.175 2 9 2h9q.825 0 1.413.587Q20 3.175 20 4v12q0 .825-.587 1.413Q18.825 18 18 18Zm0-2h9V4H9v12Zm0 0V4v12Z"
-                                        />
-                                    </svg>
-                                </button>
+                        <div class="flex space-between w-full align-center text-base">
+                            <div class="flex flex-col flex-1">
+                                <section class="flex space-between mb-1">
+                                    <p class="font-semibold overflow-ellipsis whitespace-nowrap overflow-hidden flex-1">
+                                        {{ $t('editor.slides.slide') }} {{ index + 1 }}
+                                    </p>
+                                    <div class="flex align-center mr-4">
+                                        <button
+                                            class="slide-toc-button px-5"
+                                            @click.stop="copySlide(index)"
+                                            v-tippy="{
+                                                delay: '200',
+                                                placement: 'top-start',
+                                                content: $t('editor.slides.toc.copySlide')
+                                            }"
+                                        >
+                                            <svg
+                                                xmlns="http://www.w3.org/2000/svg"
+                                                height="17"
+                                                width="17"
+                                                viewBox="0 0 24 24"
+                                                class="mx-1"
+                                            >
+                                                <path
+                                                    d="M5 22q-.825 0-1.413-.587Q3 20.825 3 20V6h2v14h11v2Zm4-4q-.825 0-1.412-.587Q7 16.825 7 16V4q0-.825.588-1.413Q8.175 2 9 2h9q.825 0 1.413.587Q20 3.175 20 4v12q0 .825-.587 1.413Q18.825 18 18 18Zm0-2h9V4H9v12Zm0 0V4v12Z"
+                                                />
+                                            </svg>
+                                        </button>
+                                        <button
+                                            class="slide-toc-button"
+                                            @click.stop="$vfm.open(`delete-slide-${index}`)"
+                                            v-tippy="{
+                                                delay: '200',
+                                                placement: 'top-start',
+                                                content: $t('editor.slides.toc.deleteSlide')
+                                            }"
+                                        >
+                                            <svg
+                                                xmlns="http://www.w3.org/2000/svg"
+                                                viewBox="0 0 110.61 122.88"
+                                                width="15"
+                                                height="15"
+                                                class="mx-1"
+                                            >
+                                                <path
+                                                    d="M39.27,58.64a4.74,4.74,0,1,1,9.47,0V93.72a4.74,4.74,0,1,1-9.47,0V58.64Zm63.6-19.86L98,103a22.29,22.29,0,0,1-6.33,14.1,19.41,19.41,0,0,1-13.88,5.78h-45a19.4,19.4,0,0,1-13.86-5.78l0,0A22.31,22.31,0,0,1,12.59,103L7.74,38.78H0V25c0-3.32,1.63-4.58,4.84-4.58H27.58V10.79A10.82,10.82,0,0,1,38.37,0H72.24A10.82,10.82,0,0,1,83,10.79v9.62h23.35a6.19,6.19,0,0,1,1,.06A3.86,3.86,0,0,1,110.59,24c0,.2,0,.38,0,.57V38.78Zm-9.5.17H17.24L22,102.3a12.82,12.82,0,0,0,3.57,8.1l0,0a10,10,0,0,0,7.19,3h45a10.06,10.06,0,0,0,7.19-3,12.8,12.8,0,0,0,3.59-8.1L93.37,39ZM71,20.41V12.05H39.64v8.36ZM61.87,58.64a4.74,4.74,0,1,1,9.47,0V93.72a4.74,4.74,0,1,1-9.47,0V58.64Z"
+                                                />
+                                            </svg>
+                                        </button>
+                                    </div>
+                                </section>
+
+                                <section class="flex flex-col gap-0.5 text-sm">
+                                    <!-- ENG config for slide -->
+                                    <button
+                                        class="flex gap-2 px-2 py-1 rounded-md bg-transparent hover:bg-gray-200"
+                                        :class="{
+                                            'selected-toc-config-item': element.en === currentSlide,
+                                            'cursor-not-allowed border-2 border-red-400': !element.en
+                                        }"
+                                        v-tippy="{
+                                            delay: '200',
+                                            placement: 'right',
+                                            content:
+                                                element.en?.title ||
+                                                (element.en?.title === ''
+                                                    ? $t('editor.slides.toc.newENGSlideText')
+                                                    : $t('editor.slides.toc.noENGslide')),
+                                            animateFill: true,
+                                            offset: [0, 50]
+                                        }"
+                                        @click.stop="selectSlide(index, 'en')"
+                                    >
+                                        <p
+                                            class="font-bold italic text-gray-500"
+                                            :class="{ 'text-gray-700': slideIndex === index }"
+                                        >
+                                            EN
+                                        </p>
+                                        <p
+                                            class="text-left line-clamp-2"
+                                            :class="{
+                                                italic: !element.en?.title
+                                            }"
+                                        >
+                                            {{
+                                                element.en?.title ||
+                                                (element.en?.title === ''
+                                                    ? $t('editor.slides.toc.newENGSlideText')
+                                                    : $t('editor.slides.toc.noENGslide'))
+                                            }}
+                                        </p>
+                                        <!-- Options for EN items with missing configs (e.g. one language has config, other doesn't) -->
+                                        <div v-if="!element.en" class="ml-auto flex my-auto">
+                                            <!-- Create a new blank config -->
+                                            <button
+                                                class="slide-toc-button"
+                                                :class="{
+                                                    'cursor-not-allowed opacity-50':
+                                                        index - 1 !== -1 && !bothLanguageSlides[index - 1]?.en
+                                                }"
+                                                v-tippy="{
+                                                    delay: '200',
+                                                    placement: 'top-start',
+                                                    content:
+                                                        index - 1 !== -1 && !bothLanguageSlides[index - 1]?.en
+                                                            ? $t('editor.slides.toc.prevEngDNE')
+                                                            : $t('editor.slides.toc.newBlankConfig'),
+                                                    animateFill: false
+                                                }"
+                                                @click="
+                                                    index - 1 !== -1 && !bothLanguageSlides[index - 1]?.en
+                                                        ? ''
+                                                        : createNewConfig(element, 'en')
+                                                "
+                                            >
+                                                <svg
+                                                    xmlns="http://www.w3.org/2000/svg"
+                                                    shape-rendering="geometricPrecision"
+                                                    text-rendering="geometricPrecision"
+                                                    image-rendering="optimizeQuality"
+                                                    fill-rule="evenodd"
+                                                    clip-rule="evenodd"
+                                                    viewBox="0 0 399 511.66"
+                                                    width="14"
+                                                    height="14"
+                                                    class="mx-1"
+                                                >
+                                                    <path
+                                                        fill-rule="nonzero"
+                                                        d="M71.1 0h190.92c5.22 0 9.85 2.5 12.77 6.38L394.7 136.11c2.81 3.05 4.21 6.92 4.21 10.78l.09 293.67c0 19.47-8.02 37.23-20.9 50.14l-.09.08c-12.9 12.87-30.66 20.88-50.11 20.88H71.1c-19.54 0-37.33-8.01-50.22-20.9C8.01 477.89 0 460.1 0 440.56V71.1c0-19.56 8-37.35 20.87-50.23C33.75 8 51.54 0 71.1 0zm45.78 254.04c-8.81 0-15.96-7.15-15.96-15.95 0-8.81 7.15-15.96 15.96-15.96h165.23c8.81 0 15.96 7.15 15.96 15.96 0 8.8-7.15 15.95-15.96 15.95H116.88zm0 79.38c-8.81 0-15.96-7.15-15.96-15.96 0-8.8 7.15-15.95 15.96-15.95h156.47c8.81 0 15.96 7.15 15.96 15.95 0 8.81-7.15 15.96-15.96 15.96H116.88zm0 79.39c-8.81 0-15.96-7.15-15.96-15.96s7.15-15.95 15.96-15.95h132.7c8.81 0 15.95 7.14 15.95 15.95 0 8.81-7.14 15.96-15.95 15.96h-132.7zm154.2-363.67v54.21c1.07 13.59 5.77 24.22 13.99 31.24 8.63 7.37 21.65 11.52 38.95 11.83l36.93-.05-89.87-97.23zm96.01 129.11-43.31-.05c-25.2-.4-45.08-7.2-59.39-19.43-14.91-12.76-23.34-30.81-25.07-53.11l-.15-2.22V31.91H71.1c-10.77 0-20.58 4.42-27.68 11.51-7.09 7.1-11.51 16.91-11.51 27.68v369.46c0 10.76 4.43 20.56 11.52 27.65 7.11 7.12 16.92 11.53 27.67 11.53h256.8c10.78 0 20.58-4.4 27.65-11.48 7.13-7.12 11.54-16.93 11.54-27.7V178.25z"
+                                                    />
+                                                </svg>
+                                            </button>
+                                            <!-- Copy FR config over here -->
+                                            <button
+                                                v-if="element.fr"
+                                                class="slide-toc-button"
+                                                :class="{
+                                                    'cursor-not-allowed opacity-50':
+                                                        index - 1 !== -1 && !bothLanguageSlides[index - 1]?.en
+                                                }"
+                                                v-tippy="{
+                                                    delay: '200',
+                                                    placement: 'top-start',
+                                                    content:
+                                                        index - 1 !== -1 && !bothLanguageSlides[index - 1]?.en
+                                                            ? $t('editor.slides.toc.prevEngDNE')
+                                                            : $t('editor.slides.toc.newConfigFromFR'),
+                                                    animateFill: false
+                                                }"
+                                                @click="
+                                                    index - 1 !== -1 && !bothLanguageSlides[index - 1]?.en
+                                                        ? ''
+                                                        : copyConfigFromOtherLang(element, 'en')
+                                                "
+                                            >
+                                                <svg
+                                                    xmlns="http://www.w3.org/2000/svg"
+                                                    height="16"
+                                                    width="16"
+                                                    viewBox="0 0 24 24"
+                                                    class="mx-1"
+                                                >
+                                                    <path
+                                                        d="M5 22q-.825 0-1.413-.587Q3 20.825 3 20V6h2v14h11v2Zm4-4q-.825 0-1.412-.587Q7 16.825 7 16V4q0-.825.588-1.413Q8.175 2 9 2h9q.825 0 1.413.587Q20 3.175 20 4v12q0 .825-.587 1.413Q18.825 18 18 18Zm0-2h9V4H9v12Zm0 0V4v12Z"
+                                                    />
+                                                </svg>
+                                            </button>
+                                            <!-- Warning indicator for isolated undefined configs: Defined configs below it WILL be moved up! -->
+                                            <button
+                                                class="slide-toc-button cursor-default"
+                                                v-if="
+                                                    bothLanguageSlides.slice(0, index).some((slide) => slide.en) &&
+                                                    bothLanguageSlides.slice(index + 1).some((slide) => slide.en)
+                                                "
+                                                v-tippy="{
+                                                    delay: '200',
+                                                    placement: 'top-start',
+                                                    content: $t('editor.slides.toc.isolatedUndefinedENGconfig'),
+                                                    animateFill: false
+                                                }"
+                                            >
+                                                <svg
+                                                    xmlns="http://www.w3.org/2000/svg"
+                                                    shape-rendering="geometricPrecision"
+                                                    text-rendering="geometricPrecision"
+                                                    image-rendering="optimizeQuality"
+                                                    fill-rule="evenodd"
+                                                    clip-rule="evenodd"
+                                                    viewBox="0 0 512 463.43"
+                                                    height="16"
+                                                    width="16"
+                                                    style="fill: rgb(248, 113, 113)"
+                                                >
+                                                    <path
+                                                        d="M189.46 44.02c34.26-58.66 99.16-58.77 133.24.12l.97 1.81 175.27 304.4c33.71 56.4-1.2 113.76-66.17 112.96v.12H73.53c-.9 0-1.78-.04-2.66-.11-58.34-.79-86.64-54.22-61.9-106.84.39-.85.82-1.67 1.28-2.46l-.04-.03 179.3-309.94-.05-.03zm50.32 302.4c4.26-4.13 9.35-6.19 14.45-6.56 3.4-.24 6.8.29 9.94 1.48 3.13 1.19 6.01 3.03 8.39 5.41 6.92 6.91 8.72 17.38 4.64 26.16-2.69 5.8-7.08 9.7-12.11 11.78-3.03 1.27-6.3 1.84-9.56 1.76-3.27-.08-6.49-.82-9.41-2.18-5.02-2.33-9.3-6.43-11.7-12.2-2.65-6.36-2.27-12.96.63-19.15 1.15-2.46 2.75-4.81 4.73-6.5zm33.86-47.07c-.8 19.91-34.51 19.93-35.28-.01-3.41-34.1-12.13-110.53-11.85-142.58.28-9.87 8.47-15.72 18.94-17.95 3.23-.69 6.78-1.03 10.35-1.02 3.6.01 7.16.36 10.39 1.05 10.82 2.3 19.31 8.39 19.31 18.45l-.05 1-11.81 141.06z"
+                                                    />
+                                                </svg>
+                                            </button>
+                                        </div>
+                                        <div v-else class="ml-auto flex my-auto">
+                                            <!-- Allow deleting the final slide -->
+                                            <button
+                                                class="slide-toc-button"
+                                                v-if="!bothLanguageSlides.slice(index + 1).some((slide) => slide.en)"
+                                                v-tippy="{
+                                                    delay: '200',
+                                                    placement: 'top-start',
+                                                    content: $t('editor.slides.toc.deleteConfig'),
+                                                    animateFill: false
+                                                }"
+                                                @click="deleteConfig(element, 'en')"
+                                            >
+                                                <svg
+                                                    xmlns="http://www.w3.org/2000/svg"
+                                                    viewBox="0 0 110.61 122.88"
+                                                    width="14"
+                                                    height="14"
+                                                    class="mx-1 my-0.5"
+                                                >
+                                                    <path
+                                                        d="M39.27,58.64a4.74,4.74,0,1,1,9.47,0V93.72a4.74,4.74,0,1,1-9.47,0V58.64Zm63.6-19.86L98,103a22.29,22.29,0,0,1-6.33,14.1,19.41,19.41,0,0,1-13.88,5.78h-45a19.4,19.4,0,0,1-13.86-5.78l0,0A22.31,22.31,0,0,1,12.59,103L7.74,38.78H0V25c0-3.32,1.63-4.58,4.84-4.58H27.58V10.79A10.82,10.82,0,0,1,38.37,0H72.24A10.82,10.82,0,0,1,83,10.79v9.62h23.35a6.19,6.19,0,0,1,1,.06A3.86,3.86,0,0,1,110.59,24c0,.2,0,.38,0,.57V38.78Zm-9.5.17H17.24L22,102.3a12.82,12.82,0,0,0,3.57,8.1l0,0a10,10,0,0,0,7.19,3h45a10.06,10.06,0,0,0,7.19-3,12.8,12.8,0,0,0,3.59-8.1L93.37,39ZM71,20.41V12.05H39.64v8.36ZM61.87,58.64a4.74,4.74,0,1,1,9.47,0V93.72a4.74,4.74,0,1,1-9.47,0V58.64Z"
+                                                    />
+                                                </svg>
+                                            </button>
+                                        </div>
+                                    </button>
+                                    <!-- FR config for slide -->
+                                    <button
+                                        class="flex gap-2 px-2 py-1 rounded-md bg-transparent hover:bg-gray-200"
+                                        :class="{
+                                            'selected-toc-config-item': element.fr === currentSlide,
+                                            'cursor-not-allowed border-2 border-red-400': !element.fr
+                                        }"
+                                        v-tippy="{
+                                            delay: '200',
+                                            placement: 'right',
+                                            content:
+                                                element.fr?.title ||
+                                                (element.fr?.title === ''
+                                                    ? $t('editor.slides.toc.newFRSlideText')
+                                                    : $t('editor.slide.toc.noFRSlide')),
+                                            animateFill: true,
+                                            offset: [0, 50]
+                                        }"
+                                        @click.stop="element.fr ? selectSlide(index, 'fr') : ''"
+                                    >
+                                        <p
+                                            class="font-bold italic text-gray-500"
+                                            :class="{ 'text-gray-700': slideIndex === index }"
+                                        >
+                                            FR
+                                        </p>
+                                        <p
+                                            class="text-left line-clamp-2"
+                                            :class="{
+                                                italic: !element.fr?.title
+                                            }"
+                                        >
+                                            {{
+                                                element.fr?.title ||
+                                                (element.fr?.title === ''
+                                                    ? $t('editor.slides.toc.newFRSlideText')
+                                                    : $t('editor.slide.toc.noFRSlide'))
+                                            }}
+                                        </p>
+                                        <!-- Options for FR items with missing configs (e.g. one language has config, other doesn't) -->
+                                        <div v-if="!element.fr" class="ml-auto flex my-auto">
+                                            <!-- Create a new blank config -->
+                                            <button
+                                                class="slide-toc-button"
+                                                :class="{
+                                                    'cursor-not-allowed opacity-50':
+                                                        index - 1 !== -1 && !bothLanguageSlides[index - 1]?.fr
+                                                }"
+                                                v-tippy="{
+                                                    delay: '200',
+                                                    placement: 'bottom-start',
+                                                    content:
+                                                        index - 1 !== -1 && !bothLanguageSlides[index - 1]?.fr
+                                                            ? $t('editor.slide.toc.prevFrDNE')
+                                                            : $t('editor.slides.toc.newBlankConfig'),
+                                                    animateFill: false
+                                                }"
+                                                @click="
+                                                    index - 1 !== -1 && !bothLanguageSlides[index - 1]?.fr
+                                                        ? ''
+                                                        : createNewConfig(element, 'fr')
+                                                "
+                                            >
+                                                <svg
+                                                    xmlns="http://www.w3.org/2000/svg"
+                                                    shape-rendering="geometricPrecision"
+                                                    text-rendering="geometricPrecision"
+                                                    image-rendering="optimizeQuality"
+                                                    fill-rule="evenodd"
+                                                    clip-rule="evenodd"
+                                                    viewBox="0 0 399 511.66"
+                                                    width="14"
+                                                    height="14"
+                                                    class="mx-1"
+                                                >
+                                                    <path
+                                                        fill-rule="nonzero"
+                                                        d="M71.1 0h190.92c5.22 0 9.85 2.5 12.77 6.38L394.7 136.11c2.81 3.05 4.21 6.92 4.21 10.78l.09 293.67c0 19.47-8.02 37.23-20.9 50.14l-.09.08c-12.9 12.87-30.66 20.88-50.11 20.88H71.1c-19.54 0-37.33-8.01-50.22-20.9C8.01 477.89 0 460.1 0 440.56V71.1c0-19.56 8-37.35 20.87-50.23C33.75 8 51.54 0 71.1 0zm45.78 254.04c-8.81 0-15.96-7.15-15.96-15.95 0-8.81 7.15-15.96 15.96-15.96h165.23c8.81 0 15.96 7.15 15.96 15.96 0 8.8-7.15 15.95-15.96 15.95H116.88zm0 79.38c-8.81 0-15.96-7.15-15.96-15.96 0-8.8 7.15-15.95 15.96-15.95h156.47c8.81 0 15.96 7.15 15.96 15.95 0 8.81-7.15 15.96-15.96 15.96H116.88zm0 79.39c-8.81 0-15.96-7.15-15.96-15.96s7.15-15.95 15.96-15.95h132.7c8.81 0 15.95 7.14 15.95 15.95 0 8.81-7.14 15.96-15.95 15.96h-132.7zm154.2-363.67v54.21c1.07 13.59 5.77 24.22 13.99 31.24 8.63 7.37 21.65 11.52 38.95 11.83l36.93-.05-89.87-97.23zm96.01 129.11-43.31-.05c-25.2-.4-45.08-7.2-59.39-19.43-14.91-12.76-23.34-30.81-25.07-53.11l-.15-2.22V31.91H71.1c-10.77 0-20.58 4.42-27.68 11.51-7.09 7.1-11.51 16.91-11.51 27.68v369.46c0 10.76 4.43 20.56 11.52 27.65 7.11 7.12 16.92 11.53 27.67 11.53h256.8c10.78 0 20.58-4.4 27.65-11.48 7.13-7.12 11.54-16.93 11.54-27.7V178.25z"
+                                                    />
+                                                </svg>
+                                            </button>
+                                            <!-- Copy ENG config over here -->
+                                            <button
+                                                v-if="element.en"
+                                                class="slide-toc-button"
+                                                :class="{
+                                                    'cursor-not-allowed opacity-50':
+                                                        index - 1 !== -1 && !bothLanguageSlides[index - 1]?.fr
+                                                }"
+                                                v-tippy="{
+                                                    delay: '200',
+                                                    placement: 'bottom-start',
+                                                    content:
+                                                        index - 1 !== -1 && !bothLanguageSlides[index - 1]?.fr
+                                                            ? $t('editor.slide.toc.prevFrDNE')
+                                                            : $t('editor.slides.toc.newConfigFromEng'),
+                                                    animateFill: false
+                                                }"
+                                                @click="
+                                                    index - 1 !== -1 && !bothLanguageSlides[index - 1]?.fr
+                                                        ? ''
+                                                        : copyConfigFromOtherLang(element, 'fr')
+                                                "
+                                            >
+                                                <svg
+                                                    xmlns="http://www.w3.org/2000/svg"
+                                                    height="16"
+                                                    width="16"
+                                                    viewBox="0 0 24 24"
+                                                    class="mx-1"
+                                                >
+                                                    <path
+                                                        d="M5 22q-.825 0-1.413-.587Q3 20.825 3 20V6h2v14h11v2Zm4-4q-.825 0-1.412-.587Q7 16.825 7 16V4q0-.825.588-1.413Q8.175 2 9 2h9q.825 0 1.413.587Q20 3.175 20 4v12q0 .825-.587 1.413Q18.825 18 18 18Zm0-2h9V4H9v12Zm0 0V4v12Z"
+                                                    />
+                                                </svg>
+                                            </button>
+                                            <!-- Warning indicator for isolated undefined configs: Defined configs below it WILL be moved up! -->
+                                            <button
+                                                class="slide-toc-button cursor-default"
+                                                v-if="
+                                                    bothLanguageSlides.slice(0, index).some((slide) => slide.fr) &&
+                                                    bothLanguageSlides.slice(index + 1).some((slide) => slide.fr)
+                                                "
+                                                v-tippy="{
+                                                    delay: '200',
+                                                    placement: 'bottom-start',
+                                                    content: $t('editor.slides.toc.isolatedUndefinedFRconfig'),
+                                                    animateFill: false
+                                                }"
+                                            >
+                                                <svg
+                                                    xmlns="http://www.w3.org/2000/svg"
+                                                    shape-rendering="geometricPrecision"
+                                                    text-rendering="geometricPrecision"
+                                                    image-rendering="optimizeQuality"
+                                                    fill-rule="evenodd"
+                                                    clip-rule="evenodd"
+                                                    viewBox="0 0 512 463.43"
+                                                    height="16"
+                                                    width="16"
+                                                    style="fill: rgb(248, 113, 113)"
+                                                >
+                                                    <path
+                                                        d="M189.46 44.02c34.26-58.66 99.16-58.77 133.24.12l.97 1.81 175.27 304.4c33.71 56.4-1.2 113.76-66.17 112.96v.12H73.53c-.9 0-1.78-.04-2.66-.11-58.34-.79-86.64-54.22-61.9-106.84.39-.85.82-1.67 1.28-2.46l-.04-.03 179.3-309.94-.05-.03zm50.32 302.4c4.26-4.13 9.35-6.19 14.45-6.56 3.4-.24 6.8.29 9.94 1.48 3.13 1.19 6.01 3.03 8.39 5.41 6.92 6.91 8.72 17.38 4.64 26.16-2.69 5.8-7.08 9.7-12.11 11.78-3.03 1.27-6.3 1.84-9.56 1.76-3.27-.08-6.49-.82-9.41-2.18-5.02-2.33-9.3-6.43-11.7-12.2-2.65-6.36-2.27-12.96.63-19.15 1.15-2.46 2.75-4.81 4.73-6.5zm33.86-47.07c-.8 19.91-34.51 19.93-35.28-.01-3.41-34.1-12.13-110.53-11.85-142.58.28-9.87 8.47-15.72 18.94-17.95 3.23-.69 6.78-1.03 10.35-1.02 3.6.01 7.16.36 10.39 1.05 10.82 2.3 19.31 8.39 19.31 18.45l-.05 1-11.81 141.06z"
+                                                    />
+                                                </svg>
+                                            </button>
+                                        </div>
+                                        <div v-else class="ml-auto flex my-auto">
+                                            <!-- Allow deleting the final slide -->
+                                            <button
+                                                class="slide-toc-button"
+                                                v-if="!bothLanguageSlides.slice(index + 1).some((slide) => slide.fr)"
+                                                v-tippy="{
+                                                    delay: '200',
+                                                    placement: 'bottom-start',
+                                                    content: $t('editor.slides.toc.deleteConfig'),
+                                                    animateFill: false
+                                                }"
+                                                @click="deleteConfig(element, 'fr')"
+                                            >
+                                                <svg
+                                                    xmlns="http://www.w3.org/2000/svg"
+                                                    viewBox="0 0 110.61 122.88"
+                                                    width="14"
+                                                    height="14"
+                                                    class="mx-1 my-0.5"
+                                                >
+                                                    <path
+                                                        d="M39.27,58.64a4.74,4.74,0,1,1,9.47,0V93.72a4.74,4.74,0,1,1-9.47,0V58.64Zm63.6-19.86L98,103a22.29,22.29,0,0,1-6.33,14.1,19.41,19.41,0,0,1-13.88,5.78h-45a19.4,19.4,0,0,1-13.86-5.78l0,0A22.31,22.31,0,0,1,12.59,103L7.74,38.78H0V25c0-3.32,1.63-4.58,4.84-4.58H27.58V10.79A10.82,10.82,0,0,1,38.37,0H72.24A10.82,10.82,0,0,1,83,10.79v9.62h23.35a6.19,6.19,0,0,1,1,.06A3.86,3.86,0,0,1,110.59,24c0,.2,0,.38,0,.57V38.78Zm-9.5.17H17.24L22,102.3a12.82,12.82,0,0,0,3.57,8.1l0,0a10,10,0,0,0,7.19,3h45a10.06,10.06,0,0,0,7.19-3,12.8,12.8,0,0,0,3.59-8.1L93.37,39ZM71,20.41V12.05H39.64v8.36ZM61.87,58.64a4.74,4.74,0,1,1,9.47,0V93.72a4.74,4.74,0,1,1-9.47,0V58.64Z"
+                                                    />
+                                                </svg>
+                                            </button>
+                                        </div>
+                                    </button>
+                                </section>
                             </div>
-                            <div class="flex flex-col mr-2 ml-1 my-1">
+
+                            <div class="flex ml-0.5 flex-col space-between">
                                 <button
-                                    class="slide-toc-button"
-                                    :class="index == 0 ? 'text-gray-500 cursor-not-allowed' : ''"
+                                    class="slide-toc-button h-auto grow-0"
+                                    :class="index == 0 ? 'text-gray-400 cursor-not-allowed' : ''"
                                     @click.stop="moveUp(index)"
                                     :disabled="index == 0"
+                                    v-tippy="{
+                                        delay: '200',
+                                        placement: 'right',
+                                        content: $t('editor.slides.toc.moveSlideUp')
+                                    }"
                                 >
-                                    <svg xmlns="http://www.w3.org/2000/svg" class="fill-current" height="20" width="20">
-                                        <path d="m2 16 8-12 8 12Z" />
+                                    <svg
+                                        xmlns="http://www.w3.org/2000/svg"
+                                        xmlns:xlink="http://www.w3.org/1999/xlink"
+                                        x="0px"
+                                        y="0px"
+                                        viewBox="0 0 122.88 66.91"
+                                        style="enable-background: new 0 0 122.88 66.91"
+                                        xml:space="preserve"
+                                        height="14"
+                                        width="14"
+                                        class="m-1 fill-current"
+                                    >
+                                        <g>
+                                            <path
+                                                d="M11.68,64.96c-2.72,2.65-7.08,2.59-9.73-0.14c-2.65-2.72-2.59-7.08,0.13-9.73L56.87,1.97l4.8,4.93l-4.81-4.95 c2.74-2.65,7.1-2.58,9.76,0.15c0.08,0.08,0.15,0.16,0.23,0.24L120.8,55.1c2.72,2.65,2.78,7.01,0.13,9.73 c-2.65,2.72-7,2.78-9.73,0.14L61.65,16.5L11.68,64.96L11.68,64.96z"
+                                            />
+                                        </g>
                                     </svg>
                                 </button>
                                 <button
-                                    class="slide-toc-button rotate-180 transform"
-                                    :class="index == slides.length - 1 ? 'text-gray-500 cursor-not-allowed' : ''"
+                                    class="slide-toc-button rotate-180 transform h-auto grow-0 mt-auto"
+                                    :class="
+                                        index == bothLanguageSlides.length - 1 ? 'text-gray-400 cursor-not-allowed' : ''
+                                    "
                                     @click.stop="moveDown(index)"
-                                    :disabled="index == slides.length - 1"
+                                    :disabled="index == bothLanguageSlides.length - 1"
+                                    v-tippy="{
+                                        delay: '200',
+                                        placement: 'right',
+                                        content: $t('editor.slides.toc.moveSlideDown')
+                                    }"
                                 >
-                                    <svg xmlns="http://www.w3.org/2000/svg" class="fill-current" height="20" width="20">
-                                        <path d="m2 16 8-12 8 12Z" />
+                                    <svg
+                                        xmlns="http://www.w3.org/2000/svg"
+                                        xmlns:xlink="http://www.w3.org/1999/xlink"
+                                        x="0px"
+                                        y="0px"
+                                        viewBox="0 0 122.88 66.91"
+                                        style="enable-background: new 0 0 122.88 66.91"
+                                        xml:space="preserve"
+                                        height="14"
+                                        width="14"
+                                        class="m-1 fill-current"
+                                    >
+                                        <g>
+                                            <path
+                                                d="M11.68,64.96c-2.72,2.65-7.08,2.59-9.73-0.14c-2.65-2.72-2.59-7.08,0.13-9.73L56.87,1.97l4.8,4.93l-4.81-4.95 c2.74-2.65,7.1-2.58,9.76,0.15c0.08,0.08,0.15,0.16,0.23,0.24L120.8,55.1c2.72,2.65,2.78,7.01,0.13,9.73 c-2.65,2.72-7,2.78-9.73,0.14L61.65,16.5L11.68,64.96L11.68,64.96z"
+                                            />
+                                        </g>
                                     </svg>
                                 </button>
                             </div>
                         </div>
                         <confirmation-modal
                             :name="`delete-slide-${index}`"
-                            :message="$t('editor.slides.deleteSlide.confirm', { title: element.title })"
+                            :message="
+                                $t('editor.slides.deleteSlide.confirm', {
+                                    title: element['en']?.title + ' AND ' + element['fr']?.title
+                                })
+                            "
                             @ok="removeSlide(index)"
                         />
                     </li>
@@ -155,6 +528,7 @@ import {
     ImagePanel,
     MapPanel,
     Slide,
+    SlideForBothLanguages,
     SlideshowPanel,
     SourceCounts,
     TextPanel,
@@ -178,7 +552,7 @@ import ConfirmationModalV from './helpers/confirmation-modal.vue';
     }
 })
 export default class SlideTocV extends Vue {
-    @Prop() slides!: Slide[];
+    @Prop() bothLanguageSlides!: SlideForBothLanguages[];
     @Prop() currentSlide!: Slide | string;
     @Prop() slideIndex!: number;
     @Prop() configFileStructure!: ConfigFileStructure;
@@ -187,12 +561,91 @@ export default class SlideTocV extends Vue {
 
     selectedForCopying = 0;
 
-    selectSlide(index: number): void {
-        this.$emit('slide-change', index);
+    selectSlide(index: number, lang: string): void {
+        this.$emit('slide-change', index, lang);
     }
 
+    // Assumes you're adding slide at end
     addNewSlide(): void {
-        this.slides.push({
+        const lastSlide = this.bothLanguageSlides[this.bothLanguageSlides.length - 1];
+        this.bothLanguageSlides.push({
+            en:
+                !lastSlide?.en && this.bothLanguageSlides.length !== 0
+                    ? undefined
+                    : {
+                          title: '',
+                          panel: [
+                              {
+                                  type: 'text',
+                                  title: '',
+                                  content: ''
+                              } as TextPanel,
+                              {
+                                  type: 'text',
+                                  title: '',
+                                  content: ''
+                              } as TextPanel
+                          ]
+                      },
+            fr:
+                !lastSlide?.fr && this.bothLanguageSlides.length !== 0
+                    ? undefined
+                    : {
+                          title: '',
+                          panel: [
+                              {
+                                  type: 'text',
+                                  title: '',
+                                  content: ''
+                              } as TextPanel,
+                              {
+                                  type: 'text',
+                                  title: '',
+                                  content: ''
+                              } as TextPanel
+                          ]
+                      }
+        });
+        this.selectSlide(this.bothLanguageSlides.length - 1, this.lang);
+        this.$emit('slides-updated', this.bothLanguageSlides);
+        this.scrollToElement(this.bothLanguageSlides.length - 1);
+    }
+
+    /**
+     * Deletes one of the language configs for a single slide. That config will be undefined after, and the slide will say "(No English/French Config)" or similar.
+     * @param slides A slide, containing an English and French config.
+     * @param currLang The config to delete, either 'en' for English of 'fr' for French.
+     */
+    deleteConfig(slides: SlideForBothLanguages, currLang: 'en' | 'fr'): void {
+        slides[currLang] = undefined;
+        this.$emit('slides-updated', this.bothLanguageSlides);
+    }
+
+    /**
+     * Smooth scroll to an element on the table of contents. Will end scroll in the middle of the ToC vertical area, if able.
+     * @param index The index of the slide to scroll to.
+     */
+    scrollToElement(index: number): void {
+        setTimeout(() => {
+            document.getElementById('slide' + index)?.scrollIntoView({ behavior: 'smooth', block: 'center' });
+        }, 10);
+    }
+
+    // Assumes that you've already checked that the other lang DOES have a config.
+    copyConfigFromOtherLang(slides: SlideForBothLanguages, currLang: string): void {
+        slides[currLang as keyof SlideForBothLanguages] = JSON.parse(
+            JSON.stringify(slides[currLang === 'en' ? 'fr' : 'en'])
+        );
+        this.$emit('slides-updated', this.bothLanguageSlides);
+    }
+
+    /**
+     * Creates a new blank config for a single language on a particular slide.
+     * @param slides A slide, containing an English and French config (either/both can be undefined).
+     * @param currLang The language to create a blank config for.
+     */
+    createNewConfig(slides: SlideForBothLanguages, currLang: 'en' | 'fr'): void {
+        slides[currLang] = {
             title: '',
             panel: [
                 {
@@ -206,31 +659,20 @@ export default class SlideTocV extends Vue {
                     content: ''
                 } as TextPanel
             ]
-        });
-        this.selectSlide(this.slides.length - 1);
-        this.$emit('slides-updated', this.slides);
-    }
-
-    copyFromOtherLang(slide: Slide | undefined): void {
-        if (slide) {
-            this.slides.splice(this.slides.length, 0, cloneDeep(slide));
-            this.$emit('slides-updated', this.slides);
-            Message.success(this.$t('editor.slide.copy.success'));
-        }
-    }
-
-    copyAllFromOtherLang(slides: Slide[] | undefined): void {
-        if (slides) {
-            this.slides.splice(this.slides.length, 0, ...slides.map((slide) => cloneDeep(slide)));
-            this.$emit('slides-updated', this.slides);
-            Message.success(this.$t('editor.slide.copy.success'));
-        }
+        };
+        this.$emit('slides-updated', this.bothLanguageSlides);
     }
 
+    /**
+     * Copies an entire slide, creating a new identical slide at the next index.
+     * @param index Index of the slide to copy.
+     */
     copySlide(index: number): void {
-        this.slides.splice(index + 1, 0, cloneDeep(this.slides[index]));
-        this.$emit('slides-updated', this.slides);
+        this.bothLanguageSlides.splice(index + 1, 0, cloneDeep(this.bothLanguageSlides[index]));
+        this.$emit('slides-updated', this.bothLanguageSlides);
+        this.selectSlide(index + 1, this.lang);
         Message.success(this.$t('editor.slide.copy.success'));
+        this.scrollToElement(index + 1);
     }
 
     removeSlide(index: number): void {
@@ -241,13 +683,18 @@ export default class SlideTocV extends Vue {
         // Before removing the slide, updated the sources for the panels.
         this.removeSourceCounts(index);
 
-        this.slides.splice(index, 1);
-        this.$emit('slides-updated', this.slides);
+        this.bothLanguageSlides.splice(index, 1);
+        this.$emit('slides-updated', this.bothLanguageSlides);
     }
 
     removeSourceCounts(deletedIndex: number): void {
-        const panel = this.slides.find((slide: Slide, idx: number) => idx === deletedIndex)?.panel;
-        panel?.forEach((p: BasePanel) => this.removeSourceHelper(p));
+        let panelEn = this.bothLanguageSlides.find((slide: SlideForBothLanguages, idx: number) => idx === deletedIndex)
+            ?.en?.panel;
+        let panelFr = this.bothLanguageSlides.find((slide: SlideForBothLanguages, idx: number) => idx === deletedIndex)
+            ?.fr?.panel;
+
+        panelEn?.forEach((p: BasePanel) => this.removeSourceHelper(p));
+        panelFr?.forEach((p: BasePanel) => this.removeSourceHelper(p));
     }
 
     removeSourceHelper(panel: BasePanel): void {
@@ -324,12 +771,12 @@ export default class SlideTocV extends Vue {
     }
 
     moveDown(index: number): void {
-        this.slides.splice(index + 1, 0, this.slides.splice(index, 1)[0]);
-        this.$emit('slides-updated', this.slides);
+        this.bothLanguageSlides.splice(index + 1, 0, this.bothLanguageSlides.splice(index, 1)[0]);
+        this.$emit('slides-updated', this.bothLanguageSlides);
     }
 
-    getSlideId(slide: Slide): string {
-        return slide.title + this.slides.indexOf(slide);
+    getSlideId(slide: SlideForBothLanguages): string {
+        return 'slide' + this.bothLanguageSlides.indexOf(slide);
     }
 }
 </script>
@@ -357,4 +804,30 @@ export default class SlideTocV extends Vue {
 .editor-toc-button {
     margin: 10px 0px 0px 0px !important;
 }
+
+.slide-toc-button {
+    border-radius: 3px;
+    padding: 2px;
+}
+.slide-toc-button:hover {
+    background-color: rgb(209, 213, 219);
+}
+
+.line-clamp-2 {
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+}
+
+// Hard coded height :(
+// TODO: Change positioning of app components so we don't need to hardcode
+.toc-list {
+    height: calc(100vh - 177px);
+    overflow-y: auto;
+}
+
+.selected-toc-config-item {
+    background-color: rgb(225, 225, 225);
+}
 </style>
diff --git a/src/definitions.ts b/src/definitions.ts
index abc784dc..4a54affe 100644
--- a/src/definitions.ts
+++ b/src/definitions.ts
@@ -143,6 +143,11 @@ export interface Slide {
     includeInToc?: boolean;
 }
 
+export interface SlideForBothLanguages {
+    en: Slide | undefined;
+    fr: Slide | undefined;
+}
+
 export enum PanelType {
     Text = 'text',
     Image = 'image',
diff --git a/src/lang/lang.csv b/src/lang/lang.csv
index 7848585a..f5e9080a 100644
--- a/src/lang/lang.csv
+++ b/src/lang/lang.csv
@@ -32,7 +32,7 @@ editor.window.title,RAMP Storylines Editor,1,Éditeur de scénarios de la PCAR,1
 editor.configOverwrite,Are you sure you want to overwrite product '{uuid}'?,1,Êtes-vous sûr de vouloir remplacer le produit « {uuid} » ?,0
 editor.createProduct,Create New Storylines Product,1,Créer un nouveau produit de scénarios,1
 editor.editProduct,Edit Existing Storylines Product,1,Modifier un produit de scénarios,1
-editor.editMetadata,Edit Project Metadata,1,Modifier les métadonnées d’un projet,1
+editor.editMetadata,Edit Project Metadata,1,Modifier les métadonnées,1
 editor.productDetails,Storylines product details,1,Détails du produit de scénarios,1
 editor.metadata.instructions,Fill in metadata details about your new Storylines product. Use the "Preview" button to see what your slides will look like.,1,Inscrivez les métadonnées de votre nouveau produit de scénario. Utilisez la fonction « Afficher l’aperçu » pour voir à quoi ressemblent vos diapositives.,1
 editor.uuid,UUID,1,UUID,1
@@ -123,8 +123,9 @@ editor.slideshow.label.edit,Edit existing item,1,Modifier un élément existant,
 editor.slideshow.label.type,Type,1,Type,0
 editor.slideshow.label.add,Add,1,Ajouter,1
 editor.slideshow.label.slideNumber,Slide Number,1,Numéro de diapositive,0
-editor.slides.title,SLIDES,1,DIAPOSITIVES,1
-editor.slides.addSlide,"New Slide",1,Nouvelle diapositive,1
+editor.slides.title,Intro title,1,Titre de l’introduction,1
+editor.slides.addSlide,"New blank slide",1,Nouvelle diapositive,0
+editor.slides.currentLangLabel,({lang} slide),1,(Diapositive en {lang}),0
 editor.slides.copyFromLang,"Copy slides from the other language",1,"Copier les diapositives de l’autre langue",1
 editor.slides.deleteSlide.confirm,"Are you sure you want to delete the slide {title}?",1,"Voulez-vous vraiment supprimer la diapositive {titre}?",1
 editor.slides.changeSlide.confirm,"Are you sure you want to change the slide {title}? All unsaved progress will be lost.",1,"Voulez-vous vraiment modifier la diapositive {titre}? Toute modification non enregistrée sera perdue.",1
@@ -135,6 +136,22 @@ editor.slides.copyAll,Copy all,1,Copier tout,1
 editor.slides.copyAll.confirm,Are you sure you want to copy all slides?,1,Êtes-vous sûr de vouloir copier toutes les diapositives ?,0
 editor.slides.copy,Copy,1,Copier,1
 editor.slides.slide,Slide,1,Diapositive,1
+editor.slides.toc.copySlide,Copy Slide,1,Copier la diapositive,0
+editor.slides.toc.deleteSlide,Delete Slide,1,Supprimer la diapositive,0
+editor.slides.toc.newENGSlideText,New ENG Slide *,1,Nouvelle diapositive ANG *,0
+editor.slides.toc.newFRSlideText,New FR Slide *,1,Novelle diapositive FR *,0
+editor.slides.toc.noENGslide,(No English Config),1,(Pas de configuration Anglais),0
+editor.slide.toc.noFRSlide,(No French Config),1,(Pas de configuration française),0
+editor.slides.toc.prevEngDNE,Cannot create this config if previous slide EN config does not exist.,1,Impossible de créer cette configuration si la configuration EN de la diapositive précédente n'existe pas.,0
+editor.slide.toc.prevFrDNE,Cannot create this config if previous slide FR config does not exist.,1,Impossible de créer cette configuration si la configuration FR de la diapositive précédente n'existe pas.,0
+editor.slides.toc.newBlankConfig,Create new blank config,1,Créer une nouvelle configuration vierge,0
+editor.slides.toc.newConfigFromFR,Copy config from French slide,1,Copier la configuration à partir de la diapositive française,0
+editor.slides.toc.newConfigFromEng,Copy config from English slide,1,Copier la configuration à partir de la diapositive anglais,0
+editor.slides.toc.moveSlideUp,Move slide up,1,Déplacer la diapositive vers le haut,0
+editor.slides.toc.moveSlideDown,Move slide down,1,Déplacer la diapositive vers le bas,0
+editor.slides.toc.isolatedUndefinedFRconfig,This is an isolated undefined config; ALL existing FR configs in below slides will be automatically moved up upon save & reload! Configs MUST be defined continuously without undefined breaks.,1,Il s'agit d'une configuration non définie isolée ; TOUTES les configurations FR existantes dans les diapositives ci-dessous seront automatiquement déplacées vers le haut lors de l'enregistrement et du rechargement ! Les configurations DOIVENT être définies en continu sans interruptions indéfinies.,0
+editor.slides.toc.isolatedUndefinedENGconfig,This is an isolated undefined config; ALL existing EN configs in below slides will be automatically moved up upon save & reload! Configs MUST be defined continuously without undefined breaks.,1,Il s'agit d'une configuration non définie isolée ; TOUTES les configurations EN existantes dans les diapositives ci-dessous seront automatiquement déplacées vers le haut lors de l'enregistrement et du rechargement ! Les configurations DOIVENT être définies en continu sans interruptions indéfinies.,0
+editor.slides.toc.deleteConfig,Delete Config (You can delete the last configs for each lang),1,Supprimer la configuration (vous pouvez supprimer les dernières configurations pour chaque langue),0
 editor.slides.previousSlide,Previous slide,1,Diapositive précédente,1
 editor.slides.nextSlide,Next slide,1,Diapositive suivante,1
 editor.slides.leftPanel,Left panel,1,Panneau de gauche,1
@@ -154,6 +171,7 @@ editor.slides.panel.body,Panel body,1,Corps du panneau,1
 editor.slides.panel.title,Panel title,1,Titre du panneau,1
 editor.slides.intro,Intro subtitle,1,Sous-titre de l’introduction,1
 editor.slides.title,Intro title,1,Titre de l’introduction,1
+editor.slides.slideHeader,SLIDES,1,DIAPOSITIVES,0
 editor.slides.includeInToc,Include in table of contents,1,Inclure dans la table des matières,0
 editor.slide.untitled,Untitled slide,1,Diapositive sans titre,0
 editor.slide.copy.success,Slide copied successfully!,1,Diapositive copiée avec succès !,0