feat: add share button

inertia/components/dashboard/dashboard_header.tsx

@@ -16,6 +16,7 @@ import { BsThreeDotsVertical } from 'react-icons/bs';
 import { GoPencil } from 'react-icons/go';
 import { IoIosAddCircleOutline } from 'react-icons/io';
 import { IoTrashOutline } from 'react-icons/io5';
+import { ShareCollection } from '~/components/share/share_collection';
 import { appendCollectionId } from '~/lib/navigation';
 import { useActiveCollection } from '~/stores/collection_store';
 
@@ -57,6 +58,8 @@ export function DashboardHeader({ navbar, aside }: DashboardHeaderProps) {
 					</Flex>
 				</Group>
 				<Group>
+					<ShareCollection />
+
 					<Menu withinPortal shadow="md" width={225}>
 						<Menu.Target>
 							<ActionIcon variant="subtle" color="var(--mantine-color-text)">
@@ -99,6 +102,7 @@ export function DashboardHeader({ navbar, aside }: DashboardHeaderProps) {
 							</Menu.Item>
 						</Menu.Dropdown>
 					</Menu>
+
 					<Burger
 						opened={aside.opened}
 						onClick={aside.toggle}

inertia/components/share/share_collection.tsx

@@ -0,0 +1,42 @@
+import { Visibility } from '#enums/visibility';
+import { ActionIcon, Anchor, CopyButton, Popover, Text } from '@mantine/core';
+import { useTranslation } from 'react-i18next';
+import { TbShare3 } from 'react-icons/tb';
+import { Fragment } from 'react/jsx-runtime';
+import { generateShareUrl } from '~/lib/navigation';
+import { useActiveCollection } from '~/stores/collection_store';
+
+const COPY_SUCCESS_TIMEOUT = 2_000;
+
+export function ShareCollection() {
+	const { t } = useTranslation('common');
+	const { activeCollection } = useActiveCollection();
+	if (
+		activeCollection?.visibility !== Visibility.PUBLIC ||
+		typeof window === 'undefined'
+	)
+		return <Fragment />;
+
+	const sharedUrl = generateShareUrl(activeCollection);
+	return (
+		<Popover position="bottom" withArrow shadow="md">
+			<Popover.Target>
+				<ActionIcon variant="subtle" color="var(--mantine-color-text)">
+					<TbShare3 />
+				</ActionIcon>
+			</Popover.Target>
+			<Popover.Dropdown p="xs">
+				<Text c="dimmed">{t('click-to-copy')}</Text>
+				<CopyButton value={sharedUrl} timeout={COPY_SUCCESS_TIMEOUT}>
+					{({ copied, copy }) =>
+						!copied ? (
+							<Anchor onClick={copy}>{sharedUrl}</Anchor>
+						) : (
+							<Text c="green">{t('success-copy')}</Text>
+						)
+					}
+				</CopyButton>
+			</Popover.Dropdown>
+		</Popover>
+	);
+}

inertia/i18n/locales/en/common.json

@@ -80,5 +80,7 @@
     "made_by": "Made with ❤\uFE0F by"
   },
 	"loading": "Loading...",
-	"no-results": "No results found"
+	"no-results": "No results found",
+	"click-to-copy": "Click on the following link to copy the shareable url",
+	"success-copy": "Link copied to clipboard"
 }

inertia/i18n/locales/fr/common.json

@@ -80,5 +80,7 @@
     "made_by": "Fait avec ❤\uFE0F par"
   },
 	"loading": "Chargement...",
-	"no-results": "Aucun résultat trouvé"
+	"no-results": "Aucun résultat trouvé",
+	"click-to-copy": "Cliquez sur le lien suivant pour copier l'URL partageable",
+	"success-copy": "Link copié dans le presse-papiers"
 }

inertia/lib/navigation.ts

@@ -1,4 +1,4 @@
-import { Collection, Link } from '~/types/app';
+import { Collection, CollectionWithLinks, Link } from '~/types/app';
 
 export const appendCollectionId = (
 	url: string,
@@ -26,3 +26,11 @@ export function isValidHttpUrl(urlParam: string) {
 
 	return url.protocol === 'http:' || url.protocol === 'https:';
 }
+
+export const generateShareUrl = (
+	collection: Collection | CollectionWithLinks
+) => {
+	const pathname = `/shared/${collection.id}`;
+	if (typeof window === 'undefined') return pathname;
+	return `${window.location.origin}${pathname}`;
+};