feat(ui): add a shareable session link for the Maestro

apps/rpg-maestro-ui/src/app/maestro-ui/maestro-soundboard.tsx

@@ -15,6 +15,7 @@ import ForestIcon from '@mui/icons-material/Forest';
 import HikingIcon from '@mui/icons-material/Hiking';
 import { displayError } from '../error-utils';
 import { useParams } from 'react-router';
+import { ContentToCopy } from '../ui-components/content-to-copy/content-to-copy';
 
 export function MaestroSoundboard() {
   const [allTracks, setAllTracks] = useState<Track[] | undefined>(undefined);
@@ -54,14 +55,20 @@ export function MaestroSoundboard() {
   const onQuickTagSelection = (tags: Tag[]) => {
     onTrackSearchByTagChange(tags);
   };
+  const getURLToShareToPlayers = () => {
+    return `${window.location.origin}/${sessionId}`;
+  };
 
   return (
     <div>
       <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
         <div>
           <h1 style={{ marginTop: 0 }}>Maestro UI</h1>
-          <p>As the Maestro, control what current track is playing for the session</p>
-          <p>WIP under construction</p>
+          <p>As the Maestro, control what current track is playing for the session: {sessionId}</p>
+          <p>
+            Share this link to your Players so then can join your session:
+            <ContentToCopy content={getURLToShareToPlayers()} />
+          </p>
         </div>
         <TextLinkWithIconWrapper
           link={`/${sessionId}`}

apps/rpg-maestro-ui/src/app/ui-components/content-to-copy/content-to-copy.module.css

@@ -0,0 +1,34 @@
+.copyLinkButton {
+    background: rgba(151, 114, 61, 0.11);
+    border: none; /* Removes border */
+    color: inherit; /* Matches the surrounding text color */
+    font-family: inherit; /* Matches surrounding font */
+    font-size: inherit; /* Matches surrounding text size */
+    text-align: left; /* Aligns text to the left */
+    padding: 0; /* Removes button padding */
+    margin: 0; /* Ensures no unexpected margins */
+    cursor: pointer; /* Indicates interactivity */
+    display: inline-flex; /* Allows alignment with icon */
+    align-items: center; /* Vertically centers the icon */
+    gap: 0.5rem; /* Space between text and the icon */
+    white-space: nowrap; /* Prevents wrapping */
+}
+
+.copyLinkButton:hover {
+    background: rgba(151, 114, 61, 0.55);
+    border-radius: 4px; /* Slight rounding for hover effect */
+}
+
+.copyLinkButton:focus {
+    outline: none; /* Removes focus outline */
+    box-shadow: 0 0 0 2px #d0d0d0; /* Adds a subtle focus ring */
+}
+
+.copyLinkButton svg {
+    font-size: 1rem; /* Adjusts icon size */
+    color: gray; /* Muted color for the icon */
+}
+
+.copyLinkButton:active svg {
+    color: black; /* Darkens icon on active click */
+}

apps/rpg-maestro-ui/src/app/ui-components/content-to-copy/content-to-copy.tsx

@@ -0,0 +1,35 @@
+import ContentCopyIcon from '@mui/icons-material/ContentCopy';
+import React from 'react';
+import { Bounce, toast } from 'react-toastify';
+import styles from './content-to-copy.module.css';
+
+export interface ContentToCopyProps {
+  content: string;
+}
+
+export function ContentToCopy(props: ContentToCopyProps) {
+  const { content } = props;
+
+  async function copyContentToClipboard(content: string) {
+    return navigator.clipboard.writeText(content).then(() =>
+      toast.info(`Content ${content} copied to clipboard`, {
+        position: 'bottom-left',
+        autoClose: 4000,
+        hideProgressBar: false,
+        closeOnClick: true,
+        pauseOnHover: true,
+        draggable: true,
+        progress: undefined,
+        theme: 'dark',
+        transition: Bounce,
+      })
+    );
+  }
+
+  return (
+    <button className={`${styles.copyLinkButton}`} onClick={() => copyContentToClipboard(content)}>
+      {content}
+      <ContentCopyIcon />
+    </button>
+  );
+}