Display proxies as global/host cards

src/components/ProxyStatus/ProxyGlobal.vue

@@ -0,0 +1,36 @@
+<script lang="ts" setup>
+import { NCard, NTag } from 'naive-ui';
+
+import CurrentProxyDetails from '@/components/CurrentProxyDetails.vue';
+import FeCheck from '@/components/Icons/FeCheck.vue';
+import LocationDrawer from '@/components/ConnectionDetails/LocationDrawer.vue';
+import ProxyButton from '@/components/ProxyStatus/ProxyButton.vue';
+import TitleCategory from '@/components/TitleCategory.vue';
+
+import useSocksProxy from '@/composables/useSocksProxy';
+import useStore from '@/composables/useStore';
+
+const { globalProxyEnabled } = useSocksProxy();
+const { globalProxyDetails } = useStore();
+</script>
+
+<template>
+  <n-card id="leta-settings" :bordered="false" class="mb-4">
+    <div class="flex justify-between">
+      <TitleCategory title="Proxy for all websites" />
+      <n-tag v-if="globalProxyEnabled" round :bordered="false" type="success">
+        active
+        <template #icon>
+          <FeCheck />
+        </template>
+      </n-tag>
+      <div v-else />
+    </div>
+
+    <CurrentProxyDetails v-if="globalProxyEnabled" :proxy-details="globalProxyDetails" />
+
+    <ProxyButton />
+
+    <LocationDrawer />
+  </n-card>
+</template>

src/components/ProxyStatus/ProxyHost.vue

