Fix SPN missing info message

modules/portmaster/src/app/shared/netquery/connection-details/conn-details.html

@@ -74,7 +74,7 @@
       <span>{{ conn.encrypted ? 'yes' : 'no' }}</span>
     </span>
     <span sfngAddToFilter="tunneled" [sfngAddToFilterValue]="conn.tunneled">
-      <span>Tunneled:</span>
+      <span>SPN Protected:</span>
       <span>{{ conn.tunneled ? 'yes' : 'no' }}</span>
     </span>
 
@@ -216,14 +216,14 @@
 
   <div *ngIf="conn.scope === scopes.Global">
     <h3 class="text-primary text-xxs">SPN Tunnel</h3>
-    <ng-template #noSPNTemplate>
-      <span class="inline-flex items-center gap-2 text-secondary">
-        This connection has not been routed through the Safing Privacy Network
-        <sfng-tipup key="spn"></sfng-tipup>
-      </span>
-    </ng-template>
-    <div class="meta" *ngIf="conn.extra_data?.tunnel as tunnel; else: noSPNTemplate">
-      <div>
+    <ng-container [ngSwitch]="true">
+    <span *ngSwitchCase="!conn.tunneled" class="inline-flex items-center gap-2 text-secondary">
+      This connection has not been routed through the Safing Privacy Network.
+      <sfng-tipup key="spn"></sfng-tipup>
+    </span>
+
+    <div *ngSwitchCase="!!conn.extra_data?.tunnel" class="meta">
+      <div *ngIf="conn.extra_data?.tunnel as tunnel">
         <span>
           <span></span>
           <span class="tunnel-path">
@@ -291,14 +291,19 @@ <h3 class="text-primary text-xxs">SPN Tunnel</h3>
       <div *appExpertiseLevel="'developer'" class="flex flex-col items-start justify-start gap-1 mt-2">
         <span class="flex flex-row items-center gap-2">
           <span class="text-secondary">Path Costs:</span>
-          <span>{{ tunnel.PathCost }}</span>
+          <span>{{ conn.extra_data?.tunnel?.PathCost }}</span>
         </span>
         <span class="flex flex-row items-center gap-2">
           <span class="text-secondary">Routing Algorithm:</span>
-          <span>{{ tunnel.RoutingAlg }}</span>
+          <span>{{ conn.extra_data?.tunnel?.RoutingAlg }}</span>
         </span>
       </div>
     </div>
+
+    <span *ngSwitchDefault class="inline-flex items-center gap-2 text-secondary">
+      The connection was routed through the Safing Privacy Network, but the tunnel information is not available. Try reloading the connections.
+    </span>
+    </ng-container>
   </div>