Address feedbacks

cardstack · Jan 7, 2025 · e1bbb81 · e1bbb81
1 parent 118b6b7
commit e1bbb81
Show file tree

Hide file tree

Showing 5 changed files with 51 additions and 48 deletions.
diff --git a/packages/base/cards-grid.gts b/packages/base/cards-grid.gts
@@ -41,12 +41,11 @@ import StringField from './string';
 import { TrackedArray } from 'tracked-built-ins';
 import { MenuItem } from '@cardstack/boxel-ui/helpers';
 import LayoutGridPlusIcon from '@cardstack/boxel-icons/layout-grid-plus';
+import Captions from '@cardstack/boxel-icons/captions';
 import CardsIcon from '@cardstack/boxel-icons/cards';
 import { registerDestructor } from '@ember/destroyable';
-import GlimmerComponent from '@glimmer/component';
-import type { ComponentLike } from '@glint/template';
-import { htmlSafe } from '@ember/template';
 
+type IconComponent = typeof Captions;
 interface SortOption {
   displayName: string;
   sort: Query['sort'];
@@ -307,25 +306,22 @@ class Isolated extends Component<typeof CardsGrid> {
     </style>
   </template>
 
-  filters: {
-    displayName: string;
-    icon: ComponentLike;
-    query: any;
-  }[] = new TrackedArray([
-    {
-      displayName: 'All Cards',
-      icon: CardsIcon,
-      query: {
-        filter: {
-          not: {
-            eq: {
-              _cardType: 'Cards Grid',
+  filters: { displayName: string; icon: IconComponent | string; query: any }[] =
+    new TrackedArray([
+      {
+        displayName: 'All Cards',
+        icon: CardsIcon,
+        query: {
+          filter: {
+            not: {
+              eq: {
+                _cardType: 'Cards Grid',
+              },
             },
           },
         },
       },
-    },
-  ]);
+    ]);
 
   private viewOptions = [
     { id: 'strip', icon: IconList },
@@ -445,7 +441,7 @@ class Isolated extends Component<typeof CardsGrid> {
       const lastIndex = summary.id.lastIndexOf('/');
       this.filters.push({
         displayName: summary.attributes.displayName,
-        icon: generateIconComponent(summary.attributes.iconHTML),
+        icon: summary.attributes.iconHTML,
         query: {
           filter: {
             type: {
@@ -497,21 +493,3 @@ export class CardsGrid extends CardDef {
 function removeFileExtension(cardUrl: string) {
   return cardUrl.replace(/\.[^/.]+$/, '');
 }
-
-interface Signature {
-  Element: HTMLElement;
-}
-
-function generateIconComponent(iconHTML: string) {
-  let updatedIconHtml = iconHTML
-    .replace(/\swidth="[^"]*"/, '')
-    .replace(/\sheight="[^"]*"/, '')
-    .replace('<svg', '<svg style="width: 100%; height: 100%;"');
-  return class extends GlimmerComponent<Signature> {
-    <template>
-      <div ...attributes>
-        {{htmlSafe updatedIconHtml}}
-      </div>
-    </template>
-  };
-}
diff --git a/packages/boxel-ui/addon/src/components/filter-list/index.gts b/packages/boxel-ui/addon/src/components/filter-list/index.gts
@@ -10,11 +10,13 @@ export interface FilterListIconSignature {
 
 export type FilterListIcon = ComponentLike<FilterListIconSignature>;
 
+import { htmlSafe } from '@ember/template';
+
 import { cn, eq } from '../../helpers.ts';
 
 export type Filter = {
   displayName: string;
-  icon: FilterListIcon;
+  icon: FilterListIcon | string;
 };
 
 interface Signature {
@@ -39,9 +41,17 @@ export default class FilterList extends Component<Signature> {
           class={{cn 'filter-list__button' selected=(eq @activeFilter filter)}}
           {{on 'click' (fn this.onChanged filter)}}
           data-test-boxel-filter-list-button={{filter.displayName}}
-        ><filter.icon
-            class='filter-list__icon'
-          />{{filter.displayName}}</button>
+        >
+          {{#if (isIconString filter.icon)}}
+            {{convertSVGString
+              filter.icon
+              'filter-list__icon'
+            }}{{filter.displayName}}
+          {{else}}
+            <filter.icon
+              class='filter-list__icon'
+            />{{filter.displayName}}{{/if}}</button>
+
       {{/each}}
     </div>
     <style scoped>
@@ -71,11 +81,26 @@ export default class FilterList extends Component<Signature> {
         background: var(--boxel-300);
         border-radius: 6px;
       }
-      .filter-list__icon {
+      :global(.filter-list__icon) {
         width: var(--boxel-icon-xs);
         height: var(--boxel-icon-xs);
         vertical-align: top;
       }
     </style>
   </template>
 }
+
+function convertSVGString(svgString: string, className: string) {
+  return htmlSafe(
+    svgString
+      .replace(
+        /<svg\b([^>]*)\sclass="([^"]*)"/,
+        `<svg$1 class="$2 ${className}"`,
+      )
+      .replace(/<svg\b([^>]*)>/, `<svg$1 class="${className}">`),
+  );
+}
+
+function isIconString(icon: FilterListIcon | string): icon is string {
+  return typeof icon === 'string';
+}
diff --git a/packages/host/app/components/card-prerender.gts b/packages/host/app/components/card-prerender.gts
@@ -106,7 +106,7 @@ export default class CardPrerender extends Component {
       reader,
       indexWriter,
       renderCard: this.renderService.renderCard.bind(this.renderService),
-      render: this.renderService.render.bind(this.renderService),
+      render: this.renderService.render,
     });
     setOwner(currentRun, getOwner(this)!);
 
@@ -129,7 +129,7 @@ export default class CardPrerender extends Component {
         indexWriter,
         ignoreData: { ...ignoreData },
         renderCard: this.renderService.renderCard.bind(this.renderService),
-        render: this.renderService.render.bind(this.renderService),
+        render: this.renderService.render,
       });
       setOwner(currentRun, getOwner(this)!);
       let current = await CurrentRun.incremental(currentRun, {

diff --git a/packages/host/app/lib/current-run.ts b/packages/host/app/lib/current-run.ts
@@ -480,7 +480,7 @@ export class CurrentRun {
           }),
         ),
       );
-      iconHTML = unwrap(sanitizeHTML(await this.#render(cardTypeIcon(card))));
+      iconHTML = unwrap(sanitizeHTML(this.#render(cardTypeIcon(card))));
       cardType = Reflect.getPrototypeOf(card)?.constructor as typeof CardDef;
       let data = api.serializeCard(card, { includeComputeds: true });
       // prepare the document for index serialization

diff --git a/packages/host/app/services/render-service.ts b/packages/host/app/services/render-service.ts
@@ -59,7 +59,7 @@ interface RenderCardParams {
   componentCodeRef?: CodeRef;
 }
 export type RenderCard = (params: RenderCardParams) => Promise<string>;
-export type Render = (component: ComponentLike) => Promise<string>;
+export type Render = (component: ComponentLike) => string;
 
 const maxRenderThreshold = 10000;
 export default class RenderService extends Service {
@@ -131,14 +131,14 @@ export default class RenderService extends Service {
     return parseCardHtml(html);
   }
 
-  async render(component: ComponentLike): Promise<string> {
+  render = (component: ComponentLike): string => {
     let element = getIsolatedRenderElement(this.document);
     render(component, element, this.owner);
 
     let serializer = new Serializer(voidMap);
     let html = serializer.serialize(element);
     return parseCardHtml(html);
-  }
+  };
 
   // TODO delete me
   private async resolveField(