From 97cc3315302dbf2636cb71f9f5d87222e1d4a4cb Mon Sep 17 00:00:00 2001 From: Ryan Di Date: Mon, 2 Jun 2025 13:06:48 +1000 Subject: [PATCH] remove room list --- excalidraw-app/components/RoomList.scss | 249 ----------------------- excalidraw-app/components/RoomList.tsx | 258 ------------------------ 2 files changed, 507 deletions(-) delete mode 100644 excalidraw-app/components/RoomList.scss delete mode 100644 excalidraw-app/components/RoomList.tsx diff --git a/excalidraw-app/components/RoomList.scss b/excalidraw-app/components/RoomList.scss deleted file mode 100644 index 715ca1da5..000000000 --- a/excalidraw-app/components/RoomList.scss +++ /dev/null @@ -1,249 +0,0 @@ -@import "../../packages/excalidraw/css/variables.module.scss"; - -.RoomList { - display: flex; - flex-direction: column; - max-height: 400px; - padding: 0 1rem; - - &__header { - display: flex; - justify-content: space-between; - align-items: center; - margin-bottom: 0.2rem; - flex-shrink: 0; - padding-top: 1rem; - - h3 { - margin: 0; - font-size: 1.1rem; - font-weight: 600; - color: var(--color-text); - } - } - - &__description { - font-size: 0.9rem; - color: var(--color-text-secondary); - margin-bottom: 1rem; - flex-shrink: 0; - } - - &__clearAll { - background: none; - border: none; - color: var(--color-text-secondary); - font-size: 0.85rem; - cursor: pointer; - padding: 0.25rem 0.5rem; - border-radius: 4px; - transition: all 0.2s ease; - - &:hover { - background-color: var(--color-surface-lowest); - color: var(--color-text); - } - } - - &__loading { - text-align: center; - color: var(--color-text-secondary); - padding: 2rem; - flex: 1; - display: flex; - align-items: center; - justify-content: center; - } - - &__empty { - text-align: center; - color: var(--color-text-secondary); - padding: 2rem; - flex: 1; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - - p { - margin: 0.5rem 0; - } - - p:first-child { - font-weight: 500; - } - } - - &__items { - display: flex; - flex-direction: column; - gap: 0.5rem; - overflow-y: auto; - flex: 1; - min-height: 0; - padding-bottom: 1rem; - } -} - -.RoomItem { - display: flex; - align-items: center; - justify-content: space-between; - padding: 0.75rem; - // background-color: var(--color-surface-low); - border-radius: 8px; - border: 1px solid var(--color-border); - transition: all 0.2s ease; - - &:hover { - background-color: var(--color-surface-high); - border-color: var(--color-border-accent); - } - - &__info { - flex: 1; - min-width: 0; // Allow text truncation - } - - &__name { - margin-bottom: 0.25rem; - height: 1.5rem; // Fixed height for consistent layout - display: flex; - align-items: center; - } - - &__nameText { - font-weight: 500; - color: var(--color-text); - cursor: pointer; - border-radius: 4px; - transition: background-color 0.2s ease; - display: inline-block; - max-width: 200px; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - height: 1.5rem; - line-height: 1.5rem; - padding: 0 0.25rem; - margin: 0; - box-sizing: border-box; - } - - &__nameInput { - font-weight: 500; - color: var(--color-text); - background: var(--color-surface-lowest); - border: 1px solid var(--color-border-accent); - border-radius: 4px; - font-size: inherit; - font-family: inherit; - max-width: 200px; - height: 1.5rem; - line-height: 1.2; - padding: 0 0.25rem; - margin: 0; - box-sizing: border-box; - - &:focus { - outline: none; - border-color: var(--color-accent); - } - } - - &__meta { - display: flex; - align-items: center; - flex-direction: row; - gap: 0.5rem; - font-size: 0.8rem; - color: var(--color-text-secondary); - } - - &__date, - &__lastAccessed { - white-space: nowrap; - } - - &__actions { - display: flex; - align-items: center; - gap: 0.25rem; - margin-left: 1rem; - } - - &__action { - display: flex; - align-items: center; - justify-content: center; - width: 2rem; - height: 2rem; - background: none; - border: none; - border-radius: 4px; - cursor: pointer; - color: var(--color-text-secondary); - transition: all 0.2s ease; - - svg { - width: 1rem; - height: 1rem; - } - - &:hover { - background-color: var(--color-surface-lowest); - color: var(--color-text); - } - - &--danger { - &:hover { - background-color: var(--color-error-low); - color: var(--color-error); - } - } - } -} - -// Mobile responsiveness -@media (max-width: 640px) { - .RoomList { - &__header { - padding: 0 0.5rem; - } - - &__items { - padding: 0 0.5rem; - } - } - - .RoomItem { - padding: 0.5rem; - - &__nameText { - max-width: 150px; - } - - &__nameInput { - max-width: 150px; - } - - &__meta { - font-size: 0.75rem; - flex-wrap: wrap; - } - - &__actions { - margin-left: 0.5rem; - } - - &__action { - width: 1.75rem; - height: 1.75rem; - - svg { - width: 0.875rem; - height: 0.875rem; - } - } - } -} diff --git a/excalidraw-app/components/RoomList.tsx b/excalidraw-app/components/RoomList.tsx deleted file mode 100644 index 255bbd250..000000000 --- a/excalidraw-app/components/RoomList.tsx +++ /dev/null @@ -1,258 +0,0 @@ -import { useState, useEffect } from "react"; -import { trackEvent } from "@excalidraw/excalidraw/analytics"; -import { useI18n } from "@excalidraw/excalidraw/i18n"; -import { - FreedrawIcon, - LinkIcon, - TrashIcon, -} from "@excalidraw/excalidraw/components/icons"; - -import { roomManager, type CollabRoom } from "../data/roomManager"; - -import "./RoomList.scss"; - -import type { CollabAPI } from "../collab/Collab"; - -interface RoomListProps { - collabAPI: CollabAPI; - onRoomSelect: (roomId: string, roomKey: string) => void; - handleClose: () => void; -} - -const formatDate = (timestamp: number, t: ReturnType["t"]) => { - const date = new Date(timestamp); - const now = new Date(); - const diffMs = now.getTime() - date.getTime(); - const diffDays = Math.floor(diffMs / (1000 * 60 * 60 * 24)); - - if (diffDays === 0) { - return t("roomDialog.today"); - } else if (diffDays === 1) { - return t("roomDialog.yesterday"); - } else if (diffDays < 7) { - return t("roomDialog.daysAgo", { days: diffDays }); - } - return date.toLocaleDateString(); -}; - -const RoomItem = ({ - room, - onDelete, - onSelect, - onRename, -}: { - room: CollabRoom; - onDelete: (roomId: string) => void; - onSelect: (roomId: string, roomKey: string) => void; - onRename: (roomId: string, name: string) => void; -}) => { - const { t } = useI18n(); - const [isEditing, setIsEditing] = useState(false); - const [editName, setEditName] = useState(room.name || ""); - - const handleRename = () => { - if (editName.trim()) { - onRename(room.roomId, editName.trim()); - } - setIsEditing(false); - }; - - const handleKeyDown = (event: React.KeyboardEvent) => { - if (event.key === "Enter") { - handleRename(); - } else if (event.key === "Escape") { - setEditName(room.name || ""); - setIsEditing(false); - } - }; - - return ( -
-
-
- {isEditing ? ( - setEditName(e.target.value)} - onBlur={handleRename} - onKeyDown={handleKeyDown} - placeholder={t("roomDialog.roomNamePlaceholder")} - autoFocus - className="RoomItem__nameInput" - /> - ) : ( - setIsEditing(true)} - title={t("roomDialog.roomNameTooltip")} - > - {room.name || `Room ${room.roomId}`} - - )} -
-
- - {t("roomDialog.created")} {formatDate(room.createdAt, t)} - - {room.lastAccessed !== room.createdAt && ( - <> - • - - {t("roomDialog.lastUsed")}: {formatDate(room.lastAccessed, t)} - - - )} -
-
-
- - - -
-
- ); -}; - -export const RoomList = ({ - collabAPI, - onRoomSelect, - handleClose, -}: RoomListProps) => { - const { t } = useI18n(); - const [rooms, setRooms] = useState([]); - const [loading, setLoading] = useState(true); - - const loadRooms = async () => { - try { - const userRooms = await roomManager.getRooms(); - setRooms(userRooms); - } catch (error) { - console.error("Failed to load rooms:", error); - } finally { - setLoading(false); - } - }; - - useEffect(() => { - loadRooms(); - }, []); - - const handleDeleteRoom = async (roomId: string) => { - if (window.confirm(t("roomDialog.deleteRoomConfirm"))) { - try { - await roomManager.deleteRoom(roomId); - await loadRooms(); // Refresh the list - trackEvent("share", "room deleted"); - } catch (error) { - console.error("Failed to delete room:", error); - } - } - }; - - const handleRenameRoom = async (roomId: string, name: string) => { - try { - await roomManager.updateRoomName(roomId, name); - await loadRooms(); // Refresh the list - } catch (error) { - console.error("Failed to rename room:", error); - } - }; - - const handleRoomSelect = async (roomId: string, roomKey: string) => { - try { - await roomManager.updateRoomAccess(roomId); - trackEvent("share", "room rejoined"); - onRoomSelect(roomId, roomKey); - } catch (error) { - console.error("Failed to update room access:", error); - onRoomSelect(roomId, roomKey); - } - }; - - const handleClearAll = async () => { - if (window.confirm(t("roomDialog.deleteAllRoomsConfirm"))) { - try { - await roomManager.clearAllRooms(); - setRooms([]); - trackEvent("share", "all rooms cleared"); - } catch (error) { - console.error("Failed to clear all rooms:", error); - } - } - }; - - if (loading) { - return ( -
-
-

{t("roomDialog.roomListTitle")}

-
-
- {t("roomDialog.roomListLoading")} -
-
- ); - } - - return ( -
-
-

{t("roomDialog.roomListTitle")}

- {rooms.length > 0 && ( - - )} -
- -

- {t("roomDialog.roomListDescription")} -

- - {rooms.length === 0 ? ( -
-

{t("roomDialog.roomListEmpty")}

-

{t("roomDialog.roomListEmptySubtext")}

-
- ) : ( -
- {rooms.map((room) => ( - - ))} -
- )} -
- ); -};