[ww] simplify ui

apps/wish-wash/web/src/components/items/ListItem.tsx

@@ -28,7 +28,7 @@ import {
   SubmitButton,
   TextField,
 } from '@a-type/ui/components/forms';
-import { AmazonSearchButton } from './AmazonSearchButton.jsx';
+import { SearchButton } from './SearchButton.jsx';
 
 export interface ListItemProps {
   item: Item;
@@ -69,7 +69,7 @@ export function ListItem({ item }: ListItemProps) {
               </Button>
             ) : (
               <>
-                <AmazonSearchButton item={item} />
+                <SearchButton item={item} />
                 <Button onClick={() => setAddLinkOpen(true)}>
                   <Icon name="plus" /> Link
                 </Button>
@@ -116,23 +116,3 @@ export function ListItem({ item }: ListItemProps) {
     </>
   );
 }
-
-function CardLink({
-  to,
-  ...props
-}: {
-  to: string | null;
-  children: ReactNode;
-}) {
-  return <Link {...props} to={to || '#'} newTab />;
-}
-
-function CardNotLink({
-  to: _,
-  ...props
-}: {
-  to: string | null;
-  children: ReactNode;
-}) {
-  return <div {...props} />;
-}

apps/wish-wash/web/src/components/items/SearchButton.tsx

@@ -0,0 +1,80 @@
+import { Button } from '@a-type/ui/components/button';
+import { Icon } from '@a-type/ui/components/icon';
+import { useLocalStorage } from '@biscuits/client';
+import { Link } from '@verdant-web/react-router';
+import { Item } from '@wish-wash.biscuits/verdant';
+import {
+  Select,
+  SelectItem,
+  SelectTrigger,
+  SelectContent,
+  SelectValue,
+  SelectIcon,
+} from '@a-type/ui/components/select';
+
+export interface SearchButtonProps {
+  item: Item;
+}
+
+interface SearchConfig {
+  name: string;
+  template: string;
+}
+const searchConfigs: Record<string, SearchConfig> = {
+  amazon: {
+    name: 'Amazon',
+    template: 'https://www.amazon.com/s?k=$1',
+  },
+  ebay: {
+    name: 'Ebay',
+    template: 'https://www.ebay.com/sch/i.html?_nkw=$1',
+  },
+  google: {
+    name: 'Google',
+    template: 'https://www.google.com/search?q=$1',
+  },
+  walmart: {
+    name: 'Walmart',
+    template: 'https://www.walmart.com/search/?query=$1',
+  },
+  target: {
+    name: 'Target',
+    template: 'https://www.target.com/s?searchTerm=$1',
+  },
+};
+
+export function SearchButton({ item }: SearchButtonProps) {
+  const [selectedProvider, setSelectedProvider] = useLocalStorage(
+    'search-provider',
+    'amazon',
+  );
+
+  return (
+    <div className="flex flex-row">
+      <Button asChild className="rounded-r-none relative z-1">
+        <Link
+          to={searchConfigs[selectedProvider].template.replace(
+            '$1',
+            item.get('description'),
+          )}
+        >
+          <Icon name="search" />
+          {searchConfigs[selectedProvider].name}
+        </Link>
+      </Button>
+      <Select value={selectedProvider} onValueChange={setSelectedProvider}>
+        <SelectTrigger className="rounded-l-none border-l-none !gap-0">
+          <SelectValue>{null}</SelectValue>
+          <SelectIcon />
+        </SelectTrigger>
+        <SelectContent>
+          {Object.entries(searchConfigs).map(([key, { name }]) => (
+            <SelectItem key={key} value={key}>
+              {name}
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
+    </div>
+  );
+}

apps/wish-wash/web/src/components/lists/ListDetailsDialog.tsx

@@ -7,6 +7,10 @@ import {
   DialogActions,
   DialogClose,
 } from '@a-type/ui/components/dialog';
+import {
+  DropdownMenuItem,
+  DropdownMenuItemRightSlot,
+} from '@a-type/ui/components/dropdownMenu';
 import {
   FormikForm,
   TextField,
@@ -15,6 +19,7 @@ import {
 import { Icon } from '@a-type/ui/components/icon';
 import { useNavigate, useSearchParams } from '@verdant-web/react-router';
 import { toast } from '@a-type/ui';
+import { UserMenuItem } from '@biscuits/client';
 
 export interface ListDetailsDialogProps {}
 
@@ -86,13 +91,13 @@ export function ListDetailsDialog({}: ListDetailsDialogProps) {
   );
 }
 
-export interface ListDetailsEditButtonProps extends ButtonProps {
+export interface ListDetailsEditButtonProps {
   listId: string;
+  className?: string;
 }
 
 export function ListDetailsEditButton({
   listId,
-  children,
   ...rest
 }: ListDetailsEditButtonProps) {
   const [_, setParams] = useSearchParams();
@@ -104,8 +109,11 @@ export function ListDetailsEditButton({
   };
 
   return (
-    <Button onClick={onClick} size="icon" color="ghost" {...rest}>
-      {children || <Icon name="gear" />}
-    </Button>
+    <UserMenuItem onClick={onClick} {...rest}>
+      Edit list{' '}
+      <DropdownMenuItemRightSlot>
+        <Icon name="pencil" />
+      </DropdownMenuItemRightSlot>
+    </UserMenuItem>
   );
 }

apps/wish-wash/web/src/components/lists/ListPicker.tsx

@@ -1,14 +1,13 @@
 import { hooks } from '@/store.js';
-import { Icon } from '@a-type/ui/components/icon';
-import { HorizontalList } from '@a-type/ui/components/horizontalList';
-import { assert } from '@a-type/utils';
-import { useCanSync, useLocalStorage } from '@biscuits/client';
-import { authorization, List } from '@wish-wash.biscuits/verdant';
+import { clsx } from '@a-type/ui';
 import { Button } from '@a-type/ui/components/button';
+import { HorizontalList } from '@a-type/ui/components/horizontalList';
+import { Icon } from '@a-type/ui/components/icon';
+import { useLocalStorage } from '@biscuits/client';
 import { Link } from '@verdant-web/react-router';
+import { List } from '@wish-wash.biscuits/verdant';
+import { useEffect, useRef } from 'react';
 import { CreateListButton } from './CreateListButton.jsx';
-import { useEffect, useRef, useState } from 'react';
-import { clsx } from '@a-type/ui';
 
 export interface ListPickerProps {
   className?: string;
@@ -18,7 +17,7 @@ export interface ListPickerProps {
 export function ListPicker({ className, value, ...props }: ListPickerProps) {
   const [open, setOpen] = useLocalStorage('list-picker-open', false);
   return (
-    <div {...props} className={clsx('relative w-full mb-4', className)}>
+    <div {...props} className={clsx('relative w-full', className)}>
       <HorizontalList
         className="w-full min-w-0 rounded-lg"
         open={open}

apps/wish-wash/web/src/pages/ListPage.tsx

@@ -57,12 +57,17 @@ function ListPageContent({ list }: { list: List }) {
   return (
     <ListProvider value={ctx}>
       <PageContent fullHeight noPadding>
-        <PageFixedArea className="flex-col p-0 gap-2 mb-2">
-          <div className="row p-2">
-            <ListDetailsEditButton listId={list.get('id')} />
-            <UserMenu className="ml-auto" />
-          </div>
+        <PageFixedArea className="flex-row p-0 gap-0">
           <ListPicker value={list.get('id')} />
+          <UserMenu
+            className="ml-auto my-auto"
+            extraItems={
+              <ListDetailsEditButton
+                listId={list.get('id')}
+                key="list-details-edit"
+              />
+            }
+          />
         </PageFixedArea>
         <ListView listId={list.get('id')} className="m-2" />
       </PageContent>

packages/client/src/components/UserMenu.tsx

@@ -4,6 +4,7 @@ import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
+  DropdownMenuItemProps,
   DropdownMenuItemRightSlot,
   DropdownMenuTrigger,
 } from '@a-type/ui/components/dropdownMenu';
@@ -27,7 +28,7 @@ export interface UserMenuProps {
   className?: string;
   disableAppSettings?: boolean;
   children?: ReactNode;
-  extraItems?: ReactNode[];
+  extraItems?: ReactNode;
 }
 
 export function UserMenu({
@@ -156,16 +157,16 @@ export function UserMenu({
             </LogoutButton>
           </DropdownMenuItem>
         )}
-        {extraItems?.map((item, i) => (
-          <DropdownMenuItem key={i} asChild>
-            {item}
-          </DropdownMenuItem>
-        ))}
+        {extraItems}
       </DropdownMenuContent>
     </DropdownMenu>
   );
 }
 
+export function UserMenuItem(props: DropdownMenuItemProps) {
+  return <DropdownMenuItem {...props} />;
+}
+
 const userAvatarQuery = graphql(`
   query UserAvatarQuery {
     me {