Remove twemoji dependency.

Support re-connecting after going / starting offline.

src/components/common/Emoji.tsx

@@ -1,22 +1,43 @@
-import twemoji from 'twemoji';
+import { EmojiPacks } from '../../redux/reducers/settings';
 
 var EMOJI_PACK = 'mutant';
 const REVISION = 3;
 
-/*export function setEmojiPack(pack: EmojiPacks) {
+export function setEmojiPack(pack: EmojiPacks) {
     EMOJI_PACK = pack;
-}*/
+}
+
+// Originally taken from Twemoji source code,
+// re-written by bree to be more readable.
+function codePoints(rune: string) {
+    const pairs = [];
+    let low = 0;
+    let i = 0;
+    
+    while (i < rune.length) {
+        const charCode = rune.charCodeAt(i++);
+        if (low) {
+            pairs.push(0x10000 + ((low - 0xd800) << 10) + (charCode - 0xdc00));
+            low = 0;
+        } else if (0xd800 <= charCode && charCode <= 0xdbff) {
+            low = charCode;
+        } else {
+            pairs.push(charCode);
+        }
+    }
+    
+    return pairs;
+}
 
 // Taken from Twemoji source code.
 // scripts/build.js#344
 // grabTheRightIcon(rawText);
 const UFE0Fg = /\uFE0F/g;
 const U200D = String.fromCharCode(0x200D);
-function toCodePoint(emoji: string) {
-    return twemoji.convert.toCodePoint(emoji.indexOf(U200D) < 0 ?
-        emoji.replace(UFE0Fg, '') :
-        emoji
-    );
+function toCodePoint(rune: string) {
+    return codePoints(rune.indexOf(U200D) < 0 ? rune.replace(UFE0Fg, '') : rune)
+        .map((val) => val.toString(16))
+        .join("-")
 }
 
 function parseEmoji(emoji: string) {

src/components/common/messaging/embed/Embed.tsx

@@ -52,23 +52,6 @@ export default function Embed({ embed }: Props) {
 
     switch (embed.type) {
         case 'Website': {
-            // ! FIXME: move this to january
-            /*if (embed.url && YOUTUBE_RE.test(embed.url)) {
-                embed.color = '#FF424F';
-            }
-
-            if (embed.url && TWITCH_RE.test(embed.url)) {
-                embed.color = '#7B68EE';
-            }
-
-            if (embed.url && SPOTIFY_RE.test(embed.url)) {
-                embed.color = '#1ABC9C';
-            }
-
-            if (embed.url && SOUNDCLOUD_RE.test(embed.url)) {
-                embed.color = '#FF7F50';
-            }*/
-
             // Determine special embed size.
             let mw, mh;
             let largeMedia = (embed.special && embed.special.type !== 'None') || embed.image?.size === 'Large';

src/components/navigation/items/Item.module.scss

@@ -145,159 +145,3 @@
         background: var(--error);
     }
 }
-
-/* ! FIXME: check if anything is missing, then remove this block
-.olditem {
-    display: flex;
-    user-select: none;
-    align-items: center;
-    flex-direction: row;
-
-    gap: 8px;
-    height: 48px;
-    padding: 0 8px;
-    cursor: pointer;
-    font-size: 16px;
-    border-radius: 6px;
-    box-sizing: content-box;
-    transition: .1s ease background-color;
-
-    color: var(--tertiary-foreground);
-    stroke: var(--tertiary-foreground);
-
-    .avatar {
-        flex-shrink: 0;
-        height: 32px;
-        flex-shrink: 0;
-        padding: 10px 0;
-        box-sizing: content-box;
-
-        img {
-            width: 32px;
-            height: 32px;
-            border-radius: 50%;
-        }
-    }
-
-    div {
-        overflow: hidden;
-        white-space: nowrap;
-        text-overflow: ellipsis;
-        transition: color .1s ease-in-out;
-
-        &.content {
-            gap: 8px;
-            flex-grow: 1;
-            min-width: 0;
-            display: flex;
-            align-items: center;
-            flex-direction: row;
-
-            svg {
-                flex-shrink: 0;
-            }
-
-            span {
-                overflow: hidden;
-                white-space: nowrap;
-                text-overflow: ellipsis;
-            }
-        }
-
-        &.name {
-            flex-grow: 1;
-            display: flex;
-            flex-direction: column;
-            font-size: .90625rem;
-            font-weight: 600;
-
-            .subText {
-                font-size: .6875rem;
-                margin-top: -1px;
-                color: var(--tertiary-foreground);
-                font-weight: 500;
-            }
-        }
-
-        &.unread {
-            width: 6px;
-            height: 6px;
-            margin: 9px;
-            flex-shrink: 0;
-            border-radius: 50%;
-            background: var(--foreground);
-        }
-
-        &.button {
-            flex-shrink: 0;
-
-            .icon {
-                opacity: 0;
-                display: none;
-                transition: 0.1s ease opacity;
-            }
-        }
-    }
-
-    &[data-active="true"] {
-        color: var(--foreground);
-        stroke: var(--foreground);
-        background: var(--hover);
-        cursor: default;
-
-        .subText {
-            color: var(--secondary-foreground) !important;
-        }
-
-        .unread {
-            display: none;
-        }
-    }
-
-    &[data-alert="true"] {
-        color: var(--secondary-foreground);
-    }
-
-    &[data-type="user"] {
-        opacity: 0.4;
-        color: var(--foreground);
-        transition: 0.15s ease opacity;
-        cursor: pointer;
-
-        &[data-online="true"],
-        &:hover {
-            opacity: 1;
-            //background: none;
-        }
-    }
-
-    &[data-size="compact"] {
-        margin-bottom: 2px;
-        height: 32px;
-        transition: border-inline-start .1s ease-in-out;
-        border-inline-start: 4px solid transparent;
-
-        &[data-active="true"] {
-            border-inline-start: 4px solid var(--accent);
-            border-radius: 4px;
-        }
-    }
-
-    &[data-size="small"] {
-        margin-bottom: 2px;
-        height: 42px;
-    }
-
-    &:hover {
-        background: var(--hover);
-
-        div.button .unread {
-            display: none;
-        }
-
-        div.button .icon {
-            opacity: 1;
-            display: block;
-        }
-    }
-}*/