Settings changes (#468)

Memmy-App · Jul 8, 2023 · 2872587 · 2872587
1 parent cc3e909
commit 2872587
Show file tree

Hide file tree

Showing 9 changed files with 173 additions and 195 deletions.
diff --git a/Stack.tsx b/Stack.tsx
@@ -37,7 +37,6 @@ import { useAppSelector } from "./store";
 import ThemeSelectionScreen from "./src/components/screens/Settings/Appearance/ThemeSelectionScreen";
 import AppearanceScreen from "./src/components/screens/Settings/Appearance/AppearanceScreen";
 import ContentScreen from "./src/components/screens/Settings/Content/ContentScreen";
-import AccountSettingsScreen from "./src/components/screens/Settings/Account/AccountSettingsScreen";
 import ViewerScreen from "./src/components/screens/ViewerScreen";
 import ReadSettingsScreen from "./src/components/screens/Settings/Content/ReadSettingsScreen";
 import UserSavedPostsScreen from "./src/components/screens/UserProfile/UserSavedPostsScreen";
@@ -288,14 +287,6 @@ function ProfileStackScreen() {
             title: "View",
           }}
         />
-        <ProfileStack.Screen
-          name="AccountSettings"
-          component={AccountSettingsScreen}
-          options={{
-            title: "Accounts",
-            freezeOnBlur: true,
-          }}
-        />
         <ProfileStack.Screen
           name="Content"
           component={ContentScreen}

