feat: add download feature for all or individual projects (#111)

src/components/project/DownloadProject/DownloadProject.module.scss

@@ -0,0 +1,6 @@
+.download {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 1.2rem !important;
+}

src/components/project/DownloadProject/DownloadProject.tsx

@@ -0,0 +1,53 @@
+import AppIcon from '@/components/ui/icon';
+import { useLogActivity } from '@/hooks/logActivity.hooks';
+import fileSystem from '@/lib/fs';
+import ZIP from '@/lib/zip';
+import { Button, Tooltip } from 'antd';
+import { FC, useState } from 'react';
+import s from './DownloadProject.module.scss';
+
+interface Props {
+  path: string;
+  title: string;
+}
+
+const DownloadProject: FC<Props> = ({ path, title }) => {
+  const [isLoading, setIsLoading] = useState(false);
+  const { createLog } = useLogActivity();
+  const download = () => {
+    try {
+      let fileName = path.split('/').pop();
+      if (path === '/') {
+        fileName = 'archive';
+      }
+      const zip = new ZIP(fileSystem);
+      zip.bundleFilesAndDownload([path], `${fileName}.zip`);
+    } catch (error) {
+      if (error instanceof Error) {
+        createLog(error.message, 'error');
+      } else {
+        createLog('Failed to download project', 'error');
+      }
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <Tooltip title={title}>
+      <Button
+        type="text"
+        title={title}
+        onClick={() => {
+          download();
+        }}
+        disabled={isLoading}
+        icon={<AppIcon name="Download" />}
+        size="small"
+        className={s.download}
+      />
+    </Tooltip>
+  );
+};
+
+export default DownloadProject;

src/components/project/DownloadProject/index.ts

@@ -0,0 +1 @@
+export { default } from './DownloadProject';

src/components/project/index.ts

@@ -1,2 +1,3 @@
+export { default as DownloadProject } from './DownloadProject';
 export { default as MigrateToUnifiedFS } from './MigrateToUnifiedFS';
 export { default as NewProject } from './NewProject';

src/components/workspace/WorkSpace/WorkSpace.module.scss

@@ -62,6 +62,11 @@
     font-weight: 500;
     padding: 0.5rem 0;
   }
+  .actionWrapper {
+    display: flex;
+    align-items: center;
+    gap: 0.3rem;
+  }
   .globalAction {
     color: #ccc;
     display: flex;

src/components/workspace/WorkSpace/WorkSpace.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import { DownloadProject } from '@/components/project';
 import { ProjectTemplate } from '@/components/template';
 import { AppConfig } from '@/config/AppConfig';
 import { useFileTab } from '@/hooks';
@@ -185,17 +186,23 @@ const WorkSpace: FC = () => {
               <ManageProject />
               {activeProject?.path && (
                 <div className={s.globalAction}>
-                  <span>{AppConfig.name} IDE</span>
-                  <ItemAction
-                    className={s.visible}
-                    allowedActions={['NewFile', 'NewFolder']}
-                    onNewFile={() => {
-                      commitItemCreation('file', 'new file');
-                    }}
-                    onNewDirectory={() => {
-                      commitItemCreation('directory', 'new folder');
-                    }}
-                  />
+                  <span>{AppConfig.name}</span>
+                  <div className={s.actionWrapper}>
+                    <ItemAction
+                      className={s.visible}
+                      allowedActions={['NewFile', 'NewFolder']}
+                      onNewFile={() => {
+                        commitItemCreation('file', 'new file');
+                      }}
+                      onNewDirectory={() => {
+                        commitItemCreation('directory', 'new folder');
+                      }}
+                    />
+                    <DownloadProject
+                      path={activeProject.path}
+                      title={`Download ${activeProject.name}`}
+                    />
+                  </div>
                 </div>
               )}
 

src/components/workspace/project/ManageProject/ManageProject.tsx

@@ -1,4 +1,8 @@
-import { MigrateToUnifiedFS, NewProject } from '@/components/project';
+import {
+  DownloadProject,
+  MigrateToUnifiedFS,
+  NewProject,
+} from '@/components/project';
 import { Tooltip } from '@/components/ui';
 import AppIcon from '@/components/ui/icon';
 import { baseProjectPath, useProject } from '@/hooks/projectV2.hooks';
@@ -62,6 +66,7 @@ const ManageProject: FC = () => {
             <AppIcon name="Delete" />
           </div>
         </Tooltip>
+        <DownloadProject path="/" title="Download all projects" />
       </div>
     </>
   );

src/components/workspace/tree/FileTree/FileTree.module.scss

@@ -80,6 +80,10 @@
   opacity: 0;
   pointer-events: none;
   transition: 0.2s;
+  > span {
+    display: flex;
+    align-items: center;
+  }
   &.visible {
     opacity: 1;
     pointer-events: all;