Merge pull request 'KAN-42: Rebuild ticket types, priorities and display settings' (#137) from feature/KAN-42-ticket-types-priorities-display into main

Reviewed-on: #137

.agents/skills/mcp-development/SKILL.md

@@ -0,0 +1,96 @@
+---
+name: mcp-development
+description: "Use this skill for Laravel MCP development only. Trigger when creating or editing MCP tools, resources, prompts, or servers in Laravel projects. Covers: artisan make:mcp-* generators, mcp:inspector, routes/ai.php, Tool/Resource/Prompt classes, schema validation, shouldRegister(), OAuth setup, URI templates, read-only attributes, and MCP debugging. Do not use for non-Laravel MCP projects or generic AI features without MCP."
+license: MIT
+metadata:
+  author: laravel
+---
+
+# MCP Development
+
+## Documentation
+
+Use `search-docs` for detailed Laravel MCP patterns and documentation.
+
+## Basic Usage
+
+Register MCP servers in `routes/ai.php`:
+
+<!-- Register MCP Server -->
+```php
+use Laravel\Mcp\Facades\Mcp;
+
+Mcp::web();
+```
+
+### Creating MCP Primitives
+
+Create MCP tools, resources, prompts, and servers using artisan commands:
+
+```bash
+php artisan make:mcp-tool ToolName        # Create a tool
+
+php artisan make:mcp-resource ResourceName # Create a resource
+
+php artisan make:mcp-prompt PromptName    # Create a prompt
+
+php artisan make:mcp-server ServerName    # Create a server
+
+```
+
+After creating primitives, register them in your server's `$tools`, `$resources`, or `$prompts` properties.
+
+### Tools
+
+<!-- MCP Tool Example -->
+```php
+use Laravel\Mcp\Server\Tool;
+use Laravel\Mcp\Server\Request;
+use Laravel\Mcp\Server\Response;
+
+class MyTool extends Tool
+{
+    public function handle(Request $request): Response
+    {
+        return new Response(['result' => 'success']);
+    }
+}
+```
+
+### Registering Primitives in a Server
+
+Each MCP server must explicitly declare the tools, resources, and prompts it exposes.
+
+<!-- Register Primitives in MCP Server -->
+```php
+use Laravel\Mcp\Server;
+
+class AppServer extends Server
+{
+    protected array $tools = [
+        \App\Mcp\Tools\MyTool::class,
+    ];
+
+    protected array $resources = [
+        \App\Mcp\Resources\MyResource::class,
+    ];
+
+    protected array $prompts = [
+        \App\Mcp\Prompts\MyPrompt::class,
+    ];
+}
+```
+
+## Verification
+
+1. Check `routes/ai.php` for proper registration
+2. Test tool via MCP client
+
+## Common Pitfalls
+
+- Running `mcp:start` command (it hangs waiting for input)
+- Using HTTPS locally with Node-based MCP clients
+- Not using `search-docs` for the latest MCP documentation
+- Not registering MCP server routes in `routes/ai.php`
+- Do not register `ai.php` in `bootstrap.php`; it is registered automatically.
+- OAuth registration supports custom URI schemes (e.g., `cursor://`, `vscode://`) for native desktop clients via `mcp.custom_schemes` config

.dockerignore

@@ -25,7 +25,6 @@
 **/compose.*.y*ml
 !**/composer.json
 !**/composer.lock
-**/Dockerfile*
 **/node_modules
 **/npm-debug.log
 **/obj
@@ -34,16 +33,13 @@
 vendor
 **/.DS_Store
 .editorconfig
-.env.example
-.env.mariadb
-.env.mariadb.example
 .env.production
 LICENSE
 README.md
 
-# Ignore development-related files and directories
+# Runtime-generated data must not become part of an image layer.
-# For development environment, we will use mount bind to mount the source code to the container
+storage/framework/cache/data/*
-# So we don't need to copy the source code to the container for development
+storage/framework/sessions/*
-tests/
+storage/framework/testing/*
-phpunit.xml
+storage/framework/views/*
-phpunit.xml.dist
+storage/logs/*

.env.example

@@ -10,7 +10,7 @@ APP_LOCALE=en
 APP_FALLBACK_LOCALE=en
 APP_FAKER_LOCALE=en_US
 
-LOG_STACK=daily
+LOG_STACK=stderr
 
 # Optional Discord error logging (append `,discord_errors` to LOG_STACK to enable it)
 LOG_DISCORD_WEBHOOK_URL=
@@ -38,6 +38,22 @@ MAIL_ENCRYPTION=tls
 MAIL_FROM_ADDRESS=no-reply@example.com
 MAIL_FROM_NAME="${APP_NAME}"
 
+CACHE_STORE=database
+QUEUE_CONNECTION=database
+SESSION_DRIVER=database
+
 FILESYSTEM_DISK=public
+AVATAR_FILESYSTEM_DISK=public
+AVATAR_URLS_TEMPORARY=false
+AVATAR_URL_EXPIRATION_MINUTES=15
+
+# Production: set AVATAR_FILESYSTEM_DISK=s3 and inject these as runtime secrets.
+AWS_ACCESS_KEY_ID=
+AWS_SECRET_ACCESS_KEY=
+AWS_DEFAULT_REGION=eu-central-1
+AWS_BUCKET=
+AWS_URL=
+AWS_ENDPOINT=
+AWS_USE_PATH_STYLE_ENDPOINT=false
 
 VITE_APP_NAME="${APP_NAME}"

.env.mariadb.example

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

.github/tests/test_and_check_app/action.yml

@@ -0,0 +1,18 @@
+name: test_and_check_app
+description: Build the test image and run all application checks
+
+runs:
+  using: composite
+  steps:
+    - name: Test and check app
+      shell: bash
+      run: |
+        set -Eeuo pipefail
+
+        docker buildx build \
+          --file Dockerfile \
+          --target test \
+          --tag "local/kanbangit-test:${GITHUB_SHA}" \
+          --progress plain \
+          --load \
+          .

.github/workflows/ci_cd.yml

@@ -0,0 +1,147 @@
+name: CI/CD
+
+on:
+  push:
+    branches:
+      - main
+    tags:
+      - "v*"
+  pull_request:
+    branches:
+      - main
+
+permissions:
+  contents: read
+
+env:
+  REGISTRY: git.twyco.de
+
+jobs:
+  preconditions:
+    if: >
+      !(contains(github.event.head_commit.message, '[no-ci]') || contains(github.event.head_commit.message, '[skip-ci]'))
+    runs-on: ubuntu-latest
+    steps:
+      - name: Conditions met
+        run: |
+          echo "Conditions for CI/CD are met. Proceeding with the workflow."
+
+  test_and_check_app:
+    runs-on: ubuntu-latest
+    needs:
+      - preconditions
+    steps:
+      - name: Check out repository
+        uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683
+
+      - name: Run required application checks
+        uses: ./.github/tests/test_and_check_app
+
+  publish:
+    name: Publish immutable image
+    if: >-
+      github.event_name == 'push' &&
+      (github.ref == 'refs/heads/main' || startsWith(github.ref, 'refs/tags/'))
+    needs:
+      - preconditions
+      - test_and_check_app
+    runs-on: ubuntu-latest
+    steps:
+      - name: Check out repository
+        uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683
+        with:
+          fetch-depth: 0
+
+      - name: Validate ref and calculate image name
+        id: image
+        shell: bash
+        run: |
+          set -Eeuo pipefail
+
+          image_path="$(printf '%s' "${GITHUB_REPOSITORY}" | tr '[:upper:]' '[:lower:]')"
+          image="${REGISTRY}/${image_path}"
+
+          case "${GITHUB_REF}" in
+            refs/heads/main)
+              printf -v run_attempt '%03d' "${GITHUB_RUN_ATTEMPT}"
+              tag="main-${GITHUB_RUN_NUMBER}-${run_attempt}-${GITHUB_SHA:0:12}"
+              environment="staging"
+              ;;
+            refs/tags/*)
+              tag="${GITHUB_REF#refs/tags/}"
+
+              if [[ ! "${tag}" =~ ^v(0|[1-9][0-9]*)\.(0|[1-9][0-9]*)\.(0|[1-9][0-9]*)$ ]]; then
+                echo "Production tags must match vMAJOR.MINOR.PATCH." >&2
+                exit 1
+              fi
+
+              git fetch --no-tags origin main:refs/remotes/origin/main
+
+              if ! git merge-base --is-ancestor "${GITHUB_SHA}" origin/main; then
+                echo "Production tag must point to a commit contained in main." >&2
+                exit 1
+              fi
+
+              environment="production"
+              ;;
+            *)
+              echo "Unsupported ref: ${GITHUB_REF}" >&2
+              exit 1
+              ;;
+          esac
+
+          {
+            echo "image=${image}"
+            echo "tag=${tag}"
+            echo "environment=${environment}"
+          } >> "${GITHUB_OUTPUT}"
+
+      - name: Log in to private registry
+        shell: bash
+        env:
+          REGISTRY_USERNAME: ${{ secrets.REGISTRY_USERNAME }}
+          REGISTRY_TOKEN: ${{ secrets.REGISTRY_TOKEN }}
+        run: |
+          set -Eeuo pipefail
+
+          if [[ -z "${REGISTRY_USERNAME}" || -z "${REGISTRY_TOKEN}" ]]; then
+            echo "Registry credentials are missing." >&2
+            exit 1
+          fi
+
+          printf '%s' "${REGISTRY_TOKEN}" |
+            docker login \
+              --username "${REGISTRY_USERNAME}" \
+              --password-stdin \
+              "${REGISTRY}"
+
+      - name: Build and publish runtime image
+        shell: bash
+        env:
+          IMAGE: ${{ steps.image.outputs.image }}
+          IMAGE_TAG: ${{ steps.image.outputs.tag }}
+          DEPLOYMENT_ENVIRONMENT: ${{ steps.image.outputs.environment }}
+        run: |
+          set -Eeuo pipefail
+
+          if [[ "${DEPLOYMENT_ENVIRONMENT}" == "production" ]] &&
+            docker buildx imagetools inspect "${IMAGE}:${IMAGE_TAG}" >/dev/null 2>&1; then
+            echo "Production image ${IMAGE}:${IMAGE_TAG} already exists and will not be overwritten." >&2
+            exit 1
+          fi
+
+          docker buildx build \
+            --file Dockerfile \
+            --target runtime \
+            --label "org.opencontainers.image.created=$(date -u +%Y-%m-%dT%H:%M:%SZ)" \
+            --label "org.opencontainers.image.revision=${GITHUB_SHA}" \
+            --label "org.opencontainers.image.source=${GITHUB_SERVER_URL}/${GITHUB_REPOSITORY}" \
+            --label "de.twyco.environment=${DEPLOYMENT_ENVIRONMENT}" \
+            --tag "${IMAGE}:${IMAGE_TAG}" \
+            --push \
+            .
+
+      - name: Remove registry credentials
+        if: ${{ always() }}
+        shell: bash
+        run: docker logout "${REGISTRY}" >/dev/null 2>&1 || true

.github/workflows/lint.yml

@@ -1,39 +0,0 @@
-name: linter
-
-on:
-  push:
-    branches:
-      - main
-      - staging
-  pull_request:
-
-permissions:
-  contents: write
-
-jobs:
-  quality:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v6
-
-      - name: Setup PHP
-        uses: shivammathur/setup-php@v2
-        with:
-          php-version: '8.4'
-
-      - name: Install Dependencies
-        run: |
-          composer install -q --no-ansi --no-interaction --no-scripts --no-progress --prefer-dist
-          npm install
-
-      - name: Run Pint
-        run: composer lint
-
-      - name: Lint Frontend
-        run: npm run lint
-
-      # - name: Commit Changes
-      #   uses: stefanzweifel/git-auto-commit-action@v7
-      #   with:
-      #     commit_message: fix code style
-      #     commit_options: '--no-verify'

.github/workflows/tests.yml

@@ -1,49 +0,0 @@
-name: tests
-
-on:
-  push:
-    branches:
-      - main
-      - staging
-  pull_request:
-
-jobs:
-  ci:
-    runs-on: ubuntu-latest
-    strategy:
-      matrix:
-        php-version: ['8.4']
-
-    steps:
-      - name: Checkout code
-        uses: actions/checkout@v6
-
-      - name: Setup PHP
-        uses: shivammathur/setup-php@v2
-        with:
-          php-version: ${{ matrix.php-version }}
-          tools: composer:v2
-          coverage: xdebug
-
-      - name: Setup Node
-        uses: actions/setup-node@v4
-        with:
-          node-version: '22'
-
-      - name: Install Node Dependencies
-        run: npm i
-
-      - name: Install Dependencies
-        run: composer install --no-interaction --prefer-dist --optimize-autoloader
-
-      - name: Copy Environment File
-        run: cp .env.example .env
-
-      - name: Generate Application Key
-        run: php artisan key:generate
-
-      - name: Build Assets
-        run: npm run build
-
-      - name: Tests
-        run: ./vendor/bin/phpunit

AGENTS.md

@@ -13,10 +13,10 @@ This application is a Laravel application and its main Laravel ecosystems packag
 - inertiajs/inertia-laravel (INERTIA_LARAVEL) - v2
 - laravel/fortify (FORTIFY) - v1
 - laravel/framework (LARAVEL) - v13
+- laravel/mcp (MCP) - v0
 - laravel/prompts (PROMPTS) - v0
 - laravel/wayfinder (WAYFINDER) - v0
 - laravel/boost (BOOST) - v2
-- laravel/mcp (MCP) - v0
 - laravel/pail (PAIL) - v1
 - laravel/pint (PINT) - v1
 - laravel/sail (SAIL) - v1
@@ -34,7 +34,7 @@ This project has domain-specific skills available. You MUST activate the relevan
 
 - `fortify-development` — ACTIVATE when the user works on authentication in Laravel. This includes login, registration, password reset, email verification, two-factor authentication (2FA/TOTP/QR codes/recovery codes), profile updates, password confirmation, or any auth-related routes and controllers. Activate when the user mentions Fortify, auth, authentication, login, register, signup, forgot password, verify email, 2FA, or references app/Actions/Fortify/, CreateNewUser, UpdateUserProfileInformation, FortifyServiceProvider, config/fortify.php, or auth guards. Fortify is the frontend-agnostic authentication backend for Laravel that registers all auth routes and controllers. Also activate when building SPA or headless authentication, customizing login redirects, overriding response contracts like LoginResponse, or configuring login throttling. Do NOT activate for Laravel Passport (OAuth2 API tokens), Socialite (OAuth social login), or non-auth Laravel features.
 - `laravel-best-practices` — Apply this skill whenever writing, reviewing, or refactoring Laravel PHP code. This includes creating or modifying controllers, models, migrations, form requests, policies, jobs, scheduled commands, service classes, and Eloquent queries. Triggers for N+1 and query performance issues, caching strategies, authorization and security patterns, validation, error handling, queue and job configuration, route definitions, and architectural decisions. Also use for Laravel code reviews and refactoring existing Laravel code to follow best practices. Covers any task involving Laravel backend PHP code patterns.
-- `project-route-structure` — Always apply in this project when creating, moving, or refactoring Laravel route definitions in routes/**/*.php; changing route prefixes, names, middleware, scoped bindings, or route files; or adding frontend-facing endpoints that Wayfinder generates. Documents the KanbanGit route-file layout and grouping conventions.
+- `mcp-development` — Use this skill for Laravel MCP development only. Trigger when creating or editing MCP tools, resources, prompts, or servers in Laravel projects. Covers: artisan make:mcp-* generators, mcp:inspector, routes/ai.php, Tool/Resource/Prompt classes, schema validation, shouldRegister(), OAuth setup, URI templates, read-only attributes, and MCP debugging. Do not use for non-Laravel MCP projects or generic AI features without MCP.
 - `wayfinder-development` — Use this skill for Laravel Wayfinder which auto-generates typed functions for Laravel controllers and routes. ALWAYS use this skill when frontend code needs to call backend routes or controller actions. Trigger when: connecting any React/Vue/Svelte/Inertia frontend to Laravel controllers, routes, building end-to-end features with both frontend and backend, wiring up forms or links to backend endpoints, fixing route-related TypeScript errors, importing from @/actions or @/routes, or running wayfinder:generate. Use Wayfinder route functions instead of hardcoded URLs. Covers: wayfinder() vite plugin, .url()/.get()/.post()/.form(), query params, route model binding, tree-shaking. Do not use for backend-only task
 - `inertia-vue-development` — Develops Inertia.js v2 Vue client-side applications. Activates when creating Vue pages, forms, or navigation; using <Link>, <Form>, useForm, or router; working with deferred props, prefetching, or polling; or when user mentions Vue with Inertia, Vue pages, Vue forms, or Vue navigation.
 - `tailwindcss-development` — Always invoke when the user's message includes 'tailwind' in any form. Also invoke for: building responsive grid layouts (multi-column card grids, product grids), flex/grid page structures (dashboards with sidebars, fixed topbars, mobile-toggle navs), styling UI components (cards, tables, navbars, pricing sections, forms, inputs, badges), adding dark mode variants, fixing spacing or typography, and Tailwind v3/v4 work. The core use case: writing or fixing Tailwind utility classes in HTML templates (Blade, JSX, Vue). Skip for backend PHP logic, database queries, API routes, JavaScript with no HTML/CSS component, CSS file audits, build tool configuration, and vanilla CSS.

Dockerfile

@@ -0,0 +1,111 @@
+ARG COMPOSER_IMAGE=composer:2.9.5@sha256:698d3801b2a622ace460c4743c781282fcbcb733a4cbf8b31c44731e846585e8
+ARG NODE_IMAGE=node:22-bookworm-slim@sha256:d649c27dae7ba0137b3cef5dd75baa422c08dc3d9e3fc0c23dfb172dc3cc6436
+ARG PHP_IMAGE=php:8.4-fpm-bookworm@sha256:c5fb7a0c02f4efe280691910c8b734995fa83598cdcf3115ef5dcb2e4617681c
+
+FROM ${COMPOSER_IMAGE} AS composer_binary
+FROM ${NODE_IMAGE} AS node_binary
+
+FROM ${PHP_IMAGE} AS php_base
+
+RUN apt-get update \
+    && apt-get install -y --no-install-recommends \
+        ca-certificates \
+        curl \
+        gettext-base \
+        git \
+        libfcgi-bin \
+        libfreetype6-dev \
+        libicu-dev \
+        libjpeg62-turbo-dev \
+        libmagickwand-dev \
+        libonig-dev \
+        libpng-dev \
+        libpq-dev \
+        libsqlite3-dev \
+        libssl-dev \
+        libxml2-dev \
+        libzip-dev \
+        nginx \
+        procps \
+        unzip \
+    && docker-php-ext-configure gd --with-freetype --with-jpeg \
+    && docker-php-ext-install -j"$(nproc)" \
+        bcmath \
+        gd \
+        intl \
+        opcache \
+        pcntl \
+        pdo_mysql \
+        pdo_pgsql \
+        pdo_sqlite \
+        pgsql \
+        soap \
+        zip \
+    && pecl install imagick \
+    && docker-php-ext-enable imagick \
+    && rm -rf /var/lib/apt/lists/* /tmp/* /var/tmp/*
+
+COPY --from=composer_binary /usr/bin/composer /usr/local/bin/composer
+
+WORKDIR /var/www
+
+FROM php_base AS build
+
+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 run build
+
+FROM build AS test
+
+RUN cp .env.example .env \
+    && php artisan key:generate\
+    && composer audit --locked --no-interaction \
+    && COMPOSER_ALLOW_SUPERUSER=1 composer ci:check
+
+FROM build AS production_builder
+
+RUN composer install \
+        --classmap-authoritative \
+        --no-dev \
+        --no-interaction \
+        --no-progress \
+        --prefer-dist \
+    && rm -rf node_modules tests phpunit.xml
+
+FROM php_base AS runtime
+
+COPY docker/entrypoint.sh /usr/local/bin/kanbangit-entrypoint
+COPY docker/nginx/nginx.conf.template /etc/nginx/nginx.conf.template
+COPY docker/php-fpm-healthcheck.sh /usr/local/bin/php-fpm-healthcheck
+COPY --from=production_builder --chown=www-data:www-data /var/www /var/www
+
+RUN chmod +x /usr/local/bin/kanbangit-entrypoint /usr/local/bin/php-fpm-healthcheck \
+    && mv "$PHP_INI_DIR/php.ini-production" "$PHP_INI_DIR/php.ini" \
+    && printf '%s\n' \
+        '[global]' \
+        'daemonize = no' \
+        '' \
+        '[www]' \
+        'pm.status_path = /status' \
+        > /usr/local/etc/php-fpm.d/zz-kanbangit.conf \
+    && mkdir -p \
+        /var/www/bootstrap/cache \
+        /var/www/storage/app/public \
+        /var/www/storage/framework/cache \
+        /var/www/storage/framework/sessions \
+        /var/www/storage/framework/testing \
+        /var/www/storage/framework/views \
+        /var/www/storage/logs \
+    && ln -s ../storage/app/public /var/www/public/storage \
+    && chown -R www-data:www-data /var/www/bootstrap/cache /var/www/storage
+
+USER www-data
+
+EXPOSE 8080 9000
+
+ENTRYPOINT ["kanbangit-entrypoint"]
+CMD ["php-fpm"]

app/Actions/Projects/BuildProjectBacklogPayload.php

@@ -47,6 +47,7 @@ class BuildProjectBacklogPayload
             'tickets' => TicketResource::collection(
                 Ticket::query()
                     ->with([
+                        'assignee',
                         'ticketPriority',
                         'ticketStatus.allowedTargetStatuses.boardColumn',
                         'ticketStatus.boardColumn',

app/Actions/Projects/BuildProjectBoardPayload.php

@@ -29,6 +29,7 @@ class BuildProjectBoardPayload
                         'ticketStatuses',
                         'tickets' => fn ($query) => $query
                             ->with([
+                                'assignee',
                                 'ticketPriority',
                                 'ticketStatus.allowedTargetStatuses.boardColumn',
                                 'ticketStatus.boardColumn',

app/Actions/Projects/BuildProjectTicketOptionsPayload.php

@@ -7,9 +7,9 @@ use App\Http\Resources\TicketPriorityResource;
 use App\Http\Resources\TicketReferenceResource;
 use App\Http\Resources\TicketStatusResource;
 use App\Http\Resources\TicketTypeResource;
-use App\Models\Ticket;
 use App\Http\Resources\UserResource;
 use App\Models\Project;
+use App\Models\Ticket;
 use App\Models\User;
 
 class BuildProjectTicketOptionsPayload

app/Actions/Tickets/CreateProjectTicket.php

@@ -19,6 +19,7 @@ class CreateProjectTicket
     public function __construct(
         private readonly BuildTicketCreatedPayload $buildTicketCreatedPayload,
         private readonly CreateTicketWorklogEntry $createTicketWorklogEntry,
+        private readonly SyncProjectTicketFieldValues $syncProjectTicketFieldValues,
     ) {}
 
     /**
@@ -29,7 +30,15 @@ class CreateProjectTicket
      *         text: string
      *     }>,
      *     assignee_user_id?: int|null,
+     *     author_user_id?: int|null,
+     *     blocked_comment?: string|null,
      *     description: string|null,
+     *     field_values?: array<int, array{
+     *         ticket_field_definition_id: int,
+     *         value_number?: float|int|string|null,
+     *         value_user_id?: int|string|null
+     *     }>,
+     *     is_blocked?: bool,
      *     parent_ticket_id?: int|null,
      *     story_points?: int|null,
      *     ticket_priority_id: int,
@@ -50,11 +59,14 @@ class CreateProjectTicket
             $ticketStatusQuery = TicketStatus::query()->where('project_id', $project->id);
 
             $ticketStatus = $ticketStatusQuery->findOrFail(Arr::get($attributes, 'ticket_status_id'));
+            $isBlocked = (bool) Arr::get($attributes, 'is_blocked', false);
 
             $ticket = Ticket::query()->create([
                 'assignee_user_id' => Arr::get($attributes, 'assignee_user_id'),
-                'author_user_id' => $actor?->id,
+                'author_user_id' => Arr::get($attributes, 'author_user_id', $actor?->id),
+                'blocked_comment' => $isBlocked ? Arr::get($attributes, 'blocked_comment') : null,
                 'description' => Arr::get($attributes, 'description'),
+                'is_blocked' => $isBlocked,
                 'parent_ticket_id' => Arr::get($attributes, 'parent_ticket_id'),
                 'project_id' => $project->id,
                 'sequence_number' => $nextSequenceNumber,
@@ -68,6 +80,17 @@ class CreateProjectTicket
 
             AcceptanceCriteriaChecklistMapper::syncTicket($ticket, $acceptanceCriteria);
 
+            $fieldValues = Arr::get($attributes, 'field_values', []);
+
+            if ($fieldValues !== []) {
+                $this->syncProjectTicketFieldValues->handle(
+                    $ticket,
+                    $project->ticketFieldDefinitions()->get()->keyBy('id'),
+                    collect(),
+                    $fieldValues,
+                );
+            }
+
             $occurredAt = CarbonImmutable::now();
 
             if ($actor !== null) {

app/Actions/Tickets/ListAssignedTicketsByVisibleProject.php

@@ -41,8 +41,8 @@ class ListAssignedTicketsByVisibleProject
             ->where('assignee_user_id', $assignee->id)
             ->whereIn('project_id', $visibleProjectIds)
             ->with([
+                'acceptanceCriteria',
                 'assignee',
-                'project',
                 'ticketPriority',
                 'ticketStatus.boardColumn',
                 'ticketType',

app/Actions/Users/UpdateUserAvatar.php

@@ -30,9 +30,10 @@ class UpdateUserAvatar
         $color = $this->colorFor($user);
         $path = sprintf('avatars/generated/%d-%s.svg', $user->id, (string) Str::uuid());
 
-        $stored = Storage::disk('public')->put(
+        $stored = Storage::disk($this->avatarDisk())->put(
             $path,
             $this->svg($this->initials($user->name), $color),
+            ['ContentType' => 'image/svg+xml'],
         );
 
         if (! $stored) {
@@ -53,7 +54,7 @@ class UpdateUserAvatar
     public function upload(User $user, UploadedFile $avatar): User
     {
         $oldPath = $user->avatar_path;
-        $path = $avatar->store('avatars/uploads', 'public');
+        $path = $avatar->store('avatars/uploads', $this->avatarDisk());
 
         if (! is_string($path)) {
             throw new RuntimeException('Uploaded avatar could not be stored.');
@@ -90,7 +91,14 @@ class UpdateUserAvatar
             return;
         }
 
-        Storage::disk('public')->delete($path);
+        Storage::disk($this->avatarDisk())->delete($path);
+    }
+
+    private function avatarDisk(): string
+    {
+        $disk = config('filesystems.avatar_disk', 'public');
+
+        return is_string($disk) && $disk !== '' ? $disk : 'public';
     }
 
     private function initials(string $name): string

app/Console/Commands/CreateAdminUser.php

@@ -8,6 +8,7 @@ use App\Models\User;
 use Illuminate\Console\Attributes\Description;
 use Illuminate\Console\Attributes\Signature;
 use Illuminate\Console\Command;
+use Illuminate\Support\Facades\DB;
 use Illuminate\Support\Facades\Hash;
 
 #[Signature('app:create-admin-user {name=Admin} {email=admin@kanbangit.test} {password=test}')]
@@ -25,20 +26,30 @@ class CreateAdminUser extends Command
      */
     public function handle(): int
     {
-        $user = User::create([
+        DB::beginTransaction();
-            'name' => $this->argument('name'),
-            'email' => $this->argument('email'),
-            'password' => Hash::make($this->argument('password')),
-        ]);
 
-        $this->avatars->generate($user);
+        try {
+            $user = User::create([
+                'name' => $this->argument('name'),
+                'email' => $this->argument('email'),
+                'password' => Hash::make($this->argument('password')),
+            ]);
 
-        $user->permissionAssignments()->create([
+            $this->avatars->generate($user);
-            'permission' => Permission::GlobalAdmin,
-        ]);
 
-        $this->info(sprintf('Admin User created with emil=\'%s\' and password=\'%s\'', $this->argument('email'), $this->argument('password')));
+            $user->permissionAssignments()->create([
+                'permission' => Permission::GlobalAdmin,
+            ]);
 
-        return self::SUCCESS;
+            $this->info(sprintf('Admin User created with emil=\'%s\' and password=\'%s\'', $this->argument('email'), $this->argument('password')));
+            DB::commit();
+
+            return self::SUCCESS;
+        } catch (\Exception $exception) {
+            $this->error('Admin User could not be created: ', $exception->getMessage());
+            DB::rollBack();
+
+            return self::FAILURE;
+        }
     }
 }

