From 871a23465bb9718f46ac0c0340e5005cfc621ce2 Mon Sep 17 00:00:00 2001
From: Jason Woodland <me@jasonwoodland.com>
Date: Thu, 14 Jul 2022 18:48:50 +1000
Subject: [PATCH] feat(iridium): add settings manager (#3946)

* feat(iridium): add settings manager

* refactor(iridium): instantiate managers in constructor

* feat(iridium): add settings to iridium manager

* feat(settings): use iridium settings manager

* feat(theme): use iridium theme settings

* chore(store): remove old theme types/definitions

* feat(iridium): add init method for profile/group managers

* feat(theme): generate rgb color values for selection

* feat(settings): move flip local video setting to iridium

* chore(build): add deepmerge package

* feat(merge): add deepmerge utility function

* feat(settings): deep merge initial state

* feat(settings/audio): add notification sounds to settings

* feat(iridium): add keybinds to settings

* feat(settings): connect keybinds to iridium

* style(settings): use record for object types

* feat(iridium): add privacy to settings

* feat(settings): connect privacy to iridium

* refactor(settings): iterate over enum to generate initial state

* fix(build): bump @nuxtjs/eslint-config-typescript version

* style: organise imports

* fix(settings): only set in iridium if the value was changed

* fix(settings/audio): default values keys
---
 assets/styles/framework/colors.less           |   2 +-
 assets/styles/themes/moonless_night.less      |   2 +-
 .../ui/HorizontalRule/HorizontalRule.vue      |   2 +-
 components/views/media/user/User.vue          |   7 +-
 .../views/settings/pages/audio/Audio.html     |   2 -
 .../views/settings/pages/audio/index.vue      |  10 +-
 .../settings/pages/audio/sounds/Sounds.html   |  12 +-
 .../settings/pages/audio/sounds/Sounds.vue    |  19 +-
 .../settings/pages/keybinds/Keybinds.html     |   8 +-
 .../views/settings/pages/keybinds/index.vue   | 145 +++++--------
 .../pages/personalize/Personalize.html        |   4 +-
 .../settings/pages/personalize/index.vue      |  62 +++---
 .../views/settings/pages/privacy/Privacy.html | 202 +++++++++---------
 .../views/settings/pages/privacy/index.vue    |  22 +-
 layouts/chat.vue                              |  19 +-
 layouts/default.vue                           |  11 +-
 layouts/files.vue                             |  13 +-
 layouts/friends.vue                           |  13 +-
 layouts/server.vue                            |  18 +-
 libraries/Iridium/IridiumManager.ts           |  41 ++--
 libraries/Iridium/groups/GroupManager.ts      |  12 +-
 libraries/Iridium/profile/ProfileManager.ts   |  13 +-
 libraries/Iridium/settings/SettingsManager.ts |  65 ++++++
 libraries/Iridium/settings/types.ts           | 131 ++++++++++++
 libraries/Iridium/utils.ts                    |  23 ++
 package.json                                  |   3 +-
 store/ui/actions.ts                           |   5 +-
 store/ui/state.ts                             |  12 +-
 store/ui/types.ts                             |  81 -------
 utilities/merge.ts                            |   3 +
 30 files changed, 551 insertions(+), 411 deletions(-)
 create mode 100644 libraries/Iridium/settings/SettingsManager.ts
 create mode 100644 libraries/Iridium/settings/types.ts
 create mode 100644 utilities/merge.ts

diff --git a/assets/styles/framework/colors.less b/assets/styles/framework/colors.less
index e98ce5b023..2692f2623f 100644
--- a/assets/styles/framework/colors.less
+++ b/assets/styles/framework/colors.less
@@ -14,7 +14,7 @@
 
 @satellite-color: #2761fd;
 @satellite-color-secondary: #286cfe;
-@satellite-color-rgb: 'rgb(39, 97, 253)';
+@satellite-color-rgb: 39, 97, 253;
 @flair-color: var(--flair-color);
 @flair-color-secondary: var(--flair-color-secondary);
 @flair-color-rgb: var(--flair-color-rgb);
diff --git a/assets/styles/themes/moonless_night.less b/assets/styles/themes/moonless_night.less
index 4dbbdb7f12..2bc4ecdaf0 100644
--- a/assets/styles/themes/moonless_night.less
+++ b/assets/styles/themes/moonless_night.less
@@ -1,4 +1,4 @@
-.moonless_night {
+.theme-moonlessNight {
   //------------- Colors -------------
   @white: #fff;
 
diff --git a/components/ui/HorizontalRule/HorizontalRule.vue b/components/ui/HorizontalRule/HorizontalRule.vue
index c5aece5be7..665a11d33c 100644
--- a/components/ui/HorizontalRule/HorizontalRule.vue
+++ b/components/ui/HorizontalRule/HorizontalRule.vue
@@ -16,7 +16,7 @@ export default Vue.extend({})
 .horizontal-container {
   padding: @normal-spacing 0;
 }
-.moonless-night {
+.theme-moonlessNight {
   .horizontal-rule {
     background: @lighter-splash-radial;
   }
diff --git a/components/views/media/user/User.vue b/components/views/media/user/User.vue
index c0d104afdd..614de77aeb 100644
--- a/components/views/media/user/User.vue
+++ b/components/views/media/user/User.vue
@@ -14,6 +14,7 @@ import { $WebRTC } from '~/libraries/WebRTC/WebRTC'
 import { Call, CallPeerStreams } from '~/libraries/WebRTC/Call'
 import { PeerMutedState } from '~/store/webrtc/types'
 import { RootState } from '~/types/store/store'
+import iridium from '~/libraries/Iridium/IridiumManager'
 
 async function loadVideos() {
   const videos = document.querySelectorAll(
@@ -56,12 +57,16 @@ export default Vue.extend({
       default: false,
     },
   },
+  data() {
+    return {
+      videoSettings: iridium.settings.state.video,
+    }
+  },
   computed: {
     ...mapState({
       audio: (state) => (state as RootState).audio,
       video: (state) => (state as RootState).video,
       webrtc: (state) => (state as RootState).webrtc,
-      flipVideo: (state) => (state as RootState).textile.userThread.flipVideo,
     }),
     call() {
       return (
diff --git a/components/views/settings/pages/audio/Audio.html b/components/views/settings/pages/audio/Audio.html
index 004df23546..f8858d8497 100644
--- a/components/views/settings/pages/audio/Audio.html
+++ b/components/views/settings/pages/audio/Audio.html
@@ -168,7 +168,6 @@
       </span>
     </SettingsUnit>
     <SettingsUnit
-      v-if="getInitialized"
       :title="$t('pages.settings.video.flipVideo.title')"
       :text="$t('pages.settings.video.flipVideo.subtitle')"
     >
@@ -177,7 +176,6 @@
         :isLocked="loading.includes('flipVideo')"
       />
     </SettingsUnit>
-    <UiLoadersGenericContent class="column unit" :count="1" v-else />
   </SettingsSection>
 
   <!-- Screen Share -->
diff --git a/components/views/settings/pages/audio/index.vue b/components/views/settings/pages/audio/index.vue
index a990396fbb..90c509144a 100644
--- a/components/views/settings/pages/audio/index.vue
+++ b/components/views/settings/pages/audio/index.vue
@@ -11,6 +11,7 @@ import {
 import { UserPermissions } from '~/components/mixins/UserPermissions'
 import { CaptureMouseTypes } from '~/store/settings/types'
 import { RootState } from '~/types/store/store'
+import iridium from '~/libraries/Iridium/IridiumManager'
 
 declare module 'vue/types/vue' {
   interface Vue {
@@ -53,6 +54,7 @@ export default Vue.extend({
           text: this.$i18n.t('pages.settings.never'),
         },
       ],
+      iridiumSettings: iridium.settings.state,
     }
   },
   computed: {
@@ -134,15 +136,13 @@ export default Vue.extend({
       },
     },
     flipVideo: {
-      async set(flipVideo: boolean) {
+      async set(value: boolean) {
         this.loading.push('flipVideo')
-        await this.$store.dispatch('textile/updateUserThreadData', {
-          flipVideo,
-        })
+        await iridium.settings.set('/video/flipLocalStream', value)
         this.loading.splice(this.loading.indexOf('flipVideo'), 1)
       },
       get(): boolean {
-        return this.userThread.flipVideo
+        return this.iridiumSettings.video.flipLocalStream
       },
     },
   },
diff --git a/components/views/settings/pages/audio/sounds/Sounds.html b/components/views/settings/pages/audio/sounds/Sounds.html
index 1d3489984b..809326499c 100644
--- a/components/views/settings/pages/audio/sounds/Sounds.html
+++ b/components/views/settings/pages/audio/sounds/Sounds.html
@@ -4,32 +4,32 @@
     :text="$t('pages.settings.notifications.sounds.title')"
   />
   <SettingsPagesAudioSoundsItem
-    :value="sound(Sounds.NEW_MESSAGE)"
+    :value="sounds[Sounds.NEW_MESSAGE]"
     @toggle="toggleSound(Sounds.NEW_MESSAGE, $event)"
     :title="$t('pages.settings.notifications.sounds.message')"
   />
   <SettingsPagesAudioSoundsItem
-    :value="sound(Sounds.CALL)"
+    :value="sounds[Sounds.CALL]"
     @toggle="toggleSound(Sounds.CALL, $event)"
     :title="$t('pages.settings.notifications.sounds.call')"
   />
   <SettingsPagesAudioSoundsItem
-    :value="sound(Sounds.MUTE)"
+    :value="sounds[Sounds.MUTE]"
     @toggle="toggleSounds([Sounds.MUTE, Sounds.UNMUTE], $event)"
     :title="$t('pages.settings.notifications.sounds.mute')"
   />
   <SettingsPagesAudioSoundsItem
-    :value="sound(Sounds.DEAFEN)"
+    :value="sounds[Sounds.DEAFEN]"
     @toggle="toggleSounds([Sounds.DEAFEN, Sounds.UNDEAFEN], $event)"
     :title="$t('pages.settings.notifications.sounds.deafen')"
   />
   <SettingsPagesAudioSoundsItem
-    :value="sound(Sounds.UPLOAD)"
+    :value="sounds[Sounds.UPLOAD]"
     @toggle="toggleSound(Sounds.UPLOAD, $event)"
     :title="$t('pages.settings.notifications.sounds.upload')"
   />
   <SettingsPagesAudioSoundsItem
-    :value="sound(Sounds.CONNECTED)"
+    :value="sounds[Sounds.CONNECTED]"
     @toggle="toggleSound(Sounds.CONNECTED, $event)"
     :title="$t('pages.settings.notifications.sounds.connected')"
   />
diff --git a/components/views/settings/pages/audio/sounds/Sounds.vue b/components/views/settings/pages/audio/sounds/Sounds.vue
index abfc3e9847..020b83c8ac 100644
--- a/components/views/settings/pages/audio/sounds/Sounds.vue
+++ b/components/views/settings/pages/audio/sounds/Sounds.vue
@@ -2,8 +2,8 @@
 
 <script lang="ts">
 import Vue from 'vue'
-import { mapState } from 'vuex'
 import { Sounds } from '~/libraries/SoundManager/SoundManager'
+import iridium from '~/libraries/Iridium/IridiumManager'
 
 export default Vue.extend({
   name: 'NotificationsSettingsSounds',
@@ -11,22 +11,21 @@ export default Vue.extend({
   data() {
     return {
       Sounds,
+      audioSettings: iridium.settings.state.audio,
     }
   },
   computed: {
-    ...mapState(['sounds']),
+    sounds() {
+      return this.audioSettings.sounds
+    },
   },
-  mounted() {},
   methods: {
-    sound(key: Sounds) {
-      return this.sounds[key]
-    },
-    toggleSound(key: Sounds, value: boolean) {
-      this.$store.commit('sounds/set', { key, value })
+    toggleSound(key: Sounds, isEnabled: boolean) {
+      this.audioSettings.sounds[key] = isEnabled
     },
-    toggleSounds(keys: Sounds[], value: boolean) {
+    toggleSounds(keys: Sounds[], isEnabled: boolean) {
       for (const key of keys) {
-        this.$store.commit('sounds/set', { key, value })
+        this.audioSettings.sounds[key] = isEnabled
       }
     },
   },
diff --git a/components/views/settings/pages/keybinds/Keybinds.html b/components/views/settings/pages/keybinds/Keybinds.html
index 8bd5c0e851..0ab4c50c06 100644
--- a/components/views/settings/pages/keybinds/Keybinds.html
+++ b/components/views/settings/pages/keybinds/Keybinds.html
@@ -52,7 +52,7 @@
       <InteractablesInput
         readonly
         type="primary"
-        :placeholder="settings.keybinds.toggleMute"
+        :placeholder="keybinds.toggleMute"
       />
     </SettingsUnit>
     <SettingsUnit @click="editKeybind('openSettings')">
@@ -60,7 +60,7 @@
       <InteractablesInput
         readonly
         type="primary"
-        :placeholder="settings.keybinds.openSettings"
+        :placeholder="keybinds.openSettings"
       />
     </SettingsUnit>
   </SettingsSection>
@@ -71,7 +71,7 @@
       <InteractablesInput
         readonly
         type="primary"
-        :placeholder="settings.keybinds.toggleDeafen"
+        :placeholder="keybinds.toggleDeafen"
       />
     </SettingsUnit>
     <SettingsUnit @click="editKeybind('callActiveChat')">
@@ -79,7 +79,7 @@
       <InteractablesInput
         readonly
         type="primary"
-        :placeholder="settings.keybinds.callActiveChat"
+        :placeholder="keybinds.callActiveChat"
       />
     </SettingsUnit>
   </SettingsSection>
diff --git a/components/views/settings/pages/keybinds/index.vue b/components/views/settings/pages/keybinds/index.vue
index b5bc0dc5aa..443969edc7 100644
--- a/components/views/settings/pages/keybinds/index.vue
+++ b/components/views/settings/pages/keybinds/index.vue
@@ -3,12 +3,14 @@
 <script lang="ts">
 import Vue from 'vue'
 import { mapState } from 'vuex'
-
 import { windowsShortcuts, macShortcuts } from '~/utilities/HotkeyList'
-
 import { specialKeys, keyboardRegex } from '~/utilities/Keybinds'
-
 import { ModifierKeysEnum, BlockKeysEnum } from '~/libraries/Enums/enums'
+import iridium from '~/libraries/Iridium/IridiumManager'
+import {
+  defaultKeybinds,
+  KeybindKeys,
+} from '~/libraries/Iridium/settings/types'
 
 export default Vue.extend({
   name: 'KeybindSettings',
@@ -22,6 +24,7 @@ export default Vue.extend({
         error: false,
         errorMessage: '',
       },
+      keybinds: iridium.settings.state.keybinds,
     }
   },
   computed: {
@@ -34,13 +37,14 @@ export default Vue.extend({
      * @param keybind
      * @example
      */
-    editKeybind(keybind: String) {
-      this.$store.dispatch('ui/clearKeybinds')
+    editKeybind(keybind: string) {
       window.addEventListener('keydown', this.recordKeybind)
-      this.$data.editingKeybind.name = keybind
-      this.$data.editingKeybind.status = true
-      this.$data.editingKeybind.newString =
-        this.settings.keybinds[this.$data.editingKeybind.name]
+      this.editingKeybind = {
+        ...this.editingKeybind,
+        name: keybind,
+        status: true,
+        newString: defaultKeybinds[this.editingKeybind.name as KeybindKeys],
+      }
     },
     /**
      * @method recordKeybind DocsTODO
@@ -66,10 +70,10 @@ export default Vue.extend({
 
       this.errorCheck(key)
 
-      if (!this.$data.editingKeybind.error) {
-        this.$data.editingKeybind.newString.length === 0
-          ? (this.$data.editingKeybind.newString += key)
-          : (this.$data.editingKeybind.newString += `+${key}`)
+      if (!this.editingKeybind.error) {
+        this.editingKeybind.newString.length === 0
+          ? (this.editingKeybind.newString += key)
+          : (this.editingKeybind.newString += `+${key}`)
       }
     },
     /**
@@ -79,42 +83,20 @@ export default Vue.extend({
      */
     saveKeybind() {
       window.removeEventListener('keydown', this.recordKeybind)
-      const keybindName = this.$data.editingKeybind.name
-      const newKeybind = this.$data.editingKeybind.newString
-
-      for (const key in this.settings.keybinds) {
-        if (this.checkSystemHotkey(this.settings.keybinds[key])) {
-          this.$data.editingKeybind.error = true
-          this.$data.editingKeybind.errorMessage = this.$t(
-            'pages.settings.keybinds.systemHotkeyError',
-          )
-          this.$store.commit('settings/updateKeybinding', {
-            keybindName: key,
-            newKeybind: '',
-          })
-        }
-
-        if (this.settings.keybinds[key] === newKeybind) {
-          this.$store.commit('settings/updateKeybinding', {
-            keybindName: key,
-            newKeybind: '',
-          })
-        }
-      }
-      if (!this.checkSystemHotkey(newKeybind)) {
-        this.$store.commit('settings/updateKeybinding', {
-          keybindName,
-          newKeybind,
-        })
-        this.$data.editingKeybind.newString = ''
-        this.$data.editingKeybind.status = false
-        this.$store.dispatch('ui/activateKeybinds')
-      } else {
-        this.$data.editingKeybind.error = true
-        this.$data.editingKeybind.errorMessage = this.$t(
+      const { name, newString } = this.editingKeybind
+
+      if (this.checkSystemHotkey(newString)) {
+        this.editingKeybind.error = true
+        this.editingKeybind.errorMessage = this.$t(
           'pages.settings.keybinds.systemHotkeyError',
-        )
+        ) as string
+        return
       }
+
+      iridium.settings.set(`/keybinds/${name}`, newString)
+      this.editingKeybind.newString = ''
+      this.editingKeybind.status = false
+      this.$store.dispatch('ui/activateKeybinds')
     },
     /**
      * @method cancelKeybind DocsTODO
@@ -123,10 +105,10 @@ export default Vue.extend({
      */
     cancelKeybind() {
       window.removeEventListener('keydown', this.recordKeybind)
-      this.$data.editingKeybind.newString = ''
-      this.$data.editingKeybind.status = false
-      this.$data.editingKeybind.errorMessage = ''
-      this.$data.editingKeybind.error = false
+      this.editingKeybind.newString = ''
+      this.editingKeybind.status = false
+      this.editingKeybind.errorMessage = ''
+      this.editingKeybind.error = false
       this.$store.dispatch('ui/activateKeybinds')
     },
     /**
@@ -135,9 +117,9 @@ export default Vue.extend({
      * @example
      */
     clearKeybind() {
-      this.$data.editingKeybind.newString = ''
-      this.$data.editingKeybind.errorMessage = ''
-      this.$data.editingKeybind.error = false
+      this.editingKeybind.newString = ''
+      this.editingKeybind.errorMessage = ''
+      this.editingKeybind.error = false
     },
     /**
      * @method resetKeybinds
@@ -145,22 +127,9 @@ export default Vue.extend({
      * @example resetKeybinds()
      */
     resetKeybinds() {
-      this.$store.commit('settings/updateKeybinding', {
-        keybindName: 'toggleMute',
-        newKeybind: 'alt+m',
-      })
-      this.$store.commit('settings/updateKeybinding', {
-        keybindName: 'toggleDeafen',
-        newKeybind: 'alt+d',
-      })
-      this.$store.commit('settings/updateKeybinding', {
-        keybindName: 'openSettings',
-        newKeybind: 'alt+s',
-      })
-      this.$store.commit('settings/updateKeybinding', {
-        keybindName: 'callActiveChat',
-        newKeybind: 'alt+c',
-      })
+      for (const [key, value] of Object.entries(defaultKeybinds)) {
+        iridium.settings.set(`/keybinds/${key}`, value)
+      }
       this.$store.dispatch('ui/activateKeybinds')
     },
     /**
@@ -172,7 +141,7 @@ export default Vue.extend({
     errorCheck(key: string) {
       if (!key) return
 
-      const newString = this.$data.editingKeybind.newString
+      const newString = this.editingKeybind.newString
 
       const keyAlreadyBound = newString.split('+').includes(key)
 
@@ -191,33 +160,33 @@ export default Vue.extend({
       const hasBlockedChars = key in BlockKeysEnum
 
       if (singleKeyAlreadyExist) {
-        this.$data.editingKeybind.error = true
-        this.$data.editingKeybind.errorMessage = this.$t(
+        this.editingKeybind.error = true
+        this.editingKeybind.errorMessage = this.$t(
           'pages.settings.keybinds.singleHotkeyError',
-        )
+        ) as string
       } else if (keyAlreadyExist) {
-        this.$data.editingKeybind.error = true
-        this.$data.editingKeybind.errorMessage = this.$t(
+        this.editingKeybind.error = true
+        this.editingKeybind.errorMessage = this.$t(
           'pages.settings.keybinds.systemHotkeyError',
-        )
+        ) as string
       } else if (keyAlreadyBound) {
-        this.$data.editingKeybind.error = true
-        this.$data.editingKeybind.errorMessage = this.$t(
+        this.editingKeybind.error = true
+        this.editingKeybind.errorMessage = this.$t(
           'pages.settings.keybinds.existHotkeyError',
-        )
+        ) as string
       } else if (modifierAfterAlphanumeric) {
-        this.$data.editingKeybind.error = true
-        this.$data.editingKeybind.errorMessage = this.$t(
+        this.editingKeybind.error = true
+        this.editingKeybind.errorMessage = this.$t(
           'pages.settings.keybinds.modifierHotkeyError',
-        )
+        ) as string
       } else if (hasBlockedChars) {
-        this.$data.editingKeybind.error = true
-        this.$data.editingKeybind.errorMessage = this.$t(
+        this.editingKeybind.error = true
+        this.editingKeybind.errorMessage = this.$t(
           'pages.settings.keybinds.editHotkeyError',
-        )
+        ) as string
       } else {
-        this.$data.editingKeybind.error = false
-        this.$data.editingKeybind.errorMessage = ''
+        this.editingKeybind.error = false
+        this.editingKeybind.errorMessage = ''
       }
     },
     checkSystemHotkey(keys: string) {
diff --git a/components/views/settings/pages/personalize/Personalize.html b/components/views/settings/pages/personalize/Personalize.html
index 1101fd6e51..095a988ba6 100644
--- a/components/views/settings/pages/personalize/Personalize.html
+++ b/components/views/settings/pages/personalize/Personalize.html
@@ -16,7 +16,7 @@
     <SettingsUnit>
       <InteractablesSelect
         v-model="theme"
-        :options="themes"
+        :options="themeOptions"
         :label="$t('pages.settings.personalize.theme')"
         show-label
       />
@@ -29,7 +29,7 @@
         v-model="flair"
         :options="flairOptions"
         :label="$t('pages.settings.personalize.flair')"
-        :disabled="theme === ThemeNames.DEFAULT"
+        :disabled="theme === ThemeKeys.DEFAULT"
         show-label
       />
     </SettingsUnit>
diff --git a/components/views/settings/pages/personalize/index.vue b/components/views/settings/pages/personalize/index.vue
index a6ab675073..13fa677be7 100644
--- a/components/views/settings/pages/personalize/index.vue
+++ b/components/views/settings/pages/personalize/index.vue
@@ -3,54 +3,62 @@
 <script lang="ts">
 import Vue from 'vue'
 import { mapState } from 'vuex'
-import { Themes, Flairs, FlairColors, ThemeNames } from '~/store/ui/types'
+import {
+  themes,
+  flairs,
+  ThemeKeys,
+  FlairKeys,
+  LanguageKeys,
+} from '~/libraries/Iridium/settings/types'
 import { SelectOption } from '~/types/ui/inputs'
+import iridium from '~/libraries/Iridium/IridiumManager'
+
 export default Vue.extend({
   name: 'PersonalizeSettings',
   layout: 'settings',
   data() {
     return {
-      ThemeNames,
-      themes: Themes,
-      flairs: Flairs,
-      language: 'en_US',
+      settings: iridium.settings.state,
     }
   },
   computed: {
     ...mapState(['ui']),
+    ThemeKeys: () => ThemeKeys,
     theme: {
-      set(state) {
-        const activeTheme = Themes.find((th) => {
-          return th.value === state
-        })
-        if (activeTheme?.value === ThemeNames.DEFAULT) {
-          const flairValue = Flairs.find(
-            (flair) => flair.value === FlairColors.SATELLITE,
-          )
-          if (flairValue) {
-            this.$store.commit('ui/updateFlair', flairValue)
-          }
+      set(value: ThemeKeys) {
+        if (value === ThemeKeys.DEFAULT) {
+          this.flair = FlairKeys.SATELLITE
         }
-        this.$store.commit('ui/updateTheme', activeTheme)
+        iridium.settings.set('/theme', value)
       },
-      get(): string {
-        return this.ui.theme.base.value
+      get(): ThemeKeys {
+        return this.settings.theme
       },
     },
     flair: {
-      set(state) {
-        const activeFlair = Flairs.find((f) => {
-          return f.text === state
-        })
-        this.$store.commit('ui/updateFlair', activeFlair)
+      set(value: FlairKeys) {
+        iridium.settings.set('/flair', value)
+      },
+      get(): FlairKeys {
+        return this.settings.flair
+      },
+    },
+    language: {
+      set(value: LanguageKeys) {
+        iridium.settings.set('/language', value)
       },
       get(): string {
-        return this.ui.theme.flair.text
+        return this.settings.language
       },
     },
+    themeOptions(): SelectOption[] {
+      return Object.entries(themes).map(([key, themeName]) => {
+        return { value: key, text: themeName }
+      })
+    },
     flairOptions(): SelectOption[] {
-      return Flairs.map((f) => {
-        return { text: f.text, value: f.text, color: f.value[0] }
+      return Object.entries(flairs).map(([key, flair]) => {
+        return { text: flair.name, value: key, color: flair.primary }
       })
     },
   },
diff --git a/components/views/settings/pages/privacy/Privacy.html b/components/views/settings/pages/privacy/Privacy.html
index 7190675e35..5a28089f9d 100644
--- a/components/views/settings/pages/privacy/Privacy.html
+++ b/components/views/settings/pages/privacy/Privacy.html
@@ -5,116 +5,110 @@
       <TypographySubtitle :size="6" :text="$t('pages.privacy.subtitle')" />
     </SettingsUnit>
   </SettingsSection>
-  <UiLoadersGenericContent :count="3" v-if="!getInitialized" />
-  <template v-else>
-    <SettingsSection>
-      <SettingsUnit
-        :title="$t('pages.privacy.register.title')"
-        :text="$t('pages.privacy.register.subtitle')"
-      >
-        <InteractablesSwitch isLocked v-model="registry" />
-      </SettingsUnit>
-      <SettingsUnit
-        :title="$t('pages.privacy.pin.title')"
-        :text="$t('pages.privacy.pin.subtitle')"
-      >
-        <InteractablesSwitch v-model="storePin" />
-      </SettingsUnit>
-    </SettingsSection>
-    <SettingsSection>
-      <SettingsUnit
-        :title="$t('pages.privacy.embeds.title')"
-        :text="$t('pages.privacy.embeds.subtitle')"
-      >
-        <InteractablesSwitch v-model="embeddedLinks" />
-      </SettingsUnit>
-      <SettingsUnit
-        :title="$t('pages.privacy.activity.title')"
-        :text="$t('pages.privacy.activity.subtitle')"
-      >
-        <InteractablesSwitch v-model="displayCurrentActivity" />
-      </SettingsUnit>
-    </SettingsSection>
-    <SettingsSection>
-      <SettingsUnit
-        :title="$t('pages.privacy.consentScan.title')"
-        :text="$t('pages.privacy.consentScan.subtitle')"
-      >
-        <InteractablesSwitch
-          v-model="consentScan"
-          :isLocked="loading.includes('consentScan')"
-        />
-      </SettingsUnit>
-      <SettingsUnit
-        :title="$t('pages.privacy.nsfw.title')"
-        :text="$t('pages.privacy.nsfw.subtitle')"
-      >
-        <InteractablesSwitch
-          v-model="blockNsfw"
-          :isLocked="loading.includes('blockNsfw')"
-        />
-      </SettingsUnit>
-    </SettingsSection>
-    <TypographyText
-      v-if="loading.length"
-      :text="$t('pages.privacy.updating')"
+  <SettingsSection>
+    <SettingsUnit
+      :title="$t('pages.privacy.register.title')"
+      :text="$t('pages.privacy.register.subtitle')"
+    >
+      <InteractablesSwitch isLocked v-model="registry" />
+    </SettingsUnit>
+    <SettingsUnit
+      :title="$t('pages.privacy.pin.title')"
+      :text="$t('pages.privacy.pin.subtitle')"
+    >
+      <InteractablesSwitch v-model="storePin" />
+    </SettingsUnit>
+  </SettingsSection>
+  <SettingsSection>
+    <SettingsUnit
+      :title="$t('pages.privacy.embeds.title')"
+      :text="$t('pages.privacy.embeds.subtitle')"
+    >
+      <InteractablesSwitch v-model="embeddedLinks" />
+    </SettingsUnit>
+    <SettingsUnit
+      :title="$t('pages.privacy.activity.title')"
+      :text="$t('pages.privacy.activity.subtitle')"
+    >
+      <InteractablesSwitch v-model="displayCurrentActivity" />
+    </SettingsUnit>
+  </SettingsSection>
+  <SettingsSection>
+    <SettingsUnit
+      :title="$t('pages.privacy.consentScan.title')"
+      :text="$t('pages.privacy.consentScan.subtitle')"
+    >
+      <InteractablesSwitch
+        v-model="consentScan"
+        :isLocked="loading.includes('consentScan')"
+      />
+    </SettingsUnit>
+    <SettingsUnit
+      :title="$t('pages.privacy.nsfw.title')"
+      :text="$t('pages.privacy.nsfw.subtitle')"
+    >
+      <InteractablesSwitch
+        v-model="blockNsfw"
+        :isLocked="loading.includes('blockNsfw')"
+      />
+    </SettingsUnit>
+  </SettingsSection>
+  <TypographyText v-if="loading.length" :text="$t('pages.privacy.updating')" />
+  <!-- <SettingsSection>
+    <SettingsUnit
+      :title="$t('pages.privacy.serverType.title')"
+      :text="$t('pages.privacy.serverType.subtitle')"
+    >
+    <InteractablesSelect
+      v-model="serverType"
+      :options="serverTypes"
+      class="form-control"
     />
-    <!-- <SettingsSection>
-      <SettingsUnit
-        :title="$t('pages.privacy.serverType.title')"
-        :text="$t('pages.privacy.serverType.subtitle')"
-      >
-        <InteractablesSelect
-          v-model="serverType"
-          :options="serverTypes"
-          class="form-control"
-        />
-      </SettingsUnit>
-    </SettingsSection> -->
+    </SettingsUnit>
+  </SettingsSection> -->
 
-    <SettingsSection
-      v-if="serverType === 'own'"
-      class="columns is-desktop ownInfo-input-part"
+  <SettingsSection
+    v-if="serverType === 'own'"
+    class="columns is-desktop ownInfo-input-part"
+  >
+    <SettingsUnit
+      :title="$t('pages.privacy.ownInfo.title')"
+      :text="$t('pages.privacy.ownInfo.subtitle')"
     >
-      <SettingsUnit
-        :title="$t('pages.privacy.ownInfo.title')"
-        :text="$t('pages.privacy.ownInfo.subtitle')"
-      >
-        <InteractablesInput
-          v-model="ownInfo"
-          type="dark"
-          size="small"
-          :placeholder="$t('pages.privacy.ownInfo.placeholder')"
-          class="ownInfo-input"
-        />
+      <InteractablesInput
+        v-model="ownInfo"
+        type="dark"
+        size="small"
+        :placeholder="$t('pages.privacy.ownInfo.placeholder')"
+        class="ownInfo-input"
+      />
+      <TypographyText
+        class="color-danger"
+        type="danger"
+        :size="6"
+        :text="$t('pages.privacy.ownInfo.lengthErrorMsg')"
+        v-if="lengthError"
+      />
+      <span v-if="formatError">
         <TypographyText
           class="color-danger"
           type="danger"
           :size="6"
-          :text="$t('pages.privacy.ownInfo.lengthErrorMsg')"
-          v-if="lengthError"
+          :text="$t('pages.privacy.ownInfo.formatErrorMsg')"
         />
-        <span v-if="formatError">
-          <TypographyText
-            class="color-danger"
-            type="danger"
-            :size="6"
-            :text="$t('pages.privacy.ownInfo.formatErrorMsg')"
-          />
-          <TypographyText
-            class="color-danger ml-3"
-            type="danger"
-            :size="6"
-            :text="$t('pages.privacy.ownInfo.errorSampleUrl1')"
-          />
-          <TypographyText
-            class="color-danger ml-3"
-            type="danger"
-            :size="6"
-            :text="$t('pages.privacy.ownInfo.errorSampleUrl2')"
-          />
-        </span>
-      </SettingsUnit>
-    </SettingsSection>
-  </template>
+        <TypographyText
+          class="color-danger ml-3"
+          type="danger"
+          :size="6"
+          :text="$t('pages.privacy.ownInfo.errorSampleUrl1')"
+        />
+        <TypographyText
+          class="color-danger ml-3"
+          type="danger"
+          :size="6"
+          :text="$t('pages.privacy.ownInfo.errorSampleUrl2')"
+        />
+      </span>
+    </SettingsUnit>
+  </SettingsSection>
 </SettingsPage>
diff --git a/components/views/settings/pages/privacy/index.vue b/components/views/settings/pages/privacy/index.vue
index 2ff8ca583c..e721440755 100644
--- a/components/views/settings/pages/privacy/index.vue
+++ b/components/views/settings/pages/privacy/index.vue
@@ -6,6 +6,7 @@ import { mapState, mapGetters } from 'vuex'
 import { TranslateResult } from 'vue-i18n'
 import { validURL } from '~/libraries/ui/Common'
 import { RootState } from '~/types/store/store'
+import iridium from '~/libraries/Iridium/IridiumManager'
 
 export default Vue.extend({
   name: 'PrivacySettings',
@@ -15,6 +16,7 @@ export default Vue.extend({
       formatError: false as boolean,
       lengthError: false as boolean,
       loading: [] as string[],
+      privacySettings: iridium.settings.state.privacy,
     }
   },
   computed: {
@@ -79,42 +81,38 @@ export default Vue.extend({
     },
     embeddedLinks: {
       set(state: boolean) {
-        this.$store.commit('settings/embeddedLinks', state)
+        iridium.settings.set('/privacy/embeddedLinks', state)
       },
       get(): boolean {
-        return this.settings.embeddedLinks
+        return this.privacySettings.embeddedLinks
       },
     },
     consentScan: {
       async set(consentToScan: boolean) {
         this.loading.push('consentScan')
-        await this.$store.dispatch('textile/updateUserThreadData', {
-          consentToScan,
-        })
+        await iridium.settings.set('/privacy/consentToScan', consentToScan)
         this.loading.splice(this.loading.indexOf('consentScan'), 1)
       },
       get(): boolean {
-        return this.userThread.consentToScan
+        return this.privacySettings.consentToScan
       },
     },
     blockNsfw: {
       async set(blockNsfw: boolean) {
         this.loading.push('blockNsfw')
-        await this.$store.dispatch('textile/updateUserThreadData', {
-          blockNsfw,
-        })
+        await iridium.settings.set('/privacy/blockNsfw', blockNsfw)
         this.loading.splice(this.loading.indexOf('blockNsfw'), 1)
       },
       get(): boolean {
-        return this.userThread.blockNsfw
+        return this.privacySettings.blockNsfw
       },
     },
     displayCurrentActivity: {
       set(state: boolean) {
-        this.$store.commit('settings/displayCurrentActivity', state)
+        iridium.settings.set('/privacy/displayCurrentActivity', state)
       },
       get(): boolean {
-        return this.settings.displayCurrentActivity
+        return this.privacySettings.displayCurrentActivity
       },
     },
   },
diff --git a/layouts/chat.vue b/layouts/chat.vue
index 0f65495528..3d12ccdca6 100644
--- a/layouts/chat.vue
+++ b/layouts/chat.vue
@@ -2,7 +2,7 @@
   <div
     id="app-wrap"
     :class="[
-      $store.state.ui.theme.base.class,
+      `theme-${settings.theme}`,
       showSidebar ? 'is-open' : 'is-collapsed chat-page',
       asidebar && selectedGroup ? 'is-open-aside' : 'is-collapsed-aside',
       selectedGroup ? 'active-group' : null,
@@ -85,7 +85,7 @@
             </UiChatScroll>-->
             <Nuxt />
             <WalletMini v-if="ui.modals.walletMini" />
-            <Chatbar v-if="recipient" ref="chatbar" :recipient="recipient" />
+            <Chatbar ref="chatbar" />
           </DroppableWrapper>
         </swiper-slide>
         <swiper-slide v-if="$data.asidebar" class="aside-container">
@@ -102,8 +102,8 @@
     <MobileNav v-if="$device.isMobile" />
     <!-- Sets the global css variable for the theme flair color -->
     <v-style>
-      :root { --flair-color: {{ flairColor[0] }}; --flair-color-secondary:
-      {{ flairColor[1] }}; --flair-color-rgb:{{ flairColor[2] }}; }
+      :root { --flair-color: {{ flair.primary }}; --flair-color-secondary:
+      {{ flair.secondary }}; --flair-color-rgb: {{ flair.primaryRGB }}; }
     </v-style>
   </div>
 </template>
@@ -117,14 +117,12 @@ import { Touch } from '~/components/mixins/Touch'
 import Layout from '~/components/mixins/Layouts/Layout'
 import useMeta from '~/components/compositions/useMeta'
 import { DataStateType } from '~/store/dataState/types'
-import { FlairColor, SettingsRoutes } from '~/store/ui/types'
-// import type { Friend } from '~/types/ui/friends'
+import { SettingsRoutes } from '~/store/ui/types'
 import type { Friend } from '~/libraries/Iridium/friends/types'
 import type { GroupMap as Group } from '~/libraries/Iridium/groups/types'
-// import { Group } from '~/store/groups/types'
 import { RootState } from '~/types/store/store'
-
 import iridium from '~/libraries/Iridium/IridiumManager'
+import { flairs, Flair, Settings } from '~/libraries/Iridium/settings/types'
 
 declare module 'vue/types/vue' {
   interface Vue {
@@ -147,6 +145,7 @@ export default Vue.extend({
     return {
       sidebar: !this.$device.isMobile,
       asidebar: !this.$device.isMobile,
+      settings: iridium.settings.state,
       swiperOption: {
         resistanceRatio: 0,
         slidesPerView: 'auto',
@@ -218,8 +217,8 @@ export default Vue.extend({
       //       )
       // return recipient
     },
-    flairColor(): FlairColor {
-      return this.ui.theme.flair.value
+    flair(): Flair {
+      return flairs[((this as any).settings as Settings).flair]
     },
     showOlderMessageInfo(): boolean {
       return this.ui.showOlderMessagesInfo
diff --git a/layouts/default.vue b/layouts/default.vue
index 46911e4dfe..0e60fbde75 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -1,19 +1,22 @@
 <template>
-  <div id="app" :class="$store.state.ui.theme.base.class">
+  <div id="app" :class="`theme-${iridium.settings.state.theme}`">
     <UiModal v-if="$store.state.ui.modals.errorNetwork.isOpen" nopad>
       <UiPopupsErrorNetwork />
     </UiModal>
     <Nuxt />
     <v-style>
-      :root { --flair-color: {{ $store.state.ui.theme.flair.value[0] }};
-      --flair-color-secondary: {{ $store.state.ui.theme.flair.value[1] }};
-      --flair-color-rgb:{{ $store.state.ui.theme.flair.value[2] }};}
+      :root { --flair-color: {{ flair.primary }}; --flair-color-secondary:
+      {{ flair.secondary }}; --flair-color-rgb: {{ flair.primaryRGB }}; }
     </v-style>
   </div>
 </template>
 
 <script setup lang="ts">
 import useMeta from '~/components/compositions/useMeta'
+import iridium from '~/libraries/Iridium/IridiumManager'
+import { flairs } from '~/libraries/Iridium/settings/types'
+
+const flair = flairs[iridium.settings.state.flair]
 
 useMeta()
 </script>
diff --git a/layouts/files.vue b/layouts/files.vue
index fd4ec1f80a..a7a18f82b9 100644
--- a/layouts/files.vue
+++ b/layouts/files.vue
@@ -2,7 +2,7 @@
   <div
     id="app-wrap"
     :class="[
-      $store.state.ui.theme.base.class,
+      `theme-${settings.theme}`,
       showSidebar ? 'is-open' : 'is-collapsed',
     ]"
   >
@@ -53,8 +53,8 @@
     <MobileNav v-if="$device.isMobile" />
     <!-- Sets the global css variable for the theme flair color -->
     <v-style>
-      :root { --flair-color: {{ flairColor[0] }}; --flair-color-secondary:
-      {{ flairColor[1] }}; --flair-color-rgb:{{ flairColor[2] }};}
+      :root { --flair-color: {{ flair.primary }}; --flair-color-secondary:
+      {{ flair.secondary }}; --flair-color-rgb: {{ flair.primaryRGB }}; }
     </v-style>
   </div>
 </template>
@@ -69,6 +69,8 @@ import Layout from '~/components/mixins/Layouts/Layout'
 import useMeta from '~/components/compositions/useMeta'
 import { SettingsRoutes } from '~/store/ui/types'
 import { RootState } from '~/types/store/store'
+import iridium from '~/libraries/Iridium/IridiumManager'
+import { flairs, Flair, Settings } from '~/libraries/Iridium/settings/types'
 
 export default Vue.extend({
   name: 'FilesLayout',
@@ -84,6 +86,7 @@ export default Vue.extend({
   data() {
     return {
       sidebar: !this.$device.isMobile,
+      settings: iridium.settings.state,
       swiperOption: {
         initialSlide: this.$device.isMobile ? 1 : 0,
         resistanceRatio: 0,
@@ -112,8 +115,8 @@ export default Vue.extend({
     ...mapGetters('ui', ['showSidebar', 'isFilesIndexLoading']),
     ...mapGetters('textile', ['getInitialized']),
     ...mapGetters('webrtc', ['isBackgroundCall']),
-    flairColor(): string {
-      return this.$store.state.ui.theme.flair.value
+    flair(): Flair {
+      return flairs[((this as any).settings as Settings).flair]
     },
   },
   watch: {
diff --git a/layouts/friends.vue b/layouts/friends.vue
index 25d9d5ebcd..d8e869c26f 100644
--- a/layouts/friends.vue
+++ b/layouts/friends.vue
@@ -2,7 +2,7 @@
   <div
     id="app-wrap"
     :class="[
-      $store.state.ui.theme.base.class,
+      `theme-${settings.theme}`,
       showSidebar && swiperSlideIndex == 0 ? 'is-open' : 'is-collapsed',
     ]"
   >
@@ -57,8 +57,8 @@
     <MobileNav v-if="$device.isMobile" />
     <!-- Sets the global css variable for the theme flair color -->
     <v-style>
-      :root { --flair-color: {{ flairColor[0] }}; --flair-color-secondary:
-      {{ flairColor[1] }}; --flair-color-rgb:{{ flairColor[2] }};}
+      :root { --flair-color: {{ flair.primary }}; --flair-color-secondary:
+      {{ flair.secondary }}; --flair-color-rgb: {{ flair.primaryRGB }}; }
     </v-style>
   </div>
 </template>
@@ -70,6 +70,8 @@ import { MenuIcon } from 'satellite-lucide-icons'
 import { Touch } from '~/components/mixins/Touch'
 import Layout from '~/components/mixins/Layouts/Layout'
 import useMeta from '~/components/compositions/useMeta'
+import iridium from '~/libraries/Iridium/IridiumManager'
+import { flairs, Flair, Settings } from '~/libraries/Iridium/settings/types'
 
 export default Vue.extend({
   name: 'ChatLayout',
@@ -84,6 +86,7 @@ export default Vue.extend({
   data() {
     return {
       sidebar: !this.$device.isMobile,
+      settings: iridium.settings.state,
       swiperOption: {
         resistanceRatio: 0,
         slidesPerView: 'auto',
@@ -116,8 +119,8 @@ export default Vue.extend({
   },
 
   computed: {
-    flairColor() {
-      return this.$store.state.ui.theme.flair.value
+    flair(): Flair {
+      return flairs[((this as any).settings as Settings).flair]
     },
     ...mapState(['friends', 'groups', 'dataState']),
     ...mapGetters('ui', ['showSidebar', 'swiperSlideIndex']),
diff --git a/layouts/server.vue b/layouts/server.vue
index 90d0b5ee94..0a7256b265 100644
--- a/layouts/server.vue
+++ b/layouts/server.vue
@@ -1,15 +1,12 @@
 <template>
   <div
     id="app-wrap"
-    :class="[
-      $store.state.ui.theme.base.class,
-      sidebar ? 'is-open' : 'is-collapsed',
-    ]"
+    :class="[`theme-${settings.theme}`, sidebar ? 'is-open' : 'is-collapsed']"
   >
     <div
       id="app"
       :class="[
-        $store.state.ui.theme.base.class,
+        `theme-${settings.theme}`,
         sidebar ? 'is-open' : 'is-collapsed',
         $device.isMobile ? 'mobile-app' : 'desktop',
         isBackgroundCall ? 'has-background-call' : '',
@@ -73,8 +70,8 @@
     <MobileNav v-if="$device.isMobile" />
     <!-- Sets the global css variable for the theme flair color -->
     <v-style>
-      :root { --flair-color: {{ flairColor[0] }}; --flair-color-secondary:
-      {{ flairColor[1] }}; --flair-color-rgb:{{ flairColor[2] }};}
+      :root { --flair-color: {{ flair.primary }}; --flair-color-secondary:
+      {{ flair.secondary }}; --flair-color-rgb: {{ flair.primaryRGB }}; }
     </v-style>
   </div>
 </template>
@@ -86,6 +83,8 @@ import { MenuIcon } from 'satellite-lucide-icons'
 import { Touch } from '~/components/mixins/Touch'
 import Layout from '~/components/mixins/Layouts/Layout'
 import useMeta from '~/components/compositions/useMeta'
+import iridium from '~/libraries/Iridium/IridiumManager'
+import { flairs, Flair, Settings } from '~/libraries/Iridium/settings/types'
 
 export default Vue.extend({
   name: 'ServerLayout',
@@ -100,6 +99,7 @@ export default Vue.extend({
   data() {
     return {
       sidebar: !this.$device.isMobile,
+      settings: iridium.settings.state,
       swiperOption: {
         initialSlide: this.$device.isMobile ? 1 : 0,
         resistanceRatio: 0,
@@ -122,8 +122,8 @@ export default Vue.extend({
     swiper() {
       return this.$refs.swiper.$swiper
     },
-    flairColor() {
-      return this.ui.theme.flair.value
+    flair(): Flair {
+      return flairs[((this as any).settings as Settings).flair]
     },
   },
   methods: {
diff --git a/libraries/Iridium/IridiumManager.ts b/libraries/Iridium/IridiumManager.ts
index 2eb35c7c97..85f037296f 100644
--- a/libraries/Iridium/IridiumManager.ts
+++ b/libraries/Iridium/IridiumManager.ts
@@ -9,15 +9,27 @@ import logger from '~/plugins/local/logger'
 import { Config } from '~/config'
 import Crypto from '~/libraries/Crypto/Crypto'
 import FilesManager from '~/libraries/Iridium/files/FilesManager'
+import SettingsManager from '~/libraries/Iridium/settings/SettingsManager'
 
 export class IridiumManager extends Emitter {
   ready: boolean = false
   connector?: Iridium
-  profile?: ProfileManager
-  groups?: GroupManager
-  chat?: ChatManager
-  friends?: FriendsManager
-  files?: FilesManager
+  profile: ProfileManager
+  groups: GroupManager
+  chat: ChatManager
+  friends: FriendsManager
+  files: FilesManager
+  settings: SettingsManager
+
+  constructor() {
+    super()
+    this.profile = new ProfileManager(this)
+    this.groups = new GroupManager(this)
+    this.friends = new FriendsManager(this)
+    this.chat = new ChatManager(this)
+    this.files = new FilesManager(this)
+    this.settings = new SettingsManager(this)
+  }
 
   /**
    * @method
@@ -69,20 +81,19 @@ export class IridiumManager extends Emitter {
     await this.connector.set('/', doc)
 
     logger.log('iridium/manager', 'initializing profile')
-    this.profile = new ProfileManager(this)
-    logger.log('iridium/friends', 'initializing friends')
-    this.friends = new FriendsManager(this)
+    await this.profile.init()
     logger.log('iridium/manager', 'initializing groups')
-    this.groups = new GroupManager(this)
-    logger.log('iridium/manager', 'initializing chat')
-    this.chat = new ChatManager(this)
-    logger.log('iridium/manager', 'initializing files')
-    this.files = new FilesManager(this)
-
-    logger.log('iridium/manager', 'ready')
+    await this.groups.init()
+    logger.log('iridium/friends', 'initializing friends')
     await this.friends.init()
+    logger.log('iridium/manager', 'initializing chat')
     await this.chat.init()
+    logger.log('iridium/manager', 'initializing files')
     await this.files.init()
+    logger.log('iridium/manager', 'initializing settings')
+    await this.settings.init()
+    logger.log('iridium/manager', 'ready')
+
     this.ready = true
   }
 
diff --git a/libraries/Iridium/groups/GroupManager.ts b/libraries/Iridium/groups/GroupManager.ts
index 872c424d80..f2a9e79937 100644
--- a/libraries/Iridium/groups/GroupManager.ts
+++ b/libraries/Iridium/groups/GroupManager.ts
@@ -4,7 +4,6 @@ import * as json from 'multiformats/codecs/json'
 import { IridiumManager } from '../IridiumManager'
 import Group from './Group'
 import { GroupConfig, GroupData, GroupsError } from './types'
-import logger from '~/plugins/local/logger'
 
 export default class GroupManager extends Emitter<IridiumMessage> {
   groupIds?: string[]
@@ -12,10 +11,19 @@ export default class GroupManager extends Emitter<IridiumMessage> {
 
   constructor(private readonly iridium: IridiumManager) {
     super()
+    this.iridium = iridium
   }
 
   async init() {
-    logger.log('iridium/groups', 'init()')
+    const iridium = this.iridium.connector
+    if (!iridium) {
+      throw new Error('cannot initialize groups, no iridium connector')
+    }
+
+    await this.fetch()
+  }
+
+  private async fetch() {
     this.state = await this.iridium.connector?.get('/groups')
   }
 
diff --git a/libraries/Iridium/profile/ProfileManager.ts b/libraries/Iridium/profile/ProfileManager.ts
index bd5b7d05cd..bf3bd4d851 100644
--- a/libraries/Iridium/profile/ProfileManager.ts
+++ b/libraries/Iridium/profile/ProfileManager.ts
@@ -9,10 +9,19 @@ export default class IridiumProfile extends Emitter {
   constructor(iridium: IridiumManager) {
     super()
     this.iridium = iridium
-    this.iridium.connector?.on('state:changed', this.onStateChanged.bind(this))
   }
 
-  async load() {
+  async init() {
+    const iridium = this.iridium.connector
+    if (!iridium) {
+      throw new Error('cannot initialize profile, no iridium connector')
+    }
+
+    iridium.on('state:changed', this.onStateChanged.bind(this))
+    await this.fetch()
+  }
+
+  private async fetch() {
     this.state = await this.iridium.connector?.get('/profile')
     // TODO: verify schema of profile data, recover from invalid data
   }
diff --git a/libraries/Iridium/settings/SettingsManager.ts b/libraries/Iridium/settings/SettingsManager.ts
new file mode 100644
index 0000000000..a0bb02d9d5
--- /dev/null
+++ b/libraries/Iridium/settings/SettingsManager.ts
@@ -0,0 +1,65 @@
+import { Emitter } from '@satellite-im/iridium'
+import merge from 'deepmerge'
+import { IridiumManager } from '../IridiumManager'
+import { setInObject } from '../utils'
+import {
+  ThemeKeys,
+  FlairKeys,
+  LanguageKeys,
+  Settings,
+  defaultKeybinds,
+  defaultSounds,
+} from './types'
+import { overwriteMerge } from '~/utilities/merge'
+
+const initialState: Settings = {
+  theme: ThemeKeys.DEFAULT,
+  flair: FlairKeys.SATELLITE,
+  language: LanguageKeys.EN_US,
+  video: {
+    flipLocalStream: true,
+  },
+  audio: {
+    sounds: defaultSounds,
+  },
+  keybinds: defaultKeybinds,
+  privacy: {
+    embeddedLinks: true,
+    displayCurrentActivity: true,
+    consentToScan: false,
+    blockNsfw: true,
+  },
+}
+
+export default class SettingsManager extends Emitter {
+  public readonly iridium: IridiumManager
+  public state: Settings
+
+  constructor(iridium: IridiumManager) {
+    super()
+    this.iridium = iridium
+    this.state = initialState
+  }
+
+  async init() {
+    await this.fetch()
+  }
+
+  private async fetch() {
+    this.state = merge(initialState, await this.get(), {
+      arrayMerge: overwriteMerge,
+    })
+  }
+
+  get(path: string = '', options: any = {}) {
+    return this.iridium.connector?.get(`/settings${path}`, options)
+  }
+
+  set(path: string = '', payload: any, options: any = {}) {
+    const didSet = setInObject(this.state, path, payload)
+    if (!didSet) {
+      return
+    }
+    return this.iridium.connector?.set(`/settings${path}`, payload, options)
+  }
+}
diff --git a/libraries/Iridium/settings/types.ts b/libraries/Iridium/settings/types.ts
new file mode 100644
index 0000000000..a9f2f4df01
--- /dev/null
+++ b/libraries/Iridium/settings/types.ts
@@ -0,0 +1,131 @@
+import { Sounds } from '~/libraries/SoundManager/SoundManager'
+import { hexToRGB } from '~/utilities/Colors'
+
+export enum ThemeKeys {
+  DEFAULT = 'default',
+  MOONLESS_NIGHT = 'moonlessNight',
+}
+
+export const themes: Record<ThemeKeys, string> = {
+  default: 'Default',
+  moonlessNight: 'Moonless Night',
+}
+
+export enum FlairKeys {
+  SATELLITE = 'satellite',
+  PEACH = 'peach',
+  PINK = 'pink',
+  LIME = 'lime',
+  PURPLE = 'purple',
+  LAVENDER = 'lavender',
+  SUNFLOWER = 'sunflower',
+  DEEPBLUE = 'deepBlue',
+  VOID = 'void',
+}
+
+export type Flair = {
+  name: string
+  primary: string
+  secondary: string
+  primaryRGB: string
+}
+
+function flairDefinition(flair: Omit<Flair, 'primaryRGB'>): Flair {
+  return {
+    ...flair,
+    primaryRGB: hexToRGB(flair.primary),
+  }
+}
+
+export const flairs: Record<FlairKeys, Flair> = {
+  satellite: flairDefinition({
+    name: 'Satellite',
+    primary: '#2761fd',
+    secondary: '#286cfe',
+  }),
+  peach: flairDefinition({
+    name: 'Peach',
+    primary: '#ed4c67',
+    secondary: '#ed5672',
+  }),
+  pink: flairDefinition({
+    name: 'Pink',
+    primary: '#fda7df',
+    secondary: '#fdb1e9',
+  }),
+  lime: flairDefinition({
+    name: 'Lime',
+    primary: '#a3cb38',
+    secondary: '#aed542',
+  }),
+  purple: flairDefinition({
+    name: 'Purple',
+    primary: '#6f1e51',
+    secondary: '#80215d',
+  }),
+  lavender: flairDefinition({
+    name: 'Lavender',
+    primary: '#9980fa',
+    secondary: '#a891ff',
+  }),
+  sunflower: flairDefinition({
+    name: 'Sunflower',
+    primary: '#ffc312',
+    secondary: '#faca3e',
+  }),
+  deepBlue: flairDefinition({
+    name: 'Deep Blue',
+    primary: '#30336b',
+    secondary: '#2d328a',
+  }),
+  void: flairDefinition({
+    name: 'Void',
+    primary: '#2c3a47',
+    secondary: '#36434f',
+  }),
+}
+
+export enum LanguageKeys {
+  'EN_US' = 'en_US',
+}
+
+export const languages: Record<LanguageKeys, string> = {
+  en_US: 'English (USA)',
+}
+
+export type Settings = {
+  theme: ThemeKeys
+  flair: FlairKeys
+  language: LanguageKeys
+  video: {
+    flipLocalStream: boolean
+  }
+  audio: {
+    sounds: Record<Sounds, boolean>
+  }
+  keybinds: Record<KeybindKeys, string>
+  privacy: {
+    embeddedLinks: boolean
+    displayCurrentActivity: boolean
+    consentToScan: boolean
+    blockNsfw: boolean
+  }
+}
+
+export const defaultSounds = Object.fromEntries(
+  Object.values(Sounds).map((key) => [key, true]),
+) as Record<Sounds, boolean>
+
+export enum KeybindKeys {
+  TOGGLE_MUTE = 'toggleMute',
+  TOGGLE_DEAFEN = 'toggleDeafen',
+  OPEN_SETTINGS = 'openSettings',
+  CALL_ACTIVE_CHAT = 'callActiveChat',
+}
+
+export const defaultKeybinds: Record<KeybindKeys, string> = {
+  [KeybindKeys.TOGGLE_MUTE]: 'alt-m',
+  [KeybindKeys.TOGGLE_DEAFEN]: 'alt-d',
+  [KeybindKeys.OPEN_SETTINGS]: 'alt-s',
+  [KeybindKeys.CALL_ACTIVE_CHAT]: 'alt-c',
+}
diff --git a/libraries/Iridium/utils.ts b/libraries/Iridium/utils.ts
index 3b46f46576..a34addfc7b 100644
--- a/libraries/Iridium/utils.ts
+++ b/libraries/Iridium/utils.ts
@@ -2,3 +2,26 @@ import { Base64 } from './encoders'
 
 export const stringToTypedBase64 = (s: string): Base64 =>
   Buffer.from(s).toString('base64') as Base64
+
+/**
+ * @function setInObject
+ * @description Update an element's value in a deep nested object given a path
+ * @param obj The deeply nested object
+ * @param path The path to the deeply nested property in obj
+ * @param value The new value for the property
+   @returns true if the property's value was changed
+ */
+export function setInObject(obj: any, path: string, value: any): boolean {
+  const parts = path.split('/').filter((p) => p !== '')
+  const lastIndex = parts.length - 1
+  return parts.every((part, index) => {
+    if (index === lastIndex) {
+      if (obj[parts[index]] === value) {
+        return false
+      }
+      obj[parts[index]] = value
+    }
+    obj = obj[part]
+    return true
+  })
+}
diff --git a/package.json b/package.json
index 0e101572d5..0210249f54 100644
--- a/package.json
+++ b/package.json
@@ -54,6 +54,7 @@
     "bulma": "^0.9.3",
     "curve25519-js": "^0.0.4",
     "dayjs": "^1.10.8",
+    "deepmerge": "^4.2.2",
     "detectrtc": "^1.4.1",
     "dexie": "^3.2.1",
     "ed25519-hd-key": "^1.2.0",
@@ -115,7 +116,7 @@
     "@commitlint/config-conventional": "^12.0.1",
     "@nuxt/bridge": "npm:@nuxt/bridge-edge",
     "@nuxt/types": "^2.15.8",
-    "@nuxtjs/eslint-config-typescript": "^8.0.0",
+    "@nuxtjs/eslint-config-typescript": "^10.0.0",
     "@types/ed2curve": "^0.2.2",
     "@types/howler": "^2.2.5",
     "@types/jest": "^27.4.1",
diff --git a/store/ui/actions.ts b/store/ui/actions.ts
index ca766ff53a..85e0b2a860 100644
--- a/store/ui/actions.ts
+++ b/store/ui/actions.ts
@@ -10,6 +10,7 @@ import { getFullUserInfoFromState } from '~/utilities/Messaging'
 import { getCorrectKeybind } from '~/utilities/Keybinds'
 import { TextileError } from '~/store/textile/types'
 import { AlertState, AlertType } from '~/libraries/ui/Alerts'
+import iridium from '~/libraries/Iridium/IridiumManager'
 
 const $Sounds = new SoundManager()
 
@@ -45,10 +46,10 @@ export default {
    * @description Activates all keybindings with Mousetrap
    * @example mounted (){ activateKeybinds() }
    */
-  async activateKeybinds({ dispatch, rootState }: ActionsArguments<UIState>) {
+  async activateKeybinds({ dispatch }: ActionsArguments<UIState>) {
     const { toggleMute, toggleDeafen, openSettings, callActiveChat } =
       // @ts-ignore
-      rootState.settings.keybinds
+      iridium.settings.state.keybinds
     Mousetrap.reset()
     Mousetrap.bind(getCorrectKeybind(toggleMute), (event: KeyboardEvent) => {
       event.preventDefault()
diff --git a/store/ui/state.ts b/store/ui/state.ts
index de15ad9512..5028467b52 100644
--- a/store/ui/state.ts
+++ b/store/ui/state.ts
@@ -1,10 +1,4 @@
-import {
-  UIState,
-  GlyphMarketViewStatus,
-  Themes,
-  Flairs,
-  SettingsRoutes,
-} from './types'
+import { UIState, GlyphMarketViewStatus, SettingsRoutes } from './types'
 import { FileSortEnum } from '~/libraries/Enums/enums'
 
 const InitialUIState = (): UIState => ({
@@ -69,10 +63,6 @@ const InitialUIState = (): UIState => ({
   editMessage: { id: '', from: '', payload: '' },
   mostEmojiUsed: [],
   recentGlyphs: [],
-  theme: {
-    base: Themes[0],
-    flair: Flairs[0],
-  },
   filesUploadStatus: '',
   renameItem: undefined,
   filePreview: undefined,
diff --git a/store/ui/types.ts b/store/ui/types.ts
index f9fe56b338..0d984be7e9 100644
--- a/store/ui/types.ts
+++ b/store/ui/types.ts
@@ -6,87 +6,6 @@ import { Channel } from '~/types/ui/server'
 import { Alert } from '~/libraries/ui/Alerts'
 import { Fil } from '~/libraries/Files/Fil'
 import { Item } from '~/libraries/Files/abstracts/Item.abstract'
-export enum ThemeNames {
-  DEFAULT = 'default',
-  MOONLESS = 'moonless_night',
-}
-
-export type Theme = {
-  text: string
-  value: ThemeNames
-  class: string
-}
-
-export const Themes = [
-  {
-    text: 'Default',
-    value: ThemeNames.DEFAULT,
-    class: '',
-  },
-  {
-    text: 'Moonless Night',
-    value: ThemeNames.MOONLESS,
-    class: 'moonless_night',
-  },
-]
-
-export const FlairColors: any = {
-  SATELLITE: ['#2761fd', '#286CFE', '39, 97, 253'],
-  PEACH: ['#ED4C67', '#ED5672', '237, 76, 103'],
-  PINK: ['#FDA7DF', '#FDB1E9', '253, 167, 223'],
-  LIME: ['#A3CB38', '#AED542', '163, 203, 56'],
-  PURPLE: ['#6F1E51', '#80215D', '111, 30, 81'],
-  LAVENDER: ['#9980FA', '#A891FF', '153, 128, 250'],
-  SUNFLOWER: ['#FFC312', '#FACA3E', '255, 195, 18'],
-  DEEP_BLUE: ['#30336b', '#2D328A', '48, 51, 107'],
-  VOID: ['#2C3A47', '#36434F', '44, 58, 71'],
-}
-
-export type FlairColor = { primary: string; secondary: string }
-
-export type Flair = {
-  text: string
-  value: FlairColor
-}
-
-export const Flairs = [
-  {
-    text: 'Satellite',
-    value: FlairColors.SATELLITE,
-  },
-  {
-    text: 'Peach',
-    value: FlairColors.PEACH,
-  },
-  {
-    text: 'Pink',
-    value: FlairColors.PINK,
-  },
-  {
-    text: 'Lime',
-    value: FlairColors.LIME,
-  },
-  {
-    text: 'Purple',
-    value: FlairColors.PURPLE,
-  },
-  {
-    text: 'Lavender',
-    value: FlairColors.LAVENDER,
-  },
-  {
-    text: 'Sunflower',
-    value: FlairColors.SUNFLOWER,
-  },
-  {
-    text: 'Deep',
-    value: FlairColors.DEEP_BLUE,
-  },
-  {
-    text: 'Void',
-    value: FlairColors.VOID,
-  },
-]
 
 export enum GlyphMarketViewStatus {
   HOME = 'home',
diff --git a/utilities/merge.ts b/utilities/merge.ts
new file mode 100644
index 0000000000..d54374eacd
--- /dev/null
+++ b/utilities/merge.ts
@@ -0,0 +1,3 @@
+export function overwriteMerge<T>(_a: any, b: T): T {
+  return b
+}