[ENG-1811] Add Columns view to Explorer

core/src/preferences/library.rs

@@ -93,6 +93,7 @@ pub enum ExplorerLayout {
 	Grid,
 	List,
 	Media,
+	Columns,
 }
 
 #[derive(Clone, Serialize, Deserialize, Type, Debug)]

interface/app/$libraryId/Explorer/ContextMenu/FilePath/CutCopyItems.tsx

@@ -4,7 +4,7 @@ import { useLocale } from '~/hooks';
 import { useKeybindFactory } from '~/hooks/useKeybindFactory';
 import { isNonEmpty } from '~/util';
 
-import { useExplorerContext } from '../../Context';
+import { useExplorerContext } from '../../ExplorerContext';
 import { useExplorerCopyPaste } from '../../hooks/useExplorerCopyPaste';
 import { ConditionalItem } from '../ConditionalItem';
 import { useContextMenuContext } from '../context';

interface/app/$libraryId/Explorer/ContextMenu/FilePath/Items.tsx

@@ -7,8 +7,8 @@ import { useKeybindFactory } from '~/hooks/useKeybindFactory';
 import { useQuickRescan } from '~/hooks/useQuickRescan';
 import { isNonEmpty } from '~/util';
 
-import { useExplorerContext } from '../../Context';
 import { CopyAsPathBase } from '../../CopyAsPath';
+import { useExplorerContext } from '../../ExplorerContext';
 import DeleteDialog from '../../FilePath/DeleteDialog';
 // import EraseDialog from '../../FilePath/EraseDialog';
 import { ConditionalItem } from '../ConditionalItem';

interface/app/$libraryId/Explorer/ContextMenu/SharedItems.tsx

@@ -8,7 +8,7 @@ import { useKeybindFactory } from '~/hooks/useKeybindFactory';
 import { isNonEmpty } from '~/util';
 import { usePlatform, type Platform } from '~/util/Platform';
 
-import { useExplorerContext } from '../Context';
+import { useExplorerContext } from '../ExplorerContext';
 import { getQuickPreviewStore } from '../QuickPreview/store';
 import { RevealInNativeExplorerBase } from '../RevealInNativeExplorer';
 import { explorerStore } from '../store';

interface/app/$libraryId/Explorer/ContextMenu/index.tsx

@@ -5,7 +5,7 @@ import { ContextMenu } from '@sd/ui';
 import { useLocale } from '~/hooks';
 import { isNonEmpty } from '~/util';
 
-import { useExplorerContext } from '../Context';
+import { useExplorerContext } from '../ExplorerContext';
 import { Conditional, type ConditionalGroupProps } from './ConditionalItem';
 import { ContextMenuContextProvider } from './context';
 import * as FilePathItems from './FilePath/Items';

interface/app/$libraryId/Explorer/DismissibleNotice.tsx

@@ -6,7 +6,7 @@ import DismissibleNotice from '~/components/DismissibleNotice';
 import { useLocale } from '~/hooks';
 import { dismissibleNoticeStore } from '~/hooks/useDismissibleNoticeStore';
 
