FIX: various fixes to chat styleguide (discourse#21617)

- uses current user as user for fabricators, allows for correct avatar image and presence indicator
- uses a non existing channel ID to avoid setting a draft of an existing channel
- attempts to make color toggle more reliable

Author: jjaffeux

plugins/chat/assets/javascripts/discourse/components/styleguide/chat-composer-message-details.js

@@ -8,10 +8,11 @@ export default class ChatStyleguideChatComposerMessageDetails extends Component
   @service site;
   @service session;
   @service keyValueStore;
+  @service currentUser;
 
   @cached
   get message() {
-    return fabricators.message();
+    return fabricators.message({ user: this.currentUser });
   }
 
   @action

plugins/chat/assets/javascripts/discourse/components/styleguide/chat-composer.js

@@ -8,7 +8,7 @@ export default class ChatStyleguideChatComposer extends Component {
   @service chatChannelComposer;
   @service chatChannelPane;
 
-  channel = fabricators.channel();
+  channel = fabricators.channel({ id: -999 });
 
   @action
   toggleDisabled() {

plugins/chat/assets/javascripts/discourse/components/styleguide/chat-message.js

@@ -3,11 +3,14 @@ import fabricators from "discourse/plugins/chat/discourse/lib/fabricators";
 import { action } from "@ember/object";
 import ChatMessagesManager from "discourse/plugins/chat/discourse/lib/chat-messages-manager";
 import { getOwner } from "discourse-common/lib/get-owner";
+import { inject as service } from "@ember/service";
 
 export default class ChatStyleguideChatMessage extends Component {
+  @service currentUser;
+
   manager = new ChatMessagesManager(getOwner(this));
 
-  message = fabricators.message();
+  message = fabricators.message({ user: this.currentUser });
 
   @action
   toggleDeleted() {

plugins/chat/assets/javascripts/discourse/components/styleguide/chat-thread-original-message.js

@@ -1,6 +1,9 @@
 import Component from "@glimmer/component";
 import fabricators from "discourse/plugins/chat/discourse/lib/fabricators";
+import { inject as service } from "@ember/service";
 
 export default class ChatStyleguideChatThreadOriginalMessage extends Component {
-  message = fabricators.message();
+  @service currentUser;
+
+  message = fabricators.message({ user: this.currentUser });
 }

plugins/styleguide/assets/javascripts/discourse/components/toggle-color-mode.js

@@ -10,19 +10,33 @@ function colorSchemeOverride(type) {
   const lightScheme = document.querySelector("link.light-scheme");
   const darkScheme = document.querySelector("link.dark-scheme");
 
-  if (!lightScheme || !darkScheme) {
+  if (!lightScheme && !darkScheme) {
     return;
   }
 
   switch (type) {
     case DARK:
+      lightScheme.origMedia = lightScheme.media;
       lightScheme.media = "none";
+      darkScheme.origMedia = darkScheme.media;
       darkScheme.media = "all";
       break;
     case LIGHT:
+      lightScheme.origMedia = lightScheme.media;
       lightScheme.media = "all";
+      darkScheme.origMedia = darkScheme.media;
       darkScheme.media = "none";
       break;
+    default:
+      if (lightScheme.origMedia) {
+        lightScheme.media = lightScheme.origMedia;
+        lightScheme.removeAttribute("origMedia");
+      }
+      if (darkScheme.origMedia) {
+        darkScheme.media = darkScheme.origMedia;
+        darkScheme.removeAttribute("origMedia");
+      }
+      break;
   }
 }