upgrade ui lib. add share target to wishwash

a-type · Jul 10, 2024 · fe67852 · fe67852
1 parent 941cf66
commit fe67852
Show file tree

Hide file tree

Showing 25 changed files with 260 additions and 141 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.24",
+    "@a-type/ui": "^0.8.26",
     "@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.24",
+    "@a-type/ui": "^0.8.26",
     "@a-type/utils": "^1.0.8",
     "@biscuits/client": "workspace:*",
     "@biscuits/error": "workspace:*",

diff --git a/apps/gnocchi/web/src/components/nav/NavBar.tsx b/apps/gnocchi/web/src/components/nav/NavBar.tsx
@@ -85,7 +85,6 @@ const NavBarLink = memo(
         <Link
           to={to}
           className={classNames({
-            'important:(color-black bg-primaryWash)': active,
             active: active,
           })}
           data-active={active}

diff --git a/apps/gnocchi/web/src/components/pantry/list/PantryListSectionTabs.tsx b/apps/gnocchi/web/src/components/pantry/list/PantryListSectionTabs.tsx
@@ -1,5 +1,6 @@
 import { TabsList, TabsRoot, TabsTrigger } from '@a-type/ui/components/tabs';
 import { useFilter } from '../hooks.js';
+import { Icon } from '@/components/icons/Icon.jsx';
 
 export interface PantryListSectionTabsProps {}
 
@@ -14,12 +15,15 @@ export function PantryListSectionTabs({}: PantryListSectionTabsProps) {
     >
       <TabsList>
         <TabsTrigger className="text-nowrap" value="purchased">
+          <Icon name="check" />
           Purchased
         </TabsTrigger>
-        <TabsTrigger value="frozen" className="text-nowrap theme-leek">
+        <TabsTrigger value="frozen" className="text-nowrap">
+          <Icon name="snowflake" />
           Frozen
         </TabsTrigger>
         <TabsTrigger className="text-nowrap" value="all">
+          <Icon name="food" />
           All foods
         </TabsTrigger>
       </TabsList>

diff --git a/apps/gnocchi/web/src/pages/Pages.tsx b/apps/gnocchi/web/src/pages/Pages.tsx
@@ -153,7 +153,7 @@ const routes = makeRoutes([
 
 function LayoutWithNavBar() {
   return (
-    <PageRoot className="bg-gray-2 !sm:bg-wash">
+    <PageRoot>
       <Outlet />
       <NavBar />
     </PageRoot>

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.24",
+    "@a-type/ui": "0.8.26",
     "@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.24",
+    "@a-type/ui": "0.8.26",
     "@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.24",
+    "@a-type/ui": "0.8.26",
     "@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.24",
+    "@a-type/ui": "^0.8.26",
     "@a-type/utils": "^1.0.6",
     "@biscuits/client": "workspace:*",
     "@radix-ui/react-progress": "^1.0.3",

diff --git a/apps/wish-wash/web/index.html b/apps/wish-wash/web/index.html
@@ -5,8 +5,11 @@
       name="viewport"
       content="width=device-width, initial-scale=1, user-scalable=no, viewport-fit=cover"
     />
-    <title>shopping</title>
-    <meta name="description" content="A new Verdant app" />
+    <title>WishWash</title>
+    <meta
+      name="description"
+      content="The personal and collaborative wish list"
+    />
     <link rel="icon" href="/favicon.ico" />
     <!-- <link rel="apple-touch-icon" href="/apple-touch-icon.png" sizes="180x180" /> -->
     <!-- <link rel="mask-icon" href="/mask-icon.svg" color="#ffffff" /> -->
@@ -20,19 +23,25 @@
 			property="og:image:alt"
 			content=""
 		/> -->
-    <meta property="og:title" content="shopping" />
-    <meta property="og:description" content="A new Verdant app" />
+    <meta property="og:title" content="WishWash" />
+    <meta
+      property="og:description"
+      content="The personal and collaborative wish list"
+    />
     <!-- <meta property="og:url" content="FILL THIS IN" /> -->
-    <meta property="og:site_name" content="shopping" />
+    <meta property="og:site_name" content="WishWash" />
 
     <meta name="twitter:card" content="summary_large_image" />
     <meta name="twitter:image:alt" content="" />
-    <meta name="twitter:title" content="shopping" />
-    <meta name="twitter:description" content="A new Verdant app" />
+    <meta name="twitter:title" content="WishWash" />
+    <meta
+      name="twitter:description"
+      content="The personal and collaborative wish list"
+    />
     <meta name="apple-mobile-web-app-capable" content="yes" />
   </head>
 
-  <body className="theme-leek">
+  <body class="theme-leek">
     <div id="root"></div>
     <script type="module" src="/src/main.tsx"></script>
   </body>

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.24",
+    "@a-type/ui": "0.8.26",
     "@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/CreateItem.tsx b/apps/wish-wash/web/src/components/lists/CreateItem.tsx
@@ -1,12 +1,12 @@
+import { hooks } from '@/store.js';
 import {
   FormikForm,
   SubmitButton,
   TextField,
 } from '@a-type/ui/components/forms';
-import { useListContext } from './ListContext.jsx';
-import { createdItemState } from './state.js';
-import { hooks } from '@/store.js';
+import { isUrl } from '@a-type/utils';
 import { authorization } from '@wish-wash.biscuits/verdant';
+import { useListContext } from './ListContext.jsx';
 
 export interface CreateItemProps {}
 
@@ -18,10 +18,18 @@ export function CreateItem({}: CreateItemProps) {
     <FormikForm
       initialValues={{ description: '' }}
       onSubmit={async (values, form) => {
+        let description = values.description;
+        let link: string | null = null;
+        if (isUrl(values.description)) {
+          link = values.description;
+          description = 'Web item';
+        }
+
         const item = await client.items.put(
           {
             listId,
-            description: values.description,
+            description,
+            link,
           },
           {
             access: list.isAuthorized
@@ -41,6 +49,7 @@ export function CreateItem({}: CreateItemProps) {
         required
         className="flex-1"
         variant="primary"
+        placeholder="An idea, or a URL..."
       />
       <SubmitButton>Add</SubmitButton>
     </FormikForm>

diff --git a/apps/wish-wash/web/src/components/lists/ListMenu.tsx b/apps/wish-wash/web/src/components/lists/ListMenu.tsx
@@ -21,7 +21,7 @@ export function ListMenu(props: ListMenuProps) {
   const navigate = useNavigate();
   const createList = async (isPrivate?: boolean) => {
     const list = await client.lists.put(
-      { name: 'New list' },
+      { name: 'Wish list' },
       {
         access: isPrivate ? authorization.private : authorization.public,
       },

diff --git a/apps/wish-wash/web/src/components/shareTarget/ShareTargetListPicker.tsx b/apps/wish-wash/web/src/components/shareTarget/ShareTargetListPicker.tsx
@@ -0,0 +1,67 @@
+import { useSnapshot } from 'valtio';
+import { shareTargetState } from './shareTargetState.js';
+import {
+  Dialog,
+  DialogContent,
+  DialogActions,
+  DialogClose,
+  DialogSelectItem,
+  DialogSelectList,
+  DialogTitle,
+} from '@a-type/ui/components/dialog';
+import { hooks } from '@/store.js';
+import { useNavigate } from '@verdant-web/react-router';
+import { Icon } from '@a-type/ui/components/icon';
+
+export interface ShareTargetListPickerProps {}
+
+export function ShareTargetListPicker({}: ShareTargetListPickerProps) {
+  const share = useSnapshot(shareTargetState).share;
+
+  const show = !!share;
+
+  const client = hooks.useClient();
+  const navigate = useNavigate();
+  const addToList = async (listId: string) => {
+    if (!share) return;
+    await client.items.put({
+      listId,
+      link: share.url,
+      description: share.title || share.text,
+    });
+    navigate(`/${listId}`);
+  };
+
+  return (
+    <Dialog
+      open={show}
+      onOpenChange={(open) => {
+        if (!open) {
+          shareTargetState.share = null;
+        }
+      }}
+    >
+      <DialogContent>
+        <DialogTitle>Add to list</DialogTitle>
+        <DialogSelectList onValueChange={addToList}>
+          {show && <ListItems />}
+        </DialogSelectList>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+const ListItems = () => {
+  const lists = hooks.useAllLists();
+
+  return (
+    <>
+      {lists.map((list) => (
+        <DialogSelectItem value={list.get('id')} key={list.get('id')}>
+          <Icon name={list.isAuthorized ? 'lock' : 'add_person'} />
+          {list.get('name')}
+        </DialogSelectItem>
+      ))}
+    </>
+  );
+};
diff --git a/apps/wish-wash/web/src/components/shareTarget/shareTargetState.ts b/apps/wish-wash/web/src/components/shareTarget/shareTargetState.ts
@@ -0,0 +1,10 @@
+import { onShare, ShareData } from '@biscuits/client';
+import { proxy } from 'valtio';
+
+export const shareTargetState = proxy({
+  share: null as null | ShareData,
+});
+
+onShare((share) => {
+  shareTargetState.share = share;
+});
diff --git a/apps/wish-wash/web/src/pages/Pages.tsx b/apps/wish-wash/web/src/pages/Pages.tsx
@@ -10,6 +10,7 @@ import { Link, makeRoutes, Outlet, Router } from '@verdant-web/react-router';
 import { lazy, Suspense, useCallback } from 'react';
 import { HomePage } from './HomePage.jsx';
 import ListPage from './ListPage.jsx';
+import { ShareTargetListPicker } from '@/components/shareTarget/ShareTargetListPicker.jsx';
 
 const routes = makeRoutes([
   {
@@ -46,6 +47,7 @@ export function Pages() {
             <Outlet />
           </PageRoot>
           <ListDetailsDialog />
+          <ShareTargetListPicker />
         </Router>
       </Suspense>
     </ErrorBoundary>

diff --git a/apps/wish-wash/web/src/service-worker.ts b/apps/wish-wash/web/src/service-worker.ts
@@ -16,6 +16,7 @@ import {
 } from 'workbox-precaching';
 import { NavigationRoute, registerRoute } from 'workbox-routing';
 import { StaleWhileRevalidate } from 'workbox-strategies';
+import { listenForShare } from '@biscuits/client/serviceWorkers';
 
 declare const self: ServiceWorkerGlobalScope;
 
@@ -58,3 +59,5 @@ self.addEventListener('message', (event) => {
     self.skipWaiting();
   }
 });
+
+listenForShare();
diff --git a/apps/wish-wash/web/vite.config.ts b/apps/wish-wash/web/vite.config.ts
@@ -25,7 +25,17 @@ export default defineConfig(({ command, mode }) => ({
         categories: [],
         display: 'standalone',
         start_url: '/',
-      } as any,
+        share_target: {
+          action: '/share',
+          method: 'POST',
+          enctype: 'multipart/form-data',
+          params: {
+            title: 'title',
+            text: 'text',
+            url: 'url',
+          },
+        },
+      },
       includeAssets: ['fonts/**/*', 'images/**/*'],
 
       workbox: {

diff --git a/blog/package.json b/blog/package.json
@@ -10,7 +10,7 @@
     "astro": "astro"
   },
   "dependencies": {
-    "@a-type/ui": "^0.8.24",
+    "@a-type/ui": "^0.8.26",
     "@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.24",
+    "@a-type/ui": "^0.8.26",
     "@types/react": "18.3.3",
     "@unocss/transformer-variant-group": "^0.58.0",
     "@verdant-web/react-router": "0.6.3",

diff --git a/packages/client/src/index.ts b/packages/client/src/index.ts
@@ -9,3 +9,4 @@ export * from './platform.js';
 export * from './featureFlags.js';
 export * from './darkMode.js';
 export * from './pageError.js';
+export * from './share.js';
diff --git a/packages/client/src/serviceWorkers.ts b/packages/client/src/serviceWorkers.ts
@@ -23,22 +23,9 @@ export function listenForShare() {
 
           const formData = await event.request.formData();
           const text = formData.get('text');
-          if (text && typeof text === 'string') {
-            // check if text is a URL
-            try {
-              new URL(text);
-              // post message to the client
-
-              client.postMessage({ type: 'pwa-share', url: text });
-            } catch (e) {
-              // not a URL, could be ingredients list
-              const items = text.split('\n');
-
-              client.postMessage({ type: 'pwa-share', items });
-            }
-          } else {
-            console.warn('No text found in share');
-          }
+          const url = formData.get('url');
+          const title = formData.get('title');
+          client.postMessage({ type: 'pwa-share', text, url, title });
         })(),
       );
     }