Compare commits
| Author | SHA1 | Date | |
|---|---|---|---|
| ccc3f78de0 | |||
|
e0c2331af3 |
8 changed files with 82 additions and 121 deletions
|
|
@ -1,15 +1,8 @@
|
|||
import { lazy, Suspense } from "react";
|
||||
|
||||
import { useCall } from "@tensamin/call/state";
|
||||
|
||||
const Popout = lazy(() => import("@tensamin/call/popout"));
|
||||
import Popout from "@tensamin/call/popout";
|
||||
|
||||
export default function CallPopout() {
|
||||
const active = useCall((state) => state.state !== "closed");
|
||||
|
||||
return active ? (
|
||||
<Suspense fallback={null}>
|
||||
<Popout />
|
||||
</Suspense>
|
||||
) : null;
|
||||
return active ? <Popout /> : null;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,15 +1,8 @@
|
|||
import { lazy, Suspense } from "react";
|
||||
|
||||
import { useCall } from "@tensamin/call/state";
|
||||
|
||||
const SidebarBox = lazy(() => import("@tensamin/call/sidebarBox"));
|
||||
import SidebarBox from "@tensamin/call/sidebarBox";
|
||||
|
||||
export default function CallSidebarBox() {
|
||||
const active = useCall((state) => state.state !== "closed");
|
||||
|
||||
return active ? (
|
||||
<Suspense fallback={null}>
|
||||
<SidebarBox />
|
||||
</Suspense>
|
||||
) : null;
|
||||
return active ? <SidebarBox /> : null;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -28,6 +28,7 @@ import { useState } from "react";
|
|||
import { SidebarTrigger, useSidebar } from "@methanium/ui";
|
||||
import { WindowControls as Controls } from "@methanium/ui";
|
||||
import { useSession } from "@tensamin/identity/session";
|
||||
import { joinCall } from "@tensamin/call/store";
|
||||
import Profile from "./modals/profile";
|
||||
|
||||
export default function Navbar({ forMobile }: { forMobile: boolean }) {
|
||||
|
|
@ -139,11 +140,7 @@ export default function Navbar({ forMobile }: { forMobile: boolean }) {
|
|||
{currentCalls.length === 0 ? (
|
||||
<Button
|
||||
disabled={callState !== "closed"}
|
||||
onClick={() => {
|
||||
void import("@tensamin/call/store").then(({ joinCall }) =>
|
||||
joinCall(id),
|
||||
);
|
||||
}}
|
||||
onClick={() => void joinCall(id)}
|
||||
className="w-9 h-9! aspect-square rounded-lg"
|
||||
variant="outline"
|
||||
>
|
||||
|
|
@ -153,12 +150,10 @@ export default function Navbar({ forMobile }: { forMobile: boolean }) {
|
|||
<Button
|
||||
disabled={callState !== "closed"}
|
||||
onClick={() => {
|
||||
void import("@tensamin/call/store").then(({ joinCall }) =>
|
||||
joinCall(
|
||||
id,
|
||||
currentCalls[0].CallSecret,
|
||||
currentCalls[0].CallId,
|
||||
),
|
||||
void joinCall(
|
||||
id,
|
||||
currentCalls[0].CallSecret,
|
||||
currentCalls[0].CallId,
|
||||
);
|
||||
}}
|
||||
className="w-9 h-9! aspect-square rounded-lg"
|
||||
|
|
@ -185,12 +180,9 @@ export default function Navbar({ forMobile }: { forMobile: boolean }) {
|
|||
<SelectItem
|
||||
value={call.CallId}
|
||||
key={call.CallId}
|
||||
onSelect={() => {
|
||||
void import("@tensamin/call/store").then(
|
||||
({ joinCall }) =>
|
||||
joinCall(id, call.CallSecret, call.CallId),
|
||||
);
|
||||
}}
|
||||
onSelect={() =>
|
||||
void joinCall(id, call.CallSecret, call.CallId)
|
||||
}
|
||||
>
|
||||
{displayCallId(call.CallId)}
|
||||
</SelectItem>
|
||||
|
|
|
|||
|
|
@ -13,8 +13,13 @@ import "@methanium/ui/index.css";
|
|||
|
||||
import NotFound from "@/routes/404";
|
||||
import RouteLoader from "@/components/routeLoader";
|
||||
import Home from "@/routes/app/home";
|
||||
import AppShell from "@/routes/app/shell";
|
||||
import Login from "@/routes/screens/login";
|
||||
|
||||
import { createSettingsRoute } from "@tensamin/settings";
|
||||
import ChatScreen from "@tensamin/chat/screen";
|
||||
import CallScreen from "@tensamin/call/screen";
|
||||
|
||||
import DeeplinkContext from "@tensamin/tauri/deeplinkHandler";
|
||||
import PwaRuntime from "@tensamin/pwa/runtime";
|
||||
|
|
@ -22,14 +27,7 @@ import PwaRuntime from "@tensamin/pwa/runtime";
|
|||
import { ErrorScreen, ThemeProvider, useTheme } from "@methanium/ui";
|
||||
import z from "zod";
|
||||
|
||||
import {
|
||||
lazy,
|
||||
Suspense,
|
||||
useEffect,
|
||||
useRef,
|
||||
useState,
|
||||
type ReactNode,
|
||||
} from "react";
|
||||
import { useEffect, useRef, useState, type ReactNode } from "react";
|
||||
|
||||
import Storage from "@tensamin/storage/context";
|
||||
import { log } from "@tensamin/shared/log";
|
||||
|
|
@ -39,13 +37,6 @@ import { useLocation, useNavigate } from "@tanstack/react-router";
|
|||
import { useIsMobile, Toaster, TooltipProvider } from "@methanium/ui";
|
||||
import { HotkeysProvider } from "@tensamin/hotkeys";
|
||||
|
||||
const Home = lazy(() => import("@/routes/app/home"));
|
||||
const ChatScreen = lazy(() => import("@tensamin/chat/screen"));
|
||||
const CallScreen = lazy(() => import("@tensamin/call/screen"));
|
||||
const Login = lazy(() => import("@/routes/screens/login"));
|
||||
const appShellImport = import("@/routes/app/shell");
|
||||
const AppShell = lazy(() => appShellImport);
|
||||
|
||||
const wrapper = document.getElementById("root");
|
||||
|
||||
if (!wrapper) {
|
||||
|
|
@ -260,9 +251,7 @@ function RootShell() {
|
|||
<HotkeysProvider>
|
||||
<ThemeStorageBridge />
|
||||
<LoginWrapper>
|
||||
<Suspense fallback={<RouteLoader />}>
|
||||
<Outlet />
|
||||
</Suspense>
|
||||
<Outlet />
|
||||
</LoginWrapper>
|
||||
</HotkeysProvider>
|
||||
</Storage>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
import { Suspense, useEffect, useRef } from "react";
|
||||
import { useEffect, useRef } from "react";
|
||||
import { Outlet, useNavigate } from "@tanstack/react-router";
|
||||
|
||||
import RouteLoader from "@/components/routeLoader";
|
||||
import AppLayout from "./layout";
|
||||
import CallInit from "@/components/callRuntimeInit";
|
||||
import CacheSync from "@tensamin/cache/sync";
|
||||
|
|
@ -61,9 +60,7 @@ export default function AppShell() {
|
|||
<AppLayout>
|
||||
<ChatContext>
|
||||
<NotificationsProvider>
|
||||
<Suspense fallback={<RouteLoader />}>
|
||||
<Outlet />
|
||||
</Suspense>
|
||||
<Outlet />
|
||||
</NotificationsProvider>
|
||||
</ChatContext>
|
||||
</AppLayout>
|
||||
|
|
|
|||
|
|
@ -10,14 +10,7 @@ import {
|
|||
PopoverTrigger,
|
||||
} from "@methanium/ui";
|
||||
import { useStorage } from "@tensamin/storage/context";
|
||||
import React, {
|
||||
lazy,
|
||||
Suspense,
|
||||
useCallback,
|
||||
useEffect,
|
||||
useState,
|
||||
useRef,
|
||||
} from "react";
|
||||
import React, { useCallback, useEffect, useState, useRef } from "react";
|
||||
import { Button } from "@methanium/ui";
|
||||
|
||||
import { Plus, Laugh, FileVideo, SendHorizonal } from "lucide-react";
|
||||
|
|
@ -33,9 +26,8 @@ import ReplyBox from "./replyBox";
|
|||
import { useHotkey } from "@tensamin/hotkeys";
|
||||
import { editLastMessageHotkey } from "../hotkeys";
|
||||
import { useUser } from "@tensamin/identity/context";
|
||||
|
||||
const EmojiPicker = lazy(() => import("./emoji/emojiPicker"));
|
||||
const GifPicker = lazy(() => import("./media/gifPicker"));
|
||||
import EmojiPicker from "./emoji/emojiPicker";
|
||||
import GifPicker from "./media/gifPicker";
|
||||
|
||||
export default function InputComponent({
|
||||
value,
|
||||
|
|
@ -359,15 +351,13 @@ export default function InputComponent({
|
|||
)}
|
||||
/>
|
||||
<PopoverContent className="w-auto p-0">
|
||||
<Suspense fallback={null}>
|
||||
<EmojiPicker
|
||||
onSelect={(shortcode) => {
|
||||
setValue(`${value}${shortcode} `);
|
||||
recordUse(shortcode);
|
||||
setEmojiPopoverOpen(false);
|
||||
}}
|
||||
/>
|
||||
</Suspense>
|
||||
<EmojiPicker
|
||||
onSelect={(shortcode) => {
|
||||
setValue(`${value}${shortcode} `);
|
||||
recordUse(shortcode);
|
||||
setEmojiPopoverOpen(false);
|
||||
}}
|
||||
/>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
{isMobile ? (
|
||||
|
|
@ -381,14 +371,12 @@ export default function InputComponent({
|
|||
</DrawerTrigger>
|
||||
<DrawerContent className="h-[80dvh]">
|
||||
<div className="min-h-0 flex-1 p-3">
|
||||
<Suspense fallback={null}>
|
||||
<GifPicker
|
||||
onSelect={(url) => {
|
||||
void handleSubmit(url, true);
|
||||
setGifPopoverOpen(false);
|
||||
}}
|
||||
/>
|
||||
</Suspense>
|
||||
<GifPicker
|
||||
onSelect={(url) => {
|
||||
void handleSubmit(url, true);
|
||||
setGifPopoverOpen(false);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</DrawerContent>
|
||||
</Drawer>
|
||||
|
|
@ -420,16 +408,14 @@ export default function InputComponent({
|
|||
className="absolute left-0 top-0 z-10 h-4 w-4 cursor-nwse-resize"
|
||||
onPointerDown={handleGifPopoverResizeStart}
|
||||
/>
|
||||
<Suspense fallback={null}>
|
||||
<GifPicker
|
||||
resizeHeight={gifPopoverSize?.height}
|
||||
resizeWidth={gifPopoverSize?.width}
|
||||
onSelect={(url) => {
|
||||
void handleSubmit(url, true);
|
||||
setGifPopoverOpen(false);
|
||||
}}
|
||||
/>
|
||||
</Suspense>
|
||||
<GifPicker
|
||||
resizeHeight={gifPopoverSize?.height}
|
||||
resizeWidth={gifPopoverSize?.width}
|
||||
onSelect={(url) => {
|
||||
void handleSubmit(url, true);
|
||||
setGifPopoverOpen(false);
|
||||
}}
|
||||
/>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,11 @@
|
|||
import type { RawMessage } from "../values";
|
||||
import { AlertTriangle, Check, CheckLine, RefreshCw } from "lucide-react";
|
||||
import { memo, useCallback, useEffect, useRef, useState } from "react";
|
||||
import { type SelectedUser, useUserFields } from "@tensamin/identity/context";
|
||||
import {
|
||||
type SelectedUser,
|
||||
useUser,
|
||||
useUserFields,
|
||||
} from "@tensamin/identity/context";
|
||||
|
||||
import {
|
||||
Avatar,
|
||||
|
|
@ -69,6 +73,7 @@ function MessageComponent({
|
|||
// Message states
|
||||
const { load } = useStorage();
|
||||
const { send, sendSealedRelay } = useMTP();
|
||||
const { getIota } = useUser();
|
||||
const [ownId, setOwnId] = useState(0);
|
||||
useEffect(() => {
|
||||
load("user_id").then(setOwnId);
|
||||
|
|
@ -76,38 +81,34 @@ function MessageComponent({
|
|||
const messageStateReadUpdate = useCallback(async () => {
|
||||
const readConfirmations = await load("settings.read_confirmations");
|
||||
|
||||
if (!user?.UserId || !message.RelayMessageId || ownId === 0) return;
|
||||
if (!user?.UserId || ownId === 0) return;
|
||||
const [ownIota, peerIota] = await Promise.all([
|
||||
send("GetIotaData", { UserId: ownId }),
|
||||
send("GetIotaData", { UserId: user.UserId }),
|
||||
getIota(ownId),
|
||||
getIota(user.UserId),
|
||||
]);
|
||||
if (ownIota.type !== "GetIotaData" || peerIota.type !== "GetIotaData") {
|
||||
throw new Error("Could not resolve an Iota for this receipt");
|
||||
}
|
||||
const response = await sendSealedRelay(
|
||||
"MessageState",
|
||||
{
|
||||
ChatPartnerId: user.UserId,
|
||||
RelayMessageId: message.RelayMessageId,
|
||||
EventAt: Date.now(),
|
||||
MessageState: readConfirmations ? "read" : "received",
|
||||
ReceiverId: user.UserId,
|
||||
},
|
||||
{
|
||||
nextHop: { kind: "iota", id: ownIota.data.IotaId },
|
||||
nextHop: { kind: "iota", id: ownIota.IotaId },
|
||||
finalRecipientId: user.UserId,
|
||||
metadataRecipients: [
|
||||
{ value: ownIota.data.PublicKey, encoding: "base64" },
|
||||
{ value: peerIota.data.PublicKey, encoding: "base64" },
|
||||
{ value: ownIota.PublicKey, encoding: "base64" },
|
||||
{ value: peerIota.PublicKey, encoding: "base64" },
|
||||
],
|
||||
contentRecipients: [
|
||||
{ value: ownIota.data.PublicKey, encoding: "base64" },
|
||||
{ value: peerIota.data.PublicKey, encoding: "base64" },
|
||||
{ value: ownIota.PublicKey, encoding: "base64" },
|
||||
{ value: peerIota.PublicKey, encoding: "base64" },
|
||||
],
|
||||
},
|
||||
);
|
||||
requireRelaySuccess(response);
|
||||
}, [load, message.RelayMessageId, ownId, send, sendSealedRelay, user]);
|
||||
}, [getIota, load, ownId, sendSealedRelay, user]);
|
||||
useEffect(() => {
|
||||
if (message.SenderId === ownId || ownId === 0) return;
|
||||
|
||||
|
|
|
|||
|
|
@ -1,20 +1,30 @@
|
|||
import { lazy } from "react";
|
||||
import { settingsNavigation } from "./navigation";
|
||||
|
||||
import SettingsIndex from "./pages/index";
|
||||
import Profile from "./pages/profile";
|
||||
import Security from "./pages/security";
|
||||
import Chat from "./pages/chat";
|
||||
import Call from "./pages/call";
|
||||
import Cache from "./pages/cache";
|
||||
import Theme from "./pages/theme";
|
||||
import Accessibility from "./pages/accessibility";
|
||||
import Hotkeys from "./pages/hotkeys";
|
||||
import Licenses from "./pages/licenses";
|
||||
|
||||
const pageComponents = {
|
||||
profile: lazy(() => import("./pages/profile")),
|
||||
security: lazy(() => import("./pages/security")),
|
||||
chat: lazy(() => import("./pages/chat")),
|
||||
call: lazy(() => import("./pages/call")),
|
||||
cache: lazy(() => import("./pages/cache")),
|
||||
theme: lazy(() => import("./pages/theme")),
|
||||
accessibility: lazy(() => import("./pages/accessibility")),
|
||||
hotkeys: lazy(() => import("./pages/hotkeys")),
|
||||
licenses: lazy(() => import("./pages/licenses")),
|
||||
profile: Profile,
|
||||
security: Security,
|
||||
chat: Chat,
|
||||
call: Call,
|
||||
cache: Cache,
|
||||
theme: Theme,
|
||||
accessibility: Accessibility,
|
||||
hotkeys: Hotkeys,
|
||||
licenses: Licenses,
|
||||
} as const;
|
||||
|
||||
export const settingsPages = [
|
||||
{ path: "/", component: lazy(() => import("./pages/index")) },
|
||||
{ path: "/", component: SettingsIndex },
|
||||
...settingsNavigation.map((page) => ({
|
||||
...page,
|
||||
component: pageComponents[page.path],
|
||||
|
|
|
|||
Loading…
Reference in a new issue