Add UI Blocks to Context Panel

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

@@ -0,0 +1,105 @@
+import { type ReactNode, useState } from "react";
+
+import { Icon, type IconName } from "@/components/ui/icon";
+import { BlockStack, InlineStack } from "@/components/ui/layout";
+import { Heading } from "@/components/ui/typography";
+
+import TooltipButton from "../../Buttons/TooltipButton";
+import { ConfirmationDialog } from "../../Dialogs";
+
+type Action = {
+  label: string;
+  destructive?: boolean;
+  disabled?: boolean;
+  hidden?: boolean;
+  confirmation?: string;
+  onClick: () => void;
+  className?: string;
+} & (
+  | { 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 {
+  title?: string;
+  actions: ActionOrReactNode[];
+  className?: string;
+}
+
+export const ActionBlock = ({
+  title,
+  actions,
+  className,
+}: ActionBlockProps) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [dialogAction, setDialogAction] = useState<Action | null>(null);
+
+  const openConfirmationDialog = (action: Action) => {
+    return () => {
+      setDialogAction(action);
+      setIsOpen(true);
+    };
+  };
+
+  const handleConfirm = () => {
+    setIsOpen(false);
+    dialogAction?.onClick();
+    setDialogAction(null);
+  };
+
+  const handleCancel = () => {
+    setIsOpen(false);
+    setDialogAction(null);
+  };
+
+  return (
+    <>
+      <BlockStack className={className}>
+        {title && <Heading level={3}>{title}</Heading>}
+        <InlineStack gap="2">
+          {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.confirmation
+                    ? openConfirmationDialog(action)
+                    : action.onClick
+                }
+                disabled={action.disabled}
+                className={action.className}
+              >
+                {action.content === undefined && action.icon ? (
+                  <Icon name={action.icon} />
+                ) : (
+                  action.content
+                )}
+              </TooltipButton>
+            );
+          })}
+        </InlineStack>
+      </BlockStack>
+
+      <ConfirmationDialog
+        isOpen={isOpen}
+        title={dialogAction?.label}
+        description={dialogAction?.confirmation}
+        onConfirm={handleConfirm}
+        onCancel={handleCancel}
+      />
+    </>
+  );
+};

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">
+          {title && <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,78 @@
+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="truncate"
+          title={label}
+        >
+          {label}:
+        </Paragraph>
+      )}
+
+      <div className="min-w-16 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"
+            title={value}
+          >
+            {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,81 @@
+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;
+  wrap?: boolean;
+  className?: string;
+}
+
+export const TextBlock = ({
+  title,
+  text,
+  copyable,
+  collapsible,
+  mono,
+  wrap = false,
+  className,
+}: TextBlockProps) => {
+  if (!text) {
+    return null;
+  }
+
+  const textClassName = cn("text-xs text-muted-foreground", {
+    "font-mono": mono,
+    "wrap-break-words": wrap,
+    truncate: !wrap,
+  });
+
+  const content = copyable ? (
+    <CopyText className={textClassName}>{text}</CopyText>
+  ) : (
+    <Paragraph
+      tone="subdued"
+      font={mono ? "mono" : "default"}
+      size="xs"
+      className={wrap ? "wrap-break-words" : "truncate"}
+    >
+      {text}
+    </Paragraph>
+  );
+
+  return (
+    <BlockStack className={className}>
+      <Collapsible className="w-full">
+        <InlineStack blockAlign="center" gap="1">
+          {title && <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;
 }