From a790646c51000a72796fb55c47532a826c328ab2 Mon Sep 17 00:00:00 2001
From: Benjamin Bolte <ben@bolte.cc>
Date: Fri, 2 Aug 2024 11:53:15 -0700
Subject: [PATCH] better listing editing flow

---
 frontend/package-lock.json                    |  45 -----
 .../src/components/listing/AddOrEditList.tsx  | 158 ---------------
 .../components/listing/EditListingModal.tsx   | 180 ++++++++++++++++++
 frontend/src/components/listing/List.tsx      |  96 ----------
 .../src/components/listing/ListingBody.tsx    |   1 +
 .../listing/ListingDeleteButton.tsx           |   4 +-
 .../components/listing/ListingDescription.tsx |  89 ++++++++-
 .../src/components/listing/ListingFooter.tsx  |  21 +-
 .../src/components/listing/ListingHeader.tsx  |  85 ++++++++-
 .../src/components/listings/ListingGrid.tsx   |   2 +-
 .../components/listings/ListingGridCard.tsx   |  63 +++---
 frontend/src/components/ui/Button/Button.tsx  |   2 +
 frontend/src/hooks/useGetListing.tsx          |   1 +
 frontend/src/pages/Browse.tsx                 |  39 +---
 frontend/src/pages/ListingDetails.tsx         |   8 +-
 pyproject.toml                                |   1 +
 16 files changed, 414 insertions(+), 381 deletions(-)
 delete mode 100644 frontend/src/components/listing/AddOrEditList.tsx
 create mode 100644 frontend/src/components/listing/EditListingModal.tsx
 delete mode 100644 frontend/src/components/listing/List.tsx

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 698967ef..52c7b07c 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -4439,17 +4439,6 @@
         "node": ">= 8"
       }
     },
-    "node_modules/@popperjs/core": {
-      "version": "2.11.8",
-      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
-      "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
-      "dev": true,
-      "license": "MIT",
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/popperjs"
-      }
-    },
     "node_modules/@radix-ui/number": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@radix-ui/number/-/number-1.1.0.tgz",
@@ -5732,22 +5721,6 @@
       "resolved": "https://registry.npmjs.org/@radix-ui/rect/-/rect-1.1.0.tgz",
       "integrity": "sha512-A9+lCBZoaMJlVKcRBz2YByCG+Cp2t6nAnMnNba+XiWxnj6r4JUFqfsgwocMBZU9LPtdxC6wB56ySYpc7LQIoJg=="
     },
-    "node_modules/@react-aria/ssr": {
-      "version": "3.9.5",
-      "resolved": "https://registry.npmjs.org/@react-aria/ssr/-/ssr-3.9.5.tgz",
-      "integrity": "sha512-xEwGKoysu+oXulibNUSkXf8itW0npHHTa6c4AyYeZIJyRoegeteYuFpZUBPtIDE8RfHdNsSmE1ssOkxRnwbkuQ==",
-      "dev": true,
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@swc/helpers": "^0.5.0"
-      },
-      "engines": {
-        "node": ">= 12"
-      },
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
-      }
-    },
     "node_modules/@react-native-community/cli": {
       "version": "13.6.9",
       "resolved": "https://registry.npmjs.org/@react-native-community/cli/-/cli-13.6.9.tgz",
@@ -16115,7 +16088,6 @@
       "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",
       "integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "loose-envify": "^1.0.0"
       }
@@ -27500,23 +27472,6 @@
         }
       }
     },
-    "node_modules/react-transition-group": {
-      "version": "4.4.5",
-      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
-      "integrity": "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==",
-      "dev": true,
-      "license": "BSD-3-Clause",
-      "dependencies": {
-        "@babel/runtime": "^7.5.5",
-        "dom-helpers": "^5.0.1",
-        "loose-envify": "^1.4.0",
-        "prop-types": "^15.6.2"
-      },
-      "peerDependencies": {
-        "react": ">=16.6.0",
-        "react-dom": ">=16.6.0"
-      }
-    },
     "node_modules/react-use-measure": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/react-use-measure/-/react-use-measure-2.1.1.tgz",
