From 9f752f1fb3e8ed12495859a407508143348f602b Mon Sep 17 00:00:00 2001 From: ameer2468 <33054370+ameer2468@users.noreply.github.com> Date: Fri, 16 Feb 2024 12:20:03 +0300 Subject: [PATCH 1/4] wip: redesigning settings pages --- .../src/components/primitive/Button.tsx | 1 + .../components/settings/SettingsButton.tsx | 36 +++++++++++ .../components/settings/SettingsContainer.tsx | 8 +-- .../src/components/settings/SettingsItem.tsx | 4 +- .../components/settings/SettingsToggle.tsx | 34 +++++++++++ .../src/navigation/tabs/SettingsStack.tsx | 36 ++++++----- .../settings/client/AppearanceSettings.tsx | 60 +++++++++---------- .../settings/client/ExtensionsSettings.tsx | 5 +- .../settings/client/GeneralSettings.tsx | 15 ++--- .../settings/client/LibrarySettings.tsx | 35 +++++++---- .../settings/client/PrivacySettings.tsx | 5 +- .../library/LibraryGeneralSettings.tsx | 42 ++++++++----- 12 files changed, 189 insertions(+), 92 deletions(-) create mode 100644 apps/mobile/src/components/settings/SettingsButton.tsx create mode 100644 apps/mobile/src/components/settings/SettingsToggle.tsx diff --git a/apps/mobile/src/components/primitive/Button.tsx b/apps/mobile/src/components/primitive/Button.tsx index 29820c23153f..fba1f2748152 100644 --- a/apps/mobile/src/components/primitive/Button.tsx +++ b/apps/mobile/src/components/primitive/Button.tsx @@ -30,6 +30,7 @@ const button = cva(['items-center justify-center rounded-md border shadow-sm'], }); type ButtonProps = VariantProps & PressableProps; +export type ButtonVariants = VariantProps['variant']; export const Button: FC = ({ variant, size, disabled, ...props }) => { const { style, ...otherProps } = props; diff --git a/apps/mobile/src/components/settings/SettingsButton.tsx b/apps/mobile/src/components/settings/SettingsButton.tsx new file mode 100644 index 000000000000..9f4eaa86bdd1 --- /dev/null +++ b/apps/mobile/src/components/settings/SettingsButton.tsx @@ -0,0 +1,36 @@ +import { Text, View } from 'react-native'; +import { tw, twStyle } from '~/lib/tailwind'; + +import { Button, ButtonVariants } from '../primitive/Button'; + +interface Props { + buttonText: string; + title: string; + description?: string; + buttonPress: () => void; + buttonVariant?: ButtonVariants; + buttonTextStyle?: string; +} + +const SettingsButton = ({ + buttonText, + title, + description, + buttonVariant, + buttonTextStyle, + buttonPress +}: Props) => { + return ( + + + {title} + {description && {description}} + + + + ); +}; + +export default SettingsButton; diff --git a/apps/mobile/src/components/settings/SettingsContainer.tsx b/apps/mobile/src/components/settings/SettingsContainer.tsx index c24165ece0b6..a67cca1c798e 100644 --- a/apps/mobile/src/components/settings/SettingsContainer.tsx +++ b/apps/mobile/src/components/settings/SettingsContainer.tsx @@ -10,14 +10,12 @@ type SettingsContainerProps = PropsWithChildren<{ export function SettingsContainer({ children, title, description }: SettingsContainerProps) { return ( - {title && ( - {title} - )} + {title && {title}} {children} - {description && {description}} + {description && {description}} ); } -export const SettingsTitle = styled(Text, 'text-ink mb-1.5 ml-1 text-sm font-medium'); +export const SettingsTitle = styled(Text, 'text-ink text-sm font-medium'); export const SettingsInputInfo = styled(Text, 'mt-2 text-xs text-ink-faint'); diff --git a/apps/mobile/src/components/settings/SettingsItem.tsx b/apps/mobile/src/components/settings/SettingsItem.tsx index 1b878da39c4d..48aff60f2cba 100644 --- a/apps/mobile/src/components/settings/SettingsItem.tsx +++ b/apps/mobile/src/components/settings/SettingsItem.tsx @@ -24,10 +24,10 @@ export function SettingsItem(props: SettingsItemProps) { return ( - + {props.leftIcon && ( {props.leftIcon({ size: 20, color: tw.color('ink-dull') })} diff --git a/apps/mobile/src/components/settings/SettingsToggle.tsx b/apps/mobile/src/components/settings/SettingsToggle.tsx new file mode 100644 index 000000000000..94acb95cf7a3 --- /dev/null +++ b/apps/mobile/src/components/settings/SettingsToggle.tsx @@ -0,0 +1,34 @@ +import { useState } from 'react'; +import { Switch, Text, View } from 'react-native'; +import { tw } from '~/lib/tailwind'; + +interface Props { + title: string; + description?: string; + onEnabledChange?: (enabled: boolean) => void; +} + +const SettingsToggle = ({ title, description, onEnabledChange }: Props) => { + const [isEnabled, setIsEnabled] = useState(false); + return ( + + + {title} + {description && {description}} + + { + setIsEnabled(!isEnabled); + onEnabledChange?.(!isEnabled); + }} + /> + + ); +}; + +export default SettingsToggle; diff --git a/apps/mobile/src/navigation/tabs/SettingsStack.tsx b/apps/mobile/src/navigation/tabs/SettingsStack.tsx index 99c3c082cc98..74081ccc0719 100644 --- a/apps/mobile/src/navigation/tabs/SettingsStack.tsx +++ b/apps/mobile/src/navigation/tabs/SettingsStack.tsx @@ -43,55 +43,53 @@ export default function SettingsStack() {
}} />
}} />
}} />
}} />
}} /> {/* Library */}
}} />
}} />
}} />
}} />
}} /> {/* */} {/* Info */} - +
}} + />
}} + /> +
}} /> - ); } diff --git a/apps/mobile/src/screens/settings/client/AppearanceSettings.tsx b/apps/mobile/src/screens/settings/client/AppearanceSettings.tsx index 818b3636d47d..53c196a53599 100644 --- a/apps/mobile/src/screens/settings/client/AppearanceSettings.tsx +++ b/apps/mobile/src/screens/settings/client/AppearanceSettings.tsx @@ -2,6 +2,7 @@ import { CheckCircle } from 'phosphor-react-native'; import React, { useState } from 'react'; import { ColorValue, Pressable, ScrollView, Text, View, ViewStyle } from 'react-native'; import { Themes, useThemeStore } from '@sd/client'; +import ScreenContainer from '~/components/layout/ScreenContainer'; import { SettingsTitle } from '~/components/settings/SettingsContainer'; import Colors from '~/constants/style/Colors'; import { tw, twStyle } from '~/lib/tailwind'; @@ -70,7 +71,7 @@ function Theme(props: ThemeProps) { {/* Checkmark */} {props.isSelected && ( + @@ -103,7 +104,7 @@ function SystemTheme(props: { isSelected: boolean }) { {/* Checkmark */} {props.isSelected && ( - - Theme - - - {themes.map((theme) => ( - setSelectedTheme(theme.themeValue)} - > - {theme.themeValue === 'system' ? ( - - ) : ( - - )} - - {theme.themeName} - - - ))} - - - + + Theme + + {themes.map((theme) => ( + setSelectedTheme(theme.themeValue)} + > + {theme.themeValue === 'system' ? ( + + ) : ( + + )} + + {theme.themeName} + + + ))} + + ); }; diff --git a/apps/mobile/src/screens/settings/client/ExtensionsSettings.tsx b/apps/mobile/src/screens/settings/client/ExtensionsSettings.tsx index 3f4fae10147b..8dbb36cfa35c 100644 --- a/apps/mobile/src/screens/settings/client/ExtensionsSettings.tsx +++ b/apps/mobile/src/screens/settings/client/ExtensionsSettings.tsx @@ -1,5 +1,6 @@ import React from 'react'; import { Text, View } from 'react-native'; +import ScreenContainer from '~/components/layout/ScreenContainer'; import { tw } from '~/lib/tailwind'; import { SettingsStackScreenProps } from '~/navigation/tabs/SettingsStack'; @@ -7,9 +8,9 @@ const ExtensionsSettingsScreen = ({ navigation }: SettingsStackScreenProps<'ExtensionsSettings'>) => { return ( - + TODO - + ); }; diff --git a/apps/mobile/src/screens/settings/client/GeneralSettings.tsx b/apps/mobile/src/screens/settings/client/GeneralSettings.tsx index 9e5c5f24e6bb..e96fc098c36f 100644 --- a/apps/mobile/src/screens/settings/client/GeneralSettings.tsx +++ b/apps/mobile/src/screens/settings/client/GeneralSettings.tsx @@ -2,6 +2,7 @@ import { Text, View } from 'react-native'; import { useBridgeQuery, useDebugState } from '@sd/client'; import { Input } from '~/components/form/Input'; import Card from '~/components/layout/Card'; +import ScreenContainer from '~/components/layout/ScreenContainer'; import { Divider } from '~/components/primitive/Divider'; import { SettingsTitle } from '~/components/settings/SettingsContainer'; import { tw } from '~/lib/tailwind'; @@ -15,7 +16,7 @@ const GeneralSettingsScreen = ({ navigation }: SettingsStackScreenProps<'General if (!node) return null; return ( - + {/* Card Header */} @@ -32,11 +33,11 @@ const GeneralSettingsScreen = ({ navigation }: SettingsStackScreenProps<'General {/* Divider */} - + {/* Node Name and Port */} - Node Name + Node Name - Node Port + Node Port {debugState.enabled && ( @@ -44,13 +45,13 @@ const GeneralSettingsScreen = ({ navigation }: SettingsStackScreenProps<'General {/* Card Header */} Debug {/* Divider */} - - Data Folder + + Data Folder {/* Useful for simulator, not so for real devices. */} )} - + ); }; diff --git a/apps/mobile/src/screens/settings/client/LibrarySettings.tsx b/apps/mobile/src/screens/settings/client/LibrarySettings.tsx index a4b5c742cf0d..6b63028e70a1 100644 --- a/apps/mobile/src/screens/settings/client/LibrarySettings.tsx +++ b/apps/mobile/src/screens/settings/client/LibrarySettings.tsx @@ -3,7 +3,9 @@ import React, { useEffect, useRef } from 'react'; import { Animated, FlatList, Text, View } from 'react-native'; import { Swipeable } from 'react-native-gesture-handler'; import { LibraryConfigWrapped, useBridgeQuery, useCache, useNodes } from '@sd/client'; +import Fade from '~/components/layout/Fade'; import { ModalRef } from '~/components/layout/Modal'; +import ScreenContainer from '~/components/layout/ScreenContainer'; import DeleteLibraryModal from '~/components/modal/confirmModals/DeleteLibraryModal'; import { AnimatedButton, FakeButton } from '~/components/primitive/Button'; import { tw, twStyle } from '~/lib/tailwind'; @@ -58,10 +60,10 @@ function LibraryItem({ > - {library.config.name} - {library.uuid} + {library.config.name} + {library.uuid} - + ); @@ -90,15 +92,24 @@ const LibrarySettingsScreen = ({ navigation }: SettingsStackScreenProps<'Library const modalRef = useRef(null); return ( - - item.uuid} - renderItem={({ item, index }) => ( - - )} - /> - + + + item.uuid} + renderItem={({ item, index }) => ( + + )} + /> + + ); }; diff --git a/apps/mobile/src/screens/settings/client/PrivacySettings.tsx b/apps/mobile/src/screens/settings/client/PrivacySettings.tsx index dcd8cc60984e..944a350a7688 100644 --- a/apps/mobile/src/screens/settings/client/PrivacySettings.tsx +++ b/apps/mobile/src/screens/settings/client/PrivacySettings.tsx @@ -1,12 +1,13 @@ import React from 'react'; import { Text, View } from 'react-native'; +import ScreenContainer from '~/components/layout/ScreenContainer'; import { tw } from '~/lib/tailwind'; const PrivacySettingsScreen = () => { return ( - + TODO - + ); }; diff --git a/apps/mobile/src/screens/settings/library/LibraryGeneralSettings.tsx b/apps/mobile/src/screens/settings/library/LibraryGeneralSettings.tsx index 51686d538ef3..7e4bd4535be0 100644 --- a/apps/mobile/src/screens/settings/library/LibraryGeneralSettings.tsx +++ b/apps/mobile/src/screens/settings/library/LibraryGeneralSettings.tsx @@ -1,16 +1,15 @@ -import { Trash } from 'phosphor-react-native'; import React from 'react'; import { Controller } from 'react-hook-form'; -import { Alert, Text, View } from 'react-native'; +import { Text, View } from 'react-native'; import { z } from 'zod'; import { useBridgeMutation, useLibraryContext, useZodForm } from '@sd/client'; import { Input } from '~/components/form/Input'; -import { Switch } from '~/components/form/Switch'; +import ScreenContainer from '~/components/layout/ScreenContainer'; import DeleteLibraryModal from '~/components/modal/confirmModals/DeleteLibraryModal'; -import { FakeButton } from '~/components/primitive/Button'; import { Divider } from '~/components/primitive/Divider'; -import { SettingsContainer, SettingsTitle } from '~/components/settings/SettingsContainer'; -import { SettingsItem } from '~/components/settings/SettingsItem'; +import SettingsButton from '~/components/settings/SettingsButton'; +import { SettingsTitle } from '~/components/settings/SettingsContainer'; +import SettingsToggle from '~/components/settings/SettingsToggle'; import { useAutoForm } from '~/hooks/useAutoForm'; import { tw } from '~/lib/tailwind'; import { SettingsStackScreenProps } from '~/navigation/tabs/SettingsStack'; @@ -37,9 +36,9 @@ const LibraryGeneralSettingsScreen = (_: SettingsStackScreenProps<'LibraryGenera }); return ( - - - Name + + + Name )} /> - {/* Description */} - Description + Description {/* Encrypt */} - - } /> - + { + //TODO: Enable encryption + }} + title="Encrypt Library" + description="Enable encryption for this library, this will only encrypt the Spacedrive database, not the files themselves." + /> {/* Export */} - Alert.alert('TODO')} /> + { + //TODO: Export library + }} + buttonTextStyle="font-bold text-ink-dull" + title="Export Library" + /> {/* Delete Library */} Delete} libraryUuid={library.uuid} /> - + ); }; From c461acf274f4fd4a19448cbdc88da890e229f78b Mon Sep 17 00:00:00 2001 From: ameer2468 <33054370+ameer2468@users.noreply.github.com> Date: Mon, 19 Feb 2024 12:49:18 +0300 Subject: [PATCH 2/4] Edit location redesign & more --- apps/mobile/src/components/header/Header.tsx | 72 ++++---- .../components/settings/SettingsButton.tsx | 16 +- .../components/settings/SettingsToggle.tsx | 65 +++++-- .../src/navigation/tabs/SettingsStack.tsx | 4 +- apps/mobile/src/screens/Locations.tsx | 45 +++-- apps/mobile/src/screens/Tags.tsx | 27 ++- .../src/screens/settings/info/About.tsx | 19 +- .../settings/library/EditLocationSettings.tsx | 162 +++++++---------- .../library/LibraryGeneralSettings.tsx | 24 ++- .../settings/library/LocationSettings.tsx | 169 +----------------- .../settings/library/NodesSettings.tsx | 8 +- .../screens/settings/library/TagsSettings.tsx | 101 +---------- 12 files changed, 268 insertions(+), 444 deletions(-) diff --git a/apps/mobile/src/components/header/Header.tsx b/apps/mobile/src/components/header/Header.tsx index 0c48c07a09ea..857746b1cc8c 100644 --- a/apps/mobile/src/components/header/Header.tsx +++ b/apps/mobile/src/components/header/Header.tsx @@ -44,33 +44,6 @@ export default function Header({ const explorerStore = useExplorerStore(); const routeParams = route?.route.params as any; - const SearchType = () => { - switch (searchType) { - case 'explorer': - return 'Explorer'; //TODO - case 'location': - return ; - default: - return null; - } - }; - const HeaderIconKind = () => { - switch (headerKind) { - case 'location': - return ; - case 'tag': - return ( - - ); - default: - return null; - } - }; - return ( - - + + {navBack && ( )} - + {showLibrary && } - {searchType && } + {searchType && } ); } + +interface HeaderSearchTypeProps { + searchType: HeaderProps['searchType']; +} + +const HeaderSearchType = ({ searchType }: HeaderSearchTypeProps) => { + switch (searchType) { + case 'explorer': + return 'Explorer'; //TODO + case 'location': + return ; + default: + return null; + } +}; + +interface HeaderIconKindProps { + headerKind: HeaderProps['headerKind']; + routeParams?: any; +} + +const HeaderIconKind = ({ headerKind, routeParams }: HeaderIconKindProps) => { + switch (headerKind) { + case 'location': + return ; + case 'tag': + return ( + + ); + default: + return null; + } +}; diff --git a/apps/mobile/src/components/settings/SettingsButton.tsx b/apps/mobile/src/components/settings/SettingsButton.tsx index 9f4eaa86bdd1..6fd6c886c715 100644 --- a/apps/mobile/src/components/settings/SettingsButton.tsx +++ b/apps/mobile/src/components/settings/SettingsButton.tsx @@ -1,4 +1,5 @@ import { Text, View } from 'react-native'; +import { ClassInput } from 'twrnc/dist/esm/types'; import { tw, twStyle } from '~/lib/tailwind'; import { Button, ButtonVariants } from '../primitive/Button'; @@ -7,9 +8,11 @@ interface Props { buttonText: string; title: string; description?: string; - buttonPress: () => void; + buttonPress?: () => void; buttonVariant?: ButtonVariants; buttonTextStyle?: string; + buttonIcon?: JSX.Element; + infoContainerStyle?: ClassInput; } const SettingsButton = ({ @@ -18,15 +21,22 @@ const SettingsButton = ({ description, buttonVariant, buttonTextStyle, + buttonIcon, + infoContainerStyle, buttonPress }: Props) => { return ( - + {title} {description && {description}} - diff --git a/apps/mobile/src/components/settings/SettingsToggle.tsx b/apps/mobile/src/components/settings/SettingsToggle.tsx index 94acb95cf7a3..6c6f48195667 100644 --- a/apps/mobile/src/components/settings/SettingsToggle.tsx +++ b/apps/mobile/src/components/settings/SettingsToggle.tsx @@ -1,32 +1,63 @@ import { useState } from 'react'; +import { Control, Controller } from 'react-hook-form'; import { Switch, Text, View } from 'react-native'; import { tw } from '~/lib/tailwind'; -interface Props { - title: string; - description?: string; - onEnabledChange?: (enabled: boolean) => void; -} +type Props = + | { + title: string; + description?: string; + onEnabledChange?: (enabled: boolean) => void; + control: Control; + name: string; + } + | { + title: string; + description?: string; + onEnabledChange?: (enabled: boolean) => void; + control?: never; + name?: never; + }; -const SettingsToggle = ({ title, description, onEnabledChange }: Props) => { +const SettingsToggle = ({ title, description, onEnabledChange, control, name }: Props) => { const [isEnabled, setIsEnabled] = useState(false); + return ( {title} {description && {description}} - { - setIsEnabled(!isEnabled); - onEnabledChange?.(!isEnabled); - }} - /> + {control && name ? ( + ( + { + setIsEnabled(val); + onChange(val); + onEnabledChange?.(val); + }} + /> + )} + /> + ) : ( + { + setIsEnabled((prev) => !prev); + onEnabledChange?.(!isEnabled); + }} + /> + )} ); }; diff --git a/apps/mobile/src/navigation/tabs/SettingsStack.tsx b/apps/mobile/src/navigation/tabs/SettingsStack.tsx index 74081ccc0719..57a39ed8f160 100644 --- a/apps/mobile/src/navigation/tabs/SettingsStack.tsx +++ b/apps/mobile/src/navigation/tabs/SettingsStack.tsx @@ -74,7 +74,9 @@ export default function SettingsStack() {
}} + options={{ + header: () =>
+ }} /> { useNodes(locationsQuery.data?.nodes); const locations = useCache(locationsQuery.data?.items); const { search } = useSearchStore(); + const modalRef = useRef(null); const [debouncedSearch] = useDebounce(search, 200); const filteredLocations = useMemo( () => @@ -42,6 +44,14 @@ export const Locations = () => { >(); return ( + { + modalRef.current?.present(); + }} + > + + { params: { id: item.id } }) } - onPress={() => navigation.navigate('Location', { id: item.id })} + onPress={() => + navigation.navigate('BrowseStack', { + screen: 'Location', + params: { id: item.id } + }) + } location={item} /> )} /> + ); }; @@ -79,7 +95,7 @@ interface LocationItemProps { editLocation: () => void; } -const LocationItem: React.FC = ({ +export const LocationItem: React.FC = ({ location, editLocation, onPress @@ -90,9 +106,9 @@ const LocationItem: React.FC = ({ return ( - + = ({ )} /> - - {location.name} - + + + {location.name} + + + {location.path} + + {`${byteSize(location.size_in_bytes)}`} diff --git a/apps/mobile/src/screens/Tags.tsx b/apps/mobile/src/screens/Tags.tsx index e092e5bd8c6d..6dbb62fc291f 100644 --- a/apps/mobile/src/screens/Tags.tsx +++ b/apps/mobile/src/screens/Tags.tsx @@ -1,21 +1,34 @@ import { useNavigation } from '@react-navigation/native'; -import { View } from 'react-native'; +import { Plus } from 'phosphor-react-native'; +import { useRef } from 'react'; +import { Pressable, View } from 'react-native'; import { FlatList } from 'react-native-gesture-handler'; import { useCache, useLibraryQuery, useNodes } from '@sd/client'; import { BrowseTagItem } from '~/components/browse/BrowseTags'; import Fade from '~/components/layout/Fade'; +import { ModalRef } from '~/components/layout/Modal'; import ScreenContainer from '~/components/layout/ScreenContainer'; +import CreateTagModal from '~/components/modal/tag/CreateTagModal'; import { tw } from '~/lib/tailwind'; import { BrowseStackScreenProps } from '~/navigation/tabs/BrowseStack'; export default function Tags() { const tags = useLibraryQuery(['tags.list']); const navigation = useNavigation['navigation']>(); + const modalRef = useRef(null); useNodes(tags.data?.nodes); const tagData = useCache(tags.data?.items); return ( - + + { + modalRef.current?.present(); + }} + > + + - navigation.navigate('Tag', { id: item.id, color: item.color! }) - } + onPress={() => { + navigation.navigate('BrowseStack', { + screen: 'Tag', + params: { id: item.id, color: item.color! } + }); + }} /> )} numColumns={3} @@ -43,6 +59,7 @@ export default function Tags() { contentContainerStyle={tw`py-5`} /> + ); } diff --git a/apps/mobile/src/screens/settings/info/About.tsx b/apps/mobile/src/screens/settings/info/About.tsx index 0ad8610f5ee3..3608987735c5 100644 --- a/apps/mobile/src/screens/settings/info/About.tsx +++ b/apps/mobile/src/screens/settings/info/About.tsx @@ -3,6 +3,7 @@ import React from 'react'; import { Image, Linking, Platform, Text, View } from 'react-native'; import { useBridgeQuery } from '@sd/client'; import { DiscordIcon, GitHubIcon } from '~/components/icons/Brands'; +import ScreenContainer from '~/components/layout/ScreenContainer'; import { Button } from '~/components/primitive/Button'; import { Divider } from '~/components/primitive/Divider'; import { tw } from '~/lib/tailwind'; @@ -11,7 +12,7 @@ const AboutScreen = () => { const buildInfo = useBridgeQuery(['buildInfo']); return ( - + { - Join Discord + Join Discord {/* GitHub Button */} {/* Website Button */} @@ -68,9 +69,9 @@ const AboutScreen = () => { variant="accent" > - + - Website + Website @@ -92,16 +93,16 @@ const AboutScreen = () => { Meet the contributors behind Spacedrive - {/* For some reason, it won't load. ¯\_(ツ)_/¯ */} + {/* Temporary image url approach until a solution is reached */} - + ); }; diff --git a/apps/mobile/src/screens/settings/library/EditLocationSettings.tsx b/apps/mobile/src/screens/settings/library/EditLocationSettings.tsx index 0ddb12afa786..e424d216b098 100644 --- a/apps/mobile/src/screens/settings/library/EditLocationSettings.tsx +++ b/apps/mobile/src/screens/settings/library/EditLocationSettings.tsx @@ -2,20 +2,16 @@ import { useQueryClient } from '@tanstack/react-query'; import { Archive, ArrowsClockwise, Trash } from 'phosphor-react-native'; import { useEffect } from 'react'; import { Controller } from 'react-hook-form'; -import { Alert, ScrollView, Text, View } from 'react-native'; +import { Alert, Text, View } from 'react-native'; import { z } from 'zod'; import { useLibraryMutation, useLibraryQuery, useNormalisedCache, useZodForm } from '@sd/client'; import { Input } from '~/components/form/Input'; -import { Switch } from '~/components/form/Switch'; -import DeleteLocationModal from '~/components/modal/confirmModals/DeleteLocationModal'; -import { AnimatedButton, FakeButton } from '~/components/primitive/Button'; +import ScreenContainer from '~/components/layout/ScreenContainer'; +import { AnimatedButton } from '~/components/primitive/Button'; import { Divider } from '~/components/primitive/Divider'; -import { - SettingsContainer, - SettingsInputInfo, - SettingsTitle -} from '~/components/settings/SettingsContainer'; -import { SettingsItem } from '~/components/settings/SettingsItem'; +import SettingsButton from '~/components/settings/SettingsButton'; +import { SettingsInputInfo, SettingsTitle } from '~/components/settings/SettingsContainer'; +import SettingsToggle from '~/components/settings/SettingsToggle'; import { tw, twStyle } from '~/lib/tailwind'; import { SettingsStackScreenProps } from '~/navigation/tabs/SettingsStack'; @@ -64,7 +60,7 @@ const EditLocationSettingsScreen = ({ useEffect(() => { navigation.setOptions({ headerRight: () => ( - + {form.formState.isDirty && ( + {/* Inputs */} - - Display Name + + Display Name - Local Path + Local Path {/* Switches */} - - ( - - )} - /> - } - /> - ( - - )} - /> - } - /> - ( - - )} - /> - } - /> - + + + - {/* Indexer Rules */} - TODO: Indexer Rules {/* Buttons */} - - - fullRescan.mutate({ location_id: id, reidentify_objects: true }) - } - > - - - } - /> - - - Alert.alert('Archiving locations is coming soon...')} - > - - - } - /> - - - - - - } - /> - } - /> - + + fullRescan.mutate({ location_id: id, reidentify_objects: true }) + } + buttonText="Full Reindex" + buttonIcon={} + buttonTextStyle="text-white font-bold" + buttonVariant="outline" + infoContainerStyle={'w-[50%]'} + /> + } + buttonPress={() => Alert.alert('Archiving locations is coming soon...')} + buttonVariant="outline" + buttonTextStyle="text-white font-bold" + infoContainerStyle={'w-[60%]'} + /> + } + buttonPress={() => Alert.alert('Deleting locations is coming soon...')} + buttonVariant="danger" + buttonTextStyle="text-white font-bold" + infoContainerStyle={'w-[60%]'} + /> + {/* Indexer Rules */} + + TODO: Indexer Rules + - + ); }; diff --git a/apps/mobile/src/screens/settings/library/LibraryGeneralSettings.tsx b/apps/mobile/src/screens/settings/library/LibraryGeneralSettings.tsx index 7e4bd4535be0..d1fddeec65f3 100644 --- a/apps/mobile/src/screens/settings/library/LibraryGeneralSettings.tsx +++ b/apps/mobile/src/screens/settings/library/LibraryGeneralSettings.tsx @@ -1,11 +1,12 @@ -import React from 'react'; import { Controller } from 'react-hook-form'; import { Text, View } from 'react-native'; +import { TouchableOpacity } from 'react-native-gesture-handler'; import { z } from 'zod'; import { useBridgeMutation, useLibraryContext, useZodForm } from '@sd/client'; import { Input } from '~/components/form/Input'; import ScreenContainer from '~/components/layout/ScreenContainer'; import DeleteLibraryModal from '~/components/modal/confirmModals/DeleteLibraryModal'; +import { Button } from '~/components/primitive/Button'; import { Divider } from '~/components/primitive/Divider'; import SettingsButton from '~/components/settings/SettingsButton'; import { SettingsTitle } from '~/components/settings/SettingsContainer'; @@ -76,7 +77,26 @@ const LibraryGeneralSettingsScreen = (_: SettingsStackScreenProps<'LibraryGenera title="Export Library" /> {/* Delete Library */} - Delete} libraryUuid={library.uuid} /> + + + Delete Library + + This is permanent, your files not be deleted, only the Spacedrive + library. + + + + + + } + libraryUuid={library.uuid} + /> + ); diff --git a/apps/mobile/src/screens/settings/library/LocationSettings.tsx b/apps/mobile/src/screens/settings/library/LocationSettings.tsx index 1b1299432ff3..331f0987df90 100644 --- a/apps/mobile/src/screens/settings/library/LocationSettings.tsx +++ b/apps/mobile/src/screens/settings/library/LocationSettings.tsx @@ -1,170 +1,7 @@ -import { CaretRight, Pen, Repeat, Trash } from 'phosphor-react-native'; -import { useEffect, useRef } from 'react'; -import { Animated, FlatList, Pressable, Text, View } from 'react-native'; -import { Swipeable } from 'react-native-gesture-handler'; -import { - arraysEqual, - Location, - useCache, - useLibraryMutation, - useLibraryQuery, - useNodes, - useOnlineLocations -} from '@sd/client'; -import FolderIcon from '~/components/icons/FolderIcon'; -import { ModalRef } from '~/components/layout/Modal'; -import DeleteLocationModal from '~/components/modal/confirmModals/DeleteLocationModal'; -import ImportModal from '~/components/modal/ImportModal'; -import { AnimatedButton } from '~/components/primitive/Button'; -import { tw, twStyle } from '~/lib/tailwind'; -import { SettingsStackScreenProps } from '~/navigation/tabs/SettingsStack'; +import { Locations } from '~/screens/Locations'; -type LocationItemProps = { - location: Location; - index: number; - navigation: SettingsStackScreenProps<'LocationSettings'>['navigation']; -}; - -function LocationItem({ location, index, navigation }: LocationItemProps) { - const fullRescan = useLibraryMutation('locations.fullRescan', { - onMutate: () => { - // TODO: Show Toast - } - }); - - const onlineLocations = useOnlineLocations(); - - const renderRightActions = ( - progress: Animated.AnimatedInterpolation, - _: any, - swipeable: Swipeable - ) => { - const translate = progress.interpolate({ - inputRange: [0, 1], - outputRange: [100, 0], - extrapolate: 'clamp' - }); - - return ( - - { - navigation.navigate('EditLocationSettings', { id: location.id }); - swipeable.close(); - }} - > - - - - - - } - /> - {/* Full Re-scan IS too much here */} - - fullRescan.mutate({ location_id: location.id, reidentify_objects: true }) - } - > - - - - ); - }; - - return ( - - - - - {/* Online/Offline Indicator */} - arraysEqual(location.pub_id, l)) - ? 'bg-green-500' - : 'bg-red-500' - )} - /> - - - - {location.name} - - {/* // TODO: This is ephemeral so it should not come from the DB. Eg. a external USB can move between nodes */} - {/* {location.node && ( - - - {location.node.name} - - - )} */} - - {location.path} - - - - - - ); -} - -const LocationSettingsScreen = ({ navigation }: SettingsStackScreenProps<'LocationSettings'>) => { - const result = useLibraryQuery(['locations.list']); - useNodes(result.data?.nodes); - const locations = useCache(result.data?.items); - - useEffect(() => { - navigation.setOptions({ - headerRight: () => ( - modalRef.current?.present()} - > - New - - ) - }); - }, [navigation]); - - const modalRef = useRef(null); - - return ( - - item.id.toString()} - renderItem={({ item, index }) => ( - - )} - /> - - - ); +const LocationSettingsScreen = () => { + return ; }; export default LocationSettingsScreen; diff --git a/apps/mobile/src/screens/settings/library/NodesSettings.tsx b/apps/mobile/src/screens/settings/library/NodesSettings.tsx index dfc07b0e2ce7..51ee8e6425f4 100644 --- a/apps/mobile/src/screens/settings/library/NodesSettings.tsx +++ b/apps/mobile/src/screens/settings/library/NodesSettings.tsx @@ -1,7 +1,7 @@ import React from 'react'; import { Text, View } from 'react-native'; -import { isEnabled, useBridgeMutation, useDiscoveredPeers } from '@sd/client'; -import { Button } from '~/components/primitive/Button'; +import { useDiscoveredPeers } from '@sd/client'; +import ScreenContainer from '~/components/layout/ScreenContainer'; import { tw } from '~/lib/tailwind'; import { SettingsStackScreenProps } from '~/navigation/tabs/SettingsStack'; @@ -9,7 +9,7 @@ const NodesSettingsScreen = ({ navigation }: SettingsStackScreenProps<'NodesSett const onlineNodes = useDiscoveredPeers(); return ( - + Pairing {[...onlineNodes.entries()].map(([id, node]) => ( @@ -17,7 +17,7 @@ const NodesSettingsScreen = ({ navigation }: SettingsStackScreenProps<'NodesSett {node.name} ))} - + ); }; diff --git a/apps/mobile/src/screens/settings/library/TagsSettings.tsx b/apps/mobile/src/screens/settings/library/TagsSettings.tsx index b33bc46b7127..adae4042fe45 100644 --- a/apps/mobile/src/screens/settings/library/TagsSettings.tsx +++ b/apps/mobile/src/screens/settings/library/TagsSettings.tsx @@ -1,105 +1,16 @@ -import { CaretRight, Pen, Trash } from 'phosphor-react-native'; -import { useEffect, useRef } from 'react'; -import { Animated, FlatList, Text, View } from 'react-native'; -import { Swipeable } from 'react-native-gesture-handler'; -import { Tag, useCache, useLibraryQuery, useNodes } from '@sd/client'; +import { useRef } from 'react'; import { ModalRef } from '~/components/layout/Modal'; -import DeleteTagModal from '~/components/modal/confirmModals/DeleteTagModal'; import CreateTagModal from '~/components/modal/tag/CreateTagModal'; -import UpdateTagModal from '~/components/modal/tag/UpdateTagModal'; -import { AnimatedButton, FakeButton } from '~/components/primitive/Button'; -import { tw, twStyle } from '~/lib/tailwind'; -import { SettingsStackScreenProps } from '~/navigation/tabs/SettingsStack'; - -function TagItem({ tag, index }: { tag: Tag; index: number }) { - const modalRef = useRef(null); - - const renderRightActions = ( - progress: Animated.AnimatedInterpolation, - _dragX: Animated.AnimatedInterpolation, - swipeable: Swipeable - ) => { - const translate = progress.interpolate({ - inputRange: [0, 1], - outputRange: [100, 0], - extrapolate: 'clamp' - }); - - return ( - - swipeable.close()} /> - modalRef.current?.present()}> - - - - - - } - /> - - ); - }; - - return ( - - - - - {tag.name} - - - - - ); -} - -// TODO: Add "New Tag" button - -const TagsSettingsScreen = ({ navigation }: SettingsStackScreenProps<'TagsSettings'>) => { - const result = useLibraryQuery(['tags.list']); - useNodes(result.data?.nodes); - const tags = useCache(result.data?.items); - - useEffect(() => { - navigation.setOptions({ - headerRight: () => ( - modalRef.current?.present()} - > - New - - ) - }); - }, [navigation]); +import Tags from '~/screens/Tags'; +const TagsSettingsScreen = () => { const modalRef = useRef(null); return ( - - item.id.toString()} - renderItem={({ item, index }) => } - /> + <> + - + ); }; From a330ff47e541b379bb846482d9d32e1d636bff4e Mon Sep 17 00:00:00 2001 From: ameer2468 <33054370+ameer2468@users.noreply.github.com> Date: Mon, 19 Feb 2024 14:56:31 +0300 Subject: [PATCH 3/4] right actions --- .../src/components/browse/BrowseTags.tsx | 153 +++++++++++++---- apps/mobile/src/screens/Locations.tsx | 162 ++++++++++++------ apps/mobile/src/screens/Tags.tsx | 23 ++- .../settings/client/LibrarySettings.tsx | 4 +- .../settings/library/LocationSettings.tsx | 2 +- .../screens/settings/library/TagsSettings.tsx | 2 +- 6 files changed, 247 insertions(+), 99 deletions(-) diff --git a/apps/mobile/src/components/browse/BrowseTags.tsx b/apps/mobile/src/components/browse/BrowseTags.tsx index 3bcbcfb881ec..8d5be872ebdc 100644 --- a/apps/mobile/src/components/browse/BrowseTags.tsx +++ b/apps/mobile/src/components/browse/BrowseTags.tsx @@ -1,8 +1,9 @@ import { useNavigation } from '@react-navigation/native'; -import { DotsThreeOutlineVertical, Eye, Plus } from 'phosphor-react-native'; +import { DotsThreeOutlineVertical, Eye, Pen, Plus, Trash } from 'phosphor-react-native'; import React, { useRef } from 'react'; -import { Pressable, Text, View } from 'react-native'; -import { FlatList } from 'react-native-gesture-handler'; +import { Animated, Pressable, Text, View } from 'react-native'; +import { FlatList, Swipeable } from 'react-native-gesture-handler'; +import { ClassInput } from 'twrnc/dist/esm/types'; import { Tag, useCache, useLibraryQuery, useNodes } from '@sd/client'; import { ModalRef } from '~/components/layout/Modal'; import { tw, twStyle } from '~/lib/tailwind'; @@ -10,46 +11,126 @@ import { BrowseStackScreenProps } from '~/navigation/tabs/BrowseStack'; import { Icon } from '../icons/Icon'; import Fade from '../layout/Fade'; +import DeleteTagModal from '../modal/confirmModals/DeleteTagModal'; import CreateTagModal from '../modal/tag/CreateTagModal'; import { TagModal } from '../modal/tag/TagModal'; +import UpdateTagModal from '../modal/tag/UpdateTagModal'; +import { AnimatedButton, FakeButton } from '../primitive/Button'; -type BrowseTagItemProps = { +type TagItemProps = { tag: Tag; onPress: () => void; - tagStyle?: string; + tagStyle?: ClassInput; + viewStyle?: 'grid' | 'list'; + rightActions?: () => void; }; -export const BrowseTagItem: React.FC = ({ tag, onPress, tagStyle }) => { +export const TagItem = ({ + tag, + onPress, + rightActions, + tagStyle, + viewStyle = 'grid' +}: TagItemProps) => { const modalRef = useRef(null); + + const renderTagView = () => ( + + + + modalRef.current?.present()}> + + + + + {tag.name} + + + ); + + const renderRightActions = ( + progress: Animated.AnimatedInterpolation, + _dragX: Animated.AnimatedInterpolation, + swipeable: Swipeable + ) => { + const translate = progress.interpolate({ + inputRange: [0, 1], + outputRange: [100, 0], + extrapolate: 'clamp' + }); + + return ( + + swipeable.close()} /> + modalRef.current?.present()}> + + + + + + } + /> + + ); + }; + return ( - - - - modalRef.current?.present()}> - - - - - {tag.name} - - + + + + + {tag.name} + + + modalRef.current?.present()}> + + + + + )} ); @@ -67,7 +148,7 @@ const BrowseTags = () => { return ( - + Tags navigation.navigate('Tags')}> @@ -81,7 +162,7 @@ const BrowseTags = () => { modalRef.current?.present()}> @@ -96,13 +177,13 @@ const BrowseTags = () => { style={tw`relative h-auto w-[85.5vw] flex-col items-center justify-center overflow-hidden rounded-md border border-dashed border-sidebar-line p-4`} > - + You have no tags )} renderItem={({ item }) => ( - navigation.navigate('Tag', { id: item.id, color: item.color! }) diff --git a/apps/mobile/src/screens/Locations.tsx b/apps/mobile/src/screens/Locations.tsx index 79a13029edfd..43a468ae9117 100644 --- a/apps/mobile/src/screens/Locations.tsx +++ b/apps/mobile/src/screens/Locations.tsx @@ -1,7 +1,8 @@ import { useNavigation } from '@react-navigation/native'; -import { DotsThreeOutlineVertical, Plus } from 'phosphor-react-native'; +import { DotsThreeOutlineVertical, Pen, Plus, Trash } from 'phosphor-react-native'; import { useMemo, useRef } from 'react'; -import { FlatList, Pressable, Text, View } from 'react-native'; +import { Animated, FlatList, Pressable, Text, View } from 'react-native'; +import { Swipeable } from 'react-native-gesture-handler'; import { useDebounce } from 'use-debounce'; import { arraysEqual, @@ -16,6 +17,7 @@ import FolderIcon from '~/components/icons/FolderIcon'; import Fade from '~/components/layout/Fade'; import { ModalRef } from '~/components/layout/Modal'; import ScreenContainer from '~/components/layout/ScreenContainer'; +import DeleteLocationModal from '~/components/modal/confirmModals/DeleteLocationModal'; import ImportModal from '~/components/modal/ImportModal'; import { LocationModal } from '~/components/modal/location/LocationModal'; import { tw, twStyle } from '~/lib/tailwind'; @@ -23,7 +25,11 @@ import { BrowseStackScreenProps } from '~/navigation/tabs/BrowseStack'; import { SettingsStackScreenProps } from '~/navigation/tabs/SettingsStack'; import { useSearchStore } from '~/stores/searchStore'; -export const Locations = () => { +interface Props { + redirectToLocationSettings?: boolean; +} + +export const Locations = ({ redirectToLocationSettings }: Props) => { const locationsQuery = useLibraryQuery(['locations.list']); useNodes(locationsQuery.data?.nodes); const locations = useCache(locationsQuery.data?.items); @@ -67,18 +73,26 @@ export const Locations = () => { showsVerticalScrollIndicator={false} renderItem={({ item }) => ( navigation.navigate('SettingsStack', { screen: 'EditLocationSettings', params: { id: item.id } }) } - onPress={() => - navigation.navigate('BrowseStack', { - screen: 'Location', - params: { id: item.id } - }) - } + onPress={() => { + if (redirectToLocationSettings) { + navigation.navigate('SettingsStack', { + screen: 'EditLocationSettings', + params: { id: item.id } + }); + } else { + navigation.navigate('BrowseStack', { + screen: 'Location', + params: { id: item.id } + }); + } + }} location={item} /> )} @@ -93,61 +107,109 @@ interface LocationItemProps { location: Location; onPress: () => void; editLocation: () => void; + navigation: SettingsStackScreenProps<'LocationSettings'>['navigation']; } -export const LocationItem: React.FC = ({ +export const LocationItem = ({ location, editLocation, - onPress + onPress, + navigation }: LocationItemProps) => { const onlineLocations = useOnlineLocations(); const online = onlineLocations.some((l) => arraysEqual(location.pub_id, l)); const modalRef = useRef(null); - return ( - - , + _: any, + swipeable: Swipeable + ) => { + const translate = progress.interpolate({ + inputRange: [0, 1], + outputRange: [100, 0], + extrapolate: 'clamp' + }); + + return ( + - - - + { + navigation.navigate('EditLocationSettings', { id: location.id }); + swipeable.close(); + }} + > + + + - - - - {location.name} - - - {location.path} - + + + } + /> + + ); + }; + + return ( + + + + + + + + + + + {location.name} + + + {location.path} + + - - - - - {`${byteSize(location.size_in_bytes)}`} - + + + + {`${byteSize(location.size_in_bytes)}`} + + + modalRef.current?.present()}> + + - modalRef.current?.present()}> - - - + { editLocation(); diff --git a/apps/mobile/src/screens/Tags.tsx b/apps/mobile/src/screens/Tags.tsx index 6dbb62fc291f..ed1be1d901b3 100644 --- a/apps/mobile/src/screens/Tags.tsx +++ b/apps/mobile/src/screens/Tags.tsx @@ -4,15 +4,19 @@ import { useRef } from 'react'; import { Pressable, View } from 'react-native'; import { FlatList } from 'react-native-gesture-handler'; import { useCache, useLibraryQuery, useNodes } from '@sd/client'; -import { BrowseTagItem } from '~/components/browse/BrowseTags'; +import { TagItem } from '~/components/browse/BrowseTags'; import Fade from '~/components/layout/Fade'; import { ModalRef } from '~/components/layout/Modal'; import ScreenContainer from '~/components/layout/ScreenContainer'; import CreateTagModal from '~/components/modal/tag/CreateTagModal'; -import { tw } from '~/lib/tailwind'; +import { tw, twStyle } from '~/lib/tailwind'; import { BrowseStackScreenProps } from '~/navigation/tabs/BrowseStack'; -export default function Tags() { +interface Props { + viewStyle?: 'grid' | 'list'; +} + +export default function Tags({ viewStyle = 'list' }: Props) { const tags = useLibraryQuery(['tags.list']); const navigation = useNavigation['navigation']>(); const modalRef = useRef(null); @@ -20,9 +24,9 @@ export default function Tags() { useNodes(tags.data?.nodes); const tagData = useCache(tags.data?.items); return ( - + { modalRef.current?.present(); }} @@ -39,8 +43,9 @@ export default function Tags() { ( - { navigation.navigate('BrowseStack', { @@ -50,8 +55,8 @@ export default function Tags() { }} /> )} - numColumns={3} - columnWrapperStyle={tw`gap-2.5`} + numColumns={viewStyle === 'grid' ? 3 : 1} + columnWrapperStyle={viewStyle === 'grid' && tw`justify-between`} horizontal={false} keyExtractor={(item) => item.id.toString()} showsHorizontalScrollIndicator={false} diff --git a/apps/mobile/src/screens/settings/client/LibrarySettings.tsx b/apps/mobile/src/screens/settings/client/LibrarySettings.tsx index 6b63028e70a1..f6d37a01955a 100644 --- a/apps/mobile/src/screens/settings/client/LibrarySettings.tsx +++ b/apps/mobile/src/screens/settings/client/LibrarySettings.tsx @@ -58,9 +58,9 @@ function LibraryItem({ enableTrackpadTwoFingerGesture renderRightActions={renderRightActions} > - + - {library.config.name} + {library.config.name} {library.uuid} diff --git a/apps/mobile/src/screens/settings/library/LocationSettings.tsx b/apps/mobile/src/screens/settings/library/LocationSettings.tsx index 331f0987df90..e963ca39013c 100644 --- a/apps/mobile/src/screens/settings/library/LocationSettings.tsx +++ b/apps/mobile/src/screens/settings/library/LocationSettings.tsx @@ -1,7 +1,7 @@ import { Locations } from '~/screens/Locations'; const LocationSettingsScreen = () => { - return ; + return ; }; export default LocationSettingsScreen; diff --git a/apps/mobile/src/screens/settings/library/TagsSettings.tsx b/apps/mobile/src/screens/settings/library/TagsSettings.tsx index adae4042fe45..320f814a27f4 100644 --- a/apps/mobile/src/screens/settings/library/TagsSettings.tsx +++ b/apps/mobile/src/screens/settings/library/TagsSettings.tsx @@ -8,7 +8,7 @@ const TagsSettingsScreen = () => { return ( <> - + ); From 0ffc8fb3b1d68c5fcfee02cbcf3dcd743083e5aa Mon Sep 17 00:00:00 2001 From: ameer2468 <33054370+ameer2468@users.noreply.github.com> Date: Mon, 19 Feb 2024 18:51:04 +0300 Subject: [PATCH 4/4] cleanup --- .../src/components/browse/BrowseTags.tsx | 19 +++++++++---------- apps/mobile/src/components/header/Header.tsx | 4 ++-- .../src/components/overview/Categories.tsx | 6 +++--- .../src/components/overview/OverviewStats.tsx | 2 +- .../src/components/overview/StatCard.tsx | 2 +- .../src/components/primitive/Button.tsx | 2 +- .../src/components/settings/SettingsItem.tsx | 4 ++-- .../components/settings/SettingsToggle.tsx | 10 +++++----- apps/mobile/src/screens/Locations.tsx | 12 ++++++------ apps/mobile/src/screens/Tags.tsx | 4 ++-- apps/mobile/src/screens/network/index.tsx | 2 +- apps/mobile/src/screens/settings/Settings.tsx | 4 ++-- .../settings/client/GeneralSettings.tsx | 6 +++--- .../settings/client/LibrarySettings.tsx | 4 ++-- .../src/screens/settings/info/About.tsx | 2 +- .../settings/library/EditLocationSettings.tsx | 6 +++--- .../library/LibraryGeneralSettings.tsx | 4 ++-- 17 files changed, 46 insertions(+), 47 deletions(-) diff --git a/apps/mobile/src/components/browse/BrowseTags.tsx b/apps/mobile/src/components/browse/BrowseTags.tsx index 8d5be872ebdc..006c73301627 100644 --- a/apps/mobile/src/components/browse/BrowseTags.tsx +++ b/apps/mobile/src/components/browse/BrowseTags.tsx @@ -1,10 +1,10 @@ import { useNavigation } from '@react-navigation/native'; +import { Tag, useCache, useLibraryQuery, useNodes } from '@sd/client'; import { DotsThreeOutlineVertical, Eye, Pen, Plus, Trash } from 'phosphor-react-native'; import React, { useRef } from 'react'; import { Animated, Pressable, Text, View } from 'react-native'; import { FlatList, Swipeable } from 'react-native-gesture-handler'; import { ClassInput } from 'twrnc/dist/esm/types'; -import { Tag, useCache, useLibraryQuery, useNodes } from '@sd/client'; import { ModalRef } from '~/components/layout/Modal'; import { tw, twStyle } from '~/lib/tailwind'; import { BrowseStackScreenProps } from '~/navigation/tabs/BrowseStack'; @@ -37,9 +37,8 @@ export const TagItem = ({ const renderTagView = () => ( @@ -77,7 +76,7 @@ export const TagItem = ({ return ( @@ -103,12 +102,12 @@ export const TagItem = ({ renderTagView() ) : ( - + { return ( - + Tags navigation.navigate('Tags')}> @@ -162,7 +161,7 @@ const BrowseTags = () => { modalRef.current?.present()}> @@ -177,7 +176,7 @@ const BrowseTags = () => { style={tw`relative h-auto w-[85.5vw] flex-col items-center justify-center overflow-hidden rounded-md border border-dashed border-sidebar-line p-4`} > - + You have no tags diff --git a/apps/mobile/src/components/header/Header.tsx b/apps/mobile/src/components/header/Header.tsx index 857746b1cc8c..0984f40cb4cc 100644 --- a/apps/mobile/src/components/header/Header.tsx +++ b/apps/mobile/src/components/header/Header.tsx @@ -51,8 +51,8 @@ export default function Header({ Platform.OS === 'android' ? 'pt-5' : 'pt-10' )} > - - + + {navBack && ( { return ( - Categories + Categories @@ -29,7 +29,7 @@ const Categories = ({ kinds }: Props) => { key={kinds.data?.statistics ? 'kinds' : '_'} //needed to update numColumns when data is available keyExtractor={(item) => item.name} scrollEnabled={false} - ItemSeparatorComponent={() => } + ItemSeparatorComponent={() => } showsHorizontalScrollIndicator={false} renderItem={({ item }) => { const { kind, name, count } = item; @@ -79,7 +79,7 @@ const KindItem = ({ name, icon, items }: KindItemProps) => { }} > - + {name} {items !== undefined && ( diff --git a/apps/mobile/src/components/overview/OverviewStats.tsx b/apps/mobile/src/components/overview/OverviewStats.tsx index 6eeca01501a5..642a14bf2c11 100644 --- a/apps/mobile/src/components/overview/OverviewStats.tsx +++ b/apps/mobile/src/components/overview/OverviewStats.tsx @@ -39,7 +39,7 @@ const StatItem = ({ title, bytes, isLoading, style }: StatItemProps) => { )} > {title} - + {count} {unit} diff --git a/apps/mobile/src/components/overview/StatCard.tsx b/apps/mobile/src/components/overview/StatCard.tsx index 190a824a0002..adeaacc8ee9f 100644 --- a/apps/mobile/src/components/overview/StatCard.tsx +++ b/apps/mobile/src/components/overview/StatCard.tsx @@ -58,7 +58,7 @@ const StatCard = ({ icon, name, connectionType, ...stats }: StatCardProps) => { - + {fill.toFixed(0)} diff --git a/apps/mobile/src/components/primitive/Button.tsx b/apps/mobile/src/components/primitive/Button.tsx index fba1f2748152..bce4674f09f3 100644 --- a/apps/mobile/src/components/primitive/Button.tsx +++ b/apps/mobile/src/components/primitive/Button.tsx @@ -30,7 +30,7 @@ const button = cva(['items-center justify-center rounded-md border shadow-sm'], }); type ButtonProps = VariantProps & PressableProps; -export type ButtonVariants = VariantProps['variant']; +export type ButtonVariants = ButtonProps['variant']; export const Button: FC = ({ variant, size, disabled, ...props }) => { const { style, ...otherProps } = props; diff --git a/apps/mobile/src/components/settings/SettingsItem.tsx b/apps/mobile/src/components/settings/SettingsItem.tsx index 48aff60f2cba..1b878da39c4d 100644 --- a/apps/mobile/src/components/settings/SettingsItem.tsx +++ b/apps/mobile/src/components/settings/SettingsItem.tsx @@ -24,10 +24,10 @@ export function SettingsItem(props: SettingsItemProps) { return ( - + {props.leftIcon && ( {props.leftIcon({ size: 20, color: tw.color('ink-dull') })} diff --git a/apps/mobile/src/components/settings/SettingsToggle.tsx b/apps/mobile/src/components/settings/SettingsToggle.tsx index 6c6f48195667..bd672c048e7f 100644 --- a/apps/mobile/src/components/settings/SettingsToggle.tsx +++ b/apps/mobile/src/components/settings/SettingsToggle.tsx @@ -5,11 +5,11 @@ import { tw } from '~/lib/tailwind'; type Props = | { - title: string; - description?: string; - onEnabledChange?: (enabled: boolean) => void; - control: Control; - name: string; + title: string; // Title of the setting + description?: string; // This is to display a description below the title + onEnabledChange?: (enabled: boolean) => void; // This is to receive the value of the toggle when it changes + control: Control; //Zod form control + name: string; //Name of the field for zod form controller } | { title: string; diff --git a/apps/mobile/src/screens/Locations.tsx b/apps/mobile/src/screens/Locations.tsx index 43a468ae9117..1cbc565e5e26 100644 --- a/apps/mobile/src/screens/Locations.tsx +++ b/apps/mobile/src/screens/Locations.tsx @@ -49,9 +49,9 @@ export const Locations = ({ redirectToLocationSettings }: Props) => { SettingsStackScreenProps<'Settings'>['navigation'] >(); return ( - + { modalRef.current?.present(); }} @@ -134,7 +134,7 @@ export const LocationItem = ({ return ( @@ -164,11 +164,11 @@ export const LocationItem = ({ return ( - + @@ -194,7 +194,7 @@ export const LocationItem = ({ {`${byteSize(location.size_in_bytes)}`} diff --git a/apps/mobile/src/screens/Tags.tsx b/apps/mobile/src/screens/Tags.tsx index ed1be1d901b3..805237210a7c 100644 --- a/apps/mobile/src/screens/Tags.tsx +++ b/apps/mobile/src/screens/Tags.tsx @@ -24,9 +24,9 @@ export default function Tags({ viewStyle = 'list' }: Props) { useNodes(tags.data?.nodes); const tagData = useCache(tags.data?.items); return ( - + { modalRef.current?.present(); }} diff --git a/apps/mobile/src/screens/network/index.tsx b/apps/mobile/src/screens/network/index.tsx index 61397c3d0435..92e7ed22ca38 100644 --- a/apps/mobile/src/screens/network/index.tsx +++ b/apps/mobile/src/screens/network/index.tsx @@ -9,7 +9,7 @@ export default function NetworkScreen({ navigation }: NetworkStackScreenProps<'N Your Local Network - + Other Spacedrive nodes on your LAN will appear here, along with your default OS network mounts. diff --git a/apps/mobile/src/screens/settings/Settings.tsx b/apps/mobile/src/screens/settings/Settings.tsx index 69f446903df4..1fadbf874125 100644 --- a/apps/mobile/src/screens/settings/Settings.tsx +++ b/apps/mobile/src/screens/settings/Settings.tsx @@ -141,10 +141,10 @@ export default function SettingsScreen({ navigation }: SettingsStackScreenProps< const debugState = useDebugState(); return ( - + ( {/* Divider */} - + {/* Node Name and Port */} Node Name - Node Port + Node Port {debugState.enabled && ( @@ -45,7 +45,7 @@ const GeneralSettingsScreen = ({ navigation }: SettingsStackScreenProps<'General {/* Card Header */} Debug {/* Divider */} - + Data Folder {/* Useful for simulator, not so for real devices. */} diff --git a/apps/mobile/src/screens/settings/client/LibrarySettings.tsx b/apps/mobile/src/screens/settings/client/LibrarySettings.tsx index f6d37a01955a..fa8c9a1de8af 100644 --- a/apps/mobile/src/screens/settings/client/LibrarySettings.tsx +++ b/apps/mobile/src/screens/settings/client/LibrarySettings.tsx @@ -60,7 +60,7 @@ function LibraryItem({ > - {library.config.name} + {library.config.name} {library.uuid} @@ -92,7 +92,7 @@ const LibrarySettingsScreen = ({ navigation }: SettingsStackScreenProps<'Library const modalRef = useRef(null); return ( - + { const buildInfo = useBridgeQuery(['buildInfo']); return ( - + { navigation.setOptions({ headerRight: () => ( - + {form.formState.isDirty && ( - Local Path + Local Path {/* Indexer Rules */} - + TODO: Indexer Rules diff --git a/apps/mobile/src/screens/settings/library/LibraryGeneralSettings.tsx b/apps/mobile/src/screens/settings/library/LibraryGeneralSettings.tsx index d1fddeec65f3..9b3d31faff3a 100644 --- a/apps/mobile/src/screens/settings/library/LibraryGeneralSettings.tsx +++ b/apps/mobile/src/screens/settings/library/LibraryGeneralSettings.tsx @@ -37,7 +37,7 @@ const LibraryGeneralSettingsScreen = (_: SettingsStackScreenProps<'LibraryGenera }); return ( - + Name )} /> - Description + Description