Poc

client/src/components/dashboard/TopPanel.vue

@@ -20,14 +20,19 @@ import { Separator } from "@/components/ui/separator"
 import { SidebarTrigger } from "@/components/ui/sidebar"
 import { usePageSpec } from "@/composables/openadmin-page"
 import { useSectionSpec } from "@/composables/openadmin-section"
+import { useForm } from "@/composables/openadmin-form"
+import { useColor } from "@/composables/colors"
 
 const route = useRoute()
 
 const sectionId = computed(() => route.params.sectionId as string)
 const pageId = computed(() => route.params.pageId as string)
+const formId = computed(() => (route.params.formId || "") as string)
 
 const { data: section } = useSectionSpec({ sectionId })
 const { page } = usePageSpec({ sectionId, pageId })
+const { form } = useForm({ sectionId, pageId, formId })
+const { style } = useColor(() => form.value?.color || "slate")
 </script>
 
 <template>
@@ -46,6 +51,14 @@ const { page } = usePageSpec({ sectionId, pageId })
 						{{ page.name }}
 					</BreadcrumbPage>
 				</BreadcrumbItem>
+
+				<BreadcrumbSeparator v-if="form" />
+				<BreadcrumbItem v-if="form">
+					<BreadcrumbPage class="flex items-center gap-1.5">
+						<Icon v-if="form.icon" :icon="`lucide:${form.icon}`" :class="style.text" />
+						{{ form.name }}
+					</BreadcrumbPage>
+				</BreadcrumbItem>
 			</BreadcrumbList>
 		</Breadcrumb>
 		<ThemeToggle class="ml-auto" />

client/src/components/page/Form.vue

@@ -5,27 +5,21 @@ 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 { useForm } from "@/composables/openadmin-form"
 
 const props = defineProps<{
 	sectionId: string
 	pageId: string
 	formId: string
 }>()
+
 const { form } = useForm({
 	sectionId: props.sectionId,
 	pageId: props.pageId,
 	formId: props.formId,
 })
-const { style } = useColor(() => form.value?.color || "slate")
 </script>
 
 <template>
-	<Button v-if="form" size="sm" variant="outline">
-		<Icon v-if="form.icon" :icon="`lucide:${form.icon}`" :class="style.text" />
-		{{ form.name }}
-	</Button>
+	<h1>Form ! {{ form }}</h1>
 </template>

client/src/components/page/FormButton.vue

@@ -0,0 +1,36 @@
+<!--
+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 { RouterLink } from "vue-router"
+import { useForm } from "@/composables/openadmin-form"
+
+const props = defineProps<{
+	sectionId: string
+	pageId: string
+	formId: string
+}>()
+const { form } = useForm({
+	sectionId: props.sectionId,
+	pageId: props.pageId,
+	formId: props.formId,
+})
+const { style } = useColor(() => form.value?.color || "slate")
+</script>
+
+<template>
+	<Button v-if="form" as-child size="sm" variant="outline">
+		<RouterLink
+			:to="{ name: 'form', params: { sectionId: props.sectionId, pageId: props.pageId, formId: props.formId } }"
+		>
+			<Icon v-if="form.icon" :icon="`lucide:${form.icon}`" :class="style.text" />
+			{{ form.name }}
+		</RouterLink>
+	</Button>
+</template>

client/src/components/page/PageSections.vue

@@ -7,8 +7,8 @@ SPDX-License-Identifier: AGPL-3.0-or-later
 <script setup lang="ts">
 import { Icon } from "@iconify/vue"
 import { computed } from "vue"
-import Action from "@/components/page/Action.vue"
-import Form from "@/components/page/Form.vue"
+import ActionButton from "@/components/page/ActionButton.vue"
+import FormButton from "@/components/page/FormButton.vue"
 import Markdown from "@/components/page/Markdown.vue"
 import Stat from "@/components/page/Stat.vue"
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
@@ -36,13 +36,18 @@ const tabItems = computed(() =>
 <template>
 	<div class="flex flex-col gap-24">
 		<section v-if="actions.length" class="flex flex-wrap justify-end gap-2">
-			<Action
+			<ActionButton
 				v-for="action in actions"
 				:section-id="sectionId"
 				:page-id="pageId"
 				:action-id="action.id"
 			/>
-			<Form v-for="form in forms" :section-id="sectionId" :page-id="pageId" :form-id="form.id" />
+			<FormButton
+				v-for="form in forms"
+				:section-id="sectionId"
+				:page-id="pageId"
+				:form-id="form.id"
+			/>
 		</section>
 		<section v-if="stats.length" class="flex flex-wrap justify-center gap-4">
 			<Stat v-for="stat in stats" :section-id="sectionId" :page-id="pageId" :stat-id="stat.id" />

client/src/router/index.ts

@@ -30,6 +30,11 @@ export const router = createRouter({
 					name: "page",
 					component: () => import("@/views/PageView.vue"),
 				},
+				{
+					path: ":sectionId/:pageId/forms/:formId",
+					name: "form",
+					component: () => import("@/views/FormView.vue"),
+				},
 			],
 		},
 	],

client/src/views/FormView.vue

@@ -0,0 +1,21 @@
+<!--
+SPDX-FileCopyrightText: 2026 OpenAdmin
+
+SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+
+<script setup lang="ts">
+import { computed } from "vue"
+import { useRoute } from "vue-router"
+import Form from "@/components/page/Form.vue"
+
+const route = useRoute()
+
+const pageId = computed(() => route.params.pageId as string)
+const sectionId = computed(() => route.params.sectionId as string)
+const formId = computed(() => route.params.formId as string)
+</script>
+
+<template>
+	<Form :section-id="sectionId" :page-id="pageId" :form-id="formId" />
+</template>