feat: directory file sizes, fix utf-8 object paths

.changeset/beige-comics-speak.md

@@ -0,0 +1,5 @@
+---
+'renterd': minor
+---
+
+The files explorer now shows the total size of directories.

.changeset/tidy-dots-double.md

@@ -0,0 +1,5 @@
+---
+'renterd': minor
+---
+
+The files feature now supports UTF-8 directory and file names.

apps/renterd/components/TransfersBar.tsx

@@ -12,8 +12,8 @@ import {
 import { useState } from 'react'
 import { useFiles } from '../contexts/files'
 
-function getProgress(upload: { loaded?: number; total?: number }) {
-  return upload.loaded ? upload.loaded / upload.total : 1
+function getProgress(upload: { loaded?: number; size?: number }) {
+  return upload.loaded ? upload.loaded / upload.size : 1
 }
 
 export function TransfersBar() {
@@ -55,7 +55,7 @@ export function TransfersBar() {
                       <ProgressBar
                         variant="accent"
                         value={upload.loaded}
-                        max={upload.total}
+                        max={upload.size}
                         className={progress === 1 ? 'animate-pulse' : ''}
                       />
                       <div className="flex justify-between mt-1">
@@ -96,7 +96,7 @@ export function TransfersBar() {
                       <ProgressBar
                         variant="accent"
                         value={download.loaded}
-                        max={download.total}
+                        max={download.size}
                         className={progress === 1 ? 'animate-pulse' : ''}
                       />
                       <div className="flex justify-between mt-1">

apps/renterd/contexts/files/columns.tsx

@@ -112,30 +112,16 @@ export const columns: FilesTableColumn[] = [
     id: 'size',
     label: 'size',
     contentClassName: 'justify-end',
-    render: function SizeColumn({ data: { path, isUploading, isDirectory } }) {
-      const obj = useObject({
-        disabled: isUploading || isDirectory,
-        params: {
-          key: encodeURIComponent(path.slice(1)),
-        },
-        config: {
-          swr: {
-            dedupingInterval: 5000,
-          },
-        },
-      })
+    render: function SizeColumn({ data: { size, isUploading } }) {
       if (isUploading) {
         return <LoadingDots />
       }
 
-      if (obj.data?.object) {
+      if (size) {
         return (
           <ValueNum
             size="12"
-            value={(obj.data?.object.Slabs || []).reduce(
-              (acc, s) => acc.plus(s.Length - s.Offset),
-              new BigNumber(0)
-            )}
+            value={new BigNumber(size)}
             variant="value"
             color="subtle"
             format={(v) => humanBytes(v.toNumber())}
@@ -154,7 +140,7 @@ export const columns: FilesTableColumn[] = [
       const obj = useObject({
         disabled: isUploading || isDirectory,
         params: {
-          key: encodeURIComponent(path.slice(1)),
+          key: path.slice(1),
         },
         config: {
           swr: {
@@ -251,7 +237,7 @@ export const columns: FilesTableColumn[] = [
       const obj = useObject({
         disabled: isUploading || isDirectory,
         params: {
-          key: encodeURIComponent(path.slice(1)),
+          key: path.slice(1),
         },
         config: {
           swr: {
@@ -285,7 +271,7 @@ export const columns: FilesTableColumn[] = [
       const obj = useObject({
         disabled: isUploading || isDirectory,
         params: {
-          key: encodeURIComponent(path.slice(1)),
+          key: path.slice(1),
         },
         config: {
           swr: {

apps/renterd/contexts/files/index.tsx

@@ -1,20 +1,25 @@
 import {
   triggerErrorToast,
-  triggerToast, useClientFilteredDataset, useClientFilters, useDatasetEmptyState, useTableState
+  triggerToast,
+  useClientFilteredDataset,
+  useClientFilters,
+  useDatasetEmptyState,
+  useTableState,
 } from '@siafoundation/design-system'
 import {
   useObjectDirectory,
   useObjectDownloadFunc,
-  useObjectUpload
+  useObjectUpload,
 } from '@siafoundation/react-renterd'
+import BigNumber from 'bignumber.js'
 import { sortBy, throttle, toPairs } from 'lodash'
 import { useRouter } from 'next/router'
 import {
   createContext,
   useCallback,
   useContext,
   useMemo,
-  useState
+  useState,
 } from 'react'
 import { TransfersBar } from '../../components/TransfersBar'
 import { useContracts } from '../contracts'
@@ -51,14 +56,14 @@ function useFilesMain() {
   const [uploadsMap, setUploadsMap] = useState<UploadsMap>({})
 
   const updateUploadProgress = useCallback(
-    (obj: { path: string; name: string; loaded: number; total: number }) => {
+    (obj: { path: string; name: string; loaded: number; size: number }) => {
       setUploadsMap((uploads) => ({
         ...uploads,
         [obj.path]: {
           id: obj.path,
           path: obj.path,
           name: obj.name,
-          total: obj.total,
+          size: obj.size,
           loaded: obj.loaded,
           isUploading: true,
           isDirectory: false,
@@ -90,19 +95,19 @@ function useFilesMain() {
             name,
             path,
             loaded: e.loaded,
-            total: e.total,
+            size: e.total,
           }),
         2000
       )
       updateUploadProgress({
         name,
         path,
         loaded: 0,
-        total: 1,
+        size: 1,
       })
       const response = await upload.put({
         params: {
-          key: encodeURIComponent(path.slice(1)),
+          key: path.slice(1),
         },
         payload: file,
         config: {
@@ -130,14 +135,14 @@ function useFilesMain() {
   const [downloadsMap, setDownloadsMap] = useState<UploadsMap>({})
 
   const updateDownloadProgress = useCallback(
-    (obj: { path: string; name: string; loaded: number; total: number }) => {
+    (obj: { path: string; name: string; loaded: number; size: number }) => {
       setDownloadsMap((download) => ({
         ...download,
         [obj.path]: {
           id: obj.path,
           path: obj.path,
           name: obj.name,
-          total: obj.total,
+          size: obj.size,
           loaded: obj.loaded,
           isUploading: false,
           isDirectory: false,
@@ -171,18 +176,18 @@ function useFilesMain() {
           name,
           path,
           loaded: e.loaded,
-          total: e.total,
+          size: e.total,
         })
       }, 2000)
       updateDownloadProgress({
         name,
         path,
         loaded: 0,
-        total: 1,
+        size: 1,
       })
       const response = await download.get(name, {
         params: {
-          key: encodeURIComponent(path.slice(1)),
+          key: path.slice(1),
         },
         config: {
           axios: {
@@ -208,7 +213,7 @@ function useFilesMain() {
 
   const response = useObjectDirectory({
     params: {
-      key: encodeURIComponent(activeDirectoryPath.slice(1)),
+      key: activeDirectoryPath.slice(1),
       // limit: limit,
       // offset: offset,
     },
@@ -226,14 +231,15 @@ function useFilesMain() {
 
     const dataMap: Record<string, ObjectData> = {}
 
-    response.data.entries?.forEach(({ name: path }) => {
+    response.data.entries?.forEach(({ name: path, size }) => {
       // If there is a directory stub file filter it out.
       if (path === activeDirectoryPath) {
         return
       }
       dataMap[path] = {
         id: path,
         path,
+        size: size,
         name: getFilename(path),
         isDirectory: isDirectory(path),
       }

apps/renterd/contexts/files/types.ts

@@ -3,10 +3,10 @@ export type ObjectData = {
   path: string
   name: string
   health?: number
+  size: number
   isDirectory?: boolean
   isUploading?: boolean
   loaded?: number
-  total?: number
 }
 
 export type TableColumnId =