dont use [...path] routing since it breaks building statically

frontend/components/AppBreadcrumbs.vue

@@ -0,0 +1,128 @@
+<script setup lang="ts">
+import {
+    Breadcrumb,
+    BreadcrumbList,
+    BreadcrumbItem,
+    BreadcrumbLink,
+    BreadcrumbPage,
+    BreadcrumbSeparator,
+} from '@/components/ui/breadcrumb';
+import type { BreadcrumbData } from '~/types';
+const route = useRoute();
+const store = useWarrenStore();
+
+const routeCrumbs = computed<BreadcrumbData[]>(() => {
+    if (route.path === '/') {
+        return [{ name: '/', href: '/' }];
+    }
+
+    const rawCrumbs = route.path.split('/');
+    const crumbs: BreadcrumbData[] = [];
+
+    crumbs[0] = {
+        name: '/',
+        href: '/',
+    };
+    for (let i = 1; i < rawCrumbs.length; i++) {
+        crumbs.push({
+            name: rawCrumbs[i],
+            href: rawCrumbs.slice(0, i + 1).join('/'),
+        });
+    }
+    return crumbs;
+});
+
+type WarrenBreadcrumbData = {
+    name: string;
+    action: () => void;
+};
+
+const warrenCrumbs = computed<WarrenBreadcrumbData[]>(() => {
+    if (store.current == null) {
+        return [];
+    }
+
+    const warren = store.warrens[store.current.warrenId];
+    const rawCrumbs = store.current.path.split('/').filter((c) => c.length > 0);
+    const crumbs: WarrenBreadcrumbData[] = [
+        {
+            name: '/',
+            action: async () => {
+                await navigateTo({
+                    path: '/',
+                });
+                store.clearCurrentWarren();
+            },
+        },
+        {
+            name: 'warrens',
+            action: async () => {
+                await navigateTo({
+                    path: '/warrens',
+                });
+                store.clearCurrentWarren();
+            },
+        },
+        {
+            name: warren.name,
+            action: () => store.setCurrentWarren(warren.id, '/'),
+        },
+    ];
+
+    for (let i = 0; i < rawCrumbs.length; i++) {
+        const path = rawCrumbs.slice(0, i + 1).join('/');
+        crumbs.push({
+            name: rawCrumbs[i],
+            action: () => store.setCurrentWarrenPath(path),
+        });
+    }
+    return crumbs;
+});
+</script>
+
+<template>
+    <Breadcrumb>
+        <BreadcrumbList>
+            <template v-if="store.current == null">
+                <template v-for="(crumb, i) in routeCrumbs" :key="i">
+                    <BreadcrumbItem>
+                        <NuxtLink
+                            v-if="i < routeCrumbs.length - 1"
+                            :to="crumb.href"
+                            as-child
+                        >
+                            <BreadcrumbLink>
+                                {{ crumb.name }}
+                            </BreadcrumbLink>
+                        </NuxtLink>
+                        <BreadcrumbPage v-else>{{ crumb.name }}</BreadcrumbPage>
+                    </BreadcrumbItem>
+                    <BreadcrumbSeparator
+                        v-if="i < routeCrumbs.length - 1"
+                        class="hidden md:block"
+                    />
+                </template>
+            </template>
+            <template
+                v-for="(crumb, i) in warrenCrumbs"
+                v-else-if="route.path.startsWith('/warrens')"
+                :key="i"
+            >
+                <BreadcrumbItem
+                    v-if="i < warrenCrumbs.length - 1"
+                    class="cursor-pointer"
+                    @click="crumb.action"
+                >
+                    <BreadcrumbLink>
+                        {{ crumb.name }}
+                    </BreadcrumbLink>
+                </BreadcrumbItem>
+                <BreadcrumbPage v-else>{{ crumb.name }}</BreadcrumbPage>
+                <BreadcrumbSeparator
+                    v-if="i < warrenCrumbs.length - 1"
+                    class="hidden md:block"
+                />
+            </template>
+        </BreadcrumbList>
+    </Breadcrumb>
+</template>