Added clear search and reset filters to relevent pages

src/components/AppLayout.tsx

@@ -15,6 +15,7 @@ import { useSwipeable } from "react-swipeable";
 import { Ico, Icon } from "./Ico";
 import { OrderableList } from "./Inputs/OrderableList";
 import { Select } from "./Inputs/Select";
+import { TextInput } from "./Inputs/TextInput";
 import { MainPanel } from "./Panels/MainPanel";
 import { Popup } from "./Popup";
 import { PreviewCard } from "./PreviewCard";
@@ -484,16 +485,11 @@ export function AppLayout(props: Immutable<Props>): JSX.Element {
 
               <div>
                 <h3 className="text-xl">{langui.player_name}</h3>
-                <input
+                <TextInput
-                  type="text"
                   placeholder="<player>"
                   className="w-48"
-                  onInput={(event) =>
+                  state={appLayout.playerName}
-                    appLayout.setPlayerName(
+                  setState={appLayout.setPlayerName}
-                      (event.target as HTMLInputElement).value
-                    )
-                  }
-                  value={appLayout.playerName}
                 />
               </div>
             </div>
@@ -507,16 +503,11 @@ export function AppLayout(props: Immutable<Props>): JSX.Element {
           <div className="grid place-items-center gap-2">
             {/* TODO: add to langui */}
             <h2 className="text-2xl">{"Search"}</h2>
-            <input
+            <TextInput
               className="mb-6 w-full"
-              type="text"
-              name="name"
-              id="name"
               placeholder={"Search query..."}
-              onChange={(event) => {
+              state={searchQuery}
-                const input = event.target as HTMLInputElement;
+              setState={setSearchQuery}
-                setSearchQuery(input.value);
-              }}
             />
           </div>
           {/* TODO: add to langui */}

src/components/Inputs/TextInput.tsx

@@ -0,0 +1,43 @@
+import { Ico, Icon } from "components/Ico";
+import { Immutable } from "helpers/types";
+import { Dispatch, SetStateAction } from "react";
+
+interface Props {
+  state: string | undefined;
+  setState:
+    | Dispatch<SetStateAction<string | undefined>>
+    | Dispatch<SetStateAction<string>>;
+  className?: string;
+  name?: string;
+  placeholder?: string;
+}
+
+export function TextInput(props: Immutable<Props>): JSX.Element {
+  const { state, setState, className, name, placeholder } = props;
+
+  return (
+    <div className={`relative ${className}`}>
+      <input
+        className="w-full"
+        type="text"
+        name={name}
+        value={state}
+        placeholder={placeholder}
+        onChange={(event) => {
+          setState(event.target.value);
+        }}
+      />
+      <div className="absolute right-4 top-0 bottom-0 grid place-items-center">
+        {state && (
+          <Ico
+            className="cursor-pointer !text-xs"
+            icon={Icon.Close}
+            onClick={() => {
+              setState("");
+            }}
+          />
+        )}
+      </div>
+    </div>
+  );
+}

src/pages/contents/index.tsx

@@ -18,6 +18,8 @@ import { GetStaticPropsContext } from "next";
 import { Fragment, useEffect, useState } from "react";
 import { Icon } from "components/Ico";
 import { WithLabel } from "components/Inputs/WithLabel";
+import { Button } from "components/Inputs/Button";
+import { TextInput } from "components/Inputs/TextInput";
 
 interface Props extends AppStaticProps {
   contents: NonNullable<GetContentsQuery["contents"]>["data"];
@@ -25,16 +27,29 @@ interface Props extends AppStaticProps {
 
 type GroupContentItems = Map<string, Immutable<Props["contents"]>>;
 
+const defaultFiltersState = {
+  groupingMethod: -1,
+  keepInfoVisible: false,
+  combineRelatedContent: true,
+  searchName: "",
+};
+
 export default function Contents(props: Immutable<Props>): JSX.Element {
   const { langui, contents } = props;
 
-  const [groupingMethod, setGroupingMethod] = useState<number>(-1);
+  const [groupingMethod, setGroupingMethod] = useState<number>(
-  const [keepInfoVisible, setKeepInfoVisible] = useState(false);
+    defaultFiltersState.groupingMethod
+  );
+  const [keepInfoVisible, setKeepInfoVisible] = useState(
+    defaultFiltersState.keepInfoVisible
+  );
+  const [combineRelatedContent, setCombineRelatedContent] = useState(
+    defaultFiltersState.combineRelatedContent
+  );
+  const [searchName, setSearchName] = useState(defaultFiltersState.searchName);
 
-  const [combineRelatedContent, setCombineRelatedContent] = useState(true);
   const [effectiveCombineRelatedContent, setEffectiveCombineRelatedContent] =
     useState(true);
-  const [searchName, setSearchName] = useState("");
 
   const [filteredItems, setFilteredItems] = useState(
     filterContents(contents, combineRelatedContent, searchName)
@@ -72,16 +87,11 @@ export default function Contents(props: Immutable<Props>): JSX.Element {
         description={langui.contents_description}
       />
 
-      <input
+      <TextInput
         className="mb-6 w-full"
-        type="text"
-        name="name"
-        id="name"
         placeholder={langui.search_title ?? undefined}
-        onChange={(event) => {
+        state={searchName}
-          const input = event.target as HTMLInputElement;
+        setState={setSearchName}
-          setSearchName(input.value);
-        }}
       />
 
       <WithLabel
@@ -112,6 +122,19 @@ export default function Contents(props: Immutable<Props>): JSX.Element {
         label={langui.always_show_info}
         input={<Switch setState={setKeepInfoVisible} state={keepInfoVisible} />}
       />
+
+      {/* TODO: Add to Langui */}
+      <Button
+        className="mt-8"
+        text={"Reset all filters"}
+        icon={Icon.Replay}
+        onClick={() => {
+          setSearchName(defaultFiltersState.searchName);
+          setGroupingMethod(defaultFiltersState.groupingMethod);
+          setKeepInfoVisible(defaultFiltersState.keepInfoVisible);
+          setCombineRelatedContent(defaultFiltersState.combineRelatedContent);
+        }}
+      />
     </SubPanel>
   );
   const contentPanel = (

src/pages/library/index.tsx

@@ -23,6 +23,8 @@ import { GetStaticPropsContext } from "next";
 import { Fragment, useEffect, useState } from "react";
 import { Icon } from "components/Ico";
 import { WithLabel } from "components/Inputs/WithLabel";
+import { TextInput } from "components/Inputs/TextInput";
+import { Button } from "components/Inputs/Button";
 
 interface Props extends AppStaticProps {
   items: NonNullable<GetLibraryItemsPreviewQuery["libraryItems"]>["data"];
@@ -30,16 +32,38 @@ interface Props extends AppStaticProps {
 
 type GroupLibraryItems = Map<string, Immutable<Props["items"]>>;
 
+const defaultFiltersState = {
+  searchName: "",
+  showSubitems: false,
+  showPrimaryItems: true,
+  showSecondaryItems: false,
+  sortingMethod: 0,
+  groupingMethod: -1,
+  keepInfoVisible: false,
+};
+
 export default function Library(props: Immutable<Props>): JSX.Element {
   const { langui, items: libraryItems, currencies } = props;
 
-  const [searchName, setSearchName] = useState("");
+  const [searchName, setSearchName] = useState(defaultFiltersState.searchName);
-  const [showSubitems, setShowSubitems] = useState<boolean>(false);
+  const [showSubitems, setShowSubitems] = useState<boolean>(
-  const [showPrimaryItems, setShowPrimaryItems] = useState<boolean>(true);
+    defaultFiltersState.showSubitems
-  const [showSecondaryItems, setShowSecondaryItems] = useState<boolean>(false);
+  );
-  const [sortingMethod, setSortingMethod] = useState<number>(0);
+  const [showPrimaryItems, setShowPrimaryItems] = useState<boolean>(
-  const [groupingMethod, setGroupingMethod] = useState<number>(-1);
+    defaultFiltersState.showPrimaryItems
-  const [keepInfoVisible, setKeepInfoVisible] = useState(false);
+  );
+  const [showSecondaryItems, setShowSecondaryItems] = useState<boolean>(
+    defaultFiltersState.showSecondaryItems
+  );
+  const [sortingMethod, setSortingMethod] = useState<number>(
+    defaultFiltersState.sortingMethod
+  );
+  const [groupingMethod, setGroupingMethod] = useState<number>(
+    defaultFiltersState.groupingMethod
+  );
+  const [keepInfoVisible, setKeepInfoVisible] = useState(
+    defaultFiltersState.keepInfoVisible
+  );
 
   const [filteredItems, setFilteredItems] = useState(
     filterItems(
@@ -93,16 +117,11 @@ export default function Library(props: Immutable<Props>): JSX.Element {
         description={langui.library_description}
       />
 
-      <input
+      <TextInput
         className="mb-6 w-full"
-        type="text"
-        name="name"
-        id="name"
         placeholder={langui.search_title ?? undefined}
-        onChange={(event) => {
+        state={searchName}
-          const input = event.target as HTMLInputElement;
+        setState={setSearchName}
-          setSearchName(input.value);
-        }}
       />
 
       <WithLabel
@@ -161,6 +180,22 @@ export default function Library(props: Immutable<Props>): JSX.Element {
         label={langui.always_show_info}
         input={<Switch state={keepInfoVisible} setState={setKeepInfoVisible} />}
       />
+
+      {/* TODO: Add to Langui */}
+      <Button
+        className="mt-8"
+        text={"Reset all filters"}
+        icon={Icon.Replay}
+        onClick={() => {
+          setSearchName(defaultFiltersState.searchName);
+          setShowSubitems(defaultFiltersState.showSubitems);
+          setShowPrimaryItems(defaultFiltersState.showPrimaryItems);
+          setShowSecondaryItems(defaultFiltersState.showSecondaryItems);
+          setSortingMethod(defaultFiltersState.sortingMethod);
+          setGroupingMethod(defaultFiltersState.groupingMethod);
+          setKeepInfoVisible(defaultFiltersState.keepInfoVisible);
+        }}
+      />
     </SubPanel>
   );
   const contentPanel = (

src/pages/news/index.tsx

@@ -16,17 +16,26 @@ import { GetStaticPropsContext } from "next";
 import { Fragment, useEffect, useState } from "react";
 import { Icon } from "components/Ico";
 import { WithLabel } from "components/Inputs/WithLabel";
+import { TextInput } from "components/Inputs/TextInput";
+import { Button } from "components/Inputs/Button";
 
 interface Props extends AppStaticProps {
   posts: NonNullable<GetPostsPreviewQuery["posts"]>["data"];
 }
 
+const defaultFiltersState = {
+  searchName: "",
+  keepInfoVisible: true,
+};
+
 export default function News(props: Immutable<Props>): JSX.Element {
   const { langui } = props;
   const posts = sortPosts(props.posts);
 
-  const [keepInfoVisible, setKeepInfoVisible] = useState(true);
+  const [searchName, setSearchName] = useState(defaultFiltersState.searchName);
-  const [searchName, setSearchName] = useState("");
+  const [keepInfoVisible, setKeepInfoVisible] = useState(
+    defaultFiltersState.keepInfoVisible
+  );
 
   const [filteredItems, setFilteredItems] = useState(
     filterItems(posts, searchName)
@@ -45,22 +54,28 @@ export default function News(props: Immutable<Props>): JSX.Element {
         description={langui.news_description}
       />
 
-      <input
+      <TextInput
         className="mb-6 w-full"
-        type="text"
-        name="name"
-        id="name"
         placeholder={langui.search_title ?? undefined}
-        onChange={(event) => {
+        state={searchName}
-          const input = event.target as HTMLInputElement;
+        setState={setSearchName}
-          setSearchName(input.value);
-        }}
       />
 
       <WithLabel
         label={langui.always_show_info}
         input={<Switch setState={setKeepInfoVisible} state={keepInfoVisible} />}
       />
+
+      {/* TODO: Add to Langui */}
+      <Button
+        className="mt-8"
+        text={"Reset all filters"}
+        icon={Icon.Replay}
+        onClick={() => {
+          setSearchName(defaultFiltersState.searchName);
+          setKeepInfoVisible(defaultFiltersState.keepInfoVisible);
+        }}
+      />
     </SubPanel>
   );