triptick: consolidate homepage

apps/trip-tick/web/src/components/lists/AddListButton.tsx

@@ -1,13 +1,10 @@
 import { hooks } from '@/store.js';
-import { Button } from '@a-type/ui/components/button';
+import { Button, ButtonProps } from '@a-type/ui/components/button';
 import { useMe } from '@biscuits/client';
 import { useNavigate } from '@verdant-web/react-router';
 import { ReactNode } from 'react';
 
-export interface AddListButtonProps {
-  children?: ReactNode;
-  className?: string;
-}
+export interface AddListButtonProps extends ButtonProps {}
 
 export function AddListButton({
   children,
@@ -28,7 +25,9 @@ export function AddListButton({
           const list = await client.lists.put({
             name: 'New list',
           });
-          navigate(`/lists/${list.get('id')}`);
+          navigate(`/lists/${list.get('id')}`, {
+            skipTransition: true,
+          });
         } else {
           const listName = me ? me.me.name : `My stuff`;
           const list = await client.lists.put({

apps/trip-tick/web/src/components/lists/ListEditor.tsx

@@ -24,7 +24,7 @@ export function ListEditor({ list }: ListEditorProps) {
     <div className="flex flex-col gap-6">
       <div className="flex flex-row gap-1 items-center">
         <Button asChild color="ghost" size="icon">
-          <Link to="/lists">
+          <Link to="/">
             <Icon name="arrowLeft" />
             <span className="sr-only">Back to lists</span>
           </Link>

apps/trip-tick/web/src/components/lists/ListMenu.tsx

@@ -0,0 +1,55 @@
+import { hooks } from '@/store.js';
+import { Button } from '@a-type/ui/components/button';
+import {
+  DropdownMenu,
+  DropdownMenuItem,
+  DropdownMenuContent,
+  DropdownMenuArrow,
+  DropdownMenuTrigger,
+} from '@a-type/ui/components/dropdownMenu';
+import { Icon } from '@a-type/ui/components/icon';
+import { List } from '@trip-tick.biscuits/verdant';
+import { useNavigate } from '@verdant-web/react-router';
+import { toast } from 'react-hot-toast';
+
+export function ListMenu({ list }: { list: List }) {
+  const client = hooks.useClient();
+  const navigate = useNavigate();
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button size="icon" color="ghost">
+          <Icon name="dots" />
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent>
+        <DropdownMenuArrow />
+        <DropdownMenuItem
+          className="text-red"
+          onClick={() => {
+            client.lists.delete(list.get('id'));
+            navigate('/');
+            toast((t) => (
+              <span className="flex gap-2 items-center">
+                <Icon name="check" />
+                <span>List deleted!</span>
+                <Button
+                  size="small"
+                  onClick={() => {
+                    client.undoHistory.undo();
+                    toast.dismiss(t.id);
+                  }}
+                >
+                  Undo
+                </Button>
+              </span>
+            ));
+          }}
+        >
+          Delete list
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}

apps/trip-tick/web/src/components/lists/ListsList.tsx

@@ -1,84 +1,43 @@
 import { hooks } from '@/store.js';
-import {
-  CardActions,
-  CardFooter,
-  CardGrid,
-  CardMain,
-  CardRoot,
-  CardTitle,
-} from '@a-type/ui/components/card';
-import { List } from '@trip-tick.biscuits/verdant';
-import { Link } from '@verdant-web/react-router';
-import {
-  DropdownMenu,
-  DropdownMenuTrigger,
-  DropdownMenuItem,
-  DropdownMenuContent,
-} from '@a-type/ui/components/dropdownMenu';
 import { Button } from '@a-type/ui/components/button';
+import { Link } from '@verdant-web/react-router';
+import { H2, P } from '@a-type/ui/components/typography';
+import { AddListButton } from './AddListButton.jsx';
 import { Icon } from '@a-type/ui/components/icon';
-import { toast } from 'react-hot-toast';
 
 export interface ListsListProps {}
 
 export function ListsList({}: ListsListProps) {
   const lists = hooks.useAllLists();
 
-  return (
-    <CardGrid className="mt-4">
-      {lists.map((list) => (
-        <CardRoot key={list.get('id')}>
-          <CardMain asChild>
-            <Link to={`/lists/${list.get('id')}`}>
-              <CardTitle>{list.get('name')}</CardTitle>
-            </Link>
-          </CardMain>
-          <CardFooter>
-            <CardActions>
-              <ListsListItemMenu list={list} />
-            </CardActions>
-          </CardFooter>
-        </CardRoot>
-      ))}
-    </CardGrid>
-  );
-}
-
-function ListsListItemMenu({ list }: { list: List }) {
-  const client = hooks.useClient();
+  if (lists.length === 0) {
+    return (
+      <div className="flex flex-col gap-4 items-start">
+        <H2>Welcome!</H2>
+        <P>
+          Trip Tick is a list-making app purpose-made for planning what to pack
+          for your next trip.
+        </P>
+        <P>To get started, you need to create your first packing list.</P>
+        <AddListButton />
+      </div>
+    );
+  }
 
   return (
-    <DropdownMenu>
-      <DropdownMenuTrigger asChild>
-        <Button size="icon" color="ghost">
-          <Icon name="dots" />
-        </Button>
-      </DropdownMenuTrigger>
-      <DropdownMenuContent>
-        <DropdownMenuItem
-          className="text-red"
-          onClick={() => {
-            client.lists.delete(list.get('id'));
-            toast((t) => (
-              <span className="flex gap-2 items-center">
-                <Icon name="check" />
-                <span>List deleted!</span>
-                <Button
-                  size="small"
-                  onClick={() => {
-                    client.undoHistory.undo();
-                    toast.dismiss(t.id);
-                  }}
-                >
-                  Undo
-                </Button>
-              </span>
-            ));
-          }}
-        >
-          Delete list
-        </DropdownMenuItem>
-      </DropdownMenuContent>
-    </DropdownMenu>
+    <div className="col items-start">
+      <H2>Lists</H2>
+      <div className="flex flex-row flex-wrap gap-2 max-h-80px">
+        {lists.map((list) => (
+          <Button size="small" asChild key={list.get('id')}>
+            <Link to={`/lists/${list.get('id')}`}>{list.get('name')}</Link>
+          </Button>
+        ))}
+        <AddListButton size="small">
+          <Icon name="plus" />
+          New List
+        </AddListButton>
+      </div>
+    </div>
   );
 }

apps/trip-tick/web/src/components/trips/AddTripButton.tsx

@@ -10,6 +10,12 @@ export function AddTripButton({
 }: AddTripButtonProps) {
   const client = hooks.useClient();
   const navigate = useNavigate();
+  const lists = hooks.useAllLists();
+
+  if (!lists.length) {
+    // don't show this option yet - they need lists first
+    return null;
+  }
 
   return (
     <Button

apps/trip-tick/web/src/components/trips/TripsList.tsx

@@ -52,22 +52,25 @@ export function TripsList({}: TripsListProps) {
   });
   const hasLists = lists.length > 0;
 
-  if (!hasLists) {
+  if (!trips.length && !hasLists) {
+    return null;
+  }
+
+  if (!trips.length) {
     return (
-      <div className="flex flex-col gap-4 items-start">
-        <H2>Welcome!</H2>
-        <P>
-          Trip Tick is a list-making app purpose-made for planning what to pack
-          for your next trip.
-        </P>
-        <P>To get started, you need to create your first packing list.</P>
-        <AddListButton />
+      <div className="col items-stretch">
+        <H2>Trips</H2>
+        <div className="col bg-primary-wash rounded-lg p-8">
+          <P>No trips yet</P>
+          <AddTripButton>Plan one</AddTripButton>
+        </div>
       </div>
     );
   }
 
   return (
     <div className="flex flex-col gap-4">
+      <H2>Trips</H2>
       {!!future.length ? (
         <CardGrid className="list-none p-0 m-0">
           {future.map((trip) => (
@@ -93,15 +96,15 @@ export function TripsList({}: TripsListProps) {
             <Button onClick={() => tools.loadMore()}>Show older</Button>
           )}
         </>
-      ) : (
+      ) : !!past.length ? (
         <Button
           className="self-center opacity-50"
           color="ghost"
           onClick={() => setShowPast(true)}
         >
           Show past trips
         </Button>
-      )}
+      ) : null}
     </div>
   );
 }

apps/trip-tick/web/src/pages/ListPage.tsx

@@ -1,6 +1,7 @@
 import { ListEditor } from '@/components/lists/ListEditor.jsx';
+import { ListMenu } from '@/components/lists/ListMenu.jsx';
 import { hooks } from '@/store.js';
-import { PageContent } from '@a-type/ui/components/layouts';
+import { PageContent, PageFixedArea } from '@a-type/ui/components/layouts';
 import { usePageTitle } from '@biscuits/client';
 import { AutoRestoreScroll, useParams } from '@verdant-web/react-router';
 import { Suspense } from 'react';
@@ -29,7 +30,14 @@ function ListPageEditor({ listId }: { listId: string }) {
     return <div>List not found</div>;
   }
 
-  return <ListEditor list={list} />;
+  return (
+    <>
+      <PageFixedArea className="row justify-end w-full">
+        <ListMenu list={list} />
+      </PageFixedArea>
+      <ListEditor list={list} />
+    </>
+  );
 }
 
 export default ListPage;

apps/trip-tick/web/src/pages/Pages.tsx

@@ -1,14 +1,12 @@
-import { useCallback } from 'react';
-import { lazyWithPreload as lazy } from 'react-lazy-with-preload';
-import { makeRoutes, Router, Outlet } from '@verdant-web/react-router';
+import { TopLoader } from '@/components/nav/TopLoader.jsx';
 import { updateApp, updateState } from '@/updateState.js';
 import { PageRoot } from '@a-type/ui/components/layouts';
-import { TopLoader } from '@/components/nav/TopLoader.jsx';
-import { Navigation } from '@/components/nav/Navigation.jsx';
-import { Essentials, LogoutNotice } from '@biscuits/client';
+import { Essentials } from '@biscuits/client';
+import { Outlet, Router, makeRoutes } from '@verdant-web/react-router';
+import { useCallback } from 'react';
+import { lazyWithPreload as lazy } from 'react-lazy-with-preload';
 
 // dynamically import pages that may not be visited
-const ListsPage = lazy(() => import('./ListsPage.jsx'));
 const ListPage = lazy(() => import('./ListPage.jsx'));
 const TripsPage = lazy(() => import('./TripsPage.jsx'));
 const TripPage = lazy(() => import('./TripPage.jsx'));
@@ -19,7 +17,6 @@ const routes = makeRoutes([
     component: TripsPage,
     exact: true,
     onVisited() {
-      ListsPage.preload();
       TripPage.preload();
     },
   },
@@ -31,14 +28,6 @@ const routes = makeRoutes([
     path: '/lists/:listId',
     component: ListPage,
   },
-  {
-    path: '/lists',
-    component: ListsPage,
-    onVisited() {
-      ListPage.preload();
-      TripsPage.preload();
-    },
-  },
   {
     path: '/settings',
     component: lazy(() => import('./SettingsPage.jsx')),
@@ -63,7 +52,6 @@ export function Pages() {
         <TopLoader />
         <Essentials />
       </Router>
-      <Navigation />
     </PageRoot>
   );
 }