@svadmin/ui 0.38.7 → 0.40.0

package/dist/components/account/UserProfilePage.svelte

@@ -0,0 +1,206 @@
+<script lang="ts">
+  import { useTranslation } from '@svadmin/core/i18n';
+  import * as Card from '../ui/card/index.js';
+  import { Badge } from '../ui/badge/index.js';
+  import { Button } from '../ui/button/index.js';
+  import { Switch } from '../ui/switch/index.js';
+  import {
+    Briefcase, Calendar, FileText, Image, FileArchive, Link2, Loader2,
+    Star, Award, Medal, Crown,
+  } from '@lucide/svelte';
+  import type { Component } from 'svelte';
+
+  const i18n = useTranslation();
+
+  let availableToHire = $state(true);
+  let saving = $state(false);
+
+  async function handleSave() {
+    saving = true;
+    await new Promise((r) => setTimeout(r, 800));
+    saving = false;
+  }
+
+  const infoRows = [
+    { label: 'profile.name', value: 'Alex Chen' },
+    { label: 'account.phone', value: '+86 138 **** 9527' },
+    { label: 'account.dateOfBirth', value: '1995-04-18' },
+    { label: 'account.address', value: 'Shanghai, CN' },
+  ];
+
+  const badges: { name: string; Icon: Component; tone: string }[] = [
+    { name: 'Top Contributor', Icon: Medal, tone: 'bg-amber-500/10 text-amber-600' },
+    { name: 'Early Adopter', Icon: Star, tone: 'bg-blue-500/10 text-blue-600' },
+    { name: 'Community Mentor', Icon: Award, tone: 'bg-violet-500/10 text-violet-600' },
+    { name: 'Launch Partner', Icon: Crown, tone: 'bg-emerald-500/10 text-emerald-600' },
+  ];
+
+  interface Connection {
+    id: string;
+    name: string;
+    detail: string;
+    connected: boolean;
+  }
+  let connections = $state<Connection[]>([
+    { id: 'repo', name: 'Source Control', detail: 'alexchen', connected: true },
+    { id: 'chat', name: 'ChatOps', detail: '@alex.chen', connected: true },
+    { id: 'drive', name: 'Cloud Drive', detail: 'alex@example.com', connected: false },
+  ]);
+
+  const files: { name: string; size: string; Icon: Component; tone: string }[] = [
+    { name: 'portfolio-2026.pdf', size: '2.1 MB', Icon: FileText, tone: 'bg-red-500/10 text-red-600' },
+    { name: 'avatar-pack.zip', size: '8.4 MB', Icon: FileArchive, tone: 'bg-amber-500/10 text-amber-600' },
+    { name: 'cover-photo.png', size: '1.2 MB', Icon: Image, tone: 'bg-pink-500/10 text-pink-600' },
+  ];
+
+  const calendars = [
+    { name: 'Work Calendar', detail: 'alex@nebulalabs.io', primary: true },
+    { name: 'Personal Calendar', detail: 'alex@example.com', primary: false },
+  ];
+
+  function toggleConnection(id: string, connected: boolean) {
+    connections = connections.map((c) => (c.id === id ? { ...c, connected } : c));
+  }
+</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.userProfile')}</h2>
+      <p class="mt-1 text-sm text-muted-foreground">{i18n.t('account.userProfileDescription')}</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="grid gap-4 lg:grid-cols-3">
+    <div class="space-y-4 lg:col-span-2">
+      <!-- Personal Info -->
+      <Card.Card class="border-border/60">
+        <Card.CardHeader class="pb-3">
+          <Card.CardTitle class="text-base">{i18n.t('account.personalInfo')}</Card.CardTitle>
+        </Card.CardHeader>
+        <Card.CardContent class="p-0">
+          <div class="divide-y">
+            {#each infoRows as row (row.label)}
+              <div class="flex items-center justify-between px-6 py-3 text-sm">
+                <span class="text-muted-foreground">{i18n.t(row.label)}</span>
+                <span class="font-medium text-foreground">{row.value}</span>
+              </div>
+            {/each}
+          </div>
+        </Card.CardContent>
+      </Card.Card>
+
+      <!-- Work -->
+      <Card.Card class="border-border/60">
+        <Card.CardHeader class="pb-3">
+          <Card.CardTitle class="flex items-center gap-2 text-base">
+            <Briefcase class="h-4 w-4 text-muted-foreground" />{i18n.t('account.work')}
+          </Card.CardTitle>
+        </Card.CardHeader>
+        <Card.CardContent class="space-y-4">
+          <div class="flex items-center justify-between gap-4">
+            <div class="space-y-1">
+              <p class="text-sm font-medium text-foreground">{i18n.t('account.availableToHire')}</p>
+              <p class="text-xs text-muted-foreground">{i18n.t('account.availableNow')}</p>
+            </div>
+            <Switch bind:checked={availableToHire} />
+          </div>
+          <div class="flex flex-wrap gap-1.5">
+            {#each ['TypeScript', 'Svelte', 'Node.js', 'Design Systems'] as skill (skill)}
+              <Badge variant="secondary" class="text-xs">{skill}</Badge>
+            {/each}
+          </div>
+        </Card.CardContent>
+      </Card.Card>
+
+      <!-- Connections -->
+      <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.connections')}
+          </Card.CardTitle>
+        </Card.CardHeader>
+        <Card.CardContent class="p-0">
+          <div class="divide-y">
+            {#each connections as conn (conn.id)}
+              <div class="flex items-center justify-between gap-4 px-6 py-3">
+                <div class="min-w-0">
+                  <p class="text-sm font-medium text-foreground">{conn.name}</p>
+                  <p class="truncate text-xs text-muted-foreground">{conn.detail}</p>
+                </div>
+                <Switch checked={conn.connected} onCheckedChange={(checked) => toggleConnection(conn.id, checked)} />
+              </div>
+            {/each}
+          </div>
+        </Card.CardContent>
+      </Card.Card>
+    </div>
+
+    <div class="space-y-4">
+      <!-- Badges -->
+      <Card.Card class="border-border/60">
+        <Card.CardHeader class="pb-3">
+          <Card.CardTitle class="text-base">{i18n.t('account.badges')}</Card.CardTitle>
+        </Card.CardHeader>
+        <Card.CardContent>
+          <div class="grid grid-cols-2 gap-2">
+            {#each badges as badge (badge.name)}
+              <div class="flex items-center gap-2 rounded-lg border border-border/60 p-2.5">
+                <div class="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg {badge.tone}">
+                  <badge.Icon class="h-4 w-4" />
+                </div>
+                <span class="text-xs font-medium text-foreground">{badge.name}</span>
+              </div>
+            {/each}
+          </div>
+        </Card.CardContent>
+      </Card.Card>
+
+      <!-- Calendar Accounts -->
+      <Card.Card class="border-border/60">
+        <Card.CardHeader class="pb-3">
+          <Card.CardTitle class="flex items-center gap-2 text-base">
+            <Calendar class="h-4 w-4 text-muted-foreground" />{i18n.t('account.calendarAccounts')}
+          </Card.CardTitle>
+        </Card.CardHeader>
+        <Card.CardContent class="space-y-3">
+          {#each calendars as cal (cal.name)}
+            <div class="flex items-center justify-between gap-2">
+              <div class="min-w-0">
+                <p class="truncate text-sm font-medium text-foreground">{cal.name}</p>
+                <p class="truncate text-xs text-muted-foreground">{cal.detail}</p>
+              </div>
+              {#if cal.primary}
+                <Badge variant="secondary" class="shrink-0 text-[10px]">{i18n.t('account.active')}</Badge>
+              {/if}
+            </div>
+          {/each}
+        </Card.CardContent>
+      </Card.Card>
+
+      <!-- My Files -->
+      <Card.Card class="border-border/60">
+        <Card.CardHeader class="pb-3">
+          <Card.CardTitle class="text-base">{i18n.t('account.myFiles')}</Card.CardTitle>
+        </Card.CardHeader>
+        <Card.CardContent class="space-y-2.5">
+          {#each files as file (file.name)}
+            <div class="flex items-center gap-3">
+              <div class="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg {file.tone}">
+                <file.Icon class="h-4 w-4" />
+              </div>
+              <div class="min-w-0 flex-1">
+                <p class="truncate text-sm font-medium text-foreground">{file.name}</p>
+                <p class="text-xs text-muted-foreground">{file.size}</p>
+              </div>
+            </div>
+          {/each}
+        </Card.CardContent>
+      </Card.Card>
+    </div>
+  </div>
+</div>

package/dist/components/account/UserProfilePage.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { Component } from 'svelte';
+declare const UserProfilePage: Component<Record<string, never>, {}, "">;
+type UserProfilePage = ReturnType<typeof UserProfilePage>;
+export default UserProfilePage;

package/dist/components/network/TeamCrewTablePage.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { captureAdminContext } from '@svadmin/core';
   import { useTranslation } from '@svadmin/core/i18n';
   import * as Card from '../ui/card/index.js';
   import { Button } from '../ui/button/index.js';
@@ -6,6 +7,7 @@
   import { Search, Download, UserPlus, MoreHorizontal, CheckCircle2, Clock, XCircle } from '@lucide/svelte';
 
   const i18n = useTranslation();
+  const adminContext = captureAdminContext();
 
   interface CrewMember {
     id: string;
@@ -30,8 +32,22 @@
     { 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 },
   ];
 
+  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()))
@@ -45,6 +61,20 @@
   };
 
   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);
+  }
 </script>
 
 <div class="space-y-6" data-svadmin-content-page="network">
@@ -54,10 +84,10 @@
       <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">
+      <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">
+      <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>
@@ -77,7 +107,7 @@
             <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">Department</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>
@@ -112,7 +142,7 @@
                 <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"><MoreHorizontal class="h-4 w-4" /></Button>
+                  <Button variant="ghost" size="icon-sm" aria-label={member.name} title={member.name}><MoreHorizontal class="h-4 w-4" /></Button>
                 </td>
               </tr>
             {/each}
@@ -136,7 +166,7 @@
                   <p class="truncate text-xs text-muted-foreground">{member.email}</p>
                 </div>
               </div>
-              <Button variant="ghost" size="icon-sm" class="shrink-0"><MoreHorizontal class="h-4 w-4" /></Button>
+              <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">
@@ -154,4 +184,6 @@
       </div>
     </Card.CardContent>
   </Card.Card>
+
+  <p class="text-sm text-muted-foreground">{i18n.t('network.showingUsersOf', { shown: filtered.length, total: totalCrew })}</p>
 </div>

package/dist/components/network/UserCardsNFTPage.svelte

@@ -5,6 +5,15 @@
   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';
 
   const i18n = useTranslation();
 
@@ -12,7 +21,7 @@
     id: string;
     name: string;
     username: string;
-    avatar?: string;
+    artwork: string;
     bio: string;
     collectionCount: number;
     floorPrice: string;
@@ -24,12 +33,15 @@
   let searchQuery = $state('');
 
   const users: NFTUser[] = [
-    { id: '1', name: 'CryptoArt Studio', username: '@cryptoart', 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', 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', 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', 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', 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', bio: 'Curated photography NFTs from world artists', collectionCount: 31, floorPrice: '0.15 ETH', volume: '67.2 ETH', verified: false, tags: ['Photo', 'Curated'] },
+    { 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'] },
   ];
 
   const filtered = $derived(
@@ -38,8 +50,6 @@
       : users
   );
 
-  const initials = (name: string) => name.split(' ').map(n => n[0]).join('').toUpperCase().slice(0, 2);
-
   let connectedIds = $state<string[]>([]);
 
   function toggleConnect(id: string) {
@@ -64,18 +74,18 @@
     <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="overflow-hidden border-border/60 hover:border-primary/30 transition-colors">
-        <div class="h-20 bg-gradient-to-r from-violet-500/20 via-purple-500/15 to-fuchsia-500/20 relative">
-          <div class="absolute inset-0 opacity-[0.08]" style="background-image: radial-gradient(circle, currentColor 1px, transparent 1px); background-size: 16px 16px;"></div>
+      <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">
-              <div class="flex h-14 w-14 items-center justify-center bg-primary/10 text-primary font-bold">
-                {initials(user.name)}
-              </div>
+              <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">
@@ -125,7 +135,7 @@
                 <Plus class="h-3.5 w-3.5 mr-1" />{i18n.t('network.connect')}
               {/if}
             </Button>
-            <Button size="sm" variant="ghost">
+            <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>

package/dist/components/profile/ActivityTimeline.svelte

@@ -19,9 +19,12 @@
 
   interface Props {
     activities?: ActivityItem[];
+    showAutoRefresh?: boolean;
   }
 
-  let { activities = [] }: Props = $props();
+  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') },
@@ -33,7 +36,26 @@
 </script>
 
 <div class="space-y-4">
-  <h3 class="text-lg font-semibold text-foreground">{i18n.t('publicProfile.activity')}</h3>
+  <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">

package/dist/components/profile/ActivityTimeline.svelte.d.ts

@@ -10,6 +10,7 @@ interface ActivityItem {
 }
 interface Props {
     activities?: ActivityItem[];
+    showAutoRefresh?: boolean;
 }
 declare const ActivityTimeline: Component<Props, {}, "">;
 type ActivityTimeline = ReturnType<typeof ActivityTimeline>;