Apply new code format standard (#217)

src/components/LiteGraphCanvasSplitterOverlay.vue

@@ -15,17 +15,17 @@
 </template>
 
 <script setup lang="ts">
-import { useWorkspaceStore } from "@/stores/workspaceStateStore";
-import Splitter from "primevue/splitter";
-import SplitterPanel from "primevue/splitterpanel";
-import { computed } from "vue";
+import { useWorkspaceStore } from '@/stores/workspaceStateStore'
+import Splitter from 'primevue/splitter'
+import SplitterPanel from 'primevue/splitterpanel'
+import { computed } from 'vue'
 
 const sideBarPanelVisible = computed(
   () => useWorkspaceStore().activeSidebarTab !== null
-);
+)
 const gutterClass = computed(() => {
-  return sideBarPanelVisible.value ? "" : "gutter-hidden";
-});
+  return sideBarPanelVisible.value ? '' : 'gutter-hidden'
+})
 </script>
 
 <style>

src/components/NodePreview.vue

@@ -19,10 +19,10 @@ https://github.com/Nuked88/ComfyUI-N-Sidebar/blob/7ae7da4a9761009fb6629bc04c6830
         <div class="_sb_col">
           <div v-if="slotInput" :class="['_sb_dot', slotInput.type]"></div>
         </div>
-        <div class="_sb_col">{{ slotInput ? slotInput.name : "" }}</div>
+        <div class="_sb_col">{{ slotInput ? slotInput.name : '' }}</div>
         <div class="_sb_col middle-column"></div>
         <div class="_sb_col _sb_inherit">
-          {{ slotOutput ? slotOutput.name : "" }}
+          {{ slotOutput ? slotOutput.name : '' }}
         </div>
         <div class="_sb_col">
           <div v-if="slotOutput" :class="['_sb_dot', slotOutput.type]"></div>
@@ -45,40 +45,40 @@ https://github.com/Nuked88/ComfyUI-N-Sidebar/blob/7ae7da4a9761009fb6629bc04c6830
 </template>
 
 <script setup lang="ts">
-import { app } from "@/scripts/app";
-import { type ComfyNodeDef } from "@/types/apiTypes";
-import _ from "lodash";
-import { PropType } from "vue";
+import { app } from '@/scripts/app'
+import { type ComfyNodeDef } from '@/types/apiTypes'
+import _ from 'lodash'
+import { PropType } from 'vue'
 
 const props = defineProps({
   nodeDef: {
     type: Object as PropType<ComfyNodeDef>,
-    required: true,
-  },
-});
+    required: true
+  }
+})
 
-const nodeDef = props.nodeDef as ComfyNodeDef;
+const nodeDef = props.nodeDef as ComfyNodeDef
 
 // --------------------------------------------------
 // TODO: Move out to separate file
 interface IComfyNodeInputDef {
-  name: string;
-  type: string;
-  widgetType: string | null;
-  defaultValue: any;
+  name: string
+  type: string
+  widgetType: string | null
+  defaultValue: any
 }
 
 interface IComfyNodeOutputDef {
-  name: string | null;
-  type: string;
-  isList: boolean;
+  name: string | null
+  type: string
+  isList: boolean
 }
 
 const allInputs = Object.assign(
   {},
   nodeDef.input.required || {},
   nodeDef.input.optional || {}
-);
+)
 const allInputDefs: IComfyNodeInputDef[] = Object.entries(allInputs).map(
   ([inputName, inputData]) => {
     return {
@@ -87,10 +87,10 @@ const allInputDefs: IComfyNodeInputDef[] = Object.entries(allInputs).map(
       widgetType: app.getWidgetType(inputData, inputName),
       defaultValue:
         inputData[1]?.default ||
-        (inputData[0] instanceof Array ? inputData[0][0] : ""),
-    };
+        (inputData[0] instanceof Array ? inputData[0][0] : '')
+    }
   }
-);
+)
 
 const allOutputDefs: IComfyNodeOutputDef[] = _.zip(
   nodeDef.output,
@@ -99,13 +99,13 @@ const allOutputDefs: IComfyNodeOutputDef[] = _.zip(
 ).map(([outputType, outputName, isList]) => {
   return {
     name: outputName,
-    type: outputType instanceof Array ? "COMBO" : outputType,
-    isList: isList,
-  };
-});
+    type: outputType instanceof Array ? 'COMBO' : outputType,
+    isList: isList
+  }
+})
 
