@svadmin/ui 0.42.3 → 0.44.0

package/dist/components/network/TeamCrewTablePage.svelte

@@ -1,189 +1,37 @@
 <script lang="ts">
-  import { captureAdminContext } from '@svadmin/core';
   import { useTranslation } from '@svadmin/core/i18n';
-  import * as Card from '../ui/card/index.js';
+  import { Download, UserPlus } from '@lucide/svelte';
   import { Button } from '../ui/button/index.js';
-  import { Input } from '../ui/input/index.js';
-  import { Search, Download, UserPlus, MoreHorizontal, CheckCircle2, Clock, XCircle } from '@lucide/svelte';
-
+  import ContentPageShell from '../content/ContentPageShell.svelte';
+  import ContentPageHeader from '../content/ContentPageHeader.svelte';
+  import FilterToolbar from '../content/FilterToolbar.svelte';
+  import NetworkTable from '../content/NetworkTable.svelte';
+  import type { NetworkColumn } from '../content/NetworkTable.types.js';
+  import { Avatar } from '../ui/avatar/index.js';
+  import { Badge } from '../ui/badge/index.js';
+
+  interface CrewMember { id: string; name: string; email: string; role: string; department: string; status: 'active' | 'away' | 'offline'; projects: number; }
   const i18n = useTranslation();
