refactor: Simplify search functionality and update UI layout

attestate · Feb 17, 2025 · 8f6b5f2 · 8f6b5f2
1 parent 5fb2d9b
commit 8f6b5f2
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 84 deletions.
diff --git a/src/views/search.mjs b/src/views/search.mjs
@@ -98,6 +98,15 @@ export default async function (theme, query) {
               <tr>
                 ${SecondHeader(theme, "search", null, null, sanitizedQuery)}
               </tr>
+              ${results.length > 0
+                ? html` <tr>
+                    <td
+                      style="padding: 10px 0 15px 11px; text-align: left; color: #666;"
+                    >
+                      Search results for "${sanitizedQuery}"
+                    </td>
+                  </tr>`
+                : null}
               ${results.length > 0
                 ? await processSearchResults(results)
                 : html`<tr>

diff --git a/src/web/src/Search.jsx b/src/web/src/Search.jsx
@@ -37,42 +37,9 @@ const SearchInterface = () => {
     return () => window.removeEventListener("resize", checkMobile);
   }, []);
 
-  const performSearch = async (searchText) => {
-    try {
-      const response = await fetch("/api/v1/search", {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ query: searchText }),
-      });
-
-      if (!response.ok) {
-        throw new Error("Search failed");
-      }
-
-      const data = await response.json();
-      if (data.status === "success" && Array.isArray(data.data)) {
-        setResults(data.data);
-      } else {
-        setResults([]);
-      }
-    } catch (error) {
-      console.error("Search error:", error);
-      setResults([]);
-    } finally {
-      setIsLoading(false);
-    }
-  };
-
   const handleSearch = (value) => {
-    if (debounceTimer.current) {
-      clearTimeout(debounceTimer.current);
-    }
-
     if (value.trim()) {
-      setIsLoading(true);
-      debounceTimer.current = setTimeout(() => performSearch(value), 300);
-    } else {
-      setResults([]);
+      window.location.href = `/search?q=${encodeURIComponent(value.trim())}`;
     }
   };
 
@@ -196,7 +163,7 @@ const SearchInterface = () => {
         disableDiscovery={iOS}
         PaperProps={{
           style: {
-            height: "75vh",
+            height: "20vh",
             borderTopLeftRadius: "2px",
             borderTopRightRadius: "2px",
             backgroundColor: "var(--background-color0)",
@@ -212,60 +179,51 @@ const SearchInterface = () => {
             flexDirection: "column",
           }}
         >
-          <div style={{ marginBottom: "16px" }}>
-            <input
-              ref={inputRef}
-              type="text"
-              value={query}
-              onChange={(e) => {
-                setQuery(e.target.value);
-                handleSearch(e.target.value);
-              }}
-              style={{
-                width: "100%",
-                padding: "8px",
-                fontSize: "16px",
-                border: "var(--border-thin)",
-                borderRadius: "2px",
-                backgroundColor: "white",
-                fontFamily: "var(--font-family)",
-                outline: "none",
-              }}
-              placeholder="Search all of Kiwi..."
-            />
-          </div>
-
-          <div
-            style={{
-              flex: 1,
-              overflowY: "auto",
-            }}
-          >
-            {isLoading ? (
-              <div
+          <div style={{ padding: "16px 16px 0 16px" }}>
+            <div style={{ 
+              display: "flex",
+              gap: "8px",
+              alignItems: "center"
+            }}>
+              <input
+                ref={inputRef}
+                type="text"
+                value={query}
+                onChange={(e) => setQuery(e.target.value)}
+                onKeyDown={(e) => {
+                  if (e.key === 'Enter') {
+                    handleSearch(e.target.value);
+                  }
+                }}
                 style={{
-                  textAlign: "center",
-                  padding: "16px",
-                  color: "var(--visited-link)",
+                  flex: "0 0 70%",
+                  padding: "8px",
+                  fontSize: "16px",
+                  border: "var(--border-thin)",
+                  borderRadius: "2px",
+                  backgroundColor: "white",
+                  fontFamily: "var(--font-family)",
+                  outline: "none",
                 }}
-              >
-                Loading...
-              </div>
-            ) : results.length > 0 ? (
-              results.map((result) => (
-                <SearchResult key={result.index} result={result} />
-              ))
-            ) : query ? (
-              <div
+                placeholder="Search..."
+              />
+              <button
+                onClick={() => handleSearch(query)}
                 style={{
-                  textAlign: "center",
-                  padding: "16px",
-                  color: "var(--visited-link)",
+                  flex: "1",
+                  padding: "8px 12px",
+                  background: "black",
+                  color: "white",
+                  border: "var(--border)",
+                  borderRadius: "2px",
+                  cursor: "pointer",
+                  fontSize: "10pt",
+                  fontFamily: "var(--font-family)",
                 }}
               >
-                No results found
-              </div>
-            ) : null}
+                Search
+              </button>
+            </div>
           </div>
         </div>
       </SwipeableDrawer>