cosm(public-ip): update public IP card to show last updated time

network.go

@@ -110,6 +110,13 @@ func triggerTimeSyncOnNetworkStateChange() {
 	}()
 }
 
+func setPublicIPReadyState(ipv4Ready, ipv6Ready bool) {
+	if publicIPState == nil {
+		return
+	}
+	publicIPState.SetIPv4AndIPv6(ipv4Ready, ipv6Ready)
+}
+
 func networkStateChanged(_ string, state types.InterfaceState) {
 	// do not block the main thread
 	go waitCtrlAndRequestDisplayUpdate(true, "network_state_changed")
@@ -121,16 +128,10 @@ func networkStateChanged(_ string, state types.InterfaceState) {
 	if state.Online {
 		networkLogger.Info().Msg("network state changed to online, triggering time sync")
 		triggerTimeSyncOnNetworkStateChange()
-
-		if publicIPState != nil {
-			publicIPState.SetIPv4AndIPv6(state.IPv4Ready, state.IPv6Ready)
-		}
-	} else {
-		if publicIPState != nil {
-			publicIPState.SetIPv4AndIPv6(false, false)
-		}
 	}
 
+	setPublicIPReadyState(state.IPv4Ready, state.IPv6Ready)
+
 	// always restart mDNS when the network state changes
 	if mDNS != nil {
 		restartMdns()

pkg/myip/check.go

@@ -7,6 +7,7 @@ import (
 	"net"
 	"net/http"
 	"net/url"
+	"strconv"
 	"strings"
 	"sync"
 	"time"
@@ -52,19 +53,36 @@ func (ps *PublicIPState) checkCloudflare(ctx context.Context, family int) (*Publ
 		return nil, err
 	}
 
+	values := make(map[string]string)
 	for line := range strings.SplitSeq(string(body), "\n") {
 		key, value, ok := strings.Cut(line, "=")
-		if !ok || key != "ip" {
+		if !ok {
 			continue
 		}
-
+		values[key] = value
-		return &PublicIP{
-			IPAddress:   net.ParseIP(value),
-			LastUpdated: time.Now(),
-		}, nil
 	}
 
-	return nil, fmt.Errorf("no IP address found")
+	ps.lastUpdated = time.Now()
+	if ts, ok := values["ts"]; ok {
+		if ts, err := strconv.ParseFloat(ts, 64); err == nil {
+			ps.lastUpdated = time.Unix(int64(ts), 0)
+		}
+	}
+
+	ipStr, ok := values["ip"]
+	if !ok {
+		return nil, fmt.Errorf("no IP address found")
+	}
+
+	ip := net.ParseIP(ipStr)
+	if ip == nil {
+		return nil, fmt.Errorf("invalid IP address: %s", ipStr)
+	}
+
+	return &PublicIP{
+		IPAddress:   ip,
+		LastUpdated: ps.lastUpdated,
+	}, nil
 }
 
 // checkAPI uses the API endpoint to get the public IP address

pkg/myip/ip.go

@@ -92,22 +92,6 @@ func (ps *PublicIPState) SetIPv4AndIPv6(ipv4, ipv6 bool) {
 	ps.ipv6 = ipv6
 }
 
-// SetIPv4 sets if we need to track IPv4 public IP addresses
-func (ps *PublicIPState) SetIPv4(ipv4 bool) {
-	ps.mu.Lock()
-	defer ps.mu.Unlock()
-
-	ps.ipv4 = ipv4
-}
-
-// SetIPv6 sets if we need to track IPv6 public IP addresses
-func (ps *PublicIPState) SetIPv6(ipv6 bool) {
-	ps.mu.Lock()
-	defer ps.mu.Unlock()
-
-	ps.ipv6 = ipv6
-}
-
 // SetCloudflareEndpoint sets the Cloudflare endpoint
 func (ps *PublicIPState) SetCloudflareEndpoint(endpoint string) {
 	ps.mu.Lock()

ui/src/components/PublicIPCard.tsx

@@ -7,8 +7,25 @@ import { PublicIP } from "@hooks/stores";
 import { m } from "@localizations/messages.js";
 import { JsonRpcResponse, useJsonRpc } from "@hooks/useJsonRpc";
 import notifications from "@/notifications";
+import { formatters } from "@/utils";
 
 
+const TimeAgoLabel = ({ date }: { date: Date }) => {
+  const [timeAgo, setTimeAgo] = useState<string | undefined>(formatters.timeAgo(date));
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setTimeAgo(formatters.timeAgo(date));
+    }, 1000);
+    return () => clearInterval(interval);
+  }, [date]);
+
+  return (
+    <span className="text-sm text-slate-600 dark:text-slate-400 select-none">
+      {timeAgo}
+    </span>
+  );
+};
+
 export default function PublicIPCard() {
   const { send } = useJsonRpc();
 
@@ -21,6 +38,8 @@ export default function PublicIPCard() {
         return;
       }
       const publicIPs = resp.result as PublicIP[];
+      // sort the public IPs by IP address
+      // IPv6 addresses are sorted after IPv4 addresses
       setPublicIPs(publicIPs.sort(({ ip: aIp }, { ip: bIp }) => {
         const aIsIPv6 = aIp.includes(":");
         const bIsIPv6 = bIp.includes(":");
@@ -74,6 +93,7 @@ export default function PublicIPCard() {
                     <span className="text-sm font-medium">
                       {ip.ip}
                     </span>
+                    {ip.last_updated && <TimeAgoLabel date={new Date(ip.last_updated)} />}
                   </div>
                 ))}
               </div>