Fix blur and adjust user settings

src/shared/components/common/pictrs-image.tsx

@@ -1,9 +1,9 @@
 import classNames from "classnames";
 import { Component } from "inferno";
 
-import { UserService } from "../../services";
 import { setIsoData } from "@utils/app";
 import { IsoDataOptionalSite } from "shared/interfaces";
+import { shouldBlurNsfw } from "@utils/helpers";
 
 const iconThumbnailSize = 96;
 const thumbnailSize = 256;
@@ -31,10 +31,7 @@ export class PictrsImage extends Component<PictrsImageProps, any> {
     const { src, icon, iconOverlay, banner, thumbnail, nsfw, pushup, cardTop } =
       this.props;
 
-    const blurImage =
+    const blurImage = nsfw && shouldBlurNsfw(this.isoData.site_res);
-      nsfw &&
-      (!this.isoData.site_res?.site_view.site.content_warning ||
-        UserService.Instance.myUserInfo?.local_user_view.local_user.blur_nsfw);
 
     return (
       <picture>

src/shared/components/person/settings.tsx

@@ -898,6 +898,8 @@ export class Settings extends Component<SettingsRouteProps, SettingsState> {
               />
             </div>
           </form>
+          {this.state.siteRes.site_view.local_site.enable_nsfw && (
+            <>
               <div className="input-group mb-3">
                 <div className="form-check">
                   <input
@@ -918,7 +920,11 @@ export class Settings extends Component<SettingsRouteProps, SettingsState> {
                     className="form-check-input"
                     id="user-blur-nsfw"
                     type="checkbox"
-                checked={this.state.saveUserSettingsForm.blur_nsfw}
+                    disabled={!this.state.saveUserSettingsForm.show_nsfw}
+                    checked={
+                      this.state.saveUserSettingsForm.blur_nsfw &&
+                      this.state.saveUserSettingsForm.show_nsfw
+                    }
                     onChange={linkEvent(this, this.handleBlurNsfwChange)}
                   />
                   <label className="form-check-label" htmlFor="user-blur-nsfw">
@@ -926,6 +932,8 @@ export class Settings extends Component<SettingsRouteProps, SettingsState> {
                   </label>
                 </div>
               </div>
+            </>
+          )}
           <div className="input-group mb-3">
             <div className="form-check">
               <input

src/shared/utils/helpers/index.ts

@@ -25,6 +25,7 @@ import validTitle from "./valid-title";
 import validURL from "./valid-url";
 import dedupByProperty from "./dedup-by-property";
 import getApubName from "./apub-name";
+import shouldBlurNsfw from "./should-blur-nsfw";
 
 export {
   capitalizeFirstLetter,
@@ -54,4 +55,5 @@ export {
   validURL,
   dedupByProperty,
   getApubName,
+  shouldBlurNsfw,
 };

src/shared/utils/helpers/should-blur-nsfw.ts

@@ -0,0 +1,12 @@
+import { SiteResponse } from "lemmy-js-client";
+import { adultConsentLocalStorageKey } from "../../config";
+import { UserService } from "../../services";
+
+export default function shouldBlurNsfw(siteRes?: SiteResponse) {
+  return siteRes?.site_view.site.content_warning
+    ? !(
+        localStorage.getItem(adultConsentLocalStorageKey) ||
+        UserService.Instance.myUserInfo
+      )
+    : UserService.Instance.myUserInfo?.local_user_view.local_user.blur_nsfw;
+}