From 2099f910f8918759f3d40888ebc718fdf4442cfe Mon Sep 17 00:00:00 2001
From: Zak Nesler <zak@nesler.dev>
Date: Sat, 1 Jun 2024 19:37:34 -0400
Subject: [PATCH] icon tweaks

---
 LICENSE                                       |   2 +-
 ui/src/components/feed/feed-header.tsx        |   2 +-
 ui/src/components/feed/feed-info.tsx          |  20 ++-
 ui/src/components/feed/feed-item.tsx          |   2 +-
 ui/src/components/feed/feed-list.tsx          |   2 +-
 ui/src/components/layout/sidebar.tsx          |   9 +-
 ui/src/components/menus/feed-menu.tsx         |  39 ------
 ui/src/components/menus/feeds-menu.tsx        |  29 -----
 ui/src/components/menus/menu-app.tsx          |  69 +++++++++++
 ui/src/components/menus/menu-feed.tsx         |  28 +++++
 ui/src/components/menus/menu.tsx              |  18 ++-
 ui/src/components/menus/settings-menu.tsx     |  43 -------
 ui/src/components/nav/nav-row.tsx             |  15 +--
 ui/src/components/nav/nav-view-switcher.tsx   |   2 +-
 ui/src/components/panels/list-panel.tsx       |  23 ++--
 ui/src/components/ui/button/icon-button.tsx   |  42 +++++++
 .../ui/{button.tsx => button/index.tsx}       |   0
 ui/src/components/ui/tooltip.tsx              |  25 ++--
 .../layout => constants/ui}/logo.tsx          | 114 ++++++++++--------
 ui/src/constants/ui/menu.ts                   |  18 +--
 ui/src/constants/ui/tooltip.ts                |  19 +++
 ui/src/routes/404.tsx                         |   2 +-
 22 files changed, 301 insertions(+), 222 deletions(-)
 delete mode 100644 ui/src/components/menus/feed-menu.tsx
 delete mode 100644 ui/src/components/menus/feeds-menu.tsx
 create mode 100644 ui/src/components/menus/menu-app.tsx
 create mode 100644 ui/src/components/menus/menu-feed.tsx
 delete mode 100644 ui/src/components/menus/settings-menu.tsx
 create mode 100644 ui/src/components/ui/button/icon-button.tsx
 rename ui/src/components/ui/{button.tsx => button/index.tsx} (100%)
 rename ui/src/{components/layout => constants/ui}/logo.tsx (66%)
 create mode 100644 ui/src/constants/ui/tooltip.ts

