From 26a84f1554e338d6b2429c63ba60398b056d6ec7 Mon Sep 17 00:00:00 2001
From: KGFCH2 <babinbid05@gmail.com>
Date: Fri, 15 May 2026 17:08:21 +0530
Subject: [PATCH] feat: add informative empty-state component for profile links

---
 apps/web/package.json                         |  3 +-
 apps/web/src/lib/components/EmptyState.svelte | 45 ++++++++++++++++++
 apps/web/src/routes/u/[username]/+page.svelte | 47 +++++++++++--------
 pnpm-lock.yaml                                | 13 +++++
 4 files changed, 87 insertions(+), 21 deletions(-)
 create mode 100644 apps/web/src/lib/components/EmptyState.svelte

diff --git a/apps/web/package.json b/apps/web/package.json
index 3601215..bbc0f02 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -12,7 +12,8 @@
 		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch"
 	},
 	"dependencies": {
-		"@devcard/shared": "workspace:*"
+		"@devcard/shared": "workspace:*",
+		"lucide-svelte": "^1.0.1"
 	},
 	"devDependencies": {
 		"@sveltejs/adapter-auto": "^7.0.0",
diff --git a/apps/web/src/lib/components/EmptyState.svelte b/apps/web/src/lib/components/EmptyState.svelte
new file mode 100644
index 0000000..dacacb6
--- /dev/null
+++ b/apps/web/src/lib/components/EmptyState.svelte
@@ -0,0 +1,45 @@
+<script lang="ts">
+  import { Inbox } from 'lucide-svelte';
+
+  let { title, message }: { title: string; message: string } = $props();
+</script>
+
+<div class="empty-state">
+  <div class="empty-icon" aria-hidden="true">
+    <Inbox size={48} />
+  </div>
+  <h3>{title}</h3>
+  <p>{message}</p>
+  <slot />
+</div>
+
+<style>
+  .empty-state {
+    text-align: center;
+    padding: 3rem 1.5rem;
+    background: var(--bg-elevated);
+    border: 2px dashed var(--border);
+    border-radius: var(--radius-lg);
+    margin: 1rem 0;
+  }
+
+  .empty-icon {
+    color: var(--text-muted);
+    margin-bottom: 1rem;
+    display: flex;
+    justify-content: center;
+  }
+
+  h3 {
+    font-size: 1.1rem;
+    font-weight: 700;
+    margin-bottom: 0.5rem;
+    color: var(--text-primary);
+  }
+
+  p {
+    font-size: 0.9rem;
+    color: var(--text-secondary);
+    line-height: 1.5;
+  }
+</style>
diff --git a/apps/web/src/routes/u/[username]/+page.svelte b/apps/web/src/routes/u/[username]/+page.svelte
index f7750ec..e291f44 100644
--- a/apps/web/src/routes/u/[username]/+page.svelte
+++ b/apps/web/src/routes/u/[username]/+page.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
   import { PLATFORMS, getProfileUrl } from '@devcard/shared';
+  import EmptyState from '$lib/components/EmptyState.svelte';
 
   let { data } = $props();
   const profile = data.profile;
@@ -60,28 +61,34 @@
         {/if}
       </div>
 
-      <!-- Platform Links -->
       <div class="links-section">
         <p class="links-label">Connect with {profile.displayName.split(' ')[0]}</p>
-        {#each profile.links as link}
-          {@const platform = PLATFORMS[link.platform]}
-          {@const color = platformColors[link.platform] || '#6366f1'}
-          <a
-            href={link.url || getProfileUrl(link.platform, link.username)}
-            target="_blank"
-            rel="noopener noreferrer"
-            class="platform-tile"
-          >
-            <div class="tile-icon" style="background: {color}">
-              {platform?.name.charAt(0) || '?'}
-            </div>
-            <div class="tile-info">
-              <span class="tile-name">{platform?.name || link.platform}</span>
-              <span class="tile-username">{link.username}</span>
-            </div>
-            <span class="tile-arrow">→</span>
-          </a>
-        {/each}
+        {#if profile.links.length > 0}
+          {#each profile.links as link}
+            {@const platform = PLATFORMS[link.platform]}
+            {@const color = platformColors[link.platform] || '#6366f1'}
+            <a
+              href={link.url || getProfileUrl(link.platform, link.username)}
+              target="_blank"
+              rel="noopener noreferrer"
+              class="platform-tile"
+            >
+              <div class="tile-icon" style="background: {color}">
+                {platform?.name.charAt(0) || '?'}
+              </div>
+              <div class="tile-info">
+                <span class="tile-name">{platform?.name || link.platform}</span>
+                <span class="tile-username">{link.username}</span>
+              </div>
+              <span class="tile-arrow">→</span>
+            </a>
+          {/each}
+        {:else}
+          <EmptyState 
+            title="No links shared yet" 
+            message="{profile.displayName} hasn't added any profiles to their DevCard."
+          />
+        {/if}
       </div>
     </div>
 
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 2637abe..6c366d6 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -193,6 +193,9 @@ importers:
       '@devcard/shared':
         specifier: workspace:*
         version: link:../../packages/shared
+      lucide-svelte:
+        specifier: ^1.0.1
+        version: 1.0.1(svelte@5.53.10)
     devDependencies:
       '@sveltejs/adapter-auto':
         specifier: ^7.0.0
@@ -1925,6 +1928,7 @@ packages:
 
   '@ungap/structured-clone@1.3.0':
     resolution: {integrity: sha512-WmoN8qaIAo7WTYWbAZuG8PYEhn5fkz7dZrqTBZ7dtt//lL2Gwms1IcnQ5yHqjDfX8Ft5j4YzDM23f87zBfDe9g==}
+    deprecated: Potential CWE-502 - Update to 1.3.1 or higher
 
   '@vitest/expect@2.1.9':
     resolution: {integrity: sha512-UJCIkTBenHeKT1TTlKMJWy1laZewsRIzYighyYiJKZreqtdxSos/S1t+ktRMQWu2CKqaarrkeszJx1cgC5tGZw==}
@@ -3701,6 +3705,11 @@ packages:
   lru-cache@5.1.1:
     resolution: {integrity: sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==}
 
+  lucide-svelte@1.0.1:
+    resolution: {integrity: sha512-WvzZgk0pqzgda+AErLvgWxHkfg/+GgUwqKMRHvzt0IqyMdmyEDzDCk3Z+Wo/3y753oIgx8u9Q4eUbWkghFa8Jg==}
+    peerDependencies:
+      svelte: ^3 || ^4 || ^5.0.0-next.42
+
   magic-string@0.30.21:
     resolution: {integrity: sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==}
 
@@ -9449,6 +9458,10 @@ snapshots:
     dependencies:
       yallist: 3.1.1
 
+  lucide-svelte@1.0.1(svelte@5.53.10):
+    dependencies:
+      svelte: 5.53.10
+
   magic-string@0.30.21:
     dependencies:
       '@jridgewell/sourcemap-codec': 1.5.5