fix: make project template inheritance granular and safe

resources/js/pages/projects/settings/Metadata.vue

@@ -3,6 +3,7 @@ import { Form, Head, Link } from '@inertiajs/vue3';
 import ProjectTicketMetadataSettingsController from '@/actions/App/Http/Controllers/ProjectTicketMetadataSettingsController';
 import Heading from '@/components/Heading.vue';
 import InputError from '@/components/InputError.vue';
+import TemplateInheritancePanel from '@/components/projects/TemplateInheritancePanel.vue';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
 import {
@@ -115,31 +116,17 @@ const replacementTicketTypes = (ticketTypeId: number) =>
                 {{ status }}
             </div>
 
-            <Card v-if="templateState?.inheritsFromTemplate">
-                <CardHeader>
-                    <CardTitle>
-                        Template inheritance: {{ templateState.templateName }}
-                    </CardTitle>
-                    <CardDescription>
-                        Inherited sections stay synced with the template baseline. Local edits in these settings are treated as project-specific overrides.
-                    </CardDescription>
-                </CardHeader>
-                <CardContent class="flex flex-wrap gap-2">
-                    <Badge
-                        v-for="area in templateState.inheritedAreas"
-                        :key="`inherited-${area.value}`"
-                        variant="outline"
-                    >
-                        {{ area.label }} · inherited
-                    </Badge>
-                    <Badge
-                        v-for="area in templateState.overriddenAreas"
-                        :key="`overridden-${area.value}`"
-                    >
-                        {{ area.label }} · overridden
-                    </Badge>
-                </CardContent>
-            </Card>
+            <TemplateInheritancePanel
+                :areas="[
+                    'project_settings',
+                    'ticket_types',
+                    'ticket_priorities',
+                    'ticket_fields',
+                    'ticket_link_types',
+                ]"
+                :project-id="project.id"
+                :template-state="templateState"
+            />
 
             <div class="grid gap-6 xl:grid-cols-2">
                 <Card class="gap-0 overflow-hidden">
@@ -699,7 +686,9 @@ const replacementTicketTypes = (ticketTypeId: number) =>
                                     required
                                     placeholder="Blocked by"
                                 />
-                                <InputError :message="errors.counterpart_name" />
+                                <InputError
+                                    :message="errors.counterpart_name"
+                                />
                             </div>
 
                             <Button type="submit" :disabled="processing">
@@ -745,7 +734,9 @@ const replacementTicketTypes = (ticketTypeId: number) =>
                                     <Input
                                         :id="`link-type-counterpart-name-${ticketLinkType.id}`"
                                         name="counterpart_name"
-                                        :default-value="ticketLinkType.counterpart_label"
+                                        :default-value="
+                                            ticketLinkType.counterpart_label
+                                        "
                                         required
                                     />
                                     <InputError