fix powerline tabs - use proper SVG chevrons

Author: xcutiboo

src/components/live-preview/terminal-window.component.ts

@@ -109,7 +109,17 @@ import { FontPresetsService } from '../../services/font-presets.service';
           }
           @case ('powerline') {
             @for (tab of tabs; track tab.name; let i = $index) {
-              <div class="relative px-4 py-1.5 text-xs whitespace-nowrap flex items-center powerline-tab" [ngStyle]="powerlineTabStyles(i === 0)">{{ tab.name }}</div>
+              <div class="flex items-center">
+                <div class="px-3 py-1.5 text-xs whitespace-nowrap flex items-center" [ngStyle]="simpleTabStyles(i === 0)">
+                  {{ tab.name }}
+                </div>
+                @if (i < tabs.length - 1) {
+                  <svg width="14" height="24" viewBox="0 0 14 24" preserveAspectRatio="none" class="flex-shrink-0">
+                    <path d="M0,0 L14,12 L0,24 Z" [attr.fill]="tabBgColor(i === 0)"/>
+                    <path d="M0,0 L14,12 L0,24 L14,24 L14,0 Z" [attr.fill]="tabBgColor(false)"/>
+                  </svg>
+                }
+              </div>
             }
             <div class="flex-1" [style.background]="tabBarBg()"></div>
           }
@@ -129,8 +139,6 @@ import { FontPresetsService } from '../../services/font-presets.service';
     .animate-blink { animation: blink 1s step-end infinite; }
     .slanted-tab { clip-path: polygon(8px 0%, 100% 0%, calc(100% - 8px) 100%, 0% 100%); padding-left: 16px; padding-right: 16px; margin-right: -4px; }
     .slanted-tab:first-child { clip-path: polygon(0% 0%, 100% 0%, calc(100% - 8px) 100%, 0% 100%); padding-left: 12px; }
-    .powerline-tab { clip-path: polygon(0% 0%, calc(100% - 10px) 0%, 100% 50%, calc(100% - 10px) 100%, 0% 100%, 10px 50%); padding-left: 20px; padding-right: 14px; margin-left: -10px; }
-    .powerline-tab:first-child { clip-path: polygon(0% 0%, calc(100% - 10px) 0%, 100% 50%, calc(100% - 10px) 100%, 0% 100%); padding-left: 12px; margin-left: 0; }
   `]
 })
 export class TerminalWindowComponent {
@@ -209,6 +217,11 @@ export class TerminalWindowComponent {
     return { background: bg, color: isActive ? cfg.active_tab_foreground : cfg.inactive_tab_foreground, fontWeight: isActive ? '600' : '400', '--tab-bg': bg } as Record<string, string>;
   }
 
+  tabBgColor(isActive: boolean): string {
+    const cfg = this.tabBarCfg();
+    return isActive ? cfg.active_tab_background : cfg.inactive_tab_background;
+  }
+
   cursorShape = computed(() => this.cursorCfg().cursor_shape);
   cursorColor = computed(() => { const c = this.cursorCfg().cursor; return c === 'none' || !c?.startsWith('#') ? this.colors().foreground : c; });
   cursorTextColor = computed(() => { const c = this.cursorCfg().cursor_text_color; return c === 'background' ? this.colors().background : (c?.startsWith('#') ? c : this.colors().background); });