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/NodeHeader.vue

@@ -1,12 +1,12 @@
 <template>
-  <div v-if="renderError" class="node-error p-4 text-sm text-red-500">
+  <div v-if="renderError" class="node-error p-4 text-red-500">
     {{ st('nodeErrors.header', 'Node Header Error') }}
   </div>
   <div
     v-else
     :class="
       cn(
-        'lg-node-header py-2 pl-2 pr-3 text-sm w-full min-w-0',
+        'lg-node-header text-sm py-2 pl-2 pr-3 w-full min-w-0',
         'text-node-component-header bg-node-component-header-surface',
         headerShapeClass
       )
@@ -34,7 +34,7 @@
                 )
               "
               class="relative top-px text-xs leading-none text-node-component-header-icon"
-            ></i>
+            />
           </IconButton>
         </div>
 
@@ -52,7 +52,7 @@
         <!-- Node Title -->
         <div
           v-tooltip.top="tooltipConfig"
-          class="flex min-w-0 flex-1 items-center gap-2 text-sm font-bold"
+          class="flex min-w-0 flex-1 items-center gap-2"
           data-testid="node-title"
         >
           <div class="truncate min-w-0 flex-1">
@@ -92,7 +92,7 @@
             class="min-w-max rounded-sm bg-node-component-surface px-1 py-0.5 text-xs flex items-center gap-1"
           >
             {{ $t('g.edit') }}
-            <i class="icon-[lucide--scaling] size-5"></i>
+            <i class="icon-[lucide--scaling] size-5" />
           </div>
         </IconButton>
       </div>