From 7f754f91fd67fbd70c6e9199bd0755bd910adcbf Mon Sep 17 00:00:00 2001
From: Bram Borggreve <beeman@beeman.nl>
Date: Wed, 17 Jan 2024 21:54:51 +0000
Subject: [PATCH] feat: implement user autocomplete fields

---
 .../lib/helpers/get-user-user-where.input.ts  |  8 ++-
 .../dev/feature/src/lib/dev-admin-routes.tsx  |  2 +
 .../feature/src/lib/dev-user-autocomplete.tsx | 66 +++++++++++++++++++
 libs/web/ui/core/src/index.ts                 |  1 +
 .../ui/core/src/lib/ui-select-enum-option.tsx | 19 ++++++
 .../src/lib/use-admin-find-many-user.ts       | 21 ++++--
 .../src/lib/use-user-find-many-user.ts        | 21 +++++-
 .../src/lib/admin-user-list-feature.tsx       | 23 ++-----
 .../src/lib/admin-user-ui-select-role.tsx     | 18 +++++
 .../src/lib/admin-user-ui-select-status.tsx   | 18 +++++
 libs/web/user/ui/src/index.ts                 |  4 ++
 .../user/ui/src/lib/admin-user-ui-search.tsx  | 12 ++++
 .../user/ui/src/lib/admin-user-ui-table.tsx   | 26 +-------
 .../user/ui/src/lib/user-ui-autocomplete.tsx  | 60 +++++++++++++++++
 libs/web/user/ui/src/lib/user-ui-avatar.tsx   | 10 ++-
 libs/web/user/ui/src/lib/user-ui-search.tsx   | 12 ++++
 libs/web/user/ui/src/lib/user-ui-title.tsx    | 41 ++++++++++++
 17 files changed, 304 insertions(+), 58 deletions(-)
 create mode 100644 libs/web/dev/feature/src/lib/dev-user-autocomplete.tsx
 create mode 100644 libs/web/ui/core/src/lib/ui-select-enum-option.tsx
 create mode 100644 libs/web/user/feature/src/lib/admin-user-ui-select-role.tsx
 create mode 100644 libs/web/user/feature/src/lib/admin-user-ui-select-status.tsx
 create mode 100644 libs/web/user/ui/src/lib/admin-user-ui-search.tsx
 create mode 100644 libs/web/user/ui/src/lib/user-ui-autocomplete.tsx
 create mode 100644 libs/web/user/ui/src/lib/user-ui-search.tsx
 create mode 100644 libs/web/user/ui/src/lib/user-ui-title.tsx

