Extract FavoriteBackground component

src/components/ui/FavoriteBackground.tsx

@@ -0,0 +1,23 @@
+import { Tooltip } from '@hope-ui/solid';
+import { HiOutlineStar, HiSolidStar } from 'solid-icons/hi';
+import { Show } from 'solid-js';
+import { useSettings } from '~/state/settings-provider';
+
+export function FavoriteBackground() {
+  const { onFavoriteBackground, onUnfavoriteBackground, isBackgroundSaved } = useSettings();
+
+  return (
+    <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>
+    </Show>
+  );
+}

src/components/ui/Sidebar.tsx

@@ -1,9 +1,8 @@
 import { Tooltip } from '@hope-ui/solid';
-import { HiOutlineStar, HiSolidStar } from 'solid-icons/hi';
-import { Accessor, For, Show } from 'solid-js';
-import { useSettings } from '~/state/settings-provider';
+import { Accessor, For, createSelector } from 'solid-js';
 import { Settings } from '../widgets/Settings';
 
+import { FavoriteBackground } from './FavoriteBackground';
 import style from './Sidebar.module.css';
 
 type SidebarProps = {
@@ -13,7 +12,7 @@ type SidebarProps = {
 };
 
 export function Sidebar(props: SidebarProps) {
-  const { onFavoriteBackground, onUnfavoriteBackground, isBackgroundSaved } = useSettings();
+  const isActive = createSelector(props.activeCategory);
 
   return (
     <div class={style.Sidebar}>
@@ -21,7 +20,7 @@ export function Sidebar(props: SidebarProps) {
         <For each={props.categories()}>
           {(category) => (
             <li
-              class={props.activeCategory() === category ? style.Active : ''}
+              classList={{ [style.Active]: isActive(category) }}
               onClick={() => props.selectCategory(category, 'permanent')}
               onMouseEnter={() => props.selectCategory(category, 'temporary')}
             >
@@ -31,18 +30,7 @@ export function Sidebar(props: SidebarProps) {
         </For>
       </ul>
       <div class={style.SettingsWrapper}>
-        <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>
-        </Show>
+        <FavoriteBackground />
         <Tooltip withArrow placement="top" label="Settings">
           <Settings />
         </Tooltip>