Feat: FileManager (#98) (#703)

* feat: add file manager module - Complete file manager implementation with UI/UX - Add drive management functionality - Add file upload/download with progress tracking - Add stamp integration and handling - Add bulk operations and context menus Co-authored-by: Roland Seres <roland.seres90@gmail.com> Co-authored-by: nidishk <nidishkrishnan45@gmail.com>
2025-11-12 11:26:00 +01:00
parent 1249c0df71
commit 5bfe2a0331
107 changed files with 21529 additions and 5578 deletions
@@ -0,0 +1,112 @@
+import { ReactElement, useState, useContext } from 'react'
+import { createPortal } from 'react-dom'
+import Drive from 'remixicon-react/HardDrive2LineIcon'
+import DriveFill from 'remixicon-react/HardDrive2FillIcon'
+import MoreFill from 'remixicon-react/MoreFillIcon'
+import { ContextMenu } from '../../ContextMenu/ContextMenu'
+import { useContextMenu } from '../../../hooks/useContextMenu'
+import { DriveInfo } from '@solarpunkltd/file-manager-lib'
+import { Context as FMContext } from '../../../../../providers/FileManager'
+import { handleForgetDrive } from '../../../utils/bee'
+import { ConfirmModal } from '../../ConfirmModal/ConfirmModal'
+import './DriveItem.scss'
+
+interface Props {
+  drive: DriveInfo
+  onForgot?: () => Promise<void> | void
+  setErrorMessage?: (error: string) => void
+}
+
+export function ExpiredDriveItem({ drive, onForgot, setErrorMessage }: Props): ReactElement {
+  const { fm, setShowError } = useContext(FMContext)
+  const [isHovered, setIsHovered] = useState(false)
+  const [showForgetConfirm, setShowForgetConfirm] = useState(false)
+  const { showContext, pos, contextRef, setPos, setShowContext } = useContextMenu<HTMLDivElement>()
+
+  function handleMenuClick(e: React.MouseEvent) {
+    setShowContext(true)
+    setPos({ x: e.clientX, y: e.clientY })
+  }
+
+  return (
+    <div
+      className="fm-drive-item-container fm-expired"
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}
+    >
+      <div className="fm-drive-item-info">
+        <div className="fm-drive-item-header">
+          <div className="fm-drive-item-icon">{isHovered ? <DriveFill size="16px" /> : <Drive size="16px" />}</div>
+          <div>{drive.name}</div>
+        </div>
+        <div className="fm-drive-item-content">
+          <div className="fm-drive-item-capacity">Stamp expired — files unavailable</div>
+        </div>
+      </div>
+
+      <div className="fm-drive-item-actions">
+        <MoreFill
+          size="13"
+          className="fm-pointer"
+          onClick={handleMenuClick}
+          aria-label={`More actions for ${drive.name}`}
+        />
+
+        {showContext &&
+          createPortal(
+            <div
+              ref={contextRef}
+              className="fm-drive-item-context-menu"
+              style={{ top: pos.y, left: pos.x }}
+              onClick={e => e.stopPropagation()}
+            >
+              <ContextMenu>
+                <div
+                  className="fm-context-item red"
+                  onClick={() => {
+                    setShowContext(false)
+                    setShowForgetConfirm(true)
+                  }}
+                >
+                  Forget drive
+                </div>
+              </ContextMenu>
+            </div>,
+            document.body,
+          )}
+      </div>
+
+      {showForgetConfirm && (
+        <ConfirmModal
+          title="Forget drive?"
+          message={
+            <>
+              This will remove metadata for the drive with expired stamp <b>Drive Name: {drive.name}</b>{' '}
+              <b>Batch Id: {`${drive.batchId.toString().slice(0, 4)}...${drive.batchId.toString().slice(-4)}`}</b>
+            </>
+          }
+          confirmLabel="Forget drive"
+          cancelLabel="Keep"
+          onCancel={() => setShowForgetConfirm(false)}
+          onConfirm={async () => {
+            if (!fm) return
+
+            await handleForgetDrive(
+              fm,
+              drive,
+              async () => {
+                setShowForgetConfirm(false)
+                await onForgot?.()
+              },
+              () => {
+                setShowForgetConfirm(false)
+                setErrorMessage?.(`Failed to forget drive ${drive.name}`)
+                setShowError(true)
+              },
+            )
+          }}
+        />
+      )}
+    </div>
+  )
+}