feat: new resource dashboard (#1346)

* feat: refator the file dashboard

* feat: support select resouce file

* feat: suppor delete select files

* feat: support share menu, implement rename and delete

* chore: change the color of hover

* chore: refator file dashboard to page

* feat: add i18n for button

* feat: beautify the button

* fix: the error position of button

* feat: only select when click circle instead of whole card

* feat: beautify file dashboard

* chore: factor the filecard code

* feat: using dropdown component intead of component

* feat: add i18n for delete selected resource button

* feat: delete the unused style of title

* chore: refactor file cover

* feat: support more type file cover

* feat: use memo to reduce unused computing in filecover

* feat: when no file be selected, click the delete will error

* feat: store the select resource id instead of source to save memory

* chore: delete unused code

* feat: refactor the file card

* chore: delete unused style file

* chore: change file to resource

* chore: delete unused import

* chore: fix the typo

* fix: the error of handle check click

* fix: the error of handle of uncheck

* chore: change the name of selectList to selectedList

* chore: change the name of selectList to selectedList

* chore: change the name of selectList to selectedList

* chore: delete unused import

* feat: support Responsive Design

* feat: min display two card in a line

* feat: adjust the num of a line in responsive design

* feat: adjust the num of a line to 6 when using md

* feat: add the color of hover source card when dark

* chore: refactor resource cover css to reduce code

* chore: delete unnessnary change

* chore: change the type of callback function

* chore: delete unused css code

* feat: add zh-hant i18n

* feat: change the position of buttons

* feat: add title for the icon button

* feat: add opacity for icon

* feat: refactor searchbar

* feat:move Debounce to search

* feat: new resource search bar

* feat: reduce the size of cover

* support file search

* Update web/src/pages/ResourcesDashboard.tsx

Co-authored-by: boojack <stevenlgtm@gmail.com>

* Update web/src/components/ResourceCard.tsx

Co-authored-by: boojack <stevenlgtm@gmail.com>

* chore: reduce css code

* feat: support lowcase and uppercase search

* chore: reserve the searchbar

* feat: refator resource Search bar

* chore: change the param name

* feat: resource bar support dark mode

* feat: beautify the UI of dashboard

* chore: extract positionClassName from actionsClassName

* feat: reduce the length of search bar

---------

Co-authored-by: boojack <stevenlgtm@gmail.com>

web/src/components/ResourceSearchBar.tsx

@@ -0,0 +1,42 @@
+import { useState, useRef } from "react";
+import Icon from "./Icon";
+import useDebounce from "../hooks/useDebounce";
+
+interface ResourceSearchBarProps {
+  setQuery: (queryText: string) => void;
+}
+const ResourceSearchBar = ({ setQuery }: ResourceSearchBarProps) => {
+  const [queryText, setQueryText] = useState("");
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const handleTextQueryInput = (event: React.FormEvent<HTMLInputElement>) => {
+    const text = event.currentTarget.value;
+    setQueryText(text);
+  };
+
+  useDebounce(
+    () => {
+      setQuery(queryText);
+    },
+    200,
+    [queryText]
+  );
+
+  return (
+    <div className="w-4/12">
+      <div className="w-full h-9 flex flex-row justify-start items-center py-2 px-3 rounded-md bg-gray-200 dark:bg-zinc-800">
+        <Icon.Search className="w-4 h-auto opacity-30 dark:text-gray-200" />
+        <input
+          className="flex ml-2 w-24 grow text-sm outline-none bg-transparent dark:text-gray-200"
+          type="text"
+          placeholder="Search resource "
+          ref={inputRef}
+          value={queryText}
+          onChange={handleTextQueryInput}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default ResourceSearchBar;