chore: Update typography in sidebar, chatlist, conversation card

app/javascript/dashboard/components-next/sidebar/Sidebar.vue

@@ -623,10 +623,10 @@ const menuItems = computed(() => {
       <div class="flex gap-2 px-2">
         <RouterLink
           :to="{ name: 'search' }"
-          class="flex gap-2 items-center px-2 py-1 w-full h-7 rounded-lg outline outline-1 outline-n-weak bg-n-solid-3 dark:bg-n-black/30"
+          class="flex gap-2 items-center px-2 py-1 w-full h-7 rounded-lg outline outline-1 outline-n-weak bg-n-button-color"
         >
-          <span class="flex-shrink-0 i-lucide-search size-4 text-n-slate-11" />
-          <span class="flex-grow text-left">
+          <span class="flex-shrink-0 i-lucide-search size-4 text-n-slate-10" />
+          <span class="flex-grow text-start text-n-slate-10 font-interDisplay">
             {{ t('COMBOBOX.SEARCH_PLACEHOLDER') }}
           </span>
           <span

app/javascript/dashboard/components-next/sidebar/SidebarGroupHeader.vue

@@ -46,7 +46,13 @@ const count = computed(() =>
       />
     </div>
     <div class="flex items-center gap-1.5 flex-grow min-w-0">
-      <span class="text-sm font-medium leading-5 truncate">
+      <span
+        class="truncate"
+        :class="{
+          'text-body-main': !isActive,
+          'font-medium text-sm': isActive || hasActiveChild,
+        }"
+      >
         {{ label }}
       </span>
       <span

app/javascript/dashboard/components-next/sidebar/SidebarGroupLeaf.vue

@@ -47,7 +47,7 @@ const shouldRenderComponent = computed(() => {
         <span v-if="icon" class="size-4 grid place-content-center rounded-full">
           <Icon :icon="icon" class="size-4 inline-block" />
         </span>
-        <div class="flex-1 truncate min-w-0">{{ label }}</div>
+        <div class="flex-1 truncate min-w-0 text-sm">{{ label }}</div>
       </template>
     </component>
   </Policy>

app/javascript/dashboard/components-next/sidebar/SidebarGroupSeparator.vue

@@ -18,7 +18,7 @@ defineProps({
     class="flex items-center gap-2 px-2 py-1.5 rounded-lg h-8 text-n-slate-10 select-none pointer-events-none"
   >
     <Icon v-if="icon" :icon="icon" class="size-4" />
-    <span class="text-sm font-medium leading-5 flex-grow">
+    <span class="text-sm font-medium flex-grow">
       {{ label }}
     </span>
   </div>