Split request upsert command

src-web/components/Button.tsx

@@ -42,7 +42,7 @@ export const Button = forwardRef(function Button<T extends ElementType>(
         justify === 'center' && 'justify-center',
         size === 'md' && 'h-10 px-4',
         size === 'sm' && 'h-8 px-3 text-sm',
-        size === 'xs' && 'h-6 px-2 text-sm',
+        size === 'xs' && 'h-7 px-3 text-sm',
         color === undefined && 'hover:bg-gray-500/[0.1] text-gray-800 hover:text-gray-900',
         color === 'primary' && 'bg-blue-500 hover:bg-blue-500/90 text-white',
         color === 'secondary' && 'bg-violet-500 hover:bg-violet-500/90 text-white',

src-web/components/Editor/extensions.ts

@@ -47,12 +47,12 @@ export const myHighlightStyle = HighlightStyle.define([
     color: '#757b93',
     fontStyle: 'italic',
   },
-  { tag: [t.name, t.tagName, t.angleBracket, t.docString], color: '#4699de' },
+  { tag: [t.name, t.tagName, t.angleBracket, t.docString], color: 'hsl(var(--color-blue-500))' },
   { tag: [t.variableName], color: '#31c434' },
   { tag: [t.bool], color: '#e864f6' },
-  { tag: [t.attributeName], color: '#a773ff' },
-  { tag: [t.attributeValue], color: '#ff964b' },
-  { tag: [t.string], color: '#e8b045' },
+  { tag: [t.attributeName], color: 'hsl(var(--color-violet-500))' },
+  { tag: [t.attributeValue], color: 'hsl(var(--color-orange-500))' },
+  { tag: [t.string], color: 'hsl(var(--color-yellow-500))' },
   { tag: [t.keyword, t.meta], color: '#45e8a4' },
 ]);
 

src-web/components/Sidebar.tsx

@@ -31,7 +31,7 @@ export function Sidebar({ className, activeRequestId, workspaceId, requests, ...
           onClick={() => createRequest.mutate({ name: 'Test Request' })}
         />
       </HStack>
-      <VStack as="ul" className="py-2" space={1}>
+      <VStack as="ul" className="py-3" space={1}>
         {requests.map((r) => (
           <SidebarItem key={r.id} request={r} active={r.id === activeRequestId} />
         ))}
@@ -42,12 +42,12 @@ export function Sidebar({ className, activeRequestId, workspaceId, requests, ...
 
 function SidebarItem({ request, active }: { request: HttpRequest; active: boolean }) {
   return (
-    <li key={request.id} className="mx-2">
+    <li key={request.id} className="mx-3">
       <Button
         as={Link}
         to={`/workspaces/${request.workspaceId}/requests/${request.id}`}
         className={classnames('w-full', active && 'bg-gray-50')}
-        size="sm"
+        size="xs"
         justify="start"
       >
         {request.name}