Ship: UI framework batch 4 — Vuetify 4 + vue-router 5 + pinia 3 (#1449) #224

Merged

bvandeusen merged 2 commits from dev into main 2026-07-13 13:40:25 -04:00

Conversation 0 Commits 2 Files Changed 9

+29 -19

bvandeusen commented 2026-07-13 13:40:15 -04:00

Owner

Copy Link

Copy Source

Ships dep batch 4 (milestone #158) to main for live visual review (per plan: CI verifies build, only your eyes verify the look). No migrations — frontend only. CI-green on dev 6104452.

What ships

• pinia 2→3, vue-router 4→5 — Vue-3-compatible majors, zero code impact for FC (no file-based routing; string-first setup-syntax stores; no custom pinia plugins).
• vuetify 3→4 — Material-Design-3 styling refresh. Structural breaks fixed: restored the dropped global CSS reset (minimal, in Vuetify's own layer); v-row dense→density="compact" + align→utility class; v-snackbar multi-line→min-height; v-autocomplete #item slot item→internalItem (TagPicker + GalleryFilterBar). Also bumped vite-plugin-vuetify ^2.1.0, vue ^3.5, engines node>=24.

Review this live — MD3 cosmetic shifts I deliberately did NOT force back (your call)

1. Typography — MD3 restyles the text-* scale (text-body-2 is used 73×). If body text looks off-size, I'll restore the MD2 scale or rename to the MD3 classes.
2. Buttons — Vuetify 4 dropped the uppercase-by-default. Your buttons will now render in normal case (arguably nicer). Say the word and I'll put uppercase back.
3. Elevation/shadows — MD3 shadow model (only 2 uses in FC).

Rollback is one step (:latest → prior digest) if anything's badly off. Tell me what looks wrong on the key surfaces (gallery, Explore, modal, settings) and I'll fix it iteratively.

🤖 Generated with Claude Code

Ships dep batch 4 (milestone #158) to `main` for **live visual review** (per plan: CI verifies build, only your eyes verify the look). No migrations — frontend only. CI-green on `dev` `6104452`. ## What ships - **pinia 2→3, vue-router 4→5** — Vue-3-compatible majors, zero code impact for FC (no file-based routing; string-first setup-syntax stores; no custom pinia plugins). - **vuetify 3→4** — Material-Design-3 styling refresh. Structural breaks fixed: restored the dropped global CSS reset (minimal, in Vuetify's own layer); v-row `dense`→`density="compact"` + `align`→utility class; v-snackbar `multi-line`→`min-height`; v-autocomplete `#item` slot `item`→`internalItem` (TagPicker + GalleryFilterBar). Also bumped vite-plugin-vuetify ^2.1.0, vue ^3.5, engines node>=24. ## Review this live — MD3 cosmetic shifts I deliberately did NOT force back (your call) 1. **Typography** — MD3 restyles the `text-*` scale (`text-body-2` is used 73×). If body text looks off-size, I'll restore the MD2 scale or rename to the MD3 classes. 2. **Buttons** — Vuetify 4 dropped the uppercase-by-default. Your buttons will now render in normal case (arguably nicer). Say the word and I'll put uppercase back. 3. **Elevation/shadows** — MD3 shadow model (only 2 uses in FC). Rollback is one step (`:latest` → prior digest) if anything's badly off. Tell me what looks wrong on the key surfaces (gallery, Explore, modal, settings) and I'll fix it iteratively. 🤖 Generated with [Claude Code](https://claude.com/claude-code)

bvandeusen added 2 commits 2026-07-13 13:40:15 -04:00

chore(deps): pinia 2→3 + vue-router 4→5 (batch 4 phase A, #1449) ... b59828635e

Both are Vue-3-compatible majors with no code impact for FC:
- vue-router 5: no breaking changes when not using file-based routing (FC uses a
  plain createRouter in router.js).
- pinia 3: drops Vue 2 + deprecated APIs; FC uses string-first setup-syntax
  defineStore + no custom pinia plugins, so nothing to change.
Phase A of the Vuetify-4 UI framework migration (milestone #158); Vuetify 4 lands
in phase B.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

feat(deps): vuetify 3→4 (batch 4 phase B, #1449) ... 6104452d2e

Vuetify 4 is a Material-Design-3 styling refresh with revert snippets, not a
component-API overhaul. FC's exposure was small:

- Bump vuetify ^4, vite-plugin-vuetify ^2.1.0, vue ^3.5, engines node>=24.
- Restore the dropped global CSS reset (minimal reset from the upgrade guide) in
  Vuetify's own low-precedence reset layer, so FC's margin-zeroing assumptions hold.
- v-row prop→utility: 'dense' → density=compact (×3), align=center → class=align-center.
- v-snackbar: multi-line removed → min-height=68.
- v-autocomplete #item slot: item→internalItem (item now aliases raw) in TagPicker
  + GalleryFilterBar (item.raw.* → internalItem.raw.*).

ACCEPTED (cosmetic, operator reviews live per plan #158): MD3 typography
(text-body-2 ×73), non-uppercase buttons (v4 dropped the uppercase default),
MD3 elevation. CI verifies BUILD only — the LOOK is the live-review pass.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

bvandeusen merged commit b638382cd5 into main 2026-07-13 13:40:25 -04:00

Sign in to join this conversation.

Reviewers

No Reviewers

Labels

No items

No Label

Milestone

No items

No Milestone

Projects

Clear projects

No project

Assignees

Clear assignees

renovate-bot bvandeusen

No Assignees

1 Participants

Notifications

Subscribe

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: bvandeusen/FabledCurator#224