Moku/Work
1
0
Fork 0
Code Issues Pull Requests Activity

Feat: Prepare frontend future model

Browse Source
This commit is contained in:
MangoPig
2026-06-18 16:58:31 +01:00
parent fcf96590bb
commit 25c6934801
13 changed files with 342 additions and 146 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
Frontend/src/components/shell/TopBar/NotificationsMenu.tsx
View File

@@ -27,9 +27,11 @@ export const NotificationsMenu = (props: NotificationsMenuProps): JSX.Element =>
role="menu"
aria-label="Notifications"
ref={props.menuRef}
data-ui="notifications-menu"
data-variant={variant}
>
<div class={styles.header}>
<div class={styles.headerCopy}>
<div class={styles.header} data-slot="notifications-header">
<div class={styles.headerCopy} data-slot="notifications-header-copy">
<strong class={styles.title}>Notifications</strong>
<span class={styles.subtitle}>
{unreadNotificationCount > 0
@@ -45,7 +47,7 @@ export const NotificationsMenu = (props: NotificationsMenuProps): JSX.Element =>
</Show>
</div>
<div class={styles.listWrap}>
<div class={styles.listWrap} data-slot="notifications-body">
<Show when={!hasNotifications}>
<div class={styles.stateCard}>
<span class={styles.stateIcon} aria-hidden="true">
@@ -67,12 +69,12 @@ export const NotificationsMenu = (props: NotificationsMenuProps): JSX.Element =>
</Show>
<Show when={unreadItems.length > 0}>
<section class={styles.section} aria-label="Unread notifications">
<section class={styles.section} aria-label="Unread notifications" data-slot="notifications-section" data-section-id="unread">
<span class={styles.sectionLabel}>Unread</span>
<div class={styles.list}>
<div class={styles.list} data-slot="notifications-list" data-section-id="unread">
<For each={unreadItems}>
{(item): JSX.Element => (
<button type="button" role="menuitem" classList={{ [styles.item]: true, [styles.itemUnread]: true }} onClick={props.onSelect}>
<button type="button" role="menuitem" classList={{ [styles.item]: true, [styles.itemUnread]: true }} data-slot="notification-item" data-state="unread" onClick={props.onSelect}>
<span class={styles.itemMarker} aria-hidden="true" />
<div class={styles.itemBody}>
<span class={styles.itemTitle}>{item.title}</span>
@@ -87,12 +89,12 @@ export const NotificationsMenu = (props: NotificationsMenuProps): JSX.Element =>
</Show>
<Show when={earlierItems.length > 0}>
<section class={styles.section} aria-label="Earlier notifications">
<section class={styles.section} aria-label="Earlier notifications" data-slot="notifications-section" data-section-id="earlier">
<span class={styles.sectionLabel}>Earlier</span>
<div class={styles.list}>
<div class={styles.list} data-slot="notifications-list" data-section-id="earlier">
<For each={earlierItems}>
{(item): JSX.Element => (
<button type="button" role="menuitem" class={styles.item} onClick={props.onSelect}>
<button type="button" role="menuitem" class={styles.item} data-slot="notification-item" data-state="read" onClick={props.onSelect}>
<span class={styles.itemMarkerMuted} aria-hidden="true" />
<div class={styles.itemBody}>
<span class={styles.itemTitle}>{item.title}</span>
@@ -107,7 +109,7 @@ export const NotificationsMenu = (props: NotificationsMenuProps): JSX.Element =>
</Show>
</div>
<div class={styles.footer}>
<div class={styles.footer} data-slot="notifications-footer">
<button type="button" role="menuitem" class={styles.footerAction} onClick={props.onSelect}>
<Settings size={16} strokeWidth={2} />
<span>Notification settings</span>