feat: implement file tabs management

src/components/workspace/Tabs/Tabs.tsx

@@ -1,52 +1,48 @@
 import AppIcon from '@/components/ui/icon';
-import { useWorkspaceActions } from '@/hooks/workspace.hooks';
-import { Tree } from '@/interfaces/workspace.interface';
+import { useFileTab } from '@/hooks';
+import { useProject } from '@/hooks/projectV2.hooks';
 import { fileTypeFromFileName } from '@/utility/utils';
-import { FC } from 'react';
+import { FC, useEffect } from 'react';
 import s from './Tabs.module.scss';
 
-interface Props {
-  projectId: string;
-}
+const Tabs: FC = () => {
+  const { fileTab, open, close, syncTabSettings } = useFileTab();
+  const { activeProject } = useProject();
 
-const Tabs: FC<Props> = ({ projectId }) => {
-  const { openedFiles, openFile, closeFile } = useWorkspaceActions();
-  const openedFilesList = openedFiles(projectId);
-
-  const updateActiveTab = (node: Tree) => {
-    openFile(node.id, projectId);
-  };
-
-  const closeTab = (e: React.MouseEvent, id: string) => {
+  const closeTab = (e: React.MouseEvent, filePath: string) => {
     e.preventDefault();
     e.stopPropagation();
-    closeFile(id, projectId);
+    close(filePath);
   };
 
-  if (openedFilesList.length === 0) {
+  useEffect(() => {
+    syncTabSettings();
+  }, [activeProject]);
+
+  if (fileTab.items.length === 0) {
     return <></>;
   }
   return (
     <div className={s.container}>
       <div className={s.tabList}>
-        {openedFilesList.map((item) => (
+        {fileTab.items.map((item) => (
           <div
             onClick={() => {
-              updateActiveTab(item);
+              open(item.name, item.path);
             }}
             className={`${s.item} 
             file-icon
             ${item.name.split('.').pop()}-lang-file-icon
             ${fileTypeFromFileName(item.name)}-lang-file-icon
-               ${item.isOpen ? s.isActive : ''}
+               ${item.path === fileTab.active ? s.isActive : ''}
               `}
-            key={item.id}
+            key={item.path}
           >
             {item.name}
             <span
               className={`${s.close} ${item.isDirty ? s.isDirty : ''}`}
               onClick={(e) => {
-                closeTab(e, item.id);
+                closeTab(e, item.path);
               }}
             >
               <span className={s.fileDirtyIcon}></span>

src/components/workspace/WorkSpace/WorkSpace.tsx

@@ -201,7 +201,7 @@ const WorkSpace: FC = () => {
               >
                 <div>
                   <div className={s.tabsWrapper}>
-                    <Tabs projectId={activeProject as string} />
+                    <Tabs />
                   </div>
 
                   <div style={{ height: 'calc(100% - 43px)' }}>

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

@@ -10,8 +10,13 @@ import s from './ManageProject.module.scss';
 const ManageProject: FC = () => {
   const [isDeleteConfirmOpen, setIsDeleteConfirmOpen] = useState(false);
 
-  const { projects, setActiveProject, deleteProject, activeProject } =
-    useProject();
+  const {
+    projects,
+    setActiveProject,
+    deleteProject,
+    activeProject,
+    loadProjectFiles,
+  } = useProject();
 
   const projectHeader = () => (
     <>
@@ -85,14 +90,13 @@ const ManageProject: FC = () => {
     }
   };
 
-  const openProject = async (id: Project['id']) => {
-    if (!id) return;
-    const selectedProject = id as string;
+  const openProject = async (selectedProject: Project['id']) => {
     if (!selectedProject) {
       await message.error('Project not found');
       return;
     }
     setActiveProject(selectedProject);
+    await loadProjectFiles(selectedProject);
   };
 
   useEffect(() => {

src/components/workspace/tree/FileTree/TreeNode.tsx

@@ -1,11 +1,11 @@
+import { useFileTab } from '@/hooks';
 import { useLogActivity } from '@/hooks/logActivity.hooks';
 import { useProject } from '@/hooks/projectV2.hooks';
 import { useWorkspaceActions } from '@/hooks/workspace.hooks';
 import { Project, Tree } from '@/interfaces/workspace.interface';
 import { fileTypeFromFileName } from '@/utility/utils';
 import { NodeModel } from '@minoru/react-dnd-treeview';
 import cn from 'clsx';
-import { useRouter } from 'next/router';
 import { FC, useState } from 'react';
 import s from './FileTree.module.scss';
 import ItemAction, { actionsTypes } from './ItemActions';
@@ -30,11 +30,9 @@ const TreeNode: FC<Props> = ({ node, depth, isOpen, onToggle }) => {
   const [isEditing, setIsEditing] = useState(false);
   const [newItemAdd, setNewItemAdd] = useState<Tree['type'] | ''>('');
 
-  const router = useRouter();
-  const { id: projectId } = router.query;
-
-  const { openFile, isProjectEditable } = useWorkspaceActions();
+  const { isProjectEditable } = useWorkspaceActions();
   const { deleteProjectFile, renameProjectFile, newFileFolder } = useProject();
+  const { open: openTab } = useFileTab();
   const { createLog } = useLogActivity();
 
   const disallowedFile = [
@@ -48,7 +46,7 @@ const TreeNode: FC<Props> = ({ node, depth, isOpen, onToggle }) => {
     e.stopPropagation();
     onToggle(node.id);
     if (!node.droppable) {
-      openFile(node.id as string, projectId as string);
+      openTab(node.text, node.data?.path as string);
     }
   };
 

src/hooks/fileTabs.hooks.ts

@@ -0,0 +1,112 @@
+import fileSystem from '@/lib/fs';
+import { IDEContext, IFileTab } from '@/state/IDE.context';
+import { useContext } from 'react';
+
+const useFileTab = () => {
+  const { fileTab, setFileTab, activeProject } = useContext(IDEContext);
+
+  const syncTabSettings = async (updatedTab?: IFileTab) => {
+    if (!activeProject) return;
+
+    const defaultSetting = {
+      tab: {
+        items: [],
+        active: null,
+      },
+    };
+
+    try {
+      const settingPath = `/${activeProject}/.ide/setting.json`;
+      if (!(await fileSystem.exists(settingPath))) {
+        await fileSystem.writeFile(
+          settingPath,
+          JSON.stringify(defaultSetting, null, 2),
+          {
+            overwrite: true,
+          },
+        );
+      }
+      const setting = (await fileSystem.readFile(settingPath)) as string;
+
+      let parsedSetting = setting ? JSON.parse(setting) : defaultSetting;
+
+      if (updatedTab) {
+        parsedSetting.tab = updatedTab;
+      } else {
+        parsedSetting = {
+          ...defaultSetting,
+          ...parsedSetting,
+        };
+        setFileTab(parsedSetting.tab);
+      }
+
+      await fileSystem.writeFile(
+        settingPath,
+        JSON.stringify(parsedSetting, null, 2),
+        {
+          overwrite: true,
+        },
+      );
+    } catch (error) {
+      console.error('Error syncing tab settings:', error);
+    }
+  };
+
+  const open = (name: string, path: string) => {
+    if (fileTab.active === name) return;
+
+    const existingTab = fileTab.items.find((item) => item.path === path);
+
+    if (existingTab) {
+      const updatedTab = { ...fileTab, active: path };
+      setFileTab(updatedTab);
+      syncTabSettings(updatedTab);
+    } else {
+      const newTab = { name, path, isDirty: false };
+      const updatedTab = {
+        ...fileTab,
+        items: [...fileTab.items, newTab],
+        active: path,
+      };
+      setFileTab(updatedTab);
+      syncTabSettings(updatedTab);
+    }
+  };
+
+  const close = (filePath: string, closeAll: boolean = false) => {
+    let updatedTab: IFileTab;
+
+    if (closeAll) {
+      updatedTab = { items: [], active: null };
+    } else {
+      const updatedItems = fileTab.items.filter(
+        (item) => item.path !== filePath,
+      );
+
+      let newActiveTab = fileTab.active;
+      if (fileTab.active === filePath) {
+        const closedTabIndex = fileTab.items.findIndex(
+          (item) => item.path === filePath,
+        );
+        if (updatedItems.length > 0) {
+          if (closedTabIndex > 0) {
+            newActiveTab = updatedItems[closedTabIndex - 1].path;
+          } else {
+            newActiveTab = updatedItems[0].path;
+          }
+        } else {
+          newActiveTab = null; // No more tabs open
+        }
+      }
+
+      updatedTab = { items: updatedItems, active: newActiveTab };
+    }
+
+    setFileTab(updatedTab);
+    syncTabSettings(updatedTab);
+  };
+
+  return { fileTab, open, close, syncTabSettings };
+};
+
+export default useFileTab;

src/hooks/index.ts

@@ -0,0 +1 @@
+export { default as useFileTab } from './fileTabs.hooks';

src/hooks/projectV2.hooks.ts

@@ -32,16 +32,6 @@ export const useProject = () => {
   } = useContext(IDEContext);
   const baseProjectPath = '/';
 
-  useEffect(() => {
-    if (activeProject) {
-      loadProjectFiles(activeProject).catch(() => {});
-    }
-  }, [activeProject]);
-
-  useEffect(() => {
-    loadProjects().catch(() => {});
-  }, []);
-
   const loadProjects = async () => {
     const projectCollection = await fileSystem.readdir(baseProjectPath, {
       onlyDir: true,
@@ -207,6 +197,15 @@ export const useProject = () => {
     await loadProjectFiles(activeProject);
   };
 
+  const updateActiveProject = (projectName: string | null) => {
+    if (activeProject === projectName) return;
+    setActiveProject(projectName);
+  };
+
+  useEffect(() => {
+    loadProjects();
+  }, []);
+
   return {
     projects,
     projectFiles,
@@ -217,7 +216,8 @@ export const useProject = () => {
     deleteProjectFile,
     moveItem,
     renameProjectFile,
-    setActiveProject,
+    setActiveProject: updateActiveProject,
+    loadProjectFiles,
   };
 };
 

src/lib/fs.ts

@@ -7,6 +7,9 @@ class FileSystem {
   }
 
   async readFile(path: string) {
+    if (!(await this.exists(path))) {
+      throw new Error(`File not found: ${path}`);
+    }
     return this.fs.readFile(path, 'utf8');
   }
 
@@ -17,8 +20,13 @@ class FileSystem {
    * @param data - The content to be written to the file. Can be a string or Uint8Array.
    * @returns A promise that resolves once the file has been written.
    */
-  async writeFile(path: string, data: string | Uint8Array) {
-    const finalPath = await this.getUniquePath(path);
+  async writeFile(
+    path: string,
+    data: string | Uint8Array,
+    options?: { overwrite?: boolean },
+  ) {
+    const { overwrite } = options ?? {};
+    const finalPath = overwrite ? path : await this.getUniquePath(path);
     await this.ensureDirectoryExists(finalPath);
     return this.fs.writeFile(finalPath, data);
   }