Explicitly tell when Mullvad Encrypted DNS is in use

src/components/ConnectionDetails/AdvancedDns.vue

@@ -3,11 +3,8 @@ import IconLabel from '@/components/IconLabel.vue';
 import MuSpinner from '@/components/Icons/MuSpinner.vue';
 
 import useCheckDnsLeaks from '@/composables/useCheckDnsLeaks';
-import { ConnectionKey, defaultConnection } from '@/composables/useConnection';
-import { inject } from 'vue';
 
 const { dnsServers, isLoading, isError } = useCheckDnsLeaks();
-const { connection } = inject(ConnectionKey, defaultConnection);
 </script>
 
 <template>
@@ -24,7 +21,7 @@ const { connection } = inject(ConnectionKey, defaultConnection);
     <div v-else>
       <div v-for="dnsServer in dnsServers" :key="dnsServer.ip">
         <IconLabel
-          v-if="connection.isMullvad"
+          v-if="dnsServer.mullvad_dns"
           :text="`${dnsServer.ip} (${
             dnsServer.mullvad_dns_hostname ||
             dnsServer.hostname ||

src/components/ConnectionDetails/ConnectionDetails.vue

@@ -59,10 +59,8 @@ const { isLoading, isError, connection } = inject(ConnectionKey, defaultConnecti
           <h4 class="font-semibold">Provider</h4>
           <div class="ml-2">{{ connection.provider }}</div>
         </div>
-        <div class="flex">
-          <h4 class="font-semibold">DNS Server(s)</h4>
-          <AdvancedDns class="ml-2" />
-        </div>
+        <DnsLeakStatus class="text-lg mt-2" />
+        <AdvancedDns class="ml-8" />
       </div>
     </div>
   </div>

src/components/ConnectionStatus/DnsLeakStatus.vue

@@ -1,13 +1,27 @@
 <script lang="ts" setup>
-import { computed } from 'vue';
+import { computed, inject } from 'vue';
 
 import IconLabel from '@/components/IconLabel.vue';
 
 import useCheckDnsLeaks from '@/composables/useCheckDnsLeaks';
+import { ConnectionKey, defaultConnection } from '@/composables/useConnection';
 
-const { isLeaking, isLoading, isError } = useCheckDnsLeaks();
-const labelText = computed(() => (isLeaking.value ? 'Leaking DNS servers' : 'No DNS Leaks'));
-const iconType = computed(() => (isLeaking.value ? 'leak' : 'success'));
+const { isLeaking, isLoading, isError, isMullvadDoh } = useCheckDnsLeaks();
+const { connection } = inject(ConnectionKey, defaultConnection);
+
+const labelText = computed(() => {
+  if (isLeaking.value) {
+    return connection.value.isMullvad ? 'Leaking DNS servers' : 'Not using Mullvad Encrypted DNS';
+  }
+  return isMullvadDoh.value ? 'Using Mullvad Encrypted DNS' : 'Using Mullvad DNS';
+});
+
+const iconType = computed(() => {
+  if (isLeaking.value) {
+    return connection.value.isMullvad ? 'leak' : 'warning';
+  }
+  return 'success';
+});
 </script>
 
 <template>