Refactored some core UI

src-web/components/Overlay.tsx

@@ -10,6 +10,7 @@ interface Props {
   open: boolean;
   onClose?: () => void;
   zIndex?: keyof typeof zIndexes;
+  variant?: 'default' | 'transparent';
 }
 
 const zIndexes: Record<number, string> = {
@@ -20,7 +21,14 @@ const zIndexes: Record<number, string> = {
   50: 'z-50',
 };
 
-export function Overlay({ zIndex = 30, open, onClose, portalName, children }: Props) {
+export function Overlay({
+  variant = 'default',
+  zIndex = 30,
+  open,
+  onClose,
+  portalName,
+  children,
+}: Props) {
   return (
     <Portal name={portalName}>
       {open && (
@@ -33,14 +41,19 @@ export function Overlay({ zIndex = 30, open, onClose, portalName, children }: Pr
             <div
               aria-hidden
               onClick={onClose}
-              className="absolute inset-0 bg-gray-600/30 dark:bg-black/30 backdrop-blur-sm"
+              className={classNames(
+                'absolute inset-0',
+                variant === 'default' && 'bg-gray-600/30 dark:bg-black/30 backdrop-blur-sm',
+              )}
             />
             {/* Add region to still be able to drag the window */}
-            <div data-tauri-drag-region className="absolute top-0 left-0 right-0 h-md" />
-            {children}
+            {variant !== 'transparent' && (
+              <div data-tauri-drag-region className="absolute top-0 left-0 right-0 h-md" />
+            )}
+            <div className="bg-red-100">{children}</div>
           </motion.div>
         </FocusTrap>
-      )} 
+      )}
     </Portal>
   );
 }