Refactor backgrounds

src/components/ui/Background.module.css

@@ -1,23 +1,19 @@
-.Background {
+.Background, .Overlay {
   position: absolute;
   top: 0;
   left: 0;
   width: 100vw;
   height: 100vh;
-  background-size: cover;
   z-index: -1;
+}
+
+.Background {
+  background-size: cover;
   object-fit: cover;
   user-select: none;
 }
 
 .Overlay {
-  position: absolute;
-  content: "";
-  top: 0;
-  left: 0;
-  width: 100vw;
-  height: 100vh;
   backdrop-filter: blur(10px);
   pointer-events: none;
-  z-index: -1;
 }

src/components/ui/Sidebar.tsx

@@ -13,7 +13,7 @@ type SidebarProps = {
 };
 
 export function Sidebar(props: SidebarProps) {
-  const { onSaveBackground, onUnsaveBackground, isBackgroundSaved } = useSettings();
+  const { onFavoriteBackground, onUnfavoriteBackground, isBackgroundSaved } = useSettings();
 
   return (
     <div class={style.Sidebar}>
@@ -31,11 +31,11 @@ export function Sidebar(props: SidebarProps) {
       <div class={style.SettingsWrapper}>
         {isBackgroundSaved() ? (
           <Tooltip withArrow placement="top" label="Remove from favorites">
-            <HiSolidStar size={18} onClick={onUnsaveBackground} />
+            <HiSolidStar size={18} onClick={onUnfavoriteBackground} />
           </Tooltip>
         ) : (
           <Tooltip withArrow placement="top" label="Add to favorites">
-            <HiOutlineStar size={18} onClick={onSaveBackground} />
+            <HiOutlineStar size={18} onClick={onFavoriteBackground} />
           </Tooltip>
         )}
         <Tooltip withArrow placement="top" label="Settings">

src/state/SettingsProvider.tsx

@@ -1,9 +1,8 @@
 import { Accessor, JSX, createContext, createMemo, useContext } from 'solid-js';
 import { SetStoreFunction } from 'solid-js/store';
-import { Random } from 'unsplash-js/dist/methods/photos/types';
 import { sample } from '~/lib/array';
 import { createLocalStore } from '~/lib/create-local-store';
-import { SavedBackgrounds } from '~/types';
+import { Background } from '~/types';
 import { createBackgrounds } from './create-backgrounds';
 
 type Settings = { showLocations: boolean; viewAsTable: boolean; useSavedBackgrounds: boolean };
@@ -11,10 +10,10 @@ type Settings = { showLocations: boolean; viewAsTable: boolean; useSavedBackgrou
 type SettingsContextType = {
   appSettings: Settings;
   setAppSettings: SetStoreFunction<Settings>;
-  savedBackgrounds: SavedBackgrounds;
-  onSaveBackground(): void;
-  onUnsaveBackground(): void;
-  currentBackground: Accessor<Random | undefined>;
+  favoriteBackgrounds: Background[];
+  onFavoriteBackground(): void;
+  onUnfavoriteBackground(): void;
+  currentBackground: Accessor<Background | undefined>;
   isBackgroundSaved: Accessor<boolean>;
 };
 
@@ -22,9 +21,9 @@ const SettingsContext = createContext<SettingsContextType>({
   appSettings: { showLocations: false, viewAsTable: false, useSavedBackgrounds: false },
   setAppSettings: () => {},
   currentBackground: () => undefined,
-  savedBackgrounds: [],
-  onSaveBackground: () => {},
-  onUnsaveBackground: () => {},
+  favoriteBackgrounds: [],
+  onFavoriteBackground: () => {},
+  onUnfavoriteBackground: () => {},
   isBackgroundSaved: () => false,
 });
 
@@ -37,28 +36,28 @@ export function SettingsProvider(props: { children: JSX.Element }) {
 
   const {
     currentRandomBackground,
-    onSaveBackground,
-    savedBackgrounds,
+    onFavoriteBackground,
+    favoriteBackgrounds,
     isBackgroundSaved,
-    onUnsaveBackground,
+    onUnfavoriteBackground,
   } = createBackgrounds();
 
   const currentBackground = createMemo(() =>
-    appSettings.useSavedBackgrounds ? sample(savedBackgrounds) : currentRandomBackground()
+    appSettings.useSavedBackgrounds ? sample(favoriteBackgrounds) : currentRandomBackground()
   );
 
   const isCurrentBackgroundSaved = createMemo(() => isBackgroundSaved(currentBackground()?.id));
 
-  const onUnsaveCurrentBackground = () =>
-    currentBackground() && onUnsaveBackground(currentBackground()!.id);
+  const onUnfavoriteCurrentBackground = () =>
+    currentBackground() && onUnfavoriteBackground(currentBackground()!.id);
 
   return (
     <SettingsContext.Provider
       value={{
         currentBackground,
-        savedBackgrounds,
-        onSaveBackground,
-        onUnsaveBackground: onUnsaveCurrentBackground,
+        favoriteBackgrounds,
+        onFavoriteBackground,
+        onUnfavoriteBackground: onUnfavoriteCurrentBackground,
         isBackgroundSaved: isCurrentBackgroundSaved,
         appSettings,
         setAppSettings,

src/state/create-backgrounds.ts

@@ -4,8 +4,7 @@ import { getRandomBackground } from '~/api/unsplash';
 import { BACKGROUND_FETCH_MINS } from '~/config';
 import { sample } from '~/lib/array';
 import { createLocalStore } from '~/lib/create-local-store';
-import { random } from '~/lib/math';
-import { BackgroundStorage, SavedBackgrounds } from '~/types';
+import { Background, BackgroundStorage } from '~/types';
 
 export function createBackgrounds() {
   const [backgrounds, setBackgrounds] = createLocalStore<BackgroundStorage>(
@@ -13,8 +12,8 @@ export function createBackgrounds() {
     { fetched_at: 0, backgrounds: null }
   );
 
-  const [savedBackgrounds, setSavedBackgrounds] = createLocalStore<SavedBackgrounds>(
-    'start-page-saved-backgrounds',
+  const [favoriteBackgrounds, setFavroiteBackgrounds] = createLocalStore<Background[]>(
+    'start-page-favorite-backgrounds',
     []
   );
 
@@ -26,23 +25,23 @@ export function createBackgrounds() {
     getRandomBackground().then((r) =>
       setBackgrounds({
         fetched_at: new Date().getTime(),
-        backgrounds: (r?.response as Random[]) ?? null,
+        backgrounds: (r?.response as Background[]) ?? null,
       })
     );
   }
 
-  const currentRandomBackground = createMemo<Random | undefined>(() =>
+  const currentRandomBackground = createMemo<Background | undefined>(() =>
     sample(backgrounds?.backgrounds ?? [])
   );
 
   const isBackgroundSaved = (id?: string) =>
-    Boolean(id && savedBackgrounds.find((b) => b.id === id));
+    Boolean(id && favoriteBackgrounds.find((b) => b.id === id));
 
-  const onUnsaveBackground = (id: string) =>
-    setSavedBackgrounds((prev) => prev.filter((b) => b.id !== id));
+  const onUnfavoriteBackground = (id: string) =>
+    setFavroiteBackgrounds((prev) => prev.filter((b) => b.id !== id));
 
-  const onSaveBackground = () => {
-    setSavedBackgrounds((prev) => {
+  const onFavoriteBackground = () => {
+    setFavroiteBackgrounds((prev) => {
       if (prev.find((background) => background.id === currentRandomBackground()?.id)) {
         return prev;
       }
@@ -52,9 +51,9 @@ export function createBackgrounds() {
 
   return {
     currentRandomBackground,
-    onSaveBackground,
-    savedBackgrounds,
+    onFavoriteBackground,
+    favoriteBackgrounds,
     isBackgroundSaved,
-    onUnsaveBackground,
+    onUnfavoriteBackground,
   };
 }

src/types.ts

@@ -39,9 +39,8 @@ export type WeatherData = {
   sunset: number;
 };
 
+export type Background = Random;
 export type BackgroundStorage = {
   fetched_at: number;
-  backgrounds: Random[] | null;
+  backgrounds: Background[] | null;
 };
-
-export type SavedBackgrounds = Random[];