fix(portal): render bot/app avatar glyph in news summary list (#12317) (#12318)

* fix(portal): render bot/app avatar glyph in news summary list (#12317)

#12316 routed the timeline HTML avatars through getAvatarHtml (sized <img> for
normal users, Font Awesome GitHub glyph for bot/app actors). But the "On this page"
summary is a separate consumer: the parsers publish a record `image` URL into the
sections store, and Neo.app.content.SectionsList renders `record.image` as a plain
<img> — so bot/app actors (whose <login>.png 404s) still rendered a broken image in
the summary while the timeline showed the glyph.

Close the consumer-shape gap, keeping the bot decision centralized:
- Portal.view.content.Component: extract isBotActor(user) (single source of truth for
  the bot/app check, shared by getAvatarHtml + the new helper); add getAvatarRecordProps(user)
  → {image: getAvatarUrl(user)} for normal users, {iconCls: 'fa-brands fa-github'} for bots.
- tickets / pulls / discussions parsers: spread ...getAvatarRecordProps(user) into the
  timeline records (replacing the raw image: getAvatarUrl), so the published record carries
  iconCls for bot/app actors.
- Neo.app.content.SectionsList: add a backward-compatible `iconCls` render branch (generic;
  no GitHub-specific knowledge — existing image/icon branches untouched).

Covers all three news views (AC4); SectionsList stays generic (AC3).

Co-Authored-By: neo-opus-4-7 <neo-opus-4-7@neomjs.com>

* fix(portal): declare iconCls on TimelineSection model so it survives hydration (#12317)

---------

Co-authored-by: tobiu <tobiasuhlig78@gmail.com>

Author: neo-opus-ada

apps/portal/model/TimelineSection.mjs

@@ -20,6 +20,9 @@ class TimelineSection extends ContentSection {
         }, {
             name: 'icon',
             type: 'String'
+        }, {
+            name: 'iconCls',
+            type: 'String'
         }, {
             name: 'image',
             type: 'String'

apps/portal/view/content/Component.mjs

@@ -72,6 +72,18 @@ class Component extends ContentComponent {
         return `${this.repoUserUrl}${user}.png?size=40`
     }
 
+    /**
+     * @summary True for GitHub bot/app actors whose `github.com/<login>.png` avatar 404s.
+     *
+     * Single source of truth for the bot/app actor decision, shared by `getAvatarHtml` (timeline HTML)
+     * and `getAvatarRecordProps` (summary list), so the bot list is never duplicated in a consumer renderer.
+     * @param {String} user GitHub login.
+     * @returns {Boolean}
+     */
+    isBotActor(user) {
+        return botActors.has(user) || user.endsWith('[bot]')
+    }
+
     /**
      * @summary Renders a bounded avatar for a timeline actor.
      *
@@ -82,13 +94,27 @@ class Component extends ContentComponent {
      * @returns {String}
      */
     getAvatarHtml(user) {
-        if (botActors.has(user) || user.endsWith('[bot]')) {
+        if (this.isBotActor(user)) {
             return `<i class="neo-timeline-avatar-icon fa-brands fa-github" role="img" aria-label="${user}"></i>`
         }
 
         return `<img src="${this.getAvatarUrl(user)}" alt="${user}" loading="lazy">`
     }
 
+    /**
+     * @summary Resolves the avatar fields for a timeline entry record, consumed by both the timeline and
+     * the `Neo.app.content.SectionsList` "On this page" summary.
+     *
+     * Normal users get a bounded `image` URL; bot/app actors get an `iconCls` (Font Awesome GitHub glyph)
+     * instead — so the summary list renders the same no-network glyph the timeline does, rather than a
+     * broken `<img>` for a 404ing bot avatar. The bot decision stays centralized via `isBotActor`.
+     * @param {String} user GitHub login.
+     * @returns {Object} `{image}` for normal users, `{iconCls}` for bot/app actors.
+     */
+    getAvatarRecordProps(user) {
+        return this.isBotActor(user) ? {iconCls: 'fa-brands fa-github'} : {image: this.getAvatarUrl(user)}
+    }
+
     /**
      * @param {Object} record
      * @returns {Promise<void>}

apps/portal/view/news/discussions/Component.mjs

@@ -200,7 +200,7 @@ class Component extends ContentComponent {
 
         me.timelineData.unshift({
             id   : bodyId,
-            image: me.getAvatarUrl(data.author),
+            ...me.getAvatarRecordProps(data.author),
             name : 'Description',
             tag  : 'body'
         });
@@ -346,7 +346,7 @@ ${fullHtml}
 
             me.timelineData.push({
                 id,
-                image: me.getAvatarUrl(comment.user),
+                ...me.getAvatarRecordProps(comment.user),
                 name : `Comment (${comment.user})`,
                 tag  : 'comment'
             });

apps/portal/view/news/pulls/Component.mjs

@@ -50,7 +50,7 @@ class Component extends ContentComponent {
         cls: ['portal-news-pulls-component'],
         /**
          * `#N` references in PR bodies are issue numbers → resolve to the portal tickets view.
-         * Per-content-type config (#12209): the generic content base no longer defaults this.
+         * Per-content-type config: the generic content base no longer defaults this.
          * @member {String} issuesUrl='#/news/tickets/'
          */
         issuesUrl: '#/news/tickets/',
@@ -196,7 +196,7 @@ class Component extends ContentComponent {
 
         me.timelineData.push({
             id   : bodyId,
-            image: me.getAvatarUrl(author),
+            ...me.getAvatarRecordProps(author),
             name : 'Description',
             tag  : 'body'
         });
@@ -213,7 +213,7 @@ class Component extends ContentComponent {
 
             me.timelineData.push({
                 id,
-                image: me.getAvatarUrl(entry.user),
+                ...me.getAvatarRecordProps(entry.user),
                 name : isReview ? `Review (${entry.user})` : `Comment (${entry.user})`,
                 tag  : entry.type
             });

apps/portal/view/news/tickets/Component.mjs

@@ -264,7 +264,7 @@ class Component extends ContentComponent {
 
         me.timelineData.unshift({
             id   : bodyId,
-            image: me.getAvatarUrl(author),
+            ...me.getAvatarRecordProps(author),
             name : 'Description',
             tag  : 'body'
         });
@@ -338,7 +338,7 @@ ${fullHtml}
 
                 me.timelineData.push({
                     id,
-                    image: me.getAvatarUrl(currentUser),
+                    ...me.getAvatarRecordProps(currentUser),
                     name : `Comment (${currentUser})`,
                     tag  : 'comment'
                 });

src/app/content/SectionsList.mjs

@@ -40,6 +40,10 @@ class SectionsList extends List {
 
         if (record.image) {
             content.push({tag: 'img', src: record.image, cls: ['neo-list-icon', 'avatar']})
+        } else if (record.iconCls) {
+            // A full Font Awesome class string (e.g. a `fa-brands fa-github` bot glyph) rendered as an
+            // avatar-sized icon — lets a record supply a no-network glyph instead of an `image` URL.
+            content.push({tag: 'i', cls: ['neo-list-icon', 'avatar', ...record.iconCls.split(' ')]})
         } else if (record.icon) {
             content.push({tag: 'i', cls: ['neo-list-icon', 'fa-solid', record.icon]})
         }

test/playwright/unit/apps/portal/view/content/Component.spec.mjs

@@ -10,6 +10,7 @@ import {test, expect} from '@playwright/test';
 import Neo            from '../../../../../../../src/Neo.mjs';
 import * as core      from '../../../../../../../src/core/_export.mjs';
 import Component       from '../../../../../../../apps/portal/view/content/Component.mjs';
+import TimelineSections from '../../../../../../../apps/portal/store/TimelineSections.mjs';
 
 /**
  * Unit coverage for the shared avatar helpers on the Portal news timeline base
@@ -19,7 +20,7 @@ import Component       from '../../../../../../../apps/portal/view/content/Compo
  * no-network glyph. Both helpers are pure (they read only `this.repoUserUrl` / `this.getAvatarUrl`), so
  * they are exercised directly on the prototype with a stub context.
  */
-const {getAvatarHtml, getAvatarUrl} = Component.prototype;
+const {getAvatarHtml, getAvatarRecordProps, getAvatarUrl, isBotActor} = Component.prototype;
 
 test.describe('Portal.view.content.Component — shared avatar helpers', () => {
     test('getAvatarUrl bounds the avatar request to ?size=40', () => {
@@ -28,7 +29,7 @@ test.describe('Portal.view.content.Component — shared avatar helpers', () => {
     });
 
     test('getAvatarHtml: normal user → sized lazy <img>; bot/app actor → no-network glyph', () => {
-        const ctx = {repoUserUrl: 'https://github.com/', getAvatarUrl};
+        const ctx = {repoUserUrl: 'https://github.com/', getAvatarUrl, isBotActor};
 
         // Normal user: bounded (?size=40) lazy <img>, never the full-resolution original.
         const normal = getAvatarHtml.call(ctx, 'alice');
@@ -43,5 +44,47 @@ test.describe('Portal.view.content.Component — shared avatar helpers', () => {
 
         // `[bot]`-suffixed app actor: same no-network fallback.
         expect(getAvatarHtml.call(ctx, 'some-app[bot]')).toContain('fa-github')
+    });
+
+    test('isBotActor flags known bot/app actors, not normal users', () => {
+        expect(isBotActor('dependabot')).toBe(true);
+        expect(isBotActor('github-actions')).toBe(true);
+        expect(isBotActor('some-app[bot]')).toBe(true);
+        expect(isBotActor('alice')).toBe(false)
+    });
+
+    test('getAvatarRecordProps: normal user → {image:?size=40}; bot/app actor → {iconCls: github glyph}', () => {
+        // Drives the summary-list (SectionsList) avatar shape: a normal user yields a bounded image URL,
+        // a bot/app actor yields a glyph class so the summary renders the no-network glyph, not a 404 <img>.
+        const ctx = {repoUserUrl: 'https://github.com/', getAvatarUrl, isBotActor};
+
+        expect(getAvatarRecordProps.call(ctx, 'alice')).toEqual({image: 'https://github.com/alice.png?size=40'});
+        expect(getAvatarRecordProps.call(ctx, 'dependabot')).toEqual({iconCls: 'fa-brands fa-github'})
+    })
+});
+
+/**
+ * The summary list (`Neo.app.content.SectionsList`) renders `record.iconCls` for bot/app actors. That
+ * only works if `iconCls` is a declared field on the `Portal.model.TimelineSection` contract — an
+ * undeclared field is dropped during record hydration, so the glyph would silently vanish from the
+ * summary even though the parser emitted it. This pins the field on the model.
+ */
+test.describe('Portal.model.TimelineSection — iconCls hydration contract', () => {
+    test('iconCls survives store hydration as a declared field, alongside image', () => {
+        const store = Neo.create(TimelineSections, {
+            id  : 'portal-timeline-iconcls-hydration-test',
+            data: [
+                {id: 'bot',   iconCls: 'fa-brands fa-github'},
+                {id: 'human', image  : 'https://github.com/alice.png?size=40'}
+            ]
+        });
+
+        try {
+            // An undeclared field would be undefined here → the summary bot-glyph would silently break.
+            expect(store.get('bot').iconCls).toBe('fa-brands fa-github');
+            expect(store.get('human').image).toBe('https://github.com/alice.png?size=40')
+        } finally {
+            store.destroy()
+        }
     })
 });