FEATURE: Add topic-navigation plugin outlet and popup component (#15081)

Adds a plugin outlet that can be used to insert a popup over topic timeline.

app/assets/javascripts/discourse/app/components/topic-navigation-popup.js

@@ -0,0 +1,12 @@
+import Component from "@ember/component";
+import { action } from "@ember/object";
+
+export default Component.extend({
+  tagName: "",
+  hidden: false,
+
+  @action
+  close() {
+    this.set("hidden", true);
+  },
+});

app/assets/javascripts/discourse/app/templates/components/topic-navigation-popup.hbs

@@ -0,0 +1,6 @@
+{{#unless hidden}}
+  <div class="topic-navigation-popup">
+    {{d-button action=(action "close") class="close btn-flat" icon="times"}}
+    {{yield}}
+  </div>
+{{/unless}}

app/assets/javascripts/discourse/app/templates/topic.hbs

@@ -133,6 +133,8 @@
       {{plugin-outlet name="above-timeline" tagName=""}}
 
       {{#topic-navigation class="topic-navigation" topic=model jumpToDate=(action "jumpToDate") jumpToIndex=(action "jumpToIndex") as |info|}}
+        {{plugin-outlet name="topic-navigation" tagName="" args=(hash topic=model)}}
+
         {{#if info.renderTimeline}}
           {{topic-timeline
             topic=model

app/assets/stylesheets/common/base/topic.scss

@@ -56,6 +56,28 @@ $topic-progress-height: 42px;
         z-index: z("fullscreen");
       }
     }
+
+    .topic-navigation-popup {
+      box-sizing: border-box;
+      position: absolute;
+      top: 0;
+      overflow-y: auto;
+      z-index: z("timeline");
+      padding: 10px 10px 35px 10px;
+      box-shadow: shadow("dropdown");
+      background: var(--tertiary-low);
+
+      .close {
+        display: flex;
+        align-items: center;
+        position: absolute;
+        right: 10px;
+        top: 10px;
+        color: var(--primary);
+        opacity: 0.5;
+        font-size: var(--font-up-1);
+      }
+    }
   }
   // progress bar
   @media screen and (max-width: 924px) {