From fc795f9a3b74268e3d53b4b70eacef8af687d760 Mon Sep 17 00:00:00 2001
From: Nate Kelley <nate@buster.so>
Date: Thu, 3 Apr 2025 22:20:45 -0600
Subject: [PATCH] remove old file card components

---
 .../StreamingMessageCode.tsx                  | 23 ++++----
 .../typography/AppCodeBlock/AppCodeBlock.tsx  | 30 +++++++---
 .../AppCodeBlock/AppCodeBlockWrapper.tsx      | 57 -------------------
 .../ui/typography/AppCodeBlock/index.ts       |  2 +-
 4 files changed, 36 insertions(+), 76 deletions(-)
 delete mode 100644 web/src/components/ui/typography/AppCodeBlock/AppCodeBlockWrapper.tsx

diff --git a/web/src/components/ui/streaming/StreamingMessageCode/StreamingMessageCode.tsx b/web/src/components/ui/streaming/StreamingMessageCode/StreamingMessageCode.tsx
index bcea21ec1..0e79810c2 100644
--- a/web/src/components/ui/streaming/StreamingMessageCode/StreamingMessageCode.tsx
+++ b/web/src/components/ui/streaming/StreamingMessageCode/StreamingMessageCode.tsx
@@ -1,16 +1,14 @@
 'use client';
 
 import { BusterChatMessageReasoning_file } from '@/api/asset_interfaces';
-import {
-  AppCodeBlockWrapper,
-  SyntaxHighlighterLightTheme
-} from '@/components/ui/typography/AppCodeBlock';
-import React, { useEffect, useState } from 'react';
+import { SyntaxHighlighterLightTheme } from '@/components/ui/typography/AppCodeBlock';
+import React, { useEffect, useMemo, useState } from 'react';
 import { AnimatePresence, motion } from 'framer-motion';
 import { Text } from '@/components/ui/typography';
 import pluralize from 'pluralize';
 import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
 import { TextAndVersionPill } from '../../typography/TextAndVersionPill';
+import { FileCard } from '../../card/FileCard';
 
 const style = SyntaxHighlighterLightTheme;
 
@@ -118,11 +116,14 @@ export const StreamingMessageCode: React.FC<
   }, [text, modified]);
 
   return (
-    <AppCodeBlockWrapper
-      title={<TextAndVersionPill fileName={file_name} versionNumber={version_number} />}
-      language={'yaml'}
-      showCopyButton={false}
-      buttons={buttons}>
+    <FileCard
+      fileName={useMemo(
+        () => (
+          <TextAndVersionPill fileName={file_name} versionNumber={version_number} />
+        ),
+        [file_name, version_number]
+      )}
+      headerButtons={buttons}>
       <AnimatePresence initial={!isCompletedStream}>
         <motion.div
           className="w-full overflow-x-auto p-3"
@@ -143,7 +144,7 @@ export const StreamingMessageCode: React.FC<
           ))}
         </motion.div>
       </AnimatePresence>
-    </AppCodeBlockWrapper>
+    </FileCard>
   );
 };
 
diff --git a/web/src/components/ui/typography/AppCodeBlock/AppCodeBlock.tsx b/web/src/components/ui/typography/AppCodeBlock/AppCodeBlock.tsx
index ebd70bb5d..f93d51bec 100644
--- a/web/src/components/ui/typography/AppCodeBlock/AppCodeBlock.tsx
+++ b/web/src/components/ui/typography/AppCodeBlock/AppCodeBlock.tsx
@@ -1,10 +1,14 @@
 'use client';
 
-import React, { useState } from 'react';
+import React from 'react';
 import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
 import lightTheme from './light';
-import { AppCodeBlockWrapper } from './AppCodeBlockWrapper';
 import { cn } from '@/lib/classMerge';
