@byline/host-tanstack-start 0.9.3

package/src/admin-shell/admin-users/list.tsx

@@ -0,0 +1,314 @@
+'use client'
+
+/**
+ * This Source Code is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ *
+ * Copyright (c) Infonomic Company Limited
+ */
+
+import { useState } from 'react'
+import { useRouter, useRouterState } from '@tanstack/react-router'
+
+import { CreateAdminUser, LocalDateTime } from '@byline/ui'
+import {
+  CloseIcon,
+  Container,
+  Drawer,
+  IconButton,
+  PlusIcon,
+  Search,
+  Section,
+  Select,
+  Table,
+  useToastManager,
+} from '@infonomic/uikit/react'
+import cx from 'classnames'
+
+import { Link, useNavigate } from '../chrome/loose-router.js'
+import { RouterPager } from '../chrome/router-pager.js'
+import {
+  TableHeadingCellSortable,
+  type TableHeadingCellSortableProps,
+} from '../chrome/th-sortable.js'
+import { formatNumber } from '../chrome/utils.js'
+import styles from './list.module.css'
+import type {
+  AdminUserListResponse,
+  AdminUserResponse,
+} from '../../server-fns/admin-users/index.js'
+
+const tableColumnDefs: Omit<TableHeadingCellSortableProps, 'lng'>[] = [
+  {
+    fieldName: 'given_name',
+    label: 'Given Name',
+    path: '/admin/users',
+    sortable: true,
+    scope: 'col',
+    align: 'left',
+    className: 'byline-admin-users-list-col-given',
+  },
+  {
+    fieldName: 'family_name',
+    label: 'Family Name',
+    path: '/admin/users',
+    sortable: true,
+    scope: 'col',
+    align: 'left',
+    className: 'byline-admin-users-list-col-family',
+  },
+  {
+    fieldName: 'email',
+    label: 'Email',
+    path: '/admin/users',
+    sortable: true,
+    scope: 'col',
+    align: 'left',
+    className: 'byline-admin-users-list-col-email',
+  },
+  {
+    fieldName: 'updated_at',
+    label: 'Updated',
+    path: '/admin/users',
+    sortable: true,
+    scope: 'col',
+    align: 'right',
+    className: 'byline-admin-users-list-col-date',
+  },
+  {
+    fieldName: 'created_at',
+    label: 'Created',
+    path: '/admin/users',
+    sortable: true,
+    scope: 'col',
+    align: 'right',
+    className: 'byline-admin-users-list-col-date',
+  },
+]
+
+function Stats({ total }: { total: number }) {
+  return (
+    <span className={cx('byline-admin-users-list-stats', styles.stats)}>
+      {formatNumber(total, 0)}
+    </span>
+  )
+}
+
+function padRows(value: number) {
+  return Array.from({ length: value }).map((_, index) => (
+    <div
+      key={`empty-row-${
+        // biome-ignore lint/suspicious/noArrayIndexKey: static filler
+        index
+      }`}
+      className={cx('byline-admin-users-list-pad-row', styles.padRow)}
+    >
+      &nbsp;
+    </div>
+  ))
+}
+
+/**
+ * Admin-users list view.
+ *
+ * The server-fn layer returns `AdminUserListResponse` — rows already
+ * shaped via `toAdminUser`, meta for pagination. Sorting / searching /
+ * paging is expressed through URL search params; the route loader picks
+ * those up and re-queries.
+ */
+export function AdminUsersListView({ data }: { data: AdminUserListResponse }) {
+  const navigate = useNavigate()
+  const router = useRouter()
+  const toastManager = useToastManager()
+  const pathname = useRouterState({ select: (s) => s.location.pathname })
+  const [isCreateDrawerOpen, setIsCreateDrawerOpen] = useState(false)
+
+  const openCreateDrawer = () => setIsCreateDrawerOpen(true)
+  const closeCreateDrawer = () => setIsCreateDrawerOpen(false)
+
+  const handleCreateSuccess = (created: AdminUserResponse) => {
+    setIsCreateDrawerOpen(false)
+    // Re-run the list loader so the newly created user appears in the
+    // current page of the table.
+    void router.invalidate()
+    toastManager.add({
+      title: 'Admin user created',
+      description: created.email,
+      data: { intent: 'success' },
+    })
+  }
+
+  function updateSearch(patch: Record<string, string | number | boolean | undefined>) {
+    navigate({
+      to: pathname as never,
+      search: (current: Record<string, unknown>) => {
+        const next: Record<string, unknown> = { ...current }
+        for (const [key, value] of Object.entries(patch)) {
+          if (value == null || value === '') {
+            delete next[key]
+          } else {
+            next[key] = value
+          }
+        }
+        return next
+      },
+    })
+  }
+
+  const handleOnSearch = (query: string) => {
+    updateSearch({ page: undefined, query: query.length > 0 ? query : undefined })
+  }
+  const handleOnClear = () => {
+    updateSearch({ page: undefined, query: undefined })
+  }
+  const handleOnPageSizeChange = (value: unknown) => {
+    const pageSize = String(value)
+    if (pageSize.length === 0) return
+    updateSearch({ page: undefined, page_size: Number(pageSize) })
+  }
+
+  return (
+    <Section>
+      <Container>
+        <div className={cx('byline-admin-users-list-head', styles.head)}>
+          <h1 className={cx('byline-admin-users-list-title', styles.title)}>Admin Users</h1>
+          <Stats total={data.meta.total} />
+          <IconButton aria-label="Create New Admin User" onClick={openCreateDrawer}>
+            <PlusIcon height="18px" width="18px" svgClassName="stroke-white" />
+          </IconButton>
+        </div>
+        <div className={cx('byline-admin-users-list-options', styles.options)}>
+          <Search
+            onSearch={handleOnSearch}
+            onClear={handleOnClear}
+            inputSize="sm"
+            placeholder="Search by name or email"
+            className={cx('byline-admin-users-list-search', styles.search)}
+          />
+          <RouterPager
+            page={data.meta.page}
+            count={data.meta.total_pages}
+            showFirstButton
+            showLastButton
+            componentName="pagerTop"
+            aria-label="Top Pager"
+          />
+        </div>
+        <Table.Container className={cx('byline-admin-users-list-table-wrap', styles.tableWrap)}>
+          <Table>
+            <Table.Header>
+              <Table.Row>
+                {tableColumnDefs.map((column) => (
+                  <TableHeadingCellSortable key={column.fieldName} {...column} ref={undefined} />
+                ))}
+              </Table.Row>
+            </Table.Header>
+            <Table.Body>
+              {data.users.map((user) => (
+                <Table.Row
+                  key={user.id}
+                  className={cx({
+                    'byline-admin-users-list-disabled': !user.is_enabled,
+                    [styles.disabled]: !user.is_enabled,
+                  })}
+                >
+                  <Table.Cell>
+                    <Link to={'/admin/users/$id' as never} params={{ id: user.id }}>
+                      {user.given_name ?? (
+                        <span
+                          className={cx('muted byline-admin-users-list-not-set', styles.notSet)}
+                        >
+                          Not set
+                        </span>
+                      )}
+                    </Link>
+                  </Table.Cell>
+                  <Table.Cell>
+                    {user.family_name ?? (
+                      <span className={cx('muted byline-admin-users-list-not-set', styles.notSet)}>
+                        Not set
+                      </span>
+                    )}
+                  </Table.Cell>
+                  <Table.Cell>{user.email}</Table.Cell>
+                  <Table.Cell
+                    className={cx('byline-admin-users-list-cell-right', styles.cellRight)}
+                  >
+                    <LocalDateTime value={user.updated_at} />
+                  </Table.Cell>
+                  <Table.Cell
+                    className={cx('byline-admin-users-list-cell-right', styles.cellRight)}
+                  >
+                    <LocalDateTime value={user.created_at} />
+                  </Table.Cell>
+                </Table.Row>
+              ))}
+            </Table.Body>
+          </Table>
+          {padRows(Math.max(0, 6 - data.users.length))}
+        </Table.Container>
+        <div
+          className={cx(
+            'byline-admin-users-list-options byline-admin-users-list-options-bottom',
+            styles.options,
+            styles.optionsBottom
+          )}
+        >
+          <Select
+            containerClassName={cx('byline-admin-users-list-page-size', styles.pageSize)}
+            id="page_size"
+            name="page_size"
+            size="sm"
+            defaultValue={String(data.meta.page_size)}
+            onValueChange={handleOnPageSizeChange}
+            items={[
+              { value: '10', label: '10' },
+              { value: '20', label: '20' },
+              { value: '50', label: '50' },
+              { value: '100', label: '100' },
+            ]}
+          />
+          <RouterPager
+            smoothScrollToTop={true}
+            page={data.meta.page}
+            count={data.meta.total_pages}
+            showFirstButton
+            showLastButton
+            componentName="pagerBottom"
+            aria-label="Bottom Pager"
+          />
+        </div>
+      </Container>
+
+      <Drawer
+        id="admin-users-create-drawer"
+        closeOnOverlayClick={false}
+        width="medium"
+        topOffset="50px"
+        isOpen={isCreateDrawerOpen}
+        onDismiss={closeCreateDrawer}
+        className={cx('byline-admin-users-list-drawer', styles.drawer)}
+      >
+        <Drawer.Container aria-hidden={!isCreateDrawerOpen} className="p-2">
+          <Drawer.TopActions>
+            <button type="button" tabIndex={0} className="sr-only">
+              no action
+            </button>
+            <IconButton aria-label="Close" size="sm" onClick={closeCreateDrawer}>
+              <CloseIcon width="14px" height="14px" svgClassName="white-icon stroke-white" />
+            </IconButton>
+          </Drawer.TopActions>
+          <Drawer.Header>
+            <h2>New Admin User</h2>
+          </Drawer.Header>
+          <Drawer.Content>
+            <div className={cx('byline-admin-users-list-drawer-scroll', styles.drawerScroll)}>
+              <CreateAdminUser onClose={closeCreateDrawer} onSuccess={handleCreateSuccess} />
+            </div>
+          </Drawer.Content>
+        </Drawer.Container>
+      </Drawer>
+    </Section>
+  )
+}

