From 4d773acb73ff717205f85005f0657e57a3c3d8cf Mon Sep 17 00:00:00 2001
From: rui hildt <rui@mullvad.net>
Date: Wed, 16 Oct 2024 19:41:21 +0200
Subject: [PATCH] Add support for no proxying in Options

---
 src/components/Buttons/Button.vue             |   2 +-
 .../Buttons/__snapshots__/Button.test.ts.snap |   6 +-
 src/components/Proxy/CustomProxies.vue        | 156 +++++++++++++-----
 .../MostUsedLocationButtons.test.ts.snap      |   8 +-
 4 files changed, 119 insertions(+), 53 deletions(-)

diff --git a/src/components/Buttons/Button.vue b/src/components/Buttons/Button.vue
index c17cdb28..2765d575 100644
--- a/src/components/Buttons/Button.vue
+++ b/src/components/Buttons/Button.vue
@@ -34,7 +34,7 @@ const classes = computed(() => {
 </script>
 
 <template>
-  <component :is="type" :href="href" class="btn" :class="classes">
+  <component :is="type" :href="href" class="btn whitespace-nowrap" :class="classes">
     <slot></slot>
   </component>
 </template>
diff --git a/src/components/Buttons/__snapshots__/Button.test.ts.snap b/src/components/Buttons/__snapshots__/Button.test.ts.snap
index 62c09a1d..e30253ba 100644
--- a/src/components/Buttons/__snapshots__/Button.test.ts.snap
+++ b/src/components/Buttons/__snapshots__/Button.test.ts.snap
@@ -2,7 +2,7 @@
 
 exports[`Button should render a blue button 1`] = `
 <button
-  class="btn bg-blue text-white"
+  class="btn whitespace-nowrap bg-blue text-white"
 >
   
   Knapp
@@ -12,7 +12,7 @@ exports[`Button should render a blue button 1`] = `
 
 exports[`Button should render a button 1`] = `
 <button
-  class="btn"
+  class="btn whitespace-nowrap"
 >
   
   Knapp
@@ -22,7 +22,7 @@ exports[`Button should render a button 1`] = `
 
 exports[`Button should render an a tag 1`] = `
 <a
-  class="btn"
+  class="btn whitespace-nowrap"
   href="https://www.mullvad.net"
 >
   
diff --git a/src/components/Proxy/CustomProxies.vue b/src/components/Proxy/CustomProxies.vue
index e05db7a1..8c2ffedf 100644
--- a/src/components/Proxy/CustomProxies.vue
+++ b/src/components/Proxy/CustomProxies.vue
@@ -3,6 +3,8 @@ import { computed, ref } from 'vue';
 import { NCard, NCheckbox, NDivider, NSwitch, NTooltip, NInput } from 'naive-ui';
 
 import Button from '@/components/Buttons/Button.vue';
+import IconLabel from '@/components/IconLabel.vue';
+import SplitButton from '@/components/Buttons/SplitButton.vue';
 import TitleCategory from '@/components/TitleCategory.vue';
 
 import useSocksProxy from '@/composables/useSocksProxy';
@@ -16,16 +18,19 @@ const {
   allowProxy,
   excludedHosts,
   hostProxiesDetails,
+  neverProxyHost,
   removeCustomProxy,
   toggleCustomProxy,
   toggleCustomProxyDNS,
 } = useSocksProxy();
 
-const proxies = computed(() =>
-  Object.entries(hostProxiesDetails.value).map(([host, proxy]) => ({ host, proxyDetails: proxy })),
-);
-
 const manualProxyDomain = ref('');
+const manualProxyDomainError = ref(false);
+
+const combinedHosts = computed(() => {
+  const allHosts = [...Object.keys(hostProxiesDetails.value), ...excludedHosts.value];
+  return [...new Set(allHosts)].sort((a, b) => a.localeCompare(b));
+});
 
 const handleCustomProxySelect = (host: string) => {
   customProxy.value = host;
@@ -33,64 +38,125 @@ const handleCustomProxySelect = (host: string) => {
   toggleLocations();
   manualProxyDomain.value = '';
 };
+
+const neverProxyHostManual = () => {
+  if (manualProxyDomain.value) {
+    neverProxyHost(manualProxyDomain.value);
+    manualProxyDomain.value = '';
+    manualProxyDomainError.value = false;
+  } else {
+    manualProxyDomainError.value = true;
+  }
+};
+
+const handleCustomProxySelectManual = () => {
+  if (manualProxyDomain.value) {
+    handleCustomProxySelect(manualProxyDomain.value);
+    manualProxyDomain.value = '';
+    manualProxyDomainError.value = false;
+  } else {
+    manualProxyDomainError.value = true;
+  }
+};
+
+const clearError = () => {
+  manualProxyDomainError.value = false;
+};
 </script>
 
 <template>
-  <NCard :bordered="false" class="mb-4">
+  <NCard :bordered="false">
     <TitleCategory title="Add proxy for a domain" />
     <div class="flex items-center mt-2">
       <NInput
         v-model:value="manualProxyDomain"
         placeholder="Enter domain name"
         class="mr-2 flex-grow"
+        :status="manualProxyDomainError ? 'error' : undefined"
+        @focus="clearError"
+      />
+
+      <SplitButton
+        size="small"
+        main-color="blue"
+        sub-color="white"
+        main-text="Select location"
+        sub-text="Never proxy"
+        @main-click="handleCustomProxySelectManual"
+        @sub-click="neverProxyHostManual"
       />
-      <Button class="whitespace-nowrap" @click="handleCustomProxySelect(manualProxyDomain)"
-        >Select Location</Button
-      >
     </div>
-    <div v-for="{ host, proxyDetails } in proxies" :key="host" :bordered="false">
+    <div v-if="manualProxyDomainError" class="text-red-500 text-sm mt-1">
+      Please enter a domain name
+    </div>
+
+    <div v-for="host in combinedHosts" :key="host" :bordered="false" class="mb-4">
       <n-divider />
       <div class="flex justify-between">
-        <h1 class="font-semibold text-lg mb-2 text-gray-200">{{ host }}</h1>
-        <n-tooltip v-if="proxyDetails.server">
-          <template #trigger>
-            <n-switch :value="proxyDetails.socksEnabled" @update-value="toggleCustomProxy(host)" />
-          </template>
-          <span> {{ proxyDetails.socksEnabled ? 'Proxy enabled' : 'Proxy disabled' }}</span>
-        </n-tooltip>
+        <h1 class="font-semibold text-lg mb-2 text-gray-200">
+          {{ host }}
+        </h1>
+        <template v-if="host in hostProxiesDetails && !excludedHosts.includes(host)">
+          <n-tooltip v-if="hostProxiesDetails[host].server">
+            <template #trigger>
+              <n-switch
+                :value="hostProxiesDetails[host].socksEnabled"
+                @update-value="toggleCustomProxy(host)"
+              />
+            </template>
+            <span>{{
+              hostProxiesDetails[host].socksEnabled ? 'Proxy enabled' : 'Proxy disabled'
+            }}</span>
+          </n-tooltip>
+        </template>
       </div>
 
-      <div v-if="proxyDetails.server" class="mb-3">
-        <h1>{{ proxyDetails.country }}, {{ proxyDetails.city }}</h1>
-        <ul class="mb-2">
-          <li>Proxy Server: {{ proxyDetails.server }}</li>
-          <li>
-            Proxy DNS
-            <n-checkbox
-              size="large"
-              :checked="proxyDetails.proxyDNS"
-              :focusable="false"
-              @update-checked="toggleCustomProxyDNS(host)"
-            />
-          </li>
-        </ul>
-      </div>
+      <template v-if="host in hostProxiesDetails && !excludedHosts.includes(host)">
+        <div v-if="hostProxiesDetails[host].server" class="mb-3">
+          <h1>{{ hostProxiesDetails[host].country }}, {{ hostProxiesDetails[host].city }}</h1>
+          <ul class="mb-2">
+            <li>Proxy Server: {{ hostProxiesDetails[host].server }}</li>
+            <li>
+              Proxy DNS
+              <n-checkbox
+                size="large"
+                :checked="hostProxiesDetails[host].proxyDNS"
+                :focusable="false"
+                @update-checked="toggleCustomProxyDNS(host)"
+              />
+            </li>
+          </ul>
+        </div>
 
-      <div class="flex justify-between">
-        <Button @click="handleCustomProxySelect(host)">Select location</Button>
-        <Button color="error" @click="removeCustomProxy(host)">Remove proxy</Button>
-      </div>
-    </div>
-  </NCard>
+        <div class="flex justify-between">
+          <Button
+            size="small"
+            class="flex items-center justify-center"
+            @click="handleCustomProxySelect(host)"
+          >
+            Change location
+          </Button>
 
-  <NCard v-if="excludedHosts.length > 0" :bordered="false">
-    <TitleCategory title="Excluded from proxying" />
-    <div v-for="host in excludedHosts" :key="host" :bordered="false" class="mb-4">
-      <n-divider />
-      <div class="flex justify-between">
-        <h1 class="font-semibold text-lg mb-2 text-gray-200">{{ host }}</h1>
-        <Button @click="allowProxy(host)"> Allow proxying </Button>
-      </div>
+          <div>
+            <SplitButton
+              size="small"
+              main-color="error"
+              sub-color="white"
+              main-text="Remove proxy"
+              sub-text="Never proxy"
+              @main-click="removeCustomProxy(host)"
+              @sub-click="neverProxyHost(host)"
+            />
+          </div>
+        </div>
+      </template>
+
+      <template v-else>
+        <div class="flex justify-between">
+          <IconLabel type="info" class="mb-3"> Never proxied </IconLabel>
+          <Button @click="allowProxy(host)">Allow proxying</Button>
+        </div>
+      </template>
     </div>
   </NCard>
 </template>
diff --git a/src/components/__snapshots__/MostUsedLocationButtons.test.ts.snap b/src/components/__snapshots__/MostUsedLocationButtons.test.ts.snap
index 12005091..e5a3a991 100644
--- a/src/components/__snapshots__/MostUsedLocationButtons.test.ts.snap
+++ b/src/components/__snapshots__/MostUsedLocationButtons.test.ts.snap
@@ -6,7 +6,7 @@ exports[`MostUsedLocationButtons should render one button 1`] = `
 >
   
   <button
-    class="btn block"
+    class="btn whitespace-nowrap block"
   >
     
     Argentina
@@ -22,21 +22,21 @@ exports[`MostUsedLocationButtons should render three buttons 1`] = `
 >
   
   <button
-    class="btn block"
+    class="btn whitespace-nowrap block"
   >
     
     Sweden
     
   </button>
   <button
-    class="btn block"
+    class="btn whitespace-nowrap block"
   >
     
     Norway
     
   </button>
   <button
-    class="btn block"
+    class="btn whitespace-nowrap block"
   >
     
     Iceland