fix: polish project workspace interactions

resources/js/pages/projects/Settings.vue

@@ -10,8 +10,8 @@ import {
     Tags,
 } from 'lucide-vue-next';
 import { computed } from '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';
 import AppLayout from '@/layouts/AppLayout.vue';
 import { index as projectsIndex } from '@/routes/projects';
@@ -134,29 +134,18 @@ const sectionHref = (section: ProjectSettingsSection) =>
         <Head :title="`${project.name} settings`" />
 
         <div class="app-page max-w-none gap-5">
-            <header
-                class="flex flex-col gap-4 lg:flex-row lg:items-end lg:justify-between"
+            <ProjectPageHeader
+                :project="project"
+                context="Project settings"
+                description="Project configuration and access controls."
             >
-                <div class="space-y-2">
-                    <Badge variant="outline" class="rounded px-2.5 py-1">
-                        {{ project.key }}
-                    </Badge>
-                    <div>
-                        <h1 class="text-2xl font-bold tracking-tight">
-                            {{ project.name }}
-                        </h1>
-                        <p class="text-muted-foreground mt-1 text-sm">
-                            Project configuration and access controls.
-                        </p>
-                    </div>
-                </div>
-
                 <Button
                     v-if="
                         activeSection === 'general' &&
                         $page.props.auth.permissions.projectCreate
                     "
                     as-child
+                    size="sm"
                     variant="outline"
                 >
                     <Link :href="projectTemplateCreate(project.id)">
@@ -164,7 +153,7 @@ const sectionHref = (section: ProjectSettingsSection) =>
                         Save as template
                     </Link>
                 </Button>
-            </header>
+            </ProjectPageHeader>
 
             <div class="overflow-x-auto">
                 <ProjectTabs