Add dedicated favorites tab

apps/web/app/components/sidebar.tsx

@@ -6,6 +6,7 @@ import {
   InboxIcon,
   InformationCircleIcon,
   MagnifyingGlassIcon,
+  StarIcon,
   UserGroupIcon,
 } from "@heroicons/react/24/outline";
 import { Link, useLocation } from "@remix-run/react";
@@ -55,6 +56,13 @@ export default function Sidebar() {
                   >
                     Search
                   </SidebarLink>
+                  <SidebarLink
+                    to="/favorites"
+                    icon={StarIcon}
+                    active={location.pathname.startsWith("/favorites")}
+                  >
+                    Favorites
+                  </SidebarLink>
                   <SidebarLink
                     to="/notifications"
                     icon={InboxIcon}

apps/web/app/components/simpleHeader.tsx

@@ -0,0 +1,11 @@
+import type { ReactNode } from "react";
+
+export default function SimpleHeader({ children }: { children?: ReactNode }) {
+  return (
+    <div className="p-3 sm:py-0">
+      <h1 className="mb-4 truncate text-center text-3xl font-semibold leading-7 sm:text-left">
+        {children}
+      </h1>
+    </div>
+  );
+}

apps/web/app/routes/favorites.tsx

@@ -0,0 +1,54 @@
+import { json, type LoaderArgs, type V2_MetaFunction } from "@remix-run/node";
+import { dehydrate, QueryClient, useQuery } from "@tanstack/react-query";
+import invariant from "tiny-invariant";
+import BottleTable from "~/components/bottleTable";
+import EmptyActivity from "~/components/emptyActivity";
+
+import Layout from "~/components/layout";
+import SimpleHeader from "~/components/simpleHeader";
+import useApi from "~/hooks/useApi";
+import useAuth from "~/hooks/useAuth";
+import { redirectToAuth } from "~/lib/auth.server";
+import { fetchBottlesInCollection } from "~/queries/collections";
+
+export async function loader({ context, request }: LoaderArgs) {
+  if (!context.user) return redirectToAuth({ request });
+
+  const queryClient = new QueryClient();
+  await queryClient.prefetchQuery(
+    ["collections", "user", context.user.id, "default"],
+    () => fetchBottlesInCollection(context.api, "me", "default"),
+  );
+
+  return json({ dehydratedState: dehydrate(queryClient) });
+}
+
+export const meta: V2_MetaFunction = () => {
+  return [
+    {
+      title: "Favorites",
+    },
+  ];
+};
+
+export default function Favorites() {
+  const api = useApi();
+  const { user } = useAuth();
+
+  invariant(user);
+
+  const { data } = useQuery(["collections", "user", user.id, "default"], () =>
+    fetchBottlesInCollection(api, "me", "default"),
+  );
+
+  return (
+    <Layout>
+      <SimpleHeader>Favorites</SimpleHeader>
+      {data && data.results.length ? (
+        <BottleTable bottleList={data.results} rel={data.rel} />
+      ) : (
+        <EmptyActivity>No favorites recorded yet.</EmptyActivity>
+      )}
+    </Layout>
+  );
+}