50 change add to saved plants to add to my matches in explore page

frontend/src/i18n/locales/en/translation.json

@@ -67,7 +67,9 @@
     "pagination": "Page navigation",
     "pageOf": "Page {{page}} of {{totalPages}}",
     "previous": "Previous",
-    "next": "Next"
+    "next": "Next",
+    "addMatch": "Add to my matches",
+    "alreadyMatched": "Already in my matches"
   },
   "myMatchesPage": {
     "noMatches": "You have no matches yet. Press the flower on the match page to match with a plant.",

frontend/src/i18n/locales/no/translation.json

@@ -67,7 +67,9 @@
     "pagination": "Sidenavigasjon",
     "pageOf": "Side {{page}} av {{totalPages}}",
     "previous": "Forrige",
-    "next": "Neste"
+    "next": "Neste",
+    "addMatch": "Legg til i mine matcher",
+    "alreadyMatched": "Allerede i mine matcher"
   },
   "myMatchesPage": {
     "noMatches": "Du har ingen matcher ennå. Trykk på blomsten på match-siden for å matche med en plante.",

frontend/src/pages/explorePlants/ExplorePlants.css

@@ -118,6 +118,7 @@
   width: calc(390px * var(--card-scale));
   height: calc(620px * var(--card-scale));
   justify-self: center;
+  position: relative;
 }
 
 .explore-plant-item .plant-card-flipper {
@@ -227,6 +228,35 @@
   font-weight: 700;
 }
 
+.add-match-button {
+  position: absolute;
+  top: -15px;
+  right: -15px;
+  z-index: 2;
+  width: 36px;
+  height: 36px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  border-radius: 50%;
+  background-color: var(--dark-pink);
+  color: var(--text-light);
+  font-size: 18px;
+  line-height: 1;
+  cursor: pointer;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
+}
+
+.add-match-button:not(:disabled):hover {
+  transform: scale(1.1);
+}
+
+.add-match-button:disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+
 @media (max-width: 767px) {
   .explore-page {
     margin-left: 0;

frontend/src/pages/explorePlants/ExplorePlants.tsx

@@ -9,6 +9,7 @@ import {
   type ExplorePlantsData,
 } from "./explorePlantsQuery.ts";
 import PlantCard from "../../components/plantCard/PlantCard.tsx";
+import { useMatchedPlants } from "../../hooks/useMatchedPlants.ts";
 import "./ExplorePlants.css";
 
 const PAGE_SIZE = 12;
@@ -18,6 +19,9 @@ const SORT_OPTIONS = ["name_asc", "name_desc", "watering_asc", "careLevel_asc"];
 export default function ExplorePlants() {
   const { t } = useTranslation();
 
+  // Same hook as PlantMatch, so both pages share the same matches
+  const { matches, addMatch } = useMatchedPlants();
+
   const [search, setSearch] = useSessionState("ExplorePlants.search");
   const debouncedSearch = useDebounce(search, 800);
   const [watering, setWatering] = useSessionState("ExplorePlants.watering");
@@ -202,19 +206,38 @@ export default function ExplorePlants() {
         )}
 
         <ul className="plant-grid">
-          {plants.map((plant) => (
-            <li key={plant.id} className="explore-plant-item">
-              <PlantCard
-                name={plant.name}
-                imageURL={plant.imageURL}
-                scientificName={plant.scientificName}
-                description={plant.description}
-                watering={plant.watering}
-                sunlight={plant.sunlight}
-                careLevel={plant.careLevel}
-              />
-            </li>
-          ))}
+          {plants.map((plant) => {
+            // Disable the button if the plant is already in MyMatches
+            const isMatched = matches.some((match) => match.id === plant.id);
+
+            return (
+              <li key={plant.id} className="explore-plant-item">
+                <PlantCard
+                  name={plant.name}
+                  imageURL={plant.imageURL}
+                  scientificName={plant.scientificName}
+                  description={plant.description}
+                  watering={plant.watering}
+                  sunlight={plant.sunlight}
+                  careLevel={plant.careLevel}
+                />
+                {/* Sibling of the card (not inside it), so no nested buttons */}
+                <button
+                  type="button"
+                  className="add-match-button"
+                  onClick={() => addMatch(plant)}
+                  disabled={isMatched}
+                  aria-label={
+                    isMatched
+                      ? t("ExplorePlants.alreadyMatched")
+                      : t("ExplorePlants.addMatch")
+                  }
+                >
+                  ✿
+                </button>
+              </li>
+            );
+          })}
         </ul>
 
         {totalCount > 0 && (