Remove pre-population of default proxies to stop unintentional history

src/components/ProxyStatus/ProxyButton.vue

@@ -6,5 +6,5 @@ const { toggleLocations } = useLocations();
 </script>
 
 <template>
-  <Button @click="toggleLocations"> Switch location </Button>
+  <Button @click="toggleLocations"> Select location </Button>
 </template>

src/components/ProxyStatus/ProxyGlobal.vue

@@ -12,7 +12,7 @@ import useLocations from '@/composables/useLocations';
 const { globalProxyDetails, globalProxyEnabled, toggleGlobalProxy } = useSocksProxy();
 const { hostProxySelect } = useLocations();
 
-const status = computed(() => (globalProxyEnabled.value ? 'enabled' : 'disabled'));
+const status = computed(() => (globalProxyEnabled.value ? 'Enabled' : 'Disabled'));
 
 const handleSetGlobalProxy = () => {
   hostProxySelect.value = false;
@@ -24,15 +24,15 @@ const handleSetGlobalProxy = () => {
   <n-card :bordered="false" class="mb-4">
     <div class="flex justify-between">
       <TitleCategory title="Proxy for all websites" />
-      <n-tooltip>
+      <n-tooltip v-if="globalProxyDetails.server">
         <template #trigger>
           <n-switch :value="globalProxyEnabled" @update-value="handleSetGlobalProxy" />
         </template>
         <span> {{ status }}</span>
       </n-tooltip>
     </div>
 
-    <CurrentProxyDetails :proxy-details="globalProxyDetails" />
+    <CurrentProxyDetails v-if="globalProxyDetails.server" :proxy-details="globalProxyDetails" />
     <ProxyButton />
   </n-card>
 </template>

src/components/ProxyStatus/ProxyHost.vue

@@ -39,7 +39,7 @@ const handleHostProxySelect = () => {
   <n-card :bordered="false" class="mb-4">
     <div class="flex justify-between">
       <TitleCategory :title="title" />
-      <n-tooltip v-if="!currentHostExcluded">
+      <n-tooltip v-if="currentHostProxyDetails && !currentHostExcluded">
         <template #trigger>
           <n-switch :value="currentHostProxyEnabled" @update-value="toggleCurrentHostProxy" />
         </template>
@@ -64,7 +64,7 @@ const handleHostProxySelect = () => {
 
       <n-button-group v-else>
         <Button class="flex items-center justify-center" @click="handleHostProxySelect">
-          Switch location
+          Select location
         </Button>
 
         <Button color="error" class="flex items-center justify-center" @click="neverProxyHost">

src/composables/useSocksProxy.ts

@@ -49,41 +49,6 @@ const toggleCurrentHostProxy = () => {
   };
 };
 
-const createDefaultProxy = () => {
-  return {
-    host: socksIp,
-    port: baseConfig.port!,
-    proxyDNS: baseConfig.proxyDNS,
-    type: ProxyInfoType.socks,
-  };
-};
-
-const initProxies = async ({
-  hostname,
-  country,
-  countryCode,
-  city,
-}: Partial<ProxyOperationArgs>) => {
-  const newProxyDetails = {
-    city,
-    country,
-    countryCode,
-    proxyDNS: baseConfig.proxyDNS,
-    server: hostname,
-    socksEnabled: false,
-  };
-
-  if (Object.keys(globalProxy.value).length !== 4) {
-    globalProxy.value = createDefaultProxy();
-    globalProxyDetails.value = newProxyDetails;
-  }
-
-  if (!hostProxiesDetails.value[activeTabHost.value]) {
-    hostProxies.value[activeTabHost.value] = createDefaultProxy();
-    hostProxiesDetails.value[activeTabHost.value] = newProxyDetails;
-  }
-};
-
 const setGlobalProxy = ({
   country,
   countryCode,
@@ -151,7 +116,6 @@ const useSocksProxy = () => {
     currentHostProxyEnabled,
     globalProxyDetails,
     globalProxyEnabled,
-    initProxies,
     setCurrentHostProxy,
     setGlobalProxy,
     toggleCurrentHostProxy,

src/composables/useStore.ts

@@ -10,7 +10,7 @@ export type Store = {
   hostProxies: Ref<ProxyInfoMap>;
   hostProxiesDetails: Ref<ProxyDetailsMap>;
   globalProxy: Ref<ProxyInfo>;
-  globalProxyDetails: Ref<ProxyDetails>; // TODO make sure it always come from the socks-proxies server info
+  globalProxyDetails: Ref<ProxyDetails>;
   historyEntries: Ref<HistoryEntriesMap>;
   mullvadAccount: Ref<string>;
   proxiesList: Ref<Country[]>;
@@ -21,7 +21,7 @@ export type Store = {
 const useStore = (): Store => {
   const excludedHosts = useBrowserStorageLocal('excludedHosts', []);
   const globalProxy = useBrowserStorageLocal('globalProxy', {} as ProxyInfo);
-  const globalProxyDetails = useBrowserStorageLocal('globalProxyDetails', { socksEnabled: false });
+  const globalProxyDetails = useBrowserStorageLocal('globalProxyDetails', {} as ProxyDetails);
   const hostProxies = useBrowserStorageLocal('hostProxies', {});
   const hostProxiesDetails = useBrowserStorageLocal('hostProxiesDetails', {});
   const historyEntries = useBrowserStorageLocal('historyEntries', {});

src/popup/views/Home.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { computed, inject, watch } from 'vue';
+import { computed, inject } from 'vue';
 
 import ConnectionDetails from '@/components/ConnectionDetails/ConnectionDetails.vue';
 import IconLabel from '@/components/IconLabel.vue';
@@ -11,21 +11,11 @@ import useSocksProxy from '@/composables/useSocksProxy';
 import useStore from '@/composables/useStore';
 
 const { activeTabHost } = useActiveTab();
-const { currentHostProxyDetails, currentHostProxyEnabled, initProxies } = useSocksProxy();
+const { currentHostProxyDetails, currentHostProxyEnabled } = useSocksProxy();
 const { excludedHosts } = useStore();
 const { isLoading, isError, connection } = 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
-  await initProxies({
-    hostname: connection.value.server,
-    country: connection.value.country,
-    countryCode: connection.value.server?.slice(0, 2),
-    city: connection.value.city,
-  });
-});
 </script>
 
 <template>