💄 window bar matches app

src/main/index.ts

@@ -15,6 +15,7 @@ function createWindow(): void {
     minWidth: 900,
     minHeight: 600,
     title: 'Hohoff Editor',
+    titleBarStyle: 'hiddenInset',
     show: false,
     webPreferences: {
       preload: join(__dirname, '../preload/index.js'),

src/renderer/App.tsx

@@ -32,6 +32,9 @@ export default function App(): JSX.Element {
 
   return (
     <div className="app-layout">
+      <div className="app-titlebar">
+        <span className="app-titlebar-title">Hohoff Editor</span>
+      </div>
       <aside className="sidebar">
         <FileTree />
       </aside>

src/renderer/styles/app.css

@@ -1,11 +1,33 @@
 .app-layout {
   display: grid;
   grid-template-columns: 220px 1fr 340px;
-  grid-template-rows: 100vh;
+  grid-template-rows: 38px calc(100vh - 38px);
   height: 100vh;
   overflow: hidden;
 }
 
+.app-titlebar {
+  grid-column: 1 / -1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--sidebar-bg);
+  border-bottom: 1px solid var(--border);
+  /* Makes the entire bar draggable so the window can be moved */
+  -webkit-app-region: drag;
+  user-select: none;
+  position: relative;
+}
+
+.app-titlebar-title {
+  font-size: 12px;
+  font-family: var(--font-sans);
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  color: var(--text-muted);
+  text-transform: uppercase;
+}
+
 /* ─── Sidebar ──────────────────────────────────────────────────── */
 .sidebar {
   background: var(--sidebar-bg);