refactor (client): $instance -> instance

packages/client/src/components/MkDonation.vue

@@ -10,7 +10,7 @@
 				</div>
 				<div :class="$style.text">
 					{{ i18n.ts._aboutFirefish.pleaseDonateToFirefish }}
-					<p v-if="$instance.donationLink">
+					<p v-if="instance.donationLink">
 						{{
 							i18n.t("_aboutFirefish.pleaseDonateToHost", {
 								host: hostname,
@@ -27,9 +27,9 @@
 						>{{ i18n.ts._aboutFirefish.donate }}</MkButton
 					>
 					<MkButton
-						v-if="$instance.donationLink"
+						v-if="instance.donationLink"
 						gradate
-						@click="openExternal($instance.donationLink)"
+						@click="openExternal(instance.donationLink)"
 						>{{
 							i18n.t("_aboutFirefish.donateHost", {
 								host: hostname,

packages/client/src/init.ts

@@ -205,7 +205,6 @@ function checkForSplash() {
 
 	app.config.globalProperties = {
 		$i,
-		$instance: instance,
 	};
 
 	widgets(app);

packages/client/src/instance.ts

@@ -46,10 +46,3 @@ export const emojiTags = computed(() => {
 	}
 	return Array.from(tags);
 });
-
-// このファイルに書きたくないけどここに書かないと何故かVeturが認識しない
-declare module "@vue/runtime-core" {
-	interface ComponentCustomProperties {
-		$instance: typeof instance;
-	}
-}

packages/client/src/pages/about-firefish.vue

@@ -35,7 +35,7 @@
 							><MkEmoji
 								class="emoji"
 								:emoji="emoji.emoji"
-								:custom-emojis="$instance.emojis"
+								:custom-emojis="instance.emojis"
 								:is-reaction="false"
 								:normal="true"
 								:no-style="true"
@@ -96,6 +96,7 @@ import { defaultReactions, defaultStore } from "@/store";
 import * as os from "@/os";
 import { definePageMetadata } from "@/scripts/page-metadata";
 import icon from "@/scripts/icon";
+import { instance } from "@/instance";
 
 let easterEggReady = false;
 const easterEggEmojis = ref([]);

packages/client/src/pages/about.emojis.vue

@@ -56,7 +56,8 @@ import MkFolder from "@/components/MkFolder.vue";
 import MkTab from "@/components/MkTab.vue";
 import { emojiCategories, emojiTags } from "@/instance";
 import { i18n } from "@/i18n";
-import icon from "@/scripts/icon";
+import iconify from "@/scripts/icon";
+import { instance } from "@/instance";
 
 export default defineComponent({
 	components: {
@@ -72,7 +73,7 @@ export default defineComponent({
 		return {
 			q: "",
 			customEmojiCategories: emojiCategories,
-			customEmojis: this.$instance.emojis,
+			customEmojis: instance.emojis,
 			tags: emojiTags,
 			selectedTags: new Set(),
 			searchEmojis: null,
@@ -127,6 +128,10 @@ export default defineComponent({
 				this.selectedTags.add(tag);
 			}
 		},
+
+		icon(name: string): string {
+			return iconify(name);
+		},
 	},
 });
 </script>

packages/client/src/pages/about.vue

@@ -28,7 +28,7 @@
 						<div
 							class="_formBlock fwhjspax"
 							:style="{
-								backgroundImage: `url(${$instance.bannerUrl})`,
+								backgroundImage: `url(${instance.bannerUrl})`,
 							}"
 						>
 							<div class="content">
@@ -41,7 +41,7 @@
 									@click="easterEgg"
 								/>
 								<div class="name">
-									<b>{{ $instance.name || host }}</b>
+									<b>{{ instance.name || host }}</b>
 								</div>
 							</div>
 						</div>
@@ -49,7 +49,7 @@
 						<MkKeyValue class="_formBlock">
 							<template #key>{{ i18n.ts.description }}</template>
 							<template #value
-								><div v-html="$instance.description"></div
+								><div v-html="instance.description"></div
 							></template>
 						</MkKeyValue>
 
@@ -70,7 +70,7 @@
 										i18n.ts.administrator
 									}}</template>
 									<template #value>{{
-										$instance.maintainerName
+										instance.maintainerName
 									}}</template>
 								</MkKeyValue>
 								<MkKeyValue class="_formBlock">
@@ -78,20 +78,20 @@
 										i18n.ts.contact
 									}}</template>
 									<template #value>{{
-										$instance.maintainerEmail
+										instance.maintainerEmail
 									}}</template>
 								</MkKeyValue>
 							</FormSplit>
 							<FormLink
-								v-if="$instance.tosUrl"
-								:to="$instance.tosUrl"
+								v-if="instance.tosUrl"
+								:to="instance.tosUrl"
 								class="_formBlock"
 								external
 								>{{ i18n.ts.tos }}</FormLink
 							>
 							<FormLink
-								v-if="$instance.donationLink"
-								:to="$instance.donationLink"
+								v-if="instance.donationLink"
+								:to="instance.donationLink"
 								external
 							>
 								<template #icon
@@ -99,7 +99,7 @@
 								></template>
 								{{
 									i18n.t("_aboutFirefish.donateHost", {
-										host: $instance.name || host,
+										host: instance.name || host,
 									})
 								}}
 								<template #suffix>Donate</template>

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

@@ -5,7 +5,7 @@
 				<div class="lxpfedzu">
 					<div class="banner">
 						<img
-							:src="$instance.iconUrl || '/favicon.ico'"
+							:src="instance.iconUrl || '/favicon.ico'"
 							alt=""
 							class="icon"
 						/>
@@ -73,7 +73,7 @@ import MkSuperMenu from "@/components/MkSuperMenu.vue";
 import MkInfo from "@/components/MkInfo.vue";
 import { instance } from "@/instance";
 import { version } from "@/config";
-import { $i } from "@/reactiveAccount";
+import { $i, isAdmin } from "@/reactiveAccount";
 import * as os from "@/os";
 import { lookupUser } from "@/scripts/lookup-user";
 import { lookupFile } from "@/scripts/lookup-file";
@@ -214,7 +214,7 @@ const menuDef = computed(() => [
 			},
 		],
 	},
-	...($i?.isAdmin
+	...(isAdmin
 		? [
 				{
 					title: i18n.ts.settings,

packages/client/src/ui/_common_/navbar.vue

@@ -145,12 +145,6 @@
 						:class="icon('help icon ph-info ph-xl ph-fw', false)"
 					></i>
 				</button>
-				<!-- <button v-click-anime v-tooltip.noDelay.right="$instance.name ?? i18n.ts.instance" class="item _button instance" @click="openInstanceMenu">
-				<img :src="$instance.faviconUrl || $instance.iconUrl || '/favicon.ico'" alt="" class="icon"/>
-			</button> -->
-				<!-- <button v-click-anime v-tooltip.noDelay.right="`${i18n.ts.account}: @${$i.username}`" class="item _button account" @click="openAccountMenu">
-				<MkAvatar :user="$i" class="account"/><MkAcct class="text" :user="$i"/>
-			</button> -->
 			</div>
 		</div>
 	</header>

packages/client/src/ui/visitor/a.vue

@@ -3,7 +3,7 @@
 		<div
 			v-if="mainRouter.currentRoute?.name === 'index'"
 			class="banner"
-			:style="{ backgroundImage: `url(${$instance.bannerUrl})` }"
+			:style="{ backgroundImage: `url(${instance.bannerUrl})` }"
 		>
 			<div>
 				<h1 v-if="meta">
@@ -32,7 +32,7 @@
 		<div
 			v-else
 			class="banner-mini"
-			:style="{ backgroundImage: `url(${$instance.bannerUrl})` }"
+			:style="{ backgroundImage: `url(${instance.bannerUrl})` }"
 		>
 			<div>
 				<h1 v-if="meta">
@@ -86,6 +86,7 @@ import MkButton from "@/components/MkButton.vue";
 import { ColdDeviceStorage, defaultStore } from "@/store";
 import { mainRouter } from "@/router";
 import { i18n } from "@/i18n";
+import { instance } from "@/instance";
 
 const DESKTOP_THRESHOLD = 1100;
 

packages/client/src/ui/visitor/kanban.vue

@@ -4,7 +4,7 @@
 		:style="{
 			backgroundImage: transparent
 				? 'none'
-				: `url(${$instance.backgroundImageUrl})`,
+				: `url(${instance.backgroundImageUrl})`,
 		}"
 	>
 		<div class="back" :class="{ transparent }"></div>
@@ -91,6 +91,7 @@ import XSigninDialog from "@/components/MkSigninDialog.vue";
 import XSignupDialog from "@/components/MkSignupDialog.vue";
 import MkButton from "@/components/MkButton.vue";
 import { i18n } from "@/i18n";
+import { instance } from "@/instance";
 
 export default defineComponent({
 	components: {
@@ -128,6 +129,7 @@ export default defineComponent({
 				limit: 10,
 			},
 			i18n,
+			instance,
 		};
 	},
 

packages/client/src/widgets/server-info.vue

@@ -3,14 +3,14 @@
 		<div
 			:class="$style.container"
 			:style="{
-				backgroundImage: `url(${$instance.bannerUrl})`,
+				backgroundImage: `url(${instance.bannerUrl})`,
 			}"
 		>
 			<div :class="$style.iconContainer">
 				<img
 					:src="
-						$instance.faviconUrl ||
-						$instance.iconUrl ||
+						instance.faviconUrl ||
+						instance.iconUrl ||
 						'/favicon.ico'
 					"
 					alt="Instance logo"
@@ -20,7 +20,7 @@
 			<div :class="$style.bodyContainer">
 				<div :class="$style.body">
 					<MkA :class="$style.name" to="/about" behavior="window">{{
-						$instance.name
+						instance.name
 					}}</MkA>
 					<div :class="$style.host">{{ host }}</div>
 				</div>
@@ -34,6 +34,7 @@ import type { Widget, WidgetComponentExpose } from "./widget";
 import { useWidgetPropsManager } from "./widget";
 import type { GetFormResultType } from "@/scripts/form";
 import { host } from "@/config";
+import { instance } from "@/instance";
 
 const name = "serverInfo";