treethought.xyz
AT protocol bookmarking platforms in obsidian
better sizing
+76
-39
+3
-14
src/components/cardDetailModal.ts
+3
-14
src/components/cardDetailModal.ts
···
33
33
this.item.renderDetail(contentEl);
34
34
35
35
// Render notes with delete buttons (semble-specific)
36
-
if (this.item.canAddNotes() && "getAttachedNotes" in this.item) {
36
+
if (this.item.canAddNotes() && this.item.getAttachedNotes) {
37
37
this.renderNotesSection(contentEl);
38
38
}
39
39
···
51
51
}
52
52
53
53
private renderNotesSection(contentEl: HTMLElement) {
54
-
// Type guard to check if item has getAttachedNotes method
55
-
interface ItemWithNotes {
56
-
getAttachedNotes(): Array<{ uri: string; text: string }>;
57
-
}
58
-
59
-
const hasNotes = (item: ATmarkItem): item is ATmarkItem & ItemWithNotes => {
60
-
return "getAttachedNotes" in item && typeof (item as ItemWithNotes).getAttachedNotes === "function";
61
-
};
62
-
63
-
if (!hasNotes(this.item)) return;
64
-
65
-
const notes = this.item.getAttachedNotes();
66
-
if (notes.length === 0) return;
54
+
const notes = this.item.getAttachedNotes?.();
55
+
if (!notes || notes.length === 0) return;
67
56
68
57
const notesSection = contentEl.createEl("div", { cls: "semble-detail-notes-section" });
69
58
notesSection.createEl("h3", { text: "Notes", cls: "atmark-detail-section-title" });
-7
src/sources/semble.ts
-7
src/sources/semble.ts
···
56
56
render(container: HTMLElement): void {
57
57
const el = container.createEl("div", { cls: "atmark-item-content" });
58
58
59
-
// Display attached notes (semble-specific)
60
-
if (this.attachedNotes.length > 0) {
61
-
for (const note of this.attachedNotes) {
62
-
el.createEl("p", { text: note.text, cls: "semble-card-note" });
63
-
}
64
-
}
65
-
66
59
const card = this.record.value;
67
60
68
61
if (card.type === "NOTE") {
+1
src/sources/types.ts
+1
src/sources/types.ts
+12
src/views/atmark.ts
+12
src/views/atmark.ts
···
190
190
text: new Date(item.getCreatedAt()).toLocaleDateString(),
191
191
cls: "atmark-date",
192
192
});
193
+
194
+
// Show note indicator for items with attached notes (semble cards)
195
+
const notes = item.getAttachedNotes?.();
196
+
if (notes && notes.length > 0) {
197
+
const noteIndicator = footer.createEl("div", { cls: "atmark-note-indicator" });
198
+
const icon = noteIndicator.createEl("span", { cls: "atmark-note-icon" });
199
+
setIcon(icon, "message-square");
200
+
noteIndicator.createEl("span", {
201
+
text: `${notes.length} note${notes.length > 1 ? 's' : ''}`,
202
+
cls: "atmark-note-count"
203
+
});
204
+
}
193
205
}
194
206
195
207
async onClose() { }
+60
-18
styles.css
+60
-18
styles.css
···
172
172
padding: 16px;
173
173
display: flex;
174
174
flex-direction: column;
175
-
gap: 8px;
176
175
transition: box-shadow 0.15s ease, border-color 0.15s ease;
177
176
cursor: pointer;
178
177
}
···
222
221
}
223
222
224
223
.atmark-badge {
225
-
font-size: var(--font-smallest);
226
-
padding: 2px 8px;
227
-
border-radius: var(--radius-s);
228
-
text-transform: uppercase;
229
-
font-weight: var(--font-medium);
224
+
font-size: 10px;
225
+
padding: 3px 8px;
226
+
border-radius: 12px;
227
+
text-transform: capitalize;
228
+
font-weight: var(--font-normal);
230
229
flex-shrink: 0;
231
-
opacity: 0.8;
230
+
letter-spacing: 0.3px;
232
231
}
233
232
234
233
.atmark-badge-semble {
235
-
background: var(--color-green);
236
-
color: var(--text-on-accent);
234
+
background: rgba(255, 87, 34, 0.15);
235
+
color: rgb(255, 120, 70);
236
+
border: 1px solid rgba(255, 87, 34, 0.3);
237
237
}
238
238
239
239
.atmark-badge-bookmark {
240
-
background: var(--color-cyan);
241
-
color: var(--text-on-accent);
240
+
background: rgba(3, 169, 244, 0.15);
241
+
color: rgb(3, 169, 244);
242
+
border: 1px solid rgba(3, 169, 244, 0.3);
242
243
}
243
244
244
245
.atmark-item-footer {
···
265
266
.atmark-item-content {
266
267
display: flex;
267
268
flex-direction: column;
268
-
gap: 8px;
269
+
gap: 12px;
269
270
}
270
271
271
272
.atmark-item-title {
272
273
font-weight: var(--font-semibold);
273
-
font-size: 1.1em;
274
+
font-size: 1em;
274
275
color: var(--text-normal);
276
+
display: -webkit-box;
277
+
-webkit-line-clamp: 2;
278
+
-webkit-box-orient: vertical;
279
+
overflow: hidden;
280
+
line-height: 1.4;
281
+
margin-bottom: 4px;
275
282
}
276
283
277
284
.atmark-item-image {
···
279
286
max-height: 120px;
280
287
object-fit: cover;
281
288
border-radius: var(--radius-s);
282
-
margin: 4px 0;
283
289
}
284
290
285
291
.atmark-item-desc {
286
292
color: var(--text-muted);
287
293
font-size: var(--font-small);
288
294
margin: 0;
289
-
flex-grow: 1;
295
+
display: -webkit-box;
296
+
-webkit-line-clamp: 2;
297
+
-webkit-box-orient: vertical;
298
+
overflow: hidden;
299
+
line-height: 1.5;
290
300
}
291
301
292
302
.atmark-item-site {
293
303
font-size: var(--font-smallest);
294
304
color: var(--text-faint);
305
+
margin-bottom: 2px;
295
306
}
296
307
297
308
.atmark-item-url {
298
-
font-size: var(--font-small);
309
+
font-size: var(--font-smallest);
299
310
color: var(--text-accent);
300
311
text-decoration: none;
301
312
word-break: break-all;
313
+
display: -webkit-box;
314
+
-webkit-line-clamp: 1;
315
+
-webkit-box-orient: vertical;
316
+
overflow: hidden;
302
317
}
303
318
304
319
.atmark-item-url:hover {
···
325
340
margin-top: 20px;
326
341
padding-top: 20px;
327
342
border-top: 1px solid var(--background-modifier-border);
343
+
}
344
+
345
+
/* Note indicator for cards with attached notes */
346
+
.atmark-note-indicator {
347
+
display: flex;
348
+
align-items: center;
349
+
gap: 4px;
350
+
font-size: var(--font-smallest);
351
+
color: var(--text-muted);
352
+
}
353
+
354
+
.atmark-note-icon {
355
+
display: flex;
356
+
align-items: center;
357
+
color: var(--text-muted);
358
+
}
359
+
360
+
.atmark-note-icon svg {
361
+
width: 12px;
362
+
height: 12px;
363
+
}
364
+
365
+
.atmark-note-count {
366
+
font-size: var(--font-smallest);
328
367
}
329
368
330
369
/* Detail Modal (shared between sources) */
···
568
607
569
608
.semble-card-text {
570
609
margin: 0;
571
-
white-space: pre-wrap;
572
-
line-height: var(--line-height-normal);
610
+
line-height: 1.5;
573
611
color: var(--text-normal);
612
+
display: -webkit-box;
613
+
-webkit-line-clamp: 5;
614
+
-webkit-box-orient: vertical;
615
+
overflow: hidden;
574
616
}
575
617
576
618
.semble-detail-text {