Merge branch 'main' into generate-theme-css

2024-11-26 07:52:19 +00:00 · 2023-06-16 20:00:46 +00:00 · 2023-06-16 20:00:46 +00:00 · d3a19751d5
parent 3afd636b9e 6e3ebbd085
commit d3a19751d5
27 changed files with 212 additions and 208 deletions
--- a/.github/CODEOWNERS
+++ b/.github/CODEOWNERS
@ -1 +1 @@
-* @dessalines @SleeplessOne1917
+* @dessalines @SleeplessOne1917 @alectrocute
--- a/.github/ISSUE_TEMPLATE/BUG_REPORT.yml
+++ b/.github/ISSUE_TEMPLATE/BUG_REPORT.yml
@ -21,7 +21,7 @@ body:
        - 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
+          required: false
  - type: textarea
    id: summary
    attributes:
--- a/.github/ISSUE_TEMPLATE/FEATURE_REQUEST.yml
+++ b/.github/ISSUE_TEMPLATE/FEATURE_REQUEST.yml
@ -19,7 +19,7 @@ body:
        - 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
+          required: false
  - type: textarea
    id: problem
    attributes:
--- a/2
+++ b/2
@ -1,4 +1,4 @@
-FROM node:alpine as builder
+FROM node:20.2-alpine as builder
 RUN apk update && apk add curl yarn python3 build-base gcc wget git --no-cache
 RUN curl -sf https://gobinaries.com/tj/node-prune | sh

--- a/dev.dockerfile
+++ b/dev.dockerfile
@ -1,4 +1,4 @@
-FROM node:alpine as builder
+FROM node:20.2-alpine as builder
 RUN apk update && apk add curl yarn python3 build-base gcc wget git --no-cache

 WORKDIR /usr/src/app
--- a/src/assets/css/main.css
+++ b/src/assets/css/main.css
@ -80,30 +80,6 @@
  overflow-x: auto;
 }

-.md-div table {
-  border-collapse: collapse;
-  width: 100%;
-  margin-bottom: 1rem;
-  border: 1px solid var(--dark);
-}
-
-.md-div table th,
-.md-div table td {
-  padding: 0.3rem;
-  vertical-align: top;
-  border-top: 1px solid var(--dark);
-  border: 1px solid var(--dark);
-}
-
-.md-div table thead th {
-  vertical-align: bottom;
-  border-bottom: 2px solid var(--dark);
-}
-
-.md-div table tbody + tbody {
-  border-top: 2px solid var(--dark);
-}
-
 .vote-bar {
  margin-top: -6.5px;
 }
