fix: Synchronize profile modal state reactively via useEffect and add scroll container

This commit is contained in:
Richard
2026-08-01 12:45:03 +02:00
parent 565b14533c
commit 5db19502b1
2 changed files with 15 additions and 4 deletions
+2 -2
View File
@@ -11,8 +11,8 @@
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=JetBrains+Mono:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet">
<title>Schichtplaner — Veranstaltungsschichtpläne</title>
<script type="module" crossorigin src="/assets/index-BZVfc_jb.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-DQgIbK11.css">
<script type="module" crossorigin src="/assets/index-xAdtp-F5.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-DVt5wlUY.css">
</head>
<body class="bg-paper text-main font-sans antialiased min-h-screen">
<div id="root"></div>
+13 -2
View File
@@ -1,4 +1,4 @@
import React, { useState } from 'react';
import React, { useState, useEffect } from 'react';
import { X, User, Award, Check, AlertCircle, CheckCircle2 } from 'lucide-react';
import { apiFetch } from '../api/client';
import { getRandomSkillColor } from '../utils/colors';
@@ -14,6 +14,17 @@ export default function ProfileModal({ user, skills = [], onClose, onUserUpdated
safeUserSkills.map(s => (typeof s === 'object' ? s.id : s))
);
useEffect(() => {
if (user) {
setDisplayName(user.display_name || user.username || '');
const uSkills = user.skills ? (Array.isArray(user.skills) ? user.skills : []) : [];
setSelectedSkillIds(uSkills.map(s => (typeof s === 'object' ? s.id : s)));
} else {
setDisplayName(localStorage.getItem('guest_display_name') || '');
setSelectedSkillIds([]);
}
}, [user]);
// New skill fields
const [newSkillName, setNewSkillName] = useState('');
const [newSkillDesc, setNewSkillDesc] = useState('');
@@ -93,7 +104,7 @@ export default function ProfileModal({ user, skills = [], onClose, onUserUpdated
return (
<div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/70 backdrop-blur-sm overflow-y-auto animate-in fade-in duration-200">
<div className="bg-surface w-full max-w-lg rounded-sm border border-grid p-6 shadow-2xl relative my-8 text-main font-sans">
<div className="bg-surface w-full max-w-lg rounded-sm border border-grid p-6 shadow-2xl relative my-8 text-main font-sans max-h-[90vh] overflow-y-auto">
{/* Close Button */}
<button
onClick={onClose}