zudoku 0.65.3 → 0.66.0

package/src/lib/plugins/search-pagefind/PagefindSearch.tsx

@@ -1,14 +1,15 @@
 import { VisuallyHidden } from "@radix-ui/react-visually-hidden";
 import { keepPreviousData, useQuery } from "@tanstack/react-query";
-import { useRef, useState } from "react";
+import { ListPlusIcon } from "lucide-react";
+import { lazy, useEffect, useRef, useState } from "react";
 import { Button } from "zudoku/ui/Button.js";
-import { Callout } from "zudoku/ui/Callout.js";
 import {
   CommandDialog,
   CommandEmpty,
   CommandInput,
 } from "zudoku/ui/Command.js";
 import { DialogTitle } from "zudoku/ui/Dialog.js";
+import { Kbd, KbdGroup } from "zudoku/ui/Kbd.js";
 import { useAuthState } from "../../authentication/state.js";
 import { useZudoku } from "../../components/context/ZudokuContext.js";
 import { SEARCH_PROTECTED_SECTION } from "../../core/RouteGuard.js";
@@ -18,6 +19,8 @@ import type { PagefindOptions } from "./index.js";
 import { ResultList } from "./ResultList.js";
 import type { Pagefind } from "./types.js";
 
+const IndexingDialog = lazy(() => import("./IndexingDialog.js"));
+
 const DEFAULT_RANKING = {
   // Slightly lower than default because API docs tend to have repetitive terms (parameter names, HTTP methods, etc.)
   termFrequency: 0.8,
@@ -81,6 +84,7 @@ export const PagefindSearch = ({
 }) => {
   const { pagefind, error, isError } = usePagefind(options);
   const [searchTerm, setSearchTerm] = useState("");
+  const [selectedValue, setSelectedValue] = useState<string>("");
   const auth = useAuthState();
   const context = useZudoku();
   const inputRef = useRef<HTMLInputElement>(null);
@@ -100,9 +104,24 @@ export const PagefindSearch = ({
     enabled: !!pagefind && !!searchTerm,
   });
 
+  useEffect(() => {
+    if (!searchResults?.length) return;
+
+    const firstResult = searchResults.at(0);
+    if (!firstResult) return;
+
+    const firstValue = `${firstResult.meta.title}-${firstResult.url}`;
+    setSelectedValue(firstValue);
+  }, [searchResults]);
+
   return (
     <CommandDialog
-      command={{ shouldFilter: false }}
+      command={{
+        shouldFilter: false,
+        loop: true,
+        value: selectedValue,
+        onValueChange: setSelectedValue,
+      }}
       content={{ className: "max-w-[750px]" }}
       open={isOpen}
       onOpenChange={onClose}
@@ -135,28 +154,48 @@ export const PagefindSearch = ({
           "Start typing to search"
         )}
       </CommandEmpty>
-      {isError ? (
+      {isError && error.message !== "NOT_BUILT_YET" ? (
         <div className="p-4 text-sm">
-          {error.message === "NOT_BUILT_YET" ? (
-            <Callout type="info">
-              Search is currently not available in development mode by default.
-              <br />
-              To still use search in development, run <code>zudoku build</code>{" "}
-              and copy the <code>dist/pagefind</code> directory to your{" "}
-              <code>public</code> directory.
-            </Callout>
-          ) : (
-            "An error occurred while loading search."
-          )}
+          An error occurred while loading search.
         </div>
       ) : (
-        <ResultList
-          basePath={context.options.basePath}
-          searchResults={searchResults ?? []}
-          searchTerm={searchTerm}
-          onClose={onClose}
-          maxSubResults={options.maxSubResults}
-        />
+        <>
+          <ResultList
+            basePath={context.options.basePath}
+            searchResults={searchResults ?? []}
+            searchTerm={searchTerm}
+            onClose={onClose}
+            maxSubResults={options.maxSubResults}
+          />
+          <div className="flex justify-between p-2 items-center">
+            <div className="flex items-center text-xs text-muted-foreground">
+              <KbdGroup className="ms-0 me-1">
+                <Kbd>↑</Kbd>
+                <Kbd>↓</Kbd>
+              </KbdGroup>
+              Navigate
+              <KbdGroup className="ms-4 me-1">
+                <Kbd>↵</Kbd>
+              </KbdGroup>
+              Select
+              <KbdGroup className="ms-4 me-1">
+                <Kbd>Esc</Kbd>
+              </KbdGroup>
+              Close dialog
+            </div>
+            {import.meta.env.DEV && (
+              <IndexingDialog>
+                <Button
+                  variant="outline"
+                  className="h-7 text-xs text-muted-foreground"
+                >
+                  <ListPlusIcon />
+                  Build Search Index
+                </Button>
+              </IndexingDialog>
+            )}
+          </div>
+        </>
       )}
     </CommandDialog>
   );

package/src/lib/plugins/search-pagefind/ResultList.tsx

@@ -35,9 +35,9 @@ export const ResultList = ({
   const navigate = useNavigate();
   const commandListRef = useRef<HTMLDivElement | null>(null);
 
-  // biome-ignore lint/correctness/useExhaustiveDependencies: Only scroll to top when search term changes
   useLayoutEffect(() => {
-    requestIdleCallback(() => {
+    if (!searchTerm) return;
+    requestAnimationFrame(() => {
       commandListRef.current?.scrollTo({ top: 0 });
     });
   }, [searchTerm]);
@@ -77,6 +77,11 @@ export const ResultList = ({
                 ) : (
                   <FileTextIcon />
                 )}
+                {result.meta.category && (
+                  <span className="text-muted-foreground">
+                    {result.meta.category} &rsaquo;{" "}
+                  </span>
+                )}
                 {result.meta.title}
               </Link>
             </CommandItem>
@@ -98,7 +103,7 @@ export const ResultList = ({
                     <div className="flex flex-col items-start gap-2 ms-2.5 ps-5 border-l border-muted-foreground/50">
                       <span className="font-bold">{subResult.title}</span>
                       <span
-                        className="text-[13px] [&_mark]:bg-primary [&_mark]:text-primary-foreground"
+                        className="line-clamp-2 text-[13px] [&_mark]:bg-primary [&_mark]:text-primary-foreground"
                         // biome-ignore lint/security/noDangerouslySetInnerHtml: Pagefind provides sanitized HTML
                         dangerouslySetInnerHTML={{ __html: subResult.excerpt }}
                       />

package/src/lib/shiki.ts

@@ -25,18 +25,27 @@ export const HIGHLIGHT_CODE_BLOCK_CLASS =
   "overflow-x-auto scrollbar not-inline";
 
 const engine = createJavaScriptRegexEngine({ forgiving: true });
-export const highlighter = await createHighlighterCore({
-  engine,
-  langAlias: {
-    markup: "html",
-    svg: "xml",
-    mathml: "xml",
-    atom: "xml",
-    ssml: "xml",
-    rss: "xml",
-    webmanifest: "json",
-  },
-});
+
+const shikiPromise = import.meta.hot?.data.shiki
+  ? import.meta.hot.data.shiki
+  : createHighlighterCore({
+      engine,
+      langAlias: {
+        markup: "html",
+        svg: "xml",
+        mathml: "xml",
+        atom: "xml",
+        ssml: "xml",
+        rss: "xml",
+        webmanifest: "json",
+      },
+    });
+
+if (import.meta.hot) {
+  import.meta.hot.data.shiki = shikiPromise;
+}
+
+export const highlighter = await shikiPromise;
 
 type ThemesRecord = CodeOptionsMultipleThemes<BundledTheme>["themes"];
 

package/src/lib/ui/Button.tsx

@@ -4,21 +4,19 @@ import * as React from "react";
 import { cn } from "../util/cn.js";
 
 export const buttonVariants = cva(
-  "not-prose inline-flex shrink-0 items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
+  "not-prose inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
   {
     variants: {
       variant: {
-        default:
-          "bg-primary text-primary-foreground shadow-sm hover:bg-primary/90",
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
         destructive:
-          "bg-destructive text-destructive-foreground shadow-xs hover:bg-destructive/90",
+          "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
         outline:
-          "border border-input bg-background shadow-xs hover:bg-accent hover:text-accent-foreground",
+          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
         secondary:
-          "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
-        ghost: "hover:bg-accent hover:text-accent-foreground",
-        "ghost-destructive":
-          "text-destructive hover:bg-destructive hover:text-destructive-foreground",
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost:
+          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
         link: "text-primary underline-offset-4 hover:underline",
         expand:
           "flex gap-1.5 border bg-transparent rounded-xl text-muted-foreground hover:text-foreground",
@@ -29,8 +27,10 @@ export const buttonVariants = cva(
         lg: "h-10 rounded-md px-8",
         xl: "h-14 rounded-lg px-10 text-lg",
         icon: "size-9",
-        "icon-xs": "size-7",
         "icon-xxs": "size-5",
+        "icon-xs": "size-7",
+        "icon-sm": "size-8",
+        "icon-lg": "size-10",
       },
     },
     defaultVariants: {

package/src/lib/ui/ButtonGroup.tsx

@@ -0,0 +1,82 @@
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "../util/cn.js";
+import { Separator } from "./Separator.js";
+
+const buttonGroupVariants = cva(
+  "flex w-fit items-stretch [&>*]:focus-visible:z-10 [&>*]:focus-visible:relative [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md has-[>[data-slot=button-group]]:gap-2",
+  {
+    variants: {
+      orientation: {
+        horizontal:
+          "[&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none",
+        vertical:
+          "flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none",
+      },
+    },
+    defaultVariants: {
+      orientation: "horizontal",
+    },
+  },
+);
+
+function ButtonGroup({
+  className,
+  orientation,
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof buttonGroupVariants>) {
+  return (
+    <div
+      role="group"
+      data-slot="button-group"
+      data-orientation={orientation}
+      className={cn(buttonGroupVariants({ orientation }), className)}
+      {...props}
+    />
+  );
+}
+
+function ButtonGroupText({
+  className,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"div"> & {
+  asChild?: boolean;
+}) {
+  const Comp = asChild ? Slot : "div";
+
+  return (
+    <Comp
+      className={cn(
+        "bg-muted flex items-center gap-2 rounded-md border px-4 text-sm font-medium shadow-xs [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function ButtonGroupSeparator({
+  className,
+  orientation = "vertical",
+  ...props
+}: React.ComponentProps<typeof Separator>) {
+  return (
+    <Separator
+      data-slot="button-group-separator"
+      orientation={orientation}
+      className={cn(
+        "bg-input relative m-0! self-stretch data-[orientation=vertical]:h-auto",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export {
+  ButtonGroup,
+  ButtonGroupSeparator,
+  ButtonGroupText,
+  buttonGroupVariants,
+};

package/src/lib/ui/Command.tsx

@@ -1,6 +1,6 @@
 import type { DialogProps } from "@radix-ui/react-dialog";
 import { Command as CommandPrimitive } from "cmdk";
-import { Search } from "lucide-react";
+import { SearchIcon } from "lucide-react";
 import type { ComponentPropsWithoutRef } from "react";
 import * as React from "react";
 import { Dialog, DialogContent } from "zudoku/ui/Dialog.js";
@@ -58,8 +58,8 @@ const CommandInput = React.forwardRef<
   React.ElementRef<typeof CommandPrimitive.Input>,
   React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
 >(({ className, ...props }, ref) => (
-  <div className="flex items-center border-b px-3" cmdk-input-wrapper="">
-    <Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
+  <div className="flex items-center gap-2 border-b px-3" cmdk-input-wrapper="">
+    <SearchIcon className="size-4! shrink-0 opacity-50" />
     <CommandPrimitive.Input
       ref={ref}
       className={cn(