refactor(frontend): remove $store

19 files changed, 74 insertions, 53 deletions

diff --git a/packages/frontend/src/components/MkContainer.vue b/packages/frontend/src/components/MkContainer.vue
index 833fa9d382..e021cfbda9 100644
--- a/packages/frontend/src/components/MkContainer.vue
+++ b/packages/frontend/src/components/MkContainer.vue
@@ -14,10 +14,10 @@
 		</div>
 	</header>
 	<Transition
-		:enter-active-class="$store.state.animation ? $style.transition_toggle_enterActive : ''"
-		:leave-active-class="$store.state.animation ? $style.transition_toggle_leaveActive : ''"
-		:enter-from-class="$store.state.animation ? $style.transition_toggle_enterFrom : ''"
-		:leave-to-class="$store.state.animation ? $style.transition_toggle_leaveTo : ''"
+		:enter-active-class="defaultStore.state.animation ? $style.transition_toggle_enterActive : ''"
+		:leave-active-class="defaultStore.state.animation ? $style.transition_toggle_leaveActive : ''"
+		:enter-from-class="defaultStore.state.animation ? $style.transition_toggle_enterFrom : ''"
+		:leave-to-class="defaultStore.state.animation ? $style.transition_toggle_leaveTo : ''"
 		@enter="enter"
 		@after-enter="afterEnter"
 		@leave="leave"
