Hook up theme and clear responses

src-web/components/Dropdown.tsx

@@ -56,76 +56,26 @@ export function DropdownMenuRadio({
   );
 }
 
-export function Dropdown() {
-  const [bookmarksChecked, setBookmarksChecked] = useState(true);
-  const [urlsChecked, setUrlsChecked] = useState(false);
-  const [person, setPerson] = useState('pedro');
+export interface DropdownProps {
+  children: ReactNode;
+  items: {
+    label: string;
+    onSelect?: () => void;
+    disabled?: boolean;
+  }[];
+}
 
+export function Dropdown({ children, items }: DropdownProps) {
   return (
     <DropdownMenu.Root>
-      <DropdownMenu.Trigger asChild>
-        <Button aria-label="Customise options">
-          <HamburgerMenuIcon />
-        </Button>
-      </DropdownMenu.Trigger>
-
+      <DropdownMenuTrigger>{children}</DropdownMenuTrigger>
       <DropdownMenuPortal>
         <DropdownMenuContent>
-          <DropdownMenuItem rightSlot={<HotKey>⌘T</HotKey>}>New Tab</DropdownMenuItem>
-          <DropdownMenuItem rightSlot={<HotKey>⌘N</HotKey>}>New Window</DropdownMenuItem>
-          <DropdownMenuItem disabled rightSlot={<HotKey>⇧⌘N</HotKey>}>
-            New Private Window
-          </DropdownMenuItem>
-          <DropdownMenu.Sub>
-            <DropdownMenuSubTrigger rightSlot={<ChevronRightIcon />}>
-              More Tools
-            </DropdownMenuSubTrigger>
-            <DropdownMenuPortal>
-              <DropdownMenuSubContent>
-                <DropdownMenuItem rightSlot={<HotKey>⌘S</HotKey>}>Save Page As…</DropdownMenuItem>
-                <DropdownMenuItem>Create Shortcut…</DropdownMenuItem>
-                <DropdownMenuItem>Name Window…</DropdownMenuItem>
-                <DropdownMenuSeparator />
-                <DropdownMenuItem>Developer Tools</DropdownMenuItem>
-              </DropdownMenuSubContent>
-            </DropdownMenuPortal>
-          </DropdownMenu.Sub>
-
-          <DropdownMenuSeparator />
-
-          <DropdownMenuCheckboxItem
-            checked={bookmarksChecked}
-            onCheckedChange={(v) => setBookmarksChecked(!!v)}
-            rightSlot={<HotKey>⌘B</HotKey>}
-            leftSlot={
-              <DropdownMenu.ItemIndicator className="DropdownMenuItemIndicator">
-                <CheckIcon />
-              </DropdownMenu.ItemIndicator>
-            }
-          >
-            Show Bookmarks
-          </DropdownMenuCheckboxItem>
-          <DropdownMenuCheckboxItem
-            checked={urlsChecked}
-            onCheckedChange={(v) => setUrlsChecked(!!v)}
-            leftSlot={
-              <DropdownMenu.ItemIndicator className="DropdownMenuItemIndicator">
-                <CheckIcon />
-              </DropdownMenu.ItemIndicator>
-            }
-          >
-            Show Full URLs
-          </DropdownMenuCheckboxItem>
-
-          <DropdownMenuSeparator />
-
-          <DropdownMenuLabel>People</DropdownMenuLabel>
-          <DropdownMenu.RadioGroup value={person} onValueChange={setPerson}>
-            <DropdownMenuRadioItem value="pedro">Pedro Duarte</DropdownMenuRadioItem>
-            <DropdownMenuRadioItem className="DropdownMenuRadioItem" value="colm">
-              Colm Tuite
-            </DropdownMenuRadioItem>
-          </DropdownMenu.RadioGroup>
+          {items.map((item, i) => (
+            <DropdownMenuItem key={i} onSelect={() => item.onSelect?.()} disabled={item.disabled}>
+              {item.label}
+            </DropdownMenuItem>
+          ))}
         </DropdownMenuContent>
       </DropdownMenuPortal>
     </DropdownMenu.Root>
@@ -157,7 +107,7 @@ const DropdownMenuContent = forwardRef<HTMLDivElement, DropdownMenu.DropdownMenu
       <DropdownMenu.Content
         ref={ref}
         align="start"
-        className={classnames(className, dropdownMenuClasses, 'mt-1')}
+        className={classnames(className, dropdownMenuClasses, 'm-0.5')}
         {...props}
       >
         {children}
@@ -173,12 +123,14 @@ function DropdownMenuItem({
   rightSlot,
   className,
   children,
+  disabled,
   ...props
 }: DropdownMenuItemProps) {
   return (
     <DropdownMenu.Item
       asChild
-      className={classnames(className, { 'opacity-30': props.disabled })}
+      disabled={disabled}
+      className={classnames(className, { 'opacity-30': disabled })}
       {...props}
     >
       <ItemInner leftSlot={leftSlot} rightSlot={rightSlot}>
@@ -311,7 +263,7 @@ const ItemInner = forwardRef<HTMLDivElement, ItemInnerProps>(function ItemInner(
       )}
       {...props}
     >
-      <div className="w-7">{leftSlot}</div>
+      {leftSlot && <div className="w-7">{leftSlot}</div>}
       <div>{children}</div>
       {rightSlot && <div className="ml-auto pl-3">{rightSlot}</div>}
     </div>

src-web/components/Icon.tsx

@@ -3,14 +3,25 @@ import {
   CameraIcon,
   GearIcon,
   HomeIcon,
+  MoonIcon,
   PaperPlaneIcon,
+  SunIcon,
   TriangleDownIcon,
   UpdateIcon,
 } from '@radix-ui/react-icons';
 import classnames from 'classnames';
 import { NamedExoticComponent } from 'react';
 
-type IconName = 'archive' | 'home' | 'camera' | 'gear' | 'triangle-down' | 'paper-plane' | 'update';
+type IconName =
+  | 'archive'
+  | 'home'
+  | 'camera'
+  | 'gear'
+  | 'triangle-down'
+  | 'paper-plane'
+  | 'update'
+  | 'sun'
+  | 'moon';
 
 const icons: Record<IconName, NamedExoticComponent<{ className: string }>> = {
   'paper-plane': PaperPlaneIcon,
@@ -20,6 +31,8 @@ const icons: Record<IconName, NamedExoticComponent<{ className: string }>> = {
   gear: GearIcon,
   home: HomeIcon,
   update: UpdateIcon,
+  sun: SunIcon,
+  moon: MoonIcon,
 };
 
 export interface IconProps {

src-web/components/Input.tsx

@@ -47,7 +47,7 @@ export function Input({
           id={id}
           className={classnames(
             className,
-            'bg-transparent min-w-0 pl-3 pr-2 w-full focus:outline-none',
+            'bg-transparent min-w-0 pl-3 pr-2 w-full focus:outline-none text-gray-900',
             leftSlot && 'pl-1',
             rightSlot && 'pr-1',
             size === 'md' && 'h-10',

src-web/components/Sidebar.tsx

@@ -1,32 +1,22 @@
-import { HTMLAttributes } from 'react';
+import React, { HTMLAttributes } from 'react';
 import classnames from 'classnames';
+import { IconButton } from './IconButton';
+import { Button } from './Button';
+import useTheme from '../hooks/useTheme';
 import { HStack } from './Stacks';
 import { WindowDragRegion } from './WindowDragRegion';
-import { IconButton } from './IconButton';
-import { DropdownMenuRadio } from './Dropdown';
-import { Button } from './Button';
 
-type Props = HTMLAttributes<HTMLDivElement>;
+type Props = Omit<HTMLAttributes<HTMLDivElement>, 'children'>;
 
 export function Sidebar({ className, ...props }: Props) {
+  const { toggleTheme } = useTheme();
   return (
     <div
       className={classnames(className, 'w-52 bg-gray-50/40 h-full border-gray-500/10')}
       {...props}
     >
-      <HStack as={WindowDragRegion} className="pl-24 px-1" items="center" justify="end">
-        <IconButton icon="archive" />
-        <DropdownMenuRadio
-          onValueChange={null}
-          value={'get'}
-          items={[
-            { label: 'This is a cool one', value: 'get' },
-            { label: 'But this one is better', value: 'put' },
-            { label: 'This one is just alright', value: 'post' },
-          ]}
-        >
-          <IconButton icon="camera" />
-        </DropdownMenuRadio>
+      <HStack as={WindowDragRegion} items="center" className="pr-1" justify="end">
+        <IconButton size="sm" icon="sun" onClick={toggleTheme} />
       </HStack>
       <ul className="mx-2 py-2">
         {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map((i) => (

src-web/components/UrlBar.tsx

@@ -28,7 +28,7 @@ export function UrlBar({ sendRequest, onMethodChange, method, onUrlChange, url }
   };
 
   return (
-    <form onSubmit={handleSendRequest} className="w-full flex items-center">
+    <form onSubmit={handleSendRequest} className="w-full flex items-center overflow-hidden">
       <Input
         hideLabel
         size="sm"