package/src/admin-shell/chrome/admin-app-bar.module.css

@@ -0,0 +1,72 @@
+/**
+ * AdminAppBar — top header in the admin shell.
+ *
+ * Override handles:
+ *   .byline-admin-app-bar           — outer <header>
+ *   .byline-admin-app-bar-left      — branding + breadcrumbs cluster
+ *   .byline-admin-app-bar-right     — sign-in info + sign-out cluster
+ *   .byline-admin-app-bar-user      — "Signed in as …" text
+ *   .byline-admin-app-bar-user-name — bolded display name
+ */
+
+.header,
+:global(.byline-admin-app-bar) {
+  position: fixed;
+  z-index: 50;
+  height: 45px;
+  width: 100%;
+  max-width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 1rem;
+  background-color: #ffffff;
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  font-size: 1.125rem;
+  line-height: 1.75rem;
+  font-weight: 600;
+}
+
+:is([data-theme="dark"], :global(.dark)) .header,
+:is([data-theme="dark"], :global(.dark)) :global(.byline-admin-app-bar) {
+  background-color: var(--canvas-800);
+}
+
+.left,
+:global(.byline-admin-app-bar-left) {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+
+.right,
+:global(.byline-admin-app-bar-right) {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  font-size: 0.875rem;
+  font-weight: 400;
+}
+
+.user,
+:global(.byline-admin-app-bar-user) {
+  display: none;
+  color: var(--gray-600);
+}
+
+@media (min-width: 40rem) {
+  .user,
+  :global(.byline-admin-app-bar-user) {
+    display: inline;
+  }
+}
+
+:is([data-theme="dark"], :global(.dark)) .user,
+:is([data-theme="dark"], :global(.dark)) :global(.byline-admin-app-bar-user) {
+  color: var(--gray-300);
+}
+
+.userName,
+:global(.byline-admin-app-bar-user-name) {
+  font-weight: 600;
+}

package/src/admin-shell/chrome/admin-app-bar.tsx

@@ -0,0 +1,74 @@
+'use client'
+
+/**
+ * This Source Code is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ *
+ * Copyright (c) Infonomic Company Limited
+ */
+
+import { useState } from 'react'
+
+import { Button } from '@infonomic/uikit/react'
+import cx from 'classnames'
+
+import { adminSignOut, type CurrentAdminUser } from '../../server-fns/auth/index.js'
+import styles from './admin-app-bar.module.css'
+import { Branding } from './branding.js'
+import { Breadcrumbs } from './breadcrumbs/breadcrumbs.js'
+import { useBreadcrumbs } from './breadcrumbs/breadcrumbs-provider.js'
+
+interface AdminAppBarProps {
+  user: CurrentAdminUser
+}
+
+function displayNameFor(user: CurrentAdminUser): string {
+  const names = [user.given_name, user.family_name].filter(
+    (part): part is string => typeof part === 'string' && part.length > 0
+  )
+  return names.length > 0 ? names.join(' ') : user.email
+}
+
+export function AdminAppBar({ user }: AdminAppBarProps) {
+  const { breadCrumbSettings } = useBreadcrumbs()
+  const [signingOut, setSigningOut] = useState(false)
+
+  async function handleSignOut() {
+    if (signingOut) return
+    setSigningOut(true)
+    try {
+      await adminSignOut()
+    } catch (err) {
+      // Even on transport failure, the server-side handler clears the
+      // cookies best-effort. Navigate to sign-in regardless.
+      console.warn('sign-out request failed', err)
+    }
+    // Full-page navigation so the admin guard re-runs with cleared cookies.
+    window.location.assign('/sign-in')
+  }
+
+  return (
+    <header className={cx('byline-admin-app-bar', styles.header)}>
+      <div className={cx('byline-admin-app-bar-left', styles.left)}>
+        <Branding />
+        <Breadcrumbs
+          homePath={breadCrumbSettings.homePath}
+          homeLabel={breadCrumbSettings.homeLabel}
+          breadcrumbs={breadCrumbSettings.breadcrumbs}
+        />
+      </div>
+      <div className={cx('byline-admin-app-bar-right', styles.right)}>
+        <span className={cx('byline-admin-app-bar-user', styles.user)}>
+          Signed in as{' '}
+          <span className={cx('byline-admin-app-bar-user-name', styles.userName)}>
+            {displayNameFor(user)}
+          </span>
+        </span>
+        <Button size="xs" intent="secondary" onClick={handleSignOut} disabled={signingOut}>
+          {signingOut ? 'Signing out…' : 'Sign out'}
+        </Button>
+      </div>
+    </header>
+  )
+}

package/src/admin-shell/chrome/admin-layout.module.css

@@ -0,0 +1,16 @@
+/**
+ * AdminLayout — the <main> wrapper used by the authenticated admin
+ * shell. Hosts the menu drawer, drawer toggle, and the route content
+ * stream side-by-side, with room above for the fixed AdminAppBar.
+ *
+ * Override handle: .byline-admin-layout-main
+ */
+
+.main,
+:global(.byline-admin-layout-main) {
+  display: flex;
+  height: 100vh;
+  width: 100%;
+  max-width: 100%;
+  padding-top: 45px;
+}

package/src/admin-shell/chrome/branding.module.css

@@ -0,0 +1,20 @@
+/**
+ * Branding — admin app-bar logo wrapper.
+ *
+ * Override handles:
+ *   .byline-admin-branding      — outer flex row
+ *   .byline-admin-branding-logo — logo SVG
+ */
+
+.root,
+:global(.byline-admin-branding) {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.logo,
+:global(.byline-admin-branding-logo) {
+  width: 24px;
+  height: 24px;
+}

package/src/admin-shell/chrome/branding.tsx

@@ -0,0 +1,23 @@
+/**
+ * This Source Code is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ *
+ * Copyright (c) Infonomic Company Limited
+ */
+
+import cx from 'classnames'
+
+import styles from './branding.module.css'
+import Logo from './byline-logo.js'
+import { Link } from './loose-router.js'
+
+export function Branding() {
+  return (
+    <div className={cx('byline-admin-branding', styles.root)}>
+      <Link to={'/' as never}>
+        <Logo className={cx('byline-admin-branding-logo', styles.logo)} />
+      </Link>
+    </div>
+  )
+}

package/src/admin-shell/chrome/breadcrumbs/@types.ts

@@ -0,0 +1,5 @@
+export interface Breadcrumb {
+  label: string
+  href: string
+  active?: boolean
+}

package/src/admin-shell/chrome/breadcrumbs/breadcrumbs-client.tsx

@@ -0,0 +1,30 @@
+'use client'
+
+/**
+ * This Source Code is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ *
+ * Copyright (c) Infonomic Company Limited
+ */
+
+import { useEffect } from 'react'
+
+import { useBreadcrumbs } from './breadcrumbs-provider.js'
+import type { Breadcrumb } from './@types.js'
+
+export function BreadcrumbsClient({
+  breadcrumbs,
+  homeLabel = 'Home',
+  homePath = '/',
+}: {
+  breadcrumbs: Breadcrumb[]
+  homeLabel?: string
+  homePath?: string
+}) {
+  const { setBreadcrumbs } = useBreadcrumbs()
+  useEffect(() => {
+    setBreadcrumbs({ homeLabel, homePath, breadcrumbs })
+  }, [breadcrumbs, homeLabel, homePath, setBreadcrumbs])
+  return null
+}

package/src/admin-shell/chrome/breadcrumbs/breadcrumbs-provider.tsx

@@ -0,0 +1,48 @@
+/**
+ * This Source Code is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ *
+ * Copyright (c) Infonomic Company Limited
+ */
+
+import { createContext, type ReactNode, useContext, useState } from 'react'
+
+import type { Breadcrumb } from './@types.js'
+
+interface BreadcrumbsSettings {
+  homeLabel?: string
+  homePath?: string
+  breadcrumbs: Breadcrumb[]
+}
+
+interface BreadcrumbsContextType {
+  breadCrumbSettings: BreadcrumbsSettings
+  setBreadcrumbs: (settings: BreadcrumbsSettings) => void
+}
+
+const BreadcrumbsContext = createContext<BreadcrumbsContextType | undefined>(undefined)
+
+export function BreadcrumbsProvider({ children }: { children: ReactNode }) {
+  const [breadcrumbSettings, setBreadcrumbSettings] = useState<BreadcrumbsSettings>({
+    homeLabel: 'Home',
+    homePath: '/',
+    breadcrumbs: [],
+  })
+
+  return (
+    <BreadcrumbsContext
+      value={{ breadCrumbSettings: breadcrumbSettings, setBreadcrumbs: setBreadcrumbSettings }}
+    >
+      {children}
+    </BreadcrumbsContext>
+  )
+}
+
+export function useBreadcrumbs() {
+  const context = useContext(BreadcrumbsContext)
+  if (!context) {
+    throw new Error('useBreadcrumbs must be used within BreadcrumbsProvider')
+  }
+  return context
+}

package/src/admin-shell/chrome/breadcrumbs/breadcrumbs.module.css

@@ -0,0 +1,93 @@
+/**
+ * Breadcrumbs — admin app-bar trail.
+ *
+ * Override handles:
+ *   .byline-breadcrumbs       — outer <nav>
+ *   .byline-breadcrumbs-list  — inline <ul>
+ *   .byline-breadcrumbs-item  — each <li>
+ *   .byline-breadcrumbs-link  — clickable home + intermediate links
+ *   .byline-breadcrumbs-leaf  — current-page (final) span
+ *   .byline-breadcrumbs-icon  — chevron / home icons
+ */
+
+.nav,
+:global(.byline-breadcrumbs) {
+  display: flex;
+}
+
+.list,
+:global(.byline-breadcrumbs-list) {
+  display: inline-flex;
+  flex-wrap: wrap;
+  align-items: center;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  gap: 0.25rem;
+}
+
+.item,
+:global(.byline-breadcrumbs-item) {
+  display: inline-flex;
+  align-items: center;
+  margin: 0;
+  padding: 0;
+}
+
+.link,
+:global(.byline-breadcrumbs-link) {
+  display: inline-flex;
+  align-items: center;
+  margin: 0;
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--gray-900);
+}
+.link:hover,
+:global(.byline-breadcrumbs-link:hover) {
+  color: var(--gray-800);
+}
+
+:is([data-theme="dark"], :global(.dark)) .link,
+:is([data-theme="dark"], :global(.dark)) :global(.byline-breadcrumbs-link) {
+  color: var(--gray-400);
+}
+:is([data-theme="dark"], :global(.dark)) .link:hover,
+:is([data-theme="dark"], :global(.dark)) :global(.byline-breadcrumbs-link:hover) {
+  color: #ffffff;
+}
+
+.leaf,
+:global(.byline-breadcrumbs-leaf) {
+  font-size: 0.875rem;
+  font-weight: 500;
+  line-height: 1.25rem;
+  color: var(--gray-800);
+}
+:is([data-theme="dark"], :global(.dark)) .leaf,
+:is([data-theme="dark"], :global(.dark)) :global(.byline-breadcrumbs-leaf) {
+  color: var(--gray-400);
+}
+
+.homeIcon,
+:global(.byline-breadcrumbs-home-icon) {
+  width: 1rem;
+  height: 1rem;
+  margin-right: 0.5rem;
+}
+
+.chevron,
+:global(.byline-breadcrumbs-chevron) {
+  width: 1.25rem;
+  height: 1.25rem;
+  color: var(--gray-400);
+}
+
+.chevronCurrent,
+:global(.byline-breadcrumbs-chevron-current) {
+  color: var(--gray-900);
+}
+:is([data-theme="dark"], :global(.dark)) .chevronCurrent,
+:is([data-theme="dark"], :global(.dark)) :global(.byline-breadcrumbs-chevron-current) {
+  color: var(--gray-600);
+}