Add ability to remove custom proxy from the popup

mullvad · Aug 14, 2024 · 6dbaa5d · 6dbaa5d
1 parent ce26c58
commit 6dbaa5d
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 25 deletions.
diff --git a/src/components/Proxy/CustomProxies.vue b/src/components/Proxy/CustomProxies.vue
@@ -65,7 +65,7 @@ const handleCustomProxySelect = (host: string) => {
 
       <div class="flex justify-between">
         <Button @click="handleCustomProxySelect(host)">Select location</Button>
-        <Button @click="removeCustomProxy(host)">Remove proxy</Button>
+        <Button color="error" @click="removeCustomProxy(host)">Remove proxy</Button>
       </div>
     </div>
   </NCard>

diff --git a/src/components/Proxy/ProxyGlobal.vue b/src/components/Proxy/ProxyGlobal.vue
@@ -54,7 +54,9 @@ const handleProxySelect = () => {
 
     <div class="flex justify-between">
       <Button @click="handleProxySelect"> Select location </Button>
-      <Button v-if="globalProxyDetails.server" @click="removeGlobalProxy"> Remove proxy </Button>
+      <Button v-if="globalProxyDetails.server" color="error" @click="removeGlobalProxy">
+        Remove proxy
+      </Button>
     </div>
   </n-card>
 </template>
diff --git a/src/components/Proxy/ProxyHost.vue b/src/components/Proxy/ProxyHost.vue
@@ -1,8 +1,9 @@
 <script lang="ts" setup>
 import { computed } from 'vue';
-import { NCard, NCheckbox, NSwitch, NTooltip } from 'naive-ui';
+import { NCard, NCheckbox, NDivider, NSwitch, NTooltip } from 'naive-ui';
 
 import Button from '@/components/Buttons/Button.vue';
+import SplitButton from '@/components/Buttons/SplitButton.vue';
 import TitleCategory from '@/components/TitleCategory.vue';
 
 import useActiveTab from '@/composables/useActiveTab';
@@ -18,12 +19,14 @@ const {
   currentHostProxyEnabled,
   excludedHosts,
   neverProxyHost,
+  removeCustomProxy,
   toggleCurrentHostProxy,
   toggleCurrentHostProxyDNS,
 } = useSocksProxy();
 
 const title = computed(() => `Proxy for ${activeTabHost.value}`);
 const currentHostExcluded = computed(() => excludedHosts.value.includes(activeTabHost.value));
+const currentHostProxied = computed(() => (currentHostProxyDetails.value ? true : false));
 
 const handleProxySelect = () => {
   hostProxySelect.value = true;
@@ -32,9 +35,26 @@ const handleProxySelect = () => {
 </script>
 
 <template>
-  <n-card :bordered="false" class="mb-4">
+  <n-card :bordered="false">
+    <TitleCategory :title="title" />
+    <n-divider />
     <div class="flex justify-between">
-      <TitleCategory :title="title" />
+      <div v-if="currentHostProxyDetails && !currentHostExcluded" class="mb-3">
+        <h1>{{ currentHostProxyDetails.country }}, {{ currentHostProxyDetails.city }}</h1>
+        <ul class="mb-2">
+          <li>Proxy Server: {{ currentHostProxyDetails.server }}</li>
+          <li>
+            Proxy DNS
+            <n-checkbox
+              size="large"
+              :checked="currentHostProxyDNSEnabled"
+              :focusable="false"
+              @update-checked="toggleCurrentHostProxyDNS"
+            />
+          </li>
+        </ul>
+      </div>
+
       <n-tooltip v-if="currentHostProxyDetails && !currentHostExcluded">
         <template #trigger>
           <n-switch :value="currentHostProxyEnabled" @update-value="toggleCurrentHostProxy" />
@@ -43,22 +63,6 @@ const handleProxySelect = () => {
       </n-tooltip>
     </div>
 
-    <div v-if="currentHostProxyDetails && !currentHostExcluded" class="mb-3">
-      <h1>{{ currentHostProxyDetails.country }}, {{ currentHostProxyDetails.city }}</h1>
-      <ul class="mb-2">
-        <li>Proxy Server: {{ currentHostProxyDetails.server }}</li>
-        <li>
-          Proxy DNS
-          <n-checkbox
-            size="large"
-            :checked="currentHostProxyDNSEnabled"
-            :focusable="false"
-            @update-checked="toggleCurrentHostProxyDNS"
-          />
-        </li>
-      </ul>
-    </div>
-
     <div>
       <Button
         v-if="currentHostExcluded"
@@ -75,9 +79,24 @@ const handleProxySelect = () => {
           Select location
         </Button>
 
-        <Button class="flex items-center justify-center" @click="neverProxyHost(activeTabHost)">
-          Never proxy
-        </Button>
+        <div>
+          <SplitButton
+            v-if="currentHostProxied"
+            main-color="error"
+            sub-color="white"
+            main-text="Remove proxy"
+            sub-text="Never proxy"
+            @main-click="removeCustomProxy(activeTabHost)"
+            @sub-click="neverProxyHost(activeTabHost)"
+          />
+          <Button
+            v-else
+            class="flex items-center justify-center"
+            @click="neverProxyHost(activeTabHost)"
+          >
+            Never proxy
+          </Button>
+        </div>
       </div>
     </div>
   </n-card>

diff --git a/src/popup/views/Proxy.vue b/src/popup/views/Proxy.vue
@@ -40,8 +40,8 @@ onMounted(loadProxies);
     </IconLabel>
 
     <div>
-      <ProxyHost v-if="!isBrowserPage" />
       <ProxyGlobal />
+      <ProxyHost v-if="!isBrowserPage" />
       <LocationDrawer />
     </div>
   </template>