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

2024-10-05 18:53:54 +03:00 · 2024-10-05 18:53:54 +03:00 · 16610c8a12
commit 16610c8a12
parent 8163366402 bb0a7a81c5
67 changed files with 2101 additions and 476 deletions
--- a/changelog.d/better-shadow-control.fix
+++ b/changelog.d/better-shadow-control.fix
@ -0,0 +1 @@
+Updated shadow editor, hopefully fixed long-standing bugs, added ability to specify shadow's name.
--- a/changelog.d/bookmark-folders.add
+++ b/changelog.d/bookmark-folders.add
@ -0,0 +1 @@
+Support bookmark folders
--- a/changelog.d/splashscreen.add
+++ b/changelog.d/splashscreen.add
@ -0,0 +1 @@
+Splash screen + loading indicator to make process of identifying initialization issues and load performance
--- a/index.html
+++ b/index.html
@ -4,13 +4,138 @@
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no">
    <link rel="icon" type="image/png" href="/favicon.png">
+    <!-- putting styles here to avoid having to wait for styles to load up -->
+    <style id="splashscreen">
+     #splash {
+       --scale: 1;
+       width: 100vw;
+       height: 100vh;
+       display: grid;
+       grid-template-rows: auto;
+       grid-template-columns: auto;
+       align-content: center;
+       align-items: center;
+       justify-content: center;
+       justify-items: center;
+       flex-direction: column;
+       background: #0f161e;
+       font-family: sans-serif;
+       color: #b9b9ba;
+       position: absolute;
+       z-index: 9999;
+       font-size: calc(1vw + 1vh + 1vmin);
+     }
+
+     #splash-credit {
+       position: absolute;
+       font-size: 14px;
+       bottom: 16px;
+       right: 16px;
+     }
+
+     #splash-container {
+       align-items: center;
+     }
+
+     #mascot-container {
+       display: flex;
+       align-items: flex-end;
+       justify-content: center;
+       perspective: 60em;
+       perspective-origin: 0 -15em;
+       transform-style: preserve-3d;
+     }
+
+     #mascot {
+       width: calc(10em * var(--scale));
+       height: calc(10em * var(--scale));
+       object-fit: contain;
+       object-position: bottom;
+       transform: translateZ(-2em);
+     }
+
+     #throbber {
+       display: grid;
+       width: calc(5em * 0.5 * var(--scale));
+       height: calc(8em * 0.5 * var(--scale));
+       margin-left: 4.1em;
+       z-index: 2;
+       grid-template-rows: repeat(8, 1fr);
+       grid-template-columns: repeat(5, 1fr);
+       grid-template-areas: "P P . L L"
+                            "P P . L L"
+                            "P P . L L"
+                            "P P . L L"
+                            "P P . . ."
+                            "P P . . ."
+                            "P P . E E"
+                            "P P . E E";
+     }
+
+     .chunk {
+       background-color: #e2b188;
+       box-shadow: 0.01em 0.01em 0.1em 0 #e2b188;
+     }
+
+     #chunk-P {
+       grid-area: P;
+       border-top-left-radius:  calc(var(--logoChunkSize) / 2);
+     }
+
+     #chunk-L {
+       grid-area: L;
+       border-bottom-right-radius: calc(var(--logoChunkSize) / 2);
+     }
+
+     #chunk-E {
+       grid-area: E;
+       border-bottom-right-radius: calc(var(--logoChunkSize) / 2);
+     }
+
+     #status {
+       margin-top: 1em;
+       line-height: 2;
+       width: 100%;
+       text-align: center;
+     }
+
+     @media (prefers-reduced-motion) {
+       #throbber {
+         animation: none !important;
+       }
+     }
+    </style>
    <style id="pleroma-eager-styles" type="text/css"></style>
    <style id="pleroma-lazy-styles" type="text/css"></style>
    <!--server-generated-meta-->
  </head>
-  <body class="hidden">
+  <body style="margin: 0; padding: 0">
    <noscript>To use Pleroma, please enable JavaScript.</noscript>
-    <div id="app"></div>
+    <div id="splash">
+      <!-- we are hiding entire graphic so no point showing credit -->
+      <div aria-hidden="true" id="splash-credit">
+        Art by pipivovott
+      </div>
+      <div id="splash-container">
+        <div aria-hidden="true" id="mascot-container">
+          <div id="throbber">
+            <div class="chunk" id="chunk-P">
+            </div>
+            <div class="chunk" id="chunk-L">
+            </div>
+            <div class="chunk" id="chunk-E">
+            </div>
+          </div>
+          <img id="mascot" src="/static/pleromatan_apology.png">
+        </div>
+        <div id="status" class="css-ok">
+          <!-- (｡>﹏<) -->
+          <!-- it's a pseudographic, don't want screenreader read out nonsense -->
+          <span aria-hidden="true" class="initial-text">(｡&gt;﹏&lt;)</span>
+        </div>
+      </div>
+    </div>
+    <div id="app" class="hidden"></div>
    <div id="modal"></div>
    <!-- built files will be auto injected -->
    <div id="popovers" />
--- a/package.json
+++ b/package.json
@ -132,5 +132,6 @@
  "engines": {
    "node": ">= 16.0.0",
    "npm": ">= 3.0.0"
-  }
+  },
+  "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
 }
