refactor

src/components/apps/App.tsx

@@ -2,6 +2,7 @@ import { getAppIcon } from '~/api/get-app-icon';
 import { useSettings } from '~/state/settings-provider';
 import { AppDefinition } from '~/types';
 
+import { Show } from 'solid-js';
 import style from './App.module.css';
 
 export type PillProps = AppDefinition;
@@ -15,10 +16,14 @@ export function App({ url, name, icon, shortcut, location }: PillProps) {
         <div class={style.Text}>
           <span class={style.Name}>{name}</span>
           <span class={style.Url}>{url.split('://')[1].split('/')[0]}</span>
-          {appSettings.showLocations && location && <span class={style.Url}>{location}</span>}
+          <Show when={appSettings.showLocations && location}>
+            <span class={style.Url}>{location}</span>
+          </Show>
         </div>
         <img class={style.Icon} src={getAppIcon(icon)} alt={name} />
-        {shortcut && <span class={style.Index}>{shortcut}</span>}
+        <Show when={shortcut}>
+          <span class={style.Index}>{shortcut}</span>
+        </Show>
       </a>
     </div>
   );

src/components/apps/AppList.module.css

@@ -1,7 +1,5 @@
 .AppListWrap {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 2rem;
+  width: 100%;
 }
 
 .Header {

src/components/apps/AppList.tsx

@@ -9,22 +9,20 @@ export function AppList({
   apps,
   resetCategory: resetCategory,
 }: {
-  category?: Accessor<string>;
+  category: Accessor<string>;
   apps: Accessor<AppDefinition[]>;
   resetCategory?(): void;
 }) {
   return (
     <div class={style.AppListWrap}>
-      <div style={{ width: '100%' }}>
-        <h2 class={style.Header}>
-          {category?.()}
-          <span class={style.Close} onClick={resetCategory}>
-            ×
-          </span>
-        </h2>
-        <div class={style.AppList}>
-          <For each={apps()}>{(app) => <App {...app} />}</For>
-        </div>
+      <h2 class={style.Header}>
+        {category()}
+        <span class={style.Close} onClick={resetCategory}>
+          ×
+        </span>
+      </h2>
+      <div class={style.AppList}>
+        <For each={apps()}>{(app) => <App {...app} />}</For>
       </div>
     </div>
   );

src/components/ui/Background.tsx

@@ -19,14 +19,16 @@ export function Background() {
   });
 
   return (
-    <>
-      <img
-        class={style.Background}
-        src={fullLoaded() ? currentBackground()?.urls.full : currentBackground()?.urls.thumb}
-      />
-      <Show when={!fullLoaded()}>
-        <div class={style.Overlay}></div>
-      </Show>
-    </>
+    <Show
+      when={fullLoaded()}
+      fallback={
+        <>
+          <img class={style.Background} src={currentBackground()?.urls.thumb} />
+          <div class={style.Overlay}></div>
+        </>
+      }
+    >
+      <img class={style.Background} src={currentBackground()?.urls.full} />
+    </Show>
   );
 }

src/components/ui/Sidebar.tsx

@@ -8,8 +8,8 @@ import style from './Sidebar.module.css';
 
 type SidebarProps = {
   categories: Accessor<string[] | undefined>;
-  activeCategory?: string | null;
-  selectCategory?(category: string, mode: 'permanent' | 'temporary'): void;
+  activeCategory: Accessor<string | null>;
+  selectCategory(category: string, mode: 'permanent' | 'temporary'): void;
 };
 
 export function Sidebar(props: SidebarProps) {
@@ -21,9 +21,9 @@ export function Sidebar(props: SidebarProps) {
         <For each={props.categories()}>
           {(category) => (
             <li
-              class={props.activeCategory === category ? style.Active : ''}
-              onClick={() => props.selectCategory?.(category, 'permanent')}
-              onMouseEnter={() => props.selectCategory?.(category, 'temporary')}
+              class={props.activeCategory() === category ? style.Active : ''}
+              onClick={() => props.selectCategory(category, 'permanent')}
+              onMouseEnter={() => props.selectCategory(category, 'temporary')}
             >
               {category}
             </li>

src/components/widgets/Search.tsx

@@ -7,8 +7,8 @@ type SearchProps = {
   term: Accessor<string>;
   setTerm: Setter<string>;
   providers: Resource<SearchProvider[]>;
-  onOpenApp: () => void;
-  canOpenApp: boolean;
+  onOpenApp(): void;
+  canOpenApp: Accessor<boolean>;
 };
 
 export function Search(props: SearchProps) {
@@ -30,11 +30,21 @@ export function Search(props: SearchProps) {
   });
 
   const searchTerm = () => {
-    if (!props.term().startsWith('!')) {
-      return props.term();
+    const term = props.term();
+    return term.startsWith('!') ? term.split(`!${activeProvider()?.prefix} `)[1] : term;
+  };
+
+  const onKeyPress = (e: KeyboardEvent) => {
+    e.stopPropagation();
+    if (props.canOpenApp() && e.shiftKey && e.key === 'Enter') {
+      props.onOpenApp();
+      return;
     }
 
-    return props.term().split(`!${activeProvider()?.prefix} `)[1];
+    if (e.key === 'Enter') {
+      window.open(`${activeProvider()?.url}${searchTerm()}`, '_blank', 'noreferrer');
+      props.setTerm('');
+    }
   };
 
   return (
@@ -47,17 +57,7 @@ export function Search(props: SearchProps) {
           placeholder="Search..."
           value={props.term()}
           onInput={(e) => props.setTerm(e.target.value)}
-          onKeyPress={(e) => {
-            e.stopPropagation();
-            if (props.canOpenApp && e.shiftKey && e.key === 'Enter') {
-              props.onOpenApp();
-              return;
-            }
-            if (e.key === 'Enter') {
-              window.open(`${activeProvider()?.url}${searchTerm()}`, '_blank', 'noreferrer');
-              props.setTerm('');
-            }
-          }}
+          onKeyPress={onKeyPress}
         />
         <div class={style.Provider}>{activeProvider()?.name}</div>
       </div>

src/routes/index.tsx

@@ -68,7 +68,7 @@ export default function Home() {
       <Sidebar
         categories={() => categories()?.flatMap((c) => c.name)}
         selectCategory={selectCategory}
-        activeCategory={activeCategory()}
+        activeCategory={activeCategory}
       />
       <div class={style.ContentWrapper}>
         <div class={style.Widgets}>
@@ -81,7 +81,7 @@ export default function Home() {
                   term={searchTerm}
                   setTerm={setSearchTerm}
                   providers={searchProviders}
-                  canOpenApp={searchResults().length > 0}
+                  canOpenApp={() => searchResults().length > 0}
                   onOpenApp={() => window.open(searchResults()[0].url)}
                 />
                 <Show when={shouldSearchLocally()} fallback={<Weather />}>