From 0c5ff34bf24753cd6768a3eee4760013fb90e9bb Mon Sep 17 00:00:00 2001
From: CallMeTechie <34693633+CallMeTechie@users.noreply.github.com>
Date: Fri, 3 Jul 2026 09:02:56 +0200
Subject: [PATCH] feat(pihole): timer-icon controls in Pi-hole card, drop
 separate control card

Replace the standalone 'Blockierung steuern' card with compact stopwatch
icon buttons (30s/5m/30m + enable) placed in the Pi-hole card: the donut
card title area in aurora, the page header in default/pro. Blocking badge
(with live countdown) moves alongside in default/pro. Full labels kept as
title/aria-label; short durations via new pihole.dur_* keys (de+en).
All button/badge ids preserved (JS wiring + aurora_theme id assertions intact).
---
 CHANGELOG.md                       |  7 +++++++
 src/i18n/de.json                   |  3 +++
 src/i18n/en.json                   |  3 +++
 templates/aurora/pages/pihole.njk  | 24 ++++++++----------------
 templates/default/pages/pihole.njk | 23 +++++++----------------
 templates/pro/pages/pihole.njk     | 23 +++++++----------------
 6 files changed, 35 insertions(+), 48 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 4e1395ad..f0939823 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,12 @@
 # Changelog
 
+## [Unreleased]
+
+### Änderungen
+- Pi-hole: Pause-/Aktivieren-Steuerung als Timer-Icons in die Pi-hole-Karte verlegt; separate „Blockierung steuern"-Karte entfernt
+
+---
+
 ## [1.114.2] — 2026-07-02
 
 ### Fixes
diff --git a/src/i18n/de.json b/src/i18n/de.json
index 637128a9..071c6928 100644
--- a/src/i18n/de.json
+++ b/src/i18n/de.json
@@ -1842,6 +1842,9 @@
   "pihole.pause_30s": "30 Sekunden pausieren",
   "pihole.pause_5m": "5 Minuten pausieren",
   "pihole.pause_30m": "30 Minuten pausieren",
+  "pihole.dur_30s": "30 s",
+  "pihole.dur_5m": "5 min",
+  "pihole.dur_30m": "30 min",
   "pihole.enable_blocking": "Blockierung aktivieren",
   "pihole.blocking_on": "Aktiv",
   "pihole.blocking_off": "Deaktiviert",
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 0667804e..2eb4ab12 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -1897,6 +1897,9 @@
   "pihole.pause_30s": "Pause 30 seconds",
   "pihole.pause_5m": "Pause 5 minutes",
   "pihole.pause_30m": "Pause 30 minutes",
+  "pihole.dur_30s": "30s",
+  "pihole.dur_5m": "5m",
+  "pihole.dur_30m": "30m",
   "pihole.enable_blocking": "Enable blocking",
   "pihole.blocking_on": "Enabled",
   "pihole.blocking_off": "Disabled",
diff --git a/templates/aurora/pages/pihole.njk b/templates/aurora/pages/pihole.njk
index d6956ec8..7f224630 100644
--- a/templates/aurora/pages/pihole.njk
+++ b/templates/aurora/pages/pihole.njk
@@ -30,6 +30,12 @@
       {{ t('pihole.title') }}
       <span id="ph-blocking-badge" class="tag tag-grey" style="margin-left:auto">—</span>
     </div>
+    <div class="ph-controls" role="group" aria-label="{{ t('pihole.control') }}" style="display:flex;gap:8px;flex-wrap:wrap;margin:4px 0 16px">
+      <button class="btn btn-ghost btn-sm" id="btn-ph-pause-30s" title="{{ t('pihole.pause_30s') }}" aria-label="{{ t('pihole.pause_30s') }}"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="13" r="8"/><path d="M12 9.5V13l2.5 1.5"/><path d="M9.5 2h5"/></svg>{{ t('pihole.dur_30s') }}</button>
+      <button class="btn btn-ghost btn-sm" id="btn-ph-pause-5m" title="{{ t('pihole.pause_5m') }}" aria-label="{{ t('pihole.pause_5m') }}"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="13" r="8"/><path d="M12 9.5V13l2.5 1.5"/><path d="M9.5 2h5"/></svg>{{ t('pihole.dur_5m') }}</button>
+      <button class="btn btn-ghost btn-sm" id="btn-ph-pause-30m" title="{{ t('pihole.pause_30m') }}" aria-label="{{ t('pihole.pause_30m') }}"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="13" r="8"/><path d="M12 9.5V13l2.5 1.5"/><path d="M9.5 2h5"/></svg>{{ t('pihole.dur_30m') }}</button>
+      <button class="btn btn-primary btn-sm" id="btn-ph-enable" title="{{ t('pihole.enable_blocking') }}" aria-label="{{ t('pihole.enable_blocking') }}"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3l7 3v5c0 4.4-3 7.6-7 9-4-1.4-7-4.6-7-9V6z"/><path d="M9 12l2 2 4-4"/></svg></button>
+    </div>
     <div class="pi-wrap">
       <div class="donut-host">
         <svg class="donut" viewBox="0 0 120 120">
