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;