This commit is contained in:
parent
fadfdb576a
commit
f3dfeab0f8
@ -157,7 +157,7 @@ export function NoteCreator() {
|
|||||||
if (CONFIG.noteCreatorToast) {
|
if (CONFIG.noteCreatorToast) {
|
||||||
r.forEach(rr => {
|
r.forEach(rr => {
|
||||||
Toastore.push({
|
Toastore.push({
|
||||||
element: <OkResponseRow rsp={rr} />,
|
element: c => <OkResponseRow rsp={rr} close={c} />,
|
||||||
expire: unixNow() + (rr.ok ? 5 : 55555),
|
expire: unixNow() + (rr.ok ? 5 : 55555),
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
@ -1,4 +1,5 @@
|
|||||||
import AsyncButton from "@/Element/Button/AsyncButton";
|
import AsyncButton from "@/Element/Button/AsyncButton";
|
||||||
|
import IconButton from "@/Element/Button/IconButton";
|
||||||
import useEventPublisher from "@/Hooks/useEventPublisher";
|
import useEventPublisher from "@/Hooks/useEventPublisher";
|
||||||
import useLogin from "@/Hooks/useLogin";
|
import useLogin from "@/Hooks/useLogin";
|
||||||
import Icon from "@/Icons/Icon";
|
import Icon from "@/Icons/Icon";
|
||||||
@ -10,7 +11,7 @@ import { OkResponse } from "@snort/system";
|
|||||||
import { useState } from "react";
|
import { useState } from "react";
|
||||||
import { useIntl } from "react-intl";
|
import { useIntl } from "react-intl";
|
||||||
|
|
||||||
export function OkResponseRow({ rsp }: { rsp: OkResponse }) {
|
export function OkResponseRow({ rsp, close }: { rsp: OkResponse, close: () => void }) {
|
||||||
const [r, setResult] = useState(rsp);
|
const [r, setResult] = useState(rsp);
|
||||||
const { formatMessage } = useIntl();
|
const { formatMessage } = useIntl();
|
||||||
const { publisher, system } = useEventPublisher();
|
const { publisher, system } = useEventPublisher();
|
||||||
@ -21,6 +22,7 @@ export function OkResponseRow({ rsp }: { rsp: OkResponse }) {
|
|||||||
removeRelay(login, unwrap(sanitizeRelayUrl(r.relay)));
|
removeRelay(login, unwrap(sanitizeRelayUrl(r.relay)));
|
||||||
await saveRelays(system, publisher, login.relays.item);
|
await saveRelays(system, publisher, login.relays.item);
|
||||||
}
|
}
|
||||||
|
close();
|
||||||
}
|
}
|
||||||
|
|
||||||
async function retryPublish(r: OkResponse) {
|
async function retryPublish(r: OkResponse) {
|
||||||
@ -57,6 +59,7 @@ export function OkResponseRow({ rsp }: { rsp: OkResponse }) {
|
|||||||
</AsyncButton>
|
</AsyncButton>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
<IconButton icon={{name: "x"}} onClick={close} />
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
@ -6,6 +6,7 @@ import { mapPlanName } from "../subscribe";
|
|||||||
import Icon from "@/Icons/Icon";
|
import Icon from "@/Icons/Icon";
|
||||||
import { unixNowMs } from "@snort/shared";
|
import { unixNowMs } from "@snort/shared";
|
||||||
import { Birthday, Day } from "@/Const";
|
import { Birthday, Day } from "@/Const";
|
||||||
|
|
||||||
export function LogoHeader({ showText = false }) {
|
export function LogoHeader({ showText = false }) {
|
||||||
const { subscriptions } = useLogin();
|
const { subscriptions } = useLogin();
|
||||||
const currentSubscription = getCurrentSubscription(subscriptions);
|
const currentSubscription = getCurrentSubscription(subscriptions);
|
||||||
@ -26,7 +27,7 @@ export function LogoHeader({ showText = false }) {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<Link to="/" className="logo" onClick={handleLogoClick}>
|
<Link to="/" className="logo" onClick={handleLogoClick}>
|
||||||
<h1 className="flex flex-row items-center">
|
<h1 className="flex flex-row items-center md:justify-center">
|
||||||
{CONFIG.navLogo && <img src={CONFIG.navLogo} className="w-8" />}
|
{CONFIG.navLogo && <img src={CONFIG.navLogo} className="w-8" />}
|
||||||
{!CONFIG.navLogo && (
|
{!CONFIG.navLogo && (
|
||||||
<span className="text-2xl p-5 hidden md:flex xl:hidden w-8 h-8 rounded-xl bg-dark text-xl font-bold flex items-center justify-center">
|
<span className="text-2xl p-5 hidden md:flex xl:hidden w-8 h-8 rounded-xl bg-dark text-xl font-bold flex items-center justify-center">
|
||||||
@ -41,7 +42,7 @@ export function LogoHeader({ showText = false }) {
|
|||||||
)}
|
)}
|
||||||
</h1>
|
</h1>
|
||||||
{currentSubscription && (
|
{currentSubscription && (
|
||||||
<div className="flex items-center g4 text-sm font-semibold tracking-wider ml-2">
|
<div className="flex items-center g4 text-sm font-semibold tracking-wider xl:ml-2">
|
||||||
<Icon name="diamond" size={16} className="text-pro" />
|
<Icon name="diamond" size={16} className="text-pro" />
|
||||||
{mapPlanName(currentSubscription.type)}
|
{mapPlanName(currentSubscription.type)}
|
||||||
</div>
|
</div>
|
||||||
|
@ -33,7 +33,7 @@ export default function RootPage() {
|
|||||||
const code = getCurrentRefCode();
|
const code = getCurrentRefCode();
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<div className="main-content p">
|
<div className="main-content sm:px-4 sm:py-3">
|
||||||
<RootTabs base="" />
|
<RootTabs base="" />
|
||||||
</div>
|
</div>
|
||||||
<div className="main-content">
|
<div className="main-content">
|
||||||
|
@ -1,13 +1,12 @@
|
|||||||
|
import "./Toaster.css";
|
||||||
import { ReactNode, useSyncExternalStore } from "react";
|
import { ReactNode, useSyncExternalStore } from "react";
|
||||||
import { createPortal } from "react-dom";
|
import { createPortal } from "react-dom";
|
||||||
import { v4 as uuid } from "uuid";
|
import { v4 as uuid } from "uuid";
|
||||||
import { ExternalStore, unixNow } from "@snort/shared";
|
import { ExternalStore, unixNow } from "@snort/shared";
|
||||||
|
|
||||||
import Icon from "@/Icons/Icon";
|
import Icon from "@/Icons/Icon";
|
||||||
import "./Toaster.css";
|
|
||||||
|
|
||||||
interface ToastNotification {
|
interface ToastNotification {
|
||||||
element: ReactNode;
|
element: ReactNode | ((remove: () => void) => ReactNode);
|
||||||
expire?: number;
|
expire?: number;
|
||||||
icon?: string;
|
icon?: string;
|
||||||
id?: string;
|
id?: string;
|
||||||
@ -28,6 +27,11 @@ class ToasterSlots extends ExternalStore<Array<ToastNotification>> {
|
|||||||
return [...this.#stack];
|
return [...this.#stack];
|
||||||
}
|
}
|
||||||
|
|
||||||
|
remove(id?: string) {
|
||||||
|
this.#stack = this.#stack.filter(a => a.id !== id);
|
||||||
|
this.notifyChange();
|
||||||
|
}
|
||||||
|
|
||||||
#eatToast() {
|
#eatToast() {
|
||||||
const now = unixNow();
|
const now = unixNow();
|
||||||
this.#stack = this.#stack.filter(a => (a.expire ?? 0) > now);
|
this.#stack = this.#stack.filter(a => (a.expire ?? 0) > now);
|
||||||
@ -48,7 +52,7 @@ export default function Toaster() {
|
|||||||
{toast.map(a => (
|
{toast.map(a => (
|
||||||
<div className="p br b flex bg-dark g8 fade-in" key={a.id}>
|
<div className="p br b flex bg-dark g8 fade-in" key={a.id}>
|
||||||
{a.icon && <Icon name={a.icon} />}
|
{a.icon && <Icon name={a.icon} />}
|
||||||
{a.element}
|
{typeof a.element === "function" ? a.element(() => Toastore.remove(a.id)) : a.element}
|
||||||
</div>
|
</div>
|
||||||
))}
|
))}
|
||||||
</div>,
|
</div>,
|
||||||
|
Loading…
Reference in New Issue
Block a user