From a68b33d9800a2b032c8ef7529b9cc8e29665ea5e Mon Sep 17 00:00:00 2001
From: ameer2468 <33054370+ameer2468@users.noreply.github.com>
Date: Wed, 27 Sep 2023 20:15:57 +0300
Subject: [PATCH] [ENG-1145] Keep more info open if it is (#1392)

* Keep more info open if it is

* toggle off when closing inspector

* Update TopBarOptions.tsx

* tweak code

* Update Accordion.tsx

---------

Co-authored-by: jake <77554505+brxken128@users.noreply.github.com>
---
 .../Explorer/Inspector/MediaData.tsx           |  9 ++++++++-
 .../$libraryId/Explorer/Inspector/index.tsx    |  9 +++++++--
 .../app/$libraryId/Explorer/TopBarOptions.tsx  |  4 +++-
 interface/app/$libraryId/Explorer/store.ts     |  1 +
 interface/components/Accordion.tsx             | 18 +++++++++++++-----
 5 files changed, 32 insertions(+), 9 deletions(-)

diff --git a/interface/app/$libraryId/Explorer/Inspector/MediaData.tsx b/interface/app/$libraryId/Explorer/Inspector/MediaData.tsx
index 2cf7f758c..cdff91774 100644
--- a/interface/app/$libraryId/Explorer/Inspector/MediaData.tsx
+++ b/interface/app/$libraryId/Explorer/Inspector/MediaData.tsx
@@ -8,6 +8,7 @@ import {
 import Accordion from '~/components/Accordion';
 import { Platform, usePlatform } from '~/util/Platform';
 
+import { getExplorerStore, useExplorerStore } from '../store';
 import { MetaData } from './index';
 
 interface Props {
@@ -84,10 +85,16 @@ const orientations = {
 const MediaData = ({ data }: Props) => {
 	const platform = usePlatform();
 	const coordinatesFormat = useUnitFormatStore().coordinatesFormat;
+	const explorerStore = useExplorerStore();
 
 	return data.type === 'Image' ? (
 		<div className="flex flex-col gap-0 py-2">
-			<Accordion variant="apple" title="More info">
+			<Accordion
+				isOpen={explorerStore.showMoreInfo}
+				onToggle={(isOpen) => (getExplorerStore().showMoreInfo = isOpen)}
+				variant="apple"
+				title="More info"
+			>
 				<MetaData label="Date" value={formatMediaTime(data.date_taken)} />
 				<MetaData label="Type" value={data.type} />
 				<MetaData
diff --git a/interface/app/$libraryId/Explorer/Inspector/index.tsx b/interface/app/$libraryId/Explorer/Inspector/index.tsx
index 3f453f7e3..2e65f3169 100644
--- a/interface/app/$libraryId/Explorer/Inspector/index.tsx
+++ b/interface/app/$libraryId/Explorer/Inspector/index.tsx
@@ -24,6 +24,7 @@ import {
 	type HTMLAttributes,
 	type ReactNode
 } from 'react';
+import { useLocation } from 'react-router';
 import {
 	byteSize,
 	getExplorerItemData,
@@ -43,7 +44,7 @@ import { isNonEmpty } from '~/util';
 import { useExplorerContext } from '../Context';
 import { FileThumb } from '../FilePath/Thumb';
 import { useQuickPreviewStore } from '../QuickPreview/store';
-import { useExplorerStore } from '../store';
+import { getExplorerStore, useExplorerStore } from '../store';
 import { uniqueId, useExplorerItemData } from '../util';
 import FavoriteButton from './FavoriteButton';
 import MediaData from './MediaData';
@@ -83,9 +84,14 @@ export const Inspector = forwardRef<HTMLDivElement, Props>(
 		const explorer = useExplorerContext();
 
 		const isDark = useIsDark();
+		const pathname = useLocation().pathname;
 
 		const selectedItems = useMemo(() => [...explorer.selectedItems], [explorer.selectedItems]);
 
+		useEffect(() => {
+			getExplorerStore().showMoreInfo = false;
+		}, [pathname]);
+
 		return (
 			<div ref={ref} style={{ width: INSPECTOR_WIDTH, ...style }} {...props}>
 				{showThumbnail && (
@@ -152,7 +158,6 @@ export const SingleItemMetadata = ({ item }: { item: ExplorerItem }) => {
 	const objectData = getItemObject(item);
 	const readyToFetch = useIsFetchReady(item);
 	const isNonIndexed = item.type === 'NonIndexedPath';
-
 	const tags = useLibraryQuery(['tags.getForObject', objectData?.id ?? -1], {
 		enabled: !!objectData && readyToFetch
 	});
diff --git a/interface/app/$libraryId/Explorer/TopBarOptions.tsx b/interface/app/$libraryId/Explorer/TopBarOptions.tsx
index a26087c3b..4ce25b77e 100644
--- a/interface/app/$libraryId/Explorer/TopBarOptions.tsx
+++ b/interface/app/$libraryId/Explorer/TopBarOptions.tsx
@@ -72,7 +72,9 @@ export const useExplorerTopBarOptions = () => {
 		{
 			toolTipLabel: 'Show Inspector',
 			keybinds: [controlIcon, 'I'],
-			onClick: () => (getExplorerStore().showInspector = !explorerStore.showInspector),
+			onClick: () => {
+				getExplorerStore().showInspector = !explorerStore.showInspector;
+			},
 			icon: (
 				<SidebarSimple
 					weight={explorerStore.showInspector ? 'fill' : 'regular'}
diff --git a/interface/app/$libraryId/Explorer/store.ts b/interface/app/$libraryId/Explorer/store.ts
index 3164179cc..eb8dc4f40 100644
--- a/interface/app/$libraryId/Explorer/store.ts
+++ b/interface/app/$libraryId/Explorer/store.ts
@@ -115,6 +115,7 @@ type CutCopyState =
 const state = {
 	tagAssignMode: false,
 	showInspector: false,
+	showMoreInfo: false,
 	mediaPlayerVolume: 0.7,
 	newThumbnails: proxySet() as Set<string>,
 	cutCopyState: { type: 'Idle' } as CutCopyState,
diff --git a/interface/components/Accordion.tsx b/interface/components/Accordion.tsx
index 2a5d458e4..d527af413 100644
--- a/interface/components/Accordion.tsx
+++ b/interface/components/Accordion.tsx
@@ -7,6 +7,8 @@ interface Props {
 	title: string;
 	variant?: keyof typeof styles;
 	className?: string;
+	isOpen?: boolean;
+	onToggle?: (isOpen: boolean) => void;
 }
 
 const styles = {
@@ -22,19 +24,25 @@ const styles = {
 	}
 };
 
-const Accordion = (props: PropsWithChildren<Props>) => {
-	const [toggle, setToggle] = useState(false);
+const Accordion = ({ isOpen = false, ...props }: PropsWithChildren<Props>) => {
+	const [toggle, setToggle] = useState(isOpen);
 	const variant = styles[props.variant ?? 'default'];
 	return (
 		<div className={clsx(variant.box, props.className)}>
-			<div onClick={() => setToggle((t) => !t)} className={variant.title}>
+			<div
+				onClick={() => {
+					setToggle((t) => !t);
+					props.onToggle?.(!toggle);
+				}}
+				className={variant.title}
+			>
 				<p className="text-xs">{props.title}</p>
 				<CaretDown
 					size={props.caretSize || 12}
-					className={clsx(toggle && 'rotate-180', 'transition-all duration-200')}
+					className={clsx(isOpen && 'rotate-180', 'transition-all duration-200')}
 				/>
 			</div>
-			{toggle && <div className={variant.container}>{props.children}</div>}
+			{isOpen && <div className={variant.container}>{props.children}</div>}
 		</div>
 	);
 };