experiments in a post-browser web
fix(entities): always show all card elements, move type into header
+27
-38
+18
-25
extensions/entities/home.css
+18
-25
extensions/entities/home.css
···
166
166
display: flex;
167
167
align-items: center;
168
168
gap: 6px;
169
+
min-width: 0;
170
+
}
171
+
172
+
.card-header-label {
173
+
flex: 1;
174
+
min-width: 0;
175
+
overflow: hidden;
176
+
text-overflow: ellipsis;
177
+
white-space: nowrap;
178
+
font-size: 13px;
179
+
font-weight: 500;
180
+
color: var(--base05);
181
+
}
182
+
183
+
.entity-type-prefix {
184
+
color: var(--base04);
185
+
text-transform: capitalize;
169
186
}
170
187
171
188
.entity-name {
···
177
194
text-overflow: ellipsis;
178
195
}
179
196
180
-
.entity-type {
181
-
font-size: 10px;
182
-
color: var(--base04);
183
-
text-transform: capitalize;
184
-
}
185
-
186
197
.entity-confidence {
187
198
font-size: 11px;
188
199
color: var(--base04);
···
217
228
color: var(--base03);
218
229
}
219
230
220
-
/* Open link button - positioned top-right of card */
231
+
/* Open link button - inline in header */
221
232
.card-open-btn {
222
-
position: absolute;
223
-
top: 8px;
224
-
right: 8px;
225
233
display: flex;
226
234
align-items: center;
227
235
justify-content: center;
···
235
243
color: var(--base04);
236
244
flex-shrink: 0;
237
245
transition: all 0.15s;
238
-
opacity: 0;
239
-
z-index: 1;
240
-
}
241
-
242
-
peek-card:hover .card-open-btn {
243
-
opacity: 1;
244
246
}
245
247
246
248
.card-open-btn:hover {
···
269
271
cursor: pointer;
270
272
color: var(--base03);
271
273
transition: all 0.15s;
272
-
opacity: 0;
273
-
}
274
-
275
-
peek-card:hover .feedback-btn {
276
-
opacity: 1;
277
-
}
278
-
279
-
.feedback-btn.active {
280
-
opacity: 1;
281
274
}
282
275
283
276
.feedback-btn:hover {
+9
-13
extensions/entities/home.js
+9
-13
extensions/entities/home.js
···
430
430
</div>`;
431
431
}
432
432
433
-
// Top-right open link button (positioned absolutely over the card)
433
+
const headerDiv = document.createElement('div');
434
+
headerDiv.slot = 'header';
435
+
const entityTypeLabel = entityType.replace('_', ' ');
436
+
const entityName = escapeHtml(entity.content || entity.name || '');
437
+
let openBtnHtml = '';
434
438
if (sourceUrl) {
435
-
const openBtn = document.createElement('button');
436
-
openBtn.className = 'card-open-btn';
437
-
openBtn.dataset.url = sourceUrl;
438
-
openBtn.title = 'Open source page';
439
-
openBtn.innerHTML = `<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
439
+
openBtnHtml = `<button class="card-open-btn" data-url="${escapeHtml(sourceUrl)}" title="Open source page"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
440
440
<path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path>
441
441
<polyline points="15 3 21 3 21 9"></polyline>
442
442
<line x1="10" y1="14" x2="21" y2="3"></line>
443
-
</svg>`;
444
-
card.appendChild(openBtn);
443
+
</svg></button>`;
445
444
}
446
-
447
-
const headerDiv = document.createElement('div');
448
-
headerDiv.slot = 'header';
449
445
headerDiv.innerHTML = `
450
446
<div class="card-header">
451
447
<span class="entity-type-icon type-${entityType}">${icon}</span>
452
-
<span class="entity-name">${escapeHtml(entity.content || entity.name || '')}</span>
448
+
<span class="card-header-label"><span class="entity-type-prefix">${escapeHtml(entityTypeLabel)}:</span> ${entityName}</span>
449
+
${openBtnHtml}
453
450
</div>
454
451
`;
455
452
card.appendChild(headerDiv);
···
457
454
const bodyDiv = document.createElement('div');
458
455
bodyDiv.className = 'card-body';
459
456
bodyDiv.innerHTML = `
460
-
<div class="entity-type">${escapeHtml(entityType.replace('_', ' '))}</div>
461
457
${attrHtml}
462
458
${aliasHtml}
463
459
${sourceHtml}