simple-react-app-kit/packages/search/src/results.tsx

import * as React from "react"
import { Command } from "cmdk"
import { useTranslate } from "@workspace/i18n"
import { Button } from "@workspace/ui/components/button"
import { ScrollArea } from "@workspace/ui/components/scroll-area"
import {
  CornerDownLeftIcon,
  FileTextIcon,
  LoaderCircleIcon,
} from "@workspace/ui/components/icon"

import { splitHighlightSegments } from "./highlight"
import { searchMessages } from "./messages"
import type { SearchResultGroup, SearchResultItem } from "./types"

export interface SearchResultsProps {
  groups: readonly SearchResultGroup[]
  hasMore: boolean
  isLoadingMore: boolean
  onLoadMore: VoidFunction
  onSelect: (item: SearchResultItem) => void
  query: string
}

export function SearchResults({
  groups,
  hasMore,
  isLoadingMore,
  onLoadMore,
  onSelect,
  query,
}: SearchResultsProps) {
  const t = useTranslate()

  return (
    <ScrollArea className="h-[min(65dvh,36rem)] p-4">
      <Command.List className="**:[[cmdk-list-sizer]]:space-y-6">
        {groups.map((group) => {
          if (group.items.length === 0) return null

          return (
            <Command.Group
              key={group.id}
              className="space-y-2 **:[[cmdk-group-heading]]:sticky **:[[cmdk-group-heading]]:top-0 **:[[cmdk-group-heading]]:z-2 **:[[cmdk-group-heading]]:flex **:[[cmdk-group-heading]]:items-center **:[[cmdk-group-heading]]:gap-2 **:[[cmdk-group-heading]]:bg-popover/90 **:[[cmdk-group-heading]]:py-2 **:[[cmdk-group-heading]]:backdrop-blur-xs **:[[cmdk-group-items]]:space-y-1"
              heading={
                <>
                  {group.icon}
                  <span className="font-semibold">{group.label}</span>
                  <span className="ms-auto text-xs text-muted-foreground">
                    {t(searchMessages.resultCount, {
                      count: group.total ?? group.items.length,
                    })}
                  </span>
                </>
              }
            >
              {group.items.map((item) => (
                <SearchResultRow
                  key={`${group.id}:${item.id}`}
                  item={item}
                  onSelect={onSelect}
                  query={query}
                />
              ))}
            </Command.Group>
          )
        })}
        {hasMore && (
          <div className="flex justify-center p-2">
            <Button
              type="button"
              variant="ghost"
              size="sm"
              disabled={isLoadingMore}
              onClick={onLoadMore}
            >
              {isLoadingMore && <LoaderCircleIcon className="animate-spin" />}
              {isLoadingMore
                ? t(searchMessages.loadingMore)
                : t(searchMessages.loadMore)}
            </Button>
          </div>
        )}
      </Command.List>
    </ScrollArea>
  )
}

function SearchResultRow({
  item,
  onSelect,
  query,
}: {
  item: SearchResultItem
  onSelect: (item: SearchResultItem) => void
  query: string
}) {
  const t = useTranslate()
  const value = [
    item.id,
    item.title,
    item.description,
    ...(item.meta ?? []),
    ...(item.keywords ?? []),
  ]
    .filter(Boolean)
    .join(" ")

  return (
    <Command.Item
      value={value}
      disabled={item.disabled}
      onSelect={() => onSelect(item)}
      className="group/search-result flex items-center gap-3 rounded-xl border border-border/55 bg-background p-3 shadow-xs transition-colors hover:bg-muted"
      aria-label={t(searchMessages.selectResult, { title: item.title })}
    >
      <ResultMedia item={item} />
      <span className="min-w-0 flex-1 text-left">
        <span className="block truncate">
          <HighlightedText text={item.title} query={query} />
        </span>
        {item.description && (
          <span className="block truncate text-sm text-muted-foreground">
            <HighlightedText text={item.description} query={query} />
          </span>
        )}
        {item.meta?.map((line) => (
          <span
            key={line}
            className="block truncate text-xs text-muted-foreground"
          >
            <HighlightedText text={line} query={query} />
          </span>
        ))}
      </span>
      <CornerDownLeftIcon className="shrink-0 text-accent opacity-0 transition-opacity group-hover/search-result:opacity-100 group-data-selected/search-result:opacity-100" />
    </Command.Item>
  )
}

function ResultMedia({ item }: { item: SearchResultItem }) {
  if (item.image) {
    return (
      <img
        src={item.image.src}
        alt={item.image.alt ?? ""}
        loading="lazy"
        className="size-10 shrink-0 self-start rounded-xl border bg-muted object-cover"
      />
    )
  }

  return (
    <span className="grid size-10 shrink-0 place-items-center self-start rounded-xl bg-muted text-muted-foreground">
      {item.icon ?? <FileTextIcon className="size-5" />}
    </span>
  )
}

function HighlightedText({ text, query }: { text: string; query: string }) {
  let offset = 0

  return splitHighlightSegments(text, query).map((segment) => {
    const key = `${offset}:${segment.highlighted ? "highlight" : "text"}`
    offset += segment.text.length

    return segment.highlighted ? (
      <mark key={key} className="rounded-sm bg-accent/15 px-0.5 text-accent">
        {segment.text}
      </mark>
    ) : (
      <React.Fragment key={key}>{segment.text}</React.Fragment>
    )
  })
}