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

CHANGELOG_CHERRYPICK.md

@@ -45,6 +45,8 @@
 - stella.place 테마 추가 ([libnare/mk-castella@f6f77db](https://github.com/libnare/mk-castella/commit/f6f77dbd7f94b87edd3550ecf59e2bbd1fb3c708))
 
 ### Client
+- (Friendly) 데스크톱 모드에서 타임라인 옆에 위젯 영역을 배치하도록
+- (Friendly) 위젯 영역과 알림 영역의 현재 상태에 따라서 아이콘을 다르게 설정
 - 리노트 전 확인 팝업을 띄움
 - 유저 팝업 디자인 개선
 - 절대 시간으로 표시할 때 툴팁에서는 상대 시간을 표기

locales/en-US.yml

@@ -17,7 +17,8 @@ displayBanner: "Display Banner Image"
 requireRefresh: "When the page needs to refresh"
 performanceWarning: "High resource usage can result in higher device temperatures and faster battery consumption"
 photosensitiveSeizuresWarning: "Can cause photosensitive seizures"
-friendlyEnableNotifications: "Enable/Disable the notification area"
+friendlyEnableNotifications: "Enable/Disable the notifications area"
+friendlyEnableWidgets: "Enable/Disable the widgets area"
 useBoldFont: "Bold Text"
 newNoteReceivedNotification: "When receive a new note notification"
 disableRightClick: "Prohibit right click"

locales/index.d.ts

@@ -21,6 +21,7 @@ export interface Locale {
     "performanceWarning": string;
     "photosensitiveSeizuresWarning": string;
     "friendlyEnableNotifications": string;
+    "friendlyEnableWidgets": string;
     "useBoldFont": string;
     "newNoteReceivedNotification": string;
     "disableRightClick": string;

locales/ja-JP.yml

@@ -18,6 +18,7 @@ requireRefresh: "ページの更新が必要なとき"
 performanceWarning: "リソースを多く使用するため、デバイスの温度が高くなり、バッテリーの消耗が速くなる可能性があります"
 photosensitiveSeizuresWarning: "光敏感性発作を起こす可能性があります"
 friendlyEnableNotifications: "通知領域を有効化/無効化"
+friendlyEnableWidgets: "ウィジェット領域を有効化/無効化"
 useBoldFont: "文字を太くする"
 newNoteReceivedNotification: "新しいノート通知を表示するとき"
 disableRightClick: "右クリックを禁止"

locales/ko-KR.yml

@@ -18,6 +18,7 @@ requireRefresh: "페이지 새로 고침이 필요할 때"
 performanceWarning: "리소스를 많이 사용하므로, 디바이스의 온도가 높아지고 배터리의 소모가 빨라질 수 있어요"
 photosensitiveSeizuresWarning: "광과민성 발작을 일으킬 수 있어요"
 friendlyEnableNotifications: "알림 영역 활성화/비활성화"
+friendlyEnableWidgets: "위젯 영역 활성화/비활성화"
 useBoldFont: "볼드체 텍스트"
 newNoteReceivedNotification: "새 노트 알림을 표시할 때"
 disableRightClick: "우클릭 방지"

packages/frontend/src/pages/timeline.vue

@@ -174,15 +174,23 @@ async function reloadAsk() {
 }
 
 const headerActions = $computed(() => [{
-	icon: 'ti ti-column-insert-left',
+	icon: friendlyEnableNotifications.value ? 'ti ti-notification-off' : 'ti ti-notification',
 	text: i18n.ts.friendlyEnableNotifications,
 	handler: () => {
 		friendlyEnableNotifications.value = !friendlyEnableNotifications.value;
 		reloadAsk();
 	},
+}, {
+	icon: friendlyEnableWidgets.value ? 'ti ti-layout-sidebar-right-collapse' : 'ti ti-layout-sidebar-right-expand',
+	text: i18n.ts.friendlyEnableWidgets,
+	handler: () => {
+		friendlyEnableWidgets.value = !friendlyEnableWidgets.value;
+		reloadAsk();
+	},
 }]);
 
 const friendlyEnableNotifications = computed(defaultStore.makeGetterSetter('friendlyEnableNotifications'));
+const friendlyEnableWidgets = computed(defaultStore.makeGetterSetter('friendlyEnableWidgets'));
 
 const headerTabs = $computed(() => [
 	...(defaultStore.state.enableHomeTimeline ? [{

packages/frontend/src/store.ts

@@ -363,6 +363,10 @@ export const defaultStore = markRaw(new Storage('base', {
 		where: 'device',
 		default: true,
 	},
+	friendlyEnableWidgets: {
+		where: 'device',
+		default: true,
+	},
 	collapseDefault: {
 		where: 'account',
 		default: true,

packages/frontend/src/ui/friendly.vue

@@ -12,7 +12,7 @@
 		<XNotifications/>
 	</div>
 
-	<div v-if="isDesktop" :class="$style.widgets">
+	<div v-if="isDesktop && defaultStore.state.friendlyEnableWidgets" :class="$style.widgets">
 		<XWidgets/>
 	</div>