feat(wallpaper): allow change wallpaper from settings

Cargo.toml

@@ -37,6 +37,7 @@ tauri-plugin-process = "2.0.0-beta.2"
 tauri-plugin-log = "2.0.0-beta.2"
 tauri-plugin-updater = "2.0.0-beta.2"
 tauri-plugin-deep-link = "2.0.0-beta.10"
+tauri-plugin-http = "2.0.0-beta.0"
 serde = { version = "1.0", features = ["derive"] }
 serde_json = "1.0"
 serde_yaml = "0.9.34"

changelog.md

@@ -3,6 +3,7 @@
 ## [Unreleased]
 ### features
 - .slu and uri now are loaded correctly on seelen ui.
+- allow change wallpaper from seelen settings.
 
 ### enhancements
 - add file associations for .slu files

src/apps/settings/components/SettingsBox/index.module.css

@@ -5,6 +5,10 @@
   overflow: hidden;
   position: relative;
 
+  &:last-child {
+    margin-bottom: 10px;
+  }
+
   > div {
     position: absolute; /* for noise and blur */
     top: 0;

src/apps/settings/components/monitor/index.module.css

@@ -0,0 +1,28 @@
+.monitor {
+  height: 144px;
+  width: 256px;
+  border-radius: 12px;
+  background-color: var(--color-persist-gray-800);
+  padding: 8px;
+
+  .screen {
+    position: relative;
+    border-radius: 8px;
+    background: linear-gradient(
+      40deg,
+      var(--color-blue-500) 2%,
+      var(--color-blue-300) 60%,
+      var(--color-blue-100) 100%
+    );
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+
+    .wallpaper {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+      position: absolute;
+    }
+  }
+}

src/apps/settings/components/monitor/index.tsx

@@ -0,0 +1,22 @@
+import { convertFileSrc } from '@tauri-apps/api/core';
+import { PropsWithChildren } from 'react';
+import { useSelector } from 'react-redux';
+
+import { newSelectors } from '../../modules/shared/store/app/reducer';
+
+import cs from './index.module.css';
+
+interface Props extends PropsWithChildren {}
+
+export function Monitor({ children }: Props) {
+  const wallpaper = useSelector(newSelectors.wallpaper);
+
+  return (
+    <div className={cs.monitor}>
+      <div className={cs.screen}>
+        {wallpaper ? <img className={cs.wallpaper} src={convertFileSrc(wallpaper)} /> : null}
+        {children}
+      </div>
+    </div>
+  );
+}

src/apps/settings/i18n/translations/en.yml

@@ -44,6 +44,8 @@ general:
     selected: Selected
   icon_pack:
     label: Icon Packs
+  wallpaper:
+    select: Select Wallpaper
   accent_color: Accent Color
 toolbar:
   enable: Enable Fancy Toolbar

src/apps/settings/modules/general/main/infra/Wallpaper.tsx

@@ -0,0 +1,38 @@
+import { Monitor } from '../../../../components/monitor';
+import { SettingsOption } from '../../../../components/SettingsBox';
+import { invoke } from '@tauri-apps/api/core';
+import { Button } from 'antd';
+import { useTranslation } from 'react-i18next';
+import { useDispatch } from 'react-redux';
+
+import { dialog } from '../../../shared/tauri/infra';
+
+import { RootActions } from '../../../shared/store/app/reducer';
+
+export function Wallpaper() {
+  const { t } = useTranslation();
+  const dispatch = useDispatch();
+
+  async function loadWallpaper() {
+    const file = await dialog.open({
+      title: t('general.wallpaper.select'),
+      filters: [{ name: 'images', extensions: ['png', 'jpg', 'jpeg', 'gif', 'bmp', 'tif', 'tiff'] }],
+    });
+
+    if (!file) {
+      return;
+    }
+
+    await invoke('state_set_wallpaper', { path: file.path });
+    dispatch(RootActions.setWallpaper(file.path));
+  }
+
+  return (
+    <>
+      <SettingsOption>
+        <Monitor />
+        <Button onClick={loadWallpaper} size="middle">{t('general.wallpaper.select')}</Button>
+      </SettingsOption>
+    </>
+  );
+}