@tuturuuu/ui 0.7.0 → 0.9.0

package/src/components/ui/custom/workspace-access/workspace-access-page-header.tsx

@@ -1,8 +1,8 @@
 'use client';
 
-import { ShieldCheck, Users } from '@tuturuuu/icons';
-import { Badge } from '@tuturuuu/ui/badge';
+import { ShieldCheck, UserCheck, UserPlus, Users } from '@tuturuuu/icons';
 import { useTranslations } from 'next-intl';
+import type { ReactNode } from 'react';
 import type { WorkspaceAccessContext, WorkspaceAccessMode } from './types';
 
 type Props = {
@@ -13,6 +13,13 @@ type Props = {
   totalCount: number;
 };
 
+type Stat = {
+  accent: string;
+  icon: ReactNode;
+  label: string;
+  value: number;
+};
+
 export function WorkspaceAccessPageHeader({
   context,
   invitedCount,
@@ -22,49 +29,81 @@ export function WorkspaceAccessPageHeader({
 }: Props) {
   const t = useTranslations() as (key: string) => string;
 
+  const stats: Stat[] = [
+    {
+      accent: 'text-dynamic-blue',
+      icon: <Users className="h-4 w-4" />,
+      label: t('common.total'),
+      value: totalCount,
+    },
+    {
+      accent: 'text-dynamic-green',
+      icon: <UserCheck className="h-4 w-4" />,
+      label: t('ws-members.active_members'),
+      value: joinedCount,
+    },
+    {
+      accent: 'text-dynamic-orange',
+      icon: <UserPlus className="h-4 w-4" />,
+      label: t('ws-members.pending_invitations'),
+      value: invitedCount,
+    },
+  ];
+
   return (
-    <section className="overflow-hidden rounded-xl border border-border bg-linear-to-br from-background via-background to-foreground/[0.02] p-6 shadow-sm">
-      <div className="flex flex-col gap-6 lg:flex-row lg:items-start lg:justify-between">
-        <div className="min-w-0">
-          <div className="flex items-center gap-3">
-            <div className="flex h-12 w-12 shrink-0 items-center justify-center rounded-xl bg-linear-to-br from-dynamic-blue to-dynamic-purple shadow-lg">
-              <Users className="h-6 w-6 text-background" />
-            </div>
-            <div className="min-w-0">
-              <h1 className="bg-linear-to-br from-foreground to-foreground/70 bg-clip-text font-bold text-3xl text-transparent tracking-tight">
+    <section className="rounded-xl border border-border bg-background">
+      <div className="flex flex-col gap-6 p-6 lg:flex-row lg:items-start lg:justify-between">
+        <div className="flex min-w-0 gap-4">
+          <div className="flex h-11 w-11 shrink-0 items-center justify-center rounded-xl border border-dynamic-blue/30 bg-dynamic-blue/10 text-dynamic-blue">
+            <Users className="h-5 w-5" />
+          </div>
+          <div className="min-w-0">
+            <div className="flex items-center gap-2">
+              <h1 className="truncate font-bold text-2xl tracking-tight">
                 {mode === 'cms'
                   ? t('external-projects.settings.members_title')
                   : t('workspace-settings-layout.members')}
               </h1>
-              {context.boundProjectName ? (
-                <p className="mt-1 text-muted-foreground text-sm">
-                  {t('external-projects.settings.bound_project_label')}:{' '}
-                  {context.boundProjectName}
-                </p>
-              ) : null}
+              <span className="inline-flex items-center gap-1 rounded-full border border-dynamic-purple/30 bg-dynamic-purple/10 px-2 py-0.5 font-medium text-dynamic-purple text-xs">
+                <ShieldCheck className="h-3 w-3" />
+                {t('ws-roles.plural')}
+              </span>
             </div>
+            <p className="mt-1.5 max-w-2xl text-muted-foreground text-sm leading-6">
+              {mode === 'cms'
+                ? t('external-projects.settings.members_description')
+                : t('ws-members.description')}
+            </p>
+            {context.boundProjectName ? (
+              <p className="mt-2 inline-flex items-center gap-1.5 rounded-md border border-border bg-foreground/[0.03] px-2 py-1 text-muted-foreground text-xs">
+                {t('external-projects.settings.bound_project_label')}:
+                <span className="font-semibold text-foreground">
+                  {context.boundProjectName}
+                </span>
+              </p>
+            ) : null}
           </div>
-          <p className="mt-4 max-w-3xl text-muted-foreground text-sm leading-6">
-            {mode === 'cms'
-              ? t('external-projects.settings.members_description')
-              : t('ws-members.description')}
-          </p>
         </div>
 
-        <div className="flex flex-wrap gap-2 lg:justify-end">
-          <Badge variant="outline" className="rounded-full">
-            {t('common.total')}: {totalCount}
-          </Badge>
-          <Badge variant="outline" className="rounded-full">
-            {t('ws-members.active_members')}: {joinedCount}
-          </Badge>
-          <Badge variant="outline" className="rounded-full">
-            {t('ws-members.pending_invitations')}: {invitedCount}
-          </Badge>
-          <Badge variant="secondary" className="gap-1 rounded-full">
-            <ShieldCheck className="h-3.5 w-3.5" />
-            {t('ws-roles.plural')}
-          </Badge>
+        <div className="grid shrink-0 grid-cols-3 divide-x divide-border overflow-hidden rounded-lg border border-border bg-foreground/[0.02]">
+          {stats.map((stat) => (
+            <div
+              key={stat.label}
+              className="flex flex-col gap-1 px-4 py-3 text-center"
+            >
+              <span
+                className={`inline-flex items-center justify-center gap-1.5 ${stat.accent}`}
+              >
+                {stat.icon}
+                <span className="font-bold text-foreground text-xl tabular-nums">
+                  {stat.value}
+                </span>
+              </span>
+              <span className="text-muted-foreground text-xs">
+                {stat.label}
+              </span>
+            </div>
+          ))}
         </div>
       </div>
     </section>

package/src/components/ui/custom/workspace-access/workspace-access-page.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
-import { Settings } from '@tuturuuu/icons';
+import { TriangleAlert } from '@tuturuuu/icons';
 import type { SupabaseUser } from '@tuturuuu/supabase/next/user';
 import type { WorkspaceDefaultPermissionMemberType } from '@tuturuuu/types';
 import { Skeleton } from '@tuturuuu/ui/skeleton';
@@ -222,10 +222,10 @@ export function WorkspaceAccessPage({
 
   if (contextQuery.isPending) {
     return (
-      <div className="space-y-4">
-        <Skeleton className="h-28 rounded-lg" />
-        <Skeleton className="h-12 rounded-lg" />
-        <Skeleton className="h-96 rounded-lg" />
+      <div className="space-y-6">
+        <Skeleton className="h-32 rounded-xl" />
+        <Skeleton className="h-10 rounded-xl" />
+        <Skeleton className="h-96 rounded-xl" />
       </div>
     );
   }
@@ -255,42 +255,39 @@ export function WorkspaceAccessPage({
           search={search}
         />
 
-        <TabsContent value="people" className="mt-4">
-          <div className="rounded-xl border border-border bg-background p-6 shadow-sm">
-            <WorkspaceAccessPeopleFilters
-              filterOptions={filterOptions}
-              filters={filters}
-              labels={labels}
-              onFiltersChange={setFilters}
-              onStatusChange={setStatus}
-              status={status}
-            />
+        <TabsContent value="people" className="mt-6 space-y-4">
+          <WorkspaceAccessPeopleFilters
+            filterOptions={filterOptions}
+            filters={filters}
+            labels={labels}
+            onFiltersChange={setFilters}
+            onStatusChange={setStatus}
+            status={status}
+          />
 
-            <WorkspaceAccessMembers
-              canManageMembers={canManageMembers}
-              canManageRoles={canManageRoles}
-              isLoading={membersQuery.isPending}
-              isMutating={
-                removeMemberMutation.isPending ||
-                roleMembershipMutation.isPending
-              }
-              labels={labels}
-              members={visibleMembers}
-              onAssignRole={(payload) =>
-                roleMembershipMutation.mutate({ ...payload, action: 'add' })
-              }
-              onRemoveMember={(payload) => removeMemberMutation.mutate(payload)}
-              onRemoveRole={(payload) =>
-                roleMembershipMutation.mutate({ ...payload, action: 'remove' })
-              }
-              roles={roles}
-              searchTerm={search}
-              status={status}
-            />
-          </div>
+          <WorkspaceAccessMembers
+            canManageMembers={canManageMembers}
+            canManageRoles={canManageRoles}
+            isLoading={membersQuery.isPending}
+            isMutating={
+              removeMemberMutation.isPending || roleMembershipMutation.isPending
+            }
+            labels={labels}
+            members={visibleMembers}
+            onAssignRole={(payload) =>
+              roleMembershipMutation.mutate({ ...payload, action: 'add' })
+            }
+            onRemoveMember={(payload) => removeMemberMutation.mutate(payload)}
+            onRemoveRole={(payload) =>
+              roleMembershipMutation.mutate({ ...payload, action: 'remove' })
+            }
+            roles={roles}
+            searchTerm={search}
+            status={status}
+          />
         </TabsContent>
 
-        <TabsContent value="roles" className="mt-4">
+        <TabsContent value="roles" className="mt-6">
           <WorkspaceAccessRoles
             canManageRoles={canManageRoles}
             isLoading={rolesQuery.isPending}
@@ -309,7 +306,7 @@ export function WorkspaceAccessPage({
           />
         </TabsContent>
 
-        <TabsContent value="defaults-member" className="mt-4">
+        <TabsContent value="defaults-member" className="mt-6">
           <WorkspaceAccessDefaultRoleCard
             canManageRoles={canManageRoles}
             isLoading={memberDefaultQuery.isPending}
@@ -327,7 +324,7 @@ export function WorkspaceAccessPage({
           />
         </TabsContent>
 
-        <TabsContent value="defaults-guest" className="mt-4">
+        <TabsContent value="defaults-guest" className="mt-6">
           <WorkspaceAccessDefaultRoleCard
             canManageRoles={canManageRoles}
             isLoading={guestDefaultQuery.isPending}
@@ -378,8 +375,8 @@ export function WorkspaceAccessPage({
       ) : null}
 
       {contextQuery.isError ? (
-        <div className="rounded-lg border border-dynamic-red/20 bg-dynamic-red/5 p-4 text-dynamic-red text-sm">
-          <Settings className="mr-2 inline h-4 w-4" />
+        <div className="flex items-center gap-2 rounded-xl border border-dynamic-red/20 bg-dynamic-red/5 p-4 text-dynamic-red text-sm">
+          <TriangleAlert className="h-4 w-4 shrink-0" />
           {t('common.error')}
         </div>
       ) : null}

package/src/components/ui/custom/workspace-access/workspace-access-people-filters.tsx

@@ -52,7 +52,7 @@ export function WorkspaceAccessPeopleFilters({
     filters.permissionIds.length + filters.roleIds.length;
 
   return (
-    <div className="mb-5 flex flex-col gap-3 rounded-lg border border-border bg-foreground/[0.02] p-3 sm:flex-row sm:items-center sm:justify-between">
+    <div className="flex flex-col gap-3 rounded-xl border border-border bg-foreground/[0.02] p-3 sm:flex-row sm:items-center sm:justify-between">
       <div className="flex flex-wrap items-center gap-2">
         <div className="mr-1 flex items-center gap-2 text-muted-foreground text-sm">
           <ListFilter className="h-4 w-4" />

package/src/components/ui/custom/workspace-access/workspace-access-roles.tsx

@@ -1,16 +1,9 @@
 'use client';
 
-import { Pencil, Plus, Trash2 } from '@tuturuuu/icons';
+import { Pencil, Plus, ShieldCheck, Trash2, Users } from '@tuturuuu/icons';
 import type { InternalApiEnhancedWorkspaceMember } from '@tuturuuu/types';
 import { Badge } from '@tuturuuu/ui/badge';
 import { Button } from '@tuturuuu/ui/button';
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from '@tuturuuu/ui/card';
 import { Skeleton } from '@tuturuuu/ui/skeleton';
 import { useTranslations } from 'next-intl';
 import { getMemberDisplayName } from './member-filter-utils';
@@ -56,37 +49,36 @@ export function WorkspaceAccessRoles({
 
   return (
     <div className="space-y-4">
-      <Card className="shadow-none">
-        <CardHeader>
-          <div className="flex flex-wrap items-start justify-between gap-4">
-            <div>
-              <CardTitle>{labels.accessLevelsLabel}</CardTitle>
-              <CardDescription>{t('ws-roles.description')}</CardDescription>
-            </div>
-            {canManageRoles ? (
-              <Button onClick={onCreateRole}>
-                <Plus className="mr-2 h-4 w-4" />
-                {t('ws-roles.create')}
-              </Button>
-            ) : null}
-          </div>
-        </CardHeader>
-      </Card>
+      <div className="flex flex-wrap items-start justify-between gap-4">
+        <div>
+          <h2 className="font-semibold text-lg">{labels.accessLevelsLabel}</h2>
+          <p className="text-muted-foreground text-sm">
+            {t('ws-roles.description')}
+          </p>
+        </div>
+        {canManageRoles ? (
+          <Button onClick={onCreateRole}>
+            <Plus className="mr-2 h-4 w-4" />
+            {t('ws-roles.create')}
+          </Button>
+        ) : null}
+      </div>
 
       {isLoading ? (
         <div className="space-y-3">
-          <Skeleton className="h-36 rounded-lg" />
-          <Skeleton className="h-36 rounded-lg" />
+          <Skeleton className="h-36 rounded-xl" />
+          <Skeleton className="h-36 rounded-xl" />
         </div>
       ) : roles.length === 0 ? (
-        <Card className="shadow-none">
-          <CardContent className="flex min-h-44 flex-col items-center justify-center gap-2 text-center">
-            <div className="font-medium">{labels.rolesEmptyTitle}</div>
-            <div className="text-muted-foreground text-sm">
-              {labels.rolesEmptyDescription}
-            </div>
-          </CardContent>
-        </Card>
+        <div className="flex min-h-44 flex-col items-center justify-center gap-2 rounded-xl border border-border border-dashed p-8 text-center">
+          <div className="flex h-12 w-12 items-center justify-center rounded-full bg-dynamic-purple/10 text-dynamic-purple">
+            <ShieldCheck className="h-6 w-6" />
+          </div>
+          <div className="font-medium">{labels.rolesEmptyTitle}</div>
+          <div className="max-w-sm text-muted-foreground text-sm">
+            {labels.rolesEmptyDescription}
+          </div>
+        </div>
       ) : (
         <div className="grid gap-3">
           {roles.map((role) => {
@@ -94,74 +86,104 @@ export function WorkspaceAccessRoles({
               role.members && role.members.length > 0
                 ? role.members
                 : assignedMembersForRole(role.id, members);
+            const enabled = enabledPermissionCount(role);
+            const pct =
+              permissionCount > 0
+                ? Math.round((enabled / permissionCount) * 100)
+                : 0;
 
             return (
-              <Card key={role.id} className="shadow-none">
-                <CardContent className="space-y-4 p-5">
-                  <div className="flex flex-wrap items-start justify-between gap-4">
-                    <div className="space-y-2">
-                      <div className="font-medium text-lg">{role.name}</div>
-                      <div className="flex flex-wrap gap-2 text-muted-foreground text-sm">
-                        <span>
-                          {t('ws-roles.members')}: {assignedMembers.length}
-                        </span>
-                        <span>
-                          {t('ws-roles.permissions')}:{' '}
-                          {enabledPermissionCount(role)}/{permissionCount}
-                        </span>
-                      </div>
+              <div
+                key={role.id}
+                className="rounded-xl border border-border bg-background p-5 transition-colors hover:border-foreground/20"
+              >
+                <div className="flex flex-wrap items-start justify-between gap-4">
+                  <div className="flex min-w-0 gap-3">
+                    <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg border border-dynamic-purple/30 bg-dynamic-purple/10 text-dynamic-purple">
+                      <ShieldCheck className="h-5 w-5" />
                     </div>
-
-                    {canManageRoles ? (
-                      <div className="flex flex-wrap gap-2">
-                        <Button
-                          variant="outline"
-                          onClick={() => onEditRole(role)}
-                        >
-                          <Pencil className="mr-2 h-4 w-4" />
-                          {t('common.edit')}
-                        </Button>
-                        <Button
+                    <div className="min-w-0">
+                      <div className="flex items-center gap-2">
+                        <span className="truncate font-semibold text-base">
+                          {role.name}
+                        </span>
+                        <Badge
                           variant="outline"
-                          onClick={() => onDeleteRole(role)}
+                          className="h-5 gap-1 px-1.5 text-xs"
                         >
-                          <Trash2 className="mr-2 h-4 w-4" />
-                          {t('common.delete')}
-                        </Button>
+                          <Users className="h-3 w-3" />
+                          {assignedMembers.length}
+                        </Badge>
                       </div>
-                    ) : null}
+                      <div className="mt-2 max-w-xs">
+                        <div className="flex items-center justify-between text-muted-foreground text-xs">
+                          <span>{t('ws-roles.permissions')}</span>
+                          <span className="tabular-nums">
+                            {enabled}/{permissionCount}
+                          </span>
+                        </div>
+                        <div className="mt-1 h-1.5 overflow-hidden rounded-full bg-foreground/10">
+                          <div
+                            className="h-full rounded-full bg-dynamic-purple"
+                            style={{ width: `${pct}%` }}
+                          />
+                        </div>
+                      </div>
+                    </div>
                   </div>
 
-                  <div className="flex flex-wrap gap-2">
-                    <WorkspaceAccessPermissionPreview
-                      emptyLabel={t('ws-members.no_permissions')}
-                      permissionTitles={permissionTitles}
-                      role={role}
-                    />
-                  </div>
+                  {canManageRoles ? (
+                    <div className="flex flex-wrap gap-2">
+                      <Button
+                        variant="outline"
+                        size="sm"
+                        onClick={() => onEditRole(role)}
+                      >
+                        <Pencil className="mr-2 h-4 w-4" />
+                        {t('common.edit')}
+                      </Button>
+                      <Button
+                        variant="outline"
+                        size="sm"
+                        onClick={() => onDeleteRole(role)}
+                      >
+                        <Trash2 className="mr-2 h-4 w-4" />
+                        {t('common.delete')}
+                      </Button>
+                    </div>
+                  ) : null}
+                </div>
+
+                <div className="mt-4 flex flex-wrap gap-2">
+                  <WorkspaceAccessPermissionPreview
+                    emptyLabel={t('ws-members.no_permissions')}
+                    permissionTitles={permissionTitles}
+                    role={role}
+                  />
+                </div>
 
-                  <div className="flex flex-wrap gap-2">
-                    {assignedMembers.length === 0 ? (
-                      <Badge variant="outline" className="rounded-full">
-                        {labels.noRolesLabel}
+                {assignedMembers.length > 0 ? (
+                  <div className="mt-3 flex flex-wrap gap-1.5 border-border border-t pt-3">
+                    {assignedMembers.slice(0, 6).map((member) => (
+                      <Badge
+                        key={`${role.id}-${member.id}`}
+                        variant="secondary"
+                        className="rounded-full text-xs"
+                      >
+                        {getMemberDisplayName(
+                          member as InternalApiEnhancedWorkspaceMember,
+                          t('common.unknown')
+                        )}
                       </Badge>
-                    ) : (
-                      assignedMembers.slice(0, 6).map((member) => (
-                        <Badge
-                          key={`${role.id}-${member.id}`}
-                          variant="outline"
-                          className="rounded-full"
-                        >
-                          {getMemberDisplayName(
-                            member as InternalApiEnhancedWorkspaceMember,
-                            t('common.unknown')
-                          )}
-                        </Badge>
-                      ))
-                    )}
+                    ))}
+                    {assignedMembers.length > 6 ? (
+                      <Badge variant="outline" className="rounded-full text-xs">
+                        +{assignedMembers.length - 6}
+                      </Badge>
+                    ) : null}
                   </div>
-                </CardContent>
-              </Card>
+                ) : null}
+              </div>
             );
           })}
         </div>

package/src/components/ui/custom/workspace-access/workspace-access-tabs-toolbar.tsx

@@ -1,10 +1,18 @@
 'use client';
 
-import { Search, UserPlus } from '@tuturuuu/icons';
+import {
+  KeyRound,
+  Search,
+  ShieldCheck,
+  ShieldUser,
+  UserPlus,
+  Users,
+} from '@tuturuuu/icons';
 import { Button } from '@tuturuuu/ui/button';
 import { Input } from '@tuturuuu/ui/input';
 import { TabsList, TabsTrigger } from '@tuturuuu/ui/tabs';
 import { useTranslations } from 'next-intl';
+import type { ReactNode } from 'react';
 import type { WorkspaceAccessTab } from './types';
 
 type Props = {
@@ -18,6 +26,9 @@ type Props = {
   search: string;
 };
 
+const TAB_TRIGGER_CLASS =
+  'rounded-none border-transparent border-b-2 bg-transparent px-1 pt-1 pb-3 text-muted-foreground shadow-none transition-colors hover:text-foreground data-[state=active]:border-dynamic-blue data-[state=active]:bg-transparent data-[state=active]:text-foreground data-[state=active]:shadow-none';
+
 export function WorkspaceAccessTabsToolbar({
   activeTab,
   accessLevelsLabel,
@@ -30,41 +41,71 @@ export function WorkspaceAccessTabsToolbar({
 }: Props) {
   const t = useTranslations() as (key: string) => string;
 
+  const tabs: Array<{
+    disabled?: boolean;
+    icon: ReactNode;
+    label: string;
+    value: WorkspaceAccessTab;
+  }> = [
+    {
+      icon: <Users className="h-4 w-4" />,
+      label: t('ws-roles.members'),
+      value: 'people',
+    },
+    {
+      disabled: !canManageRoles,
+      icon: <ShieldCheck className="h-4 w-4" />,
+      label: accessLevelsLabel,
+      value: 'roles',
+    },
+    {
+      disabled: !canManageRoles,
+      icon: <ShieldUser className="h-4 w-4" />,
+      label: t('ws-roles.member_defaults_tab'),
+      value: 'defaults-member',
+    },
+    {
+      disabled: !canManageRoles,
+      icon: <KeyRound className="h-4 w-4" />,
+      label: t('ws-roles.guest_defaults_tab'),
+      value: 'defaults-guest',
+    },
+  ];
+
   return (
-    <div className="rounded-xl border border-border bg-background p-3 shadow-sm">
-      <div className="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
-        <TabsList className="grid h-auto w-full grid-cols-2 text-sm lg:w-auto lg:grid-cols-4">
-          <TabsTrigger value="people">{t('ws-roles.members')}</TabsTrigger>
-          <TabsTrigger value="roles" disabled={!canManageRoles}>
-            {accessLevelsLabel}
-          </TabsTrigger>
-          <TabsTrigger value="defaults-member" disabled={!canManageRoles}>
-            {t('ws-roles.member_defaults_tab')}
-          </TabsTrigger>
-          <TabsTrigger value="defaults-guest" disabled={!canManageRoles}>
-            {t('ws-roles.guest_defaults_tab')}
+    <div className="flex flex-col gap-3 lg:flex-row lg:items-end lg:justify-between">
+      <TabsList className="h-auto w-full justify-start gap-5 overflow-x-auto rounded-none border-border border-b bg-transparent p-0 lg:w-auto">
+        {tabs.map((tab) => (
+          <TabsTrigger
+            key={tab.value}
+            value={tab.value}
+            disabled={tab.disabled}
+            className={TAB_TRIGGER_CLASS}
+          >
+            {tab.icon}
+            {tab.label}
           </TabsTrigger>
-        </TabsList>
+        ))}
+      </TabsList>
 
-        <div className="flex w-full flex-col gap-3 sm:flex-row lg:w-auto">
-          <div className="relative min-w-0 sm:min-w-[320px]">
-            <Search className="pointer-events-none absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
-            <Input
-              value={search}
-              onChange={(event) => onSearchChange(event.target.value)}
-              placeholder={t('common.search')}
-              className="pl-9"
-            />
-          </div>
-          {activeTab === 'people' ? (
-            <Button disabled={!canInvite} onClick={onInviteClick}>
-              <UserPlus className="mr-2 h-4 w-4" />
-              {disableInvite
-                ? t('ws-members.invite_member_disabled')
-                : t('ws-members.invite_member')}
-            </Button>
-          ) : null}
+      <div className="flex w-full shrink-0 flex-col gap-2 sm:flex-row lg:w-auto">
+        <div className="relative min-w-0 sm:min-w-[280px]">
+          <Search className="pointer-events-none absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
+          <Input
+            value={search}
+            onChange={(event) => onSearchChange(event.target.value)}
+            placeholder={t('common.search')}
+            className="pl-9"
+          />
         </div>
+        {activeTab === 'people' ? (
+          <Button disabled={!canInvite} onClick={onInviteClick}>
+            <UserPlus className="mr-2 h-4 w-4" />
+            {disableInvite
+              ? t('ws-members.invite_member_disabled')
+              : t('ws-members.invite_member')}
+          </Button>
+        ) : null}
       </div>
     </div>
   );