fixed the shell disposal issue

yashpokar · Apr 2, 2024 · fcd04ae · fcd04ae
1 parent dd70d54
commit fcd04ae
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 11 deletions.
diff --git a/apps/ui/src/components/Shell.tsx b/apps/ui/src/components/Shell.tsx
@@ -2,24 +2,24 @@ import { useEffect, useRef } from 'react'
 import { Terminal } from 'xterm'
 import { FitAddon } from 'xterm-addon-fit'
 import '@xterm/xterm/css/xterm.css'
+import { useTheme } from '../providers/ThemeProvider'
 
 const Shell: React.FC = () => {
   const playgroundRef = useRef<HTMLDivElement>(null)
+  const { isDarkMode } = useTheme()
 
   useEffect(() => {
     if (!playgroundRef.current) return
 
-    const backgroundColor = getComputedStyle(
-      document.getElementById('tabs')!
-    ).backgroundColor
-
     const terminal = new Terminal({
       cols: 0,
       rows: 0,
       fontFamily: "Menlo, Monaco, 'Courier New', monospace",
       fontSize: 18,
       theme: {
-        background: backgroundColor
+        background: isDarkMode ? '#18181b' : '#f4f4f5',
+        foreground: isDarkMode ? '#f4f4f5' : '#18181b',
+        cursor: isDarkMode ? '#f4f4f5' : '#18181b'
       }
     })
     terminal.write('$ ')
@@ -30,7 +30,11 @@ const Shell: React.FC = () => {
     fitAddon.activate(terminal)
 
     fitAddon.fit()
-  }, [playgroundRef])
+
+    return () => {
+      terminal.dispose()
+    }
+  }, [playgroundRef, isDarkMode])
 
   return <div ref={playgroundRef} className="p-2 h-full" />
 }

diff --git a/apps/ui/src/components/Widgets.tsx b/apps/ui/src/components/Widgets.tsx
@@ -8,7 +8,7 @@ const Widgets: React.FC = () => {
   return (
     <div className="flex flex-col w-full h-full rounded-lg bg-zinc-200 dark:bg-zinc-800">
       <div className="flex flex-col flex-1 p-1.5 md:p-2.5 lg:p-6 pt-0 md:pt-0 lg:pt-0">
-        <Tab.Group defaultIndex={1}>
+        <Tab.Group>
           <Tab.List className="flex px-4 gap-x-2 md:gap-x-4 lg:gap-x-8">
             <Tab className="py-1 md:py-2 lg:py-3 focus:outline-none">
               <span className="font-medium text-sm text-zinc-700 dark:text-zinc-400 ui-selected:text-zinc-900 ui-selected:font-semibold dark:ui-selected:text-zinc-200">
@@ -32,10 +32,7 @@ const Widgets: React.FC = () => {
             </Tab>
           </Tab.List>
 
-          <Tab.Panels
-            className="border p-1 flex-1 rounded-lg border-zinc-300 bg-zinc-100 dark:border-zinc-700 dark:bg-zinc-900"
-            id="tabs"
-          >
+          <Tab.Panels className="border p-1 flex-1 rounded-lg border-zinc-300 bg-zinc-100 dark:border-zinc-700 dark:bg-zinc-900">
             <Tab.Panel className="h-full">
               <Shell />
             </Tab.Panel>