sfsdf

modules/pihole/design.json

@@ -0,0 +1,15 @@
+{
+  "eyebrow": "Modul",
+  "title": "Pi-hole",
+  "description": "Pi-hole Monitoring, Listen und Steuerung fuer zwei Instanzen.",
+  "actions": [
+    { "label": "Zur Startseite", "href": "/", "variant": "ghost" },
+    { "label": "Instanzen", "href": "/module/pihole/instances", "variant": "secondary" }
+  ],
+  "tabs": [
+    { "label": "Dashboard", "href": "/module/pihole" },
+    { "label": "Instanzen", "href": "/module/pihole/instances" },
+    { "label": "Listen", "href": "/module/pihole/lists" },
+    { "label": "Queries", "href": "/module/pihole/queries" }
+  ]
+}

modules/pihole/pages/index.php

@@ -6,10 +6,17 @@ $assets->addScript('/module/pihole/asset?file=pihole.js', 'footer', true);
 $instances = module_fn('pihole', 'instances');
 $hasConfig = !empty($instances);
 ?>
+<?= module_shell_header('pihole', [
+  'title' => 'Pi-hole Dashboard',
+  'description' => 'Status, Blockings, Usage und Steuerung fuer beide Instanzen.',
+  'tabs' => [
+    ['label' => 'Dashboard', 'href' => '/module/pihole', 'active' => true],
+    ['label' => 'Instanzen', 'href' => '/module/pihole/instances'],
+    ['label' => 'Listen', 'href' => '/module/pihole/lists'],
+    ['label' => 'Queries', 'href' => '/module/pihole/queries'],
+  ],
+]) ?>
 <div class="card pihole-page" data-pihole-page="dashboard">
-  <div class="pill">Pi-hole</div>
-  <h1 style="margin-top:.75rem;">Pi-hole Dashboard</h1>
-  <p class="muted">Status, Blockings, Usage und Steuerung fuer beide Instanzen.</p>
 
   <div class="card" style="margin-top:1rem;">
     <div class="pihole-section-header">
@@ -134,3 +141,4 @@ $hasConfig = !empty($instances);
     <div class="pihole-error" data-instance-errors></div>
   </div>
 </template>
+<?= module_shell_footer() ?>

modules/pihole/pages/instances.php

@@ -132,15 +132,23 @@ if ($primaryId === '') {
     }
 }
 ?>
+<?= module_shell_header('pihole', [
+  'title' => 'Pi-hole Instanzen',
+  'description' => 'Pi-hole Instanzen hinzufuegen, bearbeiten und loeschen.',
+  'tabs' => [
+    ['label' => 'Dashboard', 'href' => '/module/pihole'],
+    ['label' => 'Instanzen', 'href' => '/module/pihole/instances', 'active' => true],
+    ['label' => 'Listen', 'href' => '/module/pihole/lists'],
+    ['label' => 'Queries', 'href' => '/module/pihole/queries'],
+  ],
+]) ?>
 <div class="card">
-  <div class="pill">Pi-hole</div>
-  <div style="display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-top:.75rem;">
+  <div style="display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;">
     <h1 style="margin:0;">Instanzen</h1>
     <div style="display:flex; gap:10px; flex-wrap:wrap;">
       <button class="cta-button" type="button" data-instance-new>+ Neue Instanz</button>
     </div>
   </div>
-  <p class="muted">Pi-hole Instanzen hinzufuegen, bearbeiten und loeschen.</p>
 
   <?php if ($error): ?>
     <div class="card notice-card" style="margin-top:1rem; border-color:#ffb4a8; background:#fff5f3; color:#7a2114;">
@@ -222,3 +230,4 @@ if ($primaryId === '') {
     </form>
   </div>
 </div>
+<?= module_shell_footer() ?>