Related resources

web/app/components/document/index.hbs

@@ -1,27 +1,45 @@
-{{! @glint-nocheck: not typesafe yet }}
 <div class="flex flex-1 space-x-px max-h-screen">
-  <Document::Sidebar
-    @profile={{this.authenticatedUser.info}}
-    @document={{@document}}
-    @deleteDraft={{perform this.deleteDraft}}
-    @docType={{@docType}}
-  />
+  <div
+    class="sidebar shrink-0 {{if this.sidebarIsCollapsed 'collapsed' 'w-72'}}"
+  >
+    {{#unless @modelIsChanging}}
+      {{!
+        We teardown and rebuild the sidebar when the model is changing
+        so that its state is reset and it inherits the new model's data.
+      }}
+      <Document::Sidebar
+        @profile={{this.authenticatedUser.info}}
+        @document={{@document}}
+        @deleteDraft={{perform this.deleteDraft}}
+        @docType={{@docType}}
+        @isCollapsed={{this.sidebarIsCollapsed}}
+        @toggleCollapsed={{this.toggleSidebarCollapsedState}}
+      />
+    {{/unless}}
+  </div>
 
   <div class="pt-4 pb-4 pr-4 w-full">
     <Hds::Card::Container
       @level="high"
-      @hasBorder="true"
+      @hasBorder={{true}}
       @overflow="hidden"
       class="flex items-center justify-center h-full"
     >
-      <iframe
-        title="Google Doc"
-        height="100%"
-        width="100%"
-        class="border-0"
-        src="https://docs.google.com/document/d/{{@document.objectID}}/edit?embedded=true"
-      >
-      </iframe>
+      {{#unless @modelIsChanging}}
+        {{!
+          We teardown and rebuild the iframe when the model is changing
+          so that any SRC changes don't add history entries,
+          which would cause the back button to break.
+        }}
+        <iframe
+          title="Google Doc"
+          height="100%"
+          width="100%"
+          class="border-0"
+          src="https://docs.google.com/document/d/{{@document.objectID}}/edit?embedded=true"
+        >
+        </iframe>
+      {{/unless}}
     </Hds::Card::Container>
   </div>
 

web/app/components/document/index.ts

@@ -7,10 +7,13 @@ import FetchService from "hermes/services/fetch";
 import RouterService from "@ember/routing/router-service";
 import FlashMessageService from "ember-cli-flash/services/flash-messages";
 import RecentlyViewedDocsService from "hermes/services/recently-viewed-docs";
+import { tracked } from "@glimmer/tracking";
+import { action } from "@ember/object";
 
 interface DocumentIndexComponentSignature {
   document: HermesDocument;
   docType: string;
+  modelIsChanging: boolean;
 }
 
 export default class DocumentIndexComponent extends Component<DocumentIndexComponentSignature> {
@@ -21,6 +24,12 @@ export default class DocumentIndexComponent extends Component<DocumentIndexCompo
   @service("recently-viewed-docs")
   declare recentDocs: RecentlyViewedDocsService;
 
+  @tracked sidebarIsCollapsed = false;
+
+  @action protected toggleSidebarCollapsedState() {
+    this.sidebarIsCollapsed = !this.sidebarIsCollapsed;
+  }
+
   protected deleteDraft = dropTask(async (docID: string) => {
     try {
       let fetchResponse = await this.fetchSvc.fetch("/api/v1/drafts/" + docID, {
@@ -59,3 +68,9 @@ export default class DocumentIndexComponent extends Component<DocumentIndexCompo
     });
   }
 }
+
+declare module "@glint/environment-ember-loose/registry" {
+  export default interface Registry {
+    Document: typeof DocumentIndexComponent;
+  }
+}