Add dedicated bot, workspace and user settings pages

src/pages/admin/settings/(partials)/settings-list-row.tsx

@@ -1,4 +1,5 @@
 import type { ReactNode } from "react";
+import Link from "@moduletrace/twui/layout/Link";
 import Row from "@moduletrace/twui/layout/Row";
 import Span from "@moduletrace/twui/layout/Span";
 import Stack from "@moduletrace/twui/layout/Stack";
@@ -6,6 +7,10 @@ import Stack from "@moduletrace/twui/layout/Stack";
 type Props = {
     avatar: ReactNode;
     title: string;
+    /**
+     * Where the title links, for rows that open a page.
+     */
+    href?: string;
     /**
      * A word beside the title, e.g. "Default" or "You".
      */
@@ -21,15 +26,29 @@ type Props = {
  * One row of a settings list: an avatar, a title and one line about it,
  * then what can be done with it.
  */
-export default function SettingsListRow({ avatar, title, badge, subtitle, children }: Props) {
+export default function SettingsListRow({ avatar, title, href, badge, subtitle, children }: Props) {
+    const title_content = (
+        <Span className="text-sm font-bold leading-5 text-ink truncate w-full">
+            {title}
+            {badge ? <Span className="ml-2 text-[11px] font-bold leading-4 text-ink-secondary">{badge}</Span> : null}
+        </Span>
+    );
+
     return (
         <Row className="w-full min-h-14 gap-3! flex-nowrap items-center px-3 py-2">
             {avatar}
             <Stack className="grow min-w-0 gap-0!">
-                <Span className="text-sm font-bold leading-5 text-ink truncate w-full">
-                    {title}
-                    {badge ? <Span className="ml-2 text-[11px] font-bold leading-4 text-ink-secondary">{badge}</Span> : null}
-                </Span>
+                {href ? (
+                    <Link
+                        href={href}
+                        title={title}
+                        className="block min-w-0 border-0 leading-normal hover:opacity-100 hover:underline focus-visible:ring-2 focus-visible:ring-ink focus-visible:ring-offset-2 focus-visible:ring-offset-surface rounded-default-sm"
+                    >
+                        {title_content}
+                    </Link>
+                ) : (
+                    title_content
+                )}
                 {subtitle ? (
                     <Span className="text-xs leading-4 text-ink-secondary truncate w-full">{subtitle}</Span>
                 ) : null}