experiments in a post-browser web
refactor(windows): use peek-card and peek-grid components
Replace custom glass card and grid styles with reusable components:
- Use <peek-card glass interactive> instead of custom .card div
- Use <peek-grid overlay> instead of custom .cards grid container
- Update JS to use peek-card's selected property and card-click event
- Keep window-specific styles (search input, favicon, content layout)
+20
-43
+2
-34
extensions/windows/windows.css
+2
-34
extensions/windows/windows.css
···
51
51
color: var(--peek-glass-text-secondary, rgba(255, 255, 255, 0.5));
52
52
}
53
53
54
-
/* Cards container */
55
-
.cards {
56
-
display: grid;
57
-
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
58
-
gap: 16px;
59
-
max-width: 1800px;
60
-
margin: 0 auto;
61
-
}
62
-
63
-
/* Card base */
64
-
.card {
65
-
background: var(--peek-glass-bg, rgba(255, 255, 255, 0.1));
66
-
border-radius: 12px;
67
-
padding: 20px;
68
-
cursor: pointer;
69
-
transition: all 0.15s ease;
54
+
/* Window card internal layout */
55
+
.window-card-inner {
70
56
display: flex;
71
57
align-items: flex-start;
72
58
gap: 16px;
73
-
backdrop-filter: blur(var(--peek-glass-blur, 10px));
74
-
border: 1px solid var(--peek-glass-border, rgba(255, 255, 255, 0.1));
75
-
}
76
-
77
-
.card:hover {
78
-
background: var(--peek-glass-bg-hover, rgba(255, 255, 255, 0.15));
79
-
transform: translateY(-2px);
80
-
box-shadow: var(--peek-glass-shadow, 0 8px 24px rgba(0, 0, 0, 0.3));
81
-
}
82
-
83
-
.card.selected {
84
-
background: var(--peek-glass-bg-active, rgba(255, 255, 255, 0.2));
85
-
border-color: var(--base0D);
86
-
box-shadow: 0 0 0 2px var(--base0D);
87
-
}
88
-
89
-
.card.selected:hover {
90
-
background: rgba(255, 255, 255, 0.25);
91
59
}
92
60
93
61
/* Window card favicon */
+3
-1
extensions/windows/windows.html
+3
-1
extensions/windows/windows.html
···
6
6
<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1">
7
7
<title>Windows</title>
8
8
<link rel="stylesheet" type="text/css" href="windows.css">
9
+
<script type="module" src="peek://components/peek-card.js"></script>
10
+
<script type="module" src="peek://components/peek-grid.js"></script>
9
11
</head>
10
12
<body>
11
13
<div class="search-container">
12
14
<input type="text" class="search-input" placeholder="Search windows...">
13
15
</div>
14
16
15
-
<main class="cards"></main>
17
+
<peek-grid overlay min-item-width="280" gap="16" class="cards"></peek-grid>
16
18
17
19
<script type="module" src="windows.js"></script>
18
20
</body>
+15
-8
extensions/windows/windows.js
+15
-8
extensions/windows/windows.js
···
34
34
* Get all cards in the current view
35
35
*/
36
36
const getCards = () => {
37
-
return Array.from(document.querySelectorAll('.cards .card'));
37
+
return Array.from(document.querySelectorAll('.cards peek-card'));
38
38
};
39
39
40
40
/**
···
43
43
const updateSelection = () => {
44
44
const cards = getCards();
45
45
cards.forEach((card, i) => {
46
-
card.classList.toggle('selected', i === state.selectedIndex);
46
+
// Use the selected property on peek-card component
47
+
card.selected = i === state.selectedIndex;
47
48
});
48
49
49
50
// Scroll selected card into view
···
236
237
* Create a card element for a window
237
238
*/
238
239
const createWindowCard = (win) => {
239
-
const card = document.createElement('div');
240
-
card.className = 'card window-card';
240
+
const card = document.createElement('peek-card');
241
+
card.setAttribute('glass', '');
242
+
card.setAttribute('interactive', '');
241
243
card.dataset.windowId = win.id;
242
244
243
245
// Try to get favicon from URL
···
250
252
// Keep default favicon
251
253
}
252
254
}
255
+
256
+
// Create inner layout wrapper
257
+
const inner = document.createElement('div');
258
+
inner.className = 'window-card-inner';
253
259
254
260
const favicon = document.createElement('img');
255
261
favicon.className = 'card-favicon';
···
272
278
content.appendChild(title);
273
279
content.appendChild(url);
274
280
275
-
card.appendChild(favicon);
276
-
card.appendChild(content);
281
+
inner.appendChild(favicon);
282
+
inner.appendChild(content);
283
+
card.appendChild(inner);
277
284
278
-
// Click to focus window and close windows view
279
-
card.addEventListener('click', async () => {
285
+
// Click to focus window and close windows view (use card-click event from component)
286
+
card.addEventListener('card-click', async () => {
280
287
debug && console.log('[windows] Clicking window:', win.id, win.title);
281
288
await api.window.focus(win.id);
282
289
closeWindowsView();