@@ -35,6 +35,7 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
+import { defaultStore } from '@/store';
 
 export default defineComponent({
 	props: {
@@ -79,6 +80,7 @@ export default defineComponent({
 			showBody: this.expanded,
 			omitted: null,
 			ignoreOmit: false,
+			defaultStore,
 		};
 	},
 	mounted() {
diff --git a/packages/frontend/src/components/MkContextMenu.vue b/packages/frontend/src/components/MkContextMenu.vue
index 21cccaabde..5bdf477241 100644
--- a/packages/frontend/src/components/MkContextMenu.vue
+++ b/packages/frontend/src/components/MkContextMenu.vue
@@ -1,10 +1,10 @@
 <template>
 <Transition
 	appear
-	:enter-active-class="$store.state.animation ? $style.transition_fade_enterActive : ''"
-	:leave-active-class="$store.state.animation ? $style.transition_fade_leaveActive : ''"
-	:enter-from-class="$store.state.animation ? $style.transition_fade_enterFrom : ''"
-	:leave-to-class="$store.state.animation ? $style.transition_fade_leaveTo : ''"
+	:enter-active-class="defaultStore.state.animation ? $style.transition_fade_enterActive : ''"
+	:leave-active-class="defaultStore.state.animation ? $style.transition_fade_leaveActive : ''"
+	:enter-from-class="defaultStore.state.animation ? $style.transition_fade_enterFrom : ''"
+	:leave-to-class="defaultStore.state.animation ? $style.transition_fade_leaveTo : ''"
 >
 	<div ref="rootEl" :class="$style.root" :style="{ zIndex }" @contextmenu.prevent.stop="() => {}">
 		<MkMenu :items="items" :align="'left'" @close="$emit('closed')"/>
@@ -18,6 +18,7 @@ import MkMenu from './MkMenu.vue';
 import { MenuItem } from './types/menu.vue';
 import contains from '@/scripts/contains';
 import * as os from '@/os';
+import { defaultStore } from '@/store';
 
 const props = defineProps<{
 	items: MenuItem[];
diff --git a/packages/frontend/src/components/MkFoldableSection.vue b/packages/frontend/src/components/MkFoldableSection.vue
index d4b1bee9e4..475e01c8d4 100644
--- a/packages/frontend/src/components/MkFoldableSection.vue
+++ b/packages/frontend/src/components/MkFoldableSection.vue
@@ -9,7 +9,7 @@
 		</button>
 	</header>
 	<Transition
-		:name="$store.state.animation ? 'folder-toggle' : ''"
+		:name="defaultStore.state.animation ? 'folder-toggle' : ''"
 		@enter="enter"
 		@after-enter="afterEnter"
 		@leave="leave"
@@ -26,6 +26,7 @@
 import { defineComponent } from 'vue';
 import tinycolor from 'tinycolor2';
 import { miLocalStorage } from '@/local-storage';
+import { defaultStore } from '@/store';
 
 const miLocalStoragePrefix = 'ui:folder:' as const;
 
@@ -44,6 +45,7 @@ export default defineComponent({
 	},
 	data() {
 		return {
+			defaultStore,
 			bg: null,
 			showBody: (this.persistKey && miLocalStorage.getItem(`${miLocalStoragePrefix}${this.persistKey}`)) ? (miLocalStorage.getItem(`${miLocalStoragePrefix}${this.persistKey}`) === 't') : this.expanded,
 		};
diff --git a/packages/frontend/src/components/MkFolder.vue b/packages/frontend/src/components/MkFolder.vue
index 2748a9e491..58cc0de5c8 100644
--- a/packages/frontend/src/components/MkFolder.vue
+++ b/packages/frontend/src/components/MkFolder.vue
@@ -22,10 +22,10 @@
 
 		<div v-if="openedAtLeastOnce" :class="[$style.body, { [$style.bgSame]: bgSame }]" :style="{ maxHeight: maxHeight ? `${maxHeight}px` : null, overflow: maxHeight ? `auto` : null }">
 			<Transition
-				:enter-active-class="$store.state.animation ? $style.transition_toggle_enterActive : ''"
-				:leave-active-class="$store.state.animation ? $style.transition_toggle_leaveActive : ''"
-				:enter-from-class="$store.state.animation ? $style.transition_toggle_enterFrom : ''"
-				:leave-to-class="$store.state.animation ? $style.transition_toggle_leaveTo : ''"
+				:enter-active-class="defaultStore.state.animation ? $style.transition_toggle_enterActive : ''"
+				:leave-active-class="defaultStore.state.animation ? $style.transition_toggle_leaveActive : ''"
+				:enter-from-class="defaultStore.state.animation ? $style.transition_toggle_enterFrom : ''"
+				:leave-to-class="defaultStore.state.animation ? $style.transition_toggle_leaveTo : ''"
 				@enter="enter"
 				@after-enter="afterEnter"
 				@leave="leave"
@@ -46,6 +46,7 @@
 
 <script lang="ts" setup>
 import { nextTick, onMounted } from 'vue';
+import { defaultStore } from '@/store';
 
 const props = withDefaults(defineProps<{
 	defaultOpen?: boolean;
diff --git a/packages/frontend/src/components/MkMention.vue b/packages/frontend/src/components/MkMention.vue
index f586eeff4d..481c3710ca 100644
--- a/packages/frontend/src/components/MkMention.vue
+++ b/packages/frontend/src/components/MkMention.vue
@@ -3,7 +3,7 @@
 	<img :class="$style.icon" :src="`/avatar/@${username}@${host}`" alt="">
 	<span>
 		<span :class="$style.username">@{{ username }}</span>
-		<span v-if="(host != localHost) || $store.state.showFullAcct" :class="$style.host">@{{ toUnicode(host) }}</span>
+		<span v-if="(host != localHost) || defaultStore.state.showFullAcct" :class="$style.host">@{{ toUnicode(host) }}</span>
 	</span>
 </MkA>
 </template>
@@ -14,6 +14,7 @@ import { } from 'vue';
 import tinycolor from 'tinycolor2';
 import { host as localHost } from '@/config';
 import { $i } from '@/account';
+import { defaultStore } from '@/store';
 
 const props = defineProps<{
 	username: string;
diff --git a/packages/frontend/src/components/MkPagination.vue b/packages/frontend/src/components/MkPagination.vue
index a1a61a6fd6..867d432572 100644
--- a/packages/frontend/src/components/MkPagination.vue
+++ b/packages/frontend/src/components/MkPagination.vue
@@ -1,9 +1,9 @@
 <template>
 <Transition
-	:enter-active-class="$store.state.animation ? $style.transition_fade_enterActive : ''"
-	:leave-active-class="$store.state.animation ? $style.transition_fade_leaveActive : ''"
-	:enter-from-class="$store.state.animation ? $style.transition_fade_enterFrom : ''"
-	:leave-to-class="$store.state.animation ? $style.transition_fade_leaveTo : ''"
+	:enter-active-class="defaultStore.state.animation ? $style.transition_fade_enterActive : ''"
+	:leave-active-class="defaultStore.state.animation ? $style.transition_fade_leaveActive : ''"
+	:enter-from-class="defaultStore.state.animation ? $style.transition_fade_enterFrom : ''"
+	:leave-to-class="defaultStore.state.animation ? $style.transition_fade_leaveTo : ''"
 	mode="out-in"
 >
 	<MkLoading v-if="fetching"/>
diff --git a/packages/frontend/src/components/MkReactionsViewer.vue b/packages/frontend/src/components/MkReactionsViewer.vue
index 76faffe926..3219c8a92c 100644
--- a/packages/frontend/src/components/MkReactionsViewer.vue
+++ b/packages/frontend/src/components/MkReactionsViewer.vue
@@ -1,27 +1,28 @@
 <template>
 <TransitionGroup
-	:enter-active-class="$store.state.animation ? $style.transition_x_enterActive : ''"
-	:leave-active-class="$store.state.animation ? $style.transition_x_leaveActive : ''"
-	:enter-from-class="$store.state.animation ? $style.transition_x_enterFrom : ''"
-	:leave-to-class="$store.state.animation ? $style.transition_x_leaveTo : ''"
-	:move-class="$store.state.animation ? $style.transition_x_move : ''"
+	:enter-active-class="defaultStore.state.animation ? $style.transition_x_enterActive : ''"
+	:leave-active-class="defaultStore.state.animation ? $style.transition_x_leaveActive : ''"
+	:enter-from-class="defaultStore.state.animation ? $style.transition_x_enterFrom : ''"
+	:leave-to-class="defaultStore.state.animation ? $style.transition_x_leaveTo : ''"
+	:move-class="defaultStore.state.animation ? $style.transition_x_move : ''"
 	tag="div" :class="$style.root"
 >
 	<XReaction v-for="[reaction, count] in reactions" :key="reaction" :reaction="reaction" :count="count" :is-initial="initialReactions.has(reaction)" :note="note"/>
-	<slot v-if="hasMoreReactions" name="more" />
+	<slot v-if="hasMoreReactions" name="more"/>
 </TransitionGroup>
 </template>
 
 <script lang="ts" setup>
 import * as misskey from 'misskey-js';
-import XReaction from '@/components/MkReactionsViewer.reaction.vue';
 import { watch } from 'vue';
+import XReaction from '@/components/MkReactionsViewer.reaction.vue';
+import { defaultStore } from '@/store';
 
 const props = withDefaults(defineProps<{
-    note: misskey.entities.Note;
-    maxNumber?: number;
+	note: misskey.entities.Note;
+	maxNumber?: number;
 }>(), {
-    maxNumber: Infinity,
+	maxNumber: Infinity,
 });
 
 const initialReactions = new Set(Object.keys(props.note.reactions));
diff --git a/packages/frontend/src/components/MkTimeline.vue b/packages/frontend/src/components/MkTimeline.vue
index 87f7c61a92..6741e7a18b 100644
--- a/packages/frontend/src/components/MkTimeline.vue
+++ b/packages/frontend/src/components/MkTimeline.vue
@@ -1,5 +1,5 @@
 <template>
-<MkNotes ref="tlComponent" :no-gap="!$store.state.showGapBetweenNotesInTimeline" :pagination="pagination" @queue="emit('queue', $event)"/>
+<MkNotes ref="tlComponent" :no-gap="!defaultStore.state.showGapBetweenNotesInTimeline" :pagination="pagination" @queue="emit('queue', $event)"/>
 </template>
 
 <script lang="ts" setup>
@@ -8,6 +8,7 @@ import MkNotes from '@/components/MkNotes.vue';
 import { stream } from '@/stream';
 import * as sound from '@/scripts/sound';
 import { $i } from '@/account';
+import { defaultStore } from '@/store';
 
 const props = defineProps<{
 	src: string;
diff --git a/packages/frontend/src/components/MkToast.vue b/packages/frontend/src/components/MkToast.vue
index 6d59702569..ad53c7f289 100644
--- a/packages/frontend/src/components/MkToast.vue
+++ b/packages/frontend/src/components/MkToast.vue
@@ -1,10 +1,10 @@
 <template>
 <div>
 	<Transition
-		:enter-active-class="$store.state.animation ? $style.transition_toast_enterActive : ''"
-		:leave-active-class="$store.state.animation ? $style.transition_toast_leaveActive : ''"
-		:enter-from-class="$store.state.animation ? $style.transition_toast_enterFrom : ''"
-		:leave-to-class="$store.state.animation ? $style.transition_toast_leaveTo : ''"
+		:enter-active-class="defaultStore.state.animation ? $style.transition_toast_enterActive : ''"
+		:leave-active-class="defaultStore.state.animation ? $style.transition_toast_leaveActive : ''"
+		:enter-from-class="defaultStore.state.animation ? $style.transition_toast_enterFrom : ''"
+		:leave-to-class="defaultStore.state.animation ? $style.transition_toast_leaveTo : ''"
 		appear @after-leave="emit('closed')"
 	>
 		<div v-if="showing" class="_acrylic" :class="$style.root" :style="{ zIndex }">
@@ -19,6 +19,7 @@
 <script lang="ts" setup>
 import { onMounted } from 'vue';
 import * as os from '@/os';
+import { defaultStore } from '@/store';
 
 defineProps<{
 	message: string;
diff --git a/packages/frontend/src/components/MkTooltip.vue b/packages/frontend/src/components/MkTooltip.vue
index 0b0556de39..2d34b090ed 100644
--- a/packages/frontend/src/components/MkTooltip.vue
+++ b/packages/frontend/src/components/MkTooltip.vue
@@ -1,9 +1,9 @@
 <template>
 <Transition
-	:enter-active-class="$store.state.animation ? $style.transition_tooltip_enterActive : ''"
-	:leave-active-class="$store.state.animation ? $style.transition_tooltip_leaveActive : ''"
-	:enter-from-class="$store.state.animation ? $style.transition_tooltip_enterFrom : ''"
-	:leave-to-class="$store.state.animation ? $style.transition_tooltip_leaveTo : ''"
+	:enter-active-class="defaultStore.state.animation ? $style.transition_tooltip_enterActive : ''"
+	:leave-active-class="defaultStore.state.animation ? $style.transition_tooltip_leaveActive : ''"
+	:enter-from-class="defaultStore.state.animation ? $style.transition_tooltip_enterFrom : ''"
+	:leave-to-class="defaultStore.state.animation ? $style.transition_tooltip_leaveTo : ''"
 	appear @after-leave="emit('closed')"
 >
 	<div v-show="showing" ref="el" :class="$style.root" class="_acrylic _shadow" :style="{ zIndex, maxWidth: maxWidth + 'px' }">
@@ -19,6 +19,7 @@
 import { nextTick, onMounted, onUnmounted, shallowRef } from 'vue';
 import * as os from '@/os';
 import { calcPopupPosition } from '@/scripts/popup-position';
+import { defaultStore } from '@/store';
 
 const props = withDefaults(defineProps<{
 	showing: boolean;
diff --git a/packages/frontend/src/components/MkUrlPreview.vue b/packages/frontend/src/components/MkUrlPreview.vue
index 094709e093..635ac3e8bd 100644
--- a/packages/frontend/src/components/MkUrlPreview.vue
+++ b/packages/frontend/src/components/MkUrlPreview.vue
@@ -23,7 +23,7 @@
 </template>
 <template v-else-if="tweetId && tweetExpanded">
 	<div ref="twitter" :class="$style.twitter">
-		<iframe ref="tweet" scrolling="no" frameborder="no" :style="{ position: 'relative', width: '100%', height: `${tweetHeight}px` }" :src="`https://platform.twitter.com/embed/index.html?embedId=${embedId}&amp;hideCard=false&amp;hideThread=false&amp;lang=en&amp;theme=${$store.state.darkMode ? 'dark' : 'light'}&amp;id=${tweetId}`"></iframe>
+		<iframe ref="tweet" scrolling="no" frameborder="no" :style="{ position: 'relative', width: '100%', height: `${tweetHeight}px` }" :src="`https://platform.twitter.com/embed/index.html?embedId=${embedId}&amp;hideCard=false&amp;hideThread=false&amp;lang=en&amp;theme=${defaultStore.state.darkMode ? 'dark' : 'light'}&amp;id=${tweetId}`"></iframe>
 	</div>
 	<div :class="$style.action">
 		<MkButton :small="true" inline @click="tweetExpanded = false">
@@ -77,6 +77,7 @@ import * as os from '@/os';
 import { deviceKind } from '@/scripts/device-kind';
 import MkButton from '@/components/MkButton.vue';
 import { versatileLang } from '@/scripts/intl-const';
+import { defaultStore } from '@/store';
 
 type SummalyResult = Awaited<ReturnType<typeof summaly>>;
 
diff --git a/packages/frontend/src/components/MkUrlPreviewPopup.vue b/packages/frontend/src/components/MkUrlPreviewPopup.vue
index a0ad3c7fdd..e244be3e96 100644
--- a/packages/frontend/src/components/MkUrlPreviewPopup.vue
+++ b/packages/frontend/src/components/MkUrlPreviewPopup.vue
@@ -1,6 +1,6 @@
 <template>
 <div class="fgmtyycl" :style="{ zIndex, top: top + 'px', left: left + 'px' }">
-	<Transition :name="$store.state.animation ? '_transition_zoom' : ''" @after-leave="emit('closed')">
+	<Transition :name="defaultStore.state.animation ? '_transition_zoom' : ''" @after-leave="emit('closed')">
 		<MkUrlPreview v-if="showing" class="_popup _shadow" :url="url"/>
 	</Transition>
 </div>
@@ -10,6 +10,7 @@
 import { onMounted } from 'vue';
 import MkUrlPreview from '@/components/MkUrlPreview.vue';
 import * as os from '@/os';
+import { defaultStore } from '@/store';
 
 const props = defineProps<{
 	showing: boolean;
diff --git a/packages/frontend/src/components/MkUserPopup.vue b/packages/frontend/src/components/MkUserPopup.vue
index 93e914f6dd..37ec1d5ff2 100644
--- a/packages/frontend/src/components/MkUserPopup.vue
+++ b/packages/frontend/src/components/MkUserPopup.vue
@@ -1,9 +1,9 @@
 <template>
 <Transition
-	:enter-active-class="$store.state.animation ? $style.transition_popup_enterActive : ''"
-	:leave-active-class="$store.state.animation ? $style.transition_popup_leaveActive : ''"
-	:enter-from-class="$store.state.animation ? $style.transition_popup_enterFrom : ''"
-	:leave-to-class="$store.state.animation ? $style.transition_popup_leaveTo : ''"
+	:enter-active-class="defaultStore.state.animation ? $style.transition_popup_enterActive : ''"
+	:leave-active-class="defaultStore.state.animation ? $style.transition_popup_leaveActive : ''"
+	:enter-from-class="defaultStore.state.animation ? $style.transition_popup_enterFrom : ''"
+	:leave-to-class="defaultStore.state.animation ? $style.transition_popup_leaveTo : ''"
 	appear @after-leave="emit('closed')"
 >
 	<div v-if="showing" :class="$style.root" class="_popup _shadow" :style="{ zIndex, top: top + 'px', left: left + 'px' }" @mouseover="() => { emit('mouseover'); }" @mouseleave="() => { emit('mouseleave'); }">
@@ -59,6 +59,7 @@ import * as os from '@/os';
 import { getUserMenu } from '@/scripts/get-user-menu';
 import number from '@/filters/number';
 import { i18n } from '@/i18n';
+import { defaultStore } from '@/store';
 
 const props = defineProps<{
 	showing: boolean;
diff --git a/packages/frontend/src/components/MkWindow.vue b/packages/frontend/src/components/MkWindow.vue
index e7ad2b9a43..30b5391e9a 100644
--- a/packages/frontend/src/components/MkWindow.vue
+++ b/packages/frontend/src/components/MkWindow.vue
@@ -1,9 +1,9 @@
 <template>
 <Transition
-	:enter-active-class="$store.state.animation ? $style.transition_window_enterActive : ''"
-	:leave-active-class="$store.state.animation ? $style.transition_window_leaveActive : ''"
-	:enter-from-class="$store.state.animation ? $style.transition_window_enterFrom : ''"
-	:leave-to-class="$store.state.animation ? $style.transition_window_leaveTo : ''"
+	:enter-active-class="defaultStore.state.animation ? $style.transition_window_enterActive : ''"
+	:leave-active-class="defaultStore.state.animation ? $style.transition_window_leaveActive : ''"
+	:enter-from-class="defaultStore.state.animation ? $style.transition_window_enterFrom : ''"
+	:leave-to-class="defaultStore.state.animation ? $style.transition_window_leaveTo : ''"
 	appear
 	@after-leave="$emit('closed')"
 >
@@ -47,6 +47,7 @@ import contains from '@/scripts/contains';
 import * as os from '@/os';
 import { MenuItem } from '@/types/menu';
 import { i18n } from '@/i18n';
+import { defaultStore } from '@/store';
 
 const minHeight = 50;
 const minWidth = 250;
diff --git a/packages/frontend/src/components/MkYoutubePlayer.vue b/packages/frontend/src/components/MkYoutubePlayer.vue
index 460b038838..4d765fe2f7 100644
--- a/packages/frontend/src/components/MkYoutubePlayer.vue
+++ b/packages/frontend/src/components/MkYoutubePlayer.vue
@@ -6,7 +6,7 @@
 	</template>
 
 	<div class="poamfof">
-		<Transition :name="$store.state.animation ? 'fade' : ''" mode="out-in">
+		<Transition :name="defaultStore.state.animation ? 'fade' : ''" mode="out-in">
 			<div v-if="player.url && (player.url.startsWith('http://') || player.url.startsWith('https://'))" class="player">
 				<iframe v-if="!fetching" :src="player.url + (player.url.match(/\?/) ? '&autoplay=1&auto_play=1' : '?autoplay=1&auto_play=1')" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen/>
 			</div>
@@ -21,6 +21,7 @@
 <script lang="ts" setup>
 import MkWindow from '@/components/MkWindow.vue';
 import { versatileLang } from '@/scripts/intl-const';
+import { defaultStore } from '@/store';
 
 const props = defineProps<{
 	url: string;
diff --git a/packages/frontend/src/components/form/suspense.vue b/packages/frontend/src/components/form/suspense.vue
index 936e12aa7b..d4b36381a2 100644
--- a/packages/frontend/src/components/form/suspense.vue
+++ b/packages/frontend/src/components/form/suspense.vue
@@ -1,5 +1,5 @@
 <template>
-<Transition :name="$store.state.animation ? 'fade' : ''" mode="out-in">
+<Transition :name="defaultStore.state.animation ? 'fade' : ''" mode="out-in">
 	<div v-if="pending">
 		<MkLoading/>
 	</div>
@@ -18,6 +18,7 @@
 <script lang="ts">
 import { defineComponent, PropType, ref, watch } from 'vue';
 import MkButton from '@/components/MkButton.vue';
+import { defaultStore } from '@/store';
 
 export default defineComponent({
 	components: {
@@ -72,6 +73,7 @@ export default defineComponent({
 			rejected,
 			result,
 			retry,
+			defaultStore,
 		};
 	},
 });
diff --git a/packages/frontend/src/components/global/MkAcct.vue b/packages/frontend/src/components/global/MkAcct.vue
index 2a43ded9e1..e06ab64e86 100644
--- a/packages/frontend/src/components/global/MkAcct.vue
+++ b/packages/frontend/src/components/global/MkAcct.vue
@@ -1,7 +1,7 @@
 <template>
 <span>
 	<span>@{{ user.username }}</span>
-	<span v-if="user.host || detail || $store.state.showFullAcct" style="opacity: 0.5;">@{{ user.host || host }}</span>
+	<span v-if="user.host || detail || defaultStore.state.showFullAcct" style="opacity: 0.5;">@{{ user.host || host }}</span>
 </span>
 </template>
 
@@ -9,6 +9,7 @@
 import * as misskey from 'misskey-js';
 import { toUnicode } from 'punycode/';
 import { host as hostRaw } from '@/config';
+import { defaultStore } from '@/store';
 
 defineProps<{
 	user: misskey.entities.UserDetailed;
diff --git a/packages/frontend/src/components/global/MkError.vue b/packages/frontend/src/components/global/MkError.vue
index 7390a9dfb9..513ef21d35 100644
--- a/packages/frontend/src/components/global/MkError.vue
+++ b/packages/frontend/src/components/global/MkError.vue
@@ -1,5 +1,5 @@
 <template>
-<Transition :name="$store.state.animation ? '_transition_zoom' : ''" appear>
+<Transition :name="defaultStore.state.animation ? '_transition_zoom' : ''" appear>
 	<div :class="$style.root">
 		<img :class="$style.img" src="https://xn--931a.moe/assets/error.jpg" class="_ghost"/>
 		<p :class="$style.text"><i class="ti ti-alert-triangle"></i> {{ i18n.ts.somethingHappened }}</p>
@@ -11,6 +11,7 @@
 <script lang="ts" setup>
 import MkButton from '@/components/MkButton.vue';
 import { i18n } from '@/i18n';
+import { defaultStore } from '@/store';
 
 const emit = defineEmits<{
 	(ev: 'retry'): void;
diff --git a/packages/frontend/src/components/page/page.post.vue b/packages/frontend/src/components/page/page.post.vue
index 6de0a78694..141141ec80 100644
--- a/packages/frontend/src/components/page/page.post.vue
+++ b/packages/frontend/src/components/page/page.post.vue
@@ -16,6 +16,7 @@ import { apiUrl } from '@/config';
 import * as os from '@/os';
 import { PostBlock } from '@/scripts/hpml/block';
 import { Hpml } from '@/scripts/hpml/evaluator';
+import { defaultStore } from '@/store';
 
 export default defineComponent({
 	components: {
@@ -55,8 +56,8 @@ export default defineComponent({
 					const formData = new FormData();
 					formData.append('file', blob);
 					formData.append('i', this.$i.token);
-					if (this.$store.state.uploadFolder) {
-						formData.append('folderId', this.$store.state.uploadFolder);
+					if (defaultStore.state.uploadFolder) {
+						formData.append('folderId', defaultStore.state.uploadFolder);
 					}
 
 					window.fetch(apiUrl + '/drive/files/create', {