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,120 @@
+import { ReactElement, useState } from 'react'
+import './DeleteFileModal.scss'
+import { Button } from '../Button/Button'
+import { createPortal } from 'react-dom'
+import TrashIcon from 'remixicon-react/DeleteBin6LineIcon'
+import AlertIcon from 'remixicon-react/AlertLineIcon'
+
+import Radio from '@material-ui/core/Radio'
+import FormControlLabel from '@material-ui/core/FormControlLabel'
+import FormControl from '@material-ui/core/FormControl'
+
+import { FileAction } from '../../constants/transfers'
+
+interface DeleteFileModalProps {
+  name?: string
+  names?: string[]
+  currentDriveName?: string
+  onCancelClick: () => void
+  onProceed: (action: FileAction) => void
+}
+
+export function DeleteFileModal({
+  name,
+  names,
+  currentDriveName,
+  onCancelClick,
+  onProceed,
+}: DeleteFileModalProps): ReactElement {
+  const [value, setValue] = useState<FileAction>(FileAction.Trash)
+
+  const modalRoot = document.querySelector('.fm-main') || document.body
+  const isBulk = Array.isArray(names) && names.length > 0
+  const count = isBulk ? names.length : 1
+  const headerText = isBulk ? `Delete ${count} file${count > 1 ? 's' : ''}?` : `Delete ${name}?`
+  const subjectNoun = isBulk ? 'selected file(s)' : 'this file'
+
+  return createPortal(
+    <div className="fm-modal-container">
+      <div className="fm-modal-window fm-delete-file-modal">
+        <div className="fm-modal-window-header">
+          <TrashIcon /> <span className="fm-main-font-color">{headerText}</span>
+        </div>
+
+        <div className="fm-modal-window-body">
+          {isBulk && (
+            <ul className="fm-delete-file-modal-list">
+              {names.map(n => (
+                <li key={n} className="fm-delete-file-modal-list-item" title={n}>
+                  {n}
+                </li>
+              ))}
+            </ul>
+          )}
+          <FormControl component="fieldset">
+            <div className="fm-radio-group">
+              <div className="fm-form-control-label">
+                <FormControlLabel
+                  value={FileAction.Trash}
+                  control={<Radio checked={value === FileAction.Trash} onChange={() => setValue(FileAction.Trash)} />}
+                  label={
+                    <div className="fm-radio-label">
+                      <div className="fm-radio-label-header fm-main-font-color fm-line-height-fit">Move to Trash</div>
+                      <div onClick={e => e.preventDefault()}>
+                        Moves {subjectNoun} to the trash. It will still take up space on{' '}
+                        {currentDriveName ?? 'this drive'} and expire along with it. You can restore it later.
+                      </div>
+                    </div>
+                  }
+                />
+              </div>
+
+              <div className="fm-form-control-label">
+                <FormControlLabel
+                  value={FileAction.Forget}
+                  control={<Radio checked={value === FileAction.Forget} onChange={() => setValue(FileAction.Forget)} />}
+                  label={
+                    <div className="fm-radio-label">
+                      <div className="fm-radio-label-header fm-main-font-color fm-line-height-fit">Forget</div>
+                      <div onClick={e => e.preventDefault()}>
+                        Removes {subjectNoun} from your view. The data will remain on Swarm until{' '}
+                        {currentDriveName ?? 'the drive'} expires. This action cannot be easily undone.
+                      </div>
+                    </div>
+                  }
+                />
+              </div>
+
+              <div className="fm-form-control-label">
+                <FormControlLabel
+                  value={FileAction.Destroy}
+                  control={
+                    <Radio checked={value === FileAction.Destroy} onChange={() => setValue(FileAction.Destroy)} />
+                  }
+                  label={
+                    <div className="fm-radio-label">
+                      <div className="fm-radio-label-header fm-main-font-color fm-line-height-fit">
+                        Destroy entire drive {currentDriveName ? `‘${currentDriveName}’` : ''} to delete this{' '}
+                        {subjectNoun}
+                      </div>
+                      <div className="fm-red-font" onClick={e => e.preventDefault()}>
+                        <AlertIcon size="14px" className="fm-alert-icon-inline" />
+                        Warning: This will make all files on this drive inaccessible. This action is irreversible.
+                      </div>
+                    </div>
+                  }
+                />
+              </div>
+            </div>
+          </FormControl>
+        </div>
+
+        <div className="fm-modal-window-footer">
+          <Button label="Proceed" variant="primary" onClick={() => onProceed(value)} />
+          <Button label="Cancel" variant="secondary" onClick={onCancelClick} />
+        </div>
+      </div>
+    </div>,
+    modalRoot,
+  )
+}