confirm modal + lint

src/App.js

@@ -60,10 +60,11 @@ export default {
     UserReportingModal,
     PostStatusModal,
     EditStatusModal: defineAsyncComponent(
-      () => import( './components/edit_status_modal/edit_status_modal.vue'),
+      () => import('./components/edit_status_modal/edit_status_modal.vue'),
     ),
     StatusHistoryModal: defineAsyncComponent(
-      () => import( './components/status_history_modal/status_history_modal.vue'),
+      () =>
+        import('./components/status_history_modal/status_history_modal.vue'),
     ),
     GlobalNoticeList,
   },

src/boot/routes.js

@@ -1,16 +1,16 @@
+import { defineAsyncComponent } from 'vue'
+
 import BookmarkTimeline from 'src/components/bookmark_timeline/bookmark_timeline.vue'
 import BubbleTimeline from 'src/components/bubble_timeline/bubble_timeline.vue'
 import ConversationPage from 'src/components/conversation-page/conversation-page.vue'
 import DMs from 'src/components/dm_timeline/dm_timeline.vue'
 import FriendsTimeline from 'src/components/friends_timeline/friends_timeline.vue'
+import NavPanel from 'src/components/nav_panel/nav_panel.vue'
 import PublicAndExternalTimeline from 'src/components/public_and_external_timeline/public_and_external_timeline.vue'
 import PublicTimeline from 'src/components/public_timeline/public_timeline.vue'
+import QuotesTimeline from 'src/components/quotes_timeline/quotes_timeline.vue'
 import RemoteUserResolver from 'src/components/remote_user_resolver/remote_user_resolver.vue'
 import TagTimeline from 'src/components/tag_timeline/tag_timeline.vue'
-import { defineAsyncComponent } from 'vue'
-
-import NavPanel from 'src/components/nav_panel/nav_panel.vue'
-import QuotesTimeline from 'src/components/quotes_timeline/quotes_timeline.vue'
 
 import { useInstanceStore } from 'src/stores/instance.js'
 import { useInstanceCapabilitiesStore } from 'src/stores/instance_capabilities.js'
@@ -141,14 +141,14 @@ export default (store) => {
       name: 'login',
       path: '/login',
       component: defineAsyncComponent(
-        () => import( 'src/components/auth_form/auth_form.js'),
+        () => import('src/components/auth_form/auth_form.js'),
       ),
     },
     {
       name: 'shout-panel',
       path: '/shout-panel',
       component: defineAsyncComponent(
-        () => import( 'src/components/shout_panel/shout_panel.vue'),
+        () => import('src/components/shout_panel/shout_panel.vue'),
       ),
       props: () => ({ floating: false }),
     },
@@ -164,7 +164,7 @@ export default (store) => {
       name: 'search',
       path: '/search',
       component: defineAsyncComponent(
-        () => import( 'src/components/search/search.vue'),
+        () => import('src/components/search/search.vue'),
       ),
       props: (route) => ({ query: route.query.query }),
     },
@@ -172,7 +172,7 @@ export default (store) => {
       name: 'who-to-follow',
       path: '/who-to-follow',
       component: defineAsyncComponent(
-        () => import( 'src/components/who_to_follow/who_to_follow.vue'),
+        () => import('src/components/who_to_follow/who_to_follow.vue'),
       ),
       beforeEnter: validateAuthenticatedRoute,
     },
