[TOOL-3493] Dashboard: Fix search in team members page, minor ui tweaks

Author: MananTank

apps/dashboard/src/app/team/[team_slug]/(team)/~/settings/_components/sidebar/TeamSettingsSidebar.tsx

@@ -1,6 +1,7 @@
 import type { Team } from "@/api/team";
-import { GradientAvatar } from "@/components/blocks/Avatars/GradientAvatar";
+import { Badge } from "@/components/ui/badge";
 import type { Account } from "@3rdweb-sdk/react/hooks/useApi";
+import { UserIcon, UsersIcon } from "lucide-react";
 import type { ThirdwebClient } from "thirdweb";
 import { SidebarLink } from "./SidebarLink";
 import { getTeamSettingsLinks } from "./getTeamSettingsLinks";
@@ -27,6 +28,7 @@ export function TeamSettingsSidebar(props: {
           src: props.team.image || "",
         }}
         client={props.client}
+        icon={UsersIcon}
       />
       <RenderLinkGroup
         links={accountGroupLinks}
@@ -37,6 +39,7 @@ export function TeamSettingsSidebar(props: {
           src: props.account?.image || "",
         }}
         client={props.client}
+        icon={UserIcon}
       />
     </aside>
   );
@@ -54,17 +57,17 @@ function RenderLinkGroup(props: {
     src: string;
   };
   client: ThirdwebClient;
+  icon: React.FC<{ className: string }>;
 }) {
   return (
     <>
-      <div className="flex items-center gap-1.5 px-4">
-        <GradientAvatar
-          src={props.titleAvatarIcon.src}
-          className="size-[18px]"
-          id={props.titleAvatarIcon.id}
-          client={props.client}
-        />
-        <p className="text-muted-foreground text-xs">{props.title}</p>
+      <div className="px-2">
+        <Badge
+          variant="outline"
+          className="bg-card font-normal text-muted-foreground"
+        >
+          {props.title}
+        </Badge>
       </div>
 
       <ul className="flex flex-col gap-0.5">

apps/dashboard/src/app/team/[team_slug]/(team)/~/settings/members/ManageInvitesSection.tsx

@@ -39,13 +39,20 @@ export function ManageInvitesSection(props: {
 }) {
   let topSection: React.ReactNode = null;
 
+  const [searchTerm, setSearchTerm] = useState("");
   const [deletedInviteIds, setDeletedInviteIds] = useState<string[]>([]);
   const [role, setRole] = useState<RoleFilterValue>("ALL ROLES");
   const [sortBy, setSortBy] = useState<MemberSortId>("date");
 
   const invitesToShow = useMemo(() => {
     let value = props.teamInvites;
 
+    if (searchTerm) {
+      value = value.filter((inv) =>
+        inv.email.toLowerCase().includes(searchTerm.toLowerCase()),
+      );
+    }
+
     value = value.filter((inv) => !deletedInviteIds.includes(inv.id));
 
     if (role !== "ALL ROLES") {
@@ -68,7 +75,7 @@ export function ManageInvitesSection(props: {
     }
 
     return value;
-  }, [role, props.teamInvites, sortBy, deletedInviteIds]);
+  }, [role, props.teamInvites, sortBy, deletedInviteIds, searchTerm]);
 
   if (!props.userHasEditPermission) {
     topSection = (
@@ -89,6 +96,9 @@ export function ManageInvitesSection(props: {
         setRole={setRole}
         setSortBy={setSortBy}
         sortBy={sortBy}
+        searchTerm={searchTerm}
+        setSearchTerm={setSearchTerm}
+        searchPlaceholder="Search Email"
       />
 
       <div className="h-3" />

apps/dashboard/src/app/team/[team_slug]/(team)/~/settings/members/ManageMembersSection.tsx

@@ -36,13 +36,20 @@ export function ManageMembersSection(props: {
 }) {
   let topSection: React.ReactNode = null;
 
+  const [searchTerm, setSearchTerm] = useState("");
   const [deletedMembersIds, setDeletedMembersIds] = useState<string[]>([]);
   const [role, setRole] = useState<RoleFilterValue>("ALL ROLES");
   const [sortBy, setSortBy] = useState<MemberSortId>("date");
 
   const membersToShow = useMemo(() => {
     let value = props.members;
 
+    if (searchTerm) {
+      value = value.filter((m) =>
+        m.account.name.toLowerCase().includes(searchTerm.toLowerCase()),
+      );
+    }
+
     value = value.filter((m) => !deletedMembersIds.includes(m.accountId));
 
     if (role !== "ALL ROLES") {
@@ -69,7 +76,7 @@ export function ManageMembersSection(props: {
     }
 
     return value;
-  }, [role, props.members, sortBy, deletedMembersIds]);
+  }, [role, props.members, sortBy, deletedMembersIds, searchTerm]);
 
   if (!props.userHasEditPermission) {
     topSection = (
@@ -90,6 +97,9 @@ export function ManageMembersSection(props: {
         setRole={setRole}
         setSortBy={setSortBy}
         sortBy={sortBy}
+        searchTerm={searchTerm}
+        setSearchTerm={setSearchTerm}
+        searchPlaceholder="Search Team members"
       />
 
       <div className="h-3" />
@@ -147,7 +157,7 @@ function MemberRow(props: {
     <div className="flex items-center justify-between gap-3 px-4 py-4">
       <div className="flex items-center gap-3 lg:gap-4">
         <GradientAvatar
-          className="size-6 lg:size-9"
+          className="size-6 border lg:size-9"
           src={props.member.account.image || ""}
           id={props.member.account.creatorWalletAddress}
           client={props.client}

apps/dashboard/src/app/team/[team_slug]/(team)/~/settings/members/_common.tsx

@@ -20,17 +20,22 @@ export function FiltersSection(props: {
   setRole: (role: RoleFilterValue) => void;
   setSortBy: (sortBy: MemberSortId) => void;
   sortBy: MemberSortId;
+  searchTerm: string;
+  setSearchTerm: (searchTerm: string) => void;
+  searchPlaceholder: string;
 }) {
-  const { role, setRole, setSortBy, sortBy } = props;
+  const { role, setRole, setSortBy, sortBy, searchTerm, setSearchTerm } = props;
   return (
     <div className="flex flex-col gap-3 lg:flex-row lg:items-center">
       {/* Search  */}
       <div className="relative grow">
         <SearchIcon className="-translate-y-1/2 absolute top-1/2 left-3 size-4 transform text-muted-foreground" />
         <Input
-          placeholder="Search Team members"
+          placeholder={props.searchPlaceholder}
           className="bg-card pl-9"
           disabled={props.disabled}
+          value={searchTerm}
+          onChange={(e) => setSearchTerm(e.target.value)}
         />
       </div>