feat(renterd): uploads list local and remote

.changeset/sweet-onions-stare.md

@@ -0,0 +1,5 @@
+---
+'renterd': minor
+---
+
+The uploads list now has two views, one for local uploads only and one for all uploads including from other devices.

apps/renterd/components/TransfersBar.tsx

@@ -16,10 +16,12 @@ export function TransfersBar() {
   const { isUnlockedAndAuthedRoute } = useAppSettings()
   const { downloadsList, downloadCancel, isViewingUploads, navigateToUploads } =
     useFilesManager()
-  const { datasetPageTotal: uploadsPageTotal } = useUploads()
+  const {
+    localUploads: { datasetTotal: uploadsTotal },
+  } = useUploads()
   const [maximized, setMaximized] = useState<boolean>(true)
 
-  const isActiveUploads = !!uploadsPageTotal
+  const isActiveUploads = !!uploadsTotal
   const downloadCount = downloadsList.length
   const isActiveDownloads = !!downloadCount
 
@@ -40,7 +42,7 @@ export function TransfersBar() {
           className="flex gap-1"
         >
           <Upload16 className="opacity-50 scale-75 relative top-px" />
-          Active uploads
+          Active uploads ({uploadsTotal.toLocaleString()})
         </Button>
       ) : null}
       {isActiveDownloads ? (

apps/renterd/components/Uploads/StateNoneYet.tsx

@@ -0,0 +1,47 @@
+import { Code, LinkButton, Text } from '@siafoundation/design-system'
+import { CloudUpload32 } from '@siafoundation/react-icons'
+import { routes } from '../../config/routes'
+import { useFilesManager } from '../../contexts/filesManager'
+import { useUploads } from '../../contexts/uploads'
+
+export function StateNoneYet() {
+  const { activeView } = useUploads()
+  const { activeBucketName: activeBucket } = useFilesManager()
+
+  const href = activeBucket
+    ? routes.buckets.files
+        .replace('[bucket]', activeBucket)
+        .replace('[path]', '')
+    : routes.buckets.index
+
+  return (
+    <div className="flex flex-col gap-10 justify-center items-center h-[400px]">
+      <Text>
+        <CloudUpload32 className="scale-[200%]" />
+      </Text>
+      <div className="flex flex-col gap-3 items-center">
+        <Text color="subtle" className="text-center max-w-[500px]">
+          {activeView === 'localUploads' ? (
+            <>
+              The <Code>{activeBucket}</Code> bucket does not have any active
+              uploads from this session.
+            </>
+          ) : (
+            <>
+              The <Code>{activeBucket}</Code> bucket does not have any active
+              uploads.
+            </>
+          )}
+        </Text>
+        <LinkButton
+          href={href}
+          onClick={(e) => {
+            e.stopPropagation()
+          }}
+        >
+          {activeBucket ? 'View files' : 'View buckets list'}
+        </LinkButton>
+      </div>
+    </div>
+  )
+}

apps/renterd/components/Uploads/UploadsStatsMenu.tsx

@@ -0,0 +1,60 @@
+import {
+  Button,
+  PaginatorKnownTotal,
+  PaginatorMarker,
+} from '@siafoundation/design-system'
+import { useUploads } from '../../contexts/uploads'
+
+export function UploadsStatsMenu() {
+  const {
+    activeData,
+    abortAll,
+    activeView,
+    remoteUploads,
+    localUploads,
+    setActiveView,
+  } = useUploads()
+
+  const paginatorEl =
+    activeView === 'globalUploads' ? (
+      <PaginatorMarker
+        marker={remoteUploads.marker}
+        nextMarker={remoteUploads.nextMarker}
+        isMore={remoteUploads.hasMore}
+        limit={remoteUploads.limit}
+        pageTotal={remoteUploads.datasetPageTotal}
+        isLoading={remoteUploads.datasetState === 'loading'}
+      />
+    ) : (
+      <PaginatorKnownTotal
+        offset={localUploads.offset}
+        limit={localUploads.limit}
+        total={localUploads.datasetPageTotal}
+        isLoading={localUploads.datasetState === 'loading'}
+      />
+    )
+
+  return (
+    <div className="flex gap-3 w-full">
+      <Button
+        onClick={() => setActiveView('localUploads')}
+        variant={activeView === 'localUploads' ? 'active' : 'inactive'}
+      >
+        Local uploads ({localUploads.datasetTotal.toLocaleString()})
+      </Button>
+      <Button
+        onClick={() => setActiveView('globalUploads')}
+        variant={activeView === 'globalUploads' ? 'active' : 'inactive'}
+      >
+        All uploads
+      </Button>
+      <div className="flex-1" />
+      {activeData.datasetPageTotal > 0 && (
+        <Button onClick={abortAll}>
+          Abort ({activeData.datasetPageTotal})
+        </Button>
+      )}
+      {paginatorEl}
+    </div>
+  )
+}

apps/renterd/components/Uploads/UploadsTable.tsx

@@ -1,23 +1,32 @@
-import { Table } from '@siafoundation/design-system'
-import { EmptyState } from './EmptyState'
+import { EmptyState, Table } from '@siafoundation/design-system'
 import { useUploads } from '../../contexts/uploads'
+import { StateNoneYet } from './StateNoneYet'
+import { StateError } from './StateError'
 
 export function UploadsTable() {
   const {
-    visibleColumns,
-    sortableColumns,
-    toggleSort,
-    datasetPage,
-    datasetState,
-    sortField,
-    sortDirection,
+    activeData: { datasetPage },
+    activeTableState: {
+      visibleColumns,
+      sortableColumns,
+      toggleSort,
+      sortField,
+      sortDirection,
+    },
+    activeDatasetState,
   } = useUploads()
   return (
     <div className="relative">
       <Table
         testId="uploadsTable"
-        isLoading={datasetState === 'loading'}
-        emptyState={<EmptyState />}
+        isLoading={activeDatasetState === 'loading'}
+        emptyState={
+          <EmptyState
+            datasetState={activeDatasetState}
+            noneYet={<StateNoneYet />}
+            error={<StateError />}
+          />
+        }
         pageSize={10}
         data={datasetPage}
         columns={visibleColumns}

apps/renterd/components/Uploads/UploadsViewDropdownMenu.tsx

@@ -11,10 +11,12 @@ import { useUploads } from '../../contexts/uploads'
 
 export function UploadsViewDropdownMenu() {
   const {
-    configurableColumns,
-    toggleColumnVisibility,
-    resetDefaultColumnVisibility,
-    visibleColumnIds,
+    activeTableState: {
+      configurableColumns,
+      toggleColumnVisibility,
+      resetDefaultColumnVisibility,
+      visibleColumnIds,
+    },
   } = useUploads()
   return (
     <Popover