app/Http/Controllers/DashboardController.php

@@ -0,0 +1,24 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use App\Actions\Tickets\ListAssignedTicketsByVisibleProject;
+use Illuminate\Http\Request;
+use Inertia\Inertia;
+use Inertia\Response;
+
+class DashboardController extends Controller
+{
+    public function __construct(
+        private readonly ListAssignedTicketsByVisibleProject $listAssignedTicketsByVisibleProject,
+    ) {}
+
+    public function __invoke(Request $request): Response
+    {
+        $user = $request->user();
+
+        return Inertia::render('Dashboard', [
+            'assignedTicketsByProject' => $this->listAssignedTicketsByVisibleProject->handle($user, $user),
+        ]);
+    }
+}

app/Http/Middleware/HandleAppearance.php

@@ -16,7 +16,11 @@ class HandleAppearance
      */
     public function handle(Request $request, Closure $next): Response
     {
-        View::share('appearance', $request->cookie('appearance') ?? 'system');
+        $appearance = $request->cookie('appearance');
+        $appearance = in_array($appearance, ['light', 'dark', 'system'], true) ? $appearance : 'system';
+
+        $request->attributes->set('appearance', $appearance);
+        View::share('appearance', $appearance);
 
         return $next($request);
     }

app/Http/Middleware/HandleInertiaRequests.php

@@ -4,6 +4,7 @@ namespace App\Http\Middleware;
 
 use App\Actions\Permissions\PermissionService;
 use App\Enums\Permission;
+use App\Models\Project;
 use Illuminate\Http\Request;
 use Inertia\Middleware;
 
@@ -46,6 +47,11 @@ class HandleInertiaRequests extends Middleware
         return [
             ...parent::share($request),
             'name' => config('app.name'),
+            'appearance' => $request->attributes->get('appearance', 'system'),
+            'localization' => [
+                'locale' => app()->getLocale(),
+                'timeZone' => config('app.timezone'),
+            ],
             'auth' => [
                 'permissions' => [
                     'canManageTeams' => $user !== null && ($this->permissionService->canManageAnyTeam($user) || $this->permissionService->allows($user, Permission::TeamCreate)),
@@ -55,6 +61,36 @@ class HandleInertiaRequests extends Middleware
                 'user' => $user,
             ],
             'sidebarOpen' => ! $request->hasCookie('sidebar_state') || $request->cookie('sidebar_state') === 'true',
+            'navigation' => fn (): array => [
+                'project' => $this->projectNavigation($request),
+            ],
+        ];
+    }
+
+    /**
+     * @return array{id: int, name: string, key: string, canManage: bool, canCreateTickets: bool}|null
+     */
+    private function projectNavigation(Request $request): ?array
+    {
+        $project = $request->route('project');
+        $user = $request->user();
+
+        if (! $project instanceof Project || $user === null) {
+            return null;
+        }
+
+        $permissions = $this->permissionService->effectivePermissions($user, $project);
+
+        if (! in_array(Permission::ProjectRead, $permissions, true)) {
+            return null;
+        }
+
+        return [
+            'id' => $project->id,
+            'name' => $project->name,
+            'key' => $project->key,
+            'canManage' => in_array(Permission::ProjectAdmin, $permissions, true),
+            'canCreateTickets' => in_array(Permission::ProjectWrite, $permissions, true),
         ];
     }
 }

app/Mcp/Servers/KanbanGitServer.php

@@ -2,9 +2,11 @@
 
 namespace App\Mcp\Servers;
 
+use App\Mcp\Tools\CreateTicket;
 use App\Mcp\Tools\GetTicket;
 use App\Mcp\Tools\ListMyAssignedTickets;
 use App\Mcp\Tools\ListTicketsByStatus;
+use App\Mcp\Tools\ListTicketTypes;
 use App\Mcp\Tools\MoveTicketStatus;
 use App\Mcp\Tools\UpdateTicketAssignee;
 use App\Mcp\Tools\UpdateTicketDescription;
@@ -15,7 +17,7 @@ use Laravel\Mcp\Server\Attributes\Version;
 
 #[Name('KanbanGit MCP')]
 #[Version('0.1.0')]
-#[Instructions('Use these tools to read and update KanbanGit tickets with the authenticated application key owner permissions. Prefer stable IDs when available, especially ticket_id and ticket_status_id.')]
+#[Instructions('Use these tools to read, create, and update KanbanGit tickets with the authenticated application key owner permissions. Prefer stable IDs when available, especially project_id, ticket_id, ticket_type_id, and ticket_status_id. Use list_ticket_types to discover the available ticket types in a project. Use create_ticket with parent_ticket_id to create a child ticket.')]
 class KanbanGitServer extends Server
 {
     protected array $tools = [
@@ -25,6 +27,8 @@ class KanbanGitServer extends Server
         UpdateTicketDescription::class,
         UpdateTicketAssignee::class,
         MoveTicketStatus::class,
+        CreateTicket::class,
+        ListTicketTypes::class,
     ];
 
     protected array $resources = [

app/Mcp/Support/KanbanGitMcp.php

@@ -120,6 +120,24 @@ class KanbanGitMcp
         return $project;
     }
 
+    /**
+     * @throws AuthorizationException
+     */
+    public function projectForWrite(User $user, int $projectId): Project
+    {
+        $project = Project::query()->find($projectId);
+
+        if ($project === null) {
+            throw ValidationException::withMessages([
+                'project_id' => 'Project was not found.',
+            ]);
+        }
+
+        $this->ensureCanWrite($user, $project);
+
+        return $project;
+    }
+
     /**
      * @param  array<string, mixed>  $validated
      * @return Collection<int, TicketStatus>|Response
@@ -189,10 +207,12 @@ class KanbanGitMcp
     public function ticketPayload(Ticket $ticket): array
     {
         $ticket->load([
+            'acceptanceCriteria',
             'assignee',
             'author',
             'fieldValues.ticketFieldDefinition',
             'fieldValues.userValue',
+            'parentTicket',
             'project',
             'ticketPriority',
             'ticketStatus.boardColumn',

app/Mcp/Tools/CreateTicket.php

@@ -0,0 +1,169 @@
+<?php
+
+namespace App\Mcp\Tools;
+
+use App\Actions\Permissions\PermissionService;
+use App\Actions\Tickets\CreateProjectTicket;
+use App\Actions\Tickets\Support\AcceptanceCriteriaChecklistMapper;
+use App\Enums\Permission;
+use App\Mcp\Support\KanbanGitMcp;
+use App\Models\Project;
+use App\Models\Ticket;
+use App\Models\User;
+use Illuminate\Contracts\JsonSchema\JsonSchema;
+use Illuminate\JsonSchema\Types\Type;
+use Illuminate\Support\Arr;
+use Illuminate\Validation\Rule;
+use Illuminate\Validation\ValidationException;
+use Laravel\Mcp\Request;
+use Laravel\Mcp\Response;
+use Laravel\Mcp\ResponseFactory;
+use Laravel\Mcp\Server\Attributes\Description;
+use Laravel\Mcp\Server\Attributes\Name;
+use Laravel\Mcp\Server\Tool;
+use Laravel\Mcp\Server\Tools\Annotations\IsDestructive;
+
+#[Name('create_ticket')]
+#[Description('Create a ticket with all editable ticket fields, including its type, initial status, priority, assignee, author, description, story points, acceptance criteria, blocked state, and custom field values. Set parent_ticket_id to create a child of an existing ticket in the same project whose type allows children. Requires project write permission; overriding the author requires project admin permission. Ticket IDs, keys, sequence numbers, timestamps, and worklog entries are generated automatically.')]
+#[IsDestructive(false)]
+class CreateTicket extends Tool
+{
+    public function __construct(
+        private readonly KanbanGitMcp $kanbanGitMcp,
+        private readonly CreateProjectTicket $createProjectTicket,
+        private readonly PermissionService $permissionService,
+    ) {}
+
+    public function handle(Request $request): Response|ResponseFactory
+    {
+        $projectInput = $request->validate([
+            'project_id' => ['required', 'integer'],
+        ]);
+
+        $user = $this->kanbanGitMcp->user($request);
+        $project = $this->kanbanGitMcp->projectForWrite($user, (int) Arr::get($projectInput, 'project_id'));
+        $validated = $request->validate([
+            'title' => ['required', 'string', 'max:255'],
+            'description' => ['nullable', 'string'],
+            'ticket_type_id' => ['required', 'integer', Rule::exists('ticket_types', 'id')->where('project_id', $project->id)],
+            'ticket_status_id' => ['required', 'integer', Rule::exists('ticket_statuses', 'id')->where('project_id', $project->id)],
+            'ticket_priority_id' => ['required', 'integer', Rule::exists('ticket_priorities', 'id')->where('project_id', $project->id)],
+            'parent_ticket_id' => ['nullable', 'integer', Rule::exists('tickets', 'id')->where('project_id', $project->id)],
+            'assignee_user_id' => ['nullable', 'integer', Rule::exists('users', 'id')],
+            'author_user_id' => ['nullable', 'integer', Rule::exists('users', 'id')],
+            'story_points' => ['nullable', 'integer', 'min:0'],
+            'is_blocked' => ['sometimes', 'boolean'],
+            'blocked_comment' => ['nullable', 'string'],
+            'acceptance_criteria' => ['nullable', 'array', 'list'],
+            'acceptance_criteria.*' => ['array:text,checked,indent'],
+            'acceptance_criteria.*.text' => ['required', 'string'],
+            'acceptance_criteria.*.checked' => ['sometimes', 'boolean'],
+            'acceptance_criteria.*.indent' => ['sometimes', 'integer', 'min:0', 'max:'.AcceptanceCriteriaChecklistMapper::MAX_INDENT_LEVEL],
+            'field_values' => ['sometimes', 'array', 'list'],
+            'field_values.*' => ['array:ticket_field_definition_id,value_number,value_user_id'],
+            'field_values.*.ticket_field_definition_id' => [
+                'required', 'integer', 'distinct',
+                Rule::exists('ticket_field_definitions', 'id')->where('project_id', $project->id),
+            ],
+            'field_values.*.value_number' => ['nullable', 'numeric'],
+            'field_values.*.value_user_id' => ['nullable', 'integer', Rule::exists('users', 'id')],
+        ]);
+
+        $this->validateTicketConstraints($project, $user, $validated);
+
+        $ticket = $this->createProjectTicket->handle($project, $validated, $user);
+
+        return Response::structured([
+            'data' => $this->kanbanGitMcp->ticketPayload($ticket->fresh()),
+            'meta' => [
+                'message' => "{$ticket->ticket_key} was created.",
+            ],
+        ]);
+    }
+
+    /**
+     * @param  array<string, mixed>  $validated
+     */
+    private function validateTicketConstraints(Project $project, User $user, array $validated): void
+    {
+        $errors = [];
+        $parentTicketId = Arr::get($validated, 'parent_ticket_id');
+
+        if ($parentTicketId !== null) {
+            $parentTicket = Ticket::query()
+                ->where('project_id', $project->id)
+                ->with('ticketType')
+                ->find($parentTicketId);
+
+            if (! $parentTicket?->ticketType?->is_parent) {
+                $errors['parent_ticket_id'] = 'Only tickets with a parent-enabled type can be selected as a parent.';
+            }
+        }
+
+        if (Arr::get($validated, 'is_blocked', false) && blank(Arr::get($validated, 'blocked_comment'))) {
+            $errors['blocked_comment'] = 'Blocked tickets require a blocker comment.';
+        }
+
+        if (
+            Arr::exists($validated, 'author_user_id')
+            && (int) Arr::get($validated, 'author_user_id') !== $user->id
+            && ! $this->permissionService->allows($user, Permission::ProjectAdmin, $project)
+        ) {
+            $errors['author_user_id'] = 'Only project admins can change the author.';
+        }
+
+        $fieldValues = Arr::get($validated, 'field_values', []);
+
+        if ($fieldValues !== []) {
+            $fieldDefinitions = $project->ticketFieldDefinitions()->get()->keyBy('id');
+
+            foreach ($fieldValues as $index => $fieldValue) {
+                $fieldDefinition = $fieldDefinitions->get((int) Arr::get($fieldValue, 'ticket_field_definition_id'));
+                $incompatibleValue = $fieldDefinition->field_type === 'user' ? 'value_number' : 'value_user_id';
+
+                if (Arr::get($fieldValue, $incompatibleValue) !== null) {
+                    $errors["field_values.{$index}.{$incompatibleValue}"] = 'The value must match the custom field type.';
+                }
+            }
+        }
+
+        if ($errors !== []) {
+            throw ValidationException::withMessages($errors);
+        }
+    }
+
+    /**
+     * @return array<string, Type>
+     */
+    public function schema(JsonSchema $schema): array
+    {
+        return [
+            'project_id' => $schema->integer()->description('Project ID.')->required(),
+            'title' => $schema->string()->max(255)->description('Ticket title.')->required(),
+            'description' => $schema->string()->nullable()->description('Ticket description.'),
+            'ticket_type_id' => $schema->integer()->description('Ticket type ID belonging to the project. Explicitly selects the type, including types that allow child tickets.')->required(),
+            'ticket_status_id' => $schema->integer()->description('Initial ticket status ID belonging to the project.')->required(),
+            'ticket_priority_id' => $schema->integer()->description('Ticket priority ID belonging to the project.')->required(),
+            'parent_ticket_id' => $schema->integer()->nullable()->description('Existing parent ticket ID in the same project. Its type must allow children. Omit or pass null for a top-level ticket.'),
+            'assignee_user_id' => $schema->integer()->nullable()->description('User ID to assign. Omit or pass null to leave unassigned.'),
+            'author_user_id' => $schema->integer()->nullable()->description('Defaults to the application key owner when omitted. Only project admins may choose another author or pass null for no author.'),
+            'story_points' => $schema->integer()->min(0)->nullable()->description('Non-negative story point estimate.'),
+            'is_blocked' => $schema->boolean()->default(false)->description('Whether the ticket is blocked. Requires a nonblank blocked_comment when true.'),
+            'blocked_comment' => $schema->string()->nullable()->description('Blocker reason. Stored only when is_blocked is true.'),
+            'acceptance_criteria' => $schema->array()->nullable()
+                ->items($schema->object([
+                    'text' => $schema->string()->description('Checklist item text.')->required(),
+                    'checked' => $schema->boolean()->default(false),
+                    'indent' => $schema->integer()->min(0)->max(AcceptanceCriteriaChecklistMapper::MAX_INDENT_LEVEL)->default(0),
+                ])->withoutAdditionalProperties())
+                ->description('Ordered acceptance checklist. Indent 0 is a root item; larger values nest under preceding items.'),
+            'field_values' => $schema->array()
+                ->items($schema->object([
+                    'ticket_field_definition_id' => $schema->integer()->description('Custom field definition ID belonging to the project. Each definition may appear once.')->required(),
+                    'value_number' => $schema->number()->nullable()->description('Value for a numeric field.'),
+                    'value_user_id' => $schema->integer()->nullable()->description('User ID for a user field.'),
+                ])->withoutAdditionalProperties())
+                ->description('Custom field values. Supply the value matching each definition type; omit or pass null for an empty value.'),
+        ];
+    }
+}

app/Mcp/Tools/ListTicketTypes.php

