create share button for posts

app/components/building-blocks/copy-to-clipboard-button.tsx

@@ -0,0 +1,19 @@
+import { toast } from 'sonner'
+import { Icon } from '../ui/icon.tsx'
+
+export function CopyToClipboardButton({ url }: { url: string }) {
+	const copyToClipboard = async () => {
+		try {
+			await navigator.clipboard.writeText(url)
+			toast('Copied URL to clipboard')
+		} catch (err) {
+			console.error('Failed to copy:', err)
+		}
+	}
+
+	return (
+		<button onClick={copyToClipboard}>
+			<Icon name="copy">Copy URL to Clipboard</Icon>
+		</button>
+	)
+}

app/components/building-blocks/post-action-bar.tsx

@@ -4,6 +4,7 @@ import {
 	useState,
 	type ChangeEvent,
 	useRef,
+	useEffect,
 } from 'react'
 import TextareaAutosize from 'react-textarea-autosize'
 import { Icon } from '#app/components/ui/icon.tsx'
@@ -25,6 +26,13 @@ import { toImmutableReplyTree } from '#app/modules/posts/ranking/ranking-utils.t
 import { type TreeContext } from '#app/routes/post.$postId.tsx'
 import { invariant } from '#app/utils/misc.tsx'
 import { useOptionalUser } from '#app/utils/user.ts'
+import {
+	DropdownMenu,
+	DropdownMenuContent,
+	DropdownMenuItem,
+	DropdownMenuTrigger,
+} from '../ui/dropdown-menu.tsx'
+import { CopyToClipboardButton } from './copy-to-clipboard-button.tsx'
 
 export function PostActionBar({
 	replyTree,
@@ -45,6 +53,7 @@ export function PostActionBar({
 	const loggedIn: boolean = user !== null
 	const isAdminUser: boolean = user ? Boolean(user.isAdmin) : false
 	const [showAdminUI, setShowAdminUI] = useState(false)
+	const isPostInView = treeContext.targetPostId === post.id
 
 	const targetPostState =
 		treeContext.commentTreeState.posts[treeContext.targetPostId]
@@ -150,6 +159,11 @@ export function PostActionBar({
 
 	const focusButtonColor = isFocused ? 'bg-rose-800/100 text-white' : ''
 
+	const [currentUrl, setCurrentUrl] = useState<string>('')
+	useEffect(() => {
+		setCurrentUrl(`${location.origin}${location.pathname}`)
+	}, [])
+
 	return (
 		<>
 			<div className="flex w-full flex-wrap items-start gap-3 text-xl opacity-50 sm:text-base">
@@ -203,6 +217,18 @@ export function PostActionBar({
 						<Icon name="chat-bubble" className="mt-[-0.1em]" /> Reply
 					</button>
 				)}
+				{isPostInView && (
+					<DropdownMenu>
+						<DropdownMenuTrigger>
+							<Icon name="share" className="mt-[-0.1em]" /> Share
+						</DropdownMenuTrigger>
+						<DropdownMenuContent>
+							<DropdownMenuItem>
+								<CopyToClipboardButton url={currentUrl} />
+							</DropdownMenuItem>
+						</DropdownMenuContent>
+					</DropdownMenu>
+				)}
 				{isAdminUser &&
 					(showAdminUI ? (
 						<AdminFeatureBar

app/components/sonner.tsx

@@ -0,0 +1,31 @@
+'use client'
+
+import { useTheme } from 'next-themes'
+import { Toaster as Sonner } from 'sonner'
+
+type ToasterProps = React.ComponentProps<typeof Sonner>
+
+const Toaster = ({ ...props }: ToasterProps) => {
+	const { theme = 'system' } = useTheme()
+
+	return (
+		<Sonner
+			theme={theme as ToasterProps['theme']}
+			className="toaster group"
+			toastOptions={{
+				classNames: {
+					toast:
+						'group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg',
+					description: 'group-[.toast]:text-muted-foreground',
+					actionButton:
+						'group-[.toast]:bg-primary group-[.toast]:text-primary-foreground',
+					cancelButton:
+						'group-[.toast]:bg-muted group-[.toast]:text-muted-foreground',
+				},
+			}}
+			{...props}
+		/>
+	)
+}
+
+export { Toaster }

app/components/ui/icons/name.d.ts

@@ -11,6 +11,7 @@ export type IconName =
 	| 'chevron-right'
 	| 'chevron-up'
 	| 'clock'
+	| 'copy'
 	| 'counter-clockwise-clock'
 	| 'cross-1'
 	| 'dots-horizontal'
@@ -42,6 +43,7 @@ export type IconName =
 	| 'quote'
 	| 'reload'
 	| 'reset'
+	| 'share'
 	| 'sun'
 	| 'target'
 	| 'thick-arrow-down-solid'

package.json

@@ -92,6 +92,7 @@
     "mock-aws-s3": "^4.0.2",
     "moment": "^2.29.4",
     "morgan": "^1.10.0",
+    "next-themes": "^0.4.3",
     "nock": "^13.5.4",
     "openai": "^4.56.1",
     "pino": "^9.2.0",
@@ -106,7 +107,7 @@
     "remix-utils": "^7.1.0",
     "sanitize-html": "^2.13.1",
     "set-cookie-parser": "^2.6.0",
-    "sonner": "^1.0.3",
+    "sonner": "^1.7.0",
     "spin-delay": "^1.2.0",
     "tailwind-merge": "^1.14.0",
     "tailwindcss": "^3.3.3",