Add option to always show author in feed (#1454)

Resolves #1220
aeharding · May 3, 2024 · 2423a68 · 2423a68
1 parent 329bfab
commit 2423a68
Show file tree

Hide file tree

Showing 6 changed files with 70 additions and 12 deletions.
diff --git a/src/features/post/inFeed/compact/CompactPost.tsx b/src/features/post/inFeed/compact/CompactPost.tsx
@@ -143,10 +143,12 @@ const Domain = styled.span`
 `;
 
 export default function CompactPost({ post }: PostProps) {
+  const alwaysShowAuthor = useAppSelector(
+    (state) => state.settings.appearance.posts.alwaysShowAuthor,
+  );
   const compactThumbnailPositionType = useAppSelector(
     (state) => state.settings.appearance.compact.thumbnailsPosition,
   );
-
   const compactShowVotingButtons = useAppSelector(
     (state) => state.settings.appearance.compact.showVotingButtons,
   );
@@ -210,11 +212,19 @@ export default function CompactPost({ post }: PostProps) {
                     prefix="by"
                   />
                 ) : (
-                  <CommunityLink
-                    community={post.community}
-                    subscribed={post.subscribed}
-                    tinyIcon
-                  />
+                  <>
+                    <CommunityLink
+                      community={post.community}
+                      subscribed={post.subscribed}
+                      tinyIcon
+                    />
+                    {alwaysShowAuthor && (
+                      <>
+                        {" "}
+                        <PersonLink person={post.creator} prefix="by" />
+                      </>
+                    )}
+                  </>
                 )}
               </From>
               <ActionsContainer>

diff --git a/src/features/post/inFeed/large/LargePost.tsx b/src/features/post/inFeed/large/LargePost.tsx
@@ -79,6 +79,9 @@ export default function LargePost({ post }: PostProps) {
   const showVotingButtons = useAppSelector(
     (state) => state.settings.appearance.large.showVotingButtons,
   );
+  const alwaysShowAuthor = useAppSelector(
+    (state) => state.settings.appearance.posts.alwaysShowAuthor,
+  );
   const hasBeenRead =
     useAppSelector((state) => state.post.postReadById[post.post.id]) ||
     post.read;
@@ -123,12 +126,22 @@ export default function LargePost({ post }: PostProps) {
                   disableInstanceClick
                 />
               ) : (
-                <CommunityLink
-                  community={post.community}
-                  showInstanceWhenRemote
-                  subscribed={post.subscribed}
-                  disableInstanceClick
-                />
+                <>
+                  <CommunityLink
+                    community={post.community}
+                    subscribed={post.subscribed}
+                    disableInstanceClick
+                    showInstanceWhenRemote={
+                      !showVotingButtons || !alwaysShowAuthor
+                    }
+                  />
+                  {alwaysShowAuthor && (
+                    <>
+                      {" "}
+                      <PersonLink person={post.creator} prefix="by" />
+                    </>
+                  )}
+                </>
               )}
             </CommunityName>
 

diff --git a/src/features/settings/appearance/posts/AlwaysShowAuthor.tsx b/src/features/settings/appearance/posts/AlwaysShowAuthor.tsx
@@ -0,0 +1,21 @@
+import { useAppDispatch, useAppSelector } from "../../../../store";
+import { setAlwaysShowAuthor } from "../../settingsSlice";
+import { IonItem, IonToggle } from "@ionic/react";
+
+export default function AlwaysShowAuthor() {
+  const dispatch = useAppDispatch();
+  const alwaysShowAuthor = useAppSelector(
+    (state) => state.settings.appearance.posts.alwaysShowAuthor,
+  );
+
+  return (
+    <IonItem>
+      <IonToggle
+        checked={alwaysShowAuthor}
+        onIonChange={(e) => dispatch(setAlwaysShowAuthor(e.detail.checked))}
+      >
+        Always Show Author
+      </IonToggle>
+    </IonItem>
+  );
+}
diff --git a/src/features/settings/appearance/posts/Posts.tsx b/src/features/settings/appearance/posts/Posts.tsx
@@ -5,6 +5,7 @@ import PostSize from "./PostSize";
 import EmbedCrossposts from "./EmbedCrossposts";
 import ShowCommunityIcons from "./ShowCommunityIcons";
 import EmbedExternalMedia from "./EmbedExternalMedia";
+import AlwaysShowAuthor from "./AlwaysShowAuthor";
 
 export default function Posts() {
   return (
@@ -18,6 +19,7 @@ export default function Posts() {
         <EmbedCrossposts />
         <EmbedExternalMedia />
         <ShowCommunityIcons />
+        <AlwaysShowAuthor />
       </IonList>
     </>
   );

diff --git a/src/features/settings/settingsSlice.tsx b/src/features/settings/settingsSlice.tsx
@@ -74,6 +74,7 @@ interface SettingsState {
       embedCrossposts: boolean;
       showCommunityIcons: boolean;
       embedExternalMedia: boolean;
+      alwaysShowAuthor: boolean;
     };
     large: {
       showVotingButtons: boolean;
@@ -169,6 +170,7 @@ export const initialState: SettingsState = {
       embedCrossposts: true,
       showCommunityIcons: true,
       embedExternalMedia: true,
+      alwaysShowAuthor: false,
     },
     large: {
       showVotingButtons: true,
@@ -375,6 +377,10 @@ export const appearanceSlice = createSlice({
       state.appearance.posts.embedExternalMedia = action.payload;
       db.setSetting("embed_external_media", action.payload);
     },
+    setAlwaysShowAuthor(state, action: PayloadAction<boolean>) {
+      state.appearance.posts.alwaysShowAuthor = action.payload;
+      db.setSetting("always_show_author", action.payload);
+    },
     setAlwaysUseReaderMode(state, action: PayloadAction<boolean>) {
       state.general.safari.alwaysUseReaderMode = action.payload;
       db.setSetting("always_use_reader_mode", action.payload);
@@ -686,6 +692,7 @@ export const fetchSettingsFromDatabase = createAsyncThunk<SettingsState>(
         "no_subscribed_in_feed",
       );
       const embed_external_media = await db.getSetting("embed_external_media");
+      const always_show_author = await db.getSetting("always_show_author");
       const always_use_reader_mode = await db.getSetting(
         "always_use_reader_mode",
       );
@@ -726,6 +733,9 @@ export const fetchSettingsFromDatabase = createAsyncThunk<SettingsState>(
             embedExternalMedia:
               embed_external_media ??
               initialState.appearance.posts.embedExternalMedia,
+            alwaysShowAuthor:
+              always_show_author ??
+              initialState.appearance.posts.alwaysShowAuthor,
           },
           large: {
             showVotingButtons:
@@ -893,6 +903,7 @@ export const {
   setDefaultFeed,
   setNoSubscribedInFeed,
   setEmbedExternalMedia,
+  setAlwaysShowAuthor,
   setAlwaysUseReaderMode,
   setShowCollapsedComment,
   setQuickSwitchDarkMode,

diff --git a/src/services/db.ts b/src/services/db.ts
@@ -332,6 +332,7 @@ export type SettingValueTypes = {
   has_presented_block_nsfw_tip: boolean;
   no_subscribed_in_feed: boolean;
   embed_external_media: boolean;
+  always_show_author: boolean;
   always_use_reader_mode: boolean;
   infinite_scrolling: boolean;
   upvote_on_save: boolean;