From 36845fd5bf69521c2f911ade9df65252093bfb75 Mon Sep 17 00:00:00 2001
From: Nick Taylor <nick@nickyt.co>
Date: Tue, 27 Aug 2024 15:16:00 -0400
Subject: [PATCH 1/4] fix: now search dialog is always on top of other elements

---
 .../organisms/SearchDialog/search-dialog.tsx  | 102 +++++++++++-------
 1 file changed, 61 insertions(+), 41 deletions(-)

diff --git a/components/organisms/SearchDialog/search-dialog.tsx b/components/organisms/SearchDialog/search-dialog.tsx
index b40e3603c..d52a9a167 100644
--- a/components/organisms/SearchDialog/search-dialog.tsx
+++ b/components/organisms/SearchDialog/search-dialog.tsx
@@ -15,6 +15,7 @@ import useDebounceTerm from "lib/hooks/useDebounceTerm";
 import useIsMacOS from "lib/hooks/useIsMacOS";
 import useSupabaseAuth from "lib/hooks/useSupabaseAuth";
 import { useSearchRepos } from "lib/hooks/useSearchRepos";
+import { Dialog, DialogContent, DialogTrigger } from "components/molecules/Dialog/dialog";
 
 const SearchDialog = () => {
   useLockBody();
@@ -26,6 +27,7 @@ const SearchDialog = () => {
   const [isSearching, setIsSearching] = useState(false);
   const [isSearchError, setIsSearchError] = useState(false);
   const setOpenSearch = store((state) => state.setOpenSearch);
+  const openSearch = store((state) => state.openSearch);
   const debouncedSearchTerm = useDebounceTerm(searchTerm, 300);
   const {
     data: repoData,
@@ -136,50 +138,68 @@ const SearchDialog = () => {
   };
 
   return (
-    <div className="fixed left-0 top-0 z-auto p-5 w-full h-full flex justify-center bg-white/30">
-      <div className="absolute w-full h-full left-0 top-0 z-50 backdrop-blur-sm" onClick={() => setOpenSearch(false)} />
-      <div
-        className="flex flex-col w-full max-w-2xl h-fit max-h-full bg-white shadow-xl border transition rounded-lg ring-light-slate-6 relative z-50 overflow-hidden"
-        onMouseMove={() => cursor !== -1 && setCursor(-1)}
-      >
-        <div className="flex w-full h-full items-center border-b p-2 pl-3">
-          {isSearching ? (
-            <div className="flex-none w-4 h-4 rounded-full border-2 border-light-slate-9 border-b-light-slate-5 border-r-light-slate-5 animate-spin" />
-          ) : (
+    <Dialog open={openSearch} onOpenChange={setOpenSearch}>
+      <DialogTrigger asChild>
+        <button className="hidden sm:flex justify-between p-1 pl-3 h-fit w-56 sm:w-64 ml-auto bg-white border rounded-lg ring-light-slate-6 relative overflow-hidden">
+          <div className="flex items-center">
             <FaSearch className="text-light-slate-9" fontSize={16} />
-          )}
-          <input
-            autoFocus
-            className="w-full pl-2 text-sm font-semibold text-slate-700 focus:outline-none"
-            value={searchTerm}
-            onChange={(e) => {
-              setSearchTerm(e.target.value);
-              isSearchError && setIsSearchError(false);
-            }}
-            onKeyDown={handleKeyboardCtrl}
-          />
-          <Text keyboard className="text-gray-600 !border-b !px-1">
-            {isMac ? "⌘K" : <span className="text-xs py-2 px-1">CTRL+K</span>}
+            <Text className="pl-2 text-sm text-light-slate-9">Users, Repositories...</Text>
+          </div>
+          <Text className="text-gray-600 !border-b !px-1">
+            {isMac ? "⌘K" : <span className="text-xs px-1 py-2">CTRL+K</span>}
           </Text>
+        </button>
+      </DialogTrigger>
+      <DialogContent>
+        <div className="fixed left-0 top-0 z-auto p-5 w-full h-full flex justify-center bg-white/30">
+          <div
+            className="absolute w-full h-full left-0 top-0 z-50 backdrop-blur-sm"
+            onClick={() => setOpenSearch(false)}
+          />
+          <div
+            className="flex flex-col w-full max-w-2xl h-fit max-h-full bg-white shadow-xl border transition rounded-lg ring-light-slate-6 relative z-50 overflow-hidden"
+            onMouseMove={() => cursor !== -1 && setCursor(-1)}
+          >
+            <div className="flex w-full h-full items-center border-b p-2 pl-3">
+              {isSearching ? (
+                <div className="flex-none w-4 h-4 rounded-full border-2 border-light-slate-9 border-b-light-slate-5 border-r-light-slate-5 animate-spin" />
+              ) : (
+                <FaSearch className="text-light-slate-9" fontSize={16} />
+              )}
+              <input
+                autoFocus
+                className="w-full pl-2 text-sm font-semibold text-slate-700 focus:outline-none"
+                value={searchTerm}
+                onChange={(e) => {
+                  setSearchTerm(e.target.value);
+                  isSearchError && setIsSearchError(false);
+                }}
+                onKeyDown={handleKeyboardCtrl}
+              />
+              <Text keyboard className="text-gray-600 !border-b !px-1">
+                {isMac ? "⌘K" : <span className="text-xs py-2 px-1">CTRL+K</span>}
+              </Text>
+            </div>
+            <div className="w-full h-full flex flex-col items-center">
+              {searchTerm.length < 3 ? (
+                <SearchInfo />
+              ) : isSearchError && !isSearching && (repoDataError || repoData.length === 0) ? (
+                <Text className="block w-full py-1 px-4 text-sauced-orange !font-normal leading-6">
+                  <HiOutlineExclamation className="text-sauced-orange inline-flex mr-2.5" fontSize={20} />
+                  We couldn&apos;t find any users or repositories with that name
+                </Text>
+              ) : (
+                <>
+                  <section className="flex flex-col w-full">{renderUserSearchState()}</section>
+                  <hr />
+                  <section className="flex flex-col w-full">{renderRepoSearchState()}</section>
+                </>
+              )}
+            </div>
+          </div>
         </div>
-        <div className="w-full h-full flex flex-col items-center">
-          {searchTerm.length < 3 ? (
-            <SearchInfo />
-          ) : isSearchError && !isSearching && (repoDataError || repoData.length === 0) ? (
-            <Text className="block w-full py-1 px-4 text-sauced-orange !font-normal leading-6">
-              <HiOutlineExclamation className="text-sauced-orange inline-flex mr-2.5" fontSize={20} />
-              We couldn&apos;t find any users or repositories with that name
-            </Text>
-          ) : (
-            <>
-              <section className="flex flex-col w-full">{renderUserSearchState()}</section>
-              <hr />
-              <section className="flex flex-col w-full">{renderRepoSearchState()}</section>
-            </>
-          )}
-        </div>
-      </div>
-    </div>
+      </DialogContent>
+    </Dialog>
   );
 };
 

From e4a2ea84961323da46d4f6e6b52b1728211b824b Mon Sep 17 00:00:00 2001
From: Nick Taylor <nick@nickyt.co>
Date: Tue, 27 Aug 2024 15:28:52 -0400
Subject: [PATCH 2/4] removed unused JSX snippet

---
 components/organisms/SearchDialog/search-dialog.tsx | 7 -------
 1 file changed, 7 deletions(-)

diff --git a/components/organisms/SearchDialog/search-dialog.tsx b/components/organisms/SearchDialog/search-dialog.tsx
index d52a9a167..20313cefd 100644
--- a/components/organisms/SearchDialog/search-dialog.tsx
+++ b/components/organisms/SearchDialog/search-dialog.tsx
@@ -257,13 +257,6 @@ const SearchLoading = () => (
   </div>
 );
 
-const SearchError = () => (
-  <Text className="block w-full py-1 px-4 text-sauced-orange !font-normal leading-6">
-    <HiOutlineExclamation className="text-sauced-orange inline-flex mr-2.5" fontSize={20} />
-    We couldn&apos;t find any users or repositories with that name
-  </Text>
-);
-
 const SearchResult = ({ result, cursor }: { result: GhUser[]; cursor: number }) => (
   <div className="w-full py-1 overflow-hidden text-gray-600">
     <Text className="block w-full py-1 px-4">Users</Text>

From a482d9a87309437d449a6cac6b32c64c95655005 Mon Sep 17 00:00:00 2001
From: Nick Taylor <nick@nickyt.co>
Date: Tue, 27 Aug 2024 15:45:28 -0400
Subject: [PATCH 3/4] wip

---
 .../organisms/SearchDialog/search-dialog.tsx  | 101 ++++++++----------
 1 file changed, 45 insertions(+), 56 deletions(-)

diff --git a/components/organisms/SearchDialog/search-dialog.tsx b/components/organisms/SearchDialog/search-dialog.tsx
index 20313cefd..6d2ecad92 100644
--- a/components/organisms/SearchDialog/search-dialog.tsx
+++ b/components/organisms/SearchDialog/search-dialog.tsx
@@ -15,7 +15,7 @@ import useDebounceTerm from "lib/hooks/useDebounceTerm";
 import useIsMacOS from "lib/hooks/useIsMacOS";
 import useSupabaseAuth from "lib/hooks/useSupabaseAuth";
 import { useSearchRepos } from "lib/hooks/useSearchRepos";
-import { Dialog, DialogContent, DialogTrigger } from "components/molecules/Dialog/dialog";
+import { Dialog, DialogContent } from "components/molecules/Dialog/dialog";
 
 const SearchDialog = () => {
   useLockBody();
@@ -139,63 +139,52 @@ const SearchDialog = () => {
 
   return (
     <Dialog open={openSearch} onOpenChange={setOpenSearch}>
-      <DialogTrigger asChild>
-        <button className="hidden sm:flex justify-between p-1 pl-3 h-fit w-56 sm:w-64 ml-auto bg-white border rounded-lg ring-light-slate-6 relative overflow-hidden">
-          <div className="flex items-center">
-            <FaSearch className="text-light-slate-9" fontSize={16} />
-            <Text className="pl-2 text-sm text-light-slate-9">Users, Repositories...</Text>
+      <DialogContent
+        className="fixed top-0 p-5 flex justify-center"
+        onPointerDownOutside={() => {
+          alert("clicked outside");
+          setOpenSearch(false);
+        }}
+      >
+        <div
+          className="flex flex-col w-full max-w-2xl h-fit max-h-full bg-white shadow-xl border transition rounded-lg ring-light-slate-6 relative z-50 overflow-hidden"
+          onMouseMove={() => cursor !== -1 && setCursor(-1)}
+        >
+          <div className="flex w-full h-full items-center border-b p-2 pl-3">
+            {isSearching ? (
+              <div className="flex-none w-4 h-4 rounded-full border-2 border-light-slate-9 border-b-light-slate-5 border-r-light-slate-5 animate-spin" />
+            ) : (
+              <FaSearch className="text-light-slate-9" fontSize={16} />
+            )}
+            <input
+              autoFocus
+              className="w-full pl-2 text-sm font-semibold text-slate-700 focus:outline-none"
+              value={searchTerm}
+              onChange={(e) => {
+                setSearchTerm(e.target.value);
+                isSearchError && setIsSearchError(false);
+              }}
+              onKeyDown={handleKeyboardCtrl}
+            />
+            <Text keyboard className="text-gray-600 !border-b !px-1">
+              {isMac ? "⌘K" : <span className="text-xs py-2 px-1">CTRL+K</span>}
+            </Text>
           </div>
-          <Text className="text-gray-600 !border-b !px-1">
-            {isMac ? "⌘K" : <span className="text-xs px-1 py-2">CTRL+K</span>}
-          </Text>
-        </button>
-      </DialogTrigger>
-      <DialogContent>
-        <div className="fixed left-0 top-0 z-auto p-5 w-full h-full flex justify-center bg-white/30">
-          <div
-            className="absolute w-full h-full left-0 top-0 z-50 backdrop-blur-sm"
-            onClick={() => setOpenSearch(false)}
-          />
-          <div
-            className="flex flex-col w-full max-w-2xl h-fit max-h-full bg-white shadow-xl border transition rounded-lg ring-light-slate-6 relative z-50 overflow-hidden"
-            onMouseMove={() => cursor !== -1 && setCursor(-1)}
-          >
-            <div className="flex w-full h-full items-center border-b p-2 pl-3">
-              {isSearching ? (
-                <div className="flex-none w-4 h-4 rounded-full border-2 border-light-slate-9 border-b-light-slate-5 border-r-light-slate-5 animate-spin" />
-              ) : (
-                <FaSearch className="text-light-slate-9" fontSize={16} />
-              )}
-              <input
-                autoFocus
-                className="w-full pl-2 text-sm font-semibold text-slate-700 focus:outline-none"
-                value={searchTerm}
-                onChange={(e) => {
-                  setSearchTerm(e.target.value);
-                  isSearchError && setIsSearchError(false);
-                }}
-                onKeyDown={handleKeyboardCtrl}
-              />
-              <Text keyboard className="text-gray-600 !border-b !px-1">
-                {isMac ? "⌘K" : <span className="text-xs py-2 px-1">CTRL+K</span>}
+          <div className="w-full h-full flex flex-col items-center">
+            {searchTerm.length < 3 ? (
+              <SearchInfo />
+            ) : isSearchError && !isSearching && (repoDataError || repoData.length === 0) ? (
+              <Text className="block w-full py-1 px-4 text-sauced-orange !font-normal leading-6">
+                <HiOutlineExclamation className="text-sauced-orange inline-flex mr-2.5" fontSize={20} />
+                We couldn&apos;t find any users or repositories with that name
               </Text>
-            </div>
-            <div className="w-full h-full flex flex-col items-center">
-              {searchTerm.length < 3 ? (
-                <SearchInfo />
-              ) : isSearchError && !isSearching && (repoDataError || repoData.length === 0) ? (
-                <Text className="block w-full py-1 px-4 text-sauced-orange !font-normal leading-6">
-                  <HiOutlineExclamation className="text-sauced-orange inline-flex mr-2.5" fontSize={20} />
-                  We couldn&apos;t find any users or repositories with that name
-                </Text>
-              ) : (
-                <>
-                  <section className="flex flex-col w-full">{renderUserSearchState()}</section>
-                  <hr />
-                  <section className="flex flex-col w-full">{renderRepoSearchState()}</section>
-                </>
-              )}
-            </div>
+            ) : (
+              <>
+                <section className="flex flex-col w-full">{renderUserSearchState()}</section>
+                <hr />
+                <section className="flex flex-col w-full">{renderRepoSearchState()}</section>
+              </>
+            )}
           </div>
         </div>
       </DialogContent>

From a21fe0b5c74b85a760c45d93ee7ced1817de726c Mon Sep 17 00:00:00 2001
From: Nick Taylor <nick@nickyt.co>
Date: Tue, 27 Aug 2024 16:11:24 -0400
Subject: [PATCH 4/4] cleaned up some styles

---
 components/organisms/SearchDialog/search-dialog.tsx | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/components/organisms/SearchDialog/search-dialog.tsx b/components/organisms/SearchDialog/search-dialog.tsx
index 6d2ecad92..38d4c3721 100644
--- a/components/organisms/SearchDialog/search-dialog.tsx
+++ b/components/organisms/SearchDialog/search-dialog.tsx
@@ -140,14 +140,13 @@ const SearchDialog = () => {
   return (
     <Dialog open={openSearch} onOpenChange={setOpenSearch}>
       <DialogContent
-        className="fixed top-0 p-5 flex justify-center"
+        className="fixed top-2 lg:top-4 flex justify-center !pb-0 lg:!p-0 bg-transparent !w-full"
         onPointerDownOutside={() => {
-          alert("clicked outside");
           setOpenSearch(false);
         }}
       >
         <div
-          className="flex flex-col w-full max-w-2xl h-fit max-h-full bg-white shadow-xl border transition rounded-lg ring-light-slate-6 relative z-50 overflow-hidden"
+          className="mx-1 md:mx-2 flex flex-col w-full max-w-2xl h-fit max-h-full bg-white shadow-xl border transition rounded-lg ring-light-slate-6 relative z-50 overflow-hidden"
           onMouseMove={() => cursor !== -1 && setCursor(-1)}
         >
           <div className="flex w-full h-full items-center border-b p-2 pl-3">