DEV: implement composer peek mode directly in theme (#141)

This implements the [composer peek](https://github.com/discourse/composer-peek) component directly into the theme, and makes some minor adjustments to match theme styles: ![image](https://github.com/user-attachments/assets/e4272a11-6570-4392-945f-c509cf4debd6)
2025-04-16 17:10:23 -04:00
parent 36899bbbaa
commit cf9fd864dd
4 changed files with 107 additions and 0 deletions
@@ -0,0 +1,36 @@
+import Component from "@glimmer/component";
+import { tracked } from "@glimmer/tracking";
+import { action } from "@ember/object";
+import { service } from "@ember/service";
+import DButton from "discourse/components/d-button";
+import bodyClass from "discourse/helpers/body-class";
+
+export default class PeekModeToggle extends Component {
+  @service composer;
+
+  @tracked
+  peekModeActive = localStorage.getItem("peekModeActive") === "true" || false;
+
+  get bodyClassText() {
+    return this.peekModeActive ? "peek-mode-active" : "";
+  }
+
+  @action
+  togglePeekMode() {
+    this.peekModeActive = !this.peekModeActive;
+    localStorage.setItem("peekModeActive", this.peekModeActive);
+    if (this.composer.showPreview) {
+      this.composer.togglePreview();
+    }
+  }
+
+  <template>
+    {{bodyClass this.bodyClassText}}
+    <DButton
+      @action={{this.togglePeekMode}}
+      @preventFocus={{true}}
+      @icon="discourse-sidebar"
+      class="btn-mini-toggle no-text peek-mode-toggle btn-transparent"
+    />
+  </template>
+}