Add UI Blocks to Context Panel

Author: camielvs

src/components/shared/ContextPanel/Blocks/ActionBlock.tsx

@@ -0,0 +1,55 @@
+import { type ReactNode } from "react";
+
+import { Icon, type IconName } from "@/components/ui/icon";
+import { InlineStack } from "@/components/ui/layout";
+
+import TooltipButton from "../../Buttons/TooltipButton";
+
+export type Action = {
+  label: string;
+  destructive?: boolean;
+  hidden?: boolean;
+  onClick: () => void;
+} & (
+  | { icon: IconName; content?: never }
+  | { content: ReactNode; icon?: never }
+);
+
+// Temporary: ReactNode included for backward compatibility with some existing buttons. In the long-term we should strive for only Action types.
+export type ActionOrReactNode = Action | ReactNode;
+
+interface ActionBlockProps {
+  actions: ActionOrReactNode[];
+  className?: string;
+}
+
+export const ActionBlock = ({ actions, className }: ActionBlockProps) => {
+  return (
+    <InlineStack gap="2" className={className}>
+      {actions.map((action, index) => {
+        if (!action || typeof action !== "object" || !("label" in action)) {
+          return <div key={index}>{action}</div>;
+        }
+
+        if (action.hidden) {
+          return null;
+        }
+
+        return (
+          <TooltipButton
+            key={action.label}
+            variant={action.destructive ? "destructive" : "outline"}
+            tooltip={action.label}
+            onClick={action.onClick}
+          >
+            {action.content === undefined && action.icon ? (
+              <Icon name={action.icon} />
+            ) : (
+              action.content
+            )}
+          </TooltipButton>
+        );
+      })}
+    </InlineStack>
+  );
+};

src/components/shared/ContextPanel/Blocks/ContentBlock.tsx

@@ -0,0 +1,65 @@
+import { type ReactNode } from "react";
+
+import { Button } from "@/components/ui/button";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/components/ui/collapsible";
+import { Icon } from "@/components/ui/icon";
+import { BlockStack, InlineStack } from "@/components/ui/layout";
+import { Heading } from "@/components/ui/typography";
+
+type ContentBlockProps =
+  | {
+      title: string;
+      children?: ReactNode;
+      collapsible?: false;
+      defaultOpen?: never;
+      className?: string;
+    }
+  | {
+      title: string;
+      children?: ReactNode;
+      collapsible: true;
+      defaultOpen?: boolean;
+      className?: string;
+    };
+
+export const ContentBlock = ({
+  title,
+  children,
+  collapsible,
+  defaultOpen = false,
+  className,
+}: ContentBlockProps) => {
+  if (!children) {
+    return null;
+  }
+
+  return (
+    <BlockStack className={className}>
+      <Collapsible className="w-full" defaultOpen={defaultOpen}>
+        <InlineStack blockAlign="center" gap="1">
+          <Heading level={3}>{title}</Heading>
+          {collapsible && (
+            <CollapsibleTrigger asChild>
+              <Button variant="ghost" size="sm">
+                <Icon name="ChevronsUpDown" />
+                <span className="sr-only">Toggle</span>
+              </Button>
+            </CollapsibleTrigger>
+          )}
+        </InlineStack>
+
+        {collapsible ? (
+          <CollapsibleContent className="w-full mt-1">
+            {children}
+          </CollapsibleContent>
+        ) : (
+          children
+        )}
+      </Collapsible>
+    </BlockStack>
+  );
+};

src/components/shared/ContextPanel/Blocks/KeyValuePair.tsx

@@ -0,0 +1,76 @@
+import { InlineStack } from "@/components/ui/layout";
+import { Link } from "@/components/ui/link";
+import { Paragraph } from "@/components/ui/typography";
+import { cn } from "@/lib/utils";
+
+import { CopyText } from "../../CopyText/CopyText";
+
+export interface KeyValuePairProps {
+  label?: string;
+  value?: string | { href: string; text: string };
+  critical?: boolean;
+  copyable?: boolean;
+}
+
+export const KeyValuePair = ({
+  label,
+  value,
+  critical,
+  copyable,
+}: KeyValuePairProps) => {
+  if (!value) {
+    return null;
+  }
+
+  return (
+    <InlineStack gap="2" blockAlign="center" wrap="nowrap">
+      {label && (
+        <Paragraph
+          size="xs"
+          tone={critical ? "critical" : "inherit"}
+          className="shrink-0 whitespace-nowrap"
+        >
+          {label}:
+        </Paragraph>
+      )}
+
+      <div className="min-w-0 flex-1 overflow-hidden">
+        {isLink(value) ? (
+          <Link
+            href={value.href}
+            size="xs"
+            variant="classic"
+            external
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            {value.text}
+          </Link>
+        ) : copyable ? (
+          <CopyText
+            className={cn(
+              "text-xs truncate",
+              critical ? "text-destructive" : "text-muted-foreground",
+            )}
+          >
+            {value}
+          </CopyText>
+        ) : (
+          <Paragraph
+            size="xs"
+            tone={critical ? "critical" : "subdued"}
+            className="truncate"
+          >
+            {value}
+          </Paragraph>
+        )}
+      </div>
+    </InlineStack>
+  );
+};
+
+const isLink = (
+  val: string | { href: string; text: string },
+): val is { href: string; text: string } => {
+  return typeof val === "object" && val !== null && "href" in val;
+};

