fix: make project template inheritance granular and safe

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

@@ -4,6 +4,7 @@ import { computed, watch } from 'vue';
 import ProjectRepositorySettingsController from '@/actions/App/Http/Controllers/ProjectRepositorySettingsController';
 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 {
@@ -277,31 +278,11 @@ const submitUpdate = (): void => {
                 {{ status }}
             </div>
 
-            <Card v-if="templateState?.inheritsFromTemplate">
-                <CardHeader>
-                    <CardTitle>
-                        Template inheritance: {{ templateState.templateName }}
-                    </CardTitle>
-                    <CardDescription>
-                        Repository links can stay inherited from the template or be replaced with 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="['repository_connections']"
+                :project-id="project.id"
+                :template-state="templateState"
+            />
 
             <Card>
                 <CardHeader>
@@ -320,9 +301,9 @@ const submitUpdate = (): void => {
                         </Link>
                     </Button>
                     <p class="text-muted-foreground text-sm">
-                        Without a matching personal connection, {{ appName }} only
-                        shows the repository name and links you to your user
-                        settings.
+                        Without a matching personal connection,
+                        {{ appName }} only shows the repository name and links
+                        you to your user settings.
                     </p>
                 </CardContent>
             </Card>
@@ -647,8 +628,8 @@ const submitUpdate = (): void => {
                                 >
                                     This project link is visible, but you need a
                                     matching Git connection in your user
-                                    settings before {{ appName }} can open or query
-                                    this repository for you.
+                                    settings before {{ appName }} can open or
+                                    query this repository for you.
                                 </p>
 
                                 <div class="mt-4 flex justify-end">
@@ -683,9 +664,9 @@ const submitUpdate = (): void => {
                         <CardHeader class="border-b">
                             <CardTitle>Detected personal sources</CardTitle>
                             <CardDescription>
-                                {{ appName }} loads repositories from your personal
-                                Git connections and offers them for project
-                                linking.
+                                {{ appName }} loads repositories from your
+                                personal Git connections and offers them for
+                                project linking.
                             </CardDescription>
                         </CardHeader>