From de8a9e1d502e664684e6f087f40c011693f7f557 Mon Sep 17 00:00:00 2001
From: vibe-bot <bot@local>
Date: Fri, 8 Aug 2025 14:41:05 +0200
Subject: [PATCH] feat(ui): Uhrzeit (Europe/Berlin) oben links im Header,
 Format HH:MM

---
 web/src/App.tsx    | 11 +++++++++++
 web/src/styles.css |  6 ++++++
 2 files changed, 17 insertions(+)

diff --git a/web/src/App.tsx b/web/src/App.tsx
index 6d65734..37c9509 100644
--- a/web/src/App.tsx
+++ b/web/src/App.tsx
@@ -20,6 +20,7 @@ export default function App() {
   const [adminPwd, setAdminPwd] = useState<string>('');
   const [selectedSet, setSelectedSet] = useState<Record<string, boolean>>({});
   const selectedCount = useMemo(() => Object.values(selectedSet).filter(Boolean).length, [selectedSet]);
+  const [clock, setClock] = useState<string>(() => new Intl.DateTimeFormat('de-DE', { hour: '2-digit', minute: '2-digit', hour12: false, timeZone: 'Europe/Berlin' }).format(new Date()));
 
   useEffect(() => {
     (async () => {
@@ -39,6 +40,15 @@ export default function App() {
     })();
   }, []);
 
+  // Uhrzeit (Berlin) aktualisieren
+  useEffect(() => {
+    const fmt = new Intl.DateTimeFormat('de-DE', { hour: '2-digit', minute: '2-digit', hour12: false, timeZone: 'Europe/Berlin' });
+    const update = () => setClock(fmt.format(new Date()));
+    const id = setInterval(update, 1000);
+    update();
+    return () => clearInterval(id);
+  }, []);
+
   useEffect(() => {
     (async () => {
       try {
@@ -111,6 +121,7 @@ export default function App() {
   return (
     <div className="container">
       <header>
+        <div className="clock">{clock}</div>
         <h1>Discord Soundboard</h1>
         <p>Schicke dem Bot per privater Nachricht eine .mp3 — neue Sounds erscheinen automatisch.</p>
         <div className="badge">Geladene Sounds: {total}</div>
diff --git a/web/src/styles.css b/web/src/styles.css
index 8797bef..184e6e8 100644
--- a/web/src/styles.css
+++ b/web/src/styles.css
@@ -73,6 +73,12 @@ body {
 header { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
 header h1 { margin: 0; font-weight: 800; letter-spacing: .3px; }
 header p { opacity: .8; }
+.clock {
+  font-size: 48px;
+  font-weight: 800;
+  letter-spacing: 1px;
+  line-height: 1;
+}
 .badge { align-self: flex-start; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); padding: 6px 10px; border-radius: 999px; font-size: 13px; }
 
 .controls { display: grid; grid-template-columns: 1fr minmax(240px, 300px) 220px 180px; gap: 12px; align-items: center; margin-bottom: 18px; }