Hook up theme and clear responses

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) => (