--- a/src/server/index.tsx
+++ b/src/server/index.tsx
@ -421,7 +421,7 @@ async function createSsrHtml(root: string, isoData: IsoDataOptionalSite) {
  <!-- Required meta tags -->
  <meta name="Description" content="Lemmy">
  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, user-scalable=no">
  <link
     id="favicon"
     rel="shortcut icon"
--- a/src/shared/components/common/html-tags.tsx
+++ b/src/shared/components/common/html-tags.tsx
@ -2,7 +2,8 @@ import { htmlToText } from "html-to-text";
 import { Component } from "inferno";
 import { Helmet } from "inferno-helmet";
 import { httpExternalPath } from "../../env";
-import { getLanguages, md } from "../../utils";
+import { i18n } from "../../i18next";
+import { md } from "../../utils";

 interface HtmlTagsProps {
  title: string;
@ -17,11 +18,10 @@ export class HtmlTags extends Component<HtmlTagsProps, any> {
    const url = httpExternalPath(this.props.path);
    const desc = this.props.description;
    const image = this.props.image;
-    const lang = getLanguages()[0];

    return (
      <Helmet title={this.props.title}>
-        <html lang={lang == "browser" ? "en" : lang} />
+        <html lang={i18n.resolvedLanguage} />

        {["title", "og:title", "twitter:title"].map(t => (
          <meta key={t} property={t} content={this.props.title} />
--- a/src/shared/components/common/markdown-textarea.tsx
+++ b/src/shared/components/common/markdown-textarea.tsx
@ -184,53 +184,6 @@ export class MarkdownTextArea extends Component<
        </div>
        <div className="row">
          <div className="col-sm-12 d-flex flex-wrap">
-            {this.props.buttonTitle && (
-              <button
-                type="submit"
-                className="btn btn-sm btn-secondary mr-2"
-                disabled={this.isDisabled}
-              >
-                {this.state.loading ? (
-                  <Spinner />
-                ) : (
-                  <span>{this.props.buttonTitle}</span>
-                )}
-              </button>
-            )}
-            {this.props.replyType && (
-              <button
-                type="button"
-                className="btn btn-sm btn-secondary mr-2"
-                onClick={linkEvent(this, this.handleReplyCancel)}
-              >
-                {i18n.t("cancel")}
-              </button>
-            )}
-            {this.state.content && (
-              <button
-                className={`btn btn-sm btn-secondary mr-2 ${
-                  this.state.previewMode && "active"
-                }`}
-                onClick={linkEvent(this, this.handlePreviewToggle)}
-              >
-                {this.state.previewMode ? i18n.t("edit") : i18n.t("preview")}
-              </button>
-            )}
-            {/* A flex expander */}
-            <div className="flex-grow-1"></div>
-
-            {this.props.showLanguage && (
-              <LanguageSelect
-                iconVersion
-                allLanguages={this.props.allLanguages}
-                selectedLanguageIds={
-                  languageId ? Array.of(languageId) : undefined
-                }
-                siteLanguages={this.props.siteLanguages}
-                onChange={this.handleLanguageChange}
-                disabled={this.isDisabled}
-              />
-            )}
            {this.getFormatButton("bold", this.handleInsertBold)}
            {this.getFormatButton("italic", this.handleInsertItalic)}
            {this.getFormatButton("link", this.handleInsertLink)}
@ -283,6 +236,57 @@ export class MarkdownTextArea extends Component<
              <Icon icon="help-circle" classes="icon-inline" />
            </a>
          </div>
+
+          <div className="col-sm-12 d-flex align-items-center flex-wrap">
+            {this.props.showLanguage && (
+              <LanguageSelect
+                iconVersion
+                allLanguages={this.props.allLanguages}
+                selectedLanguageIds={
+                  languageId ? Array.of(languageId) : undefined
+                }
+                siteLanguages={this.props.siteLanguages}
+                onChange={this.handleLanguageChange}
+                disabled={this.isDisabled}
+              />
+            )}
+
+            {/* A flex expander */}
+            <div className="flex-grow-1"></div>
+
+            {this.props.buttonTitle && (
+              <button
+                type="submit"
+                className="btn btn-sm btn-secondary mr-2"
+                disabled={this.isDisabled}
+              >
+                {this.state.loading ? (
+                  <Spinner />
+                ) : (
+                  <span>{this.props.buttonTitle}</span>
+                )}
+              </button>
+            )}
+            {this.props.replyType && (
+              <button
+                type="button"
+                className="btn btn-sm btn-secondary mr-2"
+                onClick={linkEvent(this, this.handleReplyCancel)}
+              >
+                {i18n.t("cancel")}
+              </button>
+            )}
+            {this.state.content && (
+              <button
+                className={`btn btn-sm btn-secondary mr-2 ${
+                  this.state.previewMode && "active"
+                }`}
+                onClick={linkEvent(this, this.handlePreviewToggle)}
+              >
+                {this.state.previewMode ? i18n.t("edit") : i18n.t("preview")}
+              </button>
+            )}
+          </div>
        </div>
      </form>
    );
--- a/src/shared/components/common/moment-time.tsx
+++ b/src/shared/components/common/moment-time.tsx
@ -1,7 +1,7 @@
 import { Component } from "inferno";
 import moment from "moment";
 import { i18n } from "../../i18next";
-import { capitalizeFirstLetter, getLanguages } from "../../utils";
+import { capitalizeFirstLetter } from "../../utils";
 import { Icon } from "./icon";

 interface MomentTimeProps {
@ -15,9 +15,7 @@ export class MomentTime extends Component<MomentTimeProps, any> {
  constructor(props: any, context: any) {
    super(props, context);

-    const lang = getLanguages();
-
-    moment.locale(lang);
+    moment.locale([...i18n.languages]);
  }

  createdAndModifiedTimes() {
--- a/src/shared/components/community/community.tsx
+++ b/src/shared/components/community/community.tsx
@ -647,6 +647,12 @@ export class Community extends Component<
    const blockCommunityRes = await HttpService.client.blockCommunity(form);
    if (blockCommunityRes.state == "success") {
      updateCommunityBlock(blockCommunityRes.data);
+      this.setState(s => {
+        if (s.communityRes.state == "success") {
+          s.communityRes.data.community_view.blocked =
+            blockCommunityRes.data.blocked;
+        }
+      });
    }
  }

--- a/src/shared/components/community/sidebar.tsx
+++ b/src/shared/components/community/sidebar.tsx
@ -1,4 +1,5 @@
 import { Component, InfernoNode, linkEvent } from "inferno";
+import { T } from "inferno-i18next-dess";
 import { Link } from "inferno-router";
 import {
  AddModToCommunity,
@ -63,7 +64,6 @@ interface SidebarState {
  removeCommunityLoading: boolean;
  leaveModTeamLoading: boolean;
  followCommunityLoading: boolean;
-  blockCommunityLoading: boolean;
  purgeCommunityLoading: boolean;
 }

@ -77,7 +77,6 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
    removeCommunityLoading: false,
    leaveModTeamLoading: false,
    followCommunityLoading: false,
-    blockCommunityLoading: false,
    purgeCommunityLoading: false,
  };

@ -104,7 +103,6 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
        removeCommunityLoading: false,
        leaveModTeamLoading: false,
        followCommunityLoading: false,
-        blockCommunityLoading: false,
        purgeCommunityLoading: false,
      });
    }
@ -144,10 +142,15 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
            {myUSerInfo && this.blockCommunity()}
            {!myUSerInfo && (
              <div className="alert alert-info" role="alert">
-                {i18n.t("community_not_logged_in_alert", {
-                  community: name,
-                  instance: hostname(actor_id),
-                })}
+                <T
+                  i18nKey="community_not_logged_in_alert"
+                  interpolation={{
+                    community: name,
+                    instance: hostname(actor_id),
+                  }}
+                >
+                  #<code className="user-select-all">#</code>#
+                </T>
              </div>
            )}
          </div>
@ -370,35 +373,18 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
  }

  blockCommunity() {
-    const community_view = this.props.community_view;
-    const blocked = this.props.community_view.blocked;
+    const { subscribed, blocked } = this.props.community_view;

    return (
      <div className="mb-2">
-        {community_view.subscribed == "NotSubscribed" &&
-          (blocked ? (
-            <button
-              className="btn btn-danger btn-block"
-              onClick={linkEvent(this, this.handleBlockCommunity)}
-            >
-              {this.state.blockCommunityLoading ? (
-                <Spinner />
-              ) : (
-                i18n.t("unblock_community")
-              )}
-            </button>
-          ) : (
-            <button
-              className="btn btn-danger btn-block"
-              onClick={linkEvent(this, this.handleBlockCommunity)}
-            >
-              {this.state.blockCommunityLoading ? (
-                <Spinner />
-              ) : (
-                i18n.t("block_community")
-              )}
-            </button>
-          ))}
+        {subscribed == "NotSubscribed" && (
+          <button
+            className="btn btn-danger btn-block"
+            onClick={linkEvent(this, this.handleBlockCommunity)}
+          >
+            {i18n.t(blocked ? "unblock_community" : "block_community")}
+          </button>
+        )}
      </div>
    );
  }
@ -662,10 +648,11 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
  }

  handleBlockCommunity(i: Sidebar) {
-    i.setState({ blockCommunityLoading: true });
+    const { community, blocked } = i.props.community_view;
+
    i.props.onBlockCommunity({
-      community_id: 0,
-      block: !i.props.community_view.blocked,
+      community_id: community.id,
+      block: !blocked,
      auth: myAuthRequired(),
    });
  }
--- a/src/shared/components/home/admin-settings.tsx
+++ b/src/shared/components/home/admin-settings.tsx
@ -39,6 +39,8 @@ interface AdminSettingsState {
  instancesRes: RequestState<GetFederatedInstancesResponse>;
  bannedRes: RequestState<BannedPersonsResponse>;
  leaveAdminTeamRes: RequestState<GetSiteResponse>;
+  emojiLoading: boolean;
+  loading: boolean;
  themeList: string[];
  isIsomorphic: boolean;
 }
@ -52,6 +54,8 @@ export class AdminSettings extends Component<any, AdminSettingsState> {
    bannedRes: { state: "empty" },
    instancesRes: { state: "empty" },
    leaveAdminTeamRes: { state: "empty" },
+    emojiLoading: false,
+    loading: false,
    themeList: [],
    isIsomorphic: false,
  };
@ -81,6 +85,7 @@ export class AdminSettings extends Component<any, AdminSettingsState> {
      bannedRes: { state: "loading" },
      instancesRes: { state: "loading" },
      themeList: [],
+      loading: true,
    });

    const auth = myAuthRequired();
@ -95,6 +100,7 @@ export class AdminSettings extends Component<any, AdminSettingsState> {
      bannedRes,
      instancesRes,
      themeList,
+      loading: false,
    });
  }

