From 6d2f796a581f2a9f3973918ef5130a2678c90bca Mon Sep 17 00:00:00 2001
From: bludnic <victorcpla@gmail.com>
Date: Thu, 12 Oct 2023 01:49:45 +0100
Subject: [PATCH 1/2] fix(NodesTable): decrease the table head height

---
 src/components/NodesTable/NodesTable.vue   |  4 ++++
 src/components/NodesTable/NodesToolbar.vue | 15 +++++++++++++++
 2 files changed, 19 insertions(+)
 create mode 100644 src/components/NodesTable/NodesToolbar.vue

diff --git a/src/components/NodesTable/NodesTable.vue b/src/components/NodesTable/NodesTable.vue
index 15939cf0b..d92fcbaba 100644
--- a/src/components/NodesTable/NodesTable.vue
+++ b/src/components/NodesTable/NodesTable.vue
@@ -1,4 +1,5 @@
 <template>
+  <nodes-toolbar />
   <v-table :class="classes.root">
     <nodes-table-head />
 
@@ -13,9 +14,11 @@ 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'
 
 export default defineComponent({
   components: {
+    NodesToolbar,
     NodesTableHead,
     NodesTableItem
   },
@@ -50,6 +53,7 @@ export default defineComponent({
 @import 'vuetify/settings';
 
 .nodes-table {
+  --v-table-header-height: 52px;
   margin-left: -24px;
   margin-right: -24px;
   max-width: unset !important;
diff --git a/src/components/NodesTable/NodesToolbar.vue b/src/components/NodesTable/NodesToolbar.vue
new file mode 100644
index 000000000..de2718eee
--- /dev/null
+++ b/src/components/NodesTable/NodesToolbar.vue
@@ -0,0 +1,15 @@
+<template>
+  <v-sheet>
+    hello
+  </v-sheet>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+
+export default defineComponent({
+  setup() {
+
+  }
+})
+</script>

From 51ac121932fb0c016681f2dac0f19d1735042809 Mon Sep 17 00:00:00 2001
From: bludnic <victorcpla@gmail.com>
Date: Thu, 12 Oct 2023 03:55:54 +0100
Subject: [PATCH 2/2] feat: add UI components for Add/Edit custom nodes

---
 .../AddCustomNode/AddCustomNode.vue           | 42 ++++++++++++++
 .../AddCustomNode/EditCustomNode.vue          | 47 +++++++++++++++
 .../components/CustomNodeDialog.vue           | 57 +++++++++++++++++++
 .../components/NodeHostInput.vue              | 25 ++++++++
 .../AddCustomNode/hooks/useCustomNodeForm.ts  | 17 ++++++
 src/components/NodesTable/NodesTable.vue      | 53 ++++++++++++-----
 src/components/NodesTable/NodesToolbar.vue    | 46 +++++++++++++--
 src/locales/en.json                           | 12 +++-
 src/store/modules/nodes/nodes-actions.js      | 42 +++++++-------
 9 files changed, 301 insertions(+), 40 deletions(-)
 create mode 100644 src/components/NodesTable/AddCustomNode/AddCustomNode.vue
 create mode 100644 src/components/NodesTable/AddCustomNode/EditCustomNode.vue
 create mode 100644 src/components/NodesTable/AddCustomNode/components/CustomNodeDialog.vue
 create mode 100644 src/components/NodesTable/AddCustomNode/components/NodeHostInput.vue
 create mode 100644 src/components/NodesTable/AddCustomNode/hooks/useCustomNodeForm.ts

diff --git a/src/components/NodesTable/AddCustomNode/AddCustomNode.vue b/src/components/NodesTable/AddCustomNode/AddCustomNode.vue
new file mode 100644
index 000000000..0f616fdaa
--- /dev/null
+++ b/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>
diff --git a/src/components/NodesTable/AddCustomNode/EditCustomNode.vue b/src/components/NodesTable/AddCustomNode/EditCustomNode.vue
new file mode 100644
index 000000000..67213bc5d
--- /dev/null
+++ b/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>
diff --git a/src/components/NodesTable/AddCustomNode/components/CustomNodeDialog.vue b/src/components/NodesTable/AddCustomNode/components/CustomNodeDialog.vue
new file mode 100644
index 000000000..57ff04502
--- /dev/null
+++ b/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>
diff --git a/src/components/NodesTable/AddCustomNode/components/NodeHostInput.vue b/src/components/NodesTable/AddCustomNode/components/NodeHostInput.vue
new file mode 100644
index 000000000..281d66f90
--- /dev/null
+++ b/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>
diff --git a/src/components/NodesTable/AddCustomNode/hooks/useCustomNodeForm.ts b/src/components/NodesTable/AddCustomNode/hooks/useCustomNodeForm.ts
new file mode 100644
index 000000000..3391c15fd
--- /dev/null
+++ b/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
+  }
+}
diff --git a/src/components/NodesTable/NodesTable.vue b/src/components/NodesTable/NodesTable.vue
index d92fcbaba..29d27e2d5 100644
--- a/src/components/NodesTable/NodesTable.vue
+++ b/src/components/NodesTable/NodesTable.vue
@@ -1,12 +1,27 @@
 <template>
-  <nodes-toolbar />
-  <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>
@@ -15,9 +30,19 @@ 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
@@ -36,11 +61,6 @@ export default defineComponent({
       })
     })
 
-    const className = 'nodes-table'
-    const classes = {
-      root: className
-    }
-
     return {
       nodes,
       classes
@@ -56,7 +76,10 @@ export default defineComponent({
   --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')} {
@@ -68,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>
diff --git a/src/components/NodesTable/NodesToolbar.vue b/src/components/NodesTable/NodesToolbar.vue
index de2718eee..ddfbc4bfa 100644
--- a/src/components/NodesTable/NodesToolbar.vue
+++ b/src/components/NodesTable/NodesToolbar.vue
@@ -1,15 +1,53 @@
 <template>
-  <v-sheet>
-    hello
+  <v-sheet :class="classes.root">
+    <div :class="classes.content">
+      <slot />
+    </div>
+
+    <v-divider />
   </v-sheet>
 </template>
 
 <script lang="ts">
-import { defineComponent } from "vue";
+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>
diff --git a/src/locales/en.json b/src/locales/en.json
index 22bff4db1..530300814 100644
--- a/src/locales/en.json
+++ b/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": {
diff --git a/src/store/modules/nodes/nodes-actions.js b/src/store/modules/nodes/nodes-actions.js
index 793c21c0d..187be9a19 100644
--- a/src/store/modules/nodes/nodes-actions.js
+++ b/src/store/modules/nodes/nodes-actions.js
@@ -1,21 +1,21 @@
-import apiClient from '../../../lib/adamant-api-client'
-
-export default {
-  restore ({ state }) {
-    const nodes = Object.values(state.list)
-
-    nodes.forEach(node => apiClient.toggleNode(node.url, node.active))
-  },
-
-  updateStatus () {
-    apiClient.updateStatus()
-  },
-
-  toggle (context, payload) {
-    context.commit('toggle', payload)
-  },
-
-  setUseFastest (context, payload) {
-    context.commit('useFastest', payload)
-  }
-}
+import apiClient from '../../../lib/adamant-api-client'
+
+export default {
+  restore ({ state }) {
+    const nodes = Object.values(state.list)
+
+    nodes.forEach(node => apiClient.toggleNode(node.url, node.active))
+  },
+
+  updateStatus () {
+    apiClient.updateStatus()
+  },
+
+  toggle (context, payload) {
+    context.commit('toggle', payload)
+  },
+
+  setUseFastest (context, payload) {
+    context.commit('useFastest', payload)
+  }
+}