Merge branch 'main' into fix-nsfw-blur-spill

2024-12-28 19:20:21 +00:00 · 2023-06-15 07:55:09 -04:00 · 2023-06-15 07:55:09 -04:00 · 1088ee293b
parent 535e9ae337 de4b1a0518
commit 1088ee293b
16 changed files with 208 additions and 101 deletions
--- a/.github/ISSUE_TEMPLATE/BUG_REPORT.yml
+++ b/.github/ISSUE_TEMPLATE/BUG_REPORT.yml
@ -9,6 +9,19 @@ body:
        Found a bug? Please fill out the sections below. 👍
        Thanks for taking the time to fill out this bug report!
        For backend issues, use [lemmy](https://github.com/LemmyNet/lemmy)
+  - type: checkboxes
+    attributes:
+      label: Requirements
+      description: Before you create a bug report please do the following.
+      options:
+        - label: Is this a bug report? For questions or discussions use https://lemmy.ml/c/lemmy_support
+          required: true
+        - label: Did you check to see if this issue already exists?
+          required: true
+        - label: Is this only a single bug? Do not put multiple bugs in one issue.
+          required: true
+        - label: Is this a server side (not related to the UI) issue? Use the [Lemmy back end](https://github.com/LemmyNet/lemmy) repo.
+          required: true
  - type: textarea
    id: summary
    attributes:
@ -22,7 +35,7 @@ body:
      label: Steps to Reproduce
      description: |
        Describe the steps to reproduce the bug.
-        The better your description is _(go 'here', click 'there'...)_ the fastest you'll get an _(accurate)_ resolution. 
+        The better your description is _(go 'here', click 'there'...)_ the fastest you'll get an _(accurate)_ resolution.
      value: |
        1.
        2.
@ -45,3 +58,9 @@ body:
      placeholder: ex. 0.17.4-rc.4
    validations:
      required: true
+  - type: input
+    id: lemmy-instance
+    attributes:
+      label: Lemmy Instance URL
+      description: Which Lemmy instance do you use? The address
+      placeholder: lemmy.ml, lemmy.world, etc
--- a/.github/ISSUE_TEMPLATE/FEATURE_REQUEST.yml
+++ b/.github/ISSUE_TEMPLATE/FEATURE_REQUEST.yml
@ -7,6 +7,19 @@ body:
      value: |
        Have a suggestion about Lemmy's UI?
        For backend issues, use [lemmy](https://github.com/LemmyNet/lemmy)
+  - type: checkboxes
+    attributes:
+      label: Requirements
+      description: Before you create a bug report please do the following.
+      options:
+        - label: Is this a feature request? For questions or discussions use https://lemmy.ml/c/lemmy_support
+          required: true
+        - label: Did you check to see if this issue already exists?
+          required: true
+        - label: Is this only a feature request? Do not put multiple feature requests in one issue.
+          required: true
+        - label: Is this a server side (not related to the UI) issue? Use the [Lemmy back end](https://github.com/LemmyNet/lemmy) repo.
+          required: true
  - type: textarea
    id: problem
    attributes:
--- a/.github/ISSUE_TEMPLATE/QUESTION.yml
+++ b/.github/ISSUE_TEMPLATE/QUESTION.yml
@ -14,4 +14,4 @@ body:
      label: Question
      description: What's the question you have about Lemmy's UI?
    validations:
-      required: true
+      required: true
--- a/.github/ISSUE_TEMPLATE/hexbear.yml
+++ b/.github/ISSUE_TEMPLATE/hexbear.yml
@ -8,4 +8,4 @@ body:
      label: Question
      description: What's the question you have about hexbear?
    validations:
-      required: true
+      required: true
--- a/package.json
+++ b/package.json
@ -1,6 +1,6 @@
 {
  "name": "lemmy-ui",
-  "version": "0.18.0-beta.6",
+  "version": "0.18.0-rc.1",
  "description": "An isomorphic UI for lemmy",
  "repository": "https://github.com/LemmyNet/lemmy-ui",
  "license": "AGPL-3.0",
--- a/src/assets/css/main.css
+++ b/src/assets/css/main.css
@ -75,6 +75,11 @@
  font-size: 1.2rem;
 }

+.md-div pre {
+  white-space: pre;
+  overflow-x: auto;
+}
+
 .md-div table {
  border-collapse: collapse;
  width: 100%;
@ -213,6 +218,11 @@ blockquote {
  overflow-y: auto;
 }

+.comments {
+  list-style: none;
+  padding: 0;
+}
+
 .thumbnail {
  object-fit: cover;
  min-height: 60px;
--- a/src/server/index.tsx
+++ b/src/server/index.tsx
@ -156,7 +156,7 @@ server.get("/*", async (req, res) => {
      site = try_site.data;
      initializeSite(site);

-      if (path != "/setup" && !site.site_view.local_site.site_setup) {
+      if (path !== "/setup" && !site.site_view.local_site.site_setup) {
        return res.redirect("/setup");
      }

--- a/src/shared/components/app/navbar.tsx
+++ b/src/shared/components/app/navbar.tsx
@ -16,8 +16,10 @@ import {
  isBrowser,
  myAuth,
  numToSI,
+  poll,
  showAvatars,
  toast,
+  updateUnreadCountsInterval,
 } from "../../utils";
 import { Icon } from "../common/icon";
 import { PictrsImage } from "../common/pictrs-image";
@ -64,7 +66,7 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
    if (isBrowser()) {
      // On the first load, check the unreads
      this.requestNotificationPermission();
-      await this.fetchUnreads();
+      this.fetchUnreads();
      this.requestNotificationPermission();

      document.addEventListener("mouseup", this.handleOutsideMenuClick);
@ -406,35 +408,36 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
    return amAdmin() || moderatesS;
  }

-  async fetchUnreads() {
-    const auth = myAuth();
-    if (auth) {
-      this.setState({ unreadInboxCountRes: { state: "loading" } });
-      this.setState({
-        unreadInboxCountRes: await HttpService.client.getUnreadCount({
-          auth,
-        }),
-      });
-
-      if (this.moderatesSomething) {
-        this.setState({ unreadReportCountRes: { state: "loading" } });
-        this.setState({
-          unreadReportCountRes: await HttpService.client.getReportCount({
-            auth,
-          }),
-        });
-      }
-
-      if (amAdmin()) {
-        this.setState({ unreadApplicationCountRes: { state: "loading" } });
-        this.setState({
-          unreadApplicationCountRes:
-            await HttpService.client.getUnreadRegistrationApplicationCount({
+  fetchUnreads() {
+    poll(async () => {
+      if (window.document.visibilityState !== "hidden") {
+        const auth = myAuth();
+        if (auth) {
+          this.setState({
+            unreadInboxCountRes: await HttpService.client.getUnreadCount({
              auth,
            }),
-        });
+          });
+
+          if (this.moderatesSomething) {
+            this.setState({
+              unreadReportCountRes: await HttpService.client.getReportCount({
+                auth,
+              }),
+            });
+          }
+
+          if (amAdmin()) {
+            this.setState({
+              unreadApplicationCountRes:
+                await HttpService.client.getUnreadRegistrationApplicationCount({
+                  auth,
+                }),
+            });
+          }
+        }
      }
-    }
+    }, updateUnreadCountsInterval);
  }

  get unreadInboxCount(): number {
--- a/src/shared/components/comment/comment-node.tsx
+++ b/src/shared/components/comment/comment-node.tsx
@ -270,9 +270,6 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
      this.props.moderators
    );

-    const borderColor = this.props.node.depth
-      ? colorList[(this.props.node.depth - 1) % colorList.length]
-      : colorList[0];
    const moreRepliesBorderColor = this.props.node.depth
      ? colorList[this.props.node.depth % colorList.length]
      : colorList[0];
@ -284,26 +281,17 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
      node.comment_view.counts.child_count > 0;

    return (
-      <div
-        className={`comment ${
-          this.props.node.depth && !this.props.noIndent ? "ml-1" : ""
-        }`}
-      >
+      <li className="comment" role="comment">
        <div
          id={`comment-${cv.comment.id}`}
          className={classNames(`details comment-node py-2`, {
            "border-top border-light": !this.props.noBorder,
            mark: this.isCommentNew || this.commentView.comment.distinguished,
          })}
-          style={
-            !this.props.noIndent && this.props.node.depth
-              ? `border-left: 2px ${borderColor} solid !important`
-              : ""
-          }
        >
          <div
            className={classNames({
-              "ml-2": !this.props.noIndent && this.props.node.depth,
+              "ml-2": !this.props.noIndent,
            })}
          >
            <div className="d-flex flex-wrap align-items-center text-muted small">
@ -959,9 +947,9 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
        </div>
        {showMoreChildren && (
          <div
-            className={`details ml-1 comment-node py-2 ${
-              !this.props.noBorder ? "border-top border-light" : ""
-            }`}
+            className={classNames("details ml-1 comment-node py-2", {
+              "border-top border-light": !this.props.noBorder,
+            })}
            style={`border-left: 2px ${moreRepliesBorderColor} solid !important`}
          >
            <button
@ -1169,6 +1157,8 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
            allLanguages={this.props.allLanguages}
            siteLanguages={this.props.siteLanguages}
            hideImages={this.props.hideImages}
+            isChild={!this.props.noIndent}
+            depth={this.props.node.depth + 1}
            finished={this.props.finished}
            onCommentReplyRead={this.props.onCommentReplyRead}
            onPersonMentionRead={this.props.onPersonMentionRead}
@ -1192,8 +1182,8 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
          />
        )}
        {/* A collapsed clearfix */}
-        {this.state.collapsed && <div className="row col-12"></div>}
-      </div>
+        {this.state.collapsed && <div className="row col-12" />}
+      </li>
    );
  }

@ -1211,6 +1201,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {

  linkBtn(small = false) {
    const cv = this.commentView;
+
    const classnames = classNames("btn btn-link btn-animate text-muted", {
      "btn-sm": small,
    });
--- a/src/shared/components/comment/comment-nodes.tsx
+++ b/src/shared/components/comment/comment-nodes.tsx
@ -1,3 +1,4 @@
+import classNames from "classnames";
 import { Component } from "inferno";
 import {
  AddAdmin,
@ -25,6 +26,7 @@ import {
  TransferCommunity,
 } from "lemmy-js-client";
 import { CommentNodeI, CommentViewType } from "../../interfaces";
+import { colorList } from "../../utils";
 import { CommentNode } from "./comment-node";

 interface CommentNodesProps {
@ -44,6 +46,8 @@ interface CommentNodesProps {
  allLanguages: Language[];
  siteLanguages: number[];
  hideImages?: boolean;
+  isChild?: boolean;
+  depth?: number;
  finished: Map<CommentId, boolean | undefined>;
  onSaveComment(form: SaveComment): void;
  onCommentReplyRead(form: MarkCommentReplyAsRead): void;
@ -74,49 +78,61 @@ export class CommentNodes extends Component<CommentNodesProps, any> {
  render() {
    const maxComments = this.props.maxCommentsShown ?? this.props.nodes.length;

+    const borderColor = this.props.depth
+      ? colorList[this.props.depth % colorList.length]
+      : colorList[0];
+
    return (
-      <div className="comments">
-        {this.props.nodes.slice(0, maxComments).map(node => (
-          <CommentNode
-            key={node.comment_view.comment.id}
-            node={node}
-            noBorder={this.props.noBorder}
-            noIndent={this.props.noIndent}
-            viewOnly={this.props.viewOnly}
-            locked={this.props.locked}
-            moderators={this.props.moderators}
-            admins={this.props.admins}
-            markable={this.props.markable}
-            showContext={this.props.showContext}
-            showCommunity={this.props.showCommunity}
-            enableDownvotes={this.props.enableDownvotes}
-            viewType={this.props.viewType}
-            allLanguages={this.props.allLanguages}
-            siteLanguages={this.props.siteLanguages}
-            hideImages={this.props.hideImages}
-            onCommentReplyRead={this.props.onCommentReplyRead}
-            onPersonMentionRead={this.props.onPersonMentionRead}
-            finished={this.props.finished}
-            onCreateComment={this.props.onCreateComment}
-            onEditComment={this.props.onEditComment}
-            onCommentVote={this.props.onCommentVote}
-            onBlockPerson={this.props.onBlockPerson}
-            onSaveComment={this.props.onSaveComment}
-            onDeleteComment={this.props.onDeleteComment}
-            onRemoveComment={this.props.onRemoveComment}
-            onDistinguishComment={this.props.onDistinguishComment}
-            onAddModToCommunity={this.props.onAddModToCommunity}
-            onAddAdmin={this.props.onAddAdmin}
-            onBanPersonFromCommunity={this.props.onBanPersonFromCommunity}
-            onBanPerson={this.props.onBanPerson}
-            onTransferCommunity={this.props.onTransferCommunity}
-            onFetchChildren={this.props.onFetchChildren}
-            onCommentReport={this.props.onCommentReport}
-            onPurgePerson={this.props.onPurgePerson}
-            onPurgeComment={this.props.onPurgeComment}
-          />
-        ))}
-      </div>
+      this.props.nodes.length > 0 && (
+        <ul
+          className={classNames("comments", {
+            "ms-1": !!this.props.isChild,
+            "border-top border-light": !this.props.noBorder,
+          })}
+          style={`border-left: 2px solid ${borderColor} !important;`}
+        >
+          {this.props.nodes.slice(0, maxComments).map(node => (
+            <CommentNode
+              key={node.comment_view.comment.id}
+              node={node}
+              noBorder={this.props.noBorder}
+              noIndent={this.props.noIndent}
+              viewOnly={this.props.viewOnly}
+              locked={this.props.locked}
+              moderators={this.props.moderators}
+              admins={this.props.admins}
+              markable={this.props.markable}
+              showContext={this.props.showContext}
+              showCommunity={this.props.showCommunity}
+              enableDownvotes={this.props.enableDownvotes}
+              viewType={this.props.viewType}
+              allLanguages={this.props.allLanguages}
+              siteLanguages={this.props.siteLanguages}
+              hideImages={this.props.hideImages}
+              onCommentReplyRead={this.props.onCommentReplyRead}
+              onPersonMentionRead={this.props.onPersonMentionRead}
+              finished={this.props.finished}
+              onCreateComment={this.props.onCreateComment}
+              onEditComment={this.props.onEditComment}
+              onCommentVote={this.props.onCommentVote}
+              onBlockPerson={this.props.onBlockPerson}
+              onSaveComment={this.props.onSaveComment}
+              onDeleteComment={this.props.onDeleteComment}
+              onRemoveComment={this.props.onRemoveComment}
+              onDistinguishComment={this.props.onDistinguishComment}
+              onAddModToCommunity={this.props.onAddModToCommunity}
+              onAddAdmin={this.props.onAddAdmin}
+              onBanPersonFromCommunity={this.props.onBanPersonFromCommunity}
+              onBanPerson={this.props.onBanPerson}
+              onTransferCommunity={this.props.onTransferCommunity}
+              onFetchChildren={this.props.onFetchChildren}
+              onCommentReport={this.props.onCommentReport}
+              onPurgePerson={this.props.onPurgePerson}
+              onPurgeComment={this.props.onPurgeComment}
+            />
+          ))}
+        </ul>
+      )
    );
  }
 }
--- a/src/shared/components/home/login.tsx
+++ b/src/shared/components/home/login.tsx
@ -195,7 +195,7 @@ export class Login extends Component<any, State> {
  }

  handleLoginUsernameChange(i: Login, event: any) {
-    i.state.form.username_or_email = event.target.value;
+    i.state.form.username_or_email = event.target.value.trim();
    i.setState(i.state);
  }

--- a/src/shared/components/home/setup.tsx
+++ b/src/shared/components/home/setup.tsx
@ -221,7 +221,7 @@ export class Setup extends Component<any, State> {
  }

  handleRegisterUsernameChange(i: Setup, event: any) {
-    i.state.form.username = event.target.value;
+    i.state.form.username = event.target.value.trim();
    i.setState(i.state);
  }

--- a/src/shared/components/home/signup.tsx
+++ b/src/shared/components/home/signup.tsx
@ -496,7 +496,7 @@ export class Signup extends Component<any, State> {
  }

  handleRegisterUsernameChange(i: Signup, event: any) {
-    i.state.form.username = event.target.value;
+    i.state.form.username = event.target.value.trim();
    i.setState(i.state);
  }

--- a/src/shared/components/post/post-form.tsx
+++ b/src/shared/components/post/post-form.tsx
@ -25,7 +25,6 @@ import {
  isImage,
  myAuth,
  myAuthRequired,
-  pictrsDeleteToast,
  relTags,
  setupTippy,
  toast,
@ -73,6 +72,7 @@ interface PostFormState {
  suggestedPostsRes: RequestState<SearchResponse>;
  metadataRes: RequestState<GetSiteMetadataResponse>;
  imageLoading: boolean;
+  imageDeleteUrl: string;
  communitySearchLoading: boolean;
  communitySearchOptions: Choice[];
  previewMode: boolean;
@ -86,6 +86,7 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
    form: {},
    loading: false,
    imageLoading: false,
+    imageDeleteUrl: "",
    communitySearchLoading: false,
    previewMode: false,
    communitySearchOptions: [],
@ -269,6 +270,17 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
            {url && isImage(url) && (
              <img src={url} className="img-fluid" alt="" />
            )}
+            {this.state.imageDeleteUrl && (
+              <button
+                className="btn btn-danger btn-sm mt-2"
+                onClick={linkEvent(this, this.handleImageDelete)}
+                aria-label={i18n.t("delete")}
+                data-tippy-content={i18n.t("delete")}
+              >
+                <Icon icon="x" classes="icon-inline mr-1" />
+                {capitalizeFirstLetter(i18n.t("delete"))}
+              </button>
+            )}
            {this.props.crossPosts && this.props.crossPosts.length > 0 && (
              <>
                <div className="my-1 text-muted small font-weight-bold">
@ -553,7 +565,15 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
  }

  handlePostUrlChange(i: PostForm, event: any) {
-    i.setState(s => ((s.form.url = event.target.value), s));
+    const url = event.target.value;
+
+    i.setState({
+      form: {
+        url,
+      },
+      imageDeleteUrl: "",
+    });
+
    i.fetchPageTitle();
  }

@ -644,18 +664,35 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
      if (res.state === "success") {
        if (res.data.msg === "ok") {
          i.state.form.url = res.data.url;
-          pictrsDeleteToast(file.name, res.data.delete_url as string);
-          i.setState({ imageLoading: false });
+          i.setState({
+            imageLoading: false,
+            imageDeleteUrl: res.data.delete_url as string,
+          });
        } else {
          toast(JSON.stringify(res), "danger");
        }
      } else if (res.state === "failed") {
        console.error(res.msg);
        toast(res.msg, "danger");
+        i.setState({ imageLoading: false });
      }
    });
  }

+  handleImageDelete(i: PostForm) {
+    const { imageDeleteUrl } = i.state;
+
+    fetch(imageDeleteUrl);
+
+    i.setState({
+      imageDeleteUrl: "",
+      imageLoading: false,
+      form: {
+        url: "",
+      },
+    });
+  }
+
  handleCommunitySearch = debounce(async (text: string) => {
    const { selectedCommunityChoice } = this.props;
    this.setState({ communitySearchLoading: true });
--- a/src/shared/components/post/post-listing.tsx
+++ b/src/shared/components/post/post-listing.tsx
@ -835,6 +835,8 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
          search: "",
        }}
        title={i18n.t("cross_post")}
+        data-tippy-content={i18n.t("cross_post")}
+        aria-label={i18n.t("cross_post")}
      >
        <Icon icon="copy" inline />
      </Link>
--- a/src/shared/utils.ts
+++ b/src/shared/utils.ts
@ -75,6 +75,7 @@ export const commentTreeMaxDepth = 8;
 export const markdownFieldCharacterLimit = 50000;
 export const maxUploadImages = 20;
 export const concurrentImageUpload = 4;
+export const updateUnreadCountsInterval = 30000;

 export const relTags = "noopener nofollow";

@ -1127,7 +1128,7 @@ export const colorList: string[] = [
 ];

 function hsl(num: number) {
-  return `hsla(${num}, 35%, 50%, 1)`;
+  return `hsla(${num}, 35%, 50%, 0.5)`;
 }

 export function hostname(url: string): string {
@ -1490,3 +1491,18 @@ export function newVote(voteType: VoteType, myVote?: number): number {
    return myVote == -1 ? 0 : -1;
  }
 }
+
+function sleep(millis: number): Promise<void> {
+  return new Promise(resolve => setTimeout(resolve, millis));
+}
+
+/**
+ * Polls / repeatedly runs a promise, every X milliseconds
+ */
+export async function poll(promiseFn: any, millis: number) {
+  if (window.document.visibilityState !== "hidden") {
+    await promiseFn();
+  }
+  await sleep(millis);
+  return poll(promiseFn, millis);
+}