fix: polish project workspace interactions

resources/js/pages/projects/Backlog.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
 import { Form, Head, Link } from '@inertiajs/vue3';
+import { Plus } from 'lucide-vue-next';
 import ProjectBoardController from '@/actions/App/Http/Controllers/ProjectBoardController';
-import Heading from '@/components/Heading.vue';
+import ProjectPageHeader from '@/components/projects/ProjectPageHeader.vue';
 import ProjectTabs from '@/components/projects/ProjectTabs.vue';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
@@ -72,34 +73,25 @@ const allowedTargetStatuses = (ticket: TicketModel): TicketStatusModel[] => {
         <Head :title="`${project.name} backlog`" />
 
         <div class="app-page max-w-none gap-5">
-            <div
-                class="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between"
+            <ProjectPageHeader
+                :project="project"
+                context="Project backlog"
+                description="Plan and refine work before moving it onto the board."
             >
-                <div class="space-y-2">
-                    <Badge variant="outline" class="rounded px-2.5 py-1">
-                        {{ project.key }}
-                    </Badge>
-                    <Heading
-                        :title="project.name"
-                        description="Plan and refine work before moving it onto the board."
-                    />
-                </div>
-
-                <div class="flex flex-wrap gap-3">
-                    <Button v-if="canCreateTickets" as-child>
-                        <Link
-                            :href="
-                                createTicket(
-                                    { project: project.id },
-                                    { query: { source: 'backlog' } },
-                                )
-                            "
-                        >
-                            Create ticket
-                        </Link>
-                    </Button>
-                </div>
-            </div>
+                <Button v-if="canCreateTickets" as-child size="sm">
+                    <Link
+                        :href="
+                            createTicket(
+                                { project: project.id },
+                                { query: { source: 'backlog' } },
+                            )
+                        "
+                    >
+                        <Plus class="size-4" />
+                        Create ticket
+                    </Link>
+                </Button>
+            </ProjectPageHeader>
 
             <div class="overflow-x-auto">
                 <ProjectTabs