pr feedback

Author: KevinVandy

src/components/BlogAuthorFilter.tsx

@@ -1,9 +1,15 @@
-import { Select, type SelectOption } from '~/components/Select'
+import { Check, ChevronsUpDown } from 'lucide-react'
+import { twMerge } from 'tailwind-merge'
+import {
+  Dropdown,
+  DropdownContent,
+  DropdownItem,
+  DropdownSeparator,
+  DropdownTrigger,
+} from '~/components/Dropdown'
 import { findMaintainerByAuthorName } from '~/utils/authors'
 import authorFallbackAvatar from '~/images/author-fallback.svg'
 
-const ALL_AUTHORS_VALUE = 'all'
-
 function getAuthorAvatar(name: string): string {
   return findMaintainerByAuthorName(name)?.avatar ?? authorFallbackAvatar
 }
@@ -21,37 +27,107 @@ export function BlogAuthorFilter({
   onSelect,
   className,
 }: BlogAuthorFilterProps) {
-  const available: SelectOption[] = [
-    { label: 'All authors', value: ALL_AUTHORS_VALUE },
-    ...authors.map((name) => ({
-      label: name,
-      value: name,
-      logo: getAuthorAvatar(name),
-    })),
-  ]
-
-  // If the URL has an author that isn't in the post list, surface it anyway
-  // so the trigger renders and the user can still reset to "All authors".
-  if (
-    selected &&
-    selected !== ALL_AUTHORS_VALUE &&
-    !authors.includes(selected)
-  ) {
-    available.push({
-      label: selected,
-      value: selected,
-      logo: getAuthorAvatar(selected),
-    })
-  }
+  // Ignore URL values that don't correspond to a real author in the list.
+  const activeAuthor =
+    selected && authors.includes(selected) ? selected : undefined
 
   return (
-    <Select
-      className={className}
-      selected={selected ?? ALL_AUTHORS_VALUE}
-      available={available}
-      onSelect={(option) =>
-        onSelect(option.value === ALL_AUTHORS_VALUE ? undefined : option.value)
-      }
-    />
+    <div className={twMerge('w-full', className)}>
+      <Dropdown>
+        <DropdownTrigger>
+          <button
+            type="button"
+            className={twMerge(
+              'relative w-full flex items-center gap-2 rounded-md py-1.5 px-2 text-left text-sm cursor-pointer transition-colors',
+              'focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500',
+              activeAuthor
+                ? 'bg-blue-50 dark:bg-blue-950/40 ring-1 ring-blue-500/50 text-blue-700 dark:text-blue-200'
+                : 'hover:bg-gray-500/10',
+            )}
+          >
+            <span
+              className={twMerge(
+                'flex items-center justify-center w-6 h-6 rounded border overflow-hidden flex-shrink-0',
+                activeAuthor ? 'border-blue-500/30' : 'border-gray-500/20',
+              )}
+            >
+              <img
+                height={20}
+                width={20}
+                src={
+                  activeAuthor
+                    ? getAuthorAvatar(activeAuthor)
+                    : authorFallbackAvatar
+                }
+                alt=""
+                className="w-full h-full object-cover"
+              />
+            </span>
+            <span className="truncate font-medium flex-1">
+              {activeAuthor ?? 'All authors'}
+            </span>
+            <span className="flex items-center pr-1">
+              <ChevronsUpDown
+                className="h-4 w-4 opacity-40"
+                aria-hidden="true"
+              />
+            </span>
+          </button>
+        </DropdownTrigger>
+        <DropdownContent
+          align="start"
+          className="max-h-80 overflow-auto min-w-[16rem]"
+        >
+          <DropdownItem
+            onSelect={() => onSelect(undefined)}
+            className={twMerge(
+              'pr-8 relative',
+              !activeAuthor
+                ? 'bg-blue-50 dark:bg-blue-900/30 text-blue-700 dark:text-blue-200 font-medium'
+                : 'font-normal',
+            )}
+          >
+            <span className="truncate">All authors</span>
+            {!activeAuthor ? (
+              <Check
+                className="h-4 w-4 absolute right-2 text-blue-600 dark:text-blue-300"
+                aria-hidden="true"
+              />
+            ) : null}
+          </DropdownItem>
+          {authors.length > 0 ? <DropdownSeparator /> : null}
+          {authors.map((name) => {
+            const isSelected = activeAuthor === name
+            return (
+              <DropdownItem
+                key={name}
+                onSelect={() => onSelect(name)}
+                className={twMerge(
+                  'pr-8 pl-2 relative',
+                  isSelected
+                    ? 'bg-blue-50 dark:bg-blue-900/30 text-blue-700 dark:text-blue-200 font-medium'
+                    : 'font-normal',
+                )}
+              >
+                <img
+                  height={20}
+                  width={20}
+                  src={getAuthorAvatar(name)}
+                  alt=""
+                  className="w-5 h-5 rounded object-cover flex-shrink-0"
+                />
+                <span className="truncate">{name}</span>
+                {isSelected ? (
+                  <Check
+                    className="h-4 w-4 absolute right-2 text-blue-600 dark:text-blue-300"
+                    aria-hidden="true"
+                  />
+                ) : null}
+              </DropdownItem>
+            )
+          })}
+        </DropdownContent>
+      </Dropdown>
+    </div>
   )
 }

src/libraries/maintainers.ts

@@ -38,9 +38,11 @@ export const allMaintainers: Maintainer[] = [
       'ranger',
       'store',
       'pacer',
+      'cli',
       'mcp',
       'react-charts',
     ],
+    maintainerOf: ['intent'],
     frameworkExpertise: ['react', 'solid'],
     specialties: ['Architecture', 'Core API', 'Documentation'],
     social: {
@@ -162,7 +164,7 @@ export const allMaintainers: Maintainer[] = [
     isCoreMaintainer: true,
     avatar: 'https://github.com/KyleAMathews.png',
     github: 'KyleAMathews',
-    creatorOf: ['db'],
+    creatorOf: ['db', 'intent'],
     frameworkExpertise: ['react'],
     specialties: ['Sync Engines'],
   },
@@ -306,6 +308,7 @@ export const allMaintainers: Maintainer[] = [
     name: 'Sarah Gerrard',
     avatar: 'https://github.com/ladybluenotes.png',
     github: 'ladybluenotes',
+    creatorOf: ['intent'],
     contributorOf: [
       'ai',
       'config',