crewli/dev-docs/WS-3-LINT-BASELINE-AUDIT-2026-04-29.md

WS-3 Lint baseline audit — apps/app

Date: 2026-04-29 Source: pnpm exec eslint . -c .eslintrc.cjs --ext .ts,.js,.cjs,.vue,.tsx,.jsx --no-fix after WS-3 session 1b-i Tasks 1, 2, 3 (Tier 1 + Tier 2 autofix + trailing-whitespace cleanup).

Counts

Stage	Total	Errors	Warnings	Fixable
Pre-1b-i (main, dd8430f)	1451	919	532	1370
Post-Tier 1 (47bd533)	422	408	14	354
Post-Tier 2 (a7eaf0f)	246	232	14	180
Post-whitespace (4976b4e)	231	217	14	165

Reduction: 1451 → 231 mechanical, with Tier 3 deferred.

The 165 still-fixable items break down as:

• 134 in Tier 3 files (vite.config.ts, themeConfig.ts, vitest.config.ts) — explicitly excluded from this session per the risk-tier policy.
• 31 in Tier 1/2 paths — second-pass-autofix residue (mainly 24 indent errors in one file, plus lines-around-comment edge cases on Vue SFC <script>-tag-adjacent comments).

Bucket summary

Bucket	Count	Recommended disposition
X. Tier 3 deferred	134	1b-ii, hand-reviewed per file
A. Trivial-fix	42	1b-ii, mechanical (second-pass --fix or simple delete)
B. Type safety	34	1b-ii, per-instance review
C. Style / rule-config	8	1b-ii, rule-level decisions
D. Vuetify / Vuexy idiom	5	1b-ii, per-pattern overrides
E. Bug-shaped	8	Investigate as bugs
Sum	231

Sum check: X(134) + A(42) + B(34) + C(8) + D(5) + E(8) = 231 ✓ (matches total).

---

Bucket X — Tier 3 deferred (134 items, all fixable)

All in three configuration files, all autofix-mechanical. Excluded from this session per the risk-tier policy because the autofix could in principle alter Vite plugin order, theme-token resolution, or vitest setup-hook ordering.

apps/app/vite.config.ts — 91 items
   58  @typescript-eslint/quotes
   15  semi
   15  @typescript-eslint/semi
    2  arrow-parens
    1  curly

apps/app/themeConfig.ts — 42 items
   28  @typescript-eslint/quotes
    7  semi
    7  @typescript-eslint/semi

apps/app/vitest.config.ts — 1 item
    1  lines-around-comment

Recommendation for 1b-ii: per-file diff review before applying --fix. Focus areas:

• vite.config.ts: confirm no plugin-order changes (the autofix is pure quotes/semi/arrow-parens; in principle no semantic effect). Smoke pnpm dev and pnpm build after.
• themeConfig.ts: confirm no theme-token reordering. Visually check the running app afterwards (login + dashboard).
• vitest.config.ts: trivial — single lines-around-comment fix.

---

Bucket A — Trivial-fix (42 items)

A.1 Second-pass autofix residue (31 items, all fixable)

Items where Tier 1 / Tier 2 --fix ran but ESLint's default 10-pass cap left a cascade of dependent fixes unresolved. Re-running --fix on the same file resolves them (verified in Task 3 on DefaultLayoutWithVerticalNav.vue).

