feat: allow delete use file tree and allow keydowm to add

src/components/extension/tree-view-api/index.tsx

@@ -11,6 +11,7 @@ import React, {
 } from 'react';
 import * as AccordionPrimitive from '@radix-ui/react-accordion';
 import { FolderIcon, FolderOpenIcon } from 'lucide-react';
+import { RiDeleteBin6Line } from 'react-icons/ri';
 
 import { Button } from '@/components/ui/button';
 import { ScrollArea } from '@/components/ui/scroll-area';
@@ -227,13 +228,16 @@ const Folder = forwardRef<HTMLDivElement, FolderProps & React.HTMLAttributes<HTM
       openIcon,
       closeIcon,
     } = useTree();
+    const { removeFileById } = useUploadFileDataStore();
     const Ele = empty ? 'div' : AccordionPrimitive.Item;
+    const Trigger = empty ? 'div' : AccordionPrimitive.Trigger;
+    const Content = empty ? 'div' : AccordionPrimitive.Content;
 
     return (
       <Ele ref={ref} {...props} value={value} className="relative overflow-hidden h-full ">
-        <AccordionPrimitive.Trigger
+        <Trigger
           className={cn(
-            `flex items-center gap-1 text-sm w-full border-[1px] border-[#202327]`,
+            ` group min-h-[22px]  flex items-center justify-between text-sm w-full border-[1px] border-[#202327]`,
             className,
             {
               'bg-muted rounded-md': isSelect && isSelectable,
@@ -248,12 +252,21 @@ const Folder = forwardRef<HTMLDivElement, FolderProps & React.HTMLAttributes<HTM
             selectItem(value);
           }}
         >
-          {expendedItems?.includes(value)
-            ? (openIcon ?? <FolderOpenIcon className="h-3 w-3" />)
-            : (closeIcon ?? <FolderIcon className="h-3 w-3" />)}
-          <span>{element}</span>
-        </AccordionPrimitive.Trigger>
-        <AccordionPrimitive.Content className="text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down relative overflow-hidden h-full">
+          <div className=" flex items-center justify-start gap-x-1">
+            {expendedItems?.includes(value)
+              ? (openIcon ?? <FolderOpenIcon className="h-3 w-3" />)
+              : (closeIcon ?? <FolderIcon className="h-3 w-3" />)}
+            <span>{element}</span>
+          </div>
+          <RiDeleteBin6Line
+            onMouseUp={(e) => {
+              e.stopPropagation();
+              removeFileById(value);
+            }}
+            className=" pr-2 w-5 h-5 text-white/70 hover:text-white hidden group-hover:block"
+          />
+        </Trigger>
+        <Content className="text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down relative overflow-hidden h-full">
           {element && indicator && <TreeIndicator aria-hidden="true" />}
           {!empty && (
             <AccordionPrimitive.Root
@@ -269,7 +282,7 @@ const Folder = forwardRef<HTMLDivElement, FolderProps & React.HTMLAttributes<HTM
               {children}
             </AccordionPrimitive.Root>
           )}
-        </AccordionPrimitive.Content>
+        </Content>
       </Ele>
     );
   },

src/components/file/fileItem/index.tsx

@@ -1,6 +1,7 @@
 import React, { useRef } from 'react';
 import { editor } from 'monaco-editor';
 import { useDraggable } from '@dnd-kit/core';
