feat: preview pane + better row selection handling (#12)

james-elicx · Oct 4, 2023 · a9a6e4b · a9a6e4b
1 parent ebe2228
commit a9a6e4b
Show file tree

Hide file tree

Showing 23 changed files with 573 additions and 312 deletions.
diff --git a/app/bucket/[bucket]/[[...path]]/layout.tsx b/app/bucket/[bucket]/[[...path]]/layout.tsx
@@ -1,6 +1,6 @@
 import { validateBucketName } from '@/utils/cf';
 import { formatBucketName, formatFullPath } from '@/utils';
-import { ObjectExplorerProvider, FilePreviewProvider, ExplorerEventsProvider } from '@/components';
+import { ObjectExplorerProvider, ExplorerEventsProvider, ObjectPreview } from '@/components';
 import type { Metadata } from 'next';
 import { notFound } from 'next/navigation';
 import { Ctx } from './ctx';
@@ -21,9 +21,11 @@ const Layout = async ({ params: { bucket, path }, children }: Props): Promise<JS
 			<Ctx bucketName={bucket} path={fullPath} />
 
 			<ObjectExplorerProvider>
-				<FilePreviewProvider bucketName={bucket}>
-					<ExplorerEventsProvider>{children}</ExplorerEventsProvider>
-				</FilePreviewProvider>
+				<ExplorerEventsProvider>
+					{children}
+
+					<ObjectPreview />
+				</ExplorerEventsProvider>
 			</ObjectExplorerProvider>
 		</>
 	);

diff --git a/app/bucket/[bucket]/[[...path]]/page.tsx b/app/bucket/[bucket]/[[...path]]/page.tsx
@@ -1,6 +1,6 @@
 import { getBucketItems } from '@/utils/cf';
 import { formatFullPath } from '@/utils';
-import { ObjectExplorer } from '@/components';
+import { ObjectExplorer, PreviewPane } from '@/components';
 import type { RouteParams } from './layout';
 
 type Props = { params: RouteParams };
@@ -12,15 +12,19 @@ const Page = async ({ params: { bucket, path } }: Props) => {
 	const objects = [...items.delimitedPrefixes, ...items.objects];
 
 	return (
-		<main className="mx-4 flex flex-grow flex-col justify-between">
-			{items.delimitedPrefixes.length === 0 && items.objects.length === 0 ? (
-				<span className="flex flex-grow items-center justify-center">No items found...</span>
-			) : (
-				<ObjectExplorer
-					initialObjects={objects}
-					initialCursor={items.truncated ? items.cursor : undefined}
-				/>
-			)}
+		<main className="flex h-full w-full flex-row justify-between gap-4 px-4">
+			<div className="flex flex-grow flex-col justify-between overflow-x-auto">
+				{items.delimitedPrefixes.length === 0 && items.objects.length === 0 ? (
+					<span className="flex flex-grow items-center justify-center">No items found...</span>
+				) : (
+					<ObjectExplorer
+						initialObjects={objects}
+						initialCursor={items.truncated ? items.cursor : undefined}
+					/>
+				)}
+			</div>
+
+			<PreviewPane />
 		</main>
 	);
 };

diff --git a/app/layout.tsx b/app/layout.tsx
@@ -1,6 +1,6 @@
 import type { Metadata } from 'next';
 import localFont from 'next/font/local';
-import { LocationProvider, ThemeProvider, SideNav, TopNav } from '@/components';
+import { LocationProvider, ThemeProvider, SideNav, TopNav, SettingsProvider } from '@/components';
 import './globals.css';
 import { getBuckets } from '@/utils/cf';
 import { AuthProvider } from '@/components/providers/auth-provider';
@@ -51,17 +51,19 @@ const Layout = async ({ children }: Props) => {
 			<body className={TASAOrbiterText.variable}>
 				<AuthProvider user={user}>
 					<ThemeProvider attribute="data-theme" defaultTheme="light">
-						<LocationProvider buckets={buckets}>
-							<div className="flex flex-grow flex-row bg-background dark:bg-background-dark">
-								<SideNav />
+						<SettingsProvider>
+							<LocationProvider buckets={buckets}>
+								<div className="flex flex-grow flex-row bg-background dark:bg-background-dark">
+									<SideNav />
 
-								<div className="flex h-screen flex-grow flex-col overflow-y-auto">
-									<TopNav />
+									<div className="flex h-screen flex-grow flex-col overflow-y-auto">
+										<TopNav />
 
-									{children}
+										{children}
+									</div>
 								</div>
-							</div>
-						</LocationProvider>
+							</LocationProvider>
+						</SettingsProvider>
 					</ThemeProvider>
 				</AuthProvider>
 			</body>

diff --git a/components/icons/index.ts b/components/icons/index.ts
@@ -26,4 +26,6 @@ export {
 	GearSix,
 	DotsThreeOutlineVertical,
 	CaretCircleDown,
+	Door,
+	DoorOpen,
 } from '@phosphor-icons/react';
diff --git a/components/index.ts b/components/index.ts
@@ -4,3 +4,4 @@ export * from './typography';
 export * from './navs';
 export * from './file-upload';
 export * from './object-explorer';
+export * from './tab-group';
diff --git a/components/navs/top-nav.tsx b/components/navs/top-nav.tsx
@@ -7,6 +7,7 @@ import { addLeadingSlash, formatFullPath, formatBucketName, toTitleCase } from '
 import { ThemeToggle, UploadFilesProvider } from '../providers';
 import { ArrowLeft, ArrowRight, CaretRight } from '../icons';
 import { UploadFileButton } from '../file-upload';
+import { TogglePreviewPaneButton } from '../object-explorer';
 
 const TopNavSection = ({ children }: { children: React.ReactNode }): JSX.Element => (
 	<div className="flex flex-row items-center gap-4">{children}</div>
@@ -79,6 +80,8 @@ export const TopNav = (): JSX.Element => {
 			</TopNavSection>
 
 			<TopNavSection>
+				<TogglePreviewPaneButton />
+
 				<UploadFilesProvider>
 					<UploadFileButton />
 				</UploadFilesProvider>