From 7c050d1adcda520e4c26d631bea08491ad74f596 Mon Sep 17 00:00:00 2001
From: Copilot <198982749+Copilot@users.noreply.github.com>
Date: Tue, 4 Nov 2025 23:59:45 +0800
Subject: [PATCH] feat: add customizable sidebar module ordering (#3307)

* Initial plan

* Add sidebar customization feature with drag-and-drop support

Co-authored-by: Soulter <37870767+Soulter@users.noreply.github.com>

* Add dist/ to .gitignore to exclude build artifacts

Co-authored-by: Soulter <37870767+Soulter@users.noreply.github.com>

* Fix memory leak and improve code quality per code review

Co-authored-by: Soulter <37870767+Soulter@users.noreply.github.com>

* Fix i18n key format: use dot notation instead of colon notation

Co-authored-by: Soulter <37870767+Soulter@users.noreply.github.com>

* Fix drag-and-drop to empty list issue

Co-authored-by: Soulter <37870767+Soulter@users.noreply.github.com>

---------

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: Soulter <37870767+Soulter@users.noreply.github.com>
---
 dashboard/.gitignore                          |   3 +-
 .../components/shared/SidebarCustomizer.vue   | 290 ++++++++++++++++++
 .../src/i18n/locales/en-US/core/actions.json  |   3 +-
 .../i18n/locales/en-US/features/settings.json |  10 +
 .../src/i18n/locales/zh-CN/core/actions.json  |   3 +-
 .../i18n/locales/zh-CN/features/settings.json |  10 +
 .../full/vertical-sidebar/VerticalSidebar.vue |  26 +-
 dashboard/src/utils/sidebarCustomization.js   |  99 ++++++
 dashboard/src/views/Settings.vue              |   7 +
 9 files changed, 447 insertions(+), 4 deletions(-)
 create mode 100644 dashboard/src/components/shared/SidebarCustomizer.vue
 create mode 100644 dashboard/src/utils/sidebarCustomization.js

diff --git a/dashboard/.gitignore b/dashboard/.gitignore
index 12ac64720..6e03962af 100644
--- a/dashboard/.gitignore
+++ b/dashboard/.gitignore
@@ -1,2 +1,3 @@
 node_modules/
-.DS_Store
\ No newline at end of file
+.DS_Store
+dist/
\ No newline at end of file
diff --git a/dashboard/src/components/shared/SidebarCustomizer.vue b/dashboard/src/components/shared/SidebarCustomizer.vue
new file mode 100644
index 000000000..625320d0d
--- /dev/null
+++ b/dashboard/src/components/shared/SidebarCustomizer.vue
@@ -0,0 +1,290 @@
+<template>
+  <div style="margin-top: 16px;">
+    <v-btn 
+      color="primary" 
+      variant="outlined"
+      size="small"
+      @click="openDialog"
+      style="margin-bottom: 8px;"
+    >
+      {{ t('features.settings.sidebar.customize.title') }}
+    </v-btn>
+
+    <v-dialog v-model="dialog" max-width="700px">
+      <v-card>
+        <v-card-title class="d-flex justify-space-between align-center">
+          <span>{{ t('features.settings.sidebar.customize.title') }}</span>
+          <v-btn
+            icon="mdi-close"
+            variant="text"
+            @click="dialog = false"
+          ></v-btn>
+        </v-card-title>
+        
+        <v-card-text>
+          <p class="text-body-2 mb-4">{{ t('features.settings.sidebar.customize.subtitle') }}</p>
+          
+          <v-row>
+            <v-col cols="12" md="6">
+              <div class="mb-2 font-weight-medium">{{ t('features.settings.sidebar.customize.mainItems') }}</div>
+              <v-list 
+                density="compact"
+                class="custom-list"
+                @dragover.prevent
+                @drop="handleDropToList($event, 'main')"
+              >
+                <v-list-item
+                  v-for="(item, index) in mainItems"
+                  :key="item.title"
+                  class="mb-1 draggable-item"
+                  draggable="true"
+                  @dragstart="handleDragStart($event, 'main', index)"
+                  @dragover.prevent
+                  @drop.stop="handleDrop($event, 'main', index)"
+                >
+                  <template v-slot:prepend>
+                    <v-icon :icon="item.icon" size="small" class="mr-2"></v-icon>
+                  </template>
+                  <v-list-item-title>{{ t(item.title) }}</v-list-item-title>
+                  <template v-slot:append>
+                    <v-btn
+                      icon="mdi-arrow-right"
+                      variant="text"
+                      size="x-small"
+                      @click="moveToMore(index)"
+                    ></v-btn>
+                  </template>
+                </v-list-item>
+              </v-list>
+            </v-col>
+            
+            <v-col cols="12" md="6">
+              <div class="mb-2 font-weight-medium">{{ t('features.settings.sidebar.customize.moreItems') }}</div>
+              <v-list 
+                density="compact"
+                class="custom-list"
+                @dragover.prevent
+                @drop="handleDropToList($event, 'more')"
+              >
+                <v-list-item
+                  v-for="(item, index) in moreItems"
+                  :key="item.title"
+                  class="mb-1 draggable-item"
+                  draggable="true"
+                  @dragstart="handleDragStart($event, 'more', index)"
+                  @dragover.prevent
+                  @drop.stop="handleDrop($event, 'more', index)"
+                >
+                  <template v-slot:prepend>
+                    <v-icon :icon="item.icon" size="small" class="mr-2"></v-icon>
+                  </template>
+                  <v-list-item-title>{{ t(item.title) }}</v-list-item-title>
+                  <template v-slot:append>
+                    <v-btn
+                      icon="mdi-arrow-left"
+                      variant="text"
+                      size="x-small"
+                      @click="moveToMain(index)"
+                    ></v-btn>
+                  </template>
+                </v-list-item>
+              </v-list>
+            </v-col>
+          </v-row>
+        </v-card-text>
+        
+        <v-card-actions>
+          <v-btn
+            color="error"
+            variant="text"
+            @click="resetToDefault"
+          >
+            {{ t('features.settings.sidebar.customize.reset') }}
+          </v-btn>
+          <v-spacer></v-spacer>
+          <v-btn
+            color="primary"
+            @click="saveCustomization"
+          >
+            {{ t('core.actions.save') }}
+          </v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+import { useI18n } from '@/i18n/composables';
+import sidebarItems from '@/layouts/full/vertical-sidebar/sidebarItem';
+import { 
+  getSidebarCustomization, 
+  setSidebarCustomization, 
+  clearSidebarCustomization 
+} from '@/utils/sidebarCustomization';
+
+const { t } = useI18n();
+
+const dialog = ref(false);
+const mainItems = ref([]);
+const moreItems = ref([]);
+const draggedItem = ref(null);
+
+function initializeItems() {
+  const customization = getSidebarCustomization();
+  
+  if (customization) {
+    // Load from customization
+    const allItemsMap = new Map();
+    
+    sidebarItems.forEach(item => {
+      if (item.children) {
+        item.children.forEach(child => {
+          allItemsMap.set(child.title, child);
+        });
+      } else {
+        allItemsMap.set(item.title, item);
+      }
+    });
+    
+    mainItems.value = customization.mainItems
+      .map(title => allItemsMap.get(title))
+      .filter(item => item);
+    
+    moreItems.value = customization.moreItems
+      .map(title => allItemsMap.get(title))
+      .filter(item => item);
+  } else {
+    // Load default structure
+    mainItems.value = sidebarItems.filter(item => !item.children);
+    
+    const moreGroup = sidebarItems.find(item => item.title === 'core.navigation.groups.more');
+    moreItems.value = moreGroup ? [...moreGroup.children] : [];
+  }
+}
+
+function openDialog() {
+  initializeItems();
+  dialog.value = true;
+}
+
+function handleDragStart(event, listType, index) {
+  draggedItem.value = {
+    type: listType,
+    index: index,
+    item: listType === 'main' ? mainItems.value[index] : moreItems.value[index]
+  };
+  event.dataTransfer.effectAllowed = 'move';
+}
+
+function handleDrop(event, targetListType, targetIndex) {
+  event.preventDefault();
+  
+  if (!draggedItem.value) return;
+  
+  const sourceListType = draggedItem.value.type;
+  const sourceIndex = draggedItem.value.index;
+  const item = draggedItem.value.item;
+  
+  // Remove from source
+  if (sourceListType === 'main') {
+    mainItems.value.splice(sourceIndex, 1);
+  } else {
+    moreItems.value.splice(sourceIndex, 1);
+  }
+  
+  // Add to target
+  if (targetListType === 'main') {
+    mainItems.value.splice(targetIndex, 0, item);
+  } else {
+    moreItems.value.splice(targetIndex, 0, item);
+  }
+  
+  draggedItem.value = null;
+}
+
+function handleDropToList(event, targetListType) {
+  event.preventDefault();
+  
+  if (!draggedItem.value) return;
+  
+  const sourceListType = draggedItem.value.type;
+  const sourceIndex = draggedItem.value.index;
+  const item = draggedItem.value.item;
+  
+  // Remove from source
+  if (sourceListType === 'main') {
+    mainItems.value.splice(sourceIndex, 1);
+  } else {
+    moreItems.value.splice(sourceIndex, 1);
+  }
+  
+  // Add to target list at the end
+  if (targetListType === 'main') {
+    mainItems.value.push(item);
+  } else {
+    moreItems.value.push(item);
+  }
+  
+  draggedItem.value = null;
+}
+
+function moveToMore(index) {
+  const item = mainItems.value.splice(index, 1)[0];
+  moreItems.value.push(item);
+}
+
+function moveToMain(index) {
+  const item = moreItems.value.splice(index, 1)[0];
+  mainItems.value.push(item);
+}
+
+function saveCustomization() {
+  const config = {
+    mainItems: mainItems.value.map(item => item.title),
+    moreItems: moreItems.value.map(item => item.title)
+  };
+  
+  setSidebarCustomization(config);
+  
+  // Notify the sidebar to reload
+  window.dispatchEvent(new CustomEvent('sidebar-customization-changed'));
+  
+  dialog.value = false;
+}
+
+function resetToDefault() {
+  clearSidebarCustomization();
+  initializeItems();
+  
+  // Notify the sidebar to reload
+  window.dispatchEvent(new CustomEvent('sidebar-customization-changed'));
+}
+
+onMounted(() => {
+  initializeItems();
+});
+</script>
+
+<style scoped>
+.draggable-item {
+  cursor: move;
+  border: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
+  border-radius: 4px;
+  background-color: rgba(var(--v-theme-surface));
+  transition: all 0.2s;
+}
+
+.draggable-item:hover {
+  background-color: rgba(var(--v-theme-primary), 0.1);
+  border-color: rgba(var(--v-theme-primary), 0.3);
+}
+
+.custom-list {
+  min-height: 200px;
+  border: 1px dashed rgba(var(--v-border-color), var(--v-border-opacity));
+  border-radius: 4px;
+  padding: 8px;
+}
+</style>
diff --git a/dashboard/src/i18n/locales/en-US/core/actions.json b/dashboard/src/i18n/locales/en-US/core/actions.json
index 5f4ef91bb..a1ba76e08 100644
--- a/dashboard/src/i18n/locales/en-US/core/actions.json
+++ b/dashboard/src/i18n/locales/en-US/core/actions.json
@@ -18,5 +18,6 @@
   "refresh": "Refresh",
   "submit": "Submit",
   "reset": "Reset",
-  "clear": "Clear"
+  "clear": "Clear",
+  "save": "Save"
 } 
