merge: fix #520, render usernames containing custom emoji in welcome toast properly (!541)

View MR for information: https://activitypub.software/TransFem-org/Sharkey/-/merge_requests/541

Closes #520

Approved-by: dakkar <dakkar@thenautilus.net>
Approved-by: Marie <marie@kaifa.ch>

packages/frontend/src/boot/main-boot.ts

@@ -94,7 +94,7 @@ export async function mainBoot() {
 					}).render();
 				}
 			}
-		}	
+		}
 	} catch (error) {
 		// console.error(error);
 		console.error('Failed to initialise the seasonal screen effect canvas context:', error);
@@ -224,7 +224,7 @@ export async function mainBoot() {
 			if (Date.now() - lastUsedDate > 1000 * 60 * 60 * 2) {
 				toast(i18n.tsx.welcomeBackWithName({
 					name: $i.name || $i.username,
-				}));
+				}), true);
 			}
 		}
 		miLocalStorage.setItem('lastUsed', Date.now().toString());

packages/frontend/src/components/MkToast.vue

@@ -14,7 +14,8 @@ SPDX-License-Identifier: AGPL-3.0-only
 	>
 		<div v-if="showing" class="_acrylic" :class="$style.root" :style="{ zIndex }">
 			<div style="padding: 16px 24px;">
-				{{ message }}
+				<Mfm v-if="renderMfm" :text="message" plain/>
+				<template v-else>{{ message }}</template>
 			</div>
 		</div>
 	</Transition>
@@ -26,9 +27,12 @@ import { onMounted, ref } from 'vue';
 import * as os from '@/os.js';
 import { defaultStore } from '@/store.js';
 
-defineProps<{
+withDefaults(defineProps<{
 	message: string;
-}>();
+	renderMfm: boolean;
+}>(), {
+	renderMfm: false,
+});
 
 const emit = defineEmits<{
 	(ev: 'closed'): void;

packages/frontend/src/os.ts

@@ -211,9 +211,10 @@ export function pageWindow(path: string) {
 	}, {}, 'closed');
 }
 
-export function toast(message: string) {
+export function toast(message: string, renderMfm = false) {
 	popup(MkToast, {
 		message,
+		renderMfm,
 	}, {}, 'closed');
 }