Refactor selection of proxy / Display default proxy in Options

src/components/Location.vue

@@ -10,18 +10,16 @@ import { updateCurrentTabProxyBadge } from '@/helpers/proxyBadge';
 import useListProxies from '@/composables/useListProxies';
 import useSocksProxy from '@/composables/useSocksProxy';
 import useLocations from '@/composables/useLocations';
-import useActiveTab from '@/composables/useActiveTab';
 import useProxyHistory from '@/composables/useProxyHistory/useProxyHistory';
 import type { HistoryEntry } from '@/composables/useProxyHistory/HistoryEntries.types';
 
-const { activeTabHost } = useActiveTab();
-const { customProxy, hostProxySelect, toggleLocations } = useLocations();
+const { customProxyHost, customProxySelect, toggleLocations } = useLocations();
 const { proxiesList } = useListProxies();
 const { setCurrentHostProxy, setGlobalProxy } = useSocksProxy();
 const { storeSocksProxyUsage } = useProxyHistory();
 
 const currentOrAllWebsites = computed(() =>
-  hostProxySelect.value ? customProxy.value || activeTabHost.value : 'all your browser traffic',
+  customProxySelect.value ? customProxyHost.value : 'all your browser traffic',
 );
 
 const setProxy = (
@@ -35,12 +33,12 @@ const setProxy = (
   storeSocksProxyUsage({ country, countryCode, city, hostname, ipv4_address });
   toggleLocations();
 
-  if (hostProxySelect.value) {
+  if (customProxySelect.value) {
     setCurrentHostProxy(
       { country, countryCode, city, hostname, ipv4_address, port },
-      customProxy.value || activeTabHost.value,
+      customProxyHost.value,
     );
-    customProxy.value = '';
+    customProxyHost.value = '';
   } else {
     setGlobalProxy({ country, countryCode, city, hostname, ipv4_address, port });
   }

src/components/Proxy/CustomProxies.vue

@@ -10,18 +10,22 @@ import TitleCategory from '@/components/TitleCategory.vue';
 import useSocksProxy from '@/composables/useSocksProxy';
 import useLocations from '@/composables/useLocations';
 
-const { customProxy, hostProxySelect, toggleLocations } = useLocations();
+const { proxySelect } = useLocations();
 
 // For some reason importing `hostProxiesDetails` directly from useStore()
 // will cause the value not to be reactively updated
 const {
   allowProxy,
   excludedHosts,
+  globalProxyDetails,
+  globalProxyEnabled,
   hostProxiesDetails,
   neverProxyHost,
   removeCustomProxy,
+  removeGlobalProxy,
   toggleCustomProxy,
   toggleCustomProxyDNS,
+  toggleGlobalProxy,
 } = useSocksProxy();
 
 const manualProxyDomain = ref('');
@@ -32,10 +36,8 @@ const combinedHosts = computed(() => {
   return [...new Set(allHosts)].sort((a, b) => a.localeCompare(b));
 });
 
-const handleCustomProxySelect = (host: string) => {
-  customProxy.value = host;
-  hostProxySelect.value = true;
-  toggleLocations();
+const handleProxySelect = (host?: string) => {
+  proxySelect(host);
   manualProxyDomain.value = '';
 };
 
@@ -51,7 +53,7 @@ const neverProxyHostManual = () => {
 
 const handleCustomProxySelectManual = () => {
   if (manualProxyDomain.value) {
-    handleCustomProxySelect(manualProxyDomain.value);
+    handleProxySelect(manualProxyDomain.value);
     manualProxyDomain.value = '';
     manualProxyDomainError.value = false;
   } else {
@@ -90,6 +92,44 @@ const clearError = () => {
       Please enter a domain name
     </div>
 
+    <n-divider />
+    <div>
+      <h1 class="font-semibold text-lg mb-2 text-gray-200">All websites</h1>
+
+      <div v-if="globalProxyDetails.server" class="flex justify-between">
+        <div class="mb-2">
+          <h4 class="font-semibold">
+            {{ globalProxyDetails.city }}, {{ globalProxyDetails.country }}
+          </h4>
+          <div class="flex">
+            <h4 class="font-semibold">Server</h4>
+            <div class="ml-2">{{ globalProxyDetails.server }}</div>
+          </div>
+        </div>
+
+        <n-switch :value="globalProxyEnabled" @update-value="toggleGlobalProxy()" />
+      </div>
+
+      <IconLabel type="info" class="mb-3">
+        {{ globalProxyEnabled ? 'Proxy' : 'When enabled, this proxy is' }} used by
+        <strong>all websites</strong>, except for domains listed below.
+      </IconLabel>
+
+      <div class="flex justify-between">
+        <Button size="small" @click="handleProxySelect()">
+          {{ globalProxyDetails.server ? 'Change location' : 'Select location' }}
+        </Button>
+        <Button
+          v-if="globalProxyDetails.server"
+          size="small"
+          color="error"
+          @click="removeGlobalProxy"
+        >
+          Remove proxy
+        </Button>
+      </div>
+    </div>
+
     <div v-for="host in combinedHosts" :key="host" :bordered="false" class="mb-4">
       <n-divider />
       <div class="flex justify-between">
@@ -132,7 +172,7 @@ const clearError = () => {
           <Button
             size="small"
             class="flex items-center justify-center"
-            @click="handleCustomProxySelect(host)"
+            @click="handleProxySelect(host)"
           >
             Change location
           </Button>

src/components/Proxy/HomeProxyStatus.vue

@@ -30,7 +30,7 @@ const {
   toggleGlobalProxy,
 } = useSocksProxy();
 const { getSocksProxies } = useListProxies();
-const { hostProxySelect, toggleLocations } = useLocations();
+const { proxySelect } = useLocations();
 const { connection } = inject(ConnectionKey, defaultConnection);
 
 const currentHostExcluded = computed(() => excludedHosts.value.includes(activeTabHost.value));
@@ -52,10 +52,9 @@ const handleTabClick = (tabName: string) => {
   lastClickedTab.value = tabName;
 };
 
-const handleProxySelect = async (customProxy: boolean) => {
-  hostProxySelect.value = customProxy;
+const handleProxySelect = async (host?: string) => {
+  proxySelect(host);
   await getSocksProxies();
-  toggleLocations();
 };
 </script>
 
@@ -97,7 +96,7 @@ const handleProxySelect = async (customProxy: boolean) => {
       </p>
 
       <div class="flex justify-between">
-        <Button size="small" @click="handleProxySelect(false)">
+        <Button size="small" @click="handleProxySelect()">
           {{ globalProxyDetails.server ? 'Change location' : 'Select location' }}
         </Button>
         <Button
@@ -169,7 +168,7 @@ const handleProxySelect = async (customProxy: boolean) => {
           <Button
             size="small"
             class="flex items-center justify-center"
-            @click="handleProxySelect(true)"
+            @click="handleProxySelect(activeTabHost)"
           >
             {{ currentHostProxyDetails ? 'Change location' : 'Select location' }}
           </Button>
@@ -198,7 +197,7 @@ const handleProxySelect = async (customProxy: boolean) => {
           <Button
             size="small"
             class="flex items-center justify-center"
-            @click="handleProxySelect(true)"
+            @click="handleProxySelect(activeTabHost)"
           >
             {{ currentHostProxyDetails ? 'Change location' : 'Select location' }}
           </Button>

src/composables/useLocations.ts

@@ -1,14 +1,22 @@
 import { ref } from 'vue';
 
 const showLocations = ref(false);
-const hostProxySelect = ref(false);
-const customProxy = ref('');
+const customProxySelect = ref(false);
+const customProxyHost = ref('');
 
 const useLocations = () => {
   const toggleLocations = () => {
     showLocations.value = !showLocations.value;
   };
-  return { customProxy, hostProxySelect, showLocations, toggleLocations };
+
+  const proxySelect = (host?: string) => {
+    // when host is not provided, it means the user is selecting a proxy for all websites
+    customProxyHost.value = host ? host : '';
+    customProxySelect.value = !!host;
+    toggleLocations();
+  };
+
+  return { customProxyHost, customProxySelect, proxySelect, showLocations, toggleLocations };
 };
 
 export default useLocations;