Implement Fluid Emerald app redesign

resources/js/pages/projects/Show.vue

@@ -1,6 +1,13 @@
 <script setup lang="ts">
 import { Head, Link } from '@inertiajs/vue3';
-import { FolderGit2, LayoutGrid, ListTodo, Settings2 } from 'lucide-vue-next';
+import {
+    ArrowRight,
+    FolderGit2,
+    LayoutGrid,
+    ListTodo,
+    Settings2,
+} from 'lucide-vue-next';
+import { computed } from 'vue';
 import Heading from '@/components/Heading.vue';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
@@ -38,39 +45,52 @@ const breadcrumbs: BreadcrumbItem[] = [
     },
 ];
 
-const projectAreas = [
-    {
-        title: 'Backlog',
-        description:
-            'Create tickets, review incoming work, and move ready items into the board workflow.',
-        icon: ListTodo,
-    },
-    {
-        title: 'Board',
-        description:
-            'Track active work across the project-defined Kanban columns and update ticket status.',
-        icon: LayoutGrid,
-    },
-    {
-        title: 'Project settings',
-        description:
-            'Manage board columns, ticket metadata, and the project-specific workflow configuration.',
-        icon: Settings2,
-    },
-    {
-        title: 'Repositories',
-        description:
-            'Link project repositories so tickets can later discover related branches and pull requests.',
-        icon: FolderGit2,
-    },
-];
+const projectAreas = computed(() => {
+    const areas = [
+        {
+            title: 'Backlog',
+            description:
+                'Create tickets, review incoming work, and move ready items into the board workflow.',
+            icon: ListTodo,
+            href: backlogIndex(props.project.id),
+        },
+        {
+            title: 'Board',
+            description:
+                'Track active work across the project-defined Kanban columns and update ticket status.',
+            icon: LayoutGrid,
+            href: boardIndex(props.project.id),
+        },
+    ];
+
+    if (props.canManageAccess) {
+        areas.push(
+            {
+                title: 'Project settings',
+                description:
+                    'Manage board columns, ticket metadata, and the project-specific workflow configuration.',
+                icon: Settings2,
+                href: boardSettings(props.project.id),
+            },
+            {
+                title: 'Repositories',
+                description:
+                    'Connect repositories and discover ticket branches and pull requests.',
+                icon: FolderGit2,
+                href: repositorySettings(props.project.id),
+            },
+        );
+    }
+
+    return areas;
+});
 </script>
 
 <template>
-    <AppLayout :breadcrumbs="breadcrumbs">
+    <AppLayout :breadcrumbs="breadcrumbs" :project="project">
         <Head :title="project.name" />
 
-        <div class="flex flex-1 flex-col gap-6 p-4">
+        <div class="app-page">
             <div
                 class="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between"
             >
@@ -80,7 +100,7 @@ const projectAreas = [
                     </Badge>
                     <Heading
                         :title="project.name"
-                        description="Project hub for the upcoming backlog, board, and settings work."
+                        description="Your project workspace for tickets, workflow, integrations, and access."
                     />
                 </div>
 
@@ -117,7 +137,9 @@ const projectAreas = [
                         Built from template {{ templateState.templateName }}
                     </CardTitle>
                     <CardDescription>
-                        This project keeps its template link. Inherited areas follow the template baseline; overridden areas were customized locally.
+                        This project keeps its template link. Inherited areas
+                        follow the template baseline; overridden areas were
+                        customized locally.
                     </CardDescription>
                 </CardHeader>
                 <CardContent class="flex flex-wrap gap-2">
@@ -177,27 +199,35 @@ const projectAreas = [
                 </Button>
             </div>
 
-            <div class="grid gap-4 md:grid-cols-3">
-                <Card
+            <div class="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
+                <Link
                     v-for="area in projectAreas"
                     :key="area.title"
-                    class="h-full"
+                    :href="area.href"
+                    class="group"
                 >
-                    <CardHeader>
-                        <div
-                            class="bg-muted text-foreground mb-3 flex size-10 items-center justify-center rounded-full"
+                    <Card class="h-full py-0">
+                        <CardHeader class="p-5">
+                            <div
+                                class="bg-primary/10 text-primary mb-3 flex size-10 items-center justify-center rounded-lg"
+                            >
+                                <component :is="area.icon" class="size-5" />
+                            </div>
+                            <CardTitle>{{ area.title }}</CardTitle>
+                            <CardDescription>{{
+                                area.description
+                            }}</CardDescription>
+                        </CardHeader>
+                        <CardContent
+                            class="text-primary flex items-center gap-2 px-5 pb-5 text-sm font-semibold"
                         >
-                            <component :is="area.icon" class="size-5" />
-                        </div>
-                        <CardTitle>{{ area.title }}</CardTitle>
-                        <CardDescription>{{
-                            area.description
-                        }}</CardDescription>
-                    </CardHeader>
-                    <CardContent class="text-muted-foreground text-sm">
-                        Use the project shortcuts above to open this area.
-                    </CardContent>
-                </Card>
+                            Open area
+                            <ArrowRight
+                                class="size-4 transition-transform group-hover:translate-x-1"
+                            />
+                        </CardContent>
+                    </Card>
+                </Link>
             </div>
         </div>
     </AppLayout>