Skip to content

feat: adopt Konsta UI for native iOS/Android styled components #119

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
TheTahsinShahriar wants to merge 13 commits into
base: main
Choose a base branch
from
Open

feat: adopt Konsta UI for native iOS/Android styled components #119

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
cd90369
dx: fix dev scripts and add missing newline
TheTahsinShahriar Aug 16, 2026
0862cc6
feat: adopt Konsta UI - Phase 0 setup + Phase 1 component migration
TheTahsinShahriar Aug 16, 2026
5f44c9a
feat: Konsta UI Phase 2 - admin components + form migration
TheTahsinShahriar Aug 16, 2026
e794979
feat: Konsta UI Phase 3+4 - dark mode cleanup + layout migration
TheTahsinShahriar Aug 16, 2026
41096c4
feat: Konsta UI Phase 5 - migrate all pages
TheTahsinShahriar Aug 16, 2026
d01e3b1
feat: redo Konsta UI migration - native styling, no Tailwind overrides
TheTahsinShahriar Aug 16, 2026
62e8f55
feat: Konsta native - layouts, pages, type declarations
TheTahsinShahriar Aug 16, 2026
fa2c1e7
feat: Konsta native - searchbars, accordions, popovers, segmented, ra…
TheTahsinShahriar Aug 16, 2026
8ce94f3
chore: add kAccordion, kToolbar, kProgressbar, kSheet, kPhotoBrowser …
TheTahsinShahriar Aug 16, 2026
31ada86
fix: Konsta v5 compatibility + SSR + lint errors
TheTahsinShahriar Aug 16, 2026
30c8f76
feat: PWA install prompt as native Konsta dialog
TheTahsinShahriar Aug 16, 2026
62b01d2
feat: floating admin sidebar + cross-platform PWA install dialog
TheTahsinShahriar Aug 16, 2026
71bfa9d
feat: massive Konsta migration - buttons, cards, navbars, dialogs
TheTahsinShahriar Aug 16, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion composer.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,7 @@
],
"dev": [
"Composer\\Config::disableProcessTimeout",
"npx concurrently -c \"#93c5fd,#c4b5fd,#fb7185,#fdba74\" \"php artisan serve --host=localhost\" \"php artisan queue:listen --tries=1 --timeout=0\" \"php bin/dev-logs.php\" \"npm run dev\" --names=server,queue,logs,vite --kill-others"
"npx concurrently -c \"#93c5fd,#c4b5fd,#fb7185,#fdba74\" \"php artisan serve --host=localhost\" \"php artisan queue:listen --tries=1 --timeout=0\" \"php bin/dev-logs.php\" \"npm run dev:server\" --names=server,queue,logs,vite --kill-others"
],
"lint": [
"pint --parallel"
Expand Down
13 changes: 13 additions & 0 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 3 additions & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,8 @@
"scripts": {
"build": "vite build",
"build:ssr": "vite build && vite build --ssr",
"dev": "vite",
"dev": "composer run dev",
"dev:server": "vite",
"format": "prettier --write resources/",
"format:check": "prettier --check resources/",
"lint": "eslint . --fix",
Expand Down Expand Up @@ -36,6 +37,7 @@
"@vitejs/plugin-vue": "^6.0.0",
"clsx": "^2.1.1",
"concurrently": "^9.0.1",
"konsta": "^5.3.0",
"laravel-vite-plugin": "^3.1",
"lucide-vue-next": "^1.0.0",
"tailwind-merge": "^3.2.0",
Expand Down
80 changes: 2 additions & 78 deletions resources/css/app.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&display=swap');
@import 'tailwindcss';
@import 'konsta/vue/theme.css';

@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
@source '../../storage/framework/views/*.php';
Expand Down Expand Up @@ -31,81 +33,3 @@
@apply transition-colors duration-300;
}
}

.dark .bg-red-50 {
background-color: rgb(239 68 68 / 0.1);
}
.dark .bg-red-100 {
background-color: rgb(239 68 68 / 0.15);
}
.dark .text-red-600 {
color: rgb(248 113 113);
}
.dark .text-red-700 {
color: rgb(252 165 165);
}

.dark .bg-blue-50 {
background-color: rgb(59 130 246 / 0.1);
}
.dark .bg-blue-100 {
background-color: rgb(59 130 246 / 0.15);
}
.dark .text-blue-600 {
color: rgb(96 165 250);
}
.dark .text-blue-700 {
color: rgb(147 197 253);
}

