UX: Bring back New Conversation button on mobile sidebar (#1283)

Author: markvanlan

assets/javascripts/discourse/components/ai-bot-sidebar-new-conversation.gjs

@@ -1,4 +1,5 @@
 import Component from "@glimmer/component";
+import { action } from "@ember/object";
 import { service } from "@ember/service";
 import DButton from "discourse/components/d-button";
 import { AI_CONVERSATIONS_PANEL } from "../services/ai-conversations-sidebar-manager";
@@ -14,12 +15,18 @@ export default class AiBotSidebarNewConversation extends Component {
     );
   }
 
+  @action
+  routeTo() {
+    this.router.transitionTo("/discourse-ai/ai-bot/conversations");
+    this.args.outletArgs?.toggleNavigationMenu?.();
+  }
+
   <template>
     {{#if this.shouldRender}}
       <DButton
-        @route="/discourse-ai/ai-bot/conversations"
         @label="discourse_ai.ai_bot.conversations.new"
         @icon="plus"
+        @action={{this.routeTo}}
         class="ai-new-question-button btn-default"
       />
     {{/if}}

assets/stylesheets/modules/ai-bot-conversations/common.scss

@@ -1,7 +1,7 @@
 @use "lib/viewport";
 
-// Hide the new question button from the hamburger menu's footer
-.hamburger-panel .ai-new-question-button {
+// Hide the new question button from the hamburger menu's footer on desktop
+.desktop-view .hamburger-panel .ai-new-question-button {
   display: none;
 }
 

spec/system/ai_bot/homepage_spec.rb

@@ -272,4 +272,21 @@
       expect(sidebar).to have_no_css("button.ai-new-question-button")
     end
   end
+
+  context "with header dropdown on mobile", mobile: true do
+    before { SiteSetting.navigation_menu = "header dropdown" }
+
+    it "displays the new question button in the menu when viewing a PM" do
+      ai_pm_homepage.visit
+      header_dropdown.open
+      expect(ai_pm_homepage).to have_no_new_question_button
+
+      topic_page.visit_topic(pm)
+      header_dropdown.open
+      ai_pm_homepage.click_new_question_button
+
+      # Hamburger sidebar is closed
+      expect(header_dropdown).to have_no_dropdown_visible
+    end
+  end
 end

spec/system/page_objects/components/ai_pm_homepage.rb

@@ -32,6 +32,14 @@ def has_no_homepage?
         page.has_no_css?(HOMEPAGE_WRAPPER_CLASS)
       end
 
+      def has_no_new_question_button?
+        page.has_no_css?(".ai-new-question-button")
+      end
+
+      def click_new_question_button
+        page.find(".ai-new-question-button").click
+      end
+
       def persona_selector
         PageObjects::Components::SelectKit.new(".persona-llm-selector__persona-dropdown")
       end