+
+ )
+}
diff --git a/src/modules/filemanager/components/Button/Button.scss b/src/modules/filemanager/components/Button/Button.scss
new file mode 100644
index 0000000..ea2ccc5
--- /dev/null
+++ b/src/modules/filemanager/components/Button/Button.scss
@@ -0,0 +1,66 @@
+.fm-button {
+ border-radius: 0px;
+ text-align: center;
+ font-size: 14px;
+ font-weight: 700;
+ cursor: pointer;
+ transition: opacity 0.3s;
+}
+
+.fm-button-primary {
+ background-color: rgb(237, 129, 49);
+ color: white;
+
+ &:hover {
+ opacity: 0.8;
+ }
+}
+
+.fm-button-secondary {
+ background-color: rgb(255, 255, 255);
+ color: rgb(55, 65, 81);
+ border: 1px solid rgb(209, 213, 219);
+
+ &:hover {
+ background-color: #e0e0e0;
+ }
+}
+
+.fm-button-danger {
+ background-color: #dc2626;
+ color: white;
+ border: 1px solid #dc2626;
+
+ &:hover {
+ opacity: 0.8;
+ }
+}
+
+.fm-button-small {
+ font-size: 10px;
+ padding: 2px 3px;
+}
+
+.fm-button-medium {
+ width: 100%;
+ height: 40px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.fm-button-disabled {
+ background-color: rgb(156, 163, 175);
+ border: 1px solid rgb(156, 163, 175);
+
+ &:hover {
+ opacity: 1;
+ cursor: not-allowed;
+ }
+}
+
+.fm-button-icon {
+ display: flex;
+ gap: 16px;
+ align-items: center;
+}
diff --git a/src/modules/filemanager/components/Button/Button.tsx b/src/modules/filemanager/components/Button/Button.tsx
new file mode 100644
index 0000000..91cedd3
--- /dev/null
+++ b/src/modules/filemanager/components/Button/Button.tsx
@@ -0,0 +1,34 @@
+import { ReactElement } from 'react'
+import './Button.scss'
+
+interface ButtonProps {
+ label: string
+ onClick?: () => void
+ icon?: ReactElement
+ size?: 'small' | 'medium'
+ variant?: 'primary' | 'secondary' | 'danger'
+ disabled?: boolean
+ width?: number
+}
+
+export function Button({
+ label,
+ onClick,
+ icon,
+ size = 'medium',
+ variant = 'primary',
+ disabled,
+ width,
+}: ButtonProps): ReactElement {
+ return (
+
+ setIsUpgradeDriveModalOpen(false)}
+ setErrorMessage={setErrorMessage}
+ />
+ )}
+
+ setShowProgressModal(false)}
+ />
+ )}
+
+ {!showProgressModal && (loading || isCreationInProgress) && (
+
+
+
+ {isUpgradeDriveModalOpen && actualStamp && adminDrive && (
+
+ Capacity
+
+ File Manager Available: Until: {expiresAt}
+
+ !isBusy && actualStamp && adminDrive && setIsUpgradeDriveModalOpen(true)}
+ aria-disabled={isBusy ? 'true' : 'false'}
+ >
+ {isBusy ? 'Working…' : 'Manage'}
+
+
+ {isUpgrading && (
+
+
+ Upgrading admin drive…
+
+ )}
+
+ {showProgressModal && (
+
+
+ )}
+ setShowProgressModal(true)}>
+ {statusText}
+
+
+ {icon} {label}
+
+ )
+}
diff --git a/src/modules/filemanager/components/ConfirmModal/ConfirmModal.scss b/src/modules/filemanager/components/ConfirmModal/ConfirmModal.scss
new file mode 100644
index 0000000..d270a71
--- /dev/null
+++ b/src/modules/filemanager/components/ConfirmModal/ConfirmModal.scss
@@ -0,0 +1,40 @@
+.fm-modal-container .fm-modal-window {
+ width: min(560px, 92vw);
+}
+
+.fm-modal-container .fm-modal-window-header {
+ font-weight: 600;
+}
+
+.fm-modal-container .fm-modal-window-body .fm-modal-white-section {
+ max-height: 50vh;
+ overflow: auto;
+ word-break: break-word;
+ padding: 12px 14px;
+ border-radius: 8px;
+}
+
+.fm-modal-container .fm-modal-window-footer {
+ display: flex;
+ justify-content: flex-end;
+ gap: 8px;
+}
+
+@media (max-width: 480px) {
+ .fm-modal-container .fm-modal-window {
+ width: 94vw;
+ }
+ .fm-modal-container .fm-modal-window-body .fm-modal-white-section {
+ max-height: 56vh;
+ }
+}
+
+.fm-modal-no-background {
+ background: transparent;
+}
+
+.fm-spinner-message {
+ display: flex;
+ justify-content: space-between;
+ margin-bottom: 12px;
+}
diff --git a/src/modules/filemanager/components/ConfirmModal/ConfirmModal.tsx b/src/modules/filemanager/components/ConfirmModal/ConfirmModal.tsx
new file mode 100644
index 0000000..bcb371e
--- /dev/null
+++ b/src/modules/filemanager/components/ConfirmModal/ConfirmModal.tsx
@@ -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
+
,
+ modalRoot,
+ )
+}
diff --git a/src/modules/filemanager/components/ContextMenu/ContextMenu.scss b/src/modules/filemanager/components/ContextMenu/ContextMenu.scss
new file mode 100644
index 0000000..f172187
--- /dev/null
+++ b/src/modules/filemanager/components/ContextMenu/ContextMenu.scss
@@ -0,0 +1,6 @@
+.fm-context-menu {
+ background: white;
+ border: 1px solid #ccc;
+ border-radius: 4px;
+ padding: 0px;
+}
diff --git a/src/modules/filemanager/components/ContextMenu/ContextMenu.tsx b/src/modules/filemanager/components/ContextMenu/ContextMenu.tsx
new file mode 100644
index 0000000..ebdfacf
--- /dev/null
+++ b/src/modules/filemanager/components/ContextMenu/ContextMenu.tsx
@@ -0,0 +1,11 @@
+import { ReactElement } from 'react'
+
+import './ContextMenu.scss'
+
+interface ContextMenuProps {
+ children?: ReactElement | ReactElement[]
+}
+
+export function ContextMenu({ children }: ContextMenuProps): ReactElement {
+ return
+
+ {title}
+
+
+ {isProgress ? (
+
+
+ {showFooter && (onCancel || onConfirm) && (
+
+
+ ) : (
+
+
+ {showMinimize && }
+ {spinnerMessage || 'Working…'}
+
+ {message}
+ )}
+
+ {onCancel && }
+ {onConfirm &&
+ )}
+ {children}
+}
diff --git a/src/modules/filemanager/components/CreateDriveModal/CreateDriveModal.scss b/src/modules/filemanager/components/CreateDriveModal/CreateDriveModal.scss
new file mode 100644
index 0000000..8df32af
--- /dev/null
+++ b/src/modules/filemanager/components/CreateDriveModal/CreateDriveModal.scss
@@ -0,0 +1,85 @@
+.fm-create-drive-modal-container {
+ position: absolute;
+
+ top: 0;
+ width: 100%;
+ height: 100vh;
+ background: #000c;
+ backdrop-filter: blur(5px);
+ z-index: 1300;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+.fm-create-drive-modal {
+ width: 450px;
+ padding: 24px;
+ background-color: rgb(255, 255, 255);
+ box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
+ display: flex;
+ flex-direction: column;
+ gap: 24px;
+ justify-content: center;
+ align-items: center;
+}
+
+.fm-create-drive-modal-header {
+ display: flex;
+ width: 100%;
+ justify-content: start;
+ font-size: 18px;
+ color: rgb(237, 129, 49);
+ font-weight: 700;
+}
+
+.fm-create-drive-modal-body {
+ display: flex;
+ flex-direction: column;
+ gap: 24px;
+ width: 100%;
+ border: 1px solid rgb(229, 231, 235);
+ padding: 24px;
+ background-color: rgb(249, 250, 251);
+}
+
+.fm-create-drive-modal-input-container {
+ width: 100%;
+ display: flex;
+ flex-direction: column;
+ gap: 4px;
+ color: rgb(55, 65, 81);
+
+ & input {
+ padding: 8px 12px;
+ font-size: 14px;
+ font-family: 'iAWriterQuattroV';
+ border: 1px solid rgb(209, 213, 219);
+
+ line-height: 21px;
+ outline: none;
+ }
+
+ & input::placeholder {
+ color: #aaa;
+ }
+
+ & input:focus {
+ border: 1px solid rgb(237, 129, 49) !important;
+ }
+}
+
+.fm-create-drive-modal-footer {
+ display: flex;
+ width: 100%;
+ justify-content: center;
+ align-items: center;
+ gap: 12px;
+}
+
+.fm-modal-info-note {
+ font-size: 0.85rem;
+ color: #666;
+ margin-top: 4px;
+ line-height: 1.4;
+}
diff --git a/src/modules/filemanager/components/CreateDriveModal/CreateDriveModal.tsx b/src/modules/filemanager/components/CreateDriveModal/CreateDriveModal.tsx
new file mode 100644
index 0000000..4feac08
--- /dev/null
+++ b/src/modules/filemanager/components/CreateDriveModal/CreateDriveModal.tsx
@@ -0,0 +1,216 @@
+import { ReactElement, useContext, useEffect, useRef, useState } from 'react'
+
+import { BZZ, Duration, RedundancyLevel, Size, Utils } from '@ethersphere/bee-js'
+import './CreateDriveModal.scss'
+import { CustomDropdown } from '../CustomDropdown/CustomDropdown'
+import { Button } from '../Button/Button'
+import { fmFetchCost, handleCreateDrive } from '../../utils/bee'
+import { getExpiryDateByLifetime } from '../../utils/common'
+import { erasureCodeMarks } from '../../constants/common'
+import { desiredLifetimeOptions } from '../../constants/stamps'
+import { Context as BeeContext } from '../../../../providers/Bee'
+import { Context as SettingsContext } from '../../../../providers/Settings'
+import { FMSlider } from '../Slider/Slider'
+import { Context as FMContext } from '../../../../providers/FileManager'
+import { getHumanReadableFileSize } from '../../../../utils/file'
+import { Tooltip } from '../Tooltip/Tooltip'
+import { TOOLTIPS } from '../../constants/tooltips'
+
+const minMarkValue = Math.min(...erasureCodeMarks.map(mark => mark.value))
+const maxMarkValue = Math.max(...erasureCodeMarks.map(mark => mark.value))
+
+interface CreateDriveModalProps {
+ onCancelClick: () => void
+ onDriveCreated: () => void
+ onCreationStarted: () => void
+ onCreationError: (name: string) => void
+}
+// TODO: select existing batch id or create a new one - just like in InitialModal
+export function CreateDriveModal({
+ onCancelClick,
+ onDriveCreated,
+ onCreationStarted,
+ onCreationError,
+}: CreateDriveModalProps): ReactElement {
+ const [isCreateEnabled, setIsCreateEnabled] = useState(false)
+ const [isBalanceSufficient, setIsBalanceSufficient] = useState(true)
+ const [capacity, setCapacity] = useState(0)
+ const [lifetimeIndex, setLifetimeIndex] = useState(-1)
+ const [validityEndDate, setValidityEndDate] = useState(new Date())
+ const [driveName, setDriveName] = useState('')
+ const [capacityIndex, setCapacityIndex] = useState(-1)
+ const [encryptionEnabled] = useState(false)
+ const [erasureCodeLevel, setErasureCodeLevel] = useState(RedundancyLevel.OFF)
+ const [cost, setCost] = useState('0')
+
+ const [sizeMarks, setSizeMarks] = useState<{ value: number; label: string }[]>([])
+ const { walletBalance } = useContext(BeeContext)
+ const { beeApi } = useContext(SettingsContext)
+ const { fm } = useContext(FMContext)
+ const currentFetch = useRef
+
+ )
+}
diff --git a/src/modules/filemanager/components/CustomDropdown/CustomDropdown.scss b/src/modules/filemanager/components/CustomDropdown/CustomDropdown.scss
new file mode 100644
index 0000000..af77772
--- /dev/null
+++ b/src/modules/filemanager/components/CustomDropdown/CustomDropdown.scss
@@ -0,0 +1,86 @@
+.fm-custom-dropdown {
+ position: relative;
+ width: 100%;
+ font-size: 14px;
+ user-select: none;
+
+ .fm-custom-dropdown-selected {
+ padding: 8px 12px;
+ border: 1px solid rgb(209, 213, 219);
+ border-radius: 0px;
+ background: #fff;
+ color: rgb(55, 65, 81);
+ cursor: pointer;
+ position: relative;
+ transition: border-color 0.2s;
+ outline: none;
+ display: flex;
+ align-items: center;
+ min-height: 40px;
+
+ .placeholder {
+ color: #aaa;
+ }
+
+ & .arrow {
+ position: absolute;
+ right: 12px;
+ top: 50%;
+ transform: translateY(-50%) rotate(0deg);
+ width: 16px;
+ height: 16px;
+ pointer-events: none;
+ display: inline-block;
+ transition: transform 0.2s;
+ }
+
+ &.open .arrow {
+ transform: translateY(-50%) rotate(180deg);
+ }
+
+ &:focus,
+ &.open {
+ border-color: rgb(237, 129, 49);
+ }
+ }
+
+ .fm-custom-dropdown-list {
+ position: absolute;
+ left: 0;
+ right: 0;
+ top: calc(100% + 4px);
+ background: #fff;
+ border: 1px solid rgb(209, 213, 219);
+ border-radius: 0px;
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+ z-index: 20;
+ margin: 0;
+ padding: 4px 0;
+ list-style: none;
+ max-height: 220px;
+ overflow-y: auto;
+ animation: fadeIn 0.15s;
+
+ li {
+ padding: 10px 16px;
+ cursor: pointer;
+ color: rgb(55, 65, 81);
+ transition: background 0.15s;
+ &:hover,
+ &.selected {
+ background: #f5f5f5;
+ }
+ }
+ }
+}
+
+@keyframes fadeIn {
+ from {
+ opacity: 0;
+ transform: translateY(-8px);
+ }
+ to {
+ opacity: 1;
+ transform: translateY(0);
+ }
+}
diff --git a/src/modules/filemanager/components/CustomDropdown/CustomDropdown.tsx b/src/modules/filemanager/components/CustomDropdown/CustomDropdown.tsx
new file mode 100644
index 0000000..2deeb05
--- /dev/null
+++ b/src/modules/filemanager/components/CustomDropdown/CustomDropdown.tsx
@@ -0,0 +1,74 @@
+import { useState, useRef } from 'react'
+import './CustomDropdown.scss'
+import ArrowDropdown from 'remixicon-react/ArrowDropDownLineIcon'
+import { useClickOutside } from '../../hooks/useClickOutside'
+import { Tooltip } from '../Tooltip/Tooltip'
+
+interface Option {
+ value: number
+ label: string
+}
+
+interface CustomDropdownProps {
+ options: Option[]
+ value: number
+ onChange: (value: number, index: number) => void
+ placeholder?: string
+ id?: string
+ label?: string
+ icon?: React.ReactNode
+ infoText?: string
+}
+
+export function CustomDropdown({
+ options,
+ value,
+ onChange,
+ placeholder,
+ id,
+ label,
+ icon,
+ infoText,
+}: CustomDropdownProps) {
+ const [open, setOpen] = useState(false)
+ const ref = useRef
+
+ Create new drive
+
+
+
+
+ setDriveName(e.target.value)}
+ />
+
+
+
+
+
+ Drive sizes shown above are system-calculated based on your current stamp configuration
+
+
+
+
+
+
+ setErasureCodeLevel(value)}
+ minValue={minMarkValue}
+ maxValue={maxMarkValue}
+ step={1}
+ />
+
+
+
+
+
+
+ Estimated Cost:
+
+ {cost} BZZ {isBalanceSufficient ? '' : '(Insufficient balance)'}
+
+
+ (Based on current network conditions)
+
+
+
+ {label && (
+
+ )}
+
+ )
+}
diff --git a/src/modules/filemanager/components/DeleteFileModal/DeleteFileModal.scss b/src/modules/filemanager/components/DeleteFileModal/DeleteFileModal.scss
new file mode 100644
index 0000000..b505434
--- /dev/null
+++ b/src/modules/filemanager/components/DeleteFileModal/DeleteFileModal.scss
@@ -0,0 +1,17 @@
+.fm-delete-file-modal {
+ width: 510px;
+}
+
+.fm-delete-file-modal-list {
+ margin: 0 0 12px 0;
+ padding: 0;
+ list-style: none;
+ max-height: 240px;
+ overflow: auto;
+}
+
+.fm-delete-file-modal-list-item {
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ overflow: hidden;
+}
diff --git a/src/modules/filemanager/components/DeleteFileModal/DeleteFileModal.tsx b/src/modules/filemanager/components/DeleteFileModal/DeleteFileModal.tsx
new file mode 100644
index 0000000..ad6bf6c
--- /dev/null
+++ b/src/modules/filemanager/components/DeleteFileModal/DeleteFileModal.tsx
@@ -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 setOpen(prev => !prev)}
+ >
+ {selectedLabel || {placeholder} }
+
+
+ {open && (
+ -
+ {options.map((opt, index) => (
+
- { + onChange(opt.value, index) + setOpen(false) + }} + > + {opt.label} + + ))} +
+
,
+ modalRoot,
+ )
+}
diff --git a/src/modules/filemanager/components/DestroyDriveModal/DestroyDriveModal.scss b/src/modules/filemanager/components/DestroyDriveModal/DestroyDriveModal.scss
new file mode 100644
index 0000000..7b683cd
--- /dev/null
+++ b/src/modules/filemanager/components/DestroyDriveModal/DestroyDriveModal.scss
@@ -0,0 +1,6 @@
+.fm-modal-body-destroy {
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ gap: 8px;
+}
diff --git a/src/modules/filemanager/components/DestroyDriveModal/DestroyDriveModal.tsx b/src/modules/filemanager/components/DestroyDriveModal/DestroyDriveModal.tsx
new file mode 100644
index 0000000..1ab7b58
--- /dev/null
+++ b/src/modules/filemanager/components/DestroyDriveModal/DestroyDriveModal.tsx
@@ -0,0 +1,61 @@
+import { ReactElement, useState } from 'react'
+import '../../styles/global.scss'
+import './DestroyDriveModal.scss'
+import { Button } from '../Button/Button'
+import { createPortal } from 'react-dom'
+import { DriveInfo } from '@solarpunkltd/file-manager-lib'
+
+interface DestroyDriveModalProps {
+ drive: DriveInfo
+ onCancelClick: () => void
+ doDestroy: () => void | Promise
+
+
+
+
+
+ {isBulk && (
+
+
+
+
+ -
+ {names.map(n => (
+
- + {n} + + ))} +
+
+
+ setValue(FileAction.Trash)} />}
+ label={
+
+
+
+
+ }
+ />
+ Move to Trash
+ 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.
+
+
+ setValue(FileAction.Forget)} />}
+ label={
+
+
+
+
+ }
+ />
+ Forget
+ e.preventDefault()}>
+ Removes {subjectNoun} from your view. The data will remain on Swarm until{' '}
+ {currentDriveName ?? 'the drive'} expires. This action cannot be easily undone.
+
+
+ setValue(FileAction.Destroy)} />
+ }
+ label={
+
+
+
+ }
+ />
+
+ Destroy entire drive {currentDriveName ? `‘${currentDriveName}’` : ''} to delete this{' '}
+ {subjectNoun}
+
+ e.preventDefault()}>
+
+
+
+
+
,
+ modalRoot,
+ )
+}
diff --git a/src/modules/filemanager/components/ErrorModal/ErrorModal.scss b/src/modules/filemanager/components/ErrorModal/ErrorModal.scss
new file mode 100644
index 0000000..495ef44
--- /dev/null
+++ b/src/modules/filemanager/components/ErrorModal/ErrorModal.scss
@@ -0,0 +1,24 @@
+.fm-error-modal-container {
+ position: absolute;
+ inset: 0;
+ width: 100%;
+ height: 100%;
+ z-index: 1500;
+ background: rgba(255, 255, 255, 0.6);
+ -webkit-backdrop-filter: blur(4px);
+ backdrop-filter: blur(4px);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.fm-error-modal-message {
+ display: flex;
+ justify-content: center;
+}
+
+.fm-error-modal-button-container {
+ width: 100%;
+ display: flex;
+ justify-content: right;
+}
diff --git a/src/modules/filemanager/components/ErrorModal/ErrorModal.tsx b/src/modules/filemanager/components/ErrorModal/ErrorModal.tsx
new file mode 100644
index 0000000..f597440
--- /dev/null
+++ b/src/modules/filemanager/components/ErrorModal/ErrorModal.tsx
@@ -0,0 +1,21 @@
+import { ReactElement } from 'react'
+import './ErrorModal.scss'
+import { Button } from '../Button/Button'
+
+interface ErrorModalProps {
+ label: string
+ onClick: () => void
+}
+
+export function ErrorModal({ label, onClick }: ErrorModalProps): ReactElement {
+ return (
+
+
+ Destroy entire drive
+
+
+
+
+ Destroy Drive? This Action Is Permanent
+ All files stored only on this drive will become inaccessible.
+
+ While the data may still temporarily persist on Swarm, it will be permanently removed once the storage
+ expires and the data is garbage collected by the network. The File Manager will no longer recognise or
+ recover these files.
+
+ Confirmation:
+ Requires typing a fixed expression to prevent accidental deletion. This action cannot be undone.
+
+ Type: {destroyDriveText}
+
+
+ setDriveNameInput(e.target.value)}
+ />
+
+
+
+
+
+ )
+}
diff --git a/src/modules/filemanager/components/ExpiringNotificationModal/ExpiringNotificationModal.scss b/src/modules/filemanager/components/ExpiringNotificationModal/ExpiringNotificationModal.scss
new file mode 100644
index 0000000..22d8cae
--- /dev/null
+++ b/src/modules/filemanager/components/ExpiringNotificationModal/ExpiringNotificationModal.scss
@@ -0,0 +1,35 @@
+.fm-expiring-notification-modal-body {
+ display: flex;
+ flex-direction: column;
+ gap: 12px;
+}
+
+.fm-expiring-notification-modal-section-left {
+ display: flex;
+ gap: 16px;
+}
+
+.fm-expiring-notification-modal-section-right {
+ display: flex;
+ flex-direction: column;
+ align-items: end;
+}
+
+.fm-expiring-notification-modal-section-left-header {
+ font-size: 15px;
+}
+
+.fm-expiring-notification-modal-section-right-header {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+}
+
+.fm-expiring-notification-modal-section-right-button {
+ margin-top: 20px;
+ width: 100px;
+}
+
+.fm-expiring-notification-modal-footer-one-button {
+ width: 33%;
+}
diff --git a/src/modules/filemanager/components/ExpiringNotificationModal/ExpiringNotificationModal.tsx b/src/modules/filemanager/components/ExpiringNotificationModal/ExpiringNotificationModal.tsx
new file mode 100644
index 0000000..5e4a7d2
--- /dev/null
+++ b/src/modules/filemanager/components/ExpiringNotificationModal/ExpiringNotificationModal.tsx
@@ -0,0 +1,149 @@
+import { ReactElement, useState, useMemo, useEffect } from 'react'
+import { Warning } from '@material-ui/icons'
+import './ExpiringNotificationModal.scss'
+import '../../styles/global.scss'
+
+import { Button } from '../Button/Button'
+import { createPortal } from 'react-dom'
+import DriveIcon from 'remixicon-react/HardDrive2LineIcon'
+import CalendarIcon from 'remixicon-react/CalendarLineIcon'
+import AlertIcon from 'remixicon-react/AlertLineIcon'
+import { UpgradeDriveModal } from '../UpgradeDriveModal/UpgradeDriveModal'
+import { getDaysLeft } from '../../utils/common'
+
+import { PostageBatch, Size } from '@ethersphere/bee-js'
+import { DriveInfo } from '@solarpunkltd/file-manager-lib'
+
+const EXPIRING_ITEMS_PAGE_SIZE = 3
+
+interface ExpiringNotificationModalProps {
+ stamps: PostageBatch[]
+ drives: DriveInfo[]
+ onCancelClick: () => void
+ setErrorMessage?: (error: string) => void
+}
+
+export function ExpiringNotificationModal({
+ stamps,
+ drives,
+ onCancelClick,
+ setErrorMessage,
+}: ExpiringNotificationModalProps): ReactElement {
+ const [showUpgradeDriveModal, setShowUpgradeDriveModal] = useState(false)
+ const [actualStamp, setActualStamp] = useState
+
+ {label}
+
+
+
+
+
,
+ modalRoot,
+ )
+}
diff --git a/src/modules/filemanager/components/FileBrowser/FileBrowser.scss b/src/modules/filemanager/components/FileBrowser/FileBrowser.scss
new file mode 100644
index 0000000..97e0fc8
--- /dev/null
+++ b/src/modules/filemanager/components/FileBrowser/FileBrowser.scss
@@ -0,0 +1,318 @@
+.fm-file-browser-container {
+ display: flex;
+ flex-direction: column;
+ width: 100%;
+ height: calc(100vh - 120px);
+ background-color: white;
+ position: relative;
+}
+
+.fm-file-browser-content {
+ position: relative;
+ overflow: auto;
+ display: flex;
+ flex-direction: column;
+ flex: 1 1 auto;
+}
+
+.fm-file-browser-content-header {
+ display: grid;
+ padding: 12px;
+ align-items: center;
+ justify-content: space-between;
+ border-bottom: 1px solid rgb(226, 232, 240);
+}
+
+.fm-file-browser-content[data-search-mode='false'] .fm-file-browser-content-header {
+ grid-template-columns: 32px 2fr 1fr 1fr;
+}
+
+.fm-file-browser-content[data-search-mode='true'] .fm-file-browser-content-header {
+ grid-template-columns: 32px 2fr 1.1fr 1fr 1fr;
+}
+
+.fm-file-browser-content-header-item {
+ display: flex;
+ align-items: center;
+ justify-content: start;
+ gap: 8px;
+ font-weight: 700;
+
+ & input {
+ margin: 0;
+ width: 16px;
+ height: 16px;
+ accent-color: rgb(237, 129, 49);
+ }
+}
+
+.fm-file-browser-content-header-item.fm-checkbox {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.fm-file-browser-content-header-item-icon {
+ width: 16px;
+ height: 16px;
+ color: rgb(237, 129, 49);
+}
+
+.fm-file-browser-content-body {
+ flex: 1 1 auto;
+ position: relative;
+}
+
+.fm-file-browser-footer {
+ display: flex;
+ align-items: center;
+ justify-content: flex-start;
+ max-height: 45px;
+ padding: 12px;
+ border-top: 1px solid #929292;
+ background-color: #ededed;
+}
+
+.fm-file-browser-footer > * {
+ flex: 0 0 auto;
+}
+.fm-file-browser-footer > :nth-child(1) {
+ margin-right: 8px;
+}
+.fm-file-browser-footer > :nth-child(3) {
+ margin-left: auto;
+}
+.fm-file-browser-footer {
+ column-gap: 12px;
+}
+
+.fm-file-browser-context-menu {
+ position: absolute;
+ z-index: 1000;
+}
+.fm-file-browser-context-menu[data-drop='up'] {
+ transform-origin: bottom left;
+}
+.fm-file-browser-context-menu[data-drop='up'] .caret {
+ transform: rotate(180deg);
+ bottom: -6px;
+ top: auto;
+}
+
+.fm-context-item {
+ margin: 4px;
+ padding: 8px;
+
+ &:hover {
+ background-color: #d1d1d1;
+ cursor: pointer;
+ }
+ &.red {
+ color: rgb(220, 38, 38);
+ }
+}
+
+.fm-context-item[aria-disabled="true"] {
+ opacity: 0.5;
+ cursor: not-allowed;
+}
+
+.fm-context-item-border {
+ border-bottom: 1px solid #d1d1d1;
+}
+
+.fm-upload-download-indicator {
+ text-decoration: underline;
+}
+
+.fm-drag-overlay {
+ position: absolute;
+ inset: 0;
+ width: 100%;
+ height: 100%;
+ z-index: 1500;
+ background: rgba(255, 255, 255, 0.6);
+ -webkit-backdrop-filter: blur(4px);
+ backdrop-filter: blur(4px);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ pointer-events: auto;
+}
+
+.fm-drag-text {
+ font-size: 1.25rem;
+ font-weight: 600;
+ padding: 0.75rem 1rem;
+ background: rgba(255, 255, 255, 0.85);
+ border-radius: 8px;
+ border: 1px solid rgba(0, 0, 0, 0.06);
+}
+
+.fm-drop-hint {
+ padding: 24px;
+ color: #6b7280;
+}
+
+.fm-context-item {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ gap: 8px;
+}
+
+.fm-info {
+ font-weight: 600;
+ width: 16px;
+ height: 16px;
+ border-radius: 50%;
+ display: inline-grid;
+ place-items: center;
+ font-size: 11px;
+ line-height: 1;
+ border: 1px solid currentColor;
+ opacity: .6;
+ cursor: help;
+}
+
+.fm-info--inline {
+ position: relative;
+}
+
+.fm-info--inline::after {
+ content: attr(data-tip);
+ position: absolute;
+ left: calc(100% + 8px);
+ top: 50%;
+ transform: translateY(-50%);
+ max-width: 280px;
+ white-space: normal;
+ padding: 8px 10px;
+ border-radius: 6px;
+ background: rgba(17, 24, 39, 0.98);
+ color: #fff;
+ font-size: 12px;
+ line-height: 1.25;
+ letter-spacing: 0.1px;
+ box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
+ pointer-events: none;
+ opacity: 0;
+ visibility: hidden;
+ transition: opacity .08s ease, visibility .08s ease;
+ z-index: 2000;
+}
+
+.fm-info--inline::before {
+ content: "";
+ position: absolute;
+ left: calc(100% + 2px);
+ top: 50%;
+ transform: translateY(-50%);
+ border: 6px solid transparent;
+ border-right-color: rgba(17, 24, 39, 0.98);
+ opacity: 0;
+ visibility: hidden;
+ transition: opacity .08s ease, visibility .08s ease;
+ z-index: 2001;
+}
+
+.fm-info--inline:hover::after,
+.fm-info--inline:focus-visible::after,
+.fm-info--inline:hover::before,
+.fm-info--inline:focus-visible::before {
+ opacity: 1;
+ visibility: visible;
+}
+
+.fm-file-browser-context-menu {
+ overflow: visible;
+}
+.fm-refresh-overlay {
+ position: absolute;
+ inset: 0;
+ background: rgba(255, 255, 255, 0.7);
+ backdrop-filter: blur(4px);
+ z-index: 2000;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.fm-refresh-content {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ gap: 8px;
+ color: #374151;
+ font-size: 14px;
+ font-weight: 500;
+}
+
+.fm-refresh-text {
+ animation: fadeIn 0.3s ease-in-out;
+}
+
+.fm-file-browser-content-header-item {
+ background: none;
+ border: 0;
+ padding: 0;
+ font: inherit;
+ text-align: left;
+ cursor: pointer;
+}
+
+.fm-header-cell {
+ display: inline-flex;
+ align-items: center;
+ gap: 6px; /* space between sort button and the × bubble */
+}
+
+.fm-header-button {
+ background: none;
+ border: 0;
+ padding: 0;
+ margin: 0;
+ font: inherit;
+ color: inherit;
+ display: inline-flex;
+ align-items: center;
+ gap: 8px;
+ cursor: pointer;
+}
+
+.fm-header-button[data-dir='asc'] .fm-file-browser-content-header-item-icon {
+ transform: rotate(180deg);
+}
+
+.fm-file-browser-content-header-item-icon.is-inactive {
+ opacity: 0.4;
+}
+
+.fm-sort-clear {
+ display: inline-grid;
+ place-items: center;
+ width: 16px;
+ height: 16px;
+ border-radius: 9999px;
+ border: 1px solid currentColor;
+ font-size: 12px;
+ line-height: 1;
+ padding: 0;
+ margin: 0;
+ background: transparent;
+ cursor: pointer;
+ opacity: 0.8;
+}
+
+.fm-sort-clear:hover,
+.fm-sort-clear:focus-visible {
+ opacity: 1;
+ outline: none;
+ box-shadow: 0 0 0 2px rgba(237, 129, 49, 0.2);
+}
+
+@keyframes fadeIn {
+ from { opacity: 0; transform: translateY(2px); }
+ to { opacity: 1; transform: translateY(0); }
+}
diff --git a/src/modules/filemanager/components/FileBrowser/FileBrowser.tsx b/src/modules/filemanager/components/FileBrowser/FileBrowser.tsx
new file mode 100644
index 0000000..700ab0b
--- /dev/null
+++ b/src/modules/filemanager/components/FileBrowser/FileBrowser.tsx
@@ -0,0 +1,496 @@
+import { ReactElement, useEffect, useLayoutEffect, useRef, useState, useContext } from 'react'
+import './FileBrowser.scss'
+import { FileBrowserHeader } from './FileBrowserHeader/FileBrowserHeader'
+import { FileBrowserContent } from './FileBrowserContent/FileBrowserContent'
+import { useContextMenu } from '../../hooks/useContextMenu'
+import { NotificationBar } from '../NotificationBar/NotificationBar'
+import { FileAction, FileTransferType, TransferStatus, ViewType } from '../../constants/transfers'
+import { FileProgressNotification } from '../FileProgressNotification/FileProgressNotification'
+import { useView } from '../../../../pages/filemanager/ViewContext'
+import { Context as FMContext } from '../../../../providers/FileManager'
+import { useTransfers } from '../../hooks/useTransfers'
+import { useSearch } from '../../../../pages/filemanager/SearchContext'
+import { useFileFiltering } from '../../hooks/useFileFiltering'
+import { useDragAndDrop } from '../../hooks/useDragAndDrop'
+import { useBulkActions } from '../../hooks/useBulkActions'
+import { SortKey, SortDir, useSorting } from '../../hooks/useSorting'
+
+import { Point, Dir, safeSetState } from '../../utils/common'
+import { computeContextMenuPosition } from '../../utils/ui'
+import { FileBrowserTopBar } from './FileBrowserTopBar/FileBrowserTopBar'
+import { handleDestroyDrive } from '../../utils/bee'
+import { Context as SettingsContext } from '../../../../providers/Settings'
+import { ErrorModal } from '../ErrorModal/ErrorModal'
+import { FileBrowserModals } from './FileBrowserModals'
+import { FileBrowserContextMenu } from './FileBrowserMenu/FileBrowserContextMenu'
+import { FileInfo } from '@solarpunkltd/file-manager-lib'
+
+const extractFilesFromClipboardEvent = (e: React.ClipboardEvent): File[] => {
+ const out: File[] = []
+ const items = e.clipboardData?.items ?? []
+ for (let i = 0; i < items.length; i++) {
+ const it = items[i]
+
+ if (it.kind === 'file') {
+ const f = it.getAsFile()
+
+ if (f) out.push(f)
+ }
+ }
+
+ return out
+}
+
+interface FileBrowserProps {
+ errorMessage?: string
+ setErrorMessage?: (error: string) => void
+}
+
+export function FileBrowser({ errorMessage, setErrorMessage }: FileBrowserProps): ReactElement {
+ const { showContext, pos, contextRef, handleContextMenu, handleCloseContext } = useContextMenu
+
+ {showUpgradeDriveModal && actualStamp && actualDrive && (
+
+
+ The following drives will expire soon. Extend them to keep your data accessible.
+
+
+ {paginatedStamps.map((stamp, index) => {
+ const daysLeft = getDaysLeft(stamp.duration.toEndDate())
+ let daysClass = ''
+
+ const drive = drives.find(d => d.batchId.toString() === stamp.batchID.toString())
+
+ if (!drive) return null
+
+ if (daysLeft < 10) {
+ daysClass = 'fm-red-font'
+ } else if (daysLeft < 30) {
+ daysClass = 'fm-swarm-orange-font'
+ }
+
+ return (
+
+
+
+ )
+ })}
+
+
+
+
+
+ {stamp.label} {drive.isAdmin &&
+
+ {Size.fromBytes(stamp.size.toBytes() * stamp.usage).toFormattedString()} /{' '}
+ {stamp.size.toFormattedString()}
+
+
+
+
+
+ {daysLeft} days left
+
+
+
+
+
+
+
+ {totalPages > 1 && (
+
+
+ Page {currentPage + 1} / {totalPages} · total {sortedStamps.length}
+
+ {currentPage > 0 && (
+
+ )}
+
+
+
+ )
+}
diff --git a/src/modules/filemanager/components/FileBrowser/FileBrowserContent/FileBrowserContent.tsx b/src/modules/filemanager/components/FileBrowser/FileBrowserContent/FileBrowserContent.tsx
new file mode 100644
index 0000000..db33ba5
--- /dev/null
+++ b/src/modules/filemanager/components/FileBrowser/FileBrowserContent/FileBrowserContent.tsx
@@ -0,0 +1,130 @@
+import { ReactElement, useCallback } from 'react'
+import { FileItem } from '../FileItem/FileItem'
+import { FileInfo, DriveInfo } from '@solarpunkltd/file-manager-lib'
+import { DownloadProgress, TrackDownloadProps, ViewType } from '../../../constants/transfers'
+import { getFileId } from '../../../utils/common'
+
+interface FileBrowserContentProps {
+ listToRender: FileInfo[]
+ drives: DriveInfo[]
+ currentDrive: DriveInfo | null
+ view: ViewType
+ isSearchMode: boolean
+ trackDownload: (props: TrackDownloadProps) => (dp: DownloadProgress) => void
+ selectedIds?: Set
+ toggle(SortKey.Name)}
+ onSortSize={() => toggle(SortKey.Size)}
+ onSortDate={() => toggle(SortKey.Timestamp)}
+ onSortDrive={() => toggle(SortKey.Drive)}
+ onClearSort={reset}
+ />
+ setShowBulkDeleteModal(false)}
+ onDeleteProceed={handleDeleteModalProceed}
+ onForgetConfirm={async () => {
+ await bulk.bulkForget(bulk.selectedFiles)
+ setConfirmBulkForget(false)
+ }}
+ onForgetCancel={() => setConfirmBulkForget(false)}
+ onDestroyCancel={() => setShowDestroyDriveModal(false)}
+ onDestroyConfirm={handleDestroyDriveConfirm}
+ onCancelUploadConfirm={() => {
+ if (pendingCancelUpload) {
+ cancelOrDismissUpload(pendingCancelUpload)
+ setPendingCancelUpload(null)
+ }
+ }}
+ onCancelUploadCancel={() => setPendingCancelUpload(null)}
+ />
+
+ {isRefreshing && (
+
+
+ {
+ if (e.button !== 0) return
+ handleCloseContext()
+ }}
+ >
+ bulk.bulkDownload(bulk.selectedFiles),
+ restore: () => bulk.bulkRestore(bulk.selectedFiles),
+ forget: () => bulk.bulkForget(bulk.selectedFiles),
+ destroy: () => setShowDestroyDriveModal(true),
+ delete: () => setShowBulkDeleteModal(true),
+ }}
+ setErrorMessage={setErrorMessage}
+ />
+ {showError && (
+ {
+ setShowError(false)
+ setErrorMessage?.('')
+
+ return
+ }}
+ />
+ )}
+
+ {showContext && (
+
+
+ {showDragOverlay && (
+ e.stopPropagation()}
+ onClick={e => e.stopPropagation()}
+ >
+ bulk.bulkDownload(bulk.selectedFiles)}
+ onBulkRestore={() => bulk.bulkRestore(bulk.selectedFiles)}
+ onBulkDelete={() => setShowBulkDeleteModal(true)}
+ onBulkDestroy={() => setShowDestroyDriveModal(true)}
+ onBulkForget={() => bulk.bulkForget(bulk.selectedFiles)}
+ />
+
+ )}
+ {
+ e.preventDefault()
+ e.dataTransfer.dropEffect = 'copy'
+ }}
+ onDrop={handleOverlayDrop}
+ >
+
+ )}
+
+ Drop file(s) to upload
+
+
+ )}
+
+
+ Syncing latest files…
+
+
+ dismissAllUploads()}
+ />
+ cancelOrDismissDownload(name)}
+ onCloseAll={() => dismissAllDownloads()}
+ />
+
+ Create a drive to start using the file manager
+ }
+
+ if (!currentDrive) {
+ return Select a drive to upload or view its files
+ }
+
+ if (view === ViewType.Trash) {
+ return (
+
+ Files from "{currentDrive?.name}" that are trashed can be viewed here
+
+ )
+ }
+
+ return Drag & drop files here into "{currentDrive?.name}"
+ }, [drives, currentDrive, view])
+
+ const renderFileList = useCallback(
+ (filesToRender: FileInfo[], showDriveColumn = false): ReactElement[] => {
+ return filesToRender
+ .map(fi => {
+ const drive = drives.find(d => d.id.toString() === fi.driveId.toString())
+
+ return drive ? { fi, driveName: drive.name } : null
+ })
+ .filter((item): item is { fi: FileInfo; driveName: string } => item !== null)
+ .map(({ fi, driveName }) => {
+ const key = `${getFileId(fi)}::${fi.version ?? ''}::${showDriveColumn ? 'search' : 'normal'}`
+
+ return (
+ Select a drive to upload or view its files
+ }
+
+ if (view === ViewType.Expired) {
+ return (
+
+ The stamp for drive "{currentDrive?.name}" is expired, no files can be found
+
+ )
+ }
+
+ if (listToRender.length === 0) {
+ if (view === ViewType.Trash) {
+ return (
+
+ Files from "{currentDrive?.name}" that are trashed can be viewed here
+
+ )
+ }
+
+ return Drag & drop files here into "{currentDrive?.name}"
+ }
+
+ return <>{renderFileList(listToRender)}
+ }
+
+ if (listToRender.length === 0) {
+ return No results found.
+ }
+
+ return <>{renderFileList(listToRender, true)}
+}
+
+export default FileBrowserContent
diff --git a/src/modules/filemanager/components/FileBrowser/FileBrowserHeader/FileBrowserHeader.tsx b/src/modules/filemanager/components/FileBrowser/FileBrowserHeader/FileBrowserHeader.tsx
new file mode 100644
index 0000000..d350cff
--- /dev/null
+++ b/src/modules/filemanager/components/FileBrowser/FileBrowserHeader/FileBrowserHeader.tsx
@@ -0,0 +1,188 @@
+import { ReactElement } from 'react'
+import DownIcon from 'remixicon-react/ArrowDownSLineIcon'
+import { useBulkActions } from '../../../hooks/useBulkActions'
+import { SortDir, SortKey } from '../../../hooks/useSorting'
+import { capitalizeFirstLetter } from '../../../../../../src/modules/filemanager/utils/common'
+
+interface FileBrowserHeaderProps {
+ isSearchMode: boolean
+ bulk: ReturnType
+
+ )
+}
+
+function HeaderCell({
+ label,
+ isActive,
+ dir,
+ onToggle,
+ onClear,
+ ariaSort,
+ 'data-testid': testId,
+}: {
+ label: string
+ isActive: boolean
+ dir: SortDir
+ onToggle: () => void
+ onClear: () => void
+ ariaSort: AriaSortValue
+ 'data-testid'?: string
+}) {
+ return (
+
+
+
+ {isActive && (
+
+ )}
+
+ )
+}
+
+export function FileBrowserHeader({
+ isSearchMode,
+ bulk,
+ sortKey,
+ sortDir,
+ onSortName,
+ onSortSize,
+ onSortDate,
+ onSortDrive,
+ onClearSort,
+}: FileBrowserHeaderProps): ReactElement {
+ const ariaSort = (thisKey: SortKey): AriaSortValue => {
+ if (sortKey !== thisKey) return AriaSortValue.None
+
+ return sortDir === SortDir.Asc ? AriaSortValue.Ascending : AriaSortValue.Descending
+ }
+
+ return (
+
+ {
+ if (el) el.indeterminate = bulk.someChecked
+ }}
+ onChange={e => (e.target.checked ? bulk.selectAll() : bulk.clearAll())}
+ />
+
+
+ )
+}
diff --git a/src/modules/filemanager/components/FileBrowser/FileBrowserMenu/FileBrowserContextMenu.tsx b/src/modules/filemanager/components/FileBrowser/FileBrowserMenu/FileBrowserContextMenu.tsx
new file mode 100644
index 0000000..2b09c1d
--- /dev/null
+++ b/src/modules/filemanager/components/FileBrowser/FileBrowserMenu/FileBrowserContextMenu.tsx
@@ -0,0 +1,121 @@
+import { ContextMenu } from '../../ContextMenu/ContextMenu'
+import { ReactElement } from 'react'
+import '../FileBrowser.scss'
+import { ViewType } from '../../../constants/transfers'
+import { DriveInfo } from '@solarpunkltd/file-manager-lib'
+import { Tooltip } from '../../Tooltip/Tooltip'
+
+interface FileBrowserContextMenuProps {
+ drives: DriveInfo[]
+ view: ViewType
+ selectedFilesCount: number
+ onRefresh: () => void
+ onUploadFile: () => void
+ onBulkDownload: () => void
+ onBulkRestore: () => void
+ onBulkDelete: () => void
+ onBulkDestroy: () => void
+ onBulkForget: () => void
+ enableRefresh?: boolean
+}
+
+export function FileBrowserContextMenu({
+ drives,
+ view,
+ selectedFilesCount,
+ onRefresh,
+ onUploadFile,
+ onBulkDownload,
+ onBulkRestore,
+ onBulkDelete,
+ onBulkDestroy,
+ onBulkForget,
+ enableRefresh,
+}: FileBrowserContextMenuProps): ReactElement {
+ if (drives.length === 0) {
+ if (!enableRefresh) {
+ return <>
+ }
+
+ return (
+
+
+
+ {isSearchMode && (
+
+
+ )}
+
+
+
+
+
+
+
+ Refresh
+
+
+ Download
+
+ {view === ViewType.File ? (
+
+ Delete…
+
+ ) : (
+ <>
+
+ Restore
+
+
+ Destroy
+
+
+ Forget permanently
+
+
+ )}
+
+ Refresh
+
+
+ New folder
+
+
+ Upload file(s)
+
+
+ Upload folder
+
+
+ e.stopPropagation()}
+ onClick={e => {
+ e.preventDefault()
+ e.stopPropagation()
+ }}
+ >
+
+
+ Paste
+
+
+
+
+
+ Refresh
+
+ + The data remains on Swarm until the drive expires. + + } + confirmLabel="Forget" + cancelLabel="Cancel" + onConfirm={onForgetConfirm} + onCancel={onForgetCancel} + /> + )} + + {showDestroyDriveModal && currentDrive && ( +
+ To remove any (remaining) cancelled items from your browser view later, use{' '} + Right-click → Delete → Forget. + + } + confirmLabel="Cancel upload" + cancelLabel="Keep uploading" + onConfirm={onCancelUploadConfirm} + onCancel={onCancelUploadCancel} + /> + )} + + ) +} diff --git a/src/modules/filemanager/components/FileBrowser/FileBrowserTopBar/FileBrowserTopBar.scss b/src/modules/filemanager/components/FileBrowser/FileBrowserTopBar/FileBrowserTopBar.scss new file mode 100644 index 0000000..36e4264 --- /dev/null +++ b/src/modules/filemanager/components/FileBrowser/FileBrowserTopBar/FileBrowserTopBar.scss @@ -0,0 +1,52 @@ +.fm-file-browser-top-bar { + display: flex; + align-items: center; + justify-content: space-between; + width: 100%; + background-color: rgb(237, 129, 49); + padding: 12px; + gap: 8px; + color: rgb(255, 255, 255); + font-weight: 700; +} + +.fm-file-browser-container[data-search-mode="true"] .fm-file-browser-top-bar { + background-color: rgb(37, 99, 235); +} + +.fm-file-browser-top-bar__title { + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; +} + +.fm-topbar-kebab { + appearance: none; + border: 0; + background: transparent; + color: rgb(255, 255, 255); + line-height: 1; + font-size: 12px; + font-weight: bold; + border-radius: 4px; + display: inline-grid; + place-items: center; + cursor: pointer; + transition: background-color .12s ease, opacity .12s ease; +} + +.fm-topbar-kebab:hover, +.fm-topbar-kebab:focus-visible { + background: rgba(255,255,255,.12); + outline: none; +} + +.fm-topbar-kebab:active { + background: rgba(255,255,255,.18); +} + +.fm-topbar-kebab:disabled { + opacity: .5; + cursor: not-allowed; + background: transparent; +} diff --git a/src/modules/filemanager/components/FileBrowser/FileBrowserTopBar/FileBrowserTopBar.tsx b/src/modules/filemanager/components/FileBrowser/FileBrowserTopBar/FileBrowserTopBar.tsx new file mode 100644 index 0000000..0ae4130 --- /dev/null +++ b/src/modules/filemanager/components/FileBrowser/FileBrowserTopBar/FileBrowserTopBar.tsx @@ -0,0 +1,35 @@ +import { ReactElement } from 'react' +import './FileBrowserTopBar.scss' +import { useView } from '../../../../../pages/filemanager/ViewContext' +import { ViewType } from '../../../constants/transfers' + +type Props = { + onOpenMenu?: (anchorEl: HTMLElement) => void + canOpen?: boolean +} + +export function FileBrowserTopBar({ onOpenMenu, canOpen = true }: Props): ReactElement { + const { view, actualItemView } = useView() + + const viewText = view === ViewType.Trash ? ' Trash' : '' + + return ( +
+
+ )
+}
diff --git a/src/modules/filemanager/components/FileBrowser/FileItem/FileItem.scss b/src/modules/filemanager/components/FileBrowser/FileItem/FileItem.scss
new file mode 100644
index 0000000..270ac2c
--- /dev/null
+++ b/src/modules/filemanager/components/FileBrowser/FileItem/FileItem.scss
@@ -0,0 +1,104 @@
+.fm-file-item-content {
+ position: relative;
+ display: grid;
+ padding: 12px;
+
+ & input {
+ margin: 0;
+ width: 16px;
+ height: 16px;
+ }
+
+ &:hover { background-color: #d1d1d1; }
+}
+
+.fm-file-browser-content[data-search-mode='false'] .fm-file-item-content {
+ grid-template-columns: 32px 2fr 1fr 1fr;
+}
+
+.fm-file-browser-content[data-search-mode='true'] .fm-file-item-content {
+ grid-template-columns: 32px 2fr 1.1fr 1fr 1fr;
+}
+
+.fm-file-item-content-item {
+ display: flex;
+ align-items: center;
+ justify-content: start;
+ gap: 6px;
+
+ & input {
+ accent-color: var(--fm-accent, rgb(237, 129, 49));
+ }
+}
+
+.fm-file-item-content-item.fm-checkbox {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.fm-file-item-name,
+.fm-file-item-content-item.fm-name {
+ font-weight: 400;
+ gap: 8px;
+
+ & svg {
+ width: 20px;
+ height: 20px;
+ color: var(--fm-accent, #ed8131);
+ }
+}
+
+.fm-file-item-content-item.fm-drive {
+ gap: 8px;
+ min-width: 160px;
+ max-width: 240px;
+ flex: 0 0 180px;
+ opacity: 0.9;
+}
+.fm-drive-name { opacity: 0.9; }
+
+.fm-pill {
+ display: inline-flex;
+ align-items: center;
+ padding: 2px 8px;
+ border-radius: 999px;
+ font-size: 11px;
+ line-height: 1;
+ border: 1px solid transparent;
+ white-space: nowrap;
+}
+.fm-pill--active {
+ background: #e0f2fe;
+ color: #075985;
+ border-color: #bae6fd;
+}
+.fm-pill--trash {
+ background: #fee2e2;
+ color: #b91c1c;
+ border-color: #fecaca;
+}
+
+.fm-file-browser-content[data-search-mode='true'] .fm-file-item-content::before {
+ content: '';
+ position: absolute;
+ left: 0; top: 0; bottom: 0;
+ width: 3px;
+ background: var(--fm-accent, #2563eb);
+ border-radius: 2px;
+}
+
+.fm-file-item-context-menu {
+ position: absolute;
+ z-index: 1000;
+}
+
+.fm-file-item-context-menu[data-drop='up'] {
+ transform-origin: bottom left;
+}
+
+.fm-file-item-context-menu[data-drop='up'] .caret {
+ transform: rotate(180deg);
+ bottom: -6px;
+ top: auto;
+}
diff --git a/src/modules/filemanager/components/FileBrowser/FileItem/FileItem.tsx b/src/modules/filemanager/components/FileBrowser/FileItem/FileItem.tsx
new file mode 100644
index 0000000..b99ac78
--- /dev/null
+++ b/src/modules/filemanager/components/FileBrowser/FileItem/FileItem.tsx
@@ -0,0 +1,599 @@
+import { ReactElement, useContext, useLayoutEffect, useMemo, useState, useRef, useEffect, useCallback } from 'react'
+import './FileItem.scss'
+import { GetIconElement } from '../../../utils/GetIconElement'
+import { ContextMenu } from '../../ContextMenu/ContextMenu'
+import { useContextMenu } from '../../../hooks/useContextMenu'
+import { Context as SettingsContext } from '../../../../../providers/Settings'
+import { ActionTag, DownloadProgress, TrackDownloadProps, ViewType } from '../../../constants/transfers'
+import { GetInfoModal } from '../../GetInfoModal/GetInfoModal'
+import { VersionHistoryModal } from '../../VersionHistoryModal/VersionHistoryModal'
+import { DeleteFileModal } from '../../DeleteFileModal/DeleteFileModal'
+import { RenameFileModal } from '../../RenameFileModal/RenameFileModal'
+import { buildGetInfoGroups } from '../../../utils/infoGroups'
+import type { FilePropertyGroup } from '../../../utils/infoGroups'
+import { useView } from '../../../../../pages/filemanager/ViewContext'
+import type { DriveInfo, FileInfo } from '@solarpunkltd/file-manager-lib'
+import { Context as FMContext } from '../../../../../providers/FileManager'
+import { DestroyDriveModal } from '../../DestroyDriveModal/DestroyDriveModal'
+import { ConfirmModal } from '../../ConfirmModal/ConfirmModal'
+
+import { capitalizeFirstLetter, Dir, formatBytes, isTrashed, safeSetState } from '../../../utils/common'
+import { FileAction } from '../../../constants/transfers'
+import { startDownloadingQueue, createDownloadAbort } from '../../../utils/download'
+import { computeContextMenuPosition } from '../../../utils/ui'
+import { getUsableStamps, handleDestroyDrive } from '../../../utils/bee'
+import { PostageBatch } from '@ethersphere/bee-js'
+
+interface FileItemProps {
+ fileInfo: FileInfo
+ onDownload: (props: TrackDownloadProps) => (dp: DownloadProgress) => void
+ showDriveColumn?: boolean
+ driveName: string
+ selected?: boolean
+ onToggleSelected?: (fi: FileInfo, checked: boolean) => void
+ bulkSelectedCount?: number
+ onBulk: {
+ download?: () => void
+ restore?: () => void
+ forget?: () => void
+ destroy?: () => void
+ delete?: () => void
+ }
+ setErrorMessage?: (error: string) => void
+}
+
+export function FileItem({
+ fileInfo,
+ onDownload,
+ showDriveColumn,
+ driveName,
+ selected = false,
+ onToggleSelected,
+ bulkSelectedCount,
+ onBulk,
+ setErrorMessage,
+}: FileItemProps): ReactElement {
+ const { showContext, pos, contextRef, handleContextMenu, handleCloseContext } = useContextMenu
+ {actualItemView}
+ {viewText}
+
+ {canOpen && (
+
+ )}
+
+ {children}
+
+ )
+
+ const isBulk = (bulkSelectedCount ?? 0) > 1
+
+ const renderContextMenuItems = useCallback(() => {
+ const viewItem = (
+
+ )
+
+ const downloadItem = isBulk ? (
+
+ ) : (
+
+ )
+
+ const getInfoItem = (
+
+ )
+
+ if (view === ViewType.File) {
+ return (
+ <>
+ {viewItem}
+ {downloadItem}
+
+
+
+
+
+ {getInfoItem}
+
+ )
+ }
+
+ return (
+ <>
+ {viewItem}
+ {downloadItem}
+
+ {isBulk ? (
+ <>
+
+
+
+
+ ) : (
+ <>
+
+
+
+
+
+ )}
+
+ {getInfoItem}
+
+ )
+ }, [
+ isBulk,
+ view,
+ handleDownload,
+ handleCloseContext,
+ openGetInfo,
+ doRecover,
+ onBulk,
+ currentDrive,
+ drives,
+ fileInfo.driveId,
+ setErrorMessage,
+ setShowError,
+ ])
+
+ useLayoutEffect(() => {
+ if (!showContext) return
+
+ if (rafIdRef.current !== null) {
+ cancelAnimationFrame(rafIdRef.current)
+ }
+
+ rafIdRef.current = requestAnimationFrame(() => {
+ const menu = contextRef.current
+
+ if (!menu) return
+
+ const menuRect = menu.getBoundingClientRect()
+ const containerEl = (menu.offsetParent as HTMLElement) ?? null
+ const containerRect = containerEl?.getBoundingClientRect() ?? null
+
+ const { safePos: s, dropDir: d } = computeContextMenuPosition({
+ clickPos: pos,
+ menuRect: menuRect,
+ viewport: { w: window.innerWidth, h: window.innerHeight },
+ margin: 8,
+ containerRect,
+ })
+
+ const topLeft = containerRect
+ ? { x: Math.round(s.x - containerRect.left), y: Math.round(s.y - containerRect.top) }
+ : s
+ setSafePos(topLeft)
+ setDropDir(d)
+
+ rafIdRef.current = null
+ })
+
+ return () => {
+ if (rafIdRef.current !== null) {
+ cancelAnimationFrame(rafIdRef.current)
+ rafIdRef.current = null
+ }
+ }
+ }, [showContext, pos, contextRef])
+
+ if (!currentDrive || !fm || !beeApi) {
+ return Error
+ }
+
+ return (
+
+ {
+ setShowGetInfoModal(false)
+ }}
+ />
+ )}
+
+ {showVersionHistory && (
+ {
+ setShowVersionHistory(false)
+ }}
+ onDownload={onDownload}
+ />
+ )}
+
+ {showDeleteModal && (
+ {
+ setShowDeleteModal(false)
+ }}
+ onProceed={action => {
+ setShowDeleteModal(false)
+ switch (action) {
+ case FileAction.Trash:
+ doTrash()
+ break
+ case FileAction.Forget:
+ setConfirmForget(true)
+ break
+ case FileAction.Destroy:
+ showDestroyDrive()
+ break
+ default:
+ break
+ }
+ }}
+ />
+ )}
+
+ {showRenameModal && (
+ {
+ const sameDrive = files.filter(fi => fi.driveId.toString() === currentDrive.id.toString())
+ const names = sameDrive.map(fi => fi.name).filter(n => n && n !== fileInfo.name)
+
+ return new Set(names)
+ })()}
+ onCancelClick={() => {
+ setShowRenameModal(false)
+ }}
+ onProceed={async newName => {
+ try {
+ setShowRenameModal(false)
+ await doRename(newName)
+ } catch {
+ safeSetState(isMountedRef, setShowRenameModal)(true)
+ }
+ }}
+ />
+ )}
+
+ {confirmForget && (
+
+ This removes {fileInfo.name} from your view.
+
+ The data remains on Swarm until the drive expires. + + } + confirmLabel="Forget" + cancelLabel="Cancel" + onConfirm={async () => { + await doForget() + + safeSetState(isMountedRef, setConfirmForget)(false) + }} + onCancel={() => { + setConfirmForget(false) + }} + /> + )} + + {showDestroyDriveModal && destroyDrive && ( + {
+ setShowDestroyDriveModal(false)
+ setDestroyDrive(null)
+ }}
+ doDestroy={async () => {
+ setShowDestroyDriveModal(false)
+
+ await handleDestroyDrive(
+ beeApi,
+ fm,
+ destroyDrive,
+ () => {
+ setShowDestroyDriveModal(false)
+ setDestroyDrive(null)
+ },
+ e => {
+ setShowDestroyDriveModal(false)
+ setErrorMessage?.(`Error destroying drive: ${destroyDrive.name}: ${e}`)
+ setShowError(true)
+ },
+ )
+ }}
+ />
+ )}
+
+ )
+}
diff --git a/src/modules/filemanager/components/FileProgressNotification/FileProgressNotification.scss b/src/modules/filemanager/components/FileProgressNotification/FileProgressNotification.scss
new file mode 100644
index 0000000..a528754
--- /dev/null
+++ b/src/modules/filemanager/components/FileProgressNotification/FileProgressNotification.scss
@@ -0,0 +1,7 @@
+.fm-file-progress-notification {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ cursor: pointer;
+ text-decoration: underline;
+}
diff --git a/src/modules/filemanager/components/FileProgressNotification/FileProgressNotification.tsx b/src/modules/filemanager/components/FileProgressNotification/FileProgressNotification.tsx
new file mode 100644
index 0000000..bb07d7b
--- /dev/null
+++ b/src/modules/filemanager/components/FileProgressNotification/FileProgressNotification.tsx
@@ -0,0 +1,104 @@
+import { ReactElement, useEffect, useMemo, useRef, useState } from 'react'
+import './FileProgressNotification.scss'
+import UpIcon from 'remixicon-react/ArrowUpSLineIcon'
+import DownIcon from 'remixicon-react/ArrowDownSLineIcon'
+import { FileProgressWindow } from '../FileProgressWindow/FileProgressWindow'
+import { FileTransferType, TransferStatus } from '../../constants/transfers'
+
+type ProgressItem = {
+ name: string
+ size?: string
+ percent?: number
+ kind?: FileTransferType
+ status?: TransferStatus
+ driveName?: string
+ etaSec?: number
+ elapsedSec?: number
+}
+
+interface FileProgressNotificationProps {
+ label?: string
+ type: FileTransferType
+ open?: boolean
+ count?: number
+ items?: ProgressItem[]
+ onRowClose?: (name: string) => void
+ onCloseAll?: () => void
+}
+
+export function FileProgressNotification({
+ label,
+ type,
+ open,
+ count,
+ items,
+ onRowClose,
+ onCloseAll,
+}: FileProgressNotificationProps): ReactElement | null {
+ const [showFileProgressWindow, setShowFileProgressWindow] = useState(Boolean(open))
+ const [openedByUser, setOpenedByUser] = useState(false)
+ const autoHideTimer = useRef
+ onToggleSelected?.(fileInfo, e.target.checked)}
+ onClick={e => e.stopPropagation()}
+ />
+
+
+ handleDownload(true)}>
+
+
+ {showDriveColumn && (
+
+ {driveName}
+
+ {statusLabel}
+
+
+ )}
+
+ {size}
+ {dateMod}
+
+ {showContext && (
+ e.stopPropagation()}
+ onClick={e => e.stopPropagation()}
+ >
+ {renderContextMenuItems()}
+
+ )}
+
+ {showGetInfoModal && infoGroups && (
+ + The data remains on Swarm until the drive expires. + + } + confirmLabel="Forget" + cancelLabel="Cancel" + onConfirm={async () => { + await doForget() + + safeSetState(isMountedRef, setConfirmForget)(false) + }} + onCancel={() => { + setConfirmForget(false) + }} + /> + )} + + {showDestroyDriveModal && destroyDrive && ( +
+ setShowFileProgressWindow(false)}
+ onRowClose={onRowClose}
+ onCloseAll={() => {
+ onCloseAll?.()
+ setShowFileProgressWindow(false)
+ }}
+ />
+ )}
+
+ )
+}
diff --git a/src/modules/filemanager/components/FileProgressWindow/FileProgressWindow.scss b/src/modules/filemanager/components/FileProgressWindow/FileProgressWindow.scss
new file mode 100644
index 0000000..baf9185
--- /dev/null
+++ b/src/modules/filemanager/components/FileProgressWindow/FileProgressWindow.scss
@@ -0,0 +1,79 @@
+.fm-file-progress-window {
+ position: absolute;
+ border: 1px solid rgb(209, 213, 219);
+ width: 275px;
+ bottom: 45px;
+ background-color: white;
+ z-index: 1200;
+}
+
+.fm-file-progress-window-header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 12px;
+ border-bottom: 1px solid rgb(209, 213, 219);
+}
+
+.fm-file-progress-window-header-actions { display: inline-flex; gap: 6px; }
+
+.fm-file-progress-window-header-btn {
+ width: 22px; height: 22px; display: inline-grid; place-items: center;
+ padding: 0; margin: 0; background: #f0f0f0; color: #4b5563;
+ border: none; border-radius: 4px; cursor: pointer;
+ &:hover { background: #e5e7eb; } &:active { background: #d1d5db; }
+ &:disabled { cursor: default; opacity: .6; filter: grayscale(.3); }
+}
+
+.fm-file-progress-window-file-item {
+ display: flex; align-items: flex-start; gap: 8px;
+ padding: 12px; border-bottom: 1px solid rgb(243, 244, 246);
+}
+
+.fm-file-progress-window-file-type-icon { margin-top: 4px; }
+
+.fm-file-progress-window-file-datas {
+ display: flex; flex-direction: column; gap: 8px; width: 100%;
+}
+
+.fm-file-progress-window-file-item-header {
+ display: grid; grid-template-columns: 1fr auto auto;
+ align-items: center; gap: 8px; min-width: 0;
+}
+
+.fm-file-progress-window-name { min-width: 0; }
+.fm-file-progress-window-name-text {
+ overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+}
+.fm-drive-line { margin-top: 2px; }
+
+.fm-file-progress-window-percent { white-space: nowrap; }
+
+.fm-file-progress-window-file-item-footer {
+ display: grid; grid-template-columns: auto 1fr auto;
+ align-items: center; column-gap: 8px; font-size: 11px;
+}
+.fm-file-progress-window-size { white-space: nowrap; }
+.fm-file-progress-window-center { justify-self: center; white-space: nowrap; }
+.fm-file-progress-window-status { justify-self: end; white-space: nowrap; }
+
+.fm-file-progress-window-row-close {
+ width: 20px; height: 20px; display: inline-grid; place-items: center;
+ padding: 0; margin: 0; background: #f0f0f0; color: #4b5563;
+ border: none; border-radius: 4px; cursor: pointer;
+ &:hover { background: #e5e7eb; } &:active { background: #d1d5db; }
+ &:disabled { cursor: default; opacity: .6; filter: grayscale(.3); }
+}
+
+.fm-drive-chip {
+ display: inline-block; margin-left: 0; padding: 2px 6px;
+ border-radius: 999px; font-size: 11px; line-height: 1;
+ background: rgba(0,0,0,.06); color: #333; vertical-align: middle;
+}
+.fm-eta { font-size: 12px; opacity: .8; }
+.fm-file-subtext { line-height: 1.2; }
+
+.fm-file-progress-window-list {
+ overflow-y: auto;
+ overscroll-behavior: contain;
+}
\ No newline at end of file
diff --git a/src/modules/filemanager/components/FileProgressWindow/FileProgressWindow.tsx b/src/modules/filemanager/components/FileProgressWindow/FileProgressWindow.tsx
new file mode 100644
index 0000000..791a120
--- /dev/null
+++ b/src/modules/filemanager/components/FileProgressWindow/FileProgressWindow.tsx
@@ -0,0 +1,211 @@
+import { ReactElement, useLayoutEffect, useRef } from 'react'
+import CloseIcon from 'remixicon-react/CloseLineIcon'
+import ArrowDownIcon from 'remixicon-react/ArrowDownSLineIcon'
+import './FileProgressWindow.scss'
+import { GetIconElement } from '../../utils/GetIconElement'
+import { ProgressBar } from '../ProgressBar/ProgressBar'
+import { FileTransferType, TransferBarColor, TransferStatus } from '../../constants/transfers'
+import { capitalizeFirstLetter } from '../../utils/common'
+
+type ProgressItem = {
+ name: string
+ percent?: number
+ size?: string
+ kind?: FileTransferType
+ status?: TransferStatus
+ driveName?: string
+ etaSec?: number
+ elapsedSec?: number
+}
+
+interface FileProgressWindowProps {
+ numberOfFiles?: number
+ items?: ProgressItem[]
+ type: FileTransferType
+ onCancelClick: () => void
+ onRowClose?: (name: string) => void
+ onCloseAll?: () => void
+}
+
+const formatEta = (sec?: number) => {
+ if (sec === undefined || sec === null) return ''
+
+ if (sec <= 0) return 'Done'
+ const s = Math.ceil(sec)
+ const mm = Math.floor(s / 60)
+ const ss = s % 60
+
+ return mm > 0 ? `${mm}m ${ss}s left` : `${ss}s left`
+}
+
+const formatDuration = (sec?: number) => {
+ if (sec === undefined || sec === null) return ''
+ const s = Math.max(0, Math.round(sec))
+ const mm = Math.floor(s / 60)
+ const ss = s % 60
+
+ return mm > 0 ? `${mm}m ${ss}s` : `${ss}s`
+}
+
+export function FileProgressWindow({
+ numberOfFiles,
+ items,
+ type,
+ onCancelClick,
+ onRowClose,
+ onCloseAll,
+}: FileProgressWindowProps): ReactElement | null {
+ const listRef = useRef
+ {label}
+ {type === FileTransferType.Upload &&
+
+ {showFileProgressWindow && (
+
+
+ )
+}
diff --git a/src/modules/filemanager/components/FormbricksIntegration/FormbricksIntegration.tsx b/src/modules/filemanager/components/FormbricksIntegration/FormbricksIntegration.tsx
new file mode 100644
index 0000000..95fe71e
--- /dev/null
+++ b/src/modules/filemanager/components/FormbricksIntegration/FormbricksIntegration.tsx
@@ -0,0 +1,136 @@
+import { useEffect, useRef, useCallback } from 'react'
+import { useLocation } from 'react-router-dom'
+import formbricks from '@formbricks/js'
+
+const FM_CLICK_STORAGE_KEY = 'fm_click_count_v1'
+const FM_SURVEY_TRIGGERED_KEY = 'fm_survey_triggered_v1'
+const FM_CLICK_THRESHOLD = 25
+
+interface FormbricksIntegrationProps {
+ isActive: boolean
+}
+
+export function FormbricksIntegration({ isActive }: FormbricksIntegrationProps) {
+ const location = useLocation()
+ const formbricksInitRef = useRef(false)
+ const formbricksReadyRef = useRef(false)
+ const pendingEventRef = useRef(false)
+
+ const environmentId = process.env.REACT_APP_FORMBRICKS_ENV_ID
+ const appUrl = process.env.REACT_APP_FORMBRICKS_APP_URL
+
+ const flushPendingEvent = useCallback(() => {
+ if (pendingEventRef.current && localStorage.getItem(FM_SURVEY_TRIGGERED_KEY) !== 'true') {
+ try {
+ formbricks.track('file_manager_engagement_25_clicks')
+ localStorage.setItem(FM_SURVEY_TRIGGERED_KEY, 'true')
+ pendingEventRef.current = false
+ } catch {
+ // no-op
+ }
+ }
+ }, [])
+
+ useEffect(() => {
+ if (!environmentId || !appUrl) {
+ return
+ }
+
+ let cancelled = false
+
+ const initializeFormbricks = async () => {
+ try {
+ await formbricks.setup({
+ environmentId,
+ appUrl,
+ })
+
+ await new Promise(resolve => setTimeout(resolve, 1000))
+
+ if (!cancelled) {
+ formbricksReadyRef.current = true
+ formbricksInitRef.current = true
+ flushPendingEvent()
+ }
+ } catch {
+ formbricksReadyRef.current = false
+ formbricksInitRef.current = false
+ }
+ }
+
+ void initializeFormbricks()
+
+ return () => {
+ cancelled = true
+ }
+ }, [environmentId, appUrl, flushPendingEvent])
+
+ useEffect(() => {
+ if (!formbricksInitRef.current) return
+
+ try {
+ formbricks?.registerRouteChange()
+ } catch {
+ // no-op
+ }
+ }, [location])
+
+ useEffect(() => {
+ if (!isActive) return
+
+ const handleClick = async () => {
+ if (localStorage.getItem(FM_SURVEY_TRIGGERED_KEY) === 'true') return
+
+ let count = 0
+ try {
+ const stored = localStorage.getItem(FM_CLICK_STORAGE_KEY)
+
+ if (stored) count = parseInt(stored, 10) || 0
+ } catch {
+ // no-op
+ }
+
+ count += 1
+ try {
+ localStorage.setItem(FM_CLICK_STORAGE_KEY, String(count))
+ } catch {
+ // no-op
+ }
+
+ if (count >= FM_CLICK_THRESHOLD) {
+ window.dispatchEvent(
+ new CustomEvent('filemanager-25-clicks', {
+ detail: { count, formbricksReady: formbricksReadyRef.current },
+ }),
+ )
+
+ if (!formbricksReadyRef.current) {
+ pendingEventRef.current = true
+
+ return
+ }
+
+ try {
+ await formbricks.track('file_manager_engagement_25_clicks')
+ localStorage.setItem(FM_SURVEY_TRIGGERED_KEY, 'true')
+ } catch {
+ // no-op
+ }
+ }
+ }
+
+ const rootEl = document.querySelector('.fm-main')
+
+ if (rootEl) {
+ rootEl.addEventListener('click', handleClick)
+ }
+
+ return () => {
+ if (rootEl) {
+ rootEl.removeEventListener('click', handleClick)
+ }
+ }
+ }, [isActive])
+
+ return null
+}
diff --git a/src/modules/filemanager/components/GetInfoModal/GetInfoModal.scss b/src/modules/filemanager/components/GetInfoModal/GetInfoModal.scss
new file mode 100644
index 0000000..e20469d
--- /dev/null
+++ b/src/modules/filemanager/components/GetInfoModal/GetInfoModal.scss
@@ -0,0 +1,88 @@
+.fm-modal-window.fm-get-info-modal {
+ display: flex;
+ flex-direction: column;
+ max-height: clamp(320px, calc(100vh - 96px), 90vh);
+}
+.fm-modal-window.fm-get-info-modal .fm-modal-window-header,
+.fm-modal-window.fm-get-info-modal .fm-modal-window-footer {
+ flex: 0 0 auto;
+}
+.fm-modal-window.fm-get-info-modal .fm-modal-window-body,
+.fm-get-info-body {
+ flex: 1 1 auto;
+ min-height: 0;
+ overflow: auto;
+ -webkit-overflow-scrolling: touch;
+ overscroll-behavior: contain;
+ padding-right: 2px;
+}
+.fm-modal-window.fm-get-info-modal .fm-modal-window-body::-webkit-scrollbar,
+.fm-get-info-body::-webkit-scrollbar {
+ width: 10px;
+}
+.fm-modal-window.fm-get-info-modal .fm-modal-window-body::-webkit-scrollbar-thumb,
+.fm-get-info-body::-webkit-scrollbar-thumb {
+ background: #d1d5db;
+ border-radius: 6px;
+}
+.fm-modal-window.fm-get-info-modal .fm-modal-window-body::-webkit-scrollbar-track,
+.fm-get-info-body::-webkit-scrollbar-track {
+ background: #f3f4f6;
+}
+
+.fm-get-info-modal-group {
+ display: flex;
+ flex-direction: column;
+ gap: 16px;
+}
+
+.fm-get-info-modal-group-title {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ font-size: 14px;
+ font-weight: 700;
+}
+
+.fm-get-info-modal-group-properties {
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+}
+
+.fm-get-info-modal-property-row {
+ display: flex;
+ justify-content: space-between;
+ gap: 8px;
+ align-items: center;
+}
+
+.fm-get-info-modal-property-label {
+ color: #555;
+ flex: 0 0 auto;
+}
+
+.fm-get-info-modal-property-value {
+ display: inline-flex;
+ align-items: center;
+ gap: 6px;
+ max-width: 60%;
+ overflow-wrap: anywhere;
+ word-break: break-word;
+ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+ color: #111827;
+}
+
+.fm-copy-btn {
+ margin-left: 6px;
+ border: none;
+ background: transparent;
+ cursor: pointer;
+ padding: 2px;
+ line-height: 0;
+}
+
+.fm-copy-btn:hover {
+ background: #f5f5f5;
+ border-radius: 4px;
+}
diff --git a/src/modules/filemanager/components/GetInfoModal/GetInfoModal.tsx b/src/modules/filemanager/components/GetInfoModal/GetInfoModal.tsx
new file mode 100644
index 0000000..9a2e42a
--- /dev/null
+++ b/src/modules/filemanager/components/GetInfoModal/GetInfoModal.tsx
@@ -0,0 +1,78 @@
+import { ReactElement, useState } from 'react'
+import './GetInfoModal.scss'
+import { Button } from '../Button/Button'
+import { createPortal } from 'react-dom'
+import InfoIcon from 'remixicon-react/InformationLineIcon'
+import ClipboardIcon from 'remixicon-react/FileCopyLineIcon'
+
+import type { FileProperty, FilePropertyGroup } from '../../utils/infoGroups'
+
+interface GetInfoModalProps {
+ name: string
+ properties: FilePropertyGroup[]
+ onCancelClick: () => void
+}
+
+export function GetInfoModal({ name, onCancelClick, properties }: GetInfoModalProps): ReactElement {
+ const modalRoot = document.querySelector('.fm-main') || document.body
+ const [copiedKey, setCopiedKey] = useState
+
+
+ {count} {type}
+ {count === 1 ? '' : 's'}
+
+
+
+
+
+
+
+
+ {rows.map((item, idx) => {
+ const pctNum = Number.isFinite(item.percent)
+ ? Math.max(0, Math.min(100, Math.round(item.percent as number)))
+ : undefined
+
+ const isComplete = (pctNum ?? 0) >= 100 || item.status === TransferStatus.Done
+ const isActive =
+ item.status === TransferStatus.Uploading ||
+ item.status === TransferStatus.Downloading ||
+ item.status === TransferStatus.Queued
+
+ const rowActionLabel = isActive ? 'Cancel' : 'Dismiss'
+
+ const transferInfo = getTransferInfo(item, pctNum)
+
+ const getCenterText = () => {
+ if (!isComplete && typeof item.etaSec === 'number') return formatEta(item.etaSec)
+
+ if (isComplete && typeof item.elapsedSec === 'number') return formatDuration(item.elapsedSec)
+
+ return ''
+ }
+
+ const centerDisplay = getCenterText() || '\u00A0'
+
+ return (
+
+
+
+ )
+ })}
+
+
+
+
+
+
+
+
+
+
+
+ {item.name}
+ {item.driveName && (
+
+
+ {item.driveName}
+
+
+ )}
+
+ {typeof pctNum === 'number' ? `${pctNum}%` : ''}
+
+
+
+
+
+ {item.size || '—'}
+ {centerDisplay}
+ {transferInfo.statusText}
+
+
,
+ modalRoot,
+ )
+}
diff --git a/src/modules/filemanager/components/Header/Header.scss b/src/modules/filemanager/components/Header/Header.scss
new file mode 100644
index 0000000..bc248ce
--- /dev/null
+++ b/src/modules/filemanager/components/Header/Header.scss
@@ -0,0 +1,143 @@
+$bg-900: #212121;
+$bg-800: #262626;
+$bg-700: #3e3e3e;
+$border-400: #9da3ae;
+$text-100: #e5e7eb;
+$text-300: #c7ccd4;
+$accent: #ed8131;
+
+.fm-header-container {
+ display: flex;
+ align-items: center;
+ gap: 16px;
+ height: 60px;
+ padding: 10px 16px;
+ background: $bg-900;
+ border-bottom: 1px solid rgba(255,255,255,0.04);
+}
+
+.fm-header-left {
+ display: flex;
+ align-items: center;
+ gap: 12px;
+}
+.fm-header-logo {
+ width: 40px; height: 40px;
+ border-radius: 6px;
+ background: $accent;
+ color: $text-100;
+ display: grid; place-items: center;
+ font-weight: 700;
+ svg { width: 18px; height: 18px; }
+}
+.fm-header-title {
+ color: $text-100;
+ font-weight: 600;
+ letter-spacing: .2px;
+}
+
+.fm-header-search {
+ flex: 1 1 auto;
+ max-width: 900px;
+ display: flex; align-items: center; gap: 8px;
+ background: $bg-700;
+ border: 1px solid $border-400;
+ color: $text-300;
+ height: 36px; padding: 0 10px;
+ border-radius: 8px;
+
+ &:focus-within {
+ border-color: $accent;
+ box-shadow: 0 0 0 2px rgba(237,129,49,0.25);
+ }
+
+ .fm-header-search-icon { flex: 0 0 auto; }
+
+ input {
+ flex: 1 1 auto;
+ background: transparent; border: none; outline: none;
+ height: 100%;
+ color: $text-100; font-size: 14px;
+
+ &::placeholder { color: $text-300; }
+ }
+
+ .fm-header-search-clear {
+ appearance: none; border: none; background: transparent;
+ color: $text-300; font-size: 18px; line-height: 1;
+ padding: 0 2px; cursor: pointer;
+ &:hover { color: $text-100; }
+ }
+}
+
+.fm-header-actions {
+ margin-left: auto;
+ position: relative;
+}
+
+.fm-filter-btn {
+ display: inline-flex; align-items: center; gap: 6px;
+ padding: 6px 10px;
+ border-radius: 8px;
+ border: 1px solid $border-400;
+ background: $bg-800;
+ color: $text-100;
+ font-size: 13px;
+ cursor: pointer;
+
+ &:hover { background: mix($bg-800, #fff, 92%); }
+ &:focus-visible { outline: 2px solid rgba(237,129,49,0.4); outline-offset: 2px; }
+
+ &[aria-expanded="true"] {
+ border-color: $accent;
+ box-shadow: 0 0 0 2px rgba(237,129,49,0.25);
+ }
+}
+
+.fm-filter-menu {
+ position: absolute;
+ right: 0; top: calc(100% + 6px);
+ min-width: 260px;
+ background: $bg-800;
+ border: 1px solid $border-400;
+ border-radius: 10px;
+ box-shadow: 0 10px 24px rgba(0,0,0,0.25);
+ padding: 10px;
+ z-index: 2000;
+ color: $text-100;
+}
+
+.fm-filter-group + .fm-filter-group { margin-top: 10px; }
+
+.fm-filter-group-title {
+ font-size: 12px;
+ color: $text-300;
+ margin-bottom: 6px;
+ text-transform: uppercase;
+ letter-spacing: .04em;
+}
+
+.fm-filter-row {
+ display: flex; align-items: center; gap: 8px;
+ padding: 6px 4px; border-radius: 6px;
+ cursor: default;
+ color: $text-100;
+
+ input[type="checkbox"], input[type="radio"] {
+ width: 14px; height: 14px; margin: 0;
+ accent-color: $accent;
+ }
+
+ &:hover { background: rgba(255,255,255,0.05); }
+}
+
+.fm-filter-sep {
+ height: 1px;
+ background: rgba(255,255,255,0.08);
+ margin: 8px 0;
+}
+
+.fm-header-filters { display: none; }
+.fm-header-filters-label { display: none; }
+.fm-header-chip-group { display: none; }
+.fm-chip { display: none; }
diff --git a/src/modules/filemanager/components/Header/Header.tsx b/src/modules/filemanager/components/Header/Header.tsx
new file mode 100644
index 0000000..d53fa8d
--- /dev/null
+++ b/src/modules/filemanager/components/Header/Header.tsx
@@ -0,0 +1,200 @@
+import { ReactElement, useMemo, useState, useEffect, useRef, useContext } from 'react'
+import SearchIcon from 'remixicon-react/SearchLineIcon'
+import FileIcon from 'remixicon-react/File2LineIcon'
+import FilterIcon from 'remixicon-react/FilterLineIcon'
+import './Header.scss'
+import { useSearch } from '../../../../pages/filemanager/SearchContext'
+import { Context as FMContext } from '../../../../providers/FileManager'
+
+// Defaults used to determine “active filters”
+const DEFAULT_FILTERS = {
+ scope: 'selected' as 'selected' | 'all',
+ includeActive: true,
+ includeTrashed: false,
+}
+
+export function Header(): ReactElement {
+ const {
+ query,
+ setQuery,
+ clear,
+ scope,
+ setScope,
+ includeActive,
+ setIncludeActive,
+ includeTrashed,
+ setIncludeTrashed,
+ } = useSearch()
+
+ const { currentDrive } = useContext(FMContext)
+
+ const currentDriveName = useMemo(() => {
+ return currentDrive?.name || ''
+ }, [currentDrive])
+
+ const [openFilters, setOpenFilters] = useState(false)
+ const menuRef = useRef
+
+
+
+
+
+ {properties.map(group => (
+
+
+
+
+ ))}
+
+ {group.icon}
+ {group.title}
+
+
+
+ {group.properties.map(prop => (
+
+
+ {prop.label}
+
+ {prop.value}
+ {(prop.raw || prop.value.includes('...')) && (
+
+ )}
+
+
+ ))}
+
+
+
+
+
+
+
+ )
+}
diff --git a/src/modules/filemanager/components/InitialModal/InitialModal.scss b/src/modules/filemanager/components/InitialModal/InitialModal.scss
new file mode 100644
index 0000000..1e18d07
--- /dev/null
+++ b/src/modules/filemanager/components/InitialModal/InitialModal.scss
@@ -0,0 +1,18 @@
+.fm-initialization-modal-container {
+ position: absolute;
+ top: 0;
+ width: 100%;
+ height: 100vh;
+ background: rgba(237, 237, 237);
+ backdrop-filter: blur(5px);
+ z-index: 1300;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+.fm-initilization-progress-content {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
diff --git a/src/modules/filemanager/components/InitialModal/InitialModal.tsx b/src/modules/filemanager/components/InitialModal/InitialModal.tsx
new file mode 100644
index 0000000..5360824
--- /dev/null
+++ b/src/modules/filemanager/components/InitialModal/InitialModal.tsx
@@ -0,0 +1,291 @@
+import { ReactElement, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react'
+
+import { BZZ, DAI, Duration, PostageBatch, RedundancyLevel, Size, Utils } from '@ethersphere/bee-js'
+import './InitialModal.scss'
+import { CustomDropdown } from '../CustomDropdown/CustomDropdown'
+import { Button } from '../Button/Button'
+import { calculateStampCapacityMetrics, fmFetchCost, getUsableStamps, handleCreateDrive } from '../../utils/bee'
+import { getExpiryDateByLifetime, safeSetState } from '../../utils/common'
+import { erasureCodeMarks } from '../../constants/common'
+import { desiredLifetimeOptions } from '../../constants/stamps'
+import { Context as SettingsContext } from '../../../../providers/Settings'
+import { Context as BeeContext } from '../../../../providers/Bee'
+
+import { FMSlider } from '../Slider/Slider'
+import { Context as FMContext } from '../../../../providers/FileManager'
+import { ADMIN_STAMP_LABEL } from '@solarpunkltd/file-manager-lib'
+import { ProgressBar } from '../ProgressBar/ProgressBar'
+import { Tooltip } from '../Tooltip/Tooltip'
+import { TOOLTIPS } from '../../constants/tooltips'
+
+interface InitialModalProps {
+ resetState: boolean
+ handleVisibility: (isVisible: boolean) => void
+ handleShowError: (flag: boolean) => void
+ setIsCreationInProgress: (isCreating: boolean) => void
+}
+
+const minMarkValue = Math.min(...erasureCodeMarks.map(mark => mark.value))
+const maxMarkValue = Math.max(...erasureCodeMarks.map(mark => mark.value))
+
+const BATCH_ID_PLACEHOLDER = 'Choose a saved Drive, or leave blank to create a new one'
+
+const createBatchIdOptions = (stamps: PostageBatch[]) => [
+ { label: BATCH_ID_PLACEHOLDER, value: -1 },
+ ...stamps.map((stamp, index) => {
+ const batchId = stamp.batchID.toHex().slice(0, 8)
+ const label = `${batchId}${stamp.label ? ` - ${stamp.label}` : ''}`
+
+ return {
+ label,
+ value: index,
+ }
+ }),
+]
+
+export function InitialModal({
+ resetState,
+ setIsCreationInProgress,
+ handleVisibility,
+ handleShowError,
+}: InitialModalProps): ReactElement {
+ const [isCreateEnabled, setIsCreateEnabled] = useState(false)
+ const [isBalanceSufficient, setIsBalanceSufficient] = useState(true)
+ const [isxDaiBalanceSufficient, setIsxDaiBalanceSufficient] = useState(true)
+ const [capacity, setCapacity] = useState(0)
+ const [lifetimeIndex, setLifetimeIndex] = useState(0)
+ const [validityEndDate, setValidityEndDate] = useState(new Date())
+ const [erasureCodeLevel, setErasureCodeLevel] = useState(RedundancyLevel.OFF)
+ const [cost, setCost] = useState('0')
+ const [usableStamps, setUsableStamps] = useState
+
+
+
+
+ File Manager
+
+
+
+
+
+
+ {openFilters && (
+
+
+
+ )}
+
+
+
+
+
+ Scope
+
+
+
+
+
+
+
+ Status
+
+
+
+
+
+
+
+ )
+}
diff --git a/src/modules/filemanager/components/NotificationBar/NotificationBar.scss b/src/modules/filemanager/components/NotificationBar/NotificationBar.scss
new file mode 100644
index 0000000..24f8e01
--- /dev/null
+++ b/src/modules/filemanager/components/NotificationBar/NotificationBar.scss
@@ -0,0 +1,11 @@
+.fm-notification-bar {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+
+ &:hover {
+ cursor: pointer;
+ opacity: 0.8;
+ text-decoration: underline;
+ }
+}
diff --git a/src/modules/filemanager/components/NotificationBar/NotificationBar.tsx b/src/modules/filemanager/components/NotificationBar/NotificationBar.tsx
new file mode 100644
index 0000000..42f63f0
--- /dev/null
+++ b/src/modules/filemanager/components/NotificationBar/NotificationBar.tsx
@@ -0,0 +1,85 @@
+import { ReactElement, useContext, useEffect, useState } from 'react'
+import './NotificationBar.scss'
+import UpIcon from 'remixicon-react/ArrowUpSLineIcon'
+import { ExpiringNotificationModal } from '../ExpiringNotificationModal/ExpiringNotificationModal'
+import { getUsableStamps } from '../../utils/bee'
+import { Context as SettingsContext } from '../../../../providers/Settings'
+import { PostageBatch } from '@ethersphere/bee-js'
+import { Context as FMContext } from '../../../../providers/FileManager'
+import { DriveInfo } from '@solarpunkltd/file-manager-lib'
+
+const NUMBER_OF_DAYS_WARNING = 7
+const DAYS_TO_MILLISECONDS_MULTIPLIER = 24 * 60 * 60 * 1000
+
+interface NotificationBarProps {
+ setErrorMessage?: (error: string) => void
+}
+
+export function NotificationBar({ setErrorMessage }: NotificationBarProps): ReactElement | null {
+ const [showExpiringModal, setShowExpiringModal] = useState(false)
+ const [stampsToExpire, setStampsToExpire] = useState
+
+ Welcome to your Swarm File Manager
+ {initText} the File Manager
+ {usableStamps.length > 0 && (
+
+
+ )}
+ {!selectedBatch && (
+
+ {/*
+
*/} + {
+ setSelectedBatchIndex(index)
+
+ if (index === -1) {
+ setSelectedBatch(null)
+ }
+ }}
+ placeholder={BATCH_ID_PLACEHOLDER}
+ />
+ {selectedBatch && (
+
+ */} +
+
+ )}
+
+ Capacity
+
+ Expiry date: {selectedBatch.duration.toEndDate().toLocaleDateString()}
+
+
+
+ )}
+
+
+
+
+
+ setErasureCodeLevel(value)}
+ minValue={minMarkValue}
+ maxValue={maxMarkValue}
+ step={1}
+ />
+
+
+
+
+
+ Estimated Cost:
+
+ {cost} BZZ {isBalanceSufficient ? '' : '(Insufficient balance)'}
+ {isxDaiBalanceSufficient ? '' : ' (Insufficient xDAI balance)'}
+
+ (Based on current network conditions)
+
+
+
+ setShowExpiringModal(true)}>
+ {stampsToExpire.length} drive{stampsToExpire.length > 1 ? 's' : ''} expiring soon
+ {showExpiringModal && (
+
+
+ )
+}
+
+export default PrivateKeyModal
diff --git a/src/modules/filemanager/components/ProgressBar/ProgressBar.scss b/src/modules/filemanager/components/ProgressBar/ProgressBar.scss
new file mode 100644
index 0000000..d4e7498
--- /dev/null
+++ b/src/modules/filemanager/components/ProgressBar/ProgressBar.scss
@@ -0,0 +1,14 @@
+.fm-progress-bar {
+ width: 20%;
+ height: 6px;
+ background: rgb(255, 255, 255);
+ border-radius: 3px;
+ overflow: hidden;
+ position: relative;
+}
+
+.fm-progress-bar-fill {
+ width: '20px';
+ height: 6px;
+ border-radius: 3px;
+}
diff --git a/src/modules/filemanager/components/ProgressBar/ProgressBar.tsx b/src/modules/filemanager/components/ProgressBar/ProgressBar.tsx
new file mode 100644
index 0000000..5e0a251
--- /dev/null
+++ b/src/modules/filemanager/components/ProgressBar/ProgressBar.tsx
@@ -0,0 +1,23 @@
+import { ReactElement } from 'react'
+
+import './ProgressBar.scss'
+
+interface ProgressBarProps {
+ value: number
+ width?: string
+ color?: string
+ backgroundColor?: string
+}
+
+export function ProgressBar({
+ value,
+ width = '200px',
+ color = '#ed8131',
+ backgroundColor = 'white',
+}: ProgressBarProps): ReactElement {
+ return (
+
+
+
+
+ Create Private Key
+
+ Using a private key ensures that only you can access this File Manager instance. Save it securely before
+ continuing.
+
+
+ IMPORTANT: Lost keys cannot be recovered
+
+ Swarm never stores private keys. If you lose this key, access to this File Manager instance will be
+ permanently lost.
+
+
+
+
+
+
+
+
+
+
+
+ {
+ setValue(e.target.value)
+ setCopied(false)
+ setShowError(false)
+ }}
+ onBlur={handleBlur}
+ spellCheck={false}
+ />
+ {
+
+ }
+
+ {showError ? 'Invalid private key.' : ''}
+
+
+
+
+ setConfirmValue(e.target.value)}
+ spellCheck={false}
+ />
+
+
+ {confirmValue && value === confirmValue ? '✓ Private keys match!' : ''}
+
+
+
+
+
+
+
+ A copy of your private key is stored in this browser for convenience, but it’s not a backup - clearing
+ browser data or switching devices will remove it.{' '}
+ Make sure you’ve saved your private key before continuing.
+
+
+ Safety Reminder:
+
+
+
+
+
+
+
+ )
+}
diff --git a/src/modules/filemanager/components/RenameFileModal/RenameFileModal.scss b/src/modules/filemanager/components/RenameFileModal/RenameFileModal.scss
new file mode 100644
index 0000000..c5207d3
--- /dev/null
+++ b/src/modules/filemanager/components/RenameFileModal/RenameFileModal.scss
@@ -0,0 +1,97 @@
+.fm-rename-modal {
+ position: fixed;
+ inset: 0;
+ z-index: 9999;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background: rgba(10, 10, 10, 0.55);
+ backdrop-filter: blur(2px);
+}
+
+.fm-rename-modal .fm-modal-window {
+ .fm-modal-window-header {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+
+ svg {
+ opacity: 0.9;
+ }
+ }
+
+ .fm-modal-window-body {
+ .fm-modal-white-section {
+ display: flex;
+ flex-direction: column;
+ gap: 10px;
+ }
+ }
+
+ .fm-input {
+ width: 100%;
+ padding: 10px 12px;
+ border: 1px solid var(--fm-border-color, rgba(255, 255, 255, 0.08));
+ background: var(--fm-input-bg, rgba(255, 255, 255, 0.04));
+ color: var(--fm-text-color, #fff);
+ border-radius: 8px;
+ outline: none;
+ transition: border-color 120ms ease, background-color 120ms ease;
+
+ &:focus {
+ border-color: var(--fm-accent, #6aa7ff);
+ background: var(--fm-input-bg-focus, rgba(255, 255, 255, 0.06));
+ }
+
+ &::placeholder {
+ color: var(--fm-placeholder, rgba(255, 255, 255, 0.5));
+ }
+ }
+
+ .fm-rename-input {
+ background: rgba(255, 255, 255, 0.08);
+ border: 1px solid rgba(255, 255, 255, 0.16);
+ color: #fff;
+
+ &:focus {
+ border-color: var(--fm-accent, #6aa7ff);
+ background: rgba(255, 255, 255, 0.12);
+ }
+
+ &::placeholder {
+ color: rgba(255, 255, 255, 0.6);
+ }
+ }
+
+ .fm-soft-text {
+ line-height: 1.3;
+ }
+
+ .fm-error-text {
+ color: var(--fm-error, #ff6b6b);
+ font-size: 12px;
+ line-height: 1.25;
+ }
+
+ .fm-modal-window-footer {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+
+ .fm-button + .fm-button {
+ margin-left: 8px;
+ }
+ }
+}
+
+.fm-rename-modal .fm-modal-white-section input#fm-rename-input.fm-input {
+ background: #fff !important;
+ border: 1px solid #e5e7eb !important;
+ color: #111 !important;
+ -webkit-text-fill-color: #111 !important;
+ caret-color: #111 !important;
+}
+
+.fm-rename-modal .fm-modal-white-section input#fm-rename-input.fm-input::placeholder {
+ color: rgba(0, 0, 0, 0.5) !important;
+}
diff --git a/src/modules/filemanager/components/RenameFileModal/RenameFileModal.tsx b/src/modules/filemanager/components/RenameFileModal/RenameFileModal.tsx
new file mode 100644
index 0000000..cdb7aa3
--- /dev/null
+++ b/src/modules/filemanager/components/RenameFileModal/RenameFileModal.tsx
@@ -0,0 +1,143 @@
+import { ReactElement, useEffect, useMemo, useRef, useState } from 'react'
+import '../../styles/global.scss'
+import './RenameFileModal.scss'
+
+import { Button } from '../Button/Button'
+import EditIcon from 'remixicon-react/EditLineIcon'
+import { createPortal } from 'react-dom'
+import { safeSetState } from '../../utils/common'
+
+interface RenameFileModalProps {
+ currentName: string
+ takenNames?: Set
+
,
+ modalRoot,
+ )
+}
diff --git a/src/modules/filemanager/components/Sidebar/DriveItem/DriveItem.scss b/src/modules/filemanager/components/Sidebar/DriveItem/DriveItem.scss
new file mode 100644
index 0000000..b9af16e
--- /dev/null
+++ b/src/modules/filemanager/components/Sidebar/DriveItem/DriveItem.scss
@@ -0,0 +1,71 @@
+.fm-drive-item-info {
+ display: flex;
+ gap: 4px;
+ flex-direction: column;
+ color: rgb(31, 41, 55);
+ font-weight: 500;
+ transition: background-color 0.3s;
+
+ .fm-drive-item-icon {
+ display: flex;
+ align-items: center;
+ color: rgb(237, 129, 49);
+ font-weight: 700;
+ }
+}
+
+.fm-drive-item-header {
+ display: flex;
+ font-weight: 700;
+ gap: 8px;
+ align-items: center;
+}
+
+.fm-drive-item-content {
+ display: flex;
+ flex-direction: column;
+ gap: 4px;
+ font-size: 11px;
+}
+
+.fm-drive-item-container {
+ display: flex;
+ position: relative;
+ justify-content: space-between;
+ padding: 16px;
+ padding-left: 40px;
+
+ &:hover {
+ background-color: rgb(209, 209, 209);
+ cursor: pointer;
+ }
+
+ &.fm-drive-item-container-selected {
+ background-color: rgb(209, 209, 209);
+ }
+}
+
+.fm-drive-item-capacity {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+}
+
+.fm-drive-item-actions {
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ align-items: end;
+ margin-bottom: 2px;
+}
+
+.fm-pointer {
+ cursor: pointer;
+}
+
+.fm-drive-item-context-menu {
+ position: fixed;
+ z-index: 1000;
+}
+
+.fm-disabled { opacity: 0.5; pointer-events: none; }
\ No newline at end of file
diff --git a/src/modules/filemanager/components/Sidebar/DriveItem/DriveItem.tsx b/src/modules/filemanager/components/Sidebar/DriveItem/DriveItem.tsx
new file mode 100644
index 0000000..3c8c575
--- /dev/null
+++ b/src/modules/filemanager/components/Sidebar/DriveItem/DriveItem.tsx
@@ -0,0 +1,218 @@
+import { ReactElement, useState, useContext, useEffect, useRef, useMemo } 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 './DriveItem.scss'
+import { ProgressBar } from '../../ProgressBar/ProgressBar'
+import { ContextMenu } from '../../ContextMenu/ContextMenu'
+import { useContextMenu } from '../../../hooks/useContextMenu'
+import { Button } from '../../Button/Button'
+import { DestroyDriveModal } from '../../DestroyDriveModal/DestroyDriveModal'
+import { UpgradeDriveModal } from '../../UpgradeDriveModal/UpgradeDriveModal'
+import { ViewType } from '../../../constants/transfers'
+import { useView } from '../../../../../pages/filemanager/ViewContext'
+import { Context as FMContext } from '../../../../../providers/FileManager'
+import { PostageBatch } from '@ethersphere/bee-js'
+import { DriveInfo } from '@solarpunkltd/file-manager-lib'
+import { calculateStampCapacityMetrics, handleDestroyDrive } from '../../../utils/bee'
+import { Context as SettingsContext } from '../../../../../providers/Settings'
+
+interface DriveItemProps {
+ drive: DriveInfo
+ stamp: PostageBatch
+ isSelected: boolean
+ setErrorMessage?: (error: string) => void
+}
+
+export function DriveItem({ drive, stamp, isSelected, setErrorMessage }: DriveItemProps): ReactElement {
+ const { fm, setShowError, refreshStamp } = useContext(FMContext)
+ const { beeApi } = useContext(SettingsContext)
+
+ const [isHovered, setIsHovered] = useState(false)
+ const [isDestroyDriveModalOpen, setIsDestroyDriveModalOpen] = useState(false)
+ const [isUpgradeDriveModalOpen, setIsUpgradeDriveModalOpen] = useState(false)
+ const isMountedRef = useRef(true)
+ const [isUpgrading, setIsUpgrading] = useState(false)
+ const [actualStamp, setActualStamp] = useState
+
+
+
+
+
+
+
+
+
+ setValue(e.target.value)}
+ onBlur={() => setTouched(true)}
+ onKeyDown={onKeyDown}
+ placeholder="Enter a new file name"
+ />
+ {error && (
+
+
+ {error}
+
+ )}
+
+ This creates a new version that only changes metadata (no re-upload).
+
+
+
+
+ {
+ setView(ViewType.File)
+ setActualItemView?.(drive.name)
+ }}
+ >
+ setIsUpgradeDriveModalOpen(false)}
+ setErrorMessage={setErrorMessage}
+ />
+ )}
+
+ {isUpgrading && (
+ setIsDestroyDriveModalOpen(false)}
+ doDestroy={async () => {
+ setIsDestroyDriveModalOpen(false)
+
+ await handleDestroyDrive(
+ beeApi,
+ fm,
+ drive,
+ () => {
+ setIsDestroyDriveModalOpen(false)
+ },
+ e => {
+ setIsDestroyDriveModalOpen(false)
+ setErrorMessage?.(`Error destroying drive: ${drive.name}: ${e}`)
+ setShowError(true)
+ },
+ )
+ }}
+ />
+ )}
+
+ )
+}
diff --git a/src/modules/filemanager/components/Sidebar/DriveItem/ExpiredDriveItem.tsx b/src/modules/filemanager/components/Sidebar/DriveItem/ExpiredDriveItem.tsx
new file mode 100644
index 0000000..f9f4aac
--- /dev/null
+++ b/src/modules/filemanager/components/Sidebar/DriveItem/ExpiredDriveItem.tsx
@@ -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 setIsHovered(true)}
+ onMouseLeave={() => setIsHovered(false)}
+ >
+
+
+
+ {isHovered ?
+ {drive.name}
+
+
+
+ Capacity
+
+ Expiry date: {actualStamp.duration.toEndDate().toLocaleDateString()}
+
+
+
+ {isUpgradeDriveModalOpen && (
+
+
+
+
,
+
+ document.body,
+ )}
+ {
+ handleDestroyDriveClick()
+ setIsDestroyDriveModalOpen(true)
+ }}
+ >
+ Destroy entire drive
+
+
+
+ Upgrading drive…
+
+ )}
+ {isDestroyDriveModalOpen && (
+ setIsHovered(true)}
+ onMouseLeave={() => setIsHovered(false)}
+ >
+
+ This will remove metadata for the drive with expired stamp Drive Name: {drive.name}{' '}
+ Batch Id: {`${drive.batchId.toString().slice(0, 4)}...${drive.batchId.toString().slice(-4)}`}
+
+ }
+ 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)
+ },
+ )
+ }}
+ />
+ )}
+
+ )
+}
diff --git a/src/modules/filemanager/components/Sidebar/Sidebar.scss b/src/modules/filemanager/components/Sidebar/Sidebar.scss
new file mode 100644
index 0000000..1870ca0
--- /dev/null
+++ b/src/modules/filemanager/components/Sidebar/Sidebar.scss
@@ -0,0 +1,113 @@
+.fm-sidebar {
+ min-width: 370px;
+ box-sizing: border-box;
+ height: calc(100vh - 120px);
+ background-color: rgb(237, 237, 237);
+ border-right: 1px solid rgb(146, 146, 146);
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+}
+
+.fm-sidebar-content {
+ overflow: auto;
+}
+
+.fm-sidebar-item {
+ padding: 12px;
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ color: rgb(31, 41, 55);
+ font-weight: 700;
+ transition: background-color 0.3s;
+
+ .fm-sidebar-item-icon {
+ display: flex;
+ align-items: center;
+ color: rgb(237, 129, 49);
+ font-weight: 700;
+ }
+
+ &:hover {
+ background-color: rgb(209, 209, 209);
+ cursor: pointer;
+ }
+
+ &.fm-trash-item {
+ padding: 8px;
+ padding-left: 36px;
+ }
+}
+
+.fm-sidebar-drive-creation {
+ padding: 12px;
+ border-top: 1px solid rgb(146, 146, 146);
+}
+
+.fm-drive-items-container {
+ opacity: 0;
+ max-height: 0;
+ overflow: hidden;
+ transition: opacity 0.3s, max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+ will-change: opacity, max-height;
+
+ &.fm-drive-items-container-open {
+ opacity: 1;
+ max-height: 1000px;
+ }
+}
+
+.fm-trash-item {
+ color: rgb(31, 41, 55);
+ font-weight: 500;
+}
+
+.fm-drive-item-creating {
+ position: relative;
+}
+
+.fm-drive-item-creating .fm-drive-item-info,
+.fm-drive-item-creating .fm-drive-item-actions {
+ filter: blur(2px);
+ pointer-events: none;
+ user-select: none;
+}
+
+.fm-drive-item-creating-overlay {
+ position: absolute;
+ inset: 0;
+ z-index: 10;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ gap: 10px;
+ background: rgba(255, 255, 255, 0.55);
+ -webkit-backdrop-filter: blur(2px);
+ backdrop-filter: blur(2px);
+ font-weight: 600;
+ color: #111827;
+ border-radius: 0;
+}
+
+.fm-mini-spinner {
+ width: 14px;
+ height: 14px;
+ border-radius: 50%;
+ border: 2px solid rgba(0, 0, 0, 0.2);
+ border-top-color: rgba(0, 0, 0, 0.7);
+ animation: fmSpin 0.8s linear infinite;
+}
+
+.fm-drive-item-container.fm-expired {
+ background: rgba(220, 38, 38, 0.08);
+ border: 1px solid rgba(220, 38, 38, 0.2);
+}
+
+.fm-drive-item-container.fm-expired .fm-drive-item-capacity {
+ color: #dc2626;
+}
+
+@keyframes fmSpin {
+ to { transform: rotate(360deg); }
+}
\ No newline at end of file
diff --git a/src/modules/filemanager/components/Sidebar/Sidebar.tsx b/src/modules/filemanager/components/Sidebar/Sidebar.tsx
new file mode 100644
index 0000000..a692d4d
--- /dev/null
+++ b/src/modules/filemanager/components/Sidebar/Sidebar.tsx
@@ -0,0 +1,269 @@
+import { ReactElement, useContext, useEffect, useState } from 'react'
+
+import './Sidebar.scss'
+import Add from 'remixicon-react/AddLineIcon'
+import Folder from 'remixicon-react/Folder3LineIcon'
+import FolderFill from 'remixicon-react/Folder3FillIcon'
+import ArrowRight from 'remixicon-react/ArrowRightSLineIcon'
+import ArrowDown from 'remixicon-react/ArrowDownSLineIcon'
+import Delete from 'remixicon-react/DeleteBin6LineIcon'
+import DeleteFill from 'remixicon-react/DeleteBin6FillIcon'
+import History from 'remixicon-react/HistoryLineIcon'
+import HistoryFill from 'remixicon-react/HistoryFillIcon'
+import { DriveItem } from './DriveItem/DriveItem'
+import { ExpiredDriveItem } from './DriveItem/ExpiredDriveItem'
+import { CreateDriveModal } from '../CreateDriveModal/CreateDriveModal'
+import { ViewType } from '../../constants/transfers'
+import { PostageBatch } from '@ethersphere/bee-js'
+import { Context as SettingsContext } from '../../../../providers/Settings'
+import { useView } from '../../../../pages/filemanager/ViewContext'
+import { Context as FMContext } from '../../../../providers/FileManager'
+import { getUsableStamps } from '../../utils/bee'
+import { DriveInfo } from '@solarpunkltd/file-manager-lib'
+
+interface SidebarProps {
+ loading: boolean
+ errorMessage?: string
+ setErrorMessage?: (error: string) => void
+}
+
+export function Sidebar({ setErrorMessage, loading }: SidebarProps): ReactElement {
+ const [hovered, setHovered] = useState
+
+
+
+
+ {isHovered ?
+ {drive.name}
+
+
+ Stamp expired — files unavailable
+
+
+
+ {showForgetConfirm && (
+ e.stopPropagation()}
+ >
+
+
+
,
+ document.body,
+ )}
+ {
+ setShowContext(false)
+ setShowForgetConfirm(true)
+ }}
+ >
+ Forget drive
+
+
+
+ )
+}
diff --git a/src/modules/filemanager/components/Slider/Slider.scss b/src/modules/filemanager/components/Slider/Slider.scss
new file mode 100644
index 0000000..1ecb489
--- /dev/null
+++ b/src/modules/filemanager/components/Slider/Slider.scss
@@ -0,0 +1,29 @@
+.fm-slider {
+ display: flex;
+ justify-content: center;
+
+ & .MuiSlider-markLabel {
+ margin-top: 14px;
+ }
+
+ & .MuiSlider-mark {
+ background-color: rgb(237, 129, 49);
+ height: 4px;
+ }
+
+ & .MuiSlider-markLabel {
+ top: 14px;
+ font-size: 12px;
+ margin-left: 3px;
+ }
+
+ & .MuiSlider-markLabel[data-index='4'] {
+ left: 98% !important;
+ }
+
+ & .MuiSlider-thumb:focus,
+ & .MuiSlider-thumb.Mui-focusVisible {
+ box-shadow: none !important;
+ outline: none !important;
+ }
+}
diff --git a/src/modules/filemanager/components/Slider/Slider.tsx b/src/modules/filemanager/components/Slider/Slider.tsx
new file mode 100644
index 0000000..7a6dd7e
--- /dev/null
+++ b/src/modules/filemanager/components/Slider/Slider.tsx
@@ -0,0 +1,95 @@
+import { ReactElement, useState } from 'react'
+import './Slider.scss'
+import Slider from '@material-ui/core/Slider'
+import { makeStyles } from '@material-ui/core/styles'
+
+const useStyles = makeStyles({
+ root: {
+ width: '98%',
+ marginLeft: '-3px',
+ },
+ rail: {
+ color: 'rgb(229, 231, 235)',
+ opacity: 1,
+ height: 4,
+ },
+ track: {
+ color: 'rgb(229, 231, 235)',
+ height: 4,
+ },
+ thumb: {
+ color: 'white',
+ height: 18,
+ width: 18,
+ border: '3px solid rgb(237, 129, 49)',
+ position: 'relative',
+ top: -1,
+ marginRight: '-10px',
+ },
+})
+
+interface FMSliderProps {
+ id?: string
+ label?: string
+ marks?: { value: number; label: string }[]
+ defaultValue?: number
+ onChange: (value: number) => void
+ minValue?: number
+ maxValue?: number
+ step?: number
+}
+
+export function FMSlider({
+ id,
+ label,
+ marks,
+ defaultValue,
+ onChange,
+ minValue,
+ maxValue,
+ step,
+}: FMSliderProps): ReactElement {
+ const [value, setValue] = useState(defaultValue || 0)
+ const classes = useStyles()
+
+ return (
+ <>
+
+
+ {!loading && (
+ setIsCreateDriveOpen(false)}
+ onDriveCreated={() => {
+ setIsCreateDriveOpen(false)
+ setIsDriveCreationInProgress(false)
+ }}
+ onCreationStarted={() => setIsDriveCreationInProgress(true)}
+ onCreationError={(name: string) => {
+ setIsDriveCreationInProgress(false)
+ setErrorMessage?.(`Error creating drive: ${name}`)
+ setShowError(true)
+
+ return
+ }}
+ />
+ )}
+
+
+
+ {isDriveCreationInProgress && (
+ setIsCreateDriveOpen(true)}>
+
+ )}
+
+ {isCreateDriveOpen && (
+
+
+ Create new drive
+ setHovered('my-drives')}
+ onMouseLeave={() => setHovered(null)}
+ onClick={() => setIsMyDriveOpen(!isMyDrivesOpen)}
+ >
+
+
+ {isMyDrivesOpen && isDriveCreationInProgress && (
+
+ {isMyDrivesOpen ?
+
+ {hovered === 'my-drives' ?
+ My Drives
+
+
+ )}
+ {isMyDrivesOpen &&
+ drives.map(d => {
+ const isSelected = isCurrent(d) && view === ViewType.File
+ const localStamp = usableStamps.find(s => s.batchID.toString() === d.batchId.toString() && !d.isAdmin)
+ const stamp = isSelected && currentStamp ? currentStamp : localStamp
+
+ return (
+ stamp && (
+
+
+
+
+
+
+
+
+
+ Initializing drive metadata
+
+
+ Please wait…
+
+ {
+ setCurrentDrive(d)
+ setCurrentStamp(stamp)
+ setView(ViewType.File)
+ }}
+ >
+
+ )
+ )
+ })}
+
+ {expiredDrives.length > 0 && (
+ <>
+ setHovered('expired')}
+ onMouseLeave={() => setHovered(null)}
+ onClick={() => setIsExpiredOpen(prev => !prev)}
+ >
+
+
+ {isExpiredOpen && (
+
+ {isExpiredOpen ?
+
+ {hovered === 'expired' ?
+ Expired drives
+
+ {expiredDrives.map(d => (
+
+ )}
+
+ )}
+
+ {
+ setCurrentDrive(d)
+ setView(ViewType.Expired)
+ }}
+ >
+ {
+ await syncDrives()
+ setCurrentDrive(drives.length > 0 ? drives[0] : undefined)
+ setView(ViewType.File)
+ }}
+ setErrorMessage={setErrorMessage}
+ />
+
+ ))}
+ setHovered(ViewType.Trash)}
+ onMouseLeave={() => setHovered(null)}
+ onClick={() => setIsTrashOpen(!isTrashOpen)}
+ >
+
+
+ {isTrashOpen && (
+
+ {isTrashOpen ?
+
+ {hovered === ViewType.Trash ?
+ Trash
+
+ {drives.map(d => {
+ const selected = isCurrent(d) && view === ViewType.Trash
+ const stamp = usableStamps.find(s => s.batchID.toString() === d.batchId.toString() && !d.isAdmin)
+
+ return (
+
+ )}
+ {
+ setCurrentDrive(d)
+ setCurrentStamp(stamp)
+ setView(ViewType.Trash)
+ }}
+ title={`${d.name} Trash`}
+ >
+ {d.name} Trash
+
+ )
+ })}
+ Creating drive, please do not reload
+ )}
+
+ {label && (
+
+ )}
+
+
+ {
+ setValue(Number(val))
+ onChange(Number(val))
+ }}
+ defaultValue={defaultValue || 0}
+ min={minValue || 0}
+ max={maxValue || 100}
+ step={step || 1}
+ marks={marks}
+ valueLabelDisplay="off"
+ />
+
+
+ )
+}
diff --git a/src/modules/filemanager/components/Tooltip/Tooltip.scss b/src/modules/filemanager/components/Tooltip/Tooltip.scss
new file mode 100644
index 0000000..f6b9e5f
--- /dev/null
+++ b/src/modules/filemanager/components/Tooltip/Tooltip.scss
@@ -0,0 +1,87 @@
+.fm-tooltip-wrapper {
+ position: relative;
+ display: inline-flex;
+ align-items: center;
+ margin-left: 4px;
+}
+
+.fm-tooltip-wrapper.no-margin {
+ margin-left: 0;
+}
+
+.fm-tooltip-text {
+ display: inline-block;
+ margin-right: 4px;
+ line-height: 1.2;
+}
+
+.fm-tooltip-trigger {
+ background: transparent;
+ border: none;
+ padding: 0;
+ cursor: default;
+ display: flex;
+ align-items: center;
+ color: rgb(107, 114, 128);
+}
+
+.fm-tooltip-wrapper:hover .fm-tooltip-trigger svg {
+ color: rgb(55, 65, 81);
+}
+
+.fm-tooltip-container {
+ visibility: hidden;
+ opacity: 0;
+ width: max-content;
+ max-width: 360px;
+ background: #fff;
+ color: #222;
+ text-align: left;
+ border-radius: 6px;
+ padding: 8px 12px;
+ position: absolute;
+ z-index: 30;
+ top: 50%;
+ left: calc(100% + 6px);
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
+ font-size: 12px;
+ line-height: 1.4;
+ font-weight: 400; /* ensure no bold styling */
+ pointer-events: none;
+ transition: opacity 0.16s ease-in-out, visibility 0.16s ease-in-out, transform 0.16s ease-in-out;
+ border: 1px solid rgb(209, 213, 219);
+ transform: translateY(-50%) translateX(4px);
+}
+
+.fm-tooltip-container.bottom {
+ transform: translateY(-60%) !important;
+}
+
+.fm-tooltip-wrapper:hover .fm-tooltip-container {
+ visibility: visible;
+ opacity: 1;
+ pointer-events: auto;
+ transform: translateY(-50%) translateX(0);
+}
+
+/* Left alignment (flip) when wrapper has .left class */
+.fm-tooltip-wrapper.left .fm-tooltip-container {
+ left: auto;
+ right: calc(100% + 6px);
+ transform: translateY(-50%) translateX(-4px);
+}
+
+.fm-tooltip-wrapper.left:hover .fm-tooltip-container {
+ transform: translateY(-50%) translateX(0);
+}
+
+.fm-inline-label-with-tooltip {
+ display: flex;
+ align-items: center;
+ gap: 4px;
+}
+
+.fm-flex-column {
+ display: flex;
+ flex-direction: column;
+}
diff --git a/src/modules/filemanager/components/Tooltip/Tooltip.tsx b/src/modules/filemanager/components/Tooltip/Tooltip.tsx
new file mode 100644
index 0000000..1442fbf
--- /dev/null
+++ b/src/modules/filemanager/components/Tooltip/Tooltip.tsx
@@ -0,0 +1,66 @@
+import { ReactElement, useState, useRef, useCallback } from 'react'
+import InfoIcon from 'remixicon-react/InformationLineIcon'
+import './Tooltip.scss'
+
+interface TooltipProps {
+ label: string
+ iconSize?: string
+ edgeOffsetPx?: number
+ gapPx?: number
+ children?: React.ReactNode
+ disableMargin?: boolean
+ bottomTooltip?: boolean
+}
+
+export function Tooltip({
+ label,
+ iconSize = '16px',
+ edgeOffsetPx = 12,
+ gapPx = 6,
+ children,
+ disableMargin = false,
+ bottomTooltip = false,
+}: TooltipProps): ReactElement {
+ const [alignLeft, setAlignLeft] = useState(false)
+ const wrapperRef = useRef
+
,
+ modalRoot,
+ )
+}
diff --git a/src/modules/filemanager/components/UploadConflictModal/UploadConflictModal.scss b/src/modules/filemanager/components/UploadConflictModal/UploadConflictModal.scss
new file mode 100644
index 0000000..bb6f10c
--- /dev/null
+++ b/src/modules/filemanager/components/UploadConflictModal/UploadConflictModal.scss
@@ -0,0 +1,72 @@
+.fm-upload-conflict-modal .fm-modal-window-body {
+ display: flex;
+ flex-direction: column;
+ gap: 12px;
+}
+
+.fm-conflict-row {
+ display: flex;
+ flex-direction: column;
+ gap: 4px;
+ margin-bottom: 8px;
+}
+
+.fm-conflict-option {
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+}
+
+.fm-conflict-option-title {
+ font-weight: 600;
+}
+
+.fm-conflict-option-sub {
+ color: #6b7280;
+ font-size: 13px;
+}
+
+.fm-conflict-rename-row {
+ display: grid;
+ grid-template-columns: 80px 1fr;
+ gap: 8px;
+ align-items: center;
+}
+
+.fm-conflict-sep {
+ height: 1px;
+ background: #e5e7eb;
+ margin: 8px 0;
+}
+
+.fm-input {
+ padding: 8px 10px;
+ border: 1px solid #e5e7eb;
+ border-radius: 8px;
+ outline: none;
+}
+
+.fm-input:focus {
+ border-color: #cbd5e1;
+}
+
+.fm-callout {
+ display: flex;
+ align-items: flex-start;
+ gap: 8px;
+ padding: 8px 12px;
+ border-radius: 8px;
+ font-size: 13px;
+ line-height: 1.4;
+}
+
+.fm-callout__icon {
+ margin-top: 2px;
+}
+
+.fm-callout--warning {
+ background: #fff7e6;
+ border: 1px solid #ffe3b3;
+ border-left: 4px solid #ff9900;
+ color: #5f4b00;
+}
diff --git a/src/modules/filemanager/components/UploadConflictModal/UploadConflictModal.tsx b/src/modules/filemanager/components/UploadConflictModal/UploadConflictModal.tsx
new file mode 100644
index 0000000..adb64b6
--- /dev/null
+++ b/src/modules/filemanager/components/UploadConflictModal/UploadConflictModal.tsx
@@ -0,0 +1,107 @@
+import { ReactElement, useMemo, useState } from 'react'
+import './UploadConflictModal.scss'
+import '../../styles/global.scss'
+import { Button } from '../Button/Button'
+import WarningIcon from 'remixicon-react/ErrorWarningLineIcon'
+
+interface Props {
+ filename: string
+ suggestedName: string
+ existingNames: Set
+
+
+
+ Choose extension period and additional storage for your drive.
+
+
+
+
+
+
+ {walletBalance && nodeAddresses ? (
+
+
+ ) : (
+
+
+ Balance
+ {`${walletBalance.bzzBalance.toSignificantDigits(4)} xBZZ`}
+
+
+ Wallet address:
+ {`${walletBalance.walletAddress.slice(
+ 0,
+ 4,
+ )}...${walletBalance.walletAddress.slice(-4)}`}
+ Wallet information is not available
+ )}
+
+
+
+
+
+
+
+
+
+
+
+
+ Summary
+
+ Drive: {drive.name} {drive.isAdmin &&
+
+ BatchId: {stamp.label} ({shortBatchId})
+
+ Expiry: {stamp.duration.toEndDate().toLocaleDateString()}
+
+ Additional storage:{' '}
+ {(() => {
+ if (capacityIndex === 0) return '0 GB'
+
+ return `${
+ fromBytesConversion(Math.max(capacity.toBytes() - stamp.size.toBytes(), 0), 'GB').toFixed(3) + ' GB'
+ } ${durationExtensionCost === '' ? '' : '(' + extensionCost + ' xBZZ)'}`
+ })()}
+
+
+ Extension period:{' '}
+ {`${desiredLifetimeOptions[lifetimeIndex]?.label} ${
+ capacityExtensionCost === '' ? '' : '(' + extensionCost + ' xBZZ)'
+ }`}
+
+
+
+ Total:{' '}
+
+ {extensionCost} xBZZ {isBalanceSufficient ? '' : '(Insufficient balance)'}
+
+
+
+
+
+ {isSubmitting && (
+
+
+ Please wait…
+
+ )}
+
+
+ )
+}
diff --git a/src/modules/filemanager/components/VersionHistoryModal/VersionHistoryModal.scss b/src/modules/filemanager/components/VersionHistoryModal/VersionHistoryModal.scss
new file mode 100644
index 0000000..037ca3a
--- /dev/null
+++ b/src/modules/filemanager/components/VersionHistoryModal/VersionHistoryModal.scss
@@ -0,0 +1,67 @@
+.vh-title {
+ display: inline-block;
+ max-width: min(48vw, 520px);
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ vertical-align: bottom;
+}
+.vh-title-sub {
+ opacity: 0.8;
+}
+
+.vh-name {
+ font-weight: 600;
+}
+
+.vh-footer {
+ display: flex;
+ align-items: center;
+ gap: 12px;
+}
+
+.vh-footer-left {
+ margin-right: auto;
+}
+.vh-footer-left .fm-button {
+ width: auto;
+ min-width: 120px;
+}
+
+.vh-footer-right {
+ margin-left: auto;
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ white-space: nowrap;
+}
+
+.vh-footer-right .fm-button {
+ min-width: 120px;
+ height: var(--fm-button-height, 40px);
+}
+
+.vh-page {
+ opacity: 0.7;
+ margin-right: 6px;
+}
+
+@media (max-width: 640px) {
+ .vh-footer {
+ flex-wrap: wrap;
+ }
+ .vh-footer-right {
+ width: 100%;
+ justify-content: space-between;
+ margin-left: 0;
+ }
+ .vh-footer-right .fm-button {
+ flex: 1;
+ min-width: 0;
+ }
+ .vh-page {
+ order: -1;
+ flex: 1;
+ text-align: left;
+ }
+}
diff --git a/src/modules/filemanager/components/VersionHistoryModal/VersionHistoryModal.tsx b/src/modules/filemanager/components/VersionHistoryModal/VersionHistoryModal.tsx
new file mode 100644
index 0000000..be7258b
--- /dev/null
+++ b/src/modules/filemanager/components/VersionHistoryModal/VersionHistoryModal.tsx
@@ -0,0 +1,351 @@
+import { ReactElement, useEffect, useMemo, useState, useCallback, useContext } from 'react'
+import './VersionHistoryModal.scss'
+import '../../styles/global.scss'
+
+import { Button } from '../Button/Button'
+import { createPortal } from 'react-dom'
+import HistoryIcon from 'remixicon-react/HistoryLineIcon'
+
+import { Context as FMContext } from '../../../../providers/FileManager'
+import type { FileInfo } from '@solarpunkltd/file-manager-lib'
+import { FeedIndex } from '@ethersphere/bee-js'
+import { ConflictAction, useUploadConflictDialog } from '../../hooks/useUploadConflictDialog'
+import { ConfirmModal } from '../ConfirmModal/ConfirmModal'
+
+import { indexStrToBigint } from '../../utils/common'
+import { VersionsList, truncateNameMiddle } from './VersionList/VersionList'
+import { ActionTag, DownloadProgress, TrackDownloadProps } from '../../constants/transfers'
+import { useTransfers } from '../../hooks/useTransfers'
+
+const VERSION_HISTORY_PAGE_SIZE = 5
+
+type RenameConfirmState = {
+ version: FileInfo
+ headName: string
+ targetName: string
+}
+
+interface VersionHistoryModalProps {
+ fileInfo: FileInfo
+ onCancelClick: () => void
+ onDownload?: (props: TrackDownloadProps) => (dp: DownloadProgress) => void
+}
+
+export function VersionHistoryModal({ fileInfo, onCancelClick, onDownload }: VersionHistoryModalProps): ReactElement {
+ const { fm, files, currentDrive } = useContext(FMContext)
+
+ const localTransfers = useTransfers({})
+ const trackDownload = onDownload ?? localTransfers.trackDownload
+
+ const [openConflict, conflictPortal] = useUploadConflictDialog()
+ const modalRoot = document.querySelector('.fm-main') || document.body
+
+ const [allVersions, setAllVersions] = useState
+
+
+
+
+
+
+
+
+
+ {isTrashedExisting && (
+
+
+
+ A file named “{filename}” already exists in this drive.
+ What would you like to do?
+
+
+
+
+
+ Keep both
+
+ Upload the new file as a separate item with a different name.
+
+
+
+ setCustomName(e.target.value)}
+ className="fm-input"
+ placeholder={suggestedName}
+ />
+ {!isNameValid && customName.trim().length > 0 && existingNames.has(customName.trim()) && (
+
+
+ That name already exists.
+
+ )}
+
+
+ Replace
+
+ Replace the existing file by uploading this as a new version of “{filename}”.
+
+
+
+
+
+ )}
+
+
+
+
+
+
+ {conflictPortal}
+
,
+ modalRoot,
+ )
+}
diff --git a/src/modules/filemanager/components/VersionHistoryModal/VersionList/VersionList.scss b/src/modules/filemanager/components/VersionHistoryModal/VersionList/VersionList.scss
new file mode 100644
index 0000000..bad0044
--- /dev/null
+++ b/src/modules/filemanager/components/VersionHistoryModal/VersionList/VersionList.scss
@@ -0,0 +1,203 @@
+.fm-version-history-list {
+ display: flex;
+ flex-direction: column;
+ gap: 10px;
+}
+
+.vh-row {
+ display: grid;
+ grid-template-columns: minmax(0, 1fr) max-content;
+ align-items: center;
+ gap: 12px;
+ padding: 10px 12px;
+ border-radius: 10px;
+ width: 100%;
+ box-sizing: border-box;
+ overflow: hidden;
+}
+
+.vh-left {
+ min-width: 0;
+ display: flex;
+ flex-direction: column;
+ gap: 6px;
+}
+
+.vh-meta {
+ display: flex;
+ align-items: center;
+ gap: 10px;
+ min-width: 0;
+ color: #4b5563;
+ font-size: 13px;
+ flex-wrap: wrap;
+}
+.vh-meta-item {
+ display: inline-flex;
+ align-items: center;
+ gap: 6px;
+}
+.vh-dot {
+ opacity: 0.4;
+}
+
+.vh-chip {
+ display: inline-flex;
+ align-items: center;
+ height: 22px;
+ padding: 0 8px;
+ border-radius: 999px;
+ font-size: 12px;
+ font-weight: 600;
+ background: #eef2ff;
+ color: #3730a3;
+ border: 1px solid #c7d2fe;
+}
+.vh-tag {
+ display: inline-flex;
+ align-items: center;
+ height: 22px;
+ padding: 0 8px;
+ border-radius: 999px;
+ font-size: 12px;
+ background: #f3f4f6;
+ color: #111827;
+ border: 1px solid #e5e7eb;
+}
+
+.vh-tag--current {
+ background: #dcfce7;
+ border-color: #bbf7d0;
+ color: #065f46;
+ height: 18px;
+ font-size: 11px;
+ padding: 0 8px;
+ border-radius: 999px;
+ align-self: flex-start;
+ flex: 0 0 auto;
+ width: fit-content;
+ margin-top: 6px;
+}
+
+.vh-row:has(.vh-tag--current) .vh-meta {
+ flex-wrap: wrap;
+}
+.vh-row:has(.vh-tag--current) .vh-chip {
+ order: 1;
+}
+.vh-row:has(.vh-tag--current) .vh-meta-item,
+.vh-row:has(.vh-tag--current) .vh-dot {
+ order: 2;
+}
+.vh-row:has(.vh-tag--current) .vh-meta::after {
+ content: '';
+ order: 2;
+ flex-basis: 100%;
+}
+.vh-row:has(.vh-tag--current) .vh-tag--current {
+ order: 3;
+}
+
+.vh-rename {
+ font-size: 12.5px;
+ color: #6b7280;
+ max-width: 100%;
+ display: -webkit-box;
+ -webkit-line-clamp: 2;
+ line-clamp: 2;
+ -webkit-box-orient: vertical;
+ overflow: hidden;
+}
+.vh-name {
+ font-weight: 600;
+}
+
+.vh-actions {
+ display: inline-flex;
+ flex-direction: column;
+ align-items: stretch;
+ gap: 8px;
+ white-space: nowrap;
+ flex-shrink: 0;
+ justify-self: end;
+ max-width: 100%;
+}
+
+.vh-actions .fm-button {
+ width: clamp(180px, 28ch, 180px);
+ min-width: 0;
+ box-sizing: border-box;
+}
+
+@media (max-width: 720px) {
+ .vh-row {
+ grid-template-columns: 1fr;
+ gap: 8px;
+ }
+ .vh-actions {
+ justify-self: start;
+ }
+}
+
+.vh-tag--trashed { background: #ffeaea; color: #b30000; }
+.vh-tag--recovered { background: #eaffea; color: #0b7a0b; }
+.vh-tag--restored { background: #e8f0ff; color: #1b4fd6; }
+.vh-lifecycle-note { margin-top: 6px; font-size: 12px; opacity: .8; }
+.vh-soft { opacity: .6; }
+
+.vh-row:has(.vh-tag--current) .vh-meta {
+ flex-wrap: wrap;
+}
+
+.vh-row:has(.vh-tag--current) .vh-chip { order: 1; }
+
+.vh-row:has(.vh-tag--current) .vh-tag--lifecycle,
+.vh-row:has(.vh-tag--current) .vh-meta-item,
+.vh-row:has(.vh-tag--current) .vh-dot { order: 2; }
+
+.vh-row:has(.vh-tag--current) .vh-meta::after {
+ content: '';
+ order: 2;
+ flex-basis: 100%;
+}
+
+.vh-row:has(.vh-tag--current) .vh-tag--current { order: 3; }
+
+.vh-toggle {
+ appearance: none;
+ border: 0;
+ background: transparent;
+ padding: 4px;
+ margin-right: 2px;
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ cursor: pointer;
+}
+
+.vh-toggle-icon {
+ width: 10px;
+ height: 10px;
+ display: inline-block;
+ border-right: 2px solid currentColor;
+ border-bottom: 2px solid currentColor;
+ transform: rotate(-45deg);
+ transition: transform .15s ease-in-out;
+ opacity: .75;
+}
+
+.vh-toggle.is-open .vh-toggle-icon {
+ transform: rotate(45deg);
+}
+
+.vh-row.is-collapsed {
+ padding: 8px 12px;
+}
+
+.vh-row.is-collapsed .vh-meta {
+ gap: 8px;
+}
+
+.vh-row:hover .vh-toggle-icon {
+ opacity: 1;
+}
\ No newline at end of file
diff --git a/src/modules/filemanager/components/VersionHistoryModal/VersionList/VersionList.tsx b/src/modules/filemanager/components/VersionHistoryModal/VersionList/VersionList.tsx
new file mode 100644
index 0000000..9731fdf
--- /dev/null
+++ b/src/modules/filemanager/components/VersionHistoryModal/VersionList/VersionList.tsx
@@ -0,0 +1,477 @@
+import './VersionList.scss'
+import '../../../styles/global.scss'
+import { memo, useState, useCallback, useContext } from 'react'
+
+import { Button } from '../../Button/Button'
+import CalendarIcon from 'remixicon-react/CalendarLineIcon'
+import UserIcon from 'remixicon-react/UserLineIcon'
+import DownloadIcon from 'remixicon-react/Download2LineIcon'
+
+import { FileInfo } from '@solarpunkltd/file-manager-lib'
+
+import { Context as FMContext } from '../../../../../providers/FileManager'
+import { capitalizeFirstLetter, formatBytes, indexStrToBigint } from '../../../utils/common'
+import { startDownloadingQueue } from '../../../utils/download'
+import { ActionTag, DownloadProgress, TrackDownloadProps } from '../../../constants/transfers'
+import { Context as SettingsContext } from '../../../../../providers/Settings'
+import { useContextMenu } from '../../../hooks/useContextMenu'
+
+export const truncateNameMiddle = (s: string, max = 42): string => {
+ const str = String(s)
+
+ if (str.length <= max) return str
+ const half = Math.floor((max - 1) / 2)
+
+ return `${str.slice(0, half)}…${str.slice(-half)}`
+}
+
+interface VersionListProps {
+ versions: FileInfo[]
+ headFi: FileInfo
+ onDownload: (props: TrackDownloadProps) => (dp: DownloadProgress) => void
+ restoreVersion: (fi: FileInfo) => Promise
+
+
+
+
+
+ {error &&
+ Restoring will rename:
+
+ {truncateNameMiddle(renameConfirm.headName, 44)}
+ {' '}
+ →{' '}
+
+ {truncateNameMiddle(renameConfirm.targetName, 44)}
+
+ .
+
+ }
+ confirmLabel="Restore"
+ cancelLabel="Cancel"
+ onConfirm={async () => {
+ await doRestore(renameConfirm.version)
+ setRenameConfirm(null)
+ }}
+ onCancel={() => setRenameConfirm(null)}
+ />
+ )}
+
+
+
+ {error}
}
+
+ {loading && Loading…
}
+ {!error && !loading && pageVersions.length === 0 && (
+ No versions found for this file.
+ )}
+ {conflictWarning && (
+
+ {conflictWarning}
+
+ )}
+
+ {renameConfirm && (
+
+
+
+
+
+
+
+ Page {Math.min(currentPage + 1, totalPages)} / {totalPages} · total {totalVersionsCount}
+
+ {currentPage > 0 && (
+
+
+
+ )
+}
+
+type RowFullProps = {
+ idx: bigint
+ item: FileInfo
+ headFi: FileInfo
+ isCurrent: boolean
+ fmDownload: (fi: FileInfo) => void
+ onRestore: (fi: FileInfo) => void
+ collapsed: boolean
+ onToggle: () => void
+ modified: string
+ lifeLabel?: string
+ lifeClass?: string
+ lifeAt?: string
+ secLabel?: string
+ secClass?: string
+ secAt?: string
+}
+
+const RowFull = memo(
+ ({
+ idx,
+ item,
+ headFi,
+ isCurrent,
+ fmDownload,
+ onRestore,
+ collapsed,
+ onToggle,
+ modified,
+ lifeLabel,
+ lifeClass,
+ lifeAt,
+ secLabel,
+ secClass,
+ secAt,
+ }: RowFullProps) => {
+ const willRename = headFi.name !== item.name
+
+ return (
+
+
+
+
+
+
+ v{idx.toString()}
+
+
+ {(lifeLabel === capitalizeFirstLetter(ActionTag.Trashed) ||
+ lifeLabel === capitalizeFirstLetter(ActionTag.Recovered)) && (
+ <>
+ •
+
+ {lifeLabel}
+
+
+ )}
+
+ {secLabel &&
+ (secLabel === capitalizeFirstLetter(ActionTag.Trashed) ||
+ secLabel === capitalizeFirstLetter(ActionTag.Recovered)) && (
+ <>
+ •
+
+ {secLabel}
+
+
+ )}
+
+
+
+ )
+ },
+)
+
+RowFull.displayName = 'RowFull'
+
+const VersionRow = memo(({ item, headFi, isCurrent, fmDownload, onRestore, collapsed, onToggle }: VersionRowProps) => {
+ const idx = indexStrToBigint(item.version)
+
+ if (idx === undefined) return null
+
+ const modified = item.timestamp !== undefined ? new Date(item.timestamp).toLocaleString() : '—'
+ const { label: lifeLabel, cls: lifeClass, at: lifeAt } = getPrimaryLifecycle(item)
+ const { label: secLabel, cls: secClass, at: secAt } = getSecondaryLifecycleIfRestored(item)
+ const minimized = collapsed && isMinimizable(item)
+
+ if (minimized) {
+ return (
+
+
+
+ {!collapsed && (
+
+
+
+ {!collapsed && lifeAt && lifeLabel && (
+
+ {lifeLabel} · {lifeAt}
+
+ )}
+
+ {!collapsed && willRename && !isCurrent && (
+
+ Restoring will rename{' '}
+
+ {truncateNameMiddle(headFi.name, 44)}
+ {' '}
+ →{' '}
+
+ {truncateNameMiddle(item.name, 44)}
+
+
+ )}
+
+ }
+ onClick={() => fmDownload(item)}
+ />
+ {!isCurrent &&
+ )}
+
+ {versions.map(item => {
+ const idx = indexStrToBigint(item.version)
+
+ if (idx === undefined) return null
+
+ const key = `${item.topic.toString()}:${idx.toString()}`
+ const hasExplicit = Object.prototype.hasOwnProperty.call(expanded, key)
+
+ const isCurrent = indexStrToBigint(headFi.version) === idx
+ const defaultCollapsed = !isCurrent
+
+ const collapsed = hasExplicit ? !expanded[key] : defaultCollapsed
+
+ return (
+ handleDownload(item)}
+ onRestore={restoreVersion}
+ collapsed={collapsed}
+ onToggle={() => toggle(key, item)}
+ />
+ )
+ })}
+
+ )
+}
diff --git a/src/modules/filemanager/constants/common.ts b/src/modules/filemanager/constants/common.ts
new file mode 100644
index 0000000..33b4cf2
--- /dev/null
+++ b/src/modules/filemanager/constants/common.ts
@@ -0,0 +1,11 @@
+import { FeedIndex, RedundancyLevel } from '@ethersphere/bee-js'
+import { capitalizeFirstLetter } from '../utils/common'
+
+export const FEED_INDEX_ZERO = FeedIndex.fromBigInt(BigInt(0))
+
+export const erasureCodeMarks = Object.entries(RedundancyLevel)
+ .filter(([_, value]) => typeof value === 'number')
+ .map(([key, value]) => ({
+ value: value as number,
+ label: capitalizeFirstLetter(key),
+ }))
diff --git a/src/modules/filemanager/constants/stamps.ts b/src/modules/filemanager/constants/stamps.ts
new file mode 100644
index 0000000..8d80ba7
--- /dev/null
+++ b/src/modules/filemanager/constants/stamps.ts
@@ -0,0 +1,7 @@
+export const desiredLifetimeOptions = [
+ { value: 0, label: '1 week' },
+ { value: 1, label: '1 month' },
+ { value: 2, label: '3 months' },
+ { value: 3, label: '6 months' },
+ { value: 4, label: '1 year' },
+]
diff --git a/src/modules/filemanager/constants/tooltips.ts b/src/modules/filemanager/constants/tooltips.ts
new file mode 100644
index 0000000..7e41202
--- /dev/null
+++ b/src/modules/filemanager/constants/tooltips.ts
@@ -0,0 +1,80 @@
+// Tooltip content for File Manager
+export const TOOLTIPS = {
+ // Admin Stamp Creation
+ ADMIN_PREVIOUSLY_CREATED: `Use Existing Admin Drive
+An existing Admin Drive from a previous session can be selected here. This will link the File Manager to that Admin Drive.
++
+Otherwise, leave this blank and configure a new Admin Drive below.`, + ADMIN_DESIRED_LIFETIME: `Defines how long your deposit will cover storage on the network. It’s an estimate, not a fixed expiry - you can top up anytime to extend it.`, + + ADMIN_SECURITY_LEVEL: `This sets how many encrypted copies of your Admin Drive’s information are stored across the network. Higher levels increase resilience but reduce the available storage capacity.`, + + ADMIN_ESTIMATED_COST: `This is a one-time deposit required to create your drive, calculated from the desired lifetime, storage size, and the current storage price.`, + + ADMIN_PURCHASE_BUTTON: `
Create Admin Drive
+This action will do two things:
++
+1. It will make a one-time transaction to deposit the Estimated Cost.
+2. It will create the Admin Drive.`, + + ADMIN_PURCHASE_BUTTON_ALREADY_EXISTED_ADMIN_DRIVE: `
Create Admin Drive
+
+It will create the Admin Drive.`,
+
+ // Drive Creation
+ DRIVE_NAME: `About Drive Name
+Set a human-readable label for this drive (e.g. Personal files). This name is stored as metadata.`,
+
+ DRIVE_INITIAL_CAPACITY: `What is Initial Storage?
+This sets the initial storage capacity. This value is used in combination with lifetime and redundancy, to calculate the initial deposit.
++
+Warning: Be aware that in rare cases the drive might indicate it's full sooner than expected. +
+
+Tip: Selecting a size with a little extra room provides the best flexibility.`, + + DRIVE_DESIRED_LIFETIME: `
What is Desired Lifetime?
+This sets the initial period the drive's information will be paid for on the network. This is not a fixed expiry date. It's the estimated time it will take for the drive's balance to be depleted. You can top up any time to extend the lifetime.
++
+Warning: If the deposit balance runs out, the drive's data is no longer paid for and will be scheduled for permanent deletion by the network. The rate of depletion is depends upon actual market conditions.`, + + DRIVE_SECURITY_LEVEL: `
What is Security Level?
+This controls the level of data redundancy for your drive's data.
++
+Higher levels provide maximum protection against data loss, even in the unlikely event of large-scale network disruptions. +
+
+Trade-off: Higher redundancy levels decreases your initial storage, while keeping the initial deposit cost the same for the same Desired Lifetime.`, + + DRIVE_ESTIMATED_COST: `
How is this cost calculated?
+This is the one-time deposit of xBZZ tokens required to fund the drive's storage.
++
+It is calculated based on: +
+1. Initial Storage (Storage size) +
+2. Desired Lifetime (Persistence duration)
+3. Current Network Price (Dynamic storage costs) +
+
+This deposit is used to pay storage fees on the network over time. The cost is not a one-time purchase but a deposit that will be gradually consumed over time based on the network's storage fees. +
+
+As the deposit depletes, the drive's lifetime decreases. You can top up the deposit at any time to extend its lifetime. +
+
+Note: This estimate is based on current network conditions and the deposit's depletion rate is subject to change and is contingent upon prevailing market conditions.`, + + PRIVATE_KEY_MODAL_HEADER: `The Private Key ensures exclusive access to this File Manager instance. It is the user's responsibity to store in a secure and tamper-proof way.`, + PRIVATE_KEY_MODAL_GENERATED_KEY: `Advanced users may input a custom key.`, + PRIVATE_KEY_MODAL_CONFIRM_KEY: `
Confirmation Step
+This is a final safety check to ensure a copy of the key has been saved before proceeding.`,
+ PRIVATE_KEY_MODAL_KEY_INFO: `On This Device Only
+For convenience, an encrypted copy of this key is saved in this browser's local storage. This avoids needing to enter it on every visit.`,
+}
diff --git a/src/modules/filemanager/constants/transfers.ts b/src/modules/filemanager/constants/transfers.ts
new file mode 100644
index 0000000..a790806
--- /dev/null
+++ b/src/modules/filemanager/constants/transfers.ts
@@ -0,0 +1,57 @@
+export enum FileTransferType {
+ Upload = 'upload',
+ Download = 'download',
+ Update = 'update',
+}
+
+export enum TransferStatus {
+ Uploading = 'uploading',
+ Downloading = 'downloading',
+ Done = 'done',
+ Error = 'error',
+ Queued = 'queued',
+ Cancelled = 'cancelled',
+}
+
+export enum TransferBarColor {
+ Upload = '#22c55e',
+ Update = '#f59e0b',
+ Download = '#3b82f6',
+}
+
+export enum ViewType {
+ File = 'file',
+ Trash = 'trash',
+ Expired = 'expired',
+}
+
+export enum ActionTag {
+ Trashed = 'trashed',
+ Recovered = 'recovered',
+ Restored = 'restored',
+}
+
+export enum FileAction {
+ Trash = 'trash',
+ Forget = 'forget',
+ Destroy = 'destroy',
+}
+
+export enum DownloadState {
+ InProgress = 'in-progress',
+ Completed = 'completed',
+ Cancelled = 'cancelled',
+ Error = 'error',
+}
+
+export type TrackDownloadProps = {
+ name: string
+ size?: string
+ expectedSize?: number
+}
+
+export interface DownloadProgress {
+ progress: number
+ isDownloading: boolean
+ state?: DownloadState
+}
diff --git a/src/modules/filemanager/hooks/useBulkActions.ts b/src/modules/filemanager/hooks/useBulkActions.ts
new file mode 100644
index 0000000..b8ce086
--- /dev/null
+++ b/src/modules/filemanager/hooks/useBulkActions.ts
@@ -0,0 +1,137 @@
+import { useCallback, useMemo, useRef, useState, useContext } from 'react'
+import type { FileInfo } from '@solarpunkltd/file-manager-lib'
+import { Context as FMContext } from '../../../providers/FileManager'
+import { startDownloadingQueue } from '../utils/download'
+import { formatBytes, getFileId } from '../utils/common'
+import { DownloadProgress, TrackDownloadProps } from '../constants/transfers'
+
+export function useBulkActions(opts: {
+ listToRender: FileInfo[]
+ trackDownload: (props: TrackDownloadProps) => (dp: DownloadProgress) => void
+}) {
+ const { listToRender, trackDownload } = opts
+
+ const { fm } = useContext(FMContext)
+
+ const [selectedIds, setSelectedIds] = useState
+
+ )
+ }
+
+ if (!hasPk) {
+ return (
+
+
+ Bee node error - cannot load File Manager
+
+
+ )
+ }
+
+ if (initializationError && !isLoading && !shallReset) {
+ return (
+
+
+ )
+ }
+
+ if (showResetModal) {
+ return (
+
+
+ Failed to initialize File Manager, reload and try again
+
+
+
+
+
+ {
+ setShowResetModal(false)
+ }}
+ background={false}
+ />
+
+ )
+ }
+
+ if (!showErrorModal && (isEmptyState || isInvalidState)) {
+ return (
+
+ setShowInitialModal(isVisible)}
+ handleShowError={(flag: boolean) => setShowErrorModal(flag)}
+ setIsCreationInProgress={(isCreating: boolean) => setIsCreationInProgress(isCreating)}
+ />
+
+ )
+ }
+
+ if (!fm) {
+ return (
+
+
+ )
+ }
+
+ if (showErrorModal) {
+ return (
+
+
+
+ File manager loading…
+ Please wait a few seconds
+
+
+
+
+