refactor

packages/frontend/src/pages/admin-user.vue

@@ -143,8 +143,8 @@ SPDX-License-Identifier: AGPL-3.0-only
 					<button v-else class="_button" :class="$style.roleUnassign" disabled><i class="ti ti-ban"></i></button>
 				</div>
 				<div v-if="expandedRoleIds.includes(role.id)" :class="$style.roleItemSub">
-					<div>Assigned: <MkTime :time="info.roleAssigns.find(a => a.roleId === role.id).createdAt" mode="detail"/></div>
-					<div v-if="info.roleAssigns.find(a => a.roleId === role.id).expiresAt">Period: {{ new Date(info.roleAssigns.find(a => a.roleId === role.id).expiresAt).toLocaleString() }}</div>
+					<div>Assigned: <MkTime :time="info.roleAssigns.find(a => a.roleId === role.id)!.createdAt" mode="detail"/></div>
+					<div v-if="info.roleAssigns.find(a => a.roleId === role.id)!.expiresAt">Period: {{ new Date(info.roleAssigns.find(a => a.roleId === role.id)!.expiresAt!).toLocaleString() }}</div>
 					<div v-else>Period: {{ i18n.ts.indefinitely }}</div>
 				</div>
 			</div>

packages/frontend/src/pages/drive.file.info.vue

