Add drag container for web library headers (#206)

src/renderer/components/page-header/index.tsx

@@ -79,6 +79,24 @@ const TitleWrapper = styled(motion.div)`
     height: 100%;
 `;
 
+const DragContainer = styled.div`
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: -1;
+    width: calc(100% - 130px);
+    height: 65px;
+    -webkit-app-region: drag;
+
+    button {
+        -webkit-app-region: no-drag;
+    }
+
+    input {
+        -webkit-app-region: no-drag;
+    }
+`;
+
 const variants: Variants = {
     animate: {
         opacity: 1,
@@ -106,34 +124,39 @@ export const PageHeader = ({
     const theme = useTheme();
 
     return (
-        <Container
+        <>
-            ref={ref}
+            {windowBarStyle === Platform.WEB && <DragContainer />}
-            height={height}
+            {!isHidden && (
-            position={position}
+                <Container
-            {...props}
+                    ref={ref}
-        >
+                    height={height}
-            <Header
+                    position={position}
-                $isDraggable={windowBarStyle === Platform.WEB}
+                    {...props}
-                $isHidden={isHidden}
+                >
-                $padRight={padRight}
+                    <Header
-            >
+                        $isDraggable={windowBarStyle === Platform.WEB}
-                <AnimatePresence initial={animated ?? false}>
+                        $isHidden={isHidden}
-                    <TitleWrapper
+                        $padRight={padRight}
-                        animate="animate"
-                        exit="exit"
-                        initial="initial"
-                        variants={variants}
                     >
-                        {children}
+                        <AnimatePresence initial={animated ?? false}>
-                    </TitleWrapper>
+                            <TitleWrapper
-                </AnimatePresence>
+                                animate="animate"
-            </Header>
+                                exit="exit"
-            {backgroundColor && (
+                                initial="initial"
-                <>
+                                variants={variants}
-                    <BackgroundImage background={backgroundColor || 'var(--titlebar-bg)'} />
+                            >
-                    <BackgroundImageOverlay theme={theme as 'light' | 'dark'} />
+                                {children}
-                </>
+                            </TitleWrapper>
+                        </AnimatePresence>
+                    </Header>
+                    {backgroundColor && (
+                        <>
+                            <BackgroundImage background={backgroundColor || 'var(--titlebar-bg)'} />
+                            <BackgroundImageOverlay theme={theme as 'light' | 'dark'} />
+                        </>
+                    )}
+                </Container>
             )}
-        </Container>
+        </>
     );
 };

src/renderer/components/scroll-area/index.tsx

@@ -125,14 +125,12 @@ export const NativeScrollArea = forwardRef(
 
         return (
             <>
-                {shouldShowHeader && (
+                <PageHeader
-                    <PageHeader
+                    animated
-                        animated
+                    isHidden={!shouldShowHeader}
-                        isHidden={false}
+                    position="absolute"
-                        position="absolute"
+                    {...pageHeaderProps}
-                        {...pageHeaderProps}
+                />
-                    />
-                )}
                 <StyledNativeScrollArea
                     ref={mergedRef}
                     scrollBarOffset={scrollBarOffset}