UX: show AI gist toggle on /filter route, fix appearance of gists (#35521)

This fixes the appearance of AI generated gists in the topic list on
/filter, and also includes the gist toggle via a new plugin outlet on
/filter called `after-filter-navigation-menu`.

This shares the state with the discovery route toggle (which is separate
from PM toggle state). I've also added tests to cover gist appearance on
/filter. Before the /filter state was shared with PM state, which was
incorrect.



Before:
<img width="2232" height="424" alt="image"
src="https://github.com/user-attachments/assets/b22ed7a6-388e-4b88-99d4-e9e10af6275a"
/>


After: 
<img width="2272" height="506" alt="image"
src="https://github.com/user-attachments/assets/cae03f12-9153-4bcb-a9d3-52712fb2d945"
/>

app/assets/javascripts/discourse/app/components/discovery/filter-navigation.gjs

@@ -2,6 +2,7 @@ import Component from "@glimmer/component";
 import { service } from "@ember/service";
 import BulkSelectToggle from "discourse/components/bulk-select-toggle";
 import FilterNavigationMenu from "discourse/components/discovery/filter-navigation-menu";
+import PluginOutlet from "discourse/components/plugin-outlet";
 import bodyClass from "discourse/helpers/body-class";
 import { bind } from "discourse/lib/decorators";
 import { resettableTracked } from "discourse/lib/tracked-tools";
@@ -47,6 +48,8 @@ export default class DiscoveryFilterNavigation extends Component {
           @initialInputValue={{this.filterQueryString}}
           @tips={{@tips}}
         />
+
+        <PluginOutlet @name="after-filter-navigation-menu" />
       </div>
     </section>
   </template>

app/assets/stylesheets/common/components/topic-query-filter.scss

@@ -4,6 +4,7 @@
   margin-right: auto;
   margin-bottom: var(--nav-space);
   width: 100%;
+  gap: var(--space-2);
 
   &__label {
     background-color: var(--primary-low);

plugins/discourse-ai/assets/javascripts/discourse/connectors/after-filter-navigation-menu/filter-gist-toggle.gjs

@@ -0,0 +1,17 @@
+import Component from "@glimmer/component";
+import { service } from "@ember/service";
+import AiGistToggle from "../../components/ai-gist-toggle";
+
+export default class FilterGistToggle extends Component {
+  @service topicThumbnails; // avoid Topic Thumbnails theme component
+
+  get shouldShow() {
+    return !this.topicThumbnails?.enabledForRoute;
+  }
+
+  <template>
+    {{#if this.shouldShow}}
+      <AiGistToggle />
+    {{/if}}
+  </template>
+}

plugins/discourse-ai/assets/javascripts/discourse/connectors/before-create-topic-button/topic-list-gist-toggle.gjs

@@ -9,5 +9,9 @@ export default class AiTopicGist extends Component {
     return !this.topicThumbnails?.enabledForRoute;
   }
 
-  <template><AiGistToggle /></template>
+  <template>
+    {{#if this.shouldShow}}
+      <AiGistToggle />
+    {{/if}}
+  </template>
 }

plugins/discourse-ai/assets/javascripts/discourse/connectors/user-messages-controls-bottom/pm-list-gist-toggle.gjs

@@ -9,5 +9,9 @@ export default class AiTopicGist extends Component {
     return !this.topicThumbnails?.enabledForRoute;
   }
 
-  <template><AiGistToggle /></template>
+  <template>
+    {{#if this.shouldShow}}
+      <AiGistToggle />
+    {{/if}}
+  </template>
 }

plugins/discourse-ai/assets/javascripts/discourse/initializers/ai-gist-topic-list-class.js

@@ -7,7 +7,7 @@ export default apiInitializer((api) => {
     "topic-list-item-class",
     ({ value, context }) => {
       const shouldShow =
-        gistService.preference === "table-ai" && gistService.shouldShow;
+        gistService.currentPreference === "table-ai" && gistService.showToggle;
 
       if (context.topic.get("ai_topic_gist") && shouldShow) {
         value.push("excerpt-expanded");

plugins/discourse-ai/assets/javascripts/discourse/services/gists.js

@@ -17,21 +17,18 @@ export default class Gists extends Service {
     return this.router.currentRoute.attributes;
   }
 
-  get publicTopics() {
-    return this.routerAttributes?.list?.topics;
-  }
-
-  get pmTopics() {
-    return this.routerAttributes?.topics;
-  }
-
   get isPm() {
-    return !this.publicTopics && this.pmTopics;
+    const routeName = this.router.currentRouteName;
+    return routeName?.startsWith("userPrivateMessages");
+  }
+
+  get topics() {
+    // covers discovery, filter, and pm routes
+    return this.routerAttributes?.list?.topics ?? this.routerAttributes?.topics;
   }
 
   get showToggle() {
-    const topicList = this.publicTopics ?? this.pmTopics;
-    return topicList?.some((topic) => topic.ai_topic_gist);
+    return this.topics?.some((topic) => topic.ai_topic_gist);
   }
 
   get currentPreference() {

plugins/discourse-ai/spec/system/summarization/gists_toggle_spec.rb

@@ -35,6 +35,32 @@ describe "Gists Toggle Functionality", type: :system do
 
       expect(page).to have_css("body.topic-list-layout-table-ai")
     end
+
+    it "shows toggle and gists on filter route" do
+      visit("/filter?q=status:open")
+
+      expect(find(".topic-list-layout-trigger")).to be_present
+
+      find(".topic-list-layout-trigger").click
+      find(
+        ".dropdown-menu__item .d-button-label",
+        text: I18n.t("js.discourse_ai.summarization.topic_list_layout.button.expanded"),
+      ).click
+
+      expect(page).to have_css("body.topic-list-layout-table-ai")
+    end
+
+    it "filter route shares toggle state with discovery routes" do
+      visit("/latest")
+      find(".topic-list-layout-trigger").click
+      find(
+        ".dropdown-menu__item .d-button-label",
+        text: I18n.t("js.discourse_ai.summarization.topic_list_layout.button.expanded"),
+      ).click
+
+      visit("/filter?q=status:open")
+      expect(page).to have_css("body.topic-list-layout-table-ai")
+    end
   end
 
   context "when viewing PM topic lists" do