fix type errors of components

packages/client/src/components/MkImageViewer.vue

@@ -2,16 +2,16 @@
 	<MkModal
 		ref="modal"
 		:z-priority="'middle'"
-		@click="modal.close()"
+		@click="modal!.close()"
 		@closed="emit('closed')"
 	>
 		<div class="xubzgfga">
 			<header>{{ image.name }}</header>
 			<img
 				:src="image.url"
-				:alt="image.comment"
-				:title="image.comment"
-				@click="modal.close()"
+				:alt="image.comment || undefined"
+				:title="image.comment || undefined"
+				@click="modal!.close()"
 			/>
 			<footer>
 				<span>{{ image.type }}</span>
@@ -33,7 +33,7 @@ import bytes from "@/filters/bytes";
 import number from "@/filters/number";
 import MkModal from "@/components/MkModal.vue";
 
-const props = withDefaults(
+withDefaults(
 	defineProps<{
 		image: entities.DriveFile;
 	}>(),
@@ -41,10 +41,10 @@ const props = withDefaults(
 );
 
 const emit = defineEmits<{
-	(ev: "closed"): void;
+	closed: [];
 }>();
 
-const modal = ref<InstanceType<typeof MkModal>>();
+const modal = ref<InstanceType<typeof MkModal> | null>(null);
 </script>
 
 <style lang="scss" scoped>

packages/client/src/components/MkImgWithBlurhash.vue

@@ -4,20 +4,20 @@
 		ref="canvas"
 		:width="size"
 		:height="size"
-		:title="title"
+		:title="title || undefined"
 	/>
 	<img
 		v-if="src"
 		:src="src"
-		:title="title"
+		:title="title || undefined"
 		:type="type"
-		:alt="alt"
+		:alt="alt || undefined"
 		:class="{
 			cover,
 			wide: largestDimension === 'width',
 			tall: largestDimension === 'height',
 		}"
-		:style="{ 'object-fit': cover ? 'cover' : null }"
+		:style="{ 'object-fit': cover ? 'cover' : undefined }"
 		loading="lazy"
 		@load="onLoad"
 	/>

packages/client/src/components/MkInstanceCardMini.vue

@@ -23,17 +23,14 @@
 </template>
 
 <script lang="ts" setup>
-import { ref } from "vue";
-
 import type { entities } from "firefish-js";
-import * as os from "@/os";
 import { getProxiedImageUrlNullable } from "@/scripts/media-proxy";
 
-const props = defineProps<{
+defineProps<{
 	instance: entities.Instance;
 }>();
 
-function getInstanceIcon(instance): string {
+function getInstanceIcon(instance: entities.Instance): string {
 	return (
 		getProxiedImageUrlNullable(instance.faviconUrl, "preview") ??
 		getProxiedImageUrlNullable(instance.iconUrl, "preview") ??

packages/client/src/components/MkInstanceSelectDialog.vue

@@ -65,14 +65,14 @@ import * as os from "@/os";
 import { i18n } from "@/i18n";
 
 const emit = defineEmits<{
-	(ev: "ok", selected: entities.Instance): void;
-	(ev: "cancel"): void;
-	(ev: "closed"): void;
+	ok: [selected: entities.Instance];
+	cancel: [];
+	closed: [];
 }>();
 
 const hostname = ref("");
 const instances = ref<entities.Instance[]>([]);
-const selected = ref<entities.Instance | null>();
+const selected = ref<entities.Instance | null>(null);
 const dialogEl = ref<InstanceType<typeof XModalWindow>>();
 
 let searchOrderLatch = 0;

packages/client/src/components/MkInstanceStats.vue

@@ -52,6 +52,7 @@ import { i18n } from "@/i18n";
 import MkActiveUsersHeatmap from "@/components/MkActiveUsersHeatmap.vue";
 import MkFolder from "@/components/MkFolder.vue";
 import { initChart } from "@/scripts/init-chart";
+import type { entities } from "firefish-js";
 
 initChart();
 
@@ -67,7 +68,18 @@ const { handler: externalTooltipHandler2 } = useChartTooltip({
 	position: "middle",
 });
 
-function createDoughnut(chartEl, tooltip, data) {
+interface ColorData {
+	name: string;
+	color: string | undefined;
+	value: number;
+	onClick?: () => void;
+}
+
+function createDoughnut(
+	chartEl: HTMLCanvasElement,
+	tooltip: typeof externalTooltipHandler1,
+	data: ColorData[],
+) {
 	const chartInstance = new Chart(chartEl, {
 		type: "doughnut",
 		data: {
@@ -96,13 +108,13 @@ function createDoughnut(chartEl, tooltip, data) {
 			},
 			onClick: (ev) => {
 				const hit = chartInstance.getElementsAtEventForMode(
-					ev,
+					ev as unknown as Event,
 					"nearest",
 					{ intersect: true },
 					false,
 				)[0];
-				if (hit && data[hit.index].onClick) {
-					data[hit.index].onClick();
+				if (hit) {
+					data[hit.index].onClick?.();
 				}
 			},
 			plugins: {
@@ -124,48 +136,41 @@ function createDoughnut(chartEl, tooltip, data) {
 	return chartInstance;
 }
 
+function instance2ColorData(x: entities.Instance): ColorData {
+	return {
+		name: x.host,
+		color: x.themeColor || undefined,
+		value: x.followersCount,
+		onClick: () => {
+			os.pageWindow(`/instance-info/${x.host}`);
+		},
+	};
+}
+
 onMounted(() => {
 	os.apiGet("federation/stats", { limit: 30 }).then((fedStats) => {
 		createDoughnut(
-			subDoughnutEl.value,
+			subDoughnutEl.value!,
 			externalTooltipHandler1,
-			fedStats.topSubInstances
-				.map((x) => ({
-					name: x.host,
-					color: x.themeColor,
-					value: x.followersCount,
-					onClick: () => {
-						os.pageWindow(`/instance-info/${x.host}`);
-					},
-				}))
-				.concat([
-					{
-						name: "(other)",
-						color: "#80808080",
-						value: fedStats.otherFollowersCount,
-					},
-				]),
+			fedStats.topSubInstances.map(instance2ColorData).concat([
+				{
+					name: "(other)",
+					color: "#80808080",
+					value: fedStats.otherFollowersCount,
+				},
+			]),
 		);
 
 		createDoughnut(
-			pubDoughnutEl.value,
+			pubDoughnutEl.value!,
 			externalTooltipHandler2,
-			fedStats.topPubInstances
-				.map((x) => ({
-					name: x.host,
-					color: x.themeColor,
-					value: x.followingCount,
-					onClick: () => {
-						os.pageWindow(`/instance-info/${x.host}`);
-					},
-				}))
-				.concat([
-					{
-						name: "(other)",
-						color: "#80808080",
-						value: fedStats.otherFollowingCount,
-					},
-				]),
+			fedStats.topPubInstances.map(instance2ColorData).concat([
+				{
+					name: "(other)",
+					color: "#80808080",
+					value: fedStats.otherFollowingCount,
+				},
+			]),
 		);
 	});
 });

packages/client/src/components/MkLaunchPad.vue

@@ -6,7 +6,7 @@
 		:anchor="anchor"
 		:transparent-bg="true"
 		:src="src"
-		@click="modal.close()"
+		@click="modal!.close()"
 		@closed="emit('closed')"
 	>
 		<div
@@ -109,7 +109,7 @@ const items = Object.keys(navbarItemDef)
 	}));
 
 function close() {
-	modal.value.close();
+	modal.value!.close();
 }
 </script>
 

packages/client/src/components/global/MkEmoji.vue

@@ -54,8 +54,8 @@ const url = computed(() => {
 		return char2filePath(char.value);
 	} else {
 		return defaultStore.state.disableShowingAnimatedImages
-			? getStaticImageUrl(customEmoji.value.url)
-			: customEmoji.value.url;
+			? getStaticImageUrl(customEmoji.value!.url)
+			: customEmoji.value!.url;
 	}
 });
 const alt = computed(() =>

packages/client/src/scripts/use-chart-tooltip.ts

@@ -1,6 +1,13 @@
 import { onDeactivated, onUnmounted, ref } from "vue";
 import * as os from "@/os";
 import MkChartTooltip from "@/components/MkChartTooltip.vue";
+import type { Color, TooltipOptions } from "chart.js";
+
+type ToolTipSerie = {
+	backgroundColor: Color;
+	borderColor: Color;
+	text: string;
+};
 
 export function useChartTooltip(
 	opts: { position: "top" | "middle" } = { position: "top" },
@@ -8,9 +15,9 @@ export function useChartTooltip(
 	const tooltipShowing = ref(false);
 	const tooltipX = ref(0);
 	const tooltipY = ref(0);
-	const tooltipTitle = ref(null);
-	const tooltipSeries = ref(null);
-	let disposeTooltipComponent;
+	const tooltipTitle = ref<string | null>(null);
+	const tooltipSeries = ref<ToolTipSerie[] | null>(null);
+	let disposeTooltipComponent: () => void;
 
 	os.popup(
 		MkChartTooltip,
@@ -34,7 +41,7 @@ export function useChartTooltip(
 		tooltipShowing.value = false;
 	});
 
-	function handler(context) {
+	const handler: TooltipOptions["external"] = (context) => {
 		if (context.tooltip.opacity === 0) {
 			tooltipShowing.value = false;
 			return;

packages/firefish-js/src/api.types.ts

@@ -405,6 +405,17 @@ export type Endpoints = {
 		res: Instance[];
 	};
 	"federation/show-instance": { req: { host: string }; res: Instance };
+	"federation/stats": {
+		req: {
+			limit?: number;
+		};
+		res: {
+			topSubInstances: Instance[];
+			otherFollowersCount: number;
+			topPubInstances: Instance[];
+			otherFollowingCount: number;
+		};
+	};
 	"federation/update-remote-user": { req: { userId: User["id"] }; res: null };
 	"federation/users": {
 		req: {

packages/firefish-js/src/entities.ts

@@ -539,6 +539,8 @@ export type Instance = {
 	lastCommunicatedAt: DateString;
 	isNotResponding: boolean;
 	isSuspended: boolean;
+	isBlocked: boolean;
+	isSilenced: boolean;
 	softwareName: string | null;
 	softwareVersion: string | null;
 	openRegistrations: boolean | null;