Add option to remove backgrounds from favorites

src/components/ui/Sidebar.tsx

@@ -5,7 +5,7 @@ import { useSettings } from '~/state/SettingsProvider';
 import { Settings } from '../widgets/Settings';
 
 import style from './Sidebar.module.css';
-import { HiSolidStar } from 'solid-icons/hi';
+import { HiOutlineStar, HiSolidStar } from 'solid-icons/hi';
 
 type SidebarProps = {
   activeTag?: string | null;
@@ -14,7 +14,7 @@ type SidebarProps = {
 
 export function Sidebar(props: SidebarProps) {
   const tagOrder = createTagOrder();
-  const { onSaveBackground } = useSettings();
+  const { onSaveBackground, onUnsaveBackground, isBackgroundSaved } = useSettings();
 
   return (
     <div class={style.Sidebar}>
@@ -30,9 +30,15 @@ export function Sidebar(props: SidebarProps) {
         ))}
       </ul>
       <div class={style.SettingsWrapper}>
-        <Tooltip withArrow placement="top" label="Save background">
-          <HiSolidStar size={18} onClick={onSaveBackground} />
-        </Tooltip>
+        {isBackgroundSaved() ? (
+          <Tooltip withArrow placement="top" label="Remove from favorites">
+            <HiOutlineStar size={18} onClick={onUnsaveBackground} />
+          </Tooltip>
+        ) : (
+          <Tooltip withArrow placement="top" label="Add to favorites">
+            <HiSolidStar size={18} onClick={onSaveBackground} />
+          </Tooltip>
+        )}
         <Tooltip withArrow placement="top" label="Settings">
           <Settings />
         </Tooltip>

src/components/widgets/Settings.tsx

@@ -50,7 +50,7 @@ export function Settings(props: SettingsProps) {
                   }))
                 }
               >
-                Use saved backgrounds
+                Use favorited backgrounds
               </Checkbox>
               <a
                 style={{ display: 'flex', 'align-items': 'center', gap: '8px', cursor: 'pointer' }}
@@ -60,7 +60,7 @@ export function Settings(props: SettingsProps) {
                 }}
               >
                 <HiOutlineTrash size={16} />
-                Reload background
+                Reload backgrounds
               </a>
             </Flex>
           </ModalBody>

src/state/SettingsProvider.tsx

@@ -5,7 +5,6 @@ import { sample } from '~/lib/array';
 import { createLocalStore } from '~/lib/create-local-store';
 import { SavedBackgrounds } from '~/types';
 import { createBackgrounds } from './create-backgrounds';
-import { random } from '~/lib/math';
 
 type Settings = { showLocations: boolean; viewAsTable: boolean; useSavedBackgrounds: boolean };
 
@@ -14,7 +13,9 @@ type SettingsContextType = {
   setAppSettings: SetStoreFunction<Settings>;
   savedBackgrounds: SavedBackgrounds;
   onSaveBackground(): void;
+  onUnsaveBackground(): void;
   currentBackground: Accessor<Random | undefined>;
+  isBackgroundSaved: Accessor<boolean>;
 };
 
 const SettingsContext = createContext<SettingsContextType>({
@@ -23,6 +24,8 @@ const SettingsContext = createContext<SettingsContextType>({
   currentBackground: () => undefined,
   savedBackgrounds: [],
   onSaveBackground: () => {},
+  onUnsaveBackground: () => {},
+  isBackgroundSaved: () => false,
 });
 
 export function SettingsProvider(props: { children: JSX.Element }) {
@@ -32,32 +35,31 @@ export function SettingsProvider(props: { children: JSX.Element }) {
     useSavedBackgrounds: false,
   });
 
-  const [savedBackgrounds, setSavedBackgrounds] = createLocalStore<SavedBackgrounds>(
-    'start-page-saved-backgrounds',
-    []
-  );
-
-  const { currentBackground: currentRandomBackground } = createBackgrounds();
-
-  const onSaveBackground = () => {
-    setSavedBackgrounds((prev) => {
-      if (prev.find((background) => background.id === currentRandomBackground()?.id)) {
-        return prev;
-      }
-      return [...prev, currentRandomBackground()!];
-    });
-  };
+  const {
+    currentRandomBackground,
+    onSaveBackground,
+    savedBackgrounds,
+    isBackgroundSaved,
+    onUnsaveBackground,
+  } = createBackgrounds();
 
   const currentBackground = createMemo(() =>
     appSettings.useSavedBackgrounds ? sample(savedBackgrounds) : currentRandomBackground()
   );
 
+  const isCurrentBackgroundSaved = createMemo(() => isBackgroundSaved(currentBackground()?.id));
+
+  const onUnsaveCurrentBackground = () =>
+    currentBackground() && onUnsaveBackground(currentBackground()!.id);
+
   return (
     <SettingsContext.Provider
       value={{
         currentBackground,
         savedBackgrounds,
         onSaveBackground,
+        onUnsaveBackground: onUnsaveCurrentBackground,
+        isBackgroundSaved: isCurrentBackgroundSaved,
         appSettings,
         setAppSettings,
       }}

src/state/create-backgrounds.ts

@@ -5,7 +5,7 @@ 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 } from '~/types';
+import { BackgroundStorage, SavedBackgrounds } from '~/types';
 
 export function createBackgrounds() {
   const [backgrounds, setBackgrounds] = createLocalStore<BackgroundStorage>(
@@ -13,6 +13,11 @@ export function createBackgrounds() {
     { fetched_at: 0, backgrounds: null }
   );
 
+  const [savedBackgrounds, setSavedBackgrounds] = createLocalStore<SavedBackgrounds>(
+    'start-page-saved-backgrounds',
+    []
+  );
+
   const shouldFetch =
     !backgrounds?.backgrounds ||
     backgrounds.fetched_at < new Date().getTime() - 1000 * 60 * BACKGROUND_FETCH_MINS;
@@ -26,9 +31,30 @@ export function createBackgrounds() {
     );
   }
 
-  const currentBackground = createMemo<Random | undefined>(() =>
+  const currentRandomBackground = createMemo<Random | undefined>(() =>
     sample(backgrounds?.backgrounds ?? [])
   );
 
-  return { backgrounds, currentBackground };
+  const isBackgroundSaved = (id?: string) =>
+    Boolean(id && savedBackgrounds.find((b) => b.id === id));
+
+  const onUnsaveBackground = (id: string) =>
+    setSavedBackgrounds((prev) => prev.filter((b) => b.id !== id));
+
+  const onSaveBackground = () => {
+    setSavedBackgrounds((prev) => {
+      if (prev.find((background) => background.id === currentRandomBackground()?.id)) {
+        return prev;
+      }
+      return [...prev, currentRandomBackground()!];
+    });
+  };
+
+  return {
+    currentRandomBackground,
+    onSaveBackground,
+    savedBackgrounds,
+    isBackgroundSaved,
+    onUnsaveBackground,
+  };
 }