diff --git a/src-web/components/Sidebar.tsx b/src-web/components/Sidebar.tsx index f8bb8412..e120192f 100644 --- a/src-web/components/Sidebar.tsx +++ b/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( /> ) : ( - {itemName || 'New Request'} + {itemName || itemFallbackName || 'New Request'} )} {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 ''; + } +} diff --git a/src-web/hooks/useCreateRequest.ts b/src-web/hooks/useCreateRequest.ts index 926aa89b..2f2a4658 100644 --- a/src-web/hooks/useCreateRequest.ts +++ b/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) => { diff --git a/src-web/main.css b/src-web/main.css index 3557e35e..d64a736d 100644 --- a/src-web/main.css +++ b/src-web/main.css @@ -3,67 +3,69 @@ @tailwind utilities; @layer base { - html, body, #root { - @apply w-full h-full overflow-hidden bg-gray-50 text-gray-900; + 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), 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 */ - * { - transition: background-color var(--transition-duration), - border-color var(--transition-duration), - box-shadow var(--transition-duration); + .scrollbar-track, + ::-webkit-scrollbar-corner, + ::-webkit-scrollbar { + @apply bg-transparent; } - ::selection { - @apply bg-selection; + &:hover { + &.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" */ - :not(input):not(textarea), - :not(input):not(textarea)::after, - :not(input):not(textarea)::before { - @apply select-none cursor-default; + iframe { + &::-webkit-scrollbar-corner, + &::-webkit-scrollbar { + @apply bg-gray-100; } + } - .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; - } - - .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%; - } + :root { + color-scheme: light dark; + --transition-duration: 100ms ease-in-out; + --color-white: 255 100% 100%; + --color-black: 255 0% 0%; + } }