From d2b3d37724a999d4cc78c46157593267e29d184e Mon Sep 17 00:00:00 2001 From: tobi <31960611+tsmethurst@users.noreply.github.com> Date: Tue, 18 Jun 2024 18:18:00 +0200 Subject: [feature/frontend] Reports frontend v2 (#3022) * use apiutil + paging in admin processor+handlers * we're making it happen * fix little whoopsie * styling for report list * don't youuuu forget about meee don't don't don't don't * last bits * sanitize content before showing in report statuses * update report docs --- web/source/settings/components/fake-profile.tsx | 52 ----- web/source/settings/components/fake-toot.tsx | 56 ------ web/source/settings/components/profile.tsx | 52 +++++ web/source/settings/components/status.tsx | 242 ++++++++++++++++++++++++ web/source/settings/components/username.tsx | 2 +- 5 files changed, 295 insertions(+), 109 deletions(-) delete mode 100644 web/source/settings/components/fake-profile.tsx delete mode 100644 web/source/settings/components/fake-toot.tsx create mode 100644 web/source/settings/components/profile.tsx create mode 100644 web/source/settings/components/status.tsx (limited to 'web/source/settings/components') diff --git a/web/source/settings/components/fake-profile.tsx b/web/source/settings/components/fake-profile.tsx deleted file mode 100644 index 4a5157378..000000000 --- a/web/source/settings/components/fake-profile.tsx +++ /dev/null @@ -1,52 +0,0 @@ -/* - GoToSocial - Copyright (C) GoToSocial Authors admin@gotosocial.org - SPDX-License-Identifier: AGPL-3.0-or-later - - This program is free software: you can redistribute it and/or modify - it under the terms of the GNU Affero General Public License as published by - the Free Software Foundation, either version 3 of the License, or - (at your option) any later version. - - This program is distributed in the hope that it will be useful, - but WITHOUT ANY WARRANTY; without even the implied warranty of - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the - GNU Affero General Public License for more details. - - You should have received a copy of the GNU Affero General Public License - along with this program. If not, see . -*/ - -import React from "react"; - -export default function FakeProfile({ avatar, header, display_name, username, role }) { - return ( // Keep in sync with web/template/profile.tmpl -
-
-
- {header -
- -
-
- ); -} diff --git a/web/source/settings/components/fake-toot.tsx b/web/source/settings/components/fake-toot.tsx deleted file mode 100644 index ad0c387a4..000000000 --- a/web/source/settings/components/fake-toot.tsx +++ /dev/null @@ -1,56 +0,0 @@ -/* - GoToSocial - Copyright (C) GoToSocial Authors admin@gotosocial.org - SPDX-License-Identifier: AGPL-3.0-or-later - - This program is free software: you can redistribute it and/or modify - it under the terms of the GNU Affero General Public License as published by - the Free Software Foundation, either version 3 of the License, or - (at your option) any later version. - - This program is distributed in the hope that it will be useful, - but WITHOUT ANY WARRANTY; without even the implied warranty of - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the - GNU Affero General Public License for more details. - - You should have received a copy of the GNU Affero General Public License - along with this program. If not, see . -*/ - -import React from "react"; -import { useVerifyCredentialsQuery } from "../lib/query/oauth"; - -export default function FakeToot({ children }) { - const { data: account = { - avatar: "/assets/default_avatars/GoToSocial_icon1.png", - display_name: "", - username: "" - } } = useVerifyCredentialsQuery(); - - return ( - - ); -} diff --git a/web/source/settings/components/profile.tsx b/web/source/settings/components/profile.tsx new file mode 100644 index 000000000..4a5157378 --- /dev/null +++ b/web/source/settings/components/profile.tsx @@ -0,0 +1,52 @@ +/* + GoToSocial + Copyright (C) GoToSocial Authors admin@gotosocial.org + SPDX-License-Identifier: AGPL-3.0-or-later + + This program is free software: you can redistribute it and/or modify + it under the terms of the GNU Affero General Public License as published by + the Free Software Foundation, either version 3 of the License, or + (at your option) any later version. + + This program is distributed in the hope that it will be useful, + but WITHOUT ANY WARRANTY; without even the implied warranty of + MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + GNU Affero General Public License for more details. + + You should have received a copy of the GNU Affero General Public License + along with this program. If not, see . +*/ + +import React from "react"; + +export default function FakeProfile({ avatar, header, display_name, username, role }) { + return ( // Keep in sync with web/template/profile.tmpl +
+
+
+ {header +
+ +
+
+ ); +} diff --git a/web/source/settings/components/status.tsx b/web/source/settings/components/status.tsx new file mode 100644 index 000000000..56b061d39 --- /dev/null +++ b/web/source/settings/components/status.tsx @@ -0,0 +1,242 @@ +/* + GoToSocial + Copyright (C) GoToSocial Authors admin@gotosocial.org + SPDX-License-Identifier: AGPL-3.0-or-later + + This program is free software: you can redistribute it and/or modify + it under the terms of the GNU Affero General Public License as published by + the Free Software Foundation, either version 3 of the License, or + (at your option) any later version. + + This program is distributed in the hope that it will be useful, + but WITHOUT ANY WARRANTY; without even the implied warranty of + MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + GNU Affero General Public License for more details. + + You should have received a copy of the GNU Affero General Public License + along with this program. If not, see . +*/ + +import React from "react"; +import { useVerifyCredentialsQuery } from "../lib/query/oauth"; +import { MediaAttachment, Status as StatusType } from "../lib/types/status"; +import sanitize from "sanitize-html"; + +export function FakeStatus({ children }) { + const { data: account = { + avatar: "/assets/default_avatars/GoToSocial_icon1.png", + display_name: "", + username: "" + } } = useVerifyCredentialsQuery(); + + return ( + + ); +} + +export function Status({ status }: { status: StatusType }) { + return ( + + ); +} + +function StatusHeader({ status }: { status: StatusType }) { + const author = status.account; + + return ( +
+
+ +
+
+ ); +} + +function StatusBody({ status }: { status: StatusType }) { + let content: string; + if (status.content.length === 0) { + content = "[no content set]"; + } else { + // HTML has already been through + // the instance sanitizer by now, + // but do it again just in case. + content = sanitize(status.content); + } + + return ( +
+
+ + + { status.spoiler_text + ? status.spoiler_text + " " + : "[no content warning set] " + } + + + Toggle content visibility + + +
+
+ +
+ ); +} + +function StatusMedia({ status }: { status: StatusType }) { + if (status.media_attachments.length === 0) { + return null; + } + + const count = status.media_attachments.length; + const aria_label = count === 1 ? "1 attachment" : `${count} attachments`; + const oddOrEven = count % 2 === 0 ? "even" : "odd"; + const single = count === 1 ? " single" : ""; + + return ( +
+ { status.media_attachments.map((media) => { + return ( + + ); + })} +
+ ); +} + +function StatusMediaEntry({ media }: { media: MediaAttachment }) { + return ( +
+
+ + + + + + + {media.description} + + + {media.description} + +
+
+ ); +} + +function StatusFooter({ status }: { status: StatusType }) { + return ( + + ); +} diff --git a/web/source/settings/components/username.tsx b/web/source/settings/components/username.tsx index f7be1cd4a..56ba67c4f 100644 --- a/web/source/settings/components/username.tsx +++ b/web/source/settings/components/username.tsx @@ -60,7 +60,7 @@ export default function Username({ account, linkTo, backLocation, classNames }: ); if (linkTo) { - className += " spanlink"; + className += " pseudolink"; return (