From 44c4c868036a071b6c32b8b74e3febe5ffc52886 Mon Sep 17 00:00:00 2001
From: Alex Freska <alex.freska@gmail.com>
Date: Fri, 18 Oct 2024 11:44:49 -0400
Subject: [PATCH] feat(renterd): directory mode files multiselect and batch
 delete

---
 apps/hostd/components/ActionsBottomMenu.tsx   |  15 ++
 apps/hostd/components/HostdAuthedLayout.tsx   |   6 +-
 apps/hostd/components/OnboardingBar.tsx       |  54 ++++---
 apps/hostd/pages/_app.tsx                     |   1 +
 apps/renterd-e2e/src/fixtures/files.ts        |  97 ++++++++++-
 .../sample-files}/sample.txt                  |   0
 .../src/{specs => fixtures}/sample.txt        |   0
 apps/renterd-e2e/src/specs/files.spec.ts      |  71 +++++---
 apps/renterd/components/ActionsBottomMenu.tsx |  17 ++
 .../components/Files/BucketContextMenu.tsx    |   2 +-
 .../components/Files/DirectoryContextMenu.tsx |   1 +
 .../Files/FileContextMenu/index.tsx           |  15 +-
 apps/renterd/components/Files/Layout.tsx      |   8 +-
 .../FilesDirectoryActionsBottomMenu.tsx       |   5 +
 .../FilesDirectoryBatchDelete.tsx             |  77 +++++++++
 .../FilesDirectoryBatchMenu/index.tsx         |  13 ++
 ...u.tsx => FilesDirectoryBreadcrumbMenu.tsx} |   4 +-
 .../FilesDirectory/FilesExplorer.tsx          |   2 +
 .../components/FilesFlat/FilesExplorer.tsx    |   4 +-
 .../components/Keys/KeysActionsBottomMenu.tsx |   5 +
 apps/renterd/components/Keys/Layout.tsx       |   2 +
 apps/renterd/components/Keys/index.tsx        |   2 -
 apps/renterd/components/OnboardingBar.tsx     |  54 ++++---
 .../components/RenterdAuthedLayout.tsx        |   8 +-
 apps/renterd/components/TransfersBar.tsx      | 153 ++++++++++--------
 apps/renterd/config/providers.tsx             |   4 -
 .../contexts/filesDirectory/columns.tsx       |  31 +++-
 .../renterd/contexts/filesDirectory/index.tsx |  77 +++++++--
 apps/renterd/contexts/filesFlat/index.tsx     |  18 ++-
 .../renterd/contexts/filesManager/dataset.tsx |  15 +-
 apps/renterd/contexts/filesManager/types.ts   |  24 ++-
 apps/renterd/pages/_app.tsx                   |   1 +
 apps/walletd/components/ActionsBottomMenu.tsx |   9 ++
 .../components/WalletdAuthedLayout.tsx        |   4 +-
 apps/walletd/pages/_app.tsx                   |   1 +
 .../src/app/AppAuthedLayout/index.tsx         |   5 +
 .../src/multi/MultiSelectionMenu.tsx          |  85 +++++-----
 37 files changed, 668 insertions(+), 222 deletions(-)
 create mode 100644 apps/hostd/components/ActionsBottomMenu.tsx
 rename apps/renterd-e2e/src/{specs/nested-sample => fixtures/sample-files}/sample.txt (100%)
 rename apps/renterd-e2e/src/{specs => fixtures}/sample.txt (100%)
 create mode 100644 apps/renterd/components/ActionsBottomMenu.tsx
 create mode 100644 apps/renterd/components/FilesDirectory/FilesDirectoryActionsBottomMenu.tsx
 create mode 100644 apps/renterd/components/FilesDirectory/FilesDirectoryBatchMenu/FilesDirectoryBatchDelete.tsx
 create mode 100644 apps/renterd/components/FilesDirectory/FilesDirectoryBatchMenu/index.tsx
 rename apps/renterd/components/FilesDirectory/{FilesBreadcrumbMenu.tsx => FilesDirectoryBreadcrumbMenu.tsx} (96%)
 create mode 100644 apps/renterd/components/Keys/KeysActionsBottomMenu.tsx
 create mode 100644 apps/walletd/components/ActionsBottomMenu.tsx

diff --git a/apps/hostd/components/ActionsBottomMenu.tsx b/apps/hostd/components/ActionsBottomMenu.tsx
new file mode 100644
index 000000000..877b81384
--- /dev/null
+++ b/apps/hostd/components/ActionsBottomMenu.tsx
@@ -0,0 +1,15 @@
+import React from 'react'
+import { OnboardingBar } from './OnboardingBar'
+
+export function ActionsBottomMenu({
+  children,
+}: {
+  children?: React.ReactNode
+}) {
+  return (
+    <div className="flex flex-col gap-2">
+      {children}
+      <OnboardingBar />
+    </div>
+  )
+}
diff --git a/apps/hostd/components/HostdAuthedLayout.tsx b/apps/hostd/components/HostdAuthedLayout.tsx
index 7dd9f1bdd..5617b8000 100644
--- a/apps/hostd/components/HostdAuthedLayout.tsx
+++ b/apps/hostd/components/HostdAuthedLayout.tsx
@@ -5,21 +5,22 @@ import { connectivityRoute } from '../config/routes'
 import { useSyncStatus } from '../hooks/useSyncStatus'
 import { HostdTestnetWarningBanner } from './HostdTestnetWarningBanner'
 import { Profile } from './Profile'
+import { ActionsBottomMenu } from './ActionsBottomMenu'
 
 type Props = Omit<
   React.ComponentProps<typeof AppAuthedLayout>,
   'appName' | 'connectivityRoute' | 'walletBalance' | 'profile' | 'isSynced'
 >
 
