Merge branch 'setttingssync' into shigusegubu-themes3

src/components/interface_language_switcher/interface_language_switcher.js

@@ -1,13 +1,11 @@
 import { v4 as uuidv4 } from 'uuid'
 
-import ProfileSettingIndicator from 'src/components/settings_modal/helpers/profile_setting_indicator.vue'
 import localeService from '../../services/locale/locale.service.js'
 import Select from '../select/select.vue'
 
 export default {
   components: {
     Select,
-    ProfileSettingIndicator,
   },
   props: {
     // List of languages (or just one language)

src/components/settings_modal/helpers/attachment_setting.vue

@@ -40,7 +40,7 @@
           :changed="isChanged"
           :onclick="reset"
         />
-        <ProfileSettingIndicator :is-profile="isProfileSetting" />
+        <LocalSettingIndicator :is-local="isLocalSetting" />
       </div>
       <div v-if="!compact">{{ $t('settings.preview') }}</div>
       <Attachment

src/components/settings_modal/helpers/boolean_setting.vue

@@ -18,7 +18,7 @@
           :changed="isChanged"
           :onclick="reset"
         />
-        <ProfileSettingIndicator :is-profile="isProfileSetting" />
+        <LocalSettingIndicator :is-local="isLocalSetting" />
         {{ ' ' }}
         <template v-if="backendDescriptionLabel">
           {{ backendDescriptionLabel }}

src/components/settings_modal/helpers/choice_setting.vue

@@ -9,7 +9,7 @@
         :changed="isChanged"
         :onclick="reset"
       />
-      <ProfileSettingIndicator :is-profile="isProfileSetting" />
+      <LocalSettingIndicator :is-local="isLocalSetting" />
       {{ ' ' }}
       <template v-if="backendDescriptionLabel">
         {{ backendDescriptionLabel }}

src/components/settings_modal/helpers/color_setting.vue

@@ -32,7 +32,7 @@
       :changed="isChanged"
       :onclick="reset"
     />
-    <ProfileSettingIndicator :is-profile="isProfileSetting" />
+    <LocalSettingIndicator :is-local="isLocalSetting" />
     <DraftButtons v-if="!hideDraftButtons" />
     <p
       v-if="backendDescriptionDescription"

src/components/settings_modal/helpers/group_setting.vue

@@ -7,7 +7,7 @@
       :changed="isChanged"
       :onclick="reset"
     />
-    <ProfileSettingIndicator :is-profile="isProfileSetting" />
+    <LocalSettingIndicator :is-local="isLocalSetting" />
     <DraftButtons />
   </span>
 </template>

src/components/settings_modal/helpers/list_setting.vue

@@ -75,7 +75,7 @@
       :changed="isChanged"
       :onclick="reset"
     />
-    <ProfileSettingIndicator :is-profile="isProfileSetting" />
+    <LocalSettingIndicator :is-local="isLocalSetting" />
     <DraftButtons />
   </div>
 </template>

src/components/settings_modal/helpers/list_tuple_setting.vue

@@ -77,7 +77,6 @@
       :changed="isChanged"
       :onclick="reset"
     />
-    <ProfileSettingIndicator :is-profile="isProfileSetting" />
     <DraftButtons />
   </div>
 </template>

src/components/settings_modal/helpers/local_setting_indicator.vue

@@ -1,7 +1,7 @@
 <template>
   <span
-    v-if="isProfile"
+    v-if="isLocal"
-    class="ProfileSettingIndicator"
+    class="LocalSettingIndicator"
   >
     <Popover
       trigger="hover"
@@ -9,13 +9,13 @@
       <template #trigger>
         &nbsp;
         <FAIcon
-          icon="server"
+          icon="desktop"
-          :aria-label="$t('settings.setting_server_side')"
+          :aria-label="$t('settings.setting_local_side')"
         />
       </template>
       <template #content>
         <div class="profilesetting-tooltip">
-          {{ $t('settings.setting_server_side') }}
+          {{ $t('settings.setting_local_side') }}
         </div>
       </template>
     </Popover>
@@ -26,18 +26,18 @@
 import Popover from 'src/components/popover/popover.vue'
 
 import { library } from '@fortawesome/fontawesome-svg-core'
-import { faServer } from '@fortawesome/free-solid-svg-icons'
+import { faDesktop } from '@fortawesome/free-solid-svg-icons'
 
-library.add(faServer)
+library.add(faDesktop)
 
 export default {
   components: { Popover },
-  props: ['isProfile'],
+  props: ['isLocal'],
 }
 </script>
 
 <style lang="scss">
-.ProfileSettingIndicator {
+.LocalSettingIndicator {
   display: inline-block;
   position: relative;
 }

src/components/settings_modal/helpers/map_setting.vue

@@ -77,7 +77,7 @@
       :changed="isChanged"
       :onclick="reset"
     />
-    <ProfileSettingIndicator :is-profile="isProfileSetting" />
+    <LocalSettingIndicator :is-local="isLocalSetting" />
     <DraftButtons />
   </div>
 </template>

src/components/settings_modal/helpers/number_setting.vue

@@ -34,7 +34,7 @@
       :changed="isChanged"
       :onclick="reset"
     />
-    <ProfileSettingIndicator :is-profile="isProfileSetting" />
+    <LocalSettingIndicator :is-local="isLocalSetting" />
     <DraftButtons v-if="!hideDraftButtons" />
     <p
       v-if="backendDescriptionDescription"

src/components/settings_modal/helpers/proxy_setting.vue

@@ -44,7 +44,6 @@
       :changed="isChanged"
       :onclick="reset"
     />
-    <ProfileSettingIndicator :is-profile="isProfileSetting" />
     <DraftButtons v-if="!hideDraftButtons" />
     <p
       v-if="backendDescriptionDescription"

src/components/settings_modal/helpers/pwa_manifest_icons_setting.vue

@@ -11,7 +11,6 @@
         :changed="isChanged"
         :onclick="reset"
       />
-      <ProfileSettingIndicator :is-profile="isProfileSetting" />
       {{ ' ' }}
       <template v-if="backendDescriptionLabel">
         {{ backendDescriptionLabel + ' ' }}

src/components/settings_modal/helpers/rate_setting.vue

@@ -11,7 +11,7 @@
         :changed="isChanged"
         :onclick="reset"
       />
-      <ProfileSettingIndicator :is-profile="isProfileSetting" />
+      <LocalSettingIndicator :is-local="isLocalSetting" />
       {{ ' ' }}
       <template v-if="backendDescriptionLabel">
         {{ backendDescriptionLabel + ' ' }}

src/components/settings_modal/helpers/setting.js

@@ -2,17 +2,18 @@ import { cloneDeep, get, isEqual, set } from 'lodash'
 
 import DraftButtons from './draft_buttons.vue'
 import ModifiedIndicator from './modified_indicator.vue'
-import ProfileSettingIndicator from './profile_setting_indicator.vue'
+import LocalSettingIndicator from './local_setting_indicator.vue'
 
 import { useInstanceStore } from 'src/stores/instance.js'
 import { useInterfaceStore } from 'src/stores/interface.js'
 import { useSyncConfigStore } from 'src/stores/sync_config.js'
+import { useLocalConfigStore } from 'src/stores/local_config.js'
 
 export default {
   components: {
     ModifiedIndicator,
     DraftButtons,
-    ProfileSettingIndicator,
+    LocalSettingIndicator,
   },
   props: {
     modelValue: {
@@ -260,7 +261,7 @@ export default {
             this.$store.dispatch('pushAdminSetting', { path: k, value: v })
         default:
           return (readPath, value) => {
-            const writePath = `simple.${readPath}`
+            const writePath = `${readPath}`
 
             if (!this.timedApplyMode) {
               if (this.local) {
@@ -325,6 +326,9 @@ export default {
     isProfileSetting() {
       return this.realSource === 'profile'
     },
+    isLocalSetting() {
+      return this.local
+    },
     isChanged() {
       if (this.path == null) return false
       switch (this.realSource) {

src/components/settings_modal/helpers/string_setting.vue

@@ -13,7 +13,7 @@
         :changed="isChanged"
         :onclick="reset"
       />
-      <ProfileSettingIndicator :is-profile="isProfileSetting" />
+      <LocalSettingIndicator :is-local="isLocalSetting" />
       {{ ' ' }}
       <template v-if="backendDescriptionLabel">
         {{ backendDescriptionLabel + ' ' }}

src/components/settings_modal/helpers/tuple_setting.vue

@@ -13,7 +13,7 @@
         :changed="isChanged"
         :onclick="reset"
       />
-      <ProfileSettingIndicator :is-profile="isProfileSetting" />
+      <LocalSettingIndicator :is-local="isLocalSetting" />
       {{ ' ' }}
       <template v-if="backendDescriptionLabel">
         {{ backendDescriptionLabel + ' ' }}

src/components/settings_modal/helpers/unit_setting.vue

@@ -7,6 +7,7 @@
       :for="path"
       class="setting-label size-label"
     >
+      <LocalSettingIndicator :is-local="isLocalSetting" />
       <ModifiedIndicator
         :changed="isChanged"
         :onclick="reset"

src/components/settings_modal/settings_modal.scss

@@ -73,7 +73,7 @@
     }
 
     .ModifiedIndicator,
-    .ProfileSettingIndicator {
+    .LocalSettingIndicator {
       grid-area: indicator;
     }
 

src/components/settings_modal/tabs/appearance_tab.js

@@ -6,7 +6,6 @@ import BooleanSetting from '../helpers/boolean_setting.vue'
 import ChoiceSetting from '../helpers/choice_setting.vue'
 import FloatSetting from '../helpers/float_setting.vue'
 import IntegerSetting from '../helpers/integer_setting.vue'
-import ProfileSettingIndicator from '../helpers/profile_setting_indicator.vue'
 import SharedComputedObject from '../helpers/shared_computed_object.js'
 import UnitSetting from '../helpers/unit_setting.vue'
 import Preview from './old_theme_tab/theme_preview.vue'
@@ -77,7 +76,6 @@ const AppearanceTab = {
     IntegerSetting,
     FloatSetting,
     UnitSetting,
-    ProfileSettingIndicator,
     Preview,
     PaletteEditor,
   },

src/components/settings_modal/tabs/composing_tab.js

@@ -8,7 +8,6 @@ import BooleanSetting from '../helpers/boolean_setting.vue'
 import ChoiceSetting from '../helpers/choice_setting.vue'
 import FloatSetting from '../helpers/float_setting.vue'
 import IntegerSetting from '../helpers/integer_setting.vue'
-import ProfileSettingIndicator from '../helpers/profile_setting_indicator.vue'
 import SharedComputedObject from '../helpers/shared_computed_object.js'
 import UnitSetting from '../helpers/unit_setting.vue'
 
@@ -99,7 +98,6 @@ const ComposingTab = {
     FloatSetting,
     UnitSetting,
     InterfaceLanguageSwitcher,
-    ProfileSettingIndicator,
     ScopeSelector,
     Select,
     FontControl,

src/components/settings_modal/tabs/composing_tab.vue

@@ -8,10 +8,6 @@
             class="setting-item "
             for="default-vis"
           >
-            <span class="setting-label">
-              <ProfileSettingIndicator :is-profile="true" />
-              {{ $t('settings.default_vis') }}
-            </span>
             <ScopeSelector
               class="scope-selector setting-control"
               :show-all="true"
@@ -19,7 +15,6 @@
               :initial-scope="$store.state.profileConfig.defaultScope"
               :on-scope-change="changeDefaultScope"
               :unstyled="false"
-              uns
             />
           </label>
         </li>

src/components/settings_modal/tabs/general_tab.js

@@ -5,7 +5,6 @@ import InterfaceLanguageSwitcher from 'src/components/interface_language_switche
 import BooleanSetting from '../helpers/boolean_setting.vue'
 import ChoiceSetting from '../helpers/choice_setting.vue'
 import FloatSetting from '../helpers/float_setting.vue'
-import ProfileSettingIndicator from '../helpers/profile_setting_indicator.vue'
 import SharedComputedObject from '../helpers/shared_computed_object.js'
 import UnitSetting from '../helpers/unit_setting.vue'
 
@@ -33,7 +32,6 @@ const GeneralTab = {
     FloatSetting,
     FontControl,
     InterfaceLanguageSwitcher,
-    ProfileSettingIndicator,
   },
   computed: {
     language: {

src/components/settings_modal/tabs/general_tab.vue

@@ -9,11 +9,6 @@
           class="lang-selector"
           @update="val => language = val"
         />
-        <h4>
-          {{ $t('settings.email_language') }}
-          {{ ' ' }}
-          <ProfileSettingIndicator :is-profile="true" />
-        </h4>
         <interface-language-switcher
           v-model="emailLanguage"
           class="lang-selector"
@@ -44,6 +39,7 @@
             :units="['px', 'rem']"
             :reset-default="{ 'px': 14, 'rem': 1 }"
             timed-apply-mode
+            :local="true"
           >
             {{ $t('settings.text_size') }}
           </UnitSetting>

src/components/settings_modal/tabs/layout_tab.js

@@ -2,7 +2,6 @@ import { mapState } from 'pinia'
 
 import BooleanSetting from '../helpers/boolean_setting.vue'
 import ChoiceSetting from '../helpers/choice_setting.vue'
-import ProfileSettingIndicator from '../helpers/profile_setting_indicator.vue'
 import SharedComputedObject from '../helpers/shared_computed_object.js'
 import UnitSetting from '../helpers/unit_setting.vue'
 
@@ -25,7 +24,6 @@ const GeneralTab = {
     BooleanSetting,
     ChoiceSetting,
     UnitSetting,
-    ProfileSettingIndicator,
   },
   computed: {
     ...mapState(useInstanceCapabilitiesStore, [

src/components/settings_modal/tabs/posts_tab.js

@@ -2,7 +2,6 @@ import FontControl from 'src/components/font_control/font_control.vue'
 import BooleanSetting from '../helpers/boolean_setting.vue'
 import ChoiceSetting from '../helpers/choice_setting.vue'
 import IntegerSetting from '../helpers/integer_setting.vue'
-import ProfileSettingIndicator from '../helpers/profile_setting_indicator.vue'
 import SharedComputedObject from '../helpers/shared_computed_object.js'
 
 import { useSyncConfigStore } from 'src/stores/sync_config.js'
@@ -62,7 +61,6 @@ const GeneralTab = {
     ChoiceSetting,
     IntegerSetting,
     FontControl,
-    ProfileSettingIndicator,
   },
   computed: {
     ...SharedComputedObject(),

src/components/settings_modal/tabs/profile_tab.js

@@ -1,7 +1,6 @@
 import Checkbox from 'src/components/checkbox/checkbox.vue'
 import UserCard from 'src/components/user_card/user_card.vue'
 import BooleanSetting from '../helpers/boolean_setting.vue'
-import ProfileSettingIndicator from '../helpers/profile_setting_indicator.vue'
 import SharedComputedObject from '../helpers/shared_computed_object.js'
 
 import { library } from '@fortawesome/fontawesome-svg-core'
@@ -24,7 +23,6 @@ const ProfileTab = {
     UserCard,
     Checkbox,
     BooleanSetting,
-    ProfileSettingIndicator,
   },
   computed: {
     user() {

src/components/settings_modal/tabs/profile_tab.vue

@@ -16,7 +16,6 @@
               v-model="locked"
               class="setting-label setting-control custom-boolean-setting"
             >
-              <ProfileSettingIndicator :is-profile="true" />
               {{ $t('settings.lock_account_description') }}
             </Checkbox>
           </div>

src/i18n/en.json

@@ -402,6 +402,7 @@
     "change_avatar": "Change avatar",
     "setting_changed": "Setting is different from default",
     "setting_server_side": "This setting is tied to your profile and affects all sessions and clients",
+    "setting_local_side": "This setting is tied to current session and doesn't affects other devices and browsers",
     "enter_current_password_to_confirm": "Enter your current password to confirm your identity",
     "post_look_feel": "Posts Look & Feel",
     "posts": "Posts",

src/lib/style.js

@@ -1,27 +1,39 @@
 import { applyStyleConfig } from 'src/services/style_setter/style_setter.js'
+import { useSyncConfigStore } from 'src/stores/sync_config.js'
 
-const APPEARANCE_SETTINGS_KEYS = new Set(
+const ACTIONS = new Set([
-  [
+  'setPreference',
-    'sidebarColumnWidth',
+  'unsetPreference',
-    'contentColumnWidth',
+  'set',
-    'notifsColumnWidth',
+  'unset',
-    'themeEditorMinWidth',
+  'setTemporarily',
-    'textSize',
+  'unsetTemporarily',
-    'navbarSize',
+])
-    'panelHeaderSize',
+
-    'forcedRoundness',
+const APPEARANCE_SETTINGS_KEYS = [
-    'emojiSize',
+  'sidebarColumnWidth',
-    'emojiReactionsScale',
+  'contentColumnWidth',
-  ].map((x) => 'simple.' + x),
+  'notifsColumnWidth',
-)
+  'themeEditorMinWidth',
+  'textSize',
+  'navbarSize',
+  'panelHeaderSize',
+  'forcedRoundness',
+  'emojiSize',
+  'emojiReactionsScale',
+]
+const MIXED_KEYS = new Set([
+  ...APPEARANCE_SETTINGS_KEYS,
+  ...APPEARANCE_SETTINGS_KEYS.map((x) => 'simple.' + x),
+])
 
 export const piniaStylePlugin = ({ store, options }) => {
-  if (store.$id === 'sync_config') {
+  if (store.$id === 'sync_config' || store.$id === 'local_config') {
     store.$onAction(({ name, args, after }) => {
-      if (name === 'setPreference') {
+      if (ACTIONS.has(name)) {
         const { path } = args[0]
-        if (APPEARANCE_SETTINGS_KEYS.has(path)) {
+        if (MIXED_KEYS.has(path)) {
-          after(() => applyStyleConfig(store.mergedConfig))
+          after(() => applyStyleConfig(useSyncConfigStore().mergedConfig))
         }
       }
     })

src/stores/interface.js

@@ -66,7 +66,7 @@ export const useInterfaceStore = defineStore('interface', {
       this.temporaryChangesConfirm = confirm
       this.temporaryChangesRevert = revert
       const countdownFunc = () => {
-        if (this.temporaryChangesCountdown === 1) {
+        if (this.temporaryChangesCountdown <= 1) {
           this.temporaryChangesRevert()
           this.clearTemporaryChanges()
         } else {

src/stores/local_config.js

@@ -39,18 +39,6 @@ export const useLocalConfigStore = defineStore('local_config', {
       })
     },
   },
-  getters: {
-    mergedConfig: (state) => {
-      const instancePrefs = useInstanceStore().prefsStorage
-      const result = Object.fromEntries(
-        Object.entries(state.prefsStorage).map(([k, v]) => [
-          k,
-          state.tempStorage[k] ?? v ?? instancePrefs[k],
-        ]),
-      )
-      return result
-    },
-  },
   persist: {
     afterLoad(state) {
       return {

src/stores/sync_config.js

@@ -17,7 +17,8 @@ import { toRaw } from 'vue'
 
 import { CURRENT_UPDATE_COUNTER } from 'src/components/update_notification/update_notification.js'
 
-import { useInstanceStore } from 'src/stores/instance'
+import { useInstanceStore } from 'src/stores/instance.js'
+import { useLocalConfigStore } from 'src/stores/local_config.js'
 
 import { defaultState as configDefaultState } from 'src/modules/default_config_state'
 
@@ -689,10 +690,12 @@ export const useSyncConfigStore = defineStore('sync_config', {
   getters: {
     mergedConfig: (state) => {
       const instancePrefs = useInstanceStore().prefsStorage
+      const localPrefs = useLocalConfigStore().prefsStorage
+      const tempPrefs = useLocalConfigStore().tempStorage
       const result = Object.fromEntries(
         Object.entries(state.prefsStorage.simple).map(([k, v]) => [
           k,
-          v ?? instancePrefs[k],
+          tempPrefs[k] ?? localPrefs[k] ?? v ?? instancePrefs[k],
         ]),
       )
       return result