From be84a611985f59e55e1f3285b9785e90cfaebecc Mon Sep 17 00:00:00 2001
From: David Mo <44306450+unknown@users.noreply.github.com>
Date: Wed, 22 Nov 2023 23:42:50 -0500
Subject: [PATCH] Add vibrancy style

---
 electron/main.ts               |  3 +++
 src/App.tsx                    |  9 +++++++--
 src/components/thread-item.tsx |  2 +-
 src/styles/globals.css         | 11 ++++++++++-
 4 files changed, 21 insertions(+), 4 deletions(-)

diff --git a/electron/main.ts b/electron/main.ts
index 622078d..656f1ac 100644
--- a/electron/main.ts
+++ b/electron/main.ts
@@ -12,6 +12,9 @@ function createWindow() {
     webPreferences: {
       preload: path.join(__dirname, "preload.js"),
     },
+    vibrancy: "under-window",
+    titleBarStyle: "hidden",
+    frame: false,
   });
 
   if (process.env.VITE_DEV_SERVER_URL) {
diff --git a/src/App.tsx b/src/App.tsx
index 7476b29..288c3ba 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -82,7 +82,12 @@ function App() {
   return (
     <div className="flex h-screen flex-col">
       <PanelGroup autoSaveId="thread-list" direction="horizontal">
-        <Panel minSizePixels={240} maxSizePercentage={50} defaultSizePixels={300}>
+        <Panel
+          className="title-bar"
+          minSizePixels={240}
+          maxSizePercentage={50}
+          defaultSizePixels={300}
+        >
           <ThreadList
             threads={threads}
             selectedThreadId={thread?.id ?? null}
@@ -92,7 +97,7 @@ function App() {
         <PanelResizeHandle className="w-1">
           <div className="mx-auto h-full w-px bg-ui" />
         </PanelResizeHandle>
-        <Panel>
+        <Panel className="bg-bg">
           <ThreadView key={thread?.id} thread={thread} />
         </Panel>
       </PanelGroup>
diff --git a/src/components/thread-item.tsx b/src/components/thread-item.tsx
index f776df9..44cb17f 100644
--- a/src/components/thread-item.tsx
+++ b/src/components/thread-item.tsx
@@ -36,7 +36,7 @@ export function ThreadItem({ thread, isSelected, onThreadClick }: ThreadItemProp
   return (
     <div
       className={twMerge(
-        "relative flex break-words px-4 py-2 text-sm",
+        "no-drag relative flex break-words px-4 py-2 text-sm",
         isSelected ? "text-white" : null,
       )}
       onClick={onThreadClick}
diff --git a/src/styles/globals.css b/src/styles/globals.css
index abf0d1a..17b3c85 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -48,9 +48,18 @@
 
 @layer base {
   body {
-    @apply bg-bg text-tx;
+    @apply bg-transparent text-tx;
     font-feature-settings:
       "rlig" 1,
       "calt" 1;
   }
+
+  .title-bar {
+    -webkit-app-select: none;
+    -webkit-app-region: drag;
+  }
+
+  .no-drag {
+    -webkit-app-region: no-drag;
+  }
 }