enhance(frontend): ウィンドウの初期サイズを画面サイズから動的に決めるように (#17257)

* enhance(frontend): ウィンドウの初期サイズを画面サイズから動的に決めるように

* Update Changelog

---------

Co-authored-by: syuilo <4439005+syuilo@users.noreply.github.com>

CHANGELOG.md

@@ -4,6 +4,7 @@
 - 依存関係の更新
 
 ### Client
+- Enhance: アプリ内ウィンドウの初期サイズを画面サイズに応じて自動で調整するように
 - Fix: 絵文字パレットが空の状態でMisskeyについてのページが閲覧できない問題を修正
 - Fix: ウィンドウのタイトルをクリックしても最前面に出ないことがある問題を修正
 

packages/frontend/src/components/MkDriveWindow.vue

@@ -6,8 +6,6 @@ SPDX-License-Identifier: AGPL-3.0-only
 <template>
 <MkWindow
 	ref="window"
-	:initialWidth="800"
-	:initialHeight="500"
 	:canResize="true"
 	@closed="emit('closed')"
 >

packages/frontend/src/components/MkPageWindow.vue

@@ -6,8 +6,6 @@ SPDX-License-Identifier: AGPL-3.0-only
 <template>
 <MkWindow
 	ref="windowEl"
-	:initialWidth="500"
-	:initialHeight="500"
 	:canResize="true"
 	:closeButton="true"
 	:buttonsLeft="buttonsLeft"

packages/frontend/src/components/MkWindow.vue

@@ -106,8 +106,8 @@ function capturePointer(evt: PointerEvent) {
 }
 
 const props = withDefaults(defineProps<{
-	initialWidth: number;
+	initialWidth?: number | null;
-	initialHeight: number | null;
+	initialHeight?: number | null;
 	canResize?: boolean;
 	closeButton?: boolean;
 	mini?: boolean;
@@ -116,7 +116,7 @@ const props = withDefaults(defineProps<{
 	buttonsLeft?: WindowButton[];
 	buttonsRight?: WindowButton[];
 }>(), {
-	initialWidth: 400,
+	initialWidth: null,
 	initialHeight: null,
 	canResize: false,
 	closeButton: true,
@@ -131,6 +131,12 @@ const emit = defineEmits<{
 	(ev: 'closed'): void;
 }>();
 
+const INITIAL_WINDOW_WIDTH_RATIO = 0.5;
+const INITIAL_WINDOW_HEIGHT_RATIO = 0.75;
+const INITIAL_WINDOW_WIDTH_MIN = 400; // スクリーンの最小幅に合わせるのはapplyTransormWidthの担当
+const INITIAL_WINDOW_WIDTH_MAX = 1000; // 画面幅いっぱいに広がるのを防止するための最大幅
+const INITIAL_WINDOW_HEIGHT_MIN = 500; // スクリーンの最小幅に合わせるのはapplyTransormHeightの担当
+
 provide('inWindow', true);
 
 const rootEl = useTemplateRef('rootEl');
@@ -484,8 +490,14 @@ function onBrowserResize() {
 }
 
 onMounted(() => {
-	applyTransformWidth(props.initialWidth);
+	let initialWidth = props.initialWidth;
-	if (props.initialHeight) applyTransformHeight(props.initialHeight);
+	let initialHeight = props.initialHeight;
+
+	if (initialWidth == null) initialWidth = Math.min(Math.max(Math.round(window.innerWidth * INITIAL_WINDOW_WIDTH_RATIO), INITIAL_WINDOW_WIDTH_MIN), INITIAL_WINDOW_WIDTH_MAX);
+	if (initialHeight == null) initialHeight = Math.max(Math.round(window.innerHeight * INITIAL_WINDOW_HEIGHT_RATIO), INITIAL_WINDOW_HEIGHT_MIN);
+
+	applyTransformWidth(initialWidth);
+	applyTransformHeight(initialHeight);
 
 	if (rootEl.value) {
 		applyTransformTop((window.innerHeight / 2) - (rootEl.value.offsetHeight / 2));