icon tweaks

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

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>

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

@@ -1,16 +1,19 @@
 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 = {
   uuid: string;
 };
 
 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}

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">

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}

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>
   );

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} />
+    </>
+  );
+};

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>
+  );
+};

ui/src/components/menus/menu.tsx

@@ -7,14 +7,15 @@ 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';
 
 export type MenuProps = Omit<DropdownMenuRootProps, 'open' | 'onOpenChange'> &
   MenuContentProps & {
     open: boolean;
     setOpen: Setter<boolean>;
+    trigger?: () => JSX.Element;
     triggerIcon?: IconTypes;
     triggerClass?: string;
     triggerIconClass?: string;
@@ -26,16 +27,24 @@ const MenuRoot: ParentComponent<MenuProps> = props => {
     'children',
     'open',
     'setOpen',
+    'trigger',
     'triggerIcon',
     'triggerClass',
     'triggerIconClass',
   ]);
 
   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,
 });