From 3d8ddefd87bc14778228b45c88fea09bb557588e Mon Sep 17 00:00:00 2001
From: Tom Robiquet <tom-robiquet@hotmail.co.uk>
Date: Wed, 4 Oct 2023 17:20:42 +0200
Subject: [PATCH 01/17] poc

---
 components/markets/MarketSearch.tsx  | 23 +++++++++
 components/menu/index.tsx            |  2 +
 lib/hooks/queries/useMarketSearch.ts | 70 ++++++++++++++++++++++++++++
 3 files changed, 95 insertions(+)
 create mode 100644 components/markets/MarketSearch.tsx
 create mode 100644 lib/hooks/queries/useMarketSearch.ts

diff --git a/components/markets/MarketSearch.tsx b/components/markets/MarketSearch.tsx
new file mode 100644
index 000000000..ec9fa9b23
--- /dev/null
+++ b/components/markets/MarketSearch.tsx
@@ -0,0 +1,23 @@
+import { useMarketSearch } from "lib/hooks/queries/useMarketSearch";
+import { useState } from "react";
+
+const MarketSearch = () => {
+  const [searchTerm, setSearchTerm] = useState("");
+
+  const { data: markets } = useMarketSearch(searchTerm);
+
+  console.log(markets);
+
+  return (
+    <div>
+      <input
+        value={searchTerm}
+        onChange={(event) => {
+          setSearchTerm(event.target.value);
+        }}
+      />
+    </div>
+  );
+};
+
+export default MarketSearch;
diff --git a/components/menu/index.tsx b/components/menu/index.tsx
index 290fbc9ff..0b1e90481 100644
--- a/components/menu/index.tsx
+++ b/components/menu/index.tsx
@@ -17,6 +17,7 @@ import {
   FiList,
 } from "react-icons/fi";
 import { useCategoryCounts } from "lib/hooks/queries/useCategoryCounts";
+import MarketSearch from "components/markets/MarketSearch";
 
 const AccountButton = dynamic(() => import("../account/AccountButton"), {
   ssr: false,
@@ -157,6 +158,7 @@ const TopBar = () => {
             </div>
             <div>Leaderboard</div>
           </Link>
+          <MarketSearch />
         </div>
         <AccountButton />
       </div>
diff --git a/lib/hooks/queries/useMarketSearch.ts b/lib/hooks/queries/useMarketSearch.ts
new file mode 100644
index 000000000..3e8e59ac5
--- /dev/null
+++ b/lib/hooks/queries/useMarketSearch.ts
@@ -0,0 +1,70 @@
+import { useQuery } from "@tanstack/react-query";
+import { isIndexedSdk } from "@zeitgeistpm/sdk-next";
+import { useSdkv2 } from "../useSdkv2";
+import { useDebounce } from "use-debounce";
+import Fuse from "fuse.js";
+
+// import {
+//   FullMarketFragment,
+//   InputMaybe,
+//   MarketWhereInput,
+// } from "@zeitgeistpm/indexer";
+
+export const marketSearchKey = "market-search";
+
+export const useMarketSearch = (searchTerm: string) => {
+  const [sdk, id] = useSdkv2();
+
+  const [debouncedSearchTerm] = useDebounce(searchTerm, 300);
+
+  const enabled =
+    isIndexedSdk(sdk) && debouncedSearchTerm && debouncedSearchTerm.length > 1;
+
+  const query = useQuery(
+    [id, marketSearchKey, debouncedSearchTerm],
+    async () => {
+      if (enabled) {
+        // const searchWords = debouncedSearchTerm.split(" ");
+        console.time("a");
+        const { markets } = await sdk.indexer.markets({
+          where: {
+            OR: [
+              { question_containsInsensitive: debouncedSearchTerm },
+              { description_containsInsensitive: debouncedSearchTerm },
+              //   { tags_containsAny: [debouncedSearchTerm] },
+            ],
+          },
+        });
+        console.timeEnd("a");
+
+        console.log(markets);
+        console.log(markets.map((m) => m.question));
+
+        const options = {
+          includeScore: true,
+          // Search in `author` and in `tags` array
+          keys: ["question", "description"],
+          threshold: 0.9,
+        };
+
+        const fuse = new Fuse(markets, options);
+
+        const result = fuse.search(debouncedSearchTerm);
+        console.log(result);
+
+        console.log(result.map((m) => m.item.question));
+        console.log(result.map((m) => m.score));
+
+        return markets;
+      }
+    },
+    {
+      enabled: Boolean(enabled),
+      staleTime: 10_000,
+    },
+  );
+
+  return query;
+};
+
+// const;

From f6dd8cfb7d586a9c9362af176e41e62989f35559 Mon Sep 17 00:00:00 2001
From: Tom Robiquet <tom-robiquet@hotmail.co.uk>
Date: Thu, 5 Oct 2023 13:52:40 +0200
Subject: [PATCH 02/17] don't shorten links with spaces

---
 components/ui/QuillViewer.tsx | 15 ++++++++++-----
 1 file changed, 10 insertions(+), 5 deletions(-)

diff --git a/components/ui/QuillViewer.tsx b/components/ui/QuillViewer.tsx
index fdf6c42d0..38ee2446a 100644
--- a/components/ui/QuillViewer.tsx
+++ b/components/ui/QuillViewer.tsx
@@ -1,4 +1,5 @@
 import { useMemo } from "react";
+import { Linkedin } from "react-feather";
 import ReactQuill from "react-quill";
 import "react-quill/dist/quill.bubble.css";
 
@@ -13,12 +14,16 @@ const QuillViewer = ({ value }: { value: string }) => {
     for (const match of matches) {
       const [fullLink, linkText] = match;
 
-      const newLinkText =
-        linkText.length > maxLength
-          ? linkText.substring(0, maxLength) + "..."
-          : linkText;
+      const linkContainSpaces = linkText.includes(" ");
 
-      value = value.replace(`>${linkText}<`, `>${newLinkText}<`);
+      if (linkContainSpaces === false) {
+        const newLinkText =
+          linkText.length > maxLength
+            ? linkText.substring(0, maxLength) + "..."
+            : linkText;
+
+        value = value.replace(`>${linkText}<`, `>${newLinkText}<`);
+      }
     }
     return value;
   }, [value]);

From d2b60762606b921ce3ccc82e31529dd798ee2b98 Mon Sep 17 00:00:00 2001
From: Tom Robiquet <tom-robiquet@hotmail.co.uk>
Date: Thu, 5 Oct 2023 13:52:47 +0200
Subject: [PATCH 03/17] adjust

---
 lib/hooks/queries/useMarketSearch.ts | 15 ++++++++++-----
 1 file changed, 10 insertions(+), 5 deletions(-)

diff --git a/lib/hooks/queries/useMarketSearch.ts b/lib/hooks/queries/useMarketSearch.ts
index 3e8e59ac5..14ab56fd1 100644
--- a/lib/hooks/queries/useMarketSearch.ts
+++ b/lib/hooks/queries/useMarketSearch.ts
@@ -4,11 +4,14 @@ import { useSdkv2 } from "../useSdkv2";
 import { useDebounce } from "use-debounce";
 import Fuse from "fuse.js";
 
-// import {
-//   FullMarketFragment,
-//   InputMaybe,
-//   MarketWhereInput,
-// } from "@zeitgeistpm/indexer";
+import {
+  FullMarketFragment,
+  InputMaybe,
+  MarketWhereInput,
+  Exact,
+  MarketOrderByInput,
+} from "@zeitgeistpm/indexer";
+import { RequestDocument } from "graphql-request";
 
 export const marketSearchKey = "market-search";
 
@@ -34,6 +37,8 @@ export const useMarketSearch = (searchTerm: string) => {
               //   { tags_containsAny: [debouncedSearchTerm] },
             ],
           },
+          order: MarketOrderByInput.IdDesc,
+          limit: 100,
         });
         console.timeEnd("a");
 

