add empty component and add a fallback for no server and users sections.

web/src/lib/components/empty/empty-description.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+  import type { HTMLAttributes } from 'svelte/elements';
+  import { cn } from '$lib/utils';
+
+  type $$Props = HTMLAttributes<HTMLDivElement>;
+
+  let className: $$Props['class'] = undefined;
+  export { className as class };
+</script>
+
+<div class={cn('text-black/25', className)} {...$$restProps}>
+  <slot />
+</div>

web/src/lib/components/empty/empty-simple-img.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+  import type { HTMLAttributes } from 'svelte/elements';
+  import { cn } from '$lib/utils';
+
+  type $$Props = HTMLAttributes<SVGImageElement> & {
+    borderColor?: string;
+    shadowColor?: string;
+    contentColor?: string;
+  };
+
+  let className: $$Props['class'] = undefined;
+  export let borderColor: $$Props['borderColor'] = '#d9d9d9';
+  export let shadowColor: $$Props['shadowColor'] = '#f5f5f5';
+  export let contentColor: $$Props['contentColor'] = '#fafafa';
+  export { className as class };
+</script>
+
+<svg
+  width="64"
+  height="41"
+  viewBox="0 0 64 41"
+  xmlns="http://www.w3.org/2000/svg"
+  {...$$restProps}
+  class={cn('max-w-full h-full m-auto',className)}
+>
+  <g transform="translate(0 1)" fill="none" fill-rule="evenodd">
+    <ellipse fill={shadowColor} cx="32" cy="33" rx="32" ry="7" />
+    <g fill-rule="nonzero" stroke={borderColor}>
+      <path
+        d="M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z"
+      />
+      <path
+        d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z"
+        fill={contentColor}
+      />
+    </g>
+  </g>
+</svg>

web/src/lib/components/empty/empty.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+  import { cn } from '$lib/utils';
+  import { EmptyDescription, EmptySimpleImage, type Props } from '.';
+
+  type $$Props = Props;
+
+  let className: $$Props['class'] = undefined;
+  export let description: $$Props['description'] = 'No data!';
+  export { className as class };
+</script>
+
+<div class={cn('m-8 leading-8 text-md text-center', className)} {...$$restProps}>
+  <div class="mb-2">
+    {#if !!$$slots.default}
+      <slot />
+    {:else}
+      <EmptySimpleImage />
+    {/if}
+  </div>
+  {#if !!description}
+    <EmptyDescription>{description}</EmptyDescription>
+  {/if}
+</div>

web/src/lib/components/empty/index.ts

@@ -0,0 +1,20 @@
+import Root from './empty.svelte';
+import Description from './empty-description.svelte';
+import SimpleImage from './empty-simple-img.svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+
+interface Props extends HTMLAttributes<HTMLDivElement> {
+  description?: string | null;
+}
+
+export {
+  Root,
+  Description,
+  SimpleImage,
+  type Props,
+  //
+  Root as Empty,
+  Description as EmptyDescription,
+  SimpleImage as EmptySimpleImage,
+  type Props as EmptyProps,
+};

web/src/routes/+page.svelte

@@ -6,6 +6,7 @@
   import Server from './Server.svelte';
   import { Card, CardHeader, CardTitle } from '$lib/components/ui/card';
   import fetchAction from '$lib/fetch-action';
+  import { Empty } from '$lib/components/empty';
 
   export let data: PageData;
 
@@ -41,10 +42,10 @@
   </div>
 
   <div class="space-y-3.5">
-    {#if data.servers?.length < 1}
+    <Card>
-      <Card>No Servers Found</Card>
+      {#if data.servers?.length < 1}
-    {:else}
+        <Empty description={'No server!'} />
-      <Card>
+      {:else}
         <CardHeader>
           <CardTitle>Servers</CardTitle>
         </CardHeader>
@@ -56,7 +57,7 @@
             }}
           />
         {/each}
-      </Card>
+      {/if}
-    {/if}
+    </Card>
   </div>
 </BasePage>

web/src/routes/[serverId]/+page.svelte

@@ -11,6 +11,7 @@
   import { CopiableText } from '$lib/components/copiable-text';
   import { MiddleEllipsis } from '$lib/components/middle-ellipsis';
   import { goto, invalidateAll } from '$app/navigation';
+  import { Empty } from '$lib/components/empty';
 
   export let data: PageData;
 
@@ -97,7 +98,7 @@
     </DetailRow>
     <DetailRow label={'Public Key'}>
       <CopiableText value={data.server.publicKey}>
-        <MiddleEllipsis content={data.server.publicKey} maxLength={16} />
+        <MiddleEllipsis content={data.server.publicKey} maxLength={12} />
       </CopiableText>
     </DetailRow>
   </CardContent>
@@ -162,17 +163,14 @@
         />
       {/each}
     </CardContent>
-    <CardFooter>
-      <CreatePeerDialog let:builder>
-        <Button size="sm" builders={[builder]}>Add Client</Button>
-      </CreatePeerDialog>
-    </CardFooter>
   {:else}
     <CardContent>
-      <div>No Clients!</div>
+      <Empty description={'No Clients!'} />
-      <CreatePeerDialog let:builder>
-        <Button size="sm" builders={[builder]}>Add Client</Button>
-      </CreatePeerDialog>
     </CardContent>
   {/if}
+  <CardFooter>
+    <CreatePeerDialog let:builder>
+      <Button size="sm" builders={[builder]}>Add Client</Button>
+    </CreatePeerDialog>
+  </CardFooter>
 </Card>