@morphemecms/cms 0.0.0-stage → 0.1.0

package/src/NavigationParts.tsx

@@ -0,0 +1,350 @@
+// "Dele" › "UI-komponenter" (BlockParts.tsx), the group "Navigation": the theme's parts of the header (packages/editor/theme/ui/,
+// through @site/editor) as the site draws them, with made-up pages: the top app bar as the site's header has it (at the
+// top and once the page scrolls under it) and in its kinds (search, small, medium and large flexible, at the start and
+// in the middle, with a subtitle, a long headline and collapsed), a menu (the header's pages, and actions in both
+// colours with their icons, shortcuts, texts, ticks, a choice, a disabled one, dividers, groups with a gap and with a
+// line, and a submenu drawn open), a dropdown menu closed and drawn open, the exposed dropdown menu in both kinds in
+// every state, the navigation drawer with an item's sub-pages unfolded, the tabs (only the text, as the bar of
+// "Mobilmenu", and primary and secondary, fixed and scrollable, with icons over and beside their labels, badges, and a
+// tab list with a tab that cannot be chosen), and the FABs and extended FABs in their colours and sizes, an extended
+// FAB also collapsed. Only drawn: the links lead nowhere, and nothing opens.
+import { Fragment } from 'react';
+import {
+  SiteButton,
+  SiteExtendedFab,
+  SiteFab,
+  SiteDropdownMenu,
+  SiteExposedDropdownMenu,
+  SiteIconButton,
+  SiteMenu,
+  SiteMenuDivider,
+  SiteMenuGroup,
+  SiteMenuItem,
+  SiteNavigationDrawer,
+  SiteNavigationDrawerItem,
+  SiteNavigationDrawerRow,
+  SiteNavigationDrawerSubitem,
+  SiteNavigationDrawerToggle,
+  SiteSearch,
+  SiteTab,
+  SiteTabs,
+  SiteTopAppBar,
+  extendedFabSizes,
+  fabKinds,
+  fabSizes,
+} from './themeUi';
+import { Part } from './PartsShown';
+import { Preview } from './ui';
+import { t } from './i18n';
+
+const say = t.parts.screens.navigation;
+const [home, open, parent, contact] = say.pages;
+const [sub, openSub] = say.subpages;
+const row = 'flex flex-wrap items-center gap-4';
+const kinds = ['primary', 'secondary'] as const;
+const bar = say.appBar;
+const flexible = ['medium-flexible', 'large-flexible'] as const;
+// Icons the site draws (icon.tsx).
+const viewIcons = ['house', 'ticket', 'chats', 'phone', 'map-pin', 'video-camera'];
+
+const back = <SiteIconButton icon="arrow-left" label={bar.back} />;
+const actions = (
+  <>
+    <SiteIconButton icon="heart" label={bar.favourite} />
+    <SiteIconButton icon="user" label={bar.profile} />
+  </>
+);
+const search = (trailing?: boolean) => (
+  <SiteSearch
+    label={bar.search}
+    backLabel={bar.back}
+    clearLabel={bar.clear}
+    emptyText={bar.empty}
+    results={[]}
+    trailing={trailing ? <SiteIconButton icon="user" label={bar.profile} /> : undefined}
+  />
+);
+
+const menus = say.menus;
+const colors = ['standard', 'vibrant'] as const;
+const actionIcons = ['pencil-simple', 'copy', 'download-simple', 'arrow-right', 'trash'];
+
+/** A menu's actions: an icon and a shortcut, a text under one, a disabled one, a divider, ticks and a choice. */
+function menuActions() {
+  const [edit, copy, download, move, remove] = menus.actions;
+  return (
+    <>
+      <SiteMenuItem icon={actionIcons[0]} trailingSupporting={menus.shortcuts[0]}>
+        {edit}
+      </SiteMenuItem>
+      <SiteMenuItem icon={actionIcons[1]} trailingSupporting={menus.shortcuts[1]}>
+        {copy}
+      </SiteMenuItem>
+      <SiteMenuItem icon={actionIcons[2]} supporting={menus.download}>
+        {download}
+      </SiteMenuItem>
+      <SiteMenuItem icon={actionIcons[3]} disabled>
+        {move}
+      </SiteMenuItem>
+      <SiteMenuDivider />
+      <SiteMenuItem checked>{menus.checks[0]}</SiteMenuItem>
+      <SiteMenuItem checked={false}>{menus.checks[1]}</SiteMenuItem>
+      <SiteMenuDivider />
+      <SiteMenuItem icon={actionIcons[4]}>{remove}</SiteMenuItem>
+    </>
+  );
+}
+
+/** A menu in groups: what to show (ticks), how to sort (a choice), and an action with a submenu. */
+function groups(open?: boolean) {
+  return (
+    <>
+      <SiteMenuGroup label={menus.view}>
+        <SiteMenuItem checked>{menus.checks[0]}</SiteMenuItem>
+        <SiteMenuItem checked={false}>{menus.checks[1]}</SiteMenuItem>
+      </SiteMenuGroup>
+      <SiteMenuGroup label={menus.sort}>
+        <SiteMenuItem selected>{menus.sorts[0]}</SiteMenuItem>
+        <SiteMenuItem selected={false}>{menus.sorts[1]}</SiteMenuItem>
+      </SiteMenuGroup>
+      <SiteMenuGroup>
+        <SiteMenuItem
+          icon="envelope-simple"
+          open={open}
+          submenu={menus.shares.map((name, i) => (
+            <SiteMenuItem key={name} icon={['envelope-simple', 'phone', 'copy'][i]}>
+              {name}
+            </SiteMenuItem>
+          ))}
+        >
+          {menus.share}
+        </SiteMenuItem>
+      </SiteMenuGroup>
+    </>
+  );
+}
+
+export default function NavigationParts() {
+  return (
+    <>
+      <Part name="TopAppBar" use={say.topAppBar}>
+        <Preview>
+          <div className="space-y-4">
+            {[false, true].map((stuck) => (
+              <SiteTopAppBar key={String(stuck)} data-stuck={stuck || undefined} className="flex h-16 items-center gap-4 px-4">
+                <span className="mr-auto font-medium">{stuck ? say.stuck : say.name}</span>
+                <SiteIconButton icon="list" label={say.open} />
+              </SiteTopAppBar>
+            ))}
+            <SiteTopAppBar
+              kind="search"
+              leading={<SiteIconButton icon="list" label={say.open} />}
+              search={search(true)}
+              trailing={<SiteIconButton icon="heart" label={bar.favourite} />}
+            />
+            <SiteTopAppBar kind="search" align="center" search={search()} />
+            <SiteTopAppBar kind="small" leading={back} headline={bar.kinds.small} trailing={actions} />
+            <SiteTopAppBar kind="small" leading={back} headline={bar.kinds.small} subtitle={bar.subtitle} trailing={actions} />
+            <SiteTopAppBar
+              kind="small"
+              align="center"
+              leading={back}
+              headline={`${bar.kinds.small}, ${bar.center}`}
+              subtitle={bar.subtitle}
+              trailing={<SiteIconButton icon="user" label={bar.profile} />}
+            />
+            {flexible.map((kind) => (
+              <Fragment key={kind}>
+                <SiteTopAppBar kind={kind} leading={back} headline={bar.kinds[kind]} subtitle={bar.subtitle} trailing={actions} />
+                <SiteTopAppBar
+                  kind={kind}
+                  align="center"
+                  leading={back}
+                  headline={bar.long}
+                  subtitle={bar.subtitle}
+                  trailing={
+                    <SiteButton size="small" icon="calendar-blank">
+                      {say.book}
+                    </SiteButton>
+                  }
+                />
+                <SiteTopAppBar
+                  kind={kind}
+                  collapsed
+                  leading={back}
+                  headline={`${bar.kinds[kind]}, ${bar.collapsed}`}
+                  subtitle={bar.subtitle}
+                  trailing={actions}
+                />
+              </Fragment>
+            ))}
+          </div>
+        </Preview>
+      </Part>
+      <Part name="Menu" use={say.menu}>
+        <Preview>
+          <div className="flex flex-wrap items-start gap-6 p-4">
+            <SiteMenu>
+              <SiteMenuItem href="">{home}</SiteMenuItem>
+              <SiteMenuItem href="" selected>
+                {open}
+              </SiteMenuItem>
+              <SiteMenuItem href="">{contact}</SiteMenuItem>
+            </SiteMenu>
+            {colors.map((color) => (
+              <SiteMenu key={color} color={color} aria-label={menus[color]}>
+                {menuActions()}
+              </SiteMenu>
+            ))}
+            {colors.map((color) => (
+              <SiteMenu key={color} color={color} aria-label={`${menus.gap} · ${menus[color]}`}>
+                {groups()}
+              </SiteMenu>
+            ))}
+            <SiteMenu groups="divider" aria-label={menus.divider}>
+              {groups()}
+            </SiteMenu>
+            <div className="pb-24 sm:pr-72">
+              <SiteMenu aria-label={menus.share}>{groups(true)}</SiteMenu>
+            </div>
+          </div>
+        </Preview>
+      </Part>
+      <Part name="DropdownMenu" use={say.dropdownMenu}>
+        <Preview>
+          <div className="flex flex-wrap items-start gap-6 p-4 pb-[26rem]">
+            <SiteDropdownMenu label={menus.more}>{menuActions()}</SiteDropdownMenu>
+            <SiteDropdownMenu label={menus.more} iconButton icon="list">
+              {groups()}
+            </SiteDropdownMenu>
+            {colors.map((color) => (
+              <SiteDropdownMenu key={color} label={menus.more} kind={color === 'vibrant' ? 'filled' : 'outlined'} color={color} open>
+                {menuActions()}
+              </SiteDropdownMenu>
+            ))}
+          </div>
+        </Preview>
+      </Part>
+      <Part name="ExposedDropdownMenu" use={say.exposedDropdownMenu}>
+        <Preview>
+          <div className="space-y-6 p-4">
+            {(['outlined', 'filled'] as const).map((kind) => {
+              const options = menus.options.map((label, i) => ({ value: String(i), label, disabled: i === 3 }));
+              return (
+                <div key={kind} className="grid gap-6 sm:grid-cols-2" aria-label={menus.kinds[kind]} role="group">
+                  <SiteExposedDropdownMenu kind={kind} label={menus.field} options={options} />
+                  <SiteExposedDropdownMenu kind={kind} label={menus.field} options={options} value="1" />
+                  <SiteExposedDropdownMenu kind={kind} label={menus.field} options={options} value="0" supporting={menus.supporting} />
+                  <SiteExposedDropdownMenu kind={kind} label={menus.field} options={options} error={menus.error} />
+                  <SiteExposedDropdownMenu kind={kind} label={menus.field} options={options} value="2" disabled />
+                </div>
+              );
+            })}
+          </div>
+        </Preview>
+      </Part>
+      <Part name="NavigationDrawer" use={say.navigationDrawer}>
+        <Preview>
+          <SiteNavigationDrawer className="px-3 py-4">
+            <SiteNavigationDrawerRow>
+              <SiteNavigationDrawerItem href="">{home}</SiteNavigationDrawerItem>
+            </SiteNavigationDrawerRow>
+            <SiteNavigationDrawerRow data-active="">
+              <SiteNavigationDrawerItem href="" active>
+                {parent}
+              </SiteNavigationDrawerItem>
+              <SiteNavigationDrawerToggle label={parent} expanded />
+            </SiteNavigationDrawerRow>
+            <SiteNavigationDrawerSubitem href="">{sub}</SiteNavigationDrawerSubitem>
+            <SiteNavigationDrawerSubitem href="" active>
+              {openSub}
+            </SiteNavigationDrawerSubitem>
+            <SiteNavigationDrawerRow>
+              <SiteNavigationDrawerItem href="">{contact}</SiteNavigationDrawerItem>
+              <SiteNavigationDrawerToggle label={contact} expanded={false} />
+            </SiteNavigationDrawerRow>
+          </SiteNavigationDrawer>
+        </Preview>
+      </Part>
+      <Part name="Tabs" use={say.tabs}>
+        <Preview>
+          <div className="space-y-6">
+            <SiteTabs>
+              <SiteTab href="">{home}</SiteTab>
+              <SiteTab href="" selected>
+                {open}
+              </SiteTab>
+              <SiteTab href="">{contact}</SiteTab>
+            </SiteTabs>
+            <SiteTabs kind="primary" scrollable={false}>
+              {say.views.slice(0, 3).map((view, i) => (
+                <SiteTab key={view} href="" icon={viewIcons[i]} selected={i === 0} badge={i === 2 ? 3 : undefined}>
+                  {view}
+                </SiteTab>
+              ))}
+            </SiteTabs>
+            <SiteTabs kind="primary" inline>
+              {say.views.map((view, i) => (
+                <SiteTab key={view} href="" icon={viewIcons[i]} selected={i === 1} badge={i === 2 ? true : undefined}>
+                  {view}
+                </SiteTab>
+              ))}
+            </SiteTabs>
+            <SiteTabs kind="primary">
+              {say.views.map((view, i) => (
+                <SiteTab key={view} href="" selected={i === 2}>
+                  {view}
+                </SiteTab>
+              ))}
+            </SiteTabs>
+            <SiteTabs kind="secondary" scrollable={false}>
+              {say.views.slice(0, 3).map((view, i) => (
+                <SiteTab key={view} href="" selected={i === 0} badge={i === 2 ? 12 : undefined}>
+                  {view}
+                </SiteTab>
+              ))}
+            </SiteTabs>
+            <SiteTabs kind="secondary" label={say.viewList}>
+              {say.views.map((view, i) => (
+                <SiteTab key={view} icon={viewIcons[i]} selected={i === 1} disabled={i === say.views.length - 1}>
+                  {view}
+                </SiteTab>
+              ))}
+            </SiteTabs>
+          </div>
+        </Preview>
+      </Part>
+      <Part name="Fab" use={say.fab}>
+        <Preview>
+          <div className="space-y-6 p-4">
+            <div className={row}>
+              {fabKinds.map((k) => (
+                <SiteFab key={k} kind={k} icon="calendar-blank" label={say.kinds[k]} title={say.kinds[k]} />
+              ))}
+            </div>
+            <div className={row}>
+              {fabSizes.map((size) => (
+                <SiteFab key={size} size={size} icon="calendar-blank" label={say.sizes[size]} title={say.sizes[size]} />
+              ))}
+            </div>
+            <div className={row}>
+              {fabKinds.map((k) => (
+                <SiteExtendedFab key={k} kind={k} icon="calendar-blank" label={say.kinds[k]} />
+              ))}
+            </div>
+            <div className={row}>
+              {extendedFabSizes.map((size) => (
+                <SiteExtendedFab key={size} size={size} icon="calendar-blank" label={say.book} title={say.extendedSizes[size]} />
+              ))}
+            </div>
+            <div className={row}>
+              {extendedFabSizes.map((size) => (
+                <SiteExtendedFab key={size} size={size} icon="calendar-blank" label={say.book} title={say.extendedSizes[size]} collapsed />
+              ))}
+            </div>
+          </div>
+        </Preview>
+      </Part>
+    </>
+  );
+}