diff --git a/frontend/src/components/listing/AddOrEditList.tsx b/frontend/src/components/listing/AddOrEditList.tsx
deleted file mode 100644
index d5062a87..00000000
--- a/frontend/src/components/listing/AddOrEditList.tsx
+++ /dev/null
@@ -1,158 +0,0 @@
-import { zodResolver } from "@hookform/resolvers/zod";
-import RequireAuthentication from "components/auth/RequireAuthentication";
-import { Button } from "components/ui/Button/Button";
-import {
-  Dialog,
-  DialogContent,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from "components/ui/dialog";
-import ErrorMessage from "components/ui/ErrorMessage";
-import { FileSvgDraw } from "components/ui/FileSvgDraw";
-import { Input, TextArea } from "components/ui/Input/Input";
-import { useAlertQueue } from "hooks/alerts";
-import { useAuthentication } from "hooks/auth";
-import useGetListing from "hooks/useGetListing";
-import { Paperclip } from "lucide-react";
-import { useState } from "react";
-import { SubmitHandler, useForm } from "react-hook-form";
-import { FormType, NewListingSchema, NewListingType } from "types";
-import {
-  FileInput,
-  FileUploader,
-  FileUploaderContent,
-  FileUploaderItem,
-} from "../ui/FileUpload";
-
-const dropZoneConfig = {
-  maxFiles: 5,
-  maxSize: 1024 * 1024 * 4,
-  multiple: true,
-};
-
-interface AddOrEditProps {
-  open: boolean;
-  listId: string;
-  onClose: (open: boolean) => void;
-  formType: FormType;
-}
-const AddOrEditList = ({ open, onClose, listId, formType }: AddOrEditProps) => {
-  const [files, setFiles] = useState<File[] | null>(null);
-  const { addAlert, addErrorAlert } = useAlertQueue();
-  const auth = useAuthentication();
-  const { listing } = useGetListing(listId);
-  const {
-    register,
-    handleSubmit,
-    setValue,
-    formState: { errors },
-  } = useForm<NewListingType>({
-    resolver: zodResolver(NewListingSchema),
-  });
-
-  if (listing && formType === "edit") {
-    setValue("name", listing?.name);
-    setValue("description", listing?.description ?? "");
-  }
-
-  const onSubmit: SubmitHandler<NewListingType> = async ({
-    name,
-    description,
-  }: NewListingType) => {
-    // TODO: change http according to formType and add files (imgs/urdf) to artifact
-    const { error } = await auth.client.POST("/listings/add", {
-      body: {
-        name,
-        description,
-        child_ids: [],
-      },
-    });
-
-    if (error) {
-      addErrorAlert(error);
-    } else {
-      addAlert("Listing added successfully", "success");
-      onClose(false);
-      window.location.reload();
-    }
-  };
-
-  return (
-    <RequireAuthentication>
-      <div>
-        <Dialog open={open} onOpenChange={onClose}>
-          <DialogContent className="bg-gray-950">
-            <DialogHeader>
-              <DialogTitle className="text-white text-center py-2">
-                Add Robo Details
-              </DialogTitle>
-            </DialogHeader>
-            <form
-              onSubmit={handleSubmit(onSubmit)}
-              className="grid grid-cols-1 space-y-6"
-            >
-              <div>
-                <Input
-                  placeholder="Name"
-                  type="text"
-                  {...register("name")}
-                  className="text-white"
-                />
-                {errors?.name && (
-                  <ErrorMessage>{errors?.name?.message}</ErrorMessage>
-                )}
-              </div>
-              <div className="relative">
-                <TextArea
-                  placeholder="Description"
-                  rows={4}
-                  className="block p-2.5 text-white w-full text-sm rounded-lg borde focus:ring-blue-500 focus:border-blue-500 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
-                  {...register("description")}
-                />
-                {errors?.description && (
-                  <ErrorMessage>{errors?.description?.message}</ErrorMessage>
-                )}
-              </div>
-              <div>
-                <FileUploader
-                  value={files}
-                  onValueChange={setFiles}
-                  dropzoneOptions={dropZoneConfig}
-                  className="relative bg-background rounded-lg p-2"
-                >
-                  <FileInput className="outline-dashed outline-1 outline-white">
-                    <div className="flex items-center justify-center flex-col pt-3 pb-4 w-full ">
-                      <FileSvgDraw />
-                    </div>
-                  </FileInput>
-                  <FileUploaderContent>
-                    {files &&
-                      files.length > 0 &&
-                      files.map((file, index: number) => (
-                        <FileUploaderItem key={index} index={index}>
-                          <Paperclip className="h-4 w-4 stroke-current" />
-                          <span>{file.name}</span>
-                        </FileUploaderItem>
-                      ))}
-                  </FileUploaderContent>
-                </FileUploader>
-              </div>
-              <DialogFooter>
-                <Button
-                  variant="primary"
-                  type="submit"
-                  className="text-white w-full"
-                >
-                  Submit
-                </Button>
-              </DialogFooter>
-            </form>
-          </DialogContent>
-        </Dialog>
-      </div>
-    </RequireAuthentication>
-  );
-};
-
-export default AddOrEditList;
diff --git a/frontend/src/components/listing/EditListingModal.tsx b/frontend/src/components/listing/EditListingModal.tsx
new file mode 100644
index 00000000..9dbdf61b
--- /dev/null
+++ b/frontend/src/components/listing/EditListingModal.tsx
@@ -0,0 +1,180 @@
+import { zodResolver } from "@hookform/resolvers/zod";
+import RequireAuthentication from "components/auth/RequireAuthentication";
+import { Button } from "components/ui/Button/Button";
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "components/ui/dialog";
+import ErrorMessage from "components/ui/ErrorMessage";
+import { Input, TextArea } from "components/ui/Input/Input";
+import { paths } from "gen/api";
+import { useAlertQueue } from "hooks/alerts";
+import { useAuthentication } from "hooks/auth";
+import { useEffect, useState } from "react";
+import { SubmitHandler, useForm } from "react-hook-form";
+import { NewListingSchema, NewListingType } from "types";
+
+const dropZoneConfig = {
+  maxFiles: 5,
+  maxSize: 1024 * 1024 * 4,
+  multiple: true,
+};
+
+interface AddOrEditProps {
+  open: boolean;
+  listingId: string;
+  onClose: () => void;
+}
+
+type ListingResponse =
+  paths["/listings/{id}"]["get"]["responses"][200]["content"]["application/json"];
+
+const EditListingModal = ({ open, onClose, listingId }: AddOrEditProps) => {
+  // const [files, setFiles] = useState<File[] | null>(null);
+  const { addAlert, addErrorAlert } = useAlertQueue();
+  const auth = useAuthentication();
+  const [listing, setListing] = useState<ListingResponse | null>(null);
+
+  const {
+    register,
+    handleSubmit,
+    setValue,
+    formState: { errors },
+  } = useForm<NewListingType>({
+    resolver: zodResolver(NewListingSchema),
+  });
+
+  useEffect(() => {
+    const fetchListing = async () => {
+      const { data, error } = await auth.client.GET("/listings/{id}", {
+        params: {
+          path: { id: listingId },
+        },
+      });
+      if (error) {
+        addErrorAlert(error);
+      } else {
+        setListing(data);
+      }
+    };
+    fetchListing();
+  }, []);
+
+  useEffect(() => {
+    if (listing) {
+      setValue("name", listing.name);
+      setValue("description", listing.description ?? "");
+    }
+  }, [listing, setValue]);
+
+  const onSubmit: SubmitHandler<NewListingType> = async ({
+    name,
+    description,
+  }: NewListingType) => {
+    const { error } = await auth.client.PUT("/listings/edit/{id}", {
+      params: {
+        path: {
+          id: listingId,
+        },
+      },
+      body: {
+        name,
+        description,
+      },
+    });
+
+    if (error) {
+      addErrorAlert(error);
+    } else {
+      addAlert("Listing added successfully", "success");
+      onClose();
+      window.location.reload();
+    }
+  };
+
+  return (
+    <RequireAuthentication>
+      <Dialog open={open} onOpenChange={onClose}>
+        <DialogContent className="bg-gray-950">
+          <DialogHeader>
+            <DialogTitle className="text-white text-center py-2">
+              Add Robo Details
+            </DialogTitle>
+          </DialogHeader>
+          <form
+            onSubmit={handleSubmit(onSubmit)}
+            className="grid grid-cols-1 space-y-6"
+          >
+            {/* Name */}
+            <div>
+              <Input
+                placeholder="Name"
+                type="text"
+                {...register("name")}
+                className="text-white"
+                disabled={listing === null}
+              />
+              {errors?.name && (
+                <ErrorMessage>{errors?.name?.message}</ErrorMessage>
+              )}
+            </div>
+
+            {/* Description */}
+            <div className="relative">
+              <TextArea
+                placeholder="Description"
+                rows={4}
+                className="block p-2.5 text-white w-full text-sm rounded-lg borde focus:ring-blue-500 focus:border-blue-500 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+                {...register("description")}
+                disabled={listing === null}
+              />
+              {errors?.description && (
+                <ErrorMessage>{errors?.description?.message}</ErrorMessage>
+              )}
+            </div>
+
+            {/* File Uploader */}
+            {/* <div>
+                <FileUploader
+                  value={files}
+                  onValueChange={setFiles}
+                  dropzoneOptions={dropZoneConfig}
+                  className="relative bg-background rounded-lg p-2"
+                >
+                  <FileInput className="outline-dashed outline-1 outline-white">
+                    <div className="flex items-center justify-center flex-col pt-3 pb-4 w-full ">
+                      <FileSvgDraw />
+                    </div>
+                  </FileInput>
+                  <FileUploaderContent>
+                    {files &&
+                      files.length > 0 &&
+                      files.map((file, index: number) => (
+                        <FileUploaderItem key={index} index={index}>
+                          <Paperclip className="h-4 w-4 stroke-current" />
+                          <span>{file.name}</span>
+                        </FileUploaderItem>
+                      ))}
+                  </FileUploaderContent>
+                </FileUploader>
+              </div> */}
+            <DialogFooter>
+              <Button
+                variant="primary"
+                type="submit"
+                className="text-white w-full"
+              >
+                Submit
+              </Button>
+            </DialogFooter>
+          </form>
+        </DialogContent>
+      </Dialog>
+    </RequireAuthentication>
+  );
+};
+
+export default EditListingModal;
diff --git a/frontend/src/components/listing/List.tsx b/frontend/src/components/listing/List.tsx
deleted file mode 100644
index 571ab4ab..00000000
--- a/frontend/src/components/listing/List.tsx
+++ /dev/null
@@ -1,96 +0,0 @@
-import Image from "components/Image";
-import { Skeleton } from "components/ui/Skeleton";
-import { useAuthentication } from "hooks/auth";
-import useGetListing from "hooks/useGetListing";
-import { Pencil, Trash } from "lucide-react";
-import { Card, CardContent, CardHeader, CardTitle } from "../ui/Card";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from "../ui/ToolTip";
-
-interface ListProps {
-  id: string;
-  setShowDialogBox: React.Dispatch<React.SetStateAction<boolean>>;
-  setformType: React.Dispatch<React.SetStateAction<string>>;
-  setlistId: React.Dispatch<React.SetStateAction<string>>;
-}
-
-const List = ({ id, setShowDialogBox, setformType, setlistId }: ListProps) => {
-  const { isLoading, listing } = useGetListing(id);
-  const auth = useAuthentication();
-
-  const handleDelete = async (listing_id: string) => {
-    // TODO: create a modal to confirm
-    await auth.client.DELETE("/listings/delete/{listing_id}", {
-      params: {
-        path: { listing_id },
-      },
-    });
-  };
-
-  if (isLoading) {
-    return (
-      <div className="bg-transparent">
-        <Skeleton className="h-44 w-70 bg-white" />
-        <Skeleton className="h-6 w-70 mt-5 bg-white" />
-        <Skeleton className="h-6 w-70 mt-5 bg-white" />
-        <Skeleton className="h-5 w-70 mt-2 mb-5 bg-white" />
-        <Skeleton className="h-3.5 w-70 mt-1 bg-white" />
-        <Skeleton className="h-5 mt-3.5 w-20 bg-white" />
-      </div>
-    );
-  }
-
-  return (
-    <Card className="flex flex-col max-w-sm rounded material-card bg-white justify-between">
-      <Image />
-      <div className="px-3 py-2">
-        <CardHeader>
-          <CardTitle className="text-gray-500 text-xl mb-3">
-            {listing?.name}
-          </CardTitle>
-        </CardHeader>
-        <CardContent>
-          <p className="text-gray-700 text-base">{listing?.description}</p>
-        </CardContent>
-      </div>
-      <div className="mx-4 mt-2 mb-4 flex justify-end">
-        <TooltipProvider>
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <Pencil
-                className="text-gray-500 mr-2 cursor-pointer"
-                size={20}
-                onClick={() => {
-                  setShowDialogBox(true);
-                  setformType("edit");
-                  setlistId(id);
-                }}
-              />
-            </TooltipTrigger>
-            <TooltipContent>
-              <p className="text-black">Edit</p>
-            </TooltipContent>
-          </Tooltip>
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <Trash
-                className="text-red-500 mr-2 cursor-pointer"
-                size={20}
-                onClick={() => handleDelete(id)}
-              />
-            </TooltipTrigger>
-            <TooltipContent>
-              <p className="text-black">Delete</p>
-            </TooltipContent>
-          </Tooltip>
-        </TooltipProvider>
-      </div>
-    </Card>
-  );
-};
-
-export default List;
diff --git a/frontend/src/components/listing/ListingBody.tsx b/frontend/src/components/listing/ListingBody.tsx
index 47e66cb2..9b90698b 100644
--- a/frontend/src/components/listing/ListingBody.tsx
+++ b/frontend/src/components/listing/ListingBody.tsx
@@ -15,6 +15,7 @@ const ListingBody = (props: ListingBodyProps) => {
   return (
     <div className="px-4">
       <ListingDescription
+        listingId={listing.id}
         description={listing.description}
         edit={listing.owner_is_user}
       />
diff --git a/frontend/src/components/listing/ListingDeleteButton.tsx b/frontend/src/components/listing/ListingDeleteButton.tsx
index 880f093f..c6b9ea59 100644
--- a/frontend/src/components/listing/ListingDeleteButton.tsx
+++ b/frontend/src/components/listing/ListingDeleteButton.tsx
@@ -6,11 +6,11 @@ import { FaExclamation } from "react-icons/fa";
 import { useNavigate } from "react-router-dom";
 
 interface Props {
-  listing_id: string;
+  listingId: string;
 }
 
 const ListingDeleteButton = (props: Props) => {
-  const { listing_id } = props;
+  const { listingId: listing_id } = props;
   const [deleting, setDeleting] = useState(false);
 
   const { addAlert, addErrorAlert } = useAlertQueue();
diff --git a/frontend/src/components/listing/ListingDescription.tsx b/frontend/src/components/listing/ListingDescription.tsx
index 4afd0a7c..f0bf44e6 100644
--- a/frontend/src/components/listing/ListingDescription.tsx
+++ b/frontend/src/components/listing/ListingDescription.tsx
@@ -1,3 +1,10 @@
+import { Button } from "components/ui/Button/Button";
+import { TextArea } from "components/ui/Input/Input";
+import Spinner from "components/ui/Spinner";
+import { useAlertQueue } from "hooks/alerts";
+import { useAuthentication } from "hooks/auth";
+import { useState } from "react";
+import { FaFile, FaPen } from "react-icons/fa";
 import Markdown from "react-markdown";
 import remarkGfm from "remark-gfm";
 
@@ -36,16 +43,94 @@ export const RenderDescription = ({ description }: RenderDescriptionProps) => {
 };
 
 interface Props {
+  listingId: string;
   description: string | null;
   // TODO: If can edit, allow the user to update the description.
   edit: boolean;
 }
 
 const ListingDescription = (props: Props) => {
-  const { description } = props;
+  const { listingId, description: initialDescription, edit } = props;
+
+  const auth = useAuthentication();
+  const { addAlert, addErrorAlert } = useAlertQueue();
+
+  const [isEditing, setIsEditing] = useState(false);
+  const [newDescription, setNewDescription] = useState(
+    initialDescription ?? "",
+  );
+  const [hasChanged, setHasChanged] = useState(false);
+  const [submitting, setSubmitting] = useState(false);
+
+  const handleSave = async () => {
+    if (!hasChanged) {
+      setIsEditing(false);
+      return;
+    }
+    setSubmitting(true);
+    const { error } = await auth.client.PUT("/listings/edit/{id}", {
+      params: {
+        path: { id: listingId },
+      },
+      body: {
+        description: newDescription,
+      },
+    });
+    if (error) {
+      addErrorAlert(error);
+      setHasChanged(false);
+    } else {
+      addAlert("Listing updated successfully", "success");
+      setIsEditing(false);
+    }
+    setSubmitting(false);
+  };
+
   return (
     <div className="mb-3">
-      {description && <RenderDescription description={description} />}
+      {submitting ? (
+        <Spinner />
+      ) : (
+        <>
+          {isEditing && (
+            <TextArea
+              placeholder="Description"
+              rows={4}
+              value={newDescription}
+              onChange={(e) => {
+                setNewDescription(e.target.value);
+                setHasChanged(true);
+              }}
+              className="border-b border-gray-300 dark:border-gray-700 mb-2"
+            />
+          )}
+          <RenderDescription description={newDescription} />
+          {edit && (
+            <Button
+              onClick={() => {
+                if (isEditing) {
+                  handleSave();
+                } else {
+                  setIsEditing(true);
+                }
+              }}
+              variant="warning"
+              className="mt-2"
+              disabled={submitting}
+            >
+              {isEditing ? (
+                <>
+                  <FaFile className="mr-2" /> Save
+                </>
+              ) : (
+                <>
+                  <FaPen className="mr-2" /> Edit
+                </>
+              )}
+            </Button>
+          )}
+        </>
+      )}
     </div>
   );
 };
diff --git a/frontend/src/components/listing/ListingFooter.tsx b/frontend/src/components/listing/ListingFooter.tsx
index e262e26c..d95a5c93 100644
--- a/frontend/src/components/listing/ListingFooter.tsx
+++ b/frontend/src/components/listing/ListingFooter.tsx
@@ -1,18 +1,23 @@
 import ListingDeleteButton from "./ListingDeleteButton";
 
 interface Props {
-  listing_id: string;
+  listingId: string;
   edit: boolean;
 }
 
-const ListingFooter = ({ listing_id, edit }: Props) => {
-  if (!edit) {
-    return <></>;
-  }
-
+const ListingFooter = ({ listingId, edit }: Props) => {
   return (
-    <div className="flex justify-end border-t p-4">
-      <ListingDeleteButton listing_id={listing_id} />
+    <div className="relative border-t p-4">
+      <div className="grid grid-cols-1 md:grid-cols-[1fr_auto] gap-4 items-center">
+        <div className="text-gray-600 dark:text-gray-400 italic text-sm">
+          {`Listing ID: ${listingId}`}
+        </div>
+        {edit && (
+          <div className="flex justify-end gap-2">
+            <ListingDeleteButton listingId={listingId} />
+          </div>
+        )}
+      </div>
     </div>
   );
 };
diff --git a/frontend/src/components/listing/ListingHeader.tsx b/frontend/src/components/listing/ListingHeader.tsx
index 3524800b..29657ea3 100644
--- a/frontend/src/components/listing/ListingHeader.tsx
+++ b/frontend/src/components/listing/ListingHeader.tsx
@@ -1,12 +1,92 @@
 import { Button } from "components/ui/Button/Button";
-import { FaTimes } from "react-icons/fa";
+import { Input } from "components/ui/Input/Input";
+import Spinner from "components/ui/Spinner";
+import { useAlertQueue } from "hooks/alerts";
+import { useAuthentication } from "hooks/auth";
+import { useState } from "react";
+import { FaFile, FaPen, FaTimes } from "react-icons/fa";
 import { useNavigate } from "react-router-dom";
 
 interface Props {
+  listingId: string;
   title: string;
   edit: boolean;
 }
 
+const ListingTitle = (props: Props) => {
+  const { listingId, title: initialTitle, edit } = props;
+
+  const auth = useAuthentication();
+  const { addAlert, addErrorAlert } = useAlertQueue();
+
+  const [isEditing, setIsEditing] = useState(false);
+  const [newTitle, setNewTitle] = useState(initialTitle);
+  const [hasChanged, setHasChanged] = useState(false);
+  const [submitting, setSubmitting] = useState(false);
+
+  const handleSave = async () => {
+    if (!hasChanged) {
+      setIsEditing(false);
+      return;
+    }
+    setSubmitting(true);
+    const { error } = await auth.client.PUT("/listings/edit/{id}", {
+      params: {
+        path: { id: listingId },
+      },
+      body: {
+        name: newTitle,
+      },
+    });
+    if (error) {
+      addErrorAlert(error);
+      setHasChanged(false);
+    } else {
+      addAlert("Listing updated successfully", "success");
+      setIsEditing(false);
+    }
+    setSubmitting(false);
+  };
+
+  return (
+    <div className="flex items-center">
+      {submitting ? (
+        <Spinner />
+      ) : (
+        <>
+          {isEditing ? (
+            <Input
+              type="text"
+              value={newTitle}
+              onChange={(e) => {
+                setNewTitle(e.target.value);
+                setHasChanged(true);
+              }}
+              className="border-b border-gray-300 dark:border-gray-700"
+            />
+          ) : (
+            <h1 className="text-2xl font-semibold">{newTitle}</h1>
+          )}
+          {edit && (
+            <Button
+              onClick={() => {
+                if (isEditing) {
+                  handleSave();
+                } else {
+                  setIsEditing(true);
+                }
+              }}
+              variant="ghost"
+            >
+              {isEditing ? <FaFile /> : <FaPen />}
+            </Button>
+          )}
+        </>
+      )}
+    </div>
+  );
+};
+
 const CloseButton = () => {
   const navigate = useNavigate();
 
@@ -23,11 +103,10 @@ const CloseButton = () => {
 };
 
 const ListingHeader = (props: Props) => {
-  const { title } = props;
   return (
     <div className="relative border-b p-4 mb-4">
       <div className="grid grid-cols-1 md:grid-cols-[1fr_auto] gap-4">
-        <h1 className="text-2xl font-bold">{title}</h1>
+        <ListingTitle {...props} />
         <CloseButton />
       </div>
     </div>
diff --git a/frontend/src/components/listings/ListingGrid.tsx b/frontend/src/components/listings/ListingGrid.tsx
index 4c2a3ca7..d0fd84ee 100644
--- a/frontend/src/components/listings/ListingGrid.tsx
+++ b/frontend/src/components/listings/ListingGrid.tsx
@@ -47,7 +47,7 @@ const ListingGrid = (props: Props) => {
       <Spinner />
     </div>
   ) : (
-    <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 max-w-6xl mx-auto">
+    <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8 mx-auto">
       {listingIds.map((listingId) => (
         <ListingGridCard
           key={listingId}
diff --git a/frontend/src/components/listings/ListingGridCard.tsx b/frontend/src/components/listings/ListingGridCard.tsx
index d27b4af1..43f1055d 100644
--- a/frontend/src/components/listings/ListingGridCard.tsx
+++ b/frontend/src/components/listings/ListingGridCard.tsx
@@ -1,4 +1,8 @@
 import clsx from "clsx";
+import Image from "components/Image";
+import { RenderDescription } from "components/listing/ListingDescription";
+import { Card, CardContent, CardHeader, CardTitle } from "components/ui/Card";
+import { Skeleton } from "components/ui/Skeleton";
 import { paths } from "gen/api";
 import { useState } from "react";
 import { useNavigate } from "react-router-dom";
@@ -16,40 +20,41 @@ const ListingGridCard = (props: Props) => {
   const navigate = useNavigate();
   const [hovering, setHovering] = useState(false);
 
-  const part = listingInfo?.find((listing) => listing.id === listingId);
+  const listing = listingInfo?.find((listing) => listing.id === listingId);
 
-  return (
-    <div
-      className="flex flex-col items-center justify-center p-4 m-4 rounded-lg cursor-pointer"
+  return listing ? (
+    <Card
+      className={clsx(
+        "transition-transform duration-100 ease-in-out transform cursor-pointer",
+        "flex flex-col max-w-sm rounded material-card bg-white justify-between",
+        hovering ? "scale-105" : "scale-100",
+      )}
       onMouseEnter={() => setHovering(true)}
       onMouseLeave={() => setHovering(false)}
+      onClick={() => navigate(`/item/${listingId}`)}
     >
-      {part ? (
-        <div
-          className={clsx(
-            "transition-transform duration-100 ease-in-out transform",
-            hovering ? "scale-105" : "scale-100",
-            "w-64 h-64 object-cover rounded-lg",
+      <Image />
+      <div className="px-3 py-4">
+        <CardHeader>
+          <CardTitle className="text-gray-500 text-xl mb-3">
+            {listing?.name}
+          </CardTitle>
+        </CardHeader>
+        <CardContent className="max-h-32 overflow-hidden">
+          {listing?.description && (
+            <RenderDescription description={listing?.description} />
           )}
-          onClick={() => navigate(`/item/${listingId}`)}
-        >
-          <img
-            className="w-full h-full object-cover rounded-lg"
-            // Use a placeholder image if the part has no image
-            src="https://placehold.co/256/DDDDDD/555"
-          />
-          <div className="w-full absolute bottom-0 left-0 text-center p-2">
-            <div className="p-5 bg-gray-100 bg-opacity-75 dark:bg-gray-800 rounded-lg">
-              <h1 className="text-md truncate max-w-full">{part.name}</h1>
-            </div>
-          </div>
-        </div>
-      ) : (
-        // Use a slowly moving placeholder image if the part is loading
-        <div className="w-64 h-64 animate-pulse">
-          <div className="w-full h-full bg-gray-300 dark:bg-gray-700 rounded-lg" />
-        </div>
-      )}
+        </CardContent>
+      </div>
+    </Card>
+  ) : (
+    <div className="bg-transparent">
+      <Skeleton className="h-44 w-70 bg-white" />
+      <Skeleton className="h-6 w-70 mt-5 bg-white" />
+      <Skeleton className="h-6 w-70 mt-5 bg-white" />
+      <Skeleton className="h-5 w-70 mt-2 mb-5 bg-white" />
+      <Skeleton className="h-3.5 w-70 mt-1 bg-white" />
+      <Skeleton className="h-5 mt-3.5 w-20 bg-white" />
     </div>
   );
 };
diff --git a/frontend/src/components/ui/Button/Button.tsx b/frontend/src/components/ui/Button/Button.tsx
index fd854aac..3e956c24 100644
--- a/frontend/src/components/ui/Button/Button.tsx
+++ b/frontend/src/components/ui/Button/Button.tsx
@@ -16,6 +16,8 @@ const buttonVariants = cva(
           "bg-primary text-primary-foreground shadow hover:bg-primary/90",
         destructive:
           "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90 bg-red-500 hover:bg-red-600",
+        warning:
+          "bg-warning text-warning-foreground shadow-sm hover:bg-warning/90 bg-yellow-500 hover:bg-yellow-600",
         outline:
           "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
         ghost: "hover:bg-accent hover:text-accent-foreground",
diff --git a/frontend/src/hooks/useGetListing.tsx b/frontend/src/hooks/useGetListing.tsx
index 76e1112f..cd23a6e2 100644
--- a/frontend/src/hooks/useGetListing.tsx
+++ b/frontend/src/hooks/useGetListing.tsx
@@ -35,6 +35,7 @@ const useGetListing = (id: string) => {
     };
     fetchListing();
   }, []);
+
   return {
     listing,
     isLoading,
diff --git a/frontend/src/pages/Browse.tsx b/frontend/src/pages/Browse.tsx
index 47e5a70a..71beacd7 100644
--- a/frontend/src/pages/Browse.tsx
+++ b/frontend/src/pages/Browse.tsx
@@ -1,14 +1,11 @@
 import { useDebounce } from "@uidotdev/usehooks";
-import AddOrEditList from "components/listing/AddOrEditList";
-import List from "components/listing/List";
-import { Button } from "components/ui/Button/Button";
+import ListingGrid from "components/listings/ListingGrid";
 import { Input } from "components/ui/Input/Input";
 import { useAlertQueue } from "hooks/alerts";
 import { useAuthentication } from "hooks/auth";
 import { useEffect, useState } from "react";
 import { FaTimes } from "react-icons/fa";
 import { useNavigate, useSearchParams } from "react-router-dom";
-import { FormType } from "types";
 
 const Browse = () => {
   const auth = useAuthentication();
@@ -81,7 +78,7 @@ const Browse = () => {
 
   return (
     <>
-      <div className="min-h-screen">
+      <div className="pb-8">
         <div className="flex justify-center mt-4 gap-x-2">
           <div className="relative">
             <Input
@@ -109,17 +106,6 @@ const Browse = () => {
               </div>
             )}
           </div>
-          <div>
-            <Button
-              variant={"primary"}
-              onClick={() => {
-                setShowDialogBox(true);
-                setFormType("create");
-              }}
-            >
-              + New List
-            </Button>
-          </div>
         </div>
 
         {hasButton && (
@@ -144,26 +130,9 @@ const Browse = () => {
             </div>
           </div>
         )}
-        {showDialogBox && (
-          <AddOrEditList
-            listId={listId}
-            formType={formType as FormType}
-            open={showDialogBox}
-            onClose={setShowDialogBox}
-          />
-        )}
-        <div className="grid grid-cols-4 py-4 px-4 gap-4">
-          {listingIds?.map((id) => (
-            <List
-              key={id}
-              id={id}
-              setShowDialogBox={setShowDialogBox}
-              setformType={setFormType}
-              setlistId={setListId}
-            />
-          ))}
-        </div>
       </div>
+
+      <ListingGrid listingIds={listingIds} />
     </>
   );
 };
diff --git a/frontend/src/pages/ListingDetails.tsx b/frontend/src/pages/ListingDetails.tsx
index fe97a149..da386a95 100644
--- a/frontend/src/pages/ListingDetails.tsx
+++ b/frontend/src/pages/ListingDetails.tsx
@@ -20,9 +20,13 @@ const RenderListing = (props: RenderListingProps) => {
 
   return (
     <div className="container mx-auto max-w-4xl shadow-md rounded-lg bg-white dark:bg-gray-800 dark:text-white border bg-card text-card-foreground shadow relative">
-      <ListingHeader title={listing.name} edit={listing.owner_is_user} />
+      <ListingHeader
+        listingId={listing.id}
+        title={listing.name}
+        edit={listing.owner_is_user}
+      />
       <ListingBody listing={listing} />
-      <ListingFooter listing_id={listing.id} edit={listing.owner_is_user} />
+      <ListingFooter listingId={listing.id} edit={listing.owner_is_user} />
     </div>
   );
 };
diff --git a/pyproject.toml b/pyproject.toml
index 94900354..96226bb3 100644
--- a/pyproject.toml
+++ b/pyproject.toml
@@ -36,6 +36,7 @@ namespace_packages = false
 
 module = [
     "boto3.*",
+    "httpx.*",
     "moto.*",
 ]