-const slotInputDefs = allInputDefs.filter((input) => !input.widgetType);
-const widgetInputDefs = allInputDefs.filter((input) => !!input.widgetType);
+const slotInputDefs = allInputDefs.filter((input) => !input.widgetType)
+const widgetInputDefs = allInputDefs.filter((input) => !!input.widgetType)
 </script>
 
 <style scoped>
@@ -174,7 +174,7 @@ const widgetInputDefs = allInputDefs.filter((input) => !!input.widgetType);
 
 ._sb_node_preview {
   background-color: var(--comfy-menu-bg);
-  font-family: "Open Sans", sans-serif;
+  font-family: 'Open Sans', sans-serif;
   font-size: small;
   color: var(--descrip-text);
   border: 1px solid var(--descrip-text);

src/components/NodeSearchBox.vue

@@ -53,73 +53,73 @@
 </template>
 
 <script setup lang="ts">
-import { computed, inject, onMounted, Ref, ref } from "vue";
-import AutoCompletePlus from "./primevueOverride/AutoCompletePlus.vue";
-import Chip from "primevue/chip";
-import Badge from "primevue/badge";
-import NodeSearchFilter from "@/components/NodeSearchFilter.vue";
-import NodeSourceChip from "@/components/NodeSourceChip.vue";
-import { ComfyNodeDef } from "@/types/apiTypes";
-import { type FilterAndValue } from "@/services/nodeSearchService";
-import NodePreview from "./NodePreview.vue";
-import { useNodeDefStore } from "@/stores/nodeDefStore";
+import { computed, inject, onMounted, Ref, ref } from 'vue'
+import AutoCompletePlus from './primevueOverride/AutoCompletePlus.vue'
+import Chip from 'primevue/chip'
+import Badge from 'primevue/badge'
+import NodeSearchFilter from '@/components/NodeSearchFilter.vue'
+import NodeSourceChip from '@/components/NodeSourceChip.vue'
+import { ComfyNodeDef } from '@/types/apiTypes'
+import { type FilterAndValue } from '@/services/nodeSearchService'
+import NodePreview from './NodePreview.vue'
+import { useNodeDefStore } from '@/stores/nodeDefStore'
 
 const props = defineProps({
   filters: {
-    type: Array<FilterAndValue>,
+    type: Array<FilterAndValue>
   },
   searchLimit: {
     type: Number,
-    default: 64,
-  },
-});
+    default: 64
+  }
+})
 
-const inputId = `comfy-vue-node-search-box-input-${Math.random()}`;
-const suggestions = ref<ComfyNodeDef[]>([]);
-const hoveredSuggestion = ref<ComfyNodeDef | null>(null);
+const inputId = `comfy-vue-node-search-box-input-${Math.random()}`
+const suggestions = ref<ComfyNodeDef[]>([])
+const hoveredSuggestion = ref<ComfyNodeDef | null>(null)
 const placeholder = computed(() => {
-  return props.filters.length === 0 ? "Search for nodes" : "";
-});
+  return props.filters.length === 0 ? 'Search for nodes' : ''
+})
 
 const search = (query: string) => {
   suggestions.value = useNodeDefStore().nodeSearchService.searchNode(
     query,
     props.filters,
     {
-      limit: props.searchLimit,
+      limit: props.searchLimit
     }
-  );
-};
+  )
+}
 
-const emit = defineEmits(["addFilter", "removeFilter", "addNode"]);
+const emit = defineEmits(['addFilter', 'removeFilter', 'addNode'])
 
 const reFocusInput = () => {
-  const inputElement = document.getElementById(inputId) as HTMLInputElement;
+  const inputElement = document.getElementById(inputId) as HTMLInputElement
   if (inputElement) {
-    inputElement.blur();
-    inputElement.focus();
+    inputElement.blur()
+    inputElement.focus()
   }
-};
+}
 
