diff --git a/apps/mobile/src/components/drawer/DrawerLibraryManager.tsx b/apps/mobile/src/components/drawer/DrawerLibraryManager.tsx index 6c9a4b46fa77..3078aae82ad1 100644 --- a/apps/mobile/src/components/drawer/DrawerLibraryManager.tsx +++ b/apps/mobile/src/components/drawer/DrawerLibraryManager.tsx @@ -13,6 +13,7 @@ import { ModalRef } from '../layout/Modal'; import CreateLibraryModal from '../modal/CreateLibraryModal'; import ImportModalLibrary from '../modal/ImportLibraryModal'; import { Divider } from '../primitive/Divider'; +import { FeatureUnavailableAlert } from '../primitive/FeatureUnavailableAlert'; const DrawerLibraryManager = () => { const [dropdownClosed, setDropdownClosed] = useState(true); @@ -117,8 +118,8 @@ const DrawerLibraryManager = () => { {/* Lock */} - Alert.alert('TODO')}> - + FeatureUnavailableAlert()}> + Lock diff --git a/apps/mobile/src/components/explorer/Explorer.tsx b/apps/mobile/src/components/explorer/Explorer.tsx index 302fef546901..36cc6bfc427c 100644 --- a/apps/mobile/src/components/explorer/Explorer.tsx +++ b/apps/mobile/src/components/explorer/Explorer.tsx @@ -2,7 +2,7 @@ import { useNavigation } from '@react-navigation/native'; import { FlashList } from '@shopify/flash-list'; import { UseInfiniteQueryResult } from '@tanstack/react-query'; import * as Haptics from 'expo-haptics'; -import { ActivityIndicator, Pressable } from 'react-native'; +import { ActivityIndicator, Pressable, View } from 'react-native'; import FileViewer from 'react-native-file-viewer'; import { getIndexedItemFilePath, @@ -12,7 +12,7 @@ import { type ExplorerItem } from '@sd/client'; import Layout from '~/constants/Layout'; -import { twStyle } from '~/lib/tailwind'; +import { tw, twStyle } from '~/lib/tailwind'; import { BrowseStackScreenProps } from '~/navigation/tabs/BrowseStack'; import { useExplorerStore } from '~/stores/explorerStore'; import { useActionsModalStore } from '~/stores/modalStore'; @@ -130,7 +130,8 @@ const Explorer = (props: Props) => { )} contentContainerStyle={twStyle( - store.layoutMode !== 'media' ? 'px-2 py-5' : 'px-0' + store.layoutMode !== 'media' ? 'px-2 pt-5' : 'px-0', + store.layoutMode === 'grid' && 'pt-9' )} extraData={store.layoutMode} estimatedItemSize={ @@ -142,6 +143,7 @@ const Explorer = (props: Props) => { ? Layout.window.width / store.mediaColumns : 100 } + // ItemSeparatorComponent={() => } onEndReached={() => props.loadMore?.()} onEndReachedThreshold={0.6} ListFooterComponent={ diff --git a/apps/mobile/src/components/explorer/FileMedia.tsx b/apps/mobile/src/components/explorer/FileMedia.tsx index 6c7b4e7fc97a..a5f0f51fe4a5 100644 --- a/apps/mobile/src/components/explorer/FileMedia.tsx +++ b/apps/mobile/src/components/explorer/FileMedia.tsx @@ -12,7 +12,6 @@ type FileMediaProps = { const FileMedia = ({ data }: FileMediaProps) => { const gridItemSize = Layout.window.width / getExplorerStore().mediaColumns; - const isAndroid = Platform.OS === 'android'; return ( { height: gridItemSize })} > - + ); }; diff --git a/apps/mobile/src/components/explorer/FileThumb.tsx b/apps/mobile/src/components/explorer/FileThumb.tsx index 1054227786e6..a4332bd11c14 100644 --- a/apps/mobile/src/components/explorer/FileThumb.tsx +++ b/apps/mobile/src/components/explorer/FileThumb.tsx @@ -12,7 +12,7 @@ import { } from '@sd/client'; import { flattenThumbnailKey, useExplorerStore } from '~/stores/explorerStore'; -import { tw } from '../../lib/tailwind'; +import { twStyle } from '../../lib/tailwind'; // NOTE: `file://` is required for Android to load local files! export const getThumbnailUrlByThumbKey = (thumbKey: ThumbKey) => { @@ -23,13 +23,17 @@ export const getThumbnailUrlByThumbKey = (thumbKey: ThumbKey) => { const FileThumbWrapper = ({ children, + mediaView = false, size = 1, fixedSize = false -}: PropsWithChildren<{ size: number; fixedSize: boolean }>) => ( +}: PropsWithChildren<{ size: number; fixedSize: boolean; mediaView: boolean }>) => ( {children} @@ -70,6 +74,7 @@ type FileThumbProps = { data: ExplorerItem; size?: number; fixedSize?: boolean; + mediaView?: boolean; // loadOriginal?: boolean; }; @@ -77,8 +82,14 @@ type FileThumbProps = { * @param data This is the ExplorerItem object * @param size This is multiplier for calculating icon size * @param fixedSize If set to true, the icon will have fixed size + * @param mediaView If set to true - file thumbs will adjust their sizing accordingly */ -export default function FileThumb({ size = 1, fixedSize = false, ...props }: FileThumbProps) { +export default function FileThumb({ + size = 1, + fixedSize = false, + mediaView = false, + ...props +}: FileThumbProps) { const itemData = useExplorerItemData(props.data); const locationData = getItemLocation(props.data); @@ -118,7 +129,7 @@ export default function FileThumb({ size = 1, fixedSize = false, ...props }: Fil }, [itemData, thumbType]); return ( - + {(() => { if (src == null) return null; let source = null; @@ -133,8 +144,9 @@ export default function FileThumb({ size = 1, fixedSize = false, ...props }: Fil cachePolicy="memory-disk" source={source} style={{ - width: fixedSize ? size : 70 * size, - height: fixedSize ? size : 70 * size + flex: !mediaView ? undefined : 1, + width: !mediaView ? (fixedSize ? size : 70 * size) : '100%', + height: !mediaView ? (fixedSize ? size : 70 * size) : '100%' }} /> ); diff --git a/apps/mobile/src/components/primitive/FeatureUnavailableAlert.tsx b/apps/mobile/src/components/primitive/FeatureUnavailableAlert.tsx new file mode 100644 index 000000000000..7c8eec6fb5c1 --- /dev/null +++ b/apps/mobile/src/components/primitive/FeatureUnavailableAlert.tsx @@ -0,0 +1,16 @@ +import { Alert } from 'react-native'; + +export function FeatureUnavailableAlert() { + return Alert.alert( + 'Coming soon', + 'This feature is not available right now. Please check back later.', + [ + { + text: 'Close' + } + ], + { + userInterfaceStyle: 'dark' + } + ); +} diff --git a/apps/mobile/src/components/settings/SettingsItem.tsx b/apps/mobile/src/components/settings/SettingsItem.tsx index 375085b9e0bd..fc2d25b847ca 100644 --- a/apps/mobile/src/components/settings/SettingsItem.tsx +++ b/apps/mobile/src/components/settings/SettingsItem.tsx @@ -1,12 +1,15 @@ import { CaretRight, Icon } from 'phosphor-react-native'; -import { Pressable, Text, View } from 'react-native'; +import { Alert, Pressable, Text, View } from 'react-native'; import { tw, twStyle } from '~/lib/tailwind'; +import { FeatureUnavailableAlert } from '../primitive/FeatureUnavailableAlert'; + type SettingsItemProps = { title: string; onPress?: () => void; leftIcon?: Icon; rightArea?: React.ReactNode; + comingSoon?: boolean; rounded?: 'top' | 'bottom'; }; @@ -22,18 +25,27 @@ export function SettingsItem(props: SettingsItemProps) { ? 'border-b border-r border-l' : 'border-l border-r'; return ( - + { + if (props.comingSoon) return FeatureUnavailableAlert(); + return props.onPress?.(); + }} + > {props.leftIcon && ( {props.leftIcon({ size: 20, color: tw.color('ink-dull') })} )} SectionType[] = (debugState) => [ }, { icon: PaintBrush, + comingSoon: true, navigateTo: 'AppearanceSettings', title: 'Appearance' }, { icon: ShieldCheck, navigateTo: 'PrivacySettings', + comingSoon: true, title: 'Privacy' }, { icon: PuzzlePiece, navigateTo: 'ExtensionsSettings', title: 'Extensions', - rounded: 'bottom' + rounded: 'bottom', + comingSoon: true } ] }, @@ -82,6 +86,7 @@ const sections: (debugState: DebugState) => SectionType[] = (debugState) => [ { icon: ShareNetwork, navigateTo: 'NodesSettings', + comingSoon: true, title: 'Nodes' }, { @@ -159,6 +164,7 @@ export default function SettingsScreen({ navigation }: SettingsStackScreenProps< sections={sections(debugState)} renderItem={({ item }) => ( navigation.navigate(item.navigateTo as any)} diff --git a/apps/mobile/src/screens/settings/info/Debug.tsx b/apps/mobile/src/screens/settings/info/Debug.tsx index 994aae7c0270..61afef43f93a 100644 --- a/apps/mobile/src/screens/settings/info/Debug.tsx +++ b/apps/mobile/src/screens/settings/info/Debug.tsx @@ -24,7 +24,7 @@ const DebugScreen = ({ navigation }: SettingsStackScreenProps<'Debug'>) => { return ( - + Debug