@@ -0,0 +1,56 @@
+<?php
+
+namespace App\Mcp\Tools;
+
+use App\Http\Resources\ProjectResource;
+use App\Http\Resources\TicketTypeResource;
+use App\Mcp\Support\KanbanGitMcp;
+use Illuminate\Contracts\JsonSchema\JsonSchema;
+use Illuminate\JsonSchema\Types\Type;
+use Illuminate\Support\Arr;
+use Laravel\Mcp\Request;
+use Laravel\Mcp\Response;
+use Laravel\Mcp\ResponseFactory;
+use Laravel\Mcp\Server\Attributes\Description;
+use Laravel\Mcp\Server\Attributes\Name;
+use Laravel\Mcp\Server\Tool;
+use Laravel\Mcp\Server\Tools\Annotations\IsReadOnly;
+
+#[Name('list_ticket_types')]
+#[Description('List all ticket types in a visible project in their configured order, including IDs, names, and is_parent. Use a returned ID as ticket_type_id when creating a ticket. Types with is_parent=true allow tickets of that type to have child tickets; set parent_ticket_id on create_ticket to attach a child to an existing parent ticket.')]
+#[IsReadOnly]
+class ListTicketTypes extends Tool
+{
+    public function __construct(
+        private readonly KanbanGitMcp $kanbanGitMcp,
+    ) {}
+
+    public function handle(Request $request): Response|ResponseFactory
+    {
+        $validated = $request->validate([
+            'project_id' => ['required', 'integer'],
+        ]);
+
+        $user = $this->kanbanGitMcp->user($request);
+        $project = $this->kanbanGitMcp->projectForRead($user, (int) Arr::get($validated, 'project_id'));
+
+        return Response::structured([
+            'data' => [
+                'project' => ProjectResource::make($project)->resolve(),
+                'ticket_types' => TicketTypeResource::collection($project->ticketTypes()->get())->resolve(),
+            ],
+        ]);
+    }
+
+    /**
+     * @return array<string, Type>
+     */
+    public function schema(JsonSchema $schema): array
+    {
+        return [
+            'project_id' => $schema->integer()
+                ->description('Project ID. Requires permission to view this project.')
+                ->required(),
+        ];
+    }
+}

app/Models/BoardColumn.php

