feat: overhaul project workspace navigation

resources/js/pages/projects/Access.vue

@@ -12,7 +12,8 @@ import {
     CardTitle,
 } from '@/components/ui/card';
 import AppLayout from '@/layouts/AppLayout.vue';
-import { access, index, show } from '@/routes/projects/index';
+import { access, index } from '@/routes/projects/index';
+import { index as boardIndex } from '@/routes/projects/board';
 import { general as generalSettings } from '@/routes/projects/settings';
 import type { BreadcrumbItem, ProjectAccessPageProps } from '@/types';
 
@@ -25,7 +26,7 @@ const breadcrumbs: BreadcrumbItem[] = [
     },
     {
         title: props.project.name,
-        href: show(props.project.id),
+        href: boardIndex(props.project.id),
     },
     {
         title: 'Access',
@@ -41,11 +42,15 @@ const hasPermission = (
 </script>
 
 <template>
-    <AppLayout :breadcrumbs="breadcrumbs" :project="project">
-        <Head :title="`${project.name} access`" />
+    <component
+        :is="embedded ? 'div' : AppLayout"
+        v-bind="embedded ? {} : { breadcrumbs, project }"
+    >
+        <Head v-if="!embedded" :title="`${project.name} access`" />
 
-        <div class="app-page">
+        <div :class="embedded ? 'space-y-6' : 'app-page'">
             <div
+                v-if="!embedded"
                 class="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between"
             >
                 <div class="space-y-3">
@@ -70,12 +75,14 @@ const hasPermission = (
                     </Button>
 
                     <Button as-child variant="outline">
-                        <Link :href="show(project.id)">Back to project</Link>
+                        <Link :href="boardIndex(project.id)"
+                            >Back to project</Link
+                        >
                     </Button>
                 </div>
             </div>
 
-            <div v-if="status" class="status-success">
+            <div v-if="!embedded && status" class="status-success">
                 {{ status }}
             </div>
 
@@ -301,5 +308,5 @@ const hasPermission = (
                 </CardContent>
             </Card>
         </div>
-    </AppLayout>
+    </component>
 </template>