feat: Implement breadcrumb navigation across settings pages and add confirm dialog functionality

Author: iamspydey

README.md

@@ -44,7 +44,7 @@ These projects were the main inspiration for creating this starter kit. I’ve a
 
         I prefer explicit event handling over “magic” behavior. With custom events, you can keep logic clean and encapsulated inside dedicated listener classes.
 
-6. **Custom Helpers**: Instead of a typical `helpers.php` file, this kit organizes helpers as **Traits**, **Services**, **Support** classes, and **Facades**.
+6. **Custom Helpers**: This kit organizes helpers as **Traits**, **Services**, **Support** classes, and **Facades**.
     - A small `helpers.php` file is still included for global functions where class imports aren’t possible.
 
 ---
@@ -111,6 +111,15 @@ Now as the app is all setup correctly you can start working on it:
 composer dev
 ```
 
+**Note**: `composer dev` may give you an error about the `pail` command, specially on Windows machines, as the `pail` command is not supported on windows.
+
+To make it work you can use alternative command:
+
+```bash
+# Start development server on Windows
+composer dev:win
+```
+
 ### Check on browser
 
 After running your development server you can visit to [http://localhost:8000](http://localhost:8000) or [http://127.0.0.1:8000](http://127.0.0.1:8000) on your favorite browser to see the app in action.

app/Http/Controllers/Settings/GlobalConfigController.php

@@ -10,6 +10,8 @@
 use App\Http\Requests\Settings\UpdateGlobalConfigRequest;
 use App\Http\Resources\GlobalConfigResource;
 use App\Models\GlobalConfig;
+use App\Support\BreadcrumbItem;
+use App\Traits\HasBreadcrumbs;
 use Error;
 use Exception;
 use Illuminate\Http\RedirectResponse;
@@ -22,6 +24,8 @@
 
 final class GlobalConfigController
 {
+    use HasBreadcrumbs;
+
     public function index(Request $request): Response|JsonResource
     {
         if ($request->wantsJson()) {
@@ -31,6 +35,14 @@ public function index(Request $request): Response|JsonResource
         return Inertia::render('settings/global-configs/index', [
             'title' => 'Global Configurations',
             'query' => $request->query(),
+            'breadcrumbs' => $this->withBreadcrumbs([
+                BreadcrumbItem::make()
+                    ->labeled('Settings')
+                    ->to(route('global-configs.index')),
+                BreadcrumbItem::make()
+                    ->labeled('Global Configuration')
+                    ->to(route('global-configs.index')),
+            ]),
         ]);
     }
 
@@ -39,6 +51,14 @@ public function create(): Response
         return Inertia::render('settings/global-configs/form', [
             'title' => 'Create Global Config',
             'types' => GlobalConfigType::values(),
+            'breadcrumbs' => $this->withBreadcrumbs([
+                BreadcrumbItem::make('Settings')
+                    ->to(route('global-configs.index')),
+                BreadcrumbItem::make('Global Configuration')
+                    ->to(route('global-configs.index')),
+                BreadcrumbItem::make('Create Global Configuration')
+                    ->to(route('global-configs.create')),
+            ]),
         ]);
     }
 
@@ -67,6 +87,14 @@ public function edit(GlobalConfig $globalConfig): Response
             'title' => 'Update Global Config',
             'globalConfig' => new GlobalConfigResource($globalConfig),
             'types' => GlobalConfigType::values(),
+            'breadcrumbs' => $this->withBreadcrumbs([
+                BreadcrumbItem::make('Settings')
+                    ->to(route('global-configs.index')),
+                BreadcrumbItem::make('Global Configuration')
+                    ->to(route('global-configs.index')),
+                BreadcrumbItem::make('Update Global Configuration')
+                    ->to(route('global-configs.edit', [$globalConfig])),
+            ]),
         ]);
     }
 

app/Http/Controllers/Settings/PasswordController.php

@@ -5,6 +5,8 @@
 namespace App\Http\Controllers\Settings;
 
 use App\Models\User;
+use App\Support\BreadcrumbItem;
+use App\Traits\HasBreadcrumbs;
 use Illuminate\Container\Attributes\CurrentUser;
 use Illuminate\Http\RedirectResponse;
 use Illuminate\Http\Request;
@@ -15,12 +17,22 @@
 
 final class PasswordController
 {
+    use HasBreadcrumbs;
+
     /**
      * Show the user's password settings page.
      */
     public function edit(): Response
     {
-        return Inertia::render('settings/password');
+        return Inertia::render('settings/password', [
+            'title' => 'Password',
+            'breadcrumbs' => $this->withBreadcrumbs([
+                BreadcrumbItem::make('Settings')
+                    ->to(route('global-configs.index')),
+                BreadcrumbItem::make('Password')
+                    ->to(route('password.edit')),
+            ]),
+        ]);
     }
 
     /**

app/Http/Controllers/Settings/ProfileController.php

@@ -6,6 +6,8 @@
 
 use App\Http\Requests\Settings\ProfileUpdateRequest;
 use App\Models\User;
+use App\Support\BreadcrumbItem;
+use App\Traits\HasBreadcrumbs;
 use Illuminate\Container\Attributes\CurrentUser;
 use Illuminate\Contracts\Auth\MustVerifyEmail;
 use Illuminate\Http\RedirectResponse;
@@ -16,6 +18,8 @@
 
 final class ProfileController
 {
+    use HasBreadcrumbs;
+
     /**
      * Show the user's profile settings page.
      */
@@ -24,6 +28,12 @@ public function edit(Request $request): Response
         return Inertia::render('settings/profile', [
             'mustVerifyEmail' => $request->user() instanceof MustVerifyEmail,
             'status' => $request->session()->get('status'),
+            'breadcrumbs' => $this->withBreadcrumbs([
+                BreadcrumbItem::make('Settings')
+                    ->to(route('global-configs.index')),
+                BreadcrumbItem::make('Profile settings')
+                    ->to(route('profile.edit')),
+            ]),
         ]);
     }
 

app/Http/Controllers/Settings/TwoFactorAuthenticationController.php

@@ -6,6 +6,8 @@
 
 use App\Http\Requests\Settings\TwoFactorAuthenticationRequest;
 use App\Models\User;
+use App\Support\BreadcrumbItem;
+use App\Traits\HasBreadcrumbs;
 use Illuminate\Container\Attributes\CurrentUser;
 use Illuminate\Routing\Controllers\HasMiddleware;
 use Illuminate\Routing\Controllers\Middleware;
@@ -15,6 +17,8 @@
 
 final class TwoFactorAuthenticationController implements HasMiddleware
 {
+    use HasBreadcrumbs;
+
     /**
      * Get the middleware that should be assigned to the controller.
      */
@@ -35,6 +39,12 @@ public function show(TwoFactorAuthenticationRequest $request, #[CurrentUser] Use
         return Inertia::render('settings/two-factor', [
             'twoFactorEnabled' => $user->hasEnabledTwoFactorAuthentication() ?: false,
             'requiresConfirmation' => Features::optionEnabled(Features::twoFactorAuthentication(), 'confirm'),
+            'breadcrumbs' => $this->withBreadcrumbs([
+                BreadcrumbItem::make('Settings')
+                    ->to(route('global-configs.index')),
+                BreadcrumbItem::make('Two-Factor Authentication')
+                    ->to(route('two-factor.show')),
+            ]),
         ]);
     }
 }

app/Support/BreadcrumbItem.php

@@ -0,0 +1,68 @@
+<?php
+
+declare(strict_types=1);
+
+namespace App\Support;
+
+use Illuminate\Contracts\Support\Arrayable;
+
+/**
+ * @implements Arrayable<string, mixed>
+ */
+final class BreadcrumbItem implements Arrayable
+{
+    private string $label = '';
+
+    private ?string $url = null;
+
+    private bool $current = false;
+
+    public static function make(?string $label = null): self
+    {
+        $instance = new self;
+
+        if ($label !== null && $label !== '' && $label !== '0') {
+            $instance->label = $label;
+        }
+
+        return $instance;
+    }
+
+    public function labeled(string $label): static
+    {
+        $this->label = $label;
+
+        return $this;
+    }
+
+    public function to(?string $url): static
+    {
+        $this->url = $url;
+
+        return $this;
+    }
+
+    public function url(?string $url): static
+    {
+        return $this->to($url);
+    }
+
+    public function isCurrent(bool $current = true): static
+    {
+        $this->current = $current;
+
+        return $this;
+    }
+
+    /**
+     * @return array{url: string|null, label: string, current: bool}
+     */
+    public function toArray(): array
+    {
+        return [
+            'url' => $this->url,
+            'label' => $this->label,
+            'current' => $this->current,
+        ];
+    }
+}

app/Traits/HasBreadcrumbs.php

@@ -0,0 +1,24 @@
+<?php
+
+declare(strict_types=1);
+
+namespace App\Traits;
+
+use App\Support\BreadcrumbItem;
+
+trait HasBreadcrumbs
+{
+    /**
+     * Summary of withBreadcrumbs
+     *
+     * @param  BreadcrumbItem[]  $items
+     * @return array<int, array{url: string|null, label: string, current: bool}>
+     */
+    public function withBreadcrumbs(array $items): array
+    {
+        /** @var array<int, array{url: string|null, label: string, current: bool}> $breadcrumbs */
+        $breadcrumbs = collect($items)->map(fn ($item): array => $item->toArray())->toArray();
+
+        return $breadcrumbs;
+    }
+}

composer.json

@@ -67,7 +67,7 @@
         "dev:ssr": [
             "npm run build:ssr",
             "Composer\\Config::disableProcessTimeout",
-            "npx concurrently -c \"#93c5fd,#c4b5fd,#fb7185,#fdba74\" \"php artisan serve\" \"php artisan queue:listen --tries=1\" \"php artisan pail --timeout=0\" \"php artisan inertia:start-ssr\" --names=server,queue,logs,ssr --kill-others"
+            "npx concurrently -c \"#93c5fd,#c4b5fd,#fdba74\" \"php artisan serve\" \"php artisan queue:listen --tries=1\" \"php artisan inertia:start-ssr\" --names=server,queue,ssr --kill-others"
         ],
         "post-autoload-dump": [
             "Illuminate\\Foundation\\ComposerScripts::postAutoloadDump",

package-lock.json

@@ -22,6 +22,7 @@
     "dependencies": {
         "@headlessui/react": "^2.2.9",
         "@inertiajs/react": "^2.2.8",
+        "@radix-ui/react-alert-dialog": "^1.1.15",
         "@radix-ui/react-avatar": "^1.1.10",
         "@radix-ui/react-checkbox": "^1.3.3",
         "@radix-ui/react-collapsible": "^1.1.12",