\ No newline at end of file
diff --git a/dashboard/src/i18n/locales/en-US/features/settings.json b/dashboard/src/i18n/locales/en-US/features/settings.json
index e8ae3cbf2..0a494ca3e 100644
--- a/dashboard/src/i18n/locales/en-US/features/settings.json
+++ b/dashboard/src/i18n/locales/en-US/features/settings.json
@@ -19,5 +19,15 @@
       "subtitle": "If you encounter data compatibility issues, you can manually start the database migration assistant",
       "button": "Start Migration Assistant"
     }
+  },
+  "sidebar": {
+    "title": "Sidebar",
+    "customize": {
+      "title": "Customize Sidebar",
+      "subtitle": "Drag to reorder modules, or move modules in/out of the \"More Features\" group. Settings are saved locally in your browser.",
+      "reset": "Reset to Default",
+      "mainItems": "Main Modules",
+      "moreItems": "More Features"
+    }
   }
 } 
\ No newline at end of file
diff --git a/dashboard/src/i18n/locales/zh-CN/core/actions.json b/dashboard/src/i18n/locales/zh-CN/core/actions.json
index 7829eb276..69b29598b 100644
--- a/dashboard/src/i18n/locales/zh-CN/core/actions.json
+++ b/dashboard/src/i18n/locales/zh-CN/core/actions.json
@@ -18,5 +18,6 @@
   "refresh": "刷新",
   "submit": "提交",
   "reset": "重置",
