add background blur setting

src/atoms.ts

@@ -10,6 +10,7 @@ export type Settings = {
   useSavedBackgrounds: boolean;
   unsplashQuery: string;
   viewMode: 'tile' | 'pill';
+  backgroundBlur: number;
 };
 
 export const settingsAtom = atomWithStorage<Settings>('vertex-settings', {
@@ -19,6 +20,7 @@ export const settingsAtom = atomWithStorage<Settings>('vertex-settings', {
   viewAsTable: false,
   useSavedBackgrounds: false,
   unsplashQuery: '',
+  backgroundBlur: 0,
 });
 
 export const backgroundsAtom = atomWithStorage<BackgroundStorage>('vertex-backgrounds', {

src/components/ui/background.module.css

@@ -1,4 +1,5 @@
-.Background, .Overlay {
+.Background,
+.Overlay {
   position: absolute;
   top: 0;
   left: 0;

src/components/ui/background.tsx

@@ -1,10 +1,11 @@
 import { useAtomValue } from 'jotai';
 import { useEffect, useState } from 'react';
-import { currentBackgroundAtom } from '~/atoms';
+import { currentBackgroundAtom, settingsAtom } from '~/atoms';
 import { loadImage } from '~/lib/load-image';
 import style from './background.module.css';
 
 export function Background() {
+  const { backgroundBlur } = useAtomValue(settingsAtom);
   const currentBackground = useAtomValue(currentBackgroundAtom);
 
   const [isLoading, setIsLoading] = useState(true);
@@ -23,7 +24,11 @@ export function Background() {
 
   return (
     <>
-      <img className={style.Background} src={currentBackground?.urls.full} />
+      <img
+        className={style.Background}
+        src={currentBackground?.urls.full}
+        style={{ filter: `blur(${backgroundBlur}px)` }}
+      />
       <div className={`${style.Overlay} ${isLoading ? style.Pending : ''}`}>
         <img src={currentBackground?.urls.small} />
         <div className={style.Black} />

src/components/widgets/settings.tsx

@@ -5,7 +5,9 @@ import {
   Divider,
   Flex,
   Modal,
+  NumberInput,
   SegmentedControl,
+  Slider,
   Text,
   TextInput,
   Title,
@@ -90,6 +92,18 @@ export function Settings(props: SettingsProps) {
             }
           />
 
+          <Flex direction="column" gap={4}>
+            <Text size="sm">Background blur</Text>
+            <Slider
+              value={appSettings.backgroundBlur}
+              min={0}
+              max={20}
+              step={1}
+              onKeyDown={(e) => e.stopPropagation()}
+              onChange={(e) => setAppSettings((prev) => ({ ...prev, backgroundBlur: Number(e) }))}
+            />
+          </Flex>
+
           <TextInput
             label="Unsplash query"
             labelProps={{ style: { marginBottom: '4px' } }}