feat(ui): add subturtle-ui design system, new app shell and progress screen - #60
Merged
Merged
Conversation
…screen Replaces pilotui's chrome with an in-house component library built on Subturtle's real brand (rose #f91e5a, jade, Nunito, warm paper) rather than the VRISTO admin template's leftover blue. First milestone: the library, the app shell, and the Progress screen (/statistic). The remaining eight designed screens follow one per PR; pilotui stays installed until the last usage is gone. New ui/ package (subturtle-ui), a sibling of frontend/ and server/: - Vite lib mode, single ESM+CJS entry, real .d.ts, one prebuilt dist/style.css, vue as the only peer dependency. - Tailwind is compiled away at build time, with prefix 'st-' and preflight off. The library's CSS loads beside each consumer's own Tailwind build, so an unprefixed .rounded-lg or .bg-primary would collide and load order would decide styling app-wide. This also frees the library's config from having to agree with any consumer's, which is what lets subturtle-extension-apps adopt it unchanged. - Design tokens keep the names used in the design source, but store colors as RGB channels so opacity modifiers work and a dark theme is a pure-CSS override. :root.dark is scaffolded and empty; the theme switcher stays, so dark currently leaves these components in their light palette. - Icons are inlined from @iconify/json at build time: the design calls icons by runtime name, which Tailwind selectors cannot pre-generate, and the iconify-icon web component fetches from a CDN, which content scripts cannot rely on. - Components: StAppShell, StSidebarNav, StButton, StIconButton, StCard, StBadge, StAvatar, StEmptyState, StSkeleton, StIcon, StStatTile, StBundleCard. Nav hover states, focus-visible rings and the collapsible rail are added rather than ported; the design's React sources are styled with inline style objects and cannot express them. Frontend: - StAppShell becomes the default layout. pilotui's <App> stays as the theming provider every un-migrated screen still reads from. - /statistic rebuilt with populated, empty, locked and loading states. The week-over-week delta and streak are derived client-side from a 14-day series; the RPC drops interior zero-days, so the series is re-expanded against real dates before use. Tiles read "—" rather than 0 when the tier lock hides the underlying numbers. - subturtle-ui/tailwind-tokens is spread into the app's Tailwind config so page markup can use the same tokens (bg-st-card, text-st-strong, rounded-st-lg). Known gap: the streak counts days a phrase was saved, not days reviewed. It is the closest signal available client-side; a real streak belongs on the server. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Two conflicts, both where dev's work overlapped the new shell:
- useDashboardNavigatorItems.ts: kept the redesigned StNavGroup shape, but took
dev's nav terminology for the settings entry. /settings/preferences became a
tabbed Review + Pool page on dev, so the design's original "Review settings"
label would now under-describe it; it uses t('preferences.nav') instead. The
now-unused nav.review-settings locale key is dropped.
- layouts/default.vue: pilotui's DashboardShell had a dedicated #footer slot
"right below of the content", which dev used for the global version footer.
StAppShell has no footer slot, so PartialAppVersionFooter moves to the end of
the content column, which renders in the same place.
Nothing dev added was dropped: of the six files both sides touched, four
auto-merged (locales, nuxt.config, package.json, yarn.lock) and dev's changes to
statistic.vue and the other rewritten files did not exist.
|
🎉 This PR is included in version 1.0.0-dev.6 🎉 The release is available on GitHub release Your semantic-release bot 📦🚀 |
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
1 participant
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.
📋 Summary
This PR introduces the Subturtle UI design system along with a new application shell and a progress screen, enhancing the overall UI framework and user experience.
🔗 Related Tasks
#b74a18 - Add Subturtle UI design system, new app shell, and progress screen
📝 Additional Details
The changes include integration of the new design system into the existing codebase, improving UI consistency and facilitating future UI development.
📜 Commit List
871957e feat(ui): add subturtle-ui design system, new app shell and progress screen
0b84648 Merge branch 'new-design' into claude/subturtle-component-library-b74a18