diff --git a/LICENSE b/LICENSE
index 5ce66e9e..b7c99401 100644
--- a/LICENSE
+++ b/LICENSE
@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2024 Zak Nesler
+Copyright (c) 2024 Zachary Nesler
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
diff --git a/ui/src/components/feed/feed-header.tsx b/ui/src/components/feed/feed-header.tsx
index 7998005b..bded43a9 100644
--- a/ui/src/components/feed/feed-header.tsx
+++ b/ui/src/components/feed/feed-header.tsx
@@ -6,7 +6,7 @@ type FeedHeaderProps = {
 };
 
 export const FeedHeader: Component<FeedHeaderProps> = props => (
-  <div class="flex flex-1 flex-col overflow-hidden whitespace-nowrap">
+  <div class="flex flex-1 flex-shrink flex-col overflow-hidden whitespace-nowrap">
     <h2 class="font-semibold">{props.title}</h2>
     <Show when={props.subtitle}>
       <small class="overflow-hidden overflow-ellipsis text-gray-500 text-xs dark:text-gray-400">{props.subtitle}</small>
diff --git a/ui/src/components/feed/feed-info.tsx b/ui/src/components/feed/feed-info.tsx
index 00e5e305..ab689cce 100644
--- a/ui/src/components/feed/feed-info.tsx
+++ b/ui/src/components/feed/feed-info.tsx
@@ -1,8 +1,11 @@
 import { createQuery } from '@tanstack/solid-query';
+import { HiOutlineArrowPath } from 'solid-icons/hi';
 import { type Component, Match, Switch, createSignal } from 'solid-js';
 import { getFeed } from '~/api/feeds';
 import { QUERY_KEYS } from '~/constants/query';
-import { MenuFeed } from '../menus/feed-menu';
+import { useRefreshFeed } from '~/hooks/queries/use-refresh-feed';
+import { FeedMenu } from '../menus/menu-feed';
+import { IconButton } from '../ui/button/icon-button';
 import { FeedHeader } from './feed-header';
 
 type FeedInfoProps = {
@@ -10,7 +13,7 @@ type FeedInfoProps = {
 };
 
 export const FeedInfo: Component<FeedInfoProps> = props => {
-  const [contextMenuOpen, setContextMenuOpen] = createSignal(false);
+  const refresh = useRefreshFeed();
 
   const feed = createQuery(() => ({
     queryKey: [QUERY_KEYS.FEEDS_VIEW, props.uuid],
@@ -19,6 +22,8 @@ export const FeedInfo: Component<FeedInfoProps> = props => {
     refetchOnMount: false,
   }));
 
+  const [contextMenuOpen, setContextMenuOpen] = createSignal(false);
+
   return (
     <Switch>
       <Match when={feed.isPending}>
@@ -30,10 +35,17 @@ export const FeedInfo: Component<FeedInfoProps> = props => {
       </Match>
 
       <Match when={feed.isSuccess}>
-        <div class="flex w-full items-start gap-4 overflow-hidden">
+        <div class="flex w-full items-start gap-2">
           <FeedHeader title={feed.data?.title_display || feed.data?.title} subtitle={feed.data?.url_feed} />
 
-          <MenuFeed
+          <IconButton
+            onClick={() => refresh.refreshFeed(props.uuid)}
+            icon={HiOutlineArrowPath}
+            tooltip="Refresh feed"
+            class="size-6 rounded-md text-gray-500"
+          />
+
+          <FeedMenu
             uuid={props.uuid}
             open={contextMenuOpen()}
             setOpen={setContextMenuOpen}
diff --git a/ui/src/components/feed/feed-item.tsx b/ui/src/components/feed/feed-item.tsx
index 57dda80c..59aa7da5 100644
--- a/ui/src/components/feed/feed-item.tsx
+++ b/ui/src/components/feed/feed-item.tsx
@@ -71,7 +71,7 @@ export const BaseFeedItem: Component<BaseFeedItemProps> = props => (
         : 'border-transparent dark:hover:bg-gray-800 hover:bg-gray-200 dark:hover:text-white hover:text-gray-900',
     )}
   >
-    <div class="relative flex size-7 shrink-0 items-center justify-center overflow-hidden rounded-md md:h-5 md:w-5 md:rounded">
+    <div class="relative flex size-7 shrink-0 items-center justify-center overflow-hidden rounded-md md:size-5 md:rounded">
       <Switch fallback={<RssIcon />}>
         <Match when={props.favicon_src}>
           <Image fallbackDelay={500} class="size-full">
diff --git a/ui/src/components/feed/feed-list.tsx b/ui/src/components/feed/feed-list.tsx
index 5e28c1e8..a7dd2760 100644
--- a/ui/src/components/feed/feed-list.tsx
+++ b/ui/src/components/feed/feed-list.tsx
@@ -20,7 +20,7 @@ export const FeedList = () => {
       <BaseFeedItem
         href={'/'.concat(state.getQueryString())}
         title="All feeds"
-        icon={() => <HiOutlineSquare3Stack3d class="size-6 text-gray-600 md:h-5 md:w-5" />}
+        icon={() => <HiOutlineSquare3Stack3d class="size-6 text-gray-600 md:size-5 dark:text-gray-500" />}
         open={allFeedsMenuOpen()}
         active={location.pathname === '/'}
         setOpen={setAllFeedsMenuOpen}
diff --git a/ui/src/components/layout/sidebar.tsx b/ui/src/components/layout/sidebar.tsx
index 60e1be86..f2b2533a 100644
--- a/ui/src/components/layout/sidebar.tsx
+++ b/ui/src/components/layout/sidebar.tsx
@@ -1,8 +1,7 @@
 import { cx } from 'class-variance-authority';
 import { type Component, createSignal } from 'solid-js';
 import { FeedList } from '../feed/feed-list';
-import { MenuSettings } from '../menus/settings-menu';
-import { LogoSquare } from './logo';
+import { AppMenu } from '../menus/menu-app';
 
 type SidebarProps = {
   class?: string;
@@ -13,11 +12,7 @@ export const Sidebar: Component<SidebarProps> = props => {
 
   return (
     <div class={cx('-mr-4 relative flex h-full flex-col items-stretch gap-4 p-4 dark:bg-gray-950', props.class)}>
-      <div class="flex justify-between">
-        <LogoSquare class="size-6" />
-        <MenuSettings open={settingsOpen()} setOpen={setSettingsOpen} gutter={4} />
-      </div>
-
+      <AppMenu open={settingsOpen()} setOpen={setSettingsOpen} gutter={4} />
       <FeedList />
     </div>
   );
diff --git a/ui/src/components/menus/feed-menu.tsx b/ui/src/components/menus/feed-menu.tsx
deleted file mode 100644
index 47607d9d..00000000
--- a/ui/src/components/menus/feed-menu.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import { HiSolidArrowPath, HiSolidPencilSquare, HiSolidTrash } from 'solid-icons/hi';
-import { type Component, mergeProps } from 'solid-js';
-import { useRefreshFeed } from '~/hooks/queries/use-refresh-feed';
-import { Menu, type MenuProps } from './menu';
-
-type FeedMenuProps = MenuProps & {
-  uuid: string;
-};
-
-export const MenuFeed: Component<FeedMenuProps> = props => {
-  const local = mergeProps(
-    {
-      triggerClass: 'size-5 rounded',
-      triggerIconClass: 'size-4 text-gray-500',
-    } as MenuProps,
-    props,
-  );
-
-  const refresh = useRefreshFeed();
-
-  const handleRefresh = () => {
-    refresh.refreshFeed(props.uuid);
-    props.setOpen(false);
-  };
-
-  return (
-    <Menu {...local} size="sm">
-      <Menu.Item onSelect={handleRefresh} icon={HiSolidArrowPath}>
-        Refresh
-      </Menu.Item>
-      <Menu.Item disabled icon={HiSolidPencilSquare}>
-        Rename
-      </Menu.Item>
-      <Menu.Item disabled icon={HiSolidTrash}>
-        Delete
-      </Menu.Item>
-    </Menu>
-  );
-};
diff --git a/ui/src/components/menus/feeds-menu.tsx b/ui/src/components/menus/feeds-menu.tsx
deleted file mode 100644
index 78720713..00000000
--- a/ui/src/components/menus/feeds-menu.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import { HiSolidArrowPath } from 'solid-icons/hi';
-import { type Component, mergeProps } from 'solid-js';
-import { useRefreshFeeds } from '~/hooks/queries/use-refresh-feeds';
-import { Menu, type MenuProps } from './menu';
-
-export const MenuFeeds: Component<MenuProps> = props => {
-  const local = mergeProps(
-    {
-      triggerClass: 'size-5 rounded',
-      triggerIconClass: 'size-4 text-gray-500',
-    } as MenuProps,
-    props,
-  );
-
-  const refresh = useRefreshFeeds();
-
-  const handleRefreshFeeds = () => {
-    refresh.refreshFeeds();
-    props.setOpen(false);
-  };
-
-  return (
-    <Menu {...local} size="lg">
-      <Menu.Item onSelect={handleRefreshFeeds} icon={HiSolidArrowPath}>
-        Refresh all feeds
-      </Menu.Item>
-    </Menu>
-  );
-};
diff --git a/ui/src/components/menus/menu-app.tsx b/ui/src/components/menus/menu-app.tsx
new file mode 100644
index 00000000..6a0f595d
--- /dev/null
+++ b/ui/src/components/menus/menu-app.tsx
@@ -0,0 +1,69 @@
+import { Button as BaseButton } from '@kobalte/core/button';
+import { DropdownMenu, type DropdownMenuTriggerProps } from '@kobalte/core/dropdown-menu';
+import {
+  HiSolidArrowDownTray,
+  HiSolidArrowRightOnRectangle,
+  HiSolidChevronDown,
+  HiSolidCog6Tooth,
+  HiSolidPlus,
+} from 'solid-icons/hi';
+import { TiCog } from 'solid-icons/ti';
+import { type Component, createSignal, mergeProps } from 'solid-js';
+import { Dynamic } from 'solid-js/web';
+import { LogoSquare } from '../../constants/ui/logo';
+import { CreateFeedModal } from '../modals/create-feed-modal';
+import { Menu, type MenuProps } from './menu';
+
+export const AppMenu: Component<MenuProps> = props => {
+  const [createFeedModalOpen, setCreateFeedModalOpen] = createSignal(false);
+
+  const local = mergeProps(
+    {
+      triggerClass: 'size-6 rounded-md',
+      triggerIconClass: 'size-5',
+      triggerIcon: TiCog,
+    } as MenuProps,
+    props,
+  );
+
+  const handleAddFeed = () => {
+    setCreateFeedModalOpen(true);
+  };
+
+  return (
+    <>
+      <Menu
+        {...local}
+        shift={4}
+        trigger={() => (
+          <DropdownMenu.Trigger
+            as={(polyProps: DropdownMenuTriggerProps) => (
+              <BaseButton
+                {...polyProps}
+                class="-m-1 inline-flex items-center gap-2 self-start rounded-lg p-1 pr-2 transition dark:hover:bg-gray-700 hover:bg-gray-200 focus:outline-none dark:focus:ring-gray-600 focus:ring-2 focus:ring-gray-500 focus:ring-opacity-30"
+              >
+                <LogoSquare iconOnly class="inline-flex size-6" />
+                <Dynamic component={HiSolidChevronDown} class="size-4 text-gray-500 dark:text-gray-400" />
+              </BaseButton>
+            )}
+          />
+        )}
+      >
+        <Menu.Item onSelect={handleAddFeed} icon={HiSolidPlus}>
+          Add feed
+        </Menu.Item>
+        <Menu.Item disabled icon={HiSolidArrowDownTray}>
+          Import/export
+        </Menu.Item>
+        <Menu.Item disabled icon={HiSolidCog6Tooth}>
+          Settings
+        </Menu.Item>
+        <Menu.Item disabled icon={HiSolidArrowRightOnRectangle}>
+          Sign out
+        </Menu.Item>
+      </Menu>
+
+      <CreateFeedModal open={createFeedModalOpen()} setOpen={setCreateFeedModalOpen} />
+    </>
+  );
+};
diff --git a/ui/src/components/menus/menu-feed.tsx b/ui/src/components/menus/menu-feed.tsx
new file mode 100644
index 00000000..5a50c8fd
--- /dev/null
+++ b/ui/src/components/menus/menu-feed.tsx
@@ -0,0 +1,28 @@
+import { HiSolidPencilSquare, HiSolidTrash } from 'solid-icons/hi';
+import { type Component, mergeProps } from 'solid-js';
+import { Menu, type MenuProps } from './menu';
+
+type FeedMenuProps = MenuProps & {
+  uuid: string;
+};
+
+export const FeedMenu: Component<FeedMenuProps> = props => {
+  const local = mergeProps(
+    {
+      triggerClass: 'size-5 rounded',
+      triggerIconClass: 'size-4',
+    } as MenuProps,
+    props,
+  );
+
+  return (
+    <Menu {...local} size="sm">
+      <Menu.Item disabled icon={HiSolidPencilSquare}>
+        Rename
+      </Menu.Item>
+      <Menu.Item disabled icon={HiSolidTrash}>
+        Delete
+      </Menu.Item>
+    </Menu>
+  );
+};
diff --git a/ui/src/components/menus/menu.tsx b/ui/src/components/menus/menu.tsx
index 9a1ce90d..eb337a0d 100644
--- a/ui/src/components/menus/menu.tsx
+++ b/ui/src/components/menus/menu.tsx
@@ -7,7 +7,7 @@ import {
 import { type VariantProps, cx } from 'class-variance-authority';
 import type { IconTypes } from 'solid-icons';
 import { HiSolidEllipsisHorizontal } from 'solid-icons/hi';
-import { type ParentComponent, type Setter, splitProps } from 'solid-js';
+import { type JSX, type ParentComponent, type Setter, Show, splitProps } from 'solid-js';
 import { Dynamic } from 'solid-js/web';
 import * as menuClasses from '~/constants/ui/menu';
 
@@ -15,6 +15,7 @@ export type MenuProps = Omit<DropdownMenuRootProps, 'open' | 'onOpenChange'> &
   MenuContentProps & {
     open: boolean;
     setOpen: Setter<boolean>;
+    trigger?: () => JSX.Element;
     triggerIcon?: IconTypes;
     triggerClass?: string;
     triggerIconClass?: string;
@@ -26,6 +27,7 @@ const MenuRoot: ParentComponent<MenuProps> = props => {
     'children',
     'open',
     'setOpen',
+    'trigger',
     'triggerIcon',
     'triggerClass',
     'triggerIconClass',
@@ -33,9 +35,16 @@ const MenuRoot: ParentComponent<MenuProps> = props => {
 
   return (
     <DropdownMenu placement="bottom-end" {...rest} open={local.open} onOpenChange={local.setOpen} modal>
-      <MenuTrigger class={cx('relative', local.triggerClass)}>
-        <Dynamic component={local.triggerIcon || HiSolidEllipsisHorizontal} class={local.triggerIconClass} />
-      </MenuTrigger>
+      <Show
+        when={local.trigger}
+        fallback={
+          <MenuTrigger class={cx('relative', local.triggerClass)}>
+            <Dynamic component={local.triggerIcon || HiSolidEllipsisHorizontal} class={local.triggerIconClass} />
+          </MenuTrigger>
+        }
+      >
+        <Dynamic component={local.trigger} />
+      </Show>
 
       <DropdownMenu.Portal>
         <MenuContent size={local.size}>{local.children}</MenuContent>
@@ -86,4 +95,5 @@ const MenuContent: ParentComponent<MenuContentProps> = props => (
 export const Menu = Object.assign(MenuRoot, {
   Item: MenuItem,
   Content: MenuContent,
+  Trigger: MenuTrigger,
 });
diff --git a/ui/src/components/menus/settings-menu.tsx b/ui/src/components/menus/settings-menu.tsx
deleted file mode 100644
index 5ad2fe9c..00000000
--- a/ui/src/components/menus/settings-menu.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-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-modal';
-import { Menu, type MenuProps } from './menu';
-
-export const MenuSettings: Component<MenuProps> = props => {
-  const [createFeedModalOpen, setCreateFeedModalOpen] = createSignal(false);
-
-  const local = mergeProps(
-    {
-      triggerClass: 'size-6 rounded-md',
-      triggerIconClass: 'size-5 text-gray-500',
-      triggerIcon: TiCog,
-    } as MenuProps,
-    props,
-  );
-
-  const handleAddFeed = () => {
-    setCreateFeedModalOpen(true);
-  };
-
-  return (
-    <>
-      <Menu {...local}>
-        <Menu.Item onSelect={handleAddFeed} icon={HiSolidPlus}>
-          Add feed
-        </Menu.Item>
-        <Menu.Item disabled icon={HiSolidArrowDownTray}>
-          Import/export
-        </Menu.Item>
-        <Menu.Item disabled icon={HiSolidCog6Tooth}>
-          Settings
-        </Menu.Item>
-        <Menu.Item disabled icon={HiSolidArrowRightOnRectangle}>
-          Sign out
-        </Menu.Item>
-      </Menu>
-
-      <CreateFeedModal open={createFeedModalOpen()} setOpen={setCreateFeedModalOpen} />
-    </>
-  );
-};
diff --git a/ui/src/components/nav/nav-row.tsx b/ui/src/components/nav/nav-row.tsx
index 8e01d898..0505ed54 100644
--- a/ui/src/components/nav/nav-row.tsx
+++ b/ui/src/components/nav/nav-row.tsx
@@ -6,9 +6,7 @@ import { HiOutlineQueueList, HiSolidArrowLeft, HiSolidXMark } from 'solid-icons/
 import { type Component, type Setter, Show, createSignal } from 'solid-js';
 import { Dynamic } from 'solid-js/web';
 import { useQueryState } from '~/contexts/query-state-context';
-import { useViewport } from '~/hooks/use-viewport';
-import { LogoSquare } from '../layout/logo';
-import { MenuSettings } from '../menus/settings-menu';
+import { AppMenu } from '../menus/menu-app';
 import { Tooltip } from '../ui/tooltip';
 
 type NavRowProps = {
@@ -21,18 +19,13 @@ type NavRowProps = {
 
 export const NavRow: Component<NavRowProps> = props => {
   const state = useQueryState();
-  const viewport = useViewport();
   const navigate = useNavigate();
 
   const [settingsOpen, setSettingsOpen] = createSignal(false);
 
   return (
     <div class={cx('flex w-full items-center gap-4 bg-gray-50 p-4 dark:bg-gray-900', props.class)}>
-      <LogoSquare class="size-6" />
-
-      <Show when={viewport.lteBreakpoint('md') ? !state.params.entry_uuid : true}>
-        <MenuSettings open={settingsOpen()} setOpen={setSettingsOpen} gutter={4} />
-      </Show>
+      <AppMenu open={settingsOpen()} setOpen={setSettingsOpen} gutter={4} />
 
       <div class="flex flex-1 items-center justify-end">
         <Show when={props.showFeedSwitch}>
@@ -42,7 +35,7 @@ export const NavRow: Component<NavRowProps> = props => {
                 <Button
                   {...local}
                   onClick={() => props.setOpen(val => !val)}
-                  class="-m-1 cursor-default appearance-none rounded-lg p-1 dark:hover:bg-gray-800 hover:bg-gray-100"
+                  class="-m-1 z-10 cursor-default appearance-none rounded-lg p-1 dark:hover:bg-gray-700 hover:bg-gray-100 focus:outline-none dark:focus:ring-gray-600 focus:ring-2 focus:ring-gray-500 focus:ring-opacity-30"
                 >
                   <Dynamic
                     component={props.open ? HiSolidXMark : HiOutlineQueueList}
@@ -62,7 +55,7 @@ export const NavRow: Component<NavRowProps> = props => {
                 <Button
                   {...local}
                   onClick={() => navigate(state.getFeedUrl())}
-                  class="-m-1 ml-auto cursor-default appearance-none rounded-lg p-1 dark:hover:bg-gray-800 hover:bg-gray-100"
+                  class="-m-1 z-10 ml-auto cursor-default appearance-none rounded-lg p-1 dark:hover:bg-gray-800 hover:bg-gray-100"
                 >
                   <HiSolidArrowLeft class="size-5 text-gray-500 dark:text-gray-400" />
                 </Button>
diff --git a/ui/src/components/nav/nav-view-switcher.tsx b/ui/src/components/nav/nav-view-switcher.tsx
index a7fc1737..3f68ba3b 100644
--- a/ui/src/components/nav/nav-view-switcher.tsx
+++ b/ui/src/components/nav/nav-view-switcher.tsx
@@ -25,7 +25,7 @@ export const NavViewSwitcher = () => {
                 class={cx(
                   'w-full rounded-md border border-transparent px-2 py-1.5 transition',
                   'group-focus:!border-gray-400 group-hover:border-gray-200/50 group-hover:bg-gray-50 group-focus:ring-[2px] group-focus:ring-gray-200',
-                  'dark:group-focus:!border-gray-600 dark:group-hover:bg-gray-800 dark:group-focus:ring-gray-800',
+                  'dark:group-focus:!border-gray-600 dark:group-hover:!border-gray-700 dark:group-hover:bg-gray-700 dark:group-focus:ring-gray-800',
                   'ui-group-selected:bg-white ui-group-selected:shadow',
                   'ui-group-selected:dark:bg-gray-900 ui-group-selected:shadow',
                 )}
diff --git a/ui/src/components/panels/list-panel.tsx b/ui/src/components/panels/list-panel.tsx
index f176e34d..e65c07ed 100644
--- a/ui/src/components/panels/list-panel.tsx
+++ b/ui/src/components/panels/list-panel.tsx
@@ -2,6 +2,7 @@ import { createActiveElement } from '@solid-primitives/active-element';
 import { createElementBounds } from '@solid-primitives/bounds';
 import { useIsRouting } from '@solidjs/router';
 import { cx } from 'class-variance-authority';
+import { HiOutlineArrowPath } from 'solid-icons/hi';
 import { Match, Show, Switch, createEffect, createSignal } from 'solid-js';
 import { Portal } from 'solid-js/web';
 import { EntryList } from '~/components/entry/entry-list';
@@ -9,19 +10,21 @@ import { FeedHeader } from '~/components/feed/feed-header';
 import { FeedInfo } from '~/components/feed/feed-info';
 import { FeedList } from '~/components/feed/feed-list';
 import { Panel } from '~/components/layout/panel';
-import { MenuFeeds } from '~/components/menus/feeds-menu';
 import { NavRow } from '~/components/nav/nav-row';
 import { NavViewSwitcher } from '~/components/nav/nav-view-switcher';
 import { useQueryState } from '~/contexts/query-state-context';
+import { useRefreshFeeds } from '~/hooks/queries/use-refresh-feeds';
 import { useViewport } from '~/hooks/use-viewport';
+import { IconButton } from '../ui/button/icon-button';
 
 export const ListPanel = () => {
   const state = useQueryState();
   const viewport = useViewport();
   const isRouting = useIsRouting();
 
+  const refresh = useRefreshFeeds();
+
   const [showFeedSelector, setShowFeedSelector] = createSignal(false);
-  const [allFeedsMenuOpen, setAllFeedsMenuOpen] = createSignal(false);
 
   const [container, setContainer] = createSignal<HTMLElement>();
   const containerBounds = createElementBounds(container);
@@ -61,7 +64,7 @@ export const ListPanel = () => {
       <Portal>
         <button
           type="button"
-          class="-translate-y-[9999px] absolute top-2 left-2 z-[9999] select-none appearance-none rounded-lg border bg-white px-3 py-2 text-black text-sm shadow-lg focus:translate-y-0 focus:border-gray-200 active:bg-gray-100 focus:outline-none focus:ring-2"
+          class="-translate-y-[9999px] absolute top-2 left-2 z-[9999] select-none appearance-none rounded-lg border bg-white px-3 py-2 text-black text-sm shadow-lg focus:translate-y-0 dark:focus:border-gray-400 focus:border-gray-200 active:bg-gray-100 dark:bg-gray-950 dark:text-gray-300 focus:outline-none dark:focus:ring-gray-600 focus:ring-2 focus:ring-gray-500 focus:ring-opacity-30"
           tabindex={1}
           onClick={handleSkipToContent}
         >
@@ -97,14 +100,14 @@ export const ListPanel = () => {
 
                 {/* Showing all feeds -- create custom label */}
                 <Match when={!state.params.feed_uuid}>
-                  <div class="flex w-full select-none items-start justify-between">
+                  <div class="flex w-full select-none items-start justify-between gap-2">
                     <FeedHeader title="All feeds" />
-                    <MenuFeeds
-                      open={allFeedsMenuOpen()}
-                      setOpen={setAllFeedsMenuOpen}
-                      triggerClass="size-6 rounded-md"
-                      triggerIconClass="w-4 h-4 text-gray-500"
-                      gutter={4}
+
+                    <IconButton
+                      onClick={() => refresh.refreshFeeds()}
+                      icon={HiOutlineArrowPath}
+                      tooltip="Refresh all feeds"
+                      class="z-10 size-6 rounded-md text-gray-500"
                     />
                   </div>
                 </Match>
diff --git a/ui/src/components/ui/button/icon-button.tsx b/ui/src/components/ui/button/icon-button.tsx
new file mode 100644
index 00000000..ee9d8edd
--- /dev/null
+++ b/ui/src/components/ui/button/icon-button.tsx
@@ -0,0 +1,42 @@
+import { Button as BaseButton, type ButtonRootProps } from '@kobalte/core/button';
+import type { TooltipTriggerProps } from '@kobalte/core/tooltip';
+import type { VariantProps } from 'class-variance-authority';
+import type { IconTypes } from 'solid-icons';
+import { type Component, type JSX, Show, splitProps } from 'solid-js';
+import { Dynamic } from 'solid-js/web';
+import { trigger } from '~/constants/ui/menu';
+import { Tooltip } from '../tooltip';
+
+export type IconButtonProps = JSX.IntrinsicElements['button'] &
+  ButtonRootProps &
+  VariantProps<typeof trigger> & {
+    icon: IconTypes;
+    class?: string;
+    tooltip?: string;
+  };
+
+export const IconButton: Component<IconButtonProps> = props => {
+  const [local, rest] = splitProps(props, ['class', 'tooltip', 'icon']);
+
+  return (
+    <Show
+      when={local.tooltip}
+      fallback={
+        <BaseButton {...rest} class={trigger({ class: local.class })}>
+          <Dynamic component={local.icon} />
+        </BaseButton>
+      }
+    >
+      <Tooltip openDelay={100}>
+        <Tooltip.Trigger
+          as={(polyProps: TooltipTriggerProps) => (
+            <BaseButton {...polyProps} {...rest} class={trigger({ class: local.class })}>
+              <Dynamic component={local.icon} />
+            </BaseButton>
+          )}
+        />
+        <Tooltip.Content>{local.tooltip}</Tooltip.Content>
+      </Tooltip>
+    </Show>
+  );
+};
diff --git a/ui/src/components/ui/button.tsx b/ui/src/components/ui/button/index.tsx
similarity index 100%
rename from ui/src/components/ui/button.tsx
rename to ui/src/components/ui/button/index.tsx
diff --git a/ui/src/components/ui/tooltip.tsx b/ui/src/components/ui/tooltip.tsx
index 175110f5..c095f1dd 100644
--- a/ui/src/components/ui/tooltip.tsx
+++ b/ui/src/components/ui/tooltip.tsx
@@ -1,29 +1,30 @@
 import type { PolymorphicProps } from '@kobalte/core/polymorphic';
 import * as TooltipPrimitive from '@kobalte/core/tooltip';
-import { cx } from 'class-variance-authority';
+import type { VariantProps } from 'class-variance-authority';
 import { type JSX, Show, type ValidComponent, mergeProps, splitProps } from 'solid-js';
+import * as classes from '~/constants/ui/tooltip';
 
 const TooltipBase = (props: TooltipPrimitive.TooltipRootProps) => <TooltipPrimitive.Root {...props} />;
 
-type TooltipContentProps = TooltipPrimitive.TooltipContentProps & {
-  class?: string;
-  showArrow?: boolean;
-  children?: JSX.Element;
-};
+type TooltipContentProps = TooltipPrimitive.TooltipContentProps &
+  VariantProps<typeof classes.content> & {
+    class?: string;
+    showArrow?: boolean;
+    children?: JSX.Element;
+  };
 
 const TooltipContent = <T extends ValidComponent = 'div'>(props: PolymorphicProps<T, TooltipContentProps>) => {
-  const [local, rest] = splitProps(props as TooltipContentProps, ['class', 'showArrow', 'children']);
+  const [local, rest] = splitProps(props as TooltipContentProps, ['class', 'showArrow', 'children', 'size']);
   const merge = mergeProps({ showArrow: true }, local);
 
   return (
     <TooltipPrimitive.Portal>
       <TooltipPrimitive.Content
         {...rest}
-        class={cx(
-          'z-50 select-none rounded-lg bg-gray-800 px-4 py-2 text-white text-xs',
-          'origin-[--kb-menu-content-transform-origin] animate-content-hide ui-expanded:animate-content-show',
-          local.class,
-        )}
+        class={classes.content({
+          size: local.size,
+          class: ['origin-[--kb-menu-content-transform-origin]', local.class],
+        })}
       >
         <Show when={merge.showArrow}>
           <Tooltip.Arrow class="-mb-px z-50" />
diff --git a/ui/src/components/layout/logo.tsx b/ui/src/constants/ui/logo.tsx
similarity index 66%
rename from ui/src/components/layout/logo.tsx
rename to ui/src/constants/ui/logo.tsx
index 72ecad3b..877e22cc 100644
--- a/ui/src/components/layout/logo.tsx
+++ b/ui/src/constants/ui/logo.tsx
@@ -1,8 +1,11 @@
 import { A, type AnchorProps } from '@solidjs/router';
 import { cx } from 'class-variance-authority';
-import { type Component, createUniqueId, mergeProps, splitProps } from 'solid-js';
+import { type Component, Show, createUniqueId, mergeProps, splitProps } from 'solid-js';
+import { Dynamic } from 'solid-js/web';
 
-type LogoProps = Omit<AnchorProps, 'href'>;
+type LogoProps = Omit<AnchorProps, 'href'> & {
+  iconOnly?: boolean;
+};
 
 export const Logo: Component<LogoProps> = props => {
   // Create a unique ID so the IDs don't clash when the component is used multiple times
@@ -27,7 +30,7 @@ export const Logo: Component<LogoProps> = props => {
         fill="none"
         xmlns="http://www.w3.org/2000/svg"
       >
-        <title>Blend Logo</title>
+        <title>Blend logo</title>
         <rect width="202" height="72" fill={`url(#${id}-a)`} />
         <g filter={`url(#${id}-b)`}>
           <path
@@ -94,54 +97,69 @@ export const LogoSquare: Component<LogoProps> = props => {
   // Create a unique ID so the IDs don't clash when the component is used multiple times
   const id = createUniqueId();
 
-  const [_local, rest] = splitProps(props, ['class']);
+  const [_local, rest] = splitProps(props, ['class', 'iconOnly']);
   const local = mergeProps({ class: 'size-5' }, _local);
 
+  const wrapperClass = cx('shrink-0 select-none overflow-hidden rounded-md', local.class);
+
+  const icon = () => (
+    <svg class="size-full" fill="none" xmlns="http://www.w3.org/2000/svg" width="72" height="72" viewBox="0 0 72 72">
+      <title>Blend logo</title>
+      <rect width="72" height="72" fill={`url(#${id}-a)`} />
+      <g filter={`url(#${id}-b)`}>
+        <path
+          d="M18.37 36.046c0-1.586.213-3.111.639-4.575a18.537 18.537 0 0 1 1.73-4.21L15 21.588 21.56 15l5.648 5.673a18.378 18.378 0 0 1 4.191-1.738 16.76 16.76 0 0 1 4.555-.64c1.58 0 3.098.213 4.556.64 1.458.366 2.854.976 4.19 1.83L50.35 15 57 21.405l-5.74 5.765c.73 1.22 1.306 2.623 1.731 4.21.425 1.524.638 3.08.638 4.666 0 1.647-.212 3.202-.638 4.666a15.786 15.786 0 0 1-1.73 4.21l5.557 5.581L50.349 57l-5.648-5.582a21.447 21.447 0 0 1-4.191 1.647c-1.458.427-2.976.64-4.556.64a20.15 20.15 0 0 1-4.737-.548 14.326 14.326 0 0 1-4.1-1.739l-5.557 5.49-6.469-6.496 5.649-5.582a18.382 18.382 0 0 1-1.822-4.21 18.869 18.869 0 0 1-.547-4.574Zm9.203 0c0 1.525.364 2.928 1.093 4.209a9.459 9.459 0 0 0 3.098 3.111c1.275.732 2.672 1.098 4.19 1.098 1.58 0 3.007-.366 4.282-1.098 1.337-.793 2.37-1.83 3.098-3.111a7.87 7.87 0 0 0 1.184-4.21c0-1.585-.394-3.019-1.184-4.3-.729-1.28-1.761-2.288-3.098-3.02-1.275-.793-2.702-1.19-4.282-1.19a7.784 7.784 0 0 0-4.19 1.19 8.655 8.655 0 0 0-3.098 3.02c-.729 1.281-1.093 2.715-1.093 4.3Z"
+          fill="#fff"
+          fill-opacity=".5"
+          shape-rendering="crispEdges"
+        />
+      </g>
+      <defs>
+        <linearGradient id={`${id}-a`} x1="0" y1="0" x2="83.169" y2="16.842" gradientUnits="userSpaceOnUse">
+          <stop stop-color="#78716C" />
+          <stop offset="1" stop-color="#57534E" />
+        </linearGradient>
+        <filter
+          id={`${id}-b`}
+          x="9"
+          y="11"
+          width="58"
+          height="58"
+          filterUnits="userSpaceOnUse"
+          color-interpolation-filters="sRGB"
+        >
+          <feFlood flood-opacity="0" result="BackgroundImageFix" />
+          <feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
+          <feOffset dx="2" dy="4" />
+          <feGaussianBlur stdDeviation="4" />
+          <feComposite in2="hardAlpha" operator="out" />
+          <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0" />
+          <feBlend in2="BackgroundImageFix" result="effect1_dropShadow_633_12" />
+          <feBlend in="SourceGraphic" in2="effect1_dropShadow_633_12" result="shape" />
+        </filter>
+      </defs>
+    </svg>
+  );
+
   return (
-    <A
-      {...rest}
-      href="/"
-      class={cx(
-        'shrink-0 select-none overflow-hidden rounded-md focus:outline-none dark:focus:ring-gray-600 focus:ring-4 focus:ring-gray-500 focus:ring-opacity-30',
-        local.class,
-      )}
+    <Show
+      when={!local.iconOnly}
+      fallback={
+        <div class={wrapperClass}>
+          <Dynamic component={icon} />
+        </div>
+      }
     >
-      <svg class="size-full" fill="none" xmlns="http://www.w3.org/2000/svg" width="72" height="72" viewBox="0 0 72 72">
-        <title>Blend Logo</title>
-        <rect width="72" height="72" fill={`url(#${id}-a)`} />
-        <g filter={`url(#${id}-b)`}>
-          <path
-            d="M18.37 36.046c0-1.586.213-3.111.639-4.575a18.537 18.537 0 0 1 1.73-4.21L15 21.588 21.56 15l5.648 5.673a18.378 18.378 0 0 1 4.191-1.738 16.76 16.76 0 0 1 4.555-.64c1.58 0 3.098.213 4.556.64 1.458.366 2.854.976 4.19 1.83L50.35 15 57 21.405l-5.74 5.765c.73 1.22 1.306 2.623 1.731 4.21.425 1.524.638 3.08.638 4.666 0 1.647-.212 3.202-.638 4.666a15.786 15.786 0 0 1-1.73 4.21l5.557 5.581L50.349 57l-5.648-5.582a21.447 21.447 0 0 1-4.191 1.647c-1.458.427-2.976.64-4.556.64a20.15 20.15 0 0 1-4.737-.548 14.326 14.326 0 0 1-4.1-1.739l-5.557 5.49-6.469-6.496 5.649-5.582a18.382 18.382 0 0 1-1.822-4.21 18.869 18.869 0 0 1-.547-4.574Zm9.203 0c0 1.525.364 2.928 1.093 4.209a9.459 9.459 0 0 0 3.098 3.111c1.275.732 2.672 1.098 4.19 1.098 1.58 0 3.007-.366 4.282-1.098 1.337-.793 2.37-1.83 3.098-3.111a7.87 7.87 0 0 0 1.184-4.21c0-1.585-.394-3.019-1.184-4.3-.729-1.28-1.761-2.288-3.098-3.02-1.275-.793-2.702-1.19-4.282-1.19a7.784 7.784 0 0 0-4.19 1.19 8.655 8.655 0 0 0-3.098 3.02c-.729 1.281-1.093 2.715-1.093 4.3Z"
-            fill="#fff"
-            fill-opacity=".5"
-            shape-rendering="crispEdges"
-          />
-        </g>
-        <defs>
-          <linearGradient id={`${id}-a`} x1="0" y1="0" x2="83.169" y2="16.842" gradientUnits="userSpaceOnUse">
-            <stop stop-color="#78716C" />
-            <stop offset="1" stop-color="#57534E" />
-          </linearGradient>
-          <filter
-            id={`${id}-b`}
-            x="9"
-            y="11"
-            width="58"
-            height="58"
-            filterUnits="userSpaceOnUse"
-            color-interpolation-filters="sRGB"
-          >
-            <feFlood flood-opacity="0" result="BackgroundImageFix" />
-            <feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
-            <feOffset dx="2" dy="4" />
-            <feGaussianBlur stdDeviation="4" />
-            <feComposite in2="hardAlpha" operator="out" />
-            <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0" />
-            <feBlend in2="BackgroundImageFix" result="effect1_dropShadow_633_12" />
-            <feBlend in="SourceGraphic" in2="effect1_dropShadow_633_12" result="shape" />
-          </filter>
-        </defs>
-      </svg>
-    </A>
+      <A
+        href="/"
+        {...rest}
+        class={cx(
+          'focus:outline-none dark:focus:ring-gray-600 focus:ring-4 focus:ring-gray-500 focus:ring-opacity-30',
+          wrapperClass,
+        )}
+      >
+        <Dynamic component={icon} />
+      </A>
+    </Show>
   );
 };
diff --git a/ui/src/constants/ui/menu.ts b/ui/src/constants/ui/menu.ts
index 3ec90d68..63b135f6 100644
--- a/ui/src/constants/ui/menu.ts
+++ b/ui/src/constants/ui/menu.ts
@@ -1,13 +1,13 @@
 import { cva } from 'class-variance-authority';
 
 export const trigger = cva([
-  'flex shrink-0 cursor-default appearance-none items-center justify-center border border-gray-200 transition dark:border-gray-700',
-  'bg-white focus:border-gray-400 hover:bg-gray-100 group-hover:opacity-100 focus:outline-none dark:focus:ring-gray-600 focus:ring-1 focus:ring-gray-200',
-  'dark:hover:border-gray-700 hover:border-gray-300 dark:bg-gray-800 dark:hover:bg-gray-600',
+  'flex shrink-0 cursor-default appearance-none items-center justify-center border border-gray-200 text-gray-500 transition dark:border-gray-700 dark:text-gray-400',
+  'bg-white dark:focus:border-gray-600 focus:border-gray-400 hover:bg-gray-100 group-hover:opacity-100 focus:outline-none dark:focus:ring-gray-700 focus:ring-1 focus:ring-gray-200',
+  'dark:hover:border-gray-600 hover:border-gray-300 dark:bg-gray-800 dark:hover:bg-gray-700 dark:hover:text-gray-100',
 ]);
 
 export const item = cva([
-  'flex select-none appearance-none items-center gap-2 rounded px-2 py-1 text-left',
+  'flex select-none appearance-none items-center gap-3 rounded-md px-2 py-1.5 text-left md:gap-2 md:rounded md:px-2 md:py-1',
   'ui-disabled:cursor-not-allowed ui-disabled:opacity-50',
   'active:bg-gray-100 focus:bg-gray-100 hover:bg-gray-100 focus:outline-none',
   'dark:active:bg-gray-800 dark:focus:bg-gray-800 dark:hover:bg-gray-800',
@@ -15,7 +15,7 @@ export const item = cva([
 
 export const content = cva(
   [
-    'z-50 overflow-hidden rounded-md border shadow-sm dark:shadow-md',
+    'z-50 overflow-hidden rounded-lg border shadow-sm md:rounded-md dark:shadow-md focus:outline-none',
     'border-gray-200 bg-white text-gray-600',
     'dark:border-gray-900 dark:bg-gray-950 dark:text-gray-200',
     'animate-content-hide ui-expanded:animate-content-show',
@@ -23,9 +23,9 @@ export const content = cva(
   {
     variants: {
       size: {
-        sm: 'min-w-28',
-        md: 'min-w-36',
-        lg: 'min-w-40',
+        sm: 'min-w-36 md:min-w-28',
+        md: 'min-w-48 md:min-w-36',
+        lg: 'min-w-64 md:min-w-40',
       },
     },
     defaultVariants: {
@@ -34,4 +34,4 @@ export const content = cva(
   },
 );
 
-export const contentInner = cva(['flex flex-col gap-0.5 p-1 text-sm']);
+export const contentInner = cva(['flex flex-col gap-0.5 p-1.5 text-base md:p-1 md:text-sm']);
diff --git a/ui/src/constants/ui/tooltip.ts b/ui/src/constants/ui/tooltip.ts
new file mode 100644
index 00000000..a30ed7ec
--- /dev/null
+++ b/ui/src/constants/ui/tooltip.ts
@@ -0,0 +1,19 @@
+import { cva } from 'class-variance-authority';
+
+export const content = cva(
+  [
+    'z-50 select-none bg-gray-800 text-gray-100 dark:bg-gray-950',
+    'animate-content-hide ui-expanded:animate-content-show',
+  ],
+  {
+    variants: {
+      size: {
+        sm: 'rounded-md px-2 py-1 text-xs',
+        md: 'rounded-lg px-3 py-2 text-xs',
+      },
+    },
+    defaultVariants: {
+      size: 'md',
+    },
+  },
+);
diff --git a/ui/src/routes/404.tsx b/ui/src/routes/404.tsx
index 9e9656f2..d9643ce2 100644
--- a/ui/src/routes/404.tsx
+++ b/ui/src/routes/404.tsx
@@ -1,7 +1,7 @@
 import { HiSolidArrowSmallLeft } from 'solid-icons/hi';
-import { Logo } from '~/components/layout/logo';
 import { Panel } from '~/components/layout/panel';
 import { Link } from '~/components/ui/link';
+import { Logo } from '~/constants/ui/logo';
 
 export default () => (
   <div class="size-full p-4 md:p-8">