Add a possibility to manage own nodes on Nodes screen

src/components/NodesTable/AddCustomNode/AddCustomNode.vue

@@ -0,0 +1,42 @@
+<template>
+  <CustomNodeDialog v-model="open">
+    <template #activator="{ props }">
+      <slot name="activator" :props="props" />
+    </template>
+
+    <template #input>
+      <NodeHostInput v-model="nodeHost" />
+    </template>
+
+    <template #submit>
+      <v-btn variant="text" class="a-btn-regular" :disabled="!isValidNode" @click="submit">
+        {{ $t('nodes.custom_node.form.submit_button_title') }}
+      </v-btn>
+    </template>
+  </CustomNodeDialog>
+</template>
+
+<script lang="ts">
+import { ref } from 'vue'
+import CustomNodeDialog from './components/CustomNodeDialog.vue'
+import NodeHostInput from './components/NodeHostInput.vue'
+import { useCustomNodeForm } from './hooks/useCustomNodeForm'
+
+export default {
+  components: { NodeHostInput, CustomNodeDialog },
+  emits: ['submit'],
+  setup(props, { emit }) {
+    const open = ref(false)
+
+    const { nodeHost, isValidNode } = useCustomNodeForm()
+    const submit = () => emit('submit', nodeHost)
+
+    return {
+      open,
+      nodeHost,
+      isValidNode,
+      submit
+    }
+  }
+}
+</script>

src/components/NodesTable/AddCustomNode/EditCustomNode.vue

@@ -0,0 +1,47 @@
+<template>
+  <CustomNodeDialog v-model="open">
+    <template #activator="{ props }">
+      <slot name="activator" :props="props" />
+    </template>
+
+    <template #input>
+      <NodeHostInput v-model="nodeHost" />
+    </template>
+
+    <template #submit>
+      <v-btn variant="text" class="a-btn-regular" :disabled="!isValidNode" @click="submit">
+        {{ $t('nodes.custom_node.form.submit_button_title') }}
+      </v-btn>
+    </template>
+  </CustomNodeDialog>
+</template>
+
+<script lang="ts">
+import { ref } from 'vue'
+import CustomNodeDialog from './components/CustomNodeDialog.vue'
+import NodeHostInput from './components/NodeHostInput.vue'
+import { useCustomNodeForm } from './hooks/useCustomNodeForm'
+
+export default {
+  components: { NodeHostInput, CustomNodeDialog },
+  props: {
+    host: {
+      type: String
+    }
+  },
+  emits: ['submit'],
+  setup(props, { emit }) {
+    const open = ref(false)
+
+    const { nodeHost, isValidNode } = useCustomNodeForm(props.host)
+    const submit = () => emit('submit', nodeHost)
+
+    return {
+      open,
+      nodeHost,
+      isValidNode,
+      submit
+    }
+  }
+}
+</script>

src/components/NodesTable/AddCustomNode/components/CustomNodeDialog.vue

@@ -0,0 +1,57 @@
+<template>
+  <v-dialog v-model="open" :width="500">
+    <template #activator="{ props }">
+      <slot name="activator" :props="props" />
+    </template>
+
+    <v-card>
+      <v-card-title class="a-text-header">
+        {{ $t('nodes.custom_node.dialog_title') }}
+      </v-card-title>
+
+      <v-divider class="a-divider" />
+
+      <v-card-text class="pa-4">
+        <slot name="input" />
+      </v-card-text>
+
+      <v-card-actions class="pa-3">
+        <v-spacer />
+
+        <v-btn variant="text" class="a-btn-regular" @click="open = false">
+          {{ $t('transfer.confirm_cancel') }}
+        </v-btn>
+
+        <slot name="submit" />
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent } from 'vue'
+
+export default defineComponent({
+  props: {
+    modelValue: {
+      type: Boolean,
+      required: true
+    }
+  },
+  emits: ['update:modelValue'],
+  setup(props, { emit }) {
+    const open = computed({
+      get() {
+        return props.modelValue
+      },
+      set(value) {
+        emit('update:modelValue', value)
+      }
+    })
+
+    return {
+      open
+    }
+  }
+})
+</script>

src/components/NodesTable/AddCustomNode/components/NodeHostInput.vue

@@ -0,0 +1,25 @@
+<template>
+  <v-text-field
+    :model-value="modelValue"
+    @update:model-value="$emit('update:modelValue', $event)"
+    autofocus
+    color="primary"
+    class="a-input"
+    variant="underlined"
+    :label="$t('nodes.custom_node.form.host_input.label')"
+    :hint="$t('nodes.custom_node.form.host_input.hint')"
+  />
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  props: {
+    modelValue: {
+      type: String
+    }
+  },
+  emits: ['update:modelValue']
+})
+</script>

src/components/NodesTable/AddCustomNode/hooks/useCustomNodeForm.ts

