From 6d0b3d4d0a579b0669b93dc68c143d5755bf157a Mon Sep 17 00:00:00 2001
From: tusooa <tusooa@kazv.moe>
Date: Fri, 6 Jan 2023 13:30:35 -0500
Subject: Stop propogation for all top-bar buttons

---
 src/components/desktop_nav/desktop_nav.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

(limited to 'src/components/desktop_nav/desktop_nav.vue')

diff --git a/src/components/desktop_nav/desktop_nav.vue b/src/components/desktop_nav/desktop_nav.vue
index 5db7fc79..07bf8005 100644
--- a/src/components/desktop_nav/desktop_nav.vue
+++ b/src/components/desktop_nav/desktop_nav.vue
@@ -38,7 +38,7 @@
         />
         <button
           class="button-unstyled nav-icon"
-          @click="openSettingsModal"
+          @click.stop="openSettingsModal"
         >
           <FAIcon
             fixed-width
@@ -65,7 +65,7 @@
         <button
           v-if="currentUser"
           class="button-unstyled nav-icon"
-          @click.prevent="logout"
+          @click.stop.prevent="logout"
         >
           <FAIcon
             fixed-width
-- 
cgit v1.2.3-70-g09d2


From c202c89ca0f8c9bc1957bff3bbe3ea39e21ddbba Mon Sep 17 00:00:00 2001
From: Tusooa Zhu <tusooa@kazv.moe>
Date: Wed, 9 Feb 2022 16:51:13 -0500
Subject: Add confirmation for logout

---
 src/components/confirm_modal/confirm_modal.vue |  1 +
 src/components/desktop_nav/desktop_nav.js      | 26 ++++++++++++++++++++++---
 src/components/desktop_nav/desktop_nav.vue     | 10 ++++++++++
 src/components/mobile_nav/mobile_nav.js        | 27 +++++++++++++++++++++++---
 src/components/mobile_nav/mobile_nav.vue       | 18 +++++++++++++++++
 5 files changed, 76 insertions(+), 6 deletions(-)

(limited to 'src/components/desktop_nav/desktop_nav.vue')

diff --git a/src/components/confirm_modal/confirm_modal.vue b/src/components/confirm_modal/confirm_modal.vue
index 250a6984..fa354285 100644
--- a/src/components/confirm_modal/confirm_modal.vue
+++ b/src/components/confirm_modal/confirm_modal.vue
@@ -1,6 +1,7 @@
 <template>
   <dialog-modal
     v-if="showing"
+    class="confirm-modal"
     :onCancel="onCancel"
   >
     <template v-slot:header>
diff --git a/src/components/desktop_nav/desktop_nav.js b/src/components/desktop_nav/desktop_nav.js
index 08c0e44e..745b1a81 100644
--- a/src/components/desktop_nav/desktop_nav.js
+++ b/src/components/desktop_nav/desktop_nav.js
@@ -1,4 +1,5 @@
 import SearchBar from 'components/search_bar/search_bar.vue'
+import ConfirmModal from '../confirm_modal/confirm_modal.vue'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
   faSignInAlt,
