Merge branch 'main' into cs-7598-ai-assistant-chat-should-automatical…

…ly-display-return-value
cardstack · Jan 7, 2025 · ad7ee27 · ad7ee27
2 parents 8857304 + fcbf10a
commit ad7ee27
Show file tree

Hide file tree

Showing 62 changed files with 1,816 additions and 577 deletions.
diff --git a/QUICKSTART.md b/QUICKSTART.md
@@ -107,7 +107,5 @@ If you experience issues, you can start from scratch by running this command
 
 ```
 pnpm clear-caches
-rm -rf ./packages/matrix/synapse-data
-docker ps -a --format '{{.Names}}' | grep -E 'boxel-smtp|boxel-synapse|synapse-admin' | xargs -r docker stop
-docker ps -a --format '{{.Names}}' | grep -E 'boxel-smtp|boxel-synapse|synapse-admin' | xargs -r docker rm -v
+pnpm full-reset
 ```
diff --git a/packages/base/contains-many-component.gts b/packages/base/contains-many-component.gts
@@ -70,6 +70,8 @@ class ContainsManyEditor extends GlimmerComponent<ContainsManyEditorSignature> {
           <AddButton
             class='add-new'
             @variant='full-width'
+            @iconWidth='12px'
+            @iconHeight='12px'
             {{on 'click' this.add}}
             data-test-add-new
           >
@@ -83,6 +85,10 @@ class ContainsManyEditor extends GlimmerComponent<ContainsManyEditorSignature> {
       .contains-many-editor {
         --remove-icon-size: var(--boxel-icon-lg);
       }
+      .contains-many-editor
+        :deep(.compound-field.edit-format .add-button--full-width) {
+        border: var(--boxel-border);
+      }
       .list {
         list-style: none;
         padding: 0;
@@ -208,9 +214,10 @@ export function getContainsManyComponent({
                 {{unless arrayField.children.length "empty"}}'
               data-test-plural-view={{field.fieldType}}
               data-test-plural-view-format={{effectiveFormat}}
+              ...attributes
             >
               {{#each (getComponents) as |Item i|}}
-                <div data-test-plural-view-item={{i}}>
+                <div class='containsMany-item' data-test-plural-view-item={{i}}>
                   <Item
                     @format={{getPluralChildFormat effectiveFormat model}}
                   />
@@ -221,11 +228,19 @@ export function getContainsManyComponent({
         {{/if}}
       </DefaultFormatsConsumer>
       <style scoped>
-        .containsMany-field.edit-format {
-          padding: var(--boxel-sp-sm);
-          background-color: var(--boxel-100);
-          border: none !important;
-          border-radius: var(--boxel-border-radius);
+        @layer {
+          .containsMany-field.edit-format {
+            padding: var(--boxel-sp-sm);
+            background-color: var(--boxel-100);
+            border: none !important;
+            border-radius: var(--boxel-border-radius);
+          }
+          .containsMany-field.atom-format {
+            display: contents;
+          }
+          .containsMany-field.atom-format > .containsMany-item {
+            display: inline;
+          }
         }
       </style>
     </template>;

diff --git a/packages/base/default-templates/atom.gts b/packages/base/default-templates/atom.gts
@@ -18,6 +18,16 @@ export default class DefaultAtomViewTemplate extends GlimmerComponent<{
       : `Untitled ${this.args.model.constructor.displayName}`;
   }
   <template>
-    {{this.text}}
+    <span class='atom-default-template'>
+      {{this.text}}
+    </span>
+    <style scoped>
+      @layer {
+        .atom-default-template {
+          font: 600 var(--boxel-font-sm);
+          letter-spacing: var(--boxel-lsp-xs);
+        }
+      }
+    </style>
   </template>
 }
diff --git a/packages/base/default-templates/isolated-and-edit.gts b/packages/base/default-templates/isolated-and-edit.gts
@@ -43,14 +43,19 @@ export default class DefaultCardDefTemplate extends GlimmerComponent<{
       }
       /* this aligns edit fields with containsMany, linksTo, and linksToMany fields */
       .default-card-template.edit
-        > .boxel-field
         > :deep(
-          *:nth-child(2):not(.links-to-many-editor):not(
-              .contains-many-editor
-            ):not(.links-to-editor)
+          .boxel-field
+            > .content
+            > *:not(.links-to-many-editor):not(.contains-many-editor):not(
+              .links-to-editor
+            )
         ) {
         padding-right: var(--boxel-icon-lg);
       }
+      .default-card-template.edit
+        > :deep(.boxel-field > .content > *:not(.links-to-many-editor)) {
+        padding-left: var(--boxel-icon-lg);
+      }
     </style>
   </template>
 }
diff --git a/packages/base/field-component.gts b/packages/base/field-component.gts
@@ -247,6 +247,7 @@ export function getBoxComponent(
                   @value={{defaultFieldFormats effectiveFormats.fieldDef}}
                 >
                   <div
+                    class='compound-field {{effectiveFormats.fieldDef}}-format'
                     data-test-compound-field-format={{effectiveFormats.fieldDef}}
                     data-test-compound-field-component
                     {{! @glint-ignore  Argument of type 'unknown' is not assignable to parameter of type 'Element'}}
@@ -323,13 +324,20 @@ export function getBoxComponent(
         overflow: hidden;
       }
 
-      /*
-        TODO: regarding the atom format styling below, we probably want to refactor to move
-        any styles that effect the inside of the card boundary into the CardDef's atom template
-      */
+      .field-component-card.atom-format.display-container-false {
+        display: contents;
+      }
       .field-component-card.atom-format.display-container-true {
-        padding: 4px var(--boxel-sp-sm);
-        background-color: var(--boxel-light);
+        display: inline-block;
+        width: auto;
+        height: auto;
+        padding: var(--boxel-sp-4xs) var(--boxel-sp-xs);
+      }
+      .field-component-card.atom-format > :deep(*) {
+        vertical-align: middle;
+      }
+      .compound-field.atom-format {
+        display: inline;
       }
     </style>
   </template>;

diff --git a/packages/base/links-to-editor.gts b/packages/base/links-to-editor.gts
@@ -86,10 +86,9 @@ export class LinksToEditor extends GlimmerComponent<Signature> {
     </PermissionsConsumer>
     <style scoped>
       .links-to-editor {
-        --remove-icon-size: var(--boxel-icon-lg);
         position: relative;
         display: grid;
-        grid-template-columns: 1fr var(--remove-icon-size);
+        grid-template-columns: 1fr max-content;
       }
       .links-to-editor > :deep(.boxel-card-container.embedded-format) {
         order: -1;

diff --git a/packages/base/links-to-many-component.gts b/packages/base/links-to-many-component.gts
@@ -17,7 +17,7 @@ import {
   PermissionsConsumer,
   getBoxComponent,
 } from './field-component';
-import { AddButton, IconButton } from '@cardstack/boxel-ui/components';
+import { AddButton, IconButton, Pill } from '@cardstack/boxel-ui/components';
 import {
   restartableTask,
   type EncapsulatedTaskDescriptor as Descriptor,
@@ -196,6 +196,8 @@ class LinksToManyStandardEditor extends GlimmerComponent<LinksToManyStandardEdit
         <AddButton
           class='add-new'
           @variant='full-width'
+          @iconWidth='12px'
+          @iconHeight='12px'
           {{on 'click' @add}}
           data-test-add-new
         >
@@ -283,10 +285,8 @@ class LinksToManyCompactEditor extends GlimmerComponent<LinksToManyCompactEditor
           )
           as |Item|
         }}
-          <div class='boxel-pills-container' data-test-pill-item={{i}}>
-            <div class='boxel-pill'>
-              <Item @format='atom' />
-            </div>
+          <Pill class='item-pill' data-test-pill-item={{i}}>
+            <Item @format='atom' @displayContainer={{false}} />
             <IconButton
               @variant='primary'
               @icon={{IconX}}
@@ -298,7 +298,7 @@ class LinksToManyCompactEditor extends GlimmerComponent<LinksToManyCompactEditor
               data-test-remove-card
               data-test-remove={{i}}
             />
-          </div>
+          </Pill>
         {{/let}}
       {{/each}}
       <AddButton
@@ -315,37 +315,31 @@ class LinksToManyCompactEditor extends GlimmerComponent<LinksToManyCompactEditor
     </div>
     <style scoped>
       .boxel-pills {
+        --boxel-add-button-pill-font: var(--boxel-font-sm);
         display: flex;
         flex-wrap: wrap;
-
+        gap: var(--boxel-sp-xs);
         padding: var(--boxel-sp-xs) 0 var(--boxel-sp-xs) var(--boxel-sp-sm);
+        background-color: var(--boxel-light);
         border: 1px solid var(--boxel-form-control-border-color);
         border-radius: var(--boxel-form-control-border-radius);
-        --boxel-add-button-pill-font: var(--boxel-font-sm);
-        gap: var(--boxel-sp-xs);
-      }
-      .boxel-pills-container {
-        position: relative;
-        height: fit-content;
-      }
-      .boxel-pill .atom-format.display-container-true {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        padding-right: var(--boxel-sp-lg);
-        color: var(--boxel-dark);
       }
       .remove-item-button {
-        --icon-color: var(--boxel-dark);
-        position: absolute;
-        right: 0;
-        top: 0;
-
-        width: 22px;
-        height: 100%;
-        display: flex;
+        width: 18px;
+        height: 18px;
+        display: inline-flex;
         align-items: center;
-        padding-right: var(--boxel-sp-xxs);
+      }
+      .remove-item-button:hover {
+        --icon-color: var(--boxel-600);
+        color: var(--boxel-600);
+      }
+      .item-pill :deep(.atom-default-template:hover) {
+        text-decoration: underline;
+      }
+      .item-pill:has(button:hover) {
+        color: var(--boxel-600);
+        border-color: var(--boxel-600);
       }
     </style>
   </template>
@@ -416,19 +410,22 @@ export function getLinksToManyComponent({
         {{else}}
           {{#let
             (coalesce @format defaultFormats.cardDef)
-            as |effectiveFormat|
+            (if (eq @displayContainer false) false true)
+            as |effectiveFormat displayContainer|
           }}
             <div
               class='plural-field linksToMany-field
                 {{effectiveFormat}}-effectiveFormat
-                {{unless arrayField.children.length "empty"}}'
+                {{unless arrayField.children.length "empty"}}
+                display-container-{{displayContainer}}'
               data-test-plural-view={{field.fieldType}}
               data-test-plural-view-format={{effectiveFormat}}
               ...attributes
             >
               {{#each (getComponents) as |Item i|}}
                 <Item
                   @format={{effectiveFormat}}
+                  @displayContainer={{@displayContainer}}
                   class='linksToMany-item'
                   data-test-plural-view-item={{i}}
                 />
@@ -438,20 +435,22 @@ export function getLinksToManyComponent({
         {{/if}}
       </DefaultFormatsConsumer>
       <style scoped>
-        .linksToMany-field.fitted-effectiveFormat
-          > .linksToMany-item
-          + .linksToMany-item,
-        .linksToMany-field.embedded-effectiveFormat
-          > .linksToMany-item
-          + .linksToMany-item {
-          margin-top: var(--boxel-sp);
-        }
-        .linksToMany-field.atom-effectiveFormat {
-          display: flex;
-          gap: var(--boxel-sp-sm);
-          padding: var(--boxel-sp-sm);
-          border: var(--boxel-border);
-          border-radius: var(--boxel-border-radius);
+        @layer {
+          .linksToMany-field.fitted-effectiveFormat
+            > .linksToMany-item
+            + .linksToMany-item,
+          .linksToMany-field.embedded-effectiveFormat
+            > .linksToMany-item
+            + .linksToMany-item {
+            margin-top: var(--boxel-sp);
+          }
+          .linksToMany-field.atom-effectiveFormat.display-container-false {
+            display: contents;
+          }
+          .linksToMany-field.atom-effectiveFormat.display-container-true {
+            display: inline-flex;
+            gap: var(--boxel-sp-sm);
+          }
         }
       </style>
     </template>

diff --git a/packages/experiments-realm/Account/77976251-6bc8-4a8c-972f-f9d588e8434d.json b/packages/experiments-realm/Account/77976251-6bc8-4a8c-972f-f9d588e8434d.json
@@ -26,13 +26,24 @@
         },
         "poBoxNumber": null
       },
+      "urgencyTag": {
+        "index": 3,
+        "label": "Expiring Soon",
+        "value": "expiring-soon",
+        "buttonText": "Create Account",
+        "color": null,
+        "colorScheme": {
+          "foregroundColor": "#FBC02D",
+          "backgroundColor": "#FFF9C4"
+        }
+      },
       "description": null,
       "thumbnailURL": null
     },
     "relationships": {
       "company": {
         "links": {
-          "self": null
+          "self": "../Company/141f3e15-cfd5-4b61-bd4c-37ea31dbeeab"
         }
       },
       "primaryContact": {
@@ -53,4 +64,4 @@
       }
     }
   }
-}
+}
diff --git a/packages/experiments-realm/Account/bf437dc3-1f96-45e5-a057-3487c6a5c2f7.json b/packages/experiments-realm/Account/bf437dc3-1f96-45e5-a057-3487c6a5c2f7.json
@@ -29,6 +29,8 @@
       "urgencyTag": {
         "index": 1,
         "label": "Renewal Due Soon",
+        "value": "renewal-due-soon",
+        "buttonText": "Create Account",
         "color": null,
         "colorScheme": {
           "foregroundColor": "#F57C00",
@@ -62,4 +64,4 @@
       }
     }
   }
-}
+}