enhance(frontend): ウィジェットを非表示にできるPageMetaを追加 (#12456)

* (enhance) ウィジェットを非表示にできるPageMetaを追加

* fix lint

* rename

---------

Co-authored-by: syuilo <Syuilotan@yahoo.co.jp>

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

@@ -261,6 +261,7 @@ provideMetadataReceiver((info) => {
 		childInfo.value = null;
 	} else {
 		childInfo.value = info;
+		INFO.value.needWideArea = info.value.needWideArea ?? undefined;
 	}
 });
 
@@ -268,7 +269,7 @@ function invite() {
 	os.api('admin/invite/create').then(x => {
 		os.alert({
 			type: 'info',
-			text: x?.[0].code,
+			text: x[0].code,
 		});
 	}).catch(err => {
 		os.alert({

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

@@ -236,6 +236,7 @@ provideMetadataReceiver((info) => {
 		childInfo.value = null;
 	} else {
 		childInfo.value = info;
+		INFO.value.needWideArea = info.value?.needWideArea ?? undefined;
 	}
 });
 

packages/frontend/src/scripts/page-metadata.ts

@@ -15,6 +15,7 @@ export type PageMetadata = {
 	icon?: string | null;
 	avatar?: Misskey.entities.User | null;
 	userName?: Misskey.entities.User | null;
+	needWideArea?: boolean;
 };
 
 export function definePageMetadata(metadata: PageMetadata | null | Ref<PageMetadata | null> | ComputedRef<PageMetadata | null>): void {

packages/frontend/src/ui/classic.vue

@@ -11,7 +11,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 		<div v-if="!showMenuOnTop" class="sidebar">
 			<XSidebar/>
 		</div>
-		<div v-else ref="widgetsLeft" class="widgets left">
+		<div v-else-if="!pageMetadata?.needWideArea" ref="widgetsLeft" class="widgets left">
 			<XWidgets place="left" :marginTop="'var(--margin)'" @mounted="attachSticky(widgetsLeft)"/>
 		</div>
 
@@ -21,7 +21,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 			</div>
 		</main>
 
-		<div v-if="isDesktop" ref="widgetsRight" class="widgets right">
+		<div v-if="isDesktop && !pageMetadata?.needWideArea" ref="widgetsRight" class="widgets right">
 			<XWidgets :place="showMenuOnTop ? 'right' : null" :marginTop="showMenuOnTop ? '0' : 'var(--margin)'" @mounted="attachSticky(widgetsRight)"/>
 		</div>
 	</div>
@@ -64,7 +64,7 @@ const DESKTOP_THRESHOLD = 1100;
 
 const isDesktop = ref(window.innerWidth >= DESKTOP_THRESHOLD);
 
-const pageMetadata = ref<null | ComputedRef<PageMetadata>>();
+const pageMetadata = ref<null | PageMetadata>();
 const widgetsShowing = ref(false);
 const fullView = ref(false);
 const globalHeaderHeight = ref(0);
@@ -76,9 +76,9 @@ const widgetsRight = ref();
 
 provide('router', mainRouter);
 provideMetadataReceiver((info) => {
-	pageMetadata.value = info;
+	pageMetadata.value = info.value;
-	if (pageMetadata.value.value) {
+	if (pageMetadata.value) {
-		document.title = `${pageMetadata.value.value.title} | ${instanceName}`;
+		document.title = `${pageMetadata.value.title} | ${instanceName}`;
 	}
 });
 provide('shouldHeaderThin', showMenuOnTop.value);

packages/frontend/src/ui/universal.vue

@@ -18,11 +18,11 @@ SPDX-License-Identifier: AGPL-3.0-only
 		<div :class="$style.spacer"></div>
 	</MkStickyContainer>
 
-	<div v-if="isDesktop" :class="$style.widgets">
+	<div v-if="isDesktop && !pageMetadata?.needWideArea" :class="$style.widgets">
 		<XWidgets/>
 	</div>
 
-	<button v-if="!isDesktop && !isMobile" :class="$style.widgetButton" class="_button" @click="widgetsShowing = true"><i class="ti ti-apps"></i></button>
+	<button v-if="(!isDesktop || pageMetadata?.needWideArea) && !isMobile" :class="$style.widgetButton" class="_button" @click="widgetsShowing = true"><i class="ti ti-apps"></i></button>
 
 	<div v-if="isMobile" ref="navFooter" :class="$style.nav">
 		<button :class="$style.navButton" class="_button" @click="drawerMenuShowing = true"><i :class="$style.navButtonIcon" class="ti ti-menu-2"></i><span v-if="menuIndicated" :class="$style.navButtonIndicator"><i class="_indicatorCircle"></i></span></button>
@@ -95,7 +95,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>
 
 <script lang="ts" setup>
-import { defineAsyncComponent, provide, onMounted, computed, ref, ComputedRef, watch, shallowRef, Ref } from 'vue';
+import { defineAsyncComponent, provide, onMounted, computed, ref, watch, shallowRef, Ref } from 'vue';
 import XCommon from './_common_/common.vue';
 import type MkStickyContainer from '@/components/global/MkStickyContainer.vue';
 import { instanceName } from '@/config.js';
@@ -127,16 +127,16 @@ window.addEventListener('resize', () => {
 	isMobile.value = deviceKind === 'smartphone' || window.innerWidth <= MOBILE_THRESHOLD;
 });
 
-const pageMetadata = ref<null | ComputedRef<PageMetadata>>();
+const pageMetadata = ref<null | PageMetadata>();
 const widgetsShowing = ref(false);
 const navFooter = shallowRef<HTMLElement>();
 const contents = shallowRef<InstanceType<typeof MkStickyContainer>>();
 
 provide('router', mainRouter);
 provideMetadataReceiver((info) => {
-	pageMetadata.value = info;
+	pageMetadata.value = info.value;
-	if (pageMetadata.value.value) {
+	if (pageMetadata.value) {
-		document.title = `${pageMetadata.value.value.title} | ${instanceName}`;
+		document.title = `${pageMetadata.value.title} | ${instanceName}`;
 	}
 });