Skip to content

Commit ef4f333

Browse files
jesusmpcjesusmpc
committed
chore: improvement on connection status
1 parent 1df63af commit ef4f333

File tree

4 files changed

+81
-33
lines changed

4 files changed

+81
-33
lines changed

‎code/components/room-components/connection-status.tsx‎

Lines changed: 32 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -9,20 +9,41 @@ type ConnectionStatusProps = {
99
weaveConnectionStatus: string;
1010
};
1111

12-
export const ConnectionStatus = ({ weaveConnectionStatus }: Readonly<ConnectionStatusProps>) => {
12+
export const ConnectionStatus = ({
13+
weaveConnectionStatus,
14+
}: Readonly<ConnectionStatusProps>) => {
15+
console.log(weaveConnectionStatus);
16+
1317
return (
14-
<div className="flex gap-[1px] bg-light-border-3 rounded-full">
18+
<div className="flex">
1519
<div
16-
className={cn("bg-light-background-1 px-2 py-2 flex justify-center items-center rounded-full", {
17-
["bg-mint-200 text-light-content-1"]: weaveConnectionStatus === WEAVE_STORE_WEBSOCKETS_CONNECTION_STATUS.CONNECTED,
18-
["bg-water-200 text-light-content-1"]: weaveConnectionStatus === WEAVE_STORE_WEBSOCKETS_CONNECTION_STATUS.CONNECTING,
19-
["bg-cherry-200 text-light-content-1"]:
20-
weaveConnectionStatus === WEAVE_STORE_WEBSOCKETS_CONNECTION_STATUS.DISCONNECTED,
21-
})}
20+
className={cn(
21+
"bg-light-background-1 p-2 flex justify-center items-center rounded-full",
22+
{
23+
["bg-emerald-200 text-black"]:
24+
weaveConnectionStatus ===
25+
WEAVE_STORE_WEBSOCKETS_CONNECTION_STATUS.CONNECTED,
26+
["bg-sky-300 text-white"]:
27+
weaveConnectionStatus ===
28+
WEAVE_STORE_WEBSOCKETS_CONNECTION_STATUS.CONNECTING,
29+
["bg-rose-300 text-white"]:
30+
weaveConnectionStatus ===
31+
WEAVE_STORE_WEBSOCKETS_CONNECTION_STATUS.DISCONNECTED,
32+
}
33+
)}
2234
>
23-
{weaveConnectionStatus === WEAVE_STORE_WEBSOCKETS_CONNECTION_STATUS.CONNECTED && <Cloud size={16} />}
24-
{weaveConnectionStatus === WEAVE_STORE_WEBSOCKETS_CONNECTION_STATUS.CONNECTING && <CloudCog size={16} />}
25-
{weaveConnectionStatus === WEAVE_STORE_WEBSOCKETS_CONNECTION_STATUS.DISCONNECTED && <CloudAlert size={16} />}
35+
{weaveConnectionStatus ===
36+
WEAVE_STORE_WEBSOCKETS_CONNECTION_STATUS.CONNECTED && (
37+
<Cloud size={20} />
38+
)}
39+
{weaveConnectionStatus ===
40+
WEAVE_STORE_WEBSOCKETS_CONNECTION_STATUS.CONNECTING && (
41+
<CloudCog size={20} />
42+
)}
43+
{weaveConnectionStatus ===
44+
WEAVE_STORE_WEBSOCKETS_CONNECTION_STATUS.DISCONNECTED && (
45+
<CloudAlert size={20} />
46+
)}
2647
</div>
2748
</div>
2849
);

‎code/components/room-components/overlay/room-information-overlay.tsx‎

Lines changed: 33 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
"use client";
22

33
import React from "react";
4+
import { cn } from "@/lib/utils";
45
import { useRouter } from "next/navigation";
56
import { useWeave } from "@inditextech/weavejs-react";
67
import { useCollaborationRoom } from "@/store/store";
@@ -13,7 +14,13 @@ import {
1314
} from "@/components/ui/dropdown-menu";
1415

1516
import { Logo } from "@/components/utils/logo";
16-
import { Image as ImageIcon, FileText, Ellipsis, LogOut } from "lucide-react";
17+
import {
18+
Image as ImageIcon,
19+
FileText,
20+
LogOut,
21+
ChevronDown,
22+
ChevronUp,
23+
} from "lucide-react";
1724
import { WeaveExportStageActionParams } from "@inditextech/weavejs-sdk";
1825
import { ConnectionStatus } from "../connection-status";
1926

@@ -25,6 +32,8 @@ export function RoomInformationOverlay() {
2532

2633
const room = useCollaborationRoom((state) => state.room);
2734

35+
const [menuOpen, setMenuOpen] = React.useState(false);
36+
2837
const handleExportToImage = React.useCallback(() => {
2938
if (instance) {
3039
instance.triggerAction<WeaveExportStageActionParams>("exportStageTool", {
@@ -53,22 +62,31 @@ export function RoomInformationOverlay() {
5362

5463
return (
5564
<div className="absolute top-2 left-2 flex gap-1 justify-center items-center">
56-
<div className="p-1 pl-3 bg-white border border-zinc-200 shadow-xs flex justify-start items-center gap-2">
65+
<div className="p-2 px-3 bg-white border border-zinc-200 shadow-xs flex justify-start items-center gap-2">
5766
<Logo kind="small" />
58-
<div className="w-[1px] h-4 mx-2 bg-zinc-200"></div>
59-
<ConnectionStatus weaveConnectionStatus={weaveConnectionStatus} />
60-
<div className="flex justify-start items-center font-noto-sans-mono text-foreground !normal-case min-h-[32px] pr-2">
61-
{room}
62-
</div>
63-
<DropdownMenu>
64-
<DropdownMenuTrigger className="rounded-none cursor-pointer p-2 hover:bg-zinc-200 focus:outline-none">
65-
<Ellipsis className="rounded-none" />
67+
<div className="w-[1px] h-5 mx-1 bg-zinc-200"></div>
68+
<DropdownMenu onOpenChange={(open) => setMenuOpen(open)}>
69+
<DropdownMenuTrigger
70+
className={cn(
71+
"rounded-none cursor-pointer p-2 px-3 hover:bg-accent focus:outline-none",
72+
{
73+
["bg-accent"]: menuOpen,
74+
["bg-white"]: !menuOpen,
75+
}
76+
)}
77+
>
78+
<div className="flex justify-start items-center gap-2 font-noto-sans-mono text-foreground !normal-case min-h-[32px]">
79+
<div className="font-noto-sans text-xl font-extralight">
80+
{room}
81+
</div>
82+
{menuOpen ? <ChevronUp /> : <ChevronDown />}
83+
</div>
6684
</DropdownMenuTrigger>
6785
<DropdownMenuContent
6886
align="start"
69-
side="right"
70-
alignOffset={-4}
71-
sideOffset={8}
87+
side="bottom"
88+
alignOffset={0}
89+
sideOffset={4}
7290
className="font-noto-sans-mono rounded-none"
7391
>
7492
<DropdownMenuItem
@@ -93,6 +111,8 @@ export function RoomInformationOverlay() {
93111
</DropdownMenuItem>
94112
</DropdownMenuContent>
95113
</DropdownMenu>
114+
<div className="w-[1px] h-5 mx-1 bg-zinc-200"></div>
115+
<ConnectionStatus weaveConnectionStatus={weaveConnectionStatus} />
96116
</div>
97117
</div>
98118
);

‎code/components/room-components/toolbar/toolbar-button.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -32,9 +32,9 @@ export function ToolbarButton({
3232
<TooltipTrigger asChild>
3333
<button
3434
className={cn(
35-
"pointer-events-auto cursor-pointer hover:bg-zinc-200 px-2 py-2 flex justify-center items-center",
35+
"pointer-events-auto cursor-pointer hover:bg-accent px-2 py-2 flex justify-center items-center",
3636
{
37-
["bg-zinc-200"]: active,
37+
["bg-accent"]: active,
3838
["pointer-events-none cursor-default opacity-50"]: disabled,
3939
}
4040
)}

‎code/components/utils/logo.tsx‎

Lines changed: 14 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -4,24 +4,31 @@ import logoSrc from "@/assets/images/logo.png";
44
import { cn } from "@/lib/utils";
55

66
type LogoProps = {
7-
kind?: "large" | "small",
8-
variant?: "no-text" | "text",
7+
kind?: "large" | "small";
8+
variant?: "no-text" | "text";
99
};
1010

11-
export function Logo({ kind = "large", variant = "text" }: Readonly<LogoProps>) {
11+
export function Logo({
12+
kind = "large",
13+
variant = "text",
14+
}: Readonly<LogoProps>) {
1215
return (
1316
<div className="p-0 bg-transparent flex justify-start items-center gap-2">
1417
<Image
1518
src={logoSrc}
16-
width={kind === "large" ? 64 : 24}
17-
height={kind === "large" ? 64 : 24}
19+
width={kind === "large" ? 64 : 32}
20+
height={kind === "large" ? 64 : 32}
1821
className={cn(`object-cover`, {
1922
["w-11 h-11"]: kind === "large",
20-
["w-6 h-6"]: kind === "small",
23+
["w-8 h-8"]: kind === "small",
2124
})}
2225
alt="Weave.js logo"
2326
/>
24-
{ variant === "text" && <div className="font-noto-sans-mono text-muted-foreground !normal-case">Weave.js</div>}
27+
{variant === "text" && (
28+
<div className="font-noto-sans-mono text-muted-foreground !normal-case">
29+
Weave.js
30+
</div>
31+
)}
2532
</div>
2633
);
2734
}

0 commit comments

Comments
 (0)