@@ -0,0 +1,123 @@
+<script lang="ts" setup>
+import { computed, ref, watchEffect } from 'vue';
+import { NButtonGroup, NCard, NTag } from 'naive-ui';
+
+import Button from '@/components/Buttons/Button.vue';
+import CurrentProxyDetails from '@/components/CurrentProxyDetails.vue';
+import FeCheck from '@/components/Icons/FeCheck.vue';
+import IconLabel from '@/components/IconLabel.vue';
+import LocationDrawer from '@/components/ConnectionDetails/LocationDrawer.vue';
+import TitleCategory from '@/components/TitleCategory.vue';
+
+import useActiveTab from '@/composables/useActiveTab';
+import useConnection from '@/composables/useConnection';
+import useLocations from '@/composables/useLocations';
+import useSocksProxy from '@/composables/useSocksProxy';
+import useStore from '@/composables/useStore';
+
+const { connection } = useConnection();
+const { toggleLocations } = useLocations();
+const { customProxiesDetails, customProxies, excludedHosts } = useStore();
+const { globalProxyEnabled } = useSocksProxy();
+
+const { activeTabHost, activeTab } = useActiveTab();
+
+const isCustomProxy = computed(() =>
+  Object.keys(customProxies.value).includes(activeTabHost.value),
+);
+const customTitle = computed(() => `Proxy for "${activeTabHost.value}"`);
+const currentProxyDetails = computed(() => {
+  return customProxiesDetails.value[activeTabHost.value];
+});
+const isExcluded = computed(() => excludedHosts.value.includes(activeTabHost.value));
+const isWireGuard = computed(() => connection.value.protocol?.includes('WireGuard'));
+
+const removeCustomProxy = () => {
+  const updatedCustomProxies = { ...customProxies.value };
+  delete updatedCustomProxies[activeTabHost.value];
+  customProxies.value = updatedCustomProxies;
+};
+
+const neverProxyHost = () => {
+  excludedHosts.value = [...excludedHosts.value, activeTabHost.value];
+};
+
+const allowProxy = () => {
+  excludedHosts.value = excludedHosts.value.filter((excluded) => excluded !== activeTabHost.value);
+};
+
+const instructions = ref('');
+
+watchEffect(() => {
+  let message = '';
+
+  if (isCustomProxy.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 v-if="activeTab" id="leta-settings" :bordered="false" class="mb-4 pt-2">
+    <div class="flex justify-between">
+      <TitleCategory :title="customTitle" />
+      <n-tag v-if="isCustomProxy" round :bordered="false" type="success">
+        active
+        <template #icon>
+          <FeCheck />
+        </template>
+      </n-tag>
+      <div v-else />
+    </div>
+
+    <CurrentProxyDetails
+      v-if="isCustomProxy && currentProxyDetails"
+      :proxy-details="currentProxyDetails"
+    />
+
+    <IconLabel :text="instructions" type="info" class="mb-8 mt-6" />
+
+    <div v-if="isWireGuard" class="mb-3">
+      <Button
+        v-if="isExcluded"
+        color="success"
+        class="flex items-center justify-center"
+        @click="allowProxy"
+      >
+        Allow proxy for <span class="italic">{{ activeTabHost }}</span>
+      </Button>
+
+      <n-button-group v-else>
+        <Button class="flex items-center justify-center" @click="toggleLocations">
+          Switch location
+        </Button>
+
+        <Button
+          v-if="isCustomProxy"
+          color="error"
+          class="flex items-center justify-center"
+          @click="removeCustomProxy"
+        >
+          Disable proxy
+        </Button>
+
+        <Button
+          v-else
+          color="error"
+          class="flex items-center justify-center"
+          @click="neverProxyHost"
+        >
+          Never proxy
+        </Button>
+      </n-button-group>
+    </div>
+
+    <LocationDrawer />
+  </n-card>
+</template>

src/composables/useActiveTab.ts

@@ -1,16 +1,20 @@
 import { ref } from 'vue';
 
 const activeTabHost = ref('');
+const activeTab = ref(true);
 
 const getActiveTab = async () => {
-  const activeTab = await browser.tabs.query({ active: true });
-
-  activeTabHost.value = new URL(activeTab[0].url!).host;
+  try {
+    const activeTab = await browser.tabs.query({ active: true });
+    activeTabHost.value = new URL(activeTab[0].url!).host;
+  } catch (error) {
+    activeTab.value = false;
+  }
 };
 
 const useActiveTab = () => {
   getActiveTab();
-  return { activeTabHost };
+  return { activeTabHost, activeTab };
 };
 
 export default useActiveTab;

src/popup/views/Proxy.vue

@@ -1,18 +1,19 @@
 <script lang="ts" setup>
-import { provide, watch } from 'vue';
+import { computed, provide, watch } from 'vue';
 
-import ProxyDetails from '@/components/ProxyStatus/ProxyDetails.vue';
-import ProxyDomain from '@/components/ProxyStatus/ProxyDomain.vue';
-import TitleCategory from '@/components/TitleCategory.vue';
+import IconLabel from '@/components/IconLabel.vue';
+import ProxyGlobal from '@/components/ProxyStatus/ProxyGlobal.vue';
+import ProxyHost from '@/components/ProxyStatus/ProxyHost.vue';
 
 import useConnection, { ConnectionKey } from '@/composables/useConnection';
 import useSocksProxy from '@/composables/useSocksProxy';
 
 const { isLoading, connection, isError } = useConnection();
 const { initGlobalProxy } = useSocksProxy();
 
-provide(ConnectionKey, { connection, isLoading, isError });
+const connected = computed(() => connection.value.isMullvad);
 
+provide(ConnectionKey, { connection, isLoading, isError });
 watch(connection, async () => {
   // Make sure the proxy always has some value
   await initGlobalProxy(
@@ -27,7 +28,10 @@ watch(connection, async () => {
 </script>
 
 <template>
-  <TitleCategory title="Global proxy" />
-  <ProxyDetails />
-  <ProxyDomain />
+  <div v-if="connected">
+    <ProxyGlobal />
+    <ProxyHost />
+  </div>
+
+  <IconLabel v-else text="Connect to Mullvad VPN to use the proxy." type="info" class="mb-8 mt-6" />
 </template>