client: fix lints

packages/client/src/components/analog-clock.vue

@@ -88,7 +88,7 @@ function tick(): void {
 }
 
 onMounted(() => {
-	const update = () => {
+	const update = (): void => {
 		if (enabled.value) {
 			tick();
 			window.setTimeout(update, 1000);

packages/client/src/components/drive.nav-folder.vue

@@ -31,7 +31,6 @@ const emit = defineEmits<{
 	(ev: 'removeFolder', v: foundkey.entities.DriveFolder['id']): void;
 }>();
 
-const hover = ref(false);
 const draghover = ref(false);
 
 function onClick() {

packages/client/src/components/federation.vue

@@ -48,13 +48,11 @@
 
 <script lang="ts" setup>
 import { computed } from 'vue';
-import MkButton from '@/components/ui/button.vue';
 import MkInput from '@/components/form/input.vue';
 import MkSelect from '@/components/form/select.vue';
 import MkPagination from '@/components/ui/pagination.vue';
 import MkInstanceCardMini from '@/components/instance-card-mini.vue';
 import FormSplit from '@/components/form/split.vue';
-import * as os from '@/os';
 import { i18n } from '@/i18n';
 
 let host = $ref('');

packages/client/src/components/form/input.vue

@@ -34,7 +34,7 @@
 </template>
 
 <script lang="ts" setup>
-import { onMounted, nextTick, ref, watch, computed, toRefs } from 'vue';
+import { onMounted, nextTick, ref, watch, toRefs } from 'vue';
 import { debounce } from 'throttle-debounce';
 import MkButton from '@/components/ui/button.vue';
 import { useInterval } from '@/scripts/use-interval';

packages/client/src/components/form/select.vue

@@ -27,7 +27,7 @@
 </template>
 
 <script lang="ts" setup>
-import { onMounted, nextTick, ref, watch, computed, toRefs, VNode, useSlots } from 'vue';
+import { onMounted, nextTick, ref, watch, toRefs, VNode, useSlots } from 'vue';
 import MkButton from '@/components/ui/button.vue';
 import * as os from '@/os';
 import { useInterval } from '@/scripts/use-interval';

packages/client/src/components/form/textarea.vue

@@ -27,7 +27,7 @@
 </template>
 
 <script lang="ts" setup>
-import { onMounted, nextTick, watch, computed, toRefs } from 'vue';
+import { onMounted, nextTick, watch, toRefs } from 'vue';
 import { debounce } from 'throttle-debounce';
 import MkButton from '@/components/ui/button.vue';
 import { i18n } from '@/i18n';

packages/client/src/components/global/page-header.vue

@@ -18,9 +18,9 @@
 			</div>
 		</div>
 		<div v-if="!narrow || hideTitle" class="tabs">
-			<button v-for="tab in tabs" :ref="(el) => tabRefs[tab.key] = el" v-tooltip="tab.title" class="tab _button" :class="{ active: tab.key != null && tab.key === props.tab }" @mousedown="() => onTabMousedown(tab)" @click="(ev) => onTabClick(tab, ev)">
-				<i v-if="tab.icon" class="icon" :class="tab.icon"></i>
-				<span v-if="!tab.iconOnly" class="title">{{ tab.title }}</span>
+			<button v-for="item in tabs" :key="item.key" :ref="(el) => tabRefs[item.key] = el" v-tooltip="item.title" class="tab _button" :class="{ active: item.key != null && item.key === props.tab }" @mousedown="() => onTabMousedown(item)" @click="(ev) => onTabClick(item, ev)">
+				<i v-if="item.icon" class="icon" :class="item.icon"></i>
+				<span v-if="!item.iconOnly" class="title">{{ item.title }}</span>
 			</button>
 			<div ref="tabHighlightEl" class="highlight"></div>
 		</div>
@@ -29,6 +29,7 @@
 		<template v-for="action in actions">
 			<MkButton
 				v-if="action.asFullButton"
+				:key="action.text"
 				class="fullButton"
 				primary
 				@click.stop="action.handler"
@@ -38,6 +39,7 @@
 			</MkButton>
 			<button
 				v-else
+				:key="action.text"
 				v-tooltip="action.text"
 				class="_button button"
 				:class="{ highlighted: action.highlighted }"
@@ -69,7 +71,7 @@ type Tab = {
 
 const props = withDefaults(defineProps<{
 	tabs?: Tab[];
-	tab?: string;
+	tab?: string | null;
 	actions?: {
 		text: string;
 		icon: string;
@@ -80,7 +82,8 @@ const props = withDefaults(defineProps<{
 }>(), {
 	actions: () => [],
 	tabs: () => [],
-	thin: () =>  inject('shouldHeaderThin', false),
+	tab: null,
+	thin: () => inject('shouldHeaderThin', false),
 });
 
 const emit = defineEmits<{
@@ -96,14 +99,11 @@ const tabRefs = {};
 const tabHighlightEl = $ref<HTMLElement | null>(null);
 const bg = ref(null);
 let narrow = $ref(false);
-const height = ref(0);
 const hasTabs = $computed(() => props.tabs.length > 0);
 const hasActions = $computed(() => props.actions.length > 0);
-const show = $computed(() => {
-	return !hideTitle || hasTabs || hasActions;
-});
+const show = $computed(() => !hideTitle || hasTabs || hasActions);
 
-const showTabsPopup = (ev: MouseEvent) => {
+function showTabsPopup(ev: MouseEvent): void {
 	if (!hasTabs) return;
 	if (!narrow) return;
 	ev.preventDefault();
@@ -112,20 +112,20 @@ const showTabsPopup = (ev: MouseEvent) => {
 		text: tab.title,
 		icon: tab.icon,
 		active: tab.key != null && tab.key === props.tab,
-		action: (ev) => {
-			onTabClick(tab, ev);
+		action: (tabEv) => {
+			onTabClick(tab, tabEv);
 		},
 	}));
 	popupMenu(menu, ev.currentTarget ?? ev.target);
 };
 
-const preventDrag = (ev: TouchEvent) => {
+function preventDrag(ev: TouchEvent): void {
 	ev.stopPropagation();
-};
+}
 
-const onClick = () => {
+function onClick(): void {
 	scrollToTop(el, { behavior: 'smooth' });
-};
+}
 
 function onTabMousedown(tab: Tab): void {
 	// ユーザビリティの観点からmousedown時にはonClickは呼ばない
@@ -159,8 +159,17 @@ onMounted(() => {
 	globalEvents.on('themeChanged', calcBg);
 
 	watch(() => [props.tab, props.tabs], () => {
+		if (!hasTabs) {
+			return;
+		} else if (props.tab == null) {
+			props.tab = props.tabs[0].key;
+		}
+		if (props.tab == null) {
+			return;
+		}
+
 		nextTick(() => {
-			const tabEl = tabRefs[props.tab];
+			const tabEl = tabRefs[props.tab!];
 			if (tabEl && tabHighlightEl) {
 				// offsetWidth や offsetLeft は少数を丸めてしまうため getBoundingClientRect を使う必要がある
 				// https://developer.mozilla.org/ja/docs/Web/API/HTMLElement/offsetWidth#%E5%80%A4

packages/client/src/components/global/router-view.vue

@@ -11,7 +11,7 @@
 </template>
 
 <script lang="ts" setup>
-import { inject, onUnmounted, watch } from 'vue';
+import { inject, onUnmounted } from 'vue';
 import { Router } from '@/nirax';
 import { defaultStore } from '@/store';
 

packages/client/src/components/launch-pad.vue

@@ -36,7 +36,6 @@
 <script lang="ts" setup>
 import MkModal from '@/components/ui/modal.vue';
 import { menuDef } from '@/menu';
-import { instanceName } from '@/config';
 import { defaultStore } from '@/store';
 import { i18n } from '@/i18n';
 import { deviceKind } from '@/scripts/device-kind';

packages/client/src/components/media-list.vue

@@ -21,7 +21,6 @@ import 'photoswipe/style.css';
 import XBanner from './media-banner.vue';
 import XImage from './media-image.vue';
 import XVideo from './media-video.vue';
-import * as os from '@/os';
 import { FILE_TYPE_BROWSERSAFE } from '@/const';
 
 const props = defineProps<{

packages/client/src/components/page-window.vue

@@ -30,7 +30,6 @@ import XWindow from '@/components/ui/window.vue';
 import { popout as _popout } from '@/scripts/popout';
 import copyToClipboard from '@/scripts/copy-to-clipboard';
 import { url } from '@/config';
-import * as os from '@/os';
 import { mainRouter, routes } from '@/router';
 import { Router } from '@/nirax';
 import { i18n } from '@/i18n';

packages/client/src/pages/admin/abuses.vue

@@ -42,7 +42,6 @@ import { computed } from 'vue';
 import MkSelect from '@/components/form/select.vue';
 import MkPagination from '@/components/ui/pagination.vue';
 import XAbuseReport from '@/components/abuse-report.vue';
-import * as os from '@/os';
 import { i18n } from '@/i18n';
 import { definePageMetadata } from '@/scripts/page-metadata';
 

packages/client/src/pages/admin/index.vue

@@ -23,7 +23,7 @@
 </template>
 
 <script lang="ts" setup>
-import { defineAsyncComponent, inject, nextTick, onMounted, onUnmounted, provide, watch } from 'vue';
+import { defineAsyncComponent, nextTick, onMounted, onUnmounted, provide, watch } from 'vue';
 import { i18n } from '@/i18n';
 import MkSuperMenu from '@/components/ui/super-menu.vue';
 import MkInfo from '@/components/ui/info.vue';
@@ -32,7 +32,7 @@ import { instance } from '@/instance';
 import * as os from '@/os';
 import { lookupUser } from '@/scripts/lookup-user';
 import { useRouter } from '@/router';
-import { definePageMetadata, provideMetadataReceiver } from '@/scripts/page-metadata';
+import { definePageMetadata } from '@/scripts/page-metadata';
 
 const isEmpty = (x: string | null) => x == null || x === '';
 
@@ -51,10 +51,9 @@ const props = defineProps<{
 provide('shouldOmitHeaderTitle', false);
 
 let INFO = $ref(indexInfo);
-let childInfo = $ref(null);
+// FIXME use page instead of props.initialPage
 let page = $ref(props.initialPage);
 let narrow = $ref(false);
-let view = $ref(null);
 let el = $ref(null);
 let pageProps = $ref({});
 let noMaintainerInformation = isEmpty(instance.maintainerName) || isEmpty(instance.maintainerEmail);
@@ -70,7 +69,7 @@ os.api('admin/abuse-user-reports', {
 });
 
 const NARROW_THRESHOLD = 600;
-const ro = new ResizeObserver((entries, observer) => {
+const ro = new ResizeObserver((entries) => {
 	if (entries.length === 0) return;
 	narrow = entries[0].borderBoxSize[0].inlineSize < NARROW_THRESHOLD;
 });
@@ -244,14 +243,6 @@ onUnmounted(() => {
 	ro.disconnect();
 });
 
-provideMetadataReceiver((info) => {
-	if (info == null) {
-		childInfo = null;
-	} else {
-		childInfo = info;
-	}
-});
-
 const invite = () => {
 	os.api('admin/invite').then(x => {
 		os.alert({

packages/client/src/pages/admin/integrations.twitter.vue

@@ -25,7 +25,6 @@
 </template>
 
 <script lang="ts" setup>
-import { defineComponent } from 'vue';
 import FormSwitch from '@/components/form/switch.vue';
 import FormInput from '@/components/form/input.vue';
 import FormButton from '@/components/ui/button.vue';

packages/client/src/pages/admin/object-storage.vue

@@ -73,7 +73,6 @@ import FormSwitch from '@/components/form/switch.vue';
 import FormInput from '@/components/form/input.vue';
 import FormSuspense from '@/components/form/suspense.vue';
 import FormSplit from '@/components/form/split.vue';
-import FormSection from '@/components/form/section.vue';
 import * as os from '@/os';
 import { fetchInstance } from '@/instance';
 import { i18n } from '@/i18n';

packages/client/src/pages/admin/overview.vue

@@ -70,7 +70,7 @@ import MkNumberDiff from '@/components/number-diff.vue';
 import MkContainer from '@/components/ui/container.vue';
 import MkFolder from '@/components/ui/folder.vue';
 import MkQueueChart from '@/components/queue-chart.vue';
-import { version, url } from '@/config';
+import { version } from '@/config';
 import number from '@/filters/number';
 import * as os from '@/os';
 import { stream } from '@/stream';

packages/client/src/pages/admin/relays.vue

@@ -33,7 +33,7 @@ async function addRelay() {
 	if (canceled) return;
 	os.api('admin/relays/add', {
 		inbox,
-	}).then((relay: any) => {
+	}).then(() => {
 		refresh();
 	}).catch((err: any) => {
 		os.alert({

packages/client/src/pages/admin/security.vue

@@ -35,10 +35,7 @@
 <script lang="ts" setup>
 import XBotProtection from './bot-protection.vue';
 import FormFolder from '@/components/form/folder.vue';
-import FormSwitch from '@/components/form/switch.vue';
-import FormInfo from '@/components/ui/info.vue';
 import FormSuspense from '@/components/form/suspense.vue';
-import FormSection from '@/components/form/section.vue';
 import FormInput from '@/components/form/input.vue';
 import FormButton from '@/components/ui/button.vue';
 import * as os from '@/os';
@@ -50,14 +47,14 @@ let summalyProxy: string = $ref('');
 let enableHcaptcha: boolean = $ref(false);
 let enableRecaptcha: boolean = $ref(false);
 
-async function init() {
+async function init(): Promise<void> {
 	const meta = await os.api('admin/meta');
 	summalyProxy = meta.summalyProxy;
 	enableHcaptcha = meta.enableHcaptcha;
 	enableRecaptcha = meta.enableRecaptcha;
 }
 
-function save() {
+function save(): void {
 	os.apiWithDialog('admin/update-meta', {
 		summalyProxy,
 	}).then(() => {

packages/client/src/pages/admin/settings.vue

@@ -185,7 +185,7 @@ let swPrivateKey: any = $ref(null);
 let deeplAuthKey: string = $ref('');
 let deeplIsPro: boolean = $ref(false);
 
-async function init() {
+async function init(): Promise<void> {
 	const meta = await os.api('admin/meta');
 	name = meta.name;
 	description = meta.description;

packages/client/src/pages/admin/users.vue

@@ -30,11 +30,11 @@
 						</MkSelect>
 					</div>
 					<div class="inputs">
-						<MkInput v-model="searchUsername" style="flex: 1;" type="text" :spellcheck="false" @update:modelValue="$refs.users.reload()">
+						<MkInput v-model="searchUsername" style="flex: 1;" type="text" :spellcheck="false" @update:model-value="$refs.users.reload()">
 							<template #prefix>@</template>
 							<template #label>{{ i18n.ts.username }}</template>
 						</MkInput>
-						<MkInput v-model="searchHost" style="flex: 1;" type="text" :spellcheck="false" :disabled="pagination.params.origin === 'local'" @update:modelValue="$refs.users.reload()">
+						<MkInput v-model="searchHost" style="flex: 1;" type="text" :spellcheck="false" :disabled="pagination.params.origin === 'local'" @update:model-value="$refs.users.reload()">
 							<template #prefix>@</template>
 							<template #label>{{ i18n.ts.host }}</template>
 						</MkInput>
@@ -83,13 +83,13 @@ const pagination = {
 	offsetMode: true,
 };
 
-function searchUser() {
+function searchUser(): void {
 	os.selectUser().then(user => {
 		show(user);
 	});
 }
 
-async function addUser() {
+async function addUser(): Promise<void> {
 	const { canceled: canceled1, result: username } = await os.inputText({
 		title: i18n.ts.username,
 	});
@@ -104,12 +104,12 @@ async function addUser() {
 	os.apiWithDialog('admin/accounts/create', {
 		username,
 		password,
-	}).then(res => {
+	}).then(() => {
 		paginationComponent.reload();
 	});
 }
 
-function show(user) {
+function show(user): void {
 	os.pageWindow(`/user-info/${user.id}`);
 }
 

packages/client/src/pages/antenna-timeline.vue

@@ -18,7 +18,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, inject, watch } from 'vue';
+import { computed, watch } from 'vue';
 import XTimeline from '@/components/timeline.vue';
 import { scroll } from '@/scripts/scroll';
 import * as os from '@/os';

packages/client/src/pages/auth.vue

@@ -62,19 +62,19 @@ onMounted(() => {
 		} else {
 			state = 'waiting';
 		}
-	}).catch(error => {
+	}).catch(() => {
 		state = 'fetch-session-error';
 	});
 });
 
-function accepted() {
+function accepted(): void {
 	state = 'accepted';
 	if (session.app.callbackUrl) {
 		location.href = appendQuery(session.app.callbackUrl, query({ token: session.token }));
 	}
 }
 
-function onLogin(res) {
+function onLogin(res): void {
 	login(res.i);
 }
 </script>

packages/client/src/pages/channel-editor.vue

@@ -27,7 +27,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, inject, watch } from 'vue';
+import { computed, watch } from 'vue';
 import MkTextarea from '@/components/form/textarea.vue';
 import MkButton from '@/components/ui/button.vue';
 import MkInput from '@/components/form/input.vue';
@@ -59,7 +59,7 @@ watch(() => bannerId, async () => {
 	}
 });
 
-async function fetchChannel() {
+async function fetchChannel(): Promise<void> {
 	if (props.channelId == null) return;
 
 	channel = await os.api('channels/show', {
@@ -74,7 +74,7 @@ async function fetchChannel() {
 
 fetchChannel();
 
-function save() {
+function save(): void {
 	const params = {
 		name,
 		description,
@@ -94,13 +94,13 @@ function save() {
 	}
 }
 
-function setBannerImage(evt) {
+function setBannerImage(evt): void {
 	selectFile(evt.currentTarget ?? evt.target, null).then(file => {
 		bannerId = file.id;
 	});
 }
 
-function removeBannerImage() {
+function removeBannerImage(): void {
 	bannerId = null;
 }
 

packages/client/src/pages/channel.vue

@@ -32,8 +32,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, inject, watch } from 'vue';
-import MkContainer from '@/components/ui/container.vue';
+import { computed, watch } from 'vue';
 import XPostForm from '@/components/post-form.vue';
 import XTimeline from '@/components/timeline.vue';
 import XChannelFollowButton from '@/components/channel-follow-button.vue';
@@ -51,13 +50,6 @@ const props = defineProps<{
 
 let channel = $ref(null);
 let showBanner = $ref(true);
-const pagination = {
-	endpoint: 'channels/timeline' as const,
-	limit: 10,
-	params: computed(() => ({
-		channelId: props.channelId,
-	})),
-};
 
 watch(() => props.channelId, async () => {
 	channel = await os.api('channels/show', {
@@ -65,11 +57,11 @@ watch(() => props.channelId, async () => {
 	});
 }, { immediate: true });
 
-function edit() {
+function edit(): void {
 	router.push(`/channels/${channel.id}/edit`);
 }
 
-const headerActions = $computed(() => channel && channel.userId ? [{
+const headerActions = $computed(() => channel?.userId ? [{
 	icon: 'fas fa-cog',
 	text: i18n.ts.edit,
 	handler: edit,

packages/client/src/pages/drive.vue

@@ -7,14 +7,13 @@
 <script lang="ts" setup>
 import { computed } from 'vue';
 import XDrive from '@/components/drive.vue';
-import * as os from '@/os';
 import { i18n } from '@/i18n';
 import { definePageMetadata } from '@/scripts/page-metadata';
 
 let folder = $ref(null);
 
 definePageMetadata(computed(() => ({
-	title: folder ? folder.name : i18n.ts.drive,
+	title: folder?.name ?? i18n.ts.drive,
 	icon: 'fas fa-cloud',
 	hideHeader: true,
 })));

packages/client/src/pages/explore.users.vue

@@ -54,13 +54,11 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, watch } from 'vue';
+import { watch } from 'vue';
 import XUserList from '@/components/user-list.vue';
 import MkFolder from '@/components/ui/folder.vue';
-import number from '@/filters/number';
 import * as os from '@/os';
 import { i18n } from '@/i18n';
-import { instance } from '@/instance';
 
 const props = defineProps<{
 	origin: 'local' | 'remote';

packages/client/src/pages/explore.vue

@@ -37,11 +37,8 @@ import XUsers from './explore.users.vue';
 import MkFolder from '@/components/ui/folder.vue';
 import MkInput from '@/components/form/input.vue';
 import MkRadios from '@/components/form/radios.vue';
-import number from '@/filters/number';
-import * as os from '@/os';
 import { definePageMetadata } from '@/scripts/page-metadata';
 import { i18n } from '@/i18n';
-import { instance } from '@/instance';
 import XUserList from '@/components/user-list.vue';
 
 const props = defineProps<{
@@ -60,7 +57,7 @@ watch(() => props.tag, () => {
 const searchPagination = {
 	endpoint: 'users/search' as const,
 	limit: 10,
-	params: computed(() => (searchQuery && searchQuery !== '') ? {
+	params: computed(() => searchQuery ? {
 		query: searchQuery,
 		origin: searchOrigin,
 	} : null),