From 79c53b58f79493d3fc91aca8f3c913e181c9fa98 Mon Sep 17 00:00:00 2001
From: alphaeusmote <41258468-alphaeusmote@users.noreply.replit.com>
Date: Fri, 11 Apr 2025 15:40:19 +0000
Subject: [PATCH] Improve display of auto-managed IP addresses by adding a
 collapsible button showing the full IP and moving "AutoIP" status to a
 separate column.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 9111ef36-26c8-4085-84ca-a35dc1fec1b5
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/7083d608-d6d3-4a6a-9a27-6286c5109627/bf3d6a43-7ba9-4b79-b715-e3400ef33ab6.jpg
---
 .../src/components/domain/domain-details.tsx  | 53 ++++++++++++++++---
 1 file changed, 46 insertions(+), 7 deletions(-)

diff --git a/client/src/components/domain/domain-details.tsx b/client/src/components/domain/domain-details.tsx
index c43076f..aa9f493 100644
--- a/client/src/components/domain/domain-details.tsx
+++ b/client/src/components/domain/domain-details.tsx
@@ -61,7 +61,7 @@ import {
 } from "@/components/ui/tooltip";
 import { RecentActivity } from "@/components/activity/recent-activity";
 import { Pagination } from "@/components/shared/pagination";
-import { Loader2, FileText, Pencil, Trash2, Plus } from "lucide-react";
+import { Loader2, FileText, Pencil, Trash2, Plus, Copy } from "lucide-react";
 import { formatDistanceToNow } from "date-fns";
 
 // DNS Record form schema
@@ -465,18 +465,14 @@ export function DomainDetails({ domain, onBack }: DomainDetailsProps) {
                           <TooltipTrigger asChild>
                             <span className="truncate max-w-[150px] inline-block">
                               {record.isAutoIP 
-                                ? (record.currentIp 
-                                  ? `Auto IP (${record.currentIp})` 
-                                  : "Auto IP") 
+                                ? "Auto-managed" 
                                 : record.content}
                             </span>
                           </TooltipTrigger>
                           <TooltipContent>
                             <p>
                               {record.isAutoIP 
-                                ? (record.currentIp 
-                                  ? <>Auto IP - Current value: <strong>{record.currentIp}</strong></> 
-                                  : "Auto IP - Resolving current IP...")
+                                ? "Content automatically managed by AutoIP" 
                                 : record.content}
                             </p>
                             {record.notes && (
@@ -489,6 +485,49 @@ export function DomainDetails({ domain, onBack }: DomainDetailsProps) {
                         </Tooltip>
                       </TooltipProvider>
                     </TableCell>
+                    <TableCell>
+                      {record.isAutoIP ? (
+                        <div className="flex items-center gap-2">
+                          <Badge variant="outline" className="bg-blue-50 text-blue-600 border-blue-200">
+                            Enabled
+                          </Badge>
+                          {record.currentIp && (
+                            <TooltipProvider>
+                              <Tooltip>
+                                <TooltipTrigger asChild>
+                                  <Button 
+                                    variant="ghost" 
+                                    size="sm"
+                                    className="h-7 px-2 text-xs font-mono"
+                                    onClick={() => {
+                                      navigator.clipboard.writeText(record.currentIp || '');
+                                      toast({
+                                        title: "IP copied to clipboard",
+                                        description: record.currentIp,
+                                        duration: 2000
+                                      });
+                                    }}
+                                  >
+                                    <span className="flex items-center gap-1">
+                                      {record.currentIp.substring(0, 10)}...
+                                      <Copy className="h-3 w-3" />
+                                    </span>
+                                  </Button>
+                                </TooltipTrigger>
+                                <TooltipContent>
+                                  <p className="font-mono">{record.currentIp}</p>
+                                  <p className="text-xs mt-1">Click to copy</p>
+                                </TooltipContent>
+                              </Tooltip>
+                            </TooltipProvider>
+                          )}
+                        </div>
+                      ) : (
+                        <Badge variant="outline" className="bg-gray-50 text-gray-500 border-gray-200">
+                          Disabled
+                        </Badge>
+                      )}
+                    </TableCell>
                     <TableCell>{record.ttl}s</TableCell>
                     <TableCell>
                       {record.lastUpdated