jonmumm · jonmumm · May 12, 2024
diff --git a/src/app/(home)/layout.tsx b/src/app/(home)/layout.tsx
@@ -21,7 +21,7 @@ import { getSession } from "@/lib/auth/session";
 import { formatDuration, shuffle, timeAgo } from "@/lib/utils";
 import {
   getProfileByUserId,
-  getRecentRecipesByUser,
+  getRecentLikedRecipesByUser,
   getSortedMediaForMultipleRecipes,
 } from "../../db/queries";
 import LayoutClient, { HomeTabs } from "./layout.client";
@@ -119,7 +119,7 @@ const MyRecipes = ({ userId }: { userId: string }) => {
   };
 
   const RecipeList = async () => {
-    const recipes = await getRecentRecipesByUser(db, userId);
+    const recipes = await getRecentLikedRecipesByUser(db, userId);
     const slugs = recipes.map((recipe) => recipe.slug);
     const quotes = shuffle(quoteList);
     const mediaBySlug = slugs.length

diff --git a/src/app/@craft/components.client.tsx b/src/app/@craft/components.client.tsx
@@ -1759,12 +1759,17 @@ export const SaveRecipeBadge = () => {
       )}
     >
       <Card className="shadow-xl p-3 flex flex-row gap-2 items-center text-sm">
-        <div className="flex flex-row gap-1 text-s items-center flex-1 border-r-2 border-solid border-slate-950 dark:border-slate-50">
+        <div
+          style={{ borderRightWidth: "1px" }}
+          className="text-s border-solid dark:border-slate-950 border-slate-50"
+        >
           <span className="text-muted-foreground">Added to</span>{" "}
-          <span className="truncate max-w-full">
-            {selectedList?.name || "My Cookbook"}
+          <span className="whitespace-nowrap inline-flex gap-1 items-center">
+            <span className="truncate max-w-full">
+              {selectedList?.name || "My Cookbook"}
+            </span>
+            <ExternalLinkIcon className="mr-2" size={15} />
           </span>
-          <ExternalLinkIcon className="mr-2" size={15} />
         </div>
         <Button
           event={{ type: "CHANGE_LIST" }}

diff --git a/src/app/components.client.tsx b/src/app/components.client.tsx
@@ -46,7 +46,7 @@ import {
   UserPreferenceType,
 } from "@/types";
 import { useStore } from "@nanostores/react";
