From dbe6d5b46902d6dc7c7af315a1c4b28010c6da74 Mon Sep 17 00:00:00 2001
From: Lautaro Beck <lautarobeck.programmer@gmail.com>
Date: Fri, 6 Feb 2026 17:16:36 -0500
Subject: [PATCH 1/7] Add pointer cursor to favorites button

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 frontend/components/listings/detail/ListingDetail.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/frontend/components/listings/detail/ListingDetail.tsx b/frontend/components/listings/detail/ListingDetail.tsx
index 3eec7d3..210b5ab 100644
--- a/frontend/components/listings/detail/ListingDetail.tsx
+++ b/frontend/components/listings/detail/ListingDetail.tsx
@@ -44,6 +44,7 @@ export const ListingDetail = ({ listing, initialIsFavorited }: Props) => {
           <Share className="h-5 w-5" />
           <button
             type="button"
+            style={{ cursor: "pointer" }}
             onClick={handleToggleFavorite}
             aria-pressed={isInsideFavorites}
             aria-label={isInsideFavorites ? "Remove from favorites" : "Add to favorites"}

From 165bee53bfcb89fea2496e45305bd023739393c7 Mon Sep 17 00:00:00 2001
From: Lautaro Beck <becklautaro06@gmail.com>
Date: Fri, 13 Feb 2026 17:07:19 -0500
Subject: [PATCH 2/7] Correcting issues

---
 backend/market/views.py                       |   4 +-
 frontend/app/create/item/page.tsx             |   7 +-
 frontend/app/create/sublet/page.tsx           |   7 +-
 frontend/app/items/[id]/page.tsx              |   3 +-
 frontend/app/sublets/[id]/page.tsx            |   3 +-
 frontend/components/common/FormSelect.tsx     |   7 +-
 frontend/components/listings/ListingForm.tsx  | 498 ------------------
 .../listings/detail/ListingDetail.tsx         |  78 ++-
 frontend/components/navbar/Navbar.tsx         |  20 +-
 frontend/components/navbar/NavbarActions.tsx  |  14 +-
 frontend/lib/types.ts                         |   7 +-
 frontend/lib/validations.ts                   | 112 ++--
 12 files changed, 159 insertions(+), 601 deletions(-)
 delete mode 100644 frontend/components/listings/ListingForm.tsx

diff --git a/backend/market/views.py b/backend/market/views.py
index a4f38ac..425259f 100644
--- a/backend/market/views.py
+++ b/backend/market/views.py
@@ -262,7 +262,7 @@ def create(self, request, *args, **kwargs):
             )
         listing = get_object_or_404(Listing, id=listing_id)
         favorites.add(listing)
-        return Response({"favorited": True}, status=status.HTTP_200_OK)
+        return Response({"favorited": True}, status=status.HTTP_201_OK)
 
     def destroy(self, request, *args, **kwargs):
         listing_id = int(self.kwargs["listing_id"])
@@ -271,7 +271,7 @@ def destroy(self, request, *args, **kwargs):
         if listing not in request.user.listings_favorited.all():
             return Response(
                 {"favorited": False, "detail": "Favorite does not exist"},
-                status=status.HTTP_200_OK,
+                status=status.HTTP_404_OK,
             )
 
         request.user.listings_favorited.remove(listing)
diff --git a/frontend/app/create/item/page.tsx b/frontend/app/create/item/page.tsx
index d7f055e..677e4f4 100644
--- a/frontend/app/create/item/page.tsx
+++ b/frontend/app/create/item/page.tsx
@@ -1,17 +1,14 @@
 import Link from "next/link";
 import { BackButton } from "@/components/listings/detail/BackButton";
-import { ListingForm } from "@/components/listings/ListingForm";
 
 export default function CreateItemPage() {
   return (
-    <div className="w-full mx-auto container max-w-[96rem] px-12 pt-4 pb-12">
+    <div className="container mx-auto w-full max-w-[96rem] px-12 pt-4 pb-12">
       <Link href="/items">
         <BackButton />
       </Link>
 
-      <h1 className="text-3xl font-bold pt-2 mb-8">New Item</h1>
-
-      <ListingForm listingType="item" />
+      <h1 className="mb-8 pt-2 text-3xl font-bold">New Item</h1>
     </div>
   );
 }
diff --git a/frontend/app/create/sublet/page.tsx b/frontend/app/create/sublet/page.tsx
index 91abbb0..ca76bf7 100644
--- a/frontend/app/create/sublet/page.tsx
+++ b/frontend/app/create/sublet/page.tsx
@@ -1,17 +1,14 @@
 import Link from "next/link";
 import { BackButton } from "@/components/listings/detail/BackButton";
-import { ListingForm } from "@/components/listings/ListingForm";
 
 export default function CreateSubletPage() {
   return (
-    <div className="w-full mx-auto container max-w-[96rem] px-12 pt-6 pb-12">
+    <div className="container mx-auto w-full max-w-[96rem] px-12 pt-6 pb-12">
       <Link href="/sublets">
         <BackButton />
       </Link>
 
-      <h1 className="text-3xl font-bold pt-2 mb-8">New Sublet</h1>
-
-      <ListingForm listingType="sublet" />
+      <h1 className="mb-8 pt-2 text-3xl font-bold">New Sublet</h1>
     </div>
   );
 }