package/src/NavigationRestParts.tsx

@@ -0,0 +1,247 @@
+// "Dele" › "UI-komponenter" (BlockParts.tsx), the group "Bjælker og søgning": the rest of the theme's navigation parts
+// (packages/editor/theme/ui/, through @site/editor) as the site draws them, with made-up destinations: the navigation bar
+// with the open one and its badges, with vertical items, horizontal ones and both by its width, the navigation rail
+// collapsed and expanded with its menu button and FAB, in sections with a count at each destination's end (the
+// editor's sidebar), expanded over the content (modal, over its scrim), and one that
+// hides while it is collapsed, collapsed (opened by a button beside it) and expanded, the search bar and the view it
+// opens, and the toolbars, docked and floating in both colours, across and vertical (the docked one with buttons as the
+// site's bar at the bottom of a phone; floating ones also with a FAB, and folded into it). Only drawn: the links lead
+// nowhere, and nothing opens.
+import {
+  SiteFab,
+  SiteIconButton,
+  SiteNavigationBar,
+  SiteNavigationBarItem,
+  SiteNavigationRail,
+  SiteNavigationRailItem,
+  SiteNavigationRailSection,
+  SiteSearch,
+  SiteToolbar,
+  SiteButton,
+} from './themeUi';
+import { Part } from './PartsShown';
+import { Preview } from './ui';
+import { t } from './i18n';
+
+const say = t.parts.screens.navigationRest;
+const icons = ['house', 'magnifying-glass', 'chats', 'user'];
+const actions = ['pencil-simple', 'heart', 'copy', 'trash'];
+const colors = ['standard', 'vibrant'] as const;
+
+function Destinations({ rail }: { rail?: boolean }) {
+  const Item = rail ? SiteNavigationRailItem : SiteNavigationBarItem;
+  return (
+    <>
+      {say.destinations.map((label, i) => (
+        <Item key={label} href="" icon={icons[i]} label={label} selected={i === 0} badge={i === 2 ? 3 : i === 3 ? true : undefined} />
+      ))}
+    </>
+  );
+}
+
+export default function NavigationRestParts() {
+  return (
+    <>
+      <Part name="NavigationBar" use={say.navigationBar}>
+        <Preview>
+          <div className="space-y-4">
+            <div className="mx-auto max-w-sm">
+              <SiteNavigationBar label={say.name}>
+                <Destinations />
+              </SiteNavigationBar>
+            </div>
+            <SiteNavigationBar label={say.name} iconPosition="start">
+              <Destinations />
+            </SiteNavigationBar>
+            <SiteNavigationBar label={say.name} iconPosition="auto">
+              <Destinations />
+            </SiteNavigationBar>
+          </div>
+        </Preview>
+      </Part>
+      <Part name="NavigationRail" use={say.navigationRail}>
+        <Preview>
+          <div className="space-y-4">
+            <div className="flex flex-wrap items-start gap-4">
+              {[false, true].map((expanded) => (
+                <SiteNavigationRail
+                  key={String(expanded)}
+                  label={say.name}
+                  menuLabel={say.menu}
+                  expanded={expanded}
+                  fab={{ icon: 'pencil-simple', label: say.compose }}
+                >
+                  <Destinations rail />
+                </SiteNavigationRail>
+              ))}
+            </div>
+            <div className="flex flex-wrap items-start gap-4">
+              {[false, true].map((expanded) => (
+                <SiteNavigationRail key={String(expanded)} label={say.name} menuLabel={say.menu} expanded={expanded}>
+                  {say.sections.map((section, s) => (
+                    <SiteNavigationRailSection key={section} label={section}>
+                      {say.destinations.slice(s * 2, s * 2 + 2).map((label, i) => (
+                        <SiteNavigationRailItem
+                          key={label}
+                          href=""
+                          icon={icons[s * 2 + i]}
+                          label={label}
+                          selected={s + i === 0}
+                          trailingSupporting={(s * 2 + i + 1) * 4}
+                        />
+                      ))}
+                    </SiteNavigationRailSection>
+                  ))}
+                </SiteNavigationRail>
+              ))}
+            </div>
+            {/* Over the content: its scrim (fixed on the site) held in this box. */}
+            <div className="flex transform-gpu overflow-hidden">
+              <SiteNavigationRail
+                label={say.name}
+                menuLabel={say.menu}
+                expanded
+                modality="modal"
+                fab={{ icon: 'pencil-simple', label: say.compose }}
+              >
+                <Destinations rail />
+              </SiteNavigationRail>
+              <p className="p-4 text-sm text-muted">{say.content}</p>
+            </div>
+            <div className="space-y-4">
+              <div className="flex">
+                <SiteNavigationRail id="parts-navigation-rail-hidden" label={say.name} menuLabel={say.menu} expandedBehavior="hide">
+                  <Destinations rail />
+                </SiteNavigationRail>
+                <div className="flex items-start gap-2 p-2">
+                  <SiteIconButton
+                    icon="list"
+                    label={say.openRail}
+                    aria-controls="parts-navigation-rail-hidden"
+                    aria-expanded="false"
+                    data-navigation-rail-menu=""
+                  />
+                  <p className="py-3 text-sm text-muted">{say.content}</p>
+                </div>
+              </div>
+              <div className="flex">
+                <SiteNavigationRail label={say.name} menuLabel={say.menu} expanded expandedBehavior="hide">
+                  <Destinations rail />
+                </SiteNavigationRail>
+                <p className="p-4 text-sm text-muted">{say.content}</p>
+              </div>
+            </div>
+          </div>
+        </Preview>
+      </Part>
+      <Part name="Search" use={say.search}>
+        <Preview>
+          <div className="mx-auto max-w-md space-y-4 p-2">
+            <SiteSearch
+              label={say.searchLabel}
+              backLabel={say.back}
+              clearLabel={say.clear}
+              emptyText={say.empty}
+              results={[]}
+              trailing={<SiteIconButton icon="user" label={say.destinations[3]} />}
+            />
+            <SiteSearch
+              label={say.searchLabel}
+              backLabel={say.back}
+              clearLabel={say.clear}
+              emptyText={say.empty}
+              open
+              query={say.query}
+              results={say.results.map((r, i) => ({
+                href: '',
+                headline: r.headline,
+                supporting: r.supporting,
+                icon: i ? 'book-open' : 'clock',
+              }))}
+            />
+          </div>
+        </Preview>
+      </Part>
+      <Part name="Toolbar" use={say.toolbar}>
+        <Preview>
+          <div className="space-y-4">
+            <div className="mx-auto max-w-sm space-y-4">
+              {colors.map((color) => (
+                <SiteToolbar key={color} label={say.colors[color]} color={color}>
+                  {actions.map((icon, i) => (
+                    <SiteIconButton key={icon} icon={icon} label={say.actions[i]} />
+                  ))}
+                </SiteToolbar>
+              ))}
+              <SiteToolbar label={say.bar}>
+                <SiteButton href="" icon="calendar-blank">
+                  {say.book}
+                </SiteButton>
+                <SiteButton href="" kind="outlined" icon="phone">
+                  {say.call}
+                </SiteButton>
+              </SiteToolbar>
+            </div>
+            <div className="flex flex-wrap items-center justify-center gap-4 p-2">
+              {colors.map((color) => (
+                <SiteToolbar key={color} label={say.colors[color]} kind="floating" color={color}>
+                  {actions.map((icon, i) => (
+                    <SiteIconButton
+                      key={icon}
+                      icon={icon}
+                      label={say.actions[i]}
+                      kind={i === 0 ? 'filled' : undefined}
+                      aria-pressed={i === 0}
+                    />
+                  ))}
+                </SiteToolbar>
+              ))}
+              {colors.map((color) => (
+                <SiteToolbar key={color} label={`${say.vertical}: ${say.colors[color]}`} kind="floating" color={color} vertical>
+                  {actions.slice(0, 3).map((icon, i) => (
+                    <SiteIconButton key={icon} icon={icon} label={say.actions[i]} />
+                  ))}
+                </SiteToolbar>
+              ))}
+            </div>
+            <div className="flex flex-wrap items-end justify-center gap-6 p-2">
+              {colors.map((color) => (
+                <SiteToolbar
+                  key={color}
+                  label={`${say.withFab}: ${say.colors[color]}`}
+                  kind="floating"
+                  color={color}
+                  fab={<SiteFab icon="pencil-simple" label={say.compose} kind={color === 'vibrant' ? 'primary' : 'secondary'} />}
+                >
+                  {actions.slice(1).map((icon, i) => (
+                    <SiteIconButton key={icon} icon={icon} label={say.actions[i + 1]} />
+                  ))}
+                </SiteToolbar>
+              ))}
+              <SiteToolbar
+                label={`${say.withFab}: ${say.vertical}`}
+                kind="floating"
+                vertical
+                fab={<SiteFab icon="pencil-simple" label={say.compose} kind="secondary" />}
+              >
+                {actions.slice(1).map((icon, i) => (
+                  <SiteIconButton key={icon} icon={icon} label={say.actions[i + 1]} />
+                ))}
+              </SiteToolbar>
+              <SiteToolbar
+                label={say.collapsed}
+                kind="floating"
+                expanded={false}
+                fab={<SiteFab icon="pencil-simple" label={say.compose} />}
+              >
+                {actions.slice(1).map((icon, i) => (
+                  <SiteIconButton key={icon} icon={icon} label={say.actions[i + 1]} />
+                ))}
+              </SiteToolbar>
+            </div>
+          </div>
+        </Preview>
+      </Part>
+    </>
+  );
+}

