attempt smart background load

src/components/widgets/settings.tsx

@@ -36,7 +36,11 @@ export function Settings({ className }: SettingsProps) {
       <Modal
         centered
         radius="lg"
-        title={<Title order={3}>Settings</Title>}
+        title={
+          <Text size="xl" fw="700">
+            Settings
+          </Text>
+        }
         size="lg"
         padding="lg"
         opened={isOpen}
@@ -115,7 +119,7 @@ export function Settings({ className }: SettingsProps) {
             color="red.9"
             leftSection={<IconTrash size={16} />}
             onClick={() => {
-              localStorage.removeItem('start-page-background');
+              localStorage.removeItem('vertex-backgrounds');
               window.location.reload();
             }}
           >

src/hooks/use-load-backgrounds.ts

@@ -6,13 +6,16 @@ import { BACKGROUND_FETCH_MINS } from '~/config';
 import { Background } from '~/types';
 
 export function useLoadBackgrounds() {
-  const { unsplashQuery } = useAtomValue(settingsAtom);
+  const { unsplashQuery, useSavedBackgrounds } = useAtomValue(settingsAtom);
   const [backgrounds, setBackgrounds] = useAtom(backgroundsAtom);
 
   useEffect(() => {
     const shouldFetch =
-      backgrounds.backgrounds.length === 0 ||
-      backgrounds.fetched_at < new Date().getTime() - 1000 * 60 * BACKGROUND_FETCH_MINS;
+      useSavedBackgrounds === false &&
+      unsplashQuery.length > 0 &&
+      (backgrounds.backgrounds.length === 0 ||
+        (backgrounds.fetched_at > 0 &&
+          backgrounds.fetched_at < new Date().getTime() - 1000 * 60 * BACKGROUND_FETCH_MINS));
 
     if (shouldFetch) {
       getRandomBackground(unsplashQuery).then((r) =>
@@ -23,5 +26,5 @@ export function useLoadBackgrounds() {
       );
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  }, [backgrounds, useSavedBackgrounds, unsplashQuery]);
 }