fix(import-collection): wrap import collection container inside theme provider

package.json

@@ -464,11 +464,11 @@
     "@tabler/icons": "^1.46.0",
     "@tippyjs/react": "^4.2.6",
     "@usebruno/common": "0.24.0",
-    "@usebruno/converters": "0.17.1",
+    "@usebruno/converters": "0.22.0",
     "@usebruno/filestore": "0.11.0",
     "@usebruno/js": "0.50.0",
     "@usebruno/lang": "0.38.0",
-    "@usebruno/requests": "0.15.2",
+    "@usebruno/requests": "0.19.0",
     "@usebruno/schema": "0.28.0",
     "@usebruno/vm2": "3.9.19",
     "adm-zip": "^0.5.16",

src/webview/components/Help/StyledWrapper.ts

@@ -3,6 +3,8 @@ import styled from 'styled-components';
 const Wrapper = styled.div`
   font-weight: 400;
   font-size: ${(props) => props.theme.font.size.sm};
+  color: ${(props) => props.theme.text};
+  white-space: normal;
   background-color: ${(props) => props.theme.infoTip.bg};
   border: 1px solid ${(props) => props.theme.infoTip.border};
   box-shadow: ${(props) => props.theme.infoTip.boxShadow};

src/webview/components/Help/index.tsx

@@ -4,39 +4,96 @@
  * We should allow icon and placement props to be passed in
  */
 
-import React, { useState } from 'react';
+import React, { useState, useRef, useCallback } from 'react';
 import HelpIcon from 'components/Icons/Help';
 import StyledWrapper from './StyledWrapper';
 
+type Placement = 'top' | 'bottom' | 'left' | 'right';
+
+interface TooltipPosition {
+  top: number;
+  left: number;
+  transform?: string;
+}
+
 interface HelpProps {
   children?: React.ReactNode;
   width?: number;
+  placement?: Placement;
+  iconComponent?: React.ComponentType<{ size?: number }>;
+  size?: number;
 }
 
+// Space between the help icon and the tooltip, applied on the side given by `placement`
+const GAP = 8;
+
+const getPortalPosition = (rect: DOMRect, placement: Placement, width: number): TooltipPosition => {
+  switch (placement) {
+    case 'top':
+      return {
+        top: rect.top - GAP,
+        left: rect.left + rect.width / 2 - width / 2,
+        transform: 'translateY(-100%)'
+      };
+    case 'bottom':
+      return {
+        top: rect.bottom + GAP,
+        left: rect.left + rect.width / 2 - width / 2
+      };
+    case 'left':
+      return {
+        top: rect.top + rect.height / 2,
+        left: rect.left - GAP - width,
+        transform: 'translateY(-50%)'
+      };
+    case 'right':
+    default:
+      return {
+        top: rect.top + rect.height / 2,
+        left: rect.right + GAP,
+        transform: 'translateY(-50%)'
+      };
+  }
+};
 
 const Help = ({
   children,
-  width = 200
-}: any) => {
+  width = 200,
+  placement = 'right',
+  iconComponent: IconComponent = HelpIcon,
+  size = 14
+}: HelpProps) => {
+  const tooltipWidth = Number(width) || 200;
+
   const [showTooltip, setShowTooltip] = useState(false);
+  const [position, setPosition] = useState<TooltipPosition | null>(null);
+  const iconRef = useRef<HTMLSpanElement>(null);
+
+  const handleMouseEnter = useCallback(() => {
+    if (iconRef.current) {
+      const rect = iconRef.current.getBoundingClientRect();
+      setPosition(getPortalPosition(rect, placement, tooltipWidth));
+    }
+    setShowTooltip(true);
+  }, [placement, tooltipWidth]);
 
   return (
-    <div className="flex items-center relative">
+    <div className="flex items-center">
       <span
+        ref={iconRef}
         className="flex items-center"
-        onMouseEnter={() => setShowTooltip(true)}
+        onMouseEnter={handleMouseEnter}
         onMouseLeave={() => setShowTooltip(false)}
       >
-        <HelpIcon size={14} />
+        <IconComponent size={size} />
       </span>
-      {showTooltip && (
+      {showTooltip && position && (
         <StyledWrapper
-          className="absolute z-50 rounded-md p-3"
+          className="z-50 rounded-md p-3"
           style={{
-            top: '50%',
-            left: 'calc(100% + 8px)',
-            transform: 'translateY(-50%)',
-            width: `${width}px`
+            position: 'fixed',
+            ...position,
+            width: `${tooltipWidth}px`
           }}
         >
           {children}
@@ -46,4 +103,4 @@ const Help = ({
   );
 };
 
-export default Help;
+export default Help;

src/webview/components/ImportCollectionView/index.tsx

@@ -723,7 +723,7 @@ const ImportCollectionView: React.FC = () => {
             <div className="form-group">
               <label htmlFor="format" className="form-label">
                 File Format
-                <Help width="260">
+                <Help width={260}>
                   <p><strong>OpenCollection (YAML):</strong> Industry-standard YAML format (.yml)</p>
                   <p className="mt-1"><strong>BRU:</strong> Bruno's native format (.bru)</p>
                 </Help>

src/webview/components/Sidebar/CreateCollection/index.tsx

@@ -176,7 +176,7 @@ const CreateCollection = ({
                   <div className="flex items-center justify-between">
                     <label htmlFor="filename" className="flex items-center font-medium">
                       Folder Name
-                      <Help width="300">
+                      <Help width={300}>
                         <p>
                           The name of the folder used to store the collection.
                         </p>
@@ -231,7 +231,7 @@ const CreateCollection = ({
                 <div className="mt-4">
                   <label htmlFor="format" className="flex items-center font-medium">
                     File Format
-                    <Help width="300">
+                    <Help width={300}>
                       <p>
                         Choose the file format for storing requests in this collection.
                       </p>

src/webview/components/Sidebar/ImportCollectionLocation/index.tsx

@@ -229,7 +229,7 @@ const ImportCollectionLocation = ({
             <div className="mt-4">
               <label htmlFor="format" className="flex items-center font-medium">
                 File Format
-                <Help width="300">
+                <Help width={300}>
                   <p>Choose the file format for storing requests in this collection.</p>
                   <p className="mt-2">
                     <strong>OpenCollection (YAML):</strong> Industry-standard YAML format (.yml files)

src/webview/simple/index.tsx

@@ -5,6 +5,7 @@ import ReactDOM from 'react-dom/client';
 import { Toaster } from 'react-hot-toast';
 import SimpleApp from './SimpleApp';
 import ThemeProvider from '../providers/Theme';
+import '../styles/globals.css';
 
 const rootElement = document.getElementById('root');
 
@@ -15,8 +16,8 @@ if (rootElement) {
       <React.StrictMode>
         <ThemeProvider>
           <SimpleApp />
-        </ThemeProvider>        
-        <Toaster position="top-right" toastOptions={{ duration: 3000 }} />
+          <Toaster position="top-right" toastOptions={{ duration: 3000 }} />
+        </ThemeProvider>
       </React.StrictMode>
     );
   } catch (error) {

src/webview/simple/views/ImportCollectionView.tsx

@@ -711,7 +711,7 @@ const ImportCollectionView: React.FC = () => {
             <div className="form-group">
               <label htmlFor="format" className="form-label">
                 File Format
-                <Help width="260">
+                <Help width={260}>
                   <p><strong>OpenCollection (YAML):</strong> Industry-standard YAML format (.yml)</p>
                   <p className="mt-1"><strong>BRU:</strong> Bruno's native format (.bru)</p>
                 </Help>