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

locales/index.d.ts

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

locales/ja-JP.yml

@@ -2684,6 +2684,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>{{ 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',
 ];