Rename SideBar to Sidebar (#422)

* Rename SideBar to Sidebar

* rename files

* rename files

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)