diff --git a/src/app/HomePage.js b/src/app/HomePage.js
index 3fe4404..0e357d2 100644
--- a/src/app/HomePage.js
+++ b/src/app/HomePage.js
@@ -379,9 +379,12 @@ function NewItemsSectionContent() {
thumbnailUrl
isNc
isPb
+ currentUserOwnsThis
+ currentUserWantsThis
}
}
- `
+ `,
+ { context: { sendAuth: true } }
);
if (loading) {
diff --git a/src/app/ItemSearchPage.js b/src/app/ItemSearchPage.js
index d679df0..ae54daf 100644
--- a/src/app/ItemSearchPage.js
+++ b/src/app/ItemSearchPage.js
@@ -147,6 +147,8 @@ function ItemSearchPageResults({ query: latestQuery, offset }) {
thumbnailUrl
isNc
isPb
+ currentUserOwnsThis
+ currentUserWantsThis
}
}
}
diff --git a/src/app/UserItemsPage.js b/src/app/UserItemsPage.js
index 7c4f8b3..37dc41e 100644
--- a/src/app/UserItemsPage.js
+++ b/src/app/UserItemsPage.js
@@ -602,7 +602,16 @@ function ClosetList({ closetList, isCurrentUser, showHeading }) {
{sortedItems.map((item) => (
-
+
))}
diff --git a/src/app/components/SquareItemCard.js b/src/app/components/SquareItemCard.js
index d99eab6..ef282e2 100644
--- a/src/app/components/SquareItemCard.js
+++ b/src/app/components/SquareItemCard.js
@@ -9,8 +9,14 @@ import { ClassNames } from "@emotion/react";
import { Link } from "react-router-dom";
import { safeImageUrl, useCommonStyles } from "../util";
+import { CheckIcon, StarIcon } from "@chakra-ui/icons";
-function SquareItemCard({ item, ...props }) {
+function SquareItemCard({
+ item,
+ hideOwnsBadge = false,
+ hideWantsBadge = false,
+ ...props
+}) {
const outlineShadowValue = useToken("shadows", "outline");
return (
@@ -36,7 +42,13 @@ function SquareItemCard({ item, ...props }) {
>
}
+ thumbnailImage={
+
+ }
/>
)}
@@ -92,7 +104,7 @@ function SquareItemCardLayout({ name, thumbnailImage, minHeightNumLines = 2 }) {
);
}
-function ItemThumbnail({ item }) {
+function ItemThumbnail({ item, hideOwnsBadge, hideWantsBadge }) {
const kindColorScheme = item.isNc ? "purple" : item.isPb ? "orange" : "gray";
const thumbnailShadowColor = useColorModeValue(
@@ -126,6 +138,27 @@ function ItemThumbnail({ item }) {
`}
loading="lazy"
/>
+
+ {!hideOwnsBadge && item.currentUserOwnsThis && (
+
+
+
+ )}
+ {!hideWantsBadge && item.currentUserWantsThis && (
+
+
+
+ )}
+
{item.isNc != null && (
+ {({ css }) => (
+
*/
+ white-space: nowrap;
+ vertical-align: middle;
+ padding-left: 0.25rem;
+ padding-right: 0.25rem;
+ text-transform: uppercase;
+ font-size: 0.65rem;
+ font-weight: 700;
+ background: ${badgeBackgroundValue};
+ color: ${badgeColorValue};
+ `}
+ >
+ {children}
+
+ )}
+
+ );
+}
+
function ItemThumbnailKindBadge({ colorScheme, children }) {
const badgeBackground = useColorModeValue(
`${colorScheme}.100`,