Improved user experience when "Matching" accounts + internal improvements

* toasts now support custom time and optional renderHtml
 for cases we need to draw HTML from the intl.text.
 (Make sure no user input is on any intl.text used with renderHtml, as it is not XSS safe)
* Toast needs to be initialized so we made an ugly hack to do so. We push the script to create an empty non-visible Toast on WebApp load
* Now _layout.html loads intl messages needed for fedilove-no-react
* UI improvement: Matching now shows a beautiful "Match <3" circle on top of the other person for 6 seconds
* Stability improved

src/intl/en-US.js

@@ -62,6 +62,8 @@ export default {
   meet: 'Meet!',
   notifications: 'Notifications',
   matches: 'Matches',
+  matchAction: 'MATCH ♥',
+  maybeAction: 'Maybe tomorrow!',
   mutedUsers: 'Muted users',
   pinnedStatuses: 'Pinned toots',
   followRequests: 'Follow requests',

src/routes/_components/toast/Toast.html

@@ -1,6 +1,7 @@
 <div class="toast-modal {shown ? 'shown' : ''}" role="alert" aria-hidden={!shown}>
   <div class="toast-container">
-    {text}
+    <span id="plain-text">{text}</span>
+    <div id="html-text"></div>
   </div>
 </div>
 <style>
@@ -78,7 +79,17 @@
             shown: true
           })
           return new Promise(resolve => {
-            setTimeout(resolve, TIME_TO_SHOW_TOAST)
+            var timeToWait = TIME_TO_SHOW_TOAST;
+            $('#theToast')[0].classList = '';
+            if (window.fediloveData.toastTime !== undefined) {
+                timeToWait = window.fediloveData.toastTime;
+                window.fediloveData.toastTime = undefined;
+            }
+            if (window.fediloveData.toastClass !== undefined) {
+                $('#theToast').addClass(window.fediloveData.toastClass);
+                window.fediloveData.toastClass = undefined;
+            }
+            setTimeout(resolve, timeToWait);
           })
         }).then(() => {
           this.set({

src/routes/_components/toast/toast.js

@@ -10,9 +10,6 @@ const lazyToast = {
         toast = new Toast({
           target: document.querySelector('#theToast')
         })
-        if (process.env.NODE_ENV !== 'production') {
-          window.toast = toast // for debugging
-        }
       }
     }
     toast.say(text)

src/routes/_layout.html

@@ -105,6 +105,8 @@
 
       window.__intl = {
         'nothingToShow':	formatIntl('intl.nothingToShow'),
+        'matchAction':		formatIntl('intl.matchAction'),
+        'maybeAction':		formatIntl('intl.maybeAction'),
       };
 
       loadScript('/jquery-3.5.1.min.js');

src/scss/themes/ozark.scss

@@ -327,6 +327,24 @@ body.meet, body.account {
 
 }
 
+div#theToast.notshown {
+  display: none !important;
+}
+
+div#theToast.match {
+  div.toast-modal > div.toast-container {
+    position: fixed;
+    top: 40%;
+    font-weight: bold;
+    background-image: linear-gradient(#b448ff, #ea790080);
+    color: #fff;
+    padding: 3em 1.5em;
+    border-radius: 100%;
+    font-size: 2.2em;
+    text-shadow: 2px 2px 20px #00000070;
+  }
+}
+
 div#chat-party-global {
   display: flex;
   height: 3.6em;

static/fedilove-no-react.js

@@ -269,8 +269,19 @@ var fediloveUI = {
             countMax++;
         }, 100);
     },
-    toast: function(whatToSay) {
-        if (window.__toast !== undefined)
+    toast: function(whatToSay, time, className, renderHtml) {
+        if (!fediloveData.toastInitialized) return;
+        if (time !== undefined)
+            window.fediloveData.toastTime = time;
+        if (className !== undefined)
+            window.fediloveData.toastClass = className;
+        if (renderHtml) {
+            $('#theToast #plain-text')[0].style = 'display: none';
+            $('#theToast #html-text').html(whatToSay);
+        } else {
+            $('#theToast #plain-text')[0].style = '';
+            $('#theToast #html-text').html('');
+        }
         window.__toast.say(whatToSay);
     },
     animateMainContentSwipe: function(animName, cback) {
@@ -291,9 +302,9 @@ var fediloveUI = {
         if (accObj === undefined) return;
         if (fediloveData.meetRelationships[accObj.id] !== undefined)
             fediloveData.meetRelationships[accObj.id] = { 'id': accObj.id, 'requested': true }
-        fediloveMastodon.API.matchAccount(accObj.id, function() {
-            fediloveUI.animateMainContentSwipe('yepMeet', function() { window.history.back() });
-        });
+
+        fediloveUI.toast(window.__intl.matchAction, 6000, 'match', true);
+        fediloveMastodon.API.matchAccount(accObj.id, function() { });
     },
     onAccountMaybe: function() {
         const accObj = fediloveApi.getMeetAccount();
@@ -306,6 +317,7 @@ var fediloveUI = {
         accounts[accObj.id] = Date.now() + expire;
         window.localStorage.store_maybeAccounts = JSON.stringify(accounts);
 
+        fediloveUI.toast(window.__intl.maybeAction, 2000);
         fediloveUI.animateMainContentSwipe('acceptMeet', function() { window.history.back() });
     }
 };
@@ -398,6 +410,9 @@ var fediloveData = {
     meetRelationshipsFilled: false,
     gotEmojifyTextFunction: false,
     composeTxtKeypressEvent: false,
+    toastTime: undefined,
+    toastClass: undefined,
+    toastInitialized: false,
     pagesLoaded: {}
 };
 var fediloveEvents = {
@@ -481,9 +496,29 @@ function fedilove_customization() {
     if (fediloveData.myAccountId === undefined && window.__store.get().verifyCredentials !== undefined) {
         var aCountMax = 0;
         const _a = setInterval(function() {
+            if (aCountMax > 20)
+                return clearInterval(_a);
             const theData = window.__store.get().verifyCredentials[fediloveApi.getCurrentInstance()];
-            if (aCountMax > 20 || theData !== null)
-                fediloveData.myAccountId = theData !== null ? theData.id : undefined;
+            if (theData) {
+                fediloveData.myAccountId = theData ? theData.id : undefined;
+                return clearInterval(_a);
+            }
+            aCountMax++;
+        }, 500);
+    }
+
+    if (!fediloveData.toastInitialized) {
+        var aCountMax = 0;
+        const _a = setInterval(function() {
+            if (aCountMax > 20)
+                return clearInterval(_a);
+            if (window.__toast) {
+                window.fediloveData.toastClass = 'notshown';
+                window.fediloveData.toastTime = 10;
+                window.__toast.say('...');
+                fediloveData.toastInitialized = true;
+                return clearInterval(_a);
+            }
             aCountMax++;
         }, 500);
     }