Improving matches management screen (which is made from scratch)

* Now the items link to it's account view screen
* Implemented loading of follow requests (which are match requests)
* Improved UI on account items (/matches page)

src/routes/_pages/matches/index.html

@@ -1,11 +1,11 @@
-<div id="tpl-follow" class="account">
+<div id="tpl-follow" class="account" style="display: none">
   <div class="account__wrapper">
     <div class="account__avatar-wrapper">
       <div class="account__avatar">
         <img alt="Avatar" src="[userAvatar]" />
       </div>
     </div>
-    <a target="_blank" href="[originalAccountUrl]" title="[userHandle]" to="/accounts/[userID]" class="permalink account__display-name">
+    <a href="/accounts/[userID]" title="[userHandle]" class="permalink account__display-name">
       <span class="display-name">
         <bdi><strong class="display-name__html">[displayName]</strong></bdi><br>
         <span class="display-name__account">[userHandle]</span>

src/scss/themes/ozark.scss

@@ -504,17 +504,30 @@ div.main-content.meet, div.main-content.account {
 div.main-content.matches {
 
   div.account {
+    margin: 1em 0;
 
     div.account__wrapper {
       display: flex;
 
       div.account__avatar > img {
-        width: 6em;
+        width: 4em;
-        height: 6em;
+        height: 4em;
       }
       a.account__display-name {
+        display: flex;
         width: 100%;
+        max-width: 10em;
         padding-left: 1em;
+        span.display-name {
+          margin: auto 0;
+        }
+      }
+      div.account__relationship {
+        width: 100%;
+        button {
+          position: absolute;
+          right: 0;
+        }
       }
     }
 

static/fedilove-no-react.js

@@ -250,7 +250,7 @@ var fediloveUI = {
             if (countMax > 100) {
                 return clearInterval(_this);
             }
-            const items = window.fediloveFunctions.filterItemsForFedilove(window.__store.get().timelineItemSummaries);
+            const items = fediloveFunctions.filterItemsForFedilove(window.__store.get().timelineItemSummaries);
             if (items !== null && items.length > 0) {
                 var refIds = [];
                 for (var it of items) {
@@ -391,14 +391,29 @@ var fediloveApi = {
         if (localStorage.store_currentInstance === undefined)
             return undefined;
         return JSON.parse(localStorage.store_currentInstance);
+    },
+    getFedilovedName: function(nameTxt, emojis) {
+        emojis = emojis || undefined;
+        nameTxt = nameTxt.replace(/#fedilove/gi, '').trim();
+        nameTxt = nameTxt.replace(/\s+/g, ' ').trim().replace(/\s/g, ' ');
+        if (emojis === undefined || fediloveFunctions.emojifyText === undefined)
+            return nameTxt;
+        return fediloveFunctions.emojifyText(nameTxt, emojis);
     }
 };
 var fediloveFunctions = {
     filterItemsForFedilove: function(items) {
+        if (typeof items == "string")
+            items = JSON.parse(items);
         if (items === null || items === undefined)
             return null;
         let newItems = [];
         for (var item of items) {
+            if (item.display_name !== undefined) {
+                if (item.id != window.fediloveData.myAccountId)
+                    newItems.push(item);
+                continue;
+            }
             if (item.account === undefined) {
               if (item.accountId !== undefined &&
                 item.accountId !== window.fediloveData.myAccountId)
@@ -429,7 +444,8 @@ var fediloveData = {
     toastTime: undefined,
     toastClass: undefined,
     toastInitialized: false,
-    pagesLoaded: {}
+    pagesLoaded: {},
+    tpls: {}
 };
 var fediloveEvents = {
     onGotEmojifyTextFunction: function() {
@@ -448,9 +464,8 @@ var fediloveEvents = {
                     return;
                 }
                 if (fediloveData.gotEmojifyTextFunction) {
-                    dname = dname.replace(/#fedilove/gi, '').trim();
+                    fediloveUI.paintChatAvatarAndName(accid, acct, avatar,
-                    dname = dname.replace(/\s+/g, ' ').trim().replace(/\s/g, ' ');
+                        fediloveApi.getFedilovedName(dname, emojis));
-                    fediloveUI.paintChatAvatarAndName(accid, acct, avatar, fediloveFunctions.emojifyText(dname, emojis));
                     clearInterval(_this);
                 }
                 count++;
@@ -677,7 +692,39 @@ function fedilove_customization() {
     }
     else if (window.location.pathname == '/matches') {
         $('div.main-content').addClass('matches');
-        console.log('matches');
+        if ($('#tpl-follow').length > 0 && 
+            fediloveData.tpls.accountMatches === undefined) {
+            var elem = $('#tpl-follow').clone();
+            elem[0].removeAttribute('id');
+            elem[0].removeAttribute('style');
+            fediloveData.tpls.accountMatches = elem[0].outerHTML;
+        }
+        var filledOnce = false;
+        const _fillAccountMatches = function(accounts) {
+            if (!filledOnce) {
+                $('#manage-matches').html('');
+                filledOnce = true;
+            }
+            for (var account of accounts) {
+                var acct = account.acct;
+                if (acct.charAt(0) !== '@')
+                    acct = `@${acct}`;
+                if (acct.split('@').length-1 ===  1)
+                    acct += `@${fediloveApi.getCurrentInstance()}`;
+                const dname = fediloveApi.getFedilovedName(account.display_name, account.emojis);
+                var htm = fediloveData.tpls.accountMatches;
+                htm = htm.replace(/\[userID\]/g,		account.id);
+                htm = htm.replace(/\[userAvatar\]/g,		account.avatar);
+                htm = htm.replace(/\[originalAccountUrl\]/g,	account.url);
+                htm = htm.replace(/\[userHandle\]/g,		acct);
+                htm = htm.replace(/\[displayName\]/g,		dname);
+                $('#manage-matches').append(htm);
+            }
+        };
+        fediloveMastodon.API.getRequestsToFollowMe(function(data) {
+            const items = fediloveFunctions.filterItemsForFedilove(data);
+            _fillAccountMatches(items);
+        });
     }
     else if (window.location.pathname == '/direct') {
         $('div.main-content').addClass('direct');