From 10f0e69611509c58e2c9379f43ad170a90958d7e Mon Sep 17 00:00:00 2001
From: p-eye <peyed3@gmail.com>
Date: Sun, 22 Dec 2024 00:54:21 +0900
Subject: [PATCH 1/5] feat: add new clipboard icon

---
 .../components/common/Icons/ClipboardIcon.tsx | 25 +++++++++++++++++++
 1 file changed, 25 insertions(+)
 create mode 100644 frontend/src/components/common/Icons/ClipboardIcon.tsx

diff --git a/frontend/src/components/common/Icons/ClipboardIcon.tsx b/frontend/src/components/common/Icons/ClipboardIcon.tsx
new file mode 100644
index 000000000..ad6f40622
--- /dev/null
+++ b/frontend/src/components/common/Icons/ClipboardIcon.tsx
@@ -0,0 +1,25 @@
+import React from 'react';
+import styled from 'styled-components';
+
+const ClipboardIcon: React.FC<{ className?: string }> = ({ className }) => (
+  <svg
+    width="24"
+    height="24"
+    className={className}
+    viewBox="0 0 16 16"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M4 4l1-1h5.414L14 6.586V14l-1 1H5l-1-1V4zm9 3l-3-3H5v10h8V7z"
+    />
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M3 1L2 2v10l1 1V2h6.414l-1-1H3z"
+    />
+  </svg>
+);
+
+export default styled(ClipboardIcon)``;

From d5e9996a36fffb9bf25c3fc28765a5751d30d757 Mon Sep 17 00:00:00 2001
From: p-eye <peyed3@gmail.com>
Date: Sun, 22 Dec 2024 00:57:31 +0900
Subject: [PATCH 2/5] feat: add clipboard button near tabs to use useDataSaver
 for quick copy

---
 .../Messages/MessageContent/MessageContent.tsx  | 17 ++++++++++++++++-
 1 file changed, 16 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/Topics/Topic/Messages/MessageContent/MessageContent.tsx b/frontend/src/components/Topics/Topic/Messages/MessageContent/MessageContent.tsx
index d1237ba0d..c740cb110 100644
--- a/frontend/src/components/Topics/Topic/Messages/MessageContent/MessageContent.tsx
+++ b/frontend/src/components/Topics/Topic/Messages/MessageContent/MessageContent.tsx
@@ -1,8 +1,11 @@
 import React from 'react';
 import EditorViewer from 'components/common/EditorViewer/EditorViewer';
 import BytesFormatted from 'components/common/BytesFormatted/BytesFormatted';
+import ClipboardIcon from 'components/common/Icons/ClipboardIcon';
+import { Button } from 'components/common/Button/Button';
 import { SchemaType, TopicMessageTimestampTypeEnum } from 'generated-sources';
 import { formatTimestamp } from 'lib/dateTimeHelpers';
+import useDataSaver from 'lib/hooks/useDataSaver';
 
 import * as S from './MessageContent.styled';
 
@@ -43,6 +46,10 @@ const MessageContent: React.FC<MessageContentProps> = ({
     }
   };
 
