use horizontal list for recipe tag filter

apps/gnocchi/web/src/components/addBar/AddPane.tsx

@@ -3,7 +3,7 @@ import { AddToListDialog } from '@/components/recipes/viewer/AddToListDialog.jsx
 import useMergedRef from '@/hooks/useMergedRef.js';
 import { Input } from '@a-type/ui/components/input';
 import { useSize } from '@a-type/ui/hooks';
-import { isUrl } from '@a-type/utils';
+import { isUrl, stopPropagation } from '@a-type/utils';
 import { showSubscriptionPromotion, useCanSync } from '@biscuits/client';
 import { Recipe } from '@gnocchi.biscuits/verdant';
 import classNames from 'classnames';
@@ -30,6 +30,7 @@ import {
   useAddBarSuggestions,
 } from './hooks.js';
 import { AddBarProps } from './AddBar.jsx';
+import { ScrollArea } from '@a-type/ui/components/scrollArea';
 
 const AddPaneImpl = forwardRef<
   HTMLDivElement,
@@ -132,12 +133,12 @@ const AddPaneImpl = forwardRef<
         disableInteraction={disabled}
         {...rest}
       />
-      <div
+      <ScrollArea
         {...menuProps}
         className={classNames(
-          'flex flex-col overflow-x-hidden overflow-y-auto overscroll-contain max-h-[calc(var(--viewport-height,40vh)-80px)] lg:max-h-50vh w-full max-w-none gap-4 p-3',
+          'flex flex-col max-h-[calc(var(--viewport-height,40vh)-80px)] lg:max-h-50vh w-full max-w-none gap-4 p-3',
         )}
-        onScroll={console.log}
+        onScroll={stopPropagation}
       >
         {showSuggested && (
           <SuggestionGroup
@@ -164,7 +165,7 @@ const AddPaneImpl = forwardRef<
           />
         )}
         {noSuggestions && <div>No suggestions</div>}
-      </div>
+      </ScrollArea>
       {addingRecipe && (
         <AddToListDialog
           recipe={addingRecipe}

apps/gnocchi/web/src/components/recipes/collection/RecipeList.tsx

@@ -24,6 +24,7 @@ import {
 import { RecipeTagsList } from './RecipeTagsList.jsx';
 import classNames from 'classnames';
 import { RecipePresenceNotification } from '@/components/sync/collaborationMenu/RecipePresenceNotification.jsx';
+import { RecipeTagsFilter } from './RecipeTagsFilter.jsx';
 
 export interface RecipeListProps {}
 
@@ -104,11 +105,10 @@ function TagFilterList() {
     tagFilter ? setTagFilter(null) : setTagFilter(value);
 
   return (
-    <RecipeTagsList
+    <RecipeTagsFilter
       onSelect={toggleTagFilter}
       selectedValues={tagFilter ? [tagFilter] : []}
-      onlySelected
-      className="mb-4 font-normal text-xs"
+      className="mb-1 font-normal text-xs"
       buttonClassName="py-1 px-2 text-xs"
     />
   );

apps/gnocchi/web/src/components/recipes/collection/RecipeTagsFilter.tsx

@@ -0,0 +1,69 @@
+import { Icon } from '@/components/icons/Icon.jsx';
+import { RecipeTagMenuWrapper } from '@/components/recipes/tags/RecipeTagMenuWrapper.jsx';
+import { hooks } from '@/stores/groceries/index.js';
+import { Button, ButtonProps } from '@a-type/ui/components/button';
+import { HorizontalList } from '@a-type/ui/components/horizontalList';
+import classNames from 'classnames';
+import { forwardRef } from 'react';
+
+export function RecipeTagsFilter({
+  onSelect,
+  selectedValues = [],
+  className,
+  buttonClassName,
+}: {
+  onSelect: (name: string | null) => void;
+  selectedValues?: string[] | null;
+  className?: string;
+  buttonClassName?: string;
+}) {
+  const allTags = hooks.useAllRecipeTagMetadata();
+  const filteredByOmit = allTags.filter((tag) => {
+    if (selectedValues?.length) {
+      return selectedValues.includes(tag.get('name'));
+    }
+    return true;
+  });
+
+  if (allTags.length === 0) {
+    return null;
+  }
+
+  return (
+    <HorizontalList className={className}>
+      {filteredByOmit.map((tag) => (
+        <RecipeTagMenuWrapper tagName={tag.get('name')} key={tag.get('name')}>
+          <TagButtonBase
+            toggled={!!selectedValues?.includes(tag.get('name'))}
+            onClick={() => onSelect(tag.get('name'))}
+            className={classNames(
+              'my-auto',
+              tag.get('color') && `theme-${tag.get('color')}`,
+              buttonClassName,
+            )}
+          >
+            <span>{tag.get('icon') ?? <Icon name="tag" />}</span>
+            <span>{tag.get('name')}</span>
+          </TagButtonBase>
+        </RecipeTagMenuWrapper>
+      ))}
+    </HorizontalList>
+  );
+}
+
+const TagButtonBase = forwardRef<HTMLButtonElement, ButtonProps>(
+  function TagButtonBase({ className, ...props }, ref) {
+    return (
+      <Button
+        ref={ref}
+        size="small"
+        color="primary"
+        {...props}
+        className={classNames(
+          'flex items-center gap-1 [font-weight:inherit] [font-size:inherit]',
+          className,
+        )}
+      />
+    );
+  },
+);