7 make page explore plants

frontend/src/AppRoutes.tsx

@@ -1,21 +1,24 @@
 import { Route, Routes } from "react-router-dom";
 import PlantMatchPage from "./components/plantMatch/PlantMatchPage.tsx";
-import Profile from "./components/profile/Profile.tsx";
+import ExplorePage from "./pages/explorePage/ExplorePage.tsx";
 import MyMatchesPage from "./pages/MyMatches/MyMatchesPage.tsx";
+import Profile from "./components/profile/Profile.tsx";
 
 // eslint-disable-next-line react-refresh/only-export-components
 export const ROUTES = {
   plantMatch: "/",
-  profile: "/profile",
+  explore: "/explorePlants",
   myMatches: "/my-matches",
+  profile: "/profile",
 } as const;
 
 function AppRoutes() {
   return (
     <Routes>
       <Route path={ROUTES.plantMatch} element={<PlantMatchPage />} />
-      <Route path={ROUTES.profile} element={<Profile />} />
+      <Route path={ROUTES.explore} element={<ExplorePage />} />
       <Route path={ROUTES.myMatches} element={<MyMatchesPage />} />
+      <Route path={ROUTES.profile} element={<Profile />} />
     </Routes>
   );
 }

frontend/src/components/header/Header.tsx

@@ -6,8 +6,9 @@ import { ROUTES } from "../../AppRoutes";
 // Maps each route path to the translation key used for its title
 const pageTitles: Record<string, string> = {
   [ROUTES.plantMatch]: "sidebar.plantMatch",
-  [ROUTES.profile]: "sidebar.profile",
+  [ROUTES.explore]: "sidebar.explorePlants",
   [ROUTES.myMatches]: "sidebar.myMatches",
+  [ROUTES.profile]: "sidebar.profile",
 };
 
 export default function Header() {

frontend/src/components/sidebar/Sidebar.tsx

@@ -24,9 +24,9 @@ export default function Sidebar({ isOpen }: SidebarProps) {
           </li>
 
           <li>
-            <span className="sidebar__link" tabIndex={0}>
+            <NavLink to={ROUTES.explore} className="sidebar__link">
               {t("sidebar.explorePlants")}
-            </span>
+            </NavLink>
           </li>
 
           <li>

frontend/src/hooks/useDebounce.ts

@@ -0,0 +1,13 @@
+import { useEffect, useState } from "react";
+
+export function useDebounce<T>(value: T, delay = 800): T {
+  const [debouncedValue, setDebouncedValue] = useState(value);
+
+  useEffect(() => {
+    const timer = setTimeout(() => setDebouncedValue(value), delay);
+
+    return () => clearTimeout(timer);
+  }, [value, delay]);
+
+  return debouncedValue;
+}

frontend/src/hooks/useSessionState.ts

@@ -0,0 +1,22 @@
+import { useEffect, useState } from "react";
+
+export function useSessionState(key: string, initialValue = "") {
+  const [value, setValue] = useState<string>(() => {
+    try {
+      return sessionStorage.getItem(key) ?? initialValue;
+    } catch {
+      return initialValue;
+    }
+  });
+
+  useEffect(() => {
+    try {
+      sessionStorage.setItem(key, value);
+    } catch {
+        // Storage can fail (private mode, full quota). The app still works,
+        // the value just won't be remembered.
+    }
+  }, [key, value]);
+
+  return [value, setValue] as const;
+}

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

@@ -33,6 +33,26 @@
     "small": "small",
     "succulents": "succulent"
   },
+  "explorePage": {
+    "search": "Search for plants",
+    "watering": "Watering needs",
+    "all": "All",
+    "minimum": "Minimum",
+    "average": "Average",
+    "frequent": "Frequent",
+    "sunlight": "Sun requirements",
+    "full_sun": "Full sun",
+    "part_sun": "Part sun",
+    "part_shade": "Part shade",
+    "location": "Location",
+    "indoor": "Indoor",
+    "outdoor": "Outdoor",
+    "edibility": "Edibility",
+    "edible": "Edible",
+    "poison": "Poisonous",
+    "reset": "Reset",
+    "noResults": "No results found"
+  },
   "myMatchesPage": {
     "guide": "These are your matches:"
   }

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

@@ -33,6 +33,26 @@
     "small": "liten",
     "succulents": "sukkulent"
   },
