adding welcome screen to small mobile layout

app/client/mobile/src/LocalStore.ts

@@ -14,7 +14,7 @@ export class LocalStore implements SqlStore {
     await this.localStoreSet('CREATE TABLE IF NOT EXISTS local_store (key text, value text, unique(key));');
   }
 
-  public async get(key: string, value: string, unset: string): Promise<string> {
+  public async get(key: string, unset: string): Promise<string> {
     try {
       const rows = await this.localStoreGet(`SELECT * FROM local_store WHERE key='${key}';`);
       if (rows.length === 1 && rows[0].value != null) {

app/client/mobile/src/constants/Strings.ts

@@ -5,6 +5,7 @@ export const en = {
   acceptTerms: 'Accept Terms of Service',
   terms: 'Terms of Service',
   access: 'Access',
+  continue: 'Continue',
 
   textSmall: 'Small',
   textMedium: 'Medium',
@@ -300,6 +301,7 @@ export const fr = {
   acceptTerms: 'Accepter les conditions d\'utilisation',
   terms: 'Conditions d\'utilisation',
   access: 'Accès',
+  continue: 'Continue',
 
   textSmall: 'Petit',
   textMedium: 'Moyen',
@@ -595,6 +597,7 @@ export const sp = {
   acceptTerms: 'Aceptar los términos de servicio',
   terms: 'Términos de servicio',
   access: 'Acceso',
+  continue: 'Continúa',
 
   textSmall: 'Pequeño',
   textMedium: 'Mediano',
@@ -889,6 +892,7 @@ export const pt = {
   acceptTerms: 'Aceitar os termos de serviço',
   terms: 'Termos de serviço',
   access: 'Acesso',
+  continue: 'Continue',
 
   textSmall: 'Pequeno',
   textMedium: 'Médio',
@@ -1183,6 +1187,7 @@ export const de = {
   acceptTerms: 'Nutzungsbedingungen akzeptieren',
   terms: 'Nutzungsbedingungen',
   access: 'Zugang',
+  continue: 'Weiter',
 
   textSmall: 'Klein',
   textMedium: 'Mittel',
@@ -1477,6 +1482,7 @@ export const ru = {
   acceptTerms: 'Принять условия обслуживания',
   terms: 'Условия обслуживания',
   access: 'Доступ',
+  continue: 'продолжай',
 
   textSmall: 'Маленький',
   textMedium: 'Средний',
@@ -1771,6 +1777,7 @@ export const el = {
   acceptTerms: 'Αποδεχτείτε τους όρους υπηρεσίας',
   terms: 'Όροι υπηρεσίας',
   access: 'Πρόσβαση',
+  continue: 'συνεχίζω',
 
   textSmall: 'Μικρό',
   textMedium: 'Μέσον',

app/client/mobile/src/context/useAppContext.hook.ts

@@ -7,7 +7,6 @@ import {LocalStore} from '../LocalStore';
 import { StagingFiles } from '../StagingFiles'
 import messaging from '@react-native-firebase/messaging';
 
-
 const DATABAG_DB = 'db_v244.db';
 const SETTINGS_DB = 'ls_v001.db';
 
@@ -47,6 +46,7 @@ export function useAppContext() {
     fullDayTime: false,
     monthFirstDate: true,
     initialized: false,
+    showWelcome: false,
     sharing: null as null | { cardId: string, channelId: string, filePath: string, mimeType: string },
   });
 
@@ -58,14 +58,15 @@ export function useAppContext() {
     await local.current.open(SETTINGS_DB);
     const fullDayTime = (await local.current.get('time_format', '12h')) === '24h';
     const monthFirstDate = (await local.current.get('date_format', 'month_first')) === 'month_first';
+    const showWelcome = (await local.current.get('show_welcome', 'show')) !== 'hide';
 
     const store = new SessionStore();
     await store.open(DATABAG_DB);
     const session: Session | null = await sdk.current.initOfflineStore(store);
     if (session) {
-      updateState({session, fullDayTime, monthFirstDate, initialized: true});
+      updateState({session, fullDayTime, monthFirstDate, showWelcome, initialized: true});
     } else {
-      updateState({ initialized: true });
+      updateState({ fullDayTime, monthFirstDate, showWelcome, initialized: true });
     }
 
     await requestUserPermission();
@@ -95,6 +96,10 @@ export function useAppContext() {
       updateState({fullDayTime});
       await local.current.set('time_format', fullDayTime ? '24h' : '12h');
     },
+    setShowWelcome: async (showWelcome: boolean) => {
+      updateState({ showWelcome });
+      await local.current.set('show_welcome', showWelcome ? 'show' : 'hide');
+    },
     accountLogin: async (username: string, password: string, node: string, secure: boolean, code: string) => {
       const deviceToken = await getToken();
 

app/client/mobile/src/session/Session.tsx

@@ -21,6 +21,7 @@ import {createNativeStackNavigator} from '@react-navigation/native-stack';
 import {Colors} from '../constants/Colors';
 import {Ring} from '../ring/Ring';
 import {Call} from '../call/Call';
+import {Welcome} from '../welcome/Welcome';
 
 const SettingsDrawer = createDrawerNavigator();
 const ContactsDrawer = createDrawerNavigator();
@@ -187,6 +188,7 @@ export function Session({ share }: { share: { filePath: string, mimeType: string
                 </View>
               </View>
             </SafeAreaView>
+            <Welcome />
           </Surface>
         )}
         {state.layout === 'large' && (

app/client/mobile/src/session/useSession.hook.ts

@@ -52,6 +52,9 @@ export function useSession() {
   }, [display.state]);
 
   const actions = {
+    clearWelcome: async () => {
+      await app.actions.setShowWelcome(false);
+    },
     logout: async () => {
       await app.actions.accountLogout();
     },

app/client/mobile/src/welcome/Welcome.styled.ts

@@ -0,0 +1,54 @@
+import {StyleSheet} from 'react-native';
+import { Colors } from '../constants/Colors';
+
+export const styles = StyleSheet.create({
+  base: {
+    width: '100%',
+    height: '100%',
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'center',
+    position: 'absolute',
+  },
+  show: {
+    top: 0,
+    left: 0,
+    width: '100%',
+    height: '100%',
+    position: 'absolute',
+  },
+  hide: {
+    display: 'none',
+  },
+  image: {
+    width: '50%',
+    height: '50%',
+  },
+  title: {
+    fontSize: 24,
+  },
+  description: {
+    fontSize: 16,
+  },
+  steps: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: 16,
+    paddingTop: 16,
+  },
+  step: {
+    display: 'flex',
+    flexDirection: 'row',
+    gap: 8,
+    align: 'center', 
+  },
+  label: {
+    fontSize: 18,
+  },
+  button: {
+    borderRadius: 8,
+    fontSize: 18,
+    marginTop: 32,
+  },
+});

app/client/mobile/src/welcome/Welcome.tsx

@@ -0,0 +1,44 @@
+import React from 'react'
+import { View, Image } from 'react-native';
+import { styles } from './Welcome.styled';
+import { useWelcome } from './useWelcome.hook';
+import light from '../images/lightness.png';
+import dark from '../images/darkness.png';
+import { useTheme, Button, Text, Icon} from 'react-native-paper';
+import { Colors } from '../constants/Colors';
+
+export function Welcome() {
+  const theme = useTheme();
+  const { state, actions } = useWelcome();
+
+console.log("WELCOME????", state.showWelcome);
+
+
+  return (
+    <View style={ state.showWelcome ? styles.show : styles.hide }>
+      <View style={{ ...styles.base, backgroundColor: theme.colors.base }}>
+        <Text style={styles.title}>Databag</Text>
+        <Text style={styles.description}>{ state.strings.communication }</Text>
+        <Image style={styles.image} source={theme.colors.name == 'light' ? light : dark} resizeMode="contain" />
+        <View style={styles.steps}>
+          <View style={styles.step}>
+            <Icon size={18} source="chevron-right" color={Colors.placeholder} />
+            <Text style={styles.label}>{ state.strings.setupProfile }</Text>
+          </View>
+          <View style={styles.step}>
+            <Icon size={18} source="chevron-right" color={Colors.placeholder} />
+            <Text style={styles.label}>{ state.strings.connectPeople }</Text>
+          </View>
+          <View style={styles.step}>
+            <Icon size={18} source="chevron-right" color={Colors.placeholder} />
+            <Text style={styles.label}>{ state.strings.startConversation }</Text>
+          </View>
+        </View>
+        <Button mode="contained" style={styles.button} onPress={actions.clearWelcome}>
+          {state.strings.continue}
+        </Button>
+      </View>
+    </View>
+  );
+}
+

app/client/mobile/src/welcome/useWelcome.hook.ts

@@ -0,0 +1,39 @@
+import { useState, useContext, useEffect } from 'react'
+import { DisplayContext } from '../context/DisplayContext';
+import { AppContext } from '../context/AppContext';
+import { ContextType } from '../context/ContextType'
+
+export function useWelcome() {
+  const app = useContext(AppContext) as ContextType
+  const display = useContext(DisplayContext) as ContextType
+  const [state, setState] = useState({
+    strings: display.state.strings,
+    showWelcome: null as null | boolean,
+  })
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const updateState = (value: any) => {
+    setState((s) => ({ ...s, ...value }))
+  }
+
+  useEffect(() => {
+console.log("-------> SETTING!");
+console.log("-------> SETTING!");
+console.log("-------> SETTING!");
+console.log("-------> SETTING!");
+console.log("-------> SETTING!");
+console.log("-------> SETTING!");
+  console.log(app.state);
+
+    const showWelcome = app.state.showWelcome;
+    updateState({ showWelcome });
+  }, [app.state]);
+
+  const actions = {
+    clearWelcome: async () => {
+      await app.actions.setShowWelcome(false);
+    },
+  }
+
+  return { state, actions }
+}