mirror of
https://github.com/mauriceboe/TREK.git
synced 2026-10-19 05:26:47 +00:00
Maurice
ab3a69e18c
useAdminNotificationMatrix now loads the matrix, picks the visible built in channels and saves each toggle with a per cell revert. The desktop panel and the phone card keep their own markup.
71 lines
2.9 KiB
TypeScript
71 lines
2.9 KiB
TypeScript
import { useAdminNotificationMatrix } from '../../../components/Admin/useAdminNotificationMatrix'
|
||
import type { TranslationFn } from '../../../types'
|
||
import type { useToast } from '../../../components/shared/Toast'
|
||
import { ADMIN_EVENT_LABEL_KEYS, ADMIN_CHANNEL_LABEL_KEYS } from '../../../pages/admin/AdminPage.constants'
|
||
import MToggle from '../../components/MToggle'
|
||
import { MAdminCard, MAdminCardHead } from './MAdminUi'
|
||
|
||
// Per-event × per-channel admin notification matrix — the mobile layout of
|
||
// AdminNotificationsPanel. Loads its own data and auto-saves each toggle.
|
||
export default function MAdminNotifyMatrix({ t, toast }: { t: TranslationFn; toast: ReturnType<typeof useToast> }) {
|
||
const { matrix, visibleChannels, toggle } = useAdminNotificationMatrix(t, toast)
|
||
|
||
if (!matrix) {
|
||
return (
|
||
<MAdminCard>
|
||
<p className="font-geist text-[0.6875rem] text-m-faint">{t('common.loading')}</p>
|
||
</MAdminCard>
|
||
)
|
||
}
|
||
|
||
if (matrix.event_types.length === 0) {
|
||
return (
|
||
<MAdminCard>
|
||
<p className="font-geist text-[0.6875rem] text-m-faint">{t('settings.notificationPreferences.noChannels')}</p>
|
||
</MAdminCard>
|
||
)
|
||
}
|
||
|
||
return (
|
||
<MAdminCard>
|
||
<MAdminCardHead title={t('admin.tabs.notifications')} hint={t('admin.notifications.adminNotificationsHint')} />
|
||
<div className="flex items-center gap-1 border-b border-[color:var(--m-rowbr)] pb-2">
|
||
<span className="min-w-0 flex-1" />
|
||
{visibleChannels.map((ch) => (
|
||
<span
|
||
key={ch}
|
||
className="w-[44px] flex-none text-center font-geist text-[0.5625rem] font-bold uppercase tracking-[0.04em] text-m-faint"
|
||
>
|
||
{t(ADMIN_CHANNEL_LABEL_KEYS[ch])}
|
||
</span>
|
||
))}
|
||
</div>
|
||
{matrix.event_types.map((eventType) => {
|
||
const implemented = matrix.implemented_combos[eventType] ?? []
|
||
// Known admin events use translated labels; anything else keeps its raw id.
|
||
const labelKey = ADMIN_EVENT_LABEL_KEYS[eventType]
|
||
return (
|
||
<div key={eventType} className="flex items-center gap-1 border-b border-[color:var(--m-rowbr)] py-2">
|
||
<span className="min-w-0 flex-1 truncate text-[0.8125rem] text-m-ink">
|
||
{labelKey ? t(labelKey) : eventType}
|
||
</span>
|
||
{visibleChannels.map((ch) => (
|
||
<span key={ch} className="flex w-[44px] flex-none justify-center">
|
||
{implemented.includes(ch) ? (
|
||
<MToggle
|
||
checked={matrix.preferences[eventType]?.[ch] ?? true}
|
||
ariaLabel={`${eventType} ${ch}`}
|
||
onChange={() => toggle(eventType, ch)}
|
||
/>
|
||
) : (
|
||
<span className="font-geist text-[0.75rem] text-m-faint">—</span>
|
||
)}
|
||
</span>
|
||
))}
|
||
</div>
|
||
)
|
||
})}
|
||
</MAdminCard>
|
||
)
|
||
}
|