Revert "refactor: 画面サイズのしきい値をconstにまとめる"

This reverts commit 05ca36f400.

packages/frontend/src/components/MkUrlPreview.vue

@@ -86,7 +86,6 @@ SPDX-License-Identifier: AGPL-3.0-only
 import { defineAsyncComponent, onDeactivated, onUnmounted, ref } from 'vue';
 import type { summaly } from '@misskey-dev/summaly';
 import { url as local } from '@/config.js';
-import { MOBILE_THRESHOLD } from '@/const.js';
 import { i18n } from '@/i18n.js';
 import * as os from '@/os.js';
 import { deviceKind } from '@/scripts/device-kind.js';
@@ -108,6 +107,7 @@ const props = withDefaults(defineProps<{
 	showActions: true,
 });
 
+const MOBILE_THRESHOLD = 500;
 const isMobile = ref(deviceKind === 'smartphone' || window.innerWidth <= MOBILE_THRESHOLD);
 
 const self = props.url.startsWith(local);

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

@@ -48,7 +48,6 @@ import { scrollToTop } from '@/scripts/scroll.js';
 import { globalEvents } from '@/events.js';
 import { injectReactiveMetadata } from '@/scripts/page-metadata.js';
 import { $i, openAccountMenu as openAccountMenu_ } from '@/account.js';
