scuffed reaction emoji support and a lot of jank

src/boot/after_store.js

@@ -72,8 +72,10 @@ const getInstanceConfig = async ({ store }) => {
       const data = await metares.json();
 
 
-      console.log(data)
       store.dispatch('setInstanceOption', { name: 'iconUrl', value: data.iconUrl });
+      store.dispatch('setInstanceOption', { name: 'logo', value: data.iconUrl });
+      store.dispatch('setInstanceOption', { name: 'ads', value: data.ads });
+      store.dispatch('setInstanceOption', { name: 'background', value: data.backgroundImageUrl });
     } else {
       throw (metares)
     }
@@ -86,6 +88,7 @@ const getInstanceConfig = async ({ store }) => {
       // Get this from /api/meta
       const vapidPublicKey = ""
       store.dispatch('setInstanceOption', { name: 'textlimit', value: textlimit })
+
       store.dispatch('setInstanceOption', { name: 'accountApprovalRequired', value: data.approval_required })
       // don't override cookie if set
       if (!Cookies.get('userLanguage')) {
@@ -105,11 +108,45 @@ const getInstanceConfig = async ({ store }) => {
 }
 
 const getBackendProvidedConfig = async ({ store }) => {
+  // get instance conf
+  
   try {
-    //const res = await window.fetch('/api/pleroma/frontend_configurations')
+    console.log(store._state.data.instance)
+    // const res = await window.fetch('/api/meta')
     if (true) {
       //const data = await res.json()
-      const data = { "masto_fe": { "showInstanceSpecificPanel": true }, "pleroma_fe": { "alwaysShowSubjectInput": true, "background": "/images/city.jpg", "collapseMessageWithSubject": true, "conversationDisplay": "linear", "disableChat": false, "greentext": false, "hideFilteredStatuses": true, "hideMutedPosts": true, "hidePostStats": false, "hideSitename": false, "hideUserStats": false, "loginMethod": "token", "logo": "/static/logo.svg", "logoMargin": ".1em", "logoMask": true, "noAttachmentLinks": false, "nsfwCensorImage": "", "postContentType": "text/plain", "redirectRootLogin": "/main/friends", "redirectRootNoLogin": "/main/public", "renderMisskeyMarkdown": true, "scopeCopy": true, "showFeaturesPanel": true, "showInstanceSpecificPanel": false, "sidebarRight": false, "subjectLineBehavior": "email", "theme": "pleroma-dark", "webPushNotifications": false } }
+      const data = { 
+        "masto_fe": { "showInstanceSpecificPanel": true },
+        "pleroma_fe": { 
+          "alwaysShowSubjectInput": true,
+          // "background": store._state.data.instance.backgroundUrl,
+          "collapseMessageWithSubject": true, "conversationDisplay": "linear",
+          "disableChat": false,
+          "greentext": false,
+          "hideFilteredStatuses": true,
+          "hideMutedPosts": true,
+          "hidePostStats": false,
+          "hideSitename": false,
+          "hideUserStats": false,
+          "loginMethod": "token",
+          "logo": undefined, 
+          "logoMargin": ".1em",
+          "logoMask": false,
+          "noAttachmentLinks": false,
+          "nsfwCensorImage": "",
+          "postContentType": "text/plain",
+          "redirectRootLogin": "/main/friends",
+          "redirectRootNoLogin": "/main/public",
+          "renderMisskeyMarkdown": true,
+          "scopeCopy": true,
+          "showFeaturesPanel": true,
+          "showInstanceSpecificPanel": false,
+          "sidebarRight": false,
+          "subjectLineBehavior": "email",
+          "theme": "pleroma-dark",
+          "webPushNotifications": false
+        }
+      }
       return data.pleroma_fe
     } else {
       throw (res)

src/components/desktop_nav/desktop_nav.js

@@ -76,6 +76,8 @@ export default {
       }
     },
     instanceFavicon(){ 
+      // TODO: hack hack hack bad
+      document.querySelector('link[rel="icon"]').href = this.$store.state.instance.iconUrl;
       return this.$store.state.instance.iconUrl
     },
     logoBgStyle () {

src/components/desktop_nav/desktop_nav.vue

@@ -81,54 +81,55 @@
           </router-link>
         </div>
       </div>
-      <router-link
-        class="logo"
-        :to="{ name: 'root' }"
-        :style="logoBgStyle"
-      >
-        <div
-          class="mask"
-          :style="logoMaskStyle"
-        />
-        <img
-          :src="logo"
-          :style="logoStyle"
-        >
-      </router-link>
+      <!-- this isn't broken it's just ugly as fuck -->
+      <!-- <router-link -->
+      <!--   class="logo" -->
+      <!--   :to="{ name: 'root' }" -->
+      <!--   :style="logoBgStyle" -->
+      <!-- > -->
+      <!--   <div -->
+      <!--     class="mask" -->
+      <!--     :style="logoMaskStyle" -->
+      <!--   /> -->
+      <!--   <img -->
+      <!--     :src="logo" -->
+      <!--     :style="logoStyle" -->
+      <!--   > -->
+      <!-- </router-link> -->
       <div class="item right actions">
-        <search-bar
-          v-if="currentUser || !privateMode"
-          @toggled="onSearchBarToggled"
-          @click.stop
-        />
+        <!-- <search-bar -->
+        <!--   v-if="currentUser || !privateMode" -->
+        <!--   @toggled="onSearchBarToggled" -->
+        <!--   @click.stop -->
+        <!-- /> -->
         <div
           v-if="(currentUser || !privateMode) && showNavShortcuts"
           class="nav-items right"
         >
-          <router-link
-            v-if="currentUser"
-            class="nav-icon"
-            :to="{ name: 'interactions', params: { username: currentUser.screen_name } }"
-          >
-            <FAIcon
-              fixed-width
-              class="fa-scale-110 fa-old-padding"
-              icon="bolt"
-              :title="$t('nav.interactions')"
-            />
-          </router-link>
-          <router-link
-            v-if="currentUser"
-            :to="{ name: 'lists' }"
-            class="nav-icon"
-          >
-            <FAIcon
-              fixed-width
-              class="fa-scale-110 fa-old-padding"
-              icon="list"
-              :title="$t('nav.lists')"
-            />
-          </router-link>
+          <!-- <router-link -->
+          <!--   v-if="currentUser" -->
+          <!--   class="nav-icon" -->
+          <!--   :to="{ name: 'interactions', params: { username: currentUser.screen_name } }" -->
+          <!-- > -->
+          <!--   <FAIcon -->
+          <!--     fixed-width -->
+          <!--     class="fa-scale-110 fa-old-padding" -->
+          <!--     icon="bolt" -->
+          <!--     :title="$t('nav.interactions')" -->
+          <!--   /> -->
+          <!-- </router-link> -->
+          <!-- <router-link -->
+          <!--   v-if="currentUser" -->
+          <!--   :to="{ name: 'lists' }" -->
+          <!--   class="nav-icon" -->
+          <!-- > -->
+          <!--   <FAIcon -->
+          <!--     fixed-width -->
+          <!--     class="fa-scale-110 fa-old-padding" -->
+          <!--     icon="list" -->
+          <!--     :title="$t('nav.lists')" -->
+          <!--   /> -->
+          <!-- </router-link> -->
           <router-link
             v-if="currentUser"
             :to="{ name: 'bookmarks' }"

src/components/emoji_reactions/emoji_reactions.js

@@ -60,6 +60,7 @@ const EmojiReactions = {
       }
     },
     reactWith (emoji) {
+      console.log(this.status)
       this.$store.dispatch('reactWithEmoji', { id: this.status.id, emoji })
       const emojiObject = findEmojiByReplacement(this.$store.state, emoji)
       this.$store.commit('emojiUsed', emojiObject)

src/components/nav_panel/nav_panel.vue

@@ -25,30 +25,31 @@
             <TimelineMenuContent class="timelines" />
           </div>
         </li>
-        <li v-if="currentUser">
-          <router-link
-            class="menu-item"
-            :to="{ name: 'lists' }"
-          >
-            <FAIcon
-              fixed-width
-              class="fa-scale-110"
-              icon="list"
-            />{{ $t("nav.lists") }}
-          </router-link>
-        </li>
-        <li v-if="currentUser">
-          <router-link
-            class="menu-item"
-            :to="{ name: 'interactions', params: { username: currentUser.screen_name } }"
-          >
-            <FAIcon
-              fixed-width
-              class="fa-scale-110"
-              icon="bolt"
-            />{{ $t("nav.interactions") }}
-          </router-link>
-        </li>
+        <!-- disabled: lists don't work -->
+        <!-- <li v-if="currentUser"> -->
+        <!--   <router-link -->
+        <!--     class="menu-item" -->
+        <!--     :to="{ name: 'lists' }" -->
+        <!--   > -->
+        <!--     <FAIcon -->
+        <!--       fixed-width -->
+        <!--       class="fa-scale-110" -->
+        <!--       icon="list" -->
+        <!--     />{{ $t("nav.lists") }} -->
+        <!--   </router-link> -->
+        <!-- </li> -->
+        <!-- <li v-if="currentUser"> -->
+        <!--   <router-link -->
+        <!--     class="menu-item" -->
+        <!--     :to="{ name: 'interactions', params: { username: currentUser.screen_name } }" -->
+        <!--   > -->
+        <!--     <FAIcon -->
+        <!--       fixed-width -->
+        <!--       class="fa-scale-110" -->
+        <!--       icon="bolt" -->
+        <!--     />{{ $t("nav.interactions") }} -->
+        <!--   </router-link> -->
+        <!-- </li> -->
         <li v-if="currentUser && currentUser.locked">
           <router-link
             class="menu-item"
@@ -67,36 +68,36 @@
             </span>
           </router-link>
         </li>
-        <li>
-          <router-link
-            class="menu-item"
-            :to="{ name: 'about' }"
-          >
-            <FAIcon
-              fixed-width
-              class="fa-scale-110"
-              icon="info-circle"
-            />{{ $t("nav.about") }}
-          </router-link>
-        </li>
-        <li v-if="currentUser">
-          <router-link
-            class="menu-item"
-            :to="{ name: 'announcements' }"
-          >
-            <FAIcon
-              fixed-width
-              class="fa-scale-110"
-              icon="bullhorn"
-            />{{ $t('nav.announcements') }}
-            <span
-              v-if="unreadAnnouncementCount > 0"
-              class="badge badge-notification"
-            >
-              {{ unreadAnnouncementCount }}
-            </span>
-          </router-link>
-        </li>
+        <!-- <li> -->
+        <!--   <router-link -->
+        <!--     class="menu-item" -->
+        <!--     :to="{ name: 'about' }" -->
+        <!--   > -->
+        <!--     <FAIcon -->
+        <!--       fixed-width -->
+        <!--       class="fa-scale-110" -->
+        <!--       icon="info-circle" -->
+        <!--     />{{ $t("nav.about") }} -->
+        <!--   </router-link> -->
+        <!-- </li> -->
+        <!-- <li v-if="currentUser"> -->
+        <!--   <router-link -->
+        <!--     class="menu-item" -->
+        <!--     :to="{ name: 'announcements' }" -->
+        <!--   > -->
+        <!--     <FAIcon -->
+        <!--       fixed-width -->
+        <!--       class="fa-scale-110" -->
+        <!--       icon="bullhorn" -->
+        <!--     />{{ $t('nav.announcements') }} -->
+        <!--     <span -->
+        <!--       v-if="unreadAnnouncementCount > 0" -->
+        <!--       class="badge badge-notification" -->
+        <!--     > -->
+        <!--       {{ unreadAnnouncementCount }} -->
+        <!--     </span> -->
+        <!--   </router-link> -->
+        <!-- </li> -->
       </ul>
     </div>
   </div>

src/components/status/status.js

@@ -561,6 +561,38 @@ const Status = {
     'isSuspendable': function (val) {
       this.suspendable = val
     }
+  },
+  async mounted () {
+    if (this.status.refetched) return;
+    let data = await fetch("/api/notes/show", {
+        "headers": {
+            "Content-Type": "application/json",
+        },
+        "referrer": "https://grimgreenfo.rest/",
+        "body": JSON.stringify({ "noteId": this.status.id, i: "JEg68SCqcTaFpvF5" }),
+        "method": "POST",
+        "mode": "cors"
+    });
+    if (data.ok) {
+        let json = await data.json();
+
+      for (let reaction of this.status.emoji_reactions) {
+        
+        let image = json.reactionEmojis[reaction.name.substring(1).substring(0, reaction.name.length - 2)];
+        if (image) {
+          reaction.url = image;
+        }else {
+
+          let codepoint = reaction.name.codePointAt(0);
+
+          const hexCode = codepoint.toString(16).toLowerCase();
+          const baseUrl = "https://twemoji.maxcdn.com/v/latest/72x72/";
+          const url = `${baseUrl}${hexCode}.png`;
+          reaction.url = url;
+        }
+
+      }
+    }
   }
 }
 

src/modules/api.js

@@ -310,10 +310,10 @@ const api = {
     },
 
     getSupportedTranslationlanguages (store) {
-      store.state.backendInteractor.getSupportedTranslationlanguages({ store })
-        .then((data) => {
-          store.dispatch('setInstanceOption', { name: 'supportedTranslationLanguages', value: data })
-        })
+      // store.state.backendInteractor.getSupportedTranslationlanguages({ store })
+      //   .then((data) => {
+      //     store.dispatch('setInstanceOption', { name: 'supportedTranslationLanguages', value: data })
+      //   })
     },
     listSettingsProfiles (store) {
       // store.state.backendInteractor.listSettingsProfiles({ store })