feat: KAN-30

.dockerignore

@@ -33,6 +33,9 @@
 vendor
 **/.DS_Store
 .editorconfig
+.env.example
+.env.mariadb
+.env.mariadb.example
 .env.production
 LICENSE
 README.md

.env.mariadb.example

@@ -0,0 +1,4 @@
+MARIADB_DATABASE=kanbangit
+MARIADB_USER=kanbangit
+MARIADB_PASSWORD=
+MARIADB_ROOT_PASSWORD=

.github/tests/test_and_check_app/action.yml

@@ -1,18 +1,72 @@
-name: test_and_check_app
-description: Build the test image and run all application checks
+name: "Lint and Test API"
+description: "Run Pint and the Pest test suite for the Laravel API"
 
 runs:
   using: composite
   steps:
-    - name: Test and check app
-      shell: bash
-      run: |
-        set -Eeuo pipefail
+    - name: Setup PHP
+      uses: shivammathur/setup-php@f3e473d116dcccaddc5834248c87452386958240 #v2.37.2
+      with:
+        php-version: "8.5"
+        extensions: mbstring, pdo_sqlite
+        coverage: none
+        tools: composer:v2
 
-        docker buildx build \
-          --file Dockerfile \
-          --target test \
-          --tag "local/kanbangit-test:${GITHUB_SHA}" \
-          --progress plain \
-          --load \
-          .
+    - name: Verify Composer lockfile
+      run: |
+        if [ ! -f composer.lock ]; then
+          echo "::error::api/composer.lock not found"
+          exit 1
+        fi
+      shell: bash
+
+    - name: Get Composer cache directory
+      id: composer_cache
+      run: echo "dir=$(composer config cache-files-dir)" >> "$GITHUB_OUTPUT"
+      shell: bash
+
+    - name: Cache Composer packages
+      uses: actions/cache@2c8a9bd7457de244a408f35966fab2fb45fda9c8 # v6.0.0
+      with:
+        path: ${{ steps.composer_cache.outputs.dir }}
+        key: ${{ runner.os }}-php-8.5-${{ hashFiles('api/composer.lock') }}
+
+    - name: Setup pnpm
+      uses: pnpm/action-setup@0ebf47130e4866e96fce0953f49152a61190b271 # v11.7.0
+      with:
+        package-json-file: package.json
+
+    - name: Setup Node.js
+      uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
+      with:
+        node-version: 22
+        cache: "pnpm"
+        cache-dependency-path: "pnpm-lock.yaml"
+
+    - name: Install dependencies
+      run: pnpm install --frozen-lockfile
+      shell: bash
+
+    - name: Prepare environment file
+      run: cp .env.example .env
+      shell: bash
+
+    - name: Install dependencies
+      run: composer install --no-interaction --prefer-dist --no-progress
+      shell: bash
+
+    - name: Generate application key
+      run: php artisan key:generate
+      shell: bash
+
+    - name: Generate Wayfinder routes and actions
+      run: php artisan wayfinder:generate --with-form
+      shell: bash
+
+    - name: Build Vite app
+      run: pnpm run build
+      shell: bash
+
+    - name: Run ci check
+      run: composer run ci:check
+      shell: bash

Dockerfile

@@ -55,14 +55,12 @@ COPY --from=node_binary /usr/local/ /usr/local/
 COPY . /var/www
 
 RUN composer install --prefer-dist --no-interaction --no-progress \
-    && corepack enable pnpm \
-    && pnpm install --frozen-lockfile \
+    && pnpm ci \
     && pnpm run build
 
 FROM build AS test
 
-RUN cp .env.example .env \
-    && php artisan key:generate\
+RUN touch .env \
     && composer audit --locked --no-interaction \
     && COMPOSER_ALLOW_SUPERUSER=1 composer ci:check
 

app/Actions/Permissions/PermissionService.php

@@ -8,7 +8,6 @@ use App\Models\Project;
 use App\Models\Team;
 use App\Models\User;
 use Illuminate\Database\Eloquent\Builder;
-use Illuminate\Database\Eloquent\Collection as EloquentCollection;
 use Illuminate\Database\Eloquent\Model;
 use Illuminate\Support\Collection;
 use Illuminate\Support\Facades\DB;
@@ -114,41 +113,6 @@ class PermissionService
         );
     }
 
-    /**
-     * @param  EloquentCollection<int, User>  $users
-     * @return array{directPermissions: array, teamPermissions: array, effectivePermissions: array, globalAdminUserIds: array<int, int>}
-     */
-    public function projectAccessMap(EloquentCollection $users, Project $project): array
-    {
-        $users->loadMissing('teams');
-        $directPermissions = $this->assignmentMap(User::class, $project);
-        $teamPermissions = $this->assignmentMap(Team::class, $project);
-        $globalPermissions = $this->assignmentMap(User::class);
-        $effectivePermissions = [];
-        $globalAdminUserIds = [];
-
-        foreach ($users as $user) {
-            $permissions = $directPermissions[$user->id] ?? [];
-
-            foreach ($user->teams as $team) {
-                $permissions = array_merge($permissions, $teamPermissions[$team->id] ?? []);
-            }
-
-            if (in_array(Permission::GlobalAdmin->value, $globalPermissions[$user->id] ?? [], true)) {
-                $permissions[] = Permission::GlobalAdmin->value;
-                $globalAdminUserIds[] = $user->id;
-            }
-
-            $expanded = $this->expandPermissions(array_map(Permission::from(...), $permissions));
-            $effectivePermissions[$user->id] = Permission::values(array_values(array_filter(
-                Permission::projectAssignable(),
-                fn (Permission $permission): bool => in_array($permission, $expanded, true),
-            )));
-        }
-
-        return compact('directPermissions', 'teamPermissions', 'effectivePermissions', 'globalAdminUserIds');
-    }
-
     /**
      * @return array<string, array<int, string>>
      */

app/Actions/Projects/BuildProjectTicketMetadataSettingsPayload.php

@@ -34,8 +34,8 @@ class BuildProjectTicketMetadataSettingsPayload
                 DuplicateProjectConfiguration::COPY_TICKET_FIELDS,
                 DuplicateProjectConfiguration::COPY_TICKET_LINK_TYPES,
             ]),
-            'ticketFieldDefinitions' => TicketFieldDefinitionResource::collection($project->ticketFieldDefinitions()->withCount('ticketFieldValues')->get())->resolve(),
-            'ticketLinkTypes' => TicketLinkTypeResource::collection($project->ticketLinkTypes()->withCount('ticketLinks')->get())->resolve(),
+            'ticketFieldDefinitions' => TicketFieldDefinitionResource::collection($project->ticketFieldDefinitions()->get())->resolve(),
+            'ticketLinkTypes' => TicketLinkTypeResource::collection($project->ticketLinkTypes()->get())->resolve(),
             'ticketPriorities' => TicketPriorityResource::collection($project->ticketPriorities()->get())->resolve(),
             'ticketTypes' => TicketTypeResource::collection($project->ticketTypes()->withCount('tickets')->get())->resolve(),
         ];

app/Http/Controllers/ProjectController.php

@@ -182,22 +182,25 @@ class ProjectController extends Controller
             403,
         );
 
-        $users = User::query()->orderBy('name')->get();
-
         return Inertia::render('projects/Access', [
-            ...$this->permissionService->projectAccessMap($users, $project),
+            'directPermissions' => $this->permissionService->assignmentMap(User::class, $project),
             'permissionOptions' => PermissionOptionResource::collection(
                 $this->permissionService->permissionOptions(User::class, Project::class),
             )->resolve(),
             'project' => ProjectResource::make($project)->resolve(),
             'status' => session('status'),
+            'teamPermissions' => $this->permissionService->assignmentMap(Team::class, $project),
             'teams' => TeamResource::collection(
                 Team::query()
                     ->with('users')
                     ->orderBy('name')
                     ->get(),
             )->resolve(),
-            'users' => UserResource::collection($users)->resolve(),
+            'users' => UserResource::collection(
+                User::query()
+                    ->orderBy('name')
+                    ->get(),
+            )->resolve(),
         ]);
     }
 
@@ -217,9 +220,7 @@ class ProjectController extends Controller
 
         $this->permissionService->sync($user, $project, $permissions);
 
-        return ($this->permissionService->allows($request->user(), Permission::ProjectAdmin, $project)
-            ? to_route('projects.access', $project)
-            : to_route('projects.index'))
+        return to_route('projects.access', $project)
             ->with('status', "{$user->name} permissions were updated.");
     }
 
@@ -238,9 +239,7 @@ class ProjectController extends Controller
 
         $this->permissionService->sync($team, $project, $permissions);
 
-        return ($this->permissionService->allows($request->user(), Permission::ProjectAdmin, $project)
-            ? to_route('projects.access', $project)
-            : to_route('projects.index'))
+        return to_route('projects.access', $project)
             ->with('status', "{$team->name} permissions were updated.");
     }
 

app/Http/Requests/UpdateProjectTemplateRequest.php

@@ -29,7 +29,6 @@ class UpdateProjectTemplateRequest extends FormRequest
             'copy_areas' => ['required', 'array', 'min:1'],
             'copy_areas.*' => ['string', Rule::in(DuplicateProjectConfiguration::acceptedCopyAreas())],
             'confirm_linked_projects_update' => [
-                Rule::excludeIf(! $requiresImpactConfirmation),
                 Rule::requiredIf($requiresImpactConfirmation),
                 'accepted',
             ],

app/Http/Resources/TicketFieldDefinitionResource.php

@@ -20,7 +20,6 @@ class TicketFieldDefinitionResource extends JsonResource
             'label' => $this->label,
             'position' => $this->position,
             'project_id' => $this->project_id,
-            'ticket_field_values_count' => $this->when(isset($this->ticket_field_values_count), (int) $this->ticket_field_values_count),
             'created_at' => $this->created_at?->toISOString(),
             'updated_at' => $this->updated_at?->toISOString(),
         ];

app/Http/Resources/TicketLinkTypeResource.php

@@ -20,7 +20,6 @@ class TicketLinkTypeResource extends JsonResource
             'counterpart_label' => $this->counterpart_label ?: $this->label,
             'position' => $this->position,
             'project_id' => $this->project_id,
-            'ticket_links_count' => $this->when(isset($this->ticket_links_count), (int) $this->ticket_links_count),
             'created_at' => $this->created_at?->toISOString(),
             'updated_at' => $this->updated_at?->toISOString(),
         ];

bootstrap/app.php

@@ -33,5 +33,5 @@ return Application::configure(basePath: dirname(__DIR__))
         ]);
     })
     ->withExceptions(function (Exceptions $exceptions): void {
-        $exceptions->dontFlash(['api_token']);
+        //
     })->create();

resources/js/components/AppearanceTabs.vue

@@ -1,80 +1,39 @@
 <script setup lang="ts">
-import { Check, Monitor, Moon, Sun } from 'lucide-vue-next';
-import { computed } from 'vue';
+import { Monitor, Moon, Sun } from 'lucide-vue-next';
 import { useAppearance } from '@/composables/useAppearance';
 import { useLocalization } from '@/composables/useLocalization';
 
 const { appearance, updateAppearance } = useAppearance();
 const { t } = useLocalization();
 
-const tabs = computed(() => [
-    {
-        value: 'light' as const,
-        Icon: Sun,
-        label: t('appearance.light'),
-        description: t('appearance.lightDescription'),
-    },
-    {
-        value: 'dark' as const,
-        Icon: Moon,
-        label: t('appearance.dark'),
-        description: t('appearance.darkDescription'),
-    },
-    {
-        value: 'system' as const,
-        Icon: Monitor,
-        label: t('appearance.system'),
-        description: t('appearance.systemDescription'),
-    },
-]);
+const tabs = [
+    { value: 'light', Icon: Sun, label: 'appearance.light' },
+    { value: 'dark', Icon: Moon, label: 'appearance.dark' },
+    { value: 'system', Icon: Monitor, label: 'appearance.system' },
+] as const;
 </script>
 
 <template>
-    <fieldset class="min-w-0">
-        <legend class="sr-only">{{ t('appearance.label') }}</legend>
-        <div class="grid min-w-0 gap-3 sm:grid-cols-3">
-            <label
-                v-for="{ value, Icon, label, description } in tabs"
-                :key="value"
-                class="relative min-w-0"
-            >
-                <input
-                    type="radio"
-                    name="appearance"
-                    :value="value"
-                    :checked="appearance === value"
-                    :aria-describedby="`appearance-${value}-description`"
-                    class="peer sr-only"
-                    @change="updateAppearance(value)"
-                />
-                <span
-                    class="peer-checked:border-primary peer-checked:bg-accent/50 peer-focus-visible:ring-ring/40 gap-stack bg-background hover:border-primary/50 flex h-full min-h-32 cursor-pointer flex-col rounded-lg border p-4 transition-colors peer-focus-visible:ring-2"
-                >
-                    <span class="flex items-center justify-between gap-3">
-                        <span
-                            class="bg-accent text-primary flex size-10 items-center justify-center rounded-lg"
-                        >
-                            <component
-                                :is="Icon"
-                                class="size-5"
-                                aria-hidden="true"
-                            />
-                        </span>
-                        <Check
-                            v-if="appearance === value"
-                            class="text-primary size-5"
-                            aria-hidden="true"
-                        />
-                    </span>
-                    <span class="font-semibold">{{ label }}</span>
-                    <span
-                        :id="`appearance-${value}-description`"
-                        class="text-caption text-muted-foreground"
-                    >
-                        {{ description }}
-                    </span>
-                </span>
-            </label>
-        </div>
-    </fieldset>
+    <div
+        role="group"
+        :aria-label="t('appearance.label')"
+        class="border-border bg-muted inline-flex max-w-full gap-1 rounded-lg border p-1"
+    >
+        <button
+            v-for="{ value, Icon, label } in tabs"
+            :key="value"
+            type="button"
+            :aria-pressed="appearance === value"
+            @click="updateAppearance(value)"
+            :class="[
+                'min-h-control text-body focus-visible:outline-ring flex min-w-0 items-center justify-center gap-1.5 rounded-md px-3 font-medium transition-colors focus-visible:outline-2 focus-visible:outline-offset-2',
+                appearance === value
+                    ? 'bg-primary text-primary-foreground'
+                    : 'text-muted-foreground hover:bg-accent hover:text-accent-foreground',
+            ]"
+        >
+            <component :is="Icon" class="size-4 shrink-0" aria-hidden="true" />
+            <span>{{ t(label) }}</span>
+        </button>
+    </div>
 </template>

resources/js/components/BacklogTicketTree.vue

@@ -1,209 +0,0 @@
-<script setup lang="ts">
-import { Form } from '@inertiajs/vue3';
-import { ChevronDown, ChevronRight } from 'lucide-vue-next';
-import { move } from '@/actions/App/Http/Controllers/ProjectBoardController';
-import InputError from '@/components/InputError.vue';
-import { TicketCard } from '@/components/tickets';
-import { Badge } from '@/components/ui/badge';
-import { Button } from '@/components/ui/button';
-import { useLocalization } from '@/composables/useLocalization';
-import { ticketStatusLabel } from '@/lib/tickets';
-import type {
-    BacklogTicketTreeEmits,
-    BacklogTicketTreeProps,
-} from '@/types/backlog';
-import type { TicketModel } from '@/types/models/ticket-model';
-
-const props = defineProps<BacklogTicketTreeProps>();
-const emit = defineEmits<BacklogTicketTreeEmits>();
-const { t } = useLocalization();
-
-const allowedTargetStatuses = (ticket: TicketModel) =>
-    (ticket.ticket_status?.allowed_target_statuses ?? []).filter(
-        (status) => status.id !== ticket.ticket_status_id,
-    );
-</script>
-
-<template>
-    <ul class="grid min-w-0 gap-3">
-        <li v-for="node in nodes" :key="node.ticket.id" class="min-w-0">
-            <div class="grid min-w-0 grid-cols-[2.75rem_minmax(0,1fr)] gap-2">
-                <div class="flex justify-center pt-1">
-                    <button
-                        v-if="node.children.length > 0"
-                        type="button"
-                        class="border-border bg-card text-muted-foreground hover:border-primary hover:text-primary focus-visible:ring-ring/35 flex size-10 items-center justify-center rounded-md border transition-colors focus-visible:outline-none focus-visible:ring-2"
-                        :aria-expanded="!collapsedTicketIds.has(node.ticket.id)"
-                        :aria-controls="`backlog-children-${node.ticket.id}`"
-                        :aria-label="
-                            t(
-                                collapsedTicketIds.has(node.ticket.id)
-                                    ? 'backlog.tree.expand'
-                                    : 'backlog.tree.collapse',
-                                { key: node.ticket.ticket_key },
-                            )
-                        "
-                        @click="emit('toggle', node.ticket.id)"
-                    >
-                        <ChevronRight
-                            v-if="collapsedTicketIds.has(node.ticket.id)"
-                            class="size-4"
-                            aria-hidden="true"
-                        />
-                        <ChevronDown v-else class="size-4" aria-hidden="true" />
-                    </button>
-                    <span
-                        v-else
-                        class="bg-border mt-4 size-1.5 rounded-full"
-                        aria-hidden="true"
-                    />
-                </div>
-
-                <div class="grid min-w-0 gap-2">
-                    <Badge
-                        v-if="!node.matchesFilters"
-                        variant="secondary"
-                        class="w-fit"
-                    >
-                        {{ t('backlog.filters.parentContext') }}
-                    </Badge>
-
-                    <TicketCard
-                        :project-id="projectId"
-                        :ticket="node.ticket"
-                        layout="list"
-                        :class="{ 'opacity-80': !node.matchesFilters }"
-                    >
-                        <template v-if="canEditTickets" #actions>
-                            <Form
-                                v-bind="
-                                    move.form({
-                                        project: projectId,
-                                        ticket: node.ticket.id,
-                                    })
-                                "
-                                v-slot="{ processing, errors }"
-                                :error-bag="`backlog-ticket-${node.ticket.id}`"
-                                :options="{ preserveScroll: true }"
-                                :on-before="() => pendingTicketId === null"
-                                class="grid min-w-0 gap-2"
-                                @start="emit('moveStart', node.ticket.id)"
-                                @finish="emit('moveFinish', node.ticket.id)"
-                            >
-                                <input
-                                    type="hidden"
-                                    name="redirect_to"
-                                    value="backlog"
-                                />
-                                <label
-                                    :for="`backlog-ticket-status-${node.ticket.id}`"
-                                    class="text-caption text-muted-foreground font-semibold"
-                                >
-                                    {{
-                                        t('backlog.moveTicket', {
-                                            key: node.ticket.ticket_key,
-                                        })
-                                    }}
-                                </label>
-                                <select
-                                    :id="`backlog-ticket-status-${node.ticket.id}`"
-                                    name="ticket_status_id"
-                                    :disabled="
-                                        pendingTicketId !== null ||
-                                        processing ||
-                                        allowedTargetStatuses(node.ticket)
-                                            .length === 0
-                                    "
-                                    :aria-invalid="
-                                        !!errors.ticket_status_id || undefined
-                                    "
-                                    :aria-describedby="
-                                        errors.ticket_status_id
-                                            ? `backlog-ticket-status-error-${node.ticket.id}`
-                                            : undefined
-                                    "
-                                    class="border-input bg-card text-body min-h-control focus-visible:ring-ring/35 w-full min-w-0 rounded-md border px-3 py-2 focus-visible:outline-none focus-visible:ring-2 disabled:cursor-not-allowed disabled:opacity-60"
-                                >
-                                    <option
-                                        v-if="
-                                            allowedTargetStatuses(node.ticket)
-                                                .length === 0
-                                        "
-                                        value=""
-                                    >
-                                        {{ t('board.noMoves') }}
-                                    </option>
-                                    <option
-                                        v-for="target in allowedTargetStatuses(
-                                            node.ticket,
-                                        )"
-                                        :key="target.id"
-                                        :value="target.id"
-                                    >
-                                        {{
-                                            ticketStatusLabel(
-                                                target,
-                                                t('tickets.noStatus'),
-                                            )
-                                        }}
-                                    </option>
-                                </select>
-                                <InputError
-                                    :id="`backlog-ticket-status-error-${node.ticket.id}`"
-                                    :message="errors.ticket_status_id"
-                                />
-                                <Button
-                                    type="submit"
-                                    variant="outline"
-                                    :disabled="
-                                        pendingTicketId !== null ||
-                                        processing ||
-                                        allowedTargetStatuses(node.ticket)
-                                            .length === 0
-                                    "
-                                >
-                                    {{
-                                        t(
-                                            processing
-                                                ? 'board.updatingStatus'
-                                                : 'board.updateStatus',
-                                        )
-                                    }}
-                                </Button>
-                                <p
-                                    v-if="
-                                        allowedTargetStatuses(node.ticket)
-                                            .length === 0
-                                    "
-                                    class="text-caption text-muted-foreground"
-                                >
-                                    {{ t('board.noMovesDescription') }}
-                                </p>
-                            </Form>
-                        </template>
-                    </TicketCard>
-                </div>
-            </div>
-
-            <div
-                v-if="
-                    node.children.length > 0 &&
-                    !collapsedTicketIds.has(node.ticket.id)
-                "
-                :id="`backlog-children-${node.ticket.id}`"
-                class="border-border ml-[1.375rem] mt-3 border-l pl-2 sm:pl-4"
-            >
-                <BacklogTicketTree
-                    :nodes="node.children"
-                    :project-id="projectId"
-                    :can-edit-tickets="canEditTickets"
-                    :collapsed-ticket-ids="collapsedTicketIds"
-                    :pending-ticket-id="pendingTicketId"
-                    @toggle="emit('toggle', $event)"
-                    @move-start="emit('moveStart', $event)"
-                    @move-finish="emit('moveFinish', $event)"
-                />
-            </div>
-        </li>
-    </ul>
-</template>

resources/js/components/DeleteUser.vue

@@ -2,10 +2,10 @@
 import { Form } from '@inertiajs/vue3';
 import { useTemplateRef } from 'vue';
 import ProfileController from '@/actions/App/Http/Controllers/Settings/ProfileController';
+import Heading from '@/components/Heading.vue';
 import InputError from '@/components/InputError.vue';
 import PasswordInput from '@/components/PasswordInput.vue';
 import { Button } from '@/components/ui/button';
-import { Card, CardContent, CardHeader } from '@/components/ui/card';
 import {
     Dialog,
     DialogClose,
@@ -17,104 +17,97 @@ import {
     DialogTrigger,
 } from '@/components/ui/dialog';
 import { Label } from '@/components/ui/label';
-import { useLocalization } from '@/composables/useLocalization';
 
 const passwordInput = useTemplateRef('passwordInput');
-const { t } = useLocalization();
 </script>
 
 <template>
-    <Card
-        class="border-destructive/35 gap-0 overflow-hidden rounded-xl py-0 shadow-none"
-    >
-        <CardHeader class="gap-stack border-b p-5 sm:p-6">
-            <h2 class="text-title">{{ t('profile.delete.title') }}</h2>
-            <p class="text-muted-foreground">
-                {{ t('profile.delete.description') }}
-            </p>
-        </CardHeader>
-        <CardContent class="p-5 sm:p-6">
-            <div
-                class="bg-destructive/8 border-destructive/25 gap-column grid rounded-lg border p-4"
-            >
-                <div class="gap-stack grid">
-                    <p class="text-destructive font-semibold">
-                        {{ t('profile.delete.warning') }}
-                    </p>
-                    <p class="text-body text-muted-foreground">
-                        {{ t('profile.delete.warningDescription') }}
-                    </p>
-                </div>
-                <Dialog>
-                    <DialogTrigger as-child>
-                        <Button
-                            variant="destructive"
-                            class="justify-self-start"
-                            data-test="delete-user-button"
-                            >{{ t('profile.delete.action') }}</Button
-                        >
-                    </DialogTrigger>
-                    <DialogContent>
-                        <Form
-                            v-bind="ProfileController.destroy.form()"
-                            reset-on-success
-                            @error="() => passwordInput?.focus()"
-                            :options="{
-                                preserveScroll: true,
-                            }"
-                            class="space-y-6"
-                            v-slot="{ errors, processing, reset, clearErrors }"
-                        >
-                            <DialogHeader class="space-y-3">
-                                <DialogTitle>{{
-                                    t('profile.delete.confirmTitle')
-                                }}</DialogTitle>
-                                <DialogDescription>
-                                    {{ t('profile.delete.confirmDescription') }}
-                                </DialogDescription>
-                            </DialogHeader>
-
-                            <div class="grid gap-2">
-                                <Label for="password" class="sr-only">{{
-                                    t('profile.delete.password')
-                                }}</Label>
-                                <PasswordInput
-                                    id="password"
-                                    name="password"
-                                    ref="passwordInput"
-                                    :placeholder="t('profile.delete.password')"
-                                />
-                                <InputError :message="errors.password" />
-                            </div>
-
-                            <DialogFooter class="gap-2">
-                                <DialogClose as-child>
-                                    <Button
-                                        variant="secondary"
-                                        @click="
-                                            () => {
-                                                clearErrors();
-                                                reset();
-                                            }
-                                        "
-                                    >
-                                        {{ t('common.cancel') }}
-                                    </Button>
-                                </DialogClose>
-
-                                <Button
-                                    type="submit"
-                                    variant="destructive"
-                                    :disabled="processing"
-                                    data-test="confirm-delete-user-button"
-                                >
-                                    {{ t('profile.delete.confirmAction') }}
-                                </Button>
-                            </DialogFooter>
-                        </Form>
-                    </DialogContent>
-                </Dialog>
+    <div class="space-y-6">
+        <Heading
+            variant="small"
+            title="Delete account"
+            description="Delete your account and all of its resources"
+        />
+        <div
+            class="space-y-4 rounded-lg border border-red-100 bg-red-50 p-4 dark:border-red-200/10 dark:bg-red-700/10"
+        >
+            <div class="relative space-y-0.5 text-red-600 dark:text-red-100">
+                <p class="font-medium">Warning</p>
+                <p class="text-sm">
+                    Please proceed with caution, this cannot be undone.
+                </p>
             </div>
-        </CardContent>
-    </Card>
+            <Dialog>
+                <DialogTrigger as-child>
+                    <Button variant="destructive" data-test="delete-user-button"
+                        >Delete account</Button
+                    >
+                </DialogTrigger>
+                <DialogContent>
+                    <Form
+                        v-bind="ProfileController.destroy.form()"
+                        reset-on-success
+                        @error="() => passwordInput?.focus()"
+                        :options="{
+                            preserveScroll: true,
+                        }"
+                        class="space-y-6"
+                        v-slot="{ errors, processing, reset, clearErrors }"
+                    >
+                        <DialogHeader class="space-y-3">
+                            <DialogTitle
+                                >Are you sure you want to delete your
+                                account?</DialogTitle
+                            >
+                            <DialogDescription>
+                                Once your account is deleted, all of its
+                                resources and data will also be permanently
+                                deleted. Please enter your password to confirm
+                                you would like to permanently delete your
+                                account.
+                            </DialogDescription>
+                        </DialogHeader>
+
+                        <div class="grid gap-2">
+                            <Label for="password" class="sr-only"
+                                >Password</Label
+                            >
+                            <PasswordInput
+                                id="password"
+                                name="password"
+                                ref="passwordInput"
+                                placeholder="Password"
+                            />
+                            <InputError :message="errors.password" />
+                        </div>
+
+                        <DialogFooter class="gap-2">
+                            <DialogClose as-child>
+                                <Button
+                                    variant="secondary"
+                                    @click="
+                                        () => {
+                                            clearErrors();
+                                            reset();
+                                        }
+                                    "
+                                >
+                                    Cancel
+                                </Button>
+                            </DialogClose>
+
+                            <Button
+                                type="submit"
+                                variant="destructive"
+                                :disabled="processing"
+                                data-test="confirm-delete-user-button"
+                            >
+                                Delete account
+                            </Button>
+                        </DialogFooter>
+                    </Form>
+                </DialogContent>
+            </Dialog>
+        </div>
+    </div>
 </template>

resources/js/components/ManagedUserForm.vue

@@ -1,369 +0,0 @@
-<script setup lang="ts">
-import { useForm } from '@inertiajs/vue3';
-import { KeyRound, UserRound } from 'lucide-vue-next';
-import { computed, ref } from 'vue';
-import {
-    save,
-    store,
-} from '@/actions/App/Http/Controllers/Admin/UserManagementController';
-import FormFeedback from '@/components/FormFeedback.vue';
-import InputError from '@/components/InputError.vue';
-import PasswordInput from '@/components/PasswordInput.vue';
-import { Button } from '@/components/ui/button';
-import { Card, CardContent, CardHeader } from '@/components/ui/card';
-import { Checkbox } from '@/components/ui/checkbox';
-import {
-    Dialog,
-    DialogContent,
-    DialogDescription,
-    DialogFooter,
-    DialogHeader,
-    DialogTitle,
-} from '@/components/ui/dialog';
-import { Input } from '@/components/ui/input';
-import { Label } from '@/components/ui/label';
-import { useFormProtection } from '@/composables/useFormProtection';
-import { useLocalization } from '@/composables/useLocalization';
-import type { UserModel } from '@/types/models/user-model';
-
-const props = withDefaults(
-    defineProps<{
-        mode: 'create' | 'edit';
-        user?: UserModel | null;
-    }>(),
-    { user: null },
-);
-
-const emit = defineEmits<{ cancel: [] }>();
-const { t } = useLocalization();
-const isEdit = computed(() => props.mode === 'edit');
-const confirmationOpen = ref(false);
-const form = useForm(
-    'ManagedUser:' + props.mode + ':' + (props.user?.id ?? 'new'),
-    {
-        name: props.user?.name ?? '',
-        email: props.user?.email ?? '',
-        password: '',
-        password_confirmation: '',
-        must_change_password_on_next_login:
-            props.user?.must_change_password_on_next_login ?? true,
-    },
-);
-const protection = useFormProtection(form);
-
-function performSubmit(): void {
-    confirmationOpen.value = false;
-    protection.submit(
-        isEdit.value && props.user ? save(props.user.id) : store(),
-        { preserveScroll: true },
-    );
-}
-
-function requestSubmit(): void {
-    if (isEdit.value) {
-        confirmationOpen.value = true;
-        return;
-    }
-
-    performSubmit();
-}
-
-function updateConfirmation(open: boolean): void {
-    if (!form.processing) {
-        confirmationOpen.value = open;
-    }
-}
-</script>
-
-<template>
-    <Card class="gap-0 overflow-hidden rounded-xl py-0 shadow-none">
-        <CardHeader class="gap-stack border-b p-5 sm:p-6">
-            <div class="flex items-start gap-3">
-                <span
-                    class="bg-accent text-primary flex size-10 shrink-0 items-center justify-center rounded-md"
-                >
-                    <UserRound class="size-5" aria-hidden="true" />
-                </span>
-                <div class="gap-stack grid min-w-0">
-                    <h2 class="text-title">
-                        {{ t('adminUsers.form.detailsTitle') }}
-                    </h2>
-                    <p class="text-muted-foreground">
-                        {{
-                            t(
-                                isEdit
-                                    ? 'adminUsers.form.editDescription'
-                                    : 'adminUsers.form.createDescription',
-                            )
-                        }}
-                    </p>
-                </div>
-            </div>
-        </CardHeader>
-
-        <CardContent class="p-5 sm:p-6">
-            <form
-                class="gap-page grid min-w-0"
-                :aria-busy="form.processing"
-                @submit.prevent="requestSubmit"
-            >
-                <FormFeedback
-                    :state="protection.state.value"
-                    @retry="performSubmit"
-                />
-
-                <fieldset
-                    class="gap-column grid min-w-0"
-                    :disabled="form.processing"
-                >
-                    <legend class="sr-only">
-                        {{ t('adminUsers.form.detailsTitle') }}
-                    </legend>
-
-                    <div class="grid gap-5 sm:grid-cols-2">
-                        <div class="grid min-w-0 gap-2">
-                            <Label for="managed-user-name">{{
-                                t('adminUsers.form.name')
-                            }}</Label>
-                            <Input
-                                id="managed-user-name"
-                                v-model="form.name"
-                                name="name"
-                                required
-                                autofocus
-                                autocomplete="name"
-                                :placeholder="
-                                    t('adminUsers.form.namePlaceholder')
-                                "
-                                :aria-invalid="!!form.errors.name"
-                                aria-describedby="managed-user-name-error"
-                            />
-                            <InputError
-                                id="managed-user-name-error"
-                                :message="form.errors.name"
-                            />
-                        </div>
-
-                        <div class="grid min-w-0 gap-2">
-                            <Label for="managed-user-email">{{
-                                t('adminUsers.form.email')
-                            }}</Label>
-                            <Input
-                                id="managed-user-email"
-                                v-model="form.email"
-                                name="email"
-                                type="email"
-                                required
-                                autocomplete="email"
-                                :placeholder="
-                                    t('adminUsers.form.emailPlaceholder')
-                                "
-                                :aria-invalid="!!form.errors.email"
-                                aria-describedby="managed-user-email-error"
-                            />
-                            <InputError
-                                id="managed-user-email-error"
-                                :message="form.errors.email"
-                            />
-                        </div>
-                    </div>
-
-                    <section
-                        aria-labelledby="managed-user-password-title"
-                        class="gap-column grid min-w-0 border-t pt-6"
-                    >
-                        <div class="flex items-start gap-3">
-                            <KeyRound
-                                class="text-muted-foreground mt-0.5 size-5 shrink-0"
-                                aria-hidden="true"
-                            />
-                            <div class="gap-stack grid min-w-0">
-                                <h3
-                                    id="managed-user-password-title"
-                                    class="font-semibold"
-                                >
-                                    {{ t('adminUsers.form.passwordTitle') }}
-                                </h3>
-                                <p class="text-caption text-muted-foreground">
-                                    {{
-                                        t(
-                                            isEdit
-                                                ? 'adminUsers.form.passwordEditHelp'
-                                                : 'adminUsers.form.passwordCreateHelp',
-                                        )
-                                    }}
-                                </p>
-                            </div>
-                        </div>
-
-                        <div class="grid gap-5 sm:grid-cols-2">
-                            <div class="grid min-w-0 gap-2">
-                                <Label for="managed-user-password">{{
-                                    t(
-                                        isEdit
-                                            ? 'adminUsers.form.newPassword'
-                                            : 'adminUsers.form.password',
-                                    )
-                                }}</Label>
-                                <PasswordInput
-                                    id="managed-user-password"
-                                    v-model="form.password"
-                                    name="password"
-                                    :required="!isEdit"
-                                    autocomplete="new-password"
-                                    :placeholder="
-                                        t(
-                                            isEdit
-                                                ? 'adminUsers.form.passwordEditPlaceholder'
-                                                : 'adminUsers.form.passwordPlaceholder',
-                                        )
-                                    "
-                                    :aria-invalid="!!form.errors.password"
-                                    aria-describedby="managed-user-password-error"
-                                />
-                                <InputError
-                                    id="managed-user-password-error"
-                                    :message="form.errors.password"
-                                />
-                            </div>
-
-                            <div class="grid min-w-0 gap-2">
-                                <Label
-                                    for="managed-user-password-confirmation"
-                                    >{{
-                                        t('adminUsers.form.confirmPassword')
-                                    }}</Label
-                                >
-                                <PasswordInput
-                                    id="managed-user-password-confirmation"
-                                    v-model="form.password_confirmation"
-                                    name="password_confirmation"
-                                    :required="!isEdit"
-                                    autocomplete="new-password"
-                                    :placeholder="
-                                        t(
-                                            'adminUsers.form.confirmPasswordPlaceholder',
-                                        )
-                                    "
-                                    :aria-invalid="
-                                        !!form.errors.password_confirmation
-                                    "
-                                    aria-describedby="managed-user-password-confirmation-error"
-                                />
-                                <InputError
-                                    id="managed-user-password-confirmation-error"
-                                    :message="form.errors.password_confirmation"
-                                />
-                            </div>
-                        </div>
-                    </section>
-
-                    <div class="grid gap-2 border-t pt-6">
-                        <Label
-                            for="managed-user-force-password-change"
-                            class="bg-muted/35 flex cursor-pointer items-start gap-3 rounded-lg border p-4"
-                        >
-                            <Checkbox
-                                id="managed-user-force-password-change"
-                                v-model="
-                                    form.must_change_password_on_next_login
-                                "
-                                name="must_change_password_on_next_login"
-                                :invalid="
-                                    !!form.errors
-                                        .must_change_password_on_next_login
-                                "
-                                aria-describedby="managed-user-force-password-change-help managed-user-force-password-change-error"
-                            />
-                            <span class="grid gap-1">
-                                <span>{{
-                                    t('adminUsers.form.forcePasswordChange')
-                                }}</span>
-                                <span
-                                    id="managed-user-force-password-change-help"
-                                    class="text-caption text-muted-foreground font-normal"
-                                >
-                                    {{
-                                        t(
-                                            'adminUsers.form.forcePasswordChangeHelp',
-                                        )
-                                    }}
-                                </span>
-                            </span>
-                        </Label>
-                        <InputError
-                            id="managed-user-force-password-change-error"
-                            :message="
-                                form.errors.must_change_password_on_next_login
-                            "
-                        />
-                    </div>
-                </fieldset>
-
-                <div
-                    class="flex flex-col-reverse gap-2 sm:flex-row sm:justify-end"
-                >
-                    <Button
-                        type="button"
-                        variant="ghost"
-                        @click="emit('cancel')"
-                    >
-                        {{ t('common.cancel') }}
-                    </Button>
-                    <Button
-                        type="submit"
-                        :loading="form.processing"
-                        class="sm:min-w-36"
-                        data-test="managed-user-submit"
-                    >
-                        {{
-                            t(
-                                isEdit
-                                    ? 'adminUsers.form.reviewChanges'
-                                    : 'adminUsers.form.createAction',
-                            )
-                        }}
-                    </Button>
-                </div>
-            </form>
-        </CardContent>
-    </Card>
-
-    <Dialog :open="confirmationOpen" @update:open="updateConfirmation">
-        <DialogContent>
-            <DialogHeader>
-                <DialogTitle>{{
-                    t('adminUsers.form.confirmTitle', {
-                        name: form.name || props.user?.name || '',
-                    })
-                }}</DialogTitle>
-                <DialogDescription>
-                    {{ t('adminUsers.form.confirmDescription') }}
-                </DialogDescription>
-            </DialogHeader>
-            <div
-                class="border-warning/35 bg-warning/8 text-body rounded-md border p-4"
-            >
-                {{ t('adminUsers.form.confirmWarning') }}
-            </div>
-            <DialogFooter>
-                <Button
-                    type="button"
-                    variant="secondary"
-                    :disabled="form.processing"
-                    @click="confirmationOpen = false"
-                >
-                    {{ t('common.cancel') }}
-                </Button>
-                <Button
-                    type="button"
-                    :loading="form.processing"
-                    data-test="confirm-managed-user-update"
-                    @click="performSubmit"
-                >
-                    {{ t('adminUsers.form.confirmAction') }}
-                </Button>
-            </DialogFooter>
-        </DialogContent>
-    </Dialog>
-</template>

resources/js/components/TicketTreeList.vue

@@ -1,93 +1,45 @@
 <script setup lang="ts">
 import { Link } from '@inertiajs/vue3';
-import { ChevronDown, ChevronRight } from 'lucide-vue-next';
-import { reactive } from 'vue';
 import { Badge } from '@/components/ui/badge';
-import { useLocalization } from '@/composables/useLocalization';
 import { show as showTicket } from '@/routes/projects/tickets';
-import type { TicketTreeListProps } from '@/types/ticket-tree';
+import type { TicketTreeNodeModel } from '@/types/models/ticket-tree-node-model';
 
-defineProps<TicketTreeListProps>();
-
-const { t } = useLocalization();
-const collapsedTicketIds = reactive(new Set<number>());
-
-function toggleTicket(ticketId: number): void {
-    if (collapsedTicketIds.has(ticketId)) {
-        collapsedTicketIds.delete(ticketId);
-    } else {
-        collapsedTicketIds.add(ticketId);
-    }
-}
+defineProps<{
+    nodes: TicketTreeNodeModel[];
+    projectId: number;
+}>();
 </script>
 
 <template>
-    <ul class="grid min-w-0 gap-3">
-        <li v-for="node in nodes" :key="node.id" class="min-w-0">
-            <div class="grid min-w-0 grid-cols-[2.75rem_minmax(0,1fr)] gap-2">
-                <div class="flex justify-center pt-1">
-                    <button
-                        v-if="node.children.length > 0"
-                        type="button"
-                        class="border-border bg-card text-muted-foreground hover:border-primary hover:text-primary focus-visible:ring-ring/35 flex size-10 items-center justify-center rounded-md border transition-colors focus-visible:outline-none focus-visible:ring-2"
-                        :aria-expanded="!collapsedTicketIds.has(node.id)"
-                        :aria-controls="`ticket-tree-children-${node.id}`"
-                        :aria-label="
-                            t(
-                                collapsedTicketIds.has(node.id)
-                                    ? 'tickets.tree.expand'
-                                    : 'tickets.tree.collapse',
-                                { key: node.ticket_key },
-                            )
+    <ul class="space-y-3">
+        <li v-for="node in nodes" :key="node.id">
+            <div class="border-border rounded-xl border px-4 py-4">
+                <div class="flex flex-wrap items-center gap-2">
+                    <Link
+                        :href="
+                            showTicket({
+                                project: projectId,
+                                ticket: node.id,
+                            })
                         "
-                        @click="toggleTicket(node.id)"
+                        class="text-foreground hover:text-primary font-medium transition"
                     >
-                        <ChevronRight
-                            v-if="collapsedTicketIds.has(node.id)"
-                            class="size-4"
-                            aria-hidden="true"
-                        />
-                        <ChevronDown v-else class="size-4" aria-hidden="true" />
-                    </button>
-                    <span
-                        v-else
-                        class="bg-border mt-4 size-1.5 rounded-full"
-                        aria-hidden="true"
-                    />
+                        {{ node.ticket_key }}
+                    </Link>
+
+                    <Badge v-if="node.ticket_type_name" variant="secondary">
+                        {{ node.ticket_type_name }}
+                    </Badge>
                 </div>
 
-                <Link
-                    :href="
-                        showTicket({
-                            project: projectId,
-                            ticket: node.id,
-                        })
-                    "
-                    class="bg-card text-card-foreground hover:border-primary focus-visible:ring-ring/35 gap-stack group grid min-w-0 rounded-md border p-4 transition-[border-color,box-shadow] focus-visible:outline-none focus-visible:ring-2"
-                >
-                    <div class="flex min-w-0 flex-wrap items-center gap-2">
-                        <Badge variant="outline">
-                            {{ node.ticket_key }}
-                        </Badge>
-                        <Badge v-if="node.ticket_type_name" variant="secondary">
-                            {{ node.ticket_type_name }}
-                        </Badge>
-                    </div>
-
-                    <span
-                        class="text-body group-hover:text-primary wrap-anywhere min-w-0 font-semibold"
-                    >
-                        {{ node.title }}
-                    </span>
-                </Link>
+                <div class="text-foreground mt-2 text-sm">
+                    {{ node.title }}
+                </div>
             </div>
 
             <div
-                v-if="
-                    node.children.length > 0 && !collapsedTicketIds.has(node.id)
-                "
-                :id="`ticket-tree-children-${node.id}`"
-                class="border-border ml-[1.375rem] mt-3 border-l pl-2 sm:pl-4"
+                v-if="node.children.length > 0"
+                class="border-border mt-3 border-l pl-4"
             >
                 <TicketTreeList
                     :nodes="node.children"

resources/js/components/TwoFactorRecoveryCodes.vue

@@ -1,169 +1,123 @@
 <script setup lang="ts">
-import { useForm } from '@inertiajs/vue3';
+import { Form } from '@inertiajs/vue3';
 import { Eye, EyeOff, LockKeyhole, RefreshCw } from 'lucide-vue-next';
-import { ref } from 'vue';
+import { nextTick, onMounted, ref, useTemplateRef } from 'vue';
 import AlertError from '@/components/AlertError.vue';
-import AuthFormFeedback from '@/components/AuthFormFeedback.vue';
 import { Button } from '@/components/ui/button';
 import {
-    Dialog,
-    DialogContent,
-    DialogDescription,
-    DialogFooter,
-    DialogHeader,
-    DialogTitle,
-} from '@/components/ui/dialog';
-import { useFormProtection } from '@/composables/useFormProtection';
-import { useLocalization } from '@/composables/useLocalization';
+    Card,
+    CardContent,
+    CardDescription,
+    CardHeader,
+    CardTitle,
+} from '@/components/ui/card';
 import { useTwoFactorAuth } from '@/composables/useTwoFactorAuth';
 import { regenerateRecoveryCodes } from '@/routes/two-factor';
 
-const { t } = useLocalization();
-const {
-    recoveryCodesList,
-    fetchRecoveryCodes,
-    clearRecoveryCodes,
-    errors,
-    loading,
-} = useTwoFactorAuth();
-const visible = ref(false);
-const showRegenerate = ref(false);
-const form = useForm({});
-const protection = useFormProtection(form);
+const { recoveryCodesList, fetchRecoveryCodes, errors } = useTwoFactorAuth();
+const isRecoveryCodesVisible = ref<boolean>(false);
+const recoveryCodeSectionRef = useTemplateRef('recoveryCodeSectionRef');
 
-function hide(): void {
-    visible.value = false;
-    clearRecoveryCodes();
-}
-function toggle(): void {
-    if (visible.value) {
-        hide();
-    } else {
-        visible.value = true;
-        void fetchRecoveryCodes();
+const toggleRecoveryCodesVisibility = async () => {
+    if (!isRecoveryCodesVisible.value && !recoveryCodesList.value.length) {
+        await fetchRecoveryCodes();
     }
-}
-function closeRegenerate(open: boolean): void {
-    if (!form.processing) {
-        showRegenerate.value = open;
-        protection.clearFeedback();
+
+    isRecoveryCodesVisible.value = !isRecoveryCodesVisible.value;
+
+    if (isRecoveryCodesVisible.value) {
+        await nextTick();
+        recoveryCodeSectionRef.value?.scrollIntoView({ behavior: 'smooth' });
     }
-}
-function regenerate(): void {
-    protection.submit(regenerateRecoveryCodes(), {
-        preserveScroll: true,
-        onBefore: hide,
-        onSuccess: () => {
-            showRegenerate.value = false;
-            visible.value = true;
-            return fetchRecoveryCodes();
-        },
-    });
-}
+};
+
+onMounted(async () => {
+    if (!recoveryCodesList.value.length) {
+        await fetchRecoveryCodes();
+    }
+});
 </script>
 
 <template>
-    <section
-        class="gap-column grid min-w-0 rounded-lg border p-4"
-        aria-labelledby="recovery-title"
-    >
-        <div class="gap-stack grid">
-            <h3
-                id="recovery-title"
-                class="flex items-center gap-2 font-semibold"
+    <Card class="w-full">
+        <CardHeader>
+            <CardTitle class="flex gap-3">
+                <LockKeyhole class="size-4" />2FA recovery codes
+            </CardTitle>
+            <CardDescription>
+                Recovery codes let you regain access if you lose your 2FA
+                device. Store them in a secure password manager.
+            </CardDescription>
+        </CardHeader>
+        <CardContent>
+            <div
+                class="flex select-none flex-col gap-3 sm:flex-row sm:items-center sm:justify-between"
             >
-                <LockKeyhole class="text-primary size-4" />{{
-                    t('security.recoveryTitle')
-                }}
-            </h3>
-            <p class="text-body text-muted-foreground">
-                {{ t('security.recoveryDescription') }}
-            </p>
-        </div>
-        <div class="flex flex-wrap gap-3">
-            <Button
-                variant="outline"
-                :aria-expanded="visible"
-                aria-controls="recovery-codes"
-                :disabled="form.processing"
-                @click="toggle"
-                ><component :is="visible ? EyeOff : Eye" />{{
-                    t(
-                        visible
-                            ? 'security.hideRecovery'
-                            : 'security.viewRecovery',
-                    )
-                }}</Button
-            >
-            <Button
-                v-if="visible && recoveryCodesList.length"
-                variant="secondary"
-                @click="showRegenerate = true"
-                ><RefreshCw />{{ t('security.regenerate') }}</Button
-            >
-        </div>
-        <div v-if="visible" id="recovery-codes" class="gap-stack grid">
-            <p
-                v-if="loading"
-                role="status"
-                class="bg-muted animate-pulse rounded-lg p-4"
-            >
-                {{ t('security.loadingRecovery') }}
-            </p>
-            <template v-else-if="errors.length">
-                <AlertError :errors="errors" />
-                <Button
-                    class="justify-self-start"
-                    variant="outline"
-                    @click="fetchRecoveryCodes"
-                    >{{ t('common.retry') }}</Button
+                <Button @click="toggleRecoveryCodesVisibility" class="w-fit">
+                    <component
+                        :is="isRecoveryCodesVisible ? EyeOff : Eye"
+                        class="size-4"
+                    />
+                    {{ isRecoveryCodesVisible ? 'Hide' : 'View' }} recovery
+                    codes
+                </Button>
+
+                <Form
+                    v-if="isRecoveryCodesVisible && recoveryCodesList.length"
+                    v-bind="regenerateRecoveryCodes.form()"
+                    method="post"
+                    :options="{ preserveScroll: true }"
+                    @success="fetchRecoveryCodes"
+                    #default="{ processing }"
                 >
-            </template>
-            <template v-else>
-                <ul
-                    class="bg-muted grid gap-2 rounded-lg p-4 font-mono text-sm sm:grid-cols-2"
-                    :aria-label="t('security.recoveryTitle')"
-                >
-                    <li v-for="code in recoveryCodesList" :key="code">
-                        {{ code }}
-                    </li>
-                </ul>
-                <p class="text-caption text-muted-foreground">
-                    {{ t('security.recoveryOnce') }}
-                </p>
-            </template>
-        </div>
-        <Dialog :open="showRegenerate" @update:open="closeRegenerate">
-            <DialogContent
-                :show-close-button="!form.processing"
-                @escape-key-down="form.processing && $event.preventDefault()"
-                @interact-outside="form.processing && $event.preventDefault()"
-            >
-                <DialogHeader>
-                    <DialogTitle>{{
-                        t('security.regenerateTitle')
-                    }}</DialogTitle>
-                    <DialogDescription>{{
-                        t('security.regenerateDescription')
-                    }}</DialogDescription>
-                </DialogHeader>
-                <AuthFormFeedback
-                    :state="protection.state.value"
-                    :response-status="protection.responseStatus.value"
-                    @retry="regenerate"
-                />
-                <DialogFooter>
                     <Button
-                        variant="outline"
-                        :disabled="form.processing"
-                        @click="closeRegenerate(false)"
-                        >{{ t('common.cancel') }}</Button
+                        variant="secondary"
+                        type="submit"
+                        :disabled="processing"
                     >
-                    <Button :loading="form.processing" @click="regenerate">{{
-                        t('security.regenerate')
-                    }}</Button>
-                </DialogFooter>
-            </DialogContent>
-        </Dialog>
-    </section>
+                        <RefreshCw /> Regenerate codes
+                    </Button>
+                </Form>
+            </div>
+            <div
+                :class="[
+                    'relative overflow-hidden transition-all duration-300',
+                    isRecoveryCodesVisible
+                        ? 'h-auto opacity-100'
+                        : 'h-0 opacity-0',
+                ]"
+            >
+                <div v-if="errors?.length" class="mt-6">
+                    <AlertError :errors="errors" />
+                </div>
+                <div v-else class="mt-3 space-y-3">
+                    <div
+                        ref="recoveryCodeSectionRef"
+                        class="bg-muted grid gap-1 rounded-lg p-4 font-mono text-sm"
+                    >
+                        <div v-if="!recoveryCodesList.length" class="space-y-2">
+                            <div
+                                v-for="n in 8"
+                                :key="n"
+                                class="bg-muted-foreground/20 h-4 animate-pulse rounded"
+                            ></div>
+                        </div>
+                        <div
+                            v-else
+                            v-for="(code, index) in recoveryCodesList"
+                            :key="index"
+                        >
+                            {{ code }}
+                        </div>
+                    </div>
+                    <p class="text-muted-foreground select-none text-xs">
+                        Each recovery code can be used once to access your
+                        account and will be removed after use. If you need more,
+                        click
+                        <span class="font-bold">Regenerate codes</span> above.
+                    </p>
+                </div>
+            </div>
+        </CardContent>
+    </Card>
 </template>

resources/js/components/TwoFactorSetupModal.vue

@@ -1,261 +1,297 @@
 <script setup lang="ts">
-import { useForm } from '@inertiajs/vue3';
+import { Form } from '@inertiajs/vue3';
+import { useClipboard } from '@vueuse/core';
 import { Check, Copy, ScanLine } from 'lucide-vue-next';
 import { computed, nextTick, ref, useTemplateRef, watch } from 'vue';
 import AlertError from '@/components/AlertError.vue';
-import AuthFormFeedback from '@/components/AuthFormFeedback.vue';
 import InputError from '@/components/InputError.vue';
 import { Button } from '@/components/ui/button';
 import {
     Dialog,
     DialogContent,
     DialogDescription,
-    DialogFooter,
     DialogHeader,
     DialogTitle,
 } from '@/components/ui/dialog';
-import { Input } from '@/components/ui/input';
-import { Label } from '@/components/ui/label';
-import { useFormProtection } from '@/composables/useFormProtection';
-import { useLocalization } from '@/composables/useLocalization';
+import {
+    InputOTP,
+    InputOTPGroup,
+    InputOTPSlot,
+} from '@/components/ui/input-otp';
+import { Spinner } from '@/components/ui/spinner';
+import { useAppearance } from '@/composables/useAppearance';
 import { useTwoFactorAuth } from '@/composables/useTwoFactorAuth';
 import { confirm } from '@/routes/two-factor';
+import type { TwoFactorConfigContent } from '@/types';
 
-const props = defineProps<{
+type Props = {
     requiresConfirmation: boolean;
     twoFactorEnabled: boolean;
-}>();
-const isOpen = defineModel<boolean>('isOpen');
-const { t } = useLocalization();
-const {
-    qrCodeSvg,
-    manualSetupKey,
-    hasSetupData,
-    clearSetupData,
-    fetchSetupData,
-    errors,
-    loading,
-} = useTwoFactorAuth();
-const form = useForm({ code: '' }).dontRemember('code');
-const protection = useFormProtection(form, { isDirty: () => false });
-const verification = ref(false);
-const copied = ref(false);
-const copyError = ref(false);
-const codeInput = useTemplateRef('codeInput');
-const title = computed(() =>
-    t(
-        props.twoFactorEnabled
-            ? 'security.setupEnabled'
-            : verification.value
-              ? 'security.verifyTitle'
-              : 'security.setupTitle',
-    ),
-);
-const description = computed(() =>
-    t(
-        props.twoFactorEnabled
-            ? 'security.setupEnabledDescription'
-            : verification.value
-              ? 'security.verifyDescription'
-              : 'security.setupDescription',
-    ),
-);
+};
 
-function close(open: boolean): void {
-    if (!form.processing) {
-        isOpen.value = open;
+const { resolvedAppearance } = useAppearance();
+
+const props = defineProps<Props>();
+const isOpen = defineModel<boolean>('isOpen');
+
+const { copy, copied } = useClipboard();
+const { qrCodeSvg, manualSetupKey, clearSetupData, fetchSetupData, errors } =
+    useTwoFactorAuth();
+
+const showVerificationStep = ref(false);
+const code = ref<string>('');
+
+const pinInputContainerRef = useTemplateRef('pinInputContainerRef');
+
+const modalConfig = computed<TwoFactorConfigContent>(() => {
+    if (props.twoFactorEnabled) {
+        return {
+            title: 'Two-factor authentication enabled',
+            description:
+                'Two-factor authentication is now enabled. Scan the QR code or enter the setup key in your authenticator app.',
+            buttonText: 'Close',
+        };
     }
-}
-async function next(): Promise<void> {
-    if (props.twoFactorEnabled || !props.requiresConfirmation) {
-        close(false);
-        return;
-    }
-    verification.value = true;
-    await nextTick();
-    codeInput.value?.$el?.focus();
-}
-function submit(): void {
-    protection.submit(confirm(), {
-        preserveScroll: true,
-        errorBag: 'confirmTwoFactorAuthentication',
-        onSuccess: () => {
-            isOpen.value = false;
-        },
-        onFinish: () => {
-            form.reset();
-        },
-    });
-}
-async function copyKey(): Promise<void> {
-    const key = manualSetupKey.value;
-    if (!key) {
-        return;
-    }
-    copyError.value = false;
-    try {
-        await navigator.clipboard.writeText(key);
-        if (isOpen.value && manualSetupKey.value === key) {
-            copied.value = true;
-        }
-    } catch {
-        if (isOpen.value) {
-            copyError.value = true;
-        }
-    }
-}
-watch(isOpen, (open) => {
-    verification.value = false;
-    copied.value = false;
-    copyError.value = false;
-    form.resetAndClearErrors();
-    protection.clearFeedback();
-    clearSetupData();
-    if (open) {
-        void fetchSetupData();
+
+    if (showVerificationStep.value) {
+        return {
+            title: 'Verify authentication code',
+            description: 'Enter the 6-digit code from your authenticator app',
+            buttonText: 'Continue',
+        };
     }
+
+    return {
+        title: 'Enable two-factor authentication',
+        description:
+            'To finish enabling two-factor authentication, scan the QR code or enter the setup key in your authenticator app',
+        buttonText: 'Continue',
+    };
 });
+
+const handleModalNextStep = () => {
+    if (props.requiresConfirmation) {
+        showVerificationStep.value = true;
+
+        nextTick(() => {
+            pinInputContainerRef.value?.querySelector('input')?.focus();
+        });
+
+        return;
+    }
+
+    clearSetupData();
+    isOpen.value = false;
+};
+
+const resetModalState = () => {
+    if (props.twoFactorEnabled) {
+        clearSetupData();
+    }
+
+    showVerificationStep.value = false;
+    code.value = '';
+};
+
+watch(
+    () => isOpen.value,
+    async (isOpen) => {
+        if (!isOpen) {
+            resetModalState();
+
+            return;
+        }
+
+        if (!qrCodeSvg.value) {
+            await fetchSetupData();
+        }
+    },
+);
 </script>
 
 <template>
-    <Dialog :open="isOpen" @update:open="close">
-        <DialogContent
-            class="sm:max-w-md"
-            :show-close-button="!form.processing"
-            @escape-key-down="form.processing && $event.preventDefault()"
-            @interact-outside="form.processing && $event.preventDefault()"
-        >
-            <DialogHeader>
-                <ScanLine class="text-primary size-8" />
-                <DialogTitle>{{ title }}</DialogTitle>
-                <DialogDescription>{{ description }}</DialogDescription>
-            </DialogHeader>
-            <template v-if="!verification">
-                <p
-                    v-if="loading"
-                    role="status"
-                    class="bg-muted animate-pulse rounded-lg p-6 text-center"
+    <Dialog :open="isOpen" @update:open="isOpen = $event">
+        <DialogContent class="sm:max-w-md">
+            <DialogHeader class="flex items-center justify-center">
+                <div
+                    class="border-border bg-card mb-3 w-auto rounded-full border p-0.5 shadow-sm"
                 >
-                    {{ t('security.loadingSetup') }}
-                </p>
-                <div v-else-if="errors.length" class="gap-stack grid">
-                    <AlertError :errors="errors" />
-                    <Button variant="outline" @click="fetchSetupData">{{
-                        t('common.retry')
-                    }}</Button>
-                </div>
-                <div v-else-if="hasSetupData" class="gap-column grid min-w-0">
                     <div
-                        class="mx-auto aspect-square w-full max-w-56 rounded-lg border bg-white p-4 text-black"
-                        v-html="qrCodeSvg"
-                    />
-                    <div class="grid min-w-0 gap-2">
-                        <Label for="setup-key">{{
-                            t('security.manualKey')
-                        }}</Label>
-                        <div class="flex min-w-0 gap-2">
-                            <Input
-                                id="setup-key"
-                                :model-value="manualSetupKey"
-                                readonly
-                                class="min-w-0 font-mono text-xs"
-                            />
-                            <Button
-                                variant="outline"
-                                :aria-label="
-                                    t(
-                                        copied
-                                            ? 'security.copied'
-                                            : 'security.copyKey',
-                                    )
-                                "
-                                @click="copyKey"
-                                ><Check v-if="copied" /><Copy v-else
-                            /></Button>
-                        </div>
-                        <p
-                            v-if="copied"
-                            role="status"
-                            class="text-caption text-success-foreground"
+                        class="border-border bg-muted relative overflow-hidden rounded-full border p-2.5"
+                    >
+                        <div
+                            class="absolute inset-0 grid grid-cols-5 opacity-50"
                         >
-                            {{ t('security.copied') }}
-                        </p>
-                        <InputError
-                            v-if="copyError"
-                            :message="t('security.copyError')"
+                            <div
+                                v-for="i in 5"
+                                :key="`col-${i}`"
+                                class="border-border border-r last:border-r-0"
+                            />
+                        </div>
+                        <div
+                            class="absolute inset-0 grid grid-rows-5 opacity-50"
+                        >
+                            <div
+                                v-for="i in 5"
+                                :key="`row-${i}`"
+                                class="border-border border-b last:border-b-0"
+                            />
+                        </div>
+                        <ScanLine
+                            class="text-foreground relative z-20 size-6"
                         />
                     </div>
                 </div>
-                <p
-                    v-if="requiresConfirmation && !twoFactorEnabled"
-                    class="text-caption text-muted-foreground"
-                >
-                    {{ t('security.setupPendingDescription') }}
-                </p>
-                <DialogFooter>
-                    <Button variant="outline" @click="close(false)">{{
-                        t('common.close')
-                    }}</Button>
-                    <Button v-if="hasSetupData" @click="next">{{
-                        t(
-                            twoFactorEnabled || !requiresConfirmation
-                                ? 'common.done'
-                                : 'security.continue',
-                        )
-                    }}</Button>
-                </DialogFooter>
-            </template>
-            <form v-else class="gap-column grid" @submit.prevent="submit">
-                <AuthFormFeedback
-                    :state="protection.state.value"
-                    :response-status="protection.responseStatus.value"
-                    @retry="submit"
-                />
-                <div class="grid gap-2">
-                    <Label for="authentication-code">{{
-                        t('security.authenticationCode')
-                    }}</Label>
-                    <Input
-                        id="authentication-code"
-                        ref="codeInput"
-                        v-model="form.code"
-                        name="code"
-                        type="text"
-                        inputmode="numeric"
-                        autocomplete="one-time-code"
-                        pattern="[0-9]{6}"
-                        maxlength="6"
-                        required
-                        :disabled="form.processing"
-                        :aria-invalid="!!form.errors.code"
-                        aria-describedby="authentication-code-error"
-                        class="font-mono text-lg tracking-widest"
-                    />
-                    <InputError
-                        id="authentication-code-error"
-                        :message="form.errors.code"
-                    />
-                </div>
-                <DialogFooter>
-                    <Button
-                        type="button"
-                        variant="outline"
-                        :disabled="form.processing"
-                        @click="
-                            verification = false;
-                            form.resetAndClearErrors();
-                            protection.clearFeedback();
-                        "
-                        >{{ t('common.back') }}</Button
+                <DialogTitle>{{ modalConfig.title }}</DialogTitle>
+                <DialogDescription class="text-center">
+                    {{ modalConfig.description }}
+                </DialogDescription>
+            </DialogHeader>
+
+            <div
+                class="relative flex w-auto flex-col items-center justify-center space-y-5"
+            >
+                <template v-if="!showVerificationStep">
+                    <AlertError v-if="errors?.length" :errors="errors" />
+                    <template v-else>
+                        <div
+                            class="relative mx-auto flex max-w-md items-center overflow-hidden"
+                        >
+                            <div
+                                class="border-border relative mx-auto aspect-square w-64 overflow-hidden rounded-lg border"
+                            >
+                                <div
+                                    v-if="!qrCodeSvg"
+                                    class="bg-background absolute inset-0 z-10 flex aspect-square h-auto w-full animate-pulse items-center justify-center"
+                                >
+                                    <Spinner class="size-6" />
+                                </div>
+                                <div
+                                    v-else
+                                    class="relative z-10 overflow-hidden border p-5"
+                                >
+                                    <div
+                                        v-html="qrCodeSvg"
+                                        class="flex aspect-square size-full items-center justify-center"
+                                        :style="{
+                                            filter:
+                                                resolvedAppearance === 'dark'
+                                                    ? 'invert(1) brightness(1.5)'
+                                                    : undefined,
+                                        }"
+                                    />
+                                </div>
+                            </div>
+                        </div>
+
+                        <div class="flex w-full items-center space-x-5">
+                            <Button class="w-full" @click="handleModalNextStep">
+                                {{ modalConfig.buttonText }}
+                            </Button>
+                        </div>
+
+                        <div
+                            class="relative flex w-full items-center justify-center"
+                        >
+                            <div
+                                class="bg-border absolute inset-0 top-1/2 h-px w-full"
+                            />
+                            <span class="bg-card relative px-2 py-1"
+                                >or, enter the code manually</span
+                            >
+                        </div>
+
+                        <div
+                            class="flex w-full items-center justify-center space-x-2"
+                        >
+                            <div
+                                class="border-border flex w-full items-stretch overflow-hidden rounded-xl border"
+                            >
+                                <div
+                                    v-if="!manualSetupKey"
+                                    class="bg-muted flex h-full w-full items-center justify-center p-3"
+                                >
+                                    <Spinner />
+                                </div>
+                                <template v-else>
+                                    <input
+                                        type="text"
+                                        readonly
+                                        :value="manualSetupKey"
+                                        class="bg-background text-foreground h-full w-full p-3"
+                                    />
+                                    <button
+                                        @click="copy(manualSetupKey || '')"
+                                        class="border-border hover:bg-muted relative block h-auto border-l px-3"
+                                    >
+                                        <Check
+                                            v-if="copied"
+                                            class="w-4 text-green-500"
+                                        />
+                                        <Copy v-else class="w-4" />
+                                    </button>
+                                </template>
+                            </div>
+                        </div>
+                    </template>
+                </template>
+
+                <template v-else>
+                    <Form
+                        v-bind="confirm.form()"
+                        error-bag="confirmTwoFactorAuthentication"
+                        reset-on-error
+                        @finish="code = ''"
+                        @success="isOpen = false"
+                        v-slot="{ errors, processing }"
                     >
-                    <Button
-                        type="submit"
-                        :disabled="form.code.length !== 6"
-                        :loading="form.processing"
-                        >{{ t('security.confirm') }}</Button
-                    >
-                </DialogFooter>
-            </form>
+                        <input type="hidden" name="code" :value="code" />
+                        <div
+                            ref="pinInputContainerRef"
+                            class="relative w-full space-y-3"
+                        >
+                            <div
+                                class="flex w-full flex-col items-center justify-center space-y-3 py-2"
+                            >
+                                <InputOTP
+                                    id="otp"
+                                    v-model="code"
+                                    :maxlength="6"
+                                    :disabled="processing"
+                                >
+                                    <InputOTPGroup>
+                                        <InputOTPSlot
+                                            v-for="index in 6"
+                                            :key="index"
+                                            :index="index - 1"
+                                        />
+                                    </InputOTPGroup>
+                                </InputOTP>
+                                <InputError :message="errors?.code" />
+                            </div>
+
+                            <div class="flex w-full items-center space-x-5">
+                                <Button
+                                    type="button"
+                                    variant="outline"
+                                    class="w-auto flex-1"
+                                    @click="showVerificationStep = false"
+                                    :disabled="processing"
+                                >
+                                    Back
+                                </Button>
+                                <Button
+                                    type="submit"
+                                    class="w-auto flex-1"
+                                    :disabled="processing || code.length < 6"
+                                >
+                                    Confirm
+                                </Button>
+                            </div>
+                        </div>
+                    </Form>
+                </template>
+            </div>
         </DialogContent>
     </Dialog>
 </template>

resources/js/components/projects/MetadataEditorDialog.vue

@@ -1,363 +0,0 @@
-<script setup lang="ts">
-import { useForm } from '@inertiajs/vue3';
-import { computed, ref, watch } from 'vue';
-import {
-    destroyPriority,
-    destroyType,
-    storePriority,
-    storeType,
-    updatePriority,
-    updateType,
-} from '@/actions/App/Http/Controllers/ProjectTicketMetadataSettingsController';
-import FormFeedback from '@/components/FormFeedback.vue';
-import InputError from '@/components/InputError.vue';
-import { Button } from '@/components/ui/button';
-import { Checkbox } from '@/components/ui/checkbox';
-import {
-    Dialog,
-    DialogContent,
-    DialogDescription,
-    DialogFooter,
-    DialogHeader,
-    DialogTitle,
-} from '@/components/ui/dialog';
-import { Input } from '@/components/ui/input';
-import { Label } from '@/components/ui/label';
-import { useFormProtection } from '@/composables/useFormProtection';
-import { useLocalization } from '@/composables/useLocalization';
-import type { TicketPriorityModel } from '@/types/models/ticket-priority-model';
-import type { TicketTypeModel } from '@/types/models/ticket-type-model';
-import type { MetadataEditorTarget } from '@/types/project-metadata';
-
-const props = defineProps<{
-    projectId: number;
-    target: MetadataEditorTarget | null;
-    types: TicketTypeModel[];
-    priorities: TicketPriorityModel[];
-}>();
-const emit = defineEmits<{ close: [] }>();
-const { t } = useLocalization();
-const form = useForm({
-    name: '',
-    position: 1,
-    is_parent: false,
-    replacement_ticket_type_id: '',
-});
-const protection = useFormProtection(form, {
-    isDirty: () => props.target !== null && form.isDirty,
-});
-const deletionError = ref<string | null>(null);
-const deleting = computed(() => props.target?.action === 'delete');
-const entries = computed(() =>
-    props.target?.kind === 'type' ? props.types : props.priorities,
-);
-const replacements = computed(() =>
-    props.types.filter((type) => type.id !== props.target?.entry?.id),
-);
-const needsReplacement = computed(
-    () =>
-        deleting.value &&
-        props.target?.kind === 'type' &&
-        (props.target.entry?.tickets_count ?? 0) > 0,
-);
-const title = computed(() => {
-    const target = props.target;
-    if (!target) {
-        return '';
-    }
-    if (target.action === 'create') {
-        return t(
-            target.kind === 'type'
-                ? 'metadata.addType'
-                : 'metadata.addPriority',
-        );
-    }
-    return t(
-        target.action === 'edit'
-            ? 'metadata.editEntry'
-            : 'metadata.deleteEntry',
-        { name: target.entry.name },
-    );
-});
-watch(
-    () => props.target,
-    (target) => {
-        if (!target) {
-            return;
-        }
-        form.defaults({
-            name: target.entry?.name ?? '',
-            position: target.entry?.position ?? 1,
-            is_parent: target.entry?.is_parent ?? false,
-            replacement_ticket_type_id: '',
-        });
-        form.resetAndClearErrors();
-        protection.clearFeedback();
-        deletionError.value = null;
-    },
-    { immediate: true },
-);
-function close(open: boolean): void {
-    if (open || form.processing || !protection.confirmLeave()) {
-        return;
-    }
-    form.resetAndClearErrors();
-    protection.clearFeedback();
-    emit('close');
-}
-function submit(): void {
-    const target = props.target;
-    if (
-        !target ||
-        form.processing ||
-        (deleting.value && entries.value.length <= 1)
-    ) {
-        return;
-    }
-    const route =
-        target.kind === 'type'
-            ? target.action === 'create'
-                ? storeType(props.projectId)
-                : target.action === 'edit'
-                  ? updateType([props.projectId, target.entry.id])
-                  : destroyType([props.projectId, target.entry.id])
-            : target.action === 'create'
-              ? storePriority(props.projectId)
-              : target.action === 'edit'
-                ? updatePriority([props.projectId, target.entry.id])
-                : destroyPriority([props.projectId, target.entry.id]);
-    form.transform((data) =>
-        target.action === 'delete'
-            ? target.kind === 'type'
-                ? {
-                      replacement_ticket_type_id:
-                          data.replacement_ticket_type_id || null,
-                  }
-                : {}
-            : target.action === 'edit'
-              ? { name: data.name, position: data.position }
-              : target.kind === 'type'
-                ? { name: data.name, is_parent: data.is_parent }
-                : { name: data.name },
-    );
-    deletionError.value = null;
-    protection.submit(route, {
-        preserveScroll: true,
-        onSuccess: (page) => {
-            if (page.props.error) {
-                deletionError.value =
-                    typeof page.props.status === 'string'
-                        ? page.props.status
-                        : t('common.error');
-                return;
-            }
-            form.resetAndClearErrors();
-            emit('close');
-        },
-    });
-}
-</script>
-
-<template>
-    <Dialog :open="target !== null" @update:open="close">
-        <DialogContent
-            :show-close-button="!form.processing"
-            @escape-key-down="form.processing && $event.preventDefault()"
-            @interact-outside="form.processing && $event.preventDefault()"
-        >
-            <DialogHeader>
-                <DialogTitle class="break-words">{{ title }}</DialogTitle>
-                <DialogDescription>{{
-                    t(
-                        deleting
-                            ? target?.kind === 'type'
-                                ? 'metadata.deleteTypeHelp'
-                                : 'metadata.deletePriorityHelp'
-                            : 'metadata.editHelp',
-                    )
-                }}</DialogDescription>
-            </DialogHeader>
-            <form
-                class="grid min-w-0 gap-4"
-                :aria-busy="form.processing"
-                @submit.prevent="submit"
-            >
-                <FormFeedback
-                    :state="deletionError ? 'idle' : protection.state.value"
-                    @retry="submit"
-                />
-                <p
-                    v-if="deletionError"
-                    role="alert"
-                    class="text-destructive text-sm"
-                >
-                    {{ deletionError }}
-                </p>
-                <fieldset
-                    :disabled="form.processing"
-                    class="grid min-w-0 gap-4"
-                >
-                    <template v-if="!deleting">
-                        <div class="grid gap-2">
-                            <Label for="metadata-name">{{
-                                t('metadata.name')
-                            }}</Label>
-                            <Input
-                                id="metadata-name"
-                                v-model="form.name"
-                                name="name"
-                                required
-                                maxlength="255"
-                                :aria-invalid="!!form.errors.name"
-                                aria-describedby="metadata-name-error"
-                            />
-                            <InputError
-                                id="metadata-name-error"
-                                :message="form.errors.name"
-                            />
-                        </div>
-                        <div
-                            v-if="target?.action === 'edit'"
-                            class="grid gap-2"
-                        >
-                            <Label for="metadata-position">{{
-                                t('workflow.position')
-                            }}</Label>
-                            <Input
-                                id="metadata-position"
-                                v-model="form.position"
-                                name="position"
-                                type="number"
-                                min="1"
-                                :max="entries.length"
-                                step="1"
-                                required
-                                :aria-invalid="!!form.errors.position"
-                                aria-describedby="metadata-position-help metadata-position-error"
-                            />
-                            <p
-                                id="metadata-position-help"
-                                class="text-caption text-muted-foreground"
-                            >
-                                {{
-                                    t('metadata.positionHelp', {
-                                        count: entries.length,
-                                    })
-                                }}
-                            </p>
-                            <InputError
-                                id="metadata-position-error"
-                                :message="form.errors.position"
-                            />
-                        </div>
-                        <div v-if="target?.kind === 'type'" class="grid gap-2">
-                            <Label
-                                v-if="target.action === 'create'"
-                                for="metadata-parent"
-                                class="flex items-center gap-3"
-                            >
-                                <Checkbox
-                                    id="metadata-parent"
-                                    v-model="form.is_parent"
-                                    name="is_parent"
-                                    :invalid="!!form.errors.is_parent"
-                                    aria-describedby="metadata-parent-help metadata-parent-error"
-                                />{{ t('metadata.allowChildren') }}
-                            </Label>
-                            <p v-else class="text-sm font-medium">
-                                {{
-                                    t(
-                                        form.is_parent
-                                            ? 'metadata.parentType'
-                                            : 'metadata.standardType',
-                                    )
-                                }}
-                            </p>
-                            <p
-                                id="metadata-parent-help"
-                                class="text-caption text-muted-foreground"
-                            >
-                                {{ t('metadata.parentFixed') }}
-                            </p>
-                            <InputError
-                                id="metadata-parent-error"
-                                :message="form.errors.is_parent"
-                            />
-                        </div>
-                    </template>
-                    <div v-if="needsReplacement" class="grid gap-2">
-                        <p class="text-sm">
-                            {{
-                                t('metadata.replacementHelp', {
-                                    count: target?.entry?.tickets_count ?? 0,
-                                })
-                            }}
-                        </p>
-                        <Label for="metadata-replacement">{{
-                            t('metadata.replacement')
-                        }}</Label>
-                        <select
-                            id="metadata-replacement"
-                            v-model="form.replacement_ticket_type_id"
-                            name="replacement_ticket_type_id"
-                            required
-                            class="border-input bg-background focus-visible:ring-ring min-h-11 w-full min-w-0 rounded-md border px-3 text-sm focus-visible:ring-2"
-                            :aria-invalid="
-                                !!form.errors.replacement_ticket_type_id
-                            "
-                            aria-describedby="metadata-replacement-help metadata-replacement-error"
-                        >
-                            <option value="">
-                                {{ t('metadata.chooseType') }}
-                            </option>
-                            <option
-                                v-for="entry in replacements"
-                                :key="entry.id"
-                                :value="entry.id"
-                            >
-                                {{ entry.name
-                                }}{{
-                                    entry.is_parent
-                                        ? ` (${t('metadata.parentType')})`
-                                        : ''
-                                }}
-                            </option>
-                        </select>
-                        <p
-                            id="metadata-replacement-help"
-                            class="text-caption text-muted-foreground"
-                        >
-                            {{ t('metadata.parentReplacement') }}
-                        </p>
-                    </div>
-                    <InputError
-                        id="metadata-replacement-error"
-                        :message="form.errors.replacement_ticket_type_id"
-                    />
-                </fieldset>
-                <DialogFooter>
-                    <Button
-                        type="button"
-                        variant="outline"
-                        :disabled="form.processing"
-                        @click="close(false)"
-                        >{{ t('common.cancel') }}</Button
-                    >
-                    <Button
-                        type="submit"
-                        :variant="deleting ? 'destructive' : 'default'"
-                        :loading="form.processing"
-                        :disabled="deleting && entries.length <= 1"
-                        >{{
-                            deleting
-                                ? t('workflow.confirmDelete')
-                                : target?.action === 'create'
-                                  ? title
-                                  : t('common.save')
-                        }}</Button
-                    >
-                </DialogFooter>
-            </form>
-        </DialogContent>
-    </Dialog>
-</template>

resources/js/components/projects/MetadataOptionList.vue

@@ -1,147 +0,0 @@
-<script setup lang="ts">
-import { LockKeyhole, Pencil, Plus, Trash2 } from 'lucide-vue-next';
-import { Badge } from '@/components/ui/badge';
-import { Button } from '@/components/ui/button';
-import { useLocalization } from '@/composables/useLocalization';
-import type {
-    MetadataEditorTarget,
-    MetadataEntry,
-    MetadataKind,
-} from '@/types/project-metadata';
-
-defineProps<{ kind: MetadataKind; entries: MetadataEntry[] }>();
-defineEmits<{ edit: [target: MetadataEditorTarget] }>();
-const { t } = useLocalization();
-</script>
-
-<template>
-    <section
-        class="bg-card grid min-w-0 gap-4 overflow-hidden rounded-xl border p-4 sm:p-6"
-        :aria-labelledby="`metadata-${kind}`"
-    >
-        <header class="flex flex-wrap items-center justify-between gap-3">
-            <div class="flex items-center gap-2">
-                <h3 :id="`metadata-${kind}`" class="font-semibold">
-                    {{
-                        t(
-                            kind === 'type'
-                                ? 'metadata.types'
-                                : 'metadata.priorities',
-                        )
-                    }}
-                </h3>
-                <Badge variant="secondary">{{ entries.length }}</Badge>
-            </div>
-            <Button
-                type="button"
-                variant="outline"
-                class="w-full sm:w-auto"
-                @click="$emit('edit', { kind, action: 'create' })"
-            >
-                <Plus class="size-4" aria-hidden="true" />{{
-                    t(
-                        kind === 'type'
-                            ? 'metadata.addType'
-                            : 'metadata.addPriority',
-                    )
-                }}
-            </Button>
-        </header>
-        <p class="text-muted-foreground text-sm">
-            {{
-                t(
-                    kind === 'type'
-                        ? 'metadata.typesDescription'
-                        : 'metadata.prioritiesDescription',
-                )
-            }}
-        </p>
-        <ol
-            class="divide-y"
-            :aria-label="
-                t(kind === 'type' ? 'metadata.types' : 'metadata.priorities')
-            "
-        >
-            <li
-                v-for="entry in entries"
-                :key="entry.id"
-                class="flex min-w-0 flex-wrap items-center gap-3 py-4"
-                :data-metadata-entry="`${kind}-${entry.id}`"
-            >
-                <span
-                    class="bg-accent text-accent-foreground flex size-9 shrink-0 items-center justify-center rounded-lg text-sm font-semibold"
-                    :aria-label="
-                        t('workflow.positionValue', {
-                            position: entry.position,
-                        })
-                    "
-                    >{{ entry.position }}</span
-                >
-                <div class="grid min-w-0 flex-1 basis-28 gap-1">
-                    <p class="break-words font-medium">{{ entry.name }}</p>
-                    <div
-                        v-if="kind === 'type'"
-                        class="text-caption text-muted-foreground flex flex-wrap items-center gap-2"
-                    >
-                        <Badge variant="outline">{{
-                            t(
-                                entry.is_parent
-                                    ? 'metadata.parentType'
-                                    : 'metadata.standardType',
-                            )
-                        }}</Badge>
-                        <span>{{
-                            t('metadata.assignedTickets', {
-                                count: entry.tickets_count ?? 0,
-                            })
-                        }}</span>
-                    </div>
-                </div>
-                <div class="flex shrink-0 gap-1">
-                    <Button
-                        type="button"
-                        variant="ghost"
-                        size="icon"
-                        :aria-label="
-                            t('metadata.editEntry', { name: entry.name })
-                        "
-                        @click="$emit('edit', { kind, action: 'edit', entry })"
-                        ><Pencil class="size-4" aria-hidden="true"
-                    /></Button>
-                    <Button
-                        type="button"
-                        variant="ghost"
-                        size="icon"
-                        class="text-destructive"
-                        :disabled="entries.length <= 1"
-                        :aria-label="
-                            t('metadata.deleteEntry', { name: entry.name })
-                        "
-                        :aria-describedby="
-                            entries.length <= 1
-                                ? `metadata-${kind}-protection`
-                                : undefined
-                        "
-                        @click="
-                            $emit('edit', { kind, action: 'delete', entry })
-                        "
-                        ><Trash2 class="size-4" aria-hidden="true"
-                    /></Button>
-                </div>
-            </li>
-        </ol>
-        <p
-            v-if="entries.length <= 1"
-            :id="`metadata-${kind}-protection`"
-            class="text-caption text-muted-foreground flex items-start gap-2"
-        >
-            <LockKeyhole class="size-4 shrink-0" aria-hidden="true" />{{
-                t(
-                    kind === 'type'
-                        ? 'metadata.lastType'
-                        : 'metadata.lastPriority',
-                )
-            }}
-        </p>
-    </section>
-</template>

resources/js/components/projects/NotificationEditorDialog.vue

@@ -1,632 +0,0 @@
-<script setup lang="ts">
-import { useForm } from '@inertiajs/vue3';
-import { computed, watch } from 'vue';
-import {
-    destroy,
-    store,
-    update,
-} from '@/actions/App/Http/Controllers/ProjectNotificationSettingsController';
-import FormFeedback from '@/components/FormFeedback.vue';
-import InputError from '@/components/InputError.vue';
-import { Button } from '@/components/ui/button';
-import { Checkbox } from '@/components/ui/checkbox';
-import {
-    Dialog,
-    DialogContent,
-    DialogDescription,
-    DialogFooter,
-    DialogHeader,
-    DialogTitle,
-} from '@/components/ui/dialog';
-import { Input } from '@/components/ui/input';
-import { Label } from '@/components/ui/label';
-import { useFormProtection } from '@/composables/useFormProtection';
-import { notificationLabel } from '@/lib/notification-labels';
-import { useLocalization } from '@/composables/useLocalization';
-import {
-    serializeNotificationFilters,
-    supportsFilterValue,
-} from '@/lib/notification-filters';
-import type { ProjectNotificationSettingsPageProps } from '@/types';
-import type {
-    NotificationEditorTarget,
-    NotificationFilterFormState,
-} from '@/types/project-notifications';
-
-const props = defineProps<{
-    target: NotificationEditorTarget | null;
-    settings: ProjectNotificationSettingsPageProps;
-}>();
-const emit = defineEmits<{ close: [] }>();
-const { t } = useLocalization();
-const form = useForm({
-    name: '',
-    event_type: '',
-    channel: '',
-    enabled: true,
-    delivery_url: '',
-    message_template: '',
-    allowed_mentions: [] as string[],
-    filters: [] as NotificationFilterFormState[],
-});
-const protection = useFormProtection(form, {
-    isDirty: () => props.target !== null && form.isDirty,
-});
-const deleting = computed(() => props.target?.action === 'delete');
-const title = computed(() =>
-    t(
-        deleting.value
-            ? 'notifications.delete'
-            : props.target?.action === 'edit'
-              ? 'notifications.edit'
-              : 'notifications.create',
-    ),
-);
-const inputClass =
-    'border-input bg-background focus-visible:ring-ring min-h-11 w-full min-w-0 rounded-md border px-3 py-2 text-sm focus-visible:ring-2';
-let nextFilterId = 0;
-watch(
-    () => props.target,
-    (target) => {
-        if (!target) {
-            return;
-        }
-        const entry = target.entry;
-        const mentions = entry?.channel_configuration.allowed_mentions;
-        form.defaults({
-            name: entry?.name ?? '',
-            event_type:
-                entry?.event_type ??
-                props.settings.eventTypeOptions[0]?.value ??
-                '',
-            channel:
-                entry?.channel ??
-                props.settings.channelOptions.find(
-                    (option) => option.value === 'webhook',
-                )?.value ??
-                props.settings.channelOptions[0]?.value ??
-                '',
-            enabled: entry?.enabled ?? true,
-            delivery_url: '',
-            message_template: entry?.message_template ?? '',
-            allowed_mentions: Array.isArray(mentions)
-                ? mentions.filter(
-                      (value): value is string => typeof value === 'string',
-                  )
-                : [],
-            filters: (entry?.filters ?? []).map((filter) => ({
-                id: nextFilterId++,
-                attribute: filter.attribute,
-                operator: filter.operator,
-                value: Array.isArray(filter.value)
-                    ? filter.value.join(', ')
-                    : (filter.value ?? ''),
-            })),
-        });
-        form.resetAndClearErrors();
-        protection.clearFeedback();
-    },
-    { immediate: true },
-);
-function close(open: boolean): void {
-    if (open || form.processing || !protection.confirmLeave()) {
-        return;
-    }
-    form.resetAndClearErrors();
-    protection.clearFeedback();
-    emit('close');
-}
-function addFilter(): void {
-    form.filters.push({
-        id: nextFilterId++,
-        attribute: props.settings.filterAttributeOptions[0]?.value ?? '',
-        operator: 'equals',
-        value: '',
-    });
-}
-function removeFilter(index: number): void {
-    form.filters.splice(index, 1);
-    form.clearErrors(
-        ...(Object.keys(form.errors).filter((key) =>
-            key.startsWith('filters'),
-        ) as (keyof typeof form.errors)[]),
-    );
-}
-function errorFor(prefix: string): string | undefined {
-    return Object.entries(form.errors).find(
-        ([key]) => key === prefix || key.startsWith(`${prefix}.`),
-    )?.[1];
-}
-function submit(): void {
-    const target = props.target;
-    if (!target || form.processing) {
-        return;
-    }
-    const project = props.settings.project.id;
-    const route =
-        target.action === 'create'
-            ? store(project)
-            : target.action === 'edit'
-              ? update([project, target.entry.id])
-              : destroy([project, target.entry.id]);
-    form.transform((data) =>
-        deleting.value
-            ? {}
-            : {
-                  name: data.name,
-                  event_type: data.event_type,
-                  channel: data.channel,
-                  enabled: data.enabled,
-                  delivery_url: data.delivery_url || null,
-                  channel_configuration:
-                      data.channel === 'discord'
-                          ? { allowed_mentions: data.allowed_mentions }
-                          : {},
-                  message_template:
-                      data.channel === 'discord' ? data.message_template : null,
-                  filters: serializeNotificationFilters(data.filters),
-              },
-    );
-    protection.submit(route, {
-        preserveScroll: true,
-        onSuccess: () => {
-            form.resetAndClearErrors();
-            emit('close');
-        },
-    });
-}
-</script>
-
-<template>
-    <Dialog :open="target !== null" @update:open="close">
-        <DialogContent
-            class="sm:max-w-2xl"
-            :show-close-button="!form.processing"
-            @escape-key-down="form.processing && $event.preventDefault()"
-            @interact-outside="form.processing && $event.preventDefault()"
-        >
-            <DialogHeader>
-                <DialogTitle>{{ title }}</DialogTitle>
-                <DialogDescription>{{
-                    deleting
-                        ? t('notifications.deleteHelp', {
-                              name: target?.entry?.name ?? '',
-                          })
-                        : t('notifications.editorHelp')
-                }}</DialogDescription>
-            </DialogHeader>
-            <form
-                class="grid min-w-0 gap-5"
-                :aria-busy="form.processing"
-                @submit.prevent="submit"
-            >
-                <FormFeedback :state="protection.state.value" @retry="submit" />
-                <fieldset
-                    v-if="!deleting"
-                    :disabled="form.processing"
-                    class="grid min-w-0 gap-5"
-                >
-                    <div class="grid gap-2">
-                        <Label for="notification-name">{{
-                            t('notifications.name')
-                        }}</Label>
-                        <Input
-                            id="notification-name"
-                            v-model="form.name"
-                            name="name"
-                            required
-                            maxlength="255"
-                            :aria-invalid="!!form.errors.name"
-                            aria-describedby="notification-name-error"
-                        />
-                        <InputError
-                            id="notification-name-error"
-                            :message="form.errors.name"
-                        />
-                    </div>
-                    <div class="grid min-w-0 gap-4 sm:grid-cols-2">
-                        <div class="grid min-w-0 gap-2">
-                            <Label for="notification-event">{{
-                                t('notifications.event')
-                            }}</Label>
-                            <select
-                                id="notification-event"
-                                v-model="form.event_type"
-                                name="event_type"
-                                :class="inputClass"
-                                :aria-invalid="!!form.errors.event_type"
-                                aria-describedby="notification-event-error"
-                            >
-                                <option
-                                    v-for="option in settings.eventTypeOptions"
-                                    :key="option.value"
-                                    :value="option.value"
-                                >
-                                    {{
-                                        notificationLabel(
-                                            t,
-                                            'event',
-                                            option.value,
-                                            option.label,
-                                        )
-                                    }}
-                                </option>
-                            </select>
-                            <InputError
-                                id="notification-event-error"
-                                :message="form.errors.event_type"
-                            />
-                        </div>
-                        <div class="grid min-w-0 gap-2">
-                            <Label for="notification-channel">{{
-                                t('notifications.channel')
-                            }}</Label>
-                            <select
-                                id="notification-channel"
-                                v-model="form.channel"
-                                name="channel"
-                                :class="inputClass"
-                                :aria-invalid="!!form.errors.channel"
-                                aria-describedby="notification-channel-error"
-                            >
-                                <option
-                                    v-for="option in settings.channelOptions"
-                                    :key="option.value"
-                                    :value="option.value"
-                                >
-                                    {{
-                                        notificationLabel(
-                                            t,
-                                            'channel',
-                                            option.value,
-                                            option.label,
-                                        )
-                                    }}
-                                </option>
-                            </select>
-                            <InputError
-                                id="notification-channel-error"
-                                :message="form.errors.channel"
-                            />
-                        </div>
-                    </div>
-                    <section
-                        class="bg-muted/25 grid min-w-0 gap-3 rounded-lg border p-4"
-                        aria-labelledby="notification-delivery-title"
-                    >
-                        <h3
-                            id="notification-delivery-title"
-                            class="font-semibold"
-                        >
-                            {{ t('notifications.delivery') }}
-                        </h3>
-                        <p v-if="target?.action === 'edit'" class="text-sm">
-                            {{
-                                t(
-                                    target.entry.has_delivery_url
-                                        ? 'notifications.keepUrl'
-                                        : 'notifications.urlMissing',
-                                )
-                            }}
-                        </p>
-                        <Label for="notification-url">{{
-                            t(
-                                target?.action === 'edit'
-                                    ? 'notifications.replaceUrl'
-                                    : 'notifications.url',
-                            )
-                        }}</Label>
-                        <Input
-                            id="notification-url"
-                            v-model="form.delivery_url"
-                            name="delivery_url"
-                            type="password"
-                            autocomplete="new-password"
-                            :spellcheck="false"
-                            :required="target?.action === 'create'"
-                            maxlength="2048"
-                            :aria-invalid="!!form.errors.delivery_url"
-                            aria-describedby="notification-url-help notification-url-error"
-                        />
-                        <p
-                            id="notification-url-help"
-                            class="text-caption text-muted-foreground"
-                        >
-                            {{ t('notifications.secretHelp') }}
-                        </p>
-                        <InputError
-                            id="notification-url-error"
-                            :message="form.errors.delivery_url"
-                        />
-                    </section>
-                    <section
-                        v-if="form.channel === 'discord'"
-                        class="grid min-w-0 gap-4"
-                        aria-labelledby="notification-message-title"
-                    >
-                        <div class="grid gap-2">
-                            <Label
-                                id="notification-message-title"
-                                for="notification-message"
-                                >{{ t('notifications.message') }}</Label
-                            >
-                            <textarea
-                                id="notification-message"
-                                v-model="form.message_template"
-                                name="message_template"
-                                rows="4"
-                                required
-                                maxlength="2000"
-                                :class="inputClass"
-                                :aria-invalid="!!form.errors.message_template"
-                                aria-describedby="notification-message-help notification-message-error"
-                            />
-                            <p
-                                id="notification-message-help"
-                                class="text-caption text-muted-foreground"
-                            >
-                                {{ t('notifications.messageHelp') }}
-                            </p>
-                            <InputError
-                                id="notification-message-error"
-                                :message="form.errors.message_template"
-                            />
-                        </div>
-                        <details class="rounded-lg border p-3">
-                            <summary
-                                class="focus-visible:ring-ring cursor-pointer rounded font-medium focus-visible:ring-2"
-                            >
-                                {{ t('notifications.variables') }}
-                            </summary>
-                            <dl class="mt-3 grid min-w-0 gap-3 text-sm">
-                                <div
-                                    v-for="variable in settings.templateVariables"
-                                    :key="variable.value"
-                                    class="grid min-w-0 gap-1"
-                                >
-                                    <dt class="break-all font-mono">
-                                        {{ variable.value }}
-                                    </dt>
-                                    <dd class="text-muted-foreground">
-                                        {{
-                                            notificationLabel(
-                                                t,
-                                                'variable',
-                                                variable.value.slice(1),
-                                                variable.description,
-                                            )
-                                        }}
-                                    </dd>
-                                </div>
-                            </dl>
-                        </details>
-                        <fieldset
-                            class="grid gap-2"
-                            aria-describedby="notification-mentions-help notification-mentions-error"
-                        >
-                            <legend class="mb-2 text-sm font-medium">
-                                {{ t('notifications.mentions') }}
-                            </legend>
-                            <label
-                                v-for="option in settings.discordAllowedMentionOptions"
-                                :key="option.value"
-                                class="flex min-h-11 items-center gap-3 rounded-lg border px-3 py-2 text-sm"
-                            >
-                                <input
-                                    v-model="form.allowed_mentions"
-                                    type="checkbox"
-                                    :value="option.value"
-                                    :aria-invalid="
-                                        !!errorFor('channel_configuration')
-                                    "
-                                    class="accent-primary size-4"
-                                />{{
-                                    notificationLabel(
-                                        t,
-                                        'mention',
-                                        option.value,
-                                        option.label,
-                                    )
-                                }}
-                            </label>
-                            <p
-                                id="notification-mentions-help"
-                                class="text-caption text-muted-foreground"
-                            >
-                                {{ t('notifications.mentionsHelp') }}
-                            </p>
-                            <InputError
-                                id="notification-mentions-error"
-                                :message="errorFor('channel_configuration')"
-                            />
-                        </fieldset>
-                    </section>
-                    <section
-                        class="grid min-w-0 gap-3 border-t pt-4"
-                        aria-labelledby="notification-filters-title"
-                    >
-                        <h3
-                            id="notification-filters-title"
-                            class="font-semibold"
-                        >
-                            {{ t('notifications.filters') }}
-                        </h3>
-                        <p class="text-caption text-muted-foreground">
-                            {{ t('notifications.filtersHelp') }}
-                        </p>
-                        <p v-if="!form.filters.length" class="text-sm">
-                            {{ t('notifications.noFilters') }}
-                        </p>
-                        <fieldset
-                            v-for="(filter, index) in form.filters"
-                            :key="filter.id"
-                            class="bg-muted/25 grid min-w-0 gap-3 rounded-lg border p-3"
-                        >
-                            <legend class="px-1 text-sm font-medium">
-                                {{
-                                    t('notifications.filterNumber', {
-                                        number: index + 1,
-                                    })
-                                }}
-                            </legend>
-                            <div class="grid min-w-0 gap-3 sm:grid-cols-2">
-                                <div class="grid min-w-0 gap-2">
-                                    <Label
-                                        :for="`filter-attribute-${filter.id}`"
-                                        >{{
-                                            t('notifications.attribute')
-                                        }}</Label
-                                    >
-                                    <select
-                                        :id="`filter-attribute-${filter.id}`"
-                                        v-model="filter.attribute"
-                                        :class="inputClass"
-                                        :aria-invalid="
-                                            !!errorFor(`filters.${index}`)
-                                        "
-                                        :aria-describedby="`filter-error-${filter.id}`"
-                                    >
-                                        <option
-                                            v-for="option in settings.filterAttributeOptions"
-                                            :key="option.value"
-                                            :value="option.value"
-                                        >
-                                            {{
-                                                notificationLabel(
-                                                    t,
-                                                    'attribute',
-                                                    option.value,
-                                                    option.label,
-                                                )
-                                            }}
-                                        </option>
-                                    </select>
-                                </div>
-                                <div class="grid min-w-0 gap-2">
-                                    <Label
-                                        :for="`filter-operator-${filter.id}`"
-                                        >{{
-                                            t('notifications.operator')
-                                        }}</Label
-                                    >
-                                    <select
-                                        :id="`filter-operator-${filter.id}`"
-                                        v-model="filter.operator"
-                                        :class="inputClass"
-                                        :aria-invalid="
-                                            !!errorFor(`filters.${index}`)
-                                        "
-                                        :aria-describedby="`filter-error-${filter.id}`"
-                                    >
-                                        <option
-                                            v-for="option in settings.filterOperatorOptions"
-                                            :key="option.value"
-                                            :value="option.value"
-                                        >
-                                            {{
-                                                notificationLabel(
-                                                    t,
-                                                    'operator',
-                                                    option.value,
-                                                    option.label,
-                                                )
-                                            }}
-                                        </option>
-                                    </select>
-                                </div>
-                            </div>
-                            <div
-                                v-if="supportsFilterValue(filter.operator)"
-                                class="grid gap-2"
-                            >
-                                <Label :for="`filter-value-${filter.id}`">{{
-                                    t(
-                                        filter.operator === 'in'
-                                            ? 'notifications.values'
-                                            : 'notifications.value',
-                                    )
-                                }}</Label>
-                                <textarea
-                                    :id="`filter-value-${filter.id}`"
-                                    v-model="filter.value"
-                                    rows="2"
-                                    :class="inputClass"
-                                    :aria-invalid="
-                                        !!errorFor(`filters.${index}`)
-                                    "
-                                    :aria-describedby="`filter-error-${filter.id}`"
-                                />
-                            </div>
-                            <InputError
-                                :id="`filter-error-${filter.id}`"
-                                :message="errorFor(`filters.${index}`)"
-                            />
-                            <Button
-                                type="button"
-                                variant="outline"
-                                class="justify-self-end"
-                                :aria-label="
-                                    t('notifications.removeFilterNumber', {
-                                        number: index + 1,
-                                    })
-                                "
-                                @click="removeFilter(index)"
-                                >{{ t('notifications.removeFilter') }}</Button
-                            >
-                        </fieldset>
-                        <InputError :message="form.errors.filters" />
-                        <Button
-                            type="button"
-                            variant="outline"
-                            class="justify-self-start"
-                            @click="addFilter"
-                            >{{ t('notifications.addFilter') }}</Button
-                        >
-                    </section>
-                    <div class="grid gap-2 border-t pt-4">
-                        <Label
-                            for="notification-enabled"
-                            class="flex min-h-11 items-center gap-3"
-                            ><Checkbox
-                                id="notification-enabled"
-                                v-model="form.enabled"
-                                :invalid="!!form.errors.enabled"
-                                aria-describedby="notification-enabled-help notification-enabled-error"
-                            />{{ t('notifications.enabled') }}</Label
-                        >
-                        <p
-                            id="notification-enabled-help"
-                            class="text-caption text-muted-foreground"
-                        >
-                            {{ t('notifications.enabledHelp') }}
-                        </p>
-                        <InputError
-                            id="notification-enabled-error"
-                            :message="form.errors.enabled"
-                        />
-                    </div>
-                </fieldset>
-                <InputError v-else :message="errorFor('notificationAction')" />
-                <DialogFooter>
-                    <Button
-                        type="button"
-                        variant="outline"
-                        :disabled="form.processing"
-                        @click="close(false)"
-                        >{{ t('common.cancel') }}</Button
-                    >
-                    <Button
-                        type="submit"
-                        :variant="deleting ? 'destructive' : 'default'"
-                        :loading="form.processing"
-                        >{{
-                            deleting
-                                ? t('notifications.confirmDelete')
-                                : t('common.save')
-                        }}</Button
-                    >
-                </DialogFooter>
-            </form>
-        </DialogContent>
-    </Dialog>
-</template>

resources/js/components/projects/ProjectAccessEditorDialog.vue

@@ -1,199 +0,0 @@
-<script setup lang="ts">
-import { useForm } from '@inertiajs/vue3';
-import { computed, watch } from 'vue';
-import {
-    updateTeamPermissions,
-    updateUserPermissions,
-} from '@/actions/App/Http/Controllers/ProjectController';
-import FormFeedback from '@/components/FormFeedback.vue';
-import InputError from '@/components/InputError.vue';
-import { Button } from '@/components/ui/button';
-import {
-    Dialog,
-    DialogContent,
-    DialogDescription,
-    DialogFooter,
-    DialogHeader,
-    DialogTitle,
-} from '@/components/ui/dialog';
-import { useFormProtection } from '@/composables/useFormProtection';
-import { useLocalization } from '@/composables/useLocalization';
-import type { PermissionOption } from '@/types';
-import {
-    projectPermissionDescriptions,
-    projectPermissionLabels,
-} from '@/types/project-access';
-import type { ProjectAccessTarget } from '@/types/project-access';
-
-const props = defineProps<{
-    projectId: number;
-    target: ProjectAccessTarget | null;
-    permissionOptions: PermissionOption[];
-}>();
-const emit = defineEmits<{ close: [] }>();
-const { t } = useLocalization();
-const form = useForm({ permissions: [] as string[] });
-const protection = useFormProtection(form, {
-    isDirty: () => props.target !== null && form.isDirty,
-});
-const selectionError = computed(
-    () =>
-        Object.entries(form.errors).find(([key]) =>
-            key.startsWith('permissions'),
-        )?.[1],
-);
-const options = computed(() =>
-    props.permissionOptions
-        .filter((option) => option.value in projectPermissionLabels)
-        .map((option) => ({
-            value: option.value,
-            label: t(
-                projectPermissionLabels[
-                    option.value as keyof typeof projectPermissionLabels
-                ],
-            ),
-            description: t(
-                projectPermissionDescriptions[
-                    option.value as keyof typeof projectPermissionDescriptions
-                ],
-            ),
-        })),
-);
-watch(
-    () => props.target,
-    (target) => {
-        form.defaults({ permissions: [...(target?.permissions ?? [])] });
-        form.resetAndClearErrors();
-        protection.clearFeedback();
-    },
-);
-function close(open: boolean): void {
-    if (open || form.processing || !protection.confirmLeave()) {
-        return;
-    }
-    form.resetAndClearErrors();
-    emit('close');
-}
-function submit(): void {
-    if (!props.target || form.processing) {
-        return;
-    }
-    const route =
-        props.target.kind === 'user'
-            ? updateUserPermissions([props.projectId, props.target.id])
-            : updateTeamPermissions([props.projectId, props.target.id]);
-    protection.submit(route, {
-        preserveScroll: true,
-        onSuccess: () => {
-            form.defaults();
-            form.resetAndClearErrors();
-            emit('close');
-        },
-    });
-}
-</script>
-
-<template>
-    <Dialog :open="target !== null" @update:open="close">
-        <DialogContent
-            :show-close-button="!form.processing"
-            @escape-key-down="form.processing && $event.preventDefault()"
-            @interact-outside="form.processing && $event.preventDefault()"
-        >
-            <DialogHeader>
-                <DialogTitle class="break-words">{{
-                    t('projectAccess.editFor', { name: target?.name ?? '' })
-                }}</DialogTitle>
-                <DialogDescription>{{
-                    t(
-                        target?.kind === 'team'
-                            ? 'projectAccess.teamHelp'
-                            : 'projectAccess.directHelp',
-                    )
-                }}</DialogDescription>
-            </DialogHeader>
-            <form class="grid min-w-0 gap-5" @submit.prevent="submit">
-                <FormFeedback
-                    :state="protection.state.value"
-                    :title="
-                        protection.responseStatus.value === 403
-                            ? t('projectAccess.forbidden')
-                            : undefined
-                    "
-                    :description="
-                        protection.responseStatus.value === 403
-                            ? t('projectAccess.forbiddenHelp')
-                            : undefined
-                    "
-                    :retryable="protection.responseStatus.value !== 403"
-                    @retry="submit"
-                />
-                <fieldset
-                    :disabled="form.processing"
-                    class="grid min-w-0 gap-3"
-                    :aria-invalid="!!selectionError"
-                    aria-describedby="project-permission-error"
-                >
-                    <legend class="mb-3 text-sm font-semibold">
-                        {{
-                            t(
-                                target?.kind === 'team'
-                                    ? 'projectAccess.teamPermissions'
-                                    : 'projectAccess.directPermissions',
-                            )
-                        }}
-                    </legend>
-                    <label
-                        v-for="option in options"
-                        :key="option.value"
-                        class="hover:bg-accent flex cursor-pointer items-start gap-3 rounded-lg border p-3"
-                    >
-                        <input
-                            v-model="form.permissions"
-                            type="checkbox"
-                            :value="option.value"
-                            :aria-label="option.label"
-                            class="accent-primary focus-visible:ring-ring mt-0.5 size-5 shrink-0 focus-visible:ring-2"
-                        />
-                        <span class="grid gap-1"
-                            ><span class="text-sm font-medium">{{
-                                option.label
-                            }}</span
-                            ><span class="text-muted-foreground text-xs">{{
-                                option.description
-                            }}</span></span
-                        >
-                    </label>
-                    <InputError
-                        id="project-permission-error"
-                        :message="selectionError"
-                    />
-                </fieldset>
-                <p class="text-muted-foreground text-sm">
-                    {{ t('projectAccess.clearHelp') }}
-                </p>
-                <p
-                    v-if="target?.globalAdmin"
-                    class="bg-accent text-accent-foreground rounded-lg p-3 text-sm"
-                >
-                    {{ t('projectAccess.globalHelp') }}
-                </p>
-                <p class="text-muted-foreground text-xs">
-                    {{ t('projectAccess.selfHelp') }}
-                </p>
-                <DialogFooter>
-                    <Button
-                        type="button"
-                        variant="outline"
-                        :disabled="form.processing"
-                        @click="close(false)"
-                        >{{ t('common.cancel') }}</Button
-                    >
-                    <Button type="submit" :disabled="form.processing">{{
-                        t('projectAccess.save')
-                    }}</Button>
-                </DialogFooter>
-            </form>
-        </DialogContent>
-    </Dialog>
-</template>

resources/js/components/projects/ProjectPermissionBadges.vue

@@ -1,26 +0,0 @@
-<script setup lang="ts">
-import { Badge } from '@/components/ui/badge';
-import { useLocalization } from '@/composables/useLocalization';
-import { projectPermissionLabels } from '@/types/project-access';
-
-defineProps<{ permissions: string[]; emptyLabel: string }>();
-const { t } = useLocalization();
-</script>
-
-<template>
-    <div class="flex flex-wrap gap-1.5">
-        <template
-            v-for="(label, value) in projectPermissionLabels"
-            :key="value"
-        >
-            <Badge v-if="permissions.includes(value)" variant="secondary">{{
-                t(label)
-            }}</Badge>
-        </template>
-        <span
-            v-if="permissions.length === 0"
-            class="text-muted-foreground text-sm"
-            >{{ emptyLabel }}</span
-        >
-    </div>
-</template>

resources/js/components/projects/ProjectTemplateForm.vue

@@ -1,347 +0,0 @@
-<script setup lang="ts">
-import { Link, useForm } from '@inertiajs/vue3';
-import { Layers3, LockKeyhole } from 'lucide-vue-next';
-import { computed } from 'vue';
-import FormFeedback from '@/components/FormFeedback.vue';
-import FeedbackState from '@/components/FeedbackState.vue';
-import InputError from '@/components/InputError.vue';
-import { Badge } from '@/components/ui/badge';
-import { Button } from '@/components/ui/button';
-import { Input } from '@/components/ui/input';
-import { Label } from '@/components/ui/label';
-import { useFormProtection } from '@/composables/useFormProtection';
-import { useLocalization } from '@/composables/useLocalization';
-import { useProjectTemplateAreas } from '@/composables/useProjectTemplateAreas';
-import { index, update } from '@/routes/project-templates';
-import { show } from '@/routes/projects';
-import { store } from '@/routes/projects/templates';
-import type { ProjectDuplicateCopyAreaOption } from '@/types';
-
-import type { ProjectModel } from '@/types/models/project-model';
-import type { ProjectTemplateModel } from '@/types/models/project-template-model';
-
-const props = defineProps<{
-    copyAreaOptions: ProjectDuplicateCopyAreaOption[];
-    project?: ProjectModel;
-    template?: ProjectTemplateModel;
-}>();
-const { t } = useLocalization();
-const { areaText } = useProjectTemplateAreas();
-const source = computed(() => props.template?.source_project ?? props.project);
-const linkedCount = computed(() => props.template?.linked_project_count ?? 0);
-const form = useForm(
-    `ProjectTemplate:${props.template ? `edit:${props.template.id}` : `create:${props.project?.id}`}`,
-    {
-        name:
-            props.template?.name ??
-            t('templates.defaultName', { project: props.project?.name ?? '' }),
-        slug:
-            props.template?.slug ??
-            `${props.project?.key.toLowerCase()}-template`,
-        copy_areas: props.template
-            ? [...props.template.copy_areas]
-            : props.copyAreaOptions.map((area) => area.value),
-        confirm_linked_projects_update: false,
-    },
-);
-const protection = useFormProtection(form);
-const copyAreasError = computed(
-    () =>
-        form.errors.copy_areas ??
-        Object.entries(form.errors).find(([key]) =>
-            key.startsWith('copy_areas.'),
-        )?.[1],
-);
-const cancelTarget = computed(() =>
-    props.template ? index() : show(props.project!.id),
-);
-function submit(): void {
-    if (
-        !source.value ||
-        (linkedCount.value > 0 && !form.confirm_linked_projects_update)
-    ) {
-        return;
-    }
-    form.transform((data) =>
-        props.template
-            ? {
-                  name: data.name,
-                  copy_areas: data.copy_areas,
-                  ...(linkedCount.value > 0
-                      ? {
-                            confirm_linked_projects_update:
-                                data.confirm_linked_projects_update,
-                        }
-                      : {}),
-              }
-            : { name: data.name, slug: data.slug, copy_areas: data.copy_areas },
-    );
-    protection.submit(
-        props.template ? update(props.template.id) : store(props.project!.id),
-        { preserveScroll: true },
-    );
-}
-</script>
-
-<template>
-    <form
-        class="gap-page grid min-w-0"
-        :aria-busy="form.processing"
-        @submit.prevent="submit"
-    >
-        <FormFeedback :state="protection.state.value" @retry="submit" />
-        <FeedbackState
-            v-if="!source"
-            state="error"
-            :title="t('templates.missingSource')"
-            :description="t('templates.missingSourceHelp')"
-        />
-        <div
-            class="gap-page grid min-w-0 items-start lg:grid-cols-[minmax(0,1fr)_18rem]"
-        >
-            <div class="gap-page grid min-w-0">
-                <section
-                    class="bg-card gap-column grid min-w-0 rounded-md border p-5"
-                    aria-labelledby="template-details-title"
-                >
-                    <h2 id="template-details-title" class="text-title">
-                        {{ t('templates.details') }}
-                    </h2>
-                    <div class="gap-stack grid">
-                        <Label for="name">{{ t('templates.name') }}</Label>
-                        <Input
-                            id="name"
-                            v-model="form.name"
-                            name="name"
-                            required
-                            maxlength="255"
-                            :disabled="form.processing || !source"
-                            :placeholder="t('templates.namePlaceholder')"
-                            :invalid="!!form.errors.name"
-                            aria-describedby="name-error"
-                        />
-                        <InputError
-                            id="name-error"
-                            :message="form.errors.name"
-                        />
-                    </div>
-                    <div class="gap-stack grid">
-                        <Label for="slug"
-                            ><LockKeyhole
-                                v-if="template"
-                                class="size-4"
-                                aria-hidden="true"
-                            />{{ t('templates.slug') }}</Label
-                        >
-                        <Input
-                            id="slug"
-                            v-model="form.slug"
-                            name="slug"
-                            required
-                            maxlength="255"
-                            :disabled="!!template || form.processing || !source"
-                            :placeholder="t('templates.slugPlaceholder')"
-                            :invalid="!!form.errors.slug"
-                            aria-describedby="slug-help slug-error"
-                            :spellcheck="false"
-                            autocapitalize="none"
-                        />
-                        <p
-                            id="slug-help"
-                            class="text-caption text-muted-foreground"
-                        >
-                            {{
-                                t(
-                                    template
-                                        ? 'templates.slugLocked'
-                                        : 'templates.slugHelp',
-                                )
-                            }}
-                        </p>
-                        <InputError
-                            id="slug-error"
-                            :message="form.errors.slug"
-                        />
-                    </div>
-                </section>
-                <fieldset
-                    class="bg-card min-w-0 rounded-md border p-5"
-                    :disabled="form.processing || !source"
-                    aria-describedby="areas-help copy-areas-error"
-                >
-                    <legend class="text-title px-1">
-                        {{ t('templates.groups') }}
-                    </legend>
-                    <p
-                        id="areas-help"
-                        class="text-caption text-muted-foreground mb-4"
-                    >
-                        {{
-                            t(
-                                template
-                                    ? 'templates.editGroupsHelp'
-                                    : 'templates.createGroupsHelp',
-                            )
-                        }}
-                    </p>
-                    <div class="gap-stack grid sm:grid-cols-2">
-                        <label
-                            v-for="area in copyAreaOptions"
-                            :key="area.value"
-                            class="hover:border-primary/45 has-checked:border-primary has-checked:bg-accent/50 flex min-h-11 min-w-0 cursor-pointer items-start gap-3 rounded-md border p-3 transition-colors"
-                        >
-                            <input
-                                v-model="form.copy_areas"
-                                type="checkbox"
-                                :value="area.value"
-                                :aria-labelledby="`area-${area.value}`"
-                                :aria-describedby="`area-${area.value}-help copy-areas-error`"
-                                :aria-invalid="!!copyAreasError"
-                                class="accent-primary mt-0.5 size-5 shrink-0"
-                            />
-                            <span class="gap-stack grid min-w-0">
-                                <span
-                                    :id="`area-${area.value}`"
-                                    class="text-body font-semibold"
-                                    >{{
-                                        areaText(
-                                            area.value,
-                                            'label',
-                                            area.label,
-                                        )
-                                    }}</span
-                                >
-                                <span
-                                    :id="`area-${area.value}-help`"
-                                    class="text-caption text-muted-foreground"
-                                    >{{
-                                        areaText(
-                                            area.value,
-                                            'description',
-                                            area.description,
-                                        )
-                                    }}</span
-                                >
-                            </span>
-                        </label>
-                    </div>
-                    <InputError
-                        id="copy-areas-error"
-                        class="mt-3"
-                        :message="copyAreasError"
-                    />
-                </fieldset>
-            </div>
-            <aside
-                class="bg-card gap-column grid min-w-0 rounded-md border p-5"
-                aria-labelledby="template-impact-title"
-            >
-                <h2
-                    id="template-impact-title"
-                    class="text-title flex items-center gap-2"
-                >
-                    <Layers3 class="text-primary size-5" aria-hidden="true" />{{
-                        t('templates.impact')
-                    }}
-                </h2>
-                <dl class="gap-column grid">
-                    <div class="gap-stack grid">
-                        <dt class="text-caption text-muted-foreground">
-                            {{ t('projectCreation.sourceProject') }}
-                        </dt>
-                        <dd class="break-words font-semibold">
-                            {{
-                                source?.name ?? t('templates.sourceUnavailable')
-                            }}
-                        </dd>
-                        <dd v-if="source">
-                            <Badge variant="outline">{{ source.key }}</Badge>
-                        </dd>
-                    </div>
-                    <div class="gap-stack grid" aria-live="polite">
-                        <dt class="text-caption text-muted-foreground">
-                            {{ t('templates.groups') }}
-                        </dt>
-                        <dd>
-                            {{
-                                t('projectCreation.selectedCount', {
-                                    count: form.copy_areas.length,
-                                })
-                            }}
-                        </dd>
-                    </div>
-                    <div v-if="template" class="gap-stack grid">
-                        <dt class="text-caption text-muted-foreground">
-                            {{ t('templates.inheritance') }}
-                        </dt>
-                        <dd>
-                            {{
-                                t('templates.linkedCount', {
-                                    count: linkedCount,
-                                })
-                            }}
-                        </dd>
-                    </div>
-                </dl>
-                <p class="text-caption text-muted-foreground border-t pt-4">
-                    {{
-                        t(
-                            template
-                                ? 'templates.refreshHelp'
-                                : 'templates.cleanStart',
-                        )
-                    }}
-                </p>
-            </aside>
-        </div>
-        <section
-            v-if="linkedCount > 0"
-            class="border-warning/50 bg-warning/10 gap-column grid rounded-md border p-5"
-            aria-labelledby="linked-title"
-        >
-            <h2 id="linked-title" class="text-title">
-                {{ t('templates.linkedWarning') }}
-            </h2>
-            <p id="linked-help" class="text-body">
-                {{ t('templates.linkedImpact', { count: linkedCount }) }}
-            </p>
-            <label class="flex min-h-11 cursor-pointer items-start gap-3">
-                <input
-                    id="confirm-linked"
-                    v-model="form.confirm_linked_projects_update"
-                    type="checkbox"
-                    :disabled="form.processing || !source"
-                    :aria-invalid="!!form.errors.confirm_linked_projects_update"
-                    aria-describedby="linked-help linked-error"
-                    class="accent-primary mt-0.5 size-5 shrink-0"
-                />
-                <span>{{ t('templates.acknowledge') }}</span>
-            </label>
-            <InputError
-                id="linked-error"
-                :message="form.errors.confirm_linked_projects_update"
-            />
-        </section>
-        <footer
-            class="flex flex-col-reverse gap-3 border-t pt-5 sm:flex-row sm:justify-end"
-        >
-            <Button as-child variant="outline" :disabled="form.processing"
-                ><Link :href="cancelTarget">{{
-                    t('common.cancel')
-                }}</Link></Button
-            >
-            <Button
-                type="submit"
-                :loading="form.processing"
-                :loading-label="t('forms.saving')"
-                :disabled="
-                    !source ||
-                    (linkedCount > 0 && !form.confirm_linked_projects_update)
-                "
-                >{{
-                    t(template ? 'templates.saveChanges' : 'templates.saveNew')
-                }}</Button
-            >
-        </footer>
-    </form>
-</template>

resources/js/components/projects/TemplateInheritancePanel.vue

@@ -1,32 +1,26 @@
 <script setup lang="ts">
 import { useForm } from '@inertiajs/vue3';
-import { Layers3, RotateCcw } from 'lucide-vue-next';
-import { computed, ref } from 'vue';
-import { resetTemplate } from '@/actions/App/Http/Controllers/ProjectController';
-import FormFeedback from '@/components/FormFeedback.vue';
+import ProjectController from '@/actions/App/Http/Controllers/ProjectController';
 import InputError from '@/components/InputError.vue';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
-import { Card, CardContent, CardHeader } from '@/components/ui/card';
 import {
-    Dialog,
-    DialogContent,
-    DialogDescription,
-    DialogFooter,
-    DialogHeader,
-    DialogTitle,
-} from '@/components/ui/dialog';
+    Card,
+    CardContent,
+    CardDescription,
+    CardHeader,
+    CardTitle,
+} from '@/components/ui/card';
 import { Label } from '@/components/ui/label';
-import { useFormProtection } from '@/composables/useFormProtection';
-import { useLocalization } from '@/composables/useLocalization';
 import type { ProjectTemplateState, ProjectTemplateStateArea } from '@/types';
+import { computed } from 'vue';
 
 const props = defineProps<{
     areas: string[];
     projectId: number;
     templateState?: ProjectTemplateState | null;
 }>();
-const { t } = useLocalization();
+
 const form = useForm<{
     areas: string[];
     status_replacements: Record<string, number | undefined>;
@@ -34,82 +28,51 @@ const form = useForm<{
     areas: [],
     status_replacements: {},
 });
-const protection = useFormProtection(form);
-const pendingArea = ref<ProjectTemplateStateArea | null>(null);
+
+const activeArea = computed(() => form.areas[0]);
+
 const inheritedAreas = computed(
     () =>
         props.templateState?.inheritedAreas.filter((area) =>
             props.areas.includes(area.value),
         ) ?? [],
 );
+
 const overriddenAreas = computed(
     () =>
         props.templateState?.overriddenAreas.filter((area) =>
             props.areas.includes(area.value),
         ) ?? [],
 );
-const statusRequirement = computed(() =>
-    pendingArea.value?.value === 'ticket_statuses'
-        ? props.templateState?.resetRequirements?.ticket_statuses
-        : undefined,
+
+const statusRequirement = computed(
+    () => props.templateState?.resetRequirements?.ticket_statuses,
 );
-const canReset = computed(
-    () =>
-        statusRequirement.value?.removedStatuses.every((status) =>
-            statusRequirement.value?.replacementOptions.some(
-                (option) =>
-                    option.id === form.status_replacements[String(status.id)],
-            ),
-        ) ?? true,
-);
-const areaKeys = {
-    project_settings: 'inheritance.area.projectSettings',
-    board_columns: 'inheritance.area.boardColumns',
-    ticket_statuses: 'inheritance.area.ticketStatuses',
-    status_transitions: 'inheritance.area.statusTransitions',
-    ticket_types: 'inheritance.area.ticketTypes',
-    ticket_priorities: 'inheritance.area.ticketPriorities',
-    ticket_fields: 'inheritance.area.ticketFields',
-    ticket_link_types: 'inheritance.area.ticketLinkTypes',
-    repository_connections: 'inheritance.area.repositoryConnections',
-    notification_actions: 'inheritance.area.notificationActions',
-} as const;
-function areaLabel(area: ProjectTemplateStateArea): string {
-    const key = areaKeys[area.value as keyof typeof areaKeys];
-    return key ? t(key) : area.label;
-}
-function openReset(area: ProjectTemplateStateArea): void {
-    form.resetAndClearErrors();
-    protection.clearFeedback();
-    pendingArea.value = area;
-}
-function closeReset(open: boolean): void {
-    if (open || form.processing || !protection.confirmLeave()) {
+
+const canReset = (area: ProjectTemplateStateArea): boolean => {
+    if (area.value !== 'ticket_statuses') {
+        return true;
+    }
+
+    return (
+        statusRequirement.value?.removedStatuses.every(
+            (status) =>
+                form.status_replacements[String(status.id)] !== undefined,
+        ) ?? true
+    );
+};
+
+const resetArea = (area: ProjectTemplateStateArea): void => {
+    if (!canReset(area)) {
         return;
     }
-    pendingArea.value = null;
-    form.resetAndClearErrors();
-    protection.clearFeedback();
-}
-function resetArea(): void {
-    if (
-        !pendingArea.value ||
-        !canReset.value ||
-        !overriddenAreas.value.some(
-            (area) => area.value === pendingArea.value?.value,
-        )
-    ) {
-        return;
-    }
-    form.areas = [pendingArea.value.value];
-    protection.submit(resetTemplate(props.projectId), {
+
+    form.areas = [area.value];
+    form.post(ProjectController.resetTemplate.url(props.projectId), {
         preserveScroll: true,
-        onSuccess: () => {
-            form.resetAndClearErrors();
-            pendingArea.value = null;
-        },
+        onSuccess: () => form.reset(),
     });
-}
+};
 </script>
 
 <template>
@@ -118,208 +81,97 @@ function resetArea(): void {
             templateState?.inheritsFromTemplate &&
             (inheritedAreas.length > 0 || overriddenAreas.length > 0)
         "
-        class="min-w-0 gap-0 overflow-hidden rounded-xl py-0 shadow-none"
     >
-        <CardHeader class="gap-stack grid-cols-1 border-b p-5 sm:p-6">
-            <div class="flex items-center gap-2">
-                <Layers3
-                    class="text-primary size-5 shrink-0"
-                    aria-hidden="true"
-                />
-                <h2 class="text-title">{{ t('inheritance.title') }}</h2>
-            </div>
-            <p class="text-muted-foreground break-words">
-                {{
-                    t('inheritance.description', {
-                        template: templateState.templateName,
-                    })
-                }}
-            </p>
+        <CardHeader>
+            <CardTitle>
+                Template inheritance: {{ templateState.templateName }}
+            </CardTitle>
+            <CardDescription>
+                Every setting area inherits independently. Local changes stay
+                unchanged when the template is updated until that area is reset.
+            </CardDescription>
         </CardHeader>
-        <CardContent class="gap-column grid min-w-0 p-5 sm:p-6">
-            <p class="text-caption text-muted-foreground">
-                {{ t('inheritance.help') }}
-            </p>
-            <ul
-                class="grid min-w-0 divide-y"
-                :aria-label="t('inheritance.areas')"
-            >
-                <li
+        <CardContent class="space-y-4">
+            <div class="flex flex-wrap gap-2">
+                <Badge
                     v-for="area in inheritedAreas"
-                    :key="area.value"
-                    class="flex min-w-0 flex-wrap items-center justify-between gap-3 py-3"
+                    :key="`inherited-${area.value}`"
+                    variant="outline"
                 >
-                    <span class="min-w-0 break-words font-medium">{{
-                        areaLabel(area)
-                    }}</span>
-                    <Badge
-                        variant="outline"
-                        class="border-primary/25 text-primary"
-                        >{{ t('projectSettings.inherited') }}</Badge
-                    >
-                </li>
-                <li
-                    v-for="area in overriddenAreas"
-                    :key="area.value"
-                    class="gap-stack grid min-w-0 py-3"
-                >
-                    <div
-                        class="flex min-w-0 flex-wrap items-center justify-between gap-3"
-                    >
-                        <span class="min-w-0 break-words font-medium">{{
-                            areaLabel(area)
-                        }}</span>
-                        <Badge variant="secondary">{{
-                            t('projectSettings.override')
-                        }}</Badge>
-                    </div>
-                    <div
-                        class="flex flex-col items-start justify-between gap-3 sm:flex-row sm:items-center"
-                    >
-                        <p class="text-caption text-muted-foreground">
-                            {{ t('inheritance.overrideHelp') }}
-                        </p>
-                        <Button
-                            type="button"
-                            size="sm"
-                            variant="outline"
-                            class="shrink-0"
-                            :disabled="form.processing"
-                            :aria-label="
-                                t('inheritance.resetArea', {
-                                    area: areaLabel(area),
-                                })
-                            "
-                            @click="openReset(area)"
-                        >
-                            <RotateCcw aria-hidden="true" />{{
-                                t('inheritance.reset')
-                            }}
-                        </Button>
-                    </div>
-                </li>
-            </ul>
-        </CardContent>
-        <Dialog :open="pendingArea !== null" @update:open="closeReset">
-            <DialogContent
-                :show-close-button="!form.processing"
-                @escape-key-down="form.processing && $event.preventDefault()"
-                @interact-outside="form.processing && $event.preventDefault()"
+                    {{ area.label }} · inherited
+                </Badge>
+            </div>
+
+            <div
+                v-for="area in overriddenAreas"
+                :key="`overridden-${area.value}`"
+                class="space-y-3 rounded-lg border p-4"
             >
-                <DialogHeader>
-                    <DialogTitle>{{
-                        t('inheritance.confirmTitle')
-                    }}</DialogTitle>
-                    <DialogDescription>{{
-                        t('inheritance.confirmDescription', {
-                            area: pendingArea ? areaLabel(pendingArea) : '',
-                            template: templateState.templateName,
-                        })
-                    }}</DialogDescription>
-                </DialogHeader>
-                <form
-                    class="gap-column grid min-w-0"
-                    :aria-busy="form.processing"
-                    @submit.prevent="resetArea"
-                >
-                    <FormFeedback
-                        :state="protection.state.value"
-                        :title="
-                            form.processing
-                                ? t('inheritance.resetting')
-                                : undefined
-                        "
-                        @retry="resetArea"
-                    />
-                    <InputError
-                        :message="form.errors.areas ?? form.errors['areas.0']"
-                    />
-                    <fieldset
-                        class="gap-column grid min-w-0"
-                        :disabled="form.processing"
+                <div class="flex flex-wrap items-center justify-between gap-3">
+                    <Badge>{{ area.label }} · template overridden</Badge>
+                    <Button
+                        type="button"
+                        size="sm"
+                        variant="outline"
+                        :disabled="form.processing || !canReset(area)"
+                        @click="resetArea(area)"
                     >
-                        <legend class="sr-only">
-                            {{ t('inheritance.confirmTitle') }}
-                        </legend>
-                        <div
-                            v-if="statusRequirement"
-                            class="gap-column grid min-w-0"
-                        >
-                            <p class="text-caption text-muted-foreground">
-                                {{ t('inheritance.statusHelp') }}
-                            </p>
-                            <div
-                                v-for="status in statusRequirement.removedStatuses"
-                                :key="status.id"
-                                class="grid gap-2"
+                        {{
+                            activeArea === area.value && form.processing
+                                ? 'Resetting…'
+                                : 'Reset to template'
+                        }}
+                    </Button>
+                </div>
+
+                <div
+                    v-if="area.value === 'ticket_statuses' && statusRequirement"
+                    class="space-y-3"
+                >
+                    <p class="text-muted-foreground text-sm">
+                        Choose where tickets in local statuses should move
+                        before those statuses are removed.
+                    </p>
+                    <div
+                        v-for="status in statusRequirement.removedStatuses"
+                        :key="status.id"
+                        class="grid gap-2 sm:grid-cols-2 sm:items-center"
+                    >
+                        <Label :for="`replacement-${status.id}`">
+                            {{ status.name }} ({{ status.ticketCount }} tickets)
+                        </Label>
+                        <div class="grid gap-1">
+                            <select
+                                :id="`replacement-${status.id}`"
+                                v-model="
+                                    form.status_replacements[String(status.id)]
+                                "
+                                class="border-input bg-background shadow-xs focus-visible:border-ring focus-visible:ring-ring/50 rounded-md border px-3 py-2 text-sm outline-none focus-visible:ring-[3px]"
                             >
-                                <Label :for="'replacement-' + status.id">{{
-                                    t('inheritance.statusLabel', {
-                                        status: status.name,
-                                        count: status.ticketCount,
-                                    })
-                                }}</Label>
-                                <select
-                                    :id="'replacement-' + status.id"
-                                    v-model="
-                                        form.status_replacements[
-                                            String(status.id)
-                                        ]
-                                    "
-                                    class="border-input bg-background focus-visible:border-ring focus-visible:ring-ring/50 min-h-11 w-full min-w-0 rounded-md border px-3 py-2 text-sm outline-none focus-visible:ring-2"
-                                    :aria-invalid="
-                                        !!form.errors[
-                                            `status_replacements.${status.id}`
-                                        ]
-                                    "
-                                    :aria-describedby="
-                                        'replacement-error-' + status.id
-                                    "
+                                <option :value="undefined" disabled>
+                                    Select replacement status
+                                </option>
+                                <option
+                                    v-for="option in statusRequirement.replacementOptions"
+                                    :key="option.id"
+                                    :value="option.id"
                                 >
-                                    <option :value="undefined" disabled>
-                                        {{ t('inheritance.selectStatus') }}
-                                    </option>
-                                    <option
-                                        v-for="option in statusRequirement.replacementOptions"
-                                        :key="option.id"
-                                        :value="option.id"
-                                    >
-                                        {{ option.name }}
-                                    </option>
-                                </select>
-                                <InputError
-                                    :id="'replacement-error-' + status.id"
-                                    :message="
-                                        form.errors[
-                                            `status_replacements.${status.id}`
-                                        ]
-                                    "
-                                />
-                            </div>
+                                    {{ option.name }}
+                                </option>
+                            </select>
+                            <InputError
+                                :message="
+                                    form.errors[
+                                        `status_replacements.${status.id}`
+                                    ]
+                                "
+                            />
                         </div>
-                        <p
-                            class="border-destructive/25 bg-destructive/8 rounded-lg border p-3 text-sm"
-                        >
-                            {{ t('inheritance.resetWarning') }}
-                        </p>
-                        <DialogFooter>
-                            <Button
-                                type="button"
-                                variant="secondary"
-                                @click="closeReset(false)"
-                                >{{ t('common.cancel') }}</Button
-                            >
-                            <Button type="submit" :disabled="!canReset">{{
-                                t(
-                                    form.processing
-                                        ? 'inheritance.resetting'
-                                        : 'inheritance.reset',
-                                )
-                            }}</Button>
-                        </DialogFooter>
-                    </fieldset>
-                </form>
-            </DialogContent>
-        </Dialog>
+                    </div>
+                </div>
+
+                <InputError :message="form.errors.areas" />
+            </div>
+        </CardContent>
     </Card>
 </template>

resources/js/components/projects/TicketDisplaySettings.vue

@@ -1,101 +0,0 @@
-<script setup lang="ts">
-import { useForm } from '@inertiajs/vue3';
-import { watch } from 'vue';
-import { update } from '@/actions/App/Http/Controllers/ProjectTicketMetadataSettingsController';
-import FormFeedback from '@/components/FormFeedback.vue';
-import InputError from '@/components/InputError.vue';
-import { Button } from '@/components/ui/button';
-import { Checkbox } from '@/components/ui/checkbox';
-import { Label } from '@/components/ui/label';
-import { useFormProtection } from '@/composables/useFormProtection';
-import { useLocalization } from '@/composables/useLocalization';
-import type { ProjectModel } from '@/types/models/project-model';
-
-const props = defineProps<{ project: ProjectModel }>();
-const { t } = useLocalization();
-const form = useForm({
-    show_author: props.project.show_author,
-    show_story_points: props.project.show_story_points,
-});
-const protection = useFormProtection(form);
-watch(
-    () => [props.project.show_author, props.project.show_story_points],
-    () => {
-        form.defaults({
-            show_author: props.project.show_author,
-            show_story_points: props.project.show_story_points,
-        });
-        form.resetAndClearErrors();
-    },
-);
-function submit(): void {
-    protection.submit(update(props.project.id), {
-        preserveScroll: true,
-        onSuccess: () => form.defaults(),
-    });
-}
-</script>
-
-<template>
-    <form
-        class="bg-card grid min-w-0 gap-4 rounded-xl border p-4 sm:p-6"
-        :aria-busy="form.processing"
-        @submit.prevent="submit"
-    >
-        <h3 class="font-semibold">{{ t('metadata.display') }}</h3>
-        <p class="text-muted-foreground text-sm">
-            {{ t('metadata.displayDescription') }}
-        </p>
-        <FormFeedback :state="protection.state.value" @retry="submit" />
-        <fieldset :disabled="form.processing" class="grid gap-4">
-            <div
-                v-for="option in ['show_author', 'show_story_points'] as const"
-                :key="option"
-                class="grid gap-2"
-            >
-                <Label
-                    :for="option"
-                    class="bg-muted/35 flex min-h-14 cursor-pointer items-start gap-3 rounded-lg border p-4"
-                >
-                    <Checkbox
-                        :id="option"
-                        v-model="form[option]"
-                        :name="option"
-                        :invalid="!!form.errors[option]"
-                        :aria-describedby="`${option}-help ${option}-error`"
-                    />
-                    <span class="grid gap-1">
-                        <span>{{
-                            t(
-                                option === 'show_author'
-                                    ? 'metadata.author'
-                                    : 'metadata.storyPoints',
-                            )
-                        }}</span>
-                        <span
-                            :id="`${option}-help`"
-                            class="text-muted-foreground text-sm font-normal"
-                            >{{
-                                t(
-                                    option === 'show_author'
-                                        ? 'metadata.authorHelp'
-                                        : 'metadata.storyPointsHelp',
-                                )
-                            }}</span
-                        >
-                    </span>
-                </Label>
-                <InputError
-                    :id="`${option}-error`"
-                    :message="form.errors[option]"
-                />
-            </div>
-        </fieldset>
-        <Button
-            type="submit"
-            class="w-full sm:w-fit"
-            :loading="form.processing"
-            >{{ t('common.save') }}</Button
-        >
-    </form>
-</template>

resources/js/components/projects/TicketFieldDefinitionEditorDialog.vue

@@ -1,267 +0,0 @@
-<script setup lang="ts">
-import { useForm } from '@inertiajs/vue3';
-import { CircleAlert } from 'lucide-vue-next';
-import { computed, watch } from 'vue';
-import {
-    destroyFieldDefinition,
-    storeFieldDefinition,
-    updateFieldDefinition,
-} from '@/actions/App/Http/Controllers/ProjectTicketMetadataSettingsController';
-import FormFeedback from '@/components/FormFeedback.vue';
-import InputError from '@/components/InputError.vue';
-import { Button } from '@/components/ui/button';
-import {
-    Dialog,
-    DialogContent,
-    DialogDescription,
-    DialogFooter,
-    DialogHeader,
-    DialogTitle,
-} from '@/components/ui/dialog';
-import { Input } from '@/components/ui/input';
-import { Label } from '@/components/ui/label';
-import { useFormProtection } from '@/composables/useFormProtection';
-import { useLocalization } from '@/composables/useLocalization';
-import type { TicketFieldDefinitionModel } from '@/types/models/ticket-field-definition-model';
-import type { TicketFieldDefinitionEditorTarget } from '@/types/project-metadata';
-import type { TicketFieldTypeOption } from '@/types';
-
-const props = defineProps<{
-    projectId: number;
-    target: TicketFieldDefinitionEditorTarget | null;
-    definitions: TicketFieldDefinitionModel[];
-    fieldTypeOptions: TicketFieldTypeOption[];
-}>();
-const emit = defineEmits<{ close: [] }>();
-const { t } = useLocalization();
-const form = useForm({
-    label: '',
-    field_type: '',
-    position: 1,
-});
-const protection = useFormProtection(form, {
-    isDirty: () => props.target !== null && form.isDirty,
-});
-const deleting = computed(() => props.target?.action === 'delete');
-const title = computed(() => {
-    if (props.target?.action === 'create') {
-        return t('metadata.addField');
-    }
-    if (props.target?.action === 'edit') {
-        return t('metadata.editField', { name: props.target.entry.label });
-    }
-    return props.target
-        ? t('metadata.deleteField', { name: props.target.entry.label })
-        : '';
-});
-watch(
-    () => props.target,
-    (target) => {
-        const values =
-            target?.action === 'edit'
-                ? {
-                      label: target.entry.label,
-                      field_type: target.entry.field_type,
-                      position: target.entry.position,
-                  }
-                : {
-                      label: '',
-                      field_type: props.fieldTypeOptions[0]?.value ?? '',
-                      position: props.definitions.length + 1,
-                  };
-        form.defaults(values);
-        form.resetAndClearErrors();
-        protection.clearFeedback();
-    },
-    { immediate: true },
-);
-function close(open: boolean): void {
-    if (open || form.processing || !protection.confirmLeave()) {
-        return;
-    }
-    form.resetAndClearErrors();
-    protection.clearFeedback();
-    emit('close');
-}
-function submit(): void {
-    const target = props.target;
-    if (!target || form.processing) {
-        return;
-    }
-    const route =
-        target.action === 'create'
-            ? storeFieldDefinition(props.projectId)
-            : target.action === 'edit'
-              ? updateFieldDefinition([props.projectId, target.entry.id])
-              : destroyFieldDefinition([props.projectId, target.entry.id]);
-    form.transform((data) =>
-        target.action === 'delete'
-            ? {}
-            : target.action === 'create'
-              ? { label: data.label, field_type: data.field_type }
-              : data,
-    );
-    protection.submit(route, {
-        preserveScroll: true,
-        onSuccess: () => {
-            form.resetAndClearErrors();
-            emit('close');
-        },
-    });
-}
-</script>
-
-<template>
-    <Dialog :open="target !== null" @update:open="close">
-        <DialogContent
-            :show-close-button="!form.processing"
-            @escape-key-down="form.processing && $event.preventDefault()"
-            @interact-outside="form.processing && $event.preventDefault()"
-        >
-            <DialogHeader>
-                <DialogTitle class="break-words">{{ title }}</DialogTitle>
-                <DialogDescription>
-                    {{
-                        t(
-                            deleting
-                                ? 'metadata.deleteFieldHelp'
-                                : 'metadata.fieldEditorHelp',
-                        )
-                    }}
-                </DialogDescription>
-            </DialogHeader>
-            <form
-                class="grid min-w-0 gap-4"
-                :aria-busy="form.processing"
-                @submit.prevent="submit"
-            >
-                <FormFeedback :state="protection.state.value" @retry="submit" />
-                <div
-                    v-if="deleting && target?.entry"
-                    class="border-destructive/40 bg-destructive/5 text-destructive flex items-start gap-3 rounded-lg border p-4 text-sm"
-                >
-                    <CircleAlert
-                        class="mt-0.5 size-4 shrink-0"
-                        aria-hidden="true"
-                    />
-                    <p>
-                        {{
-                            t('metadata.fieldDeletionImpact', {
-                                count:
-                                    target.entry.ticket_field_values_count ?? 0,
-                            })
-                        }}
-                    </p>
-                </div>
-                <fieldset
-                    v-if="!deleting"
-                    :disabled="form.processing"
-                    class="grid min-w-0 gap-4"
-                >
-                    <div class="grid gap-2">
-                        <Label for="field-definition-label">{{
-                            t('metadata.fieldLabel')
-                        }}</Label>
-                        <Input
-                            id="field-definition-label"
-                            v-model="form.label"
-                            name="label"
-                            required
-                            maxlength="255"
-                            :aria-invalid="!!form.errors.label"
-                            aria-describedby="field-definition-label-error"
-                        />
-                        <InputError
-                            id="field-definition-label-error"
-                            :message="form.errors.label"
-                        />
-                    </div>
-                    <div class="grid gap-2">
-                        <Label for="field-definition-type">{{
-                            t('metadata.fieldType')
-                        }}</Label>
-                        <select
-                            id="field-definition-type"
-                            v-model="form.field_type"
-                            name="field_type"
-                            required
-                            class="border-input bg-background focus-visible:ring-ring min-h-11 w-full min-w-0 rounded-md border px-3 text-sm focus-visible:ring-2"
-                            :aria-invalid="!!form.errors.field_type"
-                            aria-describedby="field-definition-type-help field-definition-type-error"
-                        >
-                            <option
-                                v-for="option in fieldTypeOptions"
-                                :key="option.value"
-                                :value="option.value"
-                            >
-                                {{ option.label }}
-                            </option>
-                        </select>
-                        <p
-                            id="field-definition-type-help"
-                            class="text-caption text-muted-foreground"
-                        >
-                            {{ t('metadata.fieldTypeHelp') }}
-                        </p>
-                        <InputError
-                            id="field-definition-type-error"
-                            :message="form.errors.field_type"
-                        />
-                    </div>
-                    <div v-if="target?.action === 'edit'" class="grid gap-2">
-                        <Label for="field-definition-position">{{
-                            t('workflow.position')
-                        }}</Label>
-                        <Input
-                            id="field-definition-position"
-                            v-model="form.position"
-                            name="position"
-                            type="number"
-                            min="1"
-                            :max="definitions.length"
-                            step="1"
-                            required
-                            :aria-invalid="!!form.errors.position"
-                            aria-describedby="field-definition-position-help field-definition-position-error"
-                        />
-                        <p
-                            id="field-definition-position-help"
-                            class="text-caption text-muted-foreground"
-                        >
-                            {{
-                                t('metadata.positionHelp', {
-                                    count: definitions.length,
-                                })
-                            }}
-                        </p>
-                        <InputError
-                            id="field-definition-position-error"
-                            :message="form.errors.position"
-                        />
-                    </div>
-                </fieldset>
-                <DialogFooter>
-                    <Button
-                        type="button"
-                        variant="outline"
-                        :disabled="form.processing"
-                        @click="close(false)"
-                        >{{ t('common.cancel') }}</Button
-                    >
-                    <Button
-                        type="submit"
-                        :variant="deleting ? 'destructive' : 'default'"
-                        :loading="form.processing"
-                        >{{
-                            deleting
-                                ? t('workflow.confirmDelete')
-                                : target?.action === 'create'
-                                  ? title
-                                  : t('common.save')
-                        }}</Button
-                    >
-                </DialogFooter>
-            </form>
-        </DialogContent>
-    </Dialog>
-</template>

resources/js/components/projects/TicketFieldDefinitionSettings.vue

@@ -1,142 +0,0 @@
-<script setup lang="ts">
-import { Braces, Pencil, Plus, Trash2 } from 'lucide-vue-next';
-import { computed, ref } from 'vue';
-import FeedbackState from '@/components/FeedbackState.vue';
-import TicketFieldDefinitionEditorDialog from '@/components/projects/TicketFieldDefinitionEditorDialog.vue';
-import { Badge } from '@/components/ui/badge';
-import { Button } from '@/components/ui/button';
-import { useLocalization } from '@/composables/useLocalization';
-import type { TicketFieldDefinitionModel } from '@/types/models/ticket-field-definition-model';
-import type { TicketFieldDefinitionEditorTarget } from '@/types/project-metadata';
-import type { TicketFieldTypeOption } from '@/types';
-
-const props = defineProps<{
-    projectId: number;
-    definitions: TicketFieldDefinitionModel[];
-    fieldTypeOptions: TicketFieldTypeOption[];
-}>();
-const { t } = useLocalization();
-const target = ref<TicketFieldDefinitionEditorTarget | null>(null);
-const fieldTypeLabels = computed(
-    () =>
-        new Map(
-            props.fieldTypeOptions.map((option) => [
-                option.value,
-                option.label,
-            ]),
-        ),
-);
-function fieldTypeLabel(fieldType: string): string {
-    return fieldTypeLabels.value.get(fieldType) ?? fieldType;
-}
-</script>
-
-<template>
-    <section
-        class="bg-card grid min-w-0 gap-4 overflow-hidden rounded-xl border p-4 sm:p-6"
-        aria-labelledby="metadata-custom-fields"
-    >
-        <header class="flex flex-wrap items-center justify-between gap-3">
-            <div class="flex min-w-0 items-center gap-2">
-                <Braces
-                    class="text-primary size-5 shrink-0"
-                    aria-hidden="true"
-                />
-                <h3 id="metadata-custom-fields" class="font-semibold">
-                    {{ t('metadata.customFields') }}
-                </h3>
-                <Badge variant="secondary">{{ definitions.length }}</Badge>
-            </div>
-            <Button
-                type="button"
-                class="w-full sm:w-auto"
-                @click="target = { action: 'create' }"
-            >
-                <Plus class="size-4" aria-hidden="true" />{{
-                    t('metadata.addField')
-                }}
-            </Button>
-        </header>
-        <p class="text-muted-foreground text-sm">
-            {{ t('metadata.customFieldsDescription') }}
-        </p>
-        <FeedbackState
-            v-if="definitions.length === 0"
-            state="empty"
-            :title="t('metadata.noCustomFields')"
-            :description="t('metadata.noCustomFieldsDescription')"
-        />
-        <ol v-else class="divide-y" :aria-label="t('metadata.customFields')">
-            <li
-                v-for="definition in definitions"
-                :key="definition.id"
-                class="grid min-w-0 grid-cols-[auto_minmax(0,1fr)_auto] items-center gap-3 py-4"
-                :data-ticket-field-definition="definition.id"
-            >
-                <span
-                    class="bg-accent text-accent-foreground flex size-9 shrink-0 items-center justify-center rounded-lg text-sm font-semibold"
-                    :aria-label="
-                        t('workflow.positionValue', {
-                            position: definition.position,
-                        })
-                    "
-                    >{{ definition.position }}</span
-                >
-                <div class="grid min-w-0 gap-1">
-                    <p class="break-words font-medium">
-                        {{ definition.label }}
-                    </p>
-                    <div
-                        class="text-caption text-muted-foreground flex flex-wrap items-center gap-2"
-                    >
-                        <Badge variant="outline">{{
-                            fieldTypeLabel(definition.field_type)
-                        }}</Badge>
-                        <span>{{
-                            t('metadata.storedValues', {
-                                count:
-                                    definition.ticket_field_values_count ?? 0,
-                            })
-                        }}</span>
-                    </div>
-                </div>
-                <div class="flex shrink-0 gap-1">
-                    <Button
-                        type="button"
-                        variant="ghost"
-                        size="icon"
-                        :aria-label="
-                            t('metadata.editField', { name: definition.label })
-                        "
-                        @click="target = { action: 'edit', entry: definition }"
-                    >
-                        <Pencil class="size-4" aria-hidden="true" />
-                    </Button>
-                    <Button
-                        type="button"
-                        variant="ghost"
-                        size="icon"
-                        class="text-destructive"
-                        :aria-label="
-                            t('metadata.deleteField', {
-                                name: definition.label,
-                            })
-                        "
-                        @click="
-                            target = { action: 'delete', entry: definition }
-                        "
-                    >
-                        <Trash2 class="size-4" aria-hidden="true" />
-                    </Button>
-                </div>
-            </li>
-        </ol>
-        <TicketFieldDefinitionEditorDialog
-            :definitions="definitions"
-            :field-type-options="fieldTypeOptions"
-            :project-id="projectId"
-            :target="target"
-            @close="target = null"
-        />
-    </section>
-</template>

resources/js/components/projects/TicketLinkTypeEditorDialog.vue

@@ -1,269 +0,0 @@
-<script setup lang="ts">
-import { useForm } from '@inertiajs/vue3';
-import { ArrowRight, CircleAlert } from 'lucide-vue-next';
-import { computed, watch } from 'vue';
-import {
-    destroyLinkType,
-    storeLinkType,
-    updateLinkType,
-} from '@/actions/App/Http/Controllers/ProjectTicketMetadataSettingsController';
-import FormFeedback from '@/components/FormFeedback.vue';
-import InputError from '@/components/InputError.vue';
-import { Button } from '@/components/ui/button';
-import {
-    Dialog,
-    DialogContent,
-    DialogDescription,
-    DialogFooter,
-    DialogHeader,
-    DialogTitle,
-} from '@/components/ui/dialog';
-import { Input } from '@/components/ui/input';
-import { Label } from '@/components/ui/label';
-import { useFormProtection } from '@/composables/useFormProtection';
-import { useLocalization } from '@/composables/useLocalization';
-import type { TicketLinkTypeModel } from '@/types/models/ticket-link-type-model';
-import type { TicketLinkTypeEditorTarget } from '@/types/project-metadata';
-
-const props = defineProps<{
-    projectId: number;
-    target: TicketLinkTypeEditorTarget | null;
-    linkTypes: TicketLinkTypeModel[];
-}>();
-const emit = defineEmits<{ close: [] }>();
-const { t } = useLocalization();
-const form = useForm({
-    name: '',
-    counterpart_name: '',
-    position: 1,
-});
-const protection = useFormProtection(form, {
-    isDirty: () => props.target !== null && form.isDirty,
-});
-const deleting = computed(() => props.target?.action === 'delete');
-const title = computed(() => {
-    if (props.target?.action === 'create') {
-        return t('metadata.addLinkType');
-    }
-    if (props.target?.action === 'edit') {
-        return t('metadata.editLinkType', { name: props.target.entry.label });
-    }
-    return props.target
-        ? t('metadata.deleteLinkType', { name: props.target.entry.label })
-        : '';
-});
-watch(
-    () => props.target,
-    (target) => {
-        const values =
-            target?.action === 'edit'
-                ? {
-                      name: target.entry.label,
-                      counterpart_name: target.entry.counterpart_label,
-                      position: target.entry.position,
-                  }
-                : {
-                      name: '',
-                      counterpart_name: '',
-                      position: props.linkTypes.length + 1,
-                  };
-        form.defaults(values);
-        form.resetAndClearErrors();
-        protection.clearFeedback();
-    },
-    { immediate: true },
-);
-function close(open: boolean): void {
-    if (open || form.processing || !protection.confirmLeave()) {
-        return;
-    }
-    form.resetAndClearErrors();
-    protection.clearFeedback();
-    emit('close');
-}
-function submit(): void {
-    const target = props.target;
-    if (!target || form.processing) {
-        return;
-    }
-    const route =
-        target.action === 'create'
-            ? storeLinkType(props.projectId)
-            : target.action === 'edit'
-              ? updateLinkType([props.projectId, target.entry.id])
-              : destroyLinkType([props.projectId, target.entry.id]);
-    form.transform((data) =>
-        target.action === 'delete'
-            ? {}
-            : target.action === 'create'
-              ? {
-                    name: data.name,
-                    counterpart_name: data.counterpart_name,
-                }
-              : data,
-    );
-    protection.submit(route, {
-        preserveScroll: true,
-        onSuccess: () => {
-            form.resetAndClearErrors();
-            emit('close');
-        },
-    });
-}
-</script>
-
-<template>
-    <Dialog :open="target !== null" @update:open="close">
-        <DialogContent
-            :show-close-button="!form.processing"
-            @escape-key-down="form.processing && $event.preventDefault()"
-            @interact-outside="form.processing && $event.preventDefault()"
-        >
-            <DialogHeader>
-                <DialogTitle class="break-words">{{ title }}</DialogTitle>
-                <DialogDescription>
-                    {{
-                        t(
-                            deleting
-                                ? 'metadata.deleteLinkTypeHelp'
-                                : 'metadata.linkTypeEditorHelp',
-                        )
-                    }}
-                </DialogDescription>
-            </DialogHeader>
-            <form
-                class="grid min-w-0 gap-4"
-                :aria-busy="form.processing"
-                @submit.prevent="submit"
-            >
-                <FormFeedback :state="protection.state.value" @retry="submit" />
-                <div
-                    v-if="deleting && target?.entry"
-                    class="border-destructive/40 bg-destructive/5 text-destructive flex items-start gap-3 rounded-lg border p-4 text-sm"
-                >
-                    <CircleAlert
-                        class="mt-0.5 size-4 shrink-0"
-                        aria-hidden="true"
-                    />
-                    <p>
-                        {{
-                            t('metadata.linkTypeDeletionImpact', {
-                                count: target.entry.ticket_links_count ?? 0,
-                            })
-                        }}
-                    </p>
-                </div>
-                <fieldset
-                    v-if="!deleting"
-                    :disabled="form.processing"
-                    class="grid min-w-0 gap-4"
-                >
-                    <div class="grid gap-2">
-                        <Label for="link-type-source-label">{{
-                            t('metadata.sourceLabel')
-                        }}</Label>
-                        <Input
-                            id="link-type-source-label"
-                            v-model="form.name"
-                            name="name"
-                            required
-                            maxlength="255"
-                            :aria-invalid="!!form.errors.name"
-                            aria-describedby="link-type-source-label-help link-type-source-label-error"
-                        />
-                        <p
-                            id="link-type-source-label-help"
-                            class="text-caption text-muted-foreground"
-                        >
-                            {{ t('metadata.sourceLabelHelp') }}
-                        </p>
-                        <InputError
-                            id="link-type-source-label-error"
-                            :message="form.errors.name"
-                        />
-                    </div>
-                    <ArrowRight
-                        class="text-primary mx-auto size-5 rotate-90 sm:rotate-0"
-                        aria-hidden="true"
-                    />
-                    <div class="grid gap-2">
-                        <Label for="link-type-counterpart-label">{{
-                            t('metadata.counterpartLabel')
-                        }}</Label>
-                        <Input
-                            id="link-type-counterpart-label"
-                            v-model="form.counterpart_name"
-                            name="counterpart_name"
-                            required
-                            maxlength="255"
-                            :aria-invalid="!!form.errors.counterpart_name"
-                            aria-describedby="link-type-counterpart-label-help link-type-counterpart-label-error"
-                        />
-                        <p
-                            id="link-type-counterpart-label-help"
-                            class="text-caption text-muted-foreground"
-                        >
-                            {{ t('metadata.counterpartLabelHelp') }}
-                        </p>
-                        <InputError
-                            id="link-type-counterpart-label-error"
-                            :message="form.errors.counterpart_name"
-                        />
-                    </div>
-                    <div v-if="target?.action === 'edit'" class="grid gap-2">
-                        <Label for="link-type-position">{{
-                            t('workflow.position')
-                        }}</Label>
-                        <Input
-                            id="link-type-position"
-                            v-model="form.position"
-                            name="position"
-                            type="number"
-                            min="1"
-                            :max="linkTypes.length"
-                            step="1"
-                            required
-                            :aria-invalid="!!form.errors.position"
-                            aria-describedby="link-type-position-help link-type-position-error"
-                        />
-                        <p
-                            id="link-type-position-help"
-                            class="text-caption text-muted-foreground"
-                        >
-                            {{
-                                t('metadata.positionHelp', {
-                                    count: linkTypes.length,
-                                })
-                            }}
-                        </p>
-                        <InputError
-                            id="link-type-position-error"
-                            :message="form.errors.position"
-                        />
-                    </div>
-                </fieldset>
-                <DialogFooter>
-                    <Button
-                        type="button"
-                        variant="outline"
-                        :disabled="form.processing"
-                        @click="close(false)"
-                        >{{ t('common.cancel') }}</Button
-                    >
-                    <Button
-                        type="submit"
-                        :variant="deleting ? 'destructive' : 'default'"
-                        :loading="form.processing"
-                        >{{
-                            deleting
-                                ? t('workflow.confirmDelete')
-                                : target?.action === 'create'
-                                  ? title
-                                  : t('common.save')
-                        }}</Button
-                    >
-                </DialogFooter>
-            </form>
-        </DialogContent>
-    </Dialog>
-</template>

resources/js/components/projects/TicketLinkTypeSettings.vue

@@ -1,135 +0,0 @@
-<script setup lang="ts">
-import { ArrowRight, Link2, Pencil, Plus, Trash2 } from 'lucide-vue-next';
-import { ref } from 'vue';
-import FeedbackState from '@/components/FeedbackState.vue';
-import TicketLinkTypeEditorDialog from '@/components/projects/TicketLinkTypeEditorDialog.vue';
-import { Badge } from '@/components/ui/badge';
-import { Button } from '@/components/ui/button';
-import { useLocalization } from '@/composables/useLocalization';
-import type { TicketLinkTypeModel } from '@/types/models/ticket-link-type-model';
-import type { TicketLinkTypeEditorTarget } from '@/types/project-metadata';
-
-defineProps<{ projectId: number; linkTypes: TicketLinkTypeModel[] }>();
-const { t } = useLocalization();
-const target = ref<TicketLinkTypeEditorTarget | null>(null);
-</script>
-
-<template>
-    <section
-        class="bg-card grid min-w-0 gap-4 overflow-hidden rounded-xl border p-4 sm:p-6"
-        aria-labelledby="metadata-link-types"
-    >
-        <header class="flex flex-wrap items-center justify-between gap-3">
-            <div class="flex min-w-0 items-center gap-2">
-                <Link2
-                    class="text-primary size-5 shrink-0"
-                    aria-hidden="true"
-                />
-                <h3 id="metadata-link-types" class="font-semibold">
-                    {{ t('metadata.linkTypes') }}
-                </h3>
-                <Badge variant="secondary">{{ linkTypes.length }}</Badge>
-            </div>
-            <Button
-                type="button"
-                class="w-full sm:w-auto"
-                @click="target = { action: 'create' }"
-            >
-                <Plus class="size-4" aria-hidden="true" />{{
-                    t('metadata.addLinkType')
-                }}
-            </Button>
-        </header>
-        <p class="text-muted-foreground text-sm">
-            {{ t('metadata.linkTypesDescription') }}
-        </p>
-        <FeedbackState
-            v-if="linkTypes.length === 0"
-            state="empty"
-            :title="t('metadata.noLinkTypes')"
-            :description="t('metadata.noLinkTypesDescription')"
-        />
-        <ol v-else class="divide-y" :aria-label="t('metadata.linkTypes')">
-            <li
-                v-for="linkType in linkTypes"
-                :key="linkType.id"
-                class="grid min-w-0 grid-cols-[auto_minmax(0,1fr)_auto] items-center gap-3 py-4"
-                :data-ticket-link-type="linkType.id"
-            >
-                <span
-                    class="bg-accent text-accent-foreground flex size-9 shrink-0 items-center justify-center rounded-lg text-sm font-semibold"
-                    :aria-label="
-                        t('workflow.positionValue', {
-                            position: linkType.position,
-                        })
-                    "
-                    >{{ linkType.position }}</span
-                >
-                <div class="grid min-w-0 gap-2">
-                    <div
-                        class="flex min-w-0 flex-wrap items-center gap-x-2 gap-y-1"
-                        :aria-label="
-                            t('metadata.linkDirection', {
-                                source: linkType.label,
-                                counterpart: linkType.counterpart_label,
-                            })
-                        "
-                    >
-                        <span class="break-words font-medium">{{
-                            linkType.label
-                        }}</span>
-                        <ArrowRight
-                            class="text-primary size-4 shrink-0"
-                            aria-hidden="true"
-                        />
-                        <span class="break-words font-medium">{{
-                            linkType.counterpart_label
-                        }}</span>
-                    </div>
-                    <p class="text-caption text-muted-foreground">
-                        {{
-                            t('metadata.ticketRelationships', {
-                                count: linkType.ticket_links_count ?? 0,
-                            })
-                        }}
-                    </p>
-                </div>
-                <div class="flex shrink-0 gap-1">
-                    <Button
-                        type="button"
-                        variant="ghost"
-                        size="icon"
-                        :aria-label="
-                            t('metadata.editLinkType', {
-                                name: linkType.label,
-                            })
-                        "
-                        @click="target = { action: 'edit', entry: linkType }"
-                    >
-                        <Pencil class="size-4" aria-hidden="true" />
-                    </Button>
-                    <Button
-                        type="button"
-                        variant="ghost"
-                        size="icon"
-                        class="text-destructive"
-                        :aria-label="
-                            t('metadata.deleteLinkType', {
-                                name: linkType.label,
-                            })
-                        "
-                        @click="target = { action: 'delete', entry: linkType }"
-                    >
-                        <Trash2 class="size-4" aria-hidden="true" />
-                    </Button>
-                </div>
-            </li>
-        </ol>
-        <TicketLinkTypeEditorDialog
-            :link-types="linkTypes"
-            :project-id="projectId"
-            :target="target"
-            @close="target = null"
-        />
-    </section>
-</template>

resources/js/components/projects/WorkflowEditorDialog.vue

@@ -1,277 +0,0 @@
-<script setup lang="ts">
-import { useForm } from '@inertiajs/vue3';
-import { computed, watch } from 'vue';
-import {
-    destroy,
-    destroyStatus,
-    store,
-    storeStatus,
-    update,
-    updateStatus,
-} from '@/actions/App/Http/Controllers/ProjectBoardSettingsController';
-import FormFeedback from '@/components/FormFeedback.vue';
-import InputError from '@/components/InputError.vue';
-import { Button } from '@/components/ui/button';
-import {
-    Dialog,
-    DialogContent,
-    DialogDescription,
-    DialogFooter,
-    DialogHeader,
-    DialogTitle,
-} from '@/components/ui/dialog';
-import { Input } from '@/components/ui/input';
-import { Label } from '@/components/ui/label';
-import { useFormProtection } from '@/composables/useFormProtection';
-import { useLocalization } from '@/composables/useLocalization';
-import type { WorkflowEditorTarget } from '@/types/project-workflow';
-
-const props = defineProps<{
-    projectId: number;
-    columnCount: number;
-    target: WorkflowEditorTarget | null;
-}>();
-const emit = defineEmits<{ close: [] }>();
-const { t } = useLocalization();
-const form = useForm({ name: '', position: 1 });
-const protection = useFormProtection(form, {
-    isDirty: () => props.target !== null && form.isDirty,
-});
-const deleting = computed(() => props.target?.action === 'delete');
-const title = computed(() => {
-    if (props.target?.kind === 'column') {
-        return t(
-            props.target.action === 'create'
-                ? 'workflow.addColumn'
-                : props.target.action === 'edit'
-                  ? 'workflow.editColumn'
-                  : 'workflow.deleteColumn',
-        );
-    }
-    return t(
-        props.target?.action === 'create'
-            ? 'workflow.addStatus'
-            : props.target?.action === 'edit'
-              ? 'workflow.editStatus'
-              : 'workflow.deleteStatus',
-    );
-});
-const description = computed(() => {
-    const target = props.target;
-    if (!target) {
-        return '';
-    }
-    if (target.kind === 'column') {
-        return t(
-            target.action === 'delete'
-                ? 'workflow.deleteColumnDescription'
-                : target.action === 'create'
-                  ? 'workflow.addColumnDescription'
-                  : 'workflow.editColumnDescription',
-            { name: target.column?.name ?? '' },
-        );
-    }
-    return t(
-        target.action === 'delete'
-            ? 'workflow.deleteStatusDescription'
-            : 'workflow.statusContext',
-        {
-            name: target.status?.name ?? '',
-            context: target.column?.name ?? t('workflow.backlog'),
-            replacement: target.replacement?.name ?? '',
-        },
-    );
-});
-const otherErrors = computed(() =>
-    Object.entries(form.errors)
-        .filter(([key]) => !['name', 'position'].includes(key))
-        .map(([, message]) => message),
-);
-watch(
-    () => props.target,
-    (target) => {
-        if (!target) {
-            return;
-        }
-        form.defaults({
-            name:
-                target.kind === 'column'
-                    ? (target.column?.name ?? '')
-                    : (target.status?.name ?? ''),
-            position: target.column?.position ?? 1,
-        });
-        form.resetAndClearErrors();
-        protection.clearFeedback();
-    },
-);
-function close(open: boolean): void {
-    if (open || form.processing || !protection.confirmLeave()) {
-        return;
-    }
-    form.resetAndClearErrors();
-    protection.clearFeedback();
-    emit('close');
-}
-function submit(): void {
-    const target = props.target;
-    if (
-        !target ||
-        form.processing ||
-        (target.kind === 'status' &&
-            target.action === 'delete' &&
-            !target.replacement)
-    ) {
-        return;
-    }
-    const route =
-        target.kind === 'column'
-            ? target.action === 'create'
-                ? store(props.projectId)
-                : target.action === 'edit'
-                  ? update([props.projectId, target.column.id])
-                  : destroy([props.projectId, target.column.id])
-            : target.action === 'create'
-              ? storeStatus(props.projectId)
-              : target.action === 'edit'
-                ? updateStatus([props.projectId, target.status.id])
-                : destroyStatus([props.projectId, target.status.id]);
-    form.transform((data) =>
-        target.action === 'delete'
-            ? {}
-            : target.kind === 'column' && target.action === 'edit'
-              ? data
-              : target.kind === 'status' && target.action === 'create'
-                ? {
-                      name: data.name,
-                      board_column_id: target.column?.id ?? null,
-                  }
-                : { name: data.name },
-    );
-    protection.submit(route, {
-        preserveScroll: true,
-        onSuccess: () => {
-            form.resetAndClearErrors();
-            emit('close');
-        },
-    });
-}
-</script>
-
-<template>
-    <Dialog :open="target !== null" @update:open="close">
-        <DialogContent
-            :show-close-button="!form.processing"
-            @escape-key-down="form.processing && $event.preventDefault()"
-            @interact-outside="form.processing && $event.preventDefault()"
-        >
-            <DialogHeader>
-                <DialogTitle>{{ title }}</DialogTitle>
-                <DialogDescription class="break-words">{{
-                    description
-                }}</DialogDescription>
-            </DialogHeader>
-            <form
-                class="gap-column grid min-w-0"
-                :aria-busy="form.processing"
-                @submit.prevent="submit"
-            >
-                <FormFeedback :state="protection.state.value" @retry="submit" />
-                <InputError
-                    v-for="message in otherErrors"
-                    :key="message"
-                    :message="message"
-                />
-                <fieldset
-                    v-if="!deleting"
-                    :disabled="form.processing"
-                    class="grid min-w-0 gap-4"
-                >
-                    <div class="grid gap-2">
-                        <Label for="workflow-name">{{
-                            t(
-                                target?.kind === 'column'
-                                    ? 'workflow.columnName'
-                                    : 'workflow.statusName',
-                            )
-                        }}</Label>
-                        <Input
-                            id="workflow-name"
-                            v-model="form.name"
-                            name="name"
-                            required
-                            maxlength="255"
-                            :aria-invalid="!!form.errors.name"
-                            :aria-describedby="
-                                form.errors.name
-                                    ? 'workflow-name-error'
-                                    : undefined
-                            "
-                        />
-                        <InputError
-                            id="workflow-name-error"
-                            :message="form.errors.name"
-                        />
-                    </div>
-                    <div
-                        v-if="
-                            target?.kind === 'column' &&
-                            target.action === 'edit'
-                        "
-                        class="grid gap-2"
-                    >
-                        <Label for="workflow-position">{{
-                            t('workflow.position')
-                        }}</Label>
-                        <Input
-                            id="workflow-position"
-                            v-model="form.position"
-                            name="position"
-                            type="number"
-                            min="1"
-                            :max="columnCount"
-                            step="1"
-                            required
-                            :aria-invalid="!!form.errors.position"
-                            aria-describedby="workflow-position-help workflow-position-error"
-                        />
-                        <p
-                            id="workflow-position-help"
-                            class="text-caption text-muted-foreground"
-                        >
-                            {{
-                                t('workflow.positionHelp', {
-                                    count: columnCount,
-                                })
-                            }}
-                        </p>
-                        <InputError
-                            id="workflow-position-error"
-                            :message="form.errors.position"
-                        />
-                    </div>
-                </fieldset>
-                <DialogFooter>
-                    <Button
-                        type="button"
-                        variant="outline"
-                        :disabled="form.processing"
-                        @click="close(false)"
-                        >{{ t('common.cancel') }}</Button
-                    >
-                    <Button
-                        type="submit"
-                        :variant="deleting ? 'destructive' : 'default'"
-                        :loading="form.processing"
-                        >{{
-                            deleting
-                                ? t('workflow.confirmDelete')
-                                : target?.action === 'create'
-                                  ? title
-                                  : t('common.save')
-                        }}</Button
-                    >
-                </DialogFooter>
-            </form>
-        </DialogContent>
-    </Dialog>
-</template>

resources/js/components/projects/WorkflowStatusList.vue

@@ -1,106 +0,0 @@
-<script setup lang="ts">
-import { Pencil, Plus, Trash2 } from 'lucide-vue-next';
-import { Button } from '@/components/ui/button';
-import { useLocalization } from '@/composables/useLocalization';
-import type { BoardColumnModel } from '@/types/models/board-column-model';
-import type { TicketStatusModel } from '@/types/models/ticket-status-model';
-import type { WorkflowEditorTarget } from '@/types/project-workflow';
-
-defineProps<{
-    column: BoardColumnModel | null;
-    statuses: TicketStatusModel[];
-}>();
-defineEmits<{ edit: [target: WorkflowEditorTarget] }>();
-const { t } = useLocalization();
-</script>
-
-<template>
-    <div class="grid min-w-0 gap-3">
-        <ul
-            class="divide-y"
-            :aria-label="
-                t('workflow.statusesIn', {
-                    context: column?.name ?? t('workflow.backlog'),
-                })
-            "
-        >
-            <li
-                v-for="status in statuses"
-                :key="status.id"
-                class="flex min-w-0 flex-wrap items-center justify-between gap-2 py-3 first:pt-0"
-            >
-                <span
-                    class="min-w-0 flex-1 basis-28 break-words text-sm font-medium"
-                    >{{ status.name }}</span
-                >
-                <div class="flex shrink-0 gap-1">
-                    <Button
-                        type="button"
-                        variant="ghost"
-                        size="icon"
-                        :aria-label="
-                            t('workflow.renameStatus', { name: status.name })
-                        "
-                        @click="
-                            $emit('edit', {
-                                kind: 'status',
-                                action: 'edit',
-                                column,
-                                status,
-                            })
-                        "
-                        ><Pencil class="size-4" aria-hidden="true"
-                    /></Button>
-                    <Button
-                        type="button"
-                        variant="ghost"
-                        size="icon"
-                        class="text-destructive"
-                        :disabled="statuses.length <= 1"
-                        :aria-label="
-                            t('workflow.removeStatus', { name: status.name })
-                        "
-                        :aria-describedby="
-                            statuses.length <= 1
-                                ? `status-protection-${column?.id ?? 'backlog'}`
-                                : undefined
-                        "
-                        @click="
-                            $emit('edit', {
-                                kind: 'status',
-                                action: 'delete',
-                                column,
-                                status,
-                                replacement: statuses.find(
-                                    (item) => item.id !== status.id,
-                                ),
-                            })
-                        "
-                        ><Trash2 class="size-4" aria-hidden="true"
-                    /></Button>
-                </div>
-            </li>
-        </ul>
-        <p
-            v-if="statuses.length <= 1"
-            :id="`status-protection-${column?.id ?? 'backlog'}`"
-            class="text-caption text-muted-foreground"
-        >
-            {{ t('workflow.lastStatus') }}
-        </p>
-        <Button
-            type="button"
-            variant="outline"
-            class="w-full sm:w-fit"
-            :aria-label="
-                t('workflow.addStatusTo', {
-                    context: column?.name ?? t('workflow.backlog'),
-                })
-            "
-            @click="$emit('edit', { kind: 'status', action: 'create', column })"
-            ><Plus class="size-4" aria-hidden="true" />{{
-                t('workflow.addStatus')
-            }}</Button
-        >
-    </div>
-</template>

resources/js/components/projects/WorkflowTransitionMatrix.vue

@@ -1,282 +0,0 @@
-<script setup lang="ts">
-import { useForm } from '@inertiajs/vue3';
-import { ArrowRightLeft } from 'lucide-vue-next';
-import { computed, ref, watch } from 'vue';
-import { updateStatusTransitions } from '@/actions/App/Http/Controllers/ProjectBoardSettingsController';
-import FormFeedback from '@/components/FormFeedback.vue';
-import InputError from '@/components/InputError.vue';
-import { Badge } from '@/components/ui/badge';
-import { Button } from '@/components/ui/button';
-import { Label } from '@/components/ui/label';
-import { useFormProtection } from '@/composables/useFormProtection';
-import { useLocalization } from '@/composables/useLocalization';
-import { ticketStatusLabel } from '@/lib/tickets';
-import type { TicketStatusModel } from '@/types/models/ticket-status-model';
-
-const props = defineProps<{
-    projectId: number;
-    statuses: TicketStatusModel[];
-}>();
-const { t } = useLocalization();
-const sourceId = ref(props.statuses[0]?.id ?? null);
-const source = computed(() =>
-    props.statuses.find((status) => status.id === sourceId.value),
-);
-const targets = computed(() =>
-    props.statuses.filter((status) => status.id !== sourceId.value),
-);
-const savedTargets = computed(
-    () =>
-        source.value?.allowed_target_statuses
-            ?.map((status) => status.id)
-            .sort((a, b) => a - b) ?? [],
-);
-const form = useForm({ allowed_ticket_status_ids: [...savedTargets.value] });
-const protection = useFormProtection(form);
-const saved = ref(false);
-const hasErrors = computed(() => Object.keys(form.errors).length > 0);
-
-function reset(): void {
-    saved.value = false;
-    form.defaults({ allowed_ticket_status_ids: [...savedTargets.value] });
-    form.resetAndClearErrors();
-    protection.clearFeedback();
-}
-
-watch(
-    () => props.statuses,
-    () => {
-        if (!source.value) {
-            sourceId.value = props.statuses[0]?.id ?? null;
-            reset();
-        } else if (!form.isDirty && !form.processing) {
-            reset();
-        }
-    },
-);
-
-function selectSource(event: Event): void {
-    const select = event.target as HTMLSelectElement;
-    if (form.processing || !protection.confirmLeave()) {
-        select.value = String(sourceId.value);
-        return;
-    }
-    sourceId.value = Number(select.value);
-    reset();
-}
-
-function toggleTarget(id: number, event: Event): void {
-    saved.value = false;
-    const checked = (event.target as HTMLInputElement).checked;
-    form.allowed_ticket_status_ids = checked
-        ? [...form.allowed_ticket_status_ids, id].sort((a, b) => a - b)
-        : form.allowed_ticket_status_ids.filter((target) => target !== id);
-    form.clearErrors();
-    protection.clearFeedback();
-}
-
-function submit(): void {
-    if (!source.value || !form.isDirty || form.processing) {
-        return;
-    }
-    protection.submit(
-        updateStatusTransitions([props.projectId, source.value.id]),
-        {
-            preserveScroll: true,
-            onSuccess: () => {
-                saved.value = true;
-                form.defaults({
-                    allowed_ticket_status_ids: [...savedTargets.value],
-                });
-                form.resetAndClearErrors();
-            },
-        },
-    );
-}
-</script>
-
-<template>
-    <section
-        class="bg-card min-w-0 overflow-hidden rounded-xl border"
-        aria-labelledby="workflow-transitions"
-    >
-        <header class="grid gap-3 border-b p-5 sm:p-6">
-            <div class="flex items-center gap-2">
-                <ArrowRightLeft
-                    class="text-primary size-5 shrink-0"
-                    aria-hidden="true"
-                />
-                <h3 id="workflow-transitions" class="font-semibold">
-                    {{ t('workflow.transitions') }}
-                </h3>
-            </div>
-            <p class="text-muted-foreground text-sm">
-                {{ t('workflow.transitionsDescription') }}
-            </p>
-        </header>
-        <div class="grid min-w-0 gap-5 p-5 sm:p-6">
-            <p v-if="!source" class="text-muted-foreground text-sm">
-                {{ t('workflow.noStatuses') }}
-            </p>
-            <template v-else>
-                <div class="grid min-w-0 gap-2">
-                    <Label for="workflow-source">{{
-                        t('workflow.sourceStatus')
-                    }}</Label>
-                    <select
-                        id="workflow-source"
-                        :value="sourceId"
-                        :disabled="form.processing"
-                        class="border-input bg-background focus-visible:ring-ring/40 min-h-11 w-full min-w-0 rounded-lg border px-3 py-2 text-sm outline-none focus-visible:ring-2 disabled:opacity-50"
-                        @change="selectSource"
-                    >
-                        <option
-                            v-for="status in statuses"
-                            :key="status.id"
-                            :value="status.id"
-                        >
-                            {{ ticketStatusLabel(status, '') }}
-                        </option>
-                    </select>
-                    <p class="text-muted-foreground text-sm">
-                        {{ t('workflow.directionHelp') }}
-                    </p>
-                </div>
-                <form
-                    class="grid min-w-0 gap-4"
-                    :aria-busy="form.processing"
-                    @submit.prevent="submit"
-                >
-                    <fieldset
-                        :disabled="form.processing"
-                        class="grid min-w-0 gap-3"
-                        aria-describedby="workflow-target-help workflow-transition-errors"
-                        :aria-invalid="hasErrors"
-                    >
-                        <legend class="mb-3 break-words font-medium">
-                            {{
-                                t('workflow.targetsFrom', { name: source.name })
-                            }}
-                        </legend>
-                        <p
-                            id="workflow-target-help"
-                            class="text-muted-foreground text-sm"
-                        >
-                            {{ t('workflow.targetHelp') }}
-                        </p>
-                        <p
-                            v-if="targets.length === 0"
-                            class="text-muted-foreground text-sm"
-                        >
-                            {{ t('workflow.noTargets') }}
-                        </p>
-                        <div v-else class="grid min-w-0 gap-2 sm:grid-cols-2">
-                            <label
-                                v-for="target in targets"
-                                :key="target.id"
-                                class="has-[:focus-visible]:ring-ring/40 flex min-h-14 min-w-0 cursor-pointer items-center gap-3 rounded-lg border p-3 has-[:focus-visible]:ring-2"
-                                :class="
-                                    form.allowed_ticket_status_ids.includes(
-                                        target.id,
-                                    )
-                                        ? 'border-primary/40 bg-accent/40'
-                                        : 'border-input'
-                                "
-                            >
-                                <input
-                                    type="checkbox"
-                                    name="allowed_ticket_status_ids[]"
-                                    :value="target.id"
-                                    :checked="
-                                        form.allowed_ticket_status_ids.includes(
-                                            target.id,
-                                        )
-                                    "
-                                    class="accent-primary size-4 shrink-0"
-                                    @change="toggleTarget(target.id, $event)"
-                                />
-                                <span class="grid min-w-0 gap-1">
-                                    <span
-                                        class="break-words text-sm font-medium"
-                                        >{{
-                                            ticketStatusLabel(target, '')
-                                        }}</span
-                                    >
-                                    <span
-                                        class="text-muted-foreground text-xs"
-                                        >{{
-                                            t(
-                                                form.allowed_ticket_status_ids.includes(
-                                                    target.id,
-                                                )
-                                                    ? 'workflow.allowed'
-                                                    : 'workflow.notAllowed',
-                                            )
-                                        }}</span
-                                    >
-                                </span>
-                            </label>
-                        </div>
-                    </fieldset>
-                    <p
-                        v-if="
-                            targets.length > 0 &&
-                            form.allowed_ticket_status_ids.length === 0
-                        "
-                        class="text-muted-foreground text-sm"
-                    >
-                        {{ t('workflow.noMovesHelp') }}
-                    </p>
-                    <div id="workflow-transition-errors" role="alert">
-                        <InputError
-                            v-for="(message, key) in form.errors"
-                            :key="key"
-                            :message="message"
-                        />
-                    </div>
-                    <FormFeedback
-                        :state="
-                            !saved && protection.state.value === 'success'
-                                ? 'idle'
-                                : protection.state.value
-                        "
-                        @retry="submit"
-                    />
-                    <div
-                        class="flex flex-wrap items-center gap-3 border-t pt-4"
-                    >
-                        <Badge
-                            :variant="form.isDirty ? 'warning' : 'secondary'"
-                            role="status"
-                            >{{
-                                t(
-                                    form.isDirty
-                                        ? 'workflow.unsavedMoves'
-                                        : 'workflow.savedMoves',
-                                    { count: savedTargets.length },
-                                )
-                            }}</Badge
-                        >
-                        <div
-                            class="flex w-full flex-wrap gap-2 sm:ml-auto sm:w-auto"
-                        >
-                            <Button
-                                type="button"
-                                variant="outline"
-                                :disabled="!form.isDirty || form.processing"
-                                @click="reset"
-                                >{{ t('workflow.resetMoves') }}</Button
-                            >
-                            <Button
-                                type="submit"
-                                :disabled="!form.isDirty"
-                                :loading="form.processing"
-                                >{{ t('workflow.saveMoves') }}</Button
-                            >
-                        </div>
-                    </div>
-                </form>
-            </template>
-        </div>
-    </section>
-</template>

resources/js/components/teams/TeamEditorDialog.vue

@@ -1,351 +0,0 @@
-<script setup lang="ts">
-import { useForm } from '@inertiajs/vue3';
-import { computed, ref, watch } from 'vue';
-import {
-    store,
-    updateMembers,
-    updateUserPermissions,
-} from '@/actions/App/Http/Controllers/TeamController';
-import FormFeedback from '@/components/FormFeedback.vue';
-import InputError from '@/components/InputError.vue';
-import UserAvatar from '@/components/ui/avatar/UserAvatar.vue';
-import { Button } from '@/components/ui/button';
-import {
-    Dialog,
-    DialogContent,
-    DialogDescription,
-    DialogFooter,
-    DialogHeader,
-    DialogTitle,
-} from '@/components/ui/dialog';
-import { Input } from '@/components/ui/input';
-import { Label } from '@/components/ui/label';
-import { useFormProtection } from '@/composables/useFormProtection';
-import { useLocalization } from '@/composables/useLocalization';
-import type { TeamEditorProps } from '@/types/teams';
-
-const props = defineProps<TeamEditorProps>();
-const emit = defineEmits<{ close: [] }>();
-const { t } = useLocalization();
-const search = ref('');
-const userId = ref<number | null>(null);
-const form = useForm({
-    name: '',
-    user_ids: [] as number[],
-    permissions: [] as string[],
-});
-const protection = useFormProtection(form, {
-    isDirty: () => props.target !== null && form.isDirty,
-});
-const team = computed(() =>
-    props.target && props.target.kind !== 'create' ? props.target.team : null,
-);
-const visibleUsers = computed(() =>
-    props.users.filter((user) =>
-        `${user.name} ${user.email}`
-            .toLocaleLowerCase()
-            .includes(search.value.trim().toLocaleLowerCase()),
-    ),
-);
-const title = computed(() =>
-    t(
-        props.target?.kind === 'create'
-            ? 'teams.create'
-            : props.target?.kind === 'members'
-              ? 'teams.manageMembers'
-              : 'teams.permissions',
-    ),
-);
-const selectionError = computed(
-    () =>
-        Object.entries(form.errors).find(([key]) =>
-            key.startsWith(
-                props.target?.kind === 'members' ? 'user_ids' : 'permissions',
-            ),
-        )?.[1],
-);
-const permissionLabels = {
-    'team:invite': 'teams.permissionInvite',
-    'team:manage': 'teams.permissionManage',
-    'team:admin': 'teams.permissionAdmin',
-} as const;
-function permissionLabel(value: string, fallback: string): string {
-    return value in permissionLabels
-        ? t(permissionLabels[value as keyof typeof permissionLabels])
-        : fallback;
-}
-watch(
-    () => props.target,
-    () => {
-        userId.value = null;
-        search.value = '';
-        form.defaults({
-            name: '',
-            user_ids: [...(team.value?.user_ids ?? [])],
-            permissions: [],
-        });
-        form.resetAndClearErrors();
-        protection.clearFeedback();
-    },
-);
-function chooseUser(event: Event): void {
-    const select = event.target as HTMLSelectElement;
-    if (!protection.confirmLeave()) {
-        select.value = String(userId.value ?? '');
-        return;
-    }
-    userId.value = select.value ? Number(select.value) : null;
-    form.defaults('permissions', [
-        ...(props.teamPermissions[team.value?.id ?? '']?.[userId.value ?? ''] ??
-            []),
-    ]);
-    form.resetAndClearErrors('permissions');
-    protection.clearFeedback();
-}
-function close(open: boolean): void {
-    if (open || form.processing || !protection.confirmLeave()) {
-        return;
-    }
-    form.resetAndClearErrors();
-    emit('close');
-}
-function submit(): void {
-    const target = props.target;
-    if (
-        !target ||
-        form.processing ||
-        (target.kind === 'permissions' && userId.value === null)
-    ) {
-        return;
-    }
-    const route =
-        target.kind === 'create'
-            ? store()
-            : target.kind === 'members'
-              ? updateMembers(target.team.id)
-              : updateUserPermissions([target.team.id, userId.value!]);
-    form.transform((data) =>
-        target.kind === 'create'
-            ? { name: data.name }
-            : target.kind === 'members'
-              ? { user_ids: data.user_ids }
-              : { permissions: data.permissions },
-    );
-    protection.submit(route, {
-        preserveScroll: true,
-        onSuccess: () => {
-            form.resetAndClearErrors();
-            emit('close');
-        },
-    });
-}
-</script>
-
-<template>
-    <Dialog :open="target !== null" @update:open="close">
-        <DialogContent
-            :show-close-button="!form.processing"
-            @escape-key-down="form.processing && $event.preventDefault()"
-            @interact-outside="form.processing && $event.preventDefault()"
-        >
-            <DialogHeader>
-                <DialogTitle>{{ title }}</DialogTitle>
-                <DialogDescription class="break-words">{{
-                    team?.name ?? t('teams.createDescription')
-                }}</DialogDescription>
-            </DialogHeader>
-            <form class="grid min-w-0 gap-5" @submit.prevent="submit">
-                <FormFeedback
-                    :state="protection.state.value"
-                    :title="
-                        protection.responseStatus.value === 403
-                            ? t('teams.forbidden')
-                            : undefined
-                    "
-                    :description="
-                        protection.responseStatus.value === 403
-                            ? t('teams.forbiddenDescription')
-                            : undefined
-                    "
-                    :retryable="protection.responseStatus.value !== 403"
-                    @retry="submit"
-                />
-                <fieldset
-                    :disabled="form.processing"
-                    class="grid min-w-0 gap-4"
-                >
-                    <template v-if="target?.kind === 'create'">
-                        <div class="grid gap-2">
-                            <Label for="team-name">{{ t('teams.name') }}</Label>
-                            <Input
-                                id="team-name"
-                                v-model="form.name"
-                                required
-                                maxlength="255"
-                                :placeholder="t('teams.namePlaceholder')"
-                                :aria-invalid="!!form.errors.name"
-                                aria-describedby="team-name-error"
-                            />
-                            <InputError
-                                id="team-name-error"
-                                :message="form.errors.name"
-                            />
-                        </div>
-                    </template>
-                    <template v-else-if="target?.kind === 'members'">
-                        <p class="text-muted-foreground text-sm">
-                            {{ t('teams.membersHelp') }}
-                        </p>
-                        <div class="grid gap-2">
-                            <Label for="member-search">{{
-                                t('teams.searchPeople')
-                            }}</Label>
-                            <Input
-                                id="member-search"
-                                v-model="search"
-                                type="search"
-                                :placeholder="
-                                    t('teams.searchPeoplePlaceholder')
-                                "
-                            />
-                        </div>
-                        <p class="text-muted-foreground text-sm" role="status">
-                            {{
-                                t('teams.selected', {
-                                    count: form.user_ids.length,
-                                })
-                            }}
-                        </p>
-                        <div
-                            class="grid max-h-64 gap-1 overflow-y-auto rounded-md border p-2"
-                            role="group"
-                            :aria-label="t('teams.members')"
-                            :aria-invalid="!!selectionError"
-                            aria-describedby="team-selection-error"
-                        >
-                            <label
-                                v-for="user in visibleUsers"
-                                :key="user.id"
-                                class="hover:bg-accent flex min-w-0 cursor-pointer items-center gap-3 rounded-md p-2"
-                            >
-                                <input
-                                    v-model="form.user_ids"
-                                    type="checkbox"
-                                    :value="user.id"
-                                    class="accent-primary focus-visible:ring-ring size-5 shrink-0 focus-visible:ring-2"
-                                />
-                                <UserAvatar
-                                    :user="user"
-                                    class="size-8 shrink-0"
-                                />
-                                <span class="grid min-w-0 gap-0.5 text-sm"
-                                    ><span class="break-words font-medium">{{
-                                        user.name
-                                    }}</span
-                                    ><span
-                                        class="text-muted-foreground break-all text-xs"
-                                        >{{ user.email }}</span
-                                    ></span
-                                >
-                            </label>
-                            <p
-                                v-if="visibleUsers.length === 0"
-                                class="text-muted-foreground p-3 text-sm"
-                            >
-                                {{ t('teams.noPeople') }}
-                            </p>
-                        </div>
-                        <InputError
-                            id="team-selection-error"
-                            :message="selectionError"
-                        />
-                    </template>
-                    <template v-else-if="target?.kind === 'permissions'">
-                        <p class="text-muted-foreground text-sm">
-                            {{ t('teams.permissionsHelp') }}
-                        </p>
-                        <div class="grid gap-2">
-                            <Label for="permission-user">{{
-                                t('teams.person')
-                            }}</Label>
-                            <select
-                                id="permission-user"
-                                :value="userId ?? ''"
-                                class="border-input bg-background focus-visible:ring-ring h-11 w-full min-w-0 rounded-md border px-3 text-sm focus-visible:ring-2"
-                                @change="chooseUser"
-                            >
-                                <option value="" disabled>
-                                    {{ t('teams.choosePerson') }}
-                                </option>
-                                <option
-                                    v-for="user in users"
-                                    :key="user.id"
-                                    :value="user.id"
-                                >
-                                    {{ user.name }} ({{ user.email }})
-                                </option>
-                            </select>
-                        </div>
-                        <fieldset
-                            v-if="userId !== null"
-                            class="grid gap-2"
-                            :aria-invalid="!!selectionError"
-                            aria-describedby="team-selection-error"
-                        >
-                            <legend class="mb-2 text-sm font-medium">
-                                {{ t('teams.directPermissions') }}
-                            </legend>
-                            <label
-                                v-for="option in permissionOptions"
-                                :key="option.value"
-                                class="hover:bg-accent flex cursor-pointer items-center gap-3 rounded-md border p-3 text-sm"
-                            >
-                                <input
-                                    v-model="form.permissions"
-                                    type="checkbox"
-                                    :value="option.value"
-                                    class="accent-primary focus-visible:ring-ring size-5 shrink-0 focus-visible:ring-2"
-                                />
-                                {{
-                                    permissionLabel(option.value, option.label)
-                                }}
-                            </label>
-                            <p class="text-muted-foreground text-sm">
-                                {{ t('teams.permissionsClearHelp') }}
-                            </p>
-                        </fieldset>
-                        <InputError
-                            id="team-selection-error"
-                            :message="selectionError"
-                        />
-                    </template>
-                </fieldset>
-                <DialogFooter>
-                    <Button
-                        type="button"
-                        variant="outline"
-                        :disabled="form.processing"
-                        @click="close(false)"
-                        >{{ t('common.cancel') }}</Button
-                    >
-                    <Button
-                        type="submit"
-                        :disabled="
-                            form.processing ||
-                            (target?.kind === 'permissions' && userId === null)
-                        "
-                        >{{
-                            t(
-                                target?.kind === 'create'
-                                    ? 'teams.create'
-                                    : target?.kind === 'members'
-                                      ? 'teams.saveMembers'
-                                      : 'teams.savePermissions',
-                            )
-                        }}</Button
-                    >
-                </DialogFooter>
-            </form>
-        </DialogContent>
-    </Dialog>
-</template>

resources/js/components/tickets/AcceptanceCriteriaChecklist.vue

@@ -1,320 +0,0 @@
-<script setup lang="ts">
-import {
-    ClipboardCheck,
-    IndentDecrease,
-    IndentIncrease,
-    Plus,
-    Trash2,
-} from 'lucide-vue-next';
-import { computed, nextTick, ref, useId, watch } from 'vue';
-import { Button } from '@/components/ui/button';
-import InputError from '@/components/InputError.vue';
-import { useLocalization } from '@/composables/useLocalization';
-import {
-    canIndentAcceptanceCriterion,
-    indentAcceptanceCriterion,
-    removeAcceptanceCriterion,
-    syncAcceptanceCriteriaDescendantCheckedState,
-} from '@/lib/acceptance-criteria';
-import type { AcceptanceCriteriaModel } from '@/types/models/acceptance-criteria-model';
-
-const props = withDefaults(
-    defineProps<{
-        modelValue: AcceptanceCriteriaModel;
-        readonly?: boolean;
-        disabled?: boolean;
-        persistToggles?: boolean;
-        allowEditing?: boolean;
-        saving?: boolean;
-        dirty?: boolean;
-        error?: string;
-    }>(),
-    {
-        readonly: false,
-        disabled: false,
-        persistToggles: false,
-        allowEditing: true,
-        saving: undefined,
-        dirty: false,
-        error: '',
-    },
-);
-const emit = defineEmits<{
-    'update:modelValue': [items: AcceptanceCriteriaModel];
-    toggle: [index: number, checked: boolean];
-}>();
-const { t } = useLocalization();
-const id = useId();
-const root = ref<HTMLElement>();
-const editing = ref(!props.persistToggles);
-const completed = computed(
-    () => props.modelValue.filter((item) => item.checked).length,
-);
-const locked = computed(() => props.readonly || props.disabled);
-const update = (items: AcceptanceCriteriaModel): void => {
-    if (!locked.value) {
-        emit('update:modelValue', items);
-    }
-};
-const focusRow = async (index: number): Promise<void> => {
-    await nextTick();
-    const inputs =
-        root.value?.querySelectorAll<HTMLTextAreaElement>('textarea');
-    if (inputs?.[index]) {
-        inputs[index].focus();
-    } else {
-        root.value
-            ?.querySelector<HTMLButtonElement>('[data-add-criterion]')
-            ?.focus();
-    }
-};
-const add = (): void => {
-    update([...props.modelValue, { text: '', checked: false, indent: 0 }]);
-    void focusRow(props.modelValue.length);
-};
-const remove = (index: number): void => {
-    update(removeAcceptanceCriterion(props.modelValue, index));
-    void focusRow(Math.max(0, index - 1));
-};
-watch(
-    () => props.modelValue,
-    async () => {
-        await nextTick();
-        root.value
-            ?.querySelectorAll<HTMLTextAreaElement>('textarea')
-            .forEach((input) => {
-                input.setCustomValidity(
-                    input.value.trim() === '' ? t('criteria.required') : '',
-                );
-            });
-    },
-);
-const changeText = (index: number, event: Event): void => {
-    const text = (event.target as HTMLTextAreaElement).value;
-    update(
-        props.modelValue.map((item, position) =>
-            position === index ? { ...item, text } : item,
-        ),
-    );
-};
-const toggle = (index: number, event: Event): void => {
-    const target = event.target as HTMLInputElement;
-    const checked = target.checked;
-    target.checked = props.modelValue[index].checked;
-    if (locked.value) {
-        return;
-    }
-    if (props.persistToggles && !editing.value && !props.dirty) {
-        emit('toggle', index, checked);
-    } else {
-        update(
-            syncAcceptanceCriteriaDescendantCheckedState(
-                props.modelValue,
-                index,
-                checked,
-            ),
-        );
-    }
-};
-const onKeydown = (index: number, event: KeyboardEvent): void => {
-    if (!event.altKey || !['ArrowLeft', 'ArrowRight'].includes(event.key)) {
-        return;
-    }
-    event.preventDefault();
-    update(
-        indentAcceptanceCriterion(
-            props.modelValue,
-            index,
-            event.key === 'ArrowRight' ? 1 : -1,
-        ),
-    );
-};
-</script>
-
-<template>
-    <section
-        ref="root"
-        class="border-border bg-card min-w-0 space-y-4 rounded-xl border p-4 sm:p-5"
-        :aria-labelledby="`${id}-title`"
-        :aria-busy="disabled"
-    >
-        <div class="flex flex-wrap items-center justify-between gap-3">
-            <h3
-                :id="`${id}-title`"
-                class="flex items-center gap-2 font-semibold"
-            >
-                <ClipboardCheck
-                    class="text-primary size-5"
-                    aria-hidden="true"
-                />
-                {{ t('criteria.title') }}
-            </h3>
-            <span class="text-muted-foreground text-sm" aria-live="polite">{{
-                t('criteria.progress', { completed, total: modelValue.length })
-            }}</span>
-            <Button
-                v-if="persistToggles && allowEditing && !readonly"
-                type="button"
-                variant="outline"
-                :disabled="
-                    disabled ||
-                    (editing &&
-                        modelValue.some((item) => item.text.trim() === ''))
-                "
-                :aria-pressed="editing"
-                @click="editing = !editing"
-            >
-                {{ t(editing ? 'criteria.preview' : 'criteria.edit') }}
-            </Button>
-        </div>
-        <p v-if="!modelValue.length" class="text-muted-foreground text-sm">
-            {{ t('criteria.empty') }}
-        </p>
-        <ol v-else class="space-y-3">
-            <li
-                v-for="(item, index) in modelValue"
-                :key="item.id ?? `new-${index}`"
-                :data-indent="item.indent"
-                class="border-border min-w-0"
-                :class="{ 'border-s-2 ps-2': item.indent > 0 }"
-                :style="{ marginInlineStart: `${item.indent * 0.5}rem` }"
-            >
-                <div class="flex min-w-0 items-start gap-2">
-                    <label
-                        class="focus-within:ring-ring flex min-h-11 w-11 shrink-0 cursor-pointer items-center justify-center rounded-md focus-within:ring-2"
-                        :class="{ 'cursor-not-allowed opacity-60': locked }"
-                    >
-                        <input
-                            :checked="item.checked"
-                            type="checkbox"
-                            :disabled="locked"
-                            :aria-label="
-                                t('criteria.complete', {
-                                    number: index + 1,
-                                    text: item.text,
-                                })
-                            "
-                            class="border-input accent-primary size-5 rounded"
-                            @change="toggle(index, $event)"
-                        />
-                    </label>
-                    <div class="min-w-0 flex-1">
-                        <textarea
-                            v-if="editing && !readonly"
-                            :value="item.text"
-                            :aria-label="
-                                t('criteria.item', { number: index + 1 })
-                            "
-                            :aria-describedby="`${id}-hint ${id}-error`"
-                            :disabled="disabled"
-                            :aria-invalid="Boolean(error)"
-                            required
-                            rows="2"
-                            class="border-input bg-background focus-visible:ring-ring min-h-11 w-full rounded-md border px-3 py-2 text-sm outline-none focus-visible:ring-2 disabled:opacity-60"
-                            @input="changeText(index, $event)"
-                            @keydown="onKeydown(index, $event)"
-                        />
-                        <p
-                            v-else
-                            class="wrap-anywhere min-h-11 whitespace-pre-wrap py-2.5 text-sm"
-                            :class="{
-                                'text-muted-foreground line-through':
-                                    item.checked,
-                            }"
-                        >
-                            {{ item.text }}
-                        </p>
-                        <div
-                            v-if="editing && !readonly"
-                            class="flex flex-wrap gap-1"
-                        >
-                            <Button
-                                type="button"
-                                variant="ghost"
-                                size="icon"
-                                :disabled="disabled || item.indent === 0"
-                                :aria-label="
-                                    t('criteria.outdent', { number: index + 1 })
-                                "
-                                @click="
-                                    update(
-                                        indentAcceptanceCriterion(
-                                            modelValue,
-                                            index,
-                                            -1,
-                                        ),
-                                    )
-                                "
-                                ><IndentDecrease aria-hidden="true"
-                            /></Button>
-                            <Button
-                                type="button"
-                                variant="ghost"
-                                size="icon"
-                                :disabled="
-                                    disabled ||
-                                    !canIndentAcceptanceCriterion(
-                                        modelValue,
-                                        index,
-                                    )
-                                "
-                                :aria-label="
-                                    t('criteria.indent', { number: index + 1 })
-                                "
-                                @click="
-                                    update(
-                                        indentAcceptanceCriterion(
-                                            modelValue,
-                                            index,
-                                            1,
-                                        ),
-                                    )
-                                "
-                                ><IndentIncrease aria-hidden="true"
-                            /></Button>
-                            <Button
-                                type="button"
-                                variant="ghost"
-                                size="icon"
-                                :disabled="disabled"
-                                :aria-label="
-                                    t('criteria.remove', { number: index + 1 })
-                                "
-                                @click="remove(index)"
-                                ><Trash2 aria-hidden="true"
-                            /></Button>
-                        </div>
-                    </div>
-                </div>
-            </li>
-        </ol>
-        <template v-if="editing && !readonly">
-            <Button
-                data-add-criterion
-                type="button"
-                variant="outline"
-                :disabled="disabled"
-                @click="add"
-                ><Plus aria-hidden="true" />{{ t('criteria.add') }}</Button
-            >
-            <p :id="`${id}-hint`" class="text-muted-foreground text-xs">
-                {{ t('criteria.hint') }}
-            </p>
-        </template>
-        <p
-            v-if="persistToggles && dirty"
-            class="text-muted-foreground text-sm"
-            role="status"
-        >
-            {{ t('criteria.unsaved') }}
-        </p>
-        <p
-            v-if="saving ?? disabled"
-            class="text-muted-foreground text-sm"
-            role="status"
-        >
-            {{ t('criteria.saving') }}
-        </p>
-        <InputError :id="`${id}-error`" :message="error" role="alert" />
-    </section>
-</template>

resources/js/components/tickets/TicketCard.vue

@@ -11,7 +11,6 @@ import type {
 } from '@/types/ticket-presentation';
 
 withDefaults(defineProps<TicketPresentationProps>(), {
-    layout: 'card',
     showDescription: true,
     showStatus: true,
 });
@@ -23,85 +22,63 @@ const { t } = useLocalization();
 <template>
     <article
         :class="[
-            'bg-card text-card-foreground min-w-0 rounded-md border',
-            layout === 'card' ? 'shadow-sm' : '',
+            'bg-card text-card-foreground min-w-0 rounded-md border shadow-sm',
             ticket.is_blocked ? 'border-warning' : 'border-border',
         ]"
     >
-        <div
-            :class="
-                layout === 'list'
-                    ? 'flex min-w-0 flex-col lg:flex-row lg:items-stretch'
-                    : ''
+        <Link
+            :href="showTicket({ project: projectId, ticket: ticket.id })"
+            :aria-label="
+                t('tickets.open', {
+                    key: ticket.ticket_key,
+                    title: ticket.title,
+                })
             "
+            class="focus-visible:ring-ring/35 gap-card min-h-control hover:bg-accent/35 group flex min-w-0 flex-col rounded-t-md p-4 transition-[background-color,box-shadow] focus-visible:outline-none focus-visible:ring-2"
+            @click="emit('open', ticket.id)"
         >
-            <Link
-                :href="showTicket({ project: projectId, ticket: ticket.id })"
-                :aria-label="
-                    t('tickets.open', {
-                        key: ticket.ticket_key,
-                        title: ticket.title,
-                    })
-                "
-                :class="[
-                    'focus-visible:ring-ring/35 gap-card min-h-control hover:bg-accent/35 group flex min-w-0 flex-1 flex-col p-4 transition-[background-color,box-shadow] focus-visible:outline-none focus-visible:ring-2',
-                    layout === 'list'
-                        ? 'rounded-t-md lg:rounded-l-md lg:rounded-tr-none'
-                        : 'rounded-t-md',
-                ]"
-                @click="emit('open', ticket.id)"
-            >
-                <div class="flex min-w-0 items-start justify-between gap-3">
-                    <Badge
-                        variant="outline"
-                        class="wrap-anywhere max-w-full whitespace-normal"
-                    >
-                        {{ ticket.ticket_key }}
-                    </Badge>
-                    <ArrowUpRight
-                        class="text-muted-foreground group-hover:text-primary size-4 shrink-0"
-                        aria-hidden="true"
-                    />
-                </div>
-
-                <h3
-                    class="text-body group-hover:text-primary wrap-anywhere min-w-0 font-semibold"
+            <div class="flex min-w-0 items-start justify-between gap-3">
+                <Badge
+                    variant="outline"
+                    class="wrap-anywhere max-w-full whitespace-normal"
                 >
-                    {{ ticket.title }}
-                </h3>
-
-                <TicketMetadata :ticket="ticket" :show-status="showStatus" />
-
-                <p
-                    v-if="showDescription && ticket.description"
-                    class="text-caption text-muted-foreground wrap-anywhere line-clamp-3"
-                >
-                    {{ ticket.description }}
-                </p>
-
-                <p
-                    v-if="ticket.is_blocked && ticket.blocked_comment"
-                    class="text-caption text-warning-foreground bg-warning wrap-anywhere rounded-sm px-3 py-2"
-                >
-                    {{
-                        t('tickets.blockerComment', {
-                            comment: ticket.blocked_comment,
-                        })
-                    }}
-                </p>
-            </Link>
-
-            <div
-                v-if="$slots.actions"
-                :class="[
-                    'border-t p-4',
-                    layout === 'list'
-                        ? 'lg:flex lg:w-80 lg:items-center lg:border-l lg:border-t-0'
-                        : '',
-                ]"
-            >
-                <slot name="actions" />
+                    {{ ticket.ticket_key }}
+                </Badge>
+                <ArrowUpRight
+                    class="text-muted-foreground group-hover:text-primary size-4 shrink-0"
+                    aria-hidden="true"
+                />
             </div>
+
+            <h3
+                class="text-body group-hover:text-primary wrap-anywhere min-w-0 font-semibold"
+            >
+                {{ ticket.title }}
+            </h3>
+
+            <TicketMetadata :ticket="ticket" :show-status="showStatus" />
+
+            <p
+                v-if="showDescription && ticket.description"
+                class="text-caption text-muted-foreground wrap-anywhere line-clamp-3"
+            >
+                {{ ticket.description }}
+            </p>
+
+            <p
+                v-if="ticket.is_blocked && ticket.blocked_comment"
+                class="text-caption text-warning-foreground bg-warning wrap-anywhere rounded-sm px-3 py-2"
+            >
+                {{
+                    t('tickets.blockerComment', {
+                        comment: ticket.blocked_comment,
+                    })
+                }}
+            </p>
+        </Link>
+
+        <div v-if="$slots.actions" class="border-t p-4">
+            <slot name="actions" />
         </div>
     </article>
 </template>

resources/js/components/tickets/detail/TicketBranchCreateDialog.vue

@@ -1,416 +0,0 @@
-<script setup lang="ts">
-import { Link, useForm, usePage } from '@inertiajs/vue3';
-import {
-    CheckCircle2,
-    CircleAlert,
-    GitBranchPlus,
-    LoaderCircle,
-} from 'lucide-vue-next';
-import { computed, ref, watch } from 'vue';
-import {
-    store,
-    validate as validateBranch,
-} from '@/actions/App/Http/Controllers/ProjectTicketBranchController';
-import FormFeedback from '@/components/FormFeedback.vue';
-import InputError from '@/components/InputError.vue';
-import { Button } from '@/components/ui/button';
-import {
-    Dialog,
-    DialogContent,
-    DialogDescription,
-    DialogFooter,
-    DialogHeader,
-    DialogTitle,
-} from '@/components/ui/dialog';
-import { Input } from '@/components/ui/input';
-import { Label } from '@/components/ui/label';
-import { useFormProtection } from '@/composables/useFormProtection';
-import { useLocalization } from '@/composables/useLocalization';
-import { edit as editGitConnections } from '@/routes/git-connections';
-import type { BranchNameValidationModel } from '@/types/models/branch-name-validation-model';
-import type {
-    TicketBranchCreateDialogProps,
-    TicketBranchFormData,
-} from '@/types/ticket-detail';
-
-const props = defineProps<TicketBranchCreateDialogProps>();
-const { t } = useLocalization();
-const appName = String(usePage().props.name);
-const draftKey = `projects:${props.project.id}:tickets:${props.ticket.id}:branch`;
-const isOpen = ref(false);
-const isCheckingBranchName = ref(false);
-const branchNameValidation = ref<BranchNameValidationModel | null>(null);
-
-const defaultRepositoryConnectionId = computed(() =>
-    String(
-        props.repositoryConnections.find(
-            (repositoryConnection) => repositoryConnection.has_personal_access,
-        )?.id ??
-            props.repositoryConnections[0]?.id ??
-            '',
-    ),
-);
-
-const form = useForm<TicketBranchFormData>(draftKey, {
-    branch_name: props.suggestedBranchName,
-    repository_connection_id: defaultRepositoryConnectionId.value,
-});
-const protection = useFormProtection(form, {
-    isDirty: () => isOpen.value && form.isDirty,
-});
-
-const selectedRepositoryConnection = computed(
-    () =>
-        props.repositoryConnections.find(
-            (repositoryConnection) =>
-                String(repositoryConnection.id) ===
-                form.repository_connection_id,
-        ) ?? null,
-);
-const selectedRepositoryHasPersonalAccess = computed(
-    () => selectedRepositoryConnection.value?.has_personal_access ?? false,
-);
-const validationStateClasses = computed(() => {
-    if (isCheckingBranchName.value) {
-        return 'border-primary/30 bg-primary/5 text-foreground';
-    }
-
-    if (branchNameValidation.value?.is_valid) {
-        return 'border-success/40 bg-success/10 text-success-foreground';
-    }
-
-    if (branchNameValidation.value !== null) {
-        return 'border-warning/40 bg-warning/10 text-warning-foreground';
-    }
-
-    return 'border-border bg-muted/30 text-muted-foreground';
-});
-
-function updateOpen(open: boolean): void {
-    if (!open && !protection.confirmLeave()) {
-        return;
-    }
-
-    isOpen.value = open;
-}
-
-function initializeForm(): void {
-    if (form.isDirty) {
-        return;
-    }
-
-    form.clearErrors();
-    protection.clearFeedback();
-    form.branch_name = props.suggestedBranchName;
-    form.repository_connection_id = defaultRepositoryConnectionId.value;
-    branchNameValidation.value = null;
-    isCheckingBranchName.value = false;
-}
-
-watch(isOpen, (open) => {
-    if (!open) {
-        form.clearErrors();
-        protection.clearFeedback();
-        branchNameValidation.value = null;
-        isCheckingBranchName.value = false;
-
-        return;
-    }
-
-    initializeForm();
-});
-
-watch(
-    [isOpen, () => form.repository_connection_id, () => form.branch_name],
-    (
-        [open, repositoryConnectionId, branchName],
-        _previousValues,
-        onCleanup,
-    ) => {
-        if (!open) {
-            return;
-        }
-
-        const repositoryConnection = selectedRepositoryConnection.value;
-
-        if (repositoryConnection === null || repositoryConnectionId === '') {
-            branchNameValidation.value = null;
-            isCheckingBranchName.value = false;
-
-            return;
-        }
-
-        if (!repositoryConnection.has_personal_access) {
-            branchNameValidation.value = {
-                is_valid: false,
-                message: t('ticketDetail.connectGitFirst'),
-            };
-            isCheckingBranchName.value = false;
-
-            return;
-        }
-
-        if (branchName.trim() === '') {
-            branchNameValidation.value = {
-                is_valid: false,
-                message: t('ticketDetail.branchRequired'),
-            };
-            isCheckingBranchName.value = false;
-
-            return;
-        }
-
-        branchNameValidation.value = null;
-        isCheckingBranchName.value = true;
-
-        const abortController = new AbortController();
-        const timeoutId = window.setTimeout(async () => {
-            try {
-                const response = await fetch(
-                    validateBranch.url(
-                        {
-                            project: props.project.id,
-                            ticket: props.ticket.id,
-                        },
-                        {
-                            query: {
-                                branch_name: branchName,
-                                repository_connection_id:
-                                    repositoryConnectionId,
-                            },
-                        },
-                    ),
-                    {
-                        credentials: 'same-origin',
-                        headers: {
-                            Accept: 'application/json',
-                            'X-Requested-With': 'XMLHttpRequest',
-                        },
-                        method: 'GET',
-                        signal: abortController.signal,
-                    },
-                );
-
-                if (!response.ok) {
-                    throw new Error('Branch validation failed.');
-                }
-
-                branchNameValidation.value =
-                    (await response.json()) as BranchNameValidationModel;
-            } catch (error) {
-                if (
-                    error instanceof DOMException &&
-                    error.name === 'AbortError'
-                ) {
-                    return;
-                }
-
-                branchNameValidation.value = {
-                    is_valid: false,
-                    message: t('ticketDetail.branchValidationFailed', {
-                        app: appName,
-                    }),
-                };
-            } finally {
-                if (!abortController.signal.aborted) {
-                    isCheckingBranchName.value = false;
-                }
-            }
-        }, 300);
-
-        onCleanup(() => {
-            abortController.abort();
-            window.clearTimeout(timeoutId);
-            isCheckingBranchName.value = false;
-        });
-    },
-    { immediate: true },
-);
-
-function submit(): void {
-    if (
-        !selectedRepositoryHasPersonalAccess.value ||
-        branchNameValidation.value?.is_valid !== true
-    ) {
-        return;
-    }
-
-    protection.submit(
-        store({
-            project: props.project.id,
-            ticket: props.ticket.id,
-        }),
-        {
-            onSuccess: () => {
-                isOpen.value = false;
-            },
-            preserveScroll: true,
-        },
-    );
-}
-</script>
-
-<template>
-    <Dialog :open="isOpen" @update:open="updateOpen">
-        <Button
-            type="button"
-            variant="outline"
-            class="w-full gap-2 sm:w-auto"
-            @click="isOpen = true"
-        >
-            <GitBranchPlus class="size-4" aria-hidden="true" />
-            {{ t('ticketDetail.createBranch') }}
-        </Button>
-
-        <DialogContent class="sm:max-w-lg">
-            <DialogHeader class="space-y-3">
-                <DialogTitle>{{
-                    t('ticketDetail.createBranchTitle')
-                }}</DialogTitle>
-                <DialogDescription>{{
-                    t('ticketDetail.createBranchDescription')
-                }}</DialogDescription>
-            </DialogHeader>
-
-            <form class="grid gap-4" @submit.prevent="submit">
-                <FormFeedback
-                    :state="protection.state.value"
-                    :title="
-                        protection.state.value === 'loading'
-                            ? t('ticketDetail.creatingBranch')
-                            : undefined
-                    "
-                    @retry="submit"
-                />
-
-                <fieldset
-                    :disabled="form.processing"
-                    class="grid min-w-0 gap-4"
-                >
-                    <div class="grid min-w-0 gap-2">
-                        <Label for="repository_connection_id">{{
-                            t('ticketDetail.repository')
-                        }}</Label>
-                        <select
-                            id="repository_connection_id"
-                            v-model="form.repository_connection_id"
-                            class="min-h-control border-input bg-background shadow-xs focus-visible:border-ring focus-visible:ring-ring/50 w-full min-w-0 rounded-md border px-3 py-2 text-sm outline-none transition-[color,box-shadow] focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-60"
-                        >
-                            <option
-                                v-for="repositoryConnection in repositoryConnections"
-                                :key="repositoryConnection.id"
-                                :value="String(repositoryConnection.id)"
-                            >
-                                {{ repositoryConnection.repository_full_name
-                                }}{{
-                                    repositoryConnection.has_personal_access
-                                        ? ''
-                                        : ` — ${t('ticketDetail.personalAccessRequired')}`
-                                }}
-                            </option>
-                        </select>
-                        <InputError
-                            :message="form.errors.repository_connection_id"
-                        />
-                    </div>
-
-                    <div class="grid min-w-0 gap-2">
-                        <Label for="branch_name">{{
-                            t('ticketDetail.branchName')
-                        }}</Label>
-                        <Input
-                            id="branch_name"
-                            v-model="form.branch_name"
-                            :disabled="!selectedRepositoryHasPersonalAccess"
-                            autocomplete="off"
-                        />
-                        <InputError :message="form.errors.branch_name" />
-                    </div>
-                </fieldset>
-
-                <div
-                    role="status"
-                    aria-live="polite"
-                    :aria-busy="isCheckingBranchName || undefined"
-                    class="rounded-lg border px-4 py-3 transition-colors"
-                    :class="validationStateClasses"
-                >
-                    <div class="flex items-start gap-3">
-                        <LoaderCircle
-                            v-if="isCheckingBranchName"
-                            class="mt-0.5 size-4 shrink-0 animate-spin motion-reduce:animate-none"
-                            aria-hidden="true"
-                        />
-                        <CheckCircle2
-                            v-else-if="branchNameValidation?.is_valid"
-                            class="mt-0.5 size-4 shrink-0"
-                            aria-hidden="true"
-                        />
-                        <CircleAlert
-                            v-else-if="branchNameValidation !== null"
-                            class="mt-0.5 size-4 shrink-0"
-                            aria-hidden="true"
-                        />
-                        <p class="text-sm">
-                            {{
-                                isCheckingBranchName
-                                    ? t('ticketDetail.checkingBranch')
-                                    : (branchNameValidation?.message ??
-                                      t('ticketDetail.selectRepository'))
-                            }}
-                        </p>
-                    </div>
-                </div>
-
-                <div
-                    v-if="
-                        !selectedRepositoryHasPersonalAccess &&
-                        selectedRepositoryConnection !== null
-                    "
-                    class="border-border bg-muted/20 grid gap-3 rounded-lg border border-dashed px-4 py-4"
-                >
-                    <div class="grid gap-1">
-                        <p class="font-semibold">
-                            {{ t('ticketDetail.gitAccessRequired') }}
-                        </p>
-                        <p class="text-muted-foreground text-sm">
-                            {{ t('ticketDetail.branchAccess') }}
-                        </p>
-                    </div>
-                    <Button
-                        as-child
-                        variant="outline"
-                        size="sm"
-                        class="justify-self-start"
-                    >
-                        <Link :href="editGitConnections()">{{
-                            t('ticketDetail.openGitConnections')
-                        }}</Link>
-                    </Button>
-                </div>
-
-                <DialogFooter class="gap-2">
-                    <Button
-                        type="button"
-                        variant="secondary"
-                        :disabled="form.processing"
-                        @click="updateOpen(false)"
-                    >
-                        {{ t('common.cancel') }}
-                    </Button>
-                    <Button
-                        type="submit"
-                        :disabled="
-                            isCheckingBranchName ||
-                            branchNameValidation?.is_valid !== true
-                        "
-                        :loading="form.processing"
-                        :loading-label="t('ticketDetail.creatingBranch')"
-                    >
-                        {{ t('ticketDetail.createNow') }}
-                    </Button>
-                </DialogFooter>
-            </form>
-        </DialogContent>
-    </Dialog>
-</template>

resources/js/components/tickets/detail/TicketDetailBlocker.vue

@@ -1,204 +0,0 @@
-<script setup lang="ts">
-import { useForm } from '@inertiajs/vue3';
-import { computed } from 'vue';
-import ProjectTicketController from '@/actions/App/Http/Controllers/ProjectTicketController';
-import FormFeedback from '@/components/FormFeedback.vue';
-import InputError from '@/components/InputError.vue';
-import TicketFormField from '@/components/tickets/TicketFormField.vue';
-import { Badge } from '@/components/ui/badge';
-import { Button } from '@/components/ui/button';
-import {
-    Card,
-    CardContent,
-    CardDescription,
-    CardHeader,
-} from '@/components/ui/card';
-import { Label } from '@/components/ui/label';
-import { useFormProtection } from '@/composables/useFormProtection';
-import { useLocalization } from '@/composables/useLocalization';
-import type { TicketDetailBlockerProps } from '@/types/ticket-detail';
-
-const props = defineProps<TicketDetailBlockerProps>();
-const { t } = useLocalization();
-
-const savedFormData = () => ({
-    acceptance_criteria: props.ticket.acceptance_criteria,
-    assignee_user_id: props.ticket.assignee_user_id,
-    blocked_comment: props.ticket.blocked_comment ?? '',
-    description: props.ticket.description,
-    field_values: (props.ticket.field_values ?? []).map((fieldValue) => ({
-        ticket_field_definition_id: fieldValue.ticket_field_definition_id,
-        value_number: fieldValue.value_number,
-        value_user_id: fieldValue.value_user_id,
-    })),
-    is_blocked: props.ticket.is_blocked,
-    parent_ticket_id: props.ticket.parent_ticket_id,
-    story_points: props.ticket.story_points,
-    ticket_priority_id: props.ticket.ticket_priority_id,
-    ticket_type_id: props.ticket.ticket_type_id,
-    title: props.ticket.title,
-});
-
-const form = useForm(
-    `projects:${props.project.id}:tickets:${props.ticket.id}:blocker`,
-    savedFormData(),
-);
-const protection = useFormProtection(form);
-const isBlocked = computed(() => Boolean(form.is_blocked));
-
-const reset = (): void => {
-    if (form.processing || !protection.confirmLeave()) {
-        return;
-    }
-
-    form.reset();
-    form.clearErrors();
-    protection.clearFeedback();
-};
-
-const submit = (): void => {
-    if (!props.canEditTicket || form.processing) {
-        return;
-    }
-
-    protection.submit(
-        ProjectTicketController.update({
-            project: props.project.id,
-            ticket: props.ticket.id,
-        }),
-        {
-            preserveScroll: true,
-            onSuccess: () => {
-                Object.assign(form, savedFormData());
-                form.defaults();
-            },
-        },
-    );
-};
-</script>
-
-<template>
-    <section
-        id="ticket-blocker"
-        aria-labelledby="ticket-blocker-title"
-        class="min-w-0 scroll-mt-6"
-    >
-        <Card :class="{ 'border-warning/40': isBlocked }">
-            <CardHeader>
-                <div class="flex flex-wrap items-center justify-between gap-3">
-                    <h2 id="ticket-blocker-title" class="text-lg font-semibold">
-                        {{ t('ticketDetail.blocker') }}
-                    </h2>
-                    <Badge :variant="isBlocked ? 'warning' : 'outline'">
-                        {{
-                            isBlocked
-                                ? t('ticketDetail.blockerActive')
-                                : t('ticketDetail.blockerInactive')
-                        }}
-                    </Badge>
-                </div>
-                <CardDescription>
-                    {{ t('ticketDetail.blockerDescription') }}
-                </CardDescription>
-            </CardHeader>
-
-            <CardContent v-if="canEditTicket">
-                <form class="grid min-w-0 gap-5" @submit.prevent="submit">
-                    <FormFeedback
-                        :state="protection.state.value"
-                        @retry="submit"
-                    />
-
-                    <div
-                        class="bg-muted/30 flex min-w-0 items-start gap-3 rounded-xl border p-4"
-                    >
-                        <input
-                            id="is_blocked"
-                            v-model="form.is_blocked"
-                            type="checkbox"
-                            :disabled="form.processing"
-                            :aria-invalid="Boolean(form.errors.is_blocked)"
-                            aria-describedby="ticket-blocker-state-description is_blocked-error"
-                            class="border-input text-primary focus-visible:ring-ring mt-0.5 size-4 shrink-0 rounded focus-visible:ring-2"
-                        />
-                        <div class="grid min-w-0 gap-1">
-                            <Label for="is_blocked">
-                                {{ t('ticketDetail.blocked') }}
-                            </Label>
-                            <p
-                                id="ticket-blocker-state-description"
-                                class="text-muted-foreground text-sm"
-                            >
-                                {{
-                                    isBlocked
-                                        ? t(
-                                              'ticketDetail.blockerActiveDescription',
-                                          )
-                                        : t(
-                                              'ticketDetail.blockerInactiveDescription',
-                                          )
-                                }}
-                            </p>
-                        </div>
-                    </div>
-                    <InputError
-                        id="is_blocked-error"
-                        :message="form.errors.is_blocked"
-                    />
-
-                    <TicketFormField
-                        v-if="isBlocked"
-                        id="blocked_comment"
-                        v-model="form.blocked_comment"
-                        kind="textarea"
-                        :rows="3"
-                        :label="t('ticketDetail.blockerComment')"
-                        :hint="t('ticketDetail.blockerCommentHelp')"
-                        :placeholder="t('ticketDetail.blockerPlaceholder')"
-                        :error="form.errors.blocked_comment"
-                        :disabled="form.processing"
-                        required
-                    />
-
-                    <div
-                        class="flex flex-col-reverse gap-3 sm:flex-row sm:justify-end"
-                    >
-                        <Button
-                            type="button"
-                            variant="outline"
-                            :disabled="!form.isDirty || form.processing"
-                            @click="reset"
-                        >
-                            {{ t('ticketDetail.resetBlocker') }}
-                        </Button>
-                        <Button
-                            type="submit"
-                            :loading="form.processing"
-                            :loading-label="t('ticketDetail.savingBlocker')"
-                            :disabled="!form.isDirty"
-                        >
-                            {{
-                                isBlocked
-                                    ? t('ticketDetail.saveBlocker')
-                                    : t('ticketDetail.unblockTicket')
-                            }}
-                        </Button>
-                    </div>
-                </form>
-            </CardContent>
-
-            <CardContent v-else>
-                <p
-                    class="whitespace-pre-wrap text-sm leading-6"
-                    :class="{ 'text-muted-foreground': !isBlocked }"
-                >
-                    {{
-                        isBlocked
-                            ? ticket.blocked_comment
-                            : t('ticketDetail.blockerInactiveDescription')
-                    }}
-                </p>
-            </CardContent>
-        </Card>
-    </section>
-</template>

resources/js/components/tickets/detail/TicketDetailContent.vue

@@ -3,54 +3,43 @@ import { useLocalization } from '@/composables/useLocalization';
 import { Card, CardContent, CardHeader } from '@/components/ui/card';
 
 import { useForm, useRemember } from '@inertiajs/vue3';
-import {
-    computed,
-    ref,
-    toRef,
-    unref,
-    useTemplateRef,
-    nextTick,
-    watch,
-} from 'vue';
+import { computed, ref, toRef, unref } from 'vue';
 import ProjectTicketController from '@/actions/App/Http/Controllers/ProjectTicketController';
 import InputError from '@/components/InputError.vue';
-import AcceptanceCriteriaChecklist from '@/components/tickets/AcceptanceCriteriaChecklist.vue';
 import FormFeedback from '@/components/FormFeedback.vue';
 import { Button } from '@/components/ui/button';
 import TicketFormField from '@/components/tickets/TicketFormField.vue';
 import TicketFormFields from '@/components/tickets/TicketFormFields.vue';
+import { Label } from '@/components/ui/label';
 import { useFormProtection } from '@/composables/useFormProtection';
 import {
+    acceptanceCriteriaToEditorState,
+    buildAcceptanceCriteria,
+    formatChecklistLines,
     normalizeAcceptanceCriteria,
     syncAcceptanceCriteriaDescendantCheckedState,
 } from '@/lib/acceptance-criteria';
 import type { TicketDetailContentProps } from '@/types/ticket-detail';
 const props = defineProps<TicketDetailContentProps>();
 const { t } = useLocalization();
-const editor = useTemplateRef<HTMLDetailsElement>('editor');
-async function editParent(): Promise<void> {
-    if (!props.canEditTicket || !editor.value) {
-        return;
-    }
-    editor.value.open = true;
-    await nextTick();
-    editor.value
-        ?.querySelector<HTMLSelectElement>('#parent_ticket_id')
-        ?.focus();
-}
-defineExpose({ editParent });
 const canEditAuthor = computed(
     () => props.canEditTicket && props.canManageProject,
 );
 const canViewAuthor = computed(
     () => props.project.show_author || props.canManageProject,
 );
+const acceptanceCriteriaEditorState = acceptanceCriteriaToEditorState(
+    props.ticket.acceptance_criteria,
+);
 const draftKey = `projects:${props.project.id}:tickets:${props.ticket.id}:edit`;
 const acceptanceCriteriaDraft = useRemember(
-    { items: normalizeAcceptanceCriteria(props.ticket.acceptance_criteria) },
-    `${draftKey}:criteria`,
+    { checklist: acceptanceCriteriaEditorState.checklist },
+    `${draftKey}:checklist`,
+);
+const acceptanceCriteriaChecklist = toRef(
+    unref(acceptanceCriteriaDraft),
+    'checklist',
 );
-const acceptanceCriteriaItems = toRef(unref(acceptanceCriteriaDraft), 'items');
 const savedAcceptanceCriteria = ref(
     normalizeAcceptanceCriteria(props.ticket.acceptance_criteria),
 );
@@ -58,8 +47,8 @@ const isPersistingAcceptanceCriteriaToggle = ref(false);
 const acceptanceCriteriaToggleError = ref('');
 
 const savedFormData = () => ({
-    acceptance_criteria: normalizeAcceptanceCriteria(
-        savedAcceptanceCriteria.value,
+    acceptance_criteria: buildAcceptanceCriteria(
+        acceptanceCriteriaChecklist.value,
     ),
     assignee_user_id: props.ticket.assignee_user_id ?? '',
     author_user_id: props.ticket.author_user_id ?? '',
@@ -88,20 +77,14 @@ const savedFormData = () => ({
 
 const form = useForm(draftKey, savedFormData());
 
-watch(
-    () => [props.ticket.is_blocked, props.ticket.blocked_comment] as const,
-    ([isBlocked, blockedComment]) => {
-        form.is_blocked = isBlocked;
-        form.blocked_comment = blockedComment ?? '';
-        form.defaults('is_blocked', isBlocked);
-        form.defaults('blocked_comment', blockedComment ?? '');
-    },
+const acceptanceCriteriaPreviewItems = computed(
+    () => savedAcceptanceCriteria.value,
 );
 
 const hasUnsavedAcceptanceCriteriaDraft = computed(
     () =>
-        JSON.stringify(acceptanceCriteriaItems.value) !==
-        JSON.stringify(savedAcceptanceCriteria.value),
+        acceptanceCriteriaChecklist.value !==
+        formatChecklistLines(savedAcceptanceCriteria.value),
 );
 
 const isDirty = computed(
@@ -120,10 +103,9 @@ const reset = (): void => {
     }
     form.reset();
     form.clearErrors();
-    acceptanceCriteriaItems.value = normalizeAcceptanceCriteria(
+    acceptanceCriteriaChecklist.value = formatChecklistLines(
         savedAcceptanceCriteria.value,
     );
-    acceptanceCriteriaToggleError.value = '';
     protection.clearFeedback();
 };
 
@@ -137,6 +119,19 @@ const acceptanceCriteriaError = computed(() => {
     );
 });
 
+const buildAcceptanceCriteriaForSubmit = () => {
+    const draftItems = buildAcceptanceCriteria(
+        acceptanceCriteriaChecklist.value,
+    );
+
+    return draftItems.map((item, index) => ({
+        ...item,
+        ...(savedAcceptanceCriteria.value[index]?.id !== undefined
+            ? { id: savedAcceptanceCriteria.value[index].id }
+            : {}),
+    }));
+};
+
 const buildSavedTicketPayload = (
     acceptanceCriteria = savedAcceptanceCriteria.value,
 ) => ({
@@ -176,6 +171,10 @@ const persistAcceptanceCriteriaToggle = async (
         index,
         checked,
     );
+    const previousChecklist = formatChecklistLines(
+        savedAcceptanceCriteria.value,
+    );
+    const nextChecklist = formatChecklistLines(nextAcceptanceCriteria);
     const csrfToken = document
         .querySelector('meta[name="csrf-token"]')
         ?.getAttribute('content');
@@ -210,18 +209,34 @@ const persistAcceptanceCriteriaToggle = async (
 
         savedAcceptanceCriteria.value = nextAcceptanceCriteria;
 
-        acceptanceCriteriaItems.value = normalizeAcceptanceCriteria(
-            nextAcceptanceCriteria,
-        );
-        form.acceptance_criteria = nextAcceptanceCriteria;
-        form.defaults('acceptance_criteria', nextAcceptanceCriteria);
+        if (acceptanceCriteriaChecklist.value === previousChecklist) {
+            acceptanceCriteriaChecklist.value = nextChecklist;
+            form.acceptance_criteria = nextAcceptanceCriteria;
+            form.defaults('acceptance_criteria', nextAcceptanceCriteria);
+        }
     } catch (_error) {
-        acceptanceCriteriaToggleError.value = t('criteria.saveError');
+        acceptanceCriteriaToggleError.value = t(
+            'ticketDetail.checklistSaveFailed',
+        );
     } finally {
         isPersistingAcceptanceCriteriaToggle.value = false;
     }
 };
 
+const onAcceptanceCriteriaCheckboxChange = async (
+    index: number,
+    event: Event,
+): Promise<void> => {
+    const target = event.target;
+
+    if (!(target instanceof HTMLInputElement)) {
+        return;
+    }
+
+    await persistAcceptanceCriteriaToggle(index, target.checked);
+    target.checked = savedAcceptanceCriteria.value[index]?.checked ?? false;
+};
+
 const submit = (): void => {
     if (
         !props.canEditTicket ||
@@ -231,7 +246,7 @@ const submit = (): void => {
         return;
     }
 
-    form.acceptance_criteria = acceptanceCriteriaItems.value;
+    form.acceptance_criteria = buildAcceptanceCriteriaForSubmit();
 
     protection.submit(
         ProjectTicketController.update({
@@ -244,7 +259,7 @@ const submit = (): void => {
                 savedAcceptanceCriteria.value = normalizeAcceptanceCriteria(
                     props.ticket.acceptance_criteria,
                 );
-                acceptanceCriteriaItems.value = normalizeAcceptanceCriteria(
+                acceptanceCriteriaChecklist.value = formatChecklistLines(
                     savedAcceptanceCriteria.value,
                 );
                 Object.assign(form, savedFormData());
@@ -286,29 +301,85 @@ const submit = (): void => {
                 </CardContent>
             </Card>
         </section>
-        <div id="ticket-checklist" class="scroll-mt-6">
-            <AcceptanceCriteriaChecklist
-                :model-value="savedAcceptanceCriteria"
-                :readonly="!canEditTicket"
-                :disabled="
-                    form.processing ||
-                    isPersistingAcceptanceCriteriaToggle ||
-                    hasUnsavedAcceptanceCriteriaDraft
-                "
-                :saving="
-                    form.processing || isPersistingAcceptanceCriteriaToggle
-                "
-                :allow-editing="false"
-                persist-toggles
-                :dirty="hasUnsavedAcceptanceCriteriaDraft"
-                :error="acceptanceCriteriaToggleError"
-                @toggle="persistAcceptanceCriteriaToggle"
-            />
-        </div>
+        <section
+            id="ticket-checklist"
+            aria-labelledby="ticket-checklist-title"
+            class="scroll-mt-6"
+        >
+            <Card>
+                <CardHeader
+                    ><h2
+                        id="ticket-checklist-title"
+                        class="text-lg font-semibold"
+                    >
+                        {{ t('ticketDetail.checklist') }}
+                    </h2></CardHeader
+                >
+                <CardContent class="space-y-3">
+                    <div
+                        v-if="acceptanceCriteriaPreviewItems.length > 0"
+                        class="border-border rounded-xl border p-4 text-sm"
+                    >
+                        <ul class="space-y-2">
+                            <li
+                                v-for="(
+                                    item, index
+                                ) in acceptanceCriteriaPreviewItems"
+                                :key="item.id ?? index"
+                                :style="{
+                                    marginInlineStart: `${item.indent * 0.75}rem`,
+                                }"
+                                class="flex min-w-0 items-start gap-2"
+                            >
+                                <input
+                                    :id="`acceptance-criteria-${item.id ?? index}`"
+                                    :checked="item.checked"
+                                    type="checkbox"
+                                    :disabled="
+                                        !canEditTicket ||
+                                        form.processing ||
+                                        isPersistingAcceptanceCriteriaToggle ||
+                                        hasUnsavedAcceptanceCriteriaDraft
+                                    "
+                                    class="border-input text-primary focus:ring-ring mt-3.5 size-4 shrink-0 rounded"
+                                    @change="
+                                        onAcceptanceCriteriaCheckboxChange(
+                                            index,
+                                            $event,
+                                        )
+                                    "
+                                />
+                                <label
+                                    :for="`acceptance-criteria-${item.id ?? index}`"
+                                    class="min-h-control wrap-anywhere flex min-w-0 flex-1 items-center py-2"
+                                >
+                                    {{ item.text }}
+                                </label>
+                            </li>
+                        </ul>
+                    </div>
+                    <p v-else class="text-muted-foreground text-sm">
+                        {{ t('ticketDetail.noChecklist') }}
+                    </p>
+                    <p
+                        v-if="hasUnsavedAcceptanceCriteriaDraft"
+                        class="text-muted-foreground text-sm"
+                    >
+                        {{ t('ticketDetail.saveChecklistFirst') }}
+                    </p>
+                    <p
+                        v-if="acceptanceCriteriaToggleError"
+                        role="alert"
+                        class="text-destructive text-sm"
+                    >
+                        {{ acceptanceCriteriaToggleError }}
+                    </p>
+                </CardContent>
+            </Card>
+        </section>
         <details
             v-if="canEditTicket"
             id="ticket-edit"
-            ref="editor"
             class="bg-card group rounded-xl border shadow-sm"
         >
             <summary
@@ -345,13 +416,20 @@ const submit = (): void => {
                         "
                     >
                         <template #content>
-                            <AcceptanceCriteriaChecklist
-                                v-model="acceptanceCriteriaItems"
+                            <TicketFormField
+                                id="acceptance_criteria_checklist"
+                                v-model="acceptanceCriteriaChecklist"
+                                kind="textarea"
+                                :label="t('ticketDetail.checklistEditor')"
+                                :hint="t('ticketForm.checklistHelp')"
+                                :placeholder="
+                                    t('ticketDetail.checklistPlaceholder')
+                                "
+                                :error="acceptanceCriteriaError"
                                 :disabled="
                                     form.processing ||
                                     isPersistingAcceptanceCriteriaToggle
                                 "
-                                :error="acceptanceCriteriaError"
                             />
                         </template>
                         <template #metadata>
@@ -381,6 +459,44 @@ const submit = (): void => {
                             />
                         </template>
                     </TicketFormFields>
+                    <fieldset
+                        class="grid min-w-0 gap-4 rounded-xl border p-4 sm:p-5"
+                        :disabled="
+                            form.processing ||
+                            isPersistingAcceptanceCriteriaToggle
+                        "
+                    >
+                        <legend class="px-2 text-sm font-semibold">
+                            {{ t('ticketForm.blocker') }}
+                        </legend>
+                        <div class="min-h-control flex items-center gap-3">
+                            <input
+                                id="is_blocked"
+                                v-model="form.is_blocked"
+                                type="checkbox"
+                                :aria-invalid="Boolean(form.errors.is_blocked)"
+                                aria-describedby="is_blocked-error"
+                                class="border-input text-primary focus-visible:ring-ring size-4 rounded focus-visible:ring-2"
+                            />
+                            <Label for="is_blocked">{{
+                                t('ticketDetail.blocked')
+                            }}</Label>
+                        </div>
+                        <InputError
+                            id="is_blocked-error"
+                            :message="form.errors.is_blocked"
+                        />
+                        <TicketFormField
+                            id="blocked_comment"
+                            v-model="form.blocked_comment"
+                            kind="textarea"
+                            :rows="3"
+                            :label="t('ticketDetail.blockerComment')"
+                            :placeholder="t('ticketDetail.blockerPlaceholder')"
+                            :error="form.errors.blocked_comment"
+                            :required="form.is_blocked"
+                        />
+                    </fieldset>
                     <fieldset
                         class="grid min-w-0 gap-4 rounded-xl border p-4 sm:p-5"
                         :disabled="

resources/js/components/tickets/detail/TicketDetailGit.vue

@@ -1,12 +1,273 @@
 <script setup lang="ts">
-import TicketGitBranches from '@/components/tickets/detail/TicketGitBranches.vue';
-import TicketGitPullRequests from '@/components/tickets/detail/TicketGitPullRequests.vue';
 import { useLocalization } from '@/composables/useLocalization';
-import type { TicketDetailGitProps } from '@/types/ticket-detail';
-
-defineProps<TicketDetailGitProps>();
+import {
+    Card,
+    CardContent,
+    CardDescription,
+    CardHeader,
+    CardTitle,
+} from '@/components/ui/card';
 
+import { Link, useForm, usePage } from '@inertiajs/vue3';
+import { CheckCircle2, GitBranchPlus, XCircle } from 'lucide-vue-next';
+import { computed, ref, watch } from 'vue';
+import ProjectTicketBranchController from '@/actions/App/Http/Controllers/ProjectTicketBranchController';
+import FormFeedback from '@/components/FormFeedback.vue';
+import FeedbackState from '@/components/FeedbackState.vue';
+import InputError from '@/components/InputError.vue';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import {
+    Dialog,
+    DialogContent,
+    DialogDescription,
+    DialogFooter,
+    DialogHeader,
+    DialogTitle,
+} from '@/components/ui/dialog';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { useFormProtection } from '@/composables/useFormProtection';
+import { edit as editGitConnections } from '@/routes/git-connections';
+import type { BranchNameValidationModel } from '@/types/models/branch-name-validation-model';
+import type { RepositoryConnectionModel } from '@/types/models/repository-connection-model';
+import type {
+    TicketDetailGitProps,
+    TicketBranchFormData,
+} from '@/types/ticket-detail';
+const props = defineProps<TicketDetailGitProps>();
 const { t } = useLocalization();
+const appName = String(usePage().props.name);
+const draftKey = `projects:${props.project.id}:tickets:${props.ticket.id}:edit`;
+const visibleRepositoryBranches = computed(() =>
+    props.repositoryBranches.filter(
+        (repositoryBranch) =>
+            repositoryBranch.branches.length > 0 ||
+            repositoryBranch.error !== null ||
+            !repositoryBranch.repository_connection.has_personal_access,
+    ),
+);
+
+const visibleRepositoryPullRequests = computed(() =>
+    props.repositoryPullRequests.filter(
+        (repositoryPullRequest) =>
+            repositoryPullRequest.pull_requests.length > 0 ||
+            repositoryPullRequest.error !== null ||
+            !repositoryPullRequest.repository_connection.has_personal_access,
+    ),
+);
+
+const linkedRepositoryConnections = computed<RepositoryConnectionModel[]>(() =>
+    props.repositoryBranches.map(
+        (repositoryBranch) => repositoryBranch.repository_connection,
+    ),
+);
+
+const canCreateBranches = computed(
+    () => props.canEditTicket && linkedRepositoryConnections.value.length > 0,
+);
+const defaultBranchRepositoryConnectionId = computed(() =>
+    String(
+        linkedRepositoryConnections.value.find(
+            (repositoryConnection) => repositoryConnection.has_personal_access,
+        )?.id ??
+            linkedRepositoryConnections.value[0]?.id ??
+            '',
+    ),
+);
+
+const isCreateBranchDialogOpen = ref(false);
+const isCheckingBranchName = ref(false);
+const branchNameValidation = ref<BranchNameValidationModel | null>(null);
+
+const branchCreationForm = useForm<TicketBranchFormData>(`${draftKey}:branch`, {
+    branch_name: props.suggestedBranchName,
+    repository_connection_id: defaultBranchRepositoryConnectionId.value,
+});
+const branchProtection = useFormProtection(branchCreationForm, {
+    isDirty: () => isCreateBranchDialogOpen.value && branchCreationForm.isDirty,
+});
+
+const updateBranchDialogOpen = (open: boolean): void => {
+    if (!open && !branchProtection.confirmLeave()) {
+        return;
+    }
+    isCreateBranchDialogOpen.value = open;
+};
+
+const selectedBranchRepositoryConnection = computed(
+    (): RepositoryConnectionModel | null =>
+        linkedRepositoryConnections.value.find(
+            (repositoryConnection) =>
+                String(repositoryConnection.id) ===
+                branchCreationForm.repository_connection_id,
+        ) ?? null,
+);
+
+const selectedBranchRepositoryHasPersonalAccess = computed(
+    () =>
+        selectedBranchRepositoryConnection.value?.has_personal_access ?? false,
+);
+
+const initializeBranchCreationForm = (): void => {
+    if (branchCreationForm.isDirty) {
+        return;
+    }
+    branchCreationForm.clearErrors();
+    branchCreationForm.branch_name = props.suggestedBranchName;
+    branchCreationForm.repository_connection_id =
+        defaultBranchRepositoryConnectionId.value;
+    branchNameValidation.value = null;
+    isCheckingBranchName.value = false;
+};
+
+watch(
+    () => isCreateBranchDialogOpen.value,
+    (isOpen) => {
+        if (!isOpen) {
+            branchCreationForm.clearErrors();
+            branchNameValidation.value = null;
+            isCheckingBranchName.value = false;
+
+            return;
+        }
+
+        initializeBranchCreationForm();
+    },
+);
+
+watch(
+    [
+        () => isCreateBranchDialogOpen.value,
+        () => branchCreationForm.repository_connection_id,
+        () => branchCreationForm.branch_name,
+    ],
+    (
+        [isOpen, repositoryConnectionId, branchName],
+        _previousValues,
+        onCleanup,
+    ) => {
+        if (!isOpen) {
+            return;
+        }
+
+        const repositoryConnection = selectedBranchRepositoryConnection.value;
+
+        if (repositoryConnection === null || repositoryConnectionId === '') {
+            branchNameValidation.value = null;
+            isCheckingBranchName.value = false;
+
+            return;
+        }
+
+        if (!repositoryConnection.has_personal_access) {
+            branchNameValidation.value = {
+                is_valid: false,
+                message: t('ticketDetail.connectGitFirst'),
+            };
+            isCheckingBranchName.value = false;
+
+            return;
+        }
+
+        if (branchName.trim() === '') {
+            branchNameValidation.value = {
+                is_valid: false,
+                message: t('ticketDetail.branchRequired'),
+            };
+            isCheckingBranchName.value = false;
+
+            return;
+        }
+
+        const abortController = new AbortController();
+        const timeoutId = window.setTimeout(async () => {
+            isCheckingBranchName.value = true;
+
+            try {
+                const response = await fetch(
+                    ProjectTicketBranchController.validate.url(
+                        {
+                            project: props.project.id,
+                            ticket: props.ticket.id,
+                        },
+                        {
+                            query: {
+                                branch_name: branchName,
+                                repository_connection_id:
+                                    repositoryConnectionId,
+                            },
+                        },
+                    ),
+                    {
+                        credentials: 'same-origin',
+                        headers: {
+                            Accept: 'application/json',
+                            'X-Requested-With': 'XMLHttpRequest',
+                        },
+                        method: 'GET',
+                        signal: abortController.signal,
+                    },
+                );
+
+                if (!response.ok) {
+                    throw new Error('Branch validation failed.');
+                }
+
+                branchNameValidation.value =
+                    (await response.json()) as BranchNameValidationModel;
+            } catch (error) {
+                if (
+                    error instanceof DOMException &&
+                    error.name === 'AbortError'
+                ) {
+                    return;
+                }
+
+                branchNameValidation.value = {
+                    is_valid: false,
+                    message: t('ticketDetail.branchValidationFailed', {
+                        app: appName,
+                    }),
+                };
+            } finally {
+                if (!abortController.signal.aborted) {
+                    isCheckingBranchName.value = false;
+                }
+            }
+        }, 300);
+
+        onCleanup(() => {
+            abortController.abort();
+            window.clearTimeout(timeoutId);
+            isCheckingBranchName.value = false;
+        });
+    },
+    { immediate: true },
+);
+
+const submitBranchCreation = (): void => {
+    if (
+        !canCreateBranches.value ||
+        !selectedBranchRepositoryHasPersonalAccess.value ||
+        branchNameValidation.value?.is_valid !== true
+    ) {
+        return;
+    }
+
+    branchProtection.submit(
+        ProjectTicketBranchController.store({
+            project: props.project.id,
+            ticket: props.ticket.id,
+        }),
+        {
+            onSuccess: () => {
+                isCreateBranchDialogOpen.value = false;
+            },
+            preserveScroll: true,
+        },
+    );
+};
 </script>
 
 <template>
@@ -18,18 +279,380 @@ const { t } = useLocalization();
         <h2 id="ticket-git-title" class="text-lg font-semibold">
             {{ t('ticketDetail.git') }}
         </h2>
-
         <div class="grid min-w-0 gap-6">
-            <TicketGitBranches
-                :ticket="ticket"
-                :project="project"
-                :can-edit-ticket="canEditTicket"
-                :repository-branches="repositoryBranches"
-                :suggested-branch-name="suggestedBranchName"
-            />
-            <TicketGitPullRequests
-                :repository-pull-requests="repositoryPullRequests"
-            />
+            <Card class="h-fit">
+                <CardHeader
+                    class="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between"
+                >
+                    <div class="space-y-1.5">
+                        <CardTitle>{{ t('ticketDetail.branches') }}</CardTitle>
+                        <CardDescription>{{
+                            t('ticketDetail.branchesDescription')
+                        }}</CardDescription>
+                    </div>
+
+                    <Dialog
+                        :open="isCreateBranchDialogOpen"
+                        @update:open="updateBranchDialogOpen"
+                    >
+                        <Button
+                            v-if="canCreateBranches"
+                            type="button"
+                            variant="outline"
+                            class="gap-2"
+                            @click="isCreateBranchDialogOpen = true"
+                        >
+                            <GitBranchPlus class="size-4" />{{
+                                t('ticketDetail.createBranch')
+                            }}</Button
+                        >
+
+                        <DialogContent class="sm:max-w-lg">
+                            <DialogHeader class="space-y-3">
+                                <DialogTitle>{{
+                                    t('ticketDetail.createBranchTitle')
+                                }}</DialogTitle>
+                                <DialogDescription>{{
+                                    t('ticketDetail.createBranchDescription')
+                                }}</DialogDescription>
+                            </DialogHeader>
+
+                            <form
+                                class="grid gap-4"
+                                @submit.prevent="submitBranchCreation"
+                            >
+                                <FormFeedback
+                                    :state="branchProtection.state.value"
+                                    @retry="submitBranchCreation"
+                                />
+                                <div class="grid min-w-0 gap-2">
+                                    <Label for="repository_connection_id">{{
+                                        t('ticketDetail.repository')
+                                    }}</Label>
+                                    <select
+                                        id="repository_connection_id"
+                                        v-model="
+                                            branchCreationForm.repository_connection_id
+                                        "
+                                        :disabled="
+                                            branchCreationForm.processing
+                                        "
+                                        class="min-h-control border-input bg-background shadow-xs focus-visible:border-ring focus-visible:ring-ring/50 w-full min-w-0 rounded-md border px-3 py-2 text-sm outline-none transition-[color,box-shadow] focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-60"
+                                    >
+                                        <option
+                                            v-for="repositoryConnection in linkedRepositoryConnections"
+                                            :key="repositoryConnection.id"
+                                            :value="
+                                                String(repositoryConnection.id)
+                                            "
+                                        >
+                                            {{
+                                                `${repositoryConnection.repository_full_name}${repositoryConnection.has_personal_access ? '' : ' (connect personal Git access)'}`
+                                            }}
+                                        </option>
+                                    </select>
+                                    <InputError
+                                        :message="
+                                            branchCreationForm.errors
+                                                .repository_connection_id
+                                        "
+                                    />
+                                </div>
+
+                                <div class="grid min-w-0 gap-2">
+                                    <Label for="branch_name">{{
+                                        t('ticketDetail.branchName')
+                                    }}</Label>
+                                    <Input
+                                        id="branch_name"
+                                        v-model="branchCreationForm.branch_name"
+                                        :disabled="
+                                            branchCreationForm.processing ||
+                                            !selectedBranchRepositoryHasPersonalAccess
+                                        "
+                                    />
+                                    <InputError
+                                        :message="
+                                            branchCreationForm.errors
+                                                .branch_name
+                                        "
+                                    />
+                                </div>
+
+                                <div
+                                    class="rounded-xl border px-4 py-3"
+                                    :class="
+                                        branchNameValidation?.is_valid
+                                            ? 'border-emerald-200 bg-emerald-50 text-emerald-900 dark:border-emerald-900/70 dark:bg-emerald-950/40 dark:text-emerald-100'
+                                            : 'border-amber-200 bg-amber-50 text-amber-900 dark:border-amber-900/70 dark:bg-amber-950/40 dark:text-amber-100'
+                                    "
+                                >
+                                    <div class="flex items-start gap-3">
+                                        <CheckCircle2
+                                            v-if="
+                                                branchNameValidation?.is_valid
+                                            "
+                                            class="mt-0.5 size-4 shrink-0"
+                                        />
+                                        <XCircle
+                                            v-else-if="
+                                                branchNameValidation !== null
+                                            "
+                                            class="mt-0.5 size-4 shrink-0"
+                                        />
+                                        <p class="text-sm">
+                                            {{
+                                                isCheckingBranchName
+                                                    ? t(
+                                                          'ticketDetail.checkingBranch',
+                                                      )
+                                                    : (branchNameValidation?.message ??
+                                                      t(
+                                                          'ticketDetail.selectRepository',
+                                                      ))
+                                            }}
+                                        </p>
+                                    </div>
+                                </div>
+
+                                <div
+                                    v-if="
+                                        !selectedBranchRepositoryHasPersonalAccess &&
+                                        selectedBranchRepositoryConnection !==
+                                            null
+                                    "
+                                    class="border-border rounded-xl border border-dashed px-4 py-4"
+                                >
+                                    <p class="text-muted-foreground text-sm">
+                                        {{ t('ticketDetail.branchAccess') }}
+                                    </p>
+
+                                    <Button
+                                        as-child
+                                        variant="outline"
+                                        size="sm"
+                                        class="mt-3"
+                                    >
+                                        <Link :href="editGitConnections()">{{
+                                            t('ticketDetail.openGitConnections')
+                                        }}</Link>
+                                    </Button>
+                                </div>
+
+                                <DialogFooter class="gap-2">
+                                    <Button
+                                        type="button"
+                                        variant="secondary"
+                                        @click="updateBranchDialogOpen(false)"
+                                        >{{ t('common.cancel') }}</Button
+                                    >
+
+                                    <Button
+                                        type="submit"
+                                        :disabled="
+                                            branchCreationForm.processing ||
+                                            isCheckingBranchName ||
+                                            branchNameValidation?.is_valid !==
+                                                true
+                                        "
+                                        >{{
+                                            t('ticketDetail.createNow')
+                                        }}</Button
+                                    >
+                                </DialogFooter>
+                            </form>
+                        </DialogContent>
+                    </Dialog>
+                </CardHeader>
+
+                <CardContent class="space-y-4">
+                    <FeedbackState
+                        v-if="visibleRepositoryBranches.length === 0"
+                        state="empty"
+                        :title="t('tickets.noBranches')"
+                        :description="t('tickets.noBranchesDescription')"
+                    />
+
+                    <div v-else class="space-y-3">
+                        <div
+                            v-for="repositoryBranch in visibleRepositoryBranches"
+                            :key="repositoryBranch.repository_connection.id"
+                            class="border-border rounded-xl border px-4 py-4"
+                        >
+                            <div class="flex flex-wrap items-center gap-2">
+                                <Badge variant="secondary">
+                                    {{
+                                        repositoryBranch.repository_connection
+                                            .provider_label
+                                    }}
+                                </Badge>
+                                <span class="font-medium">
+                                    {{
+                                        repositoryBranch.repository_connection
+                                            .repository_full_name
+                                    }}
+                                </span>
+                            </div>
+
+                            <p class="text-muted-foreground mt-2 text-sm">
+                                {{
+                                    repositoryBranch.repository_connection
+                                        .base_url
+                                }}
+                            </p>
+
+                            <div
+                                v-if="
+                                    !repositoryBranch.repository_connection
+                                        .has_personal_access
+                                "
+                                class="mt-3 space-y-3"
+                            >
+                                <p class="text-muted-foreground text-sm">
+                                    {{ t('ticketDetail.inspectBranches') }}
+                                </p>
+
+                                <Button as-child variant="outline" size="sm">
+                                    <Link :href="editGitConnections()">{{
+                                        t('ticketDetail.openGitConnections')
+                                    }}</Link>
+                                </Button>
+                            </div>
+
+                            <div
+                                v-else-if="repositoryBranch.error"
+                                class="mt-3 rounded-xl border border-amber-200 bg-amber-50 px-4 py-3 text-sm text-amber-900 dark:border-amber-900/70 dark:bg-amber-950/40 dark:text-amber-100"
+                            >
+                                {{ repositoryBranch.error }}
+                            </div>
+
+                            <div v-else class="mt-3 flex flex-wrap gap-2">
+                                <Badge
+                                    v-for="branch in repositoryBranch.branches"
+                                    :key="branch.name"
+                                    variant="outline"
+                                    class="px-3 py-1"
+                                >
+                                    {{ branch.name }}
+                                </Badge>
+                            </div>
+                        </div>
+                    </div>
+                </CardContent>
+            </Card>
+
+            <Card class="h-fit">
+                <CardHeader>
+                    <CardTitle>{{ t('ticketDetail.pullRequests') }}</CardTitle>
+                    <CardDescription>{{
+                        t('ticketDetail.pullRequestsDescription')
+                    }}</CardDescription>
+                </CardHeader>
+
+                <CardContent class="space-y-4">
+                    <FeedbackState
+                        v-if="visibleRepositoryPullRequests.length === 0"
+                        state="empty"
+                        :title="t('tickets.noPullRequests')"
+                        :description="t('tickets.noPullRequestsDescription')"
+                    />
+
+                    <div v-else class="space-y-3">
+                        <div
+                            v-for="repositoryPullRequest in visibleRepositoryPullRequests"
+                            :key="
+                                repositoryPullRequest.repository_connection.id
+                            "
+                            class="border-border rounded-xl border px-4 py-4"
+                        >
+                            <div class="flex flex-wrap items-center gap-2">
+                                <Badge variant="secondary">
+                                    {{
+                                        repositoryPullRequest
+                                            .repository_connection
+                                            .provider_label
+                                    }}
+                                </Badge>
+                                <span class="font-medium">
+                                    {{
+                                        repositoryPullRequest
+                                            .repository_connection
+                                            .repository_full_name
+                                    }}
+                                </span>
+                            </div>
+
+                            <p class="text-muted-foreground mt-2 text-sm">
+                                {{
+                                    repositoryPullRequest.repository_connection
+                                        .base_url
+                                }}
+                            </p>
+
+                            <div
+                                v-if="
+                                    !repositoryPullRequest.repository_connection
+                                        .has_personal_access
+                                "
+                                class="mt-3 space-y-3"
+                            >
+                                <p class="text-muted-foreground text-sm">
+                                    {{ t('ticketDetail.inspectPullRequests') }}
+                                </p>
+
+                                <Button as-child variant="outline" size="sm">
+                                    <Link :href="editGitConnections()">{{
+                                        t('ticketDetail.openGitConnections')
+                                    }}</Link>
+                                </Button>
+                            </div>
+
+                            <div
+                                v-else-if="repositoryPullRequest.error"
+                                class="mt-3 rounded-xl border border-amber-200 bg-amber-50 px-4 py-3 text-sm text-amber-900 dark:border-amber-900/70 dark:bg-amber-950/40 dark:text-amber-100"
+                            >
+                                {{ repositoryPullRequest.error }}
+                            </div>
+
+                            <div v-else class="mt-3 space-y-3">
+                                <div
+                                    v-for="pullRequest in repositoryPullRequest.pull_requests"
+                                    :key="pullRequest.html_url"
+                                    class="border-border/70 rounded-xl border px-4 py-3"
+                                >
+                                    <div
+                                        class="flex flex-wrap items-center gap-2"
+                                    >
+                                        <Badge variant="outline">
+                                            #{{ pullRequest.number }}
+                                        </Badge>
+                                        <Badge variant="secondary">
+                                            {{ pullRequest.status }}
+                                        </Badge>
+                                        <a
+                                            :href="pullRequest.html_url"
+                                            target="_blank"
+                                            rel="noreferrer"
+                                            class="text-foreground hover:text-primary font-medium transition"
+                                        >
+                                            {{ pullRequest.title }}
+                                        </a>
+                                    </div>
+                                    <p
+                                        class="text-muted-foreground mt-2 text-sm"
+                                    >
+                                        {{
+                                            t('ticketDetail.sourceBranch', {
+                                                name: pullRequest.source_branch,
+                                            })
+                                        }}
+                                    </p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </CardContent>
+            </Card>
         </div>
     </section>
 </template>

resources/js/components/tickets/detail/TicketDetailHeader.vue

@@ -15,7 +15,6 @@ const sections = [
     'description',
     'checklist',
     'metadata',
-    'blocker',
     'relationships',
     'history',
     'git',

resources/js/components/tickets/detail/TicketDetailHistory.vue

@@ -8,21 +8,11 @@ import {
 } from '@/components/ui/card';
 
 import { Badge } from '@/components/ui/badge';
-import { UserAvatar } from '@/components/ui/avatar';
 import type { TicketDetailHistoryProps } from '@/types/ticket-detail';
-import type { TranslationKey } from '@/types/localization';
-import type { TicketWorklogEntryType } from '@/types/models/ticket-worklog-entry-model';
 defineProps<TicketDetailHistoryProps>();
 const { t, date } = useLocalization();
 const formatDateTime = (value: string): string =>
     date(new Date(value), { dateStyle: 'medium', timeStyle: 'short' });
-const entryTypeLabels: Record<TicketWorklogEntryType, TranslationKey> = {
-    created: 'ticketDetail.historyType.created',
-    link_removed: 'ticketDetail.historyType.linkRemoved',
-    link_updated: 'ticketDetail.historyType.linkUpdated',
-    status_changed: 'ticketDetail.historyType.statusChanged',
-    updated: 'ticketDetail.historyType.updated',
-};
 </script>
 
 <template>
@@ -49,70 +39,31 @@ const entryTypeLabels: Record<TicketWorklogEntryType, TranslationKey> = {
                     {{ t('ticketDetail.noHistory') }}
                 </div>
 
-                <ol v-else class="relative grid gap-0" role="list">
-                    <li
+                <div v-else class="flex flex-col gap-4">
+                    <div
                         v-for="worklogEntry in ticket.worklog_entries"
                         :key="worklogEntry.id"
-                        class="border-border relative grid min-w-0 grid-cols-[2.5rem_minmax(0,1fr)] gap-3 border-l pb-6 last:border-transparent last:pb-0 sm:grid-cols-[3rem_minmax(0,1fr)] sm:gap-4"
+                        class="border-border rounded-xl border px-4 py-4"
                     >
-                        <div
-                            class="bg-card relative -left-px flex size-10 -translate-x-1/2 items-center justify-center rounded-full sm:size-12"
-                        >
-                            <UserAvatar
-                                v-if="worklogEntry.actor"
-                                :user="worklogEntry.actor"
-                                size="lg"
-                            />
-                            <span
-                                v-else
-                                aria-hidden="true"
-                                class="bg-muted text-muted-foreground flex size-10 items-center justify-center rounded-full border text-sm font-semibold"
-                            >
-                                S
+                        <div class="flex flex-wrap items-center gap-2">
+                            <Badge variant="outline">
+                                {{ worklogEntry.entry_type }}
+                            </Badge>
+                            <span class="text-foreground text-sm font-medium">
+                                {{
+                                    worklogEntry.actor?.name ??
+                                    t('ticketDetail.system')
+                                }}
                             </span>
                         </div>
-                        <article
-                            class="bg-muted/20 min-w-0 rounded-xl border p-4"
-                        >
-                            <div
-                                class="flex min-w-0 flex-col gap-2 sm:flex-row sm:items-start sm:justify-between"
-                            >
-                                <div
-                                    class="flex min-w-0 flex-wrap items-center gap-2"
-                                >
-                                    <span
-                                        class="text-foreground text-sm font-semibold"
-                                    >
-                                        {{
-                                            worklogEntry.actor?.name ??
-                                            t('ticketDetail.system')
-                                        }}
-                                    </span>
-                                    <Badge variant="outline">
-                                        {{
-                                            t(
-                                                entryTypeLabels[
-                                                    worklogEntry.entry_type
-                                                ],
-                                            )
-                                        }}
-                                    </Badge>
-                                </div>
-                                <time
-                                    :datetime="worklogEntry.created_at"
-                                    class="text-muted-foreground shrink-0 text-xs"
-                                >
-                                    {{
-                                        formatDateTime(worklogEntry.created_at)
-                                    }}
-                                </time>
-                            </div>
-                            <p class="text-foreground mt-3 text-sm leading-6">
-                                {{ worklogEntry.summary }}
-                            </p>
-                        </article>
-                    </li>
-                </ol>
+                        <p class="text-foreground mt-3 text-sm">
+                            {{ worklogEntry.summary }}
+                        </p>
+                        <p class="text-muted-foreground mt-2 text-xs">
+                            {{ formatDateTime(worklogEntry.created_at) }}
+                        </p>
+                    </div>
+                </div>
             </CardContent>
         </Card>
     </section>

resources/js/components/tickets/detail/TicketDetailRelationships.vue

@@ -1,76 +1,33 @@
 <script setup lang="ts">
-import { Link, useForm } from '@inertiajs/vue3';
-import { ArrowRight, GitFork, Link2, Plus } from 'lucide-vue-next';
-import { computed, nextTick, useTemplateRef } from 'vue';
-import { store } from '@/actions/App/Http/Controllers/ProjectTicketLinkController';
-import FormFeedback from '@/components/FormFeedback.vue';
+import { useLocalization } from '@/composables/useLocalization';
+import {
+    Card,
+    CardContent,
+    CardDescription,
+    CardHeader,
+    CardTitle,
+} from '@/components/ui/card';
+
+import { Form, Link } from '@inertiajs/vue3';
+import { computed } from 'vue';
+import ProjectTicketLinkController from '@/actions/App/Http/Controllers/ProjectTicketLinkController';
+import InputError from '@/components/InputError.vue';
 import TicketTreeList from '@/components/TicketTreeList.vue';
-import TicketFormField from '@/components/tickets/TicketFormField.vue';
-import TicketRelationshipLink from '@/components/tickets/detail/TicketRelationshipLink.vue';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
-import { Card, CardContent, CardHeader } from '@/components/ui/card';
-import { useFormProtection } from '@/composables/useFormProtection';
-import { useLocalization } from '@/composables/useLocalization';
+import { Label } from '@/components/ui/label';
 import { show as showTicket } from '@/routes/projects/tickets';
 import type { TicketDetailRelationshipsProps } from '@/types/ticket-detail';
-
 const props = defineProps<TicketDetailRelationshipsProps>();
-defineEmits<{ editParent: [] }>();
 const { t } = useLocalization();
-const linksHeading = useTemplateRef<HTMLHeadingElement>('linksHeading');
 const currentParentTicket = computed(
     () =>
         props.ticket.parent_ticket ??
         props.parentTicketOptions.find(
-            (parent) => parent.id === props.ticket.parent_ticket_id,
+            (parentTicket) => parentTicket.id === props.ticket.parent_ticket_id,
         ) ??
         null,
 );
-const canAddLink = computed(
-    () =>
-        props.canEditTicket &&
-        props.ticketLinkTypes.length > 0 &&
-        props.ticketLinkOptions.length > 0,
-);
-const form = useForm({
-    ticket_link_type_id: props.ticketLinkTypes[0]?.id ?? '',
-    linked_ticket_id: '',
-});
-const protection = useFormProtection(form, {
-    isDirty: () => props.canEditTicket && form.isDirty,
-});
-const selectedType = computed(() =>
-    props.ticketLinkTypes.find(
-        (type) => String(type.id) === String(form.ticket_link_type_id),
-    ),
-);
-const selectedTicket = computed(() =>
-    props.ticketLinkOptions.find(
-        (ticket) => String(ticket.id) === String(form.linked_ticket_id),
-    ),
-);
-
-async function focusLinks(): Promise<void> {
-    await nextTick();
-    linksHeading.value?.focus();
-}
-function submit(): void {
-    if (!canAddLink.value) {
-        return;
-    }
-    protection.submit(
-        store({ project: props.project.id, ticket: props.ticket.id }),
-        {
-            preserveScroll: true,
-            onSuccess: () => {
-                form.linked_ticket_id = '';
-                form.clearErrors();
-                void focusLinks();
-            },
-        },
-    );
-}
 </script>
 
 <template>
@@ -82,223 +39,184 @@ function submit(): void {
         <h2 id="ticket-relationships-title" class="text-lg font-semibold">
             {{ t('ticketDetail.relationships') }}
         </h2>
-        <Card class="min-w-0 gap-5 overflow-hidden">
-            <CardHeader
-                class="flex flex-wrap items-center justify-between gap-3"
-            >
-                <h3 class="flex items-center gap-2 font-semibold">
-                    <GitFork class="text-primary size-5" aria-hidden="true" />{{
-                        t('ticketRelationships.hierarchy')
-                    }}
-                </h3>
-                <Button
-                    v-if="canEditTicket"
-                    type="button"
-                    variant="outline"
-                    size="sm"
-                    @click="$emit('editParent')"
-                    >{{ t('ticketRelationships.editParent') }}</Button
-                >
+        <Card v-if="ticket.ticket_type?.is_parent" class="h-fit">
+            <CardHeader>
+                <CardTitle>{{ t('ticketDetail.children') }}</CardTitle>
+                <CardDescription>{{
+                    t('ticketDetail.childrenDescription')
+                }}</CardDescription>
             </CardHeader>
-            <CardContent class="grid min-w-0 gap-5">
-                <div class="grid min-w-0 gap-2">
-                    <h4
-                        class="text-muted-foreground text-xs font-semibold uppercase tracking-wide"
-                    >
-                        {{ t('ticketDetail.parent') }}
-                    </h4>
-                    <Link
-                        v-if="currentParentTicket"
-                        :href="
-                            showTicket({
-                                project: project.id,
-                                ticket: currentParentTicket.id,
-                            })
-                        "
-                        class="border-primary/20 bg-primary/5 hover:border-primary focus-visible:ring-ring/35 group grid min-w-0 gap-2 rounded-xl border p-4 outline-none transition-colors focus-visible:ring-2"
-                    >
-                        <span
-                            class="text-primary font-mono text-xs font-semibold"
-                            >{{ currentParentTicket.ticket_key }}</span
-                        >
-                        <span
-                            class="group-hover:text-primary text-sm font-medium"
-                            >{{ currentParentTicket.title }}</span
-                        >
-                    </Link>
-                    <p
-                        v-else
-                        class="text-muted-foreground rounded-xl border border-dashed p-4 text-sm"
-                    >
-                        {{ t('ticketDetail.noParent') }}
-                    </p>
-                    <p
-                        v-if="canEditTicket"
-                        class="text-muted-foreground text-xs"
-                    >
-                        {{ t('ticketRelationships.parentHelp') }}
-                    </p>
-                </div>
+
+            <CardContent>
                 <div
-                    v-if="ticket.ticket_type?.is_parent"
-                    class="grid min-w-0 gap-3 border-t pt-5"
+                    v-if="childTicketTree.length === 0"
+                    class="border-border text-muted-foreground rounded-xl border border-dashed px-4 py-6 text-sm"
                 >
-                    <div class="flex flex-wrap items-center gap-2">
-                        <h4 class="text-sm font-semibold">
-                            {{ t('ticketDetail.children') }}
-                        </h4>
-                        <Badge variant="secondary">{{
-                            childTicketTree.length
-                        }}</Badge>
-                    </div>
-                    <p class="text-muted-foreground text-xs">
-                        {{ t('ticketRelationships.childrenHelp') }}
-                    </p>
-                    <p
-                        v-if="childTicketTree.length === 0"
-                        class="text-muted-foreground rounded-xl border border-dashed p-4 text-sm"
-                    >
-                        {{ t('ticketDetail.noChildren') }}
-                    </p>
-                    <TicketTreeList
-                        v-else
-                        :nodes="childTicketTree"
-                        :project-id="project.id"
-                    />
+                    {{ t('ticketDetail.noChildren') }}
                 </div>
+
+                <TicketTreeList
+                    v-else
+                    :nodes="childTicketTree"
+                    :project-id="project.id"
+                />
             </CardContent>
         </Card>
-        <Card class="min-w-0 gap-5 overflow-hidden">
+
+        <Card v-else-if="currentParentTicket !== null" class="h-fit">
             <CardHeader>
-                <h3
-                    ref="linksHeading"
-                    tabindex="-1"
-                    class="focus-visible:ring-ring/35 flex flex-wrap items-center gap-2 rounded-md font-semibold outline-none focus-visible:ring-2"
-                >
-                    <Link2 class="text-primary size-5" aria-hidden="true" />{{
-                        t('ticketDetail.linkedTickets')
-                    }}<Badge variant="secondary">{{
-                        linkedTickets.length
-                    }}</Badge>
-                </h3>
-                <p class="text-muted-foreground text-sm">
-                    {{ t('ticketDetail.linkedTicketsDescription') }}
-                </p>
+                <CardTitle>{{ t('ticketDetail.parent') }}</CardTitle>
+                <CardDescription>{{
+                    t('ticketDetail.parentDescription')
+                }}</CardDescription>
             </CardHeader>
-            <CardContent class="grid min-w-0 gap-5">
-                <p
+
+            <CardContent>
+                <Link
+                    :href="
+                        showTicket({
+                            project: project.id,
+                            ticket: currentParentTicket.id,
+                        })
+                    "
+                    class="border-border hover:border-primary/60 block rounded-xl border px-4 py-4 transition"
+                >
+                    <div class="font-medium">
+                        {{ currentParentTicket.ticket_key }}
+                    </div>
+                    <div class="text-muted-foreground mt-1 text-sm">
+                        {{ currentParentTicket.title }}
+                    </div>
+                </Link>
+            </CardContent>
+        </Card>
+
+        <Card class="h-fit">
+            <CardHeader>
+                <CardTitle>{{ t('ticketDetail.linkedTickets') }}</CardTitle>
+                <CardDescription>{{
+                    t('ticketDetail.linkedTicketsDescription')
+                }}</CardDescription>
+            </CardHeader>
+
+            <CardContent class="space-y-4">
+                <Form
+                    v-if="
+                        canEditTicket &&
+                        ticketLinkTypes.length > 0 &&
+                        ticketLinkOptions.length > 0
+                    "
+                    v-bind="
+                        ProjectTicketLinkController.store.form({
+                            project: project.id,
+                            ticket: ticket.id,
+                        })
+                    "
+                    class="border-border grid gap-4 rounded-xl border border-dashed p-4"
+                    v-slot="{ errors, processing }"
+                >
+                    <div class="grid min-w-0 gap-2">
+                        <Label for="ticket_link_type_id">{{
+                            t('ticketDetail.linkType')
+                        }}</Label>
+                        <select
+                            id="ticket_link_type_id"
+                            name="ticket_link_type_id"
+                            class="min-h-control border-input bg-background shadow-xs focus-visible:border-ring focus-visible:ring-ring/50 w-full min-w-0 rounded-md border px-3 py-2 text-sm outline-none transition-[color,box-shadow] focus-visible:ring-[3px]"
+                        >
+                            <option
+                                v-for="ticketLinkType in ticketLinkTypes"
+                                :key="ticketLinkType.id"
+                                :value="ticketLinkType.id"
+                            >
+                                {{ ticketLinkType.label }}
+                            </option>
+                        </select>
+                        <InputError :message="errors.ticket_link_type_id" />
+                    </div>
+
+                    <div class="grid min-w-0 gap-2">
+                        <Label for="linked_ticket_id">{{
+                            t('ticketDetail.linkedTicket')
+                        }}</Label>
+                        <select
+                            id="linked_ticket_id"
+                            name="linked_ticket_id"
+                            class="min-h-control border-input bg-background shadow-xs focus-visible:border-ring focus-visible:ring-ring/50 w-full min-w-0 rounded-md border px-3 py-2 text-sm outline-none transition-[color,box-shadow] focus-visible:ring-[3px]"
+                        >
+                            <option
+                                v-for="ticketLinkOption in ticketLinkOptions"
+                                :key="ticketLinkOption.id"
+                                :value="ticketLinkOption.id"
+                            >
+                                {{
+                                    `${ticketLinkOption.ticket_key} - ${ticketLinkOption.title}`
+                                }}
+                            </option>
+                        </select>
+                        <InputError :message="errors.linked_ticket_id" />
+                    </div>
+
+                    <Button type="submit" :disabled="processing">{{
+                        t('ticketDetail.saveLink')
+                    }}</Button>
+                </Form>
+
+                <div
                     v-if="linkedTickets.length === 0"
-                    class="text-muted-foreground rounded-xl border border-dashed p-4 text-sm"
+                    class="border-border text-muted-foreground rounded-xl border border-dashed px-4 py-6 text-sm"
                 >
                     {{ t('ticketDetail.noLinks') }}
-                </p>
-                <ul v-else class="grid min-w-0 gap-3">
-                    <TicketRelationshipLink
-                        v-for="link in linkedTickets"
-                        :key="link.id"
-                        :link="link"
-                        :project-id="project.id"
-                        :ticket-id="ticket.id"
-                        :ticket-key="ticket.ticket_key"
-                        :can-edit="canEditTicket"
-                        @removed="focusLinks"
-                    />
-                </ul>
-                <form
-                    v-if="canAddLink"
-                    class="bg-muted/30 grid min-w-0 gap-4 rounded-xl border p-4"
-                    @submit.prevent="submit"
-                >
-                    <h4 class="flex items-center gap-2 text-sm font-semibold">
-                        <Plus class="size-4" aria-hidden="true" />{{
-                            t('ticketRelationships.addLink')
-                        }}
-                    </h4>
-                    <FormFeedback
-                        :state="protection.state.value"
-                        @retry="submit"
-                    />
-                    <fieldset
-                        :disabled="form.processing"
-                        class="grid min-w-0 gap-4 sm:grid-cols-[minmax(0,1fr)_minmax(0,2fr)]"
+                </div>
+
+                <div v-else class="space-y-3">
+                    <div
+                        v-for="linkedTicket in linkedTickets"
+                        :key="linkedTicket.id"
+                        class="border-border rounded-xl border px-4 py-4"
                     >
-                        <TicketFormField
-                            id="ticket_link_type_id"
-                            v-model="form.ticket_link_type_id"
-                            kind="select"
-                            :label="t('ticketDetail.linkType')"
-                            :options="
-                                ticketLinkTypes.map((type) => ({
-                                    value: type.id,
-                                    label: type.label,
-                                }))
+                        <div class="flex flex-wrap items-center gap-2">
+                            <Badge variant="secondary">
+                                {{ linkedTicket.ticket_link_type.label }}
+                            </Badge>
+                            <Link
+                                :href="
+                                    showTicket({
+                                        project: project.id,
+                                        ticket: linkedTicket.linked_ticket.id,
+                                    })
+                                "
+                                class="text-foreground hover:text-primary font-medium transition"
+                            >
+                                {{ linkedTicket.linked_ticket.ticket_key }}
+                            </Link>
+                        </div>
+                        <p class="text-muted-foreground mt-2 text-sm">
+                            {{ linkedTicket.linked_ticket.title }}
+                        </p>
+
+                        <Form
+                            v-if="canEditTicket"
+                            v-bind="
+                                ProjectTicketLinkController.destroy.form({
+                                    project: project.id,
+                                    ticket: ticket.id,
+                                    ticketLink: linkedTicket.id,
+                                })
                             "
-                            :error="form.errors.ticket_link_type_id"
-                            :disabled="form.processing"
-                            required
-                        />
-                        <TicketFormField
-                            id="linked_ticket_id"
-                            v-model="form.linked_ticket_id"
-                            kind="select"
-                            :label="t('ticketDetail.linkedTicket')"
-                            :options="[
-                                {
-                                    value: '',
-                                    label: t(
-                                        'ticketRelationships.selectTicket',
-                                    ),
-                                },
-                                ...ticketLinkOptions.map((ticket) => ({
-                                    value: ticket.id,
-                                    label: `${ticket.ticket_key} — ${ticket.title}`,
-                                })),
-                            ]"
-                            :error="form.errors.linked_ticket_id"
-                            :disabled="form.processing"
-                            required
-                        />
-                    </fieldset>
-                    <p
-                        v-if="selectedType && selectedTicket"
-                        aria-live="polite"
-                        class="text-muted-foreground flex flex-wrap items-center gap-2 text-sm"
-                    >
-                        <span class="font-mono text-xs">{{
-                            ticket.ticket_key
-                        }}</span
-                        ><span>{{ selectedType.label }}</span
-                        ><ArrowRight class="size-4" aria-hidden="true" /><span
-                            class="font-mono text-xs"
-                            >{{ selectedTicket.ticket_key }}</span
+                            class="mt-3 flex justify-end"
+                            v-slot="{ processing: deleting }"
                         >
-                    </p>
-                    <p class="text-muted-foreground text-xs">
-                        {{ t('ticketRelationships.directionHelp') }}
-                    </p>
-                    <Button
-                        type="submit"
-                        :disabled="form.processing || !selectedTicket"
-                        class="sm:justify-self-start"
-                        >{{
-                            form.processing
-                                ? t('forms.saving')
-                                : t('ticketDetail.saveLink')
-                        }}</Button
-                    >
-                </form>
-                <p
-                    v-else-if="canEditTicket"
-                    class="text-muted-foreground text-sm"
-                >
-                    {{
-                        t(
-                            ticketLinkTypes.length === 0
-                                ? 'ticketRelationships.noTypes'
-                                : 'ticketRelationships.noTargets',
-                        )
-                    }}
-                </p>
+                            <Button
+                                type="submit"
+                                variant="destructive"
+                                size="sm"
+                                :disabled="deleting"
+                                >{{ t('ticketDetail.removeLink') }}</Button
+                            >
+                        </Form>
+                    </div>
+                </div>
             </CardContent>
         </Card>
     </section>

resources/js/components/tickets/detail/TicketGitBranches.vue

@@ -1,178 +0,0 @@
-<script setup lang="ts">
-import { Link } from '@inertiajs/vue3';
-import { ExternalLink, GitBranch } from 'lucide-vue-next';
-import { computed } from 'vue';
-import FeedbackState from '@/components/FeedbackState.vue';
-import TicketBranchCreateDialog from '@/components/tickets/detail/TicketBranchCreateDialog.vue';
-import { Badge } from '@/components/ui/badge';
-import { Button } from '@/components/ui/button';
-import {
-    Card,
-    CardContent,
-    CardDescription,
-    CardHeader,
-    CardTitle,
-} from '@/components/ui/card';
-import { useLocalization } from '@/composables/useLocalization';
-import { edit as editGitConnections } from '@/routes/git-connections';
-import type { RepositoryConnectionModel } from '@/types/models/repository-connection-model';
-import type { TicketGitBranchesProps } from '@/types/ticket-detail';
-
-const props = defineProps<TicketGitBranchesProps>();
-const { t } = useLocalization();
-
-const visibleRepositories = computed(() =>
-    props.repositoryBranches.filter(
-        (repositoryBranch) =>
-            repositoryBranch.branches.length > 0 ||
-            repositoryBranch.error !== null ||
-            !repositoryBranch.repository_connection.has_personal_access,
-    ),
-);
-const repositoryConnections = computed<RepositoryConnectionModel[]>(() =>
-    props.repositoryBranches.map(
-        (repositoryBranch) => repositoryBranch.repository_connection,
-    ),
-);
-const canCreateBranch = computed(
-    () => props.canEditTicket && repositoryConnections.value.length > 0,
-);
-</script>
-
-<template>
-    <Card class="min-w-0 gap-0 overflow-hidden">
-        <CardHeader
-            class="flex flex-col gap-4 border-b sm:flex-row sm:items-start sm:justify-between"
-        >
-            <div class="grid min-w-0 gap-1.5">
-                <CardTitle class="flex items-center gap-2">
-                    <GitBranch
-                        class="text-primary size-5 shrink-0"
-                        aria-hidden="true"
-                    />
-                    {{ t('ticketDetail.branches') }}
-                </CardTitle>
-                <CardDescription
-                    >{ t('ticketDetail.branchesDescription') }}</CardDescription
-                >
-            </div>
-
-            <TicketBranchCreateDialog
-                v-if="canCreateBranch"
-                :ticket="ticket"
-                :project="project"
-                :repository-connections="repositoryConnections"
-                :suggested-branch-name="suggestedBranchName"
-            />
-        </CardHeader>
-
-        <CardContent class="grid gap-4 pt-6">
-            <FeedbackState
-                v-if="repositoryBranches.length === 0"
-                state="empty"
-                :title="t('ticketDetail.noLinkedRepositories')"
-                :description="t('ticketDetail.noLinkedRepositoriesDescription')"
-            />
-
-            <FeedbackState
-                v-else-if="visibleRepositories.length === 0"
-                state="empty"
-                :title="t('tickets.noBranches')"
-                :description="t('tickets.noBranchesDescription')"
-            />
-
-            <article
-                v-for="repositoryBranch in visibleRepositories"
-                v-else
-                :key="repositoryBranch.repository_connection.id"
-                class="border-border grid min-w-0 gap-4 rounded-lg border p-4"
-            >
-                <header class="grid min-w-0 gap-2">
-                    <div class="flex min-w-0 flex-wrap items-center gap-2">
-                        <Badge variant="secondary">
-                            {{
-                                repositoryBranch.repository_connection
-                                    .provider_label
-                            }}
-                        </Badge>
-                        <a
-                            :href="
-                                repositoryBranch.repository_connection
-                                    .repository_url
-                            "
-                            target="_blank"
-                            rel="noopener noreferrer"
-                            :aria-label="
-                                t('ticketDetail.openRepositoryExternal', {
-                                    repository:
-                                        repositoryBranch.repository_connection
-                                            .repository_full_name,
-                                    provider:
-                                        repositoryBranch.repository_connection
-                                            .provider_label,
-                                })
-                            "
-                            class="hover:text-primary focus-visible:ring-ring/35 group flex min-w-0 items-center gap-1.5 rounded-sm font-medium outline-none transition-colors focus-visible:ring-2"
-                        >
-                            <span class="wrap-anywhere">{{
-                                repositoryBranch.repository_connection
-                                    .repository_full_name
-                            }}</span>
-                            <ExternalLink
-                                class="size-3.5 shrink-0 opacity-60 transition-opacity group-hover:opacity-100"
-                                aria-hidden="true"
-                            />
-                        </a>
-                    </div>
-                    <p class="text-muted-foreground text-xs">
-                        {{ repositoryBranch.repository_connection.base_url }}
-                    </p>
-                </header>
-
-                <FeedbackState
-                    v-if="
-                        !repositoryBranch.repository_connection
-                            .has_personal_access
-                    "
-                    state="empty"
-                    :title="t('ticketDetail.gitAccessRequired')"
-                    :description="t('ticketDetail.inspectBranches')"
-                >
-                    <Button
-                        as-child
-                        variant="outline"
-                        size="sm"
-                        class="justify-self-start"
-                    >
-                        <Link :href="editGitConnections()">{{
-                            t('ticketDetail.openGitConnections')
-                        }}</Link>
-                    </Button>
-                </FeedbackState>
-
-                <FeedbackState
-                    v-else-if="repositoryBranch.error"
-                    state="error"
-                    :title="t('ticketDetail.branchesUnavailable')"
-                    :description="repositoryBranch.error"
-                />
-
-                <ul v-else class="grid min-w-0 gap-2 sm:grid-cols-2">
-                    <li
-                        v-for="branch in repositoryBranch.branches"
-                        :key="branch.name"
-                        class="bg-muted/30 flex min-w-0 items-center gap-2 rounded-md border px-3 py-2"
-                    >
-                        <GitBranch
-                            class="text-muted-foreground size-3.5 shrink-0"
-                            aria-hidden="true"
-                        />
-                        <span class="wrap-anywhere font-mono text-xs">{{
-                            branch.name
-                        }}</span>
-                    </li>
-                </ul>
-            </article>
-        </CardContent>
-    </Card>
-</template>

resources/js/components/tickets/detail/TicketGitPullRequests.vue

@@ -1,191 +0,0 @@
-<script setup lang="ts">
-import { Link } from '@inertiajs/vue3';
-import { ExternalLink, GitPullRequest } from 'lucide-vue-next';
-import { computed } from 'vue';
-import FeedbackState from '@/components/FeedbackState.vue';
-import { Badge } from '@/components/ui/badge';
-import { Button } from '@/components/ui/button';
-import {
-    Card,
-    CardContent,
-    CardDescription,
-    CardHeader,
-    CardTitle,
-} from '@/components/ui/card';
-import { useLocalization } from '@/composables/useLocalization';
-import { edit as editGitConnections } from '@/routes/git-connections';
-import type { TicketGitPullRequestsProps } from '@/types/ticket-detail';
-
-const props = defineProps<TicketGitPullRequestsProps>();
-const { t } = useLocalization();
-
-const visibleRepositories = computed(() =>
-    props.repositoryPullRequests.filter(
-        (repositoryPullRequest) =>
-            repositoryPullRequest.pull_requests.length > 0 ||
-            repositoryPullRequest.error !== null ||
-            !repositoryPullRequest.repository_connection.has_personal_access,
-    ),
-);
-</script>
-
-<template>
-    <Card class="min-w-0 gap-0 overflow-hidden">
-        <CardHeader class="border-b">
-            <CardTitle class="flex items-center gap-2">
-                <GitPullRequest
-                    class="text-primary size-5 shrink-0"
-                    aria-hidden="true"
-                />
-                {{ t('ticketDetail.pullRequests') }}
-            </CardTitle>
-            <CardDescription
-                >{ t('ticketDetail.pullRequestsDescription') }}</CardDescription
-            >
-        </CardHeader>
-
-        <CardContent class="grid gap-4 pt-6">
-            <FeedbackState
-                v-if="repositoryPullRequests.length === 0"
-                state="empty"
-                :title="t('ticketDetail.noLinkedRepositories')"
-                :description="t('ticketDetail.noLinkedRepositoriesDescription')"
-            />
-
-            <FeedbackState
-                v-else-if="visibleRepositories.length === 0"
-                state="empty"
-                :title="t('tickets.noPullRequests')"
-                :description="t('tickets.noPullRequestsDescription')"
-            />
-
-            <article
-                v-for="repositoryPullRequest in visibleRepositories"
-                v-else
-                :key="repositoryPullRequest.repository_connection.id"
-                class="border-border grid min-w-0 gap-4 rounded-lg border p-4"
-            >
-                <header class="grid min-w-0 gap-2">
-                    <div class="flex min-w-0 flex-wrap items-center gap-2">
-                        <Badge variant="secondary">
-                            {{
-                                repositoryPullRequest.repository_connection
-                                    .provider_label
-                            }}
-                        </Badge>
-                        <a
-                            :href="
-                                repositoryPullRequest.repository_connection
-                                    .repository_url
-                            "
-                            target="_blank"
-                            rel="noopener noreferrer"
-                            :aria-label="
-                                t('ticketDetail.openRepositoryExternal', {
-                                    repository:
-                                        repositoryPullRequest
-                                            .repository_connection
-                                            .repository_full_name,
-                                    provider:
-                                        repositoryPullRequest
-                                            .repository_connection
-                                            .provider_label,
-                                })
-                            "
-                            class="hover:text-primary focus-visible:ring-ring/35 group flex min-w-0 items-center gap-1.5 rounded-sm font-medium outline-none transition-colors focus-visible:ring-2"
-                        >
-                            <span class="wrap-anywhere">{{
-                                repositoryPullRequest.repository_connection
-                                    .repository_full_name
-                            }}</span>
-                            <ExternalLink
-                                class="size-3.5 shrink-0 opacity-60 transition-opacity group-hover:opacity-100"
-                                aria-hidden="true"
-                            />
-                        </a>
-                    </div>
-                    <p class="text-muted-foreground text-xs">
-                        {{
-                            repositoryPullRequest.repository_connection.base_url
-                        }}
-                    </p>
-                </header>
-
-                <FeedbackState
-                    v-if="
-                        !repositoryPullRequest.repository_connection
-                            .has_personal_access
-                    "
-                    state="empty"
-                    :title="t('ticketDetail.gitAccessRequired')"
-                    :description="t('ticketDetail.inspectPullRequests')"
-                >
-                    <Button
-                        as-child
-                        variant="outline"
-                        size="sm"
-                        class="justify-self-start"
-                    >
-                        <Link :href="editGitConnections()">{{
-                            t('ticketDetail.openGitConnections')
-                        }}</Link>
-                    </Button>
-                </FeedbackState>
-
-                <FeedbackState
-                    v-else-if="repositoryPullRequest.error"
-                    state="error"
-                    :title="t('ticketDetail.pullRequestsUnavailable')"
-                    :description="repositoryPullRequest.error"
-                />
-
-                <ul v-else class="grid min-w-0 gap-3">
-                    <li
-                        v-for="pullRequest in repositoryPullRequest.pull_requests"
-                        :key="pullRequest.html_url"
-                        class="border-border/70 bg-muted/20 grid min-w-0 gap-2 rounded-md border px-4 py-3"
-                    >
-                        <div class="flex min-w-0 flex-wrap items-center gap-2">
-                            <Badge variant="outline">
-                                #{{ pullRequest.number }}
-                            </Badge>
-                            <Badge variant="secondary">
-                                {{ pullRequest.status }}
-                            </Badge>
-                            <a
-                                :href="pullRequest.html_url"
-                                target="_blank"
-                                rel="noopener noreferrer"
-                                :aria-label="
-                                    t('ticketDetail.openPullRequestExternal', {
-                                        number: pullRequest.number,
-                                        provider:
-                                            repositoryPullRequest
-                                                .repository_connection
-                                                .provider_label,
-                                    })
-                                "
-                                class="hover:text-primary focus-visible:ring-ring/35 group flex min-w-0 items-center gap-1.5 rounded-sm font-medium outline-none transition-colors focus-visible:ring-2"
-                            >
-                                <span class="wrap-anywhere">{{
-                                    pullRequest.title
-                                }}</span>
-                                <ExternalLink
-                                    class="size-3.5 shrink-0 opacity-60 transition-opacity group-hover:opacity-100"
-                                    aria-hidden="true"
-                                />
-                            </a>
-                        </div>
-                        <p class="text-muted-foreground text-xs">
-                            {{
-                                t('ticketDetail.sourceBranch', {
-                                    name: pullRequest.source_branch,
-                                })
-                            }}
-                        </p>
-                    </li>
-                </ul>
-            </article>
-        </CardContent>
-    </Card>
-</template>

resources/js/components/tickets/detail/TicketRelationshipLink.vue

@@ -1,116 +0,0 @@
-<script setup lang="ts">
-import { Link, useForm } from '@inertiajs/vue3';
-import { ArrowDownLeft, ArrowUpRight, Unlink } from 'lucide-vue-next';
-import { computed } from 'vue';
-import { destroy } from '@/actions/App/Http/Controllers/ProjectTicketLinkController';
-import FormFeedback from '@/components/FormFeedback.vue';
-import { Badge } from '@/components/ui/badge';
-import { Button } from '@/components/ui/button';
-import { useFormProtection } from '@/composables/useFormProtection';
-import { useLocalization } from '@/composables/useLocalization';
-import { show } from '@/routes/projects/tickets';
-import type { TicketLinkModel } from '@/types/models/ticket-link-model';
-
-const props = defineProps<{
-    link: TicketLinkModel;
-    projectId: number;
-    ticketId: number;
-    ticketKey: string;
-    canEdit: boolean;
-}>();
-const emit = defineEmits<{ removed: [] }>();
-const { t } = useLocalization();
-const outgoing = computed(() => props.link.source_ticket_id === props.ticketId);
-const form = useForm({});
-const protection = useFormProtection(form);
-function remove(): void {
-    if (!props.canEdit) {
-        return;
-    }
-    protection.submit(
-        destroy({
-            project: props.projectId,
-            ticket: props.ticketId,
-            ticketLink: props.link.id,
-        }),
-        {
-            preserveScroll: true,
-            onSuccess: () => emit('removed'),
-        },
-    );
-}
-</script>
-
-<template>
-    <li
-        class="grid min-w-0 gap-3 rounded-xl border p-4"
-        :data-ticket-link="link.id"
-    >
-        <div class="flex min-w-0 flex-wrap items-center gap-2">
-            <Badge
-                variant="outline"
-                class="text-muted-foreground max-w-full whitespace-normal"
-            >
-                <ArrowUpRight
-                    v-if="outgoing"
-                    class="size-3.5 shrink-0"
-                    aria-hidden="true"
-                /><ArrowDownLeft
-                    v-else
-                    class="size-3.5 shrink-0"
-                    aria-hidden="true"
-                />
-                {{
-                    t(
-                        outgoing
-                            ? 'ticketRelationships.outgoing'
-                            : 'ticketRelationships.incoming',
-                    )
-                }}
-            </Badge>
-            <span class="text-muted-foreground font-mono text-xs">{{
-                ticketKey
-            }}</span>
-            <span class="text-sm font-medium">{{
-                link.ticket_link_type.label
-            }}</span>
-        </div>
-        <div class="flex min-w-0 flex-wrap items-start justify-between gap-3">
-            <Link
-                :href="
-                    show({ project: projectId, ticket: link.linked_ticket.id })
-                "
-                class="hover:text-primary focus-visible:ring-ring/35 grid min-w-0 flex-1 basis-40 gap-1 rounded-md outline-none transition-colors focus-visible:ring-2"
-            >
-                <span class="text-primary font-mono text-xs font-semibold">{{
-                    link.linked_ticket.ticket_key
-                }}</span>
-                <span class="wrap-anywhere text-sm font-medium">{{
-                    link.linked_ticket.title
-                }}</span>
-            </Link>
-            <form v-if="canEdit" @submit.prevent="remove">
-                <Button
-                    type="submit"
-                    variant="ghost"
-                    size="sm"
-                    class="text-muted-foreground hover:text-destructive"
-                    :aria-label="
-                        t('ticketRelationships.removeLink', {
-                            key: link.linked_ticket.ticket_key,
-                        })
-                    "
-                    :disabled="form.processing"
-                    ><Unlink class="size-4" aria-hidden="true" />{{
-                        t('ticketDetail.removeLink')
-                    }}</Button
-                >
-            </form>
-        </div>
-        <FormFeedback
-            v-if="canEdit"
-            :state="protection.state.value"
-            @retry="remove"
-        />
-    </li>
-</template>

resources/js/composables/useProjectTemplateAreas.ts

@@ -1,27 +0,0 @@
-import { useLocalization } from '@/composables/useLocalization';
-
-const areaKeys = {
-    project_settings: 'projectCreation.areas.projectSettings',
-    board_columns: 'projectCreation.areas.boardColumns',
-    ticket_statuses: 'projectCreation.areas.ticketStatuses',
-    status_transitions: 'projectCreation.areas.statusTransitions',
-    ticket_types: 'projectCreation.areas.ticketTypes',
-    ticket_priorities: 'projectCreation.areas.ticketPriorities',
-    ticket_fields: 'projectCreation.areas.ticketFields',
-    ticket_link_types: 'projectCreation.areas.ticketLinkTypes',
-    repository_connections: 'projectCreation.areas.repositories',
-    notification_actions: 'projectCreation.areas.notifications',
-} as const;
-
-export function useProjectTemplateAreas() {
-    const { t } = useLocalization();
-    function areaText(
-        value: string,
-        part: 'label' | 'description',
-        fallback = value,
-    ): string {
-        const key = areaKeys[value as keyof typeof areaKeys];
-        return key ? t(`${key}.${part}`) : fallback;
-    }
-    return { areaText };
-}

resources/js/composables/useTwoFactorAuth.ts

@@ -1,107 +1,120 @@
-import { computed, onScopeDispose, ref } from 'vue';
-import { useLocalization } from '@/composables/useLocalization';
+import type { ComputedRef, Ref } from 'vue';
+import { computed, ref } from 'vue';
 import { qrCode, recoveryCodes, secretKey } from '@/routes/two-factor';
 
-/** Keep secrets within the consuming component and discard late responses after hiding them. */
-export function useTwoFactorAuth() {
-    const { t } = useLocalization();
-    const errors = ref<string[]>([]);
-    const manualSetupKey = ref<string | null>(null);
-    const qrCodeSvg = ref<string | null>(null);
-    const recoveryCodesList = ref<string[]>([]);
-    const loading = ref(false);
-    let pending: AbortController | null = null;
+export type UseTwoFactorAuthReturn = {
+    qrCodeSvg: Ref<string | null>;
+    manualSetupKey: Ref<string | null>;
+    recoveryCodesList: Ref<string[]>;
+    errors: Ref<string[]>;
+    hasSetupData: ComputedRef<boolean>;
+    clearSetupData: () => void;
+    clearErrors: () => void;
+    clearTwoFactorAuthData: () => void;
+    fetchQrCode: () => Promise<void>;
+    fetchSetupKey: () => Promise<void>;
+    fetchSetupData: () => Promise<void>;
+    fetchRecoveryCodes: () => Promise<void>;
+};
 
-    async function fetchJson<T>(url: string, signal: AbortSignal): Promise<T> {
-        const response = await fetch(url, {
-            headers: { Accept: 'application/json' },
-            credentials: 'same-origin',
-            signal,
-        });
-        if (!response.ok || response.redirected) {
-            throw new Error(String(response.status));
+const fetchJson = async <T>(url: string): Promise<T> => {
+    const response = await fetch(url, {
+        headers: { Accept: 'application/json' },
+    });
+
+    if (!response.ok) {
+        throw new Error(`Failed to fetch: ${response.status}`);
+    }
+
+    return response.json();
+};
+
+const errors = ref<string[]>([]);
+const manualSetupKey = ref<string | null>(null);
+const qrCodeSvg = ref<string | null>(null);
+const recoveryCodesList = ref<string[]>([]);
+
+const hasSetupData = computed<boolean>(
+    () => qrCodeSvg.value !== null && manualSetupKey.value !== null,
+);
+
+export const useTwoFactorAuth = (): UseTwoFactorAuthReturn => {
+    const fetchQrCode = async (): Promise<void> => {
+        try {
+            const { svg } = await fetchJson<{ svg: string; url: string }>(
+                qrCode.url(),
+            );
+
+            qrCodeSvg.value = svg;
+        } catch {
+            errors.value.push('Failed to fetch QR code');
+            qrCodeSvg.value = null;
         }
-        return response.json();
-    }
+    };
 
-    function clearErrors(): void {
-        errors.value = [];
-    }
+    const fetchSetupKey = async (): Promise<void> => {
+        try {
+            const { secretKey: key } = await fetchJson<{ secretKey: string }>(
+                secretKey.url(),
+            );
 
-    function clearTwoFactorAuthData(): void {
-        pending?.abort();
-        pending = null;
-        loading.value = false;
+            manualSetupKey.value = key;
+        } catch {
+            errors.value.push('Failed to fetch a setup key');
+            manualSetupKey.value = null;
+        }
+    };
+
+    const clearSetupData = (): void => {
         manualSetupKey.value = null;
         qrCodeSvg.value = null;
-        recoveryCodesList.value = [];
         clearErrors();
-    }
+    };
 
-    async function load(kind: 'setup' | 'recovery'): Promise<void> {
-        clearTwoFactorAuthData();
-        const request = new AbortController();
-        pending = request;
-        loading.value = true;
+    const clearErrors = (): void => {
+        errors.value = [];
+    };
+
+    const clearTwoFactorAuthData = (): void => {
+        clearSetupData();
+        clearErrors();
+        recoveryCodesList.value = [];
+    };
+
+    const fetchRecoveryCodes = async (): Promise<void> => {
         try {
-            if (kind === 'setup') {
-                const [qr, key] = await Promise.all([
-                    fetchJson<{ svg: string }>(qrCode.url(), request.signal),
-                    fetchJson<{ secretKey: string }>(
-                        secretKey.url(),
-                        request.signal,
-                    ),
-                ]);
-                if (pending !== request) {
-                    return;
-                }
-                qrCodeSvg.value = qr.svg;
-                manualSetupKey.value = key.secretKey;
-            } else {
-                const codes = await fetchJson<string[]>(
-                    recoveryCodes.url(),
-                    request.signal,
-                );
-                if (pending === request) {
-                    recoveryCodesList.value = codes;
-                }
-            }
-        } catch (error) {
-            if (pending === request && !request.signal.aborted) {
-                const status = error instanceof Error ? error.message : '';
-                errors.value = [
-                    t(
-                        status === '423' || status === '401' || status === '419'
-                            ? 'security.confirmAgain'
-                            : kind === 'setup'
-                              ? 'security.setupError'
-                              : 'security.recoveryError',
-                    ),
-                ];
-            }
-        } finally {
-            if (pending === request) {
-                pending = null;
-                loading.value = false;
-            }
+            clearErrors();
+            recoveryCodesList.value = await fetchJson<string[]>(
+                recoveryCodes.url(),
+            );
+        } catch {
+            errors.value.push('Failed to fetch recovery codes');
+            recoveryCodesList.value = [];
         }
-    }
+    };
+
+    const fetchSetupData = async (): Promise<void> => {
+        try {
+            clearErrors();
+            await Promise.all([fetchQrCode(), fetchSetupKey()]);
+        } catch {
+            qrCodeSvg.value = null;
+            manualSetupKey.value = null;
+        }
+    };
 
-    onScopeDispose(clearTwoFactorAuthData);
     return {
         qrCodeSvg,
         manualSetupKey,
         recoveryCodesList,
         errors,
-        loading,
-        hasSetupData: computed(() =>
-            Boolean(qrCodeSvg.value && manualSetupKey.value),
-        ),
-        clearSetupData: clearTwoFactorAuthData,
-        clearRecoveryCodes: clearTwoFactorAuthData,
-        clearTwoFactorAuthData,
+        hasSetupData,
+        clearSetupData,
         clearErrors,
-        fetchSetupData: () => load('setup'),
-        fetchRecoveryCodes: () => load('recovery'),
+        clearTwoFactorAuthData,
+        fetchQrCode,
+        fetchSetupKey,
+        fetchSetupData,
+        fetchRecoveryCodes,
     };
-}
+};

resources/js/layouts/projects/SettingsLayout.vue

@@ -1,73 +0,0 @@
-<script setup lang="ts">
-import { Link } from '@inertiajs/vue3';
-import { Settings2 } from 'lucide-vue-next';
-import { useAppNavigation } from '@/composables/useAppNavigation';
-import { useCurrentUrl } from '@/composables/useCurrentUrl';
-import { useLocalization } from '@/composables/useLocalization';
-import { toUrl } from '@/lib/utils';
-
-defineProps<{ projectName: string; projectKey: string }>();
-const { projectSettingsItems } = useAppNavigation();
-const { isCurrentUrl } = useCurrentUrl();
-const { t } = useLocalization();
-</script>
-
-<template>
-    <div
-        class="gap-page md:p-page mx-auto flex w-full min-w-0 max-w-7xl flex-1 flex-col p-4"
-    >
-        <header class="gap-stack grid min-w-0">
-            <div class="text-primary flex items-center gap-2">
-                <Settings2 class="size-4" aria-hidden="true" />
-                <p class="text-label text-muted-foreground break-all uppercase">
-                    {{ projectKey }}
-                </p>
-            </div>
-            <h1 class="text-headline-mobile md:text-headline break-words">
-                {{ t('navigation.projectSettings') }}
-            </h1>
-            <p class="text-muted-foreground break-words">
-                {{ t('projectSettings.description', { project: projectName }) }}
-            </p>
-        </header>
-        <div
-            class="bg-card grid min-w-0 grid-cols-1 overflow-hidden rounded-xl border shadow-sm lg:grid-cols-[15rem_minmax(0,1fr)]"
-        >
-            <aside
-                class="bg-muted/35 min-w-0 border-b p-3 lg:border-b-0 lg:border-r lg:p-4"
-            >
-                <nav
-                    class="flex gap-2 overflow-x-auto pb-1 lg:flex-col lg:overflow-visible lg:pb-0"
-                    :aria-label="t('navigation.projectSettings')"
-                >
-                    <Link
-                        v-for="item in projectSettingsItems"
-                        :key="toUrl(item.href)"
-                        :href="item.href"
-                        :aria-current="
-                            isCurrentUrl(item.href) ? 'page' : undefined
-                        "
-                        :class="[
-                            'text-body focus-visible:ring-ring/40 flex min-h-11 shrink-0 items-center gap-2 rounded-lg border px-3 font-medium outline-none transition-colors focus-visible:ring-2 lg:w-full',
-                            isCurrentUrl(item.href)
-                                ? 'border-primary/25 bg-accent text-accent-foreground shadow-xs'
-                                : 'text-muted-foreground hover:border-border hover:bg-background hover:text-foreground border-transparent',
-                        ]"
-                    >
-                        <component
-                            :is="item.icon"
-                            class="size-4 shrink-0"
-                            aria-hidden="true"
-                        />
-                        <span class="whitespace-nowrap">{{ item.title }}</span>
-                    </Link>
-                </nav>
-            </aside>
-            <div class="min-w-0 p-4 sm:p-6 lg:p-8">
-                <section class="gap-page mx-auto grid w-full min-w-0 max-w-3xl">
-                    <slot />
-                </section>
-            </div>
-        </div>
-    </div>
-</template>

resources/js/layouts/settings/Layout.vue

@@ -1,14 +1,9 @@
 <script setup lang="ts">
 import { Link } from '@inertiajs/vue3';
-import {
-    GitBranch,
-    KeyRound,
-    Palette,
-    Settings2,
-    ShieldCheck,
-    UserRound,
-} from 'lucide-vue-next';
 import { computed } from 'vue';
+import Heading from '@/components/Heading.vue';
+import { Button } from '@/components/ui/button';
+import { Separator } from '@/components/ui/separator';
 import { useCurrentUrl } from '@/composables/useCurrentUrl';
 import { useLocalization } from '@/composables/useLocalization';
 import { toUrl } from '@/lib/utils';
@@ -24,27 +19,22 @@ const sidebarNavItems = computed<NavItem[]>(() => [
     {
         title: t('navigation.profile'),
         href: editProfile(),
-        icon: UserRound,
     },
     {
         title: t('navigation.security'),
         href: editSecurity(),
-        icon: ShieldCheck,
     },
     {
         title: t('navigation.gitConnections'),
         href: editGitConnections(),
-        icon: GitBranch,
     },
     {
         title: t('navigation.applications'),
         href: editApplications(),
-        icon: KeyRound,
     },
     {
         title: t('navigation.appearance'),
         href: editAppearance(),
-        icon: Palette,
     },
 ]);
 
@@ -52,60 +42,47 @@ const { isCurrentOrParentUrl } = useCurrentUrl();
 </script>
 
 <template>
-    <div
-        class="gap-page md:p-page mx-auto flex w-full min-w-0 max-w-6xl flex-1 flex-col p-4"
-    >
-        <header class="gap-stack grid min-w-0">
-            <div class="text-primary flex items-center gap-2">
-                <Settings2 class="size-4" aria-hidden="true" />
-                <p class="text-label text-muted-foreground uppercase">
-                    {{ t('settings.eyebrow') }}
-                </p>
-            </div>
-            <h1 class="text-headline-mobile md:text-headline break-words">
-                {{ t('navigation.settings') }}
-            </h1>
-            <p class="text-muted-foreground max-w-2xl">
-                {{ t('navigation.settingsDescription') }}
-            </p>
-        </header>
+    <div class="px-4 py-6">
+        <Heading
+            :title="t('navigation.settings')"
+            :description="t('navigation.settingsDescription')"
+        />
 
-        <div
-            class="bg-card grid min-w-0 grid-cols-1 overflow-hidden rounded-xl border shadow-sm lg:grid-cols-[15rem_minmax(0,1fr)]"
-        >
-            <aside
-                class="bg-muted/35 border-b p-3 lg:border-b-0 lg:border-r lg:p-4"
-            >
+        <div class="flex min-w-0 flex-col gap-6 lg:flex-row lg:gap-12">
+            <aside class="w-full min-w-0 lg:w-52 lg:shrink-0">
                 <nav
-                    class="flex gap-2 overflow-x-auto pb-1 lg:flex-col lg:overflow-visible lg:pb-0"
+                    class="flex gap-1 overflow-x-auto lg:flex-col"
                     :aria-label="t('navigation.settings')"
                 >
-                    <Link
+                    <Button
                         v-for="item in sidebarNavItems"
                         :key="toUrl(item.href)"
-                        :href="item.href"
-                        :aria-current="
-                            isCurrentOrParentUrl(item.href) ? 'page' : undefined
-                        "
+                        variant="ghost"
                         :class="[
-                            'text-body focus-visible:ring-ring/40 flex min-h-11 shrink-0 items-center gap-2 rounded-lg border px-3 font-medium outline-none transition-colors focus-visible:ring-2 lg:w-full',
-                            isCurrentOrParentUrl(item.href)
-                                ? 'border-primary/25 bg-accent text-accent-foreground shadow-xs'
-                                : 'text-muted-foreground hover:border-border hover:bg-background hover:text-foreground border-transparent',
+                            'shrink-0 justify-start lg:w-full',
+                            { 'bg-muted': isCurrentOrParentUrl(item.href) },
                         ]"
+                        as-child
                     >
-                        <component
-                            :is="item.icon"
-                            class="size-4 shrink-0"
-                            aria-hidden="true"
-                        />
-                        <span class="whitespace-nowrap">{{ item.title }}</span>
-                    </Link>
+                        <Link
+                            :href="item.href"
+                            :aria-current="
+                                isCurrentOrParentUrl(item.href)
+                                    ? 'page'
+                                    : undefined
+                            "
+                        >
+                            <component :is="item.icon" class="h-4 w-4" />
+                            {{ item.title }}
+                        </Link>
+                    </Button>
                 </nav>
             </aside>
 
-            <div class="min-w-0 p-4 sm:p-6 lg:p-8">
-                <section class="mx-auto grid w-full min-w-0 max-w-3xl gap-8">
+            <Separator class="lg:hidden" />
+
+            <div class="min-w-0 flex-1 md:max-w-2xl">
+                <section class="max-w-xl space-y-12">
                     <slot />
                 </section>
             </div>

resources/js/lib/acceptance-criteria.ts

@@ -5,76 +5,6 @@ import type {
 
 const MAX_INDENT_LEVEL = 8;
 
-export const canIndentAcceptanceCriterion = (
-    items: AcceptanceCriteriaModel,
-    index: number,
-): boolean => {
-    const item = items[index];
-    const previous = items[index - 1];
-    if (!item || !previous || item.indent > previous.indent) {
-        return false;
-    }
-    return items
-        .slice(index, acceptanceCriteriaSubtreeEnd(items, index))
-        .every((descendant) => descendant.indent < MAX_INDENT_LEVEL);
-};
-
-const acceptanceCriteriaSubtreeEnd = (
-    items: AcceptanceCriteriaModel,
-    index: number,
-): number => {
-    let end = index + 1;
-    while (end < items.length && items[end].indent > items[index].indent) {
-        end++;
-    }
-    return end;
-};
-
-export const indentAcceptanceCriterion = (
-    items: AcceptanceCriteriaModel,
-    index: number,
-    direction: 1 | -1,
-): AcceptanceCriteriaModel => {
-    if (
-        !items[index] ||
-        (direction === 1
-            ? !canIndentAcceptanceCriterion(items, index)
-            : items[index].indent === 0)
-    ) {
-        return items;
-    }
-    const end = acceptanceCriteriaSubtreeEnd(items, index);
-    return items.map((item, position) =>
-        position >= index && position < end
-            ? { ...item, indent: item.indent + direction }
-            : item,
-    );
-};
-
-/** Remove only the selected criterion, promoting its children without losing them. */
-export const removeAcceptanceCriterion = (
-    items: AcceptanceCriteriaModel,
-    index: number,
-): AcceptanceCriteriaModel => {
-    if (!items[index]) {
-        return items;
-    }
-    const end = acceptanceCriteriaSubtreeEnd(items, index);
-    return items.flatMap((item, position) =>
-        position === index
-            ? []
-            : [
-                  {
-                      ...item,
-                      indent:
-                          position > index && position < end
-                              ? item.indent - 1
-                              : item.indent,
-                  },
-              ],
-    );
-};
-
 export type AcceptanceCriteriaEditorState = {
     checklist: string;
 };

resources/js/lib/backlog.ts

@@ -1,114 +0,0 @@
-import type {
-    BacklogFilterState,
-    BacklogTicketTreeNode,
-} from '@/types/backlog';
-import type { TicketModel } from '@/types/models/ticket-model';
-
-export function buildBacklogTicketTree(
-    tickets: TicketModel[],
-): BacklogTicketTreeNode[] {
-    const nodesByTicketId = new Map<number, BacklogTicketTreeNode>();
-
-    for (const ticket of tickets) {
-        nodesByTicketId.set(ticket.id, {
-            children: [],
-            matchesFilters: true,
-            ticket,
-        });
-    }
-
-    const roots: BacklogTicketTreeNode[] = [];
-
-    for (const ticket of tickets) {
-        const node = nodesByTicketId.get(ticket.id);
-
-        if (!node) {
-            continue;
-        }
-
-        const parentNode =
-            ticket.parent_ticket_id === null
-                ? undefined
-                : nodesByTicketId.get(ticket.parent_ticket_id);
-
-        if (parentNode) {
-            parentNode.children.push(node);
-        } else {
-            roots.push(node);
-        }
-    }
-
-    return roots;
-}
-
-export function filterBacklogTicketTree(
-    nodes: BacklogTicketTreeNode[],
-    filters: BacklogFilterState,
-): BacklogTicketTreeNode[] {
-    return nodes.flatMap((node) => {
-        const children = filterBacklogTicketTree(node.children, filters);
-        const matchesFilters = ticketMatchesFilters(node.ticket, filters);
-
-        if (!matchesFilters && children.length === 0) {
-            return [];
-        }
-
-        return [
-            {
-                ...node,
-                children,
-                matchesFilters,
-            },
-        ];
-    });
-}
-
-export function countBacklogTreeTickets(
-    nodes: BacklogTicketTreeNode[],
-): number {
-    return nodes.reduce(
-        (count, node) => count + 1 + countBacklogTreeTickets(node.children),
-        0,
-    );
-}
-
-export function expandableBacklogTicketIds(
-    nodes: BacklogTicketTreeNode[],
-): number[] {
-    return nodes.flatMap((node) => [
-        ...(node.children.length > 0 ? [node.ticket.id] : []),
-        ...expandableBacklogTicketIds(node.children),
-    ]);
-}
-
-function ticketMatchesFilters(
-    ticket: TicketModel,
-    filters: BacklogFilterState,
-): boolean {
-    const query = filters.query.trim().toLocaleLowerCase();
-    const searchableText = [
-        ticket.ticket_key,
-        ticket.title,
-        ticket.description,
-        ticket.ticket_type.name,
-        ticket.ticket_priority.name,
-        ticket.ticket_status?.name,
-        ticket.assignee?.name,
-    ]
-        .filter((value): value is string => Boolean(value))
-        .join(' ')
-        .toLocaleLowerCase();
-
-    return (
-        (query === '' || searchableText.includes(query)) &&
-        (filters.typeId === '' || ticket.ticket_type_id === filters.typeId) &&
-        (filters.priorityId === '' ||
-            ticket.ticket_priority_id === filters.priorityId) &&
-        (filters.statusId === '' ||
-            ticket.ticket_status_id === filters.statusId) &&
-        (filters.assigneeId === '' ||
-            (filters.assigneeId === 'unassigned'
-                ? ticket.assignee_user_id === null
-                : ticket.assignee_user_id === filters.assigneeId))
-    );
-}

resources/js/lib/notification-filters.ts

@@ -1,23 +0,0 @@
-import type { NotificationActionFilterModel } from '@/types/models/notification-action-filter-model';
-import type { NotificationFilterFormState } from '@/types/project-notifications';
-
-export const supportsFilterValue = (operator: string): boolean =>
-    !['exists', 'not_exists'].includes(operator);
-
-export function serializeNotificationFilters(
-    filters: NotificationFilterFormState[],
-): NotificationActionFilterModel[] {
-    return filters.map(({ attribute, operator, value }) => ({
-        attribute,
-        operator,
-        value:
-            operator === 'in'
-                ? value
-                      .split(/[\n,]/)
-                      .map((entry) => entry.trim())
-                      .filter(Boolean)
-                : supportsFilterValue(operator)
-                  ? value.trim()
-                  : null,
-    }));
-}

resources/js/lib/notification-labels.ts

@@ -1,13 +0,0 @@
-import type { Localization } from '@/lib/localization';
-import { en } from '@/locales/en';
-import type { TranslationKey } from '@/types/localization';
-
-export function notificationLabel(
-    t: Localization['t'],
-    group: string,
-    value: string,
-    fallback: string,
-): string {
-    const key = `notifications.${group}.${value}`;
-    return Object.hasOwn(en, key) ? t(key as TranslationKey) : fallback;
-}

resources/js/pages/Welcome.vue

@@ -1,245 +1,436 @@
 <script setup lang="ts">
 import { Head, Link } from '@inertiajs/vue3';
-import { ArrowRight, Columns3, GitBranch, ListChecks } from 'lucide-vue-next';
-import { computed } from 'vue';
-import AppLogo from '@/components/AppLogo.vue';
-import { Button } from '@/components/ui/button';
-import { useLocalization } from '@/composables/useLocalization';
-import { dashboard, home, login } from '@/routes/index';
-
-const { t } = useLocalization();
-
-const features = computed(() => [
-    {
-        icon: Columns3,
-        title: t('welcome.features.workflows.title'),
-        description: t('welcome.features.workflows.description'),
-    },
-    {
-        icon: ListChecks,
-        title: t('welcome.features.tickets.title'),
-        description: t('welcome.features.tickets.description'),
-    },
-    {
-        icon: GitBranch,
-        title: t('welcome.features.git.title'),
-        description: t('welcome.features.git.description'),
-    },
-]);
-
-const previewColumns = computed(() => [
-    {
-        title: t('welcome.preview.backlog'),
-        tickets: [
-            t('welcome.preview.ticketOnboarding'),
-            t('welcome.preview.ticketRelease'),
-        ],
-    },
-    {
-        title: t('welcome.preview.inProgress'),
-        tickets: [t('welcome.preview.ticketRepository')],
-    },
-    {
-        title: t('welcome.preview.review'),
-        tickets: [t('welcome.preview.ticketPullRequest')],
-    },
-]);
+import { dashboard, login } from '@/routes/index';
 </script>
 
 <template>
+    <Head title="Welcome">
+        <link rel="preconnect" href="https://rsms.me/" />
+        <link rel="stylesheet" href="https://rsms.me/inter/inter.css" />
+    </Head>
     <div
-        class="bg-background text-foreground relative isolate min-h-dvh overflow-x-hidden"
+        class="flex min-h-screen flex-col items-center bg-[#FDFDFC] p-6 text-[#1b1b18] lg:justify-center lg:p-8 dark:bg-[#0a0a0a]"
     >
-        <Head :title="t('welcome.metaTitle')" />
-
-        <div
-            aria-hidden="true"
-            class="bg-brand/10 mask-[linear-gradient(to_bottom,black,transparent)] absolute inset-x-0 top-0 -z-10 h-[34rem]"
-        />
-        <div
-            aria-hidden="true"
-            class="bg-primary/15 absolute left-1/2 top-12 -z-10 size-80 -translate-x-1/2 rounded-full blur-3xl sm:size-[32rem]"
-        />
-
         <header
-            class="mx-auto flex w-full min-w-0 max-w-6xl items-center justify-between gap-3 px-4 py-4 sm:gap-4 sm:px-6 lg:px-8"
+            class="not-has-[nav]:hidden mb-6 w-full max-w-[335px] text-sm lg:max-w-4xl"
         >
-            <Link
-                :href="home()"
-                :aria-label="t('welcome.homeLabel')"
-                class="focus-visible:ring-ring/35 min-w-0 rounded-md outline-none focus-visible:ring-2"
-            >
-                <AppLogo />
-            </Link>
-
-            <nav :aria-label="t('welcome.navigation')" class="shrink-0">
-                <Button as-child variant="outline" size="sm">
-                    <Link v-if="$page.props.auth.user" :href="dashboard()">
-                        {{ t('welcome.action.dashboardShort') }}
-                        <ArrowRight aria-hidden="true" />
+            <nav class="flex items-center justify-end gap-4">
+                <Link
+                    v-if="$page.props.auth.user"
+                    :href="dashboard()"
+                    class="inline-block rounded-sm border border-[#19140035] px-5 py-1.5 text-sm leading-normal text-[#1b1b18] hover:border-[#1915014a] dark:border-[#3E3E3A] dark:text-[#EDEDEC] dark:hover:border-[#62605b]"
+                >
+                    Dashboard
+                </Link>
+                <template v-else>
+                    <Link
+                        :href="login()"
+                        class="inline-block rounded-sm border border-transparent px-5 py-1.5 text-sm leading-normal text-[#1b1b18] hover:border-[#19140035] dark:text-[#EDEDEC] dark:hover:border-[#3E3E3A]"
+                    >
+                        Log in
                     </Link>
-                    <Link v-else :href="login()">
-                        {{ t('welcome.action.signInShort') }}
-                        <ArrowRight aria-hidden="true" />
-                    </Link>
-                </Button>
+                </template>
             </nav>
         </header>
-
-        <main class="min-w-0">
-            <section
-                aria-labelledby="welcome-title"
-                class="mx-auto grid w-full min-w-0 max-w-6xl gap-10 px-4 pb-16 pt-12 sm:px-6 sm:pt-20 lg:px-8 lg:pt-24"
+        <div
+            class="duration-750 starting:opacity-0 flex w-full items-center justify-center opacity-100 transition-opacity lg:grow"
+        >
+            <main
+                class="flex w-full max-w-[335px] flex-col-reverse overflow-hidden rounded-lg lg:max-w-4xl lg:flex-row"
             >
                 <div
-                    class="mx-auto grid w-full min-w-0 max-w-3xl justify-items-center gap-6 text-center"
+                    class="flex-1 rounded-bl-lg rounded-br-lg bg-white p-6 pb-12 text-[13px] leading-[20px] shadow-[inset_0px_0px_0px_1px_rgba(26,26,0,0.16)] lg:rounded-br-none lg:rounded-tl-lg lg:p-20 dark:bg-[#161615] dark:text-[#EDEDEC] dark:shadow-[inset_0px_0px_0px_1px_#fffaed2d]"
                 >
-                    <p
-                        class="border-primary/20 bg-card/80 text-primary text-label shadow-xs rounded-full border px-3 py-1.5 uppercase backdrop-blur"
-                    >
-                        {{ t('welcome.eyebrow') }}
+                    <h1 class="mb-1 font-medium">Let's get started</h1>
+                    <p class="mb-2 text-[#706f6c] dark:text-[#A1A09A]">
+                        Laravel has an incredibly rich ecosystem. <br />We
+                        suggest starting with the following.
                     </p>
-                    <div class="grid gap-4">
-                        <h1
-                            id="welcome-title"
-                            class="text-balance text-4xl font-semibold leading-tight tracking-[-0.04em] sm:text-5xl lg:text-6xl"
-                        >
-                            {{ t('welcome.title') }}
-                        </h1>
-                        <p
-                            class="text-muted-foreground mx-auto max-w-2xl text-pretty text-base leading-7 sm:text-lg"
-                        >
-                            {{ t('welcome.description') }}
-                        </p>
-                    </div>
-                    <Button as-child size="lg">
-                        <Link v-if="$page.props.auth.user" :href="dashboard()">
-                            {{ t('welcome.action.dashboard') }}
-                            <ArrowRight aria-hidden="true" />
-                        </Link>
-                        <Link v-else :href="login()">
-                            {{ t('welcome.action.signIn') }}
-                            <ArrowRight aria-hidden="true" />
-                        </Link>
-                    </Button>
-                    <p class="text-caption text-muted-foreground">
-                        {{ t('welcome.actionHint') }}
-                    </p>
-                </div>
-
-                <section
-                    :aria-label="t('welcome.preview.label')"
-                    class="bg-card/90 min-w-0 rounded-xl border p-3 shadow-[0_24px_80px_-32px_rgba(0,110,47,0.35)] backdrop-blur sm:p-5 dark:shadow-[0_24px_80px_-32px_rgba(74,225,118,0.22)]"
-                >
-                    <div
-                        class="border-border/80 mb-3 flex min-w-0 items-center justify-between gap-3 border-b px-1 pb-3 sm:mb-5 sm:gap-4 sm:px-2 sm:pb-4"
-                    >
-                        <div class="flex shrink-0 gap-1.5" aria-hidden="true">
-                            <span class="bg-border size-2 rounded-full" />
-                            <span class="bg-border size-2 rounded-full" />
-                            <span class="bg-brand size-2 rounded-full" />
-                        </div>
-                        <p
-                            class="text-caption text-muted-foreground min-w-0 truncate"
-                        >
-                            {{ t('welcome.preview.project') }}
-                        </p>
-                        <span
-                            class="bg-success text-success-foreground text-label shrink-0 rounded-full px-2 py-1 uppercase"
-                        >
-                            {{ t('welcome.preview.connected') }}
-                        </span>
-                    </div>
-
-                    <div class="grid min-w-0 gap-3 md:grid-cols-3">
-                        <section
-                            v-for="column in previewColumns"
-                            :key="column.title"
-                            class="bg-muted/70 grid min-w-0 content-start gap-3 rounded-lg border p-3 sm:p-4"
-                        >
-                            <h2 class="text-caption font-semibold">
-                                {{ column.title }}
-                            </h2>
-                            <article
-                                v-for="ticket in column.tickets"
-                                :key="ticket"
-                                class="bg-card text-card-foreground shadow-xs grid min-w-0 gap-3 rounded-md border p-3"
-                            >
-                                <p class="text-body break-words font-medium">
-                                    {{ ticket }}
-                                </p>
-                                <div
-                                    class="flex items-center justify-between gap-3"
-                                    aria-hidden="true"
-                                >
-                                    <span
-                                        class="bg-accent h-1.5 w-16 rounded-full"
-                                    />
-                                    <span
-                                        class="bg-brand size-5 rounded-full"
-                                    />
-                                </div>
-                            </article>
-                        </section>
-                    </div>
-                </section>
-            </section>
-
-            <section
-                aria-labelledby="welcome-features-title"
-                class="border-border/80 bg-card/60 border-y"
-            >
-                <div
-                    class="mx-auto grid w-full max-w-6xl gap-8 px-4 py-14 sm:px-6 lg:px-8"
-                >
-                    <div class="mx-auto grid max-w-2xl gap-3 text-center">
-                        <p class="text-label text-primary uppercase">
-                            {{ t('welcome.features.eyebrow') }}
-                        </p>
-                        <h2
-                            id="welcome-features-title"
-                            class="text-headline-mobile sm:text-headline"
-                        >
-                            {{ t('welcome.features.title') }}
-                        </h2>
-                    </div>
-
-                    <ul class="grid gap-4 md:grid-cols-3">
+                    <ul class="mb-4 flex flex-col lg:mb-6">
                         <li
-                            v-for="feature in features"
-                            :key="feature.title"
-                            class="bg-card shadow-xs grid gap-4 rounded-lg border p-5"
+                            class="relative flex items-center gap-4 py-2 before:absolute before:bottom-0 before:left-[0.4rem] before:top-1/2 before:border-l before:border-[#e3e3e0] dark:before:border-[#3E3E3A]"
                         >
                             <span
-                                class="bg-accent text-primary flex size-10 items-center justify-center rounded-md"
+                                class="relative bg-white py-1 dark:bg-[#161615]"
                             >
-                                <component
-                                    :is="feature.icon"
-                                    class="size-5"
-                                    aria-hidden="true"
-                                />
-                            </span>
-                            <div class="grid gap-2">
-                                <h3 class="text-title">
-                                    {{ feature.title }}
-                                </h3>
-                                <p
-                                    class="text-muted-foreground text-pretty leading-6"
+                                <span
+                                    class="flex h-3.5 w-3.5 items-center justify-center rounded-full border border-[#e3e3e0] bg-[#FDFDFC] shadow-[0px_0px_1px_0px_rgba(0,0,0,0.03),0px_1px_2px_0px_rgba(0,0,0,0.06)] dark:border-[#3E3E3A] dark:bg-[#161615]"
                                 >
-                                    {{ feature.description }}
-                                </p>
-                            </div>
+                                    <span
+                                        class="h-1.5 w-1.5 rounded-full bg-[#dbdbd7] dark:bg-[#3E3E3A]"
+                                    />
+                                </span>
+                            </span>
+                            <span>
+                                Read the
+                                <a
+                                    href="https://laravel.com/docs"
+                                    target="_blank"
+                                    class="ml-1 inline-flex items-center space-x-1 font-medium text-[#f53003] underline underline-offset-4 dark:text-[#FF4433]"
+                                >
+                                    <span>Documentation</span>
+                                    <svg
+                                        width="10"
+                                        height="11"
+                                        viewBox="0 0 10 11"
+                                        fill="none"
+                                        xmlns="http://www.w3.org/2000/svg"
+                                        class="h-2.5 w-2.5"
+                                    >
+                                        <path
+                                            d="M7.70833 6.95834V2.79167H3.54167M2.5 8L7.5 3.00001"
+                                            stroke="currentColor"
+                                            stroke-linecap="square"
+                                        />
+                                    </svg>
+                                </a>
+                            </span>
+                        </li>
+                        <li
+                            class="relative flex items-center gap-4 py-2 before:absolute before:bottom-1/2 before:left-[0.4rem] before:top-0 before:border-l before:border-[#e3e3e0] dark:before:border-[#3E3E3A]"
+                        >
+                            <span
+                                class="relative bg-white py-1 dark:bg-[#161615]"
+                            >
+                                <span
+                                    class="flex h-3.5 w-3.5 items-center justify-center rounded-full border border-[#e3e3e0] bg-[#FDFDFC] shadow-[0px_0px_1px_0px_rgba(0,0,0,0.03),0px_1px_2px_0px_rgba(0,0,0,0.06)] dark:border-[#3E3E3A] dark:bg-[#161615]"
+                                >
+                                    <span
+                                        class="h-1.5 w-1.5 rounded-full bg-[#dbdbd7] dark:bg-[#3E3E3A]"
+                                    />
+                                </span>
+                            </span>
+                            <span>
+                                Watch video tutorials at
+                                <a
+                                    href="https://laracasts.com"
+                                    target="_blank"
+                                    class="ml-1 inline-flex items-center space-x-1 font-medium text-[#f53003] underline underline-offset-4 dark:text-[#FF4433]"
+                                >
+                                    <span>Laracasts</span>
+                                    <svg
+                                        width="10"
+                                        height="11"
+                                        viewBox="0 0 10 11"
+                                        fill="none"
+                                        xmlns="http://www.w3.org/2000/svg"
+                                        class="h-2.5 w-2.5"
+                                    >
+                                        <path
+                                            d="M7.70833 6.95834V2.79167H3.54167M2.5 8L7.5 3.00001"
+                                            stroke="currentColor"
+                                            stroke-linecap="square"
+                                        />
+                                    </svg>
+                                </a>
+                            </span>
+                        </li>
+                    </ul>
+                    <ul class="flex gap-3 text-sm leading-normal">
+                        <li>
+                            <a
+                                href="https://cloud.laravel.com"
+                                target="_blank"
+                                class="inline-block rounded-sm border border-black bg-[#1b1b18] px-5 py-1.5 text-sm leading-normal text-white hover:border-black hover:bg-black dark:border-[#eeeeec] dark:bg-[#eeeeec] dark:text-[#1C1C1A] dark:hover:border-white dark:hover:bg-white"
+                            >
+                                Deploy now
+                            </a>
                         </li>
                     </ul>
                 </div>
-            </section>
-        </main>
+                <div
+                    class="relative -mb-px aspect-[335/364] w-full shrink-0 overflow-hidden rounded-t-lg bg-[#fff2f2] lg:-ml-px lg:mb-0 lg:aspect-auto lg:w-[438px] lg:rounded-r-lg lg:rounded-t-none dark:bg-[#1D0002]"
+                >
+                    <!-- Laravel Logo -->
+                    <svg
+                        class="duration-750 starting:opacity-0 motion-safe:starting:translate-y-6 w-full max-w-none translate-y-0 text-[#F53003] opacity-100 transition-all dark:text-[#F61500]"
+                        viewBox="0 0 438 104"
+                        fill="none"
+                        xmlns="http://www.w3.org/2000/svg"
+                    >
+                        <path
+                            d="M17.2036 -3H0V102.197H49.5189V86.7187H17.2036V-3Z"
+                            fill="currentColor"
+                        />
+                        <path
+                            d="M110.256 41.6337C108.061 38.1275 104.945 35.3731 100.905 33.3681C96.8667 31.3647 92.8016 30.3618 88.7131 30.3618C83.4247 30.3618 78.5885 31.3389 74.201 33.2923C69.8111 35.2456 66.0474 37.928 62.9059 41.3333C59.7643 44.7401 57.3198 48.6726 55.5754 53.1293C53.8287 57.589 52.9572 62.274 52.9572 67.1813C52.9572 72.1925 53.8287 76.8995 55.5754 81.3069C57.3191 85.7173 59.7636 89.6241 62.9059 93.0293C66.0474 96.4361 69.8119 99.1155 74.201 101.069C78.5885 103.022 83.4247 103.999 88.7131 103.999C92.8016 103.999 96.8667 102.997 100.905 100.994C104.945 98.9911 108.061 96.2359 110.256 92.7282V102.195H126.563V32.1642H110.256V41.6337ZM108.76 75.7472C107.762 78.4531 106.366 80.8078 104.572 82.8112C102.776 84.8161 100.606 86.4183 98.0637 87.6206C95.5202 88.823 92.7004 89.4238 89.6103 89.4238C86.5178 89.4238 83.7252 88.823 81.2324 87.6206C78.7388 86.4183 76.5949 84.8161 74.7998 82.8112C73.004 80.8078 71.6319 78.4531 70.6856 75.7472C69.7356 73.0421 69.2644 70.1868 69.2644 67.1821C69.2644 64.1758 69.7356 61.3205 70.6856 58.6154C71.6319 55.9102 73.004 53.5571 74.7998 51.5522C76.5949 49.5495 78.738 47.9451 81.2324 46.7427C83.7252 45.5404 86.5178 44.9396 89.6103 44.9396C92.7012 44.9396 95.5202 45.5404 98.0637 46.7427C100.606 47.9451 102.776 49.5487 104.572 51.5522C106.367 53.5571 107.762 55.9102 108.76 58.6154C109.756 61.3205 110.256 64.1758 110.256 67.1821C110.256 70.1868 109.756 73.0421 108.76 75.7472Z"
+                            fill="currentColor"
+                        />
+                        <path
+                            d="M242.805 41.6337C240.611 38.1275 237.494 35.3731 233.455 33.3681C229.416 31.3647 225.351 30.3618 221.262 30.3618C215.974 30.3618 211.138 31.3389 206.75 33.2923C202.36 35.2456 198.597 37.928 195.455 41.3333C192.314 44.7401 189.869 48.6726 188.125 53.1293C186.378 57.589 185.507 62.274 185.507 67.1813C185.507 72.1925 186.378 76.8995 188.125 81.3069C189.868 85.7173 192.313 89.6241 195.455 93.0293C198.597 96.4361 202.361 99.1155 206.75 101.069C211.138 103.022 215.974 103.999 221.262 103.999C225.351 103.999 229.416 102.997 233.455 100.994C237.494 98.9911 240.611 96.2359 242.805 92.7282V102.195H259.112V32.1642H242.805V41.6337ZM241.31 75.7472C240.312 78.4531 238.916 80.8078 237.122 82.8112C235.326 84.8161 233.156 86.4183 230.614 87.6206C228.07 88.823 225.251 89.4238 222.16 89.4238C219.068 89.4238 216.275 88.823 213.782 87.6206C211.289 86.4183 209.145 84.8161 207.35 82.8112C205.554 80.8078 204.182 78.4531 203.236 75.7472C202.286 73.0421 201.814 70.1868 201.814 67.1821C201.814 64.1758 202.286 61.3205 203.236 58.6154C204.182 55.9102 205.554 53.5571 207.35 51.5522C209.145 49.5495 211.288 47.9451 213.782 46.7427C216.275 45.5404 219.068 44.9396 222.16 44.9396C225.251 44.9396 228.07 45.5404 230.614 46.7427C233.156 47.9451 235.326 49.5487 237.122 51.5522C238.917 53.5571 240.312 55.9102 241.31 58.6154C242.306 61.3205 242.806 64.1758 242.806 67.1821C242.805 70.1868 242.305 73.0421 241.31 75.7472Z"
+                            fill="currentColor"
+                        />
+                        <path
+                            d="M438 -3H421.694V102.197H438V-3Z"
+                            fill="currentColor"
+                        />
+                        <path
+                            d="M139.43 102.197H155.735V48.2834H183.712V32.1665H139.43V102.197Z"
+                            fill="currentColor"
+                        />
+                        <path
+                            d="M324.49 32.1665L303.995 85.794L283.498 32.1665H266.983L293.748 102.197H314.242L341.006 32.1665H324.49Z"
+                            fill="currentColor"
+                        />
+                        <path
+                            d="M376.571 30.3656C356.603 30.3656 340.797 46.8497 340.797 67.1828C340.797 89.6597 356.094 104 378.661 104C391.29 104 399.354 99.1488 409.206 88.5848L398.189 80.0226C398.183 80.031 389.874 90.9895 377.468 90.9895C363.048 90.9895 356.977 79.3111 356.977 73.269H411.075C413.917 50.1328 398.775 30.3656 376.571 30.3656ZM357.02 61.0967C357.145 59.7487 359.023 43.3761 376.442 43.3761C393.861 43.3761 395.978 59.7464 396.099 61.0967H357.02Z"
+                            fill="currentColor"
+                        />
+                    </svg>
 
-        <footer
-            class="text-caption text-muted-foreground mx-auto flex w-full max-w-6xl flex-col gap-2 px-4 py-8 text-center sm:px-6 lg:px-8"
-        >
-            <p class="text-foreground font-semibold">KanbanGit</p>
-            <p>{{ t('welcome.footer') }}</p>
-        </footer>
+                    <!-- 13 -->
+                    <svg
+                        class="relative -ml-8 -mt-[6.6rem] w-[438px] max-w-none [--stroke-color:#1B1B18] lg:ml-0 dark:[--stroke-color:#FF750F]"
+                        viewBox="0 0 440 392"
+                        fill="none"
+                        xmlns="http://www.w3.org/2000/svg"
+                    >
+                        <g
+                            class="duration-750 starting:opacity-0 text-[#1B1B18] opacity-100 mix-blend-darken transition-all delay-300 dark:text-black dark:mix-blend-normal"
+                        >
+                            <mask
+                                id="path-1-mask"
+                                maskUnits="userSpaceOnUse"
+                                x="-0.328613"
+                                y="103"
+                                width="338"
+                                height="299"
+                                fill="black"
+                            >
+                                <rect
+                                    fill="white"
+                                    x="-0.328613"
+                                    y="103"
+                                    width="338"
+                                    height="299"
+                                />
+                                <path
+                                    d="M234.936 400.8C204.136 400.8 178.936 392.4 159.336 375.6C140.136 358.8 130.536 337 130.536 310.2H200.736C200.736 318.2 203.736 324.8 209.736 330C215.736 335.2 223.736 337.8 233.736 337.8C243.336 337.8 251.136 335 257.136 329.4C263.536 323.8 266.736 316.6 266.736 307.8C266.736 299.8 263.936 293.2 258.336 288C252.736 282.8 245.536 280.2 236.736 280.2H199.536V218.4H236.736C243.536 218.4 249.336 216 254.136 211.2C258.936 206.4 261.336 200.4 261.336 193.2C261.336 184.8 258.736 178.2 253.536 173.4C248.336 168.6 241.736 166.2 233.736 166.2C226.536 166.2 220.336 168.4 215.136 172.8C210.336 177.2 207.936 182.8 207.936 189.6H141.336C141.336 164.8 150.136 144.6 167.736 129C185.336 113 207.936 105 235.536 105C263.136 105 285.536 112.2 302.736 126.6C320.336 141 329.136 160 329.136 183.6C329.136 200.8 324.536 214.8 315.336 225.6C306.136 236 294.336 243.2 279.936 247.2C297.136 252 310.736 260.2 320.736 271.8C331.136 283.4 336.336 298 336.336 315.6C336.336 340.4 326.936 360.8 308.136 376.8C289.336 392.8 264.936 400.8 234.936 400.8Z"
+                                />
+                                <path
+                                    d="M26.8714 167.6H1.67139V105.2H94.6714V400.2H26.8714V167.6Z"
+                                />
+                            </mask>
+                            <path
+                                d="M234.936 400.8C204.136 400.8 178.936 392.4 159.336 375.6C140.136 358.8 130.536 337 130.536 310.2H200.736C200.736 318.2 203.736 324.8 209.736 330C215.736 335.2 223.736 337.8 233.736 337.8C243.336 337.8 251.136 335 257.136 329.4C263.536 323.8 266.736 316.6 266.736 307.8C266.736 299.8 263.936 293.2 258.336 288C252.736 282.8 245.536 280.2 236.736 280.2H199.536V218.4H236.736C243.536 218.4 249.336 216 254.136 211.2C258.936 206.4 261.336 200.4 261.336 193.2C261.336 184.8 258.736 178.2 253.536 173.4C248.336 168.6 241.736 166.2 233.736 166.2C226.536 166.2 220.336 168.4 215.136 172.8C210.336 177.2 207.936 182.8 207.936 189.6H141.336C141.336 164.8 150.136 144.6 167.736 129C185.336 113 207.936 105 235.536 105C263.136 105 285.536 112.2 302.736 126.6C320.336 141 329.136 160 329.136 183.6C329.136 200.8 324.536 214.8 315.336 225.6C306.136 236 294.336 243.2 279.936 247.2C297.136 252 310.736 260.2 320.736 271.8C331.136 283.4 336.336 298 336.336 315.6C336.336 340.4 326.936 360.8 308.136 376.8C289.336 392.8 264.936 400.8 234.936 400.8Z"
+                                fill="currentColor"
+                            />
+                            <path
+                                d="M26.8714 167.6H1.67139V105.2H94.6714V400.2H26.8714V167.6Z"
+                                fill="currentColor"
+                            />
+                            <path
+                                d="M234.936 400.8C204.136 400.8 178.936 392.4 159.336 375.6C140.136 358.8 130.536 337 130.536 310.2H200.736C200.736 318.2 203.736 324.8 209.736 330C215.736 335.2 223.736 337.8 233.736 337.8C243.336 337.8 251.136 335 257.136 329.4C263.536 323.8 266.736 316.6 266.736 307.8C266.736 299.8 263.936 293.2 258.336 288C252.736 282.8 245.536 280.2 236.736 280.2H199.536V218.4H236.736C243.536 218.4 249.336 216 254.136 211.2C258.936 206.4 261.336 200.4 261.336 193.2C261.336 184.8 258.736 178.2 253.536 173.4C248.336 168.6 241.736 166.2 233.736 166.2C226.536 166.2 220.336 168.4 215.136 172.8C210.336 177.2 207.936 182.8 207.936 189.6H141.336C141.336 164.8 150.136 144.6 167.736 129C185.336 113 207.936 105 235.536 105C263.136 105 285.536 112.2 302.736 126.6C320.336 141 329.136 160 329.136 183.6C329.136 200.8 324.536 214.8 315.336 225.6C306.136 236 294.336 243.2 279.936 247.2C297.136 252 310.736 260.2 320.736 271.8C331.136 283.4 336.336 298 336.336 315.6C336.336 340.4 326.936 360.8 308.136 376.8C289.336 392.8 264.936 400.8 234.936 400.8Z"
+                                stroke="var(--stroke-color)"
+                                stroke-width="2.4"
+                                mask="url(#path-1-mask)"
+                            />
+                            <path
+                                d="M26.8714 167.6H1.67139V105.2H94.6714V400.2H26.8714V167.6Z"
+                                stroke="var(--stroke-color)"
+                                stroke-width="2.4"
+                                mask="url(#path-1-mask)"
+                            />
+                        </g>
+
+                        <g
+                            class="delay-400 duration-750 starting:opacity-0 motion-safe:starting:-translate-x-[26px] text-[#F3BEC7] opacity-100 transition-all dark:text-[#4B0600]"
+                        >
+                            <mask
+                                id="path-2-mask"
+                                maskUnits="userSpaceOnUse"
+                                x="25.3357"
+                                y="103"
+                                width="338"
+                                height="299"
+                                fill="black"
+                            >
+                                <rect
+                                    fill="white"
+                                    x="25.3357"
+                                    y="103"
+                                    width="338"
+                                    height="299"
+                                />
+                                <path
+                                    d="M260.6 400.8C229.8 400.8 204.6 392.4 185 375.6C165.8 358.8 156.2 337 156.2 310.2H226.4C226.4 318.2 229.4 324.8 235.4 330C241.4 335.2 249.4 337.8 259.4 337.8C269 337.8 276.8 335 282.8 329.4C289.2 323.8 292.4 316.6 292.4 307.8C292.4 299.8 289.6 293.2 284 288C278.4 282.8 271.2 280.2 262.4 280.2H225.2V218.4H262.4C269.2 218.4 275 216 279.8 211.2C284.6 206.4 287 200.4 287 193.2C287 184.8 284.4 178.2 279.2 173.4C274 168.6 267.4 166.2 259.4 166.2C252.2 166.2 246 168.4 240.8 172.8C236 177.2 233.6 182.8 233.6 189.6H167C167 164.8 175.8 144.6 193.4 129C211 113 233.6 105 261.2 105C288.8 105 311.2 112.2 328.4 126.6C346 141 354.8 160 354.8 183.6C354.8 200.8 350.2 214.8 341 225.6C331.8 236 320 243.2 305.6 247.2C322.8 252 336.4 260.2 346.4 271.8C356.8 283.4 362 298 362 315.6C362 340.4 352.6 360.8 333.8 376.8C315 392.8 290.6 400.8 260.6 400.8Z"
+                                />
+                                <path
+                                    d="M52.5357 167.6H27.3357V105.2H120.336V400.2H52.5357V167.6Z"
+                                />
+                            </mask>
+                            <path
+                                d="M260.6 400.8C229.8 400.8 204.6 392.4 185 375.6C165.8 358.8 156.2 337 156.2 310.2H226.4C226.4 318.2 229.4 324.8 235.4 330C241.4 335.2 249.4 337.8 259.4 337.8C269 337.8 276.8 335 282.8 329.4C289.2 323.8 292.4 316.6 292.4 307.8C292.4 299.8 289.6 293.2 284 288C278.4 282.8 271.2 280.2 262.4 280.2H225.2V218.4H262.4C269.2 218.4 275 216 279.8 211.2C284.6 206.4 287 200.4 287 193.2C287 184.8 284.4 178.2 279.2 173.4C274 168.6 267.4 166.2 259.4 166.2C252.2 166.2 246 168.4 240.8 172.8C236 177.2 233.6 182.8 233.6 189.6H167C167 164.8 175.8 144.6 193.4 129C211 113 233.6 105 261.2 105C288.8 105 311.2 112.2 328.4 126.6C346 141 354.8 160 354.8 183.6C354.8 200.8 350.2 214.8 341 225.6C331.8 236 320 243.2 305.6 247.2C322.8 252 336.4 260.2 346.4 271.8C356.8 283.4 362 298 362 315.6C362 340.4 352.6 360.8 333.8 376.8C315 392.8 290.6 400.8 260.6 400.8Z"
+                                fill="currentColor"
+                            />
+                            <path
+                                d="M52.5357 167.6H27.3357V105.2H120.336V400.2H52.5357V167.6Z"
+                                fill="currentColor"
+                            />
+                            <path
+                                d="M260.6 400.8C229.8 400.8 204.6 392.4 185 375.6C165.8 358.8 156.2 337 156.2 310.2H226.4C226.4 318.2 229.4 324.8 235.4 330C241.4 335.2 249.4 337.8 259.4 337.8C269 337.8 276.8 335 282.8 329.4C289.2 323.8 292.4 316.6 292.4 307.8C292.4 299.8 289.6 293.2 284 288C278.4 282.8 271.2 280.2 262.4 280.2H225.2V218.4H262.4C269.2 218.4 275 216 279.8 211.2C284.6 206.4 287 200.4 287 193.2C287 184.8 284.4 178.2 279.2 173.4C274 168.6 267.4 166.2 259.4 166.2C252.2 166.2 246 168.4 240.8 172.8C236 177.2 233.6 182.8 233.6 189.6H167C167 164.8 175.8 144.6 193.4 129C211 113 233.6 105 261.2 105C288.8 105 311.2 112.2 328.4 126.6C346 141 354.8 160 354.8 183.6C354.8 200.8 350.2 214.8 341 225.6C331.8 236 320 243.2 305.6 247.2C322.8 252 336.4 260.2 346.4 271.8C356.8 283.4 362 298 362 315.6C362 340.4 352.6 360.8 333.8 376.8C315 392.8 290.6 400.8 260.6 400.8Z"
+                                stroke="var(--stroke-color)"
+                                stroke-width="2.4"
+                                mask="url(#path-2-mask)"
+                            />
+                            <path
+                                d="M52.5357 167.6H27.3357V105.2H120.336V400.2H52.5357V167.6Z"
+                                stroke="var(--stroke-color)"
+                                stroke-width="2.4"
+                                mask="url(#path-2-mask)"
+                            />
+                        </g>
+
+                        <g
+                            class="delay-400 duration-750 starting:opacity-0 motion-safe:starting:-translate-x-[51px] text-[#F8B803] opacity-100 mix-blend-color transition-all dark:text-[#391800] dark:mix-blend-hard-light"
+                        >
+                            <mask
+                                id="path-3-mask"
+                                maskUnits="userSpaceOnUse"
+                                x="51"
+                                y="103"
+                                width="338"
+                                height="299"
+                                fill="black"
+                            >
+                                <rect
+                                    fill="white"
+                                    x="51"
+                                    y="103"
+                                    width="338"
+                                    height="299"
+                                />
+                                <path
+                                    d="M286.264 400.8C255.464 400.8 230.264 392.4 210.664 375.6C191.464 358.8 181.864 337 181.864 310.2H252.064C252.064 318.2 255.064 324.8 261.064 330C267.064 335.2 275.064 337.8 285.064 337.8C294.664 337.8 302.464 335 308.464 329.4C314.864 323.8 318.064 316.6 318.064 307.8C318.064 299.8 315.264 293.2 309.664 288C304.064 282.8 296.864 280.2 288.064 280.2H250.864V218.4H288.064C294.864 218.4 300.664 216 305.464 211.2C310.264 206.4 312.664 200.4 312.664 193.2C312.664 184.8 310.064 178.2 304.864 173.4C299.664 168.6 293.064 166.2 285.064 166.2C277.864 166.2 271.664 168.4 266.464 172.8C261.664 177.2 259.264 182.8 259.264 189.6H192.664C192.664 164.8 201.464 144.6 219.064 129C236.664 113 259.264 105 286.864 105C314.464 105 336.864 112.2 354.064 126.6C371.664 141 380.464 160 380.464 183.6C380.464 200.8 375.864 214.8 366.664 225.6C357.464 236 345.664 243.2 331.264 247.2C348.464 252 362.064 260.2 372.064 271.8C382.464 283.4 387.664 298 387.664 315.6C387.664 340.4 378.264 360.8 359.464 376.8C340.664 392.8 316.264 400.8 286.264 400.8Z"
+                                />
+                                <path
+                                    d="M78.2 167.6H53V105.2H146V400.2H78.2V167.6Z"
+                                />
+                            </mask>
+                            <path
+                                d="M286.264 400.8C255.464 400.8 230.264 392.4 210.664 375.6C191.464 358.8 181.864 337 181.864 310.2H252.064C252.064 318.2 255.064 324.8 261.064 330C267.064 335.2 275.064 337.8 285.064 337.8C294.664 337.8 302.464 335 308.464 329.4C314.864 323.8 318.064 316.6 318.064 307.8C318.064 299.8 315.264 293.2 309.664 288C304.064 282.8 296.864 280.2 288.064 280.2H250.864V218.4H288.064C294.864 218.4 300.664 216 305.464 211.2C310.264 206.4 312.664 200.4 312.664 193.2C312.664 184.8 310.064 178.2 304.864 173.4C299.664 168.6 293.064 166.2 285.064 166.2C277.864 166.2 271.664 168.4 266.464 172.8C261.664 177.2 259.264 182.8 259.264 189.6H192.664C192.664 164.8 201.464 144.6 219.064 129C236.664 113 259.264 105 286.864 105C314.464 105 336.864 112.2 354.064 126.6C371.664 141 380.464 160 380.464 183.6C380.464 200.8 375.864 214.8 366.664 225.6C357.464 236 345.664 243.2 331.264 247.2C348.464 252 362.064 260.2 372.064 271.8C382.464 283.4 387.664 298 387.664 315.6C387.664 340.4 378.264 360.8 359.464 376.8C340.664 392.8 316.264 400.8 286.264 400.8Z"
+                                fill="currentColor"
+                            />
+                            <path
+                                d="M78.2 167.6H53V105.2H146V400.2H78.2V167.6Z"
+                                fill="currentColor"
+                            />
+                            <path
+                                d="M286.264 400.8C255.464 400.8 230.264 392.4 210.664 375.6C191.464 358.8 181.864 337 181.864 310.2H252.064C252.064 318.2 255.064 324.8 261.064 330C267.064 335.2 275.064 337.8 285.064 337.8C294.664 337.8 302.464 335 308.464 329.4C314.864 323.8 318.064 316.6 318.064 307.8C318.064 299.8 315.264 293.2 309.664 288C304.064 282.8 296.864 280.2 288.064 280.2H250.864V218.4H288.064C294.864 218.4 300.664 216 305.464 211.2C310.264 206.4 312.664 200.4 312.664 193.2C312.664 184.8 310.064 178.2 304.864 173.4C299.664 168.6 293.064 166.2 285.064 166.2C277.864 166.2 271.664 168.4 266.464 172.8C261.664 177.2 259.264 182.8 259.264 189.6H192.664C192.664 164.8 201.464 144.6 219.064 129C236.664 113 259.264 105 286.864 105C314.464 105 336.864 112.2 354.064 126.6C371.664 141 380.464 160 380.464 183.6C380.464 200.8 375.864 214.8 366.664 225.6C357.464 236 345.664 243.2 331.264 247.2C348.464 252 362.064 260.2 372.064 271.8C382.464 283.4 387.664 298 387.664 315.6C387.664 340.4 378.264 360.8 359.464 376.8C340.664 392.8 316.264 400.8 286.264 400.8Z"
+                                stroke="var(--stroke-color)"
+                                stroke-width="2.4"
+                                mask="url(#path-3-mask)"
+                            />
+                            <path
+                                d="M78.2 167.6H53V105.2H146V400.2H78.2V167.6Z"
+                                stroke="var(--stroke-color)"
+                                stroke-width="2.4"
+                                mask="url(#path-3-mask)"
+                            />
+                        </g>
+
+                        <g
+                            class="delay-400 duration-750 starting:opacity-0 motion-safe:starting:-translate-x-[78px] text-[#F3BEC7] opacity-100 mix-blend-multiply transition-all dark:text-[#733000] dark:mix-blend-normal"
+                        >
+                            <mask
+                                id="path-4-mask"
+                                maskUnits="userSpaceOnUse"
+                                x="76.6643"
+                                y="103"
+                                width="338"
+                                height="299"
+                                fill="black"
+                            >
+                                <rect
+                                    fill="white"
+                                    x="76.6643"
+                                    y="103"
+                                    width="338"
+                                    height="299"
+                                />
+                                <path
+                                    d="M311.929 400.8C281.129 400.8 255.929 392.4 236.329 375.6C217.129 358.8 207.529 337 207.529 310.2H277.729C277.729 318.2 280.729 324.8 286.729 330C292.729 335.2 300.729 337.8 310.729 337.8C320.329 337.8 328.129 335 334.129 329.4C340.529 323.8 343.729 316.6 343.729 307.8C343.729 299.8 340.929 293.2 335.329 288C329.729 282.8 322.529 280.2 313.729 280.2H276.529V218.4H313.729C320.529 218.4 326.329 216 331.129 211.2C335.929 206.4 338.329 200.4 338.329 193.2C338.329 184.8 335.729 178.2 330.529 173.4C325.329 168.6 318.729 166.2 310.729 166.2C303.529 166.2 297.329 168.4 292.129 172.8C287.329 177.2 284.929 182.8 284.929 189.6H218.329C218.329 164.8 227.129 144.6 244.729 129C262.329 113 284.929 105 312.529 105C340.129 105 362.529 112.2 379.729 126.6C397.329 141 406.129 160 406.129 183.6C406.129 200.8 401.529 214.8 392.329 225.6C383.129 236 371.329 243.2 356.929 247.2C374.129 252 387.729 260.2 397.729 271.8C408.129 283.4 413.329 298 413.329 315.6C413.329 340.4 403.929 360.8 385.129 376.8C366.329 392.8 341.929 400.8 311.929 400.8Z"
+                                />
+                                <path
+                                    d="M103.864 167.6H78.6643V105.2H171.664V400.2H103.864V167.6Z"
+                                />
+                            </mask>
+                            <path
+                                d="M311.929 400.8C281.129 400.8 255.929 392.4 236.329 375.6C217.129 358.8 207.529 337 207.529 310.2H277.729C277.729 318.2 280.729 324.8 286.729 330C292.729 335.2 300.729 337.8 310.729 337.8C320.329 337.8 328.129 335 334.129 329.4C340.529 323.8 343.729 316.6 343.729 307.8C343.729 299.8 340.929 293.2 335.329 288C329.729 282.8 322.529 280.2 313.729 280.2H276.529V218.4H313.729C320.529 218.4 326.329 216 331.129 211.2C335.929 206.4 338.329 200.4 338.329 193.2C338.329 184.8 335.729 178.2 330.529 173.4C325.329 168.6 318.729 166.2 310.729 166.2C303.529 166.2 297.329 168.4 292.129 172.8C287.329 177.2 284.929 182.8 284.929 189.6H218.329C218.329 164.8 227.129 144.6 244.729 129C262.329 113 284.929 105 312.529 105C340.129 105 362.529 112.2 379.729 126.6C397.329 141 406.129 160 406.129 183.6C406.129 200.8 401.529 214.8 392.329 225.6C383.129 236 371.329 243.2 356.929 247.2C374.129 252 387.729 260.2 397.729 271.8C408.129 283.4 413.329 298 413.329 315.6C413.329 340.4 403.929 360.8 385.129 376.8C366.329 392.8 341.929 400.8 311.929 400.8Z"
+                                fill="currentColor"
+                            />
+                            <path
+                                d="M103.864 167.6H78.6643V105.2H171.664V400.2H103.864V167.6Z"
+                                fill="currentColor"
+                            />
+                            <path
+                                d="M311.929 400.8C281.129 400.8 255.929 392.4 236.329 375.6C217.129 358.8 207.529 337 207.529 310.2H277.729C277.729 318.2 280.729 324.8 286.729 330C292.729 335.2 300.729 337.8 310.729 337.8C320.329 337.8 328.129 335 334.129 329.4C340.529 323.8 343.729 316.6 343.729 307.8C343.729 299.8 340.929 293.2 335.329 288C329.729 282.8 322.529 280.2 313.729 280.2H276.529V218.4H313.729C320.529 218.4 326.329 216 331.129 211.2C335.929 206.4 338.329 200.4 338.329 193.2C338.329 184.8 335.729 178.2 330.529 173.4C325.329 168.6 318.729 166.2 310.729 166.2C303.529 166.2 297.329 168.4 292.129 172.8C287.329 177.2 284.929 182.8 284.929 189.6H218.329C218.329 164.8 227.129 144.6 244.729 129C262.329 113 284.929 105 312.529 105C340.129 105 362.529 112.2 379.729 126.6C397.329 141 406.129 160 406.129 183.6C406.129 200.8 401.529 214.8 392.329 225.6C383.129 236 371.329 243.2 356.929 247.2C374.129 252 387.729 260.2 397.729 271.8C408.129 283.4 413.329 298 413.329 315.6C413.329 340.4 403.929 360.8 385.129 376.8C366.329 392.8 341.929 400.8 311.929 400.8Z"
+                                stroke="var(--stroke-color)"
+                                stroke-width="2.4"
+                                mask="url(#path-4-mask)"
+                            />
+                            <path
+                                d="M103.864 167.6H78.6643V105.2H171.664V400.2H103.864V167.6Z"
+                                stroke="var(--stroke-color)"
+                                stroke-width="2.4"
+                                mask="url(#path-4-mask)"
+                            />
+                        </g>
+
+                        <g
+                            class="delay-400 duration-750 starting:opacity-0 motion-safe:starting:-translate-x-[102px] text-[#F3BEC7] opacity-100 mix-blend-hard-light transition-all dark:text-[#4B0600]"
+                        >
+                            <mask
+                                id="path-5-mask"
+                                maskUnits="userSpaceOnUse"
+                                x="102.329"
+                                y="103"
+                                width="338"
+                                height="299"
+                                fill="black"
+                            >
+                                <rect
+                                    fill="white"
+                                    x="102.329"
+                                    y="103"
+                                    width="338"
+                                    height="299"
+                                />
+                                <path
+                                    d="M337.593 400.8C306.793 400.8 281.593 392.4 261.993 375.6C242.793 358.8 233.193 337 233.193 310.2H303.393C303.393 318.2 306.393 324.8 312.393 330C318.393 335.2 326.393 337.8 336.393 337.8C345.993 337.8 353.793 335 359.793 329.4C366.193 323.8 369.393 316.6 369.393 307.8C369.393 299.8 366.593 293.2 360.993 288C355.393 282.8 348.193 280.2 339.393 280.2H302.193V218.4H339.393C346.193 218.4 351.993 216 356.793 211.2C361.593 206.4 363.993 200.4 363.993 193.2C363.993 184.8 361.393 178.2 356.193 173.4C350.993 168.6 344.393 166.2 336.393 166.2C329.193 166.2 322.993 168.4 317.793 172.8C312.993 177.2 310.593 182.8 310.593 189.6H243.993C243.993 164.8 252.793 144.6 270.393 129C287.993 113 310.593 105 338.193 105C365.793 105 388.193 112.2 405.393 126.6C422.993 141 431.793 160 431.793 183.6C431.793 200.8 427.193 214.8 417.993 225.6C408.793 236 396.993 243.2 382.593 247.2C399.793 252 413.393 260.2 423.393 271.8C433.793 283.4 438.993 298 438.993 315.6C438.993 340.4 429.593 360.8 410.793 376.8C391.993 392.8 367.593 400.8 337.593 400.8Z"
+                                />
+                                <path
+                                    d="M129.529 167.6H104.329V105.2H197.329V400.2H129.529V167.6Z"
+                                />
+                            </mask>
+                            <path
+                                d="M337.593 400.8C306.793 400.8 281.593 392.4 261.993 375.6C242.793 358.8 233.193 337 233.193 310.2H303.393C303.393 318.2 306.393 324.8 312.393 330C318.393 335.2 326.393 337.8 336.393 337.8C345.993 337.8 353.793 335 359.793 329.4C366.193 323.8 369.393 316.6 369.393 307.8C369.393 299.8 366.593 293.2 360.993 288C355.393 282.8 348.193 280.2 339.393 280.2H302.193V218.4H339.393C346.193 218.4 351.993 216 356.793 211.2C361.593 206.4 363.993 200.4 363.993 193.2C363.993 184.8 361.393 178.2 356.193 173.4C350.993 168.6 344.393 166.2 336.393 166.2C329.193 166.2 322.993 168.4 317.793 172.8C312.993 177.2 310.593 182.8 310.593 189.6H243.993C243.993 164.8 252.793 144.6 270.393 129C287.993 113 310.593 105 338.193 105C365.793 105 388.193 112.2 405.393 126.6C422.993 141 431.793 160 431.793 183.6C431.793 200.8 427.193 214.8 417.993 225.6C408.793 236 396.993 243.2 382.593 247.2C399.793 252 413.393 260.2 423.393 271.8C433.793 283.4 438.993 298 438.993 315.6C438.993 340.4 429.593 360.8 410.793 376.8C391.993 392.8 367.593 400.8 337.593 400.8Z"
+                                fill="currentColor"
+                            />
+                            <path
+                                d="M129.529 167.6H104.329V105.2H197.329V400.2H129.529V167.6Z"
+                                fill="currentColor"
+                            />
+                            <path
+                                d="M337.593 400.8C306.793 400.8 281.593 392.4 261.993 375.6C242.793 358.8 233.193 337 233.193 310.2H303.393C303.393 318.2 306.393 324.8 312.393 330C318.393 335.2 326.393 337.8 336.393 337.8C345.993 337.8 353.793 335 359.793 329.4C366.193 323.8 369.393 316.6 369.393 307.8C369.393 299.8 366.593 293.2 360.993 288C355.393 282.8 348.193 280.2 339.393 280.2H302.193V218.4H339.393C346.193 218.4 351.993 216 356.793 211.2C361.593 206.4 363.993 200.4 363.993 193.2C363.993 184.8 361.393 178.2 356.193 173.4C350.993 168.6 344.393 166.2 336.393 166.2C329.193 166.2 322.993 168.4 317.793 172.8C312.993 177.2 310.593 182.8 310.593 189.6H243.993C243.993 164.8 252.793 144.6 270.393 129C287.993 113 310.593 105 338.193 105C365.793 105 388.193 112.2 405.393 126.6C422.993 141 431.793 160 431.793 183.6C431.793 200.8 427.193 214.8 417.993 225.6C408.793 236 396.993 243.2 382.593 247.2C399.793 252 413.393 260.2 423.393 271.8C433.793 283.4 438.993 298 438.993 315.6C438.993 340.4 429.593 360.8 410.793 376.8C391.993 392.8 367.593 400.8 337.593 400.8Z"
+                                stroke="var(--stroke-color)"
+                                stroke-width="2.4"
+                                mask="url(#path-5-mask)"
+                            />
+                            <path
+                                d="M129.529 167.6H104.329V105.2H197.329V400.2H129.529V167.6Z"
+                                stroke="var(--stroke-color)"
+                                stroke-width="2.4"
+                                mask="url(#path-5-mask)"
+                            />
+                        </g>
+                    </svg>
+                    <div
+                        class="absolute inset-0 rounded-t-lg shadow-[inset_0px_0px_0px_1px_rgba(26,26,0,0.16)] lg:rounded-r-lg lg:rounded-t-none dark:shadow-[inset_0px_0px_0px_1px_#fffaed2d]"
+                    ></div>
+                </div>
+            </main>
+        </div>
+        <div class="h-14.5 hidden lg:block"></div>
     </div>
 </template>

resources/js/pages/admin/users/Create.vue

@@ -1,39 +1,165 @@
 <script setup lang="ts">
-import { Head, router } from '@inertiajs/vue3';
-import { computed } from 'vue';
-import ManagedUserForm from '@/components/ManagedUserForm.vue';
-import { useLocalization } from '@/composables/useLocalization';
+import { Form, Head, Link } from '@inertiajs/vue3';
+import UserManagementController from '@/actions/App/Http/Controllers/Admin/UserManagementController';
+import Heading from '@/components/Heading.vue';
+import InputError from '@/components/InputError.vue';
+import PasswordInput from '@/components/PasswordInput.vue';
+import { Button } from '@/components/ui/button';
+import {
+    Card,
+    CardContent,
+    CardDescription,
+    CardHeader,
+    CardTitle,
+} from '@/components/ui/card';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
 import AppLayout from '@/layouts/AppLayout.vue';
 import { create, index } from '@/routes/admin/users';
 import type { BreadcrumbItem } from '@/types';
 
-const { t } = useLocalization();
-const breadcrumbs = computed<BreadcrumbItem[]>(() => [
-    { title: t('adminUsers.title'), href: index() },
-    { title: t('adminUsers.create.title'), href: create() },
-]);
+const breadcrumbs: BreadcrumbItem[] = [
+    {
+        title: 'User management',
+        href: index(),
+    },
+    {
+        title: 'Create user',
+        href: create(),
+    },
+];
 </script>
 
 <template>
     <AppLayout :breadcrumbs="breadcrumbs">
-        <Head :title="t('adminUsers.create.title')" />
+        <Head title="Create user" />
 
-        <div
-            class="gap-page md:p-page mx-auto flex w-full min-w-0 max-w-4xl flex-1 flex-col p-4"
-        >
-            <header class="gap-stack grid min-w-0">
-                <p class="text-label text-muted-foreground uppercase">
-                    {{ t('adminUsers.eyebrow') }}
-                </p>
-                <h1 class="text-headline-mobile md:text-headline">
-                    {{ t('adminUsers.create.title') }}
-                </h1>
-                <p class="text-muted-foreground max-w-2xl">
-                    {{ t('adminUsers.create.description') }}
-                </p>
-            </header>
+        <div class="mx-auto flex w-full max-w-3xl flex-1 flex-col gap-6 p-4">
+            <Heading
+                title="Create user"
+                description="Create a user account and optionally force a password change on the next login."
+            />
 
-            <ManagedUserForm mode="create" @cancel="router.visit(index())" />
+            <Card>
+                <CardHeader>
+                    <CardTitle>User details</CardTitle>
+                    <CardDescription>
+                        Set an initial password that the user can replace after
+                        their first sign-in.
+                    </CardDescription>
+                </CardHeader>
+
+                <CardContent>
+                    <Form
+                        v-bind="UserManagementController.store.form()"
+                        :transform="
+                            (data) => ({
+                                ...data,
+                                must_change_password_on_next_login:
+                                    data.must_change_password_on_next_login ===
+                                        true ||
+                                    data.must_change_password_on_next_login ===
+                                        'on',
+                            })
+                        "
+                        class="space-y-6"
+                        v-slot="{ errors, processing }"
+                    >
+                        <div class="grid gap-2">
+                            <Label for="name">Name</Label>
+                            <Input
+                                id="name"
+                                name="name"
+                                required
+                                autofocus
+                                autocomplete="name"
+                                placeholder="Jane Admin"
+                            />
+                            <InputError :message="errors.name" />
+                        </div>
+
+                        <div class="grid gap-2">
+                            <Label for="email">Email</Label>
+                            <Input
+                                id="email"
+                                name="email"
+                                type="email"
+                                required
+                                autocomplete="email"
+                                placeholder="jane@example.com"
+                            />
+                            <InputError :message="errors.email" />
+                        </div>
+
+                        <div class="grid gap-2">
+                            <Label for="password">Password</Label>
+                            <PasswordInput
+                                id="password"
+                                name="password"
+                                required
+                                autocomplete="new-password"
+                                placeholder="Temporary password"
+                            />
+                            <InputError :message="errors.password" />
+                        </div>
+
+                        <div class="grid gap-2">
+                            <Label for="password_confirmation"
+                                >Confirm password</Label
+                            >
+                            <PasswordInput
+                                id="password_confirmation"
+                                name="password_confirmation"
+                                required
+                                autocomplete="new-password"
+                                placeholder="Confirm password"
+                            />
+                        </div>
+
+                        <div class="grid gap-2">
+                            <Label
+                                for="must_change_password_on_next_login"
+                                class="flex items-start gap-3 rounded-lg border px-4 py-3"
+                            >
+                                <input
+                                    id="must_change_password_on_next_login"
+                                    name="must_change_password_on_next_login"
+                                    type="checkbox"
+                                    checked
+                                    class="border-input text-primary focus:ring-ring mt-0.5 size-4 rounded"
+                                />
+                                <span class="space-y-1">
+                                    <span class="block font-medium">
+                                        Must change password on next login
+                                    </span>
+                                    <span
+                                        class="text-muted-foreground block text-sm"
+                                    >
+                                        Redirect the user to the security
+                                        settings page until they save a new
+                                        password.
+                                    </span>
+                                </span>
+                            </Label>
+                            <InputError
+                                :message="
+                                    errors.must_change_password_on_next_login
+                                "
+                            />
+                        </div>
+
+                        <div class="flex items-center gap-3">
+                            <Button type="submit" :disabled="processing">
+                                Create user
+                            </Button>
+
+                            <Button as-child variant="outline">
+                                <Link :href="index()">Cancel</Link>
+                            </Button>
+                        </div>
+                    </Form>
+                </CardContent>
+            </Card>
         </div>
     </AppLayout>
 </template>

resources/js/pages/admin/users/Edit.vue

@@ -1,60 +1,170 @@
 <script setup lang="ts">
-import { Head, router } from '@inertiajs/vue3';
-import { computed } from 'vue';
-import ManagedUserForm from '@/components/ManagedUserForm.vue';
-import UserAvatar from '@/components/ui/avatar/UserAvatar.vue';
-import { useLocalization } from '@/composables/useLocalization';
+import { Head, Link, useForm } from '@inertiajs/vue3';
+import Heading from '@/components/Heading.vue';
+import InputError from '@/components/InputError.vue';
+import PasswordInput from '@/components/PasswordInput.vue';
+import { Button } from '@/components/ui/button';
+import {
+    Card,
+    CardContent,
+    CardDescription,
+    CardHeader,
+    CardTitle,
+} from '@/components/ui/card';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
 import AppLayout from '@/layouts/AppLayout.vue';
-import { edit, index } from '@/routes/admin/users';
+import { edit, index, save } from '@/routes/admin/users';
 import type { AdminUserEditPageProps, BreadcrumbItem } from '@/types';
 
 const props = defineProps<AdminUserEditPageProps>();
-const { t } = useLocalization();
-const breadcrumbs = computed<BreadcrumbItem[]>(() => [
-    { title: t('adminUsers.title'), href: index() },
+
+const breadcrumbs: BreadcrumbItem[] = [
     {
-        title: t('adminUsers.edit.breadcrumb', { name: props.user.name }),
+        title: 'User management',
+        href: index(),
+    },
+    {
+        title: 'Edit user',
         href: edit(props.user.id),
     },
-]);
+];
+
+const form = useForm({
+    name: props.user.name,
+    email: props.user.email,
+    password: '',
+    password_confirmation: '',
+    must_change_password_on_next_login:
+        props.user.must_change_password_on_next_login,
+});
+
+const submit = (): void => {
+    form.patch(save.url(props.user.id), {
+        preserveScroll: true,
+    });
+};
 </script>
 
 <template>
     <AppLayout :breadcrumbs="breadcrumbs">
-        <Head :title="t('adminUsers.edit.pageTitle', { name: user.name })" />
+        <Head :title="`Edit ${user.name}`" />
 
-        <div
-            class="gap-page md:p-page mx-auto flex w-full min-w-0 max-w-4xl flex-1 flex-col p-4"
-        >
-            <header
-                class="flex min-w-0 flex-col gap-4 sm:flex-row sm:items-center"
-            >
-                <UserAvatar
-                    :user="user"
-                    size="xl"
-                    rounded
-                    class="ring-border shrink-0 ring-1"
-                />
-                <div class="gap-stack grid min-w-0">
-                    <p class="text-label text-muted-foreground uppercase">
-                        {{ t('adminUsers.eyebrow') }}
-                    </p>
-                    <h1
-                        class="text-headline-mobile md:text-headline break-words"
-                    >
-                        {{ t('adminUsers.edit.title', { name: user.name }) }}
-                    </h1>
-                    <p class="text-muted-foreground break-all">
-                        {{ user.email }}
-                    </p>
-                </div>
-            </header>
-
-            <ManagedUserForm
-                mode="edit"
-                :user="user"
-                @cancel="router.visit(index())"
+        <div class="mx-auto flex w-full max-w-3xl flex-1 flex-col gap-6 p-4">
+            <Heading
+                :title="`Edit ${user.name}`"
+                description="Update user details, reset the password if needed, and control whether the user must change it on next login."
             />
+
+            <Card>
+                <CardHeader>
+                    <CardTitle>User details</CardTitle>
+                    <CardDescription>
+                        Leave the password fields empty if the current password
+                        should stay unchanged.
+                    </CardDescription>
+                </CardHeader>
+
+                <CardContent>
+                    <form class="space-y-6" @submit.prevent="submit">
+                        <div class="grid gap-2">
+                            <Label for="name">Name</Label>
+                            <Input
+                                id="name"
+                                v-model="form.name"
+                                required
+                                autofocus
+                                autocomplete="name"
+                                placeholder="Jane Admin"
+                            />
+                            <InputError :message="form.errors.name" />
+                        </div>
+
+                        <div class="grid gap-2">
+                            <Label for="email">Email</Label>
+                            <Input
+                                id="email"
+                                v-model="form.email"
+                                type="email"
+                                required
+                                autocomplete="email"
+                                placeholder="jane@example.com"
+                            />
+                            <InputError :message="form.errors.email" />
+                        </div>
+
+                        <div class="grid gap-2">
+                            <Label for="password">New password</Label>
+                            <PasswordInput
+                                id="password"
+                                v-model="form.password"
+                                autocomplete="new-password"
+                                placeholder="Leave blank to keep current password"
+                            />
+                            <InputError :message="form.errors.password" />
+                        </div>
+
+                        <div class="grid gap-2">
+                            <Label for="password_confirmation"
+                                >Confirm new password</Label
+                            >
+                            <PasswordInput
+                                id="password_confirmation"
+                                v-model="form.password_confirmation"
+                                autocomplete="new-password"
+                                placeholder="Confirm new password"
+                            />
+                            <InputError
+                                :message="form.errors.password_confirmation"
+                            />
+                        </div>
+
+                        <div class="grid gap-2">
+                            <Label
+                                for="must_change_password_on_next_login"
+                                class="flex items-start gap-3 rounded-lg border px-4 py-3"
+                            >
+                                <input
+                                    id="must_change_password_on_next_login"
+                                    v-model="
+                                        form.must_change_password_on_next_login
+                                    "
+                                    type="checkbox"
+                                    class="border-input text-primary focus:ring-ring mt-0.5 size-4 rounded"
+                                />
+                                <span class="space-y-1">
+                                    <span class="block font-medium">
+                                        Must change password on next login
+                                    </span>
+                                    <span
+                                        class="text-muted-foreground block text-sm"
+                                    >
+                                        Keep the user locked to the security
+                                        settings page until they save a new
+                                        password.
+                                    </span>
+                                </span>
+                            </Label>
+                            <InputError
+                                :message="
+                                    form.errors
+                                        .must_change_password_on_next_login
+                                "
+                            />
+                        </div>
+
+                        <div class="flex items-center gap-3">
+                            <Button type="submit" :disabled="form.processing">
+                                Save user
+                            </Button>
+
+                            <Button as-child variant="outline">
+                                <Link :href="index()">Cancel</Link>
+                            </Button>
+                        </div>
+                    </form>
+                </CardContent>
+            </Card>
         </div>
     </AppLayout>
 </template>

resources/js/pages/admin/users/Index.vue

@@ -1,468 +1,267 @@
 <script setup lang="ts">
-import { Head, Link, useForm } from '@inertiajs/vue3';
+import { Form, Head, Link } from '@inertiajs/vue3';
 import {
     FolderPlus,
     KeyRound,
     Pencil,
-    ShieldCheck,
+    Shield,
     UserPlus,
-    UsersRound,
+    Users,
 } from 'lucide-vue-next';
-import { computed, ref } from 'vue';
-import { update } from '@/actions/App/Http/Controllers/Admin/UserManagementController';
-import FeedbackState from '@/components/FeedbackState.vue';
-import FormFeedback from '@/components/FormFeedback.vue';
-import InputError from '@/components/InputError.vue';
-import UserAvatar from '@/components/ui/avatar/UserAvatar.vue';
+import UserManagementController from '@/actions/App/Http/Controllers/Admin/UserManagementController';
+import Heading from '@/components/Heading.vue';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
-import { Card, CardContent } from '@/components/ui/card';
-import { Checkbox } from '@/components/ui/checkbox';
 import {
-    Dialog,
-    DialogContent,
-    DialogDescription,
-    DialogFooter,
-    DialogHeader,
-    DialogTitle,
-} from '@/components/ui/dialog';
-import { Label } from '@/components/ui/label';
-import { useFormProtection } from '@/composables/useFormProtection';
-import { useLocalization } from '@/composables/useLocalization';
+    Card,
+    CardContent,
+    CardDescription,
+    CardHeader,
+    CardTitle,
+} from '@/components/ui/card';
 import AppLayout from '@/layouts/AppLayout.vue';
 import {
     create as createAdminUser,
     edit as editAdminUser,
     index as adminUsers,
 } from '@/routes/admin/users';
-import type {
-    AdminUsersPageProps,
-    BreadcrumbItem,
-    PermissionOption,
-} from '@/types';
-import type { UserModel } from '@/types/models/user-model';
+import type { AdminUsersPageProps, BreadcrumbItem } from '@/types';
+import UserAvatar from '@/components/ui/avatar/UserAvatar.vue';
 
 const props = defineProps<AdminUsersPageProps>();
-const { t } = useLocalization();
-const permissionsOpen = ref(false);
-const selectedUser = ref<UserModel | null>(null);
-const permissionForm = useForm('AdminUserGlobalPermissions', {
-    permissions: [] as string[],
-});
-const permissionProtection = useFormProtection(permissionForm, {
-    isDirty: () => permissionsOpen.value && permissionForm.isDirty,
-});
-const breadcrumbs = computed<BreadcrumbItem[]>(() => [
-    { title: t('adminUsers.title'), href: adminUsers() },
-]);
-const summaryItems = computed(() => [
+
+const breadcrumbs: BreadcrumbItem[] = [
     {
-        label: t('adminUsers.summary.total'),
-        value: props.users.length,
-        icon: UsersRound,
+        title: 'User management',
+        href: adminUsers(),
     },
-    {
-        label: t('adminUsers.summary.admins'),
-        value: props.users.filter((user) =>
-            hasPermission(user.id, 'global:admin'),
-        ).length,
-        icon: ShieldCheck,
-    },
-    {
-        label: t('adminUsers.summary.passwordChanges'),
-        value: props.users.filter(
-            (user) => user.must_change_password_on_next_login,
-        ).length,
-        icon: KeyRound,
-    },
-]);
+];
 
-function permissionsFor(userId: number): string[] {
-    return props.directPermissions[userId] ?? [];
-}
-
-function hasPermission(userId: number, permission: string): boolean {
-    return permissionsFor(userId).includes(permission);
-}
-
-function permissionLabel(option: PermissionOption): string {
-    if (option.value === 'global:admin') {
-        return t('adminUsers.permissions.globalAdmin');
-    }
-    if (option.value === 'project:create') {
-        return t('adminUsers.permissions.projectCreate');
-    }
-    return option.label;
-}
-
-function openPermissions(user: UserModel): void {
-    selectedUser.value = user;
-    const permissions = [...permissionsFor(user.id)];
-    permissionForm.defaults({ permissions });
-    permissionForm.resetAndClearErrors();
-    permissionProtection.clearFeedback();
-    permissionsOpen.value = true;
-}
-
-function updatePermission(value: string, checked: boolean): void {
-    permissionForm.permissions = checked
-        ? [...new Set([...permissionForm.permissions, value])]
-        : permissionForm.permissions.filter(
-              (permission) => permission !== value,
-          );
-    permissionForm.clearErrors('permissions');
-    permissionProtection.clearFeedback();
-}
-
-function closePermissions(): void {
-    permissionsOpen.value = false;
-    selectedUser.value = null;
-    permissionForm.defaults({ permissions: [] });
-    permissionForm.resetAndClearErrors();
-    permissionProtection.clearFeedback();
-}
-
-function updatePermissionsOpen(open: boolean): void {
-    if (open) {
-        permissionsOpen.value = true;
-        return;
-    }
-
-    if (!permissionForm.processing && permissionProtection.confirmLeave()) {
-        closePermissions();
-    }
-}
-
-function submitPermissions(): void {
-    if (!selectedUser.value) {
-        return;
-    }
-
-    permissionProtection.submit(update(selectedUser.value.id), {
-        preserveScroll: true,
-        onSuccess: closePermissions,
-    });
-}
+const hasPermission = (actorId: number, permission: string) =>
+    (props.directPermissions[actorId] ?? []).includes(permission);
 </script>
 
 <template>
     <AppLayout :breadcrumbs="breadcrumbs">
-        <Head :title="t('adminUsers.title')" />
+        <Head title="User management" />
 
-        <div class="gap-page md:p-page flex min-w-0 flex-1 flex-col p-4">
-            <header
-                class="flex min-w-0 flex-col gap-4 sm:flex-row sm:items-start sm:justify-between"
-            >
-                <div class="gap-stack grid min-w-0">
-                    <p class="text-label text-muted-foreground uppercase">
-                        {{ t('adminUsers.eyebrow') }}
-                    </p>
-                    <h1 class="text-headline-mobile md:text-headline">
-                        {{ t('adminUsers.title') }}
-                    </h1>
-                    <p class="text-muted-foreground max-w-2xl">
-                        {{ t('adminUsers.description') }}
-                    </p>
-                </div>
-                <Button as-child class="self-start">
-                    <Link :href="createAdminUser()">
-                        <UserPlus aria-hidden="true" />
-                        {{ t('adminUsers.createAction') }}
-                    </Link>
-                </Button>
-            </header>
+        <div class="flex flex-1 flex-col gap-6 p-4">
+            <div class="flex items-start justify-between gap-4">
+                <Heading
+                    title="User management"
+                    description="Assign the global permissions that unlock platform-wide administration and project creation."
+                />
 
-            <FeedbackState
-                v-if="status"
-                state="success"
-                :title="t('adminUsers.updated')"
-                :description="status"
-            />
-
-            <section :aria-label="t('adminUsers.summary.label')">
-                <ul class="grid gap-3 sm:grid-cols-3">
-                    <li
-                        v-for="item in summaryItems"
-                        :key="item.label"
-                        class="min-w-0"
-                    >
-                        <Card class="h-full gap-0 rounded-md py-0">
-                            <CardContent
-                                class="flex min-w-0 items-center justify-between gap-4 p-4"
-                            >
-                                <div class="min-w-0">
-                                    <p
-                                        class="text-caption text-muted-foreground break-words"
-                                    >
-                                        {{ item.label }}
-                                    </p>
-                                    <p class="text-title mt-1 tabular-nums">
-                                        {{ item.value }}
-                                    </p>
-                                </div>
-                                <span
-                                    class="bg-accent text-primary flex size-10 shrink-0 items-center justify-center rounded-md"
-                                >
-                                    <component
-                                        :is="item.icon"
-                                        class="size-5"
-                                        aria-hidden="true"
-                                    />
-                                </span>
-                            </CardContent>
-                        </Card>
-                    </li>
-                </ul>
-            </section>
-
-            <section
-                aria-labelledby="managed-users-title"
-                class="gap-column grid min-w-0"
-            >
-                <div class="gap-stack grid">
-                    <h2 id="managed-users-title" class="text-title">
-                        {{
-                            t('adminUsers.listTitle', {
-                                count: users.length,
-                            })
-                        }}
-                    </h2>
-                    <p class="text-muted-foreground max-w-2xl">
-                        {{ t('adminUsers.listDescription') }}
-                    </p>
-                </div>
-
-                <FeedbackState
-                    v-if="users.length === 0"
-                    state="empty"
-                    :title="t('adminUsers.empty.title')"
-                    :description="t('adminUsers.empty.description')"
-                >
-                    <Button as-child variant="outline">
+                <div class="flex items-center gap-3">
+                    <Button as-child>
                         <Link :href="createAdminUser()">
-                            <UserPlus aria-hidden="true" />
-                            {{ t('adminUsers.createAction') }}
+                            <UserPlus class="size-4" />
+                            User create
                         </Link>
                     </Button>
-                </FeedbackState>
 
-                <ul
-                    v-else
-                    class="grid min-w-0 gap-4 lg:grid-cols-2 2xl:grid-cols-3"
-                >
-                    <li
-                        v-for="user in users"
-                        :key="user.id"
-                        class="min-w-0"
-                        data-managed-user
-                    >
-                        <article
-                            class="bg-card text-card-foreground flex h-full min-w-0 flex-col rounded-xl border"
-                        >
-                            <div class="flex min-w-0 items-start gap-4 p-5">
-                                <UserAvatar
-                                    :user="user"
-                                    size="lg"
-                                    rounded
-                                    class="ring-border shrink-0 ring-1"
-                                />
-                                <div class="min-w-0 flex-1">
-                                    <h3
-                                        class="text-body break-words font-semibold"
-                                    >
-                                        {{ user.name }}
-                                    </h3>
-                                    <p
-                                        class="text-caption text-muted-foreground break-all"
-                                    >
-                                        {{ user.email }}
-                                    </p>
-                                </div>
-                                <Badge variant="outline" class="shrink-0">
-                                    {{ t('adminUsers.managedAccount') }}
-                                </Badge>
-                            </div>
+                    <Badge variant="outline" class="gap-1.5 px-3 py-1">
+                        <Users class="size-3.5" />
+                        Admin-only area
+                    </Badge>
+                </div>
+            </div>
 
-                            <div
-                                class="gap-stack flex min-w-0 flex-1 flex-wrap content-start border-y px-5 py-4"
-                            >
-                                <Badge
-                                    v-if="
-                                        user.must_change_password_on_next_login
-                                    "
-                                    variant="outline"
-                                    class="gap-1.5 whitespace-normal"
-                                >
-                                    <KeyRound
-                                        class="size-3.5"
-                                        aria-hidden="true"
-                                    />
-                                    {{ t('adminUsers.passwordChangePending') }}
-                                </Badge>
-                                <Badge
-                                    v-for="option in permissionOptions"
-                                    v-show="
-                                        hasPermission(user.id, option.value)
-                                    "
-                                    :key="option.value"
-                                    variant="secondary"
-                                    class="gap-1.5 whitespace-normal"
-                                >
-                                    <ShieldCheck
-                                        v-if="option.value === 'global:admin'"
-                                        class="size-3.5"
-                                        aria-hidden="true"
-                                    />
-                                    <FolderPlus
-                                        v-else
-                                        class="size-3.5"
-                                        aria-hidden="true"
-                                    />
-                                    {{ permissionLabel(option) }}
-                                </Badge>
-                                <span
-                                    v-if="permissionsFor(user.id).length === 0"
-                                    class="text-caption text-muted-foreground"
-                                >
-                                    {{ t('adminUsers.permissions.none') }}
-                                </span>
-                            </div>
+            <div
+                v-if="status"
+                class="rounded-xl border border-emerald-200 bg-emerald-50 px-4 py-3 text-sm text-emerald-900 dark:border-emerald-900/70 dark:bg-emerald-950/40 dark:text-emerald-100"
+            >
+                {{ status }}
+            </div>
 
-                            <div
-                                class="grid gap-2 p-4 sm:grid-cols-2"
-                                data-user-actions
-                            >
-                                <Button
-                                    variant="outline"
-                                    @click="openPermissions(user)"
-                                >
-                                    <ShieldCheck aria-hidden="true" />
-                                    {{ t('adminUsers.permissions.action') }}
-                                </Button>
-                                <Button as-child variant="ghost">
-                                    <Link
-                                        :href="editAdminUser(user.id)"
-                                        :aria-label="
-                                            t('adminUsers.edit.action', {
-                                                name: user.name,
-                                            })
-                                        "
-                                    >
-                                        <Pencil aria-hidden="true" />
-                                        {{ t('adminUsers.edit.shortAction') }}
-                                    </Link>
-                                </Button>
-                            </div>
-                        </article>
-                    </li>
-                </ul>
-            </section>
-        </div>
-
-        <Dialog :open="permissionsOpen" @update:open="updatePermissionsOpen">
-            <DialogContent>
-                <DialogHeader>
-                    <DialogTitle>
-                        {{
-                            t('adminUsers.permissions.title', {
-                                name: selectedUser?.name ?? '',
-                            })
-                        }}
-                    </DialogTitle>
-                    <DialogDescription>
-                        {{ t('adminUsers.permissions.description') }}
-                    </DialogDescription>
-                </DialogHeader>
-
-                <form
-                    class="gap-column grid"
-                    :aria-busy="permissionForm.processing"
-                    @submit.prevent="submitPermissions"
-                >
-                    <FormFeedback
-                        :state="permissionProtection.state.value"
-                        @retry="submitPermissions"
-                    />
-
-                    <fieldset
-                        class="grid gap-3"
-                        :disabled="permissionForm.processing"
-                    >
-                        <legend class="sr-only">
-                            {{ t('adminUsers.permissions.available') }}
-                        </legend>
-                        <Label
-                            v-for="option in permissionOptions"
-                            :key="option.value"
-                            :for="'permission-' + option.value"
-                            class="bg-muted/35 flex cursor-pointer items-start gap-3 rounded-lg border p-4"
-                        >
-                            <Checkbox
-                                :id="'permission-' + option.value"
-                                :checked="
-                                    permissionForm.permissions.includes(
-                                        option.value,
-                                    )
-                                "
-                                :value="option.value"
-                                :invalid="!!permissionForm.errors.permissions"
-                                :aria-describedby="
-                                    'permission-help-' + option.value
-                                "
-                                @update:checked="
-                                    (checked: boolean | 'indeterminate') =>
-                                        updatePermission(
-                                            option.value,
-                                            checked === true,
-                                        )
-                                "
-                            />
-                            <span class="grid gap-1">
-                                <span>{{ permissionLabel(option) }}</span>
-                                <span
-                                    :id="'permission-help-' + option.value"
-                                    class="text-caption text-muted-foreground font-normal"
-                                >
-                                    {{
-                                        t(
-                                            option.value === 'global:admin'
-                                                ? 'adminUsers.permissions.globalAdminHelp'
-                                                : 'adminUsers.permissions.projectCreateHelp',
-                                        )
-                                    }}
-                                </span>
-                            </span>
-                        </Label>
-                        <InputError
-                            :message="permissionForm.errors.permissions"
-                        />
-                    </fieldset>
+            <Card class="gap-0 overflow-hidden">
+                <CardHeader class="border-b">
+                    <CardTitle>Users</CardTitle>
+                    <CardDescription>
+                        Global permissions are assigned directly to users and
+                        apply across the entire application.
+                    </CardDescription>
+                </CardHeader>
 
+                <CardContent class="p-0">
                     <div
-                        class="border-warning/35 bg-warning/8 text-body rounded-md border p-4"
+                        v-if="users.length === 0"
+                        class="text-muted-foreground p-6 text-sm"
                     >
-                        {{ t('adminUsers.permissions.warning') }}
+                        No users exist yet.
                     </div>
 
-                    <DialogFooter>
-                        <Button
-                            type="button"
-                            variant="secondary"
-                            :disabled="permissionForm.processing"
-                            @click="updatePermissionsOpen(false)"
+                    <div v-else class="overflow-x-auto">
+                        <table
+                            class="divide-border min-w-full divide-y text-sm"
                         >
-                            {{ t('common.cancel') }}
-                        </Button>
-                        <Button
-                            type="submit"
-                            :loading="permissionForm.processing"
-                            data-test="confirm-user-permissions"
-                        >
-                            {{ t('adminUsers.permissions.confirm') }}
-                        </Button>
-                    </DialogFooter>
-                </form>
-            </DialogContent>
-        </Dialog>
+                            <thead
+                                class="bg-muted/40 text-muted-foreground text-left"
+                            >
+                                <tr>
+                                    <th class="px-4 py-3 font-medium">User</th>
+                                    <th class="px-4 py-3 font-medium">Email</th>
+                                    <th class="px-4 py-3 font-medium">
+                                        Current access
+                                    </th>
+                                    <th
+                                        class="px-4 py-3 text-right font-medium"
+                                    >
+                                        Action
+                                    </th>
+                                </tr>
+                            </thead>
+                            <tbody class="divide-border divide-y">
+                                <tr
+                                    v-for="user in users"
+                                    :key="user.id"
+                                    class="bg-background align-top"
+                                >
+                                    <td class="px-4 py-4">
+                                        <div
+                                            class="text-foreground items-medium flex items-center"
+                                        >
+                                            <UserAvatar
+                                                :user="user"
+                                                class="mr-2 size-8"
+                                                rounded
+                                            />
+                                            {{ user.name }}
+                                        </div>
+                                    </td>
+                                    <td class="text-muted-foreground px-4 py-4">
+                                        {{ user.email }}
+                                    </td>
+                                    <td class="px-4 py-4">
+                                        <div class="flex flex-wrap gap-2">
+                                            <Badge
+                                                v-if="
+                                                    user.must_change_password_on_next_login
+                                                "
+                                                variant="outline"
+                                                class="gap-1.5"
+                                            >
+                                                <KeyRound class="size-3.5" />
+                                                Must change password
+                                            </Badge>
+                                            <Badge
+                                                v-if="
+                                                    hasPermission(
+                                                        user.id,
+                                                        'global:admin',
+                                                    )
+                                                "
+                                                class="gap-1.5"
+                                            >
+                                                <Shield class="size-3.5" />
+                                                Global admin
+                                            </Badge>
+                                            <Badge
+                                                v-if="
+                                                    hasPermission(
+                                                        user.id,
+                                                        'project:create',
+                                                    )
+                                                "
+                                                variant="secondary"
+                                                class="gap-1.5"
+                                            >
+                                                <FolderPlus class="size-3.5" />
+                                                Project create
+                                            </Badge>
+                                            <span
+                                                v-if="
+                                                    (
+                                                        directPermissions[
+                                                            user.id
+                                                        ] ?? []
+                                                    ).length === 0
+                                                "
+                                                class="text-muted-foreground"
+                                            >
+                                                No direct global permissions
+                                            </span>
+                                        </div>
+                                    </td>
+                                    <td class="px-4 py-4">
+                                        <div class="flex justify-end">
+                                            <div
+                                                class="flex flex-wrap justify-end gap-3"
+                                            >
+                                                <Button
+                                                    as-child
+                                                    size="sm"
+                                                    variant="outline"
+                                                >
+                                                    <Link
+                                                        :href="
+                                                            editAdminUser(
+                                                                user.id,
+                                                            )
+                                                        "
+                                                    >
+                                                        <Pencil
+                                                            class="size-4"
+                                                        />
+                                                        Edit
+                                                    </Link>
+                                                </Button>
+
+                                                <Form
+                                                    v-bind="
+                                                        UserManagementController.update.form(
+                                                            user.id,
+                                                        )
+                                                    "
+                                                    class="flex flex-wrap justify-end gap-3"
+                                                    v-slot="{ processing }"
+                                                >
+                                                    <label
+                                                        v-for="option in permissionOptions"
+                                                        :key="`${user.id}-${option.value}`"
+                                                        class="border-border inline-flex items-center gap-2 rounded-lg border px-3 py-2 text-sm"
+                                                    >
+                                                        <input
+                                                            type="checkbox"
+                                                            name="permissions[]"
+                                                            :value="
+                                                                option.value
+                                                            "
+                                                            :checked="
+                                                                hasPermission(
+                                                                    user.id,
+                                                                    option.value,
+                                                                )
+                                                            "
+                                                            class="border-input text-primary focus:ring-ring size-4 rounded"
+                                                        />
+                                                        <span>{{
+                                                            option.label
+                                                        }}</span>
+                                                    </label>
+
+                                                    <div
+                                                        class="w-full sm:hidden"
+                                                    />
+
+                                                    <Button
+                                                        type="submit"
+                                                        size="sm"
+                                                        variant="outline"
+                                                        :disabled="processing"
+                                                    >
+                                                        Save
+                                                    </Button>
+                                                </Form>
+                                            </div>
+                                        </div>
+                                    </td>
+                                </tr>
+                            </tbody>
+                        </table>
+                    </div>
+                </CardContent>
+            </Card>
+        </div>
     </AppLayout>
 </template>

resources/js/pages/project-templates/Create.vue

@@ -1,38 +1,174 @@
 <script setup lang="ts">
-import { Head } from '@inertiajs/vue3';
+import { Head, Link, useForm } from '@inertiajs/vue3';
 import { computed } from 'vue';
-import ProjectTemplateForm from '@/components/projects/ProjectTemplateForm.vue';
-import { useLocalization } from '@/composables/useLocalization';
+import Heading from '@/components/Heading.vue';
+import InputError from '@/components/InputError.vue';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import {
+    Card,
+    CardContent,
+    CardDescription,
+    CardHeader,
+    CardTitle,
+} from '@/components/ui/card';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
 import AppLayout from '@/layouts/AppLayout.vue';
-import { index, show } from '@/routes/projects';
-import { create } from '@/routes/projects/templates';
+import {
+    index as projectsIndex,
+    show as projectShow,
+} from '@/routes/projects/index';
+import {
+    create as projectTemplateCreate,
+    store as projectTemplateStore,
+} from '@/routes/projects/templates';
 import type { BreadcrumbItem, ProjectTemplatesCreatePageProps } from '@/types';
+
 const props = defineProps<ProjectTemplatesCreatePageProps>();
-const { t } = useLocalization();
-const breadcrumbs = computed<BreadcrumbItem[]>(() => [
-    { title: t('navigation.projects'), href: index() },
-    { title: props.project.name, href: show(props.project.id) },
-    { title: t('projects.saveTemplate'), href: create(props.project.id) },
-]);
+
+const breadcrumbs: BreadcrumbItem[] = [
+    {
+        title: 'Projects',
+        href: projectsIndex(),
+    },
+    {
+        title: props.project.name,
+        href: projectShow(props.project.id),
+    },
+    {
+        title: 'Save as new template',
+        href: projectTemplateCreate(props.project.id),
+    },
+];
+
+const form = useForm({
+    copy_areas: props.copyAreaOptions.map(
+        (copyAreaOption) => copyAreaOption.value,
+    ),
+    name: `${props.project.name} template`,
+    slug: `${props.project.key.toLowerCase()}-template`,
+});
+
+const copyAreasError = computed(() => {
+    return (
+        form.errors.copy_areas ??
+        Object.entries(form.errors).find(([key]) =>
+            key.startsWith('copy_areas.'),
+        )?.[1] ??
+        ''
+    );
+});
+
+const submit = (): void => {
+    form.post(projectTemplateStore.url(props.project.id), {
+        preserveScroll: true,
+    });
+};
 </script>
 
 <template>
     <AppLayout :breadcrumbs="breadcrumbs">
-        <Head :title="t('templates.createTitle', { project: project.name })" />
-        <div class="p-page gap-page mx-auto grid w-full min-w-0 max-w-6xl">
-            <header class="gap-stack grid">
-                <h1 class="text-headline-mobile md:text-headline break-words">
-                    {{ t('templates.createTitle', { project: project.name }) }}
-                </h1>
-                <p class="text-muted-foreground">
-                    {{ t('templates.createDescription') }}
-                </p>
-            </header>
-            <ProjectTemplateForm
-                :key="project.id"
-                :project="project"
-                :copy-area-options="copyAreaOptions"
-            />
+        <Head :title="`Save ${project.name} as new template`" />
+
+        <div class="mx-auto flex w-full max-w-3xl flex-1 flex-col gap-6 p-4">
+            <div class="space-y-3">
+                <Badge variant="outline" class="px-3 py-1">{{
+                    project.key
+                }}</Badge>
+                <Heading
+                    :title="`Save ${project.name} as new template`"
+                    description="Capture reusable project configuration without copying operational ticket data."
+                />
+            </div>
+
+            <Card>
+                <CardHeader>
+                    <CardTitle>Template details</CardTitle>
+                    <CardDescription>
+                        Pick the configuration groups that should be reusable in
+                        future projects.
+                    </CardDescription>
+                </CardHeader>
+
+                <CardContent>
+                    <form class="space-y-6" @submit.prevent="submit">
+                        <div class="grid gap-2">
+                            <Label for="name">Template name</Label>
+                            <Input
+                                id="name"
+                                v-model="form.name"
+                                required
+                                placeholder="Foundation template"
+                            />
+                            <InputError :message="form.errors.name" />
+                        </div>
+
+                        <div class="grid gap-2">
+                            <Label for="slug">Template slug</Label>
+                            <Input
+                                id="slug"
+                                v-model="form.slug"
+                                required
+                                placeholder="foundation-template"
+                            />
+                            <p class="text-muted-foreground text-sm">
+                                Slugs are normalized automatically and used to
+                                identify reusable templates.
+                            </p>
+                            <InputError :message="form.errors.slug" />
+                        </div>
+
+                        <div class="grid gap-3">
+                            <div>
+                                <Label>Configuration groups</Label>
+                                <p class="text-muted-foreground text-sm">
+                                    Only the selected groups will be stored in
+                                    the template.
+                                </p>
+                            </div>
+
+                            <div class="grid gap-3">
+                                <Label
+                                    v-for="copyAreaOption in copyAreaOptions"
+                                    :key="copyAreaOption.value"
+                                    class="flex cursor-pointer items-start gap-3 rounded-xl border p-4"
+                                >
+                                    <input
+                                        v-model="form.copy_areas"
+                                        type="checkbox"
+                                        :value="copyAreaOption.value"
+                                        class="mt-1"
+                                    />
+                                    <div class="space-y-1">
+                                        <div class="font-medium">
+                                            {{ copyAreaOption.label }}
+                                        </div>
+                                        <p
+                                            class="text-muted-foreground text-sm"
+                                        >
+                                            {{ copyAreaOption.description }}
+                                        </p>
+                                    </div>
+                                </Label>
+                            </div>
+                            <InputError :message="copyAreasError" />
+                        </div>
+
+                        <div class="flex items-center gap-3">
+                            <Button type="submit" :disabled="form.processing">
+                                Save new template
+                            </Button>
+
+                            <Button as-child variant="outline">
+                                <Link :href="projectShow(project.id)"
+                                    >Cancel</Link
+                                >
+                            </Button>
+                        </div>
+                    </form>
+                </CardContent>
+            </Card>
         </div>
     </AppLayout>
 </template>

resources/js/pages/project-templates/Edit.vue

@@ -1,36 +1,223 @@
 <script setup lang="ts">
-import { Head } from '@inertiajs/vue3';
+import { Head, Link, useForm } from '@inertiajs/vue3';
 import { computed } from 'vue';
-import ProjectTemplateForm from '@/components/projects/ProjectTemplateForm.vue';
-import { useLocalization } from '@/composables/useLocalization';
+import Heading from '@/components/Heading.vue';
+import InputError from '@/components/InputError.vue';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import {
+    Card,
+    CardContent,
+    CardDescription,
+    CardHeader,
+    CardTitle,
+} from '@/components/ui/card';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
 import AppLayout from '@/layouts/AppLayout.vue';
-import { index, edit } from '@/routes/project-templates';
+import {
+    edit as projectTemplatesEdit,
+    index as projectTemplatesIndex,
+    update as projectTemplatesUpdate,
+} from '@/routes/project-templates';
 import type { BreadcrumbItem, ProjectTemplatesEditPageProps } from '@/types';
+
 const props = defineProps<ProjectTemplatesEditPageProps>();
-const { t } = useLocalization();
-const breadcrumbs = computed<BreadcrumbItem[]>(() => [
-    { title: t('navigation.templates'), href: index() },
-    { title: props.template.name, href: edit(props.template.id) },
-]);
+
+const breadcrumbs: BreadcrumbItem[] = [
+    {
+        title: 'Project templates',
+        href: projectTemplatesIndex(),
+    },
+    {
+        title: props.template.name,
+        href: projectTemplatesEdit(props.template.id),
+    },
+];
+
+const form = useForm({
+    confirm_linked_projects_update: false,
+    copy_areas: [...props.template.copy_areas],
+    name: props.template.name,
+});
+
+const copyAreasError = computed(() => {
+    return (
+        form.errors.copy_areas ??
+        Object.entries(form.errors).find(([key]) =>
+            key.startsWith('copy_areas.'),
+        )?.[1] ??
+        ''
+    );
+});
+
+const linkedProjectCount = computed(
+    () => props.template.linked_project_count ?? 0,
+);
+
+const submit = (): void => {
+    form.patch(projectTemplatesUpdate.url(props.template.id), {
+        preserveScroll: true,
+    });
+};
 </script>
 
 <template>
     <AppLayout :breadcrumbs="breadcrumbs">
-        <Head :title="t('templates.editTitle', { name: template.name })" />
-        <div class="p-page gap-page mx-auto grid w-full min-w-0 max-w-6xl">
-            <header class="gap-stack grid">
-                <h1 class="text-headline-mobile md:text-headline break-words">
-                    {{ t('templates.editTitle', { name: template.name }) }}
-                </h1>
-                <p class="text-muted-foreground">
-                    {{ t('templates.editDescription') }}
-                </p>
-            </header>
-            <ProjectTemplateForm
-                :key="template.id"
-                :template="template"
-                :copy-area-options="copyAreaOptions"
-            />
+        <Head :title="`Edit ${template.name}`" />
+
+        <div class="mx-auto flex w-full max-w-3xl flex-1 flex-col gap-6 p-4">
+            <div class="space-y-3">
+                <div class="flex flex-wrap items-center gap-3">
+                    <Badge variant="outline" class="px-3 py-1">{{
+                        template.slug
+                    }}</Badge>
+                    <Badge v-if="linkedProjectCount > 0" variant="secondary">
+                        {{ linkedProjectCount }} linked
+                        {{ linkedProjectCount === 1 ? 'project' : 'projects' }}
+                    </Badge>
+                </div>
+                <Heading
+                    :title="`Edit ${template.name}`"
+                    description="Refresh the template baseline from its source project while keeping immutable identifiers protected."
+                />
+            </div>
+
+            <Card>
+                <CardHeader>
+                    <CardTitle>Template details</CardTitle>
+                    <CardDescription>
+                        <template v-if="template.source_project">
+                            This template baseline is rebuilt from
+                            {{ template.source_project.name }} ({{
+                                template.source_project.key
+                            }}) when you save.
+                        </template>
+                        <template v-else>
+                            This template baseline is rebuilt from its source
+                            project when you save.
+                        </template>
+                    </CardDescription>
+                </CardHeader>
+
+                <CardContent>
+                    <form class="space-y-6" @submit.prevent="submit">
+                        <div class="grid gap-2">
+                            <Label for="name">Template name</Label>
+                            <Input
+                                id="name"
+                                v-model="form.name"
+                                required
+                                placeholder="Foundation template"
+                            />
+                            <InputError :message="form.errors.name" />
+                        </div>
+
+                        <div class="grid gap-2">
+                            <Label for="slug">Template slug</Label>
+                            <Input
+                                id="slug"
+                                :model-value="template.slug"
+                                disabled
+                            />
+                            <p class="text-muted-foreground text-sm">
+                                The slug stays locked so existing template
+                                references remain stable.
+                            </p>
+                        </div>
+
+                        <div class="grid gap-3">
+                            <div>
+                                <Label>Configuration groups</Label>
+                                <p class="text-muted-foreground text-sm">
+                                    Saving rebuilds the selected groups from the
+                                    current source-project configuration.
+                                </p>
+                            </div>
+
+                            <div class="grid gap-3">
+                                <Label
+                                    v-for="copyAreaOption in copyAreaOptions"
+                                    :key="copyAreaOption.value"
+                                    class="flex cursor-pointer items-start gap-3 rounded-xl border p-4"
+                                >
+                                    <input
+                                        v-model="form.copy_areas"
+                                        type="checkbox"
+                                        :value="copyAreaOption.value"
+                                        class="mt-1"
+                                    />
+                                    <div class="space-y-1">
+                                        <div class="font-medium">
+                                            {{ copyAreaOption.label }}
+                                        </div>
+                                        <p
+                                            class="text-muted-foreground text-sm"
+                                        >
+                                            {{ copyAreaOption.description }}
+                                        </p>
+                                    </div>
+                                </Label>
+                            </div>
+                            <InputError :message="copyAreasError" />
+                        </div>
+
+                        <div
+                            v-if="linkedProjectCount > 0"
+                            class="space-y-3 rounded-xl border border-amber-300 bg-amber-50 p-4 text-amber-950 dark:border-amber-900/70 dark:bg-amber-950/40 dark:text-amber-100"
+                        >
+                            <div class="space-y-1">
+                                <div class="font-medium">Warning</div>
+                                <p class="text-sm">
+                                    Saving this template updates the baseline
+                                    for {{ linkedProjectCount }} linked
+                                    {{
+                                        linkedProjectCount === 1
+                                            ? 'project'
+                                            : 'projects'
+                                    }}. Inherited areas will follow the new
+                                    template version, while existing overrides
+                                    stay untouched.
+                                </p>
+                            </div>
+
+                            <Label
+                                class="flex cursor-pointer items-start gap-3"
+                            >
+                                <input
+                                    v-model="
+                                        form.confirm_linked_projects_update
+                                    "
+                                    type="checkbox"
+                                    class="mt-1"
+                                />
+                                <span class="text-sm">
+                                    I understand that linked projects inheriting
+                                    from this template will be affected.
+                                </span>
+                            </Label>
+
+                            <InputError
+                                :message="
+                                    form.errors.confirm_linked_projects_update
+                                "
+                            />
+                        </div>
+
+                        <div class="flex items-center gap-3">
+                            <Button type="submit" :disabled="form.processing">
+                                Save template changes
+                            </Button>
+
+                            <Button as-child variant="outline">
+                                <Link :href="projectTemplatesIndex()"
+                                    >Cancel</Link
+                                >
+                            </Button>
+                        </div>
+                    </form>
+                </CardContent>
+            </Card>
         </div>
     </AppLayout>
 </template>

resources/js/pages/project-templates/Index.vue

@@ -1,258 +1,158 @@
 <script setup lang="ts">
-import { Head, Link, useForm } from '@inertiajs/vue3';
-import { ArrowRight, LayoutTemplate, Plus, Trash2 } from 'lucide-vue-next';
-import { computed, ref } from 'vue';
-import FeedbackState from '@/components/FeedbackState.vue';
-import FormFeedback from '@/components/FormFeedback.vue';
+import { Head, Link, router } from '@inertiajs/vue3';
+import Heading from '@/components/Heading.vue';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
 import {
-    Dialog,
-    DialogContent,
-    DialogDescription,
-    DialogFooter,
-    DialogHeader,
-    DialogTitle,
-} from '@/components/ui/dialog';
-import { useFormProtection } from '@/composables/useFormProtection';
-import { useLocalization } from '@/composables/useLocalization';
-import { useProjectTemplateAreas } from '@/composables/useProjectTemplateAreas';
+    Card,
+    CardContent,
+    CardDescription,
+    CardHeader,
+    CardTitle,
+} from '@/components/ui/card';
 import AppLayout from '@/layouts/AppLayout.vue';
-import { destroy, edit, index } from '@/routes/project-templates';
 import {
-    create as createProject,
+    destroy as projectTemplatesDestroy,
+    edit as projectTemplatesEdit,
+    index as projectTemplatesIndex,
+} from '@/routes/project-templates';
+import {
+    create as projectsCreate,
     index as projectsIndex,
-} from '@/routes/projects';
+} from '@/routes/projects/index';
 import type { BreadcrumbItem, ProjectTemplatesIndexPageProps } from '@/types';
 
-import type { ProjectTemplateModel } from '@/types/models/project-template-model';
-
 const props = defineProps<ProjectTemplatesIndexPageProps>();
-const { t } = useLocalization();
-const { areaText } = useProjectTemplateAreas();
-const breadcrumbs = computed<BreadcrumbItem[]>(() => [
-    { title: t('navigation.templates'), href: index() },
-]);
-const templates = computed(() =>
-    props.templates.filter((template) => template.is_published),
-);
-const pending = ref<ProjectTemplateModel | null>(null);
-const form = useForm({});
-const protection = useFormProtection(form);
-function requestDelete(template: ProjectTemplateModel): void {
-    form.resetAndClearErrors();
-    protection.clearFeedback();
-    pending.value = template;
-}
-function close(open: boolean): void {
-    if (!open && !form.processing) {
-        pending.value = null;
-        form.clearErrors();
-        protection.clearFeedback();
-    }
-}
-function removeTemplate(): void {
-    if (!pending.value) {
-        return;
-    }
-    protection.submit(destroy(pending.value.id), {
+
+const breadcrumbs: BreadcrumbItem[] = [
+    {
+        title: 'Project templates',
+        href: projectTemplatesIndex(),
+    },
+];
+
+const removeTemplate = (templateId: number): void => {
+    router.delete(projectTemplatesDestroy.url(templateId), {
         preserveScroll: true,
-        onSuccess: () => {
-            pending.value = null;
-        },
     });
-}
+};
 </script>
 
 <template>
     <AppLayout :breadcrumbs="breadcrumbs">
-        <Head :title="t('navigation.templates')" />
-        <div class="p-page gap-page mx-auto grid w-full min-w-0 max-w-7xl">
-            <header
-                class="gap-column flex flex-col sm:flex-row sm:items-start sm:justify-between"
+        <Head title="Project templates" />
+
+        <div class="flex flex-1 flex-col gap-6 p-4">
+            <div
+                class="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between"
             >
-                <div class="gap-stack grid min-w-0">
-                    <h1 class="text-headline-mobile md:text-headline">
-                        {{ t('navigation.templates') }}
-                    </h1>
-                    <p class="text-muted-foreground max-w-2xl">
-                        {{ t('templates.description') }}
-                    </p>
-                </div>
-                <Button as-child class="shrink-0"
-                    ><Link :href="createProject()"
-                        ><Plus aria-hidden="true" />{{
-                            t('projects.create')
-                        }}</Link
-                    ></Button
-                >
-            </header>
-            <FeedbackState
-                v-if="status"
-                state="success"
-                :title="t('templates.updated')"
-            />
-            <section
-                class="bg-card gap-column flex min-w-0 flex-col rounded-md border p-5 sm:flex-row sm:items-center"
-                aria-labelledby="save-template-help"
-            >
-                <LayoutTemplate
-                    class="text-primary size-6 shrink-0"
-                    aria-hidden="true"
+                <Heading
+                    title="Project templates"
+                    description="Reusable published project templates. Internal project base templates stay hidden here by default."
                 />
-                <div class="gap-stack grid min-w-0 flex-1">
-                    <h2 id="save-template-help" class="text-title">
-                        {{ t('templates.fromProject') }}
-                    </h2>
-                    <p class="text-caption text-muted-foreground">
-                        {{ t('templates.fromProjectHelp') }}
-                    </p>
+
+                <div class="flex flex-wrap gap-3">
+                    <Button as-child variant="outline">
+                        <Link :href="projectsIndex()">Back to projects</Link>
+                    </Button>
+
+                    <Button as-child>
+                        <Link :href="projectsCreate()">Create project</Link>
+                    </Button>
                 </div>
-                <Button as-child variant="outline" class="shrink-0"
-                    ><Link :href="projectsIndex()"
-                        >{{ t('templates.browseProjects')
-                        }}<ArrowRight aria-hidden="true" /></Link
-                ></Button>
-            </section>
-            <FeedbackState
-                v-if="templates.length === 0"
-                state="empty"
-                :title="t('templates.empty')"
-                :description="t('templates.emptyHelp')"
-            />
-            <ul
-                v-else
-                class="gap-column grid min-w-0 md:grid-cols-2 xl:grid-cols-3"
-                :aria-label="t('templates.published')"
+            </div>
+
+            <div
+                v-if="status"
+                class="rounded-xl border border-emerald-200 bg-emerald-50 px-4 py-3 text-sm text-emerald-900 dark:border-emerald-900/70 dark:bg-emerald-950/40 dark:text-emerald-100"
             >
-                <li
+                {{ status }}
+            </div>
+
+            <div
+                v-if="templates.length === 0"
+                class="text-muted-foreground text-sm"
+            >
+                No published project templates have been saved yet.
+            </div>
+
+            <div v-else class="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
+                <Card
                     v-for="template in templates"
                     :key="template.id"
-                    class="bg-card flex min-w-0 flex-col rounded-md border"
-                    :data-template="template.id"
+                    class="h-full"
                 >
-                    <div class="gap-column grid min-w-0 p-5">
-                        <div class="gap-stack grid min-w-0">
-                            <h2 class="text-title break-words">
-                                {{ template.name }}
-                            </h2>
-                            <p
-                                class="text-caption text-muted-foreground break-all"
+                    <CardHeader>
+                        <div class="flex flex-wrap items-center gap-2">
+                            <CardTitle>{{ template.name }}</CardTitle>
+                            <Badge variant="secondary">{{
+                                template.slug
+                            }}</Badge>
+                            <Badge
+                                v-if="template.linked_project_count"
+                                variant="outline"
                             >
-                                {{ template.slug }}
-                            </p>
+                                {{ template.linked_project_count }} linked
+                                {{
+                                    template.linked_project_count === 1
+                                        ? 'project'
+                                        : 'projects'
+                                }}
+                            </Badge>
                         </div>
-                        <Badge
-                            variant="secondary"
-                            class="w-fit whitespace-normal"
-                            >{{
-                                t('templates.linkedCount', {
-                                    count: template.linked_project_count ?? 0,
-                                })
-                            }}</Badge
-                        >
-                        <p
-                            class="text-caption text-muted-foreground break-words"
-                        >
-                            {{
-                                template.source_project
-                                    ? t('templates.savedFrom', {
-                                          project: template.source_project.name,
-                                          key: template.source_project.key,
-                                      })
-                                    : t('templates.sourceUnavailable')
-                            }}
-                        </p>
-                        <ul
-                            class="flex flex-wrap gap-2"
-                            :aria-label="t('templates.groups')"
-                        >
-                            <li v-for="area in template.copy_areas" :key="area">
-                                <Badge
-                                    variant="outline"
-                                    class="whitespace-normal"
-                                    >{{ areaText(area, 'label') }}</Badge
+                        <CardDescription>
+                            <template v-if="template.source_project">
+                                Saved from
+                                {{ template.source_project.name }} ({{
+                                    template.source_project.key
+                                }}).
+                            </template>
+                            <template v-else>
+                                Saved template configuration.
+                            </template>
+                        </CardDescription>
+                    </CardHeader>
+                    <CardContent class="space-y-4">
+                        <div class="flex flex-wrap gap-2">
+                            <Badge
+                                v-for="copyArea in template.copy_areas"
+                                :key="copyArea"
+                                variant="outline"
+                            >
+                                {{ copyArea }}
+                            </Badge>
+                        </div>
+
+                        <div class="flex flex-wrap gap-3">
+                            <Button as-child variant="secondary">
+                                <Link :href="projectTemplatesEdit(template.id)">
+                                    Edit
+                                </Link>
+                            </Button>
+
+                            <Button as-child variant="outline">
+                                <Link
+                                    :href="
+                                        projectsCreate({
+                                            query: { template: template.id },
+                                        })
+                                    "
                                 >
-                            </li>
-                        </ul>
-                    </div>
-                    <div class="gap-stack mt-auto flex flex-wrap border-t p-4">
-                        <Button as-child variant="secondary"
-                            ><Link
-                                :href="
-                                    createProject({
-                                        query: { template: template.id },
-                                    })
-                                "
-                                >{{ t('templates.use') }}</Link
-                            ></Button
-                        >
-                        <Button as-child variant="outline"
-                            ><Link
-                                :href="edit(template.id)"
-                                :aria-label="
-                                    t('templates.editTitle', {
-                                        name: template.name,
-                                    })
-                                "
-                                >{{ t('templates.edit') }}</Link
-                            ></Button
-                        >
-                        <Button
-                            variant="ghost"
-                            size="icon"
-                            class="text-destructive ml-auto"
-                            :aria-label="
-                                t('templates.deleteTitle', {
-                                    name: template.name,
-                                })
-                            "
-                            @click="requestDelete(template)"
-                            ><Trash2 aria-hidden="true"
-                        /></Button>
-                    </div>
-                </li>
-            </ul>
+                                    Use template
+                                </Link>
+                            </Button>
+
+                            <Button
+                                type="button"
+                                variant="destructive"
+                                @click="removeTemplate(template.id)"
+                            >
+                                Delete
+                            </Button>
+                        </div>
+                    </CardContent>
+                </Card>
+            </div>
         </div>
-        <Dialog :open="pending !== null" @update:open="close">
-            <DialogContent :show-close-button="!form.processing">
-                <DialogHeader>
-                    <DialogTitle>{{
-                        t('templates.deleteTitle', {
-                            name: pending?.name ?? '',
-                        })
-                    }}</DialogTitle>
-                    <DialogDescription>{{
-                        t('templates.deleteHelp')
-                    }}</DialogDescription>
-                </DialogHeader>
-                <p v-if="pending?.linked_project_count" class="text-body">
-                    {{
-                        t('templates.deleteImpact', {
-                            count: pending.linked_project_count,
-                        })
-                    }}
-                </p>
-                <FormFeedback
-                    :state="protection.state.value"
-                    @retry="removeTemplate"
-                />
-                <DialogFooter>
-                    <Button
-                        variant="outline"
-                        :disabled="form.processing"
-                        @click="close(false)"
-                        >{{ t('common.cancel') }}</Button
-                    >
-                    <Button
-                        variant="destructive"
-                        :loading="form.processing"
-                        :loading-label="t('templates.deleting')"
-                        @click="removeTemplate"
-                        >{{ t('templates.delete') }}</Button
-                    >
-                </DialogFooter>
-            </DialogContent>
-        </Dialog>
     </AppLayout>
 </template>

resources/js/pages/projects/Access.vue

@@ -1,344 +1,308 @@
 <script setup lang="ts">
-import { Head, Link, usePage } from '@inertiajs/vue3';
-import { ArrowLeft, Search, ShieldCheck, Users } from 'lucide-vue-next';
-import { computed, ref } from 'vue';
-import FeedbackState from '@/components/FeedbackState.vue';
-import ProjectAccessEditorDialog from '@/components/projects/ProjectAccessEditorDialog.vue';
-import ProjectPermissionBadges from '@/components/projects/ProjectPermissionBadges.vue';
-import UserAvatar from '@/components/ui/avatar/UserAvatar.vue';
+import { Form, Head, Link } from '@inertiajs/vue3';
+import ProjectController from '@/actions/App/Http/Controllers/ProjectController';
+import Heading from '@/components/Heading.vue';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
-import { Input } from '@/components/ui/input';
-import { Label } from '@/components/ui/label';
-import { useLocalization } from '@/composables/useLocalization';
+import {
+    Card,
+    CardContent,
+    CardDescription,
+    CardHeader,
+    CardTitle,
+} from '@/components/ui/card';
 import AppLayout from '@/layouts/AppLayout.vue';
-import { access, index, show } from '@/routes/projects';
-import { general } from '@/routes/projects/settings';
+import { access, index, show } from '@/routes/projects/index';
+import { general as generalSettings } from '@/routes/projects/settings';
 import type { BreadcrumbItem, ProjectAccessPageProps } from '@/types';
-import type { ProjectAccessTarget } from '@/types/project-access';
 
 const props = defineProps<ProjectAccessPageProps>();
-const page = usePage();
-const { t } = useLocalization();
-const search = ref('');
-const target = ref<ProjectAccessTarget | null>(null);
-const breadcrumbs = computed<BreadcrumbItem[]>(() => [
-    { title: t('navigation.projects'), href: index() },
-    { title: props.project.name, href: show(props.project.id) },
-    { title: t('navigation.access'), href: access(props.project.id) },
-]);
-const matches = (value: string) =>
-    value.toLocaleLowerCase().includes(search.value.trim().toLocaleLowerCase());
-const visibleUsers = computed(() =>
-    props.users.filter((user) => matches(`${user.name} ${user.email}`)),
-);
-const visibleTeams = computed(() =>
-    props.teams.filter((team) => matches(team.name)),
-);
-const inheritedTeams = (userId: number) =>
-    props.teams.filter(
-        (team) =>
-            team.user_ids.includes(userId) &&
-            (props.teamPermissions[team.id] ?? []).length > 0,
-    );
+
+const breadcrumbs: BreadcrumbItem[] = [
+    {
+        title: 'Projects',
+        href: index(),
+    },
+    {
+        title: props.project.name,
+        href: show(props.project.id),
+    },
+    {
+        title: 'Access',
+        href: access(props.project.id),
+    },
+];
+
+const hasPermission = (
+    permissions: Record<string, string[]>,
+    actorId: number,
+    permission: string,
+) => (permissions[actorId] ?? []).includes(permission);
 </script>
 
 <template>
     <AppLayout :breadcrumbs="breadcrumbs">
-        <Head
-            :title="t('projectAccess.pageTitle', { project: project.name })"
-        />
-        <main
-            class="mx-auto flex w-full min-w-0 max-w-7xl flex-1 flex-col gap-6 p-4 sm:p-6 lg:p-8"
-        >
-            <header
+        <Head :title="`${project.name} access`" />
+
+        <div class="flex flex-1 flex-col gap-6 p-4">
+            <div
                 class="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between"
             >
-                <div class="grid min-w-0 gap-2">
-                    <p
-                        class="text-primary break-all text-xs font-semibold uppercase tracking-wider"
-                    >
+                <div class="space-y-3">
+                    <Badge variant="outline" class="px-3 py-1">
                         {{ project.key }}
-                    </p>
-                    <h1 class="text-headline-mobile sm:text-headline">
-                        {{ t('projectAccess.title') }}
-                    </h1>
-                    <p
-                        class="text-muted-foreground max-w-2xl break-words text-sm"
-                    >
-                        {{
-                            t('projectAccess.description', {
-                                project: project.name,
-                            })
-                        }}
-                    </p>
+                    </Badge>
+                    <Heading
+                        :title="`${project.name} access`"
+                        description="Assign direct user permissions or inherited team permissions for this project."
+                    />
                 </div>
-                <div class="flex shrink-0 flex-wrap gap-2">
+
+                <div class="flex flex-wrap gap-3">
                     <Button
-                        v-if="page.props.auth.permissions.globalAdmin"
+                        v-if="$page.props.auth.permissions.globalAdmin"
                         as-child
                         variant="outline"
-                        ><Link :href="general(project.id)">{{
-                            t('navigation.general')
-                        }}</Link></Button
-                    >
-                    <Button as-child variant="outline"
-                        ><Link :href="show(project.id)"
-                            ><ArrowLeft class="size-4" aria-hidden="true" />{{
-                                t('projectAccess.back')
-                            }}</Link
-                        ></Button
                     >
+                        <Link :href="generalSettings(project.id)">
+                            General settings
+                        </Link>
+                    </Button>
+
+                    <Button as-child variant="outline">
+                        <Link :href="show(project.id)">Back to project</Link>
+                    </Button>
                 </div>
-            </header>
-            <FeedbackState
-                v-if="status"
-                state="success"
-                :title="t('projectAccess.saved')"
-            />
-            <aside
-                class="bg-accent/60 flex items-start gap-3 rounded-xl border p-4"
-                :aria-label="t('projectAccess.howItWorks')"
-            >
-                <ShieldCheck
-                    class="text-primary mt-0.5 size-5 shrink-0"
-                    aria-hidden="true"
-                />
-                <div class="grid gap-1">
-                    <h2 class="text-sm font-semibold">
-                        {{ t('projectAccess.howItWorks') }}
-                    </h2>
-                    <p class="text-muted-foreground text-sm">
-                        {{ t('projectAccess.additiveHelp') }}
-                    </p>
-                    <p class="text-muted-foreground text-sm">
-                        {{ t('projectAccess.limitsHelp') }}
-                    </p>
-                </div>
-            </aside>
-            <div class="relative sm:max-w-md">
-                <Label for="access-search" class="sr-only">{{
-                    t('projectAccess.search')
-                }}</Label
-                ><Search
-                    class="text-muted-foreground pointer-events-none absolute left-3 top-3 size-4"
-                    aria-hidden="true"
-                /><Input
-                    id="access-search"
-                    v-model="search"
-                    type="search"
-                    class="pl-9"
-                    :placeholder="t('projectAccess.search')"
-                />
             </div>
-            <section
-                class="grid min-w-0 gap-4"
-                aria-labelledby="people-heading"
+
+            <div
+                v-if="status"
+                class="rounded-xl border border-emerald-200 bg-emerald-50 px-4 py-3 text-sm text-emerald-900 dark:border-emerald-900/70 dark:bg-emerald-950/40 dark:text-emerald-100"
             >
-                <div class="flex items-center gap-2">
-                    <h2 id="people-heading" class="text-lg font-semibold">
-                        {{ t('projectAccess.people') }}
-                    </h2>
-                    <Badge variant="secondary">{{ users.length }}</Badge>
-                </div>
-                <FeedbackState
-                    v-if="visibleUsers.length === 0"
-                    state="empty"
-                    :title="
-                        t(
-                            users.length
-                                ? 'projectAccess.noPeopleResults'
-                                : 'projectAccess.noPeople',
-                        )
-                    "
-                />
-                <ul
-                    v-else
-                    class="bg-card min-w-0 divide-y rounded-xl border"
-                    :aria-label="t('projectAccess.people')"
-                >
-                    <li
-                        v-for="user in visibleUsers"
-                        :key="user.id"
-                        class="grid min-w-0 gap-4 p-4 sm:p-5 lg:grid-cols-[minmax(0,1fr)_minmax(0,1.3fr)_auto] lg:items-center"
-                        :data-user-id="user.id"
-                    >
-                        <div class="flex min-w-0 items-center gap-3">
-                            <UserAvatar :user="user" class="size-10 shrink-0" />
-                            <div class="grid min-w-0 gap-1">
-                                <h3 class="break-words text-sm font-semibold">
-                                    {{ user.name }}
-                                </h3>
-                                <p
-                                    class="text-muted-foreground break-all text-xs"
-                                >
-                                    {{ user.email }}
-                                </p>
-                            </div>
-                        </div>
-                        <div class="grid min-w-0 gap-2">
-                            <p
-                                class="text-muted-foreground text-xs font-medium"
-                            >
-                                {{ t('projectAccess.effective') }}
-                            </p>
-                            <ProjectPermissionBadges
-                                :permissions="
-                                    effectivePermissions[user.id] ?? []
-                                "
-                                :empty-label="t('projectAccess.noAccess')"
-                            />
-                            <div
-                                class="text-muted-foreground grid gap-1 text-xs"
-                            >
-                                <span
-                                    v-if="globalAdminUserIds.includes(user.id)"
-                                    >{{ t('projectAccess.globalSource') }}</span
-                                >
-                                <div class="flex flex-wrap items-center gap-2">
-                                    <span>{{ t('projectAccess.direct') }}</span
-                                    ><ProjectPermissionBadges
-                                        :permissions="
-                                            directPermissions[user.id] ?? []
-                                        "
-                                        :empty-label="t('projectAccess.none')"
-                                    />
-                                </div>
-                                <div
-                                    v-for="team in inheritedTeams(user.id)"
-                                    :key="team.id"
-                                    class="flex min-w-0 flex-wrap items-center gap-2"
-                                >
-                                    <span class="break-words">{{
-                                        t('projectAccess.viaTeam', {
-                                            name: team.name,
-                                        })
-                                    }}</span
-                                    ><ProjectPermissionBadges
-                                        :permissions="
-                                            teamPermissions[team.id] ?? []
-                                        "
-                                        :empty-label="t('projectAccess.none')"
-                                    />
-                                </div>
-                            </div>
-                        </div>
-                        <Button
-                            type="button"
-                            variant="outline"
-                            :aria-label="
-                                t('projectAccess.editFor', { name: user.name })
-                            "
-                            @click="
-                                target = {
-                                    kind: 'user',
-                                    id: user.id,
-                                    name: user.name,
-                                    permissions:
-                                        directPermissions[user.id] ?? [],
-                                    globalAdmin: globalAdminUserIds.includes(
-                                        user.id,
-                                    ),
-                                }
-                            "
-                            >{{ t('projectAccess.editDirect') }}</Button
+                {{ status }}
+            </div>
+
+            <Card class="gap-0 overflow-hidden">
+                <CardHeader class="border-b">
+                    <CardTitle>User permissions</CardTitle>
+                    <CardDescription>
+                        Direct assignments apply only to the selected user
+                        inside this project.
+                    </CardDescription>
+                </CardHeader>
+
+                <CardContent class="p-0">
+                    <div class="overflow-x-auto">
+                        <table
+                            class="divide-border min-w-full divide-y text-sm"
                         >
-                    </li>
-                </ul>
-            </section>
-            <section class="grid min-w-0 gap-4" aria-labelledby="teams-heading">
-                <div class="grid gap-1">
-                    <div class="flex items-center gap-2">
-                        <h2 id="teams-heading" class="text-lg font-semibold">
-                            {{ t('projectAccess.teamPermissions') }}
-                        </h2>
-                        <Badge variant="secondary">{{ teams.length }}</Badge>
+                            <thead
+                                class="bg-muted/40 text-muted-foreground text-left"
+                            >
+                                <tr>
+                                    <th class="px-4 py-3 font-medium">User</th>
+                                    <th class="px-4 py-3 font-medium">Email</th>
+                                    <th class="px-4 py-3 font-medium">
+                                        Permissions
+                                    </th>
+                                    <th
+                                        class="px-4 py-3 text-right font-medium"
+                                    >
+                                        Action
+                                    </th>
+                                </tr>
+                            </thead>
+                            <tbody class="divide-border divide-y">
+                                <tr
+                                    v-for="user in users"
+                                    :key="user.id"
+                                    class="bg-background align-top"
+                                >
+                                    <td
+                                        class="text-foreground px-4 py-4 font-medium"
+                                    >
+                                        {{ user.name }}
+                                    </td>
+                                    <td class="text-muted-foreground px-4 py-4">
+                                        {{ user.email }}
+                                    </td>
+                                    <td class="px-4 py-4">
+                                        <Form
+                                            v-bind="
+                                                ProjectController.updateUserPermissions.form(
+                                                    [project.id, user.id],
+                                                )
+                                            "
+                                            class="flex flex-wrap gap-3"
+                                            v-slot="{ processing }"
+                                        >
+                                            <label
+                                                v-for="option in permissionOptions"
+                                                :key="`${user.id}-${option.value}`"
+                                                class="border-border inline-flex items-center gap-2 rounded-lg border px-3 py-2 text-sm"
+                                            >
+                                                <input
+                                                    type="checkbox"
+                                                    name="permissions[]"
+                                                    :value="option.value"
+                                                    :checked="
+                                                        hasPermission(
+                                                            directPermissions,
+                                                            user.id,
+                                                            option.value,
+                                                        )
+                                                    "
+                                                    class="border-input text-primary focus:ring-ring size-4 rounded"
+                                                />
+                                                <span>{{ option.label }}</span>
+                                            </label>
+
+                                            <div class="w-full sm:hidden" />
+
+                                            <Button
+                                                type="submit"
+                                                size="sm"
+                                                variant="outline"
+                                                :disabled="processing"
+                                            >
+                                                Save
+                                            </Button>
+                                        </Form>
+                                    </td>
+                                    <td
+                                        class="text-muted-foreground px-4 py-4 text-right"
+                                    >
+                                        Direct
+                                    </td>
+                                </tr>
+                            </tbody>
+                        </table>
                     </div>
-                    <p class="text-muted-foreground text-sm">
-                        {{ t('projectAccess.teamHelp') }}
-                    </p>
-                </div>
-                <FeedbackState
-                    v-if="visibleTeams.length === 0"
-                    state="empty"
-                    :title="
-                        t(
-                            teams.length
-                                ? 'projectAccess.noTeamResults'
-                                : 'projectAccess.noTeams',
-                        )
-                    "
-                    :description="
-                        teams.length
-                            ? undefined
-                            : t('projectAccess.noTeamsHelp')
-                    "
-                />
-                <ul
-                    v-else
-                    class="grid min-w-0 gap-4 lg:grid-cols-2"
-                    :aria-label="t('projectAccess.teamPermissions')"
-                >
-                    <li
-                        v-for="team in visibleTeams"
-                        :key="team.id"
-                        class="bg-card grid min-w-0 gap-4 rounded-xl border p-5"
-                        :data-team-id="team.id"
+                </CardContent>
+            </Card>
+
+            <Card class="gap-0 overflow-hidden">
+                <CardHeader class="border-b">
+                    <CardTitle>Team permissions</CardTitle>
+                    <CardDescription>
+                        Team assignments are inherited by every current and
+                        future member of that team.
+                    </CardDescription>
+                </CardHeader>
+
+                <CardContent class="p-0">
+                    <div
+                        v-if="teams.length === 0"
+                        class="text-muted-foreground p-6 text-sm"
                     >
-                        <div class="flex min-w-0 items-center gap-3">
-                            <span
-                                class="bg-accent text-primary flex size-10 shrink-0 items-center justify-center rounded-lg"
-                                ><Users class="size-5" aria-hidden="true"
-                            /></span>
-                            <div class="min-w-0">
-                                <h3 class="break-words text-sm font-semibold">
-                                    {{ team.name }}
-                                </h3>
-                                <p class="text-muted-foreground text-xs">
-                                    {{
-                                        t('teams.memberCount', {
-                                            count: team.users.length,
-                                        })
-                                    }}
-                                </p>
-                            </div>
-                        </div>
-                        <ProjectPermissionBadges
-                            :permissions="teamPermissions[team.id] ?? []"
-                            :empty-label="t('projectAccess.noTeamAccess')"
-                        />
-                        <p class="text-muted-foreground break-words text-xs">
-                            {{
-                                team.users
-                                    .map((user) => user.name)
-                                    .join(', ') || t('teams.noMembers')
-                            }}
-                        </p>
-                        <Button
-                            type="button"
-                            variant="outline"
-                            :aria-label="
-                                t('projectAccess.editFor', { name: team.name })
-                            "
-                            @click="
-                                target = {
-                                    kind: 'team',
-                                    id: team.id,
-                                    name: team.name,
-                                    permissions: teamPermissions[team.id] ?? [],
-                                }
-                            "
-                            >{{ t('projectAccess.editTeam') }}</Button
+                        No teams exist yet. Create teams first to assign
+                        inherited permissions.
+                    </div>
+
+                    <div v-else class="overflow-x-auto">
+                        <table
+                            class="divide-border min-w-full divide-y text-sm"
                         >
-                    </li>
-                </ul>
-            </section>
-            <ProjectAccessEditorDialog
-                :project-id="project.id"
-                :target="target"
-                :permission-options="permissionOptions"
-                @close="target = null"
-            />
-        </main>
+                            <thead
+                                class="bg-muted/40 text-muted-foreground text-left"
+                            >
+                                <tr>
+                                    <th class="px-4 py-3 font-medium">Team</th>
+                                    <th class="px-4 py-3 font-medium">
+                                        Members
+                                    </th>
+                                    <th class="px-4 py-3 font-medium">
+                                        Permissions
+                                    </th>
+                                    <th
+                                        class="px-4 py-3 text-right font-medium"
+                                    >
+                                        Action
+                                    </th>
+                                </tr>
+                            </thead>
+                            <tbody class="divide-border divide-y">
+                                <tr
+                                    v-for="team in teams"
+                                    :key="team.id"
+                                    class="bg-background align-top"
+                                >
+                                    <td
+                                        class="text-foreground px-4 py-4 font-medium"
+                                    >
+                                        {{ team.name }}
+                                    </td>
+                                    <td class="px-4 py-4">
+                                        <div class="flex flex-wrap gap-2">
+                                            <Badge
+                                                v-for="member in team.users"
+                                                :key="member.id"
+                                                variant="secondary"
+                                            >
+                                                {{ member.name }}
+                                            </Badge>
+                                            <span
+                                                v-if="team.users.length === 0"
+                                                class="text-muted-foreground"
+                                            >
+                                                No members assigned
+                                            </span>
+                                        </div>
+                                    </td>
+                                    <td class="px-4 py-4">
+                                        <Form
+                                            v-bind="
+                                                ProjectController.updateTeamPermissions.form(
+                                                    [project.id, team.id],
+                                                )
+                                            "
+                                            class="flex flex-wrap gap-3"
+                                            v-slot="{ processing }"
+                                        >
+                                            <label
+                                                v-for="option in permissionOptions"
+                                                :key="`${team.id}-${option.value}`"
+                                                class="border-border inline-flex items-center gap-2 rounded-lg border px-3 py-2 text-sm"
+                                            >
+                                                <input
+                                                    type="checkbox"
+                                                    name="permissions[]"
+                                                    :value="option.value"
+                                                    :checked="
+                                                        hasPermission(
+                                                            teamPermissions,
+                                                            team.id,
+                                                            option.value,
+                                                        )
+                                                    "
+                                                    class="border-input text-primary focus:ring-ring size-4 rounded"
+                                                />
+                                                <span>{{ option.label }}</span>
+                                            </label>
+
+                                            <div class="w-full sm:hidden" />
+
+                                            <Button
+                                                type="submit"
+                                                size="sm"
+                                                variant="outline"
+                                                :disabled="processing"
+                                            >
+                                                Save
+                                            </Button>
+                                        </Form>
+                                    </td>
+                                    <td
+                                        class="text-muted-foreground px-4 py-4 text-right"
+                                    >
+                                        Inherited
+                                    </td>
+                                </tr>
+                            </tbody>
+                        </table>
+                    </div>
+                </CardContent>
+            </Card>
+        </div>
     </AppLayout>
 </template>

resources/js/pages/projects/Backlog.vue

@@ -1,155 +1,70 @@
 <script setup lang="ts">
-import { Head, Link } from '@inertiajs/vue3';
-import {
-    ArrowLeft,
-    ChevronsDownUp,
-    ChevronsUpDown,
-    Columns3,
-    Plus,
-    RotateCcw,
-    Search,
-} from 'lucide-vue-next';
-import { computed, reactive, ref, watch } from 'vue';
-import BacklogTicketTree from '@/components/BacklogTicketTree.vue';
-import FeedbackState from '@/components/FeedbackState.vue';
+import { Form, Head, Link } from '@inertiajs/vue3';
+import ProjectBoardController from '@/actions/App/Http/Controllers/ProjectBoardController';
+import Heading from '@/components/Heading.vue';
+import { TicketListItem } from '@/components/tickets';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
-import { useLocalization } from '@/composables/useLocalization';
-import AppLayout from '@/layouts/AppLayout.vue';
 import {
-    buildBacklogTicketTree,
-    countBacklogTreeTickets,
-    expandableBacklogTicketIds,
-    filterBacklogTicketTree,
-} from '@/lib/backlog';
+    Card,
+    CardContent,
+    CardDescription,
+    CardHeader,
+    CardTitle,
+} from '@/components/ui/card';
+import AppLayout from '@/layouts/AppLayout.vue';
+import { ticketStatusLabel } from '@/lib/tickets';
 import { index as boardIndex } from '@/routes/projects/board';
 import { index as backlogIndex } from '@/routes/projects/backlog';
-import { index as projectIndex, show } from '@/routes/projects/index';
+import { index, show } from '@/routes/projects/index';
 import { create as createTicket } from '@/routes/projects/tickets';
-import type {
-    BacklogFilterState,
-    BreadcrumbItem,
-    ProjectBacklogPageProps,
-} from '@/types';
+import type { BreadcrumbItem, ProjectBacklogPageProps } from '@/types';
+import type { TicketModel } from '@/types/models/ticket-model';
+import type { TicketStatusModel } from '@/types/models/ticket-status-model';
 
 const props = defineProps<ProjectBacklogPageProps>();
-const { t } = useLocalization();
-const breadcrumbs = computed<BreadcrumbItem[]>(() => [
-    { title: t('navigation.projects'), href: projectIndex() },
-    { title: props.project.name, href: show(props.project.id) },
-    { title: t('navigation.backlog'), href: backlogIndex(props.project.id) },
-]);
 
-const filters = reactive<BacklogFilterState>({
-    assigneeId: '',
-    priorityId: '',
-    query: '',
-    statusId: '',
-    typeId: '',
-});
-const collapsedTicketIds = reactive(new Set<number>());
-const pendingTicketId = ref<number | null>(null);
-const ticketTree = computed(() => buildBacklogTicketTree(props.tickets));
-const filteredTicketTree = computed(() =>
-    filterBacklogTicketTree(ticketTree.value, filters),
-);
-const visibleTicketCount = computed(() =>
-    countBacklogTreeTickets(filteredTicketTree.value),
-);
-const expandableTicketIds = computed(() =>
-    expandableBacklogTicketIds(filteredTicketTree.value),
-);
-const hasActiveFilters = computed(
-    () =>
-        filters.query.trim() !== '' ||
-        filters.typeId !== '' ||
-        filters.priorityId !== '' ||
-        filters.statusId !== '' ||
-        filters.assigneeId !== '',
-);
-const allVisibleBranchesCollapsed = computed(
-    () =>
-        expandableTicketIds.value.length > 0 &&
-        expandableTicketIds.value.every((ticketId) =>
-            collapsedTicketIds.has(ticketId),
-        ),
-);
-
-function clearFilters(): void {
-    filters.query = '';
-    filters.typeId = '';
-    filters.priorityId = '';
-    filters.statusId = '';
-    filters.assigneeId = '';
-}
-
-function toggleTicket(ticketId: number): void {
-    if (collapsedTicketIds.has(ticketId)) {
-        collapsedTicketIds.delete(ticketId);
-    } else {
-        collapsedTicketIds.add(ticketId);
-    }
-}
-
-function toggleAllBranches(): void {
-    if (allVisibleBranchesCollapsed.value) {
-        collapsedTicketIds.clear();
-
-        return;
-    }
-
-    for (const ticketId of expandableTicketIds.value) {
-        collapsedTicketIds.add(ticketId);
-    }
-}
-
-function finishMove(ticketId: number): void {
-    if (pendingTicketId.value === ticketId) {
-        pendingTicketId.value = null;
-    }
-}
-
-watch(
-    () => props.project.id,
-    () => {
-        clearFilters();
-        collapsedTicketIds.clear();
-        pendingTicketId.value = null;
+const breadcrumbs: BreadcrumbItem[] = [
+    {
+        title: 'Projects',
+        href: index(),
     },
-);
+    {
+        title: props.project.name,
+        href: show(props.project.id),
+    },
+    {
+        title: 'Backlog',
+        href: backlogIndex(props.project.id),
+    },
+];
+
+const allowedTargetStatuses = (ticket: TicketModel): TicketStatusModel[] => {
+    return (ticket.ticket_status?.allowed_target_statuses ?? []).filter(
+        (ticketStatus) => ticketStatus.id !== ticket.ticket_status_id,
+    );
+};
 </script>
 
 <template>
     <AppLayout :breadcrumbs="breadcrumbs">
-        <Head :title="t('backlog.title', { name: project.name })" />
+        <Head :title="`${project.name} backlog`" />
 
-        <div class="gap-page md:p-page flex min-w-0 flex-1 flex-col p-4">
-            <header
-                class="flex min-w-0 flex-col gap-4 xl:flex-row xl:items-start xl:justify-between"
+        <div class="flex flex-1 flex-col gap-6 p-4">
+            <div
+                class="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between"
             >
-                <div class="grid min-w-0 gap-2">
-                    <div class="flex min-w-0 flex-wrap items-center gap-3">
-                        <Badge
-                            variant="outline"
-                            class="wrap-anywhere max-w-full whitespace-normal"
-                        >
-                            {{ project.key }}
-                        </Badge>
-                        <p class="text-caption text-muted-foreground">
-                            {{ t('tickets.count', { count: tickets.length }) }}
-                        </p>
-                    </div>
-                    <h1
-                        class="text-headline-mobile md:text-headline wrap-anywhere"
-                    >
-                        {{ t('backlog.title', { name: project.name }) }}
-                    </h1>
-                    <p class="text-caption text-muted-foreground max-w-2xl">
-                        {{ t('backlog.description') }}
-                    </p>
+                <div class="space-y-3">
+                    <Badge variant="outline" class="px-3 py-1">
+                        {{ project.key }}
+                    </Badge>
+                    <Heading
+                        :title="`${project.name} backlog`"
+                        description="All newly created tickets start here before they move onto the board."
+                    />
                 </div>
 
-                <div class="flex flex-wrap gap-2">
+                <div class="flex flex-wrap gap-3">
                     <Button v-if="canCreateTickets" as-child>
                         <Link
                             :href="
@@ -159,286 +74,138 @@ watch(
                                 )
                             "
                         >
-                            <Plus aria-hidden="true" />
-                            {{ t('navigation.createTicket') }}
+                            Create ticket
                         </Link>
                     </Button>
+
                     <Button as-child variant="outline">
-                        <Link :href="boardIndex(project.id)">
-                            <Columns3 aria-hidden="true" />
-                            {{ t('backlog.openBoard') }}
-                        </Link>
+                        <Link :href="boardIndex(project.id)">Open board</Link>
                     </Button>
-                    <Button as-child variant="ghost">
-                        <Link :href="show(project.id)">
-                            <ArrowLeft aria-hidden="true" />
-                            {{ t('backlog.backToProject') }}
-                        </Link>
+
+                    <Button as-child variant="outline">
+                        <Link :href="show(project.id)">Back to project</Link>
                     </Button>
                 </div>
-            </header>
+            </div>
 
-            <FeedbackState v-if="status" state="success" :title="status" />
-
-            <section
-                aria-labelledby="backlog-filter-title"
-                class="bg-card gap-card p-card grid min-w-0 rounded-md border"
+            <div
+                v-if="status"
+                class="rounded-xl border border-emerald-200 bg-emerald-50 px-4 py-3 text-sm text-emerald-900 dark:border-emerald-900/70 dark:bg-emerald-950/40 dark:text-emerald-100"
             >
-                <div
-                    class="flex min-w-0 flex-col gap-3 sm:flex-row sm:items-start sm:justify-between"
-                >
-                    <div class="grid min-w-0 gap-1">
-                        <h2 id="backlog-filter-title" class="text-title">
-                            {{ t('backlog.filters.title') }}
-                        </h2>
-                        <p class="text-caption text-muted-foreground">
-                            {{ t('backlog.filters.description') }}
-                        </p>
-                    </div>
-                    <Button
-                        type="button"
-                        variant="ghost"
-                        size="sm"
-                        :disabled="!hasActiveFilters"
-                        @click="clearFilters"
-                    >
-                        <RotateCcw aria-hidden="true" />
-                        {{ t('backlog.filters.clear') }}
-                    </Button>
-                </div>
+                {{ status }}
+            </div>
 
-                <div
-                    class="grid min-w-0 gap-3 sm:grid-cols-2 xl:grid-cols-[minmax(14rem,2fr)_repeat(4,minmax(9rem,1fr))]"
-                >
+            <Card class="gap-0 overflow-hidden">
+                <CardHeader class="border-b">
+                    <CardTitle>Backlog tickets</CardTitle>
+                    <CardDescription>
+                        Tickets remain here while their status belongs to
+                        backlog.
+                    </CardDescription>
+                </CardHeader>
+
+                <CardContent class="p-0">
                     <div
-                        class="grid min-w-0 gap-1.5 sm:col-span-2 xl:col-span-1"
+                        v-if="tickets.length === 0"
+                        class="text-muted-foreground p-6 text-sm"
                     >
-                        <label
-                            for="backlog-query"
-                            class="text-caption font-semibold"
-                        >
-                            {{ t('backlog.filters.search') }}
-                        </label>
-                        <div class="relative min-w-0">
-                            <Search
-                                class="text-muted-foreground pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2"
-                                aria-hidden="true"
-                            />
-                            <input
-                                id="backlog-query"
-                                v-model="filters.query"
-                                type="search"
-                                class="border-input bg-card text-body min-h-control focus-visible:ring-ring/35 w-full min-w-0 rounded-md border py-2 pl-9 pr-3 focus-visible:outline-none focus-visible:ring-2"
-                                :placeholder="
-                                    t('backlog.filters.searchPlaceholder')
-                                "
-                            />
-                        </div>
+                        No backlog tickets exist yet.
                     </div>
 
-                    <div class="grid min-w-0 gap-1.5">
-                        <label
-                            for="backlog-type"
-                            class="text-caption font-semibold"
+                    <ul v-else class="gap-column grid p-4">
+                        <TicketListItem
+                            v-for="ticket in tickets"
+                            :key="ticket.id"
+                            :project-id="project.id"
+                            :ticket="ticket"
                         >
-                            {{ t('backlog.filters.type') }}
-                        </label>
-                        <select
-                            id="backlog-type"
-                            v-model="filters.typeId"
-                            class="border-input bg-card text-body min-h-control focus-visible:ring-ring/35 w-full min-w-0 rounded-md border px-3 py-2 focus-visible:outline-none focus-visible:ring-2"
-                        >
-                            <option value="">
-                                {{ t('backlog.filters.allTypes') }}
-                            </option>
-                            <option
-                                v-for="ticketType in ticketTypes"
-                                :key="ticketType.id"
-                                :value="ticketType.id"
-                            >
-                                {{ ticketType.name }}
-                            </option>
-                        </select>
-                    </div>
-
-                    <div class="grid min-w-0 gap-1.5">
-                        <label
-                            for="backlog-priority"
-                            class="text-caption font-semibold"
-                        >
-                            {{ t('backlog.filters.priority') }}
-                        </label>
-                        <select
-                            id="backlog-priority"
-                            v-model="filters.priorityId"
-                            class="border-input bg-card text-body min-h-control focus-visible:ring-ring/35 w-full min-w-0 rounded-md border px-3 py-2 focus-visible:outline-none focus-visible:ring-2"
-                        >
-                            <option value="">
-                                {{ t('backlog.filters.allPriorities') }}
-                            </option>
-                            <option
-                                v-for="priority in ticketPriorities"
-                                :key="priority.id"
-                                :value="priority.id"
-                            >
-                                {{ priority.name }}
-                            </option>
-                        </select>
-                    </div>
-
-                    <div class="grid min-w-0 gap-1.5">
-                        <label
-                            for="backlog-status"
-                            class="text-caption font-semibold"
-                        >
-                            {{ t('backlog.filters.status') }}
-                        </label>
-                        <select
-                            id="backlog-status"
-                            v-model="filters.statusId"
-                            class="border-input bg-card text-body min-h-control focus-visible:ring-ring/35 w-full min-w-0 rounded-md border px-3 py-2 focus-visible:outline-none focus-visible:ring-2"
-                        >
-                            <option value="">
-                                {{ t('backlog.filters.allStatuses') }}
-                            </option>
-                            <option
-                                v-for="ticketStatus in backlogTicketStatuses"
-                                :key="ticketStatus.id"
-                                :value="ticketStatus.id"
-                            >
-                                {{ ticketStatus.name }}
-                            </option>
-                        </select>
-                    </div>
-
-                    <div class="grid min-w-0 gap-1.5">
-                        <label
-                            for="backlog-assignee"
-                            class="text-caption font-semibold"
-                        >
-                            {{ t('backlog.filters.assignee') }}
-                        </label>
-                        <select
-                            id="backlog-assignee"
-                            v-model="filters.assigneeId"
-                            class="border-input bg-card text-body min-h-control focus-visible:ring-ring/35 w-full min-w-0 rounded-md border px-3 py-2 focus-visible:outline-none focus-visible:ring-2"
-                        >
-                            <option value="">
-                                {{ t('backlog.filters.allAssignees') }}
-                            </option>
-                            <option value="unassigned">
-                                {{ t('tickets.unassigned') }}
-                            </option>
-                            <option
-                                v-for="user in users"
-                                :key="user.id"
-                                :value="user.id"
-                            >
-                                {{ user.name }}
-                            </option>
-                        </select>
-                    </div>
-                </div>
-            </section>
-
-            <div
-                v-if="tickets.length === 0"
-                class="grid justify-items-start gap-3"
-            >
-                <FeedbackState
-                    state="empty"
-                    :title="t('backlog.empty.title')"
-                    :description="t('backlog.empty.description')"
-                />
-                <Button v-if="canCreateTickets" as-child size="sm">
-                    <Link
-                        :href="
-                            createTicket(
-                                { project: project.id },
-                                { query: { source: 'backlog' } },
-                            )
-                        "
-                    >
-                        <Plus aria-hidden="true" />
-                        {{ t('backlog.empty.action') }}
-                    </Link>
-                </Button>
-            </div>
-
-            <div
-                v-else-if="visibleTicketCount === 0"
-                class="grid justify-items-start gap-3"
-            >
-                <FeedbackState
-                    state="empty"
-                    :title="t('backlog.filters.empty.title')"
-                    :description="t('backlog.filters.empty.description')"
-                />
-                <Button
-                    type="button"
-                    variant="outline"
-                    size="sm"
-                    @click="clearFilters"
-                >
-                    <RotateCcw aria-hidden="true" />
-                    {{ t('backlog.filters.clear') }}
-                </Button>
-            </div>
-
-            <section
-                v-else
-                aria-labelledby="backlog-results-title"
-                class="grid min-w-0 gap-3"
-            >
-                <div
-                    class="flex min-w-0 flex-col gap-3 sm:flex-row sm:items-center sm:justify-between"
-                >
-                    <div class="grid min-w-0 gap-1">
-                        <h2 id="backlog-results-title" class="text-title">
-                            {{ t('backlog.results.title') }}
-                        </h2>
-                        <p class="text-caption text-muted-foreground">
-                            {{
-                                t('backlog.results.count', {
-                                    count: visibleTicketCount,
-                                    total: tickets.length,
-                                })
-                            }}
-                        </p>
-                    </div>
-                    <Button
-                        v-if="expandableTicketIds.length > 0"
-                        type="button"
-                        variant="outline"
-                        size="sm"
-                        @click="toggleAllBranches"
-                    >
-                        <ChevronsUpDown
-                            v-if="allVisibleBranchesCollapsed"
-                            aria-hidden="true"
-                        />
-                        <ChevronsDownUp v-else aria-hidden="true" />
-                        {{
-                            t(
-                                allVisibleBranchesCollapsed
-                                    ? 'backlog.tree.expandAll'
-                                    : 'backlog.tree.collapseAll',
-                            )
-                        }}
-                    </Button>
-                </div>
-
-                <BacklogTicketTree
-                    :nodes="filteredTicketTree"
-                    :project-id="project.id"
-                    :can-edit-tickets="canEditTickets"
-                    :collapsed-ticket-ids="collapsedTicketIds"
-                    :pending-ticket-id="pendingTicketId"
-                    @toggle="toggleTicket"
-                    @move-start="pendingTicketId = $event"
-                    @move-finish="finishMove"
-                />
-            </section>
+                            <template v-if="canEditTickets" #actions>
+                                <Form
+                                    v-bind="
+                                        ProjectBoardController.move.form({
+                                            project: project.id,
+                                            ticket: ticket.id,
+                                        })
+                                    "
+                                    class="flex w-full flex-col gap-2"
+                                    v-slot="{ processing }"
+                                >
+                                    <input
+                                        type="hidden"
+                                        name="redirect_to"
+                                        value="backlog"
+                                    />
+                                    <label
+                                        :for="`backlog-ticket-status-${ticket.id}`"
+                                        class="text-label text-muted-foreground uppercase"
+                                    >
+                                        Move to status
+                                    </label>
+                                    <div
+                                        class="flex flex-col gap-2 sm:flex-row"
+                                    >
+                                        <select
+                                            :id="`backlog-ticket-status-${ticket.id}`"
+                                            name="ticket_status_id"
+                                            :disabled="
+                                                allowedTargetStatuses(ticket)
+                                                    .length === 0 || processing
+                                            "
+                                            class="border-input bg-background shadow-xs focus-visible:border-ring focus-visible:ring-ring/50 min-h-control min-w-0 flex-1 rounded-md border px-3 py-2 text-sm outline-none transition-[color,box-shadow] focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-60"
+                                        >
+                                            <option
+                                                v-if="
+                                                    allowedTargetStatuses(
+                                                        ticket,
+                                                    ).length === 0
+                                                "
+                                                value=""
+                                            >
+                                                No allowed moves
+                                            </option>
+                                            <option
+                                                v-for="ticketStatus in allowedTargetStatuses(
+                                                    ticket,
+                                                )"
+                                                :key="ticketStatus.id"
+                                                :value="ticketStatus.id"
+                                            >
+                                                {{
+                                                    ticketStatusLabel(
+                                                        ticketStatus,
+                                                        'Unknown status',
+                                                    )
+                                                }}
+                                            </option>
+                                        </select>
+                                        <Button
+                                            type="submit"
+                                            size="sm"
+                                            :disabled="
+                                                processing ||
+                                                allowedTargetStatuses(ticket)
+                                                    .length === 0
+                                            "
+                                        >
+                                            Move
+                                        </Button>
+                                    </div>
+                                    <p
+                                        v-if="
+                                            allowedTargetStatuses(ticket)
+                                                .length === 0
+                                        "
+                                        class="text-caption text-muted-foreground"
+                                    >
+                                        This status does not allow moving
+                                        anywhere else.
+                                    </p>
+                                </Form>
+                            </template>
+                        </TicketListItem>
+                    </ul>
+                </CardContent>
+            </Card>
         </div>
     </AppLayout>
 </template>

resources/js/pages/projects/Ticket.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { Head } from '@inertiajs/vue3';
-import { computed, useTemplateRef } from 'vue';
-import TicketDetailBlocker from '@/components/tickets/detail/TicketDetailBlocker.vue';
+import { computed } from 'vue';
 import TicketDetailContent from '@/components/tickets/detail/TicketDetailContent.vue';
 import TicketDetailGit from '@/components/tickets/detail/TicketDetailGit.vue';
 import TicketDetailHeader from '@/components/tickets/detail/TicketDetailHeader.vue';
@@ -15,7 +14,6 @@ import { show as showTicket } from '@/routes/projects/tickets';
 import type { BreadcrumbItem, ProjectTicketPageProps } from '@/types';
 const props = defineProps<ProjectTicketPageProps>();
 const { t } = useLocalization();
-const ticketContent = useTemplateRef('ticketContent');
 const breadcrumbs = computed<BreadcrumbItem[]>(() => [
     { title: t('navigation.projects'), href: projectIndex() },
     { title: props.project.name, href: show(props.project.id) },
@@ -51,7 +49,6 @@ const breadcrumbs = computed<BreadcrumbItem[]>(() => [
                 class="grid min-w-0 items-start gap-6 xl:grid-cols-[minmax(0,1fr)_20rem]"
             >
                 <TicketDetailContent
-                    ref="ticketContent"
                     :ticket="ticket"
                     :project="project"
                     :can-edit-ticket="canEditTicket"
@@ -65,7 +62,7 @@ const breadcrumbs = computed<BreadcrumbItem[]>(() => [
                 />
                 <aside
                     :aria-label="t('ticketDetail.metadata')"
-                    class="min-w-0 xl:col-start-2 xl:row-span-5 xl:row-start-1"
+                    class="min-w-0 xl:col-start-2 xl:row-span-4 xl:row-start-1"
                 >
                     <TicketDetailMetadata
                         :ticket="ticket"
@@ -74,12 +71,6 @@ const breadcrumbs = computed<BreadcrumbItem[]>(() => [
                         :ticket-field-definitions="ticketFieldDefinitions"
                     />
                 </aside>
-                <TicketDetailBlocker
-                    :ticket="ticket"
-                    :project="project"
-                    :can-edit-ticket="canEditTicket"
-                    class="xl:col-start-1"
-                />
                 <TicketDetailRelationships
                     :ticket="ticket"
                     :project="project"
@@ -89,7 +80,6 @@ const breadcrumbs = computed<BreadcrumbItem[]>(() => [
                     :linked-tickets="linkedTickets"
                     :ticket-link-types="ticketLinkTypes"
                     :ticket-link-options="ticketLinkOptions"
-                    @edit-parent="ticketContent?.editParent()"
                     class="xl:col-start-1"
                 />
                 <TicketDetailHistory :ticket="ticket" class="xl:col-start-1" />

resources/js/pages/projects/TicketCreate.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import { Head, Link, useForm } from '@inertiajs/vue3';
-import { useSessionStorage } from '@vueuse/core';
-import { computed } from 'vue';
+import { Head, Link, useForm, useRemember } from '@inertiajs/vue3';
+import { computed, toRef, unref } from 'vue';
 import ProjectTicketController from '@/actions/App/Http/Controllers/ProjectTicketController';
+import TicketFormField from '@/components/tickets/TicketFormField.vue';
 import TicketFormFields from '@/components/tickets/TicketFormFields.vue';
 import { useLocalization } from '@/composables/useLocalization';
 import FormFeedback from '@/components/FormFeedback.vue';
@@ -17,8 +17,10 @@ import {
     CardTitle,
 } from '@/components/ui/card';
 import AppLayout from '@/layouts/AppLayout.vue';
-import AcceptanceCriteriaChecklist from '@/components/tickets/AcceptanceCriteriaChecklist.vue';
-import type { AcceptanceCriteriaModel } from '@/types/models/acceptance-criteria-model';
+import {
+    buildAcceptanceCriteria,
+    parseChecklistLines,
+} from '@/lib/acceptance-criteria';
 import { index as backlogIndex } from '@/routes/projects/backlog';
 import { index as boardIndex } from '@/routes/projects/board';
 import { index, show } from '@/routes/projects/index';
@@ -69,9 +71,19 @@ const hasTicketMetadata = computed(
 );
 
 const draftKey = `projects:${props.project.id}:tickets:create`;
-const draftGeneration = useSessionStorage(`${draftKey}:generation`, 0);
-const form = useForm(`${draftKey}:${draftGeneration.value}`, {
-    acceptance_criteria: [] as AcceptanceCriteriaModel,
+const acceptanceCriteriaDraft = useRemember(
+    { checklist: '' },
+    `${draftKey}:checklist`,
+);
+const acceptanceCriteriaChecklist = toRef(
+    unref(acceptanceCriteriaDraft),
+    'checklist',
+);
+
+const form = useForm(draftKey, {
+    acceptance_criteria: buildAcceptanceCriteria(
+        acceptanceCriteriaChecklist.value,
+    ),
     assignee_user_id: '',
     description: '',
     parent_ticket_id: '',
@@ -84,17 +96,24 @@ const form = useForm(`${draftKey}:${draftGeneration.value}`, {
     title: '',
 });
 
-const isDirty = computed(() => form.isDirty);
-const protection = useFormProtection(form);
+const isDirty = computed(
+    () => form.isDirty || acceptanceCriteriaChecklist.value !== '',
+);
+const protection = useFormProtection(form, { isDirty: () => isDirty.value });
 const reset = (): void => {
     if (form.processing || !protection.confirmLeave()) {
         return;
     }
     form.reset();
     form.clearErrors();
+    acceptanceCriteriaChecklist.value = '';
     protection.clearFeedback();
 };
 
+const acceptanceCriteriaPreviewItems = computed(() =>
+    parseChecklistLines(acceptanceCriteriaChecklist.value),
+);
+
 const acceptanceCriteriaError = computed(() => {
     return (
         form.errors.acceptance_criteria ??
@@ -109,19 +128,17 @@ const submit = (): void => {
     if (!hasTicketMetadata.value || form.processing) {
         return;
     }
+    form.acceptance_criteria = buildAcceptanceCriteria(
+        acceptanceCriteriaChecklist.value,
+    );
 
     protection.submit(
         ProjectTicketController.store({ project: props.project.id }),
         {
             preserveScroll: true,
             onSuccess: () => {
-                // The source page is unmounted before this callback, so its storage watcher has stopped.
-                window.sessionStorage.setItem(
-                    `${draftKey}:generation`,
-                    String(draftGeneration.value + 1),
-                );
-                draftGeneration.value++;
                 form.reset();
+                acceptanceCriteriaChecklist.value = '';
             },
         },
     );
@@ -207,11 +224,46 @@ const submit = (): void => {
                             autofocus
                         >
                             <template #content>
-                                <AcceptanceCriteriaChecklist
-                                    v-model="form.acceptance_criteria"
-                                    :disabled="form.processing"
+                                <TicketFormField
+                                    id="acceptance_criteria_checklist"
+                                    v-model="acceptanceCriteriaChecklist"
+                                    kind="textarea"
+                                    :label="t('ticketDetail.checklistEditor')"
+                                    :hint="t('ticketForm.checklistHelp')"
+                                    :placeholder="
+                                        t('ticketDetail.checklistPlaceholder')
+                                    "
                                     :error="acceptanceCriteriaError"
+                                    :disabled="form.processing"
                                 />
+                                <div
+                                    v-if="acceptanceCriteriaPreviewItems.length"
+                                    class="bg-muted/30 min-w-0 rounded-xl border p-4 text-sm"
+                                >
+                                    <p class="mb-3 font-medium">
+                                        {{ t('ticketForm.checklistPreview') }}
+                                    </p>
+                                    <ul class="space-y-2">
+                                        <li
+                                            v-for="(
+                                                item, index
+                                            ) in acceptanceCriteriaPreviewItems"
+                                            :key="index"
+                                            :style="{
+                                                marginInlineStart: `${item.indent * 0.75}rem`,
+                                            }"
+                                            class="flex min-w-0 items-start gap-2"
+                                        >
+                                            <span aria-hidden="true">{{
+                                                item.checked ? '☑' : '☐'
+                                            }}</span>
+                                            <span
+                                                class="wrap-anywhere min-w-0"
+                                                >{{ item.text }}</span
+                                            >
+                                        </li>
+                                    </ul>
+                                </div>
                             </template>
                         </TicketFormFields>
                         <div

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

@@ -1,209 +1,674 @@
 <script setup lang="ts">
-import { Head } from '@inertiajs/vue3';
-import { Columns3, Inbox, Pencil, Plus, Trash2 } from 'lucide-vue-next';
-import { computed, ref } from 'vue';
-import FeedbackState from '@/components/FeedbackState.vue';
+import { Form, Head, Link } from '@inertiajs/vue3';
+import ProjectBoardSettingsController from '@/actions/App/Http/Controllers/ProjectBoardSettingsController';
+import Heading from '@/components/Heading.vue';
+import InputError from '@/components/InputError.vue';
 import TemplateInheritancePanel from '@/components/projects/TemplateInheritancePanel.vue';
-import WorkflowEditorDialog from '@/components/projects/WorkflowEditorDialog.vue';
-import WorkflowStatusList from '@/components/projects/WorkflowStatusList.vue';
-import WorkflowTransitionMatrix from '@/components/projects/WorkflowTransitionMatrix.vue';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
-import { Card, CardContent, CardHeader } from '@/components/ui/card';
-import { useLocalization } from '@/composables/useLocalization';
+import {
+    Card,
+    CardContent,
+    CardDescription,
+    CardHeader,
+    CardTitle,
+} from '@/components/ui/card';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
 import AppLayout from '@/layouts/AppLayout.vue';
-import SettingsLayout from '@/layouts/projects/SettingsLayout.vue';
-import { index, show } from '@/routes/projects';
-import { board } from '@/routes/projects/settings';
+import { index, show } from '@/routes/projects/index';
+import {
+    board as boardSettings,
+    general as generalSettings,
+    metadata as metadataSettings,
+    notifications as notificationSettings,
+    repositories as repositorySettings,
+} from '@/routes/projects/settings';
 import type { BreadcrumbItem, ProjectBoardSettingsPageProps } from '@/types';
-import type { WorkflowEditorTarget } from '@/types/project-workflow';
+import type { TicketStatusModel } from '@/types/models/ticket-status-model';
 
 const props = defineProps<ProjectBoardSettingsPageProps>();
-const { t } = useLocalization();
-const target = ref<WorkflowEditorTarget | null>(null);
-const breadcrumbs = computed<BreadcrumbItem[]>(() => [
-    { title: t('navigation.projects'), href: index() },
-    { title: props.project.name, href: show(props.project.id) },
-    { title: t('workflow.title'), href: board(props.project.id) },
-]);
+
+const breadcrumbs: BreadcrumbItem[] = [
+    {
+        title: 'Projects',
+        href: index(),
+    },
+    {
+        title: props.project.name,
+        href: show(props.project.id),
+    },
+    {
+        title: 'Board settings',
+        href: boardSettings(props.project.id),
+    },
+];
+
+const ticketStatusLabel = (ticketStatus: TicketStatusModel): string => {
+    if (
+        ticketStatus.board_column === null ||
+        ticketStatus.board_column === undefined
+    ) {
+        return ticketStatus.name;
+    }
+
+    if (ticketStatus.board_column.name === ticketStatus.name) {
+        return ticketStatus.name;
+    }
+
+    return `${ticketStatus.board_column.name} / ${ticketStatus.name}`;
+};
+
+const transitionTargetOptions = (
+    sourceStatus: TicketStatusModel,
+): TicketStatusModel[] => {
+    return props.ticketStatuses.filter(
+        (ticketStatus) => ticketStatus.id !== sourceStatus.id,
+    );
+};
+
+const statusAllowsTarget = (
+    sourceStatus: TicketStatusModel,
+    targetStatus: TicketStatusModel,
+): boolean => {
+    return (
+        sourceStatus.allowed_target_statuses?.some(
+            (allowedTargetStatus) => allowedTargetStatus.id === targetStatus.id,
+        ) ?? false
+    );
+};
 </script>
 
 <template>
     <AppLayout :breadcrumbs="breadcrumbs">
-        <Head :title="t('workflow.pageTitle', { project: project.name })" />
-        <SettingsLayout :project-name="project.name" :project-key="project.key">
-            <header class="grid gap-3">
-                <h2 class="text-title">{{ t('workflow.title') }}</h2>
-                <p class="text-muted-foreground">
-                    {{ t('workflow.description') }}
-                </p>
-            </header>
-            <FeedbackState
+        <Head :title="`${project.name} board settings`" />
+
+        <div class="flex flex-1 flex-col gap-6 p-4">
+            <div
+                class="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between"
+            >
+                <div class="space-y-3">
+                    <Badge variant="outline" class="px-3 py-1">
+                        {{ project.key }}
+                    </Badge>
+                    <Heading
+                        :title="`${project.name} board settings`"
+                        description="Configure the ordered board columns that define valid in-board ticket statuses for this project."
+                    />
+                </div>
+
+                <div class="flex flex-wrap gap-3">
+                    <Button
+                        v-if="$page.props.auth.permissions.globalAdmin"
+                        as-child
+                        variant="outline"
+                    >
+                        <Link :href="generalSettings(project.id)">
+                            General settings
+                        </Link>
+                    </Button>
+
+                    <Button as-child variant="outline">
+                        <Link :href="metadataSettings(project.id)">
+                            Ticket settings
+                        </Link>
+                    </Button>
+
+                    <Button as-child variant="outline">
+                        <Link :href="repositorySettings(project.id)">
+                            Repository settings
+                        </Link>
+                    </Button>
+
+                    <Button as-child variant="outline">
+                        <Link :href="notificationSettings(project.id)">
+                            Notification settings
+                        </Link>
+                    </Button>
+
+                    <Button as-child variant="outline">
+                        <Link :href="show(project.id)">Back to project</Link>
+                    </Button>
+                </div>
+            </div>
+
+            <div
                 v-if="status"
-                state="success"
-                :title="t('workflow.updated')"
-            />
+                class="rounded-xl border border-emerald-200 bg-emerald-50 px-4 py-3 text-sm text-emerald-900 dark:border-emerald-900/70 dark:bg-emerald-950/40 dark:text-emerald-100"
+            >
+                {{ status }}
+            </div>
+
             <TemplateInheritancePanel
-                :project-id="project.id"
-                :template-state="templateState"
                 :areas="[
                     'board_columns',
                     'ticket_statuses',
                     'status_transitions',
                 ]"
+                :project-id="project.id"
+                :template-state="templateState"
             />
-            <Card
-                class="min-w-0 gap-0 overflow-hidden rounded-xl py-0 shadow-none"
-            >
-                <CardHeader class="gap-stack grid-cols-1 border-b p-5 sm:p-6">
-                    <div class="flex flex-wrap items-center gap-2">
-                        <Inbox
-                            class="text-primary size-5 shrink-0"
-                            aria-hidden="true"
-                        />
-                        <h3 class="font-semibold">
-                            {{ t('workflow.backlog') }}
-                        </h3>
-                        <Badge variant="secondary">{{
-                            t('workflow.offBoard')
-                        }}</Badge>
-                    </div>
-                    <p class="text-muted-foreground text-sm">
-                        {{ t('workflow.backlogDescription') }}
-                    </p>
+
+            <Card>
+                <CardHeader>
+                    <CardTitle>Workflow model</CardTitle>
+                    <CardDescription>
+                        Backlog is always the intake queue; board columns group
+                        the statuses that appear on the board.
+                    </CardDescription>
                 </CardHeader>
-                <CardContent class="p-5 sm:p-6"
-                    ><WorkflowStatusList
-                        :column="null"
-                        :statuses="backlogTicketStatuses"
-                        @edit="target = $event"
-                /></CardContent>
+
+                <CardContent class="flex flex-wrap gap-3">
+                    <Badge class="px-3 py-1">Backlog</Badge>
+                    <Badge
+                        v-for="ticketStatus in backlogTicketStatuses"
+                        :key="ticketStatus.id"
+                        variant="outline"
+                        class="px-3 py-1"
+                    >
+                        {{ ticketStatus.name }}
+                    </Badge>
+                    <p class="text-muted-foreground text-sm">
+                        Tickets move between statuses; backlog statuses are not
+                        included in a board column.
+                    </p>
+                </CardContent>
             </Card>
-            <section
-                class="grid min-w-0 gap-4"
-                aria-labelledby="workflow-columns"
-            >
-                <header
-                    class="flex flex-wrap items-center justify-between gap-3"
-                >
-                    <div class="flex items-center gap-2">
-                        <Columns3
-                            class="text-primary size-5"
-                            aria-hidden="true"
-                        />
-                        <h3 id="workflow-columns" class="font-semibold">
-                            {{ t('workflow.columns') }}
-                        </h3>
-                        <Badge variant="secondary">{{
-                            boardColumns.length
-                        }}</Badge>
-                    </div>
-                    <Button
-                        type="button"
-                        class="w-full sm:w-auto"
-                        @click="target = { kind: 'column', action: 'create' }"
-                        ><Plus class="size-4" aria-hidden="true" />{{
-                            t('workflow.addColumn')
-                        }}</Button
-                    >
-                </header>
-                <p class="text-muted-foreground text-sm">
-                    {{ t('workflow.columnsDescription') }}
-                </p>
-                <FeedbackState
-                    v-if="boardColumns.length === 0"
-                    state="empty"
-                    :title="t('workflow.emptyColumns')"
-                    :description="t('workflow.emptyColumnsDescription')"
-                />
-                <ol
-                    v-else
-                    class="grid min-w-0 gap-4"
-                    :aria-label="t('workflow.columns')"
-                >
-                    <li
-                        v-for="column in boardColumns"
-                        :key="column.id"
-                        class="bg-card min-w-0 overflow-hidden rounded-xl border"
-                        :data-column-id="column.id"
-                    >
-                        <header
-                            class="bg-muted/35 flex min-w-0 flex-wrap items-center gap-3 border-b p-4 sm:p-5"
+
+            <Card class="gap-0 overflow-hidden">
+                <CardHeader class="border-b">
+                    <CardTitle>Status moves</CardTitle>
+                    <CardDescription>
+                        Choose exactly where each status is allowed to move
+                        next.
+                    </CardDescription>
+                </CardHeader>
+
+                <CardContent class="p-0">
+                    <div class="overflow-x-auto">
+                        <table
+                            class="divide-border min-w-full divide-y text-sm"
                         >
-                            <span
-                                class="bg-accent text-accent-foreground flex size-9 shrink-0 items-center justify-center rounded-lg text-sm font-semibold"
-                                :aria-label="
-                                    t('workflow.positionValue', {
-                                        position: column.position,
-                                    })
-                                "
-                                >{{ column.position }}</span
+                            <thead
+                                class="bg-muted/40 text-muted-foreground text-left"
                             >
-                            <h4
-                                class="min-w-0 flex-1 basis-24 break-words font-semibold"
-                            >
-                                {{ column.name }}
-                            </h4>
-                            <div class="flex gap-1">
-                                <Button
-                                    type="button"
-                                    variant="ghost"
-                                    size="icon"
-                                    :aria-label="
-                                        t('workflow.changeColumn', {
-                                            name: column.name,
-                                        })
-                                    "
-                                    @click="
-                                        target = {
-                                            kind: 'column',
-                                            action: 'edit',
-                                            column,
-                                        }
-                                    "
-                                    ><Pencil class="size-4" aria-hidden="true"
-                                /></Button>
-                                <Button
-                                    type="button"
-                                    variant="ghost"
-                                    size="icon"
-                                    class="text-destructive"
-                                    :aria-label="
-                                        t('workflow.removeColumn', {
-                                            name: column.name,
-                                        })
-                                    "
-                                    @click="
-                                        target = {
-                                            kind: 'column',
-                                            action: 'delete',
-                                            column,
-                                        }
-                                    "
-                                    ><Trash2 class="size-4" aria-hidden="true"
-                                /></Button>
+                                <tr>
+                                    <th class="px-4 py-3 font-medium">
+                                        Source status
+                                    </th>
+                                    <th class="px-4 py-3 font-medium">
+                                        Allowed move targets
+                                    </th>
+                                    <th class="px-4 py-3 font-medium">Save</th>
+                                </tr>
+                            </thead>
+                            <tbody class="divide-border divide-y">
+                                <tr
+                                    v-for="sourceStatus in ticketStatuses"
+                                    :key="sourceStatus.id"
+                                    class="bg-background align-top"
+                                >
+                                    <td class="px-4 py-4">
+                                        <Badge variant="outline">
+                                            {{
+                                                ticketStatusLabel(sourceStatus)
+                                            }}
+                                        </Badge>
+                                    </td>
+                                    <td class="px-4 py-4">
+                                        <Form
+                                            :id="`status-transitions-${sourceStatus.id}`"
+                                            v-bind="
+                                                ProjectBoardSettingsController.updateStatusTransitions.form(
+                                                    [
+                                                        project.id,
+                                                        sourceStatus.id,
+                                                    ],
+                                                )
+                                            "
+                                            class="grid gap-3"
+                                            v-slot="{ errors }"
+                                        >
+                                            <div
+                                                v-if="
+                                                    transitionTargetOptions(
+                                                        sourceStatus,
+                                                    ).length === 0
+                                                "
+                                                class="text-muted-foreground"
+                                            >
+                                                No other statuses exist yet.
+                                            </div>
+                                            <div
+                                                v-else
+                                                class="grid gap-2 md:grid-cols-2 xl:grid-cols-3"
+                                            >
+                                                <label
+                                                    v-for="targetStatus in transitionTargetOptions(
+                                                        sourceStatus,
+                                                    )"
+                                                    :key="targetStatus.id"
+                                                    class="border-border flex items-center gap-2 rounded-lg border px-3 py-2"
+                                                >
+                                                    <input
+                                                        type="checkbox"
+                                                        name="allowed_ticket_status_ids[]"
+                                                        :value="targetStatus.id"
+                                                        :checked="
+                                                            statusAllowsTarget(
+                                                                sourceStatus,
+                                                                targetStatus,
+                                                            )
+                                                        "
+                                                        class="border-input text-primary focus:ring-ring size-4 rounded"
+                                                    />
+                                                    <span>{{
+                                                        ticketStatusLabel(
+                                                            targetStatus,
+                                                        )
+                                                    }}</span>
+                                                </label>
+                                            </div>
+                                            <InputError
+                                                :message="
+                                                    errors.allowed_ticket_status_ids
+                                                "
+                                            />
+                                        </Form>
+                                    </td>
+                                    <td class="px-4 py-4">
+                                        <Button
+                                            type="submit"
+                                            variant="outline"
+                                            :form="`status-transitions-${sourceStatus.id}`"
+                                        >
+                                            Save
+                                        </Button>
+                                    </td>
+                                </tr>
+                            </tbody>
+                        </table>
+                    </div>
+                </CardContent>
+            </Card>
+
+            <Card>
+                <CardHeader>
+                    <CardTitle>Backlog statuses</CardTitle>
+                    <CardDescription>
+                        New backlog tickets choose one of these statuses.
+                    </CardDescription>
+                </CardHeader>
+
+                <CardContent class="space-y-4">
+                    <div
+                        v-for="ticketStatus in backlogTicketStatuses"
+                        :key="ticketStatus.id"
+                        class="border-border rounded-lg border p-4"
+                    >
+                        <Form
+                            v-bind="
+                                ProjectBoardSettingsController.updateStatus.form(
+                                    [project.id, ticketStatus.id],
+                                )
+                            "
+                            class="grid gap-4 md:grid-cols-[minmax(0,1fr)_auto]"
+                            v-slot="{ errors, processing }"
+                        >
+                            <div class="grid gap-2">
+                                <Label
+                                    :for="`backlog-status-${ticketStatus.id}`"
+                                >
+                                    Status name
+                                </Label>
+                                <Input
+                                    :id="`backlog-status-${ticketStatus.id}`"
+                                    name="name"
+                                    :default-value="ticketStatus.name"
+                                    required
+                                />
+                                <InputError :message="errors.name" />
                             </div>
-                        </header>
-                        <div class="p-4 sm:p-5">
-                            <WorkflowStatusList
-                                :column="column"
-                                :statuses="column.ticket_statuses ?? []"
-                                @edit="target = $event"
-                            />
+
+                            <div class="flex items-end">
+                                <Button
+                                    type="submit"
+                                    variant="outline"
+                                    :disabled="processing"
+                                >
+                                    Save
+                                </Button>
+                            </div>
+                        </Form>
+
+                        <div class="mt-3 flex justify-end">
+                            <Form
+                                v-bind="
+                                    ProjectBoardSettingsController.destroyStatus.form(
+                                        [project.id, ticketStatus.id],
+                                    )
+                                "
+                                v-slot="{ errors, processing }"
+                            >
+                                <InputError
+                                    :message="errors.ticket_status_id"
+                                    class="mb-2"
+                                />
+                                <Button
+                                    type="submit"
+                                    variant="destructive"
+                                    :disabled="
+                                        processing ||
+                                        backlogTicketStatuses.length <= 1
+                                    "
+                                >
+                                    Delete
+                                </Button>
+                            </Form>
                         </div>
-                    </li>
-                </ol>
-            </section>
-            <WorkflowTransitionMatrix
-                :project-id="project.id"
-                :statuses="ticketStatuses"
-            />
-            <WorkflowEditorDialog
-                :project-id="project.id"
-                :column-count="boardColumns.length"
-                :target="target"
-                @close="target = null"
-            />
-        </SettingsLayout>
+                    </div>
+
+                    <Form
+                        v-bind="
+                            ProjectBoardSettingsController.storeStatus.form(
+                                project.id,
+                            )
+                        "
+                        class="grid gap-4 md:grid-cols-[minmax(0,1fr)_auto]"
+                        v-slot="{ errors, processing }"
+                    >
+                        <div class="grid gap-2">
+                            <Label for="backlog-status-name">
+                                New backlog status
+                            </Label>
+                            <Input
+                                id="backlog-status-name"
+                                name="name"
+                                placeholder="Ready"
+                                required
+                            />
+                            <InputError :message="errors.name" />
+                        </div>
+
+                        <div class="flex items-end">
+                            <Button type="submit" :disabled="processing">
+                                Add status
+                            </Button>
+                        </div>
+                    </Form>
+                </CardContent>
+            </Card>
+
+            <div class="grid gap-6 xl:grid-cols-[22rem_minmax(0,1fr)]">
+                <Card>
+                    <CardHeader>
+                        <CardTitle>Add column</CardTitle>
+                        <CardDescription>
+                            New columns extend the project-specific workflow and
+                            are inserted at the end unless you specify a
+                            position later.
+                        </CardDescription>
+                    </CardHeader>
+
+                    <CardContent>
+                        <Form
+                            v-bind="
+                                ProjectBoardSettingsController.store.form(
+                                    project.id,
+                                )
+                            "
+                            class="space-y-4"
+                            v-slot="{ errors, processing }"
+                        >
+                            <div class="grid gap-2">
+                                <Label for="name">Column name</Label>
+                                <Input
+                                    id="name"
+                                    name="name"
+                                    required
+                                    autofocus
+                                    placeholder="In Review"
+                                />
+                                <InputError :message="errors.name" />
+                            </div>
+
+                            <Button type="submit" :disabled="processing">
+                                Add column
+                            </Button>
+                        </Form>
+                    </CardContent>
+                </Card>
+
+                <Card class="gap-0 overflow-hidden">
+                    <CardHeader class="border-b">
+                        <CardTitle>Board columns</CardTitle>
+                        <CardDescription>
+                            Rename columns or change the numeric position to
+                            reorder the board from left to right.
+                        </CardDescription>
+                    </CardHeader>
+
+                    <CardContent class="space-y-4 p-6">
+                        <div
+                            v-if="boardColumns.length === 0"
+                            class="text-muted-foreground text-sm"
+                        >
+                            No board columns exist yet.
+                        </div>
+
+                        <div
+                            v-for="column in boardColumns"
+                            :key="column.id"
+                            class="border-border rounded-xl border p-4"
+                        >
+                            <Form
+                                v-bind="
+                                    ProjectBoardSettingsController.update.form([
+                                        project.id,
+                                        column.id,
+                                    ])
+                                "
+                                class="grid gap-4 lg:grid-cols-[minmax(0,1fr)_8rem_auto_auto]"
+                                v-slot="{ errors, processing }"
+                            >
+                                <div class="grid gap-2">
+                                    <Label :for="`column-name-${column.id}`">
+                                        Name
+                                    </Label>
+                                    <Input
+                                        :id="`column-name-${column.id}`"
+                                        name="name"
+                                        :default-value="column.name"
+                                        required
+                                    />
+                                    <InputError :message="errors.name" />
+                                </div>
+
+                                <div class="grid gap-2">
+                                    <Label
+                                        :for="`column-position-${column.id}`"
+                                    >
+                                        Position
+                                    </Label>
+                                    <Input
+                                        :id="`column-position-${column.id}`"
+                                        name="position"
+                                        type="number"
+                                        min="1"
+                                        :max="boardColumns.length"
+                                        :default-value="column.position"
+                                        required
+                                    />
+                                    <InputError :message="errors.position" />
+                                </div>
+
+                                <div class="flex items-end">
+                                    <Button
+                                        type="submit"
+                                        variant="outline"
+                                        :disabled="processing"
+                                    >
+                                        Save
+                                    </Button>
+                                </div>
+                            </Form>
+
+                            <div class="mt-3 flex justify-end">
+                                <Form
+                                    v-bind="
+                                        ProjectBoardSettingsController.destroy.form(
+                                            [project.id, column.id],
+                                        )
+                                    "
+                                    v-slot="{ processing }"
+                                >
+                                    <Button
+                                        type="submit"
+                                        variant="destructive"
+                                        :disabled="processing"
+                                    >
+                                        Delete
+                                    </Button>
+                                </Form>
+                            </div>
+
+                            <div class="border-border mt-4 border-t pt-4">
+                                <div class="mb-3">
+                                    <p class="text-sm font-medium">
+                                        Ticket statuses
+                                    </p>
+                                    <p class="text-muted-foreground text-sm">
+                                        Moving into this column requires a
+                                        specific status.
+                                    </p>
+                                </div>
+
+                                <div class="space-y-3">
+                                    <div
+                                        v-for="ticketStatus in column.ticket_statuses ??
+                                        []"
+                                        :key="ticketStatus.id"
+                                        class="border-border rounded-lg border p-3"
+                                    >
+                                        <Form
+                                            v-bind="
+                                                ProjectBoardSettingsController.updateStatus.form(
+                                                    [
+                                                        project.id,
+                                                        ticketStatus.id,
+                                                    ],
+                                                )
+                                            "
+                                            class="grid gap-4 md:grid-cols-[minmax(0,1fr)_auto]"
+                                            v-slot="{ errors, processing }"
+                                        >
+                                            <div class="grid gap-2">
+                                                <Label
+                                                    :for="`column-status-${ticketStatus.id}`"
+                                                >
+                                                    Status name
+                                                </Label>
+                                                <Input
+                                                    :id="`column-status-${ticketStatus.id}`"
+                                                    name="name"
+                                                    :default-value="
+                                                        ticketStatus.name
+                                                    "
+                                                    required
+                                                />
+                                                <InputError
+                                                    :message="errors.name"
+                                                />
+                                            </div>
+
+                                            <div class="flex items-end">
+                                                <Button
+                                                    type="submit"
+                                                    variant="outline"
+                                                    :disabled="processing"
+                                                >
+                                                    Save
+                                                </Button>
+                                            </div>
+                                        </Form>
+
+                                        <div class="mt-3 flex justify-end">
+                                            <Form
+                                                v-bind="
+                                                    ProjectBoardSettingsController.destroyStatus.form(
+                                                        [
+                                                            project.id,
+                                                            ticketStatus.id,
+                                                        ],
+                                                    )
+                                                "
+                                                v-slot="{ errors, processing }"
+                                            >
+                                                <InputError
+                                                    :message="
+                                                        errors.ticket_status_id
+                                                    "
+                                                    class="mb-2"
+                                                />
+                                                <Button
+                                                    type="submit"
+                                                    variant="destructive"
+                                                    :disabled="
+                                                        processing ||
+                                                        (column.ticket_statuses
+                                                            ?.length ?? 0) <= 1
+                                                    "
+                                                >
+                                                    Delete
+                                                </Button>
+                                            </Form>
+                                        </div>
+                                    </div>
+                                </div>
+
+                                <Form
+                                    v-bind="
+                                        ProjectBoardSettingsController.storeStatus.form(
+                                            project.id,
+                                        )
+                                    "
+                                    class="mt-4 grid gap-4 md:grid-cols-[minmax(0,1fr)_auto]"
+                                    v-slot="{ errors, processing }"
+                                >
+                                    <input
+                                        type="hidden"
+                                        name="board_column_id"
+                                        :value="column.id"
+                                    />
+                                    <div class="grid gap-2">
+                                        <Label
+                                            :for="`new-column-status-${column.id}`"
+                                        >
+                                            New status
+                                        </Label>
+                                        <Input
+                                            :id="`new-column-status-${column.id}`"
+                                            name="name"
+                                            placeholder="Ready for QA"
+                                            required
+                                        />
+                                        <InputError :message="errors.name" />
+                                    </div>
+
+                                    <div class="flex items-end">
+                                        <Button
+                                            type="submit"
+                                            :disabled="processing"
+                                        >
+                                            Add status
+                                        </Button>
+                                    </div>
+                                </Form>
+                            </div>
+                        </div>
+                    </CardContent>
+                </Card>
+            </div>
+        </div>
     </AppLayout>
 </template>

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

@@ -1,316 +1,281 @@
 <script setup lang="ts">
-import { Head, useForm } from '@inertiajs/vue3';
-import { Layers3, Trash2 } from 'lucide-vue-next';
-import { computed } from 'vue';
-import {
-    destroy,
-    switchTemplate,
-} from '@/actions/App/Http/Controllers/ProjectController';
-import FeedbackState from '@/components/FeedbackState.vue';
-import FormFeedback from '@/components/FormFeedback.vue';
+import { Head, Link, useForm } from '@inertiajs/vue3';
+import ProjectController from '@/actions/App/Http/Controllers/ProjectController';
+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 { Card, CardContent, CardHeader } from '@/components/ui/card';
+import {
+    Card,
+    CardContent,
+    CardDescription,
+    CardHeader,
+    CardTitle,
+} from '@/components/ui/card';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
-import { useFormProtection } from '@/composables/useFormProtection';
-import { useLocalization } from '@/composables/useLocalization';
 import AppLayout from '@/layouts/AppLayout.vue';
-import SettingsLayout from '@/layouts/projects/SettingsLayout.vue';
 import { index, show } from '@/routes/projects/index';
-import { general } from '@/routes/projects/settings';
+import {
+    board as boardSettings,
+    general as generalSettings,
+    metadata as metadataSettings,
+    notifications as notificationSettings,
+    repositories as repositorySettings,
+} from '@/routes/projects/settings';
 import type { BreadcrumbItem, ProjectGeneralSettingsPageProps } from '@/types';
+import { computed } from 'vue';
 
 const props = defineProps<ProjectGeneralSettingsPageProps>();
-const { t } = useLocalization();
-const breadcrumbs = computed<BreadcrumbItem[]>(() => [
-    { title: t('navigation.projects'), href: index() },
-    { title: props.project.name, href: show(props.project.id) },
-    { title: t('navigation.general'), href: general(props.project.id) },
-]);
-const switchTemplateForm = useForm<{
-    confirmation_key: string;
-    source_template_id: number | undefined;
-}>({
+
+const breadcrumbs: BreadcrumbItem[] = [
+    {
+        title: 'Projects',
+        href: index(),
+    },
+    {
+        title: props.project.name,
+        href: show(props.project.id),
+    },
+    {
+        title: 'General settings',
+        href: generalSettings(props.project.id),
+    },
+];
+
+const switchTemplateForm = useForm({
     confirmation_key: '',
-    source_template_id: undefined,
+    source_template_id: props.sourceTemplates.find(
+        (template) => template.id !== props.project.project_template_id,
+    )?.id,
 });
-const deleteForm = useForm({ confirmation_key: '' });
-const switchProtection = useFormProtection(switchTemplateForm);
-const deleteProtection = useFormProtection(deleteForm);
-const processing = computed(
-    () => switchTemplateForm.processing || deleteForm.processing,
-);
+
+const deleteForm = useForm({
+    confirmation_key: '',
+});
+
 const availableSwitchTemplates = computed(() =>
     props.sourceTemplates.filter(
         (template) => template.id !== props.project.project_template_id,
     ),
 );
+
 const currentTemplate = computed(() => props.project.project_template ?? null);
+
+const isSwitchConfirmationValid = computed(
+    () => switchTemplateForm.confirmation_key === props.project.key,
+);
+
 const canSwitchTemplate = computed(
     () =>
-        switchTemplateForm.confirmation_key === props.project.key &&
-        availableSwitchTemplates.value.some(
-            (template) => template.id === switchTemplateForm.source_template_id,
-        ),
+        isSwitchConfirmationValid.value &&
+        switchTemplateForm.source_template_id !== undefined,
 );
+
 const isDeleteConfirmationValid = computed(
     () => deleteForm.confirmation_key === props.project.key,
 );
-const inheritanceAreas = computed(() =>
-    [
-        ...(props.templateState?.inheritedAreas ?? []),
-        ...(props.templateState?.overriddenAreas ?? []),
-    ].map((area) => area.value),
-);
-const settingsSource = computed(() => {
-    if (!props.templateState?.inheritsFromTemplate) {
-        return 'projectSettings.local';
-    }
-    if (
-        props.templateState.inheritedAreas.some(
-            (area) => area.value === 'project_settings',
-        )
-    ) {
-        return 'projectSettings.inherited';
-    }
-    return props.templateState.overriddenAreas.some(
-        (area) => area.value === 'project_settings',
-    )
-        ? 'projectSettings.override'
-        : 'projectSettings.local';
-});
 
-function submitSwitchTemplate(): void {
-    if (!canSwitchTemplate.value || processing.value) {
+const submitSwitchTemplate = (): void => {
+    if (!canSwitchTemplate.value) {
         return;
     }
-    switchProtection.submit(switchTemplate(props.project.id), {
-        preserveScroll: true,
-        onSuccess: () => switchTemplateForm.resetAndClearErrors(),
-    });
-}
 
-function submitDelete(): void {
-    if (!isDeleteConfirmationValid.value || processing.value) {
+    switchTemplateForm.post(
+        ProjectController.switchTemplate.url(props.project.id),
+        {
+            preserveScroll: true,
+        },
+    );
+};
+
+const submitDelete = (): void => {
+    if (!isDeleteConfirmationValid.value) {
         return;
     }
-    deleteProtection.submit(destroy(props.project.id), {
+
+    deleteForm.delete(ProjectController.destroy.url(props.project.id), {
         preserveScroll: true,
     });
-}
+};
 </script>
 
 <template>
     <AppLayout :breadcrumbs="breadcrumbs">
-        <Head
-            :title="t('projectSettings.pageTitle', { project: project.name })"
-        />
-        <SettingsLayout :project-name="project.name" :project-key="project.key">
-            <FeedbackState
-                v-if="status"
-                state="success"
-                :title="t('projectSettings.updated')"
-            />
-            <Card
-                class="min-w-0 gap-0 overflow-hidden rounded-xl py-0 shadow-none"
+        <Head :title="`${project.name} general settings`" />
+
+        <div class="flex flex-1 flex-col gap-6 p-4">
+            <div
+                class="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between"
             >
-                <CardHeader class="gap-stack grid-cols-1 border-b p-5 sm:p-6">
-                    <h2 class="text-title">{{ t('navigation.general') }}</h2>
-                    <p class="text-muted-foreground">
-                        {{ t('projectSettings.generalDescription') }}
-                    </p>
+                <div class="space-y-3">
+                    <Badge variant="outline" class="px-3 py-1">
+                        {{ project.key }}
+                    </Badge>
+                    <Heading
+                        :title="`${project.name} general settings`"
+                        description="Review the core project identity and manage irreversible administrative actions."
+                    />
+                </div>
+
+                <div class="flex flex-wrap gap-3">
+                    <Button as-child variant="outline">
+                        <Link :href="boardSettings(project.id)">
+                            Board settings
+                        </Link>
+                    </Button>
+
+                    <Button as-child variant="outline">
+                        <Link :href="metadataSettings(project.id)">
+                            Ticket settings
+                        </Link>
+                    </Button>
+
+                    <Button as-child variant="outline">
+                        <Link :href="repositorySettings(project.id)">
+                            Repository settings
+                        </Link>
+                    </Button>
+
+                    <Button as-child variant="outline">
+                        <Link :href="notificationSettings(project.id)">
+                            Notification settings
+                        </Link>
+                    </Button>
+
+                    <Button as-child variant="outline">
+                        <Link :href="show(project.id)">Back to project</Link>
+                    </Button>
+                </div>
+            </div>
+
+            <div
+                v-if="status"
+                class="rounded-xl border border-emerald-200 bg-emerald-50 px-4 py-3 text-sm text-emerald-900 dark:border-emerald-900/70 dark:bg-emerald-950/40 dark:text-emerald-100"
+            >
+                {{ status }}
+            </div>
+
+            <Card>
+                <CardHeader>
+                    <CardTitle>Project identity</CardTitle>
+                    <CardDescription>
+                        These values define the project across tickets, boards,
+                        and repository matching.
+                    </CardDescription>
                 </CardHeader>
-                <CardContent class="gap-column grid min-w-0 p-5 sm:p-6">
-                    <div class="flex flex-wrap items-center gap-2">
-                        <h3 class="font-semibold">
-                            {{ t('projectSettings.identity') }}
-                        </h3>
-                        <Badge variant="secondary">{{
-                            t('projectSettings.local')
-                        }}</Badge>
+
+                <CardContent class="grid gap-4 md:grid-cols-2">
+                    <div class="border-border/70 rounded-xl border p-4">
+                        <p
+                            class="text-muted-foreground text-xs font-semibold uppercase tracking-[0.18em]"
+                        >
+                            Project name
+                        </p>
+                        <p class="text-foreground mt-2 text-sm font-semibold">
+                            {{ project.name }}
+                        </p>
                     </div>
-                    <dl class="grid min-w-0 gap-4 sm:grid-cols-2">
-                        <div
-                            class="bg-muted/35 gap-stack grid min-w-0 rounded-lg border p-4"
-                        >
-                            <dt class="text-caption text-muted-foreground">
-                                {{ t('projectSettings.name') }}
-                            </dt>
-                            <dd class="break-words font-semibold">
-                                {{ project.name }}
-                            </dd>
-                        </div>
-                        <div
-                            class="bg-muted/35 gap-stack grid min-w-0 rounded-lg border p-4"
-                        >
-                            <dt class="text-caption text-muted-foreground">
-                                {{ t('projectSettings.key') }}
-                            </dt>
-                            <dd class="break-all font-semibold">
-                                {{ project.key }}
-                            </dd>
-                        </div>
-                    </dl>
-                    <p class="text-caption text-muted-foreground">
-                        {{ t('projectSettings.identityDescription') }}
-                    </p>
-                    <div
-                        class="flex flex-wrap items-center gap-2 border-t pt-4"
-                    >
-                        <h3 class="font-semibold">
-                            {{ t('projectSettings.display') }}
-                        </h3>
-                        <Badge
-                            :variant="
-                                settingsSource === 'projectSettings.inherited'
-                                    ? 'outline'
-                                    : 'secondary'
-                            "
-                            >{{ t(settingsSource) }}</Badge
+
+                    <div class="border-border/70 rounded-xl border p-4">
+                        <p
+                            class="text-muted-foreground text-xs font-semibold uppercase tracking-[0.18em]"
                         >
+                            Project key
+                        </p>
+                        <p class="text-foreground mt-2 text-sm font-semibold">
+                            {{ project.key }}
+                        </p>
                     </div>
-                    <dl class="grid gap-3">
-                        <div class="flex items-start justify-between gap-4">
-                            <dt class="text-muted-foreground">
-                                {{ t('projectSettings.showAuthor') }}
-                            </dt>
-                            <dd class="font-medium">
-                                {{
-                                    t(
-                                        project.show_author
-                                            ? 'projectSettings.enabled'
-                                            : 'projectSettings.disabled',
-                                    )
-                                }}
-                            </dd>
-                        </div>
-                        <div class="flex items-start justify-between gap-4">
-                            <dt class="text-muted-foreground">
-                                {{ t('projectSettings.showStoryPoints') }}
-                            </dt>
-                            <dd class="font-medium">
-                                {{
-                                    t(
-                                        project.show_story_points
-                                            ? 'projectSettings.enabled'
-                                            : 'projectSettings.disabled',
-                                    )
-                                }}
-                            </dd>
-                        </div>
-                    </dl>
-                    <p class="text-caption text-muted-foreground">
-                        {{ t('projectSettings.displayDescription') }}
-                    </p>
                 </CardContent>
             </Card>
-            <TemplateInheritancePanel
-                :project-id="project.id"
-                :areas="inheritanceAreas"
-                :template-state="templateState"
-            />
-            <Card
-                class="min-w-0 gap-0 overflow-hidden rounded-xl py-0 shadow-none"
-            >
-                <CardHeader class="gap-stack grid-cols-1 border-b p-5 sm:p-6">
-                    <div class="flex items-center gap-2">
-                        <Layers3
-                            class="text-primary size-5"
-                            aria-hidden="true"
-                        />
-                        <h2 class="text-title">
-                            {{ t('projectSettings.template') }}
-                        </h2>
-                    </div>
-                    <p class="text-muted-foreground">
-                        {{ t('projectSettings.templateDescription') }}
-                    </p>
+
+            <Card>
+                <CardHeader>
+                    <CardTitle>Template baseline</CardTitle>
+                    <CardDescription>
+                        Switch this project to another published template. Use
+                        the inheritance panels to reset individual settings to
+                        the currently linked template.
+                    </CardDescription>
                 </CardHeader>
-                <CardContent class="gap-column grid min-w-0 p-5 sm:p-6">
-                    <div
-                        class="bg-muted/35 gap-stack grid min-w-0 rounded-lg border p-4"
-                    >
-                        <p class="text-caption text-muted-foreground">
-                            {{ t('projectSettings.currentTemplate') }}
-                        </p>
-                        <p class="break-words font-semibold">
-                            {{
-                                currentTemplate?.name ??
-                                t('projectSettings.noTemplate')
-                            }}
-                        </p>
-                        <Badge variant="outline" class="justify-self-start">{{
-                            t(
-                                templateState?.inheritsFromTemplate
-                                    ? 'projectSettings.linked'
-                                    : 'projectSettings.standalone',
-                            )
-                        }}</Badge>
-                        <p
-                            v-if="!templateState?.inheritsFromTemplate"
-                            class="text-caption text-muted-foreground"
-                        >
-                            {{ t('projectSettings.standaloneDescription') }}
-                        </p>
-                    </div>
-                    <FeedbackState
-                        v-if="availableSwitchTemplates.length === 0"
-                        state="empty"
-                        :title="t('projectSettings.noAlternatives')"
-                        :description="
-                            t('projectSettings.noAlternativesDescription')
-                        "
-                    />
-                    <form
-                        v-else
-                        class="gap-column grid min-w-0"
-                        :aria-busy="switchTemplateForm.processing"
-                        @submit.prevent="submitSwitchTemplate"
-                    >
-                        <FormFeedback
-                            :state="switchProtection.state.value"
-                            :title="
-                                switchTemplateForm.processing
-                                    ? t('projectSettings.switching')
-                                    : undefined
-                            "
-                            @retry="submitSwitchTemplate"
-                        />
-                        <fieldset
-                            class="gap-column grid min-w-0"
-                            :disabled="processing"
-                        >
-                            <legend class="mb-3 font-semibold">
-                                {{ t('projectSettings.switch') }}
-                            </legend>
+
+                <CardContent class="space-y-6">
+                    <div class="grid gap-4 md:grid-cols-2">
+                        <div class="border-border/70 rounded-xl border p-4">
                             <p
-                                class="border-destructive/25 bg-destructive/8 rounded-lg border p-4"
+                                class="text-muted-foreground text-xs font-semibold uppercase tracking-[0.18em]"
                             >
-                                {{ t('projectSettings.switchWarning') }}
+                                Current linked template
                             </p>
+                            <p
+                                class="text-foreground mt-2 text-sm font-semibold"
+                            >
+                                {{
+                                    currentTemplate?.name ??
+                                    'No linked template'
+                                }}
+                            </p>
+                            <p class="text-muted-foreground mt-2 text-sm">
+                                {{
+                                    templateState?.inheritsFromTemplate
+                                        ? 'Inherited and overridden areas stay visible after switching.'
+                                        : 'This project currently behaves like a standalone baseline.'
+                                }}
+                            </p>
+                        </div>
+
+                        <div class="border-border/70 rounded-xl border p-4">
+                            <p
+                                class="text-muted-foreground text-xs font-semibold uppercase tracking-[0.18em]"
+                            >
+                                Warning
+                            </p>
+                            <p class="text-foreground mt-2 text-sm font-medium">
+                                Switching templates can replace inherited board
+                                workflow, ticket metadata, repositories, and
+                                notifications.
+                            </p>
+                            <p class="text-muted-foreground mt-2 text-sm">
+                                Confirm each action with the exact project key
+                                to avoid accidental overwrites.
+                            </p>
+                        </div>
+                    </div>
+
+                    <div class="grid gap-6">
+                        <form
+                            class="space-y-4 rounded-xl border p-4"
+                            @submit.prevent="submitSwitchTemplate"
+                        >
+                            <div class="space-y-1">
+                                <h3 class="text-sm font-semibold">
+                                    Switch to another template
+                                </h3>
+                                <p class="text-muted-foreground text-sm">
+                                    Applying a different template replaces the
+                                    copied areas with that template's current
+                                    baseline.
+                                </p>
+                            </div>
+
                             <div class="grid gap-2">
-                                <Label for="source_template_id">{{
-                                    t('projectSettings.publishedTemplate')
-                                }}</Label>
+                                <Label for="source_template_id"
+                                    >Published template</Label
+                                >
                                 <select
                                     id="source_template_id"
                                     v-model="
                                         switchTemplateForm.source_template_id
                                     "
-                                    class="border-input bg-background focus-visible:border-ring focus-visible:ring-ring/50 min-h-11 w-full min-w-0 rounded-md border px-3 py-2 text-sm outline-none focus-visible:ring-2"
-                                    :aria-invalid="
-                                        !!switchTemplateForm.errors
-                                            .source_template_id
+                                    :disabled="
+                                        switchTemplateForm.processing ||
+                                        availableSwitchTemplates.length === 0
                                     "
-                                    aria-describedby="source-template-error"
+                                    class="border-input bg-background shadow-xs focus-visible:border-ring focus-visible:ring-ring/50 rounded-md border px-3 py-2 text-sm outline-none transition-[color,box-shadow] focus-visible:ring-[3px]"
                                 >
                                     <option :value="undefined" disabled>
-                                        {{
-                                            t('projectSettings.selectTemplate')
-                                        }}
+                                        Select a template
                                     </option>
                                     <option
                                         v-for="template in availableSwitchTemplates"
@@ -321,167 +286,120 @@ function submitDelete(): void {
                                     </option>
                                 </select>
                                 <InputError
-                                    id="source-template-error"
                                     :message="
                                         switchTemplateForm.errors
                                             .source_template_id
                                     "
                                 />
                             </div>
+
                             <div class="grid gap-2">
-                                <Label for="switch_confirmation_key">{{
-                                    t('projectSettings.confirmation')
-                                }}</Label>
+                                <Label for="switch_confirmation_key"
+                                    >Confirmation key</Label
+                                >
                                 <Input
                                     id="switch_confirmation_key"
                                     v-model="
                                         switchTemplateForm.confirmation_key
                                     "
-                                    autocomplete="off"
-                                    :placeholder="
-                                        t(
-                                            'projectSettings.confirmPlaceholder',
-                                            { key: project.key },
-                                        )
-                                    "
-                                    :aria-invalid="
-                                        !!switchTemplateForm.errors
-                                            .confirmation_key
-                                    "
-                                    aria-describedby="switch-confirm-help switch-confirm-error"
+                                    :disabled="switchTemplateForm.processing"
+                                    placeholder="Type the project key exactly"
                                 />
-                                <p
-                                    id="switch-confirm-help"
-                                    class="text-caption text-muted-foreground"
-                                >
-                                    {{
-                                        t('projectSettings.confirmHelp', {
-                                            key: project.key,
-                                        })
-                                    }}
-                                </p>
                                 <InputError
-                                    id="switch-confirm-error"
                                     :message="
                                         switchTemplateForm.errors
                                             .confirmation_key
                                     "
                                 />
                             </div>
-                            <Button
-                                type="submit"
-                                variant="outline"
-                                class="justify-self-start"
-                                :disabled="!canSwitchTemplate"
-                                >{{
-                                    t(
-                                        switchTemplateForm.processing
-                                            ? 'projectSettings.switching'
-                                            : 'projectSettings.switch',
-                                    )
-                                }}</Button
+
+                            <div
+                                class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between"
                             >
-                        </fieldset>
-                    </form>
+                                <p class="text-muted-foreground text-sm">
+                                    Existing project-specific configuration in
+                                    copied areas may be replaced or removed.
+                                </p>
+
+                                <Button
+                                    type="submit"
+                                    variant="outline"
+                                    :disabled="
+                                        switchTemplateForm.processing ||
+                                        !canSwitchTemplate
+                                    "
+                                >
+                                    Switch template
+                                </Button>
+                            </div>
+                        </form>
+                    </div>
                 </CardContent>
             </Card>
+
             <Card
-                class="border-destructive/30 min-w-0 gap-0 overflow-hidden rounded-xl py-0 shadow-none"
+                class="border-red-200/80 bg-red-50/60 dark:border-red-900/60 dark:bg-red-950/20"
             >
-                <CardHeader
-                    class="bg-destructive/5 gap-stack grid-cols-1 border-b p-5 sm:p-6"
-                >
-                    <div class="flex items-center gap-2">
-                        <Trash2
-                            class="text-destructive size-5"
-                            aria-hidden="true"
-                        />
-                        <h2 class="text-title">
-                            {{ t('projectSettings.danger') }}
-                        </h2>
-                    </div>
-                    <p class="text-muted-foreground">
-                        {{ t('projectSettings.deleteDescription') }}
-                    </p>
-                </CardHeader>
-                <CardContent class="p-5 sm:p-6">
-                    <form
-                        class="gap-column grid min-w-0"
-                        :aria-busy="deleteForm.processing"
-                        @submit.prevent="submitDelete"
+                <CardHeader>
+                    <CardTitle class="text-red-900 dark:text-red-100">
+                        Danger zone
+                    </CardTitle>
+                    <CardDescription
+                        class="text-red-800/80 dark:text-red-200/80"
                     >
-                        <FormFeedback
-                            :state="deleteProtection.state.value"
-                            :title="
-                                deleteForm.processing
-                                    ? t('projectSettings.deleting')
-                                    : undefined
-                            "
-                            @retry="submitDelete"
-                        />
-                        <fieldset
-                            class="gap-column grid min-w-0"
-                            :disabled="processing"
+                        Deleting this project is permanent. All tickets, board
+                        columns, ticket metadata, repository connections, and
+                        project permissions will be removed.
+                    </CardDescription>
+                </CardHeader>
+
+                <CardContent class="space-y-5">
+                    <div
+                        class="bg-background/80 rounded-xl border border-red-200/80 p-4 dark:border-red-900/60"
+                    >
+                        <p class="text-foreground text-sm font-medium">
+                            Confirm by typing the exact project key:
+                            <span class="font-semibold">{{ project.key }}</span>
+                        </p>
+                    </div>
+
+                    <form class="space-y-4" @submit.prevent="submitDelete">
+                        <div class="grid gap-2">
+                            <Label for="confirmation_key">
+                                Confirmation key
+                            </Label>
+                            <Input
+                                id="confirmation_key"
+                                v-model="deleteForm.confirmation_key"
+                                :disabled="deleteForm.processing"
+                                placeholder="Type the project key exactly"
+                            />
+                            <InputError
+                                :message="deleteForm.errors.confirmation_key"
+                            />
+                        </div>
+
+                        <div
+                            class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between"
                         >
-                            <legend class="sr-only">
-                                {{ t('projectSettings.delete') }}
-                            </legend>
-                            <p class="text-caption font-medium">
-                                {{ t('projectSettings.irreversible') }}
+                            <p class="text-muted-foreground text-sm">
+                                This action cannot be undone.
                             </p>
-                            <div class="grid gap-2">
-                                <Label for="confirmation_key">{{
-                                    t('projectSettings.confirmation')
-                                }}</Label>
-                                <Input
-                                    id="confirmation_key"
-                                    v-model="deleteForm.confirmation_key"
-                                    autocomplete="off"
-                                    :placeholder="
-                                        t(
-                                            'projectSettings.confirmPlaceholder',
-                                            { key: project.key },
-                                        )
-                                    "
-                                    :aria-invalid="
-                                        !!deleteForm.errors.confirmation_key
-                                    "
-                                    aria-describedby="delete-confirm-help delete-confirm-error"
-                                />
-                                <p
-                                    id="delete-confirm-help"
-                                    class="text-caption text-muted-foreground"
-                                >
-                                    {{
-                                        t('projectSettings.confirmHelp', {
-                                            key: project.key,
-                                        })
-                                    }}
-                                </p>
-                                <InputError
-                                    id="delete-confirm-error"
-                                    :message="
-                                        deleteForm.errors.confirmation_key
-                                    "
-                                />
-                            </div>
+
                             <Button
                                 type="submit"
                                 variant="destructive"
-                                class="justify-self-start"
-                                :disabled="!isDeleteConfirmationValid"
-                                >{{
-                                    t(
-                                        deleteForm.processing
-                                            ? 'projectSettings.deleting'
-                                            : 'projectSettings.delete',
-                                    )
-                                }}</Button
+                                :disabled="
+                                    deleteForm.processing ||
+                                    !isDeleteConfirmationValid
+                                "
                             >
-                        </fieldset>
+                                Delete project
+                            </Button>
+                        </div>
                     </form>
                 </CardContent>
             </Card>
-        </SettingsLayout>
+        </div>
     </AppLayout>
 </template>

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

@@ -1,49 +1,121 @@
 <script setup lang="ts">
-import { Head } from '@inertiajs/vue3';
-import { computed, ref } from 'vue';
-import FeedbackState from '@/components/FeedbackState.vue';
-import MetadataEditorDialog from '@/components/projects/MetadataEditorDialog.vue';
-import MetadataOptionList from '@/components/projects/MetadataOptionList.vue';
-import TicketDisplaySettings from '@/components/projects/TicketDisplaySettings.vue';
-import TicketFieldDefinitionSettings from '@/components/projects/TicketFieldDefinitionSettings.vue';
-import TicketLinkTypeSettings from '@/components/projects/TicketLinkTypeSettings.vue';
+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 { useLocalization } from '@/composables/useLocalization';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import {
+    Card,
+    CardContent,
+    CardDescription,
+    CardHeader,
+    CardTitle,
+} from '@/components/ui/card';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
 import AppLayout from '@/layouts/AppLayout.vue';
-import SettingsLayout from '@/layouts/projects/SettingsLayout.vue';
-import { index, show } from '@/routes/projects';
-import { metadata } from '@/routes/projects/settings';
+import { index, show } from '@/routes/projects/index';
+import {
+    board as boardSettings,
+    general as generalSettings,
+    metadata as metadataSettings,
+    notifications as notificationSettings,
+    repositories as repositorySettings,
+} from '@/routes/projects/settings';
 import type {
     BreadcrumbItem,
     ProjectTicketMetadataSettingsPageProps,
 } from '@/types';
-import type { MetadataEditorTarget } from '@/types/project-metadata';
+import { Checkbox } from '@/components/ui/checkbox';
 
 const props = defineProps<ProjectTicketMetadataSettingsPageProps>();
-const { t } = useLocalization();
-const target = ref<MetadataEditorTarget | null>(null);
-const breadcrumbs = computed<BreadcrumbItem[]>(() => [
-    { title: t('navigation.projects'), href: index() },
-    { title: props.project.name, href: show(props.project.id) },
-    { title: t('metadata.title'), href: metadata(props.project.id) },
-]);
+
+const breadcrumbs: BreadcrumbItem[] = [
+    {
+        title: 'Projects',
+        href: index(),
+    },
+    {
+        title: props.project.name,
+        href: show(props.project.id),
+    },
+    {
+        title: 'Ticket settings',
+        href: metadataSettings(props.project.id),
+    },
+];
+
+const replacementTicketTypes = (ticketTypeId: number) =>
+    props.ticketTypes.filter((ticketType) => ticketType.id !== ticketTypeId);
 </script>
 
 <template>
     <AppLayout :breadcrumbs="breadcrumbs">
-        <Head :title="t('metadata.pageTitle', { project: project.name })" />
-        <SettingsLayout :project-name="project.name" :project-key="project.key">
-            <header class="grid gap-3">
-                <h2 class="text-title">{{ t('metadata.title') }}</h2>
-                <p class="text-muted-foreground">
-                    {{ t('metadata.description') }}
-                </p>
-            </header>
-            <FeedbackState
+        <Head :title="`${project.name} ticket settings`" />
+
+        <div class="flex flex-1 flex-col gap-6 p-4">
+            <div
+                class="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between"
+            >
+                <div class="space-y-3">
+                    <Badge variant="outline" class="px-3 py-1">
+                        {{ project.key }}
+                    </Badge>
+                    <Heading
+                        :title="`${project.name} ticket settings`"
+                        description="Configure project-specific ticket types, priorities, custom field definitions, and ticket link labels."
+                    />
+                </div>
+
+                <div class="flex flex-wrap gap-3">
+                    <Button
+                        v-if="$page.props.auth.permissions.globalAdmin"
+                        as-child
+                        variant="outline"
+                    >
+                        <Link :href="generalSettings(project.id)">
+                            General settings
+                        </Link>
+                    </Button>
+
+                    <Button as-child variant="outline">
+                        <Link :href="boardSettings(project.id)">
+                            Board settings
+                        </Link>
+                    </Button>
+
+                    <Button as-child variant="outline">
+                        <Link :href="repositorySettings(project.id)">
+                            Repository settings
+                        </Link>
+                    </Button>
+
+                    <Button as-child variant="outline">
+                        <Link :href="notificationSettings(project.id)">
+                            Notification settings
+                        </Link>
+                    </Button>
+
+                    <Button as-child variant="outline">
+                        <Link :href="show(project.id)">Back to project</Link>
+                    </Button>
+                </div>
+            </div>
+
+            <div
                 v-if="status"
-                :state="error ? 'error' : 'success'"
-                :title="error ? status : t('metadata.updated')"
-            />
+                :class="[
+                    'rounded-xl border px-4 py-3 text-sm',
+                    error
+                        ? 'border-red-200/80 bg-red-50/60 text-red-800/80 dark:border-red-900/60 dark:bg-red-950/20 dark:text-red-200/80'
+                        : 'border-emerald-200 bg-emerald-50 text-emerald-900 dark:border-emerald-900/70 dark:bg-emerald-950/40 dark:text-emerald-100',
+                ]"
+            >
+                {{ status }}
+            </div>
+
             <TemplateInheritancePanel
                 :areas="[
                     'project_settings',
@@ -55,34 +127,675 @@ const breadcrumbs = computed<BreadcrumbItem[]>(() => [
                 :project-id="project.id"
                 :template-state="templateState"
             />
-            <TicketDisplaySettings :project="project" />
-            <MetadataOptionList
-                kind="type"
-                :entries="ticketTypes"
-                @edit="target = $event"
-            />
-            <MetadataOptionList
-                kind="priority"
-                :entries="ticketPriorities"
-                @edit="target = $event"
-            />
-            <TicketFieldDefinitionSettings
-                :definitions="ticketFieldDefinitions"
-                :field-type-options="fieldTypeOptions"
-                :project-id="project.id"
-            />
-            <TicketLinkTypeSettings
-                :link-types="ticketLinkTypes"
-                :project-id="project.id"
-            />
 
-            <MetadataEditorDialog
-                :project-id="project.id"
-                :target="target"
-                :types="ticketTypes"
-                :priorities="ticketPriorities"
-                @close="target = null"
-            />
-        </SettingsLayout>
+            <div class="grid gap-6 xl:grid-cols-2">
+                <Card class="gap-0 overflow-hidden">
+                    <CardHeader class="border-b">
+                        <CardTitle>General ticket settings</CardTitle>
+                    </CardHeader>
+
+                    <CardContent class="space-y-4 p-6">
+                        <Form
+                            v-bind="
+                                ProjectTicketMetadataSettingsController.update.form(
+                                    project.id,
+                                )
+                            "
+                            class="border-border space-y-4 rounded-xl border border-dashed p-4"
+                            v-slot="{ errors, processing }"
+                        >
+                            <Label for="enable-story-points">
+                                <Checkbox
+                                    id="enable-story-points"
+                                    name="show_story_points"
+                                    :default-value="project.show_story_points"
+                                    value="1"
+                                />
+                                Enable story points for tickets
+                            </Label>
+
+                            <InputError :message="errors.show_story_points" />
+
+                            <Label for="enable-author">
+                                <Checkbox
+                                    id="enable-author"
+                                    name="show_author"
+                                    :default-value="project.show_author"
+                                    value="1"
+                                />
+                                Show author on ticket details
+                            </Label>
+
+                            <InputError :message="errors.show_author" />
+
+                            <Button type="submit" :disabled="processing">
+                                Save
+                            </Button>
+                        </Form>
+                    </CardContent>
+                </Card>
+
+                <Card class="gap-0 overflow-hidden">
+                    <CardHeader class="border-b">
+                        <CardTitle>Ticket types</CardTitle>
+                    </CardHeader>
+
+                    <CardContent class="space-y-4 p-6">
+                        <Form
+                            v-bind="
+                                ProjectTicketMetadataSettingsController.storeType.form(
+                                    project.id,
+                                )
+                            "
+                            class="border-border space-y-4 rounded-xl border border-dashed p-4"
+                            v-slot="{ errors, processing }"
+                        >
+                            <div class="grid gap-2">
+                                <Label for="type-name">New type name</Label>
+                                <Input
+                                    id="type-name"
+                                    name="name"
+                                    required
+                                    placeholder="Bug"
+                                />
+                                <InputError :message="errors.name" />
+
+                                <Label for="type-is-parent">
+                                    <Checkbox
+                                        id="type-is-parent"
+                                        name="is_parent"
+                                        value="1"
+                                    />
+                                    Ticket type can act as a parent
+                                </Label>
+                                <InputError :message="errors.is_parent" />
+                            </div>
+
+                            <Button type="submit" :disabled="processing">
+                                Add type
+                            </Button>
+                        </Form>
+
+                        <div
+                            v-for="ticketType in ticketTypes"
+                            :key="ticketType.id"
+                            class="border-border rounded-xl border p-4"
+                        >
+                            <Form
+                                v-bind="
+                                    ProjectTicketMetadataSettingsController.updateType.form(
+                                        [project.id, ticketType.id],
+                                    )
+                                "
+                                class="grid gap-4"
+                                v-slot="{ errors, processing }"
+                            >
+                                <div class="grid gap-2">
+                                    <div
+                                        v-if="ticketType.is_parent"
+                                        class="flex flex-wrap items-center gap-2"
+                                    >
+                                        <Badge variant="secondary">
+                                            Parent type
+                                        </Badge>
+                                        <span
+                                            class="text-muted-foreground text-xs"
+                                        >
+                                            This flag is fixed after creation.
+                                        </span>
+                                    </div>
+
+                                    <Label :for="`type-name-${ticketType.id}`">
+                                        Name
+                                    </Label>
+                                    <Input
+                                        :id="`type-name-${ticketType.id}`"
+                                        name="name"
+                                        :default-value="ticketType.name"
+                                        required
+                                    />
+                                    <InputError :message="errors.name" />
+                                </div>
+
+                                <div class="grid gap-2">
+                                    <Label
+                                        :for="`type-position-${ticketType.id}`"
+                                    >
+                                        Position
+                                    </Label>
+                                    <Input
+                                        :id="`type-position-${ticketType.id}`"
+                                        name="position"
+                                        type="number"
+                                        min="1"
+                                        :max="ticketTypes.length"
+                                        :default-value="ticketType.position"
+                                        required
+                                    />
+                                    <InputError :message="errors.position" />
+                                </div>
+
+                                <div
+                                    class="flex flex-wrap justify-between gap-3"
+                                >
+                                    <Button
+                                        type="submit"
+                                        variant="outline"
+                                        :disabled="processing"
+                                    >
+                                        Save
+                                    </Button>
+                                </div>
+                            </Form>
+
+                            <Form
+                                v-bind="
+                                    ProjectTicketMetadataSettingsController.destroyType.form(
+                                        [project.id, ticketType.id],
+                                    )
+                                "
+                                class="mt-3 grid gap-3"
+                                v-slot="{ errors, processing: deleting }"
+                            >
+                                <div
+                                    v-if="
+                                        (ticketType.tickets_count ?? 0) > 0 &&
+                                        ticketTypes.length > 1
+                                    "
+                                    class="grid gap-2"
+                                >
+                                    <Label
+                                        :for="`replacement-type-${ticketType.id}`"
+                                    >
+                                        Replacement type for
+                                        {{ ticketType.tickets_count }} assigned
+                                        ticket{{
+                                            ticketType.tickets_count === 1
+                                                ? ''
+                                                : 's'
+                                        }}
+                                    </Label>
+                                    <select
+                                        :id="`replacement-type-${ticketType.id}`"
+                                        name="replacement_ticket_type_id"
+                                        class="border-input bg-background shadow-xs focus-visible:border-ring focus-visible:ring-ring/50 rounded-md border px-3 py-2 text-sm outline-none transition-[color,box-shadow] focus-visible:ring-[3px]"
+                                        required
+                                    >
+                                        <option value="">Choose type</option>
+                                        <option
+                                            v-for="replacementTicketType in replacementTicketTypes(
+                                                ticketType.id,
+                                            )"
+                                            :key="replacementTicketType.id"
+                                            :value="replacementTicketType.id"
+                                        >
+                                            {{ replacementTicketType.name }}
+                                        </option>
+                                    </select>
+                                    <InputError
+                                        :message="
+                                            errors.replacement_ticket_type_id
+                                        "
+                                    />
+                                </div>
+
+                                <div
+                                    class="flex flex-wrap items-center justify-between gap-3"
+                                >
+                                    <p
+                                        v-if="
+                                            (ticketType.tickets_count ?? 0) > 0
+                                        "
+                                        class="text-muted-foreground text-sm"
+                                    >
+                                        Assigned tickets will be moved before
+                                        this type is deleted.
+                                    </p>
+                                    <Button
+                                        type="submit"
+                                        variant="destructive"
+                                        :disabled="deleting"
+                                    >
+                                        Delete
+                                    </Button>
+                                </div>
+                            </Form>
+                        </div>
+                    </CardContent>
+                </Card>
+
+                <Card class="gap-0 overflow-hidden">
+                    <CardHeader class="border-b">
+                        <CardTitle>Priorities</CardTitle>
+                        <CardDescription>
+                            Priorities are fully project-specific and can be
+                            reordered or removed.
+                        </CardDescription>
+                    </CardHeader>
+
+                    <CardContent class="space-y-4 p-6">
+                        <Form
+                            v-bind="
+                                ProjectTicketMetadataSettingsController.storePriority.form(
+                                    project.id,
+                                )
+                            "
+                            class="border-border space-y-4 rounded-xl border border-dashed p-4"
+                            v-slot="{ errors, processing }"
+                        >
+                            <div class="grid gap-2">
+                                <Label for="priority-name"
+                                    >New priority name</Label
+                                >
+                                <Input
+                                    id="priority-name"
+                                    name="name"
+                                    required
+                                    placeholder="Urgent"
+                                />
+                                <InputError :message="errors.name" />
+                            </div>
+
+                            <Button type="submit" :disabled="processing">
+                                Add priority
+                            </Button>
+                        </Form>
+
+                        <div
+                            v-for="ticketPriority in ticketPriorities"
+                            :key="ticketPriority.id"
+                            class="border-border rounded-xl border p-4"
+                        >
+                            <Form
+                                v-bind="
+                                    ProjectTicketMetadataSettingsController.updatePriority.form(
+                                        [project.id, ticketPriority.id],
+                                    )
+                                "
+                                class="grid gap-4"
+                                v-slot="{ errors, processing }"
+                            >
+                                <div class="grid gap-2">
+                                    <Label
+                                        :for="`priority-name-${ticketPriority.id}`"
+                                    >
+                                        Name
+                                    </Label>
+                                    <Input
+                                        :id="`priority-name-${ticketPriority.id}`"
+                                        name="name"
+                                        :default-value="ticketPriority.name"
+                                        required
+                                    />
+                                    <InputError :message="errors.name" />
+                                </div>
+
+                                <div class="grid gap-2">
+                                    <Label
+                                        :for="`priority-position-${ticketPriority.id}`"
+                                    >
+                                        Position
+                                    </Label>
+                                    <Input
+                                        :id="`priority-position-${ticketPriority.id}`"
+                                        name="position"
+                                        type="number"
+                                        min="1"
+                                        :max="ticketPriorities.length"
+                                        :default-value="ticketPriority.position"
+                                        required
+                                    />
+                                    <InputError :message="errors.position" />
+                                </div>
+
+                                <div
+                                    class="flex flex-wrap justify-between gap-3"
+                                >
+                                    <Button
+                                        type="submit"
+                                        variant="outline"
+                                        :disabled="processing"
+                                    >
+                                        Save
+                                    </Button>
+                                </div>
+                            </Form>
+
+                            <Form
+                                v-bind="
+                                    ProjectTicketMetadataSettingsController.destroyPriority.form(
+                                        [project.id, ticketPriority.id],
+                                    )
+                                "
+                                class="mt-3 flex justify-end"
+                                v-slot="{ processing: deleting }"
+                            >
+                                <Button
+                                    type="submit"
+                                    variant="destructive"
+                                    :disabled="deleting"
+                                >
+                                    Delete
+                                </Button>
+                            </Form>
+                        </div>
+                    </CardContent>
+                </Card>
+
+                <Card class="gap-0 overflow-hidden">
+                    <CardHeader class="border-b">
+                        <CardTitle>Custom fields</CardTitle>
+                        <CardDescription>
+                            Define project-specific user or number fields for
+                            upcoming ticket data.
+                        </CardDescription>
+                    </CardHeader>
+
+                    <CardContent class="space-y-4 p-6">
+                        <Form
+                            v-bind="
+                                ProjectTicketMetadataSettingsController.storeFieldDefinition.form(
+                                    project.id,
+                                )
+                            "
+                            class="border-border space-y-4 rounded-xl border border-dashed p-4"
+                            v-slot="{ errors, processing }"
+                        >
+                            <div class="grid gap-2">
+                                <Label for="field-label">New field label</Label>
+                                <Input
+                                    id="field-label"
+                                    name="label"
+                                    required
+                                    placeholder="Reviewer"
+                                />
+                                <InputError :message="errors.label" />
+                            </div>
+
+                            <div class="grid gap-2">
+                                <Label for="field-type">Field type</Label>
+                                <select
+                                    id="field-type"
+                                    name="field_type"
+                                    class="border-input bg-background shadow-xs focus-visible:border-ring focus-visible:ring-ring/50 rounded-md border px-3 py-2 text-sm outline-none transition-[color,box-shadow] focus-visible:ring-[3px]"
+                                >
+                                    <option
+                                        v-for="option in fieldTypeOptions"
+                                        :key="option.value"
+                                        :value="option.value"
+                                    >
+                                        {{ option.label }}
+                                    </option>
+                                </select>
+                                <InputError :message="errors.field_type" />
+                            </div>
+
+                            <Button type="submit" :disabled="processing">
+                                Add field
+                            </Button>
+                        </Form>
+
+                        <div
+                            v-for="fieldDefinition in ticketFieldDefinitions"
+                            :key="fieldDefinition.id"
+                            class="border-border rounded-xl border p-4"
+                        >
+                            <Form
+                                v-bind="
+                                    ProjectTicketMetadataSettingsController.updateFieldDefinition.form(
+                                        [project.id, fieldDefinition.id],
+                                    )
+                                "
+                                class="grid gap-4"
+                                v-slot="{ errors, processing }"
+                            >
+                                <div class="grid gap-2">
+                                    <Label
+                                        :for="`field-label-${fieldDefinition.id}`"
+                                    >
+                                        Label
+                                    </Label>
+                                    <Input
+                                        :id="`field-label-${fieldDefinition.id}`"
+                                        name="label"
+                                        :default-value="fieldDefinition.label"
+                                        required
+                                    />
+                                    <InputError :message="errors.label" />
+                                </div>
+
+                                <div class="grid gap-2">
+                                    <Label
+                                        :for="`field-type-${fieldDefinition.id}`"
+                                    >
+                                        Field type
+                                    </Label>
+                                    <select
+                                        :id="`field-type-${fieldDefinition.id}`"
+                                        name="field_type"
+                                        class="border-input bg-background shadow-xs focus-visible:border-ring focus-visible:ring-ring/50 rounded-md border px-3 py-2 text-sm outline-none transition-[color,box-shadow] focus-visible:ring-[3px]"
+                                    >
+                                        <option
+                                            v-for="option in fieldTypeOptions"
+                                            :key="option.value"
+                                            :value="option.value"
+                                            :selected="
+                                                option.value ===
+                                                fieldDefinition.field_type
+                                            "
+                                        >
+                                            {{ option.label }}
+                                        </option>
+                                    </select>
+                                    <InputError :message="errors.field_type" />
+                                </div>
+
+                                <div class="grid gap-2">
+                                    <Label
+                                        :for="`field-position-${fieldDefinition.id}`"
+                                    >
+                                        Position
+                                    </Label>
+                                    <Input
+                                        :id="`field-position-${fieldDefinition.id}`"
+                                        name="position"
+                                        type="number"
+                                        min="1"
+                                        :max="ticketFieldDefinitions.length"
+                                        :default-value="
+                                            fieldDefinition.position
+                                        "
+                                        required
+                                    />
+                                    <InputError :message="errors.position" />
+                                </div>
+
+                                <div
+                                    class="flex flex-wrap justify-between gap-3"
+                                >
+                                    <Button
+                                        type="submit"
+                                        variant="outline"
+                                        :disabled="processing"
+                                    >
+                                        Save
+                                    </Button>
+                                </div>
+                            </Form>
+
+                            <Form
+                                v-bind="
+                                    ProjectTicketMetadataSettingsController.destroyFieldDefinition.form(
+                                        [project.id, fieldDefinition.id],
+                                    )
+                                "
+                                class="mt-3 flex justify-end"
+                                v-slot="{ processing: deleting }"
+                            >
+                                <Button
+                                    type="submit"
+                                    variant="destructive"
+                                    :disabled="deleting"
+                                >
+                                    Delete
+                                </Button>
+                            </Form>
+                        </div>
+                    </CardContent>
+                </Card>
+
+                <Card class="gap-0 overflow-hidden">
+                    <CardHeader class="border-b">
+                        <CardTitle>Link types</CardTitle>
+                        <CardDescription>
+                            Define project-specific labels for ticket-to-ticket
+                            relationships.
+                        </CardDescription>
+                    </CardHeader>
+
+                    <CardContent class="space-y-4 p-6">
+                        <Form
+                            v-bind="
+                                ProjectTicketMetadataSettingsController.storeLinkType.form(
+                                    project.id,
+                                )
+                            "
+                            class="border-border space-y-4 rounded-xl border border-dashed p-4"
+                            v-slot="{ errors, processing }"
+                        >
+                            <div class="grid gap-2">
+                                <Label for="link-type-name">
+                                    Source label
+                                </Label>
+                                <Input
+                                    id="link-type-name"
+                                    name="name"
+                                    required
+                                    placeholder="Blocks"
+                                />
+                                <InputError :message="errors.name" />
+                            </div>
+
+                            <div class="grid gap-2">
+                                <Label for="link-type-counterpart-name">
+                                    Counterpart label
+                                </Label>
+                                <Input
+                                    id="link-type-counterpart-name"
+                                    name="counterpart_name"
+                                    required
+                                    placeholder="Blocked by"
+                                />
+                                <InputError
+                                    :message="errors.counterpart_name"
+                                />
+                            </div>
+
+                            <Button type="submit" :disabled="processing">
+                                Add link type
+                            </Button>
+                        </Form>
+
+                        <div
+                            v-for="ticketLinkType in ticketLinkTypes"
+                            :key="ticketLinkType.id"
+                            class="border-border rounded-xl border p-4"
+                        >
+                            <Form
+                                v-bind="
+                                    ProjectTicketMetadataSettingsController.updateLinkType.form(
+                                        [project.id, ticketLinkType.id],
+                                    )
+                                "
+                                class="grid gap-4"
+                                v-slot="{ errors, processing }"
+                            >
+                                <div class="grid gap-2">
+                                    <Label
+                                        :for="`link-type-name-${ticketLinkType.id}`"
+                                    >
+                                        Source label
+                                    </Label>
+                                    <Input
+                                        :id="`link-type-name-${ticketLinkType.id}`"
+                                        name="name"
+                                        :default-value="ticketLinkType.label"
+                                        required
+                                    />
+                                    <InputError :message="errors.name" />
+                                </div>
+
+                                <div class="grid gap-2">
+                                    <Label
+                                        :for="`link-type-counterpart-name-${ticketLinkType.id}`"
+                                    >
+                                        Counterpart label
+                                    </Label>
+                                    <Input
+                                        :id="`link-type-counterpart-name-${ticketLinkType.id}`"
+                                        name="counterpart_name"
+                                        :default-value="
+                                            ticketLinkType.counterpart_label
+                                        "
+                                        required
+                                    />
+                                    <InputError
+                                        :message="errors.counterpart_name"
+                                    />
+                                </div>
+
+                                <div class="grid gap-2">
+                                    <Label
+                                        :for="`link-type-position-${ticketLinkType.id}`"
+                                    >
+                                        Position
+                                    </Label>
+                                    <Input
+                                        :id="`link-type-position-${ticketLinkType.id}`"
+                                        name="position"
+                                        type="number"
+                                        min="1"
+                                        :max="ticketLinkTypes.length"
+                                        :default-value="ticketLinkType.position"
+                                        required
+                                    />
+                                    <InputError :message="errors.position" />
+                                </div>
+
+                                <div
+                                    class="flex flex-wrap justify-between gap-3"
+                                >
+                                    <Button
+                                        type="submit"
+                                        variant="outline"
+                                        :disabled="processing"
+                                    >
+                                        Save
+                                    </Button>
+                                </div>
+                            </Form>
+
+                            <Form
+                                v-bind="
+                                    ProjectTicketMetadataSettingsController.destroyLinkType.form(
+                                        [project.id, ticketLinkType.id],
+                                    )
+                                "
+                                class="mt-3 flex justify-end"
+                                v-slot="{ processing: deleting }"
+                            >
+                                <Button
+                                    type="submit"
+                                    variant="destructive"
+                                    :disabled="deleting"
+                                >
+                                    Delete
+                                </Button>
+                            </Form>
+                        </div>
+                    </CardContent>
+                </Card>
+            </div>
+        </div>
     </AppLayout>
 </template>

resources/js/pages/settings/Appearance.vue

@@ -1,42 +1,35 @@
 <script setup lang="ts">
 import { Head } from '@inertiajs/vue3';
 import AppearanceTabs from '@/components/AppearanceTabs.vue';
-import { Card, CardContent, CardHeader } from '@/components/ui/card';
-import { useLocalization } from '@/composables/useLocalization';
+import Heading from '@/components/Heading.vue';
 import AppLayout from '@/layouts/AppLayout.vue';
 import SettingsLayout from '@/layouts/settings/Layout.vue';
 import { edit } from '@/routes/appearance/index';
 import type { BreadcrumbItem } from '@/types';
-import { computed } from 'vue';
 
-const { t } = useLocalization();
-const breadcrumbItems = computed<BreadcrumbItem[]>(() => [
+const breadcrumbItems: BreadcrumbItem[] = [
     {
-        title: t('navigation.appearance'),
+        title: 'Appearance settings',
         href: edit(),
     },
-]);
+];
 </script>
 
 <template>
     <AppLayout :breadcrumbs="breadcrumbItems">
-        <Head :title="t('appearance.title')" />
+        <Head title="Appearance settings" />
+
+        <h1 class="sr-only">Appearance settings</h1>
 
         <SettingsLayout>
-            <Card class="gap-0 overflow-hidden rounded-xl py-0 shadow-none">
-                <CardHeader class="gap-stack border-b p-5 sm:p-6">
-                    <h2 class="text-title">{{ t('appearance.title') }}</h2>
-                    <p class="text-muted-foreground">
-                        {{ t('appearance.description') }}
-                    </p>
-                </CardHeader>
-                <CardContent class="gap-column grid p-5 sm:p-6">
-                    <AppearanceTabs />
-                    <p class="text-caption text-muted-foreground">
-                        {{ t('appearance.persistenceHint') }}
-                    </p>
-                </CardContent>
-            </Card>
+            <div class="space-y-6">
+                <Heading
+                    variant="small"
+                    title="Appearance settings"
+                    description="Update your account's appearance settings"
+                />
+                <AppearanceTabs />
+            </div>
         </SettingsLayout>
     </AppLayout>
 </template>

resources/js/pages/settings/Applications.vue

@@ -1,318 +1,198 @@
 <script setup lang="ts">
-import { Head, useForm } from '@inertiajs/vue3';
-import { Check, Copy, KeyRound, Trash2 } from 'lucide-vue-next';
-import { computed, ref, watch } from 'vue';
-import {
-    destroy,
-    store,
-} from '@/actions/App/Http/Controllers/Settings/UserApplicationController';
-import AuthFormFeedback from '@/components/AuthFormFeedback.vue';
+import { Form, Head } from '@inertiajs/vue3';
+import UserApplicationController from '@/actions/App/Http/Controllers/Settings/UserApplicationController';
+import Heading from '@/components/Heading.vue';
 import InputError from '@/components/InputError.vue';
+import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
-import { Card, CardContent, CardHeader } from '@/components/ui/card';
 import {
-    Dialog,
-    DialogContent,
-    DialogDescription,
-    DialogFooter,
-    DialogHeader,
-    DialogTitle,
-} from '@/components/ui/dialog';
+    Card,
+    CardContent,
+    CardDescription,
+    CardHeader,
+    CardTitle,
+} from '@/components/ui/card';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
-import { useFormProtection } from '@/composables/useFormProtection';
-import { useLocalization } from '@/composables/useLocalization';
 import AppLayout from '@/layouts/AppLayout.vue';
 import SettingsLayout from '@/layouts/settings/Layout.vue';
-import { edit } from '@/routes/applications/index';
+import { edit as editApplications } from '@/routes/applications/index';
 import type { BreadcrumbItem, SettingsApplicationsPageProps } from '@/types';
 
-const props = defineProps<SettingsApplicationsPageProps>();
-const { t, locale } = useLocalization();
-const breadcrumbs = computed<BreadcrumbItem[]>(() => [
-    { title: t('navigation.applications'), href: edit() },
-]);
-const form = useForm({ name: '' });
-const protection = useFormProtection(form);
-const deleteForm = useForm({});
-const deleteProtection = useFormProtection(deleteForm);
-const selected = ref<
-    SettingsApplicationsPageProps['applications'][number] | null
->(null);
-const copied = ref(false);
-const copyError = ref(false);
+defineProps<SettingsApplicationsPageProps>();
 
-function formatDate(value: string | null): string {
-    if (!value) {
-        return t('applications.never');
+const breadcrumbItems: BreadcrumbItem[] = [
+    {
+        title: 'Applications',
+        href: editApplications(),
+    },
+];
+
+const formatDate = (value: string | null): string => {
+    if (value === null) {
+        return 'Never';
     }
-    return new Intl.DateTimeFormat(locale.value, {
+
+    return new Intl.DateTimeFormat(undefined, {
         dateStyle: 'medium',
         timeStyle: 'short',
     }).format(new Date(value));
-}
-function createApplication(): void {
-    protection.submit(store(), {
-        preserveScroll: true,
-        onSuccess: () => {
-            form.reset();
-        },
-    });
-}
-function closeDelete(open: boolean): void {
-    if (!open && !deleteForm.processing) {
-        selected.value = null;
-        deleteProtection.clearFeedback();
-    }
-}
-function deleteApplication(): void {
-    if (!selected.value) {
-        return;
-    }
-    deleteProtection.submit(destroy(selected.value.id), {
-        preserveScroll: true,
-        onSuccess: () => {
-            selected.value = null;
-        },
-    });
-}
-async function copyKey(): Promise<void> {
-    const key = props.applicationKey;
-    if (!key) {
-        return;
-    }
-    copyError.value = false;
-    try {
-        await navigator.clipboard.writeText(key);
-        if (props.applicationKey === key) {
-            copied.value = true;
-        }
-    } catch {
-        if (props.applicationKey === key) {
-            copyError.value = true;
-        }
-    }
-}
-watch(
-    () => props.applicationKey,
-    () => {
-        copied.value = false;
-        copyError.value = false;
-    },
-);
+};
 </script>
 
 <template>
-    <AppLayout :breadcrumbs="breadcrumbs">
-        <Head :title="t('applications.title')" />
+    <AppLayout :breadcrumbs="breadcrumbItems">
+        <Head title="Applications" />
+
         <SettingsLayout>
-            <div class="gap-stack grid">
-                <h2 class="text-title">{{ t('applications.title') }}</h2>
-                <p class="text-muted-foreground">
-                    {{ t('applications.description') }}
-                </p>
-            </div>
-            <p
-                v-if="status"
-                role="status"
-                class="bg-success/10 text-success-foreground rounded-lg border p-4 text-sm"
-            >
-                {{ status }}
-            </p>
-            <section
-                v-if="applicationKey"
-                class="bg-warning/10 gap-stack grid min-w-0 rounded-xl border p-5"
-                aria-labelledby="application-key-title"
-            >
-                <h3 id="application-key-title" class="font-semibold">
-                    {{ t('applications.saveKey') }}
-                </h3>
-                <p class="text-body text-muted-foreground">
-                    {{ t('applications.keyOnce') }}
-                </p>
-                <Label for="application-key" class="sr-only">{{
-                    t('applications.apiKey')
-                }}</Label>
-                <div class="flex min-w-0 flex-wrap gap-2">
+            <div class="flex flex-col gap-6">
+                <div class="space-y-2">
+                    <Heading
+                        variant="small"
+                        title="Applications"
+                        description="Create API keys for tools that should use KanbanGit with your account permissions."
+                    />
+                    <p class="text-muted-foreground text-sm">
+                        Keys are shown once. Delete an application when a tool
+                        should lose access.
+                    </p>
+                </div>
+
+                <div
+                    v-if="status"
+                    class="rounded-xl border border-emerald-200 bg-emerald-50 px-4 py-3 text-sm text-emerald-900 dark:border-emerald-900/70 dark:bg-emerald-950/40 dark:text-emerald-100"
+                >
+                    {{ status }}
+                </div>
+
+                <div
+                    v-if="applicationKey"
+                    class="rounded-xl border border-amber-200 bg-amber-50 px-4 py-3 text-sm text-amber-950 dark:border-amber-900/70 dark:bg-amber-950/30 dark:text-amber-100"
+                >
+                    <p class="font-medium">Save this API key now.</p>
+                    <p class="mt-1">
+                        It will not be shown again after you leave this page.
+                    </p>
                     <Input
-                        id="application-key"
+                        class="mt-3 font-mono text-xs"
                         :model-value="applicationKey"
                         readonly
-                        class="min-w-0 basis-full font-mono text-xs sm:flex-1 sm:basis-0"
                     />
-                    <Button variant="outline" @click="copyKey"
-                        ><Check v-if="copied" /><Copy v-else />{{
-                            t(copied ? 'security.copied' : 'security.copyKey')
-                        }}</Button
-                    >
                 </div>
-                <p
-                    v-if="copied"
-                    role="status"
-                    class="text-caption text-success-foreground"
-                >
-                    {{ t('security.copied') }}
-                </p>
-                <InputError
-                    v-if="copyError"
-                    :message="t('security.copyError')"
-                />
-            </section>
-            <Card class="gap-0 overflow-hidden rounded-xl py-0 shadow-none">
-                <CardHeader class="gap-stack border-b p-5 sm:p-6">
-                    <h3 class="flex items-center gap-2 font-semibold">
-                        <KeyRound class="text-primary size-5" />{{
-                            t('applications.create')
-                        }}
-                    </h3>
-                    <p class="text-muted-foreground">
-                        {{ t('applications.nameDescription') }}
-                    </p>
-                </CardHeader>
-                <CardContent class="p-5 sm:p-6">
-                    <form
-                        class="gap-column grid"
-                        :aria-busy="form.processing"
-                        @submit.prevent="createApplication"
-                    >
-                        <AuthFormFeedback
-                            :state="protection.state.value"
-                            :response-status="protection.responseStatus.value"
-                            :loading-title="t('applications.creating')"
-                            @retry="createApplication"
-                        />
-                        <div class="grid gap-2">
-                            <Label for="application-name">{{
-                                t('applications.name')
-                            }}</Label>
-                            <Input
-                                id="application-name"
-                                v-model="form.name"
-                                name="name"
-                                required
-                                maxlength="255"
-                                autocomplete="off"
-                                :placeholder="t('applications.namePlaceholder')"
-                                :disabled="form.processing"
-                                :aria-invalid="!!form.errors.name"
-                                aria-describedby="application-name-error"
-                            />
-                            <InputError
-                                id="application-name-error"
-                                :message="form.errors.name"
-                            />
-                        </div>
-                        <Button
-                            type="submit"
-                            class="justify-self-start"
-                            :loading="form.processing"
-                            :loading-label="t('applications.creating')"
-                            >{{ t('applications.create') }}</Button
-                        >
-                    </form>
-                </CardContent>
-            </Card>
-            <Card class="gap-0 overflow-hidden rounded-xl py-0 shadow-none">
-                <CardHeader class="gap-stack border-b p-5 sm:p-6">
-                    <h3 class="font-semibold">{{ t('applications.saved') }}</h3>
-                    <p class="text-muted-foreground">
-                        {{ t('applications.hiddenKeys') }}
-                    </p>
-                </CardHeader>
-                <CardContent class="gap-stack grid p-5 sm:p-6">
-                    <p
-                        v-if="!applications.length"
-                        class="text-body text-muted-foreground rounded-lg border border-dashed p-6 text-center"
-                    >
-                        {{ t('applications.empty') }}
-                    </p>
-                    <article
-                        v-for="application in applications"
-                        :key="application.id"
-                        class="flex min-w-0 flex-wrap items-start justify-between gap-4 rounded-lg border p-4"
-                    >
-                        <div class="gap-stack grid min-w-0 flex-1 basis-40">
-                            <h4 class="break-words font-semibold">
-                                {{ application.name }}
-                            </h4>
-                            <dl
-                                class="gap-stack text-caption text-muted-foreground grid"
+
+                <div class="grid gap-6 xl:grid-cols-[24rem_minmax(0,1fr)]">
+                    <Card>
+                        <CardHeader>
+                            <CardTitle>Create application</CardTitle>
+                            <CardDescription>
+                                Name the tool that will receive an API key.
+                            </CardDescription>
+                        </CardHeader>
+
+                        <CardContent>
+                            <Form
+                                v-bind="UserApplicationController.store.form()"
+                                class="space-y-4"
+                                v-slot="{ errors, processing }"
                             >
-                                <div>
-                                    <dt class="inline font-medium">
-                                        {{ t('applications.created') }}
-                                    </dt>
-                                    <dd class="inline">
-                                        {{ formatDate(application.created_at) }}
-                                    </dd>
+                                <div class="grid gap-2">
+                                    <Label for="name">Application name</Label>
+                                    <Input
+                                        id="name"
+                                        name="name"
+                                        type="text"
+                                        required
+                                        autofocus
+                                        placeholder="Claude Desktop"
+                                    />
+                                    <InputError :message="errors.name" />
                                 </div>
-                                <div>
-                                    <dt class="inline font-medium">
-                                        {{ t('applications.lastUsed') }}
-                                    </dt>
-                                    <dd class="inline">
-                                        {{
-                                            formatDate(application.last_used_at)
-                                        }}
-                                    </dd>
+
+                                <Button type="submit" :disabled="processing">
+                                    Create application
+                                </Button>
+                            </Form>
+                        </CardContent>
+                    </Card>
+
+                    <Card class="gap-0 overflow-hidden">
+                        <CardHeader class="border-b">
+                            <CardTitle>Saved applications</CardTitle>
+                            <CardDescription>
+                                Existing keys stay hidden. Create a new
+                                application when another key is needed.
+                            </CardDescription>
+                        </CardHeader>
+
+                        <CardContent class="space-y-4 p-6">
+                            <div
+                                v-if="applications.length === 0"
+                                class="border-border text-muted-foreground rounded-xl border border-dashed px-4 py-6 text-sm"
+                            >
+                                No applications have been created yet.
+                            </div>
+
+                            <div
+                                v-for="application in applications"
+                                :key="application.id"
+                                class="border-border rounded-xl border p-4"
+                            >
+                                <div
+                                    class="flex flex-wrap items-start justify-between gap-4"
+                                >
+                                    <div class="space-y-2">
+                                        <div
+                                            class="flex flex-wrap items-center gap-2"
+                                        >
+                                            <Badge>API key</Badge>
+                                            <span class="text-sm font-medium">
+                                                {{ application.name }}
+                                            </span>
+                                        </div>
+                                        <p
+                                            class="text-muted-foreground text-xs"
+                                        >
+                                            Created:
+                                            {{
+                                                formatDate(
+                                                    application.created_at,
+                                                )
+                                            }}
+                                        </p>
+                                        <p
+                                            class="text-muted-foreground text-xs"
+                                        >
+                                            Last used:
+                                            {{
+                                                formatDate(
+                                                    application.last_used_at,
+                                                )
+                                            }}
+                                        </p>
+                                    </div>
+
+                                    <Form
+                                        v-bind="
+                                            UserApplicationController.destroy.form(
+                                                application.id,
+                                            )
+                                        "
+                                        v-slot="{ processing }"
+                                    >
+                                        <Button
+                                            type="submit"
+                                            variant="destructive"
+                                            :disabled="processing"
+                                        >
+                                            Delete
+                                        </Button>
+                                    </Form>
                                 </div>
-                            </dl>
-                        </div>
-                        <Button
-                            variant="outline"
-                            class="text-destructive"
-                            :aria-label="
-                                t('applications.deleteNamed', {
-                                    name: application.name,
-                                })
-                            "
-                            @click="selected = application"
-                            ><Trash2 />{{ t('applications.delete') }}</Button
-                        >
-                    </article>
-                </CardContent>
-            </Card>
-            <Dialog :open="!!selected" @update:open="closeDelete">
-                <DialogContent
-                    :show-close-button="!deleteForm.processing"
-                    @escape-key-down="
-                        deleteForm.processing && $event.preventDefault()
-                    "
-                    @interact-outside="
-                        deleteForm.processing && $event.preventDefault()
-                    "
-                >
-                    <DialogHeader>
-                        <DialogTitle>{{
-                            t('applications.deleteTitle')
-                        }}</DialogTitle>
-                        <DialogDescription>{{
-                            t('applications.deleteDescription', {
-                                name: selected?.name ?? '',
-                            })
-                        }}</DialogDescription>
-                    </DialogHeader>
-                    <AuthFormFeedback
-                        :state="deleteProtection.state.value"
-                        :response-status="deleteProtection.responseStatus.value"
-                        @retry="deleteApplication"
-                    />
-                    <DialogFooter>
-                        <Button
-                            variant="outline"
-                            :disabled="deleteForm.processing"
-                            @click="closeDelete(false)"
-                            >{{ t('common.cancel') }}</Button
-                        >
-                        <Button
-                            variant="destructive"
-                            :loading="deleteForm.processing"
-                            @click="deleteApplication"
-                            >{{ t('applications.delete') }}</Button
-                        >
-                    </DialogFooter>
-                </DialogContent>
-            </Dialog>
+                            </div>
+                        </CardContent>
+                    </Card>
+                </div>
+            </div>
         </SettingsLayout>
     </AppLayout>
 </template>

resources/js/pages/settings/GitConnections.vue

@@ -1,493 +1,267 @@
 <script setup lang="ts">
-import { Head, useForm } from '@inertiajs/vue3';
-import {
-    GitBranch,
-    LockKeyhole,
-    Pencil,
-    Plus,
-    Server,
-    Trash2,
-} from 'lucide-vue-next';
-import { computed, ref } from 'vue';
-import {
-    destroy,
-    store,
-    update,
-} from '@/actions/App/Http/Controllers/Settings/GitConnectionController';
-import FeedbackState from '@/components/FeedbackState.vue';
-import FormFeedback from '@/components/FormFeedback.vue';
+import { Form, Head, usePage } from '@inertiajs/vue3';
+import GitConnectionController from '@/actions/App/Http/Controllers/Settings/GitConnectionController';
+import Heading from '@/components/Heading.vue';
 import InputError from '@/components/InputError.vue';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
-import { Card, CardContent, CardHeader } from '@/components/ui/card';
 import {
-    Dialog,
-    DialogContent,
-    DialogDescription,
-    DialogFooter,
-    DialogHeader,
-    DialogTitle,
-} from '@/components/ui/dialog';
+    Card,
+    CardContent,
+    CardDescription,
+    CardHeader,
+    CardTitle,
+} from '@/components/ui/card';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
-import { useFormProtection } from '@/composables/useFormProtection';
-import { useLocalization } from '@/composables/useLocalization';
 import AppLayout from '@/layouts/AppLayout.vue';
 import SettingsLayout from '@/layouts/settings/Layout.vue';
-import { edit } from '@/routes/git-connections/index';
+import { edit as editGitConnections } from '@/routes/git-connections/index';
 import type { BreadcrumbItem, SettingsGitConnectionsPageProps } from '@/types';
-import type { UserGitConnectionModel } from '@/types/models/user-git-connection-model';
 
-const props = defineProps<SettingsGitConnectionsPageProps>();
-const { t } = useLocalization();
-const breadcrumbItems = computed<BreadcrumbItem[]>(() => [
-    { title: t('navigation.gitConnections'), href: edit() },
-]);
-const mode = ref<'create' | 'edit' | 'remove'>('create');
-const dialogOpen = ref(false);
-const selectedConnection = ref<UserGitConnectionModel | null>(null);
-// Keep provider credentials out of Inertia's remembered browser history.
-const connectionForm = useForm({
-    provider: 'gitea',
-    base_url: '',
-    api_token: '',
-});
-const connectionProtection = useFormProtection(connectionForm);
-const removalForm = useForm({});
-const removalProtection = useFormProtection(removalForm);
-const processing = computed(
-    () => connectionForm.processing || removalForm.processing,
-);
-const dialogTitle = computed(() =>
-    t(
-        mode.value === 'create'
-            ? 'gitConnections.add'
-            : mode.value === 'edit'
-              ? 'gitConnections.edit'
-              : 'gitConnections.removeTitle',
-    ),
-);
-const successTitle = computed(() =>
-    props.status === 'Git connection was added.'
-        ? t('gitConnections.added')
-        : props.status === 'Git connection was updated.'
-          ? t('gitConnections.updated')
-          : t('gitConnections.removed'),
-);
+defineProps<SettingsGitConnectionsPageProps>();
 
-function resetForms(): void {
-    connectionForm.defaults({ provider: 'gitea', base_url: '', api_token: '' });
-    connectionForm.resetAndClearErrors();
-    connectionProtection.clearFeedback();
-    removalForm.resetAndClearErrors();
-    removalProtection.clearFeedback();
-}
+const page = usePage();
+const appName = String(page.props.name);
 
-function openDialog(
-    nextMode: typeof mode.value,
-    connection: UserGitConnectionModel | null = null,
-): void {
-    resetForms();
-    mode.value = nextMode;
-    selectedConnection.value = connection;
-    connectionForm.defaults({
-        provider: connection?.provider ?? 'gitea',
-        base_url: connection?.base_url ?? '',
-        api_token: '',
-    });
-    connectionForm.reset();
-    dialogOpen.value = true;
-}
-
-function closeDialog(open: boolean): void {
-    if (open || processing.value || !connectionProtection.confirmLeave()) {
-        return;
-    }
-    dialogOpen.value = false;
-    resetForms();
-}
-
-function finish(): void {
-    resetForms();
-    dialogOpen.value = false;
-}
-
-function saveConnection(): void {
-    const target =
-        mode.value === 'edit' && selectedConnection.value
-            ? update(selectedConnection.value.id)
-            : store();
-    connectionProtection.submit(target, {
-        preserveScroll: true,
-        onSuccess: finish,
-    });
-}
-
-function removeConnection(): void {
-    if (!selectedConnection.value) {
-        return;
-    }
-    removalProtection.submit(destroy(selectedConnection.value.id), {
-        preserveScroll: true,
-        onSuccess: finish,
-    });
-}
+const breadcrumbItems: BreadcrumbItem[] = [
+    {
+        title: 'Git connections',
+        href: editGitConnections(),
+    },
+];
 </script>
 
 <template>
     <AppLayout :breadcrumbs="breadcrumbItems">
-        <Head :title="t('navigation.gitConnections')" />
+        <Head title="Git connections" />
+
         <SettingsLayout>
-            <Card
-                class="min-w-0 gap-0 overflow-hidden rounded-xl py-0 shadow-none"
-            >
-                <CardHeader
-                    class="gap-column min-w-0 grid-cols-1 border-b p-5 sm:p-6"
+            <div class="flex flex-col gap-6">
+                <div class="space-y-2">
+                    <Heading
+                        variant="small"
+                        title="Git connections"
+                        description="Add your personal Git provider credentials here. Project repository links will use these connections to fetch repositories, branches, and pull requests you can access."
+                    />
+                    <p class="text-muted-foreground text-sm">
+                        Each user needs their own application key. Without a
+                        matching personal connection, {{ appName }} can only
+                        show repository names and will link you back to this
+                        page.
+                    </p>
+                </div>
+
+                <div
+                    v-if="status"
+                    class="rounded-xl border border-emerald-200 bg-emerald-50 px-4 py-3 text-sm text-emerald-900 dark:border-emerald-900/70 dark:bg-emerald-950/40 dark:text-emerald-100"
                 >
-                    <div
-                        class="flex min-w-0 flex-col gap-4 sm:flex-row sm:items-start sm:justify-between"
-                    >
-                        <div class="gap-stack grid min-w-0">
-                            <h2 class="text-title">
-                                {{ t('navigation.gitConnections') }}
-                            </h2>
-                            <p class="text-muted-foreground">
-                                {{ t('gitConnections.description') }}
-                            </p>
-                        </div>
-                        <Button
-                            type="button"
-                            class="shrink-0 self-start"
-                            @click="openDialog('create')"
-                        >
-                            <Plus aria-hidden="true" />{{
-                                t('gitConnections.add')
-                            }}
-                        </Button>
-                    </div>
-                    <div
-                        class="bg-muted/45 text-caption text-muted-foreground flex items-start gap-2 rounded-lg border p-3"
-                    >
-                        <LockKeyhole
-                            class="text-primary mt-0.5 size-4 shrink-0"
-                            aria-hidden="true"
-                        />
-                        <p>{{ t('gitConnections.privacy') }}</p>
-                    </div>
-                </CardHeader>
-                <CardContent class="gap-column grid min-w-0 p-5 sm:p-6">
-                    <FeedbackState
-                        v-if="status"
-                        state="success"
-                        :title="successTitle"
-                    />
-                    <div class="flex flex-wrap items-center gap-2">
-                        <h3 class="font-semibold">
-                            {{ t('gitConnections.saved') }}
-                        </h3>
-                        <Badge variant="secondary">{{
-                            gitConnections.length
-                        }}</Badge>
-                    </div>
-                    <FeedbackState
-                        v-if="gitConnections.length === 0"
-                        state="empty"
-                        :title="t('gitConnections.empty')"
-                        :description="t('gitConnections.emptyDescription')"
-                    />
-                    <ul
-                        v-else
-                        class="gap-column grid min-w-0"
-                        :aria-label="t('gitConnections.saved')"
-                    >
-                        <li
-                            v-for="connection in gitConnections"
-                            :key="connection.id"
-                            class="gap-column grid min-w-0 rounded-lg border p-4"
-                        >
-                            <div class="flex min-w-0 items-start gap-3">
-                                <div
-                                    class="bg-accent text-primary flex size-10 shrink-0 items-center justify-center rounded-lg"
-                                >
-                                    <GitBranch
-                                        class="size-5"
-                                        aria-hidden="true"
+                    {{ status }}
+                </div>
+
+                <div class="grid gap-6 xl:grid-cols-[24rem_minmax(0,1fr)]">
+                    <Card>
+                        <CardHeader>
+                            <CardTitle>Add Gitea connection</CardTitle>
+                            <CardDescription>
+                                Connect a Gitea account by storing the instance
+                                base URL and a personal application token.
+                            </CardDescription>
+                        </CardHeader>
+
+                        <CardContent>
+                            <Form
+                                v-bind="GitConnectionController.store.form()"
+                                class="space-y-4"
+                                v-slot="{ errors, processing }"
+                            >
+                                <input
+                                    name="provider"
+                                    type="hidden"
+                                    value="gitea"
+                                />
+
+                                <div class="grid gap-2">
+                                    <Label for="base_url">Gitea base URL</Label>
+                                    <Input
+                                        id="base_url"
+                                        name="base_url"
+                                        type="url"
+                                        required
+                                        autofocus
+                                        placeholder="https://git.example.com"
                                     />
+                                    <InputError :message="errors.base_url" />
                                 </div>
-                                <div class="gap-stack grid min-w-0 flex-1">
-                                    <div
-                                        class="flex min-w-0 flex-wrap items-center gap-2"
+
+                                <div class="grid gap-2">
+                                    <Label for="api_token"
+                                        >Application token</Label
                                     >
-                                        <h4
-                                            class="min-w-0 break-all font-semibold"
-                                        >
-                                            {{ connection.account_login }}
-                                        </h4>
-                                        <Badge variant="secondary">{{
-                                            connection.provider_label
-                                        }}</Badge>
-                                    </div>
-                                    <p
-                                        class="text-caption text-muted-foreground break-words"
-                                    >
-                                        {{
-                                            connection.account_name ??
-                                            t('gitConnections.unnamedAccount')
-                                        }}
-                                    </p>
-                                    <div
-                                        class="text-caption text-muted-foreground flex min-w-0 items-start gap-2"
-                                    >
-                                        <Server
-                                            class="mt-0.5 size-4 shrink-0"
-                                            aria-hidden="true"
-                                        />
-                                        <span class="min-w-0 break-all">{{
-                                            connection.base_url
-                                        }}</span>
-                                    </div>
-                                    <p
-                                        class="text-caption text-muted-foreground break-all"
-                                    >
-                                        {{
-                                            t('gitConnections.remoteId', {
-                                                id: connection.provider_user_id,
-                                            })
-                                        }}
-                                    </p>
+                                    <Input
+                                        id="api_token"
+                                        name="api_token"
+                                        type="password"
+                                        required
+                                        placeholder="Paste your Gitea application key"
+                                    />
+                                    <InputError :message="errors.api_token" />
                                 </div>
-                            </div>
+
+                                <Button type="submit" :disabled="processing">
+                                    Add connection
+                                </Button>
+                            </Form>
+                        </CardContent>
+                    </Card>
+
+                    <Card class="gap-0 overflow-hidden">
+                        <CardHeader class="border-b">
+                            <CardTitle>Saved connections</CardTitle>
+                            <CardDescription>
+                                Tokens stay hidden after save. Updating a
+                                connection requires entering a fresh token.
+                            </CardDescription>
+                        </CardHeader>
+
+                        <CardContent class="space-y-4 p-6">
                             <div
-                                class="flex flex-wrap gap-2 border-t pt-3 sm:justify-end"
+                                v-if="gitConnections.length === 0"
+                                class="border-border text-muted-foreground rounded-xl border border-dashed px-4 py-6 text-sm"
                             >
-                                <Button
-                                    type="button"
-                                    variant="outline"
-                                    :aria-label="
-                                        t('gitConnections.editAccount', {
-                                            account: connection.account_login,
-                                            server: connection.base_url,
-                                        })
-                                    "
-                                    @click="openDialog('edit', connection)"
-                                >
-                                    <Pencil aria-hidden="true" />{{
-                                        t('gitConnections.editAction')
-                                    }}
-                                </Button>
-                                <Button
-                                    type="button"
-                                    variant="ghost"
-                                    :aria-label="
-                                        t('gitConnections.removeAccount', {
-                                            account: connection.account_login,
-                                            server: connection.base_url,
-                                        })
-                                    "
-                                    @click="openDialog('remove', connection)"
-                                >
-                                    <Trash2 aria-hidden="true" />{{
-                                        t('gitConnections.remove')
-                                    }}
-                                </Button>
+                                No Git connections have been added yet.
                             </div>
-                        </li>
-                    </ul>
-                </CardContent>
-            </Card>
-            <Dialog :open="dialogOpen" @update:open="closeDialog">
-                <DialogContent
-                    :show-close-button="!processing"
-                    @escape-key-down="processing && $event.preventDefault()"
-                    @interact-outside="processing && $event.preventDefault()"
-                >
-                    <DialogHeader>
-                        <DialogTitle>{{ dialogTitle }}</DialogTitle>
-                        <DialogDescription>{{
-                            t(
-                                mode === 'remove'
-                                    ? 'gitConnections.removeDescription'
-                                    : mode === 'edit'
-                                      ? 'gitConnections.editDescription'
-                                      : 'gitConnections.addDescription',
-                            )
-                        }}</DialogDescription>
-                    </DialogHeader>
-                    <form
-                        v-if="mode !== 'remove'"
-                        class="gap-column grid min-w-0"
-                        :aria-busy="connectionForm.processing"
-                        @submit.prevent="saveConnection"
-                    >
-                        <FormFeedback
-                            :state="connectionProtection.state.value"
-                            :title="
-                                connectionProtection.responseStatus.value ===
-                                403
-                                    ? t('gitConnections.forbidden')
-                                    : connectionForm.processing
-                                      ? t('gitConnections.verifying')
-                                      : undefined
-                            "
-                            :description="
-                                connectionProtection.responseStatus.value ===
-                                403
-                                    ? t('gitConnections.forbiddenDescription')
-                                    : undefined
-                            "
-                            :retryable="
-                                connectionProtection.responseStatus.value !==
-                                403
-                            "
-                            @retry="saveConnection"
-                        />
-                        <fieldset
-                            class="gap-column grid min-w-0"
-                            :disabled="connectionForm.processing"
-                        >
-                            <legend class="sr-only">{{ dialogTitle }}</legend>
-                            <Badge
-                                variant="secondary"
-                                class="justify-self-start"
-                                >{{ t('gitConnections.gitea') }}</Badge
+
+                            <div
+                                v-for="gitConnection in gitConnections"
+                                :key="gitConnection.id"
+                                class="border-border rounded-xl border p-4"
                             >
-                            <InputError
-                                :message="connectionForm.errors.provider"
-                            />
-                            <div class="grid gap-2">
-                                <Label for="git-base-url">{{
-                                    t('gitConnections.baseUrl')
-                                }}</Label>
-                                <Input
-                                    id="git-base-url"
-                                    v-model="connectionForm.base_url"
-                                    name="base_url"
-                                    type="url"
-                                    required
-                                    placeholder="https://git.example.com"
-                                    autocomplete="url"
-                                    :aria-invalid="
-                                        !!connectionForm.errors.base_url
-                                    "
-                                    aria-describedby="git-base-url-error"
-                                />
-                                <InputError
-                                    id="git-base-url-error"
-                                    :message="connectionForm.errors.base_url"
-                                />
-                            </div>
-                            <div class="grid gap-2">
-                                <Label for="git-token">{{
-                                    t(
-                                        mode === 'edit'
-                                            ? 'gitConnections.newToken'
-                                            : 'gitConnections.token',
-                                    )
-                                }}</Label>
-                                <Input
-                                    id="git-token"
-                                    v-model="connectionForm.api_token"
-                                    name="api_token"
-                                    type="password"
-                                    required
-                                    autocomplete="new-password"
-                                    :placeholder="
-                                        t('gitConnections.tokenPlaceholder')
-                                    "
-                                    :aria-invalid="
-                                        !!connectionForm.errors.api_token
-                                    "
-                                    aria-describedby="git-token-help git-token-error"
-                                />
-                                <p
-                                    id="git-token-help"
-                                    class="text-caption text-muted-foreground"
+                                <div
+                                    class="mb-4 flex flex-wrap items-start justify-between gap-3"
                                 >
-                                    {{ t('gitConnections.tokenHelp') }}
-                                </p>
-                                <InputError
-                                    id="git-token-error"
-                                    :message="connectionForm.errors.api_token"
-                                />
-                            </div>
-                            <DialogFooter>
-                                <Button
-                                    type="button"
-                                    variant="secondary"
-                                    @click="closeDialog(false)"
-                                    >{{ t('common.cancel') }}</Button
+                                    <div class="space-y-1">
+                                        <div
+                                            class="flex flex-wrap items-center gap-2"
+                                        >
+                                            <Badge>{{
+                                                gitConnection.provider_label
+                                            }}</Badge>
+                                            <span class="text-sm font-medium">
+                                                {{
+                                                    gitConnection.account_login
+                                                }}
+                                            </span>
+                                        </div>
+                                        <p
+                                            class="text-muted-foreground text-sm"
+                                        >
+                                            {{
+                                                gitConnection.account_name ??
+                                                'Unnamed remote account'
+                                            }}
+                                        </p>
+                                        <p
+                                            class="text-muted-foreground text-xs"
+                                        >
+                                            {{ gitConnection.base_url }}
+                                        </p>
+                                    </div>
+
+                                    <p class="text-muted-foreground text-xs">
+                                        Remote user ID:
+                                        {{ gitConnection.provider_user_id }}
+                                    </p>
+                                </div>
+
+                                <Form
+                                    v-bind="
+                                        GitConnectionController.update.form(
+                                            gitConnection.id,
+                                        )
+                                    "
+                                    class="grid gap-4"
+                                    v-slot="{ errors, processing }"
                                 >
-                                <Button type="submit">{{
-                                    t(
-                                        connectionForm.processing
-                                            ? 'gitConnections.verifying'
-                                            : mode === 'edit'
-                                              ? 'gitConnections.save'
-                                              : 'gitConnections.add',
-                                    )
-                                }}</Button>
-                            </DialogFooter>
-                        </fieldset>
-                    </form>
-                    <form
-                        v-else
-                        class="gap-column grid min-w-0"
-                        :aria-busy="removalForm.processing"
-                        @submit.prevent="removeConnection"
-                    >
-                        <div
-                            class="bg-destructive/8 border-destructive/25 text-body grid min-w-0 gap-2 rounded-lg border p-4"
-                        >
-                            <p class="break-all font-semibold">
-                                {{ selectedConnection?.account_login }}
-                            </p>
-                            <p class="text-muted-foreground break-all">
-                                {{ selectedConnection?.base_url }}
-                            </p>
-                        </div>
-                        <FormFeedback
-                            :state="removalProtection.state.value"
-                            :title="
-                                removalProtection.responseStatus.value === 403
-                                    ? t('gitConnections.forbidden')
-                                    : removalForm.processing
-                                      ? t('gitConnections.removing')
-                                      : undefined
-                            "
-                            :description="
-                                removalProtection.responseStatus.value === 403
-                                    ? t('gitConnections.forbiddenDescription')
-                                    : undefined
-                            "
-                            :retryable="
-                                removalProtection.responseStatus.value !== 403
-                            "
-                            @retry="removeConnection"
-                        />
-                        <DialogFooter>
-                            <Button
-                                type="button"
-                                variant="secondary"
-                                :disabled="removalForm.processing"
-                                @click="closeDialog(false)"
-                                >{{ t('common.cancel') }}</Button
-                            >
-                            <Button
-                                type="submit"
-                                variant="destructive"
-                                :disabled="removalForm.processing"
-                                >{{
-                                    t(
-                                        removalForm.processing
-                                            ? 'gitConnections.removing'
-                                            : 'gitConnections.removeTitle',
-                                    )
-                                }}</Button
-                            >
-                        </DialogFooter>
-                    </form>
-                </DialogContent>
-            </Dialog>
+                                    <input
+                                        name="provider"
+                                        type="hidden"
+                                        :value="gitConnection.provider"
+                                    />
+
+                                    <div class="grid gap-2">
+                                        <Label
+                                            :for="`base-url-${gitConnection.id}`"
+                                        >
+                                            Gitea base URL
+                                        </Label>
+                                        <Input
+                                            :id="`base-url-${gitConnection.id}`"
+                                            name="base_url"
+                                            type="url"
+                                            :default-value="
+                                                gitConnection.base_url
+                                            "
+                                            required
+                                        />
+                                        <InputError
+                                            :message="errors.base_url"
+                                        />
+                                    </div>
+
+                                    <div class="grid gap-2">
+                                        <Label
+                                            :for="`token-${gitConnection.id}`"
+                                        >
+                                            New application token
+                                        </Label>
+                                        <Input
+                                            :id="`token-${gitConnection.id}`"
+                                            name="api_token"
+                                            type="password"
+                                            required
+                                            placeholder="Paste a new token to verify and save"
+                                        />
+                                        <InputError
+                                            :message="errors.api_token"
+                                        />
+                                    </div>
+
+                                    <div
+                                        class="flex flex-wrap justify-between gap-3"
+                                    >
+                                        <Button
+                                            type="submit"
+                                            variant="outline"
+                                            :disabled="processing"
+                                        >
+                                            Save changes
+                                        </Button>
+                                    </div>
+                                </Form>
+
+                                <Form
+                                    v-bind="
+                                        GitConnectionController.destroy.form(
+                                            gitConnection.id,
+                                        )
+                                    "
+                                    class="mt-3 flex justify-end"
+                                    v-slot="{ processing }"
+                                >
+                                    <Button
+                                        type="submit"
+                                        variant="destructive"
+                                        :disabled="processing"
+                                    >
+                                        Remove connection
+                                    </Button>
+                                </Form>
+                            </div>
+                        </CardContent>
+                    </Card>
+                </div>
+            </div>
         </SettingsLayout>
     </AppLayout>
 </template>

resources/js/pages/settings/Profile.vue

@@ -1,385 +1,209 @@
 <script setup lang="ts">
-import { Head, Link, useForm, usePage } from '@inertiajs/vue3';
-import { Camera, RotateCcw, Trash2 } from 'lucide-vue-next';
-import { computed, onBeforeUnmount, ref, useTemplateRef } from 'vue';
+import { Form, Head, Link, useForm, usePage } from '@inertiajs/vue3';
+import { Trash2 } from 'lucide-vue-next';
+import { computed, onBeforeUnmount, ref } from 'vue';
 import ProfileController from '@/actions/App/Http/Controllers/Settings/ProfileController';
 import DeleteUser from '@/components/DeleteUser.vue';
-import FormFeedback from '@/components/FormFeedback.vue';
+import Heading from '@/components/Heading.vue';
 import InputError from '@/components/InputError.vue';
-import UserAvatar from '@/components/ui/avatar/UserAvatar.vue';
 import { Button } from '@/components/ui/button';
-import { Card, CardContent, CardHeader } from '@/components/ui/card';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
-import { useFormProtection } from '@/composables/useFormProtection';
-import { useLocalization } from '@/composables/useLocalization';
 import AppLayout from '@/layouts/AppLayout.vue';
 import SettingsLayout from '@/layouts/settings/Layout.vue';
 import { edit } from '@/routes/profile/index';
 import { send } from '@/routes/verification';
 import type { BreadcrumbItem, SettingsProfilePageProps } from '@/types';
-import type { UserModel } from '@/types/models/user-model';
+import UserAvatar from '@/components/ui/avatar/UserAvatar.vue';
 
 defineProps<SettingsProfilePageProps>();
 
-const { t } = useLocalization();
-const page = usePage();
-const user = computed(() => page.props.auth.user);
-const breadcrumbItems = computed<BreadcrumbItem[]>(() => [
+const breadcrumbItems: BreadcrumbItem[] = [
     {
-        title: t('navigation.profile'),
+        title: 'Profile settings',
         href: edit(),
     },
-]);
-const profileForm = useForm('SettingsProfile', {
-    name: user.value.name,
-    email: user.value.email,
-    avatar: null as File | null,
-});
-const profileProtection = useFormProtection(profileForm);
-const avatarDeleteForm = useForm({});
-const avatarDeleteProtection = useFormProtection(avatarDeleteForm);
-const avatarInput = useTemplateRef<HTMLInputElement>('avatarInput');
+];
+
+const page = usePage();
+const user = computed(() => page.props.auth.user);
 const avatarPreview = ref<string | null>(null);
+const avatarDeleteForm = useForm({});
 const displayedAvatar = computed(
     () => avatarPreview.value ?? user.value.avatar,
 );
-const displayedUser = computed<UserModel>(() => ({
-    ...user.value,
-    avatar: displayedAvatar.value,
-}));
 const canRemoveAvatar = computed(
-    () =>
-        avatarPreview.value === null &&
-        user.value.avatar !== null &&
-        !user.value.avatar_is_generated,
+    () => user.value.avatar !== null && !user.value.avatar_is_generated,
 );
-const profileUpdateForm = ProfileController.update.form();
-const profileUpdateTarget = {
-    url: profileUpdateForm.action,
-    method: profileUpdateForm.method,
-};
 
-function clearAvatarPreview(): void {
+const clearAvatarPreview = (): void => {
     if (avatarPreview.value) {
         URL.revokeObjectURL(avatarPreview.value);
         avatarPreview.value = null;
     }
-}
+};
 
-function clearAvatarSelection(): void {
-    clearAvatarPreview();
-    profileForm.avatar = null;
-    profileForm.clearErrors('avatar');
-    profileProtection.clearFeedback();
-    if (avatarInput.value) {
-        avatarInput.value.value = '';
-    }
-}
-
-function handleAvatarChange(event: Event): void {
+const handleAvatarChange = (event: Event) => {
     const input = event.target as HTMLInputElement;
-    const file = input.files?.[0] ?? null;
+    const file = input.files?.[0];
 
     clearAvatarPreview();
-    profileForm.avatar = file;
-    profileForm.clearErrors('avatar');
-    profileProtection.clearFeedback();
 
     if (file) {
         avatarPreview.value = URL.createObjectURL(file);
     }
-}
+};
 
-function submitProfile(): void {
-    profileProtection.submit(profileUpdateTarget, {
-        forceFormData: true,
+const removeAvatar = (): void => {
+    avatarDeleteForm.delete(ProfileController.destroyAvatar.url(), {
         preserveScroll: true,
-        onSuccess: () => {
-            profileForm.defaults({
-                name: profileForm.name,
-                email: profileForm.email,
-                avatar: null,
-            });
-            clearAvatarSelection();
-        },
+        onSuccess: clearAvatarPreview,
     });
-}
+};
 
-function removeAvatar(): void {
-    avatarDeleteProtection.submit(ProfileController.destroyAvatar(), {
-        preserveScroll: true,
-        onSuccess: clearAvatarSelection,
-    });
-}
-
-onBeforeUnmount(clearAvatarPreview);
+onBeforeUnmount(() => {
+    clearAvatarPreview();
+});
 </script>
 
 <template>
     <AppLayout :breadcrumbs="breadcrumbItems">
-        <Head :title="t('profile.title')" />
+        <Head title="Profile settings" />
+
+        <h1 class="sr-only">Profile settings</h1>
 
         <SettingsLayout>
-            <Card class="gap-0 overflow-hidden rounded-xl py-0 shadow-none">
-                <CardHeader class="gap-stack border-b p-5 sm:p-6">
-                    <h2 class="text-title">{{ t('profile.title') }}</h2>
-                    <p class="text-muted-foreground">
-                        {{ t('profile.description') }}
-                    </p>
-                </CardHeader>
+            <div class="flex flex-col space-y-6">
+                <Heading
+                    variant="small"
+                    title="Profile information"
+                    description="Update your name, email address, and profile picture"
+                />
 
-                <CardContent class="p-5 sm:p-6">
-                    <form
-                        class="gap-column grid min-w-0"
-                        :aria-busy="profileForm.processing"
-                        @submit.prevent="submitProfile"
-                    >
-                        <FormFeedback
-                            :state="profileProtection.state.value"
-                            :title="
-                                profileForm.processing
-                                    ? t('profile.saving')
-                                    : undefined
-                            "
-                            @retry="submitProfile"
-                        />
-
-                        <fieldset
-                            class="gap-column grid min-w-0"
-                            :disabled="profileForm.processing"
-                        >
-                            <legend class="sr-only">
-                                {{ t('profile.information') }}
-                            </legend>
-
-                            <section
-                                aria-labelledby="profile-picture-title"
-                                class="gap-column grid min-w-0 border-b pb-6"
-                            >
-                                <div class="gap-stack grid">
-                                    <h3
-                                        id="profile-picture-title"
-                                        class="font-semibold"
-                                    >
-                                        {{ t('profile.picture') }}
-                                    </h3>
-                                    <p
-                                        class="text-caption text-muted-foreground"
-                                    >
-                                        {{ t('profile.pictureDescription') }}
-                                    </p>
-                                </div>
-
-                                <div
-                                    class="flex min-w-0 flex-col gap-4 sm:flex-row sm:items-center"
-                                >
-                                    <UserAvatar
-                                        :user="displayedUser"
-                                        size="xl"
-                                        class="ring-border shrink-0 ring-1"
-                                        :label="t('profile.picturePreview')"
+                <Form
+                    v-bind="ProfileController.update.form()"
+                    class="space-y-6"
+                    v-slot="{
+                        errors,
+                        processing,
+                        progress,
+                        recentlySuccessful,
+                    }"
+                >
+                    <div class="grid gap-3">
+                        <Label for="avatar">Profile picture</Label>
+                        <div class="flex items-center gap-4">
+                            <UserAvatar class="size-16" />
+                            <div class="grid flex-1 gap-2">
+                                <div class="flex flex-col gap-2 sm:flex-row">
+                                    <Input
+                                        id="avatar"
+                                        name="avatar"
+                                        type="file"
+                                        accept="image/png,image/jpeg,image/webp"
+                                        @change="handleAvatarChange"
                                     />
-                                    <div class="gap-stack grid min-w-0 flex-1">
-                                        <div class="flex flex-wrap gap-2">
-                                            <Button as-child variant="outline">
-                                                <label
-                                                    for="avatar"
-                                                    class="cursor-pointer"
-                                                >
-                                                    <Camera
-                                                        aria-hidden="true"
-                                                    />
-                                                    {{
-                                                        avatarPreview
-                                                            ? t(
-                                                                  'profile.changePicture',
-                                                              )
-                                                            : t(
-                                                                  'profile.choosePicture',
-                                                              )
-                                                    }}
-                                                </label>
-                                            </Button>
-                                            <Button
-                                                v-if="avatarPreview"
-                                                type="button"
-                                                variant="ghost"
-                                                @click="clearAvatarSelection"
-                                            >
-                                                <RotateCcw aria-hidden="true" />
-                                                {{
-                                                    t('profile.discardPicture')
-                                                }}
-                                            </Button>
-                                            <Button
-                                                v-else-if="canRemoveAvatar"
-                                                type="button"
-                                                variant="ghost"
-                                                :disabled="
-                                                    avatarDeleteForm.processing
-                                                "
-                                                data-test="delete-profile-picture-button"
-                                                @click="removeAvatar"
-                                            >
-                                                <Trash2 aria-hidden="true" />
-                                                {{ t('profile.removePicture') }}
-                                            </Button>
-                                        </div>
-                                        <input
-                                            id="avatar"
-                                            ref="avatarInput"
-                                            name="avatar"
-                                            type="file"
-                                            accept="image/png,image/jpeg,image/webp"
-                                            class="sr-only"
-                                            aria-describedby="avatar-help avatar-error"
-                                            :aria-invalid="
-                                                !!profileForm.errors.avatar
-                                            "
-                                            @change="handleAvatarChange"
-                                        />
-                                        <p
-                                            v-if="profileForm.avatar"
-                                            class="text-caption min-w-0 break-all font-medium"
-                                        >
-                                            {{
-                                                t('profile.selectedPicture', {
-                                                    name: profileForm.avatar
-                                                        .name,
-                                                })
-                                            }}
-                                        </p>
-                                        <p
-                                            id="avatar-help"
-                                            class="text-caption text-muted-foreground"
-                                        >
-                                            {{ t('profile.pictureHelp') }}
-                                        </p>
-                                        <progress
-                                            v-if="profileForm.progress"
-                                            class="h-1 w-full overflow-hidden rounded-full"
-                                            :value="
-                                                profileForm.progress.percentage
-                                            "
-                                            max="100"
-                                        >
-                                            {{
-                                                profileForm.progress.percentage
-                                            }}%
-                                        </progress>
-                                        <InputError
-                                            id="avatar-error"
-                                            :message="profileForm.errors.avatar"
-                                        />
-                                        <FormFeedback
-                                            :state="
-                                                avatarDeleteProtection.state
-                                                    .value
-                                            "
-                                            :title="
-                                                avatarDeleteForm.processing
-                                                    ? t(
-                                                          'profile.removingPicture',
-                                                      )
-                                                    : undefined
-                                            "
-                                            @retry="removeAvatar"
-                                        />
-                                    </div>
-                                </div>
-                            </section>
-
-                            <div class="grid gap-2">
-                                <Label for="name">{{
-                                    t('profile.name')
-                                }}</Label>
-                                <Input
-                                    id="name"
-                                    v-model="profileForm.name"
-                                    name="name"
-                                    required
-                                    autocomplete="name"
-                                    :placeholder="t('profile.namePlaceholder')"
-                                    :aria-invalid="!!profileForm.errors.name"
-                                    aria-describedby="name-error"
-                                />
-                                <InputError
-                                    id="name-error"
-                                    :message="profileForm.errors.name"
-                                />
-                            </div>
-
-                            <div class="grid gap-2">
-                                <Label for="email">{{
-                                    t('profile.email')
-                                }}</Label>
-                                <Input
-                                    id="email"
-                                    v-model="profileForm.email"
-                                    type="email"
-                                    name="email"
-                                    required
-                                    autocomplete="username"
-                                    :placeholder="t('profile.emailPlaceholder')"
-                                    :aria-invalid="!!profileForm.errors.email"
-                                    aria-describedby="email-error"
-                                />
-                                <InputError
-                                    id="email-error"
-                                    :message="profileForm.errors.email"
-                                />
-                            </div>
-
-                            <div
-                                v-if="
-                                    mustVerifyEmail && !user.email_verified_at
-                                "
-                                class="bg-muted/55 rounded-lg border p-4"
-                            >
-                                <p class="text-body text-muted-foreground">
-                                    {{ t('profile.emailUnverified') }}
-                                    <Link
-                                        :href="send()"
-                                        as="button"
-                                        class="text-primary font-medium underline underline-offset-4"
+                                    <Button
+                                        v-if="canRemoveAvatar"
+                                        type="button"
+                                        variant="outline"
+                                        :disabled="avatarDeleteForm.processing"
+                                        data-test="delete-profile-picture-button"
+                                        @click="removeAvatar"
                                     >
-                                        {{ t('profile.resendVerification') }}
-                                    </Link>
-                                </p>
-
-                                <p
-                                    v-if="status === 'verification-link-sent'"
-                                    role="status"
-                                    class="text-success-foreground mt-2 text-sm font-medium"
-                                >
-                                    {{ t('profile.verificationSent') }}
+                                        <Trash2 class="size-4" />
+                                        Remove
+                                    </Button>
+                                </div>
+                                <p class="text-muted-foreground text-sm">
+                                    PNG, JPG, or WebP up to 2 MB.
                                 </p>
                             </div>
+                        </div>
+                        <progress
+                            v-if="progress"
+                            class="h-1 w-full overflow-hidden rounded-full"
+                            :value="progress.percentage"
+                            max="100"
+                        >
+                            {{ progress.percentage }}%
+                        </progress>
+                        <InputError class="mt-1" :message="errors.avatar" />
+                    </div>
 
-                            <div class="flex flex-wrap items-center gap-3">
-                                <Button
-                                    type="submit"
-                                    :disabled="profileForm.processing"
-                                    data-test="update-profile-button"
-                                >
-                                    {{
-                                        profileForm.processing
-                                            ? t('profile.saving')
-                                            : t('profile.save')
-                                    }}
-                                </Button>
-                                <p
-                                    v-if="profileForm.isDirty"
-                                    class="text-caption text-muted-foreground"
-                                >
-                                    {{ t('profile.unsaved') }}
-                                </p>
-                            </div>
-                        </fieldset>
-                    </form>
-                </CardContent>
-            </Card>
+                    <div class="grid gap-2">
+                        <Label for="name">Name</Label>
+                        <Input
+                            id="name"
+                            class="mt-1 block w-full"
+                            name="name"
+                            :default-value="user.name"
+                            required
+                            autocomplete="name"
+                            placeholder="Full name"
+                        />
+                        <InputError class="mt-2" :message="errors.name" />
+                    </div>
+
+                    <div class="grid gap-2">
+                        <Label for="email">Email address</Label>
+                        <Input
+                            id="email"
+                            type="email"
+                            class="mt-1 block w-full"
+                            name="email"
+                            :default-value="user.email"
+                            required
+                            autocomplete="username"
+                            placeholder="Email address"
+                        />
+                        <InputError class="mt-2" :message="errors.email" />
+                    </div>
+
+                    <div v-if="mustVerifyEmail && !user.email_verified_at">
+                        <p class="text-muted-foreground -mt-4 text-sm">
+                            Your email address is unverified.
+                            <Link
+                                :href="send()"
+                                as="button"
+                                class="text-foreground hover:decoration-current! underline decoration-neutral-300 underline-offset-4 transition-colors duration-300 ease-out dark:decoration-neutral-500"
+                            >
+                                Click here to resend the verification email.
+                            </Link>
+                        </p>
+
+                        <div
+                            v-if="status === 'verification-link-sent'"
+                            class="mt-2 text-sm font-medium text-green-600"
+                        >
+                            A new verification link has been sent to your email
+                            address.
+                        </div>
+                    </div>
+
+                    <div class="flex items-center gap-4">
+                        <Button
+                            :disabled="processing"
+                            data-test="update-profile-button"
+                            >Save</Button
+                        >
+
+                        <Transition
+                            enter-active-class="transition ease-in-out"
+                            enter-from-class="opacity-0"
+                            leave-active-class="transition ease-in-out"
+                            leave-to-class="opacity-0"
+                        >
+                            <p
+                                v-show="recentlySuccessful"
+                                class="text-sm text-neutral-600"
+                            >
+                                Saved.
+                            </p>
+                        </Transition>
+                    </div>
+                </Form>
+            </div>
 
             <DeleteUser />
         </SettingsLayout>

resources/js/pages/settings/Security.vue

@@ -1,340 +1,222 @@
 <script setup lang="ts">
-import { Head, useForm } from '@inertiajs/vue3';
+import { Form, Head } from '@inertiajs/vue3';
 import { ShieldCheck } from 'lucide-vue-next';
-import { computed, onUnmounted, ref } from 'vue';
-import { update } from '@/actions/App/Http/Controllers/Settings/SecurityController';
-import AuthFormFeedback from '@/components/AuthFormFeedback.vue';
+import { onUnmounted, ref } from 'vue';
+import SecurityController from '@/actions/App/Http/Controllers/Settings/SecurityController';
+import Heading from '@/components/Heading.vue';
 import InputError from '@/components/InputError.vue';
 import PasswordInput from '@/components/PasswordInput.vue';
 import TwoFactorRecoveryCodes from '@/components/TwoFactorRecoveryCodes.vue';
 import TwoFactorSetupModal from '@/components/TwoFactorSetupModal.vue';
 import { Button } from '@/components/ui/button';
-import { Card, CardContent, CardHeader } from '@/components/ui/card';
-import {
-    Dialog,
-    DialogContent,
-    DialogDescription,
-    DialogFooter,
-    DialogHeader,
-    DialogTitle,
-} from '@/components/ui/dialog';
 import { Label } from '@/components/ui/label';
-import { useFormProtection } from '@/composables/useFormProtection';
-import { useLocalization } from '@/composables/useLocalization';
+import { useTwoFactorAuth } from '@/composables/useTwoFactorAuth';
 import AppLayout from '@/layouts/AppLayout.vue';
 import SettingsLayout from '@/layouts/settings/Layout.vue';
 import { edit } from '@/routes/security/index';
 import { disable, enable } from '@/routes/two-factor';
 import type { BreadcrumbItem } from '@/types';
 
-const props = withDefaults(
-    defineProps<{
-        canManageTwoFactor?: boolean;
-        requiresConfirmation?: boolean;
-        twoFactorEnabled?: boolean;
-    }>(),
-    {
-        canManageTwoFactor: false,
-        requiresConfirmation: false,
-        twoFactorEnabled: false,
-    },
-);
-const { t } = useLocalization();
-const breadcrumbs = computed<BreadcrumbItem[]>(() => [
-    { title: t('navigation.security'), href: edit() },
-]);
-const passwordForm = useForm({
-    current_password: '',
-    password: '',
-    password_confirmation: '',
-}).dontRemember('current_password', 'password', 'password_confirmation');
-const passwordProtection = useFormProtection(passwordForm, {
-    isDirty: () => false,
-});
-const twoFactorForm = useForm({});
-const twoFactorProtection = useFormProtection(twoFactorForm);
-const showSetupModal = ref(false);
-const showDisableDialog = ref(false);
-const setupStarted = ref(false);
+type Props = {
+    canManageTwoFactor?: boolean;
+    mustChangePassword?: boolean;
+    requiresConfirmation?: boolean;
+    status?: string | null;
+    twoFactorEnabled?: boolean;
+};
 
-function savePassword(): void {
-    passwordProtection.submit(update(), {
-        preserveScroll: true,
-        onFinish: () => passwordForm.reset(),
-    });
-}
-function startSetup(): void {
-    if (setupStarted.value) {
-        showSetupModal.value = true;
-        return;
-    }
-    twoFactorProtection.submit(enable(), {
-        preserveScroll: true,
-        onSuccess: () => {
-            setupStarted.value = true;
-            showSetupModal.value = true;
-        },
-    });
-}
-function disableTwoFactor(): void {
-    twoFactorProtection.submit(disable(), {
-        preserveScroll: true,
-        onSuccess: () => {
-            showDisableDialog.value = false;
-            setupStarted.value = false;
-        },
-    });
-}
-function updateDisableDialog(open: boolean): void {
-    if (!twoFactorForm.processing) {
-        showDisableDialog.value = open;
-        twoFactorProtection.clearFeedback();
-    }
-}
-onUnmounted(() => passwordForm.reset());
+withDefaults(defineProps<Props>(), {
+    canManageTwoFactor: false,
+    mustChangePassword: false,
+    requiresConfirmation: false,
+    status: null,
+    twoFactorEnabled: false,
+});
+
+const breadcrumbs: BreadcrumbItem[] = [
+    {
+        title: 'Security settings',
+        href: edit(),
+    },
+];
+
+const { hasSetupData, clearTwoFactorAuthData } = useTwoFactorAuth();
+const showSetupModal = ref<boolean>(false);
+
+onUnmounted(() => clearTwoFactorAuthData());
 </script>
 
 <template>
     <AppLayout :breadcrumbs="breadcrumbs">
-        <Head :title="t('security.title')" />
-        <SettingsLayout>
-            <Card class="gap-0 overflow-hidden rounded-xl py-0 shadow-none">
-                <CardHeader class="gap-stack border-b p-5 sm:p-6">
-                    <h2 class="text-title">
-                        {{ t('security.passwordTitle') }}
-                    </h2>
-                    <p class="text-muted-foreground">
-                        {{ t('security.passwordDescription') }}
-                    </p>
-                </CardHeader>
-                <CardContent class="p-5 sm:p-6">
-                    <form
-                        class="gap-column grid"
-                        :aria-busy="passwordForm.processing"
-                        @submit.prevent="savePassword"
-                    >
-                        <AuthFormFeedback
-                            :state="passwordProtection.state.value"
-                            :response-status="
-                                passwordProtection.responseStatus.value
-                            "
-                            :loading-title="t('security.savingPassword')"
-                            :success-title="t('security.passwordSaved')"
-                            @retry="savePassword"
-                        />
-                        <fieldset
-                            class="gap-column grid min-w-0"
-                            :disabled="passwordForm.processing"
-                        >
-                            <legend class="sr-only">
-                                {{ t('security.passwordTitle') }}
-                            </legend>
-                            <div class="grid gap-2">
-                                <Label for="current_password">{{
-                                    t('security.currentPassword')
-                                }}</Label>
-                                <PasswordInput
-                                    id="current_password"
-                                    v-model="passwordForm.current_password"
-                                    name="current_password"
-                                    required
-                                    autocomplete="current-password"
-                                    :disabled="passwordForm.processing"
-                                    :aria-invalid="
-                                        !!passwordForm.errors.current_password
-                                    "
-                                    aria-describedby="current-password-error"
-                                />
-                                <InputError
-                                    id="current-password-error"
-                                    :message="
-                                        passwordForm.errors.current_password
-                                    "
-                                />
-                            </div>
-                            <div class="grid gap-2">
-                                <Label for="password">{{
-                                    t('security.newPassword')
-                                }}</Label>
-                                <PasswordInput
-                                    id="password"
-                                    v-model="passwordForm.password"
-                                    name="password"
-                                    required
-                                    autocomplete="new-password"
-                                    :disabled="passwordForm.processing"
-                                    :aria-invalid="
-                                        !!passwordForm.errors.password
-                                    "
-                                    aria-describedby="new-password-error"
-                                />
-                                <InputError
-                                    id="new-password-error"
-                                    :message="passwordForm.errors.password"
-                                />
-                            </div>
-                            <div class="grid gap-2">
-                                <Label for="password_confirmation">{{
-                                    t('security.confirmPassword')
-                                }}</Label>
-                                <PasswordInput
-                                    id="password_confirmation"
-                                    v-model="passwordForm.password_confirmation"
-                                    name="password_confirmation"
-                                    required
-                                    autocomplete="new-password"
-                                    :disabled="passwordForm.processing"
-                                    :aria-invalid="
-                                        !!passwordForm.errors
-                                            .password_confirmation
-                                    "
-                                    aria-describedby="password-confirmation-error"
-                                />
-                                <InputError
-                                    id="password-confirmation-error"
-                                    :message="
-                                        passwordForm.errors
-                                            .password_confirmation
-                                    "
-                                />
-                            </div>
-                            <Button
-                                type="submit"
-                                class="justify-self-start"
-                                :loading="passwordForm.processing"
-                                :loading-label="t('security.savingPassword')"
-                                data-test="update-password-button"
-                                >{{ t('security.savePassword') }}</Button
-                            >
-                        </fieldset>
-                    </form>
-                </CardContent>
-            </Card>
+        <Head title="Security settings" />
 
-            <Card
-                v-if="canManageTwoFactor"
-                class="gap-0 overflow-hidden rounded-xl py-0 shadow-none"
+        <h1 class="sr-only">Security settings</h1>
+
+        <SettingsLayout>
+            <div
+                v-if="mustChangePassword || status"
+                class="rounded-xl border border-amber-200 bg-amber-50 px-4 py-3 text-sm text-amber-900 dark:border-amber-900/70 dark:bg-amber-950/40 dark:text-amber-100"
             >
-                <CardHeader class="gap-stack border-b p-5 sm:p-6">
-                    <div
-                        class="flex flex-wrap items-center justify-between gap-3"
-                    >
-                        <h2 class="text-title flex items-center gap-2">
-                            <ShieldCheck class="text-primary size-5" />{{
-                                t('security.twoFactorTitle')
-                            }}
-                        </h2>
-                        <span
-                            class="bg-muted rounded-full px-3 py-1 text-xs font-semibold"
-                            role="status"
-                            >{{
-                                t(
-                                    props.twoFactorEnabled
-                                        ? 'security.enabled'
-                                        : setupStarted
-                                          ? 'security.pending'
-                                          : 'security.disabled',
-                                )
-                            }}</span
-                        >
-                    </div>
-                    <p class="text-muted-foreground">
-                        {{
-                            t(
-                                props.twoFactorEnabled
-                                    ? 'security.enabledDescription'
-                                    : 'security.twoFactorDescription',
-                            )
-                        }}
-                    </p>
-                </CardHeader>
-                <CardContent class="gap-column grid p-5 sm:p-6">
-                    <AuthFormFeedback
-                        v-if="!showDisableDialog"
-                        :state="twoFactorProtection.state.value"
-                        :response-status="
-                            twoFactorProtection.responseStatus.value
-                        "
-                        @retry="
-                            props.twoFactorEnabled
-                                ? (showDisableDialog = true)
-                                : startSetup()
-                        "
-                    />
-                    <Button
-                        v-if="!twoFactorEnabled"
-                        class="justify-self-start"
-                        :loading="twoFactorForm.processing"
-                        @click="startSetup"
-                        >{{
-                            t(
-                                setupStarted
-                                    ? 'security.continueSetup'
-                                    : 'security.enable',
-                            )
-                        }}</Button
-                    >
-                    <template v-else>
-                        <Button
-                            variant="outline"
-                            class="text-destructive justify-self-start"
-                            @click="showDisableDialog = true"
-                            >{{ t('security.disable') }}</Button
-                        >
-                        <TwoFactorRecoveryCodes />
-                    </template>
-                </CardContent>
-            </Card>
-            <TwoFactorSetupModal
-                v-if="canManageTwoFactor"
-                v-model:is-open="showSetupModal"
-                :requires-confirmation="requiresConfirmation"
-                :two-factor-enabled="twoFactorEnabled"
-            />
-            <Dialog
-                :open="showDisableDialog"
-                @update:open="updateDisableDialog"
-            >
-                <DialogContent
-                    :show-close-button="!twoFactorForm.processing"
-                    @escape-key-down="
-                        twoFactorForm.processing && $event.preventDefault()
-                    "
-                    @interact-outside="
-                        twoFactorForm.processing && $event.preventDefault()
-                    "
+                {{
+                    mustChangePassword
+                        ? 'You must change your password before continuing anywhere else in the app.'
+                        : status
+                }}
+            </div>
+
+            <div class="space-y-6">
+                <Heading
+                    variant="small"
+                    title="Update password"
+                    description="Ensure your account is using a long, random password to stay secure"
+                />
+
+                <Form
+                    v-bind="SecurityController.update.form()"
+                    :options="{
+                        preserveScroll: true,
+                    }"
+                    reset-on-success
+                    :reset-on-error="[
+                        'password',
+                        'password_confirmation',
+                        'current_password',
+                    ]"
+                    class="space-y-6"
+                    v-slot="{ errors, processing, recentlySuccessful }"
                 >
-                    <DialogHeader>
-                        <DialogTitle>{{
-                            t('security.disableTitle')
-                        }}</DialogTitle>
-                        <DialogDescription>{{
-                            t('security.disableDescription')
-                        }}</DialogDescription>
-                    </DialogHeader>
-                    <AuthFormFeedback
-                        :state="twoFactorProtection.state.value"
-                        :response-status="
-                            twoFactorProtection.responseStatus.value
-                        "
-                        @retry="disableTwoFactor"
-                    />
-                    <DialogFooter>
-                        <Button
-                            variant="outline"
-                            :disabled="twoFactorForm.processing"
-                            @click="updateDisableDialog(false)"
-                            >{{ t('common.cancel') }}</Button
+                    <div class="grid gap-2">
+                        <Label for="current_password">Current password</Label>
+                        <PasswordInput
+                            id="current_password"
+                            name="current_password"
+                            class="mt-1 block w-full"
+                            autocomplete="current-password"
+                            placeholder="Current password"
+                        />
+                        <InputError :message="errors.current_password" />
+                    </div>
+
+                    <div class="grid gap-2">
+                        <Label for="password">New password</Label>
+                        <PasswordInput
+                            id="password"
+                            name="password"
+                            class="mt-1 block w-full"
+                            autocomplete="new-password"
+                            placeholder="New password"
+                        />
+                        <InputError :message="errors.password" />
+                    </div>
+
+                    <div class="grid gap-2">
+                        <Label for="password_confirmation"
+                            >Confirm password</Label
                         >
+                        <PasswordInput
+                            id="password_confirmation"
+                            name="password_confirmation"
+                            class="mt-1 block w-full"
+                            autocomplete="new-password"
+                            placeholder="Confirm password"
+                        />
+                        <InputError :message="errors.password_confirmation" />
+                    </div>
+
+                    <div class="flex items-center gap-4">
                         <Button
-                            variant="destructive"
-                            :loading="twoFactorForm.processing"
-                            @click="disableTwoFactor"
-                            >{{ t('security.disable') }}</Button
+                            :disabled="processing"
+                            data-test="update-password-button"
                         >
-                    </DialogFooter>
-                </DialogContent>
-            </Dialog>
+                            Save password
+                        </Button>
+
+                        <Transition
+                            enter-active-class="transition ease-in-out"
+                            enter-from-class="opacity-0"
+                            leave-active-class="transition ease-in-out"
+                            leave-to-class="opacity-0"
+                        >
+                            <p
+                                v-show="recentlySuccessful"
+                                class="text-sm text-neutral-600"
+                            >
+                                Saved.
+                            </p>
+                        </Transition>
+                    </div>
+                </Form>
+            </div>
+
+            <div v-if="canManageTwoFactor" class="space-y-6">
+                <Heading
+                    variant="small"
+                    title="Two-factor authentication"
+                    description="Manage your two-factor authentication settings"
+                />
+
+                <div
+                    v-if="!twoFactorEnabled"
+                    class="flex flex-col items-start justify-start space-y-4"
+                >
+                    <p class="text-muted-foreground text-sm">
+                        When you enable two-factor authentication, you will be
+                        prompted for a secure pin during login. This pin can be
+                        retrieved from a TOTP-supported application on your
+                        phone.
+                    </p>
+
+                    <div>
+                        <Button
+                            v-if="hasSetupData"
+                            @click="showSetupModal = true"
+                        >
+                            <ShieldCheck />Continue setup
+                        </Button>
+                        <Form
+                            v-else
+                            v-bind="enable.form()"
+                            @success="showSetupModal = true"
+                            #default="{ processing }"
+                        >
+                            <Button type="submit" :disabled="processing">
+                                Enable 2FA
+                            </Button>
+                        </Form>
+                    </div>
+                </div>
+
+                <div
+                    v-else
+                    class="flex flex-col items-start justify-start space-y-4"
+                >
+                    <p class="text-muted-foreground text-sm">
+                        You will be prompted for a secure, random pin during
+                        login, which you can retrieve from the TOTP-supported
+                        application on your phone.
+                    </p>
+
+                    <div class="relative inline">
+                        <Form v-bind="disable.form()" #default="{ processing }">
+                            <Button
+                                variant="destructive"
+                                type="submit"
+                                :disabled="processing"
+                            >
+                                Disable 2FA
+                            </Button>
+                        </Form>
+                    </div>
+
+                    <TwoFactorRecoveryCodes />
+                </div>
+
+                <TwoFactorSetupModal
+                    v-model:isOpen="showSetupModal"
+                    :requiresConfirmation="requiresConfirmation"
+                    :twoFactorEnabled="twoFactorEnabled"
+                />
+            </div>
         </SettingsLayout>
     </AppLayout>
 </template>

resources/js/pages/teams/Index.vue

@@ -1,204 +1,356 @@
 <script setup lang="ts">
-import { Head } from '@inertiajs/vue3';
-import { Plus, Search, Shield, Users } from 'lucide-vue-next';
-import { computed, ref } from 'vue';
-import FeedbackState from '@/components/FeedbackState.vue';
-import TeamEditorDialog from '@/components/teams/TeamEditorDialog.vue';
-import UserAvatar from '@/components/ui/avatar/UserAvatar.vue';
+import { Form, Head } from '@inertiajs/vue3';
+import { Shield } from 'lucide-vue-next';
+import TeamController from '@/actions/App/Http/Controllers/TeamController';
+import Heading from '@/components/Heading.vue';
+import InputError from '@/components/InputError.vue';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
+import {
+    Card,
+    CardContent,
+    CardDescription,
+    CardHeader,
+    CardTitle,
+} from '@/components/ui/card';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
-import { useLocalization } from '@/composables/useLocalization';
 import AppLayout from '@/layouts/AppLayout.vue';
-import { index } from '@/routes/teams';
+import { index as teamsIndex } from '@/routes/teams';
 import type { BreadcrumbItem, TeamsIndexPageProps } from '@/types';
-import type { TeamEditorTarget } from '@/types/teams';
 
 const props = defineProps<TeamsIndexPageProps>();
-const { t } = useLocalization();
-const search = ref('');
-const target = ref<TeamEditorTarget | null>(null);
-const breadcrumbs = computed<BreadcrumbItem[]>(() => [
-    { title: t('navigation.teams'), href: index() },
-]);
-const visibleTeams = computed(() =>
-    props.teams.filter((team) =>
-        team.name
-            .toLocaleLowerCase()
-            .includes(search.value.trim().toLocaleLowerCase()),
-    ),
-);
+
+const breadcrumbs: BreadcrumbItem[] = [
+    {
+        title: 'Teams',
+        href: teamsIndex(),
+    },
+];
+
+const hasPermission = (
+    permissions: Record<string, string[]>,
+    actorId: number,
+    permission: string,
+) => (permissions[actorId] ?? []).includes(permission);
+
+const permissionsForTeam = (teamId: number): Record<string, string[]> =>
+    props.teamPermissions[teamId] ?? {};
 </script>
 
 <template>
     <AppLayout :breadcrumbs="breadcrumbs">
-        <Head :title="t('navigation.teams')" />
-        <main
-            class="mx-auto flex w-full max-w-7xl flex-1 flex-col gap-6 p-4 sm:p-6 lg:p-8"
-        >
-            <header
+        <Head title="Teams" />
+
+        <div class="flex flex-1 flex-col gap-6 p-4">
+            <div
                 class="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between"
             >
-                <div class="grid min-w-0 gap-2">
-                    <p
-                        class="text-primary text-xs font-semibold uppercase tracking-wider"
-                    >
-                        {{ t('teams.eyebrow') }}
-                    </p>
-                    <h1 class="text-headline-mobile sm:text-headline">
-                        {{ t('navigation.teams') }}
-                    </h1>
-                    <p class="text-muted-foreground max-w-2xl text-sm">
-                        {{ t('teams.description') }}
-                    </p>
-                </div>
-                <Button
-                    v-if="canCreateTeams"
-                    type="button"
-                    class="shrink-0"
-                    @click="target = { kind: 'create' }"
-                    ><Plus class="size-4" aria-hidden="true" />{{
-                        t('teams.create')
-                    }}</Button
-                >
-            </header>
-            <FeedbackState
-                v-if="status"
-                state="success"
-                :title="t('teams.updated')"
-            />
+                <Heading
+                    title="Teams"
+                    description="Create reusable teams, manage memberships, and assign team-scoped permissions to users."
+                />
+
+                <Badge variant="outline" class="gap-1.5 px-3 py-1">
+                    <Shield class="size-3.5" />
+                    {{ canCreateTeams ? 'Global admin' : 'Team-scoped access' }}
+                </Badge>
+            </div>
+
             <div
-                class="bg-card flex flex-col gap-4 rounded-xl border p-4 sm:flex-row sm:items-center sm:justify-between"
+                v-if="status"
+                class="rounded-xl border border-emerald-200 bg-emerald-50 px-4 py-3 text-sm text-emerald-900 dark:border-emerald-900/70 dark:bg-emerald-950/40 dark:text-emerald-100"
             >
-                <div class="flex items-center gap-2">
-                    <Users class="text-primary size-5" aria-hidden="true" />
-                    <h2 class="font-semibold">{{ t('teams.yourTeams') }}</h2>
-                    <Badge variant="secondary">{{ teams.length }}</Badge>
-                </div>
-                <div class="relative sm:w-80">
-                    <Label for="team-search" class="sr-only">{{
-                        t('teams.search')
-                    }}</Label
-                    ><Search
-                        class="text-muted-foreground pointer-events-none absolute left-3 top-3 size-4"
-                        aria-hidden="true"
-                    /><Input
-                        id="team-search"
-                        v-model="search"
-                        type="search"
-                        class="pl-9"
-                        :placeholder="t('teams.search')"
-                    />
+                {{ status }}
+            </div>
+
+            <div
+                class="grid gap-6"
+                :class="
+                    canCreateTeams
+                        ? 'xl:grid-cols-[22rem_minmax(0,1fr)]'
+                        : 'xl:grid-cols-1'
+                "
+            >
+                <Card v-if="canCreateTeams">
+                    <CardHeader>
+                        <CardTitle>Create team</CardTitle>
+                        <CardDescription>
+                            Teams group users so project permissions can be
+                            granted once and inherited by every member.
+                        </CardDescription>
+                    </CardHeader>
+
+                    <CardContent>
+                        <Form
+                            v-bind="TeamController.store.form()"
+                            class="space-y-4"
+                            v-slot="{ errors, processing }"
+                        >
+                            <div class="grid gap-2">
+                                <Label for="name">Team name</Label>
+                                <Input
+                                    id="name"
+                                    name="name"
+                                    required
+                                    autofocus
+                                    placeholder="Platform Team"
+                                />
+                                <InputError :message="errors.name" />
+                            </div>
+
+                            <Button type="submit" :disabled="processing">
+                                Create team
+                            </Button>
+                        </Form>
+                    </CardContent>
+                </Card>
+
+                <div class="grid gap-4">
+                    <Card
+                        v-for="team in teams"
+                        :key="team.id"
+                        class="gap-0 overflow-hidden"
+                    >
+                        <CardHeader class="border-b">
+                            <div
+                                class="flex flex-col gap-3 md:flex-row md:items-start md:justify-between"
+                            >
+                                <div>
+                                    <CardTitle>{{ team.name }}</CardTitle>
+                                    <CardDescription>
+                                        {{ team.users.length }} member{{
+                                            team.users.length === 1 ? '' : 's'
+                                        }}
+                                    </CardDescription>
+                                </div>
+
+                                <div class="flex flex-wrap gap-2">
+                                    <Badge
+                                        v-for="member in team.users"
+                                        :key="member.id"
+                                        variant="secondary"
+                                    >
+                                        {{ member.name }}
+                                    </Badge>
+                                </div>
+                            </div>
+                        </CardHeader>
+
+                        <CardContent class="space-y-6 pt-6">
+                            <Form
+                                v-bind="
+                                    TeamController.updateMembers.form(team.id)
+                                "
+                                class="space-y-4"
+                                v-slot="{ processing }"
+                            >
+                                <div class="grid gap-2">
+                                    <Label :for="`team-members-${team.id}`">
+                                        Members
+                                    </Label>
+                                    <select
+                                        :id="`team-members-${team.id}`"
+                                        name="user_ids[]"
+                                        multiple
+                                        class="border-input bg-background shadow-xs focus-visible:border-ring focus-visible:ring-ring/50 min-h-44 rounded-md border px-3 py-2 text-sm outline-none transition-[color,box-shadow] focus-visible:ring-[3px]"
+                                    >
+                                        <option
+                                            v-for="user in users"
+                                            :key="user.id"
+                                            :value="user.id"
+                                            :selected="
+                                                team.user_ids.includes(user.id)
+                                            "
+                                        >
+                                            {{ user.name }} ({{ user.email }})
+                                        </option>
+                                    </select>
+                                    <p class="text-muted-foreground text-sm">
+                                        Hold Cmd or Ctrl to select multiple
+                                        users.
+                                    </p>
+                                </div>
+
+                                <Button
+                                    type="submit"
+                                    variant="outline"
+                                    :disabled="processing"
+                                >
+                                    Save members
+                                </Button>
+                            </Form>
+
+                            <div class="space-y-4 border-t pt-6">
+                                <div class="space-y-1">
+                                    <h3 class="text-foreground font-medium">
+                                        Team permissions
+                                    </h3>
+                                    <p class="text-muted-foreground text-sm">
+                                        Direct user permissions on this team are
+                                        stored separately from team membership.
+                                    </p>
+                                </div>
+
+                                <div class="overflow-x-auto">
+                                    <table
+                                        class="divide-border min-w-full divide-y text-sm"
+                                    >
+                                        <thead
+                                            class="bg-muted/40 text-muted-foreground text-left"
+                                        >
+                                            <tr>
+                                                <th
+                                                    class="px-4 py-3 font-medium"
+                                                >
+                                                    User
+                                                </th>
+                                                <th
+                                                    class="px-4 py-3 font-medium"
+                                                >
+                                                    Current permissions
+                                                </th>
+                                                <th
+                                                    class="px-4 py-3 text-right font-medium"
+                                                >
+                                                    Action
+                                                </th>
+                                            </tr>
+                                        </thead>
+                                        <tbody class="divide-border divide-y">
+                                            <tr
+                                                v-for="user in users"
+                                                :key="`${team.id}-${user.id}`"
+                                                class="bg-background align-top"
+                                            >
+                                                <td class="px-4 py-4">
+                                                    <div
+                                                        class="text-foreground font-medium"
+                                                    >
+                                                        {{ user.name }}
+                                                    </div>
+                                                    <div
+                                                        class="text-muted-foreground text-xs"
+                                                    >
+                                                        {{ user.email }}
+                                                    </div>
+                                                </td>
+                                                <td class="px-4 py-4">
+                                                    <div
+                                                        class="flex flex-wrap gap-2"
+                                                    >
+                                                        <Badge
+                                                            v-for="option in permissionOptions"
+                                                            v-show="
+                                                                hasPermission(
+                                                                    permissionsForTeam(
+                                                                        team.id,
+                                                                    ),
+                                                                    user.id,
+                                                                    option.value,
+                                                                )
+                                                            "
+                                                            :key="`${team.id}-${user.id}-${option.value}-badge`"
+                                                            variant="secondary"
+                                                        >
+                                                            {{ option.label }}
+                                                        </Badge>
+                                                        <span
+                                                            v-if="
+                                                                (
+                                                                    permissionsForTeam(
+                                                                        team.id,
+                                                                    )[
+                                                                        user.id
+                                                                    ] ?? []
+                                                                ).length === 0
+                                                            "
+                                                            class="text-muted-foreground"
+                                                        >
+                                                            No direct team
+                                                            permissions
+                                                        </span>
+                                                    </div>
+                                                </td>
+                                                <td class="px-4 py-4">
+                                                    <div
+                                                        class="flex justify-end"
+                                                    >
+                                                        <Form
+                                                            v-bind="
+                                                                TeamController.updateUserPermissions.form(
+                                                                    [
+                                                                        team.id,
+                                                                        user.id,
+                                                                    ],
+                                                                )
+                                                            "
+                                                            class="flex flex-wrap justify-end gap-3"
+                                                            v-slot="{
+                                                                processing,
+                                                            }"
+                                                        >
+                                                            <label
+                                                                v-for="option in permissionOptions"
+                                                                :key="`${team.id}-${user.id}-${option.value}`"
+                                                                class="border-border inline-flex items-center gap-2 rounded-lg border px-3 py-2 text-sm"
+                                                            >
+                                                                <input
+                                                                    type="checkbox"
+                                                                    name="permissions[]"
+                                                                    :value="
+                                                                        option.value
+                                                                    "
+                                                                    :checked="
+                                                                        hasPermission(
+                                                                            permissionsForTeam(
+                                                                                team.id,
+                                                                            ),
+                                                                            user.id,
+                                                                            option.value,
+                                                                        )
+                                                                    "
+                                                                    class="border-input text-primary focus:ring-ring size-4 rounded"
+                                                                />
+                                                                <span>
+                                                                    {{
+                                                                        option.label
+                                                                    }}
+                                                                </span>
+                                                            </label>
+
+                                                            <div
+                                                                class="w-full sm:hidden"
+                                                            />
+
+                                                            <Button
+                                                                type="submit"
+                                                                size="sm"
+                                                                variant="outline"
+                                                                :disabled="
+                                                                    processing
+                                                                "
+                                                            >
+                                                                Save
+                                                            </Button>
+                                                        </Form>
+                                                    </div>
+                                                </td>
+                                            </tr>
+                                        </tbody>
+                                    </table>
+                                </div>
+                            </div>
+                        </CardContent>
+                    </Card>
+
+                    <Card v-if="teams.length === 0">
+                        <CardContent class="text-muted-foreground p-6 text-sm">
+                            No teams are available for your current permissions.
+                        </CardContent>
+                    </Card>
                 </div>
             </div>
-            <FeedbackState
-                v-if="teams.length === 0"
-                state="empty"
-                :title="t('teams.empty')"
-                :description="
-                    t(
-                        canCreateTeams
-                            ? 'teams.emptyCreate'
-                            : 'teams.emptyDescription',
-                    )
-                "
-            />
-            <FeedbackState
-                v-else-if="visibleTeams.length === 0"
-                state="empty"
-                :title="t('teams.noResults')"
-                :description="t('teams.noResultsDescription')"
-                ><Button type="button" variant="outline" @click="search = ''">{{
-                    t('teams.clearSearch')
-                }}</Button></FeedbackState
-            >
-            <ul
-                v-else
-                class="grid min-w-0 gap-4 lg:grid-cols-2"
-                :aria-label="t('teams.yourTeams')"
-            >
-                <li
-                    v-for="team in visibleTeams"
-                    :key="team.id"
-                    class="bg-card flex min-w-0 flex-col rounded-xl border"
-                    :data-team-id="team.id"
-                >
-                    <div class="flex min-w-0 items-start gap-3 p-5">
-                        <span
-                            class="bg-accent text-primary flex size-11 shrink-0 items-center justify-center rounded-lg"
-                            ><Users class="size-5" aria-hidden="true"
-                        /></span>
-                        <div class="grid min-w-0 gap-1">
-                            <h3 class="break-words font-semibold">
-                                {{ team.name }}
-                            </h3>
-                            <p class="text-muted-foreground text-sm">
-                                {{
-                                    t('teams.memberCount', {
-                                        count: team.users.length,
-                                    })
-                                }}
-                            </p>
-                        </div>
-                    </div>
-                    <div class="flex-1 px-5 pb-5">
-                        <ul
-                            v-if="team.users.length"
-                            class="flex flex-wrap gap-2"
-                            :aria-label="t('teams.members')"
-                        >
-                            <li
-                                v-for="member in team.users"
-                                :key="member.id"
-                                class="bg-muted/60 flex min-w-0 max-w-full items-center gap-2 rounded-full py-1 pl-1 pr-3"
-                            >
-                                <UserAvatar
-                                    :user="member"
-                                    class="size-6 shrink-0"
-                                /><span class="min-w-0 break-words text-xs">{{
-                                    member.name
-                                }}</span>
-                            </li>
-                        </ul>
-                        <p v-else class="text-muted-foreground text-sm">
-                            {{ t('teams.noMembers') }}
-                        </p>
-                    </div>
-                    <div
-                        class="bg-muted/20 grid gap-2 border-t p-4 sm:grid-cols-2"
-                    >
-                        <Button
-                            type="button"
-                            variant="outline"
-                            :aria-label="
-                                t('teams.manageMembersFor', { name: team.name })
-                            "
-                            @click="target = { kind: 'members', team }"
-                            ><Users class="size-4" aria-hidden="true" />{{
-                                t('teams.manageMembers')
-                            }}</Button
-                        ><Button
-                            type="button"
-                            variant="ghost"
-                            :aria-label="
-                                t('teams.permissionsFor', { name: team.name })
-                            "
-                            @click="target = { kind: 'permissions', team }"
-                            ><Shield class="size-4" aria-hidden="true" />{{
-                                t('teams.permissions')
-                            }}</Button
-                        >
-                    </div>
-                </li>
-            </ul>
-        </main>
-        <TeamEditorDialog
-            :target="target"
-            :users="users"
-            :permission-options="permissionOptions"
-            :team-permissions="teamPermissions"
-            @close="target = null"
-        />
+        </div>
     </AppLayout>
 </template>

resources/js/types/backlog.ts

@@ -1,31 +0,0 @@
-import type { TicketModel } from '@/types/models/ticket-model';
-
-export type BacklogAssigneeFilter = '' | 'unassigned' | number;
-
-export type BacklogFilterState = {
-    assigneeId: BacklogAssigneeFilter;
-    priorityId: '' | number;
-    query: string;
-    statusId: '' | number;
-    typeId: '' | number;
-};
-
-export type BacklogTicketTreeNode = {
-    children: BacklogTicketTreeNode[];
-    matchesFilters: boolean;
-    ticket: TicketModel;
-};
-
-export type BacklogTicketTreeProps = {
-    canEditTickets: boolean;
-    collapsedTicketIds: Set<number>;
-    nodes: BacklogTicketTreeNode[];
-    pendingTicketId: number | null;
-    projectId: number;
-};
-
-export type BacklogTicketTreeEmits = {
-    moveFinish: [ticketId: number];
-    moveStart: [ticketId: number];
-    toggle: [ticketId: number];
-};

resources/js/types/index.ts

@@ -1,6 +1,4 @@
 export * from './auth';
-export * from './backlog';
 export * from './navigation';
 export * from './page-props';
-export * from './ticket-tree';
 export * from './ui';

resources/js/types/models/ticket-field-definition-model.ts

@@ -4,7 +4,6 @@ export type TicketFieldDefinitionModel = {
     label: string;
     position: number;
     project_id: number;
-    ticket_field_values_count?: number;
     created_at: string;
     updated_at: string;
 };

resources/js/types/models/ticket-link-type-model.ts

@@ -4,7 +4,6 @@ export type TicketLinkTypeModel = {
     counterpart_label: string;
     position: number;
     project_id: number;
-    ticket_links_count?: number;
     created_at: string;
     updated_at: string;
 };

resources/js/types/page-props.ts

@@ -117,8 +117,6 @@ export type PermissionOption = {
 
 export type ProjectAccessPageProps = {
     directPermissions: Record<string, string[]>;
-    effectivePermissions: Record<string, string[]>;
-    globalAdminUserIds: number[];
     permissionOptions: PermissionOption[];
     project: ProjectModel;
     status?: string | null;

resources/js/types/project-access.ts

@@ -1,19 +0,0 @@
-export const projectPermissionLabels = {
-    'project:read': 'projectAccess.read',
-    'project:write': 'projectAccess.write',
-    'project:admin': 'projectAccess.admin',
-} as const;
-
-export const projectPermissionDescriptions = {
-    'project:read': 'projectAccess.readHelp',
-    'project:write': 'projectAccess.writeHelp',
-    'project:admin': 'projectAccess.adminHelp',
-} as const;
-
-export type ProjectAccessTarget = {
-    kind: 'user' | 'team';
-    id: number;
-    name: string;
-    permissions: string[];
-    globalAdmin?: boolean;
-};

resources/js/types/project-metadata.ts

@@ -1,23 +0,0 @@
-import type { TicketPriorityModel } from '@/types/models/ticket-priority-model';
-import type { TicketFieldDefinitionModel } from '@/types/models/ticket-field-definition-model';
-import type { TicketLinkTypeModel } from '@/types/models/ticket-link-type-model';
-import type { TicketTypeModel } from '@/types/models/ticket-type-model';
-
-export type MetadataKind = 'type' | 'priority';
-export type MetadataEntry = TicketPriorityModel &
-    Partial<Pick<TicketTypeModel, 'is_parent' | 'tickets_count'>>;
-export type MetadataEditorTarget = { kind: MetadataKind } & (
-    | { action: 'create'; entry?: never }
-    | { action: 'edit' | 'delete'; entry: MetadataEntry }
-);
-
-export type TicketFieldDefinitionEditorTarget =
-    | { action: 'create'; entry?: never }
-    | {
-          action: 'edit' | 'delete';
-          entry: TicketFieldDefinitionModel;
-      };
-
-export type TicketLinkTypeEditorTarget =
-    | { action: 'create'; entry?: never }
-    | { action: 'edit' | 'delete'; entry: TicketLinkTypeModel };

resources/js/types/project-notifications.ts

@@ -1,12 +0,0 @@
-import type { NotificationActionModel } from '@/types/models/notification-action-model';
-
-export type NotificationEditorTarget =
-    | { action: 'create'; entry?: never }
-    | { action: 'edit' | 'delete'; entry: NotificationActionModel };
-
-export type NotificationFilterFormState = {
-    id: number;
-    attribute: string;
-    operator: string;
-    value: string;
-};

resources/js/types/project-workflow.ts

@@ -1,20 +0,0 @@
-import type { BoardColumnModel } from '@/types/models/board-column-model';
-import type { TicketStatusModel } from '@/types/models/ticket-status-model';
-
-export type WorkflowEditorTarget =
-    | { kind: 'column'; action: 'create'; column?: never }
-    | { kind: 'column'; action: 'edit' | 'delete'; column: BoardColumnModel }
-    | {
-          kind: 'status';
-          action: 'create';
-          column: BoardColumnModel | null;
-          status?: never;
-          replacement?: never;
-      }
-    | {
-          kind: 'status';
-          action: 'edit' | 'delete';
-          column: BoardColumnModel | null;
-          status: TicketStatusModel;
-          replacement?: TicketStatusModel;
-      };

resources/js/types/teams.ts

@@ -1,14 +0,0 @@
-import type { PermissionOption } from '@/types';
-import type { TeamModel } from '@/types/models/team-model';
-import type { UserModel } from '@/types/models/user-model';
-
-export type TeamEditorTarget =
-    | { kind: 'create' }
-    | { kind: 'members' | 'permissions'; team: TeamModel };
-
-export type TeamEditorProps = {
-    target: TeamEditorTarget | null;
-    users: UserModel[];
-    permissionOptions: PermissionOption[];
-    teamPermissions: Record<string, Record<string, string[]>>;
-};

resources/js/types/ticket-detail.ts

@@ -1,5 +1,4 @@
 import type { ProjectTicketPageProps } from '@/types/page-props';
-import type { RepositoryConnectionModel } from '@/types/models/repository-connection-model';
 export type TicketDetailHeaderProps = Pick<
     ProjectTicketPageProps,
     'ticket' | 'project' | 'canEditTicket'
@@ -16,10 +15,6 @@ export type TicketDetailContentProps = Pick<
     | 'ticketTypes'
     | 'users'
 >;
-export type TicketDetailBlockerProps = Pick<
-    ProjectTicketPageProps,
-    'ticket' | 'project' | 'canEditTicket'
->;
 export type TicketDetailMetadataProps = Pick<
     ProjectTicketPageProps,
     'ticket' | 'project' | 'canManageProject' | 'ticketFieldDefinitions'
@@ -33,24 +28,6 @@ export type TicketDetailGitProps = Pick<
     | 'repositoryPullRequests'
     | 'suggestedBranchName'
 >;
-export type TicketGitBranchesProps = Pick<
-    ProjectTicketPageProps,
-    | 'ticket'
-    | 'project'
-    | 'canEditTicket'
-    | 'repositoryBranches'
-    | 'suggestedBranchName'
->;
-export type TicketGitPullRequestsProps = Pick<
-    ProjectTicketPageProps,
-    'repositoryPullRequests'
->;
-export type TicketBranchCreateDialogProps = Pick<
-    ProjectTicketPageProps,
-    'ticket' | 'project' | 'suggestedBranchName'
-> & {
-    repositoryConnections: RepositoryConnectionModel[];
-};
 export type TicketDetailRelationshipsProps = Pick<
     ProjectTicketPageProps,
     | 'ticket'

resources/js/types/ticket-presentation.ts

@@ -1,7 +1,6 @@
 import type { TicketModel } from '@/types/models/ticket-model';
 
 export type TicketPresentationProps = {
-    layout?: 'card' | 'list';
     projectId: number;
     showDescription?: boolean;
     showStatus?: boolean;

resources/js/types/ticket-tree.ts

@@ -1,6 +0,0 @@
-import type { TicketTreeNodeModel } from '@/types/models/ticket-tree-node-model';
-
-export type TicketTreeListProps = {
-    nodes: TicketTreeNodeModel[];
-    projectId: number;
-};

tests/Feature/AcceptanceCriteriaChecklistTest.php

@@ -1,19 +0,0 @@
-<?php
-
-namespace Tests\Feature;
-
-use Symfony\Component\Process\Process;
-use Tests\TestCase;
-
-class AcceptanceCriteriaChecklistTest extends TestCase
-{
-    public function test_checklist_preserves_hierarchy_identity_and_accessible_controls(): void
-    {
-        $process = new Process(['node', 'tests/Fixtures/acceptance-criteria.mjs'], base_path());
-        $process->setTimeout(60);
-        $process->run();
-
-        $this->assertTrue($process->isSuccessful(), $process->getOutput().$process->getErrorOutput());
-        $this->assertStringContainsString('Acceptance criteria behavior checks passed.', $process->getOutput());
-    }
-}

tests/Feature/Admin/UserManagementUiTest.php

@@ -1,25 +0,0 @@
-<?php
-
-namespace Tests\Feature\Admin;
-
-use Symfony\Component\Process\Process;
-use Tests\TestCase;
-
-class UserManagementUiTest extends TestCase
-{
-    public function test_user_management_pages_render_responsive_actions_and_protected_forms(): void
-    {
-        $process = new Process(['node', 'tests/Fixtures/user-management.mjs'], base_path());
-        $process->setTimeout(60);
-        $process->run();
-
-        $this->assertTrue(
-            $process->isSuccessful(),
-            $process->getOutput().$process->getErrorOutput(),
-        );
-        $this->assertStringContainsString(
-            'User management rendering checks passed.',
-            $process->getOutput(),
-        );
-    }
-}

tests/Feature/Projects/ProjectAccessTest.php

@@ -1,153 +0,0 @@
-<?php
-
-namespace Tests\Feature\Projects;
-
-use App\Actions\Permissions\PermissionService;
-use App\Enums\Permission;
-use App\Models\Project;
-use App\Models\Team;
-use App\Models\User;
-use Illuminate\Foundation\Testing\RefreshDatabase;
-use Illuminate\Support\Facades\DB;
-use Inertia\Testing\AssertableInertia as Assert;
-use Tests\TestCase;
-
-class ProjectAccessTest extends TestCase
-{
-    use RefreshDatabase;
-
-    public function test_access_summary_matches_existing_permission_rules_and_excludes_other_scopes(): void
-    {
-        $admin = User::factory()->admin()->create();
-        $writer = User::factory()->create();
-        $member = User::factory()->create();
-        $outsider = User::factory()->create();
-        $project = Project::factory()->create();
-        $otherProject = Project::factory()->create();
-        $team = Team::factory()->create();
-        $otherTeam = Team::factory()->create();
-        $team->users()->attach([$writer->id, $member->id]);
-        $otherTeam->users()->attach($writer);
-        $service = app(PermissionService::class);
-        $service->sync($writer, $project, [Permission::ProjectRead]);
-        $service->sync($team, $project, [Permission::ProjectWrite]);
-        $service->sync($otherTeam, $project, [Permission::ProjectRead]);
-        $service->sync($outsider, $otherProject, [Permission::ProjectAdmin]);
-        $service->sync($outsider, null, [Permission::ProjectCreate]);
-        $service->sync($outsider, $team, [Permission::TeamAdmin]);
-
-        $map = $service->projectAccessMap(User::all(), $project);
-        foreach (User::all() as $user) {
-            $expected = array_values(array_filter(Permission::projectAssignable(), fn (Permission $permission): bool => $service->allows($user, $permission, $project)));
-            $this->assertSame(Permission::values($expected), $map['effectivePermissions'][$user->id]);
-        }
-        $this->assertSame([], $map['effectivePermissions'][$outsider->id]);
-        $this->assertSame(['project:read', 'project:write'], $map['effectivePermissions'][$writer->id]);
-        $this->assertSame([$admin->id], $map['globalAdminUserIds']);
-        $this->actingAs($admin)->get(route('projects.access', $project))->assertOk()
-            ->assertInertia(fn (Assert $page) => $page->component('projects/Access')
-                ->where("effectivePermissions.{$writer->id}", ['project:read', 'project:write'])
-                ->where("directPermissions.{$writer->id}", ['project:read'])
-                ->where("teamPermissions.{$team->id}", ['project:write'])
-                ->where('globalAdminUserIds', [$admin->id]));
-    }
-
-    public function test_bulk_access_summary_uses_a_bounded_number_of_queries(): void
-    {
-        $project = Project::factory()->create();
-        User::factory()->create();
-        $service = app(PermissionService::class);
-        $countQueries = function () use ($service, $project): int {
-            $users = User::all();
-            DB::enableQueryLog();
-            DB::flushQueryLog();
-            $service->projectAccessMap($users, $project);
-            $count = count(DB::getQueryLog());
-            DB::disableQueryLog();
-
-            return $count;
-        };
-        $initialCount = $countQueries();
-        $users = User::factory()->count(10)->create();
-        $team = Team::factory()->create();
-        $team->users()->attach($users);
-        $service->sync($team, $project, [Permission::ProjectWrite]);
-        $this->assertSame($initialCount, $countQueries());
-        $this->assertLessThanOrEqual(4, $initialCount);
-    }
-
-    public function test_readers_writers_and_unrelated_admins_cannot_manage_project_access(): void
-    {
-        $project = Project::factory()->create();
-        $other = Project::factory()->create();
-        $member = User::factory()->create();
-        $team = Team::factory()->create();
-        $service = app(PermissionService::class);
-        $service->sync($member, $project, [Permission::ProjectRead]);
-        $service->sync($team, $project, [Permission::ProjectWrite]);
-        foreach ([[], [Permission::ProjectRead], [Permission::ProjectWrite]] as $permissions) {
-            $actor = User::factory()->create();
-            $service->sync($actor, $project, $permissions);
-            $service->sync($actor, $other, [Permission::ProjectAdmin]);
-            $this->actingAs($actor)->get(route('projects.access', $project))->assertForbidden();
-            foreach ([['users', $member], ['teams', $team]] as [$kind, $assignee]) {
-                $this->patch(route("projects.permissions.{$kind}.update", [$project, $assignee]), ['permissions' => ['project:admin']])->assertForbidden();
-            }
-        }
-        $this->assertSame(['project:read'], $service->assignmentMap(User::class, $project)[$member->id]);
-        $this->assertSame(['project:write'], $service->assignmentMap(Team::class, $project)[$team->id]);
-    }
-
-    public function test_invalid_assignments_preserve_both_user_and_team_permissions(): void
-    {
-        $admin = User::factory()->admin()->create();
-        $project = Project::factory()->create();
-        $service = app(PermissionService::class);
-        foreach ([['users', User::factory()->create()], ['teams', Team::factory()->create()]] as [$kind, $assignee]) {
-            $service->sync($assignee, $project, [Permission::ProjectRead]);
-            foreach ([['global:admin'], ['team:admin'], ['unknown'], ['project:read', 'project:read']] as $permissions) {
-                $this->actingAs($admin)->patch(route("projects.permissions.{$kind}.update", [$project, $assignee]), ['permissions' => $permissions])
-                    ->assertSessionHasErrors('permissions.0');
-                $this->assertSame(['project:read'], $service->assignmentMap($assignee::class, $project)[$assignee->id]);
-            }
-        }
-    }
-
-    public function test_clearing_assignments_preserves_access_from_other_sources(): void
-    {
-        $admin = User::factory()->admin()->create();
-        $member = User::factory()->create();
-        $project = Project::factory()->create();
-        $team = Team::factory()->create();
-        $team->users()->attach($member);
-        $service = app(PermissionService::class);
-        $service->sync($member, $project, [Permission::ProjectRead]);
-        $service->sync($team, $project, [Permission::ProjectWrite]);
-        $this->actingAs($admin)->patch(route('projects.permissions.users.update', [$project, $member]), ['permissions' => []])
-            ->assertRedirect(route('projects.access', $project))->assertSessionHasNoErrors();
-        $this->assertTrue($service->allows($member, Permission::ProjectWrite, $project));
-        $service->sync($member, $project, [Permission::ProjectRead]);
-        $this->patch(route('projects.permissions.teams.update', [$project, $team]), ['permissions' => []])
-            ->assertRedirect(route('projects.access', $project))->assertSessionHasNoErrors();
-        $this->assertTrue($service->allows($member, Permission::ProjectRead, $project));
-        $this->assertFalse($service->allows($member, Permission::ProjectWrite, $project));
-    }
-
-    public function test_removing_own_admin_access_redirects_to_projects_for_direct_and_team_grants(): void
-    {
-        $service = app(PermissionService::class);
-        foreach (['users', 'teams'] as $kind) {
-            $actor = User::factory()->create();
-            $project = Project::factory()->create();
-            $assignee = $actor;
-            if ($kind === 'teams') {
-                $assignee = Team::factory()->create();
-                $assignee->users()->attach($actor);
-            }
-            $service->sync($assignee, $project, [Permission::ProjectAdmin]);
-            $this->actingAs($actor)->patch(route("projects.permissions.{$kind}.update", [$project, $assignee]), ['permissions' => []])
-                ->assertRedirect(route('projects.index'))->assertSessionHasNoErrors();
-            $this->assertFalse($service->allows($actor, Permission::ProjectAdmin, $project));
-        }
-    }
-}

tests/Feature/Projects/ProjectAccessUiTest.php

@@ -1,19 +0,0 @@
-<?php
-
-namespace Tests\Feature\Projects;
-
-use Symfony\Component\Process\Process;
-use Tests\TestCase;
-
-class ProjectAccessUiTest extends TestCase
-{
-    public function test_access_overview_renders_sources_empty_states_and_localization(): void
-    {
-        $process = new Process(['node', 'tests/Fixtures/project-access.mjs'], base_path());
-        $process->setTimeout(60);
-        $process->run();
-
-        $this->assertTrue($process->isSuccessful(), $process->getOutput().$process->getErrorOutput());
-        $this->assertStringContainsString('Project access presentation checks passed.', $process->getOutput());
-    }
-}

tests/Feature/Projects/ProjectBacklogTest.php

@@ -71,110 +71,6 @@ class ProjectBacklogTest extends TestCase
             );
     }
 
-    /**
-     * Ensure the backlog payload supports nested tickets and their allowed status moves.
-     */
-    public function test_backlog_includes_nested_tickets_and_allowed_status_moves(): void
-    {
-        $editor = User::factory()->create();
-        $project = Project::factory()->create([
-            'key' => 'TREE',
-        ]);
-
-        app(InitializeProjectTicketMetadata::class)->handle($project);
-
-        $backlogStatus = $project->ticketStatuses()
-            ->whereNull('board_column_id')
-            ->firstOrFail();
-        $boardColumn = BoardColumn::factory()->for($project)->create([
-            'name' => 'Todo',
-            'position' => 1,
-        ]);
-        $boardStatus = TicketStatus::factory()
-            ->for($project)
-            ->for($boardColumn)
-            ->create([
-                'name' => 'Ready',
-                'position' => 1,
-            ]);
-        $backlogStatus->allowedTargetStatuses()->sync([$boardStatus->id]);
-
-        $parentType = $project->ticketTypes()
-            ->where('is_parent', true)
-            ->firstOrFail();
-        $taskType = $project->ticketTypes()
-            ->where('is_parent', false)
-            ->firstOrFail();
-        $priority = $project->ticketPriorities()->firstOrFail();
-
-        $parentTicket = Ticket::factory()->create([
-            'project_id' => $project->id,
-            'sequence_number' => 1,
-            'ticket_key' => 'TREE-1',
-            'ticket_priority_id' => $priority->id,
-            'ticket_status_id' => $backlogStatus->id,
-            'ticket_type_id' => $parentType->id,
-            'title' => 'Parent ticket',
-        ]);
-        $childTicket = Ticket::factory()->create([
-            'parent_ticket_id' => $parentTicket->id,
-            'project_id' => $project->id,
-            'sequence_number' => 2,
-            'ticket_key' => 'TREE-2',
-            'ticket_priority_id' => $priority->id,
-            'ticket_status_id' => $backlogStatus->id,
-            'ticket_type_id' => $taskType->id,
-            'title' => 'Child ticket',
-        ]);
-
-        $this->syncProjectPermissions($project, $editor, ['edit', 'view']);
-
-        $this->actingAs($editor)
-            ->get(route('projects.backlog.index', $project))
-            ->assertOk()
-            ->assertInertia(fn (Assert $page) => $page
-                ->component('projects/Backlog')
-                ->where('canEditTickets', true)
-                ->has('tickets', 2)
-                ->where('tickets.0.id', $childTicket->id)
-                ->where('tickets.0.parent_ticket_id', $parentTicket->id)
-                ->where('tickets.0.ticket_status.allowed_target_statuses.0.id', $boardStatus->id)
-                ->where('tickets.1.id', $parentTicket->id)
-                ->where('tickets.1.parent_ticket_id', null)
-                ->where('tickets.1.ticket_status.allowed_target_statuses.0.id', $boardStatus->id),
-            );
-
-        $this->assertDatabaseHas('tickets', [
-            'id' => $parentTicket->id,
-            'ticket_status_id' => $backlogStatus->id,
-        ]);
-        $this->assertDatabaseHas('tickets', [
-            'id' => $childTicket->id,
-            'parent_ticket_id' => $parentTicket->id,
-            'ticket_status_id' => $backlogStatus->id,
-        ]);
-    }
-
-    /**
-     * Ensure projects without backlog tickets receive an empty collection.
-     */
-    public function test_projects_without_backlog_tickets_receive_an_empty_collection(): void
-    {
-        $viewer = User::factory()->create();
-        $project = Project::factory()->create();
-
-        app(InitializeProjectTicketMetadata::class)->handle($project);
-        $this->syncProjectPermissions($project, $viewer, ['view']);
-
-        $this->actingAs($viewer)
-            ->get(route('projects.backlog.index', $project))
-            ->assertOk()
-            ->assertInertia(fn (Assert $page) => $page
-                ->component('projects/Backlog')
-                ->where('tickets', []),
-            );
-    }
-
     /**
      * Ensure creating tickets requires the project write permission.
      */

tests/Feature/Projects/ProjectBoardSettingsControllerTest.php

@@ -298,79 +298,6 @@ class ProjectBoardSettingsControllerTest extends TestCase
         $this->assertCount(0, $sourceStatus->allowedTargetStatuses()->get());
     }
 
-    /**
-     * Ensure saved outgoing targets reach both consumers without changing the reverse direction.
-     */
-    public function test_saved_transition_subsets_and_empty_targets_are_reflected_in_ticket_and_board_responses(): void
-    {
-        $user = User::factory()->create();
-        $project = Project::factory()->create(['key' => 'CORE']);
-        $this->syncProjectPermissions($project, $user, ['edit']);
-        $column = BoardColumn::factory()->for($project)->create(['position' => 1]);
-        $sourceStatus = TicketStatus::factory()->for($project)->for($column)->create([
-            'name' => 'Progress',
-            'position' => 1,
-        ]);
-        $reviewStatus = TicketStatus::factory()->for($project)->create([
-            'name' => 'Review',
-            'position' => 2,
-        ]);
-        $doneStatus = TicketStatus::factory()->for($project)->create([
-            'name' => 'Done',
-            'position' => 3,
-        ]);
-        $ticket = Ticket::factory()->for($project)->create(['ticket_status_id' => $sourceStatus->id]);
-        $sourceStatus->allowedTargetStatuses()->sync([$reviewStatus->id, $doneStatus->id]);
-        $reviewStatus->allowedTargetStatuses()->sync([$sourceStatus->id]);
-
-        $this->actingAs($user)
-            ->patch(route('projects.settings.board.statuses.transitions.update', [$project, $sourceStatus]), [
-                'allowed_ticket_status_ids' => [$reviewStatus->id],
-            ])
-            ->assertRedirect(route('projects.settings.board', $project))
-            ->assertSessionHasNoErrors();
-
-        $this->assertSame([$reviewStatus->id], $sourceStatus->allowedTargetStatuses()->get()->modelKeys());
-        $this->assertSame([$sourceStatus->id], $reviewStatus->allowedTargetStatuses()->get()->modelKeys());
-
-        $this->withApplicationKey($user)
-            ->getJson(route('api.projects.tickets.status-targets', [$project, $ticket]))
-            ->assertOk()
-            ->assertJsonPath('data.current_status.id', $sourceStatus->id)
-            ->assertJsonCount(1, 'data.target_statuses')
-            ->assertJsonPath('data.target_statuses.0.id', $reviewStatus->id);
-
-        $this->get(route('projects.board.index', $project))
-            ->assertOk()
-            ->assertInertia(fn (Assert $page) => $page
-                ->component('projects/Board')
-                ->where('boardColumns.0.tickets.0.id', $ticket->id)
-                ->has('boardColumns.0.tickets.0.ticket_status.allowed_target_statuses', 1)
-                ->where('boardColumns.0.tickets.0.ticket_status.allowed_target_statuses.0.id', $reviewStatus->id),
-            );
-
-        $this->patch(route('projects.settings.board.statuses.transitions.update', [$project, $sourceStatus]), [
-            'allowed_ticket_status_ids' => [],
-        ])
-            ->assertRedirect(route('projects.settings.board', $project))
-            ->assertSessionHasNoErrors();
-
-        $this->assertCount(0, $sourceStatus->allowedTargetStatuses()->get());
-        $this->assertSame([$sourceStatus->id], $reviewStatus->allowedTargetStatuses()->get()->modelKeys());
-
-        $this->getJson(route('api.projects.tickets.status-targets', [$project, $ticket]))
-            ->assertOk()
-            ->assertJsonPath('data.target_statuses', []);
-
-        $this->get(route('projects.board.index', $project))
-            ->assertOk()
-            ->assertInertia(fn (Assert $page) => $page
-                ->component('projects/Board')
-                ->where('boardColumns.0.tickets.0.id', $ticket->id)
-                ->has('boardColumns.0.tickets.0.ticket_status.allowed_target_statuses', 0),
-            );
-    }
-
     /**
      * Ensure transition updates only accept targets from the same project and never the source status itself.
      */
@@ -445,51 +372,4 @@ class ProjectBoardSettingsControllerTest extends TestCase
             'id' => $backlogStatus->id,
         ]);
     }
-
-    public function test_deleting_a_used_column_preserves_statuses_tickets_and_backlog_order(): void
-    {
-        $user = User::factory()->create();
-        $project = Project::factory()->create();
-        $this->syncProjectPermissions($project, $user, ['edit']);
-        $backlog = TicketStatus::factory()->for($project)->create(['position' => 1]);
-        $column = BoardColumn::factory()->for($project)->create(['position' => 1]);
-        $statuses = TicketStatus::factory()->for($project)->for($column)->count(2)
-            ->sequence(['position' => 1], ['position' => 2])->create();
-        $ticket = Ticket::factory()->for($project)->create(['ticket_status_id' => $statuses[1]->id]);
-        $statuses[0]->allowedTargetStatuses()->sync([$statuses[1]->id]);
-
-        $this->actingAs($user)
-            ->delete(route('projects.settings.board.columns.destroy', [$project, $column]))
-            ->assertRedirect(route('projects.settings.board', $project))
-            ->assertSessionHasNoErrors();
-
-        $this->assertModelMissing($column);
-        $this->assertSame($statuses[1]->id, $ticket->fresh()->ticket_status_id);
-        $this->assertSame([$backlog->id, ...$statuses->modelKeys()], $project->ticketStatuses()->pluck('id')->all());
-        $this->assertSame([1, 2, 3], $project->ticketStatuses()->pluck('position')->all());
-        $this->assertTrue($project->ticketStatuses()->get()->every(fn (TicketStatus $status): bool => $status->board_column_id === null));
-        $this->assertSame([$statuses[1]->id], $statuses[0]->allowedTargetStatuses()->pluck('ticket_statuses.id')->all());
-    }
-
-    public function test_last_column_status_is_protected_and_invalid_position_preserves_order(): void
-    {
-        $user = User::factory()->create();
-        $project = Project::factory()->create();
-        $this->syncProjectPermissions($project, $user, ['edit']);
-        $column = BoardColumn::factory()->for($project)->create(['position' => 1]);
-        $status = TicketStatus::factory()->for($project)->for($column)->create();
-        $ticket = Ticket::factory()->for($project)->create(['ticket_status_id' => $status->id]);
-
-        $this->actingAs($user)->from(route('projects.settings.board', $project))
-            ->delete(route('projects.settings.board.statuses.destroy', [$project, $status]))
-            ->assertSessionHasErrors('ticket_status_id');
-        $this->assertModelExists($status);
-        $this->assertSame($status->id, $ticket->fresh()->ticket_status_id);
-
-        $this->actingAs($user)->from(route('projects.settings.board', $project))
-            ->patch(route('projects.settings.board.columns.update', [$project, $column]), ['name' => 'Invalid move', 'position' => 0])
-            ->assertSessionHasErrors('position');
-        $this->assertSame(1, $column->fresh()->position);
-        $this->assertSame($column->name, $column->fresh()->name);
-    }
 }

tests/Feature/Projects/ProjectBoardSettingsUiTest.php

@@ -1,18 +0,0 @@
-<?php
-
-namespace Tests\Feature\Projects;
-
-use Symfony\Component\Process\Process;
-use Tests\TestCase;
-
-class ProjectBoardSettingsUiTest extends TestCase
-{
-    public function test_workflow_renders_ordered_groups_deletion_protection_and_localization(): void
-    {
-        $process = new Process(['node', 'tests/Fixtures/project-board-settings.mjs'], base_path());
-        $process->setTimeout(60);
-        $process->run();
-        $this->assertTrue($process->isSuccessful(), $process->getOutput().$process->getErrorOutput());
-        $this->assertStringContainsString('Project board settings rendering checks passed.', $process->getOutput());
-    }
-}

tests/Feature/Projects/ProjectGeneralSettingsUiTest.php

@@ -1,18 +0,0 @@
-<?php
-
-namespace Tests\Feature\Projects;
-
-use Symfony\Component\Process\Process;
-use Tests\TestCase;
-
-class ProjectGeneralSettingsUiTest extends TestCase
-{
-    public function test_general_settings_render_setting_sources_confirmations_and_localization(): void
-    {
-        $process = new Process(['node', 'tests/Fixtures/project-general-settings.mjs'], base_path());
-        $process->setTimeout(60);
-        $process->run();
-        $this->assertTrue($process->isSuccessful(), $process->getOutput().$process->getErrorOutput());
-        $this->assertStringContainsString('Project general settings rendering checks passed.', $process->getOutput());
-    }
-}

tests/Feature/Projects/ProjectNotificationSettingsControllerTest.php

@@ -430,66 +430,4 @@ class ProjectNotificationSettingsControllerTest extends TestCase
                 ->missing('notificationActions.0.delivery_url'),
             );
     }
-
-    public function test_editor_accepts_array_filters_and_can_clear_discord_mentions(): void
-    {
-        $user = User::factory()->create();
-        $project = Project::factory()->create();
-        $notificationAction = NotificationAction::factory()->discord()->for($project)->create([
-            'channel_configuration' => ['allowed_mentions' => ['users']],
-            'delivery_url' => 'https://discord.com/api/webhooks/123456/original-secret',
-        ]);
-        $this->syncProjectPermissions($project, $user, ['edit']);
-
-        $this->actingAs($user)
-            ->patch(route('projects.settings.notifications.update', [$project, $notificationAction]), [
-                'name' => 'Paused alerts',
-                'event_type' => NotificationEventType::TicketAssigneeChanged->value,
-                'channel' => NotificationChannel::Discord->value,
-                'enabled' => false,
-                'delivery_url' => null,
-                'message_template' => '$ticket_key: $url',
-                'channel_configuration' => ['allowed_mentions' => []],
-                'filters' => [
-                    ['attribute' => 'ticket.key', 'operator' => 'in', 'value' => ['CORE-1', 'CORE-2']],
-                    ['attribute' => 'actor.name', 'operator' => 'exists', 'value' => null],
-                ],
-            ])
-            ->assertSessionHasNoErrors()
-            ->assertRedirect(route('projects.settings.notifications', $project));
-
-        $notificationAction->refresh();
-        $this->assertFalse($notificationAction->enabled);
-        $this->assertSame(['allowed_mentions' => []], $notificationAction->channel_configuration);
-        $this->assertSame('https://discord.com/api/webhooks/123456/original-secret', $notificationAction->delivery_url);
-        $this->assertSame([
-            ['attribute' => 'ticket.key', 'operator' => 'in', 'value' => ['CORE-1', 'CORE-2']],
-            ['attribute' => 'actor.name', 'operator' => 'exists', 'value' => null],
-        ], $notificationAction->filters);
-    }
-
-    public function test_invalid_editor_update_does_not_change_saved_configuration(): void
-    {
-        $user = User::factory()->create();
-        $project = Project::factory()->create();
-        $notificationAction = NotificationAction::factory()->discord()->for($project)->create();
-        $original = $notificationAction->fresh()->getRawOriginal();
-        $this->syncProjectPermissions($project, $user, ['edit']);
-
-        $this->actingAs($user)
-            ->from(route('projects.settings.notifications', $project))
-            ->patch(route('projects.settings.notifications.update', [$project, $notificationAction]), [
-                'name' => 'Invalid update',
-                'event_type' => NotificationEventType::TicketCreate->value,
-                'channel' => NotificationChannel::Discord->value,
-                'enabled' => false,
-                'delivery_url' => 'invalid-url',
-                'message_template' => '',
-                'channel_configuration' => ['allowed_mentions' => ['unsupported']],
-                'filters' => [['attribute' => 'ticket.key', 'operator' => 'in', 'value' => []]],
-            ])
-            ->assertSessionHasErrors(['delivery_url', 'message_template', 'channel_configuration.allowed_mentions.0', 'filters.0.value']);
-
-        $this->assertSame($original, $notificationAction->fresh()->getRawOriginal());
-    }
 }

tests/Feature/Projects/ProjectNotificationSettingsUiTest.php

@@ -1,19 +0,0 @@
-<?php
-
-namespace Tests\Feature\Projects;
-
-use Symfony\Component\Process\Process;
-use Tests\TestCase;
-
-class ProjectNotificationSettingsUiTest extends TestCase
-{
-    public function test_notification_settings_render_actions_and_serialize_filter_values(): void
-    {
-        $process = new Process(['node', 'tests/Fixtures/project-notification-settings.mjs'], base_path());
-        $process->setTimeout(60);
-        $process->run();
-
-        $this->assertTrue($process->isSuccessful(), $process->getOutput().$process->getErrorOutput());
-        $this->assertStringContainsString('Notification settings checks passed.', $process->getOutput());
-    }
-}