Merge branch 'optimize' into shigusegubu-themes3

build/sw_plugin.js

@@ -141,7 +141,7 @@ export const buildSwPlugin = ({ swSrc, swDest }) => {
             name: 'sw_pleroma',
           },
           emptyOutDir: false,
-          rollupOptions: {
+          rolldownOptions: {
             output: {
               entryFileNames: swDest,
             },

package.json

@@ -65,8 +65,9 @@
     "@biomejs/biome": "2.3.11",
     "@pinia/testing": "1.0.3",
     "@ungap/event-target": "0.2.4",
-    "@vitejs/plugin-vue": "^5.2.1",
+    "@vitejs/devtools": "^0.3.1",
-    "@vitejs/plugin-vue-jsx": "^4.1.1",
+    "@vitejs/plugin-vue": "^6.0.7",
+    "@vitejs/plugin-vue-jsx": "^5.1.5",
     "@vitest/browser": "^3.0.7",
     "@vitest/ui": "^3.0.7",
     "@vue/babel-helper-vue-jsx-merge-props": "1.4.0",
@@ -113,9 +114,9 @@
     "stylelint-config-recommended-scss": "^14.0.0",
     "stylelint-config-recommended-vue": "^1.6.0",
     "stylelint-config-standard": "38.0.0",
-    "vite": "^6.1.0",
+    "vite": "^8.0.0",
-    "vite-plugin-eslint2": "^5.0.3",
+    "vite-plugin-eslint2": "^5.1.0",
-    "vite-plugin-stylelint": "^6.0.0",
+    "vite-plugin-stylelint": "^6.1.0",
     "vitest": "^3.0.7",
     "vue-eslint-parser": "10.2.0"
   },

src/App.js

@@ -3,7 +3,6 @@ import { mapState } from 'pinia'
 import { defineAsyncComponent } from 'vue'
 
 import DesktopNav from './components/desktop_nav/desktop_nav.vue'
-import EditStatusModal from './components/edit_status_modal/edit_status_modal.vue'
 import FeaturesPanel from './components/features_panel/features_panel.vue'
 import GlobalNoticeList from './components/global_notice_list/global_notice_list.vue'
 import InstanceSpecificPanel from './components/instance_specific_panel/instance_specific_panel.vue'
@@ -12,9 +11,7 @@ import MobileNav from './components/mobile_nav/mobile_nav.vue'
 import MobilePostStatusButton from './components/mobile_post_status_button/mobile_post_status_button.vue'
 import NavPanel from './components/nav_panel/nav_panel.vue'
 import PostStatusModal from './components/post_status_modal/post_status_modal.vue'
-import ShoutPanel from './components/shout_panel/shout_panel.vue'
 import SideDrawer from './components/side_drawer/side_drawer.vue'
-import StatusHistoryModal from './components/status_history_modal/status_history_modal.vue'
 import UserPanel from './components/user_panel/user_panel.vue'
 import UserReportingModal from './components/user_reporting_modal/user_reporting_modal.vue'
 import WhoToFollowPanel from './components/who_to_follow_panel/who_to_follow_panel.vue'
@@ -46,7 +43,9 @@ export default {
     InstanceSpecificPanel,
     FeaturesPanel,
     WhoToFollowPanel,
-    ShoutPanel,
+    ShoutPanel: defineAsyncComponent(
+      () => import('src/components/shout_panel/shout_panel.vue'),
+    ),
     MediaModal,
     SideDrawer,
     MobilePostStatusButton,
@@ -60,8 +59,12 @@ export default {
     ),
     UserReportingModal,
     PostStatusModal,
-    EditStatusModal,
+    EditStatusModal: defineAsyncComponent(
-    StatusHistoryModal,
+      () => import( './components/edit_status_modal/edit_status_modal.vue'),
+    ),
+    StatusHistoryModal: defineAsyncComponent(
+      () => import( './components/status_history_modal/status_history_modal.vue'),
+    ),
     GlobalNoticeList,
   },
   data: () => ({

src/boot/routes.js

@@ -1,36 +1,17 @@
-import About from 'components/about/about.vue'
+import { defineAsyncComponent } from 'vue'
-import AnnouncementsPage from 'components/announcements_page/announcements_page.vue'
-import AuthForm from 'components/auth_form/auth_form.js'
-import BookmarkTimeline from 'components/bookmark_timeline/bookmark_timeline.vue'
-import BubbleTimeline from 'components/bubble_timeline/bubble_timeline.vue'
-import Chat from 'components/chat/chat.vue'
-import ChatList from 'components/chat_list/chat_list.vue'
-import ConversationPage from 'components/conversation-page/conversation-page.vue'
-import DMs from 'components/dm_timeline/dm_timeline.vue'
-import Drafts from 'components/drafts/drafts.vue'
-import FollowRequests from 'components/follow_requests/follow_requests.vue'
-import FriendsTimeline from 'components/friends_timeline/friends_timeline.vue'
-import Interactions from 'components/interactions/interactions.vue'
-import Lists from 'components/lists/lists.vue'
-import ListsEdit from 'components/lists_edit/lists_edit.vue'
-import ListsTimeline from 'components/lists_timeline/lists_timeline.vue'
-import Notifications from 'components/notifications/notifications.vue'
-import OAuthCallback from 'components/oauth_callback/oauth_callback.vue'
-import PasswordReset from 'components/password_reset/password_reset.vue'
-import PublicAndExternalTimeline from 'components/public_and_external_timeline/public_and_external_timeline.vue'
-import PublicTimeline from 'components/public_timeline/public_timeline.vue'
-import Registration from 'components/registration/registration.vue'
-import RemoteUserResolver from 'components/remote_user_resolver/remote_user_resolver.vue'
-import Search from 'components/search/search.vue'
-import ShoutPanel from 'components/shout_panel/shout_panel.vue'
-import TagTimeline from 'components/tag_timeline/tag_timeline.vue'
-import UserProfile from 'components/user_profile/user_profile.vue'
-import WhoToFollow from 'components/who_to_follow/who_to_follow.vue'
 
+import About from 'src/components/about/about.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 BookmarkFolderEdit from '../components/bookmark_folder_edit/bookmark_folder_edit.vue'
+import PublicAndExternalTimeline from 'src/components/public_and_external_timeline/public_and_external_timeline.vue'
-import BookmarkFolders from '../components/bookmark_folders/bookmark_folders.vue'
+import PublicTimeline from 'src/components/public_timeline/public_timeline.vue'
-import QuotesTimeline from '../components/quotes_timeline/quotes_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 { useInstanceStore } from 'src/stores/instance.js'
 import { useInstanceCapabilitiesStore } from 'src/stores/instance_capabilities.js'
@@ -100,12 +81,16 @@ export default (store) => {
     {
       name: 'external-user-profile',
       path: '/users/$:id',
-      component: UserProfile,
+      component: defineAsyncComponent(
+        () => import('src/components/user_profile/user_profile.vue'),
+      ),
     },
     {
       name: 'interactions',
       path: '/users/:username/interactions',
-      component: Interactions,
+      component: defineAsyncComponent(
+        () => import('src/components/interactions/interactions.vue'),
+      ),
       beforeEnter: validateAuthenticatedRoute,
     },
     {
@@ -114,69 +99,142 @@ export default (store) => {
       component: DMs,
       beforeEnter: validateAuthenticatedRoute,
     },
-    { name: 'registration', path: '/registration', component: Registration },
+    {
+      name: 'registration',
+      path: '/registration',
+      component: defineAsyncComponent(
+        () => import('src/components/registration/registration.vue'),
+      ),
+    },
     {
       name: 'password-reset',
       path: '/password-reset',
-      component: PasswordReset,
+      component: defineAsyncComponent(
+        () => import('src/components/password_reset/password_reset.vue'),
+      ),
       props: true,
     },
     {
       name: 'registration-token',
       path: '/registration/:token',
-      component: Registration,
+      component: defineAsyncComponent(
+        () => import('src/components/registration/registration.vue'),
+      ),
     },
     {
       name: 'friend-requests',
       path: '/friend-requests',
-      component: FollowRequests,
+      component: defineAsyncComponent(
+        () => import('src/components/follow_requests/follow_requests.vue'),
+      ),
       beforeEnter: validateAuthenticatedRoute,
     },
     {
       name: 'notifications',
       path: '/:username/notifications',
-      component: Notifications,
+      component: defineAsyncComponent(
+        () => import('src/components/notifications/notifications.vue'),
+      ),
       props: () => ({ disableTeleport: true }),
       beforeEnter: validateAuthenticatedRoute,
     },
-    { name: 'login', path: '/login', component: AuthForm },
+    {
+      name: 'login',
+      path: '/login',
+      component: defineAsyncComponent(
+        () => import('src/components/auth_form/auth_form.js'),
+      ),
+    },
     {
       name: 'shout-panel',
       path: '/shout-panel',
-      component: ShoutPanel,
+      component: defineAsyncComponent(
+        () => import('src/components/shout_panel/shout_panel.vue'),
+      ),
       props: () => ({ floating: false }),
     },
     {
       name: 'oauth-callback',
       path: '/oauth-callback',
-      component: OAuthCallback,
+      component: defineAsyncComponent(
+        () => import('src/components/oauth_callback/oauth_callback.vue'),
+      ),
       props: (route) => ({ code: route.query.code }),
     },
     {
       name: 'search',
       path: '/search',
-      component: Search,
+      component: defineAsyncComponent(
+        () => import('src/components/search/search.vue'),
+      ),
       props: (route) => ({ query: route.query.query }),
     },
     {
       name: 'who-to-follow',
       path: '/who-to-follow',
-      component: WhoToFollow,
+      component: defineAsyncComponent(
+        () => import('src/components/who_to_follow/who_to_follow.vue'),
+      ),
       beforeEnter: validateAuthenticatedRoute,
     },
     { name: 'about', path: '/about', component: About },
     {
       name: 'announcements',
       path: '/announcements',
-      component: AnnouncementsPage,
+      component: defineAsyncComponent(
+        () =>
+          import('src/components/announcements_page/announcements_page.vue'),
+      ),
+    },
+    {
+      name: 'drafts',
+      path: '/drafts',
+      component: defineAsyncComponent(
+        () => import('src/components/drafts/drafts.vue'),
+      ),
+    },
+    {
+      name: 'user-profile',
+      path: '/users/:name',
+      component: defineAsyncComponent(
+        () => import('src/components/user_profile/user_profile.vue'),
+      ),
+    },
+    {
+      name: 'legacy-user-profile',
+      path: '/:name',
+      component: defineAsyncComponent(
+        () => import('src/components/user_profile/user_profile.vue'),
+      ),
+    },
+    {
+      name: 'lists',
+      path: '/lists',
+      component: defineAsyncComponent(
+        () => import('src/components/lists/lists.vue'),
+      ),
+    },
+    {
+      name: 'lists-timeline',
+      path: '/lists/:id',
+      component: defineAsyncComponent(
+        () => 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'),
+      ),
+    },
+    {
+      name: 'lists-new',
+      path: '/lists/new',
+      component: defineAsyncComponent(
+        () => import('src/components/lists_edit/lists_edit.vue'),
+      ),
     },
-    { name: 'drafts', path: '/drafts', component: Drafts },
-    { name: 'user-profile', path: '/users/:name', component: UserProfile },
-    { name: 'legacy-user-profile', path: '/:name', component: UserProfile },
-    { name: 'lists', path: '/lists', component: Lists },
-    { name: 'lists-timeline', path: '/lists/:id', component: ListsTimeline },
-    { name: 'lists-edit', path: '/lists/:id/edit', component: ListsEdit },
-    { name: 'lists-new', path: '/lists/new', component: ListsEdit },
     {
       name: 'edit-navigation',
       path: '/nav-edit',
@@ -187,12 +245,19 @@ export default (store) => {
     {
       name: 'bookmark-folders',
       path: '/bookmark_folders',
-      component: BookmarkFolders,
+      component: defineAsyncComponent(
+        () => import('src/components/bookmark_folders/bookmark_folders.vue'),
+      ),
     },
     {
       name: 'bookmark-folder-new',
       path: '/bookmarks/new-folder',
-      component: BookmarkFolderEdit,
+      component: defineAsyncComponent(
+        () =>
+          import(
+            'src/components/bookmark_folder_edit/bookmark_folder_edit.vue'
+          ),
+      ),
     },
     {
       name: 'bookmark-folder',
@@ -202,7 +267,12 @@ export default (store) => {
     {
       name: 'bookmark-folder-edit',
       path: '/bookmarks/:id/edit',
-      component: BookmarkFolderEdit,
+      component: defineAsyncComponent(
+        () =>
+          import(
+            'src/components/bookmark_folder_edit/bookmark_folder_edit.vue'
+          ),
+      ),
     },
   ]
 
@@ -211,14 +281,18 @@ export default (store) => {
       {
         name: 'chat',
         path: '/users/:username/chats/:recipient_id',
-        component: Chat,
+        component: defineAsyncComponent(
+          () => import('src/components/chat/chat.vue'),
+        ),
         meta: { dontScroll: false },
         beforeEnter: validateAuthenticatedRoute,
       },
       {
         name: 'chats',
         path: '/users/:username/chats',
-        component: ChatList,
+        component: defineAsyncComponent(
+          () => import('src/components/chat_list/chat_list.vue'),
+        ),
         meta: { dontScroll: false },
         beforeEnter: validateAuthenticatedRoute,
       },

src/components/attachment/attachment.js

@@ -1,7 +1,7 @@
 import { mapState } from 'pinia'
+import { defineAsyncComponent } from 'vue'
 
 import nsfwImage from '../../assets/nsfw.png'
-import Flash from '../flash/flash.vue'
 import Popover from '../popover/popover.vue'
 import StillImage from '../still-image/still-image.vue'
 import VideoAttachment from '../video_attachment/video_attachment.vue'
@@ -69,9 +69,13 @@ const Attachment = {
     }
   },
   components: {
-    Flash,
+    Flash: defineAsyncComponent(
+      () => import( 'src/components/flash/flash.vue'),
+    ),
     StillImage,
-    VideoAttachment,
+    VideoAttachment: defineAsyncComponent(
+      () => import( 'src/components/video_attachment/video_attachment.vue'),
+    ),
     Popover,
   },
   computed: {

src/components/chat_message/chat_message.js

@@ -1,14 +1,14 @@
 import { mapState as mapPiniaState } from 'pinia'
-import { defineAsyncComponent } from 'vue'
 import { mapGetters, mapState } from 'vuex'
 
-import Attachment from '../attachment/attachment.vue'
+import Attachment from 'src/components/attachment/attachment.vue'
-import ChatMessageDate from '../chat_message_date/chat_message_date.vue'
+import ChatMessageDate from 'src/components/chat_message_date/chat_message_date.vue'
-import Gallery from '../gallery/gallery.vue'
+import Gallery from 'src/components/gallery/gallery.vue'
-import LinkPreview from '../link-preview/link-preview.vue'
+import LinkPreview from 'src/components/link-preview/link-preview.vue'
-import Popover from '../popover/popover.vue'
+import Popover from 'src/components/popover/popover.vue'
-import StatusContent from '../status_content/status_content.vue'
+import StatusContent from 'src/components/status_content/status_content.vue'
-import UserAvatar from '../user_avatar/user_avatar.vue'
+import UserAvatar from 'src/components/user_avatar/user_avatar.vue'
+import UserPopover from 'src/components/user_popover/user_popover.vue'
 
 import { useInstanceStore } from 'src/stores/instance.js'
 import { useInterfaceStore } from 'src/stores/interface'
@@ -37,9 +37,7 @@ const ChatMessage = {
     Gallery,
     LinkPreview,
     ChatMessageDate,
-    UserPopover: defineAsyncComponent(
+    UserPopover,
-      () => import('../user_popover/user_popover.vue'),
-    ),
   },
   computed: {
     // Returns HH:MM (hours and minutes) in local time.

src/components/chat_title/chat_title.js

@@ -1,7 +1,8 @@
 import { defineAsyncComponent } from 'vue'
 
 import RichContent from 'src/components/rich_content/rich_content.jsx'
-import UserAvatar from '../user_avatar/user_avatar.vue'
+import UserAvatar from 'src/components/user_avatar/user_avatar.vue'
+import UserPopover from 'src/components/user_popover/user_popover.vue'
 
 import { useMergedConfigStore } from 'src/stores/merged_config.js'
 
@@ -10,9 +11,7 @@ export default {
   components: {
     UserAvatar,
     RichContent,
-    UserPopover: defineAsyncComponent(
+    UserPopover,
-      () => import('../user_popover/user_popover.vue'),
-    ),
   },
   props: ['user', 'withAvatar'],
   computed: {

src/components/draft/draft.js

@@ -1,9 +1,8 @@
 import { cloneDeep } from 'lodash'
+import { defineAsyncComponent } from 'vue'
 
 import ConfirmModal from 'src/components/confirm_modal/confirm_modal.vue'
-import EditStatusForm from 'src/components/edit_status_form/edit_status_form.vue'
 import Gallery from 'src/components/gallery/gallery.vue'
-import PostStatusForm from 'src/components/post_status_form/post_status_form.vue'
 import StatusContent from 'src/components/status_content/status_content.vue'
 
 import { useMergedConfigStore } from 'src/stores/merged_config.js'
@@ -15,8 +14,12 @@ library.add(faPollH)
 
 const Draft = {
   components: {
-    PostStatusForm,
+    PostStatusForm: defineAsyncComponent(
-    EditStatusForm,
+      () => import('src/components/post_status_form/post_status_form.vue'),
+    ),
+    EditStatusForm: defineAsyncComponent(
+      () => import('src/components/edit_status_form/edit_status_form.vue'),
+    ),
     ConfirmModal,
     StatusContent,
     Gallery,

src/components/edit_status_modal/edit_status_modal.js

@@ -1,13 +1,15 @@
 import get from 'lodash/get'
+import { defineAsyncComponent } from 'vue'
 
-import EditStatusForm from '../edit_status_form/edit_status_form.vue'
 import Modal from '../modal/modal.vue'
 
 import { useEditStatusStore } from 'src/stores/editStatus.js'
 
 const EditStatusModal = {
   components: {
-    EditStatusForm,
+    EditStatusForm: defineAsyncComponent(
+      () => import('src/components/edit_status_form/edit_status_form.vue'),
+    ),
     Modal,
   },
   data() {

src/components/media_modal/media_modal.js

@@ -1,12 +1,10 @@
-import Flash from 'src/components/flash/flash.vue'
 import GestureService from '../../services/gesture_service/gesture_service'
-import Modal from '../modal/modal.vue'
-import PinchZoom from '../pinch_zoom/pinch_zoom.vue'
-import StillImage from '../still-image/still-image.vue'
-import SwipeClick from '../swipe_click/swipe_click.vue'
-import VideoAttachment from '../video_attachment/video_attachment.vue'
 
 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 { library } from '@fortawesome/fontawesome-svg-core'
 import {
@@ -21,11 +19,19 @@ library.add(faChevronLeft, faChevronRight, faCircleNotch, faTimes)
 const MediaModal = {
   components: {
     StillImage,
-    VideoAttachment,
+    VideoAttachment: defineAsyncComponent(
-    PinchZoom,
+      () => import( 'src/components/video_attachment/video_attachment.vue'),
-    SwipeClick,
+    ),
+    PinchZoom: defineAsyncComponent(
+      () => import( 'src/components/pinch_zoom/pinch_zoom.vue'),
+    ),
+    SwipeClick: defineAsyncComponent(
+      () => import( 'src/components/swipe_click/swipe_click.vue'),
+    ),
     Modal,
-    Flash,
+    Flash: defineAsyncComponent(
+      () => import( 'src/components/flash/flash.vue'),
+    ),
   },
   data() {
     return {

src/components/mention_link/mention_link.js

@@ -2,12 +2,13 @@ import { mapState as mapPiniaState } from 'pinia'
 import { defineAsyncComponent } from 'vue'
 import { mapGetters, mapState } from 'vuex'
 
+import UnicodeDomainIndicator from 'src/components/unicode_domain_indicator/unicode_domain_indicator.vue'
+import UserAvatar from 'src/components/user_avatar/user_avatar.vue'
+import UserPopover from 'src/components/user_popover/user_popover.vue'
 import {
   highlightClass,
   highlightStyle,
 } from '../../services/user_highlighter/user_highlighter.js'
-import UnicodeDomainIndicator from '../unicode_domain_indicator/unicode_domain_indicator.vue'
-import UserAvatar from '../user_avatar/user_avatar.vue'
 
 import { useMergedConfigStore } from 'src/stores/merged_config.js'
 import { useUserHighlightStore } from 'src/stores/user_highlight.js'
@@ -24,9 +25,7 @@ const MentionLink = {
   components: {
     UserAvatar,
     UnicodeDomainIndicator,
-    UserPopover: defineAsyncComponent(
+    UserPopover,
-      () => import('../user_popover/user_popover.vue'),
-    ),
   },
   props: {
     url: {

src/components/mobile_nav/mobile_nav.js

@@ -1,15 +1,15 @@
 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'
 import {
   countExtraNotifications,
   unseenNotificationsFromStore,
 } from '../../services/notification_utils/notification_utils'
-import ConfirmModal from '../confirm_modal/confirm_modal.vue'
-import Notifications from '../notifications/notifications.vue'
-import SideDrawer from '../side_drawer/side_drawer.vue'
 
 import { useAnnouncementsStore } from 'src/stores/announcements.js'
 import { useInstanceStore } from 'src/stores/instance.js'
@@ -30,7 +30,9 @@ library.add(faTimes, faBell, faBars, faArrowUp, faMinus, faCheckDouble)
 const MobileNav = {
   components: {
     SideDrawer,
-    Notifications,
+    Notifications: defineAsyncComponent(
+      () => import('src/components/notifications/notifications.vue'),
+    ),
     NavigationPins,
     ConfirmModal,
   },

src/components/notification/notification.js

@@ -12,7 +12,6 @@ import Status from '../status/status.vue'
 import StatusContent from '../status_content/status_content.vue'
 import Timeago from '../timeago/timeago.vue'
 import UserAvatar from '../user_avatar/user_avatar.vue'
-import UserCard from '../user_card/user_card.vue'
 import UserLink from '../user_link/user_link.vue'
 import UserPopover from '../user_popover/user_popover.vue'
 
@@ -64,7 +63,6 @@ const Notification = {
   components: {
     StatusContent,
     UserAvatar,
-    UserCard,
     Timeago,
     Status,
     Report,

src/components/post_status_form/post_status_form.js

@@ -2,23 +2,23 @@ import { debounce, map, reject, uniqBy } from 'lodash'
 import { mapActions, mapState } from 'pinia'
 import { mapGetters } from 'vuex'
 
+import Attachment from 'src/components/attachment/attachment.vue'
+import Checkbox from 'src/components/checkbox/checkbox.vue'
 import DraftCloser from 'src/components/draft_closer/draft_closer.vue'
+import EmojiInput from 'src/components/emoji_input/emoji_input.vue'
+import suggestor from 'src/components/emoji_input/suggestor.js'
 import Gallery from 'src/components/gallery/gallery.vue'
+import MediaUpload from 'src/components/media_upload/media_upload.vue'
+import PollForm from 'src/components/poll/poll_form.vue'
 import Popover from 'src/components/popover/popover.vue'
+import QuoteForm from 'src/components/quote/quote_form.vue'
+import ScopeSelector from 'src/components/scope_selector/scope_selector.vue'
+import Select from 'src/components/select/select.vue'
+import StatusContent from 'src/components/status_content/status_content.vue'
 import { propsToNative } from '../../services/attributes_helper/attributes_helper.service.js'
 import { findOffset } from '../../services/offset_finder/offset_finder.service.js'
 import genRandomSeed from '../../services/random_seed/random_seed.service.js'
 import statusPoster from '../../services/status_poster/status_poster.service.js'
-import Attachment from '../attachment/attachment.vue'
-import Checkbox from '../checkbox/checkbox.vue'
-import EmojiInput from '../emoji_input/emoji_input.vue'
-import suggestor from '../emoji_input/suggestor.js'
-import MediaUpload from '../media_upload/media_upload.vue'
-import PollForm from '../poll/poll_form.vue'
-import QuoteForm from '../quote/quote_form.vue'
-import ScopeSelector from '../scope_selector/scope_selector.vue'
-import Select from '../select/select.vue'
-import StatusContent from '../status_content/status_content.vue'
 
 import { useEmojiStore } from 'src/stores/emoji.js'
 import { useInstanceStore } from 'src/stores/instance.js'

src/components/post_status_modal/post_status_modal.js

@@ -1,13 +1,15 @@
 import get from 'lodash/get'
+import { defineAsyncComponent } from 'vue'
 
 import Modal from '../modal/modal.vue'
-import PostStatusForm from '../post_status_form/post_status_form.vue'
 
 import { usePostStatusStore } from 'src/stores/post_status.js'
 
 const PostStatusModal = {
   components: {
-    PostStatusForm,
+    PostStatusForm: defineAsyncComponent(
+      () => import('src/components/post_status_form/post_status_form.vue'),
+    ),
     Modal,
   },
   data() {

src/components/quote/quote.js

@@ -7,7 +7,10 @@ library.add(faCircleNotch)
 
 export default {
   components: {
-    Status: defineAsyncComponent(() => import('../status/status.vue')),
+    // Quote and Status depend on each other, dynamic import to break this circular dependency
+    Status: defineAsyncComponent(
+      () => import('src/components/status/status.vue'),
+    ),
   },
   name: 'Quote',
   props: {

src/components/side_drawer/side_drawer.js

@@ -1,10 +1,10 @@
 import { mapActions, mapState } from 'pinia'
+import { defineAsyncComponent } from 'vue'
 import { mapGetters } from 'vuex'
 
 import { USERNAME_ROUTES } from 'src/components/navigation/navigation.js'
 import GestureService from '../../services/gesture_service/gesture_service'
 import { unseenNotificationsFromStore } from '../../services/notification_utils/notification_utils'
-import UserCard from '../user_card/user_card.vue'
 
 import { useAnnouncementsStore } from 'src/stores/announcements'
 import { useInstanceStore } from 'src/stores/instance.js'
@@ -64,7 +64,11 @@ const SideDrawer = {
       this.$store.dispatch('startFetchingFollowRequests')
     }
   },
-  components: { UserCard },
+  components: {
+    UserCard: defineAsyncComponent(
+      () => import('src/components/user_card/user_card.vue'),
+    ),
+  },
   computed: {
     currentUser() {
       return this.$store.state.users.currentUser

src/components/status/status.js

@@ -1,4 +1,5 @@
 import { unescape as ldUnescape, uniqBy } from 'lodash'
+import { defineAsyncComponent } from 'vue'
 
 import MentionLink from 'src/components/mention_link/mention_link.vue'
 import MentionsLine from 'src/components/mentions_line/mentions_line.vue'
@@ -11,7 +12,6 @@ import {
 } from '../../services/user_highlighter/user_highlighter.js'
 import AvatarList from '../avatar_list/avatar_list.vue'
 import EmojiReactions from '../emoji_reactions/emoji_reactions.vue'
-import PostStatusForm from '../post_status_form/post_status_form.vue'
 import Quote from '../quote/quote.vue'
 import StatusContent from '../status_content/status_content.vue'
 import StatusPopover from '../status_popover/status_popover.vue'
@@ -117,7 +117,9 @@ const controlledOrUncontrolledSet = (obj, name, val) => {
 const Status = {
   name: 'Status',
   components: {
-    PostStatusForm,
+    PostStatusForm: defineAsyncComponent(
+      () => import('src/components/post_status_form/post_status_form.vue'),
+    ),
     UserAvatar,
     AvatarList,
     Timeago,

src/components/status_popover/status_popover.js

@@ -1,6 +1,8 @@
 import { find } from 'lodash'
 import { defineAsyncComponent } from 'vue'
 
+import Popover from 'src/components/popover/popover.vue'
+
 import { library } from '@fortawesome/fontawesome-svg-core'
 import { faCircleNotch } from '@fortawesome/free-solid-svg-icons'
 
@@ -20,8 +22,10 @@ const StatusPopover = {
     },
   },
   components: {
-    Status: defineAsyncComponent(() => import('../status/status.vue')),
+    Status: defineAsyncComponent(
-    Popover: defineAsyncComponent(() => import('../popover/popover.vue')),
+      () => import('src/components/status/status.vue'),
+    ),
+    Popover,
   },
   methods: {
     enter() {

src/components/user_list_popover/user_list_popover.js

@@ -1,6 +1,8 @@
 import { defineAsyncComponent } from 'vue'
 
+import Popover from 'src/components/popover/popover.vue'
 import RichContent from 'src/components/rich_content/rich_content.jsx'
+import UserAvatar from 'src/components/user_avatar/user_avatar.vue'
 import UnicodeDomainIndicator from '../unicode_domain_indicator/unicode_domain_indicator.vue'
 
 import { useInstanceStore } from 'src/stores/instance.js'
@@ -19,10 +21,8 @@ const UserListPopover = {
   components: {
     RichContent,
     UnicodeDomainIndicator,
-    Popover: defineAsyncComponent(() => import('../popover/popover.vue')),
+    Popover,
-    UserAvatar: defineAsyncComponent(
+    UserAvatar,
-      () => import('../user_avatar/user_avatar.vue'),
-    ),
   },
   computed: {
     usersCapped() {

src/components/user_panel/user_panel.js

@@ -1,9 +1,6 @@
+import { defineAsyncComponent } from 'vue'
 import { mapState } from 'vuex'
 
-import AuthForm from '../auth_form/auth_form.js'
-import PostStatusForm from '../post_status_form/post_status_form.vue'
-import UserCard from '../user_card/user_card.vue'
-
 const UserPanel = {
   computed: {
     signedIn() {
@@ -12,9 +9,15 @@ const UserPanel = {
     ...mapState({ user: (state) => state.users.currentUser }),
   },
   components: {
-    AuthForm,
+    AuthForm: defineAsyncComponent(
-    PostStatusForm,
+      () => import('src/components/auth_form/auth_form.js'),
-    UserCard,
+    ),
+    PostStatusForm: defineAsyncComponent(
+      () => import('src/components/post_status_form/post_status_form.vue'),
+    ),
+    UserCard: defineAsyncComponent(
+      () => import('src/components/user_card/user_card.vue'),
+    ),
   },
 }
 

src/components/user_popover/user_popover.js

@@ -1,7 +1,7 @@
 import { mapState } from 'pinia'
 import { defineAsyncComponent } from 'vue'
 
-import UserCard from '../user_card/user_card.vue'
+import Popover from 'src/components/popover/popover.vue'
 
 import { useMergedConfigStore } from 'src/stores/merged_config.js'
 
@@ -9,8 +9,10 @@ const UserPopover = {
   name: 'UserPopover',
   props: ['userId', 'overlayCenters', 'disabled', 'overlayCentersSelector'],
   components: {
-    UserCard,
+    UserCard: defineAsyncComponent(
-    Popover: defineAsyncComponent(() => import('../popover/popover.vue')),
+      () => import('src/components/user_card/user_card.vue'),
+    ),
+    Popover,
   },
   computed: mapState(useMergedConfigStore, {
     userPopoverAvatarAction: (state) =>

src/i18n/messages.js

@@ -16,7 +16,7 @@ const ULTIMATE_FALLBACK_LOCALE = 'en'
 
 const hasLanguageFile = (code) => languages.includes(code)
 
-const languageFileMap = import.meta.glob('./*.json')
+const languageFileMap = import.meta.glob(['./*.json', '!./en.json'])
 
 const loadLanguageFile = (code) => {
   const jsonName = langCodeToJsonName(code)

vite.config.js

@@ -3,6 +3,7 @@ import { fileURLToPath } from 'node:url'
 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'
@@ -135,6 +136,12 @@ export default defineConfig(async ({ mode, command }) => {
         },
       }),
       vueJsx(),
+      DevTools({
+        build: {
+          withApp: true, // generate DevTools output during `vite build`
+          // outDir: 'custom-dir', // optional, defaults to Vite's build.outDir
+        },
+      }),
       devSwPlugin({ swSrc, swDest, transformSW, alias }),
       buildSwPlugin({ swSrc, swDest }),
       swMessagesPlugin(),
@@ -197,12 +204,12 @@ export default defineConfig(async ({ mode, command }) => {
     },
     build: {
       sourcemap: true,
-      rollupOptions: {
+      rolldownOptions: {
+        devtools: {}, // enable devtools mode
         input: {
           main: 'index.html',
         },
         output: {
-          inlineDynamicImports: false,
           entryFileNames(chunkInfo) {
             const id = chunkInfo.facadeModuleId
             if (id.endsWith(swSrc)) {