add some more icons

src/app/[orgId]/settings/layout.tsx

@@ -1,6 +1,6 @@
 import { Metadata } from "next";
 import { TopbarNav } from "./components/TopbarNav";
-import { Cog, Combine, Users, Waypoints } from "lucide-react";
+import { Cog, Combine, Settings, Users, Waypoints } from "lucide-react";
 import Header from "./components/Header";
 import { verifySession } from "@app/lib/auth/verifySession";
 import { redirect } from "next/navigation";
@@ -37,7 +37,7 @@ const topNavItems = [
     {
         title: "General",
         href: "/{orgId}/settings/general",
-        icon: <Cog className="h-5 w-5" />,
+        icon: <Settings className="h-5 w-5" />,
     },
 ];
 

src/app/[orgId]/settings/resources/[resourceId]/components/ResourceInfoBox.tsx

@@ -48,7 +48,7 @@ export default function ResourceInfoBox({}: ResourceInfoBoxType) {
                             href={fullUrl}
                             target="_blank"
                             rel="noopener noreferrer"
-                            className="text-sm font-mono flex-grow hover:underline"
+                            className="text-sm font-mono flex-grow hover:underline truncate"
                         >
                             {fullUrl}
                         </a>

src/app/[orgId]/settings/resources/[resourceId]/layout.tsx

@@ -6,7 +6,7 @@ import { redirect } from "next/navigation";
 import { authCookieHeader } from "@app/api/cookies";
 import { SidebarSettings } from "@app/components/SidebarSettings";
 import Link from "next/link";
-import { ArrowLeft } from "lucide-react";
+import { ArrowLeft, Cloud, Settings, Shield } from "lucide-react";
 import SettingsSectionTitle from "@app/components/SettingsSectionTitle";
 import { GetOrgResponse } from "@server/routers/org";
 import OrgProvider from "@app/providers/OrgProvider";
@@ -60,14 +60,17 @@ export default async function ResourceLayout(props: ResourceLayoutProps) {
         {
             title: "General",
             href: `/{orgId}/settings/resources/{resourceId}/general`,
+            icon: <Settings className="w-4 h-4" />,
         },
         {
             title: "Connectivity",
             href: `/{orgId}/settings/resources/{resourceId}/connectivity`,
+            icon: <Cloud className="w-4 h-4" />,
         },
         {
             title: "Authentication",
             href: `/{orgId}/settings/resources/{resourceId}/authentication`,
+            icon: <Shield className="w-4 h-4" />,
         },
     ];
 

src/app/layout.tsx

@@ -1,6 +1,6 @@
 import type { Metadata } from "next";
 import "./globals.css";
-import { Fira_Sans, Inter } from "next/font/google";
+import { Fira_Sans, Inter, Noto_Sans_Mono, Roboto_Mono } from "next/font/google";
 import { Toaster } from "@/components/ui/toaster";
 import { ThemeProvider } from "@app/providers/ThemeProvider";
 
@@ -10,6 +10,7 @@ export const metadata: Metadata = {
 };
 
 const font = Inter({ subsets: ["latin"] });
+// const font = Noto_Sans_Mono({ subsets: ["latin"] });
 
 export default async function RootLayout({
     children,

src/components/SidebarSettings.tsx

@@ -1,10 +1,15 @@
 "use client";
 
 import { SidebarNav } from "@app/components/sidebar-nav";
+import React from "react";
 
 interface SideBarSettingsProps {
     children: React.ReactNode;
-    sidebarNavItems: Array<{ title: string; href: string }>;
+    sidebarNavItems: Array<{
+        title: string;
+        href: string;
+        icon?: React.ReactNode;
+    }>;
     disabled?: boolean;
     limitWidth?: boolean;
 }

src/components/sidebar-nav.tsx

@@ -17,6 +17,7 @@ interface SidebarNavProps extends React.HTMLAttributes<HTMLElement> {
     items: {
         href: string;
         title: string;
+        icon?: React.ReactNode;
     }[];
     disabled?: boolean;
 }
@@ -105,7 +106,14 @@ export function SidebarNav({
                         tabIndex={disabled ? -1 : undefined}
                         aria-disabled={disabled}
                     >
-                        {item.title}
+                        {item.icon ? (
+                            <div className="flex items-center space-x-2">
+                                {item.icon}
+                                <span>{item.title}</span>
+                            </div>
+                        ) : (
+                            item.title
+                        )}
                     </Link>
                 ))}
             </nav>