adding modal for new topics

app/client/mobile/src/content/Content.styled.ts

@@ -102,4 +102,45 @@ export const styles = StyleSheet.create({
     borderRadius: 8,
   },
   read: {},
+  modal: {
+    display: 'flex',
+    width: '100%',
+    height: '100%',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  blur: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    width: '100%',
+    height: '100%',
+  },
+  addSurface: {
+    padding: 16,
+    borderRadius: 4,
+  },
+  addContainer: {
+    width: 500,
+    maxWidth: '80%',
+  },
+  addHeader: {
+    display: 'flex',
+    flexDirection: 'row',
+  },
+  addClose: {
+    position: 'absolute',
+    right: 0,
+    top: 0,
+    backgroundColor: 'transparent', 
+  },
+  addLabel: {
+    flexGrow: 1,
+    fontSize: 20,
+    paddingLeft: 4,
+    paddingBottom: 8,
+  },
+  sealSwitch: {
+    transform: [{scaleX: 0.7}, {scaleY: 0.7}],
+  },
 });

app/client/mobile/src/content/Content.tsx

@@ -1,12 +1,15 @@
-import React from 'react';
+import React, { useState } from 'react';
-import {Divider, Surface, Button, Text, TextInput, useTheme} from 'react-native-paper';
+import {Divider, Switch, Surface, IconButton, Button, Text, TextInput, useTheme} from 'react-native-paper';
-import {SafeAreaView, FlatList, View} from 'react-native';
+import {SafeAreaView, Modal, FlatList, View} from 'react-native';
 import {styles} from './Content.styled';
 import {useContent} from './useContent.hook';
 import {Channel} from '../channel/Channel';
 import {Focus} from 'databag-client-sdk';
+import {BlurView} from '@react-native-community/blur';
 
 export function Content({select}: {select: (focus: Focus) => void}) {
+  const [add, setAdd] = useState(false);
+  const [sealable, setSealable] = useState(false);
   const {state, actions} = useContent();
   const theme = useTheme();
 
@@ -31,9 +34,7 @@ export function Content({select}: {select: (focus: Focus) => void}) {
             icon="comment-plus"
             mode="contained"
             style={styles.button}
-            onPress={() => {
+            onPress={() => setAdd(true)}>
-              console.log('ADD CHANNEL');
-            }}>
             {state.strings.new}
           </Button>
         )}
@@ -88,13 +89,35 @@ export function Content({select}: {select: (focus: Focus) => void}) {
             icon="comment-plus"
             mode="contained"
             style={styles.button}
-            onPress={() => {
+            onPress={() => setAdd(true)}>
-              console.log('ADD CHANNEL');
-            }}>
             {state.strings.new}
           </Button>
         </View>
       )}
+
+      <Modal animationType="fade" transparent={true} supportedOrientations={['portrait', 'landscape']} visible={add} onRequestClose={() => setAdd(false)}>
+        <View style={styles.modal}>
+          <BlurView style={styles.blur} blurType="dark" blurAmount={2} reducedTransparencyFallbackColor="dark" />
+          <View style={styles.addContainer}>
+            <Surface elevation={5} mode="flat" style={styles.addSurface}>
+              <Text style={styles.addLabel}>{ state.strings.newTopic }</Text>
+              <IconButton style={styles.addClose} icon="close" size={24} onPress={() => setAdd(false)} />
+              <TextInput
+                dense={true}
+                style={styles.input}
+                autoCapitalize={false}
+                unserlineStyle={styles.inputUnderline}
+                mode="outlined"
+                placeholder={state.strings.subjectOptional}
+                left={<TextInput.Icon style={styles.icon} icon="label-outline" />}
+                value={state.topic}
+                onChangeText={value => actions.setTopic(value)}
+              />
+              <Switch style={styles.sealSwitch} value={sealable} onValueChange={flag => setSealable(flag)} />
+            </Surface>
+          </View>
+        </View>
+      </Modal>  
     </View>
   );
 }

app/client/mobile/src/content/useContent.hook.ts

@@ -28,8 +28,20 @@ export function useContent() {
     sorted: [] as Channel[],
     filtered: [] as ChannelParams[],
     filter: '',
+    topic: '',
   });
 
+  const compare = (a: Card, b: Card) => {
+    const aval = `${a.handle}/${a.node}`;
+    const bval = `${b.handle}/${b.node}`;
+    if (aval < bval) {
+      return state.sortAsc ? 1 : -1;
+    } else if (aval > bval) {
+      return state.sortAsc ? -1 : 1;
+    }
+    return 0;
+  };
+
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const updateState = (value: any) => {
     setState(s => ({...s, ...value}));
@@ -149,7 +161,18 @@ export function useContent() {
       updateState({guid});
     };
     const setCards = (cards: Card[]) => {
-      updateState({cards});
+      const sorted = cards.sort(compare);
+      const connected = [];
+      const sealable = [];
+      sorted.forEach(card => {
+        if (card.status === 'connected') {
+          connected.push(card);
+          if (card.sealable) {
+            sealable.push(card);
+          }
+        }
+      });
+      updateState({cards, connected, sealable});
     };
     const setChannels = ({channels, cardId}: {channels: Channel[]; cardId: string | null}) => {
       cardChannels.current.set(cardId, channels);
@@ -194,6 +217,9 @@ export function useContent() {
     setFilter: (filter: string) => {
       updateState({filter});
     },
+    setTopic: (topic: string) => {
+      updateState({topic});
+    },
     getFocus: (cardId: string | null, channelId: string) => {
       return app.state.session.setFocus(cardId, channelId);
     },

app/sdk/src/contact.ts

@@ -883,6 +883,7 @@ export class ContactModule implements Contact {
       cardId,
       offsync: Boolean(item.offsyncProfile || item.offsyncChannel || item.offsyncArticle),
       blocked: this.isCardBlocked(cardId),
+      sealable: Boolean(item.profile.seal),
       status: detail.status,
       statusUpdated: detail.statusUpdated,
       guid: profile.guid,

app/sdk/src/types.ts

@@ -2,6 +2,7 @@ export type Card = {
   cardId: string;
   offsync: boolean;
   blocked: boolean;
+  sealable: boolean;
   status: string;
   statusUpdated: number;
   guid: string;