do we need to manipulate z-index?? (#1166)

* do we need to manipulate z-index??

* fix lint

* wrong import style

* remove styleString which is unused

* Remove zIndex data/template argument all together

* remove cssVar and style attribute ALL TOGETHER. Assumes the modal z-index=15 (not 20)

* Reduce chat-btn z-index to be below overlay which is below the modal

Author: tintinthong

packages/boxel-ui/addon/src/components/modal/index.gts

@@ -3,7 +3,7 @@ import Component from '@glimmer/component';
 import setBodyClass from 'ember-set-body-class/helpers/set-body-class';
 
 import cssVar from '../../helpers/css-var.ts';
-import { bool, eq } from '../../helpers/truth-helpers.ts';
+import { eq } from '../../helpers/truth-helpers.ts';
 
 interface Signature {
   Args: {
@@ -16,7 +16,6 @@ interface Signature {
     layer?: 'urgent';
     onClose: () => void;
     size?: 'x-small' | 'small' | 'medium' | 'large' | 'full-screen';
-    zIndex?: number;
   };
   Blocks: {
     default: [];
@@ -37,13 +36,9 @@ export default class Modal extends Component<Signature> {
       <div
         style={{cssVar
           boxel-modal-z-index=(if
-            (bool @zIndex)
-            @zIndex
-            (if
-              (eq @layer 'urgent')
-              'var(--boxel-layer-modal-urgent)'
-              'var(--boxel-layer-modal-default)'
-            )
+            (eq @layer 'urgent')
+            'var(--boxel-layer-modal-urgent)'
+            'var(--boxel-layer-modal-default)'
           )
         }}
       >

packages/host/app/components/card-catalog/modal.gts

@@ -5,7 +5,6 @@ import { action } from '@ember/object';
 import type Owner from '@ember/owner';
 import { service } from '@ember/service';
 import Component from '@glimmer/component';
-import { tracked } from '@glimmer/tracking';
 
 import { restartableTask, task } from 'ember-concurrency';
 import focusTrap from 'ember-focus-trap/modifiers/focus-trap';
@@ -94,7 +93,6 @@ export default class CardCatalogModal extends Component<Signature> {
         class='card-catalog-modal'
         @title={{this.state.chooseCardTitle}}
         @onClose={{fn this.pick undefined}}
-        @zIndex={{this.zIndex}}
         {{focusTrap
           isActive=(not this.state.dismissModal)
           focusTrapOptions=(hash
@@ -228,7 +226,6 @@ export default class CardCatalogModal extends Component<Signature> {
 
   stateStack: State[] = new TrackedArray<State>();
   stateId = 0;
-  @tracked zIndex = 20;
   @service declare cardService: CardService;
   @service declare loaderService: LoaderService;
   @service declare operatorModeStateService: OperatorModeStateService;
@@ -305,7 +302,6 @@ export default class CardCatalogModal extends Component<Signature> {
       createNewCard?: CreateNewCard;
     },
   ): Promise<undefined | T> {
-    this.zIndex++;
     return (await this._chooseCard.perform(
       {
         // default to title sort so that we can maintain stability in

packages/host/app/components/create-card-modal.gts

@@ -34,7 +34,6 @@ export default class CreateCardModal extends Component {
         <ModalContainer
           @title='Create New Card'
           @onClose={{fn this.save undefined}}
-          @zIndex={{this.zIndex}}
           data-test-create-new-card={{card.constructor.name}}
         >
           <:content>
@@ -52,7 +51,6 @@ export default class CreateCardModal extends Component {
         deferred: Deferred<CardDef | undefined>;
       }
     | undefined = undefined;
-  @tracked zIndex = 20;
 
   constructor(owner: Owner, args: {}) {
     super(owner, args);
@@ -70,7 +68,6 @@ export default class CreateCardModal extends Component {
       doc?: LooseSingleCardDocument;
     },
   ): Promise<undefined | T> {
-    this.zIndex++;
     return (await this._create.perform(ref, relativeTo, opts)) as T | undefined;
   }
 

packages/host/app/components/modal-container.gts

@@ -1,5 +1,4 @@
 import { on } from '@ember/modifier';
-import { htmlSafe } from '@ember/template';
 import Component from '@glimmer/component';
 
 import {
@@ -16,7 +15,6 @@ interface Signature {
   Args: {
     title: string;
     onClose: () => void;
-    zIndex?: number;
     size?: 'small' | 'medium' | 'large';
     centered?: boolean;
     cardContainerClass?: string;
@@ -44,8 +42,6 @@ export default class ModalContainer extends Component<Signature> {
       @isOpen={{this.isOpen}}
       @onClose={{@onClose}}
       @centered={{@centered}}
-      @zIndex={{@zIndex}}
-      style={{this.styleString}}
       ...attributes
     >
       <CardContainer
@@ -162,8 +158,4 @@ export default class ModalContainer extends Component<Signature> {
       }
     </style>
   </template>
-
-  get styleString() {
-    return htmlSafe(`z-index: ${this.args.zIndex ?? 20}`);
-  }
 }

packages/host/app/components/operator-mode/submode-layout.gts

@@ -256,7 +256,7 @@ export default class SubmodeLayout extends Component<Signature> {
         margin-right: 0;
         background-color: var(--boxel-ai-purple);
         box-shadow: var(--boxel-deep-box-shadow);
-        z-index: calc(var(--boxel-modal-z-index) - 1);
+        z-index: calc(var(--boxel-modal-z-index) - 2);
       }
 
       .ai-assistant-panel {