@@ -16,6 +16,7 @@ class BoardColumn extends Model
 {
     /** @use HasFactory<BoardColumnFactory> */
     use HasFactory;
+
     use SyncsProjectTemplateOwnership;
 
     protected static function booted(): void

app/Models/NotificationAction.php

@@ -31,6 +31,7 @@ class NotificationAction extends Model
 {
     /** @use HasFactory<NotificationActionFactory> */
     use HasFactory;
+
     use SyncsProjectTemplateOwnership;
 
     /**

app/Models/RepositoryConnection.php

@@ -26,6 +26,7 @@ class RepositoryConnection extends Model
 {
     /** @use HasFactory<RepositoryConnectionFactory> */
     use HasFactory;
+
     use SyncsProjectTemplateOwnership;
 
     /**

app/Models/TicketFieldDefinition.php

@@ -23,6 +23,7 @@ class TicketFieldDefinition extends Model
 
     /** @use HasFactory<TicketFieldDefinitionFactory> */
     use HasFactory;
+
     use SyncsProjectTemplateOwnership;
 
     protected static function booted(): void

app/Models/TicketLinkType.php

@@ -15,6 +15,7 @@ class TicketLinkType extends Model
 {
     /** @use HasFactory<TicketLinkTypeFactory> */
     use HasFactory;
+
     use SyncsProjectTemplateOwnership;
 
     protected static function booted(): void

app/Models/TicketStatus.php

@@ -17,6 +17,7 @@ class TicketStatus extends Model
 {
     /** @use HasFactory<TicketStatusFactory> */
     use HasFactory;
+
     use SyncsProjectTemplateOwnership;
 
     protected static function booted(): void

app/Models/TicketType.php

@@ -15,6 +15,7 @@ class TicketType extends Model
 {
     /** @use HasFactory<TicketTypeFactory> */
     use HasFactory;
+
     use SyncsProjectTemplateOwnership;
 
     protected static function booted(): void

app/Models/User.php

@@ -77,12 +77,28 @@ class User extends Authenticatable
     protected function avatar(): Attribute
     {
         return Attribute::get(
-            fn (): ?string => filled($this->avatar_path)
+            fn (): ?string => $this->avatarUrl(),
-                ? Storage::disk('public')->url($this->avatar_path)
-                : null,
         );
     }
 
+    private function avatarUrl(): ?string
+    {
+        if (blank($this->avatar_path)) {
+            return null;
+        }
+
+        $diskName = config('filesystems.avatar_disk', 'public');
+        $disk = Storage::disk(is_string($diskName) && $diskName !== '' ? $diskName : 'public');
+
+        if ((bool) config('filesystems.avatar_urls_temporary', false)) {
+            $expirationMinutes = max(1, (int) config('filesystems.avatar_url_expiration_minutes', 15));
+
+            return $disk->temporaryUrl($this->avatar_path, now()->addMinutes($expirationMinutes));
+        }
+
+        return $disk->url($this->avatar_path);
+    }
+
     public function permissionAssignments(): MorphMany
     {
         return $this->morphMany(PermissionAssignment::class, 'assignee');

boost.json

@@ -9,6 +9,7 @@
     "skills": [
         "fortify-development",
         "laravel-best-practices",
+        "mcp-development",
         "wayfinder-development",
         "inertia-vue-development",
         "tailwindcss-development"

bootstrap/app.php

@@ -17,6 +17,8 @@ return Application::configure(basePath: dirname(__DIR__))
         health: '/up',
     )
     ->withMiddleware(function (Middleware $middleware): void {
+        $middleware->trustProxies(at: '*');
+
         $middleware->encryptCookies(except: ['appearance', 'sidebar_state']);
 
         $middleware->web(append: [
@@ -31,5 +33,5 @@ return Application::configure(basePath: dirname(__DIR__))
         ]);
     })
     ->withExceptions(function (Exceptions $exceptions): void {
-        //
+        $exceptions->dontFlash(['api_token']);
     })->create();

composer.json

@@ -12,10 +12,11 @@
         "php": "^8.4",
         "inertiajs/inertia-laravel": "^2.0",
         "laravel/fortify": "^1.34",
-        "laravel/framework": "^13.0",
+        "laravel/framework": "^v13.26.1",
         "laravel/mcp": "^0.6",
         "laravel/tinker": "^3.0",
         "laravel/wayfinder": "^0.1.14",
+        "league/flysystem-aws-s3-v3": "^3.0",
         "scalar/laravel": "^0.2.1"
     },
     "require-dev": {
@@ -46,15 +47,15 @@
             "@php -r \"file_exists('.env') || copy('.env.example', '.env');\"",
             "@php artisan key:generate",
             "@php artisan migrate --force",
-            "npm install",
+            "pnpm install",
-            "npm run build"
+            "pnpm run build"
         ],
         "dev": [
             "Composer\\Config::disableProcessTimeout",
-            "npx concurrently -c \"#93c5fd,#c4b5fd,#fb7185,#fdba74\" \"php artisan serve\" \"php artisan queue:listen --tries=1 --timeout=0\" \"php artisan pail --timeout=0\" \"npm run dev\" --names=server,queue,logs,vite --kill-others"
+            "@php artisan dev"
         ],
         "dev:ssr": [
-            "npm run build:ssr",
+            "pnpm run build:ssr",
             "Composer\\Config::disableProcessTimeout",
             "npx concurrently -c \"#93c5fd,#c4b5fd,#fb7185,#fdba74\" \"php artisan serve\" \"php artisan queue:listen --tries=1\" \"php artisan pail --timeout=0\" \"php artisan inertia:start-ssr\" --names=server,queue,logs,ssr --kill-others"
         ],
@@ -66,9 +67,9 @@
         ],
         "ci:check": [
             "Composer\\Config::disableProcessTimeout",
-            "npm run lint:check",
+            "pnpm audit --audit-level=high",
-            "npm run format:check",
+            "pnpm run lint:check",
-            "npm run types:check",
+            "pnpm run types:check",
             "@test"
         ],
         "test": [

config/filesystems.php

@@ -15,6 +15,12 @@ return [
 
     'default' => env('FILESYSTEM_DISK', 'local'),
 
+    'avatar_disk' => env('AVATAR_FILESYSTEM_DISK', env('FILESYSTEM_DISK', 'public')),
+
+    'avatar_urls_temporary' => env('AVATAR_URLS_TEMPORARY', false),
+
+    'avatar_url_expiration_minutes' => env('AVATAR_URL_EXPIRATION_MINUTES', 15),
+
     /*
     |--------------------------------------------------------------------------
     | Filesystem Disks

docker-compose.yml

@@ -1,33 +1,38 @@
 services:
   web:
     container_name: kanbangit-web
+    image: kanbangit-app:local
     build:
       context: .
-      dockerfile: ./docker/nginx/Dockerfile
+      dockerfile: Dockerfile
+      target: runtime
+    command: nginx
     restart: unless-stopped
     ports:
-      - "8080:80"
+      - "8080:8080"
-    volumes:
-      - kanbangit-storage:/var/www/storage:ro
-      - kanbangit-public-assets:/var/www/public/build:ro
     env_file:
       - .env.production
+    environment:
+      PHP_FPM_UPSTREAM: php-fpm:9000
     networks:
       - kanbangit-web
+    healthcheck:
+      test: ["CMD", "curl", "--fail", "--silent", "http://127.0.0.1:8080/up"]
+      interval: 10s
+      timeout: 5s
+      retries: 3
     depends_on:
       php-fpm:
         condition: service_healthy
 
   php-fpm:
     container_name: kanbangit-php-fpm
+    image: kanbangit-app:local
     build:
       context: .
-      dockerfile: ./docker/php-fpm/Dockerfile
+      dockerfile: Dockerfile
-      target: production
+      target: runtime
     restart: unless-stopped
-    volumes:
-      - kanbangit-storage:/var/www/storage
-      - kanbangit-public-assets:/var/www/public/build
     env_file:
       - .env.production
     networks:
@@ -42,6 +47,23 @@ services:
       mariadb:
         condition: service_healthy
 
+  worker:
+    container_name: kanbangit-worker
+    image: kanbangit-app:local
+    build:
+      context: .
+      dockerfile: Dockerfile
+      target: runtime
+    command: php artisan queue:work --sleep=3 --tries=3 --timeout=60 --max-time=3600
+    restart: unless-stopped
+    env_file:
+      - .env.production
+    networks:
+      - kanbangit-db
+    depends_on:
+      mariadb:
+        condition: service_healthy
+
   mariadb:
     container_name: kanbangit-db
     image: mariadb:11.4
@@ -65,5 +87,3 @@ networks:
 
 volumes:
   mariadb-data-production:
-  kanbangit-storage:
-  kanbangit-public-assets:

docker/entrypoint.sh

@@ -0,0 +1,26 @@
+#!/bin/sh
+set -eu
+
+if [ "${1:-}" = "nginx" ]; then
+    : "${PHP_FPM_UPSTREAM:=127.0.0.1:9000}"
+    export PHP_FPM_UPSTREAM
+
+    envsubst '${PHP_FPM_UPSTREAM}' \
+        < /etc/nginx/nginx.conf.template \
+        > /tmp/nginx.conf
+
+    exec nginx -c /tmp/nginx.conf -g 'daemon off;'
+fi
+
+mkdir -p \
+    bootstrap/cache \
+    storage/framework/cache \
+    storage/framework/sessions \
+    storage/framework/testing \
+    storage/framework/views \
+    storage/logs
+
+php artisan config:cache --no-ansi
+php artisan route:cache --no-ansi
+
+exec "$@"

docker/nginx/Dockerfile

@@ -1,20 +0,0 @@
-FROM php:8.4-cli-bookworm AS builder
-RUN apt-get update && apt-get install -y --no-install-recommends \
-    curl ca-certificates git unzip \
-    && rm -rf /var/lib/apt/lists/*
-RUN curl -fsSL https://deb.nodesource.com/setup_20.x | bash - \
-    && apt-get update && apt-get install -y --no-install-recommends nodejs \
-    && rm -rf /var/lib/apt/lists/*
-RUN curl -sS https://getcomposer.org/installer | php -- \
-    --install-dir=/usr/local/bin --filename=composer
-WORKDIR /var/www
-COPY . /var/www
-RUN composer install --no-dev --prefer-dist --no-interaction --no-progress --optimize-autoloader
-RUN npm ci && npm run build
-
-FROM nginx:alpine
-COPY ./docker/nginx/nginx.conf /etc/nginx/nginx.conf
-COPY --from=builder /var/www/public /var/www/public
-WORKDIR /var/www/public
-EXPOSE 80
-CMD ["nginx", "-g", "daemon off;"]

docker/nginx/nginx.conf

@@ -1,33 +0,0 @@
-events {
-    worker_connections  1024;
-}
-http {
-    include       /etc/nginx/mime.types;
-    default_type  application/octet-stream;
-    sendfile        on;
-    keepalive_timeout  65;
-    client_max_body_size 100m;
-
-    server {
-        listen 80;
-        server_name localhost;
-        root /var/www/public;
-        index index.php index.html;
-        location / {
-            try_files $uri $uri/ /index.php?$query_string;
-        }
-         location ^~ /storage/ {
-            alias /var/www/storage/app/public/;
-            try_files $uri =404;
-            access_log off;
-            expires 7d;
-            add_header Cache-Control "public";
-        }
-        location ~ \.php$ {
-            fastcgi_pass php-fpm:9000;
-            fastcgi_index index.php;
-            fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
-            include fastcgi_params;
-        }
-    }
-}

docker/nginx/nginx.conf.template

@@ -0,0 +1,58 @@
+pid /tmp/nginx.pid;
+error_log /dev/stderr warn;
+
+events {
+    worker_connections 1024;
+}
+
+http {
+    include /etc/nginx/mime.types;
+    default_type application/octet-stream;
+
+    access_log /dev/stdout;
+    client_body_temp_path /tmp/client_body;
+    proxy_temp_path /tmp/proxy;
+    fastcgi_temp_path /tmp/fastcgi;
+    uwsgi_temp_path /tmp/uwsgi;
+    scgi_temp_path /tmp/scgi;
+
+    sendfile on;
+    keepalive_timeout 65;
+    client_max_body_size 3m;
+
+    server {
+        listen 8080;
+        server_name _;
+        root /var/www/public;
+        index index.php;
+
+        location = /nginx-health {
+            access_log off;
+            default_type text/plain;
+            return 200 'ok';
+        }
+
+        location / {
+            try_files $uri $uri/ /index.php?$query_string;
+        }
+
+        location = /index.php {
+            include /etc/nginx/fastcgi_params;
+            fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
+            fastcgi_param HTTP_PROXY '';
+            fastcgi_param HTTP_X_FORWARDED_FOR $http_x_forwarded_for;
+            fastcgi_param HTTP_X_FORWARDED_HOST $http_x_forwarded_host;
+            fastcgi_param HTTP_X_FORWARDED_PORT $http_x_forwarded_port;
+            fastcgi_param HTTP_X_FORWARDED_PROTO $http_x_forwarded_proto;
+            fastcgi_pass ${PHP_FPM_UPSTREAM};
+        }
+
+        location ~ \.php$ {
+            return 404;
+        }
+
+        location ~ /\. {
+            deny all;
+        }
+    }
+}

docker/php-fpm-healthcheck.sh

@@ -0,0 +1,7 @@
+#!/bin/sh
+set -eu
+
+SCRIPT_NAME=/status \
+SCRIPT_FILENAME=/status \
+REQUEST_METHOD=GET \
+cgi-fcgi -bind -connect 127.0.0.1:9000 2>/dev/null | grep -q '^pool:'

docker/php-fpm/Dockerfile

@@ -1,66 +0,0 @@
-FROM php:8.4-fpm AS builder
-RUN apt-get update && apt-get install -y --no-install-recommends \
-    curl \
-    unzip \
-    libpq-dev \
-    libonig-dev \
-    libssl-dev \
-    libxml2-dev \
-    libcurl4-openssl-dev \
-    libicu-dev \
-    libzip-dev \
-    libmagickwand-dev \
-    libpng-dev \
-    libjpeg-dev \
-    libfreetype6-dev \
-    && docker-php-ext-install -j$(nproc) \
-    pdo_mysql \
-    pdo_pgsql \
-    pgsql \
-    opcache \
-    intl \
-    zip \
-    bcmath \
-    soap \
-    && docker-php-ext-configure gd --with-jpeg --with-freetype \
-    && docker-php-ext-install -j$(nproc) gd \
-    && pecl install imagick \
-    && docker-php-ext-enable imagick \
-    && apt-get autoremove -y && apt-get clean && rm -rf /var/lib/apt/lists/* /tmp/* /var/tmp/*
-WORKDIR /var/www
-COPY . /var/www
-RUN curl -sS https://getcomposer.org/installer | php -- --install-dir=/usr/local/bin --filename=composer \
-    && composer install --no-dev --optimize-autoloader --no-interaction --no-progress --prefer-dist
-FROM php:8.4-fpm AS production
-RUN apt-get update && apt-get install -y --no-install-recommends \
-    libpq-dev \
-    libicu-dev \
-    libzip-dev \
-    libfcgi-bin \
-    procps \
-    libmagickwand-dev \
-    && apt-get autoremove -y && apt-get clean && rm -rf /var/lib/apt/lists/* /tmp/* /var/tmp/*
-RUN curl -o /usr/local/bin/php-fpm-healthcheck \
-    https://raw.githubusercontent.com/renatomefi/php-fpm-healthcheck/master/php-fpm-healthcheck \
-    && chmod +x /usr/local/bin/php-fpm-healthcheck
-COPY ./docker/php-fpm/entrypoint.sh /usr/local/bin/entrypoint.sh
-RUN chmod +x /usr/local/bin/entrypoint.sh
-COPY ./storage /var/www/storage-init
-COPY --from=builder /usr/local/lib/php/extensions/ /usr/local/lib/php/extensions/
-COPY --from=builder /usr/local/etc/php/conf.d/ /usr/local/etc/php/conf.d/
-COPY --from=builder /usr/local/bin/docker-php-ext-* /usr/local/bin/
-RUN mv "$PHP_INI_DIR/php.ini-production" "$PHP_INI_DIR/php.ini"
-RUN printf '%s\n' \
-'[global]' \
-'daemonize = no' \
-'' \
-'[www]' \
-'pm.status_path = /status' \
-> /usr/local/etc/php-fpm.d/zz-docker.conf
-COPY --from=builder /var/www /var/www
-WORKDIR /var/www
-RUN chown -R www-data:www-data /var/www
-USER www-data
-ENTRYPOINT ["/usr/local/bin/entrypoint.sh"]
-EXPOSE 9000
-CMD ["php-fpm"]

docker/php-fpm/entrypoint.sh

@@ -1,11 +0,0 @@
-#!/bin/sh
-set -e
-if [ ! "$(ls -A /var/www/storage)" ]; then
-  echo "Initializing storage directory..."
-  cp -R /var/www/storage-init/. /var/www/storage
-  chown -R www-data:www-data /var/www/storage
-fi
-rm -rf /var/www/storage-init
-php artisan config:cache
-php artisan route:cache
-exec "$@"

eslint.config.mjs

@@ -25,6 +25,7 @@ const prettierOptions = {
 const eslintConfig = [
     {
         ignores: [
+            'bootstrap/ssr/**',
             '**/dist/**',
             'node_modules/**',
             '.github/**',
@@ -37,7 +38,10 @@ const eslintConfig = [
             'bootstrap/cache/**',
             'public/build/**',
             'public/hot',
+            'resources/js/actions/**',
             'resources/js/components/ui/**',
+            'resources/js/routes/**',
+            'resources/js/wayfinder/**',
             'resources/views/mail/**',
         ],
     },

package.json

@@ -2,6 +2,13 @@
     "$schema": "https://www.schemastore.org/package.json",
     "private": true,
     "type": "module",
+    "devEngines": {
+        "packageManager": {
+            "name": "pnpm",
+            "version": "11.26.0+sha512.fc0e2bf890b9f983611f1ab68c0637bce914390653699f83c1a78b005ed25f2c81e77920c8fd8eee2ecf0b58b28cdcb00a84d97f69bcf7c56b2f344710238664",
+            "onFail": "error"
+        }
+    },
     "scripts": {
         "build": "vite build",
         "build:ssr": "vite build && vite build --ssr",
@@ -39,6 +46,7 @@
         "vue-tsc": "^2.2.4"
     },
     "dependencies": {
+        "@inertiajs/core": "2.3.18",
         "@inertiajs/vue3": "^2.3.7",
         "@vueuse/core": "^12.8.2",
         "class-variance-authority": "^0.7.1",

phpunit.xml

@@ -20,6 +20,8 @@
     <php>
         <env name="APP_ENV" value="testing"/>
         <env name="APP_MAINTENANCE_DRIVER" value="file"/>
+        <env name="AVATAR_FILESYSTEM_DISK" value="public"/>
+        <env name="AVATAR_URLS_TEMPORARY" value="false"/>
         <env name="BCRYPT_ROUNDS" value="4"/>
         <env name="BROADCAST_CONNECTION" value="null"/>
         <env name="CACHE_STORE" value="array"/>

pnpm-workspace.yaml

@@ -0,0 +1,4 @@
+minimumReleaseAge: 10080
+allowBuilds:
+  unrs-resolver: true
+  vue-demi: true

public/fonts/inter/LICENSE.txt

@@ -0,0 +1,92 @@
+Copyright (c) 2016 The Inter Project Authors (https://github.com/rsms/inter)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded,
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION AND CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

resources/css/app.css

@@ -1,56 +1,98 @@
 @import 'tailwindcss';
-
 @import 'tw-animate-css';
+@import './theme.css';
 
 @source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
 @source '../../storage/framework/views/*.php';
+@source not '../../bootstrap/ssr';
 
-@custom-variant dark (&:is(.dark *));
+@custom-variant dark (&:where(.dark, .dark *));
+
+@font-face {
+    font-family: Inter;
+    font-style: normal;
+    font-weight: 100 900;
+    font-display: swap;
+    src: url('/fonts/inter/InterVariable.woff2') format('woff2');
+}
+
+@font-face {
+    font-family: Inter;
+    font-style: italic;
+    font-weight: 100 900;
+    font-display: swap;
+    src: url('/fonts/inter/InterVariable-Italic.woff2') format('woff2');
+}
 
 @theme inline {
-    --font-sans:
+    --font-sans: Inter, ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
-        Instrument Sans, ui-sans-serif, system-ui, sans-serif,
-        'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
-        'Noto Color Emoji';
 
-    --radius-lg: var(--radius);
+    --radius-sm: 0.125rem;
-    --radius-md: calc(var(--radius) - 2px);
+    --radius-md: var(--radius);
-    --radius-sm: calc(var(--radius) - 4px);
+    --radius-lg: 0.5rem;
+    --radius-xl: 0.75rem;
+
+    --spacing-page: 1.5rem;
+    --spacing-column: 1rem;
+    --spacing-card: 0.75rem;
+    --spacing-stack: 0.5rem;
+    --spacing-control: 2.75rem;
+
+    --text-headline: 1.5rem;
+    --text-headline--line-height: 2rem;
+    --text-headline--font-weight: 600;
+    --text-headline--letter-spacing: -0.02em;
+    --text-headline-mobile: 1.25rem;
+    --text-headline-mobile--line-height: 1.75rem;
+    --text-headline-mobile--font-weight: 600;
+    --text-headline-mobile--letter-spacing: -0.02em;
+    --text-title: 1.125rem;
+    --text-title--line-height: 1.5rem;
+    --text-title--font-weight: 600;
+    --text-title--letter-spacing: -0.01em;
+    --text-body: 0.875rem;
+    --text-body--line-height: 1.25rem;
+    --text-caption: 0.8125rem;
+    --text-caption--line-height: 1.125rem;
+    --text-label: 0.6875rem;
+    --text-label--line-height: 1rem;
+    --text-label--font-weight: 700;
+    --text-label--letter-spacing: 0.05em;
+
+    --shadow-card-hover: 0 4px 12px rgb(0 0 0 / 0.08);
 
     --color-background: var(--background);
     --color-foreground: var(--foreground);
-
     --color-card: var(--card);
     --color-card-foreground: var(--card-foreground);
-
     --color-popover: var(--popover);
     --color-popover-foreground: var(--popover-foreground);
-
     --color-primary: var(--primary);
     --color-primary-foreground: var(--primary-foreground);
-
     --color-secondary: var(--secondary);
     --color-secondary-foreground: var(--secondary-foreground);
-
     --color-muted: var(--muted);
     --color-muted-foreground: var(--muted-foreground);
-
     --color-accent: var(--accent);
     --color-accent-foreground: var(--accent-foreground);
-
     --color-destructive: var(--destructive);
     --color-destructive-foreground: var(--destructive-foreground);
-
     --color-border: var(--border);
     --color-input: var(--input);
     --color-ring: var(--ring);
-
+    --color-brand: var(--brand);
+    --color-brand-foreground: var(--brand-foreground);
+    --color-success: var(--success);
+    --color-success-foreground: var(--success-foreground);
+    --color-warning: var(--warning);
+    --color-warning-foreground: var(--warning-foreground);
+    --color-info: var(--info);
+    --color-info-foreground: var(--info-foreground);
     --color-chart-1: var(--chart-1);
     --color-chart-2: var(--chart-2);
     --color-chart-3: var(--chart-3);
     --color-chart-4: var(--chart-4);
     --color-chart-5: var(--chart-5);
-
     --color-sidebar: var(--sidebar-background);
     --color-sidebar-foreground: var(--sidebar-foreground);
     --color-sidebar-primary: var(--sidebar-primary);
@@ -61,112 +103,35 @@
     --color-sidebar-ring: var(--sidebar-ring);
 }
 
-/*
-  The default border color has changed to `currentColor` in Tailwind CSS v4,
-  so we've added these compatibility styles to make sure everything still
-  looks the same as it did with Tailwind CSS v3.
-
-  If we ever want to remove these styles, we need to add an explicit border
-  color utility to any element that depends on these defaults.
-*/
-@layer base {
-    *,
-    ::after,
-    ::before,
-    ::backdrop,
-    ::file-selector-button {
-        border-color: var(--color-gray-200, currentColor);
-    }
-}
-
-@layer utilities {
-    body,
-    html {
-        --font-sans:
-            'Instrument Sans', ui-sans-serif, system-ui, sans-serif,
-            'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
-            'Noto Color Emoji';
-    }
-}
-
-:root {
-    --background: hsl(0 0% 100%);
-    --foreground: hsl(0 0% 3.9%);
-    --card: hsl(0 0% 100%);
-    --card-foreground: hsl(0 0% 3.9%);
-    --popover: hsl(0 0% 100%);
-    --popover-foreground: hsl(0 0% 3.9%);
-    --primary: hsl(0 0% 9%);
-    --primary-foreground: hsl(0 0% 98%);
-    --secondary: hsl(0 0% 92.1%);
-    --secondary-foreground: hsl(0 0% 9%);
-    --muted: hsl(0 0% 96.1%);
-    --muted-foreground: hsl(0 0% 45.1%);
-    --accent: hsl(0 0% 96.1%);
-    --accent-foreground: hsl(0 0% 9%);
-    --destructive: hsl(0 84.2% 60.2%);
-    --destructive-foreground: hsl(0 0% 98%);
-    --border: hsl(0 0% 92.8%);
-    --input: hsl(0 0% 89.8%);
-    --ring: hsl(0 0% 3.9%);
-    --chart-1: hsl(12 76% 61%);
-    --chart-2: hsl(173 58% 39%);
-    --chart-3: hsl(197 37% 24%);
-    --chart-4: hsl(43 74% 66%);
-    --chart-5: hsl(27 87% 67%);
-    --radius: 0.5rem;
-    --sidebar-background: hsl(0 0% 98%);
-    --sidebar-foreground: hsl(240 5.3% 26.1%);
-    --sidebar-primary: hsl(0 0% 10%);
-    --sidebar-primary-foreground: hsl(0 0% 98%);
-    --sidebar-accent: hsl(0 0% 94%);
-    --sidebar-accent-foreground: hsl(0 0% 30%);
-    --sidebar-border: hsl(0 0% 91%);
-    --sidebar-ring: hsl(217.2 91.2% 59.8%);
-    --sidebar: hsl(0 0% 98%);
-}
-
-.dark {
-    --background: hsl(0 0% 3.9%);
-    --foreground: hsl(0 0% 98%);
-    --card: hsl(0 0% 3.9%);
-    --card-foreground: hsl(0 0% 98%);
-    --popover: hsl(0 0% 3.9%);
-    --popover-foreground: hsl(0 0% 98%);
-    --primary: hsl(0 0% 98%);
-    --primary-foreground: hsl(0 0% 9%);
-    --secondary: hsl(0 0% 14.9%);
-    --secondary-foreground: hsl(0 0% 98%);
-    --muted: hsl(0 0% 16.08%);
-    --muted-foreground: hsl(0 0% 63.9%);
-    --accent: hsl(0 0% 14.9%);
-    --accent-foreground: hsl(0 0% 98%);
-    --destructive: hsl(0 84% 60%);
-    --destructive-foreground: hsl(0 0% 98%);
-    --border: hsl(0 0% 14.9%);
-    --input: hsl(0 0% 14.9%);
-    --ring: hsl(0 0% 83.1%);
-    --chart-1: hsl(220 70% 50%);
-    --chart-2: hsl(160 60% 45%);
-    --chart-3: hsl(30 80% 55%);
-    --chart-4: hsl(280 65% 60%);
-    --chart-5: hsl(340 75% 55%);
-    --sidebar-background: hsl(0 0% 7%);
-    --sidebar-foreground: hsl(0 0% 95.9%);
-    --sidebar-primary: hsl(360, 100%, 100%);
-    --sidebar-primary-foreground: hsl(0 0% 100%);
-    --sidebar-accent: hsl(0 0% 15.9%);
-    --sidebar-accent-foreground: hsl(240 4.8% 95.9%);
-    --sidebar-border: hsl(0 0% 15.9%);
-    --sidebar-ring: hsl(217.2 91.2% 59.8%);
-    --sidebar: hsl(240 5.9% 10%);
-}
-
 @layer base {
     * {
-        @apply border-border outline-ring/50;
+        @apply border-border;
     }
+
     body {
-        @apply bg-background text-foreground;
+        @apply bg-background font-sans text-body text-foreground antialiased;
+        font-optical-sizing: auto;
+    }
+
+    :focus-visible {
+        outline: 2px solid var(--ring);
+        outline-offset: 3px;
+    }
+
+    ::selection {
+        background: var(--brand);
+        color: var(--brand-foreground);
+    }
+}
+
+/* Preserve completion events while removing visible nonessential motion. */
+@media (prefers-reduced-motion: reduce) {
+    *,
+    *::before,
+    *::after {
+        animation-duration: 0.01ms !important;
+        animation-iteration-count: 1 !important;
+        transition-duration: 0.01ms !important;
+        scroll-behavior: auto !important;
     }
 }

resources/css/theme.css

@@ -0,0 +1,96 @@
+/* Fluid Emerald / Kinetic Kanban: shared by the first paint and the app bundle. */
+:root {
+    color-scheme: light;
+    --radius: 0.25rem;
+    --background: #f7f9fb;
+    --foreground: #191c1e;
+    --card: #ffffff;
+    --card-foreground: #191c1e;
+    --popover: #ffffff;
+    --popover-foreground: #191c1e;
+    --primary: #006e2f;
+    --primary-foreground: #ffffff;
+    --secondary: #d0e1fb;
+    --secondary-foreground: #38485d;
+    --muted: #f2f4f6;
+    --muted-foreground: #505f76;
+    --accent: #dcfce7;
+    --accent-foreground: #005321;
+    --destructive: #ba1a1a;
+    --destructive-foreground: #ffffff;
+    --border: #e2e8f0;
+    --input: #6d7b6c;
+    --ring: #006e2f;
+    --brand: #22c55e;
+    --brand-foreground: #002109;
+    --success: #dcfce7;
+    --success-foreground: #005321;
+    --warning: #fef3c7;
+    --warning-foreground: #78350f;
+    --info: #dbeafe;
+    --info-foreground: #1e40af;
+    --chart-1: #006e2f;
+    --chart-2: #505f76;
+    --chart-3: #9e4036;
+    --chart-4: #92400e;
+    --chart-5: #1d4ed8;
+    --sidebar-background: #f2f4f6;
+    --sidebar-foreground: #191c1e;
+    --sidebar-primary: #006e2f;
+    --sidebar-primary-foreground: #ffffff;
+    --sidebar-accent: #dcfce7;
+    --sidebar-accent-foreground: #005321;
+    --sidebar-border: #e2e8f0;
+    --sidebar-ring: #006e2f;
+    --sidebar: #f2f4f6;
+}
+
+.dark {
+    color-scheme: dark;
+    --background: #0f172a;
+    --foreground: #f1f5f9;
+    --card: #1e293b;
+    --card-foreground: #f1f5f9;
+    --popover: #1e293b;
+    --popover-foreground: #f1f5f9;
+    --primary: #4ae176;
+    --primary-foreground: #002109;
+    --secondary: #334155;
+    --secondary-foreground: #e2e8f0;
+    --muted: #1e293b;
+    --muted-foreground: #b7c8e1;
+    --accent: #173b2b;
+    --accent-foreground: #6bff8f;
+    --destructive: #fca5a5;
+    --destructive-foreground: #450a0a;
+    --border: #334155;
+    --input: #8293aa;
+    --ring: #4ae176;
+    --brand: #22c55e;
+    --brand-foreground: #002109;
+    --success: #173b2b;
+    --success-foreground: #6bff8f;
+    --warning: #422006;
+    --warning-foreground: #fde68a;
+    --info: #172554;
+    --info-foreground: #bfdbfe;
+    --chart-1: #4ae176;
+    --chart-2: #b7c8e1;
+    --chart-3: #ffb4a9;
+    --chart-4: #fbbf24;
+    --chart-5: #60a5fa;
+    --sidebar-background: #111c30;
+    --sidebar-foreground: #f1f5f9;
+    --sidebar-primary: #4ae176;
+    --sidebar-primary-foreground: #002109;
+    --sidebar-accent: #173b2b;
+    --sidebar-accent-foreground: #6bff8f;
+    --sidebar-border: #334155;
+    --sidebar-ring: #4ae176;
+    --sidebar: #111c30;
+}
+
+html {
+    background-color: var(--background);
+    color: var(--foreground);
+}

resources/js/app.ts

@@ -3,7 +3,8 @@ import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';
 import type { DefineComponent } from 'vue';
 import { createApp, h } from 'vue';
 import '../css/app.css';
-import { initializeTheme } from '@/composables/useAppearance';
+import { createAppearance } from '@/composables/useAppearance';
+import { createLocalization } from '@/lib/localization';
 
 const appName = import.meta.env.VITE_APP_NAME || 'Laravel';
 
@@ -17,12 +18,11 @@ createInertiaApp({
     setup({ el, App, props, plugin }) {
         createApp({ render: () => h(App, props) })
             .use(plugin)
+            .use(createLocalization(props.initialPage.props.localization))
+            .use(createAppearance(props.initialPage.props.appearance))
             .mount(el);
     },
     progress: {
-        color: '#4B5563',
+        color: 'var(--primary)',
     },
 });
-
-// This will set light / dark mode on page load...
-initializeTheme();

resources/js/components/AlertError.vue

@@ -2,15 +2,15 @@
 import { AlertCircle } from 'lucide-vue-next';
 import { computed } from 'vue';
 import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
+import { useLocalization } from '@/composables/useLocalization';
 
 type Props = {
     errors: string[];
     title?: string;
 };
 
-const props = withDefaults(defineProps<Props>(), {
+const props = defineProps<Props>();
-    title: 'Something went wrong.',
+const { t } = useLocalization();
-});
 
 const uniqueErrors = computed(() => Array.from(new Set(props.errors)));
 </script>
@@ -18,7 +18,7 @@ const uniqueErrors = computed(() => Array.from(new Set(props.errors)));
 <template>
     <Alert variant="destructive">
         <AlertCircle class="size-4" />
-        <AlertTitle>{{ title }}</AlertTitle>
+        <AlertTitle>{{ title ?? t('common.error') }}</AlertTitle>
         <AlertDescription>
             <ul class="list-inside list-disc text-sm">
                 <li v-for="(error, index) in uniqueErrors" :key="index">

resources/js/components/AppLogo.vue

@@ -1,16 +1,17 @@
 <script setup lang="ts">
-import AppLogoIcon from '@/components/AppLogoIcon.vue';
+import { Columns3 } from 'lucide-vue-next';
 </script>
 
 <template>
-    <div
+    <span class="flex min-w-0 items-center gap-3">
-        class="bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-md"
+        <span
-    >
+            class="bg-brand text-brand-foreground flex size-8 shrink-0 items-center justify-center rounded-md"
-        <AppLogoIcon class="size-5 fill-current text-white dark:text-black" />
-    </div>
-    <div class="ml-1 grid flex-1 text-left text-sm">
-        <span class="mb-0.5 truncate font-semibold leading-tight"
-            >Laravel Starter Kit</span
         >
-    </div>
+            <Columns3 class="size-5" aria-hidden="true" />
+        </span>
+        <span
+            class="text-title truncate font-semibold group-data-[collapsible=icon]:hidden"
+            >KanbanGit</span
+        >
+    </span>
 </template>

resources/js/components/AppSidebar.vue

@@ -1,19 +1,10 @@
 <script setup lang="ts">
-import { Link, usePage } from '@inertiajs/vue3';
+import { Link, router } from '@inertiajs/vue3';
-import {
+import { Settings2, X } from 'lucide-vue-next';
-    BookOpen,
+import { computed, onMounted, onUnmounted } from 'vue';
-    Folder,
-    FolderGit2,
-    LayoutGrid,
-    Layers3,
-    Shield,
-    Users,
-} from 'lucide-vue-next';
-import { computed } from 'vue';
 import AppLogo from '@/components/AppLogo.vue';
-import NavFooter from '@/components/NavFooter.vue';
 import NavMain from '@/components/NavMain.vue';
-import NavUser from '@/components/NavUser.vue';
+import { Button } from '@/components/ui/button';
 import {
     Sidebar,
     SidebarContent,
@@ -22,93 +13,98 @@ import {
     SidebarMenu,
     SidebarMenuButton,
     SidebarMenuItem,
+    useSidebar,
 } from '@/components/ui/sidebar';
+import { useAppNavigation } from '@/composables/useAppNavigation';
+import { useCurrentUrl } from '@/composables/useCurrentUrl';
+import { useLocalization } from '@/composables/useLocalization';
 import { dashboard } from '@/routes';
-import { index as adminUsers } from '@/routes/admin/users';
+import { edit as profile } from '@/routes/profile';
-import { index as projectTemplatesIndex } from '@/routes/project-templates';
+import { show } from '@/routes/projects';
-import { index as projectsIndex } from '@/routes/projects';
-import { index as teamsIndex } from '@/routes/teams';
-import type { NavItem } from '@/types';
 
-const page = usePage();
+const { t } = useLocalization();
-
+const { currentUrl } = useCurrentUrl();
-const mainNavItems = computed<NavItem[]>(() => {
+const { project, workspaceItems, projectItems, projectSettingsItems } =
-    const items: NavItem[] = [
+    useAppNavigation();
-        {
+const { isMobile, setOpenMobile } = useSidebar();
-            title: 'Dashboard',
+const accountItems = computed(() => [
-            href: dashboard(),
+    {
-            icon: LayoutGrid,
+        title: t('navigation.settings'),
-        },
+        href: profile(),
-        {
+        icon: Settings2,
-            title: 'Projects',
+        isActive: currentUrl.value.startsWith('/settings/'),
-            href: projectsIndex(),
+    },
-            icon: Folder,
+]);
-        },
+let removeNavigationListener: (() => void) | undefined;
-    ];
+onMounted(() => {
-
+    removeNavigationListener = router.on('navigate', () =>
-    if (page.props.auth.permissions.projectCreate) {
+        setOpenMobile(false),
-        items.push({
+    );
-            title: 'Project templates',
-            href: projectTemplatesIndex(),
-            icon: Layers3,
-        });
-    }
-
-    if (page.props.auth.permissions.globalAdmin) {
-        items.push({
-            title: 'Users',
-            href: adminUsers(),
-            icon: Shield,
-        });
-    }
-
-    if (page.props.auth.permissions.canManageTeams) {
-        items.push({
-            title: 'Teams',
-            href: teamsIndex(),
-            icon: Users,
-        });
-    }
-
-    return items;
 });
-
+onUnmounted(() => removeNavigationListener?.());
-const footerNavItems: NavItem[] = [
-    {
-        title: 'Repository',
-        href: 'https://github.com/laravel/vue-starter-kit',
-        icon: FolderGit2,
-    },
-    {
-        title: 'Documentation',
-        href: 'https://laravel.com/docs/starter-kits#vue',
-        icon: BookOpen,
-    },
-];
 </script>
 
 <template>
-    <Sidebar collapsible="icon" variant="inset">
+    <Sidebar id="app-navigation" collapsible="icon" variant="sidebar">
-        <SidebarHeader>
+        <SidebarHeader class="border-sidebar-border gap-4 border-b p-3">
-            <SidebarMenu>
+            <div class="flex items-center gap-2">
-                <SidebarMenuItem>
+                <SidebarMenu class="min-w-0">
-                    <SidebarMenuButton size="lg" as-child>
+                    <SidebarMenuItem>
-                        <Link :href="dashboard()">
+                        <SidebarMenuButton
-                            <AppLogo />
+                            size="lg"
-                        </Link>
+                            as-child
-                    </SidebarMenuButton>
+                            tooltip="KanbanGit"
-                </SidebarMenuItem>
+                        >
-            </SidebarMenu>
+                            <Link :href="dashboard()" aria-label="KanbanGit"
+                                ><AppLogo
+                            /></Link>
+                        </SidebarMenuButton>
+                    </SidebarMenuItem>
+                </SidebarMenu>
+                <Button
+                    v-if="isMobile"
+                    variant="ghost"
+                    size="icon"
+                    :aria-label="t('navigation.close')"
+                    @click="setOpenMobile(false)"
+                >
+                    <X aria-hidden="true" />
+                </Button>
+            </div>
+            <Link
+                v-if="project"
+                :href="show(project.id)"
+                class="bg-sidebar-accent flex min-w-0 items-center gap-3 rounded-md p-3 group-data-[collapsible=icon]:hidden"
+            >
+                <span
+                    class="text-label bg-brand/15 text-primary shrink-0 rounded-md px-2 py-1"
+                    >{{ project.key }}</span
+                >
+                <span class="truncate font-semibold" :title="project.name">{{
+                    project.name
+                }}</span>
+            </Link>
         </SidebarHeader>
-
         <SidebarContent>
-            <NavMain :items="mainNavItems" />
+            <nav :aria-label="t('navigation.main')">
+                <NavMain
+                    :items="workspaceItems"
+                    :label="t('navigation.workspace')"
+                />
+                <NavMain
+                    v-if="projectItems.length"
+                    :items="projectItems"
+                    :label="t('navigation.project')"
+                />
+                <NavMain
+                    v-if="projectSettingsItems.length"
+                    :items="projectSettingsItems"
+                    :label="t('navigation.projectSettings')"
+                />
+            </nav>
         </SidebarContent>
-
+        <SidebarFooter class="border-sidebar-border border-t p-0">
-        <SidebarFooter>
+            <NavMain :items="accountItems" :label="t('navigation.account')" />
-            <NavFooter :items="footerNavItems" />
-            <NavUser />
         </SidebarFooter>
     </Sidebar>
-    <slot />
 </template>

resources/js/components/AppSidebarHeader.vue

@@ -1,27 +1,145 @@
 <script setup lang="ts">
+import { Link, usePage } from '@inertiajs/vue3';
+import { Monitor, Moon, Plus, Sun } from 'lucide-vue-next';
+import { computed } from 'vue';
 import Breadcrumbs from '@/components/Breadcrumbs.vue';
+import UserMenuContent from '@/components/UserMenuContent.vue';
+import { UserAvatar } from '@/components/ui/avatar';
+import { Button } from '@/components/ui/button';
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuLabel,
+    DropdownMenuRadioGroup,
+    DropdownMenuRadioItem,
+    DropdownMenuSeparator,
+    DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
 import { SidebarTrigger } from '@/components/ui/sidebar';
+import { useAppNavigation } from '@/composables/useAppNavigation';
+import {
+    normalizeAppearance,
+    useAppearance,
+} from '@/composables/useAppearance';
+import { useCurrentUrl } from '@/composables/useCurrentUrl';
+import { useLocalization } from '@/composables/useLocalization';
+import { create as createProject } from '@/routes/projects';
+import { index as board } from '@/routes/projects/board';
+import { create as createTicket } from '@/routes/projects/tickets';
 import type { BreadcrumbItem } from '@/types';
 
-withDefaults(
+withDefaults(defineProps<{ breadcrumbs?: BreadcrumbItem[] }>(), {
-    defineProps<{
+    breadcrumbs: () => [],
-        breadcrumbs?: BreadcrumbItem[];
+});
-    }>(),
+const page = usePage();
-    {
+const { project } = useAppNavigation();
-        breadcrumbs: () => [],
+const { isCurrentUrl } = useCurrentUrl();
-    },
+const { t } = useLocalization();
+const { appearance, updateAppearance } = useAppearance();
+const themeIcon = computed(
+    () => ({ light: Sun, dark: Moon, system: Monitor })[appearance.value],
 );
+const createAction = computed(() => {
+    if (project.value?.canCreateTickets) {
+        return {
+            title: t('navigation.createTicket'),
+            href: createTicket(project.value.id, {
+                query: {
+                    source: isCurrentUrl(board(project.value.id))
+                        ? 'board'
+                        : 'backlog',
+                },
+            }),
+        };
+    }
+    if (!project.value && page.props.auth.permissions.projectCreate) {
+        return { title: t('navigation.createProject'), href: createProject() };
+    }
+    return null;
+});
 </script>
 
 <template>
     <header
-        class="border-sidebar-border/70 group-has-data-[collapsible=icon]/sidebar-wrapper:h-12 flex h-16 shrink-0 items-center gap-2 border-b px-6 transition-[width,height] ease-linear md:px-4"
+        class="bg-background md:px-page sticky top-0 z-20 flex min-h-16 min-w-0 shrink-0 items-center justify-between gap-2 border-b px-3 md:gap-4"
     >
-        <div class="flex items-center gap-2">
+        <div class="flex min-w-0 flex-1 items-center gap-2">
-            <SidebarTrigger class="-ml-1" />
+            <SidebarTrigger class="shrink-0" />
-            <template v-if="breadcrumbs && breadcrumbs.length > 0">
+            <Breadcrumbs v-if="breadcrumbs.length" :breadcrumbs="breadcrumbs" />
-                <Breadcrumbs :breadcrumbs="breadcrumbs" />
+            <span v-else class="truncate font-semibold">KanbanGit</span>
-            </template>
+        </div>
+        <div class="flex shrink-0 items-center gap-1 sm:gap-2">
+            <Button
+                v-if="createAction"
+                as-child
+                :aria-label="createAction.title"
+                class="px-3"
+            >
+                <Link :href="createAction.href"
+                    ><Plus aria-hidden="true" /><span
+                        class="hidden sm:inline"
+                        >{{ createAction.title }}</span
+                    ></Link
+                >
+            </Button>
+            <DropdownMenu>
+                <DropdownMenuTrigger as-child>
+                    <Button
+                        variant="ghost"
+                        size="icon"
+                        :aria-label="t('appearance.label')"
+                        ><component :is="themeIcon" aria-hidden="true"
+                    /></Button>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent align="end">
+                    <DropdownMenuLabel>{{
+                        t('appearance.label')
+                    }}</DropdownMenuLabel>
+                    <DropdownMenuSeparator />
+                    <DropdownMenuRadioGroup
+                        :model-value="appearance"
+                        @update:model-value="
+                            (value) =>
+                                updateAppearance(normalizeAppearance(value))
+                        "
+                    >
+                        <DropdownMenuRadioItem value="light"
+                            ><Sun aria-hidden="true" />{{
+                                t('appearance.light')
+                            }}</DropdownMenuRadioItem
+                        >
+                        <DropdownMenuRadioItem value="dark"
+                            ><Moon aria-hidden="true" />{{
+                                t('appearance.dark')
+                            }}</DropdownMenuRadioItem
+                        >
+                        <DropdownMenuRadioItem value="system"
+                            ><Monitor aria-hidden="true" />{{
+                                t('appearance.system')
+                            }}</DropdownMenuRadioItem
+                        >
+                    </DropdownMenuRadioGroup>
+                </DropdownMenuContent>
+            </DropdownMenu>
+            <DropdownMenu>
+                <DropdownMenuTrigger as-child>
+                    <Button
+                        variant="ghost"
+                        size="icon"
+                        :aria-label="
+                            t('navigation.userMenu', {
+                                name: page.props.auth.user.name,
+                            })
+                        "
+                        data-test="sidebar-menu-button"
+                    >
+                        <UserAvatar :user="page.props.auth.user" />
+                    </Button>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent align="end" class="min-w-60">
+                    <UserMenuContent :user="page.props.auth.user" />
+                </DropdownMenuContent>
+            </DropdownMenu>
         </div>
     </header>
 </template>

resources/js/components/AppearanceTabs.vue

@@ -1,33 +1,80 @@
 <script setup lang="ts">
-import { Monitor, Moon, Sun } from 'lucide-vue-next';
+import { Check, Monitor, Moon, Sun } from 'lucide-vue-next';
+import { computed } from 'vue';
 import { useAppearance } from '@/composables/useAppearance';
+import { useLocalization } from '@/composables/useLocalization';
 
 const { appearance, updateAppearance } = useAppearance();
+const { t } = useLocalization();
 
-const tabs = [
+const tabs = computed(() => [
-    { value: 'light', Icon: Sun, label: 'Light' },
+    {
-    { value: 'dark', Icon: Moon, label: 'Dark' },
+        value: 'light' as const,
-    { value: 'system', Icon: Monitor, label: 'System' },
+        Icon: Sun,
-] as const;
+        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'),
+    },
+]);
 </script>
 
 <template>
-    <div
+    <fieldset class="min-w-0">
-        class="inline-flex gap-1 rounded-lg bg-neutral-100 p-1 dark:bg-neutral-800"
+        <legend class="sr-only">{{ t('appearance.label') }}</legend>
-    >
+        <div class="grid min-w-0 gap-3 sm:grid-cols-3">
-        <button
+            <label
-            v-for="{ value, Icon, label } in tabs"
+                v-for="{ value, Icon, label, description } in tabs"
-            :key="value"
+                :key="value"
-            @click="updateAppearance(value)"
+                class="relative min-w-0"
-            :class="[
+            >
-                'flex items-center rounded-md px-3.5 py-1.5 transition-colors',
+                <input
-                appearance === value
+                    type="radio"
-                    ? 'shadow-xs bg-white dark:bg-neutral-700 dark:text-neutral-100'
+                    name="appearance"
-                    : 'text-neutral-500 hover:bg-neutral-200/60 hover:text-black dark:text-neutral-400 dark:hover:bg-neutral-700/60',
+                    :value="value"
-            ]"
+                    :checked="appearance === value"
-        >
+                    :aria-describedby="`appearance-${value}-description`"
-            <component :is="Icon" class="-ml-1 h-4 w-4" />
+                    class="peer sr-only"
-            <span class="ml-1.5 text-sm">{{ label }}</span>
+                    @change="updateAppearance(value)"
-        </button>
+                />
-    </div>
+                <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>
 </template>

resources/js/components/AuthFormFeedback.vue

@@ -0,0 +1,78 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import FormFeedback from '@/components/FormFeedback.vue';
+import { Button } from '@/components/ui/button';
+import { useLocalization } from '@/composables/useLocalization';
+import type { FormFeedbackState } from '@/lib/form-feedback';
+import { login } from '@/routes/index';
+
+const props = defineProps<{
+    state: FormFeedbackState;
+    responseStatus?: number | null;
+    loadingTitle?: string;
+    successTitle?: string;
+}>();
+defineEmits<{ retry: [] }>();
+const { t } = useLocalization();
+const expired = computed(
+    () => props.state === 'server' && props.responseStatus === 419,
+);
+const limited = computed(
+    () => props.state === 'server' && props.responseStatus === 429,
+);
+const title = computed(() => {
+    if (expired.value) {
+        return t('auth.feedback.expiredTitle');
+    }
+    if (limited.value) {
+        return t('auth.feedback.limitedTitle');
+    }
+    if (props.state === 'loading') {
+        return props.loadingTitle ?? t('auth.feedback.pending');
+    }
+    if (props.state === 'success') {
+        return props.successTitle ?? t('auth.feedback.completed');
+    }
+    if (props.state === 'validation') {
+        return t('auth.feedback.validationTitle');
+    }
+    return undefined;
+});
+const description = computed(() => {
+    if (expired.value) {
+        return t('auth.feedback.expiredDescription');
+    }
+    if (limited.value) {
+        return t('auth.feedback.limitedDescription');
+    }
+    if (props.state === 'validation') {
+        return t('auth.feedback.validationDescription');
+    }
+    if (props.state === 'network') {
+        return t('auth.feedback.networkDescription');
+    }
+    if (props.state === 'server') {
+        return t('auth.feedback.serverDescription');
+    }
+    if (props.state === 'cancelled') {
+        return t('auth.feedback.cancelledDescription');
+    }
+    return undefined;
+});
+</script>
+
+<template>
+    <div class="gap-card grid" v-show="state !== 'idle'">
+        <FormFeedback
+            :state="state"
+            :title="title"
+            :description="description"
+            :retryable="!expired"
+            @retry="$emit('retry')"
+        />
+        <Button v-if="expired" as-child variant="outline">
+            <!-- A fresh document renews the session/CSRF state and drops in-memory secrets. -->
+            <a :href="login.url()">{{ t('auth.backToLogin') }}</a>
+        </Button>
+    </div>
+</template>

resources/js/components/BacklogTicketTree.vue

@@ -0,0 +1,209 @@
+<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/Breadcrumbs.vue

@@ -9,29 +9,48 @@ import {
     BreadcrumbSeparator,
 } from '@/components/ui/breadcrumb';
 import type { BreadcrumbItem as BreadcrumbItemType } from '@/types';
+import { useLocalization } from '@/composables/useLocalization';
 
 type Props = {
     breadcrumbs: BreadcrumbItemType[];
 };
 
 defineProps<Props>();
+const { t } = useLocalization();
 </script>
 
 <template>
-    <Breadcrumb>
+    <Breadcrumb class="min-w-0" :aria-label="t('navigation.breadcrumbs')">
-        <BreadcrumbList>
+        <BreadcrumbList class="flex-nowrap">
             <template v-for="(item, index) in breadcrumbs" :key="index">
-                <BreadcrumbItem>
+                <BreadcrumbItem
+                    :class="[
+                        'min-w-0',
+                        index !== breadcrumbs.length - 1
+                            ? 'hidden md:inline-flex'
+                            : '',
+                    ]"
+                >
                     <template v-if="index === breadcrumbs.length - 1">
-                        <BreadcrumbPage>{{ item.title }}</BreadcrumbPage>
+                        <BreadcrumbPage class="truncate" :title="item.title">{{
+                            item.title
+                        }}</BreadcrumbPage>
                     </template>
                     <template v-else>
                         <BreadcrumbLink as-child>
-                            <Link :href="item.href">{{ item.title }}</Link>
+                            <Link
+                                :href="item.href"
+                                class="max-w-40 truncate"
+                                :title="item.title"
+                                >{{ item.title }}</Link
+                            >
                         </BreadcrumbLink>
                     </template>
                 </BreadcrumbItem>
-                <BreadcrumbSeparator v-if="index !== breadcrumbs.length - 1" />
+                <BreadcrumbSeparator
+                    v-if="index !== breadcrumbs.length - 1"
+                    class="hidden md:block"
+                />
             </template>
         </BreadcrumbList>
     </Breadcrumb>

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

resources/js/components/FeedbackState.vue

@@ -0,0 +1,72 @@
+<script setup lang="ts">
+import { CircleAlert, CircleCheck, Inbox, LoaderCircle } from 'lucide-vue-next';
+import { computed } from 'vue';
+import { Button } from '@/components/ui/button';
+import { useLocalization } from '@/composables/useLocalization';
+
+const props = withDefaults(
+    defineProps<{
+        state: 'empty' | 'loading' | 'error' | 'success';
+        title?: string;
+        description?: string;
+        retryable?: boolean;
+    }>(),
+    { retryable: false },
+);
+defineEmits<{ retry: [] }>();
+const { t } = useLocalization();
+const icons = {
+    empty: Inbox,
+    loading: LoaderCircle,
+    error: CircleAlert,
+    success: CircleCheck,
+};
+const defaultTitles = {
+    empty: 'feedback.empty',
+    loading: 'common.loading',
+    error: 'common.error',
+    success: 'feedback.saved',
+} as const;
+const heading = computed(() => props.title ?? t(defaultTitles[props.state]));
+</script>
+
+<template>
+    <div
+        :role="state === 'error' ? 'alert' : 'status'"
+        :aria-busy="state === 'loading' || undefined"
+        :data-feedback="state"
+        class="gap-card bg-card p-card text-body text-card-foreground flex min-w-0 items-start rounded-md border"
+        :class="{
+            'border-destructive/40': state === 'error',
+            'border-success/40': state === 'success',
+        }"
+    >
+        <component
+            :is="icons[state]"
+            aria-hidden="true"
+            class="mt-0.5 size-5 shrink-0"
+            :class="{
+                'text-primary animate-spin motion-reduce:animate-none':
+                    state === 'loading',
+                'text-destructive': state === 'error',
+                'text-success-foreground': state === 'success',
+                'text-muted-foreground': state === 'empty',
+            }"
+        />
+        <div class="gap-stack grid min-w-0 flex-1 break-words">
+            <p class="font-semibold">{{ heading }}</p>
+            <p v-if="description" class="text-muted-foreground">
+                {{ description }}
+            </p>
+            <div v-if="$slots.default"><slot /></div>
+            <Button
+                v-if="retryable && state === 'error'"
+                type="button"
+                variant="outline"
+                class="justify-self-start"
+                @click="$emit('retry')"
+                >{{ t('common.retry') }}</Button
+            >
+        </div>
+    </div>
+</template>

resources/js/components/FormFeedback.vue

@@ -0,0 +1,76 @@
+<script setup lang="ts">
+import { computed, nextTick, useTemplateRef, watch } from 'vue';
+import FeedbackState from '@/components/FeedbackState.vue';
+import { useLocalization } from '@/composables/useLocalization';
+import type { FormFeedbackState } from '@/lib/form-feedback';
+
+const props = withDefaults(
+    defineProps<{
+        state: FormFeedbackState;
+        title?: string;
+        description?: string;
+        retryable?: boolean;
+    }>(),
+    { retryable: true },
+);
+defineEmits<{ retry: [] }>();
+const { t } = useLocalization();
+const feedback = useTemplateRef<HTMLDivElement>('feedback');
+watch(
+    () => props.state,
+    async (state) => {
+        if (['validation', 'network', 'server', 'cancelled'].includes(state)) {
+            await nextTick();
+            if (props.state === state) {
+                feedback.value?.focus();
+            }
+        }
+    },
+);
+const titles = {
+    idle: 'feedback.saved',
+    loading: 'forms.saving',
+    success: 'feedback.saved',
+    validation: 'forms.validationTitle',
+    network: 'forms.networkTitle',
+    server: 'forms.serverTitle',
+    cancelled: 'forms.cancelledTitle',
+} as const;
+const descriptions = {
+    validation: 'forms.validationDescription',
+    network: 'forms.networkDescription',
+    server: 'forms.serverDescription',
+    cancelled: 'forms.cancelledDescription',
+} as const;
+const description = computed(() =>
+    props.state in descriptions
+        ? t(descriptions[props.state as keyof typeof descriptions])
+        : undefined,
+);
+</script>
+
+<template>
+    <div
+        ref="feedback"
+        v-show="state !== 'idle'"
+        :data-form-state="state"
+        tabindex="-1"
+        class="focus-visible:ring-ring/35 rounded-md outline-none focus-visible:ring-2"
+    >
+        <FeedbackState
+            v-if="state !== 'idle'"
+            :state="
+                state === 'loading' || state === 'success' ? state : 'error'
+            "
+            :title="props.title ?? t(titles[state])"
+            :description="props.description ?? description"
+            :retryable="
+                props.retryable !== false &&
+                (state === 'network' ||
+                    state === 'server' ||
+                    state === 'cancelled')
+            "
+            @retry="$emit('retry')"
+        />
+    </div>
+</template>

resources/js/components/InputError.vue

@@ -5,8 +5,8 @@ defineProps<{
 </script>
 
 <template>
-    <div v-show="message">
+    <div v-show="message" role="alert">
-        <p class="text-sm text-red-600 dark:text-red-500">
+        <p class="text-body text-destructive">
             {{ message }}
         </p>
     </div>

resources/js/components/NavMain.vue

@@ -12,23 +12,46 @@ import type { NavItem } from '@/types';
 
 defineProps<{
     items: NavItem[];
+    label: string;
 }>();
 
 const { isCurrentUrl } = useCurrentUrl();
 </script>
 
 <template>
-    <SidebarGroup class="px-2 py-0">
+    <SidebarGroup class="px-3 py-2">
-        <SidebarGroupLabel>Platform</SidebarGroupLabel>
+        <SidebarGroupLabel class="text-label text-muted-foreground uppercase">{{
-        <SidebarMenu>
+            label
+        }}</SidebarGroupLabel>
+        <SidebarMenu role="list" :aria-label="label">
             <SidebarMenuItem v-for="item in items" :key="item.title">
                 <SidebarMenuButton
                     as-child
-                    :is-active="isCurrentUrl(item.href)"
+                    :is-active="
+                        item.isActive ??
+                        isCurrentUrl(
+                            item.href,
+                            undefined,
+                            item.match === 'section',
+                        )
+                    "
                     :tooltip="item.title"
+                    class="min-h-control data-[active=true]:border-brand border-l-2 border-transparent px-3 data-[active=true]:font-semibold group-data-[collapsible=icon]:min-h-8"
                 >
-                    <Link :href="item.href">
+                    <Link
-                        <component :is="item.icon" />
+                        :href="item.href"
+                        :aria-current="
+                            (item.isActive ??
+                            isCurrentUrl(
+                                item.href,
+                                undefined,
+                                item.match === 'section',
+                            ))
+                                ? 'page'
+                                : undefined
+                        "
+                    >
+                        <component :is="item.icon" aria-hidden="true" />
                         <span>{{ item.title }}</span>
                     </Link>
                 </SidebarMenuButton>

resources/js/components/PasswordInput.vue

@@ -2,6 +2,7 @@
 import { Eye, EyeOff } from 'lucide-vue-next';
 import { ref, useTemplateRef } from 'vue';
 import type { HTMLAttributes } from 'vue';
+import { useLocalization } from '@/composables/useLocalization';
 import { Input } from '@/components/ui/input';
 import { cn } from '@/lib/utils';
 
@@ -9,12 +10,14 @@ defineOptions({ inheritAttrs: false });
 
 const props = defineProps<{
     class?: HTMLAttributes['class'];
+    disabled?: boolean;
 }>();
 
 const model = defineModel<string | number | null>();
 
 const showPassword = ref(false);
 const inputRef = useTemplateRef('inputRef');
+const { t } = useLocalization();
 
 defineExpose({
     $el: inputRef,
@@ -28,7 +31,8 @@ defineExpose({
             ref="inputRef"
             v-model="model"
             :type="showPassword ? 'text' : 'password'"
-            :class="cn('pr-10', props.class)"
+            :class="cn('pr-12', props.class)"
+            :disabled="disabled"
             v-bind="$attrs"
         />
         <button
@@ -36,11 +40,14 @@ defineExpose({
             @click="showPassword = !showPassword"
             :class="
                 cn(
-                    'text-muted-foreground hover:text-foreground focus-visible:ring-ring absolute inset-y-0 right-0 flex items-center rounded-r-md px-3 focus-visible:outline-none focus-visible:ring-[3px]',
+                    'text-muted-foreground hover:text-foreground focus-visible:ring-ring w-control absolute inset-y-0 right-0 flex items-center justify-center rounded-r-md focus-visible:outline-none focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50',
                 )
             "
-            :aria-label="showPassword ? 'Hide password' : 'Show password'"
+            :aria-label="
-            :tabindex="-1"
+                t(showPassword ? 'auth.password.hide' : 'auth.password.show')
+            "
+            :aria-pressed="showPassword"
+            :disabled="disabled"
         >
             <EyeOff v-if="showPassword" class="size-4" />
             <Eye v-else class="size-4" />

resources/js/components/ProjectNavigation.vue

@@ -0,0 +1,89 @@
+<script setup lang="ts">
+import { Link } from '@inertiajs/vue3';
+import { ChevronDown, Settings2 } from 'lucide-vue-next';
+import { computed } from 'vue';
+import { Button } from '@/components/ui/button';
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuItem,
+    DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import { useAppNavigation } from '@/composables/useAppNavigation';
+import { useCurrentUrl } from '@/composables/useCurrentUrl';
+import { useLocalization } from '@/composables/useLocalization';
+
+const { projectItems, projectSettingsItems } = useAppNavigation();
+const { isCurrentUrl } = useCurrentUrl();
+const { t } = useLocalization();
+const settingsActive = computed(() =>
+    projectSettingsItems.value.some((item) => isCurrentUrl(item.href)),
+);
+</script>
+
+<template>
+    <div
+        v-if="projectItems.length"
+        class="bg-card md:px-page flex min-w-0 items-center gap-2 border-b px-4"
+    >
+        <nav
+            :aria-label="t('navigation.project')"
+            class="flex min-w-0 flex-1 gap-4 overflow-x-auto"
+        >
+            <Link
+                v-for="item in projectItems"
+                :key="item.title"
+                :href="item.href"
+                :aria-current="isCurrentUrl(item.href) ? 'page' : undefined"
+                :class="[
+                    'min-h-control text-body flex shrink-0 items-center gap-2 border-b-2 px-1 py-3 font-medium outline-offset-[-3px]',
+                    isCurrentUrl(item.href)
+                        ? 'border-brand text-primary'
+                        : 'text-muted-foreground hover:border-border hover:text-foreground border-transparent',
+                ]"
+            >
+                <component
+                    :is="item.icon"
+                    class="size-4"
+                    aria-hidden="true"
+                />{{ item.title }}
+            </Link>
+        </nav>
+        <DropdownMenu v-if="projectSettingsItems.length">
+            <DropdownMenuTrigger as-child>
+                <Button
+                    variant="ghost"
+                    size="sm"
+                    :aria-label="t('navigation.projectSettings')"
+                    :class="{
+                        'bg-accent text-accent-foreground': settingsActive,
+                    }"
+                >
+                    <Settings2 aria-hidden="true" /><span
+                        class="hidden sm:inline"
+                        >{{ t('navigation.projectSettings') }}</span
+                    ><ChevronDown class="hidden sm:block" aria-hidden="true" />
+                </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end">
+                <DropdownMenuItem
+                    v-for="item in projectSettingsItems"
+                    :key="item.title"
+                    as-child
+                >
+                    <Link
+                        :href="item.href"
+                        :aria-current="
+                            isCurrentUrl(item.href) ? 'page' : undefined
+                        "
+                        :class="{ 'bg-accent': isCurrentUrl(item.href) }"
+                    >
+                        <component :is="item.icon" aria-hidden="true" />{{
+                            item.title
+                        }}
+                    </Link>
+                </DropdownMenuItem>
+            </DropdownMenuContent>
+        </DropdownMenu>
+    </div>
+</template>

resources/js/components/TicketTreeList.vue

@@ -1,45 +1,93 @@
 <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 { TicketTreeNodeModel } from '@/types/models/ticket-tree-node-model';
+import type { TicketTreeListProps } from '@/types/ticket-tree';
 
-defineProps<{
+defineProps<TicketTreeListProps>();
-    nodes: TicketTreeNodeModel[];
+
-    projectId: number;
+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);
+    }
+}
 </script>
 
 <template>
-    <ul class="space-y-3">
+    <ul class="grid min-w-0 gap-3">
-        <li v-for="node in nodes" :key="node.id">
+        <li v-for="node in nodes" :key="node.id" class="min-w-0">
-            <div class="border-border rounded-xl border px-4 py-4">
+            <div class="grid min-w-0 grid-cols-[2.75rem_minmax(0,1fr)] gap-2">
-                <div class="flex flex-wrap items-center gap-2">
+                <div class="flex justify-center pt-1">
-                    <Link
+                    <button
-                        :href="
+                        v-if="node.children.length > 0"
-                            showTicket({
+                        type="button"
-                                project: projectId,
+                        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"
-                                ticket: node.id,
+                        :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 },
+                            )
                         "
-                        class="text-foreground hover:text-primary font-medium transition"
+                        @click="toggleTicket(node.id)"
                     >
-                        {{ node.ticket_key }}
+                        <ChevronRight
-                    </Link>
+                            v-if="collapsedTicketIds.has(node.id)"
-
+                            class="size-4"
-                    <Badge v-if="node.ticket_type_name" variant="secondary">
+                            aria-hidden="true"
-                        {{ node.ticket_type_name }}
+                        />
-                    </Badge>
+                        <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="text-foreground mt-2 text-sm">
+                <Link
-                    {{ node.title }}
+                    :href="
-                </div>
+                        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>
 
             <div
-                v-if="node.children.length > 0"
+                v-if="
-                class="border-border mt-3 border-l pl-4"
+                    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"
             >
                 <TicketTreeList
                     :nodes="node.children"

resources/js/components/TwoFactorRecoveryCodes.vue

@@ -1,123 +1,169 @@
 <script setup lang="ts">
-import { Form } from '@inertiajs/vue3';
+import { useForm } from '@inertiajs/vue3';
 import { Eye, EyeOff, LockKeyhole, RefreshCw } from 'lucide-vue-next';
-import { nextTick, onMounted, ref, useTemplateRef } from 'vue';
+import { ref } from 'vue';
 import AlertError from '@/components/AlertError.vue';
+import AuthFormFeedback from '@/components/AuthFormFeedback.vue';
 import { Button } from '@/components/ui/button';
 import {
-    Card,
+    Dialog,
-    CardContent,
+    DialogContent,
-    CardDescription,
+    DialogDescription,
-    CardHeader,
+    DialogFooter,
-    CardTitle,
+    DialogHeader,
-} from '@/components/ui/card';
+    DialogTitle,
+} from '@/components/ui/dialog';
+import { useFormProtection } from '@/composables/useFormProtection';
+import { useLocalization } from '@/composables/useLocalization';
 import { useTwoFactorAuth } from '@/composables/useTwoFactorAuth';
 import { regenerateRecoveryCodes } from '@/routes/two-factor';
 
-const { recoveryCodesList, fetchRecoveryCodes, errors } = useTwoFactorAuth();
+const { t } = useLocalization();
-const isRecoveryCodesVisible = ref<boolean>(false);
+const {
-const recoveryCodeSectionRef = useTemplateRef('recoveryCodeSectionRef');
+    recoveryCodesList,
+    fetchRecoveryCodes,
+    clearRecoveryCodes,
+    errors,
+    loading,
+} = useTwoFactorAuth();
+const visible = ref(false);
+const showRegenerate = ref(false);
+const form = useForm({});
+const protection = useFormProtection(form);
 
-const toggleRecoveryCodesVisibility = async () => {
+function hide(): void {
-    if (!isRecoveryCodesVisible.value && !recoveryCodesList.value.length) {
+    visible.value = false;
-        await fetchRecoveryCodes();
+    clearRecoveryCodes();
+}
+function toggle(): void {
+    if (visible.value) {
+        hide();
+    } else {
+        visible.value = true;
+        void fetchRecoveryCodes();
     }
-
+}
-    isRecoveryCodesVisible.value = !isRecoveryCodesVisible.value;
+function closeRegenerate(open: boolean): void {
-
+    if (!form.processing) {
-    if (isRecoveryCodesVisible.value) {
+        showRegenerate.value = open;
-        await nextTick();
+        protection.clearFeedback();
-        recoveryCodeSectionRef.value?.scrollIntoView({ behavior: 'smooth' });
     }
-};
+}
-
+function regenerate(): void {
-onMounted(async () => {
+    protection.submit(regenerateRecoveryCodes(), {
-    if (!recoveryCodesList.value.length) {
+        preserveScroll: true,
-        await fetchRecoveryCodes();
+        onBefore: hide,
-    }
+        onSuccess: () => {
-});
+            showRegenerate.value = false;
+            visible.value = true;
+            return fetchRecoveryCodes();
+        },
+    });
+}
 </script>
 
 <template>
-    <Card class="w-full">
+    <section
-        <CardHeader>
+        class="gap-column grid min-w-0 rounded-lg border p-4"
-            <CardTitle class="flex gap-3">
+        aria-labelledby="recovery-title"
-                <LockKeyhole class="size-4" />2FA recovery codes
+    >
-            </CardTitle>
+        <div class="gap-stack grid">
-            <CardDescription>
+            <h3
-                Recovery codes let you regain access if you lose your 2FA
+                id="recovery-title"
-                device. Store them in a secure password manager.
+                class="flex items-center gap-2 font-semibold"
-            </CardDescription>
-        </CardHeader>
-        <CardContent>
-            <div
-                class="flex select-none flex-col gap-3 sm:flex-row sm:items-center sm:justify-between"
             >
-                <Button @click="toggleRecoveryCodesVisibility" class="w-fit">
+                <LockKeyhole class="text-primary size-4" />{{
-                    <component
+                    t('security.recoveryTitle')
-                        :is="isRecoveryCodesVisible ? EyeOff : Eye"
+                }}
-                        class="size-4"
+            </h3>
-                    />
+            <p class="text-body text-muted-foreground">
-                    {{ isRecoveryCodesVisible ? 'Hide' : 'View' }} recovery
+                {{ t('security.recoveryDescription') }}
-                    codes
+            </p>
-                </Button>
+        </div>
-
+        <div class="flex flex-wrap gap-3">
-                <Form
+            <Button
-                    v-if="isRecoveryCodesVisible && recoveryCodesList.length"
+                variant="outline"
-                    v-bind="regenerateRecoveryCodes.form()"
+                :aria-expanded="visible"
-                    method="post"
+                aria-controls="recovery-codes"
-                    :options="{ preserveScroll: true }"
+                :disabled="form.processing"
-                    @success="fetchRecoveryCodes"
+                @click="toggle"
-                    #default="{ processing }"
+                ><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
+            </template>
-                        variant="secondary"
+            <template v-else>
-                        type="submit"
+                <ul
-                        :disabled="processing"
+                    class="bg-muted grid gap-2 rounded-lg p-4 font-mono text-sm sm:grid-cols-2"
-                    >
+                    :aria-label="t('security.recoveryTitle')"
-                        <RefreshCw /> Regenerate codes
+                >
-                    </Button>
+                    <li v-for="code in recoveryCodesList" :key="code">
-                </Form>
+                        {{ code }}
-            </div>
+                    </li>
-            <div
+                </ul>
-                :class="[
+                <p class="text-caption text-muted-foreground">
-                    'relative overflow-hidden transition-all duration-300',
+                    {{ t('security.recoveryOnce') }}
-                    isRecoveryCodesVisible
+                </p>
-                        ? 'h-auto opacity-100'
+            </template>
-                        : 'h-0 opacity-0',
+        </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()"
             >
-                <div v-if="errors?.length" class="mt-6">
+                <DialogHeader>
-                    <AlertError :errors="errors" />
+                    <DialogTitle>{{
-                </div>
+                        t('security.regenerateTitle')
-                <div v-else class="mt-3 space-y-3">
+                    }}</DialogTitle>
-                    <div
+                    <DialogDescription>{{
-                        ref="recoveryCodeSectionRef"
+                        t('security.regenerateDescription')
-                        class="bg-muted grid gap-1 rounded-lg p-4 font-mono text-sm"
+                    }}</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
                     >
-                        <div v-if="!recoveryCodesList.length" class="space-y-2">
+                    <Button :loading="form.processing" @click="regenerate">{{
-                            <div
+                        t('security.regenerate')
-                                v-for="n in 8"
+                    }}</Button>
-                                :key="n"
+                </DialogFooter>
-                                class="bg-muted-foreground/20 h-4 animate-pulse rounded"
+            </DialogContent>
-                            ></div>
+        </Dialog>
-                        </div>
+    </section>
-                        <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,297 +1,261 @@
 <script setup lang="ts">
-import { Form } from '@inertiajs/vue3';
+import { useForm } 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 {
+import { Input } from '@/components/ui/input';
-    InputOTP,
+import { Label } from '@/components/ui/label';
-    InputOTPGroup,
+import { useFormProtection } from '@/composables/useFormProtection';
-    InputOTPSlot,
+import { useLocalization } from '@/composables/useLocalization';
-} 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';
 
-type Props = {
+const props = defineProps<{
     requiresConfirmation: boolean;
     twoFactorEnabled: boolean;
-};
+}>();
-
-const { resolvedAppearance } = useAppearance();
-
-const props = defineProps<Props>();
 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',
+    ),
+);
 
-const { copy, copied } = useClipboard();
+function close(open: boolean): void {
-const { qrCodeSvg, manualSetupKey, clearSetupData, fetchSetupData, errors } =
+    if (!form.processing) {
-    useTwoFactorAuth();
+        isOpen.value = open;
-
-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',
-        };
     }
-
+}
-    if (showVerificationStep.value) {
+async function next(): Promise<void> {
-        return {
+    if (props.twoFactorEnabled || !props.requiresConfirmation) {
-            title: 'Verify authentication code',
+        close(false);
-            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;
     }
-
+    verification.value = true;
-    clearSetupData();
+    await nextTick();
-    isOpen.value = false;
+    codeInput.value?.$el?.focus();
-};
+}
-
+function submit(): void {
-const resetModalState = () => {
+    protection.submit(confirm(), {
-    if (props.twoFactorEnabled) {
+        preserveScroll: true,
-        clearSetupData();
+        errorBag: 'confirmTwoFactorAuthentication',
+        onSuccess: () => {
+            isOpen.value = false;
+        },
+        onFinish: () => {
+            form.reset();
+        },
+    });
+}
+async function copyKey(): Promise<void> {
+    const key = manualSetupKey.value;
+    if (!key) {
+        return;
     }
-
+    copyError.value = false;
-    showVerificationStep.value = false;
+    try {
-    code.value = '';
+        await navigator.clipboard.writeText(key);
-};
+        if (isOpen.value && manualSetupKey.value === key) {
-
+            copied.value = true;
-watch(
-    () => isOpen.value,
-    async (isOpen) => {
-        if (!isOpen) {
-            resetModalState();
-
-            return;
         }
-
+    } catch {
-        if (!qrCodeSvg.value) {
+        if (isOpen.value) {
-            await fetchSetupData();
+            copyError.value = true;
         }
-    },
+    }
-);
+}
+watch(isOpen, (open) => {
+    verification.value = false;
+    copied.value = false;
+    copyError.value = false;
+    form.resetAndClearErrors();
+    protection.clearFeedback();
+    clearSetupData();
+    if (open) {
+        void fetchSetupData();
+    }
+});
 </script>
 
 <template>
-    <Dialog :open="isOpen" @update:open="isOpen = $event">
+    <Dialog :open="isOpen" @update:open="close">
-        <DialogContent class="sm:max-w-md">
+        <DialogContent
-            <DialogHeader class="flex items-center justify-center">
+            class="sm:max-w-md"
-                <div
+            :show-close-button="!form.processing"
-                    class="border-border bg-card mb-3 w-auto rounded-full border p-0.5 shadow-sm"
+            @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"
                 >
+                    {{ 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="border-border bg-muted relative overflow-hidden rounded-full border p-2.5"
+                        class="mx-auto aspect-square w-full max-w-56 rounded-lg border bg-white p-4 text-black"
-                    >
+                        v-html="qrCodeSvg"
-                        <div
+                    />
-                            class="absolute inset-0 grid grid-cols-5 opacity-50"
+                    <div class="grid min-w-0 gap-2">
-                        >
+                        <Label for="setup-key">{{
-                            <div
+                            t('security.manualKey')
-                                v-for="i in 5"
+                        }}</Label>
-                                :key="`col-${i}`"
+                        <div class="flex min-w-0 gap-2">
-                                class="border-border border-r last:border-r-0"
+                            <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>
-                        <div
+                        <p
-                            class="absolute inset-0 grid grid-rows-5 opacity-50"
+                            v-if="copied"
+                            role="status"
+                            class="text-caption text-success-foreground"
                         >
-                            <div
+                            {{ t('security.copied') }}
-                                v-for="i in 5"
+                        </p>
-                                :key="`row-${i}`"
+                        <InputError
-                                class="border-border border-b last:border-b-0"
+                            v-if="copyError"
-                            />
+                            :message="t('security.copyError')"
-                        </div>
-                        <ScanLine
-                            class="text-foreground relative z-20 size-6"
                         />
                     </div>
                 </div>
-                <DialogTitle>{{ modalConfig.title }}</DialogTitle>
+                <p
-                <DialogDescription class="text-center">
+                    v-if="requiresConfirmation && !twoFactorEnabled"
-                    {{ modalConfig.description }}
+                    class="text-caption text-muted-foreground"
-                </DialogDescription>
+                >
-            </DialogHeader>
+                    {{ t('security.setupPendingDescription') }}
-
+                </p>
-            <div
+                <DialogFooter>
-                class="relative flex w-auto flex-col items-center justify-center space-y-5"
+                    <Button variant="outline" @click="close(false)">{{
-            >
+                        t('common.close')
-                <template v-if="!showVerificationStep">
+                    }}</Button>
-                    <AlertError v-if="errors?.length" :errors="errors" />
+                    <Button v-if="hasSetupData" @click="next">{{
-                    <template v-else>
+                        t(
-                        <div
+                            twoFactorEnabled || !requiresConfirmation
-                            class="relative mx-auto flex max-w-md items-center overflow-hidden"
+                                ? 'common.done'
-                        >
+                                : 'security.continue',
-                            <div
+                        )
-                                class="border-border relative mx-auto aspect-square w-64 overflow-hidden rounded-lg border"
+                    }}</Button>
-                            >
+                </DialogFooter>
-                                <div
+            </template>
-                                    v-if="!qrCodeSvg"
+            <form v-else class="gap-column grid" @submit.prevent="submit">
-                                    class="bg-background absolute inset-0 z-10 flex aspect-square h-auto w-full animate-pulse items-center justify-center"
+                <AuthFormFeedback
-                                >
+                    :state="protection.state.value"
-                                    <Spinner class="size-6" />
+                    :response-status="protection.responseStatus.value"
-                                </div>
+                    @retry="submit"
-                                <div
+                />
-                                    v-else
+                <div class="grid gap-2">
-                                    class="relative z-10 overflow-hidden border p-5"
+                    <Label for="authentication-code">{{
-                                >
+                        t('security.authenticationCode')
-                                    <div
+                    }}</Label>
-                                        v-html="qrCodeSvg"
+                    <Input
-                                        class="flex aspect-square size-full items-center justify-center"
+                        id="authentication-code"
-                                        :style="{
+                        ref="codeInput"
-                                            filter:
+                        v-model="form.code"
-                                                resolvedAppearance === 'dark'
+                        name="code"
-                                                    ? 'invert(1) brightness(1.5)'
+                        type="text"
-                                                    : undefined,
+                        inputmode="numeric"
-                                        }"
+                        autocomplete="one-time-code"
-                                    />
+                        pattern="[0-9]{6}"
-                                </div>
+                        maxlength="6"
-                            </div>
+                        required
-                        </div>
+                        :disabled="form.processing"
-
+                        :aria-invalid="!!form.errors.code"
-                        <div class="flex w-full items-center space-x-5">
+                        aria-describedby="authentication-code-error"
-                            <Button class="w-full" @click="handleModalNextStep">
+                        class="font-mono text-lg tracking-widest"
-                                {{ modalConfig.buttonText }}
+                    />
-                            </Button>
+                    <InputError
-                        </div>
+                        id="authentication-code-error"
-
+                        :message="form.errors.code"
-                        <div
+                    />
-                            class="relative flex w-full items-center justify-center"
+                </div>
-                        >
+                <DialogFooter>
-                            <div
+                    <Button
-                                class="bg-border absolute inset-0 top-1/2 h-px w-full"
+                        type="button"
-                            />
+                        variant="outline"
-                            <span class="bg-card relative px-2 py-1"
+                        :disabled="form.processing"
-                                >or, enter the code manually</span
+                        @click="
-                            >
+                            verification = false;
-                        </div>
+                            form.resetAndClearErrors();
-
+                            protection.clearFeedback();
-                        <div
+                        "
-                            class="flex w-full items-center justify-center space-x-2"
+                        >{{ t('common.back') }}</Button
-                        >
-                            <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 }"
                     >
-                        <input type="hidden" name="code" :value="code" />
+                    <Button
-                        <div
+                        type="submit"
-                            ref="pinInputContainerRef"
+                        :disabled="form.code.length !== 6"
-                            class="relative w-full space-y-3"
+                        :loading="form.processing"
-                        >
+                        >{{ t('security.confirm') }}</Button
-                            <div
+                    >
-                                class="flex w-full flex-col items-center justify-center space-y-3 py-2"
+                </DialogFooter>
-                            >
+            </form>
-                                <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/UserInfo.vue

@@ -1,33 +1,22 @@
 <script setup lang="ts">
-import { computed } from 'vue';
-import { useInitials } from '@/composables/useInitials';
-import type { User } from '@/types';
 import UserAvatar from '@/components/ui/avatar/UserAvatar.vue';
+import type { User } from '@/types';
 
-type Props = {
+withDefaults(defineProps<{ user: User; showEmail?: boolean }>(), {
-    user: User;
-    showEmail?: boolean;
-};
-
-const props = withDefaults(defineProps<Props>(), {
     showEmail: false,
 });
-
-const { getInitials } = useInitials();
-
-// Compute whether we should show the avatar image
-const showAvatar = computed(
-    () => props.user.avatar && props.user.avatar !== '',
-);
 </script>
 
 <template>
-    <UserAvatar />
+    <div class="flex min-w-0 items-center gap-2">
-
+        <UserAvatar :user="user" />
-    <div class="grid flex-1 text-left text-sm leading-tight">
+        <div class="grid min-w-0 flex-1 text-left text-sm leading-tight">
-        <span class="truncate font-medium">{{ user.name }}</span>
+            <span class="truncate font-medium">{{ user.name }}</span>
-        <span v-if="showEmail" class="text-muted-foreground truncate text-xs">{{
+            <span
-            user.email
+                v-if="showEmail"
-        }}</span>
+                class="text-muted-foreground truncate text-xs"
+                >{{ user.email }}</span
+            >
+        </div>
     </div>
 </template>

resources/js/components/UserMenuContent.vue

@@ -11,6 +11,7 @@ import UserInfo from '@/components/UserInfo.vue';
 import { logout } from '@/routes/index';
 import { edit } from '@/routes/profile/index';
 import type { User } from '@/types';
+import { useLocalization } from '@/composables/useLocalization';
 
 type Props = {
     user: User;
@@ -21,6 +22,7 @@ const handleLogout = () => {
 };
 
 defineProps<Props>();
+const { t } = useLocalization();
 </script>
 
 <template>
@@ -34,7 +36,7 @@ defineProps<Props>();
         <DropdownMenuItem :as-child="true">
             <Link class="block w-full cursor-pointer" :href="edit()" prefetch>
                 <Settings class="mr-2 h-4 w-4" />
-                Settings
+                {{ t('navigation.settings') }}
             </Link>
         </DropdownMenuItem>
     </DropdownMenuGroup>
@@ -48,7 +50,7 @@ defineProps<Props>();
             data-test="logout-button"
         >
             <LogOut class="mr-2 h-4 w-4" />
-            Log out
+            {{ t('navigation.logout') }}
         </Link>
     </DropdownMenuItem>
 </template>

resources/js/components/projects/MetadataEditorDialog.vue

@@ -0,0 +1,363 @@
+<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

@@ -0,0 +1,147 @@
+<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/TemplateInheritancePanel.vue

@@ -1,26 +1,32 @@
 <script setup lang="ts">
 import { useForm } from '@inertiajs/vue3';
-import ProjectController from '@/actions/App/Http/Controllers/ProjectController';
+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 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 {
-    Card,
+    Dialog,
-    CardContent,
+    DialogContent,
-    CardDescription,
+    DialogDescription,
-    CardHeader,
+    DialogFooter,
-    CardTitle,
+    DialogHeader,
-} from '@/components/ui/card';
+    DialogTitle,
+} from '@/components/ui/dialog';
 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>;
@@ -28,51 +34,82 @@ const form = useForm<{
     areas: [],
     status_replacements: {},
 });
-
+const protection = useFormProtection(form);
-const activeArea = computed(() => form.areas[0]);
+const pendingArea = ref<ProjectTemplateStateArea | null>(null);
-
 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(() =>
-const statusRequirement = computed(
+    pendingArea.value?.value === 'ticket_statuses'
-    () => props.templateState?.resetRequirements?.ticket_statuses,
+        ? props.templateState?.resetRequirements?.ticket_statuses
+        : undefined,
 );
-
+const canReset = computed(
-const canReset = (area: ProjectTemplateStateArea): boolean => {
+    () =>
-    if (area.value !== 'ticket_statuses') {
+        statusRequirement.value?.removedStatuses.every((status) =>
-        return true;
+            statusRequirement.value?.replacementOptions.some(
-    }
+                (option) =>
-
+                    option.id === form.status_replacements[String(status.id)],
-    return (
+            ),
-        statusRequirement.value?.removedStatuses.every(
+        ) ?? true,
-            (status) =>
+);
-                form.status_replacements[String(status.id)] !== undefined,
+const areaKeys = {
-        ) ?? true
+    project_settings: 'inheritance.area.projectSettings',
-    );
+    board_columns: 'inheritance.area.boardColumns',
-};
+    ticket_statuses: 'inheritance.area.ticketStatuses',
-
+    status_transitions: 'inheritance.area.statusTransitions',
-const resetArea = (area: ProjectTemplateStateArea): void => {
+    ticket_types: 'inheritance.area.ticketTypes',
-    if (!canReset(area)) {
+    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()) {
         return;
     }
-
+    pendingArea.value = null;
-    form.areas = [area.value];
+    form.resetAndClearErrors();
-    form.post(ProjectController.resetTemplate.url(props.projectId), {
+    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), {
         preserveScroll: true,
-        onSuccess: () => form.reset(),
+        onSuccess: () => {
+            form.resetAndClearErrors();
+            pendingArea.value = null;
+        },
     });
-};
+}
 </script>
 
 <template>
@@ -81,97 +118,208 @@ const resetArea = (area: ProjectTemplateStateArea): void => {
             templateState?.inheritsFromTemplate &&
             (inheritedAreas.length > 0 || overriddenAreas.length > 0)
         "
+        class="min-w-0 gap-0 overflow-hidden rounded-xl py-0 shadow-none"
     >
-        <CardHeader>
+        <CardHeader class="gap-stack grid-cols-1 border-b p-5 sm:p-6">
-            <CardTitle>
+            <div class="flex items-center gap-2">
-                Template inheritance: {{ templateState.templateName }}
+                <Layers3
-            </CardTitle>
+                    class="text-primary size-5 shrink-0"
-            <CardDescription>
+                    aria-hidden="true"
-                Every setting area inherits independently. Local changes stay
+                />
-                unchanged when the template is updated until that area is reset.
+                <h2 class="text-title">{{ t('inheritance.title') }}</h2>
-            </CardDescription>
+            </div>
+            <p class="text-muted-foreground break-words">
+                {{
+                    t('inheritance.description', {
+                        template: templateState.templateName,
+                    })
+                }}
+            </p>
         </CardHeader>
-        <CardContent class="space-y-4">
+        <CardContent class="gap-column grid min-w-0 p-5 sm:p-6">
-            <div class="flex flex-wrap gap-2">
+            <p class="text-caption text-muted-foreground">
-                <Badge
+                {{ t('inheritance.help') }}
-                    v-for="area in inheritedAreas"
+            </p>
-                    :key="`inherited-${area.value}`"
+            <ul
-                    variant="outline"
+                class="grid min-w-0 divide-y"
-                >
+                :aria-label="t('inheritance.areas')"
-                    {{ area.label }} · inherited
-                </Badge>
-            </div>
-
-            <div
-                v-for="area in overriddenAreas"
-                :key="`overridden-${area.value}`"
-                class="space-y-3 rounded-lg border p-4"
             >
-                <div class="flex flex-wrap items-center justify-between gap-3">
+                <li
-                    <Badge>{{ area.label }} · template overridden</Badge>
+                    v-for="area in inheritedAreas"
-                    <Button
+                    :key="area.value"
-                        type="button"
+                    class="flex min-w-0 flex-wrap items-center justify-between gap-3 py-3"
-                        size="sm"
-                        variant="outline"
-                        :disabled="form.processing || !canReset(area)"
-                        @click="resetArea(area)"
-                    >
-                        {{
-                            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">
+                    <span class="min-w-0 break-words font-medium">{{
-                        Choose where tickets in local statuses should move
+                        areaLabel(area)
-                        before those statuses are removed.
+                    }}</span>
-                    </p>
+                    <Badge
-                    <div
+                        variant="outline"
-                        v-for="status in statusRequirement.removedStatuses"
+                        class="border-primary/25 text-primary"
-                        :key="status.id"
+                        >{{ t('projectSettings.inherited') }}</Badge
-                        class="grid gap-2 sm:grid-cols-2 sm:items-center"
                     >
-                        <Label :for="`replacement-${status.id}`">
+                </li>
-                            {{ status.name }} ({{ status.ticketCount }} tickets)
+                <li
-                        </Label>
+                    v-for="area in overriddenAreas"
-                        <div class="grid gap-1">
+                    :key="area.value"
-                            <select
+                    class="gap-stack grid min-w-0 py-3"
-                                :id="`replacement-${status.id}`"
+                >
-                                v-model="
+                    <div
-                                    form.status_replacements[String(status.id)]
+                        class="flex min-w-0 flex-wrap items-center justify-between gap-3"
-                                "
+                    >
-                                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]"
+                        <span class="min-w-0 break-words font-medium">{{
-                            >
+                            areaLabel(area)
-                                <option :value="undefined" disabled>
+                        }}</span>
-                                    Select replacement status
+                        <Badge variant="secondary">{{
-                                </option>
+                            t('projectSettings.override')
-                                <option
+                        }}</Badge>
-                                    v-for="option in statusRequirement.replacementOptions"
-                                    :key="option.id"
-                                    :value="option.id"
-                                >
-                                    {{ option.name }}
-                                </option>
-                            </select>
-                            <InputError
-                                :message="
-                                    form.errors[
-                                        `status_replacements.${status.id}`
-                                    ]
-                                "
-                            />
-                        </div>
                     </div>
-                </div>
+                    <div
-
+                        class="flex flex-col items-start justify-between gap-3 sm:flex-row sm:items-center"
-                <InputError :message="form.errors.areas" />
+                    >
-            </div>
+                        <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()"
+            >
+                <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"
+                    >
+                        <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"
+                            >
+                                <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>
+                                        {{ 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>
+                        </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>
     </Card>
 </template>

resources/js/components/projects/TicketDisplaySettings.vue

@@ -0,0 +1,101 @@
+<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/WorkflowEditorDialog.vue

@@ -0,0 +1,277 @@
+<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

@@ -0,0 +1,106 @@
+<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

@@ -0,0 +1,282 @@
+<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/tickets/AcceptanceCriteriaChecklist.vue

@@ -0,0 +1,320 @@
+<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

@@ -0,0 +1,107 @@
+<script setup lang="ts">
+import { Link } from '@inertiajs/vue3';
+import { ArrowUpRight } from 'lucide-vue-next';
+import TicketMetadata from '@/components/tickets/TicketMetadata.vue';
+import { Badge } from '@/components/ui/badge';
+import { useLocalization } from '@/composables/useLocalization';
+import { show as showTicket } from '@/routes/projects/tickets';
+import type {
+    TicketPresentationEmits,
+    TicketPresentationProps,
+} from '@/types/ticket-presentation';
+
+withDefaults(defineProps<TicketPresentationProps>(), {
+    layout: 'card',
+    showDescription: true,
+    showStatus: true,
+});
+
+const emit = defineEmits<TicketPresentationEmits>();
+const { t } = useLocalization();
+</script>
+
+<template>
+    <article
+        :class="[
+            'bg-card text-card-foreground min-w-0 rounded-md border',
+            layout === 'card' ? '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-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"
+                >
+                    {{ 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" />
+            </div>
+        </div>
+    </article>
+</template>

resources/js/components/tickets/TicketFormField.vue

@@ -0,0 +1,89 @@
+<script setup lang="ts">
+import InputError from '@/components/InputError.vue';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+
+withDefaults(
+    defineProps<{
+        id: string;
+        label: string;
+        kind?: 'text' | 'number' | 'textarea' | 'select';
+        options?: { value: string | number; label: string }[];
+        error?: string;
+        hint?: string;
+        disabled?: boolean;
+        required?: boolean;
+        autofocus?: boolean;
+        placeholder?: string;
+        rows?: number;
+        min?: number;
+        step?: string;
+    }>(),
+    { kind: 'text', rows: 5 },
+);
+
+const model = defineModel<string | number | null>({ required: true });
+const controlClass =
+    'min-h-control border-input bg-card focus-visible:border-ring focus-visible:ring-ring/35 w-full min-w-0 rounded-md border px-3 py-2 text-base shadow-xs outline-none transition-[border-color,box-shadow] hover:border-primary/45 focus-visible:ring-2 disabled:cursor-not-allowed disabled:bg-muted disabled:opacity-60 aria-invalid:border-destructive aria-invalid:ring-2 aria-invalid:ring-destructive/25 md:text-body';
+</script>
+
+<template>
+    <div class="grid min-w-0 content-start gap-2">
+        <Label :for="id">{{ label }}</Label>
+        <select
+            v-if="kind === 'select'"
+            :id="id"
+            v-model="model"
+            :name="id"
+            :disabled="disabled"
+            :required="required"
+            :aria-invalid="Boolean(error)"
+            :aria-describedby="`${id}-hint ${id}-error`"
+            :class="controlClass"
+        >
+            <option
+                v-for="option in options"
+                :key="option.value"
+                :value="option.value"
+            >
+                {{ option.label }}
+            </option>
+        </select>
+        <textarea
+            v-else-if="kind === 'textarea'"
+            :id="id"
+            v-model="model"
+            :name="id"
+            :rows="rows"
+            :disabled="disabled"
+            :required="required"
+            :placeholder="placeholder"
+            :aria-invalid="Boolean(error)"
+            :aria-describedby="`${id}-hint ${id}-error`"
+            :class="controlClass"
+        />
+        <Input
+            v-else
+            :id="id"
+            v-model="model"
+            :name="id"
+            :type="kind"
+            :disabled="disabled"
+            :required="required"
+            :autofocus="autofocus"
+            :placeholder="placeholder"
+            :min="min"
+            :step="step"
+            :maxlength="kind === 'text' ? 255 : undefined"
+            :invalid="Boolean(error)"
+            :aria-describedby="`${id}-hint ${id}-error`"
+        />
+        <p
+            :id="`${id}-hint`"
+            class="text-muted-foreground text-xs empty:hidden"
+        >
+            {{ hint }}
+        </p>
+        <InputError :id="`${id}-error`" :message="error" />
+    </div>
+</template>

resources/js/components/tickets/TicketFormFields.vue

@@ -0,0 +1,157 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import TicketFormField from '@/components/tickets/TicketFormField.vue';
+import { useLocalization } from '@/composables/useLocalization';
+import { ticketStatusLabel } from '@/lib/tickets';
+import type { ProjectTicketCreatePageProps } from '@/types';
+
+const props = defineProps<
+    Pick<
+        ProjectTicketCreatePageProps,
+        | 'project'
+        | 'ticketTypes'
+        | 'ticketPriorities'
+        | 'users'
+        | 'parentTicketOptions'
+    > & {
+        errors: Record<string, string>;
+        disabled?: boolean;
+        autofocus?: boolean;
+        ticketStatusOptions?: ProjectTicketCreatePageProps['ticketStatusOptions'];
+    }
+>();
+const title = defineModel<string>('title', { required: true });
+const description = defineModel<string>('description', { required: true });
+const type = defineModel<string | number>('type', { required: true });
+const priority = defineModel<string | number>('priority', { required: true });
+const assignee = defineModel<string | number>('assignee', { required: true });
+const parent = defineModel<string | number>('parent', { required: true });
+const points = defineModel<string | number | null>('points', {
+    required: true,
+});
+const status = defineModel<string | number>('status');
+const { t } = useLocalization();
+const typeOptions = computed(() =>
+    props.ticketTypes.map((item) => ({ value: item.id, label: item.name })),
+);
+const priorityOptions = computed(() =>
+    props.ticketPriorities.map((item) => ({
+        value: item.id,
+        label: item.name,
+    })),
+);
+const userOptions = computed(() => [
+    { value: '', label: t('tickets.unassigned') },
+    ...props.users.map((item) => ({ value: item.id, label: item.name })),
+]);
+const parentOptions = computed(() => [
+    { value: '', label: t('ticketDetail.noParent') },
+    ...props.parentTicketOptions.map((item) => ({
+        value: item.id,
+        label: `${item.ticket_key} - ${item.title}`,
+    })),
+]);
+const statusOptions = computed(
+    () =>
+        props.ticketStatusOptions?.map((item) => ({
+            value: item.id,
+            label: ticketStatusLabel(item, t('ticketDetail.notSet')),
+        })) ?? [],
+);
+</script>
+
+<template>
+    <div class="grid min-w-0 gap-6">
+        <TicketFormField
+            id="title"
+            v-model="title"
+            :label="t('ticketDetail.title')"
+            :error="errors.title"
+            :disabled="disabled"
+            :autofocus="autofocus"
+            :placeholder="t('ticketForm.titlePlaceholder')"
+            required
+        />
+        <TicketFormField
+            id="description"
+            v-model="description"
+            kind="textarea"
+            :label="t('ticketDetail.description')"
+            :error="errors.description"
+            :disabled="disabled"
+            :placeholder="t('ticketForm.descriptionPlaceholder')"
+        />
+        <slot name="content" />
+        <fieldset
+            class="bg-muted/20 grid min-w-0 gap-5 rounded-xl border p-4 sm:p-5"
+            :disabled="disabled"
+        >
+            <legend class="px-2 text-sm font-semibold">
+                {{ t('ticketDetail.metadata') }}
+            </legend>
+            <div class="grid min-w-0 gap-5 sm:grid-cols-2">
+                <TicketFormField
+                    id="ticket_type_id"
+                    v-model="type"
+                    kind="select"
+                    :label="t('ticketDetail.type')"
+                    :options="typeOptions"
+                    :error="errors.ticket_type_id"
+                    :disabled="disabled"
+                    required
+                />
+                <TicketFormField
+                    id="ticket_priority_id"
+                    v-model="priority"
+                    kind="select"
+                    :label="t('ticketDetail.priority')"
+                    :options="priorityOptions"
+                    :error="errors.ticket_priority_id"
+                    :disabled="disabled"
+                    required
+                />
+                <TicketFormField
+                    v-if="ticketStatusOptions && status !== undefined"
+                    id="ticket_status_id"
+                    v-model="status"
+                    kind="select"
+                    :label="t('ticketDetail.status')"
+                    :options="statusOptions"
+                    :error="errors.ticket_status_id"
+                    :disabled="disabled"
+                    required
+                />
+                <TicketFormField
+                    id="assignee_user_id"
+                    v-model="assignee"
+                    kind="select"
+                    :label="t('ticketDetail.assignee')"
+                    :options="userOptions"
+                    :error="errors.assignee_user_id"
+                    :disabled="disabled"
+                />
+                <TicketFormField
+                    id="parent_ticket_id"
+                    v-model="parent"
+                    kind="select"
+                    :label="t('ticketDetail.parent')"
+                    :options="parentOptions"
+                    :error="errors.parent_ticket_id"
+                    :disabled="disabled"
+                />
+                <TicketFormField
+                    v-if="project.show_story_points"
+                    id="story_points"
+                    v-model="points"
+                    kind="number"
+                    :label="t('ticketDetail.storyPoints')"
+                    :error="errors.story_points"
+                    :disabled="disabled"
+                    :min="0"
+                    step="1"
+                />
+                <slot name="metadata" />
+            </div>
+        </fieldset>
+    </div>
+</template>

resources/js/components/tickets/TicketListItem.vue

@@ -0,0 +1,88 @@
+<script setup lang="ts">
+import { Link } from '@inertiajs/vue3';
+import { ArrowUpRight } from 'lucide-vue-next';
+import TicketMetadata from '@/components/tickets/TicketMetadata.vue';
+import { Badge } from '@/components/ui/badge';
+import { useLocalization } from '@/composables/useLocalization';
+import { show as showTicket } from '@/routes/projects/tickets';
+import type {
+    TicketPresentationEmits,
+    TicketPresentationProps,
+} from '@/types/ticket-presentation';
+
+withDefaults(defineProps<TicketPresentationProps>(), {
+    showDescription: true,
+    showStatus: true,
+});
+
+const emit = defineEmits<TicketPresentationEmits>();
+const { t } = useLocalization();
+</script>
+
+<template>
+    <li
+        :class="[
+            'bg-card text-card-foreground min-w-0 rounded-md border',
+            ticket.is_blocked ? 'border-warning' : 'border-border',
+        ]"
+    >
+        <div class="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-1 flex-col rounded-t-md p-4 transition-[background-color,box-shadow] focus-visible:outline-none focus-visible:ring-2 lg:rounded-l-md lg:rounded-tr-none"
+                @click="emit('open', ticket.id)"
+            >
+                <div class="flex min-w-0 items-start gap-3">
+                    <Badge
+                        variant="outline"
+                        class="wrap-anywhere max-w-full whitespace-normal"
+                    >
+                        {{ ticket.ticket_key }}
+                    </Badge>
+                    <h3
+                        class="text-body group-hover:text-primary wrap-anywhere min-w-0 flex-1 font-semibold"
+                    >
+                        {{ ticket.title }}
+                    </h3>
+                    <ArrowUpRight
+                        class="text-muted-foreground group-hover:text-primary size-4 shrink-0"
+                        aria-hidden="true"
+                    />
+                </div>
+
+                <TicketMetadata :ticket="ticket" :show-status="showStatus" />
+
+                <p
+                    v-if="showDescription && ticket.description"
+                    class="text-caption text-muted-foreground wrap-anywhere line-clamp-2"
+                >
+                    {{ 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 lg:flex lg:w-80 lg:items-center lg:border-l lg:border-t-0"
+            >
+                <slot name="actions" />
+            </div>
+        </div>
+    </li>
+</template>

resources/js/components/tickets/TicketMetadata.vue

@@ -0,0 +1,91 @@
+<script setup lang="ts">
+import { CircleUserRound, OctagonAlert } from 'lucide-vue-next';
+import { computed } from 'vue';
+import { Badge } from '@/components/ui/badge';
+import { UserAvatar } from '@/components/ui/avatar';
+import { useLocalization } from '@/composables/useLocalization';
+import { ticketStatusLabel } from '@/lib/tickets';
+import type { TicketModel } from '@/types/models/ticket-model';
+
+const props = withDefaults(
+    defineProps<{
+        showStatus?: boolean;
+        ticket: TicketModel;
+    }>(),
+    {
+        showStatus: true,
+    },
+);
+
+const { t } = useLocalization();
+const statusLabel = computed(() =>
+    ticketStatusLabel(props.ticket.ticket_status, t('tickets.noStatus')),
+);
+</script>
+
+<template>
+    <div class="gap-stack flex min-w-0 flex-wrap items-center">
+        <Badge
+            v-if="ticket.is_blocked"
+            variant="warning"
+            :aria-label="t('tickets.blocked')"
+        >
+            <OctagonAlert aria-hidden="true" />
+            {{ t('tickets.blocked') }}
+        </Badge>
+
+        <Badge
+            variant="secondary"
+            :aria-label="
+                t('tickets.typeLabel', { name: ticket.ticket_type.name })
+            "
+            :data-ticket-type-id="ticket.ticket_type.id"
+        >
+            {{ ticket.ticket_type.name }}
+        </Badge>
+
+        <Badge
+            variant="outline"
+            :aria-label="
+                t('tickets.priorityLabel', {
+                    name: ticket.ticket_priority.name,
+                })
+            "
+            :data-ticket-priority-id="ticket.ticket_priority.id"
+        >
+            {{ ticket.ticket_priority.name }}
+        </Badge>
+
+        <Badge
+            v-if="showStatus"
+            variant="outline"
+            :aria-label="t('tickets.statusLabel', { name: statusLabel })"
+            :data-ticket-status-id="ticket.ticket_status?.id"
+        >
+            {{ statusLabel }}
+        </Badge>
+
+        <span
+            v-if="ticket.assignee"
+            class="text-caption text-muted-foreground flex min-w-0 items-center gap-1.5"
+            :aria-label="
+                t('tickets.assignedTo', { name: ticket.assignee.name })
+            "
+        >
+            <UserAvatar
+                :user="ticket.assignee"
+                size="sm"
+                :label="ticket.assignee.name"
+            />
+            <span class="max-w-40 truncate">{{ ticket.assignee.name }}</span>
+        </span>
+
+        <span
+            v-else
+            class="text-caption text-muted-foreground flex items-center gap-1.5"
+        >
+            <CircleUserRound class="size-4" aria-hidden="true" />
+            {{ t('tickets.unassigned') }}
+        </span>
+    </div>
+</template>

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

@@ -0,0 +1,416 @@
+<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

@@ -0,0 +1,204 @@
+<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

@@ -0,0 +1,497 @@
+<script setup lang="ts">
+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 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 { useFormProtection } from '@/composables/useFormProtection';
+import {
+    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 draftKey = `projects:${props.project.id}:tickets:${props.ticket.id}:edit`;
+const acceptanceCriteriaDraft = useRemember(
+    { items: normalizeAcceptanceCriteria(props.ticket.acceptance_criteria) },
+    `${draftKey}:criteria`,
+);
+const acceptanceCriteriaItems = toRef(unref(acceptanceCriteriaDraft), 'items');
+const savedAcceptanceCriteria = ref(
+    normalizeAcceptanceCriteria(props.ticket.acceptance_criteria),
+);
+const isPersistingAcceptanceCriteriaToggle = ref(false);
+const acceptanceCriteriaToggleError = ref('');
+
+const savedFormData = () => ({
+    acceptance_criteria: normalizeAcceptanceCriteria(
+        savedAcceptanceCriteria.value,
+    ),
+    assignee_user_id: props.ticket.assignee_user_id ?? '',
+    author_user_id: props.ticket.author_user_id ?? '',
+    blocked_comment: props.ticket.blocked_comment ?? '',
+    description: props.ticket.description ?? '',
+    field_values: props.ticketFieldDefinitions.map((ticketFieldDefinition) => {
+        const currentFieldValue = props.ticket.field_values?.find(
+            (fieldValue) =>
+                fieldValue.ticket_field_definition_id ===
+                ticketFieldDefinition.id,
+        );
+
+        return {
+            ticket_field_definition_id: ticketFieldDefinition.id,
+            value_number: currentFieldValue?.value_number ?? '',
+            value_user_id: currentFieldValue?.value_user_id ?? '',
+        };
+    }),
+    is_blocked: props.ticket.is_blocked,
+    parent_ticket_id: props.ticket.parent_ticket_id ?? '',
+    ticket_priority_id: props.ticket.ticket_priority_id,
+    ticket_type_id: props.ticket.ticket_type_id,
+    title: props.ticket.title,
+    story_points: props.ticket.story_points,
+});
+
+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 hasUnsavedAcceptanceCriteriaDraft = computed(
+    () =>
+        JSON.stringify(acceptanceCriteriaItems.value) !==
+        JSON.stringify(savedAcceptanceCriteria.value),
+);
+
+const isDirty = computed(
+    () =>
+        props.canEditTicket &&
+        (form.isDirty || hasUnsavedAcceptanceCriteriaDraft.value),
+);
+const protection = useFormProtection(form, { isDirty: () => isDirty.value });
+const reset = (): void => {
+    if (
+        form.processing ||
+        isPersistingAcceptanceCriteriaToggle.value ||
+        !protection.confirmLeave()
+    ) {
+        return;
+    }
+    form.reset();
+    form.clearErrors();
+    acceptanceCriteriaItems.value = normalizeAcceptanceCriteria(
+        savedAcceptanceCriteria.value,
+    );
+    acceptanceCriteriaToggleError.value = '';
+    protection.clearFeedback();
+};
+
+const acceptanceCriteriaError = computed(() => {
+    return (
+        form.errors.acceptance_criteria ??
+        Object.entries(form.errors).find(([key]) =>
+            key.startsWith('acceptance_criteria.'),
+        )?.[1] ??
+        ''
+    );
+});
+
+const buildSavedTicketPayload = (
+    acceptanceCriteria = savedAcceptanceCriteria.value,
+) => ({
+    acceptance_criteria: acceptanceCriteria,
+    assignee_user_id: props.ticket.assignee_user_id,
+    author_user_id: props.ticket.author_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 persistAcceptanceCriteriaToggle = async (
+    index: number,
+    checked: boolean,
+): Promise<void> => {
+    if (
+        !props.canEditTicket ||
+        form.processing ||
+        isPersistingAcceptanceCriteriaToggle.value ||
+        hasUnsavedAcceptanceCriteriaDraft.value
+    ) {
+        return;
+    }
+
+    const nextAcceptanceCriteria = syncAcceptanceCriteriaDescendantCheckedState(
+        savedAcceptanceCriteria.value,
+        index,
+        checked,
+    );
+    const csrfToken = document
+        .querySelector('meta[name="csrf-token"]')
+        ?.getAttribute('content');
+
+    isPersistingAcceptanceCriteriaToggle.value = true;
+    acceptanceCriteriaToggleError.value = '';
+
+    try {
+        const response = await fetch(
+            ProjectTicketController.update.url({
+                project: props.project.id,
+                ticket: props.ticket.id,
+            }),
+            {
+                method: 'PATCH',
+                credentials: 'same-origin',
+                headers: {
+                    Accept: 'application/json',
+                    'Content-Type': 'application/json',
+                    'X-CSRF-TOKEN': csrfToken ?? '',
+                    'X-Requested-With': 'XMLHttpRequest',
+                },
+                body: JSON.stringify(
+                    buildSavedTicketPayload(nextAcceptanceCriteria),
+                ),
+            },
+        );
+
+        if (!response.ok) {
+            throw new Error('Checklist toggle update failed.');
+        }
+
+        savedAcceptanceCriteria.value = nextAcceptanceCriteria;
+
+        acceptanceCriteriaItems.value = normalizeAcceptanceCriteria(
+            nextAcceptanceCriteria,
+        );
+        form.acceptance_criteria = nextAcceptanceCriteria;
+        form.defaults('acceptance_criteria', nextAcceptanceCriteria);
+    } catch (_error) {
+        acceptanceCriteriaToggleError.value = t('criteria.saveError');
+    } finally {
+        isPersistingAcceptanceCriteriaToggle.value = false;
+    }
+};
+
+const submit = (): void => {
+    if (
+        !props.canEditTicket ||
+        form.processing ||
+        isPersistingAcceptanceCriteriaToggle.value
+    ) {
+        return;
+    }
+
+    form.acceptance_criteria = acceptanceCriteriaItems.value;
+
+    protection.submit(
+        ProjectTicketController.update({
+            project: props.project.id,
+            ticket: props.ticket.id,
+        }),
+        {
+            preserveScroll: true,
+            onSuccess: () => {
+                savedAcceptanceCriteria.value = normalizeAcceptanceCriteria(
+                    props.ticket.acceptance_criteria,
+                );
+                acceptanceCriteriaItems.value = normalizeAcceptanceCriteria(
+                    savedAcceptanceCriteria.value,
+                );
+                Object.assign(form, savedFormData());
+                form.defaults();
+            },
+        },
+    );
+};
+</script>
+
+<template>
+    <div class="flex min-w-0 flex-col gap-6">
+        <section
+            id="ticket-description"
+            aria-labelledby="ticket-description-title"
+            class="scroll-mt-6"
+        >
+            <Card>
+                <CardHeader
+                    ><h2
+                        id="ticket-description-title"
+                        class="text-lg font-semibold"
+                    >
+                        {{ t('ticketDetail.description') }}
+                    </h2></CardHeader
+                >
+                <CardContent>
+                    <p
+                        class="wrap-anywhere whitespace-pre-wrap text-sm leading-7"
+                        :class="{
+                            'text-muted-foreground': !ticket.description,
+                        }"
+                    >
+                        {{
+                            ticket.description ||
+                            t('ticketDetail.noDescription')
+                        }}
+                    </p>
+                </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>
+        <details
+            v-if="canEditTicket"
+            id="ticket-edit"
+            ref="editor"
+            class="bg-card group rounded-xl border shadow-sm"
+        >
+            <summary
+                class="min-h-control focus-visible:ring-ring cursor-pointer rounded-xl px-6 py-4 font-semibold focus-visible:outline-none focus-visible:ring-2"
+            >
+                {{ t('ticketDetail.edit') }}
+            </summary>
+            <div class="border-t p-4 sm:p-6">
+                <p class="text-muted-foreground mb-6 text-sm">
+                    {{ t('ticketDetail.editDescription') }}
+                </p>
+                <form class="grid min-w-0 gap-6" @submit.prevent="submit">
+                    <FormFeedback
+                        :state="protection.state.value"
+                        @retry="submit"
+                    />
+                    <TicketFormFields
+                        v-model:title="form.title"
+                        v-model:description="form.description"
+                        v-model:type="form.ticket_type_id"
+                        v-model:priority="form.ticket_priority_id"
+                        v-model:assignee="form.assignee_user_id"
+                        v-model:parent="form.parent_ticket_id"
+                        v-model:points="form.story_points"
+                        :project="project"
+                        :ticket-types="ticketTypes"
+                        :ticket-priorities="ticketPriorities"
+                        :users="users"
+                        :parent-ticket-options="parentTicketOptions"
+                        :errors="form.errors"
+                        :disabled="
+                            form.processing ||
+                            isPersistingAcceptanceCriteriaToggle
+                        "
+                    >
+                        <template #content>
+                            <AcceptanceCriteriaChecklist
+                                v-model="acceptanceCriteriaItems"
+                                :disabled="
+                                    form.processing ||
+                                    isPersistingAcceptanceCriteriaToggle
+                                "
+                                :error="acceptanceCriteriaError"
+                            />
+                        </template>
+                        <template #metadata>
+                            <TicketFormField
+                                v-if="canViewAuthor"
+                                id="author_user_id"
+                                v-model="form.author_user_id"
+                                kind="select"
+                                :label="t('ticketDetail.author')"
+                                :hint="
+                                    !canEditAuthor
+                                        ? t('ticketForm.authorRestricted')
+                                        : undefined
+                                "
+                                :options="[
+                                    {
+                                        value: '',
+                                        label: t('ticketDetail.noAuthor'),
+                                    },
+                                    ...users.map((user) => ({
+                                        value: user.id,
+                                        label: user.name,
+                                    })),
+                                ]"
+                                :error="form.errors.author_user_id"
+                                :disabled="!canEditAuthor || form.processing"
+                            />
+                        </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('ticketDetail.customFields') }}
+                        </legend>
+                        <p class="text-muted-foreground text-sm">
+                            {{ t('ticketDetail.customFieldsDescription') }}
+                        </p>
+                        <InputError :message="form.errors.field_values" />
+                        <p
+                            v-if="!ticketFieldDefinitions.length"
+                            class="text-muted-foreground text-sm"
+                        >
+                            {{ t('ticketDetail.noCustomFields') }}
+                        </p>
+                        <div v-else class="grid min-w-0 gap-5 sm:grid-cols-2">
+                            <template
+                                v-for="(
+                                    definition, index
+                                ) in ticketFieldDefinitions"
+                                :key="definition.id"
+                            >
+                                <TicketFormField
+                                    v-if="definition.field_type === 'user'"
+                                    :id="`field-${definition.id}`"
+                                    v-model="
+                                        form.field_values[index].value_user_id
+                                    "
+                                    kind="select"
+                                    :label="definition.label"
+                                    :options="[
+                                        {
+                                            value: '',
+                                            label: t('tickets.unassigned'),
+                                        },
+                                        ...users.map((user) => ({
+                                            value: user.id,
+                                            label: user.name,
+                                        })),
+                                    ]"
+                                    :error="
+                                        form.errors[
+                                            `field_values.${index}.value_user_id`
+                                        ] ??
+                                        form.errors[
+                                            `field_values.${index}.ticket_field_definition_id`
+                                        ]
+                                    "
+                                />
+                                <TicketFormField
+                                    v-else
+                                    :id="`field-${definition.id}`"
+                                    v-model="
+                                        form.field_values[index].value_number
+                                    "
+                                    kind="number"
+                                    step="0.1"
+                                    :label="definition.label"
+                                    :error="
+                                        form.errors[
+                                            `field_values.${index}.value_number`
+                                        ] ??
+                                        form.errors[
+                                            `field_values.${index}.ticket_field_definition_id`
+                                        ]
+                                    "
+                                />
+                            </template>
+                        </div>
+                    </fieldset>
+                    <div
+                        class="flex flex-wrap items-center gap-3 border-t pt-5"
+                    >
+                        <Button
+                            type="submit"
+                            :disabled="
+                                form.processing ||
+                                isPersistingAcceptanceCriteriaToggle
+                            "
+                            >{{
+                                form.processing
+                                    ? t('ticketForm.saving')
+                                    : t('ticketDetail.saveChanges')
+                            }}</Button
+                        >
+                        <Button
+                            type="button"
+                            variant="outline"
+                            :disabled="
+                                form.processing ||
+                                isPersistingAcceptanceCriteriaToggle ||
+                                !isDirty
+                            "
+                            @click="reset"
+                            >{{ t('ticketForm.reset') }}</Button
+                        >
+                        <p role="status" class="text-muted-foreground text-sm">
+                            {{
+                                isDirty
+                                    ? t('ticketForm.unsaved')
+                                    : t('ticketForm.saved')
+                            }}
+                        </p>
+                    </div>
+                </form>
+            </div>
+        </details>
+    </div>
+</template>

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

@@ -0,0 +1,35 @@
+<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>();
+
+const { t } = useLocalization();
+</script>
+
+<template>
+    <section
+        id="ticket-git"
+        aria-labelledby="ticket-git-title"
+        class="wrap-anywhere flex min-w-0 scroll-mt-6 flex-col gap-4"
+    >
+        <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"
+            />
+        </div>
+    </section>
+</template>

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

@@ -0,0 +1,80 @@
+<script setup lang="ts">
+import { Link } from '@inertiajs/vue3';
+import { ArrowLeft, Columns3, ListTree } from 'lucide-vue-next';
+import TicketMetadata from '@/components/tickets/TicketMetadata.vue';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { useLocalization } from '@/composables/useLocalization';
+import { index as backlogIndex } from '@/routes/projects/backlog';
+import { index as boardIndex } from '@/routes/projects/board';
+import { show } from '@/routes/projects';
+import type { TicketDetailHeaderProps } from '@/types/ticket-detail';
+defineProps<TicketDetailHeaderProps>();
+const { t } = useLocalization();
+const sections = [
+    'description',
+    'checklist',
+    'metadata',
+    'blocker',
+    'relationships',
+    'history',
+    'git',
+] as const;
+</script>
+<template>
+    <header class="flex min-w-0 flex-col gap-5">
+        <div class="flex flex-wrap items-center justify-between gap-3">
+            <Button as-child variant="ghost" class="max-w-full"
+                ><Link :href="show(project.id)"
+                    ><ArrowLeft aria-hidden="true" />{{
+                        t('ticketDetail.backToProject')
+                    }}</Link
+                ></Button
+            >
+            <div class="flex flex-wrap gap-2">
+                <Button as-child variant="outline"
+                    ><Link :href="backlogIndex(project.id)"
+                        ><ListTree aria-hidden="true" />{{
+                            t('ticketDetail.openBacklog')
+                        }}</Link
+                    ></Button
+                >
+                <Button as-child variant="outline"
+                    ><Link :href="boardIndex(project.id)"
+                        ><Columns3 aria-hidden="true" />{{
+                            t('ticketDetail.openBoard')
+                        }}</Link
+                    ></Button
+                >
+            </div>
+        </div>
+        <div class="flex min-w-0 flex-col gap-3">
+            <div class="flex flex-wrap items-center gap-2">
+                <span class="text-primary font-mono text-sm font-semibold">{{
+                    ticket.ticket_key
+                }}</span
+                ><Badge v-if="!canEditTicket" variant="outline">{{
+                    t('ticketDetail.readOnly')
+                }}</Badge>
+            </div>
+            <h1
+                class="wrap-anywhere text-2xl font-semibold leading-tight tracking-tight sm:text-3xl"
+            >
+                {{ ticket.title }}
+            </h1>
+            <TicketMetadata :ticket="ticket" />
+        </div>
+        <nav
+            :aria-label="t('ticketDetail.sections')"
+            class="flex flex-wrap gap-1 border-b pb-3"
+        >
+            <a
+                v-for="section in sections"
+                :key="section"
+                :href="`#ticket-${section}`"
+                class="min-h-control text-muted-foreground hover:bg-accent hover:text-accent-foreground focus-visible:ring-ring inline-flex items-center rounded-lg px-3 text-sm transition-colors focus-visible:outline-none focus-visible:ring-2"
+                >{{ t(`ticketDetail.${section}`) }}</a
+            >
+        </nav>
+    </header>
+</template>

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

@@ -0,0 +1,119 @@
+<script setup lang="ts">
+import { useLocalization } from '@/composables/useLocalization';
+import {
+    Card,
+    CardContent,
+    CardDescription,
+    CardHeader,
+} 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>
+    <section
+        id="ticket-history"
+        aria-labelledby="ticket-history-title"
+        class="wrap-anywhere min-w-0 scroll-mt-6"
+    >
+        <Card class="h-fit">
+            <CardHeader>
+                <h2 id="ticket-history-title" class="text-lg font-semibold">
+                    {{ t('ticketDetail.history') }}
+                </h2>
+                <CardDescription>{{
+                    t('ticketDetail.historyDescription')
+                }}</CardDescription>
+            </CardHeader>
+
+            <CardContent class="space-y-4">
+                <div
+                    v-if="(ticket.worklog_entries?.length ?? 0) === 0"
+                    class="border-border text-muted-foreground rounded-xl border border-dashed px-4 py-6 text-sm"
+                >
+                    {{ t('ticketDetail.noHistory') }}
+                </div>
+
+                <ol v-else class="relative grid gap-0" role="list">
+                    <li
+                        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"
+                    >
+                        <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
+                            </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>
+            </CardContent>
+        </Card>
+    </section>
+</template>

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

@@ -0,0 +1,165 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { UserAvatar } from '@/components/ui/avatar';
+import { Badge } from '@/components/ui/badge';
+import { Card, CardContent, CardHeader } from '@/components/ui/card';
+import { useLocalization } from '@/composables/useLocalization';
+import { ticketStatusLabel } from '@/lib/tickets';
+import type { TicketDetailMetadataProps } from '@/types/ticket-detail';
+const props = defineProps<TicketDetailMetadataProps>();
+const { t, date, number } = useLocalization();
+const fields = computed(() =>
+    props.ticketFieldDefinitions.map((definition) => {
+        const value = props.ticket.field_values?.find(
+            (field) => field.ticket_field_definition_id === definition.id,
+        );
+        return {
+            id: definition.id,
+            label: definition.label,
+            value:
+                definition.field_type === 'user'
+                    ? (value?.user_value?.name ?? t('tickets.unassigned'))
+                    : value?.value_number != null
+                      ? number(value.value_number)
+                      : t('ticketDetail.notSet'),
+        };
+    }),
+);
+</script>
+<template>
+    <section
+        id="ticket-metadata"
+        aria-labelledby="ticket-metadata-title"
+        class="min-w-0 scroll-mt-6"
+    >
+        <Card class="bg-muted/30">
+            <CardHeader
+                ><h2 id="ticket-metadata-title" class="text-lg font-semibold">
+                    {{ t('ticketDetail.metadata') }}
+                </h2></CardHeader
+            >
+            <CardContent class="wrap-anywhere flex min-w-0 flex-col gap-6">
+                <dl
+                    class="grid min-w-0 gap-5 text-sm sm:grid-cols-2 xl:grid-cols-1"
+                >
+                    <div class="space-y-2">
+                        <dt class="text-muted-foreground">
+                            {{ t('ticketDetail.status') }}
+                        </dt>
+                        <dd>
+                            {{
+                                ticketStatusLabel(
+                                    ticket.ticket_status,
+                                    t('tickets.noStatus'),
+                                )
+                            }}
+                        </dd>
+                    </div>
+                    <div class="space-y-2">
+                        <dt class="text-muted-foreground">
+                            {{ t('ticketDetail.type') }}
+                        </dt>
+                        <dd>{{ ticket.ticket_type.name }}</dd>
+                    </div>
+                    <div class="space-y-2">
+                        <dt class="text-muted-foreground">
+                            {{ t('ticketDetail.priority') }}
+                        </dt>
+                        <dd>
+                            <Badge variant="outline">{{
+                                ticket.ticket_priority.name
+                            }}</Badge>
+                        </dd>
+                    </div>
+                    <div class="space-y-2">
+                        <dt class="text-muted-foreground">
+                            {{ t('ticketDetail.assignee') }}
+                        </dt>
+                        <dd class="flex items-center gap-2">
+                            <UserAvatar
+                                v-if="ticket.assignee"
+                                :user="ticket.assignee"
+                                size="sm"
+                            />{{
+                                ticket.assignee?.name ?? t('tickets.unassigned')
+                            }}
+                        </dd>
+                    </div>
+                    <div
+                        v-if="project.show_author || canManageProject"
+                        class="space-y-2"
+                    >
+                        <dt class="text-muted-foreground">
+                            {{ t('ticketDetail.author') }}
+                        </dt>
+                        <dd class="flex items-center gap-2">
+                            <UserAvatar
+                                v-if="ticket.author"
+                                :user="ticket.author"
+                                size="sm"
+                            />{{
+                                ticket.author?.name ??
+                                t('ticketDetail.noAuthor')
+                            }}
+                        </dd>
+                    </div>
+                    <div v-if="project.show_story_points" class="space-y-2">
+                        <dt class="text-muted-foreground">
+                            {{ t('ticketDetail.storyPoints') }}
+                        </dt>
+                        <dd>
+                            {{
+                                ticket.story_points != null
+                                    ? number(ticket.story_points)
+                                    : t('ticketDetail.notSet')
+                            }}
+                        </dd>
+                    </div>
+                    <div
+                        v-for="field in fields"
+                        :key="field.id"
+                        class="space-y-2"
+                    >
+                        <dt class="text-muted-foreground">{{ field.label }}</dt>
+                        <dd>{{ field.value }}</dd>
+                    </div>
+                </dl>
+                <div
+                    v-if="ticket.is_blocked"
+                    class="border-warning/30 bg-warning/10 space-y-2 rounded-lg border p-4 text-sm"
+                >
+                    <p class="font-semibold">{{ t('tickets.blocked') }}</p>
+                    <p class="whitespace-pre-wrap">
+                        {{ ticket.blocked_comment }}
+                    </p>
+                </div>
+                <dl
+                    class="text-muted-foreground grid gap-4 border-t pt-5 text-xs"
+                >
+                    <div class="space-y-1">
+                        <dt>{{ t('ticketDetail.created') }}</dt>
+                        <dd>
+                            <time :datetime="ticket.created_at">{{
+                                date(new Date(ticket.created_at), {
+                                    dateStyle: 'medium',
+                                    timeStyle: 'short',
+                                })
+                            }}</time>
+                        </dd>
+                    </div>
+                    <div class="space-y-1">
+                        <dt>{{ t('ticketDetail.updated') }}</dt>
+                        <dd>
+                            <time :datetime="ticket.updated_at">{{
+                                date(new Date(ticket.updated_at), {
+                                    dateStyle: 'medium',
+                                    timeStyle: 'short',
+                                })
+                            }}</time>
+                        </dd>
+                    </div>
+                </dl>
+            </CardContent>
+        </Card>
+    </section>
+</template>

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

@@ -0,0 +1,305 @@
+<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 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 { 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,
+        ) ??
+        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>
+    <section
+        id="ticket-relationships"
+        aria-labelledby="ticket-relationships-title"
+        class="wrap-anywhere flex min-w-0 scroll-mt-6 flex-col gap-4"
+    >
+        <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
+                >
+            </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>
+                <div
+                    v-if="ticket.ticket_type?.is_parent"
+                    class="grid min-w-0 gap-3 border-t pt-5"
+                >
+                    <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"
+                    />
+                </div>
+            </CardContent>
+        </Card>
+        <Card class="min-w-0 gap-5 overflow-hidden">
+            <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>
+            </CardHeader>
+            <CardContent class="grid min-w-0 gap-5">
+                <p
+                    v-if="linkedTickets.length === 0"
+                    class="text-muted-foreground rounded-xl border border-dashed p-4 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)]"
+                    >
+                        <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,
+                                }))
+                            "
+                            :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
+                        >
+                    </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>
+            </CardContent>
+        </Card>
+    </section>
+</template>

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

@@ -0,0 +1,178 @@
+<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

@@ -0,0 +1,191 @@
+<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>