Merge branch 'main' into search-error

package.json

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

src/shared/components/app/app.tsx

@@ -1,11 +1,10 @@
 import { isAuthPath, setIsoData } from "@utils/app";
-import { dataBsTheme } from "@utils/browser";
 import { Component, RefObject, createRef, linkEvent } from "inferno";
 import { Provider } from "inferno-i18next-dess";
 import { Route, Switch } from "inferno-router";
 import { IsoDataOptionalSite } from "../../interfaces";
 import { routes } from "../../routes";
-import { FirstLoadService, I18NextService, UserService } from "../../services";
+import { FirstLoadService, I18NextService } from "../../services";
 import AuthGuard from "../common/auth-guard";
 import ErrorGuard from "../common/error-guard";
 import { ErrorPage } from "./error-page";
@@ -26,13 +25,6 @@ export class App extends Component<any, any> {
     event.preventDefault();
     this.mainContentRef.current?.focus();
   }
-
-  user = UserService.Instance.myUserInfo;
-
-  componentDidMount() {
-    this.setState({ bsTheme: dataBsTheme(this.user) });
-  }
-
   render() {
     const siteRes = this.isoData.site_res;
     const siteView = siteRes?.site_view;
@@ -40,11 +32,7 @@ export class App extends Component<any, any> {
     return (
       <>
         <Provider i18next={I18NextService.i18n}>
-          <div
+          <div id="app" className="lemmy-site">
-            id="app"
-            className="lemmy-site"
-            data-bs-theme={this.state?.bsTheme}
-          >
             <button
               type="button"
               className="btn skip-link bg-light position-absolute start-0 z-3"

src/shared/components/comment/comment-node.tsx

@@ -299,7 +299,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
           >
             <div className="d-flex flex-wrap align-items-center text-muted small">
               <button
-                className="btn btn-sm btn-link text-muted me-2"
+                className="btn btn-sm text-muted me-2"
                 onClick={linkEvent(this, this.handleCommentCollapse)}
                 aria-label={this.expandText}
                 data-tippy-content={this.expandText}
@@ -1461,7 +1461,6 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
       comment_id: i.commentId,
       removed: !i.commentView.comment.removed,
       auth: myAuthRequired(),
-      reason: i.state.removeReason,
     });
   }
 

src/shared/components/common/emoji-picker.tsx

