src/components/settings_modal/helpers/choice_setting.js

@@ -12,7 +12,8 @@ export default {
     'path',
     'disabled',
     'options',
-    'expert'
+    'expert',
+    'hideDefaultLabel'
   ],
   computed: {
     pathDefault () {

src/components/settings_modal/helpers/choice_setting.vue

@@ -16,7 +16,11 @@
         :value="option.value"
       >
         {{ option.label }}
-        {{ option.value === defaultState ? $t('settings.instance_default_simple') : '' }}
+        <template
+          v-if="hideDefaultLabel !== true"
+        >
+          {{ option.value === defaultState ? $t('settings.instance_default_simple') : '' }}
+        </template>
       </option>
     </Select>
     <ModifiedIndicator :changed="isChanged" />

src/components/settings_modal/tabs/general_tab.js

@@ -48,6 +48,8 @@ const GeneralTab = {
         value: tab,
         label: this.$t(`user_card.${tab}`)
       })),
+      profilesExpanded: false,
+      newProfileName: '',
       loopSilentAvailable:
       // Firefox
       Object.getOwnPropertyDescriptor(HTMLVideoElement.prototype, 'mozHasAudio') ||
@@ -88,6 +90,19 @@ const GeneralTab = {
         this.$store.dispatch('setOption', { name: 'interfaceLanguage', value: val })
       }
     },
+    settingsProfiles () {
+      return (this.$store.state.instance.settingsProfiles || [])
+    },
+    settingsProfile: {
+      get: function () { return this.$store.getters.mergedConfig.profile },
+      set: function (val) {
+        this.$store.dispatch('setOption', { name: 'profile', value: val })
+        this.$store.dispatch('getSettingsProfile')
+      }
+    },
+    settingsVersion () {
+      return this.$store.getters.mergedConfig.profileVersion
+    },
     translationLanguages () {
       return (this.$store.state.instance.supportedTranslationLanguages.target || []).map(lang => ({ key: lang.code, value: lang.code, label: lang.name }))
     },
@@ -105,6 +120,19 @@ const GeneralTab = {
     },
     setTranslationLanguage (value) {
       this.$store.dispatch('setOption', { name: 'translationLanguage', value })
+    },
+    toggleExpandedSettings () {
+      this.profilesExpanded = !this.profilesExpanded
+    },
+    loadSettingsProfile (name) {
+      this.$store.commit('setOption', { name: 'profile', value: name })
+      this.$store.dispatch('getSettingsProfile', true)
+    },
+    createSettingsProfile () {
+      this.$store.dispatch('setOption', { name: 'profile', value: this.newProfileName })
+      this.$store.dispatch('setOption', { name: 'profileVersion', value: 1 })
+      this.$store.dispatch('syncSettings')
+      this.newProfileName = ''
     }
   }
 }

src/components/settings_modal/tabs/general_tab.vue

@@ -1,7 +1,6 @@
 <template>
   <div :label="$t('settings.general')">
     <div class="setting-item">
-      <h2>{{ $t('settings.interface') }}</h2>
       <ul class="setting-list">
         <li>
           <interface-language-switcher
@@ -10,6 +9,71 @@
             :set-language="val => language = val"
           />
         </li>
+        <li
+          v-if="user && (settingsProfiles.length > 0)"
+        >
+          <h2>{{ $t('settings.settings_profile') }}</h2>
+          <p>{{ $t('settings.settings_profile_currently', { name: settingsProfile, version: settingsVersion }) }}</p>
+          <div
+            @click="toggleExpandedSettings"
+          >
+            <template
+              v-if="profilesExpanded"
+            >
+              <button class="btn button-default">
+                {{ $t('settings.settings_profiles_unshow') }}
+              </button>
+            </template>
+            <template
+              v-else
+            >
+              <button class="btn button-default">
+                {{ $t('settings.settings_profiles_show') }}
+              </button>
+            </template>
+          </div>
+          <br>
+          <template
+            v-if="profilesExpanded"
+          >
+            <div
+              v-for="profile in settingsProfiles"
+              :key="profile.id"
+              class="settings-profile"
+            >
+              <h4>{{ profile.name }} ({{ profile.version }})</h4>
+              <template
+                v-if="settingsProfile === profile.name"
+              >
+              {{ $t('settings.settings_profile_in_use') }}
+              </template>
+              <template
+                v-else
+                >
+                <button
+                  class="btn button-default"
+                  @click="loadSettingsProfile(profile.name)"
+                >
+                  {{ $t('settings.settings_profile_use') }}
+                </button>
+              </template>
+            </div>
+            <h3>{{ $t('settings.settings_profile_creation') }}</h3>
+            <input v-model="newProfileName" />
+            <button
+              class="btn button-default"
+              @click="createSettingsProfile"
+            >
+              {{ $t('settings.settings_profile_creation_submit') }}
+            </button>
+          </template>
+        </li>
+      </ul>
+    </div>
+
+    <div class="setting-item">
+      <h2>{{ $t('settings.interface') }}</h2>
+      <ul class="setting-list">
         <li v-if="instanceSpecificPanelPresent">
           <BooleanSetting path="hideISP">
             {{ $t('settings.hide_isp') }}
