Refactor in more solid idiomatic way

src/components/apps/App.tsx

@@ -1,5 +1,5 @@
 import { getAppIcon } from '~/api/get-app-icon';
-import { useSettings } from '~/state/SettingsProvider';
+import { useSettings } from '~/state/settings-provider';
 import { AppDefinition } from '~/types';
 
 import style from './App.module.css';

src/components/apps/AppList.tsx

@@ -1,4 +1,4 @@
-import { Accessor } from 'solid-js';
+import { Accessor, For } from 'solid-js';
 import { AppDefinition } from '~/types';
 import { App } from './App';
 
@@ -23,9 +23,7 @@ export function AppList({
           </span>
         </h2>
         <div class={style.AppList}>
-          {apps().map((app) => (
-            <App {...app} />
-          ))}
+          <For each={apps()}>{(app) => <App {...app} />}</For>
         </div>
       </div>
     </div>

src/components/ui/Background.tsx

@@ -1,5 +1,5 @@
-import { createEffect, createSignal } from 'solid-js';
-import { useSettings } from '~/state/SettingsProvider';
+import { Show, createEffect, createSignal } from 'solid-js';
+import { useSettings } from '~/state/settings-provider';
 
 import style from './Background.module.css';
 
@@ -24,7 +24,9 @@ export function Background() {
         class={style.Background}
         src={fullLoaded() ? currentBackground()?.urls.full : currentBackground()?.urls.thumb}
       />
-      {!fullLoaded() ? <div class={style.Overlay}></div> : null}
+      <Show when={!fullLoaded()}>
+        <div class={style.Overlay}></div>
+      </Show>
     </>
   );
 }

src/components/ui/Sidebar.tsx

@@ -1,7 +1,7 @@
 import { Tooltip } from '@hope-ui/solid';
 import { HiOutlineStar, HiSolidStar } from 'solid-icons/hi';
-import { Accessor } from 'solid-js';
-import { useSettings } from '~/state/SettingsProvider';
+import { Accessor, For, Show } from 'solid-js';
+import { useSettings } from '~/state/settings-provider';
 import { Settings } from '../widgets/Settings';
 
 import style from './Sidebar.module.css';
@@ -18,26 +18,31 @@ export function Sidebar(props: SidebarProps) {
   return (
     <div class={style.Sidebar}>
       <ul class={style.Menu}>
-        {props.categories()?.map((category) => (
-          <li
-            class={props.activeCategory === category ? style.Active : ''}
-            onClick={() => props.selectCategory?.(category, 'permanent')}
-            onMouseEnter={() => props.selectCategory?.(category, 'temporary')}
-          >
-            {category}
-          </li>
-        ))}
+        <For each={props.categories()}>
+          {(category) => (
+            <li
+              class={props.activeCategory === category ? style.Active : ''}
+              onClick={() => props.selectCategory?.(category, 'permanent')}
+              onMouseEnter={() => props.selectCategory?.(category, 'temporary')}
+            >
+              {category}
+            </li>
+          )}
+        </For>
       </ul>
       <div class={style.SettingsWrapper}>
-        {isBackgroundSaved() ? (
+        <Show
+          when={isBackgroundSaved()}
+          fallback={
+            <Tooltip withArrow placement="top" label="Add to favorites">
+              <HiOutlineStar size={18} onClick={onFavoriteBackground} />
+            </Tooltip>
+          }
+        >
           <Tooltip withArrow placement="top" label="Remove from favorites">
             <HiSolidStar size={18} onClick={onUnfavoriteBackground} />
           </Tooltip>
-        ) : (
-          <Tooltip withArrow placement="top" label="Add to favorites">
-            <HiOutlineStar size={18} onClick={onFavoriteBackground} />
-          </Tooltip>
-        )}
+        </Show>
         <Tooltip withArrow placement="top" label="Settings">
           <Settings />
         </Tooltip>

src/components/widgets/Search.tsx

@@ -1,4 +1,4 @@
-import { Accessor, Resource, Setter, createMemo } from 'solid-js';
+import { Accessor, Resource, Setter, Show, createMemo } from 'solid-js';
 import { SearchProvider } from '~/types';
 
 import style from './Search.module.css';
@@ -61,7 +61,9 @@ export function Search(props: SearchProps) {
         />
         <div class={style.Provider}>{activeProvider()?.name}</div>
       </div>
-      {props.canOpenApp && <span class={style.Hint}>Press Shift+Enter to open first result</span>}
+      <Show when={props.canOpenApp}>
+        <span class={style.Hint}>Press Shift+Enter to open first result</span>
+      </Show>
     </div>
   );
 }

src/components/widgets/Settings.tsx

@@ -12,7 +12,7 @@ import {
   createDisclosure,
 } from '@hope-ui/solid';
 import { HiOutlineTrash, HiSolidCog } from 'solid-icons/hi';
-import { useSettings } from '~/state/SettingsProvider';
+import { useSettings } from '~/state/settings-provider';
 
 type SettingsProps = {
   className?: string;

src/components/widgets/Weather.tsx

@@ -1,6 +1,6 @@
 import { HiSolidArrowDown, HiSolidArrowUp } from 'solid-icons/hi';
 import { WiHumidity, WiSunrise, WiSunset } from 'solid-icons/wi';
-import { createMemo } from 'solid-js';
+import { Show } from 'solid-js';
 import { createWeather } from '~/api/open-weather';
 import { getTime } from '~/lib/date';
 
@@ -14,31 +14,27 @@ export function Weather() {
 
   return (
     <div class={style.Weather}>
-      {weather() ? (
-        <>
-          <div class={`${style.WeatherLine} ${style.Delimiter}`}>
-            <i class={`wi wi-owm-${weather()?.id} ${style.WeatherIcon}`}></i>
-            <div class={style.FeelsLike}>
-              <span>{weather()?.feels_like}&deg;</span>
-              <span>{weather()?.main}</span>
-            </div>
+      <Show when={weather()} fallback="Loading">
+        <div class={`${style.WeatherLine} ${style.Delimiter}`}>
+          <i class={`wi wi-owm-${weather()?.id} ${style.WeatherIcon}`}></i>
+          <div class={style.FeelsLike}>
+            <span>{weather()?.feels_like}&deg;</span>
+            <span>{weather()?.main}</span>
           </div>
-          <div class={style.WeatherLine}>
-            <HiSolidArrowDown color="lightcoral" />
-            {weather()?.temp_min}&deg; <HiSolidArrowUp color="lightgreen" /> {weather()?.temp_max}
-            &deg;
-            <WiHumidity />
-            {weather()?.humidity}%<br />
-          </div>
-          <div class={style.WeatherLine}></div>
-          <div class={style.WeatherLine}>
-            <WiSunrise /> {sunrise()}
-            <WiSunset /> {sunset()}
-          </div>
-        </>
-      ) : (
-        'Loading'
-      )}
+        </div>
+        <div class={style.WeatherLine}>
+          <HiSolidArrowDown color="lightcoral" />
+          {weather()?.temp_min}&deg; <HiSolidArrowUp color="lightgreen" /> {weather()?.temp_max}
+          &deg;
+          <WiHumidity />
+          {weather()?.humidity}%<br />
+        </div>
+        <div class={style.WeatherLine}></div>
+        <div class={style.WeatherLine}>
+          <WiSunrise /> {sunrise()}
+          <WiSunset /> {sunset()}
+        </div>
+      </Show>
     </div>
   );
 }

src/root.tsx

@@ -15,7 +15,7 @@ import {
 import './styles/weather-icons.min.css';
 import './styles/reset.css';
 import './root.css';
-import { SettingsProvider } from './state/SettingsProvider';
+import { SettingsProvider } from './state/settings-provider';
 import { Background } from './components/ui/Background';
 
 export default function Root() {

src/routes/index.tsx

@@ -1,4 +1,4 @@
-import { createMemo, createSignal, onCleanup, onMount } from 'solid-js';
+import { Show, createMemo, createSignal, onCleanup, onMount } from 'solid-js';
 import { createCategories } from '~/api/get-apps';
 import { createSearchProviders } from '~/api/get-search-providers';
 import { AppList } from '~/components/apps/AppList';
@@ -72,33 +72,34 @@ export default function Home() {
       />
       <div class={style.ContentWrapper}>
         <div class={style.Widgets}>
-          {activeCategory() ? (
+          <Show
+            when={activeCategory()}
+            fallback={
+              <>
+                <DateView />
+                <Search
+                  term={searchTerm}
+                  setTerm={setSearchTerm}
+                  providers={searchProviders}
+                  canOpenApp={searchResults().length > 0}
+                  onOpenApp={() => window.open(searchResults()[0].url)}
+                />
+                <Show when={shouldSearchLocally()} fallback={<Weather />}>
+                  <AppList
+                    category={() => 'search results'}
+                    apps={searchResults}
+                    resetCategory={() => setSearchTerm('')}
+                  />
+                </Show>
+              </>
+            }
+          >
             <AppList
               category={() => activeCategoryDef()?.name ?? ''}
               apps={() => activeCategoryDef()?.apps ?? []}
               resetCategory={resetCategory}
             />
-          ) : (
-            <>
-              <DateView />
-              <Search
-                term={searchTerm}
-                setTerm={setSearchTerm}
-                providers={searchProviders}
-                canOpenApp={searchResults().length > 0}
-                onOpenApp={() => window.open(searchResults()[0].url)}
-              />
-              {shouldSearchLocally() ? (
-                <AppList
-                  category={() => 'search results'}
-                  apps={searchResults}
-                  resetCategory={() => setSearchTerm('')}
-                />
-              ) : (
-                <Weather />
-              )}
-            </>
-          )}
+          </Show>
         </div>
       </div>
     </main>