Repository: All-Hands-AI/OpenHands
File: frontend/src/components/features/conversation/conversation-tabs/conversation-tabs-context-menu.tsx (TypeScript)

Code before:
      i18nKey: I18nKey.COMMON$BROWSER,
    },
  ];

  if (shouldUsePlanningAgent) {
    tabConfig.unshift({
      tab: "planner",
      icon: LessonPlanIcon,
      i18nKey: I18nKey.COMMON$PLANNER,
    });
  }

  if (!isOpen) return null;

  const handleTabClick = (tab: string) => {
    const tabString = tab;
    if (unpinnedTabs.includes(tabString)) {
      // Tab is unpinned, pin it (remove from unpinned list)
      setUnpinnedTabs(
        unpinnedTabs.filter((unpinnedTab) => unpinnedTab !== tabString),
      );
    } else {
      // Tab is pinned, unpin it (add to unpinned list)
      setUnpinnedTabs([...unpinnedTabs, tabString]);
    }
    onClose();
  };

  const isTabPinned = (tab: string) => !unpinnedTabs.includes(tab as string);

  return (
    <ContextMenu
      testId="conversation-tabs-context-menu"
      ref={ref}
      alignment="right"
      position="bottom"
      className="mt-2 w-fit z-[9999]"
    >
      {tabConfig.map(({ tab, icon: Icon, i18nKey }) => {
        const pinned = isTabPinned(tab);
        return (
          <ContextMenuListItem
            key={tab}
            onClick={() => handleTabClick(tab)}
            className="flex items-center gap-2 p-2 hover:bg-[#5C5D62] rounded h-[30px]"
          >
            <Icon className="w-4 h-4" />
            <span className="text-white text-sm">{t(i18nKey)}</span>
            {pinned ? (
              <PillFillIcon className="w-7 h-7 ml-auto flex-shrink-0 text-white -mr-[5px]" />
            ) : (

Review comment (suggestion):
```suggestion
```

I think it’d be better to close only when the user clicks away

Code after:
      i18nKey: I18nKey.COMMON$BROWSER,
    },
  ];

  if (shouldUsePlanningAgent) {
    tabConfig.unshift({
      tab: "planner",
      icon: LessonPlanIcon,
      i18nKey: I18nKey.COMMON$PLANNER,
    });
  }

  if (!isOpen) return null;

  const handleTabClick = (tab: string) => {
    const tabString = tab;
    if (unpinnedTabs.includes(tabString)) {
      // Tab is unpinned, pin it (remove from unpinned list)
      setUnpinnedTabs(
        unpinnedTabs.filter((unpinnedTab) => unpinnedTab !== tabString),
      );
    } else {
      // Tab is pinned, unpin it (add to unpinned list)
      setUnpinnedTabs([...unpinnedTabs, tabString]);
    }
  };

  const isTabPinned = (tab: string) => !unpinnedTabs.includes(tab as string);

  return (
    <ContextMenu
      testId="conversation-tabs-context-menu"
      ref={ref}
      alignment="right"
      position="bottom"
      className="mt-2 w-fit z-[9999]"
    >
      {tabConfig.map(({ tab, icon: Icon, i18nKey }) => {
        const pinned = isTabPinned(tab);
        return (
          <ContextMenuListItem
            key={tab}
            onClick={() => handleTabClick(tab)}
            className="flex items-center gap-2 p-2 hover:bg-[#5C5D62] rounded h-[30px]"
          >
            <Icon className="w-4 h-4" />
            <span className="text-white text-sm">{t(i18nKey)}</span>
            {pinned ? (
              <PillFillIcon className="w-7 h-7 ml-auto flex-shrink-0 text-white -mr-[5px]" />
            ) : (
              <PillIcon className="w-4.5 h-4.5 ml-auto flex-shrink-0 text-white" />