add icononly option to the copytoclipboard vue component

Author: soujay

src/Frontend/src/components/CopyToClipboard.vue

@@ -2,9 +2,16 @@
 import { Tippy, TippyComponent } from "vue-tippy";
 import { useTemplateRef } from "vue";
 
-const props = defineProps<{
-  value: string;
-}>();
+const props = defineProps({
+  value: {
+    type: String,
+    required: true,
+  },
+  isIconOnly: {
+    type: Boolean,
+    default: false, // Default value
+  },
+});
 
 const tippyRef = useTemplateRef<TippyComponent | null>("tippyRef");
 let timeoutId: number;
@@ -19,6 +26,6 @@ async function copyToClipboard() {
 
 <template>
   <Tippy content="Copied" ref="tippyRef" trigger="manual">
-    <button type="button" class="btn btn-secondary btn-sm" @click="copyToClipboard"><i class="fa fa-copy"></i> Copy to clipboard</button>
+    <button type="button" class="btn btn-secondary btn-sm" @click="copyToClipboard"><i class="fa fa-copy"></i> <span v-if="!props.isIconOnly">Copy to clipboard</span></button>
   </Tippy>
 </template>

src/Frontend/src/components/messages/HeadersView.vue

@@ -21,7 +21,7 @@ const toggleHover = (index: number, state: boolean) => {
         <td class="toolbar">
           <div style="display: flex; align-items: center" @mouseover="toggleHover(index, true)" @mouseleave="toggleHover(index, false)">
             <pre>{{ header.value }}</pre>
-            <CopyToClipboard v-if="hoverStates[index]" :value="header.value || ''" />
+            <CopyToClipboard v-if="hoverStates[index]" :value="header.value || ''" :isIconOnly="true" />
           </div>
         </td>
       </tr>