User Invitation button

Author: simonredfern

src/lib/config/navigation.ts

@@ -19,7 +19,6 @@ import {
   Box,
   Settings,
   FileText,
-  Mail,
 } from "@lucide/svelte";
 import { env } from "$env/dynamic/public";
 
@@ -81,11 +80,6 @@ function buildDevOpsItems(): NavigationItem[] {
       label: "Migrations",
       iconComponent: GitBranch,
     },
-    {
-      href: "/user-invitations",
-      label: "User Invitations",
-      iconComponent: Mail,
-    },
   ];
 
   return items;

src/routes/(protected)/users/+page.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { Mail } from "@lucide/svelte";
   import type { PageData } from "./$types";
 
   let { data } = $props<{ data: PageData }>();
@@ -133,7 +134,16 @@
     </div>
   {/if}
 
-  <h1 class="text-3xl font-bold mb-6">Users</h1>
+  <div class="flex items-center justify-between mb-6">
+    <h1 class="text-3xl font-bold">Users</h1>
+    <a
+      href="/user-invitations"
+      class="btn btn-secondary flex items-center gap-2"
+    >
+      <Mail size={18} />
+      <span>User Invitations</span>
+    </a>
+  </div>
 
   <!-- Smart Search Panel -->
   <div class="panel mb-6">
@@ -390,6 +400,26 @@
     cursor: not-allowed;
   }
 
+  .btn-secondary {
+    background: white;
+    color: #3b82f6;
+    border: 1px solid #3b82f6;
+  }
+
+  .btn-secondary:hover {
+    background: #eff6ff;
+  }
+
+  :global([data-mode="dark"]) .btn-secondary {
+    background: rgb(var(--color-surface-700));
+    color: rgb(var(--color-primary-400));
+    border-color: rgb(var(--color-primary-400));
+  }
+
+  :global([data-mode="dark"]) .btn-secondary:hover {
+    background: rgb(var(--color-surface-600));
+  }
+
   .table-wrapper {
     overflow-x: auto;
   }