UX: show tooltip for global nav section icon (#21974)

app/assets/javascripts/discourse/app/components/d-tooltip.js

@@ -6,6 +6,7 @@ import Ember from "ember";
 export default class DiscourseTooltip extends Component {
   tagName = "";
   interactive = false;
+  placement = this.args?.placement || "bottom-start";
 
   didInsertElement() {
     this._super(...arguments);
@@ -36,7 +37,7 @@ export default class DiscourseTooltip extends Component {
         trigger: this.capabilities.touch ? "click" : "mouseenter",
         theme: "d-tooltip",
         arrow: false,
-        placement: "bottom-start",
+        placement: this.placement,
         onTrigger: this.stopPropagation,
         onUntrigger: this.stopPropagation,
       });

app/assets/javascripts/discourse/app/components/sidebar/common/custom-section.hbs

@@ -1,6 +1,7 @@
 <Sidebar::Section
   @sectionName={{this.section.slug}}
   @headerLinkText={{this.section.decoratedTitle}}
+  @indicatePublic={{this.section.indicatePublic}}
   @collapsable={{@collapsable}}
   @headerActions={{this.section.headerActions}}
   @headerActionsIcon={{this.section.headerActionIcon}}

app/assets/javascripts/discourse/app/components/sidebar/section-header.hbs

@@ -9,7 +9,7 @@
     {{yield}}
   </DButton>
 {{else}}
-  <span class="sidebar-section-header" title={{i18n "sidebar.toggle_section"}}>
+  <span class="sidebar-section-header">
     {{yield}}
   </span>
 {{/if}}

app/assets/javascripts/discourse/app/components/sidebar/section.hbs

@@ -19,6 +19,14 @@
         <span class="sidebar-section-header-text">
           {{@headerLinkText}}
         </span>
+        {{#if @indicatePublic}}
+          <span class="sidebar-section-header-global-indicator">
+            {{d-icon "globe"}}
+            <DTooltip @placement="top">{{d-icon "shield-alt"}}
+              {{i18n "sidebar.sections.global_section"}}
+            </DTooltip>
+          </span>
+        {{/if}}
       </Sidebar::SectionHeader>
 
       {{#if this.isSingleHeaderAction}}

app/assets/javascripts/discourse/app/lib/sidebar/section.js

@@ -1,7 +1,5 @@
 import I18n from "I18n";
 import showModal from "discourse/lib/show-modal";
-import { iconHTML } from "discourse-common/lib/icon-library";
-import { htmlSafe } from "@ember/template";
 import SectionLink from "discourse/lib/sidebar/section-link";
 import { tracked } from "@glimmer/tracking";
 import { setOwner } from "@ember/application";
@@ -28,9 +26,11 @@ export default class Section {
   }
 
   get decoratedTitle() {
-    return this.section.public && this.currentUser?.staff
-      ? htmlSafe(`${iconHTML("globe")} ${this.section.title}`)
-      : this.section.title;
+    return this.section.title;
+  }
+
+  get indicatePublic() {
+    return this.section.public && this.currentUser?.staff;
   }
 
   get headerActions() {

app/assets/stylesheets/common/base/sidebar-custom-section.scss

@@ -3,14 +3,7 @@
     padding-bottom: 0;
   }
   .sidebar-section-header {
-    position: relative;
-    .d-icon-globe {
-      position: absolute;
-      left: -0.75em;
-      align-self: stretch;
-      width: 0.6em;
-      height: 100%;
-    }
+    display: flex;
   }
 
   .sidebar-section-link-prefix.icon {

app/assets/stylesheets/common/base/sidebar-section.scss

@@ -89,12 +89,19 @@
   }
 
   .sidebar-section-header-text {
-    display: flex;
     line-height: normal;
     margin-right: 0.25em;
     @include ellipsis;
   }
 
+  .sidebar-section-header-global-indicator {
+    margin: 0 0.75em 0 0.25em;
+    font-size: var(--font-down-2);
+    .d-icon {
+      margin-top: -0.125em; // optical alignment
+    }
+  }
+
   .sidebar-section-header-caret {
     display: flex;
     flex: 0 0 auto;

app/assets/stylesheets/desktop/menu-panel.scss

@@ -44,7 +44,6 @@
         padding-bottom: 0.25em;
         border-bottom: 1px solid var(--primary-low);
         .d-icon-globe {
-          font-size: var(--font-down-2);
           color: var(--primary-medium);
         }
       }

config/locales/client.en.yml

@@ -4534,6 +4534,7 @@ en:
               content: "Review"
               title: "Flagged posts and other queued items"
               pending_count: "%{count} pending"
+        global_section: "Global section, visible to everyone"
 
     welcome_topic_banner:
       title: "Create your Welcome Topic"