http tab more or less done

src/components/settings_modal/helpers/proxy_setting.js

@@ -0,0 +1,53 @@
+import Checkbox from 'src/components/checkbox/checkbox.vue'
+import Setting from './setting.js'
+
+const getUrl = state => state?.tuple ? state.tuple[1] + ':' + state.tuple[2] : state
+const getSocks = state => state?.tuple
+
+export default {
+  ...Setting,
+  data () {
+    return {
+      urlField: '',
+      socksField: false
+    }
+  },
+  created () {
+    Setting.created()
+    this.urlField = getUrl(this.realDraftMode ? this.draft : this.state)
+    this.socksField = getSocks(this.realDraftMode ? this.draft : this.state)
+  },
+  computed: {
+    ...Setting.computed,
+    // state that we'll show in the UI, i.e. transforming map into list
+    displayState () {
+      if (this.visibleState?.tuple) {
+        return this.visibleState.tuple[1] + ':' + this.visibleState.tuple[2]
+      }
+      return this.visibleState
+    },
+    socksState () {
+      return getSocks(this.visibleState)
+    }
+  },
+  components: {
+    ...Setting.components,
+    Checkbox
+  },
+  methods: {
+    ...Setting.methods,
+    getValue ({ event, isProxy}) {
+      if (isProxy) {
+        this.socksField = event
+      } else {
+        this.urlField = event.target.value
+      }
+
+      if (this.socksField) {
+        return { tuple: [ ':socks5', ...this.urlField.split(':') ] }
+      } else {
+        return this.urlField
+      }
+    }
+  }
+}

src/components/settings_modal/helpers/proxy_setting.vue

@@ -0,0 +1,57 @@
+<template>
+  <label
+    v-if="matchesExpertLevel"
+    class="ProxySetting"
+  >
+    <label
+      v-if="!hideLabel"
+      :for="path"
+      class="setting-label"
+      :class="{ 'faint': shouldBeDisabled }"
+    >
+      <template v-if="backendDescriptionLabel">
+        {{ backendDescriptionLabel + ' ' }}
+      </template>
+      <template v-else-if="source === 'admin'">
+        MISSING LABEL FOR {{ path }}
+      </template>
+      <slot v-else />
+    </label>
+    {{ ' ' }}
+    <input
+      :id="path"
+      class="input string-input"
+      :class="{ disabled: shouldBeDisabled }"
+      :disabled="shouldBeDisabled"
+      :placeholder="backendDescriptionSuggestions[0]"
+      :value="displayState"
+      @change="event => update({ event })"
+    >
+    {{ ' ' }}
+    <Checkbox
+      :model-value="socksState"
+      :disabled="shouldBeDisabled"
+      :indeterminate="isIndeterminate"
+      @update:model-value="event => update({ event, isProxy: true})"
+    >
+      {{ $t('admin_dash.http.socks5') }}
+      {{ ' ' }}
+    </Checkbox>
+    {{ ' ' }}
+    <ModifiedIndicator
+      :changed="isChanged"
+      :onclick="reset"
+    />
+    <ProfileSettingIndicator :is-profile="isProfileSetting" />
+    <DraftButtons v-if="!hideDraftButtons" />
+    <p
+      v-if="backendDescriptionDescription"
+      class="setting-description"
+      :class="{ 'faint': shouldBeDisabled }"
+    >
+      {{ backendDescriptionDescription + ' ' }}
+    </p>
+  </label>
+</template>
+
+<script src="./proxy_setting.js"></script>

src/components/settings_modal/helpers/setting.js

@@ -18,6 +18,10 @@ export default {
       type: [String, Array],
       required: false
     },
+    descriptionPathOverride: {
+      type: [String, Array],
+      required: false
+    },
     suggestions: {
       type: [String, Array],
       required: false
@@ -236,7 +240,9 @@ export default {
     },
     descriptionPath () {
       if (this.path == null) return null
+      if (this.descriptionPathOverride) return this.descriptionPathOverride
       const path = Array.isArray(this.path) ? this.path : this.path.split('.')
+      console.log(this.path, this.subgroup)
       if (this.subgroup) {
         return [
             ...path.slice(0, path.length - 1),