@ -156,6 +162,7 @@ export class AdminSettings extends Component<any, AdminSettingsState> {
                      onSaveSite={this.handleEditSite}
                      siteRes={this.state.siteRes}
                      themeList={this.state.themeList}
+                      loading={this.state.loading}
                    />
                  </div>
                  <div className="col-12 col-md-6">
@ -174,6 +181,7 @@ export class AdminSettings extends Component<any, AdminSettingsState> {
                    this.state.siteRes.site_view.local_site_rate_limit
                  }
                  onSaveSite={this.handleEditSite}
+                  loading={this.state.loading}
                />
              ),
            },
@ -185,6 +193,7 @@ export class AdminSettings extends Component<any, AdminSettingsState> {
                  <TaglineForm
                    taglines={this.state.siteRes.taglines}
                    onSaveSite={this.handleEditSite}
+                    loading={this.state.loading}
                  />
                </div>
              ),
@ -198,6 +207,7 @@ export class AdminSettings extends Component<any, AdminSettingsState> {
                    onCreate={this.handleCreateEmoji}
                    onDelete={this.handleDeleteEmoji}
                    onEdit={this.handleEditEmoji}
+                    loading={this.state.emojiLoading}
                  />
                </div>
              ),
@ -266,6 +276,8 @@ export class AdminSettings extends Component<any, AdminSettingsState> {
  }

  async handleEditSite(form: EditSite) {
+    this.setState({ loading: true });
+
    const editRes = await HttpService.client.editSite(form);

    if (editRes.state === "success") {
@ -278,6 +290,8 @@ export class AdminSettings extends Component<any, AdminSettingsState> {
      toast(i18n.t("site_saved"));
    }

+    this.setState({ loading: false });
+
    return editRes;
  }

@ -300,23 +314,35 @@ export class AdminSettings extends Component<any, AdminSettingsState> {
  }

  async handleEditEmoji(form: EditCustomEmoji) {
+    this.setState({ emojiLoading: true });
+
    const res = await HttpService.client.editCustomEmoji(form);
    if (res.state === "success") {
      updateEmojiDataModel(res.data.custom_emoji);
    }
+
+    this.setState({ emojiLoading: false });
  }

  async handleDeleteEmoji(form: DeleteCustomEmoji) {
+    this.setState({ emojiLoading: true });
+
    const res = await HttpService.client.deleteCustomEmoji(form);
    if (res.state === "success") {
      removeFromEmojiDataModel(res.data.id);
    }
+
+    this.setState({ emojiLoading: false });
  }

  async handleCreateEmoji(form: CreateCustomEmoji) {
+    this.setState({ emojiLoading: true });
+
    const res = await HttpService.client.createCustomEmoji(form);
    if (res.state === "success") {
      updateEmojiDataModel(res.data.custom_emoji);
    }
+
+    this.setState({ emojiLoading: false });
  }
 }
