refactor

packages/frontend/src/components/MkPageWindow.vue

@@ -117,7 +117,7 @@ windowRouter.addListener('change', ctx => {
 windowRouter.init();
 
 provide(DI.router, windowRouter);
-provide('inAppSearchMarkerId', searchMarkerId);
+provide(DI.inAppSearchMarkerId, searchMarkerId);
 provideMetadataReceiver((metadataGetter) => {
 	const info = metadataGetter();
 	pageMetadata.value = info;
@@ -125,7 +125,7 @@ provideMetadataReceiver((metadataGetter) => {
 provideReactiveMetadata(pageMetadata);
 provide('shouldOmitHeaderTitle', true);
 provide('shouldHeaderThin', true);
-provide('forceSpacerMin', true);
+provide(DI.forceSpacerMin, true);
 
 const contextmenu = computed(() => ([{
 	icon: 'ti ti-player-eject',

packages/frontend/src/components/global/MkSpacer.vue

@@ -14,6 +14,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 <script lang="ts" setup>
 import { inject } from 'vue';
 import { deviceKind } from '@/utility/device-kind.js';
+import { DI } from '@/di.js';
 
 const props = withDefaults(defineProps<{
 	contentMax?: number | null;
@@ -25,7 +26,7 @@ const props = withDefaults(defineProps<{
 	marginMax: 24,
 });
 
-const forceSpacerMin = inject('forceSpacerMin', false) || deviceKind === 'smartphone';
+const forceSpacerMin = inject(DI.forceSpacerMin, false) || deviceKind === 'smartphone';
 </script>
 
 <style lang="scss" module>

packages/frontend/src/components/global/SearchMarker.vue

@@ -21,7 +21,7 @@ import {
 	useTemplateRef,
 	inject,
 } from 'vue';
-import type { Ref } from 'vue';
+import { DI } from '@/di.js';
 
 const props = defineProps<{
 	markerId?: string;
@@ -36,7 +36,7 @@ const rootEl = useTemplateRef('root');
 const rootElMutationObserver = new MutationObserver(() => {
 	checkChildren();
 });
-const injectedSearchMarkerId = inject<Ref<string | null> | null>('inAppSearchMarkerId', null);
+const injectedSearchMarkerId = inject(DI.inAppSearchMarkerId, null);
 const searchMarkerId = computed(() => injectedSearchMarkerId?.value ?? window.location.hash.slice(1));
 const highlighted = ref(props.markerId === searchMarkerId.value);
 

packages/frontend/src/di.ts

@@ -16,4 +16,6 @@ export const DI = {
 	currentStickyBottom: Symbol() as InjectionKey<Ref<number>>,
 	mfmEmojiReactCallback: Symbol() as InjectionKey<(emoji: string) => void>,
 	inModal: Symbol() as InjectionKey<boolean>,
+	inAppSearchMarkerId: Symbol() as InjectionKey<Ref<string | null>>,
+	forceSpacerMin: Symbol() as InjectionKey<boolean>,
 };

packages/frontend/src/ui/deck/column.vue

@@ -49,10 +49,11 @@ import { updateColumn, swapLeftColumn, swapRightColumn, swapUpColumn, swapDownCo
 import * as os from '@/os.js';
 import { i18n } from '@/i18n.js';
 import { prefer } from '@/preferences.js';
+import { DI } from '@/di.js';
 
 provide('shouldHeaderThin', true);
 provide('shouldOmitHeaderTitle', true);
-provide('forceSpacerMin', true);
+provide(DI.forceSpacerMin, true);
 
 const withWallpaper = prefer.s['deck.wallpaper'] != null;