Issue 690/add copywebid desktop contacts

src/components/Contacts/ContactListTableDesktop.jsx

@@ -4,6 +4,7 @@ import React from 'react';
 import DeleteOutlineOutlinedIcon from '@mui/icons-material/DeleteOutlineOutlined';
 import EditOutlined from '@mui/icons-material/EditOutlined';
 import SendIcon from '@mui/icons-material/Send';
+import Typography from '@mui/material/Typography';
 import { useTheme } from '@mui/material/styles';
 import {
   DataGrid,
@@ -12,6 +13,10 @@ import {
   GridToolbarFilterButton,
   GridToolbarDensitySelector
 } from '@mui/x-data-grid';
+// Custom Hooks Imports
+import useNotification from '@hooks/useNotification';
+// Util Imports
+import { saveToClipboard } from '@utils';
 // Component Imports
 import ContactProfileIcon from './ContactProfileIcon';
 
@@ -49,6 +54,7 @@ const ContactListTableDesktop = ({
   handleSendMessage,
   'data-testid': dataTestId
 }) => {
+  const { addNotification } = useNotification();
   const theme = useTheme();
 
   const columnTitlesArray = [
@@ -68,6 +74,15 @@ const ContactListTableDesktop = ({
     },
     {
       field: 'webId',
+      renderCell: (contact) => (
+        <Typography
+          noWrap
+          sx={{ cursor: 'pointer', fontSize: '0.875rem' }}
+          onClick={() => saveToClipboard(contact.id, 'webId copied to clipboard', addNotification)}
+        >
+          {contact.id}
+        </Typography>
+      ),
       headerName: 'Web ID',
       minWidth: 150,
       flex: 1,
@@ -101,7 +116,7 @@ const ContactListTableDesktop = ({
       field: 'Edit',
       renderCell: (contact) => (
         <EditOutlined
-          sx={{ color: 'gray', cursor: 'pointer' }}
+          sx={{ color: '#808080', cursor: 'pointer' }}
           onClick={() => editContact(contact.row.Profile)}
         />
       ),

src/components/Contacts/ContactListTableMobile.jsx

@@ -185,6 +185,18 @@ const ContactListTableMobile = ({
                   'aria-labelledby': 'actions-icon-button'
                 }}
               >
+                <MenuItem
+                  component={Button}
+                  onClick={handleMenuItemClick(
+                    () =>
+                      saveToClipboard(contact.webId, 'webId copied to clipboard', addNotification),
+                    contact
+                  )}
+                  startIcon={<ContentCopyIcon sx={iconSize} />}
+                  sx={iconStyling}
+                >
+                  Copy WebId
+                </MenuItem>
                 <MenuItem
                   component={Button}
                   onClick={handleMenuItemClick(handleProfileClick, contact)}
@@ -209,21 +221,6 @@ const ContactListTableMobile = ({
                 >
                   Message
                 </MenuItem>
-                {/* TODO: Keep copy function? */}
-                {/* If so, also add to Desktop table? */}
-                {/* Maybe without any icon. Simply click on the web ID and it will copy? */}
-                <MenuItem
-                  component={Button}
-                  onClick={handleMenuItemClick(
-                    () =>
-                      saveToClipboard(contact.webId, 'webId copied to clipboard', addNotification),
-                    contact
-                  )}
-                  startIcon={<ContentCopyIcon sx={iconSize} />}
-                  sx={iconStyling}
-                >
-                  Copy WebId
-                </MenuItem>
                 <MenuItem
                   component={Button}
                   onClick={handleMenuItemClick(editContact, contact)}

src/pages/Contacts.jsx

@@ -158,7 +158,6 @@ const Contacts = () => {
                 }}
                 IconComponent={KeyboardArrowDownIcon}
               >
-                {' '}
                 <MenuItem value="Sort by:" disabled>
                   Sort by:
                 </MenuItem>