@@ -30,7 +31,8 @@ library.add(
 
 export default {
   components: {
-    SearchBar
+    SearchBar,
+    ConfirmModal
   },
   data: () => ({
     searchBarHidden: true,
@@ -40,7 +42,8 @@ export default {
         window.CSS.supports('-moz-mask-size', 'contain') ||
         window.CSS.supports('-ms-mask-size', 'contain') ||
         window.CSS.supports('-o-mask-size', 'contain')
-    )
+    ),
+    showingConfirmLogout: false
   }),
   computed: {
     enableMask () { return this.supportsMask && this.$store.state.instance.logoMask },
@@ -73,15 +76,32 @@ export default {
     hideSitename () { return this.$store.state.instance.hideSitename },
     logoLeft () { return this.$store.state.instance.logoLeft },
     currentUser () { return this.$store.state.users.currentUser },
-    privateMode () { return this.$store.state.instance.private }
+    privateMode () { return this.$store.state.instance.private },
+    shouldConfirmLogout () {
+      return this.$store.getters.mergedConfig.modalOnLogout
+    }
   },
   methods: {
     scrollToTop () {
       window.scrollTo(0, 0)
     },
+    showConfirmLogout () {
+      this.showingConfirmLogout = true
+    },
+    hideConfirmLogout () {
+      this.showingConfirmLogout = false
+    },
     logout () {
+      if (!this.shouldConfirmLogout) {
+        this.doLogout()
+      } else {
+        this.showConfirmLogout()
+      }
+    },
+    doLogout () {
       this.$router.replace('/main/public')
       this.$store.dispatch('logout')
+      this.hideConfirmLogout()
     },
     onSearchBarToggled (hidden) {
       this.searchBarHidden = hidden
diff --git a/src/components/desktop_nav/desktop_nav.vue b/src/components/desktop_nav/desktop_nav.vue
index 07bf8005..7db94a37 100644
--- a/src/components/desktop_nav/desktop_nav.vue
+++ b/src/components/desktop_nav/desktop_nav.vue
@@ -76,6 +76,16 @@
         </button>
       </div>
     </div>
+    <confirm-modal
+      :showing="showingConfirmLogout"
+      :title="$t('login.mute_confirm_title')"
+      :confirm-text="$t('login.logout_confirm_accept_button')"
+      :cancel-text="$t('login.logout_confirm_cancel_button')"
+      @accepted="doLogout"
+      @cancelled="hideConfirmLogout"
+    >
+      {{ $t('login.logout_confirm') }}
+    </confirm-modal>
   </nav>
 </template>
 <script src="./desktop_nav.js"></script>
diff --git a/src/components/mobile_nav/mobile_nav.js b/src/components/mobile_nav/mobile_nav.js
index cdbbb812..dad1f6aa 100644
--- a/src/components/mobile_nav/mobile_nav.js
+++ b/src/components/mobile_nav/mobile_nav.js
@@ -1,5 +1,6 @@
 import SideDrawer from '../side_drawer/side_drawer.vue'
 import Notifications from '../notifications/notifications.vue'
+import ConfirmModal from '../confirm_modal/confirm_modal.vue'
 import { unseenNotificationsFromStore } from '../../services/notification_utils/notification_utils'
 import GestureService from '../../services/gesture_service/gesture_service'
 import NavigationPins from 'src/components/navigation/navigation_pins.vue'
@@ -25,12 +26,14 @@ const MobileNav = {
   components: {
     SideDrawer,
     Notifications,
-    NavigationPins
+    NavigationPins,
+    ConfirmModal
   },
   data: () => ({
     notificationsCloseGesture: undefined,
     notificationsOpen: false,
-    notificationsAtTop: true
+    notificationsAtTop: true,
+    showingConfirmLogout: false
   }),
   created () {
     this.notificationsCloseGesture = GestureService.swipeGesture(
@@ -57,7 +60,11 @@ const MobileNav = {
     ...mapGetters(['unreadChatCount', 'unreadAnnouncementCount']),
     chatsPinned () {
       return new Set(this.$store.state.serverSideStorage.prefsStorage.collections.pinnedNavItems).has('chats')
-    }
+    },
+    shouldConfirmLogout () {
+      return this.$store.getters.mergedConfig.modalOnLogout
+    },
+    ...mapGetters(['unreadChatCount'])
   },
   methods: {
     toggleMobileSidebar () {
@@ -88,9 +95,23 @@ const MobileNav = {
     scrollMobileNotificationsToTop () {
       this.$refs.mobileNotifications.scrollTo(0, 0)
     },
+    showConfirmLogout () {
+      this.showingConfirmLogout = true
+    },
+    hideConfirmLogout () {
+      this.showingConfirmLogout = false
+    },
     logout () {
+      if (!this.shouldConfirmLogout) {
+        this.doLogout()
+      } else {
+        this.showConfirmLogout()
+      }
+    },
+    doLogout () {
       this.$router.replace('/main/public')
       this.$store.dispatch('logout')
+      this.hideConfirmLogout()
     },
     markNotificationsAsSeen () {
       // this.$refs.notifications.markAsSeen()
diff --git a/src/components/mobile_nav/mobile_nav.vue b/src/components/mobile_nav/mobile_nav.vue
index d6fe102c..de97624b 100644
--- a/src/components/mobile_nav/mobile_nav.vue
+++ b/src/components/mobile_nav/mobile_nav.vue
@@ -88,6 +88,16 @@
       ref="sideDrawer"
       :logout="logout"
     />
+    <confirm-modal
+      :showing="showingConfirmLogout"
+      :title="$t('login.mute_confirm_title')"
+      :confirm-text="$t('login.logout_confirm_accept_button')"
+      :cancel-text="$t('login.logout_confirm_cancel_button')"
+      @accepted="doLogout"
+      @cancelled="hideConfirmLogout"
+    >
+      {{ $t('login.logout_confirm') }}
+    </confirm-modal>
   </div>
 </template>
 
@@ -235,6 +245,14 @@
       }
     }
   }
+  .confirm-modal.dark-overlay {
+    &::before {
+      z-index: 3000;
+    }
+    .dialog-modal.panel {
+      z-index: 3001;
+    }
+  }
 }
 
 </style>
-- 
cgit v1.2.3-70-g09d2


From 51ade260660b1a6586b5c0091d89c9701b684870 Mon Sep 17 00:00:00 2001
From: Tusooa Zhu <tusooa@kazv.moe>
Date: Fri, 11 Feb 2022 10:18:20 -0500
Subject: Fix logout confirm dialog title

---
 src/components/desktop_nav/desktop_nav.vue | 2 +-
 src/components/mobile_nav/mobile_nav.vue   | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

(limited to 'src/components/desktop_nav/desktop_nav.vue')

diff --git a/src/components/desktop_nav/desktop_nav.vue b/src/components/desktop_nav/desktop_nav.vue
index 7db94a37..0f5b3136 100644
--- a/src/components/desktop_nav/desktop_nav.vue
+++ b/src/components/desktop_nav/desktop_nav.vue
@@ -78,7 +78,7 @@
     </div>
     <confirm-modal
       :showing="showingConfirmLogout"
-      :title="$t('login.mute_confirm_title')"
+      :title="$t('login.logout_confirm_title')"
       :confirm-text="$t('login.logout_confirm_accept_button')"
       :cancel-text="$t('login.logout_confirm_cancel_button')"
       @accepted="doLogout"
diff --git a/src/components/mobile_nav/mobile_nav.vue b/src/components/mobile_nav/mobile_nav.vue
index de97624b..0f23b7ac 100644
--- a/src/components/mobile_nav/mobile_nav.vue
+++ b/src/components/mobile_nav/mobile_nav.vue
@@ -90,7 +90,7 @@
     />
     <confirm-modal
       :showing="showingConfirmLogout"
-      :title="$t('login.mute_confirm_title')"
+      :title="$t('login.logout_confirm_title')"
       :confirm-text="$t('login.logout_confirm_accept_button')"
       :cancel-text="$t('login.logout_confirm_cancel_button')"
       @accepted="doLogout"
-- 
cgit v1.2.3-70-g09d2


From 39e4746f615970001839309e06a0f13d9613b175 Mon Sep 17 00:00:00 2001
From: Tusooa Zhu <tusooa@kazv.moe>
Date: Thu, 17 Mar 2022 00:06:26 -0400
Subject: Use portal for modals

---
 src/components/account_actions/account_actions.vue | 36 +++++++-------
 src/components/confirm_modal/confirm_modal.js      |  5 --
 src/components/confirm_modal/confirm_modal.vue     |  1 -
 src/components/desktop_nav/desktop_nav.vue         | 22 +++++----
 src/components/extra_buttons/extra_buttons.vue     | 22 +++++----
 src/components/follow_button/follow_button.vue     | 56 +++++++++++-----------
 src/components/mobile_nav/mobile_nav.vue           | 22 +++++----
 src/components/retweet_button/retweet_button.vue   | 22 +++++----
 src/components/user_card/user_card.vue             | 36 +++++++-------
 9 files changed, 114 insertions(+), 108 deletions(-)

(limited to 'src/components/desktop_nav/desktop_nav.vue')

diff --git a/src/components/account_actions/account_actions.vue b/src/components/account_actions/account_actions.vue
index dfe1f706..273aac69 100644
--- a/src/components/account_actions/account_actions.vue
+++ b/src/components/account_actions/account_actions.vue
@@ -74,24 +74,26 @@
         </button>
       </template>
     </Popover>
-    <confirm-modal
-      :showing="showingConfirmBlock"
-      :title="$t('user_card.block_confirm_title')"
-      :confirm-text="$t('user_card.block_confirm_accept_button')"
-      :cancel-text="$t('user_card.block_confirm_cancel_button')"
-      @accepted="doBlockUser"
-      @cancelled="hideConfirmBlock"
-    >
-      <i18n
-        path="user_card.block_confirm"
-        tag="span"
+    <portal to="modal">
+      <confirm-modal
+        v-if="showingConfirmBlock"
+        :title="$t('user_card.block_confirm_title')"
+        :confirm-text="$t('user_card.block_confirm_accept_button')"
+        :cancel-text="$t('user_card.block_confirm_cancel_button')"
+        @accepted="doBlockUser"
+        @cancelled="hideConfirmBlock"
       >
-        <span
-          place="user"
-          v-text="user.screen_name_ui"
-        />
-      </i18n>
-    </confirm-modal>
+        <i18n
+          path="user_card.block_confirm"
+          tag="span"
+        >
+          <span
+            place="user"
+            v-text="user.screen_name_ui"
+          />
+        </i18n>
+      </confirm-modal>
+    </portal>
   </div>
 </template>
 
diff --git a/src/components/confirm_modal/confirm_modal.js b/src/components/confirm_modal/confirm_modal.js
index bb5e9d97..96ddc118 100644
--- a/src/components/confirm_modal/confirm_modal.js
+++ b/src/components/confirm_modal/confirm_modal.js
@@ -11,12 +11,7 @@ const ConfirmModal = {
   components: {
     DialogModal
   },
-  data: {
-  },
   props: {
-    showing: {
-      type: Boolean
-    },
     title: {
       type: String
     },
diff --git a/src/components/confirm_modal/confirm_modal.vue b/src/components/confirm_modal/confirm_modal.vue
index 59e46dc1..5b5014c5 100644
--- a/src/components/confirm_modal/confirm_modal.vue
+++ b/src/components/confirm_modal/confirm_modal.vue
@@ -1,6 +1,5 @@
 <template>
   <dialog-modal
-    v-if="showing"
     class="confirm-modal"
     :on-cancel="onCancel"
   >
diff --git a/src/components/desktop_nav/desktop_nav.vue b/src/components/desktop_nav/desktop_nav.vue
index 0f5b3136..18630385 100644
--- a/src/components/desktop_nav/desktop_nav.vue
+++ b/src/components/desktop_nav/desktop_nav.vue
@@ -76,16 +76,18 @@
         </button>
       </div>
     </div>
-    <confirm-modal
-      :showing="showingConfirmLogout"
-      :title="$t('login.logout_confirm_title')"
-      :confirm-text="$t('login.logout_confirm_accept_button')"
-      :cancel-text="$t('login.logout_confirm_cancel_button')"
-      @accepted="doLogout"
-      @cancelled="hideConfirmLogout"
-    >
-      {{ $t('login.logout_confirm') }}
-    </confirm-modal>
+    <portal to="modal">
+      <confirm-modal
+        v-if="showingConfirmLogout"
+        :title="$t('login.logout_confirm_title')"
+        :confirm-text="$t('login.logout_confirm_accept_button')"
+        :cancel-text="$t('login.logout_confirm_cancel_button')"
+        @accepted="doLogout"
+        @cancelled="hideConfirmLogout"
+      >
+        {{ $t('login.logout_confirm') }}
+      </confirm-modal>
+    </portal>
   </nav>
 </template>
 <script src="./desktop_nav.js"></script>
diff --git a/src/components/extra_buttons/extra_buttons.vue b/src/components/extra_buttons/extra_buttons.vue
index 293f6d68..4641947a 100644
--- a/src/components/extra_buttons/extra_buttons.vue
+++ b/src/components/extra_buttons/extra_buttons.vue
@@ -165,16 +165,18 @@
           />
         </FALayers>
       </span>
-      <ConfirmModal
-        :showing="showingDeleteDialog"
-        :title="$t('status.delete_confirm_title')"
-        :cancel-text="$t('status.delete_confirm_cancel_button')"
-        :confirm-text="$t('status.delete_confirm_accept_button')"
-        @cancelled="hideDeleteStatusConfirmDialog"
-        @accepted="doDeleteStatus"
-      >
-        {{ $t('status.delete_confirm') }}
-      </ConfirmModal>
+      <portal to="modal">
+        <ConfirmModal
+          v-if="showingDeleteDialog"
+          :title="$t('status.delete_confirm_title')"
+          :cancel-text="$t('status.delete_confirm_cancel_button')"
+          :confirm-text="$t('status.delete_confirm_accept_button')"
+          @cancelled="hideDeleteStatusConfirmDialog"
+          @accepted="doDeleteStatus"
+        >
+          {{ $t('status.delete_confirm') }}
+        </ConfirmModal>
+      </portal>
     </template>
   </Popover>
 </template>
diff --git a/src/components/follow_button/follow_button.vue b/src/components/follow_button/follow_button.vue
index 4fc2233a..5c799406 100644
--- a/src/components/follow_button/follow_button.vue
+++ b/src/components/follow_button/follow_button.vue
@@ -1,33 +1,33 @@
 <template>
-  <div>
-    <button
-      class="btn button-default follow-button"
-      :class="{ toggled: isPressed }"
-      :disabled="disabled"
-      :title="title"
-      @click="onClick"
-    >
-      {{ label }}
-    </button>
-    <confirm-modal
-      :showing="showingConfirmUnfollow"
-      :title="$t('user_card.unfollow_confirm_title')"
-      :confirm-text="$t('user_card.unfollow_confirm_accept_button')"
-      :cancel-text="$t('user_card.unfollow_confirm_cancel_button')"
-      @accepted="doUnfollow"
-      @cancelled="hideConfirmUnfollow"
-    >
-      <i18n
-        path="user_card.unfollow_confirm"
-        tag="span"
+  <button
+    class="btn button-default follow-button"
+    :class="{ toggled: isPressed }"
+    :disabled="disabled"
+    :title="title"
+    @click="onClick"
+  >
+    {{ label }}
+    <portal to="modal">
+      <confirm-modal
+        v-if="showingConfirmUnfollow"
+        :title="$t('user_card.unfollow_confirm_title')"
+        :confirm-text="$t('user_card.unfollow_confirm_accept_button')"
+        :cancel-text="$t('user_card.unfollow_confirm_cancel_button')"
+        @accepted="doUnfollow"
+        @cancelled="hideConfirmUnfollow"
       >
-        <span
-          place="user"
-          v-text="user.screen_name_ui"
-        />
-      </i18n>
-    </confirm-modal>
-  </div>
+        <i18n
+          path="user_card.unfollow_confirm"
+          tag="span"
+        >
+          <span
+            place="user"
+            v-text="user.screen_name_ui"
+          />
+        </i18n>
+      </confirm-modal>
+    </portal>
+  </button>
 </template>
 
 <script src="./follow_button.js"></script>
diff --git a/src/components/mobile_nav/mobile_nav.vue b/src/components/mobile_nav/mobile_nav.vue
index 0f23b7ac..6b6b8f21 100644
--- a/src/components/mobile_nav/mobile_nav.vue
+++ b/src/components/mobile_nav/mobile_nav.vue
@@ -88,16 +88,18 @@
       ref="sideDrawer"
       :logout="logout"
     />
-    <confirm-modal
-      :showing="showingConfirmLogout"
-      :title="$t('login.logout_confirm_title')"
-      :confirm-text="$t('login.logout_confirm_accept_button')"
-      :cancel-text="$t('login.logout_confirm_cancel_button')"
-      @accepted="doLogout"
-      @cancelled="hideConfirmLogout"
-    >
-      {{ $t('login.logout_confirm') }}
-    </confirm-modal>
+    <portal to="modal">
+      <confirm-modal
+        v-if="showingConfirmLogout"
+        :title="$t('login.logout_confirm_title')"
+        :confirm-text="$t('login.logout_confirm_accept_button')"
+        :cancel-text="$t('login.logout_confirm_cancel_button')"
+        @accepted="doLogout"
+        @cancelled="hideConfirmLogout"
+      >
+        {{ $t('login.logout_confirm') }}
+      </confirm-modal>
+    </portal>
   </div>
 </template>
 
diff --git a/src/components/retweet_button/retweet_button.vue b/src/components/retweet_button/retweet_button.vue
index 38d4dc3f..9ed24bd5 100644
--- a/src/components/retweet_button/retweet_button.vue
+++ b/src/components/retweet_button/retweet_button.vue
@@ -59,16 +59,18 @@
     >
       {{ status.repeat_num }}
     </span>
-    <confirm-modal
-      :showing="showingConfirmDialog"
-      :title="$t('status.repeat_confirm_title')"
-      :confirm-text="$t('status.repeat_confirm_accept_button')"
-      :cancel-text="$t('status.repeat_confirm_cancel_button')"
-      @accepted="doRetweet"
-      @cancelled="hideConfirmDialog"
-    >
-      {{ $t('status.repeat_confirm') }}
-    </confirm-modal>
+    <portal to="modal">
+      <confirm-modal
+        v-if="showingConfirmDialog"
+        :title="$t('status.repeat_confirm_title')"
+        :confirm-text="$t('status.repeat_confirm_accept_button')"
+        :cancel-text="$t('status.repeat_confirm_cancel_button')"
+        @accepted="doRetweet"
+        @cancelled="hideConfirmDialog"
+      >
+        {{ $t('status.repeat_confirm') }}
+      </confirm-modal>
+    </portal>
   </div>
 </template>
 
diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue
index fac900a9..5a848ead 100644
--- a/src/components/user_card/user_card.vue
+++ b/src/components/user_card/user_card.vue
@@ -314,24 +314,26 @@
         :handle-links="true"
       />
     </div>
-    <confirm-modal
-      :showing="showingConfirmMute"
-      :title="$t('user_card.mute_confirm_title')"
-      :confirm-text="$t('user_card.mute_confirm_accept_button')"
-      :cancel-text="$t('user_card.mute_confirm_cancel_button')"
-      @accepted="doMuteUser"
-      @cancelled="hideConfirmMute"
-    >
-      <i18n
-        path="user_card.mute_confirm"
-        tag="span"
+    <portal to="modal">
+      <confirm-modal
+        v-if="showingConfirmMute"
+        :title="$t('user_card.mute_confirm_title')"
+        :confirm-text="$t('user_card.mute_confirm_accept_button')"
+        :cancel-text="$t('user_card.mute_confirm_cancel_button')"
+        @accepted="doMuteUser"
+        @cancelled="hideConfirmMute"
       >
-        <span
-          place="user"
-          v-text="user.screen_name_ui"
-        />
-      </i18n>
-    </confirm-modal>
+        <i18n
+          path="user_card.mute_confirm"
+          tag="span"
+        >
+          <span
+            place="user"
+            v-text="user.screen_name_ui"
+          />
+        </i18n>
+      </confirm-modal>
+    </portal>
   </div>
 </template>
 
-- 
cgit v1.2.3-70-g09d2


From dc04c8cbd48dd8dcfc6b1937663e57983d38562a Mon Sep 17 00:00:00 2001
From: Tusooa Zhu <tusooa@kazv.moe>
Date: Wed, 6 Apr 2022 14:54:58 -0400
Subject: Use vue3 teleport instead of portal

---
 src/components/account_actions/account_actions.vue | 4 ++--
 src/components/desktop_nav/desktop_nav.vue         | 4 ++--
 src/components/extra_buttons/extra_buttons.vue     | 4 ++--
 src/components/follow_button/follow_button.vue     | 4 ++--
 src/components/mobile_nav/mobile_nav.vue           | 4 ++--
 src/components/retweet_button/retweet_button.vue   | 4 ++--
 src/components/user_card/user_card.vue             | 4 ++--
 7 files changed, 14 insertions(+), 14 deletions(-)

(limited to 'src/components/desktop_nav/desktop_nav.vue')

diff --git a/src/components/account_actions/account_actions.vue b/src/components/account_actions/account_actions.vue
index 273aac69..fc303271 100644
--- a/src/components/account_actions/account_actions.vue
+++ b/src/components/account_actions/account_actions.vue
@@ -74,7 +74,7 @@
         </button>
       </template>
     </Popover>
-    <portal to="modal">
+    <teleport to="#modal">
       <confirm-modal
         v-if="showingConfirmBlock"
         :title="$t('user_card.block_confirm_title')"
@@ -93,7 +93,7 @@
           />
         </i18n>
       </confirm-modal>
-    </portal>
+    </teleport>
   </div>
 </template>
 
diff --git a/src/components/desktop_nav/desktop_nav.vue b/src/components/desktop_nav/desktop_nav.vue
index 18630385..92622cf9 100644
--- a/src/components/desktop_nav/desktop_nav.vue
+++ b/src/components/desktop_nav/desktop_nav.vue
@@ -76,7 +76,7 @@
         </button>
       </div>
     </div>
-    <portal to="modal">
+    <teleport to="#modal">
       <confirm-modal
         v-if="showingConfirmLogout"
         :title="$t('login.logout_confirm_title')"
@@ -87,7 +87,7 @@
       >
         {{ $t('login.logout_confirm') }}
       </confirm-modal>
-    </portal>
+    </teleport>
   </nav>
 </template>
 <script src="./desktop_nav.js"></script>
diff --git a/src/components/extra_buttons/extra_buttons.vue b/src/components/extra_buttons/extra_buttons.vue
index 4641947a..c1c15c0f 100644
--- a/src/components/extra_buttons/extra_buttons.vue
+++ b/src/components/extra_buttons/extra_buttons.vue
@@ -165,7 +165,7 @@
           />
         </FALayers>
       </span>
-      <portal to="modal">
+      <teleport to="#modal">
         <ConfirmModal
           v-if="showingDeleteDialog"
           :title="$t('status.delete_confirm_title')"
@@ -176,7 +176,7 @@
         >
           {{ $t('status.delete_confirm') }}
         </ConfirmModal>
-      </portal>
+      </teleport>
     </template>
   </Popover>
 </template>
diff --git a/src/components/follow_button/follow_button.vue b/src/components/follow_button/follow_button.vue
index 5c799406..b4567348 100644
--- a/src/components/follow_button/follow_button.vue
+++ b/src/components/follow_button/follow_button.vue
@@ -7,7 +7,7 @@
     @click="onClick"
   >
     {{ label }}
-    <portal to="modal">
+    <teleport to="#modal">
       <confirm-modal
         v-if="showingConfirmUnfollow"
         :title="$t('user_card.unfollow_confirm_title')"
@@ -26,7 +26,7 @@
           />
         </i18n>
       </confirm-modal>
-    </portal>
+    </teleport>
   </button>
 </template>
 
diff --git a/src/components/mobile_nav/mobile_nav.vue b/src/components/mobile_nav/mobile_nav.vue
index 6b6b8f21..6d826622 100644
--- a/src/components/mobile_nav/mobile_nav.vue
+++ b/src/components/mobile_nav/mobile_nav.vue
@@ -88,7 +88,7 @@
       ref="sideDrawer"
       :logout="logout"
     />
-    <portal to="modal">
+    <teleport to="#modal">
       <confirm-modal
         v-if="showingConfirmLogout"
         :title="$t('login.logout_confirm_title')"
@@ -99,7 +99,7 @@
       >
         {{ $t('login.logout_confirm') }}
       </confirm-modal>
-    </portal>
+    </teleport>
   </div>
 </template>
 
diff --git a/src/components/retweet_button/retweet_button.vue b/src/components/retweet_button/retweet_button.vue
index 9ed24bd5..134fcb36 100644
--- a/src/components/retweet_button/retweet_button.vue
+++ b/src/components/retweet_button/retweet_button.vue
@@ -59,7 +59,7 @@
     >
       {{ status.repeat_num }}
     </span>
-    <portal to="modal">
+    <teleport to="#modal">
       <confirm-modal
         v-if="showingConfirmDialog"
         :title="$t('status.repeat_confirm_title')"
@@ -70,7 +70,7 @@
       >
         {{ $t('status.repeat_confirm') }}
       </confirm-modal>
-    </portal>
+    </teleport>
   </div>
 </template>
 
diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue
index 5a848ead..856ed54b 100644
--- a/src/components/user_card/user_card.vue
+++ b/src/components/user_card/user_card.vue
@@ -314,7 +314,7 @@
         :handle-links="true"
       />
     </div>
-    <portal to="modal">
+    <teleport to="#modal">
       <confirm-modal
         v-if="showingConfirmMute"
         :title="$t('user_card.mute_confirm_title')"
@@ -333,7 +333,7 @@
           />
         </i18n>
       </confirm-modal>
-    </portal>
+    </teleport>
   </div>
 </template>
 
-- 
cgit v1.2.3-70-g09d2


From 524363267811ce34ab82786ccf392ceb2708ac16 Mon Sep 17 00:00:00 2001
From: tusooa <tusooa@kazv.moe>
Date: Sat, 21 Jan 2023 15:08:17 -0500
Subject: Label buttons in top bar

---
 src/components/desktop_nav/desktop_nav.vue | 7 ++++---
 src/components/search_bar/search_bar.vue   | 4 ++++
 src/i18n/en.json                           | 1 +
 3 files changed, 9 insertions(+), 3 deletions(-)

(limited to 'src/components/desktop_nav/desktop_nav.vue')

diff --git a/src/components/desktop_nav/desktop_nav.vue b/src/components/desktop_nav/desktop_nav.vue
index 07bf8005..e0ee39c3 100644
--- a/src/components/desktop_nav/desktop_nav.vue
+++ b/src/components/desktop_nav/desktop_nav.vue
@@ -20,6 +20,7 @@
         class="logo"
         :to="{ name: 'root' }"
         :style="logoBgStyle"
+        :title="sitename"
       >
         <div
           class="mask"
@@ -38,13 +39,13 @@
         />
         <button
           class="button-unstyled nav-icon"
+          :title="$t('nav.preferences')"
           @click.stop="openSettingsModal"
         >
           <FAIcon
             fixed-width
             class="fa-scale-110 fa-old-padding"
             icon="cog"
-            :title="$t('nav.preferences')"
           />
         </button>
         <a
@@ -52,26 +53,26 @@
           href="/pleroma/admin/#/login-pleroma"
           class="nav-icon"
           target="_blank"
+          :title="$t('nav.administration')"
           @click.stop
         >
           <FAIcon
             fixed-width
             class="fa-scale-110 fa-old-padding"
             icon="tachometer-alt"
-            :title="$t('nav.administration')"
           />
         </a>
         <span class="spacer" />
         <button
           v-if="currentUser"
           class="button-unstyled nav-icon"
+          :title="$t('login.logout')"
           @click.stop.prevent="logout"
         >
           <FAIcon
             fixed-width
             class="fa-scale-110 fa-old-padding"
             icon="sign-out-alt"
-            :title="$t('login.logout')"
           />
         </button>
       </div>
diff --git a/src/components/search_bar/search_bar.vue b/src/components/search_bar/search_bar.vue
index 3969d8de..9da2b272 100644
--- a/src/components/search_bar/search_bar.vue
+++ b/src/components/search_bar/search_bar.vue
@@ -8,6 +8,7 @@
       class="button-unstyled nav-icon"
       :title="$t('nav.search')"
       type="button"
+      :aria-expanded="!hidden"
       @click.prevent.stop="toggleHidden"
     >
       <FAIcon
@@ -29,6 +30,7 @@
       <button
         class="button-default search-button"
         type="submit"
+        :title="$t('nav.search')"
         @click="find(searchTerm)"
       >
         <FAIcon
@@ -39,6 +41,8 @@
       <button
         class="button-unstyled cancel-search"
         type="button"
+        :title="$t('nav.search_close')"
+        :aria-expanded="!hidden"
         @click.prevent.stop="toggleHidden"
       >
         <FAIcon
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 1ee1147a..5b97bdcd 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -172,6 +172,7 @@
     "bookmarks": "Bookmarks",
     "user_search": "User Search",
     "search": "Search",
+    "search_close": "Close search bar",
     "who_to_follow": "Who to follow",
     "preferences": "Preferences",
     "timelines": "Timelines",
-- 
cgit v1.2.3-70-g09d2


From 4d23d31fecf480abfccc4db3ac79c6640078dc3b Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 14 Mar 2023 21:50:43 +0200
Subject: initial admin settings prototype (WIP)

---
 src/components/admin_modal/admin_modal.js          |  68 ++++++++++++
 src/components/admin_modal/admin_modal.scss        |  80 ++++++++++++++
 src/components/admin_modal/admin_modal.vue         | 121 +++++++++++++++++++++
 src/components/admin_modal/admin_modal_content.js  |  88 +++++++++++++++
 .../admin_modal/admin_modal_content.scss           |  56 ++++++++++
 src/components/admin_modal/tabs/general_tab.js     |  33 ++++++
 src/components/desktop_nav/desktop_nav.js          |   5 +-
 src/components/desktop_nav/desktop_nav.vue         |   9 +-
 src/components/notification/notification.vue       |   2 +-
 .../settings_modal/admin_tabs/instance_tab.js      |  29 +++++
 .../settings_modal/admin_tabs/instance_tab.vue     |  35 ++++++
 src/components/settings_modal/helpers/setting.js   |  14 ++-
 .../settings_modal/helpers/string_setting.js       |   9 ++
 .../settings_modal/helpers/string_setting.vue      |  25 +++++
 src/components/settings_modal/settings_modal.js    |  23 +++-
 src/components/settings_modal/settings_modal.vue   |   3 +-
 .../settings_modal/settings_modal_admin_content.js |  76 +++++++++++++
 .../settings_modal_admin_content.scss              |  56 ++++++++++
 .../settings_modal_admin_content.vue               |  21 ++++
 .../settings_modal/settings_modal_content.js       |  88 ---------------
 .../settings_modal/settings_modal_content.scss     |  56 ----------
 .../settings_modal/settings_modal_content.vue      |  83 --------------
 .../settings_modal/settings_modal_user_content.js  |  88 +++++++++++++++
 .../settings_modal_user_content.scss               |  56 ++++++++++
 .../settings_modal/settings_modal_user_content.vue |  83 ++++++++++++++
 src/components/tab_switcher/tab_switcher.jsx       |   8 +-
 src/modules/adminSettings.js                       |   5 +-
 src/modules/interface.js                           |  21 +++-
 28 files changed, 985 insertions(+), 256 deletions(-)
 create mode 100644 src/components/admin_modal/admin_modal.js
 create mode 100644 src/components/admin_modal/admin_modal.scss
 create mode 100644 src/components/admin_modal/admin_modal.vue
 create mode 100644 src/components/admin_modal/admin_modal_content.js
 create mode 100644 src/components/admin_modal/admin_modal_content.scss
 create mode 100644 src/components/admin_modal/tabs/general_tab.js
 create mode 100644 src/components/settings_modal/admin_tabs/instance_tab.js
 create mode 100644 src/components/settings_modal/admin_tabs/instance_tab.vue
 create mode 100644 src/components/settings_modal/helpers/string_setting.js
 create mode 100644 src/components/settings_modal/helpers/string_setting.vue
 create mode 100644 src/components/settings_modal/settings_modal_admin_content.js
 create mode 100644 src/components/settings_modal/settings_modal_admin_content.scss
 create mode 100644 src/components/settings_modal/settings_modal_admin_content.vue
 delete mode 100644 src/components/settings_modal/settings_modal_content.js
 delete mode 100644 src/components/settings_modal/settings_modal_content.scss
 delete mode 100644 src/components/settings_modal/settings_modal_content.vue
 create mode 100644 src/components/settings_modal/settings_modal_user_content.js
 create mode 100644 src/components/settings_modal/settings_modal_user_content.scss
 create mode 100644 src/components/settings_modal/settings_modal_user_content.vue

(limited to 'src/components/desktop_nav/desktop_nav.vue')

diff --git a/src/components/admin_modal/admin_modal.js b/src/components/admin_modal/admin_modal.js
new file mode 100644
index 00000000..525f09aa
--- /dev/null
+++ b/src/components/admin_modal/admin_modal.js
@@ -0,0 +1,68 @@
+import Modal from 'src/components/modal/modal.vue'
+import PanelLoading from 'src/components/panel_loading/panel_loading.vue'
+import AsyncComponentError from 'src/components/async_component_error/async_component_error.vue'
+import getResettableAsyncComponent from 'src/services/resettable_async_component.js'
+import Popover from '../popover/popover.vue'
+import Checkbox from 'src/components/checkbox/checkbox.vue'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+  newImporter,
+  newExporter
+} from 'src/services/export_import/export_import.js'
+import {
+  faTimes,
+  faFileUpload,
+  faFileDownload,
+  faChevronDown
+} from '@fortawesome/free-solid-svg-icons'
+import {
+  faWindowMinimize
+} from '@fortawesome/free-regular-svg-icons'
+
+library.add(
+  faTimes,
+  faWindowMinimize,
+  faFileUpload,
+  faFileDownload,
+  faChevronDown
+)
+
+const AdminModal = {
+  data () {
+    return {}
+  },
+  components: {
+    Modal,
+    Popover,
+    Checkbox,
+    AdminModalContent: getResettableAsyncComponent(
+      () => import('./admin_modal_content.vue'),
+      {
+        loadingComponent: PanelLoading,
+        errorComponent: AsyncComponentError,
+        delay: 0
+      }
+    )
+  },
+  methods: {
+    closeModal () {
+      this.$store.dispatch('closeAdminModal')
+    },
+    peekModal () {
+      this.$store.dispatch('togglePeekAdminModal')
+    }
+  },
+  computed: {
+    modalActivated () {
+      return this.$store.state.interface.adminModalState !== 'hidden'
+    },
+    modalOpenedOnce () {
+      return this.$store.state.interface.adminModalLoaded
+    },
+    modalPeeked () {
+      return this.$store.state.interface.adminModalState === 'minimized'
+    }
+  }
+}
+
+export default AdminModal
diff --git a/src/components/admin_modal/admin_modal.scss b/src/components/admin_modal/admin_modal.scss
new file mode 100644
index 00000000..0d916f32
--- /dev/null
+++ b/src/components/admin_modal/admin_modal.scss
@@ -0,0 +1,80 @@
+@import "src/variables";
+
+.admin-modal {
+  overflow: hidden;
+
+  .setting-list,
+  .option-list {
+    list-style-type: none;
+    padding-left: 2em;
+
+    li {
+      margin-bottom: 0.5em;
+    }
+
+    .suboptions {
+      margin-top: 0.3em;
+    }
+  }
+
+  .admin-modal-panel {
+    overflow: hidden;
+    transition: transform;
+    transition-timing-function: ease-in-out;
+    transition-duration: 300ms;
+    width: 1000px;
+    max-width: 90vw;
+    height: 90vh;
+
+    @media all and (max-width: 800px) {
+      max-width: 100vw;
+      height: 100%;
+    }
+
+    >.panel-body {
+      height: 100%;
+      overflow-y: hidden;
+
+      .btn {
+        min-height: 2em;
+        min-width: 10em;
+        padding: 0 2em;
+      }
+    }
+  }
+
+  .admin-footer {
+    display: flex;
+
+    >* {
+      margin-right: 0.5em;
+    }
+
+    .extra-content {
+      display: flex;
+      flex-grow: 1;
+    }
+  }
+
+  &.peek {
+    .admin-modal-panel {
+      /* Explanation:
+       * Modal is positioned vertically centered.
+       * 100vh - 100% = Distance between modal's top+bottom boundaries and screen
+       * (100vh - 100%) / 2 = Distance between bottom (or top) boundary and screen
+       * + 100% - we move modal completely off-screen, it's top boundary touches
+       *   bottom of the screen
+       * - 50px - leaving tiny amount of space so that titlebar + tiny amount of modal is visible
+       */
+      transform: translateY(calc(((100vh - 100%) / 2 + 100%) - 50px));
+
+      @media all and (max-width: 800px) {
+        /* For mobile, the modal takes 100% of the available screen.
+           This ensures the minimized modal is always 50px above the browser bottom
+           bar regardless of whether or not it is visible.
+        */
+        transform: translateY(calc(100% - 50px));
+      }
+    }
+  }
+}
diff --git a/src/components/admin_modal/admin_modal.vue b/src/components/admin_modal/admin_modal.vue
new file mode 100644
index 00000000..d7e5a80f
--- /dev/null
+++ b/src/components/admin_modal/admin_modal.vue
@@ -0,0 +1,121 @@
+<template>
+  <Modal
+    :is-open="modalActivated"
+    class="admin-modal"
+    :class="{ peek: modalPeeked }"
+    :no-background="modalPeeked"
+  >
+    <div class="admin-modal-panel panel">
+      <div class="panel-heading">
+        <span class="title">
+          {{ $t('admin.settings') }}
+        </span>
+        <transition name="fade">
+          <div
+            v-if="currentSaveStateNotice"
+            class="alert"
+            :class="{ transparent: !currentSaveStateNotice.error, error: currentSaveStateNotice.error}"
+            @click.prevent
+          >
+            {{ currentSaveStateNotice.error ? $t('admin.saving_err') : $t('settings.saving_ok') }}
+          </div>
+        </transition>
+        <button
+          class="btn button-default"
+          :title="$t('general.peek')"
+          @click="peekModal"
+        >
+          <FAIcon
+            :icon="['far', 'window-minimize']"
+            fixed-width
+          />
+        </button>
+        <button
+          class="btn button-default"
+          :title="$t('general.close')"
+          @click="closeModal"
+        >
+          <FAIcon
+            icon="times"
+            fixed-width
+          />
+        </button>
+      </div>
+      <div class="panel-body">
+        <AdminModalContent v-if="modalOpenedOnce" />
+      </div>
+      <div class="panel-footer admin-footer">
+        <Popover
+          class="export"
+          trigger="click"
+          placement="top"
+          :offset="{ y: 5, x: 5 }"
+          :bound-to="{ x: 'container' }"
+          remove-padding
+        >
+          <template #trigger>
+            <button
+              class="btn button-default"
+              :title="$t('general.close')"
+            >
+              <span>{{ $t("admin.file_export_import.backup_restore") }}</span>
+              {{ ' ' }}
+              <FAIcon
+                icon="chevron-down"
+              />
+            </button>
+          </template>
+          <template #content="{close}">
+            <div class="dropdown-menu">
+              <button
+                class="button-default dropdown-item dropdown-item-icon"
+                @click.prevent="backup"
+                @click="close"
+              >
+                <FAIcon
+                  icon="file-download"
+                  fixed-width
+                /><span>{{ $t("admin.file_export_import.backup_settings") }}</span>
+              </button>
+              <button
+                class="button-default dropdown-item dropdown-item-icon"
+                @click.prevent="backupWithTheme"
+                @click="close"
+              >
+                <FAIcon
+                  icon="file-download"
+                  fixed-width
+                /><span>{{ $t("admin.file_export_import.backup_settings_theme") }}</span>
+              </button>
+              <button
+                class="button-default dropdown-item dropdown-item-icon"
+                @click.prevent="restore"
+                @click="close"
+              >
+                <FAIcon
+                  icon="file-upload"
+                  fixed-width
+                /><span>{{ $t("admin.file_export_import.restore_settings") }}</span>
+              </button>
+            </div>
+          </template>
+        </Popover>
+
+        <Checkbox
+          :model-value="!!expertLevel"
+          @update:modelValue="expertLevel = Number($event)"
+        >
+          {{ $t("admin.expert_mode") }}
+        </Checkbox>
+        <span
+          id="unscrolled-content"
+          class="extra-content"
+        />
+      </div>
+    </div>
+  </Modal>
+</template>
+
+<script src="./admin_modal.js"></script>
+
+<style src="./admin_modal.scss" lang="scss"></style>
diff --git a/src/components/admin_modal/admin_modal_content.js b/src/components/admin_modal/admin_modal_content.js
new file mode 100644
index 00000000..897cc163
--- /dev/null
+++ b/src/components/admin_modal/admin_modal_content.js
@@ -0,0 +1,88 @@
+import TabSwitcher from 'src/components/tab_switcher/tab_switcher.jsx'
+
+import DataImportExportTab from './tabs/data_import_export_tab.vue'
+import MutesAndBlocksTab from './tabs/mutes_and_blocks_tab.vue'
+import NotificationsTab from './tabs/notifications_tab.vue'
+import FilteringTab from './tabs/filtering_tab.vue'
+import SecurityTab from './tabs/security_tab/security_tab.vue'
+import ProfileTab from './tabs/profile_tab.vue'
+import GeneralTab from './tabs/general_tab.vue'
+import VersionTab from './tabs/version_tab.vue'
+import ThemeTab from './tabs/theme_tab/theme_tab.vue'
+
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+  faWrench,
+  faUser,
+  faFilter,
+  faPaintBrush,
+  faBell,
+  faDownload,
+  faEyeSlash,
+  faInfo
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faWrench,
+  faUser,
+  faFilter,
+  faPaintBrush,
+  faBell,
+  faDownload,
+  faEyeSlash,
+  faInfo
+)
+
+const AdminModalContent = {
+  components: {
+    TabSwitcher,
+
+    DataImportExportTab,
+    MutesAndBlocksTab,
+    NotificationsTab,
+    FilteringTab,
+    SecurityTab,
+    ProfileTab,
+    GeneralTab,
+    VersionTab,
+    ThemeTab
+  },
+  computed: {
+    isLoggedIn () {
+      return !!this.$store.state.users.currentUser
+    },
+    open () {
+      return this.$store.state.interface.AdminModalState !== 'hidden'
+    },
+    bodyLock () {
+      return this.$store.state.interface.AdminModalState === 'visible'
+    }
+  },
+  methods: {
+    onOpen () {
+      const targetTab = this.$store.state.interface.AdminModalTargetTab
+      // We're being told to open in specific tab
+      if (targetTab) {
+        const tabIndex = this.$refs.tabSwitcher.$slots.default().findIndex(elm => {
+          return elm.props && elm.props['data-tab-name'] === targetTab
+        })
+        if (tabIndex >= 0) {
+          this.$refs.tabSwitcher.setTab(tabIndex)
+        }
+      }
+      // Clear the state of target tab, so that next time Admin is opened
+      // it doesn't force it.
+      this.$store.dispatch('clearAdminModalTargetTab')
+    }
+  },
+  mounted () {
+    this.onOpen()
+  },
+  watch: {
+    open: function (value) {
+      if (value) this.onOpen()
+    }
+  }
+}
+
+export default AdminModalContent
diff --git a/src/components/admin_modal/admin_modal_content.scss b/src/components/admin_modal/admin_modal_content.scss
new file mode 100644
index 00000000..2db7b2f8
--- /dev/null
+++ b/src/components/admin_modal/admin_modal_content.scss
@@ -0,0 +1,56 @@
+@import "src/variables";
+
+.admin_tab-switcher {
+  height: 100%;
+
+  .setting-item {
+    border-bottom: 2px solid var(--fg, $fallback--fg);
+    margin: 1em 1em 1.4em;
+    padding-bottom: 1.4em;
+
+    > div,
+    > label {
+      display: block;
+      margin-bottom: 0.5em;
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+
+    .select-multiple {
+      display: flex;
+
+      .option-list {
+        margin: 0;
+        padding-left: 0.5em;
+      }
+    }
+
+    &:last-child {
+      border-bottom: none;
+      padding-bottom: 0;
+      margin-bottom: 1em;
+    }
+
+    select {
+      min-width: 10em;
+    }
+
+    textarea {
+      width: 100%;
+      max-width: 100%;
+      height: 100px;
+    }
+
+    .unavailable,
+    .unavailable svg {
+      color: var(--cRed, $fallback--cRed);
+      color: $fallback--cRed;
+    }
+
+    .number-input {
+      max-width: 6em;
+    }
+  }
+}
diff --git a/src/components/admin_modal/tabs/general_tab.js b/src/components/admin_modal/tabs/general_tab.js
new file mode 100644
index 00000000..8c166f19
--- /dev/null
+++ b/src/components/admin_modal/tabs/general_tab.js
@@ -0,0 +1,33 @@
+import BooleanSetting from '../settings_modal/helpers/boolean_setting.vue'
+import ChoiceSetting from '../settings_modal/helpers/choice_setting.vue'
+import IntegerSetting from '../settings_modal/helpers/integer_setting.vue'
+
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+  faGlobe
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faGlobe
+)
+
+const GeneralTab = {
+  components: {
+    BooleanSetting,
+    ChoiceSetting,
+    IntegerSetting,
+  },
+  computed: {
+    mergedConfig () {
+      console.log(this.$store.state)
+      return this.$store.state
+    }
+  },
+  methods: {
+    changeDefaultScope (value) {
+      this.$store.dispatch('setProfileOption', { name: 'defaultScope', value })
+    }
+  }
+}
+
+export default GeneralTab
diff --git a/src/components/desktop_nav/desktop_nav.js b/src/components/desktop_nav/desktop_nav.js
index 745b1a81..f6a2e294 100644
--- a/src/components/desktop_nav/desktop_nav.js
+++ b/src/components/desktop_nav/desktop_nav.js
@@ -107,7 +107,10 @@ export default {
       this.searchBarHidden = hidden
     },
     openSettingsModal () {
-      this.$store.dispatch('openSettingsModal')
+      this.$store.dispatch('openSettingsModal', 'user')
+    },
+    openAdminModal () {
+      this.$store.dispatch('openSettingsModal', 'admin')
     }
   }
 }
diff --git a/src/components/desktop_nav/desktop_nav.vue b/src/components/desktop_nav/desktop_nav.vue
index dc8bbfd3..49382f8e 100644
--- a/src/components/desktop_nav/desktop_nav.vue
+++ b/src/components/desktop_nav/desktop_nav.vue
@@ -48,20 +48,19 @@
             icon="cog"
           />
         </button>
-        <a
+        <button
           v-if="currentUser && currentUser.role === 'admin'"
-          href="/pleroma/admin/#/login-pleroma"
-          class="nav-icon"
+          class="button-unstyled nav-icon"
           target="_blank"
           :title="$t('nav.administration')"
-          @click.stop
+          @click.stop="openAdminModal"
         >
           <FAIcon
             fixed-width
             class="fa-scale-110 fa-old-padding"
             icon="tachometer-alt"
           />
-        </a>
+        </button>
         <span class="spacer" />
         <button
           v-if="currentUser"
diff --git a/src/components/notification/notification.vue b/src/components/notification/notification.vue
index e1ea42ad..8d4cc2d1 100644
--- a/src/components/notification/notification.vue
+++ b/src/components/notification/notification.vue
@@ -153,9 +153,9 @@
             </router-link>
             <button
               class="button-unstyled expand-icon"
-              @click.prevent="toggleStatusExpanded"
               :title="$t('tool_tip.toggle_expand')"
               :aria-expanded="statusExpanded"
+              @click.prevent="toggleStatusExpanded"
             >
               <FAIcon
                 class="fa-scale-110"
diff --git a/src/components/settings_modal/admin_tabs/instance_tab.js b/src/components/settings_modal/admin_tabs/instance_tab.js
new file mode 100644
index 00000000..4a261659
--- /dev/null
+++ b/src/components/settings_modal/admin_tabs/instance_tab.js
@@ -0,0 +1,29 @@
+import BooleanSetting from '../helpers/boolean_setting.vue'
+import ChoiceSetting from '../helpers/choice_setting.vue'
+import IntegerSetting from '../helpers/integer_setting.vue'
+import StringSetting from '../helpers/string_setting.vue'
+
+import SharedComputedObject from '../helpers/shared_computed_object.js'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+  faGlobe
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faGlobe
+)
+
+const InstanceTab = {
+  data () {},
+  components: {
+    BooleanSetting,
+    ChoiceSetting,
+    IntegerSetting,
+    StringSetting
+  },
+  computed: {
+    ...SharedComputedObject()
+  }
+}
+
+export default InstanceTab
diff --git a/src/components/settings_modal/admin_tabs/instance_tab.vue b/src/components/settings_modal/admin_tabs/instance_tab.vue
new file mode 100644
index 00000000..65b3d12f
--- /dev/null
+++ b/src/components/settings_modal/admin_tabs/instance_tab.vue
@@ -0,0 +1,35 @@
+<template>
+  <div :label="$t('settings.general')">
+    <div class="setting-item">
+      <h2>{{ $t('admin_dash.instance') }}</h2>
+      <ul class="setting-list">
+        <li>
+          <StringSetting source="admin" path=":pleroma.:instance.:name">
+            NAME
+          </StringSetting>
+        </li>
+        <li>
+          <StringSetting source="admin" path=":pleroma.:instance.:description">
+            DESCRIPTION
+          </StringSetting>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script src="./instance_tab.js"></script>
+
+<style lang="scss">
+.column-settings {
+  display: flex;
+  justify-content: space-evenly;
+  flex-wrap: wrap;
+}
+
+.column-settings .size-label {
+  display: block;
+  margin-bottom: 0.5em;
+  margin-top: 0.5em;
+}
+</style>
diff --git a/src/components/settings_modal/helpers/setting.js b/src/components/settings_modal/helpers/setting.js
index a766e6dc..9195d3e9 100644
--- a/src/components/settings_modal/helpers/setting.js
+++ b/src/components/settings_modal/helpers/setting.js
@@ -42,6 +42,8 @@ export default {
       switch (this.source) {
         case 'profile':
           return this.$store.state.profileConfig
+        case 'admin':
+          return this.$store.state.adminSettings.config
         default:
           return this.$store.getters.mergedConfig
       }
@@ -50,6 +52,8 @@ export default {
       switch (this.source) {
         case 'profile':
           return (k, v) => this.$store.dispatch('setProfileOption', { name: k, value: v })
+        case 'admin':
+          return (k, v) => console.log(this.path, k, v)
         default:
           return (k, v) => this.$store.dispatch('setOption', { name: k, value: v })
       }
@@ -66,7 +70,15 @@ export default {
       return this.source === 'profile'
     },
     isChanged () {
-      return !this.source === 'default' && this.state !== this.defaultState
+      switch (this.source) {
+        case 'profile':
+          return false
+        case 'admin':
+          console.log(this.$store.state.adminSettings.modifiedPaths)
+          return this.$store.state.adminSettings.modifiedPaths.has(this.path)
+        default:
+          return this.state !== this.defaultState
+      }
     },
     matchesExpertLevel () {
       return (this.expert || 0) <= this.$store.state.config.expertLevel > 0
diff --git a/src/components/settings_modal/helpers/string_setting.js b/src/components/settings_modal/helpers/string_setting.js
new file mode 100644
index 00000000..64f8772d
--- /dev/null
+++ b/src/components/settings_modal/helpers/string_setting.js
@@ -0,0 +1,9 @@
+import ModifiedIndicator from './modified_indicator.vue'
+import Setting from './setting.js'
+
+export default {
+  components: {
+    ModifiedIndicator
+  },
+  ...Setting
+}
diff --git a/src/components/settings_modal/helpers/string_setting.vue b/src/components/settings_modal/helpers/string_setting.vue
new file mode 100644
index 00000000..e4bd2de9
--- /dev/null
+++ b/src/components/settings_modal/helpers/string_setting.vue
@@ -0,0 +1,25 @@
+<template>
+  <label
+    v-if="matchesExpertLevel"
+    class="StringSetting"
+  >
+    <label :for="path">
+      <slot />
+    </label>
+    <input
+      :id="path"
+      class="string-input"
+      step="1"
+      :disabled="disabled"
+      :value="state"
+      @change="update"
+    >
+    {{ ' ' }}
+    <ModifiedIndicator
+      :changed="isChanged"
+      :onclick="reset"
+    />
+  </label>
+</template>
+
+<script src="./boolean_setting.js"></script>
diff --git a/src/components/settings_modal/settings_modal.js b/src/components/settings_modal/settings_modal.js
index 0a72dca1..e033d999 100644
--- a/src/components/settings_modal/settings_modal.js
+++ b/src/components/settings_modal/settings_modal.js
@@ -53,8 +53,16 @@ const SettingsModal = {
     Modal,
     Popover,
     Checkbox,
-    SettingsModalContent: getResettableAsyncComponent(
-      () => import('./settings_modal_content.vue'),
+    SettingsModalUserContent: getResettableAsyncComponent(
+      () => import('./settings_modal_user_content.vue'),
+      {
+        loadingComponent: PanelLoading,
+        errorComponent: AsyncComponentError,
+        delay: 0
+      }
+    ),
+    SettingsModalAdminContent: getResettableAsyncComponent(
+      () => import('./settings_modal_admin_content.vue'),
       {
         loadingComponent: PanelLoading,
         errorComponent: AsyncComponentError,
@@ -156,8 +164,14 @@ const SettingsModal = {
     modalActivated () {
       return this.$store.state.interface.settingsModalState !== 'hidden'
     },
-    modalOpenedOnce () {
-      return this.$store.state.interface.settingsModalLoaded
+    modalMode () {
+      return this.$store.state.interface.settingsModalMode
+    },
+    modalOpenedOnceUser () {
+      return this.$store.state.interface.settingsModalLoadedUser
+    },
+    modalOpenedOnceAdmin () {
+      return this.$store.state.interface.settingsModalLoadedAdmin
     },
     modalPeeked () {
       return this.$store.state.interface.settingsModalState === 'minimized'
@@ -167,7 +181,6 @@ const SettingsModal = {
         return this.$store.state.config.expertLevel > 0
       },
       set (value) {
-        console.log(value)
         this.$store.dispatch('setOption', { name: 'expertLevel', value: value ? 1 : 0 })
       }
     }
diff --git a/src/components/settings_modal/settings_modal.vue b/src/components/settings_modal/settings_modal.vue
index 7b457371..73e1524a 100644
--- a/src/components/settings_modal/settings_modal.vue
+++ b/src/components/settings_modal/settings_modal.vue
@@ -42,7 +42,8 @@
         </button>
       </div>
       <div class="panel-body">
-        <SettingsModalContent v-if="modalOpenedOnce" />
+        <SettingsModalUserContent v-if="modalMode === 'user' && modalOpenedOnceUser" />
+        <SettingsModalAdminContent v-if="modalMode === 'admin' && modalOpenedOnceAdmin" />
       </div>
       <div class="panel-footer settings-footer">
         <Popover
diff --git a/src/components/settings_modal/settings_modal_admin_content.js b/src/components/settings_modal/settings_modal_admin_content.js
new file mode 100644
index 00000000..88ba1755
--- /dev/null
+++ b/src/components/settings_modal/settings_modal_admin_content.js
@@ -0,0 +1,76 @@
+import TabSwitcher from 'src/components/tab_switcher/tab_switcher.jsx'
+
+import DataImportExportTab from './tabs/data_import_export_tab.vue'
+import MutesAndBlocksTab from './tabs/mutes_and_blocks_tab.vue'
+import InstanceTab from './admin_tabs/instance_tab.vue'
+
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+  faWrench,
+  faUser,
+  faFilter,
+  faPaintBrush,
+  faBell,
+  faDownload,
+  faEyeSlash,
+  faInfo
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faWrench,
+  faUser,
+  faFilter,
+  faPaintBrush,
+  faBell,
+  faDownload,
+  faEyeSlash,
+  faInfo
+)
+
+const SettingsModalAdminContent = {
+  components: {
+    TabSwitcher,
+
+    DataImportExportTab,
+    MutesAndBlocksTab,
+    InstanceTab
+  },
+  computed: {
+    isLoggedIn () {
+      return !!this.$store.state.users.currentUser
+    },
+    open () {
+      return this.$store.state.interface.settingsModalState !== 'hidden'
+    },
+    bodyLock () {
+      return this.$store.state.interface.settingsModalState === 'visible'
+    }
+  },
+  methods: {
+    onOpen () {
+      const targetTab = this.$store.state.interface.settingsModalTargetTab
+      // We're being told to open in specific tab
+      if (targetTab) {
+        const tabIndex = this.$refs.tabSwitcher.$slots.default().findIndex(elm => {
+          return elm.props && elm.props['data-tab-name'] === targetTab
+        })
+        if (tabIndex >= 0) {
+          this.$refs.tabSwitcher.setTab(tabIndex)
+        }
+      }
+      // Clear the state of target tab, so that next time settings is opened
+      // it doesn't force it.
+      this.$store.dispatch('clearSettingsModalTargetTab')
+    }
+  },
+  mounted () {
+    this.onOpen()
+  },
+  watch: {
+    open: function (value) {
+      if (value) this.onOpen()
+    }
+  }
+}
+
+export default SettingsModalAdminContent
diff --git a/src/components/settings_modal/settings_modal_admin_content.scss b/src/components/settings_modal/settings_modal_admin_content.scss
new file mode 100644
index 00000000..87df7982
--- /dev/null
+++ b/src/components/settings_modal/settings_modal_admin_content.scss
@@ -0,0 +1,56 @@
+@import "src/variables";
+
+.settings_tab-switcher {
+  height: 100%;
+
+  .setting-item {
+    border-bottom: 2px solid var(--fg, $fallback--fg);
+    margin: 1em 1em 1.4em;
+    padding-bottom: 1.4em;
+
+    > div,
+    > label {
+      display: block;
+      margin-bottom: 0.5em;
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+
+    .select-multiple {
+      display: flex;
+
+      .option-list {
+        margin: 0;
+        padding-left: 0.5em;
+      }
+    }
+
+    &:last-child {
+      border-bottom: none;
+      padding-bottom: 0;
+      margin-bottom: 1em;
+    }
+
+    select {
+      min-width: 10em;
+    }
+
+    textarea {
+      width: 100%;
+      max-width: 100%;
+      height: 100px;
+    }
+
+    .unavailable,
+    .unavailable svg {
+      color: var(--cRed, $fallback--cRed);
+      color: $fallback--cRed;
+    }
+
+    .number-input {
+      max-width: 6em;
+    }
+  }
+}
diff --git a/src/components/settings_modal/settings_modal_admin_content.vue b/src/components/settings_modal/settings_modal_admin_content.vue
new file mode 100644
index 00000000..9873b127
--- /dev/null
+++ b/src/components/settings_modal/settings_modal_admin_content.vue
@@ -0,0 +1,21 @@
+<template>
+  <tab-switcher
+    ref="tabSwitcher"
+    class="settings_tab-switcher"
+    :side-tab-bar="true"
+    :scrollable-tabs="true"
+    :body-scroll-lock="bodyLock"
+  >
+    <div
+      :label="$t('settings.general')"
+      icon="wrench"
+      data-tab-name="general"
+    >
+      <InstanceTab />
+    </div>
+  </tab-switcher>
+</template>
+
+<script src="./settings_modal_admin_content.js"></script>
+
+<style src="./settings_modal_admin_content.scss" lang="scss"></style>
diff --git a/src/components/settings_modal/settings_modal_content.js b/src/components/settings_modal/settings_modal_content.js
deleted file mode 100644
index 9ac0301f..00000000
--- a/src/components/settings_modal/settings_modal_content.js
+++ /dev/null
@@ -1,88 +0,0 @@
-import TabSwitcher from 'src/components/tab_switcher/tab_switcher.jsx'
-
-import DataImportExportTab from './tabs/data_import_export_tab.vue'
-import MutesAndBlocksTab from './tabs/mutes_and_blocks_tab.vue'
-import NotificationsTab from './tabs/notifications_tab.vue'
-import FilteringTab from './tabs/filtering_tab.vue'
-import SecurityTab from './tabs/security_tab/security_tab.vue'
-import ProfileTab from './tabs/profile_tab.vue'
-import GeneralTab from './tabs/general_tab.vue'
-import VersionTab from './tabs/version_tab.vue'
-import ThemeTab from './tabs/theme_tab/theme_tab.vue'
-
-import { library } from '@fortawesome/fontawesome-svg-core'
-import {
-  faWrench,
-  faUser,
-  faFilter,
-  faPaintBrush,
-  faBell,
-  faDownload,
-  faEyeSlash,
-  faInfo
-} from '@fortawesome/free-solid-svg-icons'
-
-library.add(
-  faWrench,
-  faUser,
-  faFilter,
-  faPaintBrush,
-  faBell,
-  faDownload,
-  faEyeSlash,
-  faInfo
-)
-
-const SettingsModalContent = {
-  components: {
-    TabSwitcher,
-
-    DataImportExportTab,
-    MutesAndBlocksTab,
-    NotificationsTab,
-    FilteringTab,
-    SecurityTab,
-    ProfileTab,
-    GeneralTab,
-    VersionTab,
-    ThemeTab
-  },
-  computed: {
-    isLoggedIn () {
-      return !!this.$store.state.users.currentUser
-    },
-    open () {
-      return this.$store.state.interface.settingsModalState !== 'hidden'
-    },
-    bodyLock () {
-      return this.$store.state.interface.settingsModalState === 'visible'
-    }
-  },
-  methods: {
-    onOpen () {
-      const targetTab = this.$store.state.interface.settingsModalTargetTab
-      // We're being told to open in specific tab
-      if (targetTab) {
-        const tabIndex = this.$refs.tabSwitcher.$slots.default().findIndex(elm => {
-          return elm.props && elm.props['data-tab-name'] === targetTab
-        })
-        if (tabIndex >= 0) {
-          this.$refs.tabSwitcher.setTab(tabIndex)
-        }
-      }
-      // Clear the state of target tab, so that next time settings is opened
-      // it doesn't force it.
-      this.$store.dispatch('clearSettingsModalTargetTab')
-    }
-  },
-  mounted () {
-    this.onOpen()
-  },
-  watch: {
-    open: function (value) {
-      if (value) this.onOpen()
-    }
-  }
-}
-
-export default SettingsModalContent
diff --git a/src/components/settings_modal/settings_modal_content.scss b/src/components/settings_modal/settings_modal_content.scss
deleted file mode 100644
index 87df7982..00000000
--- a/src/components/settings_modal/settings_modal_content.scss
+++ /dev/null
@@ -1,56 +0,0 @@
-@import "src/variables";
-
-.settings_tab-switcher {
-  height: 100%;
-
-  .setting-item {
-    border-bottom: 2px solid var(--fg, $fallback--fg);
-    margin: 1em 1em 1.4em;
-    padding-bottom: 1.4em;
-
-    > div,
-    > label {
-      display: block;
-      margin-bottom: 0.5em;
-
-      &:last-child {
-        margin-bottom: 0;
-      }
-    }
-
-    .select-multiple {
-      display: flex;
-
-      .option-list {
-        margin: 0;
-        padding-left: 0.5em;
-      }
-    }
-
-    &:last-child {
-      border-bottom: none;
-      padding-bottom: 0;
-      margin-bottom: 1em;
-    }
-
-    select {
-      min-width: 10em;
-    }
-
-    textarea {
-      width: 100%;
-      max-width: 100%;
-      height: 100px;
-    }
-
-    .unavailable,
-    .unavailable svg {
-      color: var(--cRed, $fallback--cRed);
-      color: $fallback--cRed;
-    }
-
-    .number-input {
-      max-width: 6em;
-    }
-  }
-}
diff --git a/src/components/settings_modal/settings_modal_content.vue b/src/components/settings_modal/settings_modal_content.vue
deleted file mode 100644
index 0be76d22..00000000
--- a/src/components/settings_modal/settings_modal_content.vue
+++ /dev/null
@@ -1,83 +0,0 @@
-<template>
-  <tab-switcher
-    ref="tabSwitcher"
-    class="settings_tab-switcher"
-    :side-tab-bar="true"
-    :scrollable-tabs="true"
-    :body-scroll-lock="bodyLock"
-  >
-    <div
-      :label="$t('settings.general')"
-      icon="wrench"
-      data-tab-name="general"
-    >
-      <GeneralTab />
-    </div>
-    <div
-      v-if="isLoggedIn"
-      :label="$t('settings.profile_tab')"
-      icon="user"
-      data-tab-name="profile"
-    >
-      <ProfileTab />
-    </div>
-    <div
-      v-if="isLoggedIn"
-      :label="$t('settings.security_tab')"
-      icon="lock"
-      data-tab-name="security"
-    >
-      <SecurityTab />
-    </div>
-    <div
-      :label="$t('settings.filtering')"
-      icon="filter"
-      data-tab-name="filtering"
-    >
-      <FilteringTab />
-    </div>
-    <div
-      :label="$t('settings.theme')"
-      icon="paint-brush"
-      data-tab-name="theme"
-    >
-      <ThemeTab />
-    </div>
-    <div
-      v-if="isLoggedIn"
-      :label="$t('settings.notifications')"
-      icon="bell"
-      data-tab-name="notifications"
-    >
-      <NotificationsTab />
-    </div>
-    <div
-      v-if="isLoggedIn"
-      :label="$t('settings.data_import_export_tab')"
-      icon="download"
-      data-tab-name="dataImportExport"
-    >
-      <DataImportExportTab />
-    </div>
-    <div
-      v-if="isLoggedIn"
-      :label="$t('settings.mutes_and_blocks')"
-      :fullHeight="true"
-      icon="eye-slash"
-      data-tab-name="mutesAndBlocks"
-    >
-      <MutesAndBlocksTab />
-    </div>
-    <div
-      :label="$t('settings.version.title')"
-      icon="info"
-      data-tab-name="version"
-    >
-      <VersionTab />
-    </div>
-  </tab-switcher>
-</template>
-
-<script src="./settings_modal_content.js"></script>
-
-<style src="./settings_modal_content.scss" lang="scss"></style>
diff --git a/src/components/settings_modal/settings_modal_user_content.js b/src/components/settings_modal/settings_modal_user_content.js
new file mode 100644
index 00000000..9ac0301f
--- /dev/null
+++ b/src/components/settings_modal/settings_modal_user_content.js
@@ -0,0 +1,88 @@
+import TabSwitcher from 'src/components/tab_switcher/tab_switcher.jsx'
+
+import DataImportExportTab from './tabs/data_import_export_tab.vue'
+import MutesAndBlocksTab from './tabs/mutes_and_blocks_tab.vue'
+import NotificationsTab from './tabs/notifications_tab.vue'
+import FilteringTab from './tabs/filtering_tab.vue'
+import SecurityTab from './tabs/security_tab/security_tab.vue'
+import ProfileTab from './tabs/profile_tab.vue'
+import GeneralTab from './tabs/general_tab.vue'
+import VersionTab from './tabs/version_tab.vue'
+import ThemeTab from './tabs/theme_tab/theme_tab.vue'
+
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+  faWrench,
+  faUser,
+  faFilter,
+  faPaintBrush,
+  faBell,
+  faDownload,
+  faEyeSlash,
+  faInfo
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faWrench,
+  faUser,
+  faFilter,
+  faPaintBrush,
+  faBell,
+  faDownload,
+  faEyeSlash,
+  faInfo
+)
+
+const SettingsModalContent = {
+  components: {
+    TabSwitcher,
+
+    DataImportExportTab,
+    MutesAndBlocksTab,
+    NotificationsTab,
+    FilteringTab,
+    SecurityTab,
+    ProfileTab,
+    GeneralTab,
+    VersionTab,
+    ThemeTab
+  },
+  computed: {
+    isLoggedIn () {
+      return !!this.$store.state.users.currentUser
+    },
+    open () {
+      return this.$store.state.interface.settingsModalState !== 'hidden'
+    },
+    bodyLock () {
+      return this.$store.state.interface.settingsModalState === 'visible'
+    }
+  },
+  methods: {
+    onOpen () {
+      const targetTab = this.$store.state.interface.settingsModalTargetTab
+      // We're being told to open in specific tab
+      if (targetTab) {
+        const tabIndex = this.$refs.tabSwitcher.$slots.default().findIndex(elm => {
+          return elm.props && elm.props['data-tab-name'] === targetTab
+        })
+        if (tabIndex >= 0) {
+          this.$refs.tabSwitcher.setTab(tabIndex)
+        }
+      }
+      // Clear the state of target tab, so that next time settings is opened
+      // it doesn't force it.
+      this.$store.dispatch('clearSettingsModalTargetTab')
+    }
+  },
+  mounted () {
+    this.onOpen()
+  },
+  watch: {
+    open: function (value) {
+      if (value) this.onOpen()
+    }
+  }
+}
+
+export default SettingsModalContent
diff --git a/src/components/settings_modal/settings_modal_user_content.scss b/src/components/settings_modal/settings_modal_user_content.scss
new file mode 100644
index 00000000..87df7982
--- /dev/null
+++ b/src/components/settings_modal/settings_modal_user_content.scss
@@ -0,0 +1,56 @@
+@import "src/variables";
+
+.settings_tab-switcher {
+  height: 100%;
+
+  .setting-item {
+    border-bottom: 2px solid var(--fg, $fallback--fg);
+    margin: 1em 1em 1.4em;
+    padding-bottom: 1.4em;
+
+    > div,
+    > label {
+      display: block;
+      margin-bottom: 0.5em;
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+
+    .select-multiple {
+      display: flex;
+
+      .option-list {
+        margin: 0;
+        padding-left: 0.5em;
+      }
+    }
+
+    &:last-child {
+      border-bottom: none;
+      padding-bottom: 0;
+      margin-bottom: 1em;
+    }
+
+    select {
+      min-width: 10em;
+    }
+
+    textarea {
+      width: 100%;
+      max-width: 100%;
+      height: 100px;
+    }
+
+    .unavailable,
+    .unavailable svg {
+      color: var(--cRed, $fallback--cRed);
+      color: $fallback--cRed;
+    }
+
+    .number-input {
+      max-width: 6em;
+    }
+  }
+}
diff --git a/src/components/settings_modal/settings_modal_user_content.vue b/src/components/settings_modal/settings_modal_user_content.vue
new file mode 100644
index 00000000..0221cccb
--- /dev/null
+++ b/src/components/settings_modal/settings_modal_user_content.vue
@@ -0,0 +1,83 @@
+<template>
+  <tab-switcher
+    ref="tabSwitcher"
+    class="settings_tab-switcher"
+    :side-tab-bar="true"
+    :scrollable-tabs="true"
+    :body-scroll-lock="bodyLock"
+  >
+    <div
+      :label="$t('settings.general')"
+      icon="wrench"
+      data-tab-name="general"
+    >
+      <GeneralTab />
+    </div>
+    <div
+      v-if="isLoggedIn"
+      :label="$t('settings.profile_tab')"
+      icon="user"
+      data-tab-name="profile"
+    >
+      <ProfileTab />
+    </div>
+    <div
+      v-if="isLoggedIn"
+      :label="$t('settings.security_tab')"
+      icon="lock"
+      data-tab-name="security"
+    >
+      <SecurityTab />
+    </div>
+    <div
+      :label="$t('settings.filtering')"
+      icon="filter"
+      data-tab-name="filtering"
+    >
+      <FilteringTab />
+    </div>
+    <div
+      :label="$t('settings.theme')"
+      icon="paint-brush"
+      data-tab-name="theme"
+    >
+      <ThemeTab />
+    </div>
+    <div
+      v-if="isLoggedIn"
+      :label="$t('settings.notifications')"
+      icon="bell"
+      data-tab-name="notifications"
+    >
+      <NotificationsTab />
+    </div>
+    <div
+      v-if="isLoggedIn"
+      :label="$t('settings.data_import_export_tab')"
+      icon="download"
+      data-tab-name="dataImportExport"
+    >
+      <DataImportExportTab />
+    </div>
+    <div
+      v-if="isLoggedIn"
+      :label="$t('settings.mutes_and_blocks')"
+      :fullHeight="true"
+      icon="eye-slash"
+      data-tab-name="mutesAndBlocks"
+    >
+      <MutesAndBlocksTab />
+    </div>
+    <div
+      :label="$t('settings.version.title')"
+      icon="info"
+      data-tab-name="version"
+    >
+      <VersionTab />
+    </div>
+  </tab-switcher>
+</template>
+
+<script src="./settings_modal_user_content.js"></script>
+
+<style src="./settings_modal_user_content.scss" lang="scss"></style>
diff --git a/src/components/tab_switcher/tab_switcher.jsx b/src/components/tab_switcher/tab_switcher.jsx
index a7ef8560..b444da43 100644
--- a/src/components/tab_switcher/tab_switcher.jsx
+++ b/src/components/tab_switcher/tab_switcher.jsx
@@ -60,13 +60,7 @@ export default {
         const isWanted = slot => slot.props && slot.props['data-tab-name'] === tabName
         return this.$slots.default().findIndex(isWanted) === this.activeIndex
       }
-    },
-    settingsModalVisible () {
-      return this.settingsModalState === 'visible'
-    },
-    ...mapState({
-      settingsModalState: state => state.interface.settingsModalState
-    })
+    }
   },
   beforeUpdate () {
     const currentSlot = this.slots()[this.active]
diff --git a/src/modules/adminSettings.js b/src/modules/adminSettings.js
index 01e9a49e..8006717d 100644
--- a/src/modules/adminSettings.js
+++ b/src/modules/adminSettings.js
@@ -10,7 +10,7 @@ export const newUserFlags = {
   ...defaultState.flagStorage
 }
 
-const serverSideStorage = {
+const adminSettingsStorage = {
   state: {
     ...cloneDeep(defaultState)
   },
@@ -40,9 +40,10 @@ const serverSideStorage = {
         }
         set(config, path, convert(c.value))
       })
+      console.log(config)
       commit('updateAdminSettings', { config, modifiedPaths })
     }
   }
 }
 
-export default serverSideStorage
+export default adminSettingsStorage
diff --git a/src/modules/interface.js b/src/modules/interface.js
index a86193ea..2d012f1b 100644
--- a/src/modules/interface.js
+++ b/src/modules/interface.js
@@ -1,7 +1,9 @@
 const defaultState = {
   settingsModalState: 'hidden',
-  settingsModalLoaded: false,
+  settingsModalLoadedUser: false,
+  settingsModalLoadedAdmin: false,
   settingsModalTargetTab: null,
+  settingsModalMode: 'user',
   settings: {
     currentSaveStateNotice: null,
     noticeClearTimeout: null,
@@ -54,10 +56,17 @@ const interfaceMod = {
           throw new Error('Illegal minimization state of settings modal')
       }
     },
-    openSettingsModal (state) {
+    openSettingsModal (state, value) {
+      state.settingsModalMode = value
       state.settingsModalState = 'visible'
-      if (!state.settingsModalLoaded) {
-        state.settingsModalLoaded = true
+      if (value === 'user') {
+        if (!state.settingsModalLoadedUser) {
+          state.settingsModalLoadedUser = true
+        }
+      } else if (value === 'admin') {
+        if (!state.settingsModalLoadedAdmin) {
+          state.settingsModalLoadedAdmin = true
+        }
       }
     },
     setSettingsModalTargetTab (state, value) {
@@ -92,8 +101,8 @@ const interfaceMod = {
     closeSettingsModal ({ commit }) {
       commit('closeSettingsModal')
     },
-    openSettingsModal ({ commit }) {
-      commit('openSettingsModal')
+    openSettingsModal ({ commit }, value = 'user') {
+      commit('openSettingsModal', value)
     },
     togglePeekSettingsModal ({ commit }) {
       commit('togglePeekSettingsModal')
-- 
cgit v1.2.3-70-g09d2