diff --git a/apps/dashboard/src/InboxPanel.tsx b/apps/dashboard/src/InboxPanel.tsx index a075b55..ed4b76d 100644 --- a/apps/dashboard/src/InboxPanel.tsx +++ b/apps/dashboard/src/InboxPanel.tsx @@ -77,6 +77,123 @@ function inboxTargetHref(item: InboxItem): string | null { return null; } +interface InboxCardProps { + inboxActionKey: InboxActionKey | null; + item: InboxItem; + locale: Locale; + onInboxAction: (item: InboxItem, action: DashboardInboxAction) => void; + onTaskAction: (task: DashboardTask, action: DashboardTaskAction) => void; + taskActionKey: string | null; + tasks: DashboardTask[]; + t: Messages; +} + +function InboxCard({ + inboxActionKey, + item, + locale, + onInboxAction, + onTaskAction, + taskActionKey, + tasks, + t, +}: InboxCardProps) { + const href = inboxTargetHref(item); + const linkedTask = + item.source === 'scheduled-task' && item.taskId + ? tasks.find((task) => task.id === item.taskId) + : undefined; + const linkedTaskActions = linkedTask ? taskActionsFor(linkedTask) : []; + const inboxActions = inboxActionsFor(item); + + return ( +
+
+
+ {t.inbox.kinds[item.kind]} + {sanitizeInboxText(item.title) || item.title} +
+
+ + {t.inbox.severity[item.severity]} + + {item.occurrences > 1 ? ( + x{item.occurrences} + ) : null} +
+
+

{sanitizeInboxText(item.summary) || t.inbox.noSummary}

+
+ + {t.inbox.occurred} + {formatDate(item.occurredAt, locale)} + + + {t.inbox.source} + {item.source} + + + {t.inbox.target} + + {item.taskId ?? + item.roomName ?? + item.groupFolder ?? + item.roomJid ?? + '-'} + + +
+ {href ? ( + + {item.taskId ? t.inbox.openTask : t.inbox.openRoom} + + ) : null} + {linkedTask && linkedTaskActions.length > 0 ? ( +
+ {linkedTaskActions.map((action) => { + const actionKey = `${linkedTask.id}:${action}`; + const busy = taskActionKey === actionKey; + return ( + + ); + })} +
+ ) : null} + {inboxActions.length > 0 ? ( +
+ {inboxActions.map((action) => { + const actionKey: InboxActionKey = `${item.id}:${action}`; + const busy = inboxActionKey === actionKey; + return ( + + ); + })} +
+ ) : null} +
+ ); +} + export function InboxPanel({ overview, tasks, @@ -157,106 +274,19 @@ export function InboxPanel({
- {filteredItems.map((item) => { - const href = inboxTargetHref(item); - const linkedTask = - item.source === 'scheduled-task' && item.taskId - ? tasks.find((task) => task.id === item.taskId) - : undefined; - const linkedTaskActions = linkedTask - ? taskActionsFor(linkedTask) - : []; - const inboxActions = inboxActionsFor(item); - return ( -
-
-
- {t.inbox.kinds[item.kind]} - {sanitizeInboxText(item.title) || item.title} -
-
- - {t.inbox.severity[item.severity]} - - {item.occurrences > 1 ? ( - x{item.occurrences} - ) : null} -
-
-

{sanitizeInboxText(item.summary) || t.inbox.noSummary}

-
- - {t.inbox.occurred} - {formatDate(item.occurredAt, locale)} - - - {t.inbox.source} - {item.source} - - - {t.inbox.target} - - {item.taskId ?? - item.roomName ?? - item.groupFolder ?? - item.roomJid ?? - '-'} - - -
- {href ? ( - - {item.taskId ? t.inbox.openTask : t.inbox.openRoom} - - ) : null} - {linkedTask && linkedTaskActions.length > 0 ? ( -
- {linkedTaskActions.map((action) => { - const actionKey = `${linkedTask.id}:${action}`; - const busy = taskActionKey === actionKey; - return ( - - ); - })} -
- ) : null} - {inboxActions.length > 0 ? ( -
- {inboxActions.map((action) => { - const actionKey: InboxActionKey = `${item.id}:${action}`; - const busy = inboxActionKey === actionKey; - return ( - - ); - })} -
- ) : null} -
- ); - })} + {filteredItems.map((item) => ( + + ))}
);