remote node changes

src/app/[orgId]/settings/(private)/remote-exit-nodes/[remoteExitNodeId]/credentials/page.tsx

@@ -131,10 +131,10 @@ export default function CredentialsPage() {
                 <SettingsSection>
                     <SettingsSectionHeader>
                         <SettingsSectionTitle>
-                            {t("generatedcredentials")}
+                            {t("credentials")}
                         </SettingsSectionTitle>
                         <SettingsSectionDescription>
-                            {t("regenerateCredentials")}
+                            {t("remoteNodeCredentialsDescription")}
                         </SettingsSectionDescription>
                     </SettingsSectionHeader>
                     <SettingsSectionBody>
@@ -143,7 +143,7 @@ export default function CredentialsPage() {
                         <InfoSections cols={3}>
                             <InfoSection>
                                 <InfoSectionTitle>
-                                    {t("endpoint") || "Endpoint"}
+                                    {t("endpoint")}
                                 </InfoSectionTitle>
                                 <InfoSectionContent>
                                     <CopyToClipboard
@@ -153,8 +153,7 @@ export default function CredentialsPage() {
                             </InfoSection>
                             <InfoSection>
                                 <InfoSectionTitle>
-                                    {t("remoteExitNodeId") ||
-                                        "Remote Exit Node ID"}
+                                    {t("remoteExitNodeId")}
                                 </InfoSectionTitle>
                                 <InfoSectionContent>
                                     {displayRemoteExitNodeId ? (
@@ -168,7 +167,7 @@ export default function CredentialsPage() {
                             </InfoSection>
                             <InfoSection>
                                 <InfoSectionTitle>
-                                    {t("secretKey") || "Secret Key"}
+                                    {t("remoteExitNodeSecretKey")}
                                 </InfoSectionTitle>
                                 <InfoSectionContent>
                                     {displaySecret ? (

src/app/[orgId]/settings/(private)/remote-exit-nodes/[remoteExitNodeId]/layout.tsx

@@ -43,7 +43,7 @@ export default async function SettingsLayout(props: SettingsLayoutProps) {
     return (
         <>
             <SettingsSectionTitle
-                title={`Remote Exit Node ${remoteExitNode?.name || "Unknown"}`}
+                title={`Remote Node ${remoteExitNode?.name || "Unknown"}`}
                 description="Manage your remote exit node settings and configuration"
             />
 

src/app/[orgId]/settings/(private)/remote-exit-nodes/page.tsx

@@ -2,7 +2,9 @@ import { internal } from "@app/lib/api";
 import { authCookieHeader } from "@app/lib/api/cookies";
 import { ListRemoteExitNodesResponse } from "@server/routers/remoteExitNode/types";
 import { AxiosResponse } from "axios";
-import ExitNodesTable, { RemoteExitNodeRow } from "./ExitNodesTable";
+import ExitNodesTable, {
+    RemoteExitNodeRow
+} from "@app/components/ExitNodesTable";
 import SettingsSectionTitle from "@app/components/SettingsSectionTitle";
 import { getTranslations } from "next-intl/server";
 

src/app/[orgId]/settings/sites/page.tsx

@@ -53,7 +53,8 @@ export default async function SitesPage(props: SitesPageProps) {
             newtVersion: site.newtVersion || undefined,
             newtUpdateAvailable: site.newtUpdateAvailable || false,
             exitNodeName: site.exitNodeName || undefined,
-            exitNodeEndpoint: site.exitNodeEndpoint || undefined
+            exitNodeEndpoint: site.exitNodeEndpoint || undefined,
+            remoteExitNodeId: (site as any).remoteExitNodeId || undefined
         };
     });
 

src/components/ConfirmDeleteDialog.tsx

@@ -116,7 +116,12 @@ export default function ConfirmDeleteDialog({
                                     render={({ field }) => (
                                         <FormItem>
                                             <FormControl>
-                                                <Input {...field} />
+                                                <Input
+                                                    {...field}
+                                                    placeholder={t(
+                                                        "enterConfirmation"
+                                                    )}
+                                                />
                                             </FormControl>
                                             <FormMessage />
                                         </FormItem>

src/components/ExitNodeInfoCard.tsx

@@ -19,7 +19,7 @@ export default function ExitNodeInfoCard({}: ExitNodeInfoCardProps) {
 
     return (
         <Alert>
-            <AlertDescription className="mt-4">
+            <AlertDescription>
                 <InfoSections cols={2}>
                     <>
                         <InfoSection>

src/components/ExitNodesDataTable.tsx

@@ -10,6 +10,8 @@ interface DataTableProps<TData, TValue> {
     createRemoteExitNode?: () => void;
     onRefresh?: () => void;
     isRefreshing?: boolean;
+    columnVisibility?: Record<string, boolean>;
+    enableColumnVisibility?: boolean;
 }
 
 export function ExitNodesDataTable<TData, TValue>({
@@ -17,7 +19,9 @@ export function ExitNodesDataTable<TData, TValue>({
     data,
     createRemoteExitNode,
     onRefresh,
-    isRefreshing
+    isRefreshing,
+    columnVisibility,
+    enableColumnVisibility
 }: DataTableProps<TData, TValue>) {
     const t = useTranslations();
 
@@ -36,6 +40,10 @@ export function ExitNodesDataTable<TData, TValue>({
                 id: "name",
                 desc: false
             }}
+            columnVisibility={columnVisibility}
+            enableColumnVisibility={enableColumnVisibility}
+            stickyLeftColumn="name"
+            stickyRightColumn="actions"
         />
     );
 }

src/components/ExitNodesTable.tsx

@@ -2,7 +2,7 @@
 
 import { ColumnDef } from "@tanstack/react-table";
 import { ExtendedColumnDef } from "@app/components/ui/data-table";
-import { ExitNodesDataTable } from "./ExitNodesDataTable";
+import { ExitNodesDataTable } from "@app/components/ExitNodesDataTable";
 import {
     DropdownMenu,
     DropdownMenuContent,
@@ -246,12 +246,13 @@ export default function ExitNodesTable({
         },
         {
             id: "actions",
-            header: () => <span className="p-3">{t("actions")}</span>,
+            enableHiding: false,
+            header: () => <span className="p-3"></span>,
             cell: ({ row }) => {
                 const nodeRow = row.original;
                 const remoteExitNodeId = nodeRow.id;
                 return (
-                    <div className="flex items-center gap-2">
+                    <div className="flex items-center gap-2 justify-end">
                         <DropdownMenu>
                             <DropdownMenuTrigger asChild>
                                 <Button variant="ghost" className="h-8 w-8 p-0">
@@ -283,7 +284,7 @@ export default function ExitNodesTable({
                         <Link
                             href={`/${nodeRow.orgId}/settings/remote-exit-nodes/${remoteExitNodeId}`}
                         >
-                            <Button variant={"secondary"} size="sm">
+                            <Button variant={"outline"}>
                                 {t("edit")}
                                 <ArrowRight className="ml-2 w-4 h-4" />
                             </Button>
@@ -327,6 +328,11 @@ export default function ExitNodesTable({
                 }
                 onRefresh={refreshData}
                 isRefreshing={isRefreshing}
+                columnVisibility={{
+                    type: false,
+                    address: false,
+                }}
+                enableColumnVisibility={true}
             />
         </>
     );

src/components/HorizontalTabs.tsx

@@ -39,7 +39,8 @@ export function HorizontalTabs({
             .replace("{niceId}", params.niceId as string)
             .replace("{userId}", params.userId as string)
             .replace("{clientId}", params.clientId as string)
-            .replace("{apiKeyId}", params.apiKeyId as string);
+            .replace("{apiKeyId}", params.apiKeyId as string)
+            .replace("{remoteExitNodeId}", params.remoteExitNodeId as string);
     }
 
     return (

src/components/SitesTable.tsx

@@ -13,6 +13,7 @@ import { Button } from "@app/components/ui/button";
 import {
     ArrowRight,
     ArrowUpDown,
+    ArrowUpRight,
     Check,
     MoreHorizontal,
     X
@@ -46,6 +47,7 @@ export type SiteRow = {
     address?: string;
     exitNodeName?: string;
     exitNodeEndpoint?: string;
+    remoteExitNodeId?: string;
 };
 
 type SitesTableProps = {
@@ -303,27 +305,51 @@ export default function SitesTable({ sites, orgId }: SitesTableProps) {
             },
             cell: ({ row }) => {
                 const originalRow = row.original;
-                return originalRow.exitNodeName ? (
-                    <div className="flex items-center space-x-2">
-                        <span>{originalRow.exitNodeName}</span>
-                        {build == "saas" &&
-                            originalRow.exitNodeName &&
-                            [
-                                "mercury",
-                                "venus",
-                                "earth",
-                                "mars",
-                                "jupiter",
-                                "saturn",
-                                "uranus",
-                                "neptune"
-                            ].includes(
-                                originalRow.exitNodeName.toLowerCase()
-                            ) && <Badge variant="secondary">Cloud</Badge>}
-                    </div>
-                ) : (
-                    "-"
-                );
+                if (!originalRow.exitNodeName) {
+                    return "-";
+                }
+
+                const isCloudNode =
+                    build == "saas" &&
+                    originalRow.exitNodeName &&
+                    [
+                        "mercury",
+                        "venus",
+                        "earth",
+                        "mars",
+                        "jupiter",
+                        "saturn",
+                        "uranus",
+                        "neptune"
+                    ].includes(originalRow.exitNodeName.toLowerCase());
+
+                if (isCloudNode) {
+                    const capitalizedName =
+                        originalRow.exitNodeName.charAt(0).toUpperCase() +
+                        originalRow.exitNodeName.slice(1).toLowerCase();
+                    return (
+                        <Badge variant="secondary">
+                            Pangolin {capitalizedName}
+                        </Badge>
+                    );
+                }
+
+                // Self-hosted node
+                if (originalRow.remoteExitNodeId) {
+                    return (
+                        <Link
+                            href={`/${originalRow.orgId}/settings/remote-exit-nodes/${originalRow.remoteExitNodeId}`}
+                        >
+                            <Button variant="outline">
+                                {originalRow.exitNodeName}
+                                <ArrowUpRight className="ml-2 h-4 w-4" />
+                            </Button>
+                        </Link>
+                    );
+                }
+
+                // Fallback if no remoteExitNodeId
+                return <span>{originalRow.exitNodeName}</span>;
             }
         },
         {