Theme system refactor (#31)

src-web/components/RecentResponsesDropdown.tsx

@@ -1,26 +1,30 @@
+import classNames from 'classnames';
 import { useDeleteHttpResponse } from '../hooks/useDeleteHttpResponse';
 import { useDeleteHttpResponses } from '../hooks/useDeleteHttpResponses';
 import type { HttpResponse } from '../lib/models';
-import { Dropdown } from './core/Dropdown';
 import { pluralize } from '../lib/pluralize';
-import { HStack } from './core/Stacks';
-import { StatusTag } from './core/StatusTag';
+import { Dropdown } from './core/Dropdown';
 import { Icon } from './core/Icon';
 import { IconButton } from './core/IconButton';
+import { HStack } from './core/Stacks';
+import { StatusTag } from './core/StatusTag';
 
 interface Props {
   responses: HttpResponse[];
   activeResponse: HttpResponse;
-  onPinnedResponse: (r: HttpResponse) => void;
+  onPinnedResponseId: (id: string) => void;
+  className?: string;
 }
 
 export const RecentResponsesDropdown = function ResponsePane({
   activeResponse,
   responses,
-  onPinnedResponse,
+  onPinnedResponseId,
+  className,
 }: Props) {
   const deleteResponse = useDeleteHttpResponse(activeResponse?.id ?? null);
   const deleteAllResponses = useDeleteHttpResponses(activeResponse?.requestId);
+  const latestResponseId = responses[0]?.id ?? 'n/a';
 
   return (
     <Dropdown
@@ -44,18 +48,19 @@ export const RecentResponsesDropdown = function ResponsePane({
           label: (
             <HStack space={2} alignItems="center">
               <StatusTag className="text-xs" response={r} />
-              <span>&bull;</span> <span className="font-mono text-xs">{r.elapsed}ms</span>
+              <span>&rarr;</span>{' '}
+              <span className="font-mono text-xs">{r.elapsed >= 0 ? `${r.elapsed}ms` : 'n/a'}</span>
             </HStack>
           ),
           leftSlot: activeResponse?.id === r.id ? <Icon icon="check" /> : <Icon icon="empty" />,
-          onSelect: () => onPinnedResponse(r),
+          onSelect: () => onPinnedResponseId(r.id),
         })),
       ]}
     >
       <IconButton
         title="Show response history"
-        icon="chevronDown"
-        className="ml-auto"
+        icon={activeResponse?.id === latestResponseId ? 'chevronDown' : 'pin'}
+        className={classNames(className, 'm-0.5')}
         size="sm"
         iconSize="md"
       />