feat(ui): dock configuration warnings in the navigation HUD

resources/views/components/configuration-warning.blade.php

@@ -0,0 +1,41 @@
+@props(['diff' => []])
+
+<div class="relative" x-data="{ open: false }" @click.outside="open = false" @keydown.escape.window="open = false">
+    <button type="button" aria-label="Configuration changes not applied" aria-haspopup="dialog"
+        :aria-expanded="open" @click="open = !open"
+        class="flex h-8 items-center justify-center gap-1.5 rounded-lg px-2 text-amber-700 transition-colors hover:bg-amber-100 dark:text-warning dark:hover:bg-warning/10">
+        <x-reicon name="alert-triangle" class="size-4" />
+        <span class="hidden text-xs font-medium lg:inline">Changes pending</span>
+    </button>
+
+    <div x-show="open" x-cloak x-transition.opacity role="dialog"
+        class="fixed top-14 left-1/2 z-[1100] w-[calc(100vw-2rem)] max-w-sm -translate-x-1/2 rounded-lg p-3 lg:absolute lg:top-full lg:right-0 lg:left-auto lg:mt-2 lg:translate-x-0"
+        style="background: var(--coollabs-elevated); box-shadow: 0 0 0 1px var(--coollabs-line), var(--shadow-modal);">
+        <div class="flex items-start gap-2.5">
+            <span
+                class="flex size-7 shrink-0 items-center justify-center rounded-md bg-amber-100 text-amber-700 dark:bg-warning/10 dark:text-warning">
+                <x-reicon name="alert-triangle" class="size-4" />
+            </span>
+            <div class="min-w-0 flex-1">
+                <p class="text-[13px] font-semibold leading-4 text-neutral-950 dark:text-fg">
+                    The latest configuration has not been applied
+                </p>
+                <p class="mt-0.5 text-[11px] leading-4 text-neutral-600 dark:text-fg-dim">
+                    @if (data_get($diff, 'count'))
+                        {{ data_get($diff, 'count') }}
+                        {{ data_get($diff, 'count') === 1 ? 'change' : 'changes' }} unapplied.
+                        {{ data_get($diff, 'requires_build') ? 'Rebuild required.' : 'Redeploy to apply.' }}
+                        <button type="button"
+                            class="ml-0.5 inline-flex items-center gap-0.5 font-semibold text-coollabs transition-colors hover:text-coollabs-100 dark:text-warning dark:hover:text-warning/80"
+                            @click="open = false; $dispatch('open-configuration-diff')">
+                            View changes
+                            <x-reicon name="arrow-right" class="size-2.5" />
+                        </button>
+                    @else
+                        Redeploy to apply.
+                    @endif
+                </p>
+            </div>
+        </div>
+    </div>
+</div>