@@ -32,7 +32,7 @@ export class EmojiPicker extends Component<EmojiPickerProps, EmojiPickerState> {
     return (
       <span className="emoji-picker">
         <button
-          className="btn btn-sm btn-link rounded-0 text-muted"
+          className="btn btn-sm text-muted"
           data-tippy-content={I18NextService.i18n.t("emoji")}
           aria-label={I18NextService.i18n.t("emoji")}
           disabled={this.props.disabled}

src/shared/components/common/markdown-textarea.tsx

@@ -170,39 +170,34 @@ export class MarkdownTextArea extends Component<
                 <EmojiPicker
                   onEmojiClick={e => this.handleEmoji(this, e)}
                 ></EmojiPicker>
-                <label
+                <form className="btn btn-sm text-muted fw-bold">
-                  htmlFor={`file-upload-${this.id}`}
+                  <label
-                  className={classNames("mb-0", {
+                    htmlFor={`file-upload-${this.id}`}
-                    pointer: UserService.Instance.myUserInfo,
+                    // TODO: Fix this linting violation
-                  })}
+                    // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
-                  data-tippy-content={I18NextService.i18n.t("upload_image")}
+                    tabIndex={0}
-                >
+                    className={`mb-0 ${
-                  {this.state.imageUploadStatus ? (
+                      UserService.Instance.myUserInfo && "pointer"
-                    <Spinner />
+                    }`}
-                  ) : (
+                    data-tippy-content={I18NextService.i18n.t("upload_image")}
-                    <button
+                  >
-                      type="button"
+                    {this.state.imageUploadStatus ? (
-                      className="btn btn-sm btn-link rounded-0 text-muted mb-0"
+                      <Spinner />
-                      onClick={() => {
+                    ) : (
-                        document
-                          .getElementById(`file-upload-${this.id}`)
-                          ?.click();
-                      }}
-                    >
                       <Icon icon="image" classes="icon-inline" />
-                    </button>
+                    )}
-                  )}
+                  </label>
-                </label>
+                  <input
-                <input
+                    id={`file-upload-${this.id}`}
-                  id={`file-upload-${this.id}`}
+                    type="file"
-                  type="file"
+                    accept="image/*,video/*"
-                  accept="image/*,video/*"
+                    name="file"
-                  name="file"
+                    className="d-none"
-                  className="d-none"
+                    multiple
-                  multiple
+                    disabled={!UserService.Instance.myUserInfo}
-                  disabled={!UserService.Instance.myUserInfo}
+                    onChange={linkEvent(this, this.handleImageUpload)}
-                  onChange={linkEvent(this, this.handleImageUpload)}
+                  />
-                />
+                </form>
                 {this.getFormatButton("header", this.handleInsertHeader)}
                 {this.getFormatButton(
                   "strikethrough",
@@ -353,7 +348,7 @@ export class MarkdownTextArea extends Component<
 
     return (
       <button
-        className="btn btn-sm btn-link rounded-0 text-muted"
+        className="btn btn-sm text-muted"
         data-tippy-content={I18NextService.i18n.t(type)}
         aria-label={I18NextService.i18n.t(type)}
         onClick={linkEvent(this, handleClick)}

src/shared/components/common/vote-buttons.tsx

@@ -113,7 +113,7 @@ export class VoteButtonsCompact extends Component<
       <>
         <button
           type="button"
-          className={`btn btn-animate btn-sm btn-link py-0 px-1 ${
+          className={`btn-animate btn py-0 px-1 ${
             this.props.my_vote === 1 ? "text-info" : "text-muted"
           }`}
           data-tippy-content={tippy(this.props.counts)}
@@ -137,7 +137,7 @@ export class VoteButtonsCompact extends Component<
         {this.props.enableDownvotes && (
           <button
             type="button"
-            className={`ms-2 btn btn-sm btn-link btn-animate btn py-0 px-1 ${
+            className={`ms-2 btn-animate btn py-0 px-1 ${
               this.props.my_vote === -1 ? "text-danger" : "text-muted"
             }`}
             onClick={linkEvent(this, handleDownvote)}

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

@@ -465,8 +465,8 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
 
     return (
       <>
-        <div className="post-title">
+        <div className="post-title overflow-hidden">
-          <h1 className="h5 d-inline text-break">
+          <h1 className="h5 d-inline">
             {url && this.props.showBody ? (
               <a
                 className={
@@ -1415,7 +1415,6 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
       UserService.Instance.myUserInfo?.local_user_view.person.id
     );
   }
-
   handleEditClick(i: PostListing) {
     i.setState({ showEdit: true });
   }
@@ -1539,7 +1538,6 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
       post_id: i.postView.post.id,
       removed: !i.postView.post.removed,
       auth: myAuthRequired(),
-      reason: i.state.removeReason,
     });
   }
 
@@ -1611,13 +1609,13 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
   handlePurgeSubmit(i: PostListing, event: any) {
     event.preventDefault();
     i.setState({ purgeLoading: true });
-    if (i.state.purgeType === PurgeType.Person) {
+    if (i.state.purgeType == PurgeType.Person) {
       i.props.onPurgePerson({
         person_id: i.postView.creator.id,
         reason: i.state.purgeReason,
         auth: myAuthRequired(),
       });
-    } else if (i.state.purgeType === PurgeType.Post) {
+    } else if (i.state.purgeType == PurgeType.Post) {
       i.props.onPurgePost({
         post_id: i.postView.post.id,
         reason: i.state.purgeReason,

src/shared/utils/browser/data-bs-theme.ts

@@ -1,11 +0,0 @@
-import isDark from "./is-dark";
-
-export default function dataBsTheme(user) {
-  return (isDark() && user?.local_user_view.local_user.theme === "browser") ||
-    (user &&
-      ["darkly", "darkly-red", "darkly-pureblack"].includes(
-        user.local_user_view.local_user.theme
-      ))
-    ? "dark"
-    : "light";
-}

src/shared/utils/browser/index.ts

@@ -1,7 +1,5 @@
 import canShare from "./can-share";
-import dataBsTheme from "./data-bs-theme";
 import isBrowser from "./is-browser";
-import isDark from "./is-dark";
 import loadCss from "./load-css";
 import restoreScrollPosition from "./restore-scroll-position";
 import saveScrollPosition from "./save-scroll-position";
@@ -9,9 +7,7 @@ import share from "./share";
 
 export {
   canShare,
-  dataBsTheme,
   isBrowser,
-  isDark,
   loadCss,
   restoreScrollPosition,
   saveScrollPosition,

src/shared/utils/browser/is-dark.ts

@@ -1,7 +0,0 @@
-import isBrowser from "./is-browser";
-
-export default function isDark() {
-  return (
-    isBrowser() && window.matchMedia("(prefers-color-scheme: dark)").matches
-  );
-}