Merge pull request 'fix: make project template inheritance granular and safe' (#107) from fix/kan-14 into epic/kan-3

Reviewed-on: #107

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

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

.env.example

@@ -10,7 +10,7 @@ APP_LOCALE=en
 APP_FALLBACK_LOCALE=en
 APP_FAKER_LOCALE=en_US
 
-LOG_STACK=stderr
+LOG_STACK=daily
 
 # Optional Discord error logging (append `,discord_errors` to LOG_STACK to enable it)
 LOG_DISCORD_WEBHOOK_URL=
@@ -38,22 +38,6 @@ 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

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

.github/tests/test_and_check_app/action.yml

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

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

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

@@ -0,0 +1,49 @@
+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.
-- `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.
+- `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.
 - `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

@@ -1,111 +0,0 @@
-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/Permissions/PermissionService.php

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

app/Actions/Projects/BuildProjectBacklogPayload.php

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

app/Actions/Projects/BuildProjectBoardPayload.php

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

app/Actions/Projects/BuildProjectTicketMetadataSettingsPayload.php

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

app/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,7 +19,6 @@ class CreateProjectTicket
     public function __construct(
         private readonly BuildTicketCreatedPayload $buildTicketCreatedPayload,
         private readonly CreateTicketWorklogEntry $createTicketWorklogEntry,
-        private readonly SyncProjectTicketFieldValues $syncProjectTicketFieldValues,
     ) {}
 
     /**
@@ -30,15 +29,7 @@ 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,
@@ -59,14 +50,11 @@ 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' => Arr::get($attributes, 'author_user_id', $actor?->id),
+                '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,
@@ -80,17 +68,6 @@ 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,10 +30,9 @@ class UpdateUserAvatar
         $color = $this->colorFor($user);
         $path = sprintf('avatars/generated/%d-%s.svg', $user->id, (string) Str::uuid());
 
-        $stored = Storage::disk($this->avatarDisk())->put(
+        $stored = Storage::disk('public')->put(
             $path,
             $this->svg($this->initials($user->name), $color),
-            ['ContentType' => 'image/svg+xml'],
         );
 
         if (! $stored) {
@@ -54,7 +53,7 @@ class UpdateUserAvatar
     public function upload(User $user, UploadedFile $avatar): User
     {
         $oldPath = $user->avatar_path;
-        $path = $avatar->store('avatars/uploads', $this->avatarDisk());
+        $path = $avatar->store('avatars/uploads', 'public');
 
         if (! is_string($path)) {
             throw new RuntimeException('Uploaded avatar could not be stored.');
@@ -91,14 +90,7 @@ class UpdateUserAvatar
             return;
         }
 
-        Storage::disk($this->avatarDisk())->delete($path);
+        Storage::disk('public')->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,7 +8,6 @@ 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}')]
@@ -26,9 +25,6 @@ class CreateAdminUser extends Command
      */
     public function handle(): int
     {
-        DB::beginTransaction();
-
-        try {
         $user = User::create([
             'name' => $this->argument('name'),
             'email' => $this->argument('email'),
@@ -42,14 +38,7 @@ class CreateAdminUser extends Command
         ]);
 
         $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

@@ -1,24 +0,0 @@
-<?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/Controllers/ProjectController.php

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

app/Http/Middleware/HandleAppearance.php

@@ -16,11 +16,7 @@ class HandleAppearance
      */
     public function handle(Request $request, Closure $next): Response
     {
-        $appearance = $request->cookie('appearance');
+        View::share('appearance', $request->cookie('appearance') ?? 'system');
-        $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,7 +4,6 @@ namespace App\Http\Middleware;
 
 use App\Actions\Permissions\PermissionService;
 use App\Enums\Permission;
-use App\Models\Project;
 use Illuminate\Http\Request;
 use Inertia\Middleware;
 
@@ -47,11 +46,6 @@ 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)),
@@ -61,36 +55,6 @@ 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/Http/Requests/UpdateProjectTemplateRequest.php

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

app/Http/Resources/TicketFieldDefinitionResource.php

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

app/Http/Resources/TicketLinkTypeResource.php

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

app/Mcp/Servers/KanbanGitServer.php

@@ -2,11 +2,9 @@
 
 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;
@@ -17,7 +15,7 @@ use Laravel\Mcp\Server\Attributes\Version;
 
 #[Name('KanbanGit MCP')]
 #[Version('0.1.0')]
-#[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.')]
+#[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.')]
 class KanbanGitServer extends Server
 {
     protected array $tools = [
@@ -27,8 +25,6 @@ class KanbanGitServer extends Server
         UpdateTicketDescription::class,
         UpdateTicketAssignee::class,
         MoveTicketStatus::class,
-        CreateTicket::class,
-        ListTicketTypes::class,
     ];
 
     protected array $resources = [

app/Mcp/Support/KanbanGitMcp.php

@@ -120,24 +120,6 @@ 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
@@ -207,12 +189,10 @@ 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

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

@@ -1,56 +0,0 @@
-<?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,7 +16,6 @@ class BoardColumn extends Model
 {
     /** @use HasFactory<BoardColumnFactory> */
     use HasFactory;
-
     use SyncsProjectTemplateOwnership;
 
     protected static function booted(): void

app/Models/NotificationAction.php

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

app/Models/RepositoryConnection.php

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

app/Models/TicketFieldDefinition.php

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

app/Models/TicketLinkType.php

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

app/Models/TicketStatus.php

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

app/Models/TicketType.php

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

app/Models/User.php

@@ -77,28 +77,12 @@ class User extends Authenticatable
     protected function avatar(): Attribute
     {
         return Attribute::get(
-            fn (): ?string => $this->avatarUrl(),
+            fn (): ?string => filled($this->avatar_path)
+                ? 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,7 +9,6 @@
     "skills": [
         "fortify-development",
         "laravel-best-practices",
-        "mcp-development",
         "wayfinder-development",
         "inertia-vue-development",
         "tailwindcss-development"

bootstrap/app.php

@@ -17,8 +17,6 @@ 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: [
@@ -33,5 +31,5 @@ return Application::configure(basePath: dirname(__DIR__))
         ]);
     })
     ->withExceptions(function (Exceptions $exceptions): void {
-        $exceptions->dontFlash(['api_token']);
+        //
     })->create();

composer.json

@@ -12,11 +12,10 @@
         "php": "^8.4",
         "inertiajs/inertia-laravel": "^2.0",
         "laravel/fortify": "^1.34",
-        "laravel/framework": "^v13.26.1",
+        "laravel/framework": "^13.0",
         "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": {
@@ -47,15 +46,15 @@
             "@php -r \"file_exists('.env') || copy('.env.example', '.env');\"",
             "@php artisan key:generate",
             "@php artisan migrate --force",
-            "pnpm install",
+            "npm install",
-            "pnpm run build"
+            "npm run build"
         ],
         "dev": [
             "Composer\\Config::disableProcessTimeout",
-            "@php artisan dev"
+            "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"
         ],
         "dev:ssr": [
-            "pnpm run build:ssr",
+            "npm 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"
         ],
@@ -67,9 +66,9 @@
         ],
         "ci:check": [
             "Composer\\Config::disableProcessTimeout",
-            "pnpm audit --audit-level=high",
+            "npm run lint:check",
-            "pnpm run lint:check",
+            "npm run format:check",
-            "pnpm run types:check",
+            "npm run types:check",
             "@test"
         ],
         "test": [

config/filesystems.php

@@ -15,12 +15,6 @@ 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,38 +1,33 @@
 services:
   web:
     container_name: kanbangit-web
-    image: kanbangit-app:local
     build:
       context: .
-      dockerfile: Dockerfile
+      dockerfile: ./docker/nginx/Dockerfile
-      target: runtime
-    command: nginx
     restart: unless-stopped
     ports:
-      - "8080:8080"
+      - "8080:80"
+    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: Dockerfile
+      dockerfile: ./docker/php-fpm/Dockerfile
-      target: runtime
+      target: production
     restart: unless-stopped
+    volumes:
+      - kanbangit-storage:/var/www/storage
+      - kanbangit-public-assets:/var/www/public/build
     env_file:
       - .env.production
     networks:
@@ -47,23 +42,6 @@ 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
@@ -87,3 +65,5 @@ networks:
 
 volumes:
   mariadb-data-production:
+  kanbangit-storage:
+  kanbangit-public-assets:

docker/entrypoint.sh

@@ -1,26 +0,0 @@
-#!/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

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

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

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

@@ -1,7 +0,0 @@
-#!/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

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

@@ -0,0 +1,11 @@
+#!/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,7 +25,6 @@ const prettierOptions = {
 const eslintConfig = [
     {
         ignores: [
-            'bootstrap/ssr/**',
             '**/dist/**',
             'node_modules/**',
             '.github/**',
@@ -38,10 +37,7 @@ 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,13 +2,6 @@
     "$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",
@@ -46,7 +39,6 @@
         "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,8 +20,6 @@
     <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

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

public/fonts/inter/LICENSE.txt

@@ -1,92 +0,0 @@
-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,98 +1,56 @@
 @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 (&:where(.dark, .dark *));
+@custom-variant dark (&:is(.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: Inter, ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
+    --font-sans:
+        Instrument Sans, ui-sans-serif, system-ui, sans-serif,
+        'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
+        'Noto Color Emoji';
 
-    --radius-sm: 0.125rem;
+    --radius-lg: var(--radius);
-    --radius-md: var(--radius);
+    --radius-md: calc(var(--radius) - 2px);
-    --radius-lg: 0.5rem;
+    --radius-sm: calc(var(--radius) - 4px);
-    --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);
@@ -103,35 +61,112 @@
     --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;
+        @apply border-border outline-ring/50;
     }
-
     body {
-        @apply bg-background font-sans text-body text-foreground antialiased;
+        @apply bg-background text-foreground;
-        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

@@ -1,96 +0,0 @@
-/* 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,8 +3,7 @@ import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';
 import type { DefineComponent } from 'vue';
 import { createApp, h } from 'vue';
 import '../css/app.css';
-import { createAppearance } from '@/composables/useAppearance';
+import { initializeTheme } from '@/composables/useAppearance';
-import { createLocalization } from '@/lib/localization';
 
 const appName = import.meta.env.VITE_APP_NAME || 'Laravel';
 
@@ -18,11 +17,12 @@ 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: 'var(--primary)',
+        color: '#4B5563',
     },
 });
+
+// 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 = defineProps<Props>();
+const props = withDefaults(defineProps<Props>(), {
-const { t } = useLocalization();
+    title: 'Something went wrong.',
+});
 
 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 ?? t('common.error') }}</AlertTitle>
+        <AlertTitle>{{ title }}</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,17 +1,16 @@
 <script setup lang="ts">
-import { Columns3 } from 'lucide-vue-next';
+import AppLogoIcon from '@/components/AppLogoIcon.vue';
 </script>
 
 <template>
-    <span class="flex min-w-0 items-center gap-3">
+    <div
-        <span
+        class="bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-md"
-            class="bg-brand text-brand-foreground flex size-8 shrink-0 items-center justify-center rounded-md"
     >
-            <Columns3 class="size-5" aria-hidden="true" />
+        <AppLogoIcon class="size-5 fill-current text-white dark:text-black" />
-        </span>
+    </div>
-        <span
+    <div class="ml-1 grid flex-1 text-left text-sm">
-            class="text-title truncate font-semibold group-data-[collapsible=icon]:hidden"
+        <span class="mb-0.5 truncate font-semibold leading-tight"
-            >KanbanGit</span
+            >Laravel Starter Kit</span
         >
-    </span>
+    </div>
 </template>

resources/js/components/AppSidebar.vue

@@ -1,10 +1,19 @@
 <script setup lang="ts">
-import { Link, router } from '@inertiajs/vue3';
+import { Link, usePage } from '@inertiajs/vue3';
-import { Settings2, X } from 'lucide-vue-next';
+import {
-import { computed, onMounted, onUnmounted } from 'vue';
+    BookOpen,
+    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 { Button } from '@/components/ui/button';
+import NavUser from '@/components/NavUser.vue';
 import {
     Sidebar,
     SidebarContent,
@@ -13,98 +22,93 @@ 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 { edit as profile } from '@/routes/profile';
+import { index as adminUsers } from '@/routes/admin/users';
-import { show } from '@/routes/projects';
+import { index as projectTemplatesIndex } from '@/routes/project-templates';
+import { index as projectsIndex } from '@/routes/projects';
+import { index as teamsIndex } from '@/routes/teams';
+import type { NavItem } from '@/types';
 
-const { t } = useLocalization();
+const page = usePage();
-const { currentUrl } = useCurrentUrl();
+
-const { project, workspaceItems, projectItems, projectSettingsItems } =
+const mainNavItems = computed<NavItem[]>(() => {
-    useAppNavigation();
+    const items: NavItem[] = [
-const { isMobile, setOpenMobile } = useSidebar();
-const accountItems = computed(() => [
         {
-        title: t('navigation.settings'),
+            title: 'Dashboard',
-        href: profile(),
+            href: dashboard(),
-        icon: Settings2,
+            icon: LayoutGrid,
-        isActive: currentUrl.value.startsWith('/settings/'),
         },
-]);
+        {
-let removeNavigationListener: (() => void) | undefined;
+            title: 'Projects',
-onMounted(() => {
+            href: projectsIndex(),
-    removeNavigationListener = router.on('navigate', () =>
+            icon: Folder,
-        setOpenMobile(false),
+        },
-    );
+    ];
+
+    if (page.props.auth.permissions.projectCreate) {
+        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 id="app-navigation" collapsible="icon" variant="sidebar">
+    <Sidebar collapsible="icon" variant="inset">
-        <SidebarHeader class="border-sidebar-border gap-4 border-b p-3">
+        <SidebarHeader>
-            <div class="flex items-center gap-2">
+            <SidebarMenu>
-                <SidebarMenu class="min-w-0">
                 <SidebarMenuItem>
-                        <SidebarMenuButton
+                    <SidebarMenuButton size="lg" as-child>
-                            size="lg"
+                        <Link :href="dashboard()">
-                            as-child
+                            <AppLogo />
-                            tooltip="KanbanGit"
+                        </Link>
-                        >
-                            <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>
-            <nav :aria-label="t('navigation.main')">
+            <NavMain :items="mainNavItems" />
-                <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">
+
-            <NavMain :items="accountItems" :label="t('navigation.account')" />
+        <SidebarFooter>
+            <NavFooter :items="footerNavItems" />
+            <NavUser />
         </SidebarFooter>
     </Sidebar>
+    <slot />
 </template>

resources/js/components/AppSidebarHeader.vue

@@ -1,145 +1,27 @@
 <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(defineProps<{ breadcrumbs?: BreadcrumbItem[] }>(), {
+withDefaults(
+    defineProps<{
+        breadcrumbs?: BreadcrumbItem[];
+    }>(),
+    {
         breadcrumbs: () => [],
-});
-const page = usePage();
-const { project } = useAppNavigation();
-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="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"
+        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"
     >
-        <div class="flex min-w-0 flex-1 items-center gap-2">
+        <div class="flex items-center gap-2">
-            <SidebarTrigger class="shrink-0" />
+            <SidebarTrigger class="-ml-1" />
-            <Breadcrumbs v-if="breadcrumbs.length" :breadcrumbs="breadcrumbs" />
+            <template v-if="breadcrumbs && breadcrumbs.length > 0">
-            <span v-else class="truncate font-semibold">KanbanGit</span>
+                <Breadcrumbs :breadcrumbs="breadcrumbs" />
-        </div>
+            </template>
-        <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,80 +1,33 @@
 <script setup lang="ts">
-import { Check, Monitor, Moon, Sun } from 'lucide-vue-next';
+import { 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 = computed(() => [
+const tabs = [
-    {
+    { value: 'light', Icon: Sun, label: 'Light' },
-        value: 'light' as const,
+    { value: 'dark', Icon: Moon, label: 'Dark' },
-        Icon: Sun,
+    { value: 'system', Icon: Monitor, label: 'System' },
-        label: t('appearance.light'),
+] as const;
-        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>
-    <fieldset class="min-w-0">
+    <div
-        <legend class="sr-only">{{ t('appearance.label') }}</legend>
+        class="inline-flex gap-1 rounded-lg bg-neutral-100 p-1 dark:bg-neutral-800"
-        <div class="grid min-w-0 gap-3 sm:grid-cols-3">
+    >
-            <label
+        <button
-                v-for="{ value, Icon, label, description } in tabs"
+            v-for="{ value, Icon, label } in tabs"
             :key="value"
-                class="relative min-w-0"
+            @click="updateAppearance(value)"
+            :class="[
+                'flex items-center rounded-md px-3.5 py-1.5 transition-colors',
+                appearance === value
+                    ? 'shadow-xs bg-white dark:bg-neutral-700 dark:text-neutral-100'
+                    : 'text-neutral-500 hover:bg-neutral-200/60 hover:text-black dark:text-neutral-400 dark:hover:bg-neutral-700/60',
+            ]"
         >
-                <input
+            <component :is="Icon" class="-ml-1 h-4 w-4" />
-                    type="radio"
+            <span class="ml-1.5 text-sm">{{ label }}</span>
-                    name="appearance"
+        </button>
-                    :value="value"
-                    :checked="appearance === value"
-                    :aria-describedby="`appearance-${value}-description`"
-                    class="peer sr-only"
-                    @change="updateAppearance(value)"
-                />
-                <span
-                    class="peer-checked:border-primary peer-checked:bg-accent/50 peer-focus-visible:ring-ring/40 gap-stack bg-background hover:border-primary/50 flex h-full min-h-32 cursor-pointer flex-col rounded-lg border p-4 transition-colors peer-focus-visible:ring-2"
-                >
-                    <span class="flex items-center justify-between gap-3">
-                        <span
-                            class="bg-accent text-primary flex size-10 items-center justify-center rounded-lg"
-                        >
-                            <component
-                                :is="Icon"
-                                class="size-5"
-                                aria-hidden="true"
-                            />
-                        </span>
-                        <Check
-                            v-if="appearance === value"
-                            class="text-primary size-5"
-                            aria-hidden="true"
-                        />
-                    </span>
-                    <span class="font-semibold">{{ label }}</span>
-                    <span
-                        :id="`appearance-${value}-description`"
-                        class="text-caption text-muted-foreground"
-                    >
-                        {{ description }}
-                    </span>
-                </span>
-            </label>
     </div>
-    </fieldset>
 </template>

resources/js/components/AuthFormFeedback.vue

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

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

resources/js/components/Breadcrumbs.vue

@@ -9,48 +9,29 @@ 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 class="min-w-0" :aria-label="t('navigation.breadcrumbs')">
+    <Breadcrumb>
-        <BreadcrumbList class="flex-nowrap">
+        <BreadcrumbList>
             <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 class="truncate" :title="item.title">{{
+                        <BreadcrumbPage>{{ item.title }}</BreadcrumbPage>
-                            item.title
-                        }}</BreadcrumbPage>
                     </template>
                     <template v-else>
                         <BreadcrumbLink as-child>
-                            <Link
+                            <Link :href="item.href">{{ item.title }}</Link>
-                                :href="item.href"
-                                class="max-w-40 truncate"
-                                :title="item.title"
-                                >{{ item.title }}</Link
-                            >
                         </BreadcrumbLink>
                     </template>
                 </BreadcrumbItem>
-                <BreadcrumbSeparator
+                <BreadcrumbSeparator v-if="index !== breadcrumbs.length - 1" />
-                    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,41 +17,30 @@ import {
     DialogTrigger,
 } from '@/components/ui/dialog';
 import { Label } from '@/components/ui/label';
-import { useLocalization } from '@/composables/useLocalization';
 
 const passwordInput = useTemplateRef('passwordInput');
-const { t } = useLocalization();
 </script>
 
 <template>
-    <Card
+    <div class="space-y-6">
-        class="border-destructive/35 gap-0 overflow-hidden rounded-xl py-0 shadow-none"
+        <Heading
-    >
+            variant="small"
-        <CardHeader class="gap-stack border-b p-5 sm:p-6">
+            title="Delete account"
-            <h2 class="text-title">{{ t('profile.delete.title') }}</h2>
+            description="Delete your account and all of its resources"
-            <p class="text-muted-foreground">
+        />
-                {{ t('profile.delete.description') }}
-            </p>
-        </CardHeader>
-        <CardContent class="p-5 sm:p-6">
         <div
-                class="bg-destructive/8 border-destructive/25 gap-column grid rounded-lg border p-4"
+            class="space-y-4 rounded-lg border border-red-100 bg-red-50 p-4 dark:border-red-200/10 dark:bg-red-700/10"
         >
-                <div class="gap-stack grid">
+            <div class="relative space-y-0.5 text-red-600 dark:text-red-100">
-                    <p class="text-destructive font-semibold">
+                <p class="font-medium">Warning</p>
-                        {{ t('profile.delete.warning') }}
+                <p class="text-sm">
-                    </p>
+                    Please proceed with caution, this cannot be undone.
-                    <p class="text-body text-muted-foreground">
-                        {{ t('profile.delete.warningDescription') }}
                 </p>
             </div>
             <Dialog>
                 <DialogTrigger as-child>
-                        <Button
+                    <Button variant="destructive" data-test="delete-user-button"
-                            variant="destructive"
+                        >Delete account</Button
-                            class="justify-self-start"
-                            data-test="delete-user-button"
-                            >{{ t('profile.delete.action') }}</Button
                     >
                 </DialogTrigger>
                 <DialogContent>
@@ -66,23 +55,28 @@ const { t } = useLocalization();
                         v-slot="{ errors, processing, reset, clearErrors }"
                     >
                         <DialogHeader class="space-y-3">
-                                <DialogTitle>{{
+                            <DialogTitle
-                                    t('profile.delete.confirmTitle')
+                                >Are you sure you want to delete your
-                                }}</DialogTitle>
+                                account?</DialogTitle
+                            >
                             <DialogDescription>
-                                    {{ t('profile.delete.confirmDescription') }}
+                                Once your account is deleted, all of its
+                                resources and data will also be permanently
+                                deleted. Please enter your password to confirm
+                                you would like to permanently delete your
+                                account.
                             </DialogDescription>
                         </DialogHeader>
 
                         <div class="grid gap-2">
-                                <Label for="password" class="sr-only">{{
+                            <Label for="password" class="sr-only"
-                                    t('profile.delete.password')
+                                >Password</Label
-                                }}</Label>
+                            >
                             <PasswordInput
                                 id="password"
                                 name="password"
                                 ref="passwordInput"
-                                    :placeholder="t('profile.delete.password')"
+                                placeholder="Password"
                             />
                             <InputError :message="errors.password" />
                         </div>
@@ -98,7 +92,7 @@ const { t } = useLocalization();
                                         }
                                     "
                                 >
-                                        {{ t('common.cancel') }}
+                                    Cancel
                                 </Button>
                             </DialogClose>
 
@@ -108,13 +102,12 @@ const { t } = useLocalization();
                                 :disabled="processing"
                                 data-test="confirm-delete-user-button"
                             >
-                                    {{ t('profile.delete.confirmAction') }}
+                                Delete account
                             </Button>
                         </DialogFooter>
                     </Form>
                 </DialogContent>
             </Dialog>
         </div>
-        </CardContent>
+    </div>
-    </Card>
 </template>

resources/js/components/FeedbackState.vue

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

@@ -1,76 +0,0 @@
-<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" role="alert">
+    <div v-show="message">
-        <p class="text-body text-destructive">
+        <p class="text-sm text-red-600 dark:text-red-500">
             {{ message }}
         </p>
     </div>

resources/js/components/ManagedUserForm.vue

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

resources/js/components/NavMain.vue

@@ -12,46 +12,23 @@ import type { NavItem } from '@/types';
 
 defineProps<{
     items: NavItem[];
-    label: string;
 }>();
 
 const { isCurrentUrl } = useCurrentUrl();
 </script>
 
 <template>
-    <SidebarGroup class="px-3 py-2">
+    <SidebarGroup class="px-2 py-0">
-        <SidebarGroupLabel class="text-label text-muted-foreground uppercase">{{
+        <SidebarGroupLabel>Platform</SidebarGroupLabel>
-            label
+        <SidebarMenu>
-        }}</SidebarGroupLabel>
-        <SidebarMenu role="list" :aria-label="label">
             <SidebarMenuItem v-for="item in items" :key="item.title">
                 <SidebarMenuButton
                     as-child
-                    :is-active="
+                    :is-active="isCurrentUrl(item.href)"
-                        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
+                    <Link :href="item.href">
-                        :href="item.href"
+                        <component :is="item.icon" />
-                        :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,7 +2,6 @@
 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';
 
@@ -10,14 +9,12 @@ 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,
@@ -31,8 +28,7 @@ defineExpose({
             ref="inputRef"
             v-model="model"
             :type="showPassword ? 'text' : 'password'"
-            :class="cn('pr-12', props.class)"
+            :class="cn('pr-10', props.class)"
-            :disabled="disabled"
             v-bind="$attrs"
         />
         <button
@@ -40,14 +36,11 @@ defineExpose({
             @click="showPassword = !showPassword"
             :class="
                 cn(
-                    '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',
+                    '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]',
                 )
             "
-            :aria-label="
+            :aria-label="showPassword ? 'Hide password' : 'Show password'"
-                t(showPassword ? 'auth.password.hide' : 'auth.password.show')
+            :tabindex="-1"
-            "
-            :aria-pressed="showPassword"
-            :disabled="disabled"
         >
             <EyeOff v-if="showPassword" class="size-4" />
             <Eye v-else class="size-4" />

resources/js/components/ProjectNavigation.vue

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

resources/js/components/TwoFactorSetupModal.vue

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

resources/js/components/UserInfo.vue

@@ -1,22 +1,33 @@
 <script setup lang="ts">
-import UserAvatar from '@/components/ui/avatar/UserAvatar.vue';
+import { computed } from 'vue';
+import { useInitials } from '@/composables/useInitials';
 import type { User } from '@/types';
+import UserAvatar from '@/components/ui/avatar/UserAvatar.vue';
 
-withDefaults(defineProps<{ user: User; showEmail?: boolean }>(), {
+type Props = {
+    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>
-    <div class="flex min-w-0 items-center gap-2">
+    <UserAvatar />
-        <UserAvatar :user="user" />
+
-        <div class="grid min-w-0 flex-1 text-left text-sm leading-tight">
+    <div class="grid flex-1 text-left text-sm leading-tight">
         <span class="truncate font-medium">{{ user.name }}</span>
-            <span
+        <span v-if="showEmail" class="text-muted-foreground truncate text-xs">{{
-                v-if="showEmail"
+            user.email
-                class="text-muted-foreground truncate text-xs"
+        }}</span>
-                >{{ user.email }}</span
-            >
-        </div>
     </div>
 </template>

resources/js/components/UserMenuContent.vue

@@ -11,7 +11,6 @@ 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;
@@ -22,7 +21,6 @@ const handleLogout = () => {
 };
 
 defineProps<Props>();
-const { t } = useLocalization();
 </script>
 
 <template>
@@ -36,7 +34,7 @@ const { t } = useLocalization();
         <DropdownMenuItem :as-child="true">
             <Link class="block w-full cursor-pointer" :href="edit()" prefetch>
                 <Settings class="mr-2 h-4 w-4" />
-                {{ t('navigation.settings') }}
+                Settings
             </Link>
         </DropdownMenuItem>
     </DropdownMenuGroup>
@@ -50,7 +48,7 @@ const { t } = useLocalization();
             data-test="logout-button"
         >
             <LogOut class="mr-2 h-4 w-4" />
-            {{ t('navigation.logout') }}
+            Log out
         </Link>
     </DropdownMenuItem>
 </template>

resources/js/components/projects/MetadataEditorDialog.vue

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

resources/js/components/projects/MetadataOptionList.vue

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

resources/js/components/projects/NotificationEditorDialog.vue

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

resources/js/components/projects/ProjectAccessEditorDialog.vue

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

resources/js/components/projects/ProjectPermissionBadges.vue

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

resources/js/components/projects/ProjectTemplateForm.vue

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

resources/js/components/projects/TemplateInheritancePanel.vue

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

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

resources/js/components/projects/TicketFieldDefinitionEditorDialog.vue

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

resources/js/components/projects/TicketFieldDefinitionSettings.vue

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

resources/js/components/projects/TicketLinkTypeEditorDialog.vue

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

resources/js/components/projects/TicketLinkTypeSettings.vue

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

resources/js/components/projects/WorkflowEditorDialog.vue

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

resources/js/components/projects/WorkflowStatusList.vue

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

resources/js/components/projects/WorkflowTransitionMatrix.vue

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

resources/js/components/teams/TeamEditorDialog.vue

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