feat: show settings tab on startup screen

src/components/MainArea.vue

@@ -26,8 +26,9 @@ watch(
 </script>
 
 <template>
-  <div class="main-area" v-if="connStore.isConnected">
+  <div class="main-area">
     <div class="tab-bar">
+      <template v-if="connStore.isConnected">
         <button
           class="tab-item"
           :class="{ active: activeTab === 'status' }"
@@ -60,6 +61,8 @@ watch(
           <el-icon><Clock /></el-icon>
           {{ t('slowlog.title') }}
         </button>
+      </template>
+      <div class="tab-spacer" v-if="connStore.isConnected"></div>
       <button
         class="tab-item"
         :class="{ active: activeTab === 'settings' }"
@@ -70,19 +73,20 @@ watch(
       </button>
     </div>
     <div class="tab-content">
+      <template v-if="connStore.isConnected">
         <StatusView v-if="activeTab === 'status'" />
         <KeyBrowser v-else-if="activeTab === 'keys'" />
         <CliView v-else-if="activeTab === 'cli'" />
         <SlowLogView v-else-if="activeTab === 'slowlog'" />
-      <SettingsView v-else-if="activeTab === 'settings'" />
+      </template>
-    </div>
+      <SettingsView v-if="activeTab === 'settings'" />
-  </div>
+      <div v-if="!connStore.isConnected && activeTab !== 'settings'" class="no-connection">
-
-  <div v-else class="no-connection">
         <div class="placeholder-icon">JRD</div>
         <h2>JRedisDesktop</h2>
         <p>{{ t('app.placeholder') }}</p>
       </div>
+    </div>
+  </div>
 </template>
 
 <style scoped>
@@ -126,6 +130,10 @@ watch(
   border-bottom-color: var(--accent-light);
 }
 
+.tab-spacer {
+  flex: 1;
+}
+
 .tab-content {
   flex: 1;
   overflow: hidden;