From 96978785b9c5aa059ae7d6b8cbdd7517b2536c47 Mon Sep 17 00:00:00 2001
From: nikec <nikec.job@gmail.com>
Date: Sun, 22 Jan 2023 17:54:11 +0100
Subject: [PATCH] overlay panel ctx, closable job manager

---
 packages/interface/src/components/jobs/JobManager.tsx | 11 +++++------
 packages/ui/src/OverlayPanel.tsx                      | 11 ++++++++---
 2 files changed, 13 insertions(+), 9 deletions(-)

diff --git a/packages/interface/src/components/jobs/JobManager.tsx b/packages/interface/src/components/jobs/JobManager.tsx
index e84105f69..e002f339b 100644
--- a/packages/interface/src/components/jobs/JobManager.tsx
+++ b/packages/interface/src/components/jobs/JobManager.tsx
@@ -3,11 +3,9 @@ import dayjs from 'dayjs';
 import {
 	ArrowsClockwise,
 	Camera,
-	DotsThree,
 	Eye,
 	Fingerprint,
 	Folder,
-	IconProps,
 	LockSimple,
 	LockSimpleOpen,
 	Pause,
@@ -16,9 +14,8 @@ import {
 	TrashSimple,
 	X
 } from 'phosphor-react';
-import { useLibraryMutation, useLibraryQuery } from '@sd/client';
-import { JobReport } from '@sd/client';
-import { Button, CategoryHeading, tw } from '@sd/ui';
+import { JobReport, useLibraryMutation, useLibraryQuery } from '@sd/client';
+import { Button, CategoryHeading, tw, useOverlayPanelContext } from '@sd/ui';
 import ProgressBar from '../primitive/ProgressBar';
 import { Tooltip } from '../tooltip/Tooltip';
 
@@ -92,6 +89,8 @@ export function JobsManager() {
 	const jobs = useLibraryQuery(['jobs.getHistory']);
 	const clearAllJobs = useLibraryMutation(['jobs.clearAll']);
 
+	const overlayPanelContext = useOverlayPanelContext();
+
 	return (
 		<div className="h-full pb-10 overflow-hidden">
 			<HeaderContainer>
@@ -103,7 +102,7 @@ export function JobsManager() {
 						<Trash className="w-5 h-5" />
 					</Tooltip>
 				</Button>
-				<Button size="icon">
+				<Button size="icon" onClick={overlayPanelContext?.close}>
 					<Tooltip label="Close">
 						<X className="w-5 h-5" />
 					</Tooltip>
diff --git a/packages/ui/src/OverlayPanel.tsx b/packages/ui/src/OverlayPanel.tsx
index dfc7c703e..e9a6db439 100644
--- a/packages/ui/src/OverlayPanel.tsx
+++ b/packages/ui/src/OverlayPanel.tsx
@@ -1,7 +1,6 @@
 import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
 import clsx from 'clsx';
-import { PropsWithChildren, useState } from 'react';
-import { animated, config, useTransition } from 'react-spring';
+import { PropsWithChildren, createContext, useContext, useState } from 'react';
 
 interface Props extends DropdownMenu.MenuContentProps {
 	trigger: React.ReactNode;
@@ -9,6 +8,10 @@ interface Props extends DropdownMenu.MenuContentProps {
 	disabled?: boolean;
 }
 
+const context = createContext<{ close: () => void } | undefined>(undefined);
+
+export const useOverlayPanelContext = () => useContext(context);
+
 export const OverlayPanel = ({
 	trigger,
 	children,
@@ -51,7 +54,9 @@ export const OverlayPanel = ({
 							)}
 							// style={styles}
 						>
-							{children}
+							<context.Provider value={{ close: () => setOpen(false) }}>
+								{children}
+							</context.Provider>
 						</div>
 					</DropdownMenu.Content>
 				</DropdownMenu.Portal>