FEATURE: implements user based sidebar mode (#23078)

app/assets/javascripts/discourse/app/components/sidebar/switch-panel-buttons.hbs

@@ -5,5 +5,6 @@
     @icon={{button.switchButtonIcon}}
     @disabled={{this.isSwitching}}
     @translatedLabel={{button.switchButtonLabel}}
+    data-key={{button.key}}
   />
 {{/each}}

app/assets/javascripts/discourse/app/components/sidebar/switch-panel-buttons.js

@@ -16,9 +16,13 @@ export default class SwitchPanelButtons extends Component {
 
     const url = panel.lastKnownURL || panel.switchButtonDefaultUrl;
     const destination = url === "/" ? `discovery.${defaultHomepage()}` : url;
-    this.router.transitionTo(destination).finally(() => {
-      this.isSwitching = false;
-      this.sidebarState.setPanel(panel.key);
-    });
+    this.router
+      .transitionTo(destination)
+      .then(() => {
+        this.sidebarState.setPanel(panel.key);
+      })
+      .finally(() => {
+        this.isSwitching = false;
+      });
   }
 }

app/models/user_option.rb

@@ -292,6 +292,7 @@ def update_tracked_topics
 #  sidebar_link_to_filtered_list        :boolean          default(FALSE), not null
 #  sidebar_show_count_of_new_items      :boolean          default(FALSE), not null
 #  watched_precedence_over_muted        :boolean
+#  chat_separate_sidebar_mode           :integer          default(0), not null
 #
 # Indexes
 #

plugins/chat/app/models/chat/separate_sidebar_mode_site_setting.rb

@@ -0,0 +1,21 @@
+# frozen_string_literal: true
+
+module Chat
+  class SeparateSidebarModeSiteSetting < EnumSiteSetting
+    def self.valid_value?(val)
+      values.any? { |v| v[:value] == val }
+    end
+
+    def self.values
+      @values ||= [
+        { name: "admin.site_settings.chat_separate_sidebar_mode.never", value: "never" },
+        { name: "admin.site_settings.chat_separate_sidebar_mode.always", value: "always" },
+        { name: "admin.site_settings.chat_separate_sidebar_mode.fullscreen", value: "fullscreen" },
+      ]
+    end
+
+    def self.translate_names?
+      true
+    end
+  end
+end

plugins/chat/assets/javascripts/discourse/components/chat-drawer.js

