refactor: to useCopyToClipboard to catch errors - when user has disable copy clipboard permission in browser (#13330)

as discussed here
https://github.com/twentyhq/twenty/issues/13292#issuecomment-3092215050
with @prastoin

- [x] introduce optional message param to `copyToClipboard` method in
`useCopyToClipboard` and refactor it across app, as in case if user has
disallowed clipboard permission in BROWSER unprotected clipboard access
breaks without catch.

- [x] Email copied to clipboard

- [x] run lingui extract

packages/twenty-front/src/modules/settings/admin-panel/config-variables/components/SettingsAdminConfigCopyableText.tsx

@@ -1,9 +1,7 @@
-import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
-import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
-import { useLingui } from '@lingui/react/macro';
-import { IconCopy, OverflowingTextWithTooltip } from 'twenty-ui/display';
+import { OverflowingTextWithTooltip } from 'twenty-ui/display';
 import { useDebouncedCallback } from 'use-debounce';
+import { useCopyToClipboard } from '~/hooks/useCopyToClipboard';
 
 type SettingsAdminConfigCopyableTextProps = {
   text: string;
@@ -32,18 +30,10 @@ export const SettingsAdminConfigCopyableText = ({
   multiline = false,
   maxRows,
 }: SettingsAdminConfigCopyableTextProps) => {
-  const { enqueueSuccessSnackBar } = useSnackBar();
-  const theme = useTheme();
-  const { t } = useLingui();
+  const { copyToClipboard } = useCopyToClipboard();
 
   const copyToClipboardDebounced = useDebouncedCallback((value: string) => {
-    navigator.clipboard.writeText(value);
-    enqueueSuccessSnackBar({
-      message: t`Copied to clipboard!`,
-      options: {
-        icon: <IconCopy size={theme.icon.size.md} />,
-      },
-    });
+    copyToClipboard(value);
   }, 200);
 
   return (