refactor: move DB selector from TitleBar/StatusBar to MainArea tab bar

- Remove DbSelector from StatusBar.vue
- Remove DbSelector from TitleBar.vue
- Add DbSelector to MainArea tab bar (left of tab buttons, after connection switcher)
- Only visible when connected (connStore.isConnected)
- Separated by dividers from connection switcher and tabs

src/components/MainArea.vue

@@ -9,6 +9,7 @@ import CliView from './CliView.vue'
 import SlowLogView from './SlowLogView.vue'
 import MemoryAnalysis from './MemoryAnalysis.vue'
 import SettingsView from './SettingsView.vue'
+import DbSelector from './DbSelector.vue'
 
 const connStore = useConnectionStore()
 const { t } = useI18n()
@@ -228,6 +229,9 @@ onUnmounted(() => {
         </template>
       </el-dropdown>
       <div class="tab-divider" v-if="connectedConnections.length > 0" />
+      <!-- DB Selector -->
+      <DbSelector v-if="connStore.isConnected" class="tab-db-selector" />
+      <div class="tab-divider" v-if="connStore.isConnected" />
       <!-- Tabs -->
       <div
         v-for="tab in tabs"
@@ -359,6 +363,13 @@ onUnmounted(() => {
   margin-left: 8px;
 }
 
+.tab-db-selector {
+  flex-shrink: 0;
+  padding: 0 4px;
+  display: flex;
+  align-items: center;
+}
+
 .tab-divider {
   width: 1px;
   height: 20px;

src/components/StatusBar.vue

@@ -3,7 +3,6 @@
 import { computed } from 'vue'
 import { useConnectionStore } from '@renderer/stores/connection'
 import { useI18n } from '@renderer/i18n'
-import DbSelector from './DbSelector.vue'
 
 const connStore = useConnectionStore()
 const { t } = useI18n()
@@ -32,9 +31,6 @@ const statusClass = computed(() => {
       <span class="status-dot" :class="statusClass" />
       {{ statusText }}
     </span>
-    <span class="statusbar-center">
-      <DbSelector v-if="connStore.isConnected" />
-    </span>
     <span class="statusbar-right">JRedisDesktop v2.0</span>
   </footer>
 </template>
@@ -60,12 +56,6 @@ const statusClass = computed(() => {
   gap: 6px;
 }
 
-.statusbar-center {
-  flex: 1;
-  display: flex;
-  justify-content: center;
-}
-
 .status-dot {
   width: 7px;
   height: 7px;

src/components/TitleBar.vue

@@ -1,12 +1,9 @@
 <script setup lang="ts">
 // src/components/TitleBar.vue
 import { useAppStore } from '@renderer/stores/app'
-import { useConnectionStore } from '@renderer/stores/connection'
 import { useI18n } from '@renderer/i18n'
-import DbSelector from './DbSelector.vue'
 
 const appStore = useAppStore()
-const connStore = useConnectionStore()
 const { t } = useI18n()
 
 const props = defineProps<{ showSettings: boolean }>()
@@ -28,7 +25,6 @@ function openSettings() {
     <div class="titlebar-drag">
       <span class="titlebar-logo">JRD</span>
       <span class="titlebar-title">JRedisDesktop</span>
-      <DbSelector v-if="connStore.isConnected" class="titlebar-db" />
     </div>
     <div class="titlebar-actions">
       <button class="titlebar-btn" :title="t('settings.title')" @click="openSettings">
@@ -84,10 +80,6 @@ function openSettings() {
   color: var(--text-secondary);
 }
 
-.titlebar-db {
-  -webkit-app-region: no-drag;
-}
-
 .titlebar-actions {
   display: flex;
   -webkit-app-region: no-drag;