Rename SideBar to Sidebar (#422)

* Rename SideBar to Sidebar

* rename files

* rename files

README.md

@@ -19,14 +19,14 @@ pause
   <summary>Empty white screen (Fixed by https://github.com/comfyanonymous/ComfyUI/pull/4211)</summary>
 
   ### Behavior
-  After you enable the new frontend in commandline, and open ComfyUI in the browser, you see a blank screen. If you toggle dev tools with F12, you can observe `litegraph.core.js:1` 404 in console messages.
+  After you enable the new frontend in the command line, and open ComfyUI in the browser, you see a blank screen. If you toggle dev tools with F12, you can observe `litegraph.core.js:1` 404 in console messages.
 
   ### Cause
   The browser is caching the `index.html` file previously served from `localhost:8188`.
 
   ### How to fix
   Step 1: Disable cache in devtools
-  
+
   ![image](https://github.com/user-attachments/assets/c0cec519-93b7-49f8-aea1-7adb0aa5b073)
 
   Step 2: Refresh your browser
@@ -67,7 +67,7 @@ https://github.com/user-attachments/assets/4bbca3ee-318f-4cf0-be32-a5a5541066cf
 
 <details>
   <summary>v1.2.7: **Litegraph** drags multiple links with shift pressed</summary>
-  
+
 https://github.com/user-attachments/assets/68826715-bb55-4b2a-be6e-675cfc424afe
 
 https://github.com/user-attachments/assets/c142c43f-2fe9-4030-8196-b3bfd4c6977d
@@ -92,9 +92,9 @@ https://github.com/user-attachments/assets/c142c43f-2fe9-4030-8196-b3bfd4c6977d
 
 ### Node developers API
 <details>
-  <summary>v1.2.4: Extension API to register custom side bar tab</summary>
+  <summary>v1.2.4: Extension API to register custom sidebar tab</summary>
 
-  Extensions now can call following API to register a sidebar tab.
+  Extensions now can call the following API to register a sidebar tab.
 
 ```js
   app.extensionManager.registerSidebarTab({
@@ -109,9 +109,9 @@ https://github.com/user-attachments/assets/c142c43f-2fe9-4030-8196-b3bfd4c6977d
   });
 ```
 
-The list of supported icons can be find here: https://primevue.org/icons/#list
+The list of supported icons can be found here: <https://primevue.org/icons/#list>
 
-We will support custom icon later.
+We will support custom icons later.
 
 ![image](https://github.com/user-attachments/assets/7bff028a-bf91-4cab-bf97-55c243b3f5e0)
 </details>
@@ -122,7 +122,7 @@ We will support custom icon later.
 ### What has been done
 
 - Migrate all code to TypeScript with minimal change modification to the original logic.
-- Bundle all code with vite's rollup build.
+- Bundle all code with Vite's rollup build.
 - Added a shim layer to be backward compatible with the existing extension system. <https://github.com/huchenlei/ComfyUI_frontend/pull/15>
 - Front-end dev server.
 - Zod schema for input validation on ComfyUI workflow.

browser_tests/ComfyPage.ts

@@ -37,7 +37,7 @@ class ComfyNodeSearchBox {
   }
 }
 
-class NodeLibrarySideBarTab {
+class NodeLibrarySidebarTab {
   public readonly tabId: string = 'node-library'
   constructor(public readonly page: Page) {}
 
@@ -74,16 +74,16 @@ class NodeLibrarySideBarTab {
 }
 
 class ComfyMenu {
-  public readonly sideToolBar: Locator
+  public readonly sideToolbar: Locator
   public readonly themeToggleButton: Locator
 
   constructor(public readonly page: Page) {
-    this.sideToolBar = page.locator('.side-tool-bar-container')
+    this.sideToolbar = page.locator('.side-tool-bar-container')
     this.themeToggleButton = page.locator('.comfy-vue-theme-toggle')
   }
 
   get nodeLibraryTab() {
-    return new NodeLibrarySideBarTab(this.page)
+    return new NodeLibrarySidebarTab(this.page)
   }
 
   async toggleTheme() {

browser_tests/menu.spec.ts

@@ -44,7 +44,7 @@ test.describe('Menu', () => {
   })
 
   test('Can register sidebar tab', async ({ comfyPage }) => {
-    const initialChildrenCount = await comfyPage.menu.sideToolBar.evaluate(
+    const initialChildrenCount = await comfyPage.menu.sideToolbar.evaluate(
       (el) => el.children.length
     )
 
@@ -62,7 +62,7 @@ test.describe('Menu', () => {
     })
     await comfyPage.nextFrame()
 
-    const newChildrenCount = await comfyPage.menu.sideToolBar.evaluate(
+    const newChildrenCount = await comfyPage.menu.sideToolbar.evaluate(
       (el) => el.children.length
     )
     expect(newChildrenCount).toBe(initialChildrenCount + 1)

src/App.vue

@@ -10,12 +10,12 @@ import { computed, markRaw, onMounted, onUnmounted, watch } from 'vue'
 import BlockUI from 'primevue/blockui'
 import ProgressSpinner from 'primevue/progressspinner'
 import GraphCanvas from '@/components/graph/GraphCanvas.vue'
-import QueueSideBarTab from '@/components/sidebar/tabs/QueueSideBarTab.vue'
+import QueueSidebarTab from '@/components/sidebar/tabs/QueueSidebarTab.vue'
 import { app } from './scripts/app'
 import { useSettingStore } from './stores/settingStore'
 import { useI18n } from 'vue-i18n'
 import { useWorkspaceStore } from './stores/workspaceStateStore'
-import NodeLibrarySideBarTab from './components/sidebar/tabs/NodeLibrarySideBarTab.vue'
+import NodeLibrarySidebarTab from './components/sidebar/tabs/NodeLibrarySidebarTab.vue'
 import GlobalDialog from './components/dialog/GlobalDialog.vue'
 import { api } from './scripts/api'
 import { StatusWsMessageStatus } from './types/apiTypes'
@@ -50,17 +50,17 @@ const init = () => {
       const value = useQueuePendingTaskCountStore().count.toString()
       return value === '0' ? null : value
     },
-    title: t('sideToolBar.queue'),
-    tooltip: t('sideToolBar.queue'),
-    component: markRaw(QueueSideBarTab),
+    title: t('sideToolbar.queue'),
+    tooltip: t('sideToolbar.queue'),
+    component: markRaw(QueueSidebarTab),
     type: 'vue'
   })
   app.extensionManager.registerSidebarTab({
     id: 'node-library',
     icon: 'pi pi-book',
-    title: t('sideToolBar.nodeLibrary'),
-    tooltip: t('sideToolBar.nodeLibrary'),
-    component: markRaw(NodeLibrarySideBarTab),
+    title: t('sideToolbar.nodeLibrary'),
+    tooltip: t('sideToolbar.nodeLibrary'),
+    component: markRaw(NodeLibrarySidebarTab),
     type: 'vue'
   })
 }

src/components/LiteGraphCanvasSplitterOverlay.vue

@@ -4,8 +4,8 @@
       class="side-bar-panel"
       :minSize="10"
       :size="20"
-      v-show="sideBarPanelVisible"
-      v-if="sideBarLocation === 'left'"
+      v-show="sidebarPanelVisible"
+      v-if="sidebarLocation === 'left'"
     >
       <slot name="side-bar-panel"></slot>
     </SplitterPanel>
@@ -16,8 +16,8 @@
       class="side-bar-panel"
       :minSize="10"
       :size="20"
-      v-show="sideBarPanelVisible"
-      v-if="sideBarLocation === 'right'"
+      v-show="sidebarPanelVisible"
+      v-if="sidebarLocation === 'right'"
     >
       <slot name="side-bar-panel"></slot>
     </SplitterPanel>
@@ -32,15 +32,15 @@ import SplitterPanel from 'primevue/splitterpanel'
 import { computed } from 'vue'
 
 const settingStore = useSettingStore()
-const sideBarLocation = computed<'left' | 'right'>(() =>
-  settingStore.get('Comfy.SideBar.Location')
+const sidebarLocation = computed<'left' | 'right'>(() =>
+  settingStore.get('Comfy.Sidebar.Location')
 )
 
-const sideBarPanelVisible = computed(
+const sidebarPanelVisible = computed(
   () => useWorkspaceStore().activeSidebarTab !== null
 )
 const gutterClass = computed(() => {
-  return sideBarPanelVisible.value ? '' : 'gutter-hidden'
+  return sidebarPanelVisible.value ? '' : 'gutter-hidden'
 })
 </script>
 

src/components/graph/GraphCanvas.vue

@@ -2,7 +2,7 @@
   <teleport to=".graph-canvas-container">
     <LiteGraphCanvasSplitterOverlay v-if="betaMenuEnabled">
       <template #side-bar-panel>
-        <SideToolBar />
+        <SideToolbar />
       </template>
     </LiteGraphCanvasSplitterOverlay>
     <canvas ref="canvasRef" id="graph-canvas" tabindex="1" />
@@ -12,7 +12,7 @@
 </template>
 
 <script setup lang="ts">
-import SideToolBar from '@/components/sidebar/SideToolBar.vue'
+import SideToolbar from '@/components/sidebar/SideToolbar.vue'
 import LiteGraphCanvasSplitterOverlay from '@/components/LiteGraphCanvasSplitterOverlay.vue'
 import NodeSearchboxPopover from '@/components/searchbox/NodeSearchBoxPopover.vue'
 import NodeTooltip from '@/components/graph/NodeTooltip.vue'

src/components/node/NodePreview.vue

@@ -95,7 +95,7 @@ const truncateDefaultValue = (value: any, charLimit: number = 32): string => {
   padding: 2px;
 }
 
-/* Original N-SideBar styles */
+/* Original N-Sidebar styles */
 ._sb_dot {
   width: 8px;
   height: 8px;

src/components/sidebar/SideToolbar.vue

@@ -1,7 +1,7 @@
 <template>
   <teleport :to="teleportTarget">
     <nav :class="'side-tool-bar-container' + (isSmall ? ' small-sidebar' : '')">
-      <SideBarIcon
+      <SidebarIcon
         v-for="tab in tabs"
         :key="tab.id"
         :icon="tab.icon"
@@ -12,8 +12,8 @@
         @click="onTabClick(tab)"
       />
       <div class="side-tool-bar-end">
-        <SideBarThemeToggleIcon />
-        <SideBarSettingsToggleIcon />
+        <SidebarThemeToggleIcon />
+        <SidebarSettingsToggleIcon />
       </div>
     </nav>
   </teleport>
@@ -35,9 +35,9 @@
 </template>
 
 <script setup lang="ts">
-import SideBarIcon from './SideBarIcon.vue'
-import SideBarThemeToggleIcon from './SideBarThemeToggleIcon.vue'
-import SideBarSettingsToggleIcon from './SideBarSettingsToggleIcon.vue'
+import SidebarIcon from './SidebarIcon.vue'
+import SidebarThemeToggleIcon from './SidebarThemeToggleIcon.vue'
+import SidebarSettingsToggleIcon from './SidebarSettingsToggleIcon.vue'
 import { computed, onBeforeUnmount } from 'vue'
 import { useWorkspaceStore } from '@/stores/workspaceStateStore'
 import { useSettingStore } from '@/stores/settingStore'
@@ -50,13 +50,13 @@ const workspaceStore = useWorkspaceStore()
 const settingStore = useSettingStore()
 
 const teleportTarget = computed(() =>
-  settingStore.get('Comfy.SideBar.Location') === 'left'
+  settingStore.get('Comfy.Sidebar.Location') === 'left'
     ? '.comfyui-body-left'
     : '.comfyui-body-right'
 )
 
 const isSmall = computed(
-  () => settingStore.get('Comfy.SideBar.Size') === 'small'
+  () => settingStore.get('Comfy.Sidebar.Size') === 'small'
 )
 
 const tabs = computed(() => workspaceStore.getSidebarTabs())

src/components/sidebar/SidebarSettingsToggleIcon.vue

@@ -1,5 +1,5 @@
 <template>
-  <SideBarIcon
+  <SidebarIcon
     icon="pi pi-cog"
     @click="showSetting"
     :tooltip="$t('settings')"
@@ -7,7 +7,7 @@
 </template>
 
 <script setup lang="ts">
-import SideBarIcon from './SideBarIcon.vue'
+import SidebarIcon from './SidebarIcon.vue'
 import { useDialogStore } from '@/stores/dialogStore'
 import SettingDialogContent from '@/components/dialog/content/SettingDialogContent.vue'
 import SettingDialogHeader from '@/components/dialog/header/SettingDialogHeader.vue'

src/components/sidebar/SidebarThemeToggleIcon.vue

@@ -1,15 +1,15 @@
 <template>
-  <SideBarIcon
+  <SidebarIcon
     :icon="icon"
     @click="toggleTheme"
-    :tooltip="$t('sideToolBar.themeToggle')"
+    :tooltip="$t('sideToolbar.themeToggle')"
     class="comfy-vue-theme-toggle"
   />
 </template>
 
 <script setup lang="ts">
 import { computed, ref } from 'vue'
-import SideBarIcon from './SideBarIcon.vue'
+import SidebarIcon from './SidebarIcon.vue'
 import { useSettingStore } from '@/stores/settingStore'
 
 const previousDarkTheme = ref('dark')

src/components/sidebar/tabs/NodeLibrarySidebarTab.vue

@@ -1,5 +1,5 @@
 <template>
-  <SideBarTabTemplate :title="$t('sideToolBar.nodeLibrary')">
+  <SidebarTabTemplate :title="$t('sideToolbar.nodeLibrary')">
     <template #tool-buttons>
       <ToggleButton
         v-model:model-value="alphabeticalSort"
@@ -9,7 +9,7 @@
         :pt="{
           label: { style: { display: 'none' } }
         }"
-        v-tooltip="$t('sideToolBar.nodeLibraryTab.sortOrder')"
+        v-tooltip="$t('sideToolbar.nodeLibraryTab.sortOrder')"
       >
       </ToggleButton>
     </template>
@@ -63,7 +63,7 @@
         ></NodePreview>
       </div>
     </template>
-  </SideBarTabTemplate>
+  </SidebarTabTemplate>
 </template>
 
 <script setup lang="ts">
@@ -74,7 +74,7 @@ import { computed, ref } from 'vue'
 import type { TreeNode } from 'primevue/treenode'
 import TreePlus from '@/components/primevueOverride/TreePlus.vue'
 import NodePreview from '@/components/node/NodePreview.vue'
-import SideBarTabTemplate from '@/components/sidebar/tabs/SideBarTabTemplate.vue'
+import SidebarTabTemplate from '@/components/sidebar/tabs/SidebarTabTemplate.vue'
 
 const nodeDefStore = useNodeDefStore()
 const alphabeticalSort = ref(false)

src/i18n.ts

@@ -9,7 +9,7 @@ const messages = {
       "We couldn't find any settings matching your search. Try adjusting your search terms.",
     noTasksFound: 'No Tasks Found',
     noTasksFoundMessage: 'There are no tasks in the queue.',
-    sideToolBar: {
+    sideToolbar: {
       themeToggle: 'Toggle Theme',
       queue: 'Queue',
       nodeLibrary: 'Node Library',
@@ -26,7 +26,7 @@ const messages = {
     noTasksFoundMessage: '队列中没有任务。',
     searchFailedMessage:
       '我们找不到与您的搜索匹配的任何设置。请尝试调整搜索条件。',
-    sideToolBar: {
+    sideToolbar: {
       themeToggle: '主题切换',
       queue: '队列',
       nodeLibrary: '节点库',

src/stores/settingStore.ts

@@ -91,7 +91,7 @@ export const useSettingStore = defineStore('setting', {
       })
 
       app.ui.settings.addSetting({
-        id: 'Comfy.SideBar.Location',
+        id: 'Comfy.Sidebar.Location',
         name: 'Sidebar location',
         type: 'combo',
         options: ['left', 'right'],
@@ -99,7 +99,7 @@ export const useSettingStore = defineStore('setting', {
       })
 
       app.ui.settings.addSetting({
-        id: 'Comfy.SideBar.Size',
+        id: 'Comfy.Sidebar.Size',
         name: 'Sidebar size',
         type: 'combo',
         options: ['normal', 'small'],