.dark .bg-purple-50 {
background-color: rgb(168 85 247 / 0.1);
}
.dark .bg-purple-100 {
background-color: rgb(168 85 247 / 0.15);
}
.dark .text-purple-600 {
color: rgb(192 132 252);
}
.dark .text-purple-700 {
color: rgb(216 180 254);
}

.dark .bg-emerald-50 {
background-color: rgb(16 185 129 / 0.1);
}
.dark .bg-emerald-100 {
background-color: rgb(16 185 129 / 0.15);
}
.dark .text-emerald-600 {
color: rgb(52 211 153);
}
.dark .text-emerald-700 {
color: rgb(110 231 183);
}

.dark .bg-amber-50 {
background-color: rgb(245 158 11 / 0.1);
}
.dark .bg-amber-100 {
background-color: rgb(245 158 11 / 0.15);
}
.dark .text-amber-600 {
color: rgb(251 191 36);
}
.dark .text-amber-700 {
color: rgb(252 211 77);
}

.dark .bg-green-50 {
background-color: rgb(34 197 94 / 0.1);
}
.dark .bg-green-100 {
background-color: rgb(34 197 94 / 0.15);
}
.dark .text-green-600 {
color: rgb(74 222 128);
}
.dark .text-green-700 {
color: rgb(134 239 172);
}
51 changes: 24 additions & 27 deletions resources/js/components/BlogCard.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
<script setup lang="ts">
import { Link } from '@inertiajs/vue3';
import { kCard } from 'konsta/vue';
import { ArrowRight } from 'lucide-vue-next';
import { computed } from 'vue';

