feat: workspaces on mobile

src/App.tsx

@@ -4,6 +4,7 @@ import { MobileApplication } from '@Lib/Application'
 import { ApplicationGroup } from '@Lib/ApplicationGroup'
 import { navigationRef } from '@Lib/NavigationService'
 import { DefaultTheme, NavigationContainer } from '@react-navigation/native'
+import { ApplicationGroupContext } from '@Root/ApplicationGroupContext'
 import { MobileThemeVariables } from '@Root/Style/Themes/styled-components'
 import { ApplicationGroupEvent, DeinitMode, DeinitSource } from '@standardnotes/snjs'
 import { ThemeService, ThemeServiceContext } from '@Style/ThemeService'
@@ -58,7 +59,7 @@ const AppComponent: React.FC<{
         void application.launch()
       }
     },
-    [application]
+    [application],
   )
 
   useEffect(() => {
@@ -145,15 +146,17 @@ export const App = (props: { env: TEnvironment }) => {
       }
     })
     return removeAppChangeObserver
-  }, [appGroup, appGroup.primaryApplication, setAppGroup, createNewAppGroup])
+  }, [appGroup, appGroup.primaryApplication, createNewAppGroup])
 
   if (!application) {
     return null
   }
 
   return (
-    <ApplicationContext.Provider value={application}>
-      <AppComponent env={props.env} key={application.Uuid} application={application} />
-    </ApplicationContext.Provider>
+    <ApplicationGroupContext.Provider value={appGroup}>
+      <ApplicationContext.Provider value={application}>
+        <AppComponent env={props.env} key={application.Uuid} application={application} />
+      </ApplicationContext.Provider>
+    </ApplicationGroupContext.Provider>
   )
 }

src/ApplicationGroupContext.tsx

@@ -0,0 +1,4 @@
+import { ApplicationGroup } from '@Lib/ApplicationGroup'
+import React from 'react'
+
+export const ApplicationGroupContext = React.createContext<ApplicationGroup | undefined>(undefined)

src/Hooks/useSafeApplicationGroupContext.ts

@@ -0,0 +1,8 @@
+import { ApplicationGroup } from '@Lib/ApplicationGroup'
+import { ApplicationGroupContext } from '@Root/ApplicationGroupContext'
+import { useContext } from 'react'
+
+export const useSafeApplicationGroupContext = () => {
+  const applicationGroupContext = useContext(ApplicationGroupContext) as ApplicationGroup
+  return applicationGroupContext
+}

src/Lib/Interface.ts

@@ -80,7 +80,7 @@ export class MobileDeviceInterface implements DeviceInterface {
   private async getAllDatabaseKeys(identifier: ApplicationIdentifier) {
     const keys = await AsyncStorage.getAllKeys()
     const filtered = keys.filter(key => {
-      return key.includes(this.getDatabaseKeyPrefix(identifier))
+      return key.startsWith(this.getDatabaseKeyPrefix(identifier))
     })
     return filtered
   }

src/ModalStack.tsx

@@ -14,13 +14,15 @@ import {
   SCREEN_INPUT_MODAL_FILE_NAME,
   SCREEN_INPUT_MODAL_PASSCODE,
   SCREEN_INPUT_MODAL_TAG,
+  SCREEN_INPUT_MODAL_WORKSPACE_NAME,
   SCREEN_MANAGE_SESSIONS,
   SCREEN_SETTINGS,
   SCREEN_UPLOADED_FILES_LIST,
 } from '@Root/Screens/screens'
 import { Settings } from '@Root/Screens/Settings/Settings'
 import { UploadedFilesList } from '@Root/Screens/UploadedFilesList/UploadedFilesList'
-import { Challenge, DeinitMode, DeinitSource, FileItem, SNNote } from '@standardnotes/snjs'
+import { WorkspaceInputModal } from '@Screens/InputModal/WorkspaceInputModal'
+import { ApplicationDescriptor, Challenge, DeinitMode, DeinitSource, FileItem, SNNote } from '@standardnotes/snjs'
 import { ICON_CHECKMARK, ICON_CLOSE } from '@Style/Icons'
 import { ThemeService } from '@Style/ThemeService'
 import React, { memo, useContext } from 'react'
@@ -48,6 +50,10 @@ export type ModalStackNavigatorParamList = {
   [SCREEN_UPLOADED_FILES_LIST]: HeaderTitleParams & {
     note: SNNote
   }
+  [SCREEN_INPUT_MODAL_WORKSPACE_NAME]: HeaderTitleParams & {
+    descriptor: ApplicationDescriptor
+    renameWorkspace: (descriptor: ApplicationDescriptor, workspaceName: string) => Promise<void>
+  }
   [SCREEN_INPUT_MODAL_PASSCODE]: undefined
   [SCREEN_AUTHENTICATE]: {
     challenge: Challenge
@@ -275,6 +281,28 @@ export const MainStackComponent = ({ env }: { env: TEnvironment }) => {
         })}
         component={BlockingModal}
       />
+      <MainStack.Screen
+        name={SCREEN_INPUT_MODAL_WORKSPACE_NAME}
+        options={({ route }) => ({
+          title: 'Workspace',
+          gestureEnabled: false,
+          headerTitle: ({ children }) => {
+            return <HeaderTitleView title={route.params?.title ?? (children || '')} />
+          },
+          headerLeft: ({ disabled, onPress }) => (
+            <HeaderButtons HeaderButtonComponent={IoniconsHeaderButton}>
+              <Item
+                testID="headerButton"
+                disabled={disabled}
+                title={Platform.OS === 'ios' ? 'Cancel' : ''}
+                iconName={Platform.OS === 'ios' ? undefined : ThemeService.nameForIcon(ICON_CLOSE)}
+                onPress={onPress}
+              />
+            </HeaderButtons>
+          ),
+        })}
+        component={WorkspaceInputModal}
+      />
     </MainStack.Navigator>
   )
 }