diff --git a/libs/api/user/data-access/src/lib/helpers/get-user-user-where.input.ts b/libs/api/user/data-access/src/lib/helpers/get-user-user-where.input.ts
index 7ff9900..5778e5c 100644
--- a/libs/api/user/data-access/src/lib/helpers/get-user-user-where.input.ts
+++ b/libs/api/user/data-access/src/lib/helpers/get-user-user-where.input.ts
@@ -1,8 +1,12 @@
-import { Prisma } from '@prisma/client'
+import { Prisma, UserStatus } from '@prisma/client'
 import { UserFindManyUserInput } from '../dto/user-find-many-user.input'
 
 export function getUserUserWhereInput(input: UserFindManyUserInput): Prisma.UserWhereInput {
-  const where: Prisma.UserWhereInput = {}
+  const where: Prisma.UserWhereInput = {
+    status: {
+      in: [UserStatus.Active],
+    },
+  }
 
   if (input.search) {
     where.OR = [
diff --git a/libs/web/dev/feature/src/lib/dev-admin-routes.tsx b/libs/web/dev/feature/src/lib/dev-admin-routes.tsx
index 94fba96..d02c521 100644
--- a/libs/web/dev/feature/src/lib/dev-admin-routes.tsx
+++ b/libs/web/dev/feature/src/lib/dev-admin-routes.tsx
@@ -1,6 +1,7 @@
 import { UiContainer, UiTabRoutes } from '@pubkey-ui/core'
 import { DevIdentityWizard } from './dev-identity-wizard'
 import { DevNew } from './dev-new'
+import { DevUserAutocomplete } from './dev-user-autocomplete'
 
 export default function DevAdminRoutes() {
   return (
@@ -10,6 +11,7 @@ export default function DevAdminRoutes() {
         tabs={[
           { path: 'new', label: 'New', element: <DevNew /> },
           { path: 'identity-wizard', label: 'Identity Wizard', element: <DevIdentityWizard /> },
+          { path: 'user-autocomplete', label: 'User Autocomplete', element: <DevUserAutocomplete /> },
         ]}
       />
     </UiContainer>
diff --git a/libs/web/dev/feature/src/lib/dev-user-autocomplete.tsx b/libs/web/dev/feature/src/lib/dev-user-autocomplete.tsx
new file mode 100644
index 0000000..c75aac3
--- /dev/null
+++ b/libs/web/dev/feature/src/lib/dev-user-autocomplete.tsx
@@ -0,0 +1,66 @@
+import { SimpleGrid, Text } from '@mantine/core'
+import type { User } from '@pubkey-stack/sdk'
+import { AdminUserUiSearch, UserUiAvatar, UserUiSearch, UserUiTitle } from '@pubkey-stack/web-user-ui'
+import { UiCard, UiDebug, UiInfo, UiStack } from '@pubkey-ui/core'
+import { useState } from 'react'
+
+export function DevUserAutocomplete() {
+  const [adminResult, setAdminResult] = useState<User | undefined>(undefined)
+  const [userResult, setUserResult] = useState<User | undefined>(undefined)
+
+  return (
+    <UiStack>
+      <UiCard>
+        <UiStack>
+          <UiInfo title="AdminUserUiSearch" message="Search for a user as an admin (all users will be shown)" />
+          <AdminUserUiSearch select={setAdminResult} />
+          {adminResult ? <ShowUserItems user={adminResult} /> : null}
+        </UiStack>
+      </UiCard>
+      <UiCard>
+        <UiStack>
+          <UiInfo title="UserUiSearch" message="Search for a user as a normal user. Only active users are shown" />
+          <UserUiSearch select={setUserResult} />
+          {userResult ? <ShowUserItems user={userResult} /> : null}
+        </UiStack>
+      </UiCard>
+    </UiStack>
+  )
+}
+
+function ShowUserItems({ user }: { user: User }) {
+  return (
+    <UiStack>
+      <SimpleGrid cols={3}>
+        <UiCard
+          title={
+            <Text size="sm" c="dimmed">
+              UserUiTitle with link
+            </Text>
+          }
+        >
+          <UserUiTitle user={user} to={user.profileUrl} />
+        </UiCard>
+        <UiCard
+          title={
+            <Text size="sm" c="dimmed">
+              UserUiTitle
+            </Text>
+          }
+        >
+          <UserUiTitle user={user} />
+        </UiCard>
+        <UiCard
+          title={
+            <Text size="sm" c="dimmed">
+              UserUiAvatar
+            </Text>
+          }
+        >
+          <UserUiAvatar user={user} />
+        </UiCard>
+      </SimpleGrid>
+      <UiDebug data={user} />
+    </UiStack>
+  )
+}
diff --git a/libs/web/ui/core/src/index.ts b/libs/web/ui/core/src/index.ts
index b1f3704..7abeeab 100644
--- a/libs/web/ui/core/src/index.ts
+++ b/libs/web/ui/core/src/index.ts
@@ -3,3 +3,4 @@ export * from './lib/ui-header-profile'
 export * from './lib/ui-modal-button'
 export * from './lib/ui-page-limit'
 export * from './lib/ui-search-field'
+export * from './lib/ui-select-enum-option'
diff --git a/libs/web/ui/core/src/lib/ui-select-enum-option.tsx b/libs/web/ui/core/src/lib/ui-select-enum-option.tsx
new file mode 100644
index 0000000..3d660a9
--- /dev/null
+++ b/libs/web/ui/core/src/lib/ui-select-enum-option.tsx
@@ -0,0 +1,19 @@
+import { Select } from '@mantine/core'
+
+export function UiSelectEnumOption<T>({
+  value,
+  onChange,
+  options,
+}: {
+  value: T | undefined
+  onChange: (value: T | undefined) => void
+  options: { value: string; label: string }[]
+}) {
+  return (
+    <Select
+      value={value?.toString() ?? ''}
+      onChange={(value) => onChange(value === '' ? undefined : (value as T))}
+      data={options}
+    />
+  )
+}
diff --git a/libs/web/user/data-access/src/lib/use-admin-find-many-user.ts b/libs/web/user/data-access/src/lib/use-admin-find-many-user.ts
index 7fd093e..5fdb04a 100644
--- a/libs/web/user/data-access/src/lib/use-admin-find-many-user.ts
+++ b/libs/web/user/data-access/src/lib/use-admin-find-many-user.ts
@@ -4,12 +4,12 @@ import { toastError, toastSuccess } from '@pubkey-ui/core'
 import { useQuery } from '@tanstack/react-query'
 import { useState } from 'react'
 
-export function useAdminFindManyUser() {
+export function useAdminFindManyUser(props?: AdminFindManyUserInput) {
   const sdk = useSdk()
   const [role, setRole] = useState<UserRole | undefined>(undefined)
   const [status, setStatus] = useState<UserStatus | undefined>(undefined)
-  const [limit, setLimit] = useState(10)
-  const [page, setPage] = useState(1)
+  const [limit, setLimit] = useState(props?.limit ?? 10)
+  const [page, setPage] = useState(props?.page ?? 1)
   const [search, setSearch] = useState<string>('')
 
   const input: AdminFindManyUserInput = { limit, page, role, search, status }
@@ -32,9 +32,18 @@ export function useAdminFindManyUser() {
       setLimit,
       setPage,
     },
-    setRole,
-    setSearch,
-    setStatus,
+    setRole: (role: UserRole | undefined) => {
+      setPage(1)
+      setRole(role)
+    },
+    setSearch: (search: string) => {
+      setPage(1)
+      setSearch(search)
+    },
+    setStatus: (status: UserStatus | undefined) => {
+      setPage(1)
+      setStatus(status)
+    },
     createUser: (input: AdminCreateUserInput) =>
       sdk
         .adminCreateUser({ input })
diff --git a/libs/web/user/data-access/src/lib/use-user-find-many-user.ts b/libs/web/user/data-access/src/lib/use-user-find-many-user.ts
index 6450104..a59043e 100644
--- a/libs/web/user/data-access/src/lib/use-user-find-many-user.ts
+++ b/libs/web/user/data-access/src/lib/use-user-find-many-user.ts
@@ -1,18 +1,33 @@
 import { UserFindManyUserInput } from '@pubkey-stack/sdk'
 import { useSdk } from '@pubkey-stack/web-core-data-access'
 import { useQuery } from '@tanstack/react-query'
+import { useState } from 'react'
 
-export function useUserFindManyUser(input: UserFindManyUserInput) {
+export function useUserFindManyUser(props?: UserFindManyUserInput) {
   const sdk = useSdk()
+  const [limit, setLimit] = useState(props?.limit ?? 10)
+  const [page, setPage] = useState(props?.page ?? 1)
+  const [search, setSearch] = useState<string>('')
+
+  const input: UserFindManyUserInput = { limit, page, search }
   const query = useQuery({
     queryKey: ['user', 'find-many-user', input],
     queryFn: () => sdk.userFindManyUser({ input }).then((res) => res.data),
     retry: 0,
   })
+  const total = query.data?.paging.meta?.totalCount ?? 0
+  const items = query.data?.paging.data ?? []
 
   return {
-    data: query.data?.paging.data ?? [],
-    meta: query.data?.paging.meta,
+    items,
     query,
+    pagination: {
+      limit,
+      page,
+      total,
+      setLimit,
+      setPage,
+    },
+    setSearch,
   }
 }
diff --git a/libs/web/user/feature/src/lib/admin-user-list-feature.tsx b/libs/web/user/feature/src/lib/admin-user-list-feature.tsx
index 693a46e..09ad165 100644
--- a/libs/web/user/feature/src/lib/admin-user-list-feature.tsx
+++ b/libs/web/user/feature/src/lib/admin-user-list-feature.tsx
@@ -1,10 +1,11 @@
-import { Button, Group, Select } from '@mantine/core'
-import { getEnumOptions, UserRole, UserStatus } from '@pubkey-stack/sdk'
+import { Button, Group } from '@mantine/core'
 import { UiPageLimit, UiSearchField } from '@pubkey-stack/web-ui-core'
 import { useAdminFindManyUser } from '@pubkey-stack/web-user-data-access'
 import { AdminUserUiTable } from '@pubkey-stack/web-user-ui'
 import { UiBack, UiDebugModal, UiInfo, UiLoader, UiPage } from '@pubkey-ui/core'
 import { Link } from 'react-router-dom'
+import { AdminUserUiSelectRole } from './admin-user-ui-select-role'
+import { AdminUserUiSelectStatus } from './admin-user-ui-select-status'
 
 export function AdminUserListFeature() {
   const { deleteUser, items, pagination, query, role, setRole, setSearch, setStatus, status } = useAdminFindManyUser()
@@ -24,22 +25,8 @@ export function AdminUserListFeature() {
     >
       <Group>
         <UiSearchField placeholder="Search user" setSearch={setSearch} />
-        <Select
-          value={role?.toString() ?? ''}
-          onChange={(role) => {
-            pagination.setPage(1)
-            setRole(role === '' ? undefined : (role as UserRole))
-          }}
-          data={[{ value: '', label: 'Filter by role' }, ...getEnumOptions(UserRole)]}
-        />
-        <Select
-          value={status?.toString() ?? ''}
-          onChange={(status) => {
-            pagination.setPage(1)
-            setStatus(status === '' ? undefined : (status as UserStatus))
-          }}
-          data={[{ value: '', label: 'Filter by status' }, ...getEnumOptions(UserStatus)]}
-        />
+        <AdminUserUiSelectRole value={role} onChange={setRole} />
+        <AdminUserUiSelectStatus value={status} onChange={setStatus} />
         <UiPageLimit limit={pagination.limit} setLimit={pagination.setLimit} setPage={pagination.setPage} />
       </Group>
 
diff --git a/libs/web/user/feature/src/lib/admin-user-ui-select-role.tsx b/libs/web/user/feature/src/lib/admin-user-ui-select-role.tsx
new file mode 100644
index 0000000..250c5c8
--- /dev/null
+++ b/libs/web/user/feature/src/lib/admin-user-ui-select-role.tsx
@@ -0,0 +1,18 @@
+import { getEnumOptions, UserRole } from '@pubkey-stack/sdk'
+import { UiSelectEnumOption } from '@pubkey-stack/web-ui-core'
+
+export function AdminUserUiSelectRole({
+  value,
+  onChange,
+}: {
+  value: UserRole | undefined
+  onChange: (role: UserRole | undefined) => void
+}) {
+  return (
+    <UiSelectEnumOption<UserRole>
+      value={value}
+      onChange={onChange}
+      options={[{ value: '', label: 'Filter by role' }, ...getEnumOptions(UserRole)]}
+    />
+  )
+}
diff --git a/libs/web/user/feature/src/lib/admin-user-ui-select-status.tsx b/libs/web/user/feature/src/lib/admin-user-ui-select-status.tsx
new file mode 100644
index 0000000..7e447e1
--- /dev/null
+++ b/libs/web/user/feature/src/lib/admin-user-ui-select-status.tsx
@@ -0,0 +1,18 @@
+import { getEnumOptions, UserStatus } from '@pubkey-stack/sdk'
+import { UiSelectEnumOption } from '@pubkey-stack/web-ui-core'
+
+export function AdminUserUiSelectStatus({
+  value,
+  onChange,
+}: {
+  value: UserStatus | undefined
+  onChange: (value: UserStatus | undefined) => void
+}) {
+  return (
+    <UiSelectEnumOption<UserStatus>
+      value={value}
+      onChange={onChange}
+      options={[{ value: '', label: 'Filter by status' }, ...getEnumOptions(UserStatus)]}
+    />
+  )
+}
diff --git a/libs/web/user/ui/src/index.ts b/libs/web/user/ui/src/index.ts
index aac2481..63e49c9 100644
--- a/libs/web/user/ui/src/index.ts
+++ b/libs/web/user/ui/src/index.ts
@@ -1,8 +1,12 @@
 export * from './lib/admin-user-ui-create-form'
+export * from './lib/admin-user-ui-search'
 export * from './lib/admin-user-ui-table'
 export * from './lib/admin-user-ui-update-form'
+export * from './lib/user-ui-autocomplete'
 export * from './lib/user-ui-avatar'
 export * from './lib/user-ui-profile'
 export * from './lib/user-ui-role-badge'
+export * from './lib/user-ui-search'
 export * from './lib/user-ui-status-badge'
+export * from './lib/user-ui-title'
 export * from './lib/user-ui-update-form'
diff --git a/libs/web/user/ui/src/lib/admin-user-ui-search.tsx b/libs/web/user/ui/src/lib/admin-user-ui-search.tsx
new file mode 100644
index 0000000..6c63135
--- /dev/null
+++ b/libs/web/user/ui/src/lib/admin-user-ui-search.tsx
@@ -0,0 +1,12 @@
+import { useAdminFindManyUser } from '@pubkey-stack/web-user-data-access'
+import { UserUiAutocomplete, type UserUiAutocompleteProps } from './user-ui-autocomplete'
+
+export type AdminUserUiSearchProps = Omit<UserUiAutocompleteProps, 'items' | 'isLoading' | 'setSearch'>
+
+export function AdminUserUiSearch({ select, ...props }: AdminUserUiSearchProps) {
+  const { items, query, setSearch } = useAdminFindManyUser({ limit: 5 })
+
+  return (
+    <UserUiAutocomplete isLoading={query.isLoading} select={select} items={items} setSearch={setSearch} {...props} />
+  )
+}
diff --git a/libs/web/user/ui/src/lib/admin-user-ui-table.tsx b/libs/web/user/ui/src/lib/admin-user-ui-table.tsx
index 19e0031..dde44a0 100644
--- a/libs/web/user/ui/src/lib/admin-user-ui-table.tsx
+++ b/libs/web/user/ui/src/lib/admin-user-ui-table.tsx
@@ -1,13 +1,12 @@
-import { ActionIcon, Anchor, Group, ScrollArea, Stack, Text } from '@mantine/core'
+import { ActionIcon, Group, ScrollArea } from '@mantine/core'
 import { User } from '@pubkey-stack/sdk'
 import { IdentityUiAvatarGroup } from '@pubkey-stack/web-identity-ui'
-import { UiGroup } from '@pubkey-ui/core'
 import { IconPencil, IconTrash, IconUser } from '@tabler/icons-react'
 import { DataTable, DataTableProps } from 'mantine-datatable'
 import { Link } from 'react-router-dom'
-import { UserUiAvatar } from './user-ui-avatar'
 import { UserUiRoleBadge } from './user-ui-role-badge'
 import { UserUiStatusBadge } from './user-ui-status-badge'
+import { UserUiTitle } from './user-ui-title'
 
 interface AdminUserTableProps {
   users: User[]
@@ -39,26 +38,7 @@ export function AdminUserUiTable({
         columns={[
           {
             accessor: 'username',
-            render: (item) => {
-              const link = `/admin/users/${item.id}`
-              return (
-                <Group gap="sm" p={4}>
-                  <UserUiAvatar size={40} user={item} radius={50} />
-                  <Stack gap={1}>
-                    <UiGroup justify="left" gap={4} align="baseline">
-                      <Anchor component={Link} to={link} size="sm" fw={500}>
-                        {item.username}
-                      </Anchor>
-                    </UiGroup>
-                    {item.name ? (
-                      <Text component={Link} to={link} size="sm" color="dimmed">
-                        {item.name}
-                      </Text>
-                    ) : null}
-                  </Stack>
-                </Group>
-              )
-            },
+            render: (item) => <UserUiTitle user={item} to={`/admin/users/${item.id}`} />,
           },
           {
             accessor: 'identities',
diff --git a/libs/web/user/ui/src/lib/user-ui-autocomplete.tsx b/libs/web/user/ui/src/lib/user-ui-autocomplete.tsx
new file mode 100644
index 0000000..d594470
--- /dev/null
+++ b/libs/web/user/ui/src/lib/user-ui-autocomplete.tsx
@@ -0,0 +1,60 @@
+import { Autocomplete, type AutocompleteProps, CloseIcon, Loader } from '@mantine/core'
+import type { User } from '@pubkey-stack/sdk'
+import { IconUserSearch } from '@tabler/icons-react'
+
+import { useRef, useState } from 'react'
+import { UserUiAvatar } from './user-ui-avatar'
+
+export interface UserUiAutocompleteProps extends AutocompleteProps {
+  isLoading: boolean
+  items: User[]
+  setSearch: (val: string) => void
+  select: (user: User | undefined) => void
+}
+
+export function UserUiAutocomplete({ isLoading, items, select, setSearch, ...props }: UserUiAutocompleteProps) {
+  const timeoutRef = useRef<number>(-1)
+  const [value, setValue] = useState('')
+  const [user, setUser] = useState<User | undefined>(undefined)
+
+  function handleChange(val: string) {
+    window.clearTimeout(timeoutRef.current)
+    setValue(val)
+    setSearch(val)
+    setUser(undefined)
+    timeoutRef.current = window.setTimeout(() => {
+      select(undefined)
+      const user = items?.find((item) => item.username === val)
+      if (user) {
+        select(user)
+        setUser(user)
+      }
+    })
+  }
+
+  return (
+    <Autocomplete
+      label="Search"
+      placeholder="Search for a user"
+      value={value}
+      data={items?.map((item) => item.username + '')}
+      onChange={handleChange}
+      leftSection={user ? <UserUiAvatar user={user} size="sm" /> : <IconUserSearch />}
+      rightSection={
+        isLoading ? (
+          <Loader size="1rem" />
+        ) : value.length ? (
+          <CloseIcon
+            onClick={() => {
+              setUser(undefined)
+              setValue('')
+              setSearch('')
+              select(undefined)
+            }}
+          />
+        ) : null
+      }
+      {...props}
+    />
+  )
+}
diff --git a/libs/web/user/ui/src/lib/user-ui-avatar.tsx b/libs/web/user/ui/src/lib/user-ui-avatar.tsx
index 7b1483f..4e4de7a 100644
--- a/libs/web/user/ui/src/lib/user-ui-avatar.tsx
+++ b/libs/web/user/ui/src/lib/user-ui-avatar.tsx
@@ -2,14 +2,12 @@ import { Avatar, AvatarProps, Tooltip } from '@mantine/core'
 import { getRandomInt, User } from '@pubkey-stack/sdk'
 import { getColorByIndex } from '@pubkey-ui/core'
 
-export function UserUiAvatar({
-  user,
-  tooltipLabel,
-  ...props
-}: Omit<AvatarProps, 'src'> & {
+export type UserUiAvatarProps = Omit<AvatarProps, 'src'> & {
   user?: User
   tooltipLabel?: string
-}) {
+}
+
+export function UserUiAvatar({ user, tooltipLabel, ...props }: UserUiAvatarProps) {
   const firstLetter = user?.username?.charAt(0) ?? '?'
 
   const content = user?.avatarUrl?.length ? (
diff --git a/libs/web/user/ui/src/lib/user-ui-search.tsx b/libs/web/user/ui/src/lib/user-ui-search.tsx
new file mode 100644
index 0000000..ebb83e1
--- /dev/null
+++ b/libs/web/user/ui/src/lib/user-ui-search.tsx
@@ -0,0 +1,12 @@
+import { useUserFindManyUser } from '@pubkey-stack/web-user-data-access'
+import { UserUiAutocomplete, type UserUiAutocompleteProps } from './user-ui-autocomplete'
+
+export type UserUiSearchProps = Omit<UserUiAutocompleteProps, 'items' | 'isLoading' | 'setSearch'>
+
+export function UserUiSearch({ select, ...props }: UserUiSearchProps) {
+  const { items, query, setSearch } = useUserFindManyUser({ limit: 5 })
+
+  return (
+    <UserUiAutocomplete isLoading={query.isLoading} select={select} items={items} setSearch={setSearch} {...props} />
+  )
+}
diff --git a/libs/web/user/ui/src/lib/user-ui-title.tsx b/libs/web/user/ui/src/lib/user-ui-title.tsx
new file mode 100644
index 0000000..d763171
--- /dev/null
+++ b/libs/web/user/ui/src/lib/user-ui-title.tsx
@@ -0,0 +1,41 @@
+import { AvatarProps, Group, type GroupProps, Stack, Text } from '@mantine/core'
+import { User } from '@pubkey-stack/sdk'
+import { UiAnchor, type UiAnchorProps } from '@pubkey-ui/core'
+import { UserUiAvatar } from './user-ui-avatar'
+
+export function UserUiTitle({
+  anchorProps,
+  avatarProps,
+  groupProps,
+  user,
+  to,
+}: {
+  anchorProps?: UiAnchorProps
+  avatarProps?: Omit<AvatarProps, 'src'>
+  groupProps?: GroupProps
+  user?: User
+  to?: string | null
+}) {
+  if (!user) return null
+  const item = (
+    <Group gap="sm" {...groupProps}>
+      <UserUiAvatar user={user} {...avatarProps} />
+      <Stack gap={1}>
+        <Text size="sm" fw={500}>
+          {user?.username}
+        </Text>
+        {user.name ? (
+          <Text size="sm" c="dimmed">
+            {user.name}
+          </Text>
+        ) : null}
+      </Stack>
+    </Group>
+  )
+
+  return (
+    <UiAnchor to={to ?? undefined} underline="never" {...anchorProps}>
+      {item}
+    </UiAnchor>
+  )
+}