-import { useExplorerContext } from './Context';
+import { useExplorerContext } from './ExplorerContext';
 
 const MediaViewIcon = () => {
 	return (
@@ -36,6 +36,12 @@ interface Notice {
 }
 
 const notices = {
+	columns: {
+		key: 'columnsView',
+		title: i18n.t('columns_view'),
+		description: i18n.t('columns_view_notice_description'),
+		icon: <CollectionIcon />
+	},
 	grid: {
 		key: 'gridView',
 		title: i18n.t('grid_view'),

interface/app/$libraryId/Explorer/ExplorerPathBar.tsx

@@ -15,7 +15,7 @@ import { useIsDark, useLocale, useOperatingSystem } from '~/hooks';
 import { useTabsContext } from '~/TabsContext';
 import { usePlatform } from '~/util/Platform';
 
-import { useExplorerContext } from './Context';
+import { useExplorerContext } from './ExplorerContext';
 import { FileThumb } from './FilePath/Thumb';
 import { lookup } from './RevealInNativeExplorer';
 import { useExplorerDroppable } from './useExplorerDroppable';

interface/app/$libraryId/Explorer/ExplorerTagBar.tsx

@@ -15,7 +15,7 @@ import { Shortcut, toast } from '@sd/ui';
 import { useIsDark, useKeybind, useLocale, useOperatingSystem } from '~/hooks';
 import { keybindForOs } from '~/util/keybinds';
 
-import { useExplorerContext } from './Context';
+import { useExplorerContext } from './ExplorerContext';
 import { explorerStore } from './store';
 
 export const TAG_BAR_HEIGHT = 54;

interface/app/$libraryId/Explorer/FilePath/Original.tsx

@@ -15,7 +15,7 @@ import { useLocale } from '~/hooks';
 import { pdfViewerEnabled } from '~/util/pdfViewer';
 import { usePlatform } from '~/util/Platform';
 
-import { useExplorerContext } from '../Context';
+import { useExplorerContext } from '../ExplorerContext';
 import { explorerStore } from '../store';
 import { ExplorerItemData } from '../useExplorerItemData';
 import { Image } from './Image';

interface/app/$libraryId/Explorer/Inspector/index.tsx

@@ -47,8 +47,8 @@ import { Folder, Icon } from '~/components';
 import { useLocale, useZodRouteParams } from '~/hooks';
 import { isNonEmpty } from '~/util';
 
-import { useExplorerContext } from '../Context';
 import AssignTagMenuItems from '../ContextMenu/AssignTagMenuItems';
+import { useExplorerContext } from '../ExplorerContext';
 import { FileThumb } from '../FilePath/Thumb';
 import { useQuickPreviewStore } from '../QuickPreview/store';
 import { explorerStore } from '../store';

interface/app/$libraryId/Explorer/OptionsPanel/ListView/IconSize.tsx

@@ -3,7 +3,7 @@ import { Slider } from '@sd/ui';
 import { useLocale } from '~/hooks';
 
 import { Subheading } from '..';
-import { useExplorerContext } from '../../Context';
+import { useExplorerContext } from '../../ExplorerContext';
 import { LIST_VIEW_ICON_SIZES } from '../../View/ListView/useTable';
 import { getSizes } from './util';
 

interface/app/$libraryId/Explorer/OptionsPanel/ListView/TextSize.tsx

@@ -3,7 +3,7 @@ import { Slider } from '@sd/ui';
 import { useLocale } from '~/hooks';
 
 import { Subheading } from '..';
-import { useExplorerContext } from '../../Context';
+import { useExplorerContext } from '../../ExplorerContext';
 import { LIST_VIEW_TEXT_SIZES } from '../../View/ListView/useTable';
 import { getSizes } from './util';
 

interface/app/$libraryId/Explorer/OptionsPanel/index.tsx

@@ -10,7 +10,7 @@ import i18n from '~/app/I18n';
 import { SortOrderSchema } from '~/app/route-schemas';
 import { useLocale } from '~/hooks';
 
-import { useExplorerContext } from '../Context';
+import { useExplorerContext } from '../ExplorerContext';
 import { ListViewOptions } from './ListView';
 
 export const Subheading = tw.div`text-ink-dull mb-1 text-xs font-medium`;

interface/app/$libraryId/Explorer/ParentContextMenu.tsx

@@ -17,8 +17,8 @@ import { useLocale, useOperatingSystem } from '~/hooks';
 import { useQuickRescan } from '~/hooks/useQuickRescan';
 import { keybindForOs } from '~/util/keybinds';
 
-import { useExplorerContext } from './Context';
 import { CopyAsPathBase } from './CopyAsPath';
+import { useExplorerContext } from './ExplorerContext';
 import { useExplorerCopyPaste } from './hooks/useExplorerCopyPaste';
 import { RevealInNativeExplorerBase } from './RevealInNativeExplorer';
 import { explorerStore } from './store';

interface/app/$libraryId/Explorer/QuickPreview/ImageSlider.tsx

@@ -5,7 +5,7 @@ import { ExplorerItem, getExplorerItemData } from '@sd/client';
 import { Tooltip } from '@sd/ui';
 
 import { QuickPreviewItem } from '.';
-import { useExplorerContext } from '../Context';
+import { useExplorerContext } from '../ExplorerContext';
 import { FileThumb } from '../FilePath/Thumb';
 
 export const ImageSlider = ({ activeItem }: { activeItem: QuickPreviewItem }) => {

interface/app/$libraryId/Explorer/QuickPreview/index.tsx

@@ -42,18 +42,18 @@ import { DropdownMenu, Form, toast, ToastMessage, Tooltip, z } from '@sd/ui';
 import { useIsDark, useLocale, useOperatingSystem, useShortcut } from '~/hooks';
 import { usePlatform } from '~/util/Platform';
 
-import { useExplorerContext } from '../Context';
 import ExplorerContextMenu, {
 	FilePathItems,
 	ObjectItems,
 	SeparatedConditional,
 	SharedItems
 } from '../ContextMenu';
 import { Conditional } from '../ContextMenu/ConditionalItem';
+import { useExplorerContext } from '../ExplorerContext';
 import { FileThumb } from '../FilePath/Thumb';
 import { SingleItemMetadata } from '../Inspector';
 import { explorerStore } from '../store';
-import { useExplorerViewContext } from '../View/Context';
+import { useExplorerViewContext } from '../View/ExplorerViewContext';
 import { ImageSlider } from './ImageSlider';
 import { getQuickPreviewStore, useQuickPreviewStore } from './store';
 

interface/app/$libraryId/Explorer/TopBarOptions.tsx

@@ -6,6 +6,7 @@ import {
 	SidebarSimple,
 	SlidersHorizontal,
 	SquaresFour,
+	SquareSplitHorizontal,
 	Tag
 } from '@phosphor-icons/react';
 import clsx from 'clsx';
@@ -22,11 +23,12 @@ import TopBarOptions, {
 	TOP_BAR_ICON_DEFAULT_PROPS,
 	TOP_BAR_ICON_WEIGHT
 } from '../TopBar/TopBarOptions';
-import { useExplorerContext } from './Context';
+import { useExplorerContext } from './ExplorerContext';
 import OptionsPanel from './OptionsPanel';
 import { explorerStore } from './store';
 
 const layoutIcons: Record<ExplorerLayout, Icon> = {
+	columns: SquareSplitHorizontal,
 	grid: SquaresFour,
 	list: Rows,
 	media: MonitorPlay

interface/app/$libraryId/Explorer/View/ColumnsView/index.tsx

@@ -0,0 +1,60 @@
+import { CSSProperties, memo, useEffect } from 'react';
+import { toast } from 'sonner';
+import { useSelector } from '@sd/client';
+import { useLayoutStore } from '~/app/$libraryId/Layout/store';
+import { useTopBarContext } from '~/app/$libraryId/TopBar/Context';
+
+import { explorerStore } from '../../store';
+
+export const ColumnsView = memo(() => {
+	const { sidebar } = useLayoutStore();
+	const topBar = useTopBarContext();
+	const [bottomBarHeight] = useSelector(explorerStore, (s) => [s.bottomBarHeight]);
+
+	const topPadding = topBar.topBarHeight;
+
+	// TODO: see comment: https://github.com/spacedriveapp/spacedrive/blob/f049e632f89652f1f39abbddbd56a1be03540a9f/interface/app/$libraryId/Explorer/View/ColumnsView/index.tsx#L28
+	// useEffect(() => {
+	// 	toast('Bottom bar height was updated, ' + bottomBarHeight);
+	// }, [bottomBarHeight]);
+
+	return (
+		// PRIMARY/PARENT HORIZONTAL VIEW
+		<div
+			className="explorer-scroll flex flex-row gap-2 overflow-x-scroll"
+			style={
+				{
+					'--scrollbar-margin-bottom': '2px',
+					// TODO: figure out why this **sometimes** isn't properly reactive
+					'height': `calc(100vh - ${bottomBarHeight}px)`,
+					'width': `calc(100vw - ${sidebar.size}px)`
+				} as CSSProperties
+			}
+		>
+			{new Array(15).fill('directory').map((path, colIndex, columns) => (
+				// INDIVIDUAL COLUMN
+				<div
+					className="explorer-scroll flex min-w-48 flex-col gap-0 overflow-y-scroll border-r-[1px] border-r-app-box px-3 py-2 last:border-r-0"
+					key={`col-${colIndex}-parent`}
+				>
+					<h3 className="sr-only">
+						{path} #{colIndex + 1}/{columns.length}
+					</h3>
+					<div
+						style={{
+							marginTop: topPadding
+						}}
+					/>
+					{new Array(100).fill('file').map((path, rowIndex) => (
+						<div
+							className="rounded px-1.5 py-0.5"
+							key={`col-${colIndex}-row-${rowIndex}`}
+						>
+							{path} #{rowIndex + 1}
+						</div>
+					))}
+				</div>
+			))}
+		</div>
+	);
+});

interface/app/$libraryId/Explorer/View/DragScrollable.tsx

@@ -2,7 +2,7 @@ import { useExplorerLayoutStore } from '@sd/client';
 import { tw } from '@sd/ui';
 
 import { useTopBarContext } from '../../TopBar/Context';
-import { useExplorerContext } from '../Context';
+import { useExplorerContext } from '../ExplorerContext';
 import { PATH_BAR_HEIGHT } from '../ExplorerPathBar';
 import { useDragScrollable } from './useDragScrollable';
 

interface/app/$libraryId/Explorer/View/EmptyNotice.tsx

@@ -1,7 +1,7 @@
 import { Columns, GridFour, Icon, MonitorPlay, Rows } from '@phosphor-icons/react';
 import { isValidElement, ReactNode } from 'react';
 
-import { useExplorerContext } from '../Context';
+import { useExplorerContext } from '../ExplorerContext';
 
 export const EmptyNotice = (props: {
 	icon?: Icon | ReactNode;

interface/app/$libraryId/Explorer/View/Grid/DragSelect/index.tsx

@@ -3,10 +3,10 @@ import { PropsWithChildren, useEffect, useRef } from 'react';
 import Selecto, { SelectoEvents } from 'react-selecto';
 import { ExplorerItem } from '@sd/client';
 
-import { useExplorerContext } from '../../../Context';
+import { useExplorerContext } from '../../../ExplorerContext';
 import { explorerStore } from '../../../store';
 import { useExplorerOperatingSystem } from '../../../useExplorerOperatingSystem';
-import { useExplorerViewContext } from '../../Context';
+import { useExplorerViewContext } from '../../ExplorerViewContext';
 import { DragSelectContext } from './context';
 import { useSelectedTargets } from './useSelectedTargets';
 import { getElementIndex, SELECTABLE_DATA_ATTRIBUTE } from './util';

interface/app/$libraryId/Explorer/View/Grid/Item.tsx

@@ -4,10 +4,10 @@ import { useSelector, type ExplorerItem } from '@sd/client';
 import { useOperatingSystem } from '~/hooks';
 import { useRoutingContext } from '~/RoutingContext';
 
-import { useExplorerContext } from '../../Context';
+import { useExplorerContext } from '../../ExplorerContext';
 import { explorerStore, isCut } from '../../store';
 import { uniqueId } from '../../util';
-import { useExplorerViewContext } from '../Context';
+import { useExplorerViewContext } from '../ExplorerViewContext';
 import { useDragSelectContext } from './DragSelect/context';
 import { useDragSelectable } from './DragSelect/useDragSelectable';
 

interface/app/$libraryId/Explorer/View/Grid/useKeySelection.tsx

@@ -3,9 +3,9 @@ import { useDebouncedCallback } from 'use-debounce';
 import { ExplorerItem } from '@sd/client';
 import { useShortcut } from '~/hooks';
 
-import { useExplorerContext } from '../../Context';
+import { useExplorerContext } from '../../ExplorerContext';
 import { useExplorerOperatingSystem } from '../../useExplorerOperatingSystem';
-import { useExplorerViewContext } from '../Context';
+import { useExplorerViewContext } from '../ExplorerViewContext';
 
 type Grid = ReturnType<typeof useGrid<string, ExplorerItem | undefined>>;
 

interface/app/$libraryId/Explorer/View/GridView/Item/index.tsx

@@ -12,7 +12,7 @@ import {
 } from '@sd/client';
 import { useLocale } from '~/hooks';
 
-import { useExplorerContext } from '../../../Context';
+import { useExplorerContext } from '../../../ExplorerContext';
 import { ExplorerDraggable } from '../../../ExplorerDraggable';
 import { ExplorerDroppable, useExplorerDroppableContext } from '../../../ExplorerDroppable';
 import { FileThumb } from '../../../FilePath/Thumb';

interface/app/$libraryId/Explorer/View/GridView/index.tsx

@@ -2,9 +2,9 @@ import { Grid, useGrid } from '@virtual-grid/react';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useExplorerLayoutStore } from '@sd/client';
 
-import { useExplorerContext } from '../../Context';
+import { useExplorerContext } from '../../ExplorerContext';
 import { getItemData, getItemId, uniqueId } from '../../util';
-import { useExplorerViewContext } from '../Context';
+import { useExplorerViewContext } from '../ExplorerViewContext';
 import { DragSelect } from '../Grid/DragSelect';
 import { GridItem } from '../Grid/Item';
 import { useKeySelection } from '../Grid/useKeySelection';

interface/app/$libraryId/Explorer/View/ListView/Item.tsx

@@ -4,12 +4,12 @@ import { memo, useMemo } from 'react';
 import { getItemFilePath, useSelector, type ExplorerItem } from '@sd/client';
 
 import { TABLE_PADDING_X } from '.';
-import { useExplorerContext } from '../../Context';
+import { useExplorerContext } from '../../ExplorerContext';
 import { ExplorerDraggable } from '../../ExplorerDraggable';
 import { ExplorerDroppable, useExplorerDroppableContext } from '../../ExplorerDroppable';
 import { explorerStore } from '../../store';
+import { useTableContext } from '../TableContext';
 import { ViewItem } from '../ViewItem';
-import { useTableContext } from './context';
 import { LIST_VIEW_TEXT_SIZES } from './useTable';
 
 interface Props {