@@ -0,0 +1,17 @@
+import { computed, ref } from 'vue'
+
+export function useCustomNodeForm(defaultHost = '') {
+  const nodeHost = ref(defaultHost)
+
+  const isValidNode = computed(() => {
+    const isNotEmpty = nodeHost.value.length > 0
+    const isValidURL = /^https?:\/\/[\w]+\.[\w.]+$/.test(nodeHost.value)
+
+    return isNotEmpty && isValidURL
+  })
+
+  return {
+    nodeHost,
+    isValidNode
+  }
+}

src/components/NodesTable/NodesTable.vue

@@ -1,21 +1,49 @@
 <template>
-  <v-table :class="classes.root">
-    <nodes-table-head />
+  <div :class="classes.root">
+    <nodes-toolbar>
+      <AddCustomNode>
+        <template #activator="{ props }">
+          <v-btn variant="tonal" v-bind="props">Add node</v-btn>
+        </template>
+      </AddCustomNode>
 
-    <tbody>
-      <nodes-table-item v-for="node in nodes" :key="node.name" :node="node" />
-    </tbody>
-  </v-table>
+      <EditCustomNode host="https://google.com">
+        <template #activator="{ props }">
+          <v-btn variant="outlined" v-bind="props">Edit</v-btn>
+        </template>
+      </EditCustomNode>
+    </nodes-toolbar>
+
+    <v-table :class="classes.table">
+      <nodes-table-head />
+
+      <tbody>
+        <nodes-table-item v-for="node in nodes" :key="node.name" :node="node" />
+      </tbody>
+    </v-table>
+  </div>
 </template>
 
 <script>
 import { computed, defineComponent } from 'vue'
 import { useStore } from 'vuex'
 import NodesTableItem from '@/components/NodesTable/NodesTableItem'
 import NodesTableHead from '@/components/NodesTable/NodesTableHead'
+import NodesToolbar from '@/components/NodesTable/NodesToolbar.vue'
+import AddCustomNode from './AddCustomNode/AddCustomNode.vue'
+import EditCustomNode from './AddCustomNode/EditCustomNode.vue'
+
+const className = 'nodes-table'
+const classes = {
+  root: className,
+  table: `${className}__table`
+}
 
 export default defineComponent({
   components: {
+    EditCustomNode,
+    AddCustomNode,
+    NodesToolbar,
     NodesTableHead,
     NodesTableItem
   },
@@ -33,11 +61,6 @@ export default defineComponent({
       })
     })
 
-    const className = 'nodes-table'
-    const classes = {
-      root: className
-    }
-
     return {
       nodes,
       classes
@@ -50,9 +73,13 @@ export default defineComponent({
 @import 'vuetify/settings';
 
 .nodes-table {
+  --v-table-header-height: 52px;
   margin-left: -24px;
   margin-right: -24px;
-  max-width: unset !important;
+
+  &__table {
+    max-width: unset !important;
+  }
 }
 
 @media #{map-get($display-breakpoints, 'sm-and-down')} {
@@ -64,7 +91,9 @@ export default defineComponent({
 
 .v-theme--dark {
   .nodes-table {
-    background-color: rgb(var(--v-theme-on-surface-variant));
+    &__table {
+      background-color: rgb(var(--v-theme-on-surface-variant));
+    }
   }
 }
 </style>

src/components/NodesTable/NodesToolbar.vue

@@ -0,0 +1,53 @@
+<template>
+  <v-sheet :class="classes.root">
+    <div :class="classes.content">
+      <slot />
+    </div>
+
+    <v-divider />
+  </v-sheet>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+const className = 'nodes-toolbar'
+const classes = {
+  root: className,
+  content: `${className}__content`
+}
+
+export default defineComponent({
+  setup() {
+    return {
+      classes
+    }
+  }
+})
+</script>
+
+<style lang="scss">
+@import 'vuetify/settings';
+@import 'src/assets/styles/settings/_colors.scss';
+
+$root: '.nodes-toolbar';
+
+#{$root} {
+  &__content {
+    display: flex;
+    justify-content: flex-end;
+    padding: 8px;
+  }
+}
+
+.v-theme--light {
+  #{$root} {
+  }
+}
+
+.v-theme--dark {
+  #{$root} {
+    background-color: rgb(var(--v-theme-on-surface-variant));
+  }
+}
+</style>

src/locales/en.json

@@ -169,7 +169,17 @@
     "socket": "Socket",
     "unsupported": "Unsupported",
     "use_socket_connection": "Use socket connections",
-    "use_socket_connection_tooltip": "WebSockets allow to get new messages instantly like P2P messengers"
+    "use_socket_connection_tooltip": "WebSockets allow to get new messages instantly like P2P messengers",
+    "custom_node": {
+      "dialog_title": "Add a custom node",
+      "form": {
+        "host_input": {
+          "label": "Host",
+          "hint": "e.g. https://your-custom-node-url.com"
+        },
+        "submit_button_title": "Add"
+      }
+    }
   },
   "notifications": {
     "tabMessage": {