v1.2.0 Side Bar & Menu rework (#189)

* Basic side tool bar skeleton + Theme toggle (#164)

* Side bar skeleton

* Fix grid layout

* nit

* Add theme toggle logic

* Change primevue color theme to blue to match beta menu UI

* Add litegraph canvas splitter overlay (#177)

* Add vue wrapper

* Splitter overlay

* Move teleport to side bar comp

* Toolbar placeholder

* Move settings button from top menu to side bar (#178)

* Reverse relationship between splitter overlay and sidebar component (#180)

* Reverse relationship between splitter overlay and sidebar component

* nit

* Remove border on splitter

* Fix canvas shift (#186)

* Move queue/history display to side bar (#185)

* Side bar placeholder

* Pinia store for queue items

* Flatten task item

* Fix schema

* computed

* Switch running / pending order

* Use class-transformer

* nit

* Show display status

* Add tag severity style

* Add execution time

* nit

* Rename to execution success

* Add time display

* Sort queue desc order

* nit

* Add remove item feature

* Load workflow

* Add confirmation popup

* Add empty table placeholder

* Remove beta menu UI's queue button/list

* Add tests on litegraph widget text truncate (#191)

* Add tests on litegraph widget text truncate

* Updated screenshots

* Revert port change

* Remove screenshots

* Update test expectations [skip ci]

* Add back menu.settingsGroup for compatibility (#192)

* Close side bar on menu location set as disabled (#194)

* Remove placeholder side bar tabs (#196)

---------

Co-authored-by: bymyself <abolkonsky.rem@gmail.com>
Co-authored-by: github-actions <github-actions@github.com>

src/components/LiteGraphCanvasSplitterOverlay.vue

@@ -0,0 +1,58 @@
+<template>
+  <Splitter class="splitter-overlay" :pt:gutter="gutterClass">
+    <SplitterPanel
+      class="side-bar-panel"
+      :minSize="10"
+      :size="20"
+      v-show="sideBarPanelVisible"
+    >
+      <slot name="side-bar-panel" :setPanelVisible="setPanelVisible"></slot>
+    </SplitterPanel>
+    <SplitterPanel class="graph-canvas-panel" :size="100">
+      <div></div>
+    </SplitterPanel>
+  </Splitter>
+</template>
+
+<script setup lang="ts">
+import Splitter from "primevue/splitter";
+import SplitterPanel from "primevue/splitterpanel";
+import { computed, ref } from "vue";
+
+const sideBarPanelVisible = ref(false);
+const setPanelVisible = (visible: boolean) => {
+  sideBarPanelVisible.value = visible;
+};
+const gutterClass = computed(() => {
+  return sideBarPanelVisible.value ? "" : "gutter-hidden";
+});
+</script>
+
+<style>
+.p-splitter-gutter {
+  pointer-events: auto;
+}
+
+.gutter-hidden {
+  display: none !important;
+}
+</style>
+
+<style scoped>
+.side-bar-panel {
+  background-color: var(--bg-color);
+  pointer-events: auto;
+}
+
+.splitter-overlay {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  background-color: transparent;
+  pointer-events: none;
+  z-index: 10;
+  border: none;
+}
+</style>