--- a/src/App.js
+++ b/src/App.js
@ -44,16 +44,29 @@ export default {
  data: () => ({
    mobileActivePanel: 'timeline'
  }),
+  watch: {
+    themeApplied (value) {
+      this.removeSplash()
+    }
+  },
  created () {
    // Load the locale from the storage
    const val = this.$store.getters.mergedConfig.interfaceLanguage
    this.$store.dispatch('setOption', { name: 'interfaceLanguage', value: val })
    window.addEventListener('resize', this.updateMobileState)
  },
+  mounted () {
+    if (this.$store.state.interface.themeApplied) {
+      this.removeSplash()
+    }
+  },
  unmounted () {
    window.removeEventListener('resize', this.updateMobileState)
  },
  computed: {
+    themeApplied () {
+      return this.$store.state.interface.themeApplied
+    },
    classes () {
      return [
        {
@ -130,6 +143,15 @@ export default {
    updateMobileState () {
      this.$store.dispatch('setLayoutWidth', windowWidth())
      this.$store.dispatch('setLayoutHeight', windowHeight())
+    },
+    removeSplash () {
+      document.querySelector('#status').textContent = this.$t('splash.fun_' + Math.ceil(Math.random() * 4))
+      const splashscreenRoot = document.querySelector('#splash')
+      splashscreenRoot.addEventListener('transitionend', () => {
+        splashscreenRoot.remove()
+      })
+      splashscreenRoot.classList.add('hidden')
+      document.querySelector('#app').classList.remove('hidden')
    }
  }
 }
--- a/src/App.scss
+++ b/src/App.scss
@ -914,3 +914,169 @@ option {
  color: var(--selectionText);
  background-color: var(--selectionBackground);
 }
+
+#splash {
+  pointer-events: none;
+  transition: opacity 2s;
+  opacity: 1;
+
+  &.hidden {
+    opacity: 0;
+  }
+
+  #status {
+    &.css-ok {
+      &::before {
+        display: inline-block;
+        content: "CSS OK";
+      }
+    }
+
+    .initial-text {
+      display: none;
+    }
+  }
+
+  #throbber {
+    animation-duration: 3s;
+    animation-name: bounce;
+    animation-iteration-count: infinite;
+    animation-direction: normal;
+    transform-origin: bottom center;
+
+    &.dead {
+      animation-name: dead;
+      animation-duration: 2s;
+      animation-iteration-count: 1;
+      transform: rotateX(90deg) rotateY(0) rotateZ(-45deg);
+    }
+
+    @keyframes dead {
+      0% {
+        transform: rotateX(0) rotateY(0) rotateZ(0);
+      }
+
+      5% {
+        transform: rotateX(0) rotateY(0) rotateZ(1deg);
+      }
+
+      10% {
+        transform: rotateX(0) rotateY(0) rotateZ(-2deg);
+      }
+
+      15% {
+        transform: rotateX(0) rotateY(0) rotateZ(3deg);
+      }
+
+      20% {
+        transform: rotateX(0) rotateY(0) rotateZ(0);
+      }
+
+      25% {
+        transform: rotateX(0) rotateY(0) rotateZ(0);
+      }
+
+      30% {
+        transform: rotateX(10deg) rotateY(0) rotateZ(0);
+      }
+
+      35% {
+        transform: rotateX(-10deg) rotateY(0) rotateZ(0);
+      }
+
+      40% {
+        transform: rotateX(10deg) rotateY(0) rotateZ(0);
+      }
+
+      45% {
+        transform: rotateX(-10deg) rotateY(0) rotateZ(0);
+      }
+
+      50% {
+        transform: rotateX(10deg) rotateY(0) rotateZ(0);
+      }
+
+      100% {
+        transform: rotateX(90deg) rotateY(0) rotateZ(-45deg);
+        transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); /* easeInQuint */
+      }
+    }
+
+    @keyframes bounce {
+      0% {
+        scale: 1 1;
+        translate: 0 0;
+        animation-timing-function: ease-out;
+      }
+
+      10% {
+        scale: 1.2 0.8;
+        translate: 0 0;
+        transform: rotateZ(var(--defaultZ));
+        animation-timing-function: ease-out;
+      }
+
+      30% {
+        scale: 0.9 1.1;
+        translate: 0 -40%;
+        transform: rotateZ(var(--defaultZ));
+        animation-timing-function: ease-in;
+      }
+
+      40% {
+        scale: 1.1 0.9;
+        translate: 0 -50%;
+        transform: rotateZ(var(--defaultZ));
+        animation-timing-function: ease-in;
+      }
+
+      45% {
+        scale: 0.9 1.1;
+        translate: 0 -45%;
+        transform: rotateZ(var(--defaultZ));
+        animation-timing-function: ease-in;
+      }
+
+      50% {
+        scale: 1.05 0.95;
+        translate: 0 -40%;
+        animation-timing-function: ease-in;
+      }
+
+      55% {
+        scale: 0.985 1.025;
+        translate: 0 -35%;
+        transform: rotateZ(var(--defaultZ));
+        animation-timing-function: ease-in;
+      }
+
+      60% {
+        scale: 1.0125 0.9985;
+        translate: 0 -30%;
+        transform: rotateZ(var(--defaultZ));
+        animation-timing-function: ease-in;
+      }
+
+      80% {
+        scale: 1.0063 0.9938;
+        translate: 0 -10%;
+        transform: rotateZ(var(--defaultZ));
+        animation-timing-function: ease-in-ou;
+      }
+
+      90% {
+        scale: 1.2 0.8;
+        translate: 0 0;
+        transform: rotateZ(var(--defaultZ));
+        animation-timing-function: ease-out;
+      }
+
+      100% {
+        scale: 1 1;
+        translate: 0 0;
+        transform: rotateZ(var(--defaultZ));
+        animation-timing-function: ease-out;
+      }
+    }
+  }
+}
--- a/src/assets/pleromatan_apology.png
+++ b/src/assets/pleromatan_apology.png
--- a/src/assets/pleromatan_apology.png
+++ b/src/assets/pleromatan_apology.png
@ -0,0 +1 @@
+../../static/pleromatan_apology.png
--- a/src/assets/pleromatan_apology_fox.png
+++ b/src/assets/pleromatan_apology_fox.png
--- a/src/assets/pleromatan_apology_fox.png
+++ b/src/assets/pleromatan_apology_fox.png
@ -0,0 +1 @@
+../../static/pleromatan_apology_fox.png
--- a/src/boot/after_store.js
+++ b/src/boot/after_store.js
@ -253,6 +253,7 @@ const getNodeInfo = async ({ store }) => {
      store.dispatch('setInstanceOption', { name: 'shoutAvailable', value: features.includes('chat') })
      store.dispatch('setInstanceOption', { name: 'pleromaChatMessagesAvailable', value: features.includes('pleroma_chat_messages') })
      store.dispatch('setInstanceOption', { name: 'pleromaCustomEmojiReactionsAvailable', value: features.includes('pleroma_custom_emoji_reactions') })
+      store.dispatch('setInstanceOption', { name: 'pleromaBookmarkFoldersAvailable', value: features.includes('pleroma:bookmark_folders') })
      store.dispatch('setInstanceOption', { name: 'gopherAvailable', value: features.includes('gopher') })
      store.dispatch('setInstanceOption', { name: 'pollsAvailable', value: features.includes('polls') })
      store.dispatch('setInstanceOption', { name: 'editingAvailable', value: features.includes('editing') })
@ -327,11 +328,7 @@ const setConfig = async ({ store }) => {

 const checkOAuthToken = async ({ store }) => {
  if (store.getters.getUserToken()) {
-    try {
-      await store.dispatch('loginUser', store.getters.getUserToken())
-    } catch (e) {
-      console.error(e)
-    }
+    return store.dispatch('loginUser', store.getters.getUserToken())
  }
  return Promise.resolve()
 }
@ -349,19 +346,26 @@ const afterStoreSetup = async ({ store, i18n }) => {
  const server = (typeof overrides.target !== 'undefined') ? overrides.target : window.location.origin
  store.dispatch('setInstanceOption', { name: 'server', value: server })

+  document.querySelector('#status').textContent = i18n.global.t('splash.settings')
  await setConfig({ store })
-  await store.dispatch('setTheme')
+  document.querySelector('#status').textContent = i18n.global.t('splash.theme')
+  try {
+    await store.dispatch('setTheme').catch((e) => { console.error('Error setting theme', e) })
+  } catch (e) {
+    return Promise.reject(e)
+  }

-  applyConfig(store.state.config)
+  applyConfig(store.state.config, i18n.global)

  // Now we can try getting the server settings and logging in
  // Most of these are preloaded into the index.html so blocking is minimized
+  document.querySelector('#status').textContent = i18n.global.t('splash.instance')
  await Promise.all([
    checkOAuthToken({ store }),
    getInstancePanel({ store }),
    getNodeInfo({ store }),
    getInstanceConfig({ store })
-  ])
+  ]).catch(e => Promise.reject(e))

  // Start fetching things that don't need to block the UI
  store.dispatch('fetchMutes')
@ -395,9 +399,9 @@ const afterStoreSetup = async ({ store, i18n }) => {

  // remove after vue 3.3
  app.config.unwrapInjectedRef = true
+  document.querySelector('#status').textContent = i18n.global.t('splash.almost')

  app.mount('#app')
-
  return app
 }

--- a/src/boot/routes.js
+++ b/src/boot/routes.js
@ -26,6 +26,8 @@ import ListsEdit from 'components/lists_edit/lists_edit.vue'
 import NavPanel from 'src/components/nav_panel/nav_panel.vue'
 import AnnouncementsPage from 'components/announcements_page/announcements_page.vue'
 import QuotesTimeline from '../components/quotes_timeline/quotes_timeline.vue'
+import BookmarkFolders from '../components/bookmark_folders/bookmark_folders.vue'
+import BookmarkFolderEdit from '../components/bookmark_folder_edit/bookmark_folder_edit.vue'

 export default (store) => {
  const validateAuthenticatedRoute = (to, from, next) => {
@ -86,7 +88,11 @@ export default (store) => {
    { name: 'lists-timeline', path: '/lists/:id', component: ListsTimeline },
    { name: 'lists-edit', path: '/lists/:id/edit', component: ListsEdit },
    { name: 'lists-new', path: '/lists/new', component: ListsEdit },
-    { name: 'edit-navigation', path: '/nav-edit', component: NavPanel, props: () => ({ forceExpand: true, forceEditMode: true }), beforeEnter: validateAuthenticatedRoute }
+    { name: 'edit-navigation', path: '/nav-edit', component: NavPanel, props: () => ({ forceExpand: true, forceEditMode: true }), beforeEnter: validateAuthenticatedRoute },
+    { name: 'bookmark-folders', path: '/bookmark_folders', component: BookmarkFolders },
+    { name: 'bookmark-folder-new', path: '/bookmarks/new-folder', component: BookmarkFolderEdit },
+    { name: 'bookmark-folder', path: '/bookmarks/:id', component: BookmarkTimeline },
+    { name: 'bookmark-folder-edit', path: '/bookmarks/:id/edit', component: BookmarkFolderEdit }
  ]

  if (store.state.instance.pleromaChatMessagesAvailable) {
--- a/src/components/bookmark_folder_card/bookmark_folder_card.js
+++ b/src/components/bookmark_folder_card/bookmark_folder_card.js
@ -0,0 +1,22 @@
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+  faEllipsisH
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faEllipsisH
+)
+
+const BookmarkFolderCard = {
+  props: [
+    'folder',
+    'allBookmarks'
+  ],
+  computed: {
+    firstLetter () {
+      return this.folder ? this.folder.name[0] : null
+    }
+  }
+}
+
+export default BookmarkFolderCard
--- a/src/components/bookmark_folder_card/bookmark_folder_card.vue
+++ b/src/components/bookmark_folder_card/bookmark_folder_card.vue
@ -0,0 +1,111 @@
+<template>
+  <div
+    v-if="allBookmarks"
+    class="bookmark-folder-card"
+  >
+    <router-link
+      :to="{ name: 'bookmarks' }"
+      class="bookmark-folder-name"
+    >
+      <span class="icon">
+        <FAIcon
+          fixed-width
+          class="fa-scale-110 menu-icon"
+          icon="bookmark"
+        />
+      </span>{{ $t('nav.all_bookmarks') }}
+    </router-link>
+  </div>
+  <div
+    v-else
+    class="bookmark-folder-card"
+  >
+    <router-link
+      :to="{ name: 'bookmark-folder', params: { id: folder.id } }"
+      class="bookmark-folder-name"
+    >
+      <img
+        v-if="folder.emoji_url"
+        class="iconEmoji iconEmoji-image"
+        :src="folder.emoji_url"
+        :alt="folder.emoji"
+        :title="folder.emoji"
+      >
+      <span
+        v-else-if="folder.emoji"
+        class="iconEmoji"
+      >
+        <span>
+          {{ folder.emoji }}
+        </span>
+      </span>
+      <span
+        v-else-if="firstLetter"
+        class="icon iconLetter fa-scale-110"
+      >{{ firstLetter }}</span>{{ folder.name }}
+    </router-link>
+    <router-link
+      :to="{ name: 'bookmark-folder-edit', params: { id: folder.id } }"
+      class="button-folder-edit"
+    >
+      <FAIcon
+        class="fa-scale-110 fa-old-padding"
+        icon="ellipsis-h"
+      />
+    </router-link>
+  </div>
+</template>
+
+<script src="./bookmark_folder_card.js"></script>
+
+<style lang="scss">
+.bookmark-folder-card {
+  display: flex;
+  align-items: center;
+}
+
+a.bookmark-folder-name {
+  display: flex;
+  align-items: center;
+  flex-grow: 1;
+
+  .icon,
+  .iconLetter,
+  .iconEmoji {
+    display: inline-block;
+    height: 2.5rem;
+    width: 2.5rem;
+    margin-right: 0.5rem;
+  }
+
+  .icon,
+  .iconLetter {
+    font-size: 1.5rem;
+    line-height: 2.5rem;
+    text-align: center;
+  }
+
+  .iconEmoji {
+    text-align: center;
+    object-fit: contain;
+    vertical-align: middle;
+
+    > span {
+      font-size: 1.5rem;
+      line-height: 2.5rem;
+    }
+  }
+
+  img.iconEmoji {
+    padding: 0.25em;
+    box-sizing: border-box;
+  }
+}
+
+.bookmark-folder-name,
+.button-folder-edit {
+  margin: 0;
+  padding: 1em;
+  color: var(--link);
+}
+</style>
--- a/src/components/bookmark_folder_edit/bookmark_folder_edit.js
+++ b/src/components/bookmark_folder_edit/bookmark_folder_edit.js
@ -0,0 +1,80 @@
+import EmojiPicker from '../emoji_picker/emoji_picker.vue'
+import apiService from '../../services/api/api.service'
+
+const BookmarkFolderEdit = {
+  data () {
+    return {
+      name: '',
+      nameDraft: '',
+      emoji: '',
+      emojiUrl: null,
+      emojiDraft: '',
+      emojiUrlDraft: null,
+      emojiPickerExpanded: false,
+      reallyDelete: false
+    }
+  },
+  components: {
+    EmojiPicker
+  },
+  created () {
+    if (!this.id) return
+    const credentials = this.$store.state.users.currentUser.credentials
+    apiService.fetchBookmarkFolders({ credentials })
+      .then((folders) => {
+        const folder = folders.find(folder => folder.id === this.id)
+        if (!folder) return
+
+        this.nameDraft = this.name = folder.name
+        this.emojiDraft = this.emoji = folder.emoji
+        this.emojiUrlDraft = this.emojiUrl = folder.emoji_url
+      })
+  },
+  computed: {
+    id () {
+      return this.$route.params.id
+    }
+  },
+  methods: {
+    selectEmoji (event) {
+      this.emojiDraft = event.insertion
+      this.emojiUrlDraft = event.insertionUrl
+    },
+    showEmojiPicker () {
+      if (!this.emojiPickerExpanded) {
+        this.$refs.picker.showPicker()
+      }
+    },
+    onShowPicker () {
+      this.emojiPickerExpanded = true
+    },
+    onClosePicker () {
+      this.emojiPickerExpanded = false
+    },
+    updateFolder () {
+      this.$store.dispatch('setBookmarkFolder', { folderId: this.id, name: this.nameDraft, emoji: this.emojiDraft })
+        .then(() => {
+          this.$router.push({ name: 'bookmark-folders' })
+        })
+    },
+    createFolder () {
+      this.$store.dispatch('createBookmarkFolder', { name: this.nameDraft, emoji: this.emojiDraft })
+        .then(() => {
+          this.$router.push({ name: 'bookmark-folders' })
+        })
+        .catch((e) => {
+          this.$store.dispatch('pushGlobalNotice', {
+            messageKey: 'bookmark_folders.error',
+            messageArgs: [e.message],
+            level: 'error'
+          })
+        })
+    },
+    deleteFolder () {
+      this.$store.dispatch('deleteBookmarkFolder', { folderId: this.id })
+      this.$router.push({ name: 'bookmark-folders' })
+    }
+  }
+}
+
+export default BookmarkFolderEdit
--- a/src/components/bookmark_folder_edit/bookmark_folder_edit.vue
+++ b/src/components/bookmark_folder_edit/bookmark_folder_edit.vue
@ -0,0 +1,198 @@
+<template>
+  <div class="panel-default panel BookmarkFolderEdit">
+    <div
+      ref="header"
+      class="panel-heading folder-edit-heading"
+    >
+      <button
+        class="button-unstyled go-back-button"
+        @click="$router.back"
+      >
+        <FAIcon
+          size="lg"
+          icon="chevron-left"
+        />
+      </button>
+      <div class="title">
+        <i18n-t
+          v-if="id"
+          keypath="bookmark_folders.editing_folder"
+        >
+          <template #folderName>
+            {{ name }}
+          </template>
+        </i18n-t>
+        <i18n-t
+          v-else
+          keypath="bookmark_folders.creating_folder"
+        />
+      </div>
+    </div>
+    <div class="panel-body">
+      <div class="input-wrap">
+        <label for="folder-edit-title">{{ $t('bookmark_folders.emoji') }}</label>
+        <button
+          class="input input-emoji"
+          :title="$t('bookmark_folder.emoji_pick')"
+          @click="showEmojiPicker"
+        >
+          <img
+            v-if="emojiUrlDraft"
+            class="iconEmoji iconEmoji-image"
+            :src="emojiUrlDraft"
+            :alt="emojiDraft"
+            :title="emojiDraft"
+          >
+          <span
+            v-else-if="emojiDraft"
+            class="iconEmoji"
+          >
+            <span>
+              {{ emojiDraft }}
+            </span>
+          </span>
+        </button>
+        <EmojiPicker
+          ref="picker"
+          class="emoji-picker-panel"
+          @emoji="selectEmoji"
+          @show="onShowPicker"
+          @close="onClosePicker"
+        />
+      </div>
+      <div class="input-wrap">
+        <label for="folder-edit-title">{{ $t('bookmark_folders.name') }}</label>
+        <input
+          id="folder-edit-title"
+          ref="name"
+          v-model="nameDraft"
+          class="input"
+        >
+      </div>
+    </div>
+    <div class="panel-footer">
+      <span class="spacer" />
+      <button
+        v-if="!id"
+        class="btn button-default footer-button"
+        @click="createFolder"
+      >
+        {{ $t('bookmark_folders.create') }}
+      </button>
+      <button
+        v-else-if="!reallyDelete"
+        class="btn button-default footer-button"
+        @click="reallyDelete = true"
+      >
+        {{ $t('bookmark_folders.delete') }}
+      </button>
+      <template v-else>
+        {{ $t('bookmark_folders.really_delete') }}
+        <button
+          class="btn button-default footer-button"
+          @click="deleteFolder"
+        >
+          {{ $t('general.yes') }}
+        </button>
+        <button
+          class="btn button-default footer-button"
+          @click="reallyDelete = false"
+        >
+          {{ $t('general.no') }}
+        </button>
+      </template>
+      <div
+        v-if="id && !reallyDelete"
+      >
+        <button
+          class="btn button-default follow-button"
+          @click="updateFolder"
+        >
+          {{ $t('bookmark_folders.update_folder') }}
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script src="./bookmark_folder_edit.js"></script>
+
+<style lang="scss">
+.BookmarkFolderEdit {
+  --panel-body-padding: 0.5em;
+
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+
+  .folder-edit-heading {
+    grid-template-columns: auto minmax(50%, 1fr);
+  }
+
+  .panel-body {
+    display: flex;
+    gap: 0.5em;
+  }
+
+  .emoji-picker-panel {
+    position: absolute;
+    z-index: 20;
+    margin-top: 2px;
+
+    &.hide {
+      display: none;
+    }
+  }
+
+  .input-emoji {
+    height: 2.5em;
+    width: 2.5em;
+    padding: 0;
+
+    .iconEmoji {
+      display: inline-block;
+      text-align: center;
+      object-fit: contain;
+      vertical-align: middle;
+      height: 2.5em;
+      width: 2.5em;
+
+      > span {
+        font-size: 1.5rem;
+        line-height: 2.5rem;
+      }
+    }
+
+    img.iconEmoji {
+      padding: 0.25em;
+      box-sizing: border-box;
+    }
+  }
+
+  .input-wrap {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5em;
+  }
+
+  .go-back-button {
+    text-align: center;
+    line-height: 1;
+    height: 100%;
+    align-self: start;
+    width: var(--__panel-heading-height-inner);
+  }
+
+  .btn {
+    margin: 0 0.5em;
+  }
+
+  .panel-footer {
+    grid-template-columns: minmax(10%, 1fr);
+
+    .footer-button {
+      min-width: 9em;
+    }
+  }
+}
+</style>
--- a/src/components/bookmark_folders/bookmark_folders.js
+++ b/src/components/bookmark_folders/bookmark_folders.js
@ -0,0 +1,27 @@
+import BookmarkFolderCard from '../bookmark_folder_card/bookmark_folder_card.vue'
+
+const BookmarkFolders = {
+  data () {
+    return {
+      isNew: false
+    }
+  },
+  components: {
+    BookmarkFolderCard
+  },
+  computed: {
+    bookmarkFolders () {
+      return this.$store.state.bookmarkFolders.allFolders
+    }
+  },
+  methods: {
+    cancelNewFolder () {
+      this.isNew = false
+    },
+    newFolder () {
+      this.isNew = true
+    }
+  }
+}
+
+export default BookmarkFolders
--- a/src/components/bookmark_folders/bookmark_folders.vue
+++ b/src/components/bookmark_folders/bookmark_folders.vue
@ -0,0 +1,37 @@
+<template>
+  <div class="Bookmark-folders panel panel-default">
+    <div class="panel-heading">
+      <div class="title">
+        {{ $t('nav.bookmark_folders') }}
+      </div>
+      <router-link
+        :to="{ name: 'bookmark-folder-new' }"
+        class="button-default btn new-folder-button"
+      >
+        {{ $t("bookmark_folders.new") }}
+      </router-link>
+    </div>
+    <div class="panel-body">
+      <BookmarkFolderCard
+        :all-bookmarks="true"
+        class="list-item"
+      />
+      <BookmarkFolderCard
+        v-for="folder in bookmarkFolders.slice().reverse()"
+        :key="folder"
+        :folder="folder"
+        class="list-item"
+      />
+    </div>
+  </div>
+</template>
+
+<script src="./bookmark_folders.js"></script>
+
+<style lang="scss">
+.Bookmark-folders {
+  .new-folder-button {
+    padding: 0 0.5em;
+  }
+}
+</style>
--- a/src/components/bookmark_folders_menu/bookmark_folders_menu_content.js
+++ b/src/components/bookmark_folders_menu/bookmark_folders_menu_content.js
@ -0,0 +1,16 @@
+import { mapState } from 'vuex'
+import NavigationEntry from 'src/components/navigation/navigation_entry.vue'
+import { getBookmarkFolderEntries } from 'src/components/navigation/filter.js'
+
+export const BookmarkFoldersMenuContent = {
+  components: {
+    NavigationEntry
+  },
+  computed: {
+    ...mapState({
+      folders: getBookmarkFolderEntries
+    })
+  }
+}
+
+export default BookmarkFoldersMenuContent
--- a/src/components/bookmark_folders_menu/bookmark_folders_menu_content.vue
+++ b/src/components/bookmark_folders_menu/bookmark_folders_menu_content.vue
@ -0,0 +1,19 @@
+<template>
+  <ul>
+    <NavigationEntry
+      :item="{
+        name: 'bookmarks',
+        routeObject: { name: 'bookmarks' },
+        label: 'nav.all_bookmarks',
+        icon: 'bookmark'
+      }"
+    />
+    <NavigationEntry
+      v-for="item in folders"
+      :key="item.id"
+      :item="item"
+    />
+  </ul>
+</template>
+
+<script src="./bookmark_folders_menu_content.js"></script>
--- a/src/components/bookmark_timeline/bookmark_timeline.js
+++ b/src/components/bookmark_timeline/bookmark_timeline.js
@ -1,16 +1,31 @@
 import Timeline from '../timeline/timeline.vue'

 const Bookmarks = {
-  computed: {
-    timeline () {
-      return this.$store.state.statuses.timelines.bookmarks
-    }
+  created () {
+    this.$store.commit('clearTimeline', { timeline: 'bookmarks' })
+    this.$store.dispatch('startFetchingTimeline', { timeline: 'bookmarks', bookmarkFolderId: this.folderId || null })
  },
  components: {
    Timeline
  },
+  computed: {
+    folderId () {
+      return this.$route.params.id
+    },
+    timeline () {
+      return this.$store.state.statuses.timelines.bookmarks
+    }
+  },
+  watch: {
+    folderId () {
+      this.$store.commit('clearTimeline', { timeline: 'bookmarks' })
+      this.$store.dispatch('stopFetchingTimeline', 'bookmarks')
+      this.$store.dispatch('startFetchingTimeline', { timeline: 'bookmarks', bookmarkFolderId: this.folderId || null })
+    }
+  },
  unmounted () {
    this.$store.commit('clearTimeline', { timeline: 'bookmarks' })
+    this.$store.dispatch('stopFetchingTimeline', 'bookmarks')
  }
 }

--- a/src/components/bookmark_timeline/bookmark_timeline.vue
+++ b/src/components/bookmark_timeline/bookmark_timeline.vue
@ -3,6 +3,7 @@
    :title="$t('nav.bookmarks')"
    :timeline="timeline"
    :timeline-name="'bookmarks'"
+    :bookmark-folder-id="folderId"
  />
 </template>

--- a/src/components/button.style.js
+++ b/src/components/button.style.js
@ -96,6 +96,17 @@ export default {
        textOpacity: 0.25,
        textOpacityMode: 'blend'
      }
+    },
+    {
+      component: 'Icon',
+      parent: {
+        component: 'Button',
+        state: ['disabled']
+      },
+      directives: {
+        textOpacity: 0.25,
+        textOpacityMode: 'blend'
+      }
    }
  ]
 }
