Dropdown keys and pointer events

src-web/components/RecentRequestsDropdown.tsx

@@ -49,6 +49,7 @@ export function RecentRequestsDropdown() {
       if (request === undefined) continue;
 
       recentRequestItems.push({
+        key: request.id,
         label: request.name,
         leftSlot: <CountBadge className="!ml-0 px-0 w-5" count={recentRequestItems.length + 1} />,
         onSelect: () => {
@@ -71,8 +72,9 @@ export function RecentRequestsDropdown() {
   return (
     <Dropdown ref={dropdownRef} items={items}>
       <Button
+        disabled={activeRequest === null}
         size="sm"
-        className="pointer-events-auto flex-[2] text-center text-gray-800 text-sm truncate pointer-events-none"
+        className="flex-[2] text-center text-gray-800 text-sm truncate pointer-events-none"
       >
         {activeRequest?.name ?? <span className="text-gray-400">No Request</span>}
       </Button>

src-web/components/RequestActionsDropdown.tsx

@@ -34,12 +34,14 @@ export function RequestActionsDropdown({ requestId, children }: Props) {
       ref={dropdownRef}
       items={[
         {
+          key: 'duplicate',
           label: 'Duplicate',
           onSelect: duplicateRequest.mutate,
           leftSlot: <Icon icon="copy" />,
           rightSlot: <HotKey modifier="Meta" keyName="D" />,
         },
         {
+          key: 'delete',
           label: 'Delete',
           onSelect: deleteRequest.mutate,
           variant: 'danger',
@@ -47,6 +49,7 @@ export function RequestActionsDropdown({ requestId, children }: Props) {
         },
         { type: 'separator', label: 'Yaak Settings' },
         {
+          key: 'appearance',
           label: appearance === 'dark' ? 'Light Theme' : 'Dark Theme',
           onSelect: toggleAppearance,
           leftSlot: <Icon icon={appearance === 'dark' ? 'sun' : 'moon'} />,

src-web/components/ResponsePane.tsx

@@ -131,11 +131,13 @@ export const ResponsePane = memo(function ResponsePane({ style, className }: Pro
                 <Dropdown
                   items={[
                     {
+                      key: 'clear-single',
                       label: 'Clear Response',
                       onSelect: deleteResponse.mutate,
                       disabled: responses.length === 0,
                     },
                     {
+                      key: 'clear-all',
                       label: `Clear ${responses.length} ${pluralize('Response', responses.length)}`,
                       onSelect: deleteAllResponses.mutate,
                       hidden: responses.length <= 1,
@@ -143,6 +145,7 @@ export const ResponsePane = memo(function ResponsePane({ style, className }: Pro
                     },
                     { type: 'separator', label: 'History' },
                     ...responses.slice(0, 10).map((r) => ({
+                      key: r.id,
                       label: (
                         <HStack space={2}>
                           <StatusTag className="text-xs" response={r} />

src-web/components/WorkspaceActionsDropdown.tsx

@@ -29,6 +29,7 @@ export const WorkspaceActionsDropdown = memo(function WorkspaceDropdown({ classN
 
   const items: DropdownItem[] = useMemo(() => {
     const workspaceItems = workspaces.map((w) => ({
+      key: w.id,
       label: w.name,
       leftSlot: activeWorkspaceId === w.id ? <Icon icon="check" /> : <Icon icon="empty" />,
       onSelect: () => {
@@ -51,6 +52,7 @@ export const WorkspaceActionsDropdown = memo(function WorkspaceDropdown({ classN
     return [
       ...activeWorkspaceItems,
       {
+        key: 'rename',
         label: 'Rename',
         leftSlot: <Icon icon="pencil" />,
         onSelect: async () => {
@@ -69,6 +71,7 @@ export const WorkspaceActionsDropdown = memo(function WorkspaceDropdown({ classN
         },
       },
       {
+        key: 'delete',
         label: 'Delete',
         leftSlot: <Icon icon="trash" />,
         onSelect: deleteWorkspace.mutate,
@@ -76,6 +79,7 @@ export const WorkspaceActionsDropdown = memo(function WorkspaceDropdown({ classN
       },
       { type: 'separator' },
       {
+        key: 'create-workspace',
         label: 'Create Workspace',
         leftSlot: <Icon icon="plus" />,
         onSelect: async () => {

src-web/components/WorkspaceHeader.tsx

@@ -25,7 +25,7 @@ export const WorkspaceHeader = memo(function WorkspaceHeader({ className }: Prop
         <SidebarActions />
         <WorkspaceActionsDropdown className="pointer-events-auto" />
       </HStack>
-      <div>
+      <div className="pointer-events-none">
         <RecentRequestsDropdown />
       </div>
       <div className="flex-1 flex justify-end -mr-2 pointer-events-none">

src-web/components/core/Button.tsx

@@ -39,6 +39,7 @@ const _Button = forwardRef<any, ButtonProps>(function Button(
     type = 'button',
     justify = 'center',
     size = 'md',
+    disabled,
     ...props
   }: ButtonProps,
   ref,
@@ -50,6 +51,7 @@ const _Button = forwardRef<any, ButtonProps>(function Button(
         'outline-none whitespace-nowrap',
         'focus-visible-or-class:ring',
         'rounded-md flex items-center',
+        disabled ? 'pointer-events-none' : 'pointer-events-auto',
         colorStyles[color || 'default'],
         justify === 'start' && 'justify-start',
         justify === 'center' && 'justify-center',
@@ -57,7 +59,7 @@ const _Button = forwardRef<any, ButtonProps>(function Button(
         size === 'sm' && 'h-sm px-2.5 text-sm',
         size === 'xs' && 'h-xs px-2 text-sm',
       ),
-    [color, size, justify, className],
+    [className, disabled, color, justify, size],
   );
 
   if (typeof to === 'string') {
@@ -69,7 +71,7 @@ const _Button = forwardRef<any, ButtonProps>(function Button(
     );
   } else {
     return (
-      <button ref={ref} type={type} className={classes} {...props}>
+      <button ref={ref} type={type} className={classes} disabled={disabled} {...props}>
         {isLoading && <Icon icon="update" size={size} className="animate-spin mr-1" />}
         {children}
         {forDropdown && <Icon icon="chevronDown" size={size} className="ml-1 -mr-1" />}

src-web/components/core/Dropdown.tsx

@@ -25,6 +25,7 @@ export type DropdownItemSeparator = {
 
 export type DropdownItem =
   | {
+      key: string;
       type?: 'default';
       label: ReactNode;
       variant?: 'danger';
@@ -306,7 +307,7 @@ const Menu = forwardRef<Omit<DropdownRef, 'open' | 'isOpen' | 'toggle'>, MenuPro
                       focused={i === selectedIndex}
                       onFocus={handleFocus}
                       onSelect={handleSelect}
-                      key={i + item.label}
+                      key={item.key}
                       item={item}
                     />
                   );

src-web/components/core/RadioDropdown.tsx

@@ -32,6 +32,7 @@ export function RadioDropdown<T = string | null>({
           return item;
         } else {
           return {
+            key: item.label,
             label: item.label,
             shortLabel: item.shortLabel,
             onSelect: () => onChange(item.value),