Improve studio/tag/performer filtering (#3619)

* Support excludes field
* Refactor studio filter
* Refactor tags filter
* Support excludes in tags
---------
Co-authored-by: Kermie <kermie@isinthe.house>

ui/v2.5/src/components/Shared/ClearableInput.tsx

@@ -0,0 +1,54 @@
+import React from "react";
+import { Button, FormControl } from "react-bootstrap";
+import { faTimes } from "@fortawesome/free-solid-svg-icons";
+import { useIntl } from "react-intl";
+import { Icon } from "./Icon";
+import useFocus from "src/utils/focus";
+
+interface IClearableInput {
+  value: string;
+  setValue: (value: string) => void;
+}
+
+export const ClearableInput: React.FC<IClearableInput> = ({
+  value,
+  setValue,
+}) => {
+  const intl = useIntl();
+
+  const [queryRef, setQueryFocus] = useFocus();
+  const queryClearShowing = !!value;
+
+  function onChangeQuery(event: React.FormEvent<HTMLInputElement>) {
+    setValue(event.currentTarget.value);
+  }
+
+  function onClearQuery() {
+    setValue("");
+    setQueryFocus();
+  }
+
+  return (
+    <div className="clearable-input-group">
+      <FormControl
+        ref={queryRef}
+        placeholder={`${intl.formatMessage({ id: "actions.search" })}…`}
+        value={value}
+        onInput={onChangeQuery}
+        className="clearable-text-field"
+      />
+      {queryClearShowing && (
+        <Button
+          variant="secondary"
+          onClick={onClearQuery}
+          title={intl.formatMessage({ id: "actions.clear" })}
+          className="clearable-text-field-clear"
+        >
+          <Icon icon={faTimes} />
+        </Button>
+      )}
+    </div>
+  );
+};
+
+export default ClearableInput;

ui/v2.5/src/components/Shared/styles.scss

@@ -414,3 +414,30 @@ div.react-datepicker {
 #date-picker-portal .react-datepicker-popper {
   z-index: 1600;
 }
+
+.clearable-input-group {
+  align-items: stretch;
+  display: flex;
+  flex-wrap: wrap;
+  position: relative;
+}
+
+.clearable-text-field,
+.clearable-text-field:active,
+.clearable-text-field:focus {
+  background-color: #394b59;
+  border: 0;
+  border-color: #394b59;
+  color: #fff;
+}
+
+.clearable-text-field-clear {
+  background-color: #394b59;
+  color: #bfccd6;
+  font-size: 0.875rem;
+  margin: 0.375rem 0.75rem;
+  padding: 0;
+  position: absolute;
+  right: 0;
+  z-index: 4;
+}