@@ -546,3 +610,8 @@
 </template>
 
 <script src="./general_tab.js"></script>
+<style lang="scss">
+.settings-profile {
+  margin-bottom: 1em;
+}
+</style>

src/i18n/en.json

@@ -693,6 +693,14 @@
         "setting_changed": "Setting is different from default",
         "setting_server_side": "This setting is tied to your profile and affects all sessions and clients",
         "settings": "Settings",
+        "settings_profile": "Settings Profiles",
+        "settings_profile_currently": "Currently using {name} (version: {version})",
+        "settings_profiles_show": "Show all settings profiles",
+        "settings_profiles_unshow": "Hide all settings profiles",
+        "settings_profile_in_use": "In use",
+        "settings_profile_creation": "Create new profile",
+        "settings_profile_creation_submit": "Create",
+        "settings_profile_use": "Use",
         "show_admin_badge": "Show \"Admin\" badge in my profile",
         "show_moderator_badge": "Show \"Moderator\" badge in my profile",
         "show_nav_shortcuts": "Show extra navigation shortcuts in top panel",

src/modules/api.js

@@ -265,6 +265,12 @@ const api = {
           store.dispatch('setInstanceOption', { name: 'supportedTranslationLanguages', value: data })
         })
     },
+    listSettingsProfiles (store) {
+      store.state.backendInteractor.listSettingsProfiles({ store })
+        .then((data) => {
+          store.commit('setInstanceOption', { name: 'settingsProfiles', value: data })
+        })
+    },
     // Pleroma websocket
     setWsToken (store, token) {
       store.commit('setWsToken', token)

src/modules/config.js

@@ -232,15 +232,19 @@ const config = {
           break
       }
     },
-    getSettingsProfile (store) {
+    getSettingsProfile (store, forceUpdate = false) {
       console.log('getSettingsProfile')
       const profile = store.state.profile
       store.rootState.api.backendInteractor.getSettingsProfile({ store, profileName: profile })
         .then(({ settings, version }) => {
           console.log('found settings version', version)
-          if (version > store.state.profileVersion) {
+          if (forceUpdate || (version > store.state.profileVersion)) {
             store.commit('setOption', { name: 'profileVersion', value: version })
-            store.dispatch('loadSettings', settings)
+            Object.entries(settings).forEach(([name, value]) => {
+              if (store.state[name] !== value) {
+                store.dispatch('setOption', { name, value })
+              }
+            })
           } else {
             console.log('settings are up to date')
           }

src/modules/users.js

@@ -583,6 +583,7 @@ const users = {
               store.dispatch('setLayoutHeight', windowHeight())
               store.dispatch('getSupportedTranslationlanguages')
               store.dispatch('getSettingsProfile')
+              store.dispatch('listSettingsProfiles')
 
               // Fetch our friends
               store.rootState.api.backendInteractor.fetchFriends({ id: user.id })

src/services/api/api.service.js

@@ -103,6 +103,7 @@ const PLEROMA_POST_ANNOUNCEMENT_URL = '/api/v1/pleroma/admin/announcements'
 const PLEROMA_EDIT_ANNOUNCEMENT_URL = id => `/api/v1/pleroma/admin/announcements/${id}`
 const PLEROMA_DELETE_ANNOUNCEMENT_URL = id => `/api/v1/pleroma/admin/announcements/${id}`
 const AKKOMA_SETTING_PROFILE_URL = (name) => `/api/v1/akkoma/frontend_settings/pleroma-fe/${name}`
+const AKKOMA_SETTING_PROFILE_LIST = `/api/v1/akkoma/frontend_settings/pleroma-fe`
 
 const oldfetch = window.fetch
 
@@ -1471,6 +1472,13 @@ const saveSettingsProfile = ({ profileName, credentials, settings, version }) =>
   })
 }
 
+const listSettingsProfiles = ({ credentials }) => {
+  return promisedRequest({
+    url: AKKOMA_SETTING_PROFILE_LIST,
+    credentials
+  })
+}
+
 export const getMastodonSocketURI = ({ credentials, stream, args = {} }) => {
   return Object.entries({
     ...(credentials
@@ -1699,7 +1707,8 @@ const apiService = {
   translateStatus,
   getSupportedTranslationlanguages,
   getSettingsProfile,
-  saveSettingsProfile
+  saveSettingsProfile,
+  listSettingsProfiles
 }
 
 export default apiService