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
@@ -40,9 +41,9 @@ vendor
 LICENSE
 README.md
 
-# Runtime-generated data must not become part of an image layer.
-storage/framework/cache/data/*
-storage/framework/sessions/*
-storage/framework/testing/*
-storage/framework/views/*
-storage/logs/*
+# Ignore development-related files and directories
+# For development environment, we will use mount bind to mount the source code to the container
+# So we don't need to copy the source code to the container for development
+tests/
+phpunit.xml
+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}"

.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,130 +0,0 @@
-name: CI/CD
-
-on:
-  push:
-  pull_request:
-
-permissions:
-  contents: read
-
-env:
-  REGISTRY: git.twyco.de
-
-jobs:
-  test_and_check_app:
-    name: test_and_check_app
-    runs-on: ubuntu-latest
-    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:
-      - 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,109 +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 \
-    && npm ci \
-    && npm run build
-
-FROM build AS test
-
-RUN touch .env \
-    && composer audit --locked --no-interaction \
-    && COMPOSER_ALLOW_SUPERUSER=1 composer ci:check
-
-FROM build AS production_builder
-
-RUN composer install \
-        --classmap-authoritative \
-        --no-dev \
-        --no-interaction \
-        --no-progress \
-        --prefer-dist \
-    && rm -rf node_modules tests phpunit.xml
-
-FROM php_base AS runtime
-
-COPY docker/entrypoint.sh /usr/local/bin/kanbangit-entrypoint
-COPY docker/nginx/nginx.conf.template /etc/nginx/nginx.conf.template
-COPY docker/php-fpm-healthcheck.sh /usr/local/bin/php-fpm-healthcheck
-COPY --from=production_builder --chown=www-data:www-data /var/www /var/www
-
-RUN chmod +x /usr/local/bin/kanbangit-entrypoint /usr/local/bin/php-fpm-healthcheck \
-    && mv "$PHP_INI_DIR/php.ini-production" "$PHP_INI_DIR/php.ini" \
-    && printf '%s\n' \
-        '[global]' \
-        'daemonize = no' \
-        '' \
-        '[www]' \
-        'pm.status_path = /status' \
-        > /usr/local/etc/php-fpm.d/zz-kanbangit.conf \
-    && mkdir -p \
-        /var/www/bootstrap/cache \
-        /var/www/storage/app/public \
-        /var/www/storage/framework/cache \
-        /var/www/storage/framework/sessions \
-        /var/www/storage/framework/testing \
-        /var/www/storage/framework/views \
-        /var/www/storage/logs \
-    && ln -s ../storage/app/public /var/www/public/storage \
-    && chown -R www-data:www-data /var/www/bootstrap/cache /var/www/storage
-
-USER www-data
-
-EXPOSE 8080 9000
-
-ENTRYPOINT ["kanbangit-entrypoint"]
-CMD ["php-fpm"]

app/Actions/Projects/BuildProjectBacklogPayload.php

@@ -47,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/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),
-                'blocked_comment' => $isBlocked ? Arr::get($attributes, 'blocked_comment') : null,
+                'author_user_id' => $actor?->id,
                 '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);
-    }
-
-    private function avatarDisk(): string
-    {
-        $disk = config('filesystems.avatar_disk', 'public');
-
-        return is_string($disk) && $disk !== '' ? $disk : 'public';
+        Storage::disk('public')->delete($path);
     }
 
     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,30 +25,20 @@ class CreateAdminUser extends Command
      */
     public function handle(): int
     {
-        DB::beginTransaction();
+        $user = User::create([
+            'name' => $this->argument('name'),
+            'email' => $this->argument('email'),
+            'password' => Hash::make($this->argument('password')),
+        ]);
 
-        try {
-            $user = User::create([
-                'name' => $this->argument('name'),
-                'email' => $this->argument('email'),
-                'password' => Hash::make($this->argument('password')),
-            ]);
+        $this->avatars->generate($user);
 
-            $this->avatars->generate($user);
+        $user->permissionAssignments()->create([
+            'permission' => Permission::GlobalAdmin,
+        ]);
 
-            $user->permissionAssignments()->create([
-                'permission' => Permission::GlobalAdmin,
-            ]);
+        $this->info(sprintf('Admin User created with emil=\'%s\' and password=\'%s\'', $this->argument('email'), $this->argument('password')));
 
-            $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;
-        }
+        return self::SUCCESS;
     }
 }

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/Middleware/HandleAppearance.php

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

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": {
@@ -52,7 +51,7 @@
         ],
         "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": [
             "npm run build:ssr",
@@ -67,8 +66,8 @@
         ],
         "ci:check": [
             "Composer\\Config::disableProcessTimeout",
-            "npm audit --audit-level=high",
             "npm run lint:check",
+            "npm run format:check",
             "npm run types:check",
             "@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
-      target: runtime
-    command: nginx
+      dockerfile: ./docker/nginx/Dockerfile
     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
-      target: runtime
+      dockerfile: ./docker/php-fpm/Dockerfile
+      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

@@ -37,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/**',
         ],
     },

phpunit.xml

@@ -19,10 +19,7 @@
     </source>
     <php>
         <env name="APP_ENV" value="testing"/>
-        <env name="APP_KEY" value="base64:11ujGYe5vzbwqcdFDVQC6PuDgd7c8PKD9kWt9HH9Bvs="/>
         <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"/>

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 *));
-
-@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');
-}
+@custom-variant dark (&:is(.dark *));
 
 @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-md: var(--radius);
-    --radius-lg: 0.5rem;
-    --radius-xl: 0.75rem;
-
-    --spacing-page: 1.5rem;
-    --spacing-column: 1rem;
-    --spacing-card: 0.75rem;
-    --spacing-stack: 0.5rem;
-    --spacing-control: 2.75rem;
-
-    --text-headline: 1.5rem;
-    --text-headline--line-height: 2rem;
-    --text-headline--font-weight: 600;
-    --text-headline--letter-spacing: -0.02em;
-    --text-headline-mobile: 1.25rem;
-    --text-headline-mobile--line-height: 1.75rem;
-    --text-headline-mobile--font-weight: 600;
-    --text-headline-mobile--letter-spacing: -0.02em;
-    --text-title: 1.125rem;
-    --text-title--line-height: 1.5rem;
-    --text-title--font-weight: 600;
-    --text-title--letter-spacing: -0.01em;
-    --text-body: 0.875rem;
-    --text-body--line-height: 1.25rem;
-    --text-caption: 0.8125rem;
-    --text-caption--line-height: 1.125rem;
-    --text-label: 0.6875rem;
-    --text-label--line-height: 1rem;
-    --text-label--font-weight: 700;
-    --text-label--letter-spacing: 0.05em;
-
-    --shadow-card-hover: 0 4px 12px rgb(0 0 0 / 0.08);
+    --radius-lg: var(--radius);
+    --radius-md: calc(var(--radius) - 2px);
+    --radius-sm: calc(var(--radius) - 4px);
 
     --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;
-        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;
+        @apply bg-background text-foreground;
     }
 }

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 { createLocalization } from '@/lib/localization';
+import { initializeTheme } from '@/composables/useAppearance';
 
 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 { t } = useLocalization();
+const props = withDefaults(defineProps<Props>(), {
+    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">
-        <span
-            class="bg-brand text-brand-foreground flex size-8 shrink-0 items-center justify-center rounded-md"
+    <div
+        class="bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-md"
+    >
+        <AppLogoIcon class="size-5 fill-current text-white dark:text-black" />
+    </div>
+    <div class="ml-1 grid flex-1 text-left text-sm">
+        <span class="mb-0.5 truncate font-semibold leading-tight"
+            >Laravel Starter Kit</span
         >
-            <Columns3 class="size-5" aria-hidden="true" />
-        </span>
-        <span
-            class="text-title truncate font-semibold group-data-[collapsible=icon]:hidden"
-            >KanbanGit</span
-        >
-    </span>
+    </div>
 </template>

resources/js/components/AppSidebar.vue

@@ -1,10 +1,19 @@
 <script setup lang="ts">
-import { Link, router } from '@inertiajs/vue3';
-import { Settings2, X } from 'lucide-vue-next';
-import { computed, onMounted, onUnmounted } from 'vue';
+import { Link, usePage } from '@inertiajs/vue3';
+import {
+    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 { show } from '@/routes/projects';
+import { index as adminUsers } from '@/routes/admin/users';
+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 { currentUrl } = useCurrentUrl();
-const { project, workspaceItems, projectItems, projectSettingsItems } =
-    useAppNavigation();
-const { isMobile, setOpenMobile } = useSidebar();
-const accountItems = computed(() => [
-    {
-        title: t('navigation.settings'),
-        href: profile(),
-        icon: Settings2,
-        isActive: currentUrl.value.startsWith('/settings/'),
-    },
-]);
-let removeNavigationListener: (() => void) | undefined;
-onMounted(() => {
-    removeNavigationListener = router.on('navigate', () =>
-        setOpenMobile(false),
-    );
+const page = usePage();
+
+const mainNavItems = computed<NavItem[]>(() => {
+    const items: NavItem[] = [
+        {
+            title: 'Dashboard',
+            href: dashboard(),
+            icon: LayoutGrid,
+        },
+        {
+            title: 'Projects',
+            href: projectsIndex(),
+            icon: Folder,
+        },
+    ];
+
+    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">
-        <SidebarHeader class="border-sidebar-border gap-4 border-b p-3">
-            <div class="flex items-center gap-2">
-                <SidebarMenu class="min-w-0">
-                    <SidebarMenuItem>
-                        <SidebarMenuButton
-                            size="lg"
-                            as-child
-                            tooltip="KanbanGit"
-                        >
-                            <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>
+    <Sidebar collapsible="icon" variant="inset">
+        <SidebarHeader>
+            <SidebarMenu>
+                <SidebarMenuItem>
+                    <SidebarMenuButton size="lg" as-child>
+                        <Link :href="dashboard()">
+                            <AppLogo />
+                        </Link>
+                    </SidebarMenuButton>
+                </SidebarMenuItem>
+            </SidebarMenu>
         </SidebarHeader>
+
         <SidebarContent>
-            <nav :aria-label="t('navigation.main')">
-                <NavMain
-                    :items="workspaceItems"
-                    :label="t('navigation.workspace')"
-                />
-                <NavMain
-                    v-if="projectItems.length"
-                    :items="projectItems"
-                    :label="t('navigation.project')"
-                />
-                <NavMain
-                    v-if="projectSettingsItems.length"
-                    :items="projectSettingsItems"
-                    :label="t('navigation.projectSettings')"
-                />
-            </nav>
+            <NavMain :items="mainNavItems" />
         </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[] }>(), {
-    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],
+withDefaults(
+    defineProps<{
+        breadcrumbs?: BreadcrumbItem[];
+    }>(),
+    {
+        breadcrumbs: () => [],
+    },
 );
-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">
-            <SidebarTrigger class="shrink-0" />
-            <Breadcrumbs v-if="breadcrumbs.length" :breadcrumbs="breadcrumbs" />
-            <span v-else class="truncate font-semibold">KanbanGit</span>
-        </div>
-        <div class="flex shrink-0 items-center gap-1 sm:gap-2">
-            <Button
-                v-if="createAction"
-                as-child
-                :aria-label="createAction.title"
-                class="px-3"
-            >
-                <Link :href="createAction.href"
-                    ><Plus aria-hidden="true" /><span
-                        class="hidden sm:inline"
-                        >{{ createAction.title }}</span
-                    ></Link
-                >
-            </Button>
-            <DropdownMenu>
-                <DropdownMenuTrigger as-child>
-                    <Button
-                        variant="ghost"
-                        size="icon"
-                        :aria-label="t('appearance.label')"
-                        ><component :is="themeIcon" aria-hidden="true"
-                    /></Button>
-                </DropdownMenuTrigger>
-                <DropdownMenuContent align="end">
-                    <DropdownMenuLabel>{{
-                        t('appearance.label')
-                    }}</DropdownMenuLabel>
-                    <DropdownMenuSeparator />
-                    <DropdownMenuRadioGroup
-                        :model-value="appearance"
-                        @update:model-value="
-                            (value) =>
-                                updateAppearance(normalizeAppearance(value))
-                        "
-                    >
-                        <DropdownMenuRadioItem value="light"
-                            ><Sun aria-hidden="true" />{{
-                                t('appearance.light')
-                            }}</DropdownMenuRadioItem
-                        >
-                        <DropdownMenuRadioItem value="dark"
-                            ><Moon aria-hidden="true" />{{
-                                t('appearance.dark')
-                            }}</DropdownMenuRadioItem
-                        >
-                        <DropdownMenuRadioItem value="system"
-                            ><Monitor aria-hidden="true" />{{
-                                t('appearance.system')
-                            }}</DropdownMenuRadioItem
-                        >
-                    </DropdownMenuRadioGroup>
-                </DropdownMenuContent>
-            </DropdownMenu>
-            <DropdownMenu>
-                <DropdownMenuTrigger as-child>
-                    <Button
-                        variant="ghost"
-                        size="icon"
-                        :aria-label="
-                            t('navigation.userMenu', {
-                                name: page.props.auth.user.name,
-                            })
-                        "
-                        data-test="sidebar-menu-button"
-                    >
-                        <UserAvatar :user="page.props.auth.user" />
-                    </Button>
-                </DropdownMenuTrigger>
-                <DropdownMenuContent align="end" class="min-w-60">
-                    <UserMenuContent :user="page.props.auth.user" />
-                </DropdownMenuContent>
-            </DropdownMenu>
+        <div class="flex items-center gap-2">
+            <SidebarTrigger class="-ml-1" />
+            <template v-if="breadcrumbs && breadcrumbs.length > 0">
+                <Breadcrumbs :breadcrumbs="breadcrumbs" />
+            </template>
         </div>
     </header>
 </template>

resources/js/components/AppearanceTabs.vue

@@ -1,39 +1,33 @@
 <script setup lang="ts">
 import { Monitor, Moon, Sun } from 'lucide-vue-next';
 import { useAppearance } from '@/composables/useAppearance';
-import { useLocalization } from '@/composables/useLocalization';
 
 const { appearance, updateAppearance } = useAppearance();
-const { t } = useLocalization();
 
 const tabs = [
-    { value: 'light', Icon: Sun, label: 'appearance.light' },
-    { value: 'dark', Icon: Moon, label: 'appearance.dark' },
-    { value: 'system', Icon: Monitor, label: 'appearance.system' },
+    { value: 'light', Icon: Sun, label: 'Light' },
+    { value: 'dark', Icon: Moon, label: 'Dark' },
+    { value: 'system', Icon: Monitor, label: 'System' },
 ] as const;
 </script>
 
 <template>
     <div
-        role="group"
-        :aria-label="t('appearance.label')"
-        class="border-border bg-muted inline-flex max-w-full gap-1 rounded-lg border p-1"
+        class="inline-flex gap-1 rounded-lg bg-neutral-100 p-1 dark:bg-neutral-800"
     >
         <button
             v-for="{ value, Icon, label } in tabs"
             :key="value"
-            type="button"
-            :aria-pressed="appearance === value"
             @click="updateAppearance(value)"
             :class="[
-                'min-h-control text-body focus-visible:outline-ring flex min-w-0 items-center justify-center gap-1.5 rounded-md px-3 font-medium transition-colors focus-visible:outline-2 focus-visible:outline-offset-2',
+                'flex items-center rounded-md px-3.5 py-1.5 transition-colors',
                 appearance === value
-                    ? 'bg-primary text-primary-foreground'
-                    : 'text-muted-foreground hover:bg-accent hover:text-accent-foreground',
+                    ? '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',
             ]"
         >
-            <component :is="Icon" class="size-4 shrink-0" aria-hidden="true" />
-            <span>{{ t(label) }}</span>
+            <component :is="Icon" class="-ml-1 h-4 w-4" />
+            <span class="ml-1.5 text-sm">{{ label }}</span>
         </button>
     </div>
 </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/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')">
-        <BreadcrumbList class="flex-nowrap">
+    <Breadcrumb>
+        <BreadcrumbList>
             <template v-for="(item, index) in breadcrumbs" :key="index">
-                <BreadcrumbItem
-                    :class="[
-                        'min-w-0',
-                        index !== breadcrumbs.length - 1
-                            ? 'hidden md:inline-flex'
-                            : '',
-                    ]"
-                >
+                <BreadcrumbItem>
                     <template v-if="index === breadcrumbs.length - 1">
-                        <BreadcrumbPage class="truncate" :title="item.title">{{
-                            item.title
-                        }}</BreadcrumbPage>
+                        <BreadcrumbPage>{{ item.title }}</BreadcrumbPage>
                     </template>
                     <template v-else>
                         <BreadcrumbLink as-child>
-                            <Link
-                                :href="item.href"
-                                class="max-w-40 truncate"
-                                :title="item.title"
-                                >{{ item.title }}</Link
-                            >
+                            <Link :href="item.href">{{ item.title }}</Link>
                         </BreadcrumbLink>
                     </template>
                 </BreadcrumbItem>
-                <BreadcrumbSeparator
-                    v-if="index !== breadcrumbs.length - 1"
-                    class="hidden md:block"
-                />
+                <BreadcrumbSeparator v-if="index !== breadcrumbs.length - 1" />
             </template>
         </BreadcrumbList>
     </Breadcrumb>

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

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">
-        <SidebarGroupLabel class="text-label text-muted-foreground uppercase">{{
-            label
-        }}</SidebarGroupLabel>
-        <SidebarMenu role="list" :aria-label="label">
+    <SidebarGroup class="px-2 py-0">
+        <SidebarGroupLabel>Platform</SidebarGroupLabel>
+        <SidebarMenu>
             <SidebarMenuItem v-for="item in items" :key="item.title">
                 <SidebarMenuButton
                     as-child
-                    :is-active="
-                        item.isActive ??
-                        isCurrentUrl(
-                            item.href,
-                            undefined,
-                            item.match === 'section',
-                        )
-                    "
+                    :is-active="isCurrentUrl(item.href)"
                     :tooltip="item.title"
-                    class="min-h-control data-[active=true]:border-brand border-l-2 border-transparent px-3 data-[active=true]:font-semibold group-data-[collapsible=icon]:min-h-8"
                 >
-                    <Link
-                        :href="item.href"
-                        :aria-current="
-                            (item.isActive ??
-                            isCurrentUrl(
-                                item.href,
-                                undefined,
-                                item.match === 'section',
-                            ))
-                                ? 'page'
-                                : undefined
-                        "
-                    >
-                        <component :is="item.icon" aria-hidden="true" />
+                    <Link :href="item.href">
+                        <component :is="item.icon" />
                         <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)"
-            :disabled="disabled"
+            :class="cn('pr-10', props.class)"
             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="
-                t(showPassword ? 'auth.password.hide' : 'auth.password.show')
-            "
-            :aria-pressed="showPassword"
-            :disabled="disabled"
+            :aria-label="showPassword ? 'Hide password' : 'Show password'"
+            :tabindex="-1"
         >
             <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/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 :user="user" />
-        <div class="grid min-w-0 flex-1 text-left text-sm leading-tight">
-            <span class="truncate font-medium">{{ user.name }}</span>
-            <span
-                v-if="showEmail"
-                class="text-muted-foreground truncate text-xs"
-                >{{ user.email }}</span
-            >
-        </div>
+    <UserAvatar />
+
+    <div class="grid flex-1 text-left text-sm leading-tight">
+        <span class="truncate font-medium">{{ user.name }}</span>
+        <span v-if="showEmail" class="text-muted-foreground truncate text-xs">{{
+            user.email
+        }}</span>
     </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/tickets/TicketCard.vue

@@ -1,84 +0,0 @@
-<script setup lang="ts">
-import { Link } from '@inertiajs/vue3';
-import { ArrowUpRight } from 'lucide-vue-next';
-import TicketMetadata from '@/components/tickets/TicketMetadata.vue';
-import { Badge } from '@/components/ui/badge';
-import { useLocalization } from '@/composables/useLocalization';
-import { show as showTicket } from '@/routes/projects/tickets';
-import type {
-    TicketPresentationEmits,
-    TicketPresentationProps,
-} from '@/types/ticket-presentation';
-
-withDefaults(defineProps<TicketPresentationProps>(), {
-    showDescription: true,
-    showStatus: true,
-});
-
-const emit = defineEmits<TicketPresentationEmits>();
-const { t } = useLocalization();
-</script>
-
-<template>
-    <article
-        :class="[
-            'bg-card text-card-foreground min-w-0 rounded-md border shadow-sm',
-            ticket.is_blocked ? 'border-warning' : 'border-border',
-        ]"
-    >
-        <Link
-            :href="showTicket({ project: projectId, ticket: ticket.id })"
-            :aria-label="
-                t('tickets.open', {
-                    key: ticket.ticket_key,
-                    title: ticket.title,
-                })
-            "
-            class="focus-visible:ring-ring/35 gap-card min-h-control hover:bg-accent/35 group flex min-w-0 flex-col rounded-t-md p-4 transition-[background-color,box-shadow] focus-visible:outline-none focus-visible:ring-2"
-            @click="emit('open', ticket.id)"
-        >
-            <div class="flex min-w-0 items-start justify-between gap-3">
-                <Badge
-                    variant="outline"
-                    class="wrap-anywhere max-w-full whitespace-normal"
-                >
-                    {{ ticket.ticket_key }}
-                </Badge>
-                <ArrowUpRight
-                    class="text-muted-foreground group-hover:text-primary size-4 shrink-0"
-                    aria-hidden="true"
-                />
-            </div>
-
-            <h3
-                class="text-body group-hover:text-primary wrap-anywhere min-w-0 font-semibold"
-            >
-                {{ ticket.title }}
-            </h3>
-
-            <TicketMetadata :ticket="ticket" :show-status="showStatus" />
-
-            <p
-                v-if="showDescription && ticket.description"
-                class="text-caption text-muted-foreground wrap-anywhere line-clamp-3"
-            >
-                {{ ticket.description }}
-            </p>
-
-            <p
-                v-if="ticket.is_blocked && ticket.blocked_comment"
-                class="text-caption text-warning-foreground bg-warning wrap-anywhere rounded-sm px-3 py-2"
-            >
-                {{
-                    t('tickets.blockerComment', {
-                        comment: ticket.blocked_comment,
-                    })
-                }}
-            </p>
-        </Link>
-
-        <div v-if="$slots.actions" class="border-t p-4">
-            <slot name="actions" />
-        </div>
-    </article>
-</template>

resources/js/components/tickets/TicketListItem.vue

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

resources/js/components/tickets/TicketMetadata.vue

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

resources/js/components/tickets/index.ts

@@ -1,2 +0,0 @@
-export { default as TicketCard } from './TicketCard.vue';
-export { default as TicketListItem } from './TicketListItem.vue';

resources/js/components/ui/avatar/Avatar.vue

@@ -1,35 +1,18 @@
 <script setup lang="ts">
-import type { AvatarRootProps } from "reka-ui";
-import type { HTMLAttributes } from "vue";
-import type { AvatarVariants } from ".";
-import { reactiveOmit } from "@vueuse/core";
-import { AvatarRoot, useForwardProps } from "reka-ui";
-import { cn } from "@/lib/utils";
-import { avatarVariants } from ".";
+import type { HTMLAttributes } from "vue"
+import { AvatarRoot } from "reka-ui"
+import { cn } from "@/lib/utils"
 
-const props = withDefaults(
-    defineProps<
-        AvatarRootProps & {
-            class?: HTMLAttributes["class"];
-            size?: AvatarVariants["size"];
-            shape?: AvatarVariants["shape"];
-        }
-    >(),
-    { size: "default", shape: "circle" },
-);
-
-const delegatedProps = reactiveOmit(props, "class", "size", "shape");
-const forwardedProps = useForwardProps(delegatedProps);
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
 </script>
 
 <template>
-    <AvatarRoot
-        data-slot="avatar"
-        :data-size="size"
-        :data-shape="shape"
-        v-bind="forwardedProps"
-        :class="cn(avatarVariants({ size, shape }), props.class)"
-    >
-        <slot />
-    </AvatarRoot>
+  <AvatarRoot
+    data-slot="avatar"
+    :class="cn('relative flex size-8 shrink-0 overflow-hidden rounded-full', props.class)"
+  >
+    <slot />
+  </AvatarRoot>
 </template>

resources/js/components/ui/avatar/AvatarFallback.vue

@@ -1,28 +1,21 @@
 <script setup lang="ts">
-import type { AvatarFallbackProps } from "reka-ui";
-import type { HTMLAttributes } from "vue";
-import { reactiveOmit } from "@vueuse/core";
-import { AvatarFallback } from "reka-ui";
-import { cn } from "@/lib/utils";
+import type { AvatarFallbackProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { AvatarFallback } from "reka-ui"
+import { cn } from "@/lib/utils"
 
-const props = defineProps<
-    AvatarFallbackProps & { class?: HTMLAttributes["class"] }
->();
+const props = defineProps<AvatarFallbackProps & { class?: HTMLAttributes["class"] }>()
 
-const delegatedProps = reactiveOmit(props, "class");
+const delegatedProps = reactiveOmit(props, "class")
 </script>
 
 <template>
-    <AvatarFallback
-        data-slot="avatar-fallback"
-        v-bind="delegatedProps"
-        :class="
-            cn(
-                'bg-accent text-accent-foreground flex size-full items-center justify-center font-semibold',
-                props.class,
-            )
-        "
-    >
-        <slot />
-    </AvatarFallback>
+  <AvatarFallback
+    data-slot="avatar-fallback"
+    v-bind="delegatedProps"
+    :class="cn('bg-muted flex size-full items-center justify-center rounded-full', props.class)"
+  >
+    <slot />
+  </AvatarFallback>
 </template>

resources/js/components/ui/avatar/UserAvatar.vue

@@ -1,39 +1,41 @@
 <script setup lang="ts">
-import type { AvatarVariants } from "@/components/ui/avatar";
-import type { UserModel } from "@/types/models/user-model";
-import { usePage } from "@inertiajs/vue3";
-import { computed } from "vue";
-import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import { getInitials } from "@/composables/useInitials";
+import {
+    Avatar,
+    AvatarFallback,
+    AvatarImage,
+} from "@/components/ui/avatar/index";
+import { usePage } from "@inertiajs/vue3";
+import { computed, PropType } from "vue";
+import { UserModel } from "@/types/models/user-model";
 
-const props = withDefaults(
-    defineProps<{
-        user?: UserModel;
-        rounded?: boolean;
-        size?: AvatarVariants["size"];
-        label?: string;
-    }>(),
-    {
-        rounded: true,
-        size: "default",
+const props = defineProps({
+    user: {
+        type: Object as PropType<UserModel>,
     },
-);
+    rounded: {
+        type: Boolean,
+        default: false,
+    },
+})
 
 const page = usePage();
-const user = computed(() => props.user ?? page.props.auth.user);
-const accessibleLabel = computed(() => props.label ?? user.value.name);
-const initials = computed(() => getInitials(user.value.name));
+const auth = computed(() => page.props.auth);
+
+const user = computed(() => props.user ?? auth.value.user)
 </script>
 
 <template>
-    <Avatar :size="size" :shape="rounded ? 'circle' : 'rounded'">
+    <Avatar class="size-8 overflow-hidden" :class="rounded ? 'rounded-full' : 'rounded-lg'">
         <AvatarImage
             v-if="user.avatar"
             :src="user.avatar"
-            :alt="accessibleLabel"
+            :alt="user.name"
         />
-        <AvatarFallback :aria-label="accessibleLabel">
-            {{ initials }}
+        <AvatarFallback
+            class="rounded-lg bg-neutral-200 font-semibold text-black dark:bg-neutral-700 dark:text-white"
+        >
+            {{ getInitials(auth.user?.name) }}
         </AvatarFallback>
     </Avatar>
 </template>

resources/js/components/ui/avatar/index.ts

@@ -1,31 +1,3 @@
-import type { VariantProps } from "class-variance-authority";
-import { cva } from "class-variance-authority";
-
-export { default as Avatar } from "./Avatar.vue";
-export { default as AvatarFallback } from "./AvatarFallback.vue";
-export { default as AvatarImage } from "./AvatarImage.vue";
-export { default as UserAvatar } from "./UserAvatar.vue";
-
-export const avatarVariants = cva(
-    "border-border bg-muted relative flex shrink-0 overflow-hidden border",
-    {
-        variants: {
-            size: {
-                sm: "size-6 text-label",
-                default: "size-8 text-caption",
-                lg: "size-10 text-body",
-                xl: "size-16 text-title",
-            },
-            shape: {
-                circle: "rounded-full",
-                rounded: "rounded-lg",
-                square: "rounded-sm",
-            },
-        },
-        defaultVariants: {
-            size: "default",
-            shape: "circle",
-        },
-    },
-);
-export type AvatarVariants = VariantProps<typeof avatarVariants>;
+export { default as Avatar } from "./Avatar.vue"
+export { default as AvatarFallback } from "./AvatarFallback.vue"
+export { default as AvatarImage } from "./AvatarImage.vue"

resources/js/components/ui/badge/Badge.vue

@@ -1,28 +1,26 @@
 <script setup lang="ts">
-import type { PrimitiveProps } from "reka-ui";
-import type { HTMLAttributes } from "vue";
-import type { BadgeVariants } from ".";
-import { reactiveOmit } from "@vueuse/core";
-import { Primitive } from "reka-ui";
-import { cn } from "@/lib/utils";
-import { badgeVariants } from ".";
+import type { PrimitiveProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import type { BadgeVariants } from "."
+import { reactiveOmit } from "@vueuse/core"
+import { Primitive } from "reka-ui"
+import { cn } from "@/lib/utils"
+import { badgeVariants } from "."
 
-const props = defineProps<
-    PrimitiveProps & {
-        variant?: BadgeVariants["variant"];
-        class?: HTMLAttributes["class"];
-    }
->();
+const props = defineProps<PrimitiveProps & {
+  variant?: BadgeVariants["variant"]
+  class?: HTMLAttributes["class"]
+}>()
 
-const delegatedProps = reactiveOmit(props, "class", "variant");
+const delegatedProps = reactiveOmit(props, "class")
 </script>
 
 <template>
-    <Primitive
-        data-slot="badge"
-        :class="cn(badgeVariants({ variant }), props.class)"
-        v-bind="delegatedProps"
-    >
-        <slot />
-    </Primitive>
+  <Primitive
+    data-slot="badge"
+    :class="cn(badgeVariants({ variant }), props.class)"
+    v-bind="delegatedProps"
+  >
+    <slot />
+  </Primitive>
 </template>

resources/js/components/ui/badge/index.ts

@@ -1,31 +1,26 @@
-import type { VariantProps } from "class-variance-authority";
-import { cva } from "class-variance-authority";
+import type { VariantProps } from "class-variance-authority"
+import { cva } from "class-variance-authority"
 
-export { default as Badge } from "./Badge.vue";
+export { default as Badge } from "./Badge.vue"
 
 export const badgeVariants = cva(
-    "inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-full border px-2.5 py-1 text-label whitespace-nowrap transition-[background-color,border-color,color,box-shadow] outline-none [&>svg]:pointer-events-none [&>svg]:size-3 [&>svg]:shrink-0 focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/35 focus-visible:ring-offset-2 focus-visible:ring-offset-background",
-    {
-        variants: {
-            variant: {
-                default:
-                    "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
-                secondary:
-                    "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/80",
-                destructive:
-                    "border-transparent bg-destructive text-destructive-foreground [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/35",
-                outline:
-                    "border-border bg-card text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
-                success:
-                    "border-transparent bg-success text-success-foreground [a&]:hover:brightness-95",
-                warning:
-                    "border-transparent bg-warning text-warning-foreground [a&]:hover:brightness-95",
-                info: "border-transparent bg-info text-info-foreground [a&]:hover:brightness-95",
-            },
-        },
-        defaultVariants: {
-            variant: "default",
-        },
+  "inline-flex items-center justify-center rounded-full border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
+  {
+    variants: {
+      variant: {
+        default:
+          "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
+        secondary:
+          "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
+        destructive:
+         "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline:
+          "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
+      },
     },
-);
-export type BadgeVariants = VariantProps<typeof badgeVariants>;
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+)
+export type BadgeVariants = VariantProps<typeof badgeVariants>

resources/js/components/ui/button/Button.vue

@@ -1,47 +1,29 @@
 <script setup lang="ts">
-import type { PrimitiveProps } from "reka-ui";
-import type { HTMLAttributes } from "vue";
-import type { ButtonVariants } from ".";
-import { Primitive } from "reka-ui";
-import { computed } from "vue";
-import { Spinner } from "@/components/ui/spinner";
-import { cn } from "@/lib/utils";
-import { buttonVariants } from ".";
+import type { PrimitiveProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import type { ButtonVariants } from "."
+import { Primitive } from "reka-ui"
+import { cn } from "@/lib/utils"
+import { buttonVariants } from "."
 
 interface Props extends PrimitiveProps {
-    variant?: ButtonVariants["variant"];
-    size?: ButtonVariants["size"];
-    class?: HTMLAttributes["class"];
-    disabled?: boolean;
-    loading?: boolean;
-    loadingLabel?: string;
+  variant?: ButtonVariants["variant"]
+  size?: ButtonVariants["size"]
+  class?: HTMLAttributes["class"]
 }
 
 const props = withDefaults(defineProps<Props>(), {
-    as: "button",
-    disabled: false,
-    loading: false,
-});
-
-const isDisabled = computed(() => props.disabled || props.loading);
+  as: "button",
+})
 </script>
 
 <template>
-    <Primitive
-        data-slot="button"
-        :data-loading="loading ? '' : undefined"
-        :as="as"
-        :as-child="asChild"
-        :disabled="isDisabled"
-        :aria-disabled="isDisabled ? 'true' : undefined"
-        :aria-busy="loading ? 'true' : undefined"
-        :class="cn(buttonVariants({ variant, size }), props.class)"
-    >
-        <Spinner
-            v-if="loading"
-            data-slot="button-spinner"
-            :label="loadingLabel"
-        />
-        <slot />
-    </Primitive>
+  <Primitive
+    data-slot="button"
+    :as="as"
+    :as-child="asChild"
+    :class="cn(buttonVariants({ variant, size }), props.class)"
+  >
+    <slot />
+  </Primitive>
 </template>

resources/js/components/ui/button/index.ts

@@ -1,37 +1,38 @@
-import type { VariantProps } from "class-variance-authority";
-import { cva } from "class-variance-authority";
+import type { VariantProps } from "class-variance-authority"
+import { cva } from "class-variance-authority"
 
-export { default as Button } from "./Button.vue";
+export { default as Button } from "./Button.vue"
 
 export const buttonVariants = cva(
-    "inline-flex shrink-0 items-center justify-center gap-2 whitespace-nowrap rounded-md text-body font-semibold transition-[background-color,border-color,color,box-shadow] outline-none disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[loading]:cursor-wait data-[loading]:opacity-80 focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/35 focus-visible:ring-offset-2 focus-visible:ring-offset-background [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-    {
-        variants: {
-            variant: {
-                default:
-                    "border border-transparent bg-brand text-brand-foreground shadow-xs hover:brightness-95",
-                destructive:
-                    "border border-transparent bg-destructive text-destructive-foreground shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/35",
-                outline:
-                    "border border-input bg-card text-foreground shadow-xs hover:border-primary/45 hover:bg-accent hover:text-accent-foreground",
-                secondary:
-                    "border border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
-                ghost: "border border-transparent hover:bg-accent hover:text-accent-foreground",
-                link: "min-h-0 border-0 px-0 text-primary underline-offset-4 shadow-none hover:underline",
-            },
-            size: {
-                default: "min-h-control px-4 py-2 has-[>svg]:px-3",
-                sm: "min-h-9 gap-1.5 px-3 py-1.5 has-[>svg]:px-2.5",
-                lg: "min-h-12 px-6 py-3 has-[>svg]:px-4",
-                icon: "size-control",
-                "icon-sm": "size-9",
-                "icon-lg": "size-12",
-            },
-        },
-        defaultVariants: {
-            variant: "default",
-            size: "default",
-        },
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  {
+    variants: {
+      variant: {
+        default:
+          "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline:
+          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost:
+          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        "default": "h-9 px-4 py-2 has-[>svg]:px-3",
+        "sm": "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+        "lg": "h-10 rounded-md px-6 has-[>svg]:px-4",
+        "icon": "size-9",
+        "icon-sm": "size-8",
+        "icon-lg": "size-10",
+      },
     },
-);
-export type ButtonVariants = VariantProps<typeof buttonVariants>;
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+)
+export type ButtonVariants = VariantProps<typeof buttonVariants>

resources/js/components/ui/checkbox/Checkbox.vue

@@ -1,48 +1,35 @@
 <script setup lang="ts">
-import type { CheckboxRootEmits, CheckboxRootProps } from "reka-ui";
-import type { HTMLAttributes } from "vue";
-import { reactiveOmit } from "@vueuse/core";
-import { Check } from "lucide-vue-next";
-import { CheckboxIndicator, CheckboxRoot, useForwardPropsEmits } from "reka-ui";
-import { cn } from "@/lib/utils";
+import type { CheckboxRootEmits, CheckboxRootProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { Check } from "lucide-vue-next"
+import { CheckboxIndicator, CheckboxRoot, useForwardPropsEmits } from "reka-ui"
+import { cn } from "@/lib/utils"
 
-const props = withDefaults(
-    defineProps<
-        CheckboxRootProps & {
-            class?: HTMLAttributes["class"];
-            invalid?: boolean;
-        }
-    >(),
-    { invalid: false },
-);
-const emits = defineEmits<CheckboxRootEmits>();
+const props = defineProps<CheckboxRootProps & { class?: HTMLAttributes["class"] }>()
+const emits = defineEmits<CheckboxRootEmits>()
 
-const delegatedProps = reactiveOmit(props, "class", "invalid");
+const delegatedProps = reactiveOmit(props, "class")
 
-const forwarded = useForwardPropsEmits(delegatedProps, emits);
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
 </script>
 
 <template>
-    <CheckboxRoot
-        v-slot="slotProps"
-        data-slot="checkbox"
-        :data-invalid="invalid ? '' : undefined"
-        :aria-invalid="invalid ? 'true' : undefined"
-        v-bind="forwarded"
-        :class="
-            cn(
-                'peer border-input bg-card size-5 shrink-0 rounded-md border shadow-xs transition-[background-color,border-color,box-shadow] outline-none hover:border-primary/55 data-[state=checked]:border-brand data-[state=checked]:bg-brand data-[state=checked]:text-brand-foreground focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/35 disabled:cursor-not-allowed disabled:bg-muted disabled:opacity-60 aria-invalid:border-destructive aria-invalid:ring-2 aria-invalid:ring-destructive/25',
-                props.class,
-            )
-        "
+  <CheckboxRoot
+    v-slot="slotProps"
+    data-slot="checkbox"
+    v-bind="forwarded"
+    :class="
+      cn('peer border-input data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50',
+         props.class)"
+  >
+    <CheckboxIndicator
+      data-slot="checkbox-indicator"
+      class="grid place-content-center text-current transition-none"
     >
-        <CheckboxIndicator
-            data-slot="checkbox-indicator"
-            class="grid place-content-center text-current transition-none"
-        >
-            <slot v-bind="slotProps">
-                <Check class="size-4" stroke-width="2.5" />
-            </slot>
-        </CheckboxIndicator>
-    </CheckboxRoot>
+      <slot v-bind="slotProps">
+        <Check class="size-3.5" />
+      </slot>
+    </CheckboxIndicator>
+  </CheckboxRoot>
 </template>

resources/js/components/ui/dialog/DialogContent.vue

@@ -1,67 +1,53 @@
 <script setup lang="ts">
-import type { DialogContentEmits, DialogContentProps } from "reka-ui";
-import type { HTMLAttributes } from "vue";
-import { reactiveOmit } from "@vueuse/core";
-import { X } from "lucide-vue-next";
+import type { DialogContentEmits, DialogContentProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { X } from "lucide-vue-next"
 import {
-    DialogClose,
-    DialogContent,
-    DialogPortal,
-    useForwardPropsEmits,
-} from "reka-ui";
-import { cn } from "@/lib/utils";
-import DialogOverlay from "./DialogOverlay.vue";
-import { useDialogFocus } from "@/composables/useDialogFocus";
-import { useLocalization } from "@/composables/useLocalization";
+  DialogClose,
+  DialogContent,
+  DialogPortal,
+  useForwardPropsEmits,
+} from "reka-ui"
+import { cn } from "@/lib/utils"
+import DialogOverlay from "./DialogOverlay.vue"
 
 defineOptions({
-    inheritAttrs: false,
-});
+  inheritAttrs: false,
+})
 
-const props = withDefaults(
-    defineProps<
-        DialogContentProps & {
-            class?: HTMLAttributes["class"];
-            showCloseButton?: boolean;
-        }
-    >(),
-    {
-        showCloseButton: true,
-    },
-);
-const emits = defineEmits<DialogContentEmits>();
+const props = withDefaults(defineProps<DialogContentProps & { class?: HTMLAttributes["class"], showCloseButton?: boolean }>(), {
+  showCloseButton: true,
+})
+const emits = defineEmits<DialogContentEmits>()
 
-const delegatedProps = reactiveOmit(props, "class", "showCloseButton");
-const { restoreFocus } = useDialogFocus();
-const { t } = useLocalization();
+const delegatedProps = reactiveOmit(props, "class")
 
-const forwarded = useForwardPropsEmits(delegatedProps, emits);
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
 </script>
 
 <template>
-    <DialogPortal>
-        <DialogOverlay />
-        <DialogContent
-            data-slot="dialog-content"
-            v-bind="{ ...$attrs, ...forwarded }"
-            @close-auto-focus="restoreFocus"
-            :class="
-                cn(
-                    'bg-card text-card-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid max-h-[calc(100dvh-2rem)] w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-column overflow-y-auto overscroll-contain rounded-md border p-page shadow-lg duration-200 motion-reduce:animate-none sm:max-w-lg',
-                    props.class,
-                )
-            "
-        >
-            <slot />
+  <DialogPortal>
+    <DialogOverlay />
+    <DialogContent
+      data-slot="dialog-content"
+      v-bind="{ ...$attrs, ...forwarded }"
+      :class="
+        cn(
+          'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg',
+          props.class,
+        )"
+    >
+      <slot />
 
-            <DialogClose
-                v-if="showCloseButton"
-                data-slot="dialog-close"
-                class="ring-offset-background focus-visible:ring-ring absolute top-1 right-1 flex size-control items-center justify-center rounded-md text-muted-foreground hover:bg-accent hover:text-foreground focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
-            >
-                <X />
-                <span class="sr-only">{{ t("common.close") }}</span>
-            </DialogClose>
-        </DialogContent>
-    </DialogPortal>
+      <DialogClose
+        v-if="showCloseButton"
+        data-slot="dialog-close"
+        class="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
+      >
+        <X />
+        <span class="sr-only">Close</span>
+      </DialogClose>
+    </DialogContent>
+  </DialogPortal>
 </template>

resources/js/components/ui/dialog/DialogHeader.vue

@@ -1,17 +1,17 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from "vue";
-import { cn } from "@/lib/utils";
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
 
 const props = defineProps<{
-    class?: HTMLAttributes["class"];
-}>();
+  class?: HTMLAttributes["class"]
+}>()
 </script>
 
 <template>
-    <div
-        data-slot="dialog-header"
-        :class="cn('flex flex-col gap-stack pr-6 text-left', props.class)"
-    >
-        <slot />
-    </div>
+  <div
+    data-slot="dialog-header"
+    :class="cn('flex flex-col gap-2 text-center sm:text-left', props.class)"
+  >
+    <slot />
+  </div>
 </template>

resources/js/components/ui/dialog/DialogScrollContent.vue

@@ -1,71 +1,59 @@
 <script setup lang="ts">
-import type { DialogContentEmits, DialogContentProps } from "reka-ui";
-import type { HTMLAttributes } from "vue";
-import { reactiveOmit } from "@vueuse/core";
-import { X } from "lucide-vue-next";
+import type { DialogContentEmits, DialogContentProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { X } from "lucide-vue-next"
 import {
-    DialogClose,
-    DialogContent,
-    DialogOverlay,
-    DialogPortal,
-    useForwardPropsEmits,
-} from "reka-ui";
-import { cn } from "@/lib/utils";
-import { useDialogFocus } from "@/composables/useDialogFocus";
-import { useLocalization } from "@/composables/useLocalization";
+  DialogClose,
+  DialogContent,
+  DialogOverlay,
+  DialogPortal,
+  useForwardPropsEmits,
+} from "reka-ui"
+import { cn } from "@/lib/utils"
 
 defineOptions({
-    inheritAttrs: false,
-});
+  inheritAttrs: false,
+})
 
-const props = defineProps<
-    DialogContentProps & { class?: HTMLAttributes["class"] }
->();
-const emits = defineEmits<DialogContentEmits>();
+const props = defineProps<DialogContentProps & { class?: HTMLAttributes["class"] }>()
+const emits = defineEmits<DialogContentEmits>()
 
-const delegatedProps = reactiveOmit(props, "class");
+const delegatedProps = reactiveOmit(props, "class")
 
-const forwarded = useForwardPropsEmits(delegatedProps, emits);
-const { restoreFocus } = useDialogFocus();
-const { t } = useLocalization();
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
 </script>
 
 <template>
-    <DialogPortal>
-        <DialogOverlay
-            class="fixed inset-0 z-50 grid place-items-center overflow-y-auto bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
-        >
-            <DialogContent
-                :class="
-                    cn(
-                        'relative z-50 my-4 grid w-full max-w-[calc(100%-2rem)] gap-column rounded-md border bg-card p-page text-card-foreground shadow-lg duration-200 sm:max-w-lg',
-                        props.class,
-                    )
-                "
-                v-bind="{ ...$attrs, ...forwarded }"
-                @close-auto-focus="restoreFocus"
-                @pointer-down-outside="
-                    (event) => {
-                        const originalEvent = event.detail.originalEvent;
-                        const target = originalEvent.target as HTMLElement;
-                        if (
-                            originalEvent.offsetX > target.clientWidth ||
-                            originalEvent.offsetY > target.clientHeight
-                        ) {
-                            event.preventDefault();
-                        }
-                    }
-                "
-            >
-                <slot />
+  <DialogPortal>
+    <DialogOverlay
+      class="fixed inset-0 z-50 grid place-items-center overflow-y-auto bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
+    >
+      <DialogContent
+        :class="
+          cn(
+            'relative z-50 grid w-full max-w-lg my-8 gap-4 border border-border bg-background p-6 shadow-lg duration-200 sm:rounded-lg md:w-full',
+            props.class,
+          )
+        "
+        v-bind="{ ...$attrs, ...forwarded }"
+        @pointer-down-outside="(event) => {
+          const originalEvent = event.detail.originalEvent;
+          const target = originalEvent.target as HTMLElement;
+          if (originalEvent.offsetX > target.clientWidth || originalEvent.offsetY > target.clientHeight) {
+            event.preventDefault();
+          }
+        }"
+      >
+        <slot />
 
-                <DialogClose
-                    class="absolute top-1 right-1 flex size-control items-center justify-center rounded-md text-muted-foreground hover:bg-accent hover:text-foreground focus-visible:outline-2 focus-visible:outline-ring"
-                >
-                    <X class="w-4 h-4" />
-                    <span class="sr-only">{{ t("common.close") }}</span>
-                </DialogClose>
-            </DialogContent>
-        </DialogOverlay>
-    </DialogPortal>
+        <DialogClose
+          class="absolute top-4 right-4 p-0.5 transition-colors rounded-md hover:bg-secondary"
+        >
+          <X class="w-4 h-4" />
+          <span class="sr-only">Close</span>
+        </DialogClose>
+      </DialogContent>
+    </DialogOverlay>
+  </DialogPortal>
 </template>

resources/js/components/ui/dropdown-menu/DropdownMenuCheckboxItem.vue

@@ -1,48 +1,39 @@
 <script setup lang="ts">
-import type {
-    DropdownMenuCheckboxItemEmits,
-    DropdownMenuCheckboxItemProps,
-} from "reka-ui";
-import type { HTMLAttributes } from "vue";
-import { reactiveOmit } from "@vueuse/core";
-import { Check } from "lucide-vue-next";
+import type { DropdownMenuCheckboxItemEmits, DropdownMenuCheckboxItemProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { Check } from "lucide-vue-next"
 import {
-    DropdownMenuCheckboxItem,
-    DropdownMenuItemIndicator,
-    useForwardPropsEmits,
-} from "reka-ui";
-import { cn } from "@/lib/utils";
+  DropdownMenuCheckboxItem,
+  DropdownMenuItemIndicator,
+  useForwardPropsEmits,
+} from "reka-ui"
+import { cn } from "@/lib/utils"
 
-const props = defineProps<
-    DropdownMenuCheckboxItemProps & { class?: HTMLAttributes["class"] }
->();
-const emits = defineEmits<DropdownMenuCheckboxItemEmits>();
+const props = defineProps<DropdownMenuCheckboxItemProps & { class?: HTMLAttributes["class"] }>()
+const emits = defineEmits<DropdownMenuCheckboxItemEmits>()
 
-const delegatedProps = reactiveOmit(props, "class");
+const delegatedProps = reactiveOmit(props, "class")
 
-const forwarded = useForwardPropsEmits(delegatedProps, emits);
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
 </script>
 
 <template>
-    <DropdownMenuCheckboxItem
-        data-slot="dropdown-menu-checkbox-item"
-        v-bind="forwarded"
-        :class="
-            cn(
-                'focus:bg-accent focus:text-accent-foreground relative flex min-h-control cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4',
-                props.class,
-            )
-        "
-    >
-        <span
-            class="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center"
-        >
-            <DropdownMenuItemIndicator>
-                <slot name="indicator-icon">
-                    <Check class="size-4" />
-                </slot>
-            </DropdownMenuItemIndicator>
-        </span>
-        <slot />
-    </DropdownMenuCheckboxItem>
+  <DropdownMenuCheckboxItem
+    data-slot="dropdown-menu-checkbox-item"
+    v-bind="forwarded"
+    :class=" cn(
+      'focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4',
+      props.class,
+    )"
+  >
+    <span class="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+      <DropdownMenuItemIndicator>
+        <slot name="indicator-icon">
+          <Check class="size-4" />
+        </slot>
+      </DropdownMenuItemIndicator>
+    </span>
+    <slot />
+  </DropdownMenuCheckboxItem>
 </template>

resources/js/components/ui/dropdown-menu/DropdownMenuContent.vue

@@ -1,49 +1,39 @@
 <script setup lang="ts">
-import type {
-    DropdownMenuContentEmits,
-    DropdownMenuContentProps,
-} from "reka-ui";
-import type { HTMLAttributes } from "vue";
-import { reactiveOmit } from "@vueuse/core";
+import type { DropdownMenuContentEmits, DropdownMenuContentProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
 import {
-    DropdownMenuContent,
-    DropdownMenuPortal,
-    useForwardPropsEmits,
-} from "reka-ui";
-import { cn } from "@/lib/utils";
+  DropdownMenuContent,
+  DropdownMenuPortal,
+  useForwardPropsEmits,
+} from "reka-ui"
+import { cn } from "@/lib/utils"
 
 defineOptions({
-    inheritAttrs: false,
-});
+  inheritAttrs: false,
+})
 
 const props = withDefaults(
-    defineProps<
-        DropdownMenuContentProps & { class?: HTMLAttributes["class"] }
-    >(),
-    {
-        sideOffset: 4,
-    },
-);
-const emits = defineEmits<DropdownMenuContentEmits>();
+  defineProps<DropdownMenuContentProps & { class?: HTMLAttributes["class"] }>(),
+  {
+    sideOffset: 4,
+  },
+)
+const emits = defineEmits<DropdownMenuContentEmits>()
 
-const delegatedProps = reactiveOmit(props, "class");
+const delegatedProps = reactiveOmit(props, "class")
 
-const forwarded = useForwardPropsEmits(delegatedProps, emits);
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
 </script>
 
 <template>
-    <DropdownMenuPortal>
-        <DropdownMenuContent
-            data-slot="dropdown-menu-content"
-            v-bind="{ ...$attrs, ...forwarded }"
-            :class="
-                cn(
-                    'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--reka-dropdown-menu-content-available-height) min-w-[8rem] max-w-[calc(100vw-2rem)] origin-(--reka-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md',
-                    props.class,
-                )
-            "
-        >
-            <slot />
-        </DropdownMenuContent>
-    </DropdownMenuPortal>
+  <DropdownMenuPortal>
+    <DropdownMenuContent
+      data-slot="dropdown-menu-content"
+      v-bind="{ ...$attrs, ...forwarded }"
+      :class="cn('bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--reka-dropdown-menu-content-available-height) min-w-[8rem] origin-(--reka-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md', props.class)"
+    >
+      <slot />
+    </DropdownMenuContent>
+  </DropdownMenuPortal>
 </template>

resources/js/components/ui/dropdown-menu/DropdownMenuItem.vue

@@ -1,41 +1,31 @@
 <script setup lang="ts">
-import type { DropdownMenuItemProps } from "reka-ui";
-import type { HTMLAttributes } from "vue";
-import { reactiveOmit } from "@vueuse/core";
-import { DropdownMenuItem, useForwardProps } from "reka-ui";
-import { cn } from "@/lib/utils";
+import type { DropdownMenuItemProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { DropdownMenuItem, useForwardProps } from "reka-ui"
+import { cn } from "@/lib/utils"
 
-const props = withDefaults(
-    defineProps<
-        DropdownMenuItemProps & {
-            class?: HTMLAttributes["class"];
-            inset?: boolean;
-            variant?: "default" | "destructive";
-        }
-    >(),
-    {
-        variant: "default",
-    },
-);
+const props = withDefaults(defineProps<DropdownMenuItemProps & {
+  class?: HTMLAttributes["class"]
+  inset?: boolean
+  variant?: "default" | "destructive"
+}>(), {
+  variant: "default",
+})
 
-const delegatedProps = reactiveOmit(props, "inset", "variant", "class");
+const delegatedProps = reactiveOmit(props, "inset", "variant", "class")
 
-const forwardedProps = useForwardProps(delegatedProps);
+const forwardedProps = useForwardProps(delegatedProps)
 </script>
 
 <template>
-    <DropdownMenuItem
-        data-slot="dropdown-menu-item"
-        :data-inset="inset ? '' : undefined"
-        :data-variant="variant"
-        v-bind="forwardedProps"
-        :class="
-            cn(
-                'focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*=\'text-\'])]:text-muted-foreground relative flex min-h-control cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4',
-                props.class,
-            )
-        "
-    >
-        <slot />
-    </DropdownMenuItem>
+  <DropdownMenuItem
+    data-slot="dropdown-menu-item"
+    :data-inset="inset ? '' : undefined"
+    :data-variant="variant"
+    v-bind="forwardedProps"
+    :class="cn('focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*=\'text-\'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4', props.class)"
+  >
+    <slot />
+  </DropdownMenuItem>
 </template>

resources/js/components/ui/dropdown-menu/DropdownMenuRadioItem.vue

@@ -1,49 +1,40 @@
 <script setup lang="ts">
-import type {
-    DropdownMenuRadioItemEmits,
-    DropdownMenuRadioItemProps,
-} from "reka-ui";
-import type { HTMLAttributes } from "vue";
-import { reactiveOmit } from "@vueuse/core";
-import { Circle } from "lucide-vue-next";
+import type { DropdownMenuRadioItemEmits, DropdownMenuRadioItemProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { Circle } from "lucide-vue-next"
 import {
-    DropdownMenuItemIndicator,
-    DropdownMenuRadioItem,
-    useForwardPropsEmits,
-} from "reka-ui";
-import { cn } from "@/lib/utils";
+  DropdownMenuItemIndicator,
+  DropdownMenuRadioItem,
+  useForwardPropsEmits,
+} from "reka-ui"
+import { cn } from "@/lib/utils"
 
-const props = defineProps<
-    DropdownMenuRadioItemProps & { class?: HTMLAttributes["class"] }
->();
+const props = defineProps<DropdownMenuRadioItemProps & { class?: HTMLAttributes["class"] }>()
 
-const emits = defineEmits<DropdownMenuRadioItemEmits>();
+const emits = defineEmits<DropdownMenuRadioItemEmits>()
 
-const delegatedProps = reactiveOmit(props, "class");
+const delegatedProps = reactiveOmit(props, "class")
 
-const forwarded = useForwardPropsEmits(delegatedProps, emits);
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
 </script>
 
 <template>
-    <DropdownMenuRadioItem
-        data-slot="dropdown-menu-radio-item"
-        v-bind="forwarded"
-        :class="
-            cn(
-                'focus:bg-accent focus:text-accent-foreground relative flex min-h-control cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4',
-                props.class,
-            )
-        "
-    >
-        <span
-            class="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center"
-        >
-            <DropdownMenuItemIndicator>
-                <slot name="indicator-icon">
-                    <Circle class="size-2 fill-current" />
-                </slot>
-            </DropdownMenuItemIndicator>
-        </span>
-        <slot />
-    </DropdownMenuRadioItem>
+  <DropdownMenuRadioItem
+    data-slot="dropdown-menu-radio-item"
+    v-bind="forwarded"
+    :class="cn(
+      'focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4',
+      props.class,
+    )"
+  >
+    <span class="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+      <DropdownMenuItemIndicator>
+        <slot name="indicator-icon">
+          <Circle class="size-2 fill-current" />
+        </slot>
+      </DropdownMenuItemIndicator>
+    </span>
+    <slot />
+  </DropdownMenuRadioItem>
 </template>

resources/js/components/ui/dropdown-menu/DropdownMenuSubContent.vue

@@ -1,34 +1,27 @@
 <script setup lang="ts">
-import type {
-    DropdownMenuSubContentEmits,
-    DropdownMenuSubContentProps,
-} from "reka-ui";
-import type { HTMLAttributes } from "vue";
-import { reactiveOmit } from "@vueuse/core";
-import { DropdownMenuSubContent, useForwardPropsEmits } from "reka-ui";
-import { cn } from "@/lib/utils";
+import type { DropdownMenuSubContentEmits, DropdownMenuSubContentProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import {
+  DropdownMenuSubContent,
+  useForwardPropsEmits,
+} from "reka-ui"
+import { cn } from "@/lib/utils"
 
-const props = defineProps<
-    DropdownMenuSubContentProps & { class?: HTMLAttributes["class"] }
->();
-const emits = defineEmits<DropdownMenuSubContentEmits>();
+const props = defineProps<DropdownMenuSubContentProps & { class?: HTMLAttributes["class"] }>()
+const emits = defineEmits<DropdownMenuSubContentEmits>()
 
-const delegatedProps = reactiveOmit(props, "class");
+const delegatedProps = reactiveOmit(props, "class")
 
-const forwarded = useForwardPropsEmits(delegatedProps, emits);
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
 </script>
 
 <template>
-    <DropdownMenuSubContent
-        data-slot="dropdown-menu-sub-content"
-        v-bind="forwarded"
-        :class="
-            cn(
-                'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--reka-dropdown-menu-content-available-height) min-w-[8rem] max-w-[calc(100vw-2rem)] origin-(--reka-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-lg',
-                props.class,
-            )
-        "
-    >
-        <slot />
-    </DropdownMenuSubContent>
+  <DropdownMenuSubContent
+    data-slot="dropdown-menu-sub-content"
+    v-bind="forwarded"
+    :class="cn('bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--reka-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg', props.class)"
+  >
+    <slot />
+  </DropdownMenuSubContent>
 </template>

resources/js/components/ui/dropdown-menu/DropdownMenuSubTrigger.vue

@@ -1,34 +1,30 @@
 <script setup lang="ts">
-import type { DropdownMenuSubTriggerProps } from "reka-ui";
-import type { HTMLAttributes } from "vue";
-import { reactiveOmit } from "@vueuse/core";
-import { ChevronRight } from "lucide-vue-next";
-import { DropdownMenuSubTrigger, useForwardProps } from "reka-ui";
-import { cn } from "@/lib/utils";
+import type { DropdownMenuSubTriggerProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { ChevronRight } from "lucide-vue-next"
+import {
+  DropdownMenuSubTrigger,
+  useForwardProps,
+} from "reka-ui"
+import { cn } from "@/lib/utils"
 
-const props = defineProps<
-    DropdownMenuSubTriggerProps & {
-        class?: HTMLAttributes["class"];
-        inset?: boolean;
-    }
->();
+const props = defineProps<DropdownMenuSubTriggerProps & { class?: HTMLAttributes["class"], inset?: boolean }>()
 
-const delegatedProps = reactiveOmit(props, "class", "inset");
-const forwardedProps = useForwardProps(delegatedProps);
+const delegatedProps = reactiveOmit(props, "class", "inset")
+const forwardedProps = useForwardProps(delegatedProps)
 </script>
 
 <template>
-    <DropdownMenuSubTrigger
-        data-slot="dropdown-menu-sub-trigger"
-        v-bind="forwardedProps"
-        :class="
-            cn(
-                'focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex min-h-control cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8',
-                props.class,
-            )
-        "
-    >
-        <slot />
-        <ChevronRight class="ml-auto size-4" />
-    </DropdownMenuSubTrigger>
+  <DropdownMenuSubTrigger
+    data-slot="dropdown-menu-sub-trigger"
+    v-bind="forwardedProps"
+    :class="cn(
+      'focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8',
+      props.class,
+    )"
+  >
+    <slot />
+    <ChevronRight class="ml-auto size-4" />
+  </DropdownMenuSubTrigger>
 </template>

resources/js/components/ui/input/Input.vue

@@ -1,38 +1,33 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from "vue";
-import { useVModel } from "@vueuse/core";
-import { cn } from "@/lib/utils";
+import type { HTMLAttributes } from "vue"
+import { useVModel } from "@vueuse/core"
+import { cn } from "@/lib/utils"
 
 const props = defineProps<{
-    defaultValue?: string | number;
-    modelValue?: string | number | null;
-    class?: HTMLAttributes["class"];
-    invalid?: boolean;
-}>();
+  defaultValue?: string | number
+  modelValue?: string | number | null
+  class?: HTMLAttributes["class"]
+}>()
 
 const emits = defineEmits<{
-    (e: "update:modelValue", payload: string | number): void;
-}>();
+  (e: "update:modelValue", payload: string | number): void
+}>()
 
 const modelValue = useVModel(props, "modelValue", emits, {
-    passive: true,
-    defaultValue: props.defaultValue,
-});
+  passive: true,
+  defaultValue: props.defaultValue,
+})
 </script>
 
 <template>
-    <input
-        v-model="modelValue"
-        data-slot="input"
-        :data-invalid="invalid ? '' : undefined"
-        :aria-invalid="invalid ? 'true' : undefined"
-        :class="
-            cn(
-                'border-input bg-card placeholder:text-muted-foreground selection:bg-brand selection:text-brand-foreground min-h-control w-full min-w-0 rounded-md border px-3 py-2 text-base shadow-xs transition-[border-color,box-shadow] outline-none file:mr-3 file:inline-flex file:min-h-8 file:border-0 file:bg-transparent file:text-body file:font-semibold disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-muted disabled:opacity-60 md:text-body',
-                'hover:border-primary/45 focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/35',
-                'aria-invalid:border-destructive aria-invalid:ring-2 aria-invalid:ring-destructive/25',
-                props.class,
-            )
-        "
-    />
+  <input
+    v-model="modelValue"
+    data-slot="input"
+    :class="cn(
+      'file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
+      'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',
+      'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
+      props.class,
+    )"
+  >
 </template>

resources/js/components/ui/select/SelectContent.vue

@@ -1,60 +1,51 @@
 <script setup lang="ts">
-import type { SelectContentEmits, SelectContentProps } from "reka-ui";
-import type { HTMLAttributes } from "vue";
-import { reactiveOmit } from "@vueuse/core";
+import type { SelectContentEmits, SelectContentProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
 import {
-    SelectContent,
-    SelectPortal,
-    SelectViewport,
-    useForwardPropsEmits,
-} from "reka-ui";
-import { cn } from "@/lib/utils";
-import { SelectScrollDownButton, SelectScrollUpButton } from ".";
+  SelectContent,
+  SelectPortal,
+  SelectViewport,
+  useForwardPropsEmits,
+} from "reka-ui"
+import { cn } from "@/lib/utils"
+import { SelectScrollDownButton, SelectScrollUpButton } from "."
 
 defineOptions({
-    inheritAttrs: false,
-});
+  inheritAttrs: false,
+})
 
 const props = withDefaults(
-    defineProps<SelectContentProps & { class?: HTMLAttributes["class"] }>(),
-    {
-        position: "popper",
-    },
-);
-const emits = defineEmits<SelectContentEmits>();
+  defineProps<SelectContentProps & { class?: HTMLAttributes["class"] }>(),
+  {
+    position: "popper",
+  },
+)
+const emits = defineEmits<SelectContentEmits>()
 
-const delegatedProps = reactiveOmit(props, "class");
+const delegatedProps = reactiveOmit(props, "class")
 
-const forwarded = useForwardPropsEmits(delegatedProps, emits);
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
 </script>
 
 <template>
-    <SelectPortal>
-        <SelectContent
-            data-slot="select-content"
-            v-bind="{ ...$attrs, ...forwarded }"
-            :class="
-                cn(
-                    'bg-popover text-popover-foreground border-border data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--reka-select-content-available-height) min-w-[8rem] overflow-x-hidden overflow-y-auto rounded-md border shadow-lg',
-                    position === 'popper' &&
-                        'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
-                    props.class,
-                )
-            "
-        >
-            <SelectScrollUpButton />
-            <SelectViewport
-                :class="
-                    cn(
-                        'p-1',
-                        position === 'popper' &&
-                            'h-[var(--reka-select-trigger-height)] w-full min-w-[var(--reka-select-trigger-width)] scroll-my-1',
-                    )
-                "
-            >
-                <slot />
-            </SelectViewport>
-            <SelectScrollDownButton />
-        </SelectContent>
-    </SelectPortal>
+  <SelectPortal>
+    <SelectContent
+      data-slot="select-content"
+      v-bind="{ ...$attrs, ...forwarded }"
+      :class="cn(
+        'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--reka-select-content-available-height) min-w-[8rem] overflow-x-hidden overflow-y-auto rounded-md border shadow-md',
+        position === 'popper'
+          && 'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
+        props.class,
+      )
+      "
+    >
+      <SelectScrollUpButton />
+      <SelectViewport :class="cn('p-1', position === 'popper' && 'h-[var(--reka-select-trigger-height)] w-full min-w-[var(--reka-select-trigger-width)] scroll-my-1')">
+        <slot />
+      </SelectViewport>
+      <SelectScrollDownButton />
+    </SelectContent>
+  </SelectPortal>
 </template>

resources/js/components/ui/select/SelectItem.vue

@@ -1,48 +1,44 @@
 <script setup lang="ts">
-import type { SelectItemProps } from "reka-ui";
-import type { HTMLAttributes } from "vue";
-import { reactiveOmit } from "@vueuse/core";
-import { Check } from "lucide-vue-next";
+import type { SelectItemProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { Check } from "lucide-vue-next"
 import {
-    SelectItem,
-    SelectItemIndicator,
-    SelectItemText,
-    useForwardProps,
-} from "reka-ui";
-import { cn } from "@/lib/utils";
+  SelectItem,
+  SelectItemIndicator,
+  SelectItemText,
+  useForwardProps,
+} from "reka-ui"
+import { cn } from "@/lib/utils"
 
-const props = defineProps<
-    SelectItemProps & { class?: HTMLAttributes["class"] }
->();
+const props = defineProps<SelectItemProps & { class?: HTMLAttributes["class"] }>()
 
-const delegatedProps = reactiveOmit(props, "class");
+const delegatedProps = reactiveOmit(props, "class")
 
-const forwardedProps = useForwardProps(delegatedProps);
+const forwardedProps = useForwardProps(delegatedProps)
 </script>
 
 <template>
-    <SelectItem
-        data-slot="select-item"
-        v-bind="forwardedProps"
-        :class="
-            cn(
-                'data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground [&_svg:not([class*=\'text-\'])]:text-muted-foreground relative flex min-h-9 w-full cursor-default items-center gap-2 rounded-sm py-2 pr-8 pl-2 text-body outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2',
-                props.class,
-            )
-        "
-    >
-        <span
-            class="absolute right-2 flex size-3.5 items-center justify-center"
-        >
-            <SelectItemIndicator>
-                <slot name="indicator-icon">
-                    <Check class="size-4" />
-                </slot>
-            </SelectItemIndicator>
-        </span>
+  <SelectItem
+    data-slot="select-item"
+    v-bind="forwardedProps"
+    :class="
+      cn(
+        'focus:bg-accent focus:text-accent-foreground [&_svg:not([class*=\'text-\'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2',
+        props.class,
+      )
+    "
+  >
+    <span class="absolute right-2 flex size-3.5 items-center justify-center">
+      <SelectItemIndicator>
+        <slot name="indicator-icon">
+          <Check class="size-4" />
+        </slot>
+      </SelectItemIndicator>
+    </span>
 
-        <SelectItemText>
-            <slot />
-        </SelectItemText>
-    </SelectItem>
+    <SelectItemText>
+      <slot />
+    </SelectItemText>
+  </SelectItem>
 </template>

resources/js/components/ui/select/SelectTrigger.vue

@@ -1,45 +1,33 @@
 <script setup lang="ts">
-import type { SelectTriggerProps } from "reka-ui";
-import type { HTMLAttributes } from "vue";
-import { reactiveOmit } from "@vueuse/core";
-import { ChevronDown } from "lucide-vue-next";
-import { SelectIcon, SelectTrigger, useForwardProps } from "reka-ui";
-import { cn } from "@/lib/utils";
+import type { SelectTriggerProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { ChevronDown } from "lucide-vue-next"
+import { SelectIcon, SelectTrigger, useForwardProps } from "reka-ui"
+import { cn } from "@/lib/utils"
 
 const props = withDefaults(
-    defineProps<
-        SelectTriggerProps & {
-            class?: HTMLAttributes["class"];
-            size?: "sm" | "default";
-            invalid?: boolean;
-        }
-    >(),
-    { size: "default", invalid: false },
-);
+  defineProps<SelectTriggerProps & { class?: HTMLAttributes["class"], size?: "sm" | "default" }>(),
+  { size: "default" },
+)
 
-const delegatedProps = reactiveOmit(props, "class", "size", "invalid");
-const forwardedProps = useForwardProps(delegatedProps);
+const delegatedProps = reactiveOmit(props, "class", "size")
+const forwardedProps = useForwardProps(delegatedProps)
 </script>
 
 <template>
-    <SelectTrigger
-        data-slot="select-trigger"
-        :data-size="size"
-        :data-invalid="invalid ? '' : undefined"
-        :aria-invalid="invalid ? 'true' : undefined"
-        v-bind="forwardedProps"
-        :class="
-            cn(
-                'group/select-trigger border-input bg-card data-[placeholder]:text-muted-foreground flex w-fit items-center justify-between gap-2 rounded-md border px-3 py-2 text-body whitespace-nowrap shadow-xs transition-[border-color,box-shadow] outline-none hover:border-primary/45 focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/35 disabled:cursor-not-allowed disabled:bg-muted disabled:opacity-60 data-[state=open]:border-primary data-[size=default]:min-h-control data-[size=sm]:min-h-9 aria-invalid:border-destructive aria-invalid:ring-2 aria-invalid:ring-destructive/25 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4 [&_svg:not([class*=\'text-\'])]:text-muted-foreground',
-                props.class,
-            )
-        "
-    >
-        <slot />
-        <SelectIcon as-child>
-            <ChevronDown
-                class="size-4 transition-transform duration-150 group-data-[state=open]/select-trigger:rotate-180"
-            />
-        </SelectIcon>
-    </SelectTrigger>
+  <SelectTrigger
+    data-slot="select-trigger"
+    :data-size="size"
+    v-bind="forwardedProps"
+    :class="cn(
+      'border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*=\'text-\'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4',
+      props.class,
+    )"
+  >
+    <slot />
+    <SelectIcon as-child>
+      <ChevronDown class="size-4 opacity-50" />
+    </SelectIcon>
+  </SelectTrigger>
 </template>

resources/js/components/ui/sheet/SheetContent.vue

@@ -1,70 +1,62 @@
 <script setup lang="ts">
-import type { DialogContentEmits, DialogContentProps } from "reka-ui";
-import type { HTMLAttributes } from "vue";
-import { reactiveOmit } from "@vueuse/core";
-import { X } from "lucide-vue-next";
+import type { DialogContentEmits, DialogContentProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { X } from "lucide-vue-next"
 import {
-    DialogClose,
-    DialogContent,
-    DialogPortal,
-    useForwardPropsEmits,
-} from "reka-ui";
-import { cn } from "@/lib/utils";
-import SheetOverlay from "./SheetOverlay.vue";
-import { useDialogFocus } from "@/composables/useDialogFocus";
-import { useLocalization } from "@/composables/useLocalization";
+  DialogClose,
+  DialogContent,
+  DialogPortal,
+  useForwardPropsEmits,
+} from "reka-ui"
+import { cn } from "@/lib/utils"
+import SheetOverlay from "./SheetOverlay.vue"
 
 interface SheetContentProps extends DialogContentProps {
-    class?: HTMLAttributes["class"];
-    side?: "top" | "right" | "bottom" | "left";
+  class?: HTMLAttributes["class"]
+  side?: "top" | "right" | "bottom" | "left"
 }
 
 defineOptions({
-    inheritAttrs: false,
-});
+  inheritAttrs: false,
+})
 
 const props = withDefaults(defineProps<SheetContentProps>(), {
-    side: "right",
-});
-const emits = defineEmits<DialogContentEmits>();
+  side: "right",
+})
+const emits = defineEmits<DialogContentEmits>()
 
-const delegatedProps = reactiveOmit(props, "class", "side");
+const delegatedProps = reactiveOmit(props, "class", "side")
 
-const forwarded = useForwardPropsEmits(delegatedProps, emits);
-const { restoreFocus } = useDialogFocus();
-const { t } = useLocalization();
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
 </script>
 
 <template>
-    <DialogPortal>
-        <SheetOverlay />
-        <DialogContent
-            data-slot="sheet-content"
-            :class="
-                cn(
-                    'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500',
-                    side === 'right' &&
-                        'data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm',
-                    side === 'left' &&
-                        'data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm',
-                    side === 'top' &&
-                        'data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b',
-                    side === 'bottom' &&
-                        'data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t',
-                    props.class,
-                )
-            "
-            v-bind="{ ...$attrs, ...forwarded }"
-            @close-auto-focus="restoreFocus"
-        >
-            <slot />
+  <DialogPortal>
+    <SheetOverlay />
+    <DialogContent
+      data-slot="sheet-content"
+      :class="cn(
+        'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500',
+        side === 'right'
+          && 'data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm',
+        side === 'left'
+          && 'data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm',
+        side === 'top'
+          && 'data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b',
+        side === 'bottom'
+          && 'data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t',
+        props.class)"
+      v-bind="{ ...$attrs, ...forwarded }"
+    >
+      <slot />
 
-            <DialogClose
-                class="ring-offset-background focus-visible:ring-ring absolute top-1 right-1 flex size-control items-center justify-center rounded-md text-muted-foreground hover:bg-accent hover:text-foreground focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:pointer-events-none"
-            >
-                <X class="size-4" />
-                <span class="sr-only">{{ t("common.close") }}</span>
-            </DialogClose>
-        </DialogContent>
-    </DialogPortal>
+      <DialogClose
+        class="ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none"
+      >
+        <X class="size-4" />
+        <span class="sr-only">Close</span>
+      </DialogClose>
+    </DialogContent>
+  </DialogPortal>
 </template>

resources/js/components/ui/sidebar/Sidebar.vue

@@ -1,118 +1,96 @@
 <script setup lang="ts">
-import type { SidebarProps } from ".";
-import { cn } from "@/lib/utils";
-import { Sheet, SheetContent } from "@/components/ui/sheet";
-import SheetDescription from "@/components/ui/sheet/SheetDescription.vue";
-import SheetHeader from "@/components/ui/sheet/SheetHeader.vue";
-import SheetTitle from "@/components/ui/sheet/SheetTitle.vue";
-import { SIDEBAR_WIDTH_MOBILE, useSidebar } from "./utils";
-import { useLocalization } from "@/composables/useLocalization";
+import type { SidebarProps } from "."
+import { cn } from "@/lib/utils"
+import { Sheet, SheetContent } from '@/components/ui/sheet'
+import SheetDescription from '@/components/ui/sheet/SheetDescription.vue'
+import SheetHeader from '@/components/ui/sheet/SheetHeader.vue'
+import SheetTitle from '@/components/ui/sheet/SheetTitle.vue'
+import { SIDEBAR_WIDTH_MOBILE, useSidebar } from "./utils"
 
 defineOptions({
-    inheritAttrs: false,
-});
+  inheritAttrs: false,
+})
 
 const props = withDefaults(defineProps<SidebarProps>(), {
-    side: "left",
-    variant: "sidebar",
-    collapsible: "offcanvas",
-});
+  side: "left",
+  variant: "sidebar",
+  collapsible: "offcanvas",
+})
 
-const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
-const { t } = useLocalization();
-
-function restoreTriggerFocus(event: Event) {
-    event.preventDefault();
-    document
-        .querySelector<HTMLButtonElement>('[data-sidebar="trigger"]')
-        ?.focus();
-}
+const { isMobile, state, openMobile, setOpenMobile } = useSidebar()
 </script>
 
 <template>
-    <div
-        v-if="collapsible === 'none'"
-        data-slot="sidebar"
-        :class="
-            cn(
-                'bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col',
-                props.class,
-            )
-        "
-        v-bind="$attrs"
+  <div
+    v-if="collapsible === 'none'"
+    data-slot="sidebar"
+    :class="cn('bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col', props.class)"
+    v-bind="$attrs"
+  >
+    <slot />
+  </div>
+
+  <Sheet v-else-if="isMobile" :open="openMobile" v-bind="$attrs" @update:open="setOpenMobile">
+    <SheetContent
+      data-sidebar="sidebar"
+      data-slot="sidebar"
+      data-mobile="true"
+      :side="side"
+      class="bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden"
+      :style="{
+        '--sidebar-width': SIDEBAR_WIDTH_MOBILE,
+      }"
     >
+      <SheetHeader class="sr-only">
+        <SheetTitle>Sidebar</SheetTitle>
+        <SheetDescription>Displays the mobile sidebar.</SheetDescription>
+      </SheetHeader>
+      <div class="flex h-full w-full flex-col">
         <slot />
-    </div>
-
-    <Sheet v-else-if="isMobile" :open="openMobile" @update:open="setOpenMobile">
-        <SheetContent
-            v-bind="$attrs"
-            data-sidebar="sidebar"
-            data-slot="sidebar"
-            data-mobile="true"
-            :side="side"
-            class="bg-sidebar text-sidebar-foreground w-(--sidebar-width) max-w-[calc(100vw-2rem)] gap-0 p-0 [&>button]:hidden"
-            @close-auto-focus="restoreTriggerFocus"
-            :style="{
-                '--sidebar-width': SIDEBAR_WIDTH_MOBILE,
-            }"
-        >
-            <SheetHeader class="sr-only">
-                <SheetTitle>{{ t("navigation.main") }}</SheetTitle>
-                <SheetDescription>{{
-                    t("navigation.mobileDescription")
-                }}</SheetDescription>
-            </SheetHeader>
-            <div class="flex min-h-0 h-full w-full flex-col">
-                <slot />
-            </div>
-        </SheetContent>
-    </Sheet>
+      </div>
+    </SheetContent>
+  </Sheet>
 
+  <div
+    v-else
+    class="group peer text-sidebar-foreground hidden md:block"
+    data-slot="sidebar"
+    :data-state="state"
+    :data-collapsible="state === 'collapsed' ? collapsible : ''"
+    :data-variant="variant"
+    :data-side="side"
+  >
+    <!-- This is what handles the sidebar gap on desktop  -->
     <div
-        v-else
-        class="group peer text-sidebar-foreground hidden md:block"
-        data-slot="sidebar"
-        :data-state="state"
-        :data-collapsible="state === 'collapsed' ? collapsible : ''"
-        :data-variant="variant"
-        :data-side="side"
+      :class="cn(
+        'relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear',
+        'group-data-[collapsible=offcanvas]:w-0',
+        'group-data-[side=right]:rotate-180',
+        variant === 'floating' || variant === 'inset'
+          ? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]'
+          : 'group-data-[collapsible=icon]:w-(--sidebar-width-icon)',
+      )"
+    />
+    <div
+      :class="cn(
+        'fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex',
+        side === 'left'
+          ? 'left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]'
+          : 'right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]',
+        // Adjust the padding for floating and inset variants.
+        variant === 'floating' || variant === 'inset'
+          ? 'p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]'
+          : 'group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l',
+        props.class,
+      )"
+      v-bind="$attrs"
     >
-        <!-- This is what handles the sidebar gap on desktop  -->
-        <div
-            :class="
-                cn(
-                    'relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear',
-                    'group-data-[collapsible=offcanvas]:w-0',
-                    'group-data-[side=right]:rotate-180',
-                    variant === 'floating' || variant === 'inset'
-                        ? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]'
-                        : 'group-data-[collapsible=icon]:w-(--sidebar-width-icon)',
-                )
-            "
-        />
-        <div
-            :class="
-                cn(
-                    'fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex',
-                    side === 'left'
-                        ? 'left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]'
-                        : 'right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]',
-                    // Adjust the padding for floating and inset variants.
-                    variant === 'floating' || variant === 'inset'
-                        ? 'p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]'
-                        : 'group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l',
-                    props.class,
-                )
-            "
-            v-bind="$attrs"
-        >
-            <div
-                data-sidebar="sidebar"
-                class="bg-sidebar group-data-[variant=floating]:border-sidebar-border flex h-full w-full flex-col group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:shadow-sm"
-            >
-                <slot />
-            </div>
-        </div>
+      <div
+        data-sidebar="sidebar"
+        class="bg-sidebar group-data-[variant=floating]:border-sidebar-border flex h-full w-full flex-col group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:shadow-sm"
+      >
+        <slot />
+      </div>
     </div>
+  </div>
 </template>

resources/js/components/ui/sidebar/SidebarContent.vue

@@ -1,23 +1,18 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from "vue";
-import { cn } from "@/lib/utils";
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
 
 const props = defineProps<{
-    class?: HTMLAttributes["class"];
-}>();
+  class?: HTMLAttributes["class"]
+}>()
 </script>
 
 <template>
-    <div
-        data-slot="sidebar-content"
-        data-sidebar="content"
-        :class="
-            cn(
-                'flex min-h-0 flex-1 flex-col gap-2 overflow-x-hidden overflow-y-auto',
-                props.class,
-            )
-        "
-    >
-        <slot />
-    </div>
+  <div
+    data-slot="sidebar-content"
+    data-sidebar="content"
+    :class="cn('flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden', props.class)"
+  >
+    <slot />
+  </div>
 </template>

resources/js/components/ui/sidebar/SidebarInset.vue

@@ -1,23 +1,21 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from "vue";
-import { cn } from "@/lib/utils";
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
 
 const props = defineProps<{
-    class?: HTMLAttributes["class"];
-}>();
+  class?: HTMLAttributes["class"]
+}>()
 </script>
 
 <template>
-    <main
-        data-slot="sidebar-inset"
-        :class="
-            cn(
-                'bg-background relative flex min-w-0 w-full flex-1 flex-col',
-                'md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2',
-                props.class,
-            )
-        "
-    >
-        <slot />
-    </main>
+  <main
+    data-slot="sidebar-inset"
+    :class="cn(
+      'bg-background relative flex w-full flex-1 flex-col',
+      'md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2',
+      props.class,
+    )"
+  >
+    <slot />
+  </main>
 </template>

resources/js/components/ui/sidebar/SidebarMenuButton.vue

@@ -1,60 +1,48 @@
 <script setup lang="ts">
-import type { Component } from "vue";
-import type { SidebarMenuButtonProps } from "./SidebarMenuButtonChild.vue";
-import { reactiveOmit } from "@vueuse/core";
-import {
-    Tooltip,
-    TooltipContent,
-    TooltipTrigger,
-} from "@/components/ui/tooltip";
-import SidebarMenuButtonChild from "./SidebarMenuButtonChild.vue";
-import { useSidebar } from "./utils";
+import type { Component } from "vue"
+import type { SidebarMenuButtonProps } from "./SidebarMenuButtonChild.vue"
+import { reactiveOmit } from "@vueuse/core"
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'
+import SidebarMenuButtonChild from "./SidebarMenuButtonChild.vue"
+import { useSidebar } from "./utils"
 
 defineOptions({
-    inheritAttrs: false,
-});
+  inheritAttrs: false,
+})
 
-const props = withDefaults(
-    defineProps<
-        SidebarMenuButtonProps & {
-            tooltip?: string | Component;
-        }
-    >(),
-    {
-        as: "button",
-        variant: "default",
-        size: "default",
-    },
-);
+const props = withDefaults(defineProps<SidebarMenuButtonProps & {
+  tooltip?: string | Component
+}>(), {
+  as: "button",
+  variant: "default",
+  size: "default",
+})
 
-const { isMobile, state } = useSidebar();
+const { isMobile, state } = useSidebar()
 
-const delegatedProps = reactiveOmit(props, "tooltip");
+const delegatedProps = reactiveOmit(props, "tooltip")
 </script>
 
 <template>
-    <SidebarMenuButtonChild
-        v-if="!tooltip || isMobile || state !== 'collapsed'"
-        v-bind="{ ...delegatedProps, ...$attrs }"
-    >
-        <slot />
-    </SidebarMenuButtonChild>
+  <SidebarMenuButtonChild v-if="!tooltip" v-bind="{ ...delegatedProps, ...$attrs }">
+    <slot />
+  </SidebarMenuButtonChild>
 
-    <Tooltip v-else>
-        <TooltipTrigger as-child>
-            <SidebarMenuButtonChild v-bind="{ ...delegatedProps, ...$attrs }">
-                <slot />
-            </SidebarMenuButtonChild>
-        </TooltipTrigger>
-        <TooltipContent
-            side="right"
-            align="center"
-            :hidden="state !== 'collapsed' || isMobile"
-        >
-            <template v-if="typeof tooltip === 'string'">
-                {{ tooltip }}
-            </template>
-            <component :is="tooltip" v-else />
-        </TooltipContent>
-    </Tooltip>
+  <Tooltip v-else>
+    <TooltipTrigger as-child>
+      <SidebarMenuButtonChild v-bind="{ ...delegatedProps, ...$attrs }">
+        <slot />
+      </SidebarMenuButtonChild>
+    </TooltipTrigger>
+    <TooltipContent
+      side="right"
+      align="center"
+      :hidden="state !== 'collapsed' || isMobile"
+    >
+      <template v-if="typeof tooltip === 'string'">
+        {{ tooltip }}
+      </template>
+      <component :is="tooltip" v-else />
+    </TooltipContent>
+  </Tooltip>
 </template>

resources/js/components/ui/sidebar/SidebarProvider.vue

@@ -1,112 +1,82 @@
 <script setup lang="ts">
-import type { HTMLAttributes, Ref } from "vue";
-import {
-    defaultDocument,
-    useEventListener,
-    useMediaQuery,
-    useVModel,
-} from "@vueuse/core";
-import { TooltipProvider } from "reka-ui";
-import { computed, ref, watch } from "vue";
-import { cn } from "@/lib/utils";
-import {
-    provideSidebarContext,
-    SIDEBAR_COOKIE_MAX_AGE,
-    SIDEBAR_COOKIE_NAME,
-    SIDEBAR_KEYBOARD_SHORTCUT,
-    SIDEBAR_WIDTH,
-    SIDEBAR_WIDTH_ICON,
-} from "./utils";
+import type { HTMLAttributes, Ref } from "vue"
+import { defaultDocument, useEventListener, useMediaQuery, useVModel } from "@vueuse/core"
+import { TooltipProvider } from "reka-ui"
+import { computed, ref } from "vue"
+import { cn } from "@/lib/utils"
+import { provideSidebarContext, SIDEBAR_COOKIE_MAX_AGE, SIDEBAR_COOKIE_NAME, SIDEBAR_KEYBOARD_SHORTCUT, SIDEBAR_WIDTH, SIDEBAR_WIDTH_ICON } from "./utils"
 
-const props = withDefaults(
-    defineProps<{
-        defaultOpen?: boolean;
-        open?: boolean;
-        class?: HTMLAttributes["class"];
-    }>(),
-    {
-        defaultOpen: !defaultDocument?.cookie.includes(
-            `${SIDEBAR_COOKIE_NAME}=false`,
-        ),
-        open: undefined,
-    },
-);
+const props = withDefaults(defineProps<{
+  defaultOpen?: boolean
+  open?: boolean
+  class?: HTMLAttributes["class"]
+}>(), {
+  defaultOpen: !defaultDocument?.cookie.includes(`${SIDEBAR_COOKIE_NAME}=false`),
+  open: undefined,
+})
 
 const emits = defineEmits<{
-    "update:open": [open: boolean];
-}>();
+  "update:open": [open: boolean]
+}>()
 
-const isMobile = useMediaQuery("(width < 768px)");
-const openMobile = ref(false);
-watch(isMobile, () => {
-    openMobile.value = false;
-});
+const isMobile = useMediaQuery("(max-width: 768px)")
+const openMobile = ref(false)
 
 const open = useVModel(props, "open", emits, {
-    defaultValue: props.defaultOpen ?? false,
-    passive: (props.open === undefined) as false,
-}) as Ref<boolean>;
+  defaultValue: props.defaultOpen ?? false,
+  passive: (props.open === undefined) as false,
+}) as Ref<boolean>
 
 function setOpen(value: boolean) {
-    open.value = value; // emits('update:open', value)
+  open.value = value // emits('update:open', value)
 
-    // This sets the cookie to keep the sidebar state.
-    document.cookie = `${SIDEBAR_COOKIE_NAME}=${open.value}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
+  // This sets the cookie to keep the sidebar state.
+  document.cookie = `${SIDEBAR_COOKIE_NAME}=${open.value}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`
 }
 
 function setOpenMobile(value: boolean) {
-    openMobile.value = value;
+  openMobile.value = value
 }
 
 // Helper to toggle the sidebar.
 function toggleSidebar() {
-    return isMobile.value
-        ? setOpenMobile(!openMobile.value)
-        : setOpen(!open.value);
+  return isMobile.value ? setOpenMobile(!openMobile.value) : setOpen(!open.value)
 }
 
 useEventListener("keydown", (event: KeyboardEvent) => {
-    if (
-        event.key === SIDEBAR_KEYBOARD_SHORTCUT &&
-        (event.metaKey || event.ctrlKey)
-    ) {
-        event.preventDefault();
-        toggleSidebar();
-    }
-});
+  if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {
+    event.preventDefault()
+    toggleSidebar()
+  }
+})
 
 // We add a state so that we can do data-state="expanded" or "collapsed".
 // This makes it easier to style the sidebar with Tailwind classes.
-const state = computed(() => (open.value ? "expanded" : "collapsed"));
+const state = computed(() => open.value ? "expanded" : "collapsed")
 
 provideSidebarContext({
-    state,
-    open,
-    setOpen,
-    isMobile,
-    openMobile,
-    setOpenMobile,
-    toggleSidebar,
-});
+  state,
+  open,
+  setOpen,
+  isMobile,
+  openMobile,
+  setOpenMobile,
+  toggleSidebar,
+})
 </script>
 
 <template>
-    <TooltipProvider :delay-duration="0">
-        <div
-            data-slot="sidebar-wrapper"
-            :style="{
-                '--sidebar-width': SIDEBAR_WIDTH,
-                '--sidebar-width-icon': SIDEBAR_WIDTH_ICON,
-            }"
-            :class="
-                cn(
-                    'group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full',
-                    props.class,
-                )
-            "
-            v-bind="$attrs"
-        >
-            <slot />
-        </div>
-    </TooltipProvider>
+  <TooltipProvider :delay-duration="0">
+    <div
+      data-slot="sidebar-wrapper"
+      :style="{
+        '--sidebar-width': SIDEBAR_WIDTH,
+        '--sidebar-width-icon': SIDEBAR_WIDTH_ICON,
+      }"
+      :class="cn('group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full', props.class)"
+      v-bind="$attrs"
+    >
+      <slot />
+    </div>
+  </TooltipProvider>
 </template>