@byline/host-tanstack-start 0.9.3

package/src/admin-shell/admin-roles/list.module.css

@@ -0,0 +1,158 @@
+/**
+ * AdminRolesListView — drag-and-drop role list with optimistic re-order.
+ *
+ * Override handles:
+ *   .byline-roles-list-head        — title + stats + create-button row
+ *   .byline-roles-list-title       — page heading
+ *   .byline-roles-list-empty       — "No admin roles found" placeholder
+ *   .byline-roles-list-grip        — drag handle cell
+ *   .byline-roles-list-not-set     — italic "Not set" markers
+ *   .byline-roles-list-pad-row     — empty filler rows
+ *   .byline-roles-list-save        — bottom save-order button container
+ *   .byline-roles-list-save-form   — save-order form
+ *   .byline-roles-list-save-actions — actions row inside the save form
+ *   .byline-roles-list-stats       — count badge
+ */
+
+.head,
+:global(.byline-roles-list-head) {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding-top: 2px;
+  padding-bottom: 2px;
+}
+
+.title,
+:global(.byline-roles-list-title) {
+  margin: 0;
+  padding-bottom: 2px;
+}
+
+.stats,
+:global(.byline-roles-list-stats) {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-right: auto;
+  margin-bottom: -4px;
+  height: 28px;
+  min-width: 28px;
+  padding: 5px 6px;
+  white-space: nowrap;
+  font-size: 0.875rem;
+  line-height: 0;
+  background-color: var(--gray-25);
+  border: var(--border-width-thin) var(--border-style-solid) var(--gray-200);
+  border-radius: 0.375rem;
+}
+
+:is([data-theme="dark"], :global(.dark)) .stats,
+:is([data-theme="dark"], :global(.dark)) :global(.byline-roles-list-stats) {
+  background-color: var(--canvas-700);
+}
+
+.empty,
+:global(.byline-roles-list-empty) {
+  caption-side: bottom;
+  text-align: center;
+  margin-top: 6vh;
+}
+
+.grip,
+:global(.byline-roles-list-grip) {
+  cursor: grab;
+}
+
+.notSet,
+:global(.byline-roles-list-not-set) {
+  font-style: italic;
+}
+
+.padRow,
+:global(.byline-roles-list-pad-row) {
+  height: 32px;
+  border: 0;
+}
+
+.tableWrap,
+:global(.byline-roles-list-table-wrap) {
+  margin-top: 0.5rem;
+  margin-bottom: 0.75rem;
+}
+
+.colDrag,
+:global(.byline-roles-list-col-drag) {
+  width: 2%;
+  padding: 0.5rem;
+}
+
+.colName,
+:global(.byline-roles-list-col-name) {
+  width: 20%;
+}
+
+.colMachine,
+:global(.byline-roles-list-col-machine) {
+  width: 20%;
+}
+
+.colDescription,
+:global(.byline-roles-list-col-description) {
+  width: 40%;
+}
+
+.colCreated,
+:global(.byline-roles-list-col-created) {
+  width: 18%;
+  text-align: right;
+}
+
+.gripCell,
+:global(.byline-roles-list-grip-cell) {
+  width: 2%;
+}
+
+.cellRight,
+:global(.byline-roles-list-cell-right) {
+  text-align: right;
+}
+
+.save,
+:global(.byline-roles-list-save) {
+  padding-right: 0.25rem;
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
+}
+
+.saveForm,
+:global(.byline-roles-list-save-form) {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+
+.saveActions,
+:global(.byline-roles-list-save-actions) {
+  display: flex;
+  justify-content: flex-end;
+  gap: 0.5rem;
+}
+
+.drawerScroll,
+:global(.byline-roles-list-drawer-scroll) {
+  max-height: calc(100vh - 160px);
+  overflow-y: auto;
+}
+
+.drawer,
+:global(.byline-roles-list-drawer) {
+  /* Width handled by uikit Drawer prop; responsive override below. */
+}
+
+@media (min-width: 48rem) {
+  .drawer,
+  :global(.byline-roles-list-drawer) {
+    width: 600px;
+  }
+}

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

@@ -0,0 +1,308 @@
+'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
+ */
+
+/**
+ * Admin-roles list view.
+ *
+ * Two distinguishing features vs. admin-users:
+ *  - **No search/sort/pagination.** The role set is small by design;
+ *    presentation order is editorial via drag-and-drop.
+ *  - **Drag-to-reorder.** Re-ordered ids are sent to `reorderAdminRoles`
+ *    on Save; the Save button only appears once an order change exists.
+ *
+ * Optimistic UI: the local `items` state is updated immediately on drag
+ * end. If the server rejects the reorder we revert and surface a toast.
+ */
+
+import type React from 'react'
+import { type FormEvent, useEffect, useState } from 'react'
+import { useRouter } from '@tanstack/react-router'
+
+import {
+  CreateAdminRole,
+  DraggableSortable,
+  LocalDateTime,
+  moveItem,
+  useSortable,
+} from '@byline/ui'
+import {
+  Button,
+  CloseIcon,
+  Container,
+  Drawer,
+  GripperVerticalIcon,
+  IconButton,
+  LoaderEllipsis,
+  PlusIcon,
+  Section,
+  Table,
+  useToastManager,
+} from '@infonomic/uikit/react'
+import cx from 'classnames'
+
+import { reorderAdminRoles } from '../../server-fns/admin-roles/reorder.js'
+import { Link } from '../chrome/loose-router.js'
+import { formatNumber } from '../chrome/utils.js'
+import styles from './list.module.css'
+import type {
+  AdminRoleListResponse,
+  AdminRoleResponse,
+} from '../../server-fns/admin-roles/index.js'
+
+function Stats({ total }: { total: number }) {
+  return (
+    <span className={cx('byline-roles-list-stats', styles.stats)}>{formatNumber(total, 0)}</span>
+  )
+}
+
+interface DraggableRowProps {
+  item: AdminRoleResponse
+  disabled: boolean
+}
+
+const DraggableRow: React.FC<DraggableRowProps> = ({ item, disabled }) => {
+  const { attributes, isDragging, listeners, setNodeRef, transform, transition } = useSortable({
+    id: item.id,
+    disabled,
+    transition: {
+      duration: 250,
+      easing: 'cubic-bezier(0, 0.2, 0.2, 1)',
+    },
+  })
+
+  return (
+    <Table.Row
+      // useSortable returns a SetterFn; Table.Row expects an intersected
+      // Ref & RefObject. The cast is the same workaround used in the
+      // infonomic.io list-view; @dnd-kit's Ref shape doesn't satisfy
+      // React 19's intersected ref type.
+      // biome-ignore lint/suspicious/noExplicitAny: dnd-kit ref shape
+      ref={setNodeRef as any}
+      style={{
+        transform: transform ? `translate3d(${transform.x}px, ${transform.y}px, 0)` : undefined,
+        transition,
+        zIndex: isDragging ? 10 : 'auto',
+      }}
+    >
+      <Table.Cell className={cx('byline-roles-list-grip-cell', styles.gripCell)}>
+        <div className={cx('byline-roles-list-grip', styles.grip)} {...attributes} {...listeners}>
+          <GripperVerticalIcon />
+        </div>
+      </Table.Cell>
+      <Table.Cell>
+        <Link to={'/admin/roles/$id' as never} params={{ id: item.id }}>
+          {item.name}
+        </Link>
+      </Table.Cell>
+      <Table.Cell>{item.machine_name}</Table.Cell>
+      <Table.Cell>
+        {item.description ?? (
+          <span className={cx('muted byline-roles-list-not-set', styles.notSet)}>Not set</span>
+        )}
+      </Table.Cell>
+      <Table.Cell className={cx('byline-roles-list-cell-right', styles.cellRight)}>
+        <LocalDateTime value={item.created_at} />
+      </Table.Cell>
+    </Table.Row>
+  )
+}
+
+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-roles-list-pad-row', styles.padRow)}
+    >
+      &nbsp;
+    </div>
+  ))
+}
+
+export function AdminRolesListView({ data }: { data: AdminRoleListResponse }) {
+  const router = useRouter()
+  const toastManager = useToastManager()
+  const [items, setItems] = useState<AdminRoleResponse[]>(data.roles)
+  const [orderChanged, setOrderChanged] = useState(false)
+  const [isSaving, setIsSaving] = useState(false)
+  const [isCreateDrawerOpen, setIsCreateDrawerOpen] = useState(false)
+
+  // Sync local `items` to fresh loader data after a `router.invalidate()`.
+  // We hold local state for the optimistic drag-and-drop UI, so without
+  // this effect a newly-created or deleted role wouldn't appear until
+  // the page was reloaded. Skip the sync while the user has an unsaved
+  // reorder in flight — clobbering their pending edit would be worse
+  // than the slightly-stale list.
+  useEffect(() => {
+    if (!orderChanged) {
+      setItems(data.roles)
+    }
+  }, [data.roles, orderChanged])
+
+  const openCreateDrawer = () => setIsCreateDrawerOpen(true)
+  const closeCreateDrawer = () => setIsCreateDrawerOpen(false)
+
+  const handleCreateSuccess = (created: AdminRoleResponse) => {
+    setIsCreateDrawerOpen(false)
+    void router.invalidate()
+    toastManager.add({
+      title: 'Admin role created',
+      description: created.name,
+      data: { intent: 'success' },
+    })
+  }
+
+  const handleOnDragEnd = ({
+    moveFromIndex,
+    moveToIndex,
+  }: {
+    event: unknown
+    moveFromIndex: number
+    moveToIndex: number
+  }) => {
+    if (moveFromIndex < 0 || moveToIndex < 0 || moveFromIndex === moveToIndex) return
+    setItems((current) => moveItem(current, moveFromIndex, moveToIndex))
+    setOrderChanged(true)
+  }
+
+  async function handleOnSave(event: FormEvent<HTMLFormElement>): Promise<void> {
+    event.preventDefault()
+    if (isSaving) return
+    setIsSaving(true)
+    const previousItems = items
+    try {
+      await reorderAdminRoles({ data: { ids: items.map((role) => role.id) } })
+      setOrderChanged(false)
+      void router.invalidate()
+      toastManager.add({
+        title: 'Order saved',
+        data: { intent: 'success' },
+      })
+    } catch (_err) {
+      // Revert local state so the table reflects what's actually stored.
+      setItems(previousItems)
+      setOrderChanged(false)
+      toastManager.add({
+        title: 'Could not save the new order',
+        description: 'Please try again.',
+        data: { intent: 'danger' },
+      })
+    } finally {
+      setIsSaving(false)
+    }
+  }
+
+  return (
+    <Section>
+      <Container>
+        <div className={cx('byline-roles-list-head', styles.head)}>
+          <h1 className={cx('byline-roles-list-title', styles.title)}>Admin Roles</h1>
+          <Stats total={data.roles.length} />
+          <IconButton aria-label="Create New Admin Role" onClick={openCreateDrawer}>
+            <PlusIcon height="18px" width="18px" svgClassName="stroke-white" />
+          </IconButton>
+        </div>
+
+        {items.length === 0 ? (
+          <div className={cx('byline-roles-list-empty', styles.empty)}>No admin roles found</div>
+        ) : (
+          <DraggableSortable ids={items.map((item) => item.id)} onDragEnd={handleOnDragEnd}>
+            <Table.Container className={cx('byline-roles-list-table-wrap', styles.tableWrap)}>
+              <Table>
+                <Table.Header>
+                  <Table.Row>
+                    <Table.HeadingCell
+                      className={cx('byline-roles-list-col-drag', styles.colDrag)}
+                    />
+                    <Table.HeadingCell className={cx('byline-roles-list-col-name', styles.colName)}>
+                      Name
+                    </Table.HeadingCell>
+                    <Table.HeadingCell
+                      className={cx('byline-roles-list-col-machine', styles.colMachine)}
+                    >
+                      Machine Name
+                    </Table.HeadingCell>
+                    <Table.HeadingCell
+                      className={cx('byline-roles-list-col-description', styles.colDescription)}
+                    >
+                      Description
+                    </Table.HeadingCell>
+                    <Table.HeadingCell
+                      className={cx('byline-roles-list-col-created', styles.colCreated)}
+                    >
+                      Created
+                    </Table.HeadingCell>
+                  </Table.Row>
+                </Table.Header>
+                <Table.Body>
+                  {items.map((role) => (
+                    <DraggableRow key={role.id} item={role} disabled={isSaving} />
+                  ))}
+                </Table.Body>
+              </Table>
+              {padRows(Math.max(0, 6 - items.length))}
+            </Table.Container>
+          </DraggableSortable>
+        )}
+
+        {orderChanged ? (
+          <div className={cx('byline-roles-list-save', styles.save)}>
+            <form
+              onSubmit={handleOnSave}
+              noValidate
+              className={cx('byline-roles-list-save-form', styles.saveForm)}
+            >
+              <div className={cx('byline-roles-list-save-actions', styles.saveActions)}>
+                <Button type="submit" size="sm" disabled={isSaving}>
+                  {isSaving ? (
+                    <LoaderEllipsis size={30} color="#aaaaaa" />
+                  ) : (
+                    <span>Save Order</span>
+                  )}
+                </Button>
+              </div>
+            </form>
+          </div>
+        ) : null}
+      </Container>
+
+      <Drawer
+        id="admin-roles-create-drawer"
+        closeOnOverlayClick={false}
+        width="medium"
+        topOffset="50px"
+        isOpen={isCreateDrawerOpen}
+        onDismiss={closeCreateDrawer}
+        className={cx('byline-roles-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 Role</h2>
+          </Drawer.Header>
+          <Drawer.Content>
+            <div className={cx('byline-roles-list-drawer-scroll', styles.drawerScroll)}>
+              <CreateAdminRole onClose={closeCreateDrawer} onSuccess={handleCreateSuccess} />
+            </div>
+          </Drawer.Content>
+        </Drawer.Container>
+      </Drawer>
+    </Section>
+  )
+}

package/src/admin-shell/admin-users/container.module.css

@@ -0,0 +1,199 @@
+/**
+ * AccountContainer — admin-user detail view with edit drawers.
+ *
+ * Override handles:
+ *   .byline-admin-user-grid           — outer two-column grid wrapper
+ *   .byline-admin-user-column         — column wrapper
+ *   .byline-admin-user-section        — single bordered card
+ *   .byline-admin-user-section-head   — section title + edit-icon row
+ *   .byline-admin-user-line           — single key/value paragraph
+ *   .byline-admin-user-meta           — small metadata block (created/updated/last-login)
+ *   .byline-admin-user-status-on / -off — enabled/disabled colour modifier
+ *   .byline-admin-user-not-set        — italic "Not set" markers
+ *   .byline-admin-user-role-list      — wrapped role-badge container
+ *   .byline-admin-user-role-badge     — individual role pill
+ *   .byline-admin-user-role-empty     — italic empty-roles caption
+ *   .byline-admin-user-drawer         — drawer responsive width override
+ *   .byline-admin-user-drawer-large   — drawer responsive width (large variant)
+ *   .byline-admin-user-drawer-body    — drawer content container
+ *   .byline-admin-user-drawer-scroll  — drawer scrollable inner viewport
+ *   .byline-admin-user-modal          — modal container sizing
+ *   .byline-admin-user-modal-head     — modal header row
+ */
+
+.grid,
+:global(.byline-admin-user-grid) {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  margin-bottom: 3rem;
+}
+
+@media (min-width: 40rem) {
+  .grid,
+  :global(.byline-admin-user-grid) {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+.column,
+:global(.byline-admin-user-column) {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  margin-bottom: 1rem;
+}
+
+.section,
+:global(.byline-admin-user-section) {
+  border: var(--border-width-thin) var(--border-style-solid) var(--gray-100);
+  background-color: var(--canvas-25);
+  padding: 1rem;
+  border-radius: 0.125rem;
+}
+
+:is([data-theme="dark"], :global(.dark)) .section,
+:is([data-theme="dark"], :global(.dark)) :global(.byline-admin-user-section) {
+  border-color: var(--gray-700);
+  background-color: var(--canvas-800);
+}
+
+.sectionHead,
+:global(.byline-admin-user-section-head) {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 0.5rem;
+}
+
+.line,
+:global(.byline-admin-user-line) {
+  margin-bottom: 0;
+}
+
+.lineSpaced,
+:global(.byline-admin-user-line-spaced) {
+  margin-bottom: 0.75rem;
+}
+
+.meta,
+:global(.byline-admin-user-meta) {
+  margin-top: 1rem;
+  font-size: 0.75rem;
+}
+
+.statusOn,
+:global(.byline-admin-user-status-on) {
+  color: var(--green-600);
+}
+
+.statusOff,
+:global(.byline-admin-user-status-off) {
+  color: var(--red-600);
+}
+
+:is([data-theme="dark"], :global(.dark)) .statusOn,
+:is([data-theme="dark"], :global(.dark)) :global(.byline-admin-user-status-on) {
+  color: var(--green-400);
+}
+
+:is([data-theme="dark"], :global(.dark)) .statusOff,
+:is([data-theme="dark"], :global(.dark)) :global(.byline-admin-user-status-off) {
+  color: var(--red-400);
+}
+
+.notSet,
+:global(.byline-admin-user-not-set) {
+  font-style: italic;
+}
+
+.roleList,
+:global(.byline-admin-user-role-list) {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.25rem;
+  margin-bottom: 0.75rem;
+}
+
+.roleEmpty,
+:global(.byline-admin-user-role-empty) {
+  margin: 0;
+  font-style: italic;
+}
+
+.roleBadge,
+:global(.byline-admin-user-role-badge) {
+  display: inline-flex;
+  align-items: center;
+  border-radius: 0.125rem;
+  padding: 0.125rem 0.5rem;
+  font-size: 0.75rem;
+  font-weight: 500;
+  background-color: #eff6ff;
+  color: #1d4ed8;
+}
+
+:is([data-theme="dark"], :global(.dark)) .roleBadge,
+:is([data-theme="dark"], :global(.dark)) :global(.byline-admin-user-role-badge) {
+  background-color: rgba(30, 58, 138, 0.4);
+  color: #bfdbfe;
+}
+
+.drawer,
+:global(.byline-admin-user-drawer) {
+  /* width handled via uikit prop */
+}
+
+@media (min-width: 48rem) {
+  .drawer,
+  :global(.byline-admin-user-drawer) {
+    width: 500px;
+  }
+}
+
+.drawerLarge,
+:global(.byline-admin-user-drawer-large) {
+  /* width handled via uikit prop */
+}
+
+@media (min-width: 48rem) {
+  .drawerLarge,
+  :global(.byline-admin-user-drawer-large) {
+    width: 700px;
+  }
+}
+
+@media (min-width: 66rem) {
+  .drawerLarge,
+  :global(.byline-admin-user-drawer-large) {
+    width: 800px;
+  }
+}
+
+.drawerScroll,
+:global(.byline-admin-user-drawer-scroll) {
+  max-height: calc(100vh - 160px);
+  overflow-y: auto;
+}
+
+.modal,
+:global(.byline-admin-user-modal) {
+  /* default sizing */
+}
+
+@media (min-width: 40rem) {
+  .modal,
+  :global(.byline-admin-user-modal) {
+    margin-bottom: 6rem;
+    max-width: 550px;
+  }
+}
+
+.modalHead,
+:global(.byline-admin-user-modal-head) {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 1rem;
+}