--- a/src/shared/components/home/emojis-form.tsx
+++ b/src/shared/components/home/emojis-form.tsx
@ -23,12 +23,12 @@ interface EmojiFormProps {
  onEdit(form: EditCustomEmoji): void;
  onCreate(form: CreateCustomEmoji): void;
  onDelete(form: DeleteCustomEmoji): void;
+  loading: boolean;
 }

 interface EmojiFormState {
  siteRes: GetSiteResponse;
  customEmojis: CustomEmojiViewForm[];
-  loading: boolean;
  page: number;
 }

@ -47,7 +47,6 @@ export class EmojiForm extends Component<EmojiFormProps, EmojiFormState> {
  private isoData = setIsoData(this.context);
  private itemsPerPage = 15;
  private emptyState: EmojiFormState = {
-    loading: false,
    siteRes: this.isoData.site_res,
    customEmojis: this.isoData.site_res.custom_emojis.map((x, index) => ({
      id: x.custom_emoji.id,
@ -223,7 +222,7 @@ export class EmojiForm extends Component<EmojiFormProps, EmojiFormState> {
                            data-tippy-content={i18n.t("save")}
                            aria-label={i18n.t("save")}
                            disabled={
-                              this.state.loading ||
+                              this.props.loading ||
                              !this.canEdit(cv) ||
                              !cv.changed
                            }
@ -243,7 +242,7 @@ export class EmojiForm extends Component<EmojiFormProps, EmojiFormState> {
                          )}
                          data-tippy-content={i18n.t("delete")}
                          aria-label={i18n.t("delete")}
-                          disabled={this.state.loading}
+                          disabled={this.props.loading}
                          title={i18n.t("delete")}
                        >
                          <Icon
--- a/src/shared/components/home/home.tsx
+++ b/src/shared/components/home/home.tsx
@ -244,9 +244,10 @@ export class Home extends Component<any, HomeState> {
  }

  async componentDidMount() {
-    if (!this.state.isIsomorphic) {
+    if (!this.state.isIsomorphic || !this.isoData.routeData.length) {
      await Promise.all([this.fetchTrendingCommunities(), this.fetchData()]);
    }
+
    setupTippy();
  }

@ -456,7 +457,7 @@ export class Home extends Component<any, HomeState> {
  }

  trendingCommunities(isMobile = false) {
-    switch (this.state.trendingCommunitiesRes.state) {
+    switch (this.state.trendingCommunitiesRes?.state) {
      case "loading":
        return (
          <h5>
@ -573,7 +574,7 @@ export class Home extends Component<any, HomeState> {
    const siteRes = this.state.siteRes;

    if (dataType === DataType.Post) {
-      switch (this.state.postsRes.state) {
+      switch (this.state.postsRes?.state) {
        case "loading":
          return (
            <h5>
--- a/src/shared/components/home/login.tsx
+++ b/src/shared/components/home/login.tsx
@ -186,7 +186,9 @@ export class Login extends Component<any, State> {
            UserService.Instance.myUserInfo = site.data.my_user;
          }

-          i.props.history.replace("/");
+          i.props.history.action === "PUSH"
+            ? i.props.history.back()
+            : i.props.history.replace("/");

          break;
        }
--- a/src/shared/components/home/rate-limit-form.tsx
+++ b/src/shared/components/home/rate-limit-form.tsx
@ -24,6 +24,7 @@ interface RateLimitsProps {
 interface RateLimitFormProps {
  rateLimits: LocalSiteRateLimit;
  onSaveSite(form: EditSite): void;
+  loading: boolean;
 }

 interface RateLimitFormState {
@ -41,7 +42,6 @@ interface RateLimitFormState {
    register?: number;
    register_per_second?: number;
  };
-  loading: boolean;
 }

 function RateLimits({
@ -117,7 +117,6 @@ function submitRateLimitForm(i: RateLimitsForm, event: any) {
    }
  );

-  i.setState({ loading: true });
  i.props.onSaveSite(form);
 }

@ -126,7 +125,6 @@ export default class RateLimitsForm extends Component<
  RateLimitFormState
 > {
  state: RateLimitFormState = {
-    loading: false,
    form: this.props.rateLimits,
  };
  constructor(props: RateLimitFormProps, context: any) {
@ -164,9 +162,9 @@ export default class RateLimitsForm extends Component<
            <button
              type="submit"
              className="btn btn-secondary mr-2"
-              disabled={this.state.loading}
+              disabled={this.props.loading}
            >
-              {this.state.loading ? (
+              {this.props.loading ? (
                <Spinner />
              ) : (
                capitalizeFirstLetter(i18n.t("save"))
--- a/src/shared/components/home/setup.tsx
+++ b/src/shared/components/home/setup.tsx
@ -73,6 +73,7 @@ export class Setup extends Component<any, State> {
                onSaveSite={this.handleCreateSite}
                siteRes={this.state.siteRes}
                themeList={this.state.themeList}
+                loading={false}
              />
            )}
          </div>
--- a/src/shared/components/home/site-form.tsx
+++ b/src/shared/components/home/site-form.tsx
@ -12,7 +12,11 @@ import {
  ListingType,
 } from "lemmy-js-client";
 import { i18n } from "../../i18next";
-import { capitalizeFirstLetter, myAuthRequired } from "../../utils";
+import {
+  capitalizeFirstLetter,
+  myAuthRequired,
+  validInstanceTLD,
+} from "../../utils";
 import { Icon, Spinner } from "../common/icon";
 import { ImageUploadForm } from "../common/image-upload-form";
 import { LanguageSelect } from "../common/language-select";
@ -27,11 +31,11 @@ interface SiteFormProps {
  themeList?: string[];
  onSaveSite(form: EditSite): void;
  siteRes: GetSiteResponse;
+  loading: boolean;
 }

 interface SiteFormState {
  siteForm: EditSite;
-  loading: boolean;
  instance_select: {
    allowed_instances: string;
    blocked_instances: string;
@ -44,7 +48,6 @@ type InstanceKey = "allowed_instances" | "blocked_instances";
 export class SiteForm extends Component<SiteFormProps, SiteFormState> {
  state: SiteFormState = {
    siteForm: this.initSiteForm(),
-    loading: false,
    instance_select: {
      allowed_instances: "",
      blocked_instances: "",
@ -107,23 +110,21 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {

    this.handleDiscussionLanguageChange =
      this.handleDiscussionLanguageChange.bind(this);
+
    this.handleAddInstance = this.handleAddInstance.bind(this);
+    this.handleRemoveInstance = this.handleRemoveInstance.bind(this);
+
    this.handleInstanceEnterPress = this.handleInstanceEnterPress.bind(this);
    this.handleInstanceTextChange = this.handleInstanceTextChange.bind(this);
  }

-  // Necessary to stop the loading
-  componentWillReceiveProps() {
-    this.setState({ loading: false });
-  }
-
  render() {
    const siteSetup = this.props.siteRes.site_view.local_site.site_setup;
    return (
      <form onSubmit={linkEvent(this, this.handleSaveSiteSubmit)}>
        <NavigationPrompt
          when={
-            !this.state.loading &&
+            !this.props.loading &&
            !siteSetup &&
            !!(
              this.state.siteForm.name ||
@ -136,8 +137,8 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
        />
        <h5>{`${
          siteSetup
-            ? capitalizeFirstLetter(i18n.t("save"))
-            : capitalizeFirstLetter(i18n.t("name"))
+            ? capitalizeFirstLetter(i18n.t("edit"))
+            : capitalizeFirstLetter(i18n.t("setup"))
        } ${i18n.t("your_site")}`}</h5>
        <div className="form-group row">
          <label className="col-12 col-form-label" htmlFor="create-site-name">
@ -157,7 +158,7 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
          </div>
        </div>
        <div className="form-group">
-          <label>{i18n.t("icon")}</label>
+          <label className="mr-2">{i18n.t("icon")}</label>
          <ImageUploadForm
            uploadTitle={i18n.t("upload_icon")}
            imageSrc={this.state.siteForm.icon}
@ -167,7 +168,7 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
          />
        </div>
        <div className="form-group">
-          <label>{i18n.t("banner")}</label>
+          <label className="mr-2">{i18n.t("banner")}</label>
          <ImageUploadForm
            uploadTitle={i18n.t("upload_banner")}
            imageSrc={this.state.siteForm.banner}
@ -609,9 +610,9 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
            <button
              type="submit"
              className="btn btn-secondary mr-2"
-              disabled={this.state.loading}
+              disabled={this.props.loading}
            >
-              {this.state.loading ? (
+              {this.props.loading ? (
                <Spinner />
              ) : siteSetup ? (
                capitalizeFirstLetter(i18n.t("save"))
@ -717,7 +718,7 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
    event.preventDefault();
    const auth = myAuthRequired();
    i.setState(s => ((s.siteForm.auth = auth), s));
-    i.setState({ loading: true, submitted: true });
+    i.setState({ submitted: true });

    const stateSiteForm = i.state.siteForm;

@ -780,6 +781,11 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {

  handleAddInstance(key: InstanceKey) {
    const instance = this.state.instance_select[key].trim();
+
+    if (!validInstanceTLD(instance)) {
+      return;
+    }
+
    if (!this.state.siteForm[key]?.includes(instance)) {
      this.setState(s => ({
        ...s,
--- a/src/shared/components/home/tagline-form.tsx
+++ b/src/shared/components/home/tagline-form.tsx
@ -9,17 +9,16 @@ import { MarkdownTextArea } from "../common/markdown-textarea";
 interface TaglineFormProps {
  taglines: Array<Tagline>;
  onSaveSite(form: EditSite): void;
+  loading: boolean;
 }

 interface TaglineFormState {
  taglines: Array<string>;
-  loading: boolean;
  editingRow?: number;
 }

 export class TaglineForm extends Component<TaglineFormProps, TaglineFormState> {
  state: TaglineFormState = {
-    loading: false,
    editingRow: undefined,
    taglines: this.props.taglines.map(x => x.content),
  };
@ -30,10 +29,6 @@ export class TaglineForm extends Component<TaglineFormProps, TaglineFormState> {
    return i18n.t("taglines");
  }

-  componentWillReceiveProps() {
-    this.setState({ loading: false });
-  }
-
  render() {
    return (
      <div className="col-12">
@ -110,9 +105,9 @@ export class TaglineForm extends Component<TaglineFormProps, TaglineFormState> {
              <button
                onClick={linkEvent(this, this.handleSaveClick)}
                className="btn btn-secondary mr-2"
-                disabled={this.state.loading}
+                disabled={this.props.loading}
              >
-                {this.state.loading ? (
+                {this.props.loading ? (
                  <Spinner />
                ) : (
                  capitalizeFirstLetter(i18n.t("save"))
@ -153,7 +148,6 @@ export class TaglineForm extends Component<TaglineFormProps, TaglineFormState> {
  }

  async handleSaveClick(i: TaglineForm) {
-    i.setState({ loading: true });
    i.props.onSaveSite({
      taglines: i.state.taglines,
      auth: myAuthRequired(),
--- a/src/shared/components/person/settings.tsx
+++ b/src/shared/components/person/settings.tsx
@ -25,7 +25,6 @@ import {
  fetchCommunities,
  fetchThemeList,
  fetchUsers,
-  getLanguages,
  myAuth,
  myAuthRequired,
  personToChoice,
@ -1058,12 +1057,12 @@ export class Settings extends Component<any, SettingsState> {
  }

  handleInterfaceLangChange(i: Settings, event: any) {
+    const newLang = event.target.value ?? "browser";
+    i18n.changeLanguage(newLang === "browser" ? navigator.languages : newLang);
+
    i.setState(
      s => ((s.saveUserSettingsForm.interface_language = event.target.value), s)
    );
-    i18n.changeLanguage(
-      getLanguages(i.state.saveUserSettingsForm.interface_language).at(0)
-    );
  }

  handleDiscussionLanguageChange(val: number[]) {
--- a/src/shared/components/post/create-post.tsx
+++ b/src/shared/components/post/create-post.tsx
@ -224,6 +224,10 @@ export class CreatePost extends Component<
    if (res.state === "success") {
      const postId = res.data.post_view.post.id;
      this.props.history.replace(`/post/${postId}`);
+    } else {
+      this.setState({
+        loading: false,
+      });
    }
  }

--- a/src/shared/components/post/post-listing.tsx
+++ b/src/shared/components/post/post-listing.tsx
@ -1382,9 +1382,12 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
  }

  showMobilePreview() {
-    const body = this.postView.post.body;
+    const { body, id } = this.postView.post;
+
    return !this.showBody && body ? (
-      <div className="md-div mb-1 preview-lines">{body}</div>
+      <Link className="text-body" to={`/post/${id}`}>
+        <div className="md-div mb-1 preview-lines">{body}</div>
+      </Link>
    ) : (
      <></>
    );
--- a/src/shared/components/post/post-listings.tsx
+++ b/src/shared/components/post/post-listings.tsx
@ -68,7 +68,7 @@ export class PostListings extends Component<PostListingsProps, any> {
    return (
      <div>
        {this.posts.length > 0 ? (
-          this.posts.map(post_view => (
+          this.posts.map((post_view, idx) => (
            <>
              <PostListing
                post_view={post_view}
@ -96,7 +96,9 @@ export class PostListings extends Component<PostListingsProps, any> {
                onAddAdmin={this.props.onAddAdmin}
                onTransferCommunity={this.props.onTransferCommunity}
              />
-              <hr className="my-3" />
+              {idx + 1 !== this.posts.length && (
+                <hr className="my-3 border border-primary" />
+              )}
            </>
          ))
        ) : (
--- a/src/shared/components/post/post.tsx
+++ b/src/shared/components/post/post.tsx
@ -729,19 +729,14 @@ export class Post extends Component<any, PostState> {

  async handleBlockCommunity(form: BlockCommunity) {
    const blockCommunityRes = await HttpService.client.blockCommunity(form);
-    // TODO Probably isn't necessary
-    this.setState(s => {
-      if (
-        s.postRes.state == "success" &&
-        blockCommunityRes.state == "success"
-      ) {
-        s.postRes.data.community_view = blockCommunityRes.data.community_view;
-      }
-      return s;
-    });
-
    if (blockCommunityRes.state == "success") {
      updateCommunityBlock(blockCommunityRes.data);
+      this.setState(s => {
+        if (s.postRes.state == "success") {
+          s.postRes.data.community_view.blocked =
+            blockCommunityRes.data.blocked;
+        }
+      });
    }
  }

--- a/src/shared/i18next.ts
+++ b/src/shared/i18next.ts
@ -1,4 +1,5 @@
 import i18next, { i18nTyped, Resource } from "i18next";
+import { UserService } from "./services";
 import { ar } from "./translations/ar";
 import { bg } from "./translations/bg";
 import { ca } from "./translations/ca";
@ -30,7 +31,7 @@ import { sv } from "./translations/sv";
 import { vi } from "./translations/vi";
 import { zh } from "./translations/zh";
 import { zh_Hant } from "./translations/zh_Hant";
-import { getLanguages } from "./utils";
+import { isBrowser } from "./utils";

 export const languages = [
  { resource: ar, code: "ar", name: "العربية" },
@ -73,12 +74,31 @@ function format(value: any, format: any): any {
  return format === "uppercase" ? value.toUpperCase() : value;
 }

-i18next.init({
+class LanguageDetector {
+  static readonly type = "languageDetector";
+
+  detect() {
+    const langs: string[] = [];
+
+    const myLang =
+      UserService.Instance.myUserInfo?.local_user_view.local_user
+        .interface_language ?? "browser";
+
+    if (myLang !== "browser") langs.push(myLang);
+
+    if (isBrowser()) langs.push(...navigator.languages);
+
+    return langs;
+  }
+}
+
+i18next.use(LanguageDetector).init({
  debug: false,
  compatibilityJSON: "v3",
+  supportedLngs: languages.map(l => l.code),
+  nonExplicitSupportedLngs: true,
  // load: 'languageOnly',
  // initImmediate: false,
-  lng: getLanguages()[0],
  fallbackLng: "en",
  resources,
  interpolation: { format },
--- a/src/shared/utils.ts
+++ b/src/shared/utils.ts
@ -42,7 +42,7 @@ import moment from "moment";
 import tippy from "tippy.js";
 import Toastify from "toastify-js";
 import { getHttpBase } from "./env";
-import { i18n, languages } from "./i18next";
+import { i18n } from "./i18next";
 import { CommentNodeI, DataType, IsoData, VoteType } from "./interfaces";
 import { HttpService, UserService } from "./services";

@ -316,6 +316,7 @@ export function amTopMod(

 const imageRegex = /(http)?s?:?(\/\/[^"']*\.(?:jpg|jpeg|gif|png|svg|webp))/;
 const videoRegex = /(http)?s?:?(\/\/[^"']*\.(?:mp4|webm))/;
+const tldRegex = /([a-z0-9]+\.)*[a-z0-9]+\.[a-z]+/;

 export function isImage(url: string) {
  return imageRegex.test(url);
@ -329,6 +330,10 @@ export function validURL(str: string) {
  return !!new URL(str);
 }

+export function validInstanceTLD(str: string) {
+  return tldRegex.test(str);
+}
+
 export function communityRSSUrl(actorId: string, sort: string): string {
  const url = new URL(actorId);
  return `${url.origin}/feeds${url.pathname}.xml?sort=${sort}`;
@ -399,31 +404,6 @@ export function debounce<T extends any[], R>(
  } as (...e: T) => R;
 }

-export function getLanguages(
-  override?: string,
-  myUserInfo = UserService.Instance.myUserInfo
-): string[] {
-  const myLang = myUserInfo?.local_user_view.local_user.interface_language;
-  const lang = override || myLang || "browser";
-
-  if (lang == "browser" && isBrowser()) {
-    return getBrowserLanguages();
-  } else {
-    return [lang];
-  }
-}
-
-function getBrowserLanguages(): string[] {
-  // Intersect lemmy's langs, with the browser langs
-  const langs = languages ? languages.map(l => l.code) : ["en"];
-
-  // NOTE, mobile browsers seem to be missing this list, so append en
-  const allowedLangs = navigator.languages
-    .concat("en")
-    .filter(v => langs.includes(v));
-  return allowedLangs;
-}
-
 export async function fetchThemeList(): Promise<string[]> {
  return fetch("/css/themelist").then(res => res.json());
 }
@ -739,7 +719,7 @@ function setupMarkdown() {
      defs: emojiDefs,
    })
    .disable("image");
-  var defaultRenderer = md.renderer.rules.image;
+  const defaultRenderer = md.renderer.rules.image;
  md.renderer.rules.image = function (
    tokens: Token[],
    idx: number,
@ -758,6 +738,9 @@ function setupMarkdown() {
    const alt_text = item.content;
    return `<img class="icon icon-emoji" src="${src}" title="${title}" alt="${alt_text}"/>`;
  };
+  md.renderer.rules.table_open = function () {
+    return '<table class="table">';
+  };
 }

 export function getEmojiMart(
@ -1273,7 +1256,7 @@ export function personSelectName({

 export function initializeSite(site?: GetSiteResponse) {
  UserService.Instance.myUserInfo = site?.my_user;
-  i18n.changeLanguage(getLanguages()[0]);
+  i18n.changeLanguage();
  if (site) {
    setupEmojiDataModel(site.custom_emojis ?? []);
  }