src/components/shared/ContextPanel/Blocks/ListBlock.tsx

@@ -0,0 +1,52 @@
+import { BlockStack } from "@/components/ui/layout";
+import { Heading } from "@/components/ui/typography";
+
+import { KeyValuePair, type KeyValuePairProps } from "./KeyValuePair";
+
+interface ListBlockProps {
+  title?: string;
+  items: KeyValuePairProps[];
+  marker?: "bullet" | "number" | "none";
+  className?: string;
+}
+
+export const ListBlock = ({
+  title,
+  items,
+  marker = "bullet",
+  className,
+}: ListBlockProps) => {
+  const listElement = marker === "number" ? "ol" : "ul";
+
+  const getListStyle = () => {
+    switch (marker) {
+      case "bullet":
+        return "pl-5 list-disc";
+      case "number":
+        return "pl-5 list-decimal";
+      case "none":
+        return "list-none";
+      default:
+        return "pl-5 list-disc";
+    }
+  };
+
+  return (
+    <BlockStack className={className}>
+      {title && <Heading level={3}>{title}</Heading>}
+      <BlockStack as={listElement} gap="1" className={getListStyle()}>
+        {items.map((item, index) => {
+          if (!item.value) {
+            return null;
+          }
+
+          return (
+            <li key={index}>
+              <KeyValuePair {...item} />
+            </li>
+          );
+        })}
+      </BlockStack>
+    </BlockStack>
+  );
+};

src/components/shared/ContextPanel/Blocks/TextBlock.tsx

@@ -0,0 +1,79 @@
+import { Button } from "@/components/ui/button";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/components/ui/collapsible";
+import { Icon } from "@/components/ui/icon";
+import { BlockStack, InlineStack } from "@/components/ui/layout";
+import { Heading, Paragraph } from "@/components/ui/typography";
+import { cn } from "@/lib/utils";
+
+import { CopyText } from "../../CopyText/CopyText";
+
+interface TextBlockProps {
+  title: string;
+  text?: string;
+  copyable?: boolean;
+  collapsible?: boolean;
+  mono?: boolean;
+  className?: string;
+}
+
+export const TextBlock = ({
+  title,
+  text,
+  copyable,
+  collapsible,
+  mono,
+  className,
+}: TextBlockProps) => {
+  if (!text) {
+    return null;
+  }
+
+  const content = copyable ? (
+    <CopyText
+      className={cn("text-xs text-muted-foreground truncate", {
+        "font-mono": mono,
+      })}
+    >
+      {text}
+    </CopyText>
+  ) : (
+    <Paragraph
+      tone="subdued"
+      font={mono ? "mono" : "default"}
+      size="xs"
+      className="truncate"
+    >
+      {text}
+    </Paragraph>
+  );
+
+  return (
+    <BlockStack className={className}>
+      <Collapsible className="w-full">
+        <InlineStack blockAlign="center" gap="1">
+          <Heading level={3}>{title}</Heading>
+          {collapsible && (
+            <CollapsibleTrigger asChild>
+              <Button variant="ghost" size="sm">
+                <Icon name="ChevronsUpDown" />
+                <span className="sr-only">Toggle</span>
+              </Button>
+            </CollapsibleTrigger>
+          )}
+        </InlineStack>
+
+        {collapsible ? (
+          <CollapsibleContent className="w-full mt-1">
+            {content}
+          </CollapsibleContent>
+        ) : (
+          content
+        )}
+      </Collapsible>
+    </BlockStack>
+  );
+};

src/components/ui/icon.tsx

@@ -15,8 +15,10 @@ const iconVariants = cva("", {
   },
 });
 
+export type IconName = keyof typeof icons;
+
 interface IconProps extends VariantProps<typeof iconVariants> {
-  name: keyof typeof icons;
+  name: IconName;
   className?: string;
 }