Show author avatars with nldd-avatar

robbertbos commented

2026-07-24 05:28:48 +00:00

Owner

NLDD 0.8.69 ships nldd-avatar: image with automatic fallback to initials (derived from name) or a person icon, sizes on the nldd-icon scale, and nldd-byline renders it natively. Waggle shows author names in cards and threads but no avatar. Evaluate adding avatars (Mattermost profile image via the file proxy, initials as fallback) in CardRow, thread view and the reply composer.

robbertbos added the

nldd ds

label

2026-07-24 06:01:23 +00:00

robbertbos referenced this issue from a commit

2026-07-26 07:31:30 +00:00

Replace CardRow's hand-built avatar with nldd-avatar

robbertbos referenced this issue from a commit

2026-07-26 08:22:28 +00:00

Finish the avatar migration to nldd-avatar

robbertbos commented

2026-08-05 21:35:43 +00:00

Author

Owner

Rescoping rather than closing. Two of the three surfaces this asked for exist today (delivered by #130):

CardRow.vue:347, 468 - author avatar, MM profile image via /api/mm/avatar, initials fallback
ThreadView.vue:122-129 - same, per thread message
also CardDetailsModal.vue:181, ReactorPopover.vue:61, MentionProfilePopover.vue:83

The third is not there: the reply composer shows no avatar for the person writing. MessageEditor/ReplyComposer only pass an account through so the mention autocomplete can load candidate avatars (ReplyComposer.vue:38).

So what is left is one question, not a sweep: does a composer get an avatar of the current user next to the input? That is a design call - it costs vertical space in the busiest surface and adds no information the user lacks. Leaving this open with that as the remaining scope.

Rescoping rather than closing. Two of the three surfaces this asked for exist today (delivered by #130): - CardRow.vue:347, 468 - author avatar, MM profile image via /api/mm/avatar, initials fallback - ThreadView.vue:122-129 - same, per thread message - also CardDetailsModal.vue:181, ReactorPopover.vue:61, MentionProfilePopover.vue:83 The third is not there: the reply composer shows no avatar for the person writing. MessageEditor/ReplyComposer only pass an account through so the mention autocomplete can load candidate avatars (ReplyComposer.vue:38). So what is left is one question, not a sweep: does a composer get an avatar of the current user next to the input? That is a design call - it costs vertical space in the busiest surface and adds no information the user lacks. Leaving this open with that as the remaining scope.

robbertbos referenced this issue

2026-08-06 06:25:34 +00:00

NLDD alignment: the time field, the popup slot and the popover frame #235

robbertbos commented

2026-08-07 22:05:55 +00:00

Author

Owner

Closing as already done - most of it landed two days after this was filed.

nldd-avatar renders the real Mattermost profile image with initials as
fallback in CardRow (both variants), ThreadView, CardDetailsModal,
ReactorPopover and MentionProfilePopover. Commits 0c0bb5e and 575cfa7
(2026-07-26) moved five separately hand-built image -> initials -> icon chains
onto the component, so the fallback lives in one place instead of five.

The proxy this asks us to evaluate exists too: GET /api/mm/avatar/{user_id}
(backend/waggle/api/mm_avatar.py:167), separate from the file proxy and
cache-busted with the last_picture_update version that sync stores per author
(sync_service.py:139, mm_thread.py:205).

Three things named here were not done. None of them needs this issue open:

The reply composer has no avatar. It shows no "you are replying as"
avatar, and the thread payload already returns what it would need. That is a
design question rather than a migration - worth its own issue if we want it.
nldd-byline is unused. CardRow and ThreadView hand-roll the author +
timestamp row next to nldd-avatar. A refactor with no user-visible change.
mentionSuggest.ts still hand-builds <img> + initials (it renders
outside Vue, into the Tiptap suggestion popup), so it missed the sweep.

One loose end while we are here: initials() exists twice, in
cardViewUtils.ts:32 and ThreadView.vue:73, with different edge cases (?
fallback vs none).

Closing as already done - most of it landed two days after this was filed. `nldd-avatar` renders the real Mattermost profile image with initials as fallback in `CardRow` (both variants), `ThreadView`, `CardDetailsModal`, `ReactorPopover` and `MentionProfilePopover`. Commits `0c0bb5e` and `575cfa7` (2026-07-26) moved five separately hand-built image -> initials -> icon chains onto the component, so the fallback lives in one place instead of five. The proxy this asks us to evaluate exists too: `GET /api/mm/avatar/{user_id}` (`backend/waggle/api/mm_avatar.py:167`), separate from the file proxy and cache-busted with the `last_picture_update` version that sync stores per author (`sync_service.py:139`, `mm_thread.py:205`). Three things named here were not done. None of them needs this issue open: - **The reply composer has no avatar.** It shows no "you are replying as" avatar, and the thread payload already returns what it would need. That is a design question rather than a migration - worth its own issue if we want it. - **`nldd-byline` is unused.** `CardRow` and `ThreadView` hand-roll the author + timestamp row next to `nldd-avatar`. A refactor with no user-visible change. - **`mentionSuggest.ts` still hand-builds `<img>` + initials** (it renders outside Vue, into the Tiptap suggestion popup), so it missed the sweep. One loose end while we are here: `initials()` exists twice, in `cardViewUtils.ts:32` and `ThreadView.vue:73`, with different edge cases (`?` fallback vs none).

robbertbos closed this issue

2026-08-07 22:06:01 +00:00

Rows
Columns

Show author avatars with nldd-avatar #167