use create boxel spec button inside of accordion

cardstack · Jan 8, 2025 · a4cdd61 · a4cdd61
1 parent 7a7b936
commit a4cdd61
Showing 1 changed file with 17 additions and 21 deletions.
diff --git a/packages/host/app/components/operator-mode/code-submode/boxel-spec-preview.gts b/packages/host/app/components/operator-mode/code-submode/boxel-spec-preview.gts
@@ -3,7 +3,6 @@ import { fn } from '@ember/helper';
 import { on } from '@ember/modifier';
 import { action } from '@ember/object';
 import { service } from '@ember/service';
-import { htmlSafe } from '@ember/template';
 import GlimmerComponent from '@glimmer/component';
 
 import { tracked } from '@glimmer/tracking';
@@ -49,15 +48,16 @@ interface Signature {
   };
   Blocks: {
     default: [
-      WithBoundArgs<typeof BoxelSpecPreviewTitle, 'showCreateBoxelSpecIntent'>,
+      WithBoundArgs<
+        typeof BoxelSpecPreviewTitle,
+        'showCreateBoxelSpecIntent' | 'createBoxelSpec' | 'isCreateModalShown'
+      >,
       WithBoundArgs<
         typeof BoxelSpecPreviewContent,
         | 'showCreateBoxelSpecIntent'
         | 'boxelSpecInstances'
         | 'selectedInstance'
-        | 'createBoxelSpec'
         | 'selectBoxelSpec'
-        | 'isCreateModalShown'
       >,
     ];
   };
@@ -66,19 +66,24 @@ interface Signature {
 interface TitleSignature {
   Args: {
     showCreateBoxelSpecIntent: boolean;
+    createBoxelSpec: () => void;
+    isCreateModalShown: boolean;
   };
 }
 
-function htmlSafeColor(color?: string) {
-  return htmlSafe(`background-color: ${color || ''}`);
-}
-
 const BoxelSpecPreviewTitle: TemplateOnlyComponent<TitleSignature> = <template>
   Boxel Specification
 
   <span class='has-boxel-spec' data-test-has-boxel-spec>
     {{#if @showCreateBoxelSpecIntent}}
-      <Pill style={{htmlSafeColor 'orange'}}>No Boxel Spec</Pill>
+      <BoxelButton
+        @kind='primary'
+        @size='small'
+        @disabled={{@isCreateModalShown}}
+        {{on 'click' @createBoxelSpec}}
+      >
+        Create
+      </BoxelButton>
     {{/if}}
   </span>
 
@@ -96,12 +101,10 @@ const BoxelSpecPreviewTitle: TemplateOnlyComponent<TitleSignature> = <template>
 interface ContentSignature {
   Element: HTMLDivElement;
   Args: {
-    showCreateBoxelSpecIntent: boolean;
-    isCreateModalShown: boolean;
     boxelSpecInstances: CatalogEntry[];
     selectedInstance: CatalogEntry | null;
-    createBoxelSpec: () => void;
     selectBoxelSpec: (boxelSpec: CatalogEntry) => void;
+    showCreateBoxelSpecIntent: boolean;
   };
 }
 
@@ -112,13 +115,6 @@ const BoxelSpecPreviewContent: TemplateOnlyComponent<ContentSignature> =
         <div class='create-boxel-spec-intent-message'>
           Create a Boxel Specification to be able to create new instances
         </div>
-        <BoxelButton
-          @kind='primary'
-          disabled={{@isCreateModalShown}}
-          {{on 'click' @createBoxelSpec}}
-        >
-          Create Boxel Spec
-        </BoxelButton>
       {{else}}
         <div class='boxel-spec-selector'>
           <RadioInput
@@ -250,15 +246,15 @@ export default class BoxelSpecPreview extends GlimmerComponent<Signature> {
         (component
           BoxelSpecPreviewTitle
           showCreateBoxelSpecIntent=this.showCreateBoxelSpecIntent
+          createBoxelSpec=this.createBoxelSpec
+          isCreateModalShown=@isCreateModalShown
         )
         (component
           BoxelSpecPreviewContent
           showCreateBoxelSpecIntent=this.showCreateBoxelSpecIntent
           boxelSpecInstances=this.boxelSpecInstances
           selectedInstance=this.selectedInstance
-          createBoxelSpec=this.createBoxelSpec
           selectBoxelSpec=this.selectBoxelSpec
-          isCreateModalShown=@isCreateModalShown
         )
       }}
     {{/if}}