rework sticker picker for emoji pickerinator 5000 (#111)

Reviewed-on: AkkomaGang/pleroma-fe#111

config/index.js

@@ -61,7 +61,17 @@ module.exports = {
         target,
         changeOrigin: true,
         cookieDomainRewrite: 'localhost'
-      }
+      },
+      '/static/stickers.json': {
+        target,
+        changeOrigin: true,
+        cookieDomainRewrite: 'localhost'
+      },
+      '/static/stickers': {
+        target,
+        changeOrigin: true,
+        cookieDomainRewrite: 'localhost'
+      },
     },
     // CSS Sourcemaps off by default because relative paths are "buggy"
     // with this option, according to the CSS-Loader README

src/components/emoji_picker/emoji_picker.js

@@ -215,7 +215,7 @@ const EmojiPicker = {
       }
     },
     stickerPickerEnabled () {
-      return (this.$store.state.instance.stickers || []).length !== 0
+      return (this.$store.state.instance.stickers || []).length !== 0 && this.enableStickerPicker
     }
   }
 }

src/components/emoji_picker/emoji_picker.scss

@@ -72,7 +72,7 @@
     width: 100%;
 
     white-space: nowrap;
-    
+
     &-item {
       vertical-align: top;
       display: inline-flex;
@@ -106,6 +106,9 @@
           color: var(--lightText, $fallback--lightText);
         }
       }
+      .fa-sticky-note {
+        font-size: 2em;
+      }
     }
   }
 

src/components/emoji_picker/emoji_picker.vue

@@ -19,13 +19,9 @@
             :src="group.first.imageUrl"
           >
         </span>
-      </span>
-      <span
-        v-if="stickerPickerEnabled"
-        class="additional-tabs"
-      >
         <span
-          class="stickers-tab-icon additional-tabs-item"
+          v-if="stickerPickerEnabled"
+          class="stickers-tab-icon emoji-tabs-item"
           :class="{active: showingStickers}"
           :title="$t('emoji.stickers')"
           @click.prevent="toggleStickers"

src/components/sticker_picker/sticker_picker.vue

@@ -36,6 +36,22 @@
 
 .sticker-picker {
   width: 100%;
+  display: flex;
+  flex-direction: column;
+  position: absolute;
+  right: 0;
+  left: 0;
+  margin: 0 !important;
+  background-color: $fallback--bg;
+  background-color: var(--popover, $fallback--bg);
+  color: $fallback--link;
+  color: var(--popoverText, $fallback--link);
+  --lightText: var(--popoverLightText, $fallback--faint);
+  --faint: var(--popoverFaintText, $fallback--faint);
+  --faintLink: var(--popoverFaintLink, $fallback--faint);
+  --lightText: var(--popoverLightText, $fallback--lightText);
+  --icon: var(--popoverIcon, $fallback--icon);
+
   .contents {
     min-height: 250px;
     .sticker-picker-content {