-onMounted(reFocusInput);
+onMounted(reFocusInput)
 const onAddFilter = (filterAndValue: FilterAndValue) => {
-  emit("addFilter", filterAndValue);
-  reFocusInput();
-};
+  emit('addFilter', filterAndValue)
+  reFocusInput()
+}
 const onRemoveFilter = (event: Event, filterAndValue: FilterAndValue) => {
-  event.stopPropagation();
-  event.preventDefault();
-  emit("removeFilter", filterAndValue);
-  reFocusInput();
-};
+  event.stopPropagation()
+  event.preventDefault()
+  emit('removeFilter', filterAndValue)
+  reFocusInput()
+}
 const setHoverSuggestion = (index: number) => {
   if (index === -1) {
-    hoveredSuggestion.value = null;
-    return;
+    hoveredSuggestion.value = null
+    return
   }
-  const value = suggestions.value[index];
-  hoveredSuggestion.value = value;
-};
+  const value = suggestions.value[index]
+  hoveredSuggestion.value = value
+}
 </script>
 
 <style scoped>

src/components/NodeSearchBoxPopover.vue

@@ -21,142 +21,142 @@
 </template>
 
 <script setup lang="ts">
-import { app } from "@/scripts/app";
-import { inject, onMounted, onUnmounted, reactive, Ref, ref } from "vue";
-import NodeSearchBox from "./NodeSearchBox.vue";
-import Dialog from "primevue/dialog";
+import { app } from '@/scripts/app'
+import { inject, onMounted, onUnmounted, reactive, Ref, ref } from 'vue'
+import NodeSearchBox from './NodeSearchBox.vue'
+import Dialog from 'primevue/dialog'
 import {
   INodeSlot,
   LiteGraph,
   LiteGraphCanvasEvent,
   LGraphNode,
-  LinkReleaseContext,
-} from "@comfyorg/litegraph";
-import { FilterAndValue } from "@/services/nodeSearchService";
-import { ComfyNodeDef } from "@/types/apiTypes";
-import { useNodeDefStore } from "@/stores/nodeDefStore";
+  LinkReleaseContext
+} from '@comfyorg/litegraph'
+import { FilterAndValue } from '@/services/nodeSearchService'
+import { ComfyNodeDef } from '@/types/apiTypes'
+import { useNodeDefStore } from '@/stores/nodeDefStore'
 
 interface LiteGraphPointerEvent extends Event {
-  canvasX: number;
-  canvasY: number;
+  canvasX: number
+  canvasY: number
 }
 
-const visible = ref(false);
-const dismissable = ref(true);
-const triggerEvent = ref<LiteGraphCanvasEvent | null>(null);
+const visible = ref(false)
+const dismissable = ref(true)
+const triggerEvent = ref<LiteGraphCanvasEvent | null>(null)
 const getNewNodeLocation = (): [number, number] => {
   if (triggerEvent.value === null) {
-    return [100, 100];
+    return [100, 100]
   }
 
   const originalEvent = triggerEvent.value.detail
-    .originalEvent as LiteGraphPointerEvent;
-  return [originalEvent.canvasX, originalEvent.canvasY];
-};
-const nodeFilters = reactive([]);
+    .originalEvent as LiteGraphPointerEvent
+  return [originalEvent.canvasX, originalEvent.canvasY]
+}
+const nodeFilters = reactive([])
 const addFilter = (filter: FilterAndValue) => {
-  nodeFilters.push(filter);
-};
+  nodeFilters.push(filter)
+}
 const removeFilter = (filter: FilterAndValue) => {
-  const index = nodeFilters.findIndex((f) => f === filter);
+  const index = nodeFilters.findIndex((f) => f === filter)
   if (index !== -1) {
-    nodeFilters.splice(index, 1);
+    nodeFilters.splice(index, 1)
   }
-};
+}
 const clearFilters = () => {
-  nodeFilters.splice(0, nodeFilters.length);
-};
+  nodeFilters.splice(0, nodeFilters.length)
+}
 const closeDialog = () => {
-  visible.value = false;
-};
+  visible.value = false
+}
 const connectNodeOnLinkRelease = (
   node: LGraphNode,
   context: LinkReleaseContext
 ) => {
-  const destIsInput = context.node_from !== undefined;
+  const destIsInput = context.node_from !== undefined
   const srcNode = (
     destIsInput ? context.node_from : context.node_to
-  ) as LGraphNode;
-  const srcSlotIndex: number = context.slot_from.slot_index;
+  ) as LGraphNode
+  const srcSlotIndex: number = context.slot_from.slot_index
   const linkDataType = destIsInput
     ? context.type_filter_in
