[ENG-1659] Rename through inspector (#2155)

renamable path trough inspector

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

@@ -22,10 +22,14 @@ export interface RenameTextBoxProps extends React.HTMLAttributes<HTMLDivElement>
 	lines?: number;
 	// Temporary solution for TruncatedText in list view
 	idleClassName?: string;
+	toggleBy?: 'shortcut' | 'click' | 'all';
 }
 
 export const RenameTextBox = forwardRef<HTMLDivElement, RenameTextBoxProps>(
-	({ name, onRename, disabled, className, idleClassName, lines, ...props }, _ref) => {
+	(
+		{ name, onRename, disabled, className, idleClassName, lines, toggleBy = 'all', ...props },
+		_ref
+	) => {
 		const os = useOperatingSystem();
 
 		const [isRenaming, drag] = useSelector(explorerStore, (s) => [s.isRenaming, s.drag]);
@@ -114,7 +118,7 @@ export const RenameTextBox = forwardRef<HTMLDivElement, RenameTextBoxProps>(
 		};
 
 		useShortcut('renameObject', (e) => {
-			if (dialogManager.isAnyDialogOpen()) return;
+			if (dialogManager.isAnyDialogOpen() || toggleBy === 'click') return;
 			e.preventDefault();
 			if (allowRename) blur();
 			else if (!disabled) setAllowRename(true);
@@ -136,11 +140,12 @@ export const RenameTextBox = forwardRef<HTMLDivElement, RenameTextBoxProps>(
 		}, [allowRename, highlightText]);
 
 		useEffect(() => {
+			if (toggleBy === 'click') return;
 			if (!disabled) {
 				if (isRenaming && !allowRename) setAllowRename(true);
 				else explorerStore.isRenaming = allowRename;
 			} else resetState();
-		}, [isRenaming, disabled, allowRename]);
+		}, [isRenaming, disabled, allowRename, toggleBy]);
 
 		useEffect(() => {
 			const onMouseDown = (event: MouseEvent) => {

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

@@ -56,6 +56,7 @@ import { FileThumb } from '../FilePath/Thumb';
 import { useQuickPreviewStore } from '../QuickPreview/store';
 import { explorerStore } from '../store';
 import { uniqueId, useExplorerItemData } from '../util';
+import { RenamableItemText } from '../View/RenamableItemText';
 import FavoriteButton from './FavoriteButton';
 import MediaData from './MediaData';
 import Note from './Note';
@@ -209,10 +210,10 @@ export const SingleItemMetadata = ({ item }: { item: ExplorerItem }) => {
 					...new Set(
 						(item.item?.file_paths || []).map((fp) => fp.location_id).filter(Boolean)
 					)
-			  ]
+				]
 			: item.type === 'Path'
-			? [item.item.location_id]
-			: [];
+				? [item.item.location_id]
+				: [];
 	}, [item]);
 
 	const fileLocations =
@@ -270,10 +271,17 @@ export const SingleItemMetadata = ({ item }: { item: ExplorerItem }) => {
 
 	return (
 		<>
-			<h3 className="truncate px-3 pb-1 pt-2 text-base font-bold text-ink">
-				{name}
-				{extension && `.${extension}`}
-			</h3>
+			<div className="px-2 pb-1 pt-2">
+				<RenamableItemText
+					item={item}
+					toggleBy="click"
+					lines={2}
+					selected
+					allowHighlight={false}
+					className="!text-base !font-bold !text-ink"
+					style={{ maxHeight: '50px' }}
+				/>
+			</div>
 
 			{objectData && (
 				<div className="mx-3 mb-0.5 mt-1 flex flex-row space-x-0.5 text-ink">

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

@@ -17,7 +17,8 @@ import { RenameTextBox, RenameTextBoxProps } from '../FilePath/RenameTextBox';
 import { useQuickPreviewStore } from '../QuickPreview/store';
 import { explorerStore } from '../store';
 
-interface Props extends Pick<RenameTextBoxProps, 'idleClassName' | 'lines'> {
+interface Props
+	extends Pick<RenameTextBoxProps, 'idleClassName' | 'lines' | 'toggleBy' | 'className'> {
 	item: ExplorerItem;
 	allowHighlight?: boolean;
 	style?: React.CSSProperties;
@@ -155,12 +156,14 @@ export const RenamableItemText = ({ allowHighlight = true, ...props }: Props) =>
 			onRename={handleRename}
 			className={clsx(
 				'font-medium',
+				props.className,
 				(props.selected || props.highlight) &&
 					allowHighlight && ['bg-accent', !isDark && 'text-white']
 			)}
 			style={props.style}
 			lines={props.lines}
 			idleClassName={props.idleClassName}
+			toggleBy={props.toggleBy}
 		/>
 	);
 };