@svadmin/ui 0.38.7 → 0.39.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

@@ -30,8 +30,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()))
@@ -77,7 +91,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>
@@ -154,4 +168,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

@@ -30,6 +30,9 @@
     { 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: '7', name: 'CryptoKicks', username: '@cryptokicks', 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', 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', 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(
@@ -64,6 +67,8 @@
     <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">

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>;