Dropdown highlight

src-web/components/Sidebar.tsx

@@ -155,6 +155,7 @@ function SidebarItem({ request, active }: { request: HttpRequest; active: boolea
         }}
         to={`/workspaces/${request.workspaceId}/requests/${request.id}`}
         onDoubleClick={() => setEditing(true)}
+        onClick={active ? () => setEditing(true) : undefined}
         justify="start"
       >
         {editing ? (
@@ -175,7 +176,14 @@ function SidebarItem({ request, active }: { request: HttpRequest; active: boolea
             }}
           />
         ) : (
-          <span className="truncate">{request.name || request.url}</span>
+          <span
+            className={classnames(
+              'truncate',
+              !(request.name || request.url) && 'text-gray-400 italic',
+            )}
+          >
+            {request.name || request.url || 'New Request'}
+          </span>
         )}
       </Button>
       <Dropdown

src-web/components/core/Dropdown.tsx

@@ -140,7 +140,7 @@ const DropdownMenuContent = forwardRef<HTMLDivElement, D.DropdownMenuContentProp
         align="start"
         className={classnames(
           className,
-          'bg-gray-50 rounded-md shadow-lg p-1.5 border border-gray-200',
+          'bg-gray-50 rounded-md shadow-lg dark:shadow-gray-0 p-1.5 border border-gray-200',
           'overflow-auto m-1',
         )}
         style={styles}
@@ -295,8 +295,8 @@ const ItemInner = forwardRef<HTMLDivElement, ItemInnerProps>(function ItemInner(
       ref={ref}
       className={classnames(
         className,
-        'outline-none px-2 py-1.5 flex items-center text-sm text-gray-700 whitespace-nowrap pr-4',
-        !noHover && 'focus:bg-gray-50 focus:text-gray-900 rounded',
+        'min-w-[8rem] outline-none px-2 h-7 flex items-center text-sm text-gray-700 whitespace-nowrap pr-4',
+        !noHover && 'focus:bg-highlight focus:text-gray-900 rounded',
       )}
       {...props}
     >

src-web/components/core/Editor/Editor.css

@@ -163,7 +163,7 @@
         }
 
         & > ul > li[aria-selected] {
-            @apply bg-gray-100 text-gray-900;
+            @apply bg-highlight text-gray-900;
         }
 
         & > ul > li:hover {

tailwind.config.cjs

@@ -21,6 +21,7 @@ module.exports = {
       "5xl": "3.052rem"
     },
     colors: {
+      highlight: "hsl(var(--color-gray-200) / 0.3)",
       transparent: "transparent",
       white: "hsl(0 100% 100% / <alpha-value>)",
       black: "hsl(0 100% 0% / <alpha-value>)",