feat(settings): add bottom padding

adds bottom padding for AddonPage to allow users with navigation buttons to more easily access config buttons etc
revenge-mod · Mar 3, 2024 · 746751c · 746751c
1 parent b6c3cd0
commit 746751c
Showing 1 changed file with 45 additions and 30 deletions.
diff --git a/src/ui/settings/components/AddonPage.tsx b/src/ui/settings/components/AddonPage.tsx
@@ -5,37 +5,52 @@ import { CardWrapper } from "@ui/settings/components/Card";
 import settings from "@lib/settings";
 
 interface AddonPageProps<T> {
-    items: Record<string, T & { id: string }>;
-    safeModeMessage: string;
-    safeModeExtras?: JSX.Element | JSX.Element[];
-    card: React.ComponentType<CardWrapper<T>>;
-    keyGetter: (item: T) => (string | undefined)[]
+  items: Record<string, T & { id: string }>;
+  safeModeMessage: string;
+  safeModeExtras?: JSX.Element | JSX.Element[];
+  card: React.ComponentType<CardWrapper<T>>;
+  keyGetter: (item: T) => (string | undefined)[];
 }
 
-export default function AddonPage<T>({ items, safeModeMessage, safeModeExtras, card: CardComponent, keyGetter }: AddonPageProps<T>) {
-    useProxy(settings)
-    useProxy(items);
-    const [search, setSearch] = React.useState("");
+export default function AddonPage<T>({
+  items,
+  safeModeMessage,
+  safeModeExtras,
+  card: CardComponent,
+  keyGetter,
+}: AddonPageProps<T>) {
+  useProxy(settings);
+  useProxy(items);
+  const [search, setSearch] = React.useState("");
 
-    return (
-        <ErrorBoundary>
-            <RN.FlatList
-                ListHeaderComponent={<>
-                    {settings.safeMode?.enabled && <RN.View style={{ marginBottom: 10 }}>
-                        <HelpMessage messageType={0}>{safeModeMessage}</HelpMessage>
-                        {safeModeExtras}
-                    </RN.View>}
-                    <Search
-                        style={{ marginBottom: 10 }}
-                        onChangeText={(v: string) => setSearch(v.toLowerCase())}
-                        placeholder="Search"
-                    />
-                </>}
-                style={{ paddingHorizontal: 10, paddingTop: 10 }}
-                contentContainerStyle={{ paddingBottom: 20 }}
-                data={Object.values(items).filter(i => keyGetter(i).some(x => x?.toLowerCase().includes(search)))}
-                renderItem={({ item, index }) => <CardComponent item={item} index={index} highlight={search} />}
+  return (
+    <ErrorBoundary>
+      <RN.FlatList
+        ListHeaderComponent={
+          <>
+            {settings.safeMode?.enabled && (
+              <RN.View style={{ marginBottom: 10 }}>
+                <HelpMessage messageType={0}>{safeModeMessage}</HelpMessage>
+                {safeModeExtras}
+              </RN.View>
+            )}
+            <Search
+              style={{ marginBottom: 10 }}
+              onChangeText={(v: string) => setSearch(v.toLowerCase())}
+              placeholder="Search"
             />
-        </ErrorBoundary>
-    )
-}
+          </>
+        }
+        ListFooterComponent={<RN.View style={{ height: 48 }} />}
+        style={{ paddingHorizontal: 10, paddingTop: 10 }}
+        contentContainerStyle={{ paddingBottom: 20 }}
+        data={Object.values(items).filter((i) =>
+          keyGetter(i).some((x) => x?.toLowerCase().includes(search))
+        )}
+        renderItem={({ item, index }) => (
+          <CardComponent item={item} index={index} highlight={search} />
+        )}
+      />
+    </ErrorBoundary>
+  );
+}