Added react-router

src-web/components/Button.tsx

@@ -1,29 +1,29 @@
-import { ButtonHTMLAttributes, forwardRef } from 'react';
+import { ButtonHTMLAttributes, ComponentPropsWithoutRef, ElementType } from 'react';
 import classnames from 'classnames';
 import { Icon } from './Icon';
 
-export type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
+export interface ButtonProps<T extends ElementType>
+  extends ButtonHTMLAttributes<HTMLButtonElement> {
   color?: 'primary' | 'secondary';
   size?: 'xs' | 'sm' | 'md';
   justify?: 'start' | 'center';
   forDropdown?: boolean;
-};
+  as?: T;
+}
 
-export const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button(
-  {
-    className,
-    justify = 'center',
-    children,
-    size = 'md',
-    forDropdown,
-    color,
-    ...props
-  }: ButtonProps,
-  ref,
-) {
+export function Button<T extends ElementType>({
+  className,
+  as,
+  justify = 'center',
+  children,
+  size = 'md',
+  forDropdown,
+  color,
+  ...props
+}: ButtonProps<T> & Omit<ComponentPropsWithoutRef<T>, keyof ButtonProps<T>>) {
+  const Component = as || 'button';
   return (
-    <button
-      ref={ref}
+    <Component
       className={classnames(
         className,
         'rounded-md flex items-center',
@@ -41,6 +41,6 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button
     >
       {children}
       {forDropdown && <Icon icon="triangle-down" className="ml-1 -mr-1" />}
-    </button>
+    </Component>
   );
-});
+}

src-web/components/Dropdown.tsx

@@ -1,16 +1,9 @@
 import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
 import { DropdownMenuRadioGroup } from '@radix-ui/react-dropdown-menu';
 import { motion } from 'framer-motion';
-import {
-  CheckIcon,
-  ChevronRightIcon,
-  DotFilledIcon,
-  HamburgerMenuIcon,
-} from '@radix-ui/react-icons';
-import { forwardRef, HTMLAttributes, ReactNode, useState } from 'react';
-import { Button } from './Button';
+import { CheckIcon } from '@radix-ui/react-icons';
+import { forwardRef, HTMLAttributes, ReactNode } from 'react';
 import classnames from 'classnames';
-import { HotKey } from './HotKey';
 
 interface DropdownMenuRadioProps {
   children: ReactNode;
@@ -232,13 +225,19 @@ function DropdownMenuSeparator({ className, ...props }: DropdownMenu.DropdownMen
   );
 }
 
-function DropdownMenuTrigger({ className, ...props }: DropdownMenu.DropdownMenuTriggerProps) {
+function DropdownMenuTrigger({
+  children,
+  className,
+  ...props
+}: DropdownMenu.DropdownMenuTriggerProps) {
   return (
     <DropdownMenu.Trigger
       asChild
       className={classnames(className, 'focus:outline-none')}
       {...props}
-    />
+    >
+      <>{children}</>
+    </DropdownMenu.Trigger>
   );
 }
 

src-web/components/IconButton.tsx

@@ -1,16 +1,12 @@
-import { forwardRef } from 'react';
 import { Icon, IconProps } from './Icon';
 import { Button, ButtonProps } from './Button';
 
-type Props = Omit<IconProps, 'size'> & ButtonProps;
+type Props = Omit<IconProps, 'size'> & ButtonProps<typeof Button>;
 
-export const IconButton = forwardRef<HTMLButtonElement, Props>(function IconButton(
-  { icon, spin, ...props }: Props,
-  ref,
-) {
+export function IconButton({ icon, spin, ...props }: Props) {
   return (
-    <Button ref={ref} className="group" {...props}>
+    <Button className="group" {...props}>
       <Icon icon={icon} spin={spin} className="text-gray-700 group-hover:text-gray-900" />
     </Button>
   );
-});
+}

src-web/components/Sidebar.tsx

@@ -3,17 +3,19 @@ import classnames from 'classnames';
 import { IconButton } from './IconButton';
 import { Button } from './Button';
 import useTheme from '../hooks/useTheme';
-import { HStack } from './Stacks';
+import { HStack, VStack } from './Stacks';
 import { WindowDragRegion } from './WindowDragRegion';
 import { Request } from '../hooks/useWorkspaces';
 import { invoke } from '@tauri-apps/api';
+import { Link } from 'react-router-dom';
 
 interface Props extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
   workspaceId: string;
   requests: Request[];
+  requestId?: string;
 }
 
-export function Sidebar({ className, workspaceId, requests, ...props }: Props) {
+export function Sidebar({ className, requestId, workspaceId, requests, ...props }: Props) {
   const { toggleTheme } = useTheme();
   return (
     <div
@@ -35,11 +37,13 @@ export function Sidebar({ className, workspaceId, requests, ...props }: Props) {
           }}
         />
       </HStack>
-      <ul className="mx-2 py-2">
+      <VStack as="ul" className="py-2" space={1}>
         {requests.map((r) => (
-          <li key={r.id}>
+          <li key={r.id} className="mx-2">
             <Button
-              className={classnames('w-full', false && 'bg-gray-50')}
+              as={Link}
+              to={`/workspaces/${workspaceId}/requests/${r.id}`}
+              className={classnames('w-full', requestId === r.id && 'bg-gray-50')}
               size="sm"
               justify="start"
             >
@@ -47,7 +51,7 @@ export function Sidebar({ className, workspaceId, requests, ...props }: Props) {
             </Button>
           </li>
         ))}
-      </ul>
+      </VStack>
     </div>
   );
 }