refactor(webui): adopt semantic workspace actions
This commit is contained in:
@@ -1,9 +1,8 @@
|
||||
import { useEffect, useMemo, useState } from "react";
|
||||
import { Bell, Check, ExternalLink, RefreshCw, Send, XCircle } from "lucide-react";
|
||||
import { Bell, Check, ExternalLink, Send, XCircle } from "lucide-react";
|
||||
import {
|
||||
ActionBlockerHint,
|
||||
ActionToolbar,
|
||||
AdminIconButton,
|
||||
Button,
|
||||
ConfirmDialog,
|
||||
CountBadge,
|
||||
@@ -14,6 +13,7 @@ import {
|
||||
SelectionListItem,
|
||||
StatePanel,
|
||||
StatusBadge,
|
||||
WorkspaceActionBar,
|
||||
WorkspaceFrame,
|
||||
WorkspaceLayout,
|
||||
hasScope,
|
||||
@@ -192,20 +192,18 @@ export default function NotificationCenterPage({ settings, auth }: { settings: A
|
||||
helpContextId="notifications.page.center"
|
||||
helpModuleId="notifications"
|
||||
primary={<>
|
||||
<ActionToolbar surface="panel-header" className="notifications-sidebar-bar">
|
||||
<div className="notifications-title">
|
||||
<WorkspaceActionBar
|
||||
scope="collection-pane"
|
||||
variant="collection"
|
||||
refreshable
|
||||
reloadAction={{ onReload: () => void load(), loading: loading || busy, label: "i18n:govoplan-notifications.refresh" }}
|
||||
className="notifications-sidebar-bar"
|
||||
contextActions={<div className="notifications-title">
|
||||
<Bell size={17} />
|
||||
<strong>i18n:govoplan-notifications.notifications</strong>
|
||||
{unreadCount > 0 ? <CountBadge>{unreadCount}</CountBadge> : null}
|
||||
</div>
|
||||
<AdminIconButton
|
||||
label="i18n:govoplan-notifications.refresh"
|
||||
icon={<RefreshCw size={16} aria-hidden="true" />}
|
||||
onClick={() => void load()}
|
||||
disabled={loading || busy}
|
||||
disabledReason={loading ? NOTIFICATIONS_I18N.loading : busy ? NOTIFICATIONS_I18N.actionActive : undefined}
|
||||
/>
|
||||
</ActionToolbar>
|
||||
</div>}
|
||||
/>
|
||||
<SegmentedControl
|
||||
className="notifications-status-filter"
|
||||
options={statusFilters.map((status) => ({ id: status, label: statusLabel(status) }))}
|
||||
@@ -241,27 +239,30 @@ export default function NotificationCenterPage({ settings, auth }: { settings: A
|
||||
</div>
|
||||
</>}
|
||||
>
|
||||
<ActionToolbar surface="panel-header" className="notifications-topbar">
|
||||
<div className="notifications-title-line">
|
||||
<WorkspaceActionBar
|
||||
scope="detail-pane"
|
||||
variant="detail"
|
||||
className="notifications-topbar"
|
||||
contextActions={<div className="notifications-title-line">
|
||||
<Bell size={18} />
|
||||
<strong>{selected?.subject || selected?.event_kind || "i18n:govoplan-notifications.surface.center"}</strong>
|
||||
</div>
|
||||
<div className="notifications-actions">
|
||||
<DocumentationHelpLink reference={NOTIFICATIONS_DOCUMENTATION} />
|
||||
</div>}
|
||||
helpAction={<DocumentationHelpLink reference={NOTIFICATIONS_DOCUMENTATION} />}
|
||||
primaryActions={<div className="notifications-actions">
|
||||
<Button onClick={() => void markSelected("read")} disabled={Boolean(markReadDisabledReason)} disabledReason={markReadDisabledReason}>
|
||||
<Check size={16} /> i18n:govoplan-notifications.mark_read
|
||||
</Button>
|
||||
<Button onClick={() => void markSelected("acknowledged")} disabled={Boolean(acknowledgeDisabledReason)} disabledReason={acknowledgeDisabledReason}>
|
||||
<Check size={16} /> i18n:govoplan-notifications.acknowledge
|
||||
</Button>
|
||||
<Button variant="danger" onClick={() => setConfirmingAction("cancel")} disabled={Boolean(cancelDisabledReason)} disabledReason={cancelDisabledReason}>
|
||||
<XCircle size={16} /> i18n:govoplan-notifications.cancel_delivery
|
||||
</Button>
|
||||
<Button onClick={() => setConfirmingAction("dispatch")} disabled={Boolean(dispatchDisabledReason)} disabledReason={dispatchDisabledReason}>
|
||||
<Send size={16} /> i18n:govoplan-notifications.dispatch_pending
|
||||
</Button>
|
||||
</div>
|
||||
</ActionToolbar>
|
||||
</div>}
|
||||
destructiveActions={<Button variant="danger" onClick={() => setConfirmingAction("cancel")} disabled={Boolean(cancelDisabledReason)} disabledReason={cancelDisabledReason}>
|
||||
<XCircle size={16} /> i18n:govoplan-notifications.cancel_delivery
|
||||
</Button>}
|
||||
/>
|
||||
|
||||
{error ? <DismissibleAlert tone="danger" compact resetKey={error}>{error}</DismissibleAlert> : null}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user