+  const tabContent = activeTabContent() || '';
+
+  const { copyToClipboard } = useDataSaver('topic-message', tabContent);
+
   const handleKeyTabClick = (e: React.MouseEvent) => {
     e.preventDefault();
     setActiveTab('key');
@@ -90,9 +97,17 @@ const MessageContent: React.FC<MessageContentProps> = ({
               >
                 Headers
               </S.Tab>
+              <Button
+                type="button"
+                buttonSize="M"
+                buttonType="text"
+                onClick={copyToClipboard}
+              >
+                <ClipboardIcon />
+              </Button>
             </S.Tabs>
             <EditorViewer
-              data={activeTabContent() || ''}
+              data={tabContent}
               maxLines={28}
               schemaType={contentType}
             />

From 7ec38848d50d0236adb358dddfbd4d2c11863c39 Mon Sep 17 00:00:00 2001
From: p-eye <peyed3@gmail.com>
Date: Sun, 22 Dec 2024 01:07:52 +0900
Subject: [PATCH 3/5] feat: use flexbox to align clipboard button to the right

---
 .../MessageContent/MessageContent.tsx         | 65 ++++++++++---------
 1 file changed, 36 insertions(+), 29 deletions(-)

diff --git a/frontend/src/components/Topics/Topic/Messages/MessageContent/MessageContent.tsx b/frontend/src/components/Topics/Topic/Messages/MessageContent/MessageContent.tsx
index c740cb110..d8b2da5e6 100644
--- a/frontend/src/components/Topics/Topic/Messages/MessageContent/MessageContent.tsx
+++ b/frontend/src/components/Topics/Topic/Messages/MessageContent/MessageContent.tsx
@@ -3,6 +3,7 @@ import EditorViewer from 'components/common/EditorViewer/EditorViewer';
 import BytesFormatted from 'components/common/BytesFormatted/BytesFormatted';
 import ClipboardIcon from 'components/common/Icons/ClipboardIcon';
 import { Button } from 'components/common/Button/Button';
+import Flexbox from 'components/common/FlexBox/FlexBox';
 import { SchemaType, TopicMessageTimestampTypeEnum } from 'generated-sources';
 import { formatTimestamp } from 'lib/dateTimeHelpers';
 import useDataSaver from 'lib/hooks/useDataSaver';
@@ -76,35 +77,41 @@ const MessageContent: React.FC<MessageContentProps> = ({
         <S.Section>
           <S.ContentBox>
             <S.Tabs>
-              <S.Tab
-                type="button"
-                $active={activeTab === 'key'}
-                onClick={handleKeyTabClick}
-              >
-                Key
-              </S.Tab>
-              <S.Tab
-                $active={activeTab === 'content'}
-                type="button"
-                onClick={handleContentTabClick}
-              >
-                Value
-              </S.Tab>
-              <S.Tab
-                $active={activeTab === 'headers'}
-                type="button"
-                onClick={handleHeadersTabClick}
-              >
-                Headers
-              </S.Tab>
-              <Button
-                type="button"
-                buttonSize="M"
-                buttonType="text"
-                onClick={copyToClipboard}
-              >
-                <ClipboardIcon />
-              </Button>
+              <Flexbox justifyContent="space-between">
+                <Flexbox>
+                  <S.Tab
+                    type="button"
+                    $active={activeTab === 'key'}
+                    onClick={handleKeyTabClick}
+                  >
+                    Key
+                  </S.Tab>
+                  <S.Tab
+                    $active={activeTab === 'content'}
+                    type="button"
+                    onClick={handleContentTabClick}
+                  >
+                    Value
+                  </S.Tab>
+                  <S.Tab
+                    $active={activeTab === 'headers'}
+                    type="button"
+                    onClick={handleHeadersTabClick}
+                  >
+                    Headers
+                  </S.Tab>
+                </Flexbox>
+                <Flexbox>
+                  <Button
+                    type="button"
+                    buttonSize="M"
+                    buttonType="text"
+                    onClick={copyToClipboard}
+                  >
+                    <ClipboardIcon />
+                  </Button>
+                </Flexbox>
+              </Flexbox>
             </S.Tabs>
             <EditorViewer
               data={tabContent}

From 641226f1ca8b20f9e955efe633a94aa6864a7419 Mon Sep 17 00:00:00 2001
From: p-eye <peyed3@gmail.com>
Date: Sun, 22 Dec 2024 01:10:51 +0900
Subject: [PATCH 4/5] refactor: use tab-indented JSON.stringify for readability
 in useDataSaver

---
 frontend/src/lib/hooks/useDataSaver.ts | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/frontend/src/lib/hooks/useDataSaver.ts b/frontend/src/lib/hooks/useDataSaver.ts
index 9bcc10367..82798d158 100644
--- a/frontend/src/lib/hooks/useDataSaver.ts
+++ b/frontend/src/lib/hooks/useDataSaver.ts
@@ -7,7 +7,9 @@ const useDataSaver = (
   const copyToClipboard = () => {
     if (navigator.clipboard) {
       const str =
-        typeof data === 'string' ? String(data) : JSON.stringify(data);
+        typeof data === 'string'
+          ? String(data)
+          : JSON.stringify(data, null, '\t');
       navigator.clipboard.writeText(str);
       showSuccessAlert({
         id: subject,

From 523799b89219dffd17d6622f32242385e7bb9159 Mon Sep 17 00:00:00 2001
From: p-eye <peyed3@gmail.com>
Date: Sun, 22 Dec 2024 11:03:12 +0900
Subject: [PATCH 5/5] test: update useDataSaver test to match formatted JSON
 output

---
 frontend/src/lib/hooks/__tests__/useDataSaver.spec.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/lib/hooks/__tests__/useDataSaver.spec.tsx b/frontend/src/lib/hooks/__tests__/useDataSaver.spec.tsx
index 9b125575d..ea180962d 100644
--- a/frontend/src/lib/hooks/__tests__/useDataSaver.spec.tsx
+++ b/frontend/src/lib/hooks/__tests__/useDataSaver.spec.tsx
@@ -59,7 +59,7 @@ describe('useDataSaver hook', () => {
       };
       render(<HookWrapper />);
       expect(navigator.clipboard.writeText).toHaveBeenCalledWith(
-        JSON.stringify(content)
+        JSON.stringify(content, null, '\t')
       );
     });