feat(desktop/setup): improve addresses display

apps/client/src/setup.css

@@ -311,15 +311,20 @@ body.setup {
     }
 
     .ip-addresses {
-        min-width: 200px;
+        min-width: 250px;
         user-select: text;
         display: flex;
         flex-direction: column;
         font-family: var(--monospace-font-family);
+        font-size: 0.9em;
 
         .tn-card-body {
             overflow: auto;
             padding-bottom: 0.5em;
+
+            > :first-child {
+                font-weight: bold;
+            }
         }
     }
 }

apps/client/src/setup.tsx

@@ -378,7 +378,7 @@ function SyncFromDesktop({ setState }: { setState: (state: State) => void }) {
             {networkAddresses.length > 0 && (
                 <Card heading={t("setup.your-ip-addresses")} className="ip-addresses">
                     {networkAddresses.map((addr) => (
-                        <CardSection key={addr}>{addr}</CardSection>
+                        <CardSection key={addr}>{`${location.protocol}//${addr}:${location.port}`}</CardSection>
                     ))}
                 </Card>
             )}
@@ -484,7 +484,18 @@ function getNetworkAddresses(): string[] {
         }
     }
 
+    // Sort by likelihood of being the local network address.
+    addresses.sort((a, b) => networkScore(a) - networkScore(b));
+
     return addresses;
 }
 
+function networkScore(addr: string): number {
+    if (addr.startsWith("192.168.")) return 0;
+    if (addr.startsWith("10.")) return 1;
+    if (/^172\.(1[6-9]|2\d|3[01])\./.test(addr)) return 2;
+    if (addr.includes(":")) return 4; // IPv6
+    return 3;
+}
+
 main();

apps/client/src/translations/en/translation.json

@@ -2280,6 +2280,6 @@
     "wrong-password": "Incorrect password. Please try again.",
     "language": "Language",
     "continue": "Continue",
-    "your-ip-addresses": "Your IP addresses"
+    "your-ip-addresses": "Addresses for this device"
   }
 }