feat: add the search bar in courts page

web/src/components/Verdict/Answer.tsx

@@ -1,17 +1,8 @@
 import React from "react";
-import styled from "styled-components";
 
 import { Answer } from "@kleros/kleros-sdk/src/dataMappings/utils/disputeDetailsTypes";
 
-import { AnswerDescription, AnswerTitle, AnswerTitleAndDescription } from "../DisputePreview/DisputeContext";
-
-const Container = styled.div`
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: 6px;
-`;
+import { AnswerTitle, AnswerTitleAndDescription } from "../DisputePreview/DisputeContext";
 
 interface IAnswer {
   answer?: Answer;
@@ -24,12 +15,11 @@ const AnswerDisplay: React.FC<IAnswer> = ({ answer, currentRuling }) => {
       {answer ? (
         <AnswerTitleAndDescription dir="auto">
           <AnswerTitle>{answer.title}</AnswerTitle>
-          <AnswerDescription>{answer.description.trim() ? ` - ${answer.description}` : null}</AnswerDescription>
         </AnswerTitleAndDescription>
       ) : (
-        <Container>
+        <AnswerTitleAndDescription>
           {currentRuling !== 0 ? <small>Answer 0x{currentRuling}</small> : <small>Refuse to Arbitrate</small>}
-        </Container>
+        </AnswerTitleAndDescription>
       )}
     </>
   );

web/src/components/Verdict/FinalDecision.tsx

@@ -33,15 +33,15 @@ const Container = styled.div`
 
 const JuryContainer = styled.div`
   display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
   align-items: center;
   gap: 5px 7px;
-  flex: 1;
+  flex-wrap: wrap;
+
   h3 {
     line-height: 21px;
     margin-bottom: 0px;
   }
+
   > div {
     flex: 1;
   }

web/src/pages/Courts/CourtDetails/TopSearch.tsx

@@ -0,0 +1,163 @@
+import React, { useState, useMemo } from "react";
+import styled, { css } from "styled-components";
+
+import { useNavigate, useParams } from "react-router-dom";
+
+import { Card, DropdownCascader, Searchbar } from "@kleros/ui-components-library";
+
+import { isKlerosUniversity } from "src/consts";
+import { isUndefined } from "utils/index";
+
+import { useCourtTree, rootCourtToItems } from "queries/useCourtTree";
+
+import { responsiveSize } from "styles/responsiveSize";
+import { landscapeStyle } from "styles/landscapeStyle";
+import { hoverShortTransitionTiming } from "styles/commonStyles";
+
+import { StyledSkeleton } from "components/StyledSkeleton";
+import StakeMaintenanceButtons from "../StakeMaintenanceButton";
+
+const Container = styled.div`
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 8px 16px;
+  flex-wrap: wrap;
+`;
+
+const StyledDropdownCascader = styled(DropdownCascader)`
+  width: ${responsiveSize(200, 240)};
+  > button {
+    width: 100%;
+  }
+`;
+
+const SearchBarContainer = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  position: relative;
+  ${landscapeStyle(
+    () => css`
+      flex: 1;
+    `
+  )}
+`;
+
+const StyledSearchbar = styled(Searchbar)`
+  width: 100%;
+  input {
+    font-size: 16px;
+    height: 45px;
+    padding-top: 0px;
+    padding-bottom: 0px;
+  }
+`;
+
+const SearchResultsContainer = styled.div`
+  position: absolute;
+  margin-top: 45px;
+  max-height: 400px;
+  border: 1px solid ${({ theme }) => theme.stroke};
+  width: 100%;
+  flex-direction: column;
+  border-radius: 4px;
+  overflow-y: auto;
+  z-index: 1;
+  background-color: ${({ theme }) => theme.whiteBackground};
+`;
+
+const StyledCard = styled(Card)<{ selected: boolean }>`
+  ${hoverShortTransitionTiming}
+  height: auto;
+  width: 100%;
+  padding: ${({ selected }) => (selected ? "16px 13px" : "16px")};
+  cursor: pointer;
+  border: none;
+  border-left: ${({ selected, theme }) => (selected ? `3px solid ${theme.primaryBlue}` : "none")};
+  background-color: ${({ selected, theme }) => (selected ? theme.mediumBlue : "transparent")};
+
+  :hover {
+    background-color: ${({ theme }) => theme.mediumBlue};
+  }
+`;
+
+const CourtParentSpan = styled.span`
+  color: ${({ theme }) => theme.secondaryText}EE;
+`;
+
+const CourtNameSpan = styled.span`
+  color: ${({ theme }) => theme.primaryText};
+`;
+
+function flattenCourts(court, parent = null) {
+  const current = {
+    ...court,
+    parentName: parent?.name ?? null,
+  };
+  const children = (court.children || []).flatMap((child) => flattenCourts(child, current));
+  return [current, ...children];
+}
+
+const TopSearch: React.FC = () => {
+  const { data } = useCourtTree();
+  const navigate = useNavigate();
+  const { id: currentCourtId } = useParams();
+  const items = useMemo(() => !isUndefined(data) && [rootCourtToItems(data.court)], [data]);
+  const isUniversity = isKlerosUniversity();
+  const [search, setSearch] = useState("");
+
+  const filteredCourts = useMemo(() => {
+    if (!data?.court) return [];
+    const courts = flattenCourts(data.court).filter((c) => c.name.toLowerCase().includes(search.toLowerCase()));
+    const selectedCourt = courts.find((c) => c.id === currentCourtId);
+    if (!selectedCourt) return courts;
+
+    return [selectedCourt, ...courts.filter((c) => c.id !== currentCourtId)];
+  }, [data, search, currentCourtId]);
+
+  return (
+    <Container>
+      {items ? (
+        <>
+          <StyledDropdownCascader
+            items={items}
+            onSelect={(path) => navigate(path.toString())}
+            placeholder="Select Court"
+          />
+          <SearchBarContainer>
+            <StyledSearchbar
+              dir="auto"
+              type="text"
+              placeholder="Search"
+              value={search}
+              onChange={(e) => setSearch(e.target.value)}
+            />
+            {search && filteredCourts.length > 0 && (
+              <SearchResultsContainer>
+                {filteredCourts.map((court) => (
+                  <StyledCard
+                    key={court.id}
+                    selected={court.id === currentCourtId}
+                    onClick={() => {
+                      navigate(`/courts/${court.id}`);
+                      setSearch("");
+                    }}
+                  >
+                    {court.parentName && <CourtParentSpan>{court.parentName} / </CourtParentSpan>}
+                    <CourtNameSpan>{court.name}</CourtNameSpan>
+                  </StyledCard>
+                ))}
+              </SearchResultsContainer>
+            )}
+          </SearchBarContainer>
+        </>
+      ) : (
+        <StyledSkeleton width={240} height={42} />
+      )}
+      {isUniversity ? null : <StakeMaintenanceButtons />}
+    </Container>
+  );
+};
+
+export default TopSearch;

web/src/pages/Courts/CourtDetails/index.tsx

@@ -25,6 +25,7 @@ import { Divider } from "components/Divider";
 import Description from "./Description";
 import StakePanel from "./StakePanel";
 import Stats from "./Stats";
+import TopSearch from "./TopSearch";
 
 const Container = styled.div``;
 
@@ -113,6 +114,7 @@ const CourtDetails: React.FC = () => {
 
   return (
     <Container>
+      <TopSearch />
       <StyledCard>
         <CourtHeader>
           <CourtInfo>

web/src/pages/Courts/index.tsx

@@ -7,7 +7,6 @@ import { responsiveSize } from "styles/responsiveSize";
 import { Routes, Route, Navigate } from "react-router-dom";
 
 import CourtDetails from "./CourtDetails";
-import TopSearch from "./TopSearch";
 
 const Container = styled.div`
   width: 100%;
@@ -26,7 +25,6 @@ const Container = styled.div`
 const Courts: React.FC = () => {
   return (
     <Container>
-      <TopSearch />
       <Routes>
         <Route path="/:id/*" element={<CourtDetails />} />
         <Route path="*" element={<Navigate to="1" replace />} />