refactor: complete rewrite as React+FastAPI dashboard

Replace monolithic Jinja2 template with modern stack:

Backend (FastAPI):
- Modular router/service architecture
- Async PostgreSQL (asyncpg) for news from n8n pipeline
- Live Unraid server stats (2 servers via API)
- Home Assistant, Vikunja tasks, weather (wttr.in)
- WebSocket broadcast for real-time updates (15s)
- TTL cache per endpoint, all config via ENV vars

Frontend (React + Vite + TypeScript):
- Glassmorphism dark theme with Tailwind CSS
- Responsive grid: mobile/tablet/desktop/ultrawide
- Weather cards, hourly forecast, news with category tabs
- Server stats (CPU ring, RAM bar, Docker list)
- Home Assistant controls, task management
- Live clock, WebSocket connection indicator

Infrastructure:
- Multi-stage Dockerfile (node:22-alpine + python:3.11-slim)
- docker-compose with full ENV configuration
- Kaniko CI/CD pipeline for GitLab registry

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

web/src/components/WeatherCard.tsx

@@ -0,0 +1,115 @@
+import { Thermometer, Droplets, Wind, CloudOff } from "lucide-react";
+import type { WeatherData } from "../api";
+
+interface WeatherCardProps {
+  data: WeatherData;
+  accent: "cyan" | "amber";
+}
+
+const accentMap = {
+  cyan: {
+    gradient: "from-cyan-500/10 to-cyan-900/5",
+    text: "text-cyan-400",
+    border: "border-cyan-500/20",
+    badge: "bg-cyan-500/15 text-cyan-300",
+    statIcon: "text-cyan-400/70",
+    ring: "ring-cyan-500/10",
+  },
+  amber: {
+    gradient: "from-amber-500/10 to-amber-900/5",
+    text: "text-amber-400",
+    border: "border-amber-500/20",
+    badge: "bg-amber-500/15 text-amber-300",
+    statIcon: "text-amber-400/70",
+    ring: "ring-amber-500/10",
+  },
+} as const;
+
+export default function WeatherCard({ data, accent }: WeatherCardProps) {
+  const a = accentMap[accent];
+
+  if (data.error) {
+    return (
+      <div className="glass-card p-5 animate-fade-in">
+        <div className="flex items-center gap-3 text-red-400">
+          <CloudOff className="w-5 h-5" />
+          <div>
+            <p className="text-sm font-medium">Wetter nicht verfuegbar</p>
+            <p className="text-xs text-slate-500 mt-0.5">{data.location || "Unbekannt"}</p>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className={`glass-card p-5 animate-fade-in bg-gradient-to-br ${a.gradient}`}>
+      {/* Header: location badge */}
+      <div className="flex items-center justify-between mb-4">
+        <span className={`badge ${a.badge}`}>{data.location}</span>
+      </div>
+
+      {/* Main row: icon + temp */}
+      <div className="flex items-center justify-between mb-4">
+        <div>
+          <div className="flex items-baseline gap-1">
+            <span
+              className="text-5xl font-extrabold text-white tracking-tighter"
+              style={{ fontFamily: "'JetBrains Mono', monospace" }}
+            >
+              {Math.round(data.temp)}
+            </span>
+            <span className="text-2xl font-light text-slate-400">&deg;</span>
+          </div>
+          <p className="text-sm text-slate-400 mt-1 capitalize">{data.description}</p>
+        </div>
+
+        <span className="text-5xl select-none" role="img" aria-label="weather">
+          {data.icon}
+        </span>
+      </div>
+
+      {/* Stat grid */}
+      <div className="grid grid-cols-3 gap-3">
+        <StatItem
+          icon={<Thermometer className={`w-3.5 h-3.5 ${a.statIcon}`} />}
+          label="Gefuehlt"
+          value={`${Math.round(data.feels_like)}\u00B0`}
+        />
+        <StatItem
+          icon={<Droplets className={`w-3.5 h-3.5 ${a.statIcon}`} />}
+          label="Feuchte"
+          value={`${data.humidity}%`}
+        />
+        <StatItem
+          icon={<Wind className={`w-3.5 h-3.5 ${a.statIcon}`} />}
+          label="Wind"
+          value={`${Math.round(data.wind_kmh)} km/h`}
+        />
+      </div>
+    </div>
+  );
+}
+
+function StatItem({
+  icon,
+  label,
+  value,
+}: {
+  icon: React.ReactNode;
+  label: string;
+  value: string;
+}) {
+  return (
+    <div className="flex flex-col items-center gap-1.5 rounded-xl bg-white/[0.03] border border-white/[0.04] px-2 py-2.5">
+      {icon}
+      <span
+        className="text-sm font-semibold text-white"
+        style={{ fontFamily: "'JetBrains Mono', monospace" }}
+      >
+        {value}
+      </span>
+      <span className="text-[10px] uppercase tracking-wider text-slate-500">{label}</span>
+    </div>
+  );
+}