Merge branch 'optimize' into shigusegubu-themes3

src/App.js

@@ -11,7 +11,6 @@ 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 SideDrawer from './components/side_drawer/side_drawer.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'
@@ -47,7 +46,6 @@ export default {
       () => import('src/components/shout_panel/shout_panel.vue'),
     ),
     MediaModal,
-    SideDrawer,
     MobilePostStatusButton,
     MobileNav,
     DesktopNav,

src/components/account_actions/account_actions.js

@@ -2,7 +2,6 @@ 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 Popover from '../popover/popover.vue'
 import ProgressButton from '../progress_button/progress_button.vue'
 
@@ -30,8 +29,9 @@ const AccountActions = {
     ConfirmModal: defineAsyncComponent(
       () => import('src/components/confirm_modal/confirm_modal.vue'),
     ),
-
-    UserTimedFilterModal,
+    UserTimedFilterModal: defineAsyncComponent(
+      () => import( 'src/components/user_timed_filter_modal/user_timed_filter_modal.vue'),
+    ),
   },
   methods: {
     showConfirmRemoveUserFromFollowers() {

src/components/chat_message/chat_message.js

@@ -1,9 +1,9 @@
 import { mapState as mapPiniaState } from 'pinia'
 import { mapGetters, mapState } from 'vuex'
+import { defineAsyncComponent } from 'vue'
 
 import Attachment from 'src/components/attachment/attachment.vue'
 import ChatMessageDate from 'src/components/chat_message_date/chat_message_date.vue'
-import Gallery from 'src/components/gallery/gallery.vue'
 import LinkPreview from 'src/components/link-preview/link-preview.vue'
 import Popover from 'src/components/popover/popover.vue'
 import StatusContent from 'src/components/status_content/status_content.vue'
@@ -34,7 +34,9 @@ const ChatMessage = {
     Attachment,
     StatusContent,
     UserAvatar,
-    Gallery,
+    Gallery: defineAsyncComponent(
+      () => import( 'src/components/gallery/gallery.vue'),
+    ),
     LinkPreview,
     ChatMessageDate,
     UserPopover,

src/components/draft/draft.js

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

src/components/draft/draft.vue

@@ -39,7 +39,7 @@
             class="faint"
           >{{ $t('drafts.empty') }}</p>
         </span>
-        <gallery
+        <Gallery
           v-if="draft.files?.length !== 0"
           class="attachments media-body"
           :compact="true"

src/components/draft_closer/draft_closer.js

@@ -1,5 +1,4 @@
-import DialogModal from 'src/components/dialog_modal/dialog_modal.vue'
-
+import { defineAsyncComponent } from 'vue'
 import { useMergedConfigStore } from 'src/stores/merged_config.js'
 
 const DraftCloser = {
@@ -9,7 +8,9 @@ const DraftCloser = {
     }
   },
   components: {
-    DialogModal,
+    DialogModal: defineAsyncComponent(
+      () => import('src/components/dialog_modal/dialog_modal.vue'),
+    ),
   },
   emits: ['save', 'discard'],
   computed: {

src/components/draft_closer/draft_closer.vue

@@ -1,6 +1,6 @@
 <template>
   <teleport to="#modal">
-    <dialog-modal
+    <DialogModal
       v-if="showing"
       v-body-scroll-lock="true"
       class="confirm-modal"
@@ -36,7 +36,7 @@
           {{ $t('post_status.close_confirm_continue_composing_button') }}
         </button>
       </template>
-    </dialog-modal>
+    </DialogModal>
   </teleport>
 </template>
 

src/components/emoji_picker/emoji_picker.js

@@ -139,7 +139,7 @@ const EmojiPicker = {
   },
   components: {
     StickerPicker: defineAsyncComponent(
-      () => import('../sticker_picker/sticker_picker.vue'),
+      () => import('src/components/sticker_picker/sticker_picker.vue'),
     ),
     Checkbox,
     StillImage,

src/components/mobile_nav/mobile_nav.js

@@ -3,7 +3,6 @@ import { defineAsyncComponent } from 'vue'
 import { mapGetters } from 'vuex'
 
 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,
@@ -28,7 +27,9 @@ library.add(faTimes, faBell, faBars, faArrowUp, faMinus, faCheckDouble)
 
 const MobileNav = {
   components: {
-    SideDrawer,
+    SideDrawer: defineAsyncComponent(
+      () => import('src/components/side_drawer/side_drawer.vue'),
+    ),
     Notifications: defineAsyncComponent(
       () => import('src/components/notifications/notifications.vue'),
     ),

src/components/post_status_form/post_status_form.js

@@ -1,17 +1,15 @@
 import { debounce, map, reject, uniqBy } from 'lodash'
 import { mapActions, mapState } from 'pinia'
 import { mapGetters } from 'vuex'
+import { defineAsyncComponent } from 'vue'
 
 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'
@@ -141,14 +139,20 @@ const PostStatusForm = {
   components: {
     MediaUpload,
     EmojiInput,
-    PollForm,
-    QuoteForm,
+    PollForm: defineAsyncComponent(
+      () => import( 'src/components/poll/poll_form.vue')
+    ),
+    QuoteForm: defineAsyncComponent(
+      () => import( 'src/components/quote/quote_form.vue')
+    ),
     ScopeSelector,
     Checkbox,
     Select,
     Attachment,
     StatusContent,
-    Gallery,
+    Gallery: defineAsyncComponent(
+      () => import( 'src/components/gallery/gallery.vue')
+    ),
     DraftCloser,
     Popover,
   },

src/components/post_status_form/post_status_form.vue

@@ -396,7 +396,7 @@
           />
         </button>
       </div>
-      <gallery
+      <Gallery
         v-if="newStatus.files && newStatus.files.length > 0"
         class="attachments"
         :grid="true"

src/components/post_status_modal/post_status_modal.js

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

src/components/status/status.js

@@ -13,6 +13,7 @@ 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 PostStatusForm from 'src/components/post_status_form/post_status_form.vue'
 import { muteFilterHits } from '../../services/status_parser/status_parser.js'
 import {
   highlightClass,
@@ -115,9 +116,7 @@ const controlledOrUncontrolledSet = (obj, name, val) => {
 const Status = {
   name: 'Status',
   components: {
-    PostStatusForm: defineAsyncComponent(
-      () => import('src/components/post_status_form/post_status_form.vue'),
-    ),
+    PostStatusForm,
     UserAvatar,
     AvatarList,
     Timeago,

src/components/status_action_buttons/action_button_container.js

@@ -1,7 +1,7 @@
 import MuteConfirm from 'src/components/confirm_modal/mute_confirm.vue'
 import Popover from 'src/components/popover/popover.vue'
-import UserTimedFilterModal from 'src/components/user_timed_filter_modal/user_timed_filter_modal.vue'
 import ActionButton from './action_button.vue'
+import { defineAsyncComponent } from 'vue'
 
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
@@ -17,7 +17,9 @@ export default {
     ActionButton,
     Popover,
     MuteConfirm,
-    UserTimedFilterModal,
+    UserTimedFilterModal: defineAsyncComponent(
+      () => import( 'src/components/user_timed_filter_modal/user_timed_filter_modal.vue'),
+    ),
   },
   props: ['button', 'status'],
   emits: ['emojiPickerShown'],

src/components/status_content/status_content.js

@@ -1,9 +1,9 @@
 import { mapState as mapPiniaState } from 'pinia'
 import { mapGetters, mapState } from 'vuex'
+import { defineAsyncComponent } from 'vue'
 
 import StatusBody from 'src/components/status_body/status_body.vue'
 import Attachment from '../attachment/attachment.vue'
-import Gallery from '../gallery/gallery.vue'
 import LinkPreview from '../link-preview/link-preview.vue'
 import Poll from '../poll/poll.vue'
 
@@ -132,7 +132,9 @@ const StatusContent = {
   components: {
     Attachment,
     Poll,
-    Gallery,
+    Gallery: defineAsyncComponent(
+      () => import( 'src/components/gallery/gallery.vue')
+    ),
     LinkPreview,
     StatusBody,
   },

src/components/status_content/status_content.vue

@@ -34,7 +34,7 @@
         />
       </div>
 
-      <gallery
+      <Gallery
         v-if="status.attachments.length !== 0"
         class="attachments media-body"
         :compact="compact"

src/components/user_card/user_card.js

@@ -5,23 +5,20 @@ import {
   merge,
 } from 'lodash'
 import { mapState } from 'pinia'
+import { defineAsyncComponent } from 'vue'
 
+import AccountActions from 'src/components/account_actions/account_actions.vue'
 import Checkbox from 'src/components/checkbox/checkbox.vue'
-import ColorInput from 'src/components/color_input/color_input.vue'
-import DialogModal from 'src/components/dialog_modal/dialog_modal.vue'
 import EmojiInput from 'src/components/emoji_input/emoji_input.vue'
 import suggestor from 'src/components/emoji_input/suggestor.js'
-import ImageCropper from 'src/components/image_cropper/image_cropper.vue'
 import RichContent from 'src/components/rich_content/rich_content.jsx'
-import UserTimedFilterModal from 'src/components/user_timed_filter_modal/user_timed_filter_modal.vue'
-import AccountActions from '../account_actions/account_actions.vue'
 import FollowButton from '../follow_button/follow_button.vue'
-import ModerationTools from '../moderation_tools/moderation_tools.vue'
 import ProgressButton from '../progress_button/progress_button.vue'
 import RemoteFollow from '../remote_follow/remote_follow.vue'
 import Select from '../select/select.vue'
 import UserAvatar from '../user_avatar/user_avatar.vue'
 import UserLink from '../user_link/user_link.vue'
+import ColorInput from 'src/components/color_input/color_input.vue'
 import UserNote from '../user_note/user_note.vue'
 
 import { useEmojiStore } from 'src/stores/emoji.js'
@@ -124,11 +121,15 @@ export default {
     },
   },
   components: {
-    DialogModal,
+    DialogModal: defineAsyncComponent(
+      () => import( 'src/components/dialog_modal/dialog_modal.vue'),
+    ),
     UserAvatar,
     Checkbox,
     RemoteFollow,
-    ModerationTools,
+    ModerationTools: defineAsyncComponent(
+      () => import( 'src/components/moderation_tools/moderation_tools.vue'),
+    ),
     AccountActions,
     ProgressButton,
     FollowButton,
@@ -136,10 +137,14 @@ export default {
     RichContent,
     UserLink,
     UserNote,
-    UserTimedFilterModal,
+    UserTimedFilterModal: defineAsyncComponent(
+      () => import( 'src/components/user_timed_filter_modal/user_timed_filter_modal.vue'),
+    ),
     ColorInput,
     EmojiInput,
-    ImageCropper,
+    ImageCropper: defineAsyncComponent(
+      () => import( 'src/components/image_cropper/image_cropper.vue'),
+    ),
   },
   data() {
     const user = this.$store.getters.findUser(this.userId)

src/components/user_list_menu/user_list_menu.js

@@ -1,6 +1,5 @@
 import { mapState } from 'pinia'
 
-import DialogModal from '../dialog_modal/dialog_modal.vue'
 import Popover from '../popover/popover.vue'
 
 import { useListsStore } from 'src/stores/lists.js'
@@ -16,7 +15,6 @@ const UserListMenu = {
     return {}
   },
   components: {
-    DialogModal,
     Popover,
   },
   created() {
@@ -64,60 +62,6 @@ const UserListMenu = {
           })
       }
     },
-    toggleRight(right) {
-      const store = this.$store
-      if (this.user.rights[right]) {
-        store.state.api.backendInteractor
-          .deleteRight({ user: this.user, right })
-          .then((response) => {
-            if (!response.ok) {
-              return
-            }
-            store.commit('updateRight', {
-              user: this.user,
-              right,
-              value: false,
-            })
-          })
-      } else {
-        store.state.api.backendInteractor
-          .addRight({ user: this.user, right })
-          .then((response) => {
-            if (!response.ok) {
-              return
-            }
-            store.commit('updateRight', { user: this.user, right, value: true })
-          })
-      }
-    },
-    toggleActivationStatus() {
-      this.$store.dispatch('toggleActivationStatus', { user: this.user })
-    },
-    deleteUserDialog(show) {
-      this.showDeleteUserDialog = show
-    },
-    deleteUser() {
-      const store = this.$store
-      const user = this.user
-      const { id, name } = user
-      store.state.api.backendInteractor.deleteUser({ user }).then(() => {
-        this.$store.dispatch(
-          'markStatusesAsDeleted',
-          (status) => user.id === status.user.id,
-        )
-        const isProfile =
-          this.$route.name === 'external-user-profile' ||
-          this.$route.name === 'user-profile'
-        const isTargetUser =
-          this.$route.params.name === name || this.$route.params.id === id
-        if (isProfile && isTargetUser) {
-          window.history.back()
-        }
-      })
-    },
-    setToggled(value) {
-      this.toggled = value
-    },
   },
 }
 

src/components/user_panel/user_panel.js

@@ -1,5 +1,7 @@
 import { defineAsyncComponent } from 'vue'
 import { mapState } from 'vuex'
+import PostStatusForm from 'src/components/post_status_form/post_status_form.vue'
+import UserCard from 'src/components/user_card/user_card.vue'
 
 const UserPanel = {
   computed: {
@@ -12,12 +14,8 @@ const UserPanel = {
     AuthForm: defineAsyncComponent(
       () => import('src/components/auth_form/auth_form.js'),
     ),
-    PostStatusForm: defineAsyncComponent(
-      () => import('src/components/post_status_form/post_status_form.vue'),
-    ),
-    UserCard: defineAsyncComponent(
-      () => import('src/components/user_card/user_card.vue'),
-    ),
+    PostStatusForm,
+    UserCard,
   },
 }
 

src/services/entity_normalizer/entity_normalizer.service.js

@@ -3,7 +3,7 @@ import escapeHtml from 'escape-html'
 import { unescape as lodashUnescape } from 'lodash'
 import punycode from 'punycode.js'
 
-import fileTypeService from '../file_type/file_type.service.js'
+import { fileType } from '../file_type/file_type.service.js'
 import { isStatusNotification } from '../notification_utils/notification_utils.js'
 
 /** NOTICE! **
@@ -304,7 +304,7 @@ export const parseAttachment = (data) => {
   if (data.type !== 'unknown') {
     output.type = data.type
   } else {
-    output.type = fileTypeService.fileType(output.mimetype)
+    output.type = fileType(output.mimetype)
   }
   output.url = data.url
   output.large_thumb_url = data.preview_url