Persist sort priority!

src-web/components/Sidebar.tsx

@@ -1,13 +1,20 @@
 import classnames from 'classnames';
-import type { MouseEvent as ReactMouseEvent } from 'react';
-import React, { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { DndProvider, useDrag, useDrop } from 'react-dnd';
+import type {
+  CSSProperties,
+  ForwardedRef,
+  KeyboardEvent,
+  MouseEvent as ReactMouseEvent,
+} from 'react';
+import React, { forwardRef, Fragment, memo, useCallback, useMemo, useRef, useState } from 'react';
+import type { XYCoord } from 'react-dnd';
+import { DndProvider, useDrag, useDragLayer, useDrop } from 'react-dnd';
 import { HTML5Backend } from 'react-dnd-html5-backend';
 import { useActiveRequest } from '../hooks/useActiveRequest';
 import { useCreateRequest } from '../hooks/useCreateRequest';
 import { useDeleteRequest } from '../hooks/useDeleteRequest';
 import { useKeyValue } from '../hooks/useKeyValue';
 import { useRequests } from '../hooks/useRequests';
+import { useUpdateAnyRequest } from '../hooks/useUpdateAnyRequest';
 import { useUpdateRequest } from '../hooks/useUpdateRequest';
 import { clamp } from '../lib/clamp';
 import type { HttpRequest } from '../lib/models';
@@ -15,6 +22,7 @@ import { Button } from './core/Button';
 import { Dropdown, DropdownMenuTrigger } from './core/Dropdown';
 import { Icon } from './core/Icon';
 import { IconButton } from './core/IconButton';
+import { ScrollArea } from './core/ScrollArea';
 import { HStack, VStack } from './core/Stacks';
 import { WindowDragRegion } from './core/WindowDragRegion';
 import { ToggleThemeButton } from './ToggleThemeButton';
@@ -82,15 +90,7 @@ export function Container({ className }: Props) {
   const sidebarWidth = width.value - 1; // Minus 1 for the border
 
   return (
-    <div
-      ref={sidebarRef}
-      style={sidebarStyles}
-      className={classnames(
-        className,
-        'relative',
-        'bg-gray-100 h-full border-r border-gray-200 relative grid grid-rows-[auto,1fr,auto]',
-      )}
-    >
+    <div className="relative">
       {/* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */}
       <div
         aria-hidden
@@ -105,32 +105,48 @@ export function Container({ className }: Props) {
           )}
         />
       </div>
-      <HStack as={WindowDragRegion} alignItems="center" justifyContent="end">
-        <IconButton
-          title="Add Request"
-          className="mx-1"
-          icon="plusCircle"
-          onClick={async () => {
-            await createRequest.mutate({ name: 'Test Request' });
-          }}
-        />
-      </HStack>
-      <VStack as="ul" className="py-3 overflow-auto h-full" space={1}>
-        <SidebarItems
-          sidebarWidth={sidebarWidth}
-          activeRequestId={activeRequest?.id}
-          requests={requests}
-        />
-      </VStack>
-      <HStack className="mx-1 pb-1" alignItems="center" justifyContent="end">
-        <ToggleThemeButton />
-      </HStack>
+      <div
+        ref={sidebarRef}
+        style={sidebarStyles}
+        className={classnames(
+          className,
+          'bg-gray-100 h-full border-r border-gray-200 relative grid grid-rows-[auto_minmax(0,1fr)_auto]',
+        )}
+      >
+        <HStack as={WindowDragRegion} alignItems="center" justifyContent="end">
+          <IconButton
+            title="Add Request"
+            className="mx-1"
+            icon="plusCircle"
+            onClick={async () => {
+              const lastRequest = requests[requests.length - 1];
+              await createRequest.mutate({
+                name: 'Test Request',
+                sortPriority: lastRequest?.sortPriority ?? 0 + 1,
+              });
+            }}
+          />
+        </HStack>
+        <ScrollArea>
+          <VStack as="ul" className="relative py-3" draggable={false}>
+            <SidebarItems
+              sidebarWidth={sidebarWidth}
+              activeRequestId={activeRequest?.id}
+              requests={requests}
+            />
+            {/*<CustomDragLayer sidebarWidth={sidebarWidth} />*/}
+          </VStack>
+        </ScrollArea>
+        <HStack className="mx-1 pb-1" alignItems="center" justifyContent="end">
+          <ToggleThemeButton />
+        </HStack>
+      </div>
     </div>
   );
 }
 
 function SidebarItems({
-  requests,
+  requests: unorderedRequests,
   activeRequestId,
   sidebarWidth,
 }: {
@@ -138,44 +154,85 @@ function SidebarItems({
   activeRequestId?: string;
   sidebarWidth: number;
 }) {
-  const [items, setItems] = useState(requests.map((r) => ({ request: r, left: 0, top: 0 })));
+  const [hoveredIndex, setHoveredIndex] = useState<number | null>(null);
+  const updateRequest = useUpdateAnyRequest();
+  const requests = useMemo(
+    () => [...unorderedRequests].sort((a, b) => a.sortPriority - b.sortPriority),
+    [unorderedRequests],
+  );
 
-  useEffect(() => {
-    setItems(requests.map((r) => ({ request: r, left: 0, top: 0 })));
-  }, [requests]);
+  const handleMove = useCallback<DraggableSidebarItemProps['onMove']>(
+    (id, side) => {
+      const dragIndex = requests.findIndex((r) => r.id === id);
+      setHoveredIndex(side === 'above' ? dragIndex : dragIndex + 1);
+    },
+    [requests],
+  );
 
-  const handleMove = useCallback((id: string, hoverId: string) => {
-    setItems((oldItems) => {
-      const dragIndex = oldItems.findIndex((i) => i.request.id === id);
-      const index = oldItems.findIndex((i) => i.request.id === hoverId);
-      const newItems = [...oldItems];
-      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-      const b = newItems[index]!;
-      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-      newItems[index] = newItems[dragIndex]!;
-      newItems[dragIndex] = b;
-      return newItems;
-    });
-  }, []);
+  const handleCancel = useCallback(() => setHoveredIndex(null), []);
+
+  const handleEnd = useCallback<DraggableSidebarItemProps['onEnd']>(
+    (requestId) => {
+      if (hoveredIndex === null) return;
+      setHoveredIndex(null);
+
+      const index = requests.findIndex((r) => r.id === requestId);
+      const request = requests[index];
+      if (request === undefined) return;
+
+      const newRequests = requests.filter((r) => r.id !== requestId);
+      if (hoveredIndex > index) {
+        newRequests.splice(hoveredIndex - 1, 0, request);
+      } else {
+        newRequests.splice(hoveredIndex, 0, request);
+      }
+
+      const beforePriority = newRequests[hoveredIndex - 1]?.sortPriority ?? 0;
+      const afterPriority = newRequests[hoveredIndex + 1]?.sortPriority ?? 0;
+
+      const shouldUpdateAll = afterPriority - beforePriority < 1;
+      if (shouldUpdateAll) {
+        newRequests.forEach((r, i) => {
+          updateRequest.mutate({ id: r.id, sortPriority: i * 1000 });
+        });
+      } else {
+        updateRequest.mutate({
+          id: requestId,
+          sortPriority: afterPriority - (afterPriority - beforePriority) / 2,
+        });
+      }
+    },
+    [hoveredIndex, requests],
+  );
 
   return (
     <>
-      {items.map(({ request }) => (
-        <DraggableSidebarItem
-          key={request.id}
-          requestId={request.id}
-          requestName={request.name}
-          workspaceId={request.workspaceId}
-          active={request.id === activeRequestId}
-          sidebarWidth={sidebarWidth}
-          onMove={handleMove}
-        />
-      ))}
+      {requests.map((r, i) => {
+        return (
+          <Fragment key={r.id}>
+            {hoveredIndex === i && <DropMarker />}
+            <DraggableSidebarItem
+              key={r.id}
+              requestId={r.id}
+              requestName={r.name}
+              workspaceId={r.workspaceId}
+              active={r.id === activeRequestId}
+              sidebarWidth={sidebarWidth}
+              onMove={handleMove}
+              onEnd={handleEnd}
+              onCancel={handleCancel}
+            />
+          </Fragment>
+        );
+      })}
+      {hoveredIndex === requests.length && <DropMarker />}
     </>
   );
 }
 
 type SidebarItemProps = {
+  className?: string;
+  buttonClassName?: string;
   requestId: string;
   requestName: string;
   workspaceId: string;
@@ -183,13 +240,18 @@ type SidebarItemProps = {
   active?: boolean;
 };
 
-const SidebarItem = memo(function SidebarItem({
-  requestName,
-  requestId,
-  workspaceId,
-  active,
-  sidebarWidth,
-}: SidebarItemProps) {
+const _SidebarItem = forwardRef(function SidebarItem(
+  {
+    className,
+    buttonClassName,
+    requestName,
+    requestId,
+    workspaceId,
+    active,
+    sidebarWidth,
+  }: SidebarItemProps,
+  ref: ForwardedRef<HTMLLIElement>,
+) {
   const deleteRequest = useDeleteRequest(requestId);
   const updateRequest = useUpdateRequest(requestId);
   const [editing, setEditing] = useState<boolean>(false);
@@ -205,17 +267,60 @@ const SidebarItem = memo(function SidebarItem({
   }, []);
 
   const itemStyles = useMemo(() => ({ width: sidebarWidth }), [sidebarWidth]);
+  const handleKeyDown = useCallback(
+    (e: KeyboardEvent<HTMLElement>) => {
+      // Hitting enter on active request during keyboard nav will start edit
+      if (active && e.key === 'Enter') {
+        e.preventDefault();
+        setEditing(true);
+      }
+    },
+    [active],
+  );
 
-  if (workspaceId === null) return null;
+  const handleInputKeyDown = useCallback(
+    async (e: KeyboardEvent<HTMLInputElement>) => {
+      switch (e.key) {
+        case 'Enter':
+          await handleSubmitNameEdit(e.currentTarget);
+          break;
+        case 'Escape':
+          setEditing(false);
+          break;
+      }
+    },
+    [active],
+  );
+
+  const actionItems = useMemo(
+    () => [
+      {
+        label: 'Delete Request',
+        onSelect: deleteRequest.mutate,
+        leftSlot: <Icon icon="trash" />,
+      },
+    ],
+    [],
+  );
 
   return (
-    <li className={classnames('block group/item px-2')} style={itemStyles}>
+    <li
+      ref={ref}
+      className={classnames(className, 'block group/item px-2 pb-1')}
+      style={itemStyles}
+    >
       <div className="relative w-full">
         <Button
           color="custom"
           size="sm"
+          to={`/workspaces/${workspaceId}/requests/${requestId}`}
           draggable={false} // Item should drag, not the link
+          onDoubleClick={() => setEditing(true)}
+          onClick={active ? () => setEditing(true) : undefined}
+          justify="start"
+          onKeyDown={handleKeyDown}
           className={classnames(
+            buttonClassName,
             'w-full',
             editing && 'focus-within:border-blue-400/40',
             active
@@ -224,17 +329,6 @@ const SidebarItem = memo(function SidebarItem({
             // Move out of the way when trash is shown
             'group-hover/item:pr-7',
           )}
-          onKeyDown={(e) => {
-            // Hitting enter on active request during keyboard nav will start edit
-            if (active && e.key === 'Enter') {
-              e.preventDefault();
-              setEditing(true);
-            }
-          }}
-          to={`/workspaces/${workspaceId}/requests/${requestId}`}
-          onDoubleClick={() => setEditing(true)}
-          onClick={active ? () => setEditing(true) : undefined}
-          justify="start"
         >
           {editing ? (
             <input
@@ -242,16 +336,7 @@ const SidebarItem = memo(function SidebarItem({
               defaultValue={requestName}
               className="bg-transparent outline-none w-full"
               onBlur={(e) => handleSubmitNameEdit(e.currentTarget)}
-              onKeyDown={async (e) => {
-                switch (e.key) {
-                  case 'Enter':
-                    await handleSubmitNameEdit(e.currentTarget);
-                    break;
-                  case 'Escape':
-                    setEditing(false);
-                    break;
-                }
-              }}
+              onKeyDown={handleInputKeyDown}
             />
           ) : (
             <span className={classnames('truncate', !requestName && 'text-gray-400 italic')}>
@@ -259,18 +344,7 @@ const SidebarItem = memo(function SidebarItem({
             </span>
           )}
         </Button>
-        <Dropdown
-          items={useMemo(
-            () => [
-              {
-                label: 'Delete Request',
-                onSelect: deleteRequest.mutate,
-                leftSlot: <Icon icon="trash" />,
-              },
-            ],
-            [],
-          )}
-        >
+        <Dropdown items={actionItems}>
           <DropdownMenuTrigger
             className={classnames(
               'absolute right-0 top-0 transition-opacity opacity-0',
@@ -290,13 +364,18 @@ const SidebarItem = memo(function SidebarItem({
     </li>
   );
 });
+const SidebarItem = memo(_SidebarItem);
 
 type DraggableSidebarItemProps = SidebarItemProps & {
-  onMove: (id: string, hoverId: string) => void;
+  onMove: (id: string, side: 'above' | 'below') => void;
+  onEnd: (id: string) => void;
+  onCancel: () => void;
 };
 
 type DragItem = {
   id: string;
+  workspaceId: string;
+  requestName: string;
 };
 
 const DraggableSidebarItem = memo(function DraggableSidebarItem({
@@ -306,37 +385,108 @@ const DraggableSidebarItem = memo(function DraggableSidebarItem({
   active,
   sidebarWidth,
   onMove,
+  onEnd,
+  onCancel,
 }: DraggableSidebarItemProps) {
-  const ref = useRef<HTMLDivElement>(null);
+  const ref = useRef<HTMLLIElement>(null);
 
   const [, connectDrop] = useDrop<DragItem, void>({
     accept: ItemTypes.REQUEST,
     collect: (m) => ({ handlerId: m.getHandlerId(), isOver: m.isOver() }),
-    hover: (item) => {
-      if (item.id !== requestId) {
-        onMove(requestId, item.id);
-      }
+    hover: (item, monitor) => {
+      if (!ref.current) return;
+      const hoverBoundingRect = ref.current?.getBoundingClientRect();
+
+      const hoverMiddleY = (hoverBoundingRect.bottom - hoverBoundingRect.top) / 2;
+      const clientOffset = monitor.getClientOffset();
+      const hoverClientY = (clientOffset as XYCoord).y - hoverBoundingRect.top;
+      onMove(requestId, hoverClientY < hoverMiddleY ? 'above' : 'below');
     },
   });
 
-  const [{ isDragging }, connectDrag] = useDrag<DragItem, unknown, { isDragging: boolean }>(() => ({
-    type: ItemTypes.REQUEST,
-    item: () => ({ id: requestId }),
-    collect: (m) => ({ isDragging: m.isDragging() }),
-  }));
+  const [{ isDragging }, connectDrag, preview] = useDrag<
+    DragItem,
+    unknown,
+    { isDragging: boolean }
+  >(
+    () => ({
+      type: ItemTypes.REQUEST,
+      item: () => ({ id: requestId, requestName, workspaceId }),
+      collect: (m) => ({ isDragging: m.isDragging() }),
+      options: { dropEffect: 'move' },
+      end: (item, monitor) => {
+        if (monitor.didDrop()) {
+          onEnd(requestId);
+        } else {
+          onCancel();
+        }
+      },
+    }),
+    [onEnd],
+  );
+
+  // preview(getEmptyImage(), { captureDraggingState: true });
 
   connectDrag(ref);
   connectDrop(ref);
 
   return (
-    <div ref={ref} className={classnames(isDragging && 'opacity-0')}>
-      <SidebarItem
-        requestName={requestName}
-        requestId={requestId}
-        workspaceId={workspaceId}
-        active={active}
-        sidebarWidth={sidebarWidth}
-      />
-    </div>
+    <SidebarItem
+      ref={ref}
+      className={classnames(isDragging && 'opacity-30')}
+      requestName={requestName}
+      requestId={requestId}
+      workspaceId={workspaceId}
+      active={active}
+      sidebarWidth={sidebarWidth}
+    />
   );
 });
+
+function CustomDragLayer({ sidebarWidth }: { sidebarWidth: number }) {
+  const { itemType, isDragging, item, currentOffset } = useDragLayer<any, DragItem>((monitor) => ({
+    item: monitor.getItem(),
+    itemType: monitor.getItemType(),
+    currentOffset: monitor.getSourceClientOffset(),
+    isDragging: monitor.isDragging(),
+  }));
+
+  const styles = useMemo<CSSProperties>(() => {
+    if (currentOffset === null) {
+      return { display: 'none' };
+    }
+    const transform = `translate(${currentOffset.x}px, ${currentOffset.y}px)`;
+    return { transform, WebkitTransform: transform };
+  }, [currentOffset]);
+
+  if (!isDragging) {
+    return null;
+  }
+
+  return (
+    <div className="fixed !pointer-events-none inset-0">
+      <div className="absolute pointer-events-none" style={styles}>
+        {itemType === ItemTypes.REQUEST && (
+          <SidebarItem
+            buttonClassName="bg-violet-500/10"
+            sidebarWidth={sidebarWidth}
+            workspaceId={item.workspaceId}
+            requestName={item.requestName}
+            requestId={item.id}
+          />
+        )}
+      </div>
+    </div>
+  );
+}
+
+const DropMarker = memo(
+  function DropMarker() {
+    return (
+      <div className="relative w-full h-0 overflow-visible pointer-events-none">
+        <div className="absolute z-20 left-0 right-0 bottom-[1px] h-[0.2em] bg-blue-300" />
+      </div>
+    );
+  },
+  () => true,
+);

src-web/components/UrlBar.tsx

@@ -26,6 +26,7 @@ export const UrlBar = memo(function UrlBar({ request }: Props) {
       className="w-full flex items-center"
     >
       <Input
+        key={request.id}
         hideLabel
         useEditor={{
           useTemplating: true,

src-web/components/Workspace.tsx

@@ -1,13 +1,9 @@
-import { DropdownMenuSeparator } from '@radix-ui/react-dropdown-menu';
 import classnames from 'classnames';
-import { useNavigate } from 'react-router-dom';
 import { useWindowSize } from 'react-use';
 import { useActiveRequest } from '../hooks/useActiveRequest';
 import { useActiveWorkspace } from '../hooks/useActiveWorkspace';
 import { useDeleteRequest } from '../hooks/useDeleteRequest';
-import { useWorkspaces } from '../hooks/useWorkspaces';
-import { Button } from './core/Button';
-import { Dropdown, DropdownMenuRadio, DropdownMenuTrigger } from './core/Dropdown';
+import { Dropdown, DropdownMenuTrigger } from './core/Dropdown';
 import { Icon } from './core/Icon';
 import { IconButton } from './core/IconButton';
 import { HStack } from './core/Stacks';
@@ -18,11 +14,9 @@ import { Sidebar } from './Sidebar';
 import { WorkspaceDropdown } from './WorkspaceDropdown';
 
 export default function Workspace() {
-  const navigate = useNavigate();
   const activeRequest = useActiveRequest();
   const activeWorkspace = useActiveWorkspace();
   const deleteRequest = useDeleteRequest(activeRequest?.id ?? null);
-  const workspaces = useWorkspaces();
   const { width } = useWindowSize();
   const isSideBySide = width > 900;
   if (activeWorkspace == null) {
@@ -40,7 +34,7 @@ export default function Workspace() {
           alignItems="center"
         >
           <div className="flex-1 -ml-2">
-            <WorkspaceDropdown />
+            <WorkspaceDropdown className="pointer-events-auto" />
           </div>
           <div className="flex-[2] text-center text-gray-700 text-sm truncate">
             {activeRequest?.name}

src-web/components/WorkspaceDropdown.tsx

@@ -1,3 +1,4 @@
+import classnames from 'classnames';
 import { useMemo } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { useActiveWorkspace } from '../hooks/useActiveWorkspace';
@@ -8,7 +9,11 @@ import type { DropdownItem } from './core/Dropdown';
 import { Dropdown, DropdownMenuTrigger } from './core/Dropdown';
 import { Icon } from './core/Icon';
 
-export function WorkspaceDropdown() {
+type Props = {
+  className?: string;
+};
+
+export function WorkspaceDropdown({ className }: Props) {
   const navigate = useNavigate();
   const workspaces = useWorkspaces();
   const activeWorkspace = useActiveWorkspace();
@@ -37,7 +42,7 @@ export function WorkspaceDropdown() {
   return (
     <Dropdown items={items}>
       <DropdownMenuTrigger>
-        <Button size="sm" className="!px-2 truncate" forDropdown>
+        <Button size="sm" className={classnames(className, '!px-2 truncate')} forDropdown>
           {activeWorkspace?.name ?? 'Unknown'}
         </Button>
       </DropdownMenuTrigger>

src-web/components/core/Button.tsx

@@ -43,7 +43,7 @@ const _Button = forwardRef<any, ButtonProps>(function Button(
     () =>
       classnames(
         className,
-        'outline-none pointer-events-auto',
+        'outline-none',
         'border border-transparent focus-visible:border-blue-300',
         'rounded-md flex items-center',
         colorStyles[color || 'default'],

src-web/components/core/Dropdown.tsx

@@ -143,7 +143,7 @@ const _DropdownMenuContent = forwardRef<HTMLDivElement, D.DropdownMenuContentPro
       const t = setTimeout(() => {
         const windowBox = document.documentElement.getBoundingClientRect();
         const menuBox = divRef.getBoundingClientRect();
-        const styles = { maxHeight: windowBox.height - menuBox.top - 5 - 45 };
+        const styles = { maxHeight: windowBox.height - menuBox.top - 5 };
         setStyles(styles);
       });
       return () => clearTimeout(t);

src-web/components/core/ScrollArea.tsx

@@ -9,8 +9,8 @@ interface Props {
 
 export function ScrollArea({ children, className }: Props) {
   return (
-    <S.Root className={classnames(className, 'group/scroll')} type="always">
-      <S.Viewport>{children}</S.Viewport>
+    <S.Root className={classnames(className, 'group/scroll overflow-hidden')} type="hover">
+      <S.Viewport className="h-full w-full">{children}</S.Viewport>
       <ScrollBar orientation="vertical" />
       <ScrollBar orientation="horizontal" />
       <S.Corner />
@@ -23,12 +23,12 @@ function ScrollBar({ orientation }: { orientation: 'vertical' | 'horizontal' })
     <S.Scrollbar
       orientation={orientation}
       className={classnames(
-        'flex bg-transparent rounded-full',
+        'scrollbar-track flex rounded-full',
         orientation === 'vertical' && 'w-1.5',
         orientation === 'horizontal' && 'h-1.5 flex-col',
       )}
     >
-      <S.Thumb className="flex-1 bg-gray-100 group-hover/scroll:bg-gray-200 rounded-full" />
+      <S.Thumb className="scrollbar-thumb flex-1 rounded-full" />
     </S.Scrollbar>
   );
 }

src-web/components/core/Stacks.tsx

@@ -1,5 +1,5 @@
 import classnames from 'classnames';
-import type { ComponentType, ReactNode } from 'react';
+import type { ComponentType, HTMLAttributes, ReactNode } from 'react';
 
 const gapClasses = {
   0: 'gap-0',
@@ -23,9 +23,9 @@ export function HStack({ className, space, children, ...props }: HStackProps) {
   );
 }
 
-export interface VStackProps extends BaseStackProps {
+export type VStackProps = BaseStackProps & {
   children: ReactNode;
-}
+};
 
 export function VStack({ className, space, children, ...props }: VStackProps) {
   return (
@@ -38,14 +38,12 @@ export function VStack({ className, space, children, ...props }: VStackProps) {
   );
 }
 
-interface BaseStackProps {
+type BaseStackProps = HTMLAttributes<HTMLElement> & {
   as?: ComponentType | 'ul';
   space?: keyof typeof gapClasses;
   alignItems?: 'start' | 'center';
   justifyContent?: 'start' | 'center' | 'end';
-  className?: string;
-  children?: ReactNode;
-}
+};
 
 function BaseStack({ className, alignItems, justifyContent, children, as }: BaseStackProps) {
   const Component = as ?? 'div';

src-web/hooks/useCreateRequest.ts

@@ -7,7 +7,8 @@ import { useActiveWorkspace } from './useActiveWorkspace';
 export function useCreateRequest({ navigateAfter }: { navigateAfter: boolean }) {
   const workspace = useActiveWorkspace();
   const navigate = useNavigate();
-  return useMutation<string, unknown, Pick<HttpRequest, 'name'>>({
+
+  return useMutation<string, unknown, Pick<HttpRequest, 'name' | 'sortPriority'>>({
     mutationFn: (patch) => {
       if (workspace === null) {
         throw new Error("Cannot create request when there's no active workspace");

src-web/hooks/useUpdateAnyRequest.ts

@@ -0,0 +1,26 @@
+import { useMutation } from '@tanstack/react-query';
+import { invoke } from '@tauri-apps/api';
+import type { HttpRequest } from '../lib/models';
+import { useRequests } from './useRequests';
+
+export function useUpdateAnyRequest() {
+  const requests = useRequests();
+  return useMutation<void, unknown, Partial<HttpRequest> & { id: string }>({
+    mutationFn: async (patch) => {
+      const request = requests.find((r) => r.id === patch.id) ?? null;
+      if (request === null) {
+        throw new Error("Can't update a null request");
+      }
+
+      const updatedRequest = { ...request, ...patch };
+
+      await invoke('update_request', {
+        request: {
+          ...updatedRequest,
+          createdAt: updatedRequest.createdAt.toISOString().replace('Z', ''),
+          updatedAt: updatedRequest.updatedAt.toISOString().replace('Z', ''),
+        },
+      });
+    },
+  });
+}

src-web/lib/models.ts

@@ -18,6 +18,7 @@ export interface HttpHeader {
 
 export interface HttpRequest extends BaseModel {
   readonly model: 'http_request';
+  sortPriority: number;
   name: string;
   url: string;
   body: string | null;

src-web/main.css

@@ -23,12 +23,28 @@
         cursor: default;
     }
 
+    .destroy-pointer-event,
+    .destroy-pointer-event * {
+        pointer-events: none !important;
+    }
+
     /* Style the scrollbars */
     ::-webkit-scrollbar-corner,
     ::-webkit-scrollbar {
-        @apply w-1.5 h-1.5 bg-gray-300/10;
+        @apply w-1.5 h-1.5;
     }
 
+    .scrollbar-track,
+    ::-webkit-scrollbar-corner,
+    ::-webkit-scrollbar {
+        @apply bg-gray-300/10;
+    }
+
+    ::-webkit-scrollbar-thumb {
+        @apply hover:bg-gray-300 rounded-full;
+    }
+
+    .scrollbar-thumb,
     ::-webkit-scrollbar-thumb {
         @apply bg-gray-200 hover:bg-gray-300 rounded-full;
     }