experiments in a post-browser web
refactor(windows): transparent bg with groups/tags card style
- Fully transparent body background (window handles transparency)
- Card styling matches groups/tags for unified theming
- Removed peek-card/peek-grid components, using plain divs
+64
-71
+54
-52
extensions/windows/windows.css
+54
-52
extensions/windows/windows.css
···
15
15
}
16
16
17
17
body {
18
-
/* Transparent background with slight dark overlay */
19
-
background: var(--peek-overlay-bg, rgba(0, 0, 0, 0.85));
18
+
/* Fully transparent - window itself handles transparency */
19
+
background: transparent;
20
20
color: var(--base05);
21
21
min-height: 100vh;
22
-
padding: 48px;
23
22
}
24
23
25
24
/* Search */
26
25
.search-container {
27
-
max-width: 600px;
28
-
margin: 0 auto 32px auto;
26
+
padding: 24px 24px 0 24px;
29
27
}
30
28
31
29
.search-input {
32
30
width: 100%;
33
-
padding: 16px 24px;
34
-
font-size: 18px;
31
+
padding: 12px 16px;
32
+
font-size: 15px;
35
33
font-family: var(--theme-font-sans);
36
-
background: var(--peek-glass-bg, rgba(255, 255, 255, 0.1));
37
-
border: 1px solid var(--peek-glass-border-hover, rgba(255, 255, 255, 0.2));
38
-
border-radius: 12px;
39
-
color: var(--peek-glass-text, white);
34
+
background: var(--base01);
35
+
border: 1px solid var(--base02);
36
+
border-radius: 8px;
37
+
color: var(--base05);
40
38
outline: none;
41
39
transition: all 0.15s ease;
42
-
backdrop-filter: blur(var(--peek-glass-blur, 10px));
43
40
}
44
41
45
42
.search-input:focus {
46
43
border-color: var(--base0D);
47
-
background: var(--peek-glass-bg-hover, rgba(255, 255, 255, 0.15));
44
+
background: var(--base00);
48
45
}
49
46
50
47
.search-input::placeholder {
51
-
color: var(--peek-glass-text-secondary, rgba(255, 255, 255, 0.5));
48
+
color: var(--base03);
49
+
}
50
+
51
+
/* Cards container - matches groups/tags */
52
+
.cards {
53
+
padding: 24px;
54
+
display: grid;
55
+
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
56
+
gap: 12px;
52
57
}
53
58
54
-
/* Window card internal layout */
55
-
.window-card-inner {
59
+
/* Card base - matches groups/tags */
60
+
.card {
61
+
background: var(--base01);
62
+
border-radius: 8px;
63
+
padding: 16px;
64
+
cursor: pointer;
65
+
transition: all 0.15s ease;
56
66
display: flex;
57
67
align-items: flex-start;
58
-
gap: 16px;
68
+
gap: 12px;
69
+
}
70
+
71
+
.card:hover {
72
+
background: var(--base02);
73
+
transform: translateY(-2px);
74
+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
75
+
}
76
+
77
+
.card.selected {
78
+
background: var(--base02);
79
+
outline: 2px solid var(--base0D);
80
+
outline-offset: -2px;
81
+
}
82
+
83
+
.card.selected:hover {
84
+
background: var(--base03);
59
85
}
60
86
61
87
/* Window card favicon */
62
88
.card-favicon {
63
-
width: 48px;
64
-
height: 48px;
65
-
border-radius: 8px;
89
+
width: 32px;
90
+
height: 32px;
91
+
border-radius: 4px;
66
92
flex-shrink: 0;
67
-
background: var(--peek-glass-bg, rgba(255, 255, 255, 0.1));
93
+
background: var(--base02);
68
94
object-fit: contain;
69
95
}
70
96
···
75
101
}
76
102
77
103
.card-title {
78
-
font-size: 16px;
104
+
font-size: 15px;
79
105
font-weight: 600;
80
-
color: var(--peek-glass-text, white);
106
+
color: var(--base05);
81
107
margin-bottom: 4px;
82
108
white-space: nowrap;
83
109
overflow: hidden;
···
85
111
}
86
112
87
113
.card-url {
88
-
font-size: 13px;
89
-
color: var(--peek-glass-text-secondary, rgba(255, 255, 255, 0.6));
114
+
font-size: 12px;
115
+
color: var(--base04);
90
116
white-space: nowrap;
91
117
overflow: hidden;
92
118
text-overflow: ellipsis;
93
-
margin-bottom: 8px;
94
-
}
95
-
96
-
.card-meta {
97
-
font-size: 12px;
98
-
color: var(--peek-glass-text-muted, rgba(255, 255, 255, 0.4));
99
119
}
100
120
101
121
/* Empty state */
102
122
.empty-state {
103
123
grid-column: 1 / -1;
104
124
text-align: center;
105
-
padding: 80px 24px;
106
-
color: var(--peek-glass-text-secondary, rgba(255, 255, 255, 0.5));
107
-
font-size: 18px;
108
-
}
109
-
110
-
/* Hint at bottom */
111
-
.hint {
112
-
position: fixed;
113
-
bottom: 24px;
114
-
left: 50%;
115
-
transform: translateX(-50%);
116
-
font-size: 13px;
117
-
color: var(--peek-glass-text-muted, rgba(255, 255, 255, 0.4));
118
-
text-align: center;
119
-
}
120
-
121
-
.hint kbd {
122
-
background: var(--peek-glass-bg, rgba(255, 255, 255, 0.1));
123
-
padding: 2px 8px;
124
-
border-radius: 4px;
125
-
margin: 0 4px;
125
+
padding: 48px 24px;
126
+
color: var(--base03);
127
+
font-size: 15px;
126
128
}
+1
-3
extensions/windows/windows.html
+1
-3
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://app/components/peek-card.js"></script>
10
-
<script type="module" src="peek://app/components/peek-grid.js"></script>
11
9
</head>
12
10
<body>
13
11
<div class="search-container">
14
12
<input type="text" class="search-input" placeholder="Search windows...">
15
13
</div>
16
14
17
-
<peek-grid overlay min-item-width="280" gap="16" class="cards"></peek-grid>
15
+
<main class="cards"></main>
18
16
19
17
<script type="module" src="windows.js"></script>
20
18
</body>
+9
-16
extensions/windows/windows.js
+9
-16
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 peek-card'));
37
+
return Array.from(document.querySelectorAll('.cards .card'));
38
38
};
39
39
40
40
/**
···
43
43
const updateSelection = () => {
44
44
const cards = getCards();
45
45
cards.forEach((card, i) => {
46
-
// Use the selected property on peek-card component
47
-
card.selected = i === state.selectedIndex;
46
+
card.classList.toggle('selected', i === state.selectedIndex);
48
47
});
49
48
50
49
// Scroll selected card into view
···
237
236
* Create a card element for a window
238
237
*/
239
238
const createWindowCard = (win) => {
240
-
const card = document.createElement('peek-card');
241
-
card.setAttribute('glass', '');
242
-
card.setAttribute('interactive', '');
239
+
const card = document.createElement('div');
240
+
card.className = 'card';
243
241
card.dataset.windowId = win.id;
244
242
245
243
// Try to get favicon from URL
···
253
251
}
254
252
}
255
253
256
-
// Create inner layout wrapper
257
-
const inner = document.createElement('div');
258
-
inner.className = 'window-card-inner';
259
-
260
254
const favicon = document.createElement('img');
261
255
favicon.className = 'card-favicon';
262
256
favicon.src = faviconUrl;
···
267
261
const content = document.createElement('div');
268
262
content.className = 'card-content';
269
263
270
-
const title = document.createElement('h2');
264
+
const title = document.createElement('div');
271
265
title.className = 'card-title';
272
266
title.textContent = win.title || 'Untitled';
273
267
···
278
272
content.appendChild(title);
279
273
content.appendChild(url);
280
274
281
-
inner.appendChild(favicon);
282
-
inner.appendChild(content);
283
-
card.appendChild(inner);
275
+
card.appendChild(favicon);
276
+
card.appendChild(content);
284
277
285
-
// Click to focus window and close windows view (use card-click event from component)
286
-
card.addEventListener('card-click', async () => {
278
+
// Click to focus window and close windows view
279
+
card.addEventListener('click', async () => {
287
280
debug && console.log('[windows] Clicking window:', win.id, win.title);
288
281
await api.window.focus(win.id);
289
282
closeWindowsView();