From ed86f7ef012fb558fe8a8974e1e162ce75cbfd15 Mon Sep 17 00:00:00 2001
From: Mohamed Bassem <me@mbassem.com>
Date: Tue, 26 Aug 2025 15:47:05 +0300
Subject: feat(mobile): Retheme the mobile app (#1872)

* Add nativewindui

* migrate to nativewindui text

* Replace buttons with nativewindui buttons

* Use nativewindui search input

* fix the divider color

* More changes

* fix manage tag icon

* fix styling of bookmark card

* fix ios compilation

* fix search clear

* fix tag pill border color

* Store theme setting in app settings

* fix setting color appearance

* fix coloring of search input

* fix following system theme

* add a save button to info

* fix the grey colors on android

* fix icon active tint color

* drop the use of TextField
---
 apps/mobile/app/dashboard/(tabs)/lists.tsx | 34 ++++++++++++++----------------
 1 file changed, 16 insertions(+), 18 deletions(-)

(limited to 'apps/mobile/app/dashboard/(tabs)/lists.tsx')

diff --git a/apps/mobile/app/dashboard/(tabs)/lists.tsx b/apps/mobile/app/dashboard/(tabs)/lists.tsx
index 218c1de4..a2301c36 100644
--- a/apps/mobile/app/dashboard/(tabs)/lists.tsx
+++ b/apps/mobile/app/dashboard/(tabs)/lists.tsx
@@ -1,15 +1,17 @@
 import { useEffect, useState } from "react";
-import { FlatList, Pressable, Text, View } from "react-native";
+import { FlatList, Pressable, View } from "react-native";
 import * as Haptics from "expo-haptics";
 import { Link, router } from "expo-router";
 import FullPageError from "@/components/FullPageError";
-import { TailwindResolver } from "@/components/TailwindResolver";
+import ChevronRight from "@/components/ui/ChevronRight";
 import CustomSafeAreaView from "@/components/ui/CustomSafeAreaView";
 import FullPageSpinner from "@/components/ui/FullPageSpinner";
 import PageTitle from "@/components/ui/PageTitle";
+import { Text } from "@/components/ui/Text";
 import { api } from "@/lib/trpc";
+import { useColorScheme } from "@/lib/useColorScheme";
 import { condProps } from "@/lib/utils";
-import { ChevronRight, Plus } from "lucide-react-native";
+import { Plus } from "lucide-react-native";
 
 import { useBookmarkLists } from "@karakeep/shared-react/hooks/lists";
 import { ZBookmarkListTreeNode } from "@karakeep/shared/utils/listUtils";
@@ -65,6 +67,7 @@ function traverseTree(
 }
 
 export default function Lists() {
+  const { colors } = useColorScheme();
   const [refreshing, setRefreshing] = useState(false);
   const { data: lists, isPending, error, refetch } = useBookmarkLists();
   const [showChildrenOf, setShowChildrenOf] = useState<Record<string, boolean>>(
@@ -130,7 +133,7 @@ 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"
+            className="mx-2 flex flex-row items-center rounded-xl border border-input bg-card px-4 py-2"
             style={condProps({
               condition: l.item.level > 0,
               props: { marginLeft: l.item.level * 20 },
@@ -146,28 +149,23 @@ export default function Lists() {
                   }));
                 }}
               >
-                <TailwindResolver
-                  className="text-foreground"
-                  comp={(style) => (
-                    <ChevronRight
-                      color={style?.color?.toString()}
-                      style={{
-                        transform: [
-                          { rotate: l.item.collapsed ? "0deg" : "90deg" },
-                        ],
-                      }}
-                    />
-                  )}
+                <ChevronRight
+                  color={colors.foreground}
+                  style={{
+                    transform: [
+                      { rotate: l.item.collapsed ? "0deg" : "90deg" },
+                    ],
+                  }}
                 />
               </Pressable>
             )}
 
             <Link asChild key={l.item.id} href={l.item.href} className="flex-1">
               <Pressable className="flex flex-row justify-between">
-                <Text className="text-lg text-accent-foreground">
+                <Text>
                   {l.item.logo} {l.item.name}
                 </Text>
-                <ChevronRight color="rgb(0, 122, 255)" />
+                <ChevronRight />
               </Pressable>
             </Link>
           </View>
-- 
cgit v1.2.3-70-g09d2