mirror of
https://github.com/stoatchat/for-legacy-web.git
synced 2026-03-06 17:11:55 +00:00
feat: add changelog entry in preparation for update
This commit is contained in:
Paul Makles
@@ -1,10 +1,17 @@
|
||||
import Lottie, { LottieRefCurrentProps } from "lottie-react";
|
||||
|
||||
import { JSX } from "preact";
|
||||
|
||||
import usernameAnim from "../controllers/modals/components/legacy/usernameUpdateLottie.json";
|
||||
|
||||
type Element =
|
||||
| string
|
||||
| {
|
||||
type: "image";
|
||||
src: string;
|
||||
shadow?: boolean;
|
||||
};
|
||||
}
|
||||
| { type: "element"; element: JSX.Element };
|
||||
|
||||
export interface ChangelogPost {
|
||||
date: Date;
|
||||
@@ -43,6 +50,33 @@ export const changelogEntries: Record<number, ChangelogPost> = {
|
||||
"If you want to learn more about how we're making Revolt safer for you, check out our new blog post :point_right: [https://revolt.chat/posts/improving-user-safety](https://revolt.chat/posts/improving-user-safety)",
|
||||
],
|
||||
},
|
||||
3: {
|
||||
date: new Date("2023-06-11T15:00:00.000Z"),
|
||||
title: "Usernames are Changing",
|
||||
content: [
|
||||
{
|
||||
type: "element",
|
||||
element: (
|
||||
<Lottie
|
||||
animationData={usernameAnim}
|
||||
style={{
|
||||
background: "var(--secondary-background)",
|
||||
borderRadius: "6px",
|
||||
}}
|
||||
/>
|
||||
),
|
||||
},
|
||||
"Revolt has undergone a significant change to its username system, transitioning from unique username handles to a new system of display names and usernames with four-digit number tags called discriminators. The four-digit number tags serve as identifiers to differentiate users with the same username, allowing individuals to select desired usernames that reflect their identity.",
|
||||
{
|
||||
type: "element",
|
||||
element: (
|
||||
<a href="https://revolt.chat/post/evolving-usernames">
|
||||
Read more on our blog!
|
||||
</a>
|
||||
),
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
|
||||
export const changelogEntryArray = Object.keys(changelogEntries).map(
|
||||
@@ -18,6 +18,7 @@ import { history } from "../../context/history";
|
||||
import AddFriend from "./components/AddFriend";
|
||||
import BanMember from "./components/BanMember";
|
||||
import Changelog from "./components/Changelog";
|
||||
import ChangelogUsernames from "./components/ChangelogUsernames";
|
||||
import ChannelInfo from "./components/ChannelInfo";
|
||||
import Clipboard from "./components/Clipboard";
|
||||
import ConfirmLeave from "./components/ConfirmLeave";
|
||||
@@ -282,4 +283,5 @@ export const modalController = new ModalControllerExtended({
|
||||
report: ReportContent,
|
||||
report_success: ReportSuccess,
|
||||
modify_displayname: ModifyDisplayname,
|
||||
changelog_usernames: ChangelogUsernames,
|
||||
});
|
||||
|
||||
@@ -33,6 +33,8 @@ function RenderLog({ post }: { post: ChangelogPost }) {
|
||||
{post.content.map((entry) =>
|
||||
typeof entry === "string" ? (
|
||||
<Markdown content={entry} />
|
||||
) : entry.type === "element" ? (
|
||||
entry.element
|
||||
) : (
|
||||
<Image src={entry.src} shadow={entry.shadow} />
|
||||
),
|
||||
|
||||
146
src/controllers/modals/components/ChangelogUsernames.tsx
Normal file
146
src/controllers/modals/components/ChangelogUsernames.tsx
Normal file
@@ -0,0 +1,146 @@
|
||||
import Lottie, { LottieRefCurrentProps } from "lottie-react";
|
||||
|
||||
import { useEffect, useRef } from "preact/hooks";
|
||||
|
||||
import { Button, Column, InputBox, Modal, Row } from "@revoltchat/ui";
|
||||
|
||||
import { useClient } from "../../client/ClientController";
|
||||
import { modalController } from "../ModalController";
|
||||
import { ModalProps } from "../types";
|
||||
import usernameAnim from "./legacy/usernameUpdateLottie.json";
|
||||
|
||||
/**
|
||||
* Changelog: Username update
|
||||
*/
|
||||
export default function ChangelogUsernames({
|
||||
onClose,
|
||||
signal,
|
||||
}: ModalProps<"changelog_usernames">) {
|
||||
const client = useClient();
|
||||
|
||||
const lottieRef = useRef<LottieRefCurrentProps>();
|
||||
|
||||
useEffect(() => {
|
||||
if (lottieRef.current) {
|
||||
const timer = setTimeout(() => lottieRef.current!.play(), 2500);
|
||||
return () => clearTimeout(timer);
|
||||
}
|
||||
}, [lottieRef]);
|
||||
|
||||
return (
|
||||
<Modal onClose={onClose} signal={signal} transparent>
|
||||
{
|
||||
(
|
||||
<Column gap="0">
|
||||
<div
|
||||
style={{
|
||||
background: "black",
|
||||
borderStartStartRadius: "12px",
|
||||
borderStartEndRadius: "12px",
|
||||
display: "grid",
|
||||
placeItems: "center",
|
||||
padding: "1.5em",
|
||||
}}>
|
||||
<Lottie
|
||||
lottieRef={lottieRef as never}
|
||||
animationData={usernameAnim}
|
||||
autoplay={false}
|
||||
loop={false}
|
||||
style={{ width: "240px" }}
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
padding: "1em",
|
||||
background: "var(--secondary-header)",
|
||||
textAlign: "center",
|
||||
}}>
|
||||
<Column
|
||||
gap="6px"
|
||||
style={{
|
||||
alignItems: "center",
|
||||
}}>
|
||||
<span
|
||||
style={{
|
||||
fontSize: "1.5em",
|
||||
fontWeight: 700,
|
||||
marginBottom: "12px",
|
||||
}}>
|
||||
Usernames are Changing
|
||||
</span>
|
||||
<span
|
||||
style={{
|
||||
color: "var(--secondary-foreground)",
|
||||
fontSize: "0.9em",
|
||||
fontWeight: 500,
|
||||
}}>
|
||||
We've changed how usernames work on Revolt.
|
||||
Now you can set a display name in addition
|
||||
to a username with a number tag for easier
|
||||
sharing.
|
||||
</span>
|
||||
<span
|
||||
style={{
|
||||
color: "var(--secondary-foreground)",
|
||||
fontSize: "0.9em",
|
||||
fontWeight: 500,
|
||||
}}>
|
||||
Here's how your new username looks:
|
||||
</span>
|
||||
<InputBox
|
||||
value={
|
||||
client.user!.display_name ??
|
||||
client.user!.username
|
||||
}
|
||||
style={{
|
||||
maxWidth: "180px",
|
||||
}}
|
||||
disabled
|
||||
/>
|
||||
<InputBox
|
||||
value={
|
||||
client.user.username +
|
||||
"#" +
|
||||
client.user.discriminator
|
||||
}
|
||||
style={{
|
||||
maxWidth: "180px",
|
||||
}}
|
||||
disabled
|
||||
/>
|
||||
<a
|
||||
href="https://revolt.chat/posts/evolving-usernames"
|
||||
target="_blank">
|
||||
Read more about this change
|
||||
</a>
|
||||
</Column>
|
||||
</div>
|
||||
<Row
|
||||
style={{
|
||||
padding: "1em",
|
||||
borderEndStartRadius: "12px",
|
||||
borderEndEndRadius: "12px",
|
||||
background: "var(--secondary-background)",
|
||||
textAlign: "center",
|
||||
justifyContent: "end",
|
||||
}}>
|
||||
<Button palette="plain" onClick={onClose}>
|
||||
Skip for now
|
||||
</Button>
|
||||
<Button
|
||||
palette="accent"
|
||||
onClick={() => {
|
||||
modalController.openLink(
|
||||
"/settings/profile",
|
||||
);
|
||||
onClose();
|
||||
}}>
|
||||
Edit Profile
|
||||
</Button>
|
||||
</Row>
|
||||
</Column>
|
||||
) as any
|
||||
}
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
@@ -170,9 +170,8 @@ export default function ModifyAccount({
|
||||
{field === "username" && (
|
||||
<div style={{ marginTop: "8px" }}>
|
||||
<Tip palette="warning">
|
||||
Changing your username may change your
|
||||
discriminator. You can freely change the case of
|
||||
your username.
|
||||
Changing your username may change your number tag.
|
||||
You can freely change the case of your username.
|
||||
</Tip>
|
||||
</div>
|
||||
)}
|
||||
|
||||
@@ -72,9 +72,8 @@ export function OnboardingModal({
|
||||
/>
|
||||
</div>
|
||||
<p>
|
||||
You will be automatically assigned a
|
||||
discriminator which you can find from
|
||||
settings.
|
||||
You will be automatically assigned a number
|
||||
tag which you can find from settings.
|
||||
</p>
|
||||
<Button palette="accent">
|
||||
{"Looks good!"}
|
||||
|
||||
File diff suppressed because one or more lines are too long
@@ -41,6 +41,7 @@ export type Modal = {
|
||||
type: "changelog";
|
||||
initial?: number;
|
||||
}
|
||||
| { type: "changelog_usernames" }
|
||||
| {
|
||||
type: "sign_out_sessions";
|
||||
client: Client;
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import { action, makeAutoObservable, runInAction } from "mobx";
|
||||
|
||||
import { latestChangelog } from "../../assets/changelogs";
|
||||
import { changelogEntries, latestChangelog } from "../../assets/changelogs";
|
||||
import { modalController } from "../../controllers/modals/ModalController";
|
||||
import Persistent from "../interfaces/Persistent";
|
||||
import Store from "../interfaces/Store";
|
||||
@@ -58,14 +58,29 @@ export default class Changelog implements Store, Persistent<Data>, Syncable {
|
||||
*/
|
||||
checkForUpdates() {
|
||||
if (this.viewed < latestChangelog) {
|
||||
modalController.push({
|
||||
type: "changelog",
|
||||
initial: latestChangelog,
|
||||
});
|
||||
const expires = new Date(+changelogEntries[latestChangelog].date);
|
||||
expires.setDate(expires.getDate() + 7);
|
||||
|
||||
if (+new Date() < +expires) {
|
||||
if (latestChangelog === 3) {
|
||||
modalController.push({
|
||||
type: "changelog_usernames",
|
||||
});
|
||||
} else {
|
||||
modalController.push({
|
||||
type: "changelog",
|
||||
initial: latestChangelog,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
runInAction(() => {
|
||||
this.viewed = latestChangelog;
|
||||
});
|
||||
} else {
|
||||
modalController.push({
|
||||
type: "changelog_usernames",
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user