-    : context.type_filter_out;
-  const destSlots = destIsInput ? node.inputs : node.outputs;
+    : context.type_filter_out
+  const destSlots = destIsInput ? node.inputs : node.outputs
   const destSlotIndex = destSlots.findIndex(
     (slot: INodeSlot) => slot.type === linkDataType
-  );
+  )
 
   if (destSlotIndex === -1) {
     console.warn(
       `Could not find slot with type ${linkDataType} on node ${node.title}`
-    );
-    return;
+    )
+    return
   }
 
   if (destIsInput) {
-    srcNode.connect(srcSlotIndex, node, destSlotIndex);
+    srcNode.connect(srcSlotIndex, node, destSlotIndex)
   } else {
-    node.connect(destSlotIndex, srcNode, srcSlotIndex);
+    node.connect(destSlotIndex, srcNode, srcSlotIndex)
   }
-};
+}
 const addNode = (nodeDef: ComfyNodeDef) => {
-  closeDialog();
-  const node = LiteGraph.createNode(nodeDef.name, nodeDef.display_name, {});
+  closeDialog()
+  const node = LiteGraph.createNode(nodeDef.name, nodeDef.display_name, {})
   if (node) {
-    node.pos = getNewNodeLocation();
-    app.graph.add(node);
+    node.pos = getNewNodeLocation()
+    app.graph.add(node)
 
-    const eventDetail = triggerEvent.value.detail;
-    if (eventDetail.subType === "empty-release") {
-      connectNodeOnLinkRelease(node, eventDetail.linkReleaseContext);
+    const eventDetail = triggerEvent.value.detail
+    if (eventDetail.subType === 'empty-release') {
+      connectNodeOnLinkRelease(node, eventDetail.linkReleaseContext)
     }
   }
-};
+}
 
 const canvasEventHandler = (e: LiteGraphCanvasEvent) => {
-  const shiftPressed = (e.detail.originalEvent as KeyboardEvent).shiftKey;
+  const shiftPressed = (e.detail.originalEvent as KeyboardEvent).shiftKey
   // Ignore empty releases unless shift is pressed
   // Empty release without shift is trigger right click menu
-  if (e.detail.subType === "empty-release" && !shiftPressed) {
-    return;
+  if (e.detail.subType === 'empty-release' && !shiftPressed) {
+    return
   }
 
-  if (e.detail.subType === "empty-release") {
-    const destIsInput = e.detail.linkReleaseContext.node_from !== undefined;
+  if (e.detail.subType === 'empty-release') {
+    const destIsInput = e.detail.linkReleaseContext.node_from !== undefined
     const filter = useNodeDefStore().nodeSearchService.getFilterById(
-      destIsInput ? "input" : "output"
-    );
+      destIsInput ? 'input' : 'output'
+    )
 
     const value = destIsInput
       ? e.detail.linkReleaseContext.type_filter_in
-      : e.detail.linkReleaseContext.type_filter_out;
+      : e.detail.linkReleaseContext.type_filter_out
 
-    addFilter([filter, value]);
+    addFilter([filter, value])
   }
-  triggerEvent.value = e;
-  visible.value = true;
+  triggerEvent.value = e
+  visible.value = true
   // Prevent the dialog from being dismissed immediately
-  dismissable.value = false;
+  dismissable.value = false
   setTimeout(() => {
-    dismissable.value = true;
-  }, 300);
-};
+    dismissable.value = true
+  }, 300)
+}
 
 const handleEscapeKeyPress = (event) => {
-  if (event.key === "Escape") {
-    closeDialog();
+  if (event.key === 'Escape') {
+    closeDialog()
   }
-};
+}
 
 onMounted(() => {
-  document.addEventListener("litegraph:canvas", canvasEventHandler);
-  document.addEventListener("keydown", handleEscapeKeyPress);
-});
+  document.addEventListener('litegraph:canvas', canvasEventHandler)
+  document.addEventListener('keydown', handleEscapeKeyPress)
+})
 
 onUnmounted(() => {
-  document.removeEventListener("litegraph:canvas", canvasEventHandler);
-  document.removeEventListener("keydown", handleEscapeKeyPress);
-});
+  document.removeEventListener('litegraph:canvas', canvasEventHandler)
+  document.removeEventListener('keydown', handleEscapeKeyPress)
+})
 </script>
 
 <style>