Expand Down Expand Up @@ -27,31 +28,28 @@ const formattedDate = computed(() => {
</script>

<template>
<div
class="group flex flex-col overflow-hidden rounded-xl border border-slate-200 bg-white shadow-xs transition-all duration-300 hover:-translate-y-0.5 hover:shadow-md dark:border-gray-700 dark:bg-gray-900 dark:hover:shadow-gray-900/50"
>
<!-- Featured Image Container -->
<Link
:href="'/blogs/' + blog.slug"
class="relative block aspect-[16/9] overflow-hidden bg-slate-100 dark:bg-gray-800"
>
<img
:src="blog.featured_image || 'https://placehold.co/600x400'"
:alt="blog.title"
class="h-full w-full object-cover transition-transform duration-300 ease-out group-hover:scale-105"
loading="lazy"
/>
<div
v-if="blog.category"
class="absolute top-2.5 left-2.5 rounded-md bg-indigo-600 px-2 py-0.5 text-[10px] font-bold tracking-wider text-white uppercase shadow-xs"
<kCard outline raised>
<template #header>
<Link
:href="'/blogs/' + blog.slug"
class="relative block aspect-[16/9] overflow-hidden"
>
{{ blog.category }}
</div>
</Link>
<img
:src="blog.featured_image || 'https://placehold.co/600x400'"
:alt="blog.title"
class="h-full w-full object-cover transition-transform duration-300 ease-out group-hover:scale-105"
loading="lazy"
/>
<div
v-if="blog.category"
class="absolute top-2.5 left-2.5 rounded-md bg-indigo-600 px-2 py-0.5 text-[10px] font-bold tracking-wider text-white uppercase shadow-xs"
>
{{ blog.category }}
</div>
</Link>
</template>

<!-- Card Body -->
<div class="flex flex-1 flex-col p-4">
<!-- News Meta (Author & Date) -->
<div
class="mb-1.5 flex items-center gap-1.5 text-xs text-slate-500 dark:text-gray-400"
>
Expand All @@ -78,7 +76,6 @@ const formattedDate = computed(() => {
</time>
</div>

<!-- Title -->
<Link :href="'/blogs/' + blog.slug" class="group/title block">
<h3
class="line-clamp-2 text-base leading-snug font-bold text-slate-900 transition duration-150 group-hover/title:text-indigo-600 dark:text-gray-100 dark:group-hover/title:text-indigo-400"
Expand All @@ -87,14 +84,14 @@ const formattedDate = computed(() => {
</h3>
</Link>

<!-- Excerpt -->
<p
class="mt-1.5 mb-3 line-clamp-2 text-xs leading-relaxed text-slate-600 dark:text-gray-400"
>
{{ blog.excerpt }}
</p>
</div>

<!-- Footer Action -->
<template #footer>
<div
class="mt-auto border-t border-slate-100 pt-3 dark:border-gray-800"
>
Expand All @@ -108,6 +105,6 @@ const formattedDate = computed(() => {
/>
</Link>
</div>
</div>
</div>
</template>
</kCard>
</template>
103 changes: 54 additions & 49 deletions resources/js/components/BlogRow.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
<script setup lang="ts">
import { Link, router } from '@inertiajs/vue3';
import { router } from '@inertiajs/vue3';
import { kButton, kList, kListItem } from 'konsta/vue';

const props = defineProps({
blog: {
type: Object,
Expand All @@ -15,37 +17,36 @@ const deleteBlog = () => {
</script>

<template>
<div
class="group relative flex items-center justify-between gap-3 rounded-xl border border-gray-100 bg-white p-3.5 transition-colors duration-150 hover:border-blue-200 dark:border-gray-700 dark:bg-gray-900 dark:hover:border-blue-500/30"
>
<Link
:href="`/admin/blogs/edit/${blog.slug}`"
class="flex min-w-0 flex-1 items-center gap-3 active:scale-[0.99]"
>
<div
class="h-12 w-12 shrink-0 overflow-hidden rounded-lg border border-gray-100 bg-gray-50 dark:border-gray-700 dark:bg-gray-800"
>
<img
v-if="blog.featured_image"
:src="blog.featured_image"
alt=""
class="h-full w-full object-cover"
/>
<kList>
<kListItem :link="true" :href="`/admin/blogs/edit/${blog.slug}`">
<template #media>
<div
v-else
class="flex h-full w-full items-center justify-center text-xs font-bold text-gray-400 uppercase dark:text-gray-500"
class="h-12 w-12 shrink-0 overflow-hidden rounded-lg border border-gray-100 bg-gray-50 dark:border-gray-700 dark:bg-gray-800"
>
TXT
<img
v-if="blog.featured_image"
:src="blog.featured_image"
alt=""
class="h-full w-full object-cover"
/>
<div
v-else
class="flex h-full w-full items-center justify-center text-xs font-bold text-gray-400 uppercase dark:text-gray-500"
>
TXT
</div>
</div>
</div>
</template>

<div class="min-w-0 flex-1">
<template #title>
<h4
class="truncate text-sm font-semibold text-gray-900 dark:text-gray-100"
>
{{ blog.title }}
</h4>
</template>

<template #subtitle>
<div
class="mt-1 flex flex-wrap items-center gap-x-2 gap-y-1 text-xs text-gray-500 dark:text-gray-400"
>
Expand All @@ -67,33 +68,37 @@ const deleteBlog = () => {
Featured
</span>
</div>
</div>
</Link>
</template>

<div class="flex shrink-0 items-center gap-2 pl-1">
<button
@click.stop.prevent="deleteBlog"
type="button"
class="rounded-lg p-1.5 text-gray-400 transition-colors hover:bg-red-50 hover:text-red-600 dark:text-gray-500 dark:hover:bg-red-500/10 dark:hover:text-red-400"
title="Delete blog"
>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="h-5 w-5"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0"
/>
</svg>
</button>
<template #after>
<div class="flex shrink-0 items-center gap-2 pl-1">
<k-button
clear
small
@click.stop.prevent="deleteBlog"
title="Delete blog"
>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="h-5 w-5"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0"
/>
</svg>
</k-button>

<span class="text-lg text-gray-300 dark:text-gray-600">→</span>
</div>
</div>
<span class="text-lg text-gray-300 dark:text-gray-600"
>→</span
>
</div>
</template>
</kListItem>
</kList>
</template>
2 changes: 1 addition & 1 deletion resources/js/components/BreadcrumbNav.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ const breadcrumbs = computed(() => {

<template>
<nav
class="no-scrollbar mb-6 flex items-center space-x-2 overflow-x-auto text-xs font-semibold tracking-wider whitespace-nowrap text-slate-400 uppercase dark:text-gray-500"
class="mb-6 no-scrollbar flex items-center space-x-2 overflow-x-auto text-xs font-semibold tracking-wider whitespace-nowrap text-slate-400 uppercase dark:text-gray-500"
>
<Link
href="/"
Expand Down
Loading