feat: display request method in sidebar

renderer/components/Sidebar/Collections/Collection/CollectionItem/RequestMethod/StyledWrapper.js

@@ -0,0 +1,11 @@
+import styled from 'styled-components';
+
+const Wrapper = styled.div`
+  .method-get { color:  var(--color-method-get);}
+  .method-post { color:  var(--color-method-post);}
+  .method-put { color:  var(--color-method-put);}
+  .method-delete { color:  var(--color-method-delete);}
+  .method-patch { color:  var(--color-method-patch);}
+`;
+
+export default Wrapper;

renderer/components/Sidebar/Collections/Collection/CollectionItem/RequestMethod/index.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import classnames from 'classnames';
+import StyledWrapper from './StyledWrapper';
+
+const RequestMethod = ({item}) => {
+  if(!['http-request', 'graphql-request'].includes(item.type)) {
+    return null;
+  }
+
+  const getClassname = (method = '') => {
+    method = method.toLocaleLowerCase();
+    return classnames("mr-1", {
+      'method-get': method === 'get',
+      'method-post': method === 'post',
+      'method-put': method === 'put',
+      'method-delete': method === 'delete',
+      'method-patch': method === 'patch'
+    });
+  };
+
+  return (
+    <StyledWrapper>
+      <span className={getClassname(item.request.method)}>{item.request.method}</span>
+    </StyledWrapper>
+  );
+};
+
+export default RequestMethod;

renderer/components/Sidebar/Collections/Collection/CollectionItem/index.js

@@ -6,6 +6,7 @@ import { useStore } from 'providers/Store';
 import { IconChevronRight, IconDots } from '@tabler/icons';
 import classnames from 'classnames';
 import Dropdown from 'components/Dropdown';
+import RequestMethod from './RequestMethod';
 
 import StyledWrapper from './StyledWrapper';
 
@@ -90,7 +91,10 @@ const CollectionItem = ({item, collectionUid}) => {
               ) : null}
             </div>
             
-            <span className="ml-1">{item.name}</span>
+            <div className="ml-1 flex items-center">
+              <RequestMethod item={item}/>
+              {item.name}
+            </div>
           </div>
           <div className="menu-icon pr-2">
             <Dropdown onCreate={onDropdownCreate} icon={<MenuIcon />} placement='bottom-start'>

renderer/styles/globals.css

@@ -11,6 +11,11 @@
   --color-codemirror-border: #efefef;
   --color-codemirror-background: rgb(243, 243, 243);
   --color-text-link: #1663bb;
+  --color-method-get: rgb(5, 150, 105);
+  --color-method-post: #8e44ad;
+  --color-method-put: #8e44ad;
+  --color-method-delete: #8e44ad;
+  --color-method-patch: #8e44ad;
 }
 
 html, body {