src/Screens/InputModal/WorkspaceInputModal.tsx

@@ -0,0 +1,61 @@
+import { ButtonCell } from '@Root/Components/ButtonCell'
+import { SectionedTableCell } from '@Root/Components/SectionedTableCell'
+import { TableSection } from '@Root/Components/TableSection'
+import { useSafeApplicationContext } from '@Root/Hooks/useSafeApplicationContext'
+import { ModalStackNavigationProp } from '@Root/ModalStack'
+import { SCREEN_INPUT_MODAL_WORKSPACE_NAME } from '@Root/Screens/screens'
+import { ThemeServiceContext } from '@Style/ThemeService'
+import React, { FC, useContext, useEffect, useRef, useState } from 'react'
+import { TextInput } from 'react-native'
+import { Container, Input } from './InputModal.styled'
+
+type Props = ModalStackNavigationProp<typeof SCREEN_INPUT_MODAL_WORKSPACE_NAME>
+
+export const WorkspaceInputModal: FC<Props> = props => {
+  const { descriptor, renameWorkspace } = props.route.params
+  const themeService = useContext(ThemeServiceContext)
+  const application = useSafeApplicationContext()
+
+  const workspaceNameInputRef = useRef<TextInput>(null)
+
+  const [workspaceName, setWorkspaceName] = useState(descriptor.label)
+
+  const onSubmit = async () => {
+    const trimmedWorkspaceName = workspaceName.trim()
+    if (trimmedWorkspaceName === '') {
+      setWorkspaceName(descriptor.label)
+      await application?.alertService.alert('Workspace name cannot be empty')
+      workspaceNameInputRef.current?.focus()
+      return
+    }
+    await renameWorkspace(descriptor, trimmedWorkspaceName)
+    void application.sync.sync()
+    props.navigation.goBack()
+  }
+
+  useEffect(() => {
+    workspaceNameInputRef.current?.focus()
+  }, [])
+
+  return (
+    <Container>
+      <TableSection>
+        <SectionedTableCell textInputCell first={true}>
+          <Input
+            ref={workspaceNameInputRef as any}
+            placeholder={'Workspace name'}
+            onChangeText={setWorkspaceName}
+            value={workspaceName}
+            autoCorrect={false}
+            autoCapitalize={'none'}
+            keyboardAppearance={themeService?.keyboardColorForActiveTheme()}
+            underlineColorAndroid={'transparent'}
+            onSubmitEditing={onSubmit}
+          />
+        </SectionedTableCell>
+
+        <ButtonCell maxHeight={45} disabled={workspaceName.length === 0} title={'Save'} bold onPress={onSubmit} />
+      </TableSection>
+    </Container>
+  )
+}

src/Screens/Notes/Notes.tsx

@@ -344,7 +344,7 @@ export const Notes = React.memo(
           reloadNotesDisplayOptions()
         }
 
-        const newNotes = application.items.getDisplayableNotes()
+        const newNotes = application.items.getDisplayableNotes() // TODO: returns notes from all workspaces when in Main workspace
         const renderedNotes: SNNote[] = newNotes
 
         setNotes(renderedNotes)