feat: overhaul project workspace navigation

resources/js/pages/projects/Ticket.vue

@@ -14,6 +14,7 @@ import ProjectTicketLinkController from '@/actions/App/Http/Controllers/ProjectT
 import ProjectTicketController from '@/actions/App/Http/Controllers/ProjectTicketController';
 import Heading from '@/components/Heading.vue';
 import InputError from '@/components/InputError.vue';
+import ProjectTabs from '@/components/projects/ProjectTabs.vue';
 import TicketTreeList from '@/components/TicketTreeList.vue';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
@@ -36,9 +37,8 @@ import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import AppLayout from '@/layouts/AppLayout.vue';
 import { edit as editGitConnections } from '@/routes/git-connections/index';
-import { index as backlogIndex } from '@/routes/projects/backlog';
 import { index as boardIndex } from '@/routes/projects/board';
-import { index as projectIndex, show } from '@/routes/projects/index';
+import { index as projectIndex } from '@/routes/projects/index';
 import { show as showTicket } from '@/routes/projects/tickets';
 import type { BranchNameValidationModel } from '@/types/models/branch-name-validation-model';
 import type { RepositoryConnectionModel } from '@/types/models/repository-connection-model';
@@ -81,6 +81,9 @@ const canEditAuthor = computed(
 const canViewAuthor = computed(
     () => props.project.show_author || props.canManageProject,
 );
+const activeProjectSection = computed(() =>
+    props.ticket.ticket_status?.board_column_id === null ? 'backlog' : 'board',
+);
 
 const currentParentTicket = computed(
     () =>
@@ -108,7 +111,7 @@ const breadcrumbs: BreadcrumbItem[] = [
     },
     {
         title: props.project.name,
-        href: show(props.project.id),
+        href: boardIndex(props.project.id),
     },
     {
         title: props.ticket.ticket_key,
@@ -505,7 +508,7 @@ const formatDateTime = (value: string): string => {
     <AppLayout :breadcrumbs="breadcrumbs" :project="project">
         <Head :title="ticket.ticket_key" />
 
-        <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"
             >
@@ -532,22 +535,14 @@ const formatDateTime = (value: string): string => {
                         description="Review ticket details, update tracked fields, and inspect the change timeline."
                     />
                 </div>
+            </div>
 
-                <div class="flex flex-wrap gap-3">
-                    <Button as-child variant="outline">
-                        <Link :href="backlogIndex(project.id)"
-                            >Open backlog</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 class="overflow-x-auto">
+                <ProjectTabs
+                    :active="activeProjectSection"
+                    :can-manage-project="canManageProject"
+                    :project="project"
+                />
             </div>
 
             <div v-if="status" class="status-success">