@svadmin/ui 0.42.3 → 0.44.0

package/dist/components/account/SettingsSidebarPage.svelte

@@ -1,312 +1,19 @@
 <script lang="ts">
   import { useTranslation } from '@svadmin/core/i18n';
-  import * as Card from '../ui/card/index.js';
   import { Button } from '../ui/button/index.js';
-  import { Badge } from '../ui/badge/index.js';
   import { Input } from '../ui/input/index.js';
-  import { Label } from '../ui/label/index.js';
   import { Switch } from '../ui/switch/index.js';
-  import { Separator } from '../ui/separator/index.js';
-  import { Loader2, Camera, Key, Copy, Check } from '@lucide/svelte';
-
+  import * as Card from '../ui/card/index.js';
+  import ContentPageShell from '../content/ContentPageShell.svelte';
+  import ContentPageHeader from '../content/ContentPageHeader.svelte';
   const i18n = useTranslation();
-
-  const navItems = [
-    { id: 'basic', label: 'account.basicSettings' },
-    { id: 'signin', label: 'account.socialSignIn' },
-    { id: 'password', label: 'account.password' },
-    { id: 'sso', label: 'account.singleSignOn' },
-    { id: 'preferences', label: 'account.preferences' },
-    { id: 'address', label: 'account.address' },
-    { id: 'api', label: 'account.manageApi' },
-    { id: 'delete', label: 'account.deleteAccount' },
-  ];
-
-  let activeSection = $state('basic');
-
-  function scrollTo(id: string) {
-    activeSection = id;
-    if (typeof document !== 'undefined') {
-      document.getElementById(`settings-section-${id}`)?.scrollIntoView({ behavior: 'smooth', block: 'start' });
-    }
-  }
-
-  let displayName = $state('Alex Chen');
-  let company = $state('Nebula Labs');
-  let phone = $state('+86 138 **** 9527');
-  let email = $state('alex@example.com');
-  let availableToHire = $state(true);
-  let profileVisible = $state(true);
-  let socialGithub = $state(true);
-  let socialGoogle = $state(false);
-  let twoFactor = $state(true);
-  let language = $state('en');
-  let timezone = $state('Asia/Shanghai');
-  let currency = $state('CNY');
-  let apiKey = $state('sv_demo_pub_9f3e••••41ab');
-  let copied = $state(false);
-  let saving = $state(false);
-
-  async function handleSave() {
-    saving = true;
-    await new Promise((r) => setTimeout(r, 800));
-    saving = false;
-  }
-
-  async function copyApiKey() {
-    try {
-      await navigator.clipboard.writeText(apiKey);
-      copied = true;
-      setTimeout(() => (copied = false), 2000);
-    } catch {
-      copied = false;
-    }
-  }
+  const sections = [{ id: 'profile', title: i18n.t('account.basicSettings') }, { id: 'signin', title: i18n.t('account.socialSignIn') }, { id: 'preferences', title: i18n.t('account.preferences') }, { id: 'api', title: i18n.t('account.manageApi') }];
+  let active = $state('profile');
+  let visible = $state(true);
+  let available = $state(true);
 </script>
 