-  "clear": "清空"
+  "clear": "清空",
+  "save": "保存"
 } 
\ No newline at end of file
diff --git a/dashboard/src/i18n/locales/zh-CN/features/settings.json b/dashboard/src/i18n/locales/zh-CN/features/settings.json
index f8ea8520b..bb6700f60 100644
--- a/dashboard/src/i18n/locales/zh-CN/features/settings.json
+++ b/dashboard/src/i18n/locales/zh-CN/features/settings.json
@@ -19,5 +19,15 @@
       "subtitle": "如果您遇到数据兼容性问题，可以手动启动数据库迁移助手",
       "button": "启动迁移助手"
     }
+  },
+  "sidebar": {
+    "title": "侧边栏",
+    "customize": {
+      "title": "自定义侧边栏",
+      "subtitle": "拖拽以调整模块顺序，或者将模块移入/移出\"更多功能\"分组。设置仅保存在浏览器本地。",
+      "reset": "恢复默认",
+      "mainItems": "主要模块",
+      "moreItems": "更多功能"
+    }
   }
 } 
\ No newline at end of file
diff --git a/dashboard/src/layouts/full/vertical-sidebar/VerticalSidebar.vue b/dashboard/src/layouts/full/vertical-sidebar/VerticalSidebar.vue
index d21321fc3..f752f6c0f 100644
--- a/dashboard/src/layouts/full/vertical-sidebar/VerticalSidebar.vue
+++ b/dashboard/src/layouts/full/vertical-sidebar/VerticalSidebar.vue
@@ -1,15 +1,39 @@
 <script setup>
