Merge branch 'main' into fix/thumb-action-button-alignment

package.json

@@ -1,6 +1,6 @@
 {
   "name": "lemmy-ui",
-  "version": "0.18.0",
+  "version": "0.18.1-rc.1",
   "description": "An isomorphic UI for lemmy",
   "repository": "https://github.com/LemmyNet/lemmy-ui",
   "license": "AGPL-3.0",

src/shared/components/home/site-form.tsx

@@ -4,6 +4,7 @@ import {
   Component,
   InfernoKeyboardEvent,
   InfernoMouseEvent,
+  InfernoNode,
   linkEvent,
 } from "inferno";
 import {
@@ -13,6 +14,7 @@ import {
   Instance,
   ListingType,
 } from "lemmy-js-client";
+import deepEqual from "lodash.isequal";
 import { I18NextService } from "../../services";
 import { Icon, Spinner } from "../common/icon";
 import { ImageUploadForm } from "../common/image-upload-form";
@@ -55,6 +57,7 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
   initSiteForm(): EditSite {
     const site = this.props.siteRes.site_view.site;
     const ls = this.props.siteRes.site_view.local_site;
+
     return {
       name: site.name,
       sidebar: site.sidebar,
@@ -619,6 +622,19 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
     );
   }
 
+  componentDidUpdate(
+    prevProps: Readonly<{ children?: InfernoNode } & SiteFormProps>
+  ) {
+    if (
+      !(
+        deepEqual(prevProps.allowedInstances, this.props.allowedInstances) ||
+        deepEqual(prevProps.blockedInstances, this.props.blockedInstances)
+      )
+    ) {
+      this.setState({ siteForm: this.initSiteForm() });
+    }
+  }
+
   federatedInstanceSelect(key: InstanceKey) {
     const id = `create_site_${key}`;
     const value = this.state.instance_select[key];

src/shared/components/person/profile.tsx

@@ -692,6 +692,8 @@ export class Profile extends Component<
             >
               {I18NextService.i18n.t("cancel")}
             </button>
+          </div>
+          <div className="mb-3 row">
             <button
               type="submit"
               className="btn btn-secondary"

src/shared/components/post/metadata-card.tsx

@@ -8,60 +8,54 @@ interface MetadataCardProps {
   post: Post;
 }
 
-interface MetadataCardState {
-  expanded: boolean;
-}
-
-export class MetadataCard extends Component<
-  MetadataCardProps,
-  MetadataCardState
-> {
+export class MetadataCard extends Component<MetadataCardProps> {
   constructor(props: any, context: any) {
     super(props, context);
   }
 
   render() {
     const post = this.props.post;
-    return (
-      <>
-        {post.embed_title && post.url && (
-          <div className="post-metadata-card card border-secondary mt-3 mb-2">
-            <div className="row">
-              <div className="col-12">
-                <div className="card-body">
-                  {post.name !== post.embed_title && (
-                    <>
-                      <h5 className="card-title d-inline">
-                        <a className="text-body" href={post.url} rel={relTags}>
-                          {post.embed_title}
-                        </a>
-                      </h5>
-                      <span className="d-inline-block ms-2 mb-2 small text-muted">
-                        <a
-                          className="text-muted fst-italic"
-                          href={post.url}
-                          rel={relTags}
-                        >
-                          {new URL(post.url).hostname}
-                          <Icon icon="external-link" classes="ms-1" />
-                        </a>
-                      </span>
-                    </>
-                  )}
-                  {post.embed_description && (
-                    <div
-                      className="card-text small text-muted md-div"
-                      dangerouslySetInnerHTML={{
-                        __html: sanitizeHtml(post.embed_description),
-                      }}
-                    />
-                  )}
-                </div>
+
+    if (post.embed_title && post.url) {
+      return (
+        <div className="post-metadata-card card border-secondary mt-3 mb-2">
+          <div className="row">
+            <div className="col-12">
+              <div className="card-body">
+                {post.name !== post.embed_title && (
+                  <>
+                    <h5 className="card-title d-inline">
+                      <a className="text-body" href={post.url} rel={relTags}>
+                        {post.embed_title}
+                      </a>
+                    </h5>
+                    <span className="d-inline-block ms-2 mb-2 small text-muted">
+                      <a
+                        className="text-muted fst-italic"
+                        href={post.url}
+                        rel={relTags}
+                      >
+                        {new URL(post.url).hostname}
+                        <Icon icon="external-link" classes="ms-1" />
+                      </a>
+                    </span>
+                  </>
+                )}
+                {post.embed_description && (
+                  <div
+                    className="card-text small text-muted md-div"
+                    dangerouslySetInnerHTML={{
+                      __html: sanitizeHtml(post.embed_description),
+                    }}
+                  />
+                )}
               </div>
             </div>
           </div>
-        )}
-      </>
-    );
+        </div>
+      );
+    } else {
+      return <></>;
+    }
   }
 }

src/shared/components/post/post-listing.tsx

@@ -49,7 +49,7 @@ import {
   PurgeType,
   VoteContentType,
 } from "../../interfaces";
-import { mdNoImages, mdToHtml, mdToHtmlInline } from "../../markdown";
+import { mdToHtml, mdToHtmlInline } from "../../markdown";
 import { I18NextService, UserService } from "../../services";
 import { setupTippy } from "../../tippy";
 import { Icon, PurgeWarning, Spinner } from "../common/icon";
@@ -105,6 +105,9 @@ interface PostListingProps {
   allLanguages: Language[];
   siteLanguages: number[];
   showCommunity?: boolean;
+  /**
+   * Controls whether to show both the body *and* the metadata preview card
+   */
   showBody?: boolean;
   hideImage?: boolean;
   enableDownvotes?: boolean;
@@ -200,7 +203,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
           <>
             {this.listing()}
             {this.state.imageExpanded && !this.props.hideImage && this.img}
-            {post.url && this.state.showBody && post.embed_title && (
+            {this.showBody && post.url && post.embed_title && (
               <MetadataCard post={post} />
             )}
             {this.showBody && this.body()}
@@ -488,6 +491,15 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
             )}
           </h5>
 
+          {/**
+           * If there is a URL, an embed title, and we were not told to show the
+           * body by the parent component, show the MetadataCard/body toggle.
+           */}
+          {!this.props.showBody &&
+            post.url &&
+            post.embed_title &&
+            this.showPreviewButton()}
+
           {post.removed && (
             <small className="ms-2 badge text-bg-secondary">
               {I18NextService.i18n.t("removed")}
@@ -630,27 +642,6 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
     );
   }
 
-  showPreviewButton() {
-    const post_view = this.postView;
-    const body = post_view.post.body;
-
-    return (
-      <button
-        className="btn btn-sm btn-animate text-muted py-0"
-        data-tippy-content={body && mdNoImages.render(body)}
-        data-tippy-allowHtml={true}
-        onClick={linkEvent(this, this.handleShowBody)}
-      >
-        <Icon
-          icon="book-open"
-          classes={classNames("icon-inline me-1", {
-            "text-success": this.state.showBody,
-          })}
-        />
-      </button>
-    );
-  }
-
   postActions() {
     // Possible enhancement: Priority+ pattern instead of just hard coding which get hidden behind the show more button.
     // Possible enhancement: Make each button a component.
@@ -662,14 +653,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
         {this.saveButton}
         {this.crossPostButton}
 
-        {/**
-         * If there is a URL, or if the post has a body and we were told not to
-         * show the body, show the MetadataCard/body toggle.
-         */}
-        {(post.url || (post.body && !this.props.showBody)) &&
-          this.showPreviewButton()}
-
-        {this.showBody && post_view.post.body && this.viewSourceButton}
+        {this.props.showBody && post_view.post.body && this.viewSourceButton}
 
         <div className="dropdown">
           <button
@@ -1393,15 +1377,18 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
     );
   }
 
-  showBodyPreview() {
-    const { body, id } = this.postView.post;
-
-    return !this.showBody && body ? (
-      <Link className="text-body mt-2 d-block" to={`/post/${id}`}>
-        <div className="md-div mb-1 preview-lines">{body}</div>
-      </Link>
-    ) : (
-      <></>
+  showPreviewButton() {
+    return (
+      <button
+        type="button"
+        className="btn btn-sm btn-link link-dark link-opacity-75 link-opacity-100-hover py-0 align-baseline"
+        onClick={linkEvent(this, this.handleShowBody)}
+      >
+        <Icon
+          icon={!this.state.showBody ? "plus-square" : "minus-square"}
+          classes="icon-inline"
+        />
+      </button>
     );
   }
 

src/shared/config.ts

@@ -21,7 +21,7 @@ export const markdownFieldCharacterLimit = 50000;
 export const maxUploadImages = 20;
 export const concurrentImageUpload = 4;
 export const updateUnreadCountsInterval = 30000;
-export const fetchLimit = 40;
+export const fetchLimit = 20;
 export const relTags = "noopener nofollow";
 export const emDash = "\u2014";
 

webpack.config.js

@@ -6,8 +6,7 @@ const CopyPlugin = require("copy-webpack-plugin");
 const RunNodeWebpackPlugin = require("run-node-webpack-plugin");
 const merge = require("lodash.merge");
 const { ServiceWorkerPlugin } = require("service-worker-webpack");
-const BundleAnalyzerPlugin =
-  require("webpack-bundle-analyzer").BundleAnalyzerPlugin;
+
 const banner = `
   hash:[contentHash], chunkhash:[chunkhash], name:[name], filebase:[base], query:[query], file:[file]
   Source code: https://github.com/LemmyNet/lemmy-ui
@@ -156,6 +155,8 @@ const createClientConfig = (_env, mode) => {
   });
 
   if (mode === "none") {
+    const BundleAnalyzerPlugin =
+      require("webpack-bundle-analyzer").BundleAnalyzerPlugin;
     config.plugins.push(new BundleAnalyzerPlugin());
   }