[ENG-631] TopBar improvements & misc fixes (#837)

* fix things

* added back/forward buttons to settings

* split top bar context into left and right

* hook up path

* fix background jobs hidden from job manager

* core

* fix type + quick preview transition

* fix selected item color contrast

* fix close button on quick preview

* clean up job ui for light theme

* Improve media view overscan

---------

Co-authored-by: Brendan Allan <brendonovich@outlook.com>

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

@@ -37,7 +37,7 @@ const GridViewItem = memo(({ data, selected, index, ...props }: GridViewItemProp
 				className={clsx(
 					'mb-1 flex items-center justify-center justify-items-center rounded-lg border-2 border-transparent text-center active:translate-y-[1px]',
 					{
-						'bg-app-selected/20': selected
+						'bg-app-selectedItem': selected
 					}
 				)}
 			>

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

@@ -32,8 +32,8 @@ const MediaViewItem = memo(({ data, index }: MediaViewItemProps) => {
 		>
 			<div
 				className={clsx(
-					'group relative flex aspect-square items-center justify-center hover:bg-app-selected/20',
-					selected && 'bg-app-selected/20'
+					'hover:bg-app-selectedItem group relative flex aspect-square items-center justify-center',
+					selected && 'bg-app-selectedItem'
 				)}
 			>
 				<FileThumb
@@ -82,7 +82,7 @@ export default () => {
 		measureElement: () => itemSize,
 		paddingStart: gridPadding,
 		paddingEnd: gridPadding,
-		overscan: !dismissibleNoticeStore.mediaView ? 2 : 1
+		overscan: !dismissibleNoticeStore.mediaView ? 8 : 4
 	});
 
 	const columnVirtualizer = useVirtualizer({

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

@@ -1,11 +1,12 @@
 import * as Dialog from '@radix-ui/react-dialog';
 import { animated, useTransition } from '@react-spring/web';
-import { XCircle } from 'phosphor-react';
+import { X, XCircle } from 'phosphor-react';
 import { useEffect, useRef, useState } from 'react';
 import { subscribeKey } from 'valtio/utils';
 import { ExplorerItem } from '@sd/client';
 import { getExplorerStore } from '~/hooks';
 import FileThumb from './File/Thumb';
+import { Button } from '@sd/ui';
 
 const AnimatedDialogOverlay = animated(Dialog.Overlay);
 const AnimatedDialogContent = animated(Dialog.Content);
@@ -42,12 +43,12 @@ export function QuickPreview({ transformOrigin }: QuickPreviewProps) {
 	const transitions = useTransition(isOpen, {
 		from: {
 			opacity: 0,
-			transform: `translateY(20px)`,
-			transformOrigin: transformOrigin || 'bottom'
+			transform: `translateY(20px) scale(0.9)`,
+			transformOrigin: transformOrigin || 'center top'
 		},
-		enter: { opacity: 1, transform: `translateY(0px)` },
-		leave: { opacity: 0, transform: `translateY(20px)` },
-		config: { mass: 0.4, tension: 200, friction: 10, bounce: 0 }
+		enter: { opacity: 1, transform: `translateY(0px) scale(1)` },
+		leave: { opacity: 0, transform: `translateY(40px) scale(0.9)` },
+		config: { mass: 0.2, tension: 300, friction: 20, bounce: 0 }
 	});
 
 	return (
@@ -80,10 +81,13 @@ export function QuickPreview({ transformOrigin }: QuickPreviewProps) {
 									<div className="!pointer-events-auto flex h-5/6 max-h-screen w-11/12 flex-col rounded-md border border-app-line bg-app-box text-ink shadow-app-shade">
 										<nav className="flex w-full flex-row">
 											<Dialog.Close
-												className="ml-2 text-ink-dull"
+												className="m-2"
 												aria-label="Close"
 											>
-												<XCircle size={16} />
+												<Button size="icon" variant="outline" className='flex flex-row'>
+													<X weight='bold' className=' h-3 w-3 text-ink-faint' />
+													<span className='ml-1 text-tiny font-medium text-ink-faint'>ESC</span>
+												</Button>
 											</Dialog.Close>
 											<Dialog.Title className="mx-auto my-1 font-bold">
 												Preview -{' '}

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

@@ -84,6 +84,7 @@ interface Props {
 	hasNextPage?: boolean;
 	isFetchingNextPage?: boolean;
 	viewClassName?: string;
+	scrollRef?: React.RefObject<HTMLDivElement>;
 }
 
 export default memo((props: Props) => {
@@ -97,7 +98,7 @@ export default memo((props: Props) => {
 
 	return (
 		<div
-			ref={scrollRef}
+			ref={props.scrollRef || scrollRef}
 			className={clsx(
 				'custom-scroll explorer-scroll h-screen',
 				layoutMode === 'grid' && 'overflow-x-hidden',
@@ -110,7 +111,7 @@ export default memo((props: Props) => {
 			<ViewContext.Provider
 				value={{
 					data: props.data,
-					scrollRef: scrollRef,
+					scrollRef: props.scrollRef || scrollRef,
 					onLoadMore: props.onLoadMore,
 					hasNextPage: props.hasNextPage,
 					isFetchingNextPage: props.isFetchingNextPage

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

@@ -20,6 +20,7 @@ interface Props {
 	children?: ReactNode;
 	inspectorClassName?: string;
 	explorerClassName?: string;
+	scrollRef?: React.RefObject<HTMLDivElement>;
 }
 
 export default function Explorer(props: Props) {
@@ -63,6 +64,7 @@ export default function Explorer(props: Props) {
 					<ExplorerContextMenu>
 						{props.items && (
 							<View
+								scrollRef={props.scrollRef}
 								data={props.items}
 								onLoadMore={props.onLoadMore}
 								hasNextPage={props.hasNextPage}