Add possibility to add a proxy manually

src/components/Proxy/CustomProxies.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import { computed } from 'vue';
-import { NCard, NCheckbox, NDivider, NSwitch, NTooltip } from 'naive-ui';
+import { computed, ref } from 'vue';
+import { NCard, NCheckbox, NDivider, NSwitch, NTooltip, NInput } from 'naive-ui';
 
 import Button from '@/components/Buttons/Button.vue';
 import TitleCategory from '@/components/TitleCategory.vue';
@@ -30,6 +30,26 @@ const handleCustomProxySelect = (host: string) => {
   hostProxySelect.value = true;
   toggleLocations();
 };
+
+const customProxyDomain = ref('');
+const formError = ref('');
+
+const isValidDomain = (domain: string) => {
+  const domainRegex = /^([a-zA-Z0-9]+(-[a-zA-Z0-9]+)*\.)+[a-zA-Z]{2,}$/;
+  return domainRegex.test(domain);
+};
+
+const selectLocationForNewProxy = () => {
+  if (!isValidDomain(customProxyDomain.value)) {
+    formError.value = 'Please enter a valid domain name.';
+    return;
+  }
+
+  customProxy.value = customProxyDomain.value;
+  hostProxySelect.value = true;
+  toggleLocations();
+  formError.value = '';
+};
 </script>
 
 <template>
@@ -68,6 +88,21 @@ const handleCustomProxySelect = (host: string) => {
         <Button color="error" @click="removeCustomProxy(host)">Remove proxy</Button>
       </div>
     </div>
+
+    <div class="mb-3">
+      <n-divider />
+      <TitleCategory title="Add a proxy manually" />
+
+      <div class="flex">
+        <NInput
+          v-model:value="customProxyDomain"
+          placeholder="Enter domain name"
+          class="flex-grow mr-2"
+        />
+        <Button class="w-3/12" @click="selectLocationForNewProxy">Select location</Button>
+      </div>
+      <div v-if="formError" class="text-red-500 mt-2">{{ formError }}</div>
+    </div>
   </NCard>
 
   <NCard v-if="excludedHosts.length > 0" :bordered="false">