Relese

.claude/launch.json

@@ -0,0 +1,19 @@
+{
+	"version": "0.0.1",
+	"configurations": [
+		{
+			"name": "client-dev",
+			"runtimeExecutable": "bun",
+			"runtimeArgs": ["run", "--cwd", "client", "dev"],
+			"port": 5173,
+			"autoPort": true
+		},
+		{
+			"name": "docs-dev",
+			"runtimeExecutable": "bun",
+			"runtimeArgs": ["run", "--cwd", "docs", "dev"],
+			"port": 5174,
+			"autoPort": true
+		}
+	]
+}

.github/workflows/docs.yml

@@ -0,0 +1,46 @@
+name: Docs
+
+on:
+  push:
+    branches:
+      - prod
+    paths:
+      - "docs/**"
+      - ".github/workflows/docs.yml"
+  workflow_dispatch:
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+concurrency:
+  group: pages
+  cancel-in-progress: false
+
+jobs:
+  build:
+    name: "📖 Build"
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: oven-sh/setup-bun@v2
+      - name: Install dependencies
+        run: cd docs && bun install --frozen-lockfile
+      - name: Build docs
+        run: cd docs && bun run build
+      - uses: actions/configure-pages@v5
+      - uses: actions/upload-pages-artifact@v3
+        with:
+          path: docs/config/.vitepress/dist
+
+  deploy:
+    name: "🚀 Deploy"
+    runs-on: ubuntu-latest
+    needs: build
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    steps:
+      - uses: actions/deploy-pages@v4
+        id: deployment

Makefile

@@ -1,3 +1,7 @@
+#
+# Fix
+#
+
 fix/license:
 	@ uv run reuse download --all
 	@ uv run reuse annotate --license AGPL-3.0-or-later --copyright "OpenAdmin" --recursive --skip-unrecognised openadmin/
@@ -15,6 +19,10 @@ fix/lint:
 
 fix: fix/license fix/format fix/lint
 
+#
+# Check
+#
+
 check/format:
 	@ cd client && bun run check:format
 	@ uv run ruff format --check .
@@ -24,6 +32,7 @@ check/lint:
 	@ uv run ruff check .
 
 check/typing:
+	@ cd client && bun run check:types
 	@ uv run pyright .
 
 check/cves:
@@ -46,6 +55,16 @@ check/test:
 
 check: check/format check/lint check/typing check/cves check/security check/unused check/spell check/license check/test
 
-dev/run:
+#
+# Dev
+#
+
+dev/client:
+	@ cd client && bun run dev
+
+dev/docs:
+	@ cd docs && bun run dev
+
+dev/example:
 	@ cd client && bun run build
-	@ PYTHONPATH=. uv run fastapi dev examples/main.py --host 0.0.0.0 --port $${PORT:-8000} --reload
+	@ PYTHONPATH=. uv run fastapi dev examples/main.py --host 0.0.0.0 --port $${PORT:-8000} --reload

REUSE.toml

@@ -13,6 +13,7 @@ path = [
     "**/__pycache__",
     "docs/**",
     "client/**",
+    ".claude/*"
 ]
 SPDX-FileCopyrightText = "OpenAdmin"
 SPDX-License-Identifier = "AGPL-3.0-or-later"

client/.claude/launch.json

@@ -0,0 +1,11 @@
+{
+	"version": "0.0.1",
+	"configurations": [
+		{
+			"name": "client-dev",
+			"runtimeExecutable": "npm",
+			"runtimeArgs": ["run", "dev", "--", "--port", "5183", "--strictPort"],
+			"port": 5183
+		}
+	]
+}

client/components.json