diff --git a/frontend/app/items/[id]/page.tsx b/frontend/app/items/[id]/page.tsx
index 32d9d21..36bffb4 100644
--- a/frontend/app/items/[id]/page.tsx
+++ b/frontend/app/items/[id]/page.tsx
@@ -5,7 +5,6 @@ export default async function ItemPage({ params }: { params: Promise<{ id: strin
   const { id } = await params;
   const item = await getListing(id);
   const favorites = await getUsersFavorites().catch(() => null);
-  const isFavorited = Boolean(favorites?.results?.some((favorite) => favorite.id === item.id));
 
-  return <ListingDetail listing={item} initialIsFavorited={isFavorited} />;
+  return <ListingDetail listing={item} initialFavorites={favorites} />;
 }
diff --git a/frontend/app/sublets/[id]/page.tsx b/frontend/app/sublets/[id]/page.tsx
index 961dfc7..231e124 100644
--- a/frontend/app/sublets/[id]/page.tsx
+++ b/frontend/app/sublets/[id]/page.tsx
@@ -5,7 +5,6 @@ export default async function SubletPage({ params }: { params: Promise<{ id: str
   const { id } = await params;
   const sublet = await getListing(id);
   const favorites = await getUsersFavorites().catch(() => null);
-  const isFavorited = Boolean(favorites?.results?.some((favorite) => favorite.id === sublet.id));
 
-  return <ListingDetail listing={sublet} initialIsFavorited={isFavorited} />;
+  return <ListingDetail listing={sublet} initialFavorites={favorites} />;
 }
diff --git a/frontend/components/common/FormSelect.tsx b/frontend/components/common/FormSelect.tsx
index 64fcab6..78e5a34 100644
--- a/frontend/components/common/FormSelect.tsx
+++ b/frontend/components/common/FormSelect.tsx
@@ -44,14 +44,15 @@ export function FormSelect(props: FormSelectProps) {
     placeholder = "Select an option",
     error,
     touched,
-    required,
     optional,
     helperText,
   } = props;
 
   const stringValue = props.asNumber
-    ? props.value !== undefined ? String(props.value) : ""
-    : props.value ?? "";
+    ? props.value !== undefined
+      ? String(props.value)
+      : ""
+    : (props.value ?? "");
 
   const handleChange = (val: string) => {
     if (props.asNumber) {
diff --git a/frontend/components/listings/ListingForm.tsx b/frontend/components/listings/ListingForm.tsx
deleted file mode 100644
index ab73ffe..0000000
--- a/frontend/components/listings/ListingForm.tsx
+++ /dev/null
@@ -1,498 +0,0 @@
-"use client";
-
-import { useState, useCallback } from "react";
-import { useRouter } from "next/navigation";
-import { useForm, Controller } from "react-hook-form";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { useMutation, useQueryClient } from "@tanstack/react-query";
-import { toast } from "sonner";
-import { ImagePlus, X } from "lucide-react";
-import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
-import { Textarea } from "@/components/ui/textarea";
-import { FormField } from "@/components/common/FormField";
-import { FormSelect } from "@/components/common/FormSelect";
-import {
-  CATEGORY_OPTIONS,
-  CONDITION_OPTIONS,
-  BEDS_OPTIONS,
-  BATHS_OPTIONS,
-} from "@/lib/constants";
-import { createListing } from "@/lib/actions";
-import { createItemSchema, createSubletSchema } from "@/lib/validations";
-import type { CreateItemPayload, CreateSubletPayload } from "@/lib/types";
-
-type ListingType = "item" | "sublet";
-
-type ListingFormProps = {
-  listingType: ListingType;
-};
-
-const config = {
-  item: {
-    schema: createItemSchema,
-    labels: {
-      title: "Product Name",
-      titlePlaceholder: "Enter Product Name",
-      price: "Price",
-      description: "Item Description",
-      descriptionPlaceholder: "Enter Description (size, details, etc.)",
-      media: "Product Media",
-    },
-    successMessage: "Listing created successfully!",
-    queryKey: "items",
-    redirectPath: "/items",
-  },
-  sublet: {
-    schema: createSubletSchema,
-    labels: {
-      title: "Listing Title",
-      titlePlaceholder: "e.g., Spacious 2BR near campus",
-      price: "Monthly Rent",
-      description: "Description",
-      descriptionPlaceholder: "Describe the sublet (amenities, location details, etc.)",
-      media: "Property Photos",
-    },
-    successMessage: "Sublet listing created successfully!",
-    queryKey: "sublets",
-    redirectPath: "/sublets",
-  },
-} as const;
-
-// Combined form values type for internal use
-type FormValues = {
-  title: string;
-  price: string;
-  description: string;
-  negotiable: boolean;
-  expires_at: string;
-  external_link: string;
-  tags: string[];
-  // Item-specific
-  condition?: string;
-  category?: string;
-  // Sublet-specific
-  address?: string;
-  beds?: number;
-  baths?: number;
-  start_date?: string;
-  end_date?: string;
-};
-
-export function ListingForm({ listingType }: ListingFormProps) {
-  const router = useRouter();
-  const queryClient = useQueryClient();
-  const [images, setImages] = useState<File[]>([]);
-  const [isDragging, setIsDragging] = useState(false);
-
-  const isItem = listingType === "item";
-  const currentConfig = config[listingType];
-
-  const {
-    control,
-    handleSubmit,
-    formState: { errors, touchedFields },
-  } = useForm<FormValues>({
-    resolver: zodResolver(currentConfig.schema) as any,
-    mode: "onChange",
-    defaultValues: {
-      title: "",
-      price: "",
-      description: "",
-      negotiable: false,
-      expires_at: "",
-      external_link: "",
-      tags: [],
-      ...(isItem && { condition: "", category: "" }),
-      ...(!isItem && { address: "", beds: 0, baths: 0, start_date: "", end_date: "" }),
-    },
-  });
-
-  const { mutate, isPending } = useMutation({
-    mutationFn: createListing,
-    onSuccess: (data) => {
-      toast.success(currentConfig.successMessage);
-      queryClient.invalidateQueries({ queryKey: [currentConfig.queryKey] });
-      router.push(`${currentConfig.redirectPath}/${data.id}`);
-    },
-    onError: (error: Error) => {
-      toast.error(error.message || "Failed to create listing");
-    },
-  });
-
-  const handleDragOver = useCallback((e: React.DragEvent) => {
-    e.preventDefault();
-    setIsDragging(true);
-  }, []);
-
-  const handleDragLeave = useCallback((e: React.DragEvent) => {
-    e.preventDefault();
-    setIsDragging(false);
-  }, []);
-
-  const handleDrop = useCallback((e: React.DragEvent) => {
-    e.preventDefault();
-    setIsDragging(false);
-    const droppedFiles = Array.from(e.dataTransfer.files).filter((file) =>
-      file.type.startsWith("image/")
-    );
-    setImages((prev) => [...prev, ...droppedFiles].slice(0, 10));
-  }, []);
-
-  const handleFileSelect = useCallback(
-    (e: React.ChangeEvent<HTMLInputElement>) => {
-      if (e.target.files) {
-        const selectedFiles = Array.from(e.target.files).filter((file) =>
-          file.type.startsWith("image/")
-        );
-        setImages((prev) => [...prev, ...selectedFiles].slice(0, 10));
-      }
-    },
-    []
-  );
-
-  const removeImage = useCallback((index: number) => {
-    setImages((prev) => prev.filter((_, i) => i !== index));
-  }, []);
-
-  const onSubmit = (data: any) => {
-    const basePayload = {
-      title: data.title,
-      description: data.description,
-      price: String(data.price),
-      negotiable: data.negotiable,
-      expires_at: data.expires_at ? new Date(data.expires_at).toISOString() : "",
-      external_link: data.external_link || undefined,
-      tags: data.tags,
-    };
-
-    const payload = isItem
-      ? ({
-          ...basePayload,
-          listing_type: "item",
-          additional_data: {
-            condition: data.condition,
-            category: data.category,
-          },
-        } as CreateItemPayload)
-      : ({
-          ...basePayload,
-          listing_type: "sublet",
-          additional_data: {
-            address: data.address,
-            beds: data.beds,
-            baths: data.baths,
-            start_date: data.start_date,
-            end_date: data.end_date,
-          },
-        } as CreateSubletPayload);
-
-    mutate(payload);
-  };
-
-  return (
-    <form onSubmit={handleSubmit(onSubmit)}>
-      <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
-        <div className="space-y-6">
-          <Controller
-            name="title"
-            control={control}
-            render={({ field }) => (
-              <FormField
-                label={currentConfig.labels.title}
-                error={errors.title?.message}
-                touched={touchedFields.title}
-              >
-                <Input
-                  {...field}
-                  placeholder={currentConfig.labels.titlePlaceholder}
-                  aria-invalid={!!errors.title}
-                />
-              </FormField>
-            )}
-          />
-
-          <Controller
-            name="price"
-            control={control}
-            render={({ field }) => (
-              <FormField
-                label={currentConfig.labels.price}
-                error={errors.price?.message}
-                touched={touchedFields.price}
-              >
-                <div className="relative">
-                  <span className="absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground">
-                    $
-                  </span>
-                  <Input
-                    {...field}
-                    type="number"
-                    min="0"
-                    step="0.01"
-                    placeholder="0.00"
-                    className="pl-7"
-                    aria-invalid={!!errors.price}
-                  />
-                  {!isItem && (
-                    <span className="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground">
-                      /mo
-                    </span>
-                  )}
-                </div>
-              </FormField>
-            )}
-          />
-
-          {/* Sublet-specific: Address */}
-          {!isItem && (
-            <Controller
-              name="address"
-              control={control}
-              render={({ field }) => (
-                <FormField
-                  label="Address"
-                  error={errors.address?.message}
-                  touched={touchedFields.address}
-                >
-                  <Input
-                    {...field}
-                    placeholder="123 Main St, Philadelphia, PA 19104"
-                    aria-invalid={!!errors.address}
-                  />
-                </FormField>
-              )}
-            />
-          )}
-
-          {/* Sublet-specific: Beds and Baths */}
-          {!isItem && (
-            <div className="grid grid-cols-2 gap-4">
-              <Controller
-                name="beds"
-                control={control}
-                render={({ field }) => (
-                  <FormSelect
-                    label="Bedrooms"
-                    value={field.value}
-                    onChange={field.onChange}
-                    options={BEDS_OPTIONS}
-                    placeholder="Beds"
-                    error={errors.beds?.message}
-                    touched={touchedFields.beds}
-                    asNumber
-                  />
-                )}
-              />
-
-              <Controller
-                name="baths"
-                control={control}
-                render={({ field }) => (
-                  <FormSelect
-                    label="Bathrooms"
-                    value={field.value}
-                    onChange={field.onChange}
-                    options={BATHS_OPTIONS}
-                    placeholder="Baths"
-                    error={errors.baths?.message}
-                    touched={touchedFields.baths}
-                    asNumber
-                  />
-                )}
-              />
-            </div>
-          )}
-
-          {/* Sublet-specific: Start and End Date */}
-          {!isItem && (
-            <div className="grid grid-cols-2 gap-4">
-              <Controller
-                name="start_date"
-                control={control}
-                render={({ field }) => (
-                  <FormField
-                    label="Start Date"
-                    error={errors.start_date?.message}
-                    touched={touchedFields.start_date}
-                  >
-                    <Input
-                      {...field}
-                      type="date"
-                      aria-invalid={!!errors.start_date}
-                    />
-                  </FormField>
-                )}
-              />
-
-              <Controller
-                name="end_date"
-                control={control}
-                render={({ field }) => (
-                  <FormField
-                    label="End Date"
-                    error={errors.end_date?.message}
-                    touched={touchedFields.end_date}
-                  >
-                    <Input
-                      {...field}
-                      type="date"
-                      aria-invalid={!!errors.end_date}
-                    />
-                  </FormField>
-                )}
-              />
-            </div>
-          )}
-
-          <Controller
-            name="description"
-            control={control}
-            render={({ field }) => (
-              <FormField
-                label={currentConfig.labels.description}
-                error={errors.description?.message}
-                touched={touchedFields.description}
-              >
-                <Textarea
-                  {...field}
-                  placeholder={currentConfig.labels.descriptionPlaceholder}
-                  className="min-h-[100px]"
-                  aria-invalid={!!errors.description}
-                />
-              </FormField>
-            )}
-          />
-
-          {/* Item-specific: Category */}
-          {isItem && (
-            <Controller
-              name="category"
-              control={control}
-              render={({ field }) => (
-                <FormSelect
-                  label="Product Category"
-                  value={field.value}
-                  onChange={field.onChange}
-                  options={CATEGORY_OPTIONS}
-                  placeholder="Select Category"
-                  error={errors.category?.message}
-                  touched={touchedFields.category}
-                />
-              )}
-            />
-          )}
-
-          {/* Item-specific: Condition */}
-          {isItem && (
-            <Controller
-              name="condition"
-              control={control}
-              render={({ field }) => (
-                <FormSelect
-                  label="Condition"
-                  value={field.value}
-                  onChange={field.onChange}
-                  options={CONDITION_OPTIONS}
-                  placeholder="Select Condition"
-                  error={errors.condition?.message}
-                  touched={touchedFields.condition}
-                />
-              )}
-            />
-          )}
-
-          <Controller
-            name="expires_at"
-            control={control}
-            render={({ field }) => (
-              <FormField
-                label="Listing Expiration Date"
-                error={errors.expires_at?.message}
-                touched={touchedFields.expires_at}
-              >
-                <Input
-                  {...field}
-                  type="date"
-                  aria-invalid={!!errors.expires_at}
-                />
-              </FormField>
-            )}
-            />        
-
-        </div>
-
-        <div className="space-y-6">
-          <div>
-            <label className="text-sm font-medium block mb-2">
-              {currentConfig.labels.media}
-            </label>
-            <div
-              className={`border-2 border-dashed rounded-lg p-8 text-center transition-colors ${
-                isDragging
-                  ? "border-blue-500 bg-blue-50"
-                  : "border-blue-400 bg-blue-50/50"
-              }`}
-              onDragOver={handleDragOver}
-              onDragLeave={handleDragLeave}
-              onDrop={handleDrop}
-            >
-              <div className="flex flex-col items-center justify-center min-h-[250px]">
-                <div className="w-16 h-16 rounded-lg bg-gray-100 flex items-center justify-center mb-4">
-                  <ImagePlus className="w-8 h-8 text-gray-400" />
-                </div>
-                <p className="text-gray-600 mb-1">
-                  Drop your images here or{" "}
-                  <label className="text-blue-500 hover:text-blue-600 cursor-pointer font-medium">
-                    browse computer
-                    <input
-                      type="file"
-                      multiple
-                      accept="image/png,image/jpeg,image/heic"
-                      className="hidden"
-                      onChange={handleFileSelect}
-                    />
-                  </label>
-                </p>
-                <p className="text-xs text-gray-400">Insert up to 10 images</p>
-                <p className="text-xs text-gray-400">Supports: PNG, JPG, HEIC</p>
-              </div>
-
-              {images.length > 0 && (
-                <div className="mt-4 grid grid-cols-5 gap-2">
-                  {images.map((image, index) => (
-                    <div
-                      key={index}
-                      className="relative aspect-square rounded-lg overflow-hidden bg-gray-100 group"
-                    >
-                      <div className="w-full h-full flex items-center justify-center text-xs text-gray-500">
-                        {image.name.slice(0, 8)}...
-                      </div>
-                      <button
-                        type="button"
-                        onClick={() => removeImage(index)}
-                        className="absolute top-1 right-1 w-5 h-5 bg-red-500 rounded-full flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity"
-                      >
-                        <X className="w-3 h-3 text-white" />
-                      </button>
-                    </div>
-                  ))}
-                </div>
-              )}
-            </div>
-          </div>
-
-          <div className="space-y-3 pt-4">
-            <Button
-              type="submit"
-              className="w-full h-12 bg-blue-500 hover:bg-blue-600 text-white"
-              disabled={isPending}
-            >
-              {isPending ? "Creating..." : "Create Listing"}
-            </Button>
-          </div>
-        </div>
-      </div>
-    </form>
-  );
-}
diff --git a/frontend/components/listings/detail/ListingDetail.tsx b/frontend/components/listings/detail/ListingDetail.tsx
index 210b5ab..25cb01c 100644
--- a/frontend/components/listings/detail/ListingDetail.tsx
+++ b/frontend/components/listings/detail/ListingDetail.tsx
@@ -1,39 +1,81 @@
 "use client";
 
-import { useState } from "react";
+import { useMemo } from "react";
 import { Heart, Share } from "lucide-react";
-import { Item, Sublet } from "@/lib/types";
+import { Item, PaginatedResponse, Sublet } from "@/lib/types";
 import { ListingActions } from "@/components/listings/detail/ListingActions";
 import { ListingImageGallery } from "@/components/listings/detail/ListingImageGallery";
 import { ListingInfo } from "@/components/listings/detail/ListingInfo";
 import { UserCard } from "@/components/listings/detail/UserCard";
 import { BackButton } from "@/components/listings/detail/BackButton";
-import { addToUsersFavorites, deleteFromUsersFavorites } from "@/lib/actions";
+import { addToUsersFavorites, deleteFromUsersFavorites, getUsersFavorites } from "@/lib/actions";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 
 interface Props {
   listing: Item | Sublet;
-  initialIsFavorited: boolean;
+  initialFavorites: PaginatedResponse<Item | Sublet> | null;
 }
 
-export const ListingDetail = ({ listing, initialIsFavorited }: Props) => {
+export const ListingDetail = ({ listing, initialFavorites }: Props) => {
   const listingType = listing.listing_type;
   const priceLabel = listingType === "sublet" ? "/mo" : undefined;
   const listingOwnerLabel = listingType === "item" ? "Seller" : "Owner";
-  const [isInsideFavorites, setIsInsideFavorites] = useState(initialIsFavorited);
+  const queryClient = useQueryClient();
+  const favoritesQuery = useQuery({
+    queryKey: ["favorites"],
+    queryFn: getUsersFavorites,
+    initialData: initialFavorites ?? undefined,
+    enabled: initialFavorites !== null,
+  });
 
-  const handleToggleFavorite = async () => {
-    try {
-      if (isInsideFavorites) {
-        await deleteFromUsersFavorites(listing.id);
-        setIsInsideFavorites(false);
-      } else {
+  const isInsideFavorites = useMemo(
+    () => !!favoritesQuery.data?.results?.some((favorite) => favorite.id === listing.id),
+    [favoritesQuery.data, listing.id]
+  );
+
+  const toggleFavoriteMutation = useMutation({
+    mutationFn: async (shouldFavorite: boolean) => {
+      if (shouldFavorite) {
         await addToUsersFavorites(listing.id);
-        setIsInsideFavorites(true);
+      } else {
+        await deleteFromUsersFavorites(listing.id);
       }
-    } catch (err) {
-      // Ignore favorite toggle errors in UI
-      console.log(err);
-    }
+    },
+    onMutate: async (shouldFavorite: boolean) => {
+      await queryClient.cancelQueries({ queryKey: ["favorites"] });
+      const previous = queryClient.getQueryData<PaginatedResponse<Item | Sublet>>(["favorites"]);
+
+      if (previous) {
+        const exists = previous.results?.some((favorite) => favorite.id === listing.id);
+        let results = previous.results ?? [];
+
+        if (shouldFavorite && !exists) {
+          results = [...results, listing];
+        }
+        if (!shouldFavorite && exists) {
+          results = results.filter((favorite) => favorite.id !== listing.id);
+        }
+
+        queryClient.setQueryData<PaginatedResponse<Item | Sublet>>(["favorites"], {
+          ...previous,
+          results,
+        });
+      }
+
+      return { previous };
+    },
+    onError: (_error, _shouldFavorite, context) => {
+      if (context?.previous) {
+        queryClient.setQueryData(["favorites"], context.previous);
+      }
+    },
+    onSettled: () => {
+      queryClient.invalidateQueries({ queryKey: ["favorites"] });
+    },
+  });
+
+  const handleToggleFavorite = async () => {
+    toggleFavoriteMutation.mutate(!isInsideFavorites);
   };
 
   return (
@@ -44,7 +86,7 @@ export const ListingDetail = ({ listing, initialIsFavorited }: Props) => {
           <Share className="h-5 w-5" />
           <button
             type="button"
-            style={{ cursor: "pointer" }}
+            className="cursor-pointer"
             onClick={handleToggleFavorite}
             aria-pressed={isInsideFavorites}
             aria-label={isInsideFavorites ? "Remove from favorites" : "Add to favorites"}
diff --git a/frontend/components/navbar/Navbar.tsx b/frontend/components/navbar/Navbar.tsx
index e4bbbd3..c56a614 100644
--- a/frontend/components/navbar/Navbar.tsx
+++ b/frontend/components/navbar/Navbar.tsx
@@ -26,9 +26,7 @@ export const Navbar = () => {
   const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
 
   const showListingsTabs = isAllListingsPage(pathname);
-  const createNewConfig = showListingsTabs
-    ? ALL_LISTINGS_PAGES_CONFIG[pathname]
-    : undefined;
+  const createNewConfig = showListingsTabs ? ALL_LISTINGS_PAGES_CONFIG[pathname] : undefined;
 
   const toggleMobileMenu = () => setIsMobileMenuOpen(!isMobileMenuOpen);
   const closeMobileMenu = () => setIsMobileMenuOpen(false);
@@ -48,13 +46,15 @@ export const Navbar = () => {
               </div>
             )}
 
-            {createNewConfig && <NavbarActions
-              createNewText={createNewConfig.text}
-              createNewHref={createNewConfig.href}
-              mobileShowHamburger={showListingsTabs}
-              isMobileMenuOpen={isMobileMenuOpen}
-              onToggleMobileMenu={toggleMobileMenu}
-            />}
+            {createNewConfig && (
+              <NavbarActions
+                createNewText={createNewConfig.text}
+                createNewHref={createNewConfig.href}
+                mobileShowHamburger={showListingsTabs}
+                isMobileMenuOpen={isMobileMenuOpen}
+                onToggleMobileMenu={toggleMobileMenu}
+              />
+            )}
           </div>
         </div>
       </div>
diff --git a/frontend/components/navbar/NavbarActions.tsx b/frontend/components/navbar/NavbarActions.tsx
index e2698a4..f952bc8 100644
--- a/frontend/components/navbar/NavbarActions.tsx
+++ b/frontend/components/navbar/NavbarActions.tsx
@@ -33,27 +33,29 @@ export const NavbarActions = ({
   return (
     <div className="flex items-center gap-2 sm:gap-3">
       {/* desktop only new listing button */}
-      {<Button
+      {
+        <Button
           variant="outline"
-          className="hidden md:flex gap-2 border-primary text-primary hover:bg-primary hover:text-primary-foreground"
+          className="border-primary text-primary hover:bg-primary hover:text-primary-foreground hidden gap-2 md:flex"
           asChild
         >
           <Link href={createNewHref} aria-label={createNewText}>
-            <Plus className="w-4 h-4" />
+            <Plus className="h-4 w-4" />
             <span>{createNewText}</span>
           </Link>
         </Button>
       }
 
       {/* mobile only new listing button (icon only) */}
-      {<Button
+      {
+        <Button
           variant="outline"
           size="icon"
-          className="md:hidden border-primary text-primary hover:bg-primary hover:text-primary-foreground"
+          className="border-primary text-primary hover:bg-primary hover:text-primary-foreground md:hidden"
           asChild
         >
           <Link href={createNewHref} aria-label={createNewText}>
-            <Plus className="w-4 h-4" />
+            <Plus className="h-4 w-4" />
           </Link>
         </Button>
       }
diff --git a/frontend/lib/types.ts b/frontend/lib/types.ts
index 62dbf4e..7696c04 100644
--- a/frontend/lib/types.ts
+++ b/frontend/lib/types.ts
@@ -139,7 +139,6 @@ export type ListingFiltersMap = {
   sublets: SubletFilters;
 };
 
-
 // ------------------------------------------------------------
 // create payload types
 // ------------------------------------------------------------
@@ -151,14 +150,14 @@ type BaseCreatePayload = {
   expires_at: string;
   external_link?: string;
   tags: string[];
-}
+};
 
 export type CreateItemPayload = BaseCreatePayload & {
   listing_type: "item";
   additional_data: ItemAdditionalData;
-}
+};
 
 export type CreateSubletPayload = BaseCreatePayload & {
   listing_type: "sublet";
   additional_data: SubletAdditionalData;
-}
+};
diff --git a/frontend/lib/validations.ts b/frontend/lib/validations.ts
index 755e7f2..000c998 100644
--- a/frontend/lib/validations.ts
+++ b/frontend/lib/validations.ts
@@ -55,26 +55,34 @@ export const offerSchema = z.object({
 
 export type OfferFormData = z.infer<typeof offerSchema>;
 
-
-
-
 export const createItemSchema = z.object({
-  title: z.string().trim().min(1, "Title is required").max(200, "Title must be less than 200 characters"),
-  description: z.string().trim().min(1, "Description is required").max(5000, "Description must be less than 5000 characters"),
-  price: z.string()
+  title: z
+    .string()
+    .trim()
+    .min(1, "Title is required")
+    .max(200, "Title must be less than 200 characters"),
+  description: z
+    .string()
+    .trim()
+    .min(1, "Description is required")
+    .max(5000, "Description must be less than 5000 characters"),
+  price: z
+    .string()
     .trim()
     .min(1, "Price is required")
-    .refine((s) => /^(\$?\d{1,3}(,\d{3})*|\$?\d+)(\.\d{1,2})?$/.test(s), { message: "Price must be a valid amount" })
+    .refine((s) => /^(\$?\d{1,3}(,\d{3})*|\$?\d+)(\.\d{1,2})?$/.test(s), {
+      message: "Price must be a valid amount",
+    })
     .transform((s) => Number(s.replace(/[$,]/g, "")))
     .refine((n) => n > 0, { message: "Price must be a positive number" }),
   negotiable: z.coerce.boolean().default(false),
-  expires_at: z.string()
+  expires_at: z
+    .string()
     // .datetime("Expiration must be a valid date/time")
     .optional()
-    .refine(
-      (val) => !val || new Date(val).getTime() > Date.now(),
-      { message: "Expiration must be in the future" }
-    ),
+    .refine((val) => !val || new Date(val).getTime() > Date.now(), {
+      message: "Expiration must be in the future",
+    }),
   external_link: z.string().trim().url("Must be a valid URL").optional().or(z.literal("")),
   tags: z.array(z.string().trim()).default([]),
   condition: z.string().trim().min(1, "Condition is required"),
@@ -83,38 +91,50 @@ export const createItemSchema = z.object({
 
 export type CreateItemFormData = z.infer<typeof createItemSchema>;
 
+export const createSubletSchema = z
+  .object({
+    title: z
+      .string()
+      .trim()
+      .min(1, "Title is required")
+      .max(200, "Title must be less than 200 characters"),
+    description: z
+      .string()
+      .trim()
+      .min(1, "Description is required")
+      .max(5000, "Description must be less than 5000 characters"),
+    price: z
+      .string()
+      .trim()
+      .min(1, "Price is required")
+      .refine((s) => /^(\$?\d{1,3}(,\d{3})*|\$?\d+)(\.\d{1,2})?$/.test(s), {
+        message: "Price must be a valid amount",
+      })
+      .transform((s) => Number(s.replace(/[$,]/g, "")))
+      .refine((n) => n > 0, { message: "Price must be a positive number" }),
+    negotiable: z.coerce.boolean().default(false),
+    expires_at: z
+      .string()
+      // .datetime("Expiration must be a valid date/time")
+      .optional()
+      .refine((val) => !val || new Date(val).getTime() > Date.now(), {
+        message: "Expiration must be in the future",
+      }),
+    external_link: z.string().trim().url("Must be a valid URL").optional().or(z.literal("")),
+    tags: z.array(z.string().trim()).default([]),
+    address: z.string().trim().min(1, "Address is required"),
+    beds: z.coerce.number().int().min(0, "Beds must be 0 or more"),
+    baths: z.coerce.number().int().min(0, "Baths must be 0 or more"),
+    start_date: z.string().regex(/^\d{4}-\d{2}-\d{2}$/, "Start date is required"),
+    end_date: z.string().regex(/^\d{4}-\d{2}-\d{2}$/, "End date is required"),
+  })
+  .refine(
+    (data) => {
+      const start = Date.parse(data.start_date);
+      const end = Date.parse(data.end_date);
+      return Number.isFinite(start) && Number.isFinite(end) && end > start;
+    },
+    { message: "End date must be after start date", path: ["end_date"] }
+  );
 
-export const createSubletSchema = z.object({
-  title: z.string().trim().min(1, "Title is required").max(200, "Title must be less than 200 characters"),
-  description: z.string().trim().min(1, "Description is required").max(5000, "Description must be less than 5000 characters"),
-  price: z.string()
-    .trim()
-    .min(1, "Price is required")
-    .refine((s) => /^(\$?\d{1,3}(,\d{3})*|\$?\d+)(\.\d{1,2})?$/.test(s), { message: "Price must be a valid amount" })
-    .transform((s) => Number(s.replace(/[$,]/g, "")))
-    .refine((n) => n > 0, { message: "Price must be a positive number" }),
-  negotiable: z.coerce.boolean().default(false),
-  expires_at: z.string()
-    // .datetime("Expiration must be a valid date/time")
-    .optional()
-    .refine(
-      (val) => !val || new Date(val).getTime() > Date.now(),
-      { message: "Expiration must be in the future" }
-    ),
-  external_link: z.string().trim().url("Must be a valid URL").optional().or(z.literal("")),
-  tags: z.array(z.string().trim()).default([]),
-  address: z.string().trim().min(1, "Address is required"),
-  beds: z.coerce.number().int().min(0, "Beds must be 0 or more"),
-  baths: z.coerce.number().int().min(0, "Baths must be 0 or more"),
-  start_date: z.string().regex(/^\d{4}-\d{2}-\d{2}$/, "Start date is required"),
-  end_date: z.string().regex(/^\d{4}-\d{2}-\d{2}$/, "End date is required"),
-}).refine(
-  (data) => {
-  const start = Date.parse(data.start_date);
-  const end = Date.parse(data.end_date);
-  return Number.isFinite(start) && Number.isFinite(end) && end > start;
-  },
-  { message: "End date must be after start date", path: ["end_date"] }
-);
-
-export type CreateSubletFormData = z.infer<typeof createSubletSchema>;
\ No newline at end of file
+export type CreateSubletFormData = z.infer<typeof createSubletSchema>;

From 5cadf68024c46bd945ac7e68cea634159694c764 Mon Sep 17 00:00:00 2001
From: Lautaro Beck <becklautaro06@gmail.com>
Date: Fri, 13 Feb 2026 21:47:52 -0500
Subject: [PATCH 3/7] Fixing error 500 message

---
 backend/market/views.py | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/backend/market/views.py b/backend/market/views.py
index 6a72014..0250e37 100644
--- a/backend/market/views.py
+++ b/backend/market/views.py
@@ -267,7 +267,7 @@ def create(self, request, *args, **kwargs):
             )
         listing = get_object_or_404(Listing, id=listing_id)
         favorites.add(listing)
-        return Response({"favorited": True}, status=status.HTTP_201_OK)
+        return Response({"favorited": True}, status=status.HTTP_201_CREATED)
 
     def destroy(self, request, *args, **kwargs):
         listing_id = int(self.kwargs["listing_id"])

From 477f4292a4c19ba554fba30712c98abb6488fdf4 Mon Sep 17 00:00:00 2001
From: Lautaro Beck <becklautaro06@gmail.com>
Date: Sat, 14 Feb 2026 02:36:07 -0500
Subject: [PATCH 4/7] Revert "Add pointer cursor to favorites button"

This reverts commit dbe6d5b46902d6dc7c7af315a1c4b28010c6da74.
---
 frontend/components/listings/detail/ListingDetail.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/frontend/components/listings/detail/ListingDetail.tsx b/frontend/components/listings/detail/ListingDetail.tsx
index 25cb01c..ff4f9cb 100644
--- a/frontend/components/listings/detail/ListingDetail.tsx
+++ b/frontend/components/listings/detail/ListingDetail.tsx
@@ -86,7 +86,6 @@ export const ListingDetail = ({ listing, initialFavorites }: Props) => {
           <Share className="h-5 w-5" />
           <button
             type="button"
-            className="cursor-pointer"
             onClick={handleToggleFavorite}
             aria-pressed={isInsideFavorites}
             aria-label={isInsideFavorites ? "Remove from favorites" : "Add to favorites"}

From bb7c7f7fa9fa900745b665256591f407154b3254 Mon Sep 17 00:00:00 2001
From: Lautaro Beck <88300195+LautaroJBeck@users.noreply.github.com>
Date: Sat, 14 Feb 2026 02:37:28 -0500
Subject: [PATCH 5/7] Fix status to 404_NOT_FOUND

---
 backend/market/views.py | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/backend/market/views.py b/backend/market/views.py
index 0250e37..c3657eb 100644
--- a/backend/market/views.py
+++ b/backend/market/views.py
@@ -276,7 +276,7 @@ def destroy(self, request, *args, **kwargs):
         if listing not in request.user.listings_favorited.all():
             return Response(
                 {"favorited": False, "detail": "Favorite does not exist"},
-                status=status.HTTP_404_OK,
+                status=status.HTTP_404_NOT_FOUND,
             )
 
         request.user.listings_favorited.remove(listing)

From fb8029c3b85ea2b1004690e92925bc5a346908a4 Mon Sep 17 00:00:00 2001
From: Lautaro Beck <becklautaro06@gmail.com>
Date: Sun, 15 Feb 2026 14:00:21 -0500
Subject: [PATCH 6/7] Adding is_favorited, changing response messages

---
 backend/market/serializers.py                 | 16 ++++++
 backend/market/views.py                       |  8 +--
 frontend/app/items/[id]/page.tsx              |  5 +-
 frontend/app/sublets/[id]/page.tsx            |  5 +-
 .../listings/detail/ListingDetail.tsx         | 55 ++++++-------------
 frontend/lib/types.ts                         |  1 +
 6 files changed, 41 insertions(+), 49 deletions(-)

diff --git a/backend/market/serializers.py b/backend/market/serializers.py
index 91604b8..93ab683 100644
--- a/backend/market/serializers.py
+++ b/backend/market/serializers.py
@@ -133,6 +133,7 @@ class ListingSerializer(ListingTypeMixin, ModelSerializer):
     seller = UserSerializer(read_only=True)
     listing_type = SerializerMethodField()
     additional_data = SerializerMethodField()
+    is_favorited = SerializerMethodField()
     external_link = URLField(required=False, allow_blank=True, allow_null=True)
     negotiable = BooleanField(required=False, default=True)
     expires_at = DateTimeField(required=False, allow_null=True)
@@ -155,6 +156,7 @@ class Meta:
             "images",
             "listing_type",
             "additional_data",
+            "is_favorited",
         ]
         read_only_fields = [
             "id",
@@ -196,6 +198,12 @@ def validate(self, attrs):
 
         return super().validate(attrs)
 
+    def get_is_favorited(self, obj):
+        request = self.context.get("request")
+        if not request or not request.user or not request.user.is_authenticated:
+            return False
+        return request.user.listings_favorited.filter(id=obj.id).exists()
+
     def validate_title(self, value):
         if self.contains_profanity(value):
             raise ValidationError("The title contains inappropriate language.")
@@ -327,6 +335,7 @@ def _update_sublet(self, instance, additional_data):
 class ListingSerializerPublic(ListingTypeMixin, ModelSerializer):
     buyer_count = SerializerMethodField()
     favorite_count = SerializerMethodField()
+    is_favorited = SerializerMethodField()
     tags = SlugRelatedField(many=True, slug_field="name", queryset=Tag.objects.all())
     images = ListingImageURLSerializer(many=True)
     seller = UserSerializer(read_only=True)
@@ -350,6 +359,7 @@ class Meta:
             "favorite_count",
             "listing_type",
             "additional_data",
+            "is_favorited",
         ]
         read_only_fields = fields
 
@@ -359,6 +369,12 @@ def get_buyer_count(self, obj):
     def get_favorite_count(self, obj):
         return obj.favorites.count()
 
+    def get_is_favorited(self, obj):
+        request = self.context.get("request")
+        if not request or not request.user or not request.user.is_authenticated:
+            return False
+        return request.user.listings_favorited.filter(id=obj.id).exists()
+
 
 # Read-only serializer for use when pulling all listings /etc
 class ListingSerializerList(ListingTypeMixin, ModelSerializer):
diff --git a/backend/market/views.py b/backend/market/views.py
index 0250e37..5e68a1d 100644
--- a/backend/market/views.py
+++ b/backend/market/views.py
@@ -262,12 +262,12 @@ def create(self, request, *args, **kwargs):
         favorites = request.user.listings_favorited
         if favorites.filter(id=listing_id).exists():
             return Response(
-                {"favorited": True, "detail": "Favorite already exists"},
+                {"liked": True, "detail": "User has already liked the listing"},
                 status=status.HTTP_200_OK,
             )
         listing = get_object_or_404(Listing, id=listing_id)
         favorites.add(listing)
-        return Response({"favorited": True}, status=status.HTTP_201_CREATED)
+        return Response({"liked": True}, status=status.HTTP_201_CREATED)
 
     def destroy(self, request, *args, **kwargs):
         listing_id = int(self.kwargs["listing_id"])
@@ -275,12 +275,12 @@ def destroy(self, request, *args, **kwargs):
 
         if listing not in request.user.listings_favorited.all():
             return Response(
-                {"favorited": False, "detail": "Favorite does not exist"},
+                {"liked": False, "detail": "User hasn't liked the listing yet"},
                 status=status.HTTP_404_OK,
             )
 
         request.user.listings_favorited.remove(listing)
-        return Response({"favorited": False}, status=status.HTTP_200_OK)
+        return Response({"liked": False}, status=status.HTTP_200_OK)
 
 
 class Offers(viewsets.ModelViewSet):
diff --git a/frontend/app/items/[id]/page.tsx b/frontend/app/items/[id]/page.tsx
index 36bffb4..1f5e426 100644
--- a/frontend/app/items/[id]/page.tsx
+++ b/frontend/app/items/[id]/page.tsx
@@ -1,10 +1,9 @@
 import { ListingDetail } from "@/components/listings/detail/ListingDetail";
-import { getListing, getUsersFavorites } from "@/lib/actions";
+import { getListing } from "@/lib/actions";
 
 export default async function ItemPage({ params }: { params: Promise<{ id: string }> }) {
   const { id } = await params;
   const item = await getListing(id);
-  const favorites = await getUsersFavorites().catch(() => null);
 
-  return <ListingDetail listing={item} initialFavorites={favorites} />;
+  return <ListingDetail listing={item} initialIsFavorited={item.is_favorited ?? false} />;
 }
diff --git a/frontend/app/sublets/[id]/page.tsx b/frontend/app/sublets/[id]/page.tsx
index 231e124..b508ef4 100644
--- a/frontend/app/sublets/[id]/page.tsx
+++ b/frontend/app/sublets/[id]/page.tsx
@@ -1,10 +1,9 @@
 import { ListingDetail } from "@/components/listings/detail/ListingDetail";
-import { getListing, getUsersFavorites } from "@/lib/actions";
+import { getListing } from "@/lib/actions";
 
 export default async function SubletPage({ params }: { params: Promise<{ id: string }> }) {
   const { id } = await params;
   const sublet = await getListing(id);
-  const favorites = await getUsersFavorites().catch(() => null);
 
-  return <ListingDetail listing={sublet} initialFavorites={favorites} />;
+  return <ListingDetail listing={sublet} initialIsFavorited={sublet.is_favorited ?? false} />;
 }
diff --git a/frontend/components/listings/detail/ListingDetail.tsx b/frontend/components/listings/detail/ListingDetail.tsx
index ff4f9cb..e291788 100644
--- a/frontend/components/listings/detail/ListingDetail.tsx
+++ b/frontend/components/listings/detail/ListingDetail.tsx
@@ -1,37 +1,33 @@
 "use client";
 
-import { useMemo } from "react";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { addToUsersFavorites, deleteFromUsersFavorites } from "@/lib/actions";
 import { Heart, Share } from "lucide-react";
-import { Item, PaginatedResponse, Sublet } from "@/lib/types";
+import { Item, Sublet } from "@/lib/types";
 import { ListingActions } from "@/components/listings/detail/ListingActions";
 import { ListingImageGallery } from "@/components/listings/detail/ListingImageGallery";
 import { ListingInfo } from "@/components/listings/detail/ListingInfo";
 import { UserCard } from "@/components/listings/detail/UserCard";
 import { BackButton } from "@/components/listings/detail/BackButton";
-import { addToUsersFavorites, deleteFromUsersFavorites, getUsersFavorites } from "@/lib/actions";
-import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 
 interface Props {
   listing: Item | Sublet;
-  initialFavorites: PaginatedResponse<Item | Sublet> | null;
+  initialIsFavorited: boolean;
 }
 
-export const ListingDetail = ({ listing, initialFavorites }: Props) => {
+export const ListingDetail = ({ listing, initialIsFavorited }: Props) => {
   const listingType = listing.listing_type;
   const priceLabel = listingType === "sublet" ? "/mo" : undefined;
   const listingOwnerLabel = listingType === "item" ? "Seller" : "Owner";
   const queryClient = useQueryClient();
   const favoritesQuery = useQuery({
-    queryKey: ["favorites"],
-    queryFn: getUsersFavorites,
-    initialData: initialFavorites ?? undefined,
-    enabled: initialFavorites !== null,
+    queryKey: ["favorite", listing.id],
+    queryFn: async () => initialIsFavorited,
+    initialData: initialIsFavorited,
+    staleTime: Infinity,
   });
 
-  const isInsideFavorites = useMemo(
-    () => !!favoritesQuery.data?.results?.some((favorite) => favorite.id === listing.id),
-    [favoritesQuery.data, listing.id]
-  );
+  const isInsideFavorites = favoritesQuery.data ?? false;
 
   const toggleFavoriteMutation = useMutation({
     mutationFn: async (shouldFavorite: boolean) => {
@@ -42,36 +38,16 @@ export const ListingDetail = ({ listing, initialFavorites }: Props) => {
       }
     },
     onMutate: async (shouldFavorite: boolean) => {
-      await queryClient.cancelQueries({ queryKey: ["favorites"] });
-      const previous = queryClient.getQueryData<PaginatedResponse<Item | Sublet>>(["favorites"]);
-
-      if (previous) {
-        const exists = previous.results?.some((favorite) => favorite.id === listing.id);
-        let results = previous.results ?? [];
-
-        if (shouldFavorite && !exists) {
-          results = [...results, listing];
-        }
-        if (!shouldFavorite && exists) {
-          results = results.filter((favorite) => favorite.id !== listing.id);
-        }
-
-        queryClient.setQueryData<PaginatedResponse<Item | Sublet>>(["favorites"], {
-          ...previous,
-          results,
-        });
-      }
-
+      await queryClient.cancelQueries({ queryKey: ["favorite", listing.id] });
+      const previous = queryClient.getQueryData<boolean>(["favorite", listing.id]);
+      queryClient.setQueryData(["favorite", listing.id], shouldFavorite);
       return { previous };
     },
     onError: (_error, _shouldFavorite, context) => {
-      if (context?.previous) {
-        queryClient.setQueryData(["favorites"], context.previous);
+      if (context?.previous !== undefined) {
+        queryClient.setQueryData(["favorite", listing.id], context.previous);
       }
     },
-    onSettled: () => {
-      queryClient.invalidateQueries({ queryKey: ["favorites"] });
-    },
   });
 
   const handleToggleFavorite = async () => {
@@ -86,6 +62,7 @@ export const ListingDetail = ({ listing, initialFavorites }: Props) => {
           <Share className="h-5 w-5" />
           <button
             type="button"
+            className="cursor-pointer"
             onClick={handleToggleFavorite}
             aria-pressed={isInsideFavorites}
             aria-label={isInsideFavorites ? "Remove from favorites" : "Add to favorites"}
diff --git a/frontend/lib/types.ts b/frontend/lib/types.ts
index 84d5f68..2c16154 100644
--- a/frontend/lib/types.ts
+++ b/frontend/lib/types.ts
@@ -61,6 +61,7 @@ type BaseListing = {
   images: string[];
   tags: string[];
   favorite_count: number;
+  is_favorited?: boolean;
   seller: User;
 };
 

From febbd34a86b417c4dc9abfbb7f90849225dde625 Mon Sep 17 00:00:00 2001
From: Lautaro Beck <becklautaro06@gmail.com>
Date: Sun, 15 Feb 2026 14:54:43 -0500
Subject: [PATCH 7/7] Final commit

---
 backend/market/views.py                              |  2 +-
 .../components/listings/detail/ListingDetail.tsx     | 12 +++++-------
 2 files changed, 6 insertions(+), 8 deletions(-)

diff --git a/backend/market/views.py b/backend/market/views.py
index dfb6f51..c85974c 100644
--- a/backend/market/views.py
+++ b/backend/market/views.py
@@ -263,7 +263,7 @@ def create(self, request, *args, **kwargs):
         if favorites.filter(id=listing_id).exists():
             return Response(
                 {"liked": True, "detail": "User has already liked the listing"},
-                status=status.HTTP_200_OK,
+                status=status.HTTP_409_CONFLICT,
             )
         listing = get_object_or_404(Listing, id=listing_id)
         favorites.add(listing)
diff --git a/frontend/components/listings/detail/ListingDetail.tsx b/frontend/components/listings/detail/ListingDetail.tsx
index e291788..5fb63f9 100644
--- a/frontend/components/listings/detail/ListingDetail.tsx
+++ b/frontend/components/listings/detail/ListingDetail.tsx
@@ -27,7 +27,7 @@ export const ListingDetail = ({ listing, initialIsFavorited }: Props) => {
     staleTime: Infinity,
   });
 
-  const isInsideFavorites = favoritesQuery.data ?? false;
+  const isFavorited = favoritesQuery.data ?? false;
 
   const toggleFavoriteMutation = useMutation({
     mutationFn: async (shouldFavorite: boolean) => {
@@ -51,7 +51,7 @@ export const ListingDetail = ({ listing, initialIsFavorited }: Props) => {
   });
 
   const handleToggleFavorite = async () => {
-    toggleFavoriteMutation.mutate(!isInsideFavorites);
+    toggleFavoriteMutation.mutate(!isFavorited);
   };
 
   return (
@@ -64,12 +64,10 @@ export const ListingDetail = ({ listing, initialIsFavorited }: Props) => {
             type="button"
             className="cursor-pointer"
             onClick={handleToggleFavorite}
-            aria-pressed={isInsideFavorites}
-            aria-label={isInsideFavorites ? "Remove from favorites" : "Add to favorites"}
+            aria-pressed={isFavorited}
+            aria-label={isFavorited ? "Remove from favorites" : "Add to favorites"}
           >
-            <Heart
-              className={isInsideFavorites ? "h-5 w-5 fill-red-500 text-red-500" : "h-5 w-5"}
-            />
+            <Heart className={isFavorited ? "h-5 w-5 fill-red-500 text-red-500" : "h-5 w-5"} />
           </button>
         </div>
       </div>