fix(dashboard): E-Mail Tab lädt sofort mit well-known Inbox-ID als Fallback

Vorher: activeFolderId war null bis Ordnerliste geladen → E-Mail-Query nie gestartet
Jetzt: Default-Ordner-ID = 'inbox' (Graph API Well-Known-Name) → sofortiger Abruf
Zusätzlich: Fehler-/Leer-Zustand in der Ordner-Sidebar anzeigen

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Thomas Reitz 2026-03-13 10:32:04 +01:00
parent 0ed48557c4
commit b6b182a349

View file

@ -228,16 +228,16 @@ export function DashboardEmailTab() {
const [activityTarget, setActivityTarget] = useState<ActivityTarget | null>(null); const [activityTarget, setActivityTarget] = useState<ActivityTarget | null>(null);
const [lastSaved, setLastSaved] = useState<string | null>(null); const [lastSaved, setLastSaved] = useState<string | null>(null);
const { data: foldersData, isLoading: foldersLoading } = useOffice365MailFolders(); const { data: foldersData, isLoading: foldersLoading, isError: foldersError } =
useOffice365MailFolders();
const folders = foldersData?.data ?? []; const folders = foldersData?.data ?? [];
const sortedFolders = sortFolders(folders); const sortedFolders = sortFolders(folders);
// Standardmäßig Posteingang // Standardmäßig Posteingang — Graph API akzeptiert Well-Known-Namen direkt als ID,
const inboxFolder = // sodass E-Mails sofort geladen werden, bevor die Ordnerliste verfügbar ist.
sortedFolders.find((f) => f.wellKnownName === 'inbox') ?? // Sobald Ordner geladen sind, wird die echte ID aus der Liste verwendet.
sortedFolders[0] ?? const inboxFolder = sortedFolders.find((f) => f.wellKnownName === 'inbox');
null; const activeFolderId = selectedFolderId ?? inboxFolder?.id ?? 'inbox';
const activeFolderId = selectedFolderId ?? inboxFolder?.id ?? null;
const { data: emailsData, isLoading: emailsLoading, error: emailsError } = const { data: emailsData, isLoading: emailsLoading, error: emailsError } =
useOffice365MailsInFolder(activeFolderId, days); useOffice365MailsInFolder(activeFolderId, days);
@ -291,16 +291,30 @@ export function DashboardEmailTab() {
<div className={styles.layout}> <div className={styles.layout}>
{/* Ordner-Baum */} {/* Ordner-Baum */}
<aside className={styles.folderTree}> <aside className={styles.folderTree}>
{foldersLoading ? ( {foldersLoading && (
<p className={styles.status}>Ordner laden</p> <p className={styles.status}>Ordner laden</p>
) : ( )}
{foldersError && !foldersLoading && (
<p className={styles.errorText} style={{ padding: '0.5rem 0.875rem', fontSize: '0.8125rem' }}>
Ordner konnten nicht geladen werden.
</p>
)}
{!foldersLoading && !foldersError && sortedFolders.length === 0 && (
<p className={styles.status} style={{ padding: '0.5rem 0.875rem', fontSize: '0.8125rem' }}>
Keine Ordner gefunden.
</p>
)}
{!foldersLoading && sortedFolders.length > 0 && (
<ul className={styles.folderList}> <ul className={styles.folderList}>
{sortedFolders.map((folder) => ( {sortedFolders.map((folder) => (
<li key={folder.id}> <li key={folder.id}>
<button <button
type="button" type="button"
className={`${styles.folderItem} ${ className={`${styles.folderItem} ${
activeFolderId === folder.id ? styles.folderItemActive : '' activeFolderId === folder.id ||
(activeFolderId === 'inbox' && folder.wellKnownName === 'inbox')
? styles.folderItemActive
: ''
}`} }`}
onClick={() => { onClick={() => {
setSelectedFolderId(folder.id); setSelectedFolderId(folder.id);