Merge remote-tracking branch 'origin/develop' into shigusegubu-themes3

Migrate from vuex to pinia

Closes #1202

See merge request pleroma/pleroma-fe!1807

build/build.js

@@ -1,5 +1,5 @@
 // https://github.com/shelljs/shelljs
-require('./check-versions')()
+import('./check-versions.mjs').then(m => m.default())
 require('shelljs/global')
 env.NODE_ENV = 'production'
 

build/check-versions.mjs

@@ -1,10 +1,7 @@
-var semver = require('semver')
+import semver from 'semver'
-var chalk = require('chalk')
+import chalk from 'chalk'
-var packageConfig = require('../package.json')
+
-var exec = function (cmd) {
+import packageConfig from '../package.json' with { type: 'json' }
-  return require('child_process')
-    .execSync(cmd).toString().trim()
-}
 
 var versionRequirements = [
   {
@@ -14,10 +11,10 @@ var versionRequirements = [
   }
 ]
 
-module.exports = function () {
+export default function () {
-  var warnings = []
+  const warnings = []
-  for (var i = 0; i < versionRequirements.length; i++) {
+  for (let i = 0; i < versionRequirements.length; i++) {
-    var mod = versionRequirements[i]
+    const mod = versionRequirements[i]
     if (!semver.satisfies(mod.currentVersion, mod.versionRequirement)) {
       warnings.push(mod.name + ': ' +
         chalk.red(mod.currentVersion) + ' should be ' +
@@ -28,8 +25,8 @@ module.exports = function () {
 
   if (warnings.length) {
     console.warn(chalk.yellow('\nTo use this template, you must update following to modules:\n'))
-    for (var i = 0; i < warnings.length; i++) {
+    for (let i = 0; i < warnings.length; i++) {
-      var warning = warnings[i]
+      const warning = warnings[i]
       console.warn('  ' + warning)
     }
     console.warn()

build/dev-server.js

@@ -1,4 +1,4 @@
-require('./check-versions')()
+import('./check-versions.mjs').then(m => m.default())
 var config = require('../config')
 if (!process.env.NODE_ENV) process.env.NODE_ENV = config.dev.env
 var path = require('path')

changelog.d/always-jpeg.add

@@ -0,0 +1 @@
+Added option to always convert images to JPEG format instead of using WebP when compressing images. 

changelog.d/pinia.change

@@ -0,0 +1 @@
+Partially migrated from vuex to pinia

package.json

@@ -37,7 +37,7 @@
     "localforage": "1.10.0",
     "pako": "^2.1.0",
     "parse-link-header": "2.0.0",
-    "phoenix": "1.7.18",
+    "phoenix": "1.7.19",
     "pinia": "^2.0.33",
     "punycode.js": "2.3.1",
     "qrcode": "1.5.4",
@@ -66,13 +66,13 @@
     "babel-loader": "9.2.1",
     "babel-plugin-lodash": "3.3.4",
     "chai": "4.5.0",
-    "chalk": "1.1.3",
+    "chalk": "5.4.1",
-    "chromedriver": "108.0.0",
+    "chromedriver": "132.0.2",
     "connect-history-api-fallback": "2.0.0",
-    "copy-webpack-plugin": "11.0.0",
+    "copy-webpack-plugin": "12.0.2",
     "cross-spawn": "7.0.6",
-    "css-loader": "6.11.0",
+    "css-loader": "7.1.2",
-    "css-minimizer-webpack-plugin": "4.2.2",
+    "css-minimizer-webpack-plugin": "7.0.0",
     "custom-event-polyfill": "1.0.7",
     "eslint": "8.57.1",
     "eslint-config-standard": "17.1.0",
@@ -106,12 +106,12 @@
     "ora": "0.4.1",
     "postcss": "8.5.1",
     "postcss-html": "^1.5.0",
-    "postcss-loader": "7.0.2",
+    "postcss-loader": "7.3.4",
     "postcss-scss": "^4.0.6",
-    "sass": "1.60.0",
+    "sass": "1.83.4",
     "sass-loader": "13.3.3",
     "selenium-server": "3.141.59",
-    "semver": "7.6.3",
+    "semver": "7.7.0",
     "serviceworker-webpack5-plugin": "2.0.0",
     "shelljs": "0.8.5",
     "sinon": "15.2.0",
@@ -123,11 +123,11 @@
     "stylelint-config-standard": "29.0.0",
     "stylelint-rscss": "0.4.0",
     "stylelint-webpack-plugin": "^3.3.0",
-    "vue-loader": "17.0.1",
+    "vue-loader": "17.4.2",
     "vue-style-loader": "4.1.3",
-    "webpack": "5.75.0",
+    "webpack": "5.97.1",
     "webpack-dev-middleware": "3.7.3",
-    "webpack-hot-middleware": "2.25.3",
+    "webpack-hot-middleware": "2.26.1",
     "webpack-merge": "0.20.0"
   },
   "engines": {

src/boot/after_store.js

@@ -17,9 +17,9 @@ import { applyConfig } from '../services/style_setter/style_setter.js'
 import FaviconService from '../services/favicon_service/favicon_service.js'
 import { initServiceWorker, updateFocus } from '../services/sw/sw.js'
 
-import { useI18nStore } from '../stores/i18n'
+import { useI18nStore } from 'src/stores/i18n'
-import { useInterfaceStore } from '../stores/interface'
+import { useInterfaceStore } from 'src/stores/interface'
-import { useAnnouncementsStore } from '../stores/announcements'
+import { useAnnouncementsStore } from 'src/stores/announcements'
 
 let staticInitialResults = null
 

src/components/account_actions/account_actions.js

@@ -7,7 +7,7 @@ import { library } from '@fortawesome/fontawesome-svg-core'
 import {
   faEllipsisV
 } from '@fortawesome/free-solid-svg-icons'
-import { useReportsStore } from '../../stores/reports'
+import { useReportsStore } from 'src/stores/reports'
 
 library.add(
   faEllipsisV

src/components/announcement/announcement.js

@@ -2,7 +2,7 @@ import { mapState } from 'vuex'
 import AnnouncementEditor from '../announcement_editor/announcement_editor.vue'
 import RichContent from '../rich_content/rich_content.jsx'
 import localeService from '../../services/locale/locale.service.js'
-import { useAnnouncementsStore } from '../../stores/announcements'
+import { useAnnouncementsStore } from 'src/stores/announcements'
 
 const Announcement = {
   components: {

src/components/announcements_page/announcements_page.js

@@ -1,7 +1,7 @@
 import { mapState } from 'vuex'
 import Announcement from '../announcement/announcement.vue'
 import AnnouncementEditor from '../announcement_editor/announcement_editor.vue'
-import { useAnnouncementsStore } from '../../stores/announcements'
+import { useAnnouncementsStore } from 'src/stores/announcements'
 
 const AnnouncementsPage = {
   components: {

src/components/attachment/attachment.js

@@ -18,7 +18,7 @@ import {
   faPencilAlt,
   faAlignRight
 } from '@fortawesome/free-solid-svg-icons'
-import { useMediaViewerStore } from '../../stores/media_viewer'
+import { useMediaViewerStore } from 'src/stores/media_viewer'
 
 library.add(
   faFile,

src/components/chat/chat.js

@@ -14,7 +14,7 @@ import {
   faChevronLeft
 } from '@fortawesome/free-solid-svg-icons'
 import { buildFakeMessage } from '../../services/chat_utils/chat_utils.js'
-import { useInterfaceStore } from '../../stores/interface.js'
+import { useInterfaceStore } from 'src/stores/interface.js'
 
 library.add(
   faChevronDown,

src/components/chat_message/chat_message.js

@@ -13,7 +13,7 @@ import {
   faTimes,
   faEllipsisH
 } from '@fortawesome/free-solid-svg-icons'
-import { useInterfaceStore } from '../../stores/interface'
+import { useInterfaceStore } from 'src/stores/interface'
 
 library.add(
   faTimes,

src/components/desktop_nav/desktop_nav.js

@@ -14,7 +14,7 @@ import {
   faCog,
   faInfoCircle
 } from '@fortawesome/free-solid-svg-icons'
-import { useInterfaceStore } from '../../stores/interface'
+import { useInterfaceStore } from 'src/stores/interface'
 
 library.add(
   faSignInAlt,

src/components/edit_status_modal/edit_status_modal.js

@@ -1,7 +1,7 @@
 import EditStatusForm from '../edit_status_form/edit_status_form.vue'
 import Modal from '../modal/modal.vue'
 import get from 'lodash/get'
-import { useEditStatusStore } from '../../stores/editStatus'
+import { useEditStatusStore } from 'src/stores/editStatus'
 
 const EditStatusModal = {
   components: {

src/components/extra_notifications/extra_notifications.js

@@ -1,6 +1,6 @@
 import { mapGetters } from 'vuex'
 import { mapState as mapPiniaState } from 'pinia'
-import { useAnnouncementsStore } from '../../stores/announcements'
+import { useAnnouncementsStore } from 'src/stores/announcements'
 
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
@@ -9,7 +9,7 @@ import {
   faBullhorn
 } from '@fortawesome/free-solid-svg-icons'
 
-import { useInterfaceStore } from '../../stores/interface'
+import { useInterfaceStore } from 'src/stores/interface'
 
 library.add(
   faUserPlus,

src/components/gallery/gallery.js

@@ -1,4 +1,4 @@
-import { useMediaViewerStore } from '../../stores/media_viewer'
+import { useMediaViewerStore } from 'src/stores/media_viewer'
 import Attachment from '../attachment/attachment.vue'
 import { sumBy, set } from 'lodash'
 

src/components/global_notice_list/global_notice_list.js

@@ -2,7 +2,7 @@ import { library } from '@fortawesome/fontawesome-svg-core'
 import {
   faTimes
 } from '@fortawesome/free-solid-svg-icons'
-import { useInterfaceStore } from '../../stores/interface'
+import { useInterfaceStore } from 'src/stores/interface'
 
 library.add(
   faTimes

src/components/lists/lists.js

@@ -1,4 +1,4 @@
-import { useListsStore } from '../../stores/lists'
+import { useListsStore } from 'src/stores/lists'
 import ListsCard from '../lists_card/lists_card.vue'
 
 const Lists = {

src/components/lists_edit/lists_edit.js

@@ -10,8 +10,8 @@ import {
   faSearch,
   faChevronLeft
 } from '@fortawesome/free-solid-svg-icons'
-import { useInterfaceStore } from '../../stores/interface'
+import { useInterfaceStore } from 'src/stores/interface'
-import { useListsStore } from '../../stores/lists'
+import { useListsStore } from 'src/stores/lists'
 
 library.add(
   faSearch,

src/components/lists_menu/lists_menu_content.js

@@ -2,7 +2,7 @@ import { mapState } from 'vuex'
 import { mapState as mapPiniaState } from 'pinia'
 import NavigationEntry from 'src/components/navigation/navigation_entry.vue'
 import { getListEntries } from 'src/components/navigation/filter.js'
-import { useListsStore } from '../../stores/lists'
+import { useListsStore } from 'src/stores/lists'
 
 export const ListsMenuContent = {
   props: [

src/components/lists_timeline/lists_timeline.js

@@ -1,4 +1,4 @@
-import { useListsStore } from '../../stores/lists'
+import { useListsStore } from 'src/stores/lists'
 import Timeline from '../timeline/timeline.vue'
 const ListsTimeline = {
   data () {

src/components/media_modal/media_modal.js

@@ -13,7 +13,7 @@ import {
   faCircleNotch,
   faTimes
 } from '@fortawesome/free-solid-svg-icons'
-import { useMediaViewerStore } from '../../stores/media_viewer'
+import { useMediaViewerStore } from 'src/stores/media_viewer'
 
 library.add(
   faChevronLeft,

src/components/media_upload/media_upload.js

@@ -76,9 +76,9 @@ const mediaUpload = {
           const testCanvas = document.createElement('canvas')
           const supportsWebP = testCanvas.toDataURL('image/webp').startsWith('data:image/webp')
 
-          // Convert to WebP if supported, otherwise JPEG
+          // Convert to WebP if supported and alwaysUseJpeg is false, otherwise JPEG
-          const type = supportsWebP ? 'image/webp' : 'image/jpeg'
+          const type = (!this.$store.getters.mergedConfig.alwaysUseJpeg && supportsWebP) ? 'image/webp' : 'image/jpeg'
-          const extension = supportsWebP ? '.webp' : '.jpg'
+          const extension = type === 'image/webp' ? '.webp' : '.jpg'
 
           // Remove the original extension and add new one
           const newFileName = file.name.replace(/\.[^/.]+$/, '') + extension

src/components/mobile_nav/mobile_nav.js

@@ -18,7 +18,7 @@ import {
   faMinus,
   faCheckDouble
 } from '@fortawesome/free-solid-svg-icons'
-import { useAnnouncementsStore } from '../../stores/announcements'
+import { useAnnouncementsStore } from 'src/stores/announcements'
 
 library.add(
   faTimes,

src/components/mobile_post_status_button/mobile_post_status_button.js

@@ -3,7 +3,7 @@ import { library } from '@fortawesome/fontawesome-svg-core'
 import {
   faPen
 } from '@fortawesome/free-solid-svg-icons'
-import { usePostStatusStore } from '../../stores/postStatus'
+import { usePostStatusStore } from 'src/stores/postStatus'
 
 library.add(
   faPen

src/components/navigation/navigation_entry.js

@@ -4,7 +4,7 @@ import OptionalRouterLink from 'src/components/optional_router_link/optional_rou
 import { library } from '@fortawesome/fontawesome-svg-core'
 import { faThumbtack } from '@fortawesome/free-solid-svg-icons'
 import { mapStores } from 'pinia'
-import { useAnnouncementsStore } from '../../stores/announcements'
+import { useAnnouncementsStore } from 'src/stores/announcements'
 
 library.add(faThumbtack)
 

src/components/notifications/notifications.js

@@ -15,8 +15,8 @@ import {
 import FaviconService from '../../services/favicon_service/favicon_service.js'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import { faCircleNotch, faArrowUp, faMinus } from '@fortawesome/free-solid-svg-icons'
-import { useInterfaceStore } from '../../stores/interface'
+import { useInterfaceStore } from 'src/stores/interface'
-import { useAnnouncementsStore } from '../../stores/announcements'
+import { useAnnouncementsStore } from 'src/stores/announcements'
 
 library.add(
   faCircleNotch,

src/components/poll/poll.js

@@ -2,7 +2,7 @@ import Timeago from 'components/timeago/timeago.vue'
 import genRandomSeed from '../../services/random_seed/random_seed.service.js'
 import RichContent from 'components/rich_content/rich_content.jsx'
 import { forEach, map } from 'lodash'
-import { usePollsStore } from '../../stores/polls'
+import { usePollsStore } from 'src/stores/polls'
 
 export default {
   name: 'Poll',

src/components/post_status_modal/post_status_modal.js

@@ -1,7 +1,7 @@
 import PostStatusForm from '../post_status_form/post_status_form.vue'
 import Modal from '../modal/modal.vue'
 import get from 'lodash/get'
-import { usePostStatusStore } from '../../stores/postStatus'
+import { usePostStatusStore } from 'src/stores/postStatus'
 
 const PostStatusModal = {
   components: {

src/components/quick_filter_settings/quick_filter_settings.js

@@ -3,7 +3,7 @@ import { mapGetters } from 'vuex'
 import { mapState } from 'pinia'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import { faFilter, faFont, faWrench } from '@fortawesome/free-solid-svg-icons'
-import { useInterfaceStore } from '../../stores/interface'
+import { useInterfaceStore } from 'src/stores/interface'
 
 library.add(
   faFilter,

src/components/quick_view_settings/quick_view_settings.js

@@ -4,7 +4,7 @@ import { mapGetters } from 'vuex'
 import { mapState } from 'pinia'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import { faList, faFolderTree, faBars, faWrench } from '@fortawesome/free-solid-svg-icons'
-import { useInterfaceStore } from '../../stores/interface'
+import { useInterfaceStore } from 'src/stores/interface'
 
 library.add(
   faList,

src/components/report/report.js

@@ -1,4 +1,4 @@
-import { useReportsStore } from '../../stores/reports'
+import { useReportsStore } from 'src/stores/reports'
 import Select from '../select/select.vue'
 import StatusContent from '../status_content/status_content.vue'
 import Timeago from '../timeago/timeago.vue'

src/components/settings_modal/settings_modal.js

@@ -21,7 +21,7 @@ import {
 import {
   faWindowMinimize
 } from '@fortawesome/free-regular-svg-icons'
-import { useInterfaceStore } from '../../stores/interface'
+import { useInterfaceStore } from 'src/stores/interface'
 
 const PLEROMAFE_SETTINGS_MAJOR_VERSION = 1
 const PLEROMAFE_SETTINGS_MINOR_VERSION = 0

src/components/settings_modal/tabs/general_tab.vue

@@ -269,6 +269,14 @@
             {{ $t('settings.image_compression') }}
           </BooleanSetting>
         </li>
+        <li>
+          <BooleanSetting
+            path="alwaysUseJpeg"
+            expert="1"
+          >
+            {{ $t('settings.always_use_jpeg') }}
+          </BooleanSetting>
+        </li>
         <li>
           <BooleanSetting
             path="useContainFit"

src/components/settings_modal/tabs/profile_tab.js

@@ -21,7 +21,7 @@ import {
   faPlus,
   faCircleNotch
 } from '@fortawesome/free-solid-svg-icons'
-import { useInterfaceStore } from '../../../stores/interface'
+import { useInterfaceStore } from 'src/stores/interface'
 
 library.add(
   faTimes,

src/components/settings_modal/tabs/theme_tab/theme_tab.js

@@ -43,7 +43,7 @@ import Checkbox from 'src/components/checkbox/checkbox.vue'
 import Select from 'src/components/select/select.vue'
 
 import Preview from './theme_preview.vue'
-import { useInterfaceStore } from '../../../../stores/interface'
+import { useInterfaceStore } from 'src/stores/interface'
 
 // List of color values used in v1
 const v1OnlyNames = [

src/components/shout_panel/shout_panel.js

@@ -4,7 +4,7 @@ import {
   faBullhorn,
   faTimes
 } from '@fortawesome/free-solid-svg-icons'
-import { useShoutStore } from '../../stores/shout'
+import { useShoutStore } from 'src/stores/shout'
 
 library.add(
   faBullhorn,

src/components/side_drawer/side_drawer.js

@@ -21,9 +21,9 @@ import {
   faList,
   faFilePen
 } from '@fortawesome/free-solid-svg-icons'
-import { useShoutStore } from '../../stores/shout'
+import { useShoutStore } from 'src/stores/shout'
-import { useInterfaceStore } from '../../stores/interface'
+import { useInterfaceStore } from 'src/stores/interface'
-import { useAnnouncementsStore } from '../../stores/announcements'
+import { useAnnouncementsStore } from 'src/stores/announcements'
 
 library.add(
   faSignInAlt,

src/components/status_content/status_content.js

@@ -13,7 +13,7 @@ import {
   faLink,
   faPollH
 } from '@fortawesome/free-solid-svg-icons'
-import { useMediaViewerStore } from '../../stores/media_viewer'
+import { useMediaViewerStore } from 'src/stores/media_viewer'
 
 library.add(
   faCircleNotch,

src/components/status_history_modal/status_history_modal.js

@@ -1,7 +1,7 @@
 import { get } from 'lodash'
 import Modal from '../modal/modal.vue'
 import Status from '../status/status.vue'
-import { useStatusHistoryStore } from '../../stores/statusHistory'
+import { useStatusHistoryStore } from 'src/stores/statusHistory'
 
 const StatusHistoryModal = {
   components: {

src/components/tab_switcher/tab_switcher.jsx

@@ -4,7 +4,7 @@ import { mapState } from 'pinia'
 import { FontAwesomeIcon as FAIcon } from '@fortawesome/vue-fontawesome'
 
 import './tab_switcher.scss'
-import { useInterfaceStore } from '../../stores/interface'
+import { useInterfaceStore } from 'src/stores/interface'
 
 const findFirstUsable = (slots) => slots.findIndex(_ => _.props)
 

src/components/timeline/timeline.js

@@ -8,7 +8,7 @@ import QuickViewSettings from '../quick_view_settings/quick_view_settings.vue'
 import { debounce, throttle, keyBy } from 'lodash'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import { faCircleNotch, faCirclePlus, faCog, faMinus, faArrowUp, faCheck } from '@fortawesome/free-solid-svg-icons'
-import { useInterfaceStore } from '../../stores/interface'
+import { useInterfaceStore } from 'src/stores/interface'
 
 library.add(
   faCircleNotch,

src/components/timeline_menu/timeline_menu.js

@@ -9,8 +9,8 @@ import { filterNavigation } from 'src/components/navigation/filter.js'
 import {
   faChevronDown
 } from '@fortawesome/free-solid-svg-icons'
-import { useInterfaceStore } from '../../stores/interface'
+import { useInterfaceStore } from 'src/stores/interface'
-import { useListsStore } from '../../stores/lists'
+import { useListsStore } from 'src/stores/lists'
 
 library.add(faChevronDown)
 

src/components/user_card/user_card.js

@@ -11,7 +11,7 @@ import RichContent from 'src/components/rich_content/rich_content.jsx'
 import MuteConfirm from '../confirm_modal/mute_confirm.vue'
 import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
 import { mapGetters } from 'vuex'
-import { usePostStatusStore } from '../../stores/postStatus'
+import { usePostStatusStore } from 'src/stores/postStatus'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
   faBell,
@@ -22,6 +22,7 @@ import {
   faTimes,
   faExpandAlt
 } from '@fortawesome/free-solid-svg-icons'
+
 import { useMediaViewerStore } from '../../stores/media_viewer'
 import { useInterfaceStore } from '../../stores/interface'
 

src/components/user_list_menu/user_list_menu.js

@@ -4,7 +4,7 @@ import { mapState } from 'pinia'
 
 import DialogModal from '../dialog_modal/dialog_modal.vue'
 import Popover from '../popover/popover.vue'
-import { useListsStore } from '../../stores/lists'
+import { useListsStore } from 'src/stores/lists'
 
 library.add(faChevronRight)
 

src/components/user_reporting_modal/user_reporting_modal.js

@@ -3,7 +3,7 @@ import List from '../list/list.vue'
 import Checkbox from '../checkbox/checkbox.vue'
 import Modal from '../modal/modal.vue'
 import UserLink from '../user_link/user_link.vue'
-import { useReportsStore } from '../../stores/reports'
+import { useReportsStore } from 'src/stores/reports'
 
 const UserReportingModal = {
   components: {

src/i18n/en.json

@@ -440,6 +440,7 @@
     "attachmentRadius": "Attachments",
     "attachments": "Attachments",
     "image_compression": "Compress images before uploading",
+    "always_use_jpeg": "Always convert images to JPEG format",
     "avatar": "Avatar",
     "avatarAltRadius": "Avatars (notifications)",
     "avatarRadius": "Avatars",

src/lib/persisted_state.js

@@ -1,6 +1,6 @@
 import merge from 'lodash.merge'
 import { each, get, set, cloneDeep } from 'lodash'
-import { useInterfaceStore } from '../stores/interface'
+import { useInterfaceStore } from 'src/stores/interface'
 import { storage } from './storage.js'
 
 let loaded = false

src/lib/push_notifications_plugin.js

@@ -1,4 +1,4 @@
-import { useInterfaceStore } from '../stores/interface'
+import { useInterfaceStore } from 'src/stores/interface'
 
 export default (store) => {
   store.subscribe((mutation, state) => {

src/main.js

@@ -7,7 +7,6 @@ import './lib/event_target_polyfill.js'
 import instanceModule from './modules/instance.js'
 import statusesModule from './modules/statuses.js'
 import notificationsModule from './modules/notifications.js'
-import listsModule from './modules/lists.js'
 import usersModule from './modules/users.js'
 import apiModule from './modules/api.js'
 import configModule from './modules/config.js'
@@ -94,7 +93,6 @@ const persistedStateOptions = {
         instance: instanceModule,
         // TODO refactor users/statuses modules, they depend on each other
         users: usersModule,
-        lists: listsModule,
         statuses: statusesModule,
         notifications: notificationsModule,
         api: apiModule,

src/modules/api.js

@@ -2,8 +2,8 @@ import backendInteractorService from '../services/backend_interactor_service/bac
 import { WSConnectionStatus } from '../services/api/api.service.js'
 import { maybeShowChatNotification } from '../services/chat_utils/chat_utils.js'
 import { Socket } from 'phoenix'
-import { useShoutStore } from '../stores/shout.js'
+import { useShoutStore } from 'src/stores/shout.js'
-import { useInterfaceStore } from '../stores/interface.js'
+import { useInterfaceStore } from 'src/stores/interface.js'
 
 const retryTimeout = (multiplier) => 1000 * multiplier
 

src/modules/config.js

@@ -3,8 +3,8 @@ import { applyConfig } from '../services/style_setter/style_setter.js'
 import messages from '../i18n/messages'
 import { set } from 'lodash'
 import localeService from '../services/locale/locale.service.js'
-import { useI18nStore } from '../stores/i18n.js'
+import { useI18nStore } from 'src/stores/i18n.js'
-import { useInterfaceStore } from '../stores/interface.js'
+import { useInterfaceStore } from 'src/stores/interface.js'
 
 import { defaultState } from './default_config_state.js'
 
@@ -36,8 +36,6 @@ export const multiChoiceProperties = [
   'unsavedPostAction' // save | discard | confirm
 ]
 
-console.log('TEST', defaultState)
-
 // caching the instance default properties
 export const instanceDefaultProperties = Object.entries(defaultState)
   .filter(([key, value]) => value === undefined)

src/modules/default_config_state.js

@@ -160,5 +160,6 @@ export const defaultState = {
   useAbsoluteTimeFormat: undefined, // instance default
   absoluteTimeFormatMinAge: undefined, // instance default
   absoluteTime12h: undefined, // instance default
-  imageCompression: true
+  imageCompression: true,
+  alwaysUseJpeg: false
 }

src/modules/instance.js

@@ -1,7 +1,7 @@
 import apiService from '../services/api/api.service.js'
 import { instanceDefaultProperties } from './config.js'
 import { langCodeToCldrName, ensureFinalFallback } from '../i18n/languages.js'
-import { useInterfaceStore } from '../stores/interface.js'
+import { useInterfaceStore } from 'src/stores/interface.js'
 
 const SORTED_EMOJI_GROUP_IDS = [
   'smileys-and-emotion',

src/modules/lists.js

@@ -1,130 +0,0 @@
-import { remove, find } from 'lodash'
-
-export const defaultState = {
-  allLists: [],
-  allListsObject: {}
-}
-
-export const mutations = {
-  setLists (state, value) {
-    state.allLists = value
-  },
-  setList (state, { listId, title }) {
-    if (!state.allListsObject[listId]) {
-      state.allListsObject[listId] = { accountIds: [] }
-    }
-    state.allListsObject[listId].title = title
-
-    const entry = find(state.allLists, { id: listId })
-    if (!entry) {
-      state.allLists.push({ id: listId, title })
-    } else {
-      entry.title = title
-    }
-  },
-  setListAccounts (state, { listId, accountIds }) {
-    if (!state.allListsObject[listId]) {
-      state.allListsObject[listId] = { accountIds: [] }
-    }
-    state.allListsObject[listId].accountIds = accountIds
-  },
-  addListAccount (state, { listId, accountId }) {
-    if (!state.allListsObject[listId]) {
-      state.allListsObject[listId] = { accountIds: [] }
-    }
-    state.allListsObject[listId].accountIds.push(accountId)
-  },
-  removeListAccount (state, { listId, accountId }) {
-    if (!state.allListsObject[listId]) {
-      state.allListsObject[listId] = { accountIds: [] }
-    }
-    const { accountIds } = state.allListsObject[listId]
-    const set = new Set(accountIds)
-    set.delete(accountId)
-    state.allListsObject[listId].accountIds = [...set]
-  },
-  deleteList (state, { listId }) {
-    delete state.allListsObject[listId]
-    remove(state.allLists, list => list.id === listId)
-  }
-}
-
-const actions = {
-  setLists ({ commit }, value) {
-    commit('setLists', value)
-  },
-  createList ({ rootState, commit }, { title }) {
-    return rootState.api.backendInteractor.createList({ title })
-      .then((list) => {
-        commit('setList', { listId: list.id, title })
-        return list
-      })
-  },
-  fetchList ({ rootState, commit }, { listId }) {
-    return rootState.api.backendInteractor.getList({ listId })
-      .then((list) => commit('setList', { listId: list.id, title: list.title }))
-  },
-  fetchListAccounts ({ rootState, commit }, { listId }) {
-    return rootState.api.backendInteractor.getListAccounts({ listId })
-      .then((accountIds) => commit('setListAccounts', { listId, accountIds }))
-  },
-  setList ({ rootState, commit }, { listId, title }) {
-    rootState.api.backendInteractor.updateList({ listId, title })
-    commit('setList', { listId, title })
-  },
-  setListAccounts ({ rootState, commit }, { listId, accountIds }) {
-    const saved = rootState.lists.allListsObject[listId].accountIds || []
-    const added = accountIds.filter(id => !saved.includes(id))
-    const removed = saved.filter(id => !accountIds.includes(id))
-    commit('setListAccounts', { listId, accountIds })
-    if (added.length > 0) {
-      rootState.api.backendInteractor.addAccountsToList({ listId, accountIds: added })
-    }
-    if (removed.length > 0) {
-      rootState.api.backendInteractor.removeAccountsFromList({ listId, accountIds: removed })
-    }
-  },
-  addListAccount ({ rootState, commit }, { listId, accountId }) {
-    return rootState
-      .api
-      .backendInteractor
-      .addAccountsToList({ listId, accountIds: [accountId] })
-      .then((result) => {
-        commit('addListAccount', { listId, accountId })
-        return result
-      })
-  },
-  removeListAccount ({ rootState, commit }, { listId, accountId }) {
-    return rootState
-      .api
-      .backendInteractor
-      .removeAccountsFromList({ listId, accountIds: [accountId] })
-      .then((result) => {
-        commit('removeListAccount', { listId, accountId })
-        return result
-      })
-  },
-  deleteList ({ rootState, commit }, { listId }) {
-    rootState.api.backendInteractor.deleteList({ listId })
-    commit('deleteList', { listId })
-  }
-}
-
-export const getters = {
-  findListTitle: state => id => {
-    if (!state.allListsObject[id]) return
-    return state.allListsObject[id].title
-  },
-  findListAccounts: state => id => {
-    return [...state.allListsObject[id].accountIds]
-  }
-}
-
-const lists = {
-  state: defaultState,
-  mutations,
-  actions,
-  getters
-}
-
-export default lists

src/modules/notifications.js

@@ -11,7 +11,7 @@ import {
   closeAllDesktopNotifications
 } from '../services/desktop_notification_utils/desktop_notification_utils.js'
 
-import { useReportsStore } from '../stores/reports.js'
+import { useReportsStore } from 'src/stores/reports.js'
 
 const emptyNotifications = () => ({
   desktopNotificationSilence: true,

src/modules/serverSideStorage.js

@@ -125,6 +125,7 @@ export const _getRecentData = (cache, live, isTest) => {
   }
 
   const merge = (a, b) => ({
+    _user: a._user ?? b._user,
     _version: a._version ?? b._version,
     _timestamp: a._timestamp ?? b._timestamp,
     needUpload: b.needUpload ?? a.needUpload,

src/modules/users.js

@@ -3,7 +3,7 @@ import { windowWidth, windowHeight } from '../services/window_utils/window_utils
 import oauthApi from '../services/new_api/oauth.js'
 import { compact, map, each, mergeWith, last, concat, uniq, isArray } from 'lodash'
 import { registerPushNotifications, unregisterPushNotifications } from '../services/sw/sw.js'
-import { useInterfaceStore } from '../stores/interface.js'
+import { useInterfaceStore } from 'src/stores/interface.js'
 
 // TODO: Unify with mergeOrAdd in statuses.js
 export const mergeOrAdd = (arr, obj, item) => {

src/services/lists_fetcher/lists_fetcher.service.js

@@ -1,4 +1,4 @@
-import { useListsStore } from '../../stores/lists.js'
+import { useListsStore } from 'src/stores/lists.js'
 import apiService from '../api/api.service.js'
 import { promiseInterval } from '../promise_interval/promise_interval.js'
 

src/services/notification_utils/notification_utils.js

@@ -1,6 +1,6 @@
 import { muteWordHits } from '../status_parser/status_parser.js'
 import { showDesktopNotification } from '../desktop_notification_utils/desktop_notification_utils.js'
-import { useI18nStore } from '../../stores/i18n.js'
+import { useI18nStore } from 'src/stores/i18n.js'
 import { useAnnouncementsStore } from 'src/stores/announcements'
 
 import FaviconService from 'src/services/favicon_service/favicon_service.js'

src/services/notifications_fetcher/notifications_fetcher.service.js

@@ -1,4 +1,4 @@
-import { useInterfaceStore } from '../../stores/interface.js'
+import { useInterfaceStore } from 'src/stores/interface.js'
 import apiService from '../api/api.service.js'
 import { promiseInterval } from '../promise_interval/promise_interval.js'
 

src/services/timeline_fetcher/timeline_fetcher.service.js

@@ -2,7 +2,7 @@ import { camelCase } from 'lodash'
 
 import apiService from '../api/api.service.js'
 import { promiseInterval } from '../promise_interval/promise_interval.js'
-import { useInterfaceStore } from '../../stores/interface.js'
+import { useInterfaceStore } from 'src/stores/interface.js'
 
 const update = ({ store, statuses, timeline, showImmediately, userId, listId, pagination }) => {
   const ccTimeline = camelCase(timeline)

src/stores/lists.js

@@ -56,7 +56,7 @@ export const useListsStore = defineStore('lists', {
       }
     },
     setListAccounts ({ listId, accountIds }) {
-      const saved = this.allListsObject[listId].accountIds || []
+      const saved = this.allListsObject[listId]?.accountIds || []
       const added = accountIds.filter(id => !saved.includes(id))
       const removed = saved.filter(id => !accountIds.includes(id))
       if (!this.allListsObject[listId]) {

src/stores/reports.js

@@ -1,7 +1,7 @@
 import { defineStore } from 'pinia'
 
 import filter from 'lodash/filter'
-import { useInterfaceStore } from '../stores/interface'
+import { useInterfaceStore } from 'src/stores/interface'
 
 export const useReportsStore = defineStore('reports', {
   state: () => ({

test/unit/specs/modules/serverSideStorage.spec.js

@@ -74,7 +74,7 @@ describe('The serverSideStorage module', () => {
         })
       })
 
-      it.only('should reset local timestamp to remote if contents are the same', () => {
+      it('should reset local timestamp to remote if contents are the same', () => {
         const state = {
           ...cloneDeep(defaultState),
           cache: null

test/unit/specs/stores/lists.spec.js

@@ -1,7 +1,7 @@
 import { createPinia, setActivePinia } from 'pinia'
-import { useListsStore } from '../../../../src/stores/lists.js'
+import { useListsStore } from 'src/stores/lists.js'
 import { createStore } from 'vuex'
-import apiModule from '../../../../src/modules/api.js'
+import apiModule from 'src/modules/api.js'
 
 setActivePinia(createPinia())
 const store = useListsStore()