From ad89adeed1b85dcdf33b65110ef06b88af664787 Mon Sep 17 00:00:00 2001
From: nikec <43032218+niikeec@users.noreply.github.com>
Date: Fri, 3 May 2024 14:18:56 +0200
Subject: [PATCH] [ENG-1772] Fix sidebar issues (#2452)

fix sidebar issues
---
 .../app/$libraryId/Explorer/QuickPreview/index.tsx    |  4 ++--
 .../Layout/Sidebar/sections/Locations/ContextMenu.tsx | 10 +++++++++-
 .../Layout/Sidebar/sections/Tags/ContextMenu.tsx      | 10 +++++++++-
 interface/app/$libraryId/settings/Sidebar.tsx         | 11 ++++++++---
 4 files changed, 28 insertions(+), 7 deletions(-)

diff --git a/interface/app/$libraryId/Explorer/QuickPreview/index.tsx b/interface/app/$libraryId/Explorer/QuickPreview/index.tsx
index e1288210d..67aa7119d 100644
--- a/interface/app/$libraryId/Explorer/QuickPreview/index.tsx
+++ b/interface/app/$libraryId/Explorer/QuickPreview/index.tsx
@@ -254,7 +254,7 @@ export const QuickPreview = () => {
 				<Dialog.Portal forceMount>
 					<Dialog.Overlay
 						className={clsx(
-							'absolute inset-0 z-50',
+							'absolute inset-0 z-[100]',
 							'radix-state-open:animate-in radix-state-open:fade-in-0',
 							isDark ? 'bg-black/80' : 'bg-black/60'
 						)}
@@ -262,7 +262,7 @@ export const QuickPreview = () => {
 					/>
 
 					<Dialog.Content
-						className="fixed inset-[5%] z-50 outline-none radix-state-open:animate-in radix-state-open:fade-in-0 radix-state-open:zoom-in-95"
+						className="fixed inset-[5%] z-[100] outline-none radix-state-open:animate-in radix-state-open:fade-in-0 radix-state-open:zoom-in-95"
 						onOpenAutoFocus={(e) => e.preventDefault()}
 						onEscapeKeyDown={(e) => isRenaming && e.preventDefault()}
 						onContextMenu={(e) => e.preventDefault()}
diff --git a/interface/app/$libraryId/Layout/Sidebar/sections/Locations/ContextMenu.tsx b/interface/app/$libraryId/Layout/Sidebar/sections/Locations/ContextMenu.tsx
index 0c6557cdf..803fa6b8f 100644
--- a/interface/app/$libraryId/Layout/Sidebar/sections/Locations/ContextMenu.tsx
+++ b/interface/app/$libraryId/Layout/Sidebar/sections/Locations/ContextMenu.tsx
@@ -9,6 +9,8 @@ import { openDirectoryPickerDialog } from '~/app/$libraryId/settings/library/loc
 import { useLocale } from '~/hooks';
 import { usePlatform } from '~/util/Platform';
 
+import { useSidebarContext } from '../../SidebarLayout/Context';
+
 export const ContextMenu = ({
 	children,
 	locationId
@@ -17,10 +19,16 @@ export const ContextMenu = ({
 	const platform = usePlatform();
 	const libraryId = useLibraryContext().library.uuid;
 
+	const sidebar = useSidebarContext();
+
 	const { t } = useLocale();
 
 	return (
-		<CM.Root trigger={children}>
+		<CM.Root
+			trigger={children}
+			onOpenChange={(open) => sidebar.onLockedChange(open)}
+			className="z-[100]"
+		>
 			<CM.Item
 				onClick={async () => {
 					try {
diff --git a/interface/app/$libraryId/Layout/Sidebar/sections/Tags/ContextMenu.tsx b/interface/app/$libraryId/Layout/Sidebar/sections/Tags/ContextMenu.tsx
index 439d36bda..e9d9ea4a0 100644
--- a/interface/app/$libraryId/Layout/Sidebar/sections/Tags/ContextMenu.tsx
+++ b/interface/app/$libraryId/Layout/Sidebar/sections/Tags/ContextMenu.tsx
@@ -7,13 +7,21 @@ import CreateDialog from '~/app/$libraryId/settings/library/tags/CreateDialog';
 import DeleteDialog from '~/app/$libraryId/settings/library/tags/DeleteDialog';
 import { useLocale } from '~/hooks';
 
+import { useSidebarContext } from '../../SidebarLayout/Context';
+
 export const ContextMenu = ({ children, tagId }: PropsWithChildren<{ tagId: number }>) => {
 	const navigate = useNavigate();
 
+	const sidebar = useSidebarContext();
+
 	const { t } = useLocale();
 
 	return (
-		<CM.Root trigger={children}>
+		<CM.Root
+			trigger={children}
+			onOpenChange={(open) => sidebar.onLockedChange(open)}
+			className="z-[100]"
+		>
 			<CM.Item
 				icon={Plus}
 				label={t('new_tag')}
diff --git a/interface/app/$libraryId/settings/Sidebar.tsx b/interface/app/$libraryId/settings/Sidebar.tsx
index 69b455d0b..cb86c4c99 100644
--- a/interface/app/$libraryId/settings/Sidebar.tsx
+++ b/interface/app/$libraryId/settings/Sidebar.tsx
@@ -1,6 +1,5 @@
 import {
 	Books,
-	ChartBar,
 	Cloud,
 	Database,
 	FlyingSaucer,
@@ -15,6 +14,7 @@ import {
 	TagSimple,
 	User
 } from '@phosphor-icons/react';
+import clsx from 'clsx';
 import { useFeatureFlag } from '@sd/client';
 import { tw } from '@sd/ui';
 import { useLocale, useOperatingSystem } from '~/hooks';
@@ -22,14 +22,16 @@ import { usePlatform } from '~/util/Platform';
 
 import Icon from '../Layout/Sidebar/SidebarLayout/Icon';
 import SidebarLink from '../Layout/Sidebar/SidebarLayout/Link';
+import { useLayoutStore } from '../Layout/store';
 import { NavigationButtons } from '../TopBar/NavigationButtons';
 
 const Heading = tw.div`mb-1 ml-1 text-xs font-semibold text-gray-400`;
 const Section = tw.div`space-y-0.5`;
 
 export default () => {
-	const { platform } = usePlatform();
 	const os = useOperatingSystem();
+	const { platform } = usePlatform();
+	const { sidebar } = useLayoutStore();
 
 	// const isPairingEnabled = useFeatureFlag('p2pPairing');
 	const isBackupsEnabled = useFeatureFlag('backups');
@@ -41,7 +43,10 @@ export default () => {
 			{platform === 'tauri' ? (
 				<div
 					data-tauri-drag-region={os === 'macOS'}
-					className="mb-3 h-3 w-full p-3 pl-[14px] pt-[11px]"
+					className={clsx(
+						'mb-3 flex h-3 w-full p-3 pl-[14px] pt-[11px]',
+						sidebar.collapsed && os === 'macOS' && 'justify-end'
+					)}
 				>
 					<NavigationButtons />
 				</div>