implement fuzzysearchinput into PolicyManager

package.json

@@ -104,6 +104,7 @@
     "es-toolkit": "^1.27.0",
     "eslint-plugin-formatjs": "^5.2.2",
     "exifr": "^7.1.3",
+    "fuzzy-search": "^3.2.1",
     "graphemesplit": "^2.4.4",
     "html-react-parser": "^5.0.0",
     "http-link-header": "^1.0.2",
@@ -163,6 +164,7 @@
     "@testing-library/react": "^14.0.0",
     "@testing-library/react-hooks": "^8.0.1",
     "@testing-library/user-event": "^14.5.1",
+    "@types/fuzzy-search": "^2.1.5",
     "@typescript-eslint/eslint-plugin": "^7.0.0",
     "@typescript-eslint/parser": "^7.0.0",
     "@vitejs/plugin-react-swc": "^3.7.2",

src/features/admin/policy-manager.tsx

@@ -1,21 +1,61 @@
+import { FC, useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
 import { useModerationPolicies } from 'soapbox/api/hooks/admin/index.ts';
+import { PolicyItem } from 'soapbox/api/hooks/admin/useModerationPolicies.ts';
+import FuzzySearchInput from 'soapbox/components/fuzzy-search-input.tsx';
 import { Column } from 'soapbox/components/ui/column.tsx';
+import Spinner from 'soapbox/components/ui/spinner.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
 
 const messages = defineMessages({
   heading: { id: 'column.admin.policies', defaultMessage: 'Manage Policies' },
-  emptyMessage: { id: 'admin.moderation_log.empty_message', defaultMessage: 'You have not performed any moderation actions yet. When you do, a history will be shown here.' },
+  searchPlaceholder: { id: 'admin.policies.search_placeholder', defaultMessage: 'What do you want to do?' },
 });
 
-const PolicyManager = () => {
+const PolicyManager: FC = () => {
   const intl = useIntl();
-  const { allPolicies /* currentPolicy, isLoading, updatePolicy, isUpdating */ } = useModerationPolicies();
-  console.warn(allPolicies);
+  const { allPolicies = [], isLoading } = useModerationPolicies();
+  const [, setSearchValue] = useState('');
+
+  const handleSelection = (policy: PolicyItem | null) => {
+    if (policy) {
+      setSearchValue(policy.name);
+    } else {
+      setSearchValue('');
+    }
+  };
+
+  const Suggestion: FC<{ item: PolicyItem }> = ({ item }) => {
+    return (<Stack>
+      <div><strong className='text-lg'>{item.name}</strong></div>
+      <div>{item.description}</div>
+    </Stack>);
+  };
+
   return (
-    <Column label={intl.formatMessage(messages.heading)} />
+    <Column label={intl.formatMessage(messages.heading)}>
+      <div className='p-4'>
+        {isLoading ? (
+          <div className='flex justify-center p-4'><Spinner /></div>
+        ) : (
+          <FuzzySearchInput<PolicyItem>
+            data={allPolicies}
+            keys={['name', 'description']}
+            onSelection={handleSelection}
+            displayKey='name'
+            placeholder={intl.formatMessage(messages.searchPlaceholder)}
+            className='w-full'
+            renderSuggestion={Suggestion}
+          />
+        )}
+      </div>
+
+      <div className='border-t border-gray-200 p-4 dark:border-gray-700'>
+        {/* Render filtered policies based on searchValue */}
+      </div>
+    </Column>
   );
 };
 
-
 export default PolicyManager;

yarn.lock

@@ -2624,6 +2624,11 @@
   resolved "https://registry.yarnpkg.com/@types/estree/-/estree-0.0.39.tgz#e177e699ee1b8c22d23174caaa7422644389509f"
   integrity sha512-EYNwp3bU+98cpU4lAWYYL7Zz+2gryWH1qbdDTidVd6hkiR6weksdbMadyXKXNPEkQFhXM+hVO9ZygomHXp+AIw==
 
+"@types/fuzzy-search@^2.1.5":
+  version "2.1.5"
+  resolved "https://registry.yarnpkg.com/@types/fuzzy-search/-/fuzzy-search-2.1.5.tgz#f697a826c5214274ae36eaa96d47889846ed4374"
+  integrity sha512-Yw8OsjhVKbKw83LMDOZ9RXc+N+um48DmZYMrz7QChpHkQuygsc5O40oCL7SfvWgpaaviCx2TbNXYUBwhMtBH5w==
+
 "@types/geojson@*":
   version "7946.0.10"
   resolved "https://registry.yarnpkg.com/@types/geojson/-/geojson-7946.0.10.tgz#6dfbf5ea17142f7f9a043809f1cd4c448cb68249"
@@ -4927,6 +4932,11 @@ functions-have-names@^1.2.3:
   resolved "https://registry.yarnpkg.com/functions-have-names/-/functions-have-names-1.2.3.tgz#0404fe4ee2ba2f607f0e0ec3c80bae994133b834"
   integrity sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==
 
+fuzzy-search@^3.2.1:
+  version "3.2.1"
+  resolved "https://registry.yarnpkg.com/fuzzy-search/-/fuzzy-search-3.2.1.tgz#65d5faad6bc633aee86f1898b7788dfe312ac6c9"
+  integrity sha512-vAcPiyomt1ioKAsAL2uxSABHJ4Ju/e4UeDM+g1OlR0vV4YhLGMNsdLNvZTpEDY4JCSt0E4hASCNM5t2ETtsbyg==
+
 gensync@^1.0.0-beta.2:
   version "1.0.0-beta.2"
   resolved "https://registry.yarnpkg.com/gensync/-/gensync-1.0.0-beta.2.tgz#32a6ee76c3d7f52d46b2b1ae5d93fea8580a25e0"