Prettier. Add types. Make checkmark icon smaller

src/shared/chat/templates/message-text.js

@@ -2,19 +2,33 @@ import { __ } from 'i18n/index.js';
 import { getOOBURLMarkup } from 'utils/html.js';
 import { html } from 'lit';
 
-const tplEditedIcon = (el) => {
+/**
+ * @param {import('../message').default} el
+ */
+function tplEditedIcon(el) {
     const i18n_edited = __('This message has been edited');
-    return html`<converse-icon title="${ i18n_edited }" class="fa fa-edit chat-msg__edit-modal" @click=${el.showMessageVersionsModal} size="1em"></converse-icon>`;
+    return html`<converse-icon
+        title="${i18n_edited}"
+        class="fa fa-edit chat-msg__edit-modal"
+        @click=${el.showMessageVersionsModal}
+        size="1em"
+    ></converse-icon>`;
 }
 
-const tplCheckmark = () => {
-    return html`<converse-icon size="1em" color="var(--chat-color)" class="fa fa-check chat-msg__receipt"></converse-icon>`
+function tplCheckmark() {
+    return html`<converse-icon
+        size="0.75em"
+        color="var(--chat-color)"
+        class="fa fa-check chat-msg__receipt"
+    ></converse-icon>`;
 }
 
-
+/**
+ * @param {import('../message').default} el
+ */
 export default (el) => {
     const i18n_show = __('Show more');
-    const is_groupchat_message = (el.model.get('type') === 'groupchat');
+    const is_groupchat_message = el.model.get('type') === 'groupchat';
     const i18n_show_less = __('Show less');
     const error_text = el.model.get('error_text') || el.model.get('error');
     const i18n_error = `${__('Message delivery failed.')}\n${error_text}`;
@@ -23,30 +37,39 @@ export default (el) => {
         <div class="chat-msg__spoiler-hint">
             <span class="spoiler-hint">${el.model.get('spoiler_hint')}</span>
             <a class="badge badge-info spoiler-toggle" href="#" @click=${el.toggleSpoilerMessage}>
-                <converse-icon size="1em" color="var(--background-color)" class="fa ${el.model.get('is_spoiler_visible') ? 'fa-eye-slash' : 'fa-eye'}"></converse-icon>
-                ${ el.model.get('is_spoiler_visible') ? i18n_show_less : i18n_show }
+                <converse-icon
+                    size="1em"
+                    color="var(--background-color)"
+                    class="fa ${el.model.get('is_spoiler_visible') ? 'fa-eye-slash' : 'fa-eye'}"
+                ></converse-icon>
+                ${el.model.get('is_spoiler_visible') ? i18n_show_less : i18n_show}
             </a>
         </div>
     `;
 
-    const spoiler_classes = el.model.get('is_spoiler') ? `spoiler ${el.model.get('is_spoiler_visible') ? '' : 'hidden'}` : '';
+    const spoiler_classes = el.model.get('is_spoiler')
+        ? `spoiler ${el.model.get('is_spoiler_visible') ? '' : 'hidden'}`
+        : '';
     const text = el.model.getMessageText();
     const show_oob = el.model.get('oob_url') && text !== el.model.get('oob_url');
 
     return html`
-        ${ el.model.get('is_spoiler') ? tplSpoilerHint : '' }
-        ${ el.model.get('subject') ? html`<div class="chat-msg__subject">${el.model.get('subject')}</div>` : '' }
+        ${el.model.get('is_spoiler') ? tplSpoilerHint : ''}
+        ${el.model.get('subject') ? html`<div class="chat-msg__subject">${el.model.get('subject')}</div>` : ''}
         <span class="chat-msg__body--wrapper ${error_text ? 'error' : ''}">
             <converse-chat-message-body
-                class="chat-msg__text ${el.model.get('is_only_emojis') ? 'chat-msg__text--larger' : ''} ${spoiler_classes}"
+                class="chat-msg__text ${el.model.get('is_only_emojis')
+                    ? 'chat-msg__text--larger'
+                    : ''} ${spoiler_classes}"
                 .model="${el.model}"
                 hide_url_previews=${el.model.get('hide_url_previews')}
                 ?is_me_message=${el.model.isMeCommand()}
-                text="${text}"></converse-chat-message-body>
-            ${ (el.model.get('received') && !el.model.isMeCommand() && !is_groupchat_message) ? tplCheckmark() : '' }
-            ${ (el.model.get('edited')) ? tplEditedIcon(el) : '' }
+                text="${text}"
+            ></converse-chat-message-body>
+            ${el.model.get('received') && !el.model.isMeCommand() && !is_groupchat_message ? tplCheckmark() : ''}
+            ${el.model.get('edited') ? tplEditedIcon(el) : ''}
         </span>
-        ${ show_oob ? html`<div class="chat-msg__media">${getOOBURLMarkup(el.model.get('oob_url'))}</div>` : '' }
-        ${ error_text ? html`<div class="chat-msg__error">${ i18n_error }</div>` : '' }
+        ${show_oob ? html`<div class="chat-msg__media">${getOOBURLMarkup(el.model.get('oob_url'))}</div>` : ''}
+        ${error_text ? html`<div class="chat-msg__error">${i18n_error}</div>` : ''}
     `;
-}
+};

src/shared/chat/templates/message.js

@@ -1,11 +1,11 @@
-import 'shared/avatar/avatar.js';
-import 'shared/chat/unfurl.js';
-import { __ } from 'i18n';
 import { html } from 'lit';
 import { api, converse } from '@converse/headless';
 import { shouldRenderMediaFromURL } from '../../../utils/url.js';
 import { getAuthorStyle } from '../../../utils/color.js';
 import { getHats } from '../utils.js';
+import { __ } from 'i18n';
+import 'shared/avatar/avatar.js';
+import 'shared/chat/unfurl.js';
 
 const { dayjs } = converse.env;
 

src/types/shared/chat/templates/message-text.d.ts

@@ -1,3 +1,3 @@
-declare function _default(el: any): import("lit").TemplateResult<1>;
+declare function _default(el: import("../message").default): import("lit").TemplateResult<1>;
 export default _default;
 //# sourceMappingURL=message-text.d.ts.map