-export function HostdAuthedLayout(props: Props) {
+export function HostdAuthedLayout({ actionsBottom, ...props }: Props) {
   const wallet = useWallet()
   const { isSynced } = useSyncStatus()
   return (
     <AppAuthedLayout
       appName="hostd"
       connectivityRoute={connectivityRoute}
-      banner={<HostdTestnetWarningBanner />}
       profile={<Profile />}
+      banner={<HostdTestnetWarningBanner />}
       isSynced={isSynced}
       walletBalanceSc={
         wallet.data && {
@@ -29,6 +30,7 @@ export function HostdAuthedLayout(props: Props) {
           unconfirmed: new BigNumber(wallet.data.unconfirmed),
         }
       }
+      actionsBottom={<ActionsBottomMenu>{actionsBottom}</ActionsBottomMenu>}
       {...props}
     />
   )
diff --git a/apps/hostd/components/OnboardingBar.tsx b/apps/hostd/components/OnboardingBar.tsx
index 21b9a54f2..4ec23724b 100644
--- a/apps/hostd/components/OnboardingBar.tsx
+++ b/apps/hostd/components/OnboardingBar.tsx
@@ -23,6 +23,7 @@ import { toHastings } from '@siafoundation/units'
 import { useAppSettings } from '@siafoundation/react-core'
 import { useVolumes } from '../contexts/volumes'
 import useLocalStorageState from 'use-local-storage-state'
+import { AnimatePresence, motion } from 'framer-motion'
 
 export function OnboardingBar() {
   const { isUnlockedAndAuthedRoute } = useAppSettings()
@@ -61,13 +62,13 @@ export function OnboardingBar() {
   const totalSteps = steps.length
   const completedSteps = steps.filter((step) => step).length
 
-  if (totalSteps === completedSteps) {
-    return null
-  }
+  let el = null
 
-  if (maximized) {
-    return (
-      <div className="z-20 fixed bottom-5 right-5 flex justify-center">
+  if (totalSteps === completedSteps) {
+    el = null
+  } else if (maximized) {
+    el = (
+      <div className="flex justify-center">
         <Panel className="w-[400px] flex flex-col max-h-[600px]">
           <ScrollArea>
             <div className="flex justify-between items-center px-3 py-2 border-b border-gray-200 dark:border-graydark-300">
@@ -230,20 +231,37 @@ export function OnboardingBar() {
         </Panel>
       </div>
     )
+  } else {
+    el = (
+      <div className="flex justify-center">
+        <Button
+          onClick={() => setMaximized(true)}
+          size="large"
+          className="flex gap-3 !px-3"
+        >
+          <Text className="flex items-center gap-1">
+            <Logo />
+            Setup: {completedSteps}/{totalSteps} steps complete
+          </Text>
+        </Button>
+      </div>
+    )
   }
+
   return (
-    <div className="z-30 fixed bottom-5 right-5 flex justify-center">
-      <Button
-        onClick={() => setMaximized(true)}
-        size="large"
-        className="flex gap-3 !px-3"
-      >
-        <Text className="flex items-center gap-1">
-          <Logo />
-          Setup: {completedSteps}/{totalSteps} steps complete
-        </Text>
-      </Button>
-    </div>
+    <AnimatePresence>
+      {el && (
+        <motion.div
+          className="pointer-events-auto"
+          initial={{ y: 100, opacity: 0 }}
+          animate={{ y: 0, opacity: 1 }}
+          exit={{ y: 100, opacity: 0 }}
+          transition={{ duration: 0.2 }}
+        >
+          {el}
+        </motion.div>
+      )}
+    </AnimatePresence>
   )
 }
 
diff --git a/apps/hostd/pages/_app.tsx b/apps/hostd/pages/_app.tsx
index 3bcc5f40d..5bd615516 100644
--- a/apps/hostd/pages/_app.tsx
+++ b/apps/hostd/pages/_app.tsx
@@ -33,6 +33,7 @@ export default function App(props: AppPropsWithLayout) {
     </NextAppCsr>
   )
 }
+
 function AppCore({ Component, pageProps }: AppPropsWithLayout) {
   const Layout = Component.Layout
   const layoutProps = Component.useLayoutProps()
diff --git a/apps/renterd-e2e/src/fixtures/files.ts b/apps/renterd-e2e/src/fixtures/files.ts
index 3f036901e..64e582a71 100644
--- a/apps/renterd-e2e/src/fixtures/files.ts
+++ b/apps/renterd-e2e/src/fixtures/files.ts
@@ -1,6 +1,9 @@
 import { Page, expect } from '@playwright/test'
 import { readFileSync } from 'fs'
 import { fillTextInputByName } from '@siafoundation/e2e'
+import { navigateToBuckets } from './navigate'
+import { openBucket } from './buckets'
+import { join } from 'path'
 
 export async function deleteFile(page: Page, path: string) {
   await openFileContextMenu(page, path)
@@ -62,12 +65,26 @@ export async function openFileContextMenu(page: Page, path: string) {
 }
 
 export async function openDirectory(page: Page, path: string) {
-  await page.getByTestId('filesTable').getByTestId(path).click()
+  const parts = path.split('/')
+  const name = parts[parts.length - 2] + '/'
+  await page.getByTestId('filesTable').getByTestId(path).getByText(name).click()
   for (const dir of path.split('/').slice(0, -1)) {
     await expect(page.getByTestId('navbar').getByText(dir)).toBeVisible()
   }
 }
 
+export async function openDirectoryFromAnywhere(page: Page, path: string) {
+  const bucket = path.split('/')[0]
+  const dirParts = path.split('/').slice(1)
+  await navigateToBuckets({ page })
+  await openBucket(page, path.split('/')[0])
+  let currentPath = bucket + '/'
+  for (const dir of dirParts) {
+    currentPath += dir + '/'
+    await openDirectory(page, currentPath)
+  }
+}
+
 export async function navigateToParentDirectory(page: Page) {
   const isEmpty = await page
     .getByText('The current directory does not contain any files yet')
@@ -107,11 +124,11 @@ export async function fileNotInList(page: Page, path: string) {
   await expect(page.getByTestId('filesTable').getByTestId(path)).toBeHidden()
 }
 
-export async function getFileRowById(page: Page, id: string) {
+export function getFileRowById(page: Page, id: string) {
   return page.getByTestId('filesTable').getByTestId(id)
 }
 
-export async function dragAndDropFile(
+async function simulateDragAndDropFile(
   page: Page,
   selector: string,
   filePath: string,
@@ -139,3 +156,77 @@ export async function dragAndDropFile(
 
   await page.dispatchEvent(selector, 'drop', { dataTransfer })
 }
+
+export async function dragAndDropFileFromSystem(
+  page: Page,
+  systemFilePath: string,
+  localFileName?: string
+) {
+  await simulateDragAndDropFile(
+    page,
+    `[data-testid=filesDropzone]`,
+    join(__dirname, 'sample-files', systemFilePath),
+    '/' + (localFileName || systemFilePath)
+  )
+}
+
+export interface FileMap {
+  [key: string]: string | FileMap
+}
+
+// Iterate through the file map and create files/directories.
+export async function createFilesMap(
+  page: Page,
+  bucketName: string,
+  map: FileMap
+) {
+  const create = async (map: FileMap, stack: string[]) => {
+    for (const name in map) {
+      await openDirectoryFromAnywhere(page, stack.join('/'))
+      const currentDirPath = stack.join('/')
+      const path = `${currentDirPath}/${name}`
+      if (typeof map[name] === 'object') {
+        await createDirectory(page, name)
+        await fileInList(page, path + '/')
+        await create(map[name] as FileMap, stack.concat(name))
+      } else {
+        await dragAndDropFileFromSystem(page, 'sample.txt', name)
+        await fileInList(page, path)
+      }
+    }
+  }
+  await create(map, [bucketName])
+  await navigateToBuckets({ page })
+  await openBucket(page, bucketName)
+}
+
+interface FileExpectMap {
+  [key: string]: 'visible' | 'hidden' | FileExpectMap
+}
+
+// Check each file and directory in the map exists.
+export async function expectFilesMap(
+  page: Page,
+  bucketName: string,
+  map: FileExpectMap
+) {
+  const check = async (map: FileMap, stack: string[]) => {
+    for (const name in map) {
+      await openDirectoryFromAnywhere(page, stack.join('/'))
+      const currentDirPath = stack.join('/')
+      const path = `${currentDirPath}/${name}`
+      if (typeof map[name] === 'string') {
+        const state = map[name] as 'visible' | 'hidden'
+        if (state === 'visible') {
+          await fileInList(page, path)
+        } else {
+          await fileNotInList(page, path)
+        }
+      } else {
+        await fileInList(page, path + '/')
+        await check(map[name] as FileMap, stack.concat(name))
+      }
+    }
+  }
+  await check(map, [bucketName])
+}
diff --git a/apps/renterd-e2e/src/specs/nested-sample/sample.txt b/apps/renterd-e2e/src/fixtures/sample-files/sample.txt
similarity index 100%
rename from apps/renterd-e2e/src/specs/nested-sample/sample.txt
rename to apps/renterd-e2e/src/fixtures/sample-files/sample.txt
diff --git a/apps/renterd-e2e/src/specs/sample.txt b/apps/renterd-e2e/src/fixtures/sample.txt
similarity index 100%
rename from apps/renterd-e2e/src/specs/sample.txt
rename to apps/renterd-e2e/src/fixtures/sample.txt
diff --git a/apps/renterd-e2e/src/specs/files.spec.ts b/apps/renterd-e2e/src/specs/files.spec.ts
index 5acc452a1..e4227dc10 100644
--- a/apps/renterd-e2e/src/specs/files.spec.ts
+++ b/apps/renterd-e2e/src/specs/files.spec.ts
@@ -1,11 +1,9 @@
 import { test, expect } from '@playwright/test'
 import { navigateToBuckets } from '../fixtures/navigate'
 import { createBucket, deleteBucket, openBucket } from '../fixtures/buckets'
-import path from 'path'
 import {
   deleteDirectory,
   deleteFile,
-  dragAndDropFile,
   fileInList,
   fileNotInList,
   getFileRowById,
@@ -13,6 +11,9 @@ import {
   openDirectory,
   openFileContextMenu,
   createDirectory,
+  dragAndDropFileFromSystem,
+  createFilesMap,
+  expectFilesMap,
 } from '../fixtures/files'
 import { afterTest, beforeTest } from '../fixtures/beforeTest'
 import { clearToasts, fillTextInputByName } from '@siafoundation/e2e'
@@ -81,12 +82,7 @@ test('can create directory, upload file, rename file, navigate, delete a file, d
   await clearToasts({ page })
 
   // Upload.
-  await dragAndDropFile(
-    page,
-    `[data-testid=filesDropzone]`,
-    path.join(__dirname, originalFileName),
-    originalFileName
-  )
+  await dragAndDropFileFromSystem(page, originalFileName)
   await expect(page.getByText('100%')).toBeVisible()
   await fileInList(page, originalFilePath)
 
@@ -104,12 +100,7 @@ test('can create directory, upload file, rename file, navigate, delete a file, d
   await clearToasts({ page })
 
   // Upload the file again.
-  await dragAndDropFile(
-    page,
-    `[data-testid=filesDropzone]`,
-    path.join(__dirname, originalFileName),
-    originalFileName
-  )
+  await dragAndDropFileFromSystem(page, originalFileName)
   await expect(page.getByText('100%')).toBeVisible()
   await fileInList(page, originalFilePath)
 
@@ -131,7 +122,7 @@ test('shows a new intermediate directory when uploading nested files', async ({
   const bucketName = 'files-test'
   const containerDir = 'test-dir'
   const containerDirPath = `${bucketName}/${containerDir}/`
-  const systemDir = 'nested-sample'
+  const systemDir = 'sample-files'
   const systemFile = 'sample.txt'
   const systemFilePath = `${systemDir}/${systemFile}`
   const dirPath = `${bucketName}/${containerDir}/${systemDir}/`
@@ -154,12 +145,7 @@ test('shows a new intermediate directory when uploading nested files', async ({
   await clearToasts({ page })
 
   // Upload a nested file.
-  await dragAndDropFile(
-    page,
-    `[data-testid=filesDropzone]`,
-    path.join(__dirname, systemFilePath),
-    '/' + systemFilePath
-  )
+  await dragAndDropFileFromSystem(page, systemFile, systemFilePath)
   await fileInList(page, dirPath)
   const dirRow = await getFileRowById(page, dirPath)
   // The intermediate directory should show up before the file is finished uploading.
@@ -188,3 +174,46 @@ test('shows a new intermediate directory when uploading nested files', async ({
   await navigateToBuckets({ page })
   await deleteBucket(page, bucketName)
 })
+
+test('batch delete across nested directories', async ({ page }) => {
+  test.setTimeout(120_000)
+  const bucketName = 'bucket1'
+  await navigateToBuckets({ page })
+  await createBucket(page, bucketName)
+  await createFilesMap(page, bucketName, {
+    dir1: {
+      'file1.txt': null,
+      'file2.txt': null,
+    },
+    dir2: {
+      'file3.txt': null,
+      'file4.txt': null,
+      'file5.txt': null,
+    },
+  })
+  await navigateToBuckets({ page })
+  await openBucket(page, bucketName)
+
+  // Select entire dir1.
+  await getFileRowById(page, 'bucket1/dir1/').click()
+  await openDirectory(page, 'bucket1/dir2/')
+
+  // Select file3 and file4.
+  await getFileRowById(page, 'bucket1/dir2/file3.txt').click()
+  await getFileRowById(page, 'bucket1/dir2/file4.txt').click()
+  const menu = page.getByLabel('file multiselect menu')
+
+  // Delete selected files.
+  await menu.getByLabel('delete selected files').click()
+  const dialog = page.getByRole('dialog')
+  await dialog.getByRole('button', { name: 'Delete' }).click()
+
+  await expectFilesMap(page, bucketName, {
+    'dir1/': 'hidden',
+    dir2: {
+      'file3.txt': 'hidden',
+      'file4.txt': 'hidden',
+      'file5.txt': 'visible',
+    },
+  })
+})
diff --git a/apps/renterd/components/ActionsBottomMenu.tsx b/apps/renterd/components/ActionsBottomMenu.tsx
new file mode 100644
index 000000000..9ba967f55
--- /dev/null
+++ b/apps/renterd/components/ActionsBottomMenu.tsx
@@ -0,0 +1,17 @@
+import React from 'react'
+import { OnboardingBar } from './OnboardingBar'
+import { TransfersBar } from './TransfersBar'
+
+export function ActionsBottomMenu({
+  children,
+}: {
+  children?: React.ReactNode
+}) {
+  return (
+    <div className="flex flex-col gap-2">
+      {children}
+      <TransfersBar />
+      <OnboardingBar />
+    </div>
+  )
+}
diff --git a/apps/renterd/components/Files/BucketContextMenu.tsx b/apps/renterd/components/Files/BucketContextMenu.tsx
index b2c49d579..1b2f0cc3f 100644
--- a/apps/renterd/components/Files/BucketContextMenu.tsx
+++ b/apps/renterd/components/Files/BucketContextMenu.tsx
@@ -17,7 +17,7 @@ export function BucketContextMenu({ name }: Props) {
   return (
     <DropdownMenu
       trigger={
-        <Button variant="ghost" icon="hover">
+        <Button size="none" variant="ghost" icon="hover">
           <BucketIcon size={16} />
         </Button>
       }
diff --git a/apps/renterd/components/Files/DirectoryContextMenu.tsx b/apps/renterd/components/Files/DirectoryContextMenu.tsx
index 8106875e7..19e632cda 100644
--- a/apps/renterd/components/Files/DirectoryContextMenu.tsx
+++ b/apps/renterd/components/Files/DirectoryContextMenu.tsx
@@ -23,6 +23,7 @@ export function DirectoryContextMenu({ path, size }: Props) {
       trigger={
         <Button
           aria-label="Directory context menu"
+          size="none"
           variant="ghost"
           icon="hover"
         >
diff --git a/apps/renterd/components/Files/FileContextMenu/index.tsx b/apps/renterd/components/Files/FileContextMenu/index.tsx
index 9d979f5cf..89257359d 100644
--- a/apps/renterd/components/Files/FileContextMenu/index.tsx
+++ b/apps/renterd/components/Files/FileContextMenu/index.tsx
@@ -39,12 +39,23 @@ export function FileContextMenu({ trigger, path, contentProps }: Props) {
     <DropdownMenu
       trigger={
         trigger || (
-          <Button aria-label="File context menu" variant="ghost" icon="hover">
+          <Button
+            size="none"
+            aria-label="File context menu"
+            variant="ghost"
+            icon="hover"
+          >
             <Document16 />
           </Button>
         )
       }
-      contentProps={{ align: 'start', ...contentProps }}
+      contentProps={{
+        align: 'start',
+        ...contentProps,
+        onClick: (e) => {
+          e.stopPropagation()
+        },
+      }}
     >
       <DropdownMenuLabel>Actions</DropdownMenuLabel>
       <DropdownMenuItem
diff --git a/apps/renterd/components/Files/Layout.tsx b/apps/renterd/components/Files/Layout.tsx
index 6badb2439..dd2cc609b 100644
--- a/apps/renterd/components/Files/Layout.tsx
+++ b/apps/renterd/components/Files/Layout.tsx
@@ -1,7 +1,7 @@
 import { RenterdSidenav } from '../RenterdSidenav'
 import { routes } from '../../config/routes'
 import { useDialog } from '../../contexts/dialog'
-import { FilesBreadcrumbMenu } from '../FilesDirectory/FilesBreadcrumbMenu'
+import { FilesDirectoryBreadcrumbMenu } from '../FilesDirectory/FilesDirectoryBreadcrumbMenu'
 import { FilesFlatBreadcrumbMenu } from '../FilesFlat/FilesFlatBreadcrumbMenu'
 import {
   RenterdAuthedLayout,
@@ -9,6 +9,7 @@ import {
 } from '../RenterdAuthedLayout'
 import { FilesActionsMenu } from '../FilesDirectory/FilesActionsMenu'
 import { FilesStatsMenu } from '../FilesDirectory/FilesStatsMenu'
+import { FilesDirectoryActionsBottomMenu } from '../FilesDirectory/FilesDirectoryActionsBottomMenu'
 import { useFilesManager } from '../../contexts/filesManager'
 
 export const Layout = RenterdAuthedLayout
@@ -27,11 +28,14 @@ export function useLayoutProps(): RenterdAuthedPageLayoutProps {
     openSettings: () => openDialog('settings'),
     nav:
       activeMode === 'directory' ? (
-        <FilesBreadcrumbMenu />
+        <FilesDirectoryBreadcrumbMenu />
       ) : (
         <FilesFlatBreadcrumbMenu />
       ),
     stats: <FilesStatsMenu />,
     actions: <FilesActionsMenu />,
+    actionsBottom: activeMode === 'directory' && (
+      <FilesDirectoryActionsBottomMenu />
+    ),
   }
 }
diff --git a/apps/renterd/components/FilesDirectory/FilesDirectoryActionsBottomMenu.tsx b/apps/renterd/components/FilesDirectory/FilesDirectoryActionsBottomMenu.tsx
new file mode 100644
index 000000000..2ddee58c4
--- /dev/null
+++ b/apps/renterd/components/FilesDirectory/FilesDirectoryActionsBottomMenu.tsx
@@ -0,0 +1,5 @@
+import { FilesDirectoryBatchMenu } from './FilesDirectoryBatchMenu'
+
+export function FilesDirectoryActionsBottomMenu() {
+  return <FilesDirectoryBatchMenu />
+}
diff --git a/apps/renterd/components/FilesDirectory/FilesDirectoryBatchMenu/FilesDirectoryBatchDelete.tsx b/apps/renterd/components/FilesDirectory/FilesDirectoryBatchMenu/FilesDirectoryBatchDelete.tsx
new file mode 100644
index 000000000..7e385e6d2
--- /dev/null
+++ b/apps/renterd/components/FilesDirectory/FilesDirectoryBatchMenu/FilesDirectoryBatchDelete.tsx
@@ -0,0 +1,77 @@
+import {
+  Button,
+  Paragraph,
+  triggerSuccessToast,
+  triggerErrorToast,
+} from '@siafoundation/design-system'
+import { Delete16 } from '@siafoundation/react-icons'
+import { useCallback, useMemo } from 'react'
+import { useDialog } from '../../../contexts/dialog'
+import { useFilesDirectory } from '../../../contexts/filesDirectory'
+import { useObjectsRemove } from '@siafoundation/renterd-react'
+
+export function FilesDirectoryBatchDelete() {
+  const { multiSelect } = useFilesDirectory()
+
+  const filesToDelete = useMemo(
+    () =>
+      Object.entries(multiSelect.selectionMap).map(([_, item]) => ({
+        bucket: item.bucket.name,
+        prefix: item.key,
+      })),
+    [multiSelect.selectionMap]
+  )
+  const { openConfirmDialog } = useDialog()
+  const objectsRemove = useObjectsRemove()
+  const deleteFiles = useCallback(async () => {
+    const totalCount = filesToDelete.length
+    let errorCount = 0
+    for (const { bucket, prefix } of filesToDelete) {
+      const response = await objectsRemove.post({
+        payload: {
+          bucket,
+          prefix,
+        },
+      })
+      if (response.error) {
+        errorCount++
+      }
+    }
+    if (errorCount > 0) {
+      triggerErrorToast({
+        title: `${totalCount - errorCount} files deleted`,
+        body: `Error deleting ${errorCount}/${totalCount} total files.`,
+      })
+    } else {
+      triggerSuccessToast({ title: `${totalCount} files deleted` })
+    }
+    multiSelect.deselectAll()
+  }, [multiSelect, filesToDelete, objectsRemove])
+
+  return (
+    <Button
+      aria-label="delete selected files"
+      tip="Delete selected files"
+      onClick={() => {
+        openConfirmDialog({
+          title: `Delete files`,
+          action: 'Delete',
+          variant: 'red',
+          body: (
+            <div className="flex flex-col gap-1">
+              <Paragraph size="14">
+                Are you sure you would like to delete the{' '}
+                {multiSelect.selectionCount.toLocaleString()} selected files?
+              </Paragraph>
+            </div>
+          ),
+          onConfirm: async () => {
+            deleteFiles()
+          },
+        })
+      }}
+    >
+      <Delete16 />
+    </Button>
+  )
+}
diff --git a/apps/renterd/components/FilesDirectory/FilesDirectoryBatchMenu/index.tsx b/apps/renterd/components/FilesDirectory/FilesDirectoryBatchMenu/index.tsx
new file mode 100644
index 000000000..74f8a33b7
--- /dev/null
+++ b/apps/renterd/components/FilesDirectory/FilesDirectoryBatchMenu/index.tsx
@@ -0,0 +1,13 @@
+import { MultiSelectionMenu } from '@siafoundation/design-system'
+import { FilesDirectoryBatchDelete } from './FilesDirectoryBatchDelete'
+import { useFilesDirectory } from '../../../contexts/filesDirectory'
+
+export function FilesDirectoryBatchMenu() {
+  const { multiSelect } = useFilesDirectory()
+
+  return (
+    <MultiSelectionMenu multiSelect={multiSelect} entityWord="file">
+      <FilesDirectoryBatchDelete />
+    </MultiSelectionMenu>
+  )
+}
diff --git a/apps/renterd/components/FilesDirectory/FilesBreadcrumbMenu.tsx b/apps/renterd/components/FilesDirectory/FilesDirectoryBreadcrumbMenu.tsx
similarity index 96%
rename from apps/renterd/components/FilesDirectory/FilesBreadcrumbMenu.tsx
rename to apps/renterd/components/FilesDirectory/FilesDirectoryBreadcrumbMenu.tsx
index b6d251a12..d5e98ba8a 100644
--- a/apps/renterd/components/FilesDirectory/FilesBreadcrumbMenu.tsx
+++ b/apps/renterd/components/FilesDirectory/FilesDirectoryBreadcrumbMenu.tsx
@@ -4,7 +4,7 @@ import { ChevronRight16 } from '@siafoundation/react-icons'
 import { useFilesManager } from '../../contexts/filesManager'
 import { FilesExplorerModeButton } from '../Files/FilesExplorerModeButton'
 
-export function FilesBreadcrumbMenu() {
+export function FilesDirectoryBreadcrumbMenu() {
   const { activeDirectory, setActiveDirectory } = useFilesManager()
   const ref = useRef<HTMLDivElement>(null)
 
@@ -29,7 +29,7 @@ export function FilesBreadcrumbMenu() {
             className="flex items-center cursor-pointer"
             noWrap
           >
-            Buckets
+            Buckets22
           </Text>
           {activeDirectory.length > 0 && (
             <Text size="16" color="verySubtle" className="flex items-center">
diff --git a/apps/renterd/components/FilesDirectory/FilesExplorer.tsx b/apps/renterd/components/FilesDirectory/FilesExplorer.tsx
index e4085279a..f08d79a56 100644
--- a/apps/renterd/components/FilesDirectory/FilesExplorer.tsx
+++ b/apps/renterd/components/FilesDirectory/FilesExplorer.tsx
@@ -18,6 +18,7 @@ export function FilesExplorer() {
     datasetPage,
     pageCount,
     dataState,
+    cellContext,
     onDragEnd,
     onDragOver,
     onDragStart,
@@ -40,6 +41,7 @@ export function FilesExplorer() {
           emptyState={<EmptyState />}
           pageSize={10}
           data={datasetPage}
+          context={cellContext}
           columns={columns}
           sortableColumns={sortableColumns}
           sortField={sortField}
diff --git a/apps/renterd/components/FilesFlat/FilesExplorer.tsx b/apps/renterd/components/FilesFlat/FilesExplorer.tsx
index 39e1e7fc7..35d06a2e8 100644
--- a/apps/renterd/components/FilesFlat/FilesExplorer.tsx
+++ b/apps/renterd/components/FilesFlat/FilesExplorer.tsx
@@ -6,7 +6,8 @@ import { columns } from '../../contexts/filesFlat/columns'
 
 export function FilesExplorer() {
   const { sortableColumns, toggleSort } = useFilesManager()
-  const { datasetPage, dataState, sortField, sortDirection } = useFilesFlat()
+  const { datasetPage, dataState, cellContext, sortField, sortDirection } =
+    useFilesFlat()
   return (
     <div className="relative">
       <Table
@@ -14,6 +15,7 @@ export function FilesExplorer() {
         emptyState={<EmptyState />}
         pageSize={10}
         data={datasetPage}
+        context={cellContext}
         columns={columns}
         sortableColumns={sortableColumns}
         sortField={sortField}
diff --git a/apps/renterd/components/Keys/KeysActionsBottomMenu.tsx b/apps/renterd/components/Keys/KeysActionsBottomMenu.tsx
new file mode 100644
index 000000000..95bb8a5be
--- /dev/null
+++ b/apps/renterd/components/Keys/KeysActionsBottomMenu.tsx
@@ -0,0 +1,5 @@
+import { KeysBatchMenu } from './KeysBatchMenu'
+
+export function KeysActionsBottomMenu() {
+  return <KeysBatchMenu />
+}
diff --git a/apps/renterd/components/Keys/Layout.tsx b/apps/renterd/components/Keys/Layout.tsx
index 83e3b1a5b..6eb2eacdb 100644
--- a/apps/renterd/components/Keys/Layout.tsx
+++ b/apps/renterd/components/Keys/Layout.tsx
@@ -7,6 +7,7 @@ import {
 } from '../RenterdAuthedLayout'
 import { KeysActionsMenu } from './KeysActionsMenu'
 import { KeysStatsMenu } from './KeysStatsMenu'
+import { KeysActionsBottomMenu } from './KeysActionsBottomMenu'
 
 export const Layout = RenterdAuthedLayout
 export function useLayoutProps(): RenterdAuthedPageLayoutProps {
@@ -18,5 +19,6 @@ export function useLayoutProps(): RenterdAuthedPageLayoutProps {
     openSettings: () => openDialog('settings'),
     actions: <KeysActionsMenu />,
     stats: <KeysStatsMenu />,
+    actionsBottom: <KeysActionsBottomMenu />,
   }
 }
diff --git a/apps/renterd/components/Keys/index.tsx b/apps/renterd/components/Keys/index.tsx
index 59b88784c..e4dcc0758 100644
--- a/apps/renterd/components/Keys/index.tsx
+++ b/apps/renterd/components/Keys/index.tsx
@@ -3,7 +3,6 @@ import { StateNoneMatching } from './StateNoneMatching'
 import { StateNoneYet } from './StateNoneYet'
 import { StateError } from './StateError'
 import { useKeys } from '../../contexts/keys'
-import { KeysBatchMenu } from './KeysBatchMenu'
 
 export function Keys() {
   const {
@@ -20,7 +19,6 @@ export function Keys() {
 
   return (
     <div className="p-6 min-w-fit">
-      <KeysBatchMenu />
       <Table
         testId="keysTable"
         isLoading={dataState === 'loading'}
diff --git a/apps/renterd/components/OnboardingBar.tsx b/apps/renterd/components/OnboardingBar.tsx
index 185c74a03..e7760371d 100644
--- a/apps/renterd/components/OnboardingBar.tsx
+++ b/apps/renterd/components/OnboardingBar.tsx
@@ -24,6 +24,7 @@ import BigNumber from 'bignumber.js'
 import { humanSiacoin } from '@siafoundation/units'
 import { useAppSettings } from '@siafoundation/react-core'
 import useLocalStorageState from 'use-local-storage-state'
+import { AnimatePresence, motion } from 'framer-motion'
 
 export function OnboardingBar() {
   const { isUnlockedAndAuthedRoute } = useAppSettings()
@@ -64,13 +65,13 @@ export function OnboardingBar() {
   const totalSteps = steps.length
   const completedSteps = steps.filter((step) => step).length
 
-  if (totalSteps === completedSteps) {
-    return null
-  }
+  let el = null
 
-  if (maximized) {
-    return (
-      <div className="z-20 fixed bottom-5 right-5 flex justify-center">
+  if (totalSteps === completedSteps) {
+    el = null
+  } else if (maximized) {
+    el = (
+      <div className="flex justify-center">
         <Panel className="w-[400px] flex flex-col max-h-[600px]">
           <ScrollArea>
             <div className="flex justify-between items-center px-3 py-2 border-b border-gray-200 dark:border-graydark-300">
@@ -237,20 +238,37 @@ export function OnboardingBar() {
         </Panel>
       </div>
     )
+  } else {
+    el = (
+      <div className="flex justify-center">
+        <Button
+          onClick={() => setMaximized(true)}
+          size="large"
+          className="flex gap-3 !px-3"
+        >
+          <Text size="14" className="flex items-center gap-1">
+            <Logo />
+            Setup: {completedSteps}/{totalSteps} steps complete
+          </Text>
+        </Button>
+      </div>
+    )
   }
+
   return (
-    <div className="z-30 fixed bottom-5 right-5 flex justify-center">
-      <Button
-        onClick={() => setMaximized(true)}
-        size="large"
-        className="flex gap-3 !px-3"
-      >
-        <Text size="14" className="flex items-center gap-1">
-          <Logo />
-          Setup: {completedSteps}/{totalSteps} steps complete
-        </Text>
-      </Button>
-    </div>
+    <AnimatePresence>
+      {el && (
+        <motion.div
+          className="pointer-events-auto"
+          initial={{ y: 100, opacity: 0 }}
+          animate={{ y: 0, opacity: 1 }}
+          exit={{ y: 100, opacity: 0 }}
+          transition={{ duration: 0.2 }}
+        >
+          {el}
+        </motion.div>
+      )}
+    </AnimatePresence>
   )
 }
 
diff --git a/apps/renterd/components/RenterdAuthedLayout.tsx b/apps/renterd/components/RenterdAuthedLayout.tsx
index c9d6a21b1..a1490ea11 100644
--- a/apps/renterd/components/RenterdAuthedLayout.tsx
+++ b/apps/renterd/components/RenterdAuthedLayout.tsx
@@ -5,30 +5,32 @@ import { connectivityRoute } from '../config/routes'
 import { useSyncStatus } from '../hooks/useSyncStatus'
 import { Profile } from './Profile'
 import { RenterdTestnetWarningBanner } from './RenterdTestnetWarningBanner'
+import { ActionsBottomMenu } from './ActionsBottomMenu'
 
 type Props = Omit<
   React.ComponentProps<typeof AppAuthedLayout>,
   'appName' | 'connectivityRoute' | 'walletBalance' | 'profile' | 'isSynced'
 >
 
-export function RenterdAuthedLayout(props: Props) {
+export function RenterdAuthedLayout({ actionsBottom, ...props }: Props) {
   const wallet = useWallet()
   const { isSynced } = useSyncStatus()
   return (
     <AppAuthedLayout
       appName="renterd"
+      connectivityRoute={connectivityRoute}
       profile={<Profile />}
       banner={<RenterdTestnetWarningBanner />}
-      connectivityRoute={connectivityRoute}
       isSynced={isSynced}
       walletBalanceSc={
         wallet.data && {
           spendable: new BigNumber(wallet.data.spendable),
           confirmed: new BigNumber(wallet.data.confirmed),
-          unconfirmed: new BigNumber(wallet.data.unconfirmed),
           immature: new BigNumber(wallet.data.immature),
+          unconfirmed: new BigNumber(wallet.data.unconfirmed),
         }
       }
+      actionsBottom={<ActionsBottomMenu>{actionsBottom}</ActionsBottomMenu>}
       {...props}
     />
   )
diff --git a/apps/renterd/components/TransfersBar.tsx b/apps/renterd/components/TransfersBar.tsx
index 8ff48bfaa..030d28c40 100644
--- a/apps/renterd/components/TransfersBar.tsx
+++ b/apps/renterd/components/TransfersBar.tsx
@@ -5,6 +5,7 @@ import { useFilesManager } from '../contexts/filesManager'
 import { useAppSettings } from '@siafoundation/react-core'
 import { TransfersBarItem } from './TransfersBarItem'
 import { useUploads } from '../contexts/uploads'
+import { AnimatePresence, motion } from 'framer-motion'
 
 export function TransfersBar() {
   const { isUnlockedAndAuthedRoute } = useAppSettings()
@@ -17,80 +18,92 @@ export function TransfersBar() {
   const downloadCount = downloadsList.length
   const isActiveDownloads = !!downloadCount
 
-  if (!isUnlockedAndAuthedRoute) {
-    return null
-  }
-
-  if (!isActiveUploads && !isActiveDownloads) {
-    return null
-  }
+  let el = null
 
-  const controls = (
-    <div className="flex gap-2">
-      {isActiveUploads && !isViewingUploads ? (
-        <Button
-          tip="Uploads list"
-          onClick={navigateToUploads}
-          className="flex gap-3"
-        >
-          <Upload16 className="opacity-50 scale-75 relative top-px" />
-          Active uploads
-        </Button>
-      ) : null}
-      {isActiveDownloads ? (
-        <Button
-          tip="Downloads list"
-          onClick={() => setMaximized((max) => !max)}
-          className="flex gap-3"
-        >
-          <Download16 className="opacity-50 scale-75" />
-          Active downloads
-        </Button>
-      ) : null}
-    </div>
-  )
-
-  if (isActiveDownloads && maximized) {
-    return (
-      <div className="z-30 fixed bottom-5 left-1/2 -translate-x-1/2 flex flex-col items-center justify-center gap-2">
-        <Panel className="w-[400px] flex flex-col max-h-[600px]">
-          <ScrollArea>
-            {isActiveDownloads ? (
-              <>
-                <div className="flex justify-between items-center px-3 py-2 border-b border-gray-200 dark:border-graydark-300">
-                  <Text size="16" weight="semibold">
-                    Active downloads ({downloadCount})
-                  </Text>
-                  <Button variant="ghost" onClick={() => setMaximized(false)}>
-                    <Subtract24 />
-                  </Button>
-                </div>
-                {downloadsList.map((download) => (
-                  <TransfersBarItem
-                    key={download.id}
-                    path={download.path}
-                    loaded={download.loaded || 0}
-                    size={download.size}
-                    status={
-                      download.loaded === download.size
-                        ? 'processing'
-                        : 'downloading'
-                    }
-                    abort={() => downloadCancel(download)}
-                    abortTip="Cancel download"
-                  />
-                ))}
-              </>
-            ) : null}
-          </ScrollArea>
-        </Panel>
-        {controls}
+  if (!isUnlockedAndAuthedRoute) {
+    el = null
+  } else if (!isActiveUploads && !isActiveDownloads) {
+    el = null
+  } else {
+    const controls = (
+      <div className="flex gap-2">
+        {isActiveUploads && !isViewingUploads ? (
+          <Button
+            tip="Uploads list"
+            onClick={navigateToUploads}
+            className="flex gap-3"
+          >
+            <Upload16 className="opacity-50 scale-75 relative top-px" />
+            Active uploads
+          </Button>
+        ) : null}
+        {isActiveDownloads ? (
+          <Button
+            tip="Downloads list"
+            onClick={() => setMaximized((max) => !max)}
+            className="flex gap-3"
+          >
+            <Download16 className="opacity-50 scale-75" />
+            Active downloads
+          </Button>
+        ) : null}
       </div>
     )
+
+    el = controls
+
+    if (isActiveDownloads && maximized) {
+      el = (
+        <div className="flex flex-col items-center justify-center gap-2">
+          <Panel className="w-[400px] flex flex-col max-h-[600px]">
+            <ScrollArea>
+              {isActiveDownloads ? (
+                <>
+                  <div className="flex justify-between items-center px-3 py-2 border-b border-gray-200 dark:border-graydark-300">
+                    <Text size="16" weight="semibold">
+                      Active downloads ({downloadCount})
+                    </Text>
+                    <Button variant="ghost" onClick={() => setMaximized(false)}>
+                      <Subtract24 />
+                    </Button>
+                  </div>
+                  {downloadsList.map((download) => (
+                    <TransfersBarItem
+                      key={download.id}
+                      path={download.path}
+                      loaded={download.loaded || 0}
+                      size={download.size}
+                      status={
+                        download.loaded === download.size
+                          ? 'processing'
+                          : 'downloading'
+                      }
+                      abort={() => downloadCancel(download)}
+                      abortTip="Cancel download"
+                    />
+                  ))}
+                </>
+              ) : null}
+            </ScrollArea>
+          </Panel>
+          {controls}
+        </div>
+      )
+    }
   }
+
   return (
-    <div className="z-30 fixed bottom-5 left-1/2 -translate-x-1/2">
-      {controls}
-    </div>
+    <AnimatePresence>
+      {el && (
+        <motion.div
+          initial={{ y: 100, opacity: 0 }}
+          animate={{ y: 0, opacity: 1 }}
+          exit={{ y: 100, opacity: 0 }}
+          transition={{ duration: 0.2 }}
+        >
+          {el}
+        </motion.div>
+      )}
+    </AnimatePresence>
   )
 }
diff --git a/apps/renterd/config/providers.tsx b/apps/renterd/config/providers.tsx
index 413a68929..87fd107f3 100644
--- a/apps/renterd/config/providers.tsx
+++ b/apps/renterd/config/providers.tsx
@@ -4,8 +4,6 @@ import { ContractsProvider } from '../contexts/contracts'
 import { HostsProvider } from '../contexts/hosts'
 import { AppProvider } from '../contexts/app'
 import { ConfigProvider } from '../contexts/config'
-import { OnboardingBar } from '../components/OnboardingBar'
-import { TransfersBar } from '../components/TransfersBar'
 import { TransactionsProvider } from '../contexts/transactions'
 import { KeysProvider } from '../contexts/keys'
 import { FilesFlatProvider } from '../contexts/filesFlat'
@@ -34,8 +32,6 @@ export function Providers({ children }: Props) {
                           <AlertsProvider>
                             {/* this is here so that dialogs can use all the other providers,
                   and the other providers can trigger dialogs */}
-                            <OnboardingBar />
-                            <TransfersBar />
                             <Dialogs />
                             {children}
                           </AlertsProvider>
diff --git a/apps/renterd/contexts/filesDirectory/columns.tsx b/apps/renterd/contexts/filesDirectory/columns.tsx
index b901d8132..089d7f227 100644
--- a/apps/renterd/contexts/filesDirectory/columns.tsx
+++ b/apps/renterd/contexts/filesDirectory/columns.tsx
@@ -1,4 +1,11 @@
-import { Button, Text, Tooltip, ValueNum } from '@siafoundation/design-system'
+import {
+  Button,
+  Checkbox,
+  ControlGroup,
+  Text,
+  Tooltip,
+  ValueNum,
+} from '@siafoundation/design-system'
 import {
   Document16,
   Earth16,
@@ -20,14 +27,28 @@ export const columns: FilesTableColumn[] = [
     id: 'type',
     label: '',
     fixed: true,
-    cellClassName: 'w-[50px] !pl-2 !pr-2 [&+*]:!pl-0',
+    contentClassName: '!pl-3 !pr-4',
+    cellClassName: 'w-[20px] !pl-0 !pr-0',
+    heading: ({ context: { isViewingBuckets, multiSelect } }) => {
+      if (isViewingBuckets) {
+        return null
+      }
+      return (
+        <ControlGroup className="flex h-4">
+          <Checkbox
+            onClick={multiSelect.onSelectPage}
+            checked={multiSelect.isPageAllSelected}
+          />
+        </ControlGroup>
+      )
+    },
     render: function TypeColumn({
       data: { isUploading, type, name, path, size },
     }) {
       const { setActiveDirectory } = useFilesManager()
       if (isUploading) {
         return (
-          <Button variant="ghost" state="waiting">
+          <Button size="none" variant="ghost" state="waiting">
             <Document16 />
           </Button>
         )
@@ -35,6 +56,7 @@ export const columns: FilesTableColumn[] = [
       if (name === '..') {
         return (
           <Button
+            size="none"
             variant="ghost"
             icon="hover"
             onClick={(e) => {
@@ -70,6 +92,7 @@ export const columns: FilesTableColumn[] = [
             color="accent"
             weight="semibold"
             className="cursor-pointer"
+            underline="hover"
             onClick={(e) => {
               e.stopPropagation()
               setActiveDirectoryAndFileNamePrefix([name], '')
@@ -87,6 +110,7 @@ export const columns: FilesTableColumn[] = [
               color="accent"
               weight="semibold"
               className="cursor-pointer"
+              underline="hover"
               onClick={(e) => {
                 e.stopPropagation()
                 setActiveDirectory((p) => p.slice(0, -1))
@@ -102,6 +126,7 @@ export const columns: FilesTableColumn[] = [
             color="accent"
             weight="semibold"
             className="cursor-pointer"
+            underline="hover"
             onClick={(e) => {
               e.stopPropagation()
               setActiveDirectory((p) => p.concat(name.slice(0, -1)))
diff --git a/apps/renterd/contexts/filesDirectory/index.tsx b/apps/renterd/contexts/filesDirectory/index.tsx
index acb6d0377..ad43d4a97 100644
--- a/apps/renterd/contexts/filesDirectory/index.tsx
+++ b/apps/renterd/contexts/filesDirectory/index.tsx
@@ -1,6 +1,15 @@
-import { useDatasetEmptyState } from '@siafoundation/design-system'
-import { createContext, useContext, useMemo } from 'react'
-import { ObjectData } from '../filesManager/types'
+import {
+  useDatasetEmptyState,
+  useMultiSelect,
+} from '@siafoundation/design-system'
+import {
+  createContext,
+  MouseEvent,
+  useContext,
+  useEffect,
+  useMemo,
+} from 'react'
+import { CellContext, ObjectData } from '../filesManager/types'
 import { useDataset } from './dataset'
 import { useMove } from './move'
 import { useFilesManager } from '../filesManager'
@@ -9,11 +18,11 @@ import { columns } from './columns'
 function useFilesDirectoryMain() {
   const {
     activeDirectory,
-    activeBucketName: activeBucket,
-    activeDirectoryPath,
+    activeBucket,
     setActiveDirectory,
     filters,
     enabledColumns,
+    isViewingBuckets,
   } = useFilesManager()
 
   const { limit, marker, isMore, response, refresh, dataset } = useDataset()
@@ -32,17 +41,20 @@ function useFilesDirectoryMain() {
     refresh,
   })
 
-  // Add parent directory to the dataset
+  // Add parent directory to the dataset.
   const _datasetPage = useMemo(() => {
     if (!dataset) {
-      return null
+      return undefined
     }
     if (activeDirectory.length > 0 && dataset.length > 0) {
       return [
         {
+          bucket: activeBucket,
           id: '..',
           name: '..',
           path: '..',
+          key: '..',
+          size: 0,
           type: 'directory',
           onClick: () => {
             setActiveDirectory((p) => p.slice(0, -1))
@@ -57,12 +69,40 @@ function useFilesDirectoryMain() {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [dataset])
 
-  // Add drag and drop properties to the dataset
-  const datasetPage = useMemo(() => {
+  const multiSelect = useMultiSelect(_datasetPage)
+
+  // If the active bucket changes, clear the multi-select.
+  useEffect(() => {
+    if (activeBucket) {
+      multiSelect.deselectAll()
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [activeBucket])
+
+  const datasetPageWithOnClick = useMemo(() => {
     if (!_datasetPage) {
       return undefined
     }
-    return _datasetPage.map((d) => {
+    return _datasetPage.map((datum) => {
+      if (datum.type === 'bucket') {
+        return datum
+      }
+      return {
+        ...datum,
+        isSelected: !!multiSelect.selectionMap[datum.id],
+        onClick: (e: MouseEvent<HTMLTableRowElement>) =>
+          multiSelect.onSelect(datum.id, e),
+      }
+      return datum
+    })
+  }, [_datasetPage, multiSelect])
+
+  // Add drag and drop properties to the dataset.
+  const datasetPage = useMemo(() => {
+    if (!datasetPageWithOnClick) {
+      return undefined
+    }
+    return datasetPageWithOnClick.map((d) => {
       if (
         draggingObject &&
         draggingObject.id !== d.id &&
@@ -78,7 +118,7 @@ function useFilesDirectoryMain() {
         isDraggable: d.type !== 'bucket' && !d.isUploading,
       }
     })
-  }, [_datasetPage, draggingObject])
+  }, [datasetPageWithOnClick, draggingObject])
 
   const dataState = useDatasetEmptyState(
     dataset,
@@ -95,13 +135,20 @@ function useFilesDirectoryMain() {
     [enabledColumns]
   )
 
+  const cellContext = useMemo(
+    () =>
+      ({
+        isViewingBuckets,
+        multiSelect,
+      } as CellContext),
+    [multiSelect, isViewingBuckets]
+  )
+
   return {
-    activeBucket,
-    activeDirectory,
-    setActiveDirectory,
-    activeDirectoryPath,
     dataState,
     columns: filteredTableColumns,
+    multiSelect,
+    cellContext,
     refresh,
     limit,
     marker,
diff --git a/apps/renterd/contexts/filesFlat/index.tsx b/apps/renterd/contexts/filesFlat/index.tsx
index b9d28bde2..4d9879f63 100644
--- a/apps/renterd/contexts/filesFlat/index.tsx
+++ b/apps/renterd/contexts/filesFlat/index.tsx
@@ -1,8 +1,12 @@
-import { useDatasetEmptyState } from '@siafoundation/design-system'
+import {
+  useDatasetEmptyState,
+  useMultiSelect,
+} from '@siafoundation/design-system'
 import { createContext, useContext, useMemo } from 'react'
 import { useDataset } from './dataset'
 import { useFilesManager } from '../filesManager'
 import { columns } from './columns'
+import { CellContext } from '../filesManager/types'
 
 function useFilesFlatMain() {
   const { sortDirection, sortField, filters, enabledColumns } =
@@ -32,8 +36,20 @@ function useFilesFlatMain() {
     [enabledColumns]
   )
 
+  const multiSelect = useMultiSelect(dataset)
+
+  const cellContext = useMemo(
+    () =>
+      ({
+        multiSelect,
+      } as CellContext),
+    [multiSelect]
+  )
+
   return {
     dataState,
+    multiSelect,
+    cellContext,
     refresh,
     limit,
     datasetPage,
diff --git a/apps/renterd/contexts/filesManager/dataset.tsx b/apps/renterd/contexts/filesManager/dataset.tsx
index 66d883b6c..706251b05 100644
--- a/apps/renterd/contexts/filesManager/dataset.tsx
+++ b/apps/renterd/contexts/filesManager/dataset.tsx
@@ -8,6 +8,7 @@ import {
   getFilename,
   join,
   isDirectory,
+  getKeyFromPath,
 } from '../../lib/paths'
 import { useFilesManager } from '.'
 import { useEffect } from 'react'
@@ -43,10 +44,12 @@ export function useDataset({ id, objects }: Props) {
         buckets.data?.forEach((bucket) => {
           const name = bucket.name
           const path = buildDirectoryPath(name, '')
+          const key = getKeyFromPath(path)
           dataMap[name] = {
             id: path,
             path,
             bucket,
+            key,
             size: 0,
             health: 0,
             name,
@@ -64,14 +67,15 @@ export function useDataset({ id, objects }: Props) {
             id: path,
             path,
             bucket: activeBucket,
+            key,
             size,
             health,
             name,
-            onClick: isDirectory(key)
-              ? () => {
-                  setActiveDirectory((p) => p.concat(name.slice(0, -1)))
-                }
-              : undefined,
+            // onClick: isDirectory(key)
+            //   ? () => {
+            //       setActiveDirectory((p) => p.concat(name.slice(0, -1)))
+            //     }
+            //   : undefined,
             type: isDirectory(key) ? 'directory' : 'file',
           }
         })
@@ -99,6 +103,7 @@ export function useDataset({ id, objects }: Props) {
               id: newDirPath,
               path: newDirPath,
               bucket: activeBucket,
+              key: getKeyFromPath(newDirPath),
               size: 0,
               health: 0,
               name: newDirName + '/',
diff --git a/apps/renterd/contexts/filesManager/types.ts b/apps/renterd/contexts/filesManager/types.ts
index 8bae61497..eef107589 100644
--- a/apps/renterd/contexts/filesManager/types.ts
+++ b/apps/renterd/contexts/filesManager/types.ts
@@ -1,16 +1,20 @@
 import { Bucket } from '@siafoundation/renterd-types'
 import { FullPath } from '../../lib/paths'
-import { TableColumn } from '@siafoundation/design-system'
+import { MultiSelect, TableColumn } from '@siafoundation/design-system'
 import { MultipartUpload } from '../../lib/multipartUpload'
+import { MouseEvent } from 'react'
 
 export type ObjectType = 'bucket' | 'directory' | 'file'
 
 export type ObjectData = {
   id: FullPath
-  // path is exacty bucket + returned key
+  bucket: Bucket
+  // path is exacty bucket + returned key.
   // eg: default + /path/to/file.txt = default/path/to/file.txt
   path: FullPath
-  bucket: Bucket
+  // key is the path without the bucket.
+  key: string
+  // name is the last segment of the path.
   name: string
   health?: number
   size: number
@@ -19,7 +23,13 @@ export type ObjectData = {
   isDraggable?: boolean
   isDroppable?: boolean
   loaded?: number
-  onClick?: () => void
+  onClick?: (e: MouseEvent<HTMLTableRowElement>) => void
+  isSelected?: boolean
+}
+
+export type CellContext = {
+  isViewingBuckets: boolean
+  multiSelect: MultiSelect
 }
 
 export type TableColumnId =
@@ -30,7 +40,11 @@ export type TableColumnId =
   | 'size'
   | 'health'
 
-export type FilesTableColumn = TableColumn<TableColumnId, ObjectData, never> & {
+export type FilesTableColumn = TableColumn<
+  TableColumnId,
+  ObjectData,
+  CellContext
+> & {
   fixed?: boolean
   category?: string
 }
diff --git a/apps/renterd/pages/_app.tsx b/apps/renterd/pages/_app.tsx
index 57173c7dc..426600a61 100644
--- a/apps/renterd/pages/_app.tsx
+++ b/apps/renterd/pages/_app.tsx
@@ -33,6 +33,7 @@ export default function App(props: AppPropsWithLayout) {
     </NextAppCsr>
   )
 }
+
 function AppCore({ Component, pageProps }: AppPropsWithLayout) {
   const Layout = Component.Layout
   const layoutProps = Component.useLayoutProps()
diff --git a/apps/walletd/components/ActionsBottomMenu.tsx b/apps/walletd/components/ActionsBottomMenu.tsx
new file mode 100644
index 000000000..c5273d48f
--- /dev/null
+++ b/apps/walletd/components/ActionsBottomMenu.tsx
@@ -0,0 +1,9 @@
+import React from 'react'
+
+export function ActionsBottomMenu({
+  children,
+}: {
+  children?: React.ReactNode
+}) {
+  return <div className="flex flex-col gap-2">{children}</div>
+}
diff --git a/apps/walletd/components/WalletdAuthedLayout.tsx b/apps/walletd/components/WalletdAuthedLayout.tsx
index 128143fcb..b2b4afb5d 100644
--- a/apps/walletd/components/WalletdAuthedLayout.tsx
+++ b/apps/walletd/components/WalletdAuthedLayout.tsx
@@ -3,13 +3,14 @@ import { connectivityRoute } from '../config/routes'
 import { useSyncStatus } from '../hooks/useSyncStatus'
 import { Profile } from './Profile'
 import { WalletdTestnetWarningBanner } from './WalletdTestnetWarningBanner'
+import { ActionsBottomMenu } from './ActionsBottomMenu'
 
 type Props = Omit<
   React.ComponentProps<typeof AppAuthedLayout>,
   'appName' | 'connectivityRoute' | 'walletBalance' | 'profile' | 'isSynced'
 >
 
-export function WalletdAuthedLayout(props: Props) {
+export function WalletdAuthedLayout({ actionsBottom, ...props }: Props) {
   const { isSynced } = useSyncStatus()
   return (
     <AppAuthedLayout
@@ -19,6 +20,7 @@ export function WalletdAuthedLayout(props: Props) {
       banner={<WalletdTestnetWarningBanner />}
       showWallet={false}
       isSynced={isSynced}
+      actionsBottom={<ActionsBottomMenu>{actionsBottom}</ActionsBottomMenu>}
       {...props}
     />
   )
diff --git a/apps/walletd/pages/_app.tsx b/apps/walletd/pages/_app.tsx
index 02790f645..a937c00c7 100644
--- a/apps/walletd/pages/_app.tsx
+++ b/apps/walletd/pages/_app.tsx
@@ -31,6 +31,7 @@ export default function App(props: AppPropsWithLayout) {
     </NextAppCsr>
   )
 }
+
 function AppCore({ Component, pageProps }: AppPropsWithLayout) {
   const Layout = Component.Layout
   const layoutProps = Component.useLayoutProps()
diff --git a/libs/design-system/src/app/AppAuthedLayout/index.tsx b/libs/design-system/src/app/AppAuthedLayout/index.tsx
index ac99ea8ae..545152704 100644
--- a/libs/design-system/src/app/AppAuthedLayout/index.tsx
+++ b/libs/design-system/src/app/AppAuthedLayout/index.tsx
@@ -21,6 +21,7 @@ type Props = {
   nav?: React.ReactNode
   banner?: React.ReactNode
   actions?: React.ReactNode
+  actionsBottom?: React.ReactNode
   sidenav?: React.ReactNode
   stats?: React.ReactNode
   after?: React.ReactNode
@@ -59,6 +60,7 @@ export function AppAuthedLayout({
   actions,
   stats,
   after,
+  actionsBottom,
   children,
   sidenav,
   connectivityRoute,
@@ -123,6 +125,9 @@ export function AppAuthedLayout({
                 {children}
               </Container>
             )}
+            <div className="z-20 fixed bottom-5 left-0 right-0 flex justify-center dark pointer-events-none">
+              {actionsBottom}
+            </div>
           </div>
         </div>
       </div>
diff --git a/libs/design-system/src/multi/MultiSelectionMenu.tsx b/libs/design-system/src/multi/MultiSelectionMenu.tsx
index cf772a385..2ef80b17c 100644
--- a/libs/design-system/src/multi/MultiSelectionMenu.tsx
+++ b/libs/design-system/src/multi/MultiSelectionMenu.tsx
@@ -21,50 +21,49 @@ export function MultiSelectionMenu({
 }) {
   const isVisible = multiSelect.selectionCount > 0
   return (
-    <div className="z-20 fixed bottom-5 left-0 right-0 flex justify-center dark pointer-events-none">
-      <AnimatePresence>
-        {isVisible && (
-          <motion.div
-            initial={{ y: 100, opacity: 0 }}
-            animate={{ y: 0, opacity: 1 }}
-            exit={{ y: 100, opacity: 0 }}
-            transition={{ duration: 0.2 }}
+    <AnimatePresence>
+      {isVisible && (
+        <motion.div
+          layout
+          initial={{ y: 100, opacity: 0 }}
+          animate={{ y: 0, opacity: 1 }}
+          exit={{ y: 100, opacity: 0 }}
+          transition={{ duration: 0.2 }}
+        >
+          <Panel
+            aria-label={entityWord + ' multiselect menu'}
+            className="pl-3 pr-2 py-2 min-w-[250px] flex gap-2 items-center rounded-lg light:bg-black pointer-events-auto"
           >
-            <Panel
-              aria-label={entityWord + ' multiselect menu'}
-              className="pl-3 pr-2 py-2 min-w-[250px] flex gap-2 items-center rounded-lg light:bg-black pointer-events-auto"
+            {!!multiSelect.selectionCount && (
+              <Text size="14">
+                {`${pluralize(multiSelect.selectionCount, entityWord, {
+                  plural: entityWordPlural,
+                })} selected${
+                  multiSelect.someSelectedItemsOutsideCurrentPage &&
+                  multiSelect.someSelectedOnCurrentPage
+                    ? ' on this and other pages'
+                    : !multiSelect.someSelectedItemsOutsideCurrentPage &&
+                      multiSelect.someSelectedOnCurrentPage
+                    ? ''
+                    : multiSelect.someSelectedItemsOutsideCurrentPage &&
+                      !multiSelect.someSelectedOnCurrentPage
+                    ? ' on other pages'
+                    : ''
+                }`}
+              </Text>
+            )}
+            <div className="flex-1" />
+            {children}
+            <Button
+              tip="Deselect all"
+              onClick={multiSelect.deselectAll}
+              size="small"
             >
-              {!!multiSelect.selectionCount && (
-                <Text size="14">
-                  {`${pluralize(multiSelect.selectionCount, entityWord, {
-                    plural: entityWordPlural,
-                  })} selected${
-                    multiSelect.someSelectedItemsOutsideCurrentPage &&
-                    multiSelect.someSelectedOnCurrentPage
-                      ? ' on this and other pages'
-                      : !multiSelect.someSelectedItemsOutsideCurrentPage &&
-                        multiSelect.someSelectedOnCurrentPage
-                      ? ''
-                      : multiSelect.someSelectedItemsOutsideCurrentPage &&
-                        !multiSelect.someSelectedOnCurrentPage
-                      ? ' on other pages'
-                      : ''
-                  }`}
-                </Text>
-              )}
-              <div className="flex-1" />
-              {children}
-              <Button
-                tip="Deselect all"
-                onClick={multiSelect.deselectAll}
-                size="small"
-              >
-                <Close16 />
-              </Button>
-            </Panel>
-          </motion.div>
-        )}
-      </AnimatePresence>
-    </div>
+              <Close16 />
+            </Button>
+          </Panel>
+        </motion.div>
+      )}
+    </AnimatePresence>
   )
 }