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>

src/modules/filemanager/constants/tooltips.ts

@@ -1,33 +1,64 @@
-// Tooltip content for File Manager
+const getTitleWithStyle = (title: string): string => {
+  return `<div style="font-weight: bold; margin-bottom: 12px; font-size: 14px;">${title}</div>`
+}
+
 export const TOOLTIPS = {
-  // Admin Stamp Creation
-  ADMIN_PREVIOUSLY_CREATED: `<div style="font-weight: bold; margin-bottom: 12px; font-size: 14px;">Use Existing Admin Drive</div>
+  ADMIN_PREVIOUSLY_CREATED: `${getTitleWithStyle('Use Existing Admin Drive')}
 An existing Admin Drive from a previous session can be selected here. This will link the File Manager to that Admin Drive.
 <br/>
 <br/>
 Otherwise, leave this blank and configure a new Admin Drive below.`,
-  ADMIN_DESIRED_LIFETIME: `Defines how long your deposit will cover storage on the network. It’s an estimate, not a fixed expiry - you can top up anytime to extend it.`,
+  ADMIN_DESIRED_LIFETIME: `${getTitleWithStyle('What is Desired Lifetime?')}
+To create the Admin Drive, a one-time deposit is required to pay for its storage on the network.
+<br/>
+<br/>
+This sets the initial period the Admin Drive's information will be paid for on the network. This is not a fixed expiry date. It's the estimated time it will take for the drive's balance to be depleted. You can top up any time to extend the lifetime.
+<br/>
+<br/>
+<b>Warning:</b> The Admin Drive is critical for managing files. If its deposit runs out and it is not renewed, the network will no longer store its data, and access to the File Manager instance will be permanently lost.`,
 
-  ADMIN_SECURITY_LEVEL: `This sets how many encrypted copies of your Admin Drive’s information are stored across the network. Higher levels increase resilience but reduce the available storage capacity.`,
+  ADMIN_SECURITY_LEVEL: `${getTitleWithStyle('What is Security Level?')}
+This controls how many redundant copies of the Admin Drive's core information are created and spread across the network.
+<br/>
+<br/>
+A higher level provides extra protection against data loss in the improbable event of large-scale network disruptions.
+<br/>
+<br/>
+<b>Trade-off:</b> Higher redundancy levels decrease your initial storage, while keeping the initial deposit cost the same for the same Desired Lifetime.`,
 
-  ADMIN_ESTIMATED_COST: `This is a one-time deposit required to create your drive, calculated from the <b>desired lifetime, storage size</b>, and the current <b>storage price.</b>`,
+  ADMIN_ESTIMATED_COST: `${getTitleWithStyle('How is this cost calculated?')}
+This is the one-time deposit of xBZZ tokens required to create the Admin Drive.
+<br/>
+<br/>
+It is calculated based on two factors:<br/>
+1. <b>Desired Lifetime:</b> The desired storage duration.<br/>
+2. <b>Current Network Price:</b> The cost of storage at this moment.
+<br/>
+<br/>
+This deposit is used to pay storage fees on the network over time. The cost is not a one-time purchase but a deposit that will be gradually consumed over time based on the network's storage fees.
+<br/>
+<br/>
+As the deposit depletes, the Admin Drive's lifetime decreases. You can top up the deposit at any time to extend its lifetime.
+<br/>
+<br/>
+<b>Note:</b> This estimate is based on current network conditions and the deposit's depletion rate is subject to change and is contingent upon prevailing market conditions.`,
 
-  ADMIN_PURCHASE_BUTTON: `<div style="font-weight: bold; margin-bottom: 12px; font-size: 14px;">Create Admin Drive</div>
+  ADMIN_PURCHASE_BUTTON: `${getTitleWithStyle('Create Admin Drive')}
 This action will do two things:
 <br/>
 <br/>
 1. It will make a one-time transaction to deposit the Estimated Cost.<br/>
 2. It will create the Admin Drive.`,
 
-  ADMIN_PURCHASE_BUTTON_ALREADY_EXISTED_ADMIN_DRIVE: `<div style="font-weight: bold; margin-bottom: 12px; font-size: 14px;">Create Admin Drive</div>
+  ADMIN_PURCHASE_BUTTON_ALREADY_EXISTED_ADMIN_DRIVE: `${getTitleWithStyle('Create Admin Drive')}
 
 It will create the Admin Drive.`,
 
   // Drive Creation
-  DRIVE_NAME: `<div style="font-weight: bold; margin-bottom: 12px; font-size: 14px;">About Drive Name</div>
+  DRIVE_NAME: `${getTitleWithStyle('About Drive Name')}
 Set a human-readable label for this drive (e.g. Personal files). This name is stored as metadata.`,
 
-  DRIVE_INITIAL_CAPACITY: `<div style="font-weight: bold; margin-bottom: 12px; font-size: 14px;">What is Initial Storage?</div>
+  DRIVE_INITIAL_CAPACITY: `${getTitleWithStyle('What is Initial Storage?')}
 This sets the initial storage capacity. This value is used in combination with lifetime and redundancy, to calculate the initial deposit.
 <br/>
 <br/>
@@ -36,13 +67,13 @@ This sets the initial storage capacity. This value is used in combination with l
 <br/>
 <b>Tip:</b> Selecting a size with a little extra room provides the best flexibility.`,
 
-  DRIVE_DESIRED_LIFETIME: `<div style="font-weight: bold; margin-bottom: 12px; font-size: 14px;">What is Desired Lifetime?</div>
+  DRIVE_DESIRED_LIFETIME: `${getTitleWithStyle('What is Desired Lifetime?')}
 This sets the initial period the drive's information will be paid for on the network. This is not a fixed expiry date. It's the estimated time it will take for the drive's balance to be depleted. You can top up any time to extend the lifetime.
 <br/>
 <br/>
 <b>Warning:</b> If the deposit balance runs out, the drive's data is no longer paid for and will be scheduled for permanent deletion by the network. The rate of depletion is depends upon actual market conditions.`,
 
-  DRIVE_SECURITY_LEVEL: `<div style="font-weight: bold; margin-bottom: 12px; font-size: 14px;">What is Security Level?</div>
+  DRIVE_SECURITY_LEVEL: `${getTitleWithStyle('What is Security Level?')}
 This controls the level of data redundancy for your drive's data.
 <br/>
 <br/>
@@ -51,7 +82,7 @@ Higher levels provide maximum protection against data loss, even in the unlikely
 <br/>
 <b>Trade-off:</b> Higher redundancy levels decreases your initial storage, while keeping the initial deposit cost the same for the same Desired Lifetime.`,
 
-  DRIVE_ESTIMATED_COST: `<div style="font-weight: bold; margin-bottom: 12px; font-size: 14px;">How is this cost calculated?</div>
+  DRIVE_ESTIMATED_COST: `${getTitleWithStyle('How is this cost calculated?')}
 This is the one-time deposit of xBZZ tokens required to fund the drive's storage.
 <br/>
 <br/>
@@ -72,9 +103,33 @@ As the deposit depletes, the drive's lifetime decreases. You can top up the depo
 <b>Note:</b> This estimate is based on current network conditions and the deposit's depletion rate is subject to change and is contingent upon prevailing market conditions.`,
 
   PRIVATE_KEY_MODAL_HEADER: `The Private Key ensures exclusive access to this File Manager instance. It is the user's responsibity to store in a secure and tamper-proof way.`,
-  PRIVATE_KEY_MODAL_GENERATED_KEY: `Advanced users may input a custom key.`,
-  PRIVATE_KEY_MODAL_CONFIRM_KEY: `<div style="font-weight: bold; margin-bottom: 12px; font-size: 14px;">Confirmation Step</div>
+  PRIVATE_KEY_MODAL_GENERATED_KEY: `${getTitleWithStyle('Generated Key')}
+A unique, 64-character secure key has been generated.
+<br/>
+<br/>
+Advanced users can delete this and input a custom key.`,
+  PRIVATE_KEY_MODAL_CONFIRM_KEY: `${getTitleWithStyle('Confirmation Step')}
 This is a final safety check to ensure a copy of the key has been saved before proceeding.`,
-  PRIVATE_KEY_MODAL_KEY_INFO: `<div style="font-weight: bold; margin-bottom: 12px; font-size: 14px;">On This Device Only</div>
+  PRIVATE_KEY_MODAL_KEY_INFO: `${getTitleWithStyle('On This Device Only')}
 For convenience, an encrypted copy of this key is saved in this browser's local storage. This avoids needing to enter it on every visit.`,
+
+  FILE_OPERATION_TRASH: `Note: Moving items to Trash can modify file metadata and history which may cause the node to report a different (sometimes higher) used capacity. This does not upload new data but the displayed usage may change post operation.`,
+
+  FILE_OPERATION_FORGET: `Note: Forgetting hides files from your view but does not delete underlying data on Swarm. Metadata/history changes can affect the reported used capacity. In some cases the UI may show freed visible drive space.`,
+
+  FILE_OPERATION_RESTORE_VERSION: `Note: Restoring versions can alter file metadata and history which may affect the node-reported used capacity. The operation does not upload new data but displayed usage may change post operation.`,
+
+  FILE_OPERATION_RESTORE_FROM_TRASH: `Note: Restoring from Trash can modify file metadata and history which may cause the node to report a different (sometimes higher) used capacity. This does not upload new data but the displayed usage may change post operation.`,
+
+  DRIVE_CAPACITY_UPDATING: `${getTitleWithStyle('Capacity Update in Progress')}
+The drive's capacity is being refreshed after an upgrade or file operation.
+<br/>
+<br/>
+The system is checking the network for the updated stamp information. This process may take a moment depending on network conditions.
+<br/>
+<br/>
+If no update is detected after the polling period, the display will revert to showing the last known values.`,
+
+  DRIVE_CAPACITY_INFO: `${getTitleWithStyle('Drive Capacity')}
+Shows how much storage is used on this drive. Actual usage might be a bit higher than file sizes due to storage overhead.`,
 }