Add proxy information when host proxy is set for current tab

src/components/ProxyStatus/ProxyGlobal.vue

@@ -23,7 +23,7 @@ const handleSetGlobalProxy = () => {
 <template>
   <n-card :bordered="false" class="mb-4">
     <div class="flex justify-between">
-      <TitleCategory title="For all websites" />
+      <TitleCategory title="Proxy for all websites" />
       <n-tooltip>
         <template #trigger>
           <n-switch :value="globalProxyEnabled" @update-value="handleSetGlobalProxy" />

src/components/ProxyStatus/ProxyHost.vue

@@ -19,9 +19,9 @@ const { currentHostProxyDetails, currentHostProxyEnabled, toggleCurrentHostProxy
   useSocksProxy();
 const { excludedHosts } = useStore();
 
-const title = computed(() => `For this website (${activeTabHost.value})`);
+const title = computed(() => `Proxy for ${activeTabHost.value}`);
 
-const isExcluded = computed(() => excludedHosts.value.includes(activeTabHost.value));
+const currentHostExcluded = computed(() => excludedHosts.value.includes(activeTabHost.value));
 const isWireGuard = computed(() => connection.value.protocol?.includes('WireGuard'));
 
 const neverProxyHost = () => {
@@ -36,29 +36,13 @@ const handleHostProxySelect = () => {
   hostProxySelect.value = true;
   toggleLocations();
 };
-
-// const instructions = ref('');
-
-// watchEffect(() => {
-//   let message = '';
-
-//   if (currentHostProxyEnabled.value) {
-//     message = `Only this website is configured to use the following proxy.`;
-//   } else if (isExcluded.value) {
-//     message = 'The website is configured to never use a proxy.';
-//   } else if (globalProxyEnabled.value) {
-//     message = 'The website loads through the proxy for all websites.';
-//   }
-
-//   instructions.value = message;
-// });
 </script>
 
 <template>
   <n-card :bordered="false" class="mb-4">
     <div class="flex justify-between">
       <TitleCategory :title="title" />
-      <n-tooltip v-if="!isExcluded">
+      <n-tooltip v-if="!currentHostExcluded">
         <template #trigger>
           <n-switch :value="currentHostProxyEnabled" @update-value="toggleCurrentHostProxy" />
         </template>
@@ -67,15 +51,13 @@ const handleHostProxySelect = () => {
     </div>
 
     <CurrentProxyDetails
-      v-if="currentHostProxyDetails && !isExcluded"
+      v-if="currentHostProxyDetails && !currentHostExcluded"
       :proxy-details="currentHostProxyDetails"
     />
 
-    <!-- <IconLabel :text="instructions" type="info" class="mb-8 mt-6" /> -->
-
     <div v-if="isWireGuard" class="mb-3">
       <Button
-        v-if="isExcluded"
+        v-if="currentHostExcluded"
         color="success"
         class="flex items-center justify-center"
         @click="allowProxy"

src/composables/useSocksProxy.ts

@@ -16,10 +16,14 @@ const { activeTabHost } = useActiveTab();
 const { connection, updateConnection } = useConnection();
 const { globalProxy, globalProxyDetails, hostProxies, hostProxiesDetails } = useStore();
 
-const currentHostProxyDetails = computed(() => hostProxiesDetails.value[activeTabHost.value]);
+const currentHostProxyDetails = computed(
+  () => hostProxiesDetails.value[activeTabHost.value] || null,
+);
 
 const globalProxyEnabled = computed(() => globalProxyDetails.value.socksEnabled);
-const currentHostProxyEnabled = computed(() => currentHostProxyDetails.value.socksEnabled);
+const currentHostProxyEnabled = computed(
+  () => currentHostProxyDetails.value?.socksEnabled ?? false,
+);
 
 const baseConfig: Partial<ProxyInfo> = {
   port: 1080,

src/popup/views/Home.vue

@@ -1,16 +1,21 @@
 <script lang="ts" setup>
-import { inject, watch } from 'vue';
+import { computed, inject, watch } from 'vue';
+import { NTag } from 'naive-ui';
 
-import NotificationsCarousel from '@/components/NotificationsCarousel.vue';
 import ConnectionDetails from '@/components/ConnectionDetails/ConnectionDetails.vue';
+import NotificationsCarousel from '@/components/NotificationsCarousel.vue';
 
-import useConnection, { ConnectionKey, defaultConnection } from '@/composables/useConnection';
+import useActiveTab from '@/composables/useActiveTab';
+import { ConnectionKey, defaultConnection } from '@/composables/useConnection';
 import useSocksProxy from '@/composables/useSocksProxy';
+import useStore from '@/composables/useStore';
 
-const { initProxies } = useSocksProxy();
-const { connection } = useConnection();
+const { activeTabHost } = useActiveTab();
+const { currentHostProxyEnabled, initProxies } = useSocksProxy();
+const { excludedHosts } = useStore();
+const { isLoading, connection } = inject(ConnectionKey, defaultConnection);
 
-const { isLoading } = inject(ConnectionKey, defaultConnection);
+const currentHostExcluded = computed(() => excludedHosts.value.includes(activeTabHost.value));
 
 watch(connection, async () => {
   // Make sure the proxies always have some value on popup start
@@ -29,4 +34,11 @@ watch(connection, async () => {
 <template>
   <NotificationsCarousel v-if="!isLoading" />
   <ConnectionDetails />
+
+  <n-tag v-if="currentHostExcluded" round :bordered="false" type="info">
+    <strong>{{ activeTabHost }}</strong> is set to never be proxied
+  </n-tag>
+  <n-tag v-else-if="currentHostProxyEnabled" round :bordered="false" type="info">
+    <strong>{{ activeTabHost }}</strong> is set to use a domain specific proxy
+  </n-tag>
 </template>

src/popup/views/Proxy.vue

@@ -2,18 +2,15 @@
 import { computed, inject } from 'vue';
 import { NTag } from 'naive-ui';
 
-import FeCheck from '@/components/Icons/FeCheck.vue';
 import FeInfo from '@/components/Icons/FeInfo.vue';
 import LocationDrawer from '@/components/ConnectionDetails/LocationDrawer.vue';
 import ProxyGlobal from '@/components/ProxyStatus/ProxyGlobal.vue';
 import ProxyHost from '@/components/ProxyStatus/ProxyHost.vue';
 
 import useActiveTab from '@/composables/useActiveTab';
 import { ConnectionKey, defaultConnection } from '@/composables/useConnection';
-import useSocksProxy from '@/composables/useSocksProxy';
 
-const { activeTabHost, isAboutPage } = useActiveTab();
-const { globalProxyEnabled } = useSocksProxy();
+const { isAboutPage } = useActiveTab();
 const { connection } = inject(ConnectionKey, defaultConnection);
 
 // Only allow connecting to Proxy if the user is connected to Mullvad
@@ -27,23 +24,6 @@ const canUseProxy = computed(() => connection.value.isMullvad);
       <FeInfo />
     </template>
   </n-tag>
-  <div>
-    <!-- TODO move this to the status tab and add a link back to the proxy tab -->
-    <!-- TODO add the exclusion state -->
-    <n-tag v-if="globalProxyEnabled" round :bordered="false" type="success">
-      {{ activeTabHost }} currently uses the global proxy
-      <template #icon>
-        <FeCheck />
-      </template>
-    </n-tag>
-
-    <n-tag v-else round :bordered="false" type="info">
-      No proxy set for <em>{{ activeTabHost }}</em>
-      <template #icon>
-        <FeInfo />
-      </template>
-    </n-tag>
-  </div>
 
   <ProxyHost v-if="!isAboutPage" />
   <ProxyGlobal />