Merge branch 'fix-10791' into 'develop'

fix: Extract $i from account.ts into reactiveAccount.ts to fix circular dependency

Co-authored-by: minneyar <speed@sakabatou.net>

Closes #10791

See merge request firefish/firefish!10630

packages/client/src/account.ts

@@ -6,17 +6,11 @@ import { apiUrl } from "@/config";
 import { alert, api, popup, popupMenu, waiting } from "@/os";
 import { reloadChannel, unisonReload } from "@/scripts/unison-reload";
 import icon from "@/scripts/icon";
+import { $i } from "@/reactiveAccount";
 
 // TODO: 他のタブと永続化されたstateを同期
 
-type Account = firefish.entities.MeDetailed;
+export type Account = firefish.entities.MeDetailed;
-
-const accountData = localStorage.getItem("account");
-
-// TODO: 外部からはreadonlyに
-export const $i = accountData
-	? reactive(JSON.parse(accountData) as Account)
-	: null;
 
 export const iAmModerator = $i != null && ($i.isAdmin || $i.isModerator);
 export const iAmAdmin = $i?.isAdmin;

packages/client/src/components/MkChatPreview.vue

@@ -66,7 +66,7 @@
 import * as Acct from "firefish-js/built/acct";
 import { i18n } from "@/i18n";
 import { acct } from "@/filters/user";
-import { $i } from "@/account";
+import { $i } from "@/reactiveAccount";
 
 const getAcct = Acct.toString;
 

packages/client/src/components/MkCropperDialog.vue

@@ -42,7 +42,7 @@ import Cropper from "cropperjs";
 import tinycolor from "tinycolor2";
 import XModalWindow from "@/components/MkModalWindow.vue";
 import * as os from "@/os";
-import { $i } from "@/account";
+import { $i } from "@/reactiveAccount";
 import { defaultStore } from "@/store";
 import { apiUrl, url } from "@/config";
 import { query } from "@/scripts/url";

packages/client/src/components/MkDrive.file.vue

@@ -45,7 +45,7 @@ import MkDriveFileThumbnail from "@/components/MkDriveFileThumbnail.vue";
 import bytes from "@/filters/bytes";
 import * as os from "@/os";
 import { i18n } from "@/i18n";
