0.1.5-dev

frontend/src/App.jsx

@@ -10,6 +10,7 @@ import SchuldTab from "./pages/SchuldTab.jsx";
 import VoortgangTab from "./pages/VoortgangTab.jsx";
 import { RED, PURPLE, PURPLE_LIGHT } from "./constants/index.js";
 import ProfielPopup from "./components/ProfielPopup.jsx";
+import InstellingenModal from "./components/InstellingenModal.jsx";
 
 function initials(naam = "") {
   const parts = naam.trim().split(/\s+/);
@@ -20,11 +21,11 @@ function initials(naam = "") {
 const PAGES = [DashboardTab, EigenVermogenTab, SchuldTab, VoortgangTab];
 
 function AppInner() {
-  const { loggedIn, login, logout, locked, tab, showUsers, setShowUsers, loading, T, darkMode, setDarkMode, currentUser, avatar } = useApp();
+  const { loggedIn, login, logout, locked, tab, showUsers, setShowUsers, showInstellingen, setShowInstellingen, loading, T, currentUser, avatar, idleMinutes } = useApp();
   const [profielOpen, setProfielOpen] = useState(false);
 
   const idleTimer = useRef(null);
-  const IDLE_MS = 30 * 60 * 1000;
+  const IDLE_MS = (idleMinutes ?? 30) * 60 * 1000;
   const [sessionVerlopen, setSessionVerlopen] = useState(false);
 
   useEffect(() => {
@@ -131,21 +132,9 @@ function AppInner() {
                   : initials(currentUser?.naam || "")
                 }
               </div>
-              <svg width="10" height="10" viewBox="0 0 10 10" fill="none"
-                style={{ color: T.muted, transition: "transform 0.2s", transform: profielOpen ? "rotate(180deg)" : "none", flexShrink: 0 }}>
-                <polyline points="1,3 5,7 9,3" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
-              </svg>
             </button>
             {profielOpen && <ProfielPopup onClose={() => setProfielOpen(false)} />}
           </div>
-          <button onClick={() => setDarkMode((d) => !d)} style={{
-            width: 44, height: 44, borderRadius: 10,
-            background: T.card, border: `1px solid ${T.border}`,
-            display: "flex", alignItems: "center", justifyContent: "center",
-            cursor: "pointer", fontSize: 20,
-          }} title="Dark modus">
-            {darkMode ? "🌙" : "☀️"}
-          </button>
         </div>
 
         {/* Vergrendeld banner */}
@@ -166,8 +155,9 @@ function AppInner() {
           </div>
         )}
 
-        {/* Gebruikersbeheer modal */}
-        {showUsers && <GebruikersBeheer onClose={() => setShowUsers(false)} />}
+        {/* Modals */}
+        {showUsers       && <GebruikersBeheer   onClose={() => setShowUsers(false)} />}
+        {showInstellingen && <InstellingenModal  onClose={() => setShowInstellingen(false)} />}
 
         {/* Actieve pagina */}
         <div style={{ maxWidth: 1200, margin: "0 auto", padding: "24px 16px" }}>