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/sidebar/SideToolbar.vue

@@ -21,19 +21,7 @@
     v-if="selectedTab"
     class="sidebar-content-container h-full overflow-y-auto overflow-x-hidden"
   >
-    <component v-if="selectedTab.type === 'vue'" :is="selectedTab.component" />
-    <div
-      v-else
-      :ref="
-        (el) => {
-          if (el)
-            mountCustomTab(
-              selectedTab as CustomSidebarTabExtension,
-              el as HTMLElement
-            )
-        }
-      "
-    ></div>
+    <ExtensionSlot :extension="selectedTab" />
   </div>
 </template>
 
@@ -41,13 +29,11 @@
 import SidebarIcon from './SidebarIcon.vue'
 import SidebarThemeToggleIcon from './SidebarThemeToggleIcon.vue'
 import SidebarSettingsToggleIcon from './SidebarSettingsToggleIcon.vue'
-import { computed, onBeforeUnmount } from 'vue'
+import ExtensionSlot from '@/components/common/ExtensionSlot.vue'
+import { computed } from 'vue'
 import { useWorkspaceStore } from '@/stores/workspaceStateStore'
 import { useSettingStore } from '@/stores/settingStore'
-import {
-  CustomSidebarTabExtension,
-  SidebarTabExtension
-} from '@/types/extensionTypes'
+import type { SidebarTabExtension } from '@/types/extensionTypes'
 import { useKeybindingStore } from '@/stores/keybindingStore'
 
 const workspaceStore = useWorkspaceStore()
@@ -65,20 +51,9 @@ const isSmall = computed(
 
 const tabs = computed(() => workspaceStore.getSidebarTabs())
 const selectedTab = computed(() => workspaceStore.sidebarTab.activeSidebarTab)
-const mountCustomTab = (tab: CustomSidebarTabExtension, el: HTMLElement) => {
-  tab.render(el)
-}
 const onTabClick = (item: SidebarTabExtension) => {
   workspaceStore.sidebarTab.toggleSidebarTab(item.id)
 }
-onBeforeUnmount(() => {
-  tabs.value.forEach((tab) => {
-    if (tab.type === 'custom' && tab.destroy) {
-      tab.destroy()
-    }
-  })
-})
-
 const keybindingStore = useKeybindingStore()
 const getTabTooltipSuffix = (tab: SidebarTabExtension) => {
   const keybinding = keybindingStore.getKeybindingByCommandId(