diff --git a/src/main/index.ts b/src/main/index.ts
index 8aaea9a..d866500 100644
--- a/src/main/index.ts
+++ b/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'),
diff --git a/src/renderer/App.tsx b/src/renderer/App.tsx
index d776720..35e1caa 100644
--- a/src/renderer/App.tsx
+++ b/src/renderer/App.tsx
@@ -32,6 +32,9 @@ export default function App(): JSX.Element {
return (
+
+ Hohoff Editor
+
diff --git a/src/renderer/styles/app.css b/src/renderer/styles/app.css
index d9b2be0..b8b9327 100644
--- a/src/renderer/styles/app.css
+++ b/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);