From f0bc30865351c3d7977978c45114e457bd8942ba Mon Sep 17 00:00:00 2001
From: ameer2468 <33054370+ameer2468@users.noreply.github.com>
Date: Mon, 24 Jun 2024 19:04:47 +0300
Subject: [PATCH] [ENG-1777] Fix inspector scroll (#2564)

* fix inspector scroll

* fix inspector toggle
---
 .../$libraryId/Explorer/ExplorerPathBar.tsx    | 18 +++++++++---------
 .../app/$libraryId/Explorer/ExplorerTagBar.tsx |  6 +++---
 .../$libraryId/Explorer/Inspector/index.tsx    |  2 +-
 .../app/$libraryId/Explorer/TopBarOptions.tsx  |  6 +++---
 interface/app/$libraryId/Explorer/index.tsx    | 16 ++++++++--------
 5 files changed, 24 insertions(+), 24 deletions(-)

diff --git a/interface/app/$libraryId/Explorer/ExplorerPathBar.tsx b/interface/app/$libraryId/Explorer/ExplorerPathBar.tsx
index 182279454..4e0e824ba 100644
--- a/interface/app/$libraryId/Explorer/ExplorerPathBar.tsx
+++ b/interface/app/$libraryId/Explorer/ExplorerPathBar.tsx
@@ -1,8 +1,4 @@
 import { AppWindow, ArrowSquareOut, CaretRight, ClipboardText } from '@phosphor-icons/react';
-import clsx from 'clsx';
-import { memo, useMemo, useState } from 'react';
-import { useNavigate } from 'react-router';
-import { createSearchParams } from 'react-router-dom';
 import {
 	getExplorerItemData,
 	getIndexedItemFilePath,
@@ -10,9 +6,13 @@ import {
 	useLibraryQuery
 } from '@sd/client';
 import { ContextMenu } from '@sd/ui';
+import clsx from 'clsx';
+import { memo, useMemo, useState } from 'react';
+import { useNavigate } from 'react-router';
+import { createSearchParams } from 'react-router-dom';
+import { useTabsContext } from '~/TabsContext';
 import { Icon } from '~/components';
 import { useIsDark, useLocale, useOperatingSystem } from '~/hooks';
-import { useTabsContext } from '~/TabsContext';
 import { usePlatform } from '~/util/Platform';
 
 import { useExplorerContext } from './Context';
@@ -119,10 +119,10 @@ export const ExplorerPathBar = memo(() => {
 
 	return (
 		<div
-			className={clsx(
-				'group flex items-center border-t border-t-app-line bg-app/90 px-3.5 text-[11px] text-ink-dull backdrop-blur-lg',
-				`h-[${PATH_BAR_HEIGHT}px]`
-			)}
+			className={'group flex items-center border-t border-t-app-line bg-app/90 px-3.5 text-[11px] text-ink-dull backdrop-blur-lg'}
+			style={{
+				height: PATH_BAR_HEIGHT
+			}}
 		>
 			{paths.map((path, idx) => (
 				<Path
diff --git a/interface/app/$libraryId/Explorer/ExplorerTagBar.tsx b/interface/app/$libraryId/Explorer/ExplorerTagBar.tsx
index cb571d953..101c65cc9 100644
--- a/interface/app/$libraryId/Explorer/ExplorerTagBar.tsx
+++ b/interface/app/$libraryId/Explorer/ExplorerTagBar.tsx
@@ -1,6 +1,4 @@
 import { Circle } from '@phosphor-icons/react';
-import clsx from 'clsx';
-import { ReactNode, useCallback, useEffect, useRef, useState } from 'react';
 import {
 	ExplorerItem,
 	Tag,
@@ -11,13 +9,15 @@ import {
 	useSelector
 } from '@sd/client';
 import { Shortcut, toast } from '@sd/ui';
+import clsx from 'clsx';
+import { useEffect, useRef, useState } from 'react';
 import { useIsDark, useKeybind, useLocale, useOperatingSystem } from '~/hooks';
 import { keybindForOs } from '~/util/keybinds';
 
 import { useExplorerContext } from './Context';
 import { explorerStore } from './store';
 
-export const TAG_BAR_HEIGHT = 64;
+export const TAG_BAR_HEIGHT = 54;
 const NUMBER_KEYCODES: string[][] = [
 	['Key1'],
 	['Key2'],
diff --git a/interface/app/$libraryId/Explorer/Inspector/index.tsx b/interface/app/$libraryId/Explorer/Inspector/index.tsx
index ea94f8c8f..9734df0b3 100644
--- a/interface/app/$libraryId/Explorer/Inspector/index.tsx
+++ b/interface/app/$libraryId/Explorer/Inspector/index.tsx
@@ -103,7 +103,7 @@ export const Inspector = forwardRef<HTMLDivElement, Props>(
 		return (
 			<div ref={ref} style={{ width: INSPECTOR_WIDTH, ...style }} {...props}>
 				<Sticky
-					scrollElement={explorer.scrollRef.current || undefined}
+					scrollElement=".explorer-inspector-scroll"
 					stickyClassName="!top-[40px]"
 					topOffset={-40}
 				>
diff --git a/interface/app/$libraryId/Explorer/TopBarOptions.tsx b/interface/app/$libraryId/Explorer/TopBarOptions.tsx
index b79dd7ae4..1fcd4147d 100644
--- a/interface/app/$libraryId/Explorer/TopBarOptions.tsx
+++ b/interface/app/$libraryId/Explorer/TopBarOptions.tsx
@@ -8,15 +8,15 @@ import {
 	SquaresFour,
 	Tag
 } from '@phosphor-icons/react';
+import { ExplorerLayout, useSelector } from '@sd/client';
 import clsx from 'clsx';
 import { useMemo } from 'react';
 import { useDocumentEventListener } from 'rooks';
-import { ExplorerLayout, useSelector } from '@sd/client';
 import { useKeyMatcher, useLocale } from '~/hooks';
 
 import { KeyManager } from '../KeyManager';
 import { Spacedrop, SpacedropButton } from '../Spacedrop';
-import TopBarOptions, { ToolOption, TOP_BAR_ICON_CLASSLIST } from '../TopBar/TopBarOptions';
+import TopBarOptions, { TOP_BAR_ICON_CLASSLIST, ToolOption } from '../TopBar/TopBarOptions';
 import { useExplorerContext } from './Context';
 import OptionsPanel from './OptionsPanel';
 import { explorerStore } from './store';
@@ -83,7 +83,7 @@ export const useExplorerTopBarOptions = () => {
 			toolTipLabel: t('show_inspector'),
 			keybinds: [controlIcon, 'I'],
 			onClick: () => {
-				explorerStore.showInspector = !showInspector;
+				explorerStore.showInspector = !explorerStore.showInspector
 			},
 			icon: (
 				<SidebarSimple
diff --git a/interface/app/$libraryId/Explorer/index.tsx b/interface/app/$libraryId/Explorer/index.tsx
index a4a98b1e1..1417711e3 100644
--- a/interface/app/$libraryId/Explorer/index.tsx
+++ b/interface/app/$libraryId/Explorer/index.tsx
@@ -1,5 +1,4 @@
 import { FolderNotchOpen } from '@phosphor-icons/react';
-import { CSSProperties, type PropsWithChildren, type ReactNode } from 'react';
 import {
 	explorerLayout,
 	useExplorerLayoutStore,
@@ -7,6 +6,7 @@ import {
 	useRspcLibraryContext,
 	useSelector
 } from '@sd/client';
+import { CSSProperties, type PropsWithChildren, type ReactNode } from 'react';
 import { useShortcut } from '~/hooks';
 
 import { useTopBarContext } from '../TopBar/Context';
@@ -26,7 +26,7 @@ import 'react-slidedown/lib/slidedown.css';
 
 import clsx from 'clsx';
 
-import { ExplorerTagBar } from './ExplorerTagBar';
+import { ExplorerTagBar, TAG_BAR_HEIGHT } from './ExplorerTagBar';
 import { useExplorerDnd } from './useExplorerDnd';
 
 interface Props {
@@ -92,11 +92,11 @@ export default function Explorer(props: PropsWithChildren<Props>) {
 			<ExplorerContextMenu>
 				<div
 					ref={explorer.scrollRef}
-					className="custom-scroll explorer-scroll flex flex-1 flex-col overflow-x-hidden"
+					className="explorer-scroll explorer-inspector-scroll flex flex-1 flex-col overflow-x-hidden"
 					style={
 						{
 							'--scrollbar-margin-top': `${topBar.topBarHeight}px`,
-							'--scrollbar-margin-bottom': `${showPathBar ? PATH_BAR_HEIGHT : 0}px`,
+							'--scrollbar-margin-bottom': `${showPathBar ? PATH_BAR_HEIGHT + (showTagBar ? TAG_BAR_HEIGHT : 0) : 0}px`,
 							'paddingTop': topBar.topBarHeight,
 							'paddingRight': showInspector ? INSPECTOR_WIDTH : 0
 						} as CSSProperties
@@ -117,7 +117,7 @@ export default function Explorer(props: PropsWithChildren<Props>) {
 						listViewOptions={{ hideHeaderBorder: true }}
 						scrollPadding={{
 							top: topBar.topBarHeight,
-							bottom: showPathBar ? PATH_BAR_HEIGHT : undefined
+							bottom: showPathBar ? PATH_BAR_HEIGHT + (showTagBar ? TAG_BAR_HEIGHT : 0) : undefined
 						}}
 					/>
 				</div>
@@ -132,11 +132,11 @@ export default function Explorer(props: PropsWithChildren<Props>) {
 			{showInspector && (
 				<Inspector
 					className={clsx(
-						'no-scrollbar absolute right-1.5 top-0 pb-3 pl-3 pr-1.5',
-						showPathBar && `b-[${PATH_BAR_HEIGHT}px]`
+						'no-scrollbar absolute right-1.5 top-0 pb-3 pl-3 pr-1.5'
 					)}
 					style={{
-						paddingTop: topBar.topBarHeight + 12
+						paddingTop: topBar.topBarHeight + 12,
+						bottom: showPathBar ? PATH_BAR_HEIGHT + (showTagBar ? TAG_BAR_HEIGHT : 0) : 0
 					}}
 				/>
 			)}