From 91b2f9a8ee7377c6c08a0e94411bf184030b7ea2 Mon Sep 17 00:00:00 2001
From: Tom Robiquet <tom-robiquet@hotmail.co.uk>
Date: Fri, 13 Oct 2023 13:09:27 +0200
Subject: [PATCH 04/17] fix

---
 lib/hooks/queries/useMarketSearch.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lib/hooks/queries/useMarketSearch.ts b/lib/hooks/queries/useMarketSearch.ts
index 14ab56fd1..12ebbefa2 100644
--- a/lib/hooks/queries/useMarketSearch.ts
+++ b/lib/hooks/queries/useMarketSearch.ts
@@ -1,5 +1,5 @@
 import { useQuery } from "@tanstack/react-query";
-import { isIndexedSdk } from "@zeitgeistpm/sdk-next";
+import { isIndexedSdk } from "@zeitgeistpm/sdk";
 import { useSdkv2 } from "../useSdkv2";
 import { useDebounce } from "use-debounce";
 import Fuse from "fuse.js";

From b61313436b551231723e894f83a0e56a890c298b Mon Sep 17 00:00:00 2001
From: Tom Robiquet <tom-robiquet@hotmail.co.uk>
Date: Fri, 13 Oct 2023 16:38:19 +0200
Subject: [PATCH 05/17] break search term up by words

---
 lib/hooks/queries/useMarketSearch.ts | 44 ++++++++++++++++++++++++----
 1 file changed, 38 insertions(+), 6 deletions(-)

