feat: overhaul project workspace navigation

resources/js/pages/projects/Backlog.vue

@@ -2,6 +2,7 @@
 import { Form, Head, Link } from '@inertiajs/vue3';
 import ProjectBoardController from '@/actions/App/Http/Controllers/ProjectBoardController';
 import Heading from '@/components/Heading.vue';
+import ProjectTabs from '@/components/projects/ProjectTabs.vue';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
 import {
@@ -12,9 +13,9 @@ import {
     CardTitle,
 } from '@/components/ui/card';
 import AppLayout from '@/layouts/AppLayout.vue';
-import { index as boardIndex } from '@/routes/projects/board';
 import { index as backlogIndex } from '@/routes/projects/backlog';
-import { index, show } from '@/routes/projects/index';
+import { index } from '@/routes/projects/index';
+import { index as boardIndex } from '@/routes/projects/board';
 import {
     create as createTicket,
     show as showTicket,
@@ -32,7 +33,7 @@ const breadcrumbs: BreadcrumbItem[] = [
     },
     {
         title: props.project.name,
-        href: show(props.project.id),
+        href: boardIndex(props.project.id),
     },
     {
         title: 'Backlog',
@@ -70,17 +71,17 @@ const allowedTargetStatuses = (ticket: TicketModel): TicketStatusModel[] => {
     <AppLayout :breadcrumbs="breadcrumbs" :project="project">
         <Head :title="`${project.name} backlog`" />
 
-        <div class="app-page">
+        <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"
             >
-                <div class="space-y-3">
-                    <Badge variant="outline" class="px-3 py-1">
+                <div class="space-y-2">
+                    <Badge variant="outline" class="rounded px-2.5 py-1">
                         {{ project.key }}
                     </Badge>
                     <Heading
-                        :title="`${project.name} backlog`"
-                        description="All newly created tickets start here before they move onto the board."
+                        :title="project.name"
+                        description="Plan and refine work before moving it onto the board."
                     />
                 </div>
 
@@ -97,17 +98,17 @@ const allowedTargetStatuses = (ticket: TicketModel): TicketStatusModel[] => {
                             Create ticket
                         </Link>
                     </Button>
-
-                    <Button as-child variant="outline">
-                        <Link :href="boardIndex(project.id)">Open board</Link>
-                    </Button>
-
-                    <Button as-child variant="outline">
-                        <Link :href="show(project.id)">Back to project</Link>
-                    </Button>
                 </div>
             </div>
 
+            <div class="overflow-x-auto">
+                <ProjectTabs
+                    active="backlog"
+                    :can-manage-project="canManageProject"
+                    :project="project"
+                />
+            </div>
+
             <div v-if="status" class="status-success">
                 {{ status }}
             </div>