refetch backgrounds

src/components/ui/Sidebar.tsx

@@ -1,4 +1,5 @@
 import { createTagOrder } from '~/api/get-apps';
+import { Settings } from '../widgets/Settings';
 import style from './Sidebar.module.css';
 
 type SidebarProps = {
@@ -22,6 +23,7 @@ export function Sidebar(props: SidebarProps) {
           </li>
         ))}
       </ul>
+      <Settings className={style.Settings} />
     </div>
   );
 }

src/components/widgets/Settings.tsx

@@ -1,25 +1,29 @@
 import {
-  Modal,
-  ModalOverlay,
-  ModalContent,
-  ModalCloseButton,
-  ModalHeader,
-  ModalBody,
-  Checkbox,
-  ModalFooter,
   Button,
+  Checkbox,
   Flex,
+  Modal,
+  ModalBody,
+  ModalCloseButton,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  ModalOverlay,
   createDisclosure,
 } from '@hope-ui/solid';
-import { HiSolidCog } from 'solid-icons/hi';
+import { HiOutlineTrash, HiSolidCog } from 'solid-icons/hi';
 import { useSettings } from '~/state/SettingsProvider';
 
-export function Settings() {
+type SettingsProps = {
+  className?: string;
+};
+
+export function Settings(props: SettingsProps) {
   const { appSettings, setAppSettings } = useSettings();
   const { isOpen, onOpen, onClose } = createDisclosure();
 
   return (
-    <>
+    <div class={props.className}>
       <HiSolidCog onClick={onOpen} size={24} />
 
       <Modal opened={isOpen()} onClose={onClose}>
@@ -37,14 +41,16 @@ export function Settings() {
               >
                 Show locations
               </Checkbox>
-              <Checkbox
+              <a
-                checked={appSettings.viewAsTable}
+                style={{ display: 'flex', 'align-items': 'center', gap: '8px', cursor: 'pointer' }}
-                onChange={(e) =>
+                onClick={() => {
-                  setAppSettings((prev) => ({ ...prev, viewAsTable: (e.target as any).checked }))
+                  localStorage.removeItem('start-page-background');
-                }
+                  window.location.reload();
+                }}
               >
-                Table View
+                <HiOutlineTrash size={16} />
-              </Checkbox>
+                Reload background
+              </a>
             </Flex>
           </ModalBody>
           <ModalFooter>
@@ -52,6 +58,6 @@ export function Settings() {
           </ModalFooter>
         </ModalContent>
       </Modal>
-    </>
+    </div>
   );
 }