Donut-hover met percentages en werkende update-notificatie

- Donut: naadloze segmenten (donkere spleten weg), hover-tooltip per
  categorie met naam, bedrag en aandeel, middenwaarde schaalt mee
- Update-check via de eigen backend (/api/update-check) i.p.v. direct
  naar de Gitea API, die geen CORS-headers stuurt
- Semver-vergelijking, herhaalde check en release-notes in de melding
- release.ps1 maakt de Gitea-release aan (stap 4)

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

frontend/src/App.jsx

@@ -10,7 +10,8 @@ import SchuldTab from "./pages/SchuldTab.jsx";
 import VoortgangTab from "./pages/VoortgangTab.jsx";
 import { RED, PURPLE_LIGHT } from "./constants/index.js";
 import { fmt } from "./utils/format.js";
-import { version, updateCheckUrl } from "../package.json";
+import { version } from "../package.json";
+import { useUpdateCheck } from "./hooks/useUpdateCheck.js";
 import ProfielPopup from "./components/ProfielPopup.jsx";
 import InstellingenModal from "./components/InstellingenModal.jsx";
 
@@ -26,21 +27,10 @@ function AppInner() {
   const { loggedIn, login, logout, locked, tab, showUsers, setShowUsers, showInstellingen, setShowInstellingen, loading, T, currentUser, avatar, idleMinutes, totEV } = useApp();
   const [profielOpen,  setProfielOpen]  = useState(false);
   const [searchOpen,   setSearchOpen]   = useState(false);
-  const [nieuweVersie, setNieuweVersie] = useState(null);
+  const nieuweVersie = useUpdateCheck();   // { latest, naam, notes, url } of null
   const [bellOpen,     setBellOpen]     = useState(false);
   const searchRef = useRef(null);
 
-  useEffect(() => {
-    if (!updateCheckUrl) return;
-    fetch(updateCheckUrl)
-      .then(r => r.json())
-      .then(data => {
-        const latest = data?.tag_name?.replace(/^v/, "");
-        if (latest && latest !== version) setNieuweVersie(latest);
-      })
-      .catch(() => {});
-  }, []);
-
   const idleTimer = useRef(null);
   const IDLE_MS = (idleMinutes ?? 30) * 60 * 1000;
   const [sessionVerlopen, setSessionVerlopen] = useState(false);
@@ -190,7 +180,7 @@ function AppInner() {
                 <div style={{
                   position: "absolute", right: 0, top: "calc(100% + 10px)",
                   zIndex: 200, width: 280,
-                  background: T.card, border: `1px solid ${T.border}`,
+                  background: T.popupBg, border: `1px solid ${T.border}`,
                   borderRadius: 14, padding: "16px 18px",
                   boxShadow: T.shadow,
                 }}>
@@ -217,8 +207,24 @@ function AppInner() {
                         Nieuwe versie beschikbaar
                       </div>
                       <div style={{ fontSize: 12, color: T.muted, lineHeight: 1.5 }}>
-                        v{nieuweVersie} is uitgebracht. Je gebruikt momenteel v{version}.
+                        v{nieuweVersie.latest} is uitgebracht. Je gebruikt momenteel v{version}.
                       </div>
+                      {nieuweVersie.notes && (
+                        <div style={{
+                          fontSize: 11, color: T.subtext, marginTop: 6, lineHeight: 1.5,
+                          maxHeight: 130, overflowY: "auto", whiteSpace: "pre-wrap",
+                        }}>
+                          {nieuweVersie.notes}
+                        </div>
+                      )}
+                      {nieuweVersie.url && (
+                        <a href={nieuweVersie.url} target="_blank" rel="noreferrer" style={{
+                          display: "inline-block", marginTop: 8,
+                          fontSize: 11, fontWeight: 700, color: "#f97316", textDecoration: "none",
+                        }}>
+                          Release bekijken →
+                        </a>
+                      )}
                     </div>
                   </div>
                 </div>