feat: rework dashboard and use zustand for terminal management

src/renderer/pages/Dashboard.tsx

@@ -1,27 +1,23 @@
-import { useEffect, useState } from 'react';
+import { Fragment, useEffect } from 'react';
 import stripAnsi from 'strip-ansi';
-import FloatingTerminalButton from '../components/FloatingTerminalButton';
+import { Tab } from '@headlessui/react';
 import ProjectCard from '../components/ProjectCard';
 import useRetrieveProjects from '../utils/useRetrieveProjects';
 import UploadBox from '../components/UploadBox';
+import Button from '../components/button/Button';
+import useActiveTerminals from '../stores/useActiveTerminals';
 
 function Dashboard() {
   const { projects } = useRetrieveProjects();
-  const [terminalOutput, setTerminalOutput] = useState<string[]>([]);
+  const { terminals, addOutput } = useActiveTerminals();
 
   useEffect(() => {
-    window.electron.ipcRenderer.on('shell-result', (e) => {
-      const resultArray = e as Uint8Array;
-      const decoder = new TextDecoder('utf-8');
-      const result = decoder.decode(resultArray);
-
-      // Check if the result is already present in the terminalOutput array
-      if (!terminalOutput.includes(result)) {
-        // Append the result to the terminalOutput array
-        setTerminalOutput((prevOutput) => [...prevOutput, stripAnsi(result)]);
-      }
+    window.electron.ipcRenderer.on('shell-result', (e: any) => {
+      const name = e.name as string;
+      const result = stripAnsi(e.out) as string;
+      addOutput(name, result);
     });
-  }, [terminalOutput]); // Add terminalOutput as a dependency to useEffect
+  }, [addOutput]);
 
   return (
     <div className="relative text-white flex flex-col p-10 justify-center gap-10">
@@ -31,14 +27,51 @@ function Dashboard() {
           Ecco i tuoi progetti
         </h2>
       </div>
-      <div className="grid grid-cols-4 gap-3 min-h-[200px]">
-        {projects &&
-          projects.map((project) => (
-            <ProjectCard key={project.name} project={project} />
-          ))}
-        <UploadBox />
-      </div>
-      <FloatingTerminalButton />
+      <Tab.Group>
+        <Tab.List className="flex items-center gap-2">
+          <Tab as={Fragment}>
+            {({ selected }) => (
+              <Button variant={selected ? 'primary' : 'ghost'}>Progetti</Button>
+            )}
+          </Tab>
+          <Tab as={Fragment}>
+            {({ selected }) => (
+              <Button
+                isDisabled={terminals.length === 0}
+                variant={selected ? 'primary' : 'ghost'}
+              >
+                Terminale &#40;{terminals.length}&#41;
+              </Button>
+            )}
+          </Tab>
+        </Tab.List>
+        <Tab.Panels>
+          <Tab.Panel>
+            <div className="grid grid-cols-4 gap-3 min-h-[200px]">
+              {projects &&
+                projects.map((project) => (
+                  <ProjectCard key={project.name} project={project} />
+                ))}
+              <UploadBox />
+            </div>
+          </Tab.Panel>
+          <Tab.Panel>
+            {terminals.map((terminal) => (
+              <div className="flex flex-col gap-1">
+                <h6>{terminal.name}</h6>
+                <div className="flex flex-col rounded-xl border border-neutral-500 px-4 py-2">
+                  {terminal.out.map((line, i) => (
+                    // eslint-disable-next-line react/no-array-index-key
+                    <p key={line + i} className="text-neutral-500">
+                      {line}
+                    </p>
+                  ))}
+                </div>
+              </div>
+            ))}
+          </Tab.Panel>
+        </Tab.Panels>
+      </Tab.Group>
     </div>
   );
 }