-<div class="space-y-6" data-svadmin-content-page="account">
-  <div class="flex items-start justify-between gap-4">
-    <div>
-      <h2 class="text-xl font-semibold text-foreground">{i18n.t('account.settingsSidebar')}</h2>
-      <p class="mt-1 text-sm text-muted-foreground">{i18n.t('account.settingsSidebarDescription')}</p>
-    </div>
-    <Button onclick={handleSave} disabled={saving} size="sm">
-      {#if saving}<Loader2 class="h-4 w-4 animate-spin mr-2" />{/if}
-      {i18n.t('common.save')}
-    </Button>
-  </div>
-
-  <div class="flex flex-col gap-6 lg:flex-row">
-    <!-- Anchor nav -->
-    <nav class="w-full shrink-0 lg:w-52">
-      <div class="flex gap-1 overflow-x-auto lg:sticky lg:top-6 lg:flex-col">
-        {#each navItems as item (item.id)}
-          <button
-            class="whitespace-nowrap rounded-lg px-3 py-2 text-left text-sm transition-colors
-              {activeSection === item.id ? 'bg-primary/10 font-medium text-primary' : 'text-muted-foreground hover:bg-accent hover:text-foreground'}"
-            onclick={() => scrollTo(item.id)}
-          >
-            {i18n.t(item.label)}
-          </button>
-        {/each}
-      </div>
-    </nav>
-
-    <div class="min-w-0 flex-1 space-y-6">
-      <!-- Basic Settings -->
-      <Card.Card class="border-border/60 scroll-mt-6" id="settings-section-basic">
-        <Card.CardHeader>
-          <Card.CardTitle class="text-base">{i18n.t('account.basicSettings')}</Card.CardTitle>
-        </Card.CardHeader>
-        <Card.CardContent class="space-y-4">
-          <div class="flex items-center gap-4">
-            <div class="relative">
-              <div class="flex h-16 w-16 items-center justify-center rounded-full bg-primary/10 text-primary text-xl font-bold">AC</div>
-              <button class="absolute -bottom-1 -right-1 flex h-6 w-6 items-center justify-center rounded-full bg-primary text-primary-foreground shadow-sm">
-                <Camera class="h-3 w-3" />
-              </button>
-            </div>
-            <div>
-              <p class="text-sm font-medium text-foreground">{i18n.t('account.photo')}</p>
-              <p class="text-xs text-muted-foreground">150x150px JPEG, PNG Image</p>
-            </div>
-          </div>
-          <Separator />
-          <div class="grid gap-4 sm:grid-cols-2">
-            <div class="space-y-2">
-              <Label for="sb-name">{i18n.t('profile.name')}</Label>
-              <Input id="sb-name" bind:value={displayName} />
-            </div>
-            <div class="space-y-2">
-              <Label for="sb-company">{i18n.t('profile.company')}</Label>
-              <Input id="sb-company" bind:value={company} />
-            </div>
-            <div class="space-y-2">
-              <Label for="sb-phone">{i18n.t('account.phone')}</Label>
-              <Input id="sb-phone" bind:value={phone} />
-            </div>
-            <div class="space-y-2">
-              <Label for="sb-email">Email</Label>
-              <Input id="sb-email" bind:value={email} type="email" />
-            </div>
-          </div>
-          <Separator />
-          <div class="flex items-center justify-between gap-4">
-            <div class="space-y-1">
-              <Label for="sb-visibility">{i18n.t('account.visibility')}</Label>
-              <p class="text-xs text-muted-foreground">{i18n.t('account.publicProfileCard')}</p>
-            </div>
-            <Switch id="sb-visibility" bind:checked={profileVisible} />
-          </div>
-          <div class="flex items-center justify-between gap-4">
-            <div class="space-y-1">
-              <Label for="sb-availability">{i18n.t('account.availability')}</Label>
-              <p class="text-xs text-muted-foreground">{i18n.t('account.availableToHire')}</p>
-            </div>
-            <Switch id="sb-availability" bind:checked={availableToHire} />
-          </div>
-        </Card.CardContent>
-      </Card.Card>
-
-      <!-- Social Sign in + 2FA -->
-      <Card.Card class="border-border/60 scroll-mt-6" id="settings-section-signin">
-        <Card.CardHeader>
-          <Card.CardTitle class="text-base">{i18n.t('account.socialSignIn')}</Card.CardTitle>
-        </Card.CardHeader>
-        <Card.CardContent class="space-y-4">
-          <div class="flex items-center justify-between gap-4">
-            <div class="space-y-1">
-              <Label for="sb-github">Source Control</Label>
-              <p class="text-xs text-muted-foreground">alexchen</p>
-            </div>
-            <Switch id="sb-github" bind:checked={socialGithub} />
-          </div>
-          <div class="flex items-center justify-between gap-4">
-            <div class="space-y-1">
-              <Label for="sb-google">Identity Cloud</Label>
-              <p class="text-xs text-muted-foreground">alex@example.com</p>
-            </div>
-            <Switch id="sb-google" bind:checked={socialGoogle} />
-          </div>
-          <Separator />
-          <div class="flex items-center justify-between gap-4">
-            <div class="space-y-1">
-              <Label for="sb-2fa">{i18n.t('account.twoFactorAuth')}</Label>
-              <p class="text-xs text-muted-foreground">{i18n.t('security.twoFactorDescription')}</p>
-            </div>
-            <div class="flex items-center gap-2">
-              <Badge variant="secondary" class="text-[10px]">{twoFactor ? i18n.t('security.twoFactorActive') : i18n.t('security.twoFactorInactive')}</Badge>
-              <Switch id="sb-2fa" bind:checked={twoFactor} />
-            </div>
-          </div>
-        </Card.CardContent>
-      </Card.Card>
-
-      <!-- Password -->
-      <Card.Card class="border-border/60 scroll-mt-6" id="settings-section-password">
-        <Card.CardHeader>
-          <Card.CardTitle class="text-base">{i18n.t('account.password')}</Card.CardTitle>
-        </Card.CardHeader>
-        <Card.CardContent>
-          <div class="grid gap-4 sm:grid-cols-3">
-            <div class="space-y-2">
-              <Label for="sb-current-pw">{i18n.t('profile.currentPassword')}</Label>
-              <Input id="sb-current-pw" type="password" />
-            </div>
-            <div class="space-y-2">
-              <Label for="sb-new-pw">{i18n.t('profile.newPassword')}</Label>
-              <Input id="sb-new-pw" type="password" />
-            </div>
-            <div class="space-y-2">
-              <Label for="sb-confirm-pw">{i18n.t('auth.confirmPassword')}</Label>
-              <Input id="sb-confirm-pw" type="password" />
-            </div>
-          </div>
-        </Card.CardContent>
-      </Card.Card>
-
-      <!-- SSO -->
-      <Card.Card class="border-border/60 scroll-mt-6" id="settings-section-sso">
-        <Card.CardHeader>
-          <Card.CardTitle class="text-base">{i18n.t('account.singleSignOn')}</Card.CardTitle>
-        </Card.CardHeader>
-        <Card.CardContent>
-          <div class="grid gap-4 sm:grid-cols-2">
-            <div class="space-y-2">
-              <Label for="sb-client-id">Client ID</Label>
-              <Input id="sb-client-id" placeholder="xxxxxxxx-xxxx-xxxx" />
-            </div>
-            <div class="space-y-2">
-              <Label for="sb-client-secret">Client Secret</Label>
-              <Input id="sb-client-secret" type="password" placeholder="••••••••" />
-            </div>
-          </div>
-        </Card.CardContent>
-      </Card.Card>
-
-      <!-- Preferences -->
-      <Card.Card class="border-border/60 scroll-mt-6" id="settings-section-preferences">
-        <Card.CardHeader>
-          <Card.CardTitle class="text-base">{i18n.t('account.preferences')}</Card.CardTitle>
-        </Card.CardHeader>
-        <Card.CardContent>
-          <div class="grid gap-4 sm:grid-cols-3">
-            <div class="space-y-2">
-              <Label for="sb-language">{i18n.t('account.language')}</Label>
-              <select id="sb-language" bind:value={language} class="flex h-9 w-full rounded-md border border-input bg-background px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-ring">
-                <option value="en">English</option>
-                <option value="zh-CN">中文（简体）</option>
-              </select>
-            </div>
-            <div class="space-y-2">
-              <Label for="sb-timezone">{i18n.t('account.timezone')}</Label>
-              <select id="sb-timezone" bind:value={timezone} class="flex h-9 w-full rounded-md border border-input bg-background px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-ring">
-                <option value="Asia/Shanghai">Asia/Shanghai (GMT+8)</option>
-                <option value="America/Los_Angeles">America/Los_Angeles (GMT-7)</option>
-                <option value="Europe/Berlin">Europe/Berlin (GMT+2)</option>
-              </select>
-            </div>
-            <div class="space-y-2">
-              <Label for="sb-currency">{i18n.t('account.currency')}</Label>
-              <select id="sb-currency" bind:value={currency} class="flex h-9 w-full rounded-md border border-input bg-background px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-ring">
-                <option value="CNY">CNY (¥)</option>
-                <option value="USD">USD ($)</option>
-                <option value="EUR">EUR (€)</option>
-              </select>
-            </div>
-          </div>
-        </Card.CardContent>
-      </Card.Card>
-
-      <!-- Address -->
-      <Card.Card class="border-border/60 scroll-mt-6" id="settings-section-address">
-        <Card.CardHeader>
-          <Card.CardTitle class="text-base">{i18n.t('account.address')}</Card.CardTitle>
-        </Card.CardHeader>
-        <Card.CardContent>
-          <div class="grid gap-4 sm:grid-cols-2">
-            <div class="space-y-2">
-              <Label for="sb-country">{i18n.t('account.country')}</Label>
-              <Input id="sb-country" value="China" />
-            </div>
-            <div class="space-y-2">
-              <Label for="sb-city">{i18n.t('account.city')}</Label>
-              <Input id="sb-city" value="Shanghai" />
-            </div>
-          </div>
-        </Card.CardContent>
-      </Card.Card>
-
-      <!-- Manage API -->
-      <Card.Card class="border-border/60 scroll-mt-6" id="settings-section-api">
-        <Card.CardHeader>
-          <Card.CardTitle class="flex items-center gap-2 text-base">
-            <Key class="h-4 w-4 text-muted-foreground" />{i18n.t('account.manageApi')}
-          </Card.CardTitle>
-        </Card.CardHeader>
-        <Card.CardContent>
-          <div class="flex items-center gap-2">
-            <Input readonly value={apiKey} class="h-9 font-mono text-xs" />
-            <Button size="sm" variant="outline" onclick={copyApiKey}>
-              {#if copied}<Check class="h-4 w-4 text-green-500" />{:else}<Copy class="h-4 w-4" />{/if}
-            </Button>
-            <Button size="sm" variant="ghost">{i18n.t('api.regenerate')}</Button>
-          </div>
-        </Card.CardContent>
-      </Card.Card>
-
-      <!-- Delete Account -->
-      <Card.Card class="border-destructive/30 scroll-mt-6" id="settings-section-delete">
-        <Card.CardHeader>
-          <Card.CardTitle class="text-base text-destructive">{i18n.t('account.deleteAccount')}</Card.CardTitle>
-          <Card.CardDescription>{i18n.t('account.deleteAccountDescription')}</Card.CardDescription>
-        </Card.CardHeader>
-        <Card.CardContent>
-          <div class="flex justify-end">
-            <Button variant="destructive" size="sm">{i18n.t('account.deleteAccount')}</Button>
-          </div>
-        </Card.CardContent>
-      </Card.Card>
-    </div>
-  </div>
-</div>
+<ContentPageShell pageId="account-settings-sidebar" width="wide">
+  <ContentPageHeader title={i18n.t('account.settingsSidebar')} description={i18n.t('account.settingsSidebarDescription')} />
+  <div class="grid gap-6 lg:grid-cols-[12rem_minmax(0,1fr)]"><nav class="flex gap-1 overflow-x-auto lg:flex-col">{#each sections as section (section.id)}<button type="button" class={'whitespace-nowrap rounded-md px-3 py-2 text-left text-sm ' + (active === section.id ? 'bg-muted font-medium text-foreground' : 'text-muted-foreground hover:text-foreground')} onclick={() => active = section.id}>{section.title}</button>{/each}</nav><div class="space-y-4">{#if active === 'profile'}<Card.Card><Card.CardContent class="space-y-4 p-5"><h2 class="text-sm font-semibold text-foreground">{i18n.t('account.basicSettings')}</h2><Input value="Alex Chen" aria-label={i18n.t('profile.name')} /><Input value="Nebula Labs" aria-label="Company" /><div class="flex items-center justify-between border-t border-border pt-4"><span class="text-sm text-foreground">{i18n.t('account.visibility')}</span><Switch bind:checked={visible} /></div><div class="flex items-center justify-between"><span class="text-sm text-foreground">{i18n.t('account.availability')}</span><Switch bind:checked={available} /></div></Card.CardContent></Card.Card>{:else if active === 'signin'}<Card.Card><Card.CardContent class="space-y-4 p-5"><h2 class="text-sm font-semibold text-foreground">{i18n.t('account.socialSignIn')}</h2><p class="text-sm text-muted-foreground">Connect the providers your team trusts for sign in.</p><Button variant="outline">GitHub</Button><Button variant="outline">Google</Button></Card.CardContent></Card.Card>{:else if active === 'preferences'}<Card.Card><Card.CardContent class="space-y-4 p-5"><h2 class="text-sm font-semibold text-foreground">{i18n.t('account.preferences')}</h2><Input value="English" aria-label={i18n.t('account.language')} /><Input value="Asia/Shanghai" aria-label={i18n.t('account.timezone')} /><Input value="CNY" aria-label={i18n.t('account.currency')} /></Card.CardContent></Card.Card>{:else}<Card.Card><Card.CardContent class="space-y-4 p-5"><h2 class="text-sm font-semibold text-foreground">{i18n.t('account.manageApi')}</h2><Input readonly value="sv_demo_pub_9f3e********41ab" aria-label="API key" /><Button variant="outline">{i18n.t('common.copy')}</Button></Card.CardContent></Card.Card>{/if}</div></div>
+</ContentPageShell>

package/dist/components/account/TeamMembersPage.svelte

@@ -1,197 +1,28 @@
 <script lang="ts">
   import { useTranslation } from '@svadmin/core/i18n';
-  import * as Card from '../ui/card/index.js';
+  import { Copy, Link2, Send, UserPlus } from '@lucide/svelte';
   import { Button } from '../ui/button/index.js';
   import { Input } from '../ui/input/index.js';
   import { Label } from '../ui/label/index.js';
-  import { Search, UserPlus, MoreHorizontal, Link2, Copy, Send } from '@lucide/svelte';
-
+  import * as Card from '../ui/card/index.js';
+  import ContentPageShell from '../content/ContentPageShell.svelte';
+  import ContentPageHeader from '../content/ContentPageHeader.svelte';
+  import FilterToolbar from '../content/FilterToolbar.svelte';
+  import MemberList from '../content/MemberList.svelte';
+  import type { MemberSummary } from '../content/MemberList.svelte';
+  import { referenceDemoData } from '../../reference-data.js';
   const i18n = useTranslation();
-
-  interface TeamMember {
-    id: string;
-    name: string;
-    email: string;
-    role: 'Admin' | 'Editor' | 'Viewer';
-    avatar?: string;
-    department: string;
-    status: 'active' | 'invited' | 'inactive';
-    lastActive: string;
-  }
-
-  let searchQuery = $state('');
+  let query = $state('');
   let inviteEmail = $state('');
-  let inviteRole = $state('Viewer');
-  let linkCopied = $state(false);
   let inviteStatus = $state('');
-
-  function focusInvite() {
-    document.getElementById('invite-email')?.focus();
-  }
-
-  function copyInviteLink() {
-    navigator.clipboard?.writeText('https://acme.com/invite/xK7fQ2').catch(() => {});
-    linkCopied = true;
-    setTimeout(() => linkCopied = false, 2000);
-  }
-
-  let members = $state<TeamMember[]>([
-    { id: '1', name: 'Alex Chen', email: 'alex@acme.com', role: 'Admin', department: 'Engineering', status: 'active', lastActive: 'Just now' },
-    { id: '2', name: 'Sarah Kim', email: 'sarah@acme.com', role: 'Editor', department: 'Design', status: 'active', lastActive: '5 min ago' },
-    { id: '3', name: 'Mike Johnson', email: 'mike@acme.com', role: 'Viewer', department: 'Marketing', status: 'invited', lastActive: 'Pending' },
-    { id: '4', name: 'Lisa Wang', email: 'lisa@acme.com', role: 'Editor', department: 'Engineering', status: 'active', lastActive: '1 hour ago' },
-    { id: '5', name: 'Tom Brown', email: 'tom@acme.com', role: 'Viewer', department: 'Sales', status: 'inactive', lastActive: '2 weeks ago' },
-    { id: '6', name: 'Emma Davis', email: 'emma@acme.com', role: 'Admin', department: 'Engineering', status: 'active', lastActive: '10 min ago' },
-    { id: '7', name: 'James Wilson', email: 'james@acme.com', role: 'Editor', department: 'Infrastructure', status: 'active', lastActive: '30 min ago' },
-    { id: '8', name: 'Yuki Tanaka', email: 'yuki@acme.com', role: 'Editor', department: 'Engineering', status: 'invited', lastActive: 'Pending' },
-    { id: '9', name: 'Priya Nair', email: 'priya@acme.com', role: 'Viewer', department: 'Data', status: 'active', lastActive: '2 hours ago' },
-    { id: '10', name: 'Carlos Mendez', email: 'carlos@acme.com', role: 'Editor', department: 'Engineering', status: 'active', lastActive: '1 day ago' },
-    { id: '11', name: 'Hana Sato', email: 'hana@acme.com', role: 'Viewer', department: 'Design', status: 'active', lastActive: '3 hours ago' },
-    { id: '12', name: 'Oscar Lund', email: 'oscar@acme.com', role: 'Viewer', department: 'Infrastructure', status: 'inactive', lastActive: '1 month ago' },
-    { id: '13', name: 'Mia Torres', email: 'mia@acme.com', role: 'Editor', department: 'Marketing', status: 'invited', lastActive: 'Pending' },
-    { id: '14', name: 'Chen Wei', email: 'chen@acme.com', role: 'Admin', department: 'Engineering', status: 'active', lastActive: '15 min ago' },
-  ]);
-
-  function sendInvite() {
-    const email = inviteEmail.trim();
-    if (!email) return;
-    const name = email.split('@')[0].split(/[._-]/).filter(Boolean).map(part => part[0]?.toUpperCase() + part.slice(1)).join(' ') || email;
-    members = [...members, {
-      id: `invite-${Date.now()}`,
-      name,
-      email,
-      role: inviteRole as TeamMember['role'],
-      department: 'Pending assignment',
-      status: 'invited',
-      lastActive: 'Pending',
-    }];
-    inviteStatus = email;
-    inviteEmail = '';
-  }
-
-  const filtered = $derived(
-    searchQuery
-      ? members.filter(m => m.name.toLowerCase().includes(searchQuery.toLowerCase()) || m.email.toLowerCase().includes(searchQuery.toLowerCase()) || m.department.toLowerCase().includes(searchQuery.toLowerCase()))
-      : members
-  );
-
-  const roleColors = {
-    'Admin': 'bg-red-500/10 text-red-600',
-    'Editor': 'bg-blue-500/10 text-blue-600',
-    'Viewer': 'bg-green-500/10 text-green-600',
-  };
-
-  const statusColors = {
-    'active': 'bg-green-500/10 text-green-600',
-    'invited': 'bg-amber-500/10 text-amber-600',
-    'inactive': 'bg-muted text-muted-foreground',
-  };
-
-  const initials = (name: string) => name.split(' ').map(n => n[0]).join('').toUpperCase().slice(0, 2);
-
-  function statusLabel(status: TeamMember['status']) {
-    if (status === 'active') return i18n.t('account.active');
-    if (status === 'invited') return i18n.t('account.invited');
-    return i18n.t('account.inactive');
-  }
+  let members = $state<MemberSummary[]>(referenceDemoData.members.map((member) => ({ ...member, status: member.status === 'active' ? 'success' : member.status === 'invited' ? 'warning' : 'neutral' })));
+  const filtered = $derived(query ? members.filter((member) => `${member.name} ${member.email} ${member.department}`.toLowerCase().includes(query.toLowerCase())) : members);
+  function sendInvite() { const email = inviteEmail.trim(); if (!email) return; members = [...members, { id: `invite-${Date.now()}`, name: email.split('@')[0], email, role: 'Viewer', department: 'Pending assignment', status: 'warning' }]; inviteStatus = email; inviteEmail = ''; }
 </script>
 
-<div class="space-y-6" data-svadmin-content-page="account">
-  <div class="flex items-start justify-between gap-4">
-    <div>
-      <h2 class="text-xl font-semibold text-foreground">{i18n.t('account.teamMembersCount', { count: members.length })}</h2>
-      <p class="mt-1 text-sm text-muted-foreground">{i18n.t('account.teamMembersDescription')}</p>
-    </div>
-    <Button size="sm" onclick={focusInvite}>
-      <UserPlus class="h-4 w-4 mr-1" />{i18n.t('account.inviteMember')}
-    </Button>
-  </div>
-
-  <div class="relative">
-    <Search class="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
-    <Input placeholder={i18n.t('common.search')} bind:value={searchQuery} class="pl-9" />
-  </div>
-
-  <!-- Invite people -->
-  <div class="grid gap-4 lg:grid-cols-2">
-    <Card.Card class="border-border/60">
-      <Card.CardHeader class="pb-3">
-        <Card.CardTitle class="text-base">{i18n.t('account.invitePeople')}</Card.CardTitle>
-        <Card.CardDescription>{i18n.t('account.invitePeopleDescription')}</Card.CardDescription>
-      </Card.CardHeader>
-      <Card.CardContent class="space-y-3">
-        <div class="grid gap-3 sm:grid-cols-[1fr_140px]">
-          <div class="space-y-1.5">
-            <Label for="invite-email">Email</Label>
-            <Input id="invite-email" type="email" placeholder="name@example.com" bind:value={inviteEmail} />
-          </div>
-          <div class="space-y-1.5">
-            <Label for="invite-role">{i18n.t('account.role')}</Label>
-            <select id="invite-role" bind:value={inviteRole} class="flex h-9 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus:outline-none focus:ring-2 focus:ring-ring">
-              <option>Admin</option>
-              <option>Editor</option>
-              <option>Viewer</option>
-            </select>
-          </div>
-        </div>
-        <div class="flex justify-end">
-          <Button size="sm" disabled={!inviteEmail} onclick={sendInvite}>
-            <Send class="h-3.5 w-3.5 mr-1" />{i18n.t('account.sendInvite')}
-          </Button>
-        </div>
-        {#if inviteStatus}
-          <p class="text-xs text-green-600" role="status">{i18n.t('account.invited')}: {inviteStatus}</p>
-        {/if}
-      </Card.CardContent>
-    </Card.Card>
-
-    <Card.Card class="border-border/60">
-      <Card.CardHeader class="pb-3">
-        <Card.CardTitle class="flex items-center gap-2 text-base">
-          <Link2 class="h-4 w-4 text-muted-foreground" />{i18n.t('account.inviteWithLink')}
-        </Card.CardTitle>
-        <Card.CardDescription>{i18n.t('account.inviteLinkHint')}</Card.CardDescription>
-      </Card.CardHeader>
-      <Card.CardContent class="space-y-3">
-        <div class="flex items-center gap-2">
-          <Input readonly value="https://acme.com/invite/xK7fQ2" class="flex-1 font-mono text-xs" />
-          <Button size="sm" variant="outline" onclick={copyInviteLink}>
-            <Copy class="h-3.5 w-3.5 mr-1" />{linkCopied ? '✓' : ''} {i18n.t('account.copyLink')}
-          </Button>
-        </div>
-      </Card.CardContent>
-    </Card.Card>
-  </div>
-
-  <!-- Members grid -->
-  <div class="grid gap-4 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
-    {#each filtered as member (member.id)}
-      <Card.Card class="border-border/60 hover:border-primary/30 transition-colors">
-        <Card.CardContent class="p-4">
-          <div class="flex items-start gap-3">
-            <div class="shrink-0">
-              <div class="flex h-10 w-10 items-center justify-center rounded-full bg-primary/10 text-primary text-sm font-semibold">
-                {initials(member.name)}
-              </div>
-            </div>
-            <div class="flex-1 min-w-0">
-              <div class="flex items-center gap-2">
-                <h4 class="text-sm font-semibold text-foreground truncate">{member.name}</h4>
-              </div>
-              <p class="text-xs text-muted-foreground truncate">{member.email}</p>
-              <div class="mt-2 flex flex-wrap gap-1.5">
-                <span class="rounded-full px-2 py-0.5 text-[10px] font-semibold {roleColors[member.role]}">{member.role}</span>
-                <span class="rounded-full px-2 py-0.5 text-[10px] font-semibold {statusColors[member.status]}">{statusLabel(member.status)}</span>
-              </div>
-              <div class="mt-2 flex items-center justify-between">
-                <span class="text-xs text-muted-foreground">{member.department}</span>
-                <span class="text-xs text-muted-foreground">{member.lastActive}</span>
-              </div>
-            </div>
-            <Button variant="ghost" size="icon-sm" aria-label={member.name} title={member.name}><MoreHorizontal class="h-4 w-4" /></Button>
-          </div>
-        </Card.CardContent>
-      </Card.Card>
-    {/each}
-  </div>
-</div>
+<ContentPageShell pageId="account-team-members" width="wide">
+  <div class="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between"><ContentPageHeader title={i18n.t("account.teamMembers")} description={i18n.t("account.teamMembersDescription")} /><Button size="sm" onclick={() => document.getElementById("invite-email")?.focus()}><UserPlus class="size-3.5" />{i18n.t("account.inviteMember")}</Button></div>
+  <FilterToolbar bind:query placeholder={i18n.t('common.search')} />
+  <div class="grid gap-4 lg:grid-cols-2"><Card.Card><Card.CardContent class="space-y-3 p-5"><div><h2 class="text-sm font-semibold text-foreground">{i18n.t('account.invitePeople')}</h2><p class="mt-1 text-sm text-muted-foreground">{i18n.t('account.invitePeopleDescription')}</p></div><div class="flex flex-col gap-2 sm:flex-row"><div class="min-w-0 flex-1 space-y-2"><Label for="invite-email">Email</Label><Input id="invite-email" bind:value={inviteEmail} type="email" placeholder="name@example.com" /></div><Button class="self-end" size="sm" disabled={!inviteEmail} onclick={sendInvite}><Send class="size-3.5" />{i18n.t('account.sendInvite')}</Button></div>{#if inviteStatus}<p class="text-xs text-success" role="status">{i18n.t('account.invited')}: {inviteStatus}</p>{/if}</Card.CardContent></Card.Card><Card.Card><Card.CardContent class="space-y-3 p-5"><div class="flex items-center gap-2"><Link2 class="size-4 text-muted-foreground" /><h2 class="text-sm font-semibold text-foreground">{i18n.t('account.inviteWithLink')}</h2></div><p class="text-sm text-muted-foreground">{i18n.t('account.inviteLinkHint')}</p><div class="flex gap-2"><Input readonly value="https://acme.com/invite/xK7fQ2" class="font-mono text-xs" /><Button variant="outline" size="sm"><Copy class="size-3.5" />{i18n.t('account.copyLink')}</Button></div></Card.CardContent></Card.Card></div>
+  <MemberList members={filtered} />
+</ContentPageShell>