Squashed commit of the following:

commit bda9a1b
Author: ameer2468 <33054370+ameer2468@users.noreply.github.com>
Date:   Wed Feb 7 20:25:04 2024 +0300

    [MOB-55] Video animation for onboarding on mobile and desktop (spacedriveapp#2065)

    * video animation for onboarding on mobile and desktop

    run assets gen

    cleanup

    declare mp4 type

    * update metro config to transform video files from sd assets

    * test ci without native video exclude

    * casing?

    * remove to add back again due to github

    * add videos back

    * versions

    * no need to transform

    ---------

    Co-authored-by: Utku Bakir <74243531+utkubakir@users.noreply.github.com>

commit da2841b
Author: Utku <74243531+utkubakir@users.noreply.github.com>
Date:   Wed Feb 7 16:47:55 2024 +0300

    More translations (spacedriveapp#2051)

    * translations

    * more translation keys

    * all the translations

apps/mobile/metro.config.js

@@ -21,7 +21,7 @@ const metroConfig = makeMetroConfig({
 	resolver: {
 		...expoDefaultConfig.resolver,
 		extraNodeModules: {
-			'react-native-svg': reactSVGPath
+			'react-native-svg': reactSVGPath,
 		},
 		blockList: exclusionList([reactSVGExclude, rspcClientExclude, rspcReactExclude]),
 		sourceExts: [...expoDefaultConfig.resolver.sourceExts, 'svg'],

apps/mobile/package.json

@@ -35,7 +35,8 @@
     "class-variance-authority": "^0.7.0",
     "dayjs": "^1.11.10",
     "event-target-polyfill": "^0.0.3",
-    "expo": "~50.0.5",
+    "expo": "~50.0.6",
+    "expo-av": "^13.10.5",
     "expo-blur": "^12.9.1",
     "expo-build-properties": "~0.11.1",
     "expo-linking": "~6.2.2",
@@ -49,7 +50,7 @@
     "phosphor-react-native": "^2.0.0",
     "react": "^18.2.0",
     "react-hook-form": "^7.47.0",
-    "react-native": "0.73.2",
+    "react-native": "0.73.4",
     "react-native-circular-progress": "^1.3.9",
     "react-native-document-picker": "^9.0.1",
     "react-native-fs": "^2.20.0",

apps/mobile/src/components/header/Header.tsx

@@ -77,8 +77,8 @@ export default function Header({
 				Platform.OS === 'android' ? 'pt-5' : 'pt-10'
 			)}
 		>
-			<View style={tw`mx-auto mt-5 h-auto w-full justify-center px-7 pb-5`}>
-				<View style={tw`w-full flex-row items-center justify-between`}>
+			<View style={tw`justify-center w-full h-auto pb-5 mx-auto mt-5 px-7`}>
+				<View style={tw`flex-row items-center justify-between w-full`}>
 					<View style={tw`flex-row items-center gap-5`}>
 						{navBack && (
 							<Pressable

apps/mobile/src/components/settings/SettingsItem.tsx

@@ -24,10 +24,10 @@ export function SettingsItem(props: SettingsItemProps) {
 	return (
 		<Pressable onPress={props.onPress}>
 			<View style={twStyle(' border-app-input bg-sidebar-box', borderRounded, border)}>
-				<View style={tw`h-auto flex-row items-center`}>
+				<View style={tw`flex-row items-center h-auto`}>
 					{props.leftIcon && (
 						<View
-							style={tw`ml-4 mr-5 h-8 w-8 items-center justify-center rounded-full bg-app-input`}
+							style={tw`items-center justify-center w-8 h-8 ml-4 mr-5 rounded-full bg-app-input`}
 						>
 							{props.leftIcon({ size: 20, color: tw.color('ink-dull') })}
 						</View>

apps/mobile/src/navigation/OnboardingNavigator.tsx

@@ -1,4 +1,6 @@
 import { createStackNavigator, StackScreenProps } from '@react-navigation/stack';
+import { useEffect } from 'react';
+import { useOnboardingStore } from '@sd/client';
 import { OnboardingContext, useContextValue } from '~/screens/onboarding/context';
 import CreatingLibraryScreen from '~/screens/onboarding/CreatingLibrary';
 import GetStartedScreen from '~/screens/onboarding/GetStarted';

apps/mobile/src/screens/browse/index.tsx

@@ -1,8 +1,9 @@
+import AsyncStorage from '@react-native-async-storage/async-storage';
 import { useBottomTabBarHeight } from '@react-navigation/bottom-tabs';
 import { CheckCircle } from 'phosphor-react-native';
 import React from 'react';
 import { ScrollView, View } from 'react-native';
-import { useLibraryQuery } from '@sd/client';
+import { resetOnboardingStore, useLibraryQuery } from '@sd/client';
 import { PulseAnimation } from '~/components/animation/lottie';
 import BrowseLocations from '~/components/browse/BrowseLocations';
 import BrowseTags from '~/components/browse/BrowseTags';

apps/mobile/src/screens/onboarding/GetStarted.tsx

@@ -1,10 +1,14 @@
 import { useNavigation, useRoute } from '@react-navigation/native';
 import { AppLogo, BloomOne } from '@sd/assets/images';
+import { sdintro } from '@sd/assets/videos';
+import { ResizeMode, Video } from 'expo-av';
 import { MotiView } from 'moti';
 import { CaretLeft } from 'phosphor-react-native';
+import { useEffect } from 'react';
 import { Image, KeyboardAvoidingView, Platform, Pressable, Text, View } from 'react-native';
 import Animated from 'react-native-reanimated';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { useOnboardingStore } from '@sd/client';
 import { FadeInUpAnimation, LogoAnimation } from '~/components/animation/layout';
 import { AnimatedButton } from '~/components/primitive/Button';
 import { styled, tw, twStyle } from '~/lib/tailwind';
@@ -13,11 +17,31 @@ import { OnboardingStackScreenProps } from '~/navigation/OnboardingNavigator';
 export function OnboardingContainer({ children }: React.PropsWithChildren) {
 	const navigation = useNavigation();
 	const route = useRoute();
-
 	const { top, bottom } = useSafeAreaInsets();
-
+	const store = useOnboardingStore();
 	return (
-		<View style={tw`flex-1`}>
+		<View style={tw`relative flex-1`}>
+			{store.showIntro && (
+				<View
+					style={twStyle(
+						'absolute z-50 mx-auto h-full w-full flex-1 items-center justify-center',
+						Platform.OS === 'ios' ? 'bg-[#1C1E27]' : 'bg-[#1E1D28]'
+					)}
+				>
+					<Video
+						style={tw`w-[700px] h-[700px]`}
+						shouldPlay
+						onPlaybackStatusUpdate={(status) => {
+							if (status.isLoaded && status.didJustFinish) {
+								store.showIntro = false;
+							}
+						}}
+						source={sdintro}
+						isMuted
+						resizeMode={ResizeMode.CONTAIN}
+					/>
+				</View>
+			)}
 			{route.name !== 'GetStarted' && route.name !== 'CreatingLibrary' && (
 				<Pressable
 					style={twStyle('absolute left-6 z-50', { top: top + 16 })}
@@ -26,22 +50,22 @@ export function OnboardingContainer({ children }: React.PropsWithChildren) {
 					<CaretLeft size={24} weight="bold" color="white" />
 				</Pressable>
 			)}
-			<View style={tw`z-10 flex-1 items-center justify-center`}>
+			<View style={tw`z-10 items-center justify-center flex-1`}>
 				<KeyboardAvoidingView
 					behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
 					keyboardVerticalOffset={bottom}
-					style={tw`w-full flex-1 items-center justify-center`}
+					style={tw`items-center justify-center flex-1 w-full`}
 				>
-					<MotiView style={tw`w-full items-center justify-center px-4`}>
+					<MotiView style={tw`items-center justify-center w-full px-4`}>
 						{children}
 					</MotiView>
 				</KeyboardAvoidingView>
-				<Text style={tw`absolute bottom-8 text-xs text-ink-dull/50`}>
+				<Text style={tw`absolute text-xs bottom-8 text-ink-dull/50`}>
 					&copy; {new Date().getFullYear()} Spacedrive Technology Inc.
 				</Text>
 			</View>
 			{/* Bloom */}
-			<Image source={BloomOne} style={tw`top-100 absolute h-screen w-screen opacity-20`} />
+			<Image source={BloomOne} style={tw`absolute w-screen h-screen top-100 opacity-20`} />
 		</View>
 	);
 }
@@ -57,6 +81,11 @@ export const OnboardingDescription = styled(
 );
 
 const GetStartedScreen = ({ navigation }: OnboardingStackScreenProps<'GetStarted'>) => {
+	//initial render - reset video intro value
+	const store = useOnboardingStore();
+	useEffect(() => {
+		store.showIntro = true;
+	}, []);
 	return (
 		<OnboardingContainer>
 			{/* Logo */}
@@ -76,7 +105,7 @@ const GetStartedScreen = ({ navigation }: OnboardingStackScreenProps<'GetStarted
 			{/* Get Started Button */}
 			<FadeInUpAnimation delay={1200} style={tw`mt-8`}>
 				<AnimatedButton variant="accent" onPress={() => navigation.push('NewLibrary')}>
-					<Text style={tw`text-center text-base font-medium text-ink`}>Get Started</Text>
+					<Text style={tw`text-base font-medium text-center text-ink`}>Get Started</Text>
 				</AnimatedButton>
 			</FadeInUpAnimation>
 		</OnboardingContainer>

apps/mobile/src/screens/settings/library/LibraryGeneralSettings.tsx

@@ -1,7 +1,7 @@
 import { Trash } from 'phosphor-react-native';
 import React from 'react';
 import { Controller } from 'react-hook-form';
-import { Alert, View } from 'react-native';
+import { Alert, Text, View } from 'react-native';
 import { z } from 'zod';
 import { useBridgeMutation, useLibraryContext, useZodForm } from '@sd/client';
 import { Input } from '~/components/form/Input';
@@ -38,7 +38,7 @@ const LibraryGeneralSettingsScreen = (_: SettingsStackScreenProps<'LibraryGenera
 
 	return (
 		<View style={tw`gap-4`}>
-			<View style={tw`mt-4 px-2`}>
+			<View style={tw`px-2 mt-4`}>
 				<SettingsTitle>Name</SettingsTitle>
 				<Controller
 					name="name"
@@ -66,21 +66,7 @@ const LibraryGeneralSettingsScreen = (_: SettingsStackScreenProps<'LibraryGenera
 				{/* Export */}
 				<SettingsItem title="Export Library" onPress={() => Alert.alert('TODO')} />
 				{/* Delete Library */}
-				<SettingsContainer description="This is permanent, your files will not be deleted, only the Spacedrive library.">
-					<SettingsItem
-						title="Delete Library"
-						rightArea={
-							<DeleteLibraryModal
-								libraryUuid={library.uuid}
-								trigger={
-									<FakeButton size="sm" variant="danger">
-										<Trash color={tw.color('ink')} size={20} />
-									</FakeButton>
-								}
-							/>
-						}
-					/>
-				</SettingsContainer>
+				<DeleteLibraryModal trigger={<Text>Delete</Text>} libraryUuid={library.uuid} />
 			</View>
 		</View>
 	);

apps/mobile/src/types/declarations.d.ts

@@ -9,3 +9,8 @@ declare module '*.png' {
 	const content: any;
 	export default content;
 }
+
+declare module '*.mp4' {
+	const content: any;
+	export default content;
+}

interface/app/$libraryId/Layout/Sidebar/SidebarLayout/FeedbackButton.tsx

@@ -2,22 +2,26 @@ import clsx from 'clsx';
 import { Controller } from 'react-hook-form';
 import { auth, useBridgeMutation, useZodForm } from '@sd/client';
 import { Button, Form, Popover, TextAreaField, toast, usePopover, z } from '@sd/ui';
+import i18n from '~/app/I18n';
 import { LoginButton } from '~/components/LoginButton';
+import { useLocale } from '~/hooks';
 
 const schema = z.object({
-	message: z.string().min(1, { message: 'Feedback is required' }),
+	message: z.string().min(1, { message: i18n.t('feedback_is_required') }),
 	emoji: z.number().min(0).max(3)
 });
 
 const EMOJIS = ['🤩', '😀', '🙁', '😭'];
 
 export default function () {
+	const { t } = useLocale();
+
 	const sendFeedback = useBridgeMutation(['api.sendFeedback'], {
 		onError() {
-			toast.error('There was an error submitting your feedback. Please try again.');
+			toast.error(t('feedback_toast_error_message'));
 		},
 		onSuccess() {
-			toast.success('Thanks for your feedback!');
+			toast.success(t('thank_you_for_your_feedback'));
 		}
 	});
 
@@ -37,7 +41,7 @@ export default function () {
 			popover={popover}
 			trigger={
 				<Button variant="outline" className="flex items-center gap-1">
-					<p className="text-[11px] font-normal text-sidebar-inkFaint">Feedback</p>
+					<p className="text-[11px] font-normal text-sidebar-inkFaint">{t('feedback')}</p>
 				</Button>
 			}
 		>
@@ -55,14 +59,14 @@ export default function () {
 						<div className="flex flex-row items-center gap-2">
 							<p className="flex-1 text-xs text-ink-dull">
 								{authState.status !== 'loggingIn' &&
-									'Logging in allows us to respond to your feedback'}
+									t('feedback_login_description')}
 							</p>
 							<LoginButton cancelPosition="left" />
 						</div>
 					)}
 					<TextAreaField
 						{...form.register('message')}
-						placeholder="Your feedback..."
+						placeholder={t('feedback_placeholder')}
 						className="!h-36 w-full flex-1"
 					/>
 					<div className="flex flex-row justify-between">
@@ -89,7 +93,7 @@ export default function () {
 						/>
 
 						<Button type="submit" variant="accent" disabled={!form.formState.isValid}>
-							Send
+							{t('send')}
 						</Button>
 					</div>
 				</div>

interface/app/$libraryId/settings/client/SpacedriveAccount.tsx

@@ -1,6 +1,7 @@
 import { auth, useBridgeQuery } from '@sd/client';
 import { Button, Card } from '@sd/ui';
 import { AuthRequiredOverlay } from '~/components/AuthRequiredOverlay';
+import { useLocale } from '~/hooks';
 
 export function SpacedriveAccount() {
 	return (
@@ -13,17 +14,18 @@ export function SpacedriveAccount() {
 
 function Account() {
 	const me = useBridgeQuery(['auth.me'], { retry: false });
+	const { t } = useLocale();
 
 	return (
 		<div className="my-2 flex w-full flex-col">
 			<div className="flex items-center justify-between">
-				<span className="font-semibold">Spacedrive Account</span>
+				<span className="font-semibold">{t("spacedrive_account")}</span>
 				<Button variant="gray" onClick={auth.logout}>
-					Logout
+					{t('logout')}
 				</Button>
 			</div>
 			<hr className="mb-4 mt-2 w-full border-app-line" />
-			<span>Logged in as {me.data?.email}</span>
+			<span>{t('logged_in_as', { email: me.data?.email })}</span>
 		</div>
 	);
 }

interface/app/$libraryId/settings/client/account.tsx

@@ -1,9 +1,8 @@
 import { Envelope, User } from '@phosphor-icons/react';
-import { iconNames } from '@sd/assets/util';
 import { useEffect, useState } from 'react';
 import { auth, useBridgeMutation, useBridgeQuery, useFeatureFlag } from '@sd/client';
 import { Button, Card, Input, toast } from '@sd/ui';
-import { Icon, TruncatedText } from '~/components';
+import { TruncatedText } from '~/components';
 import { AuthRequiredOverlay } from '~/components/AuthRequiredOverlay';
 import { useLocale } from '~/hooks';
 
@@ -21,14 +20,14 @@ export const Component = () => {
 						{authStore.status === 'loggedIn' && (
 							<div className="flex-row space-x-2">
 								<Button variant="accent" size="sm" onClick={auth.logout}>
-									Logout
+									{t('logout')}
 								</Button>
 							</div>
 						)}
 					</>
 				}
-				title="Spacedrive Cloud"
-				description="Spacedrive is always local first, but we will offer our own optional cloud services in the future. For now, authentication is only used for the Feedback feature, otherwise it is not required."
+				title={t('spacedrive_cloud')}
+				description={t('spacedrive_cloud_description')}
 			/>
 			<div className="flex flex-col justify-between gap-5 lg:flex-row">
 				<Profile authStore={authStore} email={me.data?.email} />

interface/app/$libraryId/settings/client/keybindings.tsx

@@ -7,6 +7,7 @@ import {
 import clsx from 'clsx';
 import { useState } from 'react';
 import { Divider, ModifierKeys, Switch } from '@sd/ui';
+import i18n from '~/app/I18n';
 import { Shortcut, shortcutCategories, useLocale, useOperatingSystem } from '~/hooks';
 import { keybindForOs } from '~/util/keybinds';
 import { OperatingSystem } from '~/util/Platform';
@@ -102,11 +103,11 @@ function createKeybindColumns(os: OperatingSystem) {
 	}>();
 	const columns = [
 		columnHelper.accessor('action', {
-			header: 'Description',
+			header: i18n.t('description'),
 			cell: (info) => <p className="w-full text-sm text-ink-faint">{info.getValue()}</p>
 		}),
 		columnHelper.accessor('icons', {
-			header: () => <p className="text-right">Key</p>,
+			header: () => <p className="text-right">{i18n.t('key')}</p>,
 			size: 200,
 			cell: (info) => {
 				const checkData = info.getValue()[os] || info.getValue()['all'];

interface/app/$libraryId/settings/library/locations/AddLocationButton.tsx

@@ -4,7 +4,7 @@ import { motion } from 'framer-motion';
 import { ComponentProps, useRef, useState } from 'react';
 import { useLibraryContext } from '@sd/client';
 import { Button, dialogManager, type ButtonProps } from '@sd/ui';
-import { useCallbackToWatchResize } from '~/hooks';
+import { useCallbackToWatchResize, useLocale } from '~/hooks';
 import { usePlatform } from '~/util/Platform';
 
 import { AddLocationDialog } from './AddLocationDialog';
@@ -26,6 +26,8 @@ export const AddLocationButton = ({
 	const platform = usePlatform();
 	const libraryId = useLibraryContext().library.uuid;
 
+	const { t } = useLocale();
+
 	const transition = {
 		type: 'keyframes',
 		ease: 'easeInOut',
@@ -90,7 +92,7 @@ export const AddLocationButton = ({
 						</div>
 					</div>
 				) : (
-					'Add Location'
+					t('add_location')
 				)}
 			</Button>
 		</>