+
+
+
+ Mobile App Qr Code +
+
+
+ + Mobile App Qr Code +
+ Token successfully created
+ The API token {p.token.name} was successfully created. Please
+ note the following information as they won't be available after.
+
+
+ API URL:
+ Token ID:
+ Token secret:
+ +
+ API URL:
+ Token ID:
+ Token secret:
+ You do not have created any token yet!
+
+ );
+
+ return (
+ +
+ {error} +
+
+ );
+}
diff --git a/matrixgw_frontend/src/routes/MatrixLinkRoute.tsx b/matrixgw_frontend/src/routes/MatrixLinkRoute.tsx
new file mode 100644
index 0000000..0125fad
--- /dev/null
+++ b/matrixgw_frontend/src/routes/MatrixLinkRoute.tsx
@@ -0,0 +1,329 @@
+import CheckIcon from "@mui/icons-material/Check";
+import CloseIcon from "@mui/icons-material/Close";
+import KeyIcon from "@mui/icons-material/Key";
+import LinkIcon from "@mui/icons-material/Link";
+import LinkOffIcon from "@mui/icons-material/LinkOff";
+import PlayArrowIcon from "@mui/icons-material/PlayArrow";
+import PowerSettingsNewIcon from "@mui/icons-material/PowerSettingsNew";
+import StopIcon from "@mui/icons-material/Stop";
+import {
+ Button,
+ Card,
+ CardActions,
+ CardContent,
+ CircularProgress,
+ Grid,
+ Typography,
+} from "@mui/material";
+import React from "react";
+import { MatrixLinkApi } from "../api/MatrixLinkApi";
+import { MatrixSyncApi } from "../api/MatrixSyncApi";
+import { SetRecoveryKeyDialog } from "../dialogs/SetRecoveryKeyDialog";
+import { useAlert } from "../hooks/contexts_provider/AlertDialogProvider";
+import { useConfirm } from "../hooks/contexts_provider/ConfirmDialogProvider";
+import { useLoadingMessage } from "../hooks/contexts_provider/LoadingMessageProvider";
+import { useSnackbar } from "../hooks/contexts_provider/SnackbarProvider";
+import { useUserInfo } from "../widgets/dashboard/BaseAuthenticatedPage";
+import { MatrixGWRouteContainer } from "../widgets/MatrixGWRouteContainer";
+
+export function MatrixLinkRoute(): React.ReactElement {
+ const user = useUserInfo();
+ return (
+ + MatrixGW is currently connected to your account with the following + information: +
+-
+
- + User id: {user.info.matrix_user_id} + +
- + Device id: {user.info.matrix_device_id} + +
+ If you encounter issues with your Matrix account you can try to + disconnect and connect back again. +
++ Recovery key is used to verify MatrixGW connection and access + message history in encrypted rooms. +
+ +
+ Current encryption status:{" "}
+ {user.info.matrix_recovery_state === "Enabled" ? (
+
+ A thread is spawned on the server to watch for events on the + Matrix server. You can restart this thread from here in case of + issue. +
+ +
+ Current thread status:{" "}
+ {started === undefined ? (
+ <>
+
+
+
+
+
+ );
+}
diff --git a/matrixgw_frontend/src/routes/WSDebugRoute.tsx b/matrixgw_frontend/src/routes/WSDebugRoute.tsx
new file mode 100644
index 0000000..56cd9e9
--- /dev/null
+++ b/matrixgw_frontend/src/routes/WSDebugRoute.tsx
@@ -0,0 +1,56 @@
+import React from "react";
+import { JsonView, darkStyles } from "react-json-view-lite";
+import "react-json-view-lite/dist/index.css";
+import { type WsMessage } from "../api/WsApi";
+import { useUserInfo } from "../widgets/dashboard/BaseAuthenticatedPage";
+import { MatrixGWRouteContainer } from "../widgets/MatrixGWRouteContainer";
+import { MatrixWS, WSState } from "../widgets/messages/MatrixWS";
+import { NotLinkedAccountMessage } from "../widgets/NotLinkedAccountMessage";
+
+type TimestampedMessages = WsMessage & { time: number };
+
+export function WSDebugRoute(): React.ReactElement {
+ const user = useUserInfo();
+
+ const [state, setState] = React.useState404 Not found
+The page you requested was not found!
+
+ State:
+
+ {state}
+
+
+
+ {/* WS messages list */}
+ {messages.map((msg, id) => (
+
+ level < 2}
+ style={{
+ ...darkStyles,
+ container: "",
+ }}
+ />
+
+ ))}
+
+
+ );
+
+ return (
+ <>
+ {error && (
+
+
+ );
+}
diff --git a/matrixgw_frontend/src/theme/AppTheme.tsx b/matrixgw_frontend/src/theme/AppTheme.tsx
new file mode 100644
index 0000000..2c432a5
--- /dev/null
+++ b/matrixgw_frontend/src/theme/AppTheme.tsx
@@ -0,0 +1,46 @@
+import * as React from "react";
+import { ThemeProvider, createTheme } from "@mui/material/styles";
+import type { ThemeOptions } from "@mui/material/styles";
+import { inputsCustomizations } from "./customizations/inputs";
+import { dataDisplayCustomizations } from "./customizations/dataDisplay";
+import { feedbackCustomizations } from "./customizations/feedback";
+import { navigationCustomizations } from "./customizations/navigation";
+import { surfacesCustomizations } from "./customizations/surfaces";
+import { colorSchemes, typography, shadows, shape } from "./themePrimitives";
+
+interface AppThemeProps {
+ themeComponents?: ThemeOptions["components"];
+}
+
+export function AppTheme(
+ props: React.PropsWithChildren
+
+ );
+}
diff --git a/matrixgw_frontend/src/widgets/NotLinkedAccountMessage.tsx b/matrixgw_frontend/src/widgets/NotLinkedAccountMessage.tsx
new file mode 100644
index 0000000..500476f
--- /dev/null
+++ b/matrixgw_frontend/src/widgets/NotLinkedAccountMessage.tsx
@@ -0,0 +1,26 @@
+import ArrowForwardIcon from "@mui/icons-material/ArrowForward";
+import { Button } from "@mui/material";
+import { Link } from "react-router";
+
+export function NotLinkedAccountMessage(): React.ReactElement {
+ return (
+
+ {p.label}
+ {p.actions ?? <>}
+
+
+ {p.children}
+
+
+ );
+}
diff --git a/matrixgw_frontend/src/widgets/RouterLink.tsx b/matrixgw_frontend/src/widgets/RouterLink.tsx
new file mode 100644
index 0000000..c946ed6
--- /dev/null
+++ b/matrixgw_frontend/src/widgets/RouterLink.tsx
@@ -0,0 +1,16 @@
+import { type PropsWithChildren } from "react";
+import { Link } from "react-router";
+
+export function RouterLink(
+ p: PropsWithChildren<{ to: string; target?: React.HTMLAttributeAnchorTarget }>
+): React.ReactElement {
+ return (
+
+ {p.children}
+
+ );
+}
diff --git a/matrixgw_frontend/src/widgets/TimeWidget.tsx b/matrixgw_frontend/src/widgets/TimeWidget.tsx
new file mode 100644
index 0000000..1813af3
--- /dev/null
+++ b/matrixgw_frontend/src/widgets/TimeWidget.tsx
@@ -0,0 +1,31 @@
+import { Tooltip } from "@mui/material";
+import {
+ formatDateTime,
+ formatDate,
+ timeDiff,
+ timeDiffFromNow,
+} from "../utils/DateUtils";
+
+export function TimeWidget(p: {
+ time?: number;
+ isDuration?: boolean;
+ showDate?: boolean;
+}): React.ReactElement {
+ if (!p.time) return <>;
+ return (
+
+ Your Matrix account is not linked yet!
+
+
+ }>
+ Go to Matrix Link settings
+
+
+ {p.message}
+ + + + + ); +} diff --git a/matrixgw_frontend/src/widgets/auth/BaseLoginPage.tsx b/matrixgw_frontend/src/widgets/auth/BaseLoginPage.tsx new file mode 100644 index 0000000..4c34f6f --- /dev/null +++ b/matrixgw_frontend/src/widgets/auth/BaseLoginPage.tsx @@ -0,0 +1,66 @@ +import { Typography } from "@mui/material"; +import MuiCard from "@mui/material/Card"; +import Stack from "@mui/material/Stack"; +import { styled } from "@mui/material/styles"; +import { Outlet } from "react-router"; +import { AppIcon } from "../../icons/AppIcon"; +import mdiMessageTextFast from "../../icons/message-text-fast.svg"; + +const Card = styled(MuiCard)(({ theme }) => ({ + display: "flex", + flexDirection: "column", + alignSelf: "center", + width: "100%", + padding: theme.spacing(4), + gap: theme.spacing(2), + margin: "auto", + [theme.breakpoints.up("sm")]: { + maxWidth: "450px", + }, + boxShadow: + "hsla(220, 30%, 5%, 0.05) 0px 5px 15px 0px, hsla(220, 25%, 10%, 0.05) 0px 15px 35px -5px", + ...theme.applyStyles("dark", { + boxShadow: + "hsla(220, 30%, 5%, 0.5) 0px 5px 15px 0px, hsla(220, 25%, 10%, 0.08) 0px 15px 35px -5px", + }), +})); + +const SignInContainer = styled(Stack)(({ theme }) => ({ + height: "calc((1 - var(--template-frame-height, 0)) * 100dvh)", + minHeight: "100%", + padding: theme.spacing(2), + [theme.breakpoints.up("sm")]: { + padding: theme.spacing(4), + }, + "&::before": { + content: '""', + display: "block", + position: "absolute", + zIndex: -1, + inset: 0, + backgroundImage: + "radial-gradient(ellipse at 50% 50%, hsl(210, 100%, 97%), hsl(0, 0%, 100%))", + backgroundRepeat: "no-repeat", + ...theme.applyStyles("dark", { + backgroundImage: + "radial-gradient(at 50% 50%, hsla(210, 100%, 16%, 0.5), hsl(220, 30%, 5%))", + }), + }, +})); + +export function BaseLoginPage(): React.ReactElement { + return ( +
+
+ {isExpanded ?
+
+ -
+
+
+
+
+
+ {/* Websocket */}
+ (
+
+ );
+}
diff --git a/matrixgw_frontend/src/widgets/messages/MatrixWS.tsx b/matrixgw_frontend/src/widgets/messages/MatrixWS.tsx
new file mode 100644
index 0000000..ea9061a
--- /dev/null
+++ b/matrixgw_frontend/src/widgets/messages/MatrixWS.tsx
@@ -0,0 +1,93 @@
+import React from "react";
+import { WsApi, type WsMessage } from "../../api/WsApi";
+import { useSnackbar } from "../../hooks/contexts_provider/SnackbarProvider";
+import CircleIcon from "@mui/icons-material/Circle";
+import { Tooltip } from "@mui/material";
+
+export const WSState = {
+ Closed: "Closed",
+ Connected: "Connected",
+ Error: "Error",
+} as const;
+
+export function MatrixWS(p: {
+ onMessage: (msg: WsMessage) => void;
+ onStateChange?: (state: string) => void;
+}): React.ReactElement {
+ const snackbar = useSnackbar();
+
+ // Keep only the latest version of onMessage
+ const cbRef = React.useRef(p.onMessage);
+ React.useEffect(() => {
+ cbRef.current = p.onMessage;
+ }, [p.onMessage]);
+
+ // Keep only the latest version of onStateChange
+ const stateCbRef = React.useRef(p.onStateChange);
+ React.useEffect(() => {
+ stateCbRef.current = p.onStateChange;
+ }, [p.onStateChange]);
+
+ const [state, setState] = React.useState
+
+
+ {/** Application icon modifier */}
+
+ No room selected.
+
+ )}
+
+ {/* In case of room */}
+ {currentRoom && (
+
+ {/* Empty conversation notice */}
+ {p.manager.messages.length === 0 && (
+
+ Begining of conversation
+
+ )}
+
+ {/** Loading older messages spinner */}
+ {loadingOlder && (
+ 0 &&
+ p.manager.messages[idx - 1].account === m.account &&
+ m.time_sent - p.manager.messages[idx - 1].time_sent < 60 * 3 * 1000
+ }
+ firstMessageOfDay={
+ idx === 0 ||
+ m.time_sent_dayjs.startOf("day").unix() !=
+ p.manager.messages[idx - 1].time_sent_dayjs.startOf("day").unix()
+ }
+ receipts={p.manager.receiptsEventsMap.get(m.event_id)}
+ />
+ ))}
+
+
+
+ );
+}
+
+function RoomMessage(p: {
+ room: Room;
+ users: UsersMap;
+ message: Message;
+ previousFromSamePerson: boolean;
+ firstMessageOfDay: boolean;
+ receipts?: Receipt[];
+}): React.ReactElement {
+ const theme = useTheme();
+ const user = useUserInfo();
+ const alert = useAlert();
+ const confirm = useConfirm();
+ const snackbar = useSnackbar();
+ const loadingMessage = useLoadingMessage();
+
+ const [showImageFullScreen, setShowImageFullScreen] = React.useState(false);
+
+ const [editMessage, setEditMessage] = React.useState
+ No message in this conversation yet!
+
+ )}
+
+ {/** Begining of conversation */}
+ {!p.manager.canLoadOlder && (
+
+
+ )}
+
+ {p.manager.messages.map((m, idx) => (
+
+
+ )}
+
+ {/* Message content */}
+
+ {/* Image */}
+ {p.message.type === "m.image" && (
+ ![]()
setShowImageFullScreen(true)}
+ src={MatrixApiEvent.GetEventFileURL(
+ p.room,
+ p.message.event_id,
+ true
+ )}
+ style={{
+ maxWidth: "200px",
+ }}
+ />
+ )}
+
+ {/* Audio */}
+ {p.message.type === "m.audio" && (
+
+ )}
+
+ {/* Video */}
+ {p.message.type === "m.video" && (
+
+ )}
+
+ {/* File */}
+ {p.message.type === "m.file" && (
+
+ }>
+ {p.message.content}
+
+
+ )}
+
+ {/* Text message */}
+ {p.message.type === "m.text" && (
+
+
+ {/* Read receipts */}
+ {p.message.content}
+ )}
+
+ {(p.receipts ?? []).map((r) => {
+ const u = p.users.get(r.user);
+
+ if (!u || u.user_id === user.info.matrix_user_id) return <>;
+
+ return (
+
+
+ {/** Button bar */}
+
+
+ );
+ })}
+
+
+ {reactions.length}
+
+ }
+ />
+
+ No room to display.
+
+ );
+
+ return (
+
+ {/** Chip bar */}
+
+ );
+}
diff --git a/matrixgw_frontend/src/widgets/messages/RoomWidget.tsx b/matrixgw_frontend/src/widgets/messages/RoomWidget.tsx
new file mode 100644
index 0000000..5dce7ea
--- /dev/null
+++ b/matrixgw_frontend/src/widgets/messages/RoomWidget.tsx
@@ -0,0 +1,44 @@
+import React from "react";
+import { MatrixApiEvent } from "../../api/matrix/MatrixApiEvent";
+import type { UsersMap } from "../../api/matrix/MatrixApiProfile";
+import type { Room } from "../../api/matrix/MatrixApiRoom";
+import { useSnackbar } from "../../hooks/contexts_provider/SnackbarProvider";
+import { RoomEventsManager } from "../../utils/RoomEventsManager";
+import { RoomMessagesList } from "./RoomMessagesList";
+import { SendMessageForm } from "./SendMessageForm";
+import { TypingNotice } from "./TypingNotice";
+
+export function RoomWidget(p: {
+ room: Room;
+ users: UsersMap;
+ manager: RoomEventsManager;
+}): React.ReactElement {
+ const snackbar = useSnackbar();
+
+ const receiptId = React.useRef
+ setUnread(!unread)} style={{ cursor: "pointer" }}>
+
+
+ {/** Rooms list */}
+ -
+ {shownRooms.map((r) => (
+
+
+ );
+}
diff --git a/matrixgw_frontend/src/widgets/messages/SendMessageForm.tsx b/matrixgw_frontend/src/widgets/messages/SendMessageForm.tsx
new file mode 100644
index 0000000..41b6ae0
--- /dev/null
+++ b/matrixgw_frontend/src/widgets/messages/SendMessageForm.tsx
@@ -0,0 +1,63 @@
+import SendIcon from "@mui/icons-material/Send";
+import { IconButton, TextField } from "@mui/material";
+import React, { type FormEvent } from "react";
+import { MatrixApiEvent } from "../../api/matrix/MatrixApiEvent";
+import type { Room } from "../../api/matrix/MatrixApiRoom";
+import { useAlert } from "../../hooks/contexts_provider/AlertDialogProvider";
+import { useLoadingMessage } from "../../hooks/contexts_provider/LoadingMessageProvider";
+
+export function SendMessageForm(p: { room: Room }): React.ReactElement {
+ const loadingMessage = useLoadingMessage();
+ const alert = useAlert();
+
+ const [text, setText] = React.useState("");
+
+ const handleTextSubmit = async (e: FormEvent) => {
+ e.preventDefault();
+
+ if (text === "") return;
+
+ loadingMessage.show("Sending message...");
+
+ try {
+ await MatrixApiEvent.SendTextMessage(p.room, text);
+
+ setText("");
+ } catch (e) {
+ console.error(`Failed to send message! ${e}`);
+ alert(`Failed to send message! ${e}`);
+ } finally {
+ loadingMessage.hide();
+ }
+ };
+
+ return (
+
+ );
+}
diff --git a/matrixgw_frontend/src/widgets/messages/SpaceSelector.tsx b/matrixgw_frontend/src/widgets/messages/SpaceSelector.tsx
new file mode 100644
index 0000000..1557b16
--- /dev/null
+++ b/matrixgw_frontend/src/widgets/messages/SpaceSelector.tsx
@@ -0,0 +1,56 @@
+import HomeIcon from "@mui/icons-material/Home";
+import { Button } from "@mui/material";
+import React from "react";
+import type { UsersMap } from "../../api/matrix/MatrixApiProfile";
+import type { Room } from "../../api/matrix/MatrixApiRoom";
+import { RoomIcon } from "./RoomIcon";
+
+export function SpaceSelector(p: {
+ rooms: Room[];
+ users: UsersMap;
+ selectedSpace?: string;
+ onChange: (space?: string) => void;
+}): React.ReactElement {
+ const spaces = React.useMemo(
+ () => p.rooms.filter((r) => r.is_space),
+ [p.rooms]
+ );
+
+ // Do not display space bar if your is not member of any space
+ if (spaces.length === 0) return <>;
+
+ return (
+
+
+ );
+}
+
+function SpaceButton(p: {
+ selected?: boolean;
+ icon: React.ReactElement;
+ onClick: () => void;
+}): React.ReactElement {
+ return (
+
+ );
+}
diff --git a/matrixgw_frontend/src/widgets/messages/TypingNotice.tsx b/matrixgw_frontend/src/widgets/messages/TypingNotice.tsx
new file mode 100644
index 0000000..578718d
--- /dev/null
+++ b/matrixgw_frontend/src/widgets/messages/TypingNotice.tsx
@@ -0,0 +1,35 @@
+import { Typography } from "@mui/material";
+import React from "react";
+import type { UsersMap } from "../../api/matrix/MatrixApiProfile";
+import type { RoomEventsManager } from "../../utils/RoomEventsManager";
+import { useUserInfo } from "../dashboard/BaseAuthenticatedPage";
+
+export function TypingNotice(p: {
+ users: UsersMap;
+ manager: RoomEventsManager;
+}): React.ReactElement {
+ const user = useUserInfo();
+
+ const users = React.useMemo(
+ () =>
+ [...p.users.values()].filter(
+ (u) =>
+ p.manager.typingUsers.includes(u.user_id) &&
+ u.user_id !== user.info.matrix_user_id
+ ),
+ [p.manager.typingUsers, p.users, user.info.matrix_user_id]
+ );
+
+ if (users.length === 0) return <>;
+
+ return (
+