Floating Menus - UI rework (#5980)

## Summary

Enhancing and further modernizing the UI, giving users more usable area
whilst keeping farmiliar positioning and feel of elements.

## Changes

- **What**: Significant restructure of the UI elements, changing
elements from large blocks to floating elements, updating:
- Side toolbar menu (floating style, supports small/normal mode,
combines to scroll on height overflow)
- Bottom tabs panel (floating style, tabs redesigned)
- Action bar (support for docking/undocking menu)
    - Added login/user menu button to top right
- Restyled breadcrumbs (still collapse when overflows)
- Add litegraph support for fps info position (so it isn't covered by
the sidebar)

- **Breaking**: 
- Removed various elements and added new ones, I have tested custom
sidebars, custom actions, etc but if scripts are inserting elements into
"other" elements they may have been (re)moved.
- Remove support for bottom menu
- Remove support for 2nd-row tabs

## Screenshots 
<img width="1116" height="907" alt="ui"
src="https://github.com/user-attachments/assets/b040a215-67d3-4c88-8c4d-f402a16a34f6"
/>


https://github.com/user-attachments/assets/571dbda5-01ec-47e8-b235-ee1b88c93dd0

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-5980-Floating-Menus-UI-rework-2866d73d3650810aac60cc1afe979b60)
by [Unito](https://www.unito.io)

---------

Co-authored-by: GitHub Action <action@github.com>
Co-authored-by: github-actions <github-actions@github.com>

src/components/bottomPanel/BottomPanel.vue

@@ -3,17 +3,42 @@
     <Tabs
       :key="$i18n.locale"
       v-model:value="bottomPanelStore.activeBottomPanelTabId"
+      style="--p-tabs-tablist-background: var(--comfy-menu-bg)"
     >
-      <TabList pt:tab-list="border-none">
+      <TabList
+        pt:tab-list="border-none h-full flex items-center py-2 border-b-1 border-solid"
+        class="bg-transparent"
+      >
         <div class="flex w-full justify-between">
           <div class="tabs-container">
             <Tab
               v-for="tab in bottomPanelStore.bottomPanelTabs"
               :key="tab.id"
               :value="tab.id"
-              class="border-none p-3"
+              class="m-1 mx-2 border-none"
+              :class="{
+                'tab-list-single-item':
+                  bottomPanelStore.bottomPanelTabs.length === 1
+              }"
+              :pt:root="
+                (x: TabPassThroughMethodOptions) => ({
+                  class: {
+                    'p-3 rounded-lg': true,
+                    'pointer-events-none':
+                      bottomPanelStore.bottomPanelTabs.length === 1
+                  },
+                  style: {
+                    color: 'var(--fg-color)',
+                    backgroundColor:
+                      !x.context.active ||
+                      bottomPanelStore.bottomPanelTabs.length === 1
+                        ? ''
+                        : 'var(--bg-color)'
+                  }
+                })
+              "
             >
-              <span class="font-bold">
+              <span class="font-normal">
                 {{ getTabDisplayTitle(tab) }}
               </span>
             </Tab>
@@ -56,6 +81,7 @@
 <script setup lang="ts">
 import Button from 'primevue/button'
 import Tab from 'primevue/tab'
+import type { TabPassThroughMethodOptions } from 'primevue/tab'
 import TabList from 'primevue/tablist'
 import Tabs from 'primevue/tabs'
 import { computed } from 'vue'
@@ -95,3 +121,9 @@ const closeBottomPanel = () => {
   bottomPanelStore.activePanel = null
 }
 </script>
+
+<style scoped>
+:deep(.p-tablist-active-bar) {
+  display: none;
+}
+</style>

src/components/bottomPanel/tabs/terminal/CommandTerminal.vue

@@ -64,7 +64,6 @@ const terminalCreated = (
 }
 
 :deep(.p-terminal) .xterm-screen {
-  background-color: black;
   overflow-y: hidden;
 }
 </style>

src/components/bottomPanel/tabs/terminal/LogsTerminal.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="h-full w-full bg-black">
+  <div class="h-full w-full bg-transparent">
     <p v-if="errorMessage" class="p-4 text-center">
       {{ errorMessage }}
     </p>
@@ -94,7 +94,6 @@ const terminalCreated = (
 }
 
 :deep(.p-terminal) .xterm-screen {
-  background-color: black;
   overflow-y: hidden;
 }
 </style>