renterd file explorer modes

.changeset/late-numbers-march.md

@@ -0,0 +1,5 @@
+---
+'@siafoundation/react-renterd': minor
+---
+
+Added useObjectList.

.changeset/short-clocks-fix.md

@@ -0,0 +1,5 @@
+---
+'renterd': minor
+---
+
+The file explorer now has a global mode that shows a flat list of files from across all directories in a bucket.

.changeset/silent-pots-carry.md

@@ -0,0 +1,5 @@
+---
+'renterd': minor
+---
+
+The file health indicator now show the percentage inline.

.changeset/wise-socks-dance.md

@@ -0,0 +1,5 @@
+---
+'renterd': minor
+---
+
+The file explorer global mode now allows you to sort across all files in a bucket.

apps/renterd/components/Files/Columns/FilesHealthColumn/FilesHealthColumnContents.tsx

@@ -7,10 +7,10 @@ import {
 import { useObject } from '@siafoundation/react-renterd'
 import { cx } from 'class-variance-authority'
 import { sortBy } from '@technically/lodash'
-import { computeSlabContractSetShards } from '../../../../contexts/files/health'
-import { ObjectData } from '../../../../contexts/files/types'
+import { computeSlabContractSetShards } from '../../../../lib/health'
+import { ObjectData } from '../../../../contexts/filesManager/types'
 import { useHealthLabel } from '../../../../hooks/useHealthLabel'
-import { bucketAndKeyParamsFromPath } from '../../../../contexts/files/paths'
+import { bucketAndKeyParamsFromPath } from '../../../../lib/paths'
 
 export function FilesHealthColumnContents({
   path,

apps/renterd/components/Files/Columns/FilesHealthColumn/index.tsx

@@ -1,5 +1,5 @@
 import { HoverCard, LoadingDots, Text } from '@siafoundation/design-system'
-import { ObjectData } from '../../../../contexts/files/types'
+import { ObjectData } from '../../../../contexts/filesManager/types'
 import { useHealthLabel } from '../../../../hooks/useHealthLabel'
 import { FilesHealthColumnContents } from './FilesHealthColumnContents'
 
@@ -11,7 +11,7 @@ export function FilesHealthColumn(props: ObjectData) {
     size,
     isDirectory,
   })
-
+  const displayPercent = `${(displayHealth * 100).toFixed(0)}%`
   if (isDirectory) {
     if (name === '..') {
       return null
@@ -22,15 +22,18 @@ export function FilesHealthColumn(props: ObjectData) {
           openDelay: 100,
         }}
         trigger={
-          <Text color={color} className="flex cursor-pointer">
-            {icon}
-          </Text>
+          <div className="flex items-center gap-1 cursor-pointer">
+            <Text color={color}>{icon}</Text>
+            <Text color="verySubtle" size="12">
+              {displayPercent}
+            </Text>
+          </div>
         }
       >
         <div className="z-10 flex flex-col -mx-1 overflow-hidden">
           <div className="flex justify-between gap-2 py-0.5 px-2">
             <Text size="12">{label}</Text>
-            <Text size="12">{(displayHealth * 100).toFixed(0)}%</Text>
+            <Text size="12">{displayPercent}</Text>
           </div>
         </div>
       </HoverCard>
@@ -47,9 +50,12 @@ export function FilesHealthColumn(props: ObjectData) {
         openDelay: 100,
       }}
       trigger={
-        <Text color={color} className="flex cursor-pointer">
-          {icon}
-        </Text>
+        <div className="flex items-center gap-1 cursor-pointer">
+          <Text color={color}>{icon}</Text>
+          <Text color="verySubtle" size="12">
+            {displayPercent}
+          </Text>
+        </div>
       }
     >
       {/* important to separate contents so that each row does not trigger 1+n

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

@@ -5,7 +5,7 @@ import {
 } from '@siafoundation/design-system'
 import { Copy16 } from '@siafoundation/react-icons'
 import { useObject } from '@siafoundation/react-renterd'
-import { bucketAndKeyParamsFromPath } from '../../../contexts/files/paths'
+import { bucketAndKeyParamsFromPath } from '../../../lib/paths'
 
 type Props = {
   path: string

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

@@ -18,18 +18,19 @@ import {
   Filter16,
   Edit16,
 } from '@siafoundation/react-icons'
-import { useFiles } from '../../../contexts/files'
 import { useFileDelete } from '../useFileDelete'
 import { CopyMetadataMenuItem } from './CopyMetadataMenuItem'
-import { getFilename } from '../../../contexts/files/paths'
+import { getFilename } from '../../../lib/paths'
 import { useDialog } from '../../../contexts/dialog'
+import { useFilesManager } from '../../../contexts/filesManager'
 
 type Props = {
   path: string
 }
 
 export function FileContextMenu({ path }: Props) {
-  const { downloadFiles, getFileUrl, navigateToFile } = useFiles()
+  const { downloadFiles, getFileUrl, navigateToFileDirectory } =
+    useFilesManager()
   const deleteFile = useFileDelete()
   const { openDialog } = useDialog()
 
@@ -68,7 +69,7 @@ export function FileContextMenu({ path }: Props) {
       <DropdownMenuLabel>Filter</DropdownMenuLabel>
       <DropdownMenuItem
         onSelect={() => {
-          navigateToFile(path)
+          navigateToFileDirectory(path)
         }}
       >
         <DropdownMenuLeftSlot>

apps/renterd/components/Files/FilesBreadcrumbMenuMode.tsx

@@ -0,0 +1,20 @@
+import { LinkButton } from '@siafoundation/design-system'
+import { Earth16, Folder16 } from '@siafoundation/react-icons'
+import { useFilesManager } from '../../contexts/filesManager'
+
+export function FilesBreadcrumbMenuMode() {
+  const { switchViewModeUrl, activeViewMode } = useFilesManager()
+
+  return (
+    <LinkButton
+      href={switchViewModeUrl}
+      tip={
+        activeViewMode === 'directory'
+          ? 'Viewing directory explorer'
+          : 'Viewing all bucket files'
+      }
+    >
+      {activeViewMode === 'directory' ? <Folder16 /> : <Earth16 />}
+    </LinkButton>
+  )
+}

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

@@ -1,11 +1,11 @@
 import { CommandGroup, CommandItemSearch } from '../../../CmdRoot/Item'
 import { Page } from '../../../CmdRoot/types'
 import { useObjectSearch } from '@siafoundation/react-renterd'
-import { isDirectory } from '../../../../contexts/files/paths'
-import { useFiles } from '../../../../contexts/files'
+import { isDirectory } from '../../../../lib/paths'
 import { Text } from '@siafoundation/design-system'
 import { Document16, FolderIcon } from '@siafoundation/react-icons'
 import { FileSearchEmpty } from './FileSearchEmpty'
+import { useFilesManager } from '../../../../contexts/filesManager'
 
 export const filesSearchPage = {
   namespace: 'files/search',
@@ -27,14 +27,15 @@ export function FilesSearchCmd({
   beforeSelect?: () => void
   afterSelect?: () => void
 }) {
-  const { activeBucket, navigateToFile } = useFiles()
+  const { activeBucketName: activeBucket, navigateToFileDirectory } =
+    useFilesManager()
   const onSearchPage = currentPage?.namespace === filesSearchPage.namespace
   const results = useObjectSearch({
     disabled: !onSearchPage,
     params: {
       bucket: activeBucket || 'default',
       key: debouncedSearch,
-      skip: 0,
+      offset: 0,
       limit: 10,
     },
     config: {
@@ -61,7 +62,7 @@ export function FilesSearchCmd({
             key={path}
             onSelect={() => {
               beforeSelect()
-              navigateToFile(path)
+              navigateToFileDirectory(path)
               afterSelect()
             }}
             value={path}

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

@@ -1,11 +1,15 @@
 import { Button, Separator, TextField } from '@siafoundation/design-system'
 import { useEffect, useState } from 'react'
-import { useFiles } from '../../../contexts/files'
 import { useDebounce } from 'use-debounce'
 import { Close16 } from '@siafoundation/react-icons'
+import { useFilesManager } from '../../../contexts/filesManager'
 
-export function FilesFilterDirectoryMenu() {
-  const { filters, setFilter, removeFilter } = useFiles()
+type Props = {
+  placeholder?: string
+}
+
+export function FilesFilterDirectoryMenu({ placeholder }: Props) {
+  const { filters, setFilter, removeFilter } = useFilesManager()
   const [search, setSearch] = useState('')
   const [debouncedSearch] = useDebounce(search, 500)
 
@@ -36,7 +40,7 @@ export function FilesFilterDirectoryMenu() {
       <TextField
         variant="ghost"
         focus="none"
-        placeholder="Filter files in current directory"
+        placeholder={placeholder || 'Filter files in current directory'}
         value={search}
         onChange={(e) => setSearch(e.currentTarget.value)}
         className="w-full !pl-0"

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

@@ -11,9 +11,12 @@ import { useDialog } from '../../../contexts/dialog'
 import { useRouter } from 'next/router'
 import { routes } from '../../../config/routes'
 import { useContracts } from '../../../contexts/contracts'
-import { FilesSearchCmd, filesSearchPage } from '../FilesCmd/FilesSearchCmd'
+import {
+  FilesSearchCmd,
+  filesSearchPage,
+} from '../../Files/FilesCmd/FilesSearchCmd'
 import { useDebounce } from 'use-debounce'
-import { FileSearchEmpty } from '../FilesCmd/FilesSearchCmd/FileSearchEmpty'
+import { FileSearchEmpty } from '../../Files/FilesCmd/FilesSearchCmd/FileSearchEmpty'
 
 type Props = {
   panel?: boolean