Added filter to userlist.

src/components/UserList.scss

@@ -37,6 +37,8 @@
     padding: 0;
     justify-content: normal;
     margin: 0.5rem 0;
+    max-width: none;
+    max-height: none;
   }
 
   .UserList__more {
@@ -49,6 +51,18 @@
     color: var(--color-gray-70);
   }
 
+  --userlist-hint-bg-color: var(--color-gray-10);
+  --userlist-hint-heading-color: var(--color-gray-80);
+  --userlist-hint-text-color: var(--color-gray-60);
+  --userlist-collaborators-border-color: var(--color-gray-20);
+
+  &.theme--dark {
+    --userlist-hint-bg-color: var(--color-gray-90);
+    --userlist-hint-heading-color: var(--color-gray-30);
+    --userlist-hint-text-color: var(--color-gray-40);
+    --userlist-collaborators-border-color: var(--color-gray-80);
+  }
+
   .UserList__collaborators {
     position: static;
     top: auto;
@@ -56,16 +70,8 @@
     max-height: 12rem;
     overflow-y: auto;
     padding: 0.25rem 0.5rem;
-  }
+    border-top: 1px solid var(--userlist-collaborators-border-color);
-
+    border-bottom: 1px solid var(--userlist-collaborators-border-color);
-  --userlist-hint-bg-color: var(--color-gray-10);
-  --userlist-hint-heading-color: var(--color-gray-80);
-  --userlist-hint-text-color: var(--color-gray-60);
-
-  &.theme--dark {
-    --userlist-hint-bg-color: var(--color-gray-90);
-    --userlist-hint-heading-color: var(--color-gray-30);
-    --userlist-hint-text-color: var(--color-gray-40);
   }
 
   .UserList__hint {
@@ -87,4 +93,20 @@
       line-height: 150%;
     }
   }
+
+  .UserList__search {
+    width: 100%;
+    box-sizing: border-box;
+    border: 0 !important;
+    border-radius: 0 !important;
+    font-size: 0.875rem;
+
+    &::placeholder {
+      color: var(--color-gray-40);
+    }
+
+    &:focus {
+      box-shadow: none !important;
+    }
+  }
 }

src/components/UserList.tsx

@@ -142,27 +142,40 @@ export const UserList = ({
   // });
 
   const uniqueCollaboratorsMap = sampleCollaborators;
-  const uniqueCollaboratorsArray = Array.from(uniqueCollaboratorsMap).filter(
+  const uniqueCollaboratorsArray = React.useMemo(
-    ([_, collaborator]) => Object.keys(collaborator).length !== 0,
+    () =>
+      Array.from(uniqueCollaboratorsMap).filter(
+        ([_, collaborator]) => Object.keys(collaborator).length !== 0,
+      ),
+    [uniqueCollaboratorsMap],
+  );
+
+  const [searchTerm, setSearchTerm] = React.useState("");
+
+  const filteredCollaborators = React.useMemo(
+    () =>
+      uniqueCollaboratorsArray.filter(([, collaborator]) =>
+        collaborator.username?.toLowerCase().includes(searchTerm.toLowerCase()),
+      ),
+    [uniqueCollaboratorsArray, searchTerm],
   );
 
   if (uniqueCollaboratorsArray.length === 0) {
     return null;
   }
 
-  const firstThreeCollaborators = uniqueCollaboratorsArray.slice(
+  const firstNCollaborators = uniqueCollaboratorsArray.slice(
     0,
     FIRST_N_AVATARS,
   );
 
-  const first3avatarsJSX = firstThreeCollaborators.map(
+  const firstNAvatarsJSX = firstNCollaborators.map(([clientId, collaborator]) =>
-    ([clientId, collaborator]) =>
+    renderCollaborator({
-      renderCollaborator({
+      actionManager,
-        actionManager,
+      collaborator,
-        collaborator,
+      clientId,
-        clientId,
+      shouldWrapWithTooltip: true,
-        shouldWrapWithTooltip: true,
+    }),
-      }),
   );
 
   return mobile ? (
@@ -178,10 +191,16 @@ export const UserList = ({
     </div>
   ) : (
     <div className={clsx("UserList", className)}>
-      {first3avatarsJSX}
+      {firstNAvatarsJSX}
 
       {uniqueCollaboratorsArray.length > FIRST_N_AVATARS && (
-        <Popover.Root>
+        <Popover.Root
+          onOpenChange={(isOpen) => {
+            if (!isOpen) {
+              setSearchTerm("");
+            }
+          }}
+        >
           <Popover.Trigger className="UserList__more">
             +{uniqueCollaboratorsArray.length - FIRST_N_AVATARS}
           </Popover.Trigger>
@@ -190,11 +209,22 @@ export const UserList = ({
             align="end"
             sideOffset={10}
           >
-            <Island>
+            <Island style={{ overflow: "hidden" }}>
-              {/* TODO follow-participant */}
+              {/* TODO follow-participant add search icon */}
-              <div>TODO search</div>
+              <div>
+                <input
+                  className="UserList__search"
+                  type="text"
+                  placeholder="Search"
+                  value={searchTerm}
+                  onChange={(e) => {
+                    setSearchTerm(e.target.value);
+                  }}
+                />
+              </div>
               <div className="dropdown-menu UserList__collaborators">
-                {uniqueCollaboratorsArray.map(([clientId, collaborator]) =>
+                {/* TODO follow-participant empty state */}
+                {filteredCollaborators.map(([clientId, collaborator]) =>
                   renderCollaborator({
                     actionManager,
                     collaborator,