From a924ece13afbb7b672f74c55499a7244b42a8cbd Mon Sep 17 00:00:00 2001
From: Grant Forrest <gaforres@gmail.com>
Date: Sun, 25 Aug 2024 15:00:14 -0400
Subject: [PATCH] [ww] convert list privacy, improve cards, qol

---
 .../web/src/components/addBar/AddPane.tsx     | 326 +++++------
 .../web/src/pages/groceries/GroceriesPage.tsx | 128 ++---
 .../src/components/items/ItemEditDialog.tsx   | 528 +++++++++---------
 .../web/src/components/items/ListItem.tsx     | 217 ++++---
 .../src/components/lists/CreateListButton.tsx | 157 +++---
 .../components/lists/ListDetailsDialog.tsx    | 200 ++++---
 .../web/src/components/lists/ListHero.tsx     |  24 +-
 .../web/src/components/lists/ListView.tsx     | 162 +++++-
 .../web/src/components/lists/ListsList.tsx    | 184 +++---
 apps/wish-wash/web/src/pages/HomePage.tsx     | 105 ++--
 biscuits.code-workspace                       | 150 ++---
 packages/db/src/index.ts                      |  41 +-
 packages/error/src/index.ts                   | 124 ++--
 server/src/graphql/builder.ts                 | 386 ++++++-------
 server/src/graphql/types/wishWash/hub.ts      | 220 ++++----
 server/src/routers/gnocchi.ts                 | 118 ++--
 server/src/routers/graphql.ts                 | 207 +++----
 server/src/routers/wishWash.ts                | 167 +++---
 server/src/server.ts                          | 103 ++--
 server/src/tasks/writeSchema.ts               |  10 +-
 web/src/pages/LoginPage.tsx                   | 309 +++++-----
 web/src/pages/SettingsPage.tsx                | 277 +++++----
 22 files changed, 2186 insertions(+), 1957 deletions(-)

diff --git a/apps/gnocchi/web/src/components/addBar/AddPane.tsx b/apps/gnocchi/web/src/components/addBar/AddPane.tsx
index 5d8e3ce8..b71ad4c9 100644
--- a/apps/gnocchi/web/src/components/addBar/AddPane.tsx
+++ b/apps/gnocchi/web/src/components/addBar/AddPane.tsx
@@ -3,191 +3,203 @@ 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, stopPropagation } from '@a-type/utils';
+import { isUrl, preventDefault, stopPropagation } from '@a-type/utils';
 import {
-  showSubscriptionPromotion,
-  useHasServerAccess,
+	showSubscriptionPromotion,
+	useHasServerAccess,
 } from '@biscuits/client';
 import { Recipe } from '@gnocchi.biscuits/verdant';
 import classNames from 'classnames';
 import {
-  UseComboboxState,
-  UseComboboxStateChangeOptions,
-  useCombobox,
+	UseComboboxState,
+	UseComboboxStateChangeOptions,
+	useCombobox,
 } from 'downshift';
 import {
-  Suspense,
-  forwardRef,
-  useCallback,
-  useEffect,
-  useRef,
-  useState,
-  useTransition,
+	Suspense,
+	forwardRef,
+	useCallback,
+	useEffect,
+	useRef,
+	useState,
+	useTransition,
 } from 'react';
 import { AddInput } from './AddInput.jsx';
 import { SuggestionGroup } from './SuggestionGroup.jsx';
 import {
-  SuggestionData,
-  suggestionToString,
-  useAddBarCombobox,
-  useAddBarSuggestions,
+	SuggestionData,
+	suggestionToString,
+	useAddBarCombobox,
+	useAddBarSuggestions,
 } from './hooks.js';
 import { AddBarProps } from './AddBar.jsx';
 import { ScrollArea } from '@a-type/ui/components/scrollArea';
 
 const AddPaneImpl = forwardRef<
