Setting to show image details

src/components/widgets/Settings.tsx

@@ -36,6 +36,12 @@ export function Settings(props: SettingsProps) {
           <ModalHeader>Settings</ModalHeader>
           <ModalBody>
             <Flex direction="column" gap="1rem">
+              <Checkbox
+                checked={appSettings.showImageDetails}
+                onChange={(e) => setAppSettings({ showImageDetails: (e.target as any).checked })}
+              >
+                Show image details
+              </Checkbox>
               <Checkbox
                 checked={appSettings.showLocations}
                 onChange={(e) => setAppSettings({ showLocations: (e.target as any).checked })}

src/routes/index.tsx

@@ -14,7 +14,7 @@ export default function Home() {
   const searchProviders = createSearchProviders();
   const [searchTerm, setSearchTerm] = createSignal('');
   const { categories, apps } = createCategories();
-  const { currentBackground, onNextBackground } = useSettings();
+  const { appSettings, currentBackground, onNextBackground } = useSettings();
 
   const { activeCategory, selectCategory, resetCategory } = createActiveCategory();
 
@@ -121,15 +121,17 @@ export default function Home() {
           </Show>
         </div>
       </div>
-      <div class={style.CurrentBackground}>
-        <strong>
-          {currentBackground()?.description?.slice(0, 60) ||
-            currentBackground()?.alt_description?.slice(0, 60) ||
-            'Unnamed'}
-        </strong>
-        <br />
-        {currentBackground()?.location.name}
-      </div>
+      {appSettings.showImageDetails && (
+        <div class={style.CurrentBackground}>
+          <strong>
+            {currentBackground()?.description?.slice(0, 60) ||
+              currentBackground()?.alt_description?.slice(0, 60) ||
+              'Unnamed'}
+          </strong>
+          <br />
+          {currentBackground()?.location.name}
+        </div>
+      )}
     </main>
   );
 }

src/state/settings-provider.tsx

@@ -4,6 +4,7 @@ import { createLocalStore } from '~/lib/create-local-store';
 import { BackgroundsState, createBackgrounds } from './create-backgrounds';
 
 export type Settings = {
+  showImageDetails: boolean;
   showLocations: boolean;
   viewAsTable: boolean;
   useSavedBackgrounds: boolean;
@@ -17,6 +18,7 @@ type SettingsContextType = BackgroundsState & {
 
 const SettingsContext = createContext<SettingsContextType>({
   appSettings: {
+    showImageDetails: false,
     showLocations: false,
     viewAsTable: false,
     useSavedBackgrounds: false,
@@ -33,6 +35,7 @@ const SettingsContext = createContext<SettingsContextType>({
 
 export function SettingsProvider(props: { children: JSX.Element }) {
   const [appSettings, setAppSettings] = createLocalStore<Settings>('start-page-app-settings', {
+    showImageDetails: false,
     showLocations: false,
     viewAsTable: false,
     useSavedBackgrounds: false,