[TASK] Cleanup TagSelectBox component

This commit cleans up a bit `TagSelectBox` component:

- references in names to collections were removed
- dedicated css file was created for `TagSelectBox` this module
- small changes in code

Resources/Private/JavaScript/media-module/src/components/SideBarRight/Inspector/TagSelectBox.module.css

@@ -0,0 +1,5 @@
+.tagSelectBox input {
+    /* Hack to override Neos backend CSS override */
+    background-color: transparent !important;
+    border: none !important;
+}

Resources/Private/JavaScript/media-module/src/components/SideBarRight/Inspector/TagSelectBox.tsx

@@ -5,8 +5,7 @@ import { Headline, MultiSelectBox } from '@neos-project/react-ui-components';
 import { useIntl } from '@media-ui/core';
 import { IconLabel } from '@media-ui/core/src/components';
 
-import * as classes from './CollectionSelectBox.module.css';
-import { CollectionOption } from './AssetCollectionOptionPreviewElement';
+import * as classes from './TagSelectBox.module.css';
 
 interface TagSelectBoxProps {
     values: string[];
@@ -15,19 +14,24 @@ interface TagSelectBoxProps {
     disabled?: boolean;
 }
 
+interface TagOption {
+    label: string;
+    id: string;
+}
+
 const TagSelectBox = ({ values, options, onChange, disabled = false }: TagSelectBoxProps) => {
     const { translate } = useIntl();
     const [searchTerm, setSearchTerm] = useState('');
 
-    const filteredSelectBoxOptions: CollectionOption[] = useMemo(
-        () => options.filter(({ label }) => label.toLowerCase().includes(searchTerm)),
+    const filteredSelectBoxOptions: TagOption[] = useMemo(
+        () => options.filter(({ label }) => label.toLowerCase().includes(searchTerm.toLowerCase())),
         [options, searchTerm]
     );
 
     const handleChange = (tagIds) => onChange(tagIds.map((tagId) => options.find((o) => o.id === tagId)));
 
     const handleSearchTermChange = useCallback((searchTerm) => {
-        setSearchTerm(searchTerm.toLowerCase());
+        setSearchTerm(searchTerm);
     }, []);
 
     return (
@@ -36,7 +40,7 @@ const TagSelectBox = ({ values, options, onChange, disabled = false }: TagSelect
                 <IconLabel icon="tags" label={translate('inspector.tags', 'Tags')} />
             </Headline>
             <MultiSelectBox
-                className={classes.collectionSelectBox}
+                className={classes.tagSelectBox}
                 disabled={disabled}
                 placeholder={translate('inspector.tags.placeholder', 'Select a tag')}
                 noMatchesFoundLabel={translate('general.noMatchesFound', 'No matches found')}