@gmickel/gno 0.7.0 → 0.8.1

package/src/serve/public/components/ShortcutHelpModal.tsx

@@ -0,0 +1,106 @@
+/**
+ * ShortcutHelpModal - Displays available keyboard shortcuts.
+ *
+ * Features:
+ * - Grouped by context (Global, Editor, Navigation)
+ * - Platform-appropriate modifier display
+ * - Triggered by Cmd+/ or help button
+ */
+
+import { KeyboardIcon } from "lucide-react";
+
+import { modKey } from "../hooks/useKeyboardShortcuts";
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "./ui/dialog";
+
+export interface ShortcutHelpModalProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}
+
+interface ShortcutItem {
+  keys: string;
+  description: string;
+}
+
+interface ShortcutGroup {
+  title: string;
+  shortcuts: ShortcutItem[];
+}
+
+const shortcutGroups: ShortcutGroup[] = [
+  {
+    title: "Global",
+    shortcuts: [
+      { keys: `${modKey}+N`, description: "New note" },
+      { keys: `${modKey}+K`, description: "Focus search" },
+      { keys: `${modKey}+/`, description: "Show shortcuts" },
+      { keys: "Esc", description: "Close modal" },
+    ],
+  },
+  {
+    title: "Editor",
+    shortcuts: [
+      { keys: `${modKey}+S`, description: "Save" },
+      { keys: `${modKey}+B`, description: "Bold" },
+      { keys: `${modKey}+I`, description: "Italic" },
+      { keys: `${modKey}+K`, description: "Insert link" },
+      { keys: "Esc", description: "Close editor" },
+    ],
+  },
+  {
+    title: "Navigation",
+    shortcuts: [{ keys: `${modKey}+Enter`, description: "Submit form" }],
+  },
+];
+
+export function ShortcutHelpModal({
+  open,
+  onOpenChange,
+}: ShortcutHelpModalProps) {
+  return (
+    <Dialog onOpenChange={onOpenChange} open={open}>
+      <DialogContent className="max-w-md">
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2">
+            <KeyboardIcon className="size-5" />
+            Keyboard Shortcuts
+          </DialogTitle>
+        </DialogHeader>
+
+        <div className="space-y-6">
+          {shortcutGroups.map((group) => (
+            <div key={group.title}>
+              <h3 className="mb-3 font-medium text-muted-foreground text-xs uppercase tracking-wider">
+                {group.title}
+              </h3>
+              <div className="space-y-2.5">
+                {group.shortcuts.map((shortcut) => (
+                  <div
+                    className="flex items-center justify-between rounded-md px-2 py-1.5 transition-colors hover:bg-muted/50"
+                    key={shortcut.keys}
+                  >
+                    <span className="text-sm">{shortcut.description}</span>
+                    <div className="flex items-center gap-1">
+                      {shortcut.keys.split("+").map((key, i) => (
+                        <span key={key}>
+                          {i > 0 && (
+                            <span className="mx-0.5 text-muted-foreground/50">
+                              +
+                            </span>
+                          )}
+                          <kbd className="inline-flex min-w-[1.75rem] items-center justify-center rounded border border-border/80 bg-gradient-to-b from-muted/80 to-muted px-1.5 py-0.5 font-mono text-[11px] text-foreground shadow-[0_2px_0_hsl(var(--border)),inset_0_1px_0_hsl(var(--background)/0.5)]">
+                            {key}
+                          </kbd>
+                        </span>
+                      ))}
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </div>
+          ))}
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/src/serve/public/components/ai-elements/code-block.tsx

@@ -1,4 +1,4 @@
-import { CheckIcon, CopyIcon } from 'lucide-react';
+import { CheckIcon, CopyIcon } from "lucide-react";
 import {
   type ComponentProps,
   createContext,
@@ -7,10 +7,11 @@ import {
   useEffect,
   useRef,
   useState,
-} from 'react';
-import { type BundledLanguage, codeToHtml, type ShikiTransformer } from 'shiki';
-import { cn } from '../../lib/utils';
-import { Button } from '../ui/button';
+} from "react";
+import { type BundledLanguage, codeToHtml, type ShikiTransformer } from "shiki";
+
+import { cn } from "../../lib/utils";
+import { Button } from "../ui/button";
 
 type CodeBlockProps = HTMLAttributes<HTMLDivElement> & {
   code: string;
@@ -23,26 +24,26 @@ interface CodeBlockContextType {
 }
 
 const CodeBlockContext = createContext<CodeBlockContextType>({
-  code: '',
+  code: "",
 });
 
 const lineNumberTransformer: ShikiTransformer = {
-  name: 'line-numbers',
+  name: "line-numbers",
   line(node, line) {
     node.children.unshift({
-      type: 'element',
-      tagName: 'span',
+      type: "element",
+      tagName: "span",
       properties: {
         className: [
-          'inline-block',
-          'min-w-10',
-          'mr-4',
-          'text-right',
-          'select-none',
-          'text-muted-foreground',
+          "inline-block",
+          "min-w-10",
+          "mr-4",
+          "text-right",
+          "select-none",
+          "text-muted-foreground",
         ],
       },
-      children: [{ type: 'text', value: String(line) }],
+      children: [{ type: "text", value: String(line) }],
     });
   },
 };
@@ -59,12 +60,12 @@ export async function highlightCode(
   return await Promise.all([
     codeToHtml(code, {
       lang: language,
-      theme: 'one-light',
+      theme: "one-light",
       transformers,
     }),
     codeToHtml(code, {
       lang: language,
-      theme: 'one-dark-pro',
+      theme: "one-dark-pro",
       transformers,
     }),
   ]);
@@ -78,21 +79,30 @@ export const CodeBlock = ({
   children,
   ...props
 }: CodeBlockProps) => {
-  const [html, setHtml] = useState<string>('');
-  const [darkHtml, setDarkHtml] = useState<string>('');
-  const mounted = useRef(false);
+  const [html, setHtml] = useState<string>("");
+  const [darkHtml, setDarkHtml] = useState<string>("");
+  const requestIdRef = useRef(0);
 
   useEffect(() => {
-    highlightCode(code, language, showLineNumbers).then(([light, dark]) => {
-      if (!mounted.current) {
+    let cancelled = false;
+    const requestId = ++requestIdRef.current;
+
+    async function highlight() {
+      const [light, dark] = await highlightCode(
+        code,
+        language,
+        showLineNumbers
+      );
+      // Only apply if this is still the latest request AND not cancelled
+      if (!cancelled && requestId === requestIdRef.current) {
         setHtml(light);
         setDarkHtml(dark);
-        mounted.current = true;
       }
-    });
+    }
 
+    void highlight();
     return () => {
-      mounted.current = false;
+      cancelled = true;
     };
   }, [code, language, showLineNumbers]);
 
@@ -100,7 +110,7 @@ export const CodeBlock = ({
     <CodeBlockContext.Provider value={{ code }}>
       <div
         className={cn(
-          'group relative w-full overflow-hidden rounded-md border bg-background text-foreground',
+          "group relative w-full overflow-hidden rounded-md border bg-background text-foreground",
           className
         )}
         {...props}
@@ -108,12 +118,12 @@ export const CodeBlock = ({
         <div className="relative">
           <div
             className="overflow-auto dark:hidden [&>pre]:m-0 [&>pre]:bg-background! [&>pre]:p-4 [&>pre]:text-foreground! [&>pre]:text-sm [&_code]:font-mono [&_code]:text-sm"
-            // biome-ignore lint/security/noDangerouslySetInnerHtml: "this is needed."
+            // oxlint-disable-next-line react/no-danger -- syntax highlighting requires innerHTML
             dangerouslySetInnerHTML={{ __html: html }}
           />
           <div
             className="hidden overflow-auto dark:block [&>pre]:m-0 [&>pre]:bg-background! [&>pre]:p-4 [&>pre]:text-foreground! [&>pre]:text-sm [&_code]:font-mono [&_code]:text-sm"
-            // biome-ignore lint/security/noDangerouslySetInnerHtml: "this is needed."
+            // oxlint-disable-next-line react/no-danger -- syntax highlighting requires innerHTML
             dangerouslySetInnerHTML={{ __html: darkHtml }}
           />
           {children && (
@@ -145,8 +155,8 @@ export const CodeBlockCopyButton = ({
   const { code } = useContext(CodeBlockContext);
 
   const copyToClipboard = async () => {
-    if (typeof window === 'undefined' || !navigator?.clipboard?.writeText) {
-      onError?.(new Error('Clipboard API not available'));
+    if (typeof window === "undefined" || !navigator?.clipboard?.writeText) {
+      onError?.(new Error("Clipboard API not available"));
       return;
     }
 
@@ -164,7 +174,7 @@ export const CodeBlockCopyButton = ({
 
   return (
     <Button
-      className={cn('shrink-0', className)}
+      className={cn("shrink-0", className)}
       onClick={copyToClipboard}
       size="icon"
       variant="ghost"

package/src/serve/public/components/ai-elements/conversation.tsx

@@ -1,15 +1,17 @@
-import { ArrowDownIcon } from 'lucide-react';
-import type { ComponentProps } from 'react';
-import { useCallback } from 'react';
-import { StickToBottom, useStickToBottomContext } from 'use-stick-to-bottom';
-import { cn } from '../../lib/utils';
-import { Button } from '../ui/button';
+import type { ComponentProps } from "react";
+
+import { ArrowDownIcon } from "lucide-react";
+import { useCallback } from "react";
+import { StickToBottom, useStickToBottomContext } from "use-stick-to-bottom";
+
+import { cn } from "../../lib/utils";
+import { Button } from "../ui/button";
 
 export type ConversationProps = ComponentProps<typeof StickToBottom>;
 
 export const Conversation = ({ className, ...props }: ConversationProps) => (
   <StickToBottom
-    className={cn('relative flex-1 overflow-y-hidden', className)}
+    className={cn("relative flex-1 overflow-y-hidden", className)}
     initial="smooth"
     resize="smooth"
     role="log"
@@ -26,12 +28,12 @@ export const ConversationContent = ({
   ...props
 }: ConversationContentProps) => (
   <StickToBottom.Content
-    className={cn('flex flex-col gap-8 p-4', className)}
+    className={cn("flex flex-col gap-8 p-4", className)}
     {...props}
   />
 );
 
-export type ConversationEmptyStateProps = ComponentProps<'div'> & {
+export type ConversationEmptyStateProps = ComponentProps<"div"> & {
   title?: string;
   description?: string;
   icon?: React.ReactNode;
@@ -39,15 +41,15 @@ export type ConversationEmptyStateProps = ComponentProps<'div'> & {
 
 export const ConversationEmptyState = ({
   className,
-  title = 'No messages yet',
-  description = 'Start a conversation to see messages here',
+  title = "No messages yet",
+  description = "Start a conversation to see messages here",
   icon,
   children,
   ...props
 }: ConversationEmptyStateProps) => (
   <div
     className={cn(
-      'flex size-full flex-col items-center justify-center gap-3 p-8 text-center',
+      "flex size-full flex-col items-center justify-center gap-3 p-8 text-center",
       className
     )}
     {...props}
@@ -75,14 +77,14 @@ export const ConversationScrollButton = ({
   const { isAtBottom, scrollToBottom } = useStickToBottomContext();
 
   const handleScrollToBottom = useCallback(() => {
-    scrollToBottom();
+    void scrollToBottom();
   }, [scrollToBottom]);
 
   return (
     !isAtBottom && (
       <Button
         className={cn(
-          'absolute bottom-4 left-[50%] translate-x-[-50%] rounded-full',
+          "absolute bottom-4 left-[50%] translate-x-[-50%] rounded-full",
           className
         )}
         onClick={handleScrollToBottom}

package/src/serve/public/components/ai-elements/inline-citation.tsx

@@ -1,4 +1,4 @@
-import { ArrowLeftIcon, ArrowRightIcon } from 'lucide-react';
+import { ArrowLeftIcon, ArrowRightIcon } from "lucide-react";
 import {
   type ComponentProps,
   createContext,
@@ -6,41 +6,42 @@ import {
   useContext,
   useEffect,
   useState,
-} from 'react';
-import { cn } from '../../lib/utils';
-import { Badge } from '../ui/badge';
+} from "react";
+
+import { cn } from "../../lib/utils";
+import { Badge } from "../ui/badge";
 import {
   Carousel,
   type CarouselApi,
   CarouselContent,
   CarouselItem,
-} from '../ui/carousel';
+} from "../ui/carousel";
 import {
   HoverCard,
   HoverCardContent,
   HoverCardTrigger,
-} from '../ui/hover-card';
+} from "../ui/hover-card";
 
-export type InlineCitationProps = ComponentProps<'span'>;
+export type InlineCitationProps = ComponentProps<"span">;
 
 export const InlineCitation = ({
   className,
   ...props
 }: InlineCitationProps) => (
   <span
-    className={cn('group inline items-center gap-1', className)}
+    className={cn("group inline items-center gap-1", className)}
     {...props}
   />
 );
 
-export type InlineCitationTextProps = ComponentProps<'span'>;
+export type InlineCitationTextProps = ComponentProps<"span">;
 
 export const InlineCitationText = ({
   className,
   ...props
 }: InlineCitationTextProps) => (
   <span
-    className={cn('transition-colors group-hover:bg-accent', className)}
+    className={cn("transition-colors group-hover:bg-accent", className)}
     {...props}
   />
 );
@@ -62,29 +63,29 @@ export const InlineCitationCardTrigger = ({
 }: InlineCitationCardTriggerProps) => (
   <HoverCardTrigger asChild>
     <Badge
-      className={cn('ml-1 rounded-full', className)}
+      className={cn("ml-1 rounded-full", className)}
       variant="secondary"
       {...props}
     >
       {sources[0] ? (
         <>
-          {new URL(sources[0]).hostname}{' '}
+          {new URL(sources[0]).hostname}{" "}
           {sources.length > 1 && `+${sources.length - 1}`}
         </>
       ) : (
-        'unknown'
+        "unknown"
       )}
     </Badge>
   </HoverCardTrigger>
 );
 
-export type InlineCitationCardBodyProps = ComponentProps<'div'>;
+export type InlineCitationCardBodyProps = ComponentProps<"div">;
 
 export const InlineCitationCardBody = ({
   className,
   ...props
 }: InlineCitationCardBodyProps) => (
-  <HoverCardContent className={cn('relative w-80 p-0', className)} {...props} />
+  <HoverCardContent className={cn("relative w-80 p-0", className)} {...props} />
 );
 
 const CarouselApiContext = createContext<CarouselApi | undefined>(undefined);
@@ -105,32 +106,32 @@ export const InlineCitationCarousel = ({
 
   return (
     <CarouselApiContext.Provider value={api}>
-      <Carousel className={cn('w-full', className)} setApi={setApi} {...props}>
+      <Carousel className={cn("w-full", className)} setApi={setApi} {...props}>
         {children}
       </Carousel>
     </CarouselApiContext.Provider>
   );
 };
 
-export type InlineCitationCarouselContentProps = ComponentProps<'div'>;
+export type InlineCitationCarouselContentProps = ComponentProps<"div">;
 
 export const InlineCitationCarouselContent = (
   props: InlineCitationCarouselContentProps
 ) => <CarouselContent {...props} />;
 
-export type InlineCitationCarouselItemProps = ComponentProps<'div'>;
+export type InlineCitationCarouselItemProps = ComponentProps<"div">;
 
 export const InlineCitationCarouselItem = ({
   className,
   ...props
 }: InlineCitationCarouselItemProps) => (
   <CarouselItem
-    className={cn('w-full space-y-2 p-4 pl-8', className)}
+    className={cn("w-full space-y-2 p-4 pl-8", className)}
     {...props}
   />
 );
 
-export type InlineCitationCarouselHeaderProps = ComponentProps<'div'>;
+export type InlineCitationCarouselHeaderProps = ComponentProps<"div">;
 
 export const InlineCitationCarouselHeader = ({
   className,
@@ -138,14 +139,14 @@ export const InlineCitationCarouselHeader = ({
 }: InlineCitationCarouselHeaderProps) => (
   <div
     className={cn(
-      'flex items-center justify-between gap-2 rounded-t-md bg-secondary p-2',
+      "flex items-center justify-between gap-2 rounded-t-md bg-secondary p-2",
       className
     )}
     {...props}
   />
 );
 
-export type InlineCitationCarouselIndexProps = ComponentProps<'div'>;
+export type InlineCitationCarouselIndexProps = ComponentProps<"div">;
 
 export const InlineCitationCarouselIndex = ({
   children,
@@ -164,7 +165,7 @@ export const InlineCitationCarouselIndex = ({
     setCount(api.scrollSnapList().length);
     setCurrent(api.selectedScrollSnap() + 1);
 
-    api.on('select', () => {
+    api.on("select", () => {
       setCurrent(api.selectedScrollSnap() + 1);
     });
   }, [api]);
@@ -172,7 +173,7 @@ export const InlineCitationCarouselIndex = ({
   return (
     <div
       className={cn(
-        'flex flex-1 items-center justify-end px-3 py-1 text-muted-foreground text-xs',
+        "flex flex-1 items-center justify-end px-3 py-1 text-muted-foreground text-xs",
         className
       )}
       {...props}
@@ -182,7 +183,7 @@ export const InlineCitationCarouselIndex = ({
   );
 };
 
-export type InlineCitationCarouselPrevProps = ComponentProps<'button'>;
+export type InlineCitationCarouselPrevProps = ComponentProps<"button">;
 
 export const InlineCitationCarouselPrev = ({
   className,
@@ -199,7 +200,7 @@ export const InlineCitationCarouselPrev = ({
   return (
     <button
       aria-label="Previous"
-      className={cn('shrink-0', className)}
+      className={cn("shrink-0", className)}
       onClick={handleClick}
       type="button"
       {...props}
@@ -209,7 +210,7 @@ export const InlineCitationCarouselPrev = ({
   );
 };
 
-export type InlineCitationCarouselNextProps = ComponentProps<'button'>;
+export type InlineCitationCarouselNextProps = ComponentProps<"button">;
 
 export const InlineCitationCarouselNext = ({
   className,
@@ -226,7 +227,7 @@ export const InlineCitationCarouselNext = ({
   return (
     <button
       aria-label="Next"
-      className={cn('shrink-0', className)}
+      className={cn("shrink-0", className)}
       onClick={handleClick}
       type="button"
       {...props}
@@ -236,7 +237,7 @@ export const InlineCitationCarouselNext = ({
   );
 };
 
-export type InlineCitationSourceProps = ComponentProps<'div'> & {
+export type InlineCitationSourceProps = ComponentProps<"div"> & {
   title?: string;
   url?: string;
   description?: string;
@@ -250,7 +251,7 @@ export const InlineCitationSource = ({
   children,
   ...props
 }: InlineCitationSourceProps) => (
-  <div className={cn('space-y-1', className)} {...props}>
+  <div className={cn("space-y-1", className)} {...props}>
     {title && (
       <h4 className="truncate font-medium text-sm leading-tight">{title}</h4>
     )}
@@ -266,7 +267,7 @@ export const InlineCitationSource = ({
   </div>
 );
 
-export type InlineCitationQuoteProps = ComponentProps<'blockquote'>;
+export type InlineCitationQuoteProps = ComponentProps<"blockquote">;
 
 export const InlineCitationQuote = ({
   children,
@@ -275,7 +276,7 @@ export const InlineCitationQuote = ({
 }: InlineCitationQuoteProps) => (
   <blockquote
     className={cn(
-      'border-muted border-l-2 pl-3 text-muted-foreground text-sm italic',
+      "border-muted border-l-2 pl-3 text-muted-foreground text-sm italic",
       className
     )}
     {...props}

package/src/serve/public/components/ai-elements/loader.tsx

@@ -1,5 +1,6 @@
-import type { HTMLAttributes } from 'react';
-import { cn } from '../../lib/utils';
+import type { HTMLAttributes } from "react";
+
+import { cn } from "../../lib/utils";
 
 interface LoaderIconProps {
   size?: number;
@@ -9,7 +10,7 @@ const LoaderIcon = ({ size = 16 }: LoaderIconProps) => (
   <svg
     height={size}
     strokeLinejoin="round"
-    style={{ color: 'currentcolor' }}
+    style={{ color: "currentcolor" }}
     viewBox="0 0 16 16"
     width={size}
   >
@@ -86,7 +87,7 @@ export type LoaderProps = HTMLAttributes<HTMLDivElement> & {
 export const Loader = ({ className, size = 16, ...props }: LoaderProps) => (
   <div
     className={cn(
-      'inline-flex animate-spin items-center justify-center',
+      "inline-flex animate-spin items-center justify-center",
       className
     )}
     {...props}