fix: update for design reviews

src/components/node/NodePreviewCard.vue

@@ -16,7 +16,10 @@
       </h3>
 
       <!-- Badges -->
-      <div class="flex flex-wrap gap-2">
+      <div
+        v-if="nodeDef.api_node && (creditsLabel || categoryLabel)"
+        class="flex flex-wrap gap-2"
+      >
         <BadgePill
           v-show="nodeDef.api_node && creditsLabel"
           :text="creditsLabel"
@@ -35,16 +38,22 @@
       <!-- Description -->
       <p
         v-if="nodeDef.description"
-        class="text-[11px] font-normal leading-relaxed text-muted-foreground m-0"
+        class="text-[11px] font-normal leading-normal text-muted-foreground m-0"
       >
         {{ nodeDef.description }}
       </p>
 
       <!-- Divider -->
-      <div v-if="(inputs.length > 0 || outputs.length > 0) && showInputsAndOutputs" class="border-t border-border-default" />
+      <div
+        v-if="(inputs.length > 0 || outputs.length > 0) && showInputsAndOutputs"
+        class="border-t border-border-default"
+      />
 
       <!-- Inputs Section -->
-      <div v-if="inputs.length > 0 && showInputsAndOutputs" class="flex flex-col gap-1">
+      <div
+        v-if="inputs.length > 0 && showInputsAndOutputs"
+        class="flex flex-col gap-1"
+      >
         <h4
           class="text-xxs font-semibold uppercase tracking-wide text-muted-foreground m-0"
         >
@@ -63,7 +72,10 @@
       </div>
 
       <!-- Outputs Section -->
-      <div v-if="outputs.length > 0 && showInputsAndOutputs" class="flex flex-col gap-1">
+      <div
+        v-if="outputs.length > 0 && showInputsAndOutputs"
+        class="flex flex-col gap-1"
+      >
         <h4
           class="text-xxs font-semibold uppercase tracking-wide text-muted-foreground m-0"
         >

src/components/sidebar/tabs/nodeLibrary/EssentialNodesPanel.vue

@@ -9,13 +9,13 @@
         @update:open="toggleFolder(folder.key, $event)"
       >
         <CollapsibleTrigger
-          class="group flex w-full items-center justify-between border-0 bg-transparent py-4 px-0 text-sm font-semibold text-neutral-200 cursor-pointer"
+          class="group flex w-full cursor-pointer items-center justify-between border-0 bg-transparent py-3 text-xs font-medium tracking-wide text-muted-foreground h-8 box-content"
         >
-          <span class="capitalize">{{ folder.label }}</span>
+          <span class="uppercase">{{ folder.label }}</span>
           <i
             :class="
               cn(
-                'icon-[lucide--chevron-up] size-4 text-neutral-400 transition-transform duration-200',
+                'icon-[lucide--chevron-up] size-4 transition-transform duration-200',
                 !expandedKeys.includes(folder.key) && '-rotate-180'
               )
             "
@@ -100,7 +100,7 @@ watch(
     if (!hasAutoExpanded.value && value.length > 0) {
       hasAutoExpanded.value = true
       if (expandedKeys.value.length === 0) {
-        expandedKeys.value = value.slice(0, 2).map((folder) => folder.key)
+        expandedKeys.value = value.map((folder) => folder.key)
       }
     }
   },

src/services/nodeOrganizationService.ts

@@ -139,7 +139,7 @@ class NodeOrganizationService {
           pathExtractor: essentialsPathExtractor
         })
         const folderOrder = [
-          'basic',
+          'basics',
           'text generation',
           'image generation',
           'video generation',

src/types/nodeSource.ts

@@ -28,14 +28,14 @@ const shortenNodeName = (name: string) => {
 
 // TODO: Remove this mock mapping once object_info/global_subgraphs returns essentials_category
 const ESSENTIALS_CATEGORY_MOCK: Record<string, string> = {
-  // basic
-  LoadImage: 'basic',
-  SaveImage: 'basic',
-  LoadVideo: 'basic',
-  SaveVideo: 'basic',
-  Load3D: 'basic',
-  SaveGLB: 'basic',
-  CLIPTextEncode: 'basic',
+  // basics
+  LoadImage: 'basics',
+  SaveImage: 'basics',
+  LoadVideo: 'basics',
+  SaveVideo: 'basics',
+  Load3D: 'basics',
+  SaveGLB: 'basics',
+  CLIPTextEncode: 'basics',
   // image tools
   ImageBatch: 'image tools',
   ImageCrop: 'image tools',