@@ -119,7 +119,7 @@ async function _fetch_() {
 }
 
 function postThis() {
-	if (!file.value) return;
+	if (file.value == null) return;
 
 	os.post({
 		initialFiles: [file.value],
@@ -127,11 +127,13 @@ function postThis() {
 }
 
 function move() {
-	if (!file.value) return;
+	if (file.value == null) return;
+
+	const f = file.value;
 
 	selectDriveFolder(null).then(folder => {
 		misskeyApi('drive/files/update', {
-			fileId: file.value.id,
+			fileId: f.id,
 			folderId: folder[0] ? folder[0].id : null,
 		}).then(async () => {
 			await _fetch_();
@@ -140,7 +142,7 @@ function move() {
 }
 
 function toggleSensitive() {
-	if (!file.value) return;
+	if (file.value == null) return;
 
 	os.apiWithDialog('drive/files/update', {
 		fileId: file.value.id,
@@ -157,7 +159,9 @@ function toggleSensitive() {
 }
 
 function rename() {
-	if (!file.value) return;
+	if (file.value == null) return;
+
+	const f = file.value;
 
 	os.inputText({
 		title: i18n.ts.renameFile,
@@ -166,7 +170,7 @@ function rename() {
 	}).then(({ canceled, result: name }) => {
 		if (canceled) return;
 		os.apiWithDialog('drive/files/update', {
-			fileId: file.value.id,
+			fileId: f.id,
 			name: name,
 		}).then(async () => {
 			await _fetch_();
@@ -175,7 +179,9 @@ function rename() {
 }
 
 async function describe() {
-	if (!file.value) return;
+	if (file.value == null) return;
+
+	const f = file.value;
 
 	const { dispose } = await os.popupAsyncWithDialog(import('@/components/MkFileCaptionEditWindow.vue').then(x => x.default), {
 		default: file.value.comment ?? '',
@@ -183,7 +189,7 @@ async function describe() {
 	}, {
 		done: caption => {
 			os.apiWithDialog('drive/files/update', {
-				fileId: file.value.id,
+				fileId: f.id,
 				comment: caption.length === 0 ? null : caption,
 			}).then(async () => {
 				await _fetch_();
@@ -194,7 +200,7 @@ async function describe() {
 }
 
 async function deleteFile() {
-	if (!file.value) return;
+	if (file.value == null) return;
 
 	const { canceled } = await os.confirm({
 		type: 'warning',

packages/frontend/src/pages/explore.vue

@@ -26,18 +26,12 @@ import { definePage } from '@/page.js';
 import { i18n } from '@/i18n.js';
 
 const props = withDefaults(defineProps<{
-	tag?: string;
 	initialTab?: string;
 }>(), {
 	initialTab: 'featured',
 });
 
 const tab = ref(props.initialTab);
-const tagsEl = useTemplateRef('tagsEl');
-
-watch(() => props.tag, () => {
-	if (tagsEl.value) tagsEl.value.toggleContent(props.tag == null);
-});
 
 const headerActions = computed(() => []);
 

packages/frontend/src/pages/list.vue

@@ -103,6 +103,7 @@ definePage(() => ({
 	icon: 'ti ti-list',
 }));
 </script>
+
 <style lang="scss" module>
 .userItem {
 	display: flex;

packages/frontend/src/pages/note.vue

@@ -126,7 +126,7 @@ function fetchNote() {
 		noteId: props.noteId,
 	}).then(res => {
 		note.value = res;
-		const appearNote = getAppearNote(res);
+		const appearNote = getAppearNote(res) ?? res;
 		// 古いノートは被クリップ数をカウントしていないので、2023-10-01以前のものは強制的にnotes/clipsを叩く
 		if ((appearNote.clippedCount ?? 0) > 0 || new Date(appearNote.createdAt).getTime() < new Date('2023-10-01').getTime()) {
 			misskeyApi('notes/clips', {

packages/frontend/src/pages/registry.value.vue

@@ -62,10 +62,10 @@ const props = defineProps<{
 }>();
 
 const scope = computed(() => props.path.split('/').slice(0, -1));
-const key = computed(() => props.path.split('/').at(-1));
+const key = computed(() => props.path.split('/').at(-1)!);
 
 const value = ref<any>(null);
-const valueForEditor = ref<string | null>(null);
+const valueForEditor = ref<string>('');
 
 function fetchValue() {
 	misskeyApi('i/registry/get-detail', {

packages/frontend/src/pages/settings/avatar-decoration.vue

@@ -108,7 +108,7 @@ async function openDecoration(avatarDecoration: {
 				offsetY: payload.offsetY,
 			};
 			const update = [...$i.avatarDecorations];
-			update[index] = decoration;
+			update[index!] = decoration;
 			await os.apiWithDialog('i/update', {
 				avatarDecorations: update,
 			});
@@ -116,7 +116,7 @@ async function openDecoration(avatarDecoration: {
 		},
 		'detach': async () => {
 			const update = [...$i.avatarDecorations];
-			update.splice(index, 1);
+			update.splice(index!, 1);
 			await os.apiWithDialog('i/update', {
 				avatarDecorations: update,
 			});

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

@@ -43,9 +43,9 @@ SPDX-License-Identifier: AGPL-3.0-only
 		</FormSection>
 		<FormSection>
 			<div class="_gaps_s">
-				<FormLink @click="readAllNotifications">{{ i18n.ts.markAsReadAllNotifications }}</FormLink>
-				<FormLink @click="testNotification">{{ i18n.ts._notification.sendTestNotification }}</FormLink>
-				<FormLink @click="flushNotification">{{ i18n.ts._notification.flushNotification }}</FormLink>
+				<MkButton @click="readAllNotifications">{{ i18n.ts.markAsReadAllNotifications }}</MkButton>
+				<MkButton @click="testNotification">{{ i18n.ts._notification.sendTestNotification }}</MkButton>
+				<MkButton @click="flushNotification">{{ i18n.ts._notification.flushNotification }}</MkButton>
 			</div>
 		</FormSection>
 		<FormSection>
@@ -76,6 +76,7 @@ import FormLink from '@/components/form/link.vue';
 import FormSection from '@/components/form/section.vue';
 import MkFolder from '@/components/MkFolder.vue';
 import MkSwitch from '@/components/MkSwitch.vue';
+import MkButton from '@/components/MkButton.vue';
 import * as os from '@/os.js';
 import { ensureSignin } from '@/i.js';
 import { misskeyApi } from '@/utility/misskey-api.js';
@@ -96,7 +97,7 @@ const sendReadMessage = computed(() => pushRegistrationInServer.value?.sendReadM
 const userLists = await misskeyApi('users/lists/list');
 
 async function readAllNotifications() {
-	await os.apiWithDialog('notifications/mark-all-as-read');
+	await os.apiWithDialog('notifications/mark-all-as-read', {});
 }
 
 async function updateReceiveConfig(type: typeof notificationTypes[number], value: NotificationConfig) {
@@ -134,7 +135,7 @@ async function flushNotification() {
 
 	if (canceled) return;
 
-	os.apiWithDialog('notifications/flush');
+	os.apiWithDialog('notifications/flush', {});
 }
 
 const headerActions = computed(() => []);

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

@@ -80,14 +80,14 @@ async function change() {
 		type: 'password',
 		autocomplete: 'new-password',
 	});
-	if (canceled2) return;
+	if (canceled2 || newPassword == null) return;
 
 	const { canceled: canceled3, result: newPassword2 } = await os.inputText({
 		title: i18n.ts.newPasswordRetype,
 		type: 'password',
 		autocomplete: 'new-password',
 	});
-	if (canceled3) return;
+	if (canceled3 || newPassword2 == null) return;
 
 	if (newPassword !== newPassword2) {
 		os.alert({

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

@@ -205,8 +205,8 @@ import { computed, ref, watch } from 'vue';
 import JSON5 from 'json5';
 import defaultLightTheme from '@@/themes/l-light.json5';
 import defaultDarkTheme from '@@/themes/d-green-lime.json5';
-import type { Theme } from '@/theme.js';
 import { isSafeMode } from '@@/js/config.js';
+import type { Theme } from '@/theme.js';
 import * as os from '@/os.js';
 import MkSwitch from '@/components/MkSwitch.vue';
 import FormSection from '@/components/form/section.vue';
@@ -275,6 +275,7 @@ async function toggleDarkMode() {
 	const value = !store.r.darkMode.value;
 	if (syncDeviceDarkMode.value) {
 		const { canceled } = await os.confirm({
+			type: 'question',
 			text: i18n.tsx.switchDarkModeManuallyWhenSyncEnabledConfirm({ x: i18n.ts.syncDeviceDarkMode }),
 		});
 		if (canceled) return;

packages/frontend/src/pages/settings/webhook.edit.vue

@@ -149,10 +149,8 @@ async function test(type: Misskey.entities.UserWebhook['on'][number]): Promise<v
 	});
 }
 
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
 const headerActions = computed(() => []);
 
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
 const headerTabs = computed(() => []);
 
 definePage(() => ({

packages/frontend/src/pages/timeline.vue

@@ -14,7 +14,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 			ref="tlComponent"
 			:key="src + withRenotes + withReplies + onlyFiles + withSensitive"
 			:class="$style.tl"
-			:src="src.split(':')[0]"
+			:src="(src.split(':')[0] as (BasicTimelineType | 'list'))"
 			:list="src.split(':')[1]"
 			:withRenotes="withRenotes"
 			:withReplies="withReplies"

packages/frontend/src/pages/user/activity.following.vue

@@ -43,6 +43,8 @@ const fetching = ref(true);
 const { handler: externalTooltipHandler } = useChartTooltip();
 
 async function renderChart() {
+	if (chartEl.value == null) return;
+
 	if (chartInstance) {
 		chartInstance.destroy();
 	}

packages/frontend/src/pages/user/activity.notes.vue

@@ -36,13 +36,15 @@ const props = defineProps<{
 const chartEl = useTemplateRef('chartEl');
 const legendEl = useTemplateRef('legendEl');
 const now = new Date();
-let chartInstance: Chart = null;
+let chartInstance: Chart | null = null;
 const chartLimit = 50;
 const fetching = ref(true);
 
 const { handler: externalTooltipHandler } = useChartTooltip();
 
 async function renderChart() {
+	if (chartEl.value == null) return;
+
 	if (chartInstance) {
 		chartInstance.destroy();
 	}

packages/frontend/src/pages/user/activity.pv.vue

@@ -36,13 +36,15 @@ const props = defineProps<{
 const chartEl = useTemplateRef('chartEl');
 const legendEl = useTemplateRef('legendEl');
 const now = new Date();
-let chartInstance: Chart = null;
+let chartInstance: Chart | null = null;
 const chartLimit = 30;
 const fetching = ref(true);
 
 const { handler: externalTooltipHandler } = useChartTooltip();
 
 async function renderChart() {
+	if (chartEl.value == null) return;
+
 	if (chartInstance) {
 		chartInstance.destroy();
 	}