chore(master): release 0.33.5 (#719 )

* chore(master): release 0.33.5 * fix: update changelog --------- Co-authored-by: Ferenc Sárai <sarai.ferenc@gmail.com>
fix: link_randomuuid_cache (#718 )
2026-02-17 17:37:07 +01:00 · 2026-02-17 17:19:10 +01:00 · 2026-01-26 13:19:08 +01:00 · 2026-01-26 12:57:14 +01:00 · 2026-01-05 19:03:59 +01:00 · 2025-11-17 13:34:32 +01:00
235 changed files with 79360 additions and 29841 deletions
@@ -9,12 +9,12 @@
    "file-loader",
    "ts-node",
    "webpack-cli",
    "assert",
    "buffer",
    "crypto*",
    "stream*",
    "env-paths",
    "open",
-    "base64-inline-loader"
+    "base64-inline-loader",
    "sass"
  ]
-}
+}
@@ -1 +1,3 @@
 PORT=3002
 REACT_APP_FORMBRICKS_ENV_ID=
 REACT_APP_FORMBRICKS_APP_URL=
@@ -18,7 +18,8 @@ jobs:
    env:
      REACT_APP_BEE_HOST: https://api.test-node.staging.ethswarm.org/
-      REACT_APP_BEE_DEBUG_HOST: https://debug.test-node.staging.ethswarm.org/
+      REACT_APP_FORMBRICKS_ENV_ID: ${{ secrets.REACT_APP_FORMBRICKS_ENV_ID }}
      REACT_APP_FORMBRICKS_APP_URL: ${{ secrets.REACT_APP_FORMBRICKS_APP_URL }}
    steps:
      - uses: actions/checkout@v2
@@ -29,18 +30,7 @@ jobs:
        with:
          node-version: ${{ matrix.node-version }}
      ## Try getting the node modules from cache, if failed npm ci
      - uses: actions/cache@v2
        id: cache-npm
        with:
          path: node_modules
          key: ${{ runner.os }}-node-${{ matrix.node }}-${{ hashFiles('**/package-lock.json') }}
          restore-keys: |
            ${{ runner.OS }}-node-${{ matrix.node-version }}-${{ env.cache-name }}-
            ${{ runner.OS }}-node-${{ matrix.node-version }}-
      - name: Install npm deps
        if: steps.cache-npm.outputs.cache-hit != 'true'
        run: npm ci
      - name: Commit linting
@@ -57,13 +47,6 @@ jobs:
      - name: Types check
        run: npm run check:types
      - name: Update supported Bee action
        uses: ethersphere/update-supported-bee-action@v1
        if: github.ref == 'refs/heads/master'
        with:
          updateEngine: true
          token: ${{ secrets.GHA_PAT_BASIC }}
      - name: Build
        run: npm run build
@@ -71,16 +54,16 @@ jobs:
        run: npm run build:component
      - name: Create preview
-        uses: ethersphere/swarm-actions/pr-preview@v0
+        uses: ethersphere/swarm-actions/pr-preview@v1
        continue-on-error: true
        with:
          bee-url: https://unlimited.gateway.ethswarm.org
          token: ${{ secrets.GHA_PAT_BASIC }}
          error-document: index.html
-          headers: "${{ secrets.GATEWAY_AUTHORIZATION_HEADER }}"
+          headers: '${{ secrets.GATEWAY_AUTHORIZATION_HEADER }}'
      - name: Upload to testnet
-        uses: ethersphere/swarm-actions/upload-dir@v0
+        uses: ethersphere/swarm-actions/upload-dir@v1
        continue-on-error: true
        with:
          index-document: index.html
@@ -1,20 +1,26 @@
-# After new release is published on github, publish it to npmjs
+name: Publish on npm
 name: Publish on npmjs
 on:
  release:
    types: [published]
 permissions:
  id-token: write
  contents: read
 jobs:
  publish:
    runs-on: ubuntu-latest
    env:
      REACT_APP_FORMBRICKS_ENV_ID: ${{ secrets.REACT_APP_FORMBRICKS_ENV_ID }}
      REACT_APP_FORMBRICKS_APP_URL: ${{ secrets.REACT_APP_FORMBRICKS_APP_URL }}
    steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v4
-      - uses: actions/setup-node@v1
+      
      - uses: actions/setup-node@v4
        with:
-          node-version: 18
+          node-version: 24
          registry-url: 'https://registry.npmjs.org'
      - run: npm ci
-      - run: npm publish --access public
+
-        env:
+      - run: npm publish --provenance --access public
          NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}
@@ -9,6 +9,11 @@ on:
 jobs:
  publish:
    runs-on: ubuntu-latest
    env:
      REACT_APP_FORMBRICKS_ENV_ID: ${{ secrets.REACT_APP_FORMBRICKS_ENV_ID }}
      REACT_APP_FORMBRICKS_APP_URL: ${{ secrets.REACT_APP_FORMBRICKS_APP_URL }}
    steps:
      - uses: actions/checkout@v2
      - uses: actions/setup-node@v1
@@ -12,6 +12,10 @@ jobs:
  tests:
    runs-on: ubuntu-latest
    env:
      REACT_APP_FORMBRICKS_ENV_ID: ${{ secrets.REACT_APP_FORMBRICKS_ENV_ID }}
      REACT_APP_FORMBRICKS_APP_URL: ${{ secrets.REACT_APP_FORMBRICKS_APP_URL }}
    strategy:
      matrix:
        node-version: [18.x]
@@ -25,21 +29,8 @@ jobs:
        with:
          node-version: ${{ matrix.node-version }}
      ## Try getting the node modules from cache, if failed npm ci
      - uses: actions/cache@v2
        id: cache-npm
        with:
          path: node_modules
          key: ${{ runner.os }}-node-${{ matrix.node }}-${{ hashFiles('**/package-lock.json') }}
          restore-keys: |
            ${{ runner.OS }}-node-${{ matrix.node-version }}-${{ env.cache-name }}-
            ${{ runner.OS }}-node-${{ matrix.node-version }}-
      - name: Install npm deps
        if: steps.cache-npm.outputs.cache-hit != 'true'
        run: npm ci
      - name: Run tests
        run: npm run test
@@ -11,6 +11,7 @@
 # production
 /build
 /lib
 .env
 # misc
 .DS_Store
@@ -22,3 +23,8 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 settings.json
 **.tgz