@@ -103,9 +109,9 @@
   </div>
 </div>
 
-{# ── Row 3: Query Types (span6) + Blocking Control (span6) #}
+{# ── Row 3: Query Types (full width; pause controls moved into the Pi-hole card) #}
 <div class="grid" style="margin-bottom:18px">
-  <div class="card span6">
+  <div class="card span12">
     <div class="card-title">
       <span class="ic"><svg viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="9" stroke="currentColor" stroke-width="2"/><path d="M3 12h18M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18" stroke="currentColor" stroke-width="2"/></svg></span>
       {{ t('pihole.query_types') }}
@@ -114,20 +120,6 @@
       <div style="text-align:center;color:var(--text-3);padding:20px">{{ t('common.loading') }}</div>
     </div>
   </div>
-  <div class="card span6">
-    <div class="card-title">
-      <span class="ic"><svg viewBox="0 0 24 24" fill="none"><rect x="6" y="5" width="4" height="14" rx="1" stroke="currentColor" stroke-width="2"/><rect x="14" y="5" width="4" height="14" rx="1" stroke="currentColor" stroke-width="2"/></svg></span>
-      {{ t('pihole.control') }}
-    </div>
-    <div class="card-body">
-      <div style="display:flex;flex-direction:column;gap:8px">
-        <button class="btn btn-ghost" id="btn-ph-pause-30s">{{ t('pihole.pause_30s') }}</button>
-        <button class="btn btn-ghost" id="btn-ph-pause-5m">{{ t('pihole.pause_5m') }}</button>
-        <button class="btn btn-ghost" id="btn-ph-pause-30m">{{ t('pihole.pause_30m') }}</button>
-        <button class="btn btn-primary" id="btn-ph-enable">{{ t('pihole.enable_blocking') }}</button>
-      </div>
-    </div>
-  </div>
 </div>
 
 {# ── Health / Connection card ─────────────────────────── #}
diff --git a/templates/default/pages/pihole.njk b/templates/default/pages/pihole.njk
index 84469629..4509251e 100644
--- a/templates/default/pages/pihole.njk
+++ b/templates/default/pages/pihole.njk
@@ -7,7 +7,12 @@
     <div class="page-title">{{ t('pihole.title') }}</div>
     <div class="page-sub">{{ t('pihole.subtitle') }}</div>
   </div>
-  <div style="display:flex;gap:8px;flex-wrap:wrap;margin-top:4px">
+  <div style="display:flex;gap:8px;flex-wrap:wrap;margin-top:4px;align-items:center" role="group" aria-label="{{ t('pihole.control') }}">
+    <span id="ph-blocking-badge" class="tag tag-grey">—</span>
+    <button class="btn btn-ghost" id="btn-ph-pause-30s" title="{{ t('pihole.pause_30s') }}" aria-label="{{ t('pihole.pause_30s') }}"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="13" r="8"/><path d="M12 9.5V13l2.5 1.5"/><path d="M9.5 2h5"/></svg>{{ t('pihole.dur_30s') }}</button>
+    <button class="btn btn-ghost" id="btn-ph-pause-5m" title="{{ t('pihole.pause_5m') }}" aria-label="{{ t('pihole.pause_5m') }}"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="13" r="8"/><path d="M12 9.5V13l2.5 1.5"/><path d="M9.5 2h5"/></svg>{{ t('pihole.dur_5m') }}</button>
+    <button class="btn btn-ghost" id="btn-ph-pause-30m" title="{{ t('pihole.pause_30m') }}" aria-label="{{ t('pihole.pause_30m') }}"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="13" r="8"/><path d="M12 9.5V13l2.5 1.5"/><path d="M9.5 2h5"/></svg>{{ t('pihole.dur_30m') }}</button>
+    <button class="btn btn-primary" id="btn-ph-enable" title="{{ t('pihole.enable_blocking') }}" aria-label="{{ t('pihole.enable_blocking') }}"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3l7 3v5c0 4.4-3 7.6-7 9-4-1.4-7-4.6-7-9V6z"/><path d="M9 12l2 2 4-4"/></svg></button>
     <button class="btn btn-ghost" id="btn-pihole-reload">
       <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="23 4 23 10 17 10"/><path d="M20.49 15a9 9 0 11-2.12-9.36L23 10"/></svg>
       {{ t('common.reload') }}
@@ -77,7 +82,7 @@
 </div>
 
 {# ── Grid-3: Top Clients / Query Types / Steuerung ────── #}
-<div class="grid-3" style="margin-bottom:16px">
+<div class="content-grid" style="margin-bottom:16px">
   <div class="card">
     <div class="card-head">
       <span class="card-title">{{ t('pihole.top_clients') }}</span>
@@ -104,20 +109,6 @@
       <div style="text-align:center;color:var(--text-3);padding:20px">{{ t('common.loading') }}</div>
     </div>
   </div>
-  <div class="card">
-    <div class="card-head">
-      <span class="card-title">{{ t('pihole.control') }}</span>
-      <span id="ph-blocking-badge" class="tag tag-grey" style="margin-left:auto">—</span>
-    </div>
-    <div class="card-body">
-      <div style="display:flex;flex-direction:column;gap:8px">
-        <button class="btn btn-ghost" id="btn-ph-pause-30s">{{ t('pihole.pause_30s') }}</button>
-        <button class="btn btn-ghost" id="btn-ph-pause-5m">{{ t('pihole.pause_5m') }}</button>
-        <button class="btn btn-ghost" id="btn-ph-pause-30m">{{ t('pihole.pause_30m') }}</button>
-        <button class="btn btn-primary" id="btn-ph-enable">{{ t('pihole.enable_blocking') }}</button>
-      </div>
-    </div>
-  </div>
 </div>
 
 {# ── Health / Connection card ─────────────────────────── #}
diff --git a/templates/pro/pages/pihole.njk b/templates/pro/pages/pihole.njk
index 84469629..4509251e 100644
--- a/templates/pro/pages/pihole.njk
+++ b/templates/pro/pages/pihole.njk
@@ -7,7 +7,12 @@
     <div class="page-title">{{ t('pihole.title') }}</div>
     <div class="page-sub">{{ t('pihole.subtitle') }}</div>
   </div>
-  <div style="display:flex;gap:8px;flex-wrap:wrap;margin-top:4px">
+  <div style="display:flex;gap:8px;flex-wrap:wrap;margin-top:4px;align-items:center" role="group" aria-label="{{ t('pihole.control') }}">
+    <span id="ph-blocking-badge" class="tag tag-grey">—</span>
+    <button class="btn btn-ghost" id="btn-ph-pause-30s" title="{{ t('pihole.pause_30s') }}" aria-label="{{ t('pihole.pause_30s') }}"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="13" r="8"/><path d="M12 9.5V13l2.5 1.5"/><path d="M9.5 2h5"/></svg>{{ t('pihole.dur_30s') }}</button>
+    <button class="btn btn-ghost" id="btn-ph-pause-5m" title="{{ t('pihole.pause_5m') }}" aria-label="{{ t('pihole.pause_5m') }}"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="13" r="8"/><path d="M12 9.5V13l2.5 1.5"/><path d="M9.5 2h5"/></svg>{{ t('pihole.dur_5m') }}</button>
+    <button class="btn btn-ghost" id="btn-ph-pause-30m" title="{{ t('pihole.pause_30m') }}" aria-label="{{ t('pihole.pause_30m') }}"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="13" r="8"/><path d="M12 9.5V13l2.5 1.5"/><path d="M9.5 2h5"/></svg>{{ t('pihole.dur_30m') }}</button>
+    <button class="btn btn-primary" id="btn-ph-enable" title="{{ t('pihole.enable_blocking') }}" aria-label="{{ t('pihole.enable_blocking') }}"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3l7 3v5c0 4.4-3 7.6-7 9-4-1.4-7-4.6-7-9V6z"/><path d="M9 12l2 2 4-4"/></svg></button>
     <button class="btn btn-ghost" id="btn-pihole-reload">
       <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="23 4 23 10 17 10"/><path d="M20.49 15a9 9 0 11-2.12-9.36L23 10"/></svg>
       {{ t('common.reload') }}
@@ -77,7 +82,7 @@
 </div>
 
 {# ── Grid-3: Top Clients / Query Types / Steuerung ────── #}
-<div class="grid-3" style="margin-bottom:16px">
+<div class="content-grid" style="margin-bottom:16px">
   <div class="card">
     <div class="card-head">
       <span class="card-title">{{ t('pihole.top_clients') }}</span>
@@ -104,20 +109,6 @@
       <div style="text-align:center;color:var(--text-3);padding:20px">{{ t('common.loading') }}</div>
     </div>
   </div>
-  <div class="card">
-    <div class="card-head">
-      <span class="card-title">{{ t('pihole.control') }}</span>
-      <span id="ph-blocking-badge" class="tag tag-grey" style="margin-left:auto">—</span>
-    </div>
-    <div class="card-body">
-      <div style="display:flex;flex-direction:column;gap:8px">
-        <button class="btn btn-ghost" id="btn-ph-pause-30s">{{ t('pihole.pause_30s') }}</button>
-        <button class="btn btn-ghost" id="btn-ph-pause-5m">{{ t('pihole.pause_5m') }}</button>
-        <button class="btn btn-ghost" id="btn-ph-pause-30m">{{ t('pihole.pause_30m') }}</button>
-        <button class="btn btn-primary" id="btn-ph-enable">{{ t('pihole.enable_blocking') }}</button>
-      </div>
-    </div>
-  </div>
 </div>
 
 {# ── Health / Connection card ─────────────────────────── #}