fix: polish project workspace interactions

resources/js/components/projects/ProjectPageHeader.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import { Badge } from '@/components/ui/badge';
+import type { ProjectPageHeaderProps } from '@/types/project-navigation';
+
+defineProps<ProjectPageHeaderProps>();
+</script>
+
+<template>
+    <header
+        class="flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between"
+    >
+        <div class="min-w-0">
+            <div class="flex items-center gap-2">
+                <Badge variant="outline" class="rounded px-2.5 py-1">
+                    {{ project.key }}
+                </Badge>
+                <span class="text-muted-foreground text-xs font-medium">
+                    {{ context }}
+                </span>
+            </div>
+
+            <h1 class="mt-2 truncate text-2xl font-bold tracking-tight">
+                {{ project.name }}
+            </h1>
+            <p class="text-muted-foreground mt-1 max-w-3xl text-sm leading-6">
+                {{ description }}
+            </p>
+        </div>
+
+        <div class="flex shrink-0 flex-wrap gap-2 self-start sm:self-auto">
+            <slot />
+        </div>
+    </header>
+</template>

resources/js/components/projects/ProjectTabs.vue

@@ -14,24 +14,6 @@ defineProps<ProjectTabsProps>();
         aria-label="Project sections"
         class="border-outline-variant/70 flex min-w-max items-center gap-1 border-b"
     >
-        <Link
-            :href="boardIndex(project.id)"
-            prefetch
-            :class="[
-                'group relative inline-flex h-11 items-center gap-2 px-3 text-sm font-semibold transition-colors',
-                active === 'board'
-                    ? 'text-primary'
-                    : 'text-muted-foreground hover:text-foreground',
-            ]"
-        >
-            <KanbanSquare class="size-4" />
-            Board
-            <span
-                v-if="active === 'board'"
-                class="bg-primary absolute inset-x-2 -bottom-px h-0.5"
-            />
-        </Link>
-
         <Link
             :href="backlogIndex(project.id)"
             prefetch
@@ -50,6 +32,24 @@ defineProps<ProjectTabsProps>();
             />
         </Link>
 
+        <Link
+            :href="boardIndex(project.id)"
+            prefetch
+            :class="[
+                'group relative inline-flex h-11 items-center gap-2 px-3 text-sm font-semibold transition-colors',
+                active === 'board'
+                    ? 'text-primary'
+                    : 'text-muted-foreground hover:text-foreground',
+            ]"
+        >
+            <KanbanSquare class="size-4" />
+            Board
+            <span
+                v-if="active === 'board'"
+                class="bg-primary absolute inset-x-2 -bottom-px h-0.5"
+            />
+        </Link>
+
         <Link
             v-if="canManageProject"
             :href="settingsIndex(project.id)"