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,67 @@
+import { ReactElement } from 'react'
+import '../../styles/global.scss'
+import './ConfirmModal.scss'
+import { Button } from '../Button/Button'
+import { createPortal } from 'react-dom'
+
+interface ConfirmModalProps {
+  title?: string
+  message?: React.ReactNode
+  confirmLabel?: string
+  cancelLabel?: string
+  onConfirm?: () => void | Promise<void>
+  onCancel?: () => void
+  showFooter?: boolean
+  isProgress?: boolean
+  spinnerMessage?: string
+  showMinimize?: boolean
+  onMinimize?: () => void
+  background?: boolean
+}
+
+export function ConfirmModal({
+  title = 'Are you sure?',
+  message,
+  confirmLabel = 'Confirm',
+  cancelLabel = 'Cancel',
+  onConfirm,
+  onCancel,
+  showFooter = true,
+  isProgress = false,
+  spinnerMessage,
+  showMinimize = true,
+  onMinimize,
+  background = true,
+}: ConfirmModalProps): ReactElement {
+  const modalRoot = document.querySelector('.fm-main') || document.body
+
+  return createPortal(
+    <div className={`fm-modal-container fm-confirm-modal ${background ? '' : 'fm-modal-no-background'}`}>
+      <div className="fm-modal-window">
+        <div className="fm-modal-window-header">{title}</div>
+
+        <div className="fm-modal-window-body">
+          {isProgress ? (
+            <div className="fm-spinner-center">
+              <div className="fm-spinner-message">
+                <div>{spinnerMessage || 'Working…'}</div>
+                <div className="fm-mini-spinner" />
+              </div>
+              {showMinimize && <Button label="Minimize" variant="secondary" onClick={onMinimize} />}
+            </div>
+          ) : (
+            <div className="fm-modal-white-section">{message}</div>
+          )}
+        </div>
+
+        {showFooter && (onCancel || onConfirm) && (
+          <div className="fm-modal-window-footer">
+            {onCancel && <Button label={cancelLabel} variant="secondary" onClick={onCancel} />}
+            {onConfirm && <Button label={confirmLabel} variant="primary" onClick={() => onConfirm()} />}
+          </div>
+        )}
+      </div>
+    </div>,
+    modalRoot,
+  )
+}