diff options
| -rw-r--r-- | backend/notes/note.go | 2 | ||||
| -rw-r--r-- | frontend/src/main.ts | 8 | ||||
| -rw-r--r-- | frontend/src/style.css | 36 |
3 files changed, 43 insertions, 3 deletions
diff --git a/backend/notes/note.go b/backend/notes/note.go index 36b9f2b..c427a8f 100644 --- a/backend/notes/note.go +++ b/backend/notes/note.go @@ -7,7 +7,7 @@ import ( type Note struct { URI string `json:"uri"` - AuthorDID string `json:"authorDid"` + AuthorDID string `json:"authorDID"` AuthorHandle string `json:"authorHandle"` AuthorName string `json:"authorName"` AuthorNoUnauth bool `json:"authorNoUnauth"` // author has !no-unauthenticated label diff --git a/frontend/src/main.ts b/frontend/src/main.ts index 9ede3bc..816b86c 100644 --- a/frontend/src/main.ts +++ b/frontend/src/main.ts @@ -126,6 +126,14 @@ function createNoteElement(note: Note): HTMLElement { const noteDiv = document.createElement('div'); noteDiv.className = 'note'; + if (note.authorDID === "MISSING") { + noteDiv.classList.add('info'); + const textDiv = document.createElement('div'); + textDiv.textContent = note.text; + noteDiv.appendChild(textDiv); + return noteDiv; + } + const avatar = document.createElement('img'); avatar.className = 'note-avatar'; avatar.src = note.avatarURL || ''; diff --git a/frontend/src/style.css b/frontend/src/style.css index 88bef9d..8e1d095 100644 --- a/frontend/src/style.css +++ b/frontend/src/style.css @@ -114,11 +114,37 @@ h1 { .note { display: flex; gap: 10px; - background: var(--bg-secondary); + padding: 16px; + margin-bottom: 16px; +} + +/* standalone notes (not in a chain) */ +.note:not(.reply-chain .note) { + background: var(--bg-primary); + border: 2px solid var(--border); + border-radius: 8px; +} + +/* reply chains container */ +.reply-chain { + background: var(--bg-primary); border: 2px solid var(--border); border-radius: 8px; - padding: 16px; margin-bottom: 16px; + overflow: hidden; +} + +/* notes inside chains */ +.reply-chain .note { + background: transparent; + border: none; + border-radius: 0; + margin: 0; +} + +/* separator between notes in chain */ +.reply-chain .note + .note { + border-top: 2px solid var(--border); } .note-avatar { @@ -140,6 +166,12 @@ h1 { font-size: 12px; } +.info { + color: var(--text-muted); + font-style: italic; + text-align: center; +} + .spinner { border: 8px solid #f3f3f3; border-top: 8px solid var(--accent); |