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

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
+	}
+
+	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:   net.ParseIP(value),
-			LastUpdated: time.Now(),
+		IPAddress:   ip,
+		LastUpdated: ps.lastUpdated,
 	}, nil
-	}
-
-	return nil, fmt.Errorf("no IP address found")
 }
 
 // checkAPI uses the API endpoint to get the public IP address

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();
 
@@ -76,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>