Fix ButtonLink and edit request names

src-web/components/Button.tsx

@@ -1,6 +1,6 @@
 import classnames from 'classnames';
 import type { ComponentChildren } from 'preact';
-import type { ForwardedRef } from 'preact/compat';
+import { Link } from 'preact-router';
 import { forwardRef } from 'preact/compat';
 import { Icon } from './Icon';
 
@@ -15,11 +15,15 @@ const colorStyles = {
 };
 
 export type ButtonProps = {
+  href?: string;
   color?: keyof typeof colorStyles;
   size?: 'sm' | 'md';
   justify?: 'start' | 'center';
   type?: 'button' | 'submit';
   onClick?: (event: MouseEvent) => void;
+  onDoubleClick?: (event: MouseEvent) => void;
+  contentEditable?: boolean;
+  onKeyDown?: (event: KeyboardEvent) => void;
   forDropdown?: boolean;
   className?: string;
   children?: ComponentChildren;
@@ -28,21 +32,17 @@ export type ButtonProps = {
   tabIndex?: number;
 };
 
-export const Button = forwardRef(function Button(
-  {
-    className,
-    children,
-    forDropdown,
-    color,
-    justify = 'center',
-    size = 'md',
-    ...props
-  }: ButtonProps,
-  ref: ForwardedRef<HTMLButtonElement>,
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const Button = forwardRef<any, ButtonProps>(function Button(
+  { href, className, children, forDropdown, color, justify = 'center', size = 'md', ...props },
+  ref,
 ) {
+  // const Component = 'button';
+  const Component = typeof href === 'string' ? Link : 'button';
   return (
-    <button
+    <Component
       ref={ref}
+      href={href}
       className={classnames(
         className,
         'outline-none',
@@ -58,6 +58,6 @@ export const Button = forwardRef(function Button(
     >
       {children}
       {forDropdown && <Icon icon="triangleDown" className="ml-1 -mr-1" />}
-    </button>
+    </Component>
   );
 });

src-web/components/ButtonLink.tsx

@@ -1,5 +1,4 @@
 import classnames from 'classnames';
-import { Link } from 'preact-router';
 import type { ButtonProps } from './Button';
 import { Button } from './Button';
 
@@ -8,10 +7,12 @@ type Props = ButtonProps & {
 };
 
 export function ButtonLink({ href, className, ...buttonProps }: Props) {
-  const linkProps = { href };
   return (
-    <Link {...linkProps}>
-      <Button className={classnames(className, 'w-full')} tabIndex={-1} {...buttonProps} />
-    </Link>
+    <Button
+      href={href}
+      className={classnames(className, 'w-full')}
+      tabIndex={-1}
+      {...buttonProps}
+    />
   );
 }

src-web/components/Editor/Editor.tsx

@@ -96,15 +96,17 @@ export function _Editor({
         readOnly && 'cm-readonly',
       )}
     >
-      <IconButton
-        icon="eye"
-        className="absolute right-3 bottom-3 z-10"
-        onClick={() => {
-          const doc = cm.current?.view.state.doc ?? '';
-          const insert = formatSdl(doc.toString());
-          cm.current?.view.dispatch({ changes: { from: 0, to: doc.length, insert } });
-        }}
-      />
+      {contentType?.includes("graphql") && (
+        <IconButton
+          icon="eye"
+          className="absolute right-3 bottom-3 z-10"
+          onClick={() => {
+            const doc = cm.current?.view.state.doc ?? '';
+            const insert = formatSdl(doc.toString());
+            cm.current?.view.dispatch({ changes: { from: 0, to: doc.length, insert } });
+          }}
+        />
+      )}
     </div>
   );
 }

src-web/components/Sidebar.tsx

@@ -1,5 +1,7 @@
 import classnames from 'classnames';
-import { useRequestCreate } from '../hooks/useRequest';
+import { Link } from 'preact-router';
+import { useState } from 'react';
+import { useRequestCreate, useRequestUpdate } from '../hooks/useRequest';
 import { useTheme } from '../hooks/useTheme';
 import type { HttpRequest } from '../lib/models';
 import { ButtonLink } from './ButtonLink';
@@ -21,7 +23,7 @@ export function Sidebar({ className, activeRequestId, workspaceId, requests }: P
     <div
       className={classnames(
         className,
-        'min-w-[10rem] bg-gray-100 h-full border-r border-gray-200 relative',
+        'min-w-[12rem] bg-gray-100 h-full border-r border-gray-200 relative',
       )}
     >
       <HStack as={WindowDragRegion} alignItems="center" justifyContent="end">
@@ -52,22 +54,48 @@ export function Sidebar({ className, activeRequestId, workspaceId, requests }: P
 }
 
 function SidebarItem({ request, active }: { request: HttpRequest; active: boolean }) {
+  const updateRequest = useRequestUpdate(request);
+  const [editing, setEditing] = useState<boolean>(false);
+  const handleSubmitNameEdit = async (el: HTMLInputElement) => {
+    await updateRequest.mutate({ name: el.value });
+    setEditing(false);
+  };
+
+  const handleFocus = (el: HTMLInputElement | null) => {
+    el?.focus();
+  };
+
   return (
-    <li key={request.id}>
+    <li key={request.id} className="flex">
       <ButtonLink
         color="custom"
-        href={`/workspaces/${request.workspaceId}/requests/${request.id}`}
-        disabled={active}
+        size="sm"
         className={classnames(
           'w-full',
           active
             ? 'bg-gray-200/70 text-gray-900'
             : 'text-gray-600 hover:text-gray-800 active:bg-gray-200/30',
         )}
-        size="sm"
+        href={`/workspaces/${request.workspaceId}/requests/${request.id}`}
+        contentEditable={editing}
+        onDoubleClick={() => setEditing(true)}
         justify="start"
       >
-        {request.name || request.url}
+        {editing ? (
+          <input
+            ref={handleFocus}
+            defaultValue={request.name}
+            className="bg-transparent outline-none"
+            onBlur={(e) => handleSubmitNameEdit(e.currentTarget)}
+            onKeyDown={async (e) => {
+              if (e.key === 'Enter') {
+                await handleSubmitNameEdit(e.currentTarget);
+              }
+            }}
+          />
+        ) : (
+          request.name || request.url
+        )}
       </ButtonLink>
     </li>
   );