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/components/FileProgressWindow/FileProgressWindow.tsx

@@ -4,26 +4,15 @@ import ArrowDownIcon from 'remixicon-react/ArrowDownSLineIcon'
 import './FileProgressWindow.scss'
 import { GetIconElement } from '../../utils/GetIconElement'
 import { ProgressBar } from '../ProgressBar/ProgressBar'
-import { FileTransferType, TransferBarColor, TransferStatus } from '../../constants/transfers'
-import { capitalizeFirstLetter } from '../../utils/common'
-
-type ProgressItem = {
-  name: string
-  percent?: number
-  size?: string
-  kind?: FileTransferType
-  status?: TransferStatus
-  driveName?: string
-  etaSec?: number
-  elapsedSec?: number
-}
+import { FileTransferType, TransferBarColor, TransferStatus, ProgressItem } from '../../constants/transfers'
+import { capitalizeFirstLetter, truncateNameMiddle } from '../../utils/common'
+import { guessMime } from '../../utils/view'
 
 interface FileProgressWindowProps {
-  numberOfFiles?: number
   items?: ProgressItem[]
   type: FileTransferType
   onCancelClick: () => void
-  onRowClose?: (name: string) => void
+  onRowClose?: (uuid: string) => void
   onCloseAll?: () => void
 }
 
@@ -48,7 +37,6 @@ const formatDuration = (sec?: number) => {
 }
 
 export function FileProgressWindow({
-  numberOfFiles,
   items,
   type,
   onCancelClick,
@@ -57,11 +45,8 @@ export function FileProgressWindow({
 }: FileProgressWindowProps): ReactElement | null {
   const listRef = useRef<HTMLDivElement | null>(null)
   const firstRowRef = useRef<HTMLDivElement | null>(null)
-  const count = items?.length ?? numberOfFiles ?? 0
-  const rows: ProgressItem[] =
-    items && items.length > 0
-      ? items
-      : Array.from({ length: count }, (_, i) => ({ name: `Pending file ${i + 1}`, percent: 0, size: '' }))
+  const count = items?.length ?? 0
+  const rows: ProgressItem[] = items ?? []
 
   const getTransferInfo = (item: ProgressItem, pct?: number) => {
     const transferType = capitalizeFirstLetter(item?.kind ?? type)
@@ -92,6 +77,7 @@ export function FileProgressWindow({
     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`
@@ -152,24 +138,27 @@ export function FileProgressWindow({
 
           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.name}`}
+              key={item.uuid || `${item.name}-${idx}`}
               ref={idx === 0 ? firstRowRef : undefined}
             >
               <div className="fm-file-progress-window-file-type-icon">
-                <GetIconElement size="14" icon={item.name} color="black" />
+                <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">{item.name}</div>
+                    <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}`}>
-                          {item.driveName}
+                          {truncateNameMiddle(item.driveName, 25, 8, 8)}
                         </span>
                       </div>
                     )}
@@ -182,7 +171,7 @@ export function FileProgressWindow({
                   <button
                     className="fm-file-progress-window-row-close"
                     aria-label={rowActionLabel}
-                    onClick={() => onRowClose?.(item.name)}
+                    onClick={() => onRowClose?.(item.uuid)}
                     type="button"
                   >
                     <CloseIcon size="14" />