fix(mobile): margin for "Lists" tab content (#927)

* fix: left margin for list items

* refactor: move type into func definition

* fix: missing return type

Co-authored-by: Joseph Chambers <5374985+imcodingideas@users.noreply.github.com>

* style: remove trailing space

---------

Co-authored-by: Joseph Chambers <5374985+imcodingideas@users.noreply.github.com>

2 files changed, 42 insertions, 1 deletions

diff --git a/apps/mobile/app/dashboard/(tabs)/lists.tsx b/apps/mobile/app/dashboard/(tabs)/lists.tsx
index 9cc49cd4..0dae3ea7 100644
--- a/apps/mobile/app/dashboard/(tabs)/lists.tsx
+++ b/apps/mobile/app/dashboard/(tabs)/lists.tsx
@@ -8,6 +8,7 @@ import CustomSafeAreaView from "@/components/ui/CustomSafeAreaView";
 import FullPageSpinner from "@/components/ui/FullPageSpinner";
 import PageTitle from "@/components/ui/PageTitle";
 import { api } from "@/lib/trpc";
+import { condProps } from "@/lib/utils";
 import { ChevronRight, Plus } from "lucide-react-native";
 
 import { useBookmarkLists } from "@hoarder/shared-react/hooks/lists";
@@ -130,7 +131,10 @@ export default function Lists() {
         renderItem={(l) => (
           <View
             className="mx-2 flex flex-row items-center rounded-xl border border-input bg-white px-4 py-2 dark:bg-accent"
-            style={{ marginLeft: l.item.level * 20 }}
+            style={condProps({
+              condition: l.item.level > 0,
+              props: { marginLeft: l.item.level * 20 },
+            })}
           >
             {l.item.numChildren > 0 && (
               <Pressable
diff --git a/apps/mobile/lib/utils.ts b/apps/mobile/lib/utils.ts
index 88283f01..bfb6c9ed 100644
--- a/apps/mobile/lib/utils.ts
+++ b/apps/mobile/lib/utils.ts
@@ -5,3 +5,40 @@ import { twMerge } from "tailwind-merge";
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs));
 }
+
+/**
+ * Merge props conditionally.
+ *
+ * @example
+ * ```
+ * <View {...condProps(
+ *     { condition: true, props: { className: "foo" } },
+ *     { condition: true, props: { style: { margin: "10px" } } },
+ * )} />
+ * ```
+ * results in:
+ * ```
+ * <View className="foo" style={ margin: "10px" } />
+ * ```
+ * @example
+ * ```
+ * <View style={condProps(
+ *     { condition: true, color: "red" },
+ *     { condition: true, fontWeight: "bold" }
+ * )} />
+ * ```
+ * results in:
+ * ```
+ * <View style={ color: "red", fontWeight: "bold" } />
+ * ```
+ */
+export function condProps(
+  ...condProps: {
+    condition: boolean;
+    props: Record<string, unknown>;
+  }[]
+): Record<string, unknown> {
+  return condProps.reduce((acc, { condition, props }) => {
+    return condition ? { ...acc, ...props } : acc;
+  }, {});
+}