By rule:
   24  indent                          (all in useTimeSlotDropdown.ts)
    3  vue/max-attributes-per-line     (App.vue — outside Tier 1 glob)
    3  lines-around-comment            (PortalLayout/PublicLayout/AppKpiCard — see A.2)
    1  (no rule)                       (VNodeRenderer.tsx — eslint-disable comment that's now unused)

By file:
   24  apps/app/src/composables/useTimeSlotDropdown.ts
    3  apps/app/src/App.vue
    1  apps/app/src/@layouts/components/VNodeRenderer.tsx
    1  apps/app/src/components/AppKpiCard.vue
    1  apps/app/src/layouts/PortalLayout.vue
    1  apps/app/src/layouts/PublicLayout.vue

Recommendation for 1b-ii:

• Re-run pnpm exec eslint <file> --fix on each (single command per file is safest) and verify git diff --check clean afterwards.
• For App.vue: it's at src/App.vue, missed by Tier 1's src/{components,pages,layouts,views}/**/*.vue glob. Fix by including src/App.vue in the Tier 1 paths in the next pass.
• For VNodeRenderer.tsx (src/@layouts/): vendored Vuexy code; the fix is just removing an eslint-disable directive that's no longer needed. Low risk.

A.2 Vue-SFC lines-around-comment autofix gap (3 of the 31 above)

PortalLayout.vue, PublicLayout.vue, and AppKpiCard.vue show error Expected line before comment lines-around-comment at line 2:1 because the comment block sits immediately after <script setup lang="ts"> on line 1. The rule has a fixer and the files were inside the Tier 1 glob, but the fix did not apply — likely a vue-eslint-parser boundary quirk (the script-tag opening doesn't register as a "block start" the way a { does for allowBlockStart: true).

Recommendation for 1b-ii: either (a) hand-add a blank line before the comment in each file, or (b) extend .eslintrc.cjs with an overrides block that disables lines-around-comment for *.vue files (or sets allowBlockStart: true more aggressively).

A.3 Unused-imports / unused-vars (10 items, manual)

Trivial deletes. Each item below: file:line, the unused identifier, and recommended action.

apps/app/src/components/layout/OrganisationSwitcher.vue:30:10
  'toggleMenu' is defined but never used.
  → Delete the destructured `toggleMenu` from the line 30 destructure.
  (Both unused-imports/no-unused-vars and @typescript-eslint/no-unused-vars
  flag the same identifier — count of 2 above is the same identifier.)

apps/app/src/components/sections/CreateShiftDialog.vue:40:9
  'scenario' is assigned a value but never used.
  → Delete the `const scenario = ...` line.
  (Two-rule overlap — same identifier.)

apps/app/src/pages/events/[id]/time-slots/index.vue:242:27
  'event' is defined but never used.       (vue/no-unused-vars)
  → Replace with `_event` in the slot scope, or remove from destructure.

apps/app/src/pages/organisation/companies.vue:8:7
  'authStore' is assigned a value but never used.
  → Delete `const authStore = useAuthStore()` on line 8.
  (Two-rule overlap.)

apps/app/src/pages/platform/activity-log/index.vue:11:7
  'searchDebounced' is assigned a value but never used.
  → Delete the line. (Two-rule overlap.)

apps/app/src/components/persons/PersonDetailPanel.vue:77:58
  Unnecessary { after 'if' condition.    (curly)
  → Strip the redundant brace block (one-statement if).

Note on the rule overlap: unused-imports/no-unused-vars and @typescript-eslint/no-unused-vars both fire on the same identifier in 4 of the 5 cases. Removing the identifier will resolve both per report — the 42 Bucket A total correctly counts these as 2 items each (matching ESLint's actual emit). Effective unique deletes: 6.

---

Bucket B — Type safety (34 items)

B.1 @typescript-eslint/no-explicit-any (23 items)

Per CLAUDE.md frontend rule and .eslintrc.cjs line 62, this is erroneously committed to error for the project. Yet 23 instances exist, predominantly in src/@core/ and src/@layouts/ (the vendored Vuexy code) and a few in our own files.

Distribution:

• src/@core/**: 13 (DropZone.vue, I18n.vue, Notifications.vue, AppDateTimePicker.vue, createUrl.ts, useCookie.ts ×4, apexCharConfig.ts ×3, types.ts)
• src/@layouts/**: 7 (index.ts ×1, types.ts ×6)
• src/layouts/blank.vue: 1 (line 9 — ref<any>)
• src/layouts/default.vue: 1 (line 21 — ref<any>)
• src/layouts/components/NavSearchBar.vue: 1

The 13 + 7 = 20 inside @core and @layouts are vendored Vuexy template code. CLAUDE.md says: "Never: TypeScript any type" — but this rule was clearly intended for OUR code, not the vendored copy of Vuexy that we don't maintain.

Recommendation for 1b-ii — judgment call needed:

• Option a (preferred for honesty): add src/@core/** and src/@layouts/** to ignorePatterns in .eslintrc.cjs. This is the same pragma we already apply to src/plugins/iconify/*.js (vendored). Reduces the 23 down to 3 (blank.vue, default.vue, NavSearchBar.vue) — all ref<any> for the AppLoadingIndicator template ref. Those 3 should be properly typed.
• Option b: keep the rule on, narrow the 20 vendored items to proper types one by one. This is real work and risks breaking the vendored components' contract.
• Option c: per-file // eslint-disable-next-line markers on the vendored anys. Noisy but localised.

The .eslintrc.cjs already says (lines 60-62):

// Project rule (CLAUDE.md frontend rules): no `any`. Override the
// Vuexy reference (which sets this off) — Crewli's stricter posture.
'@typescript-eslint/no-explicit-any': 'error',

So the choice was deliberate when the rule was set. Option a is the cleanest re-statement: "the ban applies to our code, not vendored."

B.2 @typescript-eslint/no-use-before-define (7 items)

All in src/components/shifts/ShiftDetailPanel.vue (lines 249-261). The pattern: handler functions defined at the top of <script setup> reference cancellingAssignment and isCancelDialogOpen refs declared further down in the file.

apps/app/src/components/shifts/ShiftDetailPanel.vue:249:3
  'cancellingAssignment' was used before it was defined.
[...6 more in lines 250-261]

This is idiomatic Composition API: declare reactive state at the top, then handlers, then watchers. The rule fires because handler functions are hoisted but the ref(...) call results aren't.

Recommendation for 1b-ii: either (a) reorder the file to declare the refs before the functions that reference them (mechanical, same file only), or (b) add an override clause to .eslintrc.cjs allowing this pattern in <script setup>. Option a is simpler and one-file.

B.3 @typescript-eslint/no-shadow (1 item)

apps/app/src/stores/useImpersonationStore.ts:119:11
  'stored' is already declared in the upper scope on line 18 column 9.

Local stored shadowing an outer stored — usually fine but defensive practice is to rename. Recommendation: rename the inner stored to storedSnapshot or similar.

B.4 camelcase (3 items, same identifier)

apps/app/src/composables/api/useFormSchemas.ts:97:30
apps/app/src/composables/api/useFormSchemas.ts:99:17
apps/app/src/composables/api/useFormSchemas.ts:99:36
  Identifier 'confirmed_name' is not in camel case.

Context (lines 95-100):

return useMutation({
  mutationFn: async ({ id, confirmed_name }: { id: string; confirmed_name?: string }) => {
    await apiClient.delete(`/organisations/${orgId.value}/forms/schemas/${id}`, {
      params: confirmed_name ? { confirmed_name } : undefined,
    })
  },

confirmed_name is an API query parameter that the backend reads in snake_case. CLAUDE.md says: "DB columns: snake_case" and "TypeScript / JS variables: camelCase". The boundary is at the API layer — the query-param key MUST be confirmed_name (snake) on the wire. The local TypeScript variable confirmed_name matches the wire format for symmetry (rather than confirmedName aliased).

Recommendation for 1b-ii — judgment call: rename the local variable to confirmedName and keep the wire key snake_case ({ confirmed_name: confirmedName }). Three rule violations resolved with no behaviour change.

---

Bucket C — Style / rule-config (8 items)

apps/app/src/components/form-failures/DismissFailureDialog.vue:43:3
  sonarjs/prefer-single-boolean-return
  "Replace this if-then-else flow by a single return statement."

apps/app/src/components/form-failures/FormFailureDetail.vue:44:5
  no-void
  "Expected 'undefined' and instead saw 'void'."

apps/app/src/components/sections/AssignShiftDialog.vue:41:3
  sonarjs/prefer-single-boolean-return

apps/app/src/components/sections/SectionsShiftsPanel.vue:333:11
  vue/prefer-true-attribute-shorthand
  "Boolean prop with 'true' value should be written in shorthand form."

apps/app/src/components/shifts/AssignPersonDialog.vue:120:5
  sonarjs/no-collapsible-if
  "Merge this if statement with the nested one."
apps/app/src/components/shifts/AssignPersonDialog.vue:125:5
  sonarjs/no-collapsible-if

apps/app/src/pages/events/[id]/settings/registration-fields.vue:335:13
  vue/prefer-true-attribute-shorthand

apps/app/src/stores/useImpersonationStore.ts:105:12
  sonarjs/no-collapsible-if

All readable-style preferences. Recommendation for 1b-ii: apply the suggested rewrite per item; all are local single-file edits with no behaviour change.

---

Bucket D — Vuetify / Vuexy idiom (5 items)

apps/app/src/components/persons/PersonDetailPanel.vue:272:25
  vue/no-restricted-class — "'ml-1' class is not allowed."

apps/app/src/components/sections/SectionsShiftsPanel.vue:357:25
  vue/no-restricted-class — "'ml-1' class is not allowed."

apps/app/src/components/shifts/AssignPersonDialog.vue:461:29
  vue/no-restricted-class — "'pl-4' class is not allowed."

apps/app/src/components/shifts/AssignPersonDialog.vue:475:23
  vue/no-restricted-class — "'ml-auto' class is not allowed."

apps/app/src/components/shifts/AssignPersonDialog.vue:500:27
  vue/no-restricted-class — "'ml-1' class is not allowed."

The rule (.eslintrc.cjs line 176) bans m{l,r}- and p{l,r}- Tailwind utility-class names because the project is Vuetify-only ("Use Vuetify utility class … never custom CSS" per CLAUDE.md). Vuetify's spacing utilities are ms-*, me-*, ps-*, pe-* (start/ end LTR-aware), or mx-*/px-* for both sides.

Recommendation for 1b-ii: rewrite the 5 occurrences:

• ml-1 → ms-1
• pl-4 → ps-4
• ml-auto → ms-auto

Vuetify supports both m{l,r,s,e}-N directly; the project preference per the rule is the start/end form. Mechanical 5-line change across 3 files.

---

Bucket E — Bug-shaped (8 items)

E.1 import/no-named-as-default-member × 2 — EventTabsNav.vue

apps/app/src/components/events/EventTabsNav.vue:53:8
apps/app/src/components/events/EventTabsNav.vue:76:9
  "Caution: `axios` also has a named export `isAxiosError`. Check if
  you meant to write `import { isAxiosError } from 'axios'` instead."

The file accesses axios.isAxiosError(...) via the default export namespace; ESLint flags that there's a named export of the same name. Both forms work, but the named import is the modern axios pattern and narrower (no full default-axios import overhead).

Recommendation for 1b-ii: change import axios from 'axios' to import { isAxiosError } from 'axios' (or add the named import alongside the default). Two-line edit. Zero behaviour change.

E.2 vue/component-api-style × 1 — vitest spec

apps/app/src/composables/api/__tests__/useFormFailures.spec.ts:38:5
  "Options API is not allowed in your project. `render` function is
  part of the Options API. Use Composition API instead."

A test mock uses Options-API render function. CLAUDE.md frontend rules: "Always <script setup lang='ts'> — never the Options API". Recommendation for 1b-ii: rewrite the mock as Composition API, or add a per-spec-file override.

E.3 vue/return-in-computed-property × 1 — useTimeSlotDropdown

apps/app/src/composables/useTimeSlotDropdown.ts:80:32
  "Expected to return a value in computed function."

A computed callback is missing a return path on at least one branch — a real bug-class. Recommendation for 1b-ii: read line 80 of useTimeSlotDropdown.ts and ensure every code path returns.

E.4 vue/no-template-target-blank × 1 — security

apps/app/src/pages/organisation/index.vue:342:21
  "Using target='_blank' without rel='noopener noreferrer' is a
  security risk."

External anchor with target="_blank" and no rel="noopener" — classic reverse-tabnabbing exposure. Recommendation: add rel="noopener noreferrer" to the anchor.

E.5 promise/no-promise-in-callback × 3 — axios.ts

apps/app/src/lib/axios.ts:42:12
apps/app/src/lib/axios.ts:61:7
apps/app/src/lib/axios.ts:73:7
  "Avoid using promises inside of callbacks."

In each case the response interceptor reaches into a dynamic import() to lazy-load a store, then chains .then(). Pattern:

import('@/stores/useImpersonationStore').then(({ useImpersonationStore }) => {
  const impersonationStore = useImpersonationStore()
  impersonationStore.clearState()
  window.location.href = '/platform'
})

The lint rule fires because the interceptor itself is a callback and the promise inside isn't returned/awaited. In practice the interceptor doesn't need to wait for the store dynamic-import (the side effect — set window.location — is fire-and-forget). It's not a real bug, but the rule is correctly identifying that errors inside those .then() blocks would be silently swallowed.

Recommendation for 1b-ii — judgment call:

• Option a: wrap each in a void to mark the fire-and-forget intent: void import('@/stores/...').then(...). Tells ESLint and future-readers that the promise discard is intentional.
• Option b: add .catch(err => console.error(...)) to each so errors aren't swallowed.
• Option c: disable the rule for lib/axios.ts only — but loses defence everywhere else.

Option b is most defensive; option a is most honest about current behaviour. Both are 3-line single-file edits.

---

Action plan for session 1b-ii

Step	Bucket	Effort	Risk	Notes
1. Tier 3 hand-review + autofix	X	1-2h	medium	Smoke pnpm dev + pnpm build after vite.config.ts
2. Bucket A second-pass autofix on Tier 1/2 paths	A.1	trivial	low	Rerun --fix on the 6 listed files; verify git diff --check
3. Bucket A unused-imports/vars manual deletes	A.3	trivial	low	6 unique deletes
4. Bucket A lines-around-comment Vue SFC fix	A.2	trivial	low	Either hand-add blank lines or override rule for *.vue
5. Bucket B no-explicit-any ignore-patterns decision	B.1	trivial config	low	Likely add @core/** + @layouts/** to ignorePatterns
6. Bucket B no-explicit-any real fixes (3 in our code)	B.1	low	low	blank.vue / default.vue / NavSearchBar.vue refs
7. Bucket B no-use-before-define reorder	B.2	low	low	Reorder ShiftDetailPanel.vue script setup
8. Bucket B no-shadow rename	B.3	trivial	low	useImpersonationStore.ts
9. Bucket B camelcase rename	B.4	low	low	useFormSchemas.ts — 3-line edit
10. Bucket C style fixes	C	low	low	8 mechanical rewrites
11. Bucket D Vuetify class renames	D	low	low	ml-/pl-/etc → ms-/ps-/etc, 5 occurrences
12. Bucket E.1 isAxiosError import	E.1	trivial	low	One file, two lines
13. Bucket E.2 spec rewrite to Composition API	E.2	low	low	Test only
14. Bucket E.3 fix missing return in computed	E.3	low	medium	Real semantic bug — verify with smoke
15. Bucket E.4 security: add rel="noopener"	E.4	trivial	low	One attribute add
16. Bucket E.5 axios fire-and-forget pattern	E.5	low	low	3 spots, design choice between options a/b/c

After 1b-ii completes, the lint count should drop from 231 to a small number (single digits, mostly Bucket-B-judgment-call leftovers if any — depending on the @core/@layouts ignorePatterns decision).

---

Open questions for Bert + Claude Chat

1. Vendored Vuexy code under src/@core/ and src/@layouts/ — should it be included in .eslintrc.cjs's ignorePatterns? 20 of the 23 no-explicit-any items would silently disappear, plus a small number of other rules. The trade-off: future drift in those directories goes uncaught. Counter-trade-off: spending time correcting anys in code we copy-pasted is low value and high churn.

2. vue/no-restricted-class regex /^(p|m)(l|r)-/ — the rule bans both mr- and ml- (and pr-, pl-). Vuetify supports mr-N natively (it's not just a Tailwind name); the migration to me-N is for LTR/RTL flexibility. Confirm this is the intended ban, or relax it to pl/ml only if RTL isn't a project goal.

3. Bucket C vue/prefer-true-attribute-shorthand — the rule prefers <comp prop> over <comp :prop="true"> for boolean props. Some teams find the explicit form clearer when it distinguishes from omitted. Confirm preference.

4. Bucket E.5 axios callback-promises — pick option a/b/c per above before 1b-ii starts. Option b (.catch) is the most defensive but introduces error-handling code; option a (void) is the most honest about today's behaviour.

5. pnpm lint script in package.json — currently aliased to eslint . --fix. After 1b-ii lands a clean baseline, consider splitting into pnpm lint (no-fix) and pnpm lint:fix (with --fix). The current aliasing is what made the original 105 reference number wrong (someone ran pnpm lint and reported the post-fix remainder).

---

Artifacts

• /tmp/eslint-pre.json — pre-1b-i baseline (1451 problems)
• /tmp/eslint-current.json — post-Task-3 state (231 problems)

Both retained on the dev machine for 1b-ii reference. Not committed.