From 500a5615f08f6926d12ef83466b4b642549cb756 Mon Sep 17 00:00:00 2001
From: syuilo <4439005+syuilo@users.noreply.github.com>
Date: Tue, 1 Apr 2025 13:18:49 +0900
Subject: [PATCH] =?UTF-8?q?enhance(frontend):=20=E5=A3=81=E7=B4=99?=
 =?UTF-8?q?=E3=82=92=E3=83=87=E3=83=83=E3=82=AD=E8=A8=AD=E5=AE=9A=E3=81=AE?=
 =?UTF-8?q?=E4=B8=80=E9=83=A8=E3=81=AB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/backend/src/server/web/boot.js       |  5 ----
 packages/frontend-shared/themes/_dark.json5   |  1 -
 packages/frontend-shared/themes/_light.json5  |  1 -
 packages/frontend-shared/themes/d-astro.json5 |  1 -
 packages/frontend-shared/themes/d-u0.json5    |  1 -
 packages/frontend-shared/themes/l-u0.json5    |  1 -
 packages/frontend-shared/themes/l-vivid.json5 |  1 -
 packages/frontend/src/local-storage.ts        |  1 -
 packages/frontend/src/pages/settings/deck.vue | 25 ++++++++++++++++++-
 .../frontend/src/pages/settings/theme.vue     | 24 +-----------------
 packages/frontend/src/preferences/def.ts      |  3 +++
 packages/frontend/src/ui/deck.vue             | 15 +++++------
 packages/frontend/src/ui/deck/column.vue      |  4 +--
 .../utility/autogen/settings-search-index.ts  | 24 +++++++++---------
 14 files changed, 50 insertions(+), 57 deletions(-)

diff --git a/packages/backend/src/server/web/boot.js b/packages/backend/src/server/web/boot.js
index b55d327f86..24794cbf2a 100644
--- a/packages/backend/src/server/web/boot.js
+++ b/packages/backend/src/server/web/boot.js
@@ -127,11 +127,6 @@
 		document.documentElement.classList.add('useSystemFont');
 	}
 
-	const wallpaper = localStorage.getItem('wallpaper');
-	if (wallpaper) {
-		document.documentElement.style.backgroundImage = `url(${wallpaper})`;
-	}
-
 	const customCss = localStorage.getItem('customCss');
 	if (customCss && customCss.length > 0) {
 		const style = document.createElement('style');
diff --git a/packages/frontend-shared/themes/_dark.json5 b/packages/frontend-shared/themes/_dark.json5
index 6a67cd0f23..d960e627ef 100644
--- a/packages/frontend-shared/themes/_dark.json5
+++ b/packages/frontend-shared/themes/_dark.json5
@@ -64,7 +64,6 @@
 		inputBorder: 'rgba(255, 255, 255, 0.1)',
 		inputBorderHover: 'rgba(255, 255, 255, 0.2)',
 		driveFolderBg: ':alpha<0.3<@accent',
-		wallpaperOverlay: 'rgba(0, 0, 0, 0.5)',
 		badge: '#31b1ce',
 		messageBg: '@bg',
 		success: '#86b300',
diff --git a/packages/frontend-shared/themes/_light.json5 b/packages/frontend-shared/themes/_light.json5
index 4b7582457a..90912df3e3 100644
--- a/packages/frontend-shared/themes/_light.json5
+++ b/packages/frontend-shared/themes/_light.json5
@@ -64,7 +64,6 @@
 		inputBorder: 'rgba(0, 0, 0, 0.1)',
 		inputBorderHover: 'rgba(0, 0, 0, 0.2)',
 		driveFolderBg: ':alpha<0.3<@accent',
-		wallpaperOverlay: 'rgba(255, 255, 255, 0.5)',
 		badge: '#31b1ce',
 		messageBg: '@bg',
 		success: '#86b300',
diff --git a/packages/frontend-shared/themes/d-astro.json5 b/packages/frontend-shared/themes/d-astro.json5
index 371a98ba27..c2792d2e9f 100644
--- a/packages/frontend-shared/themes/d-astro.json5
+++ b/packages/frontend-shared/themes/d-astro.json5
@@ -47,7 +47,6 @@
 		fgOnWhite: '@accent',
 		panelHighlight: ':lighten<3<@panel',
 		scrollbarHandle: 'rgba(255, 255, 255, 0.2)',
-		wallpaperOverlay: 'rgba(0, 0, 0, 0.5)',
 		panelHeaderDivider: 'rgba(0, 0, 0, 0)',
 		scrollbarHandleHover: 'rgba(255, 255, 255, 0.4)',
 	},
