feat(webui): show pin indicators for pinned chats (#5025)

webui/src/components/ChatList.tsx

@@ -274,6 +274,7 @@ export const ChatList = memo(function ChatList({
                                 <span className="min-w-0 flex-1 truncate font-medium leading-5">
                                   {title}
                                 </span>
+                                {isPinned ? <PinnedChatIndicator label={labels.pinned} /> : null}
                                 {timestamp ? (
                                   <span className="shrink-0 text-[11.5px] font-medium text-muted-foreground/58">
                                     {timestamp}
@@ -281,8 +282,11 @@ export const ChatList = memo(function ChatList({
                                 ) : null}
                               </span>
                             ) : (
-                              <span className="block w-full truncate font-medium leading-5">
-                                {title}
+                              <span className="flex w-full min-w-0 items-center gap-1.5">
+                                <span className="min-w-0 flex-1 truncate font-medium leading-5">
+                                  {title}
+                                </span>
+                                {isPinned ? <PinnedChatIndicator label={labels.pinned} /> : null}
                               </span>
                             )}
                             {showPreview ? (
@@ -488,6 +492,18 @@ function ChatsGroupHeader({ label }: { label: string }) {
   );
 }
 
+function PinnedChatIndicator({ label }: { label: string }) {
+  return (
+    <span
+      aria-hidden="true"
+      title={label}
+      className="inline-flex shrink-0 items-center text-muted-foreground/65"
+    >
+      <Pin className="h-3.5 w-3.5" aria-hidden="true" />
+    </span>
+  );
+}
+
 function ChatsFoldFooter({
   folded,
   hiddenCount,