Merge branch 'main' into darkly-tweak

src/client/index.tsx

@@ -2,7 +2,7 @@ import { initializeSite, setupDateFns } from "@utils/app";
 import { hydrate } from "inferno-hydrate";
 import { Router } from "inferno-router";
 import { App } from "../shared/components/app/app";
-import { HistoryService } from "../shared/services";
+import { HistoryService, UserService } from "../shared/services";
 
 import "bootstrap/js/dist/collapse";
 import "bootstrap/js/dist/dropdown";
@@ -14,7 +14,7 @@ async function startClient() {
 
   const wrapper = (
     <Router history={HistoryService.history}>
-      <App />
+      <App user={UserService.Instance.myUserInfo} />
     </Router>
   );
 

src/server/handlers/catch-all-handler.tsx

@@ -114,7 +114,7 @@ export default async (req: Request, res: Response) => {
 
     const wrapper = (
       <StaticRouter location={url} context={isoData}>
-        <App />
+        <App user={site?.my_user} />
       </StaticRouter>
     );
 

src/shared/components/app/app.tsx

@@ -3,6 +3,7 @@ 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 { MyUserInfo } from "lemmy-js-client";
 import { IsoDataOptionalSite } from "../../interfaces";
 import { routes } from "../../routes";
 import { FirstLoadService, I18NextService, UserService } from "../../services";
@@ -14,10 +15,14 @@ import { Navbar } from "./navbar";
 import "./styles.scss";
 import { Theme } from "./theme";
 
-export class App extends Component<any, any> {
+interface AppProps {
+  user?: MyUserInfo;
+}
+
+export class App extends Component<AppProps, any> {
   private isoData: IsoDataOptionalSite = setIsoData(this.context);
   private readonly mainContentRef: RefObject<HTMLElement>;
-  constructor(props: any, context: any) {
+  constructor(props: AppProps, context: any) {
     super(props, context);
     this.mainContentRef = createRef();
   }
@@ -29,10 +34,6 @@ export class App extends Component<any, any> {
 
   user = UserService.Instance.myUserInfo;
 
-  componentDidMount() {
-    this.setState({ bsTheme: dataBsTheme(this.user) });
-  }
-
   render() {
     const siteRes = this.isoData.site_res;
     const siteView = siteRes?.site_view;
@@ -43,7 +44,7 @@ export class App extends Component<any, any> {
           <div
             id="app"
             className="lemmy-site"
-            data-bs-theme={this.state?.bsTheme}
+            data-bs-theme={dataBsTheme(this.props.user)}
           >
             <button
               type="button"

src/shared/components/common/user-badges.tsx

@@ -53,7 +53,7 @@ export class UserBadges extends Component<UserBadgesProps> {
               {getRoleLabelPill({
                 label: I18NextService.i18n.t("banned"),
                 tooltip: I18NextService.i18n.t("banned"),
-                classes: "text-bg-danger",
+                classes: "text-danger border border-danger",
                 shrink: false,
               })}
             </span>
@@ -63,7 +63,7 @@ export class UserBadges extends Component<UserBadgesProps> {
               {getRoleLabelPill({
                 label: I18NextService.i18n.t("deleted"),
                 tooltip: I18NextService.i18n.t("deleted"),
-                classes: "text-bg-danger",
+                classes: "text-danger border border-danger",
                 shrink: false,
               })}
             </span>
@@ -74,7 +74,7 @@ export class UserBadges extends Component<UserBadgesProps> {
               {getRoleLabelPill({
                 label: I18NextService.i18n.t("op").toUpperCase(),
                 tooltip: I18NextService.i18n.t("creator"),
-                classes: "text-bg-info",
+                classes: "text-info border border-info",
                 shrink: false,
               })}
             </span>
@@ -84,7 +84,7 @@ export class UserBadges extends Component<UserBadgesProps> {
               {getRoleLabelPill({
                 label: I18NextService.i18n.t("mod"),
                 tooltip: I18NextService.i18n.t("mod"),
-                classes: "text-bg-primary",
+                classes: "text-primary border border-primary",
               })}
             </span>
           )}
@@ -93,7 +93,7 @@ export class UserBadges extends Component<UserBadgesProps> {
               {getRoleLabelPill({
                 label: I18NextService.i18n.t("admin"),
                 tooltip: I18NextService.i18n.t("admin"),
-                classes: "text-bg-danger",
+                classes: "text-danger border border-danger",
               })}
             </span>
           )}

src/shared/components/home/home.tsx

@@ -114,7 +114,7 @@ interface HomeState {
 }
 
 interface HomeProps {
-  listingType: ListingType;
+  listingType?: ListingType;
   dataType: DataType;
   sort: SortType;
   page: number;
@@ -163,12 +163,12 @@ function getDataTypeFromQuery(type?: string): DataType {
   return type ? DataType[type] : DataType.Post;
 }
 
-function getListingTypeFromQuery(type?: string): ListingType {
+function getListingTypeFromQuery(type?: string): ListingType | undefined {
   const myListingType =
     UserService.Instance.myUserInfo?.local_user_view?.local_user
       ?.default_listing_type;
 
-  return (type ? (type as ListingType) : myListingType) ?? "Local";
+  return type ? (type as ListingType) : myListingType;
 }
 
 function getSortTypeFromQuery(type?: string): SortType {
@@ -311,11 +311,12 @@ export class Home extends Component<any, HomeState> {
     client,
     auth,
     query: { dataType: urlDataType, listingType, page: urlPage, sort: urlSort },
+    site,
   }: InitialFetchRequest<QueryParams<HomeProps>>): Promise<HomeData> {
     const dataType = getDataTypeFromQuery(urlDataType);
-
+    const type_ =
-    // TODO figure out auth default_listingType, default_sort_type
+      getListingTypeFromQuery(listingType) ??
-    const type_ = getListingTypeFromQuery(listingType);
+      site.site_view.local_site.default_post_listing_type;
     const sort = getSortTypeFromQuery(urlSort);
 
     const page = urlPage ? Number(urlPage) : 1;
@@ -761,7 +762,10 @@ export class Home extends Component<any, HomeState> {
         </div>
         <div className="col-auto">
           <ListingTypeSelect
-            type_={listingType}
+            type_={
+              listingType ??
+              this.state.siteRes.site_view.local_site.default_post_listing_type
+            }
             showLocal={showLocal(this.isoData)}
             showSubscribed
             onChange={this.handleListingTypeChange}
@@ -770,7 +774,12 @@ export class Home extends Component<any, HomeState> {
         <div className="col-auto">
           <SortSelect sort={sort} onChange={this.handleSortChange} />
         </div>
-        <div className="col-auto ps-0">{getRss(listingType)}</div>
+        <div className="col-auto ps-0">
+          {getRss(
+            listingType ??
+              this.state.siteRes.site_view.local_site.default_post_listing_type
+          )}
+        </div>
       </div>
     );
   }

src/shared/components/home/login.tsx

@@ -175,7 +175,9 @@ export class Login extends Component<any, State> {
         }
 
         case "success": {
-          UserService.Instance.login(loginRes.data);
+          UserService.Instance.login({
+            res: loginRes.data,
+          });
           const site = await HttpService.client.getSite({
             auth: myAuth(),
           });

src/shared/components/home/setup.tsx

@@ -206,7 +206,7 @@ export class Setup extends Component<any, State> {
       if (i.state.registerRes.state == "success") {
         const data = i.state.registerRes.data;
 
-        UserService.Instance.login(data);
+        UserService.Instance.login({ res: data });
         i.setState({ doneRegisteringUser: true });
       }
     }

src/shared/components/home/signup.tsx

@@ -469,7 +469,9 @@ export class Signup extends Component<any, State> {
 
           // Only log them in if a jwt was set
           if (data.jwt) {
-            UserService.Instance.login(data);
+            UserService.Instance.login({
+              res: data,
+            });
 
             const site = await HttpService.client.getSite({ auth: myAuth() });
 

src/shared/components/person/password-change.tsx

@@ -135,7 +135,9 @@ export class PasswordChange extends Component<any, State> {
 
       if (i.state.passwordChangeRes.state === "success") {
         const data = i.state.passwordChangeRes.data;
-        UserService.Instance.login(data);
+        UserService.Instance.login({
+          res: data,
+        });
 
         const site = await HttpService.client.getSite({ auth: myAuth() });
         if (site.state === "success") {

src/shared/components/person/settings.tsx

@@ -1175,8 +1175,12 @@ export class Settings extends Component<any, SettingsState> {
       ...i.state.saveUserSettingsForm,
       auth: myAuthRequired(),
     });
+
     if (saveRes.state === "success") {
-      UserService.Instance.login(saveRes.data);
+      UserService.Instance.login({
+        res: saveRes.data,
+        showToast: false,
+      });
       toast(I18NextService.i18n.t("saved"));
       window.scrollTo(0, 0);
     }
@@ -1198,7 +1202,10 @@ export class Settings extends Component<any, SettingsState> {
         auth: myAuthRequired(),
       });
       if (changePasswordRes.state === "success") {
-        UserService.Instance.login(changePasswordRes.data);
+        UserService.Instance.login({
+          res: changePasswordRes.data,
+          showToast: false,
+        });
         window.scrollTo(0, 0);
         toast(I18NextService.i18n.t("password_changed"));
       }

src/shared/services/UserService.ts

@@ -26,12 +26,18 @@ export class UserService {
     this.#setJwtInfo();
   }
 
-  public login(res: LoginResponse) {
+  public login({
+    res,
+    showToast = true,
+  }: {
+    res: LoginResponse;
+    showToast?: boolean;
+  }) {
     const expires = new Date();
     expires.setDate(expires.getDate() + 365);
 
     if (isBrowser() && res.jwt) {
-      toast(I18NextService.i18n.t("logged_in"));
+      showToast && toast(I18NextService.i18n.t("logged_in"));
       setAuthCookie(res.jwt);
       this.#setJwtInfo();
     }

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

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