diff --git a/frontend-modern/src/components/Storage/Storage.tsx b/frontend-modern/src/components/Storage/Storage.tsx index c5bb85bfc..bb2f0153b 100644 --- a/frontend-modern/src/components/Storage/Storage.tsx +++ b/frontend-modern/src/components/Storage/Storage.tsx @@ -1,7 +1,6 @@ import { Component, createEffect } from 'solid-js'; import StorageContentCard from '@/components/Storage/StorageContentCard'; import StoragePageControls from '@/components/Storage/StoragePageControls'; -import { StorageViewSegmentedControl } from '@/components/Storage/StorageViewSegmentedControl'; import { DEFAULT_STORAGE_SELECTED_NODE_ID } from './storagePageState'; import { useStoragePageModel } from './useStoragePageModel'; @@ -116,6 +115,7 @@ const Storage: Component = (props) => { savedViewsKey={savedViewsKey} view={view} setView={setView} + showViewTabs={!props.forcedView} search={search} setSearch={setSearch} filterAriaLabel={props.filterAriaLabel} @@ -186,11 +186,6 @@ const Storage: Component = (props) => { setHoveredStorageResourceId={setHoveredStorageResourceId} selectedDiskId={selectedDiskId} setSelectedDiskId={setSelectedDiskId} - actions={ - !props.forcedView && !kioskMode() ? ( - - ) : undefined - } /> diff --git a/frontend-modern/src/components/Storage/StoragePageControls.tsx b/frontend-modern/src/components/Storage/StoragePageControls.tsx index 35105f8d4..f9ffed18d 100644 --- a/frontend-modern/src/components/Storage/StoragePageControls.tsx +++ b/frontend-modern/src/components/Storage/StoragePageControls.tsx @@ -1,5 +1,8 @@ import { Component, JSX, Show, createMemo } from 'solid-js'; +import DatabaseIcon from 'lucide-solid/icons/database'; +import HardDriveIcon from 'lucide-solid/icons/hard-drive'; import { FilterBar, type FilterDef } from '@/components/shared/FilterBar'; +import { Subtabs } from '@/components/shared/Subtabs'; import { useBreakpoint } from '@/hooks/useBreakpoint'; import { STORAGE_KEYS } from '@/utils/localStorage'; import { @@ -38,6 +41,7 @@ type StoragePageControlsProps = { kioskMode: () => boolean; view: () => StorageView; setView: (value: StorageView) => void; + showViewTabs?: boolean; search: () => string; setSearch: (value: string) => void; filterAriaLabel?: string; @@ -132,6 +136,27 @@ export const StoragePageControls: Component = (props) } }; + const storageViewTabs = [ + { + value: 'pools', + label: ( + + + ), + }, + { + value: 'disks', + label: ( + + + ), + }, + ]; + const buildFilters = (): FilterDef[] => { const filters: FilterDef[] = []; @@ -268,6 +293,14 @@ export const StoragePageControls: Component = (props) return (
+ + props.setView(value as StorageView)} + tabs={storageViewTabs} + ariaLabel="Storage view" + /> + , - 'onChange' -> { - value: StorageView; - onChange: (value: StorageView) => void; -} - -export const StorageViewSegmentedControl: Component = (props) => { - const [local, divProps] = splitProps(props, ['value', 'onChange']); - - return ( - local.onChange(value as StorageView)} - options={[ - { - value: 'pools', - title: 'Show storage pools and backup targets', - label: ( - <> -