feat: some shit

islands/Search.tsx

@@ -6,6 +6,9 @@ import { SearchResult } from "@lib/types.ts";
 import { resources } from "@lib/resources.ts";
 import { isLocalImage } from "@lib/string.ts";
 import { IS_BROWSER } from "$fresh/runtime.ts";
+import Checkbox from "@components/Checkbox.tsx";
+import { Rating } from "@components/Rating.tsx";
+import { useSignal } from "@preact/signals";
 
 export const RedirectSearchHandler = () => {
   useEventListener("keydown", (e: KeyboardEvent) => {
@@ -79,15 +82,24 @@ const SearchComponent = (
   const [searchQuery, setSearchQuery] = useState(q);
   const [data, setData] = useState<SearchResult>();
   const [isLoading, setIsLoading] = useState(false);
+  const showSeenStatus = useSignal(false);
   const inputRef = useRef<HTMLInputElement>(null);
   if ("history" in globalThis) {
     const u = new URL(window.location.href);
     if (u.searchParams.get("q") !== searchQuery) {
       u.searchParams.set("q", searchQuery);
-      window.history.replaceState({}, "", u);
     }
+    if (showSeenStatus.value) {
+      u.searchParams.set("status", "not-seen");
+    } else {
+      u.searchParams.delete("status");
+    }
+
+    window.history.replaceState({}, "", u);
   }
 
+  console.log({ showSeen: showSeenStatus.value });
+
   const fetchData = async (query: string) => {
     try {
       setIsLoading(true);
@@ -98,6 +110,9 @@ const SearchComponent = (
       } else {
         return;
       }
+      if (showSeenStatus.value) {
+        fetchUrl.searchParams.set("status", "not-seen");
+      }
       if (type) {
         fetchUrl.searchParams.set("type", type);
       }
@@ -131,25 +146,28 @@ const SearchComponent = (
     debouncedFetchData(q);
   }, []);
 
-  console.log({ data, isLoading });
   return (
     <div class="mt-2">
-      <div
-        class="flex items-center gap-1 rounded-xl w-full shadow-2xl"
-        style={{ background: "#2B2930", color: "#818181" }}
-      >
-        {isLoading && searchQuery
-          ? <IconLoader2 class="w-4 h-4 ml-4 mr-2 animate-spin" />
-          : <IconSearch class="w-4 h-4 ml-4 mr-2" />}
-        <input
-          type="text"
-          style={{ fontSize: "1.2em" }}
-          class="bg-transparent py-3 w-full"
-          ref={inputRef}
-          value={searchQuery}
-          onInput={handleInputChange}
-        />
-      </div>
+      <header class="flex items-center gap-4">
+        <div
+          class="flex items-center gap-1 rounded-xl w-full shadow-2xl"
+          style={{ background: "#2B2930", color: "#818181" }}
+        >
+          {isLoading && searchQuery
+            ? <IconLoader2 class="w-4 h-4 ml-4 mr-2 animate-spin" />
+            : <IconSearch class="w-4 h-4 ml-4 mr-2" />}
+          <input
+            type="text"
+            style={{ fontSize: "1.2em" }}
+            class="bg-transparent py-3 w-full"
+            ref={inputRef}
+            value={searchQuery}
+            onInput={handleInputChange}
+          />
+        </div>
+        <Checkbox label="seen" checked={showSeenStatus} />
+        <Rating rating={4} />
+      </header>
       {data?.hits?.length && !isLoading
         ? <SearchResultList showEmoji={!type} result={data} />
         : isLoading