Delete response files

src-web/components/GlobalHooks.tsx

@@ -35,7 +35,8 @@ export function GlobalHooks() {
     }
 
     if (!shouldIgnoreModel(payload)) {
-      queryClient.setQueryData<Model[]>(queryKey, (values) => [...(values ?? []), payload]);
+      // Order newest first
+      queryClient.setQueryData<Model[]>(queryKey, (values) => [payload, ...(values ?? [])]);
     }
   });
 

src-web/components/ResponsePane.tsx

@@ -41,7 +41,7 @@ export const ResponsePane = memo(function ResponsePane({ style, className }: Pro
   const responses = useResponses(activeRequestId);
   const activeResponse: HttpResponse | null = pinnedResponseId
     ? responses.find((r) => r.id === pinnedResponseId) ?? null
-    : responses[responses.length - 1] ?? null;
+    : responses[0] ?? null;
   const [viewMode, setViewMode] = useResponseViewMode(activeResponse?.requestId);
   const deleteResponse = useDeleteResponse(activeResponse?.id ?? null);
   const deleteAllResponses = useDeleteResponses(activeResponse?.requestId);
@@ -138,7 +138,7 @@ export const ResponsePane = memo(function ResponsePane({ style, className }: Pro
                       disabled: responses.length === 0,
                     },
                     { type: 'separator', label: 'History' },
-                    ...responses.slice(0, 10).map((r) => ({
+                    ...responses.slice(0, 20).map((r) => ({
                       key: r.id,
                       label: (
                         <HStack space={2}>
@@ -146,7 +146,8 @@ export const ResponsePane = memo(function ResponsePane({ style, className }: Pro
                           <span>&bull;</span> <span>{r.elapsed}ms</span>
                         </HStack>
                       ),
-                      leftSlot: activeResponse?.id === r.id ? <Icon icon="check" /> : <></>,
+                      leftSlot:
+                        activeResponse?.id === r.id ? <Icon icon="check" /> : <Icon icon="empty" />,
                       onSelect: () => setPinnedResponseId(r.id),
                     })),
                   ]}

src-web/components/core/DurationTag.tsx

@@ -18,8 +18,8 @@ export function DurationTag({ millis }: Props) {
   }
 
   return (
-    <>
+    <span title={`${millis} milliseconds`}>
       {Math.round(num * 10) / 10} {unit}
-    </>
+    </span>
   );
 }

src-web/components/core/SizeTag.tsx

@@ -21,8 +21,8 @@ export function SizeTag({ contentLength }: Props) {
   }
 
   return (
-    <>
+    <span title={`${contentLength} bytes`}>
       {Math.round(num * 10) / 10} {unit}
-    </>
+    </span>
   );
 }