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>
+	);
+}