fix: top tab list

Author: CyanSalt

src/renderer/components/TitleBar.vue

@@ -54,11 +54,13 @@ const isUsingLeftControl = process.platform === 'darwin'
   display: grid;
   flex: none;
   grid-template-columns: 1fr auto 1fr;
+  gap: 8px;
   height: env(titlebar-area-height, 36px);
   padding: 0 16px;
   line-height: env(titlebar-area-height, 36px);
   -webkit-app-region: drag;
   &:has(.tab-list) {
+    display: flex;
     height: #{36px + 2 * 8px}; // var(--min-tab-height) + 2 * 8px
     line-height: 1;
   }
@@ -103,6 +105,7 @@ const isUsingLeftControl = process.platform === 'darwin'
 }
 .title-wrapper {
   display: flex;
+  flex: auto;
   &:has(.terminal-title) {
     justify-content: center;
   }

src/renderer/components/WindowControl.vue

@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 import { useMaximized, useMinimized } from '../compositions/frame'
+import { useSettings } from '../compositions/settings'
 import VisualIcon from './basic/VisualIcon.vue'
 
 let isMaximized = $(useMaximized())
@@ -8,6 +9,11 @@ let isMinimized = $(useMinimized())
 const platform = process.platform
 const isCustomControlEnabled = !['darwin', 'win32'].includes(platform)
 
+const settings = useSettings()
+const isInteractive = $computed(() => {
+  return settings['terminal.view.tabListPosition'] === 'top'
+})
+
 function minimize() {
   isMinimized = !isMinimized
 }
@@ -22,7 +28,7 @@ function close() {
 </script>
 
 <template>
-  <div :class="['window-control', platform, { 'is-custom': isCustomControlEnabled }]">
+  <div :class="['window-control', platform, { 'is-custom': isCustomControlEnabled, 'is-interactive': isInteractive }]">
     <template v-if="isCustomControlEnabled">
       <div class="minimize button" @click="minimize">
         <VisualIcon name="lucide-minus" />
@@ -38,12 +44,19 @@ function close() {
 </template>
 
 <style lang="scss" scoped>
+@use 'sass:math';
+
 .window-control {
   display: flex;
   gap: 8px;
   // TODO: get the min size on win32
   &.darwin:not(.is-custom) {
-    width: #{12px * 2 + 56px};
+    $--traffic-light-width: 12px * 2 + 56px;
+    $--traffic-light-offset: math.div((36px + 8px * 2) - 36px, 2);
+    width: $--traffic-light-width;
+    &.is-interactive {
+      width: #{$--traffic-light-width + $--traffic-light-offset};
+    }
   }
 }
 .button {