--- a/src/components/checkbox/checkbox.vue
+++ b/src/components/checkbox/checkbox.vue
@ -3,6 +3,13 @@
    class="checkbox"
    :class="{ disabled, indeterminate, 'indeterminate-fix': indeterminateTransitionFix }"
  >
+    <span
+      v-if="!!$slots.before"
+      class="label -before"
+      :class="{ faint: disabled }"
+    >
+      <slot name="before" />
+    </span>
    <input
      type="checkbox"
      class="visible-for-screenreader-only"
@ -14,11 +21,13 @@
    <i
      class="input -checkbox checkbox-indicator"
      :aria-hidden="true"
+      :class="{ disabled }"
      @transitionend.capture="onTransitionEnd"
    />
    <span
      v-if="!!$slots.default"
-      class="label"
+      class="label -after"
+      :class="{ faint: disabled }"
    >
      <slot />
    </span>
@ -93,14 +102,9 @@ export default {
    box-sizing: border-box;
  }

-  &.disabled {
-    .checkbox-indicator::before,
-    .label {
-      opacity: 0.5;
-    }
-
-    .label {
-      color: var(--text);
+  .disabled {
+    .checkbox-indicator::before {
+      background-color: var(--background);
    }
  }

@ -121,8 +125,14 @@ export default {
    }
  }

-  & > span {
-    margin-left: 0.5em;
+  & > .label {
+    &.-after {
+      margin-left: 0.5em;
+    }
+
+    &.-before {
+      margin-right: 0.5em;
+    }
  }
 }
 </style>
--- a/src/components/color_input/color_input.scss
+++ b/src/components/color_input/color_input.scss
@ -1,12 +1,15 @@
 .color-input {
  display: inline-flex;

+  .label {
+    flex: 1 1 auto;
+  }
+
  &-field.input {
    display: inline-flex;
    flex: 0 0 0;
    max-width: 9em;
    align-items: stretch;
-    padding: 0.2em 8px;

    input {
      color: var(--text);
@ -25,6 +28,7 @@
    .nativeColor {
      cursor: pointer;
      flex: 0 0 auto;
+      padding: 0;

      input {
        appearance: none;
@ -41,10 +45,10 @@
    .invalidIndicator,
    .transparentIndicator {
      flex: 0 0 2em;
-      margin: 0 0.5em;
+      margin: 0.2em 0.5em;
      min-width: 2em;
      align-self: stretch;
-      min-height: 1.5em;
+      min-height: 1.1em;
      border-radius: var(--roundness);
    }

@ -81,9 +85,17 @@
        border-bottom-right-radius: var(--roundness);
      }
    }
-  }

-  .label {
-    flex: 1 1 auto;
+    &.disabled,
+    &:disabled {
+      .nativeColor input,
+      .computedIndicator,
+      .validIndicator,
+      .invalidIndicator,
+      .transparentIndicator {
+        /* stylelint-disable-next-line declaration-no-important */
+        opacity: 0.25 !important;
+      }
+    }
  }
 }
--- a/src/components/color_input/color_input.vue
+++ b/src/components/color_input/color_input.vue
@ -6,6 +6,7 @@
    <label
      :for="name"
      class="label"
+      :class="{ faint: !present || disabled }"
    >
      {{ label }}
    </label>
@ -14,16 +15,20 @@
      :model-value="present"
      :disabled="disabled"
      class="opt"
-      @update:modelValue="$emit('update:modelValue', typeof modelValue === 'undefined' ? fallback : undefined)"
+      @update:modelValue="update(typeof modelValue === 'undefined' ? fallback : undefined)"
    />
-    <div class="input color-input-field">
+    <div
+      class="input color-input-field"
+      :class="{ disabled: !present || disabled }"
+    >
      <input
        :id="name + '-t'"
        class="textColor unstyled"
+        :class="{ disabled: !present || disabled }"
        type="text"
        :value="modelValue || fallback"
        :disabled="!present || disabled"
-        @input="$emit('update:modelValue', $event.target.value)"
+        @input="updateValue($event.target.value)"
      >
      <div
        v-if="validColor"
@ -51,7 +56,8 @@
          type="color"
          :value="modelValue || fallback"
          :disabled="!present || disabled"
-          @input="$emit('update:modelValue', $event.target.value)"
+          :class="{ disabled: !present || disabled }"
+          @input="updateValue($event.target.value)"
        >
      </label>
    </div>
@ -60,6 +66,7 @@
 <script>
 import Checkbox from '../checkbox/checkbox.vue'
 import { hex2rgb } from '../../services/color_convert/color_convert.js'
+import { throttle } from 'lodash'

 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
@ -125,6 +132,11 @@ export default {
    computedColor () {
      return this.modelValue && this.modelValue.startsWith('--')
    }
+  },
+  methods: {
+    updateValue: throttle(function (value) {
+      this.$emit('update:modelValue', value)
+    }, 100)
  }
 }
 </script>
--- a/src/components/component_preview/component_preview.vue
+++ b/src/components/component_preview/component_preview.vue
@ -0,0 +1,212 @@
+<template>
+<div
+  class="ComponentPreview"
+  :class="{ '-shadow-controls': shadowControl }"
+>
+  <label
+    class="header"
+    v-show="shadowControl"
+    :class="{ faint: disabled }"
+  >
+    {{ $t('settings.style.shadows.offset') }}
+  </label>
+  <input
+    v-show="shadowControl"
+    :value="shadow?.y"
+    :disabled="disabled"
+    :class="{ disabled }"
+    class="input input-number y-shift-number"
+    type="number"
+    @input="e => updateProperty('y', e.target.value)"
+  >
+  <input
+    v-show="shadowControl"
+    :value="shadow?.y"
+    :disabled="disabled"
+    :class="{ disabled }"
+    class="input input-range y-shift-slider"
+    type="range"
+    max="20"
+    min="-20"
+    @input="e => updateProperty('y', e.target.value)"
+  >
+  <div
+    class="preview-window"
+    :class="{ '-light-grid': lightGrid }"
+  >
+    <div
+      class="preview-block"
+      :style="previewStyle"
+    />
+  </div>
+  <input
+    v-show="shadowControl"
+    :value="shadow?.x"
+    :disabled="disabled"
+    :class="{ disabled }"
+    class="input input-number x-shift-number"
+    type="number"
+    @input="e => updateProperty('x', e.target.value)"
+  >
+  <input
+    v-show="shadowControl"
+    :value="shadow?.x"
+    :disabled="disabled"
+    :class="{ disabled }"
+    class="input input-range x-shift-slider"
+    type="range"
+    max="20"
+    min="-20"
+    @input="e => updateProperty('x', e.target.value)"
+  >
+  <Checkbox
+    id="lightGrid"
+    v-model="lightGrid"
+    :disabled="shadow == null"
+    name="lightGrid"
+    class="input-light-grid"
+  >
+    {{ $t('settings.style.shadows.light_grid') }}
+  </Checkbox>
+</div>
+</template>
+
+<style lang="scss">
+.ComponentPreview {
+  display: grid;
+  grid-template-columns: 3em 1fr 3em;
+  grid-template-rows: 2em 1fr 2em;
+  grid-template-areas:
+    ".       header  y-num  "
+    ".       preview y-slide"
+    "x-num   x-slide .      "
+    "options options options";
+  grid-gap: 0.5em;
+
+  .header {
+    grid-area: header;
+    justify-self: center;
+    align-self: baseline;
+    line-height: 2;
+  }
+
+  .input-light-grid {
+    grid-area: options;
+    justify-self: center;
+  }
+
+  .input-number {
+    min-width: 2em;
+  }
+
+  .x-shift-number {
+    grid-area: x-num;
+  }
+
+  .x-shift-slider {
+    grid-area: x-slide;
+    height: auto;
+    align-self: start;
+    min-width: 10em;
+  }
+
+  .y-shift-number {
+    grid-area: y-num;
+  }
+
+  .y-shift-slider {
+    grid-area: y-slide;
+    writing-mode: vertical-lr;
+    justify-self: left;
+    min-height: 10em;
+  }
+
+  .x-shift-slider,
+  .y-shift-slider {
+    padding: 0;
+  }
+
+  .preview-window {
+    --__grid-color1: rgb(102 102 102);
+    --__grid-color2: rgb(153 153 153);
+    --__grid-color1-disabled: rgba(102 102 102 / 20%);
+    --__grid-color2-disabled: rgba(153 153 153 / 20%);
+
+    &.-light-grid {
+      --__grid-color1: rgb(205 205 205);
+      --__grid-color2: rgb(255 255 255);
+      --__grid-color1-disabled: rgba(205 205 205 / 20%);
+      --__grid-color2-disabled: rgba(255 255 255 / 20%);
+    }
+
+    grid-area: preview;
+    aspect-ratio: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 10em;
+    min-height: 10em;
+    background-color: var(--__grid-color2);
+    background-image:
+      linear-gradient(45deg, var(--__grid-color1) 25%, transparent 25%),
+      linear-gradient(-45deg, var(--__grid-color1) 25%, transparent 25%),
+      linear-gradient(45deg, transparent 75%, var(--__grid-color1) 75%),
+      linear-gradient(-45deg, transparent 75%, var(--__grid-color1) 75%);
+    background-size: 20px 20px;
+    background-position: 0 0, 0 10px, 10px -10px, -10px 0;
+    border-radius: var(--roundness);
+
+    &.disabled {
+      background-color: var(--__grid-color2-disabled);
+      background-image:
+        linear-gradient(45deg, var(--__grid-color1-disabled) 25%, transparent 25%),
+        linear-gradient(-45deg, var(--__grid-color1-disabled) 25%, transparent 25%),
+        linear-gradient(45deg, transparent 75%, var(--__grid-color1-disabled) 75%),
+        linear-gradient(-45deg, transparent 75%, var(--__grid-color1-disabled) 75%);
+    }
+
+    .preview-block {
+      background: var(--background, var(--bg));
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      min-width: 33%;
+      min-height: 33%;
+      max-width: 80%;
+      max-height: 80%;
+      border-width: 0;
+      border-style: solid;
+      border-color: var(--border);
+      border-radius: var(--roundness);
+      box-shadow: var(--shadow);
+    }
+  }
+}
+</style>
+<script>
+import Checkbox from 'src/components/checkbox/checkbox.vue'
+
+export default {
+  props: [
+    'shadow',
+    'shadowControl',
+    'previewClass',
+    'previewStyle',
+    'disabled'
+  ],
+  data () {
+    return {
+      lightGrid: false
+    }
+  },
+  emits: ['update:shadow'],
+  components: {
+    Checkbox
+  },
+  methods: {
+    updateProperty (axis, value) {
+      this.$emit('update:shadow', { axis, value })
+    }
+  }
+}
+</script>
--- a/src/components/emoji_picker/emoji_picker.js
+++ b/src/components/emoji_picker/emoji_picker.js
@ -180,7 +180,7 @@ const EmojiPicker = {
      if (!this.keepOpen) {
        this.$refs.popover.hidePopover()
      }
-      this.$emit('emoji', { insertion: value, keepOpen: this.keepOpen })
+      this.$emit('emoji', { insertion: value, insertionUrl: emoji.imageUrl, keepOpen: this.keepOpen })
    },
    onScroll (startIndex, endIndex, visibleStartIndex, visibleEndIndex) {
      const target = this.$refs['emoji-groups'].$el
--- a/src/components/extra_buttons/extra_buttons.js
+++ b/src/components/extra_buttons/extra_buttons.js
@ -1,6 +1,7 @@
 import Popover from '../popover/popover.vue'
 import genRandomSeed from '../../services/random_seed/random_seed.service.js'
 import ConfirmModal from '../confirm_modal/confirm_modal.vue'
+import StatusBookmarkFolderMenu from '../status_bookmark_folder_menu/status_bookmark_folder_menu.vue'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
  faEllipsisH,
@ -36,7 +37,8 @@ const ExtraButtons = {
  props: ['status'],
  components: {
    Popover,
-    ConfirmModal
+    ConfirmModal,
+    StatusBookmarkFolderMenu
  },
  data () {
    return {
@ -145,6 +147,9 @@ const ExtraButtons = {
    canBookmark () {
      return !!this.currentUser
    },
+    bookmarkFolders () {
+      return this.$store.state.instance.pleromaBookmarkFoldersAvailable
+    },
    statusLink () {
      return `${this.$store.state.instance.server}${this.$router.resolve({ name: 'conversation', params: { id: this.status.id } }).href}`
    },
--- a/src/components/extra_buttons/extra_buttons.vue
+++ b/src/components/extra_buttons/extra_buttons.vue
@ -87,6 +87,10 @@
              icon="bookmark"
            /><span>{{ $t("status.unbookmark") }}</span>
          </button>
+          <StatusBookmarkFolderMenu
+            v-if="status.bookmarked && bookmarkFolders"
+            :status="status"
+          />
        </template>
        <button
          v-if="ownStatus && editingAvailable"
--- a/src/components/input.style.js
+++ b/src/components/input.style.js
@ -10,17 +10,18 @@ const hoverGlow = {
 export default {
  name: 'Input',
  selector: '.input',
-  variant: {
+  states: {
+    hover: ':hover:not(.disabled)',
+    focused: ':focus-within',
+    disabled: '.disabled'
+  },
+  variants: {
    checkbox: '.-checkbox',
    radio: '.-radio'
  },
-  states: {
-    disabled: ':disabled',
-    hover: ':hover:not(:disabled)',
-    focused: ':focus-within'
-  },
  validInnerComponents: [
-    'Text'
+    'Text',
+    'Icon'
  ],
  defaultRules: [
    {
@ -55,6 +56,34 @@ export default {
      directives: {
        shadow: [hoverGlow, '--defaultInputBevel']
      }
+    },
+    {
+      state: ['disabled'],
+      directives: {
+        background: '--parent'
+      }
+    },
+    {
+      component: 'Text',
+      parent: {
+        component: 'Input',
+        state: ['disabled']
+      },
+      directives: {
+        textOpacity: 0.25,
+        textOpacityMode: 'blend'
+      }
+    },
+    {
+      component: 'Icon',
+      parent: {
+        component: 'Input',
+        state: ['disabled']
+      },
+      directives: {
+        textOpacity: 0.25,
+        textOpacityMode: 'blend'
+      }
    }
  ]
 }
--- a/src/components/nav_panel/nav_panel.js
+++ b/src/components/nav_panel/nav_panel.js
@ -1,3 +1,4 @@
+import BookmarkFoldersMenuContent from 'src/components/bookmark_folders_menu/bookmark_folders_menu_content.vue'
 import ListsMenuContent from 'src/components/lists_menu/lists_menu_content.vue'
 import { mapState, mapGetters } from 'vuex'
 import { TIMELINES, ROOT_ITEMS } from 'src/components/navigation/navigation.js'
@ -41,6 +42,7 @@ const NavPanel = {
  created () {
  },
  components: {
+    BookmarkFoldersMenuContent,
    ListsMenuContent,
    NavigationEntry,
    NavigationPins,
@ -51,6 +53,7 @@ const NavPanel = {
      editMode: false,
      showTimelines: false,
      showLists: false,
+      showBookmarkFolders: false,
      timelinesList: Object.entries(TIMELINES).map(([k, v]) => ({ ...v, name: k })),
      rootList: Object.entries(ROOT_ITEMS).map(([k, v]) => ({ ...v, name: k }))
    }
@ -62,6 +65,9 @@ const NavPanel = {
    toggleLists () {
      this.showLists = !this.showLists
    },
+    toggleBookmarkFolders () {
+      this.showBookmarkFolders = !this.showBookmarkFolders
+    },
    toggleEditMode () {
      this.editMode = !this.editMode
    },
@ -90,7 +96,8 @@ const NavPanel = {
      pleromaChatMessagesAvailable: state => state.instance.pleromaChatMessagesAvailable,
      supportsAnnouncements: state => state.announcements.supportsAnnouncements,
      pinnedItems: state => new Set(state.serverSideStorage.prefsStorage.collections.pinnedNavItems),
-      collapsed: state => state.serverSideStorage.prefsStorage.simple.collapseNav
+      collapsed: state => state.serverSideStorage.prefsStorage.simple.collapseNav,
+      bookmarkFolders: state => state.instance.pleromaBookmarkFoldersAvailable
    }),
    timelinesItems () {
      return filterNavigation(
@ -102,7 +109,8 @@ const NavPanel = {
          hasAnnouncements: this.supportsAnnouncements,
          isFederating: this.federating,
          isPrivate: this.privateMode,
-          currentUser: this.currentUser
+          currentUser: this.currentUser,
+          supportsBookmarkFolders: this.bookmarkFolders
        }
      )
    },
@ -116,7 +124,8 @@ const NavPanel = {
          hasAnnouncements: this.supportsAnnouncements,
          isFederating: this.federating,
          isPrivate: this.privateMode,
-          currentUser: this.currentUser
+          currentUser: this.currentUser,
+          supportsBookmarkFolders: this.bookmarkFolders
        }
      )
    },
--- a/src/components/nav_panel/nav_panel.vue
+++ b/src/components/nav_panel/nav_panel.vue
@ -83,6 +83,39 @@
            class="timelines"
          />
        </div>
+        <NavigationEntry
+          v-if="currentUser && bookmarkFolders"
+          :show-pin="false"
+          :item="{ icon: 'bookmark', label: 'nav.bookmarks' }"
+          :aria-expanded="showBookmarkFolders ? 'true' : 'false'"
+          @click="toggleBookmarkFolders"
+        >
+          <router-link
+            :title="$t('bookmarks.manage_bookmark_folders')"
+            class="button-unstyled extra-button"
+            :to="{ name: 'bookmark-folders' }"
+            @click.stop
+          >
+            <FAIcon
+              fixed-width
+              icon="wrench"
+            />
+          </router-link>
+          <FAIcon
+            class="timelines-chevron"
+            fixed-width
+            :icon="showBookmarkFolders ? 'chevron-up' : 'chevron-down'"
+          />
+        </NavigationEntry>
+        <div
+          v-show="showBookmarkFolders"
+          class="timelines-background menu-item-collapsible"
+          :class="{ '-expanded': showBookmarkFolders }"
+        >
+          <BookmarkFoldersMenuContent
+            class="timelines"
+          />
+        </div>
        <NavigationEntry
          v-for="item in rootItems"
          :key="item.name"
--- a/src/components/navigation/filter.js
+++ b/src/components/navigation/filter.js
@ -1,4 +1,4 @@
-export const filterNavigation = (list = [], { hasChats, hasAnnouncements, isFederating, isPrivate, currentUser }) => {
+export const filterNavigation = (list = [], { hasChats, hasAnnouncements, isFederating, isPrivate, currentUser, supportsBookmarkFolders }) => {
  return list.filter(({ criteria, anon, anonRoute }) => {
    const set = new Set(criteria || [])
    if (!isFederating && set.has('federating')) return false
@ -7,6 +7,7 @@ export const filterNavigation = (list = [], { hasChats, hasAnnouncements, isFede
    if ((!currentUser || !currentUser.locked) && set.has('lockedUser')) return false
    if (!hasChats && set.has('chats')) return false
    if (!hasAnnouncements && set.has('announcements')) return false
+    if (supportsBookmarkFolders && set.has('!supportsBookmarkFolders')) return false
    return true
  })
 }
@ -17,3 +18,12 @@ export const getListEntries = state => state.lists.allLists.map(list => ({
  labelRaw: list.title,
  iconLetter: list.title[0]
 }))
+
+export const getBookmarkFolderEntries = state => state.bookmarkFolders.allFolders.map(folder => ({
+  name: 'bookmark-folder-' + folder.id,
+  routeObject: { name: 'bookmark-folder', params: { id: folder.id } },
+  labelRaw: folder.name,
+  iconEmoji: folder.emoji,
+  iconEmojiUrl: folder.emoji_url,
+  iconLetter: folder.name[0]
+}))
--- a/src/components/navigation/navigation.js
+++ b/src/components/navigation/navigation.js
@ -32,7 +32,8 @@ export const TIMELINES = {
  bookmarks: {
    route: 'bookmarks',
    icon: 'bookmark',
-    label: 'nav.bookmarks'
+    label: 'nav.bookmarks',
+    criteria: ['!supportsBookmarkFolders']
  },
  favorites: {
    routeObject: { name: 'user-profile', query: { tab: 'favorites' } },
--- a/src/components/navigation/navigation_entry.vue
+++ b/src/components/navigation/navigation_entry.vue
@ -22,11 +22,25 @@
            :icon="item.icon"
          />
        </span>
+        <img
+          v-if="item.iconEmojiUrl"
+          class="menu-icon iconEmoji iconEmoji-image"
+          :src="item.iconEmojiUrl"
+          :alt="item.iconEmoji"
+          :title="item.iconEmoji"
+        >
        <span
-          v-if="item.iconLetter"
-          class="icon iconLetter fa-scale-110 menu-icon"
-        >{{ item.iconLetter }}
+          v-else-if="item.iconEmoji"
+          class="menu-icon iconEmoji"
+        >
+          <span>
+            {{ item.iconEmoji }}
+          </span>
        </span>
+        <span
+          v-else-if="item.iconLetter"
+          class="icon iconLetter fa-scale-110 menu-icon"
+        >{{ item.iconLetter }}</span>
        <span class="label">
          {{ item.labelRaw || $t(item.label) }}
        </span>
@ -110,5 +124,23 @@
  .badge {
    margin: 0 var(--__horizontal-gap);
  }
+
+  .iconEmoji {
+    display: inline-block;
+    text-align: center;
+    object-fit: contain;
+    vertical-align: middle;
+    height: var(--__line-height);
+    width: var(--__line-height);
+
+    > span {
+      font-size: 1.5rem;
+    }
+  }
+
+  img.iconEmoji {
+    padding: 0.25rem;
+    box-sizing: border-box;
+  }
 }
 </style>
--- a/src/components/opacity_input/opacity_input.vue
+++ b/src/components/opacity_input/opacity_input.vue
@ -6,6 +6,7 @@
    <label
      :for="name"
      class="label"
+      :class="{ faint: !present || disabled }"
    >
      {{ $t('settings.style.common.opacity') }}
    </label>
@ -22,6 +23,7 @@
      type="number"
      :value="modelValue || fallback"
      :disabled="!present || disabled"
+      :class="{ disabled: !present || disabled }"
      max="1"
      min="0"
      step=".05"
--- a/src/components/select/select.vue
+++ b/src/components/select/select.vue
@ -6,13 +6,14 @@
    <select
      :disabled="disabled"
      :value="modelValue"
-      v-bind="attrs"
+      v-bind="$attrs"
      @change="$emit('update:modelValue', $event.target.value)"
    >
      <slot />
    </select>
    {{ ' ' }}
    <FAIcon
+      v-if="!$attrs.size && !$attrs.multiple"
      class="select-down-icon"
      icon="chevron-down"
    />
@ -39,6 +40,38 @@ label.Select {
    z-index: 1;
    height: 2em;
    line-height: 16px;
+
+    &[multiple],
+    &[size] {
+      height: 100%;
+      padding: 0.2em;
+
+      option {
+        background-color: transparent;
+
+        &.-active {
+          color: var(--selectionText);
+          background-color: var(--selectionBackground);
+        }
+      }
+    }
+  }
+
+  &.disabled,
+  &:disabled {
+    background-color: var(--background);
+    opacity: 1; /* override browser */
+    color: var(--faint);
+
+    select {
+      &[multiple],
+      &[size] {
+        option.-active {
+          color: var(--faint);
+          background: transparent;
+        }
+      }
+    }
  }

  .select-down-icon {
--- a/src/components/settings_modal/tabs/theme_tab/theme_tab.js
+++ b/src/components/settings_modal/tabs/theme_tab/theme_tab.js
@ -314,7 +314,18 @@ export default {
      },
      set (val) {
        if (val) {
-          this.shadowsLocal[this.shadowSelected] = this.currentShadowFallback.map(_ => Object.assign({}, _))
+          this.shadowsLocal[this.shadowSelected] = (this.currentShadowFallback || [])
+            .map(s => ({
+              name: null,
+              x: 0,
+              y: 0,
+              blur: 0,
+              spread: 0,
+              inset: false,
+              color: '#000000',
+              alpha: 1,
+              ...s
+            }))
        } else {
          delete this.shadowsLocal[this.shadowSelected]
        }
--- a/src/components/settings_modal/tabs/theme_tab/theme_tab.scss
+++ b/src/components/settings_modal/tabs/theme_tab/theme_tab.scss
@ -25,7 +25,9 @@
    margin-bottom: 5px;

    .label {
+      margin-right: 1em;
      flex: 1;
+      line-height: 2;
    }

    .opt {
@ -48,15 +50,14 @@

      &[type="range"] {
        flex: 1;
-        min-width: 3em;
-        align-self: flex-start;
+        min-width: 2em;
+        align-self: center;
+        margin: 0 0.5em;
      }
-    }

-    &.disabled {
-      input,
-      select {
-        opacity: 0.5;
+      &[type="checkbox"] + i {
+        height: 1.1em;
+        align-self: center;
      }
    }
  }
--- a/src/components/settings_modal/tabs/theme_tab/theme_tab.vue
+++ b/src/components/settings_modal/tabs/theme_tab/theme_tab.vue
@ -123,10 +123,13 @@
      </div>
    </div>

-    <!-- eslint-disable vue/no-v-text-v-html-on-component -->
-    <component :is="'style'" v-html="themeV3Preview"/>
-    <!-- eslint-enable vue/no-v-text-v-html-on-component -->
-    <preview id="theme-preview"/>
+    <!-- eslint-disable vue/no-v-html vue/no-v-text-v-html-on-component -->
+    <component
+      :is="'style'"
+      v-html="themeV3Preview"
+    />
+    <!-- eslint-enable vue/no-v-html vue/no-v-text-v-html-on-component -->
+    <preview id="theme-preview" />

    <div>
      <button
@ -934,24 +937,14 @@
              </Select>
            </div>
            <div class="override">
-              <label
-                for="override"
-                class="label"
-              >
-                {{ $t('settings.style.shadows.override') }}
-              </label>
-              {{ ' ' }}
-              <input
+              <Checkbox
                id="override"
                v-model="currentShadowOverriden"
                name="override"
                class="input-override"
-                type="checkbox"
              >
-              <label
-                class="checkbox-label"
-                for="override"
-              />
+                {{ $t('settings.style.shadows.override') }}
+              </Checkbox>
            </div>
            <button
              class="btn button-default"
@ -962,38 +955,10 @@
          </div>
          <ShadowControl
            v-model="currentShadow"
-            :ready="!!currentShadowFallback"
+            :separate-inset="shadowSelected === 'avatar' || shadowSelected === 'avatarStatus'"
            :fallback="currentShadowFallback"
          />
-          <div v-if="shadowSelected === 'avatar' || shadowSelected === 'avatarStatus'">
-            <i18n-t
-              scope="global"
-              keypath="settings.style.shadows.filter_hint.always_drop_shadow"
-              tag="p"
-            >
-              <code>filter: drop-shadow()</code>
-            </i18n-t>
-            <p>{{ $t('settings.style.shadows.filter_hint.avatar_inset') }}</p>
-            <i18n-t
-              scope="global"
-              keypath="settings.style.shadows.filter_hint.drop_shadow_syntax"
-              tag="p"
-            >
-              <code>drop-shadow</code>
-              <code>spread-radius</code>
-              <code>inset</code>
-            </i18n-t>
-            <i18n-t
-              scope="global"
-              keypath="settings.style.shadows.filter_hint.inset_classic"
-              tag="p"
-            >
-              <code>box-shadow</code>
-            </i18n-t>
-            <p>{{ $t('settings.style.shadows.filter_hint.spread_zero') }}</p>
-          </div>
        </div>
-
        <div
          :label="$t('settings.style.fonts._tab_label')"
          class="fonts-container"
--- a/src/components/shadow_control/shadow_control.js
+++ b/src/components/shadow_control/shadow_control.js
@ -1,9 +1,12 @@
-import ColorInput from '../color_input/color_input.vue'
-import OpacityInput from '../opacity_input/opacity_input.vue'
-import Select from '../select/select.vue'
-import { getCssShadow } from '../../services/theme_data/theme_data.service.js'
-import { hex2rgb } from '../../services/color_convert/color_convert.js'
+import ColorInput from 'src/components/color_input/color_input.vue'
+import OpacityInput from 'src/components/opacity_input/opacity_input.vue'
+import Select from 'src/components/select/select.vue'
+import Checkbox from 'src/components/checkbox/checkbox.vue'
+import Popover from 'src/components/popover/popover.vue'
+import ComponentPreview from 'src/components/component_preview/component_preview.vue'
+import { getCssShadow, getCssShadowFilter } from '../../services/theme_data/theme_data.service.js'
 import { library } from '@fortawesome/fontawesome-svg-core'
+import { throttle } from 'lodash'
 import {
  faTimes,
  faChevronDown,
@ -30,93 +33,100 @@ const toModel = (object = {}) => ({
 })

 export default {
-  // 'modelValue' and 'Fallback' can be undefined, but if they are
-  // initially vue won't detect it when they become something else
-  // therefore i'm using "ready" which should be passed as true when
-  // data becomes available
  props: [
-    'modelValue', 'fallback', 'ready'
+    'modelValue', 'fallback', 'separateInset', 'noPreview', 'disabled'
  ],
-  emits: ['update:modelValue'],
+  emits: ['update:modelValue', 'subShadowSelected'],
  data () {
    return {
      selectedId: 0,
      // TODO there are some bugs regarding display of array (it's not getting updated when deleting for some reason)
-      cValue: (this.modelValue || this.fallback || []).map(toModel)
+      cValue: (this.modelValue ?? this.fallback ?? []).map(toModel)
    }
  },
  components: {
    ColorInput,
    OpacityInput,
-    Select
+    Select,
+    Checkbox,
+    Popover,
+    ComponentPreview
+  },
+  beforeUpdate () {
+    this.cValue = (this.modelValue ?? this.fallback ?? []).map(toModel)
+  },
+  computed: {
+    selected () {
+      const selected = this.cValue[this.selectedId]
+      if (selected) {
+        return { ...selected }
+      }
+      return null
+    },
+    present () {
+      return this.selected != null && !this.usingFallback
+    },
+    shadowsAreNull () {
+      return this.modelValue == null
+    },
+    currentFallback () {
+      return this.fallback?.[this.selectedId]
+    },
+    moveUpValid () {
+      return this.selectedId > 0
+    },
+    moveDnValid () {
+      return this.selectedId < this.cValue.length - 1
+    },
+    usingFallback () {
+      return this.modelValue == null
+    },
+    style () {
+      if (this.separateInset) {
+        return {
+          filter: getCssShadowFilter(this.cValue),
+          boxShadow: getCssShadow(this.cValue, true)
+        }
+      }
+      return {
+        boxShadow: getCssShadow(this.cValue)
+      }
+    }
+  },
+  watch: {
+    selected (value) {
+      this.$emit('subShadowSelected', this.selectedId)
+    }
  },
  methods: {
+    updateProperty: throttle(function (prop, value) {
+      this.cValue[this.selectedId][prop] = value
+      if (prop === 'inset' && value === false && this.separateInset) {
+        this.cValue[this.selectedId].spread = 0
+      }
+      this.$emit('update:modelValue', this.cValue)
+    }, 100),
    add () {
      this.cValue.push(toModel(this.selected))
-      this.selectedId = this.cValue.length - 1
+      this.selectedId = Math.max(this.cValue.length - 1, 0)
+      this.$emit('update:modelValue', this.cValue)
    },
    del () {
      this.cValue.splice(this.selectedId, 1)
      this.selectedId = this.cValue.length === 0 ? undefined : Math.max(this.selectedId - 1, 0)
+      this.$emit('update:modelValue', this.cValue)
    },
    moveUp () {
      const movable = this.cValue.splice(this.selectedId, 1)[0]
      this.cValue.splice(this.selectedId - 1, 0, movable)
      this.selectedId -= 1
+      this.$emit('update:modelValue', this.cValue)
    },
    moveDn () {
      const movable = this.cValue.splice(this.selectedId, 1)[0]
      this.cValue.splice(this.selectedId + 1, 0, movable)
      this.selectedId += 1
-    }
-  },
-  beforeUpdate () {
-    this.cValue = this.modelValue || this.fallback
-  },
-  computed: {
-    anyShadows () {
-      return this.cValue.length > 0
-    },
-    anyShadowsFallback () {
-      return this.fallback.length > 0
-    },
-    selected () {
-      if (this.ready && this.anyShadows) {
-        return this.cValue[this.selectedId]
-      } else {
-        return toModel({})
-      }
-    },
-    currentFallback () {
-      if (this.ready && this.anyShadowsFallback) {
-        return this.fallback[this.selectedId]
-      } else {
-        return toModel({})
-      }
-    },
-    moveUpValid () {
-      return this.ready && this.selectedId > 0
-    },
-    moveDnValid () {
-      return this.ready && this.selectedId < this.cValue.length - 1
-    },
-    present () {
-      return this.ready &&
-        typeof this.cValue[this.selectedId] !== 'undefined' &&
-        !this.usingFallback
-    },
-    usingFallback () {
-      return typeof this.modelValue === 'undefined'
-    },
-    rgb () {
-      return hex2rgb(this.selected.color)
-    },
-    style () {
-      return this.ready
-        ? {
-            boxShadow: getCssShadow(this.fallback)
-          }
-        : {}
+      this.$emit('update:modelValue', this.cValue)
    }
  }
 }
--- a/src/components/shadow_control/shadow_control.scss
+++ b/src/components/shadow_control/shadow_control.scss
@ -0,0 +1,105 @@
+.settings-modal .settings-modal-panel .shadow-control {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: stretch;
+  grid-gap: 0.25em;
+  margin-bottom: 1em;
+
+  .shadow-switcher {
+    order: 1;
+    flex: 1 0 6em;
+    min-width: 6em;
+    margin-right: 0.125em;
+    display: flex;
+    flex-direction: column;
+
+    .shadow-list {
+      flex: 1 0 auto;
+    }
+
+    .arrange-buttons {
+      flex: 0 0 auto;
+      display: grid;
+      grid-auto-columns: 1fr;
+      grid-auto-flow: column;
+      margin-top: 0.25em;
+
+      .button-default {
+        margin: 0;
+        padding: 0;
+      }
+    }
+  }
+
+  .shadow-tweak {
+    order: 3;
+    flex: 2 0 10em;
+    min-width: 10em;
+    margin-left: 0.125em;
+    margin-right: 0.125em;
+
+    /* hack */
+    .input-boolean {
+      flex: 1;
+      display: flex;
+
+      .label {
+        flex: 1;
+      }
+    }
+
+    .input-string {
+      flex: 1 0 5em;
+    }
+
+    .id-control {
+      align-items: stretch;
+
+      .shadow-switcher,
+      .btn {
+        min-width: 1px;
+        margin-right: 5px;
+      }
+
+      .btn {
+        padding: 0 0.4em;
+        margin: 0 0.1em;
+      }
+    }
+  }
+
+  &.-no-preview {
+    .shadow-tweak {
+      order: 0;
+      flex: 2 0 8em;
+      max-width: 100%;
+    }
+
+    .input-range {
+      min-width: 5em;
+    }
+  }
+
+  .inset-alert {
+    padding: 0.25em 0.5em;
+  }
+
+  &.disabled {
+    .inset-alert {
+      opacity: 0.2;
+    }
+  }
+
+  .shadow-preview {
+    order: 2;
+    flex: 3 3 15em;
+    min-width: 10em;
+    margin-left: 0.125em;
+    align-self: start;
+  }
+}
+
+.inset-tooltip {
+  padding: 0.5em;
+  max-width: 30em;
+}
--- a/src/components/shadow_control/shadow_control.vue
+++ b/src/components/shadow_control/shadow_control.vue
@ -1,91 +1,51 @@
 <template>
  <div
-    class="shadow-control"
-    :class="{ disabled: !present }"
+    class="label shadow-control"
+    :class="{ disabled: disabled || !present, '-no-preview': noPreview }"
  >
-    <div class="shadow-preview-container">
-      <div
-        :disabled="!present"
-        class="y-shift-control"
+    <ComponentPreview
+      v-if="!noPreview"
+      class="shadow-preview"
+      :shadow-control="true"
+      :shadow="selected"
+      :preview-style="style"
+      :disabled="disabled || !present"
+      @update:shadow="({ axis, value }) => updateProperty(axis, value)"
+    />
+    <div class="shadow-switcher">
+      <Select
+        id="shadow-list"
+        v-model="selectedId"
+        class="shadow-list"
+        size="10"
+        :disabled="shadowsAreNull"
      >
-        <input
-          v-model="selected.y"
-          :disabled="!present"
-          class="input input-number"
-          type="number"
+        <option
+          v-for="(shadow, index) in cValue"
+          :key="index"
+          :value="index"
+          :class="{ '-active': index === Number(selectedId) }"
        >
-        <div class="wrap">
-          <input
-            v-model="selected.y"
-            :disabled="!present"
-            class="input input-range"
-            type="range"
-            max="20"
-            min="-20"
-          >
-        </div>
-      </div>
-      <div class="preview-window">
-        <div
-          class="preview-block"
-          :style="style"
-        />
-      </div>
+          {{ shadow?.name ?? $t('settings.style.shadows.shadow_id', { value: index }) }}
+        </option>
+      </Select>
      <div
-        :disabled="!present"
-        class="x-shift-control"
+        class="id-control btn-group arrange-buttons"
      >
-        <input
-          v-model="selected.x"
-          :disabled="!present"
-          class="input input-number"
-          type="number"
-        >
-        <div class="wrap">
-          <input
-            v-model="selected.x"
-            :disabled="!present"
-            class="input input-range"
-            type="range"
-            max="20"
-            min="-20"
-          >
-        </div>
-      </div>
-    </div>
-
-    <div class="shadow-tweak">
-      <div
-        :disabled="usingFallback"
-        class="id-control style-control"
-      >
-        <Select
-          id="shadow-switcher"
-          v-model="selectedId"
-          class="shadow-switcher"
-          :disabled="!ready || usingFallback"
-        >
-          <option
-            v-for="(shadow, index) in cValue"
-            :key="index"
-            :value="index"
-          >
-            {{ $t('settings.style.shadows.shadow_id', { value: index }) }}
-          </option>
-        </Select>
        <button
          class="btn button-default"
-          :disabled="!ready || !present"
-          @click="del"
+          :disabled="disabled || shadowsAreNull"
+          @click="add"
        >
          <FAIcon
            fixed-width
-            icon="times"
+            icon="plus"
          />
        </button>
        <button
          class="btn button-default"
-          :disabled="!moveUpValid"
+          :disabled="disabled || !moveUpValid"
+          :class="{ disabled: disabled || !moveUpValid }"
          @click="moveUp"
        >
          <FAIcon
@ -95,7 +55,8 @@
        </button>
        <button
          class="btn button-default"
-          :disabled="!moveDnValid"
+          :disabled="disabled || !moveDnValid"
+          :class="{ disabled: disabled || !moveDnValid }"
          @click="moveDn"
        >
          <FAIcon
@ -105,222 +66,191 @@
        </button>
        <button
          class="btn button-default"
-          :disabled="usingFallback"
-          @click="add"
+          :disabled="disabled || !present"
+          :class="{ disabled: disabled || !present }"
+          @click="del"
        >
          <FAIcon
            fixed-width
-            icon="plus"
+            icon="times"
          />
        </button>
      </div>
+    </div>
+    <div class="shadow-tweak">
      <div
-        :disabled="!present"
-        class="inset-control style-control"
+        :class="{ disabled: disabled || !present }"
+        class="name-control style-control"
      >
        <label
-          for="inset"
+          for="name"
          class="label"
+          :class="{ faint: disabled || !present }"
        >
-          {{ $t('settings.style.shadows.inset') }}
+          {{ $t('settings.style.shadows.name') }}
        </label>
        <input
-          id="inset"
-          v-model="selected.inset"
-          :disabled="!present"
-          name="inset"
-          class="input -checkbox input-inset visible-for-screenreader-only"
-          type="checkbox"
+          id="name"
+          :value="selected?.name"
+          :disabled="disabled || !present"
+          :class="{ disabled: disabled || !present }"
+          name="name"
+          class="input input-string"
+          @input="e => updateProperty('name', e.target.value)"
        >
-        <label
-          class="checkbox-label"
-          for="inset"
-          :aria-hidden="true"
-        />
      </div>
      <div
-        :disabled="!present"
+        :disabled="disabled || !present"
+        class="inset-control style-control"
+      >
+        <Checkbox
+          id="inset"
+          :value="selected?.inset"
+          :disabled="disabled || !present"
+          name="inset"
+          class="input-inset input-boolean"
+          @input="e => updateProperty('inset', e.target.checked)"
+        >
+          <template #before>
+            {{ $t('settings.style.shadows.inset') }}
+          </template>
+        </Checkbox>
+      </div>
+      <div
+        :disabled="disabled || !present"
+        :class="{ disabled: disabled || !present }"
        class="blur-control style-control"
      >
        <label
-          for="spread"
+          for="blur"
          class="label"
+          :class="{ faint: disabled || !present }"
        >
          {{ $t('settings.style.shadows.blur') }}
        </label>
        <input
          id="blur"
-          v-model="selected.blur"
-          :disabled="!present"
+          :value="selected?.blur"
+          :disabled="disabled || !present"
+          :class="{ disabled: disabled || !present }"
          name="blur"
          class="input input-range"
          type="range"
          max="20"
          min="0"
+          @input="e => updateProperty('blur', e.target.value)"
        >
        <input
-          v-model="selected.blur"
-          :disabled="!present"
-          class="input input-number"
+          :value="selected?.blur"
+          class="input input-number -small"
+          :disabled="disabled || !present"
+          :class="{ disabled: disabled || !present }"
          type="number"
          min="0"
+          @input="e => updateProperty('blur', e.target.value)"
        >
      </div>
      <div
-        :disabled="!present"
        class="spread-control style-control"
+        :class="{ disabled: disabled || !present || (separateInset && !selected?.inset) }"
      >
        <label
          for="spread"
          class="label"
+          :class="{ faint: disabled || !present || (separateInset && !selected?.inset) }"
        >
          {{ $t('settings.style.shadows.spread') }}
        </label>
        <input
          id="spread"
-          v-model="selected.spread"
-          :disabled="!present"
+          :value="selected?.spread"
+          :disabled="disabled || !present || (separateInset && !selected?.inset)"
+          :class="{ disabled: disabled || !present || (separateInset && !selected?.inset) }"
          name="spread"
          class="input input-range"
          type="range"
          max="20"
          min="-20"
+          @input="e => updateProperty('spread', e.target.value)"
        >
        <input
-          v-model="selected.spread"
-          :disabled="!present"
-          class="input input-number"
+          :value="selected?.spread"
+          class="input input-number -small"
+          :class="{ disabled: disabled || !present || (separateInset && !selected?.inset) }"
+          :disabled="{ disabled: disabled || !present || (separateInset && !selected?.inset) }"
          type="number"
+          @input="e => updateProperty('spread', e.target.value)"
        >
      </div>
      <ColorInput
-        v-model="selected.color"
-        :disabled="!present"
+        :model-value="selected?.color"
+        :disabled="disabled || !present"
        :label="$t('settings.style.common.color')"
-        :fallback="currentFallback.color"
+        :fallback="currentFallback?.color"
        :show-optional-tickbox="false"
        name="shadow"
+        @update:modelValue="e => updateProperty('color', e)"
      />
      <OpacityInput
-        v-model="selected.alpha"
-        :disabled="!present"
+        :model-value="selected?.alpha"
+        :disabled="disabled || !present"
+        @update:modelValue="e => updateProperty('alpha', e)"
      />
      <i18n-t
        scope="global"
        keypath="settings.style.shadows.hintV3"
+        :class="{ faint: disabled || !present }"
        tag="p"
      >
        <code>--variable,mod</code>
      </i18n-t>
+      <Popover
+        v-if="separateInset"
+        trigger="hover"
+      >
+        <template #trigger>
+          <div
+            class="inset-alert alert warning"
+          >
+            <FAIcon icon="exclamation-triangle" />
+            &nbsp;
+            {{ $t('settings.style.shadows.filter_hint.avatar_inset_short') }}
+          </div>
+        </template>
+        <template #content>
+          <div class="inset-tooltip">
+            <i18n-t
+              scope="global"
+              keypath="settings.style.shadows.filter_hint.always_drop_shadow"
+              tag="p"
+            >
+              <code>filter: drop-shadow()</code>
+            </i18n-t>
+            <p>{{ $t('settings.style.shadows.filter_hint.avatar_inset') }}</p>
+            <i18n-t
+              scope="global"
+              keypath="settings.style.shadows.filter_hint.drop_shadow_syntax"
+              tag="p"
+            >
+              <code>drop-shadow</code>
+              <code>spread-radius</code>
+              <code>inset</code>
+            </i18n-t>
+            <i18n-t
+              scope="global"
+              keypath="settings.style.shadows.filter_hint.inset_classic"
+              tag="p"
+            >
+              <code>box-shadow</code>
+            </i18n-t>
+            <p>{{ $t('settings.style.shadows.filter_hint.spread_zero') }}</p>
+          </div>
+        </template>
+      </Popover>
    </div>
  </div>
 </template>

 <script src="./shadow_control.js"></script>

-<style lang="scss">
-.shadow-control {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
-  margin-bottom: 1em;
-
-  .shadow-preview-container,
-  .shadow-tweak {
-    margin: 5px 6px 0 0;
-  }
-
-  .shadow-preview-container {
-    flex: 0;
-    display: flex;
-    flex-wrap: wrap;
-
-    input[type="number"] {
-      width: 5em;
-      min-width: 2em;
-    }
-
-    .x-shift-control,
-    .y-shift-control {
-      display: flex;
-      flex: 0;
-
-      &[disabled="disabled"] * {
-        opacity: 0.5;
-      }
-    }
-
-    .x-shift-control {
-      align-items: flex-start;
-    }
-
-    .x-shift-control .wrap,
-    input[type="range"] {
-      margin: 0;
-      width: 15em;
-      height: 2em;
-    }
-
-    .y-shift-control {
-      flex-direction: column;
-      align-items: flex-end;
-
-      .wrap {
-        width: 2em;
-        height: 15em;
-      }
-
-      input[type="range"] {
-        transform-origin: 1em 1em;
-        transform: rotate(90deg);
-      }
-    }
-
-    .preview-window {
-      flex: 1;
-      background-color: #999;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      background-image:
-        linear-gradient(45deg, #666 25%, transparent 25%),
-        linear-gradient(-45deg, #666 25%, transparent 25%),
-        linear-gradient(45deg, transparent 75%, #666 75%),
-        linear-gradient(-45deg, transparent 75%, #666 75%);
-      background-size: 20px 20px;
-      background-position: 0 0, 0 10px, 10px -10px, -10px 0;
-      border-radius: var(--roundness);
-
-      .preview-block {
-        width: 33%;
-        height: 33%;
-        border-radius: var(--roundness);
-      }
-    }
-  }
-
-  .shadow-tweak {
-    flex: 1;
-    min-width: 280px;
-
-    .id-control {
-      align-items: stretch;
-
-      .shadow-switcher {
-        flex: 1;
-      }
-
-      .shadow-switcher,
-      .btn {
-        min-width: 1px;
-        margin-right: 5px;
-      }
-
-      .btn {
-        padding: 0 0.4em;
-        margin: 0 0.1em;
-      }
-    }
-  }
-}
-</style>
+<style src="./shadow_control.scss" lang="scss"></style>
--- a/src/components/status_bookmark_folder_menu/status_bookmark_folder_menu.js
+++ b/src/components/status_bookmark_folder_menu/status_bookmark_folder_menu.js
@ -0,0 +1,38 @@
+import { library } from '@fortawesome/fontawesome-svg-core'
+import { faChevronRight, faFolder } from '@fortawesome/free-solid-svg-icons'
+import { mapState } from 'vuex'
+
+import Popover from '../popover/popover.vue'
+
+library.add(faChevronRight, faFolder)
+
+const StatusBookmarkFolderMenu = {
+  props: [
+    'status'
+  ],
+  data () {
+    return {}
+  },
+  components: {
+    Popover
+  },
+  computed: {
+    ...mapState({
+      folders: state => state.bookmarkFolders.allFolders
+    }),
+    folderId () {
+      return this.status.bookmark_folder_id
+    }
+  },
+  methods: {
+    toggleFolder (id) {
+      const value = id === this.folderId ? null : id
+
+      this.$store.dispatch('bookmark', { id: this.status.id, bookmark_folder_id: value })
+        .then(() => this.$emit('onSuccess'))
+        .catch(err => this.$emit('onError', err.error.error))
+    }
+  }
+}
+
+export default StatusBookmarkFolderMenu
--- a/src/components/status_bookmark_folder_menu/status_bookmark_folder_menu.vue
+++ b/src/components/status_bookmark_folder_menu/status_bookmark_folder_menu.vue
@ -0,0 +1,40 @@
+<template>
+  <div class="StatusBookmarkFolderMenu">
+    <Popover
+      trigger="hover"
+      placement="left"
+      remove-padding
+    >
+      <template #content>
+        <div class="dropdown-menu">
+          <button
+            v-for="folder in folders"
+            :key="folder.id"
+            class="menu-item dropdown-item"
+            @click="toggleFolder(folder.id)"
+          >
+            <span
+              class="input menu-checkbox -radio"
+              :class="{ 'menu-checkbox-checked': status.bookmark_folder_id == folder.id }"
+            />
+            {{ folder.name }}
+          </button>
+        </div>
+      </template>
+      <template #trigger>
+        <button class="menu-item dropdown-item dropdown-item-icon -has-submenu">
+          <FAIcon
+            fixed-width
+            icon="folder"
+          />{{ $t('bookmark_folders.select_folder') }}<FAIcon
+            class="chevron-icon"
+            size="lg"
+            icon="chevron-right"
+          />
+        </button>
+      </template>
+    </Popover>
+  </div>
+</template>
+
+<script src="./status_bookmark_folder_menu.js"></script>
--- a/src/components/timeline/timeline.js
+++ b/src/components/timeline/timeline.js
@ -26,6 +26,7 @@ const Timeline = {
    'userId',
    'listId',
    'statusId',
+    'bookmarkFolderId',
    'tag',
    'embedded',
    'count',
@ -123,6 +124,7 @@ const Timeline = {
      userId: this.userId,
      listId: this.listId,
      statusId: this.statusId,
+      bookmarkFolderId: this.bookmarkFolderId,
      tag: this.tag
    })
  },
@ -186,6 +188,7 @@ const Timeline = {
        userId: this.userId,
        listId: this.listId,
        statusId: this.statusId,
+        bookmarkFolderId: this.bookmarkFolderId,
        tag: this.tag
      }).then(({ statuses }) => {
        if (statuses && statuses.length === 0) {
--- a/src/components/timeline_menu/timeline_menu.js
+++ b/src/components/timeline_menu/timeline_menu.js
@ -2,6 +2,7 @@ import Popover from '../popover/popover.vue'
 import NavigationEntry from 'src/components/navigation/navigation_entry.vue'
 import { mapState } from 'vuex'
 import { ListsMenuContent } from '../lists_menu/lists_menu_content.vue'
+import { BookmarkFoldersMenuContent } from '../bookmark_folders_menu/bookmark_folders_menu_content.vue'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import { TIMELINES } from 'src/components/navigation/navigation.js'
 import { filterNavigation } from 'src/components/navigation/filter.js'
@ -13,10 +14,10 @@ library.add(faChevronDown)

 // Route -> i18n key mapping, exported and not in the computed
 // because nav panel benefits from the same information.
-export const timelineNames = () => {
+export const timelineNames = (supportsBookmarkFolders) => {
  return {
    friends: 'nav.home_timeline',
-    bookmarks: 'nav.bookmarks',
+    bookmarks: supportsBookmarkFolders ? 'nav.all_bookmarks' : 'nav.bookmarks',
    dms: 'nav.dms',
    'public-timeline': 'nav.public_tl',
    'public-external-timeline': 'nav.twkn',
@ -28,7 +29,8 @@ const TimelineMenu = {
  components: {
    Popover,
    NavigationEntry,
-    ListsMenuContent
+    ListsMenuContent,
+    BookmarkFoldersMenuContent
  },
  data () {
    return {
@ -36,7 +38,7 @@ const TimelineMenu = {
    }
  },
  created () {
-    if (timelineNames()[this.$route.name]) {
+    if (timelineNames(this.bookmarkFolders)[this.$route.name]) {
      this.$store.dispatch('setLastTimeline', this.$route.name)
    }
  },
@ -45,10 +47,15 @@ const TimelineMenu = {
      const route = this.$route.name
      return route === 'lists-timeline'
    },
+    useBookmarkFoldersMenu () {
+      const route = this.$route.name
+      return this.bookmarkFolders && (route === 'bookmark-folder' || route === 'bookmarks')
+    },
    ...mapState({
      currentUser: state => state.users.currentUser,
      privateMode: state => state.instance.private,
-      federating: state => state.instance.federating
+      federating: state => state.instance.federating,
+      bookmarkFolders: state => state.instance.pleromaBookmarkFoldersAvailable
    }),
    timelinesList () {
      return filterNavigation(
@ -57,7 +64,8 @@ const TimelineMenu = {
          hasChats: this.pleromaChatMessagesAvailable,
          isFederating: this.federating,
          isPrivate: this.privateMode,
-          currentUser: this.currentUser
+          currentUser: this.currentUser,
+          supportsBookmarkFolders: this.bookmarkFolders
        }
      )
    }
@ -89,7 +97,10 @@ const TimelineMenu = {
      if (route === 'lists-timeline') {
        return this.$store.getters.findListTitle(this.$route.params.id)
      }
-      const i18nkey = timelineNames()[this.$route.name]
+      if (route === 'bookmark-folder') {
+        return this.$store.getters.findBookmarkFolderName(this.$route.params.id)
+      }
+      const i18nkey = timelineNames(this.bookmarkFolders)[this.$route.name]
      return i18nkey ? this.$t(i18nkey) : route
    }
  }
--- a/src/components/timeline_menu/timeline_menu.vue
+++ b/src/components/timeline_menu/timeline_menu.vue
@ -15,6 +15,10 @@
        :show-pin="false"
        class="timelines"
      />
+      <BookmarkFoldersMenuContent
+        v-else-if="useBookmarkFoldersMenu"
+        class="timelines"
+      />
      <ul v-else>
        <NavigationEntry
          v-for="item in timelinesList"
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@ -174,6 +174,8 @@
    "home_timeline": "Home timeline",
    "twkn": "Known Network",
    "bookmarks": "Bookmarks",
+    "all_bookmarks": "All bookmarks",
+    "bookmark_folders": "Bookmark folders",
    "user_search": "User Search",
    "search": "Search",
    "search_close": "Close search bar",
@ -874,6 +876,9 @@
        "component": "Component",
        "override": "Override",
        "shadow_id": "Shadow #{value}",
+        "offset": "Shadow offset",
+        "light_grid": "Use light checkerboard",
+        "name": "Name",
        "blur": "Blur",
        "spread": "Spread",
        "inset": "Inset",
@ -881,6 +886,7 @@
        "filter_hint": {
          "always_drop_shadow": "Warning, this shadow always uses {0} when browser supports it.",
          "drop_shadow_syntax": "{0} does not support {1} parameter and {2} keyword.",
+          "avatar_inset_short": "Separate inset shadow",
          "avatar_inset": "Please note that combining both inset and non-inset shadows on avatars might give unexpected results with transparent avatars.",
          "spread_zero": "Shadows with spread > 0 will appear as if it was set to zero",
          "inset_classic": "Inset shadows will be using {0}"
@ -1405,5 +1411,30 @@
  },
  "unicode_domain_indicator": {
    "tooltip": "This domain contains non-ascii characters."
+  },
+  "splash": {
+    "loading": "Loading...",
+    "theme": "Applying theme, please wait warmly...",
+    "instance": "Getting instance info...",
+    "settings": "Applying settings...",
+    "almost": "Reticulating splines...",
+    "fun_1": "Drink more water",
+    "fun_2": "Take it easy!",
+    "fun_3": "Suya...",
+    "fun_4": "My Pleroma machine is full power!",
+    "error": "Something went wrong"
+  },
+  "bookmark_folders": {
+    "select_folder": "Select bookmark folder",
+    "creating_folder": "Creating bookmark folder",
+    "editing_folder": "Editing folder {folderName}",
+    "emoji": "Emoji",
+    "name": "Folder name",
+    "new": "New Folder",
+    "create": "Create folder",
+    "delete": "Delete folder",
+    "update_folder": "Save changes",
+    "really_delete": "Do you really want to delete the folder?",
+    "error": "Error manipulating bookmark folders: {0}"
  }
 }
--- a/src/main.js
+++ b/src/main.js
@ -24,9 +24,9 @@ import pollsModule from './modules/polls.js'
 import postStatusModule from './modules/postStatus.js'
 import editStatusModule from './modules/editStatus.js'
 import statusHistoryModule from './modules/statusHistory.js'
-
 import chatsModule from './modules/chats.js'
 import announcementsModule from './modules/announcements.js'
+import bookmarkFoldersModule from './modules/bookmark_folders.js'

 import { createI18n } from 'vue-i18n'

@ -58,55 +58,76 @@ const persistedStateOptions = {
 };

 (async () => {
-  let storageError = false
-  const plugins = [pushNotifications]
+  const isFox = Math.floor(Math.random() * 2) > 0 ? '_fox' : ''
+
+  const splashError = (i18n, e) => {
+    const throbber = document.querySelector('#throbber')
+    throbber.addEventListener('animationend', () => {
+      document.querySelector('#mascot').src = `/static/pleromatan_orz${isFox}.png`
+    })
+    throbber.classList.add('dead')
+    document.querySelector('#status').textContent = i18n.global.t('splash.error')
+    console.error('PleromaFE failed to initialize: ', e)
+  }
+
  try {
-    const persistedState = await createPersistedState(persistedStateOptions)
-    plugins.push(persistedState)
-  } catch (e) {
-    console.error(e)
-    storageError = true
-  }
-  const store = createStore({
-    modules: {
-      i18n: {
-        getters: {
-          i18n: () => i18n.global
-        }
+    let storageError
+    const plugins = [pushNotifications]
+    try {
+      const persistedState = await createPersistedState(persistedStateOptions)
+      plugins.push(persistedState)
+    } catch (e) {
+      console.error('Storage error', e)
+      storageError = e
+    }
+    document.querySelector('#mascot').src = `/static/pleromatan_apology${isFox}.png`
+    document.querySelector('#status').removeAttribute('class')
+    document.querySelector('#status').textContent = i18n.global.t('splash.loading')
+    document.querySelector('#splash-credit').textContent = i18n.global.t('update.art_by', { linkToArtist: 'pipivovott' })
+    const store = createStore({
+      modules: {
+        i18n: {
+          getters: {
+            i18n: () => i18n.global
+          }
+        },
+        interface: interfaceModule,
+        instance: instanceModule,
+        // TODO refactor users/statuses modules, they depend on each other
+        users: usersModule,
+        statuses: statusesModule,
+        notifications: notificationsModule,
+        lists: listsModule,
+        api: apiModule,
+        config: configModule,
+        profileConfig: profileConfigModule,
+        serverSideStorage: serverSideStorageModule,
+        adminSettings: adminSettingsModule,
+        shout: shoutModule,
+        oauth: oauthModule,
+        authFlow: authFlowModule,
+        mediaViewer: mediaViewerModule,
+        oauthTokens: oauthTokensModule,
+        reports: reportsModule,
+        polls: pollsModule,
+        postStatus: postStatusModule,
+        editStatus: editStatusModule,
+        statusHistory: statusHistoryModule,
+        chats: chatsModule,
+        announcements: announcementsModule,
+        bookmarkFolders: bookmarkFoldersModule
      },
-      interface: interfaceModule,
-      instance: instanceModule,
-      // TODO refactor users/statuses modules, they depend on each other
-      users: usersModule,
-      statuses: statusesModule,
-      notifications: notificationsModule,
-      lists: listsModule,
-      api: apiModule,
-      config: configModule,
-      profileConfig: profileConfigModule,
-      serverSideStorage: serverSideStorageModule,
-      adminSettings: adminSettingsModule,
-      shout: shoutModule,
-      oauth: oauthModule,
-      authFlow: authFlowModule,
-      mediaViewer: mediaViewerModule,
-      oauthTokens: oauthTokensModule,
-      reports: reportsModule,
-      polls: pollsModule,
-      postStatus: postStatusModule,
-      editStatus: editStatusModule,
-      statusHistory: statusHistoryModule,
-      chats: chatsModule,
-      announcements: announcementsModule
-    },
-    plugins,
-    strict: false // Socket modifies itself, let's ignore this for now.
-    // strict: process.env.NODE_ENV !== 'production'
-  })
-  if (storageError) {
-    store.dispatch('pushGlobalNotice', { messageKey: 'errors.storage_unavailable', level: 'error' })
+      plugins,
+      strict: false // Socket modifies itself, let's ignore this for now.
+      // strict: process.env.NODE_ENV !== 'production'
+    })
+    if (storageError) {
+      store.dispatch('pushGlobalNotice', { messageKey: 'errors.storage_unavailable', level: 'error' })
+    }
+    return await afterStoreSetup({ store, i18n })
+  } catch (e) {
+    splashError(i18n, e)
  }
-  afterStoreSetup({ store, i18n })
 })()

 // These are inlined by webpack's DefinePlugin
--- a/src/modules/api.js
+++ b/src/modules/api.js
@ -203,12 +203,13 @@ const api = {
      tag = false,
      userId = false,
      listId = false,
-      statusId = false
+      statusId = false,
+      bookmarkFolderId = false
    }) {
      if (store.state.fetchers[timeline]) return

      const fetcher = store.state.backendInteractor.startFetchingTimeline({
-        timeline, store, userId, listId, statusId, tag
+        timeline, store, userId, listId, statusId, bookmarkFolderId, tag
      })
      store.commit('addFetcher', { fetcherName: timeline, fetcher })
    },
@ -272,6 +273,18 @@ const api = {
      store.commit('removeFetcher', { fetcherName: 'lists', fetcher })
    },

+    // Bookmark folders
+    startFetchingBookmarkFolders (store) {
+      if (store.state.fetchers.bookmarkFolders) return
+      const fetcher = store.state.backendInteractor.startFetchingBookmarkFolders({ store })
+      store.commit('addFetcher', { fetcherName: 'bookmarkFolders', fetcher })
+    },
+    stopFetchingBookmarkFolders (store) {
+      const fetcher = store.state.fetchers.bookmarkFolders
+      if (!fetcher) return
+      store.commit('removeFetcher', { fetcherName: 'bookmarkFolders', fetcher })
+    },
+
    // Pleroma websocket
    setWsToken (store, token) {
      store.commit('setWsToken', token)
--- a/src/modules/bookmark_folders.js
+++ b/src/modules/bookmark_folders.js
@ -0,0 +1,66 @@
+import { remove, find } from 'lodash'
+
+export const defaultState = {
+  allFolders: []
+}
+
+export const mutations = {
+  setBookmarkFolders (state, value) {
+    state.allFolders = value
+  },
+  setBookmarkFolder (state, { id, name, emoji, emoji_url: emojiUrl }) {
+    const entry = find(state.allFolders, { id })
+    if (!entry) {
+      state.allFolders.push({ id, name, emoji, emoji_url: emojiUrl })
+    } else {
+      entry.name = name
+      entry.emoji = emoji
+      entry.emoji_url = emojiUrl
+    }
+  },
+  deleteBookmarkFolder (state, { folderId }) {
+    remove(state.allFolders, folder => folder.id === folderId)
+  }
+}
+
+const actions = {
+  setBookmarkFolders ({ commit }, value) {
+    commit('setBookmarkFolders', value)
+  },
+  createBookmarkFolder ({ rootState, commit }, { name, emoji }) {
+    return rootState.api.backendInteractor.createBookmarkFolder({ name, emoji })
+      .then((folder) => {
+        commit('setBookmarkFolder', folder)
+        return folder
+      })
+  },
+  setBookmarkFolder ({ rootState, commit }, { folderId, name, emoji }) {
+    return rootState.api.backendInteractor.updateBookmarkFolder({ folderId, name, emoji })
+      .then((folder) => {
+        commit('setBookmarkFolder', folder)
+        return folder
+      })
+  },
+  deleteBookmarkFolder ({ rootState, commit }, { folderId }) {
+    rootState.api.backendInteractor.deleteBookmarkFolder({ folderId })
+    commit('deleteBookmarkFolder', { folderId })
+  }
+}
+
+export const getters = {
+  findBookmarkFolderName: state => id => {
+    const folder = state.allFolders.find(folder => folder.id === id)
+
+    if (!folder) return
+    return folder.name
+  }
+}
+
+const bookmarkFolders = {
+  state: defaultState,
+  mutations,
+  actions,
+  getters
+}
+
+export default bookmarkFolders
--- a/src/modules/instance.js
+++ b/src/modules/instance.js
@ -140,6 +140,7 @@ const defaultState = {
  shoutAvailable: false,
  pleromaChatMessagesAvailable: false,
  pleromaCustomEmojiReactionsAvailable: false,
+  pleromaBookmarkFoldersAvailable: false,
  gopherAvailable: false,
  mediaProxyAvailable: false,
  suggestionsEnabled: false,
--- a/src/modules/statuses.js
+++ b/src/modules/statuses.js
@ -385,10 +385,12 @@ export const mutations = {
  setBookmarked (state, { status, value }) {
    const newStatus = state.allStatusesObject[status.id]
    newStatus.bookmarked = value
+    newStatus.bookmark_folder_id = status.bookmark_folder_id
  },
  setBookmarkedConfirm (state, { status }) {
    const newStatus = state.allStatusesObject[status.id]
    newStatus.bookmarked = status.bookmarked
+    if (status.pleroma) newStatus.bookmark_folder_id = status.pleroma.bookmark_folder
  },
  setDeleted (state, { status }) {
    const newStatus = state.allStatusesObject[status.id]
@ -569,7 +571,7 @@ const statuses = {
    },
    bookmark ({ rootState, commit }, status) {
      commit('setBookmarked', { status, value: true })
-      rootState.api.backendInteractor.bookmarkStatus({ id: status.id })
+      rootState.api.backendInteractor.bookmarkStatus({ id: status.id, folder_id: status.bookmark_folder_id })
        .then(status => {
          commit('setBookmarkedConfirm', { status })
        })
--- a/src/modules/users.js
+++ b/src/modules/users.js
@ -579,6 +579,7 @@ const users = {
          store.commit('setBackendInteractor', backendInteractorService(store.getters.getToken()))
          store.dispatch('stopFetchingNotifications')
          store.dispatch('stopFetchingLists')
+          store.dispatch('stopFetchingBookmarkFolders')
          store.dispatch('stopFetchingFollowRequests')
          store.commit('clearNotifications')
          store.commit('resetStatuses')
@ -635,6 +636,7 @@ const users = {
              }

              dispatch('startFetchingLists')
+              dispatch('startFetchingBookmarkFolders')

              if (user.locked) {
                dispatch('startFetchingFollowRequests')
--- a/src/services/api/api.service.js
+++ b/src/services/api/api.service.js
@ -110,6 +110,8 @@ const PLEROMA_DELETE_ANNOUNCEMENT_URL = id => `/api/v1/pleroma/admin/announcemen
 const PLEROMA_SCROBBLES_URL = id => `/api/v1/pleroma/accounts/${id}/scrobbles`
 const PLEROMA_STATUS_QUOTES_URL = id => `/api/v1/pleroma/statuses/${id}/quotes`
 const PLEROMA_USER_FAVORITES_TIMELINE_URL = id => `/api/v1/pleroma/accounts/${id}/favourites`
+const PLEROMA_BOOKMARK_FOLDERS_URL = '/api/v1/pleroma/bookmark_folders'
+const PLEROMA_BOOKMARK_FOLDER_URL = id => `/api/v1/pleroma/bookmark_folders/${id}`

 const PLEROMA_ADMIN_CONFIG_URL = '/api/pleroma/admin/config'
 const PLEROMA_ADMIN_DESCRIPTIONS_URL = '/api/pleroma/admin/config/descriptions'
@ -690,7 +692,8 @@ const fetchTimeline = ({
  tag = false,
  withMuted = false,
  replyVisibility = 'all',
-  includeTypes = []
+  includeTypes = [],
+  bookmarkFolderId = false
 }) => {
  const timelineUrls = {
    public: MASTODON_PUBLIC_TIMELINE,
@ -760,6 +763,9 @@ const fetchTimeline = ({
      params.push(['include_types[]', type])
    })
  }
+  if (timeline === 'bookmarks' && bookmarkFolderId) {
+    params.push(['folder_id', bookmarkFolderId])
+  }

  params.push(['limit', 20])

@ -829,11 +835,14 @@ const unretweet = ({ id, credentials }) => {
    .then((data) => parseStatus(data))
 }

-const bookmarkStatus = ({ id, credentials }) => {
+const bookmarkStatus = ({ id, credentials, ...options }) => {
  return promisedRequest({
    url: MASTODON_BOOKMARK_STATUS_URL(id),
    headers: authHeaders(credentials),
-    method: 'POST'
+    method: 'POST',
+    payload: {
+      folder_id: options.folder_id
+    }
  })
 }

@ -1893,6 +1902,44 @@ const deleteEmojiFile = ({ packName, shortcode }) => {
  return fetch(`${PLEROMA_EMOJI_UPDATE_FILE_URL(packName)}&shortcode=${shortcode}`, { method: 'DELETE' })
 }

+const fetchBookmarkFolders = ({ credentials }) => {
+  const url = PLEROMA_BOOKMARK_FOLDERS_URL
+  return fetch(url, { headers: authHeaders(credentials) })
+    .then((data) => data.json())
+}
+
+const createBookmarkFolder = ({ name, emoji, credentials }) => {
+  const url = PLEROMA_BOOKMARK_FOLDERS_URL
+  const headers = authHeaders(credentials)
+  headers['Content-Type'] = 'application/json'
+
+  return fetch(url, {
+    headers,
+    method: 'POST',
+    body: JSON.stringify({ name, emoji })
+  }).then((data) => data.json())
+}
+
+const updateBookmarkFolder = ({ folderId, name, emoji, credentials }) => {
+  const url = PLEROMA_BOOKMARK_FOLDER_URL(folderId)
+  const headers = authHeaders(credentials)
+  headers['Content-Type'] = 'application/json'
+
+  return fetch(url, {
+    headers,
+    method: 'PATCH',
+    body: JSON.stringify({ name, emoji })
+  }).then((data) => data.json())
+}
+
+const deleteBookmarkFolder = ({ folderId, credentials }) => {
+  const url = PLEROMA_BOOKMARK_FOLDER_URL(folderId)
+  return fetch(url, {
+    method: 'DELETE',
+    headers: authHeaders(credentials)
+  })
+}
+
 const apiService = {
  verifyCredentials,
  fetchTimeline,
@ -2023,7 +2070,11 @@ const apiService = {
  updateEmojiFile,
  deleteEmojiFile,
  listRemoteEmojiPacks,
-  downloadRemoteEmojiPack
+  downloadRemoteEmojiPack,
+  fetchBookmarkFolders,
+  createBookmarkFolder,
+  updateBookmarkFolder,
+  deleteBookmarkFolder
 }

 export default apiService
--- a/src/services/backend_interactor_service/backend_interactor_service.js
+++ b/src/services/backend_interactor_service/backend_interactor_service.js
@ -3,10 +3,11 @@ import timelineFetcher from '../timeline_fetcher/timeline_fetcher.service.js'
 import notificationsFetcher from '../notifications_fetcher/notifications_fetcher.service.js'
 import followRequestFetcher from '../../services/follow_request_fetcher/follow_request_fetcher.service'
 import listsFetcher from '../../services/lists_fetcher/lists_fetcher.service.js'
+import bookmarkFoldersFetcher from '../../services/bookmark_folders_fetcher/bookmark_folders_fetcher.service.js'

 const backendInteractorService = credentials => ({
-  startFetchingTimeline ({ timeline, store, userId = false, listId = false, statusId = false, tag }) {
-    return timelineFetcher.startFetching({ timeline, store, credentials, userId, listId, statusId, tag })
+  startFetchingTimeline ({ timeline, store, userId = false, listId = false, statusId = false, bookmarkFolderId = false, tag }) {
+    return timelineFetcher.startFetching({ timeline, store, credentials, userId, listId, statusId, bookmarkFolderId, tag })
  },

  fetchTimeline (args) {
@ -29,6 +30,10 @@ const backendInteractorService = credentials => ({
    return listsFetcher.startFetching({ store, credentials })
  },

+  startFetchingBookmarkFolders ({ store }) {
+    return bookmarkFoldersFetcher.startFetching({ store, credentials })
+  },
+
  startUserSocket ({ store }) {
    const serv = store.rootState.instance.server.replace('http', 'ws')
    const url = serv + getMastodonSocketURI({ credentials, stream: 'user' })
--- a/src/services/bookmark_folders_fetcher/bookmark_folders_fetcher.service.js
+++ b/src/services/bookmark_folders_fetcher/bookmark_folders_fetcher.service.js
@ -0,0 +1,22 @@
+import apiService from '../api/api.service.js'
+import { promiseInterval } from '../promise_interval/promise_interval.js'
+
+const fetchAndUpdate = ({ store, credentials }) => {
+  return apiService.fetchBookmarkFolders({ credentials })
+    .then(bookmarkFolders => {
+      store.commit('setBookmarkFolders', bookmarkFolders)
+    }, () => {})
+    .catch(() => {})
+}
+
+const startFetching = ({ credentials, store }) => {
+  const boundFetchAndUpdate = () => fetchAndUpdate({ credentials, store })
+  boundFetchAndUpdate()
+  return promiseInterval(boundFetchAndUpdate, 240000)
+}
+
+const bookmarkFoldersFetcher = {
+  startFetching
+}
+
+export default bookmarkFoldersFetcher
--- a/src/services/entity_normalizer/entity_normalizer.service.js
+++ b/src/services/entity_normalizer/entity_normalizer.service.js
@ -332,6 +332,7 @@ export const parseStatus = (data) => {
      output.quote_url = pleroma.quote_url
      output.quote_visible = pleroma.quote_visible
      output.quotes_count = pleroma.quotes_count
+      output.bookmark_folder_id = pleroma.bookmark_folder
    } else {
      output.text = data.content
      output.summary = data.spoiler_text
--- a/src/services/style_setter/style_setter.js
+++ b/src/services/style_setter/style_setter.js
@ -43,16 +43,16 @@ const adoptStyleSheets = (styles) => {
  // is nothing to do here.
 }

-export const generateTheme = async (inputRuleset, callbacks, debug) => {
+export const generateTheme = (inputRuleset, callbacks, debug) => {
  const {
    onNewRule = (rule, isLazy) => {},
    onLazyFinished = () => {},
    onEagerFinished = () => {}
  } = callbacks

-  // Assuming that "worst case scenario background" is panel background since it's the most likely one
  const themes3 = init({
    inputRuleset,
+    // Assuming that "worst case scenario background" is panel background since it's the most likely one
    ultimateBackgroundColor: inputRuleset[0].directives['--bg'].split('|')[1].trim(),
    debug
  })
@ -146,11 +146,11 @@ export const tryLoadCache = () => {
  }
 }

-export const applyTheme = async (input, onFinish = (data) => {}, debug) => {
+export const applyTheme = (input, onFinish = (data) => {}, debug) => {
  const eagerStyles = createStyleSheet(EAGER_STYLE_ID)
  const lazyStyles = createStyleSheet(LAZY_STYLE_ID)

-  const { lazyProcessFunc } = await generateTheme(
+  const { lazyProcessFunc } = generateTheme(
    input,
    {
      onNewRule (rule, isLazy) {
@ -169,15 +169,22 @@ export const applyTheme = async (input, onFinish = (data) => {}, debug) => {
        adoptStyleSheets([eagerStyles, lazyStyles])
        const cache = { engineChecksum: getEngineChecksum(), data: [eagerStyles.rules, lazyStyles.rules] }
        onFinish(cache)
-        localStorage.setItem('pleroma-fe-theme-cache', JSON.stringify(cache))
+        try {
+          localStorage.setItem('pleroma-fe-theme-cache', JSON.stringify(cache))
+        } catch (e) {
+          localStorage.removeItem('pleroma-fe-theme-cache')
+          try {
+            localStorage.setItem('pleroma-fe-theme-cache', JSON.stringify(cache))
+          } catch (e) {
+            console.warn('cannot save cache!', e)
+          }
+        }
      }
    },
    debug
  )

  setTimeout(lazyProcessFunc, 0)
-
-  return Promise.resolve()
 }

 const extractStyleConfig = ({
@ -222,7 +229,7 @@ const extractStyleConfig = ({

 const defaultStyleConfig = extractStyleConfig(defaultState)

-export const applyConfig = (input) => {
+export const applyConfig = (input, i18n) => {
  const config = extractStyleConfig(input)

  if (config === defaultStyleConfig) {
@ -230,8 +237,6 @@ export const applyConfig = (input) => {
  }

  const head = document.head
-  const body = document.body
-  body.classList.add('hidden')

  const rules = Object
    .entries(config)
@ -252,8 +257,6 @@ export const applyConfig = (input) => {
        --roundness: var(--forcedRoundness) !important;
    }`, 'index-max')
  }
-
-  body.classList.remove('hidden')
 }

 export const getThemes = () => {
--- a/src/services/theme_data/theme_data.service.js
+++ b/src/services/theme_data/theme_data.service.js
@ -452,7 +452,7 @@ export const getCssShadow = (input, usesDropShadow) => {
    ]).join(' ')).join(', ')
 }

-const getCssShadowFilter = (input) => {
+export const getCssShadowFilter = (input) => {
  if (input.length === 0) {
    return 'none'
  }
--- a/src/services/theme_data/theme_data_3.service.js
+++ b/src/services/theme_data/theme_data_3.service.js
@ -182,7 +182,7 @@ export const init = ({

  const rulesetUnsorted = [
    ...Object.values(components)
-      .map(c => (c.defaultRules || []).map(r => ({ component: c.name, ...r, source: 'Built-in' })))
+      .map(c => (c.defaultRules || []).map(r => ({ source: 'Built-in', component: c.name, ...r })))
      .reduce((acc, arr) => [...acc, ...arr], []),
    ...inputRuleset
  ].map(rule => {
@ -198,18 +198,33 @@ export const init = ({

  const ruleset = rulesetUnsorted
    .map((data, index) => ({ data, index }))
-    .sort(({ data: a, index: ai }, { data: b, index: bi }) => {
+    .toSorted(({ data: a, index: ai }, { data: b, index: bi }) => {
      const parentsA = unroll(a).length
      const parentsB = unroll(b).length

-      if (parentsA === parentsB) {
-        if (a.component === 'Text') return -1
-        if (b.component === 'Text') return 1
+      let aScore = 0
+      let bScore = 0
+
+      aScore += parentsA * 1000
+      bScore += parentsB * 1000
+
+      aScore += a.variant !== 'normal' ? 100 : 0
+      bScore += b.variant !== 'normal' ? 100 : 0
+
+      aScore += a.state.filter(x => x !== 'normal').length * 1000
+      bScore += b.state.filter(x => x !== 'normal').length * 1000
+
+      aScore += a.component === 'Text' ? 1 : 0
+      bScore += b.component === 'Text' ? 1 : 0
+
+      // Debug
+      a.specifityScore = aScore
+      b.specifityScore = bScore
+
+      if (aScore === bScore) {
        return ai - bi
      }
-      if (parentsA === 0 && parentsB !== 0) return -1
-      if (parentsB === 0 && parentsA !== 0) return 1
-      return parentsA - parentsB
+      return aScore - bScore
    })
    .map(({ data }) => data)

@ -235,7 +250,10 @@ export const init = ({

    // Inheriting all of the applicable rules
    const existingRules = ruleset.filter(findRules(combination))
-    const computedDirectives = existingRules.map(r => r.directives).reduce((acc, directives) => ({ ...acc, ...directives }), {})
+    const computedDirectives =
+          existingRules
+            .map(r => r.directives)
+            .reduce((acc, directives) => ({ ...acc, ...directives }), {})
    const computedRule = {
      ...combination,
      directives: computedDirectives
--- a/src/services/timeline_fetcher/timeline_fetcher.service.js
+++ b/src/services/timeline_fetcher/timeline_fetcher.service.js
@ -25,6 +25,7 @@ const fetchAndUpdate = ({
  userId = false,
  listId = false,
  statusId = false,
+  bookmarkFolderId = false,
  tag = false,
  until,
  since
@ -49,6 +50,7 @@ const fetchAndUpdate = ({
  args.userId = userId
  args.listId = listId
  args.statusId = statusId
+  args.bookmarkFolderId = bookmarkFolderId
  args.tag = tag
  args.withMuted = !hideMutedPosts
  if (loggedIn && ['friends', 'public', 'publicAndExternal'].includes(timeline)) {
@ -80,15 +82,16 @@ const fetchAndUpdate = ({
    })
 }

-const startFetching = ({ timeline = 'friends', credentials, store, userId = false, listId = false, statusId = false, tag = false }) => {
+const startFetching = ({ timeline = 'friends', credentials, store, userId = false, listId = false, statusId = false, bookmarkFolderId = false, tag = false }) => {
  const rootState = store.rootState || store.state
  const timelineData = rootState.statuses.timelines[camelCase(timeline)]
  const showImmediately = timelineData.visibleStatuses.length === 0
  timelineData.userId = userId
  timelineData.listId = listId
-  fetchAndUpdate({ timeline, credentials, store, showImmediately, userId, listId, statusId, tag })
+  timelineData.bookmarkFolderId = bookmarkFolderId
+  fetchAndUpdate({ timeline, credentials, store, showImmediately, userId, listId, statusId, bookmarkFolderId, tag })
  const boundFetchAndUpdate = () =>
-    fetchAndUpdate({ timeline, credentials, store, userId, listId, statusId, tag })
+    fetchAndUpdate({ timeline, credentials, store, userId, listId, statusId, bookmarkFolderId, tag })
  return promiseInterval(boundFetchAndUpdate, 10000)
 }
 const timelineFetcher = {
--- a/static/pleromatan_apology.png
+++ b/static/pleromatan_apology.png
--- a/static/pleromatan_apology_fox.png
+++ b/static/pleromatan_apology_fox.png
--- a/static/pleromatan_orz.png
+++ b/static/pleromatan_orz.png
--- a/static/pleromatan_orz_fox.png
+++ b/static/pleromatan_orz_fox.png
				`@ -0,0 +1 @@`
				`Updated shadow editor, hopefully fixed long-standing bugs, added ability to specify shadow's name.`
				`@ -0,0 +1 @@`
				`Splash screen + loading indicator to make process of identifying initialization issues and load performance`