-import { ChevronsUpDown, RefreshCwIcon, XIcon } from "lucide-react";
+import { ChevronsUpDown, HeartIcon, RefreshCwIcon, XIcon } from "lucide-react";
 import { Inter } from "next/font/google";
 import { usePathname, useSearchParams } from "next/navigation";
 import {
@@ -777,7 +777,7 @@ export const UpgradeAccountCard = () => {
             </li>
             <li>
               <span role="img" aria-label="Personal digests">
-               🗞️ 
+                🗞️
               </span>{" "}
               Weekly personal digests
             </li>
@@ -799,18 +799,21 @@ export const UpgradeAccountCard = () => {
               </CollapsibleTrigger>
               <CollapsibleContent className="p-2">
                 <p className="text-muted-foreground mb-4">
-                  Inspire your friends and family to cook with unlimited, personalized, easy
-                  to create recipes.
+                  Inspire your friends and family to cook with unlimited,
+                  personalized, easy to create recipes.
                 </p>
-                <Label className="text-muted-foreground">Email addresses (optional)</Label>
+                <Label className="text-muted-foreground">
+                  Email addresses (optional)
+                </Label>
                 <div className="flex flex-col gap-2">
                   <Input type="email" />
                   <Input type="email" />
                   <Input type="email" />
                   <Input type="email" />
                 </div>
                 <CardDescription className="mt-2">
-                  Enter emails for up to 4 people you would like to receive benefits.
+                  Enter emails for up to 4 people you would like to receive
+                  benefits.
                 </CardDescription>
               </CollapsibleContent>
             </Collapsible>
@@ -965,7 +968,7 @@ const useSortedRecipeLists = () => {
     (listsBySlug) =>
       listsBySlug
         ? Object.values(listsBySlug)
-            .filter(({ slug }) => slug !== "my-cookbook")
+            .filter(({ slug }) => slug !== "liked" && slug !== "make-later")
             .toSorted((a, b) => (a.createdAt > b.createdAt ? -1 : 1))
         : []
   );
@@ -1002,49 +1005,8 @@ const useSuggestedChefnames = () => {
 };
 
 export const SelectListCard = () => {
-  const SuggestedLists = () => {
-    const suggestedListNames = useSuggestedListNames();
-    const items = new Array(6).fill("");
-
-    return (
-      <div className="carousel carousel-center max-w-[100vw] space-x-2 pl-2 pr-4">
-        {items.map((item, index) => {
-          const name = suggestedListNames[index];
-
-          return (
-            <Card
-              key={index}
-              className="p-4 flex gap-1 items-center justify-between cursor-pointer carousel-item w-72"
-              event={{ type: "SELECT_LIST", listSlug: "my-cookbook" }}
-            >
-              <div className="grid gap-1">
-                <h4 className="font-semibold">
-                  {name ? (
-                    <>✨ {name}</>
-                  ) : (
-                    <SkeletonSentence className="h-6" numWords={2} />
-                  )}
-                </h4>
-              </div>
-              {name ? (
-                <Button size="sm" variant="outline">
-                  Create
-                </Button>
-              ) : (
-                <Button size="sm" variant="outline">
-                  <Skeleton className="h-4 w-10" />
-                </Button>
-              )}
-            </Card>
-          );
-        })}
-      </div>
-    );
-  };
-
   const RecentLists = () => {
     const lists = useSortedRecipeLists();
-    console.log({ lists });
     const isLoading = useIsLoadingRecipeLists();
     const items = new Array(6).fill("");
 
@@ -1146,9 +1108,11 @@ export const SelectListCard = () => {
         >
           + Create List
         </Button>
-        <MyCookbookCard />
+        <Separator />
+        <LikedRecipesCard />
+        <MakeLaterCard />
       </div>
-      <div className="mt-4">
+      <div className="mt-1">
         <Label className="uppercase text-xs text-muted-foreground mx-4">
           Recent
         </Label>
@@ -1228,16 +1192,35 @@ export const CreateNewListCard = () => {
   );
 };
 
-const MyCookbookCard = () => {
+const LikedRecipesCard = () => {
   return (
     <Card
       className="p-4 flex items-center justify-between cursor-pointer"
-      event={{ type: "SELECT_LIST", listSlug: "my-cookbook" }}
+      event={{ type: "SELECT_LIST", listSlug: "liked" }}
+    >
+      <div className="grid gap-2">
+        <h4 className="font-semibold">Liked Recipes</h4>
+        <p className="text-xs text-muted-foreground">
+          Recipes you have{" "}
+          <HeartIcon size={14} className="inline -translate-y-0.5" />
+          &apos;d.
+        </p>
+      </div>
+      <Button size="sm">Select</Button>
+    </Card>
+  );
+};
+
+const MakeLaterCard = () => {
+  return (
+    <Card
+      className="p-4 flex gap-2 items-center justify-between cursor-pointer"
+      event={{ type: "SELECT_LIST", listSlug: "make-later" }}
     >
       <div className="grid gap-2">
-        <h4 className="font-semibold">My Cookbook</h4>
+        <h4 className="font-semibold">Make Later</h4>
         <p className="text-xs text-muted-foreground">
-          Your personal collection of recipes.
+          Recipes you want to remember to make some time
         </p>
       </div>
       <Button size="sm">Select</Button>

diff --git a/src/app/history/page.tsx b/src/app/history/page.tsx
@@ -5,7 +5,7 @@ import { Skeleton } from "@/components/display/skeleton";
 import { Button } from "@/components/input/button";
 import { AsyncRenderFirstValue } from "@/components/util/async-render-first-value";
 import { AsyncRenderLastValue } from "@/components/util/async-render-last-value";
-import { getProfileLifetimePoints, getRecentRecipesByUser } from "@/db/queries";
+import { getProfileLifetimePoints, getRecentLikedRecipesByUser } from "@/db/queries";
 import { formatJoinDateStr } from "@/lib/utils";
 import { ChefHatIcon } from "lucide-react";
 import { RecipeListItem } from "../recipe/components";
@@ -26,7 +26,7 @@ export default async function Page() {
     redirect("/auth/signin");
   }
   const userId = session.user.id;
-  const recipes$ = from(getRecentRecipesByUser(db, userId)).pipe(shareReplay(1));
+  const recipes$ = from(getRecentLikedRecipesByUser(db, userId)).pipe(shareReplay(1));
 
   // Rest of your existing components like Username, Points, ClaimDate etc.
   const quotaLimit$ = of(3);

diff --git a/src/app/my-cookbook/page.tsx b/src/app/my-cookbook/page.tsx
@@ -8,7 +8,7 @@ import { AsyncRenderFirstValue } from "@/components/util/async-render-first-valu
 import { AsyncRenderLastValue } from "@/components/util/async-render-last-value";
 import quoteList from "@/data/quotes.json";
 import { db } from "@/db";
-import { getRecentRecipesByCreator, getRecentRecipesByUser, updateRecipeCreator } from "@/db/queries";
+import { getRecentRecipesByCreator, getRecentLikedRecipesByUser, updateRecipeCreator } from "@/db/queries";
 import { getCurrentUserId } from "@/lib/auth/session";
 import { getGuestId } from "@/lib/browser-session";
 import { assert, shuffle } from "@/lib/utils";
@@ -40,7 +40,7 @@ export default async function Page() {
 
   const [recipes$] = [
     createdBy
-      ? from(getRecentRecipesByUser(db, createdBy)).pipe(shareReplay(1))
+      ? from(getRecentLikedRecipesByUser(db, createdBy)).pipe(shareReplay(1))
       : of([]),
   ];
   // const browserSessionId = await getGuestId();

diff --git a/src/app/recipe/components.tsx b/src/app/recipe/components.tsx
@@ -25,7 +25,7 @@ import {
   getBestRecipes,
   getHotRecipes,
   getRecentRecipesByProfile,
-  getRecentRecipesByUser,
+  getRecentLikedRecipesByUser,
 } from "../../db/queries";
 import { upvoteById } from "../recipe/actions";
 import { RecipePropsProvider } from "./context";
@@ -35,7 +35,7 @@ type Recipes =
   | Awaited<ReturnType<typeof getBestRecipes>>[0]
   | Awaited<ReturnType<typeof getRecentRecipes>>[0]
   | Awaited<ReturnType<typeof getRecentRecipesByProfile>>[0]
-  | Awaited<ReturnType<typeof getRecentRecipesByUser>>[0];
+  | Awaited<ReturnType<typeof getRecentLikedRecipesByUser>>[0];
 
 interface RecipeListItemProps {
   recipe: Recipes; // Define RecipeType according to your data structure

diff --git a/src/db/queries/index.tsx b/src/db/queries/index.tsx
@@ -266,11 +266,11 @@ export const getRecipesByListSlug = async (
   return await withDatabaseSpan(query, "getRecipesByListSlug").execute();
 };
 
-export const getRecentRecipesByUser = async (
+export const getRecentLikedRecipesByUser = async (
   dbOrTransaction: DbOrTransaction,
   userId: string
 ) => {
-  return getRecipesByListSlug(dbOrTransaction, userId, "my-cookbook");
+  return getRecipesByListSlug(dbOrTransaction, userId, "liked");
 };
 
 export const getRecentRecipesByCreator = async (createdBy: string) => {