diff --git a/packages/frontend-shared/themes/d-u0.json5 b/packages/frontend-shared/themes/d-u0.json5
index 57b97c5d75..e1bda175dd 100644
--- a/packages/frontend-shared/themes/d-u0.json5
+++ b/packages/frontend-shared/themes/d-u0.json5
@@ -59,7 +59,6 @@
 		panelHighlight: ':lighten<3<@panel',
 		scrollbarHandle: 'rgba(255, 255, 255, 0.2)',
 		inputBorderHover: 'rgba(255, 255, 255, 0.2)',
-		wallpaperOverlay: 'rgba(0, 0, 0, 0.5)',
 		fgTransparentWeak: ':alpha<0.75<@fg',
 		panelHeaderDivider: 'rgba(0, 0, 0, 0)',
 		scrollbarHandleHover: 'rgba(255, 255, 255, 0.4)',
diff --git a/packages/frontend-shared/themes/l-u0.json5 b/packages/frontend-shared/themes/l-u0.json5
index dd37ca2781..c76ae3a9c6 100644
--- a/packages/frontend-shared/themes/l-u0.json5
+++ b/packages/frontend-shared/themes/l-u0.json5
@@ -61,7 +61,6 @@
 		panelHighlight: ':lighten<3<@panel',
 		scrollbarHandle: '#74747433',
 		inputBorderHover: 'rgba(255, 255, 255, 0.2)',
-		wallpaperOverlay: 'rgba(0, 0, 0, 0.5)',
 		fgTransparentWeak: ':alpha<0.75<@fg',
 		panelHeaderDivider: 'rgba(0, 0, 0, 0)',
 		scrollbarHandleHover: 'rgba(255, 255, 255, 0.4)',
diff --git a/packages/frontend-shared/themes/l-vivid.json5 b/packages/frontend-shared/themes/l-vivid.json5
index b3c0343e27..dbd725e35f 100644
--- a/packages/frontend-shared/themes/l-vivid.json5
+++ b/packages/frontend-shared/themes/l-vivid.json5
@@ -49,7 +49,6 @@
 		htmlThemeColor: '@bg',
 		panelHighlight: ':darken<3<@panel',
 		scrollbarHandle: 'rgba(0, 0, 0, 0.2)',
-		wallpaperOverlay: 'rgba(255, 255, 255, 0.5)',
 		fgTransparentWeak: ':alpha<0.75<@fg',
 		panelHeaderDivider: '@divider',
 		scrollbarHandleHover: 'rgba(0, 0, 0, 0.4)',
