From 1a2044537d9070f6c97e73d2394452bb096a45af Mon Sep 17 00:00:00 2001
From: nessi <sascha@nesterovic.cc>
Date: Tue, 24 Mar 2026 17:47:47 +0100
Subject: [PATCH] feat: add lucide-react icons and redesign admin UI with
 enhanced visual hierarchy

Add lucide-react dependency and create app-icons module with icon mappings for all admin sections. Replace logo images with inline SVG brand glyph component.

Update Layout component with icon-enhanced navigation links including chevron indicators and hover states. Add topbar icon wrapper with gradient background styling.

Redesign Page component header with icon, eyebrow text, and improved title block layout. Add page
---
 admin-web/package.json                        |   1 +
 admin-web/src/components/Layout.tsx           |  69 +++++---
 admin-web/src/components/Page.tsx             |  19 ++-
 admin-web/src/components/app-icons.tsx        |  50 ++++++
 .../src/features/devices/DevicesPage.tsx      |  53 +++---
 admin-web/src/features/groups/GroupsPage.tsx  |  14 +-
 .../src/features/policies/PoliciesPage.tsx    |  24 ++-
 admin-web/src/styles/global.css               | 153 ++++++++++++++++--
 8 files changed, 312 insertions(+), 71 deletions(-)
 create mode 100644 admin-web/src/components/app-icons.tsx

diff --git a/admin-web/package.json b/admin-web/package.json
index c4ded90..a305cec 100644
--- a/admin-web/package.json
+++ b/admin-web/package.json
@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "@tanstack/react-query": "^5.66.8",
+    "lucide-react": "^0.511.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-router-dom": "^6.30.0"
diff --git a/admin-web/src/components/Layout.tsx b/admin-web/src/components/Layout.tsx
index 4e81ebd..0c2f15d 100644
--- a/admin-web/src/components/Layout.tsx
+++ b/admin-web/src/components/Layout.tsx
@@ -1,27 +1,43 @@
+import { ChevronRight } from "lucide-react";
 import { NavLink, Outlet } from "react-router-dom";
 
+import { appIconMap, topbarIcon, type AppIconKey } from "./app-icons";
+
 const items = [
-  ["Dashboard", "/"],
-  ["Users", "/users"],
-  ["Groups", "/groups"],
-  ["Devices", "/devices"],
-  ["Services", "/services"],
-  ["Policies", "/policies"],
-  ["Gateways", "/gateways"],
-  ["Audit", "/audit"],
-  ["Settings", "/settings"]
-];
+  ["Dashboard", "/", "dashboard"],
+  ["Users", "/users", "users"],
+  ["Groups", "/groups", "groups"],
+  ["Devices", "/devices", "devices"],
+  ["Services", "/services", "services"],
+  ["Policies", "/policies", "policies"],
+  ["Gateways", "/gateways", "gateways"],
+  ["Audit", "/audit", "audit"],
+  ["Settings", "/settings", "settings"]
+] as const satisfies ReadonlyArray<[string, string, AppIconKey]>;
 
 type LayoutProps = {
   onLogout: () => void;
 };
 
