[2.x] fix(admin): keep extension danger badge visible on long names (#4660)

The abandoned-extension danger/warning badge was rendered inside the
button's truncated label, so when the extension name was long enough
to trigger the ellipsis overflow on `.Button-labelText`, the badge
itself got clipped and was no longer visible in the admin sidebar.

Move the badge into `ExtensionLinkButton::statusItems()` (alongside
the enabled/disabled status dot) so it sits as a sibling of the
button label rather than inside it. Position it absolutely to the
left of the dot, vertically aligned by matching the dot's
`margin`-based centering offset for the larger badge size.

Closes #4592

Author: imorland

framework/core/js/src/admin/components/AdminNav.js

@@ -156,8 +156,6 @@ export default class AdminNav extends Component {
         const query = this.query().toUpperCase();
         const title = extension.extra['flarum-extension'].title || '';
         const description = extension.description || '';
-        const isAbandoned = extension.abandoned;
-        const hasReplacement = typeof isAbandoned === 'string';
 
         if (!query || title.toUpperCase().includes(query) || description.toUpperCase().includes(query)) {
           items.add(
@@ -169,7 +167,6 @@ export default class AdminNav extends Component {
               title={description}
             >
               {title}
-              {isAbandoned && <span className={`Badge Badge--${hasReplacement ? 'danger' : 'warning'}`}>!</span>}
             </ExtensionLinkButton>,
             categories[category]
           );

framework/core/js/src/admin/components/ExtensionLinkButton.js

@@ -23,6 +23,14 @@ export default class ExtensionLinkButton extends LinkButton {
   statusItems(name) {
     const items = new ItemList();
 
+    const extension = app.data.extensions[name];
+    const isAbandoned = extension?.abandoned;
+
+    if (isAbandoned) {
+      const hasReplacement = typeof isAbandoned === 'string';
+      items.add('abandoned', <span className={`Badge Badge--${hasReplacement ? 'danger' : 'warning'}`}>!</span>, 10);
+    }
+
     items.add('enabled', <span className={'ExtensionListItem-Dot ' + (isExtensionEnabled(name) ? 'enabled' : 'disabled')} />);
 
     return items;

framework/core/less/admin/AdminNav.less

@@ -216,10 +216,12 @@
 
 .ExtensionNavButton {
   .Badge {
-    margin-left: 5px;
     .Badge--size(16px);
     font-size: 10px;
     font-weight: bold;
+    position: absolute;
+    right: 33px;
+    margin: 3px 0;
 
     &.Badge--danger {
       --badge-bg: @error-color;