+import { TiDocumentDelete } from 'react-icons/ti';
 
 import {
   useActiveEditorStore,
@@ -11,6 +12,7 @@ import {
   useSplitStore,
 } from '@/store/editorStore';
 import { useDragIconStore } from '@/store/dragIconStore';
+import { useUploadFileDataStore } from '@/store/uploadFileDataStore';
 import { addNewModel } from '@/components/editor/utils';
 interface FileItemProps {
   file: any;
@@ -53,6 +55,9 @@ export const FileItem: React.FC<FileItemProps> = ({ file, onMouseupFn }: FileIte
     dragIconRef.style.top = `${transform.y + clickClient.current.y + 5}px`;
     dragIconRef.innerHTML = `${file.filename}`;
   }
+  //used for fileTree
+
+  const { removeFileById } = useUploadFileDataStore();
 
   function handleFileItemMouseUp() {
     clickClient.current = {
@@ -96,7 +101,7 @@ export const FileItem: React.FC<FileItemProps> = ({ file, onMouseupFn }: FileIte
         onMouseupFn && onMouseupFn();
         handleFileItemMouseUp();
       }}
-      className=" flex justify-start px-2 py-[0.2px] font-[250] text-[11.5px] w-full "
+      className=" group relative flex justify-between items-center px-2 py-[0.2px] font-[250] text-[11.5px] w-full "
     >
       <span
         className=" cursor-pointer overflow-ellipsis whitespace-nowrap overflow-hidden"
@@ -111,6 +116,13 @@ export const FileItem: React.FC<FileItemProps> = ({ file, onMouseupFn }: FileIte
       >
         {file.filename}
       </span>
+      <TiDocumentDelete
+        onMouseUp={(e) => {
+          e.stopPropagation();
+          removeFileById(file.id);
+        }}
+        className=" w-[15px] pr-[-4px] h-[15px] text-white/70 hover:text-white hidden group-hover:block"
+      />
     </div>
   );
 };

src/components/file/fileTree/index.tsx

@@ -1,8 +1,8 @@
 'use client';
 
 import { Tree, TreeViewElement, File, Folder } from '@/components/extension/tree-view-api';
+import { PendingFileItem } from '@/components/file/pendingFileItem';
 import { FileItem } from '@/components/file/fileItem';
-import { useUploadFileDataStore } from '@/store/uploadFileDataStore';
 
 type TOCProps = {
   toc: TreeViewElement[];
@@ -23,27 +23,12 @@ type TreeItemProps = {
 };
 
 export const TreeItem = ({ elements }: TreeItemProps) => {
-  const { removeFileById, updateItem } = useUploadFileDataStore();
-
   return (
     <ul className="w-full space-y-1">
       {elements.map((element) => (
         <li key={`${element.id}+${element.filename}`} className="w-full space-y-2">
           {element.status === 'pending' ? (
-            <input
-              autoFocus
-              onBlur={(e) => {
-                if (e.target.value === '') {
-                  removeFileById(element.id);
-                } else {
-                  updateItem(element.id, {
-                    filename: e.target.value,
-                    status: 'success',
-                  });
-                }
-              }}
-              className=" px-px pl-2 pr-1 border-[1px] border-[#3f85f5] focus:outline-none focus:ring-1 focus:ring-[#3f85f5] ring-opacity-50 bg-transparent/30 text-[12px] font-[300]"
-            />
+            <PendingFileItem id={element.id} />
           ) : (element.children && element.children?.length > 0) || element.kind === 'directory' ? (
             <Folder
               element={element.filename}

src/components/file/pendingFileItem/index.tsx

@@ -0,0 +1,40 @@
+import React, { useState } from 'react';
+
+import { useUploadFileDataStore } from '@/store/uploadFileDataStore';
+
+interface PendingFileItemProps {
+  id: string;
+}
+
+export const PendingFileItem: React.FC<PendingFileItemProps> = ({ id }) => {
+  const { removeFileById, updateItem } = useUploadFileDataStore();
+  const [fileName, setFileName] = useState('');
+  const handleChangeStatus = () => {
+    if (fileName === '') {
+      removeFileById(id);
+    } else {
+      updateItem(id, {
+        filename: fileName,
+        status: 'success',
+      });
+    }
+  };
+
+  return (
+    <input
+      autoFocus
+      onKeyUp={(e) => {
+        if (e.key === 'Enter') {
+          handleChangeStatus();
+        }
+      }}
+      onChange={(e) => {
+        setFileName(e.target.value);
+      }}
+      onBlur={() => {
+        handleChangeStatus();
+      }}
+      className=" px-px pl-2 pr-1 border-[1px] border-[#3f85f5] focus:outline-none focus:ring-1 focus:ring-[#3f85f5] ring-opacity-50 bg-transparent/30 text-[12px] font-[300]"
+    />
+  );
+};