+const TopbarIcon = topbarIcon;
+
+function BrandGlyph() {
+  return (
+    <div className="brand-glyph" aria-hidden="true">
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
+        <path d="M12 3 5.5 5.8v5.4c0 4.5 2.6 7.9 6.5 9.8 3.9-1.9 6.5-5.3 6.5-9.8V5.8L12 3Z" />
+        <path d="m9.5 12 1.7 1.7 3.8-4.2" />
+      </svg>
+    </div>
+  );
+}
+
 export function Layout({ onLogout }: LayoutProps) {
   return (
     <div className="shell">
       <aside className="sidebar">
         <div className="brand-block">
-          <img className="brand-logo brand-logo-full" src="/NexaVPN_Logo.png" alt="NexaVPN" />
+          <BrandGlyph />
           <div className="brand-copy">
             <p className="eyebrow">NexaVPN</p>
             <h1>Control Plane</h1>
@@ -29,22 +45,31 @@ export function Layout({ onLogout }: LayoutProps) {
           </div>
         </div>
         <nav className="nav">
-          {items.map(([label, path]) => (
-            <NavLink
-              key={path}
-              to={path}
-              className={({ isActive }) => (isActive ? "nav-link active" : "nav-link")}
-            >
-              {label}
-            </NavLink>
-          ))}
+          {items.map(([label, path, iconKey]) => {
+            const Icon = appIconMap[iconKey];
+            return (
+              <NavLink
+                key={path}
+                to={path}
+                className={({ isActive }) => (isActive ? "nav-link active" : "nav-link")}
+              >
+                <span className="nav-link-copy">
+                  <Icon className="nav-link-icon" size={18} strokeWidth={2} />
+                  <span>{label}</span>
+                </span>
+                <ChevronRight className="nav-link-chevron" size={16} strokeWidth={2} />
+              </NavLink>
+            );
+          })}
         </nav>
       </aside>
       <main className="content">
         <header className="topbar">
           <div className="topbar-brand">
-            <img className="brand-logo brand-logo-mark" src="/NexaVPN_Logo_Only.png" alt="NexaVPN mark" />
-            <div>
+            <div className="topbar-icon-wrap" aria-hidden="true">
+              <TopbarIcon size={22} strokeWidth={2} />
+            </div>
+            <div className="topbar-copy">
               <p className="eyebrow">Enterprise WireGuard</p>
               <h2>Self-hosted VPN management</h2>
             </div>
diff --git a/admin-web/src/components/Page.tsx b/admin-web/src/components/Page.tsx
index a44d1fc..3a595ef 100644
--- a/admin-web/src/components/Page.tsx
+++ b/admin-web/src/components/Page.tsx
@@ -1,5 +1,8 @@
+import { useLocation } from "react-router-dom";
 import { PropsWithChildren, ReactNode } from "react";
 
+import { appIconMap, pageMetaByPath } from "./app-icons";
+
 type PageProps = PropsWithChildren<{
   title: string;
   subtitle: string;
@@ -7,11 +10,23 @@ type PageProps = PropsWithChildren<{
 }>;
 
 export function Page({ title, subtitle, actions, children }: PageProps) {
+  const location = useLocation();
+  const meta = pageMetaByPath[location.pathname] ?? pageMetaByPath["/"];
+  const Icon = appIconMap[meta.icon];
+
   return (
     <section className="page">
       <div className="page-header">
-        <div>
-          <h3>{title}</h3>
+        <div className="page-title-block">
+          <div className="page-title-icon" aria-hidden="true">
+            <Icon size={22} strokeWidth={2} />
+          </div>
+          <div className="page-title-copy">
+            <p className="eyebrow">{meta.eyebrow}</p>
+            <h3>{title}</h3>
+          </div>
+        </div>
+        <div className="page-subtitle-block">
           <p>{subtitle}</p>
         </div>
         {actions}
diff --git a/admin-web/src/components/app-icons.tsx b/admin-web/src/components/app-icons.tsx
new file mode 100644
index 0000000..6502dcf
--- /dev/null
+++ b/admin-web/src/components/app-icons.tsx
@@ -0,0 +1,50 @@
+import {
+  Activity,
+  FileText,
+  FolderLock,
+  Gauge,
+  HardDrive,
+  LockKeyhole,
+  type LucideIcon,
+  Network,
+  Settings,
+  Shield,
+  Users
+} from "lucide-react";
+
+export type AppIconKey =
+  | "dashboard"
+  | "users"
+  | "groups"
+  | "devices"
+  | "services"
+  | "policies"
+  | "gateways"
+  | "audit"
+  | "settings";
+
+export const appIconMap: Record<AppIconKey, LucideIcon> = {
+  dashboard: Gauge,
+  users: Users,
+  groups: FolderLock,
+  devices: HardDrive,
+  services: Shield,
+  policies: LockKeyhole,
+  gateways: Network,
+  audit: FileText,
+  settings: Settings
+};
+
+export const pageMetaByPath: Record<string, { icon: AppIconKey; eyebrow: string }> = {
+  "/": { icon: "dashboard", eyebrow: "Operations" },
+  "/users": { icon: "users", eyebrow: "Identity" },
+  "/groups": { icon: "groups", eyebrow: "Access Groups" },
+  "/devices": { icon: "devices", eyebrow: "Endpoints" },
+  "/services": { icon: "services", eyebrow: "Published Services" },
+  "/policies": { icon: "policies", eyebrow: "Enforcement" },
+  "/gateways": { icon: "gateways", eyebrow: "WireGuard Edge" },
+  "/audit": { icon: "audit", eyebrow: "Traceability" },
+  "/settings": { icon: "settings", eyebrow: "Platform" }
+};
+
+export const topbarIcon = Activity;
diff --git a/admin-web/src/features/devices/DevicesPage.tsx b/admin-web/src/features/devices/DevicesPage.tsx
index 5d4cc58..b373f0d 100644
--- a/admin-web/src/features/devices/DevicesPage.tsx
+++ b/admin-web/src/features/devices/DevicesPage.tsx
@@ -11,7 +11,8 @@ const columns = [
   { key: "ip", label: "VPN IP" },
   { key: "received", label: "Received" },
   { key: "sent", label: "Sent" },
-  { key: "status", label: "Status" }
+  { key: "status", label: "Status" },
+  { key: "actions", label: "Actions" }
 ];
 
 function formatDataSize(bytes: number) {
@@ -37,21 +38,13 @@ export function DevicesPage() {
     queryKey: ["devices"],
     queryFn: api.devices
   });
-  const profileQuery = useQuery({
-    queryKey: ["device-profile", query.data?.[0]?.id ?? ""],
-    queryFn: () => api.deviceProfile(query.data?.[0]?.id ?? ""),
-    enabled: Boolean(query.data?.[0]?.id)
-  });
   const revokeMutation = useMutation({
     mutationFn: api.revokeDevice,
     onSuccess: () => void queryClient.invalidateQueries({ queryKey: ["devices"] })
   });
   const deleteMutation = useMutation({
     mutationFn: api.deleteDevice,
-    onSuccess: () => {
-      void queryClient.invalidateQueries({ queryKey: ["devices"] });
-      void queryClient.invalidateQueries({ queryKey: ["device-profile"] });
-    }
+    onSuccess: () => void queryClient.invalidateQueries({ queryKey: ["devices"] })
   });
   const rotateMutation = useMutation({
     mutationFn: api.rotateDevice,
@@ -75,28 +68,26 @@ export function DevicesPage() {
       <Table
         columns={columns}
         rows={rows}
-        renderCell={(row, column) => <span>{row[column.key as keyof (typeof rows)[number]]}</span>}
+        renderCell={(row, column) => {
+          if (column.key === "actions") {
+            return (
+              <div className="action-row">
+                <button className="ghost-button" type="button" onClick={() => rotateMutation.mutate(row.id)}>
+                  Rotate
+                </button>
+                <button className="ghost-button" type="button" onClick={() => revokeMutation.mutate(row.id)}>
+                  Revoke
+                </button>
+                <button className="ghost-button" type="button" onClick={() => deleteMutation.mutate(row.id)}>
+                  Delete
+                </button>
+              </div>
+            );
+          }
+
+          return <span>{row[column.key as keyof (typeof rows)[number]]}</span>;
+        }}
       />
-      {rows.length > 0 ? (
-        <div className="grid two">
-          <div className="card">
-            <h4>Selected device profile</h4>
-            <p className="notice">Admin view shows a debug template. The client private key stays on the device.</p>
-            <pre className="code-block">{profileQuery.data?.profile.content ?? "Loading profile..."}</pre>
-          </div>
-          <div className="card">
-            <h4>Device actions</h4>
-            <p>Target: {rows[0].name}</p>
-            <p>Total received: {rows[0].received}</p>
-            <p>Total sent: {rows[0].sent}</p>
-            <div className="action-row">
-              <button className="button" onClick={() => rotateMutation.mutate(rows[0].id)}>Rotate profile</button>
-              <button className="ghost-button" onClick={() => revokeMutation.mutate(rows[0].id)}>Revoke device</button>
-              <button className="ghost-button" onClick={() => deleteMutation.mutate(rows[0].id)}>Delete device</button>
-            </div>
-          </div>
-        </div>
-      ) : null}
     </Page>
   );
 }
diff --git a/admin-web/src/features/groups/GroupsPage.tsx b/admin-web/src/features/groups/GroupsPage.tsx
index bc00027..e2474d6 100644
--- a/admin-web/src/features/groups/GroupsPage.tsx
+++ b/admin-web/src/features/groups/GroupsPage.tsx
@@ -130,8 +130,13 @@ export function GroupsPage() {
           <div className="selection-list">
             {(usersQuery.data ?? []).map((user) => (
               <label className="selection-item" key={user.id}>
+                <div className="selection-copy">
+                  <span className="selection-title">{user.username}</span>
+                  <span className="selection-meta">
+                    {user.display_name || "No display name"} · {user.email || "No email"}
+                  </span>
+                </div>
                 <input type="checkbox" checked={form.user_ids.includes(user.id)} onChange={() => toggleUser(user.id)} />
-                <span>{user.username}</span>
               </label>
             ))}
           </div>
@@ -169,8 +174,13 @@ export function GroupsPage() {
               <div className="selection-list">
                 {(usersQuery.data ?? []).map((user) => (
                   <label className="selection-item" key={user.id}>
+                    <div className="selection-copy">
+                      <span className="selection-title">{user.username}</span>
+                      <span className="selection-meta">
+                        {user.display_name || "No display name"} · {user.email || "No email"}
+                      </span>
+                    </div>
                     <input type="checkbox" checked={editForm.user_ids.includes(user.id)} onChange={() => toggleUser(user.id, true)} />
-                    <span>{user.username}</span>
                   </label>
                 ))}
               </div>
diff --git a/admin-web/src/features/policies/PoliciesPage.tsx b/admin-web/src/features/policies/PoliciesPage.tsx
index 24da969..efd7850 100644
--- a/admin-web/src/features/policies/PoliciesPage.tsx
+++ b/admin-web/src/features/policies/PoliciesPage.tsx
@@ -234,8 +234,13 @@ export function PoliciesPage() {
               <div className="selection-list">
                 {selectableTargets.map((target) => (
                   <label className="selection-item" key={target.id}>
+                    <div className="selection-copy">
+                      <span className="selection-title">{"username" in target ? target.username : target.name}</span>
+                      <span className="selection-meta">
+                        {"username" in target ? (target.display_name || target.email || "User target") : (target.description || "Group target")}
+                      </span>
+                    </div>
                     <input type="checkbox" checked={form.targetIds.includes(target.id)} onChange={() => toggleTarget(target.id)} />
-                    <span>{"username" in target ? target.username : target.name}</span>
                   </label>
                 ))}
               </div>
@@ -251,8 +256,11 @@ export function PoliciesPage() {
               <div className="selection-list">
                 {selectableServices.map((service) => (
                   <label className="selection-item" key={service.id}>
+                    <div className="selection-copy">
+                      <span className="selection-title">{service.name}</span>
+                      <span className="selection-meta">{service.domain}</span>
+                    </div>
                     <input type="checkbox" checked={form.serviceIds.includes(service.id)} onChange={() => toggleService(service.id)} />
-                    <span>{service.name} ({service.domain})</span>
                   </label>
                 ))}
               </div>
@@ -282,8 +290,13 @@ export function PoliciesPage() {
               <div className="selection-list">
                 {editableTargets.map((target) => (
                   <label className="selection-item" key={target.id}>
+                    <div className="selection-copy">
+                      <span className="selection-title">{"username" in target ? target.username : target.name}</span>
+                      <span className="selection-meta">
+                        {"username" in target ? (target.display_name || target.email || "User target") : (target.description || "Group target")}
+                      </span>
+                    </div>
                     <input type="checkbox" checked={editForm.targetIds.includes(target.id)} onChange={() => toggleTarget(target.id, true)} />
-                    <span>{"username" in target ? target.username : target.name}</span>
                   </label>
                 ))}
               </div>
@@ -299,8 +312,11 @@ export function PoliciesPage() {
               <div className="selection-list">
                 {selectableServices.map((service) => (
                   <label className="selection-item" key={service.id}>
+                    <div className="selection-copy">
+                      <span className="selection-title">{service.name}</span>
+                      <span className="selection-meta">{service.domain}</span>
+                    </div>
                     <input type="checkbox" checked={editForm.serviceIds.includes(service.id)} onChange={() => toggleService(service.id, true)} />
-                    <span>{service.name} ({service.domain})</span>
                   </label>
                 ))}
               </div>
diff --git a/admin-web/src/styles/global.css b/admin-web/src/styles/global.css
index 772f513..92c9107 100644
--- a/admin-web/src/styles/global.css
+++ b/admin-web/src/styles/global.css
@@ -90,15 +90,47 @@ button {
   align-items: flex-start;
 }
 
+.brand-glyph,
+.topbar-icon-wrap,
+.page-title-icon {
+  display: grid;
+  place-items: center;
+  flex: 0 0 auto;
+  color: var(--accent);
+  border: 1px solid rgba(116, 224, 184, 0.18);
+  background:
+    radial-gradient(circle at top, rgba(116, 224, 184, 0.14), transparent 72%),
+    rgba(10, 18, 32, 0.88);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
+}
+
+.brand-glyph {
+  width: 54px;
+  height: 54px;
+  border-radius: 18px;
+}
+
+.brand-glyph svg {
+  width: 25px;
+  height: 25px;
+}
+
 .brand-copy {
   display: grid;
   gap: 6px;
 }
 
+.brand-copy h1,
+.topbar-copy h2,
+.page-title-copy h3 {
+  margin: 0;
+  line-height: 1.08;
+}
+
 .brand-tagline {
   margin: 0;
   color: var(--muted);
-  max-width: 240px;
+  max-width: 220px;
   line-height: 1.5;
 }
 
@@ -151,12 +183,17 @@ button {
 .nav {
   display: grid;
   gap: 10px;
-  margin-top: 40px;
+  margin-top: 36px;
 }
 
 .nav-link {
-  padding: 12px 14px;
-  border-radius: 14px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 14px;
+  padding: 13px 14px 13px 16px;
+  border-radius: 16px;
+  border: 1px solid transparent;
   color: var(--muted);
   transition: 180ms ease;
 }
@@ -164,26 +201,85 @@ button {
 .nav-link:hover,
 .nav-link.active {
   color: var(--text);
-  background: rgba(116, 224, 184, 0.12);
+  border-color: rgba(116, 224, 184, 0.14);
+  background: rgba(116, 224, 184, 0.08);
+}
+
+.nav-link-copy {
+  display: inline-flex;
+  align-items: center;
+  gap: 12px;
+  min-width: 0;
+}
+
+.nav-link-icon,
+.nav-link-chevron {
+  flex: 0 0 auto;
+}
+
+.nav-link:hover .nav-link-icon,
+.nav-link.active .nav-link-icon,
+.nav-link:hover .nav-link-chevron,
+.nav-link.active .nav-link-chevron {
+  color: var(--accent);
 }
 
 .content {
   padding: 28px;
 }
 
-.topbar,
-.page-header {
+.topbar {
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: 16px;
 }
 
+.topbar-copy {
+  display: grid;
+  gap: 6px;
+}
+
+.topbar-icon-wrap,
+.page-title-icon {
+  width: 52px;
+  height: 52px;
+  border-radius: 18px;
+}
+
 .page {
   display: grid;
   gap: 22px;
 }
 
+.page-header {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: start;
+  gap: 16px;
+}
+
+.page-title-block {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+.page-title-copy {
+  display: grid;
+  gap: 6px;
+}
+
+.page-subtitle-block {
+  grid-column: 1 / 2;
+  padding-left: 68px;
+}
+
+.page-subtitle-block p {
+  margin: 0;
+  max-width: 760px;
+}
+
 .grid {
   display: grid;
   gap: 18px;
@@ -345,15 +441,52 @@ button {
 .selection-list {
   display: grid;
   gap: 10px;
-  max-height: 240px;
+  max-height: 260px;
   overflow: auto;
 }
 
 .selection-item {
-  display: flex;
+  display: grid;
+  grid-template-columns: 1fr auto;
   align-items: center;
-  gap: 10px;
+  gap: 12px;
+  padding: 14px 16px;
+  border: 1px solid var(--line);
+  border-radius: 16px;
+  background: rgba(8, 14, 26, 0.78);
   color: var(--text);
+  cursor: pointer;
+  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
+}
+
+.selection-item:hover {
+  border-color: rgba(116, 224, 184, 0.32);
+  background: rgba(14, 22, 38, 0.96);
+}
+
+.selection-item input {
+  margin: 0;
+}
+
+.selection-copy {
+  display: grid;
+  gap: 4px;
+  min-width: 0;
+}
+
+.selection-title {
+  font-weight: 600;
+  color: var(--text);
+}
+
+.selection-meta {
+  color: var(--muted);
+  font-size: 0.92rem;
+  line-height: 1.35;
+}
+
+.selection-item input:checked + .selection-copy .selection-title {
+  color: var(--accent);
 }
 
 .modal-backdrop {