remove room list

This commit is contained in:
Ryan Di
2025-06-02 13:06:48 +10:00
parent 23175654b8
commit 97cc331530
2 changed files with 0 additions and 507 deletions

View File

@@ -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;
}
}
}
}

View File

@@ -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<typeof useI18n>["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 (
<div className="RoomItem">
<div className="RoomItem__info">
<div className="RoomItem__name">
{isEditing ? (
<input
type="text"
value={editName}
onChange={(e) => setEditName(e.target.value)}
onBlur={handleRename}
onKeyDown={handleKeyDown}
placeholder={t("roomDialog.roomNamePlaceholder")}
autoFocus
className="RoomItem__nameInput"
/>
) : (
<span
className="RoomItem__nameText"
onClick={() => setIsEditing(true)}
title={t("roomDialog.roomNameTooltip")}
>
{room.name || `Room ${room.roomId}`}
</span>
)}
</div>
<div className="RoomItem__meta">
<span className="RoomItem__date">
{t("roomDialog.created")} {formatDate(room.createdAt, t)}
</span>
{room.lastAccessed !== room.createdAt && (
<>
<span></span>
<span className="RoomItem__lastAccessed">
{t("roomDialog.lastUsed")}: {formatDate(room.lastAccessed, t)}
</span>
</>
)}
</div>
</div>
<div className="RoomItem__actions">
<button
className="RoomItem__action"
onClick={() => onSelect(room.roomId, room.roomKey)}
title={t("roomDialog.copyRoomLinkTooltip")}
aria-label={t("roomDialog.copyRoomLinkTooltip")}
>
{LinkIcon}
</button>
<button
className="RoomItem__action"
onClick={() => setIsEditing(true)}
title={t("roomDialog.renameRoomTooltip")}
aria-label={t("roomDialog.renameRoomTooltip")}
>
{FreedrawIcon}
</button>
<button
className="RoomItem__action RoomItem__action--danger"
onClick={() => onDelete(room.roomId)}
title={t("roomDialog.deleteRoomTooltip")}
aria-label={t("roomDialog.deleteRoomTooltip")}
>
{TrashIcon}
</button>
</div>
</div>
);
};
export const RoomList = ({
collabAPI,
onRoomSelect,
handleClose,
}: RoomListProps) => {
const { t } = useI18n();
const [rooms, setRooms] = useState<CollabRoom[]>([]);
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 (
<div className="RoomList">
<div className="RoomList__header">
<h3>{t("roomDialog.roomListTitle")}</h3>
</div>
<div className="RoomList__loading">
{t("roomDialog.roomListLoading")}
</div>
</div>
);
}
return (
<div className="RoomList">
<div className="RoomList__header">
<h3>{t("roomDialog.roomListTitle")}</h3>
{rooms.length > 0 && (
<button
className="RoomList__clearAll"
onClick={handleClearAll}
title={t("roomDialog.deleteAllRooms")}
>
{t("roomDialog.deleteAllRooms")}
</button>
)}
</div>
<p className="RoomList__description">
{t("roomDialog.roomListDescription")}
</p>
{rooms.length === 0 ? (
<div className="RoomList__empty">
<p>{t("roomDialog.roomListEmpty")}</p>
<p>{t("roomDialog.roomListEmptySubtext")}</p>
</div>
) : (
<div className="RoomList__items">
{rooms.map((room) => (
<RoomItem
key={room.id}
room={room}
onDelete={handleDeleteRoom}
onSelect={handleRoomSelect}
onRename={handleRenameRoom}
/>
))}
</div>
)}
</div>
);
};