@@ -5,7 +5,7 @@
 	"typescript": true,
 	"tailwind": {
 		"config": "",
-		"css": "src/style.css",
+		"css": "src/styles/style.css",
 		"baseColor": "neutral",
 		"cssVariables": true,
 		"prefix": ""

client/package.json

@@ -12,26 +12,38 @@
 		"fix": "bun run fix:format && bun run fix:lint",
 		"check:format": "biome format .",
 		"check:lint": "biome lint .",
-		"check": "bun run check:format && bun run check:lint"
+		"check:types": "vue-tsc -b",
+		"check": "bun run check:format && bun run check:lint && bun run check:types"
 	},
 	"dependencies": {
-		"@lucide/vue": "^1.30.0",
+		"@fontsource/geist": "^5.3.0",
+		"@fontsource/geist-mono": "^5.3.0",
+		"@lucide/vue": "^1.32.0",
 		"@tailwindcss/vite": "^4.3.3",
+		"@tanstack/vue-form": "^1.33.5",
 		"@tanstack/vue-query": "^5.101.4",
+		"@tanstack/vue-table": "^9.1.2",
 		"@unovis/vue": "^1.6.7",
 		"@vueuse/core": "^14.4.0",
+		"@vueuse/integrations": "^14.4.0",
 		"class-variance-authority": "^0.7.1",
 		"clsx": "^2.1.1",
-		"reka-ui": "^2.10.1",
+		"dompurify": "^3.4.13",
+		"marked": "^18.0.9",
+		"reka-ui": "^2.10.3",
+		"sortablejs": "^1.15.7",
 		"tailwind-merge": "^3.6.0",
 		"tailwindcss": "^4.3.3",
 		"vue": "^3.5.40",
+		"vue-router": "^5.2.0",
 		"vue-sonner": "^2.0.9",
 		"zod": "^4.4.3"
 	},
 	"devDependencies": {
 		"@biomejs/biome": "^2.5.7",
+		"@iconify/vue": "^5.0.1",
 		"@types/node": "^26.2.0",
+		"@types/sortablejs": "^1.15.9",
 		"@vitejs/plugin-vue": "^6.0.8",
 		"@vue/tsconfig": "^0.9.1",
 		"tw-animate-css": "^1.4.0",

client/src/App.vue

@@ -3,16 +3,14 @@ SPDX-FileCopyrightText: 2026 OpenAdmin
 
 SPDX-License-Identifier: AGPL-3.0-or-later
 -->
-
 <script setup lang="ts">
-import { useOpenAdminSpec } from "@/composables/openadmin-spec"
-
-const { data, isLoading, error } = useOpenAdminSpec()
+import "vue-sonner/style.css"
+import { Toaster } from "@/components/ui/sonner"
 </script>
 
 <template>
-	<h1>Hello</h1>
-	{{ isLoading }}
-	{{ JSON.stringify(data) }}
-	{{ error?.message }}
+	<main>
+		<RouterView />
+		<Toaster />
+	</main>
 </template>

client/src/components/dashboard/Sidebar.vue

@@ -0,0 +1,67 @@
+<!--
+SPDX-FileCopyrightText: 2026 OpenAdmin
+
+SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+
+<script setup lang="ts">
+import { RouterLink, useRoute } from "vue-router"
+import {
+	Sidebar,
+	SidebarContent,
+	SidebarGroup,
+	SidebarGroupContent,
+	SidebarGroupLabel,
+	SidebarHeader,
+	SidebarMenu,
+	SidebarMenuButton,
+	SidebarMenuItem,
+	SidebarRail,
+} from "@/components/ui/sidebar"
+import { useSpec } from "@/composables/openadmin-spec"
+import { Icon } from "@iconify/vue"
+import logo from "@/assets/images/logo.png"
+
+const { data: spec } = useSpec()
+const route = useRoute()
+</script>
+
+<template>
+	<Sidebar collapsible="icon">
+		<SidebarHeader>
+			<div class="flex items-center gap-2 px-2 py-1.5 group-data-[collapsible=icon]:p-0!">
+				<img :src="logo" alt="Logo" class="shrink-0 rounded-md object-contain size-7">
+				<div class="flex flex-col overflow-hidden group-data-[collapsible=icon]:hidden">
+					<span class="truncate text-sm font-semibold">{{ spec?.name ?? "Admin" }}</span>
+					<span v-if="spec?.description" class="text-muted-foreground truncate text-xs">
+						{{ spec.description }}
+					</span>
+				</div>
+			</div>
+		</SidebarHeader>
+		<SidebarContent>
+			<SidebarGroup v-for="section in spec?.sections ?? []" :key="section.id">
+				<SidebarGroupLabel>{{ section.name }}</SidebarGroupLabel>
+				<SidebarGroupContent>
+					<SidebarMenu>
+						<SidebarMenuItem v-for="page in section.pages" :key="page.id">
+							<SidebarMenuButton
+								as-child
+								:is-active="route.params.sectionId === section.id && route.params.pageId === page.id"
+								:tooltip="page.name"
+							>
+								<RouterLink
+									:to="{ name: 'page', params: { sectionId: section.id, pageId: page.id } }"
+								>
+									<Icon v-if="page.icon" :icon="`lucide:${page.icon}`" />
+									<span>{{ page.name }}</span>
+								</RouterLink>
+							</SidebarMenuButton>
+						</SidebarMenuItem>
+					</SidebarMenu>
+				</SidebarGroupContent>
+			</SidebarGroup>
+		</SidebarContent>
+		<SidebarRail />
+	</Sidebar>
+</template>

client/src/components/dashboard/ThemeToggle.vue

@@ -0,0 +1,24 @@
+<!--
+SPDX-FileCopyrightText: 2026 OpenAdmin
+
+SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+
+<script setup lang="ts">
+import { MoonIcon, SunIcon } from "@lucide/vue"
+import { Button } from "@/components/ui/button"
+import { isDark, toggleDark } from "@/composables/theme"
+</script>
+
+<template>
+	<Button
+		type="button"
+		variant="ghost"
+		size="icon"
+		:aria-label="isDark ? 'Switch to light theme' : 'Switch to dark theme'"
+		@click="toggleDark()"
+	>
+		<SunIcon v-if="isDark" />
+		<MoonIcon v-else />
+	</Button>
+</template>

client/src/components/dashboard/TopPanel.vue

@@ -0,0 +1,53 @@
+<!--
+SPDX-FileCopyrightText: 2026 OpenAdmin
+
+SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+
+<script setup lang="ts">
+import { Icon } from "@iconify/vue"
+import { computed } from "vue"
+import { useRoute } from "vue-router"
+import ThemeToggle from "@/components/dashboard/ThemeToggle.vue"
+import {
+	Breadcrumb,
+	BreadcrumbItem,
+	BreadcrumbList,
+	BreadcrumbPage,
+	BreadcrumbSeparator,
+} from "@/components/ui/breadcrumb"
+import { Separator } from "@/components/ui/separator"
+import { SidebarTrigger } from "@/components/ui/sidebar"
+import { usePageSpec } from "@/composables/openadmin-page"
+import { useSectionSpec } from "@/composables/openadmin-section"
+
+const route = useRoute()
+
+const sectionId = computed(() => route.params.sectionId as string)
+const pageId = computed(() => route.params.pageId as string)
+
+const { data: section } = useSectionSpec({ sectionId })
+const { page } = usePageSpec({ sectionId, pageId })
+</script>
+
+<template>
+	<header class="flex h-14 shrink-0 items-center gap-2 border-b px-4">
+		<SidebarTrigger />
+		<Separator orientation="vertical" class="mr-2 h-4" />
+		<Breadcrumb v-if="section && page">
+			<BreadcrumbList>
+				<BreadcrumbItem>
+					<span class="text-muted-foreground">{{ section.name }}</span>
+				</BreadcrumbItem>
+				<BreadcrumbSeparator />
+				<BreadcrumbItem>
+					<BreadcrumbPage class="flex items-center gap-1.5">
+						<Icon v-if="page.icon" :icon="`lucide:${page.icon}`" />
+						{{ page.name }}
+					</BreadcrumbPage>
+				</BreadcrumbItem>
+			</BreadcrumbList>
+		</Breadcrumb>
+		<ThemeToggle class="ml-auto" />
+	</header>
+</template>

client/src/components/page/Action.vue

@@ -0,0 +1,31 @@
+<!--
+SPDX-FileCopyrightText: 2026 OpenAdmin
+
+SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+
+<script setup lang="ts">
+import { useColor } from "@/composables/colors"
+import { Button } from "@/components/ui/button"
+import { Icon } from "@iconify/vue"
+import { useAction } from "@/composables/openadmin-action"
+
+const props = defineProps<{
+	sectionId: string
+	pageId: string
+	actionId: string
+}>()
+const { action } = useAction({
+	sectionId: props.sectionId,
+	pageId: props.pageId,
+	actionId: props.actionId,
+})
+const { style } = useColor(() => action.value?.color || "slate")
+</script>
+
+<template>
+	<Button v-if="action" size="sm" variant="outline">
+		<Icon v-if="action.icon" :icon="`lucide:${action.icon}`" :class="style.text" />
+		{{ action.name }}
+	</Button>
+</template>