Rename BadgeButton to PillButton

src-web/components/EnvironmentEditor.tsx

@@ -13,7 +13,7 @@ import {
   setupOrConfigureEncryption,
   withEncryptionEnabled,
 } from '../lib/setupOrConfigureEncryption';
-import { BadgeButton } from './core/BadgeButton';
+import { PillButton } from './core/PillButton';
 import { DismissibleBanner } from './core/DismissibleBanner';
 import type { GenericCompletionConfig } from './core/Editor/genericCompletion';
 import { Heading } from './core/Heading';
@@ -113,20 +113,20 @@ export function EnvironmentEditor({ environment, hideName, className, setRef }:
           {!hideName && <div className="mr-2">{environment?.name}</div>}
           {isEncryptionEnabled ? (
             !allVariableAreEncrypted ? (
-              <BadgeButton color="notice" onClick={() => encryptEnvironment(environment)}>
+              <PillButton color="notice" onClick={() => encryptEnvironment(environment)}>
                 Encrypt All Variables
-              </BadgeButton>
+              </PillButton>
             ) : (
-              <BadgeButton color="secondary" onClick={setupOrConfigureEncryption}>
+              <PillButton color="secondary" onClick={setupOrConfigureEncryption}>
                 Encryption Settings
-              </BadgeButton>
+              </PillButton>
             )
           ) : (
-            <BadgeButton color="secondary" onClick={() => valueVisibility.set((v) => !v)}>
+            <PillButton color="secondary" onClick={() => valueVisibility.set((v) => !v)}>
               {valueVisibility.value ? 'Hide Values' : 'Show Values'}
-            </BadgeButton>
+            </PillButton>
           )}
-          <BadgeButton
+          <PillButton
             color="secondary"
             rightSlot={<EnvironmentSharableTooltip />}
             onClick={async () => {
@@ -134,7 +134,7 @@ export function EnvironmentEditor({ environment, hideName, className, setRef }:
             }}
           >
             {environment.public ? 'Sharable' : 'Private'}
-          </BadgeButton>
+          </PillButton>
         </Heading>
         {environment.public && (!isEncryptionEnabled || !allVariableAreEncrypted) && (
           <DismissibleBanner

src-web/components/LicenseBadge.tsx

@@ -5,7 +5,7 @@ import { useAtomValue } from 'jotai';
 import type { ReactNode } from 'react';
 import { openSettings } from '../commands/openSettings';
 import { CargoFeature } from './CargoFeature';
-import { BadgeButton } from './core/BadgeButton';
+import { PillButton } from './core/PillButton';
 import type { ButtonProps } from './core/Button';
 
 const details: Record<
@@ -52,11 +52,11 @@ function LicenseBadgeCmp() {
   }
 
   return (
-    <BadgeButton
+    <PillButton
       color={detail.color}
       onClick={() => openSettings.mutate('license')}
     >
       {detail.label}
-    </BadgeButton>
+    </PillButton>
   );
 }

src-web/components/WorkspaceHeader.tsx

@@ -6,7 +6,7 @@ import { useToggleCommandPalette } from '../hooks/useToggleCommandPalette';
 import { workspaceLayoutAtom } from '../lib/atoms';
 import { setupOrConfigureEncryption } from '../lib/setupOrConfigureEncryption';
 import { CookieDropdown } from './CookieDropdown';
-import { BadgeButton } from './core/BadgeButton';
+import { PillButton } from './core/PillButton';
 import { Icon } from './core/Icon';
 import { IconButton } from './core/IconButton';
 import { HStack } from './core/Stacks';
@@ -52,9 +52,9 @@ export const WorkspaceHeader = memo(function WorkspaceHeader({ className }: Prop
       <div className="flex-1 flex gap-1 items-center h-full justify-end pointer-events-none pr-1">
         <ImportCurlButton />
         {showEncryptionSetup ? (
-          <BadgeButton color="danger" onClick={setupOrConfigureEncryption}>
+          <PillButton color="danger" onClick={setupOrConfigureEncryption}>
             Enter Encryption Key
-          </BadgeButton>
+          </PillButton>
         ) : (
           <LicenseBadge />
         )}

src-web/components/core/PillButton.tsx

@@ -2,7 +2,7 @@ import classNames from 'classnames';
 import type { ButtonProps } from './Button';
 import { Button } from './Button';
 
-export function BadgeButton({ className, ...props }: ButtonProps) {
+export function PillButton({ className, ...props }: ButtonProps) {
   return (
     <Button
       size="2xs"

src-web/components/core/Tooltip.tsx

@@ -9,6 +9,7 @@ export interface TooltipProps {
   content: ReactNode;
   tabIndex?: number;
   size?: 'md' | 'lg';
+  className?: string;
 }
 
 const hiddenStyles: CSSProperties = {
@@ -19,7 +20,7 @@ const hiddenStyles: CSSProperties = {
   opacity: 0,
 };
 
-export function Tooltip({ children, content, tabIndex, size = 'md' }: TooltipProps) {
+export function Tooltip({ children, className, content, tabIndex, size = 'md' }: TooltipProps) {
   const [isOpen, setIsOpen] = useState<CSSProperties>();
   const triggerRef = useRef<HTMLButtonElement>(null);
   const tooltipRef = useRef<HTMLDivElement>(null);
@@ -95,7 +96,7 @@ export function Tooltip({ children, content, tabIndex, size = 'md' }: TooltipPro
         role="button"
         aria-describedby={isOpen ? id.current : undefined}
         tabIndex={tabIndex ?? -1}
-        className="flex-grow-0 inline-flex items-center"
+        className={classNames(className, 'flex-grow-0 flex items-center')}
         onClick={handleToggleImmediate}
         onMouseEnter={handleOpen}
         onMouseLeave={handleClose}