Improve settings modal

src/components/widgets/Settings.tsx

@@ -11,6 +11,7 @@ import {
   ModalFooter,
   ModalHeader,
   ModalOverlay,
+  Tag,
   createDisclosure,
 } from '@hope-ui/solid';
 import { HiOutlineTrash, HiSolidCog } from 'solid-icons/hi';
@@ -21,7 +22,7 @@ type SettingsProps = {
 };
 
 export function Settings(props: SettingsProps) {
-  const { appSettings, setAppSettings } = useSettings();
+  const { appSettings, setAppSettings, favoriteBackgrounds } = useSettings();
   const { isOpen, onOpen, onClose } = createDisclosure();
 
   return (
@@ -45,18 +46,10 @@ export function Settings(props: SettingsProps) {
                 checked={appSettings.useSavedBackgrounds}
                 onChange={(e) => setAppSettings({ useSavedBackgrounds: (e.target as any).checked })}
               >
-                Use favorited backgrounds
+                Use favorited backgrounds{' '}
+                <Tag colorScheme="accent">{favoriteBackgrounds.length}</Tag>
               </Checkbox>
-              <a
-                style={{ display: 'flex', 'align-items': 'center', gap: '8px', cursor: 'pointer' }}
-                onClick={() => {
-                  localStorage.removeItem('start-page-background');
-                  window.location.reload();
-                }}
-              >
-                <HiOutlineTrash size={16} />
-                Reload cached backgrounds
-              </a>
+
               <FormLabel>
                 Unsplash query
                 <Input
@@ -65,6 +58,17 @@ export function Settings(props: SettingsProps) {
                   onChange={(e) => setAppSettings({ unsplashQuery: e.target.value })}
                 />
               </FormLabel>
+              <Button
+                colorScheme="danger"
+                size="xs"
+                leftIcon={<HiOutlineTrash />}
+                onClick={() => {
+                  localStorage.removeItem('start-page-background');
+                  window.location.reload();
+                }}
+              >
+                Refresh unsplash "{appSettings.unsplashQuery}" backgrounds
+              </Button>
             </Flex>
           </ModalBody>
           <ModalFooter>