Application structure

import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import { BrowserRouter, Route, Routes } from 'react-router-dom';
import { App } from '@wearables-ui-toolkit/mrbd';
import {
  ReactRouterNavigationProvider,
  ReactRouterPageTransition,
} from '@wearables-ui-toolkit/mrbd/react-router';
import { InboxRoute } from './routes/InboxRoute';
import { LibraryRoute } from './routes/LibraryRoute';
import { SettingsRoute } from './routes/SettingsRoute';
import { ThreadRoute } from './routes/ThreadRoute';

function AppRoutes() {
  return (
    <ReactRouterNavigationProvider fallbackTo="/">
      <ReactRouterPageTransition>
        {({ location }) => (
          <Routes location={location}>
            <Route path="/" element={<InboxRoute />} />
            <Route path="/thread/:threadId" element={<ThreadRoute />} />
            <Route path="/library" element={<LibraryRoute />} />
            <Route path="/settings" element={<SettingsRoute />} />
          </Routes>
        )}
      </ReactRouterPageTransition>
    </ReactRouterNavigationProvider>
  );
}

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <BrowserRouter>
      <App>
        <AppRoutes />
      </App>
    </BrowserRouter>
  </StrictMode>,
);

import { Page, TextStyle, TextView } from '@wearables-ui-toolkit/mrbd';

export function SettingsRoute() {
  return (
    <Page headerText="Settings" headerMetadata="3 items">
      <div className="route-body">
        <TextView as="h2" textStyle={TextStyle.HEADING2}>
          Display
        </TextView>
        <TextView textStyle={TextStyle.BODY2}>
          Brightness adapts to ambient light.
        </TextView>
      </div>
    </Page>
  );
}

import { ListItem, Page, VerticalList } from '@wearables-ui-toolkit/mrbd';
import { useNavigate } from 'react-router-dom';

export function InboxRoute() {
  const navigate = useNavigate();

  return (
    <Page headerText="Inbox" headerMetadata="2 new">
      <VerticalList ariaLabel="Inbox threads">
        <ListItem
          title="Sam Rivera"
          subtitle="On my way"
          timestamp="9:41"
          onClick={() => navigate('/thread/sam')}
        />
        <ListItem
          title="Field Ops"
          subtitle="Route updated"
          timestamp="9:12"
          onClick={() => navigate('/thread/ops')}
        />
      </VerticalList>
    </Page>
  );
}

import { useLayoutEffect, useRef, useState } from 'react';
import { useNavigate } from 'react-router-dom';
import {
  ListItem,
  Page,
  VerticalList,
  type PageHandle,
} from '@wearables-ui-toolkit/mrbd';

export function LibraryRoute() {
  const navigate = useNavigate();
  const pageRef = useRef<PageHandle>(null);
  const [headerHeight, setHeaderHeight] = useState(0);

  useLayoutEffect(() => {
    setHeaderHeight(pageRef.current?.getHeaderHeight() ?? 0);
  }, []);

  return (
    <Page ref={pageRef} headerText="Library">
      <VerticalList insetForHeader headerHeight={headerHeight}>
        <ListItem
          title="Recent"
          subtitle="12 items"
          onClick={() => navigate('/library/recent')}
        />
        <ListItem
          title="Saved"
          subtitle="4 items"
          onClick={() => navigate('/library/saved')}
        />
      </VerticalList>
    </Page>
  );
}

import { useParams } from 'react-router-dom';
import {
  Button,
  ButtonRail,
  ListItem,
  Page,
  VerticalList,
  type IconSource,
} from '@wearables-ui-toolkit/mrbd';
import { archiveThread, shareThread, useThread } from '../data/threads';

const replyIcon: IconSource = '/icons/reply.svg';
const archiveIcon: IconSource = '/icons/archive.svg';
const shareIcon: IconSource = '/icons/share.svg';

export function ThreadRoute() {
  const { threadId = '' } = useParams();
  const thread = useThread(threadId);

  return (
    <Page headerText={thread.title} headerMetadata={thread.status}>
      <div className="route-layout">
        <VerticalList className="route-scroller" ariaLabel="Messages">
          {thread.messages.map(message => (
            <ListItem
              key={message.id}
              title={message.sender}
              subtitle={message.body}
              timestamp={message.time}
            />
          ))}
        </VerticalList>
        <ButtonRail className="route-actions">
          <Button title="Reply" icon={replyIcon} onClick={thread.reply} />
          <Button
            title="Archive"
            icon={archiveIcon}
            onClick={() => archiveThread(threadId)}
          />
          <Button
            title="Share"
            icon={shareIcon}
            onClick={() => shareThread(threadId)}
          />
        </ButtonRail>
      </div>
    </Page>
  );
}

import {
  ListItem,
  PagerPage,
  SubNavigationPager,
  VerticalList,
  type IconSource,
  type SubNavigationItem,
} from '@wearables-ui-toolkit/mrbd';
import { markAlertsSeen } from '../data/alerts';

const homeIcon: IconSource = '/icons/home.svg';
const peopleIcon: IconSource = '/icons/people.svg';
const alertsIcon: IconSource = '/icons/alerts.svg';

const TABS: SubNavigationItem[] = [
  { label: 'Home', icon: homeIcon },
  { label: 'People', icon: peopleIcon },
  { label: 'Alerts', icon: alertsIcon },
];

export function HomeRoute() {
  return (
    <SubNavigationPager
      items={TABS}
      defaultPageIndex={0}
      homeIndex={0}
      ariaLabel="Home sections"
    >
      <VerticalList ariaLabel="Home">
        <ListItem title="Next stop" subtitle="Warehouse 4" />
      </VerticalList>
      <VerticalList ariaLabel="People">
        <ListItem title="Sam Rivera" subtitle="Available" />
      </VerticalList>
      <PagerPage onWillShowPage={markAlertsSeen}>
        <VerticalList ariaLabel="Alerts">
          <ListItem title="Battery low" subtitle="Charge soon" />
        </VerticalList>
      </PagerPage>
    </SubNavigationPager>
  );
}