From db62a07fb89e08e974210ccb0f62cc648d799e94 Mon Sep 17 00:00:00 2001
From: "Shishkevich D." <135337715+shishkevichd@users.noreply.github.com>
Date: Mon, 17 Mar 2025 18:26:07 +0700
Subject: Code refactoring (#2785)

* chore: pretty theme menu in sidebar

* refactor: renaming component templates

* refactor: create custom `a-statistic` component

* fix: display button text only on large screens

* chore: remove loading background in overview page

* fix: show `Version` text when xray version is unknown
---
 web/html/xui/component/aCustomStatistic.html   |  55 ++++++
 web/html/xui/component/aPasswordInput.html     |  57 ++++++
 web/html/xui/component/aPersianDatepicker.html |  72 ++++++++
 web/html/xui/component/aSettingListItem.html   |  49 ++++++
 web/html/xui/component/aTableSortable.html     | 232 +++++++++++++++++++++++++
 web/html/xui/component/aThemeSwitch.html       | 118 +++++++++++++
 web/html/xui/component/password.html           |  57 ------
 web/html/xui/component/persianDatepicker.html  |  72 --------
 web/html/xui/component/setting.html            |  57 ------
 web/html/xui/component/sortableTable.html      | 232 -------------------------
 web/html/xui/component/themeSwitch.html        | 118 -------------
 11 files changed, 583 insertions(+), 536 deletions(-)
 create mode 100644 web/html/xui/component/aCustomStatistic.html
 create mode 100644 web/html/xui/component/aPasswordInput.html
 create mode 100644 web/html/xui/component/aPersianDatepicker.html
 create mode 100644 web/html/xui/component/aSettingListItem.html
 create mode 100644 web/html/xui/component/aTableSortable.html
 create mode 100644 web/html/xui/component/aThemeSwitch.html
 delete mode 100644 web/html/xui/component/password.html
 delete mode 100644 web/html/xui/component/persianDatepicker.html
 delete mode 100644 web/html/xui/component/setting.html
 delete mode 100644 web/html/xui/component/sortableTable.html
 delete mode 100644 web/html/xui/component/themeSwitch.html

(limited to 'web/html/xui/component')

diff --git a/web/html/xui/component/aCustomStatistic.html b/web/html/xui/component/aCustomStatistic.html
new file mode 100644
index 00000000..41695e90
--- /dev/null
+++ b/web/html/xui/component/aCustomStatistic.html
@@ -0,0 +1,55 @@
+{{define "component/customStatistic"}}
+<template>
+    <a-statistic :title="title" :value="value">
+        <template #prefix>
+            <slot name="prefix"></slot>
+        </template>
+        <template #suffix>
+            <slot name="suffix"></slot>
+        </template>
+    </a-statistic>
+</template>
+{{end}}
+
+{{define "component/aCustomStatistic"}}
+<style>
+    .dark .ant-statistic-title,
+    .dark .ant-statistic-content {
+        color: var(--dark-color-text-primary) !important
+    }
+
+    .dark .ant-statistic-title {
+        user-select: none;
+        opacity: 0.55;
+    }
+    
+    .ant-statistic-title {
+        margin-bottom: 0 !important;
+    }
+
+    .ant-statistic-content-prefix {
+        margin-right: 6px !important;
+    }
+
+    .ant-statistic-content-prefix,
+    .ant-statistic-content-value {
+        font-size: 1.05rem;
+    }
+</style>
+
+<script>
+  Vue.component('a-custom-statistic', {
+    props: {
+      'title': {
+        type: String,
+        required: false,
+      },
+      'value': {
+        type: String,
+        required: false
+      }
+    },
+    template: `{{template "component/customStatistic"}}`,
+  });
+</script>
+{{end}}
\ No newline at end of file
diff --git a/web/html/xui/component/aPasswordInput.html b/web/html/xui/component/aPasswordInput.html
new file mode 100644
index 00000000..460e7e76
--- /dev/null
+++ b/web/html/xui/component/aPasswordInput.html
@@ -0,0 +1,57 @@
+{{define "component/passwordInput"}}
+<template>
+  <a-input :value="value" :type="showPassword ? 'text' : 'password'" :placeholder="placeholder"
+    :autocomplete="autocomplete" :name="name" @input="$emit('input', $event.target.value)">
+    <template v-if="icon" #prefix>
+      <a-icon :type="icon" style="font-size: 16px;" />
+    </template>
+    <template #addonAfter>
+      <a-icon :type="showPassword ? 'eye-invisible' : 'eye'" @click="toggleShowPassword" style="font-size: 16px;" />
+    </template>
+  </a-input>
+</template>
+{{end}}
+
+{{define "component/aPasswordInput"}}
+<script>
+  Vue.component('a-password-input', {
+    props: {
+      'title': {
+        type: String,
+        required: false,
+      },
+      'value': {
+        type: String,
+        required: false,
+      },
+      'placeholder': {
+        type: String,
+        required: false,
+      },
+      'autocomplete': {
+        type: String,
+        required: false,
+      },
+      'name': {
+        type: String,
+        required: false,
+      },
+      'icon': {
+        type: undefined,
+        required: false
+      }
+    },
+    template: `{{template "component/passwordInput"}}`,
+    data() {
+      return {
+        showPassword: false,
+      };
+    },
+    methods: {
+      toggleShowPassword() {
+        this.showPassword = !this.showPassword;
+      },
+    },
+  });
+</script>
+{{end}}
\ No newline at end of file
diff --git a/web/html/xui/component/aPersianDatepicker.html b/web/html/xui/component/aPersianDatepicker.html
new file mode 100644
index 00000000..58132ddd
--- /dev/null
+++ b/web/html/xui/component/aPersianDatepicker.html
@@ -0,0 +1,72 @@
+{{define "component/persianDatepickerTemplate"}}
+<template>
+    <div>
+        <a-input :value="value" type="text" v-model="date" data-jdp class="persian-datepicker"
+            @input="$emit('input', convertToGregorian($event.target.value)); jalaliDatepicker.hide();"
+            :placeholder="placeholder">
+            <template #addonAfter>
+                <a-icon type="calendar" style="font-size: 14px; opacity: 0.5;" />
+            </template>
+        </a-input>
+    </div>
+</template>
+{{end}}
+
+{{define "component/aPersianDatepicker"}}
+<link rel="stylesheet" href="{{ .base_path }}assets/persian-datepicker/persian-datepicker.min.css?{{ .cur_ver }}" />
+<script src="{{ .base_path }}assets/moment/moment-jalali.min.js?{{ .cur_ver }}"></script>
+<script src="{{ .base_path }}assets/persian-datepicker/persian-datepicker.min.js?{{ .cur_ver }}"></script>
+<script>
+    const persianDatepicker = {};
+
+    Vue.component('a-persian-datepicker', {
+        props: {
+            'format': {
+                type: undefined,
+                required: false,
+            },
+            'value': {
+                type: String,
+                required: false,
+            },
+            'placeholder': {
+                type: String,
+                required: false,
+            },
+        },
+        template: `{{template "component/persianDatepickerTemplate"}}`,
+        data() {
+            return {
+                date: '',
+                persianDatepicker,
+            };
+        },
+        watch: {
+            value: function (date) {
+                this.date = this.convertToJalalian(date)
+            }
+        },
+        mounted() {
+            this.date = this.convertToJalalian(this.value)
+            this.listenToDatepicker()
+        },
+        methods: {
+            convertToGregorian(date) {
+                return date ? moment(moment(date, 'jYYYY/jMM/jDD HH:mm:ss').format('YYYY-MM-DD HH:mm:ss')) : null
+            },
+            convertToJalalian(date) {
+                return date && moment.isMoment(date) ? date.format('jYYYY/jMM/jDD HH:mm:ss') : null
+            },
+            listenToDatepicker() {
+                jalaliDatepicker.startWatch({
+                    time: true,
+                    zIndex: '9999',
+                    hideAfterChange: true,
+                    useDropDownYears: false,
+                    changeMonthRotateYear: true,
+                });
+            },
+        }
+    });
+</script>
+{{end}}
\ No newline at end of file
diff --git a/web/html/xui/component/aSettingListItem.html b/web/html/xui/component/aSettingListItem.html
new file mode 100644
index 00000000..6a7d31d0
--- /dev/null
+++ b/web/html/xui/component/aSettingListItem.html
@@ -0,0 +1,49 @@
+{{define "component/settingListItem"}}
+<a-list-item :style="{ padding: padding }">
+    <a-row>
+        <a-col :lg="24" :xl="12">
+            <a-list-item-meta>
+                <template #title>
+                    <slot name="title"></slot>
+                </template>
+                <template #description>
+                    <slot name="description"></slot>
+                </template>
+            </a-list-item-meta>
+        </a-col>
+        <a-col :lg="24" :xl="12">
+            <slot name="control"></slot>
+        </a-col>
+    </a-row>
+</a-list-item>
+{{end}}
+
+{{define "component/aSettingListItem"}}
+<script>
+    Vue.component('a-setting-list-item', {
+        props: {
+            'paddings': {
+                type: String,
+                required: false,
+                defaultValue: "default",
+                validator: function (value) {
+                    return ['small', 'default'].includes(value)
+                }
+            }
+        },
+        template: `{{ template "component/settingListItem" }}`,
+        computed: {
+            padding() {
+                switch (this.paddings) {
+                    case "small":
+                        return "10px 20px !important"
+                        break;
+                    case "default":
+                        return "20px !important"
+                        break;
+                }
+            }
+        }
+    })
+</script>
+{{end}}
diff --git a/web/html/xui/component/aTableSortable.html b/web/html/xui/component/aTableSortable.html
new file mode 100644
index 00000000..7dbc3d0a
--- /dev/null
+++ b/web/html/xui/component/aTableSortable.html
@@ -0,0 +1,232 @@
+{{define "component/sortableTableTrigger"}}
+<a-icon type="drag" class="sortable-icon" style="cursor: move;" @mouseup="mouseUpHandler" @mousedown="mouseDownHandler"
+  @click="clickHandler" />
+{{end}}
+
+{{define "component/aTableSortable"}}
+<script>
+  const DRAGGABLE_ROW_CLASS = 'draggable-row';
+  const findParentRowElement = (el) => {
+    if (!el || !el.tagName) {
+      return null;
+    } else if (el.classList.contains(DRAGGABLE_ROW_CLASS)) {
+      return el;
+    } else if (el.parentNode) {
+      return findParentRowElement(el.parentNode);
+    } else {
+      return null;
+    }
+  }
+  Vue.component('a-table-sortable', {
+    data() {
+      return {
+        sortingElementIndex: null,
+        newElementIndex: null,
+      };
+    },
+    props: {
+      'data-source': {
+        type: undefined,
+        required: false,
+      },
+      'customRow': {
+        type: undefined,
+        required: false,
+      }
+    },
+    inheritAttrs: false,
+    provide() {
+      const sortable = {}
+      Object.defineProperty(sortable, "setSortableIndex", {
+        enumerable: true,
+        get: () => this.setCurrentSortableIndex,
+      });
+      Object.defineProperty(sortable, "resetSortableIndex", {
+        enumerable: true,
+        get: () => this.resetSortableIndex,
+      });
+      return {
+        sortable,
+      }
+    },
+    render: function (createElement) {
+      return createElement('a-table', {
+        class: {
+          'ant-table-is-sorting': this.isDragging(),
+        },
+        props: {
+          ...this.$attrs,
+          'data-source': this.records,
+          customRow: (record, index) => this.customRowRender(record, index),
+        },
+        on: this.$listeners,
+        nativeOn: {
+          drop: (e) => this.dropHandler(e),
+        },
+        scopedSlots: this.$scopedSlots,
+      }, this.$slots.default,)
+    },
+    created() {
+      this.$memoSort = {};
+    },
+    methods: {
+      isDragging() {
+        const currentIndex = this.sortingElementIndex;
+        return currentIndex !== null && currentIndex !== undefined;
+      },
+      resetSortableIndex(e, index) {
+        this.sortingElementIndex = null;
+        this.newElementIndex = null;
+        this.$memoSort = {};
+      },
+      setCurrentSortableIndex(e, index) {
+        this.sortingElementIndex = index;
+      },
+      dragStartHandler(e, index) {
+        if (!this.isDragging()) {
+          e.preventDefault();
+          return;
+        }
+        const hideDragImage = this.$el.cloneNode(true);
+        hideDragImage.id = "hideDragImage-hide";
+        hideDragImage.style.opacity = 0;
+        e.dataTransfer.setDragImage(hideDragImage, 0, 0);
+      },
+      dragStopHandler(e, index) {
+        const hideDragImage = document.getElementById('hideDragImage-hide');
+        if (hideDragImage) hideDragImage.remove();
+        this.resetSortableIndex(e, index);
+      },
+      dragOverHandler(e, index) {
+        if (!this.isDragging()) {
+          return;
+        }
+        e.preventDefault();
+        const currentIndex = this.sortingElementIndex;
+        if (index === currentIndex) {
+          this.newElementIndex = null;
+          return;
+        }
+        const row = findParentRowElement(e.target);
+        if (!row) {
+          return;
+        }
+        const rect = row.getBoundingClientRect();
+        const offsetTop = e.pageY - rect.top;
+        if (offsetTop < rect.height / 2) {
+          this.newElementIndex = Math.max(index - 1, 0);
+        } else {
+          this.newElementIndex = index;
+        }
+      },
+      dropHandler(e) {
+        if (this.isDragging()) {
+          this.$emit('onsort', this.sortingElementIndex, this.newElementIndex);
+        }
+      },
+      customRowRender(record, index) {
+        const parentMethodResult = this.customRow?.(record, index) || {};
+        const newIndex = this.newElementIndex;
+        const currentIndex = this.sortingElementIndex;
+        return {
+          ...parentMethodResult,
+          attrs: {
+            ...(parentMethodResult?.attrs || {}),
+            draggable: true,
+          },
+          on: {
+            ...(parentMethodResult?.on || {}),
+            dragstart: (e) => this.dragStartHandler(e, index),
+            dragend: (e) => this.dragStopHandler(e, index),
+            dragover: (e) => this.dragOverHandler(e, index),
+          },
+          class: {
+            ...(parentMethodResult?.class || {}),
+            [DRAGGABLE_ROW_CLASS]: true,
+            ['dragging']: this.isDragging() ? (newIndex === null ? index === currentIndex : index === newIndex) : false,
+          },
+        };
+      }
+    },
+    computed: {
+      records() {
+        const newIndex = this.newElementIndex;
+        const currentIndex = this.sortingElementIndex;
+        if (!this.isDragging() || newIndex === null || currentIndex === newIndex) {
+          return this.dataSource;
+        }
+        if (this.$memoSort.newIndex === newIndex) {
+          return this.$memoSort.list;
+        }
+        let list = [...this.dataSource];
+        list.splice(newIndex, 0, list.splice(currentIndex, 1)[0]);
+        this.$memoSort = {
+          newIndex,
+          list,
+        };
+        return list;
+      }
+    }
+  });
+  Vue.component('a-table-sort-trigger', {
+    template: `{{template "component/sortableTableTrigger"}}`,
+    props: {
+      'item-index': {
+        type: undefined,
+        required: false
+      }
+    },
+    inject: ['sortable'],
+    methods: {
+      mouseDownHandler(e) {
+        if (this.sortable) {
+          this.sortable.setSortableIndex(e, this.itemIndex);
+        }
+      },
+      mouseUpHandler(e) {
+        if (this.sortable) {
+          this.sortable.resetSortableIndex(e, this.itemIndex);
+        }
+      },
+      clickHandler(e) {
+        e.preventDefault();
+      },
+    }
+  })
+</script>
+<style>
+  @media only screen and (max-width: 767px) {
+    .sortable-icon {
+      display: none;
+    }
+  }
+
+  .ant-table-is-sorting .draggable-row td {
+    background-color: #ffffff !important;
+  }
+
+  .dark .ant-table-is-sorting .draggable-row td {
+    background-color: var(--dark-color-surface-100) !important;
+  }
+
+  .ant-table-is-sorting .dragging td {
+    background-color: rgb(232 244 242) !important;
+    color: rgba(0, 0, 0, 0.3);
+  }
+
+  .dark .ant-table-is-sorting .dragging td {
+    background-color: var(--dark-color-table-hover) !important;
+    color: rgba(255, 255, 255, 0.3);
+  }
+
+  .ant-table-is-sorting .dragging {
+    opacity: 1;
+    box-shadow: 1px -2px 2px #008771;
+    transition: all 0.2s;
+  }
+
+  .ant-table-is-sorting .dragging .ant-table-row-index {
+    opacity: 0.3;
+  }
+</style>
+{{end}}
\ No newline at end of file
diff --git a/web/html/xui/component/aThemeSwitch.html b/web/html/xui/component/aThemeSwitch.html
new file mode 100644
index 00000000..9a213ca6
--- /dev/null
+++ b/web/html/xui/component/aThemeSwitch.html
@@ -0,0 +1,118 @@
+{{define "component/themeSwitchTemplate"}}
+<template>
+  <a-menu :theme="themeSwitcher.currentTheme" mode="inline" selected-keys="">
+    <a-sub-menu>
+      <span slot="title">
+        <a-icon type="bulb" :theme="themeSwitcher.isDarkTheme ? 'filled' : 'outlined'"></a-icon>
+        <span>{{ i18n "menu.theme" }}</span>
+      </span>
+      <a-menu-item id="change-theme" class="ant-menu-theme-switch" @mousedown="themeSwitcher.animationsOff()"> 
+        <span>{{ i18n "menu.dark" }}</span>
+        <a-switch style="margin-left: 2px;" size="small" :default-checked="themeSwitcher.isDarkTheme" @change="themeSwitcher.toggleTheme()"></a-switch>
+      </a-menu-item>
+      <a-menu-item id="change-theme-ultra" v-if="themeSwitcher.isDarkTheme" class="ant-menu-theme-switch" @mousedown="themeSwitcher.animationsOffUltra()"> 
+        <span>{{ i18n "menu.ultraDark" }}</span>
+        <a-checkbox style="margin-left: 2px;" :checked="themeSwitcher.isUltra" @click="themeSwitcher.toggleUltra()"></a-checkbox>
+      </a-menu-item>
+    </a-sub-menu>
+  </a-menu>
+</template>
+{{end}}
+
+{{define "component/themeSwitchTemplateLogin"}}
+<template>
+  <a-menu @mousedown="themeSwitcher.animationsOff()" id="change-theme" :theme="themeSwitcher.currentTheme" mode="inline"
+    selected-keys="">
+    <a-menu-item mode="inline" class="ant-menu-theme-switch">
+      <a-icon type="bulb" :theme="themeSwitcher.isDarkTheme ? 'filled' : 'outlined'"></a-icon>
+      <a-switch size="small" :default-checked="themeSwitcher.isDarkTheme"
+        @change="themeSwitcher.toggleTheme()"></a-switch>
+      <template v-if="themeSwitcher.isDarkTheme">
+        <a-checkbox style="margin-left: 1rem; vertical-align: middle;" :checked="themeSwitcher.isUltra"
+          @click="themeSwitcher.toggleUltra()">Ultra</a-checkbox>
+      </template>
+    </a-menu-item>
+  </a-menu>
+</template>
+{{end}}
+
+{{define "component/aThemeSwitch"}}
+<script>
+  function createThemeSwitcher() {
+    const isDarkTheme = localStorage.getItem('dark-mode') === 'true';
+    const isUltra = localStorage.getItem('isUltraDarkThemeEnabled') === 'true';
+    if (isUltra) {
+      document.documentElement.setAttribute('data-theme', 'ultra-dark');
+    }
+    const theme = isDarkTheme ? 'dark' : 'light';
+    document.querySelector('body').setAttribute('class', theme);
+    return {
+      animationsOff() {
+        document.documentElement.setAttribute('data-theme-animations', 'off');
+        const themeAnimations = document.querySelector('#change-theme');
+        themeAnimations.addEventListener('mouseleave', () => {
+          document.documentElement.removeAttribute('data-theme-animations');
+        });
+        themeAnimations.addEventListener('touchend', () => {
+          document.documentElement.removeAttribute('data-theme-animations');
+        });
+      },
+      animationsOffUltra() {
+        document.documentElement.setAttribute('data-theme-animations', 'off');
+        const themeAnimationsUltra = document.querySelector('#change-theme-ultra');
+        themeAnimationsUltra.addEventListener('mouseleave', () => {
+          document.documentElement.removeAttribute('data-theme-animations');
+        });
+        themeAnimationsUltra.addEventListener('touchend', () => {
+          document.documentElement.removeAttribute('data-theme-animations');
+        });
+      },
+      isDarkTheme,
+      isUltra,
+      get currentTheme() {
+        return this.isDarkTheme ? 'dark' : 'light';
+      },
+      toggleTheme() {
+        this.isDarkTheme = !this.isDarkTheme;
+        localStorage.setItem('dark-mode', this.isDarkTheme);
+        document.querySelector('body').setAttribute('class', this.isDarkTheme ? 'dark' : 'light');
+        document.getElementById('message').className = themeSwitcher.currentTheme;
+      },
+      toggleUltra() {
+        this.isUltra = !this.isUltra;
+        if (this.isUltra) {
+          document.documentElement.setAttribute('data-theme', 'ultra-dark');
+        } else {
+          document.documentElement.removeAttribute('data-theme');
+        }
+        localStorage.setItem('isUltraDarkThemeEnabled', this.isUltra.toString());
+      }
+    };
+  }
+  const themeSwitcher = createThemeSwitcher();
+  Vue.component('a-theme-switch', {
+    template: `{{template "component/themeSwitchTemplate"}}`,
+    data: () => ({
+      themeSwitcher
+    }),
+    mounted() {
+      this.$message.config({
+        getContainer: () => document.getElementById('message')
+      });
+      document.getElementById('message').className = themeSwitcher.currentTheme;
+    }
+  });
+  Vue.component('a-theme-switch-login', {
+    template: `{{template "component/themeSwitchTemplateLogin"}}`,
+    data: () => ({
+      themeSwitcher
+    }),
+    mounted() {
+      this.$message.config({
+        getContainer: () => document.getElementById('message')
+      });
+      document.getElementById('message').className = themeSwitcher.currentTheme;
+    }
+  });
+</script>
+{{end}}
\ No newline at end of file
diff --git a/web/html/xui/component/password.html b/web/html/xui/component/password.html
deleted file mode 100644
index 0fea1430..00000000
--- a/web/html/xui/component/password.html
+++ /dev/null
@@ -1,57 +0,0 @@
-{{define "component/passwordInput"}}
-<template>
-  <a-input :value="value" :type="showPassword ? 'text' : 'password'" :placeholder="placeholder"
-    :autocomplete="autocomplete" :name="name" @input="$emit('input', $event.target.value)">
-    <template v-if="icon" #prefix>
-      <a-icon :type="icon" style="font-size: 16px;" />
-    </template>
-    <template #addonAfter>
-      <a-icon :type="showPassword ? 'eye-invisible' : 'eye'" @click="toggleShowPassword" style="font-size: 16px;" />
-    </template>
-  </a-input>
-</template>
-{{end}}
-
-{{define "component/password"}}
-<script>
-  Vue.component('a-password-input', {
-    props: {
-      'title': {
-        type: String,
-        required: false,
-      },
-      'value': {
-        type: String,
-        required: false,
-      },
-      'placeholder': {
-        type: String,
-        required: false,
-      },
-      'autocomplete': {
-        type: String,
-        required: false,
-      },
-      'name': {
-        type: String,
-        required: false,
-      },
-      'icon': {
-        type: undefined,
-        required: false
-      }
-    },
-    template: `{{template "component/passwordInput"}}`,
-    data() {
-      return {
-        showPassword: false,
-      };
-    },
-    methods: {
-      toggleShowPassword() {
-        this.showPassword = !this.showPassword;
-      },
-    },
-  });
-</script>
-{{end}}
\ No newline at end of file
diff --git a/web/html/xui/component/persianDatepicker.html b/web/html/xui/component/persianDatepicker.html
deleted file mode 100644
index 2df79a06..00000000
--- a/web/html/xui/component/persianDatepicker.html
+++ /dev/null
@@ -1,72 +0,0 @@
-{{define "component/persianDatepickerTemplate"}}
-<template>
-    <div>
-        <a-input :value="value" type="text" v-model="date" data-jdp class="persian-datepicker"
-            @input="$emit('input', convertToGregorian($event.target.value)); jalaliDatepicker.hide();"
-            :placeholder="placeholder">
-            <template #addonAfter>
-                <a-icon type="calendar" style="font-size: 14px; opacity: 0.5;" />
-            </template>
-        </a-input>
-    </div>
-</template>
-{{end}}
-
-{{define "component/persianDatepicker"}}
-<link rel="stylesheet" href="{{ .base_path }}assets/persian-datepicker/persian-datepicker.min.css?{{ .cur_ver }}" />
-<script src="{{ .base_path }}assets/moment/moment-jalali.min.js?{{ .cur_ver }}"></script>
-<script src="{{ .base_path }}assets/persian-datepicker/persian-datepicker.min.js?{{ .cur_ver }}"></script>
-<script>
-    const persianDatepicker = {};
-
-    Vue.component('a-persian-datepicker', {
-        props: {
-            'format': {
-                type: undefined,
-                required: false,
-            },
-            'value': {
-                type: String,
-                required: false,
-            },
-            'placeholder': {
-                type: String,
-                required: false,
-            },
-        },
-        template: `{{template "component/persianDatepickerTemplate"}}`,
-        data() {
-            return {
-                date: '',
-                persianDatepicker,
-            };
-        },
-        watch: {
-            value: function (date) {
-                this.date = this.convertToJalalian(date)
-            }
-        },
-        mounted() {
-            this.date = this.convertToJalalian(this.value)
-            this.listenToDatepicker()
-        },
-        methods: {
-            convertToGregorian(date) {
-                return date ? moment(moment(date, 'jYYYY/jMM/jDD HH:mm:ss').format('YYYY-MM-DD HH:mm:ss')) : null
-            },
-            convertToJalalian(date) {
-                return date && moment.isMoment(date) ? date.format('jYYYY/jMM/jDD HH:mm:ss') : null
-            },
-            listenToDatepicker() {
-                jalaliDatepicker.startWatch({
-                    time: true,
-                    zIndex: '9999',
-                    hideAfterChange: true,
-                    useDropDownYears: false,
-                    changeMonthRotateYear: true,
-                });
-            },
-        }
-    });
-</script>
-{{end}}
\ No newline at end of file
diff --git a/web/html/xui/component/setting.html b/web/html/xui/component/setting.html
deleted file mode 100644
index 85220d25..00000000
--- a/web/html/xui/component/setting.html
+++ /dev/null
@@ -1,57 +0,0 @@
-{{define "component/settingListItem"}}
-<a-list-item :style="{ padding: padding }">
-    <a-row>
-        <a-col :lg="24" :xl="12">
-            <a-list-item-meta>
-                <template #title>
-                    <slot name="title"></slot>
-                </template>
-                <template #description>
-                    <slot name="description"></slot>
-                </template>
-            </a-list-item-meta>
-        </a-col>
-        <a-col :lg="24" :xl="12">
-            <slot name="control"></slot>
-        </a-col>
-    </a-row>
-</a-list-item>
-{{end}}
-
-{{define "component/setting"}}
-<script>
-    Vue.component('a-setting-list-item', {
-        props: {
-            'title': {
-                type: String,
-                required: true,
-            },
-            'description': {
-                type: String,
-                required: false,
-            },
-            'paddings': {
-                type: String,
-                required: false,
-                defaultValue: "default",
-                validator: function (value) {
-                    return ['small', 'default'].includes(value)
-                }
-            }
-        },
-        template: `{{ template "component/settingListItem" }}`,
-        computed: {
-            padding() {
-                switch (this.paddings) {
-                    case "small":
-                        return "10px 20px !important"
-                        break;
-                    case "default":
-                        return "20px !important"
-                        break;
-                }
-            }
-        }
-    })
-</script>
-{{end}}
diff --git a/web/html/xui/component/sortableTable.html b/web/html/xui/component/sortableTable.html
deleted file mode 100644
index 67bbcee2..00000000
--- a/web/html/xui/component/sortableTable.html
+++ /dev/null
@@ -1,232 +0,0 @@
-{{define "component/sortableTableTrigger"}}
-<a-icon type="drag" class="sortable-icon" style="cursor: move;" @mouseup="mouseUpHandler" @mousedown="mouseDownHandler"
-  @click="clickHandler" />
-{{end}}
-
-{{define "component/sortableTable"}}
-<script>
-  const DRAGGABLE_ROW_CLASS = 'draggable-row';
-  const findParentRowElement = (el) => {
-    if (!el || !el.tagName) {
-      return null;
-    } else if (el.classList.contains(DRAGGABLE_ROW_CLASS)) {
-      return el;
-    } else if (el.parentNode) {
-      return findParentRowElement(el.parentNode);
-    } else {
-      return null;
-    }
-  }
-  Vue.component('a-table-sortable', {
-    data() {
-      return {
-        sortingElementIndex: null,
-        newElementIndex: null,
-      };
-    },
-    props: {
-      'data-source': {
-        type: undefined,
-        required: false,
-      },
-      'customRow': {
-        type: undefined,
-        required: false,
-      }
-    },
-    inheritAttrs: false,
-    provide() {
-      const sortable = {}
-      Object.defineProperty(sortable, "setSortableIndex", {
-        enumerable: true,
-        get: () => this.setCurrentSortableIndex,
-      });
-      Object.defineProperty(sortable, "resetSortableIndex", {
-        enumerable: true,
-        get: () => this.resetSortableIndex,
-      });
-      return {
-        sortable,
-      }
-    },
-    render: function (createElement) {
-      return createElement('a-table', {
-        class: {
-          'ant-table-is-sorting': this.isDragging(),
-        },
-        props: {
-          ...this.$attrs,
-          'data-source': this.records,
-          customRow: (record, index) => this.customRowRender(record, index),
-        },
-        on: this.$listeners,
-        nativeOn: {
-          drop: (e) => this.dropHandler(e),
-        },
-        scopedSlots: this.$scopedSlots,
-      }, this.$slots.default,)
-    },
-    created() {
-      this.$memoSort = {};
-    },
-    methods: {
-      isDragging() {
-        const currentIndex = this.sortingElementIndex;
-        return currentIndex !== null && currentIndex !== undefined;
-      },
-      resetSortableIndex(e, index) {
-        this.sortingElementIndex = null;
-        this.newElementIndex = null;
-        this.$memoSort = {};
-      },
-      setCurrentSortableIndex(e, index) {
-        this.sortingElementIndex = index;
-      },
-      dragStartHandler(e, index) {
-        if (!this.isDragging()) {
-          e.preventDefault();
-          return;
-        }
-        const hideDragImage = this.$el.cloneNode(true);
-        hideDragImage.id = "hideDragImage-hide";
-        hideDragImage.style.opacity = 0;
-        e.dataTransfer.setDragImage(hideDragImage, 0, 0);
-      },
-      dragStopHandler(e, index) {
-        const hideDragImage = document.getElementById('hideDragImage-hide');
-        if (hideDragImage) hideDragImage.remove();
-        this.resetSortableIndex(e, index);
-      },
-      dragOverHandler(e, index) {
-        if (!this.isDragging()) {
-          return;
-        }
-        e.preventDefault();
-        const currentIndex = this.sortingElementIndex;
-        if (index === currentIndex) {
-          this.newElementIndex = null;
-          return;
-        }
-        const row = findParentRowElement(e.target);
-        if (!row) {
-          return;
-        }
-        const rect = row.getBoundingClientRect();
-        const offsetTop = e.pageY - rect.top;
-        if (offsetTop < rect.height / 2) {
-          this.newElementIndex = Math.max(index - 1, 0);
-        } else {
-          this.newElementIndex = index;
-        }
-      },
-      dropHandler(e) {
-        if (this.isDragging()) {
-          this.$emit('onsort', this.sortingElementIndex, this.newElementIndex);
-        }
-      },
-      customRowRender(record, index) {
-        const parentMethodResult = this.customRow?.(record, index) || {};
-        const newIndex = this.newElementIndex;
-        const currentIndex = this.sortingElementIndex;
-        return {
-          ...parentMethodResult,
-          attrs: {
-            ...(parentMethodResult?.attrs || {}),
-            draggable: true,
-          },
-          on: {
-            ...(parentMethodResult?.on || {}),
-            dragstart: (e) => this.dragStartHandler(e, index),
-            dragend: (e) => this.dragStopHandler(e, index),
-            dragover: (e) => this.dragOverHandler(e, index),
-          },
-          class: {
-            ...(parentMethodResult?.class || {}),
-            [DRAGGABLE_ROW_CLASS]: true,
-            ['dragging']: this.isDragging() ? (newIndex === null ? index === currentIndex : index === newIndex) : false,
-          },
-        };
-      }
-    },
-    computed: {
-      records() {
-        const newIndex = this.newElementIndex;
-        const currentIndex = this.sortingElementIndex;
-        if (!this.isDragging() || newIndex === null || currentIndex === newIndex) {
-          return this.dataSource;
-        }
-        if (this.$memoSort.newIndex === newIndex) {
-          return this.$memoSort.list;
-        }
-        let list = [...this.dataSource];
-        list.splice(newIndex, 0, list.splice(currentIndex, 1)[0]);
-        this.$memoSort = {
-          newIndex,
-          list,
-        };
-        return list;
-      }
-    }
-  });
-  Vue.component('a-table-sort-trigger', {
-    template: `{{template "component/sortableTableTrigger"}}`,
-    props: {
-      'item-index': {
-        type: undefined,
-        required: false
-      }
-    },
-    inject: ['sortable'],
-    methods: {
-      mouseDownHandler(e) {
-        if (this.sortable) {
-          this.sortable.setSortableIndex(e, this.itemIndex);
-        }
-      },
-      mouseUpHandler(e) {
-        if (this.sortable) {
-          this.sortable.resetSortableIndex(e, this.itemIndex);
-        }
-      },
-      clickHandler(e) {
-        e.preventDefault();
-      },
-    }
-  })
-</script>
-<style>
-  @media only screen and (max-width: 767px) {
-    .sortable-icon {
-      display: none;
-    }
-  }
-
-  .ant-table-is-sorting .draggable-row td {
-    background-color: #ffffff !important;
-  }
-
-  .dark .ant-table-is-sorting .draggable-row td {
-    background-color: var(--dark-color-surface-100) !important;
-  }
-
-  .ant-table-is-sorting .dragging td {
-    background-color: rgb(232 244 242) !important;
-    color: rgba(0, 0, 0, 0.3);
-  }
-
-  .dark .ant-table-is-sorting .dragging td {
-    background-color: var(--dark-color-table-hover) !important;
-    color: rgba(255, 255, 255, 0.3);
-  }
-
-  .ant-table-is-sorting .dragging {
-    opacity: 1;
-    box-shadow: 1px -2px 2px #008771;
-    transition: all 0.2s;
-  }
-
-  .ant-table-is-sorting .dragging .ant-table-row-index {
-    opacity: 0.3;
-  }
-</style>
-{{end}}
\ No newline at end of file
diff --git a/web/html/xui/component/themeSwitch.html b/web/html/xui/component/themeSwitch.html
deleted file mode 100644
index 28cb79b1..00000000
--- a/web/html/xui/component/themeSwitch.html
+++ /dev/null
@@ -1,118 +0,0 @@
-{{define "component/themeSwitchTemplate"}}
-<template>
-  <a-menu :theme="themeSwitcher.currentTheme" mode="inline" selected-keys="">
-    <a-sub-menu>
-      <span slot="title">
-        <a-icon type="bulb" :theme="themeSwitcher.isDarkTheme ? 'filled' : 'outlined'"></a-icon>
-        <span>Theme</span>
-      </span>
-      <a-menu-item id="change-theme" class="ant-menu-theme-switch" @mousedown="themeSwitcher.animationsOff()"> Dark
-        <a-switch style="margin-left: 2px;" size="small" :default-checked="themeSwitcher.isDarkTheme"
-          @change="themeSwitcher.toggleTheme()"></a-switch>
-      </a-menu-item>
-      <a-menu-item id="change-theme-ultra" v-if="themeSwitcher.isDarkTheme" class="ant-menu-theme-switch"
-        @mousedown="themeSwitcher.animationsOffUltra()"> Ultra <a-checkbox style="margin-left: 2px;"
-          :checked="themeSwitcher.isUltra" @click="themeSwitcher.toggleUltra()"></a-checkbox>
-      </a-menu-item>
-    </a-sub-menu>
-  </a-menu>
-</template>
-{{end}}
-
-{{define "component/themeSwitchTemplateLogin"}}
-<template>
-  <a-menu @mousedown="themeSwitcher.animationsOff()" id="change-theme" :theme="themeSwitcher.currentTheme" mode="inline"
-    selected-keys="">
-    <a-menu-item mode="inline" class="ant-menu-theme-switch">
-      <a-icon type="bulb" :theme="themeSwitcher.isDarkTheme ? 'filled' : 'outlined'"></a-icon>
-      <a-switch size="small" :default-checked="themeSwitcher.isDarkTheme"
-        @change="themeSwitcher.toggleTheme()"></a-switch>
-      <template v-if="themeSwitcher.isDarkTheme">
-        <a-checkbox style="margin-left: 1rem; vertical-align: middle;" :checked="themeSwitcher.isUltra"
-          @click="themeSwitcher.toggleUltra()">Ultra</a-checkbox>
-      </template>
-    </a-menu-item>
-  </a-menu>
-</template>
-{{end}}
-
-{{define "component/themeSwitcher"}}
-<script>
-  function createThemeSwitcher() {
-    const isDarkTheme = localStorage.getItem('dark-mode') === 'true';
-    const isUltra = localStorage.getItem('isUltraDarkThemeEnabled') === 'true';
-    if (isUltra) {
-      document.documentElement.setAttribute('data-theme', 'ultra-dark');
-    }
-    const theme = isDarkTheme ? 'dark' : 'light';
-    document.querySelector('body').setAttribute('class', theme);
-    return {
-      animationsOff() {
-        document.documentElement.setAttribute('data-theme-animations', 'off');
-        const themeAnimations = document.querySelector('#change-theme');
-        themeAnimations.addEventListener('mouseleave', () => {
-          document.documentElement.removeAttribute('data-theme-animations');
-        });
-        themeAnimations.addEventListener('touchend', () => {
-          document.documentElement.removeAttribute('data-theme-animations');
-        });
-      },
-      animationsOffUltra() {
-        document.documentElement.setAttribute('data-theme-animations', 'off');
-        const themeAnimationsUltra = document.querySelector('#change-theme-ultra');
-        themeAnimationsUltra.addEventListener('mouseleave', () => {
-          document.documentElement.removeAttribute('data-theme-animations');
-        });
-        themeAnimationsUltra.addEventListener('touchend', () => {
-          document.documentElement.removeAttribute('data-theme-animations');
-        });
-      },
-      isDarkTheme,
-      isUltra,
-      get currentTheme() {
-        return this.isDarkTheme ? 'dark' : 'light';
-      },
-      toggleTheme() {
-        this.isDarkTheme = !this.isDarkTheme;
-        localStorage.setItem('dark-mode', this.isDarkTheme);
-        document.querySelector('body').setAttribute('class', this.isDarkTheme ? 'dark' : 'light');
-        document.getElementById('message').className = themeSwitcher.currentTheme;
-      },
-      toggleUltra() {
-        this.isUltra = !this.isUltra;
-        if (this.isUltra) {
-          document.documentElement.setAttribute('data-theme', 'ultra-dark');
-        } else {
-          document.documentElement.removeAttribute('data-theme');
-        }
-        localStorage.setItem('isUltraDarkThemeEnabled', this.isUltra.toString());
-      }
-    };
-  }
-  const themeSwitcher = createThemeSwitcher();
-  Vue.component('a-theme-switch', {
-    template: `{{template "component/themeSwitchTemplate"}}`,
-    data: () => ({
-      themeSwitcher
-    }),
-    mounted() {
-      this.$message.config({
-        getContainer: () => document.getElementById('message')
-      });
-      document.getElementById('message').className = themeSwitcher.currentTheme;
-    }
-  });
-  Vue.component('a-theme-switch-login', {
-    template: `{{template "component/themeSwitchTemplateLogin"}}`,
-    data: () => ({
-      themeSwitcher
-    }),
-    mounted() {
-      this.$message.config({
-        getContainer: () => document.getElementById('message')
-      });
-      document.getElementById('message').className = themeSwitcher.currentTheme;
-    }
-  });
-</script>
-{{end}}
\ No newline at end of file
-- 
cgit v1.2.3