diff --git a/src/features/post/inFeed/compact/CompactPost.tsx b/src/features/post/inFeed/compact/CompactPost.tsx index 0a04533da9..1d897eaeb9 100644 --- a/src/features/post/inFeed/compact/CompactPost.tsx +++ b/src/features/post/inFeed/compact/CompactPost.tsx @@ -50,8 +50,9 @@ const Content = styled.div` flex: 1; `; -const Title = styled.span<{ isRead: boolean }>` +const Title = styled.span<{ isRead: boolean; isBold: boolean }>` font-size: 0.9375em; + font-weight: ${({ isBold }) => (isBold ? "bold" : "normal")}; ${({ isRead }) => isRead && @@ -144,6 +145,10 @@ export default function CompactPost({ (state) => state.settings.appearance.compact.showVotingButtons, ); + const boldTitles = useAppSelector( + (state) => state.settings.appearance.posts.boldTitles, + ); + const hasBeenRead: boolean = useAppSelector((state) => state.post.postReadById[post.post.id]) || post.read; @@ -166,7 +171,7 @@ export default function CompactPost({ /> )} - + <Title isRead={hasBeenRead} isBold={boldTitles}> <InlineMarkdown>{post.post.name}</InlineMarkdown>{" "} {nsfw && <Nsfw />} diff --git a/src/features/post/inFeed/large/LargePost.tsx b/src/features/post/inFeed/large/LargePost.tsx index ee8ac13e79..42de6fd96d 100644 --- a/src/features/post/inFeed/large/LargePost.tsx +++ b/src/features/post/inFeed/large/LargePost.tsx @@ -36,7 +36,9 @@ const Container = styled.div` ${maxWidthCss} `; -const Title = styled.div<{ isRead: boolean }>` +const Title = styled.div<{ isRead: boolean; isBold: boolean }>` + font-weight: ${({ isBold }) => (isBold ? "bold" : "normal")}; + ${({ isRead }) => isRead && css` @@ -119,8 +121,8 @@ export default function LargePost({ () => (post.post.body ? findLoneImage(post.post.body) : undefined), [post], ); - const blurNsfw = useAppSelector( - (state) => state.settings.appearance.posts.blurNsfw, + const { blurNsfw, boldTitles } = useAppSelector( + (state) => state.settings.appearance.posts, ); function renderPostBody() { @@ -168,7 +170,7 @@ export default function LargePost({ - + <Title isRead={hasBeenRead} isBold={boldTitles}> <InlineMarkdown>{post.post.name}</InlineMarkdown>{" "} {isNsfw(post) && <Nsfw />} diff --git a/src/features/settings/appearance/posts/Posts.tsx b/src/features/settings/appearance/posts/Posts.tsx index 6c5262209e..0463883c39 100644 --- a/src/features/settings/appearance/posts/Posts.tsx +++ b/src/features/settings/appearance/posts/Posts.tsx @@ -1,9 +1,18 @@ -import { IonLabel, IonList } from "@ionic/react"; +import { IonLabel, IonList, IonToggle } from "@ionic/react"; +import { InsetIonItem } from "../../../user/Profile"; import { ListHeader } from "../../shared/formatting"; import BlurNsfw from "./BlurNsfw"; import PostSize from "./PostSize"; +import { useAppDispatch, useAppSelector } from "../../../../store"; +import { setBoldTitles } from "../../settingsSlice"; export default function Posts() { + const dispatch = useAppDispatch(); + + const { boldTitles } = useAppSelector( + (state) => state.settings.appearance.posts, + ); + return ( <> @@ -12,6 +21,17 @@ export default function Posts() { + + + + dispatch(setBoldTitles(e.detail.checked ? true : false)) + } + > + Bold Titles + + ); diff --git a/src/features/settings/settingsSlice.tsx b/src/features/settings/settingsSlice.tsx index 9eb93a75e0..2bbb86a843 100644 --- a/src/features/settings/settingsSlice.tsx +++ b/src/features/settings/settingsSlice.tsx @@ -64,6 +64,7 @@ interface SettingsState { posts: { blurNsfw: PostBlurNsfwType; type: PostAppearanceType; + boldTitles: boolean; }; compact: { thumbnailsPosition: CompactThumbnailPositionType; @@ -141,6 +142,7 @@ const initialState: SettingsState = { posts: { blurNsfw: OPostBlurNsfw.InFeed, type: OPostAppearanceType.Large, + boldTitles: false, }, compact: { thumbnailsPosition: OCompactThumbnailPositionType.Left, @@ -291,6 +293,10 @@ export const appearanceSlice = createSlice({ state.appearance.posts.blurNsfw = action.payload; // Per user setting is updated in StoreProvider }, + setBoldTitles(state, action: PayloadAction) { + state.appearance.posts.boldTitles = action.payload; + db.setSetting("bold_titles", action.payload); + }, setFilteredKeywords(state, action: PayloadAction) { state.blocks.keywords = action.payload; // Per user setting is updated in StoreProvider @@ -512,6 +518,7 @@ export const fetchSettingsFromDatabase = createAsyncThunk( 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"); + const bold_titles = await db.getSetting("bold_titles"); const compact_thumbnail_position_type = await db.getSetting( "compact_thumbnail_position_type", ); @@ -566,6 +573,7 @@ export const fetchSettingsFromDatabase = createAsyncThunk( posts: { type: post_appearance_type ?? initialState.appearance.posts.type, blurNsfw: blur_nsfw ?? initialState.appearance.posts.blurNsfw, + boldTitles: bold_titles ?? initialState.appearance.posts.boldTitles, }, compact: { thumbnailsPosition: @@ -695,6 +703,7 @@ export const { setPureBlack, setDefaultFeed, setNoSubscribedInFeed, + setBoldTitles, } = appearanceSlice.actions; export default appearanceSlice.reducer; diff --git a/src/services/db.ts b/src/services/db.ts index 2be31cc120..8bda9cd7e2 100644 --- a/src/services/db.ts +++ b/src/services/db.ts @@ -287,6 +287,7 @@ export type SettingValueTypes = { default_post_sort: SortType; default_post_sort_by_feed: SortType; remember_community_sort: boolean; + bold_titles: boolean; }; export interface ISettingItem {