claude-code

web/components/export/ExportOptions.tsx

@@ -0,0 +1,83 @@
+"use client";
+
+import * as Switch from "@radix-ui/react-switch";
+import type { ExportOptions, ExportFormat } from "@/lib/types";
+import { cn } from "@/lib/utils";
+
+interface OptionRowProps {
+  id: string;
+  label: string;
+  description?: string;
+  checked: boolean;
+  onCheckedChange: (v: boolean) => void;
+  disabled?: boolean;
+}
+
+function OptionRow({ id, label, description, checked, onCheckedChange, disabled }: OptionRowProps) {
+  return (
+    <div className={cn("flex items-center justify-between gap-4 py-2", disabled && "opacity-40")}>
+      <label htmlFor={id} className={cn("flex flex-col gap-0.5", !disabled && "cursor-pointer")}>
+        <span className="text-sm text-surface-200">{label}</span>
+        {description && (
+          <span className="text-xs text-surface-500">{description}</span>
+        )}
+      </label>
+      <Switch.Root
+        id={id}
+        checked={checked}
+        onCheckedChange={onCheckedChange}
+        disabled={disabled}
+        className={cn(
+          "w-9 h-5 rounded-full transition-colors outline-none cursor-pointer",
+          "data-[state=checked]:bg-brand-600 data-[state=unchecked]:bg-surface-700",
+          "disabled:cursor-not-allowed"
+        )}
+      >
+        <Switch.Thumb className="block w-4 h-4 bg-white rounded-full shadow transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0.5" />
+      </Switch.Root>
+    </div>
+  );
+}
+
+interface ExportOptionsProps {
+  options: ExportOptions;
+  onChange: (opts: Partial<ExportOptions>) => void;
+}
+
+export function ExportOptionsPanel({ options, onChange }: ExportOptionsProps) {
+  const isJson = options.format === "json";
+
+  return (
+    <div className="divide-y divide-surface-800">
+      <OptionRow
+        id="opt-tool-use"
+        label="Include tool use"
+        description="Show tool calls and results in the export"
+        checked={options.includeToolUse}
+        onCheckedChange={(v) => onChange({ includeToolUse: v })}
+      />
+      <OptionRow
+        id="opt-thinking"
+        label="Include thinking blocks"
+        description="Show extended thinking when present"
+        checked={options.includeThinking}
+        onCheckedChange={(v) => onChange({ includeThinking: v })}
+        disabled={isJson}
+      />
+      <OptionRow
+        id="opt-timestamps"
+        label="Include timestamps"
+        description="Add date/time to messages and metadata"
+        checked={options.includeTimestamps}
+        onCheckedChange={(v) => onChange({ includeTimestamps: v })}
+      />
+      <OptionRow
+        id="opt-file-contents"
+        label="Include full file contents"
+        description="Show complete tool result output (may be large)"
+        checked={options.includeFileContents}
+        onCheckedChange={(v) => onChange({ includeFileContents: v })}
+      />
+    </div>
+  );
+}

web/components/export/FormatSelector.tsx

@@ -0,0 +1,73 @@
+"use client";
+
+import { FileText, Braces, Globe, FileDown, AlignLeft } from "lucide-react";
+import { cn } from "@/lib/utils";
+import type { ExportFormat } from "@/lib/types";
+
+interface FormatOption {
+  value: ExportFormat;
+  label: string;
+  description: string;
+  icon: React.ReactNode;
+}
+
+const FORMATS: FormatOption[] = [
+  {
+    value: "markdown",
+    label: "Markdown",
+    description: "Clean .md with code blocks and metadata",
+    icon: <FileText className="w-4 h-4" />,
+  },
+  {
+    value: "json",
+    label: "JSON",
+    description: "Full conversation data with tool use",
+    icon: <Braces className="w-4 h-4" />,
+  },
+  {
+    value: "html",
+    label: "HTML",
+    description: "Self-contained file with embedded styles",
+    icon: <Globe className="w-4 h-4" />,
+  },
+  {
+    value: "pdf",
+    label: "PDF",
+    description: "Print-to-PDF via browser dialog",
+    icon: <FileDown className="w-4 h-4" />,
+  },
+  {
+    value: "plaintext",
+    label: "Plain Text",
+    description: "Stripped of all formatting",
+    icon: <AlignLeft className="w-4 h-4" />,
+  },
+];
+
+interface FormatSelectorProps {
+  value: ExportFormat;
+  onChange: (format: ExportFormat) => void;
+}
+
+export function FormatSelector({ value, onChange }: FormatSelectorProps) {
+  return (
+    <div className="grid grid-cols-5 gap-2">
+      {FORMATS.map((fmt) => (
+        <button
+          key={fmt.value}
+          onClick={() => onChange(fmt.value)}
+          className={cn(
+            "flex flex-col items-center gap-1.5 px-2 py-3 rounded-lg border text-center transition-colors",
+            value === fmt.value
+              ? "border-brand-500 bg-brand-500/10 text-brand-300"
+              : "border-surface-700 bg-surface-800 text-surface-400 hover:border-surface-600 hover:text-surface-200"
+          )}
+          title={fmt.description}
+        >
+          {fmt.icon}
+          <span className="text-xs font-medium leading-none">{fmt.label}</span>
+        </button>
+      ))}
+    </div>
+  );
+}