diff --git a/packages/frontend/src/local-storage.ts b/packages/frontend/src/local-storage.ts
index f6d6bbf0fb..78fba9f7b4 100644
--- a/packages/frontend/src/local-storage.ts
+++ b/packages/frontend/src/local-storage.ts
@@ -17,7 +17,6 @@ export type Keys = (
 	'lang' |
 	'drafts' |
 	'hashtags' |
-	'wallpaper' |
 	'colorScheme' |
 	'useSystemFont' |
 	'fontSize' |
diff --git a/packages/frontend/src/pages/settings/deck.vue b/packages/frontend/src/pages/settings/deck.vue
index 902e058e0d..f4bce8a5dd 100644
--- a/packages/frontend/src/pages/settings/deck.vue
+++ b/packages/frontend/src/pages/settings/deck.vue
@@ -12,6 +12,8 @@ SPDX-License-Identifier: AGPL-3.0-only
 			</MkSwitch>
 		</SearchMarker>
 
+		<hr>
+
 		<SearchMarker :keywords="['ui', 'root', 'page']">
 			<MkPreferenceContainer k="deck.useSimpleUiForNonRootPages">
 				<MkSwitch v-model="useSimpleUiForNonRootPages">
@@ -74,19 +76,29 @@ SPDX-License-Identifier: AGPL-3.0-only
 				</MkRange>
 			</MkPreferenceContainer>
 		</SearchMarker>
+
+		<SearchMarker :keywords="['wallpaper']">
+			<MkPreferenceContainer k="deck.wallpaper">
+				<MkButton v-if="wallpaper == null" @click="setWallpaper"><SearchLabel>{{ i18n.ts.setWallpaper }}</SearchLabel></MkButton>
+				<MkButton v-else @click="wallpaper = null">{{ i18n.ts.removeWallpaper }}</MkButton>
+			</MkPreferenceContainer>
+		</SearchMarker>
 	</div>
 </SearchMarker>
 </template>
 
 <script lang="ts" setup>
-import { computed, ref } from 'vue';
+import { computed, ref, watch } from 'vue';
 import MkSwitch from '@/components/MkSwitch.vue';
 import MkRadios from '@/components/MkRadios.vue';
 import MkRange from '@/components/MkRange.vue';
+import MkButton from '@/components/MkButton.vue';
 import { i18n } from '@/i18n.js';
 import { definePage } from '@/page.js';
 import { prefer } from '@/preferences.js';
 import MkPreferenceContainer from '@/components/MkPreferenceContainer.vue';
+import { reloadAsk } from '@/utility/reload-ask.js';
+import { selectFile } from '@/utility/select-file.js';
 
 const navWindow = prefer.model('deck.navWindow');
 const useSimpleUiForNonRootPages = prefer.model('deck.useSimpleUiForNonRootPages');
@@ -95,6 +107,17 @@ const columnAlign = prefer.model('deck.columnAlign');
 const columnGap = prefer.model('deck.columnGap');
 const menuPosition = prefer.model('deck.menuPosition');
 const navbarPosition = prefer.model('deck.navbarPosition');
+const wallpaper = prefer.model('deck.wallpaper');
+
+watch(wallpaper, async () => {
+	await reloadAsk({ reason: i18n.ts.reloadToApplySetting, unison: true });
+});
+
+function setWallpaper(ev: MouseEvent) {
+	selectFile(ev.currentTarget ?? ev.target, null).then(file => {
+		wallpaper.value = file.url;
+	});
+}
 
 const profilesSyncEnabled = ref(prefer.isSyncEnabled('deck.profiles'));
 
diff --git a/packages/frontend/src/pages/settings/theme.vue b/packages/frontend/src/pages/settings/theme.vue
index 9a8aeb00d6..d149849afc 100644
--- a/packages/frontend/src/pages/settings/theme.vue
+++ b/packages/frontend/src/pages/settings/theme.vue
@@ -189,17 +189,12 @@ SPDX-License-Identifier: AGPL-3.0-only
 				<FormLink to="/theme-editor"><template #icon><i class="ti ti-paint"></i></template>{{ i18n.ts._theme.make }}</FormLink>
 			</div>
 		</FormSection>
-
-		<SearchMarker :keywords="['wallpaper']">
-			<MkButton v-if="wallpaper == null" @click="setWallpaper"><SearchLabel>{{ i18n.ts.setWallpaper }}</SearchLabel></MkButton>
-			<MkButton v-else @click="wallpaper = null">{{ i18n.ts.removeWallpaper }}</MkButton>
-		</SearchMarker>
 	</div>
 </SearchMarker>
 </template>
 
 <script lang="ts" setup>
-import { computed, onActivated, ref, watch } from 'vue';
+import { computed, ref, watch } from 'vue';
 import JSON5 from 'json5';
 import defaultLightTheme from '@@/themes/l-light.json5';
 import defaultDarkTheme from '@@/themes/d-green-lime.json5';
@@ -207,7 +202,6 @@ import type { Theme } from '@/theme.js';
 import MkSwitch from '@/components/MkSwitch.vue';
 import FormSection from '@/components/form/section.vue';
 import FormLink from '@/components/form/link.vue';
-import MkButton from '@/components/MkButton.vue';
 import MkFolder from '@/components/MkFolder.vue';
 import MkThemePreview from '@/components/MkThemePreview.vue';
 import { getBuiltinThemesRef, getThemesRef } from '@/theme.js';
@@ -262,7 +256,6 @@ const lightThemeId = computed({
 
 const darkMode = computed(store.makeGetterSetter('darkMode'));
 const syncDeviceDarkMode = prefer.model('syncDeviceDarkMode');
-const wallpaper = ref(miLocalStorage.getItem('wallpaper'));
 const themesCount = installedThemes.value.length;
 
 watch(syncDeviceDarkMode, () => {
@@ -271,21 +264,6 @@ watch(syncDeviceDarkMode, () => {
 	}
 });
 
-watch(wallpaper, async () => {
-	if (wallpaper.value == null) {
-		miLocalStorage.removeItem('wallpaper');
-	} else {
-		miLocalStorage.setItem('wallpaper', wallpaper.value);
-	}
-	await reloadAsk({ reason: i18n.ts.reloadToApplySetting, unison: true });
-});
-
-function setWallpaper(event) {
-	selectFile(event.currentTarget ?? event.target, null).then(file => {
-		wallpaper.value = file.url;
-	});
-}
-
 const headerActions = computed(() => []);
 
 const headerTabs = computed(() => []);
diff --git a/packages/frontend/src/preferences/def.ts b/packages/frontend/src/preferences/def.ts
index 5aa463f045..bd96431fad 100644
--- a/packages/frontend/src/preferences/def.ts
+++ b/packages/frontend/src/preferences/def.ts
@@ -382,6 +382,9 @@ export const PREF_DEF = {
 	'deck.navbarPosition': {
 		default: 'left' as 'left' | 'top' | 'bottom',
 	},
+	'deck.wallpaper': {
+		default: null as string | null,
+	},
 
 	'chat.showSenderName': {
 		default: false,
diff --git a/packages/frontend/src/ui/deck.vue b/packages/frontend/src/ui/deck.vue
index 185af5e788..ef4a6fc03c 100644
--- a/packages/frontend/src/ui/deck.vue
+++ b/packages/frontend/src/ui/deck.vue
@@ -112,13 +112,12 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>
 
 <script lang="ts" setup>
-import { computed, defineAsyncComponent, ref, useTemplateRef, watch } from 'vue';
+import { computed, defineAsyncComponent, ref, useTemplateRef } from 'vue';
 import { v4 as uuid } from 'uuid';
 import XCommon from './_common_/common.vue';
 import XSidebar from '@/ui/_common_/navbar.vue';
 import XNavbarH from '@/ui/_common_/navbar-h.vue';
 import XDrawerMenu from '@/ui/_common_/navbar-for-mobile.vue';
-import MkButton from '@/components/MkButton.vue';
 import * as os from '@/os.js';
 import { navbarItemDef } from '@/navbar.js';
 import { $i } from '@/i.js';
@@ -137,7 +136,6 @@ import XDirectColumn from '@/ui/deck/direct-column.vue';
 import XRoleTimelineColumn from '@/ui/deck/role-timeline-column.vue';
 import { mainRouter } from '@/router.js';
 import { columns, layout, columnTypes, switchProfileMenu, addColumn as addColumnToStore, deleteProfile as deleteProfile_ } from '@/deck.js';
-import { miLocalStorage } from '@/local-storage.js';
 
 const XStatusBars = defineAsyncComponent(() => import('@/ui/_common_/statusbars.vue'));
 const XAnnouncements = defineAsyncComponent(() => import('@/ui/_common_/announcements.vue'));
@@ -171,7 +169,7 @@ window.addEventListener('resize', () => {
 });
 
 const snapScroll = deviceKind === 'smartphone' || deviceKind === 'tablet';
-const withWallpaper = miLocalStorage.getItem('wallpaper') != null;
+const withWallpaper = prefer.s['deck.wallpaper'] != null;
 const drawerMenuShowing = ref(false);
 const gap = prefer.r['deck.columnGap'];
 
@@ -227,9 +225,6 @@ function onWheel(ev: WheelEvent) {
 	}
 }
 
-window.document.documentElement.style.overflowY = 'hidden';
-window.document.documentElement.style.scrollBehavior = 'auto';
-
 async function deleteProfile() {
 	if (prefer.s['deck.profile'] == null) return;
 
@@ -244,6 +239,12 @@ async function deleteProfile() {
 	os.success();
 }
 
+window.document.documentElement.style.overflowY = 'hidden';
+window.document.documentElement.style.scrollBehavior = 'auto';
+
+if (prefer.s['deck.wallpaper'] != null) {
+	window.document.documentElement.style.backgroundImage = `url(${prefer.s['deck.wallpaper']})`;
+}
 </script>
 
 <style lang="scss" module>
diff --git a/packages/frontend/src/ui/deck/column.vue b/packages/frontend/src/ui/deck/column.vue
index 06163c7dbd..497a04610e 100644
--- a/packages/frontend/src/ui/deck/column.vue
+++ b/packages/frontend/src/ui/deck/column.vue
@@ -48,13 +48,13 @@ import type { MenuItem } from '@/types/menu.js';
 import { updateColumn, swapLeftColumn, swapRightColumn, swapUpColumn, swapDownColumn, stackLeftColumn, popRightColumn, removeColumn, swapColumn } from '@/deck.js';
 import * as os from '@/os.js';
 import { i18n } from '@/i18n.js';
-import { miLocalStorage } from '@/local-storage.js';
+import { prefer } from '@/preferences.js';
 
 provide('shouldHeaderThin', true);
 provide('shouldOmitHeaderTitle', true);
 provide('forceSpacerMin', true);
 
-const withWallpaper = miLocalStorage.getItem('wallpaper') != null;
+const withWallpaper = prefer.s['deck.wallpaper'] != null;
 
 const props = withDefaults(defineProps<{
 	column: Column;
diff --git a/packages/frontend/src/utility/autogen/settings-search-index.ts b/packages/frontend/src/utility/autogen/settings-search-index.ts
index 1563f19c34..08ab0d8811 100644
--- a/packages/frontend/src/utility/autogen/settings-search-index.ts
+++ b/packages/frontend/src/utility/autogen/settings-search-index.ts
@@ -37,11 +37,6 @@ export const searchIndexes: SearchIndexItem[] = [
 				label: i18n.ts.themeForDarkMode,
 				keywords: ['dark', 'theme'],
 			},
-			{
-				id: '8wcoRp76b',
-				label: i18n.ts.setWallpaper,
-				keywords: ['wallpaper'],
-			},
 		],
 		label: i18n.ts.theme,
 		keywords: ['theme'],
@@ -861,40 +856,45 @@ export const searchIndexes: SearchIndexItem[] = [
 				keywords: ['sync', 'profiles', 'devices'],
 			},
 			{
-				id: 'iEF0gqNAo',
+				id: 'wWH4pxMQN',
 				label: i18n.ts._deck.useSimpleUiForNonRootPages,
 				keywords: ['ui', 'root', 'page'],
 			},
 			{
-				id: 'BNdSeWxZn',
+				id: '3LR509BvD',
 				label: i18n.ts.defaultNavigationBehaviour,
 				keywords: ['default', 'navigation', 'behaviour', 'window'],
 			},
 			{
-				id: 'zT9pGm8DF',
+				id: 'ybU8RLXgm',
 				label: i18n.ts._deck.alwaysShowMainColumn,
 				keywords: ['always', 'show', 'main', 'column'],
 			},
 			{
-				id: '5dk2xv1vc',
+				id: 'xRasZyAVl',
 				label: i18n.ts._deck.columnAlign,
 				keywords: ['column', 'align'],
 			},
 			{
-				id: 'gtdEA4FTa',
+				id: '6qcyPd0oJ',
 				label: i18n.ts._deck.deckMenuPosition,
 				keywords: ['menu', 'position'],
 			},
 			{
-				id: 'DHVFdPBT6',
+				id: '4zk2Now4S',
 				label: i18n.ts._deck.navbarPosition,
 				keywords: ['navbar', 'position'],
 			},
 			{
-				id: '3UQ8rUssZ',
+				id: 'CGNtJ2I3n',
 				label: i18n.ts._deck.columnGap,
 				keywords: ['column', 'gap', 'margin'],
 			},
+			{
+				id: 'rxPDMo7bE',
+				label: i18n.ts.setWallpaper,
+				keywords: ['wallpaper'],
+			},
 		],
 		label: i18n.ts.deck,
 		keywords: ['deck', 'ui'],