fix: payload generator

Author: DecDuck

src/components/ACLSelector.tsx

@@ -129,6 +129,10 @@ export default function ACLSelector({
     (e) => !selectedACLS.includes(e),
   )
 
+  const filteredACLs = acls.filter((e) =>
+    e.toLowerCase().includes(query.toLowerCase()),
+  )
+
   return (
     <Combobox
       as="div"
@@ -157,15 +161,7 @@ export default function ACLSelector({
           transition
           className="absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg outline outline-black/5 data-leave:transition data-leave:duration-100 data-leave:ease-in data-closed:data-leave:opacity-0 sm:text-sm dark:bg-gray-800 dark:shadow-none dark:-outline-offset-1 dark:outline-white/10"
         >
-          {query.length > 0 && (
-            <ComboboxOption
-              value={{ id: null, name: query }}
-              className="cursor-default px-3 py-2 text-gray-900 select-none data-focus:bg-blue-600 data-focus:text-white data-focus:outline-hidden dark:text-gray-300 dark:data-focus:bg-blue-500"
-            >
-              {query}
-            </ComboboxOption>
-          )}
-          {acls.map((acl) => (
+          {filteredACLs.map((acl) => (
             <ComboboxOption
               key={acl}
               value={acl}
@@ -174,6 +170,14 @@ export default function ACLSelector({
               <span className="block truncate">{acl}</span>
             </ComboboxOption>
           ))}
+          {query.length > 0 && (
+            <ComboboxOption
+              value={query}
+              className="cursor-default px-3 py-2 text-gray-900 select-none data-focus:bg-blue-600 data-focus:text-white data-focus:outline-hidden dark:text-gray-300 dark:data-focus:bg-blue-500"
+            >
+              Override add "{query}"
+            </ComboboxOption>
+          )}
         </ComboboxOptions>
       </div>
     </Combobox>

src/components/PayloadGenerator.tsx

@@ -35,8 +35,8 @@ export default function PayloadGenerator() {
       <div>
         <h3>Payload Generator</h3>
         <p>
-          If you don&apos;t want to mess around with JavaScript consoles, you can use
-          this UI tool to generate your payload.
+          If you don&apos;t want to mess around with JavaScript consoles, you
+          can use this UI tool to generate your payload.
         </p>
         <div className="not-prose grid grid-cols-3">
           <div className="col-span-2 space-y-2 border-r border-zinc-300 pr-4 dark:border-zinc-700">
@@ -102,9 +102,8 @@ export default function PayloadGenerator() {
               </span>
             </div>
 
-            <div className='flex flex-row items-center gap-2 flex-wrap'>
-                {acls.map((acl) => (
-              <>
+            <div className="flex flex-row flex-wrap items-center gap-2">
+              {acls.map((acl) => (
                 <span
                   key={acl}
                   className="inline-flex items-center gap-x-0.5 rounded-md bg-blue-50 px-2 py-1 text-xs font-medium text-blue-700 inset-ring inset-ring-blue-700/10 dark:bg-blue-400/10 dark:text-blue-400 dark:inset-ring-blue-400/30"
@@ -125,8 +124,7 @@ export default function PayloadGenerator() {
                     <span className="absolute -inset-1" />
                   </button>
                 </span>
-              </>
-            ))}
+              ))}
             </div>
 
             <ACLSelector mode={mode} addACL={addACL} selectedACLS={acls} />