package/src/Notifications.tsx

@@ -0,0 +1,59 @@
+// "Notifikationer" (#notifikationer), which the bell in the top bar opens (Screen.tsx NotificationsLink): the
+// notifications of the editor and the apps (notifications.ts), newest first, each with when it came and, when it had
+// one, a link to what it is about; an app's with the app's icon. Opening it marks them seen; at the top the bin clears
+// them and the sliders open "Konto", where each type is turned on or off.
+import { useEffect } from 'react';
+import { Info, SlidersHorizontal, Trash, WarningCircle } from '@phosphor-icons/react';
+import { siteName } from '@site/editor';
+import Screen from './Screen';
+import { EmptyNote, Group, IconButton, IconLink, ListItem } from './ui';
+import { apps } from './registry';
+import { clearNotifications, markSeen, useNotifications, type Notification } from './notifications';
+import { when } from './when';
+import { t } from './i18n';
+
+function Row({ text, type, error, at, link }: Notification) {
+  const app = apps.find((a) => type?.startsWith(`${a.id}/`));
+  return (
+    <ListItem
+      href={link?.href}
+      icon={app?.icon ?? (error ? WarningCircle : Info)}
+      headline={text}
+      supporting={link ? `${when(new Date(at))} · ${link.text}` : when(new Date(at))}
+      arrow={!!link}
+    />
+  );
+}
+
+export default function Notifications() {
+  const { items } = useNotifications();
+  useEffect(markSeen, [items]);
+  return (
+    <Screen
+      title={t.library.notifications}
+      back={{ href: '#', label: siteName }}
+      actions={
+        <>
+          <IconButton
+            icon={Trash}
+            label={t.library.clearNotifications}
+
+            disabled={!items.length}
+            onClick={clearNotifications}
+          />
+          <IconLink href="#konto" icon={SlidersHorizontal} label={t.library.notificationChoices} />
+        </>
+      }
+    >
+      {items.length ? (
+        <Group>
+          {items.map((n) => (
+            <Row key={`${n.at}-${n.text}`} {...n} />
+          ))}
+        </Group>
+      ) : (
+        <EmptyNote>{t.library.noNotifications}</EmptyNote>
+      )}
+    </Screen>
+  );
+}