clean up

cardstack · Apr 5, 2024 · 955a420 · 955a420
1 parent 6ba07d1
commit 955a420
Showing 1 changed file with 90 additions and 88 deletions.
diff --git a/packages/host/app/components/card-pill.gts b/packages/host/app/components/card-pill.gts
@@ -3,7 +3,7 @@ import { on } from '@ember/modifier';
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 
-import { modifier } from 'ember-modifier';
+import { Modifier, modifier } from 'ember-modifier';
 
 import { IconButton, Tooltip } from '@cardstack/boxel-ui/components';
 import { cn } from '@cardstack/boxel-ui/helpers';
@@ -15,6 +15,16 @@ import Pill from '@cardstack/host/components/pill';
 
 import { type CardDef } from 'https://cardstack.com/base/card-api';
 
+interface BasicCardPillSignature {
+  Element: HTMLDivElement;
+  Args: {
+    card: CardDef;
+    isAutoAttachedCard?: boolean;
+    removeCard?: (card: CardDef) => void;
+    displayTooltip: Modifier;
+  };
+}
+
 interface CardPillSignature {
   Element: HTMLDivElement;
   Args: {
@@ -24,101 +34,46 @@ interface CardPillSignature {
   };
 }
 
-export default class CardPill extends Component<CardPillSignature> {
+class BasicCardPill extends Component<BasicCardPillSignature> {
   @tracked isTooltipDisplayed = false;
 
   get component() {
     return this.args.card.constructor.getComponent(this.args.card, 'atom');
   }
 
-  private displayTooltip = modifier((element: HTMLElement) => {
-    if (
-      element &&
-      element.firstElementChild &&
-      element.firstElementChild.scrollWidth >
-        element.firstElementChild.clientWidth
-    ) {
-      this.isTooltipDisplayed = true;
-    }
-  });
-
   <template>
-    {{#if this.isTooltipDisplayed}}
-      <Tooltip @placement='top'>
-        <:trigger>
-          <Pill
-            @inert={{true}}
-            class={{cn 'card-pill' is-autoattached=@isAutoAttachedCard}}
-            data-test-attached-card={{@card.id}}
-            data-test-autoattached-card={{@isAutoAttachedCard}}
-          >
-            <:icon>
-              <RealmInfoProvider @fileURL={{@card.id}}>
-                <:ready as |realmInfo|>
-                  <RealmIcon
-                    @realmIconURL={{realmInfo.iconURL}}
-                    @realmName={{realmInfo.name}}
-                    width='18'
-                    height='18'
-                  />
-                </:ready>
-              </RealmInfoProvider>
-            </:icon>
-            <:default>
-              <div class='card-content'>
-                <this.component @displayContainer={{false}} />
-              </div>
-              {{#if @removeCard}}
-                <IconButton
-                  class='remove-button'
-                  @icon={{IconX}}
-                  {{on 'click' (fn @removeCard @card)}}
-                  data-test-remove-card-btn
-                />
-              {{/if}}
-            </:default>
-          </Pill>
-        </:trigger>
-        <:content>
-          <div class='card-pill-tooltip'>
-            <this.component @displayContainer={{false}} />
-          </div>
-        </:content>
-      </Tooltip>
-    {{else}}
-      <Pill
-        @inert={{true}}
-        class={{cn 'card-pill' is-autoattached=@isAutoAttachedCard}}
-        data-test-attached-card={{@card.id}}
-        data-test-autoattached-card={{@isAutoAttachedCard}}
-      >
-        <:icon>
-          <RealmInfoProvider @fileURL={{@card.id}}>
-            <:ready as |realmInfo|>
-              <RealmIcon
-                @realmIconURL={{realmInfo.iconURL}}
-                @realmName={{realmInfo.name}}
-                width='18'
-                height='18'
-              />
-            </:ready>
-          </RealmInfoProvider>
-        </:icon>
-        <:default>
-          <div {{this.displayTooltip}} class='card-content'>
-            <this.component @displayContainer={{false}} />
-          </div>
-          {{#if @removeCard}}
-            <IconButton
-              class='remove-button'
-              @icon={{IconX}}
-              {{on 'click' (fn @removeCard @card)}}
-              data-test-remove-card-btn
+    <Pill
+      @inert={{true}}
+      class={{cn 'card-pill' is-autoattached=@isAutoAttachedCard}}
+      data-test-attached-card={{@card.id}}
+      data-test-autoattached-card={{@isAutoAttachedCard}}
+    >
+      <:icon>
+        <RealmInfoProvider @fileURL={{@card.id}}>
+          <:ready as |realmInfo|>
+            <RealmIcon
+              @realmIconURL={{realmInfo.iconURL}}
+              @realmName={{realmInfo.name}}
+              width='18'
+              height='18'
             />
-          {{/if}}
-        </:default>
-      </Pill>
-    {{/if}}
+          </:ready>
+        </RealmInfoProvider>
+      </:icon>
+      <:default>
+        <div {{@displayTooltip}} class='card-content'>
+          <this.component @displayContainer={{false}} />
+        </div>
+        {{#if @removeCard}}
+          <IconButton
+            class='remove-button'
+            @icon={{IconX}}
+            {{on 'click' (fn @removeCard @card)}}
+            data-test-remove-card-btn
+          />
+        {{/if}}
+      </:default>
+    </Pill>
     <style>
       .remove-button {
         --boxel-icon-button-width: 25px;
@@ -157,6 +112,53 @@ export default class CardPill extends Component<CardPillSignature> {
         overflow: hidden;
         text-overflow: ellipsis;
       }
+    </style>
+  </template>
+}
+
+export default class CardPill extends Component<CardPillSignature> {
+  @tracked isTooltipDisplayed = false;
+
+  get component() {
+    return this.args.card.constructor.getComponent(this.args.card, 'atom');
+  }
+
+  private displayTooltip = modifier((element: HTMLElement) => {
+    if (
+      element &&
+      element.firstElementChild &&
+      element.firstElementChild.scrollWidth >
+        element.firstElementChild.clientWidth
+    ) {
+      this.isTooltipDisplayed = true;
+    }
+  });
+
+  <template>
+    {{#if this.isTooltipDisplayed}}
+      <Tooltip @placement='top'>
+        <:trigger>
+          <BasicCardPill
+            @card={{@card}}
+            @isAutoAttachedCard={{@isAutoAttachedCard}}
+            @removeCard={{@removeCard}}
+          />
+        </:trigger>
+        <:content>
+          <div class='card-pill-tooltip'>
+            <this.component @displayContainer={{false}} />
+          </div>
+        </:content>
+      </Tooltip>
+    {{else}}
+      <BasicCardPill
+        @card={{@card}}
+        @isAutoAttachedCard={{@isAutoAttachedCard}}
+        @removeCard={{@removeCard}}
+        @displayTooltip={{this.displayTooltip}}
+      />
+    {{/if}}
+    <style>
       .card-pill-tooltip :deep(.atom-format) {
         font: 700 var(--boxel-font-xs);
         background-color: rgb(0 0 0 / 80%);