feat: renterd multipart remote uploads

.changeset/ninety-toes-cheer.md

@@ -0,0 +1,5 @@
+---
+'renterd': minor
+---
+
+Buckets now have a third view for viewing all active uploads, both local and from other sessions.

.changeset/short-ducks-press.md

@@ -0,0 +1,5 @@
+---
+'renterd': minor
+---
+
+Remote file uploads can now be aborted from the uploads explorer.

.changeset/tame-wolves-nail.md

@@ -0,0 +1,5 @@
+---
+'renterd': minor
+---
+
+The transfers bar now only lists downloads and shows two buttons with one navigating to the new uploads list.

apps/renterd/components/Files/FilesCmd/index.tsx

@@ -50,8 +50,8 @@ export function FilesCmd({
           currentPage={currentPage}
           commandPage={commandPage}
           onSelect={() => {
-            if (!router.pathname.startsWith(routes.files.index)) {
-              router.push(routes.files.index)
+            if (!router.pathname.startsWith(routes.buckets.index)) {
+              router.push(routes.buckets.index)
             }
             closeDialog()
             afterSelect()

apps/renterd/components/Files/FilesExplorerModeButton.tsx

@@ -1,10 +1,10 @@
 import { Button, Tooltip } from '@siafoundation/design-system'
-import { BucketIcon, Earth16, Folder16 } from '@siafoundation/react-icons'
+import { BucketIcon } from '@siafoundation/react-icons'
 import { useFilesManager } from '../../contexts/filesManager'
+import { FilesExplorerModeContextMenu } from './FilesExplorerModeContextMenu'
 
 export function FilesExplorerModeButton() {
-  const { isViewingBuckets, toggleExplorerMode, activeExplorerMode } =
-    useFilesManager()
+  const { isViewingBuckets } = useFilesManager()
 
   if (isViewingBuckets) {
     return (
@@ -18,16 +18,5 @@ export function FilesExplorerModeButton() {
     )
   }
 
-  return (
-    <Button
-      onClick={toggleExplorerMode}
-      tip={
-        activeExplorerMode === 'directory'
-          ? 'Viewing directory explorer'
-          : 'Viewing all bucket files'
-      }
-    >
-      {activeExplorerMode === 'directory' ? <Folder16 /> : <Earth16 />}
-    </Button>
-  )
+  return <FilesExplorerModeContextMenu />
 }

apps/renterd/components/Files/FilesExplorerModeContextMenu.tsx

@@ -0,0 +1,64 @@
+import {
+  Button,
+  DropdownMenu,
+  DropdownMenuItem,
+  DropdownMenuLeftSlot,
+} from '@siafoundation/design-system'
+import { CloudUpload16, Earth16, Folder16 } from '@siafoundation/react-icons'
+import { useFilesManager } from '../../contexts/filesManager'
+import { useUploads } from '../../contexts/uploads'
+
+export function FilesExplorerModeContextMenu() {
+  const { activeExplorerMode, setExplorerModeDirectory, setExplorerModeFlat } =
+    useFilesManager()
+  const { isViewingUploads, navigateToUploads } = useUploads()
+
+  return (
+    <DropdownMenu
+      trigger={
+        <Button
+          tipSide="bottom"
+          tip={
+            isViewingUploads
+              ? 'Viewing uploads'
+              : activeExplorerMode === 'directory'
+              ? 'Viewing directory explorer'
+              : 'Viewing all bucket files'
+          }
+        >
+          {isViewingUploads ? (
+            <CloudUpload16 />
+          ) : activeExplorerMode === 'directory' ? (
+            <Folder16 />
+          ) : (
+            <Earth16 />
+          )}
+        </Button>
+      }
+      contentProps={{
+        align: 'start',
+        side: 'bottom',
+        className: 'max-w-[300px]',
+      }}
+    >
+      <DropdownMenuItem onSelect={setExplorerModeDirectory}>
+        <DropdownMenuLeftSlot>
+          <Folder16 />
+        </DropdownMenuLeftSlot>
+        Directory
+      </DropdownMenuItem>
+      <DropdownMenuItem onSelect={setExplorerModeFlat}>
+        <DropdownMenuLeftSlot>
+          <Earth16 />
+        </DropdownMenuLeftSlot>
+        All files
+      </DropdownMenuItem>
+      <DropdownMenuItem onSelect={navigateToUploads}>
+        <DropdownMenuLeftSlot>
+          <CloudUpload16 />
+        </DropdownMenuLeftSlot>
+        Uploads
+      </DropdownMenuItem>
+    </DropdownMenu>
+  )
+}

apps/renterd/components/Files/FilesSearchMenu/index.tsx

@@ -62,8 +62,8 @@ export function FilesSearchMenu({ panel }: Props) {
               beforeSelect()
             }}
             afterSelect={() => {
-              if (!pathname.startsWith(routes.files.index)) {
-                router.push(routes.files.index)
+              if (!pathname.startsWith(routes.buckets.index)) {
+                router.push(routes.buckets.index)
               }
             }}
           />

apps/renterd/components/FilesDirectory/EmptyState/StateNoneYet.tsx

@@ -16,7 +16,7 @@ export function StateNoneYet() {
           drag and drop files or click here to start uploading.
         </Text>
         <LinkButton
-          href={routes.files.index}
+          href={routes.buckets.index}
           onClick={(e) => {
             e.stopPropagation()
           }}

apps/renterd/components/FilesFlat/EmptyState/StateNoneYet.tsx

@@ -15,7 +15,7 @@ export function StateNoneYet() {
           The <Code>{activeBucket}</Code> bucket does not contain any files.
         </Text>
         <LinkButton
-          href={routes.files.index}
+          href={routes.buckets.index}
           onClick={(e) => {
             e.stopPropagation()
           }}

apps/renterd/components/FilesFlat/FilesBreadcrumbMenu.tsx → apps/renterd/components/FilesFlat/FilesFlatBreadcrumbMenu.tsx

@@ -3,7 +3,7 @@ import { ChevronRight16 } from '@siafoundation/react-icons'
 import { useFilesManager } from '../../contexts/filesManager'
 import { FilesExplorerModeButton } from '../Files/FilesExplorerModeButton'
 
-export function FilesBreadcrumbMenu() {
+export function FilesFlatBreadcrumbMenu() {
   const { activeBucketName: activeBucket, setActiveDirectory } =
     useFilesManager()
 
@@ -33,6 +33,17 @@ export function FilesBreadcrumbMenu() {
           >
             {activeBucket}
           </Text>
+          <Text size="16" color="verySubtle" className="flex items-center">
+            <ChevronRight16 />
+          </Text>
+          <Text
+            size="18"
+            weight="semibold"
+            className="flex items-center cursor-pointer"
+            noWrap
+          >
+            All files
+          </Text>
         </div>
       </ScrollArea>
     </div>

apps/renterd/components/FilesFlat/index.tsx

@@ -1,7 +1,7 @@
 import { RenterdSidenav } from '../RenterdSidenav'
 import { routes } from '../../config/routes'
 import { useDialog } from '../../contexts/dialog'
-import { FilesBreadcrumbMenu } from './FilesBreadcrumbMenu'
+import { FilesFlatBreadcrumbMenu } from './FilesFlatBreadcrumbMenu'
 import { RenterdAuthedLayout } from '../RenterdAuthedLayout'
 import { FilesActionsMenu } from './FilesActionsMenu'
 import { FilesStatsMenu } from './FilesStatsMenu'
@@ -16,7 +16,7 @@ export function FilesFlat() {
       navTitle={null}
       routes={routes}
       sidenav={<RenterdSidenav />}
-      nav={<FilesBreadcrumbMenu />}
+      nav={<FilesFlatBreadcrumbMenu />}
       stats={<FilesStatsMenu />}
       actions={<FilesActionsMenu />}
       openSettings={() => openDialog('settings')}

apps/renterd/components/Home/index.tsx

@@ -10,7 +10,7 @@ export function Home() {
   const { openDialog } = useDialog()
 
   useEffect(() => {
-    router.replace(routes.files.index)
+    router.replace(routes.buckets.index)
   }, [router])
 
   return (

apps/renterd/components/RenterdSidenav.tsx

@@ -23,7 +23,7 @@ export function RenterdSidenav() {
       {/* <SidenavItem title="Dashboard" route={routes.home}>
         <HouseIcon />
       </SidenavItem> */}
-      <SidenavItem title="Files" route={routes.files.index}>
+      <SidenavItem title="Files" route={routes.buckets.index}>
         <FolderIcon />
       </SidenavItem>
       <SidenavItem title="Configuration" route={routes.config.index}>

apps/renterd/components/TransferProgress.tsx

@@ -0,0 +1,35 @@
+import { ProgressBar, Text } from '@siafoundation/design-system'
+import { useMemo } from 'react'
+import { upperFirst } from '@technically/lodash'
+
+function getProgress(transfer: { loaded?: number; size?: number }) {
+  return transfer.loaded !== undefined ? transfer.loaded / transfer.size : 1
+}
+
+type Props = {
+  loaded: number
+  size: number
+  status: string
+}
+
+export function TransferProgress({ loaded, size, status }: Props) {
+  const progress = useMemo(() => getProgress({ loaded, size }), [loaded, size])
+  return (
+    <div className="flex flex-col gap-1 w-full">
+      <ProgressBar
+        variant="accent"
+        value={loaded}
+        max={size}
+        className={progress === 1 ? 'animate-pulse' : ''}
+      />
+      <div className="flex gap-2 justify-between">
+        <Text size="12" color="subtle">
+          {upperFirst(status)}
+        </Text>
+        <Text size="12" color="subtle">
+          {(progress * 100).toFixed(0)}%
+        </Text>
+      </div>
+    </div>
+  )
+}