Address code review comments to improve ApplyButton

Author: lukemelia

packages/host/app/components/ai-assistant/apply-button/index.gts

@@ -45,6 +45,7 @@ const AiAssistantApplyButton: TemplateOnlyComponent<Signature> = <template>
           @size='small'
           class='apply-button'
           tabindex='-1'
+          disabled
           {{setCssVar boxel-button-text-color='var(--boxel-200)'}}
           data-test-apply-state='preparing'
           ...attributes
@@ -94,6 +95,9 @@ const AiAssistantApplyButton: TemplateOnlyComponent<Signature> = <template>
       border: 0;
       min-width: 74px;
     }
+    .state-indicator.preparing .apply-button:disabled {
+      opacity: 1;
+    }
     .state-indicator.preparing .apply-button:focus {
       --boxel-button-color: inherit;
       filter: none;

packages/host/app/components/ai-assistant/apply-button/usage.gts

@@ -8,10 +8,12 @@ import FreestyleUsage from 'ember-freestyle/components/freestyle/usage';
 
 import ApplyButton, { type ApplyButtonState } from './index';
 
+let noop = () => {};
+
 export default class AiAssistantApplyButtonUsage extends Component {
   @tracked state: ApplyButtonState = 'ready';
 
-  @action handleApplyButtonClick() {
+  @action cycleState() {
     switch (this.state) {
       case 'ready':
         this.state = 'applying';
@@ -37,11 +39,12 @@ export default class AiAssistantApplyButtonUsage extends Component {
         ready, applying, applied, failed, and preparing states.
       </:description>
       <:example>
-        <div class='example-container'>
-          <ApplyButton
-            @state={{this.state}}
-            {{on 'click' this.handleApplyButtonClick}}
-          />
+        <div
+          class='example-container'
+          style='--ai-bot-message-background-color: #3b394b;'
+          {{on 'click' this.cycleState}}
+        >
+          <ApplyButton @state={{this.state}} {{on 'click' noop}} />
         </div>
       </:example>
       <:api as |Args|>

packages/host/app/components/matrix/preparing-room-message-command.gts

@@ -13,8 +13,6 @@ const RoomMessageCommand: TemplateOnlyComponent<Signature> = <template>
     </div>
   </div>
 
-  {{! template-lint-disable no-whitespace-for-layout  }}
-  {{! ignore the above error because ember-template-lint complains about the whitespace in the multi-line comment below }}
   <style scoped>
     .command-button-bar {
       display: flex;