-  HTMLDivElement,
-  AddBarProps & { disabled?: boolean }
+	HTMLDivElement,
+	AddBarProps & { disabled?: boolean }
 >(function AddPaneImpl(
-  {
-    onAdd,
-    showRichSuggestions = false,
-    open,
-    onOpenChange,
-    className,
-    disabled,
-    ...rest
-  },
-  ref,
+	{
+		onAdd,
+		showRichSuggestions = false,
+		open,
+		onOpenChange,
+		className,
+		disabled,
+		...rest
+	},
+	ref,
 ) {
-  const [suggestionPrompt, setSuggestionPrompt] = useState('');
+	const [suggestionPrompt, setSuggestionPrompt] = useState('');
 
-  const {
-    allSuggestions,
-    placeholder,
-    expiresSoonSuggestions,
-    showExpiring,
-    showSuggested,
-    mainSuggestions,
-    matchSuggestions,
-  } = useAddBarSuggestions({
-    showRichSuggestions,
-    suggestionPrompt,
-  });
+	const {
+		allSuggestions,
+		placeholder,
+		expiresSoonSuggestions,
+		showExpiring,
+		showSuggested,
+		mainSuggestions,
+		matchSuggestions,
+	} = useAddBarSuggestions({
+		showRichSuggestions,
+		suggestionPrompt,
+	});
 
-  const contentRef = useRef<HTMLDivElement>(null);
-  const innerRef = useSize(({ width }) => {
-    if (contentRef.current) {
-      contentRef.current.style.width = width + 'px';
-    }
-  });
+	const contentRef = useRef<HTMLDivElement>(null);
+	const innerRef = useSize(({ width }) => {
+		if (contentRef.current) {
+			contentRef.current.style.width = width + 'px';
+		}
+	});
 
-  const inputRef = useRef<HTMLInputElement>(null);
-  const {
-    combobox: {
-      isOpen,
-      getMenuProps,
-      getInputProps,
-      highlightedIndex,
-      getItemProps,
-      inputValue,
-      setInputValue,
-      selectItem,
-      openMenu,
-    },
-    addingRecipe,
-    clearAddingRecipe,
-    onInputPaste,
-  } = useAddBarCombobox({
-    setSuggestionPrompt,
-    allSuggestions,
-    onAdd: (items) => {
-      onAdd(items);
-      inputRef.current?.blur();
-    },
-    onOpenChange,
-    open,
-  });
+	const inputRef = useRef<HTMLInputElement>(null);
+	const {
+		combobox: {
+			isOpen,
+			getMenuProps,
+			getInputProps,
+			highlightedIndex,
+			getItemProps,
+			inputValue,
+			setInputValue,
+			selectItem,
+			openMenu,
+		},
+		addingRecipe,
+		clearAddingRecipe,
+		onInputPaste,
+	} = useAddBarCombobox({
+		setSuggestionPrompt,
+		allSuggestions,
+		onAdd: (items) => {
+			onAdd(items);
+			inputRef.current?.blur();
+		},
+		onOpenChange,
+		open,
+	});
 
-  const mergedRef = useMergedRef(ref, innerRef);
+	const mergedRef = useMergedRef(ref, innerRef);
 
-  useEffect(() => {
-    if (disabled) {
-      inputRef.current?.blur();
-    } else {
-      inputRef.current?.focus();
-    }
-  }, [disabled]);
+	useEffect(() => {
+		if (disabled) {
+			inputRef.current?.blur();
+		} else {
+			inputRef.current?.focus();
+		}
+	}, [disabled]);
 
-  const noSuggestions = allSuggestions.length === 0;
+	useEffect(() => {
+		if (open) {
+			visualViewport?.addEventListener('scroll', preventDefault, true);
+			const original = document.body.style.overflow;
+			document.body.style.overflow = 'hidden';
+			return () => {
+				visualViewport?.removeEventListener('scroll', preventDefault);
+				document.body.style.overflow = original;
+			};
+		}
+	}, [open]);
 
-  const menuProps = getMenuProps({
-    ref: contentRef,
-  });
+	const noSuggestions = allSuggestions.length === 0;
 
-  return (
-    <div
-      className={classNames(
-        'flex flex-col-reverse rounded-lg bg-white shadow-xl border-default rounded-b-21px border-b-none gap-1',
-        className,
-      )}
-    >
-      <AddInput
-        inputProps={getInputProps({
-          onPaste: onInputPaste,
-          onPointerDown: openMenu,
-          placeholder,
-          ref: inputRef,
-        })}
-        isOpen={isOpen}
-        selectItem={selectItem}
-        clear={() => setInputValue('')}
-        ref={mergedRef}
-        disableInteraction={disabled}
-        {...rest}
-      />
-      <ScrollArea
-        {...menuProps}
-        className={classNames(
-          '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={stopPropagation}
-        background="white"
-      >
-        {showSuggested && (
-          <SuggestionGroup
-            title="Suggested"
-            suggestions={mainSuggestions}
-            highlightedIndex={highlightedIndex}
-            getItemProps={getItemProps}
-          />
-        )}
-        {showExpiring && (
-          <SuggestionGroup
-            title="Expiring Soon"
-            suggestions={expiresSoonSuggestions}
-            getItemProps={getItemProps}
-            highlightedIndex={highlightedIndex}
-          />
-        )}
-        {!noSuggestions && (
-          <SuggestionGroup
-            title={inputValue ? 'Matches' : 'Favorites'}
-            suggestions={matchSuggestions}
-            highlightedIndex={highlightedIndex}
-            getItemProps={getItemProps}
-          />
-        )}
-        {noSuggestions && <div>No suggestions</div>}
-      </ScrollArea>
-      {addingRecipe && (
-        <AddToListDialog
-          recipe={addingRecipe}
-          onOpenChange={clearAddingRecipe}
-          open
-        />
-      )}
-    </div>
-  );
+	const menuProps = getMenuProps({
+		ref: contentRef,
+	});
+
+	return (
+		<div
+			className={classNames(
+				'flex flex-col-reverse rounded-lg bg-white shadow-xl border-default rounded-b-21px border-b-none gap-1',
+				className,
+			)}
+		>
+			<AddInput
+				inputProps={getInputProps({
+					onPaste: onInputPaste,
+					onPointerDown: openMenu,
+					placeholder,
+					ref: inputRef,
+				})}
+				isOpen={isOpen}
+				selectItem={selectItem}
+				clear={() => setInputValue('')}
+				ref={mergedRef}
+				disableInteraction={disabled}
+				{...rest}
+			/>
+			<ScrollArea
+				{...menuProps}
+				className={classNames(
+					'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={stopPropagation}
+				background="white"
+			>
+				{showSuggested && (
+					<SuggestionGroup
+						title="Suggested"
+						suggestions={mainSuggestions}
+						highlightedIndex={highlightedIndex}
+						getItemProps={getItemProps}
+					/>
+				)}
+				{showExpiring && (
+					<SuggestionGroup
+						title="Expiring Soon"
+						suggestions={expiresSoonSuggestions}
+						getItemProps={getItemProps}
+						highlightedIndex={highlightedIndex}
+					/>
+				)}
+				{!noSuggestions && (
+					<SuggestionGroup
+						title={inputValue ? 'Matches' : 'Favorites'}
+						suggestions={matchSuggestions}
+						highlightedIndex={highlightedIndex}
+						getItemProps={getItemProps}
+					/>
+				)}
+				{noSuggestions && <div>No suggestions</div>}
+			</ScrollArea>
+			{addingRecipe && (
+				<AddToListDialog
+					recipe={addingRecipe}
+					onOpenChange={clearAddingRecipe}
+					open
+				/>
+			)}
+		</div>
+	);
 });
 
 export const AddPane = forwardRef<
-  HTMLDivElement,
-  AddBarProps & { disabled?: boolean }
+	HTMLDivElement,
+	AddBarProps & { disabled?: boolean }
 >(function AddBar(props, ref) {
-  return (
-    <Suspense>
-      <AddPaneImpl {...props} ref={ref} />
-    </Suspense>
-  );
+	return (
+		<Suspense>
+			<AddPaneImpl {...props} ref={ref} />
+		</Suspense>
+	);
 });
diff --git a/apps/gnocchi/web/src/pages/groceries/GroceriesPage.tsx b/apps/gnocchi/web/src/pages/groceries/GroceriesPage.tsx
index 2fc5b940..6ba5aefa 100644
--- a/apps/gnocchi/web/src/pages/groceries/GroceriesPage.tsx
+++ b/apps/gnocchi/web/src/pages/groceries/GroceriesPage.tsx
@@ -10,81 +10,81 @@ import { ListContext } from '@/contexts/ListContext.jsx';
 import { usePageTitle } from '@/hooks/usePageTitle.jsx';
 import { firstTimeOnboarding } from '@/onboarding/firstTimeOnboarding.js';
 import {
-  MainActions,
-  List,
-  ListSelectWrapper,
-  ThemedPageContent,
-  TopControls,
-  UnknownListRedirect,
+	MainActions,
+	List,
+	ListSelectWrapper,
+	ThemedPageContent,
+	TopControls,
+	UnknownListRedirect,
 } from '@/pages/groceries/layout.jsx';
 import { PageNowPlaying } from '@a-type/ui/components/layouts';
 import {
-  ChangelogDisplay,
-  InstallButton,
-  SubscribedOnly,
-  SubscriptionExpiredDialog,
-  UserMenu,
-  PresencePeople,
+	ChangelogDisplay,
+	InstallButton,
+	SubscribedOnly,
+	SubscriptionExpiredDialog,
+	UserMenu,
+	PresencePeople,
 } from '@biscuits/client';
 import { useNavigate, useParams } from '@verdant-web/react-router';
 import { Suspense, useCallback, useEffect } from 'react';
 
 export function GroceriesPage() {
-  const navigate = useNavigate();
+	const navigate = useNavigate();
 
-  usePageTitle('Groceries');
+	usePageTitle('Groceries');
 
-  const onListChange = useCallback(
-    (listId: string | null | undefined) => {
-      if (listId === undefined) {
-        navigate('/');
-      } else if (listId === null) {
-        navigate('/list/null');
-      } else {
-        navigate(`/list/${listId}`);
-      }
-    },
-    [navigate],
-  );
-  const { listId: listIdParam } = useParams();
-  const listId = listIdParam === 'null' ? null : listIdParam;
+	const onListChange = useCallback(
+		(listId: string | null | undefined) => {
+			if (listId === undefined) {
+				navigate('/');
+			} else if (listId === null) {
+				navigate('/list/null');
+			} else {
+				navigate(`/list/${listId}`);
+			}
+		},
+		[navigate],
+	);
+	const { listId: listIdParam } = useParams();
+	const listId = listIdParam === 'null' ? null : listIdParam;
 
-  const start = firstTimeOnboarding.useBegin();
-  useEffect(() => {
-    start();
-  }, [start]);
+	const start = firstTimeOnboarding.useBegin();
+	useEffect(() => {
+		start();
+	}, [start]);
 
-  return (
-    <ListContext.Provider value={listId}>
-      <RecipeSavePrompt />
-      <ThemedPageContent
-        listId={listId}
-        className="rounded-b-lg border-b border-b-solid border-b-[#00000070] bg-wash sm:border-none sm:rounded-0"
-      >
-        <TopControls>
-          <ListSelectWrapper>
-            <ListSelect includeAll value={listId} onChange={onListChange} />
-            {listId && <ListEdit listId={listId} />}
-          </ListSelectWrapper>
+	return (
+		<ListContext.Provider value={listId}>
+			<RecipeSavePrompt />
+			<ThemedPageContent
+				listId={listId}
+				className="rounded-b-lg border-b border-b-solid border-b-[#00000070] bg-wash sm:border-none sm:rounded-0"
+			>
+				<TopControls>
+					<ListSelectWrapper>
+						<ListSelect includeAll value={listId} onChange={onListChange} />
+						{listId && <ListEdit listId={listId} />}
+					</ListSelectWrapper>
 
-          <div className="flex flex-row gap-2 items-center">
-            <Suspense>
-              <ChangelogDisplay className="sm:hidden" hideOnSeen />
-            </Suspense>
-            <InstallButton />
-            <Suspense>
-              <UserMenu />
-            </Suspense>
-          </div>
-        </TopControls>
-        <MainActions />
-        <List />
-        <UnknownListRedirect listId={listId} />
-        <AutoRestoreScroll />
-        <PageNowPlaying unstyled className="items-center pointer-events-none">
-          <FloatingAdd />
-        </PageNowPlaying>
-      </ThemedPageContent>
-    </ListContext.Provider>
-  );
+					<div className="flex flex-row gap-2 items-center">
+						<Suspense>
+							<ChangelogDisplay className="sm:hidden" hideOnSeen />
+						</Suspense>
+						<InstallButton />
+						<Suspense>
+							<UserMenu />
+						</Suspense>
+					</div>
+				</TopControls>
+				<MainActions />
+				<List />
+				<UnknownListRedirect listId={listId} />
+				<AutoRestoreScroll />
+				<PageNowPlaying unstyled className="items-center pointer-events-none">
+					<FloatingAdd />
+				</PageNowPlaying>
+			</ThemedPageContent>
+		</ListContext.Provider>
+	);
 }
diff --git a/apps/wish-wash/web/src/components/items/ItemEditDialog.tsx b/apps/wish-wash/web/src/components/items/ItemEditDialog.tsx
index cf5d88c7..be35058b 100644
--- a/apps/wish-wash/web/src/components/items/ItemEditDialog.tsx
+++ b/apps/wish-wash/web/src/components/items/ItemEditDialog.tsx
@@ -2,11 +2,11 @@ import { hooks } from '@/hooks.js';
 import { clsx } from '@a-type/ui';
 import { Button } from '@a-type/ui/components/button';
 import {
-  Dialog,
-  DialogActions,
-  DialogClose,
-  DialogContent,
-  DialogTitle,
+	Dialog,
+	DialogActions,
+	DialogClose,
+	DialogContent,
+	DialogTitle,
 } from '@a-type/ui/components/dialog';
 import { Icon } from '@a-type/ui/components/icon';
 import { ImageUploader } from '@a-type/ui/components/imageUploader';
@@ -19,322 +19,336 @@ import { preventDefault } from '@a-type/utils';
 import { graphql, useHasServerAccess, useLazyQuery } from '@biscuits/client';
 import { useSearchParams } from '@verdant-web/react-router';
 import {
-  Item,
-  List,
-  ListItemsItemImageFilesDestructured,
+	Item,
+	List,
+	ListItemsItemImageFilesDestructured,
 } from '@wish-wash.biscuits/verdant';
 import { ReactNode, useCallback } from 'react';
 
 export interface ItemEditDialogProps {
-  list: List;
+	list: List;
 }
 
 export function ItemEditDialog({ list }: ItemEditDialogProps) {
-  const [search, setSearch] = useSearchParams();
+	const [search, setSearch] = useSearchParams();
 
-  const itemId = search.get('itemId');
-  const { items } = hooks.useWatch(list);
-  hooks.useWatch(items);
+	const itemId = search.get('itemId');
+	const { items } = hooks.useWatch(list);
+	hooks.useWatch(items);
 
-  const item = items.find((i) => i.get('id') === itemId);
+	const item = items.find((i) => i.get('id') === itemId);
 
-  return (
-    <Dialog
-      open={!!item}
-      onOpenChange={(o) => {
-        if (!o) {
-          setSearch((p) => {
-            p.delete('itemId');
-            return p;
-          });
-        }
-      }}
-    >
-      <DialogContent onOpenAutoFocus={preventDefault}>
-        <DialogTitle>Edit item</DialogTitle>
-        <span className="text-xxs italic text-gray-5 pb-2">
-          All fields save automatically
-        </span>
-        {item && <ItemEditor item={item} />}
-        <DialogActions>
-          <DialogClose asChild>
-            <Button color="primary">Done</Button>
-          </DialogClose>
-        </DialogActions>
-      </DialogContent>
-    </Dialog>
-  );
+	return (
+		<Dialog
+			open={!!item}
+			onOpenChange={(o) => {
+				if (!o) {
+					setSearch((p) => {
+						p.delete('itemId');
+						return p;
+					});
+				}
+			}}
+		>
+			<DialogContent onOpenAutoFocus={preventDefault}>
+				<DialogTitle>Edit item</DialogTitle>
+				<span className="text-xxs italic text-gray-5 pb-2">
+					All fields save automatically
+				</span>
+				{item && <ItemEditor item={item} />}
+				<DialogActions>
+					<DialogClose asChild>
+						<Button color="primary">Done</Button>
+					</DialogClose>
+				</DialogActions>
+			</DialogContent>
+		</Dialog>
+	);
 }
 
 function ItemEditor({ item }: { item: Item }) {
-  const { type } = hooks.useWatch(item);
-  let content: ReactNode = null;
-  switch (type) {
-    case 'idea':
-      content = <IdeaEditor item={item} />;
-      break;
-    case 'product':
-      content = <ProductEditor item={item} />;
-      break;
-    case 'vibe':
-      content = <VibeEditor item={item} />;
-      break;
-  }
+	const { type } = hooks.useWatch(item);
+	let content: ReactNode = null;
+	switch (type) {
+		case 'idea':
+			content = <IdeaEditor item={item} />;
+			break;
+		case 'product':
+			content = <ProductEditor item={item} />;
+			break;
+		case 'vibe':
+			content = <VibeEditor item={item} />;
+			break;
+	}
 
-  return <div className="col w-full items-stretch">{content}</div>;
+	return <div className="col w-full items-stretch">{content}</div>;
 }
 
 function IdeaEditor({ item }: { item: Item }) {
-  return (
-    <>
-      <ImagesField item={item} />
-      <DescriptionField item={item} />
-      <PriceRangeField item={item} />
-      <CountField item={item} />
-    </>
-  );
+	return (
+		<>
+			<ImagesField item={item} />
+			<DescriptionField
+				item={item}
+				placeholder="What kind of thing do you want?"
+				autoFocus
+			/>
+			<PriceRangeField item={item} />
+			<CountField item={item} />
+		</>
+	);
 }
 
 function ProductEditor({ item }: { item: Item }) {
-  return (
-    <>
-      <RemoteImage item={item} />
-      <SingleLinkField item={item} />
-      <DescriptionField item={item} label="What is it?" />
-      <PriceField item={item} />
-      <CountField item={item} />
-    </>
-  );
+	return (
+		<>
+			<RemoteImage item={item} />
+			<SingleLinkField item={item} autoFocus />
+			<DescriptionField item={item} label="What is it?" />
+			<PriceField item={item} />
+			<CountField item={item} />
+		</>
+	);
 }
 
 function VibeEditor({ item }: { item: Item }) {
-  return (
-    <>
-      <ImagesField item={item} />
-      <DescriptionField item={item} label="What's the vibe?" />
-    </>
-  );
+	return (
+		<>
+			<ImagesField item={item} />
+			<DescriptionField item={item} label="What's the vibe?" autoFocus />
+		</>
+	);
 }
 
 function ImagesField({ item }: { item: Item }) {
-  const { imageFiles } = hooks.useWatch(item);
-  hooks.useWatch(imageFiles);
+	const { imageFiles } = hooks.useWatch(item);
+	hooks.useWatch(imageFiles);
 
-  return (
-    <div>
-      <ScrollArea background="white" className="max-h-400px w-full">
-        <div className="grid sm:grid-cols-3 gap-1">
-          {imageFiles.map((file, index) => (
-            <ImageField
-              key={file.id}
-              file={file}
-              onRemove={() => {
-                imageFiles.removeAll(file);
-              }}
-            />
-          ))}
-        </div>
-      </ScrollArea>
-      <Label>Add images</Label>
-      <ImageUploader
-        value={null}
-        onChange={(v) => {
-          if (v) {
-            imageFiles.push(v);
-          }
-        }}
-        className="w-full h-200px rounded-lg"
-      />
-    </div>
-  );
+	return (
+		<div>
+			<ScrollArea background="white" className="max-h-400px w-full">
+				<div className="grid sm:grid-cols-3 gap-1">
+					{imageFiles.map((file, index) => (
+						<ImageField
+							key={file.id}
+							file={file}
+							onRemove={() => {
+								imageFiles.removeAll(file);
+							}}
+						/>
+					))}
+				</div>
+			</ScrollArea>
+			<Label>Add images</Label>
+			<ImageUploader
+				value={null}
+				onChange={(v) => {
+					if (v) {
+						imageFiles.push(v);
+					}
+				}}
+				className="w-full h-200px rounded-lg"
+			/>
+		</div>
+	);
 }
 
 function ImageField({
-  file,
-  onRemove,
-  className,
+	file,
+	onRemove,
+	className,
 }: {
-  file: ListItemsItemImageFilesDestructured[number];
-  onRemove: () => void;
-  className?: string;
+	file: ListItemsItemImageFilesDestructured[number];
+	onRemove: () => void;
+	className?: string;
 }) {
-  hooks.useWatch(file);
+	hooks.useWatch(file);
 
-  return (
-    <div className={clsx('relative', className)}>
-      <img
-        className="h-full w-full object-cover rounded-lg"
-        src={file.url ?? ''}
-      />
-      <Button
-        size="icon"
-        color="destructive"
-        className="absolute top-1 right-1"
-        onClick={onRemove}
-      >
-        <Icon name="trash" />
-      </Button>
-    </div>
-  );
+	return (
+		<div className={clsx('relative', className)}>
+			<img
+				className="h-full w-full object-cover rounded-lg"
+				src={file.url ?? ''}
+			/>
+			<Button
+				size="icon"
+				color="destructive"
+				className="absolute top-1 right-1"
+				onClick={onRemove}
+			>
+				<Icon name="trash" />
+			</Button>
+		</div>
+	);
 }
 
 function DescriptionField({
-  item,
-  label,
-  placeholder,
+	item,
+	label,
+	placeholder,
+	autoFocus,
 }: {
-  item: Item;
-  label?: string;
-  placeholder?: string;
+	item: Item;
+	label?: string;
+	placeholder?: string;
+	autoFocus?: boolean;
 }) {
-  const descriptionField = hooks.useField(item, 'description');
+	const descriptionField = hooks.useField(item, 'description');
 
-  return (
-    <>
-      <Label htmlFor="description">{label ?? 'Description'}</Label>
-      <TextArea
-        id="description"
-        {...descriptionField.inputProps}
-        autoSelect
-        placeholder={placeholder}
-      />
-    </>
-  );
+	return (
+		<>
+			<Label htmlFor="description">{label ?? 'Description'}</Label>
+			<TextArea
+				id="description"
+				{...descriptionField.inputProps}
+				autoSelect
+				placeholder={placeholder}
+				autoFocus={autoFocus}
+			/>
+		</>
+	);
 }
 
 function CountField({ item }: { item: Item }) {
-  const countField = hooks.useField(item, 'count');
+	const countField = hooks.useField(item, 'count');
 
-  return (
-    <>
-      <Label htmlFor="count">How many do you want?</Label>
-      <div className="row flex-wrap">
-        <NumberStepper
-          value={countField.value}
-          onChange={countField.setValue}
-          renderValue={(val) => (val === 0 ? '∞' : val)}
-        />
-      </div>
-    </>
-  );
+	return (
+		<>
+			<Label htmlFor="count">How many do you want?</Label>
+			<div className="row flex-wrap">
+				<NumberStepper
+					value={countField.value}
+					onChange={countField.setValue}
+					renderValue={(val) => (val === 0 ? '∞' : val)}
+				/>
+			</div>
+		</>
+	);
 }
 
 const scanPage = graphql(`
-  query ScanStorePage($url: String!) {
-    storePageScan(input: { url: $url }) {
-      priceString
-      productName
-      scanner
-      imageUrl
-    }
-  }
+	query ScanStorePage($url: String!) {
+		storePageScan(input: { url: $url }) {
+			priceString
+			productName
+			scanner
+			imageUrl
+		}
+	}
 `);
 
-function SingleLinkField({ item }: { item: Item }) {
-  const { links } = hooks.useWatch(item);
-  hooks.useWatch(links);
-  const firstLink = links.get(0) ?? null;
+function SingleLinkField({
+	item,
+	autoFocus,
+}: {
+	item: Item;
+	autoFocus?: boolean;
+}) {
+	const { links } = hooks.useWatch(item);
+	hooks.useWatch(links);
+	const firstLink = links.get(0) ?? null;
 
-  const subscribed = useHasServerAccess();
-  const [doScan, { loading: scanning }] = useLazyQuery(scanPage);
-  const maybeScanPage = useCallback(async () => {
-    if (!subscribed) return;
+	const subscribed = useHasServerAccess();
+	const [doScan, { loading: scanning }] = useLazyQuery(scanPage);
+	const maybeScanPage = useCallback(async () => {
+		if (!subscribed) return;
 
-    const result = await doScan({
-      variables: {
-        url: firstLink,
-      },
-    });
-    if (result.data?.storePageScan) {
-      const scan = result.data.storePageScan;
-      console.log('scan result', scan);
-      item.update({
-        description: scan.productName ?? undefined,
-        priceMin: scan.priceString ?? undefined,
-        remoteImageUrl: scan.imageUrl ?? undefined,
-      });
-    } else {
-      console.error('scan failed', result.error);
-    }
-  }, [firstLink, item, subscribed]);
+		const result = await doScan({
+			variables: {
+				url: firstLink,
+			},
+		});
+		if (result.data?.storePageScan) {
+			const scan = result.data.storePageScan;
+			console.log('scan result', scan);
+			item.update({
+				description: scan.productName ?? undefined,
+				priceMin: scan.priceString ?? undefined,
+				remoteImageUrl: scan.imageUrl ?? undefined,
+			});
+		} else {
+			console.error('scan failed', result.error);
+		}
+	}, [firstLink, item, subscribed]);
 
-  return (
-    <>
-      <Label htmlFor="link">Link</Label>
-      <Input
-        id="link"
-        value={links.get(0) || ''}
-        type="url"
-        onChange={(e) => links.set(0, e.currentTarget.value)}
-        onBlur={maybeScanPage}
-        autoSelect
-      />
-      {!!scanning && (
-        <span className="text-xs text-gray-7 pl-3">
-          <Icon name="refresh" className="animate-spin w-10px h-10px" />{' '}
-          Scanning page...
-        </span>
-      )}
-    </>
-  );
+	return (
+		<>
+			<Label htmlFor="link">Link</Label>
+			<Input
+				id="link"
+				value={links.get(0) || ''}
+				type="url"
+				onChange={(e) => links.set(0, e.currentTarget.value)}
+				onBlur={maybeScanPage}
+				autoSelect
+				autoFocus={autoFocus}
+			/>
+			{!!scanning && (
+				<span className="text-xs text-gray-7 pl-3">
+					<Icon name="refresh" className="animate-spin w-10px h-10px" />{' '}
+					Scanning page...
+				</span>
+			)}
+		</>
+	);
 }
 
 const Label = withClassName('label', 'font-bold text-sm text-gray-7 py-1');
 
 function PriceRangeField({ item }: { item: Item }) {
-  const priceMinField = hooks.useField(item, 'priceMin');
-  const priceMaxField = hooks.useField(item, 'priceMax');
+	const priceMinField = hooks.useField(item, 'priceMin');
+	const priceMaxField = hooks.useField(item, 'priceMax');
 
-  return (
-    <>
-      <Label htmlFor="priceMin">Price range</Label>
-      <div className="row">
-        <Input
-          id="priceMin"
-          {...priceMinField.inputProps}
-          value={priceMinField.inputProps.value ?? ''}
-          placeholder="$10"
-          className="w-1/2"
-        />
-        <span className="px-2">to</span>
-        <Input
-          id="priceMax"
-          {...priceMaxField.inputProps}
-          value={priceMaxField.inputProps.value ?? ''}
-          placeholder="$100"
-          className="w-1/2"
-        />
-      </div>
-    </>
-  );
+	return (
+		<>
+			<Label htmlFor="priceMin">Price range</Label>
+			<div className="row">
+				<Input
+					id="priceMin"
+					{...priceMinField.inputProps}
+					value={priceMinField.inputProps.value ?? ''}
+					placeholder="$10"
+					className="w-1/2"
+				/>
+				<span className="px-2">to</span>
+				<Input
+					id="priceMax"
+					{...priceMaxField.inputProps}
+					value={priceMaxField.inputProps.value ?? ''}
+					placeholder="$100"
+					className="w-1/2"
+				/>
+			</div>
+		</>
+	);
 }
 
 function PriceField({ item }: { item: Item }) {
-  const priceField = hooks.useField(item, 'priceMin');
+	const priceField = hooks.useField(item, 'priceMin');
 
-  return (
-    <>
-      <Label htmlFor="price">Price</Label>
-      <Input
-        id="price"
-        {...priceField.inputProps}
-        value={priceField.inputProps.value ?? ''}
-        placeholder="$10"
-      />
-    </>
-  );
+	return (
+		<>
+			<Label htmlFor="price">Price</Label>
+			<Input
+				id="price"
+				{...priceField.inputProps}
+				value={priceField.inputProps.value ?? ''}
+				placeholder="$10"
+			/>
+		</>
+	);
 }
 
 function RemoteImage({ item }: { item: Item }) {
-  const { remoteImageUrl } = hooks.useWatch(item);
+	const { remoteImageUrl } = hooks.useWatch(item);
 
-  if (!remoteImageUrl) return null;
+	if (!remoteImageUrl) return null;
 
-  return (
-    <img
-      src={remoteImageUrl}
-      alt="product image"
-      className="h-200px object-cover object-center"
-    />
-  );
+	return (
+		<img
+			src={remoteImageUrl}
+			alt="product image"
+			className="h-200px object-cover object-center"
+		/>
+	);
 }
diff --git a/apps/wish-wash/web/src/components/items/ListItem.tsx b/apps/wish-wash/web/src/components/items/ListItem.tsx
index f5d755d5..625e1620 100644
--- a/apps/wish-wash/web/src/components/items/ListItem.tsx
+++ b/apps/wish-wash/web/src/components/items/ListItem.tsx
@@ -15,123 +15,118 @@ import { CSSProperties, forwardRef } from 'react';
 import { H3 } from '@a-type/ui/components/typography';
 
 export interface ListItemProps {
-  item: Item;
-  style?: CSSProperties;
-  className?: string;
+	item: Item;
+	style?: CSSProperties;
+	className?: string;
 }
 
 export const ListItem = forwardRef<HTMLDivElement, ListItemProps>(
-  function ListItem({ item, className, ...rest }, ref) {
-    const {
-      purchasedCount,
-      count,
-      description,
-      links,
-      id,
-      imageFiles,
-      type,
-      lastPurchasedAt,
-      prioritized,
-      priceMin,
-      priceMax,
-      remoteImageUrl,
-    } = hooks.useWatch(item);
-    hooks.useWatch(links);
-    hooks.useWatch(imageFiles);
-    const link = links.get(0);
+	function ListItem({ item, className, ...rest }, ref) {
+		const {
+			purchasedCount,
+			count,
+			description,
+			links,
+			id,
+			imageFiles,
+			type,
+			lastPurchasedAt,
+			prioritized,
+			priceMin,
+			priceMax,
+			remoteImageUrl,
+		} = hooks.useWatch(item);
+		hooks.useWatch(links);
+		hooks.useWatch(imageFiles);
+		const link = links.get(0);
 
-    const editItem = useEditItem();
+		const editItem = useEditItem();
 
-    const purchased = purchasedCount > count;
+		const purchased = purchasedCount > count;
 
-    const price =
-      priceMin || priceMax
-        ? !priceMin || !priceMax
-          ? priceMax || priceMin
-          : `${priceMin} - ${priceMax}`
-        : null;
+		const price =
+			priceMin || priceMax ?
+				!priceMin || !priceMax ?
+					priceMax || priceMin
+				:	`${priceMin} - ${priceMax}`
+			:	null;
 
-    const hasImage = imageFiles.length > 0 || remoteImageUrl;
+		const hasImage = imageFiles.length > 0 || remoteImageUrl;
 
-    return (
-      <Card
-        ref={ref}
-        className={clsx(
-          prioritized
-            ? 'min-h-300px sm:min-h-40vw'
-            : imageFiles.length
-              ? 'min-h-300px'
-              : '',
-          className,
-        )}
-        data-span={prioritized ? 2 : 1}
-        {...rest}
-      >
-        {hasImage && (
-          <Card.Image>
-            {imageFiles.length > 0 ? (
-              <ImageMarquee images={imageFiles.getAll()} />
-            ) : (
-              <img
-                src={remoteImageUrl!}
-                alt={description}
-                className="w-full h-full object-cover object-center"
-              />
-            )}
-          </Card.Image>
-        )}
-        <Card.Main className="col items-start">
-          <Card.Content unstyled>
-            <ItemTypeChip className="mr-2" item={item} />
-          </Card.Content>
-          <Card.Content>
-            <H3>{description}</H3>
-          </Card.Content>
-          {price && <Card.Content className="text-md">{price}</Card.Content>}
-          <Card.Content unstyled>
-            {lastPurchasedAt && (
-              <Chip className="text-xxs">
-                Bought: {new Date(lastPurchasedAt).toLocaleDateString()}
-              </Chip>
-            )}
-            {type === 'idea' ||
-              (type === 'product' && !link && <SearchButton item={item} />)}
-          </Card.Content>
-          <ItemStar item={item} className="absolute right-1 top-1" />
-        </Card.Main>
-        <Card.Footer className="items-center justify-between">
-          <Card.Menu className="ml-0 mr-auto">
-            <Button
-              color="ghost"
-              size="icon"
-              onClick={() => editItem(id)}
-              className="mr-auto"
-            >
-              <Icon name="pencil" />
-            </Button>
-          </Card.Menu>
-          <Card.Actions className="ml-auto mr-0">
-            {link && (
-              <Button asChild color="accent" size="small">
-                <Link to={link} newTab>
-                  <Icon name="link" /> View
-                </Link>
-              </Button>
-            )}
-            <Button
-              toggled={!!purchased}
-              color={purchased ? 'default' : 'primary'}
-              toggleMode="indicator"
-              onClick={() => {
-                // TODO: Implement
-              }}
-              size="small"
-            >
-              {purchased ? 'Bought' : 'Buy'}
-            </Button>
-          </Card.Actions>
-        </Card.Footer>
-      </Card>
-    );
-  },
+		return (
+			<Card
+				ref={ref}
+				className={clsx(
+					prioritized ? 'min-h-300px sm:min-h-40vw'
+					: imageFiles.length ? 'min-h-300px'
+					: '',
+					className,
+				)}
+				data-span={prioritized ? 2 : 1}
+				{...rest}
+			>
+				{hasImage && (
+					<Card.Image>
+						{imageFiles.length > 0 ?
+							<ImageMarquee images={imageFiles.getAll()} />
+						:	<img
+								src={remoteImageUrl!}
+								alt={description}
+								className="w-full h-full object-cover object-center"
+							/>
+						}
+					</Card.Image>
+				)}
+				<Card.Main className="col items-start" onClick={() => editItem(id)}>
+					<Card.Content unstyled className="pt-2 pl-1">
+						<ItemTypeChip item={item} />
+					</Card.Content>
+					<Card.Content
+						unstyled
+						className={clsx(
+							'p-1',
+							hasImage ?
+								'bg-[rgba(0,0,0,0.5)] text-[white] text-xl font-bold'
+							:	'text-lg font-normal',
+						)}
+					>
+						<span>{description}</span>
+					</Card.Content>
+					{price && <Card.Content className="text-md">{price}</Card.Content>}
+					<Card.Content unstyled>
+						{lastPurchasedAt && (
+							<Chip className="text-xxs">
+								Bought: {new Date(lastPurchasedAt).toLocaleDateString()}
+							</Chip>
+						)}
+						{type === 'idea' ||
+							(type === 'product' && !link && <SearchButton item={item} />)}
+					</Card.Content>
+				</Card.Main>
+				<ItemStar item={item} className="absolute right-1 top-1" />
+				<Card.Footer className="items-center justify-between">
+					<Card.Actions className="ml-auto mr-0">
+						{link && (
+							<Button asChild color="accent" size="small">
+								<Link to={link} newTab>
+									<Icon name="link" /> View
+								</Link>
+							</Button>
+						)}
+						<Button
+							toggled={!!purchased}
+							color={purchased ? 'default' : 'primary'}
+							toggleMode="indicator"
+							onClick={() => {
+								// TODO: Implement
+							}}
+							size="small"
+						>
+							{purchased ? 'Bought' : 'Buy'}
+						</Button>
+					</Card.Actions>
+				</Card.Footer>
+			</Card>
+		);
+	},
 );
diff --git a/apps/wish-wash/web/src/components/lists/CreateListButton.tsx b/apps/wish-wash/web/src/components/lists/CreateListButton.tsx
index 1af97484..5c93b0ca 100644
--- a/apps/wish-wash/web/src/components/lists/CreateListButton.tsx
+++ b/apps/wish-wash/web/src/components/lists/CreateListButton.tsx
@@ -1,12 +1,18 @@
 import { hooks } from '@/hooks.js';
 import { ButtonProps, Button } from '@a-type/ui/components/button';
 import {
-  Dialog,
-  DialogTrigger,
-  DialogActions,
-  DialogClose,
-  DialogContent,
-  DialogTitle,
+	Card,
+	CardContent,
+	CardMain,
+	CardTitle,
+} from '@a-type/ui/components/card';
+import {
+	Dialog,
+	DialogTrigger,
+	DialogActions,
+	DialogClose,
+	DialogContent,
+	DialogTitle,
 } from '@a-type/ui/components/dialog';
 import { Icon } from '@a-type/ui/components/icon';
 import { useHasServerAccess } from '@biscuits/client';
@@ -17,67 +23,90 @@ import { useState } from 'react';
 export interface CreateListButtonProps extends ButtonProps {}
 
 export function CreateListButton({
-  children,
-  ...props
+	children,
+	...props
 }: CreateListButtonProps) {
-  const client = hooks.useClient();
-  const navigate = useNavigate();
+	const client = hooks.useClient();
+	const navigate = useNavigate();
 
-  const canSync = useHasServerAccess();
+	const canSync = useHasServerAccess();
 
-  const [open, setOpen] = useState(false);
+	const [open, setOpen] = useState(false);
 
-  const createPublic = async () => {
-    const list = await client.lists.put({});
-    navigate(`/${list.get('id')}?listId=${list.get('id')}`);
-    setOpen(false);
-  };
-  const createPrivate = async () => {
-    const list = await client.lists.put(
-      {},
-      {
-        access: authorization.private,
-      },
-    );
-    navigate(`/${list.get('id')}?listId=${list.get('id')}`);
-    setOpen(false);
-  };
+	const createPublic = async () => {
+		const list = await client.lists.put({});
+		navigate(`/${list.get('id')}?listId=${list.get('id')}`);
+		setOpen(false);
+	};
+	const createPrivate = async () => {
+		const list = await client.lists.put(
+			{
+				name: 'Wish list',
+			},
+			{
+				access: authorization.private,
+			},
+		);
+		navigate(`/${list.get('id')}?listId=${list.get('id')}`);
+		setOpen(false);
+	};
 
-  return (
-    <Dialog
-      open={open}
-      onOpenChange={(open) => {
-        if (open) {
-          if (!canSync) {
-            createPrivate();
-          } else {
-            setOpen(true);
-          }
-        } else {
-          setOpen(open);
-        }
-      }}
-    >
-      <DialogTrigger asChild>
-        <Button {...props}>
-          {children || (
-            <>
-              <Icon name="plus" />
-              New List
-            </>
-          )}
-        </Button>
-      </DialogTrigger>
-      <DialogContent>
-        <DialogTitle>Create List</DialogTitle>
-        {canSync && <Button onClick={createPublic}>New Public List</Button>}
-        <Button onClick={createPrivate}>New Private List</Button>
-        <DialogActions>
-          <DialogClose asChild>
-            <Button>Cancel</Button>
-          </DialogClose>
-        </DialogActions>
-      </DialogContent>
-    </Dialog>
-  );
+	return (
+		<Dialog
+			open={open}
+			onOpenChange={(open) => {
+				if (open) {
+					if (!canSync) {
+						createPrivate();
+					} else {
+						setOpen(true);
+					}
+				} else {
+					setOpen(open);
+				}
+			}}
+		>
+			<Dialog.Trigger asChild>
+				<Button {...props}>
+					{children || (
+						<>
+							<Icon name="plus" />
+							New List
+						</>
+					)}
+				</Button>
+			</Dialog.Trigger>
+			<Dialog.Content>
+				<Dialog.Title>Create List</Dialog.Title>
+				<Dialog.Description className="text-sm">
+					This can be changed later
+				</Dialog.Description>
+				<div className="grid grid-cols-2 items-stretch justify-stretch gap-3">
+					{canSync && (
+						<Card className="h-full">
+							<CardMain onClick={createPublic}>
+								<CardTitle>
+									<Icon name="add_person" /> Shared List
+								</CardTitle>
+								<CardContent>
+									A collaborative list you share with everyone on your plan.
+								</CardContent>
+							</CardMain>
+						</Card>
+					)}
+					<Card className="h-full">
+						<CardMain onClick={createPrivate}>
+							<CardTitle>
+								<Icon name="lock" /> Private List
+							</CardTitle>
+							<CardContent>A list only you can see.</CardContent>
+						</CardMain>
+					</Card>
+				</div>
+				<Dialog.Actions>
+					<Dialog.Close>Cancel</Dialog.Close>
+				</Dialog.Actions>
+			</Dialog.Content>
+		</Dialog>
+	);
 }
diff --git a/apps/wish-wash/web/src/components/lists/ListDetailsDialog.tsx b/apps/wish-wash/web/src/components/lists/ListDetailsDialog.tsx
index d41db735..6ef63c7c 100644
--- a/apps/wish-wash/web/src/components/lists/ListDetailsDialog.tsx
+++ b/apps/wish-wash/web/src/components/lists/ListDetailsDialog.tsx
@@ -1,113 +1,131 @@
 import { hooks } from '@/hooks.js';
-import { Button, ButtonProps } from '@a-type/ui/components/button';
-import {
-  Dialog,
-  DialogContent,
-  DialogTitle,
-  DialogActions,
-  DialogClose,
-} from '@a-type/ui/components/dialog';
-import {
-  DropdownMenuItem,
-  DropdownMenuItemRightSlot,
-} from '@a-type/ui/components/dropdownMenu';
+import { toast } from '@a-type/ui';
+import { Button, ConfirmedButton } from '@a-type/ui/components/button';
+import { Dialog, DialogClose } from '@a-type/ui/components/dialog';
+import { DropdownMenuItemRightSlot } from '@a-type/ui/components/dropdownMenu';
 import {
-  FormikForm,
-  TextField,
-  SubmitButton,
+	FormikForm,
+	SubmitButton,
+	TextField,
 } from '@a-type/ui/components/forms';
 import { Icon } from '@a-type/ui/components/icon';
-import { useNavigate, useSearchParams } from '@verdant-web/react-router';
-import { toast } from '@a-type/ui';
+import { Tabs } from '@a-type/ui/components/tabs';
 import { UserMenuItem } from '@biscuits/client';
+import { useNavigate, useSearchParams } from '@verdant-web/react-router';
+import { authorization } from '@wish-wash.biscuits/verdant';
 import { useEditList } from './hooks.js';
 
 export interface ListDetailsDialogProps {}
 
 export function ListDetailsDialog({}: ListDetailsDialogProps) {
-  const [params, setParams] = useSearchParams();
-  const listId = params.get('listId');
+	const [params, setParams] = useSearchParams();
+	const listId = params.get('listId');
+
+	const list = hooks.useList(listId || '', { skip: !listId });
+	hooks.useWatch(list);
+
+	const onClose = () => {
+		setParams((p) => {
+			p.delete('listId');
+			return p;
+		});
+	};
 
-  const list = hooks.useList(listId || '', { skip: !listId });
-  hooks.useWatch(list);
+	const navigate = useNavigate();
+	const deleteList = async () => {
+		if (list) {
+			list.deleteSelf();
+			toast.success('List deleted');
+			navigate('/');
+		}
+	};
 
-  const onClose = () => {
-    setParams((p) => {
-      p.delete('listId');
-      return p;
-    });
-  };
+	const client = hooks.useClient();
+	const convertToShared = async () => {
+		if (list) {
+			if (!list.isAuthorized) {
+				return;
+			}
+			const converted = await client.lists.clone(list, {
+				access: authorization.public,
+				undoable: false,
+			});
+			list.deleteSelf();
+			navigate(`/${converted.get('id')}`);
+		}
+	};
+	const convertToPrivate = async () => {
+		if (list) {
+			if (list.isAuthorized) {
+				return;
+			}
+			const converted = await client.lists.clone(list, {
+				access: authorization.private,
+				undoable: false,
+			});
+			list.deleteSelf();
+			navigate(`/${converted.get('id')}`);
+		}
+	};
 
-  const navigate = useNavigate();
-  const deleteList = async () => {
-    if (list) {
-      list.deleteSelf();
-      toast.success('List deleted');
-      navigate('/');
-    }
-  };
+	const isPrivate = list?.isAuthorized;
 
-  return (
-    <Dialog
-      open={!!listId}
-      onOpenChange={(v) => {
-        if (!v) onClose();
-      }}
-    >
-      <DialogContent>
-        <FormikForm
-          initialValues={{ name: list ? list.get('name') : '' }}
-          onSubmit={async ({ name }) => {
-            if (list) {
-              list.set('name', name);
-            }
-            onClose();
-          }}
-        >
-          <DialogTitle>Edit List</DialogTitle>
-          <TextField name="name" required />
-          <DialogActions>
-            <Button
-              type="button"
-              color="destructive"
-              onClick={deleteList}
-              className="mr-auto"
-            >
-              <Icon name="trash" />
-              Delete list
-            </Button>
-            <DialogClose asChild>
-              <Button type="button">
-                <Icon name="x" />
-                Cancel
-              </Button>
-            </DialogClose>
-            <SubmitButton>
-              <Icon name="check" /> Save
-            </SubmitButton>
-          </DialogActions>
-        </FormikForm>
-      </DialogContent>
-    </Dialog>
-  );
+	return (
+		<Dialog
+			open={!!listId}
+			onOpenChange={(v) => {
+				if (!v) onClose();
+			}}
+		>
+			<Dialog.Content>
+				<Dialog.Title>Manage list</Dialog.Title>
+				<Dialog.Actions>
+					{isPrivate ?
+						<ConfirmedButton
+							confirmText="This will make all items visible to other plan members."
+							onConfirm={convertToShared}
+						>
+							Convert to shared list
+						</ConfirmedButton>
+					:	<ConfirmedButton
+							confirmText="This will make this list inaccessible to other plan members."
+							onConfirm={convertToPrivate}
+						>
+							Convert to private list
+						</ConfirmedButton>
+					}
+					<Button
+						type="button"
+						color="destructive"
+						onClick={deleteList}
+						className="mr-auto"
+					>
+						<Icon name="trash" />
+						Delete list
+					</Button>
+					<Dialog.Close>Cancel</Dialog.Close>
+				</Dialog.Actions>
+			</Dialog.Content>
+		</Dialog>
+	);
 }
 
 export interface ListDetailsEditButtonProps {
-  listId: string;
-  className?: string;
+	listId: string;
+	className?: string;
 }
 
 export function ListDetailsEditButton({
-  listId,
-  ...rest
+	listId,
+	...rest
 }: ListDetailsEditButtonProps) {
-  const editList = useEditList();
-  return (
-    <UserMenuItem onClick={() => editList(listId)} {...rest}>
-      Edit list{' '}
-      <DropdownMenuItemRightSlot>
-        <Icon name="pencil" />
-      </DropdownMenuItemRightSlot>
-    </UserMenuItem>
-  );
+	const editList = useEditList();
+	return (
+		<UserMenuItem onClick={() => editList(listId)} {...rest}>
+			Edit list{' '}
+			<DropdownMenuItemRightSlot>
+				<Icon name="pencil" />
+			</DropdownMenuItemRightSlot>
+		</UserMenuItem>
+	);
 }
diff --git a/apps/wish-wash/web/src/components/lists/ListHero.tsx b/apps/wish-wash/web/src/components/lists/ListHero.tsx
index 63ca78d1..a41233b6 100644
--- a/apps/wish-wash/web/src/components/lists/ListHero.tsx
+++ b/apps/wish-wash/web/src/components/lists/ListHero.tsx
@@ -1,17 +1,25 @@
 import { hooks } from '@/hooks.js';
-import { H1 } from '@a-type/ui/components/typography';
+import { EditableText } from '@a-type/ui/components/editableText';
+import { Icon } from '@a-type/ui/components/icon';
 import { List } from '@wish-wash.biscuits/verdant';
 
 export interface ListHeroProps {
-  list: List;
+	list: List;
 }
 
 export function ListHero({ list }: ListHeroProps) {
-  const { name, id } = hooks.useWatch(list);
+	const { name, id } = hooks.useWatch(list);
 
-  return (
-    <div className="col items-stretch">
-      <H1 className="gutter-bottom">{name}</H1>
-    </div>
-  );
+	return (
+		<div className="col items-start">
+			<div className="flex flex-row items-center">
+				<Icon name={list.isAuthorized ? 'lock' : 'add_person'} />
+				<EditableText
+					className="text-xl font-bold"
+					value={name}
+					onValueChange={(v) => list.set('name', v)}
+				/>
+			</div>
+		</div>
+	);
 }
diff --git a/apps/wish-wash/web/src/components/lists/ListView.tsx b/apps/wish-wash/web/src/components/lists/ListView.tsx
index f2e4a400..0ad05079 100644
--- a/apps/wish-wash/web/src/components/lists/ListView.tsx
+++ b/apps/wish-wash/web/src/components/lists/ListView.tsx
@@ -1,45 +1,147 @@
 import { clsx } from '@a-type/ui';
-import { CardGrid, cardGridColumns } from '@a-type/ui/components/card';
+import {
+	Card,
+	CardContent,
+	CardGrid,
+	cardGridColumns,
+	CardMain,
+	CardTitle,
+} from '@a-type/ui/components/card';
 import { List } from '@wish-wash.biscuits/verdant';
-import { Suspense } from 'react';
+import { ReactNode, Suspense } from 'react';
 import { useItemSize } from '../items/hooks.js';
 import { ItemEditDialog } from '../items/ItemEditDialog.jsx';
 import { ListItem } from '../items/ListItem.jsx';
 import { CreateItem } from './CreateItem.jsx';
 import { ItemSorter } from './ItemSorter.jsx';
 import { hooks } from '@/hooks.js';
+import { Icon, IconName } from '@a-type/ui/components/icon';
 
 export interface ListViewProps {
-  list: List;
-  className?: string;
+	list: List;
+	className?: string;
+}
+
+function largeColumns(size: number) {
+	if (size > 2000) {
+		return 5;
+	}
+	if (size > 1500) {
+		return 4;
+	}
+	if (size > 1000) {
+		return 3;
+	}
+	if (size > 500) {
+		return 2;
+	}
+	return 1;
+}
+
+function smallColumns(size: number) {
+	if (size > 2000) {
+		return 7;
+	}
+	if (size > 1500) {
+		return 6;
+	}
+	if (size > 1000) {
+		return 5;
+	}
+	if (size > 750) {
+		return 4;
+	}
+	if (size > 500) {
+		return 3;
+	}
+	return 2;
 }
 
 export function ListView({ list, className }: ListViewProps) {
-  const { items } = hooks.useWatch(list);
-  hooks.useWatch(items);
-  const [itemSize] = useItemSize();
+	const { items } = hooks.useWatch(list);
+	hooks.useWatch(items);
+	const [itemSize] = useItemSize();
+
+	return (
+		<div className={clsx('col items-stretch gap-4', className)}>
+			<CreateItem className="sticky top-4 z-10 self-center" list={list} />
+			<div className="row items-stretch">
+				<div className="flex-1">
+					<CardGrid
+						columns={itemSize === 'large' ? largeColumns : smallColumns}
+						className="flex-1"
+					>
+						{items.map((item) => (
+							<ListItem item={item} key={item.get('id')} />
+						))}
+						{items.length === 0 && <TutorialCards />}
+					</CardGrid>
+				</div>
+				<ItemSorter list={list} />
+			</div>
+			<Suspense>
+				<ItemEditDialog list={list} />
+			</Suspense>
+		</div>
+	);
+}
+
+function TutorialCards() {
+	return (
+		<>
+			<Card>
+				<CardMain>
+					<CardTitle>Add items to your list</CardTitle>
+					<CardContent>
+						Use the buttons above to add your first item. Wish Wash has several
+						types of items...
+					</CardContent>
+				</CardMain>
+			</Card>
+			<TutorialCard theme="lemon" title="Ideas" icon="lightbulb">
+				Ideas are things you know you want, but don't have a particular example
+				for. Like, "a black dress" or "a phone case"&mdash;maybe you don't care
+				which one, or just don't know yet.
+			</TutorialCard>
+			<TutorialCard theme="leek" title="Products" icon="gift">
+				Products are specific things, with a link to a store page to buy it.
+			</TutorialCard>
+			<TutorialCard theme="eggplant" title="Vibes" icon="magic">
+				Vibes help to describe your aesthetic&mdash;just the general feeling or
+				style of things you like. Vibes help others find creative and
+				spontaneous gifts.
+			</TutorialCard>
+		</>
+	);
+}
 
-  return (
-    <div className={clsx('col items-stretch gap-4', className)}>
-      <CreateItem className="sticky top-4 z-10 self-center" list={list} />
-      <div className="row items-stretch">
-        <CardGrid
-          columns={
-            itemSize === 'large'
-              ? cardGridColumns.default
-              : cardGridColumns.small
-          }
-          className="flex-1"
-        >
-          {items.map((item) => (
-            <ListItem item={item} key={item.get('id')} />
-          ))}
-        </CardGrid>
-        <ItemSorter list={list} />
-      </div>
-      <Suspense>
-        <ItemEditDialog list={list} />
-      </Suspense>
-    </div>
-  );
+function TutorialCard({
+	title,
+	children,
+	theme,
+	icon,
+}: {
+	theme: string;
+	title: string;
+	children: ReactNode;
+	icon: IconName;
+}) {
+	return (
+		<Card
+			className={clsx(`theme-${theme}`, 'bg-primary-wash color-primary-dark')}
+		>
+			<CardMain>
+				<CardContent
+					unstyled
+					className="flex flex-row items-center gap-3 p-3 font-bold text-lg"
+				>
+					<Icon className="w-[30px] h-[30px] [stroke-width:0.3]" name={icon} />
+					{title}
+				</CardContent>
+				<CardContent unstyled className="p-2">
+					{children}
+				</CardContent>
+			</CardMain>
+		</Card>
+	);
 }
diff --git a/apps/wish-wash/web/src/components/lists/ListsList.tsx b/apps/wish-wash/web/src/components/lists/ListsList.tsx
index 40463d5b..a0614cfa 100644
--- a/apps/wish-wash/web/src/components/lists/ListsList.tsx
+++ b/apps/wish-wash/web/src/components/lists/ListsList.tsx
@@ -1,21 +1,21 @@
 import { hooks } from '@/hooks.js';
 import { List } from '@wish-wash.biscuits/verdant';
 import {
-  CardRoot,
-  CardMain,
-  CardGrid,
-  CardTitle,
-  CardFooter,
+	CardRoot,
+	CardMain,
+	CardGrid,
+	CardTitle,
+	CardFooter,
 } from '@a-type/ui/components/card';
 import { InfiniteLoadTrigger } from '@a-type/ui/components/infiniteLoadTrigger';
 import { Link } from '@verdant-web/react-router';
 import {
-  DropdownMenu,
-  DropdownMenuArrow,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuItemRightSlot,
-  DropdownMenuTrigger,
+	DropdownMenu,
+	DropdownMenuArrow,
+	DropdownMenuContent,
+	DropdownMenuItem,
+	DropdownMenuItemRightSlot,
+	DropdownMenuTrigger,
 } from '@a-type/ui/components/dropdownMenu';
 import { Button } from '@a-type/ui/components/button';
 import { Icon } from '@a-type/ui/components/icon';
@@ -25,92 +25,94 @@ import { toast } from '@a-type/ui';
 export interface ListsListProps {}
 
 export function ListsList({}: ListsListProps) {
-  const [items, { hasMore, loadMore }] = hooks.useAllListsInfinite({
-    index: {
-      where: 'createdAt',
-      order: 'desc',
-    },
-    pageSize: 20,
-  });
+	const [items, { hasMore, loadMore }] = hooks.useAllListsInfinite({
+		index: {
+			where: 'createdAt',
+			order: 'desc',
+		},
+		pageSize: 20,
+	});
 
-  return (
-    <>
-      <CardGrid>
-        {items.map((item, i) => (
-          <ListsListItem item={item} key={i} />
-        ))}
-      </CardGrid>
-      {hasMore && <InfiniteLoadTrigger onVisible={loadMore} />}
-    </>
-  );
+	return (
+		<>
+			<CardGrid>
+				{items.map((item, i) => (
+					<ListsListItem item={item} key={i} />
+				))}
+			</CardGrid>
+			{hasMore && <InfiniteLoadTrigger onVisible={loadMore} />}
+		</>
+	);
 }
 
 function ListsListItem({ item }: { item: List }) {
-  const { name, id } = hooks.useWatch(item);
-  return (
-    <CardRoot>
-      <CardMain asChild>
-        <Link to={`/${id}`}>
-          <CardTitle>{name}</CardTitle>
-        </Link>
-      </CardMain>
-      <CardFooter>
-        <ListMenu list={item} />
-      </CardFooter>
-    </CardRoot>
-  );
+	const { name, id } = hooks.useWatch(item);
+	return (
+		<CardRoot>
+			<CardMain asChild>
+				<Link to={`/${id}`}>
+					<CardTitle className="flex-row gap-2 items-center">
+						<Icon name={item.isAuthorized ? 'lock' : 'add_person'} /> {name}
+					</CardTitle>
+				</Link>
+			</CardMain>
+			<CardFooter>
+				<ListMenu list={item} />
+			</CardFooter>
+		</CardRoot>
+	);
 }
 
 function ListMenu({ list }: { list: List }) {
-  const editList = useEditList();
-  const client = hooks.useClient();
+	const editList = useEditList();
+	const client = hooks.useClient();
 
-  return (
-    <DropdownMenu>
-      <DropdownMenuTrigger asChild>
-        <Button size="icon" color="ghost">
-          <Icon name="dots" />
-        </Button>
-      </DropdownMenuTrigger>
-      <DropdownMenuContent>
-        <DropdownMenuArrow />
-        <DropdownMenuItem onClick={() => editList(list.get('id'))}>
-          Edit list
-          <DropdownMenuItemRightSlot>
-            <Icon name="pencil" />
-          </DropdownMenuItemRightSlot>
-        </DropdownMenuItem>
-        <DropdownMenuItem
-          onClick={async () => {
-            await client
-              .batch()
-              .run(() => {
-                list.deleteSelf();
-              })
-              .commit();
-            const t = toast.success(
-              <div className="row">
-                List deleted
-                <Button
-                  size="small"
-                  onClick={() => {
-                    client.undoHistory.undo();
-                    toast.dismiss(t);
-                  }}
-                >
-                  Undo
-                </Button>
-              </div>,
-            );
-          }}
-          color="destructive"
-        >
-          Delete list
-          <DropdownMenuItemRightSlot>
-            <Icon name="trash" />
-          </DropdownMenuItemRightSlot>
-        </DropdownMenuItem>
-      </DropdownMenuContent>
-    </DropdownMenu>
-  );
+	return (
+		<DropdownMenu>
+			<DropdownMenuTrigger asChild>
+				<Button size="icon" color="ghost">
+					<Icon name="dots" />
+				</Button>
+			</DropdownMenuTrigger>
+			<DropdownMenuContent>
+				<DropdownMenuArrow />
+				<DropdownMenuItem onClick={() => editList(list.get('id'))}>
+					Edit list
+					<DropdownMenuItemRightSlot>
+						<Icon name="pencil" />
+					</DropdownMenuItemRightSlot>
+				</DropdownMenuItem>
+				<DropdownMenuItem
+					onClick={async () => {
+						await client
+							.batch()
+							.run(() => {
+								list.deleteSelf();
+							})
+							.commit();
+						const t = toast.success(
+							<div className="row">
+								List deleted
+								<Button
+									size="small"
+									onClick={() => {
+										client.undoHistory.undo();
+										toast.dismiss(t);
+									}}
+								>
+									Undo
+								</Button>
+							</div>,
+						);
+					}}
+					color="destructive"
+				>
+					Delete list
+					<DropdownMenuItemRightSlot>
+						<Icon name="trash" />
+					</DropdownMenuItemRightSlot>
+				</DropdownMenuItem>
+			</DropdownMenuContent>
+		</DropdownMenu>
+	);
 }
diff --git a/apps/wish-wash/web/src/pages/HomePage.tsx b/apps/wish-wash/web/src/pages/HomePage.tsx
index 71d5fabf..97f6481b 100644
--- a/apps/wish-wash/web/src/pages/HomePage.tsx
+++ b/apps/wish-wash/web/src/pages/HomePage.tsx
@@ -1,11 +1,13 @@
+import { CreateListButton } from '@/components/lists/CreateListButton.jsx';
 import { ListsList } from '@/components/lists/ListsList.jsx';
 import { hooks } from '@/hooks.js';
 import { DropdownMenuItemRightSlot } from '@a-type/ui/components/dropdownMenu';
 import { Icon } from '@a-type/ui/components/icon';
 import {
-  PageContent,
-  PageFixedArea,
-  PageRoot,
+	PageContent,
+	PageFixedArea,
+	PageNowPlaying,
+	PageRoot,
 } from '@a-type/ui/components/layouts';
 import { H1 } from '@a-type/ui/components/typography';
 import { useHasServerAccess, UserMenu, UserMenuItem } from '@biscuits/client';
@@ -16,59 +18,62 @@ import { Suspense } from 'react';
 export interface HomePageProps {}
 
 export function HomePage({}: HomePageProps) {
-  return (
-    <PageRoot>
-      <PageContent>
-        <PageFixedArea className="items-end">
-          <UserMenu
-            extraItems={
-              <Suspense>
-                <ListMenuExtraItems />
-              </Suspense>
-            }
-          />
-        </PageFixedArea>
-        <H1 className="gutter-bottom">Lists</H1>
-        <ListsList />
-      </PageContent>
-    </PageRoot>
-  );
+	return (
+		<PageRoot>
+			<PageContent>
+				<PageFixedArea className="items-end">
+					<UserMenu
+						extraItems={
+							<Suspense>
+								<ListMenuExtraItems />
+							</Suspense>
+						}
+					/>
+				</PageFixedArea>
+				<H1 className="gutter-bottom">Lists</H1>
+				<ListsList />
+				<PageNowPlaying unstyled>
+					<CreateListButton className="self-center shadow-lg" color="primary" />
+				</PageNowPlaying>
+			</PageContent>
+		</PageRoot>
+	);
 }
 
 export default HomePage;
 
 export function ListMenuExtraItems() {
-  const client = hooks.useClient();
+	const client = hooks.useClient();
 
-  const navigate = useNavigate();
-  const createList = async (isPrivate?: boolean) => {
-    const list = await client.lists.put(
-      { name: 'Wish list' },
-      {
-        access: isPrivate ? authorization.private : authorization.public,
-      },
-    );
-    navigate(`/${list.get('id')}?listId=${list.get('id')}`);
-  };
+	const navigate = useNavigate();
+	const createList = async (isPrivate?: boolean) => {
+		const list = await client.lists.put(
+			{ name: 'Wish list' },
+			{
+				access: isPrivate ? authorization.private : authorization.public,
+			},
+		);
+		navigate(`/${list.get('id')}?listId=${list.get('id')}`);
+	};
 
-  const canSync = useHasServerAccess();
+	const canSync = useHasServerAccess();
 
-  return (
-    <>
-      {canSync && (
-        <UserMenuItem onClick={() => createList(false)}>
-          New public list
-          <DropdownMenuItemRightSlot>
-            <Icon name="add_person" />
-          </DropdownMenuItemRightSlot>
-        </UserMenuItem>
-      )}
-      <UserMenuItem onClick={() => createList(true)}>
-        New private list
-        <DropdownMenuItemRightSlot>
-          <Icon name="plus" />
-        </DropdownMenuItemRightSlot>
-      </UserMenuItem>
-    </>
-  );
+	return (
+		<>
+			{canSync && (
+				<UserMenuItem onClick={() => createList(false)}>
+					New public list
+					<DropdownMenuItemRightSlot>
+						<Icon name="add_person" />
+					</DropdownMenuItemRightSlot>
+				</UserMenuItem>
+			)}
+			<UserMenuItem onClick={() => createList(true)}>
+				New private list
+				<DropdownMenuItemRightSlot>
+					<Icon name="plus" />
+				</DropdownMenuItemRightSlot>
+			</UserMenuItem>
+		</>
+	);
 }
diff --git a/biscuits.code-workspace b/biscuits.code-workspace
index e1a81086..dcda3fff 100644
--- a/biscuits.code-workspace
+++ b/biscuits.code-workspace
@@ -1,75 +1,79 @@
 {
-  "folders": [
-    {
-      "name": "💽 Server",
-      "path": "server",
-    },
-    {
-      "name": "🌐 Web",
-      "path": "web",
-    },
-    {
-      "name": "📦 Packages",
-      "path": "packages",
-    },
-    {
-      "name": "🍝 Gnocchi",
-      "path": "apps/gnocchi",
-    },
-    {
-      "name": "🏖️ Trip Tick",
-      "path": "apps/trip-tick",
-    },
-    {
-      "name": "🛒 Wish Wash",
-      "path": "apps/wish-wash",
-    },
-    {
-      "name": "📚 Marginalia",
-      "path": "apps/marginalia",
-    },
-    {
-      "name": "🌟 Star Chart",
-      "path": "apps/star-chart",
-    },
-    {
-      "name": "🎸 Humding",
-      "path": "apps/humding",
-    },
-    {
-      "name": "🎨 Palette",
-      "path": "apps/palette",
-    },
-    {
-      "name": "📃 Scripts",
-      "path": "scripts",
-    },
-    {
-      "name": "🛠️ CDK",
-      "path": "cdk",
-    },
-    {
-      "name": "📝 Blog",
-      "path": "blog",
-    },
-    {
-      "name": "🔧 Workflows",
-      "path": ".github/workflows",
-    },
-  ],
-  "settings": {
-    "typescript.tsdk": "📦 Packages\\client\\node_modules\\typescript\\lib",
-    "unocss.root": [
-      "🌐 Web",
-      "🍝 Gnocchi\\web",
-      "🏖️ Trip Tick\\web",
-      "🛒 Wish Wash\\web",
-      "📚 Marginalia\\web",
-      "🌟 Star Chart\\web",
-      "🎸 Humding\\web",
-      "🎨 Palette\\web",
-    ],
-    "typescript.enablePromptUseWorkspaceTsdk": true,
-    "typescript.preferences.importModuleSpecifierEnding": "js",
-  },
+	"folders": [
+		{
+			"name": "💽 Server",
+			"path": "server",
+		},
+		{
+			"name": "🌐 Web",
+			"path": "web",
+		},
+		{
+			"name": "📦 Packages",
+			"path": "packages",
+		},
+		{
+			"name": "🍝 Gnocchi",
+			"path": "apps/gnocchi",
+		},
+		{
+			"name": "🏖️ Trip Tick",
+			"path": "apps/trip-tick",
+		},
+		{
+			"name": "🛒 Wish Wash",
+			"path": "apps/wish-wash",
+		},
+		{
+			"name": "📚 Marginalia",
+			"path": "apps/marginalia",
+		},
+		{
+			"name": "🌟 Star Chart",
+			"path": "apps/star-chart",
+		},
+		{
+			"name": "🎸 Humding",
+			"path": "apps/humding",
+		},
+		{
+			"name": "🎨 Palette",
+			"path": "apps/palette",
+		},
+		{
+			"name": "📃 Scripts",
+			"path": "scripts",
+		},
+		{
+			"name": "🛠️ CDK",
+			"path": "cdk",
+		},
+		{
+			"name": "📝 Blog",
+			"path": "blog",
+		},
+		{
+			"name": "🔧 Workflows",
+			"path": ".github/workflows",
+		},
+	],
+	"settings": {
+		"typescript.tsdk": "📦 Packages\\client\\node_modules\\typescript\\lib",
+		"unocss.root": [
+			"🌐 Web",
+			"🍝 Gnocchi\\web",
+			"🏖️ Trip Tick\\web",
+			"🛒 Wish Wash\\web",
+			"📚 Marginalia\\web",
+			"🌟 Star Chart\\web",
+			"🎸 Humding\\web",
+			"🎨 Palette\\web",
+		],
+		"typescript.enablePromptUseWorkspaceTsdk": true,
+		"typescript.preferences.importModuleSpecifierEnding": "js",
+		"prettier.trailingComma": "all",
+		"prettier.useTabs": true,
+		"prettier.singleQuote": true,
+		"prettier.experimentalTernaries": true,
+	},
 }
diff --git a/packages/db/src/index.ts b/packages/db/src/index.ts
index c099f109..8f1b886d 100644
--- a/packages/db/src/index.ts
+++ b/packages/db/src/index.ts
@@ -5,8 +5,8 @@ import { Kysely, SqliteDialect, sql } from 'kysely';
 export { jsonArrayFrom, jsonObjectFrom } from 'kysely/helpers/sqlite';
 import { SerializePlugin } from 'kysely-plugin-serialize';
 import {
-  TimestampsPlugin,
-  migrateToLatest as migrateInternal,
+	TimestampsPlugin,
+	migrateToLatest as migrateInternal,
 } from '@a-type/kysely';
 import migrations from './migrations/index.js';
 export type * from './tables.js';
@@ -15,7 +15,7 @@ const DATABASE_FILE = process.env.DATABASE_FILE;
 assert(DATABASE_FILE, 'DATABASE_FILE environment variable must be set');
 
 const dialect = new SqliteDialect({
-  database: new SQLite(DATABASE_FILE),
+	database: new SQLite(DATABASE_FILE),
 });
 
 // Database interface is passed to Kysely's constructor, and from now on, Kysely
@@ -23,30 +23,35 @@ const dialect = new SqliteDialect({
 // Dialect is passed to Kysely's constructor, and from now on, Kysely knows how
 // to communicate with your database.
 export const db = new Kysely<Database>({
-  dialect,
-  plugins: [
-    new TimestampsPlugin({
-      ignoredTables: ['FoodCategoryAssignment'],
-    }),
-    new SerializePlugin(),
-  ],
+	dialect,
+	plugins: [
+		new TimestampsPlugin({
+			ignoredTables: ['FoodCategoryAssignment'],
+		}),
+		new SerializePlugin(),
+	],
 });
 
 export type DB = typeof db;
 
 export {
-  id,
-  hashPassword,
-  comparePassword,
-  dateTime,
-  compareDates,
+	id,
+	hashPassword,
+	comparePassword,
+	dateTime,
+	compareDates,
 } from '@a-type/kysely';
 export { sql } from 'kysely';
 
-export function migrateToLatest() {
-  return migrateInternal(db, migrations);
+export async function migrateToLatest() {
+	console.debug(
+		'Checking for database migrations...',
+		new Date().toISOString(),
+	);
+	await migrateInternal(db, migrations);
+	console.debug('Database migrations complete', new Date().toISOString());
 }
 
 /** Selects the user name - prefers friendlyName, falls back to fullName */
 export const userNameSelector =
-  sql<string>`COALESCE(User.friendlyName, User.fullName)`.as('name');
+	sql<string>`COALESCE(User.friendlyName, User.fullName)`.as('name');
diff --git a/packages/error/src/index.ts b/packages/error/src/index.ts
index a58c3967..a055477e 100644
--- a/packages/error/src/index.ts
+++ b/packages/error/src/index.ts
@@ -1,59 +1,75 @@
 export enum BiscuitsErrorCode {
-  BadRequest = 4000,
-  UnrecognizedApp = 4001,
-  Unauthorized = 4010,
-  NotLoggedIn = 4011,
-  SessionExpired = 4012,
-  // requires re-login
-  SessionInvalid = 4013,
-  Forbidden = 4030,
-  NoPlan = 4031,
-  SubscriptionInactive = 4032,
-  PlanFull = 4033,
-  NotFound = 4040,
-  Conflict = 4090,
-  RateLimited = 4290,
-  Unexpected = 5000,
+	BadRequest = 4000,
+	UnrecognizedApp = 4001,
+	Unauthorized = 4010,
+	NotLoggedIn = 4011,
+	SessionExpired = 4012,
+	// requires re-login
+	SessionInvalid = 4013,
+	Forbidden = 4030,
+	NoPlan = 4031,
+	SubscriptionInactive = 4032,
+	PlanFull = 4033,
+	NotFound = 4040,
+	Conflict = 4090,
+	RateLimited = 4290,
+	Unexpected = 5000,
 }
 
 export class BiscuitsError extends Error {
-  static Code = BiscuitsErrorCode;
-
-  static readResponseBody(body: unknown) {
-    let parsed: any = body;
-    if (typeof body === 'string') {
-      parsed = JSON.parse(body);
-    }
-    if ('code' in parsed && 'message' in parsed) {
-      return new BiscuitsError(parsed.code, parsed.message);
-    }
-    return null;
-  }
-
-  static isInstance(err: unknown): err is BiscuitsError {
-    return (
-      err instanceof BiscuitsError || (err as any)?.isBiscuitsError === true
-    );
-  }
-
-  public code: BiscuitsErrorCode;
-  public message: string;
-  public readonly isBiscuitsError = true;
-
-  constructor(code: BiscuitsErrorCode, message?: string, cause?: unknown) {
-    super(message, {
-      cause,
-    });
-    this.name = 'BiscuitsError';
-    this.code = code;
-    this.message = message || `BiscuitsError: ${code}`;
-  }
-
-  get statusCode() {
-    return Math.floor(this.code / 10);
-  }
-
-  get body() {
-    return { code: this.code, message: this.message };
-  }
+	static Code = BiscuitsErrorCode;
+
+	static readResponse(response: Response) {
+		const code = response.headers.get('x-biscuits-error');
+		const message = response.headers.get('x-biscuits-message');
+		if (code && message) {
+			return new BiscuitsError(parseInt(code), message);
+		}
+		return null;
+	}
+
+	static readResponseBody(body: unknown) {
+		let parsed: any = body;
+		if (typeof body === 'string') {
+			parsed = JSON.parse(body);
+		}
+		if ('code' in parsed && 'message' in parsed) {
+			return new BiscuitsError(parsed.code, parsed.message);
+		}
+		return null;
+	}
+
+	static isInstance(err: unknown): err is BiscuitsError {
+		return (
+			err instanceof BiscuitsError || (err as any)?.isBiscuitsError === true
+		);
+	}
+
+	public code: BiscuitsErrorCode;
+	public message: string;
+	public readonly isBiscuitsError = true;
+
+	constructor(code: BiscuitsErrorCode, message?: string, cause?: unknown) {
+		super(message, {
+			cause,
+		});
+		this.name = 'BiscuitsError';
+		this.code = code;
+		this.message = message || `BiscuitsError: ${code}`;
+	}
+
+	get statusCode() {
+		return Math.floor(this.code / 10);
+	}
+
+	get body() {
+		return { code: this.code, message: this.message };
+	}
+
+	get headers() {
+		return {
+			'x-biscuits-error': this.code.toString(),
+			'x-biscuits-message': this.message,
+		};
+	}
 }
diff --git a/server/src/graphql/builder.ts b/server/src/graphql/builder.ts
index 50299285..ba5e7acf 100644
--- a/server/src/graphql/builder.ts
+++ b/server/src/graphql/builder.ts
@@ -4,213 +4,221 @@ import DataloaderPlugin from '@pothos/plugin-dataloader';
 import AuthPlugin from '@pothos/plugin-scope-auth';
 import { GQLContext } from './context.js';
 import {
-  ChangelogItem,
-  Food,
-  FoodCategory,
-  Plan,
-  PlanInvitation,
-  PublishedRecipe,
-  PublishedWishlist,
-  User,
-  WishlistPurchase,
+	ChangelogItem,
+	Food,
+	FoodCategory,
+	Plan,
+	PlanInvitation,
+	PublishedRecipe,
+	PublishedWishlist,
+	User,
+	WishlistPurchase,
 } from '@biscuits/db';
 import { LibraryInfo } from '@verdant-web/server';
 import { BiscuitsVerdantProfile } from '@biscuits/libraries';
 import { ExtractorData as GnocchiRecipeScan } from '@gnocchi.biscuits/scanning';
 import { BiscuitsError } from '@biscuits/error';
 import {
-  GeographicResult,
-  TemperatureUnit,
-  WeatherForecast,
-  WeatherForecastDay,
-  WeatherForecastInput,
+	GeographicResult,
+	TemperatureUnit,
+	WeatherForecast,
+	WeatherForecastDay,
+	WeatherForecastInput,
 } from '../services/weather.js';
 import {
-  AutocompleteSuggestion,
-  PlaceLocationDetails,
+	AutocompleteSuggestion,
+	PlaceLocationDetails,
 } from '../services/maps.js';
 import { ExtractorData as WishWashStorePageScan } from '@wish-wash.biscuits/scanning';
 import { AppId } from '@biscuits/apps';
 
 export const builder = new SchemaBuilder<{
-  Context: GQLContext;
-  Objects: {
-    User: User & { __typename: 'User' };
-    Plan: Plan & { __typename: 'Plan' };
-    PlanInvitation: PlanInvitation & { __typename: 'PlanInvitation' };
-    PlanLibraryInfo: LibraryInfo & { id: string };
-    PlanLibraryReplica: LibraryInfo['replicas'][number];
-    PlanLibraryReplicaProfile: BiscuitsVerdantProfile;
-    ClaimPlanInvitationResult: {
-      userId: string;
-      planId: string;
-    };
-    SetupPlanResult: {
-      userId: string;
-      planId: string;
-    };
-    StripeCheckoutData: {
-      subscriptionId: string;
-      clientSecret: string;
-    };
-    ProductInfo: {
-      lookupKey: string;
-    };
-    CancelPlanResult: {};
-    KickMemberResult: { planId: string };
-    CreatePlanInvitationResult: { planId: string; planInvitationId: string };
-    CancelPlanInvitationResult: { planId: string };
-    ResetSyncResult: { planId: string };
-    ChangelogItem: ChangelogItem & { __typename: 'ChangelogItem' };
-    SetUserPreferenceResult: { userId: string; key: string };
-    UserPreference: { userId: string; key: string; value: any };
+	Context: GQLContext;
+	Objects: {
+		User: User & { __typename: 'User' };
+		Plan: Plan & { __typename: 'Plan' };
+		PlanInvitation: PlanInvitation & { __typename: 'PlanInvitation' };
+		PlanLibraryInfo: LibraryInfo & { id: string };
+		PlanLibraryReplica: LibraryInfo['replicas'][number];
+		PlanLibraryReplicaProfile: BiscuitsVerdantProfile;
+		ClaimPlanInvitationResult: {
+			userId: string;
+			planId: string;
+		};
+		SetupPlanResult: {
+			userId: string;
+			planId: string;
+		};
+		StripeCheckoutData: {
+			subscriptionId: string;
+			clientSecret: string;
+		};
+		ProductInfo: {
+			lookupKey: string;
+		};
+		CancelPlanResult: {};
+		KickMemberResult: { planId: string };
+		CreatePlanInvitationResult: { planId: string; planInvitationId: string };
+		CancelPlanInvitationResult: { planId: string };
+		ResetSyncResult: { planId: string };
+		ChangelogItem: ChangelogItem & { __typename: 'ChangelogItem' };
+		SetUserPreferenceResult: { userId: string; key: string };
+		UserPreference: { userId: string; key: string; value: any };
 
-    // Gnocchi
-    Food: Food & { __typename: 'Food' };
-    FoodCategory: FoodCategory & { __typename: 'FoodCategory' };
-    AssignFoodCategoryResult: { foodId: string };
-    CreateCategoryResult: { categoryId: string };
-    UpdateCategoryResult: { categoryId: string };
-    DeleteCategoryResult: { categoryId: string };
-    RecipeScan: GnocchiRecipeScan;
-    RecipeScanResult: {
-      type: 'web';
-      data: GnocchiRecipeScan;
-    };
-    RecipeScanDetailedIngredient: NonNullable<
-      GnocchiRecipeScan['detailedIngredients']
-    >[number];
-    RecipeScanDetailedStep: NonNullable<
-      GnocchiRecipeScan['detailedSteps']
-    >[number];
-    PublishedRecipe: PublishedRecipe & { __typename: 'PublishedRecipe' };
+		// Gnocchi
+		Food: Food & { __typename: 'Food' };
+		FoodCategory: FoodCategory & { __typename: 'FoodCategory' };
+		AssignFoodCategoryResult: { foodId: string };
+		CreateCategoryResult: { categoryId: string };
+		UpdateCategoryResult: { categoryId: string };
+		DeleteCategoryResult: { categoryId: string };
+		RecipeScan: GnocchiRecipeScan;
+		RecipeScanResult: {
+			type: 'web';
+			data: GnocchiRecipeScan;
+		};
+		RecipeScanDetailedIngredient: NonNullable<
+			GnocchiRecipeScan['detailedIngredients']
+		>[number];
+		RecipeScanDetailedStep: NonNullable<
+			GnocchiRecipeScan['detailedSteps']
+		>[number];
+		PublishedRecipe: PublishedRecipe & { __typename: 'PublishedRecipe' };
 
-    // WishWash
-    PublishedWishlist: PublishedWishlist & { __typename: 'PublishedWishlist' };
-    StorePageScan: WishWashStorePageScan & { __typename: 'StorePageScan' };
-    WishlistPurchase: WishlistPurchase & { __typename: 'WishlistPurchase' };
+		// WishWash
+		PublishedWishlist: PublishedWishlist & { __typename: 'PublishedWishlist' };
+		StorePageScan: WishWashStorePageScan & { __typename: 'StorePageScan' };
+		WishlistPurchase: WishlistPurchase & { __typename: 'WishlistPurchase' };
 
-    // Common Utils
-    WeatherForecast: WeatherForecast;
-    WeatherForecastDay: WeatherForecastDay;
-    GeographicResult: PlaceLocationDetails;
-    LocationAutocompleteSuggestion: AutocompleteSuggestion;
-  };
-  AuthScopes: {
-    public: boolean;
-    user: boolean;
-    planAdmin: boolean;
-    productAdmin: boolean;
-    member: boolean;
-    app: AppId;
-  };
-  Scalars: {
-    DateTime: {
-      Input: Date;
-      Output: Date;
-    };
-    Date: {
-      Input: string;
-      Output: string;
-    };
-    JSON: {
-      Input: unknown;
-      Output: unknown;
-    };
-    ID: {
-      Input: string;
-      Output: string;
-    };
-  };
-  Inputs: {
-    SetupPlanInput: {
-      priceLookupKey: string;
-    };
-    CreatePlanInvitationInput: {
-      email: string;
-    };
-    CreatePushSubscriptionInput: {
-      endpoint: string;
-      p256dh: string;
-      auth: string;
-      appId: string;
-    };
-    CreateChangelogItemInput: {
-      title: string;
-      details: string;
-      imageUrl?: string | null;
-      important?: boolean | null;
-      appId: string;
-    };
-    SetUserPreferenceInput: {
-      key: string;
-      value: any;
-    };
-    UpdateUserInfoInput: { name?: string | null };
+		// Common Utils
+		WeatherForecast: WeatherForecast;
+		WeatherForecastDay: WeatherForecastDay;
+		GeographicResult: PlaceLocationDetails;
+		LocationAutocompleteSuggestion: AutocompleteSuggestion;
+	};
+	AuthScopes: {
+		public: boolean;
+		user: boolean;
+		planAdmin: boolean;
+		productAdmin: boolean;
+		member: boolean;
+		app: AppId;
+	};
+	Scalars: {
+		DateTime: {
+			Input: Date;
+			Output: Date;
+		};
+		Date: {
+			Input: string;
+			Output: string;
+		};
+		JSON: {
+			Input: unknown;
+			Output: unknown;
+		};
+		ID: {
+			Input: string;
+			Output: string;
+		};
+	};
+	Inputs: {
+		SetupPlanInput: {
+			priceLookupKey: string;
+		};
+		CreatePlanInvitationInput: {
+			email: string;
+		};
+		CreatePushSubscriptionInput: {
+			endpoint: string;
+			p256dh: string;
+			auth: string;
+			appId: string;
+		};
+		CreateChangelogItemInput: {
+			title: string;
+			details: string;
+			imageUrl?: string | null;
+			important?: boolean | null;
+			appId: string;
+		};
+		SetUserPreferenceInput: {
+			key: string;
+			value: any;
+		};
+		UpdateUserInfoInput: { name?: string | null };
 
-    // Gnocchi
-    AssignFoodCategoryInput: {
-      foodName: string;
-      categoryId: string | number;
-    };
-    CreateCategoryInput: {
-      name: string;
-      sortKey: string;
-    };
-    UpdateCategoryInput: {
-      id: string | number;
-      name: string | null;
-      sortKey: string | null;
-    };
-    RecipeScanInput: {
-      url: string;
-    };
-    PublishRecipeInput: {
-      id: string;
-      slug: string;
-    };
+		// Gnocchi
+		AssignFoodCategoryInput: {
+			foodName: string;
+			categoryId: string | number;
+		};
+		CreateCategoryInput: {
+			name: string;
+			sortKey: string;
+		};
+		UpdateCategoryInput: {
+			id: string | number;
+			name: string | null;
+			sortKey: string | null;
+		};
+		RecipeScanInput: {
+			url: string;
+		};
+		PublishRecipeInput: {
+			id: string;
+			slug: string;
+		};
 
-    // WishWash
-    PublishWishlistInput: {
-      id: string;
-    };
-    StorePageScanInput: {
-      url: string;
-    };
-    PurchasePublicItemInput: {
-      wishlistSlug: string;
-      itemId: string;
-      name: string;
-      quantity: number;
-    };
+		// WishWash
+		PublishWishlistInput: {
+			id: string;
+		};
+		StorePageScanInput: {
+			url: string;
+		};
+		PurchasePublicItemInput: {
+			wishlistSlug: string;
+			itemId: string;
+			name: string;
+			quantity: number;
+		};
 
-    // Common Utils
-    WeatherForecastInput: WeatherForecastInput;
-  };
-  DefaultEdgesNullability: false;
+		// Common Utils
+		WeatherForecastInput: WeatherForecastInput;
+	};
+	DefaultEdgesNullability: false;
 }>({
-  plugins: [RelayPlugin, DataloaderPlugin, AuthPlugin],
-  relayOptions: {
-    edgesFieldOptions: {
-      nullable: false,
-    },
-  },
-  authScopes: async (context) => {
-    const member = !!context.session?.planId;
-    return {
-      public: true,
-      user: !!context.session,
-      member,
-      planAdmin: context.session?.role === 'admin',
-      productAdmin: !!context.session?.isProductAdmin,
-      app: (appId) =>
-        member &&
-        (!context.session?.allowedApp || context.session.allowedApp === appId),
-    };
-  },
-  scopeAuthOptions: {
-    unauthorizedError: (_, ctx, info, result) => {
-      return new BiscuitsError(BiscuitsError.Code.Forbidden);
-    },
-  },
+	plugins: [RelayPlugin, DataloaderPlugin, AuthPlugin],
+	relayOptions: {
+		edgesFieldOptions: {
+			nullable: false,
+		},
+	},
+	authScopes: async (context) => {
+		const member = !!context.session?.planId;
+		return {
+			public: true,
+			user: !!context.session,
+			member,
+			planAdmin: context.session?.role === 'admin',
+			productAdmin: !!context.session?.isProductAdmin,
+			app: (appId) => {
+				return (
+					member &&
+					(!context.session?.allowedApp ||
+						context.session.allowedApp === '*' ||
+						context.session.allowedApp === appId)
+				);
+			},
+		};
+	},
+	scopeAuthOptions: {
+		unauthorizedError: (_, ctx, info, result) => {
+			return new BiscuitsError(
+				BiscuitsError.Code.Forbidden,
+				'You do not have access to this feature',
+			);
+		},
+	},
 });
diff --git a/server/src/graphql/types/wishWash/hub.ts b/server/src/graphql/types/wishWash/hub.ts
index 6c1d40df..0d9cccf4 100644
--- a/server/src/graphql/types/wishWash/hub.ts
+++ b/server/src/graphql/types/wishWash/hub.ts
@@ -5,132 +5,132 @@ import { assignTypeName, hasTypeName } from '../../relay.js';
 import cuid from '@paralleldrive/cuid2';
 
 builder.queryFields((t) => ({
-  publishedWishlist: t.field({
-    type: 'PublishedWishlist',
-    authScopes: {
-      app: 'wish-wash',
-    },
-    nullable: true,
-    args: {
-      id: t.arg.id({
-        required: true,
-      }),
-    },
-    resolve: async (_, { id }, ctx) => {
-      const planId = ctx.session?.planId;
-      if (!planId) {
-        throw new BiscuitsError(
-          BiscuitsError.Code.Forbidden,
-          'You must be a member to view a published wishlist',
-        );
-      }
+	publishedWishlist: t.field({
+		type: 'PublishedWishlist',
+		authScopes: {
+			app: 'wish-wash',
+		},
+		nullable: true,
+		args: {
+			id: t.arg.id({
+				required: true,
+			}),
+		},
+		resolve: async (_, { id }, ctx) => {
+			const planId = ctx.session?.planId;
+			if (!planId) {
+				throw new BiscuitsError(
+					BiscuitsError.Code.Forbidden,
+					'You must be a member to view a published wishlist',
+				);
+			}
 
-      const publishedWishlist = await ctx.db
-        .selectFrom('PublishedWishlist')
-        .selectAll()
-        .where('id', '=', id)
-        .where('planId', '=', planId)
-        .executeTakeFirst();
+			const publishedWishlist = await ctx.db
+				.selectFrom('PublishedWishlist')
+				.selectAll()
+				.where('id', '=', id)
+				.where('planId', '=', planId)
+				.executeTakeFirst();
 
-      if (!publishedWishlist) return null;
+			if (!publishedWishlist) return null;
 
-      return assignTypeName('PublishedWishlist')(publishedWishlist);
-    },
-  }),
+			return assignTypeName('PublishedWishlist')(publishedWishlist);
+		},
+	}),
 }));
 
 builder.mutationFields((t) => ({
-  publishWishlist: t.field({
-    type: 'PublishedWishlist',
-    authScopes: {
-      member: true,
-    },
-    args: {
-      input: t.arg({
-        type: 'PublishWishlistInput',
-        required: true,
-      }),
-    },
-    resolve: async (_, { input }, ctx) => {
-      const { id } = input;
-      const planId = ctx.session?.planId;
-      const userId = ctx.session?.userId;
-      const slug = cuid.createId();
-      if (!planId || !userId) {
-        throw new BiscuitsError(
-          BiscuitsError.Code.Forbidden,
-          'You must be a member to publish a wishlist',
-        );
-      }
+	publishWishlist: t.field({
+		type: 'PublishedWishlist',
+		authScopes: {
+			member: true,
+		},
+		args: {
+			input: t.arg({
+				type: 'PublishWishlistInput',
+				required: true,
+			}),
+		},
+		resolve: async (_, { input }, ctx) => {
+			const { id } = input;
+			const planId = ctx.session?.planId;
+			const userId = ctx.session?.userId;
+			const slug = cuid.createId();
+			if (!planId || !userId) {
+				throw new BiscuitsError(
+					BiscuitsError.Code.Forbidden,
+					'You must be a member to publish a wishlist',
+				);
+			}
 
-      const wishlist = await ctx.db
-        .insertInto('PublishedWishlist')
-        .values({
-          id,
-          planId,
-          slug,
-          publishedAt: new Date(),
-          publishedBy: userId,
-        })
-        .returningAll()
-        .executeTakeFirstOrThrow();
+			const wishlist = await ctx.db
+				.insertInto('PublishedWishlist')
+				.values({
+					id,
+					planId,
+					slug,
+					publishedAt: new Date(),
+					publishedBy: userId,
+				})
+				.returningAll()
+				.executeTakeFirstOrThrow();
 
-      return assignTypeName('PublishedWishlist')(wishlist);
-    },
-  }),
+			return assignTypeName('PublishedWishlist')(wishlist);
+		},
+	}),
 
-  unpublishWishlist: t.field({
-    type: 'ID',
-    authScopes: {
-      member: true,
-    },
-    args: {
-      wishlistId: t.arg.id({
-        required: true,
-      }),
-    },
-    resolve: async (_, { wishlistId }, ctx) => {
-      const planId = ctx.session?.planId;
-      if (!planId) {
-        throw new BiscuitsError(
-          BiscuitsError.Code.Forbidden,
-          'You must be a member to unpublish a wishlist',
-        );
-      }
+	unpublishWishlist: t.field({
+		type: 'ID',
+		authScopes: {
+			member: true,
+		},
+		args: {
+			wishlistId: t.arg.id({
+				required: true,
+			}),
+		},
+		resolve: async (_, { wishlistId }, ctx) => {
+			const planId = ctx.session?.planId;
+			if (!planId) {
+				throw new BiscuitsError(
+					BiscuitsError.Code.Forbidden,
+					'You must be a member to unpublish a wishlist',
+				);
+			}
 
-      await ctx.db
-        .deleteFrom('PublishedWishlist')
-        .where('id', '=', wishlistId)
-        .where('planId', '=', planId)
-        .execute();
+			await ctx.db
+				.deleteFrom('PublishedWishlist')
+				.where('id', '=', wishlistId)
+				.where('planId', '=', planId)
+				.execute();
 
-      return wishlistId;
-    },
-  }),
+			return wishlistId;
+		},
+	}),
 }));
 
 builder.objectType('PublishedWishlist', {
-  description: 'A published wishlist',
+	description: 'A published wishlist',
 
-  isTypeOf: hasTypeName('PublishedWishlist'),
-  fields: (t) => ({
-    id: t.exposeID('id'),
-    publishedAt: t.expose('publishedAt', {
-      type: 'DateTime',
-    }),
-    url: t.string({
-      resolve: (source, _, ctx) => {
-        return WISH_WASH_HUB_ORIGIN + `/${source.slug}`;
-      },
-    }),
-  }),
+	isTypeOf: hasTypeName('PublishedWishlist'),
+	fields: (t) => ({
+		id: t.exposeID('id'),
+		publishedAt: t.expose('publishedAt', {
+			type: 'DateTime',
+		}),
+		url: t.string({
+			resolve: (source, _, ctx) => {
+				return WISH_WASH_HUB_ORIGIN + `/${source.slug}`;
+			},
+		}),
+	}),
 });
 
 builder.inputType('PublishWishlistInput', {
-  fields: (t) => ({
-    id: t.id({
-      description: 'The ID of the wishlist to publish',
-      required: true,
-    }),
-  }),
+	fields: (t) => ({
+		id: t.id({
+			description: 'The ID of the wishlist to publish',
+			required: true,
+		}),
+	}),
 });
diff --git a/server/src/routers/gnocchi.ts b/server/src/routers/gnocchi.ts
index ef921a7f..f3c0910e 100644
--- a/server/src/routers/gnocchi.ts
+++ b/server/src/routers/gnocchi.ts
@@ -1,90 +1,92 @@
 import { Router } from 'itty-router';
 import * as path from 'path';
 import * as fsSync from 'fs';
-import { serverRender, type HubRecipeData } from '@gnocchi.biscuits/hub';
+import { type HubRecipeData } from '@gnocchi.biscuits/hub';
 import { verdantServer } from '../verdant/verdant.js';
 import { getLibraryName } from '@biscuits/libraries';
 import { db } from '@biscuits/db';
 import { renderTemplate, staticFile } from '../common/hubs.js';
 
 export const gnocchiRouter = Router({
-  base: '/gnocchi',
+	base: '/gnocchi',
 });
 
 const hubPath = path.join(
-  process.cwd(),
-  '..',
-  'apps',
-  'gnocchi',
-  'hub',
-  'dist',
+	process.cwd(),
+	'..',
+	'apps',
+	'gnocchi',
+	'hub',
+	'dist',
 );
 const hubClientPath = path.join(hubPath, 'client');
 
 const indexTemplate = fsSync.readFileSync(
-  path.join(hubClientPath, 'index.html'),
-  'utf8',
+	path.join(hubClientPath, 'index.html'),
+	'utf8',
 );
 
 gnocchiRouter.get('/hubRecipe/assets/*', (req) =>
-  staticFile(hubClientPath, 'gnocchi/hubRecipe', req),
+	staticFile(hubClientPath, 'gnocchi/hubRecipe', req),
 );
 
 gnocchiRouter.get('/hubRecipe/:planId/:recipeSlug', async (req) => {
-  const { planId, recipeSlug } = req.params;
+	const { planId, recipeSlug } = req.params;
 
-  const recipe = await db
-    .selectFrom('PublishedRecipe')
-    .leftJoin('User', 'PublishedRecipe.publishedBy', 'User.id')
-    .select([
-      'PublishedRecipe.id',
-      'User.fullName as publisherFullName',
-      'PublishedRecipe.publishedBy',
-    ])
-    .where('slug', '=', recipeSlug)
-    .where('PublishedRecipe.planId', '=', planId)
-    .executeTakeFirst();
+	const recipe = await db
+		.selectFrom('PublishedRecipe')
+		.leftJoin('User', 'PublishedRecipe.publishedBy', 'User.id')
+		.select([
+			'PublishedRecipe.id',
+			'User.fullName as publisherFullName',
+			'PublishedRecipe.publishedBy',
+		])
+		.where('slug', '=', recipeSlug)
+		.where('PublishedRecipe.planId', '=', planId)
+		.executeTakeFirst();
 
-  if (!recipe) {
-    return new Response('Recipe not found', { status: 404 });
-  }
+	if (!recipe) {
+		return new Response('Recipe not found', { status: 404 });
+	}
 
-  const snapshot = await verdantServer.getDocumentSnapshot(
-    getLibraryName({
-      planId,
-      app: 'gnocchi',
-      access: 'members',
-      userId: recipe.publishedBy,
-    }),
-    'recipes',
-    recipe.id,
-  );
+	const snapshot = await verdantServer.getDocumentSnapshot(
+		getLibraryName({
+			planId,
+			app: 'gnocchi',
+			access: 'members',
+			userId: recipe.publishedBy,
+		}),
+		'recipes',
+		recipe.id,
+	);
 
-  if (!snapshot) {
-    return new Response('Recipe not found', { status: 404 });
-  }
+	if (!snapshot) {
+		return new Response('Recipe not found', { status: 404 });
+	}
 
-  const data: HubRecipeData = {
-    id: recipe.id,
-    title: snapshot.title,
-    prelude: snapshot.prelude,
-    mainImageUrl: snapshot.mainImage?.url,
-    ingredients: snapshot.ingredients,
-    instructions: snapshot.instructions,
-    note: snapshot.note,
-    prepTimeMinutes: snapshot.prepTimeMinutes,
-    cookTimeMinutes: snapshot.cookTimeMinutes,
-    totalTimeMinutes: snapshot.totalTimeMinutes,
-    servings: snapshot.servings,
-    publisher: {
-      fullName: recipe.publisherFullName ?? 'Anonymous',
-    },
-  };
+	const data: HubRecipeData = {
+		id: recipe.id,
+		title: snapshot.title,
+		prelude: snapshot.prelude,
+		mainImageUrl: snapshot.mainImage?.url,
+		ingredients: snapshot.ingredients,
+		instructions: snapshot.instructions,
+		note: snapshot.note,
+		prepTimeMinutes: snapshot.prepTimeMinutes,
+		cookTimeMinutes: snapshot.cookTimeMinutes,
+		totalTimeMinutes: snapshot.totalTimeMinutes,
+		servings: snapshot.servings,
+		publisher: {
+			fullName: recipe.publisherFullName ?? 'Anonymous',
+		},
+	};
 
-  const appHtml = serverRender(data, req.url);
-  return renderTemplate(indexTemplate, appHtml, data);
+	const { serverRender } = await import('@gnocchi.biscuits/hub');
+
+	const appHtml = serverRender(data, req.url);
+	return renderTemplate(indexTemplate, appHtml, data);
 });
 
 gnocchiRouter.get('/hubRecipe/*', (req) =>
-  staticFile(hubClientPath, 'gnocchi/hubRecipe', req),
+	staticFile(hubClientPath, 'gnocchi/hubRecipe', req),
 );
diff --git a/server/src/routers/graphql.ts b/server/src/routers/graphql.ts
index a9cc57dd..5182e4aa 100644
--- a/server/src/routers/graphql.ts
+++ b/server/src/routers/graphql.ts
@@ -14,120 +14,121 @@ import { AuthError } from '@a-type/auth';
 import { createDataloaders } from '../graphql/dataloaders/index.js';
 
 function applyHeaders(): Plugin<{}, GQLContext> {
-  return {
-    onResponse: (payload) => {
-      if (payload.serverContext) {
-        payload.serverContext.auth.applyHeaders.forEach((value, key) => {
-          payload.response.headers.append(key, value);
-        });
-      }
-    },
-  };
+	return {
+		onResponse: (payload) => {
+			if (payload.serverContext) {
+				payload.serverContext.auth.applyHeaders.forEach((value, key) => {
+					payload.response.headers.append(key, value);
+				});
+			}
+		},
+	};
 }
 
 const yoga = createYoga<GQLContext>({
-  schema,
-  graphiql: true,
-  maskedErrors: {
-    maskError: (error, message, isDev) => {
-      const originalError =
-        'originalError' in (error as any)
-          ? (error as any).originalError
-          : error;
-      if (BiscuitsError.isInstance(originalError)) {
-        // log more details for server errors
-        if (originalError.statusCode >= 500) {
-          console.error(`[Internal Error]`, error);
-        } else {
-          console.debug(`[Validation Error]`, originalError.message);
-        }
-        return new GraphQLError(originalError.message, {
-          extensions: {
-            unexpected: originalError.code === BiscuitsError.Code.Unexpected,
-            biscuitsCode: originalError.code,
-          },
-        });
-      } else {
-        console.error(`[GraphQL Error]`, error);
-      }
-      return maskError(error, message, isDev);
-    },
-  },
-  plugins: [
-    applyHeaders(),
-    useCSRFPrevention({
-      requestHeaders: ['x-csrf-token'],
-    }),
-  ],
-  fetchAPI: {
-    Response: Response,
-    Request: Request,
-    Blob: Blob,
-    ReadableStream: ReadableStream,
-    fetch: fetch,
-    Headers: Headers,
-    FormData: FormData,
-    TextDecoder: TextDecoder,
-    TextEncoder: TextEncoder,
-    TransformStream: TransformStream,
-    URLSearchParams: URLSearchParams,
-    WritableStream: WritableStream,
-    URLPattern: URLPattern,
-    URL: URL,
-  },
+	schema,
+	graphiql: true,
+	maskedErrors: {
+		maskError: (error, message, isDev) => {
+			const originalError =
+				'originalError' in (error as any) ?
+					(error as any).originalError
+				:	error;
+			if (BiscuitsError.isInstance(originalError)) {
+				// log more details for server errors
+				if (originalError.statusCode >= 500) {
+					console.error(`[Internal Error]`, error);
+				} else {
+					// no need to log these I think.
+					// console.debug(`[Validation Error]`, originalError.message);
+				}
+				return new GraphQLError(originalError.message, {
+					extensions: {
+						unexpected: originalError.code === BiscuitsError.Code.Unexpected,
+						biscuitsCode: originalError.code,
+					},
+				});
+			} else {
+				console.error(`[GraphQL Error]`, error);
+			}
+			return maskError(error, message, isDev);
+		},
+	},
+	plugins: [
+		applyHeaders(),
+		useCSRFPrevention({
+			requestHeaders: ['x-csrf-token'],
+		}),
+	],
+	fetchAPI: {
+		Response: Response,
+		Request: Request,
+		Blob: Blob,
+		ReadableStream: ReadableStream,
+		fetch: fetch,
+		Headers: Headers,
+		FormData: FormData,
+		TextDecoder: TextDecoder,
+		TextEncoder: TextEncoder,
+		TransformStream: TransformStream,
+		URLSearchParams: URLSearchParams,
+		WritableStream: WritableStream,
+		URLPattern: URLPattern,
+		URL: URL,
+	},
 });
 
 export const graphqlRouter = Router({
-  base: '/graphql',
+	base: '/graphql',
 });
 
 graphqlRouter.all('/', handleGraphQLRequest);
 
 async function handleGraphQLRequest(request: Request) {
-  const auth = {
-    applyHeaders: new Headers(),
-    setLoginSession: async (ses: Session | null) => {
-      if (ses) {
-        const { headers } = await sessions.updateSession(ses);
-        auth.applyHeaders = new Headers(headers);
-      } else {
-        const { headers } = sessions.clearSession();
-        auth.applyHeaders = new Headers(headers);
-      }
-      // also update immediately in the context, so that
-      // resolvers on return values can see the new session
-      ctx.session = ses;
-    },
-  };
-  let session = null;
-  try {
-    session = await sessions.getSession(request);
-  } catch (e) {
-    // if session expired, we need to tell the client to refresh it
-    if (e instanceof AuthError) {
-      if (e.message === 'Session expired') {
-        throw new BiscuitsError(
-          BiscuitsError.Code.SessionExpired,
-          'Session expired',
-        );
-      }
-    }
-    throw e;
-  }
+	const auth = {
+		applyHeaders: new Headers(),
+		setLoginSession: async (ses: Session | null) => {
+			if (ses) {
+				const { headers } = await sessions.updateSession(ses);
+				auth.applyHeaders = new Headers(headers);
+			} else {
+				const { headers } = sessions.clearSession();
+				auth.applyHeaders = new Headers(headers);
+			}
+			// also update immediately in the context, so that
+			// resolvers on return values can see the new session
+			ctx.session = ses;
+		},
+	};
+	let session = null;
+	try {
+		session = await sessions.getSession(request);
+	} catch (e) {
+		// if session expired, we need to tell the client to refresh it
+		if (e instanceof AuthError) {
+			if (e.message === 'Session expired') {
+				throw new BiscuitsError(
+					BiscuitsError.Code.SessionExpired,
+					'Session expired',
+				);
+			}
+		}
+		throw e;
+	}
 
-  const ctx: GQLContext = {
-    req: request,
-    session,
-    db,
-    auth,
-    verdant: verdantServer,
-    stripe,
-    dataloaders: createDataloaders({
-      stripe,
-      db,
-    }),
-  };
+	const ctx: GQLContext = {
+		req: request,
+		session,
+		db,
+		auth,
+		verdant: verdantServer,
+		stripe,
+		dataloaders: createDataloaders({
+			stripe,
+			db,
+		}),
+	};
 
-  const yogaResponse = await yoga.handle(request, ctx);
-  return yogaResponse;
+	const yogaResponse = await yoga.handle(request, ctx);
+	return yogaResponse;
 }
diff --git a/server/src/routers/wishWash.ts b/server/src/routers/wishWash.ts
index b01f3590..44873f34 100644
--- a/server/src/routers/wishWash.ts
+++ b/server/src/routers/wishWash.ts
@@ -1,124 +1,125 @@
 import { Router } from 'itty-router';
 import * as path from 'path';
 import * as fsSync from 'fs';
-import { serverRender, type HubWishlistData } from '@wish-wash.biscuits/hub';
+import { type HubWishlistData } from '@wish-wash.biscuits/hub';
 import { verdantServer } from '../verdant/verdant.js';
 import { getLibraryName } from '@biscuits/libraries';
 import { db } from '@biscuits/db';
 import { renderTemplate, staticFile } from '../common/hubs.js';
-import { ListSnapshot as WishlistSnapshot } from '@wish-wash.biscuits/verdant';
+import type { ListSnapshot as WishlistSnapshot } from '@wish-wash.biscuits/verdant';
 import { sessions } from '../auth/session.js';
 import { Session } from '@a-type/auth';
 
 export const wishWashRouter = Router({
-  base: '/wishWash',
+	base: '/wishWash',
 });
 
 const hubPath = path.join(
-  process.cwd(),
-  '..',
-  'apps',
-  'wish-wash',
-  'hub',
-  'dist',
+	process.cwd(),
+	'..',
+	'apps',
+	'wish-wash',
+	'hub',
+	'dist',
 );
 const hubClientPath = path.join(hubPath, 'client');
 
 const indexTemplate = fsSync.readFileSync(
-  path.join(hubClientPath, 'index.html'),
-  'utf8',
+	path.join(hubClientPath, 'index.html'),
+	'utf8',
 );
 
 wishWashRouter.get('/hubList/assets/*', (req) =>
-  staticFile(hubClientPath, 'wishWash/hubList', req),
+	staticFile(hubClientPath, 'wishWash/hubList', req),
 );
 
 wishWashRouter.get('/hubList/favicon.ico', (req) =>
-  staticFile(hubClientPath, 'wishWash/hubList', req),
+	staticFile(hubClientPath, 'wishWash/hubList', req),
 );
 
 function itemImageUrls(item: WishlistSnapshot['items'][number]) {
-  const imageUrls = item.imageFiles
-    .map((f) => f.url)
-    .filter((url): url is string => !!url);
-  if (item.remoteImageUrl) {
-    imageUrls.push(item.remoteImageUrl);
-  }
-  return imageUrls;
+	const imageUrls = item.imageFiles
+		.map((f) => f.url)
+		.filter((url): url is string => !!url);
+	if (item.remoteImageUrl) {
+		imageUrls.push(item.remoteImageUrl);
+	}
+	return imageUrls;
 }
 
 wishWashRouter.get('/hubList/:listSlug', async (req) => {
-  const { listSlug } = req.params;
-  // parse slug out of fragment
-  const slug = listSlug.split('-').slice(-1)[0];
+	const { listSlug } = req.params;
+	// parse slug out of fragment
+	const slug = listSlug.split('-').slice(-1)[0];
 
-  const wishList = await db
-    .selectFrom('PublishedWishlist')
-    .leftJoin('User', 'PublishedWishlist.publishedBy', 'User.id')
-    .select([
-      'PublishedWishlist.id',
-      'User.fullName as publisherFullName',
-      'PublishedWishlist.planId',
-      'PublishedWishlist.publishedBy',
-      'PublishedWishlist.slug',
-    ])
-    .where('slug', '=', slug)
-    .executeTakeFirst();
+	const wishList = await db
+		.selectFrom('PublishedWishlist')
+		.leftJoin('User', 'PublishedWishlist.publishedBy', 'User.id')
+		.select([
+			'PublishedWishlist.id',
+			'User.fullName as publisherFullName',
+			'PublishedWishlist.planId',
+			'PublishedWishlist.publishedBy',
+			'PublishedWishlist.slug',
+		])
+		.where('slug', '=', slug)
+		.executeTakeFirst();
 
-  if (!wishList) {
-    return new Response('Wishlist not found', { status: 404 });
-  }
+	if (!wishList) {
+		return new Response('Wishlist not found', { status: 404 });
+	}
 
-  const snapshot = (await verdantServer.getDocumentSnapshot(
-    getLibraryName({
-      planId: wishList.planId,
-      app: 'wish-wash',
-      access: 'members',
-      userId: wishList.publishedBy,
-    }),
-    'lists',
-    wishList.id,
-  )) as WishlistSnapshot;
+	const snapshot = (await verdantServer.getDocumentSnapshot(
+		getLibraryName({
+			planId: wishList.planId,
+			app: 'wish-wash',
+			access: 'members',
+			userId: wishList.publishedBy,
+		}),
+		'lists',
+		wishList.id,
+	)) as WishlistSnapshot;
 
-  if (!snapshot) {
-    return new Response('Wishlist not found', { status: 404 });
-  }
+	if (!snapshot) {
+		return new Response('Wishlist not found', { status: 404 });
+	}
 
-  let session: Session | null = null;
-  try {
-    session = await sessions.getSession(req);
-  } catch (err) {
-    // that's fine
-  }
-  // is this the user's list?
-  const isUsersList = session?.userId === wishList.publishedBy;
+	let session: Session | null = null;
+	try {
+		session = await sessions.getSession(req);
+	} catch (err) {
+		// that's fine
+	}
+	// is this the user's list?
+	const isUsersList = session?.userId === wishList.publishedBy;
 
-  const data: HubWishlistData = {
-    id: wishList.id,
-    title: snapshot.name,
-    slug: wishList.slug,
-    hidePurchases: isUsersList,
-    // mapping manually here to avoid leaking unintended data.
-    items: snapshot.items.map((item) => ({
-      id: item.id,
-      description: item.description,
-      count: item.count,
-      purchasedCount: item.purchasedCount,
-      links: item.links,
-      prioritized: item.prioritized,
-      imageUrls: itemImageUrls(item),
-      createdAt: item.createdAt,
-      note: item.note,
-      priceMin: item.priceMin ?? null,
-      priceMax: item.priceMax ?? null,
-      type: item.type,
-    })),
-  };
+	const data: HubWishlistData = {
+		id: wishList.id,
+		title: snapshot.name,
+		slug: wishList.slug,
+		hidePurchases: isUsersList,
+		// mapping manually here to avoid leaking unintended data.
+		items: snapshot.items.map((item) => ({
+			id: item.id,
+			description: item.description,
+			count: item.count,
+			purchasedCount: item.purchasedCount,
+			links: item.links,
+			prioritized: item.prioritized,
+			imageUrls: itemImageUrls(item),
+			createdAt: item.createdAt,
+			note: item.note,
+			priceMin: item.priceMin ?? null,
+			priceMax: item.priceMax ?? null,
+			type: item.type,
+		})),
+	};
 
-  const appHtml = serverRender(data);
-  return renderTemplate(indexTemplate, appHtml, data);
+	const { serverRender } = await import('@wish-wash.biscuits/hub');
+	const appHtml = serverRender(data);
+	return renderTemplate(indexTemplate, appHtml, data);
 });
 
 wishWashRouter.get('/hubList/*', (req) =>
-  staticFile(hubClientPath, 'wishWash/hubList', req),
+	staticFile(hubClientPath, 'wishWash/hubList', req),
 );
diff --git a/server/src/server.ts b/server/src/server.ts
index 3d26f456..399564d9 100644
--- a/server/src/server.ts
+++ b/server/src/server.ts
@@ -13,7 +13,6 @@ import { stripeRouter } from './routers/stripe.js';
 import { graphqlRouter } from './routers/graphql.js';
 import { writeSchema } from './tasks/writeSchema.js';
 import { AuthError } from '@a-type/auth';
-import { killPortProcess } from 'kill-port-process';
 import { gnocchiRouter } from './routers/gnocchi.js';
 import { rateLimit } from './rateLimiter.js';
 import { wishWashRouter } from './routers/wishWash.js';
@@ -21,65 +20,64 @@ import { wishWashRouter } from './routers/wishWash.js';
 console.log('Starting server...', new Date().toISOString());
 
 const { preflight, corsify } = cors({
-  origin: ALLOWED_ORIGINS,
-  credentials: true,
+	origin: ALLOWED_ORIGINS,
+	credentials: true,
 });
 
 const router = AutoRouter({
-  before: [preflight],
-  finally: [corsify],
-  catch: (reason) => {
-    // translate any errant AuthError expired into the biscuits version
-    if (reason instanceof AuthError) {
-      if (reason.message === 'Session expired') {
-        const biscuitsExpired = new BiscuitsError(
-          BiscuitsError.Code.SessionExpired,
-        );
-        return error(biscuitsExpired.statusCode, biscuitsExpired.body);
-      } else if (reason.statusCode === 409) {
-        const biscuitsError = new BiscuitsError(
-          BiscuitsError.Code.Conflict,
-          'You have an account with a different login method. Try logging in with a different method.',
-        );
-        return error(biscuitsError.statusCode, biscuitsError.body);
-      } else if (reason.statusCode === 401) {
-        // TODO: redirect to login?
-        const biscuitsError = new BiscuitsError(
-          BiscuitsError.Code.Unauthorized,
-          'Unauthorized',
-        );
-        return error(biscuitsError.statusCode, biscuitsError.body);
-      }
-    }
-    if (reason instanceof BiscuitsError) {
-      if (reason.code >= BiscuitsError.Code.Unexpected) {
-        console.error(reason);
-      }
-      return error(reason.statusCode, reason.body);
-    }
-    console.error(reason);
-    return error(500, 'Internal Server Error');
-  },
+	before: [preflight],
+	finally: [corsify],
+	catch: (reason) => {
+		// translate any errant AuthError expired into the biscuits version
+		if (reason instanceof AuthError) {
+			if (reason.message === 'Session expired') {
+				const biscuitsExpired = new BiscuitsError(
+					BiscuitsError.Code.SessionExpired,
+				);
+				return error(biscuitsExpired.statusCode, biscuitsExpired.body);
+			} else if (reason.statusCode === 409) {
+				const biscuitsError = new BiscuitsError(
+					BiscuitsError.Code.Conflict,
+					'You have an account with a different login method. Try logging in with a different method.',
+				);
+				return error(biscuitsError.statusCode, biscuitsError.body);
+			} else if (reason.statusCode === 401) {
+				// TODO: redirect to login?
+				const biscuitsError = new BiscuitsError(
+					BiscuitsError.Code.Unauthorized,
+					'Unauthorized',
+				);
+				return error(biscuitsError.statusCode, biscuitsError.body);
+			}
+		}
+		if (reason instanceof BiscuitsError) {
+			if (reason.code >= BiscuitsError.Code.Unexpected) {
+				console.error(reason);
+			}
+			return error(reason.statusCode, reason.body);
+		}
+		console.error(reason);
+		return error(500, 'Internal Server Error');
+	},
 });
 
 const logger = (req: IRequest) => {
-  if (req.route === '/') return;
-  console.log(`[${req.method}] ${req.url}`);
+	if (req.route === '/') return;
+	console.log(`[${req.method}] ${req.url}`);
 };
 
 router
-  .all('*', logger, preflight)
-  .get('/', () => 'Success!')
-  .all('/auth/*', rateLimit, authRouter.fetch)
-  .all('/verdant/*', verdantRouter.fetch)
-  .all('/stripe/*', rateLimit, stripeRouter.fetch)
-  .all('/graphql/*', rateLimit, graphqlRouter.fetch)
-  .all('/gnocchi/*', rateLimit, gnocchiRouter.fetch)
-  .all('/wishWash/*', rateLimit, wishWashRouter.fetch);
+	.all('*', logger, preflight)
+	.get('/', () => 'Success!')
+	.all('/auth/*', rateLimit, authRouter.fetch)
+	.all('/verdant/*', verdantRouter.fetch)
+	.all('/stripe/*', rateLimit, stripeRouter.fetch)
+	.all('/graphql/*', rateLimit, graphqlRouter.fetch)
+	.all('/gnocchi/*', rateLimit, gnocchiRouter.fetch)
+	.all('/wishWash/*', rateLimit, wishWashRouter.fetch);
 
 const ittyServer = createServerAdapter((request) => router.fetch(request));
 
-console.log('Checking for database migrations...');
 await migrateToLatest();
 
 const httpServer = createServer(ittyServer);
@@ -87,11 +85,14 @@ verdantServer.attach(httpServer, { httpPath: false });
 
 const port = PORT;
 if (process.env.NODE_ENV === 'development') {
-  await killPortProcess(PORT);
+	const { killPortProcess } = await import('kill-port-process');
+	await killPortProcess(PORT);
 }
 httpServer.listen(port, () => {
-  console.log(`Server listening on port ${port}`);
+	console.log(`Server listening on port ${port}`);
 });
 
 productAdminSetup();
-writeSchema();
+if (process.env.NODE_ENV === 'development') {
+	setTimeout(writeSchema);
+}
diff --git a/server/src/tasks/writeSchema.ts b/server/src/tasks/writeSchema.ts
index 51b233bf..7461875a 100644
--- a/server/src/tasks/writeSchema.ts
+++ b/server/src/tasks/writeSchema.ts
@@ -1,9 +1,11 @@
 import { printSchema, lexicographicSortSchema } from 'graphql';
 import { schema } from '../graphql/schema.js';
-import { writeFileSync } from 'fs';
+import { writeFile } from 'fs/promises';
 
 export function writeSchema() {
-  const sortedSchema = lexicographicSortSchema(schema);
-  const printedSchema = printSchema(sortedSchema);
-  writeFileSync('schema.graphql', printedSchema);
+	const sortedSchema = lexicographicSortSchema(schema);
+	const printedSchema = printSchema(sortedSchema);
+	writeFile('schema.graphql', printedSchema).catch((err) => {
+		console.error('Error writing schema', err);
+	});
 }
diff --git a/web/src/pages/LoginPage.tsx b/web/src/pages/LoginPage.tsx
index 67ccbcc9..2f8814bc 100644
--- a/web/src/pages/LoginPage.tsx
+++ b/web/src/pages/LoginPage.tsx
@@ -1,174 +1,181 @@
 import { P } from '@a-type/ui/components/typography';
 import { Link, useSearchParams } from '@verdant-web/react-router';
 import {
-  TabsList,
-  TabsContent,
-  TabsRoot,
-  TabsTrigger,
+	TabsList,
+	TabsContent,
+	TabsRoot,
+	TabsTrigger,
 } from '@a-type/ui/components/tabs';
-import { lazy, ReactNode, useState } from 'react';
+import { lazy, ReactNode, useEffect, useState } from 'react';
 import { Footer } from '@/components/help/Footer.jsx';
 import { Checkbox } from '@a-type/ui/components/checkbox';
 import classNames from 'classnames';
 import { CONFIG } from '@biscuits/client';
 import {
-  OAuthSigninButton,
-  EmailSignupForm,
-  EmailSigninForm,
+	OAuthSigninButton,
+	EmailSignupForm,
+	EmailSigninForm,
 } from '@a-type/auth-client';
 import { AppId, appsById } from '@biscuits/apps';
+import { toast } from '@a-type/ui';
 
 const Paws = lazy(() => import('@/components/paws/Paws.jsx'));
 
 export default function LoginPage() {
-  const [searchParams, setParams] = useSearchParams();
-  let returnTo = searchParams.get('returnTo') ?? undefined;
-  const appReferrer = searchParams.get('appReferrer') ?? undefined;
-  let appState: any = undefined;
-  if (!returnTo && appReferrer) {
-    appState = {
-      appReferrer,
-      appReturnTo: searchParams.get('appReturnTo') ?? undefined,
-    };
-  }
+	const [searchParams, setParams] = useSearchParams();
+	let returnTo = searchParams.get('returnTo') ?? undefined;
+	const appReferrer = searchParams.get('appReferrer') ?? undefined;
+	let appState: any = undefined;
+	if (!returnTo && appReferrer) {
+		appState = {
+			appReferrer,
+			appReturnTo: searchParams.get('appReturnTo') ?? undefined,
+		};
+	}
+	const error = searchParams.get('error');
+	useEffect(() => {
+		if (error) {
+			toast.error(error, { id: error });
+		}
+	}, [error]);
 
-  const activeTab = searchParams.get('tab') ?? 'signin';
+	const activeTab = searchParams.get('tab') ?? 'signin';
 
-  const [tosAgreed, setTosAgreed] = useState(false);
+	const [tosAgreed, setTosAgreed] = useState(false);
 
-  let title: ReactNode = activeTab === 'signin' ? 'Log in' : 'Join the club';
-  if (appReferrer) {
-    const appInfo = appsById[appReferrer as AppId];
-    if (appInfo) {
-      title = (
-        <span className="row">
-          <img
-            src={`${appInfo.url}/${appInfo.iconPath}`}
-            className="w-60px h-60px inline-block mr-2"
-            alt=""
-          />
-          {activeTab === 'signin'
-            ? `Log in to ${appInfo.name}`
-            : `Sign up for ${appInfo.name}`}
-        </span>
-      );
-    }
-  }
+	let title: ReactNode = activeTab === 'signin' ? 'Log in' : 'Join the club';
+	if (appReferrer) {
+		const appInfo = appsById[appReferrer as AppId];
+		if (appInfo) {
+			title = (
+				<span className="row">
+					<img
+						src={`${appInfo.url}/${appInfo.iconPath}`}
+						className="w-60px h-60px inline-block mr-2"
+						alt=""
+					/>
+					{activeTab === 'signin' ?
+						`Log in to ${appInfo.name}`
+					:	`Sign up for ${appInfo.name}`}
+				</span>
+			);
+		}
+	}
 
-  return (
-    <div className="flex flex-col items-center justify-center h-screen flex-1 bg-primary-wash">
-      <div className="absolute top-0 left-0 w-full h-screen flex-[2]">
-        <Paws />
-      </div>
-      <div className="flex flex-col gap-3 p-6 items-center bg-white border-solid border border-1 border-black rounded-lg relative z-1">
-        <h1 className="font-fancy mb-0">{title}</h1>
-        {appReferrer && (
-          <P className="italic color-gray-7 text-sm">A Biscuits.club app</P>
-        )}
-        <TabsRoot
-          className="flex flex-col"
-          value={activeTab}
-          onValueChange={(val) =>
-            setParams((old) => {
-              old.set('tab', val);
-              return old;
-            })
-          }
-        >
-          <TabsList className="mb-4">
-            <TabsTrigger value="signin">Log in</TabsTrigger>
-            <TabsTrigger value="signup">Create account</TabsTrigger>
-          </TabsList>
-          <TabsContent
-            value="signup"
-            className="flex flex-col gap-3 items-stretch"
-          >
-            <label
-              className={classNames(
-                'flex flex-row gap-3 max-w-400px text-sm transition-color  p-2 rounded-lg',
-                !tosAgreed && 'bg-primary-light text-black',
-              )}
-            >
-              <Checkbox
-                checked={tosAgreed}
-                onCheckedChange={(c) => setTosAgreed(!!c)}
-              />
-              <span>
-                I agree to the{' '}
-                <a href="/tos" className="font-bold" target="_blank">
-                  terms of service
-                </a>{' '}
-                and have read the{' '}
-                <a href="/privacy" className="font-bold" target="_blank">
-                  privacy policy
-                </a>
-              </span>
-            </label>
-            <OAuthSigninButton
-              endpoint={`${CONFIG.API_ORIGIN}/auth/provider/google/login`}
-              returnTo={returnTo}
-              inviteId={searchParams.get('inviteId')}
-              className="mx-auto"
-              disabled={!tosAgreed}
-              appState={appState}
-            >
-              Sign up with Google
-            </OAuthSigninButton>
-            <Or />
-            <EmailSignupForm
-              endpoint={`${CONFIG.API_ORIGIN}/auth/begin-email-signup`}
-              returnTo={returnTo}
-              disabled={!tosAgreed}
-              appState={appState}
-            />
-            {!tosAgreed && (
-              <P className="text-center text-sm text-gray-7">
-                You must agree to the terms to sign up
-              </P>
-            )}
-            {appReferrer && (
-              <P className="text-center text-sm text-gray-7">
-                Your account works with{' '}
-                <Link newTab to="/">
-                  all Biscuits apps
-                </Link>
-              </P>
-            )}
-          </TabsContent>
-          <TabsContent
-            value="signin"
-            className="flex flex-col gap-3 items-stretch"
-          >
-            <OAuthSigninButton
-              endpoint={`${CONFIG.API_ORIGIN}/auth/provider/google/login`}
-              returnTo={returnTo}
-              inviteId={searchParams.get('inviteId')}
-              className="mx-auto"
-              appState={appState}
-            >
-              Sign in with Google
-            </OAuthSigninButton>
-            <Or />
-            <EmailSigninForm
-              returnTo={returnTo}
-              endpoint={`${CONFIG.API_ORIGIN}/auth/email-login`}
-              resetPasswordEndpoint={`${CONFIG.API_ORIGIN}/auth/begin-reset-password`}
-              appState={appState}
-            />
-          </TabsContent>
-        </TabsRoot>
-      </div>
-      <Footer className="px-12" />
-    </div>
-  );
+	return (
+		<div className="flex flex-col items-center justify-center h-screen flex-1 bg-primary-wash">
+			<div className="absolute top-0 left-0 w-full h-screen flex-[2]">
+				<Paws />
+			</div>
+			<div className="flex flex-col gap-3 p-6 items-center bg-white border-solid border border-1 border-black rounded-lg relative z-1">
+				<h1 className="font-fancy mb-0">{title}</h1>
+				{appReferrer && (
+					<P className="italic color-gray-7 text-sm">A Biscuits.club app</P>
+				)}
+				<TabsRoot
+					className="flex flex-col"
+					value={activeTab}
+					onValueChange={(val) =>
+						setParams((old) => {
+							old.set('tab', val);
+							return old;
+						})
+					}
+				>
+					<TabsList className="mb-4">
+						<TabsTrigger value="signin">Log in</TabsTrigger>
+						<TabsTrigger value="signup">Create account</TabsTrigger>
+					</TabsList>
+					<TabsContent
+						value="signup"
+						className="flex flex-col gap-3 items-stretch"
+					>
+						<label
+							className={classNames(
+								'flex flex-row gap-3 max-w-400px text-sm transition-color  p-2 rounded-lg',
+								!tosAgreed && 'bg-primary-light text-black',
+							)}
+						>
+							<Checkbox
+								checked={tosAgreed}
+								onCheckedChange={(c) => setTosAgreed(!!c)}
+							/>
+							<span>
+								I agree to the{' '}
+								<a href="/tos" className="font-bold" target="_blank">
+									terms of service
+								</a>{' '}
+								and have read the{' '}
+								<a href="/privacy" className="font-bold" target="_blank">
+									privacy policy
+								</a>
+							</span>
+						</label>
+						<OAuthSigninButton
+							endpoint={`${CONFIG.API_ORIGIN}/auth/provider/google/login`}
+							returnTo={'/settings?tab=subscription'}
+							inviteId={searchParams.get('inviteId')}
+							className="mx-auto"
+							disabled={!tosAgreed}
+							appState={appState}
+						>
+							Sign up with Google
+						</OAuthSigninButton>
+						<Or />
+						<EmailSignupForm
+							endpoint={`${CONFIG.API_ORIGIN}/auth/begin-email-signup`}
+							returnTo={'/settings?tab=subscription'}
+							disabled={!tosAgreed}
+							appState={appState}
+						/>
+						{!tosAgreed && (
+							<P className="text-center text-sm text-gray-7">
+								You must agree to the terms to sign up
+							</P>
+						)}
+						{appReferrer && (
+							<P className="text-center text-sm text-gray-7">
+								Your account works with{' '}
+								<Link newTab to="/">
+									all Biscuits apps
+								</Link>
+							</P>
+						)}
+					</TabsContent>
+					<TabsContent
+						value="signin"
+						className="flex flex-col gap-3 items-stretch"
+					>
+						<OAuthSigninButton
+							endpoint={`${CONFIG.API_ORIGIN}/auth/provider/google/login`}
+							returnTo={returnTo}
+							inviteId={searchParams.get('inviteId')}
+							className="mx-auto"
+							appState={appState}
+						>
+							Sign in with Google
+						</OAuthSigninButton>
+						<Or />
+						<EmailSigninForm
+							returnTo={returnTo}
+							endpoint={`${CONFIG.API_ORIGIN}/auth/email-login`}
+							resetPasswordEndpoint={`${CONFIG.API_ORIGIN}/auth/begin-reset-password`}
+							appState={appState}
+						/>
+					</TabsContent>
+				</TabsRoot>
+			</div>
+			<Footer className="px-12" />
+		</div>
+	);
 }
 
 function Or() {
-  return (
-    <div className="flex flex-row gap-2 items-center">
-      <div className="flex-1 border-t-solid border-t border-gray-5"></div>
-      <p className="text-gray-5">or</p>
-      <div className="flex-1 border-t-solid border-t border-gray-5"></div>
-    </div>
-  );
+	return (
+		<div className="flex flex-row gap-2 items-center">
+			<div className="flex-1 border-t-solid border-t border-gray-5"></div>
+			<p className="text-gray-5">or</p>
+			<div className="flex-1 border-t-solid border-t border-gray-5"></div>
+		</div>
+	);
 }
diff --git a/web/src/pages/SettingsPage.tsx b/web/src/pages/SettingsPage.tsx
index 7f3459ba..cc912f9a 100644
--- a/web/src/pages/SettingsPage.tsx
+++ b/web/src/pages/SettingsPage.tsx
@@ -1,8 +1,8 @@
 import { graphql } from '@/graphql.js';
 import {
-  PageContent,
-  PageFixedArea,
-  PageRoot,
+	PageContent,
+	PageFixedArea,
+	PageRoot,
 } from '@a-type/ui/components/layouts';
 import { H1, H2, H3 } from '@a-type/ui/components/typography';
 import { Link, useNavigate, useSearchParams } from '@verdant-web/react-router';
@@ -18,160 +18,157 @@ import { ErrorBoundary } from '@a-type/ui/components/errorBoundary';
 import { Footer } from '@/components/help/Footer.jsx';
 import { EmailUpdatesToggle } from '@/components/user/EmailUpdatesToggle.jsx';
 import {
-  UserInfoEditor,
-  userInfoFragment,
+	UserInfoEditor,
+	userInfoFragment,
 } from '@/components/user/UserInfoEditor.jsx';
 import { toast } from '@a-type/ui';
 import { Tabs } from '@a-type/ui/components/tabs';
 
 const PlanPageData = graphql(
-  `
-    query PlanPageData {
-      me {
-        id
-        plan {
-          id
-          subscriptionStatus
-          isSubscribed
-        }
-        ...UserInfoEditor_userInfoFragment
-      }
-    }
-  `,
-  [userInfoFragment],
+	`
+		query PlanPageData {
+			me {
+				id
+				plan {
+					id
+					subscriptionStatus
+					isSubscribed
+				}
+				...UserInfoEditor_userInfoFragment
+			}
+		}
+	`,
+	[userInfoFragment],
 );
 
 export interface PlanPageProps {}
 
 export function PlanPage({}: PlanPageProps) {
-  const result = useQuery(PlanPageData);
-  const { data } = result;
-  const [searchParams] = useSearchParams();
-  const returnToAppId = searchParams.get('appReferrer');
-  const returnToApp = apps.find((app) => app.id === returnToAppId) ?? undefined;
-  const returnToAppUrl = import.meta.env.DEV
-    ? returnToApp?.devOriginOverride
-    : returnToApp?.url;
+	const result = useQuery(PlanPageData);
+	const { data } = result;
+	const [searchParams] = useSearchParams();
+	const returnToAppId = searchParams.get('appReferrer');
+	const returnToApp = apps.find((app) => app.id === returnToAppId) ?? undefined;
+	const returnToAppUrl =
+		import.meta.env.DEV ? returnToApp?.devOriginOverride : returnToApp?.url;
 
-  const hasAccount = !!result.data?.me;
-  const [_, setSeen] = useLocalStorage('seenBefore', false);
-  useEffect(() => {
-    if (hasAccount) setSeen(true);
-  }, [setSeen, hasAccount]);
+	const hasAccount = !!result.data?.me;
+	const [_, setSeen] = useLocalStorage('seenBefore', false);
+	useEffect(() => {
+		if (hasAccount) setSeen(true);
+	}, [setSeen, hasAccount]);
 
-  const justPaid =
-    searchParams.get('paymentComplete') ||
-    searchParams.get('redirect_status') === 'succeeded';
+	const justPaid =
+		searchParams.get('paymentComplete') ||
+		searchParams.get('redirect_status') === 'succeeded';
 
-  const navigate = useNavigate();
+	const navigate = useNavigate();
 
-  useEffect(() => {
-    if (result.networkStatus === NetworkStatus.ready && !hasAccount) {
-      const search = window.location.search;
-      const path = window.location.pathname;
-      const returnTo = encodeURIComponent(path + search);
-      navigate(`/login?returnTo=${returnTo}`);
-    }
-  }, [result, navigate, hasAccount]);
+	useEffect(() => {
+		if (result.networkStatus === NetworkStatus.ready && !hasAccount) {
+			const search = window.location.search;
+			const path = window.location.pathname;
+			const returnTo = encodeURIComponent(path + search);
+			navigate(`/login?returnTo=${returnTo}`);
+		}
+	}, [result, navigate, hasAccount]);
 
-  useEffect(() => {
-    if (justPaid) {
-      toast.success('Thanks for subscribing! 🎉', {
-        id: 'justPaid',
-      });
-    }
-  }, [justPaid]);
+	useEffect(() => {
+		if (justPaid) {
+			toast.success('Thanks for subscribing! 🎉', {
+				id: 'justPaid',
+			});
+		}
+	}, [justPaid]);
 
-  const [search, setSearch] = useSearchParams();
-  const tab = search.get('tab') ?? 'profile';
-  const setTab = (tab: string) => {
-    setSearch((s) => {
-      s.set('tab', tab);
-      return s;
-    });
-  };
+	const [search, setSearch] = useSearchParams();
+	const tab = search.get('tab') ?? 'subscription';
+	const setTab = (tab: string) => {
+		setSearch((s) => {
+			s.set('tab', tab);
+			return s;
+		});
+	};
 
-  return (
-    <PageRoot>
-      <PageContent innerProps={{ className: 'flex flex-col gap-6' }}>
-        <PageFixedArea className="mb-10 flex flex-row items-center w-full justify-between">
-          <Button asChild color="primary">
-            <Link to={returnToAppUrl ?? '/'}>
-              <Icon name="arrowLeft" />
-              <span>Back to {returnToApp?.name ?? 'apps'}</span>
-            </Link>
-          </Button>
-          <LogoutButton />
-        </PageFixedArea>
-        <Tabs value={tab} onValueChange={setTab} className="flex-1">
-          <Tabs.List>
-            <Tabs.Trigger value="profile">Profile</Tabs.Trigger>
-            <Tabs.Trigger value="subscription">Subscription</Tabs.Trigger>
-            <Tabs.Trigger value="members">Members</Tabs.Trigger>
-            <Tabs.Trigger value="data">Data</Tabs.Trigger>
-          </Tabs.List>
-          <div className="px-2 py-6 flex-1">
-            <Tabs.Content value="profile">
-              <ErrorBoundary>
-                <Suspense>
-                  {data?.me ? (
-                    <UserInfoEditor user={data.me} />
-                  ) : (
-                    <div>Loading...</div>
-                  )}
-                </Suspense>
-              </ErrorBoundary>
-              <ErrorBoundary>
-                <Suspense>
-                  <EmailUpdatesToggle
-                    isSubscribed={data?.me?.plan?.isSubscribed}
-                  />
-                </Suspense>
-              </ErrorBoundary>
-            </Tabs.Content>
-            <Tabs.Content value="subscription">
-              <ErrorBoundary
-                fallback={
-                  <div>
-                    Something went wrong. Couldn&apos;t load this content.
-                  </div>
-                }
-              >
-                <Suspense>
-                  <SubscriptionSetup />
-                </Suspense>
-              </ErrorBoundary>
-            </Tabs.Content>
-            <Tabs.Content value="members">
-              <ErrorBoundary>
-                <Suspense>
-                  {!!data?.me?.plan && (
-                    <>
-                      <div className="flex flex-col gap-3">
-                        <H3>Members</H3>
-                        <MembersAndInvitations />
-                      </div>
-                    </>
-                  )}
-                </Suspense>
-              </ErrorBoundary>
-            </Tabs.Content>
-            <Tabs.Content value="data">
-              <ErrorBoundary>
-                <Suspense>
-                  <div className="flex flex-col gap-3">
-                    <H3>App data</H3>
-                    <VerdantLibraries />
-                  </div>
-                </Suspense>
-              </ErrorBoundary>
-            </Tabs.Content>
-          </div>
-        </Tabs>
-        <Footer />
-      </PageContent>
-    </PageRoot>
-  );
+	return (
+		<PageRoot>
+			<PageContent innerProps={{ className: 'flex flex-col gap-6' }}>
+				<PageFixedArea className="mb-10 flex flex-row items-center w-full justify-between">
+					<Button asChild color="primary">
+						<Link to={returnToAppUrl ?? '/'}>
+							<Icon name="arrowLeft" />
+							<span>Back to {returnToApp?.name ?? 'apps'}</span>
+						</Link>
+					</Button>
+					<LogoutButton />
+				</PageFixedArea>
+				<Tabs value={tab} onValueChange={setTab} className="flex-1">
+					<Tabs.List>
+						<Tabs.Trigger value="subscription">Subscription</Tabs.Trigger>
+						<Tabs.Trigger value="profile">Profile</Tabs.Trigger>
+						<Tabs.Trigger value="members">Members</Tabs.Trigger>
+						<Tabs.Trigger value="data">Data</Tabs.Trigger>
+					</Tabs.List>
+					<div className="px-2 py-6 flex-1">
+						<Tabs.Content value="profile">
+							<ErrorBoundary>
+								<Suspense>
+									{data?.me ?
+										<UserInfoEditor user={data.me} />
+									:	<div>Loading...</div>}
+								</Suspense>
+							</ErrorBoundary>
+							<ErrorBoundary>
+								<Suspense>
+									<EmailUpdatesToggle
+										isSubscribed={data?.me?.plan?.isSubscribed}
+									/>
+								</Suspense>
+							</ErrorBoundary>
+						</Tabs.Content>
+						<Tabs.Content value="subscription">
+							<ErrorBoundary
+								fallback={
+									<div>
+										Something went wrong. Couldn&apos;t load this content.
+									</div>
+								}
+							>
+								<Suspense>
+									<SubscriptionSetup />
+								</Suspense>
+							</ErrorBoundary>
+						</Tabs.Content>
+						<Tabs.Content value="members">
+							<ErrorBoundary>
+								<Suspense>
+									{!!data?.me?.plan && (
+										<>
+											<div className="flex flex-col gap-3">
+												<H3>Members</H3>
+												<MembersAndInvitations />
+											</div>
+										</>
+									)}
+								</Suspense>
+							</ErrorBoundary>
+						</Tabs.Content>
+						<Tabs.Content value="data">
+							<ErrorBoundary>
+								<Suspense>
+									<div className="flex flex-col gap-3">
+										<H3>App data</H3>
+										<VerdantLibraries />
+									</div>
+								</Suspense>
+							</ErrorBoundary>
+						</Tabs.Content>
+					</div>
+				</Tabs>
+				<Footer />
+			</PageContent>
+		</PageRoot>
+	);
 }
 
 export default PlanPage;