Share button

src/app/groups/[groupId]/expenses/expense-list.tsx

@@ -29,7 +29,7 @@ export function ExpenseList({
       <div
         key={expense.id}
         className={cn(
-          'border-t flex justify-between pl-6 pr-2 py-4 text-sm cursor-pointer hover:bg-slate-50',
+          'border-t flex justify-between pl-6 pr-2 py-4 text-sm cursor-pointer hover:bg-accent',
           expense.isReimbursement && 'italic',
         )}
         onClick={() => {

src/app/groups/[groupId]/layout.tsx

@@ -1,5 +1,6 @@
 import { GroupTabs } from '@/app/groups/[groupId]/group-tabs'
 import { SaveGroupLocally } from '@/app/groups/[groupId]/save-recent-group'
+import { ShareButton } from '@/app/groups/[groupId]/share-button'
 import { getGroup } from '@/lib/api'
 import { Metadata } from 'next'
 import Link from 'next/link'
@@ -34,11 +35,16 @@ export default async function GroupLayout({
 
   return (
     <>
-      <h1 className="font-bold text-2xl mb-4">
-        <Link href={`/groups/${groupId}`}>{group.name}</Link>
-      </h1>
+      <div className="flex flex-col sm:flex-row justify-between">
+        <h1 className="font-bold text-2xl mb-4">
+          <Link href={`/groups/${groupId}`}>{group.name}</Link>
+        </h1>
 
-      <GroupTabs groupId={groupId} />
+        <div className="flex gap-2 justify-between">
+          <GroupTabs groupId={groupId} />
+          <ShareButton groupId={groupId} />
+        </div>
+      </div>
 
       {children}
 

src/app/groups/[groupId]/share-button.tsx

@@ -0,0 +1,42 @@
+import { CopyButton } from '@/components/copy-button'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@/components/ui/popover'
+import { env } from '@/lib/env'
+import { Share } from 'lucide-react'
+
+type Props = {
+  groupId: string
+}
+
+export function ShareButton({ groupId }: Props) {
+  const url = `${env.NEXT_PUBLIC_BASE_URL}/groups/${groupId}`
+
+  return (
+    <Popover>
+      <PopoverTrigger asChild>
+        <Button size="icon">
+          <Share className="w-4 h-4" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent align="end" className="[&_p]:text-sm flex flex-col gap-3">
+        <p>
+          For other participants to see the group and add expenses, share its
+          URL with them.
+        </p>
+        <div className="flex gap-2">
+          <Input className="flex-1" defaultValue={url} readOnly />
+          <CopyButton text={url} />
+        </div>
+        <p>
+          <strong>Warning!</strong> Every person with the group URL will be able
+          to see and edit expenses. Share with caution!
+        </p>
+      </PopoverContent>
+    </Popover>
+  )
+}