Add "copy to clipboard" button to Variables pane (#2388)

src/components/ModelingSidebar/ModelingPanes/MemoryPane.tsx

@@ -3,6 +3,43 @@ import { useMemo } from 'react'
 import { ProgramMemory, Path, ExtrudeSurface } from 'lang/wasm'
 import { useKclContext } from 'lang/KclProvider'
 import { useResolvedTheme } from 'hooks/useResolvedTheme'
+import { ActionButton } from 'components/ActionButton'
+import toast from 'react-hot-toast'
+import Tooltip from 'components/Tooltip'
+
+export const MemoryPaneMenu = () => {
+  const { programMemory } = useKclContext()
+
+  function copyProgramMemoryToClipboard() {
+    if (globalThis && 'navigator' in globalThis) {
+      try {
+        navigator.clipboard.writeText(JSON.stringify(programMemory))
+        toast.success('Program memory copied to clipboard')
+      } catch (e) {
+        toast.error('Failed to copy program memory to clipboard')
+      }
+    }
+  }
+
+  return (
+    <>
+      <ActionButton
+        Element="button"
+        iconStart={{
+          icon: 'clipboardPlus',
+          iconClassName: '!text-current',
+          bgClassName: 'bg-transparent',
+        }}
+        className="!p-0 !bg-transparent hover:text-primary border-transparent hover:border-primary !outline-none"
+        onClick={copyProgramMemoryToClipboard}
+      >
+        <Tooltip position="bottom-right" delay={750}>
+          Copy to clipboard
+        </Tooltip>
+      </ActionButton>
+    </>
+  )
+}
 
 export const MemoryPane = () => {
   const theme = useResolvedTheme()

src/components/ModelingSidebar/ModelingPanes/index.ts

@@ -10,7 +10,7 @@ import { KclEditorMenu } from 'components/ModelingSidebar/ModelingPanes/KclEdito
 import { CustomIconName } from 'components/CustomIcon'
 import { KclEditorPane } from 'components/ModelingSidebar/ModelingPanes/KclEditorPane'
 import { ReactNode } from 'react'
-import { MemoryPane } from './MemoryPane'
+import { MemoryPane, MemoryPaneMenu } from './MemoryPane'
 import { KclErrorsPane, LogsPane } from './LoggingPanes'
 import { DebugPane } from './DebugPane'
 import { FileTreeInner, FileTreeMenu } from 'components/FileTree'
@@ -61,6 +61,7 @@ export const bottomPanes: SidebarPane[] = [
     title: 'Variables',
     icon: faSquareRootVariable,
     Content: MemoryPane,
+    Menu: MemoryPaneMenu,
     keybinding: 'shift + v',
   },
   {