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,67 +3,69 @@
 @tailwind utilities;
 
 @layer base {
-    html, body, #root {
+  html,
-        @apply w-full h-full overflow-hidden bg-gray-50 text-gray-900;
+  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), border-color var(--transition-duration),
+      box-shadow var(--transition-duration);
+    font-variant-ligatures: none;
+  }
+
+  ::selection {
+    @apply bg-selection;
+  }
+
+  /* Disable user selection to make it more "app-like" */
+  :not(input):not(textarea),
+  :not(input):not(textarea)::after,
+  :not(input):not(textarea)::before {
+    @apply select-none cursor-default;
+  }
+
+  .hide-scrollbars {
+    &::-webkit-scrollbar-corner,
+    &::-webkit-scrollbar {
+      display: none !important;
+    }
+  }
+
+  /* Style the scrollbars */
+  * {
+    ::-webkit-scrollbar-corner,
+    ::-webkit-scrollbar {
+      @apply w-1.5 h-1.5;
     }
 
-    /* Setup default transitions for elements */
+    .scrollbar-track,
-    * {
+    ::-webkit-scrollbar-corner,
-        transition: background-color var(--transition-duration),
+    ::-webkit-scrollbar {
-        border-color var(--transition-duration),
+      @apply bg-transparent;
-        box-shadow var(--transition-duration);
     }
 
-    ::selection {
+    &:hover {
-        @apply bg-selection;
+      &.scrollbar-thumb,
+      &::-webkit-scrollbar-thumb {
+        @apply bg-gray-500/30 hover:bg-gray-500/50 rounded-full;
+      }
     }
+  }
 
-    /* Disable user selection to make it more "app-like" */
+  iframe {
-    :not(input):not(textarea),
+    &::-webkit-scrollbar-corner,
-    :not(input):not(textarea)::after,
+    &::-webkit-scrollbar {
-    :not(input):not(textarea)::before {
+      @apply bg-gray-100;
-        @apply select-none cursor-default;
     }
+  }
 
-    .hide-scrollbars {
+  :root {
-        &::-webkit-scrollbar-corner,
+    color-scheme: light dark;
-        &::-webkit-scrollbar {
+    --transition-duration: 100ms ease-in-out;
-            display: none !important;
+    --color-white: 255 100% 100%;
-        }
+    --color-black: 255 0% 0%;
-    }
+  }
-
-    /* Style the scrollbars */
-    * {
-        ::-webkit-scrollbar-corner,
-        ::-webkit-scrollbar {
-            @apply w-1.5 h-1.5;
-        }
-
-        .scrollbar-track,
-        ::-webkit-scrollbar-corner,
-        ::-webkit-scrollbar {
-            @apply bg-transparent;
-        }
-
-        &:hover {
-            &.scrollbar-thumb,
-            &::-webkit-scrollbar-thumb {
-                @apply bg-gray-500/30 hover:bg-gray-500/50 rounded-full;
-            }
-        }
-    }
-
-    iframe {
-        &::-webkit-scrollbar-corner,
-        &::-webkit-scrollbar {
-            @apply bg-gray-100;
-        }
-    }
-
-    :root {
-        color-scheme: light dark;
-        --transition-duration: 100ms ease-in-out;
-        --color-white: 255 100% 100%;
-        --color-black: 255 0% 0%;
-    }
 }