src/components/NodeSearchFilter.vue

@@ -34,52 +34,52 @@
 </template>
 
 <script setup lang="ts">
-import { NodeFilter, type FilterAndValue } from "@/services/nodeSearchService";
-import Button from "primevue/button";
-import Dialog from "primevue/dialog";
-import SelectButton from "primevue/selectbutton";
-import AutoComplete from "primevue/autocomplete";
-import { ref, onMounted } from "vue";
-import { useNodeDefStore } from "@/stores/nodeDefStore";
+import { NodeFilter, type FilterAndValue } from '@/services/nodeSearchService'
+import Button from 'primevue/button'
+import Dialog from 'primevue/dialog'
+import SelectButton from 'primevue/selectbutton'
+import AutoComplete from 'primevue/autocomplete'
+import { ref, onMounted } from 'vue'
+import { useNodeDefStore } from '@/stores/nodeDefStore'
 
-const visible = ref<boolean>(false);
-const filters = ref<NodeFilter[]>([]);
-const selectedFilter = ref<NodeFilter>();
-const filterValues = ref<string[]>([]);
-const selectedFilterValue = ref<string>("");
+const visible = ref<boolean>(false)
+const filters = ref<NodeFilter[]>([])
+const selectedFilter = ref<NodeFilter>()
+const filterValues = ref<string[]>([])
+const selectedFilterValue = ref<string>('')
 
 onMounted(() => {
-  const nodeSearchService = useNodeDefStore().nodeSearchService;
-  filters.value = nodeSearchService.nodeFilters;
-  selectedFilter.value = nodeSearchService.nodeFilters[0];
-});
+  const nodeSearchService = useNodeDefStore().nodeSearchService
+  filters.value = nodeSearchService.nodeFilters
+  selectedFilter.value = nodeSearchService.nodeFilters[0]
+})
 
-const emit = defineEmits(["addFilter"]);
+const emit = defineEmits(['addFilter'])
 
 const updateSelectedFilterValue = () => {
-  updateFilterValues("");
+  updateFilterValues('')
   if (filterValues.value.includes(selectedFilterValue.value)) {
-    return;
+    return
   }
-  selectedFilterValue.value = filterValues.value[0];
-};
+  selectedFilterValue.value = filterValues.value[0]
+}
 
 const updateFilterValues = (query: string) => {
-  filterValues.value = selectedFilter.value.fuseSearch.search(query);
-};
+  filterValues.value = selectedFilter.value.fuseSearch.search(query)
+}
 
 const submit = () => {
-  visible.value = false;
-  emit("addFilter", [
+  visible.value = false
+  emit('addFilter', [
     selectedFilter.value,
-    selectedFilterValue.value,
-  ] as FilterAndValue);
-};
+    selectedFilterValue.value
+  ] as FilterAndValue)
+}
 
 const showModal = () => {
-  updateSelectedFilterValue();
-  visible.value = true;
-};
+  updateSelectedFilterValue()
+  visible.value = true
+}
 </script>
 
 <style scoped>

src/components/NodeSourceChip.vue

@@ -5,18 +5,18 @@
 </template>
 
 <script setup lang="ts">
