fix: fix serach bar and refresh router when first loaded

src/app/view/components/Searchbar/Searchbar.tsx

@@ -12,7 +12,7 @@ export default function Searchbar() {
   const [localSearchKeywords, setLocalSearchKeywords] = useState("");
 
   useEffect(() => {
-    const timer = setTimeout(() => setSearchKeywords(localSearchKeywords), 500);
+    const timer = setTimeout(() => setSearchKeywords(localSearchKeywords.toLocaleLowerCase()), 500);
     return () => clearTimeout(timer);
   }, [localSearchKeywords]);
 
@@ -32,8 +32,8 @@ export default function Searchbar() {
       {localSearchKeywords.length !== 0 && (
         <button
           type="button"
-          aria-label="clear button"
-          className="hover:md:bg-black/30 bg-black/10 rounded-full p-1"
+          aria-label="clear"
+          className="hover:md:bg-black/20 bg-black/10 rounded-full p-1"
           onClick={() => setLocalSearchKeywords("")}
         >
           <AiOutlineClose size={13} />

src/contexts/App/AppProvider.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { useRouter } from "next/navigation";
 import { PublicEnv, PublicEnvType } from "@/types/env";
 import { createContext, useContext, useState, useEffect } from "react";
 
@@ -16,9 +17,11 @@ interface AppContextProviderProps {
 }
 
 export const AppContextProvider = ({ children }: AppContextProviderProps) => {
+  const router = useRouter();
   const [env, setEnv] = useState<PublicEnvType | null>(null);
 
   useEffect(() => {
+    setTimeout(() => router.refresh(), 1000);
     fetch("/api/env")
       .then((res) => res.json())
       .then((res) => setEnv(PublicEnv.parse(res)));