Add bold titles option to post appearance settings

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({
                 />
               </Aside>
             )}
-            <Title isRead={hasBeenRead}>
+            <Title isRead={hasBeenRead} isBold={boldTitles}>
               <InlineMarkdown>{post.post.name}</InlineMarkdown>{" "}
               {nsfw && <Nsfw />}
             </Title>

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({
       <Container>
         <ModeratableItemBannerOutlet />
 
-        <Title isRead={hasBeenRead}>
+        <Title isRead={hasBeenRead} isBold={boldTitles}>
           <InlineMarkdown>{post.post.name}</InlineMarkdown>{" "}
           {isNsfw(post) && <Nsfw />}
         </Title>

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 (
     <>
       <ListHeader>
@@ -12,6 +21,17 @@ export default function Posts() {
       <IonList inset>
         <PostSize />
         <BlurNsfw />
+
+        <InsetIonItem>
+          <IonToggle
+            checked={boldTitles}
+            onIonChange={(e) =>
+              dispatch(setBoldTitles(e.detail.checked ? true : false))
+            }
+          >
+            Bold Titles
+          </IonToggle>
+        </InsetIonItem>
       </IonList>
     </>
   );

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<boolean>) {
+      state.appearance.posts.boldTitles = action.payload;
+      db.setSetting("bold_titles", action.payload);
+    },
     setFilteredKeywords(state, action: PayloadAction<string[]>) {
       state.blocks.keywords = action.payload;
       // Per user setting is updated in StoreProvider
@@ -512,6 +518,7 @@ export const fetchSettingsFromDatabase = createAsyncThunk<SettingsState>(
       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<SettingsState>(
           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;

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<T extends keyof SettingValueTypes> {