feat: don't async load picker

app/javascript/dashboard/components/widgets/WootWriter/keyboardEmojiSelector.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { shallowRef, computed, onMounted } from 'vue';
-import emojiGroups from 'shared/components/emoji/emojisGroup.json';
+import emojiGroups from 'shared/components/emoji/emojisGroup';
 import MentionBox from '../mentions/MentionBox.vue';
 
 const props = defineProps({

app/javascript/shared/components/emoji/EmojiInput.vue

@@ -1,10 +1,11 @@
 <script>
-import emojis from './emojisGroup.json';
+import emojis from './emojisGroup';
 import FluentIcon from 'shared/components/FluentIcon/Index.vue';
+import WootButton from 'dashboard/components/ui/WootButton.vue';
 const SEARCH_KEY = 'Search';
 
 export default {
-  components: { FluentIcon },
+  components: { FluentIcon, WootButton },
   props: {
     onClick: {
       type: Function,
@@ -97,7 +98,7 @@ export default {
           class="emoji-search--input focus:box-shadow-blue dark:focus:box-shadow-dark !mb-0 !h-8 !text-sm"
           :placeholder="$t('EMOJI.PLACEHOLDER')"
         />
-        <woot-button
+        <WootButton
           v-if="showRemoveButton"
           size="small"
           variant="smooth"
@@ -106,7 +107,7 @@ export default {
           @click="onClick('')"
         >
           {{ $t('EMOJI.REMOVE') }}
-        </woot-button>
+        </WootButton>
       </div>
       <div v-if="hasNoSearch" ref="emojiItem" class="emoji-item">
         <h5 class="emoji-category--title">

app/javascript/widget/components/ChatInputWrap.vue

@@ -1,5 +1,4 @@
 <script>
-import { defineAsyncComponent } from 'vue';
 import { mapGetters } from 'vuex';
 
 import ChatAttachmentButton from 'widget/components/ChatAttachment.vue';
@@ -8,10 +7,7 @@ import configMixin from '../mixins/configMixin';
 import FluentIcon from 'shared/components/FluentIcon/Index.vue';
 import ResizableTextArea from 'shared/components/ResizableTextArea.vue';
 import { useDarkMode } from 'widget/composables/useDarkMode';
-
+import EmojiInput from 'shared/components/emoji/EmojiInput.vue';
-const EmojiInput = defineAsyncComponent(
-  () => import('shared/components/emoji/EmojiInput.vue')
-);
 
 export default {
   name: 'ChatInputWrap',
@@ -162,9 +158,10 @@ export default {
       />
       <button
         v-if="hasEmojiPickerEnabled"
+        type="button"
         class="flex items-center justify-center icon-button"
         :aria-label="$t('EMOJI.ARIA_LABEL')"
-        @click="toggleEmojiPicker"
+        @click.prevent="toggleEmojiPicker"
       >
         <FluentIcon icon="emoji" :class="emojiIconColor" />
       </button>

app/javascript/widget/router.js

@@ -36,7 +36,6 @@ export default createRouter({
         {
           path: '/article',
           name: 'article-viewer',
-          props: true,
           component: () => import('./views/ArticleViewer.vue'),
         },
       ],

app/javascript/widget/views/ArticleViewer.vue

@@ -6,17 +6,11 @@ export default {
   components: {
     IframeLoader,
   },
-  props: {
-    link: {
-      type: String,
-      default: '',
-    },
-  },
 };
 </script>
 
 <template>
   <div class="bg-white h-full">
-    <IframeLoader :url="link" />
+    <IframeLoader :url="$route.query.link" />
   </div>
 </template>

app/javascript/widget/views/Home.vue

@@ -79,7 +79,7 @@ export default {
       }
       this.$router.push({
         name: 'article-viewer',
-        params: { link: linkToOpen },
+        query: { link: linkToOpen },
       });
     },
     viewAllArticles() {