remember selected playground format

Author: burieberry

packages/host/app/components/operator-mode/code-submode/playground-panel.gts

@@ -4,7 +4,6 @@ import { action } from '@ember/object';
 import type Owner from '@ember/owner';
 import { service } from '@ember/service';
 import Component from '@glimmer/component';
-import { tracked } from '@glimmer/tracking';
 
 import Folder from '@cardstack/boxel-icons/folder';
 import { restartableTask, task } from 'ember-concurrency';
@@ -248,11 +247,13 @@ class PlaygroundPanelContent extends Component<PlaygroundContentSignature> {
           {{/if}}
         {{/if}}
       </div>
-      <FormatChooser
-        class='format-chooser'
-        @format={{this.format}}
-        @setFormat={{this.setFormat}}
-      />
+      {{#if this.card}}
+        <FormatChooser
+          class='format-chooser'
+          @format={{this.format}}
+          @setFormat={{this.setFormat}}
+        />
+      {{/if}}
     </div>
     <style scoped>
       .playground-panel-content {
@@ -356,8 +357,10 @@ class PlaygroundPanelContent extends Component<PlaygroundContentSignature> {
   @service private declare realm: RealmService;
   @service private declare realmServer: RealmServerService;
   @service declare recentFilesService: RecentFilesService;
-  @tracked private format: Format = 'isolated';
-  private playgroundSelections: Record<string, string>;
+  private playgroundSelections: Record<
+    string, // moduleId
+    { cardId: string; format: Format }
+  >; // TrackedObject
 
   constructor(owner: Owner, args: PlaygroundContentSignature['Args']) {
     super(owner, args);
@@ -404,22 +407,27 @@ class PlaygroundPanelContent extends Component<PlaygroundContentSignature> {
     };
   }
 
-  private cardResource = getCard(this, () =>
-    this.playgroundSelections[this.args.moduleId]?.replace(/\.json$/, ''),
+  private cardResource = getCard(
+    this,
+    () => this.playgroundSelections[this.args.moduleId]?.cardId,
   );
 
   private get card(): CardDef | undefined {
     return this.cardResource.card;
   }
 
+  private get format(): Format {
+    return this.playgroundSelections[this.args.moduleId]?.format ?? 'isolated';
+  }
+
   private copyToClipboard = task(async (id: string) => {
     await navigator.clipboard.writeText(id);
   });
 
-  private openInInteractMode = task(async (id: string, format: Format) => {
+  private openInInteractMode = task(async (id: string) => {
     await this.operatorModeStateService.openCardInInteractMode(
       new URL(id),
-      format,
+      this.format === 'edit' ? 'edit' : 'isolated',
     );
   });
 
@@ -439,28 +447,31 @@ class PlaygroundPanelContent extends Component<PlaygroundContentSignature> {
         icon: IconCode,
       }),
       new MenuItem('Open in Interact Mode', 'action', {
-        action: () => this.openInInteractMode.perform(cardId, this.format),
+        action: () => this.openInInteractMode.perform(cardId),
         icon: Eye,
       }),
     ];
     return menuItems;
   }
 
-  private persistSelections = (cardId: string) => {
-    this.playgroundSelections[this.args.moduleId] = cardId;
+  private persistSelections = (cardId: string, format = this.format) => {
+    this.playgroundSelections[this.args.moduleId] = { cardId, format };
     window.localStorage.setItem(
       'playground-selections',
       JSON.stringify(this.playgroundSelections),
     );
   };
 
   @action private onSelect(card: PrerenderedCard) {
-    this.persistSelections(card.url);
+    this.persistSelections(card.url.replace(/\.json$/, ''));
   }
 
   @action
   private setFormat(format: Format) {
-    this.format = format;
+    if (!this.card?.id) {
+      return;
+    }
+    this.persistSelections(this.card.id, format);
   }
 
   private chooseCard = restartableTask(async () => {