Страница зоны со всеми её устройствами и live-статусом

Раньше зона в списке была просто строкой без возможности провалиться
внутрь — все устройства смотрелись только через общий плоский список
/devices с колонкой "Зона". Теперь клик по зоне открывает её страницу
с карточками устройств (иконка по категории, статус online/offline/
unknown точкой с пульсацией для online, external_id) — ровно то, что
просили: все устройства и их статус на одном экране при выборе зоны.

Заодно список зон переведён с голой таблицы на карточки для
консистентности с новой страницей — вся карточка кликабельна и ведёт
на show, кнопки изменить/удалить остаются только у owner.

ZonePolicy::view уже был публичным (true всем) — новый роут
zones.show использует его без изменений.

laravel-app/resources/js/Components/DeviceTypeIcon.vue

@@ -0,0 +1,20 @@
+<script setup>
+defineProps({
+    category: { type: String, required: true },
+});
+</script>
+
+<template>
+    <div
+        class="flex h-10 w-10 shrink-0 items-center justify-center rounded-full"
+        :class="category === 'sensor' ? 'bg-sky-50 text-sky-600' : 'bg-amber-50 text-amber-600'"
+    >
+        <svg v-if="category === 'sensor'" class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8">
+            <path stroke-linecap="round" stroke-linejoin="round" d="M12 3v10.5a3.5 3.5 0 1 0 3 0" />
+            <path stroke-linecap="round" stroke-linejoin="round" d="M9.5 6h5" />
+        </svg>
+        <svg v-else class="h-5 w-5" viewBox="0 0 24 24" fill="currentColor">
+            <path d="M13 2 3 13.5h6.5L10.5 22 21 9.5h-6.5L13 2Z" />
+        </svg>
+    </div>
+</template>

laravel-app/resources/js/Components/StatusDot.vue

@@ -0,0 +1,31 @@
+<script setup>
+defineProps({
+    status: { type: String, required: true },
+});
+
+const dotColor = {
+    online: 'bg-green-500',
+    offline: 'bg-gray-300',
+    unknown: 'bg-yellow-400',
+};
+
+const label = {
+    online: 'Онлайн',
+    offline: 'Офлайн',
+    unknown: 'Неизвестно',
+};
+</script>
+
+<template>
+    <span class="inline-flex items-center gap-1.5">
+        <span class="relative flex h-2.5 w-2.5">
+            <span
+                v-if="status === 'online'"
+                class="absolute inline-flex h-full w-full animate-ping rounded-full opacity-75"
+                :class="dotColor[status]"
+            />
+            <span class="relative inline-flex h-2.5 w-2.5 rounded-full" :class="dotColor[status] ?? dotColor.unknown" />
+        </span>
+        <span class="text-xs font-medium text-gray-500">{{ label[status] ?? status }}</span>
+    </span>
+</template>