Styling overhaul

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) {

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>

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}

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;
+  }
 }