From d4af5fc8f61e44bd3fa5b03859039a89ebed8136 Mon Sep 17 00:00:00 2001
From: Kuingsmile <96409857+Kuingsmile@users.noreply.github.com>
Date: Thu, 14 Aug 2025 16:19:24 +0800
Subject: [PATCH] :sparkles: Feature(custom): support collapse navi bar

---
 src/renderer/components/NavigationPage.vue   |  129 +-
 src/renderer/components/ui/ThemeSwitcher.vue |   25 +-
 src/renderer/i18n/locales/en.json            |    4 +-
 src/renderer/i18n/locales/zh-CN.json         |    4 +-
 src/renderer/i18n/locales/zh-TW.json         |    4 +-
 src/renderer/manage/pages/ManageMain.vue     |  109 +-
 src/renderer/manage/pages/css/ManageMain.css | 1327 +++++++++---------
 7 files changed, 925 insertions(+), 677 deletions(-)

diff --git a/src/renderer/components/NavigationPage.vue b/src/renderer/components/NavigationPage.vue
index bd997a02..8306b277 100644
--- a/src/renderer/components/NavigationPage.vue
+++ b/src/renderer/components/NavigationPage.vue
@@ -1,7 +1,13 @@
 <template>
-  <nav class="navigation">
+  <nav
+    class="navigation"
+    :class="{ collapsed: isCollapsed }"
+  >
     <div class="title-bar">
-      <div class="app-title">
+      <div
+        v-if="!isCollapsed"
+        class="app-title"
+      >
         <div
           class="app-text"
           @click="openGithubPage"
@@ -12,10 +18,24 @@
           v{{ version }}
         </div>
       </div>
+      <button
+        :title="isCollapsed ? t('navigation.expand') : t('navigation.collapse')"
+        class="collapse-button"
+        @click="isCollapsed = !isCollapsed"
+      >
+        <ChevronLeftIcon
+          v-if="!isCollapsed"
+          :size="20"
+        />
+        <ChevronRightIcon
+          v-else
+          :size="20"
+        />
+      </button>
     </div>
 
     <div class="theme-section">
-      <ThemeSwitcher />
+      <ThemeSwitcher :collapsed="isCollapsed" />
     </div>
 
     <div class="nav-menu">
@@ -32,9 +52,13 @@
             :size="18"
           />
         </div>
-        <span class="nav-label">{{ item.name }}</span>
+        <span
+          v-if="!isCollapsed"
+          class="nav-label"
+        >{{ item.name }}</span>
       </router-link>
       <Disclosure
+        v-if="!isCollapsed"
         v-slot="{ open }"
         as="div"
         class="nav-submenu"
@@ -61,6 +85,15 @@
           </router-link>
         </DisclosurePanel>
       </Disclosure>
+      <div
+        v-else
+        class="nav-item collapsed-picbed"
+        :title="t('navigation.picbed')"
+      >
+        <div class="nav-icon-container">
+          <DatabaseIcon :size="18" />
+        </div>
+      </div>
     </div>
     <div class="sidebar-footer">
       <button
@@ -205,7 +238,7 @@ import {
   TransitionRoot
 } from '@headlessui/vue'
 import { pick } from 'lodash-es'
-import { CheckIcon, ChevronDownIcon, CopyIcon, DatabaseIcon, FolderIcon, Info, PieChartIcon, PlugIcon, Settings, UploadIcon } from 'lucide-vue-next'
+import { CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, CopyIcon, DatabaseIcon, FolderIcon, Info, PieChartIcon, PlugIcon, Settings, UploadIcon } from 'lucide-vue-next'
 import QrcodeVue from 'qrcode.vue'
 import pkg from 'root/package.json'
 import { computed, nextTick, onBeforeMount, onBeforeUnmount, reactive, Ref, ref, watch } from 'vue'
@@ -220,6 +253,7 @@ import { picBedGlobal, updatePicBedGlobal } from '@/utils/global'
 
 import ThemeSwitcher from './ui/ThemeSwitcher.vue'
 const version = ref(pkg.version)
+const isCollapsed = ref(false)
 
 const { t } = useI18n()
 const message = useMessage()
@@ -230,6 +264,11 @@ const picBedConfigString = ref('')
 
 let removeIpcListener: () => void = () => {}
 