+import { useMemoizedFn } from '@/hooks';
+import { useBusterNotifications } from '@/context/BusterNotifications';
+import { FileCard } from '../../card/FileCard';
+import { Button } from '../../buttons';
+import { Copy } from '../../icons';
 
 export const AppCodeBlock: React.FC<{
   language?: string;
@@ -27,6 +31,13 @@ export const AppCodeBlock: React.FC<{
   } = props;
   const style = lightTheme;
   const code = String(children).replace(/\n$/, '');
+  const { openSuccessMessage } = useBusterNotifications();
+
+  const copyCode = useMemoizedFn(() => {
+    if (!code) return;
+    navigator.clipboard.writeText(code);
+    openSuccessMessage('Copied to clipboard');
+  });
 
   //this is a huge assumption, but if there is no language, it is probably an inline code block
   if (!language) {
@@ -34,11 +45,16 @@ export const AppCodeBlock: React.FC<{
   }
 
   return (
-    <AppCodeBlockWrapper
+    <FileCard
+      fileName={title || language}
       className={wrapperClassName}
-      code={code}
-      language={title || language}
-      showCopyButton={showCopyButton}>
+      headerButtons={
+        showCopyButton && (
+          <Button variant="ghost" onClick={copyCode} prefix={<Copy />}>
+            Copy
+          </Button>
+        )
+      }>
       <div className="w-full overflow-x-auto">
         <div className="code-wrapper">
           {language ? (
@@ -56,7 +72,7 @@ export const AppCodeBlock: React.FC<{
           )}
         </div>
       </div>
-    </AppCodeBlockWrapper>
+    </FileCard>
   );
 });
 AppCodeBlock.displayName = 'AppCodeBlock';
diff --git a/web/src/components/ui/typography/AppCodeBlock/AppCodeBlockWrapper.tsx b/web/src/components/ui/typography/AppCodeBlock/AppCodeBlockWrapper.tsx
deleted file mode 100644
index e8f38dc93..000000000
--- a/web/src/components/ui/typography/AppCodeBlock/AppCodeBlockWrapper.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-import { useBusterNotifications } from '@/context/BusterNotifications';
-import React from 'react';
-import { Text } from '@/components/ui/typography';
-import { useMemoizedFn } from '@/hooks';
-import { Button } from '@/components/ui/buttons';
-import { Copy } from '@/components/ui/icons';
-import { cn } from '@/lib/classMerge';
-
-export const AppCodeBlockWrapper: React.FC<{
-  children: React.ReactNode;
-  code?: string;
-  language?: string;
-  showCopyButton?: boolean;
-  buttons?: React.ReactNode;
-  title?: string | React.ReactNode;
-  className?: string;
-}> = React.memo(
-  ({ children, code, showCopyButton = true, language, buttons, title, className }) => {
-    const { openSuccessMessage } = useBusterNotifications();
-
-    const copyCode = useMemoizedFn(() => {
-      if (!code) return;
-      navigator.clipboard.writeText(code);
-      openSuccessMessage('Copied to clipboard');
-    });
-
-    return (
-      <div className={cn('overflow-hidden rounded border', 'max-h-fit', className)}>
-        <div
-          className={cn(
-            'bg-item-active border-border max-h-[32px] min-h-[32px] border-b px-2.5',
-            'flex items-center justify-between'
-          )}>
-          <Text className="pl-2">{title || language}</Text>
-          <div className="flex items-center space-x-1">
-            {showCopyButton && (
-              <Button
-                variant="ghost"
-                onClick={(e) => {
-                  e.preventDefault();
-                  e.stopPropagation();
-                  copyCode();
-                }}
-                prefix={<Copy />}>
-                Copy
-              </Button>
-            )}
-            {buttons}
-          </div>
-        </div>
-
-        {children}
-      </div>
-    );
-  }
-);
-AppCodeBlockWrapper.displayName = 'CodeBlockWrapper';
diff --git a/web/src/components/ui/typography/AppCodeBlock/index.ts b/web/src/components/ui/typography/AppCodeBlock/index.ts
index 945c4a289..b98b946bd 100644
--- a/web/src/components/ui/typography/AppCodeBlock/index.ts
+++ b/web/src/components/ui/typography/AppCodeBlock/index.ts
@@ -1,5 +1,5 @@
 export * from './AppCodeBlock';
-export * from './AppCodeBlockWrapper';
+
 import SyntaxHighlighterLightTheme from './light';
 import SyntaxHighlighterDarkTheme from './dark';