User links

src/App.tsx

@@ -12,12 +12,14 @@ import { Chats } from "./components/Chats";
 import { Button } from "./components/Button";
 import { Ulist } from "./components/Ulist";
 import { Popup } from "./components/Popup";
+import { User } from "./components/User";
 
 export const App = () => {
   const [showSideNav, setShowSideNav] = useState(false);
   const [openChat, setOpenChat] = useAPI(
     useShallow((state) => [state.openChat, state.setOpenChat]),
   );
+  const user = new URLSearchParams(location.search).get("user");
 
   return (
     <div className="flex h-screen max-h-screen divide-x divide-gray-200 overflow-auto bg-white dark:divide-gray-800 dark:bg-gray-950">
@@ -83,6 +85,9 @@ export const App = () => {
           <About />
         </Tabs.Content>
       </Tabs.Root>
+      {user ?
+        <User username={user} children={undefined} openInitially />
+      : undefined}
     </div>
   );
 };

src/components/Popup.tsx

@@ -24,7 +24,7 @@ export const Popup = (props: PopupProps) => {
         <Dialog.Content
           aria-describedby={undefined}
           className={twMerge(
-            "absolute inset-0 z-[--z-popup] m-auto h-fit max-h-[90vh] w-fit overflow-auto rounded-xl bg-white px-4 py-2 dark:bg-gray-900",
+            "absolute inset-0 z-[--z-popup] m-auto h-fit max-h-[90vh] w-fit overflow-auto rounded-xl bg-white px-4 py-2 focus:outline-0 dark:bg-gray-900",
             props.className,
             props.wide ? "max-w-[90vw]" : "max-w-[min(90vw,30rem)]",
           )}

src/components/User.tsx

@@ -1,4 +1,5 @@
 import { useState, ReactNode } from "react";
+import { Check, Copy } from "lucide-react";
 import { useShallow } from "zustand/react/shallow";
 import { useAPI } from "../lib/api";
 import { Button } from "./Button";
@@ -11,6 +12,7 @@ import { PERMISSIONS } from "../lib/permissions";
 export type UserProps = {
   username: string;
   children: ReactNode;
+  openInitially?: boolean;
 };
 export const User = (props: UserProps) => {
   const [credentials, user, loadUser, setOpenChat, getDM] = useAPI(
@@ -23,7 +25,8 @@ export const User = (props: UserProps) => {
     ]),
   );
   const [error, setError] = useState<string>();
-  const [open, setOpen] = useState(false);
+  const [open, setOpen] = useState(props.openInitially ?? false);
+  const [copiedUser, setCopiedUser] = useState(false);
   loadUser(props.username);
 
   const dm = async () => {
@@ -36,6 +39,16 @@ export const User = (props: UserProps) => {
     setOpen(false);
   };
 
+  const copy = () => {
+    navigator.clipboard.writeText(
+      `https://mybearworld.github.io/roarer-2?user=${encodeURIComponent(props.username)}`,
+    );
+    setCopiedUser(true);
+    setTimeout(() => {
+      setCopiedUser(false);
+    }, 1000);
+  };
+
   return (
     <Popup
       trigger={props.children}
@@ -63,10 +76,15 @@ export const User = (props: UserProps) => {
                 : undefined}
               </div>
               {credentials && credentials.username !== props.username ?
-                <div className="flex grow justify-end">
+                <div className="flex grow justify-end gap-2">
                   <Button type="button" onClick={dm}>
                     DM
                   </Button>
+                  <button type="button" aria-label="Copy link" onClick={copy}>
+                    {copiedUser ?
+                      <Check className="h-5 w-5" aria-hidden />
+                    : <Copy className="h-5 w-5" aria-hidden />}
+                  </button>
                 </div>
               : undefined}
             </div>