Implement projects and project keys

2026-03-25 00:44:37 +01:00
parent aeee3d2640
commit 7d4b0733b3
16 changed files with 716 additions and 1 deletions
@@ -0,0 +1,93 @@
+<script setup lang="ts">
+import { Head, Link } from '@inertiajs/vue3';
+import { Folder, Plus } from 'lucide-vue-next';
+import Heading from '@/components/Heading.vue';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import {
+    Card,
+    CardContent,
+    CardDescription,
+    CardHeader,
+    CardTitle,
+} from '@/components/ui/card';
+import AppLayout from '@/layouts/AppLayout.vue';
+import { create, index, show } from '@/routes/projects';
+import type { BreadcrumbItem, ProjectsIndexPageProps } from '@/types';
+
+defineProps<ProjectsIndexPageProps>();
+
+const breadcrumbs: BreadcrumbItem[] = [
+    {
+        title: 'Projects',
+        href: index(),
+    },
+];
+</script>
+
+<template>
+    <AppLayout :breadcrumbs="breadcrumbs">
+        <Head title="Projects" />
+
+        <div class="flex flex-1 flex-col gap-6 p-4">
+            <div
+                class="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between"
+            >
+                <Heading
+                    title="Projects"
+                    description="Create and browse project spaces that will later host boards, backlog, and settings."
+                />
+
+                <Button as-child>
+                    <Link :href="create()">
+                        <Plus class="size-4" />
+                        New project
+                    </Link>
+                </Button>
+            </div>
+
+            <div
+                v-if="projects.length === 0"
+                class="rounded-xl border border-dashed px-6 py-10 text-center text-sm text-muted-foreground"
+            >
+                No projects exist yet. Create the first one to start building
+                out board, backlog, and settings areas.
+            </div>
+
+            <div v-else class="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
+                <Link
+                    v-for="project in projects"
+                    :key="project.id"
+                    :href="show(project.id)"
+                    class="group block"
+                >
+                    <Card
+                        class="h-full border-border/80 transition-colors group-hover:border-primary/40"
+                    >
+                        <CardHeader class="gap-3">
+                            <div class="flex items-start justify-between gap-3">
+                                <div class="space-y-1">
+                                    <CardTitle>{{ project.name }}</CardTitle>
+                                    <CardDescription>
+                                        Project workspace entry point
+                                    </CardDescription>
+                                </div>
+
+                                <Badge variant="outline" class="px-2.5 py-1">
+                                    {{ project.key }}
+                                </Badge>
+                            </div>
+                        </CardHeader>
+
+                        <CardContent
+                            class="flex items-center gap-2 text-sm text-muted-foreground"
+                        >
+                            <Folder class="size-4" />
+                            Open board, backlog, and settings hub
+                        </CardContent>
+                    </Card>
+                </Link>
+            </div>
+        </div>
+    </AppLayout>
+</template>