fix(frontend/friendly): ぼかし効果を使用すると、下部のナビゲーションバーの読みやすさが非常に低下する問題

CHANGELOG_CHERRYPICK.md

@@ -27,6 +27,7 @@
 
 ### Client
 - 이모티콘 피커의 검색 건수를 100개로 증가 (misskey-dev/misskey#11371)
+- Fix: (Friendly) 블러 효과를 사용할 때 하단 내비게이션 바의 가독성이 매우 떨어지는 문제
 - Fix: 움직임이 있는 MFM 설정을 사용하지 않아도 `$[rainbow ]`문자를 볼 수 있음 (misskey-dev/misskey#11361)
 - Fix: 모바일에서 헤더의 디자인을 변경하면 블러 설정이 강제됨
 

packages/frontend/src/ui/friendly.vue

@@ -27,7 +27,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 	<button v-if="!isDesktop && !isMobile" :class="[$style.widgetButton, { [$style.showEl]: showEl }]" class="_button" @click="widgetsShowing = true"><i class="ti ti-apps"></i></button>
 
-	<div v-if="isMobile" ref="navFooter" :class="[$style.nav, { [$style.reduceBlurEffect]: !defaultStore.state.useBlurEffect }]">
+	<div v-if="isMobile" ref="navFooter" :class="[$style.nav, { [$style.reduceBlurEffect]: !defaultStore.state.useBlurEffect }]" :style="{ background: bg }">
 		<!-- <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> -->
 		<button :class="[$style.navButton, { [$style.active]: mainRouter.currentRoute.value.name === 'index' }]" class="_button" @click="mainRouter.currentRoute.value.name === 'index' ? top() : mainRouter.replace('/')" @touchstart="openAccountMenu" @touchend="closeAccountMenu"><i :class="$style.navButtonIcon" class="ti ti-home"></i><span v-if="queue > 0" :class="$style.navButtonIndicatorHome"><i class="_indicatorCircle"></i></span></button>
 		<button :class="[$style.navButton, { [$style.active]: mainRouter.currentRoute.value.name === 'explore' }]" class="_button" @click="mainRouter.currentRoute.value.name === 'explore' ? top() : mainRouter.replace('/explore')"><i :class="$style.navButtonIcon" class="ti ti-hash"></i></button>
@@ -95,7 +95,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>
 
 <script lang="ts" setup>
-import { defineAsyncComponent, provide, onMounted, onBeforeUnmount, ref, watch, ComputedRef, shallowRef, Ref } from 'vue';
+import { defineAsyncComponent, provide, onMounted, onBeforeUnmount, ref, watch, ComputedRef, shallowRef, Ref, onUnmounted } from 'vue';
 import XCommon from './_common_/common.vue';
 import type MkStickyContainer from '@/components/global/MkStickyContainer.vue';
 import { instanceName } from '@/config';
@@ -111,6 +111,8 @@ import { miLocalStorage } from '@/local-storage';
 import { eventBus } from '@/scripts/cherrypick/eventBus';
 import { CURRENT_STICKY_BOTTOM } from '@/const';
 import CPAvatar from '@/components/global/CPAvatar-Friendly.vue';
+import tinycolor from 'tinycolor2';
+import { globalEvents } from '@/events';
 
 const XWidgets = defineAsyncComponent(() => import('./universal.widgets.vue'));
 const XNotifications = defineAsyncComponent(() => import('@/pages/notifications.vue'));
@@ -146,10 +148,9 @@ const enablePostButton = [
 
 let showEl = $ref(false);
 let lastScrollPosition = $ref(0);
-
 let queue = $ref(0);
-
 let longTouchNavHome = $ref(false);
+const bg = ref<string | undefined>(undefined);
 
 let pageMetadata = $ref<null | ComputedRef<PageMetadata>>();
 const widgetsShowing = $ref(false);
@@ -201,6 +202,14 @@ defaultStore.loaded.then(() => {
 	}
 });
 
+const calcBg = () => {
+  const rawBg = 'var(--panel)';
+  const tinyBg = tinycolor(rawBg.startsWith('var(') ? getComputedStyle(document.documentElement).getPropertyValue(rawBg.slice(4, -1)) : rawBg);
+  if (defaultStore.state.useBlurEffect) tinyBg.setAlpha(0.7);
+  else tinyBg.setAlpha(1);
+  bg.value = tinyBg.toRgbString();
+};
+
 onMounted(() => {
 	if (!isDesktop.value) {
 		window.addEventListener('resize', () => {
@@ -211,12 +220,19 @@ onMounted(() => {
 	contents.value.rootEl.addEventListener('scroll', onScroll);
 
 	eventBus.on('queueUpdated', (q) => queueUpdated(q));
+
+  calcBg();
+  globalEvents.on('themeChanged', calcBg);
 });
 
 onBeforeUnmount(() => {
 	contents.value.rootEl.removeEventListener('scroll', onScroll);
 });
 
+onUnmounted(() => {
+  globalEvents.off('themeChanged', calcBg);
+});
+
 function onScroll() {
 	const currentScrollPosition = contents.value.rootEl.scrollTop;
 	if (currentScrollPosition < 0) {
@@ -557,15 +573,14 @@ $float-button-size: 65px;
 	display: flex;
 	width: 100%;
 	box-sizing: border-box;
-	-webkit-backdrop-filter: var(--blur, blur(64px));
-	backdrop-filter: var(--blur, blur(64px));
+	-webkit-backdrop-filter: var(--blur, blur(15px));
+	backdrop-filter: var(--blur, blur(15px));
 	border-top: solid 0.5px var(--divider);
 	padding: 0 10px;
 
 	&.reduceBlurEffect {
 		-webkit-backdrop-filter: none;
 		backdrop-filter: none;
-		background-color: var(--panel);
 	}
 }