Add bottom panel support (#1294)

* Add bottom panel

* Bottom panel store

* Extract ExtensionSlot component

* Tab rendering

* Add toggle button on top menu bar

* nit

* Add toggle button tooltip

* Add command

src/components/topbar/BottomPanelToggleButton.vue

@@ -0,0 +1,23 @@
+<template>
+  <Button
+    v-show="bottomPanelStore.bottomPanelTabs.length > 0"
+    severity="secondary"
+    text
+    @click="bottomPanelStore.toggleBottomPanel"
+    v-tooltip="{ value: $t('menu.toggleBottomPanel'), showDelay: 300 }"
+  >
+    <template #icon>
+      <i-material-symbols:dock-to-bottom
+        v-if="bottomPanelStore.bottomPanelVisible"
+      />
+      <i-material-symbols:dock-to-bottom-outline v-else />
+    </template>
+  </Button>
+</template>
+
+<script setup lang="ts">
+import { useBottomPanelStore } from '@/stores/workspace/bottomPanelStore'
+import Button from 'primevue/button'
+
+const bottomPanelStore = useBottomPanelStore()
+</script>

src/components/topbar/TopMenubar.vue

@@ -14,6 +14,7 @@
       </div>
       <div class="comfyui-menu-right" ref="menuRight"></div>
       <Actionbar />
+      <BottomPanelToggleButton />
     </div>
   </teleport>
 </template>
@@ -23,6 +24,7 @@ import Divider from 'primevue/divider'
 import WorkflowTabs from '@/components/topbar/WorkflowTabs.vue'
 import CommandMenubar from '@/components/topbar/CommandMenubar.vue'
 import Actionbar from '@/components/actionbar/ComfyActionbar.vue'
+import BottomPanelToggleButton from '@/components/topbar/BottomPanelToggleButton.vue'
 import { computed, onMounted, provide, ref } from 'vue'
 import { useSettingStore } from '@/stores/settingStore'
 import { app } from '@/scripts/app'