feat: add functional title bar

tylerslaton · tylerslaton · commit 320d084d8107 · 2024-08-07T18:58:33.000-04:00
Signed-off-by: tylerslaton &lt;mtslaton1@gmail.com&gt;
diff --git a/app/edit/layout.tsx b/app/edit/layout.tsx
@@ -1,13 +1,7 @@
-export default function RunLayout({
-                                      children,
-                                  }: {
-    children: React.ReactNode;
-}) {
+export default function EditLayout({children}: {children: React.ReactNode}) {
     return (
-        <section className="absolute left-0 top-16">
-            <div className="border-t-1 border-gray-300 dark:border-zinc-900"
-                 style={{width: `100vw`, height: `calc(100vh - 64px)`}}
-            >
+        <section className="absolute left-0 top-[90px]">
+            <div className="border-t-1 border-gray-300 dark:border-zinc-900" style={{width: `100vw`, height: `calc(100vh - 90px)`}}>
                 {children}
             </div>
         </section>
diff --git a/app/explore/layout.tsx b/app/explore/layout.tsx
@@ -1,11 +1,9 @@
-export default function RunLayout({
-	children,
-}: {
-	children: React.ReactNode;
-}) {
+export default function ExploreLayout({children}: {children: React.ReactNode}) {
     return (
-        <section>
-            {children}
+        <section className="absolute left-0 top-[90px]">
+            <div className="border-t-1 dark:border-zinc-800" style={{width: `100vw`, height: `calc(100vh - 90px)`}}>
+                {children}
+            </div>
         </section>
     );
 }
diff --git a/app/explore/page.tsx b/app/explore/page.tsx
@@ -76,7 +76,7 @@ export default function Explore() {
     useEffect(() => { refresh() }, [authenticated]);
 
     return (
-        <div className="w-full h-full">
+        <div className="w-3/4 px-10 h-full overflow-y-scroll mx-auto pt-10">
             <div>
                 <div className="flex space-x-4 mb-4">
                     <Select radius="lg" label="Owners" color="primary" isDisabled={!owners.length} size="sm" aria-label="owners" selectionMode="multiple" className="w-1/6" variant="bordered" classNames={{label: 'text-gray-500 dark:text-gray-400', value:'text-black dark:text-white'}}
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -5,6 +5,7 @@ import {fontSans} from "@/config/fonts";
 import {Providers} from "./providers";
 import {Navbar} from "@/components/navbar";
 import clsx from "clsx";
+import TitleBar from "@/components/titlebar";
 
 export const metadata: Metadata = {
     title: {
@@ -24,11 +25,7 @@ export const viewport: Viewport = {
     ],
 }
 
-export default function RootLayout({
-                                       children,
-                                   }: {
-    children: React.ReactNode;
-}) {
+export default function RootLayout({children}: {children: React.ReactNode}) {
     return (
         <html lang="en" suppressHydrationWarning>
         <head/>
@@ -40,6 +37,7 @@ export default function RootLayout({
         >
         <Providers themeProps={{attribute: "class", defaultTheme: "dark"}}>
             <div className="relative flex flex-col h-screen overflow-auto order-transparent">
+                <TitleBar/>
                 <Navbar/>
                 <main className="container mx-auto max-w-7xl pt-16 px-6 flex-grow">
                     {children}
diff --git a/app/run/layout.tsx b/app/run/layout.tsx
@@ -1,11 +1,7 @@
-export default function RunLayout({
-                                      children,
-                                  }: {
-    children: React.ReactNode;
-}) {
+export default function RunLayout({children}: {children: React.ReactNode}) {
     return (
-        <section className="absolute left-0 top-16">
-            <div className="border-t-1 dark:border-zinc-800" style={{width: `100vw`, height: `calc(100vh - 66px)`}}>
+        <section className="absolute left-0 top-[90px]">
+            <div className="border-t-1 dark:border-zinc-800" style={{width: `100vw`, height: `calc(100vh - 90px)`}}>
                 {children}
             </div>
         </section>
diff --git a/components/navbar.tsx b/components/navbar.tsx
@@ -24,7 +24,7 @@ import {Logo} from "@/components/icons";
 
 export const Navbar = () => {
     return (
-        <NextUINavbar maxWidth="xl" position="sticky">
+        <NextUINavbar maxWidth="xl" height="10px" position="sticky">
             <NavbarContent className="basis-1/5 sm:basis-full" justify="start">
                 <NavbarBrand as="li" className="gap-3 max-w-fit">
                     <NextLink className="flex justify-start items-center gap-1" href="/">
diff --git a/components/titlebar.tsx b/components/titlebar.tsx
@@ -0,0 +1,12 @@
+"use client";
+import React, { useEffect } from 'react';
+
+const TitleBar: React.FC = () => {
+    useEffect(() => {
+        document.getElementById("drag-bar")?.style.setProperty("-webkit-app-region", "drag");
+    }, []);
+
+    return <div id="drag-bar" className="w-full h-10"/>
+};
+
+export default TitleBar;
diff --git a/electron/main.mjs b/electron/main.mjs
@@ -62,6 +62,8 @@ function createWindow(url) {
     }
   });
 
+  win.setWindowButtonVisibility(true)
+
   win.loadURL(url);
   win.webContents.on("did-fail-load", () => win.webContents.reloadIgnoringCache());
 }

Original file line number	Diff line number	Diff line change
`@@ -62,6 +62,8 @@ function createWindow(url) {`
`62`	`62`	`}`
`63`	`63`	`});`
`64`	`64`
	`65`	`+ win.setWindowButtonVisibility(true)`
	`66`	`+`
`65`	`67`	`win.loadURL(url);`
`66`	`68`	`win.webContents.on("did-fail-load", () => win.webContents.reloadIgnoringCache());`
`67`	`69`	`}`