-import { ref, shallowRef } from 'vue';
+import { ref, shallowRef, onMounted, onUnmounted } from 'vue';
 import { useCustomizerStore } from '../../../stores/customizer';
 import { useI18n } from '@/i18n/composables';
 import sidebarItems from './sidebarItem';
 import NavItem from './NavItem.vue';
+import { applySidebarCustomization } from '@/utils/sidebarCustomization';
 
 const { t } = useI18n();
 
 const customizer = useCustomizerStore();
 const sidebarMenu = shallowRef(sidebarItems);
 
+// Apply customization on mount and listen for storage changes
+const handleStorageChange = (e) => {
+  if (e.key === 'astrbot_sidebar_customization') {
+    sidebarMenu.value = applySidebarCustomization(sidebarItems);
+  }
+};
+
+const handleCustomEvent = () => {
+  sidebarMenu.value = applySidebarCustomization(sidebarItems);
+};
+
+onMounted(() => {
+  sidebarMenu.value = applySidebarCustomization(sidebarItems);
+  
+  window.addEventListener('storage', handleStorageChange);
+  window.addEventListener('sidebar-customization-changed', handleCustomEvent);
+});
+
+onUnmounted(() => {
+  window.removeEventListener('storage', handleStorageChange);
+  window.removeEventListener('sidebar-customization-changed', handleCustomEvent);
+});
+
 const showIframe = ref(false);
 const starCount = ref(null);
 
