feat: share button on semble page

src/webapp/features/semble/components/SembleHeader/SembleHeader.tsx

···
 import UrlAddedBySummary from '../urlAddedBySummary/UrlAddedBySummary';
 import SembleActions from '../sembleActions/SembleActions';
 import { verifySessionOnServer } from '@/lib/auth/dal.server';
+import GuestSembleActions from '../sembleActions/GusetSembleActions';
 
 interface Props {
   url: string;
···
             {session ? (
               <SembleActions url={props.url} />
             ) : (
-              <Button size="md" component={Link} href={'/login'}>
-                Log in to add
-              </Button>
+              <GuestSembleActions url={props.url} />
             )}
           </Stack>
         </GridCol>

src/webapp/features/semble/components/SembleHeader/Skeleton.SembleHeader.tsx

···
-import { Stack, Grid, GridCol, Text, Skeleton } from '@mantine/core';
+import { Stack, Grid, GridCol, Text, Skeleton, Group } from '@mantine/core';
 import UrlAddedBySummarySkeleton from '../urlAddedBySummary/Skeleton.UrlAddedBySummary';
 
 export default function SembleHeaderSkeleton() {
···
           </Stack>
         </GridCol>
         <GridCol span={{ base: 12, sm: 'content' }}>
-          <Stack gap={'sm'} align="start" flex={1}>
+          <Stack gap={'sm'} align="center" flex={1}>
             <Skeleton h={150} w={300} maw={'100%'} />
 
             {/*<SembleActions />*/}
+            <Group gap={'xs'}>
+              <Skeleton w={44} h={44} circle />
+              <Skeleton w={131} h={44} radius={'xl'} />
+            </Group>
           </Stack>
         </GridCol>
       </Grid>

src/webapp/features/semble/components/sembleActions/GusetSembleActions.tsx

···
+'use client';
+
+import { ActionIcon, Button, CopyButton, Group, Tooltip } from '@mantine/core';
+import Link from 'next/link';
+import { MdIosShare } from 'react-icons/md';
+import { notifications } from '@mantine/notifications';
+
+interface Props {
+  url: string;
+}
+
+export default function GuestSembleActions(props: Props) {
+  const shareLink =
+    typeof window !== 'undefined'
+      ? `${window.location.origin}/url?id=${props.url}`
+      : '';
+
+  return (
+    <Group gap={'xs'}>
+      <CopyButton value={shareLink}>
+        {({ copied, copy }) => (
+          <Tooltip
+            label={copied ? 'Link copied!' : 'Share'}
+            withArrow
+            position="top"
+          >
+            <ActionIcon
+              variant="light"
+              color="gray"
+              size={'xl'}
+              radius={'xl'}
+              onClick={() => {
+                copy();
+
+                if (copied) return;
+                notifications.show({
+                  message: 'Link copied!',
+                  position: 'top-center',
+                  id: copied.toString(),
+                });
+              }}
+            >
+              <MdIosShare size={22} />
+            </ActionIcon>
+          </Tooltip>
+        )}
+      </CopyButton>
+      <Button size="md" component={Link} href={'/login'}>
+        Log in to add
+      </Button>
+    </Group>
+  );
+}

src/webapp/features/semble/components/sembleActions/SembleActions.tsx

···
 
 import AddCardToModal from '@/features/cards/components/addCardToModal/AddCardToModal';
 import useGetCardFromMyLibrary from '@/features/cards/lib/queries/useGetCardFromMyLibrary';
-import { Button, Group } from '@mantine/core';
+import { ActionIcon, Button, CopyButton, Group, Tooltip } from '@mantine/core';
+import { notifications } from '@mantine/notifications';
 import { Fragment, useState } from 'react';
 import { FiPlus } from 'react-icons/fi';
 import { IoMdCheckmark } from 'react-icons/io';
+import { MdIosShare } from 'react-icons/md';
 
 interface Props {
   url: string;
···
   const isInYourLibrary = cardStatus.data.card?.urlInLibrary;
   const [showAddToModal, setShowAddToModal] = useState(false);
 
+  const shareLink =
+    typeof window !== 'undefined'
+      ? `${window.location.origin}/url?id=${props.url}`
+      : '';
+
   if (cardStatus.error) {
     return null;
   }
 
   return (
     <Fragment>
-      <Group>
+      <Group gap={'xs'}>
+        <CopyButton value={shareLink}>
+          {({ copied, copy }) => (
+            <Tooltip
+              label={copied ? 'Link copied!' : 'Share'}
+              withArrow
+              position="top"
+            >
+              <ActionIcon
+                variant="light"
+                color="gray"
+                size={'xl'}
+                radius={'xl'}
+                onClick={() => {
+                  copy();
+
+                  if (copied) return;
+                  notifications.show({
+                    message: 'Link copied!',
+                    position: 'top-center',
+                    id: copied.toString(),
+                  });
+                }}
+              >
+                <MdIosShare size={22} />
+              </ActionIcon>
+            </Tooltip>
+          )}
+        </CopyButton>
         <Button
           variant={isInYourLibrary ? 'default' : 'filled'}
           size="md"