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

.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:
@@ -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

.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:

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",

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;

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");
       }
 

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,10 +408,11 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
     return amAdmin() || moderatesS;
   }
 
-  async fetchUnreads() {
+  fetchUnreads() {
+    poll(async () => {
+      if (window.document.visibilityState !== "hidden") {
         const auth = myAuth();
         if (auth) {
-      this.setState({ unreadInboxCountRes: { state: "loading" } });
           this.setState({
             unreadInboxCountRes: await HttpService.client.getUnreadCount({
               auth,
@@ -417,7 +420,6 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
           });
 
           if (this.moderatesSomething) {
-        this.setState({ unreadReportCountRes: { state: "loading" } });
             this.setState({
               unreadReportCountRes: await HttpService.client.getReportCount({
                 auth,
@@ -426,7 +428,6 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
           }
 
           if (amAdmin()) {
-        this.setState({ unreadApplicationCountRes: { state: "loading" } });
             this.setState({
               unreadApplicationCountRes:
                 await HttpService.client.getUnreadRegistrationApplicationCount({
@@ -436,6 +437,8 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
           }
         }
       }
+    }, updateUnreadCountsInterval);
+  }
 
   get unreadInboxCount(): number {
     if (this.state.unreadInboxCountRes.state == "success") {

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,
     });

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,8 +78,19 @@ 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.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}
@@ -116,7 +131,8 @@ export class CommentNodes extends Component<CommentNodesProps, any> {
               onPurgeComment={this.props.onPurgeComment}
             />
           ))}
-      </div>
+        </ul>
+      )
     );
   }
 }

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);
   }
 

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);
   }
 

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);
   }
 

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 });

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>

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);
+}