From b4f5bbe7c243f33aebf7daedf4ac5f63faabcf53 Mon Sep 17 00:00:00 2001
From: "bert.hausmans" <bert@hausmans.nl>
Date: Wed, 29 Apr 2026 14:20:34 +0200
Subject: [PATCH] fix(app): resolve Bucket A/C/D lint items (trivial / style /
 Vuetify class)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

WS-3 session 1b-ii Task 4 (audit Buckets A, C, D — 26 items resolved
this commit; 24 indent items in useTimeSlotDropdown.ts remain — see
deviations).

Bucket A — Trivial fixes (12 items resolved):
- A.1: second-pass eslint --fix on App.vue resolved 4 multi-attribute
  warnings. AppKpiCard / PortalLayout / PublicLayout
  lines-around-comment items were attempted via blank-line addition,
  but that introduced an equal number of vue/block-tag-newline
  errors (the rules conflict at the SFC <script>-tag boundary). The
  blank-line additions were reverted; net-zero, the 3 items remain
  for a 1b-iii .eslintrc.cjs override decision.
- A.3: 6 unused-imports / unused-vars manual deletes:
  * OrganisationSwitcher.vue: removed orphan toggleMenu() function
  * CreateShiftDialog.vue: removed unused 'scenario' from destructure
  * pages/events/[id]/time-slots/index.vue: removed unused 'event'
    slot scope binding (template <#default="{ event }"> → <#default>)
  * pages/organisation/companies.vue: removed unused authStore
    declaration + import
  * pages/platform/activity-log/index.vue: removed unused
    search/searchDebounced pair
  * PersonDetailPanel.vue:77: removed redundant single-statement
    if-braces (curly autofix that the original pass didn't reach)

Bucket C — Style preference (8 items resolved):
- DismissFailureDialog.vue:43: collapsed two consecutive `if cond return false`
  branches into `return !(cond)`
- FormFailureDetail.vue:44: replaced `void clipboard.writeText(...)` with
  `clipboard.writeText(...).catch(() => {})` — fire-and-forget with
  silent rejection (the no-void rule wants the void operator gone;
  .catch() handles it semantically).
- AssignShiftDialog.vue:40-46: hasOverlapWarning collapsed from
  always-false branching to `computed(() => false)` (the early-return
  was dead code; backend enforces the constraint).
- SectionsShiftsPanel.vue:333 + registration-fields.vue:335: rewrote
  `:delay-on-touch-only="true"` to attribute-shorthand `delay-on-touch-only`.
- AssignPersonDialog.vue:120-128: collapsed two `if outer { if inner ... }`
  pairs into single `if (outer && inner)` form (sonarjs/no-collapsible-if).
- useImpersonationStore.ts:99-104: collapsed the same nested-if pattern
  into `if (!data.data.active && state.value)`.

Bucket D — Vuetify utility class rename (5 items, 3 files):
- ml-1 → ms-1 (PersonDetailPanel:271, SectionsShiftsPanel:357,
  AssignPersonDialog:496)
- pl-4 → ps-4 (AssignPersonDialog:457)
- ml-auto → ms-auto (AssignPersonDialog:471)
LTR/RTL-aware Vuetify utilities, matching the Vuexy reference idiom.

Tests + typecheck verified green.

Lint baseline: 62 → 36.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 apps/app/src/App.vue                           | 16 +++++++++++++---
 .../form-failures/DismissFailureDialog.vue     |  4 +---
 .../form-failures/FormFailureDetail.vue        |  2 +-
 .../components/layout/OrganisationSwitcher.vue |  5 -----
 .../components/persons/PersonDetailPanel.vue   |  5 ++---
 .../components/sections/AssignShiftDialog.vue  |  9 ++-------
 .../components/sections/CreateShiftDialog.vue  |  2 +-
 .../sections/SectionsShiftsPanel.vue           |  4 ++--
 .../components/shifts/AssignPersonDialog.vue   | 18 +++++++-----------
 .../[id]/settings/registration-fields.vue      |  2 +-
 .../src/pages/events/[id]/time-slots/index.vue |  2 +-
 apps/app/src/pages/organisation/companies.vue  |  2 --
 .../src/pages/platform/activity-log/index.vue  |  2 --
 apps/app/src/stores/useImpersonationStore.ts   |  8 +++-----
 14 files changed, 34 insertions(+), 47 deletions(-)

diff --git a/apps/app/src/App.vue b/apps/app/src/App.vue
index 866b7882..a1733b1f 100644
--- a/apps/app/src/App.vue
+++ b/apps/app/src/App.vue
@@ -31,8 +31,15 @@ authStore.initialize()
     <VApp :style="`--v-global-theme-primary: ${hexToRgb(global.current.value.colors.primary)}`">
       <!-- Show loading state while validating auth token -->
       <template v-if="!authStore.isInitialized">
-        <div class="d-flex align-center justify-center" style="min-height: 100vh;">
-          <VProgressCircular indeterminate color="primary" size="48" />
+        <div
+          class="d-flex align-center justify-center"
+          style="min-height: 100vh;"
+        >
+          <VProgressCircular
+            indeterminate
+            color="primary"
+            size="48"
+          />
         </div>
       </template>
 
@@ -53,7 +60,10 @@ authStore.initialize()
       {{ notificationStore.message }}
 
       <template #actions>
-        <VBtn variant="text" @click="notificationStore.hide()">
+        <VBtn
+          variant="text"
+          @click="notificationStore.hide()"
+        >
           Close
         </VBtn>
       </template>
diff --git a/apps/app/src/components/form-failures/DismissFailureDialog.vue b/apps/app/src/components/form-failures/DismissFailureDialog.vue
index 1b0dcfc1..fe9ed14c 100644
--- a/apps/app/src/components/form-failures/DismissFailureDialog.vue
+++ b/apps/app/src/components/form-failures/DismissFailureDialog.vue
@@ -40,10 +40,8 @@ const noteRequired = computed(() => reason.value === 'other')
 const canSubmit = computed(() => {
   if (reason.value === null)
     return false
-  if (noteRequired.value && note.value.trim() === '')
-    return false
 
-  return true
+  return !(noteRequired.value && note.value.trim() === '')
 })
 
 watch(isDialogOpen, open => {
diff --git a/apps/app/src/components/form-failures/FormFailureDetail.vue b/apps/app/src/components/form-failures/FormFailureDetail.vue
index 621daaa9..a8e03bb1 100644
--- a/apps/app/src/components/form-failures/FormFailureDetail.vue
+++ b/apps/app/src/components/form-failures/FormFailureDetail.vue
@@ -41,7 +41,7 @@ const dismissDialogOpen = ref(false)
 
 function copyText(text: string): void {
   if (navigator?.clipboard)
-    void navigator.clipboard.writeText(text)
+    navigator.clipboard.writeText(text).catch(() => {})
 }
 
 const formattedContext = computed(() => {
diff --git a/apps/app/src/components/layout/OrganisationSwitcher.vue b/apps/app/src/components/layout/OrganisationSwitcher.vue
index ceb5a8ec..dd72cf46 100644
--- a/apps/app/src/components/layout/OrganisationSwitcher.vue
+++ b/apps/app/src/components/layout/OrganisationSwitcher.vue
@@ -27,11 +27,6 @@ const roleColor = (role: string) => ({
   volunteer_coordinator: 'secondary',
 }[role] ?? 'default')
 
-function toggleMenu() {
-  if (hasMultiple.value)
-    isMenuOpen.value = !isMenuOpen.value
-}
-
 function selectOrg(id: string) {
   authStore.setActiveOrganisation(id)
   isMenuOpen.value = false
diff --git a/apps/app/src/components/persons/PersonDetailPanel.vue b/apps/app/src/components/persons/PersonDetailPanel.vue
index 4905a33b..2d22b883 100644
--- a/apps/app/src/components/persons/PersonDetailPanel.vue
+++ b/apps/app/src/components/persons/PersonDetailPanel.vue
@@ -74,9 +74,8 @@ function calculateAge(dateStr: string): number | null {
   let age = today.getFullYear() - birth.getFullYear()
   const monthDiff = today.getMonth() - birth.getMonth()
   const dayDiff = today.getDate() - birth.getDate()
-  if (monthDiff < 0 || (monthDiff === 0 && dayDiff < 0)) {
+  if (monthDiff < 0 || (monthDiff === 0 && dayDiff < 0))
     age--
-  }
   if (age < 0 || age > 130)
     return null
 
@@ -269,7 +268,7 @@ function handleManualLink(userId: string) {
                 Mogelijke match gevonden
                 <VChip
                   size="x-small"
-                  class="ml-1"
+                  class="ms-1"
                   variant="outlined"
                 >
                   {{ person.pending_identity_match.confidence_label }}
diff --git a/apps/app/src/components/sections/AssignShiftDialog.vue b/apps/app/src/components/sections/AssignShiftDialog.vue
index a53fa5a8..d700d26d 100644
--- a/apps/app/src/components/sections/AssignShiftDialog.vue
+++ b/apps/app/src/components/sections/AssignShiftDialog.vue
@@ -37,13 +37,8 @@ const generalError = computed(() => {
 })
 
 // Check for overlap warning
-const hasOverlapWarning = computed(() => {
-  if (!selectedPersonId.value || !props.shift)
-    return false
-
-  // This is informational — the backend enforces the actual constraint
-  return false
-})
+// This is informational — the backend enforces the actual constraint
+const hasOverlapWarning = computed(() => false)
 
 const personItems = computed(() =>
   persons.value.map((p: Person) => ({
diff --git a/apps/app/src/components/sections/CreateShiftDialog.vue b/apps/app/src/components/sections/CreateShiftDialog.vue
index d6fe2e96..00973a69 100644
--- a/apps/app/src/components/sections/CreateShiftDialog.vue
+++ b/apps/app/src/components/sections/CreateShiftDialog.vue
@@ -37,7 +37,7 @@ const { data: eventDetail } = useEventDetail(orgIdRef, eventIdRef)
 const sectionRef = computed(() => props.section ?? null)
 
 // Determine dropdown scenario
-const { scenario, showInfoTooltip, hasGroups, tooltipText, fetchParams, sortedItems } = useTimeSlotDropdown(
+const { showInfoTooltip, hasGroups, tooltipText, fetchParams, sortedItems } = useTimeSlotDropdown(
   eventDetail,
   sectionRef,
 )
diff --git a/apps/app/src/components/sections/SectionsShiftsPanel.vue b/apps/app/src/components/sections/SectionsShiftsPanel.vue
index 264fc644..12cba714 100644
--- a/apps/app/src/components/sections/SectionsShiftsPanel.vue
+++ b/apps/app/src/components/sections/SectionsShiftsPanel.vue
@@ -330,7 +330,7 @@ function onSectionCreated(payload: { name: string; redirectedToParent: boolean;
           drag-class="section-drag"
           :animation="200"
           :delay="100"
-          :delay-on-touch-only="true"
+          delay-on-touch-only
           direction="vertical"
           class="v-list v-list--nav v-list--density-compact"
           @end="onDragEnd"
@@ -354,7 +354,7 @@ function onSectionCreated(payload: { name: string; redirectedToParent: boolean;
                 <span>{{ element.name }}</span>
                 <span
                   v-if="element.type === 'cross_event' && parentEvent"
-                  class="text-caption text-medium-emphasis ml-1"
+                  class="text-caption text-medium-emphasis ms-1"
                 >
                   · {{ parentEvent.name }}
                 </span>
diff --git a/apps/app/src/components/shifts/AssignPersonDialog.vue b/apps/app/src/components/shifts/AssignPersonDialog.vue
index cc5fec6b..84d42c78 100644
--- a/apps/app/src/components/shifts/AssignPersonDialog.vue
+++ b/apps/app/src/components/shifts/AssignPersonDialog.vue
@@ -117,15 +117,11 @@ const filteredPersons = computed(() => {
         return false
     }
 
-    if (selectedCrowdType.value) {
-      if (person.crowd_type?.system_type !== selectedCrowdType.value)
-        return false
-    }
+    if (selectedCrowdType.value && person.crowd_type?.system_type !== selectedCrowdType.value)
+      return false
 
-    if (showOnlyAvailable.value) {
-      if (!person.is_available || person.already_assigned)
-        return false
-    }
+    if (showOnlyAvailable.value && (!person.is_available || person.already_assigned))
+      return false
 
     if (showRecommendedOnly.value) {
       const hasPreference = person.section_preferences.some(
@@ -458,7 +454,7 @@ async function executeAssign(person: AssignablePerson) {
                 </template>
                 <div class="text-body-2 text-white">
                   <strong>Aanbevolen omdat:</strong>
-                  <ul class="pl-4 mt-1 mb-0">
+                  <ul class="ps-4 mt-1 mb-0">
                     <li
                       v-for="(reason, i) in getRecommendationReasons(person)"
                       :key="i"
@@ -472,7 +468,7 @@ async function executeAssign(person: AssignablePerson) {
                 v-if="person.crowd_type"
                 size="x-small"
                 variant="tonal"
-                class="ml-auto"
+                class="ms-auto"
               >
                 {{ person.crowd_type.name }}
               </VChip>
@@ -497,7 +493,7 @@ async function executeAssign(person: AssignablePerson) {
                   {{ tag.name }}
                   <span
                     v-if="tag.proficiency"
-                    class="ml-1 font-italic"
+                    class="ms-1 font-italic"
                   >
                     ({{ { beginner: 'beg.', experienced: 'erv.', expert: 'exp.' }[tag.proficiency] }})
                   </span>
diff --git a/apps/app/src/pages/events/[id]/settings/registration-fields.vue b/apps/app/src/pages/events/[id]/settings/registration-fields.vue
index d1b84011..1c834fed 100644
--- a/apps/app/src/pages/events/[id]/settings/registration-fields.vue
+++ b/apps/app/src/pages/events/[id]/settings/registration-fields.vue
@@ -332,7 +332,7 @@ const settingsTab = computed(() => {
             handle=".drag-handle"
             :animation="200"
             :delay="100"
-            :delay-on-touch-only="true"
+            delay-on-touch-only
             direction="vertical"
             @end="onDragEnd"
           >
diff --git a/apps/app/src/pages/events/[id]/time-slots/index.vue b/apps/app/src/pages/events/[id]/time-slots/index.vue
index 98cc20ae..b63da391 100644
--- a/apps/app/src/pages/events/[id]/time-slots/index.vue
+++ b/apps/app/src/pages/events/[id]/time-slots/index.vue
@@ -239,7 +239,7 @@ function onDeleteExecute() {
 
 <template>
   <EventTabsNav>
-    <template #default="{ event }">
+    <template #default>
       <!-- Header -->
       <div class="d-flex align-center justify-space-between flex-wrap gap-2 mb-4">
         <div class="d-flex align-center gap-x-2">
diff --git a/apps/app/src/pages/organisation/companies.vue b/apps/app/src/pages/organisation/companies.vue
index 638d7ba9..3e082cee 100644
--- a/apps/app/src/pages/organisation/companies.vue
+++ b/apps/app/src/pages/organisation/companies.vue
@@ -1,11 +1,9 @@
 <script setup lang="ts">
 import { useCompanies, useDeleteCompany } from '@/composables/api/useCompanies'
-import { useAuthStore } from '@/stores/useAuthStore'
 import { useOrganisationStore } from '@/stores/useOrganisationStore'
 import CompanyDialog from '@/components/organisation/CompanyDialog.vue'
 import type { Company } from '@/types/organisation'
 
-const authStore = useAuthStore()
 const orgStore = useOrganisationStore()
 
 const orgId = computed(() => orgStore.activeOrganisationId ?? '')
diff --git a/apps/app/src/pages/platform/activity-log/index.vue b/apps/app/src/pages/platform/activity-log/index.vue
index 6d1a0329..fc45a111 100644
--- a/apps/app/src/pages/platform/activity-log/index.vue
+++ b/apps/app/src/pages/platform/activity-log/index.vue
@@ -7,8 +7,6 @@ definePage({
   },
 })
 
-const search = ref('')
-const searchDebounced = refDebounced(search, 400)
 const logNameFilter = ref('')
 const page = ref(1)
 
diff --git a/apps/app/src/stores/useImpersonationStore.ts b/apps/app/src/stores/useImpersonationStore.ts
index a690abb4..2577bbd9 100644
--- a/apps/app/src/stores/useImpersonationStore.ts
+++ b/apps/app/src/stores/useImpersonationStore.ts
@@ -96,11 +96,9 @@ export const useImpersonationStore = defineStore('impersonation', () => {
         '/admin/impersonate/status',
       )
 
-      if (!data.data.active) {
-        if (state.value) {
-          clearState()
-          window.location.href = '/platform'
-        }
+      if (!data.data.active && state.value) {
+        clearState()
+        window.location.href = '/platform'
       }
       else if (data.data.session) {
         // Update expiry from server