Enhance(Frontend): データセーバーウィジェットを追加

CHANGELOG_YOJO.md

@@ -7,9 +7,10 @@
 
 ### Client
 - Fix: チュートリアルを現状に合わせて更新[#586](https://github.com/yojo-art/cherrypick/pull/586)
+- Feat: コンパネのファイルに絵文字として利用中ラベルを表示する [#603](https://github.com/yojo-art/cherrypick/pull/603)
+- Enhance: データセーバーウィジェットを追加[#608](https://github.com/yojo-art/cherrypick/pull/608)
 - Enhance: ノート詳細から前後のHTL/LTLを開く機能を追加 [#572](https://github.com/yojo-art/cherrypick/pull/572)
 - Enhance: インポート時にライセンス欄にインポート元を追記する [#573](https://github.com/yojo-art/cherrypick/pull/573)
-- Feat: コンパネのファイルに絵文字として利用中ラベルを表示する [#603](https://github.com/yojo-art/cherrypick/pull/603)
 - Enhance: TLオプション表示有無切り替えの選択肢にメディアタイムラインを追加 [#609](https://github.com/yojo-art/cherrypick/pull/609)
 
 ### Server

locales/index.d.ts

@@ -10264,6 +10264,10 @@ export interface Locale extends ILocale {
          * マスコット画像
          */
         "mascot": string;
+        /**
+         * データセーバー
+         */
+        "dataSaver": string;
     };
     "_cw": {
         /**

locales/ja-JP.yml

@@ -2693,6 +2693,7 @@ _widgets:
   search: "検索"
   dice: "サイコロ"
   mascot: "マスコット画像"
+  dataSaver: "データセーバー"
 
 _cw:
   hide: "隠す"

packages/frontend/src/components/CPDataSaver.vue

@@ -0,0 +1,72 @@
+<!--
+SPDX-FileCopyrightText: syuilo and misskey-project
+SPDX-License-Identifier: AGPL-3.0-only
+-->
+
+<template>
+	<MkFolder>
+		<template #label>{{ i18n.ts.dataSaver }}</template>
+
+		<div class="_gaps_m">
+			<MkInfo v-if="props.showDescription">{{ i18n.ts.reloadRequiredToApplySettings }}</MkInfo>
+
+			<div class="_buttons">
+				<MkButton inline @click="enableAllDataSaver">{{ i18n.ts.enableAll }}</MkButton>
+				<MkButton inline @click="disableAllDataSaver">{{ i18n.ts.disableAll }}</MkButton>
+			</div>
+			<div class="_gaps_m">
+				<MkSwitch v-model="dataSaver.media">
+					{{ i18n.ts._dataSaver._media.title }}
+					<template v-if="props.showDescription" #caption>{{ i18n.ts._dataSaver._media.description }}</template>
+				</MkSwitch>
+				<MkSwitch v-model="dataSaver.avatar">
+					{{ i18n.ts._dataSaver._avatar.title }}
+					<template v-if="props.showDescription" #caption>{{ i18n.ts._dataSaver._avatar.description }}</template>
+				</MkSwitch>
+				<MkSwitch v-model="dataSaver.urlPreview">
+					{{ i18n.ts._dataSaver._urlPreview.title }}
+					<template v-if="props.showDescription" #caption>{{ i18n.ts._dataSaver._urlPreview.description }}</template>
+				</MkSwitch>
+				<MkSwitch v-model="dataSaver.code">
+					{{ i18n.ts._dataSaver._code.title }}
+					<template v-if="props.showDescription" #caption>{{ i18n.ts._dataSaver._code.description }}</template>
+				</MkSwitch>
+			</div>
+		</div>
+	</MkFolder>
+</template>
+
+<script lang="ts" setup>
+import { ref, watch } from 'vue';
+import MkSwitch from '@/components/MkSwitch.vue';
+import { i18n } from '@/i18n.js';
+import { defaultStore } from '@/store.js';
+import MkButton from "@/components/MkButton.vue";
+import MkFolder from "@/components/MkFolder.vue";
+import MkInfo from "@/components/MkInfo.vue";
+
+const props = withDefaults(defineProps<{
+	showDescription?: boolean;
+}>(), {
+	showDescription: true,
+});
+const dataSaver = ref(defaultStore.state.dataSaver);
+
+function enableAllDataSaver() {
+	const g = { ...defaultStore.state.dataSaver };
+	Object.keys(g).forEach((key) => { g[key] = true; });
+	dataSaver.value = g;
+}
+
+function disableAllDataSaver() {
+	const g = { ...defaultStore.state.dataSaver };
+	Object.keys(g).forEach((key) => { g[key] = false; });
+	dataSaver.value = g;
+}
+
+watch(dataSaver, (to) => {
+	defaultStore.set('dataSaver', to);
+}, {
+	deep: true,
+});
+</script>

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

@@ -92,37 +92,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 				<template #label>{{ i18n.ts.numberOfPageCache }}</template>
 				<template #caption>{{ i18n.ts.numberOfPageCacheDescription }}</template>
 			</MkRange>
-
-			<MkFolder>
-				<template #label>{{ i18n.ts.dataSaver }}</template>
-
-				<div class="_gaps_m">
-					<MkInfo>{{ i18n.ts.reloadRequiredToApplySettings }}</MkInfo>
-
-					<div class="_buttons">
-						<MkButton inline @click="enableAllDataSaver">{{ i18n.ts.enableAll }}</MkButton>
-						<MkButton inline @click="disableAllDataSaver">{{ i18n.ts.disableAll }}</MkButton>
-					</div>
-					<div class="_gaps_m">
-						<MkSwitch v-model="dataSaver.media">
-							{{ i18n.ts._dataSaver._media.title }}
-							<template #caption>{{ i18n.ts._dataSaver._media.description }}</template>
-						</MkSwitch>
-						<MkSwitch v-model="dataSaver.avatar">
-							{{ i18n.ts._dataSaver._avatar.title }}
-							<template #caption>{{ i18n.ts._dataSaver._avatar.description }}</template>
-						</MkSwitch>
-						<MkSwitch v-model="dataSaver.urlPreview">
-							{{ i18n.ts._dataSaver._urlPreview.title }}
-							<template #caption>{{ i18n.ts._dataSaver._urlPreview.description }}</template>
-						</MkSwitch>
-						<MkSwitch v-model="dataSaver.code">
-							{{ i18n.ts._dataSaver._code.title }}
-							<template #caption>{{ i18n.ts._dataSaver._code.description }}</template>
-						</MkSwitch>
-					</div>
-				</div>
-			</MkFolder>
+			<XDataSaver/>
 		</div>
 	</FormSection>
 
@@ -155,6 +125,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 <script lang="ts" setup>
 import { computed, ref, watch } from 'vue';
 import { langs } from '@@/js/config.js';
+import XDataSaver from '@/components/CPDataSaver.vue';
 import MkSwitch from '@/components/MkSwitch.vue';
 import MkSelect from '@/components/MkSelect.vue';
 import MkRadios from '@/components/MkRadios.vue';
@@ -177,7 +148,6 @@ import { globalEvents } from '@/events.js';
 import { $i } from '@/account.js';
 
 const lang = ref(miLocalStorage.getItem('lang'));
-const dataSaver = ref(defaultStore.state.dataSaver);
 
 function reloadTimeline() {
 	globalEvents.emit('reloadTimeline');
@@ -296,18 +266,6 @@ function removePinnedList() {
 	defaultStore.set('pinnedUserLists', []);
 }
 
-function enableAllDataSaver() {
-	const g = { ...defaultStore.state.dataSaver };
-	Object.keys(g).forEach((key) => { g[key] = true; });
-	dataSaver.value = g;
-}
-
-function disableAllDataSaver() {
-	const g = { ...defaultStore.state.dataSaver };
-	Object.keys(g).forEach((key) => { g[key] = false; });
-	dataSaver.value = g;
-}
-
 async function learnMoreAutoTranslate() {
 	if (!useAutoTranslate.value) return;
 
@@ -328,12 +286,6 @@ function learnMoreCantUseAutoTranslate() {
 	});
 }
 
-watch(dataSaver, (to) => {
-	defaultStore.set('dataSaver', to);
-}, {
-	deep: true,
-});
-
 const headerActions = computed(() => []);
 
 const headerTabs = computed(() => []);

packages/frontend/src/widgets/WidgetDataSaver.vue

@@ -0,0 +1,35 @@
+<!--
+SPDX-FileCopyrightText: syuilo and misskey-project
+SPDX-License-Identifier: AGPL-3.0-only
+-->
+
+<template>
+	<XDataSaver :showDescription="false" />
+</template>
+
+<script lang="ts" setup>
+import { useWidgetPropsManager, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget.js';
+import { GetFormResultType } from '@/scripts/form.js';
+import XDataSaver from '@/components/CPDataSaver.vue';
+const name = 'dataSaver';
+
+const widgetPropsDef = {
+};
+
+type WidgetProps = GetFormResultType<typeof widgetPropsDef>;
+
+const props = defineProps<WidgetComponentProps<WidgetProps>>();
+const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
+
+const { configure } = useWidgetPropsManager(name,
+	widgetPropsDef,
+	props,
+	emit,
+);
+
+defineExpose<WidgetComponentExpose>({
+	name,
+	configure,
+	id: props.widget ? props.widget.id : null,
+});
+</script>

packages/frontend/src/widgets/index.ts

@@ -37,6 +37,7 @@ export default function(app: App) {
 	app.component('WidgetSearch', defineAsyncComponent(() => import('./WidgetSearch.vue')));
 	app.component('WidgetDice', defineAsyncComponent(() => import('./WidgetDice.vue')));
 	app.component('WidgetMascot', defineAsyncComponent(() => import('./WidgetMascot.vue')));
+	app.component('WidgetDataSaver', defineAsyncComponent(() => import('./WidgetDataSaver.vue')));
 }
 
 export const widgets = [
@@ -71,4 +72,5 @@ export const widgets = [
 	'search',
 	'dice',
 	'mascot',
+	'dataSaver',
 ];