refactor(search): extract search into workspace package

2026-09-20 15:52:09 +08:00
parent e02c3dceb5
commit 1fc56b6982
34 changed files with 262 additions and 360 deletions
@@ -0,0 +1,175 @@
+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-primary 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-primary/15 px-0.5 text-primary">
+        {segment.text}
+      </mark>
+    ) : (
+      <React.Fragment key={key}>{segment.text}</React.Fragment>
+    )
+  })
+}