diff --git a/apps/mobile/src/components/modal/ImportLibraryModal.tsx b/apps/mobile/src/components/modal/ImportLibraryModal.tsx index 0e47d20ad..29e12367d 100644 --- a/apps/mobile/src/components/modal/ImportLibraryModal.tsx +++ b/apps/mobile/src/components/modal/ImportLibraryModal.tsx @@ -1,7 +1,5 @@ import { BottomSheetFlatList } from '@gorhom/bottom-sheet'; import { NavigationProp, useNavigation } from '@react-navigation/native'; -import { forwardRef } from 'react'; -import { ActivityIndicator, Text, View } from 'react-native'; import { CloudLibrary, useBridgeMutation, @@ -9,6 +7,8 @@ import { useClientContext, useRspcContext } from '@sd/client'; +import { forwardRef } from 'react'; +import { ActivityIndicator, Text, View } from 'react-native'; import { Modal, ModalRef } from '~/components/layout/Modal'; import { Button } from '~/components/primitive/Button'; import useForwardedRef from '~/hooks/useForwardedRef'; @@ -36,6 +36,7 @@ const ImportModalLibrary = forwardRef((_, ref) => { snapPoints={cloudLibrariesData?.length !== 0 ? ['30', '50'] : ['30']} title="Join a Cloud Library" showCloseButton + onDismiss={() => cloudLibraries.refetch()} > {cloudLibraries.isLoading ? ( @@ -59,7 +60,7 @@ const ImportModalLibrary = forwardRef((_, ref) => { icon="Drive" style={tw`mt-2 border-0`} iconSize={46} - description="You don't have any cloud libraries" + description="No cloud libraries available to join" /> } keyExtractor={(item) => item.uuid} diff --git a/apps/mobile/src/screens/settings/library/CloudSettings/CloudSettings.tsx b/apps/mobile/src/screens/settings/library/CloudSettings/CloudSettings.tsx index e26e7a7f5..b904005bd 100644 --- a/apps/mobile/src/screens/settings/library/CloudSettings/CloudSettings.tsx +++ b/apps/mobile/src/screens/settings/library/CloudSettings/CloudSettings.tsx @@ -1,6 +1,6 @@ +import { useLibraryContext, useLibraryMutation, useLibraryQuery } from '@sd/client'; import { useMemo } from 'react'; import { ActivityIndicator, FlatList, Text, View } from 'react-native'; -import { useLibraryContext, useLibraryMutation, useLibraryQuery } from '@sd/client'; import Card from '~/components/layout/Card'; import Empty from '~/components/layout/Empty'; import ScreenContainer from '~/components/layout/ScreenContainer'; @@ -15,7 +15,7 @@ import Library from './Library'; import Login from './Login'; import ThisInstance from './ThisInstance'; -export const InfoBox = styled(View, 'rounded-md border border-app bg-transparent p-2'); +export const InfoBox = styled(View, 'rounded-md border gap-1 border-app bg-transparent p-2'); const CloudSettings = () => { return ( @@ -60,7 +60,6 @@ const Authenticated = () => { - { showsHorizontalScrollIndicator={false} ItemSeparatorComponent={() => } renderItem={({ item }) => ( - + )} keyExtractor={(item) => item.id} - numColumns={(cloudInstances?.length ?? 0) > 1 ? 2 : 1} - {...((cloudInstances?.length ?? 0) > 1 - ? { columnWrapperStyle: tw`w-full justify-between` } - : {})} + numColumns={1} /> diff --git a/apps/mobile/src/screens/settings/library/CloudSettings/Instance.tsx b/apps/mobile/src/screens/settings/library/CloudSettings/Instance.tsx index 6ae58e587..81538e826 100644 --- a/apps/mobile/src/screens/settings/library/CloudSettings/Instance.tsx +++ b/apps/mobile/src/screens/settings/library/CloudSettings/Instance.tsx @@ -1,40 +1,55 @@ +import { CloudInstance, HardwareModel } from '@sd/client'; import { Text, View } from 'react-native'; -import { CloudInstance } from '@sd/client'; -import { SettingsTitle } from '~/components/settings/SettingsContainer'; -import { tw, twStyle } from '~/lib/tailwind'; +import { tw } from '~/lib/tailwind'; +import { Icon } from '~/components/icons/Icon'; +import { hardwareModelToIcon } from '~/components/overview/Devices'; import { InfoBox } from './CloudSettings'; interface Props { data: CloudInstance; - length: number; } -const Instance = ({ data, length }: Props) => { +const Instance = ({ data }: Props) => { return ( - 1 ? 'w-[49%]' : 'w-full', 'gap-4')}> + - Id + + + + {data.metadata.name} - + + Id: + {data.id} + - UUID - + + UUID: + {data.uuid} + - Public Key - + + Public key: + {data.identity} + diff --git a/apps/mobile/src/screens/settings/library/CloudSettings/Library.tsx b/apps/mobile/src/screens/settings/library/CloudSettings/Library.tsx index 965b5be27..5bd825da2 100644 --- a/apps/mobile/src/screens/settings/library/CloudSettings/Library.tsx +++ b/apps/mobile/src/screens/settings/library/CloudSettings/Library.tsx @@ -1,7 +1,7 @@ +import { CloudLibrary, useLibraryContext, useLibraryMutation } from '@sd/client'; import { CheckCircle, XCircle } from 'phosphor-react-native'; import { useMemo } from 'react'; import { Text, View } from 'react-native'; -import { CloudLibrary, useLibraryContext, useLibraryMutation } from '@sd/client'; import Card from '~/components/layout/Card'; import { Button } from '~/components/primitive/Button'; import { Divider } from '~/components/primitive/Divider'; @@ -41,21 +41,21 @@ const Library = ({ cloudLibrary }: LibraryProps) => { diff --git a/apps/mobile/src/screens/settings/library/CloudSettings/ThisInstance.tsx b/apps/mobile/src/screens/settings/library/CloudSettings/ThisInstance.tsx index 1a2ab3697..e17d00f0c 100644 --- a/apps/mobile/src/screens/settings/library/CloudSettings/ThisInstance.tsx +++ b/apps/mobile/src/screens/settings/library/CloudSettings/ThisInstance.tsx @@ -1,11 +1,12 @@ +import { CloudLibrary, HardwareModel, useLibraryContext } from '@sd/client'; import { useMemo } from 'react'; import { Text, View } from 'react-native'; -import { CloudLibrary, useLibraryContext } from '@sd/client'; import Card from '~/components/layout/Card'; import { Divider } from '~/components/primitive/Divider'; -import { SettingsTitle } from '~/components/settings/SettingsContainer'; import { tw } from '~/lib/tailwind'; +import { Icon } from '~/components/icons/Icon'; +import { hardwareModelToIcon } from '~/components/overview/Devices'; import { InfoBox } from './CloudSettings'; interface ThisInstanceProps { @@ -22,29 +23,44 @@ const ThisInstance = ({ cloudLibrary }: ThisInstanceProps) => { if (!thisInstance) return null; return ( - + This Instance + + + {thisInstance.metadata.name} + - Id - {thisInstance.id} + + Id: + {thisInstance.id} + - UUID - {thisInstance.uuid} + + UUID: + {thisInstance.uuid} + - Public Key - + + Publc Key: + {thisInstance.identity} + diff --git a/interface/app/$libraryId/debug/cloud.tsx b/interface/app/$libraryId/debug/cloud.tsx index 4c83f4d75..e783514b3 100644 --- a/interface/app/$libraryId/debug/cloud.tsx +++ b/interface/app/$libraryId/debug/cloud.tsx @@ -1,15 +1,15 @@ import { CheckCircle, XCircle } from '@phosphor-icons/react'; -import { Suspense, useMemo } from 'react'; import { - auth, CloudInstance, CloudLibrary, HardwareModel, + auth, useLibraryContext, useLibraryMutation, useLibraryQuery } from '@sd/client'; import { Button, Card, Loader, tw } from '@sd/ui'; +import { Suspense, useMemo } from 'react'; import { Icon } from '~/components'; import { AuthRequiredOverlay } from '~/components/AuthRequiredOverlay'; import { LoginButton } from '~/components/LoginButton'; @@ -25,7 +25,7 @@ export const Component = () => { if (authState.status === 'loggedIn') return ; if (authState.status === 'notLoggedIn' || authState.status === 'loggingIn') return ( -
+

To access cloud related features, please login

@@ -36,12 +36,13 @@ export const Component = () => { return null; }; - return
{authSensitiveChild()}
; + return
{authSensitiveChild()}
; }; const DataBox = tw.div`max-w-[300px] rounded-md border border-app-line/50 bg-app-lightBox/20 p-2`; const Count = tw.div`min-w-[20px] flex h-[20px] px-1 items-center justify-center rounded-full border border-app-button/40 text-[9px]`; +// million-ignore function Authenticated() { const { library } = useLibraryContext(); const cloudLibrary = useLibraryQuery(['cloud.library.get'], { suspense: true, retry: false }); @@ -58,7 +59,7 @@ function Authenticated() { return ( +
} @@ -70,7 +71,7 @@ function Authenticated() {
) : ( -
+
@@ -184,11 +187,12 @@ interface ThisInstanceProps { instance: CloudInstance; } +// million-ignore const ThisInstance = ({ instance }: ThisInstanceProps) => { return (
-

This Instance

- +

This Instance

+
{
-

+

Id: {instance.id}

-

+

UUID: {instance.uuid}

-

+

Public Key:{' '} {instance.identity}

diff --git a/interface/app/onboarding/join-library.tsx b/interface/app/onboarding/join-library.tsx index 917eaaebe..4ed91c0f0 100644 --- a/interface/app/onboarding/join-library.tsx +++ b/interface/app/onboarding/join-library.tsx @@ -27,7 +27,7 @@ export function JoinLibrary() {
Cloud Libraries -
    +