Refactor to unify selector creation for settings

src/features/settings/appearance/CompactSettings.tsx

@@ -6,7 +6,6 @@ import {
   IonActionSheet,
   IonToggle,
 } from "@ionic/react";
-import { ListHeader } from "./TextSize";
 import { InsetIonItem } from "../../user/Profile";
 import { useAppSelector, useAppDispatch } from "../../../store";
 import { useState } from "react";
@@ -17,6 +16,7 @@ import {
   CompactThumbnailPositionType,
 } from "../../../services/db";
 import { OverlayEventDetail } from "@ionic/react/dist/types/components/react-component-lib/interfaces";
+import { ListHeader } from "../shared/formatting";
 
 const BUTTONS: ActionSheetButton<CompactThumbnailPositionType>[] =
   Object.values(OCompactThumbnailPositionType).map(function (

src/features/settings/appearance/General.tsx

@@ -1,16 +1,9 @@
-import styled from "@emotion/styled";
 import { IonLabel, IonList, IonToggle } from "@ionic/react";
 import { InsetIonItem } from "../../../pages/profile/ProfileFeedItemsPage";
 import { useAppDispatch, useAppSelector } from "../../../store";
 import { setUserInstanceUrlDisplay } from "../settingsSlice";
 import { OInstanceUrlDisplayMode } from "../../../services/db";
-
-export const ListHeader = styled.div`
-  font-size: 0.8em;
-  margin: 32px 0 -8px 32px;
-  text-transform: uppercase;
-  color: var(--ion-color-medium);
-`;
+import { ListHeader } from "../shared/formatting";
 
 export default function GeneralAppearance() {
   const dispatch = useAppDispatch();

src/features/settings/appearance/TextSize.tsx

@@ -4,13 +4,7 @@ import { IonLabel, IonList, IonRange, IonToggle } from "@ionic/react";
 import { InsetIonItem } from "../../../pages/profile/ProfileFeedItemsPage";
 import { useAppDispatch, useAppSelector } from "../../../store";
 import { setFontSizeMultiplier, setUseSystemFontSize } from "../settingsSlice";
-
-export const ListHeader = styled.div`
-  font-size: 0.8em;
-  margin: 32px 0 -8px 32px;
-  text-transform: uppercase;
-  color: var(--ion-color-medium);
-`;
+import { ListHeader } from "../shared/formatting";
 
 const Range = styled(IonRange)`
   --bar-background: var(--ion-color-medium);

src/features/settings/appearance/Voting.tsx

@@ -1,62 +1,29 @@
-import { IonActionSheet, IonLabel, IonList } from "@ionic/react";
-import { InsetIonItem } from "../../../pages/profile/ProfileFeedItemsPage";
-import { useAppDispatch, useAppSelector } from "../../../store";
-import { startCase } from "lodash";
-import { useState } from "react";
-import {
-  ActionSheetButton,
-  IonActionSheetCustomEvent,
-  OverlayEventDetail,
-} from "@ionic/core";
-import { OVoteDisplayMode, VoteDisplayMode } from "../../../services/db";
-import { ListHeader } from "./TextSize";
+import { IonLabel, IonList } from "@ionic/react";
+import { useAppSelector } from "../../../store";
 import { setVoteDisplayMode } from "../settingsSlice";
-
-const BUTTONS: ActionSheetButton<VoteDisplayMode>[] = Object.values(
-  OVoteDisplayMode
-).map(function (voteDisplayMode) {
-  return {
-    text: startCase(voteDisplayMode),
-    data: voteDisplayMode,
-  } as ActionSheetButton<VoteDisplayMode>;
-});
+import { OVoteDisplayMode, VoteDisplayMode } from "../../../services/db";
+import SettingSelector from "../shared/SettingSelector";
+import { ListHeader } from "../shared/formatting";
 
 export default function CollapsedByDefault() {
-  const [open, setOpen] = useState(false);
-  const dispatch = useAppDispatch();
   const voteDisplayMode = useAppSelector(
     (state) => state.settings.appearance.voting.voteDisplayMode
   );
 
+  const Selector = SettingSelector<VoteDisplayMode>;
+
   return (
     <>
       <ListHeader>
         <IonLabel>Voting</IonLabel>
       </ListHeader>
       <IonList inset>
-        <InsetIonItem button onClick={() => setOpen(true)}>
-          <IonLabel>Vote Display Mode</IonLabel>
-          <IonLabel slot="end" color="medium">
-            {startCase(voteDisplayMode)}
-          </IonLabel>
-          <IonActionSheet
-            cssClass="left-align-buttons"
-            isOpen={open}
-            onDidDismiss={() => setOpen(false)}
-            onWillDismiss={(
-              e: IonActionSheetCustomEvent<OverlayEventDetail<VoteDisplayMode>>
-            ) => {
-              if (e.detail.data) {
-                dispatch(setVoteDisplayMode(e.detail.data));
-              }
-            }}
-            header="Post Size"
-            buttons={BUTTONS.map((b) => ({
-              ...b,
-              role: voteDisplayMode === b.data ? "selected" : undefined,
-            }))}
-          />
-        </InsetIonItem>
+        <Selector
+          title="Voting Display Mode"
+          selected={voteDisplayMode}
+          set_selected={setVoteDisplayMode}
+          options={OVoteDisplayMode}
+        />
       </IonList>
     </>
   );

src/features/settings/appearance/posts/Posts.tsx

@@ -1,5 +1,5 @@
 import { IonLabel, IonList } from "@ionic/react";
-import { ListHeader } from "../TextSize";
+import { ListHeader } from "../../shared/formatting";
 import BlurNsfw from "./BlurNsfw";
 import PostSize from "./PostSize";
 

src/features/settings/appearance/system/System.tsx

@@ -1,6 +1,6 @@
 import { IonLabel, IonList } from "@ionic/react";
 import DarkMode from "./DarkMode";
-import { ListHeader } from "../TextSize";
+import { ListHeader } from "../../shared/formatting";
 import DeviceMode from "./DeviceMode";
 import { useAppSelector } from "../../../../store";
 import UserDarkMode from "./UserDarkMode";

src/features/settings/appearance/system/UserDarkMode.tsx

@@ -1,15 +1,8 @@
-import styled from "@emotion/styled";
 import { IonLabel, IonList, IonRadio, IonRadioGroup } from "@ionic/react";
 import { InsetIonItem } from "../../../../pages/profile/ProfileFeedItemsPage";
 import { useAppDispatch, useAppSelector } from "../../../../store";
 import { setUserDarkMode } from "../../settingsSlice";
-
-const ListHeader = styled.div`
-  font-size: 0.8em;
-  margin: 32px 0 -8px 32px;
-  text-transform: uppercase;
-  color: var(--ion-color-medium);
-`;
+import { ListHeader } from "../../shared/formatting";
 
 export default function UserDarkMode() {
   const dispatch = useAppDispatch();

src/features/settings/blocks/BlockedCommunities.tsx

@@ -1,4 +1,3 @@
-import styled from "@emotion/styled";
 import {
   IonItemOption,
   IonItemOptions,
@@ -13,13 +12,7 @@ import { useState } from "react";
 import { getHandle } from "../../../helpers/lemmy";
 import { CommunityBlockView } from "lemmy-js-client";
 import { blockCommunity } from "../../community/communitySlice";
-
-export const ListHeader = styled.div`
-  font-size: 0.8em;
-  margin: 32px 0 -8px 32px;
-  text-transform: uppercase;
-  color: var(--ion-color-medium);
-`;
+import { ListHeader } from "../shared/formatting";
 
 export default function BlockedCommunities() {
   const dispatch = useAppDispatch();

src/features/settings/blocks/BlockedUsers.tsx

@@ -1,4 +1,3 @@
-import styled from "@emotion/styled";
 import {
   IonItemOption,
   IonItemOptions,
@@ -13,13 +12,7 @@ import { useState } from "react";
 import { getHandle } from "../../../helpers/lemmy";
 import { PersonBlockView } from "lemmy-js-client";
 import { blockUser } from "../../user/userSlice";
-
-export const ListHeader = styled.div`
-  font-size: 0.8em;
-  margin: 32px 0 -8px 32px;
-  text-transform: uppercase;
-  color: var(--ion-color-medium);
-`;
+import { ListHeader } from "../shared/formatting";
 
 export default function BlockedUsers() {
   const dispatch = useAppDispatch();

src/features/settings/blocks/FilterNsfw.tsx

@@ -1,16 +1,9 @@
-import styled from "@emotion/styled";
 import { IonLabel, IonList, IonLoading, IonToggle } from "@ionic/react";
 import { InsetIonItem } from "../../../pages/profile/ProfileFeedItemsPage";
 import { useAppDispatch, useAppSelector } from "../../../store";
 import { localUserSelector, showNsfw } from "../../auth/authSlice";
 import { useState } from "react";
-
-export const ListHeader = styled.div`
-  font-size: 0.8em;
-  margin: 32px 0 -8px 32px;
-  text-transform: uppercase;
-  color: var(--ion-color-medium);
-`;
+import { ListHeader } from "../shared/formatting";
 
 export default function FilterNsfw() {
   const dispatch = useAppDispatch();

src/features/settings/general/comments/CollapsedByDefault.tsx

@@ -1,4 +1,3 @@
-import styled from "@emotion/styled";
 import { IonLabel, IonToggle } from "@ionic/react";
 import { InsetIonItem } from "../../../../pages/profile/ProfileFeedItemsPage";
 import { useAppDispatch, useAppSelector } from "../../../../store";
@@ -7,13 +6,6 @@ import {
   setCommentsCollapsed,
 } from "../../settingsSlice";
 
-export const ListHeader = styled.div`
-  font-size: 0.8em;
-  margin: 32px 0 -8px 32px;
-  text-transform: uppercase;
-  color: var(--ion-color-medium);
-`;
-
 export default function CollapsedByDefault() {
   const dispatch = useAppDispatch();
   const { collapseCommentThreads } = useAppSelector(

src/features/settings/general/comments/Comments.tsx

@@ -1,8 +1,7 @@
 import { IonLabel, IonList } from "@ionic/react";
-import CollapsedByDefault, {
-  ListHeader,
-} from "../../general/comments/CollapsedByDefault";
+import CollapsedByDefault from "../../general/comments/CollapsedByDefault";
 import DefaultSort from "./DefaultSort";
+import { ListHeader } from "../../shared/formatting";
 
 export default function Comments() {
   return (

src/features/settings/general/posts/Posts.tsx

@@ -1,6 +1,6 @@
 import { IonLabel, IonList } from "@ionic/react";
-import { ListHeader } from "../comments/CollapsedByDefault";
 import { InsetIonItem } from "../../../user/Profile";
+import { ListHeader } from "../../shared/formatting";
 
 export default function Posts() {
   return (

src/features/settings/shared/SettingSelector.tsx

@@ -0,0 +1,65 @@
+import styled from "@emotion/styled";
+import {
+  ActionSheetButton,
+  IonActionSheetCustomEvent,
+  OverlayEventDetail,
+} from "@ionic/core";
+import { IonActionSheet, IonItem, IonLabel } from "@ionic/react";
+import { Dictionary, startCase } from "lodash";
+import { useState } from "react";
+import { useAppDispatch } from "../../../store";
+import { ActionCreatorWithPayload } from "@reduxjs/toolkit";
+
+const InsetIonItem = styled(IonItem)`
+  --background: var(--ion-tab-bar-background, var(--ion-color-step-50, #fff));
+`;
+
+export interface SettingSelectorProps<T> {
+  title: string;
+  selected: T;
+  set_selected: ActionCreatorWithPayload<T>;
+  options: Dictionary<string>;
+}
+
+export default function SettingSelector<T extends string>({
+  title,
+  selected,
+  set_selected,
+  options,
+}: SettingSelectorProps<T>) {
+  const [open, setOpen] = useState(false);
+  const dispatch = useAppDispatch();
+
+  const buttons: ActionSheetButton<T>[] = Object.values(options).map(function (
+    v
+  ) {
+    return {
+      text: startCase(v),
+      data: v,
+    } as ActionSheetButton<T>;
+  });
+
+  return (
+    <InsetIonItem button onClick={() => setOpen(true)}>
+      <IonLabel>{title}</IonLabel>
+      <IonLabel slot="end" color="medium">
+        {startCase(selected)}
+      </IonLabel>
+      <IonActionSheet
+        cssClass="left-align-buttons"
+        isOpen={open}
+        onDidDismiss={() => setOpen(false)}
+        onWillDismiss={(e: IonActionSheetCustomEvent<OverlayEventDetail>) => {
+          if (e.detail.data) {
+            dispatch(set_selected(e.detail.data));
+          }
+        }}
+        header={title}
+        buttons={buttons.map((b) => ({
+          ...b,
+          role: selected === b.data ? "selected" : undefined,
+        }))}
+      />
+    </InsetIonItem>
+  );
+}

src/features/settings/shared/formatting.ts

@@ -0,0 +1,8 @@
+import styled from "@emotion/styled";
+
+export const ListHeader = styled.div`
+  font-size: 0.8em;
+  margin: 32px 0 -8px 32px;
+  text-transform: uppercase;
+  color: var(--ion-color-medium);
+`;