chore(frontend): migrate to Tailwind v4 + DaisyUI v5 + Vite 8 + TS 6#523
Merged
Conversation
Related #498 Migrates the embedded Vue 3 web UI across the four bundled major upgrades that Dependabot grouped into the closed PR #498. ## Changes - Tailwind v4 CSS-first config (@import "tailwindcss") + @tailwindcss/postcss; removed tailwind.config.cjs and autoprefixer - DaisyUI v5 @plugin registration in CSS; all 32 themes preserved (light --default, dark --prefersdark) - Vite 5->8 (rolldown); base '/ui/' + @ alias preserved; @vitejs/plugin-vue 5->6 - TypeScript 5->6: dropped tsconfig baseUrl (TS5101); vue-tsc 2->3, @vue/tsconfig ->0.9 - vitest 2->3 for Vite-8 peer compatibility; Node engines 18->22.18 - Utility renames: flex-shrink-0->shrink-0, bg-opacity-50->bg-black/50 - @reference added to JsonViewer scoped @apply; inlined @apply of custom classes ## DaisyUI v5 component fixes (caught in review) - Restored v4 form layout via an unlayered .form-control/.label compat shim (v5 removed form-control and repurposed label) across ~16 form views - Tab containers tabs-boxed->tabs-box, tabs-bordered->tabs-border - Theme dropdown: widened (w-72 + flex-nowrap) and dropped dropdown-end so the left-sidebar menu opens on-screen instead of off the left edge ## Testing - npm run build green; Vitest 79/79 - make build / go build -tags server green; 0 npm vulnerabilities - Playwright before/after sweep (9 views) + QA use-case suite (6 cases, 0 fatal console errors); verification trace + report under specs/055-*/verification/ ## Note - DaisyUI v5's refreshed default-theme palette shifts primary buttons from indigo to blue (kept intentionally); pinnable via a custom theme block if exact color parity is later required
Deploying mcpproxy-docs with
|
| Latest commit: |
dc86cdb
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://c016c0d0.mcpproxy-docs.pages.dev |
| Branch Preview URL: | https://055-frontend-major-upgrades.mcpproxy-docs.pages.dev |
Related #498 DaisyUI v5 gives .input/.select/.textarea an intrinsic width, so the .form-control flex `align-items: stretch` no longer fills the row the way v4 did — form inputs rendered at ~half width. Restore full-width controls inside form fields via the unlayered compat shim. Refresh verification shots.
|
Codecov Report✅ All modified and coverable lines are covered by tests. 📢 Thoughts on this report? Let us know! |
Related #498 DaisyUI v5 renamed all theme CSS variables (--su->--color-success, --p->--color-primary, --b1/2/3->--color-base-100/200/300, --bc->--color-base-content) and the variable now holds the complete color (so the hsl()/oklch() wrapper must be dropped). The undefined v4 short vars resolved to black/none, which turned the dashboard connection dots/lines black and dropped the MCP logo glow. Converted ~50 references across Dashboard, TokenPieChart, HintsPanel and CollapsibleHintsPanel; opacity uses become color-mix(in oklch, <color> N%, transparent). Also: v5 .menu defaults to width:max-content, so the left sidebar nav items (and their active highlight) only spanned content width. Added w-full to the sidebar .menu lists (ul width 117px -> 231px, fills the rail). Verified: dots fill oklch(0.62 0.194 149.214) (green); logo glow restored; make build green.
…grades # Conflicts: # frontend/src/components/ServerCard.vue # specs/053-oss-repo-improvements/spec.md
📦 Build ArtifactsWorkflow Run: View Run Available Artifacts
How to DownloadOption 1: GitHub Web UI (easiest)
Option 2: GitHub CLI gh run download 26401633620 --repo smart-mcp-proxy/mcpproxy-go
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Related #498
Migrates the embedded Vue 3 web UI across the four bundled major upgrades that Dependabot grouped into the closed PR #498. No backend/Go behavior changes — only frontend sources, config, lockfile, and the re-embedded
frontend/dist.Major upgrades
@import "tailwindcss"+@tailwindcss/postcss;tailwind.config.cjs+autoprefixerremoved)@plugin "daisyui"in CSS; all 32 themes preserved)base:'/ui/'+@alias preserved;@vitejs/plugin-vue5→6)baseUrl/TS5101;vue-tsc2→3,@vue/tsconfig→0.9)Code fixes
flex-shrink-0→shrink-0,bg-opacity-50→bg-black/50@referenceadded to JsonViewer scoped@apply; inlined@applyof custom classes (v4 forbids it)DaisyUI v5 component regressions (caught in review, fixed)
.form-controland repurposed.label/.label-text→ labels collapsed inline across ~16 views. Restored v4 layout via an unlayered.form-control/.labelcompat shim inmain.css(unlayered CSS overrides DaisyUI's cascade layer — no need to edit every file).tabs-boxed→tabs-box,tabs-bordered→tabs-border(tabs were rendering as plain text).w-72+flex-nowrap) and droppeddropdown-endso the left-sidebar menu opens on-screen instead of off the left edge.Testing
npm run buildgreen; Vitest 79/79make build/go build -tags servergreen; 0 npm vulnerabilitiesspecs/055-frontend-major-upgrades/verification/Note for reviewers
DaisyUI v5's refreshed default-theme palette shifts
primarybuttons from indigo to a brighter blue (kept intentionally per maintainer call). Pinnable via a custom theme block if exact color parity is later required.