From e48744e26ac3db28df47ea730752cc1beeb87668 Mon Sep 17 00:00:00 2001
From: Frank Rousseau <frank@cg-wire.com>
Date: Wed, 29 Apr 2026 20:41:08 +0200
Subject: [PATCH 01/28] [hardware-items] Migrate page to Composition API

Convert HardwareItems.vue to <script setup> following Studios.vue
pattern: store getters via useStore, async/await for confirm handlers,
useHead for the title, and computed tabs so labels react to locale
changes. Drop the unused choices state and fix the dead
.software-license-list selector to .hardware-item-list.

Align responsive with other admin pages by adding the 768px page
padding rule, and on HardwareItemList give the name column a
min-width with collapsing paddings on mobile.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/components/lists/HardwareItemList.vue |  17 ++
 src/components/pages/HardwareItems.vue    | 352 ++++++++++------------
 2 files changed, 176 insertions(+), 193 deletions(-)

diff --git a/src/components/lists/HardwareItemList.vue b/src/components/lists/HardwareItemList.vue
index 63244f8c4a..907c2928fb 100644
--- a/src/components/lists/HardwareItemList.vue
+++ b/src/components/lists/HardwareItemList.vue
@@ -100,8 +100,25 @@ export default {
   border-top: 0;
 }
 
+.name {
+  min-width: 200px;
+  padding: 1em;
+}
+
 .remaining-amount.negative {
   color: $red;
   font-weight: bold;
 }
+
+@media screen and (max-width: 768px) {
+  .name {
+    min-width: auto;
+    padding: 0.5em;
+  }
+
+  .datatable-body td,
+  .datatable-head th {
+    padding: 0.5em;
+  }
+}
 </style>
diff --git a/src/components/pages/HardwareItems.vue b/src/components/pages/HardwareItems.vue
index a5ef450d59..de333caa10 100644
--- a/src/components/pages/HardwareItems.vue
+++ b/src/components/pages/HardwareItems.vue
@@ -41,219 +41,185 @@
   </div>
 </template>
 
-<script>
-import { mapGetters, mapActions } from 'vuex'
+<script setup>
+import { useHead } from '@unhead/vue'
+import { computed, onMounted, reactive, ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useRoute } from 'vue-router'
+import { useStore } from 'vuex'
 
 import csv from '@/lib/csv'
 import stringHelpers from '@/lib/string'
 
+import HardwareItemList from '@/components/lists/HardwareItemList.vue'
 import DeleteModal from '@/components/modals/DeleteModal.vue'
 import EditHardwareItemModal from '@/components/modals/EditHardwareItemModal.vue'
-import HardwareItemList from '@/components/lists/HardwareItemList.vue'
 import ListPageHeader from '@/components/widgets/ListPageHeader.vue'
 import RouteTabs from '@/components/widgets/RouteTabs.vue'
 
-export default {
-  name: 'hardware-items',
-
-  components: {
-    DeleteModal,
-    EditHardwareItemModal,
-    HardwareItemList,
-    ListPageHeader,
-    RouteTabs
-  },
-
-  data() {
-    return {
-      activeTab: 'active',
-      choices: [],
-      hardwareItemToDelete: null,
-      hardwareItemToEdit: {},
-      linkedHardwareItems: {},
-      errors: {
-        del: false,
-        edit: false,
-        list: false
-      },
-      modals: {
-        del: false,
-        edit: false
-      },
-      loading: {
-        del: false,
-        edit: false,
-        list: false
-      },
-      tabs: [
-        {
-          name: 'active',
-          label: this.$t('main.active')
-        },
-        {
-          name: 'archived',
-          label: this.$t('main.archived')
-        }
-      ]
-    }
-  },
-
-  async mounted() {
-    this.activeTab = this.$route.query.tab || 'active'
-    this.linkedHardwareItems = await this.loadLinkedHardwareItems()
-  },
-
-  computed: {
-    ...mapGetters(['activePeople', 'hardwareItems', 'archivedHardwareItems']),
-
-    isActiveTab() {
-      return this.activeTab === 'active'
-    },
-
-    hardwareItemsList() {
-      return this.isActiveTab ? this.hardwareItems : this.archivedHardwareItems
-    },
-
-    deleteText() {
-      const hardwareItem = this.hardwareItemToDelete
-      if (hardwareItem) {
-        return this.$t('hardware_items.delete_text', {
-          name: hardwareItem.name
-        })
-      } else {
-        return ''
-      }
-    },
-
-    usedAmounts() {
-      const usedAmounts = {}
-      this.activePeople.forEach(person => {
-        person.departments.forEach(departmentId => {
-          const departmentItems = this.linkedHardwareItems[departmentId] || []
-          departmentItems.forEach(item => {
-            if (!usedAmounts[item.id]) {
-              usedAmounts[item.id] = 0
-            }
-            usedAmounts[item.id] += 1
-          })
-        })
+const { t } = useI18n()
+const route = useRoute()
+const store = useStore()
+
+// State
+
+const activeTab = ref('active')
+const hardwareItemToDelete = ref(null)
+const hardwareItemToEdit = ref({})
+const linkedHardwareItems = ref({})
+
+const errors = reactive({ del: false, edit: false, list: false })
+const loading = reactive({ del: false, edit: false, list: false })
+const modals = reactive({ del: false, edit: false })
+
+// Computed
+
+const activePeople = computed(() => store.getters.activePeople)
+const archivedHardwareItems = computed(
+  () => store.getters.archivedHardwareItems
+)
+const hardwareItems = computed(() => store.getters.hardwareItems)
+
+const isActiveTab = computed(() => activeTab.value === 'active')
+
+const tabs = computed(() => [
+  { name: 'active', label: t('main.active') },
+  { name: 'archived', label: t('main.archived') }
+])
+
+const hardwareItemsList = computed(() =>
+  isActiveTab.value ? hardwareItems.value : archivedHardwareItems.value
+)
+
+const deleteText = computed(() =>
+  hardwareItemToDelete.value
+    ? t('hardware_items.delete_text', { name: hardwareItemToDelete.value.name })
+    : ''
+)
+
+const usedAmounts = computed(() => {
+  const amounts = {}
+  activePeople.value.forEach(person => {
+    person.departments.forEach(departmentId => {
+      const departmentItems = linkedHardwareItems.value[departmentId] || []
+      departmentItems.forEach(item => {
+        amounts[item.id] = (amounts[item.id] || 0) + 1
       })
-      return usedAmounts
-    },
+    })
+  })
+  return amounts
+})
+
+const remainingHardwareItems = computed(() =>
+  hardwareItems.value.reduce((remaining, hardwareItem) => {
+    remaining[hardwareItem.id] =
+      hardwareItem.inventory_amount - (usedAmounts.value[hardwareItem.id] || 0)
+    return remaining
+  }, {})
+)
+
+// Functions
+
+const onExportClicked = () => {
+  const name = stringHelpers.slugify(t('hardware_items.title'))
+  const headers = [
+    t('main.type'),
+    t('hardware_items.fields.name'),
+    t('hardware_items.fields.short_name'),
+    t('hardware_items.fields.monthly_cost'),
+    t('hardware_items.fields.inventory_amount')
+  ]
+  const rows = hardwareItems.value.map(hardwareItem => [
+    hardwareItem.type,
+    hardwareItem.name,
+    hardwareItem.short_name,
+    hardwareItem.monthly_cost,
+    hardwareItem.inventory_amount
+  ])
+  csv.buildCsvFile(name, [headers, ...rows])
+}
 
-    remainingHardwareItems() {
-      const remainingAmounts = {}
+const onNewClicked = () => {
+  hardwareItemToEdit.value = {}
+  errors.edit = false
+  modals.edit = true
+}
 
-      this.hardwareItems.forEach(hardwareItem => {
-        remainingAmounts[hardwareItem.id] =
-          hardwareItem.inventory_amount -
-          (this.usedAmounts[hardwareItem.id] || 0)
-      })
-      return remainingAmounts
-    }
-  },
-
-  methods: {
-    ...mapActions([
-      'deleteHardwareItem',
-      'editHardwareItem',
-      'newHardwareItem',
-      'loadHardwareItems',
-      'loadLinkedHardwareItems'
-    ]),
-
-    confirmEditHardwareItem(form) {
-      let action = 'newHardwareItem'
-      if (this.hardwareItemToEdit && this.hardwareItemToEdit.id) {
-        action = 'editHardwareItem'
-        form.id = this.hardwareItemToEdit.id
-      }
-
-      this.loading.edit = true
-      this.errors.edit = false
-      this[action](form)
-        .then(() => {
-          this.loading.edit = false
-          this.modals.edit = false
-        })
-        .catch(err => {
-          console.error(err)
-          this.loading.edit = false
-          this.errors.edit = true
-        })
-    },
-
-    confirmDeleteHardwareItem() {
-      this.loading.del = true
-      this.errors.del = false
-      this.deleteHardwareItem(this.hardwareItemToDelete)
-        .then(() => {
-          this.loading.del = false
-          this.modals.del = false
-        })
-        .catch(err => {
-          console.error(err)
-          this.errors.del = true
-          this.loading.del = false
-        })
-    },
-
-    onExportClicked() {
-      const name = stringHelpers.slugify(this.$t('hardware_items.title'))
-      const headers = [
-        this.$t('main.type'),
-        this.$t('hardware_items.fields.name'),
-        this.$t('hardware_items.fields.short_name'),
-        this.$t('hardware_items.fields.monthly_cost'),
-        this.$t('hardware_items.fields.inventory_amount')
-      ]
-      const entries = [headers].concat(
-        this.hardwareItems.map(hardwareItem => [
-          hardwareItem.type,
-          hardwareItem.name,
-          hardwareItem.short_name,
-          hardwareItem.monthly_cost,
-          hardwareItem.inventory_amount
-        ])
-      )
-      csv.buildCsvFile(name, entries)
-    },
-
-    onNewClicked() {
-      this.hardwareItemToEdit = {}
-      this.errors.edit = false
-      this.modals.edit = true
-    },
-
-    onEditClicked(hardwareItem) {
-      this.hardwareItemToEdit = hardwareItem
-      this.errors.edit = false
-      this.modals.edit = true
-    },
-
-    onDeleteClicked(hardwareItem) {
-      this.hardwareItemToDelete = hardwareItem
-      this.errors.del = false
-      this.modals.del = true
-    }
-  },
+const onEditClicked = hardwareItem => {
+  hardwareItemToEdit.value = hardwareItem
+  errors.edit = false
+  modals.edit = true
+}
 
-  watch: {
-    '$route.query.tab'() {
-      this.activeTab = this.$route.query.tab || 'active'
-    }
-  },
+const onDeleteClicked = hardwareItem => {
+  hardwareItemToDelete.value = hardwareItem
+  errors.del = false
+  modals.del = true
+}
 
-  head() {
-    return {
-      title: `${this.$t('hardware_items.title')} - Kitsu`
+const confirmEditHardwareItem = async form => {
+  loading.edit = true
+  errors.edit = false
+  try {
+    if (hardwareItemToEdit.value?.id) {
+      await store.dispatch('editHardwareItem', {
+        ...form,
+        id: hardwareItemToEdit.value.id
+      })
+    } else {
+      await store.dispatch('newHardwareItem', form)
     }
+    modals.edit = false
+  } catch (err) {
+    console.error(err)
+    errors.edit = true
   }
+  loading.edit = false
 }
+
+const confirmDeleteHardwareItem = async () => {
+  loading.del = true
+  errors.del = false
+  try {
+    await store.dispatch('deleteHardwareItem', hardwareItemToDelete.value)
+    modals.del = false
+  } catch (err) {
+    console.error(err)
+    errors.del = true
+  }
+  loading.del = false
+}
+
+// Watchers
+
+watch(
+  () => route.query.tab,
+  tab => {
+    activeTab.value = tab || 'active'
+  }
+)
+
+// Lifecycle
+
+onMounted(async () => {
+  activeTab.value = route.query.tab || 'active'
+  linkedHardwareItems.value = await store.dispatch('loadLinkedHardwareItems')
+})
+
+// Head
+
+useHead({ title: computed(() => `${t('hardware_items.title')} - Kitsu`) })
 </script>
 
 <style lang="scss" scoped>
-.software-license-list {
+.hardware-item-list {
   margin-top: 0;
 }
+
+@media screen and (max-width: 768px) {
+  .hardware-items {
+    padding-left: 0.5em;
+    padding-right: 0.5em;
+  }
+}
 </style>

From 81fddb9eccba78241ab45c626fe77978a20ddd95 Mon Sep 17 00:00:00 2001
From: Frank Rousseau <frank@cg-wire.com>
Date: Wed, 29 Apr 2026 20:41:39 +0200
Subject: [PATCH 02/28] [software-licenses] Migrate page to Composition API

Convert SoftwareLicenses.vue to <script setup> mirroring the
HardwareItems migration: useStore for getters and dispatches,
async/await for confirm handlers, useHead for the title, computed
tabs for locale reactivity, and drop the unused choices state.

Align responsive with other admin pages by adding the 768px page
padding rule, and on SoftwareLicenseList give the name column a
min-width with extension/version/cells collapsing paddings on mobile.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/components/lists/SoftwareLicenseList.vue |  23 ++
 src/components/pages/SoftwareLicenses.vue    | 368 +++++++++----------
 2 files changed, 190 insertions(+), 201 deletions(-)

diff --git a/src/components/lists/SoftwareLicenseList.vue b/src/components/lists/SoftwareLicenseList.vue
index 89b7ebfa6a..12c3ec808d 100644
--- a/src/components/lists/SoftwareLicenseList.vue
+++ b/src/components/lists/SoftwareLicenseList.vue
@@ -112,6 +112,11 @@ export default {
   border-top: 0;
 }
 
+.name {
+  min-width: 200px;
+  padding: 1em;
+}
+
 .extension,
 .version {
   width: 100px;
@@ -122,4 +127,22 @@ export default {
   color: $red;
   font-weight: bold;
 }
+
+@media screen and (max-width: 768px) {
+  .name {
+    min-width: auto;
+    padding: 0.5em;
+  }
+
+  .extension,
+  .version {
+    width: auto;
+    padding: 0.5em;
+  }
+
+  .datatable-body td,
+  .datatable-head th {
+    padding: 0.5em;
+  }
+}
 </style>
diff --git a/src/components/pages/SoftwareLicenses.vue b/src/components/pages/SoftwareLicenses.vue
index 616a937b9a..becf8613f6 100644
--- a/src/components/pages/SoftwareLicenses.vue
+++ b/src/components/pages/SoftwareLicenses.vue
@@ -41,227 +41,193 @@
   </div>
 </template>
 
-<script>
-import { mapGetters, mapActions } from 'vuex'
+<script setup>
+import { useHead } from '@unhead/vue'
+import { computed, onMounted, reactive, ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useRoute } from 'vue-router'
+import { useStore } from 'vuex'
 
 import csv from '@/lib/csv'
 import stringHelpers from '@/lib/string'
 
+import SoftwareLicenseList from '@/components/lists/SoftwareLicenseList.vue'
 import DeleteModal from '@/components/modals/DeleteModal.vue'
 import EditSoftwareLicenseModal from '@/components/modals/EditSoftwareLicenseModal.vue'
 import ListPageHeader from '@/components/widgets/ListPageHeader.vue'
 import RouteTabs from '@/components/widgets/RouteTabs.vue'
-import SoftwareLicenseList from '@/components/lists/SoftwareLicenseList.vue'
 
-export default {
-  name: 'software-licenses',
-
-  components: {
-    DeleteModal,
-    EditSoftwareLicenseModal,
-    ListPageHeader,
-    RouteTabs,
-    SoftwareLicenseList
-  },
-
-  data() {
-    return {
-      activeTab: 'active',
-      linkedSoftwareLicenses: {},
-      softwareLicenseToDelete: null,
-      softwareLicenseToEdit: {},
-      choices: [],
-      errors: {
-        del: false,
-        edit: false,
-        list: false
-      },
-      modals: {
-        del: false,
-        edit: false
-      },
-      loading: {
-        del: false,
-        edit: false,
-        list: false
-      },
-      tabs: [
-        {
-          name: 'active',
-          label: this.$t('main.active')
-        },
-        {
-          name: 'archived',
-          label: this.$t('main.archived')
-        }
-      ]
-    }
-  },
-
-  async mounted() {
-    this.activeTab = this.$route.query.tab || 'active'
-    this.linkedSoftwareLicenses = await this.loadLinkedSoftwareLicenses()
-  },
-
-  computed: {
-    ...mapGetters([
-      'activePeople',
-      'softwareLicenses',
-      'archivedSoftwareLicenses'
-    ]),
-
-    isActiveTab() {
-      return this.activeTab === 'active'
-    },
-
-    softwareLicensesList() {
-      return this.isActiveTab
-        ? this.softwareLicenses
-        : this.archivedSoftwareLicenses
-    },
-
-    usedAmounts() {
-      const usedAmounts = {}
-      this.activePeople.forEach(person => {
-        person.departments.forEach(departmentId => {
-          const departmentItems =
-            this.linkedSoftwareLicenses[departmentId] || []
-          departmentItems.forEach(item => {
-            if (!usedAmounts[item.id]) {
-              usedAmounts[item.id] = 0
-            }
-            usedAmounts[item.id] += 1
-          })
-        })
+const { t } = useI18n()
+const route = useRoute()
+const store = useStore()
+
+// State
+
+const activeTab = ref('active')
+const linkedSoftwareLicenses = ref({})
+const softwareLicenseToDelete = ref(null)
+const softwareLicenseToEdit = ref({})
+
+const errors = reactive({ del: false, edit: false, list: false })
+const loading = reactive({ del: false, edit: false, list: false })
+const modals = reactive({ del: false, edit: false })
+
+// Computed
+
+const activePeople = computed(() => store.getters.activePeople)
+const archivedSoftwareLicenses = computed(
+  () => store.getters.archivedSoftwareLicenses
+)
+const softwareLicenses = computed(() => store.getters.softwareLicenses)
+
+const isActiveTab = computed(() => activeTab.value === 'active')
+
+const tabs = computed(() => [
+  { name: 'active', label: t('main.active') },
+  { name: 'archived', label: t('main.archived') }
+])
+
+const softwareLicensesList = computed(() =>
+  isActiveTab.value ? softwareLicenses.value : archivedSoftwareLicenses.value
+)
+
+const deleteText = computed(() =>
+  softwareLicenseToDelete.value
+    ? t('software_licenses.delete_text', {
+        name: softwareLicenseToDelete.value.name
       })
-      return usedAmounts
-    },
-
-    remainingSoftwareLicenses() {
-      const remainingAmounts = {}
-      this.softwareLicenses.forEach(license => {
-        remainingAmounts[license.id] =
-          license.inventory_amount - (this.usedAmounts[license.id] || 0)
+    : ''
+)
+
+const usedAmounts = computed(() => {
+  const amounts = {}
+  activePeople.value.forEach(person => {
+    person.departments.forEach(departmentId => {
+      const departmentItems = linkedSoftwareLicenses.value[departmentId] || []
+      departmentItems.forEach(item => {
+        amounts[item.id] = (amounts[item.id] || 0) + 1
       })
-      return remainingAmounts
-    },
-
-    deleteText() {
-      const softwareLicense = this.softwareLicenseToDelete
-      if (softwareLicense) {
-        return this.$t('software_licenses.delete_text', {
-          name: softwareLicense.name
-        })
-      } else {
-        return ''
-      }
-    }
-  },
-
-  methods: {
-    ...mapActions([
-      'deleteSoftwareLicense',
-      'editSoftwareLicense',
-      'newSoftwareLicense',
-      'loadLinkedSoftwareLicenses'
-    ]),
-
-    confirmEditSoftwareLicense(form) {
-      let action = 'newSoftwareLicense'
-      if (this.softwareLicenseToEdit && this.softwareLicenseToEdit.id) {
-        action = 'editSoftwareLicense'
-        form.id = this.softwareLicenseToEdit.id
-      }
-
-      this.loading.edit = true
-      this.errors.edit = false
-      this[action](form)
-        .then(() => {
-          this.loading.edit = false
-          this.modals.edit = false
-        })
-        .catch(err => {
-          console.error(err)
-          this.loading.edit = false
-          this.errors.edit = true
-        })
-    },
-
-    confirmDeleteSoftwareLicense() {
-      this.loading.del = true
-      this.errors.del = false
-      this.deleteSoftwareLicense(this.softwareLicenseToDelete)
-        .then(() => {
-          this.loading.del = false
-          this.modals.del = false
-        })
-        .catch(err => {
-          console.error(err)
-          this.errors.del = true
-          this.loading.del = false
-        })
-    },
-
-    onExportClicked() {
-      const name = stringHelpers.slugify(this.$t('software_licenses.title'))
-      const headers = [
-        this.$t('main.type'),
-        this.$t('software_licenses.fields.name'),
-        this.$t('software_licenses.fields.short_name'),
-        this.$t('software_licenses.fields.extension'),
-        this.$t('software_licenses.fields.version'),
-        this.$t('software_licenses.fields.monthly_cost'),
-        this.$t('software_licenses.fields.inventory_amount')
-      ]
-      const entries = [headers].concat(
-        this.softwareLicenses.map(softwareLicense => [
-          softwareLicense.type,
-          softwareLicense.name,
-          softwareLicense.short_name,
-          softwareLicense.file_extension,
-          softwareLicense.version,
-          softwareLicense.monthly_cost,
-          softwareLicense.inventory_amount
-        ])
-      )
-      csv.buildCsvFile(name, entries)
-    },
-
-    onNewClicked() {
-      this.softwareLicenseToEdit = {}
-      this.errors.edit = false
-      this.modals.edit = true
-    },
-
-    onEditClicked(softwareLicense) {
-      this.softwareLicenseToEdit = softwareLicense
-      this.errors.edit = false
-      this.modals.edit = true
-    },
-
-    onDeleteClicked(softwareLicense) {
-      this.softwareLicenseToDelete = softwareLicense
-      this.errors.del = false
-      this.modals.del = true
-    }
-  },
+    })
+  })
+  return amounts
+})
+
+const remainingSoftwareLicenses = computed(() =>
+  softwareLicenses.value.reduce((remaining, license) => {
+    remaining[license.id] =
+      license.inventory_amount - (usedAmounts.value[license.id] || 0)
+    return remaining
+  }, {})
+)
+
+// Functions
+
+const onExportClicked = () => {
+  const name = stringHelpers.slugify(t('software_licenses.title'))
+  const headers = [
+    t('main.type'),
+    t('software_licenses.fields.name'),
+    t('software_licenses.fields.short_name'),
+    t('software_licenses.fields.extension'),
+    t('software_licenses.fields.version'),
+    t('software_licenses.fields.monthly_cost'),
+    t('software_licenses.fields.inventory_amount')
+  ]
+  const rows = softwareLicenses.value.map(softwareLicense => [
+    softwareLicense.type,
+    softwareLicense.name,
+    softwareLicense.short_name,
+    softwareLicense.file_extension,
+    softwareLicense.version,
+    softwareLicense.monthly_cost,
+    softwareLicense.inventory_amount
+  ])
+  csv.buildCsvFile(name, [headers, ...rows])
+}
 
-  watch: {
-    '$route.query.tab'() {
-      this.activeTab = this.$route.query.tab || 'active'
-    }
-  },
+const onNewClicked = () => {
+  softwareLicenseToEdit.value = {}
+  errors.edit = false
+  modals.edit = true
+}
 
-  head() {
-    return {
-      title: `${this.$t('software_licenses.title')} - Kitsu`
+const onEditClicked = softwareLicense => {
+  softwareLicenseToEdit.value = softwareLicense
+  errors.edit = false
+  modals.edit = true
+}
+
+const onDeleteClicked = softwareLicense => {
+  softwareLicenseToDelete.value = softwareLicense
+  errors.del = false
+  modals.del = true
+}
+
+const confirmEditSoftwareLicense = async form => {
+  loading.edit = true
+  errors.edit = false
+  try {
+    if (softwareLicenseToEdit.value?.id) {
+      await store.dispatch('editSoftwareLicense', {
+        ...form,
+        id: softwareLicenseToEdit.value.id
+      })
+    } else {
+      await store.dispatch('newSoftwareLicense', form)
     }
+    modals.edit = false
+  } catch (err) {
+    console.error(err)
+    errors.edit = true
   }
+  loading.edit = false
 }
+
+const confirmDeleteSoftwareLicense = async () => {
+  loading.del = true
+  errors.del = false
+  try {
+    await store.dispatch('deleteSoftwareLicense', softwareLicenseToDelete.value)
+    modals.del = false
+  } catch (err) {
+    console.error(err)
+    errors.del = true
+  }
+  loading.del = false
+}
+
+// Watchers
+
+watch(
+  () => route.query.tab,
+  tab => {
+    activeTab.value = tab || 'active'
+  }
+)
+
+// Lifecycle
+
+onMounted(async () => {
+  activeTab.value = route.query.tab || 'active'
+  linkedSoftwareLicenses.value = await store.dispatch(
+    'loadLinkedSoftwareLicenses'
+  )
+})
+
+// Head
+
+useHead({ title: computed(() => `${t('software_licenses.title')} - Kitsu`) })
 </script>
 
 <style lang="scss" scoped>
 .software-license-list {
   margin-top: 0;
 }
+
+@media screen and (max-width: 768px) {
+  .software-licenses {
+    padding-left: 0.5em;
+    padding-right: 0.5em;
+  }
+}
 </style>

From 53af85ed86ee59c6465cee1b7f37524ba35f01e6 Mon Sep 17 00:00:00 2001
From: Frank Rousseau <frank@cg-wire.com>
Date: Thu, 30 Apr 2026 14:26:53 +0200
Subject: [PATCH 03/28] [budget] Migrate SalaryScale page to Composition API
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Convert SalaryScale.vue to <script setup>: store getter/dispatches
through useStore, refs for isLoading and salaryScale state.

Dedupe the table body — the nine hand-rolled <tr> blocks (3 positions
× 3 seniorities) collapse into a single <tr v-for> driven by static
positions and seniorities arrays, with v-if guards on the department
and position cells to preserve their rowspan layout. The salary
lookup uses chained optional access so it stays safe while the scale
is loading.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/components/pages/budget/SalaryScale.vue | 300 +++++---------------
 1 file changed, 66 insertions(+), 234 deletions(-)

diff --git a/src/components/pages/budget/SalaryScale.vue b/src/components/pages/budget/SalaryScale.vue
index 08562afac5..ace3c2301d 100644
--- a/src/components/pages/budget/SalaryScale.vue
+++ b/src/components/pages/budget/SalaryScale.vue
@@ -23,203 +23,43 @@
                   :key="department.id"
                   v-for="department in departments"
                 >
-                  <tr class="datatable-row">
-                    <td rowspan="9">
-                      <department-name :department="department" />
-                    </td>
-                    <td rowspan="3">{{ $t('budget.positions.supervisor') }}</td>
-                    <td>{{ $t('budget.seniorities.senior') }}</td>
-                    <td>
-                      <input
-                        type="number"
-                        class="input-editor"
-                        @input="
-                          value =>
-                            modifySalaryScale(
-                              department.id,
-                              'supervisor',
-                              'senior',
-                              value
-                            )
-                        "
-                        :value="
-                          salaryScale[department.id]?.supervisor.senior
-                            .salary || 0
-                        "
-                      />
-                    </td>
-                  </tr>
-                  <tr class="datatable-row">
-                    <td>{{ $t('budget.seniorities.mid') }}</td>
-                    <td>
-                      <input
-                        type="number"
-                        class="input-editor"
-                        @input="
-                          value =>
-                            modifySalaryScale(
-                              department.id,
-                              'supervisor',
-                              'mid',
-                              value
-                            )
-                        "
-                        :value="
-                          salaryScale[department.id]?.supervisor.mid.salary || 0
-                        "
-                      />
-                    </td>
-                  </tr>
-                  <tr class="datatable-row">
-                    <td>{{ $t('budget.seniorities.junior') }}</td>
-                    <td>
-                      <input
-                        type="number"
-                        class="input-editor"
-                        @input="
-                          value =>
-                            modifySalaryScale(
-                              department.id,
-                              'supervisor',
-                              'junior',
-                              value
-                            )
-                        "
-                        :value="
-                          salaryScale[department.id]?.supervisor.junior
-                            .salary || 0
-                        "
-                      />
-                    </td>
-                  </tr>
-                  <tr class="datatable-row">
-                    <td rowspan="3">{{ $t('budget.positions.lead') }}</td>
-                    <td>{{ $t('budget.seniorities.senior') }}</td>
-                    <td>
-                      <input
-                        type="number"
-                        class="input-editor"
-                        @input="
-                          value =>
-                            modifySalaryScale(
-                              department.id,
-                              'lead',
-                              'senior',
-                              value
-                            )
-                        "
-                        :value="
-                          salaryScale[department.id]?.lead.senior.salary || 0
-                        "
-                      />
-                    </td>
-                  </tr>
-                  <tr class="datatable-row">
-                    <td>{{ $t('budget.seniorities.mid') }}</td>
-                    <td>
-                      <input
-                        type="number"
-                        class="input-editor"
-                        @input="
-                          value =>
-                            modifySalaryScale(
-                              department.id,
-                              'lead',
-                              'mid',
-                              value
-                            )
-                        "
-                        :value="
-                          salaryScale[department.id]?.lead.mid.salary || 0
-                        "
-                      />
-                    </td>
-                  </tr>
-                  <tr class="datatable-row">
-                    <td>{{ $t('budget.seniorities.junior') }}</td>
-                    <td>
-                      <input
-                        type="number"
-                        class="input-editor"
-                        @input="
-                          value =>
-                            modifySalaryScale(
-                              department.id,
-                              'lead',
-                              'junior',
-                              value
-                            )
-                        "
-                        :value="
-                          salaryScale[department.id]?.lead.junior.salary || 0
-                        "
-                      />
-                    </td>
-                  </tr>
-                  <tr class="datatable-row">
-                    <td rowspan="3">{{ $t('budget.positions.artist') }}</td>
-                    <td>{{ $t('budget.seniorities.senior') }}</td>
-                    <td>
-                      <input
-                        type="number"
-                        class="input-editor"
-                        @input="
-                          value =>
-                            modifySalaryScale(
-                              department.id,
-                              'artist',
-                              'senior',
-                              value
-                            )
-                        "
-                        :value="
-                          salaryScale[department.id]?.artist.senior.salary || 0
-                        "
-                      />
-                    </td>
-                  </tr>
-                  <tr class="datatable-row">
-                    <td>{{ $t('budget.seniorities.mid') }}</td>
-                    <td>
-                      <input
-                        type="number"
-                        class="input-editor"
-                        @input="
-                          value =>
-                            modifySalaryScale(
-                              department.id,
-                              'artist',
-                              'mid',
-                              value
-                            )
-                        "
-                        :value="
-                          salaryScale[department.id]?.artist.mid.salary || 0
-                        "
-                      />
-                    </td>
-                  </tr>
-                  <tr class="datatable-row">
-                    <td>{{ $t('budget.seniorities.junior') }}</td>
-                    <td>
-                      <input
-                        type="number"
-                        class="input-editor"
-                        @input="
-                          value =>
-                            modifySalaryScale(
-                              department.id,
-                              'artist',
-                              'junior',
-                              value
-                            )
-                        "
-                        :value="
-                          salaryScale[department.id]?.artist.junior.salary || 0
-                        "
-                      />
-                    </td>
-                  </tr>
+                  <template
+                    :key="position"
+                    v-for="(position, pIdx) in positions"
+                  >
+                    <tr
+                      class="datatable-row"
+                      :key="seniority"
+                      v-for="(seniority, sIdx) in seniorities"
+                    >
+                      <td v-if="pIdx === 0 && sIdx === 0" rowspan="9">
+                        <department-name :department="department" />
+                      </td>
+                      <td v-if="sIdx === 0" rowspan="3">
+                        {{ $t(`budget.positions.${position}`) }}
+                      </td>
+                      <td>{{ $t(`budget.seniorities.${seniority}`) }}</td>
+                      <td>
+                        <input
+                          type="number"
+                          class="input-editor"
+                          @input="
+                            event =>
+                              modifySalaryScale(
+                                department.id,
+                                position,
+                                seniority,
+                                event
+                              )
+                          "
+                          :value="
+                            salaryScale[department.id]?.[position]?.[seniority]
+                              ?.salary || 0
+                          "
+                        />
+                      </td>
+                    </tr>
+                  </template>
                 </template>
               </tbody>
             </table>
@@ -230,55 +70,47 @@
   </page-layout>
 </template>
 
-<script>
-import DepartmentName from '@/components/widgets/DepartmentName.vue'
+<script setup>
+import { computed, onMounted, ref } from 'vue'
+import { useStore } from 'vuex'
+
 import PageLayout from '@/components/layouts/PageLayout.vue'
+import DepartmentName from '@/components/widgets/DepartmentName.vue'
 import PageTitle from '@/components/widgets/PageTitle.vue'
 import Spinner from '@/components/widgets/Spinner.vue'
-import { mapGetters, mapActions } from 'vuex'
 
-export default {
-  name: 'salary-scale',
+const store = useStore()
 
-  components: {
-    DepartmentName,
-    PageLayout,
-    PageTitle,
-    Spinner
-  },
+const positions = ['supervisor', 'lead', 'artist']
+const seniorities = ['senior', 'mid', 'junior']
 
-  data() {
-    return {
-      isLoading: false,
-      salaryScale: {}
-    }
-  },
+// State
 
-  computed: {
-    ...mapGetters(['departments'])
-  },
+const isLoading = ref(false)
+const salaryScale = ref({})
 
-  mounted() {
-    this.setSalaryScale()
-  },
+// Computed
 
-  methods: {
-    ...mapActions(['loadSalaryScale', 'updateSalaryScale']),
+const departments = computed(() => store.getters.departments)
 
-    async setSalaryScale() {
-      this.isLoading = true
-      this.salaryScale = await this.loadSalaryScale()
-      this.isLoading = false
-    },
+// Functions
 
-    modifySalaryScale(departmentId, position, seniority, event) {
-      const salary = Math.trunc(event.target.valueAsNumber || 0)
-      const scaleEntry = this.salaryScale[departmentId][position][seniority]
-      scaleEntry.salary = salary
-      this.updateSalaryScale(scaleEntry)
-    }
-  }
+const setSalaryScale = async () => {
+  isLoading.value = true
+  salaryScale.value = await store.dispatch('loadSalaryScale')
+  isLoading.value = false
 }
+
+const modifySalaryScale = (departmentId, position, seniority, event) => {
+  const salary = Math.trunc(event.target.valueAsNumber || 0)
+  const scaleEntry = salaryScale.value[departmentId][position][seniority]
+  scaleEntry.salary = salary
+  store.dispatch('updateSalaryScale', scaleEntry)
+}
+
+// Lifecycle
+
+onMounted(setSalaryScale)
 </script>
 
 <style lang="scss" scoped>

From d262d40bd1c3d57dcd09030b678a4ee0a0900c7a Mon Sep 17 00:00:00 2001
From: Frank Rousseau <frank@cg-wire.com>
Date: Thu, 30 Apr 2026 17:09:11 +0200
Subject: [PATCH 04/28] [hardware-items] Convert list to Composition API
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Convert HardwareItemList.vue to <script setup> with defineProps /
defineEmits. Fix the remainingHardwareItems prop default — it was
() => {} (a function with an empty block, returning undefined)
instead of the intended () => ({}). Replace the deprecated $tc with
$t for the entry-count pluralization.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/components/lists/HardwareItemList.vue | 39 ++++++-----------------
 1 file changed, 9 insertions(+), 30 deletions(-)

diff --git a/src/components/lists/HardwareItemList.vue b/src/components/lists/HardwareItemList.vue
index 907c2928fb..4f2ae28ca4 100644
--- a/src/components/lists/HardwareItemList.vue
+++ b/src/components/lists/HardwareItemList.vue
@@ -54,44 +54,23 @@
     <table-info :is-loading="isLoading" :is-error="isError"> </table-info>
 
     <p class="has-text-centered nb-hardware-items">
-      {{ entries.length }} {{ $tc('hardware_items.number', entries.length) }}
+      {{ entries.length }} {{ $t('hardware_items.number', entries.length) }}
     </p>
   </div>
 </template>
 
-<script>
+<script setup>
 import RowActionsCell from '@/components/cells/RowActionsCell.vue'
 import TableInfo from '@/components/widgets/TableInfo.vue'
 
-export default {
-  name: 'hardware-item-list',
+defineProps({
+  entries: { type: Array, default: () => [] },
+  isError: { type: Boolean, default: false },
+  isLoading: { type: Boolean, default: false },
+  remainingHardwareItems: { type: Object, default: () => ({}) }
+})
 
-  components: {
-    RowActionsCell,
-    TableInfo
-  },
-
-  props: {
-    entries: {
-      type: Array,
-      default: () => []
-    },
-    isError: {
-      type: Boolean,
-      default: false
-    },
-    isLoading: {
-      type: Boolean,
-      default: false
-    },
-    remainingHardwareItems: {
-      type: Object,
-      default: () => {}
-    }
-  },
-
-  emits: ['delete-clicked', 'edit-clicked']
-}
+defineEmits(['delete-clicked', 'edit-clicked'])
 </script>
 
 <style lang="scss" scoped>

From e94119134cd871bf8e57d65fb5723042b7d5de74 Mon Sep 17 00:00:00 2001
From: Frank Rousseau <frank@cg-wire.com>
Date: Thu, 30 Apr 2026 17:10:43 +0200
Subject: [PATCH 05/28] [software-licenses] Convert list to Composition API

Convert SoftwareLicenseList.vue to <script setup> with defineProps /
defineEmits. Replace the deprecated $tc with $t for the entry-count
pluralization.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/components/lists/SoftwareLicenseList.vue | 39 +++++---------------
 1 file changed, 9 insertions(+), 30 deletions(-)

diff --git a/src/components/lists/SoftwareLicenseList.vue b/src/components/lists/SoftwareLicenseList.vue
index 12c3ec808d..837fcd3ef3 100644
--- a/src/components/lists/SoftwareLicenseList.vue
+++ b/src/components/lists/SoftwareLicenseList.vue
@@ -66,44 +66,23 @@
     <table-info :is-loading="isLoading" :is-error="isError"> </table-info>
 
     <p class="has-text-centered nb-software-licenses">
-      {{ entries.length }} {{ $tc('software_licenses.number', entries.length) }}
+      {{ entries.length }} {{ $t('software_licenses.number', entries.length) }}
     </p>
   </div>
 </template>
 
-<script>
+<script setup>
 import RowActionsCell from '@/components/cells/RowActionsCell.vue'
 import TableInfo from '@/components/widgets/TableInfo.vue'
 
-export default {
-  name: 'software-license-list',
+defineProps({
+  entries: { type: Array, default: () => [] },
+  isError: { type: Boolean, default: false },
+  isLoading: { type: Boolean, default: false },
+  remainingSoftwareLicenses: { type: Object, default: () => ({}) }
+})
 
-  components: {
-    RowActionsCell,
-    TableInfo
-  },
-
-  props: {
-    entries: {
-      type: Array,
-      default: () => []
-    },
-    isError: {
-      type: Boolean,
-      default: false
-    },
-    isLoading: {
-      type: Boolean,
-      default: false
-    },
-    remainingSoftwareLicenses: {
-      type: Object,
-      default: () => ({})
-    }
-  },
-
-  emits: ['delete-clicked', 'edit-clicked']
-}
+defineEmits(['delete-clicked', 'edit-clicked'])
 </script>
 
 <style lang="scss" scoped>

From 4222866f5a9e1d8bfc8b89a652d7682c700ac6f4 Mon Sep 17 00:00:00 2001
From: Frank Rousseau <frank@cg-wire.com>
Date: Thu, 30 Apr 2026 18:58:46 +0200
Subject: [PATCH 06/28] [studios] Apply Composition API cleanup

Bring Studios.vue and StudioList.vue (already on <script setup>) in
line with the other admin pages: imports alphabetical by source path
with @unhead/vue first; section comments; refs and reactive object
keys alphabetized; Vuex getters alphabetized; on*Clicked handlers
grouped together; confirmEditStudio no longer mutates the form arg
and uses { ...form, id } spread; [headers].concat(rows) replaced by
[headers, ...rows]; try/catch param renamed to err.

On StudioList, alphabetize defineProps and switch to single-line
form, and add class="color" to the color column header so it gets
the same width:60px / text-align:center as the body cells.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/components/lists/StudioList.vue | 17 ++------
 src/components/pages/Studios.vue    | 68 +++++++++++++++++------------
 2 files changed, 45 insertions(+), 40 deletions(-)

diff --git a/src/components/lists/StudioList.vue b/src/components/lists/StudioList.vue
index 1b48253bd8..d85bd722fd 100644
--- a/src/components/lists/StudioList.vue
+++ b/src/components/lists/StudioList.vue
@@ -7,7 +7,7 @@
             <th scope="col" class="name">
               {{ $t('studios.fields.name') }}
             </th>
-            <th scope="col">{{ $t('studios.fields.color') }}</th>
+            <th scope="col" class="color">{{ $t('studios.fields.color') }}</th>
             <th scope="col" class="actions"></th>
           </tr>
         </thead>
@@ -42,18 +42,9 @@ import RowActionsCell from '@/components/cells/RowActionsCell.vue'
 import TableInfo from '@/components/widgets/TableInfo.vue'
 
 defineProps({
-  entries: {
-    type: Array,
-    default: () => []
-  },
-  isLoading: {
-    type: Boolean,
-    default: false
-  },
-  isError: {
-    type: Boolean,
-    default: false
-  }
+  entries: { type: Array, default: () => [] },
+  isError: { type: Boolean, default: false },
+  isLoading: { type: Boolean, default: false }
 })
 
 defineEmits(['delete-clicked', 'edit-clicked'])
diff --git a/src/components/pages/Studios.vue b/src/components/pages/Studios.vue
index f2411940d9..08a67507ce 100644
--- a/src/components/pages/Studios.vue
+++ b/src/components/pages/Studios.vue
@@ -41,42 +41,47 @@
 </template>
 
 <script setup>
-import { ref, computed, reactive, watch, onMounted } from 'vue'
-import { useI18n } from 'vue-i18n'
 import { useHead } from '@unhead/vue'
+import { computed, onMounted, reactive, ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
 import { useRoute } from 'vue-router'
 import { useStore } from 'vuex'
 
 import csv from '@/lib/csv'
 import stringHelpers from '@/lib/string'
 
+import StudioList from '@/components/lists/StudioList.vue'
 import DeleteModal from '@/components/modals/DeleteModal.vue'
 import EditStudiosModal from '@/components/modals/EditStudiosModal.vue'
 import ListPageHeader from '@/components/widgets/ListPageHeader.vue'
 import RouteTabs from '@/components/widgets/RouteTabs.vue'
-import StudioList from '@/components/lists/StudioList.vue'
 
 const { t } = useI18n()
 const route = useRoute()
 const store = useStore()
 
+// State
+
 const activeTab = ref('active')
-const studioToEdit = ref(null)
 const studioToDelete = ref(null)
-const errors = reactive({ studios: false, edit: false, del: false })
-const loading = reactive({ studios: false, edit: false, del: false })
+const studioToEdit = ref(null)
+
+const errors = reactive({ del: false, edit: false, studios: false })
+const loading = reactive({ del: false, edit: false, studios: false })
 const modals = reactive({ del: false, edit: false })
 
-const studios = computed(() => store.getters.studios)
+// Computed
+
 const archivedStudios = computed(() => store.getters.archivedStudios)
+const studios = computed(() => store.getters.studios)
+
+const isActiveTab = computed(() => activeTab.value === 'active')
 
 const tabs = computed(() => [
   { name: 'active', label: t('main.active') },
   { name: 'archived', label: t('main.archived') }
 ])
 
-const isActiveTab = computed(() => activeTab.value === 'active')
-
 const displayedStudios = computed(() =>
   isActiveTab.value ? studios.value : archivedStudios.value
 )
@@ -87,6 +92,8 @@ const deleteText = computed(() =>
     : ''
 )
 
+// Functions
+
 const onExportClicked = () => {
   const name = stringHelpers.slugify(t('studios.title'))
   const headers = [
@@ -94,10 +101,12 @@ const onExportClicked = () => {
     t('studios.fields.name'),
     t('studios.fields.color')
   ]
-  const entries = [headers].concat(
-    studios.value.map(studio => [studio.type, studio.name, studio.color])
-  )
-  csv.buildCsvFile(name, entries)
+  const rows = studios.value.map(studio => [
+    studio.type,
+    studio.name,
+    studio.color
+  ])
+  csv.buildCsvFile(name, [headers, ...rows])
 }
 
 const onNewClicked = () => {
@@ -110,42 +119,43 @@ const onEditClicked = studio => {
   modals.edit = true
 }
 
+const onDeleteClicked = studio => {
+  studioToDelete.value = studio
+  modals.del = true
+}
+
 const confirmEditStudio = async form => {
   loading.edit = true
   errors.edit = false
-  form.id = studioToEdit.value?.id
   try {
-    if (form.id) {
-      await store.dispatch('editStudio', form)
+    if (studioToEdit.value?.id) {
+      await store.dispatch('editStudio', { ...form, id: studioToEdit.value.id })
     } else {
       await store.dispatch('newStudio', form)
     }
     modals.edit = false
-  } catch (error) {
-    console.error(error)
+  } catch (err) {
+    console.error(err)
     errors.edit = true
   }
   loading.edit = false
 }
 
-const onDeleteClicked = studio => {
-  studioToDelete.value = studio
-  modals.del = true
-}
-
 const confirmDeleteStudio = async () => {
   loading.del = true
   errors.del = false
   try {
     await store.dispatch('deleteStudio', studioToDelete.value)
     modals.del = false
-  } catch (error) {
-    console.error(error)
+  } catch (err) {
+    console.error(err)
     errors.del = true
   }
   loading.del = false
 }
 
+// Watchers
+
 watch(
   () => route.query.tab,
   tab => {
@@ -153,19 +163,23 @@ watch(
   }
 )
 
+// Lifecycle
+
 onMounted(async () => {
   activeTab.value = route.query.tab || 'active'
   loading.studios = true
   errors.studios = false
   try {
     await store.dispatch('loadStudios')
-  } catch (error) {
-    console.error(error)
+  } catch (err) {
+    console.error(err)
     errors.studios = true
   }
   loading.studios = false
 })
 
+// Head
+
 useHead({ title: computed(() => `${t('studios.title')} - Kitsu`) })
 </script>
 

From aaa84055c48954e18ebfda0e151fff466e42c75b Mon Sep 17 00:00:00 2001
From: Frank Rousseau <frank@cg-wire.com>
Date: Thu, 30 Apr 2026 19:01:53 +0200
Subject: [PATCH 07/28] [departments] Migrate page to Composition API

Convert Departments.vue to <script setup>: store getters/dispatches
through useStore, ref/reactive state, computed tabs (so labels react
to locale switches), watchers and onMounted at the bottom, useHead
for the title.

Apply the project cleanup conventions: imports alphabetical by source
path with @unhead/vue first and components grouped lists / modals /
pages / widgets, section comments, refs and reactive keys
alphabetized, Vuex getters alphabetized, [headers, ...rows] spread,
confirmEditDepartment async/await with { ...form, id } spread (no
form mutation), confirmDeleteDepartment flattened so loading.del is
reset once after the try/catch, onLinkItem/onUnlinkItem destructure
{ itemId, departmentId } at the param list, and onDeleteClicked
regrouped with the other on*Clicked handlers.

DepartmentList is also imported with an eslint-disable comment for
no-unused-vars: vue-eslint-parser can't disambiguate <department-list>
from <department-links> (same kebab prefix).

Add the 768px page-padding rule to align with the other admin pages.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/components/pages/Departments.vue | 449 ++++++++++++---------------
 1 file changed, 206 insertions(+), 243 deletions(-)

diff --git a/src/components/pages/Departments.vue b/src/components/pages/Departments.vue
index 529e8aa725..983d6244f7 100644
--- a/src/components/pages/Departments.vue
+++ b/src/components/pages/Departments.vue
@@ -52,264 +52,220 @@
   </div>
 </template>
 
-<script>
-import { mapGetters, mapActions } from 'vuex'
+<script setup>
+import { useHead } from '@unhead/vue'
+import { computed, onMounted, reactive, ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useRoute } from 'vue-router'
+import { useStore } from 'vuex'
 
 import csv from '@/lib/csv'
 import stringHelpers from '@/lib/string'
 
-import DeleteModal from '@/components/modals/DeleteModal.vue'
-import DepartmentLinks from '@/components/pages/departments/DepartmentLinks.vue'
+// eslint-disable-next-line no-unused-vars
 import DepartmentList from '@/components/lists/DepartmentList.vue'
+import DeleteModal from '@/components/modals/DeleteModal.vue'
 import EditDepartmentsModal from '@/components/modals/EditDepartmentsModal.vue'
+import DepartmentLinks from '@/components/pages/departments/DepartmentLinks.vue'
 import ListPageHeader from '@/components/widgets/ListPageHeader.vue'
 import RouteTabs from '@/components/widgets/RouteTabs.vue'
 
-export default {
-  name: 'departments',
-
-  components: {
-    DeleteModal,
-    DepartmentLinks,
-    DepartmentList,
-    EditDepartmentsModal,
-    ListPageHeader,
-    RouteTabs
-  },
-
-  data() {
-    return {
-      activeTab: 'active',
-      departmentToEdit: null,
-      departmentToDelete: null,
-      linkedHardwareItems: {},
-      linkedSoftwareLicenses: {},
-      errors: {
-        departments: false,
-        edit: false,
-        del: false
-      },
-      loading: {
-        departments: false,
-        edit: false,
-        del: false
-      },
-      modals: {
-        del: false,
-        edit: false
-      },
-      tabs: [
-        {
-          name: 'active',
-          label: this.$t('main.active')
-        },
-        {
-          name: 'archived',
-          label: this.$t('main.archived')
-        },
-        {
-          name: 'linked-hardware',
-          label: this.$t('departments.linked_hardware')
-        },
-        {
-          name: 'linked-software',
-          label: this.$t('departments.linked_software')
-        }
-      ]
-    }
-  },
-
-  async mounted() {
-    this.activeTab = this.$route.query.tab || 'active'
-    this.loading.departments = true
-    this.errors.departments = false
-    try {
-      await this.loadDepartments()
-      await this.loadHardwareItems()
-      await this.loadSoftwareLicenses()
-      this.linkedHardwareItems = await this.loadLinkedHardwareItems()
-      this.linkedSoftwareLicenses = await this.loadLinkedSoftwareLicenses()
-    } catch (error) {
-      console.error(error)
-      this.errors.departments = true
-    }
-    this.loading.departments = false
-  },
-
-  computed: {
-    ...mapGetters([
-      'departments',
-      'archivedDepartments',
-      'hardwareItems',
-      'softwareLicenses'
-    ]),
-
-    isActiveTab() {
-      return this.activeTab === 'active'
-    },
-
-    departmentList() {
-      return this.isActiveTab ? this.departments : this.archivedDepartments
-    },
-
-    deleteText() {
-      return this.departmentToDelete
-        ? this.$t('departments.delete_text', {
-            name: this.departmentToDelete.name
-          })
-        : ''
-    },
-
-    linkedItems() {
-      return this.activeTab === 'linked-hardware'
-        ? this.linkedHardwareItems
-        : this.linkedSoftwareLicenses
-    },
-
-    items() {
-      return this.activeTab === 'linked-hardware'
-        ? this.hardwareItems
-        : this.softwareLicenses
-    }
-  },
-
-  methods: {
-    ...mapActions([
-      'deleteDepartment',
-      'linkHardwareItem',
-      'linkSoftwareLicense',
-      'loadDepartments',
-      'loadHardwareItems',
-      'loadSoftwareLicenses',
-      'loadLinkedHardwareItems',
-      'loadLinkedSoftwareLicenses',
-      'unlinkHardwareItem',
-      'unlinkSoftwareLicense'
-    ]),
-
-    onExportClicked() {
-      const name = stringHelpers.slugify(this.$t('departments.title'))
-      const headers = [
-        this.$t('main.type'),
-        this.$t('departments.fields.name'),
-        this.$t('departments.fields.color')
-      ]
-      const entries = [headers].concat(
-        this.departments.map(department => [
-          department.type,
-          department.name,
-          department.color
-        ])
-      )
-      csv.buildCsvFile(name, entries)
-    },
-
-    onNewClicked() {
-      this.departmentToEdit = { name: '', color: '#999999' }
-      this.modals.edit = true
-    },
-
-    onEditClicked(department) {
-      this.departmentToEdit = department
-      this.modals.edit = true
-    },
-
-    confirmEditDepartment(form) {
-      let action = 'newDepartment'
-      if (this.departmentToEdit && this.departmentToEdit.id) {
-        action = 'editDepartment'
-        form.id = this.departmentToEdit.id
-      }
-      this.loading.edit = true
-      this.errors.edit = false
-      this.$store
-        .dispatch(action, form)
-        .then(() => {
-          this.loading.edit = false
-          this.modals.edit = false
-        })
-        .catch(() => {
-          this.loading.edit = false
-          this.errors.edit = true
-        })
-    },
-
-    onDeleteClicked(department) {
-      this.departmentToDelete = department
-      this.modals.del = true
-    },
-
-    async confirmDeleteDepartment() {
-      this.loading.del = true
-      this.errors.del = false
-      try {
-        await this.deleteDepartment(this.departmentToDelete)
-        this.loading.del = false
-        this.modals.del = false
-      } catch (e) {
-        this.loading.del = false
-        this.errors.del = true
-      }
-    },
-
-    onLinkItem(data) {
-      if (this.activeTab === 'linked-hardware') {
-        this.linkHardwareItem({
-          hardwareItemId: data.itemId,
-          departmentId: data.departmentId
-        })
-        const item = this.hardwareItems.find(i => i.id === data.itemId)
-        if (!this.linkedHardwareItems[data.departmentId]) {
-          this.linkedHardwareItems[data.departmentId] = []
-        }
-        this.linkedHardwareItems[data.departmentId].push(item)
-      } else if (this.activeTab === 'linked-software') {
-        this.linkSoftwareLicense({
-          softwareLicenseId: data.itemId,
-          departmentId: data.departmentId
-        })
-        const item = this.softwareLicenses.find(i => i.id === data.itemId)
-        if (!this.linkedSoftwareLicenses[data.departmentId]) {
-          this.linkedSoftwareLicenses[data.departmentId] = []
-        }
-        this.linkedSoftwareLicenses[data.departmentId].push(item)
-      }
-    },
-
-    onUnlinkItem(data) {
-      if (this.activeTab === 'linked-hardware') {
-        this.unlinkHardwareItem({
-          hardwareItemId: data.itemId,
-          departmentId: data.departmentId
-        })
-        this.linkedHardwareItems[data.departmentId] = this.linkedHardwareItems[
-          data.departmentId
-        ].filter(i => i.id !== data.itemId)
-      } else if (this.activeTab === 'linked-software') {
-        this.unlinkSoftwareLicense({
-          softwareLicenseId: data.itemId,
-          departmentId: data.departmentId
-        })
-        this.linkedSoftwareLicenses[data.departmentId] =
-          this.linkedSoftwareLicenses[data.departmentId].filter(
-            i => i.id !== data.itemId
-          )
-      }
-    }
-  },
+const { t } = useI18n()
+const route = useRoute()
+const store = useStore()
+
+// State
+
+const activeTab = ref('active')
+const departmentToDelete = ref(null)
+const departmentToEdit = ref(null)
+const linkedHardwareItems = ref({})
+const linkedSoftwareLicenses = ref({})
+
+const errors = reactive({ del: false, departments: false, edit: false })
+const loading = reactive({ del: false, departments: false, edit: false })
+const modals = reactive({ del: false, edit: false })
+
+// Computed
+
+const archivedDepartments = computed(() => store.getters.archivedDepartments)
+const departments = computed(() => store.getters.departments)
+const hardwareItems = computed(() => store.getters.hardwareItems)
+const softwareLicenses = computed(() => store.getters.softwareLicenses)
+
+const isActiveTab = computed(() => activeTab.value === 'active')
+
+const tabs = computed(() => [
+  { name: 'active', label: t('main.active') },
+  { name: 'archived', label: t('main.archived') },
+  { name: 'linked-hardware', label: t('departments.linked_hardware') },
+  { name: 'linked-software', label: t('departments.linked_software') }
+])
+
+const departmentList = computed(() =>
+  isActiveTab.value ? departments.value : archivedDepartments.value
+)
+
+const deleteText = computed(() =>
+  departmentToDelete.value
+    ? t('departments.delete_text', { name: departmentToDelete.value.name })
+    : ''
+)
+
+const linkedItems = computed(() =>
+  activeTab.value === 'linked-hardware'
+    ? linkedHardwareItems.value
+    : linkedSoftwareLicenses.value
+)
+
+const items = computed(() =>
+  activeTab.value === 'linked-hardware'
+    ? hardwareItems.value
+    : softwareLicenses.value
+)
+
+// Functions
+
+const onExportClicked = () => {
+  const name = stringHelpers.slugify(t('departments.title'))
+  const headers = [
+    t('main.type'),
+    t('departments.fields.name'),
+    t('departments.fields.color')
+  ]
+  const rows = departments.value.map(department => [
+    department.type,
+    department.name,
+    department.color
+  ])
+  csv.buildCsvFile(name, [headers, ...rows])
+}
+
+const onNewClicked = () => {
+  departmentToEdit.value = { name: '', color: '#999999' }
+  modals.edit = true
+}
 
-  watch: {
-    '$route.query.tab'() {
-      this.activeTab = this.$route.query.tab || 'active'
+const onEditClicked = department => {
+  departmentToEdit.value = department
+  modals.edit = true
+}
+
+const onDeleteClicked = department => {
+  departmentToDelete.value = department
+  modals.del = true
+}
+
+const confirmEditDepartment = async form => {
+  loading.edit = true
+  errors.edit = false
+  try {
+    if (departmentToEdit.value?.id) {
+      await store.dispatch('editDepartment', {
+        ...form,
+        id: departmentToEdit.value.id
+      })
+    } else {
+      await store.dispatch('newDepartment', form)
     }
-  },
+    modals.edit = false
+  } catch (err) {
+    console.error(err)
+    errors.edit = true
+  }
+  loading.edit = false
+}
 
-  head() {
-    return {
-      title: `${this.$t('departments.title')} - Kitsu`
+const confirmDeleteDepartment = async () => {
+  loading.del = true
+  errors.del = false
+  try {
+    await store.dispatch('deleteDepartment', departmentToDelete.value)
+    modals.del = false
+  } catch (err) {
+    console.error(err)
+    errors.del = true
+  }
+  loading.del = false
+}
+
+const onLinkItem = ({ itemId, departmentId }) => {
+  if (activeTab.value === 'linked-hardware') {
+    store.dispatch('linkHardwareItem', {
+      hardwareItemId: itemId,
+      departmentId
+    })
+    const item = hardwareItems.value.find(i => i.id === itemId)
+    if (!linkedHardwareItems.value[departmentId]) {
+      linkedHardwareItems.value[departmentId] = []
     }
+    linkedHardwareItems.value[departmentId].push(item)
+  } else if (activeTab.value === 'linked-software') {
+    store.dispatch('linkSoftwareLicense', {
+      softwareLicenseId: itemId,
+      departmentId
+    })
+    const item = softwareLicenses.value.find(i => i.id === itemId)
+    if (!linkedSoftwareLicenses.value[departmentId]) {
+      linkedSoftwareLicenses.value[departmentId] = []
+    }
+    linkedSoftwareLicenses.value[departmentId].push(item)
+  }
+}
+
+const onUnlinkItem = ({ itemId, departmentId }) => {
+  if (activeTab.value === 'linked-hardware') {
+    store.dispatch('unlinkHardwareItem', {
+      hardwareItemId: itemId,
+      departmentId
+    })
+    linkedHardwareItems.value[departmentId] = linkedHardwareItems.value[
+      departmentId
+    ].filter(i => i.id !== itemId)
+  } else if (activeTab.value === 'linked-software') {
+    store.dispatch('unlinkSoftwareLicense', {
+      softwareLicenseId: itemId,
+      departmentId
+    })
+    linkedSoftwareLicenses.value[departmentId] = linkedSoftwareLicenses.value[
+      departmentId
+    ].filter(i => i.id !== itemId)
   }
 }
+
+// Watchers
+
+watch(
+  () => route.query.tab,
+  tab => {
+    activeTab.value = tab || 'active'
+  }
+)
+
+// Lifecycle
+
+onMounted(async () => {
+  activeTab.value = route.query.tab || 'active'
+  loading.departments = true
+  errors.departments = false
+  try {
+    await store.dispatch('loadDepartments')
+    await store.dispatch('loadHardwareItems')
+    await store.dispatch('loadSoftwareLicenses')
+    linkedHardwareItems.value = await store.dispatch('loadLinkedHardwareItems')
+    linkedSoftwareLicenses.value = await store.dispatch(
+      'loadLinkedSoftwareLicenses'
+    )
+  } catch (err) {
+    console.error(err)
+    errors.departments = true
+  }
+  loading.departments = false
+})
+
+// Head
+
+useHead({ title: computed(() => `${t('departments.title')} - Kitsu`) })
 </script>
 
 <style lang="scss" scoped>
@@ -321,4 +277,11 @@ export default {
   min-height: 30px;
   margin-top: 1em;
 }
+
+@media screen and (max-width: 768px) {
+  .departments {
+    padding-left: 0.5em;
+    padding-right: 0.5em;
+  }
+}
 </style>

From 2a7b89284a7eec481a104f1c3028f0dffa3ca392 Mon Sep 17 00:00:00 2001
From: Frank Rousseau <frank@cg-wire.com>
Date: Thu, 30 Apr 2026 19:16:01 +0200
Subject: [PATCH 08/28] [departments] Convert list to Composition API

Convert DepartmentList.vue to <script setup> with defineProps /
defineEmits. Switch each prop from required: true to typed defaults
matching the other lists. Replace deprecated $tc with $t and rename
the nb-asset-types class (copy-paste leftover) to nb-departments.

Align CSS with the other admin lists: move the first-row border-top
reset to the top, switch .name from width:300px to min-width:300px
so the column can grow on wide screens, drop the misleading
height:20px on the .color td (overridden by sibling cells anyway),
widen .color to 60px so the header text fits, and add the 768px
breakpoint that collapses cell padding and resets .name / .items
min-widths.

Add class="color" to the color column header so it shares the body
cell's width and centering.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/components/lists/DepartmentList.vue | 80 ++++++++++++-------------
 1 file changed, 37 insertions(+), 43 deletions(-)

diff --git a/src/components/lists/DepartmentList.vue b/src/components/lists/DepartmentList.vue
index d0cb590900..bf52dc3d22 100644
--- a/src/components/lists/DepartmentList.vue
+++ b/src/components/lists/DepartmentList.vue
@@ -7,7 +7,9 @@
             <th scope="col" class="name">
               {{ $t('departments.fields.name') }}
             </th>
-            <th scope="col">{{ $t('departments.fields.color') }}</th>
+            <th scope="col" class="color">
+              {{ $t('departments.fields.color') }}
+            </th>
             <th scope="col">
               {{ $t('departments.hardware_used_by_artists') }}
             </th>
@@ -48,60 +50,40 @@
       </table>
     </div>
     <table-info :is-loading="isLoading" :is-error="isError"> </table-info>
-    <p class="has-text-centered nb-asset-types">
-      {{ entries.length }} {{ $tc('departments.number', entries.length) }}
+    <p class="has-text-centered nb-departments">
+      {{ entries.length }} {{ $t('departments.number', entries.length) }}
     </p>
   </div>
 </template>
 
-<script>
+<script setup>
 import RowActionsCell from '@/components/cells/RowActionsCell.vue'
 import TableInfo from '@/components/widgets/TableInfo.vue'
 
-export default {
-  name: 'department-list',
-
-  emits: ['delete-clicked', 'edit-clicked'],
-
-  components: {
-    RowActionsCell,
-    TableInfo
-  },
+defineProps({
+  entries: { type: Array, default: () => [] },
+  isError: { type: Boolean, default: false },
+  isLoading: { type: Boolean, default: false },
+  linkedHardwareItems: { type: Object, default: () => ({}) },
+  linkedSoftwareLicenses: { type: Object, default: () => ({}) }
+})
 
-  props: {
-    entries: {
-      type: Array,
-      required: true
-    },
-    isLoading: {
-      type: Boolean,
-      required: true
-    },
-    isError: {
-      type: Boolean,
-      required: true
-    },
-    linkedHardwareItems: {
-      type: Object,
-      required: true
-    },
-    linkedSoftwareLicenses: {
-      type: Object,
-      required: true
-    }
-  }
-}
+defineEmits(['delete-clicked', 'edit-clicked'])
 </script>
 
 <style lang="scss" scoped>
+.datatable-body tr:first-child th,
+.datatable-body tr:first-child td {
+  border-top: 0;
+}
+
 .name {
-  width: 300px;
+  min-width: 300px;
   padding: 1em;
 }
 
 .color {
-  width: 20px;
-  height: 20px;
+  width: 60px;
   text-align: center;
 
   span {
@@ -113,13 +95,25 @@ export default {
 }
 
 .items {
-  padding: 1em;
   min-width: 200px;
   max-width: 200px;
+  padding: 1em;
 }
 
-.datatable-body tr:first-child th,
-.datatable-body tr:first-child td {
-  border-top: 0;
+@media screen and (max-width: 768px) {
+  .name {
+    min-width: auto;
+    padding: 0.5em;
+  }
+
+  .items {
+    min-width: auto;
+    padding: 0.5em;
+  }
+
+  .datatable-body td,
+  .datatable-head th {
+    padding: 0.5em;
+  }
 }
 </style>

From 6f715d5af05def8fc076d5460408d1d13c4c056f Mon Sep 17 00:00:00 2001
From: Frank Rousseau <frank@cg-wire.com>
Date: Fri, 1 May 2026 21:01:46 +0200
Subject: [PATCH 09/28] [layouts] Convert PageLayout and PageLeftSideLayout to
 Composition API
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Both layouts are slot-only wrappers — convert them to <script setup>.
PageLayout keeps its single side prop via defineProps with a typed
default; PageLeftSideLayout has no script content so the block stays
empty (the original only declared the component name, which is now
auto-derived from the filename).

Drop the ref="page" template ref on both — no consumer reads
$refs.page anywhere in the codebase, so it was vestigial.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/components/layouts/PageLayout.vue         | 17 +++++------------
 src/components/layouts/PageLeftSideLayout.vue |  8 ++------
 2 files changed, 7 insertions(+), 18 deletions(-)

diff --git a/src/components/layouts/PageLayout.vue b/src/components/layouts/PageLayout.vue
index b16f17f999..2ab9c9ad16 100644
--- a/src/components/layouts/PageLayout.vue
+++ b/src/components/layouts/PageLayout.vue
@@ -1,5 +1,5 @@
 <template>
-  <div ref="page" class="columns fixed-page">
+  <div class="columns fixed-page">
     <div class="column main-column">
       <slot name="main" />
     </div>
@@ -9,15 +9,8 @@
   </div>
 </template>
 
-<script>
-export default {
-  name: 'page-layout',
-
-  props: {
-    side: {
-      type: Boolean,
-      default: true
-    }
-  }
-}
+<script setup>
+defineProps({
+  side: { type: Boolean, default: true }
+})
 </script>
diff --git a/src/components/layouts/PageLeftSideLayout.vue b/src/components/layouts/PageLeftSideLayout.vue
index d651864cd4..371e70ab80 100644
--- a/src/components/layouts/PageLeftSideLayout.vue
+++ b/src/components/layouts/PageLeftSideLayout.vue
@@ -1,5 +1,5 @@
 <template>
-  <div ref="page" class="columns fixed-page">
+  <div class="columns fixed-page">
     <div class="column left-side-column">
       <slot name="side" />
     </div>
@@ -9,8 +9,4 @@
   </div>
 </template>
 
-<script>
-export default {
-  name: 'page-left-side-layout'
-}
-</script>
+<script setup></script>

From 23680ad76d7f80a5156d9d70e12650e8f00fe2d1 Mon Sep 17 00:00:00 2001
From: Frank Rousseau <frank@cg-wire.com>
Date: Fri, 1 May 2026 21:11:59 +0200
Subject: [PATCH 10/28] [cells] Convert cells to Composition API
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Convert 10 cells to <script setup>: BooleanCell, DepartmentNamesCell,
DescriptionCell, LastCommentCell, PeopleNameCell, StatsCell,
TaskStatusCell, TaskTypeCell, TimeSliderCell, ValidationHeader.

Standard transforms: defineProps with typed defaults (single-line
form, alphabetized), defineEmits, computed for Vuex getters via
useStore, top-level arrow functions for methods, refs for state and
template refs (DescriptionCell), watch / nextTick imports from vue.

A few cleanups picked up along the way:
- TaskStatusCell entry default was () => {} (returns undefined) →
  () => ({}); same fix as the recent HardwareItemList one.
- LastCommentCell: drop unused timeout state and the
  methods: { renderMarkdown } pass-through (just import it).
- StatsCell: simplify the percent helper (early return on zero
  total) and the reduce accumulator.
- TimeSliderCell: extract the repeated label-style object and inline
  the static stepStyle / marks tables (they're not reactive).

Skip ValidationCell — it depends on formatListMixin which is shared
with 27+ other files; converting that mixin to a composable is a
separate workstream.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/components/cells/BooleanCell.vue         |  19 +--
 src/components/cells/DepartmentNamesCell.vue |  40 ++----
 src/components/cells/DescriptionCell.vue     | 143 ++++++++-----------
 src/components/cells/LastCommentCell.vue     |  50 ++-----
 src/components/cells/PeopleNameCell.vue      |  20 +--
 src/components/cells/StatsCell.vue           |  89 +++---------
 src/components/cells/TaskStatusCell.vue      |  49 +++----
 src/components/cells/TaskTypeCell.vue        |  34 +----
 src/components/cells/TimeSliderCell.vue      | 112 +++++----------
 src/components/cells/ValidationHeader.vue    | 116 ++++++---------
 10 files changed, 224 insertions(+), 448 deletions(-)

diff --git a/src/components/cells/BooleanCell.vue b/src/components/cells/BooleanCell.vue
index f80242e805..fbb3c80950 100644
--- a/src/components/cells/BooleanCell.vue
+++ b/src/components/cells/BooleanCell.vue
@@ -4,23 +4,12 @@
   </td>
 </template>
 
-<script>
+<script setup>
 import BooleanRep from '@/components/widgets/BooleanRep.vue'
 
-export default {
-  name: 'boolean-cell',
-
-  components: {
-    BooleanRep
-  },
-
-  props: {
-    value: {
-      default: false,
-      type: Boolean
-    }
-  }
-}
+defineProps({
+  value: { type: Boolean, default: false }
+})
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/cells/DepartmentNamesCell.vue b/src/components/cells/DepartmentNamesCell.vue
index 01b33106c4..a166ce7ba7 100644
--- a/src/components/cells/DepartmentNamesCell.vue
+++ b/src/components/cells/DepartmentNamesCell.vue
@@ -8,37 +8,27 @@
   </td>
 </template>
 
-<script>
-import { mapGetters } from 'vuex'
+<script setup>
+import { computed } from 'vue'
+import { useStore } from 'vuex'
 
 import { sortByName } from '@/lib/sorting'
 
 import DepartmentName from '@/components/widgets/DepartmentName.vue'
 
-export default {
-  name: 'department-names-cell',
+const store = useStore()
 
-  components: {
-    DepartmentName
-  },
+const props = defineProps({
+  departments: { type: Array, default: () => [] }
+})
 
-  props: {
-    departments: {
-      type: Array,
-      default: () => []
-    }
-  },
+const departmentMap = computed(() => store.getters.departmentMap)
 
-  computed: {
-    ...mapGetters(['departmentMap']),
-
-    sortedDepartments() {
-      return sortByName(
-        this.departments
-          .map(departmentId => this.departmentMap.get(departmentId))
-          .filter(Boolean)
-      )
-    }
-  }
-}
+const sortedDepartments = computed(() =>
+  sortByName(
+    props.departments
+      .map(departmentId => departmentMap.value.get(departmentId))
+      .filter(Boolean)
+  )
+)
 </script>
diff --git a/src/components/cells/DescriptionCell.vue b/src/components/cells/DescriptionCell.vue
index 195ff8fc0a..623285617e 100644
--- a/src/components/cells/DescriptionCell.vue
+++ b/src/components/cells/DescriptionCell.vue
@@ -47,98 +47,73 @@
   </td>
 </template>
 
-<script>
-import { mapGetters } from 'vuex'
+<script setup>
+import { computed, nextTick, ref } from 'vue'
+import { useStore } from 'vuex'
 
 import { renderMarkdown } from '@/lib/render'
 import stringHelpers from '@/lib/string'
 
-export default {
-  name: 'description-cell',
-
-  data() {
-    return {
-      isEditing: false,
-      isOpen: false,
-      tooltipPosition: { top: 0, left: 0 }
-    }
-  },
-
-  props: {
-    editable: {
-      type: Boolean,
-      default: false
-    },
-    entry: {
-      type: Object,
-      default: () => {}
-    },
-    full: {
-      type: Boolean,
-      default: false
-    }
-  },
-
-  emits: ['description-changed'],
-
-  computed: {
-    ...mapGetters(['isDarkTheme']),
-
-    tooltipStyle() {
-      return {
-        top: this.tooltipPosition.top + 'px',
-        left: this.tooltipPosition.left + 'px'
-      }
-    }
-  },
-
-  methods: {
-    renderMarkdown,
-
-    shortenText: stringHelpers.shortenText,
-
-    onClick(event) {
-      if (
-        (event.currentTarget.classList.contains('description-cell') &&
-          !event.target.closest('.description-cell .tooltip')) ||
-        event.keyCode === 27
-      ) {
-        this.isOpen = !this.isOpen
-        if (this.isOpen) {
-          const td = event.currentTarget
-          const rect = td.getBoundingClientRect()
-          const scrollTop =
-            window.pageYOffset || document.documentElement.scrollTop
-          const scrollLeft =
-            window.pageXOffset || document.documentElement.scrollLeft
-          this.tooltipPosition = {
-            top: rect.top + scrollTop - 105,
-            left: rect.left + scrollLeft + rect.width / 2 - 160
-          }
-        } else if (this.isEditing) {
-          this.isEditing = false
-          const val = this.$refs.text.value
-          this.$emit('description-changed', val)
-        }
-      }
-    },
-
-    onDoubleClick() {
-      if (this.editable) {
-        if (this.isEditing) {
-          const val = this.$refs.text.value
-          this.$emit('description-changed', val)
-        }
-        this.isEditing = !this.isEditing
-        if (this.isEditing) {
-          this.$nextTick(() => {
-            this.$refs.text.focus()
-          })
-        }
+const store = useStore()
+
+const props = defineProps({
+  editable: { type: Boolean, default: false },
+  entry: { type: Object, default: () => ({}) },
+  full: { type: Boolean, default: false }
+})
+
+const emit = defineEmits(['description-changed'])
+
+const isDarkTheme = computed(() => store.getters.isDarkTheme)
+
+const isEditing = ref(false)
+const isOpen = ref(false)
+const text = ref(null)
+const tooltipPosition = ref({ top: 0, left: 0 })
+
+const tooltipStyle = computed(() => ({
+  top: tooltipPosition.value.top + 'px',
+  left: tooltipPosition.value.left + 'px'
+}))
+
+const shortenText = stringHelpers.shortenText
+
+const onClick = event => {
+  if (
+    (event.currentTarget.classList.contains('description-cell') &&
+      !event.target.closest('.description-cell .tooltip')) ||
+    event.keyCode === 27
+  ) {
+    isOpen.value = !isOpen.value
+    if (isOpen.value) {
+      const td = event.currentTarget
+      const rect = td.getBoundingClientRect()
+      const scrollTop = window.pageYOffset || document.documentElement.scrollTop
+      const scrollLeft =
+        window.pageXOffset || document.documentElement.scrollLeft
+      tooltipPosition.value = {
+        top: rect.top + scrollTop - 105,
+        left: rect.left + scrollLeft + rect.width / 2 - 160
       }
+    } else if (isEditing.value) {
+      isEditing.value = false
+      emit('description-changed', text.value.value)
     }
   }
 }
+
+const onDoubleClick = () => {
+  if (!props.editable) return
+  if (isEditing.value) {
+    emit('description-changed', text.value.value)
+  }
+  isEditing.value = !isEditing.value
+  if (isEditing.value) {
+    nextTick(() => {
+      text.value.focus()
+    })
+  }
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/cells/LastCommentCell.vue b/src/components/cells/LastCommentCell.vue
index 21d9bee208..d4ca01ca4f 100644
--- a/src/components/cells/LastCommentCell.vue
+++ b/src/components/cells/LastCommentCell.vue
@@ -27,49 +27,25 @@
   </td>
 </template>
 
-<script>
+<script setup>
+import { computed } from 'vue'
+
 import { renderMarkdown } from '@/lib/render'
 
 import PeopleAvatar from '@/components/widgets/PeopleAvatar.vue'
 
-export default {
-  name: 'last-comment-cell',
-
-  emits: ['click'],
-
-  components: {
-    PeopleAvatar
-  },
+const props = defineProps({
+  task: { type: Object, required: true }
+})
 
-  data() {
-    return {
-      timeout: null
-    }
-  },
+defineEmits(['click'])
 
-  props: {
-    task: {
-      type: Object,
-      required: true
-    }
-  },
-
-  computed: {
-    commentText() {
-      const text = this.task.last_comment.text
-      const maxLength = 140
-      let result = text || ''
-      if (text !== undefined && text.length > maxLength) {
-        result = text.slice(0, maxLength) + '...'
-      }
-      return result
-    }
-  },
-
-  methods: {
-    renderMarkdown
-  }
-}
+const commentText = computed(() => {
+  const text = props.task.last_comment.text
+  const maxLength = 140
+  if (text === undefined) return ''
+  return text.length > maxLength ? text.slice(0, maxLength) + '...' : text
+})
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/cells/PeopleNameCell.vue b/src/components/cells/PeopleNameCell.vue
index 5aae820af7..91700f087b 100644
--- a/src/components/cells/PeopleNameCell.vue
+++ b/src/components/cells/PeopleNameCell.vue
@@ -7,25 +7,13 @@
   </td>
 </template>
 
-<script>
+<script setup>
 import PeopleAvatar from '@/components/widgets/PeopleAvatar.vue'
 import PeopleName from '@/components/widgets/PeopleName.vue'
 
-export default {
-  name: 'people-name-cell',
-
-  components: {
-    PeopleAvatar,
-    PeopleName
-  },
-
-  props: {
-    person: {
-      type: Object,
-      required: true
-    }
-  }
-}
+defineProps({
+  person: { type: Object, required: true }
+})
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/cells/StatsCell.vue b/src/components/cells/StatsCell.vue
index 1b9daa7c24..82b45e2e2d 100644
--- a/src/components/cells/StatsCell.vue
+++ b/src/components/cells/StatsCell.vue
@@ -40,7 +40,7 @@
   </td>
 </template>
 
-<script>
+<script setup>
 /**
  * Components to display statistics as a pie or as text depending on the
  * selected display mode. Stats are based on count data (nb of shots or assets)
@@ -48,75 +48,32 @@
  * Data format:
  * [['name', count, 'color'], ...  ]
  */
-export default {
-  name: 'stats-cell',
+import { computed } from 'vue'
 
-  props: {
-    colors: {
-      type: Array,
-      required: true
-    },
-    countMode: {
-      type: String,
-      default: 'count'
-    },
-    data: {
-      type: Array,
-      default: () => []
-    },
-    displayMode: {
-      type: String,
-      default: 'pie'
-    },
-    drawingsData: {
-      type: Array,
-      default: () => []
-    },
-    framesData: {
-      type: Array,
-      default: () => []
-    },
-    label: {
-      type: String,
-      default: ''
-    },
-    labelColor: {
-      type: String,
-      default: '#e67e22'
-    }
-  },
+const props = defineProps({
+  colors: { type: Array, required: true },
+  countMode: { type: String, default: 'count' },
+  data: { type: Array, default: () => [] },
+  displayMode: { type: String, default: 'pie' },
+  drawingsData: { type: Array, default: () => [] },
+  framesData: { type: Array, default: () => [] },
+  label: { type: String, default: '' },
+  labelColor: { type: String, default: '#e67e22' }
+})
 
-  computed: {
-    selectedData() {
-      if (this.countMode === 'frames') {
-        return this.framesData
-      } else if (this.countMode === 'drawings') {
-        return this.drawingsData
-      } else {
-        return this.data
-      }
-    },
+const selectedData = computed(() => {
+  if (props.countMode === 'frames') return props.framesData
+  if (props.countMode === 'drawings') return props.drawingsData
+  return props.data
+})
 
-    total() {
-      return this.selectedData.reduce((acc, entry) => {
-        if (entry[1]) {
-          return acc + entry[1]
-        } else {
-          return acc
-        }
-      }, 0)
-    }
-  },
+const total = computed(() =>
+  selectedData.value.reduce((acc, entry) => acc + (entry[1] || 0), 0)
+)
 
-  methods: {
-    percent(value) {
-      let percent = 0
-      if (this.total > 0) {
-        percent = (value / this.total) * 100
-      }
-      return percent.toFixed(2)
-    }
-  }
+const percent = value => {
+  if (total.value === 0) return '0.00'
+  return ((value / total.value) * 100).toFixed(2)
 }
 </script>
 
diff --git a/src/components/cells/TaskStatusCell.vue b/src/components/cells/TaskStatusCell.vue
index 5972185458..d0956ff04d 100644
--- a/src/components/cells/TaskStatusCell.vue
+++ b/src/components/cells/TaskStatusCell.vue
@@ -14,43 +14,28 @@
   </td>
 </template>
 
-<script>
-import { mapGetters } from 'vuex'
+<script setup>
+import { computed } from 'vue'
+import { useStore } from 'vuex'
 
-export default {
-  name: 'task-status-cell',
+const store = useStore()
 
-  props: {
-    entry: {
-      type: Object,
-      default: () => {}
-    },
-    disable: {
-      type: Boolean,
-      default: false
-    }
-  },
+const props = defineProps({
+  disable: { type: Boolean, default: false },
+  entry: { type: Object, default: () => ({}) }
+})
 
-  computed: {
-    ...mapGetters(['isDarkTheme']),
+const isDarkTheme = computed(() => store.getters.isDarkTheme)
 
-    color() {
-      if (this.entry.name === 'Todo' && this.isDarkTheme) {
-        return '#5F626A'
-      } else {
-        return this.entry.color
-      }
-    },
+const color = computed(() =>
+  props.entry.name === 'Todo' && isDarkTheme.value
+    ? '#5F626A'
+    : props.entry.color
+)
 
-    textColor() {
-      if (this.entry.name === 'Todo' && !this.isDarkTheme) {
-        return '#333'
-      } else {
-        return 'white'
-      }
-    }
-  }
-}
+const textColor = computed(() =>
+  props.entry.name === 'Todo' && !isDarkTheme.value ? '#333' : 'white'
+)
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/cells/TaskTypeCell.vue b/src/components/cells/TaskTypeCell.vue
index bb1309a816..fd51542a89 100644
--- a/src/components/cells/TaskTypeCell.vue
+++ b/src/components/cells/TaskTypeCell.vue
@@ -10,35 +10,15 @@
   </td>
 </template>
 
-<script>
+<script setup>
 import TaskTypeName from '@/components/widgets/TaskTypeName.vue'
 
-export default {
-  name: 'task-type-cell',
-
-  components: {
-    TaskTypeName
-  },
-
-  props: {
-    taskId: {
-      type: String,
-      default: null
-    },
-    taskType: {
-      type: Object,
-      default: null
-    },
-    productionId: {
-      type: String,
-      default: null
-    },
-    disable: {
-      type: Boolean,
-      default: false
-    }
-  }
-}
+defineProps({
+  disable: { type: Boolean, default: false },
+  productionId: { type: String, default: null },
+  taskId: { type: String, default: null },
+  taskType: { type: Object, default: null }
+})
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/cells/TimeSliderCell.vue b/src/components/cells/TimeSliderCell.vue
index c0148f98bd..15aae04bd4 100644
--- a/src/components/cells/TimeSliderCell.vue
+++ b/src/components/cells/TimeSliderCell.vue
@@ -29,91 +29,51 @@
   </td>
 </template>
 
-<script>
-import { mapGetters } from 'vuex'
+<script setup>
 import VueSlider from 'vue-3-slider-component'
+import { computed, ref, watch } from 'vue'
+import { useStore } from 'vuex'
 
-export default {
-  name: 'time-slider-cell',
+const store = useStore()
 
-  data() {
-    return {
-      value: this.duration,
-      marks: {
-        0: {
-          label: '0',
-          labelStyle: { fontSize: '.6em', top: '3px', left: '1px' }
-        },
-        2: { label: '' },
-        4: {
-          label: '4',
-          labelStyle: { fontSize: '.6em', top: '3px', left: '1px' }
-        },
-        6: { label: '' },
-        8: {
-          label: '8',
-          labelStyle: { fontSize: '.6em', top: '3px', left: '1px' }
-        },
-        10: { label: '' },
-        12: {
-          label: '12',
-          labelStyle: { fontSize: '.6em', top: '3px', left: '1px' }
-        }
-      }
-    }
-  },
+const props = defineProps({
+  duration: { type: Number, default: 0 },
+  taskId: { type: String, default: '' }
+})
 
-  components: {
-    VueSlider
-  },
+const emit = defineEmits(['change'])
 
-  props: {
-    taskId: {
-      type: String,
-      default: ''
-    },
-    duration: {
-      type: Number,
-      default: 0
-    }
-  },
-
-  emits: ['change'],
-
-  computed: {
-    ...mapGetters(['organisation']),
-
-    hoursByDay() {
-      return this.organisation.hours_by_day || 8
-    },
+const labelStyle = { fontSize: '.6em', top: '3px', left: '1px' }
+const marks = {
+  0: { label: '0', labelStyle },
+  2: { label: '' },
+  4: { label: '4', labelStyle },
+  6: { label: '' },
+  8: { label: '8', labelStyle },
+  10: { label: '' },
+  12: { label: '12', labelStyle }
+}
+const stepStyle = {
+  display: 'block',
+  borderRadius: 0,
+  height: '10px',
+  width: '4px',
+  top: '-1px',
+  backgroundColor: 'gray'
+}
 
-    stepStyle() {
-      return {
-        display: 'block',
-        borderRadius: 0,
-        height: '10px',
-        width: '4px',
-        top: '-1px',
-        backgroundColor: 'gray'
-      }
-    }
-  },
+const value = ref(props.duration)
 
-  methods: {
-    setValue(value) {
-      this.value = value || 0
-    }
-  },
+const organisation = computed(() => store.getters.organisation)
+const hoursByDay = computed(() => organisation.value.hours_by_day || 8)
 
-  watch: {
-    value() {
-      this.$emit('change', {
-        taskId: this.taskId,
-        duration: this.value
-      })
-    }
-  }
+const setValue = v => {
+  value.value = v || 0
 }
+
+watch(value, v => {
+  emit('change', { taskId: props.taskId, duration: v })
+})
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/cells/ValidationHeader.vue b/src/components/cells/ValidationHeader.vue
index 0039314e20..36c02048ca 100644
--- a/src/components/cells/ValidationHeader.vue
+++ b/src/components/cells/ValidationHeader.vue
@@ -41,90 +41,66 @@
   </th>
 </template>
 
-<script>
-import { mapGetters } from 'vuex'
+<script setup>
 import { ChevronDownIcon } from 'lucide-vue-next'
+import { computed } from 'vue'
+import { useStore } from 'vuex'
 
 import DepartmentName from '@/components/widgets/DepartmentName.vue'
 
-export default {
-  name: 'validation-header',
+const store = useStore()
 
-  components: {
-    ChevronDownIcon,
-    DepartmentName
-  },
+const props = defineProps({
+  columnId: { type: String, default: null },
+  hiddenColumns: { type: Object, default: () => ({}) },
+  isStick: { type: Boolean, default: false },
+  left: { type: String, default: null },
+  type: { type: String, default: 'assets' },
+  validationStyle: { type: Object, default: () => ({}) }
+})
 
-  props: {
-    hiddenColumns: Object,
-    columnId: String,
-    validationStyle: Object,
-    isStick: {
-      type: Boolean,
-      default: false
-    },
-    left: {
-      type: String
-    },
-    type: {
-      type: String,
-      default: 'assets'
-    }
-  },
-
-  emits: ['show-header-menu'],
+defineEmits(['show-header-menu'])
 
-  computed: {
-    ...mapGetters([
-      'currentEpisode',
-      'currentProduction',
-      'isCurrentUserClient',
-      'isTVShow',
-      'departmentMap',
-      'taskTypeMap'
-    ]),
+const currentEpisode = computed(() => store.getters.currentEpisode)
+const currentProduction = computed(() => store.getters.currentProduction)
+const departmentMap = computed(() => store.getters.departmentMap)
+const isCurrentUserClient = computed(() => store.getters.isCurrentUserClient)
+const isTVShow = computed(() => store.getters.isTVShow)
+const taskTypeMap = computed(() => store.getters.taskTypeMap)
 
-    currentDepartment() {
-      return this.departmentMap.get(this.currentTaskType.department_id)
-    },
+const currentTaskType = computed(
+  () => taskTypeMap.value.get(props.columnId) ?? {}
+)
 
-    currentTaskType() {
-      return this.taskTypeMap.get(this.columnId) ?? {}
-    },
+const currentDepartment = computed(() =>
+  departmentMap.value.get(currentTaskType.value.department_id)
+)
 
-    isHiddenColumn() {
-      return this.hiddenColumns[this.columnId]
-    }
-  },
-  methods: {
-    taskTypePath(taskTypeId) {
-      if (this.currentTaskType.for_entity === 'Episode') {
-        const route = {
-          name: 'episodes-task-type',
-          params: {
-            production_id: this.currentProduction.id,
-            task_type_id: taskTypeId
-          }
-        }
-        return route
-      } else {
-        const route = {
-          name: 'task-type',
-          params: {
-            production_id: this.currentProduction.id,
-            task_type_id: taskTypeId,
-            type: this.type
-          }
-        }
+const isHiddenColumn = computed(() => props.hiddenColumns[props.columnId])
 
-        if (this.isTVShow && this.currentEpisode) {
-          route.name = 'episode-task-type'
-          route.params.episode_id = this.currentEpisode.id
-        }
-        return route
+const taskTypePath = taskTypeId => {
+  if (currentTaskType.value.for_entity === 'Episode') {
+    return {
+      name: 'episodes-task-type',
+      params: {
+        production_id: currentProduction.value.id,
+        task_type_id: taskTypeId
       }
     }
   }
+  const route = {
+    name: 'task-type',
+    params: {
+      production_id: currentProduction.value.id,
+      task_type_id: taskTypeId,
+      type: props.type
+    }
+  }
+  if (isTVShow.value && currentEpisode.value) {
+    route.name = 'episode-task-type'
+    route.params.episode_id = currentEpisode.value.id
+  }
+  return route
 }
 </script>
 

From 0a4db79e444184567f963c926e31dba27b3c687e Mon Sep 17 00:00:00 2001
From: Frank Rousseau <frank@cg-wire.com>
Date: Fri, 1 May 2026 21:15:32 +0200
Subject: [PATCH 11/28] [composables] Add useFormat composable, migrate
 ValidationCell
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Extract the formatting helpers from formatListMixin into a Composition
API composable at src/composables/format.js. useFormat() returns
organisation, isDurationInHours, formatBoolean, formatDuration and
formatPriority (which need vue-i18n + the store) plus the pure
helpers, while formatDate / formatFullDate / formatSimpleDate /
formatPrioritySymbol / sanitizeInteger / sanitizeIntegerLight are also
exposed as plain named exports for callers that don't need to
instantiate the composable.

The legacy mixin in src/components/mixins/format.js stays in place —
its 27+ Options API consumers can migrate one at a time.

Use the new composable to migrate ValidationCell.vue to <script setup>
(it was the last cell still on Options API). Replace the dynamic
emit('select' or 'unselect') with explicit branches so vue's
no-unused-emit-declarations rule can see both events being used.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/components/cells/ValidationCell.vue | 366 +++++++++---------------
 src/composables/format.js               |  77 +++++
 2 files changed, 216 insertions(+), 227 deletions(-)
 create mode 100644 src/composables/format.js

diff --git a/src/components/cells/ValidationCell.vue b/src/components/cells/ValidationCell.vue
index 1394c7f957..2dbc2869b1 100644
--- a/src/components/cells/ValidationCell.vue
+++ b/src/components/cells/ValidationCell.vue
@@ -75,241 +75,153 @@
   </td>
 </template>
 
-<script>
-import { mapGetters } from 'vuex'
+<script setup>
 import { EyeIcon } from 'lucide-vue-next'
+import { computed, onMounted, ref, watch } from 'vue'
+import { useStore } from 'vuex'
 
+import { useFormat } from '@/composables/format'
 import colors from '@/lib/colors'
 import { sortPeople } from '@/lib/sorting'
-import { formatListMixin } from '@/components/mixins/format'
 
-export default {
-  name: 'validation-cell',
-
-  mixins: [formatListMixin],
-
-  data() {
-    return {
-      task: null
-    }
-  },
-
-  components: {
-    EyeIcon
-  },
-
-  props: {
-    column: {
-      default: null,
-      type: Object
-    },
-    entity: {
-      default: null,
-      type: Object
-    },
-    taskTest: {
-      default: null,
-      type: Object
-    },
-    isCastingReady: {
-      default: false,
-      type: Boolean
-    },
-    castingTitle: {
-      default: '',
-      type: String
-    },
-    isBorder: {
-      default: true,
-      type: Boolean
-    },
-    // FIXME: property no longer used in component
-    isStatic: {
-      default: false,
-      type: Boolean
-    },
-    isAssignees: {
-      default: true,
-      type: Boolean
-    },
-    minimized: {
-      default: false,
-      type: Boolean
-    },
-    selectable: {
-      default: true,
-      type: Boolean
-    },
-    clickable: {
-      default: true,
-      type: Boolean
-    },
-    selected: {
-      default: false,
-      type: Boolean
-    },
-    disabled: {
-      default: false,
-      type: Boolean
-    },
-    rowX: {
-      default: 0,
-      type: Number
-    },
-    columnY: {
-      default: 0,
-      type: Number
-    },
-    left: {
-      type: String,
-      default: '0px'
-    },
-    sticked: {
-      default: false,
-      type: Boolean
-    },
-    canceled: {
-      default: false,
-      type: Boolean
-    },
-    contactSheet: {
-      default: false,
-      type: Boolean
-    }
-  },
+const store = useStore()
+const { formatPriority, formatPrioritySymbol } = useFormat()
+
+const props = defineProps({
+  canceled: { type: Boolean, default: false },
+  castingTitle: { type: String, default: '' },
+  clickable: { type: Boolean, default: true },
+  column: { type: Object, default: null },
+  columnY: { type: Number, default: 0 },
+  contactSheet: { type: Boolean, default: false },
+  disabled: { type: Boolean, default: false },
+  entity: { type: Object, default: null },
+  isAssignees: { type: Boolean, default: true },
+  isBorder: { type: Boolean, default: true },
+  isCastingReady: { type: Boolean, default: false },
+  left: { type: String, default: '0px' },
+  minimized: { type: Boolean, default: false },
+  rowX: { type: Number, default: 0 },
+  selectable: { type: Boolean, default: true },
+  selected: { type: Boolean, default: false },
+  sticked: { type: Boolean, default: false },
+  taskTest: { type: Object, default: null }
+})
+
+const emit = defineEmits(['select', 'unselect'])
+
+const isCurrentUserClient = computed(() => store.getters.isCurrentUserClient)
+const isDarkTheme = computed(() => store.getters.isDarkTheme)
+const personMap = computed(() => store.getters.personMap)
+const taskMap = computed(() => store.getters.taskMap)
+const taskStatusMap = computed(() => store.getters.taskStatusMap)
+
+const task = ref(null)
+
+const resolveTask = () => {
+  if (props.taskTest) {
+    task.value = props.taskTest
+  } else if (props.column && props.entity?.validations) {
+    task.value = taskMap.value.get(
+      props.entity.validations.get(props.column.id)
+    )
+  }
+}
 
-  mounted() {
-    if (this.taskTest) {
-      this.task = this.taskTest
-    } else if (this.column && this.entity?.validations) {
-      this.task = this.taskMap.get(this.entity.validations.get(this.column.id))
-    }
-  },
-
-  computed: {
-    ...mapGetters([
-      'isCurrentUserClient',
-      'isDarkTheme',
-      'personMap',
-      'taskMap',
-      'taskStatusMap'
-    ]),
-
-    assignees() {
-      return sortPeople(
-        this.task?.assignees
-          .map(personId => this.personMap.get(personId))
-          .filter(Boolean) ?? []
-      )
-    },
-
-    priority() {
-      return this.formatPrioritySymbol(this.task.priority)
-    },
-
-    cellStyle() {
-      let backgroundColor
-      if (this.isBorder && !this.sticked) {
-        const opacity = this.isDarkTheme ? 0.15 : 0.08
-        backgroundColor = colors.hexToRGBa(this.column.color, opacity)
-      }
-
-      return {
-        borderLeft: this.isBorder ? `1px solid ${this.column.color}` : 'none',
-        backgroundColor: backgroundColor,
-        left: this.left
-      }
-    },
-
-    tagStyle() {
-      const isTodo = this.taskStatus.name === 'Todo'
-      let backgroundColor
-      if (isTodo) {
-        backgroundColor = this.isDarkTheme ? '#5F626A' : '#ECECEC'
-      } else if (this.taskStatus.color) {
-        backgroundColor = this.isDarkTheme
-          ? colors.darkenColor(this.taskStatus.color)
-          : this.taskStatus.color
-      } else {
-        backgroundColor = 'transparent'
-      }
-      const color = !isTodo || this.isDarkTheme ? 'white' : '#333'
-      return {
-        backgroundColor,
-        color
-      }
-    },
-
-    wrapperStyle() {
-      if (!this.task || !this.contactSheet) return {}
-      const path =
-        '/api/pictures/thumbnails/preview-files/' +
-        this.task.last_preview_file_id +
-        '.png'
-      return {
-        'background-image': 'url(' + path + ')',
-        'background-color': this.taskStatus.color + '44',
-        height: '100px',
-        width: '150px',
-        display: 'flex',
-        'flex-direction': this.contactSheet ? 'column' : 'row'
-      }
-    },
-
-    statusWrapperStyle() {
-      if (!this.task || !this.contactSheet)
-        return {
-          padding: '6px'
-        }
-      return {
-        width: '150px',
-        padding: '6px',
-        'text-align:': 'right'
-      }
-    },
-
-    taskStatus() {
-      const taskStatusId = this.task?.task_status_id
-      return this.taskStatusMap?.get(taskStatusId) || {}
-    }
-  },
-
-  methods: {
-    onClick(event) {
-      if (this.clickable) {
-        this.select(event)
-      }
-    },
-
-    select(event) {
-      if (!this.selectable) {
-        return
-      }
-      this.$emit(!this.selected ? 'select' : 'unselect', {
-        entity: this.entity,
-        column: this.column,
-        task: this.task,
-        x: this.rowX,
-        y: this.columnY,
-        isCtrlKey: event.ctrlKey || event.metaKey,
-        isShiftKey: event.shiftKey,
-        isUserClick: event.isUserClick !== false
-      })
-    }
-  },
-
-  watch: {
-    taskTest() {
-      if (this.taskTest) {
-        this.task = this.taskTest
-      } else if (this.entity?.validations) {
-        this.task = this.taskMap.get(
-          this.entity.validations.get(this.column.id)
-        )
-      }
-    }
+const taskStatus = computed(
+  () => taskStatusMap.value?.get(task.value?.task_status_id) || {}
+)
+
+const assignees = computed(() =>
+  sortPeople(
+    task.value?.assignees
+      .map(personId => personMap.value.get(personId))
+      .filter(Boolean) ?? []
+  )
+)
+
+const priority = computed(() => formatPrioritySymbol(task.value.priority))
+
+const cellStyle = computed(() => {
+  let backgroundColor
+  if (props.isBorder && !props.sticked) {
+    const opacity = isDarkTheme.value ? 0.15 : 0.08
+    backgroundColor = colors.hexToRGBa(props.column.color, opacity)
   }
+  return {
+    borderLeft: props.isBorder ? `1px solid ${props.column.color}` : 'none',
+    backgroundColor,
+    left: props.left
+  }
+})
+
+const tagStyle = computed(() => {
+  const isTodo = taskStatus.value.name === 'Todo'
+  let backgroundColor
+  if (isTodo) {
+    backgroundColor = isDarkTheme.value ? '#5F626A' : '#ECECEC'
+  } else if (taskStatus.value.color) {
+    backgroundColor = isDarkTheme.value
+      ? colors.darkenColor(taskStatus.value.color)
+      : taskStatus.value.color
+  } else {
+    backgroundColor = 'transparent'
+  }
+  const color = !isTodo || isDarkTheme.value ? 'white' : '#333'
+  return { backgroundColor, color }
+})
+
+const wrapperStyle = computed(() => {
+  if (!task.value || !props.contactSheet) return {}
+  const path =
+    '/api/pictures/thumbnails/preview-files/' +
+    task.value.last_preview_file_id +
+    '.png'
+  return {
+    'background-image': 'url(' + path + ')',
+    'background-color': taskStatus.value.color + '44',
+    height: '100px',
+    width: '150px',
+    display: 'flex',
+    'flex-direction': props.contactSheet ? 'column' : 'row'
+  }
+})
+
+const statusWrapperStyle = computed(() => {
+  if (!task.value || !props.contactSheet) return { padding: '6px' }
+  return {
+    width: '150px',
+    padding: '6px',
+    'text-align:': 'right'
+  }
+})
+
+const select = event => {
+  if (!props.selectable) return
+  const payload = {
+    entity: props.entity,
+    column: props.column,
+    task: task.value,
+    x: props.rowX,
+    y: props.columnY,
+    isCtrlKey: event.ctrlKey || event.metaKey,
+    isShiftKey: event.shiftKey,
+    isUserClick: event.isUserClick !== false
+  }
+  if (props.selected) {
+    emit('unselect', payload)
+  } else {
+    emit('select', payload)
+  }
+}
+
+const onClick = event => {
+  if (props.clickable) select(event)
 }
+
+watch(() => props.taskTest, resolveTask)
+
+onMounted(resolveTask)
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/composables/format.js b/src/composables/format.js
new file mode 100644
index 0000000000..75912b22f1
--- /dev/null
+++ b/src/composables/format.js
@@ -0,0 +1,77 @@
+/*
+ * Composition API counterpart of `src/components/mixins/format.js`.
+ * New `<script setup>` components should use `useFormat()` (or the
+ * pure-function named exports below). The legacy mixin stays in place
+ * so existing Options API components keep working — they can migrate
+ * one by one to this composable.
+ */
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useStore } from 'vuex'
+
+import {
+  formatDate,
+  formatDuration as libFormatDuration,
+  formatFullDate,
+  formatSimpleDate
+} from '@/lib/time'
+
+// Pure helpers — re-exported / defined here so callers that don't need
+// the reactive parts can import them directly without instantiating the
+// composable.
+
+export { formatDate, formatFullDate, formatSimpleDate }
+
+export const formatPrioritySymbol = priority => {
+  const clamped = Math.max(0, Math.min(priority, 3))
+  return '!'.repeat(clamped)
+}
+
+export const sanitizeInteger = value => {
+  if (typeof value !== 'string') return 0
+  const digits = value.replace(/\D/g, '')
+  return digits.length > 0 ? parseInt(digits) || 0 : 0
+}
+
+export const sanitizeIntegerLight = value => {
+  if (typeof value !== 'string') return null
+  const digits = value.replace(/\D/g, '')
+  return digits.length > 0 ? parseInt(digits) || null : null
+}
+
+export const useFormat = () => {
+  const { t } = useI18n()
+  const store = useStore()
+
+  const organisation = computed(() => store.getters.organisation)
+  const isDurationInHours = computed(
+    () => organisation.value.format_duration_in_hours
+  )
+
+  const formatBoolean = value => (value ? t('main.yes') : t('main.no'))
+
+  const formatDuration = (minutes, toLocale = true) =>
+    libFormatDuration(organisation.value, minutes, toLocale)
+
+  const formatPriority = priority => {
+    if (priority === 0) return 'normal'
+    if (priority === 1) return t('tasks.priority.high')
+    if (priority === 2) return t('tasks.priority.very_high')
+    if (priority === 3) return t('tasks.priority.emergency')
+    return String(priority)
+  }
+
+  return {
+    organisation,
+    isDurationInHours,
+    formatBoolean,
+    formatDate,
+    formatFullDate,
+    formatSimpleDate,
+    formatDuration,
+    formatPriority,
+    formatPrioritySymbol,
+    sanitizeInteger,
+    sanitizeIntegerLight
+  }
+}

From ded4b9f9c367ca5517af506c3efddfdd0e7298c2 Mon Sep 17 00:00:00 2001
From: Frank Rousseau <frank@cg-wire.com>
Date: Fri, 1 May 2026 21:34:46 +0200
Subject: [PATCH 12/28] [modals] Convert BaseModal-using modals to Composition
 API
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Convert the five modals that already wrap their content in
<base-modal> but still mixed in modalMixin: EditHardwareItemModal,
EditSoftwareLicenseModal, EditBudgetModal, EditBudgetEntryModal,
NotifyClientModal.

Drop modalMixin from all five — BaseModal already drives Escape via
useModal, so the mixin was actually adding a second window-level
keydown listener that emitted 'cancel' a second time on each Escape.
Convert each component to <script setup> with section comments,
defineProps with typed defaults, store getters via useStore, and the
existing watchers / lifecycle / template refs preserved.

Two small cleanups picked up along the way:
- EditBudgetEntryModal had a refreshKeys: { endMonth: 0 } reactivity
  hack (read once inside the endMonth computed but never written
  anywhere) — pure dead code, dropped.
- NotifyClientModal had ref="studioField" / ref="departmentField"
  declared on combobox fields but never accessed in the script —
  vestigial, dropped.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../modals/EditBudgetEntryModal.vue           | 402 ++++++++----------
 src/components/modals/EditBudgetModal.vue     | 170 +++-----
 .../modals/EditHardwareItemModal.vue          | 174 ++++----
 .../modals/EditSoftwareLicenseModal.vue       | 182 ++++----
 src/components/modals/NotifyClientModal.vue   | 129 +++---
 5 files changed, 450 insertions(+), 607 deletions(-)

diff --git a/src/components/modals/EditBudgetEntryModal.vue b/src/components/modals/EditBudgetEntryModal.vue
index 1eb3abf5cc..b3b4f518e9 100644
--- a/src/components/modals/EditBudgetEntryModal.vue
+++ b/src/components/modals/EditBudgetEntryModal.vue
@@ -98,242 +98,198 @@
   </base-modal>
 </template>
 
-<script>
+<script setup>
 import moment from 'moment'
-import { mapGetters } from 'vuex'
+import { computed, nextTick, onMounted, ref, watch } from 'vue'
+import { useStore } from 'vuex'
 
-import { modalMixin } from '@/components/modals/base_modal'
-
-import { parseSimpleDate, formatSimpleDate } from '@/lib/time'
+import { formatSimpleDate, parseSimpleDate } from '@/lib/time'
 
 import BaseModal from '@/components/modals/BaseModal.vue'
+import ModalFooter from '@/components/modals/ModalFooter.vue'
 import Combobox from '@/components/widgets/Combobox.vue'
 import ComboboxDepartment from '@/components/widgets/ComboboxDepartment.vue'
-import ModalFooter from '@/components/modals/ModalFooter.vue'
 import MonthField from '@/components/widgets/MonthField.vue'
 import PeopleField from '@/components/widgets/PeopleField.vue'
 import TextField from '@/components/widgets/TextField.vue'
 
-export default {
-  name: 'edit-budget-entry-modal',
-
-  mixins: [modalMixin],
-
-  components: {
-    BaseModal,
-    Combobox,
-    ComboboxDepartment,
-    ModalFooter,
-    MonthField,
-    PeopleField,
-    TextField
-  },
-
-  props: {
-    active: {
-      type: Boolean,
-      default: false
-    },
-    budgetEntryToEdit: {
-      type: Object,
-      default: () => {}
-    },
-    isError: {
-      type: Boolean,
-      default: false
-    },
-    isLoading: {
-      type: Boolean,
-      default: false
-    },
-    salaryScale: {
-      type: Object,
-      default: () => {}
-    }
-  },
-
-  emits: ['cancel', 'confirm'],
-
-  data() {
-    return {
-      form: {
-        department_id: '',
-        person: null,
-        position: 'artist',
-        seniority: 'junior',
-        start_date: null,
-        months_duration: 1
-      },
-      positionOptions: [
-        { label: 'artist', value: 'artist' },
-        { label: 'supervisor', value: 'supervisor' },
-        { label: 'lead', value: 'lead' }
-      ],
-      refreshKeys: {
-        endMonth: 0
-      },
-      seniorityOptions: [
-        { label: 'junior', value: 'junior' },
-        { label: 'mid', value: 'mid' },
-        { label: 'senior', value: 'senior' }
-      ]
-    }
-  },
-
-  mounted() {
-    this.resetForm()
-  },
-
-  computed: {
-    ...mapGetters(['activePeople', 'currentProduction', 'personMap']),
-
-    isDisabled() {
-      return !this.form.department_id || this.form.months_duration < 1
-    },
-
-    isEditing() {
-      return this.budgetEntryToEdit && this.budgetEntryToEdit.id
-    },
-
-    projectStartDate() {
-      return parseSimpleDate(this.currentProduction.start_date).toDate()
-    },
-
-    projectEndDate() {
-      return parseSimpleDate(this.currentProduction.end_date).toDate()
-    },
-
-    endMonth() {
-      this.refreshKeys.endMonth
-      const startDate = parseSimpleDate(this.form.start_date)
-      const projectEndDate = parseSimpleDate(this.currentProduction.end_date)
-      let endDate = startDate.add(this.form.months_duration, 'months')
-      endDate = moment.min(endDate, projectEndDate)
-      return endDate.format('YYYY-MM')
-    },
-
-    dailySalary() {
-      if (!this.form.department_id) {
-        return 0
-      } else if (!this.form.person || !this.form.person.daily_salary) {
-        const departmentScale = this.salaryScale[this.form.department_id]
-        return departmentScale[this.form.position || 'artist'][
-          this.form.seniority || 'junior'
-        ].salary
-      } else {
-        return this.form.person.daily_salary
-      }
-    },
-
-    monthlySalary() {
-      return this.dailySalary * 20
-    },
-
-    totalSalary() {
-      if (!this.form.department_id) {
-        return 0
-      } else {
-        const duration = Math.min(this.form.months_duration, this.maxDuration)
-        return this.monthlySalary * duration
-      }
-    },
-
-    maxDuration() {
-      const startDate = parseSimpleDate(this.form.start_date)
-      const projectEndDate = parseSimpleDate(
-        this.currentProduction.end_date
-      ).endOf('month')
-      const maxDuration = projectEndDate.diff(startDate, 'months')
-      return maxDuration > 0 ? maxDuration : 1
-    },
-
-    departmentPeople() {
-      if (this.form.department_id) {
-        return this.activePeople.filter(person =>
-          person.departments.includes(this.form.department_id)
-        )
-      } else {
-        return this.activePeople
-      }
-    }
-  },
-
-  methods: {
-    runConfirmation() {
-      this.$emit('confirm', {
-        ...this.form,
-        person_id: this.form.person?.id,
-        duration: Math.min(this.form.months_duration, this.maxDuration),
-        salary: this.monthlySalary,
-        total_salary: this.totalSalary
-      })
-    },
-
-    onPersonChanged(person) {
-      this.form.position = person?.position || 'artist'
-      this.form.seniority = person?.seniority || 'junior'
-    },
-
-    formatDate(date) {
-      return formatSimpleDate(date)
-    },
-
-    resetForm() {
-      if (this.isEditing) {
-        const person = this.personMap.get(this.budgetEntryToEdit.person_id)
-        Object.assign(this.form, {
-          id: this.budgetEntryToEdit.id,
-          department_id: this.budgetEntryToEdit.department_id,
-          person,
-          position: this.budgetEntryToEdit.position || 'artist',
-          seniority: this.budgetEntryToEdit.seniority || 'junior',
-          start_date: parseSimpleDate(
-            this.budgetEntryToEdit.start_date
-          ).toDate(),
-          months_duration: this.budgetEntryToEdit.months_duration,
-          daily_salary: this.budgetEntryToEdit.daily_salary
-        })
-        this.form.person = person
-        // Needed to bypass watcher
-        this.$nextTick(() => {
-          this.form.daily_salary = this.budgetEntryToEdit.daily_salary
-        })
-      } else {
-        this.form = {
-          id: null,
-          department_id: '',
-          person: null,
-          position: 'artist',
-          seniority: 'junior',
-          start_date: parseSimpleDate(this.currentProduction.start_date)
-            .startOf('month')
-            .toDate(),
-          months_duration: 1,
-          daily_salary: 0
-        }
-      }
-    }
-  },
-
-  watch: {
-    active() {
-      if (this.active) {
-        this.resetForm()
-        setTimeout(() => {
-          this.$refs.departmentField.focus()
-        }, 100)
-      }
-    },
-
-    dailySalary() {
-      this.form.daily_salary = this.dailySalary
-    },
-
-    budgetEntryToEdit() {
-      this.resetForm()
+const store = useStore()
+
+// Props / Emits
+
+const props = defineProps({
+  active: { type: Boolean, default: false },
+  budgetEntryToEdit: { type: Object, default: () => ({}) },
+  isError: { type: Boolean, default: false },
+  isLoading: { type: Boolean, default: false },
+  salaryScale: { type: Object, default: () => ({}) }
+})
+
+const emit = defineEmits(['cancel', 'confirm'])
+
+// State
+
+const form = ref({
+  department_id: '',
+  person: null,
+  position: 'artist',
+  seniority: 'junior',
+  start_date: null,
+  months_duration: 1
+})
+const departmentField = ref(null)
+
+const positionOptions = [
+  { label: 'artist', value: 'artist' },
+  { label: 'supervisor', value: 'supervisor' },
+  { label: 'lead', value: 'lead' }
+]
+const seniorityOptions = [
+  { label: 'junior', value: 'junior' },
+  { label: 'mid', value: 'mid' },
+  { label: 'senior', value: 'senior' }
+]
+
+// Computed
+
+const activePeople = computed(() => store.getters.activePeople)
+const currentProduction = computed(() => store.getters.currentProduction)
+const personMap = computed(() => store.getters.personMap)
+
+const isEditing = computed(() => Boolean(props.budgetEntryToEdit?.id))
+
+const isDisabled = computed(
+  () => !form.value.department_id || form.value.months_duration < 1
+)
+
+const projectStartDate = computed(() =>
+  parseSimpleDate(currentProduction.value.start_date).toDate()
+)
+
+const projectEndDate = computed(() =>
+  parseSimpleDate(currentProduction.value.end_date).toDate()
+)
+
+const maxDuration = computed(() => {
+  const startDate = parseSimpleDate(form.value.start_date)
+  const end = parseSimpleDate(currentProduction.value.end_date).endOf('month')
+  const months = end.diff(startDate, 'months')
+  return months > 0 ? months : 1
+})
+
+const endMonth = computed(() => {
+  const startDate = parseSimpleDate(form.value.start_date)
+  const projectEnd = parseSimpleDate(currentProduction.value.end_date)
+  const endDate = moment.min(
+    startDate.add(form.value.months_duration, 'months'),
+    projectEnd
+  )
+  return endDate.format('YYYY-MM')
+})
+
+const dailySalary = computed(() => {
+  if (!form.value.department_id) return 0
+  if (!form.value.person || !form.value.person.daily_salary) {
+    const departmentScale = props.salaryScale[form.value.department_id]
+    return departmentScale[form.value.position || 'artist'][
+      form.value.seniority || 'junior'
+    ].salary
+  }
+  return form.value.person.daily_salary
+})
+
+const monthlySalary = computed(() => dailySalary.value * 20)
+
+const totalSalary = computed(() => {
+  if (!form.value.department_id) return 0
+  const duration = Math.min(form.value.months_duration, maxDuration.value)
+  return monthlySalary.value * duration
+})
+
+const departmentPeople = computed(() => {
+  if (!form.value.department_id) return activePeople.value
+  return activePeople.value.filter(person =>
+    person.departments.includes(form.value.department_id)
+  )
+})
+
+// Functions
+
+const formatDate = date => formatSimpleDate(date)
+
+const onPersonChanged = person => {
+  form.value.position = person?.position || 'artist'
+  form.value.seniority = person?.seniority || 'junior'
+}
+
+const runConfirmation = () => {
+  emit('confirm', {
+    ...form.value,
+    person_id: form.value.person?.id,
+    duration: Math.min(form.value.months_duration, maxDuration.value),
+    salary: monthlySalary.value,
+    total_salary: totalSalary.value
+  })
+}
+
+const resetForm = () => {
+  if (isEditing.value) {
+    const entry = props.budgetEntryToEdit
+    const person = personMap.value.get(entry.person_id)
+    Object.assign(form.value, {
+      id: entry.id,
+      department_id: entry.department_id,
+      person,
+      position: entry.position || 'artist',
+      seniority: entry.seniority || 'junior',
+      start_date: parseSimpleDate(entry.start_date).toDate(),
+      months_duration: entry.months_duration,
+      daily_salary: entry.daily_salary
+    })
+    form.value.person = person
+    // Needed to bypass watcher
+    nextTick(() => {
+      form.value.daily_salary = entry.daily_salary
+    })
+  } else {
+    form.value = {
+      id: null,
+      department_id: '',
+      person: null,
+      position: 'artist',
+      seniority: 'junior',
+      start_date: parseSimpleDate(currentProduction.value.start_date)
+        .startOf('month')
+        .toDate(),
+      months_duration: 1,
+      daily_salary: 0
     }
   }
 }
+
+// Watchers
+
+watch(
+  () => props.active,
+  active => {
+    if (active) {
+      resetForm()
+      setTimeout(() => {
+        departmentField.value?.focus()
+      }, 100)
+    }
+  }
+)
+
+watch(dailySalary, value => {
+  form.value.daily_salary = value
+})
+
+watch(() => props.budgetEntryToEdit, resetForm)
+
+// Lifecycle
+
+onMounted(resetForm)
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/modals/EditBudgetModal.vue b/src/components/modals/EditBudgetModal.vue
index 32e0593d96..16632b7794 100644
--- a/src/components/modals/EditBudgetModal.vue
+++ b/src/components/modals/EditBudgetModal.vue
@@ -37,119 +37,89 @@
   </base-modal>
 </template>
 
-<script>
-import { modalMixin } from '@/components/modals/base_modal'
+<script setup>
+import { computed, ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
 
 import BaseModal from '@/components/modals/BaseModal.vue'
-import Combobox from '@/components/widgets/Combobox.vue'
 import ModalFooter from '@/components/modals/ModalFooter.vue'
+import Combobox from '@/components/widgets/Combobox.vue'
 import TextField from '@/components/widgets/TextField.vue'
 
-export default {
-  name: 'edit-budget-modal',
-
-  mixins: [modalMixin],
-
-  components: {
-    BaseModal,
-    Combobox,
-    ModalFooter,
-    TextField
-  },
-
-  props: {
-    active: {
-      type: Boolean,
-      default: false
-    },
-    isError: {
-      type: Boolean,
-      default: false
-    },
-    isLoading: {
-      type: Boolean,
-      default: false
-    },
-    budgetToEdit: {
-      type: Object,
-      default: () => {}
-    },
-    lastRevision: {
-      type: Number,
-      default: 0
-    }
-  },
-
-  emits: ['cancel', 'confirm'],
-
-  data() {
-    return {
-      form: {
-        name: '',
-        currency: 'USD'
-      },
-      currencieOptions: [
-        { label: 'USD', value: 'USD' },
-        { label: 'EUR', value: 'EUR' },
-        { label: 'GBP', value: 'GBP' },
-        { label: 'CAD', value: 'CAD' },
-        { label: 'AUD', value: 'AUD' },
-        { label: 'CHF', value: 'CHF' },
-        { label: 'JPY', value: 'JPY' },
-        { label: 'CNY', value: 'CNY' },
-        { label: 'INR', value: 'INR' }
-      ]
-    }
-  },
+const { t } = useI18n()
 
-  computed: {
-    isDisabled() {
-      return this.form.name.length === 0
-    },
+// Props / Emits
 
-    isEditing() {
-      return this.budgetToEdit && this.budgetToEdit.id
-    },
+const props = defineProps({
+  active: { type: Boolean, default: false },
+  budgetToEdit: { type: Object, default: () => ({}) },
+  isError: { type: Boolean, default: false },
+  isLoading: { type: Boolean, default: false },
+  lastRevision: { type: Number, default: 0 }
+})
 
-    modalTitle() {
-      return this.isEditing
-        ? this.$t('budget.edit_budget')
-        : this.$t('budget.create_budget')
-    }
-  },
+const emit = defineEmits(['cancel', 'confirm'])
+
+// State
+
+const form = ref({ name: '', currency: 'USD' })
+const nameField = ref(null)
+
+const currencieOptions = [
+  { label: 'USD', value: 'USD' },
+  { label: 'EUR', value: 'EUR' },
+  { label: 'GBP', value: 'GBP' },
+  { label: 'CAD', value: 'CAD' },
+  { label: 'AUD', value: 'AUD' },
+  { label: 'CHF', value: 'CHF' },
+  { label: 'JPY', value: 'JPY' },
+  { label: 'CNY', value: 'CNY' },
+  { label: 'INR', value: 'INR' }
+]
+
+// Computed
+
+const isDisabled = computed(() => form.value.name.length === 0)
 
-  methods: {
-    runConfirmation() {
-      this.$emit('confirm', this.form)
+const isEditing = computed(() => Boolean(props.budgetToEdit?.id))
+
+const modalTitle = computed(() =>
+  isEditing.value ? t('budget.edit_budget') : t('budget.create_budget')
+)
+
+// Functions
+
+const runConfirmation = () => {
+  emit('confirm', form.value)
+}
+
+// Watchers
+
+watch(
+  () => props.active,
+  active => {
+    if (active) {
+      setTimeout(() => {
+        nameField.value?.focus()
+      }, 100)
     }
-  },
-
-  watch: {
-    active() {
-      if (this.active) {
-        setTimeout(() => {
-          this.$refs.nameField.focus()
-        }, 100)
-      }
-    },
-
-    budgetToEdit() {
-      if (this.budgetToEdit.id) {
-        this.form = {
-          id: this.budgetToEdit.id,
-          name: this.budgetToEdit.name,
-          currency: this.budgetToEdit.currency || 'USD'
-        }
-      } else {
-        this.form = {
-          id: null,
-          name: '',
-          currency: 'USD'
-        }
+  }
+)
+
+watch(
+  () => props.budgetToEdit,
+  budget => {
+    if (budget?.id) {
+      form.value = {
+        id: budget.id,
+        name: budget.name,
+        currency: budget.currency || 'USD'
       }
+    } else {
+      form.value = { id: null, name: '', currency: 'USD' }
     }
   }
-}
+)
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/modals/EditHardwareItemModal.vue b/src/components/modals/EditHardwareItemModal.vue
index 36656381a0..4d2d00cb4b 100644
--- a/src/components/modals/EditHardwareItemModal.vue
+++ b/src/components/modals/EditHardwareItemModal.vue
@@ -48,117 +48,91 @@
   </base-modal>
 </template>
 
-<script>
-import { mapActions } from 'vuex'
-import { modalMixin } from '@/components/modals/base_modal'
+<script setup>
+import { computed, onMounted, ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useStore } from 'vuex'
 
 import BaseModal from '@/components/modals/BaseModal.vue'
-import ComboboxBoolean from '@/components/widgets/ComboboxBoolean.vue'
 import ModalFooter from '@/components/modals/ModalFooter.vue'
+import ComboboxBoolean from '@/components/widgets/ComboboxBoolean.vue'
 import TextField from '@/components/widgets/TextField.vue'
 
-export default {
-  name: 'edit-hardware-item-modal',
-
-  mixins: [modalMixin],
-
-  components: {
-    BaseModal,
-    ComboboxBoolean,
-    ModalFooter,
-    TextField
-  },
-
-  props: {
-    active: {
-      type: Boolean,
-      default: false
-    },
-    isError: {
-      type: Boolean,
-      default: false
-    },
-    isLoading: {
-      type: Boolean,
-      default: false
-    },
-    hardwareItemToEdit: {
-      type: Object,
-      default: () => {}
-    }
-  },
+const { t } = useI18n()
+const store = useStore()
 
-  emits: ['cancel', 'confirm'],
+// Props / Emits
 
-  data() {
-    return {
-      form: {
-        name: '',
-        archived: 'false'
-      }
-    }
-  },
-
-  mounted() {
-    this.loadHardwareItems()
-  },
-
-  computed: {
-    isEditing() {
-      return Boolean(this.hardwareItemToEdit?.id)
-    },
-
-    modalTitle() {
-      return this.isEditing
-        ? this.$t('hardware_items.edit_title') +
-            ' ' +
-            this.hardwareItemToEdit.name
-        : this.$t('hardware_items.new_hardware_item')
-    }
-  },
-
-  methods: {
-    ...mapActions(['loadHardwareItems']),
-
-    runConfirmation() {
-      this.$emit('confirm', this.form)
-    },
-
-    resetForm() {
-      if (this.hardwareItemToEdit.id) {
-        this.form = {
-          name: this.hardwareItemToEdit.name,
-          short_name: this.hardwareItemToEdit.short_name,
-          monthly_cost: this.hardwareItemToEdit.monthly_cost,
-          inventory_amount: this.hardwareItemToEdit.inventory_amount,
-          archived: String(this.hardwareItemToEdit.archived === true)
-        }
-      } else {
-        this.form = {
-          name: '',
-          short_name: '',
-          monthly_cost: 0,
-          inventory_amount: 0,
-          archived: 'false'
-        }
-      }
+const props = defineProps({
+  active: { type: Boolean, default: false },
+  hardwareItemToEdit: { type: Object, default: () => ({}) },
+  isError: { type: Boolean, default: false },
+  isLoading: { type: Boolean, default: false }
+})
+
+const emit = defineEmits(['cancel', 'confirm'])
+
+// State
+
+const form = ref({ name: '', archived: 'false' })
+const nameField = ref(null)
+
+// Computed
+
+const isEditing = computed(() => Boolean(props.hardwareItemToEdit?.id))
+
+const modalTitle = computed(() =>
+  isEditing.value
+    ? t('hardware_items.edit_title') + ' ' + props.hardwareItemToEdit.name
+    : t('hardware_items.new_hardware_item')
+)
+
+// Functions
+
+const runConfirmation = () => {
+  emit('confirm', form.value)
+}
+
+const resetForm = () => {
+  if (props.hardwareItemToEdit.id) {
+    form.value = {
+      name: props.hardwareItemToEdit.name,
+      short_name: props.hardwareItemToEdit.short_name,
+      monthly_cost: props.hardwareItemToEdit.monthly_cost,
+      inventory_amount: props.hardwareItemToEdit.inventory_amount,
+      archived: String(props.hardwareItemToEdit.archived === true)
     }
-  },
-
-  watch: {
-    active() {
-      if (this.active) {
-        setTimeout(() => {
-          this.$refs.nameField?.focus()
-        }, 100)
-      }
-    },
-
-    hardwareItemToEdit() {
-      this.resetForm()
+  } else {
+    form.value = {
+      name: '',
+      short_name: '',
+      monthly_cost: 0,
+      inventory_amount: 0,
+      archived: 'false'
     }
   }
 }
+
+// Watchers
+
+watch(
+  () => props.active,
+  active => {
+    if (active) {
+      setTimeout(() => {
+        nameField.value?.focus()
+      }, 100)
+    }
+  }
+)
+
+watch(() => props.hardwareItemToEdit, resetForm)
+
+// Lifecycle
+
+onMounted(() => {
+  store.dispatch('loadHardwareItems')
+})
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/modals/EditSoftwareLicenseModal.vue b/src/components/modals/EditSoftwareLicenseModal.vue
index 1f83284206..c2750d6ab8 100644
--- a/src/components/modals/EditSoftwareLicenseModal.vue
+++ b/src/components/modals/EditSoftwareLicenseModal.vue
@@ -60,121 +60,95 @@
   </base-modal>
 </template>
 
-<script>
-import { mapActions } from 'vuex'
-import { modalMixin } from '@/components/modals/base_modal'
+<script setup>
+import { computed, onMounted, ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useStore } from 'vuex'
 
 import BaseModal from '@/components/modals/BaseModal.vue'
-import ComboboxBoolean from '@/components/widgets/ComboboxBoolean.vue'
 import ModalFooter from '@/components/modals/ModalFooter.vue'
+import ComboboxBoolean from '@/components/widgets/ComboboxBoolean.vue'
 import TextField from '@/components/widgets/TextField.vue'
 
-export default {
-  name: 'edit-software-license-modal',
-
-  mixins: [modalMixin],
-
-  components: {
-    BaseModal,
-    ComboboxBoolean,
-    ModalFooter,
-    TextField
-  },
-
-  props: {
-    active: {
-      type: Boolean,
-      default: false
-    },
-    isError: {
-      type: Boolean,
-      default: false
-    },
-    isLoading: {
-      type: Boolean,
-      default: false
-    },
-    softwareLicenseToEdit: {
-      type: Object,
-      default: () => {}
-    }
-  },
+const { t } = useI18n()
+const store = useStore()
 
-  emits: ['cancel', 'confirm'],
+// Props / Emits
 
-  data() {
-    return {
-      form: {
-        name: '',
-        archived: 'false'
-      }
-    }
-  },
-
-  mounted() {
-    this.loadSoftwareLicenses()
-  },
-
-  computed: {
-    isEditing() {
-      return Boolean(this.softwareLicenseToEdit?.id)
-    },
-
-    modalTitle() {
-      return this.isEditing
-        ? this.$t('software_licenses.edit_title') +
-            ' ' +
-            this.softwareLicenseToEdit.name
-        : this.$t('software_licenses.new_software_license')
-    }
-  },
-
-  methods: {
-    ...mapActions(['loadSoftwareLicenses']),
-
-    runConfirmation() {
-      this.$emit('confirm', this.form)
-    },
-
-    resetForm() {
-      if (this.softwareLicenseToEdit.id) {
-        this.form = {
-          name: this.softwareLicenseToEdit.name,
-          short_name: this.softwareLicenseToEdit.short_name,
-          file_extension: this.softwareLicenseToEdit.file_extension,
-          version: this.softwareLicenseToEdit.version,
-          monthly_cost: this.softwareLicenseToEdit.monthly_cost,
-          inventory_amount: this.softwareLicenseToEdit.inventory_amount,
-          archived: String(this.softwareLicenseToEdit.archived === true)
-        }
-      } else {
-        this.form = {
-          name: '',
-          short_name: '',
-          file_extension: '',
-          version: '',
-          monthly_cost: 0,
-          inventory_amount: 0,
-          archived: 'false'
-        }
-      }
+const props = defineProps({
+  active: { type: Boolean, default: false },
+  isError: { type: Boolean, default: false },
+  isLoading: { type: Boolean, default: false },
+  softwareLicenseToEdit: { type: Object, default: () => ({}) }
+})
+
+const emit = defineEmits(['cancel', 'confirm'])
+
+// State
+
+const form = ref({ name: '', archived: 'false' })
+const nameField = ref(null)
+
+// Computed
+
+const isEditing = computed(() => Boolean(props.softwareLicenseToEdit?.id))
+
+const modalTitle = computed(() =>
+  isEditing.value
+    ? t('software_licenses.edit_title') + ' ' + props.softwareLicenseToEdit.name
+    : t('software_licenses.new_software_license')
+)
+
+// Functions
+
+const runConfirmation = () => {
+  emit('confirm', form.value)
+}
+
+const resetForm = () => {
+  if (props.softwareLicenseToEdit.id) {
+    form.value = {
+      name: props.softwareLicenseToEdit.name,
+      short_name: props.softwareLicenseToEdit.short_name,
+      file_extension: props.softwareLicenseToEdit.file_extension,
+      version: props.softwareLicenseToEdit.version,
+      monthly_cost: props.softwareLicenseToEdit.monthly_cost,
+      inventory_amount: props.softwareLicenseToEdit.inventory_amount,
+      archived: String(props.softwareLicenseToEdit.archived === true)
     }
-  },
-
-  watch: {
-    active() {
-      if (this.active) {
-        setTimeout(() => {
-          this.$refs.nameField?.focus()
-        }, 100)
-      }
-    },
-
-    softwareLicenseToEdit() {
-      this.resetForm()
+  } else {
+    form.value = {
+      name: '',
+      short_name: '',
+      file_extension: '',
+      version: '',
+      monthly_cost: 0,
+      inventory_amount: 0,
+      archived: 'false'
     }
   }
 }
+
+// Watchers
+
+watch(
+  () => props.active,
+  active => {
+    if (active) {
+      setTimeout(() => {
+        nameField.value?.focus()
+      }, 100)
+    }
+  }
+)
+
+watch(() => props.softwareLicenseToEdit, resetForm)
+
+// Lifecycle
+
+onMounted(() => {
+  store.dispatch('loadSoftwareLicenses')
+})
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/modals/NotifyClientModal.vue b/src/components/modals/NotifyClientModal.vue
index 48f6581e3b..75ff4c3b35 100644
--- a/src/components/modals/NotifyClientModal.vue
+++ b/src/components/modals/NotifyClientModal.vue
@@ -10,7 +10,6 @@
 
     <combobox-studio
       class="mt1 mb1"
-      ref="studioField"
       all-studios-label
       :label="$t('main.studio')"
       v-model="form.studio_id"
@@ -18,7 +17,6 @@
 
     <combobox-department
       class="mt1 mb1"
-      ref="departmentField"
       all-departments-label
       :label="$t('people.fields.departments')"
       v-model="form.department_id"
@@ -56,90 +54,61 @@
   </base-modal>
 </template>
 
-<script>
-import { mapGetters } from 'vuex'
-
-import { modalMixin } from '@/components/modals/base_modal'
+<script setup>
+import { computed, ref } from 'vue'
+import { useStore } from 'vuex'
 
 import BaseModal from '@/components/modals/BaseModal.vue'
+import ModalFooter from '@/components/modals/ModalFooter.vue'
 import ComboboxDepartment from '@/components/widgets/ComboboxDepartment.vue'
 import ComboboxStudio from '@/components/widgets/ComboboxStudio.vue'
-import ModalFooter from '@/components/modals/ModalFooter.vue'
 import PeopleAvatar from '@/components/widgets/PeopleAvatar.vue'
 import PeopleName from '@/components/widgets/PeopleName.vue'
 
-export default {
-  name: 'notify-client-modal',
-
-  mixins: [modalMixin],
-
-  components: {
-    BaseModal,
-    ComboboxDepartment,
-    ComboboxStudio,
-    ModalFooter,
-    PeopleAvatar,
-    PeopleName
-  },
-
-  props: {
-    active: {
-      type: Boolean,
-      default: false
-    },
-    isError: {
-      type: Boolean,
-      default: false
-    },
-    isLoading: {
-      type: Boolean,
-      default: false
-    },
-    isSuccess: {
-      type: Boolean,
-      default: false
-    }
-  },
-
-  emits: ['cancel', 'confirm'],
-
-  data() {
-    return {
-      form: {
-        studio_id: '',
-        department_id: ''
-      }
-    }
-  },
-
-  computed: {
-    ...mapGetters(['currentProduction', 'personMap']),
-
-    clients() {
-      return this.currentProduction.team
-        .map(personId => this.personMap.get(personId))
-        .filter(person => person?.role === 'client')
-        .filter(
-          person =>
-            !this.form.studio_id || person.studio_id === this.form.studio_id
-        )
-        .filter(
-          person =>
-            !this.form.department_id ||
-            (person.departments &&
-              person.departments.includes(this.form.department_id))
-        )
-        .sort((a, b) => (a.full_name || '').localeCompare(b.full_name || ''))
-    }
-  },
-
-  methods: {
-    runConfirmation() {
-      this.$emit('confirm', {
-        studio_id: this.form.studio_id,
-        department_id: this.form.department_id
-      })
-    }
-  }
+const store = useStore()
+
+// Props / Emits
+
+defineProps({
+  active: { type: Boolean, default: false },
+  isError: { type: Boolean, default: false },
+  isLoading: { type: Boolean, default: false },
+  isSuccess: { type: Boolean, default: false }
+})
+
+const emit = defineEmits(['cancel', 'confirm'])
+
+// State
+
+const form = ref({ studio_id: '', department_id: '' })
+
+// Computed
+
+const currentProduction = computed(() => store.getters.currentProduction)
+const personMap = computed(() => store.getters.personMap)
+
+const clients = computed(() =>
+  currentProduction.value.team
+    .map(personId => personMap.value.get(personId))
+    .filter(person => person?.role === 'client')
+    .filter(
+      person =>
+        !form.value.studio_id || person.studio_id === form.value.studio_id
+    )
+    .filter(
+      person =>
+        !form.value.department_id ||
+        person.departments?.includes(form.value.department_id)
+    )
+    .sort((a, b) => (a.full_name || '').localeCompare(b.full_name || ''))
+)
+
+// Functions
+
+const runConfirmation = () => {
+  emit('confirm', {
+    studio_id: form.value.studio_id,
+    department_id: form.value.department_id
+  })
 }
 </script>

From c499d92dc4e502a2a8b1a4e7dd51a569ba53e3be Mon Sep 17 00:00:00 2001
From: Frank Rousseau <frank@cg-wire.com>
Date: Fri, 1 May 2026 21:47:56 +0200
Subject: [PATCH 13/28] [modals] Convert small admin-edit modals to Composition
 API

Convert four small modals from Options API: ConfirmModal,
EditDepartmentsModal, EditLabelModal, EditMilestoneModal. Drop
modalMixin from each.

ConfirmModal keeps its custom modal markup (no title bar, just text +
buttons) and uses useModal(toRef(props, 'active'), emit) directly.
The other three switch to wrapping their content in <base-modal>,
collapsing the duplicated v-if/v-else <h1> blocks into a single
:title computed.

CSS cleanup: drop the dead .error rule on EditLabelModal (the class
isn't used anywhere in the template), and the entire scoped style
block on EditDepartmentsModal (.modal-content .box p.text and
.is-danger never matched anything in the original markup either, and
scoped styles can't reach into <base-modal> now anyway).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/components/modals/ConfirmModal.vue        |  46 ++--
 .../modals/EditDepartmentsModal.vue           | 216 +++++++----------
 src/components/modals/EditLabelModal.vue      | 174 ++++++--------
 src/components/modals/EditMilestoneModal.vue  | 217 ++++++++----------
 4 files changed, 262 insertions(+), 391 deletions(-)

diff --git a/src/components/modals/ConfirmModal.vue b/src/components/modals/ConfirmModal.vue
index ead967b30e..fff4c4b5ba 100644
--- a/src/components/modals/ConfirmModal.vue
+++ b/src/components/modals/ConfirmModal.vue
@@ -29,43 +29,23 @@
   </div>
 </template>
 
-<script>
-import { modalMixin } from '@/components/modals/base_modal'
+<script setup>
+import { toRef } from 'vue'
 
-export default {
-  name: 'confirm-modal',
+import { useModal } from '@/composables/modal'
 
-  mixins: [modalMixin],
+const props = defineProps({
+  active: { type: Boolean, default: false },
+  confirmButtonText: { type: String, default: '' },
+  errorText: { type: String, default: '' },
+  isError: { type: Boolean, default: false },
+  isLoading: { type: Boolean, default: false },
+  text: { type: String, required: true }
+})
 
-  props: {
-    text: {
-      required: true,
-      type: String
-    },
-    active: {
-      default: false,
-      type: Boolean
-    },
-    isLoading: {
-      default: false,
-      type: Boolean
-    },
-    isError: {
-      default: false,
-      type: Boolean
-    },
-    errorText: {
-      default: '',
-      type: String
-    },
-    confirmButtonText: {
-      default: '',
-      type: String
-    }
-  },
+const emit = defineEmits(['cancel', 'confirm'])
 
-  emits: ['cancel', 'confirm']
-}
+useModal(toRef(props, 'active'), emit)
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/modals/EditDepartmentsModal.vue b/src/components/modals/EditDepartmentsModal.vue
index 456e84d151..9d5d0c9a8f 100644
--- a/src/components/modals/EditDepartmentsModal.vue
+++ b/src/components/modals/EditDepartmentsModal.vue
@@ -1,146 +1,104 @@
 <template>
-  <div class="modal" :class="{ 'is-active': active }">
-    <div class="modal-background" @click="$emit('cancel')"></div>
-    <div class="modal-content">
-      <div class="box">
-        <h1 class="title" v-if="isEditing">
-          {{ $t('departments.edit_title') }} {{ departmentToEdit.name }}
-        </h1>
-        <h1 class="title" v-else>
-          {{ $t('departments.new_departments') }}
-        </h1>
-        <form @submit.prevent>
-          <text-field
-            ref="nameField"
-            :label="$t('departments.fields.name')"
-            :maxlength="30"
-            v-model="form.name"
-            v-focus
-          />
-          <color-field
-            :label="$t('departments.fields.color')"
-            v-model="form.color"
-          />
-          <combobox-boolean
-            :label="$t('main.archived')"
-            @enter="runConfirmation"
-            v-model="form.archived"
-            v-if="isEditing"
-          />
-        </form>
-        <modal-footer
-          :error-text="$t('departments.create_error')"
-          :is-error="isError"
-          :is-loading="isLoading"
-          @confirm="runConfirmation"
-          @cancel="$emit('cancel')"
-        />
-      </div>
-    </div>
-  </div>
+  <base-modal :active="active" :title="modalTitle" @cancel="$emit('cancel')">
+    <form @submit.prevent>
+      <text-field
+        ref="nameField"
+        :label="$t('departments.fields.name')"
+        :maxlength="30"
+        v-model="form.name"
+        v-focus
+      />
+      <color-field
+        :label="$t('departments.fields.color')"
+        v-model="form.color"
+      />
+      <combobox-boolean
+        :label="$t('main.archived')"
+        @enter="runConfirmation"
+        v-model="form.archived"
+        v-if="isEditing"
+      />
+    </form>
+    <modal-footer
+      :error-text="$t('departments.create_error')"
+      :is-error="isError"
+      :is-loading="isLoading"
+      @confirm="runConfirmation"
+      @cancel="$emit('cancel')"
+    />
+  </base-modal>
 </template>
 
-<script>
-import { modalMixin } from '@/components/modals/base_modal'
+<script setup>
+import { computed, ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
 
+import BaseModal from '@/components/modals/BaseModal.vue'
+import ModalFooter from '@/components/modals/ModalFooter.vue'
 import ColorField from '@/components/widgets/ColorField.vue'
 import ComboboxBoolean from '@/components/widgets/ComboboxBoolean.vue'
-import ModalFooter from '@/components/modals/ModalFooter.vue'
 import TextField from '@/components/widgets/TextField.vue'
 
-export default {
-  name: 'edit-departments-modal',
-
-  mixins: [modalMixin],
-
-  components: {
-    ColorField,
-    ComboboxBoolean,
-    ModalFooter,
-    TextField
-  },
-
-  props: {
-    active: {
-      type: Boolean,
-      default: false
-    },
-    isError: {
-      type: Boolean,
-      default: false
-    },
-    isLoading: {
-      type: Boolean,
-      default: false
-    },
-    departmentToEdit: {
-      type: Object,
-      default: () => {}
-    }
-  },
+const { t } = useI18n()
 
-  emits: ['cancel', 'confirm'],
+// Props / Emits
 
-  data() {
-    return {
-      form: {
-        id: null,
-        name: '',
-        color: '',
-        archived: 'false'
-      }
-    }
-  },
+const props = defineProps({
+  active: { type: Boolean, default: false },
+  departmentToEdit: { type: Object, default: () => ({}) },
+  isError: { type: Boolean, default: false },
+  isLoading: { type: Boolean, default: false }
+})
 
-  computed: {
-    isEditing() {
-      return this.departmentToEdit?.id
-    }
-  },
+const emit = defineEmits(['cancel', 'confirm'])
+
+// State
+
+const form = ref({ id: null, name: '', color: '', archived: 'false' })
+const nameField = ref(null)
+
+// Computed
+
+const isEditing = computed(() => Boolean(props.departmentToEdit?.id))
+
+const modalTitle = computed(() =>
+  isEditing.value
+    ? `${t('departments.edit_title')} ${props.departmentToEdit.name}`
+    : t('departments.new_departments')
+)
+
+// Functions
 
-  methods: {
-    runConfirmation() {
-      this.$emit('confirm', this.form)
+const runConfirmation = () => {
+  emit('confirm', form.value)
+}
+
+// Watchers
+
+watch(
+  () => props.active,
+  active => {
+    if (active) {
+      setTimeout(() => {
+        nameField.value?.focus()
+      }, 100)
     }
-  },
-
-  watch: {
-    active() {
-      if (this.active) {
-        setTimeout(() => {
-          this.$refs.nameField.focus()
-        }, 100)
-      }
-    },
-
-    departmentToEdit() {
-      if (this.isEditing) {
-        this.form = {
-          id: this.departmentToEdit.id,
-          name: this.departmentToEdit.name,
-          color: this.departmentToEdit.color,
-          archived: String(this.departmentToEdit.archived === true)
-        }
-      } else {
-        this.form = {
-          id: null,
-          name: '',
-          color: '',
-          archived: 'false'
-        }
+  }
+)
+
+watch(
+  () => props.departmentToEdit,
+  department => {
+    if (department?.id) {
+      form.value = {
+        id: department.id,
+        name: department.name,
+        color: department.color,
+        archived: String(department.archived === true)
       }
+    } else {
+      form.value = { id: null, name: '', color: '', archived: 'false' }
     }
   }
-}
+)
 </script>
-
-<style lang="scss" scoped>
-.modal-content .box p.text {
-  margin-bottom: 1em;
-}
-
-.is-danger {
-  color: #ff3860;
-  font-style: italic;
-}
-</style>
diff --git a/src/components/modals/EditLabelModal.vue b/src/components/modals/EditLabelModal.vue
index 2ce5c3d13a..2f2a887bf0 100644
--- a/src/components/modals/EditLabelModal.vue
+++ b/src/components/modals/EditLabelModal.vue
@@ -1,114 +1,78 @@
 <template>
-  <div
-    :class="{
-      modal: true,
-      'is-active': active
-    }"
+  <base-modal
+    :active="active"
+    :title="$t('breakdown.edit_label')"
+    @cancel="$emit('cancel')"
   >
-    <div class="modal-background" @click="$emit('cancel')"></div>
-
-    <div class="modal-content">
-      <div class="box content">
-        <h1 class="title">
-          {{ $t('breakdown.edit_label') }}
-        </h1>
-
-        <form @submit.prevent>
-          <combobox
-            ref="typeField"
-            :label="$t('breakdown.label')"
-            :options="typeOptions"
-            @enter="confirm"
-            v-model="form.label"
-            v-focus
-          />
-
-          <modal-footer
-            :is-error="isError"
-            :is-loading="isLoading"
-            @confirm="confirm"
-            @cancel="$emit('cancel')"
-          />
-        </form>
-      </div>
-    </div>
-  </div>
+    <form @submit.prevent>
+      <combobox
+        :label="$t('breakdown.label')"
+        :options="typeOptions"
+        @enter="confirm"
+        v-model="form.label"
+        v-focus
+      />
+
+      <modal-footer
+        :is-error="isError"
+        :is-loading="isLoading"
+        @confirm="confirm"
+        @cancel="$emit('cancel')"
+      />
+    </form>
+  </base-modal>
 </template>
 
-<script>
-import { modalMixin } from '@/components/modals/base_modal'
+<script setup>
+import { computed, onMounted, ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
 
-import Combobox from '@/components/widgets/Combobox.vue'
+import BaseModal from '@/components/modals/BaseModal.vue'
 import ModalFooter from '@/components/modals/ModalFooter.vue'
+import Combobox from '@/components/widgets/Combobox.vue'
 
-export default {
-  name: 'edit-label-modal',
-
-  mixins: [modalMixin],
-
-  components: {
-    Combobox,
-    ModalFooter
-  },
-
-  props: {
-    active: {
-      type: Boolean,
-      default: false
-    },
-    isError: {
-      type: Boolean,
-      default: false
-    },
-    isLoading: {
-      type: Boolean,
-      default: false
-    },
-    label: {
-      type: String
-    }
-  },
-
-  emits: ['cancel', 'confirm'],
-
-  mounted() {
-    this.form.label = this.label
-  },
-
-  data() {
-    return {
-      form: {
-        label: 'animate'
-      },
-      typeOptions: [
-        {
-          label: this.$t('breakdown.options.animate'),
-          value: 'animate'
-        },
-        {
-          label: this.$t('breakdown.options.fixed'),
-          value: 'fixed'
-        }
-      ]
-    }
-  },
-
-  methods: {
-    confirm() {
-      return this.$emit('confirm', this.form)
-    }
-  },
-
-  watch: {
-    label() {
-      this.form.label = this.label
-    }
-  }
-}
-</script>
+const { t } = useI18n()
+
+// Props / Emits
+
+const props = defineProps({
+  active: { type: Boolean, default: false },
+  isError: { type: Boolean, default: false },
+  isLoading: { type: Boolean, default: false },
+  label: { type: String, default: 'animate' }
+})
+
+const emit = defineEmits(['cancel', 'confirm'])
+
+// State
 
-<style lang="scss" scoped>
-.error {
-  margin-top: 1em;
+const form = ref({ label: 'animate' })
+
+// Computed
+
+const typeOptions = computed(() => [
+  { label: t('breakdown.options.animate'), value: 'animate' },
+  { label: t('breakdown.options.fixed'), value: 'fixed' }
+])
+
+// Functions
+
+const confirm = () => {
+  emit('confirm', form.value)
 }
-</style>
+
+// Watchers
+
+watch(
+  () => props.label,
+  label => {
+    form.value.label = label
+  }
+)
+
+// Lifecycle
+
+onMounted(() => {
+  form.value.label = props.label
+})
+</script>
diff --git a/src/components/modals/EditMilestoneModal.vue b/src/components/modals/EditMilestoneModal.vue
index 1bdfc231d0..b7c68169ec 100644
--- a/src/components/modals/EditMilestoneModal.vue
+++ b/src/components/modals/EditMilestoneModal.vue
@@ -1,139 +1,108 @@
 <template>
-  <div
-    :class="{
-      modal: true,
-      'is-active': active
-    }"
-  >
-    <div class="modal-background" @click="$emit('cancel')"></div>
-
-    <div class="modal-content">
-      <div class="box content">
-        <h1 class="title" v-if="!isEdit">
-          {{ $t('schedule.milestone.add_milestone') }}:
-          {{ milestoneToEdit.date.format('YYYY-MM-DD') }}
-        </h1>
-        <h1 class="title" v-else>
-          {{ $t('schedule.milestone.edit_milestone') }}:
-          {{ milestoneToEdit.date.format('YYYY-MM-DD') }}
-        </h1>
-        <text-field
-          ref="nameField"
-          :label="$t('schedule.milestone.name')"
-          :maxlength="40"
-          v-model.trim="form.name"
-          @enter="confirm"
-          v-focus
-        />
-        <button-simple
-          class="button is-link error"
-          :text="$t('schedule.milestone.delete_milestone')"
-          @click="$emit('remove-milestone', milestoneToEdit)"
-          v-if="isEdit"
-        />
-        <modal-footer
-          :error-text="$t('schedule.milestone.error')"
-          :is-error="isError"
-          :is-loading="isLoading"
-          :is-disabled="!isFormFilled"
-          @confirm="confirm"
-          @cancel="$emit('cancel')"
-        />
-      </div>
-    </div>
-  </div>
+  <base-modal :active="active" :title="modalTitle" @cancel="$emit('cancel')">
+    <text-field
+      ref="nameField"
+      :label="$t('schedule.milestone.name')"
+      :maxlength="40"
+      v-model.trim="form.name"
+      @enter="confirm"
+      v-focus
+    />
+    <button-simple
+      class="button is-link error"
+      :text="$t('schedule.milestone.delete_milestone')"
+      @click="$emit('remove-milestone', milestoneToEdit)"
+      v-if="isEdit"
+    />
+    <modal-footer
+      :error-text="$t('schedule.milestone.error')"
+      :is-error="isError"
+      :is-loading="isLoading"
+      :is-disabled="!isFormFilled"
+      @confirm="confirm"
+      @cancel="$emit('cancel')"
+    />
+  </base-modal>
 </template>
 
-<script>
+<script setup>
 /*
  * Modal used to edit and create milestones.
  */
-import { modalMixin } from '@/components/modals/base_modal'
+import { computed, nextTick, onMounted, ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
 
-import ButtonSimple from '@/components/widgets/ButtonSimple.vue'
+import BaseModal from '@/components/modals/BaseModal.vue'
 import ModalFooter from '@/components/modals/ModalFooter.vue'
+import ButtonSimple from '@/components/widgets/ButtonSimple.vue'
 import TextField from '@/components/widgets/TextField.vue'
 
-export default {
-  name: 'edit-milestone-modal',
-
-  mixins: [modalMixin],
-
-  components: {
-    ButtonSimple,
-    ModalFooter,
-    TextField
-  },
-
-  props: {
-    active: {
-      type: Boolean,
-      default: false
-    },
-    milestoneToEdit: {
-      type: Object,
-      default: () => {}
-    },
-    isLoading: {
-      type: Boolean,
-      default: false
-    },
-    isError: {
-      type: Boolean,
-      default: false
-    }
-  },
+const { t } = useI18n()
 
-  emits: ['cancel', 'confirm', 'remove-milestone'],
+// Props / Emits
 
-  data() {
-    return {
-      form: {
-        name: ''
-      }
-    }
-  },
-
-  mounted() {
-    this.reset()
-    this.$nextTick(() => {
-      this.$refs.nameField.focus()
-    })
-  },
-
-  computed: {
-    isEdit() {
-      return this.milestoneToEdit.id !== undefined
-    },
-
-    isFormFilled() {
-      return this.form.name.length > 0
-    }
-  },
-
-  methods: {
-    confirm() {
-      return this.$emit('confirm', this.form)
-    },
-
-    reset() {
-      this.form = {
-        id: this.milestoneToEdit.id || undefined,
-        name: this.milestoneToEdit.name || '',
-        date: this.milestoneToEdit.date
-      }
-    }
-  },
-
-  watch: {
-    active() {
-      if (this.active) {
-        this.reset()
-        setTimeout(() => {
-          this.$refs.nameField.focus()
-        }, 1000)
-      }
-    }
+const props = defineProps({
+  active: { type: Boolean, default: false },
+  isError: { type: Boolean, default: false },
+  isLoading: { type: Boolean, default: false },
+  milestoneToEdit: { type: Object, default: () => ({}) }
+})
+
+const emit = defineEmits(['cancel', 'confirm', 'remove-milestone'])
+
+// State
+
+const form = ref({ name: '' })
+const nameField = ref(null)
+
+// Computed
+
+const isEdit = computed(() => props.milestoneToEdit.id !== undefined)
+
+const isFormFilled = computed(() => form.value.name.length > 0)
+
+const modalTitle = computed(() => {
+  const dateStr = props.milestoneToEdit.date?.format('YYYY-MM-DD') ?? ''
+  const prefix = isEdit.value
+    ? t('schedule.milestone.edit_milestone')
+    : t('schedule.milestone.add_milestone')
+  return `${prefix}: ${dateStr}`
+})
+
+// Functions
+
+const confirm = () => {
+  emit('confirm', form.value)
+}
+
+const reset = () => {
+  form.value = {
+    id: props.milestoneToEdit.id || undefined,
+    name: props.milestoneToEdit.name || '',
+    date: props.milestoneToEdit.date
   }
 }
+
+// Watchers
+
+watch(
+  () => props.active,
+  active => {
+    if (active) {
+      reset()
+      setTimeout(() => {
+        nameField.value?.focus()
+      }, 1000)
+    }
+  }
+)
+
+// Lifecycle
+
+onMounted(() => {
+  reset()
+  nextTick(() => {
+    nameField.value?.focus()
+  })
+})
 </script>

From 1dd1a198adb9ff726205398894949df0fc22e702 Mon Sep 17 00:00:00 2001
From: Frank Rousseau <frank@cg-wire.com>
Date: Fri, 1 May 2026 21:50:06 +0200
Subject: [PATCH 14/28] [modals] Drop dead CSS in BaseModal-using modals

Audit the scoped styles on the five modals migrated to BaseModal in
the previous batch. Three of them carried selectors that no longer
match anything: scoped styles can't reach into <base-modal>'s
.modal-content / .box, and the .is-danger / .task-types / p.text
markup hooks weren't actually used in the original templates either.

- EditHardwareItemModal: drop the entire <style> block
  (.modal-content .box p.text and .is-danger were both dead).
- EditSoftwareLicenseModal: drop the entire <style> block (same
  two rules plus an unused .task-types).
- EditBudgetModal: drop only .modal-content .box p.text; keep the
  live .revision-number rule that styles the v{n} number.

EditBudgetEntryModal and NotifyClientModal had no dead CSS.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/components/modals/EditBudgetModal.vue         |  4 ----
 src/components/modals/EditHardwareItemModal.vue   | 11 -----------
 .../modals/EditSoftwareLicenseModal.vue           | 15 ---------------
 3 files changed, 30 deletions(-)

diff --git a/src/components/modals/EditBudgetModal.vue b/src/components/modals/EditBudgetModal.vue
index 16632b7794..0261ce89b3 100644
--- a/src/components/modals/EditBudgetModal.vue
+++ b/src/components/modals/EditBudgetModal.vue
@@ -123,10 +123,6 @@ watch(
 </script>
 
 <style lang="scss" scoped>
-.modal-content .box p.text {
-  margin-bottom: 1em;
-}
-
 .revision-number {
   font-size: 1.4rem;
   font-weight: bold;
diff --git a/src/components/modals/EditHardwareItemModal.vue b/src/components/modals/EditHardwareItemModal.vue
index 4d2d00cb4b..892e4f8eaf 100644
--- a/src/components/modals/EditHardwareItemModal.vue
+++ b/src/components/modals/EditHardwareItemModal.vue
@@ -134,14 +134,3 @@ onMounted(() => {
   store.dispatch('loadHardwareItems')
 })
 </script>
-
-<style lang="scss" scoped>
-.modal-content .box p.text {
-  margin-bottom: 1em;
-}
-
-.is-danger {
-  color: #ff3860;
-  font-style: italic;
-}
-</style>
diff --git a/src/components/modals/EditSoftwareLicenseModal.vue b/src/components/modals/EditSoftwareLicenseModal.vue
index c2750d6ab8..98098203b7 100644
--- a/src/components/modals/EditSoftwareLicenseModal.vue
+++ b/src/components/modals/EditSoftwareLicenseModal.vue
@@ -150,18 +150,3 @@ onMounted(() => {
   store.dispatch('loadSoftwareLicenses')
 })
 </script>
-
-<style lang="scss" scoped>
-.modal-content .box p.text {
-  margin-bottom: 1em;
-}
-
-.is-danger {
-  color: #ff3860;
-  font-style: italic;
-}
-
-.task-types {
-  flex-wrap: wrap;
-}
-</style>

From c9714db1970cd873f6c5e57f3f9d39fdf577fe46 Mon Sep 17 00:00:00 2001
From: Frank Rousseau <frank@cg-wire.com>
Date: Fri, 1 May 2026 22:34:44 +0200
Subject: [PATCH 15/28] [modals] Convert asset-type / background / episode /
 sequence modals
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Convert four edit modals from Options API: EditAssetTypeModal,
EditBackgroundModal, EditEpisodeModal, EditSequenceModal. Each
switches to wrapping its content in <base-modal> with a single
:title computed (collapsing the duplicated v-if/v-else <h1>) and
drops modalMixin.

Cleanups picked up along the way:
- EditAssetTypeModal: drop the unused loadTaskTypes mapped action,
  the unused assetTypes / assetTypeStatusOptions getters, and the
  ref="shortNameField" that wasn't accessed; pull the inline
  @update:model-value handler into a named addTaskType helper.
- EditBackgroundModal: bind ref="fileUpload" properly so resetForm
  can call .reset() on it; eslint-disable no-unused-vars on the
  FileUpload import to work around the vue-eslint-parser false
  positive (same as the earlier DepartmentList case).
- EditEpisodeModal / EditSequenceModal: drop the duplicated form
  initialization that was happening in both data() and resetForm —
  keep only the schema and let resetForm populate it.
- EditEpisodeModal: drop unused episodeSuccessText state and three
  unused template refs (descriptionField, resolutionField,
  nameField — v-focus already auto-focuses on mount).
- EditSequenceModal: same — drop sequenceSuccessText and three
  unused refs; flatten the runConfirmation → confirmClicked
  indirection.
- All four: drop dead CSS rules (.modal-content .box p.text,
  .is-danger, .info-message — none matched anything in the
  templates and scoped styles can't reach into <base-modal>).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/components/modals/EditAssetTypeModal.vue  | 377 ++++++++----------
 src/components/modals/EditBackgroundModal.vue | 291 ++++++--------
 src/components/modals/EditEpisodeModal.vue    | 337 +++++++---------
 src/components/modals/EditSequenceModal.vue   | 308 ++++++--------
 4 files changed, 534 insertions(+), 779 deletions(-)

diff --git a/src/components/modals/EditAssetTypeModal.vue b/src/components/modals/EditAssetTypeModal.vue
index 326a632661..c39c791df9 100644
--- a/src/components/modals/EditAssetTypeModal.vue
+++ b/src/components/modals/EditAssetTypeModal.vue
@@ -1,244 +1,191 @@
 <template>
-  <div
-    :class="{
-      modal: true,
-      'is-active': active
-    }"
-  >
-    <div class="modal-background" @click="$emit('cancel')"></div>
-
-    <div class="modal-content">
-      <div class="box">
-        <h1 class="title" v-if="assetTypeToEdit && assetTypeToEdit.id">
-          {{ $t('asset_types.edit_title') }} {{ assetTypeToEdit.name }}
-        </h1>
-        <h1 class="title" v-else>
-          {{ $t('asset_types.new_asset_type') }}
-        </h1>
-
-        <form @submit.prevent>
-          <text-field
-            ref="nameField"
-            :label="$t('asset_types.fields.name')"
-            :maxlength="30"
-            v-model="form.name"
-            @enter="runConfirmation"
-            v-focus
+  <base-modal :active="active" :title="modalTitle" @cancel="$emit('cancel')">
+    <form @submit.prevent>
+      <text-field
+        ref="nameField"
+        :label="$t('asset_types.fields.name')"
+        :maxlength="30"
+        v-model="form.name"
+        @enter="runConfirmation"
+        v-focus
+      />
+      <text-field
+        :label="$t('asset_types.fields.short_name')"
+        :maxlength="30"
+        v-model="form.short_name"
+        @enter="runConfirmation"
+      />
+      <textarea-field
+        :label="$t('asset_types.fields.description')"
+        v-model="form.description"
+        @enter="runConfirmation"
+      />
+      <combobox-boolean
+        :label="$t('main.archived')"
+        @enter="runConfirmation"
+        v-model="form.archived"
+        v-if="isEditing"
+      />
+
+      <label class="label">
+        {{ $t('asset_types.fields.task_types') }}
+      </label>
+      <div class="flexrow task-types mb1">
+        <div
+          class="flexrow-item mb1"
+          :key="taskTypeId"
+          @click="removeTaskType(taskTypeId)"
+          v-for="taskTypeId in form.task_types"
+        >
+          <task-type-name
+            :task-type="taskTypeMap.get(taskTypeId)"
+            :deletable="true"
+            v-if="taskTypeId"
           />
-          <text-field
-            ref="shortNameField"
-            :label="$t('asset_types.fields.short_name')"
-            :maxlength="30"
-            v-model="form.short_name"
-            @enter="runConfirmation"
-          />
-          <textarea-field
-            :label="$t('asset_types.fields.description')"
-            v-model="form.description"
-            @enter="runConfirmation"
-          />
-          <combobox-boolean
-            :label="$t('main.archived')"
-            @enter="runConfirmation"
-            v-model="form.archived"
-            v-if="isEditing"
-          />
-
-          <label class="label">
-            {{ $t('asset_types.fields.task_types') }}
-          </label>
-          <div class="flexrow task-types mb1">
-            <div
-              class="flexrow-item mb1"
-              :key="taskTypeId"
-              @click="removeTaskType(taskTypeId)"
-              v-for="taskTypeId in form.task_types"
-            >
-              <task-type-name
-                :task-type="taskTypeMap.get(taskTypeId)"
-                :deletable="true"
-                v-if="taskTypeId"
-              />
-            </div>
-            <combobox
-              class="flexrow-item mb1"
-              :options="availableTaskTypes"
-              :with-margin="false"
-              @update:model-value="
-                id => {
-                  taskTypeMap.get(id) && form.task_types.push(id)
-                }
-              "
-              v-if="availableTaskTypes.length > 1"
-            />
-          </div>
-        </form>
-
-        <modal-footer
-          :error-text="$t('asset_types.create_error')"
-          :is-error="isError"
-          :is-loading="isLoading"
-          @confirm="runConfirmation"
-          @cancel="$emit('cancel')"
+        </div>
+        <combobox
+          class="flexrow-item mb1"
+          :options="availableTaskTypes"
+          :with-margin="false"
+          @update:model-value="addTaskType"
+          v-if="availableTaskTypes.length > 1"
         />
       </div>
-    </div>
-  </div>
+    </form>
+
+    <modal-footer
+      :error-text="$t('asset_types.create_error')"
+      :is-error="isError"
+      :is-loading="isLoading"
+      @confirm="runConfirmation"
+      @cancel="$emit('cancel')"
+    />
+  </base-modal>
 </template>
 
-<script>
-import { mapGetters, mapActions } from 'vuex'
-import { modalMixin } from '@/components/modals/base_modal'
+<script setup>
+import { computed, ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useStore } from 'vuex'
 
 import { sortByName } from '@/lib/sorting'
 
+import BaseModal from '@/components/modals/BaseModal.vue'
+import ModalFooter from '@/components/modals/ModalFooter.vue'
 import Combobox from '@/components/widgets/Combobox.vue'
 import ComboboxBoolean from '@/components/widgets/ComboboxBoolean.vue'
-import ModalFooter from '@/components/modals/ModalFooter.vue'
 import TaskTypeName from '@/components/widgets/TaskTypeName.vue'
-import TextareaField from '@/components/widgets/TextareaField.vue'
 import TextField from '@/components/widgets/TextField.vue'
+import TextareaField from '@/components/widgets/TextareaField.vue'
 
-export default {
-  name: 'edit-asset-type-modal',
-
-  mixins: [modalMixin],
-
-  components: {
-    Combobox,
-    ComboboxBoolean,
-    ModalFooter,
-    TaskTypeName,
-    TextareaField,
-    TextField
-  },
-
-  props: {
-    active: {
-      type: Boolean,
-      default: false
-    },
-    isError: {
-      type: Boolean,
-      default: false
-    },
-    isLoading: {
-      type: Boolean,
-      default: false
-    },
-    assetTypeToEdit: {
-      type: Object,
-      default: () => {}
-    }
-  },
-
-  emits: ['cancel', 'confirm'],
+const { t } = useI18n()
+const store = useStore()
+
+// Props / Emits
+
+const props = defineProps({
+  active: { type: Boolean, default: false },
+  assetTypeToEdit: { type: Object, default: () => ({}) },
+  isError: { type: Boolean, default: false },
+  isLoading: { type: Boolean, default: false }
+})
+
+const emit = defineEmits(['cancel', 'confirm'])
+
+// State
+
+const form = ref({
+  name: '',
+  short_name: '',
+  description: '',
+  task_types: []
+})
+const nameField = ref(null)
+
+// Computed
+
+const taskTypes = computed(() => store.getters.taskTypes)
+const taskTypeMap = computed(() => store.getters.taskTypeMap)
+
+const isEditing = computed(() => Boolean(props.assetTypeToEdit?.id))
+
+const modalTitle = computed(() =>
+  isEditing.value
+    ? `${t('asset_types.edit_title')} ${props.assetTypeToEdit.name}`
+    : t('asset_types.new_asset_type')
+)
+
+const availableTaskTypes = computed(() => {
+  const filtered = sortByName(
+    taskTypes.value.filter(
+      taskType =>
+        !form.value.task_types.includes(taskType.id) &&
+        taskType.for_entity === 'Asset'
+    )
+  )
+  return [
+    { name: t('task_types.add_task_type_placeholder'), id: '-' },
+    ...filtered
+  ].map(taskType => ({ label: taskType.name, value: taskType.id }))
+})
+
+// Functions
+
+const addTaskType = id => {
+  if (taskTypeMap.value.get(id)) {
+    form.value.task_types.push(id)
+  }
+}
 
-  data() {
-    return {
-      form: {
-        name: '',
-        short_name: '',
-        description: '',
-        task_types: []
-      }
-    }
-  },
-
-  computed: {
-    ...mapGetters([
-      'taskTypes',
-      'taskTypeMap',
-      'assetTypes',
-      'assetTypeStatusOptions'
-    ]),
-
-    isEditing() {
-      return this.assetTypeToEdit && this.assetTypeToEdit.id
-    },
-
-    availableTaskTypes() {
-      const taskTypes = sortByName(
-        this.taskTypes.filter(taskType => {
-          return (
-            this.form.task_types.indexOf(taskType.id) === -1 &&
-            taskType.for_entity === 'Asset'
-          )
-        })
-      )
-      return [
-        {
-          name: this.$t('task_types.add_task_type_placeholder'),
-          id: '-'
-        },
-        ...taskTypes
-      ].map(taskType => {
-        return {
-          label: taskType.name,
-          value: taskType.id
-        }
-      })
-    }
-  },
+const removeTaskType = idToRemove => {
+  const index = form.value.task_types.indexOf(idToRemove)
+  if (index >= 0) {
+    form.value.task_types.splice(index, 1)
+  }
+}
 
-  methods: {
-    ...mapActions(['loadTaskTypes']),
+const runConfirmation = () => {
+  emit('confirm', form.value)
+}
 
-    removeTaskType(idToRemove) {
-      const taskTypeIndex = this.form.task_types.indexOf(idToRemove)
-      if (taskTypeIndex >= 0) {
-        this.form.task_types.splice(taskTypeIndex, 1)
-      }
-    },
+// Watchers
 
-    runConfirmation() {
-      this.$emit('confirm', this.form)
+watch(
+  () => props.active,
+  active => {
+    if (active) {
+      setTimeout(() => {
+        nameField.value?.focus()
+      }, 100)
     }
-  },
-
-  watch: {
-    active() {
-      if (this.active) {
-        setTimeout(() => {
-          this.$refs.nameField.focus()
-        }, 100)
+  }
+)
+
+watch(
+  () => props.assetTypeToEdit,
+  assetType => {
+    if (assetType?.id) {
+      form.value = {
+        name: assetType.name,
+        short_name: assetType.short_name,
+        description: assetType.description,
+        task_types: [...(assetType.task_types || [])],
+        archived: String(assetType.archived === true)
       }
-    },
-
-    assetTypeToEdit() {
-      if (this.assetTypeToEdit.id) {
-        const types = this.assetTypeToEdit.task_types || []
-        this.form = {
-          name: this.assetTypeToEdit.name,
-          short_name: this.assetTypeToEdit.short_name,
-          description: this.assetTypeToEdit.description,
-          task_types: [...types],
-          archived: String(this.assetTypeToEdit.archived === true)
-        }
-      } else {
-        this.form = {
-          name: '',
-          short_name: '',
-          description: '',
-          task_types: [],
-          archived: 'false'
-        }
+    } else {
+      form.value = {
+        name: '',
+        short_name: '',
+        description: '',
+        task_types: [],
+        archived: 'false'
       }
     }
   }
-}
+)
 </script>
 
 <style lang="scss" scoped>
-.modal-content .box p.text {
-  margin-bottom: 1em;
-}
-
-.is-danger {
-  color: #ff3860;
-  font-style: italic;
-}
-
 .task-types {
   flex-wrap: wrap;
 }
diff --git a/src/components/modals/EditBackgroundModal.vue b/src/components/modals/EditBackgroundModal.vue
index f15ae58a09..0b7884caa3 100644
--- a/src/components/modals/EditBackgroundModal.vue
+++ b/src/components/modals/EditBackgroundModal.vue
@@ -1,182 +1,139 @@
 <template>
-  <div
-    :class="{
-      modal: true,
-      'is-active': active
-    }"
-  >
-    <div class="modal-background" @click="$emit('cancel')"></div>
-
-    <div class="modal-content">
-      <div class="box">
-        <h1 class="title" v-if="isEditing">
-          {{ $t('backgrounds.edit_background') }} {{ backgroundToEdit.name }}
-        </h1>
-        <h1 class="title" v-else>
-          {{ $t('backgrounds.new_background') }}
-        </h1>
-
-        <form @submit.prevent>
-          <div class="field" v-if="!isEditing">
-            <label class="label"> {{ $t('backgrounds.fields.file') }}</label>
-            <file-upload
-              ref="fileUpload"
-              :label="$t('main.select_file')"
-              accept=".hdr"
-              :is-primary="false"
-              @fileselected="onFileSelected"
-            />
-          </div>
-          <text-field
-            ref="nameField"
-            input-class="task-status-name"
-            :label="$t('backgrounds.fields.name')"
-            :maxlength="40"
-            @enter="confirmClicked"
-            v-model.trim="form.name"
-          />
-          <boolean-field
-            is-field
-            :label="$t('backgrounds.fields.is_default')"
-            @enter="confirmClicked"
-            v-model="form.is_default"
-          />
-          <combobox-boolean
-            :label="$t('main.archived')"
-            @enter="confirmClicked"
-            v-model="form.archived"
-            v-if="isEditing"
-          />
-        </form>
-
-        <modal-footer
-          :error-text="$t('backgrounds.create_error')"
-          :is-error="isError"
-          :is-loading="isLoading"
-          @confirm="confirmClicked"
-          @cancel="$emit('cancel')"
+  <base-modal :active="active" :title="modalTitle" @cancel="$emit('cancel')">
+    <form @submit.prevent>
+      <div class="field" v-if="!isEditing">
+        <label class="label">{{ $t('backgrounds.fields.file') }}</label>
+        <file-upload
+          ref="fileUpload"
+          :label="$t('main.select_file')"
+          accept=".hdr"
+          :is-primary="false"
+          @fileselected="onFileSelected"
         />
       </div>
-    </div>
-  </div>
+      <text-field
+        ref="nameField"
+        input-class="task-status-name"
+        :label="$t('backgrounds.fields.name')"
+        :maxlength="40"
+        @enter="confirmClicked"
+        v-model.trim="form.name"
+      />
+      <boolean-field
+        is-field
+        :label="$t('backgrounds.fields.is_default')"
+        @enter="confirmClicked"
+        v-model="form.is_default"
+      />
+      <combobox-boolean
+        :label="$t('main.archived')"
+        @enter="confirmClicked"
+        v-model="form.archived"
+        v-if="isEditing"
+      />
+    </form>
+
+    <modal-footer
+      :error-text="$t('backgrounds.create_error')"
+      :is-error="isError"
+      :is-loading="isLoading"
+      @confirm="confirmClicked"
+      @cancel="$emit('cancel')"
+    />
+  </base-modal>
 </template>
 
-<script>
-import { modalMixin } from '@/components/modals/base_modal'
+<script setup>
+import { computed, nextTick, ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
 
+import BaseModal from '@/components/modals/BaseModal.vue'
+import ModalFooter from '@/components/modals/ModalFooter.vue'
 import BooleanField from '@/components/widgets/BooleanField.vue'
 import ComboboxBoolean from '@/components/widgets/ComboboxBoolean.vue'
+// eslint-disable-next-line no-unused-vars
 import FileUpload from '@/components/widgets/FileUpload.vue'
-import ModalFooter from '@/components/modals/ModalFooter.vue'
 import TextField from '@/components/widgets/TextField.vue'
 
-export default {
-  name: 'edit-background-modal',
-
-  mixins: [modalMixin],
-
-  components: {
-    BooleanField,
-    ComboboxBoolean,
-    FileUpload,
-    ModalFooter,
-    TextField
-  },
-
-  props: {
-    active: {
-      type: Boolean,
-      default: false
-    },
-    isError: {
-      type: Boolean,
-      default: false
-    },
-    isLoading: {
-      type: Boolean,
-      default: false
-    },
-    backgroundToEdit: {
-      type: Object,
-      default: () => {}
-    }
-  },
-
-  emits: ['cancel', 'confirm'],
-
-  data() {
-    return {
-      form: {
-        file: null,
-        name: '',
-        is_default: 'false',
-        archived: 'false'
-      }
-    }
-  },
-
-  computed: {
-    isEditing() {
-      return this.backgroundToEdit?.id
-    }
-  },
-
-  methods: {
-    confirmClicked() {
-      if (!this.isEditing && !this.form.file) {
-        return
-      }
-      if (!this.form.name) {
-        this.$refs.nameField.focus()
-        return
-      }
-      this.$emit('confirm', {
-        ...this.form,
-        is_default: this.form.is_default === 'true',
-        archived: this.form.archived === 'true'
-      })
-    },
-
-    onFileSelected(formData) {
-      const file = formData.get('file')
-      this.form.file = formData
-      if (!this.form.name.length) {
-        this.form.name = file.name.slice(0, -4)
-      }
-      this.$nextTick(() => {
-        this.$refs.nameField?.focus()
-      })
-    },
-
-    resetForm() {
-      if (this.backgroundToEdit) {
-        this.form = {
-          file: null,
-          name: this.backgroundToEdit.name || '',
-          is_default: String(this.backgroundToEdit.is_default || false),
-          archived: String(this.backgroundToEdit.archived || false)
-        }
-        this.$refs.fileUpload?.reset()
-      }
-    }
-  },
-
-  watch: {
-    backgroundToEdit() {
-      this.resetForm()
-    },
-
-    active() {
-      if (this.active) {
-        this.resetForm()
-      }
-    }
+const { t } = useI18n()
+
+// Props / Emits
+
+const props = defineProps({
+  active: { type: Boolean, default: false },
+  backgroundToEdit: { type: Object, default: () => ({}) },
+  isError: { type: Boolean, default: false },
+  isLoading: { type: Boolean, default: false }
+})
+
+const emit = defineEmits(['cancel', 'confirm'])
+
+// State
+
+const form = ref({
+  file: null,
+  name: '',
+  is_default: 'false',
+  archived: 'false'
+})
+const nameField = ref(null)
+const fileUpload = ref(null)
+
+// Computed
+
+const isEditing = computed(() => Boolean(props.backgroundToEdit?.id))
+
+const modalTitle = computed(() =>
+  isEditing.value
+    ? `${t('backgrounds.edit_background')} ${props.backgroundToEdit.name}`
+    : t('backgrounds.new_background')
+)
+
+// Functions
+
+const confirmClicked = () => {
+  if (!isEditing.value && !form.value.file) return
+  if (!form.value.name) {
+    nameField.value?.focus()
+    return
   }
+  emit('confirm', {
+    ...form.value,
+    is_default: form.value.is_default === 'true',
+    archived: form.value.archived === 'true'
+  })
+}
+
+const onFileSelected = formData => {
+  const file = formData.get('file')
+  form.value.file = formData
+  if (!form.value.name.length) {
+    form.value.name = file.name.slice(0, -4)
+  }
+  nextTick(() => {
+    nameField.value?.focus()
+  })
 }
-</script>
 
-<style lang="scss" scoped>
-.modal-content .box p.text {
-  margin-bottom: 1em;
+const resetForm = () => {
+  if (!props.backgroundToEdit) return
+  form.value = {
+    file: null,
+    name: props.backgroundToEdit.name || '',
+    is_default: String(props.backgroundToEdit.is_default || false),
+    archived: String(props.backgroundToEdit.archived || false)
+  }
+  fileUpload.value?.reset()
 }
-</style>
+
+// Watchers
+
+watch(() => props.backgroundToEdit, resetForm)
+
+watch(
+  () => props.active,
+  active => {
+    if (active) resetForm()
+  }
+)
+</script>
diff --git a/src/components/modals/EditEpisodeModal.vue b/src/components/modals/EditEpisodeModal.vue
index 2b4dd3d1a5..59f3b7debd 100644
--- a/src/components/modals/EditEpisodeModal.vue
+++ b/src/components/modals/EditEpisodeModal.vue
@@ -1,223 +1,154 @@
 <template>
-  <div
-    :class="{
-      modal: true,
-      'is-active': active
-    }"
-  >
-    <div class="modal-background" @click="$emit('cancel')"></div>
-
-    <div class="modal-content">
-      <div class="box">
-        <h1 class="title" v-if="episodeToEdit && episodeToEdit.id">
-          {{ $t('episodes.edit_title') }} {{ episodeToEdit.name }}
-        </h1>
-        <h1 class="title" v-else>
-          {{ $t('episodes.new_episode') }}
-        </h1>
-
-        <form @submit.prevent>
-          <text-field
-            ref="nameField"
-            :label="$t('episodes.fields.name')"
-            :maxlength="160"
-            v-model.trim="form.name"
-            @enter="runConfirmation"
-            v-focus
-          />
-
-          <combobox-styled
-            class="field"
-            :label="$t('main.status')"
-            :options="episodeStatusOptions"
-            v-model="form.status"
-          />
-
-          <textarea-field
-            ref="descriptionField"
-            :label="$t('episodes.fields.description')"
-            @keyup.ctrl.enter="runConfirmation"
-            @keyup.meta.enter="runConfirmation"
-            v-model="form.description"
-          />
-
-          <text-field
-            ref="resolutionField"
-            :label="$t('shots.fields.resolution')"
-            :placeholder="currentProduction?.resolution"
-            v-model.trim="form.data.resolution"
-            @enter="runConfirmation"
-          />
-
-          <template v-if="episodeToEdit">
-            <metadata-field
-              :key="descriptor.id"
-              :descriptor="descriptor"
-              :entity="episodeToEdit"
-              @enter="runConfirmation"
-              v-model="form.data[descriptor.field_name]"
-              v-for="descriptor in episodeMetadataDescriptors"
-            />
-          </template>
-        </form>
-
-        <modal-footer
-          :error-text="$t('episodes.edit_error')"
-          :is-loading="isLoading"
-          :is-error="isError"
-          @confirm="runConfirmation"
-          @cancel="$emit('cancel')"
+  <base-modal :active="active" :title="modalTitle" @cancel="$emit('cancel')">
+    <form @submit.prevent>
+      <text-field
+        :label="$t('episodes.fields.name')"
+        :maxlength="160"
+        v-model.trim="form.name"
+        @enter="runConfirmation"
+        v-focus
+      />
+
+      <combobox-styled
+        class="field"
+        :label="$t('main.status')"
+        :options="episodeStatusOptions"
+        v-model="form.status"
+      />
+
+      <textarea-field
+        :label="$t('episodes.fields.description')"
+        @keyup.ctrl.enter="runConfirmation"
+        @keyup.meta.enter="runConfirmation"
+        v-model="form.description"
+      />
+
+      <text-field
+        :label="$t('shots.fields.resolution')"
+        :placeholder="currentProduction?.resolution"
+        v-model.trim="form.data.resolution"
+        @enter="runConfirmation"
+      />
+
+      <template v-if="episodeToEdit">
+        <metadata-field
+          :key="descriptor.id"
+          :descriptor="descriptor"
+          :entity="episodeToEdit"
+          @enter="runConfirmation"
+          v-model="form.data[descriptor.field_name]"
+          v-for="descriptor in episodeMetadataDescriptors"
         />
-      </div>
-    </div>
-  </div>
+      </template>
+    </form>
+
+    <modal-footer
+      :error-text="$t('episodes.edit_error')"
+      :is-loading="isLoading"
+      :is-error="isError"
+      @confirm="runConfirmation"
+      @cancel="$emit('cancel')"
+    />
+  </base-modal>
 </template>
 
-<script>
-import { mapGetters } from 'vuex'
-
-import { modalMixin } from '@/components/modals/base_modal'
+<script setup>
+import { computed, onMounted, ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useStore } from 'vuex'
 
+import BaseModal from '@/components/modals/BaseModal.vue'
+import ModalFooter from '@/components/modals/ModalFooter.vue'
 import ComboboxStyled from '@/components/widgets/ComboboxStyled.vue'
 import MetadataField from '@/components/widgets/MetadataField.vue'
-import ModalFooter from '@/components/modals/ModalFooter.vue'
 import TextField from '@/components/widgets/TextField.vue'
 import TextareaField from '@/components/widgets/TextareaField.vue'
 
-export default {
-  name: 'edit-episode-modal',
-
-  mixins: [modalMixin],
-
-  components: {
-    ComboboxStyled,
-    MetadataField,
-    ModalFooter,
-    TextField,
-    TextareaField
-  },
-
-  props: {
-    active: {
-      type: Boolean,
-      default: false
-    },
-    isError: {
-      type: Boolean,
-      default: false
-    },
-    isLoading: {
-      type: Boolean,
-      default: false
-    },
-    episodeToEdit: {
-      type: Object,
-      default: () => {}
-    }
-  },
+const { t } = useI18n()
+const store = useStore()
 
-  emits: ['cancel', 'confirm'],
+// Props / Emits
 
-  data() {
-    let form = {
-      id: '',
-      name: '',
-      description: '',
-      fps: '',
-      data: {
-        resolution: ''
-      }
-    }
-    if (this.episodeToEdit && this.episodeToEdit.id) {
-      form = {
-        id: this.episodeToEdit.id,
-        name: this.episodeToEdit.name,
-        description: this.episodeToEdit.description,
-        production_id: this.episodeToEdit.project_id,
-        data:
-          {
-            ...this.episodeToEdit.data,
-            resolution: this.episodeToEdit.data.resolution || ''
-          } || {}
-      }
-    }
-    return {
-      form,
-      episodeSuccessText: '',
-      episodeStatusOptions: [
-        { label: 'canceled', value: 'canceled' },
-        { label: 'complete', value: 'complete' },
-        { label: 'running', value: 'running' },
-        { label: 'standby', value: 'standby' }
-      ]
-    }
-  },
-
-  computed: {
-    ...mapGetters(['currentProduction', 'episodeMetadataDescriptors'])
-  },
-
-  methods: {
-    runConfirmation() {
-      this.$emit('confirm', this.form)
-    },
-
-    isEditing() {
-      return this.episodeToEdit && this.episodeToEdit.id
-    },
-
-    resetForm() {
-      this.episodeSuccessText = ''
-      if (!this.isEditing()) {
-        this.form.id = null
-        this.form.name = ''
-        this.form.status = 'running'
-        this.form.description = ''
-        this.form.data = {}
-      } else {
-        this.form = {
-          id: this.episodeToEdit.id,
-          name: this.episodeToEdit.name,
-          status: this.episodeToEdit.status,
-          description: this.episodeToEdit.description,
-          data:
-            {
-              ...this.episodeToEdit.data,
-              resolution: this.episodeToEdit.data.resolution || ''
-            } || {}
-        }
-      }
-    }
-  },
+const props = defineProps({
+  active: { type: Boolean, default: false },
+  episodeToEdit: { type: Object, default: () => ({}) },
+  isError: { type: Boolean, default: false },
+  isLoading: { type: Boolean, default: false }
+})
 
-  mounted() {
-    this.resetForm()
-  },
+const emit = defineEmits(['cancel', 'confirm'])
 
-  watch: {
-    active() {
-      if (this.active) {
-        this.resetForm()
-      }
-    },
+// State
+
+const form = ref({
+  id: '',
+  name: '',
+  description: '',
+  fps: '',
+  data: { resolution: '' }
+})
+
+const episodeStatusOptions = [
+  { label: 'canceled', value: 'canceled' },
+  { label: 'complete', value: 'complete' },
+  { label: 'running', value: 'running' },
+  { label: 'standby', value: 'standby' }
+]
+
+// Computed
+
+const currentProduction = computed(() => store.getters.currentProduction)
+const episodeMetadataDescriptors = computed(
+  () => store.getters.episodeMetadataDescriptors
+)
 
-    episodeToEdit() {
-      this.resetForm()
+const isEditing = computed(() => Boolean(props.episodeToEdit?.id))
+
+const modalTitle = computed(() =>
+  isEditing.value
+    ? `${t('episodes.edit_title')} ${props.episodeToEdit.name}`
+    : t('episodes.new_episode')
+)
+
+// Functions
+
+const runConfirmation = () => {
+  emit('confirm', form.value)
+}
+
+const resetForm = () => {
+  if (isEditing.value) {
+    form.value = {
+      id: props.episodeToEdit.id,
+      name: props.episodeToEdit.name,
+      status: props.episodeToEdit.status,
+      description: props.episodeToEdit.description,
+      data: {
+        ...props.episodeToEdit.data,
+        resolution: props.episodeToEdit.data.resolution || ''
+      }
     }
+  } else {
+    form.value.id = null
+    form.value.name = ''
+    form.value.status = 'running'
+    form.value.description = ''
+    form.value.data = {}
   }
 }
-</script>
 
-<style lang="scss" scoped>
-.modal-content .box p.text {
-  margin-bottom: 1em;
-}
-.is-danger {
-  color: #ff3860;
-  font-style: italic;
-}
+// Watchers
 
-.info-message {
-  margin-top: 1em;
-}
-</style>
+watch(
+  () => props.active,
+  active => {
+    if (active) resetForm()
+  }
+)
+
+watch(() => props.episodeToEdit, resetForm)
+
+// Lifecycle
+
+onMounted(resetForm)
+</script>
diff --git a/src/components/modals/EditSequenceModal.vue b/src/components/modals/EditSequenceModal.vue
index 2e37e7ddde..ad128bfb15 100644
--- a/src/components/modals/EditSequenceModal.vue
+++ b/src/components/modals/EditSequenceModal.vue
@@ -1,210 +1,130 @@
 <template>
-  <div
-    :class="{
-      modal: true,
-      'is-active': active
-    }"
-  >
-    <div class="modal-background" @click="$emit('cancel')"></div>
-
-    <div class="modal-content">
-      <div class="box">
-        <h1 class="title" v-if="sequenceToEdit && sequenceToEdit.id">
-          {{ $t('sequences.edit_title') }} {{ sequenceToEdit.name }}
-        </h1>
-        <h1 class="title" v-else>
-          {{ $t('sequences.new_sequence') }}
-        </h1>
-
-        <form @submit.prevent>
-          <text-field
-            ref="nameField"
-            :label="$t('sequences.fields.name')"
-            :maxlength="160"
-            v-model.trim="form.name"
-            @enter="runConfirmation"
-            v-focus
-          />
-          <textarea-field
-            ref="descriptionField"
-            :label="$t('sequences.fields.description')"
-            @keyup.ctrl.enter="runConfirmation"
-            @keyup.meta.enter="runConfirmation"
-            v-model="form.description"
-          />
-          <text-field
-            ref="resolutionField"
-            :label="$t('shots.fields.resolution')"
-            :placeholder="currentProduction?.resolution"
-            v-model.trim="form.data.resolution"
-            @enter="runConfirmation"
-          />
-          <template v-if="sequenceToEdit">
-            <metadata-field
-              :key="descriptor.id"
-              :descriptor="descriptor"
-              :entity="sequenceToEdit"
-              @enter="runConfirmation"
-              v-model="form.data[descriptor.field_name]"
-              v-for="descriptor in sequenceMetadataDescriptors"
-            />
-          </template>
-        </form>
-
-        <modal-footer
-          :error-text="$t('sequences.edit_error')"
-          :is-loading="isLoading"
-          :is-error="isError"
-          @confirm="runConfirmation"
-          @cancel="$emit('cancel')"
+  <base-modal :active="active" :title="modalTitle" @cancel="$emit('cancel')">
+    <form @submit.prevent>
+      <text-field
+        :label="$t('sequences.fields.name')"
+        :maxlength="160"
+        v-model.trim="form.name"
+        @enter="runConfirmation"
+        v-focus
+      />
+      <textarea-field
+        :label="$t('sequences.fields.description')"
+        @keyup.ctrl.enter="runConfirmation"
+        @keyup.meta.enter="runConfirmation"
+        v-model="form.description"
+      />
+      <text-field
+        :label="$t('shots.fields.resolution')"
+        :placeholder="currentProduction?.resolution"
+        v-model.trim="form.data.resolution"
+        @enter="runConfirmation"
+      />
+      <template v-if="sequenceToEdit">
+        <metadata-field
+          :key="descriptor.id"
+          :descriptor="descriptor"
+          :entity="sequenceToEdit"
+          @enter="runConfirmation"
+          v-model="form.data[descriptor.field_name]"
+          v-for="descriptor in sequenceMetadataDescriptors"
         />
-      </div>
-    </div>
-  </div>
+      </template>
+    </form>
+
+    <modal-footer
+      :error-text="$t('sequences.edit_error')"
+      :is-loading="isLoading"
+      :is-error="isError"
+      @confirm="runConfirmation"
+      @cancel="$emit('cancel')"
+    />
+  </base-modal>
 </template>
 
-<script>
-import { mapGetters } from 'vuex'
+<script setup>
+import { computed, onMounted, ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useStore } from 'vuex'
 
-import { modalMixin } from '@/components/modals/base_modal'
-
-import MetadataField from '@/components/widgets/MetadataField.vue'
+import BaseModal from '@/components/modals/BaseModal.vue'
 import ModalFooter from '@/components/modals/ModalFooter.vue'
+import MetadataField from '@/components/widgets/MetadataField.vue'
 import TextField from '@/components/widgets/TextField.vue'
 import TextareaField from '@/components/widgets/TextareaField.vue'
 
-export default {
-  name: 'edit-sequence-modal',
-
-  mixins: [modalMixin],
-
-  components: {
-    MetadataField,
-    ModalFooter,
-    TextField,
-    TextareaField
-  },
-
-  props: {
-    active: {
-      type: Boolean,
-      default: false
-    },
-    isError: {
-      type: Boolean,
-      default: false
-    },
-    isLoading: {
-      type: Boolean,
-      default: false
-    },
-    sequenceToEdit: {
-      type: Object,
-      default: () => {}
-    }
-  },
-
-  emits: ['cancel', 'confirm'],
-
-  data() {
-    if (this.sequenceToEdit && this.sequenceToEdit.id) {
-      return {
-        form: {
-          id: this.sequenceToEdit.id,
-          name: this.sequenceToEdit.name,
-          description: this.sequenceToEdit.description,
-          production_id: this.sequenceToEdit.project_id,
-          data:
-            {
-              ...this.sequenceToEdit.data,
-              resolution: this.sequenceToEdit.data.resolution || ''
-            } || {}
-        },
-        sequenceSuccessText: ''
-      }
-    } else {
-      return {
-        form: {
-          id: '',
-          name: '',
-          description: '',
-          data: {
-            resolution: ''
-          }
-        },
-        sequenceSuccessText: ''
-      }
-    }
-  },
-
-  computed: {
-    ...mapGetters(['currentProduction', 'sequenceMetadataDescriptors'])
-  },
-
-  methods: {
-    runConfirmation() {
-      this.confirmClicked()
-    },
-
-    confirmClicked() {
-      this.$emit('confirm', this.form)
-    },
-
-    isEditing() {
-      return this.sequenceToEdit && this.sequenceToEdit.id
-    },
-
-    resetForm() {
-      this.sequenceSuccessText = ''
-      if (!this.isEditing()) {
-        this.form.id = null
-        this.form.name = ''
-        this.form.description = ''
-        this.form.data = {
-          resolution: ''
-        }
-      } else {
-        this.form = {
-          id: this.sequenceToEdit.id,
-          name: this.sequenceToEdit.name,
-          description: this.sequenceToEdit.description,
-          data:
-            {
-              ...this.sequenceToEdit.data,
-              resolution: this.sequenceToEdit.data.resolution || ''
-            } || {}
-        }
-      }
-    }
-  },
+const { t } = useI18n()
+const store = useStore()
 
-  mounted() {
-    if (this.active) {
-      this.resetForm()
-    }
-  },
+// Props / Emits
+
+const props = defineProps({
+  active: { type: Boolean, default: false },
+  isError: { type: Boolean, default: false },
+  isLoading: { type: Boolean, default: false },
+  sequenceToEdit: { type: Object, default: () => ({}) }
+})
+
+const emit = defineEmits(['cancel', 'confirm'])
+
+// State
+
+const form = ref({
+  id: '',
+  name: '',
+  description: '',
+  data: { resolution: '' }
+})
+
+// Computed
 
-  watch: {
-    active() {
-      this.resetForm()
-    },
+const currentProduction = computed(() => store.getters.currentProduction)
+const sequenceMetadataDescriptors = computed(
+  () => store.getters.sequenceMetadataDescriptors
+)
 
-    sequenceToEdit() {
-      this.resetForm()
+const isEditing = computed(() => Boolean(props.sequenceToEdit?.id))
+
+const modalTitle = computed(() =>
+  isEditing.value
+    ? `${t('sequences.edit_title')} ${props.sequenceToEdit.name}`
+    : t('sequences.new_sequence')
+)
+
+// Functions
+
+const runConfirmation = () => {
+  emit('confirm', form.value)
+}
+
+const resetForm = () => {
+  if (isEditing.value) {
+    form.value = {
+      id: props.sequenceToEdit.id,
+      name: props.sequenceToEdit.name,
+      description: props.sequenceToEdit.description,
+      data: {
+        ...props.sequenceToEdit.data,
+        resolution: props.sequenceToEdit.data.resolution || ''
+      }
     }
+  } else {
+    form.value.id = null
+    form.value.name = ''
+    form.value.description = ''
+    form.value.data = { resolution: '' }
   }
 }
-</script>
 
-<style lang="scss" scoped>
-.modal-content .box p.text {
-  margin-bottom: 1em;
-}
-.is-danger {
-  color: #ff3860;
-  font-style: italic;
-}
-.info-message {
-  margin-top: 1em;
-}
-</style>
+// Watchers
+
+watch(() => props.active, resetForm)
+
+watch(() => props.sequenceToEdit, resetForm)
+
+// Lifecycle
+
+onMounted(() => {
+  if (props.active) resetForm()
+})
+</script>

From bc6932b7471825e88bde9dfa025dabfb32e0761f Mon Sep 17 00:00:00 2001
From: Frank Rousseau <frank@cg-wire.com>
Date: Fri, 1 May 2026 22:50:12 +0200
Subject: [PATCH 16/28] [modals] Convert task-status / task-type / day-off /
 change-password modals
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Convert four more modals from Options API: EditTaskStatusModal,
EditTaskTypeModal, DayOffModal, ChangePasswordModal. Each switches
to wrapping its content in <base-modal> with a computed title and
drops modalMixin.

Notable details:
- EditTaskStatusModal: the 25-color array becomes a top-level
  constant (not reactive). nameField / shortNameField refs preserved
  — confirmClicked uses them to focus the empty field.
- EditTaskTypeModal: bug fix — dedicatedToOptions was using this.$t
  inside data(), so the labels were frozen at first render and
  didn't react to locale switches; now a computed. Dropped two
  unused mapped getters (taskTypeStatusOptions, departments) and
  two unused template refs.
- DayOffModal: original made the <form> itself the .box — now the
  form sits inside BaseModal's slot and inherits BaseModal's box.
  Kept the .ml2 override (live, used on the start-date column).
- ChangePasswordModal: internal isLoading / isError / isValid state
  preserved as refs. The kebab-case ref="first-password" is renamed
  to firstPassword (Vue 3 expects a valid identifier when binding
  template refs in <script setup>). Promise chains converted to
  async/await.

CSS: dropped dead .modal-content .box p.text / .is-danger rules
across all four. The new .ml2 in DayOffModal is the only override
that survived.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/components/modals/ChangePasswordModal.vue | 349 ++++++-------
 src/components/modals/DayOffModal.vue         | 277 +++++------
 src/components/modals/EditTaskStatusModal.vue | 469 ++++++++----------
 src/components/modals/EditTaskTypeModal.vue   | 348 ++++++-------
 4 files changed, 632 insertions(+), 811 deletions(-)

diff --git a/src/components/modals/ChangePasswordModal.vue b/src/components/modals/ChangePasswordModal.vue
index 26627f916e..b23c14ea77 100644
--- a/src/components/modals/ChangePasswordModal.vue
+++ b/src/components/modals/ChangePasswordModal.vue
@@ -1,211 +1,166 @@
 <template>
-  <div
-    :class="{
-      modal: true,
-      'is-active': active
-    }"
-  >
-    <div class="modal-background" @click="$emit('cancel')"></div>
-
-    <div class="modal-content">
-      <div class="box">
-        <h1 class="title">
-          {{ $t('people.change_password_for') }} {{ person.name }}
-        </h1>
-
-        <form @submit.prevent>
-          <text-field
-            autocomplete="new-password"
-            :disabled="person.is_generated_from_ldap"
-            :label="$t('people.fields.password')"
-            ref="first-password"
-            type="password"
-            @enter="confirmClicked()"
-            v-model="form.password"
-          />
-          <text-field
-            autocomplete="new-password"
-            :disabled="person.is_generated_from_ldap"
-            :label="$t('people.fields.password_2')"
-            type="password"
-            @enter="confirmClicked()"
-            v-model="form.password2"
-          />
-        </form>
-
-        <div class="flexrow">
-          <button
-            :class="{
-              button: true,
-              'is-primary': true,
-              'flexrow-item': true,
-              'is-loading': isLoading
-            }"
-            :disabled="person.is_generated_from_ldap"
-            @click="confirmClicked"
-          >
-            {{ $t('profile.change_password.button') }}
-          </button>
-          <button
-            :class="{
-              button: true,
-              'flexrow-item': true,
-              'is-loading': isLoading,
-              'is-warning': true
-            }"
-            :disabled="
-              !(
-                person.totp_enabled ||
-                person.email_otp_enabled ||
-                person.fido_enabled
-              )
-            "
-            @click="disableTwoFactorAuthenticationClicked"
-          >
-            {{ $t('people.disable_2FA') }}
-          </button>
-          <div class="filler"></div>
-
-          <button class="button is-link flexrow-item" @click="$emit('cancel')">
-            {{ $t('main.cancel') }}
-          </button>
-        </div>
-
-        <div class="error has-text-right mt1" v-if="!isValid">
-          {{ $t('profile.change_password.unvalid') }}
-        </div>
-        <div class="error has-text-right mt1" v-if="isError">
-          {{ $t('people.change_password_error') }}
-        </div>
-        <div
-          class="error has-text-right mt1"
-          v-if="isErrorDisableTwoFactorAuthentication"
-        >
-          {{ $t('people.disable_2FA_error') }}
-        </div>
-      </div>
+  <base-modal :active="active" :title="modalTitle" @cancel="$emit('cancel')">
+    <form @submit.prevent>
+      <text-field
+        ref="firstPassword"
+        autocomplete="new-password"
+        :disabled="person.is_generated_from_ldap"
+        :label="$t('people.fields.password')"
+        type="password"
+        @enter="confirmClicked"
+        v-model="form.password"
+      />
+      <text-field
+        autocomplete="new-password"
+        :disabled="person.is_generated_from_ldap"
+        :label="$t('people.fields.password_2')"
+        type="password"
+        @enter="confirmClicked"
+        v-model="form.password2"
+      />
+    </form>
+
+    <div class="flexrow">
+      <button
+        :class="{
+          button: true,
+          'is-primary': true,
+          'flexrow-item': true,
+          'is-loading': isLoading
+        }"
+        :disabled="person.is_generated_from_ldap"
+        @click="confirmClicked"
+      >
+        {{ $t('profile.change_password.button') }}
+      </button>
+      <button
+        :class="{
+          button: true,
+          'flexrow-item': true,
+          'is-loading': isLoading,
+          'is-warning': true
+        }"
+        :disabled="
+          !(
+            person.totp_enabled ||
+            person.email_otp_enabled ||
+            person.fido_enabled
+          )
+        "
+        @click="disableTwoFactorAuthenticationClicked"
+      >
+        {{ $t('people.disable_2FA') }}
+      </button>
+      <div class="filler"></div>
+
+      <button class="button is-link flexrow-item" @click="$emit('cancel')">
+        {{ $t('main.cancel') }}
+      </button>
     </div>
-  </div>
-</template>
 
-<script>
-import { mapActions } from 'vuex'
+    <div class="error has-text-right mt1" v-if="!isValid">
+      {{ $t('profile.change_password.unvalid') }}
+    </div>
+    <div class="error has-text-right mt1" v-if="isError">
+      {{ $t('people.change_password_error') }}
+    </div>
+    <div
+      class="error has-text-right mt1"
+      v-if="isErrorDisableTwoFactorAuthentication"
+    >
+      {{ $t('people.disable_2FA_error') }}
+    </div>
+  </base-modal>
+</template>
 
-import { modalMixin } from '@/components/modals/base_modal'
+<script setup>
+import { computed, ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useStore } from 'vuex'
 
+import BaseModal from '@/components/modals/BaseModal.vue'
 import TextField from '@/components/widgets/TextField.vue'
 
-export default {
-  name: 'change-password-modal',
+const { t } = useI18n()
+const store = useStore()
 
-  mixins: [modalMixin],
+// Props / Emits
 
-  props: {
-    active: {
-      type: Boolean,
-      default: false
-    },
-    person: {
-      type: Object,
-      default: () => {}
-    }
-  },
-
-  emits: ['cancel', 'confirm'],
-
-  data() {
-    return {
-      form: {
-        password: '',
-        password2: ''
-      },
-      isLoading: false,
-      isError: false,
-      isErrorDisableTwoFactorAuthentication: false,
-      isValid: true
-    }
-  },
-
-  components: {
-    TextField
-  },
-
-  methods: {
-    ...mapActions([
-      'changePasswordPerson',
-      'disableTwoFactorAuthenticationPerson'
-    ]),
-
-    confirmClicked() {
-      this.isErrorDisableTwoFactorAuthentication = false
-      this.isError = false
-      this.isLoading = true
-      this.changePasswordPerson({
-        person: this.person,
-        form: this.form
-      })
-        .then(() => {
-          this.$emit('confirm')
-        })
-        .catch(err => {
-          if (err.isValidPassword === false) this.isValid = false
-          else this.isError = true
-        })
-        .finally(() => {
-          this.isLoading = false
-        })
-    },
-
-    disableTwoFactorAuthenticationClicked() {
-      this.isErrorDisableTwoFactorAuthentication = false
-      this.isError = false
-      this.isLoading = true
-      this.disableTwoFactorAuthenticationPerson(this.person)
-        .catch(() => {
-          this.isErrorDisableTwoFactorAuthentication = true
-        })
-        .finally(() => {
-          this.isLoading = false
-        })
-    },
-
-    resetForm() {
-      if (this.person) {
-        this.form = {
-          password: '',
-          password2: ''
-        }
-        this.isLoading = false
-        this.isError = false
-        this.isErrorDisableTwoFactorAuthentication = false
-        this.isValid = true
-      }
-    }
-  },
-
-  watch: {
-    person() {
-      this.resetForm()
-    },
-
-    active() {
-      if (this.active) {
-        this.resetForm()
-        setTimeout(() => {
-          this.$refs['first-password']?.focus()
-        }, 100)
-      }
-    }
+const props = defineProps({
+  active: { type: Boolean, default: false },
+  person: { type: Object, default: () => ({}) }
+})
+
+const emit = defineEmits(['cancel', 'confirm'])
+
+// State
+
+const form = ref({ password: '', password2: '' })
+const firstPassword = ref(null)
+const isError = ref(false)
+const isErrorDisableTwoFactorAuthentication = ref(false)
+const isLoading = ref(false)
+const isValid = ref(true)
+
+// Computed
+
+const modalTitle = computed(
+  () => `${t('people.change_password_for')} ${props.person.name}`
+)
+
+// Functions
+
+const confirmClicked = async () => {
+  isErrorDisableTwoFactorAuthentication.value = false
+  isError.value = false
+  isLoading.value = true
+  try {
+    await store.dispatch('changePasswordPerson', {
+      person: props.person,
+      form: form.value
+    })
+    emit('confirm')
+  } catch (err) {
+    if (err.isValidPassword === false) isValid.value = false
+    else isError.value = true
   }
+  isLoading.value = false
 }
-</script>
 
-<style lang="scss" scoped>
-.modal-content .box p.text {
-  margin-bottom: 1em;
+const disableTwoFactorAuthenticationClicked = async () => {
+  isErrorDisableTwoFactorAuthentication.value = false
+  isError.value = false
+  isLoading.value = true
+  try {
+    await store.dispatch('disableTwoFactorAuthenticationPerson', props.person)
+  } catch {
+    isErrorDisableTwoFactorAuthentication.value = true
+  }
+  isLoading.value = false
 }
-.is-danger {
-  color: #ff3860;
-  font-style: italic;
+
+const resetForm = () => {
+  if (!props.person) return
+  form.value = { password: '', password2: '' }
+  isLoading.value = false
+  isError.value = false
+  isErrorDisableTwoFactorAuthentication.value = false
+  isValid.value = true
 }
-</style>
+
+// Watchers
+
+watch(() => props.person, resetForm)
+
+watch(
+  () => props.active,
+  active => {
+    if (active) {
+      resetForm()
+      setTimeout(() => {
+        firstPassword.value?.focus()
+      }, 100)
+    }
+  }
+)
+</script>
diff --git a/src/components/modals/DayOffModal.vue b/src/components/modals/DayOffModal.vue
index 1f01455d4b..5f46d7eacf 100644
--- a/src/components/modals/DayOffModal.vue
+++ b/src/components/modals/DayOffModal.vue
@@ -1,177 +1,136 @@
 <template>
-  <div class="modal day-off-modal" :class="{ 'is-active': active }">
-    <div class="modal-background" @click="$emit('cancel')"></div>
-    <div class="modal-content">
-      <form class="box" @submit.prevent="confirm">
-        <h1 class="title">
-          {{ isEditing ? $t('days_off.edit') : $t('days_off.add') }}
-        </h1>
-        <div class="flexrow field">
-          <div class="flexrow-item ml2">
-            <label class="label">
-              {{ $t('main.start_date') }}
-            </label>
-            <date-field
-              utc
-              week-days-disabled
-              @update:model-value="validateDates"
-              v-model="form.startDate"
-            />
-          </div>
-          <div class="flexrow-item">
-            <label class="label">
-              {{ $t('main.end_date') }}
-            </label>
-            <date-field
-              utc
-              week-days-disabled
-              @update:model-value="validateDates"
-              v-model="form.endDate"
-            />
-          </div>
+  <base-modal :active="active" :title="modalTitle" @cancel="$emit('cancel')">
+    <form @submit.prevent="confirm">
+      <div class="flexrow field">
+        <div class="flexrow-item ml2">
+          <label class="label">
+            {{ $t('main.start_date') }}
+          </label>
+          <date-field
+            utc
+            week-days-disabled
+            @update:model-value="validateDates"
+            v-model="form.startDate"
+          />
         </div>
-        <text-field
-          class="mt2"
-          :label="`${$t('main.description')} (${$t('main.optional')})`"
-          :required="false"
-          v-model.trim="form.description"
-        />
-        <p class="mb2 warning-text">
-          <alert-triangle-icon class="icon mr05 warning" />{{
-            $t('days_off.confirm_day_offs')
-          }}
-        </p>
-        <p class="is-danger has-text-right" v-if="isError">
-          {{ errorText || $t('days_off.error_days_off') }}
-        </p>
-        <p class="has-text-right mt1 mb2">
-          <button
-            type="submit"
-            class="button is-primary"
-            :class="{ 'is-loading': isLoading }"
-          >
-            {{ $t('main.confirmation') }}
-          </button>
-          <button type="button" class="button is-link" @click="$emit('cancel')">
-            {{ $t('main.cancel') }}
-          </button>
-        </p>
-      </form>
-    </div>
-  </div>
+        <div class="flexrow-item">
+          <label class="label">
+            {{ $t('main.end_date') }}
+          </label>
+          <date-field
+            utc
+            week-days-disabled
+            @update:model-value="validateDates"
+            v-model="form.endDate"
+          />
+        </div>
+      </div>
+      <text-field
+        class="mt2"
+        :label="`${$t('main.description')} (${$t('main.optional')})`"
+        :required="false"
+        v-model.trim="form.description"
+      />
+      <p class="mb2 warning-text">
+        <alert-triangle-icon class="icon mr05 warning" />{{
+          $t('days_off.confirm_day_offs')
+        }}
+      </p>
+      <p class="is-danger has-text-right" v-if="isError">
+        {{ errorText || $t('days_off.error_days_off') }}
+      </p>
+      <p class="has-text-right mt1 mb2">
+        <button
+          type="submit"
+          class="button is-primary"
+          :class="{ 'is-loading': isLoading }"
+        >
+          {{ $t('main.confirmation') }}
+        </button>
+        <button type="button" class="button is-link" @click="$emit('cancel')">
+          {{ $t('main.cancel') }}
+        </button>
+      </p>
+    </form>
+  </base-modal>
 </template>
 
-<script>
+<script setup>
 import { AlertTriangleIcon } from 'lucide-vue-next'
 import moment from 'moment-timezone'
+import { computed, ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
 
-import { modalMixin } from '@/components/modals/base_modal'
-
+import BaseModal from '@/components/modals/BaseModal.vue'
 import DateField from '@/components/widgets/DateField.vue'
 import TextField from '@/components/widgets/TextField.vue'
 
-export default {
-  name: 'day-off-modal',
-
-  mixins: [modalMixin],
-
-  components: {
-    AlertTriangleIcon,
-    DateField,
-    TextField
-  },
-
-  props: {
-    active: {
-      type: Boolean,
-      default: false
-    },
-    dayOffToEdit: {
-      type: Object,
-      default: () => {}
-    },
-    isLoading: {
-      type: Boolean,
-      default: false
-    },
-    isError: {
-      type: Boolean,
-      default: false
-    },
-    errorText: {
-      type: String,
-      default: ''
-    }
-  },
-
-  emits: ['cancel', 'confirm'],
-
-  data() {
-    return {
-      form: {
-        startDate: null,
-        endDate: null,
-        description: null
-      }
-    }
-  },
-
-  computed: {
-    isEditing() {
-      return Boolean(this.dayOffToEdit?.id)
-    }
-  },
-
-  methods: {
-    confirm() {
-      const dayOff = {
-        ...this.dayOffToEdit,
-        date: this.form.startDate,
-        end_date: this.form.endDate,
-        description: this.form.description
-      }
-      this.$emit('confirm', dayOff)
-    },
-
-    resetForm() {
-      const today = moment().utc().toDate()
-      this.form = {
-        startDate: this.dayOffToEdit?.date || today,
-        endDate:
-          this.dayOffToEdit?.end_date || this.dayOffToEdit?.date || today,
-        description: this.dayOffToEdit?.description || null
-      }
-    },
-
-    validateDates() {
-      if (
-        this.form.startDate &&
-        this.form.endDate &&
-        this.form.startDate > this.form.endDate
-      ) {
-        this.form.endDate = this.form.startDate
-      }
-    }
-  },
-
-  watch: {
-    dayOffToEdit: {
-      immediate: true,
-      handler() {
-        this.resetForm()
-      }
-    }
+const { t } = useI18n()
+
+// Props / Emits
+
+const props = defineProps({
+  active: { type: Boolean, default: false },
+  dayOffToEdit: { type: Object, default: () => ({}) },
+  errorText: { type: String, default: '' },
+  isError: { type: Boolean, default: false },
+  isLoading: { type: Boolean, default: false }
+})
+
+const emit = defineEmits(['cancel', 'confirm'])
+
+// State
+
+const form = ref({
+  startDate: null,
+  endDate: null,
+  description: null
+})
+
+// Computed
+
+const isEditing = computed(() => Boolean(props.dayOffToEdit?.id))
+
+const modalTitle = computed(() =>
+  isEditing.value ? t('days_off.edit') : t('days_off.add')
+)
+
+// Functions
+
+const confirm = () => {
+  emit('confirm', {
+    ...props.dayOffToEdit,
+    date: form.value.startDate,
+    end_date: form.value.endDate,
+    description: form.value.description
+  })
+}
+
+const resetForm = () => {
+  const today = moment().utc().toDate()
+  form.value = {
+    startDate: props.dayOffToEdit?.date || today,
+    endDate: props.dayOffToEdit?.end_date || props.dayOffToEdit?.date || today,
+    description: props.dayOffToEdit?.description || null
+  }
+}
+
+const validateDates = () => {
+  if (
+    form.value.startDate &&
+    form.value.endDate &&
+    form.value.startDate > form.value.endDate
+  ) {
+    form.value.endDate = form.value.startDate
   }
 }
+
+// Watchers
+
+watch(() => props.dayOffToEdit, resetForm, { immediate: true })
 </script>
 
 <style lang="scss" scoped>
-.modal-content .box {
-  padding: 2em;
-}
-.modal-content .box p.text {
-  margin-bottom: 1em;
-}
 .ml2 {
   margin-left: 2.5em;
 }
diff --git a/src/components/modals/EditTaskStatusModal.vue b/src/components/modals/EditTaskStatusModal.vue
index 181efd060f..a4032486cb 100644
--- a/src/components/modals/EditTaskStatusModal.vue
+++ b/src/components/modals/EditTaskStatusModal.vue
@@ -1,272 +1,231 @@
 <template>
-  <div
-    :class="{
-      modal: true,
-      'is-active': active
-    }"
-  >
-    <div class="modal-background" @click="$emit('cancel')"></div>
-
-    <div class="modal-content">
-      <div class="box">
-        <h1 class="title" v-if="isEditing">
-          {{ $t('task_status.edit_title') }} {{ taskStatusToEdit.name }}
-        </h1>
-        <h1 class="title" v-else>
-          {{ $t('task_status.new_task_status') }}
-        </h1>
-
-        <form @submit.prevent>
-          <text-field
-            ref="nameField"
-            input-class="task-status-name"
-            :label="$t('task_status.fields.name')"
-            @enter="confirmClicked"
-            v-model.trim="form.name"
-            v-focus
-            v-if="taskStatusToEdit?.short_name !== 'todo'"
-          />
-          <text-field
-            ref="shortNameField"
-            input-class="task-status-short-name"
-            :label="$t('task_status.fields.short_name')"
-            :maxlength="8"
-            @enter="confirmClicked"
-            v-model.trim="form.short_name"
-            v-if="taskStatusToEdit?.short_name !== 'todo'"
-          />
-          <textarea-field
-            input-class="task-status-description"
-            :label="$t('task_status.fields.description')"
-            @enter="confirmClicked"
-            v-model="form.description"
-          />
-          <boolean-field
-            class="mr05 mb05"
-            :label="$t('task_status.fields.is_default')"
-            @enter="confirmClicked"
-            v-model="form.is_default"
-            :disabled="form.for_concept === 'true'"
-          />
-          <boolean-field
-            class="mr05 mb05"
-            :label="$t('task_status.fields.is_wip')"
-            @enter="confirmClicked"
-            v-model="form.is_wip"
-            v-if="form.is_default === 'false'"
-          />
-          <boolean-field
-            class="mr05 mb05"
-            :label="$t('task_status.fields.is_done')"
-            @enter="confirmClicked"
-            v-model="form.is_done"
-            v-if="form.is_default === 'false'"
-          />
-          <boolean-field
-            class="mr05 mb05"
-            :label="$t('task_status.fields.is_retake')"
-            @enter="confirmClicked"
-            v-model="form.is_retake"
-            v-if="form.is_default === 'false'"
-          />
-          <boolean-field
-            class="mr05 mb05"
-            :label="$t('task_status.fields.is_artist_allowed')"
-            @enter="confirmClicked"
-            v-model="form.is_artist_allowed"
-          />
-          <boolean-field
-            class="mr05 mb05"
-            :label="$t('task_status.fields.is_client_allowed')"
-            @enter="confirmClicked"
-            v-model="form.is_client_allowed"
-            v-if="form.for_concept !== 'true'"
-          />
-          <boolean-field
-            class="mr05 mb05"
-            :label="$t('task_status.fields.is_feedback_request')"
-            @enter="confirmClicked"
-            v-model="form.is_feedback_request"
-            v-if="form.is_default === 'false'"
-          />
-          <color-field
-            class="mt2"
-            :colors="colors"
-            :column="5"
-            :label="$t('task_status.fields.color')"
-            v-model="form.color"
-            v-if="taskStatusToEdit?.short_name !== 'todo'"
-          />
-          <combobox-boolean
-            :label="$t('main.archived')"
-            @enter="confirmClicked"
-            v-model="form.archived"
-            v-if="isEditing"
-          />
-        </form>
-
-        <modal-footer
-          :error-text="$t('task_status.create_error')"
-          :is-error="isError"
-          :is-loading="isLoading"
-          @confirm="confirmClicked"
-          @cancel="$emit('cancel')"
-        />
-      </div>
-    </div>
-  </div>
+  <base-modal :active="active" :title="modalTitle" @cancel="$emit('cancel')">
+    <form @submit.prevent>
+      <text-field
+        ref="nameField"
+        input-class="task-status-name"
+        :label="$t('task_status.fields.name')"
+        @enter="confirmClicked"
+        v-model.trim="form.name"
+        v-focus
+        v-if="taskStatusToEdit?.short_name !== 'todo'"
+      />
+      <text-field
+        ref="shortNameField"
+        input-class="task-status-short-name"
+        :label="$t('task_status.fields.short_name')"
+        :maxlength="8"
+        @enter="confirmClicked"
+        v-model.trim="form.short_name"
+        v-if="taskStatusToEdit?.short_name !== 'todo'"
+      />
+      <textarea-field
+        input-class="task-status-description"
+        :label="$t('task_status.fields.description')"
+        @enter="confirmClicked"
+        v-model="form.description"
+      />
+      <boolean-field
+        class="mr05 mb05"
+        :label="$t('task_status.fields.is_default')"
+        @enter="confirmClicked"
+        v-model="form.is_default"
+        :disabled="form.for_concept === 'true'"
+      />
+      <boolean-field
+        class="mr05 mb05"
+        :label="$t('task_status.fields.is_wip')"
+        @enter="confirmClicked"
+        v-model="form.is_wip"
+        v-if="form.is_default === 'false'"
+      />
+      <boolean-field
+        class="mr05 mb05"
+        :label="$t('task_status.fields.is_done')"
+        @enter="confirmClicked"
+        v-model="form.is_done"
+        v-if="form.is_default === 'false'"
+      />
+      <boolean-field
+        class="mr05 mb05"
+        :label="$t('task_status.fields.is_retake')"
+        @enter="confirmClicked"
+        v-model="form.is_retake"
+        v-if="form.is_default === 'false'"
+      />
+      <boolean-field
+        class="mr05 mb05"
+        :label="$t('task_status.fields.is_artist_allowed')"
+        @enter="confirmClicked"
+        v-model="form.is_artist_allowed"
+      />
+      <boolean-field
+        class="mr05 mb05"
+        :label="$t('task_status.fields.is_client_allowed')"
+        @enter="confirmClicked"
+        v-model="form.is_client_allowed"
+        v-if="form.for_concept !== 'true'"
+      />
+      <boolean-field
+        class="mr05 mb05"
+        :label="$t('task_status.fields.is_feedback_request')"
+        @enter="confirmClicked"
+        v-model="form.is_feedback_request"
+        v-if="form.is_default === 'false'"
+      />
+      <color-field
+        class="mt2"
+        :colors="colors"
+        :column="5"
+        :label="$t('task_status.fields.color')"
+        v-model="form.color"
+        v-if="taskStatusToEdit?.short_name !== 'todo'"
+      />
+      <combobox-boolean
+        :label="$t('main.archived')"
+        @enter="confirmClicked"
+        v-model="form.archived"
+        v-if="isEditing"
+      />
+    </form>
+
+    <modal-footer
+      :error-text="$t('task_status.create_error')"
+      :is-error="isError"
+      :is-loading="isLoading"
+      @confirm="confirmClicked"
+      @cancel="$emit('cancel')"
+    />
+  </base-modal>
 </template>
 
-<script>
-import { modalMixin } from '@/components/modals/base_modal'
+<script setup>
+import { computed, ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
 
+import BaseModal from '@/components/modals/BaseModal.vue'
+import ModalFooter from '@/components/modals/ModalFooter.vue'
 import BooleanField from '@/components/widgets/BooleanField.vue'
 import ColorField from '@/components/widgets/ColorField.vue'
 import ComboboxBoolean from '@/components/widgets/ComboboxBoolean.vue'
-import ModalFooter from '@/components/modals/ModalFooter.vue'
 import TextField from '@/components/widgets/TextField.vue'
 import TextareaField from '@/components/widgets/TextareaField.vue'
 
-export default {
-  name: 'edit-task-status-modal',
-
-  mixins: [modalMixin],
-
-  components: {
-    BooleanField,
-    ColorField,
-    ComboboxBoolean,
-    ModalFooter,
-    TextField,
-    TextareaField
-  },
-
-  props: {
-    active: {
-      type: Boolean,
-      default: false
-    },
-    isError: {
-      type: Boolean,
-      default: false
-    },
-    isLoading: {
-      type: Boolean,
-      default: false
-    },
-    taskStatusToEdit: {
-      type: Object,
-      default: () => {}
-    }
-  },
-
-  emits: ['cancel', 'confirm'],
-
-  data() {
-    return {
-      form: {
-        name: '',
-        short_name: '',
-        description: '',
-        color: '#999999',
-        is_default: 'false',
-        is_wip: 'false',
-        is_done: 'false',
-        is_retake: 'false',
-        is_feedback_request: 'false',
-        archived: 'false'
-      },
-      colors: [
-        '#999999',
-        '#CCCCCC',
-        '#F5F5F5',
-        '#CC9999',
-        '#FF3860',
-        '#E81123',
-        '#E74C3C',
-        '#FF5722',
-        '#FF7043',
-        '#FFA000',
-        '#FBC02D',
-        '#AFB42B',
-        '#8BC34A',
-        '#66BB6A',
-        '#22D160',
-        '#4DB6AC',
-        '#03A9F4',
-        '#3273DC',
-        '#3498DB',
-        '#2980B9',
-        '#607D8B',
-        '#8764B8',
-        '#AB26FF',
-        '#E040FB',
-        '#FF80AB'
-      ]
-    }
-  },
-
-  computed: {
-    isEditing() {
-      return this.taskStatusToEdit && this.taskStatusToEdit.id
-    }
-  },
+const { t } = useI18n()
+
+// Props / Emits
+
+const props = defineProps({
+  active: { type: Boolean, default: false },
+  isError: { type: Boolean, default: false },
+  isLoading: { type: Boolean, default: false },
+  taskStatusToEdit: { type: Object, default: () => ({}) }
+})
+
+const emit = defineEmits(['cancel', 'confirm'])
+
+// State
+
+const form = ref({
+  name: '',
+  short_name: '',
+  description: '',
+  color: '#999999',
+  is_default: 'false',
+  is_wip: 'false',
+  is_done: 'false',
+  is_retake: 'false',
+  is_feedback_request: 'false',
+  archived: 'false'
+})
+const nameField = ref(null)
+const shortNameField = ref(null)
+
+const colors = [
+  '#999999',
+  '#CCCCCC',
+  '#F5F5F5',
+  '#CC9999',
+  '#FF3860',
+  '#E81123',
+  '#E74C3C',
+  '#FF5722',
+  '#FF7043',
+  '#FFA000',
+  '#FBC02D',
+  '#AFB42B',
+  '#8BC34A',
+  '#66BB6A',
+  '#22D160',
+  '#4DB6AC',
+  '#03A9F4',
+  '#3273DC',
+  '#3498DB',
+  '#2980B9',
+  '#607D8B',
+  '#8764B8',
+  '#AB26FF',
+  '#E040FB',
+  '#FF80AB'
+]
+
+// Computed
+
+const isEditing = computed(() => Boolean(props.taskStatusToEdit?.id))
+
+const modalTitle = computed(() =>
+  isEditing.value
+    ? `${t('task_status.edit_title')} ${props.taskStatusToEdit.name}`
+    : t('task_status.new_task_status')
+)
+
+// Functions
+
+const confirmClicked = () => {
+  if (!form.value.name?.length && nameField.value) {
+    nameField.value.focus()
+    return
+  }
+  if (!form.value.short_name?.length && shortNameField.value) {
+    shortNameField.value.focus()
+    return
+  }
+  emit('confirm', form.value)
+}
 
-  methods: {
-    confirmClicked() {
-      if (!this.form.name?.length && this.$refs.nameField) {
-        this.$refs.nameField.focus()
-        return
-      }
-      if (!this.form.short_name?.length && this.$refs.shortNameField) {
-        this.$refs.shortNameField.focus()
-        return
-      }
-      this.$emit('confirm', this.form)
-    },
+const resetForm = () => {
+  if (!props.taskStatusToEdit) return
+  const ts = props.taskStatusToEdit
+  form.value = {
+    name: ts.name,
+    short_name: ts.short_name,
+    description: ts.description,
+    color: ts.color,
+    is_default: String(ts.is_default || false),
+    is_wip: String(ts.is_wip || false),
+    is_done: String(ts.is_done || false),
+    is_retake: String(ts.is_retake || false),
+    is_artist_allowed: String(ts.is_artist_allowed),
+    is_client_allowed: String(ts.is_client_allowed),
+    is_feedback_request: String(ts.is_feedback_request || false),
+    for_concept: String(ts.for_concept || false),
+    archived: String(ts.archived || false)
+  }
+}
 
-    resetForm() {
-      if (this.taskStatusToEdit) {
-        this.form = {
-          name: this.taskStatusToEdit.name,
-          short_name: this.taskStatusToEdit.short_name,
-          description: this.taskStatusToEdit.description,
-          color: this.taskStatusToEdit.color,
-          is_default: String(this.taskStatusToEdit.is_default || false),
-          is_wip: String(this.taskStatusToEdit.is_wip || false),
-          is_done: String(this.taskStatusToEdit.is_done || false),
-          is_retake: String(this.taskStatusToEdit.is_retake || false),
-          is_artist_allowed: String(this.taskStatusToEdit.is_artist_allowed),
-          is_client_allowed: String(this.taskStatusToEdit.is_client_allowed),
-          is_feedback_request: String(
-            this.taskStatusToEdit.is_feedback_request || false
-          ),
-          for_concept: String(this.taskStatusToEdit.for_concept || false),
-          archived: String(this.taskStatusToEdit.archived || false)
-        }
-      }
-    }
-  },
+// Watchers
 
-  watch: {
-    taskStatusToEdit() {
-      this.resetForm()
-    },
+watch(() => props.taskStatusToEdit, resetForm)
 
-    active() {
-      if (this.active) {
-        this.resetForm()
-        setTimeout(() => {
-          this.$refs.nameField?.focus()
-        }, 100)
-      }
+watch(
+  () => props.active,
+  active => {
+    if (active) {
+      resetForm()
+      setTimeout(() => {
+        nameField.value?.focus()
+      }, 100)
     }
   }
-}
+)
 </script>
-
-<style lang="scss" scoped>
-.modal-content .box p.text {
-  margin-bottom: 1em;
-}
-</style>
diff --git a/src/components/modals/EditTaskTypeModal.vue b/src/components/modals/EditTaskTypeModal.vue
index 53420fff6d..adb17cac79 100644
--- a/src/components/modals/EditTaskTypeModal.vue
+++ b/src/components/modals/EditTaskTypeModal.vue
@@ -1,223 +1,171 @@
 <template>
-  <div
-    :class="{
-      modal: true,
-      'is-active': active
-    }"
-  >
-    <div class="modal-background" @click="$emit('cancel')"></div>
-
-    <div class="modal-content">
-      <div class="box">
-        <h1 class="title" v-if="isEditing">
-          {{ $t('task_types.edit_title') }} {{ taskTypeToEdit.name }}
-        </h1>
-        <h1 class="title" v-else>
-          {{ $t('task_types.new_task_type') }}
-        </h1>
-
-        <form @submit.prevent>
-          <text-field
-            ref="nameField"
-            :label="$t('task_types.fields.name')"
-            v-model="form.name"
-            @enter="confirmClicked"
-            v-focus
-          />
-          <text-field
-            ref="shortNameField"
-            :label="$t('task_types.fields.short_name')"
-            v-model="form.short_name"
-            @enter="confirmClicked"
-          />
-          <boolean-field
-            is-field
-            :label="$t('task_types.fields.allow_timelog')"
-            @enter="confirmClicked"
-            v-model="form.allow_timelog"
-          />
-          <textarea-field
-            :label="$t('task_types.fields.description')"
-            v-model="form.description"
-            @enter="confirmClicked"
-          />
-          <combobox-simple
-            class="field"
-            :label="$t('task_types.fields.dedicated_to')"
-            :options="dedicatedToOptions"
-            @enter="confirmClicked"
-            v-model="form.for_entity"
-            v-if="!isEditing"
-          />
-          <combobox-department
-            :label="$t('task_types.fields.department')"
-            @enter="confirmClicked"
-            v-model="form.department_id"
-          />
-          <color-field
-            class="mt2"
-            :label="$t('task_types.fields.color')"
-            v-model="form.color"
-          />
-          <combobox-boolean
-            :label="$t('main.archived')"
-            @enter="confirmClicked"
-            v-model="form.archived"
-            v-if="isEditing"
-          />
-        </form>
-
-        <modal-footer
-          :error-text="$t('task_types.create_error')"
-          :is-loading="isLoading"
-          :is-error="isError"
-          @confirm="confirmClicked"
-          @cancel="$emit('cancel')"
-        />
-      </div>
-    </div>
-  </div>
+  <base-modal :active="active" :title="modalTitle" @cancel="$emit('cancel')">
+    <form @submit.prevent>
+      <text-field
+        :label="$t('task_types.fields.name')"
+        v-model="form.name"
+        @enter="confirmClicked"
+        v-focus
+      />
+      <text-field
+        :label="$t('task_types.fields.short_name')"
+        v-model="form.short_name"
+        @enter="confirmClicked"
+      />
+      <boolean-field
+        is-field
+        :label="$t('task_types.fields.allow_timelog')"
+        @enter="confirmClicked"
+        v-model="form.allow_timelog"
+      />
+      <textarea-field
+        :label="$t('task_types.fields.description')"
+        v-model="form.description"
+        @enter="confirmClicked"
+      />
+      <combobox-simple
+        class="field"
+        :label="$t('task_types.fields.dedicated_to')"
+        :options="dedicatedToOptions"
+        @enter="confirmClicked"
+        v-model="form.for_entity"
+        v-if="!isEditing"
+      />
+      <combobox-department
+        :label="$t('task_types.fields.department')"
+        @enter="confirmClicked"
+        v-model="form.department_id"
+      />
+      <color-field
+        class="mt2"
+        :label="$t('task_types.fields.color')"
+        v-model="form.color"
+      />
+      <combobox-boolean
+        :label="$t('main.archived')"
+        @enter="confirmClicked"
+        v-model="form.archived"
+        v-if="isEditing"
+      />
+    </form>
+
+    <modal-footer
+      :error-text="$t('task_types.create_error')"
+      :is-loading="isLoading"
+      :is-error="isError"
+      @confirm="confirmClicked"
+      @cancel="$emit('cancel')"
+    />
+  </base-modal>
 </template>
 
-<script>
-import { mapGetters } from 'vuex'
-
-import { modalMixin } from '@/components/modals/base_modal'
+<script setup>
+import { computed, nextTick, ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useStore } from 'vuex'
 
+import BaseModal from '@/components/modals/BaseModal.vue'
+import ModalFooter from '@/components/modals/ModalFooter.vue'
 import BooleanField from '@/components/widgets/BooleanField.vue'
+import ColorField from '@/components/widgets/ColorField.vue'
 import ComboboxBoolean from '@/components/widgets/ComboboxBoolean.vue'
-import ComboboxSimple from '@/components/widgets/ComboboxSimple.vue'
 import ComboboxDepartment from '@/components/widgets/ComboboxDepartment.vue'
-import ColorField from '@/components/widgets/ColorField.vue'
-import ModalFooter from '@/components/modals/ModalFooter.vue'
+import ComboboxSimple from '@/components/widgets/ComboboxSimple.vue'
 import TextField from '@/components/widgets/TextField.vue'
 import TextareaField from '@/components/widgets/TextareaField.vue'
 
-export default {
-  name: 'edit-task-type-modal',
-
-  mixins: [modalMixin],
-
-  components: {
-    BooleanField,
-    ComboboxBoolean,
-    ComboboxSimple,
-    ComboboxDepartment,
-    ColorField,
-    ModalFooter,
-    TextField,
-    TextareaField
-  },
-
-  props: {
-    active: {
-      type: Boolean,
-      default: false
-    },
-    forEntity: {
-      type: String,
-      default: 'Asset'
-    },
-    isError: {
-      type: Boolean,
-      default: false
-    },
-    isLoading: {
-      type: Boolean,
-      default: false
-    },
-    taskTypeToEdit: {
-      type: Object,
-      default: () => {}
-    }
-  },
+const { t } = useI18n()
+const store = useStore()
+
+// Props / Emits
+
+const props = defineProps({
+  active: { type: Boolean, default: false },
+  forEntity: { type: String, default: 'Asset' },
+  isError: { type: Boolean, default: false },
+  isLoading: { type: Boolean, default: false },
+  taskTypeToEdit: { type: Object, default: () => ({}) }
+})
+
+const emit = defineEmits(['cancel', 'confirm'])
+
+// State
+
+const form = ref({
+  name: '',
+  short_name: '',
+  description: '',
+  color: '#999999',
+  for_entity: 'Asset',
+  allow_timelog: 'false',
+  department_id: null,
+  archived: 'false'
+})
+
+// Computed
+
+const taskTypes = computed(() => store.getters.taskTypes)
+
+const isEditing = computed(() => Boolean(props.taskTypeToEdit?.id))
 
-  emits: ['cancel', 'confirm'],
+const modalTitle = computed(() =>
+  isEditing.value
+    ? `${t('task_types.edit_title')} ${props.taskTypeToEdit.name}`
+    : t('task_types.new_task_type')
+)
 
-  data() {
-    return {
-      form: {
+const dedicatedToOptions = computed(() => [
+  { label: t('assets.title'), value: 'Asset' },
+  { label: t('shots.title'), value: 'Shot' },
+  { label: t('sequences.title'), value: 'Sequence' },
+  { label: t('episodes.title'), value: 'Episode' },
+  { label: t('edits.title'), value: 'Edit' }
+])
+
+// Functions
+
+const newPriority = forEntity =>
+  taskTypes.value.filter(taskType => taskType.for_entity === forEntity).length +
+  1
+
+const confirmClicked = () => {
+  if (!isEditing.value) {
+    form.value.priority = newPriority(form.value.for_entity)
+  }
+  emit('confirm', form.value)
+}
+
+// Watchers
+
+watch(
+  () => props.active,
+  () => {
+    if (props.taskTypeToEdit?.id) {
+      form.value = {
+        name: props.taskTypeToEdit.name,
+        short_name: props.taskTypeToEdit.short_name,
+        description: props.taskTypeToEdit.description,
+        color: props.taskTypeToEdit.color,
+        for_entity: props.taskTypeToEdit.for_entity || 'Asset',
+        allow_timelog: String(props.taskTypeToEdit.allow_timelog === true),
+        department_id: props.taskTypeToEdit.department_id,
+        archived: String(props.taskTypeToEdit.archived === true)
+      }
+    } else {
+      form.value = {
         name: '',
         short_name: '',
         description: '',
         color: '#999999',
-        for_entity: 'Asset',
+        for_entity: props.forEntity,
         allow_timelog: 'false',
         department_id: null,
         archived: 'false'
-      },
-      dedicatedToOptions: [
-        { label: this.$t('assets.title'), value: 'Asset' },
-        { label: this.$t('shots.title'), value: 'Shot' },
-        { label: this.$t('sequences.title'), value: 'Sequence' },
-        { label: this.$t('episodes.title'), value: 'Episode' },
-        { label: this.$t('edits.title'), value: 'Edit' }
-      ]
-    }
-  },
-
-  computed: {
-    ...mapGetters(['taskTypes', 'taskTypeStatusOptions', 'departments']),
-    isEditing() {
-      return this.taskTypeToEdit && this.taskTypeToEdit.id
-    }
-  },
-
-  methods: {
-    newPriority(forEntity) {
-      return (
-        this.taskTypes.filter(taskType => taskType.for_entity === forEntity)
-          .length + 1
-      )
-    },
-
-    confirmClicked() {
-      if (!this.isEditing) {
-        this.form.priority = this.newPriority(this.form.for_entity)
-      }
-      this.$emit('confirm', this.form)
-    }
-  },
-
-  watch: {
-    active() {
-      if (this.taskTypeToEdit) {
-        this.form = {
-          name: this.taskTypeToEdit.name,
-          short_name: this.taskTypeToEdit.short_name,
-          description: this.taskTypeToEdit.description,
-          color: this.taskTypeToEdit.color,
-          for_entity: this.taskTypeToEdit.for_entity || 'Asset',
-          allow_timelog: String(this.taskTypeToEdit.allow_timelog === true),
-          department_id: this.taskTypeToEdit.department_id,
-          archived: String(this.taskTypeToEdit.archived === true)
-        }
-      } else {
-        this.form = {
-          name: '',
-          short_name: '',
-          description: '',
-          color: '#999999',
-          for_entity: this.forEntity,
-          allow_timelog: 'false',
-          department_id: null,
-          archived: 'false'
-        }
       }
-      this.$nextTick(() => {
-        this.form.for_entity = this.forEntity
-      })
     }
+    nextTick(() => {
+      form.value.for_entity = props.forEntity
+    })
   }
-}
+)
 </script>
-
-<style lang="scss" scoped>
-.modal-content .box p.text {
-  margin-bottom: 1em;
-}
-.is-danger {
-  color: #ff3860;
-  font-style: italic;
-}
-</style>

From 538f16111640b5ad8b1d057a9460ec96d043d33d Mon Sep 17 00:00:00 2001
From: Frank Rousseau <frank@cg-wire.com>
Date: Fri, 1 May 2026 23:09:48 +0200
Subject: [PATCH 17/28] [modals] Convert edit / history / search-filter modals
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Convert four more modals from Options API: EditEditModal,
EditHistoryModal, EditSearchFilterModal, EditSearchFilterGroupModal.
Each switches to wrapping its content in <base-modal> with a
computed or static title and drops modalMixin.

Notable details:
- EditEditModal: drop unused editSuccessText state and the
  editCreated watcher that wrote to it (its only consumer); drop
  two unused template refs (descriptionField, resolutionField).
  Lose the .title { border-bottom: 2px } rule — scoped styles can't
  reach BaseModal's title, and the underline isn't used by the
  other admin modals anyway.
- EditHistoryModal: drop the unused headerWrapper template ref.
  Convert the loadEditHistory promise chain to async/await. Use the
  imported formatDate directly (drop the methods passthrough).
- EditSearchFilterModal: preserve the keyCode-guarded confirm
  (only emit on Enter or programmatic call).
- EditSearchFilterGroupModal: computed title interpolates the group
  name with embedded quotes.

CSS: dropped dead .modal-content .box p.text / .is-danger /
.info-message rules across all four. EditHistoryModal keeps its
table styling (still applies to elements rendered in this
component's scope, not in BaseModal).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/components/modals/EditEditModal.vue       | 393 +++++++-----------
 src/components/modals/EditHistoryModal.vue    | 235 +++++------
 .../modals/EditSearchFilterGroupModal.vue     | 268 ++++++------
 .../modals/EditSearchFilterModal.vue          | 323 +++++++-------
 4 files changed, 517 insertions(+), 702 deletions(-)

diff --git a/src/components/modals/EditEditModal.vue b/src/components/modals/EditEditModal.vue
index 720b8a7c0d..d797ff96a0 100644
--- a/src/components/modals/EditEditModal.vue
+++ b/src/components/modals/EditEditModal.vue
@@ -1,261 +1,176 @@
 <template>
-  <div
-    :class="{
-      modal: true,
-      'is-active': active
-    }"
-  >
-    <div class="modal-background" @click="$emit('cancel')"></div>
-
-    <div class="modal-content">
-      <div class="box">
-        <h1 class="title" v-if="editToEdit && editToEdit.id">
-          {{ $t('edits.edit_title') }} {{ editToEdit.name }}
-        </h1>
-        <h1 class="title" v-else>
-          {{ $t('edits.new_edit') }}
-        </h1>
-
-        <form @submit.prevent>
-          <combobox
-            :label="$t('edits.fields.episode')"
-            :options="episodeOptions"
-            v-model="form.parent_id"
-            v-if="isTVShow"
-          />
-          <text-field
-            ref="nameField"
-            :label="$t('edits.fields.name')"
-            :maxlength="160"
-            v-model.trim="form.name"
-            @enter="runConfirmation"
-            v-focus
-          />
-          <textarea-field
-            ref="descriptionField"
-            :label="$t('edits.fields.description')"
-            v-model="form.description"
-            @keyup.ctrl.enter="runConfirmation"
-            @keyup.meta.enter="runConfirmation"
-          />
-          <text-field
-            ref="resolutionField"
-            :label="$t('shots.fields.resolution')"
-            :placeholder="currentProduction?.resolution"
-            @enter="runConfirmation"
-            v-model.trim="form.data.resolution"
-          />
-          <template v-if="editToEdit">
-            <metadata-field
-              :key="descriptor.id"
-              :descriptor="descriptor"
-              :entity="editToEdit"
-              @enter="runConfirmation"
-              v-model="form.data[descriptor.field_name]"
-              v-for="descriptor in editMetadataDescriptors"
-            />
-          </template>
-        </form>
-
-        <modal-footer
-          :error-text="$t('edits.edit_error')"
-          :is-loading="isLoading"
-          :is-error="isError"
-          @confirm="confirmClicked"
-          @cancel="$emit('cancel')"
+  <base-modal :active="active" :title="modalTitle" @cancel="$emit('cancel')">
+    <form @submit.prevent>
+      <combobox
+        :label="$t('edits.fields.episode')"
+        :options="episodeOptions"
+        v-model="form.parent_id"
+        v-if="isTVShow"
+      />
+      <text-field
+        ref="nameField"
+        :label="$t('edits.fields.name')"
+        :maxlength="160"
+        v-model.trim="form.name"
+        @enter="runConfirmation"
+        v-focus
+      />
+      <textarea-field
+        :label="$t('edits.fields.description')"
+        v-model="form.description"
+        @keyup.ctrl.enter="runConfirmation"
+        @keyup.meta.enter="runConfirmation"
+      />
+      <text-field
+        :label="$t('shots.fields.resolution')"
+        :placeholder="currentProduction?.resolution"
+        @enter="runConfirmation"
+        v-model.trim="form.data.resolution"
+      />
+      <template v-if="editToEdit">
+        <metadata-field
+          :key="descriptor.id"
+          :descriptor="descriptor"
+          :entity="editToEdit"
+          @enter="runConfirmation"
+          v-model="form.data[descriptor.field_name]"
+          v-for="descriptor in editMetadataDescriptors"
         />
-      </div>
-    </div>
-  </div>
+      </template>
+    </form>
+
+    <modal-footer
+      :error-text="$t('edits.edit_error')"
+      :is-loading="isLoading"
+      :is-error="isError"
+      @confirm="confirmClicked"
+      @cancel="$emit('cancel')"
+    />
+  </base-modal>
 </template>
 
-<script>
-import { mapGetters } from 'vuex'
-
-import { modalMixin } from '@/components/modals/base_modal'
+<script setup>
+import { computed, onMounted, ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useStore } from 'vuex'
 
+import BaseModal from '@/components/modals/BaseModal.vue'
+import ModalFooter from '@/components/modals/ModalFooter.vue'
 import Combobox from '@/components/widgets/Combobox.vue'
 import MetadataField from '@/components/widgets/MetadataField.vue'
-import ModalFooter from '@/components/modals/ModalFooter.vue'
 import TextField from '@/components/widgets/TextField.vue'
 import TextareaField from '@/components/widgets/TextareaField.vue'
 
-export default {
-  name: 'edit-edit-modal',
-
-  mixins: [modalMixin],
-
-  components: {
-    Combobox,
-    MetadataField,
-    ModalFooter,
-    TextField,
-    TextareaField
-  },
+const { t } = useI18n()
+const store = useStore()
+
+// Props / Emits
+
+const props = defineProps({
+  active: { type: Boolean, default: false },
+  editToEdit: { type: Object, default: () => ({}) },
+  isError: { type: Boolean, default: false },
+  isLoading: { type: Boolean, default: false }
+})
+
+const emit = defineEmits(['cancel', 'confirm', 'confirm-and-stay'])
+
+// State
+
+const form = ref({
+  name: '',
+  description: '',
+  parent_id: null,
+  data: { resolution: '' }
+})
+const nameField = ref(null)
+
+// Computed
+
+const currentProduction = computed(() => store.getters.currentProduction)
+const currentEpisode = computed(() => store.getters.currentEpisode)
+const editMetadataDescriptors = computed(
+  () => store.getters.editMetadataDescriptors
+)
+const episodes = computed(() => store.getters.episodes)
+const isTVShow = computed(() => store.getters.isTVShow)
+const openProductions = computed(() => store.getters.openProductions)
+
+const isEditing = computed(() => Boolean(props.editToEdit?.id))
+
+const modalTitle = computed(() =>
+  isEditing.value
+    ? `${t('edits.edit_title')} ${props.editToEdit.name}`
+    : t('edits.new_edit')
+)
+
+const episodeOptions = computed(() => {
+  const options = episodes.value.map(episode => ({
+    label: episode.name,
+    value: episode.id
+  }))
+  // It might be useful to allow Edits not linked to any episodes.
+  return [{ label: '-', value: null }, ...options]
+})
+
+// Functions
+
+const confirmClicked = () => {
+  emit('confirm', form.value)
+}
 
-  props: {
-    active: {
-      type: Boolean,
-      default: false
-    },
-    isError: {
-      type: Boolean,
-      default: false
-    },
-    isLoading: {
-      type: Boolean,
-      default: false
-    },
-    editToEdit: {
-      type: Object,
-      default: () => {}
-    }
-  },
+const confirmAndStayClicked = () => {
+  emit('confirm-and-stay', form.value)
+}
 
-  emits: ['cancel', 'confirm', 'confirm-and-stay'],
+const runConfirmation = () => {
+  if (isEditing.value) {
+    confirmClicked()
+  } else {
+    confirmAndStayClicked()
+  }
+}
 
-  data() {
-    return {
-      form: {
-        name: '',
-        description: '',
-        parent_id: null,
-        data: {
-          resolution: ''
-        }
-      },
-      editSuccessText: ''
+const resetForm = () => {
+  if (isEditing.value) {
+    form.value = {
+      project_id: props.editToEdit.project_id,
+      name: props.editToEdit.name,
+      description: props.editToEdit.description,
+      parent_id: props.editToEdit.parent_id,
+      data: {
+        ...props.editToEdit.data,
+        resolution: props.editToEdit.data.resolution || ''
+      }
     }
-  },
-
-  computed: {
-    ...mapGetters([
-      'currentProduction',
-      'currentEpisode',
-      'editCreated',
-      'editMetadataDescriptors',
-      'episodes',
-      'isTVShow',
-      'openProductions'
-    ]),
-
-    episodeOptions() {
-      const options = this.episodes.map(episode => {
-        return {
-          label: episode.name,
-          value: episode.id
-        }
-      })
-      // It might be usefull to allow Edits not linked to any episodes.
-      return [{ label: '-', value: null }].concat(options)
+  } else {
+    if (openProductions.value.length > 0) {
+      form.value.project_id = currentProduction.value?.id || ''
     }
-  },
-
-  methods: {
-    runConfirmation() {
-      if (this.isEditing()) {
-        this.confirmClicked()
-      } else {
-        this.confirmAndStayClicked()
-      }
-    },
-
-    confirmAndStayClicked() {
-      this.$emit('confirm-and-stay', this.form)
-    },
-
-    confirmClicked() {
-      this.$emit('confirm', this.form)
-    },
+    form.value.name = ''
+    form.value.description = ''
+    form.value.parent_id = currentEpisode.value?.id || null
+    form.value.data = { resolution: '' }
+  }
+}
 
-    isEditing() {
-      return this.editToEdit && this.editToEdit.id
-    },
+// Watchers
 
-    resetForm() {
-      this.editSuccessText = ''
-      if (!this.isEditing()) {
-        if (this.openProductions.length > 0) {
-          this.form.project_id = this.currentProduction
-            ? this.currentProduction.id
-            : ''
-        }
-        this.form.name = ''
-        this.form.description = ''
-        this.form.parent_id = this.currentEpisode
-          ? this.currentEpisode.id
-          : null
-        this.form.data = {
-          resolution: ''
-        }
-      } else {
-        this.form = {
-          project_id: this.editToEdit.project_id,
-          name: this.editToEdit.name,
-          description: this.editToEdit.description,
-          parent_id: this.editToEdit.parent_id,
-          data:
-            {
-              ...this.editToEdit.data,
-              resolution: this.editToEdit.data.resolution || ''
-            } || {}
-        }
-      }
+watch(
+  () => props.active,
+  active => {
+    resetForm()
+    if (active) {
+      setTimeout(() => {
+        nameField.value?.focus()
+      }, 100)
     }
-  },
-
-  mounted() {
-    this.resetForm()
-  },
+  }
+)
 
-  watch: {
-    active() {
-      this.editSuccessText = ''
-      this.resetForm()
-      if (this.active) {
-        setTimeout(() => {
-          this.$refs.nameField.focus()
-        }, 100)
-      }
-    },
+watch(() => props.editToEdit, resetForm)
 
-    editToEdit() {
-      this.resetForm()
-    },
+// Lifecycle
 
-    editCreated() {
-      if (this.isEditing()) {
-        this.editSuccessText = this.$t('edits.edit_success', {
-          name: this.editCreated
-        })
-      } else {
-        this.editSuccessText = this.$t('edits.new_success', {
-          name: this.editCreated
-        })
-      }
-    }
-  }
-}
+onMounted(resetForm)
 </script>
-
-<style lang="scss" scoped>
-.modal-content .box p.text {
-  margin-bottom: 1em;
-}
-.is-danger {
-  color: #ff3860;
-  font-style: italic;
-}
-.title {
-  border-bottom: 2px solid #ddd;
-  padding-bottom: 0.5em;
-  margin-bottom: 1.2em;
-}
-.info-message {
-  margin-top: 1em;
-}
-
-.modal-content {
-  max-height: 80%;
-}
-</style>
diff --git a/src/components/modals/EditHistoryModal.vue b/src/components/modals/EditHistoryModal.vue
index 48aa911355..7eeb9a58b1 100644
--- a/src/components/modals/EditHistoryModal.vue
+++ b/src/components/modals/EditHistoryModal.vue
@@ -1,154 +1,121 @@
 <template>
-  <div
-    :class="{
-      modal: true,
-      'is-active': active
-    }"
+  <base-modal
+    :active="active"
+    :title="$t('edits.history')"
+    @cancel="$emit('cancel')"
   >
-    <div class="modal-background" @click="$emit('cancel')"></div>
-
-    <div class="modal-content">
-      <div class="box content">
-        <h1 class="title">
-          {{ $t('edits.history') }}
-        </h1>
-
-        <table class="table" ref="headerWrapper">
-          <thead class="table-header">
-            <tr>
-              <th class="date">{{ $t('main.date') }}</th>
-              <th class="name">{{ $t('edits.fields.name') }}</th>
-              <th class="person table-filler">
-                {{ $t('edits.fields.person') }}
-              </th>
-            </tr>
-          </thead>
-        </table>
-
-        <div class="table-body" v-if="!isLoading">
-          <table class="table">
-            <tbody class="table-body">
-              <tr
-                class="edit-version"
-                :key="version.id"
-                v-for="version in versions"
-              >
-                <td class="date">
-                  {{ formatDate(version.created_at) }}
-                </td>
-                <td class="name">
-                  {{ version.name }}
-                </td>
-                <td class="person table-filler">
-                  {{ getPersonFullName(version.person_id) }}
-                </td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-
-        <table-info :is-loading="isLoading" :is-error="isError" />
-
-        <div class="has-text-right modal-footer">
-          <button @click="$emit('cancel')" class="button is-link">
-            {{ $t('main.cancel') }}
-          </button>
-        </div>
-      </div>
+    <table class="table">
+      <thead class="table-header">
+        <tr>
+          <th class="date">{{ $t('main.date') }}</th>
+          <th class="name">{{ $t('edits.fields.name') }}</th>
+          <th class="person table-filler">
+            {{ $t('edits.fields.person') }}
+          </th>
+        </tr>
+      </thead>
+    </table>
+
+    <div class="table-body" v-if="!isLoading">
+      <table class="table">
+        <tbody class="table-body">
+          <tr
+            class="edit-version"
+            :key="version.id"
+            v-for="version in versions"
+          >
+            <td class="date">
+              {{ formatDate(version.created_at) }}
+            </td>
+            <td class="name">
+              {{ version.name }}
+            </td>
+            <td class="person table-filler">
+              {{ getPersonFullName(version.person_id) }}
+            </td>
+          </tr>
+        </tbody>
+      </table>
     </div>
-  </div>
-</template>
 
-<script>
-import { mapGetters, mapActions } from 'vuex'
+    <table-info :is-loading="isLoading" :is-error="isError" />
+
+    <div class="has-text-right modal-footer">
+      <button @click="$emit('cancel')" class="button is-link">
+        {{ $t('main.cancel') }}
+      </button>
+    </div>
+  </base-modal>
+</template>
 
-import { modalMixin } from '@/components/modals/base_modal'
+<script setup>
+import { computed, onMounted, ref, watch } from 'vue'
+import { useStore } from 'vuex'
 
 import { formatDate } from '@/lib/time'
 
+import BaseModal from '@/components/modals/BaseModal.vue'
 import TableInfo from '@/components/widgets/TableInfo.vue'
 
-export default {
-  name: 'edit-history-modal',
+const store = useStore()
 
-  mixins: [modalMixin],
+// Props / Emits
 
-  components: {
-    TableInfo
-  },
+const props = defineProps({
+  active: { type: Boolean, default: false },
+  edit: { type: Object, default: () => ({}) }
+})
 
-  props: {
-    active: {
-      type: Boolean,
-      default: false
-    },
-    edit: {
-      type: Object,
-      default: () => {}
-    }
-  },
+defineEmits(['cancel'])
 
-  emits: ['cancel'],
+// State
 
-  data() {
-    return {
-      isError: false,
-      isLoading: false,
-      versions: []
-    }
-  },
-
-  mounted() {
-    this.reset()
-  },
-
-  computed: {
-    ...mapGetters(['personMap'])
-  },
-
-  methods: {
-    ...mapActions(['loadEditHistory']),
-
-    formatDate(dateString) {
-      return formatDate(dateString)
-    },
-
-    getPersonFullName(personId) {
-      const person = this.personMap.get(personId)
-      return person ? person.full_name : ''
-    },
-
-    loadData() {
-      this.isError = false
-      this.isLoading = true
-      return this.loadEditHistory(this.edit.id)
-        .then(versions => {
-          this.versions = versions
-          this.isLoading = false
-        })
-        .catch(err => {
-          console.error(err)
-          this.isLoading = false
-          this.isError = true
-        })
-    },
-
-    reset() {
-      this.versions = []
-      this.isError = false
-      this.isLoading = false
-    }
-  },
-
-  watch: {
-    active() {
-      if (this.active) {
-        this.reset()
-        this.loadData()
-      }
-    }
+const isError = ref(false)
+const isLoading = ref(false)
+const versions = ref([])
+
+// Computed
+
+const personMap = computed(() => store.getters.personMap)
+
+// Functions
+
+const getPersonFullName = personId =>
+  personMap.value.get(personId)?.full_name || ''
+
+const reset = () => {
+  versions.value = []
+  isError.value = false
+  isLoading.value = false
+}
+
+const loadData = async () => {
+  isError.value = false
+  isLoading.value = true
+  try {
+    versions.value = await store.dispatch('loadEditHistory', props.edit.id)
+  } catch (err) {
+    console.error(err)
+    isError.value = true
   }
+  isLoading.value = false
 }
+
+// Watchers
+
+watch(
+  () => props.active,
+  active => {
+    if (active) {
+      reset()
+      loadData()
+    }
+  }
+)
+
+// Lifecycle
+
+onMounted(reset)
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/modals/EditSearchFilterGroupModal.vue b/src/components/modals/EditSearchFilterGroupModal.vue
index 1470a2373d..7ed767fdc1 100644
--- a/src/components/modals/EditSearchFilterGroupModal.vue
+++ b/src/components/modals/EditSearchFilterGroupModal.vue
@@ -1,170 +1,138 @@
 <template>
-  <div
-    :class="{
-      modal: true,
-      'is-active': active
-    }"
-  >
-    <div class="modal-background" @click="$emit('cancel')"></div>
-
-    <div class="modal-content">
-      <div class="box">
-        <h1 class="title" v-if="groupToEdit.id">
-          {{ $t('main.filter_group_edit') }} "{{ groupToEdit.name }}"
-        </h1>
-        <h1 class="title" v-else>
-          {{ $t('main.filter_group_add') }}
-        </h1>
-
-        <form @submit.prevent>
-          <text-field
-            ref="nameField"
-            :label="$t('assets.fields.name')"
-            v-model.trim="form.name"
-            @enter="runConfirmation"
-            v-focus
-          />
-          <color-field :label="$t('main.color')" v-model="form.color" />
-
-          <boolean-field
-            class="mt1"
-            :label="$t('main.is_shared')"
-            v-model="form.is_shared"
-            v-if="isCurrentUserManager && currentProduction"
-          />
-
-          <combobox-department
-            class="mt2"
-            :label="$t('main.department')"
-            v-model="form.department_id"
-            :top="true"
-            v-if="form.is_shared === 'true'"
-          />
-        </form>
-
-        <div v-if="groupToEdit?.id" class="mt2">
-          {{ $t('main.created_by') }}:
-          <people-name :person="personMap.get(groupToEdit.person_id)" />
-        </div>
-
-        <modal-footer
-          :error-text="$t('main.filter_group_error')"
-          :is-error="isError"
-          :is-loading="isLoading"
-          @confirm="runConfirmation"
-          @cancel="$emit('cancel')"
-        />
-      </div>
+  <base-modal :active="active" :title="modalTitle" @cancel="$emit('cancel')">
+    <form @submit.prevent>
+      <text-field
+        ref="nameField"
+        :label="$t('assets.fields.name')"
+        v-model.trim="form.name"
+        @enter="runConfirmation"
+        v-focus
+      />
+      <color-field :label="$t('main.color')" v-model="form.color" />
+
+      <boolean-field
+        class="mt1"
+        :label="$t('main.is_shared')"
+        v-model="form.is_shared"
+        v-if="isCurrentUserManager && currentProduction"
+      />
+
+      <combobox-department
+        class="mt2"
+        :label="$t('main.department')"
+        v-model="form.department_id"
+        :top="true"
+        v-if="form.is_shared === 'true'"
+      />
+    </form>
+
+    <div v-if="groupToEdit?.id" class="mt2">
+      {{ $t('main.created_by') }}:
+      <people-name :person="personMap.get(groupToEdit.person_id)" />
     </div>
-  </div>
+
+    <modal-footer
+      :error-text="$t('main.filter_group_error')"
+      :is-error="isError"
+      :is-loading="isLoading"
+      @confirm="runConfirmation"
+      @cancel="$emit('cancel')"
+    />
+  </base-modal>
 </template>
 
-<script>
+<script setup>
 /*
  * Modal used to edit filter group information.
  */
-import { mapGetters } from 'vuex'
-
-import { modalMixin } from '@/components/modals/base_modal'
+import { computed, ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useStore } from 'vuex'
 
+import BaseModal from '@/components/modals/BaseModal.vue'
+import ModalFooter from '@/components/modals/ModalFooter.vue'
 import BooleanField from '@/components/widgets/BooleanField.vue'
 import ColorField from '@/components/widgets/ColorField.vue'
 import ComboboxDepartment from '@/components/widgets/ComboboxDepartment.vue'
-import ModalFooter from '@/components/modals/ModalFooter.vue'
 import PeopleName from '@/components/widgets/PeopleName.vue'
 import TextField from '@/components/widgets/TextField.vue'
 
-export default {
-  name: 'edit-search-filter-group-modal',
-
-  mixins: [modalMixin],
-
-  components: {
-    BooleanField,
-    ColorField,
-    ComboboxDepartment,
-    ModalFooter,
-    PeopleName,
-    TextField
-  },
-
-  props: {
-    active: {
-      type: Boolean,
-      default: false
-    },
-    isError: {
-      type: Boolean,
-      default: false
-    },
-    isLoading: {
-      type: Boolean,
-      default: false
-    },
-    groupToEdit: {
-      type: Object,
-      default: () => {}
-    }
-  },
+const { t } = useI18n()
+const store = useStore()
 
-  emits: ['cancel', 'confirm'],
+// Props / Emits
 
-  data() {
-    return {
-      form: {
-        color: '',
-        name: '',
-        is_shared: 'false'
-      }
-    }
-  },
-
-  computed: {
-    ...mapGetters(['currentProduction', 'isCurrentUserManager', 'personMap'])
-  },
-
-  methods: {
-    runConfirmation(event) {
-      if (!this.form.name.length) {
-        this.$refs.nameField.focus()
-        return
-      }
-
-      if (!event || event.keyCode === 13 || !event.keyCode) {
-        const data = {
-          ...this.form,
-          is_shared: this.form.is_shared === 'true'
-        }
-        this.$emit('confirm', data)
-      }
+const props = defineProps({
+  active: { type: Boolean, default: false },
+  groupToEdit: { type: Object, default: () => ({}) },
+  isError: { type: Boolean, default: false },
+  isLoading: { type: Boolean, default: false }
+})
+
+const emit = defineEmits(['cancel', 'confirm'])
+
+// State
+
+const form = ref({ color: '', name: '', is_shared: 'false' })
+const nameField = ref(null)
+
+// Computed
+
+const currentProduction = computed(() => store.getters.currentProduction)
+const isCurrentUserManager = computed(() => store.getters.isCurrentUserManager)
+const personMap = computed(() => store.getters.personMap)
+
+const modalTitle = computed(() =>
+  props.groupToEdit?.id
+    ? `${t('main.filter_group_edit')} "${props.groupToEdit.name}"`
+    : t('main.filter_group_add')
+)
+
+// Functions
+
+const runConfirmation = event => {
+  if (!form.value.name.length) {
+    nameField.value?.focus()
+    return
+  }
+  if (!event || event.keyCode === 13 || !event.keyCode) {
+    emit('confirm', {
+      ...form.value,
+      is_shared: form.value.is_shared === 'true'
+    })
+  }
+}
+
+// Watchers
+
+watch(
+  () => props.groupToEdit,
+  group => {
+    const {
+      id,
+      color = '',
+      name = '',
+      is_shared = false,
+      department_id = null
+    } = group?.id ? group : {}
+    form.value = {
+      id,
+      color,
+      name,
+      is_shared: is_shared ? 'true' : 'false',
+      department_id
     }
-  },
-
-  watch: {
-    groupToEdit() {
-      const {
-        id,
-        color = '',
-        name = '',
-        is_shared = false,
-        department_id = null
-      } = this.groupToEdit?.id ? this.groupToEdit : {}
-      this.form = {
-        id,
-        color,
-        name,
-        is_shared: is_shared ? 'true' : 'false',
-        department_id
-      }
-    },
-
-    active() {
-      if (this.active) {
-        setTimeout(() => {
-          this.$refs.nameField.focus()
-        }, 100)
-      }
+  }
+)
+
+watch(
+  () => props.active,
+  active => {
+    if (active) {
+      setTimeout(() => {
+        nameField.value?.focus()
+      }, 100)
     }
   }
-}
+)
 </script>
diff --git a/src/components/modals/EditSearchFilterModal.vue b/src/components/modals/EditSearchFilterModal.vue
index 07875a1fd1..ef97d642e7 100644
--- a/src/components/modals/EditSearchFilterModal.vue
+++ b/src/components/modals/EditSearchFilterModal.vue
@@ -1,205 +1,170 @@
 <template>
-  <div
-    :class="{
-      modal: true,
-      'is-active': active
-    }"
+  <base-modal
+    :active="active"
+    :title="$t('main.search_query_edit')"
+    @cancel="$emit('cancel')"
   >
-    <div class="modal-background" @click="$emit('cancel')"></div>
-
-    <div class="modal-content">
-      <div class="box">
-        <h1 class="title">
-          {{ $t('main.search_query_edit') }}
-        </h1>
-
-        <form @submit.prevent>
-          <text-field
-            ref="nameField"
-            :label="$t('assets.fields.name')"
-            v-model.trim="form.name"
-            @enter="runConfirmation"
-            v-focus
-          />
-
-          <text-field
-            :label="$t('main.search_query')"
-            v-model.trim="form.search_query"
-            @enter="runConfirmation"
-          />
-
-          <boolean-field
-            :label="$t('main.is_shared')"
-            v-model="form.is_shared"
-            @click="form.search_filter_group_id = null"
-            v-if="isCurrentUserManager && currentProduction"
-          />
-
-          <combobox-department
-            class="mt2"
-            :label="$t('main.department')"
-            :top="true"
-            v-model="form.department_id"
-            v-if="form.is_shared === 'true'"
-          />
-
-          <combobox
-            class="mt2"
-            :label="$t('main.filter_group')"
-            :options="allowedGroups"
-            v-model="form.search_filter_group_id"
-            v-if="isGroupEnabled && allowedGroups.length > 1"
-          />
-        </form>
-
-        <div v-if="searchQueryToEdit?.id" class="mt2">
-          {{ $t('main.created_by') }}:
-          <people-name :person="personMap.get(searchQueryToEdit.person_id)" />
-        </div>
-
-        <modal-footer
-          :error-text="$t('main.search_query_edit_error')"
-          :is-error="isError"
-          :is-loading="isLoading"
-          @confirm="runConfirmation"
-          @cancel="$emit('cancel')"
-        />
-      </div>
+    <form @submit.prevent>
+      <text-field
+        ref="nameField"
+        :label="$t('assets.fields.name')"
+        v-model.trim="form.name"
+        @enter="runConfirmation"
+        v-focus
+      />
+
+      <text-field
+        :label="$t('main.search_query')"
+        v-model.trim="form.search_query"
+        @enter="runConfirmation"
+      />
+
+      <boolean-field
+        :label="$t('main.is_shared')"
+        v-model="form.is_shared"
+        @click="form.search_filter_group_id = null"
+        v-if="isCurrentUserManager && currentProduction"
+      />
+
+      <combobox-department
+        class="mt2"
+        :label="$t('main.department')"
+        :top="true"
+        v-model="form.department_id"
+        v-if="form.is_shared === 'true'"
+      />
+
+      <combobox
+        class="mt2"
+        :label="$t('main.filter_group')"
+        :options="allowedGroups"
+        v-model="form.search_filter_group_id"
+        v-if="isGroupEnabled && allowedGroups.length > 1"
+      />
+    </form>
+
+    <div v-if="searchQueryToEdit?.id" class="mt2">
+      {{ $t('main.created_by') }}:
+      <people-name :person="personMap.get(searchQueryToEdit.person_id)" />
     </div>
-  </div>
+
+    <modal-footer
+      :error-text="$t('main.search_query_edit_error')"
+      :is-error="isError"
+      :is-loading="isLoading"
+      @confirm="runConfirmation"
+      @cancel="$emit('cancel')"
+    />
+  </base-modal>
 </template>
 
-<script>
+<script setup>
 /*
  * Modal used to edit search filter information. Users prefer to rename the
-   filter label when it's too complex to read or too long.
+ * filter label when it's too complex to read or too long.
  */
-import { mapGetters } from 'vuex'
-
-import { modalMixin } from '@/components/modals/base_modal'
+import { computed, ref, watch } from 'vue'
+import { useStore } from 'vuex'
 
+import BaseModal from '@/components/modals/BaseModal.vue'
+import ModalFooter from '@/components/modals/ModalFooter.vue'
 import BooleanField from '@/components/widgets/BooleanField.vue'
 import Combobox from '@/components/widgets/Combobox.vue'
 import ComboboxDepartment from '@/components/widgets/ComboboxDepartment.vue'
-import ModalFooter from '@/components/modals/ModalFooter.vue'
 import PeopleName from '@/components/widgets/PeopleName.vue'
 import TextField from '@/components/widgets/TextField.vue'
 
-export default {
-  name: 'edit-search-filter-modal',
-
-  mixins: [modalMixin],
-
-  components: {
-    BooleanField,
-    Combobox,
-    ComboboxDepartment,
-    ModalFooter,
-    PeopleName,
-    TextField
-  },
-
-  props: {
-    active: {
-      type: Boolean,
-      default: false
-    },
-    isError: {
-      type: Boolean,
-      default: false
-    },
-    isGroupEnabled: {
-      type: Boolean,
-      default: false
-    },
-    isLoading: {
-      type: Boolean,
-      default: false
-    },
-    searchQueryToEdit: {
-      type: Object,
-      default: () => {}
-    },
-    groupOptions: {
-      type: Array,
-      default: () => []
-    }
-  },
+const store = useStore()
 
-  emits: ['cancel', 'confirm'],
+// Props / Emits
 
-  data() {
-    return {
-      form: {
-        id: null,
-        name: '',
-        search_filter_group_id: null,
-        search_query: '',
-        is_shared: 'false'
-      }
-    }
-  },
+const props = defineProps({
+  active: { type: Boolean, default: false },
+  groupOptions: { type: Array, default: () => [] },
+  isError: { type: Boolean, default: false },
+  isGroupEnabled: { type: Boolean, default: false },
+  isLoading: { type: Boolean, default: false },
+  searchQueryToEdit: { type: Object, default: () => ({}) }
+})
 
-  computed: {
-    ...mapGetters(['currentProduction', 'isCurrentUserManager', 'personMap']),
+const emit = defineEmits(['cancel', 'confirm'])
 
-    allowedGroups() {
-      return this.groupOptions.filter(
-        group =>
-          group.is_shared === (this.form.is_shared === 'true') ||
-          group.value === null
-      )
-    }
-  },
+// State
 
-  methods: {
-    runConfirmation(event) {
-      if (!this.form.name.length) {
-        this.$refs.nameField.focus()
-        return
-      }
+const form = ref({
+  id: null,
+  name: '',
+  search_filter_group_id: null,
+  search_query: '',
+  is_shared: 'false'
+})
+const nameField = ref(null)
 
-      if (!event || event.keyCode === 13 || !event.keyCode) {
-        const data = {
-          id: this.searchQueryToEdit.id,
-          ...this.form,
-          is_shared: this.form.is_shared === 'true'
-        }
-        this.$emit('confirm', data)
-      }
-    }
-  },
-
-  watch: {
-    searchQueryToEdit() {
-      if (this.searchQueryToEdit?.id) {
-        this.form = {
-          id: this.searchQueryToEdit.id,
-          name: this.searchQueryToEdit.name,
-          search_filter_group_id: this.searchQueryToEdit.search_filter_group_id,
-          search_query: this.searchQueryToEdit.search_query,
-          is_shared: this.searchQueryToEdit.is_shared ? 'true' : 'false',
-          department_id: this.searchQueryToEdit.department_id
-        }
-      } else {
-        this.form = {
-          id: null,
-          name: '',
-          search_filter_group_id: null,
-          search_query: '',
-          is_shared: 'false',
-          department_id: null
-        }
-      }
-    },
+// Computed
 
-    active() {
-      if (this.active) {
-        setTimeout(() => {
-          this.$refs.nameField.focus()
-        }, 100)
+const currentProduction = computed(() => store.getters.currentProduction)
+const isCurrentUserManager = computed(() => store.getters.isCurrentUserManager)
+const personMap = computed(() => store.getters.personMap)
+
+const allowedGroups = computed(() =>
+  props.groupOptions.filter(
+    group =>
+      group.is_shared === (form.value.is_shared === 'true') ||
+      group.value === null
+  )
+)
+
+// Functions
+
+const runConfirmation = event => {
+  if (!form.value.name.length) {
+    nameField.value?.focus()
+    return
+  }
+  if (!event || event.keyCode === 13 || !event.keyCode) {
+    emit('confirm', {
+      id: props.searchQueryToEdit.id,
+      ...form.value,
+      is_shared: form.value.is_shared === 'true'
+    })
+  }
+}
+
+// Watchers
+
+watch(
+  () => props.searchQueryToEdit,
+  searchQuery => {
+    if (searchQuery?.id) {
+      form.value = {
+        id: searchQuery.id,
+        name: searchQuery.name,
+        search_filter_group_id: searchQuery.search_filter_group_id,
+        search_query: searchQuery.search_query,
+        is_shared: searchQuery.is_shared ? 'true' : 'false',
+        department_id: searchQuery.department_id
+      }
+    } else {
+      form.value = {
+        id: null,
+        name: '',
+        search_filter_group_id: null,
+        search_query: '',
+        is_shared: 'false',
+        department_id: null
       }
     }
   }
-}
+)
+
+watch(
+  () => props.active,
+  active => {
+    if (active) {
+      setTimeout(() => {
+        nameField.value?.focus()
+      }, 100)
+    }
+  }
+)
 </script>

From 645ec6545c83d0ade7a8402ca3a15f5860df8ac5 Mon Sep 17 00:00:00 2001
From: Frank Rousseau <frank@cg-wire.com>
Date: Fri, 1 May 2026 23:31:12 +0200
Subject: [PATCH 18/28] [modals] Convert import / history / shortcut modals
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Convert four more modals from Options API: ImportEdlModal,
ImportModal, ShotHistoryModal, ShortcutModal. Each switches to
wrapping its content in <base-modal> with a static title and drops
modalMixin.

Notable details:
- ImportEdlModal: pull the duplicated TVShow-naming-convention logic
  in mounted() and the currentProduction watcher into a single
  updateNamingConvention helper.
- ImportModal: bug fix — tabs array was using $t inside data() so the
  tab labels were frozen at first render and didn't react to locale
  switches; now a computed.
- ShotHistoryModal: same pattern as EditHistoryModal (just migrated).
  Promise chain → async/await; drop the unused headerWrapper template
  ref; use the imported formatDate directly.
- ShortcutModal: bug fix — the large shortcutGroups array was using
  $t inside data() (locale-frozen); now a computed. Object literals
  compressed to single-line.

ImportEdlModal and ImportModal both need eslint-disable no-unused-vars
on the FileUpload import — vue-eslint-parser's same false positive
hit before on DepartmentList / EditBackgroundModal.

CSS: dropped dead .modal-content .box p.text on ImportEdlModal.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/components/modals/ImportEdlModal.vue   | 281 ++++++++-----------
 src/components/modals/ImportModal.vue      | 307 +++++++++------------
 src/components/modals/ShortcutModal.vue    | 264 +++++++-----------
 src/components/modals/ShotHistoryModal.vue | 250 ++++++++---------
 4 files changed, 453 insertions(+), 649 deletions(-)

diff --git a/src/components/modals/ImportEdlModal.vue b/src/components/modals/ImportEdlModal.vue
index 6c73231d6c..31b46558a0 100644
--- a/src/components/modals/ImportEdlModal.vue
+++ b/src/components/modals/ImportEdlModal.vue
@@ -1,177 +1,134 @@
 <template>
-  <div
-    :class="{
-      modal: true,
-      'is-active': active
-    }"
+  <base-modal
+    :active="active"
+    :title="$t('main.edl.import_title')"
+    @cancel="$emit('cancel')"
   >
-    <div class="modal-background" @click="$emit('cancel')"></div>
-
-    <div class="modal-content">
-      <div class="box content">
-        <h1 class="title">
-          {{ $t('main.edl.import_title') }}
-        </h1>
-
-        <p>
-          {{ $t('main.edl.explanation') }}
-        </p>
-
-        <p>
-          {{ $t('main.edl.select_file') }}
-        </p>
-        <file-upload
-          @fileselected="onFileSelected"
-          :label="$t('main.edl.upload_file')"
-          accept=".edl, .xml, .otio, .fcpxml"
-          ref="inputFile"
-        />
-
-        <br />
-        <text-field
-          ref="namingConventionField"
-          :label="$t('main.edl.naming_convention')"
-          v-model="form.namingConvention"
-          @enter="onConfirmClicked"
-          v-focus
-        />
-
-        <checkbox
-          :toggle="true"
-          :label="$t('main.edl.match_case')"
-          v-model="form.matchCase"
-        />
-
-        <modal-footer
-          :confirm-label="$t('main.edl.upload_edl')"
-          :error-text="errorText"
-          :is-loading="isLoading"
-          :is-disabled="formData === null"
-          :is-error="isError"
-          @confirm="onConfirmClicked"
-          @cancel="$emit('cancel')"
-        />
-      </div>
-    </div>
-  </div>
+    <p>
+      {{ $t('main.edl.explanation') }}
+    </p>
+
+    <p>
+      {{ $t('main.edl.select_file') }}
+    </p>
+    <file-upload
+      ref="inputFile"
+      @fileselected="onFileSelected"
+      :label="$t('main.edl.upload_file')"
+      accept=".edl, .xml, .otio, .fcpxml"
+    />
+
+    <br />
+    <text-field
+      :label="$t('main.edl.naming_convention')"
+      v-model="form.namingConvention"
+      @enter="onConfirmClicked"
+      v-focus
+    />
+
+    <checkbox
+      :toggle="true"
+      :label="$t('main.edl.match_case')"
+      v-model="form.matchCase"
+    />
+
+    <modal-footer
+      :confirm-label="$t('main.edl.upload_edl')"
+      :error-text="errorText"
+      :is-loading="isLoading"
+      :is-disabled="formData === null"
+      :is-error="isError"
+      @confirm="onConfirmClicked"
+      @cancel="$emit('cancel')"
+    />
+  </base-modal>
 </template>
 
-<script>
-import { mapGetters } from 'vuex'
-
-import { modalMixin } from '@/components/modals/base_modal'
+<script setup>
+import { computed, onMounted, ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useStore } from 'vuex'
 
+import BaseModal from '@/components/modals/BaseModal.vue'
+import ModalFooter from '@/components/modals/ModalFooter.vue'
 import Checkbox from '@/components/widgets/Checkbox.vue'
+// eslint-disable-next-line no-unused-vars
 import FileUpload from '@/components/widgets/FileUpload.vue'
-import ModalFooter from '@/components/modals/ModalFooter.vue'
 import TextField from '@/components/widgets/TextField.vue'
 
-export default {
-  name: 'import-edl-modal',
-
-  mixins: [modalMixin],
-
-  components: {
-    Checkbox,
-    FileUpload,
-    ModalFooter,
-    TextField
-  },
-
-  emits: ['cancel', 'confirm'],
-
-  data() {
-    return {
-      form: {
-        namingConvention: '${project_name}_${sequence_name}-${shot_name}',
-        matchCase: true
-      },
-      formData: null
-    }
-  },
-
-  props: {
-    active: {
-      type: Boolean,
-      default: false
-    },
-    isLoading: {
-      type: Boolean,
-      default: false
-    },
-    isError: {
-      type: Boolean,
-      default: false
-    },
-    importError: {
-      type: Error,
-      default: null
-    }
-  },
-
-  mounted() {
-    this.formData = null
-    if (this.isTVShow)
-      this.form.namingConvention =
-        '${project_name}_${episode_name}-${sequence_name}-${shot_name}'
-  },
-
-  computed: {
-    ...mapGetters(['currentProduction', 'isTVShow']),
-
-    errorText() {
-      let text = this.$t('main.edl.error_upload')
-      if (this.importError && this.importError.status === 400) {
-        const res = this.importError.response
-        text += ` ${res.body.message}`
-      }
-      return text
-    }
-  },
-
-  methods: {
-    onFileSelected(formData) {
-      this.formData = formData
-    },
-
-    onConfirmClicked() {
-      this.$emit(
-        'confirm',
-        this.formData.get('file'),
-        this.form.namingConvention,
-        this.form.matchCase
-      )
-    },
-
-    reset() {
-      this.$refs.inputFile.reset()
-    }
-  },
-
-  watch: {
-    currentProduction() {
-      if (this.isTVShow)
-        this.form.namingConvention =
-          '${project_name}_${episode_name}-${sequence_name}-${shot_name}'
-      else
-        this.form.namingConvention =
-          '${project_name}_${sequence_name}-${shot_name}'
-    },
-
-    active() {
-      this.formData = null
-      this.reset()
-    }
+const { t } = useI18n()
+const store = useStore()
+
+// Props / Emits
+
+const props = defineProps({
+  active: { type: Boolean, default: false },
+  importError: { type: Error, default: null },
+  isError: { type: Boolean, default: false },
+  isLoading: { type: Boolean, default: false }
+})
+
+const emit = defineEmits(['cancel', 'confirm'])
+
+// State
+
+const form = ref({
+  namingConvention: '${project_name}_${sequence_name}-${shot_name}',
+  matchCase: true
+})
+const formData = ref(null)
+const inputFile = ref(null)
+
+// Computed
+
+const currentProduction = computed(() => store.getters.currentProduction)
+const isTVShow = computed(() => store.getters.isTVShow)
+
+const errorText = computed(() => {
+  let text = t('main.edl.error_upload')
+  if (props.importError?.status === 400) {
+    text += ` ${props.importError.response.body.message}`
   }
+  return text
+})
+
+// Functions
+
+const onFileSelected = data => {
+  formData.value = data
 }
-</script>
 
-<style lang="scss" scoped>
-.modal-content .box p.text {
-  margin-bottom: 1em;
+const onConfirmClicked = () => {
+  emit(
+    'confirm',
+    formData.value.get('file'),
+    form.value.namingConvention,
+    form.value.matchCase
+  )
 }
 
-.error {
-  margin-top: 1em;
+const updateNamingConvention = () => {
+  form.value.namingConvention = isTVShow.value
+    ? '${project_name}_${episode_name}-${sequence_name}-${shot_name}'
+    : '${project_name}_${sequence_name}-${shot_name}'
 }
-</style>
+
+// Watchers
+
+watch(currentProduction, updateNamingConvention)
+
+watch(
+  () => props.active,
+  () => {
+    formData.value = null
+    inputFile.value?.reset()
+  }
+)
+
+// Lifecycle
+
+onMounted(() => {
+  formData.value = null
+  if (isTVShow.value) updateNamingConvention()
+})
+</script>
diff --git a/src/components/modals/ImportModal.vue b/src/components/modals/ImportModal.vue
index a00b6c11e2..2ed4c4a385 100644
--- a/src/components/modals/ImportModal.vue
+++ b/src/components/modals/ImportModal.vue
@@ -1,186 +1,143 @@
 <template>
-  <div
-    :class="{
-      modal: true,
-      'is-active': active
-    }"
+  <base-modal
+    :active="active"
+    :title="$t('main.csv.import_title')"
+    @cancel="$emit('cancel')"
   >
-    <div class="modal-background" @click="$emit('cancel')"></div>
-
-    <div class="modal-content">
-      <div class="box">
-        <h1 class="title">
-          {{ $t('main.csv.import_title') }}
-        </h1>
-
-        <div v-if="columns.length > 0" class="mb1">
-          {{ $t('main.csv.required_fields') }}
-          <ul>
-            <li v-for="column in columns" :key="column">
-              {{ column }}
-            </li>
-          </ul>
-        </div>
-        <div v-if="optionalColumns.length > 0" class="mb1">
-          {{ $t('main.csv.optional_fields') }}
-          <ul>
-            <li v-for="optionalColumn in optionalColumns" :key="optionalColumn">
-              {{ optionalColumn }}
-            </li>
-          </ul>
-        </div>
-        <div v-if="genericColumns.length > 0" class="mb1">
-          {{ $t('main.csv.generic_fields') }}
-          <ul>
-            <li v-for="genericColumn in genericColumns" :key="genericColumn">
-              {{ genericColumn }}
-            </li>
-          </ul>
-        </div>
-
-        <div class="tabs">
-          <ul>
-            <li
-              :class="{ 'is-active': activeTab === tab.id }"
-              :key="`tab-${tab.id}`"
-              v-for="tab in tabs"
-            >
-              <a @click="activeTab = tab.id">{{ tab.name }}</a>
-            </li>
-          </ul>
-        </div>
-        <div v-show="activeTab === 'file'">
-          <p>{{ $t('main.csv.select_file') }}</p>
-          <file-upload
-            @fileselected="onFileSelected"
-            :label="$t('main.csv.upload_file')"
-            ref="inputFile"
-          />
-        </div>
-        <div v-show="activeTab === 'text'">
-          <p>{{ $t('main.csv.paste_code') }}</p>
-          <textarea
-            class="paste-area"
-            :placeholder="pasteAreaPlaceholder"
-            v-model.trim="pastedCode"
-          ></textarea>
-        </div>
-
-        <modal-footer
-          :confirm-label="$t('main.csv.preview')"
-          :error-text="$t('main.csv.error_upload')"
-          :is-loading="isLoading"
-          :is-disabled="!isValid"
-          :is-error="isError"
-          @confirm="onConfirmClicked"
-          @cancel="$emit('cancel')"
-        />
-      </div>
+    <div v-if="columns.length > 0" class="mb1">
+      {{ $t('main.csv.required_fields') }}
+      <ul>
+        <li v-for="column in columns" :key="column">
+          {{ column }}
+        </li>
+      </ul>
     </div>
-  </div>
+    <div v-if="optionalColumns.length > 0" class="mb1">
+      {{ $t('main.csv.optional_fields') }}
+      <ul>
+        <li v-for="optionalColumn in optionalColumns" :key="optionalColumn">
+          {{ optionalColumn }}
+        </li>
+      </ul>
+    </div>
+    <div v-if="genericColumns.length > 0" class="mb1">
+      {{ $t('main.csv.generic_fields') }}
+      <ul>
+        <li v-for="genericColumn in genericColumns" :key="genericColumn">
+          {{ genericColumn }}
+        </li>
+      </ul>
+    </div>
+
+    <div class="tabs">
+      <ul>
+        <li
+          :class="{ 'is-active': activeTab === tab.id }"
+          :key="`tab-${tab.id}`"
+          v-for="tab in tabs"
+        >
+          <a @click="activeTab = tab.id">{{ tab.name }}</a>
+        </li>
+      </ul>
+    </div>
+    <div v-show="activeTab === 'file'">
+      <p>{{ $t('main.csv.select_file') }}</p>
+      <file-upload
+        ref="inputFile"
+        @fileselected="onFileSelected"
+        :label="$t('main.csv.upload_file')"
+      />
+    </div>
+    <div v-show="activeTab === 'text'">
+      <p>{{ $t('main.csv.paste_code') }}</p>
+      <textarea
+        class="paste-area"
+        :placeholder="pasteAreaPlaceholder"
+        v-model.trim="pastedCode"
+      ></textarea>
+    </div>
+
+    <modal-footer
+      :confirm-label="$t('main.csv.preview')"
+      :error-text="$t('main.csv.error_upload')"
+      :is-loading="isLoading"
+      :is-disabled="!isValid"
+      :is-error="isError"
+      @confirm="onConfirmClicked"
+      @cancel="$emit('cancel')"
+    />
+  </base-modal>
 </template>
 
-<script>
-import FileUpload from '@/components/widgets/FileUpload.vue'
-import { modalMixin } from '@/components/modals/base_modal'
+<script setup>
+import { computed, ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import BaseModal from '@/components/modals/BaseModal.vue'
 import ModalFooter from '@/components/modals/ModalFooter.vue'
+// eslint-disable-next-line no-unused-vars
+import FileUpload from '@/components/widgets/FileUpload.vue'
+
+const { t } = useI18n()
+
+// Props / Emits
+
+const props = defineProps({
+  active: { type: Boolean, default: false },
+  columns: { type: Array, default: () => [] },
+  genericColumns: { type: Array, default: () => [] },
+  isError: { type: Boolean, default: false },
+  isLoading: { type: Boolean, default: false },
+  optionalColumns: { type: Array, default: () => [] }
+})
+
+const emit = defineEmits(['cancel', 'confirm'])
 
-export default {
-  name: 'import-modal',
-
-  mixins: [modalMixin],
-
-  components: {
-    FileUpload,
-    ModalFooter
-  },
-
-  emits: ['cancel', 'confirm'],
-
-  data() {
-    return {
-      formData: null,
-      pastedCode: '',
-      activeTab: 'file',
-      tabs: [
-        {
-          id: 'file',
-          name: this.$t('main.csv.tab_select_file')
-        },
-        {
-          id: 'text',
-          name: this.$t('main.csv.tab_paste_code')
-        }
-      ]
-    }
-  },
-
-  props: {
-    active: {
-      type: Boolean,
-      default: false
-    },
-    columns: {
-      type: Array,
-      default: () => []
-    },
-    optionalColumns: {
-      type: Array,
-      default: () => []
-    },
-    genericColumns: {
-      type: Array,
-      default: () => []
-    },
-    isLoading: {
-      type: Boolean,
-      default: false
-    },
-    isError: {
-      type: Boolean,
-      default: false
-    }
-  },
-
-  computed: {
-    isValid() {
-      return (
-        (this.activeTab === 'file' && this.formData) ||
-        (this.activeTab === 'text' && this.pastedCode)
-      )
-    },
-
-    pasteAreaPlaceholder() {
-      return this.columns.join(';')
-    }
-  },
-
-  methods: {
-    onFileSelected(formData) {
-      this.formData = formData
-      this.onConfirmClicked()
-    },
-
-    onConfirmClicked() {
-      const mode = this.activeTab
-      const data = mode === 'file' ? this.formData : this.pastedCode
-      this.$emit('confirm', data, mode)
-    },
-
-    reset() {
-      this.$refs.inputFile?.reset()
-      this.activeTab = 'file'
-      this.formData = null
-      this.pastedCode = ''
-    }
-  },
-
-  watch: {
-    active() {
-      this.reset()
-    }
-  }
+// State
+
+const activeTab = ref('file')
+const formData = ref(null)
+const inputFile = ref(null)
+const pastedCode = ref('')
+
+// Computed
+
+const tabs = computed(() => [
+  { id: 'file', name: t('main.csv.tab_select_file') },
+  { id: 'text', name: t('main.csv.tab_paste_code') }
+])
+
+const isValid = computed(
+  () =>
+    (activeTab.value === 'file' && formData.value) ||
+    (activeTab.value === 'text' && pastedCode.value)
+)
+
+const pasteAreaPlaceholder = computed(() => props.columns.join(';'))
+
+// Functions
+
+const onConfirmClicked = () => {
+  const mode = activeTab.value
+  const data = mode === 'file' ? formData.value : pastedCode.value
+  emit('confirm', data, mode)
 }
+
+const onFileSelected = data => {
+  formData.value = data
+  onConfirmClicked()
+}
+
+const reset = () => {
+  inputFile.value?.reset()
+  activeTab.value = 'file'
+  formData.value = null
+  pastedCode.value = ''
+}
+
+// Watchers
+
+watch(() => props.active, reset)
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/modals/ShortcutModal.vue b/src/components/modals/ShortcutModal.vue
index d12d5f06d5..da09ae7bb5 100644
--- a/src/components/modals/ShortcutModal.vue
+++ b/src/components/modals/ShortcutModal.vue
@@ -1,191 +1,113 @@
 <template>
-  <div
-    :class="{
-      modal: true,
-      'is-active': active
-    }"
+  <base-modal
+    :active="active"
+    :title="$t('keyboard.shortcuts')"
+    @cancel="$emit('cancel')"
   >
-    <div class="modal-background" @click="$emit('cancel')"></div>
-
-    <div class="modal-content">
-      <div class="box content">
-        <h1 class="title">
-          {{ $t('keyboard.shortcuts') }}
-        </h1>
-
-        <div
-          class="mt2"
-          :key="shortcutGroup.label"
-          v-for="shortcutGroup in shortcutGroups"
-        >
-          <h3>
-            {{ $t(shortcutGroup.label) }}
-          </h3>
+    <div
+      class="mt2"
+      :key="shortcutGroup.label"
+      v-for="shortcutGroup in shortcutGroups"
+    >
+      <h3>
+        {{ $t(shortcutGroup.label) }}
+      </h3>
 
+      <div
+        class="shortcut"
+        :key="`shortcut-${i}`"
+        v-for="(shortcut, i) in shortcutGroup.shortcuts"
+      >
+        <div class="shortcut-key-wrapper">
           <div
-            class="shortcut"
-            :key="`shortcut-${i}`"
-            v-for="(shortcut, i) in shortcutGroup.shortcuts"
+            :key="`shortcut-key-${i}-${j}`"
+            v-for="(key, j) in shortcut.keys"
           >
-            <div class="shortcut-key-wrapper">
-              <div
-                :key="`shortcut-key-${i}-${j}`"
-                v-for="(key, j) in shortcut.keys"
-              >
-                <span class="shortcut-key">{{ key }}</span>
-                <span
-                  class="shortcut-plus"
-                  v-if="j !== shortcut.keys.length - 1"
-                  >+
-                </span>
-              </div>
-            </div>
-            <span class="shortcut-text">{{ shortcut.text }}</span>
+            <span class="shortcut-key">{{ key }}</span>
+            <span class="shortcut-plus" v-if="j !== shortcut.keys.length - 1"
+              >+
+            </span>
           </div>
         </div>
-
-        <div class="has-text-right modal-footer">
-          <button @click="$emit('cancel')" class="button is-link">
-            {{ $t('main.cancel') }}
-          </button>
-        </div>
+        <span class="shortcut-text">{{ shortcut.text }}</span>
       </div>
     </div>
-  </div>
+
+    <div class="has-text-right modal-footer">
+      <button @click="$emit('cancel')" class="button is-link">
+        {{ $t('main.cancel') }}
+      </button>
+    </div>
+  </base-modal>
 </template>
 
-<script>
-import { modalMixin } from '@/components/modals/base_modal'
+<script setup>
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
 
-export default {
-  name: 'shortcut-modal',
+import BaseModal from '@/components/modals/BaseModal.vue'
 
-  mixins: [modalMixin],
+const { t } = useI18n()
 
-  props: {
-    active: {
-      type: Boolean,
-      default: false
-    }
-  },
+defineProps({
+  active: { type: Boolean, default: false }
+})
 
-  emits: ['cancel'],
+defineEmits(['cancel'])
 
-  data() {
-    return {
-      shortcutGroups: [
-        {
-          label: 'keyboard.navigation',
-          shortcuts: [
-            {
-              keys: ['Alt', '←'],
-              text: this.$t('keyboard.altleft')
-            },
-            {
-              keys: ['Alt', '↑'],
-              text: this.$t('keyboard.altup')
-            },
-            {
-              keys: ['Alt', '→'],
-              text: this.$t('keyboard.altright')
-            },
-            {
-              keys: ['Alt', '↓'],
-              text: this.$t('keyboard.altdown')
-            },
-            {
-              keys: ['Ctrl', '←'],
-              text: this.$t('keyboard.ctrlleft')
-            },
-            {
-              keys: ['Ctrl', '↑'],
-              text: this.$t('keyboard.ctrlup')
-            },
-            {
-              keys: ['Ctrl', '→'],
-              text: this.$t('keyboard.ctrlright')
-            },
-            {
-              keys: ['Ctrl', '↓'],
-              text: this.$t('keyboard.ctrldown')
-            }
-          ]
-        },
-        {
-          label: 'keyboard.playlist_navigation',
-          shortcuts: [
-            {
-              keys: ['Alt', 'j'],
-              text: this.$t('keyboard.altj')
-            },
-            {
-              keys: ['Alt', 'k'],
-              text: this.$t('keyboard.altk')
-            },
-            {
-              keys: ['Home'],
-              text: this.$t('keyboard.plhome')
-            },
-            {
-              keys: ['End'],
-              text: this.$t('keyboard.plend')
-            },
-            {
-              keys: ['Alt', '→'],
-              text: this.$t('keyboard.plaltright')
-            },
-            {
-              keys: ['Alt', '←'],
-              text: this.$t('keyboard.plaltleft')
-            },
-            {
-              keys: ['Alt', 'o'],
-              text: this.$t('keyboard.plalto')
-            }
-          ]
-        },
-        {
-          label: 'keyboard.object_viewer',
-          shortcuts: [
-            {
-              keys: ['Ctrl', 'Mouse Left Click', 'Drag Horizontal'],
-              text: this.$t('keyboard.rotate_hdr')
-            },
-            {
-              keys: ['Mouse Middle Click', 'Drag Horizontal'],
-              text: this.$t('keyboard.rotate_hdr')
-            },
-            {
-              keys: ['Alt', 'Mouse Left Click', 'Drag Vertical'],
-              text: this.$t('keyboard.change_fov')
-            }
-          ]
-        },
-        {
-          label: 'keyboard.annotations',
-          shortcuts: [
-            {
-              keys: ['Ctrl', 'z'],
-              text: this.$t('keyboard.undo')
-            },
-            {
-              keys: ['Alt', 'r'],
-              text: this.$t('keyboard.redo')
-            },
-            {
-              keys: ['Alt', 'd'],
-              text: this.$t('keyboard.draw')
-            },
-            {
-              keys: ['Suppr'],
-              text: this.$t('keyboard.remove_annotation')
-            }
-          ]
-        }
-      ]
-    }
+const shortcutGroups = computed(() => [
+  {
+    label: 'keyboard.navigation',
+    shortcuts: [
+      { keys: ['Alt', '←'], text: t('keyboard.altleft') },
+      { keys: ['Alt', '↑'], text: t('keyboard.altup') },
+      { keys: ['Alt', '→'], text: t('keyboard.altright') },
+      { keys: ['Alt', '↓'], text: t('keyboard.altdown') },
+      { keys: ['Ctrl', '←'], text: t('keyboard.ctrlleft') },
+      { keys: ['Ctrl', '↑'], text: t('keyboard.ctrlup') },
+      { keys: ['Ctrl', '→'], text: t('keyboard.ctrlright') },
+      { keys: ['Ctrl', '↓'], text: t('keyboard.ctrldown') }
+    ]
+  },
+  {
+    label: 'keyboard.playlist_navigation',
+    shortcuts: [
+      { keys: ['Alt', 'j'], text: t('keyboard.altj') },
+      { keys: ['Alt', 'k'], text: t('keyboard.altk') },
+      { keys: ['Home'], text: t('keyboard.plhome') },
+      { keys: ['End'], text: t('keyboard.plend') },
+      { keys: ['Alt', '→'], text: t('keyboard.plaltright') },
+      { keys: ['Alt', '←'], text: t('keyboard.plaltleft') },
+      { keys: ['Alt', 'o'], text: t('keyboard.plalto') }
+    ]
+  },
+  {
+    label: 'keyboard.object_viewer',
+    shortcuts: [
+      {
+        keys: ['Ctrl', 'Mouse Left Click', 'Drag Horizontal'],
+        text: t('keyboard.rotate_hdr')
+      },
+      {
+        keys: ['Mouse Middle Click', 'Drag Horizontal'],
+        text: t('keyboard.rotate_hdr')
+      },
+      {
+        keys: ['Alt', 'Mouse Left Click', 'Drag Vertical'],
+        text: t('keyboard.change_fov')
+      }
+    ]
+  },
+  {
+    label: 'keyboard.annotations',
+    shortcuts: [
+      { keys: ['Ctrl', 'z'], text: t('keyboard.undo') },
+      { keys: ['Alt', 'r'], text: t('keyboard.redo') },
+      { keys: ['Alt', 'd'], text: t('keyboard.draw') },
+      { keys: ['Suppr'], text: t('keyboard.remove_annotation') }
+    ]
   }
-}
+])
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/modals/ShotHistoryModal.vue b/src/components/modals/ShotHistoryModal.vue
index 91a583b9af..a0e5ca8da3 100644
--- a/src/components/modals/ShotHistoryModal.vue
+++ b/src/components/modals/ShotHistoryModal.vue
@@ -1,161 +1,129 @@
 <template>
-  <div
-    :class="{
-      modal: true,
-      'is-active': active
-    }"
+  <base-modal
+    :active="active"
+    :title="$t('shots.history')"
+    @cancel="$emit('cancel')"
   >
-    <div class="modal-background" @click="$emit('cancel')"></div>
-
-    <div class="modal-content">
-      <div class="box content">
-        <h1 class="title">
-          {{ $t('shots.history') }}
-        </h1>
-
-        <table class="table" ref="headerWrapper">
-          <thead class="table-header">
-            <tr>
-              <th class="date">{{ $t('main.date') }}</th>
-              <th class="name">{{ $t('shots.fields.name') }}</th>
-              <th class="frame-in">{{ $t('shots.fields.frame_in') }}</th>
-              <th class="frame-out">{{ $t('shots.fields.frame_out') }}</th>
-              <th class="person table-filler">
-                {{ $t('shots.fields.person') }}
-              </th>
-            </tr>
-          </thead>
-        </table>
-
-        <div class="table-body" v-if="!isLoading">
-          <table class="table">
-            <tbody class="table-body">
-              <tr
-                class="shot-version"
-                :key="version.id"
-                v-for="version in versions"
-              >
-                <td class="date">
-                  {{ formatDate(version.created_at) }}
-                </td>
-                <td class="name">
-                  {{ version.name }}
-                </td>
-                <td class="frame-in">
-                  {{ version.data.frame_in }}
-                </td>
-                <td class="frame-out">
-                  {{ version.data.frame_out }}
-                </td>
-                <td class="person table-filler">
-                  {{ getPersonFullName(version.person_id) }}
-                </td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-
-        <table-info :is-loading="isLoading" :is-error="isError" />
-
-        <div class="has-text-right modal-footer">
-          <button @click="$emit('cancel')" class="button is-link">
-            {{ $t('main.cancel') }}
-          </button>
-        </div>
-      </div>
+    <table class="table">
+      <thead class="table-header">
+        <tr>
+          <th class="date">{{ $t('main.date') }}</th>
+          <th class="name">{{ $t('shots.fields.name') }}</th>
+          <th class="frame-in">{{ $t('shots.fields.frame_in') }}</th>
+          <th class="frame-out">{{ $t('shots.fields.frame_out') }}</th>
+          <th class="person table-filler">
+            {{ $t('shots.fields.person') }}
+          </th>
+        </tr>
+      </thead>
+    </table>
+
+    <div class="table-body" v-if="!isLoading">
+      <table class="table">
+        <tbody class="table-body">
+          <tr
+            class="shot-version"
+            :key="version.id"
+            v-for="version in versions"
+          >
+            <td class="date">
+              {{ formatDate(version.created_at) }}
+            </td>
+            <td class="name">
+              {{ version.name }}
+            </td>
+            <td class="frame-in">
+              {{ version.data.frame_in }}
+            </td>
+            <td class="frame-out">
+              {{ version.data.frame_out }}
+            </td>
+            <td class="person table-filler">
+              {{ getPersonFullName(version.person_id) }}
+            </td>
+          </tr>
+        </tbody>
+      </table>
     </div>
-  </div>
+
+    <table-info :is-loading="isLoading" :is-error="isError" />
+
+    <div class="has-text-right modal-footer">
+      <button @click="$emit('cancel')" class="button is-link">
+        {{ $t('main.cancel') }}
+      </button>
+    </div>
+  </base-modal>
 </template>
 
-<script>
-import { mapGetters, mapActions } from 'vuex'
+<script setup>
+import { computed, onMounted, ref, watch } from 'vue'
+import { useStore } from 'vuex'
 
-import { modalMixin } from '@/components/modals/base_modal'
 import { formatDate } from '@/lib/time'
 
+import BaseModal from '@/components/modals/BaseModal.vue'
 import TableInfo from '@/components/widgets/TableInfo.vue'
 
-export default {
-  name: 'shot-history-modal',
+const store = useStore()
 
-  mixins: [modalMixin],
+// Props / Emits
 
-  components: {
-    TableInfo
-  },
+const props = defineProps({
+  active: { type: Boolean, default: false },
+  shot: { type: Object, default: () => ({}) }
+})
 
-  props: {
-    active: {
-      type: Boolean,
-      default: false
-    },
-    shot: {
-      type: Object,
-      default: () => {}
-    }
-  },
+defineEmits(['cancel'])
 
-  emits: ['cancel'],
+// State
 
-  data() {
-    return {
-      isError: false,
-      isLoading: false,
-      versions: []
-    }
-  },
-
-  mounted() {
-    this.reset()
-  },
-
-  computed: {
-    ...mapGetters(['personMap'])
-  },
-
-  methods: {
-    ...mapActions(['loadShotHistory']),
-
-    formatDate(dateString) {
-      return formatDate(dateString)
-    },
-
-    getPersonFullName(personId) {
-      const person = this.personMap.get(personId)
-      return person ? person.full_name : ''
-    },
-
-    loadData() {
-      this.isError = false
-      this.isLoading = true
-      return this.loadShotHistory(this.shot.id)
-        .then(versions => {
-          this.versions = versions
-          this.isLoading = false
-        })
-        .catch(err => {
-          console.error(err)
-          this.isLoading = false
-          this.isError = true
-        })
-    },
-
-    reset() {
-      this.versions = []
-      this.isError = false
-      this.isLoading = false
-    }
-  },
-
-  watch: {
-    active() {
-      if (this.active) {
-        this.reset()
-        this.loadData()
-      }
-    }
+const isError = ref(false)
+const isLoading = ref(false)
+const versions = ref([])
+
+// Computed
+
+const personMap = computed(() => store.getters.personMap)
+
+// Functions
+
+const getPersonFullName = personId =>
+  personMap.value.get(personId)?.full_name || ''
+
+const reset = () => {
+  versions.value = []
+  isError.value = false
+  isLoading.value = false
+}
+
+const loadData = async () => {
+  isError.value = false
+  isLoading.value = true
+  try {
+    versions.value = await store.dispatch('loadShotHistory', props.shot.id)
+  } catch (err) {
+    console.error(err)
+    isError.value = true
   }
+  isLoading.value = false
 }
+
+// Watchers
+
+watch(
+  () => props.active,
+  active => {
+    if (active) {
+      reset()
+      loadData()
+    }
+  }
+)
+
+// Lifecycle
+
+onMounted(reset)
 </script>
 
 <style lang="scss" scoped>

From 1d95c759c850fc19f8a27ae8ab55c9e9d06f9460 Mon Sep 17 00:00:00 2001
From: Frank Rousseau <frank@cg-wire.com>
Date: Fri, 1 May 2026 23:36:43 +0200
Subject: [PATCH 19/28] [modals] Convert avatar / preview / select-task-type
 modals
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Convert four more modals from Options API: ChangeAvatarModal,
EditAvatarModal, PreviewModal, SelectTaskTypeModal. Drop modalMixin
from each.

Three switch to <base-modal>; PreviewModal stays on its custom shell
(full-screen image overlay with absolute-positioned action buttons —
no title, no .box, BaseModal doesn't fit) and just swaps the mixin
for useModal(toRef(props, 'active'), emit).

Notable details:
- ChangeAvatarModal: BaseModal with the title passed as a prop.
- EditAvatarModal: BaseModal + custom button row (no ModalFooter).
  Rename ref="input-file" (kebab) to ref="inputFile" so script setup
  can bind it. Wire <base-modal @cancel="close"> so Escape and
  background-click both go through the close-while-busy guard.
- SelectTaskTypeModal: bug fix — taskTypeList had default: () => {}
  (returns undefined, would crash on taskTypeList[0] if no value
  passed); now () => []. Added ?.id || '' guard in the active watcher
  so it won't throw on an empty list either.

CSS: dropped dead rules (.modal-content .box p.text, .description,
.is-danger) across the four. Kept .error and .right where they're
live.

ChangeAvatarModal needs eslint-disable no-unused-vars on the
FileUpload import — same vue-eslint-parser false positive as before.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/components/modals/ChangeAvatarModal.vue   | 149 ++++--------
 src/components/modals/EditAvatarModal.vue     | 223 ++++++++----------
 src/components/modals/PreviewModal.vue        |  69 ++----
 src/components/modals/SelectTaskTypeModal.vue | 149 ++++--------
 4 files changed, 220 insertions(+), 370 deletions(-)

diff --git a/src/components/modals/ChangeAvatarModal.vue b/src/components/modals/ChangeAvatarModal.vue
index dc1de724d0..c7d16c814d 100644
--- a/src/components/modals/ChangeAvatarModal.vue
+++ b/src/components/modals/ChangeAvatarModal.vue
@@ -1,117 +1,70 @@
 <template>
-  <div
-    :class="{
-      modal: true,
-      'is-active': active
-    }"
-  >
-    <div class="modal-background" @click="$emit('cancel')"></div>
-
-    <div class="modal-content">
-      <div class="box content">
-        <h1 class="title">
-          {{ title }}
-        </h1>
-
-        <p>
-          {{ $t('main.csv.select_file') }}
-        </p>
-
-        <file-upload
-          ref="uploadAvatarField"
-          :label="$t('main.csv.upload_file')"
-          @fileselected="onFileSelected"
-          accept=".png,.jpg,.jpeg"
-        />
-
-        <p class="error" v-if="isError">
-          {{ $t('profile.avatar.error_upload') }}
-        </p>
-
-        <modal-footer
-          :error-text="$t('productions.metadata.error')"
-          :is-loading="isLoading"
-          :is-disabled="!formData"
-          @confirm="onConfirmClicked"
-          @cancel="$emit('cancel')"
-        />
-      </div>
-    </div>
-  </div>
+  <base-modal :active="active" :title="title" @cancel="$emit('cancel')">
+    <p>
+      {{ $t('main.csv.select_file') }}
+    </p>
+
+    <file-upload
+      ref="uploadAvatarField"
+      :label="$t('main.csv.upload_file')"
+      @fileselected="onFileSelected"
+      accept=".png,.jpg,.jpeg"
+    />
+
+    <p class="error" v-if="isError">
+      {{ $t('profile.avatar.error_upload') }}
+    </p>
+
+    <modal-footer
+      :error-text="$t('productions.metadata.error')"
+      :is-loading="isLoading"
+      :is-disabled="!formData"
+      @confirm="onConfirmClicked"
+      @cancel="$emit('cancel')"
+    />
+  </base-modal>
 </template>
 
-<script>
-import { modalMixin } from '@/components/modals/base_modal'
+<script setup>
+import { ref, watch } from 'vue'
 
-import FileUpload from '@/components/widgets/FileUpload.vue'
+import BaseModal from '@/components/modals/BaseModal.vue'
 import ModalFooter from '@/components/modals/ModalFooter.vue'
+// eslint-disable-next-line no-unused-vars
+import FileUpload from '@/components/widgets/FileUpload.vue'
 
-export default {
-  name: 'change-avatar-modal',
-
-  mixins: [modalMixin],
-
-  components: {
-    FileUpload,
-    ModalFooter
-  },
+const props = defineProps({
+  active: { type: Boolean, default: false },
+  isError: { type: Boolean, default: false },
+  isLoading: { type: Boolean, default: false },
+  title: { type: String, default: '' }
+})
 
-  props: {
-    active: {
-      type: Boolean,
-      default: false
-    },
-    isError: {
-      type: Boolean,
-      default: false
-    },
-    isLoading: {
-      type: Boolean,
-      default: false
-    },
-    title: {
-      type: String,
-      default: ''
-    }
-  },
+const emit = defineEmits(['cancel', 'confirm', 'fileselected'])
 
-  emits: ['cancel', 'confirm', 'fileselected'],
+const formData = ref(null)
+const uploadAvatarField = ref(null)
 
-  data() {
-    return {
-      formData: null
-    }
-  },
+const onFileSelected = data => {
+  formData.value = data
+  emit('fileselected', data)
+}
 
-  methods: {
-    onFileSelected(formData) {
-      this.formData = formData
-      this.$emit('fileselected', formData)
-    },
+const onConfirmClicked = () => {
+  emit('confirm', formData.value)
+}
 
-    onConfirmClicked() {
-      this.$emit('confirm', this.formData)
-    }
-  },
-  watch: {
-    active() {
-      this.formData = null
-      this.$refs.uploadAvatarField.reset()
-    }
+watch(
+  () => props.active,
+  () => {
+    formData.value = null
+    uploadAvatarField.value?.reset()
   }
-}
+)
 </script>
 
 <style lang="scss" scoped>
-.modal-content .box p.text {
-  margin-bottom: 1em;
-}
-
 .error {
   margin-top: 1em;
 }
-
-.description {
-  margin-bottom: 1em;
-}
 </style>
diff --git a/src/components/modals/EditAvatarModal.vue b/src/components/modals/EditAvatarModal.vue
index 33da27880f..d75c4f3e39 100644
--- a/src/components/modals/EditAvatarModal.vue
+++ b/src/components/modals/EditAvatarModal.vue
@@ -1,149 +1,114 @@
 <template>
-  <div class="modal" :class="{ 'is-active': active }">
-    <div class="modal-background" @click="close"></div>
-    <div class="modal-content">
-      <div class="box">
-        <h1 class="title">
-          {{ $t('profile.avatar.title') }}
-        </h1>
-        <form>
-          <input
-            ref="input-file"
-            class="hidden"
-            type="file"
-            accept=".png,.jpg,.jpeg"
-            @change="updateAvatar"
-          />
-          <people-avatar
-            :is-lazy="false"
-            :person="person"
-            :size="150"
-            :font-size="60"
-          />
-          <div class="flexrow right mt2">
-            <button
-              class="button flexrow-item is-primary"
-              :disabled="isUpdating || isDeleting"
-              type="button"
-              @click="selectFile"
-            >
-              <template v-if="isUpdating">
-                <spinner class="mr05 mt05" :size="20" is-white />
-                {{ $t('profile.avatar.updating') }}
-              </template>
-              <template v-else>{{ $t('profile.change_avatar') }}</template>
-            </button>
-            <button
-              class="button flexrow-item"
-              :disabled="isUpdating || isDeleting"
-              type="button"
-              @click="deleteAvatar"
-            >
-              <template v-if="isDeleting">
-                <spinner class="mr05 mt05" :size="20" />
-                {{ $t('profile.avatar.removing') }}
-              </template>
-              <template v-else>{{ $t('profile.clear_avatar') }}</template>
-            </button>
-            <button
-              class="button flexrow-item is-link"
-              :disabled="isUpdating || isDeleting"
-              type="button"
-              @click="close"
-            >
-              {{ $t('main.close') }}
-            </button>
-          </div>
-        </form>
-        <p class="error mt1 has-text-right" v-if="isError">
-          {{ errorText }}
-        </p>
+  <base-modal
+    :active="active"
+    :title="$t('profile.avatar.title')"
+    @cancel="close"
+  >
+    <form>
+      <input
+        ref="inputFile"
+        class="hidden"
+        type="file"
+        accept=".png,.jpg,.jpeg"
+        @change="updateAvatar"
+      />
+      <people-avatar
+        :is-lazy="false"
+        :person="person"
+        :size="150"
+        :font-size="60"
+      />
+      <div class="flexrow right mt2">
+        <button
+          class="button flexrow-item is-primary"
+          :disabled="isUpdating || isDeleting"
+          type="button"
+          @click="selectFile"
+        >
+          <template v-if="isUpdating">
+            <spinner class="mr05 mt05" :size="20" is-white />
+            {{ $t('profile.avatar.updating') }}
+          </template>
+          <template v-else>{{ $t('profile.change_avatar') }}</template>
+        </button>
+        <button
+          class="button flexrow-item"
+          :disabled="isUpdating || isDeleting"
+          type="button"
+          @click="deleteAvatar"
+        >
+          <template v-if="isDeleting">
+            <spinner class="mr05 mt05" :size="20" />
+            {{ $t('profile.avatar.removing') }}
+          </template>
+          <template v-else>{{ $t('profile.clear_avatar') }}</template>
+        </button>
+        <button
+          class="button flexrow-item is-link"
+          :disabled="isUpdating || isDeleting"
+          type="button"
+          @click="close"
+        >
+          {{ $t('main.close') }}
+        </button>
       </div>
-    </div>
-  </div>
+    </form>
+    <p class="error mt1 has-text-right" v-if="isError">
+      {{ errorText }}
+    </p>
+  </base-modal>
 </template>
 
-<script>
-import { modalMixin } from '@/components/modals/base_modal'
+<script setup>
+import { ref, watch } from 'vue'
 
+import BaseModal from '@/components/modals/BaseModal.vue'
 import PeopleAvatar from '@/components/widgets/PeopleAvatar.vue'
 import Spinner from '@/components/widgets/Spinner.vue'
 
-export default {
-  name: 'edit-avatar-modal',
+const props = defineProps({
+  active: { type: Boolean, default: false },
+  errorText: { type: String, default: '' },
+  isDeleting: { type: Boolean, default: false },
+  isError: { type: Boolean, default: false },
+  isUpdating: { type: Boolean, default: false },
+  person: { type: Object, required: true }
+})
 
-  mixins: [modalMixin],
+const emit = defineEmits(['close', 'delete', 'update'])
 
-  components: {
-    PeopleAvatar,
-    Spinner
-  },
+const inputFile = ref(null)
 
-  props: {
-    active: {
-      type: Boolean,
-      default: false
-    },
-    errorText: {
-      type: String,
-      default: ''
-    },
-    isDeleting: {
-      type: Boolean,
-      default: false
-    },
-    isError: {
-      type: Boolean,
-      default: false
-    },
-    isUpdating: {
-      type: Boolean,
-      default: false
-    },
-    person: {
-      type: Object,
-      required: true
-    }
-  },
-
-  emits: ['close', 'delete', 'update'],
-
-  methods: {
-    selectFile() {
-      this.$refs['input-file'].click()
-    },
+const selectFile = () => {
+  inputFile.value.click()
+}
 
-    updateAvatar(event) {
-      const file = event.target.files[0]
-      const formData = new FormData()
-      formData.append('file', file, file.name)
-      this.$emit('update', formData)
-    },
+const updateAvatar = event => {
+  const file = event.target.files[0]
+  const formData = new FormData()
+  formData.append('file', file, file.name)
+  emit('update', formData)
+}
 
-    deleteAvatar() {
-      this.$emit('delete')
-    },
+const deleteAvatar = () => {
+  emit('delete')
+}
 
-    close() {
-      if (this.isUpdating || this.isDeleting) {
-        return
-      }
-      this.$emit('close')
-    },
+const close = () => {
+  if (props.isUpdating || props.isDeleting) return
+  emit('close')
+}
 
-    resetForm() {
-      this.$refs['input-file'].value = null
-    }
-  },
+const resetForm = () => {
+  if (inputFile.value) inputFile.value.value = null
+}
 
-  watch: {
-    active() {
-      if (this.active) {
-        this.resetForm()
-      }
-    }
+watch(
+  () => props.active,
+  active => {
+    if (active) resetForm()
   }
-}
+)
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/modals/PreviewModal.vue b/src/components/modals/PreviewModal.vue
index a7809b4fcc..9255a3ac43 100644
--- a/src/components/modals/PreviewModal.vue
+++ b/src/components/modals/PreviewModal.vue
@@ -31,59 +31,38 @@
   </div>
 </template>
 
-<script>
+<script setup>
 import { ArrowUpRightIcon, DownloadIcon, XIcon } from 'lucide-vue-next'
+import { computed, toRef } from 'vue'
 
+import { useModal } from '@/composables/modal'
 import { getDownloadAttachmentPath } from '@/lib/path'
 
-import { modalMixin } from '@/components/modals/base_modal'
+const props = defineProps({
+  active: { type: Boolean, default: false },
+  attachment: { type: Object, default: () => ({}) },
+  previewFileId: { type: String, default: '' }
+})
 
-export default {
-  name: 'preview-modal',
+const emit = defineEmits(['cancel'])
 
-  mixins: [modalMixin],
+useModal(toRef(props, 'active'), emit)
 
-  components: {
-    ArrowUpRightIcon,
-    DownloadIcon,
-    XIcon
-  },
-
-  props: {
-    active: {
-      type: Boolean,
-      default: false
-    },
-    previewFileId: {
-      type: String,
-      default: ''
-    },
-    attachment: {
-      type: Object,
-      default: () => {}
-    }
-  },
-
-  emits: ['cancel'],
-
-  computed: {
-    previewPath() {
-      if (this.previewFileId) {
-        return this.active
-          ? `/api/pictures/originals/preview-files/${this.previewFileId}.png`
-          : ''
-      }
-      if (this.attachment) {
-        return getDownloadAttachmentPath(this.attachment)
-      }
-      return ''
-    },
-
-    previewDlPath() {
-      return `/api/pictures/originals/preview-files/${this.previewFileId}/download`
-    }
+const previewPath = computed(() => {
+  if (props.previewFileId) {
+    return props.active
+      ? `/api/pictures/originals/preview-files/${props.previewFileId}.png`
+      : ''
   }
-}
+  if (props.attachment) {
+    return getDownloadAttachmentPath(props.attachment)
+  }
+  return ''
+})
+
+const previewDlPath = computed(
+  () => `/api/pictures/originals/preview-files/${props.previewFileId}/download`
+)
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/modals/SelectTaskTypeModal.vue b/src/components/modals/SelectTaskTypeModal.vue
index 8fb6807693..ae60ddb3c7 100644
--- a/src/components/modals/SelectTaskTypeModal.vue
+++ b/src/components/modals/SelectTaskTypeModal.vue
@@ -1,111 +1,64 @@
 <template>
-  <div
-    :class="{
-      modal: true,
-      'is-active': active
-    }"
+  <base-modal
+    :active="active"
+    :title="$t('playlists.select_task_type')"
+    @cancel="$emit('cancel')"
   >
-    <div class="modal-background" @click="$emit('cancel')"></div>
-
-    <div class="modal-content">
-      <div class="box">
-        <h1 class="title">
-          {{ $t('playlists.select_task_type') }}
-        </h1>
-
-        <form @submit.prevent>
-          <combobox-task-type
-            :task-type-list="taskTypeList"
-            v-model="taskTypeId"
-          />
-        </form>
-
-        <p>
-          {{ $t('playlists.apply_task_type_change') }}
-        </p>
-
-        <p class="has-text-right mt2">
-          <a
-            :class="{
-              button: true,
-              'is-primary': true,
-              'is-loading': isLoading
-            }"
-            @click="runConfirmation"
-          >
-            {{ $t('main.confirmation') }}
-          </a>
-          <button @click="$emit('cancel')" class="button is-link">
-            {{ $t('main.cancel') }}
-          </button>
-        </p>
-
-        <p class="error has-text-right info-message" v-if="isError">
-          {{ $t('playlist.change_task_type_fails') }}
-        </p>
-      </div>
-    </div>
-  </div>
+    <form @submit.prevent>
+      <combobox-task-type :task-type-list="taskTypeList" v-model="taskTypeId" />
+    </form>
+
+    <p>
+      {{ $t('playlists.apply_task_type_change') }}
+    </p>
+
+    <p class="has-text-right mt2">
+      <a
+        :class="{
+          button: true,
+          'is-primary': true,
+          'is-loading': isLoading
+        }"
+        @click="runConfirmation"
+      >
+        {{ $t('main.confirmation') }}
+      </a>
+      <button @click="$emit('cancel')" class="button is-link">
+        {{ $t('main.cancel') }}
+      </button>
+    </p>
+
+    <p class="error has-text-right info-message" v-if="isError">
+      {{ $t('playlist.change_task_type_fails') }}
+    </p>
+  </base-modal>
 </template>
 
-<script>
-import { modalMixin } from '@/components/modals/base_modal'
+<script setup>
+import { ref, watch } from 'vue'
 
+import BaseModal from '@/components/modals/BaseModal.vue'
 import ComboboxTaskType from '@/components/widgets/ComboboxTaskType.vue'
 
-export default {
-  name: 'select-task-type-modal',
-
-  mixins: [modalMixin],
+const props = defineProps({
+  active: { type: Boolean, default: false },
+  isError: { type: Boolean, default: false },
+  isLoading: { type: Boolean, default: false },
+  taskTypeList: { type: Array, default: () => [] }
+})
 
-  components: {
-    ComboboxTaskType
-  },
+const emit = defineEmits(['cancel', 'confirm'])
 
-  props: {
-    active: {
-      type: Boolean,
-      default: false
-    },
-    isLoading: {
-      type: Boolean,
-      default: false
-    },
-    isError: {
-      type: Boolean,
-      default: false
-    },
-    taskTypeList: {
-      type: Array,
-      default: () => {}
-    }
-  },
+const taskTypeId = ref('')
 
-  emits: ['cancel', 'confirm'],
-
-  data() {
-    return {
-      taskTypeId: ''
-    }
-  },
-
-  methods: {
-    runConfirmation() {
-      this.$emit('confirm', this.taskTypeId)
-    }
-  },
+const runConfirmation = () => {
+  emit('confirm', taskTypeId.value)
+}
 
-  watch: {
-    active() {
-      this.taskTypeId = this.taskTypeList[0].id
-    }
+watch(
+  () => props.active,
+  () => {
+    taskTypeId.value = props.taskTypeList[0]?.id || ''
   }
-}
+)
 </script>
-
-<style lang="scss" scoped>
-.is-danger {
-  color: #ff3860;
-  font-style: italic;
-}
-</style>

From 4bf2c91036faf39607c2ccfb026ea52673408808 Mon Sep 17 00:00:00 2001
From: Frank Rousseau <frank@cg-wire.com>
Date: Fri, 1 May 2026 23:49:54 +0200
Subject: [PATCH 20/28] [modals] Convert set-frames / token / create-tasks /
 playlist modals
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Convert four more modals from Options API:
SetFramesFromTaskTypePreviewsModal, NewTokenModal, CreateTasksModal,
EditPlaylistModal. Drop modalMixin from each.

Two switch to <base-modal> (SetFrames…, EditPlaylistModal); two stay
on a custom shell with useModal directly:

- NewTokenModal — the original's <div class="modal-background"></div>
  intentionally has no @click handler so a stray click outside can't
  dismiss the modal mid-copy and lose an unrecoverable token.
  BaseModal would silently re-enable background-click cancel; keep
  the custom shell and add a code comment explaining why.
- CreateTasksModal — uses <page-title> as its title instead of
  <h1 class="title">, so BaseModal's own <h1> would render alongside.

Bug fixes:
- SetFramesFromTaskTypePreviewsModal: reset() set this.taskType = null
  but the data field is taskTypeId — the original was creating a new
  reactive property on every active toggle instead of resetting the
  combobox value. Now reset() correctly clears taskTypeId.
- EditPlaylistModal: the active prop had value: false (typo) instead
  of default: false — corrected.

NewTokenModal also swaps timeMixin (only used `today`) for the
existing useTime() composable from @/composables/time.

Other cleanups: drop dead .is-danger, dropping unused refs, simplify
forEntityOptions, factor the duplicated emit payload in
CreateTasksModal into a buildPayload helper.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/components/modals/CreateTasksModal.vue    | 206 ++++------
 src/components/modals/EditPlaylistModal.vue   | 385 ++++++++----------
 src/components/modals/NewTokenModal.vue       | 135 +++---
 .../SetFramesFromTaskTypePreviewsModal.vue    | 155 +++----
 4 files changed, 351 insertions(+), 530 deletions(-)

diff --git a/src/components/modals/CreateTasksModal.vue b/src/components/modals/CreateTasksModal.vue
index 0a1d5195fd..fd50129c36 100644
--- a/src/components/modals/CreateTasksModal.vue
+++ b/src/components/modals/CreateTasksModal.vue
@@ -75,142 +75,90 @@
   </div>
 </template>
 
-<script>
-import { mapGetters } from 'vuex'
+<script setup>
+import { computed, onMounted, ref, toRef } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useRoute } from 'vue-router'
+import { useStore } from 'vuex'
 
-import { modalMixin } from '@/components/modals/base_modal'
+import { useModal } from '@/composables/modal'
 
 import Combobox from '@/components/widgets/Combobox.vue'
 import ComboboxTaskType from '@/components/widgets/ComboboxTaskType.vue'
 import PageTitle from '@/components/widgets/PageTitle.vue'
 
-export default {
-  name: 'create-tasks-modal',
-
-  mixins: [modalMixin],
-
-  components: {
-    Combobox,
-    ComboboxTaskType,
-    PageTitle
-  },
-
-  props: {
-    active: {
-      type: Boolean,
-      default: false
-    },
-    errorText: {
-      type: String,
-      default: ''
-    },
-    isError: {
-      type: Boolean,
-      default: false
-    },
-    isLoading: {
-      type: Boolean,
-      default: false
-    },
-    isLoadingStay: {
-      type: Boolean,
-      default: false
-    },
-    text: {
-      type: String,
-      default: ''
-    },
-    title: {
-      type: String,
-      default: ''
-    }
-  },
-
-  emits: ['cancel', 'confirm', 'confirm-and-stay'],
-
-  data() {
-    return {
-      form: {
-        task_type_id: ''
-      },
-      selectionOnly: 'true',
-      selectionOptions: [
-        { label: this.$t('tasks.for_selection'), value: 'true' },
-        { label: this.$t('tasks.for_project'), value: 'false' }
-      ]
-    }
-  },
-
-  computed: {
-    ...mapGetters([
-      'currentProduction',
-      'productionAssetTaskTypes',
-      'productionEditTaskTypes',
-      'productionEpisodeTaskTypes',
-      'productionShotTaskTypes',
-      'productionSequenceTaskTypes'
-    ]),
-
-    isAssetTasks() {
-      return this.$route.path.includes('assets')
-    },
-    isShotsTasks() {
-      return this.$route.path.includes('shots')
-    },
-    isSequencesTasks() {
-      return this.$route.path.includes('sequences')
-    },
-    isEditsTasks() {
-      return this.$route.path.includes('edits')
-    },
-    isEpisodesTasks() {
-      return this.$route.path.includes('episodes')
-    }
-  },
-
-  methods: {
-    getApplicableTaskTypes() {
-      if (this.isAssetTasks) {
-        return this.productionAssetTaskTypes
-      }
-      if (this.isShotsTasks) {
-        return this.productionShotTaskTypes
-      }
-      if (this.isSequencesTasks) {
-        return this.productionSequenceTaskTypes
-      }
-      if (this.isEditsTasks) {
-        return this.productionEditTaskTypes
-      }
-      if (this.isEpisodesTasks) {
-        return this.productionEpisodeTaskTypes
-      }
-      return []
-    },
-
-    confirmClicked() {
-      this.$emit('confirm', {
-        form: this.form,
-        selectionOnly: this.selectionOnly === 'true'
-      })
-    },
-
-    confirmAndStayClicked() {
-      this.$emit('confirm-and-stay', {
-        form: this.form,
-        selectionOnly: this.selectionOnly === 'true'
-      })
-    }
-  },
-
-  mounted() {
-    const taskTypes = this.getApplicableTaskTypes()
-
-    if (taskTypes.length > 0) {
-      this.form.task_type_id = taskTypes[0].id
-    }
-  }
+const { t } = useI18n()
+const route = useRoute()
+const store = useStore()
+
+const props = defineProps({
+  active: { type: Boolean, default: false },
+  errorText: { type: String, default: '' },
+  isError: { type: Boolean, default: false },
+  isLoading: { type: Boolean, default: false },
+  isLoadingStay: { type: Boolean, default: false },
+  text: { type: String, default: '' },
+  title: { type: String, default: '' }
+})
+
+const emit = defineEmits(['cancel', 'confirm', 'confirm-and-stay'])
+
+useModal(toRef(props, 'active'), emit)
+
+const form = ref({ task_type_id: '' })
+const selectionOnly = ref('true')
+
+const currentProduction = computed(() => store.getters.currentProduction)
+const productionAssetTaskTypes = computed(
+  () => store.getters.productionAssetTaskTypes
+)
+const productionEditTaskTypes = computed(
+  () => store.getters.productionEditTaskTypes
+)
+const productionEpisodeTaskTypes = computed(
+  () => store.getters.productionEpisodeTaskTypes
+)
+const productionSequenceTaskTypes = computed(
+  () => store.getters.productionSequenceTaskTypes
+)
+const productionShotTaskTypes = computed(
+  () => store.getters.productionShotTaskTypes
+)
+
+const selectionOptions = computed(() => [
+  { label: t('tasks.for_selection'), value: 'true' },
+  { label: t('tasks.for_project'), value: 'false' }
+])
+
+const getApplicableTaskTypes = () => {
+  const path = route.path
+  if (path.includes('assets')) return productionAssetTaskTypes.value
+  if (path.includes('shots')) return productionShotTaskTypes.value
+  if (path.includes('sequences')) return productionSequenceTaskTypes.value
+  if (path.includes('edits')) return productionEditTaskTypes.value
+  if (path.includes('episodes')) return productionEpisodeTaskTypes.value
+  return []
+}
+
+const buildPayload = () => ({
+  form: form.value,
+  selectionOnly: selectionOnly.value === 'true'
+})
+
+const confirmClicked = () => {
+  emit('confirm', buildPayload())
 }
+
+const confirmAndStayClicked = () => {
+  emit('confirm-and-stay', buildPayload())
+}
+
+onMounted(() => {
+  const taskTypes = getApplicableTaskTypes()
+  if (taskTypes.length > 0) {
+    form.value.task_type_id = taskTypes[0].id
+  }
+})
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/modals/EditPlaylistModal.vue b/src/components/modals/EditPlaylistModal.vue
index 575d4fa73e..69f3b9d676 100644
--- a/src/components/modals/EditPlaylistModal.vue
+++ b/src/components/modals/EditPlaylistModal.vue
@@ -1,238 +1,175 @@
 <template>
-  <div
-    :class="{
-      modal: true,
-      'is-active': active
-    }"
-  >
-    <div class="modal-background" @click="$emit('cancel')"></div>
-
-    <div class="modal-content">
-      <div class="box">
-        <h1 class="title" v-if="isEditing">
-          {{ $t('playlists.edit_title') }}
-        </h1>
-        <h1 class="title" v-else>
-          {{ $t('playlists.create_title') }}
-        </h1>
-
-        <form @submit.prevent>
-          <text-field
-            ref="nameField"
-            :label="$t('playlists.fields.name')"
-            :maxlength="80"
-            @enter="runConfirmation"
-            v-model.trim="form.name"
-            v-focus
-          />
-          <combobox-simple
-            :label="$t('playlists.fields.for_client')"
-            :options="forClientOptions"
-            v-model="forClient"
-          />
-          <combobox-simple
-            :label="$t('playlists.fields.for_entity')"
-            :options="forEntityOptions"
-            :disabled="typeDisabled"
-            v-model="form.for_entity"
-            v-if="!isEditing"
-          />
-          <combobox-task-type
-            class="flexrow-item selector"
-            :label="$t('news.task_type')"
-            :task-type-list="taskTypeList"
-            :up="true"
-            v-model="form.task_type_id"
-          />
-        </form>
-
-        <modal-footer
-          :error-text="$t('playlists.edit_error')"
-          :is-error="isError"
-          :is-loading="isLoading"
-          @confirm="runConfirmation"
-          @cancel="$emit('cancel')"
-        />
-      </div>
-    </div>
-  </div>
+  <base-modal :active="active" :title="modalTitle" @cancel="$emit('cancel')">
+    <form @submit.prevent>
+      <text-field
+        ref="nameField"
+        :label="$t('playlists.fields.name')"
+        :maxlength="80"
+        @enter="runConfirmation"
+        v-model.trim="form.name"
+        v-focus
+      />
+      <combobox-simple
+        :label="$t('playlists.fields.for_client')"
+        :options="forClientOptions"
+        v-model="forClient"
+      />
+      <combobox-simple
+        :label="$t('playlists.fields.for_entity')"
+        :options="forEntityOptions"
+        :disabled="typeDisabled"
+        v-model="form.for_entity"
+        v-if="!isEditing"
+      />
+      <combobox-task-type
+        class="flexrow-item selector"
+        :label="$t('news.task_type')"
+        :task-type-list="taskTypeList"
+        :up="true"
+        v-model="form.task_type_id"
+      />
+    </form>
+
+    <modal-footer
+      :error-text="$t('playlists.edit_error')"
+      :is-error="isError"
+      :is-loading="isLoading"
+      @confirm="runConfirmation"
+      @cancel="$emit('cancel')"
+    />
+  </base-modal>
 </template>
 
-<script>
-import { mapGetters } from 'vuex'
-
-import { modalMixin } from '@/components/modals/base_modal'
+<script setup>
+import { computed, ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useStore } from 'vuex'
 
 import { sortByName } from '@/lib/sorting'
 
+import BaseModal from '@/components/modals/BaseModal.vue'
+import ModalFooter from '@/components/modals/ModalFooter.vue'
 import ComboboxSimple from '@/components/widgets/ComboboxSimple.vue'
 import ComboboxTaskType from '@/components/widgets/ComboboxTaskType.vue'
-import ModalFooter from '@/components/modals/ModalFooter.vue'
 import TextField from '@/components/widgets/TextField.vue'
 
-export default {
-  name: 'edit-playlist-modal',
-
-  mixins: [modalMixin],
-
-  components: {
-    ComboboxSimple,
-    ComboboxTaskType,
-    ModalFooter,
-    TextField
-  },
-
-  props: {
-    active: {
-      type: Boolean,
-      value: false
-    },
-    isError: {
-      type: Boolean,
-      default: false
-    },
-    isLoading: {
-      type: Boolean,
-      default: false
-    },
-    playlistToEdit: {
-      type: Object,
-      default: () => {}
-    },
-    typeDisabled: {
-      type: Boolean,
-      default: false
-    },
-    taskTypeId: {
-      type: String,
-      default: ''
-    }
-  },
-
-  emits: ['cancel', 'confirm'],
-
-  data() {
-    return {
-      forClient: 'false',
-      forClientOptions: [
-        { label: this.$t('playlists.for_client'), value: 'true' },
-        { label: this.$t('playlists.for_studio'), value: 'false' }
-      ],
-      form: {
-        name: this.playlistToEdit.name,
-        for_entity: this.playlistToEdit.for_entity,
-        for_client: this.playlistToEdit.for_client,
-        is_for_all: this.currentEpisode && this.currentEpisode.id === 'all',
-        task_type_id: this.taskTypeId
-      }
-    }
-  },
-
-  computed: {
-    ...mapGetters([
-      'currentEpisode',
-      'currentProduction',
-      'productionTaskTypes'
-    ]),
-
-    isEditing() {
-      return this.playlistToEdit && this.playlistToEdit.id
-    },
-
-    forEntityOptions() {
-      if (
-        (this.currentEpisode &&
-          ['main', 'all'].includes(this.currentEpisode.id)) ||
-        this.currentProduction?.production_type === 'assets'
-      ) {
-        return [{ label: this.$t('assets.title'), value: 'asset' }]
-      } else if (this.currentProduction?.production_type === 'shots') {
-        return [
-          { label: this.$t('shots.title'), value: 'shot' },
-          { label: this.$t('sequences.title'), value: 'sequence' }
-        ]
-      } else {
-        return [
-          { label: this.$t('assets.title'), value: 'asset' },
-          { label: this.$t('shots.title'), value: 'shot' },
-          { label: this.$t('sequences.title'), value: 'sequence' }
-        ]
-      }
-    },
-
-    defaultForEntity() {
-      const isOnlyAssets = this.currentProduction?.production_type === 'assets'
-      const isOnlyShots = this.currentProduction?.production_type === 'shots'
-      const isAssetEpisode =
-        this.currentEpisode && ['all', 'main'].includes(this.currentEpisode.id)
-      return (isAssetEpisode || isOnlyAssets) && !isOnlyShots ? 'asset' : 'shot'
-    },
-
-    taskTypeList() {
-      const taskTypes = [...this.productionTaskTypes].filter(
-        taskType => taskType.for_entity.toLowerCase() === this.form.for_entity
-      )
-      return [
-        {
-          id: '',
-          color: '#999',
-          name: this.$t('news.all')
-        }
-      ].concat(sortByName([...taskTypes]))
-    }
-  },
-
-  methods: {
-    runConfirmation() {
-      if (!this.form.name) {
-        this.$refs.nameField.focus()
-        return
-      }
-      this.form.for_client = this.forClient === 'true'
-      this.$emit('confirm', this.form)
-    },
-
-    resetForm() {
-      if (this.isEditing) {
-        this.form.name = this.playlistToEdit.name
-        this.form.for_entity = this.playlistToEdit.for_entity
-        this.form.for_client = this.playlistToEdit.for_client
-        this.form.is_for_all =
-          this.currentEpisode && this.currentEpisode.id === 'all'
-        this.form.task_type_id = this.playlistToEdit.task_type_id
-      } else {
-        this.form = {
-          name: this.playlistToEdit.name,
-          for_entity: this.playlistToEdit.for_entity || this.defaultForEntity,
-          for_client: 'false',
-          is_for_all: this.currentEpisode && this.currentEpisode.id === 'all',
-          task_type_id: this.taskTypeId
-        }
-      }
-    }
-  },
-
-  watch: {
-    playlistToEdit() {
-      this.resetForm()
-    },
-
-    active() {
-      if (this.active) {
-        this.forClient = this.playlistToEdit.for_client ? 'true' : 'false'
-        this.resetForm()
-        setTimeout(() => {
-          this.$refs.nameField?.focus()
-        }, 100)
-      }
-    }
+const { t } = useI18n()
+const store = useStore()
+
+const props = defineProps({
+  active: { type: Boolean, default: false },
+  isError: { type: Boolean, default: false },
+  isLoading: { type: Boolean, default: false },
+  playlistToEdit: { type: Object, default: () => ({}) },
+  taskTypeId: { type: String, default: '' },
+  typeDisabled: { type: Boolean, default: false }
+})
+
+const emit = defineEmits(['cancel', 'confirm'])
+
+const form = ref({
+  name: props.playlistToEdit.name,
+  for_entity: props.playlistToEdit.for_entity,
+  for_client: props.playlistToEdit.for_client,
+  is_for_all: false,
+  task_type_id: props.taskTypeId
+})
+const forClient = ref('false')
+const nameField = ref(null)
+
+const currentEpisode = computed(() => store.getters.currentEpisode)
+const currentProduction = computed(() => store.getters.currentProduction)
+const productionTaskTypes = computed(() => store.getters.productionTaskTypes)
+
+const isEditing = computed(() => Boolean(props.playlistToEdit?.id))
+
+const modalTitle = computed(() =>
+  isEditing.value ? t('playlists.edit_title') : t('playlists.create_title')
+)
+
+const forClientOptions = computed(() => [
+  { label: t('playlists.for_client'), value: 'true' },
+  { label: t('playlists.for_studio'), value: 'false' }
+])
+
+const forEntityOptions = computed(() => {
+  if (
+    ['main', 'all'].includes(currentEpisode.value?.id) ||
+    currentProduction.value?.production_type === 'assets'
+  ) {
+    return [{ label: t('assets.title'), value: 'asset' }]
+  }
+  if (currentProduction.value?.production_type === 'shots') {
+    return [
+      { label: t('shots.title'), value: 'shot' },
+      { label: t('sequences.title'), value: 'sequence' }
+    ]
   }
+  return [
+    { label: t('assets.title'), value: 'asset' },
+    { label: t('shots.title'), value: 'shot' },
+    { label: t('sequences.title'), value: 'sequence' }
+  ]
+})
+
+const defaultForEntity = computed(() => {
+  const productionType = currentProduction.value?.production_type
+  const isOnlyAssets = productionType === 'assets'
+  const isOnlyShots = productionType === 'shots'
+  const isAssetEpisode = ['all', 'main'].includes(currentEpisode.value?.id)
+  return (isAssetEpisode || isOnlyAssets) && !isOnlyShots ? 'asset' : 'shot'
+})
+
+const taskTypeList = computed(() => {
+  const taskTypes = productionTaskTypes.value.filter(
+    taskType => taskType.for_entity.toLowerCase() === form.value.for_entity
+  )
+  return [
+    { id: '', color: '#999', name: t('news.all') },
+    ...sortByName([...taskTypes])
+  ]
+})
+
+const runConfirmation = () => {
+  if (!form.value.name) {
+    nameField.value?.focus()
+    return
+  }
+  form.value.for_client = forClient.value === 'true'
+  emit('confirm', form.value)
 }
-</script>
 
-<style lang="scss" scoped>
-.is-danger {
-  color: #ff3860;
-  font-style: italic;
+const resetForm = () => {
+  const isAll = currentEpisode.value?.id === 'all'
+  if (isEditing.value) {
+    form.value.name = props.playlistToEdit.name
+    form.value.for_entity = props.playlistToEdit.for_entity
+    form.value.for_client = props.playlistToEdit.for_client
+    form.value.is_for_all = isAll
+    form.value.task_type_id = props.playlistToEdit.task_type_id
+  } else {
+    form.value = {
+      name: props.playlistToEdit.name,
+      for_entity: props.playlistToEdit.for_entity || defaultForEntity.value,
+      for_client: 'false',
+      is_for_all: isAll,
+      task_type_id: props.taskTypeId
+    }
+  }
 }
-</style>
+
+watch(() => props.playlistToEdit, resetForm)
+
+watch(
+  () => props.active,
+  active => {
+    if (active) {
+      forClient.value = props.playlistToEdit.for_client ? 'true' : 'false'
+      resetForm()
+      setTimeout(() => {
+        nameField.value?.focus()
+      }, 100)
+    }
+  }
+)
+</script>
diff --git a/src/components/modals/NewTokenModal.vue b/src/components/modals/NewTokenModal.vue
index 604608d41f..b98210e076 100644
--- a/src/components/modals/NewTokenModal.vue
+++ b/src/components/modals/NewTokenModal.vue
@@ -1,5 +1,10 @@
 <template>
   <div class="modal" :class="{ 'is-active': active }">
+    <!--
+      Background click intentionally has no @click handler — accidental
+      dismissal would lose an unrecoverable token. Escape still cancels
+      via useModal.
+    -->
     <div class="modal-background"></div>
     <div class="modal-content">
       <div class="box">
@@ -42,7 +47,6 @@
           </p>
           <div class="token">
             <text-field
-              ref="token"
               :disabled="!visible"
               input-class=" token-input"
               :readonly="true"
@@ -79,94 +83,67 @@
   </div>
 </template>
 
-<script>
+<script setup>
 import { AlertTriangleIcon, EyeIcon, EyeOffIcon } from 'lucide-vue-next'
+import { computed, ref, toRef, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
 
-import { modalMixin } from '@/components/modals/base_modal'
-import { timeMixin } from '@/components/mixins/time'
+import { useModal } from '@/composables/modal'
+import { useTime } from '@/composables/time'
 
 import DateField from '@/components/widgets/DateField.vue'
 import TextField from '@/components/widgets/TextField.vue'
 
-export default {
-  name: 'new-token-modal',
-
-  mixins: [modalMixin, timeMixin],
-
-  components: {
-    AlertTriangleIcon,
-    DateField,
-    EyeIcon,
-    EyeOffIcon,
-    TextField
-  },
-
-  props: {
-    active: {
-      type: Boolean,
-      default: false
-    },
-    person: {
-      type: Object,
-      default: () => {}
-    }
-  },
+const { t } = useI18n()
+const { today } = useTime()
 
-  emits: ['cancel', 'close', 'generate-token'],
+const props = defineProps({
+  active: { type: Boolean, default: false },
+  person: { type: Object, default: () => ({}) }
+})
 
-  data() {
-    return {
-      form: {
-        expiration_date: null
-      },
-      message: null,
-      visible: false
-    }
-  },
-
-  computed: {
-    isValidExpirationDate() {
-      return (
-        !this.form.expiration_date ||
-        new Date(this.form.expiration_date) > new Date()
-      )
-    }
-  },
-
-  methods: {
-    generateToken() {
-      this.$emit('generate-token', {
-        id: this.person.id,
-        expiration_date: this.form.expiration_date
-      })
-    },
-
-    async copyClicked() {
-      this.message = null
-      await navigator.clipboard.writeText(this.person.access_token)
-      this.message = this.$t('bots.token_copied')
-      setTimeout(() => {
-        this.message = null
-      }, 5000)
-    },
-
-    resetForm() {
-      this.form = {
-        expiration_date: this.person.expiration_date
-      }
-      this.message = null
-      this.visible = false
-    }
-  },
+const emit = defineEmits(['cancel', 'close', 'generate-token'])
 
-  watch: {
-    active() {
-      if (this.active) {
-        this.resetForm()
-      }
-    }
-  }
+useModal(toRef(props, 'active'), emit)
+
+const form = ref({ expiration_date: null })
+const message = ref(null)
+const visible = ref(false)
+
+const isValidExpirationDate = computed(
+  () =>
+    !form.value.expiration_date ||
+    new Date(form.value.expiration_date) > new Date()
+)
+
+const generateToken = () => {
+  emit('generate-token', {
+    id: props.person.id,
+    expiration_date: form.value.expiration_date
+  })
+}
+
+const copyClicked = async () => {
+  message.value = null
+  await navigator.clipboard.writeText(props.person.access_token)
+  message.value = t('bots.token_copied')
+  setTimeout(() => {
+    message.value = null
+  }, 5000)
 }
+
+const resetForm = () => {
+  form.value = { expiration_date: props.person.expiration_date }
+  message.value = null
+  visible.value = false
+}
+
+watch(
+  () => props.active,
+  active => {
+    if (active) resetForm()
+  }
+)
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/modals/SetFramesFromTaskTypePreviewsModal.vue b/src/components/modals/SetFramesFromTaskTypePreviewsModal.vue
index 2d5cd95346..f6bd73915d 100644
--- a/src/components/modals/SetFramesFromTaskTypePreviewsModal.vue
+++ b/src/components/modals/SetFramesFromTaskTypePreviewsModal.vue
@@ -1,117 +1,76 @@
 <template>
-  <div
-    :class="{
-      modal: true,
-      'is-active': active
-    }"
+  <base-modal
+    :active="active"
+    :title="$t('shots.get_frames_from_previews')"
+    @cancel="$emit('cancel')"
   >
-    <div class="modal-background" @click="$emit('cancel')"></div>
-
-    <div class="modal-content">
-      <div class="box content">
-        <h1 class="title">
-          {{ $t('shots.get_frames_from_previews') }}
-        </h1>
-
-        <p class="description">
-          {{ $t('shots.get_frames_from_previews_description') }}
-        </p>
-
-        <combobox-task-type
-          :task-type-list="productionShotTaskTypes"
-          :placeholder="$t('task_types.select_task_type')"
-          add-placeholder
-          v-model="taskTypeId"
-        />
-
-        <modal-footer
-          :error-text="$t('shots.get_frames_from_previews_error')"
-          :is-error="isError"
-          :is-loading="isLoading"
-          :is-disabled="!isFormFilled"
-          @confirm="confirm"
-          @cancel="$emit('cancel')"
-        />
-      </div>
-    </div>
-  </div>
+    <p class="description">
+      {{ $t('shots.get_frames_from_previews_description') }}
+    </p>
+
+    <combobox-task-type
+      :task-type-list="productionShotTaskTypes"
+      :placeholder="$t('task_types.select_task_type')"
+      add-placeholder
+      v-model="taskTypeId"
+    />
+
+    <modal-footer
+      :error-text="$t('shots.get_frames_from_previews_error')"
+      :is-error="isError"
+      :is-loading="isLoading"
+      :is-disabled="!isFormFilled"
+      @confirm="confirm"
+      @cancel="$emit('cancel')"
+    />
+  </base-modal>
 </template>
 
-<script>
-import { mapGetters } from 'vuex'
+<script setup>
+import { computed, onMounted, ref, watch } from 'vue'
+import { useStore } from 'vuex'
 
-import { modalMixin } from '@/components/modals/base_modal'
-
-import ComboboxTaskType from '@/components/widgets/ComboboxTaskType.vue'
+import BaseModal from '@/components/modals/BaseModal.vue'
 import ModalFooter from '@/components/modals/ModalFooter.vue'
+import ComboboxTaskType from '@/components/widgets/ComboboxTaskType.vue'
 
-export default {
-  name: 'set-frames-from-task-type-previews-modal',
-
-  mixins: [modalMixin],
-
-  components: {
-    ComboboxTaskType,
-    ModalFooter
-  },
-
-  props: {
-    active: {
-      type: Boolean,
-      default: false
-    },
-    isLoading: {
-      type: Boolean,
-      default: false
-    },
-    isError: {
-      type: Boolean,
-      default: false
-    },
-    errorText: {
-      type: String,
-      default: ''
-    }
-  },
+const store = useStore()
 
-  emits: ['cancel', 'confirm'],
+const props = defineProps({
+  active: { type: Boolean, default: false },
+  errorText: { type: String, default: '' },
+  isError: { type: Boolean, default: false },
+  isLoading: { type: Boolean, default: false }
+})
 
-  data() {
-    return {
-      taskTypeId: null
-    }
-  },
+const emit = defineEmits(['cancel', 'confirm'])
 
-  mounted() {
-    this.reset()
-  },
+const taskTypeId = ref(null)
 
-  computed: {
-    ...mapGetters(['productionShotTaskTypes']),
+const productionShotTaskTypes = computed(
+  () => store.getters.productionShotTaskTypes
+)
 
-    isFormFilled() {
-      return this.taskTypeId !== null && this.taskTypeId !== ''
-    }
-  },
+const isFormFilled = computed(
+  () => taskTypeId.value !== null && taskTypeId.value !== ''
+)
 
-  methods: {
-    confirm() {
-      return this.$emit('confirm', this.taskTypeId)
-    },
+const confirm = () => {
+  emit('confirm', taskTypeId.value)
+}
 
-    reset() {
-      this.taskType = null
-    }
-  },
+const reset = () => {
+  taskTypeId.value = null
+}
 
-  watch: {
-    active() {
-      if (this.active) {
-        this.reset()
-      }
-    }
+watch(
+  () => props.active,
+  active => {
+    if (active) reset()
   }
-}
+)
+
+onMounted(reset)
 </script>
 
 <style lang="scss" scoped>

From 2c7f54df2b9b0838c6e72aa71300c574acc59f33 Mon Sep 17 00:00:00 2001
From: Frank Rousseau <frank@cg-wire.com>
Date: Sat, 2 May 2026 00:05:20 +0200
Subject: [PATCH 21/28] [modals] Convert add-attachment / thumbnails /
 edit-shot / edit-asset
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Convert four medium modals from Options API: AddAttachmentModal,
AddThumbnailsModal, EditShotModal, EditAssetModal.

Three switch to <base-modal>; AddAttachmentModal stays on a custom
shell with useModal — its <h2 class="subtitle"> sits ABOVE the
<h1 class="title">, and BaseModal would force the subtitle into the
slot (after the h1), changing the visual order.

EditShotModal pulls in sanitizeInteger from @/composables/format
instead of formatListMixin (it was only using that one helper).

Notable cleanups:
- AddAttachmentModal: kebab ref="file-field" → "fileField" for Vue 3
  binding; expose showAnnotationLoading / hideAnnotationLoading via
  defineExpose (parent components call them on the modal ref); drop
  the empty onDrag() method.
- AddThumbnailsModal: bug fix — entityMap was only declared
  implicitly via this.entityMap = {} inside a method, dynamically
  added properties on `this` aren't reactive and are a code smell;
  now a proper ref({}). Expose markLoading / markUploaded.
- EditShotModal: drop seven unused template refs (only nameField is
  read in script); drop unused shotSuccessText state and the
  shotCreated watcher that wrote to it; inline the five single-use
  frame*/fps/etc. computeds into resetForm; pull the duplicated
  frameIn/frameOut watcher logic into one updateNbFramesFromRange.
- EditAssetModal: extract buildPayload to dedupe the two confirm
  emits; collapse the source_id reset into a [...].includes(...)
  check.

CSS: drop dead .modal-content .box p.text / .is-danger / .info-message
across all four where they no longer matched anything; the
.title { border-bottom } rule on EditShotModal is dropped (scoped
styles can't reach BaseModal's title).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/components/modals/AddAttachmentModal.vue | 219 +++----
 src/components/modals/AddThumbnailsModal.vue | 531 ++++++++---------
 src/components/modals/EditAssetModal.vue     | 576 ++++++++-----------
 src/components/modals/EditShotModal.vue      | 473 ++++++---------
 4 files changed, 721 insertions(+), 1078 deletions(-)

diff --git a/src/components/modals/AddAttachmentModal.vue b/src/components/modals/AddAttachmentModal.vue
index c73182fb21..948ce13363 100644
--- a/src/components/modals/AddAttachmentModal.vue
+++ b/src/components/modals/AddAttachmentModal.vue
@@ -29,7 +29,7 @@
 
         <div class="flexrow buttons attachment-modal-buttons">
           <file-upload
-            ref="file-field"
+            ref="fileField"
             class="flexrow-item"
             :label="$t('main.select_file')"
             :accept="extensions"
@@ -103,159 +103,104 @@
   </div>
 </template>
 
-<script>
-import { modalMixin } from '@/components/modals/base_modal'
+<script setup>
+import { onBeforeUnmount, onMounted, ref, toRef, watch } from 'vue'
 
+import { useModal } from '@/composables/modal'
 import files from '@/lib/files'
 
 import FileUpload from '@/components/widgets/FileUpload.vue'
 
-export default {
-  name: 'add-attachment-modal',
+const props = defineProps({
+  active: { type: Boolean, default: false },
+  extensions: { type: String, default: files.ALL_EXTENSIONS_STRING },
+  isEditing: { type: Boolean, default: false },
+  isError: { type: Boolean, default: false },
+  isLoading: { type: Boolean, default: false },
+  isMovie: { type: Boolean, default: false },
+  title: { type: String, default: '' }
+})
 
-  mixins: [modalMixin],
+const emit = defineEmits(['add-snapshots', 'cancel', 'confirm'])
 
-  components: {
-    FileUpload
-  },
+useModal(toRef(props, 'active'), emit)
 
-  props: {
-    active: {
-      type: Boolean,
-      default: false
-    },
-    isLoading: {
-      type: Boolean,
-      default: false
-    },
-    isError: {
-      type: Boolean,
-      default: false
-    },
-    isEditing: {
-      type: Boolean,
-      default: false
-    },
-    isMovie: {
-      type: Boolean,
-      default: false
-    },
-    extensions: {
-      type: String,
-      default: files.ALL_EXTENSIONS_STRING
-    },
-    title: {
-      type: String,
-      default: ''
-    }
-  },
+const fileField = ref(null)
+const forms = ref([])
+const isAnnotationLoading = ref(false)
+const isDraggingFile = ref(false)
 
-  emits: ['add-snapshots', 'cancel', 'confirm'],
+const onFileSelected = newForms => {
+  forms.value = forms.value.concat(newForms)
+}
 
-  data() {
-    return {
-      forms: [],
-      isAnnotationLoading: false,
-      isDraggingFile: false
-    }
-  },
+const confirm = () => {
+  emit('confirm', forms.value)
+}
 
-  computed: {
-    fileField() {
-      return this.$refs['file-field']
-    }
-  },
+const reset = () => {
+  fileField.value?.reset()
+  forms.value = []
+}
 
-  methods: {
-    onFileSelected(forms) {
-      this.forms = this.forms.concat(forms)
-    },
-
-    confirm() {
-      this.$emit('confirm', this.forms)
-    },
-
-    reset() {
-      this.fileField.reset()
-      this.forms = []
-    },
-
-    onPaste(event) {
-      if (this.active && event.clipboardData.files) {
-        this.addFiles(event.clipboardData.files)
-      }
-    },
-
-    getURL(form) {
-      return window.URL.createObjectURL(form.get('file'))
-    },
-
-    isImage(form) {
-      return form.get('file').type.startsWith('image')
-    },
-
-    isVideo(form) {
-      return form.get('file').type.startsWith('video')
-    },
-
-    isPdf(form) {
-      return form.get('file').type.indexOf('pdf') > 0
-    },
-
-    addFiles(files) {
-      this.fileField.filesChange('', files)
-    },
-
-    showAnnotationLoading() {
-      this.isAnnotationLoading = true
-    },
-
-    hideAnnotationLoading() {
-      this.isAnnotationLoading = false
-    },
-
-    removeAttachment(form) {
-      this.forms = this.forms.filter(f => f !== form)
-    },
-
-    onFileDragover(event) {
-      event.preventDefault()
-      event.stopPropagation()
-      this.isDraggingFile = true
-    },
-
-    onFileDragLeave(event) {
-      event.preventDefault()
-      event.stopPropagation()
-      if (event.target.id === 'drop-mask') {
-        this.isDraggingFile = false
-      }
-    },
-
-    onDrag(event) {},
-
-    onDrop(event) {
-      this.fileField.onDrop(event)
-      this.isDraggingFile = false
-      event.preventDefault()
-    }
-  },
+const addFiles = fileList => {
+  fileField.value?.filesChange('', fileList)
+}
 
-  watch: {
-    active() {
-      this.reset()
-    }
-  },
+const onPaste = event => {
+  if (props.active && event.clipboardData.files) {
+    addFiles(event.clipboardData.files)
+  }
+}
 
-  mounted() {
-    this.forms = []
-    window.addEventListener('paste', this.onPaste, false)
-  },
+const getURL = form => window.URL.createObjectURL(form.get('file'))
 
-  beforeUnmount() {
-    window.removeEventListener('paste', this.onPaste)
+const isImage = form => form.get('file').type.startsWith('image')
+const isVideo = form => form.get('file').type.startsWith('video')
+const isPdf = form => form.get('file').type.indexOf('pdf') > 0
+
+const removeAttachment = form => {
+  forms.value = forms.value.filter(f => f !== form)
+}
+
+const onFileDragover = event => {
+  event.preventDefault()
+  event.stopPropagation()
+  isDraggingFile.value = true
+}
+
+const onFileDragLeave = event => {
+  event.preventDefault()
+  event.stopPropagation()
+  if (event.target.id === 'drop-mask') {
+    isDraggingFile.value = false
   }
 }
+
+const onDrop = event => {
+  fileField.value?.onDrop(event)
+  isDraggingFile.value = false
+  event.preventDefault()
+}
+
+watch(() => props.active, reset)
+
+onMounted(() => {
+  window.addEventListener('paste', onPaste, false)
+})
+
+onBeforeUnmount(() => {
+  window.removeEventListener('paste', onPaste)
+})
+
+defineExpose({
+  showAnnotationLoading: () => {
+    isAnnotationLoading.value = true
+  },
+  hideAnnotationLoading: () => {
+    isAnnotationLoading.value = false
+  }
+})
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/modals/AddThumbnailsModal.vue b/src/components/modals/AddThumbnailsModal.vue
index 8b63da1676..25225c301f 100644
--- a/src/components/modals/AddThumbnailsModal.vue
+++ b/src/components/modals/AddThumbnailsModal.vue
@@ -1,333 +1,256 @@
 <template>
-  <div
-    class="modal"
-    :class="{
-      'is-active': active
-    }"
+  <base-modal
+    :active="active"
+    :title="$t('entities.thumbnails.title')"
+    @cancel="$emit('cancel')"
   >
-    <div class="modal-background" @click="$emit('cancel')"></div>
-
-    <div class="modal-content">
-      <div class="box content">
-        <h1 class="title">
-          {{ $t('entities.thumbnails.title') }}
-        </h1>
-
-        <p>
-          {{ $t('entities.thumbnails.explanation') }}
-        </p>
-
-        <combobox-task-type
-          :label="$t('entities.thumbnails.select_task_type')"
-          :task-type-list="taskTypeList"
-          v-model="taskTypeId"
-        />
-
-        <p>
-          {{ $t('entities.thumbnails.explanation_two') }}
-          {{ $t(`entities.thumbnails.${parent}_pattern`) }}
-        </p>
-
-        <label class="label">
-          {{ $t('entities.thumbnails.select_files') }}
-        </label>
-
-        <file-upload
-          ref="preview-field"
-          :label="$t('main.csv.upload_file')"
-          :accept="extensions"
-          @fileselected="onFileSelected"
-          :multiple="true"
-        />
-
-        <div class="warning" v-if="invalidForms.length">
-          <label class="label mt2">
-            {{ $t('entities.thumbnails.invalid_files') }}
-          </label>
-          <ul class="invalid-files">
-            <li v-for="(form, index) in invalidForms" :key="index">
-              {{ form.get('file').name }}
-            </li>
-          </ul>
-        </div>
-
-        <label class="label mt2" v-if="thumbnailList.length">
-          {{ $t('entities.thumbnails.selected_files') }}
-        </label>
-        <div
-          class="thumbnail-line flexrow"
-          :key="thumbnailInfo.id"
-          v-for="thumbnailInfo in thumbnailList"
-        >
-          <img
-            class="flexrow-item"
-            src="@/assets/icons/movie-thumbnail.png"
-            width="150"
-            height="100"
-            v-if="!thumbnailInfo.src"
-          />
-          <img
-            class="flexrow-item"
-            :src="thumbnailInfo.src"
-            width="150"
-            height="100"
-            v-if="thumbnailInfo.src"
-          />
-          <span class="flexrow-item">
-            <template v-if="thumbnailInfo.parentName">
-              {{ thumbnailInfo.parentName }} /
-            </template>
-            {{ thumbnailInfo.name }}
-          </span>
-          <spinner v-if="loading[thumbnailInfo.id]" :size="10" />
-          <check-icon v-if="uploaded[thumbnailInfo.id]" />
-        </div>
-
-        <modal-footer
-          :error-text="$t('entities.thumbnails.error')"
-          :is-error="isError"
-          :is-loading="isLoading"
-          :is-disabled="!isFormFilled"
-          @confirm="confirm"
-          @cancel="$emit('cancel')"
-        />
-      </div>
+    <p>
+      {{ $t('entities.thumbnails.explanation') }}
+    </p>
+
+    <combobox-task-type
+      :label="$t('entities.thumbnails.select_task_type')"
+      :task-type-list="taskTypeList"
+      v-model="taskTypeId"
+    />
+
+    <p>
+      {{ $t('entities.thumbnails.explanation_two') }}
+      {{ $t(`entities.thumbnails.${parent}_pattern`) }}
+    </p>
+
+    <label class="label">
+      {{ $t('entities.thumbnails.select_files') }}
+    </label>
+
+    <file-upload
+      ref="previewField"
+      :label="$t('main.csv.upload_file')"
+      :accept="extensions"
+      @fileselected="onFileSelected"
+      :multiple="true"
+    />
+
+    <div class="warning" v-if="invalidForms.length">
+      <label class="label mt2">
+        {{ $t('entities.thumbnails.invalid_files') }}
+      </label>
+      <ul class="invalid-files">
+        <li v-for="(form, index) in invalidForms" :key="index">
+          {{ form.get('file').name }}
+        </li>
+      </ul>
     </div>
-  </div>
+
+    <label class="label mt2" v-if="thumbnailList.length">
+      {{ $t('entities.thumbnails.selected_files') }}
+    </label>
+    <div
+      class="thumbnail-line flexrow"
+      :key="thumbnailInfo.id"
+      v-for="thumbnailInfo in thumbnailList"
+    >
+      <img
+        class="flexrow-item"
+        src="@/assets/icons/movie-thumbnail.png"
+        width="150"
+        height="100"
+        v-if="!thumbnailInfo.src"
+      />
+      <img
+        class="flexrow-item"
+        :src="thumbnailInfo.src"
+        width="150"
+        height="100"
+        v-if="thumbnailInfo.src"
+      />
+      <span class="flexrow-item">
+        <template v-if="thumbnailInfo.parentName">
+          {{ thumbnailInfo.parentName }} /
+        </template>
+        {{ thumbnailInfo.name }}
+      </span>
+      <spinner v-if="loading[thumbnailInfo.id]" :size="10" />
+      <check-icon v-if="uploaded[thumbnailInfo.id]" />
+    </div>
+
+    <modal-footer
+      :error-text="$t('entities.thumbnails.error')"
+      :is-error="isError"
+      :is-loading="isLoading"
+      :is-disabled="!isFormFilled"
+      @confirm="confirm"
+      @cancel="$emit('cancel')"
+    />
+  </base-modal>
 </template>
 
-<script>
+<script setup>
 import { CheckIcon } from 'lucide-vue-next'
-import { mapGetters } from 'vuex'
-
-import { modalMixin } from '@/components/modals/base_modal'
+import { computed, onMounted, ref, watch } from 'vue'
+import { useStore } from 'vuex'
 
 import stringHelpers from '@/lib/string'
 import assetStore from '@/store/modules/assets'
 import editStore from '@/store/modules/edits'
 import shotStore from '@/store/modules/shots'
 
+import BaseModal from '@/components/modals/BaseModal.vue'
+import ModalFooter from '@/components/modals/ModalFooter.vue'
 import ComboboxTaskType from '@/components/widgets/ComboboxTaskType.vue'
+// eslint-disable-next-line no-unused-vars
 import FileUpload from '@/components/widgets/FileUpload.vue'
-import ModalFooter from '@/components/modals/ModalFooter.vue'
 import Spinner from '@/components/widgets/Spinner.vue'
 
-export default {
-  name: 'add-thumbnails-modal',
+const store = useStore()
 
-  mixins: [modalMixin],
-
-  components: {
-    CheckIcon,
-    ComboboxTaskType,
-    FileUpload,
-    ModalFooter,
-    Spinner
+const props = defineProps({
+  active: { type: Boolean, default: false },
+  entityType: {
+    type: String,
+    required: true,
+    validator: value => ['Asset', 'Edit', 'Shot'].includes(value)
   },
+  isError: { type: Boolean, default: false },
+  isLoading: { type: Boolean, default: false },
+  parent: { type: String, required: true }
+})
+
+const emit = defineEmits(['cancel', 'confirm'])
+
+const extensions = '.png,.jpg,.jpeg,.mp4,.mov'
+
+const entityMap = ref({})
+const forms = ref([])
+const loading = ref({})
+const previewField = ref(null)
+const taskTypeId = ref(null)
+const uploaded = ref({})
+
+const assetValidationColumns = computed(
+  () => store.getters.assetValidationColumns
+)
+const editValidationColumns = computed(
+  () => store.getters.editValidationColumns
+)
+const shotValidationColumns = computed(
+  () => store.getters.shotValidationColumns
+)
+const taskTypeMap = computed(() => store.getters.taskTypeMap)
+const taskMap = computed(() => store.getters.taskMap)
+
+const isAssets = computed(() => props.entityType === 'Asset')
+const isEdits = computed(() => props.entityType === 'Edit')
+const isShots = computed(() => props.entityType === 'Shot')
+
+const taskTypeList = computed(() => {
+  let validationColumns = []
+  if (isAssets.value) validationColumns = assetValidationColumns.value || []
+  else if (isEdits.value) validationColumns = editValidationColumns.value || []
+  else if (isShots.value) validationColumns = shotValidationColumns.value || []
+  return validationColumns.map(id => taskTypeMap.value.get(id))
+})
+
+const slugifyFilename = form =>
+  stringHelpers.slugify(
+    stringHelpers.filenameWithoutExtension(form.get('file').name)
+  )
+
+const validForms = computed(() =>
+  forms.value.filter(form => {
+    const asset = entityMap.value[slugifyFilename(form)]
+    return asset && asset.validations.get(taskTypeId.value)
+  })
+)
+
+const invalidForms = computed(() =>
+  forms.value.filter(form => !validForms.value.includes(form))
+)
+
+const prepareImagePreview = form =>
+  form.get('file').type.startsWith('image')
+    ? window.URL.createObjectURL(form.get('file'))
+    : ''
+
+const thumbnailList = computed(() =>
+  validForms.value.map(form => {
+    const asset = entityMap.value[slugifyFilename(form)]
+    const url = prepareImagePreview(form)
+    let parentName = ''
+    if (isAssets.value) parentName = asset.asset_type_name
+    else if (isEdits.value) parentName = asset.episode_name
+    else if (isShots.value) parentName = asset.sequence_name
+    form.asset = asset
+    return { parentName, name: asset.name, id: asset.id, src: url }
+  })
+)
+
+const isFormFilled = computed(() => thumbnailList.value.length > 0)
+
+const reset = () => {
+  if (taskTypeList.value.length > 0) {
+    taskTypeId.value = taskTypeList.value[0].id
+  }
+  previewField.value?.reset()
+  forms.value = []
+  loading.value = {}
+  uploaded.value = {}
+}
 
-  props: {
-    active: {
-      type: Boolean,
-      default: false
-    },
-    entityType: {
-      type: String,
-      required: true,
-      validator: value => ['Asset', 'Edit', 'Shot'].includes(value)
-    },
-    isLoading: {
-      type: Boolean,
-      default: false
-    },
-    isError: {
-      type: Boolean,
-      default: false
-    },
-    parent: {
-      type: String,
-      required: true
-    }
-  },
+const addTaskInformation = form => {
+  const entity = entityMap.value[slugifyFilename(form)]
+  form.task = taskMap.value.get(entity.validations.get(taskTypeId.value))
+  return form
+}
 
-  emits: ['cancel', 'confirm'],
+const confirm = () => {
+  emit('confirm', validForms.value.map(addTaskInformation))
+}
 
-  data() {
-    return {
-      extensions: '.png,.jpg,.jpeg,.mp4,.mov',
-      forms: [],
-      loading: {},
-      taskTypeId: null,
-      uploaded: {}
-    }
-  },
+const addEntityToEntityMap = entity => {
+  let fullName = ''
+  if (isAssets.value) {
+    fullName = stringHelpers.slugify(`${entity.asset_type_name}_${entity.name}`)
+  } else if (isEdits.value) {
+    fullName = stringHelpers.slugify(
+      entity.episode_name
+        ? `${entity.episode_name}_${entity.name}`
+        : entity.name
+    )
+  } else if (isShots.value) {
+    fullName = stringHelpers.slugify(`${entity.sequence_name}_${entity.name}`)
+  }
+  entityMap.value[fullName] = entity
+}
 
-  mounted() {
-    this.reset()
-  },
+const onFileSelected = newForms => {
+  entityMap.value = {}
+  uploaded.value = {}
+  let cachedEntities = []
+  if (isAssets.value) cachedEntities = assetStore.cache.assets
+  else if (isEdits.value) cachedEntities = editStore.cache.edits
+  else if (isShots.value) cachedEntities = shotStore.cache.shots
+  cachedEntities.forEach(addEntityToEntityMap)
+  forms.value = newForms
+}
 
-  computed: {
-    ...mapGetters([
-      'assetValidationColumns',
-      'editValidationColumns',
-      'shotValidationColumns',
-      'taskTypeMap',
-      'taskMap'
-    ]),
-
-    isFormFilled() {
-      return this.thumbnailList.length > 0
-    },
-
-    taskTypeList() {
-      let validationColumns = []
-      if (this.isAssets) {
-        validationColumns = this.assetValidationColumns || []
-      } else if (this.isEdits) {
-        validationColumns = this.editValidationColumns || []
-      } else if (this.isShots) {
-        validationColumns = this.shotValidationColumns || []
-      }
-      return validationColumns.map(taskTypeId =>
-        this.taskTypeMap.get(taskTypeId)
-      )
-    },
-
-    isAssets() {
-      return this.entityType === 'Asset'
-    },
-    isEdits() {
-      return this.entityType === 'Edit'
-    },
-    isShots() {
-      return this.entityType === 'Shot'
-    },
-
-    validForms() {
-      return this.forms.filter(form => {
-        const filename = this.slugifyFilename(form)
-        const asset = this.entityMap[filename]
-        return asset && asset.validations.get(this.taskTypeId)
-      })
-    },
-
-    invalidForms() {
-      return this.forms.filter(form => !this.validForms.includes(form))
-    },
-
-    thumbnailList() {
-      return this.validForms.map(form => {
-        const asset = this.entityMap[this.slugifyFilename(form)]
-        const url = this.prepareImagePreview(form)
-        let parentName = ''
-        if (this.isAssets) {
-          parentName = asset.asset_type_name
-        } else if (this.isEdits) {
-          parentName = asset.episode_name
-        } else if (this.isShots) {
-          parentName = asset.sequence_name
-        }
-        form.asset = asset
-        return {
-          parentName,
-          name: asset.name,
-          id: asset.id,
-          src: url
-        }
-      })
-    }
-  },
+watch(
+  () => props.active,
+  active => {
+    if (active) reset()
+  }
+)
 
-  methods: {
-    reset() {
-      if (this.taskTypeList.length > 0) {
-        this.taskTypeId = this.taskTypeList[0].id
-      }
-      this.$refs['preview-field'].reset()
-      this.forms = []
-      this.loading = {}
-      this.uploaded = {}
-    },
-
-    confirm() {
-      return this.$emit('confirm', this.validForms.map(this.addTaskInformation))
-    },
-
-    addEntityToEntityMap(entity) {
-      let fullName = ''
-      if (this.isAssets) {
-        fullName = stringHelpers.slugify(
-          `${entity.asset_type_name}_${entity.name}`
-        )
-      } else if (this.isEdits) {
-        fullName = stringHelpers.slugify(
-          entity.episode_name
-            ? `${entity.episode_name}_${entity.name}`
-            : entity.name
-        )
-      } else if (this.isShots) {
-        fullName = stringHelpers.slugify(
-          `${entity.sequence_name}_${entity.name}`
-        )
-      }
-      this.entityMap[fullName] = entity
-    },
-
-    addTaskInformation(form) {
-      const filename = this.slugifyFilename(form)
-      const entity = this.entityMap[filename]
-      const task = this.taskMap.get(entity.validations.get(this.taskTypeId))
-      form.task = task
-      return form
-    },
-
-    onFileSelected(forms) {
-      this.entityMap = {}
-      this.uploaded = {}
-      let cachedEntities = []
-      if (this.isAssets) {
-        cachedEntities = assetStore.cache.assets
-      } else if (this.isEdits) {
-        cachedEntities = editStore.cache.edits
-      } else if (this.isShots) {
-        cachedEntities = shotStore.cache.shots
-      }
-      cachedEntities.forEach(this.addEntityToEntityMap)
-      this.forms = forms
-    },
-
-    slugifyFilename(form) {
-      const filename = form.get('file').name
-      return stringHelpers.slugify(
-        stringHelpers.filenameWithoutExtension(filename)
-      )
-    },
-
-    prepareImagePreview(form) {
-      if (form.get('file').type.startsWith('image')) {
-        return window.URL.createObjectURL(form.get('file'))
-      }
-      return ''
-    },
-
-    markLoading(assetId) {
-      this.loading = {
-        [assetId]: true
-      }
-    },
-
-    markUploaded(assetId) {
-      this.uploaded[assetId] = true
-    }
-  },
+onMounted(reset)
 
-  watch: {
-    active() {
-      if (this.active) {
-        this.reset()
-      }
-    }
+defineExpose({
+  markLoading: assetId => {
+    loading.value = { [assetId]: true }
+  },
+  markUploaded: assetId => {
+    uploaded.value[assetId] = true
   }
-}
+})
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/modals/EditAssetModal.vue b/src/components/modals/EditAssetModal.vue
index 8f8b917d61..dac8824af8 100644
--- a/src/components/modals/EditAssetModal.vue
+++ b/src/components/modals/EditAssetModal.vue
@@ -1,368 +1,266 @@
 <template>
-  <div
-    :class="{
-      modal: true,
-      'is-active': active
-    }"
-  >
-    <div class="modal-background" @click="$emit('cancel')"></div>
-
-    <div class="modal-content">
-      <div class="box">
-        <h1 class="title" v-if="assetToEdit?.id">
-          {{ $t('assets.edit_title') }} {{ assetToEdit.name }}
-        </h1>
-        <h1 class="title" v-else>
-          {{ $t('assets.new_asset') }}
-        </h1>
-
-        <form @submit.prevent>
-          <combobox
-            :label="$t('assets.fields.type')"
-            :options="productionAssetTypeOptions"
-            v-model="form.entity_type_id"
-          />
-          <combobox
-            ref="episodeField"
-            :label="$t('assets.fields.episode')"
-            :options="episodeOptions"
-            required
-            v-model="form.source_id"
-            v-if="isTVShow"
-          />
-          <text-field
-            ref="nameField"
-            :label="$t('assets.fields.name')"
-            :maxlength="160"
-            v-model.trim="form.name"
-            @enter="runConfirmation"
-            v-focus
-          />
-          <textarea-field
-            ref="descriptionField"
-            :label="$t('assets.fields.description')"
-            v-model="form.description"
-            @keyup.ctrl.enter="runConfirmation"
-            @keyup.meta.enter="runConfirmation"
-          />
-          <text-field
-            ref="resolutionField"
-            :label="$t('shots.fields.resolution')"
-            :placeholder="currentProduction?.resolution"
-            v-model.trim="form.data.resolution"
-            @enter="runConfirmation"
-          />
-          <template v-if="assetToEdit">
-            <metadata-field
-              :key="descriptor.id"
-              :descriptor="descriptor"
-              :entity="assetToEdit"
-              @enter="runConfirmation"
-              v-model="form.data[descriptor.field_name]"
-              v-for="descriptor in assetMetadataDescriptors"
-            />
-          </template>
-          <combobox-boolean
-            :label="$t('assets.fields.shared')"
-            v-model="form.is_shared"
-            @enter="runConfirmation"
-          />
-        </form>
-
-        <div class="has-text-right">
-          <a
-            :class="{
-              button: true,
-              'is-primary': true,
-              'is-loading': isLoadingStay
-            }"
-            @click="confirmAndStayClicked"
-            v-if="!assetToEdit?.id"
-          >
-            {{ $t('main.confirmation_and_stay') }}
-          </a>
-          <a
-            :class="{
-              button: true,
-              'is-primary': true,
-              'is-loading': isLoading
-            }"
-            @click="confirmClicked"
-          >
-            {{ $t('main.confirmation') }}
-          </a>
-          <button class="button is-link" @click="$emit('cancel')">
-            {{ $t('main.close') }}
-          </button>
-          <p class="error has-text-right info-message" v-if="isError">
-            {{ $t('assets.edit_fail') }}
-          </p>
-          <p class="success has-text-right info-message" v-if="isSuccess">
-            {{ assetSuccessText }}
-          </p>
-        </div>
-      </div>
+  <base-modal :active="active" :title="modalTitle" @cancel="$emit('cancel')">
+    <form @submit.prevent>
+      <combobox
+        :label="$t('assets.fields.type')"
+        :options="productionAssetTypeOptions"
+        v-model="form.entity_type_id"
+      />
+      <combobox
+        ref="episodeField"
+        :label="$t('assets.fields.episode')"
+        :options="episodeOptions"
+        required
+        v-model="form.source_id"
+        v-if="isTVShow"
+      />
+      <text-field
+        ref="nameField"
+        :label="$t('assets.fields.name')"
+        :maxlength="160"
+        v-model.trim="form.name"
+        @enter="runConfirmation"
+        v-focus
+      />
+      <textarea-field
+        :label="$t('assets.fields.description')"
+        v-model="form.description"
+        @keyup.ctrl.enter="runConfirmation"
+        @keyup.meta.enter="runConfirmation"
+      />
+      <text-field
+        :label="$t('shots.fields.resolution')"
+        :placeholder="currentProduction?.resolution"
+        v-model.trim="form.data.resolution"
+        @enter="runConfirmation"
+      />
+      <template v-if="assetToEdit">
+        <metadata-field
+          :key="descriptor.id"
+          :descriptor="descriptor"
+          :entity="assetToEdit"
+          @enter="runConfirmation"
+          v-model="form.data[descriptor.field_name]"
+          v-for="descriptor in assetMetadataDescriptors"
+        />
+      </template>
+      <combobox-boolean
+        :label="$t('assets.fields.shared')"
+        v-model="form.is_shared"
+        @enter="runConfirmation"
+      />
+    </form>
+
+    <div class="has-text-right">
+      <a
+        :class="{
+          button: true,
+          'is-primary': true,
+          'is-loading': isLoadingStay
+        }"
+        @click="confirmAndStayClicked"
+        v-if="!assetToEdit?.id"
+      >
+        {{ $t('main.confirmation_and_stay') }}
+      </a>
+      <a
+        :class="{
+          button: true,
+          'is-primary': true,
+          'is-loading': isLoading
+        }"
+        @click="confirmClicked"
+      >
+        {{ $t('main.confirmation') }}
+      </a>
+      <button class="button is-link" @click="$emit('cancel')">
+        {{ $t('main.close') }}
+      </button>
+      <p class="error has-text-right info-message" v-if="isError">
+        {{ $t('assets.edit_fail') }}
+      </p>
+      <p class="success has-text-right info-message" v-if="isSuccess">
+        {{ assetSuccessText }}
+      </p>
     </div>
-  </div>
+  </base-modal>
 </template>
 
-<script>
-import { mapGetters } from 'vuex'
-
-import { modalMixin } from '@/components/modals/base_modal'
+<script setup>
+import { computed, onMounted, ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useStore } from 'vuex'
 
+import BaseModal from '@/components/modals/BaseModal.vue'
 import Combobox from '@/components/widgets/Combobox.vue'
 import ComboboxBoolean from '@/components/widgets/ComboboxBoolean.vue'
 import MetadataField from '@/components/widgets/MetadataField.vue'
 import TextField from '@/components/widgets/TextField.vue'
 import TextareaField from '@/components/widgets/TextareaField.vue'
 
-export default {
-  name: 'edit-asset-modal',
-
-  mixins: [modalMixin],
-
-  components: {
-    Combobox,
-    ComboboxBoolean,
-    MetadataField,
-    TextField,
-    TextareaField
-  },
+const { t } = useI18n()
+const store = useStore()
+
+const props = defineProps({
+  active: { type: Boolean, default: false },
+  assetToEdit: { type: Object, default: () => ({}) },
+  isError: { type: Boolean, default: false },
+  isLoading: { type: Boolean, default: false },
+  isLoadingStay: { type: Boolean, default: false },
+  isSuccess: { type: Boolean, default: false },
+  text: { type: String, default: '' }
+})
+
+const emit = defineEmits(['cancel', 'confirm', 'confirm-and-stay'])
+
+const form = ref({
+  name: '',
+  description: '',
+  source_id: 'null',
+  data: { resolution: '' },
+  is_shared: 'false'
+})
+const assetSuccessText = ref('')
+const episodeField = ref(null)
+const nameField = ref(null)
+
+const assetCreated = computed(() => store.getters.assetCreated)
+const assetMetadataDescriptors = computed(
+  () => store.getters.assetMetadataDescriptors
+)
+const currentEpisode = computed(() => store.getters.currentEpisode)
+const currentProduction = computed(() => store.getters.currentProduction)
+const episodes = computed(() => store.getters.episodes)
+const isTVShow = computed(() => store.getters.isTVShow)
+const openProductions = computed(() => store.getters.openProductions)
+const productionAssetTypeOptions = computed(
+  () => store.getters.productionAssetTypeOptions
+)
+
+const isEditing = computed(() => Boolean(props.assetToEdit?.id))
+
+const modalTitle = computed(() =>
+  isEditing.value
+    ? `${t('assets.edit_title')} ${props.assetToEdit.name}`
+    : t('assets.new_asset')
+)
+
+const episodeOptions = computed(() => {
+  const options = episodes.value.map(episode => ({
+    label: episode.name,
+    value: episode.id
+  }))
+  if (currentProduction.value?.production_style !== 'video-game') {
+    options.unshift({ label: t('main.main_pack'), value: 'null' })
+  }
+  return options
+})
 
-  props: {
-    active: {
-      type: Boolean,
-      default: false
-    },
-    text: {
-      type: String,
-      default: ''
-    },
-    isError: {
-      type: Boolean,
-      default: false
-    },
-    isLoading: {
-      type: Boolean,
-      default: false
-    },
-    isLoadingStay: {
-      type: Boolean,
-      default: false
-    },
-    isSuccess: {
-      type: Boolean,
-      default: false
-    },
-    assetToEdit: {
-      type: Object,
-      default: () => {}
-    }
-  },
+const validateForm = () => {
+  if (isTVShow.value && !episodeField.value?.isValid) {
+    episodeField.value?.focus()
+    return false
+  }
+  if (!form.value.name) {
+    nameField.value?.focus()
+    return false
+  }
+  return true
+}
 
-  emits: ['cancel', 'confirm', 'confirm-and-stay'],
+const buildPayload = () => ({
+  ...form.value,
+  is_shared: form.value.is_shared === 'true'
+})
 
-  data() {
-    return {
-      form: {
-        name: '',
-        description: '',
-        source_id: 'null',
-        data: {
-          resolution: ''
-        },
-        is_shared: 'false'
-      },
-      assetSuccessText: ''
-    }
-  },
+const confirmClicked = () => {
+  if (!validateForm()) return
+  emit('confirm', buildPayload())
+}
 
-  mounted() {
-    this.resetForm()
-    this.assetSuccessText = ''
-  },
+const confirmAndStayClicked = () => {
+  if (!validateForm()) return
+  emit('confirm-and-stay', buildPayload())
+}
 
-  computed: {
-    ...mapGetters([
-      'assets',
-      'assetCreated',
-      'assetMetadataDescriptors',
-      'assetTypes',
-      'currentProduction',
-      'currentEpisode',
-      'episodes',
-      'isTVShow',
-      'productionAssetTypes',
-      'productionAssetTypeOptions',
-      'openProductions'
-    ]),
+const runConfirmation = () => {
+  if (isEditing.value) confirmClicked()
+  else confirmAndStayClicked()
+}
 
-    resolution() {
-      return this.assetToEdit.data?.resolution || ''
-    },
+const getEntityTypeIdDefaultValue = () => {
+  const options = productionAssetTypeOptions.value
+  let entityTypeId = props.assetToEdit.asset_type_id || options[0]?.value
+  const isInOptions = options.some(option => option.value === entityTypeId)
+  if (!isInOptions) entityTypeId = options[0]?.value
+  return entityTypeId
+}
 
-    episodeOptions() {
-      const options = this.episodes.map(episode => {
-        return {
-          label: episode.name,
-          value: episode.id
-        }
-      })
-      if (this.currentProduction.production_style !== 'video-game') {
-        options.unshift({
-          label: this.$t('main.main_pack'),
-          value: 'null'
-        })
-      }
-      return options
+const resetForm = () => {
+  if (isEditing.value) {
+    form.value = {
+      entity_type_id: getEntityTypeIdDefaultValue(),
+      project_id: props.assetToEdit.project_id,
+      name: props.assetToEdit.name,
+      description: props.assetToEdit.description,
+      source_id:
+        props.assetToEdit.source_id || props.assetToEdit.episode_id || 'null',
+      data: {
+        ...props.assetToEdit.data,
+        resolution: props.assetToEdit.data?.resolution || ''
+      },
+      is_shared: String(props.assetToEdit.is_shared === true)
     }
-  },
-
-  methods: {
-    validateForm() {
-      if (this.isTVShow && !this.$refs.episodeField?.isValid) {
-        this.focusEpisode()
-        return false
-      }
-      if (!this.form.name) {
-        this.focusName()
-        return false
-      }
-      return true
-    },
-
-    runConfirmation() {
-      if (this.isEditing()) {
-        this.confirmClicked()
-      } else {
-        this.confirmAndStayClicked()
-      }
-    },
-
-    focusEpisode() {
-      this.$refs.episodeField?.focus()
-    },
-
-    focusName() {
-      this.$refs.nameField?.focus()
-    },
-
-    confirmAndStayClicked() {
-      if (!this.validateForm()) return
-      this.$emit('confirm-and-stay', {
-        ...this.form,
-        is_shared: this.form.is_shared === 'true'
-      })
-    },
-
-    confirmClicked() {
-      if (!this.validateForm()) return
-      this.$emit('confirm', {
-        ...this.form,
-        is_shared: this.form.is_shared === 'true'
-      })
-    },
-
-    isEditing() {
-      return this.assetToEdit?.id
-    },
-
-    getEntityTypeIdDefaultValue() {
-      let entityTypeId = this.assetToEdit.asset_type_id
-      if (!entityTypeId) {
-        entityTypeId = this.productionAssetTypeOptions[0]?.value
-      }
-      const isInOptions = this.productionAssetTypeOptions.some(
-        option => option.value === entityTypeId
-      )
-      if (!isInOptions) {
-        entityTypeId = this.productionAssetTypeOptions[0]?.value
-      }
-      return entityTypeId
-    },
-
-    resetForm() {
-      if (!this.isEditing()) {
-        if (!this.form.entity_type_id && this.productionAssetTypeOptions[0]) {
-          this.form.entity_type_id = this.productionAssetTypeOptions[0].value
-        }
-        if (this.openProductions.length > 0) {
-          this.form.project_id = this.currentProduction?.id || ''
-        }
-        this.form.name = ''
-        this.form.description = ''
-        this.form.source_id =
-          this.currentEpisode &&
-          !['all', 'main'].includes(this.currentEpisode.id)
-            ? this.currentEpisode.id
-            : 'null'
-        this.form.data = {}
-        this.form.is_shared = 'false'
-      } else {
-        const entityTypeId = this.getEntityTypeIdDefaultValue()
-        this.form = {
-          entity_type_id: entityTypeId,
-          project_id: this.assetToEdit.project_id,
-          name: this.assetToEdit.name,
-          description: this.assetToEdit.description,
-          source_id:
-            this.assetToEdit.source_id || this.assetToEdit.episode_id || 'null',
-          data: {
-            ...this.assetToEdit.data,
-            resolution: this.assetToEdit.data?.resolution || ''
-          },
-          is_shared: String(this.assetToEdit.is_shared === true)
-        }
-      }
+  } else {
+    if (!form.value.entity_type_id && productionAssetTypeOptions.value[0]) {
+      form.value.entity_type_id = productionAssetTypeOptions.value[0].value
     }
-  },
-
-  watch: {
-    assetToEdit() {
-      this.resetForm()
-    },
-
-    assetCreated() {
-      if (this.isEditing()) {
-        this.assetSuccessText = this.$t('assets.edit_success', {
-          name: this.assetCreated
-        })
-      } else {
-        this.assetSuccessText = this.$t('assets.new_success', {
-          name: this.assetCreated
-        })
-      }
-    },
-
-    active() {
-      this.assetSuccessText = ''
-      this.resetForm()
-      if (this.active) {
-        setTimeout(() => {
-          this.$refs.nameField?.focus()
-        }, 100)
-      }
-    },
-
-    currentProduction() {
-      this.form.entity_type_id = null
-      this.resetForm()
+    if (openProductions.value.length > 0) {
+      form.value.project_id = currentProduction.value?.id || ''
     }
+    form.value.name = ''
+    form.value.description = ''
+    form.value.source_id = ['all', 'main'].includes(currentEpisode.value?.id)
+      ? 'null'
+      : currentEpisode.value?.id || 'null'
+    form.value.data = {}
+    form.value.is_shared = 'false'
   }
 }
-</script>
 
-<style lang="scss" scoped>
-.modal-content .box p.text {
-  margin-bottom: 1em;
-}
+watch(() => props.assetToEdit, resetForm)
+
+watch(assetCreated, value => {
+  assetSuccessText.value = isEditing.value
+    ? t('assets.edit_success', { name: value })
+    : t('assets.new_success', { name: value })
+})
+
+watch(
+  () => props.active,
+  active => {
+    assetSuccessText.value = ''
+    resetForm()
+    if (active) {
+      setTimeout(() => {
+        nameField.value?.focus()
+      }, 100)
+    }
+  }
+)
 
-.is-danger {
-  color: #ff3860;
-  font-style: italic;
-}
+watch(currentProduction, () => {
+  form.value.entity_type_id = null
+  resetForm()
+})
 
+onMounted(() => {
+  resetForm()
+  assetSuccessText.value = ''
+})
+</script>
+
+<style lang="scss" scoped>
 .info-message {
   margin-top: 1em;
 }
diff --git a/src/components/modals/EditShotModal.vue b/src/components/modals/EditShotModal.vue
index bd6a8e3a11..eb446192ac 100644
--- a/src/components/modals/EditShotModal.vue
+++ b/src/components/modals/EditShotModal.vue
@@ -1,326 +1,203 @@
 <template>
-  <div
-    :class="{
-      modal: true,
-      'is-active': active
-    }"
-  >
-    <div class="modal-background" @click="$emit('cancel')"></div>
-
-    <div class="modal-content">
-      <div class="box">
-        <h1 class="title" v-if="shotToEdit && shotToEdit.id">
-          {{ $t('shots.edit_title') }} {{ shotToEdit.name }}
-        </h1>
-        <h1 class="title" v-else>
-          {{ $t('shots.new_shot') }}
-        </h1>
-
-        <form @submit.prevent>
-          <combobox
-            :label="$t('shots.fields.sequence')"
-            :options="sequenceOptions"
-            v-model="form.sequence_id"
-          />
-          <text-field
-            ref="nameField"
-            :label="$t('shots.fields.name')"
-            :maxlength="160"
-            v-model.trim="form.name"
-            @enter="runConfirmation"
-            v-focus
-          />
-          <textarea-field
-            ref="descriptionField"
-            :label="$t('shots.fields.description')"
-            v-model="form.description"
-            @keyup.ctrl.enter="runConfirmation"
-            @keyup.meta.enter="runConfirmation"
-          />
-          <text-field
-            ref="nbFramesField"
-            :label="$t('shots.fields.nb_frames')"
-            type="number"
-            v-model="form.nb_frames"
-            @enter="runConfirmation"
-            v-if="!isPaperProduction"
-          />
-          <text-field
-            ref="frameInField"
-            :label="$t('shots.fields.frame_in')"
-            v-model="form.frameIn"
-            type="number"
-          />
-          <text-field
-            ref="frameOutField"
-            :label="$t('shots.fields.frame_out')"
-            v-model="form.frameOut"
-            type="number"
-            @enter="runConfirmation"
-          />
-          <text-field
-            ref="fpsField"
-            :label="$t('shots.fields.fps')"
-            type="number"
-            :max="1000"
-            :step="0.001"
-            :placeholder="currentProduction?.fps"
-            v-model="form.fps"
-            @enter="runConfirmation"
-          />
-          <text-field
-            ref="resolutionField"
-            :label="$t('shots.fields.resolution')"
-            :placeholder="currentProduction?.resolution"
-            v-model.trim="form.resolution"
-            @enter="runConfirmation"
-          />
-          <text-field
-            ref="maxRetakesField"
-            type="number"
-            :label="$t('shots.fields.max_retakes')"
-            :placeholder="currentProduction?.max_retakes"
-            v-model="form.max_retakes"
-            @enter="runConfirmation"
-          />
-
-          <template v-if="shotToEdit">
-            <metadata-field
-              :key="descriptor.id"
-              :descriptor="descriptor"
-              :entity="shotToEdit"
-              @enter="runConfirmation"
-              v-model="form.data[descriptor.field_name]"
-              v-for="descriptor in shotMetadataDescriptors"
-            />
-          </template>
-        </form>
-
-        <modal-footer
-          :error-text="$t('shots.edit_fail')"
-          :is-loading="isLoading"
-          :is-error="isError"
-          @confirm="confirmClicked"
-          @cancel="$emit('cancel')"
+  <base-modal :active="active" :title="modalTitle" @cancel="$emit('cancel')">
+    <form @submit.prevent>
+      <combobox
+        :label="$t('shots.fields.sequence')"
+        :options="sequenceOptions"
+        v-model="form.sequence_id"
+      />
+      <text-field
+        ref="nameField"
+        :label="$t('shots.fields.name')"
+        :maxlength="160"
+        v-model.trim="form.name"
+        @enter="runConfirmation"
+        v-focus
+      />
+      <textarea-field
+        :label="$t('shots.fields.description')"
+        v-model="form.description"
+        @keyup.ctrl.enter="runConfirmation"
+        @keyup.meta.enter="runConfirmation"
+      />
+      <text-field
+        :label="$t('shots.fields.nb_frames')"
+        type="number"
+        v-model="form.nb_frames"
+        @enter="runConfirmation"
+        v-if="!isPaperProduction"
+      />
+      <text-field
+        :label="$t('shots.fields.frame_in')"
+        v-model="form.frameIn"
+        type="number"
+      />
+      <text-field
+        :label="$t('shots.fields.frame_out')"
+        v-model="form.frameOut"
+        type="number"
+        @enter="runConfirmation"
+      />
+      <text-field
+        :label="$t('shots.fields.fps')"
+        type="number"
+        :max="1000"
+        :step="0.001"
+        :placeholder="currentProduction?.fps"
+        v-model="form.fps"
+        @enter="runConfirmation"
+      />
+      <text-field
+        :label="$t('shots.fields.resolution')"
+        :placeholder="currentProduction?.resolution"
+        v-model.trim="form.resolution"
+        @enter="runConfirmation"
+      />
+      <text-field
+        type="number"
+        :label="$t('shots.fields.max_retakes')"
+        :placeholder="currentProduction?.max_retakes"
+        v-model="form.max_retakes"
+        @enter="runConfirmation"
+      />
+
+      <template v-if="shotToEdit">
+        <metadata-field
+          :key="descriptor.id"
+          :descriptor="descriptor"
+          :entity="shotToEdit"
+          @enter="runConfirmation"
+          v-model="form.data[descriptor.field_name]"
+          v-for="descriptor in shotMetadataDescriptors"
         />
-      </div>
-    </div>
-  </div>
+      </template>
+    </form>
+
+    <modal-footer
+      :error-text="$t('shots.edit_fail')"
+      :is-loading="isLoading"
+      :is-error="isError"
+      @confirm="confirmClicked"
+      @cancel="$emit('cancel')"
+    />
+  </base-modal>
 </template>
 
-<script>
-import { mapGetters, mapActions } from 'vuex'
-import { modalMixin } from '@/components/modals/base_modal'
-import { formatListMixin } from '@/components/mixins/format'
+<script setup>
+import { computed, onMounted, ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useStore } from 'vuex'
+
+import { sanitizeInteger } from '@/composables/format'
 
+import BaseModal from '@/components/modals/BaseModal.vue'
+import ModalFooter from '@/components/modals/ModalFooter.vue'
 import Combobox from '@/components/widgets/Combobox.vue'
 import MetadataField from '@/components/widgets/MetadataField.vue'
-import ModalFooter from '@/components/modals/ModalFooter.vue'
 import TextField from '@/components/widgets/TextField.vue'
 import TextareaField from '@/components/widgets/TextareaField.vue'
 
-export default {
-  name: 'edit-shot-modal',
+const { t } = useI18n()
+const store = useStore()
 
-  mixins: [formatListMixin, modalMixin],
+const props = defineProps({
+  active: { type: Boolean, default: false },
+  isError: { type: Boolean, default: false },
+  isLoading: { type: Boolean, default: false },
+  shotToEdit: { type: Object, default: () => ({}) }
+})
 
-  components: {
-    Combobox,
-    MetadataField,
-    ModalFooter,
-    TextField,
-    TextareaField
-  },
+const emit = defineEmits(['cancel', 'confirm', 'confirm-and-stay'])
 
-  props: {
-    active: {
-      type: Boolean,
-      default: false
-    },
-    isError: {
-      type: Boolean,
-      default: false
-    },
-    isLoading: {
-      type: Boolean,
-      default: false
-    },
-    shotToEdit: {
-      type: Object,
-      default: () => {}
-    }
-  },
+const form = ref({ data: {} })
+const nameField = ref(null)
 
-  emits: ['cancel', 'confirm', 'confirm-and-stay'],
-
-  data() {
-    return {
-      form: {
-        data: {}
-      },
-      shotSuccessText: ''
-    }
-  },
+const currentProduction = computed(() => store.getters.currentProduction)
+const isPaperProduction = computed(() => store.getters.isPaperProduction)
+const openProductions = computed(() => store.getters.openProductions)
+const sequenceOptions = computed(() => store.getters.sequenceOptions)
+const sequences = computed(() => store.getters.sequences)
+const shotMetadataDescriptors = computed(
+  () => store.getters.shotMetadataDescriptors
+)
 
-  mounted() {
-    this.resetForm()
-  },
+const isEditing = computed(() => Boolean(props.shotToEdit?.id))
 
-  computed: {
-    ...mapGetters([
-      'currentProduction',
-      'isPaperProduction',
-      'openProductions',
-      'sequenceOptions',
-      'sequences',
-      'shotCreated',
-      'shotMetadataDescriptors'
-    ]),
+const modalTitle = computed(() =>
+  isEditing.value
+    ? `${t('shots.edit_title')} ${props.shotToEdit.name}`
+    : t('shots.new_shot')
+)
 
-    frameIn() {
-      return this.shotToEdit.data ? this.shotToEdit.data.frame_in : ''
-    },
-
-    frameOut() {
-      return this.shotToEdit.data ? this.shotToEdit.data.frame_out : ''
-    },
+const confirmClicked = () => {
+  emit('confirm', form.value)
+}
 
-    fps() {
-      return this.shotToEdit.data ? this.shotToEdit.data.fps : ''
-    },
+const confirmAndStayClicked = () => {
+  emit('confirm-and-stay', form.value)
+}
 
-    resolution() {
-      return this.shotToEdit.data ? this.shotToEdit.data.resolution : ''
-    },
+const runConfirmation = () => {
+  if (isEditing.value) confirmClicked()
+  else confirmAndStayClicked()
+}
 
-    maxRetakes() {
-      return parseInt(this.shotToEdit.data?.max_retakes) || ''
+const resetForm = () => {
+  if (isEditing.value) {
+    const shotData = props.shotToEdit.data || {}
+    form.value = {
+      sequence_id: props.shotToEdit.sequence_id,
+      project_id: props.shotToEdit.project_id,
+      name: props.shotToEdit.name,
+      description: props.shotToEdit.description,
+      nb_frames: props.shotToEdit.nb_frames,
+      frameIn: shotData.frame_in || '',
+      frameOut: shotData.frame_out || '',
+      fps: shotData.fps || '',
+      max_retakes: parseInt(shotData.max_retakes) || '',
+      resolution: shotData.resolution || '',
+      data: { ...shotData }
     }
-  },
-
-  methods: {
-    ...mapActions(['loadSequences']),
-
-    runConfirmation() {
-      if (this.isEditing()) {
-        this.confirmClicked()
-      } else {
-        this.confirmAndStayClicked()
-      }
-    },
-
-    confirmAndStayClicked() {
-      this.$emit('confirm-and-stay', this.form)
-    },
-
-    confirmClicked() {
-      this.$emit('confirm', this.form)
-    },
-
-    isEditing() {
-      return this.shotToEdit && this.shotToEdit.id
-    },
-
-    resetForm() {
-      this.shotSuccessText = ''
-      if (!this.isEditing()) {
-        if (this.openProductions.length > 0) {
-          this.form.project_id = this.currentProduction
-            ? this.currentProduction.id
-            : ''
-        }
-        if (this.sequences.length > 0) {
-          this.form.sequence_id = this.sequences[0].id
-        }
-        this.form.name = ''
-        this.form.description = ''
-        this.form.nb_frames = 0
-        this.form.data = {}
-      } else {
-        this.form = {
-          sequence_id: this.shotToEdit.sequence_id,
-          project_id: this.shotToEdit.project_id,
-          name: this.shotToEdit.name,
-          description: this.shotToEdit.description,
-          nb_frames: this.shotToEdit.nb_frames,
-          frameIn: this.frameIn,
-          frameOut: this.frameOut,
-          fps: this.fps,
-          max_retakes: this.maxRetakes,
-          resolution: this.resolution,
-          data: { ...this.shotToEdit.data } || {}
-        }
-      }
+  } else {
+    if (openProductions.value.length > 0) {
+      form.value.project_id = currentProduction.value?.id || ''
     }
-  },
-
-  watch: {
-    active() {
-      this.shotSuccessText = ''
-      this.resetForm()
-      if (this.sequences.length === 0) {
-        this.loadSequences()
-      }
-      if (this.active) {
-        setTimeout(() => {
-          this.$refs.nameField.focus()
-        }, 100)
-      }
-    },
-
-    'form.frameIn'() {
-      const frameIn = this.sanitizeInteger(this.form.frameIn)
-      const frameOut = this.sanitizeInteger(this.form.frameOut)
-      if (frameIn && frameOut && frameOut > frameIn) {
-        this.form.nb_frames = frameOut - frameIn + 1
-      }
-    },
-
-    'form.frameOut'() {
-      const frameIn = this.sanitizeInteger(this.form.frameIn)
-      const frameOut = this.sanitizeInteger(this.form.frameOut)
-      if (frameIn && frameOut && frameOut > frameIn) {
-        this.form.nb_frames = frameOut - frameIn + 1
-      }
-    },
-
-    shotToEdit() {
-      this.resetForm()
-    },
-
-    shotCreated() {
-      if (this.isEditing()) {
-        this.shotSuccessText = this.$t('shots.edit_success', {
-          name: this.shotCreated
-        })
-      } else {
-        this.shotSuccessText = this.$t('shots.new_success', {
-          name: this.shotCreated
-        })
-      }
+    if (sequences.value.length > 0) {
+      form.value.sequence_id = sequences.value[0].id
     }
+    form.value.name = ''
+    form.value.description = ''
+    form.value.nb_frames = 0
+    form.value.data = {}
   }
 }
-</script>
 
-<style lang="scss" scoped>
-.modal-content .box p.text {
-  margin-bottom: 1em;
-}
-.is-danger {
-  color: #ff3860;
-  font-style: italic;
-}
-.title {
-  border-bottom: 2px solid #ddd;
-  padding-bottom: 0.5em;
-  margin-bottom: 1.2em;
-}
-.info-message {
-  margin-top: 1em;
+const updateNbFramesFromRange = () => {
+  const frameIn = sanitizeInteger(form.value.frameIn)
+  const frameOut = sanitizeInteger(form.value.frameOut)
+  if (frameIn && frameOut && frameOut > frameIn) {
+    form.value.nb_frames = frameOut - frameIn + 1
+  }
 }
 
-.modal-content {
-  max-height: 80%;
-}
-</style>
+watch(
+  () => props.active,
+  active => {
+    resetForm()
+    if (sequences.value.length === 0) {
+      store.dispatch('loadSequences')
+    }
+    if (active) {
+      setTimeout(() => {
+        nameField.value?.focus()
+      }, 100)
+    }
+  }
+)
+
+watch(() => form.value.frameIn, updateNbFramesFromRange)
+watch(() => form.value.frameOut, updateNbFramesFromRange)
+watch(() => props.shotToEdit, resetForm)
+
+onMounted(resetForm)
+</script>

From 5c0a24cc967e9933c084361d9d5d556169034e6a Mon Sep 17 00:00:00 2001
From: Frank Rousseau <frank@cg-wire.com>
Date: Sat, 2 May 2026 08:57:58 +0200
Subject: [PATCH 22/28] [modals] Convert build-people-filter / view-playlist /
 add-preview
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Convert three more modals from Options API: BuildPeopleFilterModal,
ViewPlaylistModal, AddPreviewModal.

BuildPeopleFilterModal switches to <base-modal>; the other two stay
on a custom shell with useModal:
- ViewPlaylistModal has no title <h1> (its content is the
  <playlist-player> directly inside the box), and the root <div>
  carries an id="temp-playlist-modal" plus the dark theme class.
- AddPreviewModal puts the <h2 class="subtitle"> ABOVE the
  <h1 class="title"> (same pattern as AddAttachmentModal — switching
  to BaseModal would force the subtitle into the slot, after the h1).

Notable cleanups:
- BuildPeopleFilterModal: drop a duplicate 'peopleSearchText' entry
  in mapGetters; drop the unused unionOptions array (its combobox
  was already commented out in the template); drop two helper methods
  (addDepartmentFilter, removeDepartmentFilter) that weren't called
  from the template or anywhere else.
- ViewPlaylistModal: maps stay as plain `let` variables — they're
  used as lookups in event handlers, not rendered, so reactivity is
  unnecessary; eslint-disable on the PlaylistPlayer import (the same
  vue-eslint-parser false positive we hit before).
- AddPreviewModal: refactor the dynamic `:ref="`video-${index}`"`
  pattern into a direct @loadedmetadata handler — script setup
  doesn't have a clean equivalent of iterating $refs, and the event
  handler is simpler anyway. Drop three unused template refs (modal,
  background, dropMask) and the empty onDrag method. Expose setFiles
  via defineExpose for parent-component callers.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/components/modals/AddPreviewModal.vue     | 275 ++++-----
 .../modals/BuildPeopleFilterModal.vue         | 354 +++++-------
 src/components/modals/ViewPlaylistModal.vue   | 521 ++++++++----------
 3 files changed, 445 insertions(+), 705 deletions(-)

diff --git a/src/components/modals/AddPreviewModal.vue b/src/components/modals/AddPreviewModal.vue
index 97353c231a..fb545d6dc9 100644
--- a/src/components/modals/AddPreviewModal.vue
+++ b/src/components/modals/AddPreviewModal.vue
@@ -5,13 +5,8 @@
       modal: true,
       'is-active': active
     }"
-    ref="modal"
   >
-    <div
-      ref="background"
-      class="modal-background"
-      @click="$emit('cancel')"
-    ></div>
+    <div class="modal-background" @click="$emit('cancel')"></div>
 
     <div
       class="modal-content"
@@ -20,7 +15,6 @@
     >
       <div id="modal-content" class="box content" :class="{ dragging: true }">
         <div
-          ref="dropMask"
           id="drop-mask"
           class="drop-mask"
           @drop="onDrop"
@@ -41,7 +35,7 @@
         </p>
 
         <file-upload
-          ref="preview-field"
+          ref="previewField"
           class="preview-files-field"
           :accept="extensions"
           :is-primary="false"
@@ -70,7 +64,6 @@
             </p>
             <img alt="uploaded file" :src="getURL(form)" v-if="isImage(form)" />
             <video
-              :ref="`video-${index}`"
               :src="getURL(form)"
               preload="auto"
               class="is-fullwidth"
@@ -78,6 +71,7 @@
               controls
               loop
               muted
+              @loadedmetadata="onVideoLoaded"
               v-else-if="isVideo(form)"
             />
             <iframe
@@ -128,194 +122,117 @@
   </div>
 </template>
 
-<script>
+<script setup>
 import { AlertTriangleIcon } from 'lucide-vue-next'
+import { onBeforeUnmount, onMounted, ref, toRef, watch } from 'vue'
 
+import { useModal } from '@/composables/modal'
 import files from '@/lib/files'
 
-import { modalMixin } from '@/components/modals/base_modal'
 import FileUpload from '@/components/widgets/FileUpload.vue'
 
-export default {
-  name: 'add-preview-modal',
+const props = defineProps({
+  active: { type: Boolean, default: false },
+  confirmLabel: { type: String, default: '' },
+  expectedFrames: { type: Number, default: 0 },
+  extensions: { type: String, default: files.ALL_EXTENSIONS_STRING },
+  fps: { type: Number, default: 0 },
+  isConcept: { type: Boolean, default: false },
+  isEditing: { type: Boolean, default: false },
+  isError: { type: Boolean, default: false },
+  isLoading: { type: Boolean, default: false },
+  isMultiple: { type: Boolean, default: true },
+  message: { type: String, default: 'tasks.revision_preview_file' },
+  title: { type: String, default: '' }
+})
+
+const emit = defineEmits(['cancel', 'confirm', 'fileselected'])
+
+useModal(toRef(props, 'active'), emit)
+
+const forms = ref([])
+const isDraggingFile = ref(false)
+const isWrongDuration = ref(false)
+const previewField = ref(null)
+
+const onFileSelected = newForms => {
+  forms.value = props.isMultiple ? forms.value.concat(newForms) : [newForms]
+  emit('fileselected', forms.value)
+}
 
-  mixins: [modalMixin],
+const reset = () => {
+  previewField.value?.reset()
+  forms.value = []
+  isWrongDuration.value = false
+}
 
-  components: {
-    AlertTriangleIcon,
-    FileUpload
-  },
+const onPaste = event => {
+  if (props.active && event.clipboardData.files) {
+    previewField.value?.filesChange('', event.clipboardData.files)
+  }
+}
 
-  props: {
-    active: {
-      type: Boolean,
-      default: false
-    },
-    confirmLabel: {
-      type: String,
-      default: ''
-    },
-    extensions: {
-      type: String,
-      default: files.ALL_EXTENSIONS_STRING
-    },
-    isConcept: {
-      type: Boolean,
-      default: false
-    },
-    isEditing: {
-      type: Boolean,
-      default: false
-    },
-    isError: {
-      type: Boolean,
-      default: false
-    },
-    isLoading: {
-      type: Boolean,
-      default: false
-    },
-    isMultiple: {
-      type: Boolean,
-      default: true
-    },
-    message: {
-      type: String,
-      default: 'tasks.revision_preview_file'
-    },
-    title: {
-      type: String,
-      default: ''
-    },
-    fps: {
-      type: Number,
-      default: 0
-    },
-    expectedFrames: {
-      type: Number,
-      default: 0
-    }
-  },
+const getURL = form => window.URL.createObjectURL(form.get('file'))
 
-  emits: ['cancel', 'confirm', 'fileselected'],
+const isImage = form => form.get('file').type.startsWith('image')
+const isVideo = form => form.get('file').type.startsWith('video')
+const isPdf = form => form.get('file').type.indexOf('pdf') > 0
 
-  data() {
-    return {
-      forms: [],
-      isWrongDuration: false,
-      isDraggingFile: false
-    }
-  },
+const removePreview = form => {
+  forms.value = forms.value.filter(f => f !== form)
+}
 
-  computed: {
-    previewField() {
-      return this.$refs['preview-field']
-    }
-  },
+const onVideoLoaded = event => {
+  if (props.expectedFrames === 0) return
+  const frames = Math.round(event.target.duration * props.fps)
+  if (frames !== props.expectedFrames) {
+    isWrongDuration.value = true
+  }
+}
 
-  methods: {
-    setFiles(files) {
-      this.previewField.filesChange('file', files)
-    },
-
-    onFileSelected(forms) {
-      this.forms = this.isMultiple ? this.forms.concat(forms) : [forms]
-      this.$emit('fileselected', this.forms)
-    },
-
-    reset() {
-      this.previewField?.reset()
-      this.forms = []
-      this.isWrongDuration = false
-    },
-
-    onPaste(event) {
-      if (this.active && event.clipboardData.files) {
-        this.previewField.filesChange('', event.clipboardData.files)
-      }
-    },
-
-    getURL(form) {
-      return window.URL.createObjectURL(form.get('file'))
-    },
-
-    isImage(form) {
-      return form.get('file').type.startsWith('image')
-    },
-
-    isVideo(form) {
-      return form.get('file').type.startsWith('video')
-    },
-
-    isPdf(form) {
-      return form.get('file').type.indexOf('pdf') > 0
-    },
-
-    removePreview(form) {
-      this.forms = this.forms.filter(f => f !== form)
-    },
-
-    onFileDragover(event) {
-      event.preventDefault()
-      event.stopPropagation()
-      this.isDraggingFile = true
-    },
-
-    onFileDragLeave(event) {
-      event.preventDefault()
-      event.stopPropagation()
-      if (event.target.id === 'drop-mask') {
-        this.isDraggingFile = false
-      }
-    },
-
-    onDrag(event) {},
-
-    onDrop(event) {
-      this.previewField.onDrop(event)
-      this.isDraggingFile = false
-      event.preventDefault()
-    }
-  },
+const onFileDragover = event => {
+  event.preventDefault()
+  event.stopPropagation()
+  isDraggingFile.value = true
+}
 
-  watch: {
-    active() {
-      this.reset()
-    },
-
-    forms: {
-      deep: true,
-      handler() {
-        this.$nextTick(() => {
-          this.isWrongDuration = false
-          if (this.expectedFrames !== 0) {
-            Object.keys(this.$refs).forEach(key => {
-              const ref = this.$refs[key]
-              if (key.startsWith('video-') && ref[0]) {
-                ref[0].onloadedmetadata = () => {
-                  if (!ref[0]) return
-                  const frames = Math.round(ref[0].duration * this.fps)
-                  if (frames !== this.expectedFrames) {
-                    this.isWrongDuration = true
-                  }
-                }
-              }
-            })
-          }
-        })
-      }
-    }
-  },
+const onFileDragLeave = event => {
+  event.preventDefault()
+  event.stopPropagation()
+  if (event.target.id === 'drop-mask') {
+    isDraggingFile.value = false
+  }
+}
 
-  mounted() {
-    this.forms = []
-    window.addEventListener('paste', this.onPaste, false)
+const onDrop = event => {
+  previewField.value?.onDrop(event)
+  isDraggingFile.value = false
+  event.preventDefault()
+}
+
+watch(() => props.active, reset)
+
+watch(
+  forms,
+  () => {
+    isWrongDuration.value = false
   },
+  { deep: true }
+)
+
+onMounted(() => {
+  window.addEventListener('paste', onPaste, false)
+})
 
-  beforeUnmount() {
-    window.removeEventListener('paste', this.onPaste)
+onBeforeUnmount(() => {
+  window.removeEventListener('paste', onPaste)
+})
+
+defineExpose({
+  setFiles: fileList => {
+    previewField.value?.filesChange('file', fileList)
   }
-}
+})
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/modals/BuildPeopleFilterModal.vue b/src/components/modals/BuildPeopleFilterModal.vue
index bfb165f99f..60fd35874a 100644
--- a/src/components/modals/BuildPeopleFilterModal.vue
+++ b/src/components/modals/BuildPeopleFilterModal.vue
@@ -1,267 +1,175 @@
 <template>
-  <div
-    :class="{
-      modal: true,
-      'is-active': active
-    }"
+  <base-modal
+    :active="active"
+    :title="$t('entities.build_filter.title')"
+    @cancel="$emit('cancel')"
   >
-    <div @click="$emit('cancel')" class="modal-background"></div>
-
-    <div class="modal-content">
-      <div class="box content">
-        <h1 class="title">
-          {{ $t('entities.build_filter.title') }}
-        </h1>
-
-        <!--combobox
+    <h3 class="subtitle">
+      {{ $t('entities.build_filter.department') }}
+    </h3>
+
+    <div
+      class="flexrow department-filter"
+      :key="'task-type-' + i"
+      v-for="(departmentFilter, i) in departmentFilters.values"
+    >
+      <combobox
         class="flexrow-item"
-        :options="general.unionOptions"
+        :options="operatorOptions"
+        @update:model-value="onDepartmentOperatorChanged(departmentFilter)"
         locale-key-prefix="entities.build_filter."
-        v-model="union"
-      /-->
-
-        <h3 class="subtitle">
-          {{ $t('entities.build_filter.department') }}
-        </h3>
-
+        v-model="departmentFilter.operator"
+      />
+      <div class="flexrow-item flexrow value-column">
         <div
-          class="flexrow department-filter"
-          :key="'task-type-' + i"
-          v-for="(departmentFilter, i) in departmentFilters.values"
+          :key="`department-${index}`"
+          v-for="(_, index) in departmentFilter.values"
         >
           <combobox
             class="flexrow-item"
-            :options="general.operatorOptions"
-            @update:model-value="onDepartmentOperatorChanged(departmentFilter)"
-            locale-key-prefix="entities.build_filter."
-            v-model="departmentFilter.operator"
+            :options="departmentsOptions"
+            v-model="departmentFilter.values[index]"
           />
-          <div class="flexrow-item flexrow value-column">
-            <div
-              :key="`department-${index}`"
-              v-for="(_, index) in departmentFilter.values"
-            >
-              <combobox
-                class="flexrow-item"
-                :options="departmentsOptions"
-                v-model="departmentFilter.values[index]"
-              />
-            </div>
-            <button-simple
-              class="mt05"
-              icon="plus"
-              @click="addInDepartmentFilter(departmentFilter)"
-              v-if="departmentFilter.operator === 'in'"
-            />
-          </div>
         </div>
-
-        <modal-footer
-          :error-text="$t('entities.thumbnails.error')"
-          @confirm="applyFilter"
-          @cancel="$emit('cancel')"
+        <button-simple
+          class="mt05"
+          icon="plus"
+          @click="addInDepartmentFilter(departmentFilter)"
+          v-if="departmentFilter.operator === 'in'"
         />
       </div>
     </div>
-  </div>
+
+    <modal-footer
+      :error-text="$t('entities.thumbnails.error')"
+      @confirm="applyFilter"
+      @cancel="$emit('cancel')"
+    />
+  </base-modal>
 </template>
 
-<script>
-import { mapGetters } from 'vuex'
+<script setup>
+import { computed, onMounted, reactive, watch } from 'vue'
+import { useStore } from 'vuex'
 
-import { modalMixin } from '@/components/modals/base_modal'
 import { getFilters } from '@/lib/filtering'
 
+import BaseModal from '@/components/modals/BaseModal.vue'
+import ModalFooter from '@/components/modals/ModalFooter.vue'
 import ButtonSimple from '@/components/widgets/ButtonSimple.vue'
 import Combobox from '@/components/widgets/Combobox.vue'
-import ModalFooter from '@/components/modals/ModalFooter.vue'
 
-export default {
-  name: 'build-people-filter-modal',
+const store = useStore()
 
-  mixins: [modalMixin],
+const props = defineProps({
+  active: { type: Boolean, default: false }
+})
 
-  components: {
-    ButtonSimple,
-    Combobox,
-    ModalFooter
-  },
+const emit = defineEmits(['cancel', 'confirm'])
 
-  props: {
-    active: {
-      type: Boolean,
-      default: false
-    }
-  },
-
-  emits: ['cancel', 'confirm'],
-
-  data() {
-    return {
-      general: {
-        operatorOptions: [
-          { label: 'equal', value: '=' },
-          { label: 'not_equal', value: '=-' },
-          { label: 'in', value: 'in' }
-        ],
-        unionOptions: [
-          { label: 'union_and', value: 'and' },
-          { label: 'union_or', value: 'or' }
-        ]
-      },
-      departmentFilters: {
-        values: []
-      },
-      union: 'and'
-    }
-  },
-
-  mounted() {
-    this.reset()
-    this.setFiltersFromCurrentQuery()
-  },
-
-  computed: {
-    ...mapGetters([
-      'peopleSearchText',
-      'peopleSearchText',
-      'departmentMap',
-      'departments'
-    ]),
-
-    departmentsOptions() {
-      return this.departments.map(department => {
-        return {
-          label: department.name,
-          value: department.id
-        }
-      })
-    }
-  },
+const operatorOptions = [
+  { label: 'equal', value: '=' },
+  { label: 'not_equal', value: '=-' },
+  { label: 'in', value: 'in' }
+]
 
-  methods: {
-    // Build filter
+const departmentFilters = reactive({ values: [] })
+let union = 'and'
 
-    applyFilter() {
-      const query = this.buildFilter()
-      this.$emit('confirm', query)
-    },
+const departmentMap = computed(() => store.getters.departmentMap)
+const departments = computed(() => store.getters.departments)
+const peopleSearchText = computed(() => store.getters.peopleSearchText)
 
-    buildFilter() {
-      let query = ''
-      query = this.applyDepartmentChoice(query)
-      query = this.applyUnionChoice(query)
-      return query.trim()
-    },
+const departmentsOptions = computed(() =>
+  departments.value.map(department => ({
+    label: department.name,
+    value: department.id
+  }))
+)
 
-    addDepartmentFilter() {
-      const filter = {
-        operator: '=',
-        values: [this.departments[0].id]
-      }
-      this.departmentFilters.values.push(filter)
-      return filter
-    },
+const onDepartmentOperatorChanged = departmentFilter => {
+  if (departmentFilter.operator !== 'in') {
+    departmentFilter.values = [departmentFilter.values[0]]
+  }
+}
 
-    addInDepartmentFilter(departmentFilter) {
-      departmentFilter.values.push(this.departments[0].name)
-    },
+const addInDepartmentFilter = departmentFilter => {
+  departmentFilter.values.push(departments.value[0].name)
+}
 
-    removeDepartmentFilter(departmentFilter) {
-      this.departmentFilters.values = this.departmentFilters.values.filter(
-        f => f !== departmentFilter
+const applyDepartmentChoice = query => {
+  departmentFilters.values.forEach(departmentFilter => {
+    const operator = departmentFilter.operator === '=-' ? '=[-' : '=['
+    const value = departmentFilter.values
+      .map(
+        dId => departmentMap.value.get(dId)?.name || departments.value[0].name
       )
-    },
-
-    applyDepartmentChoice(query) {
-      this.departmentFilters.values.forEach(departmentFilter => {
-        let operator = '=['
-        if (departmentFilter.operator === '=-') operator = '=[-'
-        const value = departmentFilter.values
-          .map(dId => {
-            return this.departmentMap.get(dId)
-              ? this.departmentMap.get(dId).name
-              : this.departments[0].name
-          })
-          .join(',')
-        query += ` department${operator}${value}]`
-      })
-      return query
-    },
-
-    applyUnionChoice(query) {
-      if (this.union === 'or') {
-        query = ` +(${query.trim()})`
-      }
-      return query
-    },
-
-    // Helpers to set filters from search query
-
-    setFiltersFromCurrentQuery() {
-      if (!this.peopleSearchText) {
-        return
-      }
-      this.departmentFilters.values = []
+      .join(',')
+    query += ` department${operator}${value}]`
+  })
+  return query
+}
 
-      const filters = getFilters({
-        entryIndex: [],
-        departments: this.departments,
-        persons: [],
-        query: this.peopleSearchText
-      })
-      filters.forEach(filter => {
-        this.setFiltersFromDepartmentQuery(filter)
-      })
-      if (filters.union) {
-        this.setUnion()
-      }
-    },
+const applyUnionChoice = query =>
+  union === 'or' ? ` +(${query.trim()})` : query
 
-    setFiltersFromDepartmentQuery(filter) {
-      let operator = '='
-      if (filter.values.length > 1) {
-        operator = 'in'
-      } else if (filter.excluding) {
-        operator = '=-'
-      }
-      this.departmentFilters.values.push({
-        operator,
-        values: filter.values.map(d => d.id)
-      })
-    },
+const buildFilter = () => {
+  let query = ''
+  query = applyDepartmentChoice(query)
+  query = applyUnionChoice(query)
+  return query.trim()
+}
 
-    setUnion() {
-      this.union = 'or'
-    },
+const applyFilter = () => {
+  emit('confirm', buildFilter())
+}
 
-    // General
+const setFiltersFromDepartmentQuery = filter => {
+  let operator = '='
+  if (filter.values.length > 1) operator = 'in'
+  else if (filter.excluding) operator = '=-'
+  departmentFilters.values.push({
+    operator,
+    values: filter.values.map(d => d.id)
+  })
+}
 
-    onDepartmentOperatorChanged(departmentFilter) {
-      if (departmentFilter.operator !== 'in') {
-        departmentFilter.values = [departmentFilter.values[0]]
-      }
-    },
+const setFiltersFromCurrentQuery = () => {
+  if (!peopleSearchText.value) return
+  departmentFilters.values = []
+  const filters = getFilters({
+    entryIndex: [],
+    departments: departments.value,
+    persons: [],
+    query: peopleSearchText.value
+  })
+  filters.forEach(setFiltersFromDepartmentQuery)
+  if (filters.union) union = 'or'
+}
 
-    reset() {
-      this.departmentFilters.values = [
-        {
-          operator: '=',
-          values: this.departments.length > 0 ? [this.departments[0].id] : []
-        }
-      ]
+const reset = () => {
+  departmentFilters.values = [
+    {
+      operator: '=',
+      values: departments.value.length > 0 ? [departments.value[0].id] : []
     }
-  },
+  ]
+}
 
-  watch: {
-    active() {
-      if (this.active) {
-        this.reset()
-        this.setFiltersFromCurrentQuery()
-      }
+watch(
+  () => props.active,
+  active => {
+    if (active) {
+      reset()
+      setFiltersFromCurrentQuery()
     }
   }
-}
+)
+
+onMounted(() => {
+  reset()
+  setFiltersFromCurrentQuery()
+})
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/modals/ViewPlaylistModal.vue b/src/components/modals/ViewPlaylistModal.vue
index 5d50515ad1..244c0efe43 100644
--- a/src/components/modals/ViewPlaylistModal.vue
+++ b/src/components/modals/ViewPlaylistModal.vue
@@ -11,7 +11,7 @@
     <div class="modal-content wide xyz-in" xyz="fade">
       <div class="box">
         <playlist-player
-          ref="playlist-player"
+          ref="playlistPlayer"
           :playlist="currentPlaylist"
           :entities="currentEntities"
           :is-loading="isLoading"
@@ -38,336 +38,251 @@
   </div>
 </template>
 
-<script>
+<script setup>
 /*
  * This component is aimed at displaying a temporary playlist from any view. It
  * is used in entity list to display playlists from the selection.
  */
 
-import { mapActions, mapGetters } from 'vuex'
-import { DEFAULT_NB_FRAMES_PICTURE } from '@/lib/playlist'
+import { computed, ref, toRef, watch } from 'vue'
+import { useRoute } from 'vue-router'
+import { useStore } from 'vuex'
 
-import { modalMixin } from '@/components/modals/base_modal'
+import { useModal } from '@/composables/modal'
+import { DEFAULT_NB_FRAMES_PICTURE } from '@/lib/playlist'
 
 import EditPlaylistModal from '@/components/modals/EditPlaylistModal.vue'
+// eslint-disable-next-line no-unused-vars
 import PlaylistPlayer from '@/components/pages/playlists/PlaylistPlayer.vue'
 
 import assetStore from '@/store/modules/assets'
 import shotStore from '@/store/modules/shots'
 import sequenceStore from '@/store/modules/sequences'
 
-export default {
-  name: 'view-playlist-modal',
-
-  mixins: [modalMixin],
-
-  components: {
-    EditPlaylistModal,
-    PlaylistPlayer
-  },
-
-  props: {
-    active: {
-      type: Boolean,
-      default: false
-    },
-    taskIds: {
-      type: Array
-    },
-    sort: {
-      type: Boolean,
-      default: false
-    }
-  },
-
-  emits: ['cancel'],
-
-  data() {
-    return {
-      previewFileMap: new Map(),
-      previewFileEntityMap: new Map(),
-      currentEntities: [],
-      currentPlaylist: {
-        id: 'temp',
-        name: 'Temporary playlist',
-        shots: [],
-        for_entity: 'shot'
-      },
-      errors: {
-        edit: false
-      },
-      loading: {
-        edit: false
-      },
-      modals: {
-        edit: false
-      },
-      playlistToEdit: {},
-      isLoading: false
-    }
-  },
-
-  computed: {
-    ...mapGetters([
-      'currentEpisode',
-      'currentProduction',
-      'isTVShow',
-      'selectedTasks',
-      'taskMap'
-    ]),
-
-    currentTaskIds() {
-      return this.taskIds || Array.from(this.selectedTasks.keys())
-    },
-
-    isPlaylistPage() {
-      return this.$route.path.indexOf('playlist') > 0
-    },
-
-    playlistPlayer() {
-      return this.$refs['playlist-player']
-    },
-
-    isAssetPlaylist() {
-      return this.currentEntityType === 'asset'
-    },
-
-    isSequencePlaylist() {
-      return this.currentEntityType === 'sequence'
-    },
-
-    isShotPlaylist() {
-      return this.currentEntityType === 'shot'
-    },
-
-    currentEntityType() {
-      let type = 'shot'
-      if (this.$route.path.indexOf('asset') > 0) type = 'asset'
-      if (this.$route.path.indexOf('sequence') > 0) type = 'sequence'
-      return type
-    },
-
-    assetMap() {
-      return assetStore.cache.assetMap
-    },
-
-    shotMap() {
-      return shotStore.cache.shotMap
-    },
+const route = useRoute()
+const store = useStore()
+
+const props = defineProps({
+  active: { type: Boolean, default: false },
+  sort: { type: Boolean, default: false },
+  taskIds: { type: Array, default: null }
+})
+
+const emit = defineEmits(['cancel'])
+
+useModal(toRef(props, 'active'), emit)
+
+const currentEntities = ref([])
+const currentPlaylist = ref({
+  id: 'temp',
+  name: 'Temporary playlist',
+  shots: [],
+  for_entity: 'shot'
+})
+const errors = ref({ edit: false })
+const isLoading = ref(false)
+const loading = ref({ edit: false })
+const modals = ref({ edit: false })
+const playlistPlayer = ref(null)
+const playlistToEdit = ref({})
+let previewFileMap = new Map()
+let previewFileEntityMap = new Map()
+
+const currentEpisode = computed(() => store.getters.currentEpisode)
+const currentProduction = computed(() => store.getters.currentProduction)
+const isTVShow = computed(() => store.getters.isTVShow)
+const selectedTasks = computed(() => store.getters.selectedTasks)
+
+const currentTaskIds = computed(
+  () => props.taskIds || Array.from(selectedTasks.value.keys())
+)
+
+const isPlaylistPage = computed(() => route.path.indexOf('playlist') > 0)
+
+const currentEntityType = computed(() => {
+  if (route.path.indexOf('asset') > 0) return 'asset'
+  if (route.path.indexOf('sequence') > 0) return 'sequence'
+  return 'shot'
+})
+
+const isAssetPlaylist = computed(() => currentEntityType.value === 'asset')
+const isSequencePlaylist = computed(
+  () => currentEntityType.value === 'sequence'
+)
+
+const onPreviewChanged = async ({
+  entity,
+  previewFileId,
+  previousPreviewFileId
+}) => {
+  await store.dispatch('changePlaylistPreview', {
+    playlist: currentPlaylist.value,
+    entity,
+    previewFileId,
+    previousPreviewFileId,
+    remote: false
+  })
+}
 
-    sequenceMap() {
-      return sequenceStore.cache.sequenceMap
-    },
+const onAnnotationChanged = ({ preview, additions, deletions, updates }) => {
+  store.dispatch('updatePreviewAnnotation', {
+    taskId: preview.task_id,
+    preview,
+    additions,
+    deletions,
+    updates
+  })
+}
 
-    frameDuration() {
-      return Math.round((1 / this.fps) * 10000) / 10000
-    },
+const onAnnotationsRefreshed = preview => {
+  const entity = previewFileEntityMap.get(preview.id)
+  const localPreview = previewFileMap.get(preview.id)
+  if (entity) entity.preview_file_annotations = preview.annotations
+  if (localPreview) localPreview.annotations = preview.annotations
+}
 
-    fps() {
-      return parseFloat(this.currentProduction?.fps) || 25
+const lookupEntity = entityInfo => {
+  if (isAssetPlaylist.value) return assetStore.cache.assetMap.get(entityInfo.id)
+  if (isSequencePlaylist.value) {
+    const entity = sequenceStore.cache.sequenceMap.get(entityInfo.id)
+    if (entity && currentEpisode.value) {
+      entity.episode_name = currentEpisode.value.name
     }
-  },
-
-  methods: {
-    ...mapActions([
-      'changePlaylistPreview',
-      'editPlaylist',
-      'loadPlaylists',
-      'loadTempPlaylist',
-      'newPlaylist',
-      'updatePreviewAnnotation'
-    ]),
-
-    /* When a preview is modified, the change is persisted */
-    async onPreviewChanged({ entity, previewFileId, previousPreviewFileId }) {
-      await this.changePlaylistPreview({
-        playlist: this.currentPlaylist,
-        entity,
-        previewFileId,
-        previousPreviewFileId,
-        remote: false
-      })
-    },
-
-    onAnnotationChanged({ preview, additions, deletions, updates }) {
-      const taskId = preview.task_id
-      this.updatePreviewAnnotation({
-        taskId,
-        preview,
-        additions,
-        deletions,
-        updates
-      })
-    },
+    return entity
+  }
+  return shotStore.cache.shotMap.get(entityInfo.id)
+}
 
-    onAnnotationsRefreshed(preview) {
-      const entity = this.previewFileEntityMap.get(preview.id)
-      const localPreview = this.previewFileMap.get(preview.id)
-      if (entity) {
-        entity.preview_file_annotations = preview.annotations
-      }
-      if (localPreview) {
-        localPreview.annotations = preview.annotations
-      }
-    },
+const convertEntityToPlaylistFormat = entityInfo => {
+  const entity = lookupEntity(entityInfo)
+  if (!entity) return entityInfo
+  const playlistEntity = {
+    id: entityInfo.id,
+    name: entity.name,
+    nb_frames:
+      entityInfo.nb_frames || entity.nb_frames || DEFAULT_NB_FRAMES_PICTURE,
+    parent_name:
+      entity.sequence_name || entity.episode_name || entity.asset_type_name,
+    preview_files: entityInfo.preview_files,
+    preview_file_id: entityInfo.preview_file_id || entity.preview_file_id,
+    preview_file_extension:
+      entityInfo.preview_file_extension || entity.preview_file_extension,
+    preview_file_revision:
+      entityInfo.preview_file_revision || entity.preview_file_revision,
+    preview_file_width:
+      entityInfo.preview_file_width || entity.preview_file_width,
+    preview_file_height:
+      entityInfo.preview_file_height || entity.preview_file_height,
+    preview_file_duration:
+      entityInfo.preview_file_duration || entity.preview_file_duration,
+    preview_file_task_id:
+      entityInfo.task_id ||
+      entityInfo.preview_file_task_id ||
+      entity.preview_file_task_id,
+    preview_file_annotations:
+      entityInfo.preview_file_annotations || entity.preview_file_annotations,
+    preview_file_previews:
+      entityInfo.preview_file_previews || entity.preview_file_previews,
+    preview_nb_frames:
+      entityInfo.nb_frames || entity.nb_frames || DEFAULT_NB_FRAMES_PICTURE
+  }
+  Object.assign(entityInfo, playlistEntity)
+  previewFileEntityMap.set(playlistEntity.preview_file_id, playlistEntity)
+  const previews = playlistEntity.preview_file_previews || []
+  previews.forEach(preview => {
+    preview.duration = entity.preview_file_duration
+    previewFileMap.set(preview.id, preview)
+  })
+  return playlistEntity
+}
 
-    setupEntities(entities) {
-      const entityMap = {}
-      entities.forEach(entity => {
-        this.previewFileEntityMap.set(entity.preview_file_id, entity)
-        const previewFileGroups = Object.values(entity.preview_files)
-        this.convertEntityToPlaylistFormat(entity)
-        previewFileGroups.forEach(previewFiles => {
-          previewFiles.forEach(previewFile => {
-            this.previewFileMap.set(previewFile.id, previewFile)
-          })
-        })
-        entityMap[entity.id + '-' + entity.preview_file_id] = entity
+const setupEntities = entities => {
+  const entityMap = {}
+  entities.forEach(entity => {
+    previewFileEntityMap.set(entity.preview_file_id, entity)
+    const previewFileGroups = Object.values(entity.preview_files)
+    convertEntityToPlaylistFormat(entity)
+    previewFileGroups.forEach(previewFiles => {
+      previewFiles.forEach(previewFile => {
+        previewFileMap.set(previewFile.id, previewFile)
       })
-      this.$store.commit('SET_PLAYLIST_ENTRY_MAP', entityMap)
-      this.currentPlaylist.shots = Object.values(entityMap)
-      this.currentEntities = Object.values(entityMap)
-    },
+    })
+    entityMap[entity.id + '-' + entity.preview_file_id] = entity
+  })
+  store.commit('SET_PLAYLIST_ENTRY_MAP', entityMap)
+  currentPlaylist.value.shots = Object.values(entityMap)
+  currentEntities.value = Object.values(entityMap)
+}
 
-    convertEntityToPlaylistFormat(entityInfo) {
-      let entity
-      if (this.isAssetPlaylist) {
-        entity = this.assetMap.get(entityInfo.id)
-      } else if (this.isSequencePlaylist) {
-        entity = this.sequenceMap.get(entityInfo.id)
-        if (this.currentEpisode) {
-          entity.episode_name = this.currentEpisode.name
-        }
-      } else {
-        entity = this.shotMap.get(entityInfo.id)
-      }
-      if (entity) {
-        const playlistEntity = {
-          id: entityInfo.id,
-          name: entity.name,
-          nb_frames:
-            entityInfo.nb_frames ||
-            entity.nb_frames ||
-            DEFAULT_NB_FRAMES_PICTURE,
-          parent_name:
-            entity.sequence_name ||
-            entity.episode_name ||
-            entity.asset_type_name,
-          preview_files: entityInfo.preview_files,
-          preview_file_id: entityInfo.preview_file_id || entity.preview_file_id,
-          preview_file_extension:
-            entityInfo.preview_file_extension || entity.preview_file_extension,
-          preview_file_revision:
-            entityInfo.preview_file_revision || entity.preview_file_revision,
-          preview_file_width:
-            entityInfo.preview_file_width || entity.preview_file_width,
-          preview_file_height:
-            entityInfo.preview_file_height || entity.preview_file_height,
-          preview_file_duration:
-            entityInfo.preview_file_duration || entity.preview_file_duration,
-          preview_file_task_id:
-            entityInfo.task_id ||
-            entityInfo.preview_file_task_id ||
-            entity.preview_file_task_id,
-          preview_file_annotations:
-            entityInfo.preview_file_annotations ||
-            entity.preview_file_annotations,
-          preview_file_previews:
-            entityInfo.preview_file_previews || entity.preview_file_previews,
-          preview_nb_frames:
-            entityInfo.nb_frames ||
-            entity.nb_frames ||
-            DEFAULT_NB_FRAMES_PICTURE
-        }
-        Object.assign(entityInfo, playlistEntity)
-        this.previewFileEntityMap.set(
-          playlistEntity.preview_file_id,
-          playlistEntity
-        )
-        const previews = playlistEntity.preview_file_previews || []
-        previews.forEach(preview => {
-          preview.duration = entity.preview_file_duration
-          this.previewFileMap.set(preview.id, preview)
-        })
-        return playlistEntity
-      } else {
-        return entityInfo
-      }
-    },
+const onSaveClicked = () => {
+  playlistToEdit.value = { for_entity: currentEntityType.value }
+  modals.value.edit = true
+}
 
-    onSaveClicked() {
-      this.errors.editPlaylist = false
-      this.playlistToEdit = {
-        for_entity: this.currentEntityType
-      }
-      this.modals.edit = true
-    },
+const savePlaylist = async form => {
+  const newPlaylist = {
+    name: form.name,
+    production_id: currentProduction.value.id,
+    for_client: form.for_client,
+    for_entity: form.for_entity,
+    is_for_all: form.is_for_all,
+    task_type_id: form.task_type_id
+  }
+  if (isTVShow.value && currentEpisode.value) {
+    newPlaylist.episode_id = currentEpisode.value.id
+  }
+  errors.value.edit = false
+  loading.value.edit = true
+  try {
+    const playlist = await store.dispatch('newPlaylist', newPlaylist)
+    Object.assign(currentPlaylist.value, {
+      id: playlist.id,
+      name: playlist.name,
+      for_client: playlist.for_client,
+      for_entity: playlist.for_entity,
+      is_for_all: playlist.is_for_all
+    })
+    const playlistToSave = { ...currentPlaylist.value }
+    playlistToSave.shots = currentPlaylist.value.shots.map(shot => ({
+      entity_id: shot.id,
+      preview_file_id: shot.preview_file_id
+    }))
+    await store.dispatch('editPlaylist', { data: playlistToSave })
+    modals.value.edit = false
+    store.dispatch('loadPlaylists', {})
+  } catch (err) {
+    console.error(err)
+    errors.value.edit = true
+    loading.value.edit = false
+  }
+}
 
-    async savePlaylist(form) {
-      const newPlaylist = {
-        name: form.name,
-        production_id: this.currentProduction.id,
-        for_client: form.for_client,
-        for_entity: form.for_entity,
-        is_for_all: form.is_for_all,
-        task_type_id: form.task_type_id
-      }
-      if (this.isTVShow && this.currentEpisode) {
-        newPlaylist.episode_id = this.currentEpisode.id
-      }
-      this.errors.edit = false
-      this.loading.edit = true
-      try {
-        const playlist = await this.newPlaylist(newPlaylist)
-        Object.assign(this.currentPlaylist, {
-          id: playlist.id,
-          name: playlist.name,
-          for_client: playlist.for_client,
-          for_entity: playlist.for_entity,
-          is_for_all: playlist.is_for_all
-        })
-        const playlistToSave = { ...this.currentPlaylist }
-        playlistToSave.shots = this.currentPlaylist.shots.map(shot => {
-          return {
-            entity_id: shot.id,
-            preview_file_id: shot.preview_file_id
-          }
+watch(
+  () => props.active,
+  active => {
+    if (active) {
+      currentEntities.value = []
+      previewFileMap = new Map()
+      previewFileEntityMap = new Map()
+      isLoading.value = true
+      store
+        .dispatch('loadTempPlaylist', {
+          taskIds: currentTaskIds.value,
+          sort: props.sort
         })
-        await this.editPlaylist({
-          data: playlistToSave
+        .then(entities => {
+          currentPlaylist.value.for_entity = currentEntityType.value
+          setupEntities(entities)
+          isLoading.value = false
         })
-        this.modals.edit = false
-        this.loadPlaylists({})
-      } catch (err) {
-        console.error(err)
-        this.errors.edit = true
-        this.loading.edit = false
-      }
-    }
-  },
-
-  watch: {
-    active() {
-      if (this.active) {
-        this.currentEntities = []
-        this.previewFileMap = new Map()
-        this.previewFileEntityMap = new Map()
-        this.isLoading = true
-        this.loadTempPlaylist({ taskIds: this.currentTaskIds, sort: this.sort })
-          .then(entities => {
-            this.currentPlaylist.for_entity = this.currentEntityType
-            this.setupEntities(entities)
-            this.isLoading = false
-          })
-          .catch(console.error)
-      } else {
-        this.playlistPlayer.pause()
-        this.playlistPlayer.clearCanvas()
-        this.currentEntities = []
-      }
+        .catch(console.error)
+    } else {
+      playlistPlayer.value?.pause()
+      playlistPlayer.value?.clearCanvas()
+      currentEntities.value = []
     }
   }
-}
+)
 </script>
 
 <style lang="scss" scoped>

From 9d16c2d8d9188d703f06983c9fc6658974d1bb26 Mon Sep 17 00:00:00 2001
From: Frank Rousseau <frank@cg-wire.com>
Date: Sat, 2 May 2026 09:04:50 +0200
Subject: [PATCH 23/28] [modals] Convert manage-shots / import-render modals
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Convert ManageShotsModal and ImportRenderModal from Options API.

- ManageShotsModal: useModal directly. Uses <page-title> instead of
  <h1 class="title">, same pattern as CreateTasksModal — BaseModal
  would render its own h1 alongside. Drop the unused
  ref="shot-padding". The reactive blocks for `names` and `loading`
  use `reactive()`; the rest is plain refs. The three input refs
  (addEpisodeInput / addSequenceInput / addShotInput) are accessed
  in the active watcher and methods, so they stay. focusAddSequence
  and focusAddShot exposed via defineExpose for parents.
- ImportRenderModal: switch to <base-modal> with a static title.
  Inline the small onReupload / onConfirmClicked handlers directly
  in the template (one-liner emits). The columnSelect computed
  intentionally returns parsedCsv[0] so v-model writes back into
  the parsed CSV — added a code comment to make the deliberate
  mutation pattern explicit. Drop the mounted hook that just reset
  formData to null (it starts as null via ref(null) already).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/components/modals/ImportRenderModal.vue | 615 +++++++++-----------
 src/components/modals/ManageShotsModal.vue  | 380 ++++++------
 2 files changed, 425 insertions(+), 570 deletions(-)

diff --git a/src/components/modals/ImportRenderModal.vue b/src/components/modals/ImportRenderModal.vue
index 781cf16c44..a8270fa4a0 100644
--- a/src/components/modals/ImportRenderModal.vue
+++ b/src/components/modals/ImportRenderModal.vue
@@ -1,372 +1,277 @@
 <template>
-  <div
-    :class="{
-      modal: true,
-      'is-active': active
-    }"
+  <base-modal
+    :active="active"
+    :title="$t('main.csv.preview_title')"
+    @cancel="$emit('cancel')"
   >
-    <div class="modal-background" @click="$emit('cancel')"></div>
-
-    <div class="modal-content">
-      <div class="box content">
-        <h1 class="title">
-          {{ $t('main.csv.preview_title') }}
-        </h1>
-
-        <p>
-          {{ $t('main.csv.preview_required') }}
-        </p>
-        <div class="description">
-          <div v-show="!disableUpdate">
-            <h2 class="legend-title">
-              {{ $t('main.csv.options.title') }}
-            </h2>
-            <checkbox
-              :toggle="true"
-              :label="$t('main.csv.options.update')"
-              v-model="updateData"
-            />
-          </div>
-          <h3 class="legend-title">
-            {{ $t('main.csv.legend') }}
-          </h3>
-          <div class="flexrow legends">
-            <ul class="legend flexrow-item">
-              <li class="legend-definition">
-                <span class="legend-term"></span>
-                {{ $t('main.csv.legend_ok') }}
-              </li>
-              <li class="legend-definition">
-                <span class="legend-term ignored"></span>
-                {{ $t('main.csv.legend_ignored') }}
-              </li>
-              <li class="legend-definition">
-                <span class="legend-term missing"></span>
-                {{ $t('main.csv.legend_missing') }}
-              </li>
-              <li class="legend-definition">
-                <span class="legend-term missing-optional"></span>
-                {{ $t('main.csv.legend_missing_optional') }}
-              </li>
-            </ul>
-            <ul class="legend flexrow-item">
-              <li class="legend-definition">
-                <span class="legend-term"></span>
-                {{ $t('main.csv.legend_line_ok') }}
-              </li>
-              <li class="legend-definition">
-                <span class="legend-term disabled"></span>
-                {{ $t('main.csv.legend_disabled') }}
-              </li>
-              <li v-show="!disableUpdate" class="legend-definition">
-                <span class="legend-term overwrite"></span>
-                {{ $t('main.csv.legend_overwrite') }}
-              </li>
-            </ul>
-          </div>
-        </div>
-
-        <div class="render-container">
-          <table class="render">
-            <colgroup>
-              <col
-                :key="`col-missing-${item}`"
-                class="missing"
-                v-for="item in columnsRequired"
-              />
-              <col
-                :key="`col-${index}`"
-                :class="stateColumn(cell)"
-                v-for="(cell, index) in parsedCsv[0]"
-              />
-              <col
-                :key="`col-missing-${item}`"
-                class="missing-optional"
-                v-for="item in columnsOptional"
-              />
-            </colgroup>
-            <thead>
-              <tr class="render-headers">
-                <th
-                  class="required-header"
-                  :key="`header-${cell}`"
-                  v-for="cell in columnsRequired"
-                >
-                  {{ cell }}
-                </th>
-                <th
-                  :key="`header-${index}`"
-                  v-for="(cell, index) in parsedCsv[0]"
-                >
-                  <div class="render-select">
-                    <combobox
-                      :options="columnOptions"
-                      :value="cell"
-                      :error="isDuplicated(index)"
-                      v-model="columnSelect[index]"
-                      @update:model-value="checkForDuplicate"
-                    />
-                  </div>
-                  {{ cell || '-' }}
-                </th>
-                <th
-                  class="optional-header"
-                  :key="`header-${cell}`"
-                  v-for="cell in columnsOptional"
-                >
-                  {{ cell }}
-                </th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr
-                :class="{
-                  overwrite: updateData && existingData(index),
-                  disabled: !updateData && existingData(index)
-                }"
-                :key="`line-${index}`"
-                v-for="(line, index) in parsedCsv
-                  .slice(1)
-                  .filter(line => line.length > 1)"
-              >
-                <td v-for="cell in columnsRequired" :key="`cell-${cell}`">
-                  {{ '-' }}
-                </td>
-                <td v-for="(cell, index) in line" :key="`cell-${index}`">
-                  {{ cell || '-' }}
-                </td>
-                <td v-for="cell in columnsOptional" :key="`cell-${cell}`">
-                  {{ '-' }}
-                </td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-
-        <div class="render-footer">
-          <button-simple
-            :text="$t('main.csv.preview_reupload')"
-            @click="onReupload"
+    <p>
+      {{ $t('main.csv.preview_required') }}
+    </p>
+    <div class="description">
+      <div v-show="!disableUpdate">
+        <h2 class="legend-title">
+          {{ $t('main.csv.options.title') }}
+        </h2>
+        <checkbox
+          :toggle="true"
+          :label="$t('main.csv.options.update')"
+          v-model="updateData"
+        />
+      </div>
+      <h3 class="legend-title">
+        {{ $t('main.csv.legend') }}
+      </h3>
+      <div class="flexrow legends">
+        <ul class="legend flexrow-item">
+          <li class="legend-definition">
+            <span class="legend-term"></span>
+            {{ $t('main.csv.legend_ok') }}
+          </li>
+          <li class="legend-definition">
+            <span class="legend-term ignored"></span>
+            {{ $t('main.csv.legend_ignored') }}
+          </li>
+          <li class="legend-definition">
+            <span class="legend-term missing"></span>
+            {{ $t('main.csv.legend_missing') }}
+          </li>
+          <li class="legend-definition">
+            <span class="legend-term missing-optional"></span>
+            {{ $t('main.csv.legend_missing_optional') }}
+          </li>
+        </ul>
+        <ul class="legend flexrow-item">
+          <li class="legend-definition">
+            <span class="legend-term"></span>
+            {{ $t('main.csv.legend_line_ok') }}
+          </li>
+          <li class="legend-definition">
+            <span class="legend-term disabled"></span>
+            {{ $t('main.csv.legend_disabled') }}
+          </li>
+          <li v-show="!disableUpdate" class="legend-definition">
+            <span class="legend-term overwrite"></span>
+            {{ $t('main.csv.legend_overwrite') }}
+          </li>
+        </ul>
+      </div>
+    </div>
+
+    <div class="render-container">
+      <table class="render">
+        <colgroup>
+          <col
+            :key="`col-missing-${item}`"
+            class="missing"
+            v-for="item in columnsRequired"
           />
-          <modal-footer
-            :error-text="errorText"
-            :is-loading="isLoading"
-            :is-disabled="formData === undefined"
-            :is-error="isError"
-            @confirm="onConfirmClicked"
-            @cancel="$emit('cancel')"
+          <col
+            :key="`col-${index}`"
+            :class="stateColumn(cell)"
+            v-for="(cell, index) in parsedCsv[0]"
           />
-        </div>
-      </div>
+          <col
+            :key="`col-missing-${item}`"
+            class="missing-optional"
+            v-for="item in columnsOptional"
+          />
+        </colgroup>
+        <thead>
+          <tr class="render-headers">
+            <th
+              class="required-header"
+              :key="`header-${cell}`"
+              v-for="cell in columnsRequired"
+            >
+              {{ cell }}
+            </th>
+            <th :key="`header-${index}`" v-for="(cell, index) in parsedCsv[0]">
+              <div class="render-select">
+                <combobox
+                  :options="columnOptions"
+                  :value="cell"
+                  :error="isDuplicated(index)"
+                  v-model="columnSelect[index]"
+                  @update:model-value="checkForDuplicate"
+                />
+              </div>
+              {{ cell || '-' }}
+            </th>
+            <th
+              class="optional-header"
+              :key="`header-${cell}`"
+              v-for="cell in columnsOptional"
+            >
+              {{ cell }}
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr
+            :class="{
+              overwrite: updateData && existingData(index),
+              disabled: !updateData && existingData(index)
+            }"
+            :key="`line-${index}`"
+            v-for="(line, index) in parsedCsv
+              .slice(1)
+              .filter(line => line.length > 1)"
+          >
+            <td v-for="cell in columnsRequired" :key="`cell-${cell}`">
+              {{ '-' }}
+            </td>
+            <td v-for="(cell, index) in line" :key="`cell-${index}`">
+              {{ cell || '-' }}
+            </td>
+            <td v-for="cell in columnsOptional" :key="`cell-${cell}`">
+              {{ '-' }}
+            </td>
+          </tr>
+        </tbody>
+      </table>
     </div>
-  </div>
-</template>
 
-<script>
-import { mapGetters } from 'vuex'
+    <div class="render-footer">
+      <button-simple
+        :text="$t('main.csv.preview_reupload')"
+        @click="$emit('reupload')"
+      />
+      <modal-footer
+        :error-text="errorText"
+        :is-loading="isLoading"
+        :is-disabled="formData === undefined"
+        :is-error="isError"
+        @confirm="$emit('confirm', parsedCsv, updateData)"
+        @cancel="$emit('cancel')"
+      />
+    </div>
+  </base-modal>
+</template>
 
-import { modalMixin } from '@/components/modals/base_modal'
+<script setup>
+import { computed, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useRoute } from 'vue-router'
+import { useStore } from 'vuex'
 
-import Combobox from '@/components/widgets/Combobox.vue'
-import Checkbox from '@/components/widgets/Checkbox.vue'
-import ButtonSimple from '@/components/widgets/ButtonSimple.vue'
+import BaseModal from '@/components/modals/BaseModal.vue'
 import ModalFooter from '@/components/modals/ModalFooter.vue'
+import ButtonSimple from '@/components/widgets/ButtonSimple.vue'
+import Checkbox from '@/components/widgets/Checkbox.vue'
+import Combobox from '@/components/widgets/Combobox.vue'
 
-export default {
-  name: 'import-render-modal',
-
-  mixins: [modalMixin],
-
-  components: {
-    ButtonSimple,
-    Combobox,
-    Checkbox,
-    ModalFooter
-  },
-
-  emits: ['cancel', 'confirm', 'reupload'],
-
-  data() {
-    return {
-      duplicates: [],
-      formData: null,
-      updateData: false
-    }
-  },
-
-  props: {
-    active: {
-      type: Boolean,
-      default: false
-    },
-    parsedCsv: {
-      type: Array,
-      default: () => []
-    },
-    columns: {
-      type: Array,
-      default: () => []
-    },
-    dataMatchers: {
-      type: Array,
-      default: () => []
-    },
-    database: {
-      type: Object,
-      default: () => {}
-    },
-    disableUpdate: {
-      type: Boolean,
-      default: false
-    },
-    isLoading: {
-      type: Boolean,
-      default: false
-    },
-    isError: {
-      type: Boolean,
-      default: false
-    },
-    importError: {
-      type: Error,
-      default: null
-    }
-  },
-
-  mounted() {
-    this.formData = null
-  },
-
-  computed: {
-    ...mapGetters([
-      'assetMetadataDescriptors',
-      'shotMetadataDescriptors',
-      'editMetadataDescriptors'
-    ]),
-
-    columnsRequired() {
-      if (this.parsedCsv.length !== 0) {
-        return this.columns.filter(item => {
-          return (
-            !this.parsedCsv[0].includes(item) &&
-            this.dataMatchers.includes(item)
-          )
-        })
-      } else {
-        return []
-      }
-    },
-
-    columnsOptional() {
-      if (this.parsedCsv.length !== 0) {
-        return this.columns.filter(item => {
-          return (
-            !this.parsedCsv[0].includes(item) &&
-            !this.dataMatchers.includes(item)
-          )
-        })
-      } else {
-        return []
-      }
-    },
+const { t } = useI18n()
+const route = useRoute()
+const store = useStore()
+
+const props = defineProps({
+  active: { type: Boolean, default: false },
+  columns: { type: Array, default: () => [] },
+  dataMatchers: { type: Array, default: () => [] },
+  database: { type: Object, default: () => ({}) },
+  disableUpdate: { type: Boolean, default: false },
+  importError: { type: Error, default: null },
+  isError: { type: Boolean, default: false },
+  isLoading: { type: Boolean, default: false },
+  parsedCsv: { type: Array, default: () => [] }
+})
+
+defineEmits(['cancel', 'confirm', 'reupload'])
+
+const duplicates = ref([])
+const formData = ref(null)
+const updateData = ref(false)
+
+const assetMetadataDescriptors = computed(
+  () => store.getters.assetMetadataDescriptors
+)
+const shotMetadataDescriptors = computed(
+  () => store.getters.shotMetadataDescriptors
+)
+const editMetadataDescriptors = computed(
+  () => store.getters.editMetadataDescriptors
+)
+
+const columnsRequired = computed(() => {
+  if (props.parsedCsv.length === 0) return []
+  return props.columns.filter(
+    item =>
+      !props.parsedCsv[0].includes(item) && props.dataMatchers.includes(item)
+  )
+})
+
+const columnsOptional = computed(() => {
+  if (props.parsedCsv.length === 0) return []
+  return props.columns.filter(
+    item =>
+      !props.parsedCsv[0].includes(item) && !props.dataMatchers.includes(item)
+  )
+})
+
+const metadataDescriptors = computed(() => {
+  const path = route.path
+  if (path.indexOf('assets') > 0) return assetMetadataDescriptors.value
+  if (path.indexOf('shots') > 0) return shotMetadataDescriptors.value
+  if (path.indexOf('edits') > 0) return editMetadataDescriptors.value
+  return []
+})
+
+const columnsAllowed = computed(() => {
+  const list = [...props.columns]
+  metadataDescriptors.value.forEach(item => {
+    if (!list.includes(item.name)) list.push(item.name)
+  })
+  return list
+})
+
+const columnOptions = computed(() => {
+  const options = [
+    { label: t('main.csv.choose'), value: t('main.csv.unknown') }
+  ]
+  columnsAllowed.value.forEach(item => {
+    options.push({ label: item, value: item })
+  })
+  return options
+})
+
+// columnSelect intentionally returns parsedCsv[0] directly so that
+// `v-model="columnSelect[index]"` mutates the underlying array — the
+// template expects to write back into the parsed CSV header row.
+const columnSelect = computed(() => props.parsedCsv[0])
+
+const indexMatchers = computed(() =>
+  props.dataMatchers.map(item => props.parsedCsv[0].indexOf(item))
+)
+
+const errorText = computed(() => {
+  let text = t('main.csv.error_upload')
+  if (props.importError?.status === 400) {
+    const res = props.importError.response
+    text += ` (line: ${res.body.line_number}) ${res.body.message}`
+  }
+  return text
+})
 
-    metadataDescriptors() {
-      if (this.$route.path.indexOf('assets') > 0) {
-        return this.assetMetadataDescriptors
-      }
-      if (this.$route.path.indexOf('shots') > 0) {
-        return this.shotMetadataDescriptors
-      }
-      if (this.$route.path.indexOf('edits') > 0) {
-        return this.editMetadataDescriptors
-      }
-      return []
-    },
-
-    columnsAllowed() {
-      const list = [...this.columns]
-      this.metadataDescriptors.forEach(item => {
-        if (!list.includes(item.name)) {
-          list.push(item.name)
-        }
-      })
-      return list
-    },
-
-    columnOptions() {
-      const options = [
-        {
-          label: this.$t('main.csv.choose'),
-          value: this.$t('main.csv.unknown')
-        }
-      ]
-      this.columnsAllowed.forEach(item => {
-        options.push({ label: item, value: item })
-      })
-      return options
-    },
-
-    columnSelect() {
-      return this.parsedCsv[0]
-    },
-
-    indexMatchers() {
-      const indexes = []
-      this.dataMatchers.forEach(item => {
-        indexes.push(this.parsedCsv[0].indexOf(item))
-      })
-      return indexes
-    },
-
-    errorText() {
-      let text = this.$t('main.csv.error_upload')
-      if (this.importError && this.importError.status === 400) {
-        const res = this.importError.response
-        text += ` (line: ${res.body.line_number}) ${res.body.message}`
-      }
-      return text
-    }
-  },
+const stateColumn = data =>
+  columnsAllowed.value.includes(data) ? undefined : 'ignored'
 
-  methods: {
-    onConfirmClicked() {
-      this.$emit('confirm', this.parsedCsv, this.updateData)
-    },
+const checkForDuplicate = () => {
+  const ignoredItem = t('main.csv.unknown')
+  duplicates.value = columnSelect.value
+    .filter((item, index) => columnSelect.value.indexOf(item) !== index)
+    .filter(item => item !== ignoredItem)
+}
 
-    onReupload() {
-      this.$emit('reupload')
-    },
+const isDuplicated = index =>
+  duplicates.value.includes(columnSelect.value[index])
 
-    stateColumn(data) {
-      if (!this.columnsAllowed.includes(data)) {
-        return 'ignored'
-      }
-    },
-
-    checkForDuplicate() {
-      const ignoredItem = this.$t('main.csv.unknown')
-      this.duplicates = this.columnSelect
-        .filter((item, index) => this.columnSelect.indexOf(item) !== index)
-        .filter(item => item !== ignoredItem)
-    },
-
-    isDuplicated(index) {
-      if (this.duplicates.includes(this.columnSelect[index])) {
-        return true
-      }
-    },
-
-    existingData(index) {
-      const csv = this.parsedCsv[index + 1]
-      const db = this.database
-      const columns = this.indexMatchers
-      let itemName = ''
-      columns.forEach(col => {
-        itemName += csv[col]
-      })
-      return db[itemName]
-    }
-  }
+const existingData = index => {
+  const csv = props.parsedCsv[index + 1]
+  let itemName = ''
+  indexMatchers.value.forEach(col => {
+    itemName += csv[col]
+  })
+  return props.database[itemName]
 }
 </script>
 
diff --git a/src/components/modals/ManageShotsModal.vue b/src/components/modals/ManageShotsModal.vue
index 35d80e89ec..ef9356f780 100644
--- a/src/components/modals/ManageShotsModal.vue
+++ b/src/components/modals/ManageShotsModal.vue
@@ -14,7 +14,6 @@
         <div>
           <div class="flexrow">
             <combobox
-              ref="shot-padding"
               :label="$t('shots.padding')"
               :options="shotPaddingOptions"
               class="shot-padding flexrow-item"
@@ -151,236 +150,187 @@
   </div>
 </template>
 
-<script>
-import { mapGetters } from 'vuex'
+<script setup>
+import { computed, reactive, ref, toRef, watch } from 'vue'
+import { useRouter } from 'vue-router'
+import { useStore } from 'vuex'
 
-import shotStore from '@/store/modules/shots'
-
-import { modalMixin } from '@/components/modals/base_modal'
-
-import stringHelpers from '@/lib/string'
+import { useModal } from '@/composables/modal'
 import { sortByName } from '@/lib/sorting'
+import stringHelpers from '@/lib/string'
+import shotStore from '@/store/modules/shots'
 
 import Combobox from '@/components/widgets/Combobox.vue'
 import PageTitle from '@/components/widgets/PageTitle.vue'
 
-export default {
-  name: 'manage-shots-modal',
+const router = useRouter()
+const store = useStore()
+
+const props = defineProps({
+  active: { type: Boolean, default: true }
+})
+
+const emit = defineEmits(['add-episode', 'add-sequence', 'add-shot', 'cancel'])
+
+useModal(toRef(props, 'active'), emit)
+
+const shotPaddingOptions = [
+  { label: '1', value: '1' },
+  { label: '2', value: '2' },
+  { label: '10', value: '10' }
+]
+
+const addEpisodeInput = ref(null)
+const addSequenceInput = ref(null)
+const addShotInput = ref(null)
+
+const names = reactive({ episode: '', sequence: '', shot: '' })
+const loading = reactive({
+  addEpisode: false,
+  addSequence: false,
+  addShot: false
+})
+const sequences = ref([])
+const displayedShots = ref([])
+const selectedEpisodeId = ref(null)
+const selectedSequenceId = ref(null)
+const shotPadding = ref('1')
+
+const currentProduction = computed(() => store.getters.currentProduction)
+const displayedEpisodes = computed(() => store.getters.displayedEpisodes)
+const displayedSequences = computed(() => store.getters.displayedSequences)
+const isTVShow = computed(() => store.getters.isTVShow)
+
+const shots = computed(() => shotStore.cache.shots)
+
+const isAddEpisodeAllowed = computed(() => {
+  if (!names.episode) return false
+  return !displayedEpisodes.value.find(
+    episode => names.episode === episode.name
+  )
+})
+
+const isAddSequenceAllowed = computed(() => {
+  if (!names.sequence) return false
+  const exists = displayedSequences.value.find(
+    sequence => names.sequence === sequence.name
+  )
+  return !exists && (selectedEpisodeId.value || !isTVShow.value)
+})
+
+const isAddShotAllowed = computed(() => {
+  if (!names.shot) return false
+  const exists = displayedShots.value.find(shot => names.shot === shot.name)
+  return !exists && selectedSequenceId.value
+})
+
+const focusAddSequence = () => {
+  addSequenceInput.value?.focus()
+}
 
-  mixins: [modalMixin],
+const focusAddShot = () => {
+  addShotInput.value?.focus()
+}
 
-  components: {
-    Combobox,
-    PageTitle
-  },
+const selectSequence = sequenceId => {
+  selectedSequenceId.value = sequenceId
+  displayedShots.value = sortByName(
+    shots.value.filter(shot => shot.sequence_id === sequenceId)
+  )
+}
 
-  props: {
-    active: {
-      default: true,
-      type: Boolean
-    }
-  },
-
-  emits: ['add-episode', 'add-sequence', 'add-shot', 'cancel'],
-
-  data() {
-    return {
-      names: {
-        episode: '',
-        sequence: '',
-        shot: ''
-      },
-      loading: {
-        addEpisode: false,
-        addSequence: false,
-        addShot: false
-      },
-      sequences: [],
-      displayedShots: [],
-      selectedEpisodeId: null,
-      selectedSequenceId: null,
-      shotPaddingOptions: [
-        {
-          label: '1',
-          value: '1'
-        },
-        {
-          label: '2',
-          value: '2'
-        },
-        {
-          label: '10',
-          value: '10'
-        }
-      ],
-      shotPadding: '1'
-    }
-  },
-
-  computed: {
-    ...mapGetters([
-      'currentProduction',
-      'displayedEpisodes',
-      'displayedSequences',
-      'isTVShow'
-    ]),
-
-    isAddEpisodeAllowed() {
-      const isEmpty = this.names.episode === ''
-      const isExist = this.displayedEpisodes.find(episode => {
-        return this.names.episode === episode.name
-      })
-      return !isEmpty && !isExist
-    },
-
-    isAddSequenceAllowed() {
-      const isEmpty = this.names.sequence === ''
-      const isExist = this.displayedSequences.find(sequence => {
-        return this.names.sequence === sequence.name
-      })
-      return !isEmpty && !isExist && (this.selectedEpisodeId || !this.isTVShow)
-    },
-
-    isAddShotAllowed() {
-      const isEmpty = this.names.shot === ''
-      const isExist = this.displayedShots.find(shot => {
-        return this.names.shot === shot.name
-      })
-      return !isEmpty && !isExist && this.selectedSequenceId
-    },
-
-    shots() {
-      return shotStore.cache.shots
-    }
-  },
+const selectEpisode = episodeId => {
+  selectedEpisodeId.value = episodeId
+  if (!isTVShow.value) {
+    displayedShots.value = []
+  } else {
+    router.push({
+      name: 'episode-shots',
+      params: {
+        production_id: currentProduction.value.id,
+        episode_id: episodeId
+      }
+    })
+  }
+}
 
-  methods: {
-    focusAddSequence() {
-      this.$refs.addSequenceInput.focus()
-    },
+const addEpisode = () => {
+  if (!isAddEpisodeAllowed.value) return
+  loading.addEpisode = true
+  const episode = {
+    name: names.episode,
+    project_id: currentProduction.value.id
+  }
+  emit('add-episode', episode, created => {
+    loading.addEpisode = false
+    selectEpisode(created.id)
+    names.episode = stringHelpers.generateNextName(created.name)
+  })
+}
 
-    focusAddShot() {
-      this.$refs.addShotInput.focus()
-    },
+const addSequence = () => {
+  if (!isAddSequenceAllowed.value) return
+  loading.addSequence = true
+  const sequence = {
+    name: names.sequence,
+    episode_id: selectedEpisodeId.value,
+    project_id: currentProduction.value.id
+  }
+  emit('add-sequence', sequence, created => {
+    loading.addSequence = false
+    selectEpisode(selectedEpisodeId.value)
+    selectSequence(created.id)
+    names.sequence = stringHelpers.generateNextName(created.name)
+  })
+}
 
-    selectEpisode(episodeId) {
-      if (!this.isTVShow) {
-        this.selectedEpisodeId = episodeId
-        this.displayedShots = []
-      } else {
-        this.selectedEpisodeId = episodeId
-        this.$router.push({
-          name: 'episode-shots',
-          params: {
-            production_id: this.currentProduction.id,
-            episode_id: episodeId
-          }
-        })
-      }
-    },
-
-    selectSequence(sequenceId) {
-      this.selectedSequenceId = sequenceId
-      this.displayedShots = sortByName(
-        this.shots.filter(shot => {
-          return shot.sequence_id === sequenceId
-        })
-      )
-    },
-
-    addEpisode() {
-      if (this.isAddEpisodeAllowed) {
-        const episodeName = this.names.episode
-        if (episodeName.length > 0) {
-          this.loading.addEpisode = true
-          const episode = {
-            name: this.names.episode,
-            project_id: this.currentProduction.id
-          }
-          this.$emit('add-episode', episode, episode => {
-            this.loading.addEpisode = false
-            this.selectEpisode(episode.id)
-            this.names.episode = stringHelpers.generateNextName(episode.name)
-          })
-        }
-      }
-    },
-
-    addSequence() {
-      if (this.isAddSequenceAllowed) {
-        const sequenceName = this.names.sequence
-        if (
-          sequenceName.length > 0 &&
-          (this.selectedEpisodeId || !this.isTVShow)
-        ) {
-          this.loading.addSequence = true
-          const sequence = {
-            name: this.names.sequence,
-            episode_id: this.selectedEpisodeId,
-            project_id: this.currentProduction.id
-          }
-          this.$emit('add-sequence', sequence, sequence => {
-            this.loading.addSequence = false
-            this.selectEpisode(this.selectedEpisodeId)
-            this.selectSequence(sequence.id)
-            this.names.sequence = stringHelpers.generateNextName(sequence.name)
-          })
-        }
-      }
-    },
-
-    addShot() {
-      if (this.isAddShotAllowed && !this.loading.addShot) {
-        const shotName = this.names.shot
-        this.loading.addShot = true
-        if (shotName.length > 0 && this.selectedSequenceId) {
-          const shot = {
-            name: this.names.shot,
-            sequence_id: this.selectedSequenceId,
-            project_id: this.currentProduction.id
-          }
-          this.$emit('add-shot', shot, shot => {
-            this.loading.addShot = false
-            this.selectSequence(this.selectedSequenceId)
-            this.names.shot = stringHelpers.generateNextName(
-              shot.name,
-              parseInt(this.shotPadding)
-            )
-          })
-        }
-      }
+const addShot = () => {
+  if (!isAddShotAllowed.value || loading.addShot) return
+  loading.addShot = true
+  const shot = {
+    name: names.shot,
+    sequence_id: selectedSequenceId.value,
+    project_id: currentProduction.value.id
+  }
+  emit('add-shot', shot, created => {
+    loading.addShot = false
+    selectSequence(selectedSequenceId.value)
+    names.shot = stringHelpers.generateNextName(
+      created.name,
+      parseInt(shotPadding.value)
+    )
+  })
+}
+
+watch(
+  () => props.active,
+  active => {
+    if (!active) return
+    shotPadding.value = '1'
+    sequences.value = displayedSequences.value
+    if (isTVShow.value) {
+      selectEpisode(displayedEpisodes.value[0].id)
+    } else if (sequences.value.length > 0) {
+      selectSequence(sequences.value[0].id)
     }
-  },
-
-  watch: {
-    active() {
-      if (this.active) {
-        this.shotPadding = '1'
-        this.sequences = this.displayedSequences
-        if (this.isTVShow) {
-          this.selectEpisode(this.displayedEpisodes[0].id)
-        } else if (this.sequences.length > 0) {
-          this.selectSequence(this.sequences[0].id)
-        }
-
-        setTimeout(() => {
-          if (this.isTVShow) {
-            this.$refs.addEpisodeInput.focus()
-          } else {
-            this.$refs.addSequenceInput.focus()
-          }
-        }, 100)
+    setTimeout(() => {
+      if (isTVShow.value) {
+        addEpisodeInput.value?.focus()
+      } else {
+        addSequenceInput.value?.focus()
       }
-    },
+    }, 100)
+  }
+)
 
-    selectedEpisodeId() {
-      this.sequences = this.displayedSequences
-      if (this.sequences.length > 0) {
-        this.selectSequence(this.sequences[0].id)
-      }
-    }
+watch(selectedEpisodeId, () => {
+  sequences.value = displayedSequences.value
+  if (sequences.value.length > 0) {
+    selectSequence(sequences.value[0].id)
   }
-}
+})
+
+defineExpose({ focusAddSequence, focusAddShot })
 </script>
 
 <style lang="scss" scoped>

From 7b5c3e2329776178289ffcfa2220d74ddcb6eec0 Mon Sep 17 00:00:00 2001
From: Frank Rousseau <frank@cg-wire.com>
Date: Sat, 2 May 2026 09:11:33 +0200
Subject: [PATCH 24/28] [modals] Convert edit-comment / edit-person modals
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Convert EditCommentModal and EditPersonModal from Options API.

EditCommentModal stays on a custom shell with useModal — its title
is conditional (`v-if="commentToEdit?.id"` with no `else` branch),
so only the editing case shows an h1; BaseModal would render an
empty <h1> for new comments and push the form down. Also: complex
template with at-mentions textarea, attachments, file-upload.

EditPersonModal switches to <base-modal> with a computed title that
covers both create/edit and bot/person variants. timeMixin (only
`today` was used) → useTime() composable. Custom button row with
multiple actions stays as-is.

Notable details:
- EditCommentModal: bug fix — attachmentFilesToDelete was added
  implicitly via this.attachmentFilesToDelete = [] inside reset();
  now declared as a proper ref([]). Drop ref="file-field" (kebab,
  never accessed); rename ref="input-link" → "inputLink"; eslint-
  disable on the TextField import (vue-eslint-parser false positive).
- EditPersonModal: rename ref="name-field" → "nameField". emitForm
  dispatches one of 'confirm' / 'confirm-invite' / 'invite'
  dynamically, so vue/no-unused-emit-declarations can't trace it
  statically — disabled rule for the whole defineEmits block with
  a comment explaining why.

CSS: drop dead .modal-content .box p.text and .is-danger rules from
both files.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/components/modals/EditCommentModal.vue | 481 +++++-------
 src/components/modals/EditPersonModal.vue  | 871 ++++++++++-----------
 2 files changed, 609 insertions(+), 743 deletions(-)

diff --git a/src/components/modals/EditCommentModal.vue b/src/components/modals/EditCommentModal.vue
index c442d3a4fc..da87c8bcc0 100644
--- a/src/components/modals/EditCommentModal.vue
+++ b/src/components/modals/EditCommentModal.vue
@@ -84,7 +84,7 @@
             </at-ta>
           </div>
           <text-field
-            ref="input-link"
+            ref="inputLink"
             :label="$t('main.link')"
             placeholder="https://..."
             type="url"
@@ -144,7 +144,6 @@
 
         <div>
           <file-upload
-            ref="file-field"
             class="flexrow-item"
             :accept="extensions"
             :is-primary="false"
@@ -167,293 +166,241 @@
   </div>
 </template>
 
-<script>
+<script setup>
 import { XIcon } from 'lucide-vue-next'
 import AtTa from 'vue-at/dist/vue-at-textarea'
-import { mapGetters } from 'vuex'
+import { computed, ref, toRef, watch } from 'vue'
+import { useRoute } from 'vue-router'
+import { useStore } from 'vuex'
 
+import { useModal } from '@/composables/modal'
 import files from '@/lib/files'
 import { remove } from '@/lib/models'
 import { replaceTimeWithTimecode } from '@/lib/render'
 
-import { modalMixin } from '@/components/modals/base_modal'
-
+import ModalFooter from '@/components/modals/ModalFooter.vue'
 import Checklist from '@/components/widgets/Checklist.vue'
 import ComboboxStatus from '@/components/widgets/ComboboxStatus.vue'
 import FileUpload from '@/components/widgets/FileUpload.vue'
-import ModalFooter from '@/components/modals/ModalFooter.vue'
 import PeopleAvatar from '@/components/widgets/PeopleAvatar.vue'
-import TextField from '@/components/widgets/TextField.vue'
 import TaskTypeName from '@/components/widgets/TaskTypeName.vue'
+// eslint-disable-next-line no-unused-vars
+import TextField from '@/components/widgets/TextField.vue'
 
-export default {
-  name: 'edit-comment-modal',
-
-  mixins: [modalMixin],
-
-  components: {
-    AtTa,
-    Checklist,
-    ComboboxStatus,
-    FileUpload,
-    ModalFooter,
-    PeopleAvatar,
-    TaskTypeName,
-    TextField,
-    XIcon
-  },
+const route = useRoute()
+const store = useStore()
+
+const props = defineProps({
+  active: { type: Boolean, default: false },
+  commentToEdit: { type: Object, default: () => ({}) },
+  fps: { type: Number, default: 25 },
+  frame: { type: Number, default: 0 },
+  isError: { type: Boolean, default: false },
+  isLoading: { type: Boolean, default: false },
+  revision: { type: Number, default: 1 },
+  taskTypes: { type: Array, default: () => [] },
+  team: { type: Array, default: () => [] }
+})
+
+const emit = defineEmits(['cancel', 'confirm'])
+
+useModal(toRef(props, 'active'), emit)
+
+const extensions = files.ALL_EXTENSIONS_STRING
+
+const attachmentFiles = ref([])
+const attachmentFilesToDelete = ref([])
+const inputLink = ref(null)
+const membersForAts = ref({ '@': [], '#': [] })
+const textField = ref(null)
+const form = ref({
+  text: '',
+  task_status_id: null,
+  checklist: [{ checked: false, text: '' }],
+  link: null
+})
+
+const departmentMap = computed(() => store.getters.departmentMap)
+const getTaskStatusForCurrentUser = computed(
+  () => store.getters.getTaskStatusForCurrentUser
+)
+const isCurrentUserClient = computed(() => store.getters.isCurrentUserClient)
+const productionDepartmentIds = computed(
+  () => store.getters.productionDepartmentIds
+)
+const taskStatusForCurrentUser = computed(
+  () => store.getters.taskStatusForCurrentUser
+)
+
+const isConceptTask = computed(() => route.path.includes('concept'))
+
+const taskStatuses = computed(() =>
+  isConceptTask.value
+    ? getTaskStatusForCurrentUser.value(null, true)
+    : taskStatusForCurrentUser.value.filter(status => !status.for_concept)
+)
+
+const isPreviewsComment = computed(
+  () => props.commentToEdit?.previews?.length > 0
+)
+
+const isValidForm = computed(() =>
+  Boolean(
+    !isPreviewsComment.value ||
+    !form.value.link ||
+    inputLink.value?.checkValidity()
+  )
+)
+
+const runConfirmation = event => {
+  if (!event || event.keyCode === 13 || !event.keyCode) {
+    emit('confirm', {
+      id: props.commentToEdit.id,
+      text: form.value.text,
+      task_status_id: form.value.task_status_id,
+      checklist: form.value.checklist.filter(item => item.text),
+      newAttachmentFiles: attachmentFiles.value,
+      attachmentFilesToDelete: attachmentFilesToDelete.value,
+      links: form.value.link ? [form.value.link] : null
+    })
+  }
+}
 
-  props: {
-    active: {
-      type: Boolean,
-      default: false
-    },
-    frame: {
-      type: Number,
-      default: 0
-    },
-    commentToEdit: {
-      type: Object,
-      default: () => {}
-    },
-    isLoading: {
-      type: Boolean,
-      default: false
-    },
-    isError: {
-      type: Boolean,
-      default: false
-    },
-    taskTypes: {
-      type: Array,
-      default: () => []
-    },
-    team: {
-      type: Array,
-      default: () => []
-    },
-    fps: {
-      type: Number,
-      default: 25
-    },
-    revision: {
-      type: Number,
-      default: 1
-    }
-  },
+const removeTask = entry => {
+  form.value.checklist = [...remove(form.value.checklist, entry)]
+}
 
-  emits: ['cancel', 'confirm'],
-
-  data() {
-    return {
-      membersForAts: { '@': [], '#': [] },
-      attachmentFiles: [],
-      extensions: files.ALL_EXTENSIONS_STRING,
-      form: {
-        text: '',
-        task_status_id: null,
-        checklist: [{ checked: false, text: '' }],
-        link: null
-      }
-    }
-  },
+const removeAttachment = attachment => {
+  form.value.attachment_files = remove(form.value.attachment_files, attachment)
+  attachmentFilesToDelete.value.push(attachment)
+}
+
+const removeNewAttachment = attachment => {
+  attachmentFiles.value = remove(attachmentFiles.value, attachment)
+}
+
+const onFileSelected = files => {
+  attachmentFiles.value = files
+}
 
-  computed: {
-    ...mapGetters([
-      'departmentMap',
-      'getTaskStatusForCurrentUser',
-      'isCurrentUserClient',
-      'productionDepartmentIds',
-      'taskStatusForCurrentUser'
-    ]),
-
-    taskStatuses() {
-      return this.isConceptTask
-        ? this.getTaskStatusForCurrentUser(null, true)
-        : this.taskStatusForCurrentUser.filter(status => !status.for_concept)
-    },
-
-    isConceptTask() {
-      return this.$route.path.includes('concept')
-    },
-
-    isPreviewsComment() {
-      return this.commentToEdit?.previews?.length > 0
-    },
-
-    isValidForm() {
-      return Boolean(
-        !this.isPreviewsComment ||
-        !this.form.link ||
-        this.$refs['input-link']?.checkValidity()
-      )
+const reset = () => {
+  attachmentFiles.value = []
+  attachmentFilesToDelete.value = []
+  if (props.commentToEdit?.id) {
+    form.value = {
+      text: props.commentToEdit.text,
+      task_status_id: props.commentToEdit.task_status_id,
+      checklist: [...props.commentToEdit.checklist],
+      attachment_files: [...props.commentToEdit.attachment_files],
+      link: props.commentToEdit.links?.[0]
     }
-  },
+    if (form.value.checklist.length === 0) {
+      form.value.checklist = [{ checked: false, text: '' }]
+    }
+  } else {
+    form.value = {
+      text: '',
+      task_status_id: null,
+      checklist: [{ checked: false, text: '' }],
+      attachment_files: [],
+      link: null
+    }
+  }
+}
 
-  methods: {
-    runConfirmation(event) {
-      if (!event || event.keyCode === 13 || !event.keyCode) {
-        const result = {
-          id: this.commentToEdit.id,
-          text: this.form.text,
-          task_status_id: this.form.task_status_id,
-          checklist: this.form.checklist.filter(item => item.text),
-          newAttachmentFiles: this.attachmentFiles,
-          attachmentFilesToDelete: this.attachmentFilesToDelete,
-          links: this.form.link ? [this.form.link] : null
-        }
-        this.$emit('confirm', result)
-      }
-    },
-
-    removeTask(entry) {
-      this.form.checklist = [...remove(this.form.checklist, entry)]
-    },
-
-    removeAttachment(attachment) {
-      this.form.attachment_files = remove(
-        this.form.attachment_files,
-        attachment
-      )
-      this.attachmentFilesToDelete.push(attachment)
-    },
-
-    removeNewAttachment(attachment) {
-      this.attachmentFiles = remove(this.attachmentFiles, attachment)
-    },
-
-    onFileSelected(attachmentFiles) {
-      this.attachmentFiles = attachmentFiles
-    },
-
-    reset() {
-      this.attachmentFiles = []
-      this.attachmentFilesToDelete = []
-      if (this.commentToEdit && this.commentToEdit.id) {
-        this.form = {
-          text: this.commentToEdit.text,
-          task_status_id: this.commentToEdit.task_status_id,
-          checklist: [...this.commentToEdit.checklist],
-          attachment_files: [...this.commentToEdit.attachment_files],
-          link: this.commentToEdit.links?.[0]
-        }
-        if (this.form.checklist.length === 0) {
-          this.form.checklist = [{ checked: false, text: '' }]
-        }
-      } else {
-        this.form = {
-          text: '',
-          task_status_id: null,
-          checklist: [{ checked: false, text: '' }],
-          attachment_files: [],
-          link: null
-        }
-      }
-    },
-
-    onAddChecklistItem(item) {
-      delete item.index
-      this.form.checklist.push(item)
-    },
-
-    onInsertChecklistItem(item) {
-      this.form.checklist.splice(item.index, 0, item)
-      for (let i = 0; i < this.form.checklist.length; i++) {
-        this.form.checklist[i].index = i
-      }
-    },
-
-    atOptionsFilter(name, chunk, at, v) {
-      // filter the list by the given at symbol
-      const option_at = v?.isTaskType ? '#' : '@'
-      // @ for team, # for task type
-      if (at !== option_at) return false
-      // match at lower-case
-      return name?.toLowerCase().indexOf(chunk.toLowerCase()) > -1
-    },
-
-    onAtTextChanged(input) {
-      if (input.includes('@frame')) {
-        this.form.text = replaceTimeWithTimecode(
-          input,
-          this.revision,
-          this.frame + 1,
-          this.fps
-        )
-      }
+const onAddChecklistItem = item => {
+  delete item.index
+  form.value.checklist.push(item)
+}
+
+const onInsertChecklistItem = item => {
+  form.value.checklist.splice(item.index, 0, item)
+  form.value.checklist.forEach((entry, i) => {
+    entry.index = i
+  })
+}
+
+const atOptionsFilter = (name, chunk, at, v) => {
+  // filter the list by the given at symbol (@ for team, # for task type)
+  const expectedAt = v?.isTaskType ? '#' : '@'
+  if (at !== expectedAt) return false
+  return name?.toLowerCase().indexOf(chunk.toLowerCase()) > -1
+}
+
+const onAtTextChanged = input => {
+  if (input.includes('@frame')) {
+    form.value.text = replaceTimeWithTimecode(
+      input,
+      props.revision,
+      props.frame + 1,
+      props.fps
+    )
+  }
+}
+
+watch(() => props.commentToEdit, reset)
+
+watch(
+  () => props.active,
+  active => {
+    if (active) {
+      setTimeout(() => {
+        reset()
+        textField.value?.focus()
+      }, 100)
     }
+  }
+)
+
+watch(
+  () => props.taskTypes,
+  values => {
+    const taskTypeOptions = values.map(taskType => ({
+      isTaskType: true,
+      full_name: taskType.name,
+      color: taskType.color,
+      id: taskType.id,
+      url: taskType.url
+    }))
+    taskTypeOptions.push({
+      isTaskType: true,
+      color: '#000',
+      full_name: 'All'
+    })
+    membersForAts.value['#'] = taskTypeOptions
   },
-
-  watch: {
-    commentToEdit() {
-      this.reset()
-    },
-
-    active() {
-      if (this.active) {
-        setTimeout(() => {
-          this.reset()
-          this.$refs.textField.focus()
-        }, 100)
-      }
-    },
-
-    taskTypes: {
-      deep: true,
-      immediate: true,
-      handler(values) {
-        const taskTypeOptions = values.map(taskType => {
-          return {
-            isTaskType: true,
-            full_name: taskType.name,
-            color: taskType.color,
-            id: taskType.id,
-            url: taskType.url
-          }
-        })
-        taskTypeOptions.push({
-          isTaskType: true,
-          color: '#000',
-          full_name: 'All'
-        })
-        this.membersForAts['#'] = taskTypeOptions
-      }
-    },
-
-    team: {
-      deep: true,
-      immediate: true,
-      handler() {
-        let teamOptions
-        if (this.isCurrentUserClient) {
-          teamOptions = [
-            this.team.filter(person =>
-              ['admin', 'manager', 'supervisor', 'client'].includes(person.role)
-            )
-          ]
-        } else {
-          teamOptions = [...this.team]
-        }
-        teamOptions = teamOptions.concat(
-          this.productionDepartmentIds.map(departmentId => {
-            const department = this.departmentMap.get(departmentId)
-            return {
-              isDepartment: true,
-              full_name: department.name,
-              color: department.color,
-              id: departmentId
-            }
-          })
+  { deep: true, immediate: true }
+)
+
+watch(
+  () => props.team,
+  () => {
+    let teamOptions
+    if (isCurrentUserClient.value) {
+      teamOptions = [
+        props.team.filter(person =>
+          ['admin', 'manager', 'supervisor', 'client'].includes(person.role)
         )
-        teamOptions.push({
-          isTime: true,
-          full_name: 'frame'
-        })
-        this.membersForAts['@'] = teamOptions
-      }
+      ]
+    } else {
+      teamOptions = [...props.team]
     }
-  }
-}
+    teamOptions = teamOptions.concat(
+      productionDepartmentIds.value.map(departmentId => {
+        const department = departmentMap.value.get(departmentId)
+        return {
+          isDepartment: true,
+          full_name: department.name,
+          color: department.color,
+          id: departmentId
+        }
+      })
+    )
+    teamOptions.push({ isTime: true, full_name: 'frame' })
+    membersForAts.value['@'] = teamOptions
+  },
+  { deep: true, immediate: true }
+)
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/modals/EditPersonModal.vue b/src/components/modals/EditPersonModal.vue
index ef8054295c..76682318c3 100644
--- a/src/components/modals/EditPersonModal.vue
+++ b/src/components/modals/EditPersonModal.vue
@@ -1,218 +1,208 @@
 <template>
-  <div class="modal" :class="{ 'is-active': active }">
-    <div class="modal-background" @click="$emit('cancel')"></div>
-
-    <div class="modal-content">
-      <form @submit.prevent="emitForm('confirm')" class="box">
-        <h1 class="title" v-if="personToEdit.id !== undefined">
-          {{ isBot ? $t('bots.edit_title') : $t('people.edit_title') }}
-          {{ personToEdit.full_name }}
-        </h1>
-        <h1 class="title" v-else>
-          {{ isBot ? $t('bots.new_bot') : $t('people.new_person') }}
-        </h1>
-        <text-field
-          ref="name-field"
-          :errored="form.first_name && !isValidName"
-          :label="
-            isBot ? $t('bots.fields.name') : $t('people.fields.first_name')
-          "
-          :disabled="personToEdit.is_generated_from_ldap"
-          v-model.trim="form.first_name"
-        />
-        <text-field
-          :label="$t('people.fields.last_name')"
-          :disabled="personToEdit.is_generated_from_ldap"
-          v-model.trim="form.last_name"
-          v-if="!isBot"
-        />
-        <text-field
-          type="email"
-          :errored="form.email && !isValidEmail"
-          :error-text="emailErrorText"
-          :label="$t('people.fields.email')"
-          :disabled="personToEdit.is_generated_from_ldap"
-          v-model.trim="form.email"
-          @update:model-value="$emit('reset-error', 'email')"
-          v-if="!isBot"
-        />
-        <text-field
-          :label="$t('people.fields.phone')"
-          v-model.trim="form.phone"
-          v-if="!isBot"
-        />
-        <date-field
-          :label="$t('bots.fields.expiration_date')"
-          :min-date="today"
-          :disabled="isEditing"
-          v-model="form.expiration_date"
-          v-if="isBot"
-        />
-        <combobox
-          :label="$t('people.fields.role')"
-          :options="roleOptions"
-          locale-key-prefix="people.role."
-          v-model="form.role"
-        />
-        <combobox
-          :label="$t('people.fields.position')"
-          :options="positionOptions"
-          locale-key-prefix="people.position."
-          v-model="form.position"
-          v-if="!isBot"
-        />
-        <combobox
-          :label="$t('people.fields.seniority')"
-          :options="seniorityOptions"
-          locale-key-prefix="people.seniority."
-          v-model="form.seniority"
-          v-if="!isBot"
-        />
-        <text-field
-          type="number"
-          :label="$t('people.fields.daily_salary')"
-          v-model="form.daily_salary"
-          v-if="!isBot"
-        />
-        <combobox
-          :label="$t('people.fields.contract')"
-          :options="contractOptions"
-          locale-key-prefix="people.contract."
-          v-model="form.contract_type"
-          v-if="!isBot && form.role !== 'client'"
-        />
-        <div class="departments field">
-          <label class="label">{{ $t('people.fields.departments') }}</label>
-          <p
-            class="empty mb1"
-            v-if="form.departments && form.departments.length === 0"
-          >
-            {{
-              isBot
-                ? $t('bots.departments_empty')
-                : $t('people.departments_empty')
-            }}
-          </p>
-          <div
-            class="department-element mb1 mt05"
-            :key="departmentId"
-            @click="removeDepartment(departmentId)"
-            v-for="departmentId in form.departments"
-          >
-            <department-name
-              :department="departmentMap.get(departmentId)"
-              v-if="departmentId"
-            />
-          </div>
-          <div class="flexrow">
-            <combobox-department
-              class="flexrow-item"
-              :selectable-departments="selectableDepartments"
-              v-model="selectedDepartment"
-              v-if="selectableDepartments.length > 0"
-            />
-            <button
-              class="button is-success flexrow-item"
-              :class="{
-                'is-disabled': selectedDepartment === null
-              }"
-              type="button"
-              @click="addDepartment"
-              v-if="selectableDepartments.length > 0"
-            >
-              {{ $t('main.add') }}
-            </button>
-          </div>
+  <base-modal :active="active" :title="modalTitle" @cancel="$emit('cancel')">
+    <form @submit.prevent="emitForm('confirm')">
+      <text-field
+        ref="nameField"
+        :errored="form.first_name && !isValidName"
+        :label="isBot ? $t('bots.fields.name') : $t('people.fields.first_name')"
+        :disabled="personToEdit.is_generated_from_ldap"
+        v-model.trim="form.first_name"
+      />
+      <text-field
+        :label="$t('people.fields.last_name')"
+        :disabled="personToEdit.is_generated_from_ldap"
+        v-model.trim="form.last_name"
+        v-if="!isBot"
+      />
+      <text-field
+        type="email"
+        :errored="form.email && !isValidEmail"
+        :error-text="emailErrorText"
+        :label="$t('people.fields.email')"
+        :disabled="personToEdit.is_generated_from_ldap"
+        v-model.trim="form.email"
+        @update:model-value="$emit('reset-error', 'email')"
+        v-if="!isBot"
+      />
+      <text-field
+        :label="$t('people.fields.phone')"
+        v-model.trim="form.phone"
+        v-if="!isBot"
+      />
+      <date-field
+        :label="$t('bots.fields.expiration_date')"
+        :min-date="today"
+        :disabled="isEditing"
+        v-model="form.expiration_date"
+        v-if="isBot"
+      />
+      <combobox
+        :label="$t('people.fields.role')"
+        :options="roleOptions"
+        locale-key-prefix="people.role."
+        v-model="form.role"
+      />
+      <combobox
+        :label="$t('people.fields.position')"
+        :options="positionOptions"
+        locale-key-prefix="people.position."
+        v-model="form.position"
+        v-if="!isBot"
+      />
+      <combobox
+        :label="$t('people.fields.seniority')"
+        :options="seniorityOptions"
+        locale-key-prefix="people.seniority."
+        v-model="form.seniority"
+        v-if="!isBot"
+      />
+      <text-field
+        type="number"
+        :label="$t('people.fields.daily_salary')"
+        v-model="form.daily_salary"
+        v-if="!isBot"
+      />
+      <combobox
+        :label="$t('people.fields.contract')"
+        :options="contractOptions"
+        locale-key-prefix="people.contract."
+        v-model="form.contract_type"
+        v-if="!isBot && form.role !== 'client'"
+      />
+      <div class="departments field">
+        <label class="label">{{ $t('people.fields.departments') }}</label>
+        <p
+          class="empty mb1"
+          v-if="form.departments && form.departments.length === 0"
+        >
+          {{
+            isBot
+              ? $t('bots.departments_empty')
+              : $t('people.departments_empty')
+          }}
+        </p>
+        <div
+          class="department-element mb1 mt05"
+          :key="departmentId"
+          @click="removeDepartment(departmentId)"
+          v-for="departmentId in form.departments"
+        >
+          <department-name
+            :department="departmentMap.get(departmentId)"
+            v-if="departmentId"
+          />
         </div>
-        <combobox-studio
-          class="field"
-          :label="$t('people.fields.studio')"
-          v-model="form.studio_id"
-          v-if="!isBot"
-        />
-        <combobox
-          :label="$t('people.fields.active')"
-          :options="activeOptions"
-          :disabled="personToEdit.is_generated_from_ldap"
-          v-model="form.active"
-        />
-
         <div class="flexrow">
+          <combobox-department
+            class="flexrow-item"
+            :selectable-departments="selectableDepartments"
+            v-model="selectedDepartment"
+            v-if="selectableDepartments.length > 0"
+          />
           <button
-            class="button flexrow-item"
-            :class="{
-              'is-loading': isInviteLoading
-            }"
-            :disabled="!isValidEmail"
-            type="button"
-            @click="emitForm('invite')"
-            v-if="isEditing && !isBot"
-          >
-            {{ $t('people.invite') }}
-          </button>
-          <div class="filler"></div>
-
-          <button
-            class="button is-primary flexrow-item"
+            class="button is-success flexrow-item"
             :class="{
-              'is-loading': isCreateInviteLoading
+              'is-disabled': selectedDepartment === null
             }"
-            :disabled="!isValidForm"
             type="button"
-            @click="emitForm('confirm-invite')"
-            v-if="!isEditing && !isBot"
+            @click="addDepartment"
+            v-if="selectableDepartments.length > 0"
           >
-            {{ $t('people.create_invite') }}
+            {{ $t('main.add') }}
           </button>
-          <button
-            class="button is-primary flexrow-item"
-            :class="{
-              'is-loading': isLoading
-            }"
-            :disabled="!isValidForm"
-            type="submit"
-          >
-            {{
-              !isEditing
-                ? isBot
-                  ? $t('bots.create')
-                  : $t('people.create')
-                : isBot
-                  ? $t('bots.confirm_edit')
-                  : $t('people.confirm_edit')
-            }}
-          </button>
-          <button
-            class="button is-link flexrow-item"
-            type="button"
-            @click="$emit('cancel')"
-          >
-            {{ $t('main.cancel') }}
-          </button>
-        </div>
-
-        <div class="success has-text-right mt1" v-if="isInvitationSuccess">
-          {{ $t('people.invite_success') }}
-        </div>
-        <div class="error has-text-right mt1" v-if="isInvitationError">
-          {{ $t('people.invite_error') }}
-        </div>
-        <div class="error has-text-right mt1" v-if="isUserLimitError">
-          {{ $t('people.user_limit_error') }}
         </div>
-        <div class="error has-text-right mt1" v-if="isError">
-          {{ $t('people.create_error') }}
-        </div>
-      </form>
-    </div>
-  </div>
+      </div>
+      <combobox-studio
+        class="field"
+        :label="$t('people.fields.studio')"
+        v-model="form.studio_id"
+        v-if="!isBot"
+      />
+      <combobox
+        :label="$t('people.fields.active')"
+        :options="activeOptions"
+        :disabled="personToEdit.is_generated_from_ldap"
+        v-model="form.active"
+      />
+
+      <div class="flexrow">
+        <button
+          class="button flexrow-item"
+          :class="{
+            'is-loading': isInviteLoading
+          }"
+          :disabled="!isValidEmail"
+          type="button"
+          @click="emitForm('invite')"
+          v-if="isEditing && !isBot"
+        >
+          {{ $t('people.invite') }}
+        </button>
+        <div class="filler"></div>
+
+        <button
+          class="button is-primary flexrow-item"
+          :class="{
+            'is-loading': isCreateInviteLoading
+          }"
+          :disabled="!isValidForm"
+          type="button"
+          @click="emitForm('confirm-invite')"
+          v-if="!isEditing && !isBot"
+        >
+          {{ $t('people.create_invite') }}
+        </button>
+        <button
+          class="button is-primary flexrow-item"
+          :class="{
+            'is-loading': isLoading
+          }"
+          :disabled="!isValidForm"
+          type="submit"
+        >
+          {{
+            !isEditing
+              ? isBot
+                ? $t('bots.create')
+                : $t('people.create')
+              : isBot
+                ? $t('bots.confirm_edit')
+                : $t('people.confirm_edit')
+          }}
+        </button>
+        <button
+          class="button is-link flexrow-item"
+          type="button"
+          @click="$emit('cancel')"
+        >
+          {{ $t('main.cancel') }}
+        </button>
+      </div>
+
+      <div class="success has-text-right mt1" v-if="isInvitationSuccess">
+        {{ $t('people.invite_success') }}
+      </div>
+      <div class="error has-text-right mt1" v-if="isInvitationError">
+        {{ $t('people.invite_error') }}
+      </div>
+      <div class="error has-text-right mt1" v-if="isUserLimitError">
+        {{ $t('people.user_limit_error') }}
+      </div>
+      <div class="error has-text-right mt1" v-if="isError">
+        {{ $t('people.create_error') }}
+      </div>
+    </form>
+  </base-modal>
 </template>
 
-<script>
-import { mapGetters } from 'vuex'
-import { modalMixin } from '@/components/modals/base_modal'
-import { timeMixin } from '@/components/mixins/time'
+<script setup>
+import { computed, ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useStore } from 'vuex'
+
+import { useTime } from '@/composables/time'
 
+import BaseModal from '@/components/modals/BaseModal.vue'
 import Combobox from '@/components/widgets/Combobox.vue'
 import ComboboxDepartment from '@/components/widgets/ComboboxDepartment.vue'
 import ComboboxStudio from '@/components/widgets/ComboboxStudio.vue'
@@ -220,280 +210,218 @@ import DateField from '@/components/widgets/DateField.vue'
 import DepartmentName from '@/components/widgets/DepartmentName.vue'
 import TextField from '@/components/widgets/TextField.vue'
 
-export default {
-  name: 'edit-person-modal',
+const { t } = useI18n()
+const { today } = useTime()
+const store = useStore()
+
+const props = defineProps({
+  active: { type: Boolean, default: false },
+  isBot: { type: Boolean, default: false },
+  isCreateInviteLoading: { type: Boolean, default: false },
+  isEmailDomainError: { type: Boolean, default: false },
+  isError: { type: Boolean, default: false },
+  isInvitationError: { type: Boolean, default: false },
+  isInvitationSuccess: { type: Boolean, default: false },
+  isInviteLoading: { type: Boolean, default: false },
+  isLoading: { type: Boolean, default: false },
+  isUserLimitError: { type: Boolean, default: false },
+  personToEdit: { type: Object, default: () => ({}) }
+})
+
+// emitForm() emits one of 'confirm' / 'confirm-invite' / 'invite' dynamically,
+// so vue/no-unused-emit-declarations can't statically prove they're used.
+/* eslint-disable vue/no-unused-emit-declarations */
+const emit = defineEmits([
+  'cancel',
+  'confirm',
+  'confirm-invite',
+  'invite',
+  'reset-error'
+])
+/* eslint-enable vue/no-unused-emit-declarations */
+
+const activeOptions = computed(() => [
+  { label: t('main.yes'), value: 'true' },
+  { label: t('main.no'), value: 'false' }
+])
+
+const contractOptions = [
+  { label: 'open-ended', value: 'open-ended' },
+  { label: 'fixed-term', value: 'fixed-term' },
+  { label: 'short-term', value: 'short-term' },
+  { label: 'freelance', value: 'freelance' },
+  { label: 'apprentice', value: 'apprentice' },
+  { label: 'internship', value: 'internship' }
+]
+
+const roleOptions = [
+  { label: 'user', value: 'user' },
+  { label: 'supervisor', value: 'supervisor' },
+  { label: 'manager', value: 'manager' },
+  { label: 'client', value: 'client' },
+  { label: 'vendor', value: 'vendor' },
+  { label: 'admin', value: 'admin' }
+]
+
+const positionOptions = [
+  { label: '', value: null },
+  { label: 'artist', value: 'artist' },
+  { label: 'supervisor', value: 'supervisor' },
+  { label: 'lead', value: 'lead' }
+]
+
+const seniorityOptions = [
+  { label: '', value: null },
+  { label: 'senior', value: 'senior' },
+  { label: 'mid', value: 'mid' },
+  { label: 'junior', value: 'junior' }
+]
+
+const form = ref({
+  first_name: '',
+  last_name: '',
+  email: '',
+  phone: '',
+  role: 'user',
+  position: 'artist',
+  seniority: 'mid',
+  daily_salary: 0,
+  contract_type: 'open-ended',
+  active: 'true',
+  departments: [],
+  studio_id: null,
+  expiration_date: null,
+  is_bot: false
+})
+const nameField = ref(null)
+const selectedDepartment = ref(null)
+
+const departments = computed(() => store.getters.departments)
+const departmentMap = computed(() => store.getters.departmentMap)
+const people = computed(() => store.getters.people)
+const user = computed(() => store.getters.user)
+
+const isEditing = computed(() => Boolean(props.personToEdit?.id))
+
+const modalTitle = computed(() => {
+  if (isEditing.value) {
+    const prefix = props.isBot ? t('bots.edit_title') : t('people.edit_title')
+    return `${prefix} ${props.personToEdit.full_name}`
+  }
+  return props.isBot ? t('bots.new_bot') : t('people.new_person')
+})
+
+const selectableDepartments = computed(() =>
+  departments.value.filter(d => !form.value.departments.includes(d.id))
+)
+
+const isValidName = computed(() => Boolean(form.value.first_name?.length))
+
+const isUniqEmail = computed(
+  () =>
+    !people.value.some(
+      person =>
+        !person.is_bot &&
+        person.email === form.value.email &&
+        (!props.personToEdit || props.personToEdit.email !== person.email)
+    )
+)
+
+const isValidEmail = computed(() => {
+  if (!form.value.email?.length) return false
+  const emailRegex =
+    /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
+  if (!emailRegex.test(form.value.email)) return false
+  if (form.value.is_bot) return true
+  return isUniqEmail.value && !props.isEmailDomainError
+})
+
+const isValidForm = computed(() => isValidName.value && isValidEmail.value)
+
+const emailErrorText = computed(() => {
+  if (props.isEmailDomainError) return t('people.email_domain_error')
+  if (!isUniqEmail.value) return t('people.email_exist_error')
+  return ''
+})
+
+const emitForm = event => {
+  if (!isValidForm.value) return
+  emit(event, {
+    ...form.value,
+    last_name: form.value.last_name || '',
+    active: form.value.active === 'true' || form.value.active === true
+  })
+}
 
-  mixins: [modalMixin, timeMixin],
+const addDepartment = () => {
+  form.value.departments.push(selectedDepartment.value)
+  selectedDepartment.value = null
+}
 
-  components: {
-    Combobox,
-    ComboboxDepartment,
-    ComboboxStudio,
-    DateField,
-    DepartmentName,
-    TextField
-  },
+const removeDepartment = idToRemove => {
+  const index = form.value.departments.indexOf(idToRemove)
+  if (index >= 0) form.value.departments.splice(index, 1)
+}
 
-  props: {
-    active: {
-      type: Boolean,
-      default: false
-    },
-    isBot: {
-      type: Boolean,
-      default: false
-    },
-    isLoading: {
-      type: Boolean,
-      default: false
-    },
-    isCreateInviteLoading: {
-      type: Boolean,
-      default: false
-    },
-    isInviteLoading: {
-      type: Boolean,
-      default: false
-    },
-    isInvitationSuccess: {
-      type: Boolean,
-      default: false
-    },
-    isInvitationError: {
-      type: Boolean,
-      default: false
-    },
-    isUserLimitError: {
-      type: Boolean,
-      default: false
-    },
-    isEmailDomainError: {
-      type: Boolean,
-      default: false
-    },
-    isError: {
-      type: Boolean,
-      default: false
-    },
-    personToEdit: {
-      type: Object,
-      default: () => {}
+const resetForm = () => {
+  if (isEditing.value) {
+    const p = props.personToEdit
+    form.value = {
+      first_name: p.first_name,
+      last_name: p.last_name,
+      email: p.email,
+      phone: p.phone,
+      role: p.role,
+      position: p.position,
+      seniority: p.seniority,
+      daily_salary: p.daily_salary,
+      contract_type: p.contract_type,
+      active: p.active ? 'true' : 'false',
+      departments: [...(p.departments || [])],
+      studio_id: p.studio_id,
+      expiration_date: p.expiration_date,
+      is_bot: p.is_bot,
+      notifications_enabled: p.notifications_enabled ? 'true' : 'false',
+      notifications_slack_enabled: p.notifications_slack_enabled
+        ? 'true'
+        : 'false',
+      notifications_mattermost_enabled: p.notifications_mattermost_enabled
+        ? 'true'
+        : 'false',
+      notifications_discord_enabled: p.notifications_discord_enabled
+        ? 'true'
+        : 'false'
     }
-  },
-
-  // eslint-disable-next-line vue/no-unused-emit-declarations
-  emits: ['cancel', 'confirm', 'confirm-invite', 'invite', 'reset-error'],
-
-  data() {
-    return {
-      activeOptions: [
-        { label: this.$t('main.yes'), value: 'true' },
-        { label: this.$t('main.no'), value: 'false' }
-      ],
-      contractOptions: [
-        { label: 'open-ended', value: 'open-ended' },
-        { label: 'fixed-term', value: 'fixed-term' },
-        { label: 'short-term', value: 'short-term' },
-        { label: 'freelance', value: 'freelance' },
-        { label: 'apprentice', value: 'apprentice' },
-        { label: 'internship', value: 'internship' }
-      ],
-      form: {
-        first_name: '',
-        last_name: '',
-        email: '',
-        phone: '',
-        role: 'user',
-        position: 'artist',
-        seniority: 'mid',
-        daily_salary: 0,
-        contract_type: 'open-ended',
-        active: 'true',
-        departments: [],
-        studio_id: null,
-        expiration_date: null,
-        is_bot: false
-      },
-      roleOptions: [
-        { label: 'user', value: 'user' },
-        { label: 'supervisor', value: 'supervisor' },
-        { label: 'manager', value: 'manager' },
-        { label: 'client', value: 'client' },
-        { label: 'vendor', value: 'vendor' },
-        { label: 'admin', value: 'admin' }
-      ],
-      positionOptions: [
-        { label: '', value: null },
-        { label: 'artist', value: 'artist' },
-        { label: 'supervisor', value: 'supervisor' },
-        { label: 'lead', value: 'lead' }
-      ],
-      seniorityOptions: [
-        { label: '', value: null },
-        { label: 'senior', value: 'senior' },
-        { label: 'mid', value: 'mid' },
-        { label: 'junior', value: 'junior' }
-      ],
-      selectedDepartment: null
+  } else {
+    form.value = {
+      role: 'user',
+      position: 'artist',
+      seniority: 'mid',
+      daily_salary: 0,
+      contract_type: 'open-ended',
+      active: 'true',
+      departments: [],
+      studio_id: null,
+      expiration_date: null,
+      is_bot: props.isBot,
+      email: props.isBot ? user.value.email : null
     }
-  },
+  }
+}
 
-  computed: {
-    ...mapGetters(['departments', 'departmentMap', 'people']),
-
-    selectableDepartments() {
-      return this.departments.filter(
-        department => !this.form.departments.includes(department.id)
-      )
-    },
-
-    isEditing() {
-      return Boolean(this.personToEdit?.id)
-    },
-
-    isValidName() {
-      return Boolean(this.form.first_name?.length)
-    },
-
-    isValidEmail() {
-      if (!this.form.email?.length) {
-        return false
-      }
-
-      const emailRegex =
-        /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
-
-      if (!emailRegex.test(this.form.email)) {
-        return false
-      }
-
-      if (this.form.is_bot) {
-        return true
-      }
-
-      return this.isUniqEmail && !this.isEmailDomainError
-    },
-
-    isUniqEmail() {
-      return !this.people.some(
-        person =>
-          !person.is_bot &&
-          person.email === this.form.email &&
-          (!this.personToEdit || this.personToEdit.email !== person.email)
-      )
-    },
-
-    isValidForm() {
-      return this.isValidName && this.isValidEmail
-    },
-
-    emailErrorText() {
-      if (this.isEmailDomainError) {
-        return this.$t('people.email_domain_error')
-      }
-      if (!this.isUniqEmail) {
-        return this.$t('people.email_exist_error')
-      }
-      return ''
-    }
-  },
+watch(() => props.personToEdit, resetForm, { immediate: true })
 
-  methods: {
-    emitForm(event) {
-      if (!this.isValidForm) {
-        return
-      }
-      const form = {
-        ...this.form,
-        last_name: this.form.last_name || '',
-        active: this.form.active === 'true' || this.form.active === true
-      }
-      this.$emit(event, form)
-    },
-
-    addDepartment() {
-      this.form.departments.push(this.selectedDepartment)
-      this.selectedDepartment = null
-    },
-
-    removeDepartment(idToRemove) {
-      const departmentIndex = this.form.departments.indexOf(idToRemove)
-      if (departmentIndex >= 0) {
-        this.form.departments.splice(departmentIndex, 1)
-      }
-    },
-
-    resetForm() {
-      if (this.isEditing) {
-        this.form = {
-          first_name: this.personToEdit.first_name,
-          last_name: this.personToEdit.last_name,
-          email: this.personToEdit.email,
-          phone: this.personToEdit.phone,
-          role: this.personToEdit.role,
-          position: this.personToEdit.position,
-          seniority: this.personToEdit.seniority,
-          daily_salary: this.personToEdit.daily_salary,
-          contract_type: this.personToEdit.contract_type,
-          active: this.personToEdit.active ? 'true' : 'false',
-          departments: [...(this.personToEdit.departments || [])],
-          studio_id: this.personToEdit.studio_id,
-          expiration_date: this.personToEdit.expiration_date,
-          is_bot: this.personToEdit.is_bot,
-          notifications_enabled: this.personToEdit.notifications_enabled
-            ? 'true'
-            : 'false',
-          notifications_slack_enabled: this.personToEdit
-            .notifications_slack_enabled
-            ? 'true'
-            : 'false',
-          notifications_mattermost_enabled: this.personToEdit
-            .notifications_mattermost_enabled
-            ? 'true'
-            : 'false',
-          notifications_discord_enabled: this.personToEdit
-            .notifications_discord_enabled
-            ? 'true'
-            : 'false'
-        }
-      } else {
-        this.form = {
-          role: 'user',
-          position: 'artist',
-          seniority: 'mid',
-          daily_salary: 0,
-          contract_type: 'open-ended',
-          active: 'true',
-          departments: [],
-          studio_id: null,
-          expiration_date: null,
-          is_bot: this.isBot,
-          email: this.isBot ? this.user.email : null
-        }
-      }
+watch(
+  () => props.active,
+  active => {
+    if (active) {
+      setTimeout(() => {
+        nameField.value?.focus()
+      }, 100)
     }
   },
-
-  watch: {
-    personToEdit: {
-      immediate: true,
-      handler() {
-        this.resetForm()
-      }
-    },
-
-    active: {
-      immediate: true,
-      handler() {
-        if (this.active) {
-          setTimeout(() => {
-            this.$refs['name-field']?.focus()
-          }, 100)
-        }
-      }
-    }
-  }
-}
+  { immediate: true }
+)
 </script>
 
 <style lang="scss" scoped>
@@ -503,15 +431,6 @@ export default {
   cursor: pointer;
 }
 
-.modal-content .box p.text {
-  margin-bottom: 1em;
-}
-
-.is-danger {
-  color: #ff3860;
-  font-style: italic;
-}
-
 .empty {
   color: var(--text);
   font-style: italic;

From 2bfd99ec5ea89895a0d3bdffadf6fecf87136e49 Mon Sep 17 00:00:00 2001
From: Frank Rousseau <frank@cg-wire.com>
Date: Sat, 2 May 2026 15:10:13 +0200
Subject: [PATCH 25/28] [modals] Convert BuildFilterModal to Composition API
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Convert BuildFilterModal.vue (1035 lines) — the last and largest
modal still on Options API — to <script setup>.

The modal mixed in descriptorMixin only to call one helper —
getDescriptorChecklistValues. Rather than pull the whole mixin (used
by 27+ files) through a composable extraction, expose the helper as
a named export from src/components/mixins/descriptors.js and call it
directly. The mixin's method becomes a one-liner pointing to the
same export, so the existing 27+ Options API consumers still work
unchanged.

Standard transforms: mapGetters → store.getters via computed, methods
→ top-level arrow functions, watch.active → watch with toRef, mounted
→ onMounted, mixins: [modalMixin] → useModal(toRef(props, 'active'),
emit). Reactive blocks (assignation, hasThumbnail, priority…) stay as
reactive(); union becomes a ref. Replace dynamic computed lookups
(this[`${entityType}MetadataDescriptors`]) with explicit lookup
tables (validationColumnsByEntity, metadataDescriptorsByEntity,
searchTextByEntity).

Cleanups per CLAUDE.md:
- Pull static option arrays out of the `general` reactive object
  (operatorOptions, taskTypeOperatorOptions, booleanOptions,
  checklistOptions, unionOptions) up to module scope as plain
  constants — they never change. Update the template to reference
  them directly. taskTypeOperatorOptions aliases operatorOptions
  (they were identical).
- Replace the long if/else chain in setFiltersFromCurrentQuery with
  a filterDispatchByType lookup map.
- Add // Static options / // State / // Computed / // Functions /
  // Watchers / // Lifecycle section comments.

CSS:
- Drop dead .field { margin-top: 0; margin-bottom: 0 } rule (no
  class="field" element at this component's scope).
- Drop dead .descriptor-text-value nested rule (class never used in
  the template).
- Add a 768px responsive block — the modal keeps its custom shell
  rather than wrapping in BaseModal, so it doesn't inherit
  BaseModal's mobile defaults. Mirror them locally (margin/max-height,
  box padding, title font) and let the multi-combobox filter rows
  flex-wrap on narrow screens.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/components/mixins/descriptors.js       |   40 +-
 src/components/modals/BuildFilterModal.vue | 1274 ++++++++++----------
 2 files changed, 641 insertions(+), 673 deletions(-)

diff --git a/src/components/mixins/descriptors.js b/src/components/mixins/descriptors.js
index 8bc1c99a05..9eaa3c883f 100644
--- a/src/components/mixins/descriptors.js
+++ b/src/components/mixins/descriptors.js
@@ -8,6 +8,26 @@ import { mapGetters } from 'vuex'
 // for every row. Cache keyed by descriptor.id, cleared when it grows too large.
 const _checklistValuesCache = new Map()
 
+export const getDescriptorChecklistValues = descriptor => {
+  const cached = _checklistValuesCache.get(descriptor.id)
+  if (cached) return cached
+  const values = descriptor.choices.reduce((result, choice) => {
+    if (choice && typeof choice === 'string' && choice.startsWith('[x] ')) {
+      result.push({ text: choice.slice(4), checked: true })
+    } else if (
+      choice &&
+      typeof choice === 'string' &&
+      choice.startsWith('[ ] ')
+    ) {
+      result.push({ text: choice.slice(4), checked: false })
+    }
+    return result
+  }, [])
+  const result = values.length === descriptor.choices.length ? values : []
+  _checklistValuesCache.set(descriptor.id, result)
+  return result
+}
+
 export const descriptorMixin = {
   emits: [
     'add-metadata',
@@ -173,25 +193,7 @@ export const descriptorMixin = {
       }
     },
 
-    getDescriptorChecklistValues(descriptor) {
-      const cached = _checklistValuesCache.get(descriptor.id)
-      if (cached) return cached
-      const values = descriptor.choices.reduce((result, choice) => {
-        if (choice && typeof choice === 'string' && choice.startsWith('[x] ')) {
-          result.push({ text: choice.slice(4), checked: true })
-        } else if (
-          choice &&
-          typeof choice === 'string' &&
-          choice.startsWith('[ ] ')
-        ) {
-          result.push({ text: choice.slice(4), checked: false })
-        }
-        return result
-      }, [])
-      const result = values.length === descriptor.choices.length ? values : []
-      _checklistValuesCache.set(descriptor.id, result)
-      return result
-    },
+    getDescriptorChecklistValues,
 
     getMetadataChecklistValues(descriptor, entity) {
       let values
diff --git a/src/components/modals/BuildFilterModal.vue b/src/components/modals/BuildFilterModal.vue
index 63e34f136f..96fc7947a6 100644
--- a/src/components/modals/BuildFilterModal.vue
+++ b/src/components/modals/BuildFilterModal.vue
@@ -15,7 +15,7 @@
 
         <combobox
           class="flexrow-item"
-          :options="general.unionOptions"
+          :options="unionOptions"
           locale-key-prefix="entities.build_filter."
           v-model="union"
         />
@@ -27,7 +27,7 @@
         <div class="flexrow asset-type-filter" v-if="isAssets">
           <combobox
             class="flexrow-item"
-            :options="general.operatorOptions"
+            :options="operatorOptions"
             locale-key-prefix="entities.build_filter."
             v-model="assetTypeFilters.operator"
           />
@@ -54,7 +54,7 @@
           />
           <combobox
             class="flexrow-item"
-            :options="general.taskTypeOperatorOptions"
+            :options="taskTypeOperatorOptions"
             @update:model-value="onTaskTypeOperatorChanged(taskTypeFilter)"
             locale-key-prefix="entities.build_filter."
             v-model="taskTypeFilter.operator"
@@ -109,14 +109,14 @@
 
             <combobox
               class="flexrow-item"
-              :options="general.checklistOptions"
+              :options="checklistOptions"
               locale-key-prefix="entities.build_filter."
               v-model="descriptorFilter.values[0].checked"
               v-if="descriptorFilter.is_checklist"
             />
             <combobox
               class="flexrow-item"
-              :options="general.booleanOptions"
+              :options="booleanOptions"
               locale-key-prefix="entities.build_filter."
               v-model="descriptorFilter.values[0]"
               v-else-if="
@@ -125,7 +125,7 @@
             />
             <combobox
               class="flexrow-item"
-              :options="general.operatorOptions"
+              :options="operatorOptions"
               locale-key-prefix="entities.build_filter."
               @update:model-value="
                 operator => onOperatorChanged(operator, descriptorFilter)
@@ -306,680 +306,628 @@
   </div>
 </template>
 
-<script>
-import { mapGetters } from 'vuex'
+<script setup>
+import { v4 as uuidv4 } from 'uuid'
+import { computed, onMounted, reactive, ref, toRef, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useStore } from 'vuex'
 
-import { modalMixin } from '@/components/modals/base_modal'
+import { getDescriptorChecklistValues } from '@/components/mixins/descriptors'
+import { useModal } from '@/composables/modal'
 import { getFilters } from '@/lib/filtering'
 import { sortPeople } from '@/lib/sorting'
-import { descriptorMixin } from '@/components/mixins/descriptors'
 
+import ModalFooter from '@/components/modals/ModalFooter.vue'
 import ButtonSimple from '@/components/widgets/ButtonSimple.vue'
 import Combobox from '@/components/widgets/Combobox.vue'
 import ComboboxStatus from '@/components/widgets/ComboboxStatus.vue'
 import ComboboxStyled from '@/components/widgets/ComboboxStyled.vue'
 import ComboboxTaskType from '@/components/widgets/ComboboxTaskType.vue'
 import MetadataField from '@/components/widgets/MetadataField.vue'
-import ModalFooter from '@/components/modals/ModalFooter.vue'
 import PeopleField from '@/components/widgets/PeopleField.vue'
 
-import { v4 as uuidv4 } from 'uuid'
+const { t } = useI18n()
+const store = useStore()
+
+const props = defineProps({
+  active: { type: Boolean, default: false },
+  entityType: { type: String, default: 'asset' }
+})
+
+const emit = defineEmits(['cancel', 'confirm'])
+
+useModal(toRef(props, 'active'), emit)
+
+// Static option arrays — extracted from data() at module scope so
+// they're not needlessly reactive.
+
+const operatorOptions = [
+  { label: 'equal', value: '=' },
+  { label: 'not_equal', value: '=-' },
+  { label: 'in', value: 'in' }
+]
+const taskTypeOperatorOptions = operatorOptions
+const booleanOptions = [
+  { label: 'checked', value: 'true' },
+  { label: 'not_checked', value: '-true' }
+]
+const checklistOptions = [
+  { label: 'checked', value: true },
+  { label: 'not_checked', value: false }
+]
+const unionOptions = [
+  { label: 'union_and', value: 'and' },
+  { label: 'union_or', value: 'or' }
+]
+const priorityOptions = [
+  { label: 'priority.normal', value: '0' },
+  { label: 'priority.high', value: '1' },
+  { label: 'priority.very_high', value: '2' },
+  { label: 'priority.emergency', value: '3' }
+]
+
+// State
+
+const assetTypeFilters = reactive({ operator: '=', value: '' })
+const assignation = reactive({
+  person: null,
+  taskTypeId: '',
+  value: 'nofilter',
+  options: [
+    { label: 'no_filter', value: 'nofilter' },
+    { label: 'assigned_to', value: 'assignedto' },
+    { label: 'not_assigned_to', value: '-assignedto' },
+    { label: 'assignation_exists_for', value: 'assigned' },
+    { label: 'no_assignation_for', value: 'unassigned' }
+  ]
+})
+const hasThumbnail = reactive({
+  value: 'nofilter',
+  options: [
+    { label: 'no_filter', value: 'nofilter' },
+    { label: 'with_thumbnail', value: 'withthumbnail' },
+    { label: 'without_thumbnail', value: '-withthumbnail' }
+  ]
+})
+const priority = reactive({ taskTypeId: '', value: '-1' })
+const readyFor = reactive({ taskTypeId: '' })
+const isAssetsReady = reactive({
+  value: 'nofilter',
+  taskTypeId: '',
+  options: [
+    { label: 'no_filter', value: 'nofilter' },
+    { label: 'assets_ready', value: 'assetsready' },
+    { label: 'assets_not_ready', value: '-assetsready' }
+  ]
+})
+const metadataDescriptorFilters = reactive({ values: [] })
+const taskTypeFilters = reactive({ values: [] })
+const union = ref('and')
+
+// Computed
+
+const assetMetadataDescriptors = computed(
+  () => store.getters.assetMetadataDescriptors
+)
+const assetTypeMap = computed(() => store.getters.assetTypeMap)
+const assetSearchText = computed(() => store.getters.assetSearchText)
+const assetValidationColumns = computed(
+  () => store.getters.assetValidationColumns
+)
+const currentProduction = computed(() => store.getters.currentProduction)
+const editSearchText = computed(() => store.getters.editSearchText)
+const editMetadataDescriptors = computed(
+  () => store.getters.editMetadataDescriptors
+)
+const editValidationColumns = computed(
+  () => store.getters.editValidationColumns
+)
+const episodeSearchText = computed(() => store.getters.episodeSearchText)
+const episodeMetadataDescriptors = computed(
+  () => store.getters.episodeMetadataDescriptors
+)
+const episodeValidationColumns = computed(
+  () => store.getters.episodeValidationColumns
+)
+const isCurrentUserVendor = computed(() => store.getters.isCurrentUserVendor)
+const people = computed(() => store.getters.people)
+const personMap = computed(() => store.getters.personMap)
+const productionAssetTypes = computed(() => store.getters.productionAssetTypes)
+const productionTaskStatuses = computed(
+  () => store.getters.productionTaskStatuses
+)
+const productionTaskTypes = computed(() => store.getters.productionTaskTypes)
+const productionShotTaskTypes = computed(
+  () => store.getters.productionShotTaskTypes
+)
+const sequenceSearchText = computed(() => store.getters.sequenceSearchText)
+const sequenceMetadataDescriptors = computed(
+  () => store.getters.sequenceMetadataDescriptors
+)
+const sequenceValidationColumns = computed(
+  () => store.getters.sequenceValidationColumns
+)
+const shotMetadataDescriptors = computed(
+  () => store.getters.shotMetadataDescriptors
+)
+const shotSearchText = computed(() => store.getters.shotSearchText)
+const shotValidationColumns = computed(
+  () => store.getters.shotValidationColumns
+)
+const taskTypeMap = computed(() => store.getters.taskTypeMap)
+const taskStatusMap = computed(() => store.getters.taskStatusMap)
+
+const isAssets = computed(() => props.entityType === 'asset')
+const isShots = computed(() => props.entityType === 'shot')
+const isAssetsOnly = computed(
+  () => currentProduction.value?.production_type === 'assets'
+)
+
+const taskStatuses = computed(() =>
+  productionTaskStatuses.value.filter(status => !status.for_concept)
+)
+
+const validationColumnsByEntity = {
+  asset: assetValidationColumns,
+  edit: editValidationColumns,
+  episode: episodeValidationColumns,
+  sequence: sequenceValidationColumns,
+  shot: shotValidationColumns
+}
 
-export default {
-  name: 'build-filter-modal',
-
-  mixins: [modalMixin, descriptorMixin],
-
-  components: {
-    ButtonSimple,
-    Combobox,
-    ComboboxStatus,
-    ComboboxStyled,
-    ComboboxTaskType,
-    MetadataField,
-    ModalFooter,
-    PeopleField
-  },
-
-  props: {
-    active: {
-      type: Boolean,
-      default: false
-    },
-    entityType: {
-      type: String,
-      default: 'asset'
-    }
-  },
-
-  emits: ['cancel', 'confirm'],
-
-  data() {
-    return {
-      assetTypeFilters: {
-        operator: '=',
-        value: ''
-      },
-      assignation: {
-        person: null,
-        taskTypeId: '',
-        value: 'nofilter',
-        options: [
-          { label: 'no_filter', value: 'nofilter' },
-          { label: 'assigned_to', value: 'assignedto' },
-          { label: 'not_assigned_to', value: '-assignedto' },
-          { label: 'assignation_exists_for', value: 'assigned' },
-          { label: 'no_assignation_for', value: 'unassigned' }
-        ]
-      },
-      general: {
-        operatorOptions: [
-          { label: 'equal', value: '=' },
-          { label: 'not_equal', value: '=-' },
-          { label: 'in', value: 'in' }
-        ],
-        booleanOptions: [
-          { label: 'checked', value: 'true' },
-          { label: 'not_checked', value: '-true' }
-        ],
-        checklistOptions: [
-          { label: 'checked', value: true },
-          { label: 'not_checked', value: false }
-        ],
-        taskTypeOperatorOptions: [
-          { label: 'equal', value: '=' },
-          { label: 'not_equal', value: '=-' },
-          { label: 'in', value: 'in' }
-        ],
-        unionOptions: [
-          { label: 'union_and', value: 'and' },
-          { label: 'union_or', value: 'or' }
-        ]
-      },
-      hasThumbnail: {
-        value: 'nofilter',
-        options: [
-          { label: 'no_filter', value: 'nofilter' },
-          { label: 'with_thumbnail', value: 'withthumbnail' },
-          { label: 'without_thumbnail', value: '-withthumbnail' }
-        ]
-      },
-      priorityOptions: [
-        { label: 'priority.normal', value: '0' },
-        { label: 'priority.high', value: '1' },
-        { label: 'priority.very_high', value: '2' },
-        { label: 'priority.emergency', value: '3' }
-      ],
-      priority: {
-        taskTypeId: '',
-        value: '-1'
-      },
-      readyFor: {
-        taskTypeId: ''
-      },
-      isAssetsReady: {
-        value: 'nofilter',
-        taskTypeId: '',
-        options: [
-          { label: 'no_filter', value: 'nofilter' },
-          { label: 'assets_ready', value: 'assetsready' },
-          { label: 'assets_not_ready', value: '-assetsready' }
-        ]
-      },
-      metadataDescriptorFilters: {
-        values: []
-      },
-      taskTypeFilters: {
-        values: []
-      },
-      union: 'and'
-    }
-  },
-
-  mounted() {
-    this.reset()
-    this.setFiltersFromCurrentQuery()
-  },
-
-  computed: {
-    ...mapGetters([
-      'assetMetadataDescriptors',
-      'assetTypeMap',
-      'assetSearchText',
-      'assetValidationColumns',
-      'currentProduction',
-      'editSearchText',
-      'editMetadataDescriptors',
-      'editValidationColumns',
-      'episodeSearchText',
-      'episodeMetadataDescriptors',
-      'episodeValidationColumns',
-      'isCurrentUserVendor',
-      'people',
-      'personMap',
-      'productionAssetTypes',
-      'productionTaskStatuses',
-      'productionTaskTypes',
-      'productionShotTaskTypes',
-      'sequenceSearchText',
-      'sequenceMetadataDescriptors',
-      'sequenceValidationColumns',
-      'shotMetadataDescriptors',
-      'shotSearchText',
-      'shotValidationColumns',
-      'taskTypeMap',
-      'taskStatusMap'
-    ]),
-
-    isAssets() {
-      return this.entityType === 'asset'
-    },
-    isShots() {
-      return this.entityType === 'shot'
-    },
-
-    isAssetsOnly() {
-      return this.currentProduction?.production_type === 'assets'
-    },
-
-    assetTypeOptions() {
-      return [
-        { label: this.$t('entities.build_filter.all_types'), value: '-' },
-        ...this.productionAssetTypes
-          .filter(assetType => assetType !== undefined)
-          .map(assetType => ({
-            label: assetType.name,
-            value: assetType.id
-          }))
-      ]
-    },
-
-    taskStatuses() {
-      return this.productionTaskStatuses.filter(status => !status.for_concept)
-    },
-
-    taskTypeListWithAll() {
-      return [
-        {
-          id: '',
-          color: '#999',
-          name: this.$t('main.all')
-        }
-      ].concat(this.taskTypeList)
-    },
-
-    taskTypeList() {
-      return this[`${this.entityType}ValidationColumns`].map(taskTypeId =>
-        this.taskTypeMap.get(taskTypeId)
-      )
-    },
-
-    readyForTaskTypeList() {
-      return [
-        {
-          id: '',
-          color: '#999',
-          name: this.$t('news.all')
-        }
-      ].concat(this.productionShotTaskTypes)
-    },
-
-    team() {
-      return sortPeople(
-        this.currentProduction?.team
-          .map(personId => this.personMap.get(personId))
-          .filter(person => person && !person.is_bot) ?? []
-      )
-    },
-
-    descriptorOptions() {
-      return this.metadataDescriptors.map(descriptor => ({
-        label: descriptor.name,
-        value: descriptor.id
-      }))
-    },
-
-    metadataDescriptors() {
-      return this[`${this.entityType}MetadataDescriptors`]
-    },
-
-    validDescriptorFilters() {
-      return this.metadataDescriptorFilters.values.filter(descriptor =>
-        this.getDescriptor(descriptor.id)
-      )
-    }
-  },
-
-  methods: {
-    applyFilter() {
-      const query = this.buildFilter()
-      this.$emit('confirm', query)
-    },
-
-    buildFilter() {
-      let query = ''
-      query = this.applyAssetTypeChoice(query)
-      query = this.applyTaskTypeChoice(query)
-      query = this.applyDescriptorChoice(query)
-      query = this.applyAssignationChoice(query)
-      query = this.applyThumbnailChoice(query)
-      query = this.applyPriorityChoice(query)
-      query = this.applyReadyForChoice(query)
-      query = this.applyAssetsReadyChoice(query)
-      query = this.applyUnionChoice(query)
-      return query.trim()
-    },
-
-    applyAssetTypeChoice(query) {
-      const value = this.assetTypeFilters.value
-      if (value && value !== '-') {
-        let operator = '=['
-        if (this.assetTypeFilters.operator === '=-') operator = '=[-'
-        const assetType = this.assetTypeMap.get(value)
-        query += ` type${operator}${assetType.name}]`
-      }
-      return query
-    },
-
-    applyTaskTypeChoice(query) {
-      this.taskTypeFilters.values.forEach(taskTypeFilter => {
-        let operator = '=['
-        if (taskTypeFilter.operator === '=-') operator = '=[-'
-        const taskType = this.taskTypeMap.get(taskTypeFilter.id)
-        const value = taskTypeFilter.values
-          .map(statusId => {
-            return this.taskStatusMap.get(statusId).short_name
-          })
-          .join(',')
-        query += ` [${taskType.name}]${operator}${value}]`
-      })
-      return query
-    },
-
-    applyDescriptorChoice(query) {
-      this.validDescriptorFilters.forEach(descriptorFilter => {
-        let operator = '=['
-        let value
-        if (descriptorFilter.is_checklist) {
-          value = descriptorFilter.values[0].text
-          value += descriptorFilter.values[0].checked ? ':true' : ':false'
-        } else {
-          if (descriptorFilter.operator === '=-') operator = '=[-'
-          const values = descriptorFilter.values
-          if (values.length === 0 || values[0] === '') {
-            const options = this.getDescriptorChoiceOptions(
-              descriptorFilter.id,
-              descriptorFilter.is_checklist
-            )
-            value = options[0]?.value ?? ''
-          } else {
-            value = descriptorFilter.values.join(',')
-          }
-        }
-        const descriptor = this.getDescriptor(descriptorFilter.id)
-        query += ` [${descriptor.name}]${operator}${value}]`
-      })
-      return query
-    },
-
-    applyAssignationChoice(query) {
-      if (this.assignation.value !== 'nofilter') {
-        if (this.assignation.person) {
-          let value = this.assignation.person.name
-          const taskType = this.taskTypeMap.get(this.assignation.taskTypeId)
-          if (this.assignation.value === '-assignedto') value = `-${value}`
-          if (taskType) {
-            query += ` assignedto[${taskType.name}]=[${value}]`
-          } else {
-            query += ` assignedto[]=[${value}]`
-          }
-        } else if (this.assignation.taskTypeId) {
-          const taskType = this.taskTypeMap.get(this.assignation.taskTypeId)
-          const value =
-            this.assignation.value === 'assigned' ? 'assigned' : 'unassigned'
-          query += ` [${taskType.name}]=${value}`
-        }
-      }
-      return query
-    },
+const metadataDescriptorsByEntity = {
+  asset: assetMetadataDescriptors,
+  edit: editMetadataDescriptors,
+  episode: episodeMetadataDescriptors,
+  sequence: sequenceMetadataDescriptors,
+  shot: shotMetadataDescriptors
+}
 
-    applyThumbnailChoice(query) {
-      if (this.hasThumbnail.value !== 'nofilter') {
-        query += ` ${this.hasThumbnail.value}`
-      }
-      return query
-    },
-
-    applyPriorityChoice(query) {
-      if (this.priority.taskTypeId !== '' && this.priority.value !== '-1') {
-        const taskType = this.taskTypeMap.get(this.priority.taskTypeId)
-        const value = this.priority.value
-        query += ` priority-[${taskType.name.toLowerCase()}]=${value}`
-      }
-      return query
-    },
+const searchTextByEntity = {
+  asset: assetSearchText,
+  edit: editSearchText,
+  episode: episodeSearchText,
+  sequence: sequenceSearchText,
+  shot: shotSearchText
+}
 
-    applyReadyForChoice(query) {
-      if (this.readyFor.taskTypeId !== '') {
-        const taskType = this.taskTypeMap.get(this.readyFor.taskTypeId)
-        query += ` readyfor=[${taskType.name.toLowerCase()}]`
-      }
-      return query
-    },
-
-    applyAssetsReadyChoice(query) {
-      if (this.isAssetsReady.value !== 'nofilter') {
-        if (this.isAssetsReady.taskTypeId.length === 0) {
-          this.isAssetsReady.taskTypeId = this.taskTypeList[0].id
-        }
-        const taskType = this.taskTypeMap.get(this.isAssetsReady.taskTypeId)
-        const operator = this.isAssetsReady.value === 'assetsready' ? '' : '-'
-        query += ` assetsready=[${operator}${taskType.name}]`
-      }
-      return query
-    },
+const taskTypeList = computed(() =>
+  validationColumnsByEntity[props.entityType].value.map(taskTypeId =>
+    taskTypeMap.value.get(taskTypeId)
+  )
+)
+
+const taskTypeListWithAll = computed(() => [
+  { id: '', color: '#999', name: t('main.all') },
+  ...taskTypeList.value
+])
+
+const readyForTaskTypeList = computed(() => [
+  { id: '', color: '#999', name: t('news.all') },
+  ...productionShotTaskTypes.value
+])
+
+const team = computed(() =>
+  sortPeople(
+    currentProduction.value?.team
+      .map(personId => personMap.value.get(personId))
+      .filter(person => person && !person.is_bot) ?? []
+  )
+)
+
+const metadataDescriptors = computed(
+  () => metadataDescriptorsByEntity[props.entityType].value
+)
+
+const descriptorOptions = computed(() =>
+  metadataDescriptors.value.map(descriptor => ({
+    label: descriptor.name,
+    value: descriptor.id
+  }))
+)
+
+const assetTypeOptions = computed(() => [
+  { label: t('entities.build_filter.all_types'), value: '-' },
+  ...productionAssetTypes.value
+    .filter(assetType => assetType !== undefined)
+    .map(assetType => ({ label: assetType.name, value: assetType.id }))
+])
+
+const getDescriptor = descriptorId =>
+  metadataDescriptors.value.find(d => d.id === descriptorId)
+
+const validDescriptorFilters = computed(() =>
+  metadataDescriptorFilters.values.filter(descriptor =>
+    getDescriptor(descriptor.id)
+  )
+)
+
+// Functions
+
+const getDescriptorChoiceOptions = (descriptorId, isChecklist) => {
+  const descriptor = getDescriptor(descriptorId)
+  if (!isChecklist) {
+    return descriptor.choices.map(choice => ({ label: choice, value: choice }))
+  }
+  return getDescriptorChecklistValues(descriptor).map(choice => ({
+    label: choice.text,
+    value: choice.text
+  }))
+}
 
-    applyUnionChoice(query) {
-      if (this.union === 'or') {
-        query = `+(${query.trim()})`
-      }
-      return query
-    },
+const applyAssetTypeChoice = query => {
+  const value = assetTypeFilters.value
+  if (value && value !== '-') {
+    let operator = '=['
+    if (assetTypeFilters.operator === '=-') operator = '=[-'
+    const assetType = assetTypeMap.value.get(value)
+    query += ` type${operator}${assetType.name}]`
+  }
+  return query
+}
 
-    // Task types
+const applyTaskTypeChoice = query => {
+  taskTypeFilters.values.forEach(taskTypeFilter => {
+    let operator = '=['
+    if (taskTypeFilter.operator === '=-') operator = '=[-'
+    const taskType = taskTypeMap.value.get(taskTypeFilter.id)
+    const value = taskTypeFilter.values
+      .map(statusId => taskStatusMap.value.get(statusId).short_name)
+      .join(',')
+    query += ` [${taskType.name}]${operator}${value}]`
+  })
+  return query
+}
 
-    addTaskTypeFilter() {
-      const filter = {
-        localId: uuidv4(),
-        id: this.taskTypeList[0].id,
-        operator: '=',
-        values: [this.taskStatuses[0].id]
-      }
-      this.taskTypeFilters.values.push(filter)
-      return filter
-    },
-
-    addInTaskTypeFilter(taskTypeFilter) {
-      taskTypeFilter.values.push(this.taskStatuses[0].id)
-    },
-
-    removeTaskTypeFilter(taskTypeFilter) {
-      this.taskTypeFilters.values = this.taskTypeFilters.values.filter(
-        f => f.localId !== taskTypeFilter.localId
-      )
-    },
-
-    addInDescriptorFilter(descriptorFilter) {
-      const descriptor = this.getDescriptor(descriptorFilter.id)
-      const value = descriptor.choices.length ? descriptor.choices[0] : ''
-      descriptorFilter.values.push(value)
-    },
-
-    // Descriptors
-
-    onDescriptorChanged(descriptorFilter, filter) {
-      const descriptor = this.getDescriptor(filter)
-
-      descriptorFilter.is_checklist = false
-      if (descriptor.choices.length > 0) {
-        const checklistValues = this.getDescriptorChecklistValues(descriptor)
-        if (checklistValues.length > 0) {
-          descriptorFilter.is_checklist = true
-          descriptorFilter.values = [checklistValues[0]]
-          descriptorFilter.operator = '='
-        } else {
-          descriptorFilter.values = [descriptor.choices[0]]
-        }
-      } else if (descriptor.data_type === 'boolean') {
-        descriptorFilter.values = ['-true']
-      } else {
-        descriptorFilter.values = ['']
-      }
-    },
-
-    addDescriptorFilter() {
-      const descriptor = this.getDescriptor(this.descriptorOptions[0].value)
-      const values = []
-      let isChecklist = false
-      if (descriptor.choices.length > 0) {
-        const checklistValues = this.getDescriptorChecklistValues(descriptor)
-        if (checklistValues.length > 0) {
-          isChecklist = true
-          values.push({
-            ...checklistValues[0],
-            checked: true
-          })
-        } else {
-          values.push(descriptor.choices[0])
-        }
-      } else if (descriptor.data_type === 'boolean') {
-        values.push('-true')
-      } else {
-        values.push('')
-      }
-      const filter = {
-        localId: uuidv4(),
-        id: this.descriptorOptions[0].value,
-        operator: '=',
-        values,
-        is_checklist: isChecklist
-      }
-      this.metadataDescriptorFilters.values.push(filter)
-      return filter
-    },
-
-    removeDescriptorFilter(descriptorFilter) {
-      this.metadataDescriptorFilters.values =
-        this.metadataDescriptorFilters.values.filter(
-          f => f.localId !== descriptorFilter.localId
+const applyDescriptorChoice = query => {
+  validDescriptorFilters.value.forEach(descriptorFilter => {
+    let operator = '=['
+    let value
+    if (descriptorFilter.is_checklist) {
+      value = descriptorFilter.values[0].text
+      value += descriptorFilter.values[0].checked ? ':true' : ':false'
+    } else {
+      if (descriptorFilter.operator === '=-') operator = '=[-'
+      const values = descriptorFilter.values
+      if (values.length === 0 || values[0] === '') {
+        const options = getDescriptorChoiceOptions(
+          descriptorFilter.id,
+          descriptorFilter.is_checklist
         )
-    },
-
-    getDescriptor(descriptorId) {
-      return this.metadataDescriptors.find(d => d.id === descriptorId)
-    },
-
-    getDescriptorChoiceOptions(descriptorId, isChecklist) {
-      const descriptor = this.getDescriptor(descriptorId)
-      if (!isChecklist) {
-        return descriptor.choices.map(choice => ({
-          label: choice,
-          value: choice
-        }))
+        value = options[0]?.value ?? ''
       } else {
-        return this.getDescriptorChecklistValues(descriptor).map(choice => ({
-          label: choice.text,
-          value: choice.text
-        }))
+        value = descriptorFilter.values.join(',')
       }
-    },
+    }
+    const descriptor = getDescriptor(descriptorFilter.id)
+    query += ` [${descriptor.name}]${operator}${value}]`
+  })
+  return query
+}
 
-    onOperatorChanged(operator, descriptorFilter) {
-      if (operator !== 'in') {
-        descriptorFilter.values = [descriptorFilter.values[0]]
-      }
-    },
-
-    // Helpers to set filters from search query
-
-    setFiltersFromCurrentQuery() {
-      const searchQuery = this[`${this.entityType}SearchText`]
-      if (searchQuery) {
-        const filters = getFilters({
-          entryIndex: [], // entry list is not needed,
-          assetTypes: this.productionAssetTypes,
-          taskTypes: this.productionTaskTypes,
-          taskStatuses: this.taskStatuses,
-          descriptors: this.metadataDescriptors,
-          persons: this.people,
-          query: searchQuery
-        })
-        filters.forEach(filter => {
-          if (filter.type === 'assettype') {
-            this.setFiltersFromAssetTypeQuery(filter)
-          } else if (filter.type === 'status') {
-            this.setFiltersFromStatusQuery(filter)
-          } else if (filter.type === 'descriptor') {
-            this.setFiltersFromDescriptorQuery(filter)
-          } else if (filter.type === 'assignation') {
-            this.setFiltersFromAssignationQuery(filter)
-          } else if (filter.type === 'assignedto') {
-            this.setFiltersFromAssignedToQuery(filter)
-          } else if (filter.type === 'thumbnail') {
-            this.setFiltersFromThumbnailQuery(filter)
-          } else if (filter.type === 'priority') {
-            this.setFiltersFromPriorityQuery(filter)
-          } else if (filter.type === 'readyfor') {
-            this.setFiltersFromReadyForQuery(filter)
-          } else if (filter.type === 'assetsready') {
-            this.setFiltersFromAssetsReadyQuery(filter)
-          }
-        })
-        if (filters.union) {
-          this.setUnion()
-        }
-      }
-    },
-
-    setFiltersFromAssetTypeQuery(filter) {
-      this.assetTypeFilters.operator = filter.excluding ? '=-' : '='
-      this.assetTypeFilters.value = filter.assetType.id
-    },
-
-    setFiltersFromStatusQuery(filter) {
-      let operator = '='
-      if (filter.taskStatuses.length > 1) {
-        operator = 'in'
-      } else if (filter.excluding) {
-        operator = '=-'
-      }
-      this.taskTypeFilters.values.push({
-        localId: uuidv4(),
-        id: filter.taskType.id,
-        operator,
-        values: filter.taskStatuses
-      })
-    },
-
-    setFiltersFromDescriptorQuery(filter) {
-      let operator = '='
-      let isChecklist = false
-      let values = filter.values
-      if (filter.values.length > 1) {
-        operator = 'in'
+const applyAssignationChoice = query => {
+  if (assignation.value !== 'nofilter') {
+    if (assignation.person) {
+      let value = assignation.person.name
+      const taskType = taskTypeMap.value.get(assignation.taskTypeId)
+      if (assignation.value === '-assignedto') value = `-${value}`
+      if (taskType) {
+        query += ` assignedto[${taskType.name}]=[${value}]`
       } else {
-        if (filter.values[0].endsWith(':true')) {
-          isChecklist = true
-          values = [
-            {
-              text: filter.values[0].replace(/:true$/, ''),
-              checked: true
-            }
-          ]
-        } else if (filter.values[0].endsWith(':false')) {
-          isChecklist = true
-          values = [
-            {
-              text: filter.values[0].replace(/:false$/, ''),
-              checked: false
-            }
-          ]
-        } else if (filter.excluding) {
-          if (filter.descriptor.data_type === 'boolean') {
-            values = [`-${filter.values[0]}`]
-          } else {
-            operator = '=-'
-          }
-        }
+        query += ` assignedto[]=[${value}]`
       }
-      this.metadataDescriptorFilters.values.push({
-        localId: uuidv4(),
-        id: filter.descriptor.id,
-        operator,
-        values,
-        is_checklist: isChecklist
-      })
-    },
-
-    setFiltersFromAssignationQuery(filter) {
-      if (filter.assigned) {
-        this.assignation.value = 'assigned'
-      } else {
-        this.assignation.value = 'unassigned'
-      }
-      this.assignation.taskTypeId = filter.taskType.id
-    },
-
-    setFiltersFromAssignedToQuery(filter) {
-      this.assignation.value = filter.excluding ? '-assignedto' : 'assignedto'
-      this.assignation.person = this.people.find(
-        p => p.id === filter.personIds[0]
-      )
-      this.assignation.taskTypeId = filter.taskType?.id
-    },
-
-    setFiltersFromThumbnailQuery(filter) {
-      if (filter.excluding) {
-        this.hasThumbnail.value = '-withthumbnail'
-      } else {
-        this.hasThumbnail.value = 'withthumbnail'
-      }
-    },
+    } else if (assignation.taskTypeId) {
+      const taskType = taskTypeMap.value.get(assignation.taskTypeId)
+      const value = assignation.value === 'assigned' ? 'assigned' : 'unassigned'
+      query += ` [${taskType.name}]=${value}`
+    }
+  }
+  return query
+}
 
-    setFiltersFromPriorityQuery(filter) {
-      this.priority.taskTypeId = filter.taskTypeId
-      this.priority.value = String(filter.value)
-    },
+const applyThumbnailChoice = query => {
+  if (hasThumbnail.value !== 'nofilter') {
+    query += ` ${hasThumbnail.value}`
+  }
+  return query
+}
 
-    setFiltersFromReadyForQuery(filter) {
-      this.readyFor.taskTypeId = filter.value
-    },
+const applyPriorityChoice = query => {
+  if (priority.taskTypeId !== '' && priority.value !== '-1') {
+    const taskType = taskTypeMap.value.get(priority.taskTypeId)
+    query += ` priority-[${taskType.name.toLowerCase()}]=${priority.value}`
+  }
+  return query
+}
 
-    setFiltersFromAssetsReadyQuery(filter) {
-      this.isAssetsReady.taskTypeId = filter.value
-      this.isAssetsReady.value = filter.excluding
-        ? '-assetsready'
-        : 'assetsready'
-    },
+const applyReadyForChoice = query => {
+  if (readyFor.taskTypeId !== '') {
+    const taskType = taskTypeMap.value.get(readyFor.taskTypeId)
+    query += ` readyfor=[${taskType.name.toLowerCase()}]`
+  }
+  return query
+}
 
-    setUnion() {
-      this.union = 'or'
-    },
+const applyAssetsReadyChoice = query => {
+  if (isAssetsReady.value !== 'nofilter') {
+    if (isAssetsReady.taskTypeId.length === 0) {
+      isAssetsReady.taskTypeId = taskTypeList.value[0].id
+    }
+    const taskType = taskTypeMap.value.get(isAssetsReady.taskTypeId)
+    const operator = isAssetsReady.value === 'assetsready' ? '' : '-'
+    query += ` assetsready=[${operator}${taskType.name}]`
+  }
+  return query
+}
 
-    // General
+const applyUnionChoice = query => {
+  if (union.value === 'or') {
+    query = `+(${query.trim()})`
+  }
+  return query
+}
 
-    onTaskTypeOperatorChanged(taskTypeFilter) {
-      if (taskTypeFilter.operator !== 'in') {
-        taskTypeFilter.values = [taskTypeFilter.values[0]]
-      }
-    },
-
-    reset() {
-      this.assignation.value = 'nofilter'
-      this.assignation.person = null
-      this.assignation.taskTypeId = ''
-      this.hasThumbnail.value = 'nofilter'
-      this.metadataDescriptorFilters.values = []
-      this.taskTypeFilters.values = []
-      this.assetTypeFilters.operator = '='
-      this.assetTypeFilters.value = '-'
+const buildFilter = () => {
+  let query = ''
+  query = applyAssetTypeChoice(query)
+  query = applyTaskTypeChoice(query)
+  query = applyDescriptorChoice(query)
+  query = applyAssignationChoice(query)
+  query = applyThumbnailChoice(query)
+  query = applyPriorityChoice(query)
+  query = applyReadyForChoice(query)
+  query = applyAssetsReadyChoice(query)
+  query = applyUnionChoice(query)
+  return query.trim()
+}
+
+const applyFilter = () => {
+  emit('confirm', buildFilter())
+}
+
+// Task types
+
+const addTaskTypeFilter = () => {
+  const filter = {
+    localId: uuidv4(),
+    id: taskTypeList.value[0].id,
+    operator: '=',
+    values: [taskStatuses.value[0].id]
+  }
+  taskTypeFilters.values.push(filter)
+  return filter
+}
+
+const addInTaskTypeFilter = taskTypeFilter => {
+  taskTypeFilter.values.push(taskStatuses.value[0].id)
+}
+
+const removeTaskTypeFilter = taskTypeFilter => {
+  taskTypeFilters.values = taskTypeFilters.values.filter(
+    f => f.localId !== taskTypeFilter.localId
+  )
+}
+
+const addInDescriptorFilter = descriptorFilter => {
+  const descriptor = getDescriptor(descriptorFilter.id)
+  const value = descriptor.choices.length ? descriptor.choices[0] : ''
+  descriptorFilter.values.push(value)
+}
+
+// Descriptors
+
+const onDescriptorChanged = (descriptorFilter, filter) => {
+  const descriptor = getDescriptor(filter)
+  descriptorFilter.is_checklist = false
+  if (descriptor.choices.length > 0) {
+    const checklistValues = getDescriptorChecklistValues(descriptor)
+    if (checklistValues.length > 0) {
+      descriptorFilter.is_checklist = true
+      descriptorFilter.values = [checklistValues[0]]
+      descriptorFilter.operator = '='
+    } else {
+      descriptorFilter.values = [descriptor.choices[0]]
     }
-  },
-
-  watch: {
-    active() {
-      if (this.active) {
-        this.reset()
-        this.assignation.taskTypeId =
-          this.taskTypeList.length > 0 ? this.taskTypeList[0].id : ''
-        this.readyFor.taskTypeId = ''
-        this.priority.taskTypeId = ''
-        this.priority.value = '0'
-        this.setFiltersFromCurrentQuery()
+  } else if (descriptor.data_type === 'boolean') {
+    descriptorFilter.values = ['-true']
+  } else {
+    descriptorFilter.values = ['']
+  }
+}
+
+const addDescriptorFilter = () => {
+  const descriptor = getDescriptor(descriptorOptions.value[0].value)
+  const values = []
+  let isChecklist = false
+  if (descriptor.choices.length > 0) {
+    const checklistValues = getDescriptorChecklistValues(descriptor)
+    if (checklistValues.length > 0) {
+      isChecklist = true
+      values.push({ ...checklistValues[0], checked: true })
+    } else {
+      values.push(descriptor.choices[0])
+    }
+  } else if (descriptor.data_type === 'boolean') {
+    values.push('-true')
+  } else {
+    values.push('')
+  }
+  const filter = {
+    localId: uuidv4(),
+    id: descriptorOptions.value[0].value,
+    operator: '=',
+    values,
+    is_checklist: isChecklist
+  }
+  metadataDescriptorFilters.values.push(filter)
+  return filter
+}
+
+const removeDescriptorFilter = descriptorFilter => {
+  metadataDescriptorFilters.values = metadataDescriptorFilters.values.filter(
+    f => f.localId !== descriptorFilter.localId
+  )
+}
+
+const onOperatorChanged = (operator, descriptorFilter) => {
+  if (operator !== 'in') {
+    descriptorFilter.values = [descriptorFilter.values[0]]
+  }
+}
+
+// Helpers to set filters from search query
+
+const setFiltersFromAssetTypeQuery = filter => {
+  assetTypeFilters.operator = filter.excluding ? '=-' : '='
+  assetTypeFilters.value = filter.assetType.id
+}
+
+const setFiltersFromStatusQuery = filter => {
+  let operator = '='
+  if (filter.taskStatuses.length > 1) operator = 'in'
+  else if (filter.excluding) operator = '=-'
+  taskTypeFilters.values.push({
+    localId: uuidv4(),
+    id: filter.taskType.id,
+    operator,
+    values: filter.taskStatuses
+  })
+}
+
+const setFiltersFromDescriptorQuery = filter => {
+  let operator = '='
+  let isChecklist = false
+  let values = filter.values
+  if (filter.values.length > 1) {
+    operator = 'in'
+  } else {
+    if (filter.values[0].endsWith(':true')) {
+      isChecklist = true
+      values = [{ text: filter.values[0].replace(/:true$/, ''), checked: true }]
+    } else if (filter.values[0].endsWith(':false')) {
+      isChecklist = true
+      values = [
+        { text: filter.values[0].replace(/:false$/, ''), checked: false }
+      ]
+    } else if (filter.excluding) {
+      if (filter.descriptor.data_type === 'boolean') {
+        values = [`-${filter.values[0]}`]
+      } else {
+        operator = '=-'
       }
     }
   }
+  metadataDescriptorFilters.values.push({
+    localId: uuidv4(),
+    id: filter.descriptor.id,
+    operator,
+    values,
+    is_checklist: isChecklist
+  })
+}
+
+const setFiltersFromAssignationQuery = filter => {
+  assignation.value = filter.assigned ? 'assigned' : 'unassigned'
+  assignation.taskTypeId = filter.taskType.id
+}
+
+const setFiltersFromAssignedToQuery = filter => {
+  assignation.value = filter.excluding ? '-assignedto' : 'assignedto'
+  assignation.person = people.value.find(p => p.id === filter.personIds[0])
+  assignation.taskTypeId = filter.taskType?.id
+}
+
+const setFiltersFromThumbnailQuery = filter => {
+  hasThumbnail.value = filter.excluding ? '-withthumbnail' : 'withthumbnail'
+}
+
+const setFiltersFromPriorityQuery = filter => {
+  priority.taskTypeId = filter.taskTypeId
+  priority.value = String(filter.value)
+}
+
+const setFiltersFromReadyForQuery = filter => {
+  readyFor.taskTypeId = filter.value
 }
+
+const setFiltersFromAssetsReadyQuery = filter => {
+  isAssetsReady.taskTypeId = filter.value
+  isAssetsReady.value = filter.excluding ? '-assetsready' : 'assetsready'
+}
+
+const setUnion = () => {
+  union.value = 'or'
+}
+
+const filterDispatchByType = {
+  assettype: setFiltersFromAssetTypeQuery,
+  status: setFiltersFromStatusQuery,
+  descriptor: setFiltersFromDescriptorQuery,
+  assignation: setFiltersFromAssignationQuery,
+  assignedto: setFiltersFromAssignedToQuery,
+  thumbnail: setFiltersFromThumbnailQuery,
+  priority: setFiltersFromPriorityQuery,
+  readyfor: setFiltersFromReadyForQuery,
+  assetsready: setFiltersFromAssetsReadyQuery
+}
+
+const setFiltersFromCurrentQuery = () => {
+  const searchQuery = searchTextByEntity[props.entityType]?.value
+  if (!searchQuery) return
+  const filters = getFilters({
+    entryIndex: [],
+    assetTypes: productionAssetTypes.value,
+    taskTypes: productionTaskTypes.value,
+    taskStatuses: taskStatuses.value,
+    descriptors: metadataDescriptors.value,
+    persons: people.value,
+    query: searchQuery
+  })
+  filters.forEach(filter => {
+    filterDispatchByType[filter.type]?.(filter)
+  })
+  if (filters.union) setUnion()
+}
+
+const onTaskTypeOperatorChanged = taskTypeFilter => {
+  if (taskTypeFilter.operator !== 'in') {
+    taskTypeFilter.values = [taskTypeFilter.values[0]]
+  }
+}
+
+const reset = () => {
+  assignation.value = 'nofilter'
+  assignation.person = null
+  assignation.taskTypeId = ''
+  hasThumbnail.value = 'nofilter'
+  metadataDescriptorFilters.values = []
+  taskTypeFilters.values = []
+  assetTypeFilters.operator = '='
+  assetTypeFilters.value = '-'
+}
+
+// Watchers
+
+watch(
+  () => props.active,
+  active => {
+    if (!active) return
+    reset()
+    assignation.taskTypeId =
+      taskTypeList.value.length > 0 ? taskTypeList.value[0].id : ''
+    readyFor.taskTypeId = ''
+    priority.taskTypeId = ''
+    priority.value = '0'
+    setFiltersFromCurrentQuery()
+  }
+)
+
+// Lifecycle
+
+onMounted(() => {
+  reset()
+  setFiltersFromCurrentQuery()
+})
 </script>
 
 <style lang="scss" scoped>
@@ -1005,19 +953,10 @@ export default {
   text-transform: uppercase;
 }
 
-.field {
-  margin-top: 0;
-  margin-bottom: 0;
-}
-
 .task-type-filter,
 .descriptor-filter {
   margin-bottom: 0.3em;
   align-items: flex-start;
-
-  .descriptor-text-value {
-    padding: 0;
-  }
 }
 
 .value-column {
@@ -1032,4 +971,31 @@ export default {
     line-height: 30px;
   }
 }
+
+@media screen and (max-width: 768px) {
+  .modal-content {
+    margin: 1rem 0.5rem;
+    max-height: calc(100vh - 2rem);
+    width: auto;
+  }
+
+  .box {
+    padding: 1.5em;
+  }
+
+  .title {
+    font-size: 1.5em;
+  }
+
+  .task-type-filter,
+  .descriptor-filter,
+  .assignation-filter,
+  .asset-type-filter {
+    flex-wrap: wrap;
+  }
+
+  .value-column {
+    width: 100%;
+  }
+}
 </style>

From 5825a80777c4203648aceca275a0c52d4d65cf45 Mon Sep 17 00:00:00 2001
From: Frank Rousseau <frank@cg-wire.com>
Date: Mon, 4 May 2026 12:05:46 +0200
Subject: [PATCH 26/28] [cells] Hide number-input spinners in MetadataInput

Add the WebKit/Firefox appearance overrides on .input-editor[type='number']
so the small up/down spinner buttons don't render in the metadata cell.
Same pattern as the SalaryScale page.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/components/cells/MetadataInput.vue | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/src/components/cells/MetadataInput.vue b/src/components/cells/MetadataInput.vue
index 3a985cd2d1..a188cfd808 100644
--- a/src/components/cells/MetadataInput.vue
+++ b/src/components/cells/MetadataInput.vue
@@ -292,6 +292,16 @@ const onNumberFieldKeyDown = event => {
     width: 1.15rem;
   }
 
+  &[type='number'] {
+    -moz-appearance: textfield;
+
+    &::-webkit-inner-spin-button,
+    &::-webkit-outer-spin-button {
+      -webkit-appearance: none;
+      margin: 0;
+    }
+  }
+
   &:active,
   &:focus,
   &:hover {

From c329b2f7a5eca2349d3b5cd63c8eb4dd6e771f0c Mon Sep 17 00:00:00 2001
From: Frank Rousseau <frank@cg-wire.com>
Date: Mon, 4 May 2026 12:06:11 +0200
Subject: [PATCH 27/28] [modals] Expose missing methods on AddAttachment /
 AddPreview
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Regression from the script-setup migration: parents call methods on
the modal via `$refs[...].method()`, but defineExpose has to opt in
explicitly (the Options API auto-exposed everything).

- AddPreviewModal: expose reset (called from mixins/task.js
  resetModals which would throw "reset is not a function")
- AddAttachmentModal: expose addFiles (called from
  widgets/AddComment.vue's getAttachmentModal().addFiles(files))

Other Add* modals already had the right exposes — verified by
grepping for `$refs['add-*-modal']` and `addThumbnailsModal()`
callers.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/components/modals/AddAttachmentModal.vue | 1 +
 src/components/modals/AddPreviewModal.vue    | 1 +
 2 files changed, 2 insertions(+)

diff --git a/src/components/modals/AddAttachmentModal.vue b/src/components/modals/AddAttachmentModal.vue
index 948ce13363..ac4b357a51 100644
--- a/src/components/modals/AddAttachmentModal.vue
+++ b/src/components/modals/AddAttachmentModal.vue
@@ -194,6 +194,7 @@ onBeforeUnmount(() => {
 })
 
 defineExpose({
+  addFiles,
   showAnnotationLoading: () => {
     isAnnotationLoading.value = true
   },
diff --git a/src/components/modals/AddPreviewModal.vue b/src/components/modals/AddPreviewModal.vue
index fb545d6dc9..82b0416c6d 100644
--- a/src/components/modals/AddPreviewModal.vue
+++ b/src/components/modals/AddPreviewModal.vue
@@ -229,6 +229,7 @@ onBeforeUnmount(() => {
 })
 
 defineExpose({
+  reset,
   setFiles: fileList => {
     previewField.value?.filesChange('file', fileList)
   }

From 68d5a529aca39457844c8811f1fcc95d1b47c4b0 Mon Sep 17 00:00:00 2001
From: Frank Rousseau <frank@cg-wire.com>
Date: Mon, 4 May 2026 12:08:47 +0200
Subject: [PATCH 28/28] [datatable] Fix z-index hierarchy so headers stay above
 body cells
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Body metadata cells with data_type === 'taglist' set their inline
z-index to up to 1000 so an open combo dropdown can spill over the
next row. The header z-indexes were sized for a much lower body
range and ended up below 1000 when scrolling, so the metadata cells
visibly overlapped the headers — and sticky-left body columns (name,
episode, sticky metadata cells) sat at z-index 1 which let
non-sticky body cells slide over them on horizontal scroll.

Move every layer above 1000 with a documented hierarchy:

  body taglist               ≤ 1000  (inline)
  body sticky-left            1001   .datatable-row-header
  header non-sticky           1002   .datatable-head th
  header sticky-left          1003   .datatable-head .datatable-row-header

The +1 between body sticky-left and header non-sticky breaks the
document-order tie at the vertical-scroll seam (otherwise the body,
which comes after the header in the DOM, wins and re-covers it).

Drop the now-redundant inline `z-index: 1001` on
`<metadata-header is-stick>` in AssetList and ShotList — that was
originally there to beat the body taglist range, but with the new
non-sticky header at 1002 the inline value would actually slide the
sticky metadata header *under* non-sticky cells during horizontal
scroll. The CSS rule (1003) gives it the right stacking now.

Inline comment on the .datatable-head th rule documents the whole
hierarchy so future contributors don't lower a layer back below 1000.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/App.vue                        | 16 +++++++++++++---
 src/components/lists/AssetList.vue |  3 ---
 src/components/lists/ShotList.vue  |  3 ---
 3 files changed, 13 insertions(+), 9 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index f1bfbea668..4119dcf6c1 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1649,7 +1649,17 @@ tbody:last-child .empty-line:last-child {
     text-transform: uppercase;
     top: 0;
     vertical-align: middle;
-    z-index: 2;
+    // Header z-index hierarchy is built around the body taglist metadata
+    // cells which bump their own z-index up to 1000 so the open combo
+    // dropdown can spill over the next row (see td.metadata-descriptor
+    // inline z-index in AssetList.vue / ShotList.vue):
+    //   body taglist               ≤ 1000
+    //   body sticky-left            1001  (.datatable-row-header)
+    //   header non-sticky           1002  (this rule)
+    //   header sticky-left          1003  (.datatable-head .datatable-row-header)
+    // The +1 between body sticky-left and header non-sticky breaks the
+    // document-order tie at the vertical-scroll seam.
+    z-index: 1002;
 
     a {
       color: var(--text-alt);
@@ -1700,7 +1710,7 @@ tbody:last-child .empty-line:last-child {
   }
 
   .datatable-row-header {
-    z-index: 4;
+    z-index: 1003;
   }
   .header-icon {
     visibility: hidden;
@@ -1894,7 +1904,7 @@ tbody:last-child .empty-line:last-child {
 .datatable-row-header {
   position: sticky;
   left: 0;
-  z-index: 1;
+  z-index: 1001;
   border-right: 1px solid rgba(var(--border-rgb), 0.5);
 
   &::after {
diff --git a/src/components/lists/AssetList.vue b/src/components/lists/AssetList.vue
index 18d6ecda1a..10f8625a5f 100644
--- a/src/components/lists/AssetList.vue
+++ b/src/components/lists/AssetList.vue
@@ -72,9 +72,6 @@
                 offsets['editor-' + j] ? `${offsets['editor-' + j]}px` : '0'
               "
               is-stick
-              :style="{
-                'z-index': 1001
-              }"
               @show-metadata-header-menu="
                 event => showMetadataHeaderMenu(descriptor.id, event)
               "
diff --git a/src/components/lists/ShotList.vue b/src/components/lists/ShotList.vue
index 1238c39dd5..05a52188e1 100644
--- a/src/components/lists/ShotList.vue
+++ b/src/components/lists/ShotList.vue
@@ -61,9 +61,6 @@
                 event => showMetadataHeaderMenu(descriptor.id, event)
               "
               is-stick
-              :style="{
-                'z-index': 1001
-              }"
               v-for="(descriptor, j) in stickedVisibleMetadataDescriptors"
             />