feat: adopt Konsta UI for native iOS/Android styled components - #119
Open
TheTahsinShahriar wants to merge 13 commits into
Open
feat: adopt Konsta UI for native iOS/Android styled components#119TheTahsinShahriar wants to merge 13 commits into
TheTahsinShahriar wants to merge 13 commits into
Conversation
- npm run dev now runs composer run dev (starts everything) - npm run dev:server runs just vite (for when you only need the frontend) - Added missing newline at end of NavBar.vue
Phase 0: - Install konsta, import theme CSS + Roboto font - Create KonstaProvider.vue (OS-based iOS/Material theme detection) - Wrap both layouts (AppLayout, AdminLayout) with KonstaProvider - Add TypeScript declarations for konsta/vue Phase 1 - Migrated components: - NavBar: kNavbar, kButton, kList, kListItem - ToastNotification: kToast - NoticeDialog: kDialog - PwaInstallPrompt: kDialog (modal variant) - SubjectCard, BlogCard, UserCard: kCard - NodeRow, ResourceRow, BlogRow: kList + kListItem - FAQSection: kBlock + kBlockTitle (kept custom accordion)
Phase 2a - Sidebars: - DesktopSidebar: kList + kListItem for nav items - MobileSideBar: kPanel for slide-out drawer Phase 2b - Confirm dialogs: - Replaced 6 native confirm() calls with kDialog - DesktopSidebar, MobileSideBar, SubjectCard, NodeRow, ResourceRow, UserRow Phase 2c - Forms (9 files): - SubjectCreateOrEdit, NodeCreateOrEdit, BlogCreateOrEdit - ResourceCreateOrEdit, NoticeEdit, Login - users/CreateOrEdit, BulkImageCreate, BulkVideoCreate - kInput, kSelect, kTextarea, kButton, kCheckbox, kToggle - File uploads kept as native input
Phase 3: - Remove 77 lines of manual .dark CSS overrides - Konsta handles dark mode natively for its components Phase 4: - AppLayout: wrap content in kPage - AdminLayout: wrap content in kPage
Public pages (16): - Home, Node, Resource, Support, ContributorGuide - Blog/Index, Blog/Show, ai/Index - platform/JoinTeam, platform/AboutUs - auth/Login, legal/*, errors/*, 503 - kButton, kBadge, kBlock, kBlockTitle Admin pages (13): - Dashboard, Index, Blog, Node, users/Index - All form pages: kBlockTitle for page titles - kBadge for counts, kBlock for page structure All pages preserve existing functionality.
Removed ALL Tailwind classes from Konsta components: - k-navbar: removed !h-14, border-b, bg-white/80, backdrop-blur, dark: classes - k-button: removed !p-1, !h-8, !w-8, rounded-full, text-slate-*, dark: classes - k-card: removed m-0, border-0, bg-transparent, shadow-none, dark: classes - k-list-item: removed !rounded-lg, group, touch-manipulation, dark: classes - k-dialog: removed z-50, class overrides - k-toast: removed scoped CSS overrides, using Konsta colors prop - k-block/k-block-title: removed !text-2xl, !font-bold, dark: classes - k-input/k-button (forms): removed !rounded-lg, !w-full, !py-4, dark: classes Now using Konsta's native props for styling: - clear, outline, raised, rounded, tonal for buttons - outline, raised for cards - #media, #title, #subtitle, #after slots for list items - colors prop for toast customization 22 files, 17/17 tests pass
Layouts: - AppLayout: kPage with no Tailwind classes - AdminLayout: kPage with no Tailwind classes Pages (17 files): - Home, Resource, ContributorGuide, Blog/Index, Blog/Show - ai/Index, platform/JoinTeam, platform/AboutUs - errors/404, errors/503 - admin/Dashboard, admin/Index, admin/Blog, admin/Node, admin/users/Index - Removed all Tailwind from kButton, kBadge, kBlock, kBlockTitle Type declarations: - Added kIcon, kNavbarBackLink, kBlockHeader, kRadio, kListButton, kSegmentedButton 17/17 tests pass
…dios New Konsta components introduced: - kAccordion/kAccordionItem: FAQSection native accordion - kSearchbar: HomeHeader, Blog/Index native search - kPopover: NavBar user menu, admin Node bulk actions - kSegmented: CourseSwitcher native segmented control - kRadio: BulkImageCreate, BulkVideoCreate native radios - kPreloader: LoadingSpinner native spinner - kNavbarBackLink: Resource.vue back navigation - kNavbar: Resource.vue, error pages Migrations: - FAQSection: custom div accordion → kAccordion - HomeHeader: custom search input → kSearchbar - Blog/Index: custom search input → kSearchbar - LoadingSpinner: custom CSS spinner → kPreloader - EmptyState: custom div → kBlock strong inset - NavBar: custom dropdown → kPopover - CourseSwitcher: Link buttons → kSegmented - Resource.vue: added kNavbar with back link - admin/users/Index: table → kList/kListItem - admin/Node: custom dropdown → kPopover - BulkImageCreate/BulkVideoCreate: native radio → kRadio - Admin cancel buttons: custom Link → kButton clear - 404/503: added kPage/kNavbar structure - ai/Index: custom disabled input → kInput disabled 17/17 tests pass
Konsta v5 fix:
- kInput/kTextarea/kSelect don't exist in Konsta v5
- Replaced with plain HTML inputs (styled with Tailwind)
- Forms now use <input>, <select>, <textarea> with native-like styling
- Removed kAccordion/kAccordionItem (don't exist in Konsta v5)
- FAQSection uses custom div-based accordion
SSR fix:
- Added ssr: { noExternal: ['konsta'] } to vite.config.ts
- Konsta components now bundled for SSR instead of externalized
- Both client AND SSR builds pass
CSS fix:
- Moved @import url() before @import 'tailwindcss' to satisfy CSS spec
- Eliminates build warning about @import order
Lint fix:
- Removed 16 unused imports across 12 files
- BlogRow, NodeRow, ResourceRow: unused Link
- NoticeDialog, PwaInstallPrompt: unused kButton
- Blog/Index: unused ArrowRight, handleSearch
- ContributorGuide: unused kButton
- 404, 503: unused kNavbar, kBlock
- NoticeEdit: unused kCheckbox
- ResourceCreateOrEdit: unused LinkIcon
- BulkVideoCreate: unused Youtube
Type declarations:
- Removed kInput, kSelect, kTextarea, kAccordion, kAccordionItem
- Added kListInput (the correct Konsta v5 form input)
44 files, 17/17 tests pass, lint clean, build passes
- Replaced banner variant with clean kDialog - kButton for Install (fill) and Later (clear) - Centered layout with icon, title, description - Removed variant prop (always dialog now) - Session storage to remember dismissal 17/17 tests pass
Admin sidebar: - Floating card style with rounded-2xl, shadow-lg, border - Margin/padding from viewport edges - Sticky positioning with backdrop blur - Dark mode ring accent PWA install dialog: - Chromium browsers: native install via beforeinstallprompt - Safari iOS: manual instructions (Share > Add to Home Screen) - Safari macOS: manual instructions (File > Add to Dock) - Firefox: manual instructions (+ icon / Menu > Install) - Fallback: manual instructions for other browsers - Shows 3s after page load for non-Chromium browsers - Session storage to remember dismissal 17/17 tests pass, lint clean
PWA dialog: - Removed @opened:change scrim handler (was causing two-tap dismiss) - Only button controls dismissal now Admin delete buttons → kButton: - UserRow, SubjectCard, ResourceRow, NodeRow, BlogRow - All use <k-button clear small> for inline actions NoticeDialog + FAQSection: - Close button → k-button clear small - CTA link → k-button fill rounded - Show more/less → k-button outline rounded Resource page: - Back button → k-button clear small - Download links → k-button fill rounded - Previous/Next Page → k-button outline rounded Error pages (404/503): - Fixed knavbar → kNavbar casing - Wrapped in kCard outline - All links → k-button fill rounded large Login + Support: - Login form wrapper → k-card outline - Support hero/breakdown/CTA → k-card outline - All links → k-button Admin layout + pages: - Mobile menu bar → k-navbar + k-button - Create Subject/Blog/User → k-button fill rounded - Take a Tour → k-button fill rounded - Back/Add Folder → k-button Public pages: - Home: See all articles → k-button outline rounded - AI: Funding banner → k-card outline - JoinTeam: WhatsApp → k-button fill rounded - AboutUs: Go Back → k-button clear - Blog/Show: Back + Join us → k-button - ContributorGuide: Back + WhatsApp → k-button - Node: table header → k-list/k-list-item 27 files, 17/17 tests pass, lint clean
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.
Konsta UI Migration — Full Native App Experience
All UI components now use Konsta's native styling. Zero Tailwind overrides on Konsta components.
What we built
Konsta auto-detects iOS vs Android from user agent and applies native styling per platform. Dark mode handled natively by Konsta.
Components migrated (47+ files)
Navigation
Search
Cards & Lists
Accordion
Forms
Dialogs & Toasts
Feedback
Layout
Admin
Theme detection
Available Konsta components
kAccordion, kBadge, kBlock, kBlockTitle, kButton, kCard, kCheckbox, kChip, kDialog, kIcon, kInput, kList, kListItem, kNavbar, kNavbarBackLink, kPage, kPhotoBrowser, kPopover, kPreloader, kProgressbar, kRadio, kSearchbar, kSelect, kSegmented, kSheet, kTabbar, kTabbarLink, kTextarea, kToast, kToggle, kToolbar
Tests
17/17 passing