-import { getNodeSource } from "@/types/nodeSource";
-import Chip from "primevue/chip";
-import { computed } from "vue";
+import { getNodeSource } from '@/types/nodeSource'
+import Chip from 'primevue/chip'
+import { computed } from 'vue'
 
 const props = defineProps({
   python_module: {
     type: String,
-    required: true,
-  },
-});
+    required: true
+  }
+})
 
-const nodeSource = computed(() => getNodeSource(props.python_module));
+const nodeSource = computed(() => getNodeSource(props.python_module))
 </script>
 
 <style scoped>

src/components/primevueOverride/AutoCompletePlus.vue

@@ -1,14 +1,14 @@
 <!-- Auto complete with extra event "focused-option-changed" -->
 <script>
-import AutoComplete from "primevue/autocomplete";
+import AutoComplete from 'primevue/autocomplete'
 
 export default {
-  name: "AutoCompletePlus",
+  name: 'AutoCompletePlus',
   extends: AutoComplete,
-  emits: ["focused-option-changed"],
+  emits: ['focused-option-changed'],
   mounted() {
-    if (typeof AutoComplete.mounted === "function") {
-      AutoComplete.mounted.call(this);
+    if (typeof AutoComplete.mounted === 'function') {
+      AutoComplete.mounted.call(this)
     }
 
     // Add a watcher on the focusedOptionIndex property
@@ -16,9 +16,9 @@ export default {
       () => this.focusedOptionIndex,
       (newVal, oldVal) => {
         // Emit a custom event when focusedOptionIndex changes
-        this.$emit("focused-option-changed", newVal);
+        this.$emit('focused-option-changed', newVal)
       }
-    );
-  },
-};
+    )
+  }
+}
 </script>

src/components/sidebar/SideBarIcon.vue

