Add initial host specific proxy connection

src/components/Location.vue

@@ -13,20 +13,13 @@ import useHistoricConnections from '@/composables/useHistoricConnections/useHist
 import type { HistoricConnection } from '@/composables/useHistoricConnections/HistoricConnections.types';
 
 const { activeTabHost } = useActiveTab();
-const { toggleLocations } = useLocations();
+const { hostProxySelect, toggleLocations } = useLocations();
 const { proxiesList } = useListProxies();
-const { setCustomProxy, setGlobalProxy } = useSocksProxy();
+const { setHostProxy, setGlobalProxy } = useSocksProxy();
 const { storeSocksProxyUsage } = useHistoricConnections();
 
-const { isCustomProxy } = defineProps({
-  isCustomProxy: {
-    type: Boolean,
-    default: false,
-  },
-});
-
 const currentOrAllWebsites = computed(() =>
-  isCustomProxy ? activeTabHost.value : 'all your browser traffic',
+  hostProxySelect.value ? activeTabHost.value : 'all your browser traffic',
 );
 
 const setProxy = (
@@ -39,8 +32,8 @@ const setProxy = (
   storeSocksProxyUsage({ country, city, hostname, ipv4_address });
   toggleLocations();
 
-  if (isCustomProxy) {
-    setCustomProxy({ country, city, hostname, ipv4_address, port }, activeTabHost.value);
+  if (hostProxySelect.value) {
+    setHostProxy({ country, city, hostname, ipv4_address, port }, activeTabHost.value);
   } else {
     setGlobalProxy({ country, city, hostname, ipv4_address, port });
   }

src/components/ProxyStatus/ProxyGlobal.vue

@@ -3,18 +3,24 @@ import { computed } from 'vue';
 import { NCard, NSwitch, NTooltip } from 'naive-ui';
 
 import CurrentProxyDetails from '@/components/CurrentProxyDetails.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 useLocations from '@/composables/useLocations';
 
 const { globalProxyDetails, globalProxyEnabled, toggleGlobalProxy } = useSocksProxy();
+const { hostProxySelect } = useLocations();
 
 // TODO Figure out why getting the state from useStore doesn't work
 // const { globalProxyDetails } = useStore();
 
 const status = computed(() => (globalProxyEnabled.value ? 'enabled' : 'disabled'));
+
+const handleSetGlobalProxy = () => {
+  hostProxySelect.value = false;
+  toggleGlobalProxy();
+};
 </script>
 
 <template>
@@ -23,14 +29,13 @@ const status = computed(() => (globalProxyEnabled.value ? 'enabled' : 'disabled'
       <TitleCategory title="For all websites" />
       <n-tooltip>
         <template #trigger>
-          <n-switch :value="globalProxyEnabled" @update-value="toggleGlobalProxy" />
+          <n-switch :value="globalProxyEnabled" @update-value="handleSetGlobalProxy" />
         </template>
         <span> {{ status }}</span>
       </n-tooltip>
     </div>
 
     <CurrentProxyDetails :proxy-details="globalProxyDetails" />
     <ProxyButton />
-    <LocationDrawer />
   </n-card>
 </template>

src/components/ProxyStatus/ProxyHost.vue

@@ -5,7 +5,6 @@ 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 LocationDrawer from '@/components/ConnectionDetails/LocationDrawer.vue';
 import TitleCategory from '@/components/TitleCategory.vue';
 
 import useActiveTab from '@/composables/useActiveTab';
@@ -15,7 +14,7 @@ import useLocations from '@/composables/useLocations';
 import useStore from '@/composables/useStore';
 
 const { connection } = useConnection();
-const { toggleLocations } = useLocations();
+const { hostProxySelect, toggleLocations } = useLocations();
 const { customProxiesDetails, customProxies, excludedHosts } = useStore();
 // const { globalProxyEnabled } = useSocksProxy();
 
@@ -24,6 +23,7 @@ const { activeTabHost, activeTab } = useActiveTab();
 const isCustomProxy = computed(() =>
   Object.keys(customProxies.value).includes(activeTabHost.value),
 );
+
 const customTitle = computed(() => `For this website (${activeTabHost.value})`);
 const currentProxyDetails = computed(() => {
   return customProxiesDetails.value[activeTabHost.value];
@@ -45,6 +45,11 @@ const allowProxy = () => {
   excludedHosts.value = excludedHosts.value.filter((excluded) => excluded !== activeTabHost.value);
 };
 
+const handleSetHostProxy = () => {
+  hostProxySelect.value = true;
+  toggleLocations();
+};
+
 // const instructions = ref('');
 
 // watchEffect(() => {
@@ -93,7 +98,7 @@ const allowProxy = () => {
       </Button>
 
       <n-button-group v-else>
-        <Button class="flex items-center justify-center" @click="toggleLocations">
+        <Button class="flex items-center justify-center" @click="handleSetHostProxy">
           Switch location
         </Button>
 
@@ -116,7 +121,5 @@ const allowProxy = () => {
         </Button>
       </n-button-group>
     </div>
-
-    <LocationDrawer />
   </n-card>
 </template>

src/composables/useLocations.ts

@@ -1,11 +1,13 @@
 import { ref } from 'vue';
 
 const showLocations = ref(false);
+const hostProxySelect = ref(false);
+
 const useLocations = () => {
   const toggleLocations = () => {
     showLocations.value = !showLocations.value;
   };
-  return { showLocations, toggleLocations };
+  return { hostProxySelect, showLocations, toggleLocations };
 };
 
 export default useLocations;

src/composables/useSocksProxy.ts

@@ -1,4 +1,4 @@
-import { computed } from 'vue';
+import { Ref, computed } from 'vue';
 
 import {
   ProxyDetails,
@@ -12,33 +12,31 @@ import useStore from '@/composables/useStore';
 import useConnection from '@/composables/useConnection';
 
 const { connection, updateConnection } = useConnection();
-const { globalProxyDetails, globalProxy, customProxies, customProxiesDetails } = useStore();
+const { customProxyDetails, globalProxyDetails, globalProxy, customProxies, customProxiesDetails } =
+  useStore();
 
 const globalProxyEnabled = computed(() => globalProxyDetails.value.socksEnabled);
+const customProxyEnabled = computed(() => customProxyDetails.value.socksEnabled);
 
 const baseConfig: Partial<ProxyInfo> = {
   port: 1080,
   proxyDNS: true,
 };
 
-const disableGlobalProxy = () => {
-  globalProxyDetails.value = {
-    ...globalProxyDetails.value,
-    socksEnabled: false,
+const setProxyDetails = (proxyDetails: Ref<ProxyDetails>, enabled: boolean) => {
+  proxyDetails.value = {
+    ...proxyDetails.value,
+    socksEnabled: enabled,
   };
-  updateConnection();
 };
 
-const enableGlobalProxy = () => {
-  globalProxyDetails.value = {
-    ...globalProxyDetails.value,
-    socksEnabled: true,
-  };
-  updateConnection();
+const toggleGlobalProxy = () => {
+  setProxyDetails(globalProxyDetails, !globalProxyDetails.value.socksEnabled);
 };
 
-const toggleGlobalProxy = () =>
-  globalProxyEnabled.value ? disableGlobalProxy() : enableGlobalProxy();
+const toggleCustomProxy = () => {
+  setProxyDetails(customProxyDetails, !customProxyDetails.value.socksEnabled);
+};
 
 const initGlobalProxy = async (
   { hostname, country, city }: Partial<ProxyOperationArgs>,
@@ -99,13 +97,13 @@ const setGlobalProxy = ({
   updateConnection();
 };
 
-const setCustomProxy = (
+const setHostProxy = (
   { country, city, hostname, ipv4_address, port = baseConfig.port }: Partial<ProxyOperationArgs>,
   host: string,
 ) => {
   const socksIp = getSocksIpForProtocol(connection.value.protocol);
 
-  const newCustomProxy: ProxyInfo = {
+  const newHostProxy: ProxyInfo = {
     host: ipv4_address || socksIp,
     port: port!,
     proxyDNS: baseConfig.proxyDNS,
@@ -121,19 +119,20 @@ const setCustomProxy = (
     proxyDNS: baseConfig.proxyDNS,
   };
 
-  customProxies.value = { ...customProxies.value, [host]: newCustomProxy };
+  customProxies.value = { ...customProxies.value, [host]: newHostProxy };
   customProxiesDetails.value = { ...customProxiesDetails.value, [host]: newCustomProxyDetails };
 };
 
 const useSocksProxy = () => {
   return {
-    disableGlobalProxy,
-    enableGlobalProxy,
+    customProxiesDetails,
+    customProxyEnabled,
     globalProxyDetails,
     globalProxyEnabled,
     initGlobalProxy,
-    setCustomProxy,
+    setHostProxy,
     setGlobalProxy,
+    toggleCustomProxy,
     toggleGlobalProxy,
   };
 };

src/popup/views/Proxy.vue

@@ -4,6 +4,7 @@ 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';
 
@@ -28,8 +29,9 @@ const canUseProxy = computed(() => connection.value.isMullvad);
   </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">
-      Global proxy set for {{ activeTab }}
+      {{ activeTab }} currently uses the global proxy
       <template #icon>
         <FeCheck />
       </template>
@@ -45,4 +47,5 @@ const canUseProxy = computed(() => connection.value.isMullvad);
 
   <ProxyHost />
   <ProxyGlobal />
+  <LocationDrawer />
 </template>