+// Save collapsed state to localStorage when it changes
+watch(isCollapsed, (newValue) => {
+  localStorage.setItem('navigation-collapsed', JSON.stringify(newValue))
+})
+
 watch(
   () => choosedPicBedForQRCode,
   val => {
@@ -278,6 +317,12 @@ function openGithubPage () {
 }
 
 onBeforeMount(() => {
+  // Load collapsed state from localStorage
+  const savedState = localStorage.getItem('navigation-collapsed')
+  if (savedState !== null) {
+    isCollapsed.value = JSON.parse(savedState)
+  }
+
   updatePicBedGlobal()
   removeIpcListener = window.electron.ipcRendererOn(SHOW_MAIN_PAGE_QRCODE, qrCodeHandler)
 })
@@ -297,6 +342,11 @@ onBeforeUnmount(() => {
   background: var(--color-background-secondary);
   border-right: 1px solid rgb(229 231 235);
   overflow: hidden;
+  transition: width 0.3s ease;
+}
+
+.navigation.collapsed {
+  width: 60px;
 }
 
 :root.dark .navigation,
@@ -312,6 +362,38 @@ onBeforeUnmount(() => {
   padding: 1.25rem 1rem;
   border-bottom: 1px solid var(--color-border);
   background: var(--color-background-secondary);
+  position: relative;
+}
+
+.navigation.collapsed .title-bar {
+  padding: 1rem 0.5rem;
+}
+
+.collapse-button {
+  position: absolute;
+  right: 8px;
+  top: 50%;
+  transform: translateY(-50%);
+  background: transparent;
+  border: none;
+  color: var(--color-text-primary);
+  cursor: pointer;
+  padding: 4px;
+  border-radius: 4px;
+  transition: all 0.2s ease;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.collapse-button:hover {
+  background: var(--color-surface-elevated);
+  color: var(--color-text-primary);
+}
+
+.navigation.collapsed .collapse-button {
+  position: static;
+  transform: none;
 }
 
 :root.dark .title-bar,
@@ -382,6 +464,16 @@ onBeforeUnmount(() => {
   transition: all 0.2s ease;
 }
 
+.navigation.collapsed .nav-item {
+  padding: 0.75rem 0.5rem;
+  justify-content: center;
+  gap: 0;
+}
+
+.navigation.collapsed .nav-label {
+  display: none;
+}
+
 :root.dark .nav-item,
 :root.auto.dark .nav-item {
   color: rgb(209 213 219);
@@ -526,15 +618,19 @@ onBeforeUnmount(() => {
   color: var(--color-text-primary);
 }
 
-.submenu-item.router-link-active {
-  background: rgb(239 246 255);
-  color: rgb(99 102 241);
+.collapsed-picbed {
+  cursor: default;
 }
 
-:root.dark .submenu-item.router-link-active,
-:root.auto.dark .submenu-item.router-link-active {
-  background: rgb(30 58 138 / 0.2);
-  color: rgb(129 140 248);
+.collapsed-picbed:hover {
+  background: rgb(243 244 246);
+  color: rgb(17 24 39);
+}
+
+:root.dark .collapsed-picbed:hover,
+:root.auto.dark .collapsed-picbed:hover {
+  background: rgb(55 65 81);
+  color: rgb(243 244 246);
 }
 
 .qr-dialog {
@@ -718,7 +814,7 @@ onBeforeUnmount(() => {
 }
 /* Responsive Design */
 @media (max-width: 768px) {
-  .sidebar {
+  .navigation {
     width: 60px;
   }
 
@@ -726,6 +822,13 @@ onBeforeUnmount(() => {
     display: none;
   }
 
+  .app-title {
+    display: none;
+  }
+
+  .collapse-button {
+    display: none;
+  }
 }
 
 /* Scrollbar Styling */
diff --git a/src/renderer/components/ui/ThemeSwitcher.vue b/src/renderer/components/ui/ThemeSwitcher.vue
index 8895eb3c..292721c8 100644
--- a/src/renderer/components/ui/ThemeSwitcher.vue
+++ b/src/renderer/components/ui/ThemeSwitcher.vue
@@ -5,6 +5,12 @@ import { useI18n } from 'vue-i18n'
 
 import { useAppStore } from '@/hooks/useAppStore'
 
+interface Props {
+  collapsed?: boolean
+}
+
+defineProps<Props>()
+
 const { t } = useI18n()
 const appStore = useAppStore()
 
@@ -44,6 +50,7 @@ const toggleTheme = () => {
   <div class="theme-switcher">
     <button
       class="theme-toggle-btn"
+      :class="{ collapsed }"
       :title="t('settings.theme.toggle')"
       @click="toggleTheme"
     >
@@ -51,7 +58,10 @@ const toggleTheme = () => {
         :is="currentThemeOption.icon"
         :size="18"
       />
-      <span class="theme-label">{{ currentThemeOption.label }}</span>
+      <span
+        v-if="!collapsed"
+        class="theme-label"
+      >{{ currentThemeOption.label }}</span>
     </button>
   </div>
 </template>
@@ -74,6 +84,13 @@ const toggleTheme = () => {
   border-radius: var(--radius-md);
   cursor: pointer;
   font-size: 0.875rem;
+  transition: all 0.2s ease;
+}
+
+.theme-toggle-btn.collapsed {
+  padding: 0.5rem;
+  gap: 0;
+  justify-content: center;
 }
 
 .theme-toggle-btn:hover {
@@ -90,5 +107,11 @@ const toggleTheme = () => {
   .theme-label {
     display: none;
   }
+
+  .theme-toggle-btn {
+    padding: 0.5rem;
+    gap: 0;
+    justify-content: center;
+  }
 }
 </style>
diff --git a/src/renderer/i18n/locales/en.json b/src/renderer/i18n/locales/en.json
index b006ec7b..b4f1f809 100644
--- a/src/renderer/i18n/locales/en.json
+++ b/src/renderer/i18n/locales/en.json
@@ -23,7 +23,9 @@
     "picBedQrCode": "PicBed QR Code",
     "choosePicBed": "Choose PicBed",
     "selectPicBeds": "Select PicBeds",
-    "copySuccess": "Copy Success"
+    "copySuccess": "Copy Success",
+    "collapse": "Collapse Sidebar",
+    "expand": "Expand Sidebar"
   },
   "settings": {
     "theme": {
diff --git a/src/renderer/i18n/locales/zh-CN.json b/src/renderer/i18n/locales/zh-CN.json
index 04d8af43..64f1f94f 100644
--- a/src/renderer/i18n/locales/zh-CN.json
+++ b/src/renderer/i18n/locales/zh-CN.json
@@ -23,7 +23,9 @@
     "picBedQrCode": "图床配置二维码",
     "choosePicBed": "选择图床",
     "selectPicBeds": "请选择图床",
-    "copySuccess": "复制成功"
+    "copySuccess": "复制成功",
+    "collapse": "收起侧边栏",
+    "expand": "展开侧边栏"
   },
   "settings": {
     "theme": {
diff --git a/src/renderer/i18n/locales/zh-TW.json b/src/renderer/i18n/locales/zh-TW.json
index 2dc0dfb3..02062c59 100644
--- a/src/renderer/i18n/locales/zh-TW.json
+++ b/src/renderer/i18n/locales/zh-TW.json
@@ -23,7 +23,9 @@
     "picBedQrCode": "圖床配置 QRCODE",
     "choosePicBed": "選擇圖床",
     "selectPicBeds": "請選擇圖床",
-    "copySuccess": "複製成功"
+    "copySuccess": "複製成功",
+    "collapse": "收起側邊欄",
+    "expand": "展開側邊欄"
   },
   "settings": {
     "theme": {
diff --git a/src/renderer/manage/pages/ManageMain.vue b/src/renderer/manage/pages/ManageMain.vue
index 7ddd803b..001284f7 100644
--- a/src/renderer/manage/pages/ManageMain.vue
+++ b/src/renderer/manage/pages/ManageMain.vue
@@ -42,7 +42,11 @@
     <!-- Main Content Card -->
     <div class="manage-card main-card">
       <div class="main-layout">
-        <div class="sidebar">
+        <div
+          ref="sidebar"
+          class="sidebar"
+          :style="{ width: sidebarWidth + 'px' }"
+        >
           <div class="sidebar-header">
             <h3 class="sidebar-title">
               {{ menuTitleMap[currentPicBedName] }}
@@ -80,16 +84,11 @@
                   v-else-if="currentPicBedName === 'github'"
                   class="menu-icon"
                 />
-                <span class="menu-text">
-                  {{
-                    currentPicBedName === 'tcyun'
-                      ? item.slice(0, item.length - 11)
-                      : currentPicBedName === 'github'
-                        ? item.length > 10
-                          ? `${item.slice(0, 5)}..${item.slice(-5)}`
-                          : item
-                        : item
-                  }}
+                <span
+                  class="menu-text"
+                  :title="item"
+                >
+                  {{ truncateText(item, currentPicBedName) }}
                 </span>
               </div>
             </div>
@@ -122,7 +121,18 @@
           </div>
         </div>
 
-        <div class="content-area">
+        <!-- Resize Handle -->
+        <div
+          class="resize-handle"
+          @mousedown="startResize"
+        >
+          <div class="resize-line" />
+        </div>
+
+        <div
+          ref="contentArea"
+          class="content-area"
+        >
           <router-view />
         </div>
       </div>
@@ -337,7 +347,7 @@ import {
   SettingsIcon,
   XIcon
 } from 'lucide-vue-next'
-import { onBeforeMount, reactive, ref, watch } from 'vue'
+import { computed, onBeforeMount, reactive, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useRoute, useRouter } from 'vue-router'
 
@@ -357,6 +367,10 @@ const message = useMessage()
 const currentAlias = ref(route.query.alias as string)
 const currentPicBedName = ref(route.query.picBedName as string)
 
+const contentArea = ref<HTMLElement>()
+const sidebarWidth = ref(160)
+const isResizing = ref(false)
+
 let allPicBedConfigure = JSON.parse(route.query.allPicBedConfigure as string)
 let currentPagePicBedConfig = reactive(JSON.parse(route.query.config as string))
 
@@ -369,6 +383,46 @@ const isLoadingBucketList = ref(false)
 const nweBucketDrawerVisible = ref(false)
 const picBedSwitchDialogVisible = ref(false)
 
+const maxTextLength = computed(() => {
+  const fixedSpace = 16 + 12 + 24 + 8
+  const availableWidth = sidebarWidth.value - fixedSpace
+  const estimatedCharWidth = 14 * 0.6
+  const maxChars = Math.floor(availableWidth / estimatedCharWidth)
+  return Math.max(6, Math.min(maxChars, 60))
+})
+
+const truncateText = (text: string, picBedName: string): string => {
+  if (!text) return ''
+
+  if (picBedName === 'tcyun') {
+    const baseName = text.slice(0, text.length - 11)
+    if (baseName.length <= maxTextLength.value) {
+      return baseName
+    }
+    return `${baseName.slice(0, maxTextLength.value - 3)}...`
+  } else if (picBedName === 'github') {
+    if (text.length <= maxTextLength.value) {
+      return text
+    }
+    const minSideLength = 3
+    const totalEllipsis = 2 // '..'
+    const availableForContent = maxTextLength.value - totalEllipsis
+
+    if (availableForContent < minSideLength * 2) {
+      return `${text.slice(0, maxTextLength.value - 3)}...`
+    }
+
+    const prefixLength = Math.ceil(availableForContent / 2)
+    const suffixLength = availableForContent - prefixLength
+    return `${text.slice(0, prefixLength)}..${text.slice(-suffixLength)}`
+  } else {
+    if (text.length <= maxTextLength.value) {
+      return text
+    }
+    return `${text.slice(0, maxTextLength.value - 3)}...`
+  }
+}
+
 watch(route, async (newRoute) => {
   if (newRoute.fullPath.split('?')[0] === '/main-page/manage-main-page') {
     currentAlias.value = newRoute.query.alias as string
@@ -379,6 +433,8 @@ watch(route, async (newRoute) => {
   }
 }, { deep: true })
 
+watch(sidebarWidth, () => {}, { immediate: false })
+
 const urlMap: IStringKeyMap = {
   aliyun: 'https://oss.console.aliyun.com',
   github: 'https://github.com',
@@ -563,6 +619,33 @@ function openBucketPageSetting () {
   })
 }
 
+function startResize (event: MouseEvent) {
+  isResizing.value = true
+  const startX = event.clientX
+  const startWidth = sidebarWidth.value
+
+  const handleMouseMove = (e: MouseEvent) => {
+    if (!isResizing.value) return
+
+    const deltaX = e.clientX - startX
+    const newWidth = Math.max(120, Math.min(400, startWidth + deltaX))
+    sidebarWidth.value = newWidth
+  }
+
+  const handleMouseUp = () => {
+    isResizing.value = false
+    document.removeEventListener('mousemove', handleMouseMove)
+    document.removeEventListener('mouseup', handleMouseUp)
+    document.body.style.cursor = ''
+    document.body.style.userSelect = ''
+  }
+
+  document.addEventListener('mousemove', handleMouseMove)
+  document.addEventListener('mouseup', handleMouseUp)
+  document.body.style.cursor = 'col-resize'
+  document.body.style.userSelect = 'none'
+}
+
 onBeforeMount(() => {
   getBucketList()
 })
diff --git a/src/renderer/manage/pages/css/ManageMain.css b/src/renderer/manage/pages/css/ManageMain.css
index e1a303c6..e0751842 100644
--- a/src/renderer/manage/pages/css/ManageMain.css
+++ b/src/renderer/manage/pages/css/ManageMain.css
@@ -1,647 +1,680 @@
-/* ManageMain Page Styles */
-
-.manage-container {
-  height: 97%;
-  display: flex;
-  flex-direction: column;
-  padding: 0.75rem;
-}
-
-.manage-card {
-  background: var(--color-background-secondary);
-  border-radius: var(--radius-lg);
-  border: 1px solid var(--color-border);
-  box-shadow: var(--shadow-sm);
-}
-
-.header-card {
-  padding: 0.5rem;
-}
-
-.card-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  gap: 1rem;
-}
-
-.header-content {
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-}
-
-.header-icon {
-  width: 68px;
-  height: 48px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.header-icon-img {
-  width: 40px;
-  height: 40px;
-  object-fit: contain;
-}
-
-.header-text .header-title {
-  font-size: 1.25rem;
-  font-weight: 600;
-  color: var(--color-text-primary);
-  margin: 0 0 0.01rem 0;
-}
-
-.header-text .header-subtitle {
-  font-size: 0.875rem;
-  color: var(--color-text-secondary);
-  margin: 0;
-}
-
-.header-actions {
-  display: flex;
-  gap: 1rem;
-}
-
-.main-card {
-  flex: 1;
-  overflow: hidden;
-  min-height: 0; /* Fix for flex overflow */
-}
-
-.main-layout {
-  display: flex;
-  height:99%;
-}
-
-.sidebar {
-  width: 160px;
-  background: var(--color-surface-secondary);
-  border-right: 1px solid var(--color-border);
-  display: flex;
-  flex-direction: column;
-  min-height: 0; /* Fix for flex overflow */
-}
-
-.sidebar-header {
-  padding: 1rem;
-  border-bottom: 1px solid var(--color-border);
-  flex-shrink: 0;
-}
-
-.sidebar-title {
-  font-size: 1rem;
-  font-weight: 600;
-  color: var(--color-text-primary);
-  margin: 0;
-}
-
-.sidebar-content {
-  flex: 1;
-  overflow-y: auto;
-  padding: 0.5rem;
-  min-height: 0;
-}
-
-.loading-container {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  padding: 2rem;
-  gap: 0.5rem;
-}
-
-.loading-spinner {
-  width: 20px;
-  height: 20px;
-  border: 2px solid var(--color-border);
-  border-top: 2px solid var(--color-accent);
-  border-radius: 50%;
-  animation: spin 1s linear infinite;
-}
-
-@keyframes spin {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-}
-
-.loading-text {
-  font-size: 0.75rem;
-  color: var(--color-text-secondary);
-}
-
-.menu-list {
-  display: flex;
-  flex-direction: column;
-  gap: 0.25rem;
-}
-
-.menu-item {
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-  padding: 0.75rem;
-  border-radius: var(--radius-md);
-  cursor: pointer;
-  transition: var(--transition-fast);
-  font-size: 0.875rem;
-}
-
-.menu-item:hover {
-  background: var(--color-surface);
-}
-
-.menu-item.active {
-  background: var(--color-accent);
-  color: white;
-}
-
-.menu-item.active .menu-icon {
-  color: white;
-}
-
-.menu-icon {
-  width: 16px;
-  height: 16px;
-  color: var(--color-text-secondary);
-  flex-shrink: 0;
-}
-
-.menu-icon.active {
-  color: var(--color-accent);
-}
-
-.menu-text {
-  font-weight: 500;
-  line-height: 1.2;
-  word-break: break-word;
-}
-
-.sidebar-footer {
-  border-top: 1px solid var(--color-border);
-  padding: 0.5rem;
-  flex-shrink: 0;
-}
-
-.footer-actions {
-  display: flex;
-  flex-direction: column;
-  gap: 0.25rem;
-}
-
-.footer-action-item {
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-  padding: 0.75rem;
-  border-radius: var(--radius-md);
-  cursor: pointer;
-  transition: var(--transition-fast);
-  font-size: 0.875rem;
-  background: none;
-  border: none;
-  color: var(--color-text-primary);
-  text-align: left;
-  width: 100%;
-}
-
-.footer-action-item:hover {
-  background: var(--color-surface);
-}
-
-.action-icon {
-  width: 16px;
-  height: 16px;
-  color: var(--color-text-secondary);
-  flex-shrink: 0;
-}
-
-.action-text {
-  font-weight: 500;
-}
-
-.content-area {
-  flex: 1;
-  padding: 1.5rem;
-  overflow-y: auto;
-  min-height: 0;
-}
-
-.action-button {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  padding: 0.75rem 1.5rem;
-  border: none;
-  border-radius: var(--radius-lg);
-  font-size: 0.875rem;
-  font-weight: 500;
-  cursor: pointer;
-  transition: var(--transition-fast);
-  font-family: inherit;
-}
-
-.action-button.primary {
-  background: var(--color-accent);
-  color: white;
-}
-
-.action-button.primary:hover {
-  background: var(--color-accent-hover);
-  transform: translateY(-1px);
-  box-shadow: var(--shadow-md);
-}
-
-.action-button.secondary {
-  background: var(--color-surface-elevated);
-  color: var(--color-text-primary);
-  border: 1px solid var(--color-border);
-}
-
-.action-button.secondary:hover {
-  background: var(--color-surface);
-  border-color: var(--color-accent);
-  color: var(--color-accent);
-}
-
-.button-icon {
-  width: 16px;
-  height: 16px;
-}
-
-/* Dialog styles */
-.dialog-overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: rgba(0, 0, 0, 0.5);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 2000;
-}
-
-.dialog-container {
-  background: var(--color-surface);
-  border-radius: var(--radius-lg);
-  border: 1px solid var(--color-border);
-  box-shadow: var(--shadow-xl);
-  max-width: 600px;
-  width: 90%;
-  max-height: 80vh;
-  overflow: hidden;
-}
-
-.dialog-header {
-  padding: 1.5rem 1.5rem 0;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.dialog-title {
-  font-size: 1.25rem;
-  font-weight: 600;
-  color: var(--color-text-primary);
-  margin: 0;
-}
-
-.dialog-close {
-  background: none;
-  border: none;
-  color: var(--color-text-secondary);
-  cursor: pointer;
-  padding: 0.25rem;
-  width: 24px;
-  height: 24px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: var(--radius-sm);
-  transition: var(--transition-fast);
-}
-
-.dialog-close:hover {
-  background: var(--color-surface-elevated);
-  color: var(--color-text-primary);
-}
-
-.close-icon {
-  width: 16px;
-  height: 16px;
-}
-
-.dialog-content {
-  padding: 1.5rem;
-}
-
-.choice-cos {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-  gap: 1rem;
-}
-
-.picbed-card {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  padding: 1.5rem;
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-lg);
-  cursor: pointer;
-  transition: var(--transition-fast);
-  position: relative;
-  background: var(--color-surface-elevated);
-}
-
-.picbed-card:hover {
-  border-color: var(--color-accent);
-  transform: translateY(-2px);
-  box-shadow: var(--shadow-md);
-}
-
-.picbed-card.active {
-  border-color: var(--color-accent);
-  background-color: rgba(64, 158, 255, 0.1);
-}
-
-.picbed-card.main-card {
-  border-color: var(--color-error);
-}
-
-.picbed-card.main-card:hover {
-  border-color: var(--color-error);
-  background-color: rgba(255, 59, 48, 0.1);
-}
-
-.card-icon {
-  width: 40px;
-  height: 40px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin-bottom: 0.75rem;
-}
-
-.picbed-icon {
-  width: 32px;
-  height: 32px;
-  object-fit: contain;
-}
-
-.main-icon {
-  width: 24px;
-  height: 24px;
-  color: var(--color-error);
-}
-
-.card-content {
-  text-align: center;
-}
-
-.card-title {
-  font-size: 0.875rem;
-  font-weight: 500;
-  color: var(--color-text-primary);
-}
-
-.main-title {
-  color: var(--color-error);
-}
-
-.check-icon {
-  position: absolute;
-  top: 0.5rem;
-  right: 0.5rem;
-  width: 20px;
-  height: 20px;
-  color: var(--color-accent);
-}
-
-/* Drawer styles */
-.drawer-overlay {
-  position: fixed;
-  top: 32px;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: rgba(0, 0, 0, 0.5);
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  z-index: 2000;
-}
-
-.drawer-container {
-  background: var(--color-surface);
-  height: 100vh;
-  width: 400px;
-  max-width: 90vw;
-  overflow-y: auto;
-  box-shadow: var(--shadow-xl);
-}
-
-.drawer-header {
-  padding: 1.5rem;
-  border-bottom: 1px solid var(--color-border);
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.drawer-title {
-  font-size: 1.25rem;
-  font-weight: 600;
-  color: var(--color-text-primary);
-  margin: 0;
-}
-
-.drawer-close {
-  background: none;
-  border: none;
-  color: var(--color-text-secondary);
-  cursor: pointer;
-  padding: 0.25rem;
-  width: 24px;
-  height: 24px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: var(--radius-sm);
-  transition: var(--transition-fast);
-}
-
-.drawer-close:hover {
-  background: var(--color-surface-elevated);
-  color: var(--color-text-primary);
-}
-
-.drawer-content {
-  padding: 1.5rem;
-}
-
-.form-header {
-  display: flex;
-  justify-content: center;
-  padding: 2rem 0;
-}
-
-.form-icon {
-  width: 60px;
-  height: 60px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.picbed-form-icon {
-  width: 48px;
-  height: 48px;
-  object-fit: contain;
-}
-
-.form-divider {
-  height: 1px;
-  background: var(--color-border);
-  margin: 1.5rem 0;
-}
-
-.form-group {
-  margin-bottom: 1.5rem;
-}
-
-.form-label {
-  display: block;
-  margin-bottom: 0.5rem;
-  font-size: 0.875rem;
-  font-weight: 500;
-  color: var(--color-text-primary);
-}
-
-.form-input {
-  width: 100%;
-  padding: 0.75rem;
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-md);
-  background: var(--color-surface-elevated);
-  color: var(--color-text-primary);
-  font-size: 0.875rem;
-  transition: var(--transition-fast);
-  box-sizing: border-box;
-}
-
-.form-input:focus {
-  outline: none;
-  border-color: var(--color-accent);
-  box-shadow: 0 0 0 2px rgba(0, 122, 255, 0.2);
-}
-
-.input-group {
-  display: flex;
-}
-
-.group-input {
-  border-top-right-radius: 0;
-  border-bottom-right-radius: 0;
-  border-right: none;
-}
-
-.input-append {
-  padding: 0.75rem;
-  background: var(--color-background-secondary);
-  border: 1px solid var(--color-border);
-  border-left: none;
-  border-top-right-radius: var(--radius-md);
-  border-bottom-right-radius: var(--radius-md);
-  font-size: 0.875rem;
-  color: var(--color-text-secondary);
-}
-
-.select-wrapper {
-  position: relative;
-}
-
-.form-select {
-  width: 100%;
-  padding: 0.75rem 2.5rem 0.75rem 0.75rem;
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-md);
-  background: var(--color-surface-elevated);
-  color: var(--color-text-primary);
-  font-size: 0.875rem;
-  appearance: none;
-  cursor: pointer;
-  transition: var(--transition-fast);
-}
-
-.form-select:focus {
-  outline: none;
-  border-color: var(--color-accent);
-  box-shadow: 0 0 0 2px rgba(0, 122, 255, 0.2);
-}
-
-.select-arrow {
-  position: absolute;
-  right: 0.75rem;
-  top: 50%;
-  transform: translateY(-50%);
-  width: 16px;
-  height: 16px;
-  color: var(--color-text-secondary);
-  pointer-events: none;
-}
-
-.switch-label {
-  display: flex;
-  align-items: center;
-  cursor: pointer;
-}
-
-.switch-input {
-  position: absolute;
-  opacity: 0;
-  cursor: pointer;
-}
-
-.switch-slider {
-  position: relative;
-  width: 3rem;
-  height: 1.5rem;
-  background: var(--color-border);
-  border-radius: 0.75rem;
-  transition: var(--transition-fast);
-}
-
-.switch-button {
-  position: absolute;
-  top: 2px;
-  left: 2px;
-  width: 1.25rem;
-  height: 1.25rem;
-  background: white;
-  border-radius: 50%;
-  transition: var(--transition-fast);
-  box-shadow: var(--shadow-sm);
-}
-
-.switch-input:checked + .switch-slider {
-  background: var(--color-accent);
-}
-
-.switch-input:checked + .switch-slider .switch-button {
-  transform: translateX(1.5rem);
-}
-
-.form-actions {
-  display: flex;
-  gap: 1rem;
-  margin-top: 2rem;
-  justify-content: flex-end;
-}
+/* ManageMain Page Styles */
+
+.manage-container {
+  height: 97%;
+  display: flex;
+  flex-direction: column;
+  padding: 0.75rem;
+}
+
+.manage-card {
+  background: var(--color-background-secondary);
+  border-radius: var(--radius-lg);
+  border: 1px solid var(--color-border);
+  box-shadow: var(--shadow-sm);
+}
+
+.header-card {
+  padding: 0.5rem;
+}
+
+.card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 1rem;
+}
+
+.header-content {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+
+.header-icon {
+  width: 68px;
+  height: 48px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.header-icon-img {
+  width: 40px;
+  height: 40px;
+  object-fit: contain;
+}
+
+.header-text .header-title {
+  font-size: 1.25rem;
+  font-weight: 600;
+  color: var(--color-text-primary);
+  margin: 0 0 0.01rem 0;
+}
+
+.header-text .header-subtitle {
+  font-size: 0.875rem;
+  color: var(--color-text-secondary);
+  margin: 0;
+}
+
+.header-actions {
+  display: flex;
+  gap: 1rem;
+}
+
+.main-card {
+  flex: 1;
+  overflow: hidden;
+  min-height: 0; /* Fix for flex overflow */
+}
+
+.main-layout {
+  display: flex;
+  height:99%;
+}
+
+.sidebar {
+  min-width: 120px;
+  max-width: 400px;
+  background: var(--color-surface-secondary);
+  border-right: 1px solid var(--color-border);
+  display: flex;
+  flex-direction: column;
+  min-height: 0; /* Fix for flex overflow */
+  transition: width 0.1s ease-out;
+}
+
+.resize-handle {
+  width: 4px;
+  background: transparent;
+  cursor: col-resize;
+  position: relative;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.resize-handle:hover {
+  background: var(--color-border);
+}
+
+.resize-handle:hover .resize-line {
+  opacity: 1;
+}
+
+.resize-line {
+  width: 2px;
+  height: 40px;
+  background: var(--color-accent);
+  border-radius: 1px;
+  opacity: 0;
+  transition: opacity 0.2s ease;
+}
+
+.sidebar-header {
+  padding: 1rem;
+  border-bottom: 1px solid var(--color-border);
+  flex-shrink: 0;
+}
+
+.sidebar-title {
+  font-size: 1rem;
+  font-weight: 600;
+  color: var(--color-text-primary);
+  margin: 0;
+}
+
+.sidebar-content {
+  flex: 1;
+  overflow-y: auto;
+  padding: 0.5rem;
+  min-height: 0;
+}
+
+.loading-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 2rem;
+  gap: 0.5rem;
+}
+
+.loading-spinner {
+  width: 20px;
+  height: 20px;
+  border: 2px solid var(--color-border);
+  border-top: 2px solid var(--color-accent);
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+.loading-text {
+  font-size: 0.75rem;
+  color: var(--color-text-secondary);
+}
+
+.menu-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+.menu-item {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.75rem;
+  border-radius: var(--radius-md);
+  cursor: pointer;
+  transition: var(--transition-fast);
+  font-size: 0.875rem;
+}
+
+.menu-item:hover {
+  background: var(--color-surface);
+}
+
+.menu-item.active {
+  background: var(--color-accent);
+  color: white;
+}
+
+.menu-item.active .menu-icon {
+  color: white;
+}
+
+.menu-icon {
+  width: 16px;
+  height: 16px;
+  color: var(--color-text-secondary);
+  flex-shrink: 0;
+}
+
+.menu-icon.active {
+  color: var(--color-accent);
+}
+
+.menu-text {
+  font-weight: 500;
+  line-height: 1.2;
+  word-break: break-word;
+  overflow: hidden;
+  flex: 1;
+  min-width: 0;
+}
+
+.sidebar-footer {
+  border-top: 1px solid var(--color-border);
+  padding: 0.5rem;
+  flex-shrink: 0;
+}
+
+.footer-actions {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+.footer-action-item {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.75rem;
+  border-radius: var(--radius-md);
+  cursor: pointer;
+  transition: var(--transition-fast);
+  font-size: 0.875rem;
+  background: none;
+  border: none;
+  color: var(--color-text-primary);
+  text-align: left;
+  width: 100%;
+}
+
+.footer-action-item:hover {
+  background: var(--color-surface);
+}
+
+.action-icon {
+  width: 16px;
+  height: 16px;
+  color: var(--color-text-secondary);
+  flex-shrink: 0;
+}
+
+.action-text {
+  font-weight: 500;
+}
+
+.content-area {
+  flex: 1;
+  padding: 1.5rem;
+  overflow-y: auto;
+  min-height: 0;
+}
+
+.action-button {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.75rem 1.5rem;
+  border: none;
+  border-radius: var(--radius-lg);
+  font-size: 0.875rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: var(--transition-fast);
+  font-family: inherit;
+}
+
+.action-button.primary {
+  background: var(--color-accent);
+  color: white;
+}
+
+.action-button.primary:hover {
+  background: var(--color-accent-hover);
+  transform: translateY(-1px);
+  box-shadow: var(--shadow-md);
+}
+
+.action-button.secondary {
+  background: var(--color-surface-elevated);
+  color: var(--color-text-primary);
+  border: 1px solid var(--color-border);
+}
+
+.action-button.secondary:hover {
+  background: var(--color-surface);
+  border-color: var(--color-accent);
+  color: var(--color-accent);
+}
+
+.button-icon {
+  width: 16px;
+  height: 16px;
+}
+
+/* Dialog styles */
+.dialog-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 2000;
+}
+
+.dialog-container {
+  background: var(--color-surface);
+  border-radius: var(--radius-lg);
+  border: 1px solid var(--color-border);
+  box-shadow: var(--shadow-xl);
+  max-width: 600px;
+  width: 90%;
+  max-height: 80vh;
+  overflow: hidden;
+}
+
+.dialog-header {
+  padding: 1.5rem 1.5rem 0;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.dialog-title {
+  font-size: 1.25rem;
+  font-weight: 600;
+  color: var(--color-text-primary);
+  margin: 0;
+}
+
+.dialog-close {
+  background: none;
+  border: none;
+  color: var(--color-text-secondary);
+  cursor: pointer;
+  padding: 0.25rem;
+  width: 24px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--radius-sm);
+  transition: var(--transition-fast);
+}
+
+.dialog-close:hover {
+  background: var(--color-surface-elevated);
+  color: var(--color-text-primary);
+}
+
+.close-icon {
+  width: 16px;
+  height: 16px;
+}
+
+.dialog-content {
+  padding: 1.5rem;
+}
+
+.choice-cos {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 1rem;
+}
+
+.picbed-card {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 1.5rem;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-lg);
+  cursor: pointer;
+  transition: var(--transition-fast);
+  position: relative;
+  background: var(--color-surface-elevated);
+}
+
+.picbed-card:hover {
+  border-color: var(--color-accent);
+  transform: translateY(-2px);
+  box-shadow: var(--shadow-md);
+}
+
+.picbed-card.active {
+  border-color: var(--color-accent);
+  background-color: rgba(64, 158, 255, 0.1);
+}
+
+.picbed-card.main-card {
+  border-color: var(--color-error);
+}
+
+.picbed-card.main-card:hover {
+  border-color: var(--color-error);
+  background-color: rgba(255, 59, 48, 0.1);
+}
+
+.card-icon {
+  width: 40px;
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 0.75rem;
+}
+
+.picbed-icon {
+  width: 32px;
+  height: 32px;
+  object-fit: contain;
+}
+
+.main-icon {
+  width: 24px;
+  height: 24px;
+  color: var(--color-error);
+}
+
+.card-content {
+  text-align: center;
+}
+
+.card-title {
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--color-text-primary);
+}
+
+.main-title {
+  color: var(--color-error);
+}
+
+.check-icon {
+  position: absolute;
+  top: 0.5rem;
+  right: 0.5rem;
+  width: 20px;
+  height: 20px;
+  color: var(--color-accent);
+}
+
+/* Drawer styles */
+.drawer-overlay {
+  position: fixed;
+  top: 32px;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  z-index: 2000;
+}
+
+.drawer-container {
+  background: var(--color-surface);
+  height: 100vh;
+  width: 400px;
+  max-width: 90vw;
+  overflow-y: auto;
+  box-shadow: var(--shadow-xl);
+}
+
+.drawer-header {
+  padding: 1.5rem;
+  border-bottom: 1px solid var(--color-border);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.drawer-title {
+  font-size: 1.25rem;
+  font-weight: 600;
+  color: var(--color-text-primary);
+  margin: 0;
+}
+
+.drawer-close {
+  background: none;
+  border: none;
+  color: var(--color-text-secondary);
+  cursor: pointer;
+  padding: 0.25rem;
+  width: 24px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--radius-sm);
+  transition: var(--transition-fast);
+}
+
+.drawer-close:hover {
+  background: var(--color-surface-elevated);
+  color: var(--color-text-primary);
+}
+
+.drawer-content {
+  padding: 1.5rem;
+}
+
+.form-header {
+  display: flex;
+  justify-content: center;
+  padding: 2rem 0;
+}
+
+.form-icon {
+  width: 60px;
+  height: 60px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.picbed-form-icon {
+  width: 48px;
+  height: 48px;
+  object-fit: contain;
+}
+
+.form-divider {
+  height: 1px;
+  background: var(--color-border);
+  margin: 1.5rem 0;
+}
+
+.form-group {
+  margin-bottom: 1.5rem;
+}
+
+.form-label {
+  display: block;
+  margin-bottom: 0.5rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--color-text-primary);
+}
+
+.form-input {
+  width: 100%;
+  padding: 0.75rem;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  background: var(--color-surface-elevated);
+  color: var(--color-text-primary);
+  font-size: 0.875rem;
+  transition: var(--transition-fast);
+  box-sizing: border-box;
+}
+
+.form-input:focus {
+  outline: none;
+  border-color: var(--color-accent);
+  box-shadow: 0 0 0 2px rgba(0, 122, 255, 0.2);
+}
+
+.input-group {
+  display: flex;
+}
+
+.group-input {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+  border-right: none;
+}
+
+.input-append {
+  padding: 0.75rem;
+  background: var(--color-background-secondary);
+  border: 1px solid var(--color-border);
+  border-left: none;
+  border-top-right-radius: var(--radius-md);
+  border-bottom-right-radius: var(--radius-md);
+  font-size: 0.875rem;
+  color: var(--color-text-secondary);
+}
+
+.select-wrapper {
+  position: relative;
+}
+
+.form-select {
+  width: 100%;
+  padding: 0.75rem 2.5rem 0.75rem 0.75rem;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  background: var(--color-surface-elevated);
+  color: var(--color-text-primary);
+  font-size: 0.875rem;
+  appearance: none;
+  cursor: pointer;
+  transition: var(--transition-fast);
+}
+
+.form-select:focus {
+  outline: none;
+  border-color: var(--color-accent);
+  box-shadow: 0 0 0 2px rgba(0, 122, 255, 0.2);
+}
+
+.select-arrow {
+  position: absolute;
+  right: 0.75rem;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 16px;
+  height: 16px;
+  color: var(--color-text-secondary);
+  pointer-events: none;
+}
+
+.switch-label {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+}
+
+.switch-input {
+  position: absolute;
+  opacity: 0;
+  cursor: pointer;
+}
+
+.switch-slider {
+  position: relative;
+  width: 3rem;
+  height: 1.5rem;
+  background: var(--color-border);
+  border-radius: 0.75rem;
+  transition: var(--transition-fast);
+}
+
+.switch-button {
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  width: 1.25rem;
+  height: 1.25rem;
+  background: white;
+  border-radius: 50%;
+  transition: var(--transition-fast);
+  box-shadow: var(--shadow-sm);
+}
+
+.switch-input:checked + .switch-slider {
+  background: var(--color-accent);
+}
+
+.switch-input:checked + .switch-slider .switch-button {
+  transform: translateX(1.5rem);
+}
+
+.form-actions {
+  display: flex;
+  gap: 1rem;
+  margin-top: 2rem;
+  justify-content: flex-end;
+}