From b75422a010127223bbdee447d59bb1b1d4241452 Mon Sep 17 00:00:00 2001
From: Max Heidinger <mail@max-heidinger.de>
Date: Fri, 17 Oct 2025 10:25:54 +0200
Subject: [PATCH] feat: add visual indicator for GQL requests

---
 .../components/RequestTabs/RequestTab/index.js | 18 ++++++++++--------
 .../RequestMethod/StyledWrapper.js             |  3 +++
 .../CollectionItem/RequestMethod/index.js      | 11 +++++++----
 packages/bruno-app/src/themes/dark.js          |  3 ++-
 packages/bruno-app/src/themes/light.js         |  3 ++-
 5 files changed, 24 insertions(+), 14 deletions(-)

diff --git a/packages/bruno-app/src/components/RequestTabs/RequestTab/index.js b/packages/bruno-app/src/components/RequestTabs/RequestTab/index.js
index e9ff2712b..aeacc6f6b 100644
--- a/packages/bruno-app/src/components/RequestTabs/RequestTab/index.js
+++ b/packages/bruno-app/src/components/RequestTabs/RequestTab/index.js
@@ -96,15 +96,17 @@ const RequestTab = ({ tab, collection, tabIndex, collectionRequestTabs, folderUi
 
   const getMethodText = useCallback((item) => {
     if (!item) return;
-    const isGrpc = item.type === 'grpc-request';
-    const isWS = item.type === 'ws-request';
-    if (!isWS && !isGrpc) {
-      return item.draft ? get(item, 'draft.request.method') : get(item, 'request.method');
+
+    switch (item.type) {
+      case 'grpc-request':
+        return 'gRPC';
+      case 'ws-request':
+        return 'WS';
+      case 'graphql-request':
+        return 'GQL';
+      default:
+        return item.draft ? get(item, 'draft.request.method') : get(item, 'request.method');
     }
-    if (isGrpc) {
-      return 'gRPC';
-    }
-    return 'WS';
   }, [item]);
 
   if (!item) {
diff --git a/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/RequestMethod/StyledWrapper.js b/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/RequestMethod/StyledWrapper.js
index 02aa2cf01..608d3b422 100644
--- a/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/RequestMethod/StyledWrapper.js
+++ b/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/RequestMethod/StyledWrapper.js
@@ -40,6 +40,9 @@ const Wrapper = styled.div`
   .method-ws {
     color: ${(props) => props.theme.request.ws};
   }
+  .method-graphql {
+    color: ${(props) => props.theme.request.gql};
+  }
 `;
 
 export default Wrapper;
diff --git a/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/RequestMethod/index.js b/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/RequestMethod/index.js
index b4ca62a4e..8f0e8688d 100644
--- a/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/RequestMethod/index.js
+++ b/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/RequestMethod/index.js
@@ -4,18 +4,20 @@ import StyledWrapper from './StyledWrapper';
 
 const getMethodFlags = (item) => ({
   isGrpc: item.type === 'grpc-request',
-  isWS: item.type === 'ws-request'
+  isWS: item.type === 'ws-request',
+  isGraphQL: item.type === 'graphql-request'
 });
 
-const getMethodText = (item, { isGrpc, isWS }) => {
+const getMethodText = (item, { isGrpc, isWS, isGraphQL }) => {
   if (isGrpc) return 'grpc';
   if (isWS) return 'ws';
+  if (isGraphQL) return 'gql';
   return item.request.method.length > 5
     ? item.request.method.substring(0, 3)
     : item.request.method;
 };
 
-const getClassname = (method = '', { isGrpc, isWS }) => {
+const getClassname = (method = '', { isGrpc, isWS, isGraphQL }) => {
   method = method.toLocaleLowerCase();
   return classnames('mr-1', {
     'method-get': method === 'get',
@@ -26,7 +28,8 @@ const getClassname = (method = '', { isGrpc, isWS }) => {
     'method-head': method === 'head',
     'method-options': method === 'options',
     'method-grpc': isGrpc,
-    'method-ws': isWS
+    'method-ws': isWS,
+    'method-graphql': isGraphQL
   });
 };
 
diff --git a/packages/bruno-app/src/themes/dark.js b/packages/bruno-app/src/themes/dark.js
index 505ddafd2..67856b283 100644
--- a/packages/bruno-app/src/themes/dark.js
+++ b/packages/bruno-app/src/themes/dark.js
@@ -103,7 +103,8 @@ const darkTheme = {
       head: '#d69956'
     },
     grpc: '#6366f1',
-    ws: '#f59e0b'
+    ws: '#f59e0b',
+    gql: '#e535ab'
   },
 
   requestTabPanel: {
diff --git a/packages/bruno-app/src/themes/light.js b/packages/bruno-app/src/themes/light.js
index 9a203aafc..7cf873577 100644
--- a/packages/bruno-app/src/themes/light.js
+++ b/packages/bruno-app/src/themes/light.js
@@ -103,7 +103,8 @@ const lightTheme = {
       head: '#ca7811'
     },
     grpc: '#6366f1',
-    ws: '#f59e0b'
+    ws: '#f59e0b',
+    gql: '#e535ab'
   },
 
   requestTabPanel: {