[backport core/1.41] [bugfix] Align advanced footer design with subgraph footer layout (#10011)

Backport of #9879 to `core/1.41`

Automatically created by backport workflow.

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-10011-backport-core-1-41-bugfix-Align-advanced-footer-design-with-subgraph-footer-layout-3256d73d3650813e892ee2790b25e046)
by [Unito](https://www.unito.io)

Co-authored-by: jaeone94 <89377375+jaeone94@users.noreply.github.com>

src/locales/en/main.json

@@ -3303,6 +3303,7 @@
     "inputsNoneTooltip": "Node has no inputs",
     "advancedInputs": "ADVANCED INPUTS",
     "showAdvancedInputsButton": "Show advanced inputs",
+    "showAdvancedShort": "Show advanced",
     "properties": "Properties",
     "nodeState": "Node state",
     "settings": "Settings",
@@ -3340,6 +3341,7 @@
     "fallbackGroupTitle": "Group",
     "fallbackNodeTitle": "Node",
     "hideAdvancedInputsButton": "Hide advanced inputs",
+    "hideAdvancedShort": "Hide advanced",
     "errors": "Errors",
     "noErrors": "No errors",
     "executionErrorOccurred": "An error occurred during execution. Check the Errors tab for details.",

src/renderer/extensions/vueNodes/components/NodeFooter.vue

@@ -38,6 +38,60 @@
     </Button>
   </template>
 
+  <!-- Case 1b: Advanced + Error (Dual Tabs, Regular Nodes) -->
+  <template
+    v-else-if="
+      !isSubgraph &&
+      hasAnyError &&
+      showErrorsTabEnabled &&
+      (showAdvancedInputsButton || showAdvancedState)
+    "
+  >
+    <Button
+      variant="textonly"
+      :class="
+        cn(
+          getTabStyles(false),
+          errorTabWidth,
+          '-z-5 bg-destructive-background text-white hover:bg-destructive-background-hover'
+        )
+      "
+      @click.stop="$emit('openErrors')"
+    >
+      <div class="flex size-full items-center justify-center gap-2">
+        <span class="truncate">{{ t('g.error') }}</span>
+        <i class="icon-[lucide--info] size-4 shrink-0" />
+      </div>
+    </Button>
+
+    <Button
+      variant="textonly"
+      :class="
+        cn(
+          getTabStyles(true),
+          enterTabFullWidth,
+          '-z-10 bg-node-component-header-surface'
+        )
+      "
+      @click.stop="$emit('toggleAdvanced')"
+    >
+      <div class="ml-auto flex h-full w-1/2 items-center justify-center gap-2">
+        <span class="truncate">{{
+          showAdvancedState
+            ? t('rightSidePanel.hideAdvancedShort')
+            : t('rightSidePanel.showAdvancedShort')
+        }}</span>
+        <i
+          :class="
+            showAdvancedState
+              ? 'icon-[lucide--chevron-up] size-4 shrink-0'
+              : 'icon-[lucide--settings-2] size-4 shrink-0'
+          "
+        />
+      </div>
+    </Button>
+  </template>
+
   <!-- Case 2: Error Only (Full Width) -->
   <template v-else-if="hasAnyError && showErrorsTabEnabled">
     <Button
@@ -81,17 +135,19 @@
   </template>
 
   <!-- Case 4: Advanced Footer (Regular Nodes) -->
-  <div
+  <Button
     v-else-if="showAdvancedInputsButton || showAdvancedState"
-    class="relative -z-1 -mt-5 flex h-7 w-full divide-x divide-component-node-border overflow-hidden rounded-t-none rounded-b-2xl text-xs"
+    variant="textonly"
+    :class="
+      cn(
+        getTabStyles(true),
+        hasAnyError ? 'w-[calc(100%+8px)]' : 'w-full',
+        '-z-10 bg-node-component-header-surface'
+      )
+    "
+    @click.stop="$emit('toggleAdvanced')"
   >
-    <Button
-      variant="textonly"
-      :class="
-        cn('h-full flex-1 rounded-none', isCollapsed ? 'py-2' : 'pt-7 pb-2')
-      "
-      @click.stop="$emit('toggleAdvanced')"
-    >
+    <div class="flex size-full items-center justify-center gap-2">
       <template v-if="showAdvancedState">
         <span class="truncate">{{
           t('rightSidePanel.hideAdvancedInputsButton')
@@ -104,8 +160,8 @@
         }}</span>
         <i class="icon-[lucide--settings-2] size-4 shrink-0" />
       </template>
-    </Button>
-  </div>
+    </div>
+  </Button>
 </template>
 
 <script setup lang="ts">