feat(client/friendly): デスクトップモードでタイムラインの横に通知領域を配置するように

CHANGELOG_CHERRYPICK.md

@@ -20,6 +20,7 @@
 - (Friendly) 모바일에서 하단 바를 길게 눌러 나오는 계정 관리 팝업에서 로그아웃 버튼 제거
 - (Friendly) 모바일에서 하단 바를 길게 눌러 나오는 계정 관리 팝업에서 현재 계정의 이름을 표시하도록
 - (Friendly) 데스크톱 헤더 디자인 개선
+- (Friendly) 데스크톱 모드에서 타임라인 옆에 알림 영역을 배치하도록
 - 채팅 및 그룹 기능 유지 (revert: [misskey-dev/misskey#9919](https://github.com/misskey-dev/misskey/pull/9919), [misskey-dev/misskey#9942](https://github.com/misskey-dev/misskey/pull/9942))
 - 클라이언트에서 사용되는 폰트의 확장자를 ttf에서 woff2 및 woff로 변경 ([@mk-castella](https://github.com/libnare/mk-castella/commit/f439b3e007618c02da7a352016b3d0f397311f54))
 - about-misskey 페이지에 CherryPick 관련 정보 추가 및 Misskey 문단 구분명 추가

packages/frontend/src/ui/friendly.vue

@@ -12,6 +12,10 @@
 		</main>
 	</MkStickyContainer>
 
+	<div v-if="isDesktop && mainRouter.currentRoute.value.name !== 'my-notifications'" :class="$style.notificationWidgets">
+		<XNotifications/>
+	</div>
+
 	<div v-if="isDesktop" :class="$style.widgets">
 		<XWidgets/>
 	</div>
@@ -107,6 +111,7 @@ import { eventBus } from '@/scripts/cherrypick/eventBus';
 import { CURRENT_STICKY_BOTTOM } from '@/const';
 import CPAvatar from '@/components/global/CPAvatar-Friendly.vue';
 const XWidgets = defineAsyncComponent(() => import('./universal.widgets.vue'));
+const XNotifications = defineAsyncComponent(() => import('@/pages/notifications.vue'));
 const XSidebar = defineAsyncComponent(() => import('@/ui/friendly/navbar.vue'));
 const XStatusBars = defineAsyncComponent(() => import('@/ui/_common_/statusbars.vue'));
 
@@ -172,9 +177,6 @@ defaultStore.loaded.then(() => {
 		defaultStore.set('widgets', [{
 			name: 'calendar',
 			id: 'a', place: 'right', data: {},
-		}, {
-			name: 'notifications',
-			id: 'b', place: 'right', data: {},
 		}, {
 			name: 'trends',
 			id: 'c', place: 'right', data: {},
@@ -372,6 +374,11 @@ $float-button-size: 65px;
 	}
 }
 
+.notificationWidgets {
+	composes: widgets;
+	padding: initial;
+}
+
 .floatNavButton {
 	display: block;
 	position: fixed;