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
@@ -3,6 +3,7 @@
@import "chat";
@import "color-choice";
@import "composer";
+@import "composer-peek-mode";
@import "header";
@import "hiddenstuff";
@import "login";
@@ -0,0 +1,6 @@
+import { apiInitializer } from "discourse/lib/api";
+import peekModeToggle from "../components/composer-peek-mode-toggle";
+
+export default apiInitializer("1.8.0", (api) => {
+  api.renderInOutlet("before-composer-toggles", peekModeToggle);
+});
@@ -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>
+}
@@ -0,0 +1,64 @@
+.peek-mode-toggle {
+  display: none;
+}
+
+@media screen and (min-width: 1300px) {
+  html:not(.fullscreen-composer) {
+    .peek-mode-toggle svg {
+      transform: scaleX(-1);
+    }
+
+    &.composer-open {
+      .full-width-enabled .peek-mode-toggle {
+        display: flex;
+      }
+
+      .full-width-enabled.peek-mode-active {
+        #reply-control.hide-preview {
+          transition: none;
+          box-shadow: none;
+          border-radius: var(--d-border-radius-large);
+          .grippie {
+            display: none;
+          }
+
+          .reply-area {
+            padding-inline: 0.67em;
+          }
+        }
+
+        #reply-control:not(.fullscreen).hide-preview {
+          width: 100%;
+          right: var(--d-border-radius-large);
+          top: var(--header-offset);
+          bottom: var(--d-border-radius-large);
+          left: unset;
+          height: unset;
+          max-width: 32vw;
+        }
+
+        &.has-sidebar-page {
+          #main-outlet-wrapper {
+            grid-template-columns:
+              var(--d-sidebar-width) calc(100vw - 38vw - var(--d-sidebar-width))
+              1fr;
+          }
+        }
+
+        &:not(.has-sidebar-page) {
+          #main-outlet-wrapper {
+            grid-template-columns: 0 calc(100vw - 52vw) 1fr;
+          }
+
+          #reply-control:not(.fullscreen).hide-preview {
+            max-width: 46vw;
+          }
+        }
+
+        .sidebar-wrapper .sidebar-container {
+          height: unset;
+        }
+      }
+    }
+  }
+}