Feature: Option to view profile pictures in comments

src/features/labels/links/PersonLink.tsx

@@ -6,10 +6,14 @@ import { Person } from "lemmy-js-client";
 import Handle from "../Handle";
 import { StyledLink, hideCss } from "./shared";
 import { useAppSelector } from "../../../store";
-import { OInstanceUrlDisplayMode } from "../../../services/db";
+import {
+  OInstanceUrlDisplayMode,
+  OUserAvatarDisplayMode,
+} from "../../../services/db";
 import AgeBadge from "./AgeBadge";
 import { useContext } from "react";
 import { ShareImageContext } from "../../share/asImage/ShareAsImage";
+import ItemIcon from "../img/ItemIcon";
 
 const Prefix = styled.span`
   font-weight: normal;
@@ -70,6 +74,11 @@ export default function PersonLink({
       (state) => state.settings.appearance.general.userInstanceUrlDisplay,
     ) === OInstanceUrlDisplayMode.WhenRemote;
 
+  const userAvatarDisplay =
+    useAppSelector(
+      (state) => state.settings.appearance.general.userAvatarDisplay,
+    ) === OUserAvatarDisplayMode.InComments;
+
   if (isAdmin) color = "var(--ion-color-danger)";
   else if (distinguished) color = "var(--ion-color-success)";
   else if (opId && person.id === opId) color = "var(--ion-color-primary-fixed)";
@@ -86,7 +95,18 @@ export default function PersonLink({
         <>
           <Prefix>{prefix}</Prefix>{" "}
         </>
-      ) : undefined}
+      ) : (
+        userAvatarDisplay && (
+          <ItemIcon
+            item={person}
+            size={24}
+            css={css`
+              margin-right: 0.4rem;
+              vertical-align: middle;
+            `}
+          />
+        )
+      )}
       <Handle
         item={person}
         showInstanceWhenRemote={showInstanceWhenRemote || forceInstanceUrl}

src/features/settings/appearance/posts/AvatarDisplay.tsx

@@ -0,0 +1,32 @@
+import { setUserAvatarDisplay } from "../../settingsSlice";
+import { OUserAvatarDisplayMode } from "../../../../services/db";
+import { useAppDispatch, useAppSelector } from "../../../../store";
+import { IonToggle } from "@ionic/react";
+import { InsetIonItem } from "../../shared/formatting";
+
+export default function AvatarDisplay() {
+  const dispatch = useAppDispatch();
+
+  const userAvatarDisplay = useAppSelector(
+    (state) => state.settings.appearance.general.userAvatarDisplay,
+  );
+
+  return (
+    <InsetIonItem>
+      <IonToggle
+        checked={userAvatarDisplay === OUserAvatarDisplayMode.InComments}
+        onIonChange={(e) =>
+          dispatch(
+            setUserAvatarDisplay(
+              e.detail.checked
+                ? OUserAvatarDisplayMode.InComments
+                : OUserAvatarDisplayMode.Never,
+            ),
+          )
+        }
+      >
+        Show avatars in comments
+      </IonToggle>
+    </InsetIonItem>
+  );
+}

src/features/settings/appearance/posts/Posts.tsx

@@ -2,6 +2,7 @@ import { IonLabel, IonList } from "@ionic/react";
 import { ListHeader } from "../../shared/formatting";
 import BlurNsfw from "./BlurNsfw";
 import PostSize from "./PostSize";
+import AvatarDisplay from "./AvatarDisplay";
 
 export default function Posts() {
   return (
@@ -12,6 +13,7 @@ export default function Posts() {
       <IonList inset>
         <PostSize />
         <BlurNsfw />
+        <AvatarDisplay />
       </IonList>
     </>
   );

src/features/settings/settingsSlice.tsx

@@ -36,6 +36,8 @@ import {
   ODefaultFeedType,
   TapToCollapseType,
   OTapToCollapseType,
+  UserAvatarDisplayMode,
+  OUserAvatarDisplayMode,
 } from "../../services/db";
 import { get, set } from "./storage";
 import { Mode } from "@ionic/core";
@@ -59,6 +61,7 @@ interface SettingsState {
     };
     general: {
       userInstanceUrlDisplay: InstanceUrlDisplayMode;
+      userAvatarDisplay: UserAvatarDisplayMode;
       profileLabel: ProfileLabelType;
     };
     posts: {
@@ -136,6 +139,7 @@ const initialState: SettingsState = {
     },
     general: {
       userInstanceUrlDisplay: OInstanceUrlDisplayMode.Never,
+      userAvatarDisplay: OUserAvatarDisplayMode.Never,
       profileLabel: OProfileLabelType.Instance,
     },
     posts: {
@@ -248,6 +252,10 @@ export const appearanceSlice = createSlice({
       state.appearance.general.userInstanceUrlDisplay = action.payload;
       db.setSetting("user_instance_url_display", action.payload);
     },
+    setUserAvatarDisplay(state, action: PayloadAction<UserAvatarDisplayMode>) {
+      state.appearance.general.userAvatarDisplay = action.payload;
+      db.setSetting("user_avatar_display", action.payload);
+    },
     setProfileLabel(state, action: PayloadAction<ProfileLabelType>) {
       state.appearance.general.profileLabel = action.payload;
       db.setSetting("profile_label", action.payload);
@@ -509,6 +517,7 @@ export const fetchSettingsFromDatabase = createAsyncThunk<SettingsState>(
       const user_instance_url_display = await db.getSetting(
         "user_instance_url_display",
       );
+      const user_avatar_display = await db.getSetting("user_avatar_display");
       const profile_label = await db.getSetting("profile_label");
       const post_appearance_type = await db.getSetting("post_appearance_type");
       const blur_nsfw = await db.getSetting("blur_nsfw");
@@ -560,6 +569,9 @@ export const fetchSettingsFromDatabase = createAsyncThunk<SettingsState>(
             userInstanceUrlDisplay:
               user_instance_url_display ??
               initialState.appearance.general.userInstanceUrlDisplay,
+            userAvatarDisplay:
+              user_avatar_display ??
+              initialState.appearance.general.userAvatarDisplay,
             profileLabel:
               profile_label ?? initialState.appearance.general.profileLabel,
           },
@@ -660,6 +672,7 @@ export const {
   setFontSizeMultiplier,
   setUseSystemFontSize,
   setUserInstanceUrlDisplay,
+  setUserAvatarDisplay,
   setProfileLabel,
   setCommentsCollapsed,
   setTapToCollapse,

src/services/db.ts

@@ -98,6 +98,14 @@ export const OInstanceUrlDisplayMode = {
 export type InstanceUrlDisplayMode =
   (typeof OInstanceUrlDisplayMode)[keyof typeof OInstanceUrlDisplayMode];
 
+export const OUserAvatarDisplayMode = {
+  InComments: "in-comments",
+  Never: "never",
+} as const;
+
+export type UserAvatarDisplayMode =
+  (typeof OUserAvatarDisplayMode)[keyof typeof OUserAvatarDisplayMode];
+
 export const OVoteDisplayMode = {
   /**
    * Show upvotes and downvotes separately
@@ -250,6 +258,7 @@ export type SwipeActions = Record<SwipeDirection, SwipeAction>;
 export type SettingValueTypes = {
   collapse_comment_threads: CommentThreadCollapse;
   user_instance_url_display: InstanceUrlDisplayMode;
+  user_avatar_display: UserAvatarDisplayMode;
   vote_display_mode: VoteDisplayMode;
   profile_label: ProfileLabelType;
   post_appearance_type: PostAppearanceType;