fix: align app with the documented design system

[v-kessler]

Summary

• Applied the design-system remediation pass (buttons, colors, typography, spacing) to this app's own pages/components (Home, notfound, server-offline, bootstrap, dependencies, warehouse detail pages, etc.), matching the console-components PR.
• Globally imports @lakekeeper/console-components/style.css in plugins/index.ts — it was previously only pulled in incidentally by a few specific pages, so most of the app's shared-component styling could silently go unstyled depending on navigation order.
• Adds a /styleguide page (new file) that renders the shared component library's live design-system reference.
• Fixes native-control theming (document.documentElement.style.colorScheme) so browser-native popups (date pickers, scrollbars) follow the in-app theme instead of the OS setting.
• Fixes server-settings.vue tab-switch transition so a ?tab= deep link landing on a non-default tab doesn't confuse v-window's transition bookkeeping.

Depends on console-components for the shared library fixes/design tokens; this app's package.json still pins the last published console-components version (no new release yet), so nothing here is blocked on that PR merging first.

Test plan

• vue-tsc --noEmit, eslint, and npm run build all pass
• Verified in-browser: styleguide page (light+dark), login/no-access background, native theming sync, server-settings.vue tab switching (fresh load + clicking)
• Manual review of the full diff

🤖 Generated with Claude Code

Summary by CodeRabbit

• New Features

  • Added a style guide page for reviewing the application’s visual components.
  • Improved theme synchronization so browser controls match the selected light or dark mode.

• Bug Fixes

  • Improved initial tab loading behavior for deep-linked server settings.
  • Added smoother scrolling and viewport handling on large content pages.

• Style

  • Refined responsive layouts, card elevation, button styles, typography, borders, icons, and loading indicators across the application.
  • Updated colors to better follow the active theme.
  • Improved the disabled identity-management notification visibility.

[coderabbitai]

Warning

Review limit reached

@v-kessler, you've reached your PR review limit, so we couldn't start this review.

Next review available in: 54 minutes

You've used all free OSS reviews for now. Wait for the free limit to reset to keep reviewing this public repository.

How can I continue?

After more reviews become available, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews.

How do review limits work?

CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability.

For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window.

Please refer docs for additional details.

Review details

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: eda55b11-53c2-4b41-b96a-c214a28d391f

📥 Commits

Reviewing files that changed from the base of the PR and between 4a0b079 and cc55e34.

📒 Files selected for processing (1)

• src/assets/dependencies.json

Walkthrough

The PR upgrades console components to v0.20.0, adds theme synchronization and stylesheet loading, refreshes Vuetify styling across pages, standardizes loading indicators, prevents initial settings-tab transitions, and adds styleguide route support.

Changes

Console UI refresh

Layer / File(s)	Summary
Theme and component foundation package.json, src/App.vue, src/assets/dependencies.json, src/plugins/index.ts	The console uses console components v0.20.0, loads their stylesheet, and synchronizes the document color-scheme with Vuetify.
Shared page styling and responsive layout src/components/*, src/pages/bootstrap.vue, src/pages/dependencies.vue, src/pages/notfound.vue, src/pages/server-offline.vue	Pages update elevations, buttons, typography, theme colors, viewport sizing, hover states, and snackbar text.
Loading-state presentation src/pages/identities.vue, src/pages/roles/[id].vue, src/pages/warehouse/...	Loading indicators use explicit sizes and primary theme colors.
Settings initialization and styleguide routes src/pages/server-settings.vue, src/pages/styleguide.vue, src/typed-router.d.ts	Initial tab transitions are disabled until mount completes. The styleguide and dev-debug routes are added to typed route maps.

Estimated code review effort: 3 (Moderate) | ~20 minutes

Possibly related PRs

• lakekeeper/console#193: Both changes modify server-settings tab behavior.
• lakekeeper/console#358: Both changes update the console-components dependency and dependency metadata.
• lakekeeper/console#353: Both changes modify src/pages/dependencies.vue.

Poem

A rabbit hops through themes so bright,
Spinner dots now fit just right.
Tabs wait one tick before they glide,
New styleguide paths open wide.
Components bloom in colors new—
A carrot-toast to all of you!

🚥 Pre-merge checks | ✅ 3 | ❌ 2

❌ Failed checks (1 warning, 1 inconclusive)

Check name	Status	Explanation	Resolution
Out of Scope Changes check	⚠️ Warning	The changes address design-system styling, theming, styleguide integration, and tab transitions, which are not included in the requirements listed in issue #39.	Link an issue that covers this work or update issue #39 to include the design-system, theming, and navigation scope.
Linked Issues check	❓ Inconclusive	Issue #39 lists unrelated 0.2.0 release features and fixes, so compliance with this design-system work cannot be verified.	Link the relevant design-system issue or add acceptance criteria for these styling, theming, and navigation changes.

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly summarizes the primary design-system alignment changes in the pull request.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch fix/ui-polish-batch

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}