Default request name to URL(ish)

src-web/components/Sidebar.tsx

@@ -426,6 +426,9 @@ function SidebarItems({
             selected={selectedId === child.item.id}
             itemId={child.item.id}
             itemName={child.item.name}
+            itemFallbackName={
+              child.item.model === 'http_request' ? defaultRequestName(child.item) : 'New Folder'
+            }
             itemModel={child.item.model}
             onMove={handleMove}
             onEnd={handleEnd}
@@ -468,6 +471,7 @@ type SidebarItemProps = {
   className?: string;
   itemId: string;
   itemName: string;
+  itemFallbackName: string;
   itemModel: string;
   useProminentStyles?: boolean;
   selected?: boolean;
@@ -483,6 +487,7 @@ const SidebarItem = forwardRef(function SidebarItem(
     children,
     className,
     itemName,
+    itemFallbackName,
     itemId,
     itemModel,
     useProminentStyles,
@@ -581,7 +586,7 @@ const SidebarItem = forwardRef(function SidebarItem(
         .then((r) => console.log(r))
         .catch((e) => console.log(e));
     },
-    [itemModel, sendRequest, deleteRequest, sendManyRequests, child.children],
+    [itemModel, sendRequest, deleteRequest, sendManyRequests, child.children, deleteFolder],
   );
 
   const handleSelect = useCallback(() => onSelect(itemId), [onSelect, itemId]);
@@ -662,7 +667,7 @@ const SidebarItem = forwardRef(function SidebarItem(
             isActive && 'bg-highlightSecondary text-gray-800',
             !isActive &&
               'text-gray-600 group-hover/item:text-gray-800 active:bg-highlightSecondary',
-            selected && useProminentStyles && '!bg-violet-400/20 text-gray-950',
+            selected && useProminentStyles && '!bg-violet-400/20 text-gray-800',
           )}
         >
           {itemModel === 'folder' && (
@@ -685,7 +690,7 @@ const SidebarItem = forwardRef(function SidebarItem(
             />
           ) : (
             <span className={classNames('truncate', !itemName && 'text-gray-400 italic')}>
-              {itemName || 'New Request'}
+              {itemName || itemFallbackName || 'New Request'}
             </span>
           )}
           {latestResponse && (
@@ -773,3 +778,16 @@ function DraggableSidebarItem({
     />
   );
 }
+
+function defaultRequestName(r: HttpRequest) {
+  if (!r.url) {
+    return 'New Request';
+  }
+
+  try {
+    const url = new URL(r.url);
+    return url.pathname != '/' ? url.host + url.pathname : url.host;
+  } catch (_) {
+    return '';
+  }
+}

src-web/hooks/useCreateRequest.ts

@@ -23,9 +23,8 @@ export function useCreateRequest() {
       if (workspaceId === null) {
         throw new Error("Cannot create request when there's no active workspace");
       }
-      patch.name = patch.name || 'New Request';
       patch.sortPriority = patch.sortPriority || maxSortPriority(requests) + 1000;
-      return invoke('create_request', { workspaceId, ...patch });
+      return invoke('create_request', { workspaceId, name: '', ...patch });
     },
     onSettled: () => trackEvent('http_request', 'create'),
     onSuccess: async (request) => {

src-web/main.css

@@ -3,15 +3,17 @@
 @tailwind utilities;
 
 @layer base {
-    html, body, #root {
+  html,
+  body,
+  #root {
     @apply w-full h-full overflow-hidden bg-gray-50 text-gray-900;
   }
 
   /* Setup default transitions for elements */
   * {
-        transition: background-color var(--transition-duration),
+    transition: background-color var(--transition-duration), border-color var(--transition-duration),
-        border-color var(--transition-duration),
       box-shadow var(--transition-duration);
+    font-variant-ligatures: none;
   }
 
   ::selection {