add delete session btn to active room dialog

excalidraw-app/share/ShareDialog.scss

@@ -106,6 +106,10 @@
 
         color: var(--text-primary-color);
 
+        &__text {
+          margin-bottom: 1rem;
+        }
+
         & strong {
           display: block;
           font-weight: 700;
@@ -155,11 +159,16 @@
         & p + p {
           margin-top: 1em;
         }
+
+        & h3 {
+          font-weight: 600;
+        }
       }
 
       &__actions {
         display: flex;
         justify-content: center;
+        gap: 0.75rem;
       }
     }
   }

excalidraw-app/share/ShareDialog.tsx

@@ -11,6 +11,7 @@ import {
   share,
   shareIOS,
   shareWindows,
+  TrashIcon,
 } from "@excalidraw/excalidraw/components/icons";
 import { useUIAppState } from "@excalidraw/excalidraw/context/ui-appState";
 import { useCopyStatus } from "@excalidraw/excalidraw/hooks/useCopiedIndicator";
@@ -18,12 +19,10 @@ import { useI18n } from "@excalidraw/excalidraw/i18n";
 import { KEYS, getFrame } from "@excalidraw/common";
 import { useEffect, useRef, useState } from "react";
 
-import { useExcalidrawSetAppState } from "@excalidraw/excalidraw/components/App";
+import { roomManager } from "excalidraw-app/data/roomManager";
 
 import { atom, useAtom, useAtomValue } from "../app-jotai";
 import { activeRoomLinkAtom } from "../collab/Collab";
-import { RoomList } from "../components/RoomList";
-import { getCollaborationLink } from "../data";
 
 import "./ShareDialog.scss";
 