@@ -180,21 +180,22 @@ export default (store) => {
       name: 'about',
       path: '/about',
       component: defineAsyncComponent(
-        () => import( 'src/components/about/about.vue'),
+        () => import('src/components/about/about.vue'),
       ),
     },
     {
       name: 'announcements',
       path: '/announcements',
       component: defineAsyncComponent(
-        () => import( 'src/components/announcements_page/announcements_page.vue'),
+        () =>
+          import('src/components/announcements_page/announcements_page.vue'),
       ),
     },
     {
       name: 'drafts',
       path: '/drafts',
       component: defineAsyncComponent(
-        () => import( 'src/components/drafts/drafts.vue'),
+        () => import('src/components/drafts/drafts.vue'),
       ),
     },
     {
@@ -215,28 +216,28 @@ export default (store) => {
       name: 'lists',
       path: '/lists',
       component: defineAsyncComponent(
-        () => import( 'src/components/lists/lists.vue'),
+        () => import('src/components/lists/lists.vue'),
       ),
     },
     {
       name: 'lists-timeline',
       path: '/lists/:id',
       component: defineAsyncComponent(
-        () => import( 'src/components/lists_timeline/lists_timeline.vue'),
+        () => import('src/components/lists_timeline/lists_timeline.vue'),
       ),
     },
     {
       name: 'lists-edit',
       path: '/lists/:id/edit',
       component: defineAsyncComponent(
-        () => import( 'src/components/lists_edit/lists_edit.vue'),
+        () => import('src/components/lists_edit/lists_edit.vue'),
       ),
     },
     {
       name: 'lists-new',
       path: '/lists/new',
       component: defineAsyncComponent(
-        () => import( 'src/components/lists_edit/lists_edit.vue'),
+        () => import('src/components/lists_edit/lists_edit.vue'),
       ),
     },
     {
@@ -250,14 +251,17 @@ export default (store) => {
       name: 'bookmark-folders',
       path: '/bookmark_folders',
       component: defineAsyncComponent(
-        () => import( 'src/components/bookmark_folders/bookmark_folders.vue'),
+        () => import('src/components/bookmark_folders/bookmark_folders.vue'),
       ),
     },
     {
       name: 'bookmark-folder-new',
       path: '/bookmarks/new-folder',
       component: defineAsyncComponent(
-        () => import( 'src/components/bookmark_folder_edit/bookmark_folder_edit.vue'),
+        () =>
+          import(
+            'src/components/bookmark_folder_edit/bookmark_folder_edit.vue'
+          ),
       ),
     },
     {
@@ -269,7 +273,10 @@ export default (store) => {
       name: 'bookmark-folder-edit',
       path: '/bookmarks/:id/edit',
       component: defineAsyncComponent(
-        () => import( 'src/components/bookmark_folder_edit/bookmark_folder_edit.vue'),
+        () =>
+          import(
+            'src/components/bookmark_folder_edit/bookmark_folder_edit.vue'
+          ),
       ),
     },
   ]
@@ -280,7 +287,7 @@ export default (store) => {
         name: 'chat',
         path: '/users/:username/chats/:recipient_id',
         component: defineAsyncComponent(
-          () => import( 'src/components/chat/chat.vue'),
+          () => import('src/components/chat/chat.vue'),
         ),
         meta: { dontScroll: false },
         beforeEnter: validateAuthenticatedRoute,
@@ -289,7 +296,7 @@ export default (store) => {
         name: 'chats',
         path: '/users/:username/chats',
         component: defineAsyncComponent(
-          () => import( 'src/components/chat_list/chat_list.vue'),
+          () => import('src/components/chat_list/chat_list.vue'),
         ),
         meta: { dontScroll: false },
         beforeEnter: validateAuthenticatedRoute,

src/components/account_actions/account_actions.js

@@ -1,8 +1,8 @@
 import { mapState } from 'pinia'
+import { defineAsyncComponent } from 'vue'
 
 import UserListMenu from 'src/components/user_list_menu/user_list_menu.vue'
 import UserTimedFilterModal from 'src/components/user_timed_filter_modal/user_timed_filter_modal.vue'
-import ConfirmModal from '../confirm_modal/confirm_modal.vue'
 import Popover from '../popover/popover.vue'
 import ProgressButton from '../progress_button/progress_button.vue'
 
@@ -27,7 +27,10 @@ const AccountActions = {
     ProgressButton,
     Popover,
     UserListMenu,
-    ConfirmModal,
+    ConfirmModal: defineAsyncComponent(
+      () => import('src/components/confirm_modal/confirm_modal.vue'),
+    ),
+
     UserTimedFilterModal,
   },
   methods: {

src/components/account_actions/account_actions.vue

@@ -94,7 +94,7 @@
       </template>
     </Popover>
     <teleport to="#modal">
-      <confirm-modal
+      <ConfirmModal
         v-if="showingConfirmBlock && !blockExpiration"
         ref="blockDialog"
         :title="$t('user_card.block_confirm_title')"
@@ -114,10 +114,10 @@
             />
           </template>
         </i18n-t>
-      </confirm-modal>
+      </ConfirmModal>
     </teleport>
     <teleport to="#modal">
-      <confirm-modal
+      <ConfirmModal
         v-if="showingConfirmRemoveFollower"
         :title="$t('user_card.remove_follower_confirm_title')"
         :confirm-text="$t('user_card.remove_follower_confirm_accept_button')"
@@ -136,7 +136,7 @@
             />
           </template>
         </i18n-t>
-      </confirm-modal>
+      </ConfirmModal>
       <UserTimedFilterModal
         v-if="blockExpiration"
         ref="timedBlockDialog"

src/components/attachment/attachment.js

@@ -69,12 +69,10 @@ const Attachment = {
     }
   },
   components: {
-    Flash: defineAsyncComponent(
-      () => import( 'src/components/flash/flash.vue'),
-    ),
+    Flash: defineAsyncComponent(() => import('src/components/flash/flash.vue')),
     StillImage,
     VideoAttachment: defineAsyncComponent(
-      () => import( 'src/components/video_attachment/video_attachment.vue'),
+      () => import('src/components/video_attachment/video_attachment.vue'),
     ),
     Popover,
   },

src/components/confirm_modal/mute_confirm.js

@@ -1,7 +1,7 @@
 import { mapState } from 'pinia'
+import { defineAsyncComponent } from 'vue'
 
 import Select from 'src/components/select/select.vue'
-import ConfirmModal from './confirm_modal.vue'
 
 import { useMergedConfigStore } from 'src/stores/merged_config.js'
 
@@ -12,7 +12,10 @@ export default {
     showing: false,
   }),
   components: {
-    ConfirmModal,
+    ConfirmModal: defineAsyncComponent(
+      () => import('src/components/confirm_modal/confirm_modal.vue'),
+    ),
+
     Select,
   },
   computed: {

src/components/confirm_modal/mute_confirm.vue

@@ -1,5 +1,5 @@
 <template>
-  <confirm-modal
+  <ConfirmModal
     v-if="showing"
     :title="$t('user_card.mute_confirm_title')"
     :confirm-text="$t('user_card.mute_confirm_accept_button')"
@@ -18,7 +18,7 @@
         <span v-text="user.screen_name_ui" />
       </template>
     </i18n-t>
-  </confirm-modal>
+  </ConfirmModal>
 </template>
 
 <script src="./mute_confirm.js" />

src/components/desktop_nav/desktop_nav.js

@@ -1,7 +1,6 @@
 import SearchBar from 'components/search_bar/search_bar.vue'
 import { mapActions, mapState } from 'pinia'
-
-import ConfirmModal from '../confirm_modal/confirm_modal.vue'
+import { defineAsyncComponent } from 'vue'
 
 import { useInstanceStore } from 'src/stores/instance.js'
 import { useInterfaceStore } from 'src/stores/interface'
@@ -39,7 +38,9 @@ library.add(
 export default {
   components: {
     SearchBar,
-    ConfirmModal,
+    ConfirmModal: defineAsyncComponent(
+      () => import('src/components/confirm_modal/confirm_modal.vue'),
+    ),
   },
   data: () => ({
     searchBarHidden: true,

src/components/desktop_nav/desktop_nav.vue

@@ -79,7 +79,7 @@
       </div>
     </div>
     <teleport to="#modal">
-      <confirm-modal
+      <ConfirmModal
         v-if="showingConfirmLogout"
         :title="$t('login.logout_confirm_title')"
         :confirm-danger="true"
@@ -89,7 +89,7 @@
         @cancelled="hideConfirmLogout"
       >
         {{ $t('login.logout_confirm') }}
-      </confirm-modal>
+      </ConfirmModal>
     </teleport>
   </nav>
 </template>

src/components/draft/draft.js

@@ -1,7 +1,6 @@
 import { cloneDeep } from 'lodash'
 import { defineAsyncComponent } from 'vue'
 
-import ConfirmModal from 'src/components/confirm_modal/confirm_modal.vue'
 import Gallery from 'src/components/gallery/gallery.vue'
 import StatusContent from 'src/components/status_content/status_content.vue'
 
@@ -20,7 +19,10 @@ const Draft = {
     EditStatusForm: defineAsyncComponent(
       () => import('src/components/edit_status_form/edit_status_form.vue'),
     ),
-    ConfirmModal,
+    ConfirmModal: defineAsyncComponent(
+      () => import('src/components/confirm_modal/confirm_modal.vue'),
+    ),
+
     StatusContent,
     Gallery,
   },

src/components/draft/draft.vue

@@ -77,7 +77,7 @@
       />
     </div>
     <teleport to="#modal">
-      <confirm-modal
+      <ConfirmModal
         v-if="showingConfirmDialog"
         :title="$t('drafts.abandon_confirm_title')"
         :confirm-text="$t('drafts.abandon_confirm_accept_button')"
@@ -86,7 +86,7 @@
         @cancelled="hideConfirmDialog"
       >
         {{ $t('drafts.abandon_confirm') }}
-      </confirm-modal>
+      </ConfirmModal>
     </teleport>
     <div class="actions">
       <button

src/components/drafts/drafts.js

@@ -1,4 +1,5 @@
-import ConfirmModal from 'src/components/confirm_modal/confirm_modal.vue'
+import { defineAsyncComponent } from 'vue'
+
 import Draft from 'src/components/draft/draft.vue'
 import List from 'src/components/list/list.vue'
 
@@ -6,7 +7,9 @@ const Drafts = {
   components: {
     Draft,
     List,
-    ConfirmModal,
+    ConfirmModal: defineAsyncComponent(
+      () => import('src/components/confirm_modal/confirm_modal.vue'),
+    ),
   },
   data() {
     return {

src/components/follow_button/follow_button.js

@@ -1,14 +1,17 @@
+import { defineAsyncComponent } from 'vue'
+
 import {
   requestFollow,
   requestUnfollow,
 } from '../../services/follow_manipulate/follow_manipulate'
-import ConfirmModal from '../confirm_modal/confirm_modal.vue'
 
 import { useMergedConfigStore } from 'src/stores/merged_config.js'
 export default {
   props: ['relationship', 'user', 'labelFollowing', 'buttonClass'],
   components: {
-    ConfirmModal,
+    ConfirmModal: defineAsyncComponent(
+      () => import('src/components/confirm_modal/confirm_modal.vue'),
+    ),
   },
   data() {
     return {

src/components/follow_button/follow_button.vue

@@ -8,7 +8,7 @@
   >
     {{ label }}
     <teleport to="#modal">
-      <confirm-modal
+      <ConfirmModal
         v-if="showingConfirmUnfollow"
         :title="$t('user_card.unfollow_confirm_title')"
         :confirm-text="$t('user_card.unfollow_confirm_accept_button')"
@@ -27,7 +27,7 @@
             />
           </template>
         </i18n-t>
-      </confirm-modal>
+      </ConfirmModal>
     </teleport>
   </button>
 </template>

src/components/follow_request_card/follow_request_card.js

@@ -1,6 +1,7 @@
+import { defineAsyncComponent } from 'vue'
+
 import { notificationsFromStore } from '../../services/notification_utils/notification_utils.js'
 import BasicUserCard from '../basic_user_card/basic_user_card.vue'
-import ConfirmModal from '../confirm_modal/confirm_modal.vue'
 
 import { useMergedConfigStore } from 'src/stores/merged_config.js'
 
@@ -8,7 +9,9 @@ const FollowRequestCard = {
   props: ['user'],
   components: {
     BasicUserCard,
-    ConfirmModal,
+    ConfirmModal: defineAsyncComponent(
+      () => import('src/components/confirm_modal/confirm_modal.vue'),
+    ),
   },
   data() {
     return {

src/components/follow_request_card/follow_request_card.vue

@@ -15,7 +15,7 @@
       </button>
     </div>
     <teleport to="#modal">
-      <confirm-modal
+      <ConfirmModal
         v-if="showingApproveConfirmDialog"
         :title="$t('user_card.approve_confirm_title')"
         :confirm-text="$t('user_card.approve_confirm_accept_button')"
@@ -24,8 +24,8 @@
         @cancelled="hideApproveConfirmDialog"
       >
         {{ $t('user_card.approve_confirm', { user: user.screen_name_ui }) }}
-      </confirm-modal>
-      <confirm-modal
+      </ConfirmModal>
+      <ConfirmModal
         v-if="showingDenyConfirmDialog"
         :title="$t('user_card.deny_confirm_title')"
         :confirm-text="$t('user_card.deny_confirm_accept_button')"
@@ -34,7 +34,7 @@
         @cancelled="hideDenyConfirmDialog"
       >
         {{ $t('user_card.deny_confirm', { user: user.screen_name_ui }) }}
-      </confirm-modal>
+      </ConfirmModal>
     </teleport>
   </basic-user-card>
 </template>

src/components/media_modal/media_modal.js

@@ -1,10 +1,10 @@
-import GestureService from '../../services/gesture_service/gesture_service'
-
-import { useMediaViewerStore } from 'src/stores/media_viewer.js'
 import { defineAsyncComponent } from 'vue'
 
 import Modal from 'src/components/modal/modal.vue'
 import StillImage from 'src/components/still-image/still-image.vue'
+import GestureService from '../../services/gesture_service/gesture_service'
+
+import { useMediaViewerStore } from 'src/stores/media_viewer.js'
 
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
@@ -20,18 +20,16 @@ const MediaModal = {
   components: {
     StillImage,
     VideoAttachment: defineAsyncComponent(
-      () => import( 'src/components/video_attachment/video_attachment.vue'),
+      () => import('src/components/video_attachment/video_attachment.vue'),
     ),
     PinchZoom: defineAsyncComponent(
-      () => import( 'src/components/pinch_zoom/pinch_zoom.vue'),
+      () => import('src/components/pinch_zoom/pinch_zoom.vue'),
     ),
     SwipeClick: defineAsyncComponent(
-      () => import( 'src/components/swipe_click/swipe_click.vue'),
+      () => import('src/components/swipe_click/swipe_click.vue'),
     ),
     Modal,
-    Flash: defineAsyncComponent(
-      () => import( 'src/components/flash/flash.vue'),
-    ),
+    Flash: defineAsyncComponent(() => import('src/components/flash/flash.vue')),
   },
   data() {
     return {

src/components/mobile_nav/mobile_nav.js

@@ -2,7 +2,6 @@ import { mapState } from 'pinia'
 import { defineAsyncComponent } from 'vue'
 import { mapGetters } from 'vuex'
 
-import ConfirmModal from 'src/components/confirm_modal/confirm_modal.vue'
 import NavigationPins from 'src/components/navigation/navigation_pins.vue'
 import SideDrawer from 'src/components/side_drawer/side_drawer.vue'
 import GestureService from '../../services/gesture_service/gesture_service'
@@ -34,7 +33,9 @@ const MobileNav = {
       () => import('src/components/notifications/notifications.vue'),
     ),
     NavigationPins,
-    ConfirmModal,
+    ConfirmModal: defineAsyncComponent(
+      () => import('src/components/confirm_modal/confirm_modal.vue'),
+    ),
   },
   data: () => ({
     notificationsCloseGesture: undefined,

src/components/mobile_nav/mobile_nav.vue

@@ -106,7 +106,7 @@
       :logout="logout"
     />
     <teleport to="#modal">
-      <confirm-modal
+      <ConfirmModal
         v-if="showingConfirmLogout"
         :title="$t('login.logout_confirm_title')"
         :confirm-danger="true"
@@ -116,7 +116,7 @@
         @cancelled="hideConfirmLogout"
       >
         {{ $t('login.logout_confirm') }}
-      </confirm-modal>
+      </ConfirmModal>
     </teleport>
   </div>
 </template>

src/components/notification/notification.js

@@ -1,3 +1,4 @@
+import { defineAsyncComponent } from 'vue'
 import { mapState } from 'vuex'
 
 import RichContent from 'src/components/rich_content/rich_content.jsx'
@@ -6,7 +7,6 @@ import {
   highlightClass,
   highlightStyle,
 } from '../../services/user_highlighter/user_highlighter.js'
-import ConfirmModal from '../confirm_modal/confirm_modal.vue'
 import Report from '../report/report.vue'
 import Status from '../status/status.vue'
 import StatusContent from '../status_content/status_content.vue'
@@ -69,7 +69,9 @@ const Notification = {
     RichContent,
     UserPopover,
     UserLink,
-    ConfirmModal,
+    ConfirmModal: defineAsyncComponent(
+      () => import('src/components/confirm_modal/confirm_modal.vue'),
+    ),
   },
   mounted() {
     document.addEventListener('selectionchange', this.onContentSelect)

src/components/notification/notification.vue

@@ -267,7 +267,7 @@
       </div>
     </div>
     <teleport to="#modal">
-      <confirm-modal
+      <ConfirmModal
         v-if="showingApproveConfirmDialog"
         :title="$t('user_card.approve_confirm_title')"
         :confirm-text="$t('user_card.approve_confirm_accept_button')"
@@ -276,8 +276,8 @@
         @cancelled="hideApproveConfirmDialog"
       >
         {{ $t('user_card.approve_confirm', { user: user.screen_name_ui }) }}
-      </confirm-modal>
-      <confirm-modal
+      </ConfirmModal>
+      <ConfirmModal
         v-if="showingDenyConfirmDialog"
         :title="$t('user_card.deny_confirm_title')"
         :confirm-text="$t('user_card.deny_confirm_accept_button')"
@@ -286,7 +286,7 @@
         @cancelled="hideDenyConfirmDialog"
       >
         {{ $t('user_card.deny_confirm', { user: user.screen_name_ui }) }}
-      </confirm-modal>
+      </ConfirmModal>
     </teleport>
   </article>
 </template>

src/components/quote/quote.js

@@ -1,6 +1,7 @@
 import { defineAsyncComponent } from 'vue'
 
 import Status from '../status/status.vue'
+
 import { library } from '@fortawesome/fontawesome-svg-core'
 import { faCircleNotch } from '@fortawesome/free-solid-svg-icons'
 

src/components/remove_follower_button/remove_follower_button.js

@@ -1,4 +1,4 @@
-import ConfirmModal from '../confirm_modal/confirm_modal.vue'
+import { defineAsyncComponent } from 'vue'
 
 import { useMergedConfigStore } from 'src/stores/merged_config.js'
 
@@ -11,7 +11,9 @@ export default {
     }
   },
   components: {
-    ConfirmModal,
+    ConfirmModal: defineAsyncComponent(
+      () => import('src/components/confirm_modal/confirm_modal.vue'),
+    ),
   },
   computed: {
     label() {

src/components/remove_follower_button/remove_follower_button.vue

@@ -8,7 +8,7 @@
   >
     {{ label }}
     <teleport to="#modal">
-      <confirm-modal
+      <ConfirmModal
         v-if="showingConfirmRemoveFollower"
         :title="$t('user_card.remove_follower_confirm_title')"
         :confirm-text="$t('user_card.remove_follower_confirm_accept_button')"
@@ -27,7 +27,7 @@
             />
           </template>
         </i18n-t>
-      </confirm-modal>
+      </ConfirmModal>
     </teleport>
   </button>
 </template>

src/components/search/search.js

@@ -1,4 +1,4 @@
-import { uniqBy, map } from 'lodash'
+import { map, uniqBy } from 'lodash'
 
 import TabSwitcher from 'src/components/tab_switcher/tab_switcher.jsx'
 import Conversation from '../conversation/conversation.vue'

src/components/settings_modal/admin_tabs/emoji_tab.js

@@ -1,9 +1,9 @@
 import Checkbox from 'components/checkbox/checkbox.vue'
-import ConfirmModal from 'components/confirm_modal/confirm_modal.vue'
 import Popover from 'components/popover/popover.vue'
 import Select from 'components/select/select.vue'
 import StillImage from 'components/still-image/still-image.vue'
 import { assign, clone } from 'lodash'
+import { defineAsyncComponent } from 'vue'
 
 import TabSwitcher from 'src/components/tab_switcher/tab_switcher.jsx'
 import EmojiEditingPopover from '../helpers/emoji_editing_popover.vue'
@@ -33,7 +33,10 @@ const EmojiTab = {
     StillImage,
     Select,
     Popover,
-    ConfirmModal,
+    ConfirmModal: defineAsyncComponent(
+      () => import('src/components/confirm_modal/confirm_modal.vue'),
+    ),
+
     ModifiedIndicator,
     EmojiEditingPopover,
   },

src/components/settings_modal/helpers/emoji_editing_popover.vue

@@ -149,13 +149,21 @@
 </template>
 
 <script>
-import ConfirmModal from 'components/confirm_modal/confirm_modal.vue'
 import Popover from 'components/popover/popover.vue'
 import SelectComponent from 'components/select/select.vue'
 import StillImage from 'components/still-image/still-image.vue'
+import { defineAsyncComponent } from 'vue'
 
 export default {
-  components: { Popover, ConfirmModal, StillImage, SelectComponent },
+  components: {
+    Popover,
+    ConfirmModal: defineAsyncComponent(
+      () => import('src/components/confirm_modal/confirm_modal.vue'),
+    ),
+    StillImage,
+    SelectComponent,
+  },
+
   inject: ['emojiAddr'],
   props: {
     placement: {

src/components/settings_modal/settings_modal.js

@@ -1,9 +1,9 @@
 import { cloneDeep, isEqual } from 'lodash'
 import { mapActions, mapState } from 'pinia'
+import { defineAsyncComponent } from 'vue'
 
 import AsyncComponentError from 'src/components/async_component_error/async_component_error.vue'
 import Checkbox from 'src/components/checkbox/checkbox.vue'
-import ConfirmModal from 'src/components/confirm_modal/confirm_modal.vue'
 import Modal from 'src/components/modal/modal.vue'
 import PanelLoading from 'src/components/panel_loading/panel_loading.vue'
 import Popover from '../popover/popover.vue'
@@ -67,7 +67,10 @@ const SettingsModal = {
     Modal,
     Popover,
     Checkbox,
-    ConfirmModal,
+    ConfirmModal: defineAsyncComponent(
+      () => import('src/components/confirm_modal/confirm_modal.vue'),
+    ),
+
     SettingsModalUserContent: getResettableAsyncComponent(
       () => import('./settings_modal_user_content.vue'),
       {

src/components/staff_panel/staff_panel.js

@@ -1,4 +1,4 @@
-import { map, groupBy } from 'lodash'
+import { groupBy, map } from 'lodash'
 import { mapGetters, mapState } from 'vuex'
 
 import BasicUserCard from '../basic_user_card/basic_user_card.vue'

src/components/status/status.js

@@ -1,23 +1,23 @@
 import { unescape as ldUnescape, uniqBy } from 'lodash'
 import { defineAsyncComponent } from 'vue'
 
+import AvatarList from 'src/components/avatar_list/avatar_list.vue'
+import EmojiReactions from 'src/components/emoji_reactions/emoji_reactions.vue'
 import MentionLink from 'src/components/mention_link/mention_link.vue'
 import MentionsLine from 'src/components/mentions_line/mentions_line.vue'
 import RichContent from 'src/components/rich_content/rich_content.jsx'
 import StatusActionButtons from 'src/components/status_action_buttons/status_action_buttons.vue'
-import { muteFilterHits } from '../../services/status_parser/status_parser.js'
-import {
-  highlightClass,
-  highlightStyle,
-} from '../../services/user_highlighter/user_highlighter.js'
-import AvatarList from 'src/components/avatar_list/avatar_list.vue'
-import EmojiReactions from 'src/components/emoji_reactions/emoji_reactions.vue'
 import StatusContent from 'src/components/status_content/status_content.vue'
 import Timeago from 'src/components/timeago/timeago.vue'
 import UserAvatar from 'src/components/user_avatar/user_avatar.vue'
 import UserLink from 'src/components/user_link/user_link.vue'
 import UserListPopover from 'src/components/user_list_popover/user_list_popover.vue'
 import UserPopover from 'src/components/user_popover/user_popover.vue'
+import { muteFilterHits } from '../../services/status_parser/status_parser.js'
+import {
+  highlightClass,
+  highlightStyle,
+} from '../../services/user_highlighter/user_highlighter.js'
 
 import { useInstanceStore } from 'src/stores/instance.js'
 import { useInstanceCapabilitiesStore } from 'src/stores/instance_capabilities.js'
@@ -122,7 +122,7 @@ const Status = {
     AvatarList,
     Timeago,
     StatusPopover: defineAsyncComponent(
-      () => import( 'src/components/status_popover/status_popover.vue')
+      () => import('src/components/status_popover/status_popover.vue'),
     ),
     UserListPopover,
     EmojiReactions,
@@ -132,9 +132,7 @@ const Status = {
     MentionsLine,
     UserPopover,
     UserLink,
-    Quote: defineAsyncComponent(
-      () => import('src/components/quote/quote.vue')
-    ),
+    Quote: defineAsyncComponent(() => import('src/components/quote/quote.vue')),
     StatusActionButtons,
   },
   props: [

src/components/status_action_buttons/action_button.js

@@ -1,15 +1,16 @@
+import { defineAsyncComponent } from 'vue'
+
 import Popover from 'src/components/popover/popover.vue'
 
 import { useInstanceStore } from 'src/stores/instance.js'
 import { useInstanceCapabilitiesStore } from 'src/stores/instance_capabilities.js'
 import { useMergedConfigStore } from 'src/stores/merged_config.js'
-import { defineAsyncComponent } from 'vue'
 
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
   faBookmark as faBookmarkRegular,
-  faStar as faStarRegular,
   faFaceSmileBeam,
+  faStar as faStarRegular,
 } from '@fortawesome/free-regular-svg-icons'
 import {
   faBookmark,
@@ -69,10 +70,13 @@ export default {
   ],
   components: {
     StatusBookmarkFolderMenu: defineAsyncComponent(
-      () => import( 'src/components/status_bookmark_folder_menu/status_bookmark_folder_menu.vue'),
+      () =>
+        import(
+          'src/components/status_bookmark_folder_menu/status_bookmark_folder_menu.vue'
+        ),
     ),
     EmojiPicker: defineAsyncComponent(
-      () => import( 'src/components/emoji_picker/emoji_picker.vue'),
+      () => import('src/components/emoji_picker/emoji_picker.vue'),
     ),
     Popover,
   },

src/components/status_action_buttons/status_action_buttons.js

@@ -1,6 +1,6 @@
 import { mapState } from 'pinia'
+import { defineAsyncComponent } from 'vue'
 
-import ConfirmModal from 'src/components/confirm_modal/confirm_modal.vue'
 import Popover from 'src/components/popover/popover.vue'
 import ActionButtonContainer from './action_button_container.vue'
 import { BUTTONS } from './buttons_definitions.js'
@@ -33,7 +33,10 @@ const StatusActionButtons = {
   },
   components: {
     Popover,
-    ConfirmModal,
+    ConfirmModal: defineAsyncComponent(
+      () => import('src/components/confirm_modal/confirm_modal.vue'),
+    ),
+
     ActionButtonContainer,
   },
   computed: {

src/components/status_action_buttons/status_action_buttons.vue

@@ -116,7 +116,7 @@
     </span>
 
     <teleport to="#modal">
-      <confirm-modal
+      <ConfirmModal
         v-if="showingConfirmDialog"
         :title="currentConfirmTitle"
         :confirm-text="currentConfirmOkText"
@@ -125,7 +125,7 @@
         @cancelled="showingConfirmDialog = false"
       >
         {{ currentConfirmBody }}
-      </confirm-modal>
+      </ConfirmModal>
     </teleport>
   </div>
 </template>

src/components/user_card/user_card.js

@@ -1,4 +1,9 @@
-import { escape as ldEscape, isEqual, merge, unescape as ldUnescape } from 'lodash'
+import {
+  isEqual,
+  escape as ldEscape,
+  unescape as ldUnescape,
+  merge,
+} from 'lodash'
 import { mapState } from 'pinia'
 
 import Checkbox from 'src/components/checkbox/checkbox.vue'

src/components/user_timed_filter_modal/user_timed_filter_modal.js

@@ -1,5 +1,6 @@
+import { defineAsyncComponent } from 'vue'
+
 import Checkbox from 'src/components/checkbox/checkbox.vue'
-import ConfirmModal from 'src/components/confirm_modal/confirm_modal.vue'
 import Select from 'src/components/select/select.vue'
 
 import { useMergedConfigStore } from 'src/stores/merged_config.js'
@@ -36,7 +37,10 @@ const UserTimedFilterModal = {
     }
   },
   components: {
-    ConfirmModal,
+    ConfirmModal: defineAsyncComponent(
+      () => import('src/components/confirm_modal/confirm_modal.vue'),
+    ),
+
     Select,
     Checkbox,
   },

src/components/user_timed_filter_modal/user_timed_filter_modal.vue

@@ -1,5 +1,5 @@
 <template>
-  <confirm-modal
+  <ConfirmModal
     v-if="showing"
     class="UserTimedFilterModal"
     :title="$t(isMute ? $t('user_card.mute') : $t('user_card.block'))"
@@ -80,7 +80,7 @@
         </Checkbox>
       </div>
     </template>
-  </confirm-modal>
+  </ConfirmModal>
 </template>
 
 <script src="./user_timed_filter_modal.js"></script>

src/lib/persisted_state.js

@@ -1,4 +1,4 @@
-import { cloneDeep, each, get, set, merge } from 'lodash'
+import { cloneDeep, each, get, merge, set } from 'lodash'
 
 import { storage } from './storage.js'
 

src/services/chat_service/chat_service.js

@@ -1,4 +1,4 @@
-import { maxBy, minBy } from 'lodash'
+import { maxBy, minBy, orderBy, sortBy, uniqueId } from 'lodash'
 
 const empty = (chatId) => {
   return {
@@ -57,7 +57,7 @@ const cullOlderMessages = (storage) => {
   const minIndex = maxIndex - 50
   if (maxIndex <= 50) return
 
-  storage.messages = _.sortBy(storage.messages, ['id'])
+  storage.messages = sortBy(storage.messages, ['id'])
   storage.minId = storage.messages[minIndex].id
   for (const message of storage.messages) {
     if (message.id < storage.minId) {
@@ -78,7 +78,7 @@ const handleMessageError = (storage, fakeId, isRetry) => {
     fakeMessage.pending = false
     if (!isRetry) {
       // Ensure the failed message doesn't stay at the bottom of the list.
-      const lastPersistedMessage = _.orderBy(
+      const lastPersistedMessage = orderBy(
         storage.messages,
         ['pending', 'id'],
         ['asc', 'desc'],
@@ -166,11 +166,7 @@ const getView = (storage) => {
   }
 
   const result = []
-  const messages = _.orderBy(
-    storage.messages,
-    ['pending', 'id'],
-    ['asc', 'asc'],
-  )
+  const messages = orderBy(storage.messages, ['pending', 'id'], ['asc', 'asc'])
   const firstMessage = messages[0]
   let previousMessage = messages[messages.length - 1]
   let currentMessageChainId
@@ -228,7 +224,7 @@ const getView = (storage) => {
         previousMessage.data.account_id) !== message.account_id ||
       afterDate
     ) {
-      currentMessageChainId = _.uniqueId()
+      currentMessageChainId = uniqueId()
       object.isHead = true
       object.messageChainId = currentMessageChainId
     }

src/services/notification_utils/notification_utils.js

@@ -87,10 +87,7 @@ export const maybeShowNotification = (
   )
     return
 
-  const notificationObject = prepareNotificationObject(
-    notification,
-    i18n,
-  )
+  const notificationObject = prepareNotificationObject(notification, i18n)
   showDesktopNotification(rootState, notificationObject)
 }
 
@@ -193,7 +190,11 @@ export const prepareNotificationObject = (notification, i18n) => {
   return notifObj
 }
 
-export const countExtraNotifications = (store, mergedConfig, unreadAnnouncementCount) => {
+export const countExtraNotifications = (
+  store,
+  mergedConfig,
+  unreadAnnouncementCount,
+) => {
   const rootGetters = store.rootGetters || store.getters
 
   if (!mergedConfig.showExtraNotifications) {

src/services/sw/sw.js

@@ -18,8 +18,7 @@ function isPushSupported() {
 function getOrCreateServiceWorker() {
   if (!isSWSupported()) return
   const swType = process.env.HAS_MODULE_SERVICE_WORKER ? 'module' : 'classic'
-  return navigator
-    .serviceWorker
+  return navigator.serviceWorker
     .register('/sw-pleroma.js', { type: swType })
     .catch((err) =>
       console.error('Unable to get or create a service worker.', err),

vite.config.js

@@ -1,10 +1,9 @@
 import { dirname, resolve } from 'node:path'
 import { fileURLToPath } from 'node:url'
+import { DevTools } from '@vitejs/devtools'
 import vue from '@vitejs/plugin-vue'
 import vueJsx from '@vitejs/plugin-vue-jsx'
 import { defineConfig } from 'vite'
-import { DevTools } from '@vitejs/devtools'
-
 import eslint from 'vite-plugin-eslint2'
 import stylelint from 'vite-plugin-stylelint'
 import { configDefaults } from 'vitest/config'