Style: Larger Node Text, More Sidebar Alignment (#7223)

## Summary

See what it looks like. How it feels. What do you think?

- Also was able to unify down to a single SearchBox component.

## Changes

- Bigger widget / slot labels
- Smaller header text
- Unified Searchboxes across sidebar tabs

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7223-Style-prototype-with-larger-node-text-2c36d73d365081f8a371c86f178fa1ff)
by [Unito](https://www.unito.io)

---------

Co-authored-by: github-actions <github-actions@github.com>

src/renderer/extensions/vueNodes/components/InputSlot.vue

@@ -1,11 +1,32 @@
 <template>
   <div v-if="renderError" class="node-error p-1 text-xs text-red-500">⚠️</div>
-  <div v-else v-tooltip.left="tooltipConfig" :class="slotWrapperClass">
+  <div
+    v-else
+    v-tooltip.left="tooltipConfig"
+    :class="
+      cn(
+        'lg-slot lg-slot--input flex items-center group rounded-r-lg m-0',
+        'cursor-crosshair',
+        props.dotOnly ? 'lg-slot--dot-only' : 'pr-6',
+        {
+          'lg-slot--connected': props.connected,
+          'lg-slot--compatible': props.compatible,
+          'opacity-40': shouldDim
+        },
+        props.socketless && 'pointer-events-none invisible'
+      )
+    "
+  >
     <!-- Connection Dot -->
     <SlotConnectionDot
       ref="connectionDotRef"
       :color="slotColor"
-      :class="cn('-translate-x-1/2 w-3', errorClassesDot)"
+      :class="
+        cn(
+          '-translate-x-1/2 w-3',
+          hasSlotError && 'ring-2 ring-error ring-offset-0 rounded-full'
+        )
+      "
       @click="onClick"
       @dblclick="onDoubleClick"
       @pointerdown="onPointerDown"
@@ -15,7 +36,12 @@
     <div class="h-full flex items-center min-w-0">
       <span
         v-if="!dotOnly"
-        :class="cn('truncate text-xs font-normal', labelClasses)"
+        :class="
+          cn(
+            'truncate text-node-component-slot-text',
+            hasSlotError && 'text-error font-medium'
+          )
+        "
       >
         {{ slotData.localized_name || slotData.name || `Input ${index}` }}
       </span>
@@ -65,18 +91,6 @@ const hasSlotError = computed(() => {
   )
 })
 
-const errorClassesDot = computed(() => {
-  return hasSlotError.value
-    ? 'ring-2 ring-error ring-offset-0 rounded-full'
-    : ''
-})
-
-const labelClasses = computed(() =>
-  hasSlotError.value
-    ? 'text-error font-medium'
-    : 'text-node-component-slot-text'
-)
-
 const renderError = ref<string | null>(null)
 const { toastErrorHandler } = useErrorHandling()
 
@@ -113,20 +127,6 @@ const shouldDim = computed(() => {
   return !dragState.compatible.get(slotKey.value)
 })
 
-const slotWrapperClass = computed(() =>
-  cn(
-    'lg-slot lg-slot--input flex items-center group rounded-r-lg h-6',
-    'cursor-crosshair',
-    props.dotOnly ? 'lg-slot--dot-only' : 'pr-6',
-    {
-      'lg-slot--connected': props.connected,
-      'lg-slot--compatible': props.compatible,
-      'opacity-40': shouldDim.value
-    },
-    props.socketless && 'pointer-events-none invisible'
-  )
-)
-
 const connectionDotRef = ref<ComponentPublicInstance<{
   slotElRef: HTMLElement | undefined
 }> | null>(null)