experiments in a post-browser web
10
fork

Configure Feed

Select the types of activity you want to include in your feed.

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
··· 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
··· 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
··· 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();