-  const adminContext = captureAdminContext();
-
-  interface CrewMember {
-    id: string;
-    name: string;
-    email: string;
-    role: string;
-    department: string;
-    status: 'active' | 'away' | 'offline';
-    avatar?: string;
-    joinedAt: string;
-    projects: number;
-  }
-
-  let searchQuery = $state('');
-
-  const crew: CrewMember[] = [
-    { id: '1', name: 'Alex Chen', email: 'alex@acme.com', role: 'Tech Lead', department: 'Engineering', status: 'active', joinedAt: '2022-03-15', projects: 12 },
-    { id: '2', name: 'Sarah Kim', email: 'sarah@acme.com', role: 'Senior Designer', department: 'Design', status: 'active', joinedAt: '2022-06-22', projects: 8 },
-    { id: '3', name: 'Mike Johnson', email: 'mike@acme.com', role: 'Product Manager', department: 'Product', status: 'away', joinedAt: '2023-01-10', projects: 6 },
-    { id: '4', name: 'Lisa Wang', email: 'lisa@acme.com', role: 'Backend Engineer', department: 'Engineering', status: 'active', joinedAt: '2023-04-05', projects: 10 },
-    { id: '5', name: 'Tom Brown', email: 'tom@acme.com', role: 'QA Engineer', department: 'Engineering', status: 'offline', joinedAt: '2022-11-20', projects: 4 },
-    { id: '6', name: 'Emma Davis', email: 'emma@acme.com', role: 'Engineering Manager', department: 'Engineering', status: 'active', joinedAt: '2022-02-14', projects: 15 },
-    { id: '7', name: 'James Wilson', email: 'james@acme.com', role: 'DevOps Engineer', department: 'Infrastructure', status: 'active', joinedAt: '2023-08-01', projects: 7 },
-    { id: '8', name: 'Yuki Tanaka', email: 'yuki@acme.com', role: 'Frontend Engineer', department: 'Engineering', status: 'away', joinedAt: '2023-05-12', projects: 9 },
-    { id: '9', name: 'Priya Nair', email: 'priya@acme.com', role: 'Data Scientist', department: 'Data', status: 'active', joinedAt: '2023-09-18', projects: 5 },
-    { id: '10', name: 'Carlos Mendez', email: 'carlos@acme.com', role: 'Mobile Engineer', department: 'Engineering', status: 'active', joinedAt: '2022-07-25', projects: 11 },
-    { id: '11', name: 'Hana Sato', email: 'hana@acme.com', role: 'UX Researcher', department: 'Design', status: 'away', joinedAt: '2024-01-15', projects: 3 },
-    { id: '12', name: 'Oscar Lund', email: 'oscar@acme.com', role: 'Security Engineer', department: 'Infrastructure', status: 'active', joinedAt: '2023-03-30', projects: 6 },
-    { id: '13', name: 'Mia Torres', email: 'mia@acme.com', role: 'Content Strategist', department: 'Marketing', status: 'offline', joinedAt: '2024-02-11', projects: 2 },
-    { id: '14', name: 'Chen Wei', email: 'chen@acme.com', role: 'Platform Engineer', department: 'Engineering', status: 'active', joinedAt: '2022-10-08', projects: 13 },
-    { id: '15', name: 'Ava Novak', email: 'ava@acme.com', role: 'Product Designer', department: 'Design', status: 'active', joinedAt: '2023-06-19', projects: 7 },
-    { id: '16', name: 'Liam Ortiz', email: 'liam@acme.com', role: 'QA Automation', department: 'Engineering', status: 'away', joinedAt: '2024-04-02', projects: 4 },
-    { id: '17', name: 'Sofia Petrova', email: 'sofia@acme.com', role: 'Data Engineer', department: 'Data', status: 'active', joinedAt: '2023-11-27', projects: 8 },
-    { id: '18', name: 'David Kim', email: 'david@acme.com', role: 'Solutions Architect', department: 'Infrastructure', status: 'active', joinedAt: '2022-05-16', projects: 10 },
-    { id: '19', name: 'Elena Marsh', email: 'elena@acme.com', role: 'Engineering Manager', department: 'Engineering', status: 'active', joinedAt: '2021-12-06', projects: 14 },
-    { id: '20', name: 'Noah Fischer', email: 'noah@acme.com', role: 'Support Lead', department: 'Support', status: 'offline', joinedAt: '2024-05-20', projects: 1 },
+  let query = $state('');
+  const rows: CrewMember[] = [
+    { id: '1', name: 'Alex Chen', email: 'alex@acme.com', role: 'Tech Lead', department: 'Engineering', status: 'active', projects: 12 },
+    { id: '2', name: 'Sarah Kim', email: 'sarah@acme.com', role: 'Senior Designer', department: 'Design', status: 'active', projects: 8 },
+    { id: '3', name: 'Mike Johnson', email: 'mike@acme.com', role: 'Product Manager', department: 'Product', status: 'away', projects: 6 },
+    { id: '4', name: 'Lisa Wang', email: 'lisa@acme.com', role: 'Backend Engineer', department: 'Engineering', status: 'active', projects: 10 },
+    { id: '5', name: 'Tom Brown', email: 'tom@acme.com', role: 'QA Engineer', department: 'Engineering', status: 'offline', projects: 4 },
+    { id: '6', name: 'Emma Davis', email: 'emma@acme.com', role: 'Engineering Manager', department: 'Engineering', status: 'active', projects: 15 },
   ];
-
-  const totalCrew = 34;
-
-  const filtered = $derived(
-    searchQuery
-      ? crew.filter(m => m.name.toLowerCase().includes(searchQuery.toLowerCase()) || m.email.toLowerCase().includes(searchQuery.toLowerCase()) || m.department.toLowerCase().includes(searchQuery.toLowerCase()))
-      : crew
-  );
-
-  const statusConfig = {
-    'active': { icon: CheckCircle2, color: 'text-green-500', dot: 'bg-green-500', label: i18n.t('account.active') },
-    'away': { icon: Clock, color: 'text-amber-500', dot: 'bg-amber-500', label: i18n.t('account.invited') },
-    'offline': { icon: XCircle, color: 'text-muted-foreground', dot: 'bg-muted-foreground', label: i18n.t('account.inactive') },
-  };
-
-  const initials = (name: string) => name.split(' ').map(n => n[0]).join('').toUpperCase().slice(0, 2);
-
-  function exportCrew() {
-    const rows = [
-      ['Name', 'Email', 'Role', 'Department', 'Status', 'Projects', 'Joined'],
-      ...filtered.map(member => [member.name, member.email, member.role, member.department, member.status, String(member.projects), member.joinedAt]),
-    ];
-    const csv = rows.map(row => row.map(value => `"${value.replaceAll('"', '""')}"`).join(',')).join('\n');
-    const url = URL.createObjectURL(new Blob([csv], { type: 'text/csv;charset=utf-8' }));
-    const link = document.createElement('a');
-    link.href = url;
-    link.download = 'team-crew.csv';
-    link.click();
-    URL.revokeObjectURL(url);
-  }
+  const filtered = $derived(query ? rows.filter((row) => `${row.name} ${row.email} ${row.department}`.toLowerCase().includes(query.toLowerCase())) : rows);
+  const columns: NetworkColumn<CrewMember>[] = [{ key: 'name', label: i18n.t('account.member') }, { key: 'role', label: i18n.t('account.role') }, { key: 'department', label: i18n.t('account.department') }, { key: 'status', label: i18n.t('account.status') }, { key: 'projects', label: i18n.t('publicProfile.projects') }];
+  const initials = (name: string) => name.split(' ').map((part) => part[0]).join('').slice(0, 2).toUpperCase();
 </script>
 
-<div class="space-y-6" data-svadmin-content-page="network">
-  <div class="flex items-start justify-between gap-4">
-    <div>
-      <h2 class="text-xl font-semibold text-foreground">{i18n.t('network.teamCrew')}</h2>
-      <p class="mt-1 text-sm text-muted-foreground">{i18n.t('network.teamCrewDescription')}</p>
-    </div>
-    <div class="flex gap-2">
-      <Button variant="outline" size="sm" onclick={exportCrew}>
-        <Download class="h-3.5 w-3.5 mr-1" />{i18n.t('common.export')}
-      </Button>
-      <Button size="sm" onclick={() => adminContext.navigate('/account/members/team-members')}>
-        <UserPlus class="h-3.5 w-3.5 mr-1" />{i18n.t('account.inviteMember')}
-      </Button>
-    </div>
-  </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>
-
-  <!-- Table -->
-  <Card.Card class="border-border/60">
-    <Card.CardContent class="p-0">
-      <div class="hidden overflow-x-auto lg:block">
-        <table class="w-full">
-          <thead>
-            <tr class="border-b bg-muted/30">
-              <th class="px-4 py-3 text-left text-xs font-semibold text-muted-foreground">{i18n.t('account.member')}</th>
-              <th class="px-4 py-3 text-left text-xs font-semibold text-muted-foreground">{i18n.t('account.role')}</th>
-              <th class="px-4 py-3 text-left text-xs font-semibold text-muted-foreground">{i18n.t('account.department')}</th>
-              <th class="px-4 py-3 text-left text-xs font-semibold text-muted-foreground">{i18n.t('account.status')}</th>
-              <th class="px-4 py-3 text-left text-xs font-semibold text-muted-foreground">{i18n.t('publicProfile.projects')}</th>
-              <th class="px-4 py-3 text-left text-xs font-semibold text-muted-foreground">{i18n.t('account.joined')}</th>
-              <th class="px-4 py-3 w-12"></th>
-            </tr>
-          </thead>
-          <tbody class="divide-y">
-            {#each filtered as member (member.id)}
-              {@const sc = statusConfig[member.status]}
-              <tr class="hover:bg-accent/30 transition-colors">
-                <td class="px-4 py-3">
-                  <div class="flex items-center gap-3">
-                    <div class="relative shrink-0">
-                      <div class="flex h-8 w-8 items-center justify-center rounded-full bg-primary/10 text-primary text-xs font-semibold">
-                        {initials(member.name)}
-                      </div>
-                      <span class="absolute -bottom-0.5 -right-0.5 h-2.5 w-2.5 rounded-full {sc.dot} ring-2 ring-card"></span>
-                    </div>
-                    <div class="min-w-0">
-                      <p class="text-sm font-medium text-foreground truncate">{member.name}</p>
-                      <p class="text-xs text-muted-foreground truncate">{member.email}</p>
-                    </div>
-                  </div>
-                </td>
-                <td class="px-4 py-3 text-sm text-foreground">{member.role}</td>
-                <td class="px-4 py-3 text-sm text-muted-foreground">{member.department}</td>
-                <td class="px-4 py-3">
-                  <span class="flex items-center gap-1 text-xs {sc.color}">
-                    <sc.icon class="h-3 w-3" />{sc.label}
-                  </span>
-                </td>
-                <td class="px-4 py-3 text-sm text-foreground">{member.projects}</td>
-                <td class="px-4 py-3 text-sm text-muted-foreground whitespace-nowrap">{member.joinedAt}</td>
-                <td class="px-4 py-3">
-                  <Button variant="ghost" size="icon-sm" aria-label={member.name} title={member.name}><MoreHorizontal class="h-4 w-4" /></Button>
-                </td>
-              </tr>
-            {/each}
-          </tbody>
-        </table>
-      </div>
-      <div class="divide-y lg:hidden">
-        {#each filtered as member (member.id)}
-          {@const sc = statusConfig[member.status]}
-          <div class="space-y-3 p-4">
-            <div class="flex items-start justify-between gap-3">
-              <div class="flex min-w-0 items-center gap-3">
-                <div class="relative shrink-0">
-                  <div class="flex h-9 w-9 items-center justify-center rounded-full bg-primary/10 text-sm font-semibold text-primary">
-                    {initials(member.name)}
-                  </div>
-                  <span class="absolute -bottom-0.5 -right-0.5 h-2.5 w-2.5 rounded-full {sc.dot} ring-2 ring-card"></span>
-                </div>
-                <div class="min-w-0">
-                  <p class="truncate text-sm font-medium text-foreground">{member.name}</p>
-                  <p class="truncate text-xs text-muted-foreground">{member.email}</p>
-                </div>
-              </div>
-              <Button variant="ghost" size="icon-sm" class="shrink-0" aria-label={member.name} title={member.name}><MoreHorizontal class="h-4 w-4" /></Button>
-            </div>
-            <div class="grid gap-2 text-xs text-muted-foreground sm:grid-cols-2">
-              <div class="min-w-0">
-                <span class="block font-medium text-foreground">{member.role}</span>
-                <span class="truncate">{member.department}</span>
-              </div>
-              <div class="flex items-center gap-1 {sc.color}">
-                <sc.icon class="h-3 w-3" />{sc.label}
-              </div>
-              <div>{i18n.t('publicProfile.projects')}: <span class="font-medium text-foreground">{member.projects}</span></div>
-              <div>{i18n.t('account.joined')}: <span class="font-medium text-foreground">{member.joinedAt}</span></div>
-            </div>
-          </div>
-        {/each}
-      </div>
-    </Card.CardContent>
-  </Card.Card>
+{#snippet row(item: CrewMember)}
+  <tr data-svadmin-table-row><td class="px-4 py-3"><div class="flex items-center gap-3"><Avatar fallback={initials(item.name)} alt={item.name} size="sm" /><div><p class="text-sm font-medium text-foreground">{item.name}</p><p class="text-xs text-muted-foreground">{item.email}</p></div></div></td><td class="px-4 py-3 text-sm">{item.role}</td><td class="px-4 py-3 text-sm text-muted-foreground">{item.department}</td><td class="px-4 py-3"><Badge variant="outline">{item.status}</Badge></td><td class="px-4 py-3 text-sm">{item.projects}</td></tr>
+{/snippet}
 
-  <p class="text-sm text-muted-foreground">{i18n.t('network.showingUsersOf', { shown: filtered.length, total: totalCrew })}</p>
-</div>
+<ContentPageShell pageId="network-team-crew" width="wide">
+  <div class="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between"><ContentPageHeader title={i18n.t('network.teamCrew')} description={i18n.t('network.teamCrewDescription')} /><div class="flex flex-wrap gap-2"><Button variant="outline" size="sm"><Download class="size-3.5" />{i18n.t('common.export')}</Button><Button size="sm"><UserPlus class="size-3.5" />{i18n.t('account.inviteMember')}</Button></div></div>
+  <FilterToolbar bind:query placeholder={i18n.t('common.search')} />
+  <NetworkTable rows={filtered} {columns} {row} />
+</ContentPageShell>

package/dist/components/network/UserCardsNFTPage.svelte

@@ -1,146 +1,33 @@
 <script lang="ts">
   import { useTranslation } from '@svadmin/core/i18n';
-  import * as Card from '../ui/card/index.js';
+  import { Check, Plus } from '@lucide/svelte';
   import { Button } from '../ui/button/index.js';
   import { Badge } from '../ui/badge/index.js';
-  import { Input } from '../ui/input/index.js';
-  import { Search, ExternalLink, Check, Plus } from '@lucide/svelte';
-  import nftCover01 from '../../assets/nft/nft-cover-01.jpg';
-  import nftCover02 from '../../assets/nft/nft-cover-02.jpg';
-  import nftCover03 from '../../assets/nft/nft-cover-03.jpg';
-  import nftCover04 from '../../assets/nft/nft-cover-04.jpg';
-  import nftCover05 from '../../assets/nft/nft-cover-05.jpg';
-  import nftCover06 from '../../assets/nft/nft-cover-06.jpg';
-  import nftCover07 from '../../assets/nft/nft-cover-07.jpg';
-  import nftCover08 from '../../assets/nft/nft-cover-08.jpg';
-  import nftCover09 from '../../assets/nft/nft-cover-09.jpg';
+  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 DataState from '../content/DataState.svelte';
+  import type { NetworkUser } from '../content/NetworkUserCard.svelte';
 
   const i18n = useTranslation();
-
-  interface NFTUser {
-    id: string;
-    name: string;
-    username: string;
-    artwork: string;
-    bio: string;
-    collectionCount: number;
-    floorPrice: string;
-    volume: string;
-    verified: boolean;
-    tags: string[];
-  }
-
-  let searchQuery = $state('');
-
-  const users: NFTUser[] = [
-    { id: '1', name: 'CryptoArt Studio', username: '@cryptoart', artwork: nftCover01, bio: 'Digital art collection featuring generative abstracts', collectionCount: 42, floorPrice: '0.5 ETH', volume: '128.3 ETH', verified: true, tags: ['Art', 'Generative'] },
-    { id: '2', name: 'PixelPunk Collective', username: '@pixelpunk', artwork: nftCover02, bio: 'On-chain pixel art characters with unique traits', collectionCount: 18, floorPrice: '1.2 ETH', volume: '342.7 ETH', verified: true, tags: ['PFP', 'Pixel'] },
-    { id: '3', name: 'MetaVerse Builders', username: '@metabuild', artwork: nftCover03, bio: '3D architectural models for virtual worlds', collectionCount: 7, floorPrice: '0.8 ETH', volume: '56.1 ETH', verified: false, tags: ['3D', 'Virtual'] },
-    { id: '4', name: 'SoundWave NFT', username: '@soundwave', artwork: nftCover04, bio: 'Music-backed NFTs with on-chain audio', collectionCount: 23, floorPrice: '0.3 ETH', volume: '89.4 ETH', verified: true, tags: ['Music', 'Audio'] },
-    { id: '5', name: 'GameAssets DAO', username: '@gameassets', artwork: nftCover05, bio: 'In-game items and collectibles for Web3 gaming', collectionCount: 156, floorPrice: '0.05 ETH', volume: '412.8 ETH', verified: true, tags: ['Gaming', 'Items'] },
-    { id: '6', name: 'PhotoVerse', username: '@photoverse', artwork: nftCover06, bio: 'Curated photography NFTs from world artists', collectionCount: 31, floorPrice: '0.15 ETH', volume: '67.2 ETH', verified: false, tags: ['Photo', 'Curated'] },
-    { id: '7', name: 'CryptoKicks', username: '@cryptokicks', artwork: nftCover07, bio: 'Limited-edition digital sneakers and wearables', collectionCount: 64, floorPrice: '0.4 ETH', volume: '156.9 ETH', verified: true, tags: ['Fashion', 'Wearables'] },
-    { id: '8', name: 'ChainChronicles', username: '@chainchron', artwork: nftCover08, bio: 'Story-driven collectible cards with on-chain lore', collectionCount: 88, floorPrice: '0.25 ETH', volume: '203.4 ETH', verified: false, tags: ['Cards', 'Story'] },
-    { id: '9', name: 'AIArtifacts', username: '@aiartifacts', artwork: nftCover09, bio: 'AI-generated sculptures minted as unique tokens', collectionCount: 12, floorPrice: '2.1 ETH', volume: '512.6 ETH', verified: true, tags: ['AI', '3D'] },
+  type NftUser = NetworkUser & { tags: string[]; collectionCount: number; floorPrice: string; volume: string; verified: boolean };
+  let query = $state('');
+  let connected = $state<string[]>([]);
+  const users: NftUser[] = [
+    { id: '1', name: 'CryptoArt Studio', handle: '@cryptoart', role: 'Generative art', summary: 'Digital art collection featuring generative abstracts', tags: ['Art', 'Generative'], collectionCount: 42, floorPrice: '0.5 ETH', volume: '128.3 ETH', verified: true },
+    { id: '2', name: 'PixelPunk Collective', handle: '@pixelpunk', role: 'On-chain studio', summary: 'Pixel art characters with unique traits', tags: ['PFP', 'Pixel'], collectionCount: 18, floorPrice: '1.2 ETH', volume: '342.7 ETH', verified: true },
+    { id: '3', name: 'MetaVerse Builders', handle: '@metabuild', role: '3D architecture', summary: 'Architectural models for virtual worlds', tags: ['3D', 'Virtual'], collectionCount: 7, floorPrice: '0.8 ETH', volume: '56.1 ETH', verified: false },
+    { id: '4', name: 'SoundWave NFT', handle: '@soundwave', role: 'Music studio', summary: 'Music-backed NFTs with on-chain audio', tags: ['Music', 'Audio'], collectionCount: 23, floorPrice: '0.3 ETH', volume: '89.4 ETH', verified: true },
+    { id: '5', name: 'GameAssets DAO', handle: '@gameassets', role: 'Gaming collective', summary: 'In-game items and collectibles for Web3 gaming', tags: ['Gaming', 'Items'], collectionCount: 156, floorPrice: '0.05 ETH', volume: '412.8 ETH', verified: true },
+    { id: '6', name: 'PhotoVerse', handle: '@photoverse', role: 'Photography', summary: 'Curated photography from world artists', tags: ['Photo', 'Curated'], collectionCount: 31, floorPrice: '0.15 ETH', volume: '67.2 ETH', verified: false },
   ];
-
-  const filtered = $derived(
-    searchQuery
-      ? users.filter(u => u.name.toLowerCase().includes(searchQuery.toLowerCase()) || u.username.toLowerCase().includes(searchQuery.toLowerCase()) || u.tags.some(tag => tag.toLowerCase().includes(searchQuery.toLowerCase())))
-      : users
-  );
-
-  let connectedIds = $state<string[]>([]);
-
-  function toggleConnect(id: string) {
-    connectedIds = connectedIds.includes(id)
-      ? connectedIds.filter(connectedId => connectedId !== id)
-      : [...connectedIds, id];
-  }
-
-  function isConnected(id: string): boolean {
-    return connectedIds.includes(id);
-  }
+  const filtered = $derived(query ? users.filter((user) => `${user.name} ${user.handle} ${user.tags.join(' ')}`.toLowerCase().includes(query.toLowerCase())) : users);
+  function toggle(id: string) { connected = connected.includes(id) ? connected.filter((item) => item !== id) : [...connected, id]; }
 </script>
 
-<div class="space-y-6" data-svadmin-content-page="network">
-  <div>
-    <h2 class="text-xl font-semibold text-foreground">{i18n.t('network.userCards')}</h2>
-    <p class="mt-1 text-sm text-muted-foreground">{i18n.t('network.userCardsDescription')}</p>
-  </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>
-
-  <p class="text-sm font-medium text-muted-foreground">{i18n.t('network.showingUsers', { count: filtered.length })}</p>
-
-  <div class="grid gap-4 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
-    {#each filtered as user (user.id)}
-      <Card.Card class="group overflow-hidden border-border/60 hover:border-primary/30 transition-colors">
-        <div class="h-28 overflow-hidden bg-muted">
-          <img src={user.artwork} alt="" class="h-full w-full object-cover transition-transform duration-300 group-hover:scale-[1.03]" />
-        </div>
-        <Card.CardContent class="relative px-4 pb-4">
-          <div class="-mt-8 mb-2 flex items-end gap-3">
-            <div class="ring-3 ring-card rounded-xl overflow-hidden shrink-0">
-              <img src={user.artwork} alt="" class="h-14 w-14 object-cover" />
-            </div>
-            <div class="flex-1 min-w-0 pb-0.5">
-              <div class="flex items-center gap-1.5">
-                <h4 class="text-sm font-semibold text-foreground truncate">{user.name}</h4>
-                {#if user.verified}
-                  <Check class="h-3.5 w-3.5 text-blue-500" />
-                {/if}
-              </div>
-              <p class="text-xs text-muted-foreground">{user.username}</p>
-            </div>
-          </div>
-
-          <p class="text-xs text-muted-foreground line-clamp-2 mb-3">{user.bio}</p>
-
-          <div class="flex flex-wrap gap-1 mb-3">
-            {#each user.tags as tag (tag)}
-              <Badge variant="outline" class="text-[10px]">{tag}</Badge>
-            {/each}
-          </div>
-
-          <!-- NFT stats -->
-          <div class="grid grid-cols-3 gap-2 border-t pt-3">
-            <div class="text-center">
-              <div class="text-sm font-semibold text-foreground">{user.collectionCount}</div>
-              <div class="text-[10px] text-muted-foreground">{i18n.t('network.nftCollection')}</div>
-            </div>
-            <div class="text-center">
-              <div class="text-sm font-semibold text-foreground">{user.floorPrice}</div>
-              <div class="text-[10px] text-muted-foreground">{i18n.t('network.floorPrice')}</div>
-            </div>
-            <div class="text-center">
-              <div class="text-xs font-semibold text-foreground">{user.volume}</div>
-              <div class="text-[10px] text-muted-foreground">{i18n.t('network.volume')}</div>
-            </div>
-          </div>
-
-          <div class="mt-3 flex gap-2">
-            <Button
-              size="sm"
-              variant={isConnected(user.id) ? 'outline' : 'default'}
-              class="flex-1"
-              onclick={() => toggleConnect(user.id)}
-            >
-              {#if isConnected(user.id)}
-                <Check class="h-3.5 w-3.5 mr-1" />{i18n.t('network.connected')}
-              {:else}
-                <Plus class="h-3.5 w-3.5 mr-1" />{i18n.t('network.connect')}
-              {/if}
-            </Button>
-            <Button size="sm" variant="ghost" aria-label={i18n.t('common.detail')} title={i18n.t('common.detail')}>
-              <ExternalLink class="h-3.5 w-3.5" />
-            </Button>
-          </div>
-        </Card.CardContent>
-      </Card.Card>
-    {/each}
-  </div>
-</div>
+<ContentPageShell pageId="network-user-cards" width="wide">
+  <ContentPageHeader title={i18n.t('network.userCards')} description={i18n.t('network.userCardsDescription')} />
+  <FilterToolbar bind:query placeholder={i18n.t('common.search')} />
+  {#if filtered.length === 0}<DataState state="empty" title={i18n.t('network.userCards')} />{:else}<div class="grid gap-4 md:grid-cols-2 xl:grid-cols-3">{#each filtered as user (user.id)}<Card.Card><Card.CardContent class="space-y-4 p-4"><div class="flex items-start gap-3"><span class="flex size-10 items-center justify-center rounded-md bg-muted text-sm font-semibold text-muted-foreground">{user.name.slice(0, 2).toUpperCase()}</span><div class="min-w-0 flex-1"><div class="flex items-center gap-1.5"><h2 class="truncate text-sm font-semibold text-foreground">{user.name}</h2>{#if user.verified}<Check class="size-3.5 text-primary" />{/if}</div><p class="text-xs text-muted-foreground">{user.handle}</p></div></div><p class="text-sm text-muted-foreground">{user.summary}</p><div class="flex flex-wrap gap-1.5">{#each user.tags as tag (tag)}<Badge variant="outline">{tag}</Badge>{/each}</div><div class="grid grid-cols-3 gap-2 border-t border-border pt-3 text-center"><div><p class="text-sm font-semibold text-foreground">{user.collectionCount}</p><p class="text-xs text-muted-foreground">{i18n.t('network.nftCollection')}</p></div><div><p class="text-sm font-semibold text-foreground">{user.floorPrice}</p><p class="text-xs text-muted-foreground">{i18n.t('network.floorPrice')}</p></div><div><p class="text-sm font-semibold text-foreground">{user.volume}</p><p class="text-xs text-muted-foreground">{i18n.t('network.volume')}</p></div></div><Button size="sm" variant={connected.includes(user.id) ? 'outline' : 'default'} class="w-full" onclick={() => toggle(user.id)}>{#if connected.includes(user.id)}<Check class="size-3.5" />{i18n.t('network.connected')}{:else}<Plus class="size-3.5" />{i18n.t('network.connect')}{/if}</Button></Card.CardContent></Card.Card>{/each}</div>{/if}
+</ContentPageShell>

package/dist/components/profile/ActivityTimeline.svelte

@@ -1,101 +1,27 @@
 <script lang="ts">
   import { useTranslation } from '@svadmin/core/i18n';
-  import * as Card from '../ui/card/index.js';
+  import { MessageSquare, Plus, Star, UserPlus } from '@lucide/svelte';
   import { Avatar } from '../ui/avatar/index.js';
-  import { MessageSquare, Plus, UserPlus, Star } from '@lucide/svelte';
+  import { Button } from '../ui/button/index.js';
+  import { DataState, SectionHeader } from '../content/index.js';
+  import * as Card from '../ui/card/index.js';
   import type { Component } from 'svelte';
 
-  const i18n = useTranslation();
-
-  interface ActivityItem {
-    id: string;
-    type: 'posted' | 'commented' | 'joined' | 'created' | 'starred';
-    user: string;
-    avatar?: string;
-    content?: string;
-    target?: string;
-    timestamp: string;
-  }
-
-  interface Props {
-    activities?: ActivityItem[];
-    showAutoRefresh?: boolean;
-  }
-
+  interface ActivityItem { id: string; type: 'posted' | 'commented' | 'joined' | 'created' | 'starred'; user: string; avatar?: string; content?: string; target?: string; timestamp: string; }
+  interface Props { activities?: ActivityItem[]; showAutoRefresh?: boolean; }
   let { activities = [], showAutoRefresh = true }: Props = $props();
-
   let autoRefresh = $state(false);
-
-  const typeConfig: Record<string, { icon: Component; color: string; action: string }> = {
-    'posted': { icon: MessageSquare, color: 'bg-blue-500/10 text-blue-500', action: i18n.t('publicProfile.activityPosted') },
-    'commented': { icon: MessageSquare, color: 'bg-green-500/10 text-green-500', action: i18n.t('publicProfile.activityCommented') },
-    'joined': { icon: UserPlus, color: 'bg-purple-500/10 text-purple-500', action: i18n.t('publicProfile.activityJoined') },
-    'created': { icon: Plus, color: 'bg-amber-500/10 text-amber-500', action: i18n.t('publicProfile.activityCreated') },
-    'starred': { icon: Star, color: 'bg-yellow-500/10 text-yellow-500', action: i18n.t('publicProfile.activityCreated') },
+  const i18n = useTranslation();
+  const config: Record<string, { icon: Component; tone: string; action: string }> = {
+    posted: { icon: MessageSquare, tone: 'bg-primary/10 text-primary', action: i18n.t('publicProfile.activityPosted') },
+    commented: { icon: MessageSquare, tone: 'bg-success/10 text-success', action: i18n.t('publicProfile.activityCommented') },
+    joined: { icon: UserPlus, tone: 'bg-muted text-muted-foreground', action: i18n.t('publicProfile.activityJoined') },
+    created: { icon: Plus, tone: 'bg-warning/10 text-warning-foreground', action: i18n.t('publicProfile.activityCreated') },
+    starred: { icon: Star, tone: 'bg-primary/10 text-primary', action: i18n.t('publicProfile.activityCreated') },
   };
 </script>
 
-<div class="space-y-4">
-  <div class="flex items-center justify-between gap-3">
-    <h3 class="text-lg font-semibold text-foreground">{i18n.t('publicProfile.activity')}</h3>
-    {#if showAutoRefresh}
-      <div class="flex items-center gap-2 text-xs text-muted-foreground">
-        <span>{i18n.t('publicProfile.autoRefresh')}:</span>
-        <div class="flex rounded-md border border-border/60 p-0.5">
-          <button
-            type="button"
-            class="rounded px-2 py-0.5 text-xs font-medium transition-colors {autoRefresh ? 'bg-primary text-primary-foreground' : 'text-muted-foreground hover:text-foreground'}"
-            onclick={() => autoRefresh = true}
-          >{i18n.t('common.on')}</button>
-          <button
-            type="button"
-            class="rounded px-2 py-0.5 text-xs font-medium transition-colors {autoRefresh ? 'text-muted-foreground hover:text-foreground' : 'bg-primary text-primary-foreground'}"
-            onclick={() => autoRefresh = false}
-          >{i18n.t('common.off')}</button>
-        </div>
-      </div>
-    {/if}
-  </div>
-
-  {#if activities.length === 0}
-    <div class="rounded-xl border border-dashed border-border/60 p-8 text-center">
-      <p class="text-sm text-muted-foreground">{i18n.t('publicProfile.noActivity')}</p>
-    </div>
-  {:else}
-    <Card.Card class="border-border/60">
-      <Card.CardContent class="p-0">
-        <div class="divide-y">
-          {#each activities as activity (activity.id)}
-            {@const config = typeConfig[activity.type] ?? typeConfig['posted']}
-            <div class="flex items-start gap-3 p-4">
-              <div class="shrink-0 mt-0.5">
-                {#if activity.avatar}
-                  <Avatar class="h-8 w-8">
-                    <img src={activity.avatar} alt={activity.user} />
-                  </Avatar>
-                {:else}
-                  <div class="flex h-8 w-8 items-center justify-center rounded-full {config.color}">
-                    <config.icon class="h-4 w-4" />
-                  </div>
-                {/if}
-              </div>
-              <div class="flex-1 min-w-0">
-                <p class="text-sm">
-                  <strong class="text-foreground">{activity.user}</strong>
-                  <span class="text-muted-foreground"> {config.action} </span>
-                  {#if activity.target}
-                    <strong class="text-foreground">{activity.target}</strong>
-                  {/if}
-                </p>
-                {#if activity.content}
-                  <p class="mt-1 text-sm text-muted-foreground line-clamp-2">{activity.content}</p>
-                {/if}
-                <p class="mt-1 text-xs text-muted-foreground/60">{activity.timestamp}</p>
-              </div>
-            </div>
-          {/each}
-        </div>
-      </Card.CardContent>
-    </Card.Card>
-  {/if}
-</div>
+<section class="space-y-4">
+  <div class="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between"><SectionHeader title={i18n.t("publicProfile.activity")} />{#if showAutoRefresh}<div class="flex items-center gap-1 rounded-md border border-border p-1"><Button size="sm" variant={autoRefresh ? "default" : "ghost"} onclick={() => autoRefresh = true}>{i18n.t("common.on")}</Button><Button size="sm" variant={!autoRefresh ? "default" : "ghost"} onclick={() => autoRefresh = false}>{i18n.t("common.off")}</Button></div>{/if}</div>
+  {#if activities.length === 0}<DataState state="empty" title={i18n.t('publicProfile.noActivity')} />{:else}<Card.Card><Card.CardContent class="p-0"><div class="divide-y divide-border">{#each activities as activity (activity.id)}{@const item = config[activity.type] ?? config.posted}<div class="flex items-start gap-3 p-4">{#if activity.avatar}<Avatar src={activity.avatar} alt={activity.user} size="sm" />{:else}<span class={'flex size-8 shrink-0 items-center justify-center rounded-full ' + item.tone}><item.icon class="size-4" /></span>{/if}<div class="min-w-0 flex-1"><p class="text-sm"><strong class="text-foreground">{activity.user}</strong><span class="text-muted-foreground"> {item.action} </span>{#if activity.target}<strong class="text-foreground">{activity.target}</strong>{/if}</p>{#if activity.content}<p class="mt-1 text-sm text-muted-foreground">{activity.content}</p>{/if}<p class="mt-1 text-xs text-muted-foreground">{activity.timestamp}</p></div></div>{/each}</div></Card.CardContent></Card.Card>{/if}
+</section>

package/dist/components/profile/ProfileCard.svelte

@@ -69,24 +69,24 @@
 
 <Card.Card class="overflow-hidden border-border/60">
   {#if coverImage}
-    <div class="h-32 bg-gradient-to-r from-primary/20 via-primary/10 to-accent/20 relative">
+    <div class="h-32 bg-muted relative">
       <img src={coverImage} alt="" class="h-full w-full object-cover" />
     </div>
   {:else}
-    <div class="h-32 bg-gradient-to-r from-primary/20 via-primary/10 to-accent/20 relative">
+    <div class="h-32 bg-muted relative">
       <div class="absolute inset-0 opacity-[0.06]" style="background-image: radial-gradient(circle, currentColor 1px, transparent 1px); background-size: 20px 20px;"></div>
     </div>
   {/if}
 
   <Card.CardContent class="relative px-5 pb-5">
     <div class="-mt-10 mb-3 flex items-end gap-4">
-      <div class="ring-4 ring-card rounded-xl overflow-hidden shrink-0">
+      <div class="ring-4 ring-card rounded-lg overflow-hidden shrink-0">
         {#if avatar}
           <Avatar class="h-20 w-20">
             <img src={avatar} alt={name} />
           </Avatar>
         {:else}
-          <div class="flex h-20 w-20 items-center justify-center rounded-xl bg-primary/10 text-primary text-2xl font-bold">
+          <div class="flex h-20 w-20 items-center justify-center rounded-lg bg-primary/10 text-primary text-2xl font-bold">
             {initials}
           </div>
         {/if}