-import { $i } from "@/account";
+import { $i } from "@/reactiveAccount";
 import icon from "@/scripts/icon";
 
 const props = withDefaults(

packages/client/src/components/MkFollowButton.vue

@@ -66,7 +66,7 @@ import type * as firefish from "firefish-js";
 import * as os from "@/os";
 import { stream } from "@/stream";
 import { i18n } from "@/i18n";
-import { $i } from "@/account";
+import { $i } from "@/reactiveAccount";
 import { getUserMenu } from "@/scripts/get-user-menu";
 import { useRouter } from "@/router";
 import { vibrate } from "@/scripts/vibrate";

packages/client/src/components/MkHeatmap.vue

@@ -15,7 +15,7 @@ import { defaultStore } from "@/store";
 import { useChartTooltip } from "@/scripts/use-chart-tooltip";
 import { alpha } from "@/scripts/color";
 import { initChart } from "@/scripts/init-chart";
-import { $i } from "@/account";
+import { $i } from "@/reactiveAccount";
 
 initChart();
 

packages/client/src/components/MkMention.vue

@@ -37,7 +37,7 @@
 import { toUnicode } from "punycode";
 import {} from "vue";
 import { host as localHost } from "@/config";
-import { $i } from "@/account";
+import { $i } from "@/reactiveAccount";
 import { defaultStore } from "@/store";
 
 const props = defineProps<{

packages/client/src/components/MkNote.vue

@@ -294,7 +294,7 @@ import { userPage } from "@/filters/user";
 import * as os from "@/os";
 import { defaultStore, noteViewInterruptors } from "@/store";
 import { reactionPicker } from "@/scripts/reaction-picker";
-import { $i } from "@/account";
+import { $i } from "@/reactiveAccount";
 import { i18n } from "@/i18n";
 import { getNoteMenu } from "@/scripts/get-note-menu";
 import { useNoteCapture } from "@/scripts/use-note-capture";

packages/client/src/components/MkNoteDetailed.vue

@@ -182,7 +182,7 @@ import { userPage } from "@/filters/user";
 import * as os from "@/os";
 import { defaultStore, noteViewInterruptors } from "@/store";
 import { reactionPicker } from "@/scripts/reaction-picker";
-import { $i } from "@/account";
+import { $i } from "@/reactiveAccount";
 import { i18n } from "@/i18n";
 import { getNoteMenu } from "@/scripts/get-note-menu";
 import { useNoteCapture } from "@/scripts/use-note-capture";

packages/client/src/components/MkNoteSub.vue

@@ -210,7 +210,7 @@ import { useRouter } from "@/router";
 import { userPage } from "@/filters/user";
 import * as os from "@/os";
 import { reactionPicker } from "@/scripts/reaction-picker";
-import { $i } from "@/account";
+import { $i } from "@/reactiveAccount";
 import { i18n } from "@/i18n";
 import { useNoteCapture } from "@/scripts/use-note-capture";
 import { defaultStore } from "@/store";

packages/client/src/components/MkNotifications.vue

@@ -54,7 +54,7 @@ import XNotification from "@/components/MkNotification.vue";
 import XList from "@/components/MkDateSeparatedList.vue";
 import XNote from "@/components/MkNote.vue";
 import { stream } from "@/stream";
-import { $i } from "@/account";
+import { $i } from "@/reactiveAccount";
 import { i18n } from "@/i18n";
 
 const props = defineProps<{

packages/client/src/components/MkPostForm.vue

@@ -268,11 +268,8 @@ import { defaultStore, notePostInterruptors, postFormActions } from "@/store";
 import MkInfo from "@/components/MkInfo.vue";
 import { i18n } from "@/i18n";
 import { instance } from "@/instance";
-import {
+import { getAccounts, openAccountMenu as openAccountMenu_ } from "@/account";
-	$i,
+import { $i } from "@/reactiveAccount";
-	getAccounts,
-	openAccountMenu as openAccountMenu_,
-} from "@/account";
 import { uploadFile } from "@/scripts/upload";
 import { deepClone } from "@/scripts/clone";
 import XCheatSheet from "@/components/MkCheatSheetDialog.vue";

packages/client/src/components/MkPushNotificationAllowButton.vue

@@ -55,7 +55,8 @@
 <script setup lang="ts">
 import { ref } from "vue";
 
-import { $i, getAccounts } from "@/account";
+import { getAccounts } from "@/account";
+import { $i } from "@/reactiveAccount";
 import MkButton from "@/components/MkButton.vue";
 import { instance } from "@/instance";
 import { api, apiWithDialog, promiseDialog } from "@/os";

packages/client/src/components/MkQuoteButton.vue

@@ -14,7 +14,7 @@ import { computed } from "vue";
 import type { Note } from "firefish-js/built/entities";
 import { pleaseLogin } from "@/scripts/please-login";
 import * as os from "@/os";
-import { $i } from "@/account";
+import { $i } from "@/reactiveAccount";
 import { i18n } from "@/i18n";
 import { defaultStore } from "@/store";
 import icon from "@/scripts/icon";

packages/client/src/components/MkReactionsViewer.reaction.vue

@@ -28,7 +28,7 @@ import XDetails from "@/components/MkReactionsViewer.details.vue";
 import XReactionIcon from "@/components/MkReactionIcon.vue";
 import * as os from "@/os";
 import { useTooltip } from "@/scripts/use-tooltip";
-import { $i } from "@/account";
+import { $i } from "@/reactiveAccount";
 
 const props = defineProps<{
 	reaction: string;

packages/client/src/components/MkReactionsViewer.vue

@@ -19,7 +19,7 @@
 <script lang="ts" setup>
 import { computed, ref } from "vue";
 import type * as firefish from "firefish-js";
-import { $i } from "@/account";
+import { $i } from "@/reactiveAccount";
 import XReaction from "@/components/MkReactionsViewer.reaction.vue";
 
 const props = defineProps<{

packages/client/src/components/MkRenoteButton.vue

@@ -27,7 +27,7 @@ import Ripple from "@/components/MkRipple.vue";
 import XDetails from "@/components/MkUsersTooltip.vue";
 import { pleaseLogin } from "@/scripts/please-login";
 import * as os from "@/os";
-import { $i } from "@/account";
+import { $i } from "@/reactiveAccount";
 import { useTooltip } from "@/scripts/use-tooltip";
 import { i18n } from "@/i18n";
 import { defaultStore } from "@/store";

packages/client/src/components/MkTimeline.vue

@@ -33,7 +33,7 @@ import XNotes from "@/components/MkNotes.vue";
 import MkInfo from "@/components/MkInfo.vue";
 import { stream } from "@/stream";
 import * as sound from "@/scripts/sound";
-import { $i } from "@/account";
+import { $i } from "@/reactiveAccount";
 import { i18n } from "@/i18n";
 import { defaultStore } from "@/store";
 import icon from "@/scripts/icon";

packages/client/src/components/MkTutorialDialog.vue

@@ -211,7 +211,7 @@ import MkPushNotificationAllowButton from "@/components/MkPushNotificationAllowB
 import FormSwitch from "@/components/form/switch.vue";
 import { defaultStore } from "@/store";
 import { i18n } from "@/i18n";
-import { $i } from "@/account";
+import { $i } from "@/reactiveAccount";
 import { instance } from "@/instance";
 import icon from "@/scripts/icon";
 

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

@@ -138,7 +138,8 @@ import MkFollowButton from "@/components/MkFollowButton.vue";
 import { popupMenu } from "@/os";
 import { scrollToTop } from "@/scripts/scroll";
 import { injectPageMetadata } from "@/scripts/page-metadata";
-import { $i, openAccountMenu as openAccountMenu_ } from "@/account";
+import { openAccountMenu as openAccountMenu_ } from "@/account";
+import { $i } from "@/reactiveAccount";
 import { i18n } from "@/i18n";
 import icon from "@/scripts/icon";
 

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

@@ -21,7 +21,7 @@ import { parse } from "@syuilo/aiscript";
 import XBlock from "./page.block.vue";
 import { Hpml } from "@/scripts/hpml/evaluator";
 import { url } from "@/config";
-import { $i } from "@/account";
+import { $i } from "@/reactiveAccount";
 import { defaultStore } from "@/store";
 
 export default defineComponent({

packages/client/src/init.ts

@@ -43,7 +43,8 @@ import { i18n } from "@/i18n";
 import { alert, api, confirm, popup, post, toast } from "@/os";
 import { stream } from "@/stream";
 import * as sound from "@/scripts/sound";
-import { $i, login, refreshAccount, signout, updateAccount } from "@/account";
+import { login, refreshAccount, signout, updateAccount } from "@/account";
+import { $i } from "@/reactiveAccount";
 import { ColdDeviceStorage, defaultStore } from "@/store";
 import { fetchInstance, instance } from "@/instance";
 import { makeHotkey } from "@/scripts/hotkey";

packages/client/src/navbar.ts

@@ -1,5 +1,5 @@
 import { computed, reactive } from "vue";
-import { $i } from "./account";
+import { $i } from "@/reactiveAccount";
 import { search } from "@/scripts/search";
 import * as os from "@/os";
 import { i18n } from "@/i18n";

packages/client/src/os.ts

@@ -12,7 +12,7 @@ import MkWaitingDialog from "@/components/MkWaitingDialog.vue";
 import MkToast from "@/components/MkToast.vue";
 import MkDialog from "@/components/MkDialog.vue";
 import type { MenuItem } from "@/types/menu";
-import { $i } from "@/account";
+import { $i } from "@/reactiveAccount";
 
 export const pendingApiRequestsCount = ref(0);
 

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

@@ -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 "@/account";
+import { $i } from "@/reactiveAccount";
 import * as os from "@/os";
 import { lookupUser } from "@/scripts/lookup-user";
 import { lookupFile } from "@/scripts/lookup-file";

packages/client/src/pages/auth.vue

@@ -51,7 +51,8 @@ import XForm from "./auth.form.vue";
 import MkSignin from "@/components/MkSignin.vue";
 import MkKeyValue from "@/components/MkKeyValue.vue";
 import * as os from "@/os";
-import { $i, login } from "@/account";
+import { login } from "@/account";
+import { $i } from "@/reactiveAccount";
 import { i18n } from "@/i18n";
 
 const props = defineProps<{

packages/client/src/pages/channel.vue

@@ -103,7 +103,7 @@ import XTimeline from "@/components/MkTimeline.vue";
 import XChannelFollowButton from "@/components/MkChannelFollowButton.vue";
 import * as os from "@/os";
 import { useRouter } from "@/router";
-import { $i } from "@/account";
+import { $i } from "@/reactiveAccount";
 import { i18n } from "@/i18n";
 import { definePageMetadata } from "@/scripts/page-metadata";
 import icon from "@/scripts/icon";

packages/client/src/pages/clip.vue

@@ -31,7 +31,7 @@
 import { computed, provide, ref, watch } from "vue";
 import type * as firefish from "firefish-js";
 import XNotes from "@/components/MkNotes.vue";
-import { $i } from "@/account";
+import { $i } from "@/reactiveAccount";
 import { i18n } from "@/i18n";
 import * as os from "@/os";
 import { definePageMetadata } from "@/scripts/page-metadata";

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

@@ -146,7 +146,7 @@ import MkFolder from "@/components/MkFolder.vue";
 import MkTab from "@/components/MkTab.vue";
 import * as os from "@/os";
 import { i18n } from "@/i18n";
-import { $i } from "@/account";
+import { $i } from "@/reactiveAccount";
 import icon from "@/scripts/icon";
 
 const props = defineProps<{

packages/client/src/pages/follow-requests.vue

@@ -88,7 +88,7 @@ import { acct, userPage } from "@/filters/user";
 import * as os from "@/os";
 import { i18n } from "@/i18n";
 import { definePageMetadata } from "@/scripts/page-metadata";
-import { $i } from "@/account";
+import { $i } from "@/reactiveAccount";
 import icon from "@/scripts/icon";
 
 const paginationComponent = ref<InstanceType<typeof MkPagination>>();

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

@@ -100,7 +100,7 @@ import { stream } from "@/stream";
 import { useRouter } from "@/router";
 import { i18n } from "@/i18n";
 import { definePageMetadata } from "@/scripts/page-metadata";
-import { $i } from "@/account";
+import { $i } from "@/reactiveAccount";
 import { deviceKind } from "@/scripts/device-kind";
 import { defaultStore } from "@/store";
 import icon from "@/scripts/icon";

packages/client/src/pages/messaging/messaging-room.message.vue

@@ -90,7 +90,7 @@ import XMediaList from "@/components/MkMediaList.vue";
 import { extractUrlFromMfm } from "@/scripts/extract-url-from-mfm";
 import MkUrlPreview from "@/components/MkUrlPreview.vue";
 import * as os from "@/os";
-import { $i } from "@/account";
+import { $i } from "@/reactiveAccount";
 import { i18n } from "@/i18n";
 import icon from "@/scripts/icon";
 

packages/client/src/pages/messaging/messaging-room.vue

@@ -122,7 +122,7 @@ import { stream } from "@/stream";
 import * as sound from "@/scripts/sound";
 import { vibrate } from "@/scripts/vibrate";
 import { i18n } from "@/i18n";
-import { $i } from "@/account";
+import { $i } from "@/reactiveAccount";
 import { defaultStore } from "@/store";
 import { definePageMetadata } from "@/scripts/page-metadata";
 import icon from "@/scripts/icon";

packages/client/src/pages/miauth.vue

@@ -82,7 +82,8 @@ import { ref } from "vue";
 import MkSignin from "@/components/MkSignin.vue";
 import MkButton from "@/components/MkButton.vue";
 import * as os from "@/os";
-import { $i, login } from "@/account";
+import { login } from "@/account";
+import { $i } from "@/reactiveAccount";
 import { appendQuery, query } from "@/scripts/url";
 import { i18n } from "@/i18n";
 import icon from "@/scripts/icon";

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

@@ -179,7 +179,7 @@ import { selectFile } from "@/scripts/select-file";
 import { mainRouter } from "@/router";
 import { i18n } from "@/i18n";
 import { definePageMetadata } from "@/scripts/page-metadata";
-import { $i } from "@/account";
+import { $i } from "@/reactiveAccount";
 import icon from "@/scripts/icon";
 
 const props = defineProps<{

packages/client/src/pages/scratchpad.vue

@@ -50,7 +50,7 @@ import MkContainer from "@/components/MkContainer.vue";
 import MkButton from "@/components/MkButton.vue";
 import { createAiScriptEnv } from "@/scripts/aiscript/api";
 import * as os from "@/os";
-import { $i } from "@/account";
+import { $i } from "@/reactiveAccount";
 import { i18n } from "@/i18n";
 import { definePageMetadata } from "@/scripts/page-metadata";
 import icon from "@/scripts/icon";

packages/client/src/pages/settings/2fa.vue

@@ -120,7 +120,7 @@ import MkSwitch from "@/components/form/switch.vue";
 import FormSection from "@/components/form/section.vue";
 import MkFolder from "@/components/MkFolder.vue";
 import * as os from "@/os";
-import { $i } from "@/account";
+import { $i } from "@/reactiveAccount";
 import { i18n } from "@/i18n";
 import icon from "@/scripts/icon";
 

packages/client/src/pages/settings/account-info.vue

@@ -179,7 +179,7 @@ import MkKeyValue from "@/components/MkKeyValue.vue";
 import * as os from "@/os";
 import number from "@/filters/number";
 import bytes from "@/filters/bytes";
-import { $i } from "@/account";
+import { $i } from "@/reactiveAccount";
 import { i18n } from "@/i18n";
 import { definePageMetadata } from "@/scripts/page-metadata";
 import icon from "@/scripts/icon";

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

@@ -34,12 +34,12 @@ import FormSuspense from "@/components/form/suspense.vue";
 import FormButton from "@/components/MkButton.vue";
 import * as os from "@/os";
 import {
-	$i,
 	removeAccount as _removeAccount,
 	addAccount as addAccounts,
 	getAccounts,
 	login,
 } from "@/account";
+import { $i } from "@/reactiveAccount";
 import { i18n } from "@/i18n";
 import { definePageMetadata } from "@/scripts/page-metadata";
 import icon from "@/scripts/icon";

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

@@ -85,7 +85,7 @@ import { defaultStore } from "@/store";
 import MkChart from "@/components/MkChart.vue";
 import { i18n } from "@/i18n";
 import { definePageMetadata } from "@/scripts/page-metadata";
-import { $i } from "@/account";
+import { $i } from "@/reactiveAccount";
 import icon from "@/scripts/icon";
 
 const fetching = ref(true);

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

@@ -66,7 +66,7 @@ import FormSection from "@/components/form/section.vue";
 import FormInput from "@/components/form/input.vue";
 import FormSwitch from "@/components/form/switch.vue";
 import * as os from "@/os";
-import { $i } from "@/account";
+import { $i } from "@/reactiveAccount";
 import { i18n } from "@/i18n";
 import { definePageMetadata } from "@/scripts/page-metadata";
 import icon from "@/scripts/icon";

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

@@ -303,7 +303,7 @@
 
 <script lang="ts" setup>
 import { computed, ref, watch } from "vue";
-import { $i } from "@/account";
+import { $i } from "@/reactiveAccount";
 import FormSwitch from "@/components/form/switch.vue";
 import FormSelect from "@/components/form/select.vue";
 import FormRadios from "@/components/form/radios.vue";

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

@@ -45,7 +45,8 @@ import { computed, onActivated, onMounted, onUnmounted, ref, watch } from "vue";
 import { i18n } from "@/i18n";
 import MkInfo from "@/components/MkInfo.vue";
 import MkSuperMenu from "@/components/MkSuperMenu.vue";
-import { $i, signout } from "@/account";
+import { signout } from "@/account";
+import { $i } from "@/reactiveAccount";
 import { unisonReload } from "@/scripts/unison-reload";
 import { instance } from "@/instance";
 import { useRouter } from "@/router";

packages/client/src/pages/settings/instance-mute.vue

@@ -26,7 +26,7 @@ import FormTextarea from "@/components/form/textarea.vue";
 import MkInfo from "@/components/MkInfo.vue";
 import MkButton from "@/components/MkButton.vue";
 import * as os from "@/os";
-import { $i } from "@/account";
+import { $i } from "@/reactiveAccount";
 import { i18n } from "@/i18n";
 import { definePageMetadata } from "@/scripts/page-metadata";
 import icon from "@/scripts/icon";

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

@@ -60,7 +60,7 @@ import FormInfo from "@/components/MkInfo.vue";
 import * as os from "@/os";
 import { i18n } from "@/i18n";
 import { definePageMetadata } from "@/scripts/page-metadata";
-import { $i } from "@/account";
+import { $i } from "@/reactiveAccount";
 import icon from "@/scripts/icon";
 
 const moveToAccount = ref("");

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

@@ -54,7 +54,7 @@ import { notificationTypes } from "firefish-js";
 import FormButton from "@/components/MkButton.vue";
 import FormSection from "@/components/form/section.vue";
 import * as os from "@/os";
-import { $i } from "@/account";
+import { $i } from "@/reactiveAccount";
 import { i18n } from "@/i18n";
 import { definePageMetadata } from "@/scripts/page-metadata";
 import MkPushNotificationAllowButton from "@/components/MkPushNotificationAllowButton.vue";

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

@@ -65,7 +65,7 @@ import * as os from "@/os";
 import { ColdDeviceStorage, defaultStore } from "@/store";
 import { unisonReload } from "@/scripts/unison-reload";
 import { stream } from "@/stream";
-import { $i } from "@/account";
+import { $i } from "@/reactiveAccount";
 import { i18n } from "@/i18n";
 import { host, version } from "@/config";
 import { definePageMetadata } from "@/scripts/page-metadata";

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

@@ -157,7 +157,7 @@ import FormFolder from "@/components/form/folder.vue";
 import * as os from "@/os";
 import { defaultStore } from "@/store";
 import { i18n } from "@/i18n";
-import { $i } from "@/account";
+import { $i } from "@/reactiveAccount";
 import { definePageMetadata } from "@/scripts/page-metadata";
 import icon from "@/scripts/icon";
 

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

@@ -170,7 +170,7 @@ import FormSlot from "@/components/form/slot.vue";
 import { selectFile } from "@/scripts/select-file";
 import * as os from "@/os";
 import { i18n } from "@/i18n";
-import { $i } from "@/account";
+import { $i } from "@/reactiveAccount";
 import { langmap } from "@/scripts/langmap";
 import { definePageMetadata } from "@/scripts/page-metadata";
 import { host } from "@/config";

packages/client/src/pages/settings/word-mute.vue

@@ -70,7 +70,7 @@ import MkTab from "@/components/MkTab.vue";
 import * as os from "@/os";
 import number from "@/filters/number";
 import { defaultStore } from "@/store";
-import { $i } from "@/account";
+import { $i } from "@/reactiveAccount";
 import { i18n } from "@/i18n";
 import { definePageMetadata } from "@/scripts/page-metadata";
 import icon from "@/scripts/icon";

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

@@ -151,7 +151,7 @@ import FormButton from "@/components/MkButton.vue";
 import FormTextarea from "@/components/form/textarea.vue";
 import FormFolder from "@/components/form/folder.vue";
 
-import { $i } from "@/account";
+import { $i } from "@/reactiveAccount";
 import type { Theme } from "@/scripts/theme";
 import { applyTheme } from "@/scripts/theme";
 import lightTheme from "@/themes/_light.json5";

packages/client/src/pages/timeline.vue

@@ -74,7 +74,7 @@ import * as os from "@/os";
 import { defaultStore } from "@/store";
 import { i18n } from "@/i18n";
 import { instance } from "@/instance";
-import { $i } from "@/account";
+import { $i } from "@/reactiveAccount";
 import { definePageMetadata } from "@/scripts/page-metadata";
 import { deviceKind } from "@/scripts/device-kind";
 import icon from "@/scripts/icon";

packages/client/src/pages/user/home.vue

@@ -392,7 +392,7 @@ import { userPage } from "@/filters/user";
 import { defaultStore } from "@/store";
 import * as os from "@/os";
 import { i18n } from "@/i18n";
-import { $i } from "@/account";
+import { $i } from "@/reactiveAccount";
 import { host } from "@/config";
 import icon from "@/scripts/icon";
 

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

@@ -37,7 +37,7 @@ import * as os from "@/os";
 import { useRouter } from "@/router";
 import { definePageMetadata } from "@/scripts/page-metadata";
 import { i18n } from "@/i18n";
-import { $i } from "@/account";
+import { $i } from "@/reactiveAccount";
 import icon from "@/scripts/icon";
 
 const XHome = defineAsyncComponent(() => import("./home.vue"));

packages/client/src/pizzax.ts

@@ -2,7 +2,7 @@
 
 import type { Ref } from "vue";
 import { onUnmounted, ref, watch } from "vue";
-import { $i } from "./account";
+import { $i } from "@/reactiveAccount";
 import { api } from "./os";
 import { stream } from "./stream";
 

packages/client/src/reactiveAccount.ts

@@ -0,0 +1,9 @@
+import { reactive } from "vue";
+import { Account } from "@/account";
+
+const accountData = localStorage.getItem("account");
+
+// TODO: 外部からはreadonlyに
+export const $i = accountData
+	? reactive(JSON.parse(accountData) as Account)
+	: null;

packages/client/src/router.ts

@@ -1,7 +1,8 @@
 import type { AsyncComponentLoader } from "vue";
 import { defineAsyncComponent, inject } from "vue";
 import { Router } from "@/nirax";
-import { $i, iAmModerator } from "@/account";
+import { iAmModerator } from "@/account";
+import { $i } from "@/reactiveAccount";
 import MkLoading from "@/pages/_loading_.vue";
 import MkError from "@/pages/_error_.vue";
 import { api } from "@/os";

packages/client/src/scripts/aiscript/api.ts

@@ -1,6 +1,6 @@
 import { utils, values } from "@syuilo/aiscript";
 import * as os from "@/os";
-import { $i } from "@/account";
+import { $i } from "@/reactiveAccount";
 
 export function createAiScriptEnv(opts) {
 	let apiRequests = 0;

packages/client/src/scripts/get-note-menu.ts

@@ -1,7 +1,7 @@
 import type { Ref } from "vue";
 import { defineAsyncComponent, inject } from "vue";
 import type * as firefish from "firefish-js";
-import { $i } from "@/account";
+import { $i } from "@/reactiveAccount";
 import { i18n } from "@/i18n";
 import { instance } from "@/instance";
 import * as os from "@/os";

packages/client/src/scripts/get-user-menu.ts

@@ -5,7 +5,8 @@ import copyToClipboard from "@/scripts/copy-to-clipboard";
 import { host } from "@/config";
 import * as os from "@/os";
 import { userActions } from "@/store";
-import { $i, iAmModerator } from "@/account";
+import { iAmModerator } from "@/account";
+import { $i } from "@/reactiveAccount";
 import { mainRouter } from "@/router";
 import type { Router } from "@/nirax";
 import icon from "@/scripts/icon";

packages/client/src/scripts/please-login.ts

@@ -1,5 +1,5 @@
 import { defineAsyncComponent } from "vue";
-import { $i } from "@/account";
+import { $i } from "@/reactiveAccount";
 import { i18n } from "@/i18n";
 import { popup } from "@/os";
 import { vibrate } from "@/scripts/vibrate";

packages/client/src/scripts/upload.ts

@@ -3,7 +3,7 @@ import type * as firefish from "firefish-js";
 import { readAndCompressImage } from "browser-image-resizer";
 import { defaultStore } from "@/store";
 import { apiUrl } from "@/config";
-import { $i } from "@/account";
+import { $i } from "@/reactiveAccount";
 import { alert } from "@/os";
 import { i18n } from "@/i18n";
 

packages/client/src/scripts/use-note-capture.ts

@@ -2,7 +2,7 @@ import type { Ref } from "vue";
 import { onUnmounted } from "vue";
 import type * as firefish from "firefish-js";
 import { stream } from "@/stream";
-import { $i } from "@/account";
+import { $i } from "@/reactiveAccount";
 import * as os from "@/os";
 
 export function useNoteCapture(props: {

packages/client/src/stream.ts

@@ -1,6 +1,6 @@
 import * as firefish from "firefish-js";
 import { markRaw } from "vue";
-import { $i } from "@/account";
+import { $i } from "@/reactiveAccount";
 import { url } from "@/config";
 
 export const stream = markRaw(

packages/client/src/theme-store.ts

@@ -1,6 +1,6 @@
 import type { Theme } from "./scripts/theme";
 import { api } from "@/os";
-import { $i } from "@/account";
+import { $i } from "@/reactiveAccount";
 
 const lsCacheKey = $i ? `themes:${$i.id}` : "";
 

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

@@ -22,7 +22,7 @@ import { swInject } from "./sw-inject";
 import { pendingApiRequestsCount, popup, popups } from "@/os";
 import { uploads } from "@/scripts/upload";
 import * as sound from "@/scripts/sound";
-import { $i } from "@/account";
+import { $i } from "@/reactiveAccount";
 import { stream } from "@/stream";
 
 const XStreamIndicator = defineAsyncComponent(

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

@@ -149,7 +149,8 @@
 import { computed, defineAsyncComponent, ref, watch } from "vue";
 import * as os from "@/os";
 import { navbarItemDef } from "@/navbar";
-import { $i, openAccountMenu as openAccountMenu_ } from "@/account";
+import { openAccountMenu as openAccountMenu_ } from "@/account";
+import { $i } from "@/reactiveAccount";
 import { openHelpMenu_ } from "@/scripts/helpMenu";
 import { defaultStore } from "@/store";
 import { i18n } from "@/i18n";

packages/client/src/ui/_common_/sw-inject.ts

@@ -1,6 +1,7 @@
 import { inject } from "vue";
 import { post } from "@/os";
-import { $i, login } from "@/account";
+import { login } from "@/account";
+import { $i } from "@/reactiveAccount";
 import { defaultStore } from "@/store";
 import { getAccountFromId } from "@/scripts/get-account-from-id";
 import { mainRouter } from "@/router";

packages/client/src/ui/deck.vue

@@ -203,7 +203,7 @@ import XDrawerMenu from "@/ui/_common_/navbar-for-mobile.vue";
 import MkButton from "@/components/MkButton.vue";
 import * as os from "@/os";
 import { navbarItemDef } from "@/navbar";
-import { $i } from "@/account";
+import { $i } from "@/reactiveAccount";
 import { i18n } from "@/i18n";
 import { mainRouter } from "@/router";
 import { unisonReload } from "@/scripts/unison-reload";

packages/client/src/ui/deck/tl-column.vue

@@ -50,7 +50,7 @@ import type { Column } from "./deck-store";
 import { removeColumn, updateColumn } from "./deck-store";
 import XTimeline from "@/components/MkTimeline.vue";
 import * as os from "@/os";
-import { $i } from "@/account";
+import { $i } from "@/reactiveAccount";
 import { instance } from "@/instance";
 import { i18n } from "@/i18n";
 import icon from "@/scripts/icon";

packages/client/src/ui/universal.vue

@@ -199,7 +199,7 @@ import * as os from "@/os";
 import { defaultStore } from "@/store";
 import { navbarItemDef } from "@/navbar";
 import { i18n } from "@/i18n";
-import { $i } from "@/account";
+import { $i } from "@/reactiveAccount";
 import { mainRouter } from "@/router";
 import { provideMetadataReceiver } from "@/scripts/page-metadata";
 import { deviceKind } from "@/scripts/device-kind";

packages/client/src/widgets/activity.vue

@@ -46,7 +46,7 @@ import MkHeatmap from "@/components/MkHeatmap.vue";
 import type { GetFormResultType } from "@/scripts/form";
 import * as os from "@/os";
 import MkContainer from "@/components/MkContainer.vue";
-import { $i } from "@/account";
+import { $i } from "@/reactiveAccount";
 import { i18n } from "@/i18n";
 import icon from "@/scripts/icon";
 

packages/client/src/widgets/aiscript.vue

@@ -34,7 +34,7 @@ import type { GetFormResultType } from "@/scripts/form";
 import * as os from "@/os";
 import MkContainer from "@/components/MkContainer.vue";
 import { createAiScriptEnv } from "@/scripts/aiscript/api";
-import { $i } from "@/account";
+import { $i } from "@/reactiveAccount";
 import { i18n } from "@/i18n";
 import icon from "@/scripts/icon";
 

packages/client/src/widgets/button.vue

@@ -18,7 +18,7 @@ import {
 import type { GetFormResultType } from "@/scripts/form";
 import * as os from "@/os";
 import { createAiScriptEnv } from "@/scripts/aiscript/api";
-import { $i } from "@/account";
+import { $i } from "@/reactiveAccount";
 import MkButton from "@/components/MkButton.vue";
 
 const name = "button";

packages/client/src/widgets/calendar.vue

@@ -54,7 +54,7 @@ import {
 import type { GetFormResultType } from "@/scripts/form";
 import { i18n } from "@/i18n";
 import { useInterval } from "@/scripts/use-interval";
-import { $i } from "@/account";
+import { $i } from "@/reactiveAccount";
 
 const name = "calendar";