Repository: usememos/memos
File: web/src/components/SearchBar.tsx (TypeScript)

Code before:
const SearchBar = () => {
  const { t } = useTranslation();
  const locationStore = useLocationStore();
  const dialogStore = useDialogStore();
  const memoType = locationStore.state.query.type;
  const [queryText, setQueryText] = useState("");
  const inputRef = useRef<HTMLInputElement>(null);

  const handleKeyDown = (event: KeyboardEvent) => {
    if (!inputRef.current) {
      return;
    }
    if (dialogStore.getState().dialogStack.length) {
      return;
    }
    const isMetaKey = event.ctrlKey || event.metaKey;
    if (isMetaKey && event.key === "f") {
      event.preventDefault();
      inputRef.current.focus();
      return;
    }
  };

  useEffect(() => {
    document.body.addEventListener("keydown", handleKeyDown);
    return () => {
      document.body.removeEventListener("keydown", handleKeyDown);
    };
  }, []);

  useEffect(() => {
    const text = locationStore.getState().query.text;
    setQueryText(text === undefined ? "" : text);
  }, [locationStore.getState().query.text]);

  const handleMemoTypeItemClick = (type: MemoSpecType | undefined) => {
    const { type: prevType } = locationStore.getState().query ?? {};
    if (type === prevType) {
      type = undefined;
    }
    locationStore.setMemoTypeQuery(type);
  };

  const handleTextQueryInput = (event: React.FormEvent<HTMLInputElement>) => {
    const text = event.currentTarget.value;
    setQueryText(text);
    locationStore.setTextQuery(text.length === 0 ? undefined : text);
  };

  return (
    <div className="search-bar-container">

Review comment (suggestion):
```suggestion
  useEffect(() => {
    const handleKeyDown = (event: KeyboardEvent) => {
      if (!inputRef.current) {
        return;
      }
      if (dialogStore.getState().dialogStack.length) {
        return;
      }
      const isMetaKey = event.ctrlKey || event.metaKey;
      if (isMetaKey && event.key === "f") {
        event.preventDefault();
        inputRef.current.focus();
        return;
      }
    };
    document.body.addEventListener("keydown", handleKeyDown);
    return () => {
```

Code after:
const SearchBar = () => {
  const { t } = useTranslation();
  const locationStore = useLocationStore();
  const dialogStore = useDialogStore();
  const memoType = locationStore.state.query.type;
  const [queryText, setQueryText] = useState("");
  const inputRef = useRef<HTMLInputElement>(null);

  useEffect(() => {
    const handleKeyDown = (event: KeyboardEvent) => {
      if (!inputRef.current) {
        return;
      }
      if (dialogStore.getState().dialogStack.length) {
        return;
      }
      const isMetaKey = event.ctrlKey || event.metaKey;
      if (isMetaKey && event.key === "f") {
        event.preventDefault();
        inputRef.current.focus();
        return;
      }
    };
    document.body.addEventListener("keydown", handleKeyDown);
    return () => {
      document.body.removeEventListener("keydown", handleKeyDown);
    };
  }, []);

  useEffect(() => {
    const text = locationStore.getState().query.text;
    setQueryText(text === undefined ? "" : text);
  }, [locationStore.getState().query.text]);

  const handleMemoTypeItemClick = (type: MemoSpecType | undefined) => {
    const { type: prevType } = locationStore.getState().query ?? {};
    if (type === prevType) {
      type = undefined;
    }
    locationStore.setMemoTypeQuery(type);
  };

  const handleTextQueryInput = (event: React.FormEvent<HTMLInputElement>) => {
    const text = event.currentTarget.value;
    setQueryText(text);
    locationStore.setTextQuery(text.length === 0 ? undefined : text);
  };

  return (
    <div className="search-bar-container">
      <div className="search-bar-inputer">