Cleanup empty notice (#1042)

* cleanup empty notice + move tag assign options

* typescript

Cargo.lock

@@ -5871,7 +5871,7 @@ dependencies = [
 [[package]]
 name = "prisma-client-rust"
 version = "0.6.8"
-source = "git+https://github.com/Brendonovich/prisma-client-rust?rev=2e9ca1da3c94a14ed65eb5ef534a164bb4802a3f#2e9ca1da3c94a14ed65eb5ef534a164bb4802a3f"
+source = "git+https://github.com/Brendonovich/prisma-client-rust?rev=e0af63224dcdb00a14c0aeade878894be8304cfc#e0af63224dcdb00a14c0aeade878894be8304cfc"
 dependencies = [
  "base64 0.13.1",
  "bigdecimal",
@@ -5904,7 +5904,7 @@ dependencies = [
 [[package]]
 name = "prisma-client-rust-cli"
 version = "0.6.8"
-source = "git+https://github.com/Brendonovich/prisma-client-rust?rev=2e9ca1da3c94a14ed65eb5ef534a164bb4802a3f#2e9ca1da3c94a14ed65eb5ef534a164bb4802a3f"
+source = "git+https://github.com/Brendonovich/prisma-client-rust?rev=e0af63224dcdb00a14c0aeade878894be8304cfc#e0af63224dcdb00a14c0aeade878894be8304cfc"
 dependencies = [
  "directories",
  "flate2",
@@ -5924,7 +5924,7 @@ dependencies = [
 [[package]]
 name = "prisma-client-rust-macros"
 version = "0.6.8"
-source = "git+https://github.com/Brendonovich/prisma-client-rust?rev=2e9ca1da3c94a14ed65eb5ef534a164bb4802a3f#2e9ca1da3c94a14ed65eb5ef534a164bb4802a3f"
+source = "git+https://github.com/Brendonovich/prisma-client-rust?rev=e0af63224dcdb00a14c0aeade878894be8304cfc#e0af63224dcdb00a14c0aeade878894be8304cfc"
 dependencies = [
  "convert_case 0.6.0",
  "proc-macro2",
@@ -5936,7 +5936,7 @@ dependencies = [
 [[package]]
 name = "prisma-client-rust-sdk"
 version = "0.6.8"
-source = "git+https://github.com/Brendonovich/prisma-client-rust?rev=2e9ca1da3c94a14ed65eb5ef534a164bb4802a3f#2e9ca1da3c94a14ed65eb5ef534a164bb4802a3f"
+source = "git+https://github.com/Brendonovich/prisma-client-rust?rev=e0af63224dcdb00a14c0aeade878894be8304cfc#e0af63224dcdb00a14c0aeade878894be8304cfc"
 dependencies = [
  "convert_case 0.5.0",
  "dmmf",

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

@@ -2,7 +2,7 @@ import { ArrowBendUpRight, TagSimple } from 'phosphor-react';
 import { FilePath, ObjectKind, Object as ObjectType, useLibraryMutation } from '@sd/client';
 import { ContextMenu } from '@sd/ui';
 import { showAlertDialog } from '~/components';
-import AssignTagMenuItems from '../../AssignTagMenuItems';
+import AssignTagMenuItems from './AssignTagMenuItems';
 
 export const RemoveFromRecents = ({ object }: { object: ObjectType }) => {
 	const removeFromRecents = useLibraryMutation('files.removeAccessTime');

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

@@ -18,7 +18,7 @@ import {
 } from '@sd/client';
 import { Button, Divider, DropdownMenu, Tooltip, tw } from '@sd/ui';
 import { useIsDark } from '~/hooks';
-import AssignTagMenuItems from '../AssignTagMenuItems';
+import AssignTagMenuItems from '../ContextMenu/Object/AssignTagMenuItems';
 import FileThumb from '../FilePath/Thumb';
 import FavoriteButton from './FavoriteButton';
 import Note from './Note';

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

@@ -37,7 +37,7 @@ import {
 	useExplorerViewContext
 } from '../ViewContext';
 import { useExplorerConfigStore } from '../config';
-import { ExplorerLayoutMode, getExplorerStore } from '../store';
+import { getExplorerStore, useExplorerStore } from '../store';
 import GridView from './GridView';
 import ListView from './ListView';
 import MediaView from './MediaView';
@@ -114,34 +114,21 @@ export interface ExplorerViewProps<T extends ExplorerViewSelection = ExplorerVie
 		ExplorerViewContext<T>,
 		'multiSelect' | 'selectable' | 'isRenaming' | 'setIsRenaming' | 'setIsContextMenuOpen'
 	> {
-	layout: ExplorerLayoutMode;
 	className?: string;
-	emptyNotice?: JSX.Element | { icon?: Icon | ReactNode; message?: ReactNode } | null;
+	emptyNotice?: JSX.Element;
 }
 
 export default memo(
 	<T extends ExplorerViewSelection>({
-		layout,
 		className,
 		emptyNotice,
 		...contextProps
 	}: ExplorerViewProps<T>) => {
+		const { layoutMode } = useExplorerStore();
+
 		const [isContextMenuOpen, setIsContextMenuOpen] = useState(false);
 		const [isRenaming, setIsRenaming] = useState(false);
 
-		const emptyNoticeIcon = (icon?: Icon) => {
-			const Icon =
-				icon ??
-				{
-					grid: GridFour,
-					media: MonitorPlay,
-					columns: Columns,
-					rows: Rows
-				}[layout];
-
-			return <Icon size={100} opacity={0.3} />;
-		};
-
 		useKeyDownHandlers({
 			items: contextProps.items,
 			selected: contextProps.selected,
@@ -176,26 +163,12 @@ export default memo(
 								} as ExplorerViewContext
 							}
 						>
-							{layout === 'grid' && <GridView />}
-							{layout === 'rows' && <ListView />}
-							{layout === 'media' && <MediaView />}
+							{layoutMode === 'grid' && <GridView />}
+							{layoutMode === 'rows' && <ListView />}
+							{layoutMode === 'media' && <MediaView />}
 						</ViewContext.Provider>
-					) : emptyNotice === null ? null : isValidElement(emptyNotice) ? (
-						emptyNotice
 					) : (
-						<div className="flex h-full flex-col items-center justify-center text-ink-faint">
-							{emptyNotice && 'icon' in emptyNotice
-								? isValidElement(emptyNotice.icon)
-									? emptyNotice.icon
-									: emptyNoticeIcon(emptyNotice.icon as Icon)
-								: emptyNoticeIcon()}
-
-							<p className="mt-5 text-xs">
-								{emptyNotice && 'message' in emptyNotice
-									? emptyNotice.message
-									: 'This list is empty'}
-							</p>
-						</div>
+						emptyNotice
 					)}
 				</div>
 
@@ -206,6 +179,41 @@ export default memo(
 	}
 ) as <T extends ExplorerViewSelection>(props: ExplorerViewProps<T>) => JSX.Element;
 
+export const EmptyNotice = ({
+	icon,
+	message
+}: {
+	icon?: Icon | ReactNode;
+	message?: ReactNode;
+}) => {
+	const { layoutMode } = useExplorerStore();
+
+	const emptyNoticeIcon = (icon?: Icon) => {
+		const Icon =
+			icon ??
+			{
+				grid: GridFour,
+				media: MonitorPlay,
+				columns: Columns,
+				rows: Rows
+			}[layoutMode];
+
+		return <Icon size={100} opacity={0.3} />;
+	};
+
+	return (
+		<div className="flex h-full flex-col items-center justify-center text-ink-faint">
+			{icon
+				? isValidElement(icon)
+					? icon
+					: emptyNoticeIcon(icon as Icon)
+				: emptyNoticeIcon()}
+
+			<p className="mt-5 text-xs">{message !== undefined ? message : 'This list is empty'}</p>
+		</div>
+	);
+};
+
 const useKeyDownHandlers = ({
 	items,
 	selected,

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

@@ -8,7 +8,7 @@ import ContextMenu from './ContextMenu';
 import DismissibleNotice from './DismissibleNotice';
 import { Inspector } from './Inspector';
 import ExplorerContextMenu from './ParentContextMenu';
-import View, { ExplorerViewProps } from './View';
+import View, { EmptyNotice, ExplorerViewProps } from './View';
 import { useExplorerStore } from './store';
 import { useExplorerSearchParams } from './util';
 
@@ -73,7 +73,6 @@ export default function Explorer(props: Props) {
 						{props.items && props.items.length > 0 && <DismissibleNotice />}
 
 						<View
-							layout={explorerStore.layoutMode}
 							items={props.items}
 							scrollRef={scrollRef}
 							onLoadMore={props.onLoadMore}
@@ -82,10 +81,12 @@ export default function Explorer(props: Props) {
 							onSelectedChange={setSelectedItemId}
 							contextMenu={selectedItem && <ContextMenu item={selectedItem} />}
 							emptyNotice={
-								props.emptyNotice || {
-									icon: FolderNotchOpen,
-									message: 'This folder is empty'
-								}
+								props.emptyNotice || (
+									<EmptyNotice
+										icon={FolderNotchOpen}
+										message="This folder is empty"
+									/>
+								)
 							}
 						/>
 					</div>

interface/app/$libraryId/overview/index.tsx

@@ -16,7 +16,6 @@ import { useItems } from './data';
 
 export const Component = () => {
 	const explorerStore = useExplorerStore();
-
 	const page = usePageLayout();
 
 	const [selectedCategory, setSelectedCategory] = useState<Category>('Recents');
@@ -41,7 +40,6 @@ export const Component = () => {
 
 				<div className="flex">
 					<View
-						layout={explorerStore.layoutMode}
 						items={query.isLoading ? null : items || []}
 						// TODO: Fix this type here.
 						scrollRef={page?.ref as any}
@@ -52,7 +50,6 @@ export const Component = () => {
 						top={68}
 						className={explorerStore.layoutMode === 'rows' ? 'min-w-0' : undefined}
 						contextMenu={selectedItem && <ContextMenu item={selectedItem} />}
-						emptyNotice={null}
 					/>
 
 					{explorerStore.showInspector && (

interface/app/$libraryId/tag/$id.tsx

@@ -5,6 +5,7 @@ import { useZodRouteParams } from '~/hooks';
 import Explorer from '../Explorer';
 import { ExplorerContext } from '../Explorer/Context';
 import { DefaultTopBarOptions } from '../Explorer/TopBarOptions';
+import { EmptyNotice } from '../Explorer/View';
 import { TopBarPortal } from '../TopBar/Portal';
 
 export const Component = () => {
@@ -35,10 +36,7 @@ export const Component = () => {
 			<TopBarPortal right={<DefaultTopBarOptions />} />
 			<Explorer
 				items={explorerData.data?.items || null}
-				emptyNotice={{
-					icon: Tag,
-					message: 'No items assigned to this tag'
-				}}
+				emptyNotice={<EmptyNotice icon={Tag} message="No items assigned to this tag" />}
 			/>
 		</ExplorerContext.Provider>
 	);