tidy some more components

ui/src/components/feed/feed-item.tsx

@@ -71,6 +71,7 @@ export const BaseFeedItem: Component<BaseFeedItemProps> = props => (
             <Image.Fallback as={RssIcon} />
           </Image>
         </Match>
+
         <Match when={props.icon}>
           <Dynamic component={props.icon} />
         </Match>

ui/src/components/feed/feed-list.tsx

@@ -1,6 +1,6 @@
 import { useLocation } from '@solidjs/router';
 import { HiOutlineSquare3Stack3d } from 'solid-icons/hi';
-import { For, Match, Switch, createSignal } from 'solid-js';
+import { For, Match, Show, Switch, createSignal } from 'solid-js';
 import { useFeeds } from '~/hooks/queries/use-feeds';
 import { useFeedsStats } from '~/hooks/queries/use-feeds-stats';
 import { useQueryState } from '~/hooks/use-query-state';
@@ -10,11 +10,11 @@ export const FeedList = () => {
   const location = useLocation();
   const state = useQueryState();
 
-  const [allFeedsMenuOpen, setAllFeedsMenuOpen] = createSignal(false);
-
   const { feeds } = useFeeds();
   const { totalStats } = useFeedsStats();
 
+  const [allFeedsMenuOpen, setAllFeedsMenuOpen] = createSignal(false);
+
   return (
     <div class="flex w-full flex-col gap-4">
       <BaseFeedItem
@@ -31,17 +31,16 @@ export const FeedList = () => {
         <h3 class="select-none font-semibold text-gray-500 text-xs uppercase tracking-wider dark:text-gray-400">
           Feeds
         </h3>
+
         <Switch>
           <Match when={feeds.isError}>
             <p>Error: {feeds.error?.message}</p>
           </Match>
 
           <Match when={feeds.isSuccess}>
-            {feeds.data?.length ? (
+            <Show when={feeds.data?.length} fallback={<div>No feeds.</div>}>
               <For each={feeds.data}>{feed => <FeedItem feed={feed} />}</For>
-            ) : (
-              <div>No feeds.</div>
-            )}
+            </Show>
           </Match>
         </Switch>
       </div>

ui/src/components/menus/menu-settings.tsx

@@ -1,10 +1,4 @@
-import {
-  HiSolidArrowDownTray,
-  HiSolidArrowRightOnRectangle,
-  HiSolidCog,
-  HiSolidCog6Tooth,
-  HiSolidPlus,
-} from 'solid-icons/hi';
+import { HiSolidArrowDownTray, HiSolidArrowRightOnRectangle, HiSolidCog6Tooth, HiSolidPlus } from 'solid-icons/hi';
 import { TiCog } from 'solid-icons/ti';
 import { type Component, createSignal, mergeProps } from 'solid-js';
 import { CreateFeedModal } from '../modals/create-feed';

ui/src/components/ui/link.tsx

@@ -1,13 +1,16 @@
 import { A, type AnchorProps } from '@solidjs/router';
+import { cx } from 'class-variance-authority';
 import type { Component, ParentProps } from 'solid-js';
 
 type Props = ParentProps<AnchorProps>;
 
 export const Link: Component<Props> = props => (
   <A
     {...props}
-    class="font-sans font-semibold text-gray-500 transition-colors dark:hover:text-white dark:text-gray-200 hover:text-gray-800 hover:underline"
-    classList={{ [String(props.class)]: !!props.class }}
+    class={cx(
+      'font-sans font-semibold text-gray-500 transition-colors dark:hover:text-white dark:text-gray-200 hover:text-gray-800 hover:underline',
+      props.class,
+    )}
   >
     {props.children}
   </A>

ui/src/index.tsx

@@ -1,8 +1,8 @@
 import { QueryClient, QueryClientProvider } from '@tanstack/solid-query';
 import { SolidQueryDevtools } from '@tanstack/solid-query-devtools';
 import { render } from 'solid-js/web';
-import 'solid-devtools';
 import Router from './router';
+import 'solid-devtools';
 import 'tailwindcss/tailwind.css';
 
 const queryClient = new QueryClient();