From 0abb78648009aff14d76134b6e90e712f29ea24f Mon Sep 17 00:00:00 2001
From: amhsirak <karishmashuklaa@gmail.com>
Date: Sat, 8 Feb 2025 15:38:39 +0530
Subject: [PATCH 1/3] feat: show icon as per key visibility

---
 src/components/api/ApiKey.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/api/ApiKey.tsx b/src/components/api/ApiKey.tsx
index 9d54fe5c..3a085576 100644
--- a/src/components/api/ApiKey.tsx
+++ b/src/components/api/ApiKey.tsx
@@ -137,7 +137,7 @@ const ApiKeyManager = () => {
                   </Tooltip>
                   <Tooltip title={showKey ? t('apikey.actions.hide') : t('apikey.actions.show')}>
                     <IconButton onClick={() => setShowKey(!showKey)}>
-                      <Visibility />
+                      {showKey ? <Visibility /> : <Visibility />}
                     </IconButton>
                   </Tooltip>
                   <Tooltip title={t('apikey.actions.delete')}>

From ebcd117694b03b76fdff2cd681efd84e40cda42d Mon Sep 17 00:00:00 2001
From: amhsirak <karishmashuklaa@gmail.com>
Date: Sat, 8 Feb 2025 15:44:36 +0530
Subject: [PATCH 2/3] feat: use visibility off icon

---
 src/components/api/ApiKey.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/api/ApiKey.tsx b/src/components/api/ApiKey.tsx
index 3a085576..9a1a492a 100644
--- a/src/components/api/ApiKey.tsx
+++ b/src/components/api/ApiKey.tsx
@@ -14,7 +14,7 @@ import {
   Tooltip,
   Paper,
 } from '@mui/material';
-import { ContentCopy, Visibility, Delete } from '@mui/icons-material';
+import { ContentCopy, Visibility, VisibilityOff, Delete } from '@mui/icons-material';
 import styled from 'styled-components';
 import axios from 'axios';
 import { useGlobalInfoStore } from '../../context/globalInfo';
@@ -137,7 +137,7 @@ const ApiKeyManager = () => {
                   </Tooltip>
                   <Tooltip title={showKey ? t('apikey.actions.hide') : t('apikey.actions.show')}>
                     <IconButton onClick={() => setShowKey(!showKey)}>
-                      {showKey ? <Visibility /> : <Visibility />}
+                      {showKey ? <Visibility /> : <VisibilityOff />}
                     </IconButton>
                   </Tooltip>
                   <Tooltip title={t('apikey.actions.delete')}>

From 32b25837e4ce25e31224fb1a2bd923381d5e9da7 Mon Sep 17 00:00:00 2001
From: amhsirak <karishmashuklaa@gmail.com>
Date: Sat, 8 Feb 2025 15:51:45 +0530
Subject: [PATCH 3/3] fix: use correct icons based on showKey state

---
 src/components/api/ApiKey.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/api/ApiKey.tsx b/src/components/api/ApiKey.tsx
index 9a1a492a..f84f7a55 100644
--- a/src/components/api/ApiKey.tsx
+++ b/src/components/api/ApiKey.tsx
@@ -137,7 +137,7 @@ const ApiKeyManager = () => {
                   </Tooltip>
                   <Tooltip title={showKey ? t('apikey.actions.hide') : t('apikey.actions.show')}>
                     <IconButton onClick={() => setShowKey(!showKey)}>
-                      {showKey ? <Visibility /> : <VisibilityOff />}
+                      {showKey ? <VisibilityOff /> : <Visibility />}
                     </IconButton>
                   </Tooltip>
                   <Tooltip title={t('apikey.actions.delete')}>