Add memes views & searching

Signed-off-by: Nikolaos Karaolidis <nick@karaolidis.com>

src/screens/settings.tsx

@@ -4,6 +4,7 @@ import {
   Button,
   List,
   Portal,
+  SegmentedButtons,
   Snackbar,
   Switch,
   Text,
@@ -13,19 +14,34 @@ import { openDocumentTree } from 'react-native-scoped-storage';
 import { useDispatch, useSelector } from 'react-redux';
 import type {} from 'redux-thunk/extend-redux';
 import styles from '../styles';
-import { RootState, setNoMedia, setStorageUri } from '../state';
+import {
+  RootState,
+  setGridColumns,
+  setMasonryColumns,
+  setNoMedia,
+  setStorageUri,
+} from '../state';
 import { ORIENTATION, useDimensions } from '../contexts';
 
-const settingsScreenStyles = StyleSheet.create({
+const settingsStyles = StyleSheet.create({
   snackbar: {
     marginBottom: 90,
   },
+  marginBottom: {
+    marginBottom: 15,
+  },
 });
 
-const SettingsScreen = () => {
+const Settings = () => {
   const { colors } = useTheme();
-  const { orientation, responsive } = useDimensions();
+  const { orientation } = useDimensions();
   const noMedia = useSelector((state: RootState) => state.settings.noMedia);
+  const masonryColumns = useSelector(
+    (state: RootState) => state.settings.masonryColumns,
+  );
+  const gridColumns = useSelector(
+    (state: RootState) => state.settings.gridColumns,
+  );
   const dispatch = useDispatch();
 
   const [isOptimizingDatabase, setIsOptimizingDatabase] = useState(false);
@@ -52,21 +68,56 @@ const SettingsScreen = () => {
         ]}>
         <View>
           <List.Section>
-            <List.Subheader>Database</List.Subheader>
-            <Button
-              mode="elevated"
-              loading={isOptimizingDatabase}
-              onPress={optimizeDatabase}>
-              Optimize Database Now
-            </Button>
+            <List.Subheader>Views</List.Subheader>
+            <Text
+              style={[
+                settingsStyles.marginBottom,
+                styles.smallPaddingHorizontal,
+              ]}>
+              Masonry Columns
+            </Text>
+            <SegmentedButtons
+              value={masonryColumns.toString()}
+              onValueChange={value => {
+                void dispatch(
+                  setMasonryColumns(Number.parseInt(value) as 1 | 2 | 3 | 4),
+                );
+              }}
+              buttons={[
+                { label: '1', value: '1' },
+                { label: '2', value: '2' },
+                { label: '3', value: '3' },
+                { label: '4', value: '4' },
+              ]}
+              style={settingsStyles.marginBottom}
+            />
+            <Text
+              style={[
+                settingsStyles.marginBottom,
+                styles.smallPaddingHorizontal,
+              ]}>
+              Grid Columns
+            </Text>
+            <SegmentedButtons
+              value={gridColumns.toString()}
+              onValueChange={value => {
+                void dispatch(
+                  setGridColumns(Number.parseInt(value) as 1 | 2 | 3 | 4),
+                );
+              }}
+              buttons={[
+                { label: '1', value: '1' },
+                { label: '2', value: '2' },
+                { label: '3', value: '3' },
+                { label: '4', value: '4' },
+              ]}
+            />
           </List.Section>
           <List.Section>
             <List.Subheader>Media Storage</List.Subheader>
             <Button
               mode="elevated"
-              style={{
-                marginBottom: responsive.verticalScale(15),
-              }}
+              style={settingsStyles.marginBottom}
               onPress={async () => {
                 const { uri } = await openDocumentTree(true);
                 void dispatch(setStorageUri(uri));
@@ -77,9 +128,6 @@ const SettingsScreen = () => {
               style={[
                 styles.flexRowSpaceBetween,
                 styles.smallPaddingHorizontal,
-                {
-                  marginBottom: responsive.verticalScale(15),
-                },
               ]}>
               <Text>Hide media from gallery</Text>
               <Switch
@@ -91,12 +139,21 @@ const SettingsScreen = () => {
             </View>
           </List.Section>
         </View>
+        <List.Section>
+          <List.Subheader>Database</List.Subheader>
+          <Button
+            mode="elevated"
+            loading={isOptimizingDatabase}
+            onPress={optimizeDatabase}>
+            Optimize Database Now
+          </Button>
+        </List.Section>
       </ScrollView>
       <Portal>
         <Snackbar
           visible={snackbarVisible}
           onDismiss={() => setSnackbarVisible(false)}
-          style={settingsScreenStyles.snackbar}
+          style={settingsStyles.snackbar}
           action={{
             label: 'Dismiss',
             onPress: () => setSnackbarVisible(false),
@@ -108,4 +165,4 @@ const SettingsScreen = () => {
   );
 };
 
-export default SettingsScreen;
+export default Settings;