diff --git a/dashboard/src/utils/sidebarCustomization.js b/dashboard/src/utils/sidebarCustomization.js
new file mode 100644
index 000000000..75cc5896f
--- /dev/null
+++ b/dashboard/src/utils/sidebarCustomization.js
@@ -0,0 +1,99 @@
+// Utility for managing sidebar customization in localStorage
+const STORAGE_KEY = 'astrbot_sidebar_customization';
+
+/**
+ * Get the customized sidebar configuration from localStorage
+ * @returns {Object|null} The customization config or null if not set
+ */
+export function getSidebarCustomization() {
+  try {
+    const stored = localStorage.getItem(STORAGE_KEY);
+    return stored ? JSON.parse(stored) : null;
+  } catch (error) {
+    console.error('Error reading sidebar customization:', error);
+    return null;
+  }
+}
+
+/**
+ * Save the sidebar customization to localStorage
+ * @param {Object} config - The customization configuration
+ * @param {Array} config.mainItems - Array of item titles for main sidebar
+ * @param {Array} config.moreItems - Array of item titles for "More Features" group
+ */
+export function setSidebarCustomization(config) {
+  try {
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(config));
+  } catch (error) {
+    console.error('Error saving sidebar customization:', error);
+  }
+}
+
+/**
+ * Clear the sidebar customization (reset to default)
+ */
+export function clearSidebarCustomization() {
+  try {
+    localStorage.removeItem(STORAGE_KEY);
+  } catch (error) {
+    console.error('Error clearing sidebar customization:', error);
+  }
+}
+
+/**
+ * Apply customization to sidebar items
+ * @param {Array} defaultItems - Default sidebar items array
+ * @returns {Array} Customized sidebar items array (new array, doesn't mutate input)
+ */
+export function applySidebarCustomization(defaultItems) {
+  const customization = getSidebarCustomization();
+  if (!customization) {
+    return defaultItems;
+  }
+
+  const { mainItems, moreItems } = customization;
+  
+  // Create a map of all items by title for quick lookup
+  // Deep clone items to avoid mutating originals
+  const allItemsMap = new Map();
+  defaultItems.forEach(item => {
+    if (item.children) {
+      // If it's the "More" group, add children to map
+      item.children.forEach(child => {
+        allItemsMap.set(child.title, { ...child });
+      });
+    } else {
+      allItemsMap.set(item.title, { ...item });
+    }
+  });
+
+  const customizedItems = [];
+  
+  // Add main items in custom order
+  mainItems.forEach(title => {
+    const item = allItemsMap.get(title);
+    if (item) {
+      customizedItems.push(item);
+    }
+  });
+
+  // If there are items in moreItems, create the "More Features" group
+  if (moreItems && moreItems.length > 0) {
+    const moreGroup = {
+      title: 'core.navigation.groups.more',
+      icon: 'mdi-dots-horizontal',
+      children: []
+    };
+    
+    moreItems.forEach(title => {
+      const item = allItemsMap.get(title);
+      if (item) {
+        moreGroup.children.push(item);
+      }
+    });
+    
+    customizedItems.push(moreGroup);
+  }
+
+  return customizedItems;
+}
diff --git a/dashboard/src/views/Settings.vue b/dashboard/src/views/Settings.vue
index 6cbdf93a4..338d0394d 100644
--- a/dashboard/src/views/Settings.vue
+++ b/dashboard/src/views/Settings.vue
@@ -9,6 +9,12 @@
                 <ProxySelector></ProxySelector>
             </v-list-item>
 
+            <v-list-subheader>{{ tm('sidebar.title') }}</v-list-subheader>
+
+            <v-list-item :subtitle="tm('sidebar.customize.subtitle')" :title="tm('sidebar.customize.title')">
+                <SidebarCustomizer></SidebarCustomizer>
+            </v-list-item>
+
             <v-list-subheader>{{ tm('system.title') }}</v-list-subheader>
 
             <v-list-item :subtitle="tm('system.restart.subtitle')" :title="tm('system.restart.title')">
@@ -33,6 +39,7 @@ import axios from 'axios';
 import WaitingForRestart from '@/components/shared/WaitingForRestart.vue';
 import ProxySelector from '@/components/shared/ProxySelector.vue';
 import MigrationDialog from '@/components/shared/MigrationDialog.vue';
+import SidebarCustomizer from '@/components/shared/SidebarCustomizer.vue';
 import { useModuleI18n } from '@/i18n/composables';
 
 const { tm } = useModuleI18n('features/settings');