diff --git a/src/features/labels/links/PersonLink.tsx b/src/features/labels/links/PersonLink.tsx
index 9c27f4fd7b..7c8e68c83d 100644
--- a/src/features/labels/links/PersonLink.tsx
+++ b/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}{" "}
>
- ) : undefined}
+ ) : (
+ userAvatarDisplay && (
+
+ )
+ )}
state.settings.appearance.general.userAvatarDisplay,
+ );
+
+ return (
+
+
+ dispatch(
+ setUserAvatarDisplay(
+ e.detail.checked
+ ? OUserAvatarDisplayMode.InComments
+ : OUserAvatarDisplayMode.Never,
+ ),
+ )
+ }
+ >
+ Show avatars in comments
+
+
+ );
+}
diff --git a/src/features/settings/appearance/posts/Posts.tsx b/src/features/settings/appearance/posts/Posts.tsx
index 6c5262209e..517ce9f99b 100644
--- a/src/features/settings/appearance/posts/Posts.tsx
+++ b/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() {
+
>
);
diff --git a/src/features/settings/settingsSlice.tsx b/src/features/settings/settingsSlice.tsx
index 9eb93a75e0..81dca1266a 100644
--- a/src/features/settings/settingsSlice.tsx
+++ b/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) {
+ state.appearance.general.userAvatarDisplay = action.payload;
+ db.setSetting("user_avatar_display", action.payload);
+ },
setProfileLabel(state, action: PayloadAction) {
state.appearance.general.profileLabel = action.payload;
db.setSetting("profile_label", action.payload);
@@ -509,6 +517,7 @@ export const fetchSettingsFromDatabase = createAsyncThunk(
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(
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,
diff --git a/src/services/db.ts b/src/services/db.ts
index 2be31cc120..dcdda56ee4 100644
--- a/src/services/db.ts
+++ b/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;
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;