feat: renterd refine file explorer modes

.changeset/gentle-rockets-fry.md

@@ -0,0 +1,5 @@
+---
+'renterd': patch
+---
+
+The file breadcrumb nav now shows the root as "Buckets".

.changeset/ten-yaks-relate.md

@@ -0,0 +1,5 @@
+---
+'renterd': patch
+---
+
+The explorer mode switcher button is now disabled when viewing buckets. Closes https://github.com/SiaFoundation/renterd/issues/973

.changeset/thick-ears-refuse.md

@@ -0,0 +1,5 @@
+---
+'renterd': minor
+---
+
+File explorer navigation actions now retain the active explorer mode.

.changeset/wicked-dragons-doubt.md

@@ -0,0 +1,5 @@
+---
+'renterd': minor
+---
+
+The selected file explorer mode is now persisted between sessions.

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

@@ -29,7 +29,7 @@ type Props = {
 }
 
 export function FileContextMenu({ path }: Props) {
-  const { downloadFiles, getFileUrl, navigateToFileDirectory } =
+  const { downloadFiles, getFileUrl, navigateToModeSpecificFiltering } =
     useFilesManager()
   const deleteFile = useFileDelete()
   const { openDialog } = useDialog()
@@ -69,7 +69,7 @@ export function FileContextMenu({ path }: Props) {
       <DropdownMenuLabel>Filter</DropdownMenuLabel>
       <DropdownMenuItem
         onSelect={() => {
-          navigateToFileDirectory(path)
+          navigateToModeSpecificFiltering(path)
         }}
       >
         <DropdownMenuLeftSlot>

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

@@ -27,13 +27,14 @@ export function FilesSearchCmd({
   beforeSelect?: () => void
   afterSelect?: () => void
 }) {
-  const { activeBucketName: activeBucket, navigateToFileDirectory } =
+  const { activeBucketName: activeBucket, navigateToModeSpecificFiltering } =
     useFilesManager()
   const onSearchPage = currentPage?.namespace === filesSearchPage.namespace
+  const searchBucket = activeBucket || 'default'
   const results = useObjectSearch({
     disabled: !onSearchPage,
     params: {
-      bucket: activeBucket || 'default',
+      bucket: searchBucket,
       key: debouncedSearch,
       offset: 0,
       limit: 10,
@@ -62,7 +63,7 @@ export function FilesSearchCmd({
             key={path}
             onSelect={() => {
               beforeSelect()
-              navigateToFileDirectory(path)
+              navigateToModeSpecificFiltering(searchBucket + path)
               afterSelect()
             }}
             value={path}

apps/renterd/components/Files/FilesExplorerModeButton.tsx

@@ -0,0 +1,33 @@
+import { Button, Tooltip } from '@siafoundation/design-system'
+import { BucketIcon, Earth16, Folder16 } from '@siafoundation/react-icons'
+import { useFilesManager } from '../../contexts/filesManager'
+
+export function FilesExplorerModeButton() {
+  const { isViewingBuckets, toggleExplorerMode, activeExplorerMode } =
+    useFilesManager()
+
+  if (isViewingBuckets) {
+    return (
+      <Tooltip content="Viewing all buckets">
+        <div>
+          <Button state="waiting">
+            <BucketIcon size={16} />
+          </Button>
+        </div>
+      </Tooltip>
+    )
+  }
+
+  return (
+    <Button
+      onClick={toggleExplorerMode}
+      tip={
+        activeExplorerMode === 'directory'
+          ? 'Viewing directory explorer'
+          : 'Viewing all bucket files'
+      }
+    >
+      {activeExplorerMode === 'directory' ? <Folder16 /> : <Earth16 />}
+    </Button>
+  )
+}

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

@@ -9,20 +9,23 @@ type Props = {
 }
 
 export function FilesFilterDirectoryMenu({ placeholder }: Props) {
-  const { filters, setFilter, removeFilter } = useFilesManager()
-  const [search, setSearch] = useState('')
+  const { setFilter, removeFilter, fileNamePrefixFilter } = useFilesManager()
+  const [search, setSearch] = useState(fileNamePrefixFilter)
   const [debouncedSearch] = useDebounce(search, 500)
 
+  // Update search value directly when fileNamePrefixFilter changes
   useEffect(() => {
-    const fileNamePrefixFilter = filters.find((f) => f.id === 'fileNamePrefix')
-    const fileNamePrefix = fileNamePrefixFilter?.value || ''
-    if (fileNamePrefix !== search) {
-      setSearch(fileNamePrefix)
+    if (fileNamePrefixFilter !== search) {
+      setSearch(fileNamePrefixFilter)
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [setSearch, filters])
+  }, [fileNamePrefixFilter])
 
+  // Update and trigger the server filter if the debounced search value changes
   useEffect(() => {
+    if (fileNamePrefixFilter === debouncedSearch) {
+      return
+    }
     if (debouncedSearch.length) {
       setFilter({
         id: 'fileNamePrefix',

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

@@ -8,9 +8,8 @@ import {
 import { Command } from 'cmdk'
 import { useCallback, useState } from 'react'
 import { useDialog } from '../../../contexts/dialog'
-import { useRouter } from 'next/router'
+import { useAppRouter, usePathname } from '@siafoundation/next'
 import { routes } from '../../../config/routes'
-import { useContracts } from '../../../contexts/contracts'
 import {
   FilesSearchCmd,
   filesSearchPage,
@@ -23,9 +22,9 @@ type Props = {
 }
 
 export function FilesSearchMenu({ panel }: Props) {
-  const { resetFilters } = useContracts()
   const { closeDialog } = useDialog()
-  const router = useRouter()
+  const router = useAppRouter()
+  const pathname = usePathname()
   const [search, setSearch] = useState('')
   const [debouncedSearch] = useDebounce(search, 500)
 
@@ -61,10 +60,9 @@ export function FilesSearchMenu({ panel }: Props) {
             currentPage={filesSearchPage}
             beforeSelect={() => {
               beforeSelect()
-              resetFilters()
             }}
             afterSelect={() => {
-              if (!router.pathname.startsWith(routes.files.index)) {
+              if (!pathname.startsWith(routes.files.index)) {
                 router.push(routes.files.index)
               }
             }}

apps/renterd/components/Files/FilesStatsMenuShared/FilesStatsMenuCount.tsx

@@ -5,11 +5,12 @@ import { useFilesDirectory } from '../../../contexts/filesDirectory'
 import { useFilesFlat } from '../../../contexts/filesFlat'
 
 export function FilesStatsMenuCount() {
-  const { isViewingABucket, uploadsList, activeViewMode } = useFilesManager()
+  const { isViewingABucket, uploadsList, activeExplorerMode } =
+    useFilesManager()
   const { pageCount: directoryPageCount } = useFilesDirectory()
   const { pageCount: flatPageCount } = useFilesFlat()
   const pageCount =
-    activeViewMode === 'flat' ? flatPageCount : directoryPageCount
+    activeExplorerMode === 'flat' ? flatPageCount : directoryPageCount
 
   const stats = useObjectStats({
     config: {

apps/renterd/components/Files/index.tsx

@@ -1,15 +1,13 @@
 import { FilesDirectory } from '../FilesDirectory'
-import { useSearchParams } from '@siafoundation/next'
 import { FilesFlat } from '../FilesFlat'
 import { useFilesManager } from '../../contexts/filesManager'
 
 export function Files() {
-  const { isViewingBuckets } = useFilesManager()
-  const params = useSearchParams()
+  const { isViewingBuckets, activeExplorerMode } = useFilesManager()
 
-  if (params.get('view') === 'flat' && !isViewingBuckets) {
-    return <FilesFlat />
+  if (activeExplorerMode === 'directory' || isViewingBuckets) {
+    return <FilesDirectory />
   }
 
-  return <FilesDirectory />
+  return <FilesFlat />
 }

apps/renterd/components/FilesDirectory/FilesBreadcrumbMenu.tsx

@@ -2,7 +2,7 @@ import { Fragment, useEffect, useRef } from 'react'
 import { Text, ScrollArea } from '@siafoundation/design-system'
 import { ChevronRight16 } from '@siafoundation/react-icons'
 import { useFilesManager } from '../../contexts/filesManager'
-import { FilesBreadcrumbMenuMode } from '../Files/FilesBreadcrumbMenuMode'
+import { FilesExplorerModeButton } from '../Files/FilesExplorerModeButton'
 
 export function FilesBreadcrumbMenu() {
   const { activeDirectory, setActiveDirectory } = useFilesManager()
@@ -19,7 +19,7 @@ export function FilesBreadcrumbMenu() {
 
   return (
     <div className="flex gap-2 items-center h-full">
-      <FilesBreadcrumbMenuMode />
+      <FilesExplorerModeButton />
       <ScrollArea>
         <div className="flex gap-1 items-center h-full">
           <Text
@@ -29,7 +29,7 @@ export function FilesBreadcrumbMenu() {
             className="flex items-center cursor-pointer"
             noWrap
           >
-            Files
+            Buckets
           </Text>
           {activeDirectory.length > 0 && (
             <Text size="16" color="verySubtle" className="flex items-center">

apps/renterd/components/FilesFlat/FilesBreadcrumbMenu.tsx

@@ -1,15 +1,15 @@
 import { Text, ScrollArea } from '@siafoundation/design-system'
 import { ChevronRight16 } from '@siafoundation/react-icons'
 import { useFilesManager } from '../../contexts/filesManager'
-import { FilesBreadcrumbMenuMode } from '../Files/FilesBreadcrumbMenuMode'
+import { FilesExplorerModeButton } from '../Files/FilesExplorerModeButton'
 
 export function FilesBreadcrumbMenu() {
   const { activeBucketName: activeBucket, setActiveDirectory } =
     useFilesManager()
 
   return (
     <div className="flex gap-2 items-center h-full">
-      <FilesBreadcrumbMenuMode />
+      <FilesExplorerModeButton />
       <ScrollArea>
         <div className="flex gap-1 items-center h-full">
           <Text
@@ -19,7 +19,7 @@ export function FilesBreadcrumbMenu() {
             className="flex items-center cursor-pointer"
             noWrap
           >
-            Files
+            Buckets
           </Text>
           <Text size="16" color="verySubtle" className="flex items-center">
             <ChevronRight16 />

apps/renterd/contexts/filesDirectory/columns.tsx

@@ -66,7 +66,8 @@ export const columns: FilesTableColumn[] = [
     category: 'general',
     contentClassName: 'max-w-[600px]',
     render: function NameColumn({ data: { name, type } }) {
-      const { setActiveDirectory } = useFilesManager()
+      const { setActiveDirectoryAndFileNamePrefix, setActiveDirectory } =
+        useFilesManager()
       if (type === 'bucket') {
         return (
           <Text
@@ -76,7 +77,7 @@ export const columns: FilesTableColumn[] = [
             className="cursor-pointer"
             onClick={(e) => {
               e.stopPropagation()
-              setActiveDirectory(() => [name])
+              setActiveDirectoryAndFileNamePrefix([name], '')
             }}
           >
             {name}

apps/renterd/contexts/filesDirectory/dataset.tsx

@@ -15,7 +15,7 @@ export function useDataset() {
   const {
     activeBucketName,
     activeDirectoryPath,
-    fileNamePrefix,
+    fileNamePrefixFilter,
     sortDirection,
     sortField,
   } = useFilesManager()
@@ -31,13 +31,15 @@ export function useDataset() {
       offset,
       limit,
     }
-    if (fileNamePrefix) {
-      p.prefix = fileNamePrefix.slice(1)
+    if (fileNamePrefixFilter) {
+      p.prefix = fileNamePrefixFilter.startsWith('/')
+        ? fileNamePrefixFilter.slice(1)
+        : fileNamePrefixFilter
     }
     return p
   }, [
     activeDirectoryPath,
-    fileNamePrefix,
+    fileNamePrefixFilter,
     sortField,
     sortDirection,
     offset,