diff --git a/lib/hooks/queries/useMarketSearch.ts b/lib/hooks/queries/useMarketSearch.ts
index 12ebbefa2..68b767d87 100644
--- a/lib/hooks/queries/useMarketSearch.ts
+++ b/lib/hooks/queries/useMarketSearch.ts
@@ -29,13 +29,22 @@ export const useMarketSearch = (searchTerm: string) => {
       if (enabled) {
         // const searchWords = debouncedSearchTerm.split(" ");
         console.time("a");
+        const search = buildSearch(debouncedSearchTerm);
+
+        // const response = await sdk.indexer.client.request(`
+        //   query MyQuery {
+        //     markets(where: { OR: {${search}}}) {
+        //       id
+        //       tags
+        //     }
+        //   }
+        // `);
+
+        // console.log("res", response);
+
         const { markets } = await sdk.indexer.markets({
           where: {
-            OR: [
-              { question_containsInsensitive: debouncedSearchTerm },
-              { description_containsInsensitive: debouncedSearchTerm },
-              //   { tags_containsAny: [debouncedSearchTerm] },
-            ],
+            OR: search,
           },
           order: MarketOrderByInput.IdDesc,
           limit: 100,
@@ -47,7 +56,6 @@ export const useMarketSearch = (searchTerm: string) => {
 
         const options = {
           includeScore: true,
-          // Search in `author` and in `tags` array
           keys: ["question", "description"],
           threshold: 0.9,
         };
@@ -72,4 +80,28 @@ export const useMarketSearch = (searchTerm: string) => {
   return query;
 };
 
+// const buildSearch = (searchTerm: string) => {
+//   const search = searchTerm
+//     .split(" ")
+//     .map(
+//       (word) =>
+//         `description_containsInsensitive: "${word}", question_containsInsensitive: "${word}"`,
+//     )
+//     .join(",");
+//   console.log(search);
+
+//   return search;
+// };
+const buildSearch = (searchTerm: string) => {
+  const search = searchTerm
+    .split(" ")
+    .map((word) => [
+      { question_containsInsensitive: word },
+      { description_containsInsensitive: word },
+    ])
+    .flat();
+
+  return search;
+};
+
 // const;

From 0ba9d0c1f1ede2ef269b795df3a207cd76193d0c Mon Sep 17 00:00:00 2001
From: Tom Robiquet <tom-robiquet@hotmail.co.uk>
Date: Fri, 13 Oct 2023 16:57:19 +0200
Subject: [PATCH 06/17] tune ordering

---
 lib/hooks/queries/useMarketSearch.ts | 34 +++++++++++++++++++++-------
 1 file changed, 26 insertions(+), 8 deletions(-)

diff --git a/lib/hooks/queries/useMarketSearch.ts b/lib/hooks/queries/useMarketSearch.ts
index 68b767d87..f6697d450 100644
--- a/lib/hooks/queries/useMarketSearch.ts
+++ b/lib/hooks/queries/useMarketSearch.ts
@@ -53,22 +53,40 @@ export const useMarketSearch = (searchTerm: string) => {
 
         console.log(markets);
         console.log(markets.map((m) => m.question));
-
-        const options = {
+        console.time("b");
+        const fuse = new Fuse(markets, {
           includeScore: true,
-          keys: ["question", "description"],
           threshold: 0.9,
-        };
-
-        const fuse = new Fuse(markets, options);
+          keys: [
+            //matches in the question are consisdered more important
+            {
+              name: "question",
+              weight: 3,
+            },
+            {
+              name: "description",
+              weight: 1,
+            },
+            { name: "status", weight: 0.2 },
+          ],
+        });
 
-        const result = fuse.search(debouncedSearchTerm);
+        // const result = fuse.search(debouncedSearchTerm);
+        const result = fuse.search({
+          $or: [
+            { question: debouncedSearchTerm },
+            { description: debouncedSearchTerm },
+            { status: "Active" },
+          ],
+        });
+        console.timeEnd("b");
         console.log(result);
 
         console.log(result.map((m) => m.item.question));
+        console.log(result.map((m) => m.item.status));
         console.log(result.map((m) => m.score));
 
-        return markets;
+        return result.map((r) => r.item);
       }
     },
     {

From c798a238ea47ad430a52c49b3ce8ddabb5512796 Mon Sep 17 00:00:00 2001
From: Tom Robiquet <tom-robiquet@hotmail.co.uk>
Date: Wed, 8 Nov 2023 12:27:05 +0100
Subject: [PATCH 07/17] display results

---
 components/markets/MarketSearch.tsx  | 49 ++++++++++++++++++++++++----
 lib/hooks/queries/useMarketSearch.ts | 10 +-----
 2 files changed, 44 insertions(+), 15 deletions(-)

diff --git a/components/markets/MarketSearch.tsx b/components/markets/MarketSearch.tsx
index ec9fa9b23..19748db31 100644
--- a/components/markets/MarketSearch.tsx
+++ b/components/markets/MarketSearch.tsx
@@ -1,5 +1,9 @@
+import { Combobox } from "@headlessui/react";
 import { useMarketSearch } from "lib/hooks/queries/useMarketSearch";
+import Link from "next/link";
+import MarketId from "pages/api/og/[marketId]";
 import { useState } from "react";
+import { MarketStatus, FullMarketFragment } from "@zeitgeistpm/indexer";
 
 const MarketSearch = () => {
   const [searchTerm, setSearchTerm] = useState("");
@@ -10,12 +14,45 @@ const MarketSearch = () => {
 
   return (
     <div>
-      <input
-        value={searchTerm}
-        onChange={(event) => {
-          setSearchTerm(event.target.value);
-        }}
-      />
+      <div>
+        <input
+          className="rounded-md"
+          value={searchTerm}
+          onChange={(event) => {
+            setSearchTerm(event.target.value);
+          }}
+        />
+      </div>
+      {markets && (
+        <div className="flex flex-col absolute bg-white px-4 py-2 rounded-md top-[40px] max-h-[300px] overflow-scroll w-[500px]">
+          <div className="text-sky-600">Results</div>
+
+          {markets.length > 0 ? (
+            markets?.map((market) => (
+              <Link
+                href={`/markets/${market.marketId}`}
+                className="py-2 flex overflow-ellipsis"
+              >
+                <div className="overflow-ellipsis line-clamp-1 mr-4">
+                  {market.question}
+                </div>
+                <div
+                  className={`ml-auto text-xs rounded-md px-2 py-1 ${
+                    market.status === MarketStatus.Active
+                      ? "bg-green-500"
+                      : "bg-red-600"
+                  }`}
+                >
+                  {market.status}
+                </div>
+              </Link>
+            ))
+          ) : (
+            <div className="text-center w-full pt-6 pb-4">No results</div>
+          )}
+          {}
+        </div>
+      )}
     </div>
   );
 };
diff --git a/lib/hooks/queries/useMarketSearch.ts b/lib/hooks/queries/useMarketSearch.ts
index f6697d450..8ea858580 100644
--- a/lib/hooks/queries/useMarketSearch.ts
+++ b/lib/hooks/queries/useMarketSearch.ts
@@ -51,14 +51,12 @@ export const useMarketSearch = (searchTerm: string) => {
         });
         console.timeEnd("a");
 
-        console.log(markets);
-        console.log(markets.map((m) => m.question));
         console.time("b");
         const fuse = new Fuse(markets, {
           includeScore: true,
           threshold: 0.9,
           keys: [
-            //matches in the question are consisdered more important
+            //matches in the question are consisdered more important than description, slightly favour active markets
             {
               name: "question",
               weight: 3,
@@ -71,7 +69,6 @@ export const useMarketSearch = (searchTerm: string) => {
           ],
         });
 
-        // const result = fuse.search(debouncedSearchTerm);
         const result = fuse.search({
           $or: [
             { question: debouncedSearchTerm },
@@ -80,11 +77,6 @@ export const useMarketSearch = (searchTerm: string) => {
           ],
         });
         console.timeEnd("b");
-        console.log(result);
-
-        console.log(result.map((m) => m.item.question));
-        console.log(result.map((m) => m.item.status));
-        console.log(result.map((m) => m.score));
 
         return result.map((r) => r.item);
       }

From 3f71aebdbcde740d0eaa073f41710eb089b7aca7 Mon Sep 17 00:00:00 2001
From: Tom Robiquet <tom-robiquet@hotmail.co.uk>
Date: Thu, 9 Nov 2023 11:39:00 +0100
Subject: [PATCH 08/17] styling

---
 components/markets/MarketSearch.tsx | 33 +++++++++++++++++++----------
 components/top-bar/index.tsx        |  6 +++---
 2 files changed, 25 insertions(+), 14 deletions(-)

diff --git a/components/markets/MarketSearch.tsx b/components/markets/MarketSearch.tsx
index 19748db31..6c84aeb08 100644
--- a/components/markets/MarketSearch.tsx
+++ b/components/markets/MarketSearch.tsx
@@ -4,27 +4,36 @@ import Link from "next/link";
 import MarketId from "pages/api/og/[marketId]";
 import { useState } from "react";
 import { MarketStatus, FullMarketFragment } from "@zeitgeistpm/indexer";
+import { Loader, Search } from "react-feather";
 
 const MarketSearch = () => {
   const [searchTerm, setSearchTerm] = useState("");
+  const [showResults, setShowResults] = useState(false);
 
   const { data: markets } = useMarketSearch(searchTerm);
 
-  console.log(markets);
-
   return (
-    <div>
-      <div>
+    <div className="w-full mx-3 md:mx-7">
+      <div className="flex items-center">
+        <Search className="text-ztg-blue mr-4" />
         <input
-          className="rounded-md"
+          className="rounded-sm bg-sky-900 text-white h-8 px-2 w-full focus:outline-none max-w-[500px]"
           value={searchTerm}
           onChange={(event) => {
+            setShowResults(true);
             setSearchTerm(event.target.value);
           }}
         />
       </div>
-      {markets && (
-        <div className="flex flex-col absolute bg-white px-4 py-2 rounded-md top-[40px] max-h-[300px] overflow-scroll w-[500px]">
+      {showResults && markets && (
+        <div
+          onBlur={() => {
+            //todo
+            console.log("blur");
+            setShowResults(false);
+          }}
+          className="flex flex-col absolute bg-white px-4 py-2 rounded-md top-[45px] translate-x-[40px] max-h-[300px] overflow-scroll max-w-[500px] shadow-2xl"
+        >
           <div className="text-sky-600">Results</div>
 
           {markets.length > 0 ? (
@@ -37,13 +46,15 @@ const MarketSearch = () => {
                   {market.question}
                 </div>
                 <div
-                  className={`ml-auto text-xs rounded-md px-2 py-1 ${
+                  className={`ml-auto text-xs rounded-md px-2 py-1 w-16 text-center text-white ${
                     market.status === MarketStatus.Active
-                      ? "bg-green-500"
-                      : "bg-red-600"
+                      ? "bg-sheen-green"
+                      : "bg-vermilion"
                   }`}
                 >
-                  {market.status}
+                  {market.status === MarketStatus.Active
+                    ? "Active"
+                    : "Inactive"}
                 </div>
               </Link>
             ))
diff --git a/components/top-bar/index.tsx b/components/top-bar/index.tsx
index effba6aea..e36c7fa42 100644
--- a/components/top-bar/index.tsx
+++ b/components/top-bar/index.tsx
@@ -51,12 +51,12 @@ const TopBar = () => {
       className={`w-full py-3.5 fixed top-0 z-40 transition-all duration-300 bg-black h-topbar-height`}
     >
       <div className="h-full relative flex items-center container-fluid">
-        <div className="h-full hidden md:flex items-center justify-center border-r-1 border-blue-600 pr-3 md:pr-7">
+        <div className="h-full hidden md:flex items-center justify-center pr-3 md:pr-7">
           <Link href="/">
             <MenuLogo />
           </Link>
         </div>
-        <div className="md:pl-7 flex flex-1 gap-7">
+        <div className="md:px-7 flex flex-1 gap-7 items-center border-x-0 md:border-x-1 border-ztg-blue py-2">
           <Menu as="div" className="relative inline-block text-left">
             {({ open, close }) => {
               return (
@@ -197,8 +197,8 @@ const TopBar = () => {
             </div>
             <div>Leaderboard</div>
           </Link>
-          <MarketSearch />
         </div>
+        <MarketSearch />
         <div className="relative center gap-3">
           <GetTokensButton />
           <AccountButton />

From 5d2410953ae1de54fa0da1693a6cdebc6ac83a9d Mon Sep 17 00:00:00 2001
From: Tom Robiquet <tom-robiquet@hotmail.co.uk>
Date: Thu, 9 Nov 2023 11:57:43 +0100
Subject: [PATCH 09/17] mobile view and clear button

---
 components/markets/MarketSearch.tsx | 20 +++++++--
 pages/search.tsx                    | 68 +++++++++++++++++++++++++++++
 2 files changed, 84 insertions(+), 4 deletions(-)
 create mode 100644 pages/search.tsx

diff --git a/components/markets/MarketSearch.tsx b/components/markets/MarketSearch.tsx
index 6c84aeb08..4f0c30567 100644
--- a/components/markets/MarketSearch.tsx
+++ b/components/markets/MarketSearch.tsx
@@ -4,7 +4,7 @@ import Link from "next/link";
 import MarketId from "pages/api/og/[marketId]";
 import { useState } from "react";
 import { MarketStatus, FullMarketFragment } from "@zeitgeistpm/indexer";
-import { Loader, Search } from "react-feather";
+import { Loader, Search, X } from "react-feather";
 
 const MarketSearch = () => {
   const [searchTerm, setSearchTerm] = useState("");
@@ -14,16 +14,28 @@ const MarketSearch = () => {
 
   return (
     <div className="w-full mx-3 md:mx-7">
-      <div className="flex items-center">
+      <Link href={"/search"} className="w-2 lg:hidden">
+        <Search className="text-ztg-blue mr-4" />
+      </Link>
+      <div className="hidden lg:flex items-center">
         <Search className="text-ztg-blue mr-4" />
         <input
-          className="rounded-sm bg-sky-900 text-white h-8 px-2 w-full focus:outline-none max-w-[500px]"
+          className="rounded-sm bg-sky-900 text-white h-8 px-2 w-full focus:outline-none max-w-[500px] "
           value={searchTerm}
+          placeholder="Search markets"
           onChange={(event) => {
             setShowResults(true);
             setSearchTerm(event.target.value);
           }}
         />
+        <button
+          className="relative right-6 text-sky-600"
+          onClick={() => {
+            setSearchTerm("");
+          }}
+        >
+          <X size={16} />
+        </button>
       </div>
       {showResults && markets && (
         <div
@@ -32,7 +44,7 @@ const MarketSearch = () => {
             console.log("blur");
             setShowResults(false);
           }}
-          className="flex flex-col absolute bg-white px-4 py-2 rounded-md top-[45px] translate-x-[40px] max-h-[300px] overflow-scroll max-w-[500px] shadow-2xl"
+          className="hidden lg:flex flex-col absolute bg-white px-4 py-2 rounded-md top-[45px] translate-x-[40px] max-h-[300px] overflow-scroll max-w-[500px] shadow-2xl"
         >
           <div className="text-sky-600">Results</div>
 
diff --git a/pages/search.tsx b/pages/search.tsx
new file mode 100644
index 000000000..98effc74c
--- /dev/null
+++ b/pages/search.tsx
@@ -0,0 +1,68 @@
+import { MarketStatus } from "@zeitgeistpm/indexer";
+import { useMarketSearch } from "lib/hooks/queries/useMarketSearch";
+import { NextPage } from "next";
+import Link from "next/link";
+import { useState } from "react";
+import { X } from "react-feather";
+
+const SearchPage: NextPage = () => {
+  const [searchTerm, setSearchTerm] = useState("");
+
+  const { data: markets } = useMarketSearch(searchTerm);
+  return (
+    <div className="mt-4">
+      <div className="flex items-center">
+        <input
+          className="rounded-sm  h-8 px-2 w-full focus:outline-none max-w-[500px] border border-sky-200 "
+          value={searchTerm}
+          placeholder="Search markets"
+          onChange={(event) => {
+            setSearchTerm(event.target.value);
+          }}
+        />
+        <button
+          className="relative right-6 text-sky-600"
+          onClick={() => {
+            setSearchTerm("");
+          }}
+        >
+          <X size={16} />
+        </button>
+      </div>
+      {markets && (
+        <div className="flex flex-col py-4">
+          <div className="text-sky-600">Results</div>
+
+          {markets.length > 0 ? (
+            markets?.map((market) => (
+              <Link
+                href={`/markets/${market.marketId}`}
+                className="py-2 flex overflow-ellipsis"
+              >
+                <div className="overflow-ellipsis line-clamp-1 mr-4">
+                  {market.question}
+                </div>
+                <div
+                  className={`ml-auto text-xs rounded-md px-2 py-1 w-16 text-center text-white ${
+                    market.status === MarketStatus.Active
+                      ? "bg-sheen-green"
+                      : "bg-vermilion"
+                  }`}
+                >
+                  {market.status === MarketStatus.Active
+                    ? "Active"
+                    : "Inactive"}
+                </div>
+              </Link>
+            ))
+          ) : (
+            <div className="w-full pt-6 pb-4">No results</div>
+          )}
+          {}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default SearchPage;

From 1f817b13e138e0207352e97ab173dee200e3f109 Mon Sep 17 00:00:00 2001
From: Tom Robiquet <tom-robiquet@hotmail.co.uk>
Date: Thu, 9 Nov 2023 12:27:16 +0100
Subject: [PATCH 10/17] css

---
 components/account/AccountButton.tsx |  2 +-
 components/markets/MarketSearch.tsx  |  6 ++--
 components/top-bar/index.tsx         | 12 ++++----
 lib/hooks/queries/useMarketSearch.ts | 45 ++--------------------------
 4 files changed, 12 insertions(+), 53 deletions(-)

diff --git a/components/account/AccountButton.tsx b/components/account/AccountButton.tsx
index 2395a3a2c..86015a130 100644
--- a/components/account/AccountButton.tsx
+++ b/components/account/AccountButton.tsx
@@ -67,7 +67,7 @@ const HeaderActionButton: FC<
 > = ({ onClick, disabled, children }) => {
   return (
     <button
-      className={`flex border-2 rounded-full px-6 leading-[40px] text-white font-medium items-center border-white justify-center cursor-pointer disabled:cursor-default disabled:opacity-30`}
+      className={`w-[185px] flex border-2 rounded-full px-6 leading-[40px] text-white font-medium items-center border-white justify-center cursor-pointer disabled:cursor-default disabled:opacity-30`}
       onClick={onClick}
       disabled={disabled}
     >
diff --git a/components/markets/MarketSearch.tsx b/components/markets/MarketSearch.tsx
index 4f0c30567..21a95a5dd 100644
--- a/components/markets/MarketSearch.tsx
+++ b/components/markets/MarketSearch.tsx
@@ -1,10 +1,8 @@
-import { Combobox } from "@headlessui/react";
+import { MarketStatus } from "@zeitgeistpm/indexer";
 import { useMarketSearch } from "lib/hooks/queries/useMarketSearch";
 import Link from "next/link";
-import MarketId from "pages/api/og/[marketId]";
 import { useState } from "react";
-import { MarketStatus, FullMarketFragment } from "@zeitgeistpm/indexer";
-import { Loader, Search, X } from "react-feather";
+import { Search, X } from "react-feather";
 
 const MarketSearch = () => {
   const [searchTerm, setSearchTerm] = useState("");
diff --git a/components/top-bar/index.tsx b/components/top-bar/index.tsx
index e36c7fa42..312f1ee0d 100644
--- a/components/top-bar/index.tsx
+++ b/components/top-bar/index.tsx
@@ -50,13 +50,13 @@ const TopBar = () => {
     <div
       className={`w-full py-3.5 fixed top-0 z-40 transition-all duration-300 bg-black h-topbar-height`}
     >
-      <div className="h-full relative flex items-center container-fluid">
+      <div className="h-full relative flex items-center px-4">
         <div className="h-full hidden md:flex items-center justify-center pr-3 md:pr-7">
           <Link href="/">
             <MenuLogo />
           </Link>
         </div>
-        <div className="md:px-7 flex flex-1 gap-7 items-center border-x-0 md:border-x-1 border-ztg-blue py-2">
+        <div className="md:px-7 flex gap-7 items-center border-x-0 md:border-x-1 border-ztg-blue py-2">
           <Menu as="div" className="relative inline-block text-left">
             {({ open, close }) => {
               return (
@@ -199,7 +199,7 @@ const TopBar = () => {
           </Link>
         </div>
         <MarketSearch />
-        <div className="relative center gap-3">
+        <div className="ml-auto relative center gap-3">
           <GetTokensButton />
           <AccountButton />
           <Alerts />
@@ -225,7 +225,7 @@ const GetTokensButton = () => {
         leaveTo="opacity-0 scale-90"
       >
         <Link
-          className="relative h-11 rounded-md p-0.5 overflow-hidden group"
+          className="relative h-11 rounded-md p-0.5 overflow-hidden group hidden sm:block"
           href="/deposit"
         >
           <div
@@ -235,8 +235,8 @@ const GetTokensButton = () => {
                 "linear-gradient(180deg, #FF00E6 0%, #F36464 50%, #04C3FF 100%)",
             }}
           />
-          <div className="relative h-full block z-20">
-            <button className="h-full w-full rounded-md px-3 md:px-5 bg-black text-white center">
+          <div className="relative h-full block z-20  sm:w-[125px] ">
+            <button className="h-full w-full rounded-md bg-black text-white center">
               Get Tokens
             </button>
           </div>
diff --git a/lib/hooks/queries/useMarketSearch.ts b/lib/hooks/queries/useMarketSearch.ts
index 8ea858580..852da4f1d 100644
--- a/lib/hooks/queries/useMarketSearch.ts
+++ b/lib/hooks/queries/useMarketSearch.ts
@@ -1,17 +1,9 @@
 import { useQuery } from "@tanstack/react-query";
 import { isIndexedSdk } from "@zeitgeistpm/sdk";
-import { useSdkv2 } from "../useSdkv2";
-import { useDebounce } from "use-debounce";
 import Fuse from "fuse.js";
-
-import {
-  FullMarketFragment,
-  InputMaybe,
-  MarketWhereInput,
-  Exact,
-  MarketOrderByInput,
-} from "@zeitgeistpm/indexer";
-import { RequestDocument } from "graphql-request";
+import { useDebounce } from "use-debounce";
+import { useSdkv2 } from "../useSdkv2";
+import { MarketOrderByInput } from "@zeitgeistpm/indexer";
 
 export const marketSearchKey = "market-search";
 
@@ -27,21 +19,7 @@ export const useMarketSearch = (searchTerm: string) => {
     [id, marketSearchKey, debouncedSearchTerm],
     async () => {
       if (enabled) {
-        // const searchWords = debouncedSearchTerm.split(" ");
-        console.time("a");
         const search = buildSearch(debouncedSearchTerm);
-
-        // const response = await sdk.indexer.client.request(`
-        //   query MyQuery {
-        //     markets(where: { OR: {${search}}}) {
-        //       id
-        //       tags
-        //     }
-        //   }
-        // `);
-
-        // console.log("res", response);
-
         const { markets } = await sdk.indexer.markets({
           where: {
             OR: search,
@@ -49,9 +27,7 @@ export const useMarketSearch = (searchTerm: string) => {
           order: MarketOrderByInput.IdDesc,
           limit: 100,
         });
-        console.timeEnd("a");
 
-        console.time("b");
         const fuse = new Fuse(markets, {
           includeScore: true,
           threshold: 0.9,
@@ -76,7 +52,6 @@ export const useMarketSearch = (searchTerm: string) => {
             { status: "Active" },
           ],
         });
-        console.timeEnd("b");
 
         return result.map((r) => r.item);
       }
@@ -90,18 +65,6 @@ export const useMarketSearch = (searchTerm: string) => {
   return query;
 };
 
-// const buildSearch = (searchTerm: string) => {
-//   const search = searchTerm
-//     .split(" ")
-//     .map(
-//       (word) =>
-//         `description_containsInsensitive: "${word}", question_containsInsensitive: "${word}"`,
-//     )
-//     .join(",");
-//   console.log(search);
-
-//   return search;
-// };
 const buildSearch = (searchTerm: string) => {
   const search = searchTerm
     .split(" ")
@@ -113,5 +76,3 @@ const buildSearch = (searchTerm: string) => {
 
   return search;
 };
-
-// const;

From bc3a6c592ec8ad0dc79bdc6c0120d023b2885848 Mon Sep 17 00:00:00 2001
From: Tom Robiquet <tom-robiquet@hotmail.co.uk>
Date: Thu, 9 Nov 2023 13:31:14 +0100
Subject: [PATCH 11/17] close results when clicking outside

---
 components/markets/MarketSearch.tsx | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

diff --git a/components/markets/MarketSearch.tsx b/components/markets/MarketSearch.tsx
index 21a95a5dd..16984d4fe 100644
--- a/components/markets/MarketSearch.tsx
+++ b/components/markets/MarketSearch.tsx
@@ -1,17 +1,29 @@
 import { MarketStatus } from "@zeitgeistpm/indexer";
 import { useMarketSearch } from "lib/hooks/queries/useMarketSearch";
 import Link from "next/link";
-import { useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { Search, X } from "react-feather";
 
 const MarketSearch = () => {
   const [searchTerm, setSearchTerm] = useState("");
   const [showResults, setShowResults] = useState(false);
+  const wrapperRef = useRef<HTMLDivElement>(null);
 
   const { data: markets } = useMarketSearch(searchTerm);
+  useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (wrapperRef.current && !wrapperRef.current.contains(event.target)) {
+        console.log("You clicked outside of me!");
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [wrapperRef]);
 
   return (
-    <div className="w-full mx-3 md:mx-7">
+    <div className="w-full mx-3 md:mx-7" ref={wrapperRef}>
       <Link href={"/search"} className="w-2 lg:hidden">
         <Search className="text-ztg-blue mr-4" />
       </Link>

From 41fda6fedd52d9c2e1b2dabfbaeaaa4e373e4f09 Mon Sep 17 00:00:00 2001
From: Tom Robiquet <tom-robiquet@hotmail.co.uk>
Date: Thu, 9 Nov 2023 13:37:02 +0100
Subject: [PATCH 12/17] ux tweeks

---
 components/markets/MarketSearch.tsx | 15 +++++----------
 components/top-bar/index.tsx        |  2 +-
 components/ui/QuillViewer.tsx       |  1 -
 pages/search.tsx                    |  2 +-
 4 files changed, 7 insertions(+), 13 deletions(-)

diff --git a/components/markets/MarketSearch.tsx b/components/markets/MarketSearch.tsx
index 16984d4fe..8fb9822d3 100644
--- a/components/markets/MarketSearch.tsx
+++ b/components/markets/MarketSearch.tsx
@@ -8,12 +8,13 @@ const MarketSearch = () => {
   const [searchTerm, setSearchTerm] = useState("");
   const [showResults, setShowResults] = useState(false);
   const wrapperRef = useRef<HTMLDivElement>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
 
   const { data: markets } = useMarketSearch(searchTerm);
   useEffect(() => {
     const handleClickOutside = (event) => {
       if (wrapperRef.current && !wrapperRef.current.contains(event.target)) {
-        console.log("You clicked outside of me!");
+        setShowResults(false);
       }
     };
     document.addEventListener("mousedown", handleClickOutside);
@@ -30,6 +31,7 @@ const MarketSearch = () => {
       <div className="hidden lg:flex items-center">
         <Search className="text-ztg-blue mr-4" />
         <input
+          ref={inputRef}
           className="rounded-sm bg-sky-900 text-white h-8 px-2 w-full focus:outline-none max-w-[500px] "
           value={searchTerm}
           placeholder="Search markets"
@@ -42,20 +44,14 @@ const MarketSearch = () => {
           className="relative right-6 text-sky-600"
           onClick={() => {
             setSearchTerm("");
+            inputRef.current?.focus();
           }}
         >
           <X size={16} />
         </button>
       </div>
       {showResults && markets && (
-        <div
-          onBlur={() => {
-            //todo
-            console.log("blur");
-            setShowResults(false);
-          }}
-          className="hidden lg:flex flex-col absolute bg-white px-4 py-2 rounded-md top-[45px] translate-x-[40px] max-h-[300px] overflow-scroll max-w-[500px] shadow-2xl"
-        >
+        <div className="hidden lg:flex flex-col absolute bg-white px-4 py-2 rounded-md top-[45px] translate-x-[40px] max-h-[300px] overflow-scroll w-[500px] shadow-2xl">
           <div className="text-sky-600">Results</div>
 
           {markets.length > 0 ? (
@@ -83,7 +79,6 @@ const MarketSearch = () => {
           ) : (
             <div className="text-center w-full pt-6 pb-4">No results</div>
           )}
-          {}
         </div>
       )}
     </div>
diff --git a/components/top-bar/index.tsx b/components/top-bar/index.tsx
index 312f1ee0d..38933efc2 100644
--- a/components/top-bar/index.tsx
+++ b/components/top-bar/index.tsx
@@ -235,7 +235,7 @@ const GetTokensButton = () => {
                 "linear-gradient(180deg, #FF00E6 0%, #F36464 50%, #04C3FF 100%)",
             }}
           />
-          <div className="relative h-full block z-20  sm:w-[125px] ">
+          <div className="relative h-full block z-20 sm:w-[125px] ">
             <button className="h-full w-full rounded-md bg-black text-white center">
               Get Tokens
             </button>
diff --git a/components/ui/QuillViewer.tsx b/components/ui/QuillViewer.tsx
index 38ee2446a..d1b3419a4 100644
--- a/components/ui/QuillViewer.tsx
+++ b/components/ui/QuillViewer.tsx
@@ -1,5 +1,4 @@
 import { useMemo } from "react";
-import { Linkedin } from "react-feather";
 import ReactQuill from "react-quill";
 import "react-quill/dist/quill.bubble.css";
 
diff --git a/pages/search.tsx b/pages/search.tsx
index 98effc74c..cbabf1a44 100644
--- a/pages/search.tsx
+++ b/pages/search.tsx
@@ -13,7 +13,7 @@ const SearchPage: NextPage = () => {
     <div className="mt-4">
       <div className="flex items-center">
         <input
-          className="rounded-sm  h-8 px-2 w-full focus:outline-none max-w-[500px] border border-sky-200 "
+          className="rounded-sm h-8 px-2 w-full focus:outline-none max-w-[500px] border border-sky-200"
           value={searchTerm}
           placeholder="Search markets"
           onChange={(event) => {

From cd572ca9298e6076d0aff59d6c3ba92ebbe31533 Mon Sep 17 00:00:00 2001
From: Tom Robiquet <tom-robiquet@hotmail.co.uk>
Date: Thu, 9 Nov 2023 13:45:42 +0100
Subject: [PATCH 13/17] show results when refocusing

---
 components/markets/MarketSearch.tsx | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/components/markets/MarketSearch.tsx b/components/markets/MarketSearch.tsx
index 8fb9822d3..126a85d6a 100644
--- a/components/markets/MarketSearch.tsx
+++ b/components/markets/MarketSearch.tsx
@@ -39,6 +39,9 @@ const MarketSearch = () => {
             setShowResults(true);
             setSearchTerm(event.target.value);
           }}
+          onFocus={() => {
+            setShowResults(true);
+          }}
         />
         <button
           className="relative right-6 text-sky-600"

From 98ff952411ab997d3702f62c903bcf4cb8ab1746 Mon Sep 17 00:00:00 2001
From: Tom Robiquet <tom-robiquet@hotmail.co.uk>
Date: Thu, 9 Nov 2023 15:03:45 +0100
Subject: [PATCH 14/17] ux improvements

---
 components/markets/MarketSearch.tsx | 59 +++++++++++++++++++----------
 1 file changed, 38 insertions(+), 21 deletions(-)

diff --git a/components/markets/MarketSearch.tsx b/components/markets/MarketSearch.tsx
index 126a85d6a..4203f99c5 100644
--- a/components/markets/MarketSearch.tsx
+++ b/components/markets/MarketSearch.tsx
@@ -7,6 +7,7 @@ import { Search, X } from "react-feather";
 const MarketSearch = () => {
   const [searchTerm, setSearchTerm] = useState("");
   const [showResults, setShowResults] = useState(false);
+  const [showSearch, setShowSearch] = useState(false);
   const wrapperRef = useRef<HTMLDivElement>(null);
   const inputRef = useRef<HTMLInputElement>(null);
 
@@ -29,39 +30,55 @@ const MarketSearch = () => {
         <Search className="text-ztg-blue mr-4" />
       </Link>
       <div className="hidden lg:flex items-center">
-        <Search className="text-ztg-blue mr-4" />
-        <input
-          ref={inputRef}
-          className="rounded-sm bg-sky-900 text-white h-8 px-2 w-full focus:outline-none max-w-[500px] "
-          value={searchTerm}
-          placeholder="Search markets"
-          onChange={(event) => {
-            setShowResults(true);
-            setSearchTerm(event.target.value);
-          }}
-          onFocus={() => {
-            setShowResults(true);
-          }}
-        />
         <button
-          className="relative right-6 text-sky-600"
           onClick={() => {
-            setSearchTerm("");
-            inputRef.current?.focus();
+            setShowSearch(true);
+            setTimeout(() => {
+              inputRef.current?.focus();
+            });
           }}
         >
-          <X size={16} />
+          <Search className="text-ztg-blue mr-4" />
         </button>
+        {showSearch && (
+          <>
+            <input
+              ref={inputRef}
+              className="rounded-sm bg-sky-900 text-white h-8 px-2 w-full focus:outline-none max-w-[500px] "
+              value={searchTerm}
+              placeholder="Search markets"
+              onChange={(event) => {
+                setShowResults(true);
+                setSearchTerm(event.target.value);
+              }}
+              onFocus={() => {
+                setShowResults(true);
+              }}
+            />
+            <button
+              className="relative right-6 text-sky-600"
+              onClick={() => {
+                setSearchTerm("");
+                inputRef.current?.focus();
+              }}
+            >
+              <X size={16} />
+            </button>
+          </>
+        )}
       </div>
       {showResults && markets && (
-        <div className="hidden lg:flex flex-col absolute bg-white px-4 py-2 rounded-md top-[45px] translate-x-[40px] max-h-[300px] overflow-scroll w-[500px] shadow-2xl">
-          <div className="text-sky-600">Results</div>
+        <div className="hidden lg:flex flex-col absolute bg-white py-2  rounded-md top-[45px] translate-x-[40px] max-h-[300px] overflow-scroll w-[500px] shadow-2xl">
+          <div className="text-sky-600 mx-4">Results</div>
 
           {markets.length > 0 ? (
             markets?.map((market) => (
               <Link
                 href={`/markets/${market.marketId}`}
-                className="py-2 flex overflow-ellipsis"
+                className="px-4 py-2 flex overflow-ellipsis hover:bg-sky-100"
+                onClick={() => {
+                  setShowResults(false);
+                }}
               >
                 <div className="overflow-ellipsis line-clamp-1 mr-4">
                   {market.question}

From 3044ed4dc55ac6074d2f32f2fb6ac38ee89da8ea Mon Sep 17 00:00:00 2001
From: Tom Robiquet <tom-robiquet@hotmail.co.uk>
Date: Thu, 9 Nov 2023 15:13:15 +0100
Subject: [PATCH 15/17] make all tag sizes the same

---
 components/markets/MarketSearch.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/components/markets/MarketSearch.tsx b/components/markets/MarketSearch.tsx
index 4203f99c5..2de106a20 100644
--- a/components/markets/MarketSearch.tsx
+++ b/components/markets/MarketSearch.tsx
@@ -75,16 +75,16 @@ const MarketSearch = () => {
             markets?.map((market) => (
               <Link
                 href={`/markets/${market.marketId}`}
-                className="px-4 py-2 flex overflow-ellipsis hover:bg-sky-100"
+                className="px-4 py-2 flex justify-between overflow-ellipsis hover:bg-sky-100"
                 onClick={() => {
                   setShowResults(false);
                 }}
               >
-                <div className="overflow-ellipsis line-clamp-1 mr-4">
+                <div className="overflow-ellipsis line-clamp-1 w-85%">
                   {market.question}
                 </div>
                 <div
-                  className={`ml-auto text-xs rounded-md px-2 py-1 w-16 text-center text-white ${
+                  className={`text-xs rounded-md px-2 py-1 w-16 text-center text-white ${
                     market.status === MarketStatus.Active
                       ? "bg-sheen-green"
                       : "bg-vermilion"

From 7464b73683faa320dae888b0526f34dd82f762d5 Mon Sep 17 00:00:00 2001
From: Tom Robiquet <tom-robiquet@hotmail.co.uk>
Date: Fri, 10 Nov 2023 15:42:38 +0100
Subject: [PATCH 16/17] trim whitespace

---
 lib/hooks/queries/useMarketSearch.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/lib/hooks/queries/useMarketSearch.ts b/lib/hooks/queries/useMarketSearch.ts
index 852da4f1d..4b543ef5a 100644
--- a/lib/hooks/queries/useMarketSearch.ts
+++ b/lib/hooks/queries/useMarketSearch.ts
@@ -67,6 +67,7 @@ export const useMarketSearch = (searchTerm: string) => {
 
 const buildSearch = (searchTerm: string) => {
   const search = searchTerm
+    .trim()
     .split(" ")
     .map((word) => [
       { question_containsInsensitive: word },

From 2a7e08179ed6c318d0f93d96659965e538c26abb Mon Sep 17 00:00:00 2001
From: Tom Robiquet <tom-robiquet@hotmail.co.uk>
Date: Fri, 10 Nov 2023 15:45:32 +0100
Subject: [PATCH 17/17] add hover

---
 pages/search.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/pages/search.tsx b/pages/search.tsx
index cbabf1a44..ff376b747 100644
--- a/pages/search.tsx
+++ b/pages/search.tsx
@@ -11,9 +11,9 @@ const SearchPage: NextPage = () => {
   const { data: markets } = useMarketSearch(searchTerm);
   return (
     <div className="mt-4">
-      <div className="flex items-center">
+      <div className="flex items-center px-2">
         <input
-          className="rounded-sm h-8 px-2 w-full focus:outline-none max-w-[500px] border border-sky-200"
+          className="rounded-md h-8 px-2 w-full focus:outline-none max-w-[500px] border border-sky-200"
           value={searchTerm}
           placeholder="Search markets"
           onChange={(event) => {
@@ -31,13 +31,13 @@ const SearchPage: NextPage = () => {
       </div>
       {markets && (
         <div className="flex flex-col py-4">
-          <div className="text-sky-600">Results</div>
+          <div className="text-sky-600 px-2">Results</div>
 
           {markets.length > 0 ? (
             markets?.map((market) => (
               <Link
                 href={`/markets/${market.marketId}`}
-                className="py-2 flex overflow-ellipsis"
+                className="py-2 flex overflow-ellipsis hover:bg-sky-100 px-2 rounded-md"
               >
                 <div className="overflow-ellipsis line-clamp-1 mr-4">
                   {market.question}