ww: improve list picker

a-type · Jul 14, 2024 · 1016115 · 1016115
1 parent 316de60
commit 1016115
Show file tree

Hide file tree

Showing 13 changed files with 122 additions and 110 deletions.
diff --git a/apps/gnocchi/hub/package.json b/apps/gnocchi/hub/package.json
@@ -20,7 +20,7 @@
     "typecheck": "tsc --build tsconfig.json"
   },
   "dependencies": {
-    "@a-type/ui": "^0.8.28",
+    "@a-type/ui": "^0.8.31",
     "@a-type/utils": "^1.0.8",
     "@tiptap/core": "^2.2.4",
     "@tiptap/extension-document": "^2.2.4",

diff --git a/apps/gnocchi/web/package.json b/apps/gnocchi/web/package.json
@@ -14,7 +14,7 @@
     "typecheck": "tsc --build tsconfig.json"
   },
   "dependencies": {
-    "@a-type/ui": "^0.8.28",
+    "@a-type/ui": "^0.8.31",
     "@a-type/utils": "^1.0.8",
     "@biscuits/client": "workspace:*",
     "@biscuits/error": "workspace:*",

diff --git a/apps/humding/web/package.json b/apps/humding/web/package.json
@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@a-type/ui": "0.8.28",
+    "@a-type/ui": "0.8.31",
     "@a-type/utils": "1.1.3",
     "@biscuits/client": "workspace:*",
     "@humding.biscuits/verdant": "workspace:*",

diff --git a/apps/marginalia/web/package.json b/apps/marginalia/web/package.json
@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@a-type/ui": "0.8.28",
+    "@a-type/ui": "0.8.31",
     "@a-type/utils": "1.1.0",
     "@biscuits/client": "workspace:*",
     "@marginalia.biscuits/verdant": "workspace:*",

diff --git a/apps/star-chart/web/package.json b/apps/star-chart/web/package.json
@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@a-type/ui": "0.8.28",
+    "@a-type/ui": "0.8.31",
     "@a-type/utils": "1.1.2",
     "@biscuits/client": "workspace:*",
     "@react-spring/web": "^9.7.3",

diff --git a/apps/trip-tick/web/package.json b/apps/trip-tick/web/package.json
@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@a-type/ui": "^0.8.28",
+    "@a-type/ui": "^0.8.31",
     "@a-type/utils": "^1.0.6",
     "@biscuits/client": "workspace:*",
     "@radix-ui/react-progress": "^1.0.3",

diff --git a/apps/wish-wash/web/package.json b/apps/wish-wash/web/package.json
@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@a-type/ui": "0.8.28",
+    "@a-type/ui": "0.8.31",
     "@a-type/utils": "1.1.3",
     "@biscuits/client": "workspace:*",
     "@react-spring/web": "^9.7.3",

diff --git a/apps/wish-wash/web/src/components/lists/CreateListButton.tsx b/apps/wish-wash/web/src/components/lists/CreateListButton.tsx
@@ -25,9 +25,12 @@ export function CreateListButton({
 
   const canSync = useCanSync();
 
+  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(
@@ -37,10 +40,9 @@ export function CreateListButton({
       },
     );
     navigate(`/${list.get('id')}?listId=${list.get('id')}`);
+    setOpen(false);
   };
 
-  const [open, setOpen] = useState(false);
-
   return (
     <Dialog
       open={open}

diff --git a/apps/wish-wash/web/src/components/lists/ListPicker.tsx b/apps/wish-wash/web/src/components/lists/ListPicker.tsx
@@ -2,12 +2,12 @@ import { hooks } from '@/store.js';
 import { Icon } from '@a-type/ui/components/icon';
 import { HorizontalList } from '@a-type/ui/components/horizontalList';
 import { assert } from '@a-type/utils';
-import { useCanSync } from '@biscuits/client';
-import { authorization } from '@wish-wash.biscuits/verdant';
+import { useCanSync, useLocalStorage } from '@biscuits/client';
+import { authorization, List } from '@wish-wash.biscuits/verdant';
 import { Button } from '@a-type/ui/components/button';
 import { Link } from '@verdant-web/react-router';
 import { CreateListButton } from './CreateListButton.jsx';
-import { useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { clsx } from '@a-type/ui';
 
 export interface ListPickerProps {
@@ -16,32 +16,23 @@ export interface ListPickerProps {
 }
 
 export function ListPicker({ className, value, ...props }: ListPickerProps) {
-  const [open, setOpen] = useState(false);
-
+  const [open, setOpen] = useLocalStorage('list-picker-open', false);
   return (
     <div {...props} className={clsx('relative w-full mb-4', className)}>
-      <HorizontalList open={open} className="w-full min-w-0">
+      <HorizontalList
+        className="w-full min-w-0 rounded-lg"
+        open={open}
+        onOpenChange={setOpen}
+      >
         <ListsPickerLists value={value} />
         <CreateListButton
           size="icon"
-          color="primary"
-          // className="sticky right-2 bottom-2"
+          color="default"
+          // className="sticky right-2 bottom-2 ml-auto"
         >
           <Icon name="plus" />
         </CreateListButton>
       </HorizontalList>
-      <Button
-        size="icon"
-        className="absolute top-100% -translate-y-1/4 right-2"
-        toggled={open}
-        toggleMode="state-only"
-        onClick={() => setOpen((o) => !o)}
-      >
-        <Icon
-          name="chevron"
-          className={clsx('transition-transform', open && 'rotate-180')}
-        />
-      </Button>
     </div>
   );
 }
@@ -50,32 +41,51 @@ function ListsPickerLists({ value }: { value: string }) {
   const lists = hooks.useAllLists();
 
   // sort by recently created, with current value first
-  const sorted = lists.sort((a, b) =>
-    a.get('id') === value
-      ? -1
-      : b.get('id') === value
-        ? 1
-        : a.get('createdAt') - b.get('createdAt'),
-  );
+  const sorted = lists.sort((a, b) => a.get('createdAt') - b.get('createdAt'));
 
   return (
     <>
       {sorted.map((list) => (
-        <Button
-          size="small"
+        <ListPickerListButton
+          selected={value === list.get('id')}
+          list={list}
           key={list.uid}
-          color={value === list.get('id') ? 'default' : 'ghost'}
-          asChild
-          className={clsx(
-            value === list.get('id') && 'sticky left-2 right-12 z-1',
-          )}
-        >
-          <Link to={`/${list.get('id')}`}>
-            <Icon name={list.isAuthorized ? 'lock' : 'add_person'} />{' '}
-            {list.get('name')}
-          </Link>
-        </Button>
+        />
       ))}
     </>
   );
 }
+
+function ListPickerListButton({
+  list,
+  selected,
+}: {
+  list: List;
+  selected: boolean;
+}) {
+  const ref = useRef<HTMLButtonElement>(null);
+  useEffect(() => {
+    if (selected) {
+      ref.current?.scrollIntoView({
+        behavior: 'smooth',
+        inline: 'center',
+        block: 'center',
+      });
+    }
+  }, [selected]);
+
+  return (
+    <Button
+      size="small"
+      color={selected ? 'accent' : 'ghost'}
+      asChild
+      // className={clsx(selected && 'sticky left-2 right-12 z-1')}
+      ref={ref}
+    >
+      <Link to={`/${list.get('id')}`}>
+        <Icon name={list.isAuthorized ? 'lock' : 'add_person'} />{' '}
+        {list.get('name')}
+      </Link>
+    </Button>
+  );
+}
diff --git a/blog/package.json b/blog/package.json
@@ -10,7 +10,7 @@
     "astro": "astro"
   },
   "dependencies": {
-    "@a-type/ui": "^0.8.28",
+    "@a-type/ui": "^0.8.31",
     "@astrojs/check": "^0.5.10",
     "@astrojs/mdx": "^2.3.1",
     "@astrojs/rss": "^4.0.5",

diff --git a/packages/client/package.json b/packages/client/package.json
@@ -62,7 +62,7 @@
     "vite-plugin-pwa": "0.19.2"
   },
   "devDependencies": {
-    "@a-type/ui": "^0.8.28",
+    "@a-type/ui": "^0.8.31",
     "@types/react": "18.3.3",
     "@unocss/transformer-variant-group": "^0.58.0",
     "@verdant-web/react-router": "0.6.3",