refactor: 💡 convert message component to nested structure

addons/rose/addon/components/rose/message.js

@@ -1,7 +0,0 @@
-import Component from '@ember/component';
-import layout from '../../templates/components/rose/message';
-
-export default Component.extend({
-  layout,
-  tagName: '',
-});

addons/rose/addon/components/rose/message/index.js

@@ -0,0 +1,3 @@
+import Component from '@glimmer/component';
+
+export default class RoseMessageComponent extends Component {}

ui/core/app/components/error/message.hbs

@@ -1,6 +1,6 @@
 <Rose::Message
   @title={{t (concat "errors." this.messageCode ".title")}}
-  @subtitle={{concat (t "errors.generic.title") " " this.status}}
+  @subtitle={{concat (t "errors.generic.title") " " @status}}
   @icon={{this.icon}}
 as |message|>
   <message.description>{{t (concat "errors." this.messageCode ".description")}}</message.description>

ui/core/app/components/error/message.js

@@ -1,4 +1,4 @@
-import Message from 'rose/components/rose/message';
+import MessageComponent from 'rose/components/rose/message';
 import { computed } from '@ember/object';
 
 /*
@@ -17,16 +17,16 @@ import { computed } from '@ember/object';
 
 const statuses = ['401', '403', '404', '500'];
 
-export default class ErrorMessageComponent extends Message {
+export default class ErrorMessageComponent extends MessageComponent {
   // =methods
 
   /**
    * Returns an icon for error status.
    * @return {string}
    */
-  @computed('status')
+  @computed('args.status')
   get icon() {
-    switch (this.status) {
+    switch (this.args.status) {
       case '401':
       case '403':
         return 'disabled';
@@ -51,9 +51,9 @@ export default class ErrorMessageComponent extends Message {
    * isn't part of predefined statuses.
    * @return {string}
    */
-  @computed('status')
+  @computed('args.status')
   get messageCode() {
-    let messageCode = this.status;
+    let messageCode = this.args.status;
     if(!statuses.includes(messageCode)) messageCode = 'unknown';
     return messageCode;
   }