Mobile drafts

app/actions/app/global.ts

@@ -40,6 +40,10 @@ export const storeSkinEmojiSelectorTutorial = async (prepareRecordsOnly = false)
     return storeGlobal(Tutorial.EMOJI_SKIN_SELECTOR, 'true', prepareRecordsOnly);
 };
 
+export const storeDraftsTutorial = async () => {
+    return storeGlobal(Tutorial.DRAFTS, 'true', false);
+};
+
 export const storeDontAskForReview = async (prepareRecordsOnly = false) => {
     return storeGlobal(GLOBAL_IDENTIFIERS.DONT_ASK_FOR_REVIEW, 'true', prepareRecordsOnly);
 };

app/actions/local/draft.ts

@@ -1,10 +1,24 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
+import {DeviceEventEmitter, Image} from 'react-native';
+
+import {Navigation, Screens} from '@constants';
 import DatabaseManager from '@database/manager';
 import {getDraft} from '@queries/servers/drafts';
+import {goToScreen} from '@screens/navigation';
+import {isTablet, isValidUrl} from '@utils/helpers';
 import {logError} from '@utils/log';
 
+export const switchToGlobalDrafts = async () => {
+    const isTablelDevice = isTablet();
+    if (isTablelDevice) {
+        DeviceEventEmitter.emit(Navigation.NAVIGATION_HOME, Screens.GLOBAL_DRAFTS);
+    } else {
+        goToScreen(Screens.GLOBAL_DRAFTS, '', {}, {topBar: {visible: false}});
+    }
+};
+
 export async function updateDraftFile(serverUrl: string, channelId: string, rootId: string, file: FileInfo, prepareRecordsOnly = false) {
     try {
         const {database, operator} = DatabaseManager.getServerDatabaseAndOperator(serverUrl);
@@ -197,3 +211,93 @@ export async function updateDraftPriority(serverUrl: string, channelId: string,
         return {error};
     }
 }
+
+export async function updateDraftMarkdownImageMetadata({
+    serverUrl,
+    channelId,
+    rootId,
+    imageMetadata,
+    prepareRecordsOnly = false,
+}: {
+    serverUrl: string;
+    channelId: string;
+    rootId: string;
+    imageMetadata: Dictionary<PostImage | undefined>;
+    prepareRecordsOnly?: boolean;
+}) {
+    try {
+        const {database, operator} = DatabaseManager.getServerDatabaseAndOperator(serverUrl);
+        const draft = await getDraft(database, channelId, rootId);
+        if (draft) {
+            draft.prepareUpdate((d) => {
+                d.metadata = {
+                    ...d.metadata,
+                    images: imageMetadata,
+                };
+                d.updateAt = Date.now();
+            });
+            if (!prepareRecordsOnly) {
+                await operator.batchRecords([draft], 'updateDraftImageMetadata');
+            }
+        }
+        return {draft};
+    } catch (error) {
+        logError('Failed updateDraftImages', error);
+        return {error};
+    }
+}
+
+async function getImageMetadata(url: string) {
+    let height = 0;
+    let width = 0;
+    let format;
+    try {
+        await new Promise((resolve, reject) => {
+            Image.getSize(
+                url,
+                (imageWidth, imageHeight) => {
+                    width = imageWidth;
+                    height = imageHeight;
+                    resolve(null);
+                },
+                (error) => {
+                    logError('Failed to get image size', error);
+                    reject(error);
+                },
+            );
+        });
+    } catch (error) {
+        width = 0;
+        height = 0;
+    }
+    const match = url.match(/\.(\w+)(?=\?|$)/);
+    if (match) {
+        format = match[1];
+    }
+    return {
+        height,
+        width,
+        format,
+        frame_count: 1,
+    };
+}
+
+export async function parseMarkdownImages(markdown: string, imageMetadata: Dictionary<PostImage | undefined>) {
+    // Regex break down
+    // ([a-zA-Z][a-zA-Z\d+\-.]*):\/\/ - Matches any valid scheme (protocol), such as http, https, ftp, mailto, file, etc.
+    // [^\s()<>]+ - Matches the main part of the URL, excluding spaces, parentheses, and angle brackets.
+    // (?:\([^\s()<>]+\))* - Allows balanced parentheses inside the URL path or query parameters.
+    // !\[.*?\]\((...)\) - Matches an image markdown syntax ![alt text](image url)
+    const imageRegex = /!\[.*?\]\((([a-zA-Z][a-zA-Z\d+\-.]*):\/\/[^\s()<>]+(?:\([^\s()<>]+\))*)\)/g;
+    const matches = Array.from(markdown.matchAll(imageRegex));
+
+    const promises = matches.map(async (match) => {
+        const imageUrl = match[1];
+        if (isValidUrl(imageUrl)) {
+            const metadata = await getImageMetadata(imageUrl);
+            imageMetadata[imageUrl] = metadata;
+        }
+    });
+
+    await Promise.all(promises);
+}

app/components/channel_item/__snapshots__/channel_item.test.tsx.snap

@@ -92,7 +92,11 @@ exports[`components/channel_list/categories/body/channel_item should match snaps
               "lineHeight": 24,
             },
             {
-              "color": "rgba(255,255,255,0.72)",
+              "color": "#ffffff",
+              "fontFamily": "OpenSans",
+              "fontSize": 16,
+              "fontWeight": "400",
+              "lineHeight": 24,
             },
             false,
             null,
@@ -213,7 +217,11 @@ exports[`components/channel_list/categories/body/channel_item should match snaps
               "lineHeight": 24,
             },
             {
-              "color": "rgba(255,255,255,0.72)",
+              "color": "#ffffff",
+              "fontFamily": "OpenSans",
+              "fontSize": 16,
+              "fontWeight": "400",
+              "lineHeight": 24,
             },
             false,
             null,
@@ -251,7 +259,11 @@ exports[`components/channel_list/categories/body/channel_item should match snaps
               "lineHeight": 24,
             },
             {
-              "color": "rgba(255,255,255,0.72)",
+              "color": "#ffffff",
+              "fontFamily": "OpenSans",
+              "fontSize": 16,
+              "fontWeight": "400",
+              "lineHeight": 24,
             },
             false,
             null,
@@ -361,7 +373,11 @@ exports[`components/channel_list/categories/body/channel_item should match snaps
               "lineHeight": 24,
             },
             {
-              "color": "rgba(255,255,255,0.72)",
+              "color": "#ffffff",
+              "fontFamily": "OpenSans",
+              "fontSize": 16,
+              "fontWeight": "400",
+              "lineHeight": 24,
             },
             false,
             null,

app/components/channel_item/channel_item.tsx

@@ -51,7 +51,8 @@ export const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => ({
         marginRight: 12,
     },
     text: {
-        color: changeOpacity(theme.sidebarText, 0.72),
+        color: theme.sidebarText,
+        ...typography('Body', 200),
     },
     highlight: {
         color: theme.sidebarUnreadText,

app/components/draft/draft.tsx

@@ -0,0 +1,124 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import React, {useCallback} from 'react';
+import {useIntl} from 'react-intl';
+import {Keyboard, TouchableHighlight, View} from 'react-native';
+
+import {switchToThread} from '@actions/local/thread';
+import {switchToChannelById} from '@actions/remote/channel';
+import DraftPost from '@components/draft/draft_post';
+import DraftPostHeader from '@components/draft_post_header';
+import Header from '@components/post_draft/draft_input/header';
+import {Screens} from '@constants';
+import {useServerUrl} from '@context/server';
+import {useTheme} from '@context/theme';
+import {useIsTablet} from '@hooks/device';
+import {DRAFT_OPTIONS_BUTTON} from '@screens/draft_options';
+import {openAsBottomSheet} from '@screens/navigation';
+import {changeOpacity, makeStyleSheetFromTheme} from '@utils/theme';
+
+import type ChannelModel from '@typings/database/models/servers/channel';
+import type DraftModel from '@typings/database/models/servers/draft';
+import type UserModel from '@typings/database/models/servers/user';
+
+type Props = {
+    channel: ChannelModel;
+    location: string;
+    draftReceiverUser?: UserModel;
+    draft: DraftModel;
+    layoutWidth: number;
+    isPostPriorityEnabled: boolean;
+}
+
+const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => {
+    return {
+        container: {
+            paddingHorizontal: 20,
+            paddingVertical: 16,
+            width: '100%',
+            borderTopColor: changeOpacity(theme.centerChannelColor, 0.16),
+            borderTopWidth: 1,
+        },
+        pressInContainer: {
+            backgroundColor: changeOpacity(theme.centerChannelColor, 0.16),
+        },
+        postPriority: {
+            marginTop: 10,
+            marginLeft: -12,
+        },
+    };
+});
+
+const Draft: React.FC<Props> = ({
+    channel,
+    location,
+    draft,
+    draftReceiverUser,
+    layoutWidth,
+    isPostPriorityEnabled,
+}) => {
+    const intl = useIntl();
+    const theme = useTheme();
+    const style = getStyleSheet(theme);
+    const isTablet = useIsTablet();
+    const serverUrl = useServerUrl();
+    const showPostPriority = Boolean(isPostPriorityEnabled && draft.metadata?.priority && draft.metadata?.priority?.priority);
+
+    const onLongPress = useCallback(() => {
+        Keyboard.dismiss();
+        const title = isTablet ? intl.formatMessage({id: 'draft.options.title', defaultMessage: 'Draft Options'}) : 'Draft Options';
+        openAsBottomSheet({
+            closeButtonId: DRAFT_OPTIONS_BUTTON,
+            screen: Screens.DRAFT_OPTIONS,
+            theme,
+            title,
+            props: {channel, rootId: draft.rootId, draft, draftReceiverUserName: draftReceiverUser?.username},
+        });
+    }, [channel, draft, draftReceiverUser?.username, intl, isTablet, theme]);
+
+    const onPress = useCallback(() => {
+        if (draft.rootId) {
+            switchToThread(serverUrl, draft.rootId, false);
+            return;
+        }
+        switchToChannelById(serverUrl, channel.id, channel.teamId, false);
+    }, [channel.id, channel.teamId, draft.rootId, serverUrl]);
+
+    return (
+        <TouchableHighlight
+            onLongPress={onLongPress}
+            onPress={onPress}
+            underlayColor={changeOpacity(theme.centerChannelColor, 0.1)}
+            testID='draft_post'
+        >
+            <View
+                style={style.container}
+            >
+                <DraftPostHeader
+                    channel={channel}
+                    draftReceiverUser={draftReceiverUser}
+                    rootId={draft.rootId}
+                    testID='draft_post.channel_info'
+                    updateAt={draft.updateAt}
+                />
+                {showPostPriority && draft.metadata?.priority &&
+                <View style={style.postPriority}>
+                    <Header
+                        noMentionsError={false}
+                        postPriority={draft.metadata?.priority}
+                    />
+                </View>
+                }
+                <DraftPost
+                    draft={draft}
+                    location={location}
+                    layoutWidth={layoutWidth}
+                />
+            </View>
+
+        </TouchableHighlight>
+    );
+};
+
+export default Draft;

app/components/draft/draft_post/draft_files/index.ts

@@ -0,0 +1,18 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import {withDatabase, withObservables} from '@nozbe/watermelondb/react';
+
+import Files from '@components/files/files';
+import {observeCanDownloadFiles, observeConfigBooleanValue} from '@queries/servers/system';
+
+import type {WithDatabaseArgs} from '@typings/database/database';
+
+const enhance = withObservables([], ({database}: WithDatabaseArgs) => {
+    return {
+        canDownloadFiles: observeCanDownloadFiles(database),
+        publicLinkEnabled: observeConfigBooleanValue(database, 'EnablePublicLink'),
+    };
+});
+
+export default withDatabase(enhance(Files));