@@ -1,5 +1,160 @@
 # Changelog
 ## [0.33.5](https://github.com/ethersphere/bee-dashboard/compare/v0.33.4...v0.33.5) (2026-02-17)
 ### Bug Fixes
 * file-manager and swarm-desktop bugs ([#718](https://github.com/ethersphere/bee-dashboard/issues/718)) ([9e1036a](https://github.com/ethersphere/bee-dashboard/commit/9e1036ac297842055bb91512987b684552b70ca5))
 ## [0.33.4](https://github.com/ethersphere/bee-dashboard/compare/v0.33.3...v0.33.4) (2026-01-26)
 ### Bug Fixes
 * file-manager and swarm-desktop bugs ([#714](https://github.com/ethersphere/bee-dashboard/issues/714)) ([0d5138f](https://github.com/ethersphere/bee-dashboard/commit/0d5138f5bc816cece0324793166ec84ef2147679))
 ## [0.33.3](https://github.com/ethersphere/bee-dashboard/compare/v0.33.2...v0.33.3) (2025-11-17)
 ### Bug Fixes
 * add formbricks environment variables to workflow files ([#709](https://github.com/ethersphere/bee-dashboard/issues/709)) ([6d28653](https://github.com/ethersphere/bee-dashboard/commit/6d28653bb0b731a16d8adabbb9a8c9074387f769))
 ## [0.33.2](https://github.com/ethersphere/bee-dashboard/compare/v0.33.1...v0.33.2) (2025-11-14)
 ### Bug Fixes
 * clarify installation instructions in README ([#707](https://github.com/ethersphere/bee-dashboard/issues/707)) ([82e7c78](https://github.com/ethersphere/bee-dashboard/commit/82e7c78a818b46031b040f92e9a9491003c9bd92))
 ## [0.33.1](https://github.com/ethersphere/bee-dashboard/compare/v0.33.0...v0.33.1) (2025-11-13)
 ### Bug Fixes
 * put back external wallet balance context ([#704](https://github.com/ethersphere/bee-dashboard/issues/704)) ([096522a](https://github.com/ethersphere/bee-dashboard/commit/096522aa8a2f11afb0061a6fedbae241967408ef))
 ## [0.33.0](https://github.com/ethersphere/bee-dashboard/compare/v0.32.0...v0.33.0) (2025-11-12)
 ### Features
 * bee-js revamp ([#690](https://github.com/ethersphere/bee-dashboard/issues/690)) ([1249c0d](https://github.com/ethersphere/bee-dashboard/commit/1249c0df71baec331cb3f2661e0a08648d924406))
 * FileManager ([#98](https://github.com/ethersphere/bee-dashboard/issues/98)) ([#703](https://github.com/ethersphere/bee-dashboard/issues/703)) ([5bfe2a0](https://github.com/ethersphere/bee-dashboard/commit/5bfe2a033118dde43b4cd221830741a427882922))
 ## [0.32.0](https://github.com/ethersphere/bee-dashboard/compare/v0.31.0...v0.32.0) (2025-02-12)
 ### Features
 * vod display ([#686](https://github.com/ethersphere/bee-dashboard/issues/686)) ([bcd3d50](https://github.com/ethersphere/bee-dashboard/commit/bcd3d50b4209a4f66a259b8a3f6ea5ffd908471f))
 ## [0.31.0](https://github.com/ethersphere/bee-dashboard/compare/v0.30.0...v0.31.0) (2025-01-13)
 ### Features
 * remove experimental FDP menu item ([#687](https://github.com/ethersphere/bee-dashboard/issues/687)) ([a6125b3](https://github.com/ethersphere/bee-dashboard/commit/a6125b3d0b0b680a9fa61a8edcd75b2ae6c153e0))
 ## [0.30.0](https://github.com/ethersphere/bee-dashboard/compare/v0.29.0...v0.30.0) (2024-11-25)
 ### Features
 * add experimental fdp ([#681](https://github.com/ethersphere/bee-dashboard/issues/681)) ([d0c94b7](https://github.com/ethersphere/bee-dashboard/commit/d0c94b7316ea2b139bddc5481132ea7de7cb840d))
 * update map data ([#684](https://github.com/ethersphere/bee-dashboard/issues/684)) ([fbb2ed8](https://github.com/ethersphere/bee-dashboard/commit/fbb2ed8a576f3519883e71382b7f4e8505fbe139))
 ### Bug Fixes
 * allow changing api url ([#676](https://github.com/ethersphere/bee-dashboard/issues/676)) ([6294bb0](https://github.com/ethersphere/bee-dashboard/commit/6294bb0a7be6b9b82354c42da8c84e767fad899e))
 * explicitly define type 0 transaction ([#674](https://github.com/ethersphere/bee-dashboard/issues/674)) ([63f3380](https://github.com/ethersphere/bee-dashboard/commit/63f338075b919cb70d79665c3d86537f2ac1d2e9))
 ## [0.29.0](https://github.com/ethersphere/bee-dashboard/compare/v0.28.0...v0.29.0) (2024-07-17)
 ### Features
 * clarify labels and syncing ([#670](https://github.com/ethersphere/bee-dashboard/issues/670)) ([01b1b39](https://github.com/ethersphere/bee-dashboard/commit/01b1b39c42cc5b68a0132c3696c3c42a27ea2ee4))
 * polish app ([#669](https://github.com/ethersphere/bee-dashboard/issues/669)) ([8558860](https://github.com/ethersphere/bee-dashboard/commit/8558860f0a3baa82c31c091a44c78bb8e97de70d))
 ### Bug Fixes
 * clarify withdraw and deposit message ([#654](https://github.com/ethersphere/bee-dashboard/issues/654)) ([b4ebfc7](https://github.com/ethersphere/bee-dashboard/commit/b4ebfc7c3fd449807db47fa25763df464cc45618))
 ## [0.28.0](https://github.com/ethersphere/bee-dashboard/compare/v0.27.0...v0.28.0) (2024-06-18)
 ### Features
 * upgrade bee-js to 7.0.3 ([#666](https://github.com/ethersphere/bee-dashboard/issues/666)) ([e9ebe33](https://github.com/ethersphere/bee-dashboard/commit/e9ebe33d51aa525921eacfad683577605e591531))
 ## [0.27.0](https://github.com/ethersphere/bee-dashboard/compare/v0.26.2...v0.27.0) (2024-06-11)
 ### Features
 * add redeem shortcut to sidebar ([999399f](https://github.com/ethersphere/bee-dashboard/commit/999399fb08c1a47a671ba0ad50409624654a1082))
 ## [0.26.2](https://github.com/ethersphere/bee-dashboard/compare/v0.26.1...v0.26.2) (2024-06-05)
 ### Bug Fixes
 * merge version and health check ([#662](https://github.com/ethersphere/bee-dashboard/issues/662)) ([cae90c1](https://github.com/ethersphere/bee-dashboard/commit/cae90c1a82e16ee8c7908c43e2fd17f7130eb89d))
 ## [0.26.1](https://github.com/ethersphere/bee-dashboard/compare/v0.26.0...v0.26.1) (2024-06-03)
 ### Bug Fixes
 * add bee version ([#659](https://github.com/ethersphere/bee-dashboard/issues/659)) ([a5d4ecf](https://github.com/ethersphere/bee-dashboard/commit/a5d4ecf045f691b9059fcca925d0f30675d12db0))
 ## [0.26.0](https://github.com/ethersphere/bee-dashboard/compare/v0.25.0...v0.26.0) (2024-06-03)
 ### Features
 * display effective capacity ([#643](https://github.com/ethersphere/bee-dashboard/issues/643)) ([5871223](https://github.com/ethersphere/bee-dashboard/commit/58712232031e084195adf92c40cd41a98eaf16cf))
 * merge api ([#658](https://github.com/ethersphere/bee-dashboard/issues/658)) ([8cbd812](https://github.com/ethersphere/bee-dashboard/commit/8cbd812a2c04706f8f46de5355209b96783723b9))
 * show syncing info ([#647](https://github.com/ethersphere/bee-dashboard/issues/647)) ([cc91f1d](https://github.com/ethersphere/bee-dashboard/commit/cc91f1d64cd48a845fa9fa45ec4b58335eab3893))
 * wait for upload sync ([#649](https://github.com/ethersphere/bee-dashboard/issues/649)) ([79bb315](https://github.com/ethersphere/bee-dashboard/commit/79bb31540196b74f3bc0220b8c844fbd5aaaf488))
 ### Bug Fixes
 * correct the bee version detection ([#645](https://github.com/ethersphere/bee-dashboard/issues/645)) ([b3f521c](https://github.com/ethersphere/bee-dashboard/commit/b3f521ca2055b91d7adddf96563cca6bf92e3d59))
 ## [0.25.0](https://github.com/ethersphere/bee-dashboard/compare/v0.24.1...v0.25.0) (2023-12-04)
 ### Features
 * improve topup and dilute ux ([0c2ac0c](https://github.com/ethersphere/bee-dashboard/commit/0c2ac0c454ad02200a2762958c5bc5abbdfe8005))
 * update postage stamp creation screen ([#641](https://github.com/ethersphere/bee-dashboard/issues/641)) ([4f9abc6](https://github.com/ethersphere/bee-dashboard/commit/4f9abc614eedd5ce3a279a4686cc832c4d1e62c7))
 ### Bug Fixes
 * add missing stamp labels and fix inputs ([#634](https://github.com/ethersphere/bee-dashboard/issues/634)) ([7fa1cb0](https://github.com/ethersphere/bee-dashboard/commit/7fa1cb0ccf9f2a32263e84aa76732ebd2fc7fb22))
 * put stamp input error handling in state ([#640](https://github.com/ethersphere/bee-dashboard/issues/640)) ([20a051b](https://github.com/ethersphere/bee-dashboard/commit/20a051b6589c22397a7305d722a56df0604ff7a4))
 ## [0.24.1](https://github.com/ethersphere/bee-dashboard/compare/v0.24.0...v0.24.1) (2023-10-18)
 ### Bug Fixes
 * update `swap-endpoint` to `blockchain-rpc-endpoint` ([#628](https://github.com/ethersphere/bee-dashboard/issues/628)) ([bce93ce](https://github.com/ethersphere/bee-dashboard/commit/bce93ce3cdc1ef4b1f50fcf274591ba00726be16))
 ## [0.24.0](https://github.com/ethersphere/bee-dashboard/compare/v0.23.0...v0.24.0) (2023-08-11)
 ### Features
 * add stamp dilute and topup ([#619](https://github.com/ethersphere/bee-dashboard/issues/619)) ([055a300](https://github.com/ethersphere/bee-dashboard/commit/055a3002b303df45c7010ef4d365e14b979e9084))
 ## [0.23.0](https://github.com/ethersphere/bee-dashboard/compare/v0.22.0...v0.23.0) (2023-02-21)
@@ -1 +1 @@
-* @Cafe137 @vojtechsimetka
+* @Cafe137
@@ -13,16 +13,14 @@
 **Warning: This project is in alpha state. There might (and most probably will) be changes in the future to its API and
 working. Also, no guarantees can be made about its stability, efficiency, and security at this stage.**
-This project is intended to be used with **Bee version <!-- SUPPORTED_BEE_START -->1.12.0-88c1d236<!-- SUPPORTED_BEE_END -->**.
+Stay up to date by joining the [official Discord](https://discord.gg/GU22h2utj6) and by keeping an eye on the
 Using it with older or newer Bee versions is not recommended and may not work. Stay up to date by joining the
 [official Discord](https://discord.gg/GU22h2utj6) and by keeping an eye on the
 [releases tab](https://github.com/ethersphere/bee-dashboard/releases).
 ![Status page](/ui_samples/info.png)
-| Node Setup                           | Upload Files                           | Download Content                           | Accounting                                | Settings                           |
+| Node Setup                           | Upload Files                           | Download Content                           | Accounting                                | Settings                              | File Manager                       |
-| ------------------------------------ | -------------------------------------- | ------------------------------------------ | ----------------------------------------- | ---------------------------------------- |
+| ------------------------------------ | -------------------------------------- | ------------------------------------------ | ----------------------------------------- | ------------------------------------- | ---------------------------------- |
-| ![Setup](/ui_samples/node_setup.png) | ![Upload](/ui_samples/file_upload.png) | ![Download](/ui_samples/file_download.png) | ![Accounting](/ui_samples/accounting.png) | ![Settings](/ui_samples/settings.png) |
+| ![Setup](/ui_samples/node_setup.png) | ![Upload](/ui_samples/file_upload.png) | ![Download](/ui_samples/file_download.png) | ![Accounting](/ui_samples/accounting.png) | ![Settings](/ui_samples/settings.png) | ![File Manager](/ui_samples/file_manager.png) |
 ## Table of Contents
@@ -32,6 +30,7 @@ Using it with older or newer Bee versions is not recommended and may not work. S
  - [Docker](#docker)
 - [Contribute](#contribute)
 - [Development](#development)
 - [File Manager](#file-manager)
 - [Maintainers](#maintainers)
 - [License](#license)
@@ -43,11 +42,13 @@ Install globally with npm. We require Node.js's version of at least 12.x and npm
 npm install -g @ethersphere/bee-dashboard
 ```
 For the latest stable version, always use the official npm registry.
 ## Usage
-:warning: To successfully connect to the Bee node, you will need to enable the Debug API and CORS. You can do so by
+:warning: To successfully connect to the Bee node, you will need to enable CORS. You can do so by setting
-setting `cors-allowed-origins: ['*']` and `debug-api-enable: true` in the Bee config file and then restart the Bee node.
+`cors-allowed-origins: ['*']` in the Bee config file and then restart the Bee node. To see where the config file is,
-To see where the config file is, consult the
+consult the
 [official Bee documentation](https://docs.ethswarm.org/docs/working-with-bee/configuration#configuring-bee-installed-using-a-package-manager)
 ### Terminal
@@ -96,27 +97,47 @@ The Bee Dashboard runs in development mode on [http://localhost:3031/](http://lo
 #### Environmental variables
-The CRA supports to specify "environmental variables" during build time which are then hardcoded into the served static files. 
+The CRA supports to specify "environmental variables" during build time which are then hardcoded into the served static
-We support following variables:
+files. We support following variables:
- - `REACT_APP_BEE_DESKTOP_ENABLED` (`boolean`) that toggles if the Dashboard is in Desktop mode or not.
+- `REACT_APP_BEE_DESKTOP_ENABLED` (`boolean`) that toggles if the Dashboard is in Desktop mode or not.
- - `REACT_APP_BEE_DESKTOP_URL` (`string`) defines custom URL where the Desktop API is expected. By default, it is same origin under which the Dashboard is served.
+- `REACT_APP_BEE_DESKTOP_URL` (`string`) defines custom URL where the Desktop API is expected. By default, it is same
- - `REACT_APP_BEE_HOST` (`string`) defines custom Bee API URL to be used as default one. By default, the `http://localhost:1633` is used.
+  origin under which the Dashboard is served.
- - `REACT_APP_BEE_DEBUG_HOST` (`string`) defines custom Bee Debug API URL to be used as default one. By default, the `http://localhost:1635` is used.
+- `REACT_APP_BEE_HOST` (`string`) defines custom Bee API URL to be used as default one. By default, the
- - `REACT_APP_DEFAULT_RPC_URL` (`string`) defines the default RPC provider URL. Be aware, that his only configures the default value. The user can override this in Settings, which is then persisted in local store and has priority over the value set in this env. variable. By default `https://xdai.fairdatasociety.org` is used.
+  `http://localhost:1633` is used.
 - `REACT_APP_DEFAULT_RPC_URL` (`string`) defines the default RPC provider URL. Be aware, that his only configures the
  default value. The user can override this in Settings, which is then persisted in local store and has priority over
  the value set in this env. variable. By default `https://xdai.fairdatasociety.org` is used.
 - `REACT_APP_FORMBRICKS_ENV_ID` and `REACT_APP_FORMBRICKS_APP_URL` (`string`) configures the
  [Formbricks](https://formbricks.com/) integration for user feedback collection. If these variables are not set, the
  feedback form is not available in the app.
 #### Swarm Desktop development
-If you want to develop Bee Dashboard in the Swarm Desktop mode, then spin up `swarm-desktop` to the point where Desktop is initialized (eq. the splash screen disappear) and:
+If you want to develop Bee Dashboard in the Swarm Desktop mode, then spin up `swarm-desktop` to the point where Desktop
 is initialized (eq. the splash screen disappear) and:
 ```sh
 echo "REACT_APP_BEE_DESKTOP_URL=http://localhost:3054
 REACT_APP_BEE_DESKTOP_ENABLED=true" > .env.development.local
 npm start
-npm run desktop # This will inject the API key to the Dashboard 
+npm run desktop # This will inject the API key to the Dashboard
 ```
 ## File Manager
 The File Manager module provides intuitive decentralized file storage and management.
 For comprehensive documentation, see the [File Manager Documentation](./docs/FILE_MANAGER.md).
 ### Features
 - Create and manage multiple drives with configurable capacity and lifetime
 - Upload, download, and organize files with version control
 - Manage postage stamps required for file uploads
 - Configure erasure coding levels for data redundancy
 ## Contribute
 There are some ways you can make this module better:
@@ -128,7 +149,6 @@ There are some ways you can make this module better:
 ## Maintainers
 - [vojtechsimetka](https://github.com/vojtechsimetka)
 - [Cafe137](https://github.com/Cafe137)
 See what "Maintainer" means [here](https://github.com/ethersphere/repo-maintainer).
@@ -137,5 +157,4 @@ See what "Maintainer" means [here](https://github.com/ethersphere/repo-maintaine
 [BSD-3-Clause](./LICENSE)
 [![FOSSA Status](https://app.fossa.com/api/projects/git%2Bgithub.com%2Fethersphere%2Fbee-dashboard.svg?type=large)](https://app.fossa.com/projects/git%2Bgithub.com%2Fethersphere%2Fbee-dashboard?ref=badge_large)
@@ -0,0 +1,605 @@
 # File Manager Module Documentation
 ## Introduction
 The File Manager module is a decentralized file storage interface built on top of Ethereum Swarm. It provides a complete file management system that leverages Swarm's postage stamp mechanism for incentivized storage and retrieval.
 ### Table of Contents
 - [Introduction](#introduction)
 - [Key Concepts](#key-concepts)
 - [Architecture Overview](#architecture-overview)
 - [Module Structure](#module-structure)
 - [Getting Started](#getting-started)
 - [State Management](#state-management)
 - [Core Features](#core-features)
 - [Operation Flows](#operation-flows)
 - [Component Architecture](#component-architecture)
 - [Design Patterns](#design-patterns)
 - [Troubleshooting](#troubleshooting)
 - [Testing Approach](#testing-approach)
 - [Performance Considerations](#performance-considerations)
 - [Known Limitations](#known-limitations)
 - [Future Enhancements](#future-enhancements)
 ### What is File Manager?
 File Manager allows users to:
 - Create and manage multiple isolated storage containers (drives)
 - Upload, download, and organize files with folder support
 - Configure security levels (redundancy levels) using erasure coding
 - Purchase and manage postage stamp batches to pay for storage
 - Track file versions and restore previous states
 - Handle file conflicts and perform bulk operations
 ### Core Philosophy
 File Manager is built around several key principles:
 1. **Decentralization**: All file metadata and content are stored on Swarm, not centralized servers
 2. **User Control**: Users own their private keys and control their data
 3. **Stamp-Based Storage**: All operations require valid postage stamps (blockchain-backed storage payment)
 4. **Complexity Management**: Components follow strict complexity limits (max 20) with extraction patterns
 5. **State Consistency**: Real-time synchronization between UI and Swarm storage
 ---
 ## Key Concepts
 ### Drives
 **Drives** are isolated storage containers that hold files and folders. Each drive:
 - Has a unique ID derived from its creation topic on Swarm
 - Is associated with a specific postage batch
 - Has configurable initial capacity and desired lifetime (inherited from batch)
 - Can be either an **admin drive** (manages system state) or **user drive** (stores user files)
 - Maintains its own file list and metadata
 **Admin Drive** is a special drive that:
 - Is created once per File Manager instance
 - Stores the list of all user drives
 - Must be initialized before any other operations
 - Uses a stamp labeled `ADMIN_STAMP_LABEL`
 - Cannot be deleted (only reset)
 **User Drives** are regular drives that:
 - Store user files and folders
 - Can be created, upgraded, or destroyed
 - Appear in the sidebar for navigation
 - Move to "Expired Drives" when their postage batch expires
 ### Postage Stamps
 **Postage Stamps** (or batches) are blockchain-based payment mechanisms for Swarm storage:
 - Purchased with BZZ tokens (Swarm's native token)
 - Have a **batchID** (unique identifier)
 - Define **initial capacity** (storage space) and **desired lifetime** (time-to-live)
 - Must be **usable** (not expired, not diluted beyond capacity)
 - Can have optional labels for identification
 **Postage Batch Validation** is critical:
 - Before creating drives
 - Before uploading files
 - During admin drive initialization
 - Invalid or unusable batches cause operations to fail
 ### File Info
 **FileInfo** objects represent files in File Manager:
 - Stored as metadata on Swarm (not in local storage)
 - Contains: name, size, mime type, timestamps, drive association
 - Has a **topic** (unique identifier derived from path and parent)
 - Can be **trashed** (soft delete) or **forgotten** (hard delete)
 - Supports versioning via **history** (Swarm feed entries)
 ### Erasure Coding
 **Erasure coding** provides data redundancy:
 - **OFF**: No redundancy (1x storage)
 - **MEDIUM**: Moderate redundancy (~2x storage)
 - **STRONG**: High redundancy (~3x storage)
 - **INSANE**: Very high redundancy (~4x storage)
 - **PARANOID**: Maximum redundancy (~5x storage)
 Higher levels cost more but protect against data loss if Swarm nodes go offline.
 ---
 ## Architecture Overview
 ### High-Level Flow
 The File Manager follows a layered architecture:
 1. **User Action** - User interacts with UI components
 2. **Component Layer** - FileBrowser, DriveItem, Modals handle UI logic
 3. **Context Layer** - FileManagerProvider, ViewProvider, SearchProvider manage state
 4. **Library Layer** - FileManagerBase from @solarpunkltd/file-manager-lib handles business logic
 5. **API Layer** - Bee API from @ethersphere/bee-js communicates with Swarm
 6. **Network Layer** - Swarm network stores data
 ### State Management
 File Manager uses **React Context** for state management with three separate contexts:
 1. **FileManagerProvider** - Core FM state: drives, files, admin drive, current drive. Manages FM instance lifecycle and event listeners.
 2. **ViewProvider** - UI view preferences (grid/list) and current item being viewed (drive name or search results).
 3. **SearchProvider** - Search query and scope (all drives, selected drive), filter options (include active, include trashed).
 This separation ensures that updates in one context don't unnecessarily trigger re-renders in components that only depend on other contexts.
 ### Component Hierarchy
 The component structure follows a strict hierarchy:
 - **FileManagerPage** - Orchestrates initialization flow
 - **Providers** - Wrap entire tree (FileManager → View → Search)
 - **Header** - Top navigation
 - **AdminStatusBar** - Admin stamp status display
 - **Sidebar** - Drive list with create/destroy actions
 - **FileBrowser** - Main file browser with operations
 - **Modals** - Various modals for different operations
 ---
 ## Module Structure
 ### Directory Organization
 The File Manager module is organized into logical sections:
 **Components Directory** - All React UI components, each in its own folder with associated styles and tests. Major components include FileBrowser (main interface), Sidebar (drive navigation), various modals for operations, and reusable elements like buttons and dropdowns.
 **Hooks Directory** - Custom React hooks for specific functionality. Key hooks include useTransfers (upload/download management), useFileFiltering (search and filtering), useBulkActions (bulk operations), and useSorting (column sorting).
 **Utils Directory** - Pure utility functions. Includes Bee API wrappers for stamp validation and drive operations, common helpers for formatting, download logic, and UI utilities.
 **Constants Directory** - Configuration constants for erasure code levels, postage batch desired lifetimes, tooltips, and transfer statuses.
 ---
 ## Getting Started
 ### Prerequisites
 1. **Bee Node**: Running Bee node (dev mode or mainnet). Can be local or remote connection via Settings.
 2. **Wallet Balance**: BZZ tokens to purchase postage batches, and xDAI for gas fees on blockchain transactions.
 3. **CORS Configuration**: Bee node must allow CORS from the dashboard origin.
 ### Initial Setup Flow
 **First Launch - Private Key Generation**
 When a user first visits File Manager, they must provide or generate a private key. This key is stored in browser local storage and is critical - loss of the key means permanent data loss with no recovery option.
 **One-Time Admin Drive Creation**
 After the private key is set, the system checks for an admin drive. If none exists, the InitialModal appears automatically. The user selects initial capacity and desired lifetime, then purchases a postage batch with BZZ tokens. The system creates the admin drive which stores all user drive metadata.
 **Creating User Drives**
 Once the admin drive exists, users can create user drives from the sidebar. They enter a drive name (max 40 characters), select initial capacity, desired lifetime, and security level (erasure coding). The system displays the BZZ cost and creates the drive upon confirmation.
 **Uploading Files**
 Users select a drive from the sidebar, then drag-and-drop files or click "Upload File(s)". They choose an active postage batch, and the system monitors progress with ETA calculations. Files are uploaded with automatic conflict resolution if names already exist.
 ---
 ## State Management
 ### FileManager Provider
 The FileManager Provider is the core state management solution. It manages:
 **Core State**: The FileManagerBase instance, all files across drives, user drives with valid postage batches, expired drives, admin drive, currently selected drive, and currently selected postage batch.
 **Error States**: Initialization errors, error modal visibility, and reset requirements when admin postage batch is invalid.
 **Synchronization**: Real-time updates through event listeners that respond to drive and file changes from the FileManagerBase library.
 ### Initialization Sequence
 The provider handles a complex initialization:
 1. **Private Key Check** - Retrieves key from local storage. If missing, initialization halts until user provides one.
 2. **Bee Instance Creation** - Creates Bee client with the private key as signer, then creates FileManagerBase instance.
 3. **Event Listener Registration** - Registers handlers for all file manager events (drive created, file uploaded, file trashed, etc.).
 4. **Admin Postage Batch Validation** - If admin postage batch exists, validates it's still usable. Invalid batches trigger reset flow.
 5. **State Synchronization** - Categorizes drives into admin, user, and expired based on postage batch validity. Populates file list.
 ### Drive Categorization
 The system continuously categorizes drives based on postage batch validity:
 **Admin Drive** - Must have valid postage batch. If invalid, entire FM enters reset state.
 **User Drives** - Drives with valid, usable postage batches appear in main drive list for normal operations.
 **Expired Drives** - Drives whose postage batches expired but data still exists on Swarm. Appear in collapsed section, cannot be modified but can be viewed.
 ### State Synchronization Methods
 **Sync Files** - Updates the files array when files are uploaded, trashed, restored, or forgotten. Can update entire list or individual files incrementally.
 **Sync Drives** - Updates drive arrays (user, expired, admin) when drives are created, upgraded, or destroyed. Fetches current postage batch validity and recategorizes.
 **Resync** - Full state refresh that re-initializes FM instance and restores previous selections if still valid. Used after major operations or manual refresh.
 **Refresh Postage Batch** - Updates a specific postage batch's information without full resync. Used after uploads to update capacity.
 ### Event Flow
 When a user performs an operation like uploading a file:
 1. Component calls FM method
 2. FileManagerBase library executes operation
 3. Library emits event when complete
 4. Provider's event listener catches it
 5. Provider updates React state
 6. UI automatically re-renders with new data
 This event-driven architecture keeps UI and Swarm state perfectly synchronized.
 ---
 ## Core Features
 ### Upload Management
 The upload system handles complex scenarios:
 **Conflict Detection** - Before upload, checks if file name already exists in target drive. Offers three resolution options: Cancel (skip file), Keep Both (rename with suffix like "file (1).txt"), or Replace (overwrite with new version).
 **Queue Processing** - Uploads are queued and processed with maximum 10 concurrent uploads. This prevents overwhelming the network while maintaining good throughput.
 **Progress Tracking** - Each upload shows percentage complete, data transferred, elapsed time, and ETA. ETA uses smoothing algorithm to prevent wild fluctuations from network speed variations.
 **Postage Batch Validation** - Before each upload, validates the selected postage batch is still usable. Verifies sufficient capacity remains for the file size considering erasure coding overhead.
 **Cancellation** - Users can cancel in-progress uploads. The system uses abort controllers to cleanly terminate HTTP requests and update transfer status.
 ### Download Management
 Downloads execute in the background using browser's native download API:
 **Progress Tracking** - Similar to uploads, shows percentage, speed, and ETA for each download.
 **Bulk Downloads** - Users can select multiple files and download all at once. Each download tracks independently.
 **Background Execution** - Downloads continue even if user navigates away from File Manager (within same browser tab).
 ### File Filtering
 The filtering system supports multiple criteria:
 **Search Query** - Case-insensitive substring matching on file names.
 **Drive Scope** - Filter to selected drive only, or search across all drives.
 **Trash Status** - Include active files only, trashed files only, or both.
 **State Preservation** - When entering search mode, current filter settings are saved. Clearing search restores previous settings automatically.
 ### Sorting
 Users can sort file lists by multiple columns:
 **Sort Keys** - Name (alphabetical), Size (bytes), Timestamp (upload date), Drive (name, when searching all drives).
 **Sort Direction** - Ascending or descending. Clicking same column header toggles direction.
 **Sort Reset** - Clear sorting returns to natural order (order from Swarm).
 ### Bulk Operations
 Select multiple files and perform batch actions:
 **Bulk Trash** - Move multiple files to trash (soft delete). Can be restored later.
 **Bulk Restore** - Restore multiple trashed files to active status.
 **Bulk Forget** - Permanently delete files (irreversible). Requires confirmation.
 **Bulk Download** - Download multiple files simultaneously with individual progress tracking.
 ### Version History
 Files support full version history:
 **Version Tracking** - Each file upload creates new version, previous versions retained.
 **View History** - Modal shows all versions with timestamps and sizes.
 **Restore Version** - Roll back to any previous version, which becomes the new current version.
 **Storage Impact** - Each version consumes postage batch capacity, old versions can be forgotten but space continues to be occupied.
 ### Drag and Drop
 Full drag-and-drop support for file uploads:
 **Visual Feedback** - Overlay appears when dragging files over browser area.
 **Drag Counter** - Tracks nested drag events to prevent flickering on complex layouts.
 **Drop Handling** - Processes dropped files through same upload pipeline as manual selection.
 ---
 ## Operation Flows
 ### Initial Setup
 **User Opens /file-manager**
 - System checks for private key in local storage
 - If no key: Shows PrivateKeyModal for user to enter or generate key
 - If has key: Initializes FileManager
 **FileManager Initialization**
 - Creates Bee instance with user's private key
 - Creates FileManagerBase instance
 - Registers event listeners for all FM events
 - Reads admin state from Swarm
 **Admin Drive Validation**
 - If admin postage batch exists and valid: Loads drives and files, shows FileBrowser
 - If admin postage batch exists but invalid: Sets reset flag, shows InitialModal in reset mode
 - If no admin postage batch (first time): Shows InitialModal for first-time setup
 **Creating Admin Drive**
 - User selects desired lifetime and security level (erasure coding)
 - System calculates cost in BZZ tokens
 - User confirms and purchases postage batch (blockchain transaction)
 - System creates admin drive with purchased postage batch
 - Success: Shows Sidebar and FileBrowser
 ### Creating User Drive
 **User Initiates Creation**
 - Clicks "Create New Drive" button in Sidebar
 - CreateDriveModal appears
 **Drive Configuration**
 - User enters drive name (validated: max 40 chars)
 - Selects initial capacity from dropdown
 - Selects desired lifetime from dropdown
 - Chooses security level (erasure coding: OFF, MEDIUM, STRONG, INSANE, PARANOID)
 **Cost Calculation**
 - System fetches current BZZ cost based on capacity, desired lifetime, and redundancy level
 - Displays total cost to user
 - Validates user has sufficient BZZ balance
 - If insufficient: Shows error, disables Create button
 - If sufficient: Enables Create button
 **Drive Creation**
 - User clicks Create
 - System shows creation progress indicator
 - Purchases new postage batch (blockchain transaction, waits for confirmation)
 - Creates drive metadata on Swarm
 - FM emits DRIVE_CREATED event
 - Provider categorizes drive (has usable postage batch)
 - Drive appears in Sidebar
 - Success: User can now select and use the drive
 ### Uploading Files
 **File Selection**
 - User drags files onto browser OR clicks "Upload file(s)" button
 - System receives file list
 **Conflict Resolution (per file)**
 - Checks if file.name already exists in current drive
 - If no conflict: Proceeds with original name
 - If conflict: Shows UploadConflictModal with options:
  - Cancel: Skip this file
  - Keep Both: Rename to unique name (e.g., "file (1).txt")
  - Replace: Overwrite existing file, creating new version
 **Queue Processing**
 - All files added to upload queue with resolved names
 - Queue processes maximum 10 files concurrently
 - For each file in batch:
  - Validates postage batch still exists and is usable
  - Verifies sufficient drive space remains
  - Creates transfer tracking item (shows in UI)
  - Executes upload with progress callbacks to Swarm
  - Updates progress (percentage, ETA, elapsed time)
  - On completion: Marks transfer Done, refreshes postage batch capacity 
  - On error: Marks transfer Error, shows error message
 - Next batch starts when previous completes
 **Event Synchronization**
 - FM library emits FILE_UPLOADED event
 - Provider's sync method adds/updates file in state
 - UI automatically updates to show new file
 ### Destroying Drive
 **User Initiates Destruction**
 - Clicks menu button on Drive Item in Sidebar
 - Selects "Destroy Drive" from context menu
 - DestroyDriveModal appears with confirmation prompt
 **Confirmation**
 - User reads warning about permanent deletion
 - User clicks "Destroy" button
 **Destruction Process**
 - Modal closes
 - Progress overlay appears (spinner with "Destroying drive..." text)
 - Overlay is clickable to expand to full progress modal
 - System executes drive destruction:
  - Deletes drive metadata from Swarm
  - FM emits DRIVE_DESTROYED event
  - Provider removes drive from drives array
  - Provider removes all files belonging to destroyed drive
 - Progress overlay disappears
 - Drive no longer appears in Sidebar
 - If drive was selected: View switches to another drive or empty state
 ### Downloading Files
 **User Initiates Download**
 - User right-clicks file
 - Selects "Download" from menu
 **Download Tracking**
 - System creates download transfer item in UI
 - Transfer item shows: file name, size, progress percentage
 - Download panel appears at bottom of screen
 **Download Execution**
 - System retrieves file from Swarm using file's topic
 - Uses browser's native download API to save file
 - Progress callbacks update UI in real-time:
  - Bytes downloaded / total bytes (from Swarm chunks)
  - Download speed
  - Estimated time remaining (ETA with smoothing)
  - Elapsed time
 **Background Processing**
 - Downloads execute in background
 - User can continue browsing File Manager
 - Multiple downloads can run simultaneously
 - Each download tracks independently
 **Completion**
 - On success: Browser saves file to user's downloads folder
 - Transfer item marked as "Done"
 - User can dismiss completed downloads
 - On error: Shows error message, allows retry
 **Cancellation**
 - User clicks cancel button on transfer item
 - System aborts HTTP request using AbortController
 - Transfer item marked as "Cancelled"
 - Partial download discarded
 ### Search Operation
 **Entering Search**
 - User types in search box
 - SearchContext captures query
 - System saves current scope and filter settings
 - Sets inSearch flag to true
 **Filtering Execution**
 - useFileFiltering hook processes files array:
  - Filters by trash status (active/trashed based on checkboxes)
  - Filters by drive scope (selected drive vs all drives)
  - Filters by search query (case-insensitive substring match on name)
 - Returns filtered array
 **Sorting Application**
 - useSorting hook processes filtered array
 - Applies current sort key and direction
 - Returns sorted array
 **Display**
 - FileBrowserContent renders sorted list
 - If searching all drives: Shows drive name column
 - If no results: Shows "No files found" message
 **Exiting Search**
 - User clears search box (empty query)
 - System restores saved scope and filter settings
 - Sets inSearch flag to false
 - View returns to previous state
 ---
 ## Component Architecture
 ### Hierarchical Structure
 File Manager follows strict component hierarchy to manage complexity:
 **Page Level** - FileManagerPage orchestrates the entire module, handling initialization states and conditional rendering.
 **Provider Level** - Three nested contexts (FileManager → View → Search) wrap the component tree, each managing separate concerns.
 **Layout Level** - Header, AdminStatusBar, Sidebar, and FileBrowser form the main layout structure.
 **Feature Level** - Major features like FileBrowser contain sub-components for specific areas (TopBar, Header, Content, Modals, Overlays).
 **Primitive Level** - Reusable elements like buttons, dropdowns, tooltips, progress bars used throughout.
 ### Component Responsibilities
 Each component has a single, clear responsibility:
 **FileManagerPage** - Orchestrates initialization flow and conditional rendering based on FM state.
 **Sidebar** - Displays drive list, handles navigation, shows drive creation button.
 **DriveItem** - Renders individual drive with capacity info, context menu, progress indicators.
 **FileBrowser** - Main file browser interface, coordinates all file operations.
 **FileBrowserModals** - Renders all modals (extracted for complexity management).
 **FileBrowserOverlays** - Renders progress overlays (extracted for complexity management).
 ---
 ## Known Limitations
 ### Admin Drive Expiration
 **Status**: Not fully handled (TODO in code).
 **Current Behavior**: When admin drive postage batch expires, entire FM enters invalid state. User must reset and create new admin drive. Previous user drives remain accessible if their postage batches are valid.
 **Desired Behavior**: System detects admin postage batch expiration before it happens, shows warning with "Extend Batch" button, seamlessly extends admin postage batch without requiring reset.
 ### Drive Name Length
 **Limitation**: Drive names limited to 40 characters maximum.
 **Reason**: Swarm feed entry size constraints limit metadata size.
 **Workaround**: Use shorter, descriptive names. Consider abbreviations or codes for long project names.
 ### Postage Batch Selection in CreateDriveModal
 **Status**: TODO comment in code.
 **Current Behavior**: CreateDriveModal always purchases new postage batch for each drive.
 **Desired Behavior**: Dropdown to select from existing usable postage batches (like InitialModal has), allowing users to reuse batches with remaining capacity.
 **Impact**: Users must purchase separate postage batch for each drive, even if existing batches have sufficient capacity for multiple drives.
 ### Postage Batch Capacity Calculation
 **Issue**: Capacity calculation depends on erasure coding level.
 **Problem**: Frontend calculates approximate capacity based on redundancy multiplier. Actual capacity depends on how Bee node distributes chunks across Swarm network.
 **Current**: Approximate calculation usually close enough for practical use.
 **Ideal**: Bee node provides exact remaining capacity calculation accounting for actual chunk distribution and erasure coding overhead.
 ### Ultra-Light Nodes
 **Limitation**: Ultra-light Bee nodes cannot create drives or purchase postage batches.
 **Requirement**: Users must upgrade to light node to use File Manager.
 **Error Message**: Displayed in InitialModal and CreateDriveModal when ultra-light node detected.
 **Documentation**: https://docs.ethswarm.org/docs/desktop/configuration/#upgrading-from-an-ultra-light-to-a-light-node
 ---
 *This documentation provides a comprehensive functional overview of the File Manager module. For implementation details, refer to the source code in `src/modules/filemanager/` and `src/providers/FileManager.tsx`.*
@@ -1,6 +1,6 @@
 {
  "name": "@ethersphere/bee-dashboard",
-  "version": "0.23.0",
+  "version": "0.33.5",
  "description": "An app which helps users to setup their Bee node and do actions like cash out cheques",
  "keywords": [
    "bee",
@@ -25,49 +25,55 @@
    "type": "git",
    "url": "https://github.com/ethersphere/bee-dashboard.git"
  },
  "overrides": {
    "@fairdatasociety/fdp-storage": {
      "@ethersphere/bee-js": "^10.2.0"
    }
  },
  "dependencies": {
-    "@ethersphere/bee-js": "^5.2.0",
+    "@ethersphere/bee-js": "^10.3.0",
-    "@ethersphere/manifest-js": "1.2.1",
+    "@ethersproject/keccak256": "^5.7.0",
-    "@ethersphere/swarm-cid": "^0.1.0",
+    "@ethersproject/strings": "^5.7.0",
    "@fairdatasociety/fdp-storage": "^0.19.0",
    "@formbricks/js": "^4.2.1",
    "@material-ui/core": "4.12.3",
    "@material-ui/icons": "4.11.2",
    "@material-ui/lab": "4.0.0-alpha.57",
-    "assert": "^2.0.0",
+    "@solarpunkltd/file-manager-lib": "^1.0.4",
-    "axios": "0.24.0",
+    "axios": "^0.28.1",
-    "bignumber.js": "9.0.1",
+    "bignumber.js": "^9.1.2",
    "buffer": "^6.0.3",
    "crypto": "npm:crypto-browserify",
    "crypto-browserify": "^3.12.0",
    "dotted-map": "^2.2.3",
-    "ethers": "^5.6.4",
+    "ethers": "^5.7.2",
    "file-saver": "^2.0.5",
    "formik": "2.2.9",
    "formik-material-ui": "3.0.1",
-    "jszip": "^3.7.1",
+    "jszip": "^3.10.1",
    "material-ui-dropzone": "3.5.0",
-    "notistack": "1.0.10",
+    "notistack": "^3.0.1",
    "opener": "1.5.2",
    "qrcode.react": "1.0.1",
    "react": ">= 17.0.2",
-    "react-copy-to-clipboard": "5.0.4",
+    "react-copy-to-clipboard": "^5.1.0",
    "react-dom": ">= 17.0.2",
    "react-identicons": "1.2.5",
    "react-router": "6.2.1",
    "react-router-dom": "6.2.1",
    "react-syntax-highlighter": "15.4.4",
    "remixicon-react": "^1.0.0",
    "semver": "7.3.5",
    "serve-handler": "6.1.3",
    "stream": "npm:stream-browserify",
    "stream-browserify": "^3.0.0"
  },
  "devDependencies": {
-    "@babel/core": "7.16.0",
+    "@babel/core": "^7.24.0",
-    "@babel/plugin-proposal-class-properties": "7.16.0",
+    "@babel/plugin-proposal-class-properties": "^7.18.6",
-    "@babel/plugin-transform-runtime": "7.16.4",
+    "@babel/plugin-transform-runtime": "^7.24.0",
-    "@babel/preset-env": "7.16.4",
+    "@babel/preset-env": "^7.24.0",
-    "@babel/preset-react": "7.16.7",
+    "@babel/preset-react": "^7.23.3",
-    "@babel/preset-typescript": "7.16.0",
+    "@babel/preset-typescript": "^7.23.3",
    "@commitlint/config-conventional": "14.1.0",
    "@testing-library/jest-dom": "5.16.4",
    "@testing-library/react": "12.1.2",
@@ -78,16 +84,15 @@
    "@types/jest": "27.0.2",
    "@types/qrcode.react": "1.0.2",
    "@types/react": "17.0.34",
-    "@types/react-copy-to-clipboard": "5.0.2",
+    "@types/react-copy-to-clipboard": "^5.0.2",
    "@types/react-dom": "17.0.11",
    "@types/react-router": "5.1.18",
    "@types/react-router-dom": "5.3.2",
    "@types/react-syntax-highlighter": "13.5.2",
    "@types/semver": "7.3.9",
    "@typescript-eslint/eslint-plugin": "5.28.0",
    "@typescript-eslint/parser": "5.28.0",
-    "babel-eslint": "10.1.0",
+    "babel-eslint": "^10.1.0",
-    "babel-loader": "8.1.0",
+    "babel-loader": "^8.1.0",
    "babel-plugin-syntax-dynamic-import": "6.18.0",
    "babel-plugin-tsconfig-paths": "1.0.2",
    "base64-inline-loader": "^2.0.1",
@@ -112,10 +117,11 @@
    "puppeteer": "^15.4.0",
    "react-scripts": "^5.0.1",
    "rimraf": "^3.0.2",
    "sass": "^1.91.0",
    "ts-node": "^10.8.1",
    "typescript": "4.8.3",
    "web-vitals": "2.1.2",
-    "webpack": "^5.73.0",
+    "webpack": "^5.93.0",
    "webpack-cli": "^4.10.0"
  },
  "peerDependencies": {
@@ -137,7 +143,7 @@
    "lint:check": "eslint \"src/**/*.ts\" \"src/**/*.tsx\" && prettier --check \"src/**/*.ts\" \"src/**/*.tsx\"",
    "check:types": "tsc --project tsconfig.lib.json",
    "update-map-data": "node ./utils/update-map-data.js",
-    "bee": "bee-factory start"
+    "bee": "npx bee-factory start"
  },
  "files": [
    "lib",
@@ -159,6 +165,6 @@
  "engines": {
    "node": ">=14.0.0",
    "npm": ">=6.9.0",
-    "bee": "1.12.0-88c1d236"
+    "bee": "1.16.1-8e269c8"
  }
 }
@@ -26,3 +26,7 @@ button {
  font-family: 'iAWriterMonoV' !important;
  color: #dd7700;
 }
 .MuiContainer-maxWidthLg > .fm {
  padding: 0px !important;
 }
@@ -8,6 +8,7 @@ import Dashboard from './layout/Dashboard'
 import { Provider as BeeProvider } from './providers/Bee'
 import { Provider as FeedsProvider } from './providers/Feeds'
 import { Provider as FileProvider } from './providers/File'
 import { Provider as FileManagerProvider } from './providers/FileManager'
 import { Provider as PlatformProvider } from './providers/Platform'
 import { Provider as SettingsProvider } from './providers/Settings'
 import { Provider as StampsProvider } from './providers/Stamps'
@@ -18,7 +19,6 @@ import { theme } from './theme'
 interface Props {
  beeApiUrl?: string
  beeDebugApiUrl?: string
  defaultRpcUrl?: string
  lockedApiSettings?: boolean
  isDesktop?: boolean
@@ -28,7 +28,6 @@ interface Props {
 const App = ({
  beeApiUrl,
  beeDebugApiUrl,
  defaultRpcUrl,
  lockedApiSettings,
  isDesktop,
@@ -40,31 +39,32 @@ const App = ({
      <ThemeProvider theme={theme}>
        <SettingsProvider
          beeApiUrl={beeApiUrl}
          beeDebugApiUrl={beeDebugApiUrl}
          defaultRpcUrl={defaultRpcUrl}
          lockedApiSettings={lockedApiSettings}
          isDesktop={isDesktop}
          desktopUrl={desktopUrl}
        >
          <TopUpProvider>
-            <BeeProvider isDesktop={isDesktop}>
+            <BeeProvider>
              <BalanceProvider>
                <StampsProvider>
                  <FileProvider>
-                    <FeedsProvider>
+                    <FileManagerProvider>
-                      <PlatformProvider>
+                      <FeedsProvider>
-                        <SnackbarProvider preventDuplicate anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }}>
+                        <PlatformProvider>
-                          <Router>
+                          <SnackbarProvider preventDuplicate anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }}>
-                            <>
+                            <Router>
-                              <CssBaseline />
+                              <>
-                              <Dashboard errorReporting={errorReporting}>
+                                <CssBaseline />
-                                <BaseRouter />
+                                <Dashboard errorReporting={errorReporting}>
-                              </Dashboard>
+                                  <BaseRouter />
-                            </>
+                                </Dashboard>
-                          </Router>
+                              </>
-                        </SnackbarProvider>
+                            </Router>
-                      </PlatformProvider>
+                          </SnackbarProvider>
-                    </FeedsProvider>
+                        </PlatformProvider>
                      </FeedsProvider>
                    </FileManagerProvider>
                  </FileProvider>
                </StampsProvider>
              </BalanceProvider>
@@ -28,6 +28,7 @@ const useStyles = (backgroundColor: string) =>
        flexDirection: 'column',
        alignItems: 'center',
        textAlign: 'center',
        height: '130px',
      },
      iconWrapper: {
        display: 'flex',
@@ -9,7 +9,6 @@ import { useSnackbar } from 'notistack'
 import { ReactElement, useContext, useState } from 'react'
 import Zap from 'remixicon-react/FlashlightLineIcon'
 import { Context as SettingsContext } from '../providers/Settings'
 import EthereumAddress from './EthereumAddress'
 interface Props {
  peerId: string
@@ -19,8 +18,8 @@ interface Props {
 export default function CheckoutModal({ peerId, uncashedAmount }: Props): ReactElement {
  const [open, setOpen] = useState<boolean>(false)
  const [loadingCashout, setLoadingCashout] = useState<boolean>(false)
  const { beeApi } = useContext(SettingsContext)
  const { enqueueSnackbar } = useSnackbar()
  const { beeDebugApi } = useContext(SettingsContext)
  const handleClickOpen = () => {
    setOpen(true)
@@ -31,21 +30,15 @@ export default function CheckoutModal({ peerId, uncashedAmount }: Props): ReactE
  }
  const handleCashout = () => {
-    if (!beeDebugApi) return
+    if (peerId && beeApi) {
    if (peerId) {
      setLoadingCashout(true)
-      beeDebugApi
+      beeApi
        .cashoutLastCheque(peerId)
        .then(res => {
          setOpen(false)
-          enqueueSnackbar(
+          enqueueSnackbar(<span>Successfully cashed out cheque. Transaction {res.toHex()}</span>, {
-            <span>
+            variant: 'success',
-              Successfully cashed out cheque. Transaction
+          })
              <EthereumAddress hideBlockie transaction address={res} />
            </span>,
            { variant: 'success' },
          )
        })
        .catch((e: Error) => {
          console.error(e) // eslint-disable-line
@@ -0,0 +1,25 @@
 import { ChainState } from '@ethersphere/bee-js'
 import { useContext, useEffect, useState } from 'react'
 import { Context } from '../providers/Settings'
 import ExpandableListItem from './ExpandableListItem'
 export function ChainSync() {
  const { beeApi } = useContext(Context)
  const [chainState, setChainState] = useState<ChainState | null>(null)
  useEffect(() => {
    const interval = setInterval(() => {
      if (!beeApi) {
        return
      }
      beeApi.getChainState().then(setChainState).catch(console.error) // eslint-disable-line
    }, 3_000)
    return () => clearInterval(interval)
  })
  return (
    <ExpandableListItem label="Chain state" value={chainState ? `${chainState.block} / ${chainState.chainTip}` : '-'} />
  )
 }
@@ -1,12 +1,14 @@
 import { Typography } from '@material-ui/core/'
 import { EthAddress } from '@ethersphere/bee-js'
 import { ReactElement } from 'react'
 import Identicon from 'react-identicons'
 import ClipboardCopy from './ClipboardCopy'
 import QRCodeModal from './QRCodeModal'
 import { BLOCKCHAIN_EXPLORER_URL } from '../constants'
 import ClipboardCopy from './ClipboardCopy'
 import { Flex } from './Flex'
 import QRCodeModal from './QRCodeModal'
 interface Props {
-  address: string | undefined
+  address: EthAddress | undefined
  hideBlockie?: boolean
  transaction?: boolean
  truncate?: boolean
@@ -16,10 +18,10 @@ export default function EthereumAddress(props: Props): ReactElement {
  return (
    <Typography component="div" variant="subtitle1">
      {props.address ? (
-        <div style={{ display: 'flex' }}>
+        <Flex>
          {props.hideBlockie ? null : (
            <div style={{ paddingTop: '5px', marginRight: '10px' }}>
-              <Identicon size={20} string={props.address} />
+              <Identicon size={20} string={props.address.toChecksum()} />
            </div>
          )}
          <div>
@@ -43,9 +45,9 @@ export default function EthereumAddress(props: Props): ReactElement {
              {props.address}
            </a>
          </div>
-          <QRCodeModal value={props.address} label={'Ethereum Address'} />
+          <QRCodeModal value={props.address.toChecksum()} label={'Ethereum Address'} />
-          <ClipboardCopy value={props.address} />
+          <ClipboardCopy value={props.address.toChecksum()} />
-        </div>
+        </Flex>
      ) : (
        '-'
      )}
@@ -24,6 +24,9 @@ const useStyles = makeStyles((theme: Theme) =>
    },
    contentLevel12: {
      marginTop: theme.spacing(0.25),
      '& > li:last-of-type': {
        marginBottom: theme.spacing(2),
      },
    },
    infoText: {
      color: '#c9c9c9',
@@ -1,7 +1,8 @@
 import { ReactElement, ReactNode, useState } from 'react'
 import { makeStyles, Theme, createStyles } from '@material-ui/core/styles'
 import { Collapse, ListItem, ListItemText, Typography } from '@material-ui/core'
 import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'
 import { ExpandLess, ExpandMore } from '@material-ui/icons'
 import { ReactElement, ReactNode, useState } from 'react'
 import { Flex } from './Flex'
 const useStyles = makeStyles((theme: Theme) =>
  createStyles({
@@ -65,14 +66,14 @@ export default function ExpandableList({ children, label, level, defaultOpen, in
    <div className={`${classes.root} ${rootLevelClass}`}>
      <ListItem button onClick={handleClick} className={classes.header}>
        <ListItemText primary={<Typography variant={typographyVariant}>{label}</Typography>} />
-        <div style={{ display: 'flex' }}>
+        <Flex>
          {!open && (
            <Typography variant="body2" className={classes.infoText}>
              {info}
            </Typography>
          )}
          {open ? <ExpandLess /> : <ExpandMore />}
-        </div>
+        </Flex>
      </ListItem>
      <Collapse in={open} timeout="auto" unmountOnExit>
        <div className={contentLevelClass}>{children}</div>
@@ -1,8 +1,8 @@
-import { ReactElement, ReactNode } from 'react'
+import { Grid, IconButton, Tooltip, Typography } from '@material-ui/core'
 import { makeStyles, Theme, createStyles } from '@material-ui/core/styles'
 import { Typography, Grid, IconButton, Tooltip } from '@material-ui/core'
 import Info from 'remixicon-react/InformationLineIcon'
 import ListItem from '@material-ui/core/ListItem'
 import { Theme, createStyles, makeStyles } from '@material-ui/core/styles'
 import { ReactElement, ReactNode } from 'react'
 import Info from 'remixicon-react/InformationLineIcon'
 const useStyles = makeStyles((theme: Theme) =>
  createStyles({
@@ -1,15 +1,15 @@
-import { Grid, IconButton, InputBase, ListItem, Typography } from '@material-ui/core'
+import { Box, Grid, IconButton, InputBase, ListItem, Typography } from '@material-ui/core'
 import Collapse from '@material-ui/core/Collapse'
 import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'
 import { ChangeEvent, ReactElement, useState } from 'react'
 import type { RemixiconReactIconProps } from 'remixicon-react'
 import Check from 'remixicon-react/CheckLineIcon'
 import X from 'remixicon-react/CloseLineIcon'
 import Edit from 'remixicon-react/PencilLineIcon'
 import Minus from 'remixicon-react/SubtractLineIcon'
 import X from 'remixicon-react/CloseLineIcon'
 import ExpandableListItemActions from './ExpandableListItemActions'
 import ExpandableListItemNote from './ExpandableListItemNote'
 import { SwarmButton } from './SwarmButton'
 import type { RemixiconReactIconProps } from 'remixicon-react'
 const useStyles = makeStyles((theme: Theme) =>
  createStyles({
@@ -89,9 +89,9 @@ export default function ExpandableListItemKey({
      e.target.value = mapperFn(e.target.value)
    }
-    setInputValue(e.target.value)
+    setInputValue(e.target.value.trim())
-    if (onChange) onChange(e.target.value)
+    if (onChange) onChange(e.target.value.trim())
  }
  return (
@@ -108,12 +108,8 @@ export default function ExpandableListItemKey({
              <div>
                {!open && value}
                {!expandedOnly && !locked && (
-                  <IconButton size="small" className={classes.copyValue}>
+                  <IconButton size="small" className={classes.copyValue} onClick={toggleOpen}>
-                    {open ? (
+                    {open ? <Minus strokeWidth={1} /> : <Edit strokeWidth={1} />}
                      <Minus onClick={toggleOpen} strokeWidth={1} />
                    ) : (
                      <Edit onClick={toggleOpen} strokeWidth={1} />
                    )}
                  </IconButton>
                )}
              </div>
@@ -134,31 +130,33 @@ export default function ExpandableListItemKey({
      </ListItem>
      <Collapse in={open} timeout="auto" unmountOnExit>
        {helperText && <ExpandableListItemNote>{helperText}</ExpandableListItemNote>}
-        <ExpandableListItemActions>
+        <Box mt={2}>
-          <SwarmButton
+          <ExpandableListItemActions>
-            disabled={
+            <SwarmButton
-              loading ||
+              disabled={
-              inputValue === value ||
+                loading ||
-              Boolean(confirmLabelDisabled) || // Disable if external validation is provided
+                inputValue === value ||
-              (inputValue === '' && value === undefined) // Disable if no initial value was not provided and the field is empty. The undefined check is improtant so that it is possible to submit with empty input in other cases
+                Boolean(confirmLabelDisabled) || // Disable if external validation is provided
-            }
+                (inputValue === '' && value === undefined) // Disable if no initial value was not provided and the field is empty. The undefined check is improtant so that it is possible to submit with empty input in other cases
-            loading={loading}
+              }
-            iconType={confirmIcon ?? Check}
+              loading={loading}
-            onClick={() => {
+              iconType={confirmIcon ?? Check}
-              if (onConfirm) onConfirm(inputValue)
+              onClick={() => {
-            }}
+                if (onConfirm) onConfirm(inputValue)
-          >
+              }}
-            {confirmLabel || 'Save'}
+            >
-          </SwarmButton>
+              {confirmLabel || 'Save'}
-          <SwarmButton
+            </SwarmButton>
-            disabled={loading || inputValue === value || inputValue === ''}
+            <SwarmButton
-            iconType={X}
+              disabled={loading || inputValue === value || inputValue === ''}
-            onClick={() => setInputValue(value || '')}
+              iconType={X}
-            cancel
+              onClick={() => setInputValue(value || '')}
-          >
+              cancel
-            Cancel
+            >
-          </SwarmButton>
+              Cancel
-        </ExpandableListItemActions>
+            </SwarmButton>
          </ExpandableListItemActions>
        </Box>
      </Collapse>
    </>
  )
@@ -77,20 +77,18 @@ export default function ExpandableListItemKey({ label, value, expanded }: Props)
        <Grid container direction="row" justifyContent="space-between" alignItems="center">
          {label && <Typography variant="body1">{label}</Typography>}
          <Typography variant="body2">
-            <div>
+            {!open && (
-              {!open && (
+              <span className={classes.copyValue}>
-                <span className={classes.copyValue}>
+                <Tooltip title={copied ? 'Copied' : 'Copy'} placement="top" arrow onClose={tooltipCloseHandler}>
-                  <Tooltip title={copied ? 'Copied' : 'Copy'} placement="top" arrow onClose={tooltipCloseHandler}>
+                  <CopyToClipboard text={value}>
-                    <CopyToClipboard text={value}>
+                    <span onClick={tooltipClickHandler}>{value ? spanText : ''}</span>
-                      <span onClick={tooltipClickHandler}>{value ? spanText : ''}</span>
+                  </CopyToClipboard>
-                    </CopyToClipboard>
+                </Tooltip>
-                  </Tooltip>
+              </span>
-                </span>
+            )}
-              )}
+            <IconButton size="small" className={classes.copyValue} onClick={toggleOpen}>
-              <IconButton size="small" className={classes.copyValue}>
+              {open ? <Minus strokeWidth={1} /> : <Eye strokeWidth={1} />}
-                {open ? <Minus onClick={toggleOpen} strokeWidth={1} /> : <Eye onClick={toggleOpen} strokeWidth={1} />}
+            </IconButton>
              </IconButton>
            </div>
          </Typography>
        </Grid>
        <Collapse in={open} timeout="auto" unmountOnExit>
@@ -82,22 +82,20 @@ export default function ExpandableListItemLink({
        <Grid container direction="row" justifyContent="space-between" alignItems="center">
          {label && <Typography variant="body1">{label}</Typography>}
          <Typography variant="body2">
-            <div>
+            {allowClipboard && (
-              {allowClipboard && (
+              <span className={classes.copyValue}>
-                <span className={classes.copyValue}>
+                <Tooltip title={copied ? 'Copied' : 'Copy'} placement="top" arrow onClose={tooltipCloseHandler}>
-                  <Tooltip title={copied ? 'Copied' : 'Copy'} placement="top" arrow onClose={tooltipCloseHandler}>
+                  <CopyToClipboard text={value}>
-                    <CopyToClipboard text={value}>
+                    <span onClick={tooltipClickHandler}>{displayValue}</span>
-                      <span onClick={tooltipClickHandler}>{displayValue}</span>
+                  </CopyToClipboard>
-                    </CopyToClipboard>
+                </Tooltip>
-                  </Tooltip>
+              </span>
-                </span>
+            )}
-              )}
+            {!allowClipboard && <span onClick={onNavigation}>{displayValue}</span>}
-              {!allowClipboard && <span onClick={onNavigation}>{displayValue}</span>}
+            <IconButton size="small" className={classes.openLinkIcon} onClick={onNavigation}>
-              <IconButton size="small" className={classes.openLinkIcon}>
+              {navigationType === 'NEW_WINDOW' && <OpenInNewSharp strokeWidth={1} />}
-                {navigationType === 'NEW_WINDOW' && <OpenInNewSharp onClick={onNavigation} strokeWidth={1} />}
+              {navigationType === 'HISTORY_PUSH' && <ArrowForward strokeWidth={1} />}
-                {navigationType === 'HISTORY_PUSH' && <ArrowForward onClick={onNavigation} strokeWidth={1} />}
+            </IconButton>
              </IconButton>
            </div>
          </Typography>
        </Grid>
      </Grid>
@@ -0,0 +1,28 @@
 import { createStyles, makeStyles } from '@material-ui/core'
 import { ReactElement } from 'react'
 const useStyles = makeStyles(() =>
  createStyles({
    audio: {
      width: '100%',
      maxWidth: '250px',
    },
  }),
 )
 interface AudioProps {
  src: string | undefined
  maxHeight?: string
  maxWidth?: string
 }
 export function FitAudio(props: AudioProps): ReactElement {
  const classes = useStyles()
  const inlineStyles: Record<string, string> = {}
  props.maxHeight && (inlineStyles.maxHeight = props.maxHeight)
  props.maxWidth && (inlineStyles.maxWidth = props.maxWidth)
  return <audio className={classes.audio} src={props.src} style={inlineStyles} controls />
 }
@@ -0,0 +1,29 @@
 import { createStyles, makeStyles } from '@material-ui/core'
 import { ReactElement } from 'react'
 const useStyles = makeStyles(() =>
  createStyles({
    video: {
      width: '100%',
      height: '100%',
      objectFit: 'cover',
    },
  }),
 )
 interface VideoProps {
  src: string | undefined
  maxHeight?: string
  maxWidth?: string
 }
 export function FitVideo(props: VideoProps): ReactElement {
  const classes = useStyles()
  const inlineStyles: Record<string, string> = {}
  props.maxHeight && (inlineStyles.maxHeight = props.maxHeight)
  props.maxWidth && (inlineStyles.maxWidth = props.maxWidth)
  return <video className={classes.video} src={props.src} style={inlineStyles} controls />
 }
@@ -0,0 +1,9 @@
 import { ReactNode } from 'react'
 interface Props {
  children: ReactNode
 }
 export function Flex({ children }: Props) {
  return <div style={{ display: 'flex' }}>{children}</div>
 }
@@ -1,9 +1,9 @@
 import { ReactElement, CSSProperties, useContext, useState, useEffect } from 'react'
 import type { Peer } from '@ethersphere/bee-js'
 import DottedMap, { DottedMapWithoutCountriesLib } from 'dotted-map/without-countries'
 import { CSSProperties, ReactElement, useContext, useEffect, useState } from 'react'
 import mapData from '../assets/data/map-data.json'
 import nodesDb from '../assets/data/nodes-db.json'
 import { Context } from '../providers/Bee'
 import mapData from '../assets/data/map-data.json'
 interface Props {
  style?: CSSProperties
@@ -0,0 +1,22 @@
 import React, { ReactElement } from 'react'
 import LinearProgress, { LinearProgressProps } from '@material-ui/core/LinearProgress'
 import Typography from '@material-ui/core/Typography'
 import Box from '@material-ui/core/Box'
 interface Props {
  linearProgressProps?: LinearProgressProps
  value: number
 }
 export function LinearProgressWithLabel(props: Props): ReactElement {
  return (
    <Box display="flex" alignItems="center">
      <Box width="100%" mr={1}>
        <LinearProgress variant="determinate" {...props} />
      </Box>
      <Box minWidth={35}>
        <Typography variant="body2" color="textSecondary">{`${Math.round(props.value)}%`}</Typography>
      </Box>
    </Box>
  )
 }
@@ -1,22 +1,24 @@
-import { Divider, Drawer, Grid, Link as MUILink, List } from '@material-ui/core'
+import { Box, Divider, Drawer, Grid, List, Link as MUILink, Typography } from '@material-ui/core'
-import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'
+import { Theme, createStyles, makeStyles } from '@material-ui/core/styles'
 import { BeeModes } from '@ethersphere/bee-js'
 import { ReactElement, useContext } from 'react'
 import { Link } from 'react-router-dom'
 import FilesIcon from 'remixicon-react/ArrowUpDownLineIcon'
 import FileManagerIcon from 'remixicon-react/FolderOpenLineIcon'
 import DocsIcon from 'remixicon-react/BookOpenLineIcon'
 import ExternalLinkIcon from 'remixicon-react/ExternalLinkLineIcon'
 import GithubIcon from 'remixicon-react/GithubFillIcon'
 import HomeIcon from 'remixicon-react/Home3LineIcon'
 import SettingsIcon from 'remixicon-react/Settings2LineIcon'
 import AccountIcon from 'remixicon-react/Wallet3LineIcon'
 import { Context as BeeContext } from '../providers/Bee'
 import { Context as SettingsContext } from '../providers/Settings'
 import DashboardLogo from '../assets/dashboard-logo.svg'
 import DesktopLogo from '../assets/desktop-logo.svg'
 import { BEE_DOCS_HOST, GITHUB_BEE_DASHBOARD_URL } from '../constants'
 import { Context as BeeContext } from '../providers/Bee'
 import { Context as SettingsContext } from '../providers/Settings'
 import { ROUTES } from '../routes'
 import SideBarItem from './SideBarItem'
 import SideBarStatus from './SideBarStatus'
 import { BeeModes } from '@ethersphere/bee-js'
 import { BEE_DOCS_HOST } from '../constants'
 const drawerWidth = 300
@@ -81,6 +83,12 @@ export default function SideBar(): ReactElement {
      icon: FilesIcon,
      pathMatcherSubstring: '/files/',
    },
    {
      label: 'File Manager',
      path: ROUTES.FILEMANAGER,
      icon: FileManagerIcon,
      pathMatcherSubstring: '/filemanager/',
    },
    {
      label: 'Account',
      path: ROUTES.ACCOUNT_WALLET,
@@ -126,6 +134,22 @@ export default function SideBar(): ReactElement {
              />
            </MUILink>
          </List>
          <Divider className={classes.divider} />
          <List>
            <MUILink href={GITHUB_BEE_DASHBOARD_URL} target="_blank" className={classes.link}>
              <SideBarItem
                iconStart={<GithubIcon className={classes.icon} />}
                iconEnd={<ExternalLinkIcon className={classes.icon} color="#595959" />}
                label={<span>GitHub</span>}
              />
            </MUILink>
          </List>
          <Divider className={classes.divider} />
          <Box mt={4}>
            <Link to={ROUTES.TOP_UP_GIFT_CODE}>
              <Typography align="center">Redeem gift code</Typography>
            </Link>
          </Box>
        </Grid>
        <Grid>
          <List>
@@ -0,0 +1,88 @@
 import { Box } from '@material-ui/core'
 import Button from '@material-ui/core/Button'
 import Dialog from '@material-ui/core/Dialog'
 import DialogActions from '@material-ui/core/DialogActions'
 import DialogContent from '@material-ui/core/DialogContent'
 import DialogTitle from '@material-ui/core/DialogTitle'
 import Input from '@material-ui/core/Input'
 import { BatchId, Bee } from '@ethersphere/bee-js'
 import { useSnackbar } from 'notistack'
 import { ReactElement, ReactNode, useState } from 'react'
 interface Props {
  type: 'Topup' | 'Dilute'
  icon: ReactNode
  bee: Bee
  stamp: BatchId
 }
 export default function StampExtensionModal({ type, icon, bee, stamp }: Props): ReactElement {
  const [open, setOpen] = useState(false)
  const [amount, setAmount] = useState('')
  const { enqueueSnackbar } = useSnackbar()
  const label = `${type} ${stamp.toHex().substring(0, 8)}`
  const handleClickOpen = (e: React.MouseEvent<HTMLButtonElement>) => {
    setOpen(true)
    e.stopPropagation()
  }
  const handleClose = () => {
    setOpen(false)
  }
  const handleAction = async () => {
    if (type === 'Topup') {
      try {
        await bee.topUpBatch(stamp, amount)
        enqueueSnackbar(`Successfully topped up stamp, your changes will appear soon`, { variant: 'success' })
      } catch (error) {
        enqueueSnackbar(`Failed to topup stamp: ${error || 'Unknown reason'}`, { variant: 'error' })
      }
    }
    if (type === 'Dilute') {
      try {
        await bee.diluteBatch(stamp, parseInt(amount, 10))
        enqueueSnackbar(`Successfully diluted stamp, your changes will appear soon`, { variant: 'success' })
      } catch (error) {
        enqueueSnackbar(`Failed to dilute stamp: ${error || 'Unknown reason'}`, { variant: 'error' })
      }
    }
  }
  const handleChange = (event: React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>) => {
    setAmount(event.target.value)
  }
  return (
    <Box mb={2}>
      <Button variant="contained" onClick={handleClickOpen} startIcon={icon}>
        {type}
      </Button>
      <Dialog open={open} onClose={handleClose} aria-labelledby="form-dialog-title">
        <DialogTitle id="form-dialog-title">{label}</DialogTitle>
        <DialogContent>
          <Input
            autoFocus
            margin="dense"
            id="name"
            type="text"
            placeholder={type === 'Topup' ? 'Amount to add' : 'New depth to dilute'}
            fullWidth
            value={amount}
            onChange={handleChange}
          />
        </DialogContent>
        <DialogActions>
          <Button onClick={handleClose} color="primary">
            Cancel
          </Button>
          <Button disabled={amount === ''} onClick={handleAction} color="primary">
            {type}
          </Button>
        </DialogActions>
      </Dialog>
    </Box>
  )
 }
@@ -30,6 +30,7 @@ interface Props {
  formik?: boolean
  defaultValue?: string
  placeholder?: string
  disabled?: boolean
 }
 const useStyles = makeStyles((theme: Theme) =>
@@ -60,6 +61,7 @@ export function SwarmSelect({
  onChange,
  label,
  placeholder,
  disabled = false,
 }: Props): ReactElement {
  const classes = useStyles()
@@ -69,6 +71,7 @@ export function SwarmSelect({
        {label && <FormHelperText>{label}</FormHelperText>}
        <Field
          required
          disabled={disabled}
          component={Select}
          name={name}
          fullWidth
@@ -94,6 +97,7 @@ export function SwarmSelect({
      {label && <FormHelperText>{label}</FormHelperText>}
      <MuiSelect
        required
        disabled={disabled}
        name={name}
        fullWidth
        variant="outlined"
@@ -1,24 +1,23 @@
 import { ReactElement, ReactNode, useState } from 'react'
 import Button from '@material-ui/core/Button'
 import Input from '@material-ui/core/Input'
 import Dialog from '@material-ui/core/Dialog'
 import DialogActions from '@material-ui/core/DialogActions'
 import DialogContent from '@material-ui/core/DialogContent'
 import DialogContentText from '@material-ui/core/DialogContentText'
 import DialogTitle from '@material-ui/core/DialogTitle'
 import FormHelperText from '@material-ui/core/FormHelperText'
-import { Token } from '../models/Token'
+import Input from '@material-ui/core/Input'
-import type { BigNumber } from 'bignumber.js'
+import { BZZ, TransactionId } from '@ethersphere/bee-js'
 import { useSnackbar } from 'notistack'
 import { ReactElement, ReactNode, useState } from 'react'
 interface Props {
  successMessage: string
  errorMessage: string
  dialogMessage: string
  label: string
-  max?: BigNumber
+  max?: BZZ
-  min?: BigNumber
+  min?: BZZ
-  action: (amount: bigint) => Promise<string>
+  action: (amount: BZZ) => Promise<TransactionId>
  icon?: ReactNode
 }
@@ -34,7 +33,7 @@ export default function WithdrawDepositModal({
 }: Props): ReactElement {
  const [open, setOpen] = useState(false)
  const [amount, setAmount] = useState('')
-  const [amountToken, setAmountToken] = useState<Token | null>(null)
+  const [amountToken, setAmountToken] = useState<BZZ | null>(null)
  const [amountError, setAmountError] = useState<Error | null>(null)
  const { enqueueSnackbar } = useSnackbar()
@@ -51,7 +50,7 @@ export default function WithdrawDepositModal({
    if (amountToken === null) return
    try {
-      const transactionHash = await action(amountToken.toBigInt as bigint)
+      const transactionHash = await action(amountToken)
      setOpen(false)
      enqueueSnackbar(`${successMessage} Transaction ${transactionHash}`, { variant: 'success' })
    } catch (e) {
@@ -65,12 +64,12 @@ export default function WithdrawDepositModal({
    setAmount(value)
    setAmountError(null)
    try {
-      const t = Token.fromDecimal(value)
+      const t = BZZ.fromDecimalString(value)
      setAmountToken(t)
-      if (min && t.toDecimal.isLessThan(min)) setAmountError(new Error(`Needs to be more than ${min}`))
+      if (min && t.lt(min)) setAmountError(new Error(`Needs to be more than ${min.toSignificantDigits(4)}`))
-      if (max && t.toDecimal.isGreaterThan(max)) setAmountError(new Error(`Needs to be less than ${max}`))
+      if (max && t.gt(max)) setAmountError(new Error(`Needs to be less than ${max.toSignificantDigits(4)}`))
    } catch (e) {
      setAmountError(e as Error)
    }
@@ -1,14 +1,13 @@
-export const META_FILE_NAME = '.swarmgatewaymeta.json'
+export const META_FILE_NAME = 'metadata'
 export const PREVIEW_FILE_NAME = '.swarmgatewaypreview.jpeg'
 export const PREVIEW_DIMENSIONS = { maxWidth: 250, maxHeight: 175 }
 export const BZZ_LINK_DOMAIN = 'bzz.link'
 export const BLOCKCHAIN_EXPLORER_URL = 'https://blockscout.com/xdai/mainnet'
 export const BEE_DOCS_HOST = 'https://docs.ethswarm.org/docs/'
 export const BEE_DISCORD_HOST = 'https://discord.gg/eKr9XPv7'
 export const GITHUB_REPO_URL = 'https://api.github.com/repos/ethersphere/bee'
 export const GITHUB_BEE_DASHBOARD_URL = 'https://github.com/ethersphere/bee-dashboard.git'
 export const BEE_DESKTOP_LATEST_RELEASE_PAGE = 'https://github.com/ethersphere/bee-desktop/releases/latest'
 export const BEE_DESKTOP_LATEST_RELEASE_PAGE_API =
  'https://api.github.com/repos/ethersphere/bee-desktop/releases/latest'
 export const DEFAULT_BEE_API_HOST = 'http://localhost:1633'
 export const DEFAULT_BEE_DEBUG_API_HOST = 'http://localhost:1635'
 export const DEFAULT_RPC_URL = 'https://xdai.fairdatasociety.org'
@@ -1,4 +1,4 @@
-import { BigNumber } from 'bignumber.js'
+import { BZZ } from '@ethersphere/bee-js'
 import { ReactElement, useContext } from 'react'
 import Download from 'remixicon-react/DownloadLineIcon'
 import WithdrawDepositModal from '../components/WithdrawDepositModal'
@@ -6,21 +6,23 @@ import { Context as BeeContext } from '../providers/Bee'
 import { Context as SettingsContext } from '../providers/Settings'
 export default function DepositModal(): ReactElement {
-  const { beeDebugApi } = useContext(SettingsContext)
+  const { beeApi } = useContext(SettingsContext)
  const { refresh } = useContext(BeeContext)
  return (
    <WithdrawDepositModal
      successMessage="Successful deposit."
      errorMessage="Error with depositing"
-      dialogMessage="Specify the amount of xBZZ you would like to deposit to your node."
+      dialogMessage="Amount of xBZZ to deposit to the checkbook, from your node."
      label="Deposit"
      icon={<Download size="1rem" />}
-      min={new BigNumber(0)}
+      min={BZZ.fromPLUR('1')}
-      action={async (amount: bigint) => {
+      action={async (amount: BZZ) => {
-        if (!beeDebugApi) throw new Error('Bee Debug URL is not valid')
+        if (!beeApi) {
          throw new Error('Bee URL is not valid')
        }
-        const transactionHash = await beeDebugApi.depositTokens(amount.toString())
+        const transactionHash = await beeApi.depositTokens(amount)
        refresh()
        return transactionHash
@@ -1,4 +1,4 @@
-import { BigNumber } from 'bignumber.js'
+import { BZZ } from '@ethersphere/bee-js'
 import { ReactElement, useContext } from 'react'
 import Download from 'remixicon-react/DownloadLineIcon'
 import WithdrawDepositModal from '../components/WithdrawDepositModal'
@@ -11,7 +11,7 @@ interface Props {
 }
 export default function StakeModal({ onStarted, onFinished }: Props): ReactElement {
-  const { beeDebugApi } = useContext(SettingsContext)
+  const { beeApi } = useContext(SettingsContext)
  const { refresh } = useContext(BeeContext)
  return (
@@ -21,20 +21,22 @@ export default function StakeModal({ onStarted, onFinished }: Props): ReactEleme
      dialogMessage="Specify the amount of xBZZ you would like to stake. Your first stake must be at least 10 xBZZ. This will lock your tokens."
      label="Stake"
      icon={<Download size="1rem" />}
-      min={new BigNumber(0)}
+      min={BZZ.fromPLUR('1')}
-      action={async (amount: bigint) => {
+      action={async (amount: BZZ) => {
-        if (!beeDebugApi) throw new Error('Bee Debug URL is not valid')
+        if (!beeApi) {
          throw new Error('Bee URL is not valid')
        }
        onStarted()
        try {
-          await beeDebugApi.depositStake(amount.toString())
+          const transactionHash = await beeApi.depositStake(amount)
          return transactionHash
        } finally {
          refresh()
          onFinished()
        }
        return 'unknown'
      }}
    />
  )
@@ -1,4 +1,4 @@
-import { BigNumber } from 'bignumber.js'
+import { BZZ } from '@ethersphere/bee-js'
 import { ReactElement, useContext } from 'react'
 import Upload from 'remixicon-react/UploadLineIcon'
 import WithdrawDepositModal from '../components/WithdrawDepositModal'
@@ -6,21 +6,23 @@ import { Context as BeeContext } from '../providers/Bee'
 import { Context as SettingsContext } from '../providers/Settings'
 export default function WithdrawModal(): ReactElement {
-  const { beeDebugApi } = useContext(SettingsContext)
+  const { beeApi } = useContext(SettingsContext)
  const { refresh } = useContext(BeeContext)
  return (
    <WithdrawDepositModal
      successMessage="Successful withdrawal."
      errorMessage="Error with withdrawing."
-      dialogMessage="Specify the amount of xBZZ you would like to withdraw from your node."
+      dialogMessage="Amount of xBZZ to withdraw from the checkbook to your node."
      label="Withdraw"
      icon={<Upload size="1rem" />}
-      min={new BigNumber(0)}
+      min={BZZ.fromPLUR('1')}
-      action={async (amount: bigint) => {
+      action={async (amount: BZZ) => {
-        if (!beeDebugApi) throw new Error('Bee Debug URL is not valid')
+        if (!beeApi) {
          throw new Error('Bee URL is not valid')
        }
-        const transactionHash = await beeDebugApi.withdrawTokens(amount.toString())
+        const transactionHash = await beeApi.withdrawTokens(amount)
        refresh()
        return transactionHash
@@ -1,22 +1,20 @@
-import { LastCashoutActionResponse, BeeDebug } from '@ethersphere/bee-js'
+import { AllSettlements, Bee, BZZ, LastCashoutActionResponse, PeerBalance, Settlements } from '@ethersphere/bee-js'
 import { useEffect, useState } from 'react'
 import { Token } from '../models/Token'
 import { makeRetriablePromise, unwrapPromiseSettlements } from '../utils'
 import { Balance, Settlements, Settlement } from '../types'
 interface UseAccountingHook {
  isLoadingUncashed: boolean
-  totalUncashed: Token
+  totalUncashed: BZZ
  accounting: Accounting[] | null
 }
 export interface Accounting {
  peer: string
-  uncashedAmount: Token
+  uncashedAmount: BZZ
-  balance: Token
+  balance: BZZ
-  received: Token
+  received: BZZ
-  sent: Token
+  sent: BZZ
-  total: Token
+  total: BZZ
 }
 /**
@@ -29,8 +27,8 @@ export interface Accounting {
 * @returns
 */
 function mergeAccounting(
-  balances: Balance[] | null,
+  balances: PeerBalance[] | null,
-  settlements?: Settlement[],
+  settlements?: Settlements[],
  uncashedAmounts?: LastCashoutActionResponse[],
 ): Accounting[] | null {
  // Settlements or balances are still loading or there is an error -> return null
@@ -44,9 +42,9 @@ function mergeAccounting(
      (accounting[peer] = {
        peer,
        balance,
-        sent: new Token('0'),
+        sent: BZZ.fromPLUR('0'),
-        received: new Token('0'),
+        received: BZZ.fromPLUR('0'),
-        uncashedAmount: new Token('0'),
+        uncashedAmount: BZZ.fromPLUR('0'),
        total: balance,
      }),
  )
@@ -57,7 +55,7 @@ function mergeAccounting(
        ...accounting[peer],
        sent,
        received,
-        total: new Token(accounting[peer].balance.toBigNumber.plus(received.toBigNumber).minus(sent.toBigNumber)),
+        total: accounting[peer].balance.plus(received).minus(sent),
      }),
  )
@@ -65,49 +63,49 @@ function mergeAccounting(
  if (!uncashedAmounts) return Object.values(accounting).sort((a, b) => (a.peer < b.peer ? -1 : 1))
  uncashedAmounts?.forEach(({ peer, uncashedAmount }) => {
-    accounting[peer].uncashedAmount = new Token(uncashedAmount)
+    accounting[peer].uncashedAmount = uncashedAmount
  })
  // Return sorted by the uncashed amount first and then by the peer id
  return Object.values(accounting).sort((a, b) => {
-    const diff = b.uncashedAmount.toBigNumber.minus(a.uncashedAmount.toBigNumber).toNumber()
+    const diff = Number(b.uncashedAmount.minus(a.uncashedAmount))
-    if (diff !== 0) return diff
+    if (diff !== 0) {
      return diff
    }
    return a.peer < b.peer ? -1 : 1
  })
 }
 export const useAccounting = (
-  beeDebugApi: BeeDebug | null,
+  beeApi: Bee | null,
-  settlements: Settlements | null,
+  settlements: AllSettlements | null,
-  balances: Balance[] | null,
+  balances: PeerBalance[] | null,
 ): UseAccountingHook => {
  const [isLoadingUncashed, setIsloadingUncashed] = useState<boolean>(false)
  const [uncashedAmounts, setUncashedAmounts] = useState<LastCashoutActionResponse[] | undefined>(undefined)
  useEffect(() => {
    // We don't have any settlements loaded yet or we are already loading/have loaded the uncashed amounts
-    if (isLoadingUncashed || !beeDebugApi || !settlements || uncashedAmounts) return
+    if (isLoadingUncashed || !beeApi || !settlements || uncashedAmounts) return
    setIsloadingUncashed(true)
    const promises = settlements.settlements
-      .filter(({ received }) => received.toBigNumber.gt('0'))
+      .filter(({ received }) => received.gt(BZZ.fromPLUR('0')))
-      .map(({ peer }) => makeRetriablePromise(() => beeDebugApi.getLastCashoutAction(peer)))
+      .map(({ peer }) => makeRetriablePromise(() => beeApi.getLastCashoutAction(peer)))
    Promise.allSettled(promises).then(settlements => {
      const results = unwrapPromiseSettlements(settlements)
      setUncashedAmounts(results.fulfilled)
      setIsloadingUncashed(false)
    })
-  }, [settlements, isLoadingUncashed, uncashedAmounts, beeDebugApi])
+  }, [settlements, isLoadingUncashed, uncashedAmounts, beeApi])
  const accounting = mergeAccounting(balances, settlements?.settlements, uncashedAmounts)
-  let totalUncashed: Token = new Token('0')
+  let totalUncashed = BZZ.fromPLUR('0')
-  accounting?.forEach(
+  accounting?.forEach(({ uncashedAmount }) => (totalUncashed = totalUncashed.plus(uncashedAmount)))
    ({ uncashedAmount }) => (totalUncashed = new Token(totalUncashed.toBigNumber.plus(uncashedAmount.toBigNumber))),
  )
  return {
    isLoadingUncashed,
@@ -1,24 +1,17 @@
 import React from 'react'
 import ReactDOM from 'react-dom'
 import './index.css'
 import App from './App'
 import './index.css'
 import reportWebVitals from './reportWebVitals'
-const desktopEnabled = Boolean(process.env.REACT_APP_BEE_DESKTOP_ENABLED)
+const desktopEnabled = process.env.REACT_APP_BEE_DESKTOP_ENABLED === 'true'
 const desktopUrl = process.env.REACT_APP_BEE_DESKTOP_URL
 const beeApiUrl = process.env.REACT_APP_BEE_HOST
 const beeDebugApiUrl = process.env.REACT_APP_BEE_DEBUG_HOST
 const defaultRpcUrl = process.env.REACT_APP_DEFAULT_RPC_URL
 ReactDOM.render(
  <React.StrictMode>
-    <App
+    <App isDesktop={desktopEnabled} desktopUrl={desktopUrl} beeApiUrl={beeApiUrl} defaultRpcUrl={defaultRpcUrl} />
      isDesktop={desktopEnabled}
      desktopUrl={desktopUrl}
      beeApiUrl={beeApiUrl}
      beeDebugApiUrl={beeDebugApiUrl}
      defaultRpcUrl={defaultRpcUrl}
    />
  </React.StrictMode>,
  document.getElementById('root'),
 )
@@ -1,14 +1,16 @@
 import { Button, CircularProgress, Container, IconButton } from '@material-ui/core'
-import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'
+import { Theme, createStyles, makeStyles } from '@material-ui/core/styles'
 import React, { ReactElement, useContext, useEffect } from 'react'
 import { useSnackbar } from 'notistack'
 import React, { ReactElement, useContext, useEffect } from 'react'
 import CloseIcon from 'remixicon-react/CloseCircleLineIcon'
 import ErrorBoundary from '../components/ErrorBoundary'
 import { Flex } from '../components/Flex'
 import SideBar from '../components/SideBar'
 import { BEE_DESKTOP_LATEST_RELEASE_PAGE } from '../constants'
 import { useBeeDesktop, useNewBeeDesktopVersion } from '../hooks/apiHooks'
 import { Context as BeeContext } from '../providers/Bee'
 import { Context as SettingsContext } from '../providers/Settings'
-import { useBeeDesktop, useNewBeeDesktopVersion } from '../hooks/apiHooks'
+import { useLocation } from 'react-router-dom'
 import { BEE_DESKTOP_LATEST_RELEASE_PAGE } from '../constants'
 const useStyles = makeStyles((theme: Theme) =>
  createStyles({
@@ -16,6 +18,10 @@ const useStyles = makeStyles((theme: Theme) =>
      backgroundColor: theme.palette.background.default,
      minHeight: '100vh',
    },
    fileManagerOn: {
      padding: '0px',
    },
  }),
 )
@@ -25,55 +31,17 @@ interface Props {
 }
 const Dashboard = (props: Props): ReactElement => {
  const location = useLocation()
  const isFileManagerOn = location.pathname.startsWith('/filemanager')
  const classes = useStyles()
-  const { isLoading, isLatestBeeVersion, latestBeeRelease, latestBeeVersionUrl, latestUserVersion } =
+  const { isLoading } = useContext(BeeContext)
    useContext(BeeContext)
  const { isDesktop, desktopUrl } = useContext(SettingsContext)
  const { desktopAutoUpdateEnabled } = useBeeDesktop(isDesktop, desktopUrl)
  const { newBeeDesktopVersion } = useNewBeeDesktopVersion(isDesktop, desktopUrl, desktopAutoUpdateEnabled)
  const { enqueueSnackbar, closeSnackbar } = useSnackbar()
  // New version of Bee client notification
  useEffect(() => {
    if (!isLoading && !isDesktop && !isLatestBeeVersion && latestBeeRelease && latestUserVersion) {
      enqueueSnackbar(`There is new Bee version ${latestBeeRelease?.name}!`, {
        variant: 'warning',
        preventDuplicate: true,
        key: 'beeNewVersion',
        persist: true,
        action: key => (
          <React.Fragment>
            <Button
              onClick={() => {
                window.open(latestBeeVersionUrl)
                closeSnackbar(key)
              }}
            >
              Download release
            </Button>
            <IconButton
              onClick={() => {
                closeSnackbar(key)
              }}
            >
              <CloseIcon />
            </IconButton>
          </React.Fragment>
        ),
      })
    }
  }, [
    closeSnackbar,
    enqueueSnackbar,
    isLatestBeeVersion,
    isDesktop,
    latestBeeRelease,
    latestBeeVersionUrl,
    isLoading,
    latestUserVersion,
  ])
  useEffect(() => {
    // When autoupdate is enabled then we leave the version check for the built-in Electron update mechanism
    if (desktopAutoUpdateEnabled) {
@@ -122,13 +90,13 @@ const Dashboard = (props: Props): ReactElement => {
  )
  return (
-    <div style={{ display: 'flex' }}>
+    <Flex>
      <SideBar />
-      <Container className={classes.content}>
+      <Container className={`${classes.content} ${isFileManagerOn ? classes.fileManagerOn : ''}`}>
        {' '}
        <ErrorBoundary errorReporting={props.errorReporting}>{content}</ErrorBoundary>
      </Container>
-    </div>
+    </Flex>
  )
 }
@@ -1,14 +0,0 @@
 import { BigNumber } from 'bignumber.js'
 import { Token } from './Token'
 export const BZZ_DECIMAL_PLACES = 16
 export class BzzToken extends Token {
  constructor(value: BigNumber | string | bigint) {
    super(value, BZZ_DECIMAL_PLACES)
  }
  static fromDecimal(value: BigNumber | string | bigint): BzzToken {
    return Token.fromDecimal(value, BZZ_DECIMAL_PLACES)
  }
 }
@@ -1,14 +0,0 @@
 import { BigNumber } from 'bignumber.js'
 import { Token } from './Token'
 const DAI_DECIMAL_PLACES = 18
 export class DaiToken extends Token {
  constructor(value: BigNumber | string | bigint) {
    super(value, DAI_DECIMAL_PLACES)
  }
  static fromDecimal(value: BigNumber | string | bigint): DaiToken {
    return Token.fromDecimal(value, DAI_DECIMAL_PLACES)
  }
 }
@@ -1,39 +0,0 @@
 import BigNumber from 'bignumber.js'
 import { Token } from './Token'
 describe('models/Token', () => {
  describe('Token.fromDecimal', () => {
    const values = [
      { bzz: '0', baseUnits: '0' },
      { bzz: '0.1', baseUnits: BigInt('1000000000000000') },
      { bzz: '9.9', baseUnits: BigInt('99000000000000000') },
    ]
    // Test with default 16 decimal places
    values.forEach(({ bzz, baseUnits }) => {
      test(`converting ${bzz} => ${baseUnits}`, () => {
        expect(Token.fromDecimal(bzz).toBigNumber.eq(baseUnits.toString())).toBe(true)
      })
    })
    // Test with 0 decimal places
    values.forEach(({ baseUnits }) => {
      test(`converting ${baseUnits} => ${baseUnits} with 0 decimals`, () => {
        expect(Token.fromDecimal(baseUnits, 0).toBigNumber.eq(baseUnits.toString())).toBe(true)
      })
    })
  })
  describe('new Token', () => {
    const cs = ['0', '1234567890', '99000000000000000']
    const correctValues = [...cs, ...cs.map(BigInt), ...cs.map(v => new BigNumber(v))]
    correctValues.forEach(v => {
      test(`New Token ${v} of type ${typeof v}`, () => {
        const t = new Token(v)
        expect(t.toBigNumber.eq(v.toString())).toBe(true)
      })
    })
  })
 })
@@ -1,97 +0,0 @@
 import { BigNumber } from 'bignumber.js'
 import { isInteger, makeBigNumber } from '../utils'
 const POSSIBLE_DECIMALS = [18, 17, 16, 15, 14, 13, 12, 11, 10, 9, 8, 7, 6, 5, 4, 3, 2, 1, 0]
 type digits = typeof POSSIBLE_DECIMALS[number]
 const BZZ_DECIMALS = 16
 export class Token {
  private amount: BigNumber // Represented in the base units, so it is always an integer value
  private readonly decimals: digits
  constructor(amount: BigNumber | string | bigint, decimals: digits = BZZ_DECIMALS) {
    const a = makeBigNumber(amount)
    if (!isInteger(a) || !POSSIBLE_DECIMALS.includes(decimals)) {
      throw new TypeError(`Not a valid token values: ${amount} ${decimals}`)
    }
    this.amount = a
    this.decimals = decimals
  }
  /**
   * Construct new Token from a digit representation
   *
   * @param amount    Amount of a token in the digits (1 token = 10^decimals)
   * @param decimals  Number of decimals for the token (must be integer)
   *
   * @throws {TypeError} If the decimals is not an integer or the amount after conversion is not an integer
   *
   * @returns new Token
   */
  static fromDecimal(amount: BigNumber | string | bigint, decimals: digits = BZZ_DECIMALS): Token | never {
    const a = makeBigNumber(amount)
    // No need to do any validation here, it is done when the new token is created
    const t = a.multipliedBy(new BigNumber(10).pow(decimals))
    return new Token(t, decimals)
  }
  get toBigInt(): bigint {
    return BigInt(this.amount.toFixed(0))
  }
  get toString(): string {
    return this.amount.toFixed(0)
  }
  get toBigNumber(): BigNumber {
    return new BigNumber(this.amount)
  }
  get toDecimal(): BigNumber {
    return this.amount.dividedBy(new BigNumber(10).pow(this.decimals))
  }
  toFixedDecimal(digits = 7): string {
    return this.toDecimal.toFixed(digits)
  }
  toSignificantDigits(digits = 4): string {
    const asString = this.toDecimal.toFixed(this.decimals)
    let indexOfSignificantDigit = -1
    let reachedDecimalPoint = false
    for (let i = 0; i < asString.length; i++) {
      const char = asString[i]
      if (char === '.') {
        reachedDecimalPoint = true
        indexOfSignificantDigit = i + 1
      } else if (reachedDecimalPoint && char !== '0') {
        indexOfSignificantDigit = i
        break
      }
    }
    return asString.slice(0, indexOfSignificantDigit + digits)
  }
  minusBaseUnits(amount: string): Token {
    return new Token(
      this.toBigNumber.minus(new BigNumber(amount).multipliedBy(new BigNumber(10).pow(this.decimals))),
      this.decimals,
    )
  }
  plusBaseUnits(amount: string): Token {
    return new Token(
      this.toBigNumber.plus(new BigNumber(amount).multipliedBy(new BigNumber(10).pow(this.decimals))),
      this.decimals,
    )
  }
 }
@@ -0,0 +1,111 @@
 .fm-admin-status-bar-container {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgb(33, 33, 33);
  height: 60px;
  padding: 10px 16px;
  &.is-loading {
    filter: blur(1px);
  }
 }
 .fm-admin-status-bar-left {
  display: flex;
  align-items: center;
  gap: 16px;
  color: rgb(229, 231, 235);
 }
 .fm-admin-status-bar-upgrade-button {
  padding: 6px;
  background-color: rgb(237, 237, 237);
  border-radius: 0;
  text-align: center;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.2s ease;
  &:hover {
    opacity: 0.9;
  }
  &[aria-disabled='true'] {
    pointer-events: none;
    opacity: 0.6;
  }
 }
 .fm-admin-status-bar-loader {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.04), transparent);
  animation: fmShimmer 1.2s infinite;
  border-radius: 6px;
 }
@keyframes fmShimmer {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
 }
 .fm-admin-status-bar-progress-pill-container {
  position: absolute;
  height: 60px;
  width: 100%;
  display: flex;
  align-items: center;
  bottom: 0;
  right: 0;
 }
 .fm-admin-status-progress-pill {
  position: absolute;
  right: 16px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 500;
  background: rgb(255, 255, 255);
  color: #000000;
  border: 1px solid rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(6px);
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.25);
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  z-index: 999;
  &:hover {
    background: rgb(221, 221, 221);
  }
  &::after {
    content: '›';
    font-size: 14px;
    opacity: 0.7;
    transition: transform 0.2s ease;
  }
  &:hover::after {
    transform: translateX(2px);
    opacity: 1;
  }
 }
 .fm-admin-status-bar-container.is-loading .fm-admin-status-progress-pill {
  filter: none;
 }
@@ -0,0 +1,252 @@
 import { ReactElement, useState, useMemo, useEffect, useContext, useCallback } from 'react'
 import './AdminStatusBar.scss'
 import { ProgressBar } from '../ProgressBar/ProgressBar'
 import { Tooltip } from '../Tooltip/Tooltip'
 import { PostageBatch } from '@ethersphere/bee-js'
 import { DriveInfo, estimateDriveListMetadataSize } from '@solarpunkltd/file-manager-lib'
 import { Context as FMContext } from '../../../../providers/FileManager'
 import { ConfirmModal } from '../ConfirmModal/ConfirmModal'
 import { calculateStampCapacityMetrics } from '../../utils/bee'
 import { getHumanReadableFileSize } from '../../../../utils/file'
 import { UpgradeDriveModal } from '../UpgradeDriveModal/UpgradeDriveModal'
 import { UpgradeTimeoutModal } from '../UpgradeTimeoutModal/UpgradeTimeoutModal'
 import { FILE_MANAGER_EVENTS, POLLING_TIMEOUT_MS } from '../../constants/common'
 import { useStampPolling } from '../../hooks/useStampPolling'
 import { TOOLTIPS } from '../../constants/tooltips'
 interface AdminStatusBarProps {
  adminStamp: PostageBatch | null
  adminDrive: DriveInfo | null
  loading: boolean
  isCreationInProgress: boolean
  setErrorMessage?: (error: string) => void
 }
 export function AdminStatusBar({
  adminStamp,
  adminDrive,
  loading,
  isCreationInProgress,
  setErrorMessage,
 }: AdminStatusBarProps): ReactElement {
  const { drives, setShowError, refreshStamp } = useContext(FMContext)
  const [isUpgradeDriveModalOpen, setIsUpgradeDriveModalOpen] = useState(false)
  const [isUpgradeTimeoutModalOpen, setIsUpgradeTimeoutModalOpen] = useState(false)
  const [isUpgrading, setIsUpgrading] = useState(false)
  const [actualStamp, setActualStamp] = useState<PostageBatch | null>(adminStamp)
  const [showProgressModal, setShowProgressModal] = useState(true)
  const handleStampUpdated = useCallback((updatedStamp: PostageBatch) => {
    setActualStamp(updatedStamp)
  }, [])
  const handlePollingStateChange = useCallback((_isPolling: boolean) => {
    // no-op
  }, [])
  const { startPolling } = useStampPolling({
    onStampUpdated: handleStampUpdated,
    onPollingStateChange: handlePollingStateChange,
    refreshStamp,
    timeout: POLLING_TIMEOUT_MS,
  })
  useEffect(() => {
    setShowProgressModal(isCreationInProgress || loading)
  }, [isCreationInProgress, loading, setShowProgressModal])
  useEffect(() => {
    if (!adminStamp || !actualStamp) {
      setActualStamp(adminStamp)
      return
    }
    if (actualStamp.batchID.toString() !== adminStamp.batchID.toString()) {
      setActualStamp(adminStamp)
      return
    }
    const incomingSize = adminStamp.size.toBytes()
    const currentSize = actualStamp.size.toBytes()
    const incomingExpiry = adminStamp.duration.toEndDate().getTime()
    const currentExpiry = actualStamp.duration.toEndDate().getTime()
    if (incomingSize > currentSize || incomingExpiry > currentExpiry) {
      setActualStamp(adminStamp)
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [adminStamp])
  useEffect(() => {
    if (!adminDrive) return
    const id = adminDrive.id.toString()
    const onStart = (e: Event) => {
      const { driveId } = (e as CustomEvent).detail || {}
      if (driveId === id) {
        setIsUpgrading(true)
      }
    }
    const onEnd = (e: Event) => {
      const { driveId, success, error, updatedStamp } = (e as CustomEvent).detail || {}
      if (driveId !== id) return
      if (!success && error) {
        setIsUpgrading(false)
        setErrorMessage?.(error)
        setShowError(true)
        return
      }
      if (updatedStamp) {
        setActualStamp(updatedStamp)
      }
      setIsUpgrading(false)
    }
    const onTimeout = (e: Event) => {
      const { driveId } = (e as CustomEvent).detail || {}
      if (driveId === id) {
        setIsUpgradeTimeoutModalOpen(true)
      }
    }
    window.addEventListener(FILE_MANAGER_EVENTS.DRIVE_UPGRADE_START, onStart as EventListener)
    window.addEventListener(FILE_MANAGER_EVENTS.DRIVE_UPGRADE_END, onEnd as EventListener)
    window.addEventListener(FILE_MANAGER_EVENTS.DRIVE_UPGRADE_TIMEOUT, onTimeout as EventListener)
    return () => {
      window.removeEventListener(FILE_MANAGER_EVENTS.DRIVE_UPGRADE_START, onStart as EventListener)
      window.removeEventListener(FILE_MANAGER_EVENTS.DRIVE_UPGRADE_END, onEnd as EventListener)
      window.removeEventListener(FILE_MANAGER_EVENTS.DRIVE_UPGRADE_TIMEOUT, onTimeout as EventListener)
    }
  }, [adminDrive, setErrorMessage, setShowError])
  const handleTimeoutCancel = useCallback(() => {
    setIsUpgrading(false)
    setIsUpgradeTimeoutModalOpen(false)
    // Restart polling to continue checking for capacity updates
    if (actualStamp) {
      startPolling(actualStamp)
    }
  }, [actualStamp, startPolling])
  const { capacityPct, usedSize, totalSize } = useMemo(() => {
    if (!actualStamp) {
      return {
        capacityPct: 0,
        usedSize: '—',
        totalSize: '—',
      }
    }
    const estimatedDlSizeBytes = estimateDriveListMetadataSize(drives) * drives.length
    const {
      capacityPct: reportedPct,
      usedBytes: reportedUsedBytes,
      stampSizeBytes,
    } = calculateStampCapacityMetrics(actualStamp, [], adminDrive?.redundancyLevel)
    const actualUsedSizeBytes = Math.max(reportedUsedBytes, estimatedDlSizeBytes)
    const actualPct = Math.max(reportedPct, (actualUsedSizeBytes / stampSizeBytes) * 100)
    return {
      capacityPct: actualPct,
      usedSize: getHumanReadableFileSize(actualUsedSizeBytes),
      totalSize: getHumanReadableFileSize(stampSizeBytes),
    }
  }, [actualStamp, adminDrive, drives])
  const expiresAt = useMemo(
    () => (actualStamp ? actualStamp.duration.toEndDate().toLocaleDateString() : '—'),
    [actualStamp],
  )
  const isBusy = loading || isUpgrading || isCreationInProgress
  const blurCls = isBusy ? ' is-loading' : ''
  const statusVerb = isCreationInProgress ? 'Creating' : 'Loading'
  const statusText = statusVerb + '  admin drive, please do not reload'
  const renderModalsAndOverlays = () => {
    return (
      <>
        {isUpgradeDriveModalOpen && actualStamp && adminDrive && (
          <UpgradeDriveModal
            stamp={actualStamp}
            drive={adminDrive}
            onCancelClick={() => setIsUpgradeDriveModalOpen(false)}
            setErrorMessage={setErrorMessage}
          />
        )}
        {isUpgradeTimeoutModalOpen && adminDrive && actualStamp && (
          <UpgradeTimeoutModal driveName={adminDrive.name} onOk={handleTimeoutCancel} />
        )}
        {isUpgrading && (
          <div className="fm-drive-item-creating-overlay" aria-live="polite">
            <div className="fm-mini-spinner" />
            <span>Upgrading admin drive…</span>
          </div>
        )}
        {showProgressModal && (
          <ConfirmModal
            title="Admin Drive Creation"
            isProgress
            spinnerMessage={statusText}
            showFooter={false}
            showMinimize={true}
            onMinimize={() => setShowProgressModal(false)}
          />
        )}
      </>
    )
  }
  return (
    <div>
      <div className={`fm-admin-status-bar-container${blurCls}`} aria-busy={isBusy ? 'true' : 'false'}>
        <div className="fm-admin-status-bar-left">
          <div
            className={`fm-drive-item-capacity ${isUpgrading ? 'fm-drive-item-capacity-updating' : ''}`}
            title={isUpgrading ? 'Capacity is updating... This may take a few moments.' : ''}
          >
            Capacity <ProgressBar value={capacityPct} width="150px" /> {usedSize} / {totalSize}
          </div>
          <div>File Manager Available: Until: {expiresAt}</div>
          <Tooltip label={TOOLTIPS.ADMIN_STATUS_WARNING} />
        </div>
        {renderModalsAndOverlays()}
        <div
          className="fm-admin-status-bar-upgrade-button"
          onClick={() => !isBusy && actualStamp && adminDrive && setIsUpgradeDriveModalOpen(true)}
          aria-disabled={isBusy ? 'true' : 'false'}
        >
          {isBusy ? 'Working…' : 'Manage'}
        </div>
      </div>
      {!showProgressModal && (loading || isCreationInProgress) && (
        <div className="fm-admin-status-bar-progress-pill-container">
          <div className="fm-admin-status-progress-pill" onClick={() => setShowProgressModal(true)}>
            {statusText}
          </div>
        </div>
      )}
    </div>
  )
 }
@@ -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;
 }
@@ -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 (
    <div
      className={`fm-button fm-button-${variant} fm-button-${size}${icon ? ' fm-button-icon' : ''}${
        disabled ? ' fm-button-disabled' : ''
      }`}
      onClick={disabled ? undefined : onClick}
      style={{ width: width ? `${width}px` : undefined }}
    >
      {icon} {label}
    </div>
  )
 }
@@ -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;
 }
@@ -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?: React.ReactNode
  message?: React.ReactNode
  confirmLabel?: string
  cancelLabel?: string
  onConfirm?: () => void | Promise<void>
  onCancel?: () => void
  showFooter?: boolean
  isProgress?: boolean
  spinnerMessage?: string
  showMinimize?: boolean
  onMinimize?: () => void
  background?: boolean
 }
 export function ConfirmModal({
  title = 'Are you sure?',
  message,
  confirmLabel = 'Confirm',
  cancelLabel = 'Cancel',
  onConfirm,
  onCancel,
  showFooter = true,
  isProgress = false,
  spinnerMessage,
  showMinimize = true,
  onMinimize,
  background = true,
 }: ConfirmModalProps): ReactElement {
  const modalRoot = document.querySelector('.fm-main') || document.body
  return createPortal(
    <div className={`fm-modal-container fm-confirm-modal ${background ? '' : 'fm-modal-no-background'}`}>
      <div className="fm-modal-window">
        <div className="fm-modal-window-header">{title}</div>
        <div className="fm-modal-window-body">
          {isProgress ? (
            <div className="fm-spinner-center">
              <div className="fm-spinner-message">
                <div>{spinnerMessage || 'Working…'}</div>
                <div className="fm-mini-spinner" />
              </div>
              {showMinimize && <Button label="Minimize" variant="secondary" onClick={onMinimize} />}
            </div>
          ) : (
            <div className="fm-modal-white-section">{message}</div>
          )}
        </div>
        {showFooter && (onCancel || onConfirm) && (
          <div className="fm-modal-window-footer">
            {onCancel && <Button label={cancelLabel} variant="secondary" onClick={onCancel} />}
            {onConfirm && <Button label={confirmLabel} variant="primary" onClick={() => onConfirm()} />}
          </div>
        )}
      </div>
    </div>,
    modalRoot,
  )
 }
@@ -0,0 +1,6 @@
 .fm-context-menu {
  background: white;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 0px;
 }
@@ -0,0 +1,11 @@
 import { ReactElement } from 'react'
 import './ContextMenu.scss'
 interface ContextMenuProps {
  children?: ReactElement | ReactElement[]
 }
 export function ContextMenu({ children }: ContextMenuProps): ReactElement {
  return <div className="fm-context-menu">{children}</div>
 }
@@ -0,0 +1,91 @@
 .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;
 }
 .fm-error-text {
  color: var(--fm-error, #dc2626);
  font-size: 12px;
  line-height: 1.25;
 }
@@ -0,0 +1,261 @@
 import { ReactElement, useContext, useEffect, useRef, useState } from 'react'
 import { BeeModes, BZZ, DAI, 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))
 const maxDriveNameLength = 40
 interface CreateDriveModalProps {
  onCancelClick: () => void
  onDriveCreated: () => void
  onCreationStarted: (driveName: string) => 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 [isxDaiBalanceSufficient, setIsxDaiBalanceSufficient] = 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, nodeInfo } = useContext(BeeContext)
  const { beeApi } = useContext(SettingsContext)
  const { fm, drives, expiredDrives, adminDrive } = useContext(FMContext)
  const currentFetch = useRef<Promise<void> | null>(null)
  const isMountedRef = useRef(true)
  const [duplicate, setDuplicate] = useState(false)
  const trimmedName = driveName.trim()
  const allExistingDriveNames = new Set(
    [...(drives || []), ...(expiredDrives || []), ...(adminDrive ? [adminDrive] : [])].map(d => d.name.trim()),
  )
  const nameExists = trimmedName.length > 0 && allExistingDriveNames.has(trimmedName)
  const validationError = duplicate && nameExists ? 'Drive already exists. Please choose another name.' : ''
  useEffect(() => {
    return () => {
      isMountedRef.current = false
    }
  }, [])
  useEffect(() => {
    if (duplicate && !nameExists) {
      setDuplicate(false)
    }
  }, [duplicate, nameExists])
  const handleCapacityChange = (value: number, index: number) => {
    setCapacityIndex(index)
  }
  useEffect(() => {
    const newSizes = Array.from(Utils.getStampEffectiveBytesBreakpoints(encryptionEnabled, erasureCodeLevel).values())
    setSizeMarks(
      newSizes.map(size => ({
        value: size,
        label: getHumanReadableFileSize(size),
      })),
    )
    setCapacity(newSizes[capacityIndex])
  }, [encryptionEnabled, erasureCodeLevel, capacityIndex])
  useEffect(() => {
    if (capacity > 0 && validityEndDate.getTime() > new Date().getTime()) {
      fmFetchCost(
        capacity,
        validityEndDate,
        false,
        erasureCodeLevel,
        beeApi,
        (cost: BZZ) => {
          if (!isMountedRef.current) return
          setIsBalanceSufficient(true)
          setIsxDaiBalanceSufficient(true)
          if ((walletBalance && cost.gte(walletBalance.bzzBalance)) || !walletBalance) {
            setIsBalanceSufficient(false)
          }
          setCost(cost.toSignificantDigits(2))
          const zeroDAI = DAI.fromDecimalString('0')
          if ((walletBalance && zeroDAI.eq(walletBalance.nativeTokenBalance)) || !walletBalance) {
            setIsxDaiBalanceSufficient(false)
          }
        },
        currentFetch,
      )
      const canCreate = Boolean(trimmedName) && !nameExists
      setIsCreateEnabled(canCreate)
    } else {
      setCost('0')
      setIsCreateEnabled(false)
    }
  }, [capacity, validityEndDate, beeApi, walletBalance, nameExists, erasureCodeLevel, trimmedName])
  useEffect(() => {
    setValidityEndDate(getExpiryDateByLifetime(lifetimeIndex))
  }, [lifetimeIndex])
  const isUltraLightNode = nodeInfo?.beeMode === BeeModes.ULTRA_LIGHT
  const isCreateDriveDisabled = isUltraLightNode || !isCreateEnabled || !isBalanceSufficient || !isxDaiBalanceSufficient
  return (
    <div className="fm-modal-container">
      <div className="fm-modal-window">
        <div className="fm-modal-window-header">Create new drive</div>
        <div className="fm-modal-window-body">
          <div className="fm-modal-window-input-container">
            <label htmlFor="drive-name" className="fm-input-label">
              Drive name: <Tooltip label={TOOLTIPS.DRIVE_NAME} />
            </label>
            <input
              type="text"
              id="drive-name"
              placeholder="My important files"
              value={driveName}
              onChange={e => setDriveName(e.target.value)}
              onBlur={() => setDuplicate(true)}
              maxLength={maxDriveNameLength}
            />
            {validationError && <div className="fm-error-text">{validationError}</div>}
          </div>
          <div className="fm-modal-window-input-container">
            <label htmlFor="drive-initial-capacity" className="fm-input-label">
              Initial capacity: <Tooltip label={TOOLTIPS.DRIVE_INITIAL_CAPACITY} />
            </label>
            <CustomDropdown
              id="drive-initial-capacity"
              options={sizeMarks}
              value={capacity}
              onChange={handleCapacityChange}
              placeholder="Select a value"
            />
          </div>
          <div className="fm-modal-info-warning">
            Drive sizes are calculated automatically from your current stamp configuration.
          </div>
          <div className="fm-modal-window-input-container">
            <label htmlFor="drive-desired-lifetime" className="fm-input-label">
              Desired lifetime: <Tooltip label={TOOLTIPS.DRIVE_DESIRED_LIFETIME} />
            </label>
            <CustomDropdown
              id="drive-desired-lifetime"
              options={desiredLifetimeOptions}
              value={lifetimeIndex}
              onChange={setLifetimeIndex}
              placeholder="Select a value"
            />
          </div>
          <div className="fm-modal-window-input-container">
            <label htmlFor="drive-security-level" className="fm-input-label">
              Security Level <Tooltip label={TOOLTIPS.DRIVE_SECURITY_LEVEL} />
            </label>
            <FMSlider
              id="drive-security-level"
              defaultValue={0}
              marks={erasureCodeMarks}
              onChange={value => setErasureCodeLevel(value)}
              minValue={minMarkValue}
              maxValue={maxMarkValue}
              step={1}
            />
          </div>
          <div>
            <div className="fm-modal-estimated-cost-container">
              <div className="fm-emphasized-text">Estimated Cost:</div>
              <div>
                {cost} BZZ {isBalanceSufficient ? '' : '(Insufficient balance)'}
                {isxDaiBalanceSufficient ? '' : ' (Insufficient xDAI balance)'}
              </div>
              <Tooltip label={TOOLTIPS.DRIVE_ESTIMATED_COST} bottomTooltip={true} />
            </div>
            <div>(Based on current network conditions)</div>
            {isUltraLightNode && (
              <div>
                Creating a drive requires running a light node. Please{' '}
                <a
                  href="https://docs.ethswarm.org/docs/desktop/configuration/#upgrading-from-an-ultra-light-to-a-light-node"
                  target="_blank"
                  rel="noreferrer"
                >
                  upgrade
                </a>{' '}
                to continue.
              </div>
            )}
          </div>
        </div>
        <div className="fm-modal-window-footer">
          <Button
            label="Create drive"
            variant="primary"
            disabled={isCreateDriveDisabled}
            onClick={async () => {
              if (!trimmedName || nameExists) {
                setDuplicate(true)
                return
              }
              if (isCreateEnabled && walletBalance && adminDrive) {
                onCreationStarted(driveName)
                onCancelClick()
                await handleCreateDrive({
                  beeApi,
                  fm,
                  size: Size.fromBytes(capacity),
                  duration: Duration.fromEndDate(validityEndDate),
                  label: trimmedName,
                  encryption: encryptionEnabled,
                  redundancyLevel: erasureCodeLevel,
                  adminRedundancy: adminDrive?.redundancyLevel,
                  isAdmin: false,
                  resetState: false,
                  existingBatch: null,
                  onSuccess: () => onDriveCreated(),
                  onError: () => onCreationError(trimmedName),
                })
              }
            }}
          />
          <Button label="Cancel" variant="secondary" onClick={onCancelClick} />
        </div>
      </div>
    </div>
  )
 }
@@ -0,0 +1,105 @@
 .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: scroll;
    animation: fadeIn 0.15s;
    scrollbar-gutter: stable;
    &::-webkit-scrollbar {
      width: 8px;
    }
    &::-webkit-scrollbar-track {
      background: #f1f1f1;
    }
    &::-webkit-scrollbar-thumb {
      background: #888;
      border-radius: 4px;
    }
    &::-webkit-scrollbar-thumb:hover {
      background: #555;
    }
    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);
  }
 }
@@ -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<HTMLDivElement>(null)
  useClickOutside(ref, () => setOpen(false), open)
  const selectedLabel = options.find(opt => opt.value === value)?.label || ''
  return (
    <div className="fm-custom-dropdown" ref={ref}>
      {label && (
        <label htmlFor={id} className="fm-input-label">
          {icon} {label} {infoText && <Tooltip label={infoText ? infoText : ''} iconSize="14px" />}
        </label>
      )}
      <div
        className={`fm-custom-dropdown-selected${open ? ' open' : ''}`}
        id={id}
        onClick={() => setOpen(prev => !prev)}
      >
        {selectedLabel || <span className="placeholder">{placeholder} </span>}
        <ArrowDropdown className="arrow" />
      </div>
      {open && (
        <ul className="fm-custom-dropdown-list">
          {options.map((opt, index) => (
            <li
              key={opt.value}
              className={opt.value === value ? 'selected' : ''}
              onClick={() => {
                onChange(opt.value, index)
                setOpen(false)
              }}
            >
              {opt.label}
            </li>
          ))}
        </ul>
      )}
    </div>
  )
 }
@@ -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;
 }
@@ -0,0 +1,128 @@
 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 { Tooltip } from '../Tooltip/Tooltip'
 import { FileAction } from '../../constants/transfers'
 import { TOOLTIPS } from '../../constants/tooltips'
 interface DeleteFileModalProps {
  name?: string
  names?: string[]
  currentDriveName?: string
  onCancelClick: () => void
  onProceed: (action: FileAction) => void
 }
 export function DeleteFileModal({
  name,
  names,
  currentDriveName,
  onCancelClick,
  onProceed,
 }: DeleteFileModalProps): ReactElement {
  const [value, setValue] = useState<FileAction>(FileAction.Trash)
  const modalRoot = document.querySelector('.fm-main') || document.body
  const isBulk = Array.isArray(names) && names.length > 0
  const count = isBulk ? names.length : 1
  const headerText = isBulk ? `Delete ${count} file${count > 1 ? 's' : ''}?` : `Delete ${name}?`
  const subjectNoun = isBulk ? 'selected file(s)' : 'this file'
  return createPortal(
    <div className="fm-modal-container">
      <div className="fm-modal-window fm-delete-file-modal">
        <div className="fm-modal-window-header">
          <TrashIcon /> <span className="fm-main-font-color">{headerText}</span>
        </div>
        <div className="fm-modal-window-body">
          {isBulk && (
            <ul className="fm-delete-file-modal-list">
              {names.map(n => (
                <li key={n} className="fm-delete-file-modal-list-item" title={n}>
                  {n}
                </li>
              ))}
            </ul>
          )}
          <FormControl component="fieldset">
            <div className="fm-radio-group">
              <div className="fm-form-control-label">
                <FormControlLabel
                  value={FileAction.Trash}
                  control={<Radio checked={value === FileAction.Trash} onChange={() => setValue(FileAction.Trash)} />}
                  label={
                    <div className="fm-radio-label">
                      <div className="fm-radio-label-header fm-main-font-color fm-line-height-fit">
                        Move to Trash
                        <Tooltip label={TOOLTIPS.FILE_OPERATION_TRASH} iconSize="14px" />
                      </div>
                      <div onClick={e => e.preventDefault()}>
                        Moves {subjectNoun} to the trash. It will still take up space on{' '}
                        {currentDriveName ?? 'this drive'} and expire along with it. You can restore it later.
                      </div>
                    </div>
                  }
                />
              </div>
              <div className="fm-form-control-label">
                <FormControlLabel
                  value={FileAction.Forget}
                  control={<Radio checked={value === FileAction.Forget} onChange={() => setValue(FileAction.Forget)} />}
                  label={
                    <div className="fm-radio-label">
                      <div className="fm-radio-label-header fm-main-font-color fm-line-height-fit">
                        Forget
                        <Tooltip label={TOOLTIPS.FILE_OPERATION_FORGET} iconSize="14px" />
                      </div>
                      <div onClick={e => e.preventDefault()}>
                        Removes {subjectNoun} from your view. The data will remain on Swarm until{' '}
                        {currentDriveName ?? 'the drive'} expires. This action cannot be easily undone.
                      </div>
                    </div>
                  }
                />
              </div>
              <div className="fm-form-control-label">
                <FormControlLabel
                  value={FileAction.Destroy}
                  control={
                    <Radio checked={value === FileAction.Destroy} onChange={() => setValue(FileAction.Destroy)} />
                  }
                  label={
                    <div className="fm-radio-label">
                      <div className="fm-radio-label-header fm-main-font-color fm-line-height-fit">
                        Destroy entire drive {currentDriveName ? `‘${currentDriveName}’` : ''} to delete this{' '}
                        {subjectNoun}
                      </div>
                      <div className="fm-red-font" onClick={e => e.preventDefault()}>
                        <AlertIcon size="14px" className="fm-alert-icon-inline" />
                        Warning: This will make all files on this drive inaccessible. This action is irreversible.
                      </div>
                    </div>
                  }
                />
              </div>
            </div>
          </FormControl>
        </div>
        <div className="fm-modal-window-footer">
          <Button label="Proceed" variant="primary" onClick={() => onProceed(value)} />
          <Button label="Cancel" variant="secondary" onClick={onCancelClick} />
        </div>
      </div>
    </div>,
    modalRoot,
  )
 }
@@ -0,0 +1,6 @@
 .fm-modal-body-destroy {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 8px;
 }
@@ -0,0 +1,96 @@
 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<void>
 }
 interface ProgressDestroyModalProps {
  drive: DriveInfo
  onMinimize: () => void
 }
 export function ProgressDestroyModal({ drive, onMinimize }: ProgressDestroyModalProps): ReactElement {
  const modalRoot = document.querySelector('.fm-main') || document.body
  return createPortal(
    <div className="fm-modal-container">
      <div className="fm-modal-window">
        <div className="fm-modal-window-header fm-red-font">Destroying Drive</div>
        <div className="fm-modal-window-body">
          <div className="fm-modal-body-destroy">
            <div className="fm-emphasized-text">Drive &quot;{drive.name}&quot; is being destroyed</div>
            <div>Please wait while the operation completes...</div>
            <div style={{ marginTop: '20px', textAlign: 'center' }}>
              <div className="fm-mini-spinner" style={{ display: 'inline-block', marginRight: '10px' }} />
              <span>Destroying drive...</span>
            </div>
          </div>
        </div>
        <div className="fm-modal-window-footer">
          <Button label="Minimize" variant="secondary" onClick={onMinimize} />
        </div>
      </div>
    </div>,
    modalRoot,
  )
 }
 export function DestroyDriveModal({ drive, onCancelClick, doDestroy }: DestroyDriveModalProps): ReactElement {
  const [driveNameInput, setDriveNameInput] = useState('')
  const destroyDriveText = `DESTROY DRIVE ${drive.name}`
  const modalRoot = document.querySelector('.fm-main') || document.body
  const handleDestroy = () => {
    doDestroy()
  }
  return createPortal(
    <div className="fm-modal-container">
      <div className="fm-modal-window">
        <div className="fm-modal-window-header fm-red-font">Destroy entire drive</div>
        <div className="fm-modal-window-body">
          <div className="fm-modal-body-destroy">
            <div className="fm-emphasized-text">Destroy Drive? This Action Is Permanent</div>
            <div>All files stored only on this drive will become inaccessible.</div>
            <div>
              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.
            </div>
            <div>Confirmation:</div>
            <div>Requires typing a fixed expression to prevent accidental deletion. This action cannot be undone.</div>
            <div>
              Type: <span className="fm-emphasized-text">{destroyDriveText}</span>
            </div>
            <div className="fm-modal-window-input-container">
              <input
                type="text"
                id="drive-name"
                placeholder={destroyDriveText}
                value={driveNameInput}
                onChange={e => setDriveNameInput(e.target.value)}
              />
            </div>
          </div>
        </div>
        <div className="fm-modal-window-footer">
          <Button
            label="Destroy entire drive"
            variant="danger"
            disabled={destroyDriveText !== driveNameInput}
            onClick={handleDestroy}
          />
          <Button label="Cancel" variant="secondary" onClick={onCancelClick} />
        </div>
      </div>
    </div>,
    modalRoot,
  )
 }
@@ -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;
 }
@@ -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 (
    <div className="fm-error-modal-container">
      <div className="fm-modal-window">
        <div className="fm-error-modal-message">{label}</div>
        <div className="fm-error-modal-button-container">
          <Button variant="primary" label="OK" width={100} onClick={onClick} />
        </div>
      </div>
    </div>
  )
 }
@@ -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%;
 }
@@ -0,0 +1,155 @@
 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 } from '@ethersphere/bee-js'
 import { DriveInfo, FileInfo } from '@solarpunkltd/file-manager-lib'
 import { calculateStampCapacityMetrics } from '../../utils/bee'
 const EXPIRING_ITEMS_PAGE_SIZE = 3
 interface ExpiringNotificationModalProps {
  stamps: PostageBatch[]
  drives: DriveInfo[]
  files: FileInfo[]
  onCancelClick: () => void
  setErrorMessage?: (error: string) => void
 }
 export function ExpiringNotificationModal({
  stamps,
  drives,
  files,
  onCancelClick,
  setErrorMessage,
 }: ExpiringNotificationModalProps): ReactElement {
  const [showUpgradeDriveModal, setShowUpgradeDriveModal] = useState(false)
  const [actualStamp, setActualStamp] = useState<PostageBatch | undefined>(undefined)
  const [actualDrive, setActualDrive] = useState<DriveInfo | undefined>(undefined)
  const [currentPage, setCurrentPage] = useState(0)
  const modalRoot = document.querySelector('.fm-main') || document.body
  const sortedStamps = useMemo(() => {
    return [...stamps].sort((a, b) => {
      const daysLeftA = getDaysLeft(a.duration.toEndDate())
      const daysLeftB = getDaysLeft(b.duration.toEndDate())
      return daysLeftA - daysLeftB
    })
  }, [stamps])
  const totalPages = Math.ceil(sortedStamps.length / EXPIRING_ITEMS_PAGE_SIZE)
  const startIndex = currentPage * EXPIRING_ITEMS_PAGE_SIZE
  const paginatedStamps = sortedStamps.slice(startIndex, startIndex + EXPIRING_ITEMS_PAGE_SIZE)
  useEffect(() => {
    setCurrentPage(0)
  }, [stamps])
  if (stamps.length === 0) return <></>
  return createPortal(
    <div className="fm-modal-container">
      <div className="fm-modal-window fm-upgrade-drive-modal">
        <div className="fm-modal-window-header fm-red-font">
          <AlertIcon size="21px" /> Drives Expiring soon
        </div>
        <div>The following drives will expire soon. Extend them to keep your data accessible.</div>
        <div className="fm-modal-window-body fm-expiring-notification-modal-body">
          {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
            const filesPerDrive = files.filter(fi => fi.driveId === drive.id.toString())
            const { usedSize, stampSize } = calculateStampCapacityMetrics(stamp, filesPerDrive, drive.redundancyLevel)
            if (daysLeft < 10) {
              daysClass = 'fm-red-font'
            } else if (daysLeft < 30) {
              daysClass = 'fm-swarm-orange-font'
            }
            return (
              <div
                key={`${stamp.batchID.toString()}-${currentPage}-${index}`}
                className="fm-modal-white-section fm-space-between"
              >
                <div className="fm-expiring-notification-modal-section-left fm-space-between">
                  <DriveIcon size="20" color="rgb(237, 129, 49)" />
                  <div>
                    <div className="fm-expiring-notification-modal-section-left-header fm-emphasized-text">
                      {stamp.label} {drive.isAdmin && <Warning style={{ fontSize: '16px' }} />}
                    </div>
                    <div className="fm-expiring-notification-modal-section-left-value">
                      {usedSize} / {stampSize}
                    </div>
                  </div>
                </div>
                <div className="fm-expiring-notification-modal-section-right">
                  <div className="fm-expiring-notification-modal-section-right-header">
                    <CalendarIcon size="14" /> Expiry date: {stamp.duration.toEndDate().toLocaleDateString()}
                  </div>
                  <div className={daysClass}>{daysLeft} days left</div>
                  <div className="fm-expiring-notification-modal-section-right-button">
                    <Button
                      label="Upgrade"
                      variant="primary"
                      onClick={() => {
                        setActualStamp(stamp)
                        setActualDrive(drive)
                        setShowUpgradeDriveModal(true)
                      }}
                    />
                  </div>
                </div>
              </div>
            )
          })}
        </div>
        <div className="fm-modal-window-footer">
          <div className="fm-expiring-notification-modal-footer-one-button">
            <Button label="Cancel" variant="secondary" onClick={onCancelClick} />
          </div>
          {totalPages > 1 && (
            <div style={{ display: 'flex', gap: '8px', alignItems: 'center' }}>
              <span>
                Page {currentPage + 1} / {totalPages} · total {sortedStamps.length}
              </span>
              {currentPage > 0 && (
                <Button label="Previous" variant="secondary" onClick={() => setCurrentPage(prev => prev - 1)} />
              )}
              {currentPage + 1 < totalPages && (
                <Button label="Next" variant="primary" onClick={() => setCurrentPage(prev => prev + 1)} />
              )}
            </div>
          )}
        </div>
      </div>
      {showUpgradeDriveModal && actualStamp && actualDrive && (
        <UpgradeDriveModal
          stamp={actualStamp}
          onCancelClick={onCancelClick}
          containerColor="none"
          drive={actualDrive}
          setErrorMessage={setErrorMessage}
        />
      )}
    </div>,
    modalRoot,
  )
 }
@@ -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); }
 }
@@ -0,0 +1,567 @@
 import { ReactElement, useEffect, useLayoutEffect, useRef, useState, useContext, useMemo, useCallback } 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, getFileId } from '../../utils/common'
 import { computeContextMenuPosition } from '../../utils/ui'
 import { FileBrowserTopBar } from './FileBrowserTopBar/FileBrowserTopBar'
 import { handleDestroyAndForgetDrive } 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 { DriveInfo, FileInfo } from '@solarpunkltd/file-manager-lib'
 import { ProgressDestroyModal } from '../DestroyDriveModal/DestroyDriveModal'
 const renderDestroySpinner = (
  isDestroying: boolean,
  isProgressModalOpen: boolean,
  currentDrive: DriveInfo | undefined,
  setter: () => void,
 ) => {
  if (isProgressModalOpen && isDestroying && currentDrive) {
    return <ProgressDestroyModal drive={currentDrive} onMinimize={setter} />
  }
  return null
 }
 const showDestroyModal = (isDestroying: boolean, setter: () => void) => {
  if (!isDestroying) return null
  return (
    <div className="fm-refresh-overlay" aria-busy="true" aria-live="polite">
      <div
        className="fm-refresh-content"
        onClick={setter}
        style={{ cursor: 'pointer' }}
        title="Click to show progress modal"
      >
        <div className="fm-mini-spinner" role="status" aria-label="Destroying drive…" />
        <span className="fm-refresh-text">Destroying drive…</span>
      </div>
    </div>
  )
 }
 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<HTMLDivElement>()
  const { view, setActualItemView } = useView()
  const { beeApi } = useContext(SettingsContext)
  const { files, adminDrive, currentDrive, resync, drives, fm, showError, setShowError } = useContext(FMContext)
  const {
    uploadFiles,
    isUploading,
    uploadItems,
    isDownloading,
    downloadItems,
    trackDownload,
    conflictPortal,
    cancelOrDismissUpload,
    cancelOrDismissDownload,
    dismissAllUploads,
    dismissAllDownloads,
  } = useTransfers({ setErrorMessage })
  const { query, scope, includeActive, includeTrashed } = useSearch()
  const [safePos, setSafePos] = useState<Point>(pos)
  const [dropDir, setDropDir] = useState<Dir>(Dir.Down)
  const legacyUploadRef = useRef<HTMLInputElement | null>(null)
  const contentRef = useRef<HTMLDivElement | null>(null)
  const bodyRef = useRef<HTMLDivElement | null>(null)
  const isMountedRef = useRef(true)
  const rafIdRef = useRef<number | null>(null)
  const [showBulkDeleteModal, setShowBulkDeleteModal] = useState(false)
  const [showDestroyDriveModal, setShowDestroyDriveModal] = useState(false)
  const [isDestroying, setIsDestroying] = useState(false)
  const [isProgressModalOpen, setIsProgressModalOpen] = useState(false)
  const [confirmBulkForget, setConfirmBulkForget] = useState(false)
  const [confirmBulkRestore, setConfirmBulkRestore] = useState(false)
  const [isRefreshing, setIsRefreshing] = useState(false)
  const [pendingCancelUpload, setPendingCancelUpload] = useState<string | null>(null)
  const q = query.trim().toLowerCase()
  const isSearchMode = q.length > 0
  const getDriveName = (fi: FileInfo): string => {
    const match = drives.find(d => d.id.toString() === fi.driveId.toString())
    return match?.name ?? ''
  }
  const openTopbarMenu = (anchorEl: HTMLElement) => {
    const r = anchorEl.getBoundingClientRect()
    const bodyRect = bodyRef.current?.getBoundingClientRect()
    const clickX = Math.round(r.right - 6)
    const minY = (bodyRect?.top ?? 0) + 8
    const clickY = Math.max(Math.round(r.bottom + 6), minY)
    const fakeEvt = {
      // eslint-disable-next-line @typescript-eslint/no-empty-function
      preventDefault: () => {},
      // eslint-disable-next-line @typescript-eslint/no-empty-function
      stopPropagation: () => {},
      clientX: clickX,
      clientY: clickY,
    } as React.MouseEvent<HTMLDivElement>
    handleContextMenu(fakeEvt)
  }
  const { listToRender } = useFileFiltering({
    files,
    currentDrive: currentDrive || null,
    view,
    isSearchMode,
    query: q,
    scope,
    includeActive,
    includeTrashed,
  })
  const { sorted, sort, toggle, reset } = useSorting(listToRender, {
    persist: false,
    defaultState: { key: SortKey.Timestamp, dir: SortDir.Desc },
    getDriveName,
  })
  const sortedKey = sorted.map(f => getFileId(f)).join('|')
  // eslint-disable-next-line react-hooks/exhaustive-deps
  const stableSorted = useMemo(() => sorted, [sortedKey])
  const bulk = useBulkActions({
    listToRender,
    trackDownload,
  })
  const { isDragging, handleDragEnter, handleDragOver, handleDragLeave, handleDrop, handleOverlayDrop } =
    useDragAndDrop({
      onFilesDropped: uploadFiles,
      currentDrive: currentDrive || null,
    })
  const onFileSelected = (e: React.ChangeEvent<HTMLInputElement>) => {
    const files = e.target.files
    if (files && files.length > 0) {
      uploadFiles(files)
    }
    e.target.value = ''
  }
  const onContextUploadFile = () => {
    const el = legacyUploadRef.current
    if (!el) return
    try {
      if (typeof (el as HTMLInputElement).showPicker === 'function') {
        ;(el as HTMLInputElement).showPicker()
      } else {
        el.click()
      }
    } catch {
      el.click()
    }
    requestAnimationFrame(() => handleCloseContext())
  }
  const handlePaste = (e: React.ClipboardEvent<HTMLDivElement>) => {
    const files = extractFilesFromClipboardEvent(e)
    if (files.length === 0) return
    e.preventDefault()
    uploadFiles(files)
  }
  const handleFileBrowserContextMenu = (e: React.MouseEvent<HTMLDivElement>) => {
    const t = e.target as HTMLElement
    if (t.closest('.fm-file-item-context-menu, .fm-file-browser-context-menu')) return
    if (!e.shiftKey && t.closest('.fm-file-item-content')) return
    e.preventDefault()
    e.stopPropagation()
    handleContextMenu(e)
  }
  const handleDeleteModalProceed = async (action: FileAction) => {
    setShowBulkDeleteModal(false)
    if (action === FileAction.Trash) {
      return await bulk.bulkTrash(bulk.selectedFiles)
    }
    if (action === FileAction.Forget) {
      return setConfirmBulkForget(true)
    }
    if (action === FileAction.Destroy) {
      return setShowDestroyDriveModal(true)
    }
  }
  const handleDestroyDriveConfirm = useCallback(async () => {
    if (!currentDrive) return
    setShowDestroyDriveModal(false)
    setIsProgressModalOpen(true)
    setIsDestroying(true)
    await handleDestroyAndForgetDrive({
      beeApi,
      fm,
      drive: currentDrive,
      isDestroy: true,
      adminDrive,
      onSuccess: () => {
        setIsDestroying(false)
        setIsProgressModalOpen(false)
        setShowDestroyDriveModal(false)
      },
      onError: e => {
        setIsDestroying(false)
        setIsProgressModalOpen(false)
        setShowDestroyDriveModal(false)
        setErrorMessage?.(`Error destroying drive: ${currentDrive.name}: ${e}`)
        setShowError(true)
      },
    })
  }, [
    beeApi,
    fm,
    currentDrive,
    adminDrive,
    setErrorMessage,
    setIsProgressModalOpen,
    setShowDestroyDriveModal,
    setShowError,
  ])
  const handleUploadClose = (uuid: string) => {
    const row = uploadItems.find(i => i.uuid === uuid)
    if (row?.status === TransferStatus.Uploading) {
      setPendingCancelUpload(uuid)
    } else {
      cancelOrDismissUpload(uuid)
    }
  }
  const updateContextMenuPosition = () => {
    const menu = contextRef.current
    const body = bodyRef.current
    if (!menu) return
    const rect = menu.getBoundingClientRect()
    const containerRect = body?.getBoundingClientRect() ?? null
    const { safePos: sp, dropDir: dd } = computeContextMenuPosition({
      clickPos: pos,
      menuRect: rect,
      viewport: { w: window.innerWidth, h: window.innerHeight },
      margin: 8,
      containerRect,
    })
    const topLeft = containerRect
      ? { x: Math.round(sp.x - containerRect.left), y: Math.round(sp.y - containerRect.top + 2) }
      : sp
    setSafePos(topLeft)
    setDropDir(dd)
    rafIdRef.current = null
  }
  useLayoutEffect(() => {
    if (!showContext) return
    if (rafIdRef.current) {
      cancelAnimationFrame(rafIdRef.current)
    }
    rafIdRef.current = requestAnimationFrame(updateContextMenuPosition)
    return () => {
      if (rafIdRef.current) {
        cancelAnimationFrame(rafIdRef.current)
        rafIdRef.current = null
      }
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [showContext, pos, contextRef])
  useEffect(() => {
    let title = currentDrive?.name || ''
    if (isSearchMode) {
      title = 'Search results'
      if (scope === 'selected' && currentDrive?.name) {
        title += ` — ${currentDrive.name}`
      }
    }
    setActualItemView?.(title)
  }, [isSearchMode, scope, currentDrive, setActualItemView])
  useEffect(() => {
    if (!isSearchMode) {
      bulk.clearAll()
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [isSearchMode])
  useEffect(() => {
    return () => {
      isMountedRef.current = false
      if (rafIdRef.current) {
        cancelAnimationFrame(rafIdRef.current)
      }
    }
  }, [])
  const doRefresh = async () => {
    handleCloseContext()
    if (isRefreshing) return
    setIsRefreshing(true)
    try {
      await resync()
    } finally {
      safeSetState(isMountedRef, setIsRefreshing)(false)
    }
  }
  const showDeleteModal = showBulkDeleteModal && bulk.selectedFiles.length > 0 && view === ViewType.File
  const showDragOverlay = isDragging && Boolean(currentDrive)
  const fileCountText = bulk.selectedFiles.length === 1 ? 'file' : 'files'
  // Memoize onBulk object to prevent FileBrowserContent rerenders
  const onBulk = useMemo(
    () => ({
      download: () => bulk.bulkDownload(bulk.selectedFiles),
      restore: () => setConfirmBulkRestore(true),
      forget: () => bulk.bulkForget(bulk.selectedFiles),
      destroy: () => setShowDestroyDriveModal(true),
      delete: () => setShowBulkDeleteModal(true),
    }),
    [bulk],
  )
  return (
    <>
      {conflictPortal}
      <input type="file" ref={legacyUploadRef} style={{ display: 'none' }} onChange={onFileSelected} multiple />
      <input type="file" ref={bulk.fileInputRef} style={{ display: 'none' }} onChange={onFileSelected} multiple />
      <div className="fm-file-browser-container" data-search-mode={isSearchMode ? 'true' : 'false'}>
        <FileBrowserTopBar onOpenMenu={openTopbarMenu} canOpen={!isSearchMode && Boolean(currentDrive)} />
        <div
          className="fm-file-browser-content"
          data-search-mode={isSearchMode ? 'true' : 'false'}
          ref={contentRef}
          onDragEnter={handleDragEnter}
          onDragOver={handleDragOver}
          onDragLeave={handleDragLeave}
          onDrop={handleDrop}
          onPaste={handlePaste}
          onContextMenu={handleFileBrowserContextMenu}
        >
          <FileBrowserHeader
            key={isSearchMode ? 'hdr-search' : 'hdr-normal'}
            isSearchMode={isSearchMode}
            bulk={bulk}
            sortKey={sort.key}
            sortDir={sort.dir}
            onSortName={() => toggle(SortKey.Name)}
            onSortSize={() => toggle(SortKey.Size)}
            onSortDate={() => toggle(SortKey.Timestamp)}
            onSortDrive={() => toggle(SortKey.Drive)}
            onClearSort={reset}
          />
          <div
            className="fm-file-browser-content-body"
            ref={bodyRef}
            onMouseDown={e => {
              if (e.button !== 0) return
              handleCloseContext()
            }}
          >
            <FileBrowserContent
              key={isSearchMode ? `content-search` : `content-${currentDrive?.id.toString() ?? 'none'}`}
              listToRender={stableSorted}
              drives={drives}
              currentDrive={currentDrive || null}
              view={view}
              isSearchMode={isSearchMode}
              trackDownload={trackDownload}
              selectedIds={bulk.selectedIds}
              onToggleSelected={bulk.toggleOne}
              bulkSelectedCount={bulk.selectedCount}
              onBulk={onBulk}
              setErrorMessage={setErrorMessage}
            />
            {showError && (
              <ErrorModal
                label={errorMessage || 'An error occurred'}
                onClick={() => {
                  setShowError(false)
                  setErrorMessage?.('')
                  return
                }}
              />
            )}
            {showContext && (
              <div
                ref={contextRef}
                className="fm-file-browser-context-menu fm-context-menu"
                style={{ top: safePos.y, left: safePos.x }}
                data-drop={dropDir}
                onMouseDown={e => e.stopPropagation()}
                onClick={e => e.stopPropagation()}
              >
                <FileBrowserContextMenu
                  drives={drives}
                  view={view}
                  selectedFilesCount={bulk.selectedFiles.length}
                  onRefresh={doRefresh}
                  enableRefresh={Boolean(fm?.adminStamp)}
                  onUploadFile={onContextUploadFile}
                  onBulkDownload={() => bulk.bulkDownload(bulk.selectedFiles)}
                  onBulkRestore={() => setConfirmBulkRestore(true)}
                  onBulkDelete={() => setShowBulkDeleteModal(true)}
                  onBulkDestroy={() => setShowDestroyDriveModal(true)}
                  onBulkForget={() => bulk.bulkForget(bulk.selectedFiles)}
                />
              </div>
            )}
          </div>
          {showDragOverlay && (
            <div
              className="fm-drag-overlay"
              onDragOver={e => {
                e.preventDefault()
                e.dataTransfer.dropEffect = 'copy'
              }}
              onDrop={handleOverlayDrop}
            >
              <div className="fm-drag-text">Drop file(s) to upload</div>
            </div>
          )}
          <FileBrowserModals
            showDeleteModal={showDeleteModal}
            selectedFiles={bulk.selectedFiles}
            fileCountText={fileCountText}
            currentDrive={currentDrive || null}
            confirmBulkForget={confirmBulkForget}
            confirmBulkRestore={confirmBulkRestore}
            showDestroyDriveModal={showDestroyDriveModal}
            pendingCancelUpload={pendingCancelUpload}
            onDeleteCancel={() => setShowBulkDeleteModal(false)}
            onDeleteProceed={handleDeleteModalProceed}
            onForgetConfirm={async () => {
              await bulk.bulkForget(bulk.selectedFiles)
              setConfirmBulkForget(false)
            }}
            onForgetCancel={() => setConfirmBulkForget(false)}
            onRestoreConfirm={async () => {
              await bulk.bulkRestore(bulk.selectedFiles)
              setConfirmBulkRestore(false)
            }}
            onRestoreCancel={() => setConfirmBulkRestore(false)}
            onDestroyCancel={() => setShowDestroyDriveModal(false)}
            onDestroyConfirm={handleDestroyDriveConfirm}
            onCancelUploadConfirm={() => {
              if (pendingCancelUpload) {
                cancelOrDismissUpload(pendingCancelUpload)
                setPendingCancelUpload(null)
              }
            }}
            onCancelUploadCancel={() => setPendingCancelUpload(null)}
          />
          {isRefreshing && (
            <div className="fm-refresh-overlay" aria-busy="true" aria-live="polite">
              <div className="fm-refresh-content">
                <div className="fm-mini-spinner" role="status" aria-label="Syncing…" />
                <span className="fm-refresh-text">Syncing latest files…</span>
              </div>
            </div>
          )}
          {showDestroyModal(isDestroying, () => setIsProgressModalOpen(true))}
          {renderDestroySpinner(isDestroying, isProgressModalOpen, currentDrive, () => setIsProgressModalOpen(false))}
        </div>
        <div className="fm-file-browser-footer">
          <FileProgressNotification
            label="Uploading files"
            type={FileTransferType.Upload}
            open={isUploading}
            items={uploadItems}
            onRowClose={handleUploadClose}
            onCloseAll={() => dismissAllUploads()}
          />
          <FileProgressNotification
            label="Downloading files"
            type={FileTransferType.Download}
            open={isDownloading}
            items={downloadItems}
            onRowClose={name => cancelOrDismissDownload(name)}
            onCloseAll={() => dismissAllDownloads()}
          />
          <NotificationBar setErrorMessage={setErrorMessage} />
        </div>
      </div>
    </>
  )
 }
@@ -0,0 +1,131 @@
 import { ReactElement, useCallback, memo } 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<string>
  onToggleSelected?: (fi: FileInfo, checked: boolean) => void
  bulkSelectedCount?: number
  onBulk: {
    download?: () => void
    restore?: () => void
    forget?: () => void
    destroy?: () => void
    delete?: () => void
  }
  setErrorMessage?: (error: string) => void
 }
 function FileBrowserContentInner({
  listToRender,
  drives,
  currentDrive,
  view,
  isSearchMode,
  trackDownload,
  selectedIds,
  onToggleSelected,
  bulkSelectedCount,
  onBulk,
  setErrorMessage,
 }: FileBrowserContentProps): ReactElement {
  const renderEmptyState = useCallback((): ReactElement => {
    if (drives.length === 0) {
      return <div className="fm-drop-hint">Create a drive to start using the file manager</div>
    }
    if (!currentDrive) {
      return <div className="fm-drop-hint">Select a drive to upload or view its files</div>
    }
    if (view === ViewType.Trash) {
      return (
        <div className="fm-drop-hint">
          Files from &quot;{currentDrive?.name}&quot; that are trashed can be viewed here
        </div>
      )
    }
    return <div className="fm-drop-hint">Drag &amp; drop files here into &quot;{currentDrive?.name}&quot;</div>
  }, [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 (
            <FileItem
              key={key}
              fileInfo={fi}
              onDownload={trackDownload}
              showDriveColumn={showDriveColumn}
              driveName={driveName}
              selected={Boolean(selectedIds?.has(getFileId(fi)))}
              onToggleSelected={onToggleSelected}
              bulkSelectedCount={bulkSelectedCount}
              onBulk={onBulk}
              setErrorMessage={setErrorMessage}
            />
          )
        })
    },
    [trackDownload, drives, selectedIds, onToggleSelected, bulkSelectedCount, onBulk, setErrorMessage],
  )
  if (drives.length === 0) {
    return renderEmptyState()
  }
  if (!isSearchMode) {
    if (!currentDrive) {
      return <div className="fm-drop-hint">Select a drive to upload or view its files</div>
    }
    if (view === ViewType.Expired) {
      return (
        <div className="fm-drop-hint">
          The stamp for drive &quot;{currentDrive?.name}&quot; is expired, no files can be found
        </div>
      )
    }
    if (listToRender.length === 0) {
      if (view === ViewType.Trash) {
        return (
          <div className="fm-drop-hint">
            Files from &quot;{currentDrive?.name}&quot; that are trashed can be viewed here
          </div>
        )
      }
      return <div className="fm-drop-hint">Drag &amp; drop files here into &quot;{currentDrive?.name}&quot;</div>
    }
    return <>{renderFileList(listToRender)}</>
  }
  if (listToRender.length === 0) {
    return <div className="fm-drop-hint">No results found.</div>
  }
  return <>{renderFileList(listToRender, true)}</>
 }
 // Memoize to prevent rerenders when parent FileBrowser rerenders due to upload/download progress
 export const FileBrowserContent = memo(FileBrowserContentInner)
@@ -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<typeof useBulkActions>
  sortKey: SortKey
  sortDir: SortDir
  onSortName: () => void
  onSortSize: () => void
  onSortDate: () => void
  onSortDrive: () => void
  onClearSort: () => void
 }
 enum AriaSortValue {
  Ascending = 'ascending',
  Descending = 'descending',
  None = 'none',
 }
 const Arrow = ({ active, dir }: { active: boolean; dir: SortDir }) => {
  let title: string | undefined
  if (active) {
    const sortValue = dir === SortDir.Asc ? AriaSortValue.Ascending : AriaSortValue.Descending
    title = capitalizeFirstLetter(sortValue)
  } else {
    title = undefined
  }
  return (
    <div
      className={'fm-file-browser-content-header-item-icon' + (active ? '' : ' is-inactive')}
      aria-hidden={title ? 'false' : 'true'}
      aria-label={title}
      title={title}
    >
      <DownIcon size="16px" />
    </div>
  )
 }
 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 (
    <div className="fm-header-cell" role="columnheader" aria-sort={ariaSort} data-testid={testId}>
      <button
        type="button"
        className="fm-header-button"
        onClick={onToggle}
        data-dir={isActive ? dir : undefined}
        aria-label={
          isActive
            ? `Sort by ${label.toLowerCase()}, currently ${
                dir === SortDir.Asc ? AriaSortValue.Ascending : AriaSortValue.Descending
              }`
            : `Sort by ${label.toLowerCase()}`
        }
        title={
          isActive
            ? `Currently ${capitalizeFirstLetter(
                dir === SortDir.Asc ? AriaSortValue.Ascending : AriaSortValue.Descending,
              )}`
            : 'Click to sort'
        }
      >
        <span>{label}</span>
        <Arrow active={isActive} dir={dir} />
      </button>
      {isActive && (
        <button
          type="button"
          className="fm-sort-clear"
          onClick={e => {
            e.preventDefault()
            e.stopPropagation()
            onClear()
          }}
          aria-label="Reset sorting to default"
          title="Clear sorting"
        >
          ×
        </button>
      )}
    </div>
  )
 }
 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 (
    <div className="fm-file-browser-content-header" role="row">
      <input
        type="checkbox"
        checked={bulk.allChecked}
        ref={el => {
          if (el) el.indeterminate = bulk.someChecked
        }}
        onChange={e => (e.target.checked ? bulk.selectAll() : bulk.clearAll())}
      />
      <div className="fm-file-browser-content-header-item fm-name">
        <HeaderCell
          label="Name"
          isActive={sortKey === SortKey.Name}
          dir={sortDir}
          onToggle={onSortName}
          onClear={onClearSort}
          ariaSort={ariaSort(SortKey.Name)}
          data-testid="hdr-name"
        />
      </div>
      {isSearchMode && (
        <div className="fm-file-browser-content-header-item fm-drive">
          <HeaderCell
            label="Drive"
            isActive={sortKey === SortKey.Drive}
            dir={sortDir}
            onToggle={onSortDrive}
            onClear={onClearSort}
            ariaSort={ariaSort(SortKey.Drive)}
            data-testid="hdr-drive"
          />
        </div>
      )}
      <div className="fm-file-browser-content-header-item fm-size">
        <HeaderCell
          label="Size"
          isActive={sortKey === SortKey.Size}
          dir={sortDir}
          onToggle={onSortSize}
          onClear={onClearSort}
          ariaSort={ariaSort(SortKey.Size)}
          data-testid="hdr-size"
        />
      </div>
      <div className="fm-file-browser-content-header-item fm-date-mod">
        <HeaderCell
          label="Date mod."
          isActive={sortKey === SortKey.Timestamp}
          dir={sortDir}
          onToggle={onSortDate}
          onClear={onClearSort}
          ariaSort={ariaSort(SortKey.Timestamp)}
          data-testid="hdr-date"
        />
      </div>
    </div>
  )
 }
@@ -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 (
      <ContextMenu>
        <div className="fm-context-item" onClick={onRefresh}>
          Refresh
        </div>
      </ContextMenu>
    )
  }
  if (selectedFilesCount > 1) {
    return (
      <ContextMenu>
        <div className="fm-context-item" onClick={onBulkDownload}>
          Download
        </div>
        {view === ViewType.File ? (
          <div className="fm-context-item red" onClick={onBulkDelete}>
            Delete…
          </div>
        ) : (
          <>
            <div className="fm-context-item" onClick={onBulkRestore}>
              Restore
            </div>
            <div className="fm-context-item red" onClick={onBulkDestroy}>
              Destroy
            </div>
            <div className="fm-context-item red" onClick={onBulkForget}>
              Forget permanently
            </div>
          </>
        )}
      </ContextMenu>
    )
  }
  if (view === ViewType.Trash) {
    return (
      <ContextMenu>
        <div className="fm-context-item" onClick={onRefresh}>
          Refresh
        </div>
      </ContextMenu>
    )
  }
  return (
    <ContextMenu>
      <div className="fm-context-item" style={{ display: 'none' }}>
        New folder
      </div>
      <div className="fm-context-item" onClick={onUploadFile}>
        Upload file(s)
      </div>
      <div className="fm-context-item" style={{ display: 'none' }}>
        Upload folder
      </div>
      <div className="fm-context-item-border" />
      <div
        className="fm-context-item"
        role="menuitem"
        aria-disabled="true"
        tabIndex={-1}
        onMouseDown={e => e.stopPropagation()}
        onClick={e => {
          e.preventDefault()
          e.stopPropagation()
        }}
      >
        <span>
          <Tooltip label="Tip: Use ⌘V / Ctrl+V or Browser → Edit → Paste." iconSize="14px" gapPx={6} disableMargin>
            Paste
          </Tooltip>
        </span>
      </div>
      <div className="fm-context-item-border" />
      <div className="fm-context-item" onClick={onRefresh}>
        Refresh
      </div>
    </ContextMenu>
  )
 }
@@ -0,0 +1,128 @@
 import { ReactElement } from 'react'
 import type { FileInfo, DriveInfo } from '@solarpunkltd/file-manager-lib'
 import { ConfirmModal } from '../ConfirmModal/ConfirmModal'
 import { Tooltip } from '../Tooltip/Tooltip'
 import { DeleteFileModal } from '../DeleteFileModal/DeleteFileModal'
 import { DestroyDriveModal } from '../DestroyDriveModal/DestroyDriveModal'
 import { FileAction } from '../../constants/transfers'
 import { TOOLTIPS } from '../../constants/tooltips'
 interface FileBrowserModalsProps {
  showDeleteModal: boolean
  selectedFiles: FileInfo[]
  fileCountText: string
  currentDrive: DriveInfo | null
  confirmBulkForget: boolean
  confirmBulkRestore: boolean
  showDestroyDriveModal: boolean
  pendingCancelUpload: string | null
  onDeleteCancel: () => void
  onDeleteProceed: (action: FileAction) => void
  onForgetConfirm: () => Promise<void>
  onForgetCancel: () => void
  onRestoreConfirm: () => Promise<void>
  onRestoreCancel: () => void
  onDestroyCancel: () => void
  onDestroyConfirm: () => Promise<void>
  onCancelUploadConfirm: () => void
  onCancelUploadCancel: () => void
 }
 export function FileBrowserModals({
  showDeleteModal,
  selectedFiles,
  fileCountText,
  currentDrive,
  confirmBulkForget,
  confirmBulkRestore,
  showDestroyDriveModal,
  pendingCancelUpload,
  onDeleteCancel,
  onDeleteProceed,
  onForgetConfirm,
  onForgetCancel,
  onRestoreConfirm,
  onRestoreCancel,
  onDestroyCancel,
  onDestroyConfirm,
  onCancelUploadConfirm,
  onCancelUploadCancel,
 }: FileBrowserModalsProps): ReactElement {
  return (
    <>
      {showDeleteModal && (
        <DeleteFileModal
          names={selectedFiles.map(f => f.name)}
          currentDriveName={currentDrive?.name}
          onCancelClick={onDeleteCancel}
          onProceed={onDeleteProceed}
        />
      )}
      {confirmBulkForget && (
        <ConfirmModal
          title={
            <>
              Forget permanently?
              <Tooltip label={TOOLTIPS.FILE_OPERATION_FORGET} />
            </>
          }
          message={
            <>
              This removes <b>{selectedFiles.length}</b> {fileCountText} from your view.
              <br />
              The data remains on Swarm until the drive expires.
            </>
          }
          confirmLabel="Forget"
          cancelLabel="Cancel"
          onConfirm={onForgetConfirm}
          onCancel={onForgetCancel}
        />
      )}
      {confirmBulkRestore && (
        <ConfirmModal
          title={
            <>
              Restore from trash?
              <Tooltip label={TOOLTIPS.FILE_OPERATION_RESTORE_FROM_TRASH} />
            </>
          }
          message={
            <>
              This will restore <b>{selectedFiles.length}</b> {fileCountText} from trash.
            </>
          }
          confirmLabel="Restore"
          cancelLabel="Cancel"
          onConfirm={onRestoreConfirm}
          onCancel={onRestoreCancel}
        />
      )}
      {showDestroyDriveModal && currentDrive && (
        <DestroyDriveModal drive={currentDrive} onCancelClick={onDestroyCancel} doDestroy={onDestroyConfirm} />
      )}
      {pendingCancelUpload && (
        <ConfirmModal
          title="Cancel upload?"
          message={
            <>
              Stopping now will cancel the network request. Data already transmitted cannot be reverted.{' '}
              <b>We will try our best to clean up the transmitted data.</b>
              <br />
              To remove any (remaining) cancelled items from your browser view later, use{' '}
              <i>Right-click → Delete → Forget</i>.
            </>
          }
          confirmLabel="Cancel upload"
          cancelLabel="Keep uploading"
          onConfirm={onCancelUploadConfirm}
          onCancel={onCancelUploadCancel}
        />
      )}
    </>
  )
 }
@@ -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;
 }
@@ -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 (
    <div className="fm-file-browser-top-bar">
      <div className="fm-file-browser-top-bar__title">
        {actualItemView}
        {viewText}
      </div>
      {canOpen && (
        <button
          type="button"
          className="fm-topbar-kebab"
          aria-haspopup="menu"
          aria-label="More actions"
          onClick={e => onOpenMenu?.(e.currentTarget)}
        >
          ⋯
        </button>
      )}
    </div>
  )
 }
@@ -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;
 }
@@ -0,0 +1,665 @@
 import { ReactElement, useContext, useLayoutEffect, useMemo, useState, useRef, useEffect, useCallback } from 'react'
 import { PostageBatch } from '@ethersphere/bee-js'
 import { DriveInfo, FileInfo } from '@solarpunkltd/file-manager-lib'
 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 { 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 { Context as FMContext } from '../../../../../providers/FileManager'
 import { DestroyDriveModal } from '../../DestroyDriveModal/DestroyDriveModal'
 import { ConfirmModal } from '../../ConfirmModal/ConfirmModal'
 import { Tooltip } from '../../Tooltip/Tooltip'
 import { Dir, formatBytes, isTrashed, safeSetState, truncateNameMiddle } from '../../../utils/common'
 import { FileAction } from '../../../constants/transfers'
 import { TOOLTIPS } from '../../../constants/tooltips'
 import { startDownloadingQueue, createDownloadAbort } from '../../../utils/download'
 import { computeContextMenuPosition } from '../../../utils/ui'
 import { getUsableStamps, handleDestroyAndForgetDrive, verifyDriveSpace } from '../../../utils/bee'
 import { guessMime } from '../../../utils/view'
 import { performFileOperation, FileOperation } from '../../../utils/fileOperations'
 import { uuidV4 } from '../../../../../utils'
 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<HTMLDivElement>()
  const { fm, adminDrive, currentDrive, files, drives, setShowError, refreshStamp } = useContext(FMContext)
  const { beeApi } = useContext(SettingsContext)
  const { view } = useView()
  const [driveStamp, setDriveStamp] = useState<PostageBatch | undefined>(undefined)
  const [safePos, setSafePos] = useState(pos)
  const [dropDir, setDropDir] = useState<Dir>(Dir.Down)
  const [showGetInfoModal, setShowGetInfoModal] = useState(false)
  const [infoGroups, setInfoGroups] = useState<FilePropertyGroup[] | null>(null)
  const [showVersionHistory, setShowVersionHistory] = useState(false)
  const [showDeleteModal, setShowDeleteModal] = useState(false)
  const [showRenameModal, setShowRenameModal] = useState(false)
  const [showDestroyDriveModal, setShowDestroyDriveModal] = useState(false)
  const [destroyDrive, setDestroyDrive] = useState<DriveInfo | null>(null)
  const [confirmForget, setConfirmForget] = useState(false)
  const [confirmRestore, setConfirmRestore] = useState(false)
  const isMountedRef = useRef(true)
  const rafIdRef = useRef<number | null>(null)
  const size = formatBytes(fileInfo.customMetadata?.size)
  const dateMod = new Date(fileInfo.timestamp || 0).toLocaleDateString()
  const isTrashedFile = isTrashed(fileInfo)
  const statusLabel = isTrashedFile ? 'Trash' : 'Active'
  const latestFileInfo = useMemo(() => {
    return files.find(f => f.topic.toString() === fileInfo.topic.toString()) ?? fileInfo
  }, [files, fileInfo])
  useEffect(() => {
    isMountedRef.current = true
    const getStamps = async () => {
      const stamps = await getUsableStamps(beeApi)
      const driveStamp = stamps.find(s =>
        drives.some(d => d.batchId.toString() === s.batchID.toString() && d.id === fileInfo.driveId),
      )
      safeSetState(isMountedRef, setDriveStamp)(driveStamp)
    }
    getStamps()
    return () => {
      isMountedRef.current = false
      if (rafIdRef.current !== null) {
        cancelAnimationFrame(rafIdRef.current)
      }
    }
  }, [beeApi, drives, fileInfo.driveId])
  const openGetInfo = useCallback(async () => {
    if (!fm || !isMountedRef.current) return
    const groups = await buildGetInfoGroups(fm, fileInfo, driveName, driveStamp)
    setInfoGroups(groups)
    setShowGetInfoModal(true)
  }, [fm, fileInfo, driveName, driveStamp])
  const takenNames = useMemo(() => {
    if (!currentDrive || !files) return new Set<string>()
    const wanted = currentDrive.batchId.toString()
    const sameDrive = files.filter(fi => fi.batchId.toString() === wanted)
    const out = new Set<string>()
    sameDrive.forEach(fi => {
      if (fi.topic.toString() !== fileInfo.topic.toString()) out.add(fi.name)
    })
    return out
  }, [files, currentDrive, fileInfo.topic])
  const handleItemContextMenu = (e: React.MouseEvent<HTMLDivElement>) => {
    if (e.shiftKey) return
    handleContextMenu(e)
  }
  // TODO: handleOpen shall only be available for images, videos etc... -> do not download 10GB into memory
  const handleDownload = useCallback(
    async (isNewWindow?: boolean) => {
      if (!fm || !beeApi) return
      handleCloseContext()
      const rawSize = latestFileInfo.customMetadata?.size
      const expectedSize = rawSize ? Number(rawSize) : undefined
      createDownloadAbort(latestFileInfo.name)
      await startDownloadingQueue(
        fm,
        [latestFileInfo],
        [
          onDownload({
            uuid: uuidV4(),
            name: latestFileInfo.name,
            size: formatBytes(rawSize),
            expectedSize,
            driveName,
          }),
        ],
        isNewWindow,
      )
    },
    [handleCloseContext, fm, beeApi, latestFileInfo, onDownload, driveName],
  )
  const handleFileAction = useCallback(
    async (operation: FileOperation) => {
      if (!fm || !driveStamp || !currentDrive) return
      await performFileOperation({
        fm,
        file: latestFileInfo,
        redundancyLevel: currentDrive.redundancyLevel,
        driveId: currentDrive.id.toString(),
        stamp: driveStamp,
        adminStamp: fm.adminStamp,
        adminRedundancy: adminDrive?.redundancyLevel,
        operation,
        onError: err => {
          setErrorMessage?.(err)
          setShowError(true)
        },
        onSuccess: () => {
          const stampToRefresh = operation === FileOperation.Forget ? fm.adminStamp : driveStamp
          if (stampToRefresh) {
            refreshStamp(stampToRefresh.batchID.toString())
          }
        },
      })
    },
    [fm, driveStamp, adminDrive, currentDrive, latestFileInfo, refreshStamp, setErrorMessage, setShowError],
  )
  const showDestroyDrive = useCallback(() => {
    setDestroyDrive(currentDrive || null)
    setShowDestroyDriveModal(true)
  }, [currentDrive])
  const doRename = useCallback(
    async (newName: string) => {
      if (!fm || !driveStamp || !currentDrive) {
        setErrorMessage?.('Invalid FM or Current Drive')
        setShowError(true)
        return
      }
      if (takenNames.has(newName)) throw new Error('name-taken')
      try {
        verifyDriveSpace({
          fm,
          redundancyLevel: currentDrive.redundancyLevel,
          stamp: driveStamp,
          useInfoSize: true,
          driveId: currentDrive.id.toString(),
          cb: err => {
            throw new Error(err)
          },
        })
        await fm.upload(
          currentDrive,
          {
            name: newName,
            topic: latestFileInfo.topic,
            file: {
              reference: latestFileInfo.file.reference,
              historyRef: latestFileInfo.file.historyRef,
            },
            customMetadata: latestFileInfo.customMetadata,
            files: [],
          },
          {
            actHistoryAddress: latestFileInfo.file.historyRef,
          },
        )
        refreshStamp(driveStamp.batchID.toString())
      } catch (e: unknown) {
        setErrorMessage?.(`Error renaming file ${latestFileInfo.name}`)
        setShowError(true)
      }
    },
    [fm, driveStamp, currentDrive, latestFileInfo, takenNames, refreshStamp, setErrorMessage, setShowError],
  )
  const MenuItem = ({
    disabled,
    danger,
    onClick,
    children,
  }: {
    disabled?: boolean
    danger?: boolean
    onClick?: () => void
    children: React.ReactNode
  }) => (
    <div
      className={`fm-context-item${danger ? ' red' : ''}`}
      aria-disabled={disabled ? 'true' : 'false'}
      style={disabled ? { opacity: 0.5, pointerEvents: 'none' } : undefined}
      onClick={disabled ? undefined : onClick}
    >
      {children}
    </div>
  )
  const isBulk = (bulkSelectedCount ?? 0) > 1
  const renderContextMenuItems = useCallback(() => {
    const viewItem = (
      <MenuItem disabled={isBulk} onClick={() => handleDownload(true)}>
        View / Open
      </MenuItem>
    )
    const downloadItem = isBulk ? (
      <MenuItem onClick={onBulk.download}>Download</MenuItem>
    ) : (
      <MenuItem onClick={() => handleDownload(false)}>Download</MenuItem>
    )
    const getInfoItem = (
      <MenuItem
        disabled={isBulk}
        onClick={() => {
          handleCloseContext()
          openGetInfo()
        }}
      >
        Get info
      </MenuItem>
    )
    if (view === ViewType.File) {
      return (
        <>
          {viewItem}
          {downloadItem}
          <MenuItem
            disabled={isBulk}
            onClick={() => {
              handleCloseContext()
              setShowRenameModal(true)
            }}
          >
            Rename
          </MenuItem>
          <div className="fm-context-item-border" />
          <MenuItem
            disabled={isBulk}
            onClick={() => {
              handleCloseContext()
              setShowVersionHistory(true)
            }}
          >
            Version history
          </MenuItem>
          <MenuItem
            danger
            onClick={() => {
              handleCloseContext()
              if (isBulk) onBulk.delete?.()
              else setShowDeleteModal(true)
            }}
          >
            Delete
          </MenuItem>
          <div className="fm-context-item-border" />
          {getInfoItem}
        </>
      )
    }
    return (
      <>
        {viewItem}
        {downloadItem}
        <div className="fm-context-item-border" />
        {isBulk ? (
          <>
            <MenuItem danger onClick={onBulk.restore}>
              Restore
            </MenuItem>
            <MenuItem danger onClick={onBulk.destroy}>
              Destroy
            </MenuItem>
            <MenuItem danger onClick={onBulk.forget}>
              Forget permanently
            </MenuItem>
          </>
        ) : (
          <>
            <MenuItem
              danger
              onClick={() => {
                handleCloseContext()
                setConfirmRestore(true)
              }}
            >
              Restore
            </MenuItem>
            <MenuItem
              danger
              onClick={() => {
                handleCloseContext()
                // TODO: isn't parentDrive === currentDrive?
                const parentDrive = drives.find(d => d.id.toString() === fileInfo.driveId.toString())
                if (parentDrive) {
                  setDestroyDrive(parentDrive)
                  setShowDestroyDriveModal(true)
                } else if (currentDrive) {
                  setDestroyDrive(currentDrive)
                  setShowDestroyDriveModal(true)
                } else {
                  setErrorMessage?.('Unable to resolve drive for this file.')
                  setShowError(true)
                }
              }}
            >
              Destroy
            </MenuItem>
            <MenuItem
              danger
              onClick={() => {
                handleCloseContext()
                setConfirmForget(true)
              }}
            >
              Forget permanently
            </MenuItem>
          </>
        )}
        <div className="fm-context-item-border" />
        {getInfoItem}
      </>
    )
  }, [
    isBulk,
    view,
    handleDownload,
    handleCloseContext,
    openGetInfo,
    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 <div className="fm-file-item-content">Error</div>
  }
  const { mime } = guessMime(fileInfo.name, fileInfo.customMetadata)
  const mimeType = mime.split('/')[0]?.toLowerCase() || 'file'
  return (
    <div className="fm-file-item-content" onContextMenu={handleItemContextMenu} onClick={handleCloseContext}>
      <div className="fm-file-item-content-item fm-checkbox">
        <input
          type="checkbox"
          checked={selected}
          onChange={e => onToggleSelected?.(fileInfo, e.target.checked)}
          onClick={e => e.stopPropagation()}
        />
      </div>
      <div className="fm-file-item-content-item fm-name" onDoubleClick={() => handleDownload(true)}>
        <GetIconElement icon={mimeType} />
        {truncateNameMiddle(fileInfo.name)}
      </div>
      {showDriveColumn && (
        <div className="fm-file-item-content-item fm-drive">
          <span className="fm-drive-name">{driveName}</span>
          <span className={`fm-pill ${isTrashedFile ? 'fm-pill--trash' : 'fm-pill--active'}`} title={statusLabel}>
            {statusLabel}
          </span>
        </div>
      )}
      <div className="fm-file-item-content-item fm-size">{size}</div>
      <div className="fm-file-item-content-item fm-date-mod">{dateMod}</div>
      {showContext && (
        <div
          ref={contextRef}
          className="fm-file-item-context-menu"
          style={{ top: safePos.y, left: safePos.x }}
          data-drop={dropDir}
          onMouseDown={e => e.stopPropagation()}
          onClick={e => e.stopPropagation()}
        >
          <ContextMenu>{renderContextMenuItems()}</ContextMenu>
        </div>
      )}
      {showGetInfoModal && infoGroups && (
        <GetInfoModal
          name={fileInfo.name}
          properties={infoGroups}
          onCancelClick={() => {
            setShowGetInfoModal(false)
          }}
        />
      )}
      {showVersionHistory && (
        <VersionHistoryModal
          fileInfo={latestFileInfo}
          onCancelClick={() => {
            setShowVersionHistory(false)
          }}
          onDownload={onDownload}
        />
      )}
      {showDeleteModal && (
        <DeleteFileModal
          name={fileInfo.name}
          currentDriveName={currentDrive.name}
          onCancelClick={() => {
            setShowDeleteModal(false)
          }}
          onProceed={action => {
            setShowDeleteModal(false)
            switch (action) {
              case FileAction.Trash:
                handleFileAction(FileOperation.Trash)
                break
              case FileAction.Forget:
                setConfirmForget(true)
                break
              case FileAction.Destroy:
                showDestroyDrive()
                break
              default:
                break
            }
          }}
        />
      )}
      {showRenameModal && (
        <RenameFileModal
          currentName={fileInfo.name}
          takenNames={(() => {
            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 && (
        <ConfirmModal
          title={
            <>
              Forget permanently?
              <Tooltip label={TOOLTIPS.FILE_OPERATION_FORGET} />
            </>
          }
          message={
            <>
              This removes <b title={fileInfo.name}>{fileInfo.name}</b> from your view.
              <br />
              The data remains on Swarm until the drive expires.
            </>
          }
          confirmLabel="Forget"
          cancelLabel="Cancel"
          onConfirm={async () => {
            await handleFileAction(FileOperation.Forget)
            safeSetState(isMountedRef, setConfirmForget)(false)
          }}
          onCancel={() => {
            setConfirmForget(false)
          }}
        />
      )}
      {confirmRestore && (
        <ConfirmModal
          title={
            <>
              Restore from trash?
              <Tooltip label={TOOLTIPS.FILE_OPERATION_RESTORE_FROM_TRASH} />
            </>
          }
          message={
            <>
              This will restore <b title={fileInfo.name}>{fileInfo.name}</b> from trash.
            </>
          }
          confirmLabel="Restore"
          cancelLabel="Cancel"
          onConfirm={async () => {
            await handleFileAction(FileOperation.Recover)
            safeSetState(isMountedRef, setConfirmRestore)(false)
          }}
          onCancel={() => {
            setConfirmRestore(false)
          }}
        />
      )}
      {showDestroyDriveModal && destroyDrive && (
        <DestroyDriveModal
          drive={destroyDrive}
          onCancelClick={() => {
            setShowDestroyDriveModal(false)
            setDestroyDrive(null)
          }}
          doDestroy={async () => {
            setShowDestroyDriveModal(false)
            await handleDestroyAndForgetDrive({
              beeApi,
              fm,
              drive: destroyDrive,
              adminDrive,
              isDestroy: true,
              onSuccess: () => {
                setShowDestroyDriveModal(false)
                setDestroyDrive(null)
              },
              onError: e => {
                setShowDestroyDriveModal(false)
                setErrorMessage?.(`Error destroying drive: ${destroyDrive.name}: ${e}`)
                setShowError(true)
              },
            })
          }}
        />
      )}
    </div>
  )
 }
@@ -0,0 +1,7 @@
 .fm-file-progress-notification {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  text-decoration: underline;
 }
@@ -0,0 +1,90 @@
 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, ProgressItem } from '../../constants/transfers'
 interface FileProgressNotificationProps {
  label?: string
  type: FileTransferType
  open?: boolean
  items?: ProgressItem[]
  onRowClose?: (uuid: string) => void
  onCloseAll?: () => void
 }
 export function FileProgressNotification({
  label,
  type,
  open,
  items,
  onRowClose,
  onCloseAll,
 }: FileProgressNotificationProps): ReactElement | null {
  const [showFileProgressWindow, setShowFileProgressWindow] = useState(Boolean(open))
  const [openedByUser, setOpenedByUser] = useState(false)
  const autoHideTimer = useRef<number | null>(null)
  const allDone = useMemo(() => {
    if (!items || items.length === 0) return false
    return items.every(i => (typeof i.percent === 'number' ? i.percent >= 100 : i.status === TransferStatus.Done))
  }, [items])
  useEffect(() => {
    if (open) {
      setShowFileProgressWindow(true)
      setOpenedByUser(false)
    }
  }, [open])
  useEffect(() => {
    if (autoHideTimer.current) {
      window.clearTimeout(autoHideTimer.current)
      autoHideTimer.current = null
    }
    if (showFileProgressWindow && allDone && !openedByUser) {
      autoHideTimer.current = window.setTimeout(() => {
        setShowFileProgressWindow(false)
        autoHideTimer.current = null
      }, 3000) as unknown as number
    }
    return () => {
      if (autoHideTimer.current) {
        window.clearTimeout(autoHideTimer.current)
        autoHideTimer.current = null
      }
    }
  }, [showFileProgressWindow, allDone, openedByUser])
  const handleOpenClick = () => {
    setOpenedByUser(true)
    setShowFileProgressWindow(true)
  }
  return (
    <div style={{ position: 'relative' }}>
      <div className="fm-file-progress-notification" onClick={handleOpenClick} role="button" aria-label={label}>
        <span>{label}</span>
        {type === FileTransferType.Upload && <UpIcon size="16px" style={{ marginLeft: 6 }} />}
        {type === FileTransferType.Download && <DownIcon size="16px" style={{ marginLeft: 6 }} />}
      </div>
      {showFileProgressWindow && (
        <FileProgressWindow
          items={items}
          type={type}
          onCancelClick={() => setShowFileProgressWindow(false)}
          onRowClose={onRowClose}
          onCloseAll={() => {
            onCloseAll?.()
            setShowFileProgressWindow(false)
          }}
        />
      )}
    </div>
  )
 }
@@ -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;
 }
@@ -0,0 +1,200 @@
 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, ProgressItem } from '../../constants/transfers'
 import { capitalizeFirstLetter, truncateNameMiddle } from '../../utils/common'
 import { guessMime } from '../../utils/view'
 interface FileProgressWindowProps {
  items?: ProgressItem[]
  type: FileTransferType
  onCancelClick: () => void
  onRowClose?: (uuid: 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({
  items,
  type,
  onCancelClick,
  onRowClose,
  onCloseAll,
 }: FileProgressWindowProps): ReactElement | null {
  const listRef = useRef<HTMLDivElement | null>(null)
  const firstRowRef = useRef<HTMLDivElement | null>(null)
  const count = items?.length ?? 0
  const rows: ProgressItem[] = items ?? []
  const getTransferInfo = (item: ProgressItem, pct?: number) => {
    const transferType = capitalizeFirstLetter(item?.kind ?? type)
    const verb = `${transferType}ing`
    const actualStatus = item.status || (pct && pct >= 100 ? TransferStatus.Done : verb)
    return {
      statusText: capitalizeFirstLetter(actualStatus),
      barColor: TransferBarColor[transferType as keyof typeof TransferBarColor],
    }
  }
  const allDone =
    rows.length > 0 &&
    rows.every(r => {
      const pct = Number.isFinite(r.percent) ? Math.round(r.percent as number) : undefined
      return (
        r.status === TransferStatus.Done ||
        r.status === TransferStatus.Error ||
        r.status === TransferStatus.Cancelled ||
        (typeof pct === 'number' && pct >= 100)
      )
    })
  useLayoutEffect(() => {
    const rowEl = firstRowRef.current
    const listEl = listRef.current
    if (!rowEl || !listEl) return
    const rowH = rowEl.getBoundingClientRect().height
    const safeRowH = rowH > 0 ? rowH : 72
    listEl.style.maxHeight = `${safeRowH * 5}px`
  }, [rows.length])
  return (
    <div className="fm-file-progress-window">
      <div className="fm-file-progress-window-header">
        <div className="fm-emphasized-text">
          {count} {type}
          {count === 1 ? '' : 's'}
        </div>
        <div className="fm-file-progress-window-header-actions">
          <button
            className="fm-file-progress-window-header-btn fm-file-progress-window-header-dismiss"
            aria-label="Dismiss all"
            type="button"
            disabled={!allDone}
            onClick={() => onCloseAll?.()}
          >
            <CloseIcon size="16" />
          </button>
          <button
            className="fm-file-progress-window-header-btn fm-file-progress-window-header-hide"
            aria-label="Hide"
            type="button"
            onClick={onCancelClick}
          >
            <ArrowDownIcon size="16" />
          </button>
        </div>
      </div>
      <div className="fm-file-progress-window-list" ref={listRef}>
        {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'
          const { mime } = guessMime(item.name)
          const mimeType = mime.split('/')[0].toLowerCase() || 'file'
          return (
            <div
              className="fm-file-progress-window-file-item"
              key={item.uuid || `${item.name}-${idx}`}
              ref={idx === 0 ? firstRowRef : undefined}
            >
              <div className="fm-file-progress-window-file-type-icon">
                <GetIconElement size="14" icon={mimeType} color="black" />
              </div>
              <div className="fm-file-progress-window-file-datas">
                <div className="fm-file-progress-window-file-item-header">
                  <div className="fm-file-progress-window-name" title={item.name}>
                    <div className="fm-file-progress-window-name-text">{truncateNameMiddle(item.name, 25, 8, 8)}</div>
                    {item.driveName && (
                      <div className="fm-drive-line">
                        <span className="fm-drive-chip" title={`Drive: ${item.driveName}`}>
                          {truncateNameMiddle(item.driveName, 25, 8, 8)}
                        </span>
                      </div>
                    )}
                  </div>
                  <div className="fm-file-progress-window-percent" aria-live="polite">
                    {typeof pctNum === 'number' ? `${pctNum}%` : ''}
                  </div>
                  <button
                    className="fm-file-progress-window-row-close"
                    aria-label={rowActionLabel}
                    onClick={() => onRowClose?.(item.uuid)}
                    type="button"
                  >
                    <CloseIcon size="14" />
                  </button>
                </div>
                <ProgressBar
                  value={typeof pctNum === 'number' ? pctNum : 0}
                  width="100%"
                  backgroundColor="rgb(229, 231, 235)"
                  color={transferInfo.barColor}
                />
                <div className="fm-file-progress-window-file-item-footer">
                  <div className="fm-file-progress-window-size">{item.size || '—'}</div>
                  <div className="fm-file-progress-window-center">{centerDisplay}</div>
                  <div className="fm-file-progress-window-status">{transferInfo.statusText}</div>
                </div>
              </div>
            </div>
          )
        })}
      </div>
    </div>
  )
 }
@@ -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
 }
@@ -0,0 +1,126 @@
 .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: 14px;
  padding-left: 14px;
 }
 .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;
  overflow-wrap: anywhere;
  word-break: break-word;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  color: #111827;
  text-align: right;
 }
 .fm-copyable-value {
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 4px 8px;
  transition: background-color 0.2s;
  position: relative;
 }
 .fm-copyable-value:hover {
  background: rgba(237, 129, 49, 0.1);
  border-radius: 4px;
 }
 .fm-copyable-value svg {
  flex-shrink: 0;
  color: rgb(237, 129, 49);
 }
 .fm-copied-indicator {
  position: absolute;
  left: -70px;
  background: rgb(237, 129, 49);
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  animation: fadeInOut 2s ease-in-out;
 }
@keyframes fadeInOut {
  0% {
    opacity: 0;
    transform: translateX(-10px);
  }
  10% {
    opacity: 1;
    transform: translateX(0);
  }
  90% {
    opacity: 1;
    transform: translateX(0);
  }
  100% {
    opacity: 0;
    transform: translateX(-10px);
  }
 }
@@ -0,0 +1,95 @@
 import { ReactElement, useState, useEffect } 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<string | null>(null)
  const timeoutRef = useState<{ [key: string]: NodeJS.Timeout }>({})[0]
  useEffect(() => {
    return () => {
      Object.values(timeoutRef).forEach(timeout => clearTimeout(timeout))
    }
  }, [timeoutRef])
  const handleCopy = async (prop: FileProperty) => {
    try {
      await navigator.clipboard.writeText(prop.raw ?? prop.value)
      if (timeoutRef[prop.key]) {
        clearTimeout(timeoutRef[prop.key])
      }
      setCopiedKey(prop.key)
      timeoutRef[prop.key] = setTimeout(() => {
        setCopiedKey(prev => (prev === prop.key ? null : prev))
        delete timeoutRef[prop.key]
      }, 2000)
    } catch {
      /* noop */
    }
  }
  return createPortal(
    <div className="fm-modal-container">
      <div className="fm-modal-window fm-get-info-modal">
        <div className="fm-modal-window-header">
          <InfoIcon /> <span className="fm-main-font-color">File Information - {name}</span>
        </div>
        <div className="fm-modal-window-body fm-get-info-body">
          {properties.map(group => (
            <div key={group.title} className="fm-get-info-modal-group">
              <div className="fm-get-info-modal-group-title">
                {group.icon}
                {group.title}
              </div>
              <div className="fm-get-info-modal-group-properties">
                {group.properties.map(prop => (
                  <div key={prop.key} className="fm-get-info-modal-property-row">
                    <span className="fm-get-info-modal-property-label">{prop.label}</span>
                    {prop.raw || prop.value.includes('...') ? (
                      <button
                        className="fm-get-info-modal-property-value fm-copyable-value"
                        onClick={() => handleCopy(prop)}
                        aria-label={`Copy ${prop.label}`}
                        type="button"
                      >
                        <ClipboardIcon size="12px" />
                        <span className="fm-copyable-value-text">{prop.value}</span>
                        {copiedKey === prop.key && <span className="fm-copied-indicator">Copied!</span>}
                      </button>
                    ) : (
                      <span className="fm-get-info-modal-property-value">{prop.value}</span>
                    )}
                  </div>
                ))}
              </div>
            </div>
          ))}
        </div>
        <div className="fm-modal-window-footer">
          <div className="fm-get-info-modal-footer-one-button">
            <Button label="Close" variant="secondary" onClick={onCancelClick} />
          </div>
        </div>
      </div>
    </div>,
    modalRoot,
  )
 }
@@ -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; }
@@ -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<HTMLDivElement | null>(null)
  const btnRef = useRef<HTMLButtonElement | null>(null)
  const filtersActive = useMemo(() => {
    return (
      scope !== DEFAULT_FILTERS.scope ||
      includeActive !== DEFAULT_FILTERS.includeActive ||
      includeTrashed !== DEFAULT_FILTERS.includeTrashed
    )
  }, [scope, includeActive, includeTrashed])
  const resetFilters = () => {
    setScope(DEFAULT_FILTERS.scope)
    setIncludeActive(DEFAULT_FILTERS.includeActive)
    setIncludeTrashed(DEFAULT_FILTERS.includeTrashed)
  }
  useEffect(() => {
    if (!openFilters) return
    const onDocClick = (e: MouseEvent) => {
      const t = e.target as Node
      if (menuRef.current?.contains(t) || btnRef.current?.contains(t)) return
      setOpenFilters(false)
    }
    const onEsc = (e: KeyboardEvent) => {
      if (e.key === 'Escape') setOpenFilters(false)
    }
    document.addEventListener('mousedown', onDocClick)
    document.addEventListener('keydown', onEsc)
    return () => {
      document.removeEventListener('mousedown', onDocClick)
      document.removeEventListener('keydown', onEsc)
    }
  }, [openFilters])
  return (
    <div className="fm-header-container">
      <div className="fm-header-left">
        <div className="fm-header-logo" aria-hidden>
          <FileIcon />
        </div>
        <div className="fm-header-title">File Manager</div>
      </div>
      <div className="fm-header-search">
        <SearchIcon className="fm-header-search-icon" size="16px" aria-hidden />
        <input
          type="text"
          placeholder="Search files by name or type…"
          value={query}
          onChange={e => setQuery(e.target.value)}
          onKeyDown={e => {
            if (e.key === 'Escape') clear()
          }}
          aria-label="Search files"
        />
        {query && (
          <button
            type="button"
            className="fm-header-search-clear"
            aria-label="Clear search"
            onClick={clear}
            title="Clear"
          >
            ×
          </button>
        )}
      </div>
      <div className="fm-header-actions">
        <button
          ref={btnRef}
          type="button"
          className="fm-filter-btn"
          aria-haspopup="menu"
          aria-expanded={openFilters}
          onClick={() => setOpenFilters(v => !v)}
          title={filtersActive ? 'Filters (active)' : 'Filters'}
          style={{ color: filtersActive ? 'orange' : undefined }}
        >
          <FilterIcon size="16px" />
          <span style={{ display: 'inline-flex', alignItems: 'center', gap: 4 }}>
            Filters
            {filtersActive && (
              <span
                aria-label="Filters active"
                title="Filters active"
                // tiny inline badge, no external CSS
                style={{
                  fontWeight: 700,
                  fontSize: 11,
                  lineHeight: 1,
                  padding: '0 4px',
                  borderRadius: 8,
                  border: '1px solid orange',
                  color: 'orange',
                  marginLeft: 2,
                }}
              >
                !
              </span>
            )}
          </span>
        </button>
        {openFilters && (
          <div className="fm-filter-menu" role="menu" ref={menuRef}>
            <div className="fm-filter-group" role="radiogroup" aria-label="Search scope">
              <div className="fm-filter-group-title">Scope</div>
              <label className="fm-filter-row">
                <input
                  type="radio"
                  name="fm-scope"
                  checked={scope === 'selected'}
                  onChange={() => setScope('selected')}
                />
                <span title={currentDriveName ? `Search in ${currentDriveName}` : 'Search in selected drive'}>
                  Selected{currentDriveName ? ` — ${currentDriveName}` : ''}
                </span>
              </label>
              <label className="fm-filter-row">
                <input type="radio" name="fm-scope" checked={scope === 'all'} onChange={() => setScope('all')} />
                <span>All drives</span>
              </label>
            </div>
            <div className="fm-filter-sep" />
            <div className="fm-filter-group" aria-label="Status">
              <div className="fm-filter-group-title">Status</div>
              <label className="fm-filter-row">
                <input type="checkbox" checked={includeActive} onChange={e => setIncludeActive(e.target.checked)} />
                <span>Active</span>
              </label>
              <label className="fm-filter-row">
                <input type="checkbox" checked={includeTrashed} onChange={e => setIncludeTrashed(e.target.checked)} />
                <span>Trash</span>
              </label>
            </div>
            <div className="fm-filter-sep" />
            <div className="fm-filter-group" role="group" aria-label="Reset">
              <button
                type="button"
                onClick={resetFilters}
                title="Reset filters to default"
                style={{
                  padding: '6px 10px',
                  borderRadius: 6,
                  border: '1px solid #ccc',
                  cursor: 'pointer',
                }}
              >
                Reset to default
              </button>
            </div>
          </div>
        )}
      </div>
    </div>
  )
 }
@@ -0,0 +1,29 @@
 .fm-initialization-modal-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: transparent;
  backdrop-filter: none;
  z-index: 1300;
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: none;
 }
 .fm-initialization-modal-container .fm-modal-window {
  pointer-events: auto;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
 }
 .fm-initilization-progress-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
 }
 .fm-main:has(.fm-initialization-modal-container) {
  border-left: none;
 }
@@ -0,0 +1,382 @@
 import { ReactElement, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react'
 import { BeeModes, 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, errorMessage?: string) => 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,
    }
  }),
 ]
 const setSecurityLevel = (setter: (value: RedundancyLevel) => void) => {
  return (
    <div className="fm-modal-window-input-container">
      <label htmlFor="admin-security-level" className="fm-input-label">
        Security Level <Tooltip label={TOOLTIPS.ADMIN_SECURITY_LEVEL} />
      </label>
      <FMSlider
        id="admin-security-level"
        defaultValue={0}
        marks={erasureCodeMarks}
        onChange={v => setter(v)}
        minValue={minMarkValue}
        maxValue={maxMarkValue}
        step={1}
      />
    </div>
  )
 }
 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<PostageBatch[]>([])
  const [selectedBatch, setSelectedBatch] = useState<PostageBatch | null>(null)
  const [selectedBatchIndex, setSelectedBatchIndex] = useState<number>(-1)
  const [isNodeSyncing, setIsNodeSyncing] = useState(true)
  const { walletBalance, nodeInfo } = useContext(BeeContext)
  const { beeApi } = useContext(SettingsContext)
  const { fm } = useContext(FMContext)
  const currentFetch = useRef<Promise<void> | null>(null)
  const isMountedRef = useRef(true)
  useEffect(() => {
    return () => {
      isMountedRef.current = false
    }
  }, [])
  const checkBalances = useCallback(
    (cost: BZZ) => {
      setIsBalanceSufficient(true)
      setIsxDaiBalanceSufficient(true)
      if ((walletBalance && cost.gte(walletBalance.bzzBalance)) || !walletBalance) {
        safeSetState(isMountedRef, setIsBalanceSufficient)(false)
      }
      const zeroDAI = DAI.fromDecimalString('0')
      if ((walletBalance && zeroDAI.eq(walletBalance.nativeTokenBalance)) || !walletBalance) {
        safeSetState(isMountedRef, setIsxDaiBalanceSufficient)(false)
      }
    },
    [walletBalance],
  )
  const handleCostFetch = useCallback(
    (cost: BZZ) => {
      safeSetState(isMountedRef, setIsNodeSyncing)(false)
      checkBalances(cost)
      safeSetState(isMountedRef, setCost)(cost.toSignificantDigits(2))
    },
    [checkBalances],
  )
  const handleCostFetchError = useCallback(() => {
    safeSetState(isMountedRef, setIsNodeSyncing)(true)
    safeSetState(isMountedRef, setCost)('0')
  }, [])
  const createAdminDrive = useCallback(async () => {
    setIsCreationInProgress?.(true)
    handleVisibility(false)
    await handleCreateDrive({
      beeApi,
      fm,
      size: Size.fromBytes(capacity),
      duration: Duration.fromEndDate(validityEndDate),
      label: ADMIN_STAMP_LABEL,
      encryption: false,
      redundancyLevel: erasureCodeLevel,
      adminRedundancy: erasureCodeLevel,
      isAdmin: true,
      resetState,
      existingBatch: selectedBatch,
      onSuccess: () => {
        handleVisibility(false)
        setIsCreationInProgress(false)
      },
      onError: err => {
        const errorMessage = err instanceof Error ? err.message : String(err)
        handleShowError(true, errorMessage)
        setIsCreationInProgress(false)
      },
    })
  }, [
    beeApi,
    fm,
    capacity,
    validityEndDate,
    erasureCodeLevel,
    selectedBatch,
    handleVisibility,
    handleShowError,
    setIsCreationInProgress,
    resetState,
  ])
  useEffect(() => {
    const getStamps = async () => {
      const stamps = await getUsableStamps(beeApi)
      safeSetState(isMountedRef, setUsableStamps)([...stamps])
    }
    if (beeApi) {
      getStamps()
    }
  }, [beeApi])
  useEffect(() => {
    const newSizes = Array.from(Utils.getStampEffectiveBytesBreakpoints(false, erasureCodeLevel).values())
    setCapacity(newSizes[2])
  }, [erasureCodeLevel])
  useEffect(() => {
    if (validityEndDate.getTime() > new Date().getTime()) {
      fmFetchCost(
        capacity,
        validityEndDate,
        false,
        erasureCodeLevel,
        beeApi,
        handleCostFetch,
        currentFetch,
        handleCostFetchError,
      )
      if (lifetimeIndex >= 0 && !isNodeSyncing) {
        setIsCreateEnabled(true)
      } else {
        setIsCreateEnabled(false)
      }
    } else {
      setCost('0')
      setIsCreateEnabled(false)
    }
  }, [
    validityEndDate,
    erasureCodeLevel,
    beeApi,
    capacity,
    lifetimeIndex,
    isNodeSyncing,
    handleCostFetch,
    handleCostFetchError,
  ])
  useEffect(() => {
    setValidityEndDate(getExpiryDateByLifetime(lifetimeIndex))
  }, [lifetimeIndex])
  const nonFullStamps = useMemo(() => {
    return usableStamps.filter(s => {
      const { capacityPct } = calculateStampCapacityMetrics(s, [], erasureCodeLevel)
      return capacityPct < 100
    })
  }, [usableStamps, erasureCodeLevel])
  useEffect(() => {
    if (selectedBatchIndex >= 0 && selectedBatchIndex < nonFullStamps.length) {
      setSelectedBatch(nonFullStamps[selectedBatchIndex])
    } else {
      setSelectedBatch(null)
    }
  }, [nonFullStamps, selectedBatchIndex])
  const { capacityPct, usedSize, stampSize } = useMemo(() => {
    if (!selectedBatch) {
      return {
        capacityPct: 0,
        usedSize: '—',
        stampSize: '—',
        usedBytes: 0,
        stampSizeBytes: 0,
        remainingBytes: 0,
      }
    }
    return calculateStampCapacityMetrics(selectedBatch, [], erasureCodeLevel)
  }, [selectedBatch, erasureCodeLevel])
  const initText = resetState ? 'Resetting' : 'Initializing'
  const createText = resetState ? 'Reset' : 'Create'
  const isUltraLightNode = nodeInfo?.beeMode === BeeModes.ULTRA_LIGHT
  const isCreateDriveDisabled =
    isUltraLightNode ||
    isNodeSyncing ||
    (selectedBatch ? false : !isCreateEnabled || !isBalanceSufficient || !isxDaiBalanceSufficient)
  const renderUltraLightNodeWarning = () => {
    if (!isUltraLightNode) return null
    const upgradeLink = (
      <a
        href="https://docs.ethswarm.org/docs/desktop/configuration/#upgrading-from-an-ultra-light-to-a-light-node"
        target="_blank"
        rel="noreferrer"
      >
        upgrade
      </a>
    )
    if (selectedBatch) {
      return (
        <div>
          {resetState ? 'Resetting' : 'Creating'} a drive requires running a light node. Please {upgradeLink} to
          continue.
        </div>
      )
    }
    return (
      <div>
        Purchasing a stamp and {resetState ? 'resetting' : 'creating'} a drive requires running a light node. Please{' '}
        {upgradeLink} to continue.
      </div>
    )
  }
  return (
    <div className="fm-initialization-modal-container">
      <div className="fm-modal-window">
        <div className="fm-modal-window-header">Welcome to your Swarm File Manager</div>
        <div>{initText} the File Manager</div>
        {nonFullStamps.length > 0 && (
          <div className="fm-modal-window-body">
            <div className="fm-modal-window-input-container">
              <CustomDropdown
                id="batch-id-selector"
                options={createBatchIdOptions(nonFullStamps)}
                value={selectedBatchIndex}
                label="Link an existing Admin Drive (optional)"
                onChange={(index: number) => {
                  setSelectedBatchIndex(index)
                  if (index === -1) {
                    setSelectedBatch(null)
                  }
                }}
                placeholder={BATCH_ID_PLACEHOLDER}
              />
              {selectedBatch && (
                <div className="fm-drive-item-content">
                  <div className="fm-drive-item-capacity">
                    Capacity <ProgressBar value={capacityPct} width="64px" /> {usedSize} / {stampSize}
                  </div>
                  <div className="fm-drive-item-capacity">
                    Expiry date: {selectedBatch.duration.toEndDate().toLocaleDateString()}
                  </div>
                </div>
              )}
              {selectedBatch && setSecurityLevel(setErasureCodeLevel)}
            </div>
          </div>
        )}
        {!selectedBatch && (
          <div className="fm-modal-window-body">
            <div className="fm-modal-window-input-container">
              <label htmlFor="admin-desired-lifetime" className="fm-input-label">
                Create a new Admin Drive with desired lifetime: <Tooltip label={TOOLTIPS.ADMIN_DESIRED_LIFETIME} />
              </label>
              <CustomDropdown
                id="admin-desired-lifetime"
                options={desiredLifetimeOptions}
                value={lifetimeIndex}
                onChange={setLifetimeIndex}
                placeholder="Select a value"
              />
            </div>
            {setSecurityLevel(setErasureCodeLevel)}
            <div className="fm-modal-window-input-container">
              <div className="fm-modal-estimated-cost-container">
                <div className="fm-emphasized-text">Estimated Cost:</div>
                <div>
                  {cost} BZZ {isBalanceSufficient ? '' : '(Insufficient balance)'}
                  {isxDaiBalanceSufficient ? '' : ' (Insufficient xDAI balance)'}
                </div>
                <Tooltip label={TOOLTIPS.ADMIN_ESTIMATED_COST} />
              </div>
              <div>(Based on current network conditions)</div>
              {renderUltraLightNodeWarning()}
              {isNodeSyncing && !selectedBatch && (
                <div className="fm-modal-info-warning" style={{ marginBottom: '16px' }}>
                  Node is syncing. Please wait until sync completes before purchasing a stamp.
                </div>
              )}
            </div>
          </div>
        )}
        <div className="fm-modal-window-footer">
          <Button
            label={selectedBatch ? `${createText} Drive` : `Purchase Stamp & ${createText} Drive`}
            variant="primary"
            disabled={isCreateDriveDisabled}
            onClick={createAdminDrive}
          />
          <Tooltip
            label={
              selectedBatch
                ? TOOLTIPS.ADMIN_PURCHASE_BUTTON_ALREADY_EXISTED_ADMIN_DRIVE
                : TOOLTIPS.ADMIN_PURCHASE_BUTTON
            }
          />
        </div>
      </div>
    </div>
  )
 }
@@ -0,0 +1,11 @@
 .fm-notification-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  &:hover {
    cursor: pointer;
    opacity: 0.8;
    text-decoration: underline;
  }
 }
@@ -0,0 +1,119 @@
 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'
 import { FILE_MANAGER_EVENTS } from '../../constants/common'
 const NUMBER_OF_DAYS_WARNING = 7
 const DAYS_TO_MILLISECONDS_MULTIPLIER = 24 * 60 * 60 * 1000
 const isExpiring = (s: PostageBatch): boolean => {
  return (
    s.duration &&
    s.duration.toEndDate().getTime() <= Date.now() + NUMBER_OF_DAYS_WARNING * DAYS_TO_MILLISECONDS_MULTIPLIER
  )
 }
 interface NotificationBarProps {
  setErrorMessage?: (error: string) => void
 }
 export function NotificationBar({ setErrorMessage }: NotificationBarProps): ReactElement | null {
  const [showExpiringModal, setShowExpiringModal] = useState(false)
  const [stampsToExpire, setStampsToExpire] = useState<PostageBatch[]>([])
  const [drivesToExpire, setDrivesToExpire] = useState<DriveInfo[]>([])
  const { beeApi } = useContext(SettingsContext)
  const { drives, files, adminDrive } = useContext(FMContext)
  const showExpiration = stampsToExpire.length > 0
  useEffect(() => {
    let isMounted = true
    const getStamps = async () => {
      const allStamps = await getUsableStamps(beeApi)
      const expiringStamps: PostageBatch[] = []
      const expiringDrives: DriveInfo[] = []
      allStamps.forEach(stamp => {
        const matchingDrive =
          drives.find(d => d.batchId.toString() === stamp.batchID.toString()) ||
          (adminDrive?.batchId.toString() === stamp.batchID.toString() ? adminDrive : null)
        if (matchingDrive) {
          if (isExpiring(stamp)) {
            expiringStamps.push(stamp)
            expiringDrives.push(matchingDrive)
          }
        }
      })
      if (isMounted) {
        setStampsToExpire(expiringStamps)
        setDrivesToExpire(expiringDrives)
      }
    }
    getStamps()
    return () => {
      isMounted = false
    }
  }, [beeApi, drives, adminDrive, setErrorMessage])
  useEffect(() => {
    const onDriveUpgradeEnd = (e: Event) => {
      const { driveId, success, updatedStamp } = (e as CustomEvent).detail || {}
      if (success && updatedStamp && driveId) {
        if (!isExpiring(updatedStamp)) {
          setTimeout(() => {
            setStampsToExpire(prev => {
              const stampIx = prev.findIndex(s => s.batchID.toString() === updatedStamp.batchID.toString())
              return stampIx !== -1 ? prev.filter((_, i) => i !== stampIx) : prev
            })
            setDrivesToExpire(prev => {
              const driveIx = prev.findIndex(d => d.id.toString() === driveId)
              return driveIx !== -1 ? prev.filter((_, i) => i !== driveIx) : prev
            })
          }, 150)
        }
      }
    }
    window.addEventListener(FILE_MANAGER_EVENTS.DRIVE_UPGRADE_END, onDriveUpgradeEnd as EventListener)
    return () => {
      window.removeEventListener(FILE_MANAGER_EVENTS.DRIVE_UPGRADE_END, onDriveUpgradeEnd as EventListener)
    }
  }, [])
  if (!showExpiration) return null
  return (
    <>
      <div className="fm-notification-bar fm-red-font" onClick={() => setShowExpiringModal(true)}>
        {stampsToExpire.length} drive{stampsToExpire.length > 1 ? 's' : ''} expiring soon <UpIcon size="16px" />
      </div>
      {showExpiringModal && (
        <ExpiringNotificationModal
          stamps={stampsToExpire}
          drives={drivesToExpire}
          files={files}
          onCancelClick={() => {
            setShowExpiringModal(false)
          }}
          setErrorMessage={setErrorMessage}
        />
      )}
    </>
  )
 }
@@ -0,0 +1,131 @@
 .fm-private-key-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
 }
 .fm-generate-btn {
  font-size: 0.75rem;
  padding: 4px 8px;
  background: #f3f4f6;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.2s;
 }
 .fm-generate-btn:hover {
  background: #e5e7eb;
 }
 .fm-private-key-input-row {
  position: relative;
  display: flex;
  align-items: center;
 }
 .fm-private-key-input {
  padding-right: 37px !important;
  font-family: monospace;
  font-size: 0.9em;
  padding-right: 40px;
  width: 100%;
 }
 .fm-confirm-key-label {
  display: block;
  margin-bottom: 6px;
 }
 .fm-confirm-key-input {
  font-family: monospace;
  font-size: 0.9em;
  width: 100%;
 }
 .fm-confirm-key-hint {
  margin-top: 6px;
 }
 .fm-input.has-error {
  border-color: #ef4444;
 }
 .fm-input-hint-error {
  color: #ef4444;
  font-size: 12px;
  margin-top: 6px;
  min-height: 24px;
  display: block;
 }
 .fm-input-hint {
  color: #6b7280;
  font-size: 12px;
  margin-top: 6px;
 }
 .fm-copy-btn {
  position: absolute;
  right: 27px;
  margin-left: 6px;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 4px;
  line-height: 0;
  border-radius: 4px;
  transition: background 0.2s;
 }
 .fm-copy-btn:hover {
  background: #f5f5f5;
 }
 .fm-initialization-modal-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: transparent;
  backdrop-filter: none;
  z-index: 1300;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 24px;
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: auto;
  pointer-events: none;
 }
 .fm-initialization-modal-container .fm-modal-window {
  width: 600px;
  max-height: calc(100vh - 48px);
  display: flex;
  flex-direction: column;
  overflow: visible;
  pointer-events: auto;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
 }
 .fm-initialization-modal-container .fm-modal-window-header {
  flex-shrink: 0;
 }
 .fm-initialization-modal-container .fm-modal-window-footer {
  flex-shrink: 0;
 }
 .fm-initialization-modal-container .fm-modal-window-scrollable {
  overflow-y: auto;
  overflow-x: hidden;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
 }
 .fm-main:has(.fm-initialization-modal-container) {
  border-left: none;
 }
@@ -0,0 +1,183 @@
 import { useState, ReactElement, useEffect } from 'react'
 import './PrivateKeyModal.scss'
 import { Button } from '../Button/Button'
 import { setSignerPk, getSigner } from '../../utils/common'
 import { uuidV4 } from '../../../../utils'
 import { PrivateKey } from '@ethersphere/bee-js'
 import ClipboardIcon from 'remixicon-react/FileCopyLineIcon'
 import CheckDoubleLineIcon from 'remixicon-react/CheckDoubleLineIcon'
 import { Tooltip } from '../Tooltip/Tooltip'
 import { TOOLTIPS } from '../../constants/tooltips'
 type Props = { onSaved: () => void }
 export function PrivateKeyModal({ onSaved }: Props): ReactElement {
  const [value, setValue] = useState('')
  const [confirmValue, setConfirmValue] = useState('')
  const [showError, setShowError] = useState(false)
  const [copied, setCopied] = useState(false)
  useEffect(() => {
    handleGenerateNew()
  }, [])
  const handleCopyPrivateKey = async () => {
    try {
      await navigator.clipboard.writeText(value)
      setCopied(true)
    } catch {
      // eslint-disable-next-line no-console
      console.debug('Failed to copy private key to clipboard')
    }
  }
  const handleGenerateNew = () => {
    const id = uuidV4()
    const signer = getSigner(id)
    const privKey = signer.toHex()
    setValue(privKey)
    setConfirmValue('')
    setCopied(false)
    setShowError(false)
  }
  const handleBlur = () => {
    if (!value.trim()) {
      return
    }
    try {
      new PrivateKey(value)
      setShowError(false)
    } catch {
      setShowError(true)
      setCopied(false)
    }
  }
  const handleSave = () => {
    try {
      new PrivateKey(value)
      setSignerPk(value)
      onSaved()
    } catch {
      setShowError(true)
    }
  }
  return (
    <div className="fm-initialization-modal-container">
      <div className="fm-modal-window">
        <div className="fm-modal-window-header">
          <div>Create Private Key</div>
          <Tooltip label={TOOLTIPS.PRIVATE_KEY_MODAL_HEADER} />
        </div>
        <div className="fm-modal-window-scrollable">
          <div>This key grants access to this File Manager instance. Save it before continuing..</div>
          <div className="fm-modal-info-warning flex-column">
            <span className="fm-modal-info-warning-text-header">CRITICAL: Key Cannot Be Recovered</span>
            <span>
              Swarm does not store this key and <strong>cannot</strong> retrieve it. Loss of the key will result in
              permanent loss of access to this File Manager instance.
            </span>
          </div>
          <div className="fm-modal-window-body">
            <div className="fm-modal-window-input-container">
              <label htmlFor="fm-private-key" className="fm-emphasized-text fm-private-key-label">
                <span>1. New Private key</span>
                <button
                  onClick={handleGenerateNew}
                  type="button"
                  className="fm-generate-btn"
                  onMouseEnter={e => (e.currentTarget.style.background = '#e5e7eb')}
                  onMouseLeave={e => (e.currentTarget.style.background = '#f3f4f6')}
                >
                  Generate New
                </button>
              </label>
              <div className="fm-private-key-input-row">
                <input
                  id="fm-private-key"
                  type="text"
                  className={`fm-input${showError ? ' has-error' : ''} fm-private-key-input`}
                  autoComplete="off"
                  value={value}
                  onChange={e => {
                    setValue(e.target.value)
                    setCopied(false)
                    setShowError(false)
                  }}
                  onBlur={handleBlur}
                  spellCheck={false}
                />
                {
                  <button
                    className="fm-copy-btn"
                    onClick={handleCopyPrivateKey}
                    aria-label="Copy private key"
                    type="button"
                    title={copied ? 'Copied!' : 'Copy'}
                  >
                    {copied ? <CheckDoubleLineIcon size="16px" /> : <ClipboardIcon size="16px" />}
                  </button>
                }
                <Tooltip label={TOOLTIPS.PRIVATE_KEY_MODAL_GENERATED_KEY} />
              </div>
              <div className="fm-input-hint-error">{showError ? 'Invalid private key.' : ''}</div>
            </div>
            <div className="fm-modal-window-input-container">
              <label htmlFor="fm-private-key-confirm" className="fm-emphasized-text fm-confirm-key-label">
                Confirm Private Key
              </label>
              <div className="fm-private-key-input-row">
                <input
                  id="fm-private-key-confirm"
                  type="text"
                  className="fm-input fm-confirm-key-input"
                  placeholder="Paste or type your private key again"
                  autoComplete="off"
                  value={confirmValue}
                  onChange={e => setConfirmValue(e.target.value)}
                  spellCheck={false}
                />
                <Tooltip label={TOOLTIPS.PRIVATE_KEY_MODAL_CONFIRM_KEY} />
              </div>
              <div className="fm-input-hint fm-confirm-key-hint">
                {confirmValue && value === confirmValue
                  ? '✓ Private keys match!'
                  : 'Save the private key securely, then paste or type it again to confirm.'}
              </div>
            </div>
          </div>
          <div className="fm-modal-window-body">
            <div className="flex-row">
              <div>
                <b>Key Storage:</b>
              </div>
              <Tooltip label={TOOLTIPS.PRIVATE_KEY_MODAL_KEY_INFO} />
            </div>
            The key is saved only in this browser&apos;s local storage. If browser data is cleared, a different browser
            is used, or the OS is updated, this local copy might be deleted. The key will be required to access this
            File Manager instance after that.
          </div>
        </div>
        <div className="fm-modal-window-footer">
          <Button
            label="Save"
            variant="primary"
            onClick={handleSave}
            disabled={!value || !confirmValue || value !== confirmValue || showError}
          />
        </div>
      </div>
    </div>
  )
 }
 export default PrivateKeyModal
@@ -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;
 }
@@ -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 (
    <div className="fm-progress-bar" style={{ width: `${width}`, backgroundColor: `${backgroundColor}` }}>
      <div className="fm-progress-bar-fill" style={{ width: `${value}%`, backgroundColor: `${color}` }}></div>
    </div>
  )
 }
@@ -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;
 }
@@ -0,0 +1,146 @@
 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'
 const maxFileNameLength = 60
 interface RenameFileModalProps {
  currentName: string
  takenNames?: Set<string> | string[]
  onCancelClick: () => void
  onProceed: (newName: string) => void | Promise<void>
 }
 export function RenameFileModal({
  currentName,
  takenNames,
  onCancelClick,
  onProceed,
 }: RenameFileModalProps): ReactElement {
  const [value, setValue] = useState(currentName)
  const [touched, setTouched] = useState(false)
  const [submitting, setSubmitting] = useState(false)
  const inputRef = useRef<HTMLInputElement | null>(null)
  const isMountedRef = useRef(true)
  useEffect(() => {
    isMountedRef.current = true
    return () => {
      isMountedRef.current = false
    }
  }, [])
  useEffect(() => {
    const t = setTimeout(() => inputRef.current?.focus(), 0)
    return () => clearTimeout(t)
  }, [])
  const taken = useMemo(() => {
    if (!takenNames) return new Set<string>()
    return Array.isArray(takenNames) ? new Set(takenNames) : takenNames
  }, [takenNames])
  const trimmed = useMemo(() => value.trim(), [value])
  const error = useMemo(() => {
    if (!touched) return ''
    if (!trimmed) return 'Name is required.'
    if (trimmed === currentName) return 'Enter a different name.'
    if (/[\\/:*?"<>|]+/.test(trimmed)) return 'Name contains invalid characters.'
    if (taken.has(trimmed)) return 'A different file already uses this name. Please choose another.'
    return ''
  }, [touched, trimmed, currentName, taken])
  const canSubmit =
    trimmed.length > 0 && trimmed !== currentName && !/[\\/:*?"<>|]+/.test(trimmed) && !taken.has(trimmed)
  const handleSubmit = async () => {
    if (!canSubmit || submitting) {
      setTouched(true)
      return
    }
    try {
      setSubmitting(true)
      await onProceed(trimmed)
    } finally {
      safeSetState(isMountedRef, setSubmitting)(false)
    }
  }
  const onKeyDown: React.KeyboardEventHandler<HTMLInputElement> = e => {
    if (e.key === 'Enter') {
      e.preventDefault()
      void handleSubmit()
    } else if (e.key === 'Escape') {
      e.preventDefault()
      onCancelClick()
    }
  }
  const modalRoot = (document.querySelector('.fm-main') as HTMLElement) || document.body
  return createPortal(
    <div className="fm-modal-container fm-rename-modal">
      <div className="fm-modal-window">
        <div className="fm-modal-window-header">
          <EditIcon size="21px" />
          <span className="fm-main-font-color">Rename file</span>
        </div>
        <div className="fm-modal-window-body">
          <div className="fm-modal-white-section">
            <label htmlFor="fm-rename-input" className="fm-soft-text" style={{ display: 'block', marginBottom: 8 }}>
              New name
            </label>
            <input
              id="fm-rename-input"
              ref={inputRef}
              type="text"
              className="fm-input fm-rename-input"
              value={value}
              onChange={e => setValue(e.target.value)}
              onBlur={() => setTouched(true)}
              onKeyDown={onKeyDown}
              placeholder="Enter a new file name"
              maxLength={maxFileNameLength}
            />
            {error && (
              <div className="fm-error-text" style={{ marginTop: 8 }}>
                {error}
              </div>
            )}
            <div className="fm-soft-text" style={{ marginTop: 10, fontSize: 12 }}>
              This creates a new version that only changes metadata (no re-upload).
            </div>
          </div>
        </div>
        <div className="fm-modal-window-footer fm-space-between">
          <Button label="Cancel" variant="secondary" onClick={onCancelClick} />
          <Button
            label="Rename"
            variant="primary"
            onClick={() => void handleSubmit()}
            disabled={!canSubmit || submitting}
          />
        </div>
      </div>
    </div>,
    modalRoot,
  )
 }
@@ -0,0 +1,108 @@
 .fm-drive-item-info {
  display: flex;
  gap: 4px;
  flex-direction: column;
  color: rgb(31, 41, 55);
  font-weight: 500;
  transition: background-color 0.3s;
  flex: 1;
  min-width: 0;
  .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;
  min-width: 0;
 }
 .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: 4px;
  position: relative;
  & > span {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .fm-tooltip-wrapper {
    flex-shrink: 0;
    margin-left: 0;
    position: relative;
    z-index: 10;
    filter: none !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }
  &.fm-drive-item-capacity-updating {
    & > span {
      filter: blur(2px);
      opacity: 0.6;
      pointer-events: none;
    }
    // Keep tooltip interactive even when capacity is updating
    .fm-tooltip-wrapper {
      filter: none;
      opacity: 1;
      pointer-events: auto;
    }
    transition: all 0.3s ease;
  }
 }
 .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; }
@@ -0,0 +1,462 @@
 import { ReactElement, useState, useContext, useEffect, useMemo, useCallback, useRef, memo } 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, ProgressDestroyModal } from '../../DestroyDriveModal/DestroyDriveModal'
 import { UpgradeDriveModal } from '../../UpgradeDriveModal/UpgradeDriveModal'
 import { UpgradeTimeoutModal } from '../../UpgradeTimeoutModal/UpgradeTimeoutModal'
 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, handleDestroyAndForgetDrive } from '../../../utils/bee'
 import { Context as SettingsContext } from '../../../../../providers/Settings'
 import { truncateNameMiddle } from '../../../utils/common'
 import { Tooltip } from '../../Tooltip/Tooltip'
 import { TOOLTIPS } from '../../../constants/tooltips'
 import { FILE_MANAGER_EVENTS, UPLOAD_POLLING_TIMEOUT_MS } from '../../../constants/common'
 import { useStampPolling } from '../../../hooks/useStampPolling'
 function useDriveEventListeners(
  driveId: string,
  handleUpgradeStart: (eventDriveId: string, id: string) => void,
  handleUpgradeEnd: (
    eventDriveId: string,
    id: string,
    success: boolean,
    error: string | undefined,
    updatedStamp?: PostageBatch,
  ) => void,
  handleUpgradeTimeout: (eventDriveId: string, id: string) => void,
  handleFileUploaded: (e: Event) => void,
 ) {
  useEffect(() => {
    const onStart = (e: Event) => {
      const { driveId: eventDriveId } = (e as CustomEvent).detail || {}
      handleUpgradeStart(eventDriveId, driveId)
    }
    const onEnd = (e: Event) => {
      const { driveId: eventDriveId, success, error, updatedStamp } = (e as CustomEvent).detail || {}
      handleUpgradeEnd(eventDriveId, driveId, success, error, updatedStamp)
    }
    const onTimeout = (e: Event) => {
      const { driveId: eventDriveId } = (e as CustomEvent).detail || {}
      handleUpgradeTimeout(eventDriveId, driveId)
    }
    window.addEventListener(FILE_MANAGER_EVENTS.DRIVE_UPGRADE_START, onStart as EventListener)
    window.addEventListener(FILE_MANAGER_EVENTS.DRIVE_UPGRADE_END, onEnd as EventListener)
    window.addEventListener(FILE_MANAGER_EVENTS.DRIVE_UPGRADE_TIMEOUT, onTimeout as EventListener)
    window.addEventListener(FILE_MANAGER_EVENTS.FILE_UPLOADED, handleFileUploaded as EventListener)
    return () => {
      window.removeEventListener(FILE_MANAGER_EVENTS.DRIVE_UPGRADE_START, onStart as EventListener)
      window.removeEventListener(FILE_MANAGER_EVENTS.DRIVE_UPGRADE_END, onEnd as EventListener)
      window.removeEventListener(FILE_MANAGER_EVENTS.DRIVE_UPGRADE_TIMEOUT, onTimeout as EventListener)
      window.removeEventListener(FILE_MANAGER_EVENTS.FILE_UPLOADED, handleFileUploaded as EventListener)
    }
  }, [driveId, handleUpgradeStart, handleUpgradeEnd, handleUpgradeTimeout, handleFileUploaded])
 }
 interface DriveModalsProps {
  isUpgradeDriveModalOpen: boolean
  setIsUpgradeDriveModalOpen: (open: boolean) => void
  isUpgradeTimeoutModalOpen: boolean
  actualStamp: PostageBatch
  drive: DriveInfo
  setErrorMessage?: (error: string) => void
  isUpgrading: boolean
  isCapacityUpdating: boolean
  isDestroying: boolean
  setIsProgressModalOpen: (open: boolean) => void
  isProgressModalOpen: boolean
  isDestroyDriveModalOpen: boolean
  setIsDestroyDriveModalOpen: (open: boolean) => void
  doDestroy: () => Promise<void>
  onCancelTimeout: () => void
 }
 function DriveModals({
  isUpgradeDriveModalOpen,
  setIsUpgradeDriveModalOpen,
  isUpgradeTimeoutModalOpen,
  actualStamp,
  drive,
  setErrorMessage,
  isUpgrading,
  isCapacityUpdating,
  isDestroying,
  setIsProgressModalOpen,
  isProgressModalOpen,
  isDestroyDriveModalOpen,
  setIsDestroyDriveModalOpen,
  doDestroy,
  onCancelTimeout,
 }: DriveModalsProps): ReactElement | null {
  return (
    <>
      {isUpgradeDriveModalOpen && (
        <UpgradeDriveModal
          stamp={actualStamp}
          drive={drive}
          onCancelClick={() => setIsUpgradeDriveModalOpen(false)}
          setErrorMessage={setErrorMessage}
        />
      )}
      {isUpgradeTimeoutModalOpen && <UpgradeTimeoutModal driveName={drive.name} onOk={onCancelTimeout} />}
      {isUpgrading && (
        <div className="fm-drive-item-creating-overlay" aria-live="polite">
          <div className="fm-mini-spinner" />
          <span>Upgrading drive…</span>
        </div>
      )}
      {isCapacityUpdating && !isUpgrading && (
        <div className="fm-drive-item-creating-overlay" aria-live="polite">
          <div className="fm-mini-spinner" />
          <span>Updating capacity…</span>
        </div>
      )}
      {isDestroying && (
        <div
          className="fm-drive-item-creating-overlay"
          aria-live="polite"
          onClick={() => setIsProgressModalOpen(true)}
          style={{ cursor: 'pointer' }}
          title="Click to show progress modal"
        >
          <div className="fm-mini-spinner" />
          <span>Destroying drive…</span>
        </div>
      )}
      {isProgressModalOpen && isDestroying && (
        <ProgressDestroyModal drive={drive} onMinimize={() => setIsProgressModalOpen(false)} />
      )}
      {isDestroyDriveModalOpen && (
        <DestroyDriveModal
          drive={drive}
          onCancelClick={() => setIsDestroyDriveModalOpen(false)}
          doDestroy={doDestroy}
        />
      )}
    </>
  )
 }
 interface DriveItemProps {
  drive: DriveInfo
  stamp: PostageBatch
  isSelected: boolean
  setErrorMessage?: (error: string) => void
 }
 function DriveItemComponent({ drive, stamp, isSelected, setErrorMessage }: DriveItemProps): ReactElement {
  const { fm, adminDrive, files, setShowError, refreshStamp } = useContext(FMContext)
  const { beeApi } = useContext(SettingsContext)
  const driveId = drive.id.toString()
  const [isHovered, setIsHovered] = useState(false)
  const [isDestroyDriveModalOpen, setIsDestroyDriveModalOpen] = useState(false)
  const [isProgressModalOpen, setIsProgressModalOpen] = useState(false)
  const [isUpgradeDriveModalOpen, setIsUpgradeDriveModalOpen] = useState(false)
  const [isUpgradeTimeoutModalOpen, setIsUpgradeTimeoutModalOpen] = useState(false)
  const [isUpgrading, setIsUpgrading] = useState(false)
  const [isCapacityUpdating, setIsCapacityUpdating] = useState(false)
  const [isDestroying, setIsDestroying] = useState(false)
  const [actualStamp, setActualStamp] = useState<PostageBatch>(stamp)
  const batchIDRef = useRef(stamp.batchID)
  const isUpgradingRef = useRef(false)
  const actualStampRef = useRef(actualStamp)
  const startPollingRef = useRef<((stamp: PostageBatch) => void) | null>(null)
  const stopPollingRef = useRef<(() => void) | null>(null)
  useEffect(() => {
    actualStampRef.current = actualStamp
  }, [actualStamp])
  const handleStampUpdated = useCallback((updatedStamp: PostageBatch) => {
    setActualStamp(updatedStamp)
    batchIDRef.current = updatedStamp.batchID
  }, [])
  const handlePollingStateChange = useCallback((isPolling: boolean) => {
    setIsCapacityUpdating(isPolling)
  }, [])
  const { startPolling, stopPolling } = useStampPolling({
    onStampUpdated: handleStampUpdated,
    onPollingStateChange: handlePollingStateChange,
    refreshStamp,
    timeout: UPLOAD_POLLING_TIMEOUT_MS,
  })
  useEffect(() => {
    startPollingRef.current = startPolling
  }, [startPolling])
  useEffect(() => {
    stopPollingRef.current = stopPolling
  }, [stopPolling])
  const { showContext, pos, contextRef, setPos, setShowContext } = useContextMenu<HTMLDivElement>()
  const { setView, setActualItemView } = useView()
  useEffect(() => {
    if (isUpgradingRef.current) {
      return
    }
    if (actualStamp.batchID.toString() !== stamp.batchID.toString()) {
      setActualStamp(stamp)
      batchIDRef.current = stamp.batchID
      return
    }
    const incomingSize = stamp.size.toBytes()
    const currentSize = actualStamp.size.toBytes()
    const incomingExpiry = stamp.duration.toEndDate().getTime()
    const currentExpiry = actualStamp.duration.toEndDate().getTime()
    if (incomingSize > currentSize || incomingExpiry > currentExpiry) {
      setActualStamp(stamp)
      batchIDRef.current = stamp.batchID
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [stamp])
  useEffect(() => {
    return () => {
      if (stopPollingRef.current) {
        stopPollingRef.current()
      }
    }
  }, [])
  function handleMenuClick(e: React.MouseEvent) {
    setShowContext(true)
    setPos({ x: e.clientX, y: e.clientY })
  }
  const handleUpgradeStart = useCallback((driveId: string, id: string) => {
    if (driveId !== id) return
    isUpgradingRef.current = true
    setIsUpgrading(true)
  }, [])
  const handleUpgradeEnd = useCallback(
    (driveId: string, id: string, success: boolean, error: string | undefined, updatedStamp?: PostageBatch) => {
      if (driveId !== id) return
      const resetUpgrading = () => {
        setIsUpgrading(false)
        isUpgradingRef.current = false
      }
      if (!success && error) {
        resetUpgrading()
        setErrorMessage?.(error)
        setShowError(true)
        return
      }
      if (updatedStamp) {
        setActualStamp(updatedStamp)
        batchIDRef.current = updatedStamp.batchID
        setTimeout(resetUpgrading, 300)
      } else {
        resetUpgrading()
      }
    },
    [setErrorMessage, setShowError],
  )
  const doDestroy = useCallback(async () => {
    const closeModals = () => {
      setIsDestroyDriveModalOpen(false)
      setIsDestroying(false)
      setIsProgressModalOpen(false)
    }
    setIsDestroyDriveModalOpen(false)
    setIsProgressModalOpen(true)
    setIsDestroying(true)
    await handleDestroyAndForgetDrive({
      beeApi,
      fm,
      drive,
      isDestroy: true,
      adminDrive,
      onSuccess: closeModals,
      onError: e => {
        closeModals()
        setErrorMessage?.(`Error destroying drive: ${drive.name}: ${e}`)
        setShowError(true)
      },
    })
  }, [beeApi, fm, drive, adminDrive, setErrorMessage, setShowError])
  const handleUpgradeTimeout = useCallback(
    (eventDriveId: string, id: string) => {
      if (eventDriveId !== id) return
      setIsUpgradeTimeoutModalOpen(true)
    },
    [setIsUpgradeTimeoutModalOpen],
  )
  const handleCancelTimeout = useCallback(() => {
    setIsUpgrading(false)
    isUpgradingRef.current = false
    setIsUpgradeTimeoutModalOpen(false)
    if (startPollingRef.current && actualStampRef.current) {
      startPollingRef.current(actualStampRef.current)
    }
  }, [])
  const handleFileUploaded = useCallback(
    (e: Event) => {
      const { fileInfo } = (e as CustomEvent).detail || {}
      if (!fileInfo || fileInfo.driveId !== driveId || !startPollingRef.current) return
      startPollingRef.current(actualStampRef.current)
    },
    [driveId],
  )
  useDriveEventListeners(driveId, handleUpgradeStart, handleUpgradeEnd, handleUpgradeTimeout, handleFileUploaded)
  const { capacityPct, usedSize, stampSize } = useMemo(() => {
    const filesPerDrive = files.filter(fi => fi.driveId === drive.id.toString())
    return calculateStampCapacityMetrics(actualStamp, filesPerDrive, drive.redundancyLevel, isCapacityUpdating)
  }, [actualStamp, drive, files, isCapacityUpdating])
  const handleDriveClick = useCallback(() => {
    setView(ViewType.File)
    setActualItemView?.(drive.name)
  }, [setView, setActualItemView, drive.name])
  const handleDestroyClick = useCallback(() => {
    setShowContext(false)
    setIsDestroyDriveModalOpen(true)
  }, [setShowContext, setIsDestroyDriveModalOpen])
  const selectedClass = isSelected ? ' fm-drive-item-container-selected' : ''
  const containerClassName = `fm-drive-item-container${selectedClass}`
  const updatingClass = isUpgrading || isCapacityUpdating ? ' fm-drive-item-capacity-updating' : ''
  const capacityClassName = `fm-drive-item-capacity${updatingClass}`
  const driveIcon = isHovered ? <DriveFill size="16px" /> : <Drive size="16px" />
  return (
    <div className={containerClassName} onClick={handleDriveClick}>
      <div
        className="fm-drive-item-info"
        onMouseEnter={() => setIsHovered(true)}
        onMouseLeave={() => setIsHovered(false)}
      >
        <div className="fm-drive-item-header">
          <div className="fm-drive-item-icon">{driveIcon}</div>
          <div>{truncateNameMiddle(drive.name, 35, 8, 8)}</div>
        </div>
        <div className="fm-drive-item-content">
          <div className={capacityClassName}>
            <span>
              Capacity <ProgressBar value={capacityPct} width="64px" /> {usedSize} / {stampSize}
            </span>
            <Tooltip
              label={
                isUpgrading || isCapacityUpdating ? TOOLTIPS.DRIVE_CAPACITY_UPDATING : TOOLTIPS.DRIVE_CAPACITY_INFO
              }
              iconSize="12px"
              disableMargin={true}
            />
          </div>
          <div className={capacityClassName}>
            <span>Expiry date: {actualStamp.duration.toEndDate().toLocaleDateString()}</span>
          </div>
        </div>
      </div>
      <div className="fm-drive-item-actions">
        <MoreFill
          size="13"
          className={`fm-pointer${isUpgrading || isDestroying ? ' fm-disabled' : ''}`}
          onClick={!isUpgrading && !isDestroying ? handleMenuClick : undefined}
          aria-disabled={isUpgrading || isDestroying ? 'true' : 'false'}
        />
        {showContext &&
          createPortal(
            <div
              ref={contextRef}
              className="fm-drive-item-context-menu"
              style={{
                top: pos.y,
                left: pos.x,
              }}
            >
              <ContextMenu>
                <div className="fm-context-item red" onClick={handleDestroyClick}>
                  Destroy entire drive
                </div>
              </ContextMenu>
            </div>,
            document.body,
          )}
        <Button
          label="Upgrade"
          variant="primary"
          size="small"
          disabled={isUpgrading || isDestroying}
          onClick={() => setIsUpgradeDriveModalOpen(true)}
        />
      </div>
      <DriveModals
        isUpgradeDriveModalOpen={isUpgradeDriveModalOpen}
        setIsUpgradeDriveModalOpen={setIsUpgradeDriveModalOpen}
        isUpgradeTimeoutModalOpen={isUpgradeTimeoutModalOpen}
        actualStamp={actualStamp}
        drive={drive}
        setErrorMessage={setErrorMessage}
        isUpgrading={isUpgrading}
        isCapacityUpdating={isCapacityUpdating}
        isDestroying={isDestroying}
        setIsProgressModalOpen={setIsProgressModalOpen}
        isProgressModalOpen={isProgressModalOpen}
        isDestroyDriveModalOpen={isDestroyDriveModalOpen}
        setIsDestroyDriveModalOpen={setIsDestroyDriveModalOpen}
        doDestroy={doDestroy}
        onCancelTimeout={handleCancelTimeout}
      />
    </div>
  )
 }
 function arePropsEqual(prevProps: DriveItemProps, nextProps: DriveItemProps) {
  const driveIdEqual = prevProps.drive.id.toString() === nextProps.drive.id.toString()
  const stampIdEqual = prevProps.stamp.batchID.toString() === nextProps.stamp.batchID.toString()
  const isSelectedEqual = prevProps.isSelected === nextProps.isSelected
  return driveIdEqual && stampIdEqual && isSelectedEqual
 }
 export const MemoizedDriveItem = memo(DriveItemComponent, arePropsEqual)
 export const DriveItem = MemoizedDriveItem
@@ -0,0 +1,113 @@
 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 { handleDestroyAndForgetDrive } from '../../../utils/bee'
 import { ConfirmModal } from '../../ConfirmModal/ConfirmModal'
 import './DriveItem.scss'
 import { truncateNameMiddle } from '../../../utils/common'
 interface Props {
  drive: DriveInfo
  onForgot?: () => Promise<void> | void
  setErrorMessage?: (error: string) => void
 }
 export function ExpiredDriveItem({ drive, onForgot, setErrorMessage }: Props): ReactElement {
  const { fm, adminDrive, setShowError } = useContext(FMContext)
  const [isHovered, setIsHovered] = useState(false)
  const [showForgetConfirm, setShowForgetConfirm] = useState(false)
  const { showContext, pos, contextRef, setPos, setShowContext } = useContextMenu<HTMLDivElement>()
  function handleMenuClick(e: React.MouseEvent) {
    setShowContext(true)
    setPos({ x: e.clientX, y: e.clientY })
  }
  return (
    <div
      className="fm-drive-item-container fm-expired"
      onMouseEnter={() => setIsHovered(true)}
      onMouseLeave={() => setIsHovered(false)}
    >
      <div className="fm-drive-item-info">
        <div className="fm-drive-item-header">
          <div className="fm-drive-item-icon">{isHovered ? <DriveFill size="16px" /> : <Drive size="16px" />}</div>
          <div>{truncateNameMiddle(drive.name, 35, 8, 8)}</div>
        </div>
        <div className="fm-drive-item-content">
          <div className="fm-drive-item-capacity">Stamp expired — files unavailable</div>
        </div>
      </div>
      <div className="fm-drive-item-actions">
        <MoreFill
          size="13"
          className="fm-pointer"
          onClick={handleMenuClick}
          aria-label={`More actions for ${drive.name}`}
        />
        {showContext &&
          createPortal(
            <div
              ref={contextRef}
              className="fm-drive-item-context-menu"
              style={{ top: pos.y, left: pos.x }}
              onClick={e => e.stopPropagation()}
            >
              <ContextMenu>
                <div
                  className="fm-context-item red"
                  onClick={() => {
                    setShowContext(false)
                    setShowForgetConfirm(true)
                  }}
                >
                  Forget drive
                </div>
              </ContextMenu>
            </div>,
            document.body,
          )}
      </div>
      {showForgetConfirm && (
        <ConfirmModal
          title="Forget drive?"
          message={
            <>
              This will remove metadata for the drive with expired stamp <b>Drive Name: {drive.name}</b>{' '}
              <b>Batch Id: {`${drive.batchId.toString().slice(0, 4)}...${drive.batchId.toString().slice(-4)}`}</b>
            </>
          }
          confirmLabel="Forget drive"
          cancelLabel="Keep"
          onCancel={() => setShowForgetConfirm(false)}
          onConfirm={async () => {
            await handleDestroyAndForgetDrive({
              fm,
              drive,
              isDestroy: false,
              adminDrive,
              onSuccess: async () => {
                setShowForgetConfirm(false)
                await onForgot?.()
              },
              onError: () => {
                setShowForgetConfirm(false)
                setErrorMessage?.(`Failed to forget drive ${drive.name}`)
                setShowError(true)
              },
            })
          }}
        />
      )}
    </div>
  )
 }
@@ -0,0 +1,121 @@
 .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-item-description {
  padding: 8px 12px;
  text-align: center;
  color: rgb(75, 85, 99);
  font-size: 14px;
  font-style: italic;
 }
 .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); }
 }
@@ -0,0 +1,306 @@
 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'
 import { truncateNameMiddle } from '../../utils/common'
 import { FILE_MANAGER_EVENTS } from '../../constants/common'
 interface SidebarProps {
  loading: boolean
  errorMessage?: string
  setErrorMessage?: (error: string) => void
 }
 export function Sidebar({ setErrorMessage, loading }: SidebarProps): ReactElement {
  const [hovered, setHovered] = useState<string | null>(null)
  const [isMyDrivesOpen, setIsMyDriveOpen] = useState(true)
  const [isTrashOpen, setIsTrashOpen] = useState(false)
  const [isCreateDriveOpen, setIsCreateDriveOpen] = useState(false)
  const [usableStamps, setUsableStamps] = useState<PostageBatch[]>([])
  const [isDriveCreationInProgress, setIsDriveCreationInProgress] = useState(false)
  const [creatingDriveName, setCreatingDriveName] = useState<string | null>(null)
  const [isExpiredOpen, setIsExpiredOpen] = useState(false)
  const { beeApi } = useContext(SettingsContext)
  const { setView, view } = useView()
  const {
    fm,
    currentDrive,
    currentStamp,
    drives,
    expiredDrives,
    setCurrentDrive,
    setCurrentStamp,
    setShowError,
    syncDrives,
  } = useContext(FMContext)
  useEffect(() => {
    let isMounted = true
    const getStamps = async () => {
      const stamps = await getUsableStamps(beeApi)
      if (isMounted) {
        setUsableStamps([...stamps])
      }
    }
    if (beeApi) {
      getStamps()
    }
    const handleUpgradeEnd = async () => {
      if (isMounted && beeApi) {
        await getStamps()
      }
    }
    window.addEventListener(FILE_MANAGER_EVENTS.DRIVE_UPGRADE_END, handleUpgradeEnd as EventListener)
    return () => {
      isMounted = false
      window.removeEventListener(FILE_MANAGER_EVENTS.DRIVE_UPGRADE_END, handleUpgradeEnd as EventListener)
    }
  }, [beeApi, drives])
  useEffect(() => {
    if (!fm || drives.length === 0) {
      return
    }
    if (!currentDrive) {
      const firstDrive = drives[0]
      setCurrentDrive(firstDrive)
      setView(ViewType.File)
    }
    if (currentDrive && usableStamps.length > 0) {
      const correspondingStamp = usableStamps.find(s => s.batchID.toString() === currentDrive.batchId.toString())
      if (correspondingStamp) {
        setCurrentStamp(correspondingStamp)
      }
    }
  }, [fm, drives, currentDrive, usableStamps, setCurrentDrive, setCurrentStamp, setView, beeApi])
  const handleCreateNewDrive = () => {
    if (isDriveCreationInProgress) {
      return
    }
    setIsCreateDriveOpen(true)
  }
  const isCurrent = (di: DriveInfo) => currentDrive?.id.toString() === di.id.toString()
  return (
    <div className="fm-sidebar">
      <div className="fm-sidebar-content">
        {!loading && (
          <>
            <div
              className={`fm-sidebar-item ${isDriveCreationInProgress ? 'disabled' : ''}`}
              onClick={() => handleCreateNewDrive()}
            >
              <div className="fm-sidebar-item-icon">
                <Add size="16px" />
              </div>
              <div>Create new drive</div>
            </div>
            {isDriveCreationInProgress && (
              <div className="fm-sidebar-item-description">
                {truncateNameMiddle(creatingDriveName || 'Your Drive', 35, 8, 8)} is currently being created.
              </div>
            )}
          </>
        )}
        {isCreateDriveOpen && (
          <CreateDriveModal
            onCancelClick={() => setIsCreateDriveOpen(false)}
            onDriveCreated={() => {
              setIsCreateDriveOpen(false)
              setIsDriveCreationInProgress(false)
              setCreatingDriveName(null)
            }}
            onCreationStarted={(driveName: string) => {
              setIsDriveCreationInProgress(true)
              setCreatingDriveName(driveName)
            }}
            onCreationError={(name: string) => {
              setIsDriveCreationInProgress(false)
              setErrorMessage?.(
                `Error creating drive ${name}. Please try again. Possible causes include insufficient xDAI balance or a lost connection to the RPC.`,
              )
              setShowError(true)
              setCreatingDriveName(null)
              return
            }}
          />
        )}
        <div
          className="fm-sidebar-item"
          onMouseEnter={() => setHovered('my-drives')}
          onMouseLeave={() => setHovered(null)}
          onClick={() => setIsMyDriveOpen(!isMyDrivesOpen)}
        >
          <div className="fm-sidebar-item-icon">
            {isMyDrivesOpen ? <ArrowDown size="16px" /> : <ArrowRight size="16px" />}
          </div>
          <div className="fm-sidebar-item-icon" style={{ opacity: hovered === 'my-drives' ? 1 : 1 }}>
            {hovered === 'my-drives' ? <FolderFill size="16px" /> : <Folder size="16px" />}
          </div>
          <div>My Drives</div>
        </div>
        {isMyDrivesOpen && isDriveCreationInProgress && (
          <div className="fm-drive-item-container fm-drive-item-creating" aria-live="polite">
            <div className="fm-drive-item-info">
              <div className="fm-drive-item-header">
                <div className="fm-drive-item-icon">
                  <Folder size="16px" />
                </div>
              </div>
              <div className="fm-drive-item-content">
                <div className="fm-drive-item-capacity">Initializing drive metadata</div>
              </div>
            </div>
            <div className="fm-drive-item-actions" />
            <div className="fm-drive-item-creating-overlay">
              <div className="fm-mini-spinner" />
              <span>Please wait…</span>
            </div>
          </div>
        )}
        {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 && (
                <div
                  key={d.id.toString()}
                  onClick={() => {
                    setCurrentDrive(d)
                    setCurrentStamp(stamp)
                    setView(ViewType.File)
                  }}
                >
                  <DriveItem drive={d} stamp={stamp} isSelected={isSelected} setErrorMessage={setErrorMessage} />
                </div>
              )
            )
          })}
        {expiredDrives.length > 0 && (
          <>
            <div
              className="fm-sidebar-item"
              onMouseEnter={() => setHovered('expired')}
              onMouseLeave={() => setHovered(null)}
              onClick={() => setIsExpiredOpen(prev => !prev)}
            >
              <div className="fm-sidebar-item-icon">
                {isExpiredOpen ? <ArrowDown size="16px" /> : <ArrowRight size="16px" />}
              </div>
              <div className="fm-sidebar-item-icon">
                {hovered === 'expired' ? <HistoryFill size="16px" /> : <History size="16px" />}
              </div>
              <div>Expired drives</div>
            </div>
            {isExpiredOpen && (
              <div className="fm-drive-items-container fm-drive-items-container-open">
                {expiredDrives.map(d => (
                  <div
                    key={`${d.id.toString()}-expired`}
                    onClick={() => {
                      setCurrentDrive(d)
                      setView(ViewType.Expired)
                    }}
                  >
                    <ExpiredDriveItem
                      drive={d}
                      onForgot={async () => {
                        await syncDrives()
                        setCurrentDrive(drives.length > 0 ? drives[0] : undefined)
                        setView(ViewType.File)
                      }}
                      setErrorMessage={setErrorMessage}
                    />
                  </div>
                ))}
              </div>
            )}
          </>
        )}
        <div
          className="fm-sidebar-item"
          onMouseEnter={() => setHovered(ViewType.Trash)}
          onMouseLeave={() => setHovered(null)}
          onClick={() => setIsTrashOpen(!isTrashOpen)}
        >
          <div className="fm-sidebar-item-icon">
            {isTrashOpen ? <ArrowDown size="16px" /> : <ArrowRight size="16px" />}
          </div>
          <div className="fm-sidebar-item-icon">
            {hovered === ViewType.Trash ? <DeleteFill size="16px" /> : <Delete size="16px" />}
          </div>
          <div>Trash</div>
        </div>
        {isTrashOpen && (
          <div className="fm-drive-items-container fm-drive-items-container-open">
            {drives.map(d => {
              const selected = isCurrent(d) && view === ViewType.Trash
              const stamp = usableStamps.find(s => s.batchID.toString() === d.batchId.toString() && !d.isAdmin)
              return (
                <div
                  key={`${d.id.toString()}-trash`}
                  className={`fm-sidebar-item fm-trash-item${selected ? ' is-selected' : ''}`}
                  onClick={() => {
                    setCurrentDrive(d)
                    setCurrentStamp(stamp)
                    setView(ViewType.Trash)
                  }}
                  title={`${d.name} Trash`}
                >
                  {truncateNameMiddle(d.name, 35, 8, 8)} Trash
                </div>
              )
            })}
          </div>
        )}
      </div>
      {isDriveCreationInProgress && (
        <div className="fm-sidebar-drive-creation">Creating drive, please do not reload</div>
      )}
    </div>
  )
 }
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
bee-worker	b0f00a624a	chore(master): release 0.33.5 (#719 ) * chore(master): release 0.33.5 * fix: update changelog --------- Co-authored-by: Ferenc Sárai <sarai.ferenc@gmail.com>	2026-02-17 17:37:07 +01:00
Ferenc Sárai	9e1036ac29	fix: link_randomuuid_cache (#718 ) * fix: [SPDV-828] use react router link instead of href * fix: auto import issue * fix: replace randomuuid with getRandomValues= * fix: reset FM states if state is invalid * fix: use no-cache for stamp fetch * fix: clear cache and reload message * fix: shallReset flag * fix: identify browser platform and set help url accordingly * fix: edge browser detection * fix: use fallback chrome and verify for safari --------- Co-authored-by: Nandor Komlodi <nandor.komlodi@gmail.com> Co-authored-by: Balint Ujvari <balint.ujvari@solarpunk.buzz>	2026-02-17 17:19:10 +01:00
bee-worker	beacd5b98e	chore(master): release 0.33.4 (#716 )	2026-01-26 13:19:08 +01:00
Bálint Ujvári	0d5138f5bc	Fix: file-manager and swarm-desktop bugs (#714 ) - drive capacity display with stamp polling - download/upload progress handling - overlay and tooltip issues - FileMaganger readme - ultra-light mode handling - account feed view page - download media files - remove not found syncing link - fix ultra light node wallet page - tooltip issues --------- Co-authored-by: Andrei Mitrea <andrei.mitrea.hq@gmail.com> Co-authored-by: nidishk <nidishkrishnan45@gmail.com> Co-authored-by: Ferenc Sárai <sarai.ferenc@gmail.com> Co-authored-by: Nándor Komlódi <nandor.komlodi@gmail.com> Co-authored-by: rolandlor <33499567+rolandlor@users.noreply.github.com>	2026-01-26 12:57:14 +01:00
Not Darko	ecadafd21d	[ci] Update npm publish workflow for new node version	2026-01-05 19:03:59 +01:00
bee-worker	369bd275c4	chore(master): release 0.33.3 (#711 )	2025-11-17 13:34:32 +01:00
Ferenc Sárai	6d28653bb0	fix: add formbricks environment variables to workflow files (#709 )	2025-11-17 13:25:32 +01:00
bee-worker	aacb109e3f	chore(master): release 0.33.2 (#708 )	2025-11-14 15:34:50 +01:00
Ferenc Sárai	82e7c78a81	fix: clarify installation instructions in README (#707 )	2025-11-14 15:27:12 +01:00
Bálint Ujvári	c8fbf504e7	chore: set formbricks env in pull_request workflow (#103 ) (#706 )	2025-11-14 14:26:14 +01:00
bee-worker	1e52adddf6	chore(master): release 0.33.1 (#705 )	2025-11-13 19:09:37 +01:00
Cafe137	096522aa8a	fix: put back external wallet balance context (#704 ) * fix: put back external wallet balance context * fix: include top up index page * fix: include gift code index page * fix: add BalanceProvider	2025-11-13 19:00:35 +01:00
bee-worker	5fdcdfb444	chore(master): release 0.33.0 (#698 )	2025-11-12 11:47:45 +01:00
Bálint Ujvári	5bfe2a0331	Feat: FileManager (#98 ) (#703 ) * feat: add file manager module - Complete file manager implementation with UI/UX - Add drive management functionality - Add file upload/download with progress tracking - Add stamp integration and handling - Add bulk operations and context menus Co-authored-by: Roland Seres <roland.seres90@gmail.com> Co-authored-by: nidishk <nidishkrishnan45@gmail.com>	2025-11-12 11:26:00 +01:00
Cafe137	1249c0df71	feat: bee-js revamp (#690 ) * chore: initial commit * refactor: remove unnecessary wrappers * style: add missing newline * chore: bump bee-js * chore: ignore any cast in fdp * fix: remove cid import * fix: make TextEncoder and TextDecoder available in jest * refactor: dedupe stamp ttl second conversion * refactor: use convenience methods from bee-js * feat: update to bee-js for restored ens support * fix: bump bee-js to get download fix * fix: resolve feed before downloading reference * fix: fix token displays * fix: fix token input modal error message * refactor: remove wallet balance provider * chore: remove dead code * refactor: upcoming bee js 0.15.0 (#692) * chore: initial commit * fix: do not break page when duration seconds is 0 * ci: remove cache * chore: upgrade bee-js * feat: bee-js and bee v2.6 compatibility * chore: switch upcoming/bee-js to ethersphere/bee-js	2025-07-16 17:10:14 +02:00
bee-worker	082a8f52ef	chore(master): release 0.32.0 (#689 )	2025-03-12 12:34:55 +01:00
Levente Kiss	bcd3d50b42	feat: vod display (#686 ) * feat: preview for html5 supported videos * fix: handle out of limit tags * feat: support preview on the donwload screen * refactor: rework meta and preview handling to be more general * fix: missing meta * fix: do not allow maybe or probably types * fix: make the media check more strict --------- Co-authored-by: Levente Kiss <levente.kiss@solarpunk.bzz>	2025-02-12 11:35:46 +01:00
bee-worker	f695ac3a1c	chore(master): release 0.31.0 (#688 )	2025-01-13 14:57:16 +01:00
Ferenc Sárai	a6125b3d0b	feat: remove experimental FDP menu item (#687 ) Co-authored-by: Ferenc Sárai <ferenc.sarai@solarpunk.buzz>	2025-01-13 14:43:10 +01:00
bee-worker	e01d9fe3d7	chore(master): release 0.30.0 (#675 )	2024-11-25 12:35:42 +01:00
Cafe137	6294bb0a7b	fix: allow changing api url (#676 ) * fix: allow changing api url * chore: bump ci * fix: add missing hook dependency	2024-11-25 11:17:27 +01:00
Cafe137	fbb2ed8a57	feat: update map data (#684 )	2024-11-25 10:47:30 +01:00
Cafe137	aef6c07371	chore: update bee-js (#683 )	2024-11-25 09:51:14 +01:00
Cafe137	ed75198528	ci: remove update supported bee action (#682 )	2024-11-25 09:27:24 +01:00
Cafe137	d0c94b7316	feat: add experimental fdp (#681 ) * feat: add experimental fdp * ci: update swarm-actions to v1 * fix: fix eslint violations * refactor: decaf	2024-11-21 12:43:30 +01:00
Cafe137	63f338075b	fix: explicitly define type 0 transaction (#674 )	2024-10-03 15:27:17 +02:00
bee-worker	4cb0bcd3b9	chore(master): release 0.29.0 (#668 )	2024-07-30 23:24:02 +02:00
Cafe137	01b1b39c42	feat: clarify labels and syncing (#670 )	2024-07-17 19:30:21 +02:00
Cafe137	8558860f0a	feat: polish app (#669 )	2024-07-17 15:49:22 +02:00
tamas6	b4ebfc7c3f	fix: clarify withdraw and deposit message (#654 ) * fix: clear withdraw/deposit message * fix: withdraw/deposit message shorten	2024-07-17 14:07:45 +02:00
bee-worker	a47de8fcb5	chore(master): release 0.28.0 (#667 )	2024-06-18 14:46:52 +02:00
Cafe137	e9ebe33d51	feat: upgrade bee-js to 7.0.3 (#666 )	2024-06-18 14:46:04 +02:00
bee-worker	4c06ff5d8e	chore(master): release 0.27.0 (#665 )	2024-06-11 21:26:45 +02:00
rampall	999399fb08	feat: add redeem shortcut to sidebar	2024-06-11 21:22:11 +02:00
bee-worker	a00ca77b3e	chore(master): release 0.26.2 (#663 )	2024-06-05 06:56:12 +02:00
Cafe137	cae90c1a82	fix: merge version and health check (#662 )	2024-06-05 06:55:40 +02:00
bee-worker	7f169bbabd	chore(master): release 0.26.1 (#660 )	2024-06-04 01:29:02 +02:00
Cafe137	a5d4ecf045	fix: add bee version (#659 )	2024-06-04 01:25:28 +02:00
bee-worker	1e67de0242	chore(master): release 0.26.0 (#652 )	2024-06-04 00:19:43 +02:00
Cafe137	8cbd812a2c	feat: merge api (#658 )	2024-06-04 00:07:01 +02:00
rolandlor	b3f521ca20	fix: correct the bee version detection (#645 ) * feat: Github repository link to ethersphere/bee-dashboard * fix: correct the Bee version detection	2024-01-10 10:57:55 +01:00
Levente Kiss	79bb315401	feat: wait for upload sync (#649 ) * feat: add basic progress bar (#605) * feat: add syncing to share page (#605) * refactor: use the documentation text comp (#605) * refactor: move sync logic to new comp (#605) * refactor: optimize sync check (#605) * chore: linting (#605) --------- Co-authored-by: Levente Kiss <levente.kiss@solarpunk.bzz>	2024-01-08 22:56:31 +01:00
Levente Kiss	5871223203	feat: display effective capacity (#643 ) * feat: add stamp effective volume display (#636) * refactor: make it cleaner (#636) --------- Co-authored-by: Levente Kiss <levente.kiss@solarpunk.bzz>	2024-01-08 22:54:32 +01:00
Ferenc Sárai	cc91f1d64c	feat: show syncing info (#647 ) Co-authored-by: Ferenc Sárai <ferenc.sarai@solarpunk.buzz>	2024-01-08 22:53:01 +01:00
Vojtech Simetka	e287845f7c	chore: update code owners (#651 )	2024-01-08 22:51:54 +01:00
bee-worker	16ffffb0c4	chore(master): release 0.25.0 (#637 )	2023-12-04 22:32:19 +01:00
Cafe137	080d9f2c2a	refactor: clean up postage stamp screens (#642 ) * refactor: clean up postage stamp screens * fix: add immutable flag	2023-12-04 22:28:44 +01:00
rolandlor	4f9abc614e	feat: update postage stamp creation screen (#641 ) * style: UI changes for postage stamp * feat: New postage stamp standard page --------- Co-authored-by: Seres Roland <seresroland@Seres-MBP.home>	2023-12-04 22:01:51 +01:00
Cafe137	20a051b658	fix: put stamp input error handling in state (#640 )	2023-11-20 14:59:00 +01:00
Ferenc Sárai	0c2ac0c454	feat: improve topup and dilute ux Co-authored-by: Ferenc Sárai <ferenc.sarai@solarpunk.buzz>	2023-11-20 14:00:42 +01:00
Ferenc Sárai	8802d20555	style: add padding to files download (#387 ) (#639 ) Co-authored-by: Ferenc Sárai <ferenc.sarai@solarpunk.buzz>	2023-11-20 13:59:40 +01:00
zol1981	7fa1cb0ccf	fix: add missing stamp labels and fix inputs (#634 ) * fix issue #630, #606 * fix: Stamp Labels #630, Entering * into amount #606 * #606 Entering * into amount * fix: inputs eliminating warnings --------- Co-authored-by: Zoltán Mihály <zolmac@Zoltans-MacBook-Pro.local>	2023-11-08 14:15:34 +01:00
Ferenc Sárai	bab08e1df2	style: add padding to account chequebook (#635 ) Co-authored-by: Ferenc Sárai <ferenc.sarai@solarpunk.buzz>	2023-11-07 12:33:28 +01:00
bee-worker	d91c334cf8	chore(master): release 0.24.1 (#629 )	2023-10-18 15:48:48 +02:00
rampall	bce93ce3cd	fix: update `swap-endpoint` to `blockchain-rpc-endpoint` (#628 )	2023-10-18 15:42:06 +02:00
bee-worker	8367f2b76a	chore(master): release 0.24.0 (#621 )	2023-08-12 00:47:34 +02:00
Cafe137	055a3002b3	feat: add stamp dilute and topup (#619 ) * feat: add stamp dilute and topup * fix: remove any * chore: bump bee-js * chore: remove obsolete workaround	2023-08-12 00:41:10 +02:00