From 2cc4d35a9a8e0523cfce7f4db1961547627ead15 Mon Sep 17 00:00:00 2001 From: CmdrKeen <0xCmdrKeen@pm.me> Date: Sun, 24 Dec 2023 18:03:09 -0800 Subject: [PATCH 1/3] Show user avatar in comments --- src/features/labels/links/PersonLink.tsx | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/src/features/labels/links/PersonLink.tsx b/src/features/labels/links/PersonLink.tsx index 9c27f4fd7b..299d44561c 100644 --- a/src/features/labels/links/PersonLink.tsx +++ b/src/features/labels/links/PersonLink.tsx @@ -10,6 +10,7 @@ import { OInstanceUrlDisplayMode } 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; @@ -86,7 +87,16 @@ export default function PersonLink({ <> {prefix}{" "} - ) : undefined} + ) : ( + + )} Date: Sun, 24 Dec 2023 18:14:32 -0800 Subject: [PATCH 2/3] Add a setting to make avatar display configurable --- src/features/labels/links/PersonLink.tsx | 28 ++++++++++++------ src/features/settings/appearance/General.tsx | 30 ++++++++++++++++++-- src/features/settings/settingsSlice.tsx | 13 +++++++++ src/services/db.ts | 9 ++++++ 4 files changed, 69 insertions(+), 11 deletions(-) diff --git a/src/features/labels/links/PersonLink.tsx b/src/features/labels/links/PersonLink.tsx index 299d44561c..7c8e68c83d 100644 --- a/src/features/labels/links/PersonLink.tsx +++ b/src/features/labels/links/PersonLink.tsx @@ -6,7 +6,10 @@ 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"; @@ -71,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)"; @@ -88,14 +96,16 @@ export default function PersonLink({ {prefix}{" "} ) : ( - + userAvatarDisplay && ( + + ) )} state.settings.appearance.general.userInstanceUrlDisplay, ); + const userAvatarDisplay = useAppSelector( + (state) => state.settings.appearance.general.userAvatarDisplay, + ); + return ( <> @@ -36,6 +46,22 @@ export default function GeneralAppearance() { Show user instance + + + dispatch( + setUserAvatarDisplay( + e.detail.checked + ? OUserAvatarDisplayMode.InComments + : OUserAvatarDisplayMode.Never, + ), + ) + } + > + Show user avatars + + ); 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; From 183785ec42560c78c0a72f4e5b0abd860e8560d9 Mon Sep 17 00:00:00 2001 From: CmdrKeen <0xCmdrKeen@pm.me> Date: Sun, 24 Dec 2023 18:29:31 -0800 Subject: [PATCH 3/3] Move avatar option to post appearance settings --- src/features/settings/appearance/General.tsx | 30 ++--------------- .../appearance/posts/AvatarDisplay.tsx | 32 +++++++++++++++++++ .../settings/appearance/posts/Posts.tsx | 2 ++ 3 files changed, 36 insertions(+), 28 deletions(-) create mode 100644 src/features/settings/appearance/posts/AvatarDisplay.tsx diff --git a/src/features/settings/appearance/General.tsx b/src/features/settings/appearance/General.tsx index 25bf1d769c..e27ddb215a 100644 --- a/src/features/settings/appearance/General.tsx +++ b/src/features/settings/appearance/General.tsx @@ -1,14 +1,8 @@ import { IonLabel, IonList, IonToggle } from "@ionic/react"; import { InsetIonItem } from "../../../pages/profile/ProfileFeedItemsPage"; import { useAppDispatch, useAppSelector } from "../../../store"; -import { - setUserAvatarDisplay, - setUserInstanceUrlDisplay, -} from "../settingsSlice"; -import { - OInstanceUrlDisplayMode, - OUserAvatarDisplayMode, -} from "../../../services/db"; +import { setUserInstanceUrlDisplay } from "../settingsSlice"; +import { OInstanceUrlDisplayMode } from "../../../services/db"; import { ListHeader } from "../shared/formatting"; export default function GeneralAppearance() { @@ -18,10 +12,6 @@ export default function GeneralAppearance() { (state) => state.settings.appearance.general.userInstanceUrlDisplay, ); - const userAvatarDisplay = useAppSelector( - (state) => state.settings.appearance.general.userAvatarDisplay, - ); - return ( <> @@ -46,22 +36,6 @@ export default function GeneralAppearance() { Show user instance - - - dispatch( - setUserAvatarDisplay( - e.detail.checked - ? OUserAvatarDisplayMode.InComments - : OUserAvatarDisplayMode.Never, - ), - ) - } - > - Show user avatars - - ); diff --git a/src/features/settings/appearance/posts/AvatarDisplay.tsx b/src/features/settings/appearance/posts/AvatarDisplay.tsx new file mode 100644 index 0000000000..850ce9f4fe --- /dev/null +++ b/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 ( + + + 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() { + );