From f2c0ab0945742672128a15372b0f5331d97f929d Mon Sep 17 00:00:00 2001 From: Khairul Hidayat Date: Fri, 15 Nov 2024 09:39:35 +0000 Subject: [PATCH] feat: update ui for android --- frontend/app.config.ts | 1 - frontend/app/(drawer)/_layout.tsx | 7 +- frontend/app/_providers.tsx | 34 +- frontend/components/containers/drawer.tsx | 20 +- .../containers/server-stats-bar.tsx | 1 + frontend/components/containers/terminal.tsx | 1 + .../components/containers/theme-switcher.tsx | 25 +- .../containers/user-menu-button.tsx | 9 +- frontend/components/ui/menu-button.tsx | 13 +- frontend/components/ui/pager-view.tsx | 64 +- frontend/components/ui/pager-view.web.tsx | 72 +- frontend/eas.json | 3 - frontend/hooks/useDebounce.ts | 4 +- frontend/package.json | 4 +- frontend/pages/auth/login.tsx | 4 +- frontend/pages/server/page.tsx | 12 +- .../terminal/components/session-tabs.tsx | 3 +- frontend/pages/terminal/page.tsx | 44 +- frontend/pages/terminal/sessions-page.tsx | 2 +- frontend/pnpm-lock.yaml | 1482 ++++++++++------- frontend/tamagui.config.ts | 2 +- 21 files changed, 1006 insertions(+), 801 deletions(-) diff --git a/frontend/app.config.ts b/frontend/app.config.ts index 73cc29f..ccece38 100644 --- a/frontend/app.config.ts +++ b/frontend/app.config.ts @@ -34,7 +34,6 @@ export default ({ config }: ConfigContext): ExpoConfig => ({ experiments: { typedRoutes: true, }, - owner: "khairul169", extra: { eas: { projectId: "3e0112c1-f0ed-423c-b5cf-95633f23f6dc", diff --git a/frontend/app/(drawer)/_layout.tsx b/frontend/app/(drawer)/_layout.tsx index 3b81a20..28b031c 100644 --- a/frontend/app/(drawer)/_layout.tsx +++ b/frontend/app/(drawer)/_layout.tsx @@ -20,9 +20,12 @@ export default function Layout() { drawerContent={DrawerContent} screenOptions={{ drawerType: media.sm ? "front" : "permanent", - drawerStyle: { width: 250 }, + drawerStyle: { + width: !media.sm ? 250 : "80%", + padding: 0, + }, headerLeft: media.sm ? undefined : () => null, - headerStyle: {elevation: 0, borderBottomWidth: 0} + headerStyle: { elevation: 0, borderBottomWidth: 0 }, }} > { + return ( + + + + {children} + + + + ); +}; -const Providers = ({ children }: Props) => { +const ThemeProvider = ({ children }: PropsWithChildren) => { const colorScheme = useThemeStore((i) => i.theme); const theme = useMemo(() => { @@ -40,17 +50,13 @@ const Providers = ({ children }: Props) => { }, [theme, colorScheme]); return ( - - - - - - {children} - - - - - + + + + {children} + + + ); }; diff --git a/frontend/components/containers/drawer.tsx b/frontend/components/containers/drawer.tsx index dd97e1a..16c9034 100644 --- a/frontend/components/containers/drawer.tsx +++ b/frontend/components/containers/drawer.tsx @@ -4,7 +4,7 @@ import { DrawerContentScrollView, DrawerNavigationOptions as NavProps, } from "@react-navigation/drawer"; -import { Button, View } from "tamagui"; +import { Button, Text, View } from "tamagui"; import { CommonActions, DrawerActions, @@ -24,19 +24,25 @@ const Drawer = (props: DrawerContentComponentProps) => { return ( - + - + ); @@ -85,7 +91,11 @@ const DrawerItemList = ({ onPress={onPress} icon={drawerIcon?.({ size: 16, color: "$color", focused }) as never} size="$4" - $xs={{ size: "$5", borderRadius: 999, borderWidth: 0 }} + $xs={{ size: "$5" }} + borderRadius={0} + borderTopRightRadius="$10" + borderBottomRightRadius="$10" + borderWidth={0} > {drawerLabel !== undefined ? drawerLabel diff --git a/frontend/components/containers/server-stats-bar.tsx b/frontend/components/containers/server-stats-bar.tsx index 7f0cde5..9c10584 100644 --- a/frontend/components/containers/server-stats-bar.tsx +++ b/frontend/components/containers/server-stats-bar.tsx @@ -61,6 +61,7 @@ const ServerStatsBar = ({ url }: Props) => { return ( { horizontal flexGrow={0} contentContainerStyle={{ flexDirection: "row" }} + $gtSm={{ display: "none" }} > } diff --git a/frontend/components/containers/theme-switcher.tsx b/frontend/components/containers/theme-switcher.tsx index ba6ef25..3c89d69 100644 --- a/frontend/components/containers/theme-switcher.tsx +++ b/frontend/components/containers/theme-switcher.tsx @@ -12,21 +12,28 @@ const ThemeSwitcher = ({ iconSize = 18, ...props }: Props) => { const id = useId(); return ( - - - + + + + + diff --git a/frontend/components/containers/user-menu-button.tsx b/frontend/components/containers/user-menu-button.tsx index 965def1..abc69db 100644 --- a/frontend/components/containers/user-menu-button.tsx +++ b/frontend/components/containers/user-menu-button.tsx @@ -7,7 +7,6 @@ import { Text, useMedia, View, - YGroup, } from "tamagui"; import MenuButton from "../ui/menu-button"; import Icons from "../ui/icons"; @@ -29,8 +28,11 @@ const UserMenuButton = () => { trigger={ } > @@ -59,6 +61,7 @@ const UserMenuButton = () => { title="Logout" /> + ); diff --git a/frontend/components/ui/menu-button.tsx b/frontend/components/ui/menu-button.tsx index 163ce16..86390f2 100644 --- a/frontend/components/ui/menu-button.tsx +++ b/frontend/components/ui/menu-button.tsx @@ -25,7 +25,7 @@ const MenuButtonFrame = ({ {trigger} - + {/* - {/* */} - {children} + - + */} ) => { - if (Platform.OS === "android" || Platform.OS === "ios") { - return ; - } - return ( - + ); diff --git a/frontend/components/ui/pager-view.tsx b/frontend/components/ui/pager-view.tsx index 50efba4..9c7a6ee 100644 --- a/frontend/components/ui/pager-view.tsx +++ b/frontend/components/ui/pager-view.tsx @@ -1,52 +1,30 @@ -import { useDebounceCallback } from "@/hooks/useDebounce"; -import React, { ComponentPropsWithoutRef, useEffect, useRef } from "react"; +import React, { ComponentPropsWithoutRef, forwardRef } from "react"; import RNPagerView from "react-native-pager-view"; export type PagerViewProps = ComponentPropsWithoutRef & { - page?: number; onChangePage?: (page: number) => void; - EmptyComponent?: () => JSX.Element; }; -const PagerView = ({ - page, - onChangePage, - EmptyComponent, - children, - ...props -}: PagerViewProps) => { - const ref = useRef(null); - - const [onPageSelect, clearPageSelectDebounce] = useDebounceCallback( - (page) => onChangePage?.(page), - 300 - ); - - const [setPage] = useDebounceCallback((page) => { - ref.current?.setPage(page); - clearPageSelectDebounce(); - }, 100); - - useEffect(() => { - if (page != null) { - const npage = EmptyComponent != null ? page + 1 : page; - setPage(npage); - } - }, [page, EmptyComponent]); - - return ( - { - const pos = e.nativeEvent.position; - onPageSelect(EmptyComponent ? pos - 1 : pos); - }} - > - {EmptyComponent ? : null} - {children} - - ); +export type PagerViewRef = { + setPage: (page: number) => void; + setPageWithoutAnimation: (page: number) => void; }; +const PagerView = forwardRef( + ({ onChangePage, children, ...props }, ref) => { + return ( + { + const pos = e.nativeEvent.position; + onChangePage?.(pos); + }} + > + {children} + + ); + } +); + export default PagerView; diff --git a/frontend/components/ui/pager-view.web.tsx b/frontend/components/ui/pager-view.web.tsx index 93c2da5..f21f68b 100644 --- a/frontend/components/ui/pager-view.web.tsx +++ b/frontend/components/ui/pager-view.web.tsx @@ -1,48 +1,40 @@ -import React, { useEffect, useMemo, useState } from "react"; +import React, { + forwardRef, + useImperativeHandle, + useMemo, + useState, +} from "react"; import { View } from "react-native"; -import { PagerViewProps } from "./pager-view"; +import { PagerViewProps, PagerViewRef } from "./pager-view"; -const PagerView = ({ - EmptyComponent, - children, - page, - initialPage, -}: PagerViewProps) => { - const [curPage, setPage] = useState(page || initialPage || 0); +const PagerView = forwardRef( + ({ children, initialPage }, ref) => { + const [curPage, setPage] = useState(initialPage || 0); - useEffect(() => { - if (page != null) { - setPage(page); - } - }, [page]); + useImperativeHandle(ref, () => ({ + setPage, + setPageWithoutAnimation: setPage, + })); - const content = useMemo(() => { - if (!Array.isArray(children)) { - return null; - } + const content = useMemo(() => { + if (!Array.isArray(children)) { + return null; + } - return children.map((element, index) => { - return ( - - {element} - - ); - }); - }, [curPage, children]); + return children.map((element, index) => { + return ( + + {element} + + ); + }); + }, [curPage, children]); - const pageElement = useMemo(() => { - return Array.isArray(children) ? children[curPage] : null; - }, [curPage, children]); - - return ( - <> - {!pageElement && EmptyComponent ? : null} - {content} - - ); -}; + return content; + } +); export default PagerView; diff --git a/frontend/eas.json b/frontend/eas.json index 8679de5..566fe19 100644 --- a/frontend/eas.json +++ b/frontend/eas.json @@ -11,9 +11,6 @@ "distribution": "internal", "android": { "buildType": "apk" - }, - "env": { - "EXPO_PUBLIC_API_URL": "https://vaulterm-dev.rul.sh" } }, "production": {} diff --git a/frontend/hooks/useDebounce.ts b/frontend/hooks/useDebounce.ts index 46c6a6d..77c993b 100644 --- a/frontend/hooks/useDebounce.ts +++ b/frontend/hooks/useDebounce.ts @@ -1,4 +1,4 @@ -import { useCallback, useMemo, useRef } from "react"; +import { useCallback, useRef } from "react"; export const useDebounceCallback = any>( callback: T, @@ -24,5 +24,5 @@ export const useDebounceCallback = any>( [delay, clear] ); - return [fn, clear] as const; + return fn; }; diff --git a/frontend/package.json b/frontend/package.json index fefad52..0cc62d2 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -24,7 +24,7 @@ "@react-native-async-storage/async-storage": "1.23.1", "@react-navigation/drawer": "7.0.0", "@react-navigation/native": "7.0.0", - "@tamagui/config": "^1.116.14", + "@tamagui/config": "^1.116.15", "@tanstack/react-query": "^5.59.20", "@xterm/addon-attach": "^0.11.0", "@xterm/addon-fit": "^0.10.0", @@ -53,7 +53,7 @@ "react-native-screens": "4.0.0", "react-native-web": "~0.19.13", "react-native-webview": "^13.12.2", - "tamagui": "^1.116.14", + "tamagui": "^1.116.15", "zod": "3.23.8", "zustand": "^5.0.1" }, diff --git a/frontend/pages/auth/login.tsx b/frontend/pages/auth/login.tsx index 4ca99b0..2796985 100644 --- a/frontend/pages/auth/login.tsx +++ b/frontend/pages/auth/login.tsx @@ -33,9 +33,7 @@ export default function LoginPage() { }, title: "Login", headerTitle: "", - headerRight: () => ( - - ), + headerRight: () => , }} /> diff --git a/frontend/pages/server/page.tsx b/frontend/pages/server/page.tsx index 22008e3..22f52fd 100644 --- a/frontend/pages/server/page.tsx +++ b/frontend/pages/server/page.tsx @@ -46,9 +46,7 @@ export default function ServerPage() { marginHorizontal: "auto", }, title: "Vaulterm", - headerRight: () => ( - - ), + headerRight: () => , }} /> @@ -66,7 +64,13 @@ export default function ServerPage() { - +