Add cookie editing and inherited request settings

packages/ui/src/components/Icon.tsx

@@ -91,8 +91,9 @@ import {
   HomeIcon,
   ImportIcon,
   InfoIcon,
-  KeyboardIcon,
   KeyRoundIcon,
+  KeyboardIcon,
+  ListXIcon,
   LockIcon,
   LockOpenIcon,
   MergeIcon,
@@ -131,12 +132,15 @@ import {
   SunIcon,
   TableIcon,
   Trash2Icon,
+  Undo2Icon,
   UploadIcon,
   VariableIcon,
   Wand2Icon,
   WifiIcon,
   WrenchIcon,
   XIcon,
+  ZapIcon,
+  ZapOffIcon,
 } from "lucide-react";
 import type { CSSProperties, HTMLAttributes } from "react";
 import { memo } from "react";
@@ -238,6 +242,7 @@ const icons = {
   keyboard: KeyboardIcon,
   left_panel_hidden: PanelLeftOpenIcon,
   left_panel_visible: PanelLeftCloseIcon,
+  list_x: ListXIcon,
   lock: LockIcon,
   lock_open: LockOpenIcon,
   magic_wand: Wand2Icon,
@@ -271,6 +276,7 @@ const icons = {
   table: TableIcon,
   text: FileTextIcon,
   trash: Trash2Icon,
+  undo_2: Undo2Icon,
   unpin: PinOffIcon,
   update: RefreshCcwIcon,
   upload: UploadIcon,
@@ -278,6 +284,8 @@ const icons = {
   wifi: WifiIcon,
   wrench: WrenchIcon,
   x: XIcon,
+  zap: ZapIcon,
+  zap_off: ZapOffIcon,
   _unknown: ShieldAlertIcon,
 
   empty: (props: HTMLAttributes<HTMLSpanElement>) => <div {...props} />,

packages/ui/src/components/Table.tsx

@@ -1,4 +1,5 @@
 import classNames from "classnames";
+import type { HTMLAttributes } from "react";
 import type { ReactNode } from "react";
 
 export function Table({
@@ -28,9 +29,14 @@ export function Table({
   );
 }
 
-export function TableBody({ children }: { children: ReactNode }) {
+export function TableBody({ children, className }: { children: ReactNode; className?: string }) {
   return (
-    <tbody className="[&>tr:not(:last-child)>td]:border-b [&>tr:not(:last-child)>td]:border-b-surface-highlight">
+    <tbody
+      className={classNames(
+        className,
+        "[&>tr:not(:last-child)>td]:border-b [&>tr:not(:last-child)>td]:border-b-surface-highlight",
+      )}
+    >
       {children}
     </tbody>
   );
@@ -49,8 +55,19 @@ export function TableHead({ children, className }: { children: ReactNode; classN
   );
 }
 
-export function TableRow({ children }: { children: ReactNode }) {
-  return <tr>{children}</tr>;
+export function TableRow({
+  children,
+  className,
+  ...props
+}: {
+  children: ReactNode;
+  className?: string;
+} & HTMLAttributes<HTMLTableRowElement>) {
+  return (
+    <tr className={className} {...props}>
+      {children}
+    </tr>
+  );
 }
 
 export function TableCell({
@@ -98,7 +115,7 @@ export function TableHeaderCell({
     <th
       className={classNames(
         className,
-        "py-2 [&:not(:first-child)]:pl-4 text-left text-text-subtle",
+        "whitespace-nowrap py-2 [&:not(:first-child)]:pl-4 text-left text-text-subtle",
       )}
     >
       {children}