Skip to content

fix(ui): remove native macOS title bar + Library layout polish #25

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
johnnyhuy merged 1 commit into from
Aug 10, 2026
+89 −19
Merged

fix(ui): remove native macOS title bar + Library layout polish #25

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 11 additions & 4 deletions src/main/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,11 +6,18 @@ let mainWindow: BrowserWindow | null = null

function createWindow() {
mainWindow = new BrowserWindow({
width: 1024,
height: 720,
minWidth: 720,
minHeight: 540,
width: 1280,
height: 800,
minWidth: 980,
minHeight: 600,
title: 'Hoist',
// titleBarStyle: 'hiddenInset' removes the OS title bar but keeps
// the macOS traffic-light buttons; we draw our own titlebar in the
// renderer starting at 0,0, and the lights are placed at the
// leftmost position so the design system owns the chrome.
titleBarStyle: 'hiddenInset',
trafficLightPosition: { x: 12, y: 16 },
backgroundColor: '#1d1d21',
webPreferences: {
preload: join(__dirname, '../preload/index.js'),
contextIsolation: true,
Expand Down
8 changes: 4 additions & 4 deletions src/renderer/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -487,7 +487,7 @@ function LibraryInspectionPanel({ entry }: { entry: LibraryEntry | undefined })
const [cardOpen, setCardOpen] = useState(true)
if (!entry) {
return (
<aside className="hoist-rail">
<aside className="hoist-rail hoist-rail-detail">
<div className="hoist-rail-section">
<div className="hoist-rail-section-label muted">No harness selected.</div>
</div>
Expand All @@ -496,7 +496,7 @@ function LibraryInspectionPanel({ entry }: { entry: LibraryEntry | undefined })
}
const v = cleanVersion(entry.version, entry.name)
return (
<>
<aside className="hoist-rail hoist-rail-detail">
<div className="hoist-rail-section">
<button className="hoist-rail-section-collapse" onClick={() => setCardOpen((v) => !v)}>
<span className="hoist-rail-section-label">INSTALL · {entry.name}</span>
Expand Down Expand Up @@ -526,7 +526,7 @@ function LibraryInspectionPanel({ entry }: { entry: LibraryEntry | undefined })
<KV k="hooks" v="1 active" />
</div>
</div>
</>
</aside>
)
}

Expand Down Expand Up @@ -802,7 +802,7 @@ function StatusSurface() {
function DetailRail({ surface, library }: { surface: SurfaceId; library: LibraryEntry[] }) {
if (surface === 'library') return <LibraryInspectionPanel entry={library[0]} />
return (
<aside className="hoist-rail">
<aside className="hoist-rail hoist-rail-detail">
{surface === 'harnesses' && (
<>
<div className="hoist-rail-section">
Expand Down
85 changes: 74 additions & 11 deletions src/renderer/styles/layout.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,15 +30,19 @@

.hoist-topbar {
display: grid;
grid-template-columns: minmax(220px, 280px) 1fr auto;
grid-template-columns: 240px 1fr auto;
align-items: center;
gap: 16px;
padding: 0 12px;
padding: 0 16px 0 84px; /* left padding reserves room for macOS traffic lights */
height: 44px;
background: var(--surface-canvas);
border-bottom: 1px solid var(--border);
-webkit-app-region: drag;
}
.hoist-topbar button,
.hoist-topbar input {
-webkit-app-region: no-drag;
}

.hoist-topbar-left {
display: flex; align-items: center; gap: 10px;
Expand Down Expand Up @@ -153,6 +157,27 @@
padding: 10px 16px; border-top: 1px solid var(--border);
display: flex; align-items: center; justify-content: space-between;
}

/* ─── Right detail rail (3rd column) ─────────────────────────── */

.hoist-rail.hoist-rail.hoist-rail-detail {
background: var(--surface-1);
border-left: 1px solid var(--border);
border-right: none;
display: flex;
flex-direction: column;
padding: 12px;
overflow-y: auto;
min-height: 0;
min-width: 0;
align-items: stretch;
/* Force the rail to fill its grid track. The .hoist-rail.hoist-rail rule below
sets width: var(--rail-width) = 56px (for the left rail) which we must
override here even though specificity should already match. !important
breaks the tie in case of future reorderings. */
width: auto !important;
grid-column: 3 / 4;
}
.hoist-status-pill {
display: flex; align-items: center; gap: 6px;
font-size: 11px; color: var(--text-muted);
Expand Down Expand Up @@ -507,6 +532,7 @@
padding: 0;
min-height: 0;
width: var(--rail-width);
overflow-y: auto;
}

.hoist-rail-account {
Expand Down Expand Up @@ -541,6 +567,10 @@
padding: 0 12px;
align-items: center;
}
.hoist-rail.hoist-rail.hoist-rail-detail .hoist-rail-section {
align-items: stretch;
padding: 12px 0;
}

.hoist-rail-group {
display: flex;
Expand Down Expand Up @@ -641,7 +671,7 @@
.hoist-library .hoist-list {
grid-area: list;
margin: 0 0 0 32px;
width: 280px;
width: 380px;
background: var(--surface-1);
border: 1px solid var(--border);
border-radius: var(--radius-card);
Expand All @@ -653,9 +683,10 @@

.hoist-library-row {
display: grid;
grid-template-columns: 36px 1fr auto;
grid-template-columns: 36px 1fr;
align-items: center;
gap: 12px;
column-gap: 12px;
row-gap: 4px;
padding: 12px 14px;
background: transparent;
border: none;
Expand All @@ -673,15 +704,16 @@
}

.hoist-library-avatar {
width: 30px;
height: 30px;
grid-row: 1 / 3;
width: 32px;
height: 32px;
border-radius: var(--radius-tile);
background: var(--surface-3);
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 11px;
font-size: 12px;
color: var(--text);
}
.hoist-library-row.is-selected .hoist-library-avatar {
Expand All @@ -690,6 +722,8 @@
}

.hoist-library-row-body {
grid-column: 2;
grid-row: 1 / 3;
min-width: 0;
display: flex;
flex-direction: column;
Expand All @@ -699,31 +733,44 @@

.hoist-library-row-title {
display: flex;
align-items: center;
align-items: baseline;
gap: 8px;
font-size: 13px;
font-weight: 600;
min-width: 0;
width: 100%;
}
.hoist-library-row-title > span:first-child {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
flex: 0 1 auto;
min-width: 0;
}

.hoist-library-ver {
font-size: 11px;
color: var(--text-subtle);
font-family: var(--font-mono);
font-weight: 400;
flex: 0 0 auto;
white-space: nowrap;
}

.hoist-library-main {
grid-area: main;
margin: 0 24px 0 24px;
padding: 24px 32px;
overflow-y: auto;
max-width: 920px;
}

.hoist-library-main-name {
display: flex;
align-items: center;
gap: 16px;
margin-bottom: 16px;
flex-wrap: wrap;
}

.hoist-library-main-avatar {
Expand All @@ -743,6 +790,9 @@
.hoist-library-main-meta {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 6px;
}

.hoist-library-main-title {
Expand All @@ -755,8 +805,17 @@
.hoist-library-main-models {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 6px;
gap: 4px 8px;
margin-top: 4px;
}
.hoist-library-main-model {
font-size: 11px;
font-family: var(--font-mono);
color: var(--text-muted);
background: var(--surface-2);
padding: 2px 8px;
border-radius: var(--radius-tile);
white-space: nowrap;
}

.hoist-library-main-model {
Expand Down Expand Up @@ -840,6 +899,7 @@
justify-content: space-between;
align-items: baseline;
font-size: 12px;
gap: 12px;
}

.hoist-rail-kvkey {
Expand All @@ -852,6 +912,9 @@
font-size: 11px;
color: var(--text);
text-align: right;
word-break: break-all;
min-width: 0;
flex: 0 1 60%;
}

.hoist-terminal {
Expand Down
Loading