merge: Misskey fixes & add button to see if notification dot works (!553)

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

Approved-by: dakkar <dakkar@thenautilus.net>
Approved-by: Marie <marie@kaifa.ch>
Approved-by: Amelia Yukii <amelia.yukii@shourai.de>

locales/en-US.yml

@@ -696,6 +696,10 @@ create: "Create"
 notificationSetting: "Notification settings"
 notificationSettingDesc: "Select the types of notification to display."
 enableFaviconNotificationDot: "Enable favicon notification dot"
+verifyNotificationDotWorkingButton: "Check if the notification dot works on your instance"
+notificationDotNotWorking: "Unfortunately, this instance does not support the notification dot feature at this time."
+notificationDotWorking: "The notification dot is functioning properly on this instance."
+notificationDotNotWorkingAdvice: "If the notification dot doesn't work, ask an admin to check our documentation {link}"
 useGlobalSetting: "Use global settings"
 useGlobalSettingDesc: "If turned on, your account's notification settings will be used. If turned off, individual configurations can be made."
 other: "Other"

locales/index.d.ts

@@ -2793,9 +2793,25 @@ export interface Locale extends ILocale {
      */
     "notificationSettingDesc": string;
     /**
-     * ファビコン通知ドットを有効にする
+     * 未読の通知があるときにタブのアイコンを目立たせる
      */
     "enableFaviconNotificationDot": string;
+    /**
+     * 通知ドットがインスタンスで機能するかどうかを確認します。
+     */
+    "verifyNotificationDotWorkingButton": string;
+    /**
+     * 残念ながら、このインスタンスは現時点では通知ドット機能をサポートしていません。
+     */
+    "notificationDotNotWorking": string;
+    /**
+     * 通知ドットは、このインスタンスで正しく機能しています。
+     */
+    "notificationDotWorking": string;
+    /**
+     * 通知ドットが機能しない場合は、管理者にドキュメントを確認するように依頼してください {link}
+     */
+    "notificationDotNotWorkingAdvice": ParameterizedString<"link">;
     /**
      * グローバル設定を使う
      */

locales/ja-JP.yml

@@ -694,7 +694,11 @@ channel: "チャンネル"
 create: "作成"
 notificationSetting: "通知設定"
 notificationSettingDesc: "表示する通知の種別を選択してください。"
-enableFaviconNotificationDot: "ファビコン通知ドットを有効にする"
+enableFaviconNotificationDot: "未読の通知があるときにタブのアイコンを目立たせる"
+verifyNotificationDotWorkingButton: "通知ドットがインスタンスで機能するかどうかを確認します。"
+notificationDotNotWorking: "残念ながら、このインスタンスは現時点では通知ドット機能をサポートしていません。"
+notificationDotWorking: "通知ドットは、このインスタンスで正しく機能しています。"
+notificationDotNotWorkingAdvice: "通知ドットが機能しない場合は、管理者にドキュメントを確認するように依頼してください {link}"
 useGlobalSetting: "グローバル設定を使う"
 useGlobalSettingDesc: "オンにすると、アカウントの通知設定が使用されます。オフにすると、個別に設定できるようになります。"
 other: "その他"

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

@@ -21,6 +21,7 @@ import { initializeSw } from '@/scripts/initialize-sw.js';
 import { deckStore } from '@/ui/deck/deck-store.js';
 import { emojiPicker } from '@/scripts/emoji-picker.js';
 import { mainRouter } from '@/router/main.js';
+import { setFavIconDot } from '@/scripts/favicon-dot.js';
 
 export async function mainBoot() {
 	const { isClientUpdated } = await common(() => createApp(
@@ -261,6 +262,14 @@ export async function mainBoot() {
 			}
 		}
 
+		function attemptShowNotificationDot() {
+			if (defaultStore.state.enableFaviconNotificationDot) {
+				setFavIconDot(true);
+			}
+		}
+
+		if ($i.hasUnreadNotification) attemptShowNotificationDot();
+
 		const main = markRaw(stream.useChannel('main', null, 'System'));
 
 		// 自分の情報が更新されたとき
@@ -269,6 +278,8 @@ export async function mainBoot() {
 		});
 
 		main.on('readAllNotifications', () => {
+			setFavIconDot(false);
+
 			updateAccount({
 				hasUnreadNotification: false,
 				unreadNotificationsCount: 0,
@@ -276,6 +287,8 @@ export async function mainBoot() {
 		});
 
 		main.on('unreadNotification', () => {
+			attemptShowNotificationDot();
+			
 			const unreadNotificationsCount = ($i?.unreadNotificationsCount ?? 0) + 1;
 			updateAccount({
 				hasUnreadNotification: true,

packages/frontend/src/pages/settings/general.vue

@@ -139,8 +139,22 @@ SPDX-License-Identifier: AGPL-3.0-only
 		<div class="_gaps_m">
 			<MkSwitch v-model="useGroupedNotifications">{{ i18n.ts.useGroupedNotifications }}</MkSwitch>
 
-			<MkSwitch v-model="enableFaviconNotificationDot">{{ i18n.ts.enableFaviconNotificationDot }}</MkSwitch>
+			<MkSwitch v-model="enableFaviconNotificationDot">
+				{{ i18n.ts.enableFaviconNotificationDot }}
+				<template #caption>
+					<I18n :src="i18n.ts.notificationDotNotWorkingAdvice" tag="span">
+						<template #link>
+							<MkLink url="https://docs.joinsharkey.org/docs/install/faqs/#ive-enabled-the-notification-dot-but-it-doesnt-show">{{ i18n.ts._mfm.link }}</MkLink>
+						</template>
+					</I18n>
+				</template>
+			</MkSwitch>
 
+			<!-- {{ i18n.ts.notificationDotNotWorkingAdvice }} -->
+
+			<!-- notificationDotNotWorkingAdvice -->
+			<MkButton @click="testNotificationDot">{{ i18n.ts.verifyNotificationDotWorkingButton }}</MkButton>
+			<!-- <p class="caption">Testing Testing</p> -->
 			<MkRadios v-model="notificationPosition">
 				<template #label>{{ i18n.ts.position }}</template>
 				<option value="leftTop"><i class="ph-arrow-up-left ph-bold ph-lg"></i> {{ i18n.ts.leftTop }}</option>
@@ -327,6 +341,7 @@ import { miLocalStorage } from '@/local-storage.js';
 import { globalEvents } from '@/events.js';
 import { claimAchievement } from '@/scripts/achievements.js';
 import { deepMerge } from '@/scripts/merge.js';
+import { worksOnInstance } from '@/scripts/favicon-dot.js';
 
 const lang = ref(miLocalStorage.getItem('lang'));
 const fontSize = ref(miLocalStorage.getItem('fontSize'));
@@ -562,6 +577,16 @@ function testNotification(): void {
 	}, 300);
 }
 
+async function testNotificationDot() {
+	const success = await worksOnInstance();
+	
+	if (success) {
+		os.toast(i18n.ts.notificationDotWorking);
+	} else {
+		os.toast(i18n.ts.notificationDotNotWorking);
+	}
+}
+
 function enableAllDataSaver() {
 	const g = { ...defaultStore.state.dataSaver };
 

packages/frontend/src/scripts/favicon-dot.ts

@@ -6,12 +6,12 @@
 import tinycolor from 'tinycolor2';
 
 class FavIconDot {
-	canvas: HTMLCanvasElement;
-	src: string | null = null;
-	ctx: CanvasRenderingContext2D | null = null;
-	faviconImage: HTMLImageElement | null = null;
-	faviconEL: HTMLLinkElement | undefined;
-	hasLoaded: Promise<void> | undefined;
+	private readonly canvas: HTMLCanvasElement;
+	private src: string | null = null;
+	private ctx: CanvasRenderingContext2D | null = null;
+	private faviconImage: HTMLImageElement | null = null;
+	private faviconEL: HTMLLinkElement | undefined;
+	private hasLoaded: Promise<void> | undefined;
 
 	constructor() {
 		this.canvas = document.createElement('canvas');
@@ -88,32 +88,58 @@ class FavIconDot {
 		if (this.faviconEL) this.faviconEL.href = this.canvas.toDataURL('image/png');
 	}
 
-	async setVisible(isVisible: boolean) {
+	public async setVisible(isVisible: boolean) {
 		// Wait for it to have loaded the icon
 		await this.hasLoaded;
 		this.drawIcon();
 		if (isVisible) this.drawDot();
 		this.setFavicon();
 	}
+
+	public async worksOnInstance() {
+		try {
+			// Wait for it to have loaded the icon
+			await this.hasLoaded;
+			this.drawIcon();
+			this.drawDot();
+			this.canvas.toDataURL('image/png');
+		} catch (error) {
+			return false;			
+		}
+		return true;
+	}
 }
 
 let icon: FavIconDot | undefined = undefined;
 
-export function setFavIconDot(visible: boolean) {
+export async function setFavIconDot(visible: boolean) {
 	const setIconVisibility = async () => {
 		if (!icon) {
 			icon = new FavIconDot();
 			await icon.setup();
 		}
 
+		try {
 			(icon as FavIconDot).setVisible(visible);
+		} catch (error) {
+			//Probably failed due to CORS and a dirty canvas
+		}
 	};
 
 	// If document is already loaded, set visibility immediately
 	if (document.readyState === 'complete') {
-		setIconVisibility();
+		await setIconVisibility();
 	} else {
 		// Otherwise, set visibility when window loads
 		window.addEventListener('load', setIconVisibility);
 	}
 }
+
+export async function worksOnInstance() {
+	if (!icon) {
+		icon = new FavIconDot();
+		await icon.setup();
+	}
+	
+	return await icon.worksOnInstance();
+}

packages/frontend/src/ui/_common_/common.vue

@@ -47,9 +47,8 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>
 
 <script lang="ts" setup>
-import { defineAsyncComponent, ref, watch } from 'vue';
+import { defineAsyncComponent, ref } from 'vue';
 import * as Misskey from 'misskey-js';
-import { setFavIconDot } from '../../scripts/favicon-dot';
 import { swInject } from './sw-inject.js';
 import XNotification from './notification.vue';
 import { popups } from '@/os.js';
@@ -95,11 +94,6 @@ if ($i) {
 	const connection = useStream().useChannel('main', null, 'UI');
 	connection.on('notification', onNotification);
 
-	// For the favicon notification dot
-	watch(() => $i?.hasUnreadNotification && defaultStore.state.enableFaviconNotificationDot, (hasAny) => setFavIconDot(hasAny as boolean));
-
-	if ($i.hasUnreadNotification && defaultStore.state.enableFaviconNotificationDot) setFavIconDot(true);
-	
 	globalEvents.on('clientNotification', notification => onNotification(notification, true));
 
 	//#region Listen message from SW