feat: mobile workspaces (#1093)

packages/mobile/src/Screens/Notes/NoteCell.styled.ts

@@ -8,7 +8,7 @@ export const Container = styled.View<{ selected: boolean; distance: number }>`
   flex-direction: row;
   align-items: flex-start;
   justify-content: space-between;
-  padding: ${props => props.distance}px 0 0 ${props => props.distance}px;
+  padding: ${(props) => props.distance}px 0 0 ${(props) => props.distance}px;
   background-color: ${({ theme, selected }) => {
     return selected ? theme.stylekitInfoColor : theme.stylekitBackgroundColor
   }};
@@ -16,10 +16,10 @@ export const Container = styled.View<{ selected: boolean; distance: number }>`
 export const NoteDataContainer = styled.View<{ distance: number }>`
   border-bottom-color: ${({ theme }) => hexToRGBA(theme.stylekitBorderColor, 0.75)};
   border-bottom-width: 1px;
-  padding-bottom: ${props => props.distance}px;
+  padding-bottom: ${(props) => props.distance}px;
   flex-grow: 1;
   flex-shrink: 1;
-  padding-right: ${props => props.distance}px;
+  padding-right: ${(props) => props.distance}px;
 `
 export const DeletedText = styled.Text`
   color: ${({ theme }) => theme.stylekitInfoColor};
@@ -54,7 +54,7 @@ export const TagText = styled.Text<{ selected: boolean }>`
   color: ${({ theme, selected }) => {
     return selected ? theme.stylekitInfoContrastColor : theme.stylekitForegroundColor
   }};
-  opacity: ${props => (props.selected ? 0.8 : 0.5)};
+  opacity: ${(props) => (props.selected ? 0.8 : 0.5)};
 `
 export const DetailsText = styled(TagText)`
   margin-right: 0;

packages/mobile/src/Screens/Notes/NoteCell.tsx

@@ -62,7 +62,7 @@ export const NoteCell = ({
       await application?.mutator.deleteItem(note)
     },
     () => {
-      void changeNote(mutator => {
+      void changeNote((mutator) => {
         mutator.trashed = true
       }, false)
     },
@@ -105,7 +105,7 @@ export const NoteCell = ({
         text: note.pinned ? 'Unpin' : 'Pin',
         key: 'pin',
         callback: () =>
-          changeNote(mutator => {
+          changeNote((mutator) => {
             mutator.pinned = !note.pinned
           }, false),
       })
@@ -123,7 +123,7 @@ export const NoteCell = ({
             return
           }
 
-          void changeNote(mutator => {
+          void changeNote((mutator) => {
             mutator.archived = !note.archived
           }, false)
         },
@@ -133,7 +133,7 @@ export const NoteCell = ({
         text: note.locked ? 'Enable editing' : 'Prevent editing',
         key: 'lock',
         callback: () =>
-          changeNote(mutator => {
+          changeNote((mutator) => {
             mutator.locked = !note.locked
           }, false),
       })
@@ -157,7 +157,7 @@ export const NoteCell = ({
             text: 'Restore',
             key: 'restore-note',
             callback: () => {
-              void changeNote(mutator => {
+              void changeNote((mutator) => {
                 mutator.trashed = false
               }, false)
             },

packages/mobile/src/Screens/Notes/NoteCellFlags.tsx

@@ -44,7 +44,7 @@ export const NoteCellFlags = ({ note, highlight }: { note: SNNote; highlight: bo
 
   return flags.length > 0 ? (
     <FlagsContainer>
-      {flags.map(flag => (
+      {flags.map((flag) => (
         <FlagContainer key={flag.text.concat(flag.color)} color={flag.color} selected={highlight}>
           <FlagLabel selected={highlight}>{flag.text}</FlagLabel>
         </FlagContainer>

packages/mobile/src/Screens/Notes/NoteList.styled.ts

@@ -15,7 +15,7 @@ export const styles = StyleSheet.create({
 })
 
 export const Container = styled.View`
-  background-color: ${props => props.theme.stylekitBackgroundColor};
+  background-color: ${(props) => props.theme.stylekitBackgroundColor};
   flex: 1;
 `
 
@@ -32,8 +32,8 @@ interface LoadingTextProps {
 export const LoadingText = styled.Text<LoadingTextProps>`
   position: absolute;
   opacity: 0.5;
-  color: ${props => props.theme.stylekitForegroundColor};
-  text-align: ${props => props.textAlign ?? 'left'};
+  color: ${(props) => props.theme.stylekitForegroundColor};
+  text-align: ${(props) => props.textAlign ?? 'left'};
 `
 
 export const HeaderContainer = styled.View`
@@ -43,7 +43,7 @@ export const HeaderContainer = styled.View`
 `
 
 export const SearchBarContainer = styled.View`
-  background-color: ${props => props.theme.stylekitBackgroundColor};
+  background-color: ${(props) => props.theme.stylekitBackgroundColor};
   z-index: 2;
 `
 

packages/mobile/src/Screens/Notes/NoteList.tsx

@@ -82,7 +82,7 @@ export const NoteList = (props: Props) => {
   })
 
   useEffect(() => {
-    const unsubscribeStateEventObserver = application?.getAppState().addStateEventObserver(state => {
+    const unsubscribeStateEventObserver = application?.getAppState().addStateEventObserver((state) => {
       if (state === AppStateEventType.DrawerOpen) {
         dismissKeyboard()
       }
@@ -99,7 +99,7 @@ export const NoteList = (props: Props) => {
   }, [noteListScrolled, props.notes])
 
   useEffect(() => {
-    const unsubscribeTagChangedEventObserver = application?.getAppState().addStateChangeObserver(event => {
+    const unsubscribeTagChangedEventObserver = application?.getAppState().addStateChangeObserver((event) => {
       if (event === AppStateType.TagChanged) {
         scrollListToTop()
       }
@@ -223,7 +223,7 @@ export const NoteList = (props: Props) => {
       <FlatList
         ref={noteListRef}
         style={styles.list}
-        keyExtractor={item => item?.uuid}
+        keyExtractor={(item) => item?.uuid}
         contentContainerStyle={[{ paddingBottom: insets.bottom }, props.notes.length > 0 ? {} : { height: '100%' }]}
         initialNumToRender={6}
         windowSize={6}

packages/mobile/src/Screens/Notes/Notes.tsx

@@ -83,7 +83,7 @@ export const Notes = React.memo(
           title = selectedTag.title
           if (selectedTag instanceof SNTag && selectedTag.parentId) {
             const parents = application.items.getTagParentChain(selectedTag)
-            const hierarchy = parents.map(tag => tag.title).join(' ⫽ ')
+            const hierarchy = parents.map((tag) => tag.title).join(' ⫽ ')
             subTitle = hierarchy.length > 0 ? `in ${hierarchy}` : undefined
           }
         }
@@ -163,7 +163,7 @@ export const Notes = React.memo(
 
     useEffect(() => {
       let mounted = true
-      const removeEditorObserver = application.editorGroup.addActiveControllerChangeObserver(activeEditor => {
+      const removeEditorObserver = application.editorGroup.addActiveControllerChangeObserver((activeEditor) => {
         if (mounted) {
           setSelectedNoteId(activeEditor?.item?.uuid)
         }
@@ -305,7 +305,7 @@ export const Notes = React.memo(
       toggleIncludeTrashed,
     ])
 
-    const getFirstSelectableNote = useCallback((newNotes: SNNote[]) => newNotes.find(note => !note.protected), [])
+    const getFirstSelectableNote = useCallback((newNotes: SNNote[]) => newNotes.find((note) => !note.protected), [])
 
     const selectFirstNote = useCallback(
       (newNotes: SNNote[]) => {
@@ -475,7 +475,7 @@ export const Notes = React.memo(
     )
 
     useEffect(() => {
-      const removeAppStateChangeHandler = application.getAppState().addStateChangeObserver(state => {
+      const removeAppStateChangeHandler = application.getAppState().addStateChangeObserver((state) => {
         if (state === AppStateType.TagChanged) {
           reloadNotesDisplayOptions()
           reloadNotes(true, true)

packages/mobile/src/Screens/Notes/OfflineBanner.styled.ts

@@ -11,17 +11,17 @@ const Container = styled.View`
   padding: ${PADDING}px;
   border-width: 1px;
   border-radius: 4px;
-  border-color: ${props => props.theme.stylekitBorderColor};
+  border-color: ${(props) => props.theme.stylekitBorderColor};
 `
 const CenterContainer = styled.View`
   justify-content: center;
 `
 const UserIcon = styled(Icon)`
   font-size: 24px;
-  color: ${props => props.theme.stylekitInfoColor};
+  color: ${(props) => props.theme.stylekitInfoColor};
 `
 const ForwardIcon = styled(UserIcon)`
-  color: ${props => props.theme.stylekitNeutralColor};
+  color: ${(props) => props.theme.stylekitNeutralColor};
 `
 const TextContainer = styled.View`
   flex: 1;
@@ -30,12 +30,12 @@ const TextContainer = styled.View`
 const BoldText = styled.Text`
   font-size: 15px;
   font-weight: 600;
-  color: ${props => props.theme.stylekitForegroundColor};
+  color: ${(props) => props.theme.stylekitForegroundColor};
 `
 const SubText = styled.Text`
   margin-top: 2px;
   font-size: 11px;
-  color: ${props => props.theme.stylekitNeutralColor};
+  color: ${(props) => props.theme.stylekitNeutralColor};
 `
 
 export { Touchable, Container, CenterContainer, UserIcon, ForwardIcon, TextContainer, BoldText, SubText }