diff --git a/apps/mobile/app/components/side-menu/user-status.js b/apps/mobile/app/components/side-menu/user-status.js index 5fa4933df..6ef28b276 100644 --- a/apps/mobile/app/components/side-menu/user-status.js +++ b/apps/mobile/app/components/side-menu/user-status.js @@ -98,7 +98,10 @@ export const UserStatus = () => { <> Synced{" "} @@ -114,7 +117,7 @@ export const UserStatus = () => { !user || lastSyncStatus === SyncStatus.Failed ? colors.error.icon : isOffline - ? colors.warning.icon + ? colors.static.orange : colors.success.icon } /> @@ -142,7 +145,11 @@ export const UserStatus = () => { syncing ? ( ) : lastSyncStatus === SyncStatus.Failed ? ( - + ) : ( ) diff --git a/apps/mobile/app/components/ui/pressable/index.tsx b/apps/mobile/app/components/ui/pressable/index.tsx index eb8e60be2..5ef33ccb7 100644 --- a/apps/mobile/app/components/ui/pressable/index.tsx +++ b/apps/mobile/app/components/ui/pressable/index.tsx @@ -133,9 +133,9 @@ export const useButton = ({ selected: colors.error.background }, warn: { - primary: colors.warning.background, - text: colors.warning.paragraph, - selected: colors.warning.background + primary: colors.static.orange, + text: colors.static.white, + selected: colors.static.orange } }; diff --git a/apps/mobile/app/screens/settings/debug.tsx b/apps/mobile/app/screens/settings/debug.tsx index c71af3200..41e2fbc4c 100644 --- a/apps/mobile/app/screens/settings/debug.tsx +++ b/apps/mobile/app/screens/settings/debug.tsx @@ -88,14 +88,14 @@ export default function DebugLogs() { item.level === LogLevel.Error || item.level === LogLevel.Fatal ? hexToRGBA(colors.error.paragraph, 0.2) : item.level === LogLevel.Warn - ? hexToRGBA(colors.warning.icon, 0.2) + ? hexToRGBA(colors.static.orange, 0.2) : "transparent"; const color = item.level === LogLevel.Error || item.level === LogLevel.Fatal ? colors.error.paragraph : item.level === LogLevel.Warn - ? colors.warning.icon + ? colors.static.black : colors.primary.paragraph; return !item ? null : ( @@ -134,7 +134,6 @@ export default function DebugLogs() { }, [ colors.secondary.background, - colors.warning.icon, colors.primary.paragraph, colors.error.paragraph ] diff --git a/apps/mobile/app/screens/settings/theme-selector.tsx b/apps/mobile/app/screens/settings/theme-selector.tsx index 19518e5d6..a5cb6020e 100644 --- a/apps/mobile/app/screens/settings/theme-selector.tsx +++ b/apps/mobile/app/screens/settings/theme-selector.tsx @@ -16,23 +16,37 @@ GNU General Public License for more details. You should have received a copy of the GNU General Public License along with this program. If not, see . */ -import { ThemeDefinition, useThemeColors } from "@notesnook/theme"; -import type { ThemesRouter } from "@notesnook/themes-server"; +import { THEME_COMPATIBILITY_VERSION, useThemeColors } from "@notesnook/theme"; +import type { + CompiledThemeDefinition, + ThemeMetadata, + ThemesRouter +} from "@notesnook/themes-server"; +import Icon from "react-native-vector-icons/MaterialCommunityIcons"; +import { MasonryFlashList } from "@shopify/flash-list"; import { QueryClient, QueryClientProvider } from "@tanstack/react-query"; import { createTRPCProxyClient, httpBatchLink } from "@trpc/client"; import { createTRPCReact } from "@trpc/react-query"; import React, { useState } from "react"; -import { ActivityIndicator, TouchableOpacity, View } from "react-native"; +import { + ActivityIndicator, + Linking, + TouchableOpacity, + View +} from "react-native"; +import { db } from "../../common/database"; import SheetProvider from "../../components/sheet-provider"; import { Button } from "../../components/ui/button"; +import Input from "../../components/ui/input"; import Heading from "../../components/ui/typography/heading"; import Paragraph from "../../components/ui/typography/paragraph"; import { ToastEvent, presentSheet } from "../../services/event-manager"; import { useThemeStore } from "../../stores/use-theme-store"; import { SIZE } from "../../utils/size"; -import { MasonryFlashList } from "@shopify/flash-list"; -import Input from "../../components/ui/input"; -const THEME_SERVER_URL = "http://192.168.43.127:1000"; +import { getElevationStyle } from "../../utils/elevation"; +import { MenuItemsList } from "../../utils/constants"; + +const THEME_SERVER_URL = "http://192.168.43.127:9000"; //@ts-ignore export const themeTrpcClient = createTRPCProxyClient({ links: [ @@ -44,35 +58,44 @@ export const themeTrpcClient = createTRPCProxyClient({ function ThemeSelector() { const { colors } = useThemeColors(); + const themeColors = colors; + const [searchQuery, setSearchQuery] = useState(); + const [colorScheme, setColorScheme] = useState(); const themes = trpc.themes.useInfiniteQuery( { - limit: 10 + limit: 10, + compatibilityVersion: THEME_COMPATIBILITY_VERSION, + filters: [ + ...(searchQuery && searchQuery !== "" + ? [ + { + type: "term" as const, + value: searchQuery + } + ] + : []), + ...(colorScheme && colorScheme !== "" + ? [ + { + type: "colorScheme" as const, + value: colorScheme + } + ] + : []) + ] }, { getNextPageParam: (lastPage) => lastPage.nextCursor } ); - const [searchQuery, setSearchQuery] = useState(); - const searchResults = trpc.search.useInfiniteQuery( - { limit: 10, query: searchQuery || "" }, - { - enabled: false, - getNextPageParam: (lastPage) => lastPage.nextCursor - } - ); - const select = (item: Partial) => { + const select = (item: Partial) => { presentSheet({ context: item.id, component: (ref, close) => }); }; - const renderItem = ({ - item - }: { - item: Omit; - index: number; - }) => { + const renderItem = ({ item }: { item: ThemeMetadata; index: number }) => { const colors = item.previewColors; return ( @@ -81,77 +104,150 @@ function ThemeSelector() { select(item)} > - + > + {MenuItemsList.map((item, index) => ( + + + + + + ))} + + > + + + + + Notes + + + + + + - + + {item.name} - {item.description} - - - By {item.author} + {/* + {item.description} + */} + + By {item.authors?.[0].name} ); }; let resetTimer: NodeJS.Timeout; - let refetchTimer: NodeJS.Timeout; + //let refetchTimer: NodeJS.Timeout; const onSearch = (text: string) => { clearTimeout(resetTimer as NodeJS.Timeout); resetTimer = setTimeout(() => { setSearchQuery(text); - clearTimeout(refetchTimer); - refetchTimer = setTimeout(() => { - searchResults.refetch(); - }, 300); - }, 500); + // clearTimeout(refetchTimer); + // refetchTimer = setTimeout(() => { + // themes.refetch(); + // }, 300); + }, 400); }; - function getThemes() { - const pages = searchQuery ? searchResults.data?.pages : themes.data?.pages; + function getThemes(): ThemeMetadata[] { + const pages = themes.data?.pages; return ( pages ?.map((page) => { @@ -170,10 +266,46 @@ function ThemeSelector() { > + + +