experiments in a post-browser web
fix(page): add missing flexbox layout HTML structure for center-column
The JS (page.js) was updated to reference a center-column element and use
flexbox-based positioning, but the HTML (index.html) was never updated to
include the three-column layout structure. This caused centerColumn to be
null, crashing updatePositions() and making pages invisible.
Added:
- .page-layout flex container wrapping all body content
- .left-gutter and .right-gutter flex items (absorb extraWidth)
- .center-column#center-column with height:100% (holds all page elements)
- CSS rules for the flexbox layout
+87
-48
+60
-36
app/page/index.html
+60
-36
app/page/index.html
···
34
34
background: transparent;
35
35
}
36
36
37
+
/* Three-column flexbox layout: gutters absorb extraWidth, center column holds all content */
38
+
.page-layout {
39
+
display: flex;
40
+
height: 100vh;
41
+
width: 100%;
42
+
}
43
+
44
+
.left-gutter, .right-gutter {
45
+
flex: 1;
46
+
min-width: 0;
47
+
}
48
+
49
+
.center-column {
50
+
flex: none;
51
+
position: relative;
52
+
height: 100%;
53
+
}
54
+
37
55
/*
38
56
* Webview — positioned by JS via updatePositions() relative to window origin.
39
57
* The window is a tight-fitting BrowserWindow, not fullscreen.
···
561
579
</style>
562
580
</head>
563
581
<body data-no-drag>
564
-
<!-- Mode indicator - shown when in group mode -->
565
-
<div id="mode-indicator" class="mode-indicator">
566
-
<span class="mode-label">page</span>
567
-
<span class="group-name"></span>
568
-
</div>
569
-
<div class="trigger-zone" id="trigger-zone"></div>
570
-
<script type="module">
571
-
import 'peek://app/components/peek-navbar.js';
572
-
</script>
573
-
<peek-navbar id="navbar"></peek-navbar>
574
-
<webview id="content" allowpopups></webview>
575
-
<div class="drag-overlay" id="drag-overlay"></div>
576
-
<div class="resize-handle" id="resize-se" data-dir="se"></div>
577
-
<div class="resize-handle" id="resize-sw" data-dir="sw"></div>
578
-
<div class="resize-handle" id="resize-ne" data-dir="ne"></div>
579
-
<div class="resize-handle" id="resize-nw" data-dir="nw"></div>
580
-
<div class="resize-handle" id="resize-nav-ne" data-dir="ne"></div>
581
-
<div class="resize-handle" id="resize-nav-nw" data-dir="nw"></div>
582
-
<!-- Page Info Panel (top-left, shown with navbar) -->
583
-
<div class="page-info-panel" id="page-info-panel">
584
-
<div class="panel-header">
585
-
<span class="panel-title">Page Info</span>
586
-
</div>
587
-
<div class="panel-body" id="page-info-body">
588
-
<div class="info-empty">Loading page info...</div>
589
-
</div>
590
-
</div>
582
+
<div class="page-layout">
583
+
<div class="left-gutter"></div>
584
+
<div class="center-column" id="center-column">
585
+
<!-- Mode indicator - shown when in group mode -->
586
+
<div id="mode-indicator" class="mode-indicator">
587
+
<span class="mode-label">page</span>
588
+
<span class="group-name"></span>
589
+
</div>
590
+
<div class="trigger-zone" id="trigger-zone"></div>
591
+
<script type="module">
592
+
import 'peek://app/components/peek-navbar.js';
593
+
</script>
594
+
<peek-navbar id="navbar"></peek-navbar>
595
+
<webview id="content" allowpopups></webview>
596
+
<div class="drag-overlay" id="drag-overlay"></div>
597
+
<div class="resize-handle" id="resize-se" data-dir="se"></div>
598
+
<div class="resize-handle" id="resize-sw" data-dir="sw"></div>
599
+
<div class="resize-handle" id="resize-ne" data-dir="ne"></div>
600
+
<div class="resize-handle" id="resize-nw" data-dir="nw"></div>
601
+
<div class="resize-handle" id="resize-nav-ne" data-dir="ne"></div>
602
+
<div class="resize-handle" id="resize-nav-nw" data-dir="nw"></div>
603
+
<!-- Page Info Panel (top-left, shown with navbar) -->
604
+
<div class="page-info-panel" id="page-info-panel">
605
+
<div class="panel-header">
606
+
<span class="panel-title">Page Info</span>
607
+
</div>
608
+
<div class="panel-body" id="page-info-body">
609
+
<div class="info-empty">Loading page info...</div>
610
+
</div>
611
+
</div>
591
612
592
-
<!-- Entities Panel (right side, shown with navbar) -->
593
-
<div class="entities-panel" id="entities-panel">
594
-
<div class="panel-header">
595
-
<span class="panel-title">Entities</span>
613
+
<!-- Entities Panel (right side, shown with navbar) -->
614
+
<div class="entities-panel" id="entities-panel">
615
+
<div class="panel-header">
616
+
<span class="panel-title">Entities</span>
617
+
</div>
618
+
<div class="panel-body" id="entities-body">
619
+
<div class="entity-empty">No entities detected yet</div>
620
+
</div>
621
+
</div>
622
+
623
+
<div class="widget-container" id="widget-container"></div>
596
624
</div>
597
-
<div class="panel-body" id="entities-body">
598
-
<div class="entity-empty">No entities detected yet</div>
599
-
</div>
625
+
<div class="right-gutter"></div>
600
626
</div>
601
-
602
-
<div class="widget-container" id="widget-container"></div>
603
627
<script type="module" src="page.js"></script>
604
628
</body>
605
629
</html>
+27
-12
app/page/page.js
+27
-12
app/page/page.js
···
126
126
};
127
127
const modeIndicator = document.getElementById('mode-indicator');
128
128
const widgetContainer = document.getElementById('widget-container');
129
+
const centerColumn = document.getElementById('center-column');
129
130
const pageInfoPanel = document.getElementById('page-info-panel');
130
131
const pageInfoBody = document.getElementById('page-info-body');
131
132
const entitiesPanel = document.getElementById('entities-panel');
···
165
166
});
166
167
167
168
// --- Window bounds computation ---
168
-
// Computes the BrowserWindow bounds from the webview screen position
169
+
// Computes the BrowserWindow bounds from the webview screen position.
170
+
// extraWidth is distributed symmetrically — flexbox centering keeps
171
+
// the center column (and webview) at the same screen position.
172
+
let extraWidth = 0;
169
173
170
174
function computeWindowBounds(sb) {
171
-
// Window always includes space for navbar + trigger zone + margins.
172
-
// Navbar visibility is CSS-only — window size stays constant.
173
-
const winX = sb.x - MARGIN;
175
+
const winX = sb.x - MARGIN - extraWidth / 2;
174
176
const winY = sb.y - TRIGGER_ZONE_HEIGHT - (NAVBAR_HEIGHT + NAVBAR_GAP);
175
-
const winW = sb.width + MARGIN * 2;
177
+
const winW = sb.width + MARGIN * 2 + extraWidth;
176
178
const winH = sb.height + TRIGGER_ZONE_HEIGHT + MARGIN + (NAVBAR_HEIGHT + NAVBAR_GAP);
177
179
178
180
return { x: Math.round(winX), y: Math.round(winY), width: Math.round(winW), height: Math.round(winH) };
···
196
198
}
197
199
198
200
function updatePositions() {
199
-
// All positions are relative to the window origin (0, 0)
200
-
// The window layout from top to bottom (fixed — never changes):
201
-
// [navbar area] (NAVBAR_HEIGHT + NAVBAR_GAP) — navbar shown/hidden via CSS
202
-
// [trigger zone] (TRIGGER_ZONE_HEIGHT)
203
-
// [webview] (screenBounds.height)
204
-
// [bottom margin] (MARGIN)
205
-
// Left/right margins: MARGIN on each side
201
+
// Elements are positioned within the center column, which is auto-centered
202
+
// by flexbox. When the window is wider than needed (extraWidth > 0), the
203
+
// gutters absorb the extra space — no element repositioning needed.
206
204
207
205
const navVisible = navbar.classList.contains('visible');
208
206
const navOffset = NAVBAR_HEIGHT + NAVBAR_GAP;
207
+
208
+
// Set center column width so flexbox can center it
209
+
centerColumn.style.width = `${screenBounds.width + MARGIN * 2}px`;
209
210
210
211
// Webview — positioned after navbar area + trigger zone (fixed position)
211
212
const webviewLeft = MARGIN;
···
299
300
});
300
301
}
301
302
303
+
304
+
// --- Set extra window width (for panels, widgets, etc.) ---
305
+
// Expands the window symmetrically. Flexbox keeps the center column in place.
306
+
function setWindowPadding(width) {
307
+
width = Math.max(0, width);
308
+
if (width === extraWidth) return;
309
+
extraWidth = width;
310
+
if (pendingBoundsUpdate) {
311
+
cancelAnimationFrame(pendingBoundsUpdate);
312
+
pendingBoundsUpdate = null;
313
+
}
314
+
api.window.setBounds(computeWindowBounds(screenBounds));
315
+
DEBUG && console.log('[page] Window padding set to', width);
316
+
}
302
317
303
318
// Initial positioning
304
319
updatePositions();