Request fallback name in header

src-web/components/RecentRequestsDropdown.tsx

@@ -7,6 +7,7 @@ import { useActiveWorkspaceId } from '../hooks/useActiveWorkspaceId';
 import { useAppRoutes } from '../hooks/useAppRoutes';
 import { useRecentRequests } from '../hooks/useRecentRequests';
 import { useRequests } from '../hooks/useRequests';
+import { fallbackRequestName } from '../lib/fallbackRequestName';
 import type { ButtonProps } from './core/Button';
 import { Button } from './core/Button';
 import type { DropdownItem, DropdownRef } from './core/Dropdown';
@@ -98,7 +99,7 @@ export function RecentRequestsDropdown({ className }: Pick<ButtonProps, 'classNa
           activeRequest === null && 'text-opacity-disabled italic',
         )}
       >
-        {activeRequest?.name ?? 'No Request'}
+        {fallbackRequestName(activeRequest)}
       </Button>
     </Dropdown>
   );

src-web/components/Sidebar.tsx

@@ -27,6 +27,7 @@ import { useSidebarHidden } from '../hooks/useSidebarHidden';
 import { useUpdateAnyFolder } from '../hooks/useUpdateAnyFolder';
 import { useUpdateAnyRequest } from '../hooks/useUpdateAnyRequest';
 import { useUpdateRequest } from '../hooks/useUpdateRequest';
+import { fallbackRequestName } from '../lib/fallbackRequestName';
 import { NAMESPACE_NO_SYNC } from '../lib/keyValueStore';
 import type { Folder, HttpRequest, Workspace } from '../lib/models';
 import { isResponseLoading } from '../lib/models';
@@ -427,7 +428,7 @@ function SidebarItems({
             itemId={child.item.id}
             itemName={child.item.name}
             itemFallbackName={
-              child.item.model === 'http_request' ? defaultRequestName(child.item) : 'New Folder'
+              child.item.model === 'http_request' ? fallbackRequestName(child.item) : 'New Folder'
             }
             itemModel={child.item.model}
             onMove={handleMove}
@@ -471,7 +472,7 @@ type SidebarItemProps = {
   className?: string;
   itemId: string;
   itemName: string;
-  itemFallbackName: string | null;
+  itemFallbackName: string;
   itemModel: string;
   useProminentStyles?: boolean;
   selected?: boolean;
@@ -689,7 +690,7 @@ const SidebarItem = forwardRef(function SidebarItem(
               onKeyDown={handleInputKeyDown}
             />
           ) : (
-            <span className="truncate">{itemName || itemFallbackName || 'New Request'}</span>
+            <span className="truncate">{itemName || itemFallbackName}</span>
           )}
           {latestResponse && (
             <div className="ml-auto">
@@ -776,21 +777,3 @@ function DraggableSidebarItem({
     />
   );
 }
-
-function defaultRequestName(r: HttpRequest): string | null {
-  if (!r.url) {
-    return '';
-  }
-
-  const fixedUrl = r.url.match(/^https?:\/\//) ? r.url : 'http://' + r.url;
-
-  try {
-    const url = new URL(fixedUrl);
-    const pathname = url.pathname === '/' ? '' : url.pathname;
-    return `${url.host}${pathname}`;
-  } catch (_) {
-    // Nothing
-  }
-
-  return null;
-}

src-web/lib/fallbackRequestName.ts

@@ -0,0 +1,25 @@
+import type { HttpRequest } from './models';
+
+export function fallbackRequestName(r: HttpRequest | null): string {
+  if (r == null) return '';
+
+  if (r.name) {
+    return r.name;
+  }
+
+  if (r.url.trim() === '') {
+    return 'New Request';
+  }
+
+  const fixedUrl = r.url.match(/^https?:\/\//) ? r.url : 'http://' + r.url;
+
+  try {
+    const url = new URL(fixedUrl);
+    const pathname = url.pathname === '/' ? '' : url.pathname;
+    return `${url.host}${pathname}`;
+  } catch (_) {
+    // Nothing
+  }
+
+  return '';
+}