@@ -9,7 +9,7 @@
           ? 'p-button-primary side-bar-button-selected'
           : 'p-button-secondary'
       }`,
-      icon: 'side-bar-button-icon',
+      icon: 'side-bar-button-icon'
     }"
     @click="emit('click', $event)"
     v-tooltip="{ value: props.tooltip, showDelay: 300, hideDelay: 300 }"
@@ -17,22 +17,22 @@
 </template>
 
 <script setup lang="ts">
-import Button from "primevue/button";
+import Button from 'primevue/button'
 
 const props = defineProps({
   icon: String,
   selected: Boolean,
   tooltip: {
     type: String,
-    default: "",
+    default: ''
   },
   class: {
     type: String,
-    default: "",
-  },
-});
+    default: ''
+  }
+})
 
-const emit = defineEmits(["click"]);
+const emit = defineEmits(['click'])
 </script>
 
 <style>

src/components/sidebar/SideBarSettingsToggleIcon.vue

@@ -7,10 +7,10 @@
 </template>
 
 <script setup lang="ts">
-import { app } from "@/scripts/app";
-import SideBarIcon from "./SideBarIcon.vue";
+import { app } from '@/scripts/app'
+import SideBarIcon from './SideBarIcon.vue'
 
 const showSetting = () => {
-  app.ui.settings.show();
-};
+  app.ui.settings.show()
+}
 </script>

src/components/sidebar/SideBarThemeToggleIcon.vue

@@ -8,23 +8,23 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref } from "vue";
-import SideBarIcon from "./SideBarIcon.vue";
-import { useSettingStore } from "@/stores/settingStore";
+import { computed, ref } from 'vue'
+import SideBarIcon from './SideBarIcon.vue'
+import { useSettingStore } from '@/stores/settingStore'
 
-const previousDarkTheme = ref("dark");
+const previousDarkTheme = ref('dark')
 const currentTheme = computed(() =>
-  useSettingStore().get("Comfy.ColorPalette", "dark")
-);
-const isDarkMode = computed(() => currentTheme.value !== "light");
-const icon = computed(() => (isDarkMode.value ? "pi pi-moon" : "pi pi-sun"));
+  useSettingStore().get('Comfy.ColorPalette', 'dark')
+)
+const isDarkMode = computed(() => currentTheme.value !== 'light')
+const icon = computed(() => (isDarkMode.value ? 'pi pi-moon' : 'pi pi-sun'))
 
 const toggleTheme = () => {
   if (isDarkMode.value) {
-    previousDarkTheme.value = currentTheme.value;
-    useSettingStore().set("Comfy.ColorPalette", "light");
+    previousDarkTheme.value = currentTheme.value
+    useSettingStore().set('Comfy.ColorPalette', 'light')
   } else {
-    useSettingStore().set("Comfy.ColorPalette", previousDarkTheme.value);
+    useSettingStore().set('Comfy.ColorPalette', previousDarkTheme.value)
   }
-};
+}
 </script>

src/components/sidebar/SideToolBar.vue

@@ -28,55 +28,55 @@
           mountCustomTab(
             selectedTab as CustomSidebarTabExtension,
             el as HTMLElement
-          );
+          )
       }
     "
   ></div>
 </template>
 
 <script setup lang="ts">
-import SideBarIcon from "./SideBarIcon.vue";
-import SideBarThemeToggleIcon from "./SideBarThemeToggleIcon.vue";
-import SideBarSettingsToggleIcon from "./SideBarSettingsToggleIcon.vue";
-import { computed, onBeforeUnmount, watch } from "vue";
-import { useSettingStore } from "@/stores/settingStore";
-import { app } from "@/scripts/app";
-import { useWorkspaceStore } from "@/stores/workspaceStateStore";
+import SideBarIcon from './SideBarIcon.vue'
+import SideBarThemeToggleIcon from './SideBarThemeToggleIcon.vue'
+import SideBarSettingsToggleIcon from './SideBarSettingsToggleIcon.vue'
+import { computed, onBeforeUnmount, watch } from 'vue'
+import { useSettingStore } from '@/stores/settingStore'
+import { app } from '@/scripts/app'
+import { useWorkspaceStore } from '@/stores/workspaceStateStore'
 import {
   CustomSidebarTabExtension,
-  SidebarTabExtension,
-} from "@/types/extensionTypes";
+  SidebarTabExtension
+} from '@/types/extensionTypes'
 
-const workspaceStateStore = useWorkspaceStore();
-const tabs = computed(() => app.extensionManager.getSidebarTabs());
+const workspaceStateStore = useWorkspaceStore()
+const tabs = computed(() => app.extensionManager.getSidebarTabs())
 const selectedTab = computed<SidebarTabExtension | null>(() => {
-  const tabId = workspaceStateStore.activeSidebarTab;
-  return tabs.value.find((tab) => tab.id === tabId) || null;
-});
+  const tabId = workspaceStateStore.activeSidebarTab
+  return tabs.value.find((tab) => tab.id === tabId) || null
+})
 const mountCustomTab = (tab: CustomSidebarTabExtension, el: HTMLElement) => {
-  tab.render(el);
-};
+  tab.render(el)
+}
 const onTabClick = (item: SidebarTabExtension) => {
   workspaceStateStore.updateActiveSidebarTab(
     workspaceStateStore.activeSidebarTab === item.id ? null : item.id
-  );
-};
+  )
+}
 
 const betaMenuEnabled = computed(
-  () => useSettingStore().get("Comfy.UseNewMenu") !== "Disabled"
-);
+  () => useSettingStore().get('Comfy.UseNewMenu') !== 'Disabled'
+)
 watch(betaMenuEnabled, (newValue) => {
   if (!newValue) {
-    workspaceStateStore.updateActiveSidebarTab(null);
+    workspaceStateStore.updateActiveSidebarTab(null)
   }
-});
+})
 onBeforeUnmount(() => {
   tabs.value.forEach((tab) => {
-    if (tab.type === "custom" && tab.destroy) {
-      tab.destroy();
+    if (tab.type === 'custom' && tab.destroy) {
+      tab.destroy()
     }
-  });
-});
+  })
+})
 </script>
 
 <style>

src/components/sidebar/tabs/QueueSideBarTab.vue

@@ -26,11 +26,11 @@
     <Column
       :pt="{
         headerCell: {
-          class: 'queue-tool-header-cell',
+          class: 'queue-tool-header-cell'
         },
         bodyCell: {
-          class: 'queue-tool-body-cell',
-        },
+          class: 'queue-tool-body-cell'
+        }
       }"
     >
       <template #header>
@@ -67,89 +67,89 @@
 </template>
 
 <script setup lang="ts">
-import DataTable from "primevue/datatable";
-import Column from "primevue/column";
-import Tag from "primevue/tag";
-import Button from "primevue/button";
-import ConfirmPopup from "primevue/confirmpopup";
-import Toast from "primevue/toast";
-import Message from "primevue/message";
-import { useConfirm } from "primevue/useconfirm";
-import { useToast } from "primevue/usetoast";
+import DataTable from 'primevue/datatable'
+import Column from 'primevue/column'
+import Tag from 'primevue/tag'
+import Button from 'primevue/button'
+import ConfirmPopup from 'primevue/confirmpopup'
+import Toast from 'primevue/toast'
+import Message from 'primevue/message'
+import { useConfirm } from 'primevue/useconfirm'
+import { useToast } from 'primevue/usetoast'
 import {
   TaskItemDisplayStatus,
   TaskItemImpl,
-  useQueueStore,
-} from "@/stores/queueStore";
-import { computed, onMounted } from "vue";
-import { api } from "@/scripts/api";
+  useQueueStore
+} from '@/stores/queueStore'
+import { computed, onMounted } from 'vue'
+import { api } from '@/scripts/api'
 
-const confirm = useConfirm();
-const toast = useToast();
-const queueStore = useQueueStore();
+const confirm = useConfirm()
+const toast = useToast()
+const queueStore = useQueueStore()
 
-const tasks = computed(() => queueStore.tasks);
+const tasks = computed(() => queueStore.tasks)
 const taskTagSeverity = (status: TaskItemDisplayStatus) => {
   switch (status) {
     case TaskItemDisplayStatus.Pending:
-      return "secondary";
+      return 'secondary'
     case TaskItemDisplayStatus.Running:
-      return "info";
+      return 'info'
     case TaskItemDisplayStatus.Completed:
-      return "success";
+      return 'success'
     case TaskItemDisplayStatus.Failed:
-      return "danger";
+      return 'danger'
     case TaskItemDisplayStatus.Cancelled:
-      return "warning";
+      return 'warning'
   }
-};
+}
 const formatTime = (time?: number) => {
   if (time === undefined) {
-    return "";
+    return ''
   }
-  return `${time.toFixed(2)}s`;
-};
+  return `${time.toFixed(2)}s`
+}
 const removeTask = (task: TaskItemImpl) => {
   if (task.isRunning) {
-    api.interrupt();
+    api.interrupt()
   }
-  queueStore.delete(task);
-};
+  queueStore.delete(task)
+}
 const removeAllTasks = async () => {
-  await queueStore.clear();
-};
+  await queueStore.clear()
+}
 const confirmRemoveAll = (event) => {
   confirm.require({
     target: event.currentTarget,
-    message: "Do you want to delete all tasks?",
-    icon: "pi pi-info-circle",
+    message: 'Do you want to delete all tasks?',
+    icon: 'pi pi-info-circle',
     rejectProps: {
-      label: "Cancel",
-      severity: "secondary",
-      outlined: true,
+      label: 'Cancel',
+      severity: 'secondary',
+      outlined: true
     },
     acceptProps: {
-      label: "Delete",
-      severity: "danger",
+      label: 'Delete',
+      severity: 'danger'
     },
     accept: async () => {
-      await removeAllTasks();
+      await removeAllTasks()
       toast.add({
-        severity: "info",
-        summary: "Confirmed",
-        detail: "Tasks deleted",
-        life: 3000,
-      });
-    },
-  });
-};
+        severity: 'info',
+        summary: 'Confirmed',
+        detail: 'Tasks deleted',
+        life: 3000
+      })
+    }
+  })
+}
 onMounted(() => {
-  api.addEventListener("status", () => {
-    queueStore.update();
-  });
+  api.addEventListener('status', () => {
+    queueStore.update()
+  })
 
-  queueStore.update();
-});
+  queueStore.update()
+})
 </script>
 
 <style>