+  "explorePage": {
+    "search": "Søk etter planter",
+    "watering": "Vanningsbehov",
+    "all": "Alle",
+    "minimum": "Sjeldent",
+    "average": "Jevnlig",
+    "frequent": "Ofte",
+    "sunlight": "Solforhold",
+    "full_sun": "Full sol",
+    "part_sun": "Delvis sol",
+    "part_shade": "Delvis skygge",
+    "location": "Plassering",
+    "indoor": "Innendørs",
+    "outdoor": "Utendørs",
+    "edibility": "Spiselighet",
+    "edible": "Spiselig",
+    "poison": "Giftig",
+    "reset": "Nullstill",
+    "noResults": "Ingen resultater funnet"
+  },
   "myMatchesPage": {
     "guide": "Dette er dine matcher:"
   }

frontend/src/pages/explorePage/ExplorePage.css

@@ -0,0 +1,158 @@
+.explore-page {
+  margin-left: var(--sidebar-width);
+  width: calc(100% - var(--sidebar-width));
+  min-height: 100vh;
+  padding: 40px;
+  box-sizing: border-box;
+
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 30px;
+
+  font-family: Georgia, serif;
+}
+
+.visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  white-space: nowrap;
+}
+
+.explore-form,
+.plant-grid {
+  width: 100%;
+}
+
+.explore-search input {
+  width: 100%;
+  padding: 0.75rem 1rem;
+  font-size: 1rem;
+  border: 1px solid var(--border-soft);
+  border-radius: 8px;
+  box-sizing: border-box;
+}
+
+.explore-search input:focus {
+  outline: none;
+  border-color: var(--dark-green);
+  box-shadow: 0 0 0 2px var(--dark-green);
+}
+
+.explore-filters {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1rem;
+  margin: 1rem 0 0;
+  padding: 0;
+  border: 0;
+}
+
+.filter {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+.filter select {
+  padding: 0.5rem;
+  border: 1px solid var(--border-soft);
+  border-radius: 8px;
+  min-width: 160px;
+}
+
+.filter select:focus {
+  outline: none;
+  border-color: var(--dark-green);
+  box-shadow: 0 0 0 2px var(--dark-green);
+}
+
+.reset-button {
+  align-self: flex-start;
+  width: 74px;
+  height: 38px;
+  border: 1px solid var(--border-soft);
+  border-radius: 8px;
+  background-color: var(--light-green);
+  color: var(--text-dark);
+  font-size: 16px;
+  cursor: pointer;
+}
+
+.reset-button:hover {
+  background-color: var(--dark-green);
+  color: var(--text-light);
+}
+
+.reset-button:focus-within {
+  outline: none;
+  border: var(--dark-green);
+  box-shadow: 0 0 0 2px var(--dark-green);
+}
+
+.plant-grid {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 20px;
+}
+
+.explore-plant-card-placeholder {
+  aspect-ratio: 3 / 4;
+  border-radius: 12px;
+  overflow: hidden;
+  box-sizing: border-box;
+  border: 3px solid var(--border-soft);
+}
+
+.explore-plant-card-placeholder:focus-within {
+  border-color: var(--dark-green);
+}
+
+.plant-card-button {
+  width: 100%;
+  height: 100%;
+  padding: 1rem;
+  text-align: center;
+  background: none;
+  border: none;
+  outline: none;
+  font: inherit;
+  color: inherit;
+  cursor: pointer;
+}
+
+.plant-card-info {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  text-align: left;
+}
+
+@media (max-width: 767px) {
+  .explore-page {
+    margin-left: 0;
+    width: 100%;
+    padding: 20px;
+    gap: 20px;
+  }
+
+  .plant-grid {
+    grid-template-columns: repeat(2, 1fr);
+    gap: 15px;
+  }
+
+  .plant-card-button {
+    padding: 0.5rem;
+  }
+
+  .plant-card-info {
+    font-size: 13px;
+    gap: 0.4rem;
+  }
+}