Cs 10383 create listing should have a loading user experience

packages/base/menu-items.ts

@@ -6,7 +6,7 @@ import {
 
 import CopyCardCommand from '@cardstack/boxel-host/commands/copy-card';
 import GenerateExampleCardsCommand from '@cardstack/boxel-host/commands/generate-example-cards';
-import ListingCreateCommand from '@cardstack/boxel-host/commands/listing-create';
+import OpenCreateListingModalCommand from '@cardstack/boxel-host/commands/open-create-listing-modal';
 import OpenInInteractModeCommand from '@cardstack/boxel-host/commands/open-in-interact-mode';
 import PopulateWithSampleDataCommand from '@cardstack/boxel-host/commands/populate-with-sample-data';
 import ShowCardCommand from '@cardstack/boxel-host/commands/show-card';
@@ -165,9 +165,9 @@ export function getDefaultCardMenuItems(
         if (!targetRealm) {
           throw new Error('Unable to determine target realm from card');
         }
-        await new ListingCreateCommand(params.commandContext).execute({
-          openCardId: cardId,
+        await new OpenCreateListingModalCommand(params.commandContext).execute({
           codeRef,
+          openCardId: cardId,
           targetRealm,
         });
       },

packages/host/app/commands/index.ts

@@ -37,6 +37,7 @@ import * as ListingUpdateSpecsCommandModule from './listing-update-specs';
 import * as ListingUseCommandModule from './listing-use';
 import * as OneShotLlmRequestCommandModule from './one-shot-llm-request';
 import * as OpenAiAssistantRoomCommandModule from './open-ai-assistant-room';
+import * as OpenCreateListingModalCommandModule from './open-create-listing-modal';
 import * as OpenInInteractModeModule from './open-in-interact-mode';
 import * as OpenWorkspaceCommandModule from './open-workspace';
 import * as PatchCardInstanceCommandModule from './patch-card-instance';
@@ -256,6 +257,10 @@ export function shimHostCommands(virtualNetwork: VirtualNetwork) {
     '@cardstack/boxel-host/commands/open-ai-assistant-room',
     OpenAiAssistantRoomCommandModule,
   );
+  virtualNetwork.shimModule(
+    '@cardstack/boxel-host/commands/open-create-listing-modal',
+    OpenCreateListingModalCommandModule,
+  );
   virtualNetwork.shimModule(
     '@cardstack/boxel-host/commands/open-workspace',
     OpenWorkspaceCommandModule,
@@ -404,6 +409,7 @@ export const HostCommandClasses: (typeof HostBaseCommand<any, any>)[] = [
   ListingUseCommandModule.default,
   OneShotLlmRequestCommandModule.default,
   OpenAiAssistantRoomCommandModule.default,
+  OpenCreateListingModalCommandModule.default,
   OpenInInteractModeModule.default,
   OpenWorkspaceCommandModule.default,
   GenerateThemeExampleCommandModule.default,

packages/host/app/commands/listing-create.ts

@@ -149,7 +149,6 @@ export default class ListingCreateCommand extends HostBaseCommand<
     if (!listingId) {
       throw new Error('Failed to create listing card (no localId)');
     }
-    await this.operatorModeStateService.openCardInInteractMode(listingId);
 
     const commandModule = await this.loadCommandModule();
     const listingCard = listing as CardAPI.CardDef; // ensure correct type

packages/host/app/commands/open-create-listing-modal.ts

@@ -0,0 +1,33 @@
+import { service } from '@ember/service';
+
+import type * as BaseCommandModule from 'https://cardstack.com/base/command';
+
+import HostBaseCommand from '../lib/host-base-command';
+
+import type OperatorModeStateService from '../services/operator-mode-state-service';
+
+export default class OpenCreateListingModalCommand extends HostBaseCommand<
+  typeof BaseCommandModule.ListingCreateInput
+> {
+  @service declare private operatorModeStateService: OperatorModeStateService;
+
+  description = 'Open create listing confirmation modal';
+
+  async getInputType() {
+    let commandModule = await this.loadCommandModule();
+    const { ListingCreateInput } = commandModule;
+    return ListingCreateInput;
+  }
+
+  requireInputFields = ['codeRef', 'targetRealm'];
+
+  protected async run(
+    input: BaseCommandModule.ListingCreateInput,
+  ): Promise<undefined> {
+    this.operatorModeStateService.openCreateListingModal({
+      codeRef: input.codeRef,
+      targetRealm: input.targetRealm,
+      openCardId: input.openCardId,
+    });
+  }
+}

packages/host/app/components/operator-mode/container.gts

@@ -41,6 +41,7 @@ import PrerenderedCardSearch from '../prerendered-card-search';
 import { Submodes } from '../submode-switcher';
 
 import ChooseFileModal from './choose-file-modal';
+import CreateListingModal from './create-listing-modal';
 
 import type CardService from '../../services/card-service';
 import type CommandService from '../../services/command-service';
@@ -143,6 +144,7 @@ export default class OperatorModeContainer extends Component<Signature> {
   <template>
     <div class='operator-mode'>
       <ChooseFileModal />
+      <CreateListingModal />
       <CardCatalogModal />
       <FromElseWhere @name='modal-elsewhere' />