-import { MOBILE_THRESHOLD } from '@/const.js';
 import { PageHeaderItem } from '@/types/page-header.js';
 
 const props = withDefaults(defineProps<{
@@ -113,10 +112,10 @@ onMounted(() => {
 	globalEvents.on('themeChanged', calcBg);
 
 	if (el.value && el.value.parentElement) {
-		narrow.value = el.value.parentElement.offsetWidth < MOBILE_THRESHOLD;
+		narrow.value = el.value.parentElement.offsetWidth < 500;
 		ro = new ResizeObserver((entries, observer) => {
 			if (el.value && el.value.parentElement && document.body.contains(el.value as HTMLElement)) {
-				narrow.value = el.value.parentElement.offsetWidth < MOBILE_THRESHOLD;
+				narrow.value = el.value.parentElement.offsetWidth < 500;
 			}
 		});
 		ro.observe(el.value.parentElement as HTMLElement);

packages/frontend/src/const.ts

@@ -106,9 +106,6 @@ export const ROLE_POLICIES = [
 export const CURRENT_STICKY_TOP = 'CURRENT_STICKY_TOP';
 export const CURRENT_STICKY_BOTTOM = 'CURRENT_STICKY_BOTTOM';
 
-export const DESKTOP_THRESHOLD = 1100;
-export const MOBILE_THRESHOLD = 500;
-
 export const DEFAULT_SERVER_ERROR_IMAGE_URL = 'https://xn--931a.moe/assets/error.jpg';
 export const DEFAULT_NOT_FOUND_IMAGE_URL = 'https://xn--931a.moe/assets/not-found.jpg';
 export const DEFAULT_INFO_IMAGE_URL = 'https://xn--931a.moe/assets/info.jpg';

packages/frontend/src/pages/settings/api.vue

@@ -15,13 +15,12 @@ SPDX-License-Identifier: AGPL-3.0-only
 import { defineAsyncComponent, ref, computed } from 'vue';
 import FormLink from '@/components/form/link.vue';
 import MkButton from '@/components/MkButton.vue';
-import { DESKTOP_THRESHOLD } from '@/const.js';
 import * as os from '@/os.js';
 import { misskeyApi } from '@/scripts/misskey-api.js';
 import { i18n } from '@/i18n.js';
 import { definePageMetadata } from '@/scripts/page-metadata.js';
 
-const isDesktop = ref(window.innerWidth >= DESKTOP_THRESHOLD);
+const isDesktop = ref(window.innerWidth >= 1100);
 
 function generateToken() {
 	const { dispose } = os.popup(defineAsyncComponent(() => import('@/components/MkTokenGenerateWindow.vue')), {}, {

packages/frontend/src/scripts/scroll.ts

@@ -2,7 +2,6 @@
  * SPDX-FileCopyrightText: syuilo and misskey-project
  * SPDX-License-Identifier: AGPL-3.0-only
  */
-import { MOBILE_THRESHOLD } from "@/const.js";
 
 type ScrollBehavior = 'auto' | 'smooth' | 'instant';
 
@@ -119,7 +118,7 @@ export function scrollToBottom(
 		container.scroll({ top: el.scrollHeight - container.clientHeight + getStickyTop(el, container) || 0, ...options });
 	} else {
 		window.scroll({
-			top: (el.scrollHeight - window.innerHeight + getStickyTop(el, container) + (window.innerWidth <= MOBILE_THRESHOLD ? 96 : 0)) || 0,
+			top: (el.scrollHeight - window.innerHeight + getStickyTop(el, container) + (window.innerWidth <= 500 ? 96 : 0)) || 0,
 			...options,
 		});
 	}

packages/frontend/src/ui/classic.vue

@@ -50,7 +50,6 @@ import { defineAsyncComponent, onMounted, provide, ref, computed, shallowRef } f
 import XSidebar from './classic.sidebar.vue';
 import XCommon from './_common_/common.vue';
 import { instanceName } from '@/config.js';
-import { DESKTOP_THRESHOLD } from '@/const.js';
 import { StickySidebar } from '@/scripts/sticky-sidebar.js';
 import * as os from '@/os.js';
 import { PageMetadata, provideMetadataReceiver, provideReactiveMetadata } from '@/scripts/page-metadata.js';
@@ -63,6 +62,8 @@ const XWidgets = defineAsyncComponent(() => import('./universal.widgets.vue'));
 
 const isRoot = computed(() => mainRouter.currentRoute.value.name === 'index');
 
+const DESKTOP_THRESHOLD = 1100;
+
 const isDesktop = ref(window.innerWidth >= DESKTOP_THRESHOLD);
 
 const pageMetadata = ref<null | PageMetadata>(null);

packages/frontend/src/ui/deck.vue

@@ -101,7 +101,6 @@ import XSidebar from '@/ui/_common_/navbar.vue';
 import XDrawerMenu from '@/ui/_common_/navbar-for-mobile.vue';
 import MkButton from '@/components/MkButton.vue';
 import * as os from '@/os.js';
-import { MOBILE_THRESHOLD } from '@/const.js';
 import { navbarItemDef } from '@/navbar.js';
 import { $i } from '@/account.js';
 import { i18n } from '@/i18n.js';
@@ -146,9 +145,9 @@ mainRouter.navHook = (path, flag): boolean => {
 	return false;
 };
 
-const isMobile = ref(window.innerWidth <= MOBILE_THRESHOLD);
+const isMobile = ref(window.innerWidth <= 500);
 window.addEventListener('resize', () => {
-	isMobile.value = window.innerWidth <= MOBILE_THRESHOLD;
+	isMobile.value = window.innerWidth <= 500;
 });
 
 const snapScroll = deviceKind === 'smartphone' || deviceKind === 'tablet';

packages/frontend/src/ui/universal.vue

@@ -108,7 +108,7 @@ import { $i } from '@/account.js';
 import { PageMetadata, provideMetadataReceiver, provideReactiveMetadata } from '@/scripts/page-metadata.js';
 import { deviceKind } from '@/scripts/device-kind.js';
 import { miLocalStorage } from '@/local-storage.js';
-import { CURRENT_STICKY_BOTTOM, DESKTOP_THRESHOLD, MOBILE_THRESHOLD } from '@/const.js';
+import { CURRENT_STICKY_BOTTOM } from '@/const.js';
 import { useScrollPositionManager } from '@/nirax.js';
 import { mainRouter } from '@/router/main.js';
 
@@ -119,6 +119,9 @@ const XAnnouncements = defineAsyncComponent(() => import('@/ui/_common_/announce
 
 const isRoot = computed(() => mainRouter.currentRoute.value.name === 'index');
 
+const DESKTOP_THRESHOLD = 1100;
+const MOBILE_THRESHOLD = 500;
+
 // デスクトップでウィンドウを狭くしたときモバイルUIが表示されて欲しいことはあるので deviceKind === 'desktop' の判定は行わない
 const isDesktop = ref(window.innerWidth >= DESKTOP_THRESHOLD);
 const isMobile = ref(deviceKind === 'smartphone' || window.innerWidth <= MOBILE_THRESHOLD);

packages/frontend/src/ui/visitor.vue

@@ -72,7 +72,6 @@ SPDX-License-Identifier: AGPL-3.0-only
 import { onMounted, provide, ref, computed } from 'vue';
 import XCommon from './_common_/common.vue';
 import { instanceName } from '@/config.js';
-import { DESKTOP_THRESHOLD } from '@/const.js';
 import * as os from '@/os.js';
 import { instance } from '@/instance.js';
 import XSigninDialog from '@/components/MkSigninDialog.vue';
@@ -85,6 +84,8 @@ import { mainRouter } from '@/router/main.js';
 
 const isRoot = computed(() => mainRouter.currentRoute.value.name === 'index');
 
+const DESKTOP_THRESHOLD = 1100;
+
 const pageMetadata = ref<null | PageMetadata>(null);
 
 provide('router', mainRouter);