Download Active Response (#49)

This PR prompts you to save un-previewable file types and adds an option
to save to the response history.

src-web/components/core/Dropdown.tsx

@@ -35,6 +35,7 @@ import { HStack, VStack } from './Stacks';
 export type DropdownItemSeparator = {
   type: 'separator';
   label?: string;
+  hidden?: boolean;
 };
 
 export type DropdownItemDefault = {
@@ -373,7 +374,7 @@ const Menu = forwardRef<Omit<DropdownRef, 'open' | 'isOpen' | 'toggle'>, MenuPro
       right: onRight ? docRect.width - triggerShape.right : undefined,
       left: !onRight ? triggerShape.left : undefined,
       minWidth: fullWidth ? triggerWidth : undefined,
-      maxWidth: '25rem',
+      maxWidth: '40rem',
     };
     const size = { top: '-0.2rem', width: '0.4rem', height: '0.4rem' };
     const triangleStyles = onRight
@@ -456,6 +457,9 @@ const Menu = forwardRef<Omit<DropdownRef, 'open' | 'isOpen' | 'toggle'>, MenuPro
                     <span className="text-fg-subtler text-center px-2 py-1">No matches</span>
                   )}
                   {filteredItems.map((item, i) => {
+                    if (item.hidden) {
+                      return null;
+                    }
                     if (item.type === 'separator') {
                       return (
                         <Separator key={i} className={classNames('my-1.5', item.label && 'ml-2')}>
@@ -463,9 +467,6 @@ const Menu = forwardRef<Omit<DropdownRef, 'open' | 'isOpen' | 'toggle'>, MenuPro
                         </Separator>
                       );
                     }
-                    if (item.hidden) {
-                      return null;
-                    }
                     return (
                       <MenuItem
                         focused={i === selectedIndex}
@@ -538,9 +539,8 @@ function MenuItem({ className, focused, onFocus, item, onSelect, ...props }: Men
         'h-xs', // More compact
         'min-w-[8rem] outline-none px-2 mx-1.5 flex whitespace-nowrap',
         'focus:bg-background-highlight focus:text-fg rounded',
-        item.variant === 'default' && 'text-fg-subtle',
-        item.variant === 'danger' && 'text-fg-danger',
-        item.variant === 'notify' && 'text-fg-primary',
+        item.variant === 'danger' && '!text-fg-danger',
+        item.variant === 'notify' && '!text-fg-primary',
       )}
       {...props}
     >

src-web/components/core/HotKeyLabel.tsx

@@ -1,11 +1,13 @@
+import classNames from 'classnames';
 import type { HotkeyAction } from '../../hooks/useHotKey';
 import { useHotKeyLabel } from '../../hooks/useHotKey';
 
 interface Props {
   action: HotkeyAction;
+  className?: string;
 }
 
-export function HotKeyLabel({ action }: Props) {
+export function HotKeyLabel({ action, className }: Props) {
   const label = useHotKeyLabel(action);
-  return <span className="text-fg-subtle whitespace-nowrap">{label}</span>;
+  return <span className={classNames(className, 'text-fg-subtle whitespace-nowrap')}>{label}</span>;
 }

src-web/components/core/HotKeyList.tsx

@@ -1,26 +1,27 @@
+import classNames from 'classnames';
 import React from 'react';
 import type { HotkeyAction } from '../../hooks/useHotKey';
 import { HotKey } from './HotKey';
 import { HotKeyLabel } from './HotKeyLabel';
-import { HStack, VStack } from './Stacks';
 
 interface Props {
   hotkeys: HotkeyAction[];
   bottomSlot?: React.ReactNode;
+  className?: string;
 }
 
-export const HotKeyList = ({ hotkeys, bottomSlot }: Props) => {
+export const HotKeyList = ({ hotkeys, bottomSlot, className }: Props) => {
   return (
-    <div className="h-full flex items-center justify-center">
-      <VStack space={2}>
+    <div className={classNames(className, 'h-full flex items-center justify-center')}>
+      <div className="px-4 grid gap-2 grid-cols-[auto_auto]">
         {hotkeys.map((hotkey) => (
-          <HStack key={hotkey} className="grid grid-cols-2">
-            <HotKeyLabel action={hotkey} />
-            <HotKey className="ml-auto" action={hotkey} />
-          </HStack>
+          <>
+            <HotKeyLabel className="truncate" action={hotkey} />
+            <HotKey className="ml-4" action={hotkey} />
+          </>
         ))}
         {bottomSlot}
-      </VStack>
+      </div>
     </div>
   );
 };

src-web/components/core/Icon.tsx

@@ -54,13 +54,15 @@ const icons = {
   plusCircle: lucide.PlusCircleIcon,
   question: lucide.ShieldQuestionIcon,
   refresh: lucide.RefreshCwIcon,
+  save: lucide.SaveIcon,
   search: lucide.SearchIcon,
   sendHorizontal: lucide.SendHorizonalIcon,
   settings2: lucide.Settings2Icon,
   settings: lucide.SettingsIcon,
   sparkles: lucide.SparklesIcon,
   sun: lucide.SunIcon,
-  trash: lucide.TrashIcon,
+  trash: lucide.Trash2Icon,
+  unpin: lucide.PinOffIcon,
   update: lucide.RefreshCcwIcon,
   upload: lucide.UploadIcon,
   x: lucide.XIcon,

src-web/components/core/InlineCode.tsx

@@ -6,7 +6,7 @@ export function InlineCode({ className, ...props }: HTMLAttributes<HTMLSpanEleme
     <code
       className={classNames(
         className,
-        'font-mono text-shrink bg-background-highlight-secondary border border-background-highlight',
+        'font-mono text-shrink bg-background-highlight-secondary border border-background-highlight-secondary',
         'px-1.5 py-0.5 rounded text-fg shadow-inner',
       )}
       {...props}