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({
/>
)}
-
+
{post.post.name}{" "}
{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({
-
+
{post.post.name}{" "}
{isNsfw(post) && }
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 {