diff --git a/src/components/common/Table/CSection.tsx b/src/components/common/Table/CSection.tsx
@@ -11,6 +11,7 @@ function CSection({ ...props }: SectionInterface) {
       hideSurroundingSeparators
       separatorTintColor={theme.colors.app.border}
       {...props}
+      header={props.header ? props.header.toUpperCase() : ""}
     >
       {props.children}
     </Section>

diff --git a/src/components/screens/Settings/Account/AccountSettingsScreen.tsx b/src/components/screens/Settings/Account/AccountSettingsScreen.tsx
diff --git a/src/components/screens/Settings/Account/ViewAccountsScreen.tsx b/src/components/screens/Settings/Account/ViewAccountsScreen.tsx
@@ -153,6 +153,24 @@ function ViewAccountsScreen({ navigation }: ViewAccountsScreenProps) {
     <ScrollView backgroundColor={theme.colors.app.bg}>
       <LoadingModalTransparent loading={notifications.loading} />
       <CTable>
+        <CSection header="CURRENT ACCOUNT">
+          <CCell
+            cellStyle="RightDetail"
+            title="Server"
+            detail={accounts[0].instance}
+            backgroundColor={theme.colors.app.fg}
+            titleTextColor={theme.colors.app.textPrimary}
+            rightDetailColor={theme.colors.app.textSecondary}
+          />
+          <CCell
+            cellStyle="RightDetail"
+            title="Username"
+            detail={accounts[0].username}
+            backgroundColor={theme.colors.app.fg}
+            titleTextColor={theme.colors.app.textPrimary}
+            rightDetailColor={theme.colors.app.textSecondary}
+          />
+        </CSection>
         {accounts.map((a) => (
           <CSection
             header={`${a.username}@${a.instance}`.toUpperCase()}

diff --git a/src/components/screens/Settings/Appearance/AppearanceScreen.tsx b/src/components/screens/Settings/Appearance/AppearanceScreen.tsx
@@ -36,6 +36,112 @@ function AppearanceScreen({ navigation }: IProps) {
   return (
     <ScrollView backgroundColor={theme.colors.app.bg} flex={1}>
       <TableView style={styles.table}>
+        <CSection header="Content">
+          <CCell
+            cellStyle="Basic"
+            title="Display Total Score"
+            backgroundColor={theme.colors.app.fg}
+            titleTextColor={theme.colors.app.textPrimary}
+            rightDetailColor={theme.colors.app.textSecondary}
+            cellAccessoryView={
+              <Switch
+                value={settings.displayTotalScore}
+                onValueChange={(v) => {
+                  LayoutAnimation.easeInEaseOut();
+                  onChange("displayTotalScore", v);
+                }}
+              />
+            }
+          />
+          <CCell
+            cellStyle="Basic"
+            title="Images Ignore Screen Height"
+            backgroundColor={theme.colors.app.fg}
+            titleTextColor={theme.colors.app.textPrimary}
+            rightDetailColor={theme.colors.app.textSecondary}
+            cellAccessoryView={
+              <Switch
+                value={settings.ignoreScreenHeightInFeed}
+                onValueChange={(v) => {
+                  LayoutAnimation.easeInEaseOut();
+                  onChange("ignoreScreenHeightInFeed", v);
+                }}
+              />
+            }
+          />
+          <CCell
+            cellStyle="RightDetail"
+            title="Show Instance For Usernames"
+            backgroundColor={theme.colors.app.fg}
+            titleTextColor={theme.colors.app.textPrimary}
+            rightDetailColor={theme.colors.app.textSecondary}
+            cellAccessoryView={
+              <Switch
+                value={settings.showInstanceForUsernames}
+                onValueChange={(v) => onChange("showInstanceForUsernames", v)}
+              />
+            }
+          />
+          <CCell
+            cellStyle="RightDetail"
+            title="Compact View"
+            backgroundColor={theme.colors.app.fg}
+            titleTextColor={theme.colors.app.textPrimary}
+            rightDetailColor={theme.colors.app.textSecondary}
+            cellAccessoryView={
+              <Switch
+                value={settings.compactView}
+                onValueChange={(v) => {
+                  LayoutAnimation.easeInEaseOut();
+                  onChange("compactView", v);
+                }}
+              />
+            }
+          />
+        </CSection>
+
+        {settings.compactView && (
+          <CSection header="COMPACT">
+            <CCell
+              cellStyle="RightDetail"
+              title="Thumbnails Position"
+              detail={settings.compactThumbnailPosition}
+              accessory="DisclosureIndicator"
+              onPress={() => {
+                const options = ["None", "Left", "Right", "Cancel"];
+                const cancelButtonIndex = 3;
+
+                showActionSheetWithOptions(
+                  {
+                    options,
+                    cancelButtonIndex,
+                    userInterfaceStyle: theme.config.initialColorMode,
+                  },
+                  (index: number) => {
+                    if (index === cancelButtonIndex) return;
+
+                    dispatch(
+                      setSetting({ compactThumbnailPosition: options[index] })
+                    );
+                  }
+                );
+              }}
+            />
+            <CCell
+              cellStyle="RightDetail"
+              title="Show Voting Buttons"
+              backgroundColor={theme.colors.app.fg}
+              titleTextColor={theme.colors.app.textPrimary}
+              rightDetailColor={theme.colors.app.textSecondary}
+              cellAccessoryView={
+                <Switch
+                  value={settings.compactShowVotingButtons}
+                  onValueChange={(v) => onChange("compactShowVotingButtons", v)}
+                />
+              }
+            />
+          </CSection>
+        )}
         <CSection header="THEMES">
           <CCell
             cellStyle="Basic"

diff --git a/src/components/screens/Settings/Appearance/ThemeSelectionScreen.tsx b/src/components/screens/Settings/Appearance/ThemeSelectionScreen.tsx
@@ -7,7 +7,8 @@ import { setSetting } from "../../../../slices/settings/settingsActions";
 import { selectSettings } from "../../../../slices/settings/settingsSlice";
 import { useAppDispatch, useAppSelector } from "../../../../../store";
 import {
-  ThemeOptionsArr,
+  DarkThemeOptionsArr,
+  LightThemeOptionsArr,
   ThemeOptionsMap,
 } from "../../../../theme/themeOptions";
 import CCell from "../../../common/Table/CCell";
@@ -54,8 +55,34 @@ function ThemeSelectionScreen({ route }: IProps) {
     <View backgroundColor={theme.colors.app.bg} flex={1}>
       <ScrollView backgroundColor={theme.colors.app.bg} flex={1}>
         <TableView style={styles.table}>
-          <CSection>
-            {ThemeOptionsArr.map((themeName) => (
+          <CSection header="Light Themes">
+            {LightThemeOptionsArr.map((themeName) => (
+              <CCell
+                cellStyle="RightDetail"
+                title={
+                  <HStack space={2}>
+                    <ThemeColors
+                      accent={ThemeOptionsMap[themeName].colors.app.accent}
+                      bg={ThemeOptionsMap[themeName].colors.app.bg}
+                    />
+                    <Text>{themeName}</Text>
+                  </HStack>
+                }
+                cellAccessoryView={
+                  currentTheme === themeName && (
+                    <IconCheck color={theme.colors.app.accent} />
+                  )
+                }
+                onPress={() => {
+                  const themeSetting = {};
+                  themeSetting[themeProp] = themeName;
+                  dispatch(setSetting(themeSetting));
+                }}
+              />
+            ))}
+          </CSection>
+          <CSection header="Dark Themes">
+            {DarkThemeOptionsArr.map((themeName) => (
               <CCell
                 cellStyle="RightDetail"
                 title={
@@ -72,9 +99,6 @@ function ThemeSelectionScreen({ route }: IProps) {
                     <IconCheck color={theme.colors.app.accent} />
                   )
                 }
-                backgroundColor={theme.colors.app.fg}
-                titleTextColor={theme.colors.app.textPrimary}
-                rightDetailColor={theme.colors.app.textSecondary}
                 onPress={() => {
                   const themeSetting = {};
                   themeSetting[themeProp] = themeName;