From ed86f7ef012fb558fe8a8974e1e162ce75cbfd15 Mon Sep 17 00:00:00 2001 From: Mohamed Bassem 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/_layout.tsx | 101 ++--- apps/mobile/app/dashboard/(tabs)/_layout.tsx | 3 + apps/mobile/app/dashboard/(tabs)/index.tsx | 9 +- apps/mobile/app/dashboard/(tabs)/lists.tsx | 34 +- apps/mobile/app/dashboard/(tabs)/settings.tsx | 45 +- .../app/dashboard/bookmarks/[slug]/index.tsx | 11 +- .../mobile/app/dashboard/bookmarks/[slug]/info.tsx | 287 ++++++++----- .../dashboard/bookmarks/[slug]/manage_lists.tsx | 7 +- .../app/dashboard/bookmarks/[slug]/manage_tags.tsx | 26 +- apps/mobile/app/dashboard/bookmarks/new.tsx | 8 +- apps/mobile/app/dashboard/lists/new.tsx | 9 +- apps/mobile/app/dashboard/search.tsx | 52 ++- .../dashboard/settings/bookmark-default-view.tsx | 9 +- apps/mobile/app/dashboard/settings/theme.tsx | 9 +- apps/mobile/app/error.tsx | 5 +- apps/mobile/app/sharing.tsx | 14 +- apps/mobile/app/signin.tsx | 28 +- apps/mobile/app/test-connection.tsx | 14 +- apps/mobile/babel.config.js | 3 + apps/mobile/components/FullPageError.tsx | 7 +- apps/mobile/components/bookmarks/BookmarkCard.tsx | 18 +- .../components/bookmarks/BookmarkLinkPreview.tsx | 9 +- apps/mobile/components/bookmarks/BookmarkList.tsx | 5 +- apps/mobile/components/bookmarks/PDFViewer.tsx | 3 +- apps/mobile/components/bookmarks/TagPill.tsx | 2 +- apps/mobile/components/ui/Button.tsx | 239 ++++++++--- apps/mobile/components/ui/ChevronRight.tsx | 11 + apps/mobile/components/ui/Divider.tsx | 2 +- apps/mobile/components/ui/Input.tsx | 25 +- apps/mobile/components/ui/List.tsx | 469 +++++++++++++++++++++ apps/mobile/components/ui/PageTitle.tsx | 2 +- .../components/ui/SearchInput/SearchInput.ios.tsx | 187 ++++++++ .../components/ui/SearchInput/SearchInput.tsx | 114 +++++ apps/mobile/components/ui/SearchInput/index.ts | 1 + apps/mobile/components/ui/SearchInput/types.ts | 13 + apps/mobile/components/ui/Text.tsx | 52 +++ apps/mobile/components/ui/Toast.tsx | 3 +- apps/mobile/globals.css | 132 +++++- apps/mobile/lib/useColorScheme.tsx | 58 +++ apps/mobile/metro.config.js | 3 +- apps/mobile/package.json | 7 +- apps/mobile/tailwind.config.js | 66 +++ apps/mobile/tailwind.config.ts | 11 - apps/mobile/theme/colors.ts | 109 +++++ apps/mobile/theme/index.ts | 30 ++ 45 files changed, 1835 insertions(+), 417 deletions(-) create mode 100644 apps/mobile/components/ui/ChevronRight.tsx create mode 100644 apps/mobile/components/ui/List.tsx create mode 100644 apps/mobile/components/ui/SearchInput/SearchInput.ios.tsx create mode 100644 apps/mobile/components/ui/SearchInput/SearchInput.tsx create mode 100644 apps/mobile/components/ui/SearchInput/index.ts create mode 100644 apps/mobile/components/ui/SearchInput/types.ts create mode 100644 apps/mobile/components/ui/Text.tsx create mode 100644 apps/mobile/lib/useColorScheme.tsx create mode 100644 apps/mobile/tailwind.config.js delete mode 100644 apps/mobile/tailwind.config.ts create mode 100644 apps/mobile/theme/colors.ts create mode 100644 apps/mobile/theme/index.ts (limited to 'apps/mobile') diff --git a/apps/mobile/app/_layout.tsx b/apps/mobile/app/_layout.tsx index ca3da0cb..1e6128c7 100644 --- a/apps/mobile/app/_layout.tsx +++ b/apps/mobile/app/_layout.tsx @@ -3,21 +3,23 @@ import "expo-dev-client"; import { useEffect } from "react"; import { GestureHandlerRootView } from "react-native-gesture-handler"; +import { KeyboardProvider } from "react-native-keyboard-controller"; import { useRouter } from "expo-router"; import { Stack } from "expo-router/stack"; import { ShareIntentProvider, useShareIntent } from "expo-share-intent"; import { StatusBar } from "expo-status-bar"; import { StyledStack } from "@/components/navigation/stack"; import { Providers } from "@/lib/providers"; -import useAppSettings from "@/lib/settings"; +import { useColorScheme, useInitialAndroidBarSync } from "@/lib/useColorScheme"; import { cn } from "@/lib/utils"; -import { useColorScheme } from "nativewind"; +import { NAV_THEME } from "@/theme"; +import { ThemeProvider as NavThemeProvider } from "@react-navigation/native"; export default function RootLayout() { + useInitialAndroidBarSync(); const router = useRouter(); const { hasShareIntent } = useShareIntent(); - const { colorScheme, setColorScheme } = useColorScheme(); - const { settings } = useAppSettings(); + const { colorScheme, isDarkColorScheme } = useColorScheme(); useEffect(() => { if (hasShareIntent) { @@ -27,52 +29,55 @@ export default function RootLayout() { } }, [hasShareIntent]); - useEffect(() => { - setColorScheme(settings.theme); - }, [settings.theme]); - return ( <> - { - return ( - - - {props.children} - - - ); - }} - contentClassName={cn( - "w-full flex-1 bg-gray-100 text-foreground dark:bg-background", - colorScheme == "dark" ? "dark" : "light", - )} - screenOptions={{ - headerTitle: "", - headerTransparent: true, - }} - > - - - - - - + + + { + return ( + + + {props.children} + + + ); + }} + contentClassName={cn( + "w-full flex-1 bg-gray-100 text-foreground dark:bg-background", + colorScheme == "dark" ? "dark" : "light", + )} + screenOptions={{ + headerTitle: "", + headerTransparent: true, + }} + > + + + + + + + + ); } diff --git a/apps/mobile/app/dashboard/(tabs)/_layout.tsx b/apps/mobile/app/dashboard/(tabs)/_layout.tsx index f1d90ee4..7419c348 100644 --- a/apps/mobile/app/dashboard/(tabs)/_layout.tsx +++ b/apps/mobile/app/dashboard/(tabs)/_layout.tsx @@ -1,9 +1,11 @@ import React, { useLayoutEffect } from "react"; import { Tabs, useNavigation } from "expo-router"; import { StyledTabs } from "@/components/navigation/tabs"; +import { useColorScheme } from "@/lib/useColorScheme"; import { ClipboardList, Home, Settings } from "lucide-react-native"; export default function TabLayout() { + const { colors } = useColorScheme(); const navigation = useNavigation(); // Hide the header on the parent screen useLayoutEffect(() => { @@ -18,6 +20,7 @@ export default function TabLayout() { sceneClassName="bg-gray-100 dark:bg-background" screenOptions={{ headerShown: false, + tabBarActiveTintColor: colors.foreground, }} > router.push("/dashboard/search")} > ( )} /> - Search + Search } 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>( @@ -130,7 +133,7 @@ export default function Lists() { }} renderItem={(l) => ( 0, props: { marginLeft: l.item.level * 20 }, @@ -146,28 +149,23 @@ export default function Lists() { })); }} > - ( - - )} + )} - + {l.item.logo} {l.item.name} - + diff --git a/apps/mobile/app/dashboard/(tabs)/settings.tsx b/apps/mobile/app/dashboard/(tabs)/settings.tsx index 7b3dab4f..6d76308d 100644 --- a/apps/mobile/app/dashboard/(tabs)/settings.tsx +++ b/apps/mobile/app/dashboard/(tabs)/settings.tsx @@ -1,16 +1,17 @@ import { useEffect } from "react"; -import { ActivityIndicator, Pressable, Text, View } from "react-native"; +import { ActivityIndicator, Pressable, View } from "react-native"; import { Slider } from "react-native-awesome-slider"; import { useSharedValue } from "react-native-reanimated"; import { Link } from "expo-router"; import { Button } from "@/components/ui/Button"; +import ChevronRight from "@/components/ui/ChevronRight"; import CustomSafeAreaView from "@/components/ui/CustomSafeAreaView"; import { Divider } from "@/components/ui/Divider"; import PageTitle from "@/components/ui/PageTitle"; +import { Text } from "@/components/ui/Text"; import { useSession } from "@/lib/session"; import useAppSettings from "@/lib/settings"; import { api } from "@/lib/trpc"; -import { ChevronRight } from "lucide-react-native"; export default function Dashboard() { const { logout } = useSession(); @@ -38,56 +39,50 @@ export default function Dashboard() { - - - {isSettingsLoading ? "Loading ..." : settings.address} - + + {isSettingsLoading ? "Loading ..." : settings.address} - - {isLoading ? "Loading ..." : data?.email} - + {isLoading ? "Loading ..." : data?.email} App Settings - + - Theme + Theme - + { { light: "Light", dark: "Dark", system: "System" }[ settings.theme ] } - + - + - - Default Bookmark View - + Default Bookmark View {isSettingsLoading ? ( ) : ( - + {settings.defaultBookmarkView === "reader" ? "Reader" : "Browser"} )} - + @@ -95,8 +90,8 @@ export default function Dashboard() { Upload Settings - - Image Quality + + Image Quality {Math.round(settings.imageQuality * 100)}% @@ -115,7 +110,13 @@ export default function Dashboard() { - ); diff --git a/apps/mobile/app/dashboard/bookmarks/[slug]/index.tsx b/apps/mobile/app/dashboard/bookmarks/[slug]/index.tsx index eafcfc19..3b1300ca 100644 --- a/apps/mobile/app/dashboard/bookmarks/[slug]/index.tsx +++ b/apps/mobile/app/dashboard/bookmarks/[slug]/index.tsx @@ -25,6 +25,7 @@ import { Button } from "@/components/ui/Button"; import CustomSafeAreaView from "@/components/ui/CustomSafeAreaView"; import FullPageSpinner from "@/components/ui/FullPageSpinner"; import { Input } from "@/components/ui/Input"; +import { Text } from "@/components/ui/Text"; import { useToast } from "@/components/ui/Toast"; import { useAssetUrl } from "@/lib/hooks"; import useAppSettings from "@/lib/settings"; @@ -296,15 +297,17 @@ function BookmarkTextView({ bookmark }: { bookmark: ZBookmark }) { {isEditing && ( - )} diff --git a/apps/mobile/app/dashboard/bookmarks/[slug]/info.tsx b/apps/mobile/app/dashboard/bookmarks/[slug]/info.tsx index af124160..1781ec74 100644 --- a/apps/mobile/app/dashboard/bookmarks/[slug]/info.tsx +++ b/apps/mobile/app/dashboard/bookmarks/[slug]/info.tsx @@ -1,26 +1,22 @@ import React from "react"; +import { Alert, Pressable, View } from "react-native"; import { - Alert, - Keyboard, - Pressable, - Text, - TouchableWithoutFeedback, - View, -} from "react-native"; -import Animated, { - useAnimatedKeyboard, - useAnimatedStyle, -} from "react-native-reanimated"; + KeyboardAwareScrollView, + KeyboardGestureArea, +} from "react-native-keyboard-controller"; +import { useSafeAreaInsets } from "react-native-safe-area-context"; import { router, Stack, useLocalSearchParams } from "expo-router"; import TagPill from "@/components/bookmarks/TagPill"; import FullPageError from "@/components/FullPageError"; import { Button } from "@/components/ui/Button"; +import ChevronRight from "@/components/ui/ChevronRight"; import { Divider } from "@/components/ui/Divider"; import FullPageSpinner from "@/components/ui/FullPageSpinner"; import { Input } from "@/components/ui/Input"; import { Skeleton } from "@/components/ui/Skeleton"; +import { Text } from "@/components/ui/Text"; import { useToast } from "@/components/ui/Toast"; -import { ChevronRight } from "lucide-react-native"; +import { cn } from "@/lib/utils"; import { useAutoRefreshingBookmarkQuery, @@ -30,9 +26,21 @@ import { import { BookmarkTypes, ZBookmark } from "@karakeep/shared/types/bookmarks"; import { isBookmarkStillTagging } from "@karakeep/shared/utils/bookmarkUtils"; +function InfoSection({ + className, + ...props +}: React.ComponentProps) { + return ( + + ); +} + function TagList({ bookmark }: { bookmark: ZBookmark }) { return ( - + {isBookmarkStillTagging(bookmark) ? ( @@ -41,7 +49,7 @@ function TagList({ bookmark }: { bookmark: ZBookmark }) { ) : ( bookmark.tags.length > 0 && ( <> - + {bookmark.tags.map((t) => ( ))} @@ -50,94 +58,104 @@ function TagList({ bookmark }: { bookmark: ZBookmark }) { ) )} - - router.push(`/dashboard/bookmarks/${bookmark.id}/manage_tags`) - } - className="flex w-full flex-row justify-between gap-3 px-4" - > - Manage Tags - - - + + + router.push(`/dashboard/bookmarks/${bookmark.id}/manage_tags`) + } + className="flex w-full flex-row justify-between gap-3" + > + Manage Tags + + + + ); } function ManageLists({ bookmark }: { bookmark: ZBookmark }) { return ( - - - router.push(`/dashboard/bookmarks/${bookmark.id}/manage_lists`) - } - className="flex w-full flex-row justify-between gap-3 rounded-lg bg-white px-4 py-2 dark:bg-accent" - > - Manage Lists - - - + + + + router.push(`/dashboard/bookmarks/${bookmark.id}/manage_lists`) + } + className="flex w-full flex-row justify-between gap-3 rounded-lg" + > + Manage Lists + + + + ); } function TitleEditor({ - bookmarkId, title, + setTitle, + isPending, }: { - bookmarkId: string; - title: string; + title: string | null | undefined; + setTitle: (title: string | null) => void; + isPending: boolean; }) { - const { mutate, isPending } = useUpdateBookmark(); return ( - + - mutate({ - bookmarkId, - title: ev.nativeEvent.text ? ev.nativeEvent.text : null, - }) - } + onChangeText={(text) => setTitle(text)} defaultValue={title ?? ""} /> - + ); } -function NotesEditor({ bookmark }: { bookmark: ZBookmark }) { - const { mutate, isPending } = useUpdateBookmark(); +function NotesEditor({ + notes, + setNotes, + isPending, +}: { + notes: string | null | undefined; + setNotes: (title: string | null) => void; + isPending: boolean; +}) { return ( - + setNotes(text)} textAlignVertical="top" - onEndEditing={(ev) => - mutate({ - bookmarkId: bookmark.id, - note: ev.nativeEvent.text, - }) - } - defaultValue={bookmark.note ?? ""} + defaultValue={notes ?? ""} /> - + ); } const ViewBookmarkPage = () => { + const insets = useSafeAreaInsets(); const { slug } = useLocalSearchParams(); const { toast } = useToast(); if (typeof slug !== "string") { throw new Error("Unexpected param type"); } + const { mutate: editBookmark, isPending: isEditPending } = useUpdateBookmark({ + onSuccess: () => { + toast({ + message: "The bookmark has been updated!", + showProgress: false, + }); + setEditedBookmark({}); + }, + }); + const { mutate: deleteBookmark, isPending: isDeletionPending } = useDeleteBookmark({ onSuccess: () => { @@ -149,12 +167,6 @@ const ViewBookmarkPage = () => { }, }); - const keyboard = useAnimatedKeyboard(); - - const animatedStyles = useAnimatedStyle(() => ({ - marginBottom: keyboard.height.value, - })); - const { data: bookmark, isPending, @@ -163,6 +175,11 @@ const ViewBookmarkPage = () => { bookmarkId: slug, }); + const [editedBookmark, setEditedBookmark] = React.useState<{ + title?: string | null; + note?: string; + }>({}); + if (isPending) { return ; } @@ -188,6 +205,27 @@ const ViewBookmarkPage = () => { ); }; + const onDone = () => { + const doDone = () => { + if (router.canGoBack()) { + router.back(); + } else { + router.replace("dashboard"); + } + }; + if (Object.keys(editedBookmark).length === 0) { + doDone(); + return; + } + Alert.alert("You have unsaved changes", "Do you still want to leave?", [ + { text: "Cancel", style: "cancel" }, + { + text: "Leave", + onPress: doDone, + }, + ]); + }; + let title = null; switch (bookmark.content.type) { case BookmarkTypes.LINK: @@ -201,56 +239,77 @@ const ViewBookmarkPage = () => { break; } return ( - - ( - { - if (router.canGoBack()) { - router.back(); - } else { - router.replace("dashboard"); - } - }} + + + ( + + Done + + ), + }} + /> + + + setEditedBookmark((prev) => ({ ...prev, title })) + } + isPending={isEditPending} + /> + + + + setEditedBookmark((prev) => ({ ...prev, note: note ?? "" })) + } + isPending={isEditPending} + /> + + + + + + Created {bookmark.createdAt.toLocaleString()} + + {bookmark.modifiedAt && + bookmark.modifiedAt.getTime() !== + bookmark.createdAt.getTime() && ( + + Modified {bookmark.modifiedAt.toLocaleString()} + + )} - - - + + + ); }; diff --git a/apps/mobile/app/dashboard/bookmarks/[slug]/manage_lists.tsx b/apps/mobile/app/dashboard/bookmarks/[slug]/manage_lists.tsx index 9f2149ae..7250d06b 100644 --- a/apps/mobile/app/dashboard/bookmarks/[slug]/manage_lists.tsx +++ b/apps/mobile/app/dashboard/bookmarks/[slug]/manage_lists.tsx @@ -1,8 +1,9 @@ import React from "react"; -import { FlatList, Pressable, Text, View } from "react-native"; +import { FlatList, Pressable, View } from "react-native"; import Checkbox from "expo-checkbox"; import { useLocalSearchParams } from "expo-router"; import CustomSafeAreaView from "@/components/ui/CustomSafeAreaView"; +import { Text } from "@/components/ui/Text"; import { useToast } from "@/components/ui/Toast"; import { @@ -75,13 +76,13 @@ const ListPickerPage = () => { gap: 5, }} renderItem={(l) => ( - + toggleList(l.item[l.item.length - 1].id)} className="flex w-full flex-row justify-between" > - + {l.item.map((item) => `${item.icon} ${item.name}`).join(" / ")} { + const { colors } = useColorScheme(); const { slug: bookmarkId } = useLocalSearchParams(); const [search, setSearch] = React.useState(""); @@ -211,20 +207,14 @@ const ListPickerPage = () => { }) } > - + {t.section.title == "Existing Tags" && ( - } - /> + )} {t.section.title == "All Tags" && t.item.id == NEW_TAG_ID && ( - } - /> + )} - + {t.item.id == NEW_TAG_ID ? `Create new tag '${t.item.name}'` : t.item.name} diff --git a/apps/mobile/app/dashboard/bookmarks/new.tsx b/apps/mobile/app/dashboard/bookmarks/new.tsx index d24c1597..50f8f2a7 100644 --- a/apps/mobile/app/dashboard/bookmarks/new.tsx +++ b/apps/mobile/app/dashboard/bookmarks/new.tsx @@ -1,9 +1,10 @@ import React, { useState } from "react"; -import { Text, View } from "react-native"; +import { View } from "react-native"; import { router } from "expo-router"; import { Button } from "@/components/ui/Button"; import CustomSafeAreaView from "@/components/ui/CustomSafeAreaView"; import { Input } from "@/components/ui/Input"; +import { Text } from "@/components/ui/Text"; import { useToast } from "@/components/ui/Toast"; import { useCreateBookmark } from "@karakeep/shared-react/hooks/bookmarks"; @@ -61,13 +62,16 @@ const NoteEditorPage = () => { )} - ); diff --git a/apps/mobile/app/dashboard/lists/new.tsx b/apps/mobile/app/dashboard/lists/new.tsx index 2cd690f5..55315e70 100644 --- a/apps/mobile/app/dashboard/lists/new.tsx +++ b/apps/mobile/app/dashboard/lists/new.tsx @@ -1,9 +1,10 @@ import React, { useState } from "react"; -import { Text, View } from "react-native"; +import { View } from "react-native"; import { router } from "expo-router"; import { Button } from "@/components/ui/Button"; import CustomSafeAreaView from "@/components/ui/CustomSafeAreaView"; import { Input } from "@/components/ui/Input"; +import { Text } from "@/components/ui/Text"; import { useToast } from "@/components/ui/Toast"; import { useCreateBookmarkList } from "@karakeep/shared-react/hooks/lists"; @@ -40,14 +41,16 @@ const NewListPage = () => { 🚀 - ); diff --git a/apps/mobile/app/dashboard/search.tsx b/apps/mobile/app/dashboard/search.tsx index 5cc97575..66423870 100644 --- a/apps/mobile/app/dashboard/search.tsx +++ b/apps/mobile/app/dashboard/search.tsx @@ -1,18 +1,12 @@ import { useMemo, useRef, useState } from "react"; -import { - FlatList, - Keyboard, - Pressable, - Text, - TextInput, - View, -} from "react-native"; -import { router } from "expo-router"; +import { FlatList, Keyboard, Pressable, TextInput, View } from "react-native"; +import { router, Stack } from "expo-router"; import BookmarkList from "@/components/bookmarks/BookmarkList"; import FullPageError from "@/components/FullPageError"; import CustomSafeAreaView from "@/components/ui/CustomSafeAreaView"; import FullPageSpinner from "@/components/ui/FullPageSpinner"; -import { Input } from "@/components/ui/Input"; +import { SearchInput } from "@/components/ui/SearchInput"; +import { Text } from "@/components/ui/Text"; import { api } from "@/lib/trpc"; import AsyncStorage from "@react-native-async-storage/async-storage"; import { keepPreviousData } from "@tanstack/react-query"; @@ -102,24 +96,26 @@ export default function Search() { return ( - - handleSearchSubmit(search)} - returnKeyType="search" - autoFocus - autoCapitalize="none" - /> - router.back()}> - Cancel - - + + handleSearchSubmit(search)} + returnKeyType="search" + autoFocus + autoCapitalize="none" + onCancel={router.back} + /> {isInputFocused ? ( - - {{ browser: "Browser", reader: "Reader" }[mode]} - + {{ browser: "Browser", reader: "Reader" }[mode]} {isChecked && } , - + {options} diff --git a/apps/mobile/app/dashboard/settings/theme.tsx b/apps/mobile/app/dashboard/settings/theme.tsx index f7feacdb..a4f0494a 100644 --- a/apps/mobile/app/dashboard/settings/theme.tsx +++ b/apps/mobile/app/dashboard/settings/theme.tsx @@ -1,6 +1,7 @@ -import { Pressable, Text, View } from "react-native"; +import { Pressable, View } from "react-native"; import CustomSafeAreaView from "@/components/ui/CustomSafeAreaView"; import { Divider } from "@/components/ui/Divider"; +import { Text } from "@/components/ui/Text"; import useAppSettings from "@/lib/settings"; import { Check } from "lucide-react-native"; @@ -16,7 +17,7 @@ export default function ThemePage() { className="flex flex-row justify-between" key={theme} > - + { { light: "Light Mode", dark: "Dark Mode", system: "System" }[ theme @@ -38,9 +39,7 @@ export default function ThemePage() { return ( - - {options} - + {options} ); diff --git a/apps/mobile/app/error.tsx b/apps/mobile/app/error.tsx index d0e4a7df..6e975306 100644 --- a/apps/mobile/app/error.tsx +++ b/apps/mobile/app/error.tsx @@ -1,9 +1,10 @@ -import { Text, View } from "react-native"; +import { View } from "react-native"; +import { Text } from "@/components/ui/Text"; export default function ErrorPage() { return ( - Error! + Error! ); } diff --git a/apps/mobile/app/sharing.tsx b/apps/mobile/app/sharing.tsx index 506b5100..1e5df4b8 100644 --- a/apps/mobile/app/sharing.tsx +++ b/apps/mobile/app/sharing.tsx @@ -1,8 +1,9 @@ import { useEffect, useRef, useState } from "react"; -import { ActivityIndicator, Pressable, Text, View } from "react-native"; +import { ActivityIndicator, Pressable, View } from "react-native"; import { useRouter } from "expo-router"; import { useShareIntentContext } from "expo-share-intent"; import { Button } from "@/components/ui/Button"; +import { Text } from "@/components/ui/Text"; import useAppSettings from "@/lib/settings"; import { api } from "@/lib/trpc"; import { useUploadAsset } from "@/lib/upload"; @@ -73,7 +74,7 @@ function SaveBookmark({ setMode }: { setMode: (mode: Mode) => void }) { return ( - Hoarding + Hoarding ); @@ -95,18 +96,19 @@ export default function Sharing() { case "success": { comp = ( - + {mode.type === "alreadyExists" ? "Already Hoarded!" : "Hoarded!"} router.replace("dashboard")}> Dismiss @@ -115,7 +117,7 @@ export default function Sharing() { break; } case "error": { - comp = Error!; + comp = Error!; break; } } diff --git a/apps/mobile/app/signin.tsx b/apps/mobile/app/signin.tsx index 0d160398..215b6a67 100644 --- a/apps/mobile/app/signin.tsx +++ b/apps/mobile/app/signin.tsx @@ -4,18 +4,17 @@ import { KeyboardAvoidingView, Platform, Pressable, - Text, TouchableWithoutFeedback, View, } from "react-native"; import { Redirect, useRouter } from "expo-router"; import Logo from "@/components/Logo"; import { TailwindResolver } from "@/components/TailwindResolver"; -import { Button, buttonVariants } from "@/components/ui/Button"; +import { Button } from "@/components/ui/Button"; import { Input } from "@/components/ui/Input"; +import { Text } from "@/components/ui/Text"; import useAppSettings from "@/lib/settings"; import { api } from "@/lib/trpc"; -import { cn } from "@/lib/utils"; import { Bug } from "lucide-react-native"; enum LoginType { @@ -134,6 +133,7 @@ export default function Signin() { Server Address Email Password API Key + diff --git a/apps/mobile/app/test-connection.tsx b/apps/mobile/app/test-connection.tsx index 5639c6bd..a9ec6e5e 100644 --- a/apps/mobile/app/test-connection.tsx +++ b/apps/mobile/app/test-connection.tsx @@ -1,9 +1,10 @@ import React from "react"; -import { Platform, Text, View } from "react-native"; +import { Platform, View } from "react-native"; import * as Clipboard from "expo-clipboard"; import { Button } from "@/components/ui/Button"; import CustomSafeAreaView from "@/components/ui/CustomSafeAreaView"; import { Input } from "@/components/ui/Input"; +import { Text } from "@/components/ui/Text"; import useAppSettings from "@/lib/settings"; import { cn } from "@/lib/utils"; import { z } from "zod"; @@ -79,19 +80,22 @@ export default function TestConnection() { {error} - ); diff --git a/apps/mobile/components/bookmarks/BookmarkCard.tsx b/apps/mobile/components/bookmarks/BookmarkCard.tsx index 461967b4..e4c2eee8 100644 --- a/apps/mobile/components/bookmarks/BookmarkCard.tsx +++ b/apps/mobile/components/bookmarks/BookmarkCard.tsx @@ -7,7 +7,6 @@ import { Pressable, ScrollView, Share, - Text, View, } from "react-native"; import * as Clipboard from "expo-clipboard"; @@ -15,6 +14,7 @@ import * as FileSystem from "expo-file-system"; import * as Haptics from "expo-haptics"; import { router, useRouter } from "expo-router"; import * as Sharing from "expo-sharing"; +import { Text } from "@/components/ui/Text"; import useAppSettings from "@/lib/settings"; import { api } from "@/lib/trpc"; import { MenuView } from "@react-native-menu/menu"; @@ -332,9 +332,7 @@ function LinkCard({ - - {parsedUrl.host} - + {parsedUrl.host} @@ -357,7 +355,7 @@ function TextCard({ {bookmark.title && ( - + {bookmark.title} )} @@ -404,9 +402,7 @@ function AssetCard({ {title && ( - - {title} - + {title} )} @@ -481,9 +477,5 @@ export default function BookmarkCard({ break; } - return ( - - {comp} - - ); + return {comp}; } diff --git a/apps/mobile/components/bookmarks/BookmarkLinkPreview.tsx b/apps/mobile/components/bookmarks/BookmarkLinkPreview.tsx index c4a059cc..730bcd08 100644 --- a/apps/mobile/components/bookmarks/BookmarkLinkPreview.tsx +++ b/apps/mobile/components/bookmarks/BookmarkLinkPreview.tsx @@ -1,11 +1,12 @@ import { useState } from "react"; -import { Pressable, Text, View } from "react-native"; +import { Pressable, View } from "react-native"; import ImageView from "react-native-image-viewing"; import WebView from "react-native-webview"; import { WebViewSourceUri } from "react-native-webview/lib/WebViewTypes"; +import { Text } from "@/components/ui/Text"; import { useAssetUrl } from "@/lib/hooks"; import { api } from "@/lib/trpc"; -import { useColorScheme } from "nativewind"; +import { useColorScheme } from "@/lib/useColorScheme"; import { BookmarkTypes, ZBookmark } from "@karakeep/shared/types/bookmarks"; @@ -36,7 +37,7 @@ export function BookmarkLinkReaderPreview({ }: { bookmark: ZBookmark; }) { - const { colorScheme } = useColorScheme(); + const { isDarkColorScheme: isDark } = useColorScheme(); const { data: bookmarkWithContent, @@ -60,8 +61,6 @@ export function BookmarkLinkReaderPreview({ throw new Error("Wrong content type rendered"); } - const isDark = colorScheme === "dark"; - return ( } ListEmptyComponent={ - No Bookmarks + No Bookmarks } data={bookmarks} diff --git a/apps/mobile/components/bookmarks/PDFViewer.tsx b/apps/mobile/components/bookmarks/PDFViewer.tsx index 24b9edfb..c6412431 100644 --- a/apps/mobile/components/bookmarks/PDFViewer.tsx +++ b/apps/mobile/components/bookmarks/PDFViewer.tsx @@ -1,7 +1,8 @@ import React, { useEffect, useMemo, useState } from "react"; -import { ActivityIndicator, StyleSheet, Text, View } from "react-native"; +import { ActivityIndicator, StyleSheet, View } from "react-native"; import ReactNativeBlobUtil from "react-native-blob-util"; import Pdf from "react-native-pdf"; +import { Text } from "@/components/ui/Text"; import { useQuery } from "@tanstack/react-query"; import { useColorScheme } from "nativewind"; diff --git a/apps/mobile/components/bookmarks/TagPill.tsx b/apps/mobile/components/bookmarks/TagPill.tsx index eb9945e5..caf0f636 100644 --- a/apps/mobile/components/bookmarks/TagPill.tsx +++ b/apps/mobile/components/bookmarks/TagPill.tsx @@ -7,7 +7,7 @@ export default function TagPill({ tag }: { tag: ZBookmarkTags }) { return ( {tag.name} diff --git a/apps/mobile/components/ui/Button.tsx b/apps/mobile/components/ui/Button.tsx index 0f3b4ab3..312c3129 100644 --- a/apps/mobile/components/ui/Button.tsx +++ b/apps/mobile/components/ui/Button.tsx @@ -1,81 +1,200 @@ import type { VariantProps } from "class-variance-authority"; -import { Text, TouchableOpacity } from "react-native"; +import * as React from "react"; +import { + Platform, + Pressable, + PressableProps, + View, + ViewStyle, +} from "react-native"; +import { TextClassContext } from "@/components/ui/Text"; +import { useColorScheme } from "@/lib/useColorScheme"; import { cn } from "@/lib/utils"; +import { COLORS } from "@/theme/colors"; +import * as Slot from "@rn-primitives/slot"; import { cva } from "class-variance-authority"; -const buttonVariants = cva( - "flex flex-row items-center justify-center rounded-md", - { - variants: { - variant: { - default: "bg-primary", - secondary: "bg-secondary", - destructive: "bg-destructive", - ghost: "bg-slate-700", - link: "text-primary underline-offset-4", - }, - size: { - default: "h-10 px-4", - sm: "h-8 px-2", - lg: "h-12 px-8", - }, +const buttonVariants = cva("flex-row items-center justify-center gap-2", { + variants: { + variant: { + primary: "ios:active:opacity-80 bg-primary", + secondary: + "ios:border-primary ios:active:bg-primary/5 border border-foreground/40", + tonal: + "ios:bg-primary/10 dark:ios:bg-primary/10 ios:active:bg-primary/15 bg-primary/15 dark:bg-primary/30", + plain: "ios:active:opacity-70", + destructive: + "ios:bg-destructive border border-destructive/5 bg-destructive/80", }, - defaultVariants: { - variant: "default", - size: "default", + size: { + none: "", + sm: "rounded-full px-2.5 py-1", + md: "ios:rounded-lg ios:py-1.5 ios:px-3.5 rounded-full px-5 py-2", + lg: "ios:py-2 gap-2 rounded-xl px-5 py-2.5", + icon: "ios:rounded-lg h-10 w-10 rounded-full", }, }, -); + defaultVariants: { + variant: "primary", + size: "md", + }, +}); + +const androidRootVariants = cva("overflow-hidden", { + variants: { + size: { + none: "", + icon: "rounded-full", + sm: "rounded-full", + md: "rounded-full", + lg: "rounded-xl", + }, + }, + defaultVariants: { + size: "md", + }, +}); -const buttonTextVariants = cva("text-center font-medium", { +const buttonTextVariants = cva("font-medium", { variants: { variant: { - default: "text-primary-foreground", - secondary: "text-secondary-foreground", - destructive: "text-destructive-foreground", - ghost: "text-primary-foreground", - link: "text-primary-foreground underline", + primary: "text-white", + secondary: "ios:text-primary text-foreground", + tonal: "ios:text-primary text-foreground", + plain: "text-foreground", + destructive: "text-white", }, size: { - default: "text-base", - sm: "text-sm", - lg: "text-xl", + none: "", + icon: "", + sm: "text-[15px] leading-5", + md: "text-[17px] leading-7", + lg: "text-[17px] leading-7", }, }, defaultVariants: { - variant: "default", - size: "default", + variant: "primary", + size: "md", }, }); -interface ButtonProps - extends React.ComponentPropsWithoutRef, - VariantProps { - label: string; - labelClasses?: string; +function convertToRGBA(rgb: string, opacity: number): string { + const rgbValues = rgb.match(/\d+/g); + if (!rgbValues || rgbValues.length !== 3) { + throw new Error("Invalid RGB color format"); + } + const red = parseInt(rgbValues[0], 10); + const green = parseInt(rgbValues[1], 10); + const blue = parseInt(rgbValues[2], 10); + if (opacity < 0 || opacity > 1) { + throw new Error("Opacity must be a number between 0 and 1"); + } + return `rgba(${red},${green},${blue},${opacity})`; } -function Button({ - label, - labelClasses, - className, - variant, - size, - ...props -}: ButtonProps) { - return ( - - - {label} - - - ); + +const ANDROID_RIPPLE = { + dark: { + primary: { + color: convertToRGBA(COLORS.dark.grey3, 0.4), + borderless: false, + }, + secondary: { + color: convertToRGBA(COLORS.dark.grey5, 0.8), + borderless: false, + }, + plain: { color: convertToRGBA(COLORS.dark.grey5, 0.8), borderless: false }, + tonal: { color: convertToRGBA(COLORS.dark.grey5, 0.8), borderless: false }, + destructive: { + color: convertToRGBA(COLORS.dark.destructive, 0.8), + borderless: false, + }, + }, + light: { + primary: { + color: convertToRGBA(COLORS.light.grey4, 0.4), + borderless: false, + }, + secondary: { + color: convertToRGBA(COLORS.light.grey5, 0.4), + borderless: false, + }, + plain: { color: convertToRGBA(COLORS.light.grey5, 0.4), borderless: false }, + tonal: { color: convertToRGBA(COLORS.light.grey6, 0.4), borderless: false }, + destructive: { + color: convertToRGBA(COLORS.light.destructive, 0.4), + borderless: false, + }, + }, +}; + +// Add as class when possible: https://github.com/marklawlor/nativewind/issues/522 +const BORDER_CURVE: ViewStyle = { + borderCurve: "continuous", +}; + +type ButtonVariantProps = Omit< + VariantProps, + "variant" +> & { + variant?: Exclude["variant"], null>; +}; + +interface AndroidOnlyButtonProps { + /** + * ANDROID ONLY: The class name of root responsible for hidding the ripple overflow. + */ + androidRootClassName?: string; } -export { Button, buttonVariants, buttonTextVariants }; +type ButtonProps = PressableProps & ButtonVariantProps & AndroidOnlyButtonProps; + +const Root = Platform.OS === "android" ? View : Slot.Pressable; + +const Button = React.forwardRef< + React.ElementRef, + ButtonProps +>( + ( + { + className, + variant = "primary", + size, + style = BORDER_CURVE, + androidRootClassName, + ...props + }, + ref, + ) => { + const { colorScheme } = useColorScheme(); + + return ( + + + + + + ); + }, +); + +Button.displayName = "Button"; + +export { Button, buttonTextVariants, buttonVariants }; +export type { ButtonProps }; diff --git a/apps/mobile/components/ui/ChevronRight.tsx b/apps/mobile/components/ui/ChevronRight.tsx new file mode 100644 index 00000000..5b9af6e1 --- /dev/null +++ b/apps/mobile/components/ui/ChevronRight.tsx @@ -0,0 +1,11 @@ +import { useColorScheme } from "@/lib/useColorScheme"; +import { ChevronRightIcon } from "lucide-react-native"; + +export default function ChevronRight({ + color, + ...props +}: React.ComponentProps) { + const { colors } = useColorScheme(); + + return ; +} diff --git a/apps/mobile/components/ui/Divider.tsx b/apps/mobile/components/ui/Divider.tsx index fbc5cf64..bcc6144f 100644 --- a/apps/mobile/components/ui/Divider.tsx +++ b/apps/mobile/components/ui/Divider.tsx @@ -12,7 +12,7 @@ function Divider({ return ( ( {label && ( {label} )} - ( - + {loading && ( diff --git a/apps/mobile/components/ui/List.tsx b/apps/mobile/components/ui/List.tsx new file mode 100644 index 00000000..52ff5779 --- /dev/null +++ b/apps/mobile/components/ui/List.tsx @@ -0,0 +1,469 @@ +import type { + FlashListProps, + ListRenderItem as FlashListRenderItem, + ListRenderItemInfo, +} from "@shopify/flash-list"; +import * as React from "react"; +import { + Platform, + PressableProps, + StyleProp, + TextStyle, + View, + ViewProps, + ViewStyle, +} from "react-native"; +import { useSafeAreaInsets } from "react-native-safe-area-context"; +import { Button } from "@/components/ui/Button"; +import { Text, TextClassContext } from "@/components/ui/Text"; +import { cn } from "@/lib/utils"; +import { FlashList } from "@shopify/flash-list"; +import { cva } from "class-variance-authority"; +import { cssInterop } from "nativewind"; + +cssInterop(FlashList, { + className: "style", + contentContainerClassName: "contentContainerStyle", +}); + +type ListDataItem = string | { title: string; subTitle?: string }; +type ListVariant = "insets" | "full-width"; + +type ListRef = React.Ref>; + +type ListRenderItemProps = ListRenderItemInfo & { + variant?: ListVariant; + isFirstInSection?: boolean; + isLastInSection?: boolean; + sectionHeaderAsGap?: boolean; +}; + +type ListProps = Omit< + FlashListProps, + "renderItem" +> & { + renderItem?: ListRenderItem; + variant?: ListVariant; + sectionHeaderAsGap?: boolean; + rootClassName?: string; + rootStyle?: StyleProp; +}; +type ListRenderItem = ( + props: ListRenderItemProps, +) => ReturnType>; + +const rootVariants = cva("min-h-2 flex-1", { + variants: { + variant: { + insets: "ios:px-4", + "full-width": "ios:bg-card ios:dark:bg-background", + }, + sectionHeaderAsGap: { + true: "", + false: "", + }, + }, + compoundVariants: [ + { + variant: "full-width", + sectionHeaderAsGap: true, + className: "bg-card dark:bg-background", + }, + ], + defaultVariants: { + variant: "full-width", + sectionHeaderAsGap: false, + }, +}); + +function ListComponent({ + variant = "full-width", + rootClassName, + rootStyle, + contentContainerClassName, + renderItem, + data, + sectionHeaderAsGap = false, + contentInsetAdjustmentBehavior = "automatic", + ...props +}: ListProps) { + const insets = useSafeAreaInsets(); + return ( + + + + ); +} + +function getItemType(item: T) { + return typeof item === "string" ? "sectioHeader" : "row"; +} + +function renderItemWithVariant( + renderItem: ListRenderItem | null | undefined, + variant: ListVariant, + data: readonly T[] | null | undefined, + sectionHeaderAsGap?: boolean, +) { + return (args: ListRenderItemProps) => { + const previousItem = data?.[args.index - 1]; + const nextItem = data?.[args.index + 1]; + return renderItem + ? renderItem({ + ...args, + variant, + isFirstInSection: !previousItem || typeof previousItem === "string", + isLastInSection: !nextItem || typeof nextItem === "string", + sectionHeaderAsGap, + }) + : null; + }; +} + +const List = React.forwardRef(ListComponent) as ( + props: ListProps & { ref?: ListRef }, +) => React.ReactElement; + +function isPressable(props: PressableProps) { + return ( + ("onPress" in props && props.onPress) || + ("onLongPress" in props && props.onLongPress) || + ("onPressIn" in props && props.onPressIn) || + ("onPressOut" in props && props.onPressOut) || + ("onLongPress" in props && props.onLongPress) + ); +} + +type ListItemProps = PressableProps & + ListRenderItemProps & { + androidRootClassName?: string; + titleClassName?: string; + titleStyle?: StyleProp; + textNumberOfLines?: number; + subTitleClassName?: string; + subTitleStyle?: StyleProp; + subTitleNumberOfLines?: number; + textContentClassName?: string; + leftView?: React.ReactNode; + rightView?: React.ReactNode; + removeSeparator?: boolean; + }; +type ListItemRef = React.Ref; + +const itemVariants = cva("ios:gap-0 flex-row gap-0 bg-card", { + variants: { + variant: { + insets: "ios:bg-card bg-card/70", + "full-width": "bg-card dark:bg-background", + }, + sectionHeaderAsGap: { + true: "", + false: "", + }, + isFirstItem: { + true: "", + false: "", + }, + isFirstInSection: { + true: "", + false: "", + }, + removeSeparator: { + true: "", + false: "", + }, + isLastInSection: { + true: "", + false: "", + }, + disabled: { + true: "opacity-70", + false: "opacity-100", + }, + }, + compoundVariants: [ + { + variant: "insets", + sectionHeaderAsGap: true, + className: "ios:dark:bg-card dark:bg-card/70", + }, + { + variant: "insets", + isFirstInSection: true, + className: "ios:rounded-t-[10px]", + }, + { + variant: "insets", + isLastInSection: true, + className: "ios:rounded-b-[10px]", + }, + { + removeSeparator: false, + isLastInSection: true, + className: + "ios:border-b-0 border-b border-border/25 dark:border-border/80", + }, + { + variant: "insets", + isFirstItem: true, + className: "border-t border-border/40", + }, + ], + defaultVariants: { + variant: "insets", + sectionHeaderAsGap: false, + isFirstInSection: false, + isLastInSection: false, + disabled: false, + }, +}); + +function ListItemComponent( + { + item, + isFirstInSection, + isLastInSection, + index: _index, + variant, + className, + androidRootClassName, + titleClassName, + titleStyle, + textNumberOfLines, + subTitleStyle, + subTitleClassName, + subTitleNumberOfLines, + textContentClassName, + sectionHeaderAsGap, + removeSeparator = false, + leftView, + rightView, + disabled, + ...props + }: ListItemProps, + ref: ListItemRef, +) { + if (typeof item === "string") { + console.log( + "List.tsx", + "ListItemComponent", + "Invalid item of type 'string' was provided. Use ListSectionHeader instead.", + ); + return null; + } + return ( + <> + + {!removeSeparator && Platform.OS !== "ios" && !isLastInSection && ( + + + + )} + + ); +} + +const ListItem = React.forwardRef(ListItemComponent) as < + T extends ListDataItem, +>( + props: ListItemProps & { ref?: ListItemRef }, +) => React.ReactElement; + +type ListSectionHeaderProps = ViewProps & + ListRenderItemProps & { + textClassName?: string; + }; +type ListSectionHeaderRef = React.Ref; + +function ListSectionHeaderComponent( + { + item, + isFirstInSection: _isFirstInSection, + isLastInSection: _isLastInSection, + index: _index, + variant, + className, + textClassName, + sectionHeaderAsGap, + ...props + }: ListSectionHeaderProps, + ref: ListSectionHeaderRef, +) { + if (typeof item !== "string") { + console.log( + "List.tsx", + "ListSectionHeaderComponent", + "Invalid item provided. Expected type 'string'. Use ListItem instead.", + ); + return null; + } + + if (sectionHeaderAsGap) { + return ( + + + + ); + } + return ( + + + {item} + + + ); +} + +const ListSectionHeader = React.forwardRef(ListSectionHeaderComponent) as < + T extends ListDataItem, +>( + props: ListSectionHeaderProps & { ref?: ListSectionHeaderRef }, +) => React.ReactElement; + +const ESTIMATED_ITEM_HEIGHT = { + titleOnly: Platform.select({ ios: 45, default: 57 }), + withSubTitle: 56, +}; + +function getStickyHeaderIndices(data: T[]) { + if (!data) return []; + const indices: number[] = []; + for (let i = 0; i < data.length; i++) { + if (typeof data[i] === "string") { + indices.push(i); + } + } + return indices; +} + +export { + ESTIMATED_ITEM_HEIGHT, + List, + ListItem, + ListSectionHeader, + getStickyHeaderIndices, +}; +export type { + ListDataItem, + ListItemProps, + ListProps, + ListRenderItemInfo, + ListSectionHeaderProps, +}; diff --git a/apps/mobile/components/ui/PageTitle.tsx b/apps/mobile/components/ui/PageTitle.tsx index dc712379..28afa408 100644 --- a/apps/mobile/components/ui/PageTitle.tsx +++ b/apps/mobile/components/ui/PageTitle.tsx @@ -1,4 +1,4 @@ -import { Text } from "react-native"; +import { Text } from "@/components/ui/Text"; import { cx } from "class-variance-authority"; export default function PageTitle({ diff --git a/apps/mobile/components/ui/SearchInput/SearchInput.ios.tsx b/apps/mobile/components/ui/SearchInput/SearchInput.ios.tsx new file mode 100644 index 00000000..969e48b2 --- /dev/null +++ b/apps/mobile/components/ui/SearchInput/SearchInput.ios.tsx @@ -0,0 +1,187 @@ +import type { + NativeSyntheticEvent, + TextInputFocusEventData, +} from "react-native"; +import * as React from "react"; +import { Pressable, TextInput, View, ViewStyle } from "react-native"; +import Animated, { + measure, + useAnimatedRef, + useAnimatedStyle, + useDerivedValue, + withTiming, +} from "react-native-reanimated"; +import { Text } from "@/components/ui/Text"; +import { useColorScheme } from "@/lib/useColorScheme"; +import { cn } from "@/lib/utils"; +import { useAugmentedRef, useControllableState } from "@rn-primitives/hooks"; +import { Icon } from "@roninoss/icons"; + +import type { SearchInputProps } from "./types"; + +// Add as class when possible: https://github.com/marklawlor/nativewind/issues/522 +const BORDER_CURVE: ViewStyle = { + borderCurve: "continuous", +}; + +const SearchInput = React.forwardRef< + React.ElementRef, + SearchInputProps +>( + ( + { + value: valueProp, + onChangeText: onChangeTextProp, + onFocus: onFocusProp, + placeholder = "Search...", + cancelText = "Cancel", + containerClassName, + iconContainerClassName, + className, + iconColor, + onCancel, + ...props + }, + ref, + ) => { + const { colors } = useColorScheme(); + const inputRef = useAugmentedRef({ ref, methods: { focus, blur, clear } }); + const [showCancel, setShowCancel] = React.useState(false); + const showCancelDerivedValue = useDerivedValue( + () => showCancel, + [showCancel], + ); + const animatedRef = useAnimatedRef(); + + const [value = "", onChangeText] = useControllableState({ + prop: valueProp, + defaultProp: valueProp ?? "", + onChange: onChangeTextProp, + }); + + const rootStyle = useAnimatedStyle(() => { + if (_WORKLET) { + // safely use measure + const measurement = measure(animatedRef); + return { + paddingRight: showCancelDerivedValue.value + ? withTiming(measurement?.width ?? cancelText.length * 11.2) + : withTiming(0), + }; + } + return { + paddingRight: showCancelDerivedValue.value + ? withTiming(cancelText.length * 11.2) + : withTiming(0), + }; + }); + const buttonStyle3 = useAnimatedStyle(() => { + if (_WORKLET) { + // safely use measure + const measurement = measure(animatedRef); + return { + position: "absolute", + right: 0, + opacity: showCancelDerivedValue.value ? withTiming(1) : withTiming(0), + transform: [ + { + translateX: showCancelDerivedValue.value + ? withTiming(0) + : measurement?.width + ? withTiming(measurement.width) + : cancelText.length * 11.2, + }, + ], + }; + } + return { + position: "absolute", + right: 0, + opacity: showCancelDerivedValue.value ? withTiming(1) : withTiming(0), + transform: [ + { + translateX: showCancelDerivedValue.value + ? withTiming(0) + : withTiming(cancelText.length * 11.2), + }, + ], + }; + }); + + function focus() { + inputRef.current?.focus(); + } + + function blur() { + inputRef.current?.blur(); + } + + function clear() { + onChangeText(""); + } + + function onFocus(e: NativeSyntheticEvent) { + setShowCancel(true); + onFocusProp?.(e); + } + + return ( + + + + + + + + + { + onChangeText(""); + inputRef.current?.blur(); + setShowCancel(false); + onCancel?.(); + }} + disabled={!showCancel} + pointerEvents={!showCancel ? "none" : "auto"} + className="flex-1 justify-center active:opacity-50" + > + {cancelText} + + + + ); + }, +); + +SearchInput.displayName = "SearchInput"; + +export { SearchInput }; diff --git a/apps/mobile/components/ui/SearchInput/SearchInput.tsx b/apps/mobile/components/ui/SearchInput/SearchInput.tsx new file mode 100644 index 00000000..7e816ab6 --- /dev/null +++ b/apps/mobile/components/ui/SearchInput/SearchInput.tsx @@ -0,0 +1,114 @@ +import * as React from "react"; +import { Pressable, TextInput, View } from "react-native"; +import Animated, { FadeIn, FadeOut } from "react-native-reanimated"; +import { TailwindResolver } from "@/components/TailwindResolver"; +import { Button } from "@/components/ui/Button"; +import { useColorScheme } from "@/lib/useColorScheme"; +import { cn } from "@/lib/utils"; +import { useAugmentedRef, useControllableState } from "@rn-primitives/hooks"; +import { Icon } from "@roninoss/icons"; + +import type { SearchInputProps } from "./types"; + +const SearchInput = React.forwardRef< + React.ElementRef, + SearchInputProps +>( + ( + { + value: valueProp, + onChangeText: onChangeTextProp, + placeholder = "Search...", + containerClassName, + iconContainerClassName, + className, + onCancel, + ...props + }, + ref, + ) => { + const { colors } = useColorScheme(); + const inputRef = useAugmentedRef({ ref, methods: { focus, blur, clear } }); + const [value = "", onChangeText] = useControllableState({ + prop: valueProp, + defaultProp: valueProp ?? "", + onChange: onChangeTextProp, + }); + + function focus() { + inputRef.current?.focus(); + } + + function blur() { + inputRef.current?.blur(); + } + + function clear() { + onCancel?.(); + onChangeText(""); + } + + return ( + + ); + }, +); + +SearchInput.displayName = "SearchInput"; + +export { SearchInput }; diff --git a/apps/mobile/components/ui/SearchInput/index.ts b/apps/mobile/components/ui/SearchInput/index.ts new file mode 100644 index 00000000..e5150fe3 --- /dev/null +++ b/apps/mobile/components/ui/SearchInput/index.ts @@ -0,0 +1 @@ +export * from "./SearchInput"; diff --git a/apps/mobile/components/ui/SearchInput/types.ts b/apps/mobile/components/ui/SearchInput/types.ts new file mode 100644 index 00000000..e0be8a2c --- /dev/null +++ b/apps/mobile/components/ui/SearchInput/types.ts @@ -0,0 +1,13 @@ +import type { TextInput, TextInputProps } from "react-native"; + +interface SearchInputProps extends TextInputProps { + containerClassName?: string; + iconContainerClassName?: string; + cancelText?: string; + iconColor?: string; + onCancel?: () => void; +} + +type SearchInputRef = TextInput; + +export type { SearchInputProps, SearchInputRef }; diff --git a/apps/mobile/components/ui/Text.tsx b/apps/mobile/components/ui/Text.tsx new file mode 100644 index 00000000..e5590c75 --- /dev/null +++ b/apps/mobile/components/ui/Text.tsx @@ -0,0 +1,52 @@ +import * as React from "react"; +import { Text as RNText } from "react-native"; +import { cn } from "@/lib/utils"; +import { cva, VariantProps } from "class-variance-authority"; + +const textVariants = cva("text-foreground", { + variants: { + variant: { + largeTitle: "text-4xl", + title1: "text-2xl", + title2: "text-[22px] leading-7", + title3: "text-xl", + heading: "text-[17px] font-semibold leading-6", + body: "text-[17px] leading-6", + callout: "text-base", + subhead: "text-[15px] leading-6", + footnote: "text-[13px] leading-5", + caption1: "text-xs", + caption2: "text-[11px] leading-4", + }, + color: { + primary: "", + secondary: "text-secondary-foreground/90", + tertiary: "text-muted-foreground/90", + quarternary: "text-muted-foreground/50", + }, + }, + defaultVariants: { + variant: "body", + color: "primary", + }, +}); + +const TextClassContext = React.createContext(undefined); + +function Text({ + className, + variant, + color, + ...props +}: React.ComponentPropsWithoutRef & + VariantProps) { + const textClassName = React.useContext(TextClassContext); + return ( + + ); +} + +export { Text, TextClassContext, textVariants }; diff --git a/apps/mobile/components/ui/Toast.tsx b/apps/mobile/components/ui/Toast.tsx index 7bd2e64d..fd122c25 100644 --- a/apps/mobile/components/ui/Toast.tsx +++ b/apps/mobile/components/ui/Toast.tsx @@ -1,5 +1,6 @@ import { createContext, useContext, useEffect, useRef, useState } from "react"; -import { Animated, Text, View } from "react-native"; +import { Animated, View } from "react-native"; +import { Text } from "@/components/ui/Text"; import { cn } from "@/lib/utils"; const toastVariants = { diff --git a/apps/mobile/globals.css b/apps/mobile/globals.css index bf0da7e1..992b92cd 100644 --- a/apps/mobile/globals.css +++ b/apps/mobile/globals.css @@ -1 +1,131 @@ -@import "@karakeep/tailwind-config/globals"; +@tailwind base; +@tailwind components; +@tailwind utilities; + +@layer base { + :root { + --background: 242 242 247; + --foreground: 0 0 0; + --card: 255 255 255; + --card-foreground: 0 0 0; + --popover: 230 230 235; + --popover-foreground: 0 0 0; + --primary: 0 123 255; + --primary-foreground: 255 255 255; + --secondary: 45 185 227; + --secondary-foreground: 255 255 255; + --muted: 176 176 181; + --muted-foreground: 102 102 102; + --accent: 255 40 84; + --accent-foreground: 255 255 255; + --destructive: 255 56 43; + --destructive-foreground: 255 255 255; + --border: 230 230 235; + --input: 210 210 215; + --ring: 230 230 235; + + --android-background: 250 252 255; + --android-foreground: 27 28 29; + --android-card: 255 255 255; + --android-card-foreground: 24 28 35; + --android-popover: 215 217 228; + --android-popover-foreground: 0 0 0; + --android-primary: 0 112 233; + --android-primary-foreground: 255 255 255; + --android-secondary: 176 201 255; + --android-secondary-foreground: 28 60 114; + --android-muted: 176 176 181; + --android-muted-foreground: 102 102 102; + --android-accent: 169 73 204; + --android-accent-foreground: 255 255 255; + --android-destructive: 186 26 26; + --android-destructive-foreground: 255 255 255; + --android-border: 118 122 127; + --android-input: 197 201 206; + --android-ring: 118 122 127; + + --web-background: 250 252 255; + --web-foreground: 27 28 29; + --web-card: 255 255 255; + --web-card-foreground: 24 28 35; + --web-popover: 215 217 228; + --web-popover-foreground: 0 0 0; + --web-primary: 0 112 233; + --web-primary-foreground: 255 255 255; + --web-secondary: 176 201 255; + --web-secondary-foreground: 28 60 114; + --web-muted: 216 226 255; + --web-muted-foreground: 0 26 65; + --web-accent: 169 73 204; + --web-accent-foreground: 255 255 255; + --web-destructive: 186 26 26; + --web-destructive-foreground: 255 255 255; + --web-border: 118 122 127; + --web-input: 197 201 206; + --web-ring: 118 122 127; + } + + @media (prefers-color-scheme: dark) { + :root { + --background: 0 0 0; + --foreground: 255 255 255; + --card: 21 21 24; + --card-foreground: 255 255 255; + --popover: 40 40 40; + --popover-foreground: 255 255 255; + --primary: 3 133 255; + --primary-foreground: 255 255 255; + --secondary: 100 211 254; + --secondary-foreground: 255 255 255; + --muted: 112 112 115; + --muted-foreground: 226 226 231; + --accent: 255 52 95; + --accent-foreground: 255 255 255; + --destructive: 254 67 54; + --destructive-foreground: 255 255 255; + --border: 40 40 40; + --input: 51 51 51; + --ring: 40 40 40; + + --android-background: 24 28 32; + --android-foreground: 221 227 233; + --android-card: 36 40 44; + --android-card-foreground: 197 201 206; + --android-popover: 70 74 78; + --android-popover-foreground: 197 201 206; + --android-primary: 0 69 148; + --android-primary-foreground: 214 224 255; + --android-secondary: 28 60 114; + --android-secondary-foreground: 255 255 255; + --android-muted: 112 112 115; + --android-muted-foreground: 226 226 231; + --android-accent: 83 0 111; + --android-accent-foreground: 255 255 255; + --android-destructive: 147 0 10; + --android-destructive-foreground: 255 255 255; + --android-border: 143 148 153; + --android-input: 70 74 78; + --android-ring: 143 148 153; + + --web-background: 24 28 32; + --web-foreground: 221 227 233; + --web-card: 70 74 78; + --web-card-foreground: 197 201 206; + --web-popover: 70 74 78; + --web-popover-foreground: 197 201 206; + --web-primary: 0 69 148; + --web-primary-foreground: 214 224 255; + --web-secondary: 28 60 114; + --web-secondary-foreground: 255 255 255; + --web-muted: 29 27 29; + --web-muted-foreground: 230 224 228; + --web-accent: 83 0 111; + --web-accent-foreground: 255 255 255; + --web-destructive: 147 0 10; + --web-destructive-foreground: 255 255 255; + --web-border: 143 148 153; + --web-input: 70 74 78; + --web-ring: 143 148 153; + } + } +} diff --git a/apps/mobile/lib/useColorScheme.tsx b/apps/mobile/lib/useColorScheme.tsx new file mode 100644 index 00000000..a00a445d --- /dev/null +++ b/apps/mobile/lib/useColorScheme.tsx @@ -0,0 +1,58 @@ +import * as React from "react"; +import { Platform } from "react-native"; +import * as NavigationBar from "expo-navigation-bar"; +import useAppSettings from "@/lib/settings"; +import { COLORS } from "@/theme/colors"; +import { useColorScheme as useNativewindColorScheme } from "nativewind"; + +function useColorScheme() { + const { settings, isLoading } = useAppSettings(); + const { colorScheme, setColorScheme: setNativewindColorScheme } = + useNativewindColorScheme(); + + // Sync user settings with native color scheme + React.useEffect(() => { + setNativewindColorScheme(settings.theme); + }, [settings.theme, isLoading]); + + React.useEffect(() => { + if (Platform.OS === "android") { + setNavigationBar(colorScheme ?? "light").catch((error) => { + console.error('useColorScheme.tsx", "setColorScheme', error); + }); + } + }, [colorScheme]); + + return { + colorScheme: colorScheme ?? "light", + isDarkColorScheme: colorScheme === "dark", + colors: COLORS[colorScheme ?? "light"], + }; +} + +/** + * Set the Android navigation bar color based on the color scheme. + */ +function useInitialAndroidBarSync() { + const { colorScheme } = useColorScheme(); + React.useEffect(() => { + if (Platform.OS !== "android") return; + setNavigationBar(colorScheme).catch((error) => { + console.error('useColorScheme.tsx", "useInitialColorScheme', error); + }); + }, []); +} + +export { useColorScheme, useInitialAndroidBarSync }; + +function setNavigationBar(colorScheme: "light" | "dark") { + return Promise.all([ + NavigationBar.setButtonStyleAsync( + colorScheme === "dark" ? "light" : "dark", + ), + NavigationBar.setPositionAsync("absolute"), + NavigationBar.setBackgroundColorAsync( + colorScheme === "dark" ? "#00000030" : "#ffffff80", + ), + ]); +} diff --git a/apps/mobile/metro.config.js b/apps/mobile/metro.config.js index f9679cb2..78f79c62 100644 --- a/apps/mobile/metro.config.js +++ b/apps/mobile/metro.config.js @@ -9,7 +9,8 @@ module.exports = withTurborepoManagedCache( // eslint-disable-next-line no-undef withNativeWind(getDefaultConfig(__dirname), { input: "./globals.css", - configPath: "./tailwind.config.ts", + configPath: "./tailwind.config.js", + inlineRem: 16, }), ), ); diff --git a/apps/mobile/package.json b/apps/mobile/package.json index 0ed5668c..61c6ec6e 100644 --- a/apps/mobile/package.json +++ b/apps/mobile/package.json @@ -20,6 +20,10 @@ "@karakeep/trpc": "workspace:^0.1.0", "@react-native-async-storage/async-storage": "1.23.1", "@react-native-menu/menu": "^1.2.4", + "@rn-primitives/hooks": "^1.3.0", + "@rn-primitives/slot": "^1.2.0", + "@roninoss/icons": "^0.0.4", + "@shopify/flash-list": "^2.0.3", "@tanstack/react-query": "^5.80.3", "class-variance-authority": "^0.7.0", "clsx": "^2.1.0", @@ -29,7 +33,7 @@ "expo-clipboard": "^7.1.4", "expo-constants": "~17.1.6", "expo-dev-client": "^5.2.0", - "expo-file-system": "~18.0.12", + "expo-file-system": "~18.1.11", "expo-haptics": "^14.1.4", "expo-image": "^2.2.0", "expo-image-picker": "^16.1.4", @@ -50,6 +54,7 @@ "react-native-blob-util": "^0.21.2", "react-native-gesture-handler": "~2.24.0", "react-native-image-viewing": "^0.2.2", + "react-native-keyboard-controller": "^1.18.5", "react-native-markdown-display": "^7.0.2", "react-native-pdf": "^6.7.7", "react-native-reanimated": "^3.17.5", diff --git a/apps/mobile/tailwind.config.js b/apps/mobile/tailwind.config.js new file mode 100644 index 00000000..74a9f30a --- /dev/null +++ b/apps/mobile/tailwind.config.js @@ -0,0 +1,66 @@ +const { hairlineWidth, platformSelect } = require("nativewind/theme"); + +/** @type {import('tailwindcss').Config} */ +module.exports = { + // NOTE: Update this to include the paths to all of your component files. + content: ["./app/**/*.{js,jsx,ts,tsx}", "./components/**/*.{js,jsx,ts,tsx}"], + presets: [require("nativewind/preset")], + theme: { + extend: { + colors: { + border: withOpacity("border"), + input: withOpacity("input"), + ring: withOpacity("ring"), + background: withOpacity("background"), + foreground: withOpacity("foreground"), + primary: { + DEFAULT: withOpacity("primary"), + foreground: withOpacity("primary-foreground"), + }, + secondary: { + DEFAULT: withOpacity("secondary"), + foreground: withOpacity("secondary-foreground"), + }, + destructive: { + DEFAULT: withOpacity("destructive"), + foreground: withOpacity("destructive-foreground"), + }, + muted: { + DEFAULT: withOpacity("muted"), + foreground: withOpacity("muted-foreground"), + }, + accent: { + DEFAULT: withOpacity("accent"), + foreground: withOpacity("accent-foreground"), + }, + popover: { + DEFAULT: withOpacity("popover"), + foreground: withOpacity("popover-foreground"), + }, + card: { + DEFAULT: withOpacity("card"), + foreground: withOpacity("card-foreground"), + }, + }, + borderWidth: { + hairline: hairlineWidth(), + }, + }, + }, + plugins: [], +}; + +function withOpacity(variableName) { + return ({ opacityValue }) => { + if (opacityValue !== undefined) { + return platformSelect({ + ios: `rgb(var(--${variableName}) / ${opacityValue})`, + android: `rgb(var(--android-${variableName}) / ${opacityValue})`, + }); + } + return platformSelect({ + ios: `rgb(var(--${variableName}))`, + android: `rgb(var(--android-${variableName}))`, + }); + }; +} diff --git a/apps/mobile/tailwind.config.ts b/apps/mobile/tailwind.config.ts deleted file mode 100644 index 03712ec4..00000000 --- a/apps/mobile/tailwind.config.ts +++ /dev/null @@ -1,11 +0,0 @@ -import type { Config } from "tailwindcss"; - -import base from "@karakeep/tailwind-config/native"; - -const config = { - content: base.content, - plugins: [], - presets: [base, require("nativewind/preset")], -} satisfies Config; - -export default config; diff --git a/apps/mobile/theme/colors.ts b/apps/mobile/theme/colors.ts new file mode 100644 index 00000000..626bcb99 --- /dev/null +++ b/apps/mobile/theme/colors.ts @@ -0,0 +1,109 @@ +import { Platform } from "react-native"; + +const IOS_SYSTEM_COLORS = { + white: "rgb(255, 255, 255)", + black: "rgb(0, 0, 0)", + light: { + grey6: "rgb(242, 242, 247)", + grey5: "rgb(230, 230, 235)", + grey4: "rgb(210, 210, 215)", + grey3: "rgb(199, 199, 204)", + grey2: "rgb(176, 176, 181)", + grey: "rgb(153, 153, 158)", + background: "rgb(242, 242, 247)", + foreground: "rgb(0, 0, 0)", + root: "rgb(242, 242, 247)", + card: "rgb(242, 242, 247)", + destructive: "rgb(255, 56, 43)", + primary: "rgb(0, 123, 255)", + }, + dark: { + grey6: "rgb(21, 21, 24)", + grey5: "rgb(40, 40, 40)", + grey4: "rgb(51, 51, 51)", + grey3: "rgb(70, 70, 70)", + grey2: "rgb(99, 99, 99)", + grey: "rgb(158, 158, 158)", + background: "rgb(0, 0, 0)", + foreground: "rgb(255, 255, 255)", + root: "rgb(0, 0, 0)", + card: "rgb(0, 0, 0)", + destructive: "rgb(254, 67, 54)", + primary: "rgb(3, 133, 255)", + }, +} as const; + +const ANDROID_COLORS = { + white: "rgb(255, 255, 255)", + black: "rgb(0, 0, 0)", + light: { + grey6: "rgb(242, 242, 247)", + grey5: "rgb(230, 230, 235)", + grey4: "rgb(210, 210, 215)", + grey3: "rgb(199, 199, 204)", + grey2: "rgb(176, 176, 181)", + grey: "rgb(153, 153, 158)", + background: "rgb(250, 252, 255)", + foreground: "rgb(27, 28, 29)", + root: "rgb(250, 252, 255)", + card: "rgb(250, 252, 255)", + destructive: "rgb(186, 26, 26)", + primary: "rgb(0, 112, 233)", + }, + dark: { + grey6: "rgb(21, 21, 24)", + grey5: "rgb(40, 40, 40)", + grey4: "rgb(51, 51, 51)", + grey3: "rgb(70, 70, 70)", + grey2: "rgb(99, 99, 99)", + grey: "rgb(158, 158, 158)", + background: "rgb(24, 28, 32)", + foreground: "rgb(221, 227, 233)", + root: "rgb(24, 28, 32)", + card: "rgb(24, 28, 32)", + destructive: "rgb(147, 0, 10)", + primary: "rgb(0, 69, 148)", + }, +} as const; + +const WEB_COLORS = { + white: "rgb(255, 255, 255)", + black: "rgb(0, 0, 0)", + light: { + grey6: "rgb(250, 252, 255)", + grey5: "rgb(243, 247, 251)", + grey4: "rgb(236, 242, 248)", + grey3: "rgb(233, 239, 247)", + grey2: "rgb(229, 237, 245)", + grey: "rgb(226, 234, 243)", + background: "rgb(250, 252, 255)", + foreground: "rgb(27, 28, 29)", + root: "rgb(250, 252, 255)", + card: "rgb(250, 252, 255)", + destructive: "rgb(186, 26, 26)", + primary: "rgb(0, 112, 233)", + }, + dark: { + grey6: "rgb(25, 30, 36)", + grey5: "rgb(31, 38, 45)", + grey4: "rgb(35, 43, 52)", + grey3: "rgb(38, 48, 59)", + grey2: "rgb(40, 51, 62)", + grey: "rgb(44, 56, 68)", + background: "rgb(24, 28, 32)", + foreground: "rgb(221, 227, 233)", + root: "rgb(24, 28, 32)", + card: "rgb(24, 28, 32)", + destructive: "rgb(147, 0, 10)", + primary: "rgb(0, 69, 148)", + }, +} as const; + +const COLORS = + Platform.OS === "ios" + ? IOS_SYSTEM_COLORS + : Platform.OS === "android" + ? ANDROID_COLORS + : WEB_COLORS; + +export { COLORS }; diff --git a/apps/mobile/theme/index.ts b/apps/mobile/theme/index.ts new file mode 100644 index 00000000..05b42bf7 --- /dev/null +++ b/apps/mobile/theme/index.ts @@ -0,0 +1,30 @@ +import { DarkTheme, DefaultTheme } from "@react-navigation/native"; + +import { COLORS } from "./colors"; + +const NAV_THEME = { + light: { + ...DefaultTheme, + colors: { + background: COLORS.light.background, + border: COLORS.light.grey5, + card: COLORS.light.card, + notification: COLORS.light.destructive, + primary: COLORS.light.primary, + text: COLORS.black, + }, + }, + dark: { + ...DarkTheme, + colors: { + background: COLORS.dark.background, + border: COLORS.dark.grey5, + card: COLORS.dark.grey6, + notification: COLORS.dark.destructive, + primary: COLORS.dark.primary, + text: COLORS.white, + }, + }, +}; + +export { NAV_THEME }; -- cgit v1.2.3-70-g09d2