Cleanup: Sidebar Tabs component and style alignment (#7215)

## Summary

Unify the current sidebar tabs, structurally and aesthetically.

## Changes

- Removes the Assets only Layout
- Standardizes the title styling and spacing across the tabs.

## Review Focus

<!-- Critical design decisions or edge cases that need attention -->

<!-- If this PR fixes an issue, uncomment and update the line below -->
<!-- Fixes #ISSUE_NUMBER -->

## Screenshots (if applicable)

<!-- Add screenshots or video recording to help explain your changes -->

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7215-WIP-Sidebar-Tabs-component-and-style-alignment-2c26d73d3650817193bfd752e0d0bbde)
by [Unito](https://www.unito.io)

src/components/bottomPanel/BottomPanel.vue

@@ -10,12 +10,12 @@
         class="bg-transparent"
       >
         <div class="flex w-full justify-between">
-          <div class="tabs-container">
+          <div class="tabs-container font-inter">
             <Tab
               v-for="tab in bottomPanelStore.bottomPanelTabs"
               :key="tab.id"
               :value="tab.id"
-              class="m-1 mx-2 border-none"
+              class="m-1 mx-2 border-none font-inter"
               :class="{
                 'tab-list-single-item':
                   bottomPanelStore.bottomPanelTabs.length === 1

src/components/common/TreeExplorer.vue

@@ -2,7 +2,7 @@
   <Tree
     v-model:expanded-keys="expandedKeys"
     v-model:selection-keys="selectionKeys"
-    class="tree-explorer px-2 py-0 2xl:px-4"
+    class="tree-explorer px-2 py-0 2xl:px-4 bg-transparent"
     :class="props.class"
     :value="renderedRoot.children"
     selection-mode="single"

src/components/rightSidePanel/RightSidePanel.vue

@@ -182,7 +182,7 @@ function handleTitleCancel() {
           <Tab
             v-for="tab in tabs"
             :key="tab.value"
-            class="text-sm py-1 px-2"
+            class="text-sm py-1 px-2 font-inter"
             :value="tab.value"
           >
             {{ tab.label() }}

src/components/sidebar/tabs/AssetSidebarTemplate.vue

@@ -1,36 +0,0 @@
-<template>
-  <div
-    class="flex h-full flex-col bg-interface-panel-surface"
-    :class="props.class"
-  >
-    <div>
-      <div
-        v-if="slots.top"
-        class="flex min-h-12 items-center border-b border-interface-stroke px-4 py-2"
-      >
-        <slot name="top" />
-      </div>
-      <div v-if="slots.header" class="px-4 pb-4">
-        <slot name="header" />
-      </div>
-    </div>
-    <!-- min-h-0 to force scrollpanel to grow -->
-    <ScrollPanel class="min-h-0 grow">
-      <slot name="body" />
-    </ScrollPanel>
-    <div v-if="slots.footer">
-      <slot name="footer" />
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import ScrollPanel from 'primevue/scrollpanel'
-import { useSlots } from 'vue'
-
-const props = defineProps<{
-  class?: string
-}>()
-
-const slots = useSlots()
-</script>

src/components/sidebar/tabs/AssetsSidebarTab.vue

@@ -1,19 +1,21 @@
 <template>
-  <AssetsSidebarTemplate>
-    <template #top>
-      <span v-if="!isInFolderView" class="font-bold">
-        {{ $t('sideToolbar.mediaAssets.title') }}
-      </span>
-      <div v-else class="flex w-full items-center justify-between gap-2">
+  <SidebarTabTemplate
+    :title="isInFolderView ? '' : $t('sideToolbar.mediaAssets.title')"
+  >
+    <template #alt-title>
+      <div
+        v-if="isInFolderView"
+        class="flex w-full items-center justify-between gap-2"
+      >
         <div class="flex items-center gap-2">
-          <span class="font-bold">{{ $t('Job ID') }}:</span>
+          <span class="font-bold">{{ $t('assetBrowser.jobId') }}:</span>
           <span class="text-sm">{{ folderPromptId?.substring(0, 8) }}</span>
           <button
             class="m-0 cursor-pointer border-0 bg-transparent p-0 outline-0"
             role="button"
             @click="copyJobId"
           >
-            <i class="mb-1 icon-[lucide--copy] text-sm"></i>
+            <i class="icon-[lucide--copy] text-sm"></i>
           </button>
         </div>
         <div>
@@ -23,7 +25,7 @@
     </template>
     <template #header>
       <!-- Job Detail View Header -->
-      <div v-if="isInFolderView" class="pt-4 pb-2">
+      <div v-if="isInFolderView" class="px-2 2xl:px-4">
         <IconTextButton
           :label="$t('sideToolbar.backToAssets')"
           type="secondary"
@@ -35,15 +37,20 @@
         </IconTextButton>
       </div>
       <!-- Normal Tab View -->
-      <TabList v-else v-model="activeTab" class="pt-4 pb-1">
-        <Tab value="output">{{ $t('sideToolbar.labels.generated') }}</Tab>
-        <Tab value="input">{{ $t('sideToolbar.labels.imported') }}</Tab>
+      <TabList v-else v-model="activeTab" class="font-inter px-2 2xl:px-4">
+        <Tab class="font-inter" value="output">{{
+          $t('sideToolbar.labels.generated')
+        }}</Tab>
+        <Tab class="font-inter" value="input">{{
+          $t('sideToolbar.labels.imported')
+        }}</Tab>
       </TabList>
       <!-- Filter Bar -->
       <MediaAssetFilterBar
         v-model:search-query="searchQuery"
         v-model:sort-by="sortBy"
         v-model:media-type-filters="mediaTypeFilters"
+        class="pb-1 px-2 2xl:px-4"
         :show-generation-time-sort="activeTab === 'output'"
       />
     </template>
@@ -158,7 +165,7 @@
         </div>
       </div>
     </template>
-  </AssetsSidebarTemplate>
+  </SidebarTabTemplate>
   <ResultGallery
     v-model:active-index="galleryActiveIndex"
     :all-gallery-items="galleryItems"
@@ -177,6 +184,7 @@ import TextButton from '@/components/button/TextButton.vue'
 import NoResultsPlaceholder from '@/components/common/NoResultsPlaceholder.vue'
 import VirtualGrid from '@/components/common/VirtualGrid.vue'
 import Load3dViewerContent from '@/components/load3d/Load3dViewerContent.vue'
+import SidebarTabTemplate from '@/components/sidebar/tabs/SidebarTabTemplate.vue'
 import ResultGallery from '@/components/sidebar/tabs/queue/ResultGallery.vue'
 import Tab from '@/components/tab/Tab.vue'
 import TabList from '@/components/tab/TabList.vue'
@@ -194,8 +202,6 @@ import { useDialogStore } from '@/stores/dialogStore'
 import { ResultItemImpl } from '@/stores/queueStore'
 import { formatDuration, getMediaTypeFromFilename } from '@/utils/formatUtil'
 
-import AssetsSidebarTemplate from './AssetSidebarTemplate.vue'
-
 const activeTab = ref<'input' | 'output'>('output')
 const folderPromptId = ref<string | null>(null)
 const folderExecutionTime = ref<number | undefined>(undefined)

src/components/sidebar/tabs/ModelLibrarySidebarTab.vue

@@ -1,8 +1,5 @@
 <template>
-  <SidebarTabTemplate
-    :title="$t('sideToolbar.modelLibrary')"
-    class="bg-(--p-tree-background)"
-  >
+  <SidebarTabTemplate :title="$t('sideToolbar.modelLibrary')">
     <template #tool-buttons>
       <Button
         v-tooltip.bottom="$t('g.refresh')"

src/components/sidebar/tabs/NodeLibrarySidebarTab.vue

@@ -3,7 +3,6 @@
     <SidebarTabTemplate
       v-if="!isHelpOpen"
       :title="$t('sideToolbar.nodeLibrary')"
-      class="bg-(--p-tree-background)"
     >
       <template #tool-buttons>
         <Button

src/components/sidebar/tabs/SidebarTabTemplate.vue

@@ -3,12 +3,15 @@
     class="comfy-vue-side-bar-container group/sidebar-tab flex h-full flex-col"
     :class="props.class"
   >
-    <div class="comfy-vue-side-bar-header">
-      <Toolbar class="min-h-8 rounded-none border-x-0 border-t-0 px-2 py-1">
+    <div class="comfy-vue-side-bar-header flex flex-col gap-2">
+      <Toolbar
+        class="min-h-15.5 bg-transparent rounded-none border-x-0 border-t-0 px-2 2xl:px-4"
+      >
         <template #start>
-          <span class="truncate text-xs 2xl:text-sm" :title="props.title">
-            {{ props.title.toUpperCase() }}
+          <span class="truncate font-bold" :title="props.title">
+            {{ props.title }}
           </span>
+          <slot name="alt-title" />
         </template>
         <template #end>
           <div

src/components/sidebar/tabs/WorkflowsSidebarTab.vue

@@ -1,7 +1,7 @@
 <template>
   <SidebarTabTemplate
     :title="$t('sideToolbar.workflows')"
-    class="workflows-sidebar-tab bg-(--p-tree-background)"
+    class="workflows-sidebar-tab"
   >
     <template #tool-buttons>
       <Button

src/components/sidebar/tabs/nodeLibrary/NodeHelpPage.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="flex h-full flex-col overflow-auto bg-(--p-tree-background)">
+  <div class="flex h-full flex-col overflow-auto">
     <div
       class="flex items-center border-b border-(--p-divider-color) px-3 py-2"
     >