@@ -171,8 +171,8 @@ export default Component.extend({
   @action
   openURL(url = null) {
     this.chat.activeChannel = null;
-    this.chatStateManager.didOpenDrawer(url);
     this.chatDrawerRouter.stateFor(this._routeFromURL(url));
+    this.chatStateManager.didOpenDrawer(url);
   },
 
   _routeFromURL(url) {

plugins/chat/assets/javascripts/discourse/components/chat/header/icon.hbs

@@ -2,8 +2,9 @@
   href={{this.href}}
   tabindex="0"
   class={{concat-class "icon" "btn-flat" (if this.isActive "active")}}
+  title={{i18n this.title}}
 >
-  {{d-icon "d-chat"}}
+  {{d-icon this.icon}}
   {{#unless this.currentUserInDnD}}
     <Chat::Header::Icon::UnreadIndicator
       @urgentCount={{@urgentCount}}

plugins/chat/assets/javascripts/discourse/components/chat/header/icon.js

@@ -1,7 +1,7 @@
 import { inject as service } from "@ember/service";
 import Component from "@glimmer/component";
 import getURL from "discourse-common/lib/get-url";
-
+import { getUserChatSeparateSidebarMode } from "discourse/plugins/chat/discourse/lib/get-user-chat-separate-sidebar-mode";
 export default class ChatHeaderIcon extends Component {
   @service currentUser;
   @service site;
@@ -12,6 +12,10 @@ export default class ChatHeaderIcon extends Component {
     return this.args.currentUserInDnD || this.currentUser.isInDoNotDisturb();
   }
 
+  get chatSeparateSidebarMode() {
+    return getUserChatSeparateSidebarMode(this.currentUser);
+  }
+
   get isActive() {
     return (
       this.args.isActive ||
@@ -20,13 +24,38 @@ export default class ChatHeaderIcon extends Component {
     );
   }
 
+  get title() {
+    if (
+      this.chatStateManager.isFullPageActive &&
+      !this.chatSeparateSidebarMode.never
+    ) {
+      return "sidebar.panels.forum.label";
+    }
+
+    return "chat.title_capitalized";
+  }
+
+  get icon() {
+    if (
+      this.chatStateManager.isFullPageActive &&
+      !this.chatSeparateSidebarMode.never
+    ) {
+      return "random";
+    }
+
+    return "d-chat";
+  }
+
   get href() {
-    if (this.chatStateManager.isFullPageActive) {
-      if (this.site.mobileView) {
-        return getURL("/chat");
-      } else {
-        return getURL(this.router.currentURL);
-      }
+    if (this.site.mobileView && this.chatStateManager.isFullPageActive) {
+      return getURL("/chat");
+    }
+
+    if (
+      this.chatStateManager.isFullPageActive &&
+      !this.chatSeparateSidebarMode.never
+    ) {
+      return getURL(this.chatStateManager.lastKnownAppURL || "/");
     }
 
     if (this.chatStateManager.isDrawerActive) {

plugins/chat/assets/javascripts/discourse/controllers/preferences-chat.js

@@ -14,38 +14,65 @@ const CHAT_ATTRS = [
   "chat_sound",
   "chat_email_frequency",
   "chat_header_indicator_preference",
+  "chat_separate_sidebar_mode",
 ];
 
-export const HEADER_INDICATOR_PREFERENCE_NEVER = "never";
-export const HEADER_INDICATOR_PREFERENCE_DM_AND_MENTIONS = "dm_and_mentions";
-export const HEADER_INDICATOR_PREFERENCE_ALL_NEW = "all_new";
-
 const EMAIL_FREQUENCY_OPTIONS = [
-  { name: I18n.t(`chat.email_frequency.never`), value: "never" },
-  { name: I18n.t(`chat.email_frequency.when_away`), value: "when_away" },
+  { name: I18n.t("chat.email_frequency.never"), value: "never" },
+  { name: I18n.t("chat.email_frequency.when_away"), value: "when_away" },
 ];
 
+export const HEADER_INDICATOR_PREFERENCE_NEVER = "never";
+export const HEADER_INDICATOR_PREFERENCE_DM_AND_MENTIONS = "dm_and_mentions";
+export const HEADER_INDICATOR_PREFERENCE_ALL_NEW = "all_new";
 const HEADER_INDICATOR_OPTIONS = [
   {
-    name: I18n.t(`chat.header_indicator_preference.all_new`),
+    name: I18n.t("chat.header_indicator_preference.all_new"),
     value: HEADER_INDICATOR_PREFERENCE_ALL_NEW,
   },
   {
-    name: I18n.t(`chat.header_indicator_preference.dm_and_mentions`),
+    name: I18n.t("chat.header_indicator_preference.dm_and_mentions"),
     value: HEADER_INDICATOR_PREFERENCE_DM_AND_MENTIONS,
   },
   {
-    name: I18n.t(`chat.header_indicator_preference.never`),
+    name: I18n.t("chat.header_indicator_preference.never"),
     value: HEADER_INDICATOR_PREFERENCE_NEVER,
   },
 ];
 
+const CHAT_SEPARATE_SIDEBAR_MODE_OPTIONS = [
+  {
+    name: I18n.t("admin.site_settings.chat_separate_sidebar_mode.always"),
+    value: "always",
+  },
+  {
+    name: I18n.t("admin.site_settings.chat_separate_sidebar_mode.fullscreen"),
+    value: "fullscreen",
+  },
+  {
+    name: I18n.t("admin.site_settings.chat_separate_sidebar_mode.never"),
+    value: "never",
+  },
+];
+
 export default class PreferencesChatController extends Controller {
   @service chatAudioManager;
+  @service siteSettings;
+
   subpageTitle = I18n.t("chat.admin.title");
 
   emailFrequencyOptions = EMAIL_FREQUENCY_OPTIONS;
   headerIndicatorOptions = HEADER_INDICATOR_OPTIONS;
+  chatSeparateSidebarModeOptions = CHAT_SEPARATE_SIDEBAR_MODE_OPTIONS;
+
+  get chatSeparateSidebarMode() {
+    const mode = this.model.get("user_option.chat_separate_sidebar_mode");
+    if (mode === "default") {
+      return this.siteSettings.chat_separate_sidebar_mode;
+    } else {
+      return mode;
+    }
+  }
 
   @discourseComputed
   chatSounds() {

plugins/chat/assets/javascripts/discourse/initializers/chat-sidebar.js

@@ -11,6 +11,7 @@ import { decorateUsername } from "discourse/helpers/decorate-username-selector";
 import { until } from "discourse/lib/formatter";
 import { inject as service } from "@ember/service";
 import ChatModalNewMessage from "discourse/plugins/chat/discourse/components/chat/modal/new-message";
+import getURL from "discourse-common/lib/get-url";
 
 export default {
   name: "chat-sidebar",
@@ -23,6 +24,18 @@ export default {
 
     this.siteSettings = container.lookup("service:site-settings");
 
+    withPluginApi("1.8.0", (api) => {
+      api.addSidebarPanel(
+        (BaseCustomSidebarPanel) =>
+          class ChatSidebarPanel extends BaseCustomSidebarPanel {
+            key = "chat";
+            switchButtonLabel = I18n.t("sidebar.panels.chat.label");
+            switchButtonIcon = "d-chat";
+            switchButtonDefaultUrl = getURL("/chat");
+          }
+      );
+    });
+
     withPluginApi("1.3.0", (api) => {
       if (this.siteSettings.enable_public_channels) {
         api.addSidebarSection(
@@ -180,7 +193,8 @@ export default {
             };
 
             return SidebarChatChannelsSection;
-          }
+          },
+          "chat"
         );
       }
 
@@ -414,7 +428,8 @@ export default {
           };
 
           return SidebarChatDirectMessagesSection;
-        }
+        },
+        "chat"
       );
     });
   },

plugins/chat/assets/javascripts/discourse/initializers/chat-user-options.js

@@ -6,6 +6,7 @@ const IGNORE_CHANNEL_WIDE_MENTION = "ignore_channel_wide_mention";
 const CHAT_SOUND = "chat_sound";
 const CHAT_EMAIL_FREQUENCY = "chat_email_frequency";
 const CHAT_HEADER_INDICATOR_PREFERENCE = "chat_header_indicator_preference";
+const CHAT_SEPARATE_SIDEBAR_MODE = "chat_separate_sidebar_mode";
 
 export default {
   name: "chat-user-options",
@@ -20,6 +21,7 @@ export default {
         api.addSaveableUserOptionField(CHAT_SOUND);
         api.addSaveableUserOptionField(CHAT_EMAIL_FREQUENCY);
         api.addSaveableUserOptionField(CHAT_HEADER_INDICATOR_PREFERENCE);
+        api.addSaveableUserOptionField(CHAT_SEPARATE_SIDEBAR_MODE);
       }
     });
   },

plugins/chat/assets/javascripts/discourse/lib/get-user-chat-separate-sidebar-mode.js

@@ -0,0 +1,9 @@
+export function getUserChatSeparateSidebarMode(user) {
+  const mode = user?.get("user_option.chat_separate_sidebar_mode");
+
+  return {
+    never: "never" === mode,
+    always: "always" === mode,
+    fullscreen: "fullscreen" === mode,
+  };
+}

plugins/chat/assets/javascripts/discourse/routes/chat.js

@@ -4,11 +4,13 @@ import { defaultHomepage } from "discourse/lib/utilities";
 import { inject as service } from "@ember/service";
 import { scrollTop } from "discourse/mixins/scroll-top";
 import { schedule } from "@ember/runloop";
-
+import { withPluginApi } from "discourse/lib/plugin-api";
+import { getUserChatSeparateSidebarMode } from "discourse/plugins/chat/discourse/lib/get-user-chat-separate-sidebar-mode";
 export default class ChatRoute extends DiscourseRoute {
   @service chat;
   @service router;
   @service chatStateManager;
+  @service currentUser;
 
   titleToken() {
     return I18n.t("chat.title_capitalized");
@@ -57,6 +59,16 @@ export default class ChatRoute extends DiscourseRoute {
   }
 
   activate() {
+    withPluginApi("1.8.0", (api) => {
+      api.setSidebarPanel("chat");
+      if (getUserChatSeparateSidebarMode(this.currentUser).never) {
+        api.setCombinedSidebarMode();
+        api.hideSidebarSwitchPanelButtons();
+      } else {
+        api.setSeparatedSidebarMode();
+      }
+    });
+
     this.chatStateManager.storeAppURL();
     this.chat.updatePresence();
 
@@ -68,6 +80,23 @@ export default class ChatRoute extends DiscourseRoute {
   }
 
   deactivate(transition) {
+    withPluginApi("1.8.0", (api) => {
+      api.setSidebarPanel("main");
+
+      const chatSeparateSidebarMode = getUserChatSeparateSidebarMode(
+        this.currentUser
+      );
+      if (chatSeparateSidebarMode.fullscreen) {
+        api.setCombinedSidebarMode();
+        api.showSidebarSwitchPanelButtons();
+      } else if (chatSeparateSidebarMode.always) {
+        api.setSeparatedSidebarMode();
+      } else {
+        api.setCombinedSidebarMode();
+        api.hideSidebarSwitchPanelButtons();
+      }
+    });
+
     if (transition) {
       const url = this.router.urlFor(transition.from.name);
       this.chatStateManager.storeChatURL(url);

plugins/chat/assets/javascripts/discourse/services/chat-state-manager.js

@@ -4,6 +4,8 @@ import { tracked } from "@glimmer/tracking";
 import KeyValueStore from "discourse/lib/key-value-store";
 import Site from "discourse/models/site";
 import getURL from "discourse-common/lib/get-url";
+import { getUserChatSeparateSidebarMode } from "discourse/plugins/chat/discourse/lib/get-user-chat-separate-sidebar-mode";
+import { withPluginApi } from "discourse/lib/plugin-api";
 
 const PREFERRED_MODE_KEY = "preferred_mode";
 const PREFERRED_MODE_STORE_NAMESPACE = "discourse_chat_";
@@ -56,6 +58,16 @@ export default class ChatStateManager extends Service {
   }
 
   didOpenDrawer(url = null) {
+    withPluginApi("1.8.0", (api) => {
+      if (getUserChatSeparateSidebarMode(this.currentUser).always) {
+        api.setSidebarPanel("main");
+        api.setSeparatedSidebarMode();
+        api.hideSidebarSwitchPanelButtons();
+      } else {
+        api.setCombinedSidebarMode();
+      }
+    });
+
     this.isDrawerActive = true;
     this.isDrawerExpanded = true;
 
@@ -68,6 +80,24 @@ export default class ChatStateManager extends Service {
   }
 
   didCloseDrawer() {
+    withPluginApi("1.8.0", (api) => {
+      api.setSidebarPanel("main");
+
+      const chatSeparateSidebarMode = getUserChatSeparateSidebarMode(
+        this.currentUser
+      );
+      if (chatSeparateSidebarMode.fullscreen) {
+        api.setCombinedSidebarMode();
+        api.showSidebarSwitchPanelButtons();
+      } else if (chatSeparateSidebarMode.always) {
+        api.setSeparatedSidebarMode();
+        api.showSidebarSwitchPanelButtons();
+      } else {
+        api.setCombinedSidebarMode();
+        api.hideSidebarSwitchPanelButtons();
+      }
+    });
+
     this.isDrawerActive = false;
     this.isDrawerExpanded = false;
     this.chat.updatePresence();