Timeline Zoom

app/public/assets/css/main.css

@@ -862,3 +862,25 @@ button {
   color: var(--muted);
   font-size: .88rem;
 }
+
+.timeline-zoom {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.timeline-zoom button {
+  background: var(--panel-2);
+  border: 1px solid var(--border);
+  color: var(--text);
+  padding: 9px 12px;
+}
+
+.timeline-zoom button.active {
+  background: var(--accent);
+  border-color: var(--accent);
+}
+
+.timeline-wrap {
+  --minute-width: 2px;
+}

app/public/assets/js/app.js

@@ -135,4 +135,33 @@ document.addEventListener("DOMContentLoaded", () => {
   });
 });
 
+document.addEventListener("DOMContentLoaded", () => {
+  const timelineWrap = document.querySelector(".timeline-wrap");
+  const zoomButtons = document.querySelectorAll("[data-zoom]");
+
+  if (!timelineWrap || !zoomButtons.length) {
+    return;
+  }
+
+  const savedZoom = localStorage.getItem("tvguideTimelineZoom") || "2";
+
+  const applyZoom = (zoom) => {
+    timelineWrap.style.setProperty("--minute-width", `${zoom}px`);
+
+    zoomButtons.forEach((button) => {
+      button.classList.toggle("active", button.dataset.zoom === zoom);
+    });
+
+    localStorage.setItem("tvguideTimelineZoom", zoom);
+  };
+
+  zoomButtons.forEach((button) => {
+    button.addEventListener("click", () => {
+      applyZoom(button.dataset.zoom);
+    });
+  });
+
+  applyZoom(savedZoom);
+});
+
 console.log('TVGuide loaded');

app/templates/day.php

@@ -84,6 +84,13 @@ foreach ($dayProgrammes as $channel) {
   </form>
 </div>
 
+<div class="timeline-zoom">
+  <button type="button" data-zoom="1.2">Kompakt</button>
+  <button type="button" data-zoom="2" class="active">Normal</button>
+  <button type="button" data-zoom="3">Groß</button>
+  <button type="button" data-zoom="4">Extra</button>
+</div>
+
 <div class="guide-search">
   <input
     type="search"