@@ -73,6 +72,30 @@ const ActiveRoomDialog = ({
   const isShareSupported = "share" in navigator;
   const { onCopy, copyStatus } = useCopyStatus();
 
+  const [isRoomOwner, setIsRoomOwner] = useState(false);
+  useEffect(() => {
+    roomManager
+      .getCurrentRoom()
+      .then((room) => {
+        if (room) {
+          const _room = new URL(activeRoomLink);
+          const match = _room.hash.match(/room=([^,]+),([^&]+)/);
+          if (match) {
+            const [, roomId] = match;
+            setIsRoomOwner(roomId === room.roomId);
+          } else {
+            setIsRoomOwner(false);
+          }
+        } else {
+          setIsRoomOwner(false);
+        }
+      })
+      .catch((error) => {
+        console.error("Error getting current room:", error);
+        setIsRoomOwner(false);
+      });
+  }, [activeRoomLink]);
+
   const copyRoomLink = async () => {
     try {
       await copyTextToSystemClipboard(activeRoomLink);
@@ -157,7 +180,10 @@ const ActiveRoomDialog = ({
           </span>
           {t("roomDialog.desc_privacy")}
         </p>
+        <h3>Stop Session</h3>
         <p>{t("roomDialog.desc_exitSession")}</p>
+        <h3>Delete Session</h3>
+        <p>{t("roomDialog.desc_deleteSession")}</p>
       </div>
 
       <div className="ShareDialog__active__actions">
@@ -175,6 +201,21 @@ const ActiveRoomDialog = ({
             }
           }}
         />
+        {isRoomOwner && (
+          <FilledButton
+            size="large"
+            label={t("roomDialog.button_deleteSession")}
+            icon={TrashIcon}
+            color="danger"
+            onClick={() => {
+              trackEvent("share", "room deleted");
+              // TODO: handle deletion
+              // 1. stop collaboration (for all users?)
+              // 2. delete room from backend (firebase)
+              // 3. close
+            }}
+          />
+        )}
       </div>
     </>
   );
@@ -184,8 +225,6 @@ const ShareDialogPicker = (props: ShareDialogProps) => {
   const { t } = useI18n();
 
   const { collabAPI } = props;
-  const setAppState = useExcalidrawSetAppState();
-
   const startCollabJSX = collabAPI ? (
     <>
       <div className="ShareDialog__picker__header">
@@ -193,8 +232,15 @@ const ShareDialogPicker = (props: ShareDialogProps) => {
       </div>
 
       <div className="ShareDialog__picker__description">
-        <div style={{ marginBottom: "1em" }}>{t("roomDialog.desc_intro")}</div>
-        {t("roomDialog.desc_privacy")}
+        <div className="ShareDialog__picker__description__text">
+          {t("roomDialog.desc_intro")}
+        </div>
+        <div className="ShareDialog__picker__description__text">
+          {t("roomDialog.desc_privacy")}
+        </div>
+        <div className="ShareDialog__picker__description__text">
+          {t("roomDialog.desc_warning")}
+        </div>
       </div>
 
       <div className="ShareDialog__picker__button">
@@ -217,26 +263,6 @@ const ShareDialogPicker = (props: ShareDialogProps) => {
         }}
       ></div>
 
-      <RoomList
-        collabAPI={collabAPI}
-        onRoomSelect={async (roomId, roomKey) => {
-          const roomLink = getCollaborationLink({ roomId, roomKey });
-          try {
-            await copyTextToSystemClipboard(roomLink);
-            trackEvent("share", "room link copied from list");
-            // set a toast message when the link is copied
-            setAppState({
-              toast: {
-                message: t("roomDialog.roomLinkCopied"),
-              },
-            });
-          } catch (e) {
-            collabAPI.setCollabError(t("errors.copyToSystemClipboardFailed"));
-          }
-        }}
-        handleClose={props.handleClose}
-      />
-
       {props.type === "share" && (
         <div className="ShareDialog__separator">
           <span>{t("shareDialog.or")}</span>

packages/excalidraw/locales/en.json

@@ -376,31 +376,15 @@
   "roomDialog": {
     "desc_intro": "Invite people to collaborate on your drawing.",
     "desc_privacy": "Don't worry, the session is end-to-end encrypted, and fully private. Not even our server can see what you draw.",
+    "desc_warning": "Starting a new session will automatically delete your last active session. Please make sure to save your work from the last session before starting a new one.",
     "button_startSession": "Start session",
     "button_stopSession": "Stop session",
+    "button_deleteSession": "Delete session",
     "desc_inProgressIntro": "Live-collaboration session is now in progress.",
     "desc_shareLink": "Share this link with anyone you want to collaborate with:",
     "desc_exitSession": "Stopping the session will disconnect you from the room, but you'll be able to continue working with the scene, locally. Note that this won't affect other people, and they'll still be able to collaborate on their version.",
-    "shareTitle": "Join a live collaboration session on Excalidraw",
-    "roomListTitle": "Your Collaboration Rooms",
-    "roomListDescription": "Anyone with access to your rooms can join at any time. Deleting a room is permanent and will make it inaccessible to everyone (including you). Please be sure to save anything important before deleting.",
-    "roomListEmpty": "No collaboration rooms yet.",
-    "roomListEmptySubtext": "Create a room to start collaborating with others!",
-    "roomListLoading": "Loading your rooms...",
-    "roomNamePlaceholder": "Room name",
-    "roomNameTooltip": "Click to rename",
-    "copyRoomLinkTooltip": "Copy room link",
-    "renameRoomTooltip": "Rename room",
-    "deleteRoomTooltip": "Delete room",
-    "deleteAllRooms": "Delete All",
-    "deleteRoomConfirm": "Are you sure you want to delete this room? This action cannot be undone.",
-    "deleteAllRoomsConfirm": "Are you sure you want to delete ALL your collaboration rooms? This action cannot be undone.",
-    "today": "Today",
-    "yesterday": "Yesterday",
-    "daysAgo": "{{days}} days ago",
-    "created": "Created",
-    "lastUsed": "Last used",
-    "roomLinkCopied": "Room link copied to clipboard"
+    "desc_deleteSession": "You're the creator of this session, so you can delete it if you wish to stop collaborating with others. Deleting a session is permanent and will make the scene inaccessible to everyone (including you). Please be sure to save anything important before deleting.",
+    "shareTitle": "Join a live collaboration session on Excalidraw"
   },
   "errorDialog": {
     "title": "Error"