merge: Feature/favicon notification dot (!474)

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

Approved-by: dakkar <dakkar@thenautilus.net>
Approved-by: Luna <her@mint.lgbt>
Approved-by: Marie <marie@kaifa.ch>

locales/en-US.yml

@@ -688,6 +688,7 @@ channel: "Channels"
 create: "Create"
 notificationSetting: "Notification settings"
 notificationSettingDesc: "Select the types of notification to display."
+enableFaviconNotificationDot: "Enable favicon notification dot"
 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

@@ -2764,6 +2764,10 @@ export interface Locale extends ILocale {
      * 表示する通知の種別を選択してください。
      */
     "notificationSettingDesc": string;
+    /**
+     * ファビコン通知ドットを有効にする
+     */
+    "enableFaviconNotificationDot": string;
     /**
      * グローバル設定を使う
      */

locales/ja-JP.yml

@@ -687,6 +687,7 @@ channel: "チャンネル"
 create: "作成"
 notificationSetting: "通知設定"
 notificationSettingDesc: "表示する通知の種別を選択してください。"
+enableFaviconNotificationDot: "ファビコン通知ドットを有効にする"
 useGlobalSetting: "グローバル設定を使う"
 useGlobalSettingDesc: "オンにすると、アカウントの通知設定が使用されます。オフにすると、個別に設定できるようになります。"
 other: "その他"

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

@@ -112,6 +112,8 @@ 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>
+
 			<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>
@@ -345,6 +347,7 @@ const oneko = computed(defaultStore.makeGetterSetter('oneko'));
 const loadRawImages = computed(defaultStore.makeGetterSetter('loadRawImages'));
 const highlightSensitiveMedia = computed(defaultStore.makeGetterSetter('highlightSensitiveMedia'));
 const imageNewTab = computed(defaultStore.makeGetterSetter('imageNewTab'));
+const enableFaviconNotificationDot = computed(defaultStore.makeGetterSetter('enableFaviconNotificationDot'));
 const warnMissingAltText = computed(defaultStore.makeGetterSetter('warnMissingAltText'));
 const nsfw = computed(defaultStore.makeGetterSetter('nsfw'));
 const showFixedPostForm = computed(defaultStore.makeGetterSetter('showFixedPostForm'));

packages/frontend/src/pages/settings/preferences-backups.vue

@@ -72,6 +72,7 @@ const defaultStoreSaveKeys: (keyof typeof defaultStore['state'])[] = [
 	'advancedMfm',
 	'loadRawImages',
 	'warnMissingAltText',
+	'enableFaviconNotificationDot',
 	'imageNewTab',
 	'dataSaver',
 	'disableShowingAnimatedImages',

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

@@ -0,0 +1,114 @@
+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;
+
+	constructor() {
+		this.canvas = document.createElement('canvas');
+	}
+
+	/**
+	 * Must be called before calling any other functions
+	 */
+	public async setup() {
+		const element: HTMLLinkElement = await this.getOrMakeFaviconElement();
+		
+		this.faviconEL = element;
+		this.src = this.faviconEL.getAttribute('href');
+		this.ctx = this.canvas.getContext('2d');
+			
+		this.faviconImage = document.createElement('img');
+	
+		this.hasLoaded = new Promise((resolve, reject) => {
+			(this.faviconImage as HTMLImageElement).addEventListener('load', () => {
+				this.canvas.width = (this.faviconImage as HTMLImageElement).width;
+				this.canvas.height = (this.faviconImage as HTMLImageElement).height;
+				resolve();
+			});
+			(this.faviconImage as HTMLImageElement).addEventListener('error', () => {
+				reject('Failed to create favicon img element');
+			});
+		});
+
+		this.faviconImage.src = this.faviconEL.href;
+	}
+
+	private async getOrMakeFaviconElement(): Promise<HTMLLinkElement> {
+		return new Promise((resolve, reject) => {
+			const favicon = (document.querySelector('link[rel=icon]') ?? this.createFaviconElem()) as HTMLLinkElement;
+			favicon.addEventListener('load', () => {
+				resolve(favicon);
+			});
+
+			favicon.onerror = () => {
+				reject('Failed to load favicon');
+			};
+			resolve(favicon);
+		});
+	}
+
+	private createFaviconElem() {
+		const newLink = document.createElement('link');
+		newLink.setAttribute('rel', 'icon');
+		newLink.setAttribute('href', '/favicon.ico');
+		newLink.setAttribute('type', 'image/x-icon');
+
+		document.head.appendChild(newLink);
+		return newLink;
+	}
+
+	private drawIcon() {
+		if (!this.ctx || !this.faviconImage) return;
+		this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
+		this.ctx.drawImage(this.faviconImage, 0, 0, this.faviconImage.width, this.faviconImage.height);
+	}
+
+	private drawDot() {
+		if (!this.ctx || !this.faviconImage) return;
+		this.ctx.beginPath();
+		this.ctx.arc(this.faviconImage.width - 10, 10, 10, 0, 2 * Math.PI);
+		const computedStyle = getComputedStyle(document.documentElement);
+		this.ctx.fillStyle = tinycolor(computedStyle.getPropertyValue('--navIndicator')).toHexString();
+		this.ctx.strokeStyle = 'white';
+		this.ctx.fill();
+		this.ctx.stroke();
+	}
+
+	private setFavicon() {
+		if (this.faviconEL) this.faviconEL.href = this.canvas.toDataURL('image/png');
+	}
+
+	async setVisible(isVisible: boolean) {
+		// Wait for it to have loaded the icon
+		await this.hasLoaded;
+		this.drawIcon();
+		if (isVisible) this.drawDot();
+		this.setFavicon();
+	}
+}
+
+let icon: FavIconDot | undefined = undefined;
+
+export function setFavIconDot(visible: boolean) {
+	const setIconVisibility = async () => {
+		if (!icon) {
+			icon = new FavIconDot();
+			await icon.setup();
+		}
+		
+		(icon as FavIconDot).setVisible(visible);
+	};
+
+	// If document is already loaded, set visibility immediately
+	if (document.readyState === 'complete') {
+		setIconVisibility();
+	} else {
+		// Otherwise, set visibility when window loads
+		window.addEventListener('load', setIconVisibility);
+	}
+}

packages/frontend/src/store.ts

@@ -268,6 +268,10 @@ export const defaultStore = markRaw(new Storage('base', {
 		where: 'device',
 		default: true,
 	},
+	enableFaviconNotificationDot: {
+		where: 'device',
+		default: true,
+	},
 	imageNewTab: {
 		where: 'device',
 		default: false,

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

@@ -47,8 +47,9 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>
 
 <script lang="ts" setup>
-import { defineAsyncComponent, ref } from 'vue';
+import { defineAsyncComponent, ref, watch } 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';
@@ -93,6 +94,12 @@ function onNotification(notification: Misskey.entities.Notification, isClient =
 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