Android 2.9.4

.eslintignore

@@ -981,6 +981,9 @@ packages/app-mobile/components/screens/UpgradeSyncTargetScreen.js.map
 packages/app-mobile/components/screens/encryption-config.d.ts
 packages/app-mobile/components/screens/encryption-config.js
 packages/app-mobile/components/screens/encryption-config.js.map
+packages/app-mobile/components/side-menu-content.d.ts
+packages/app-mobile/components/side-menu-content.js
+packages/app-mobile/components/side-menu-content.js.map
 packages/app-mobile/gulpfile.d.ts
 packages/app-mobile/gulpfile.js
 packages/app-mobile/gulpfile.js.map
@@ -1023,6 +1026,9 @@ packages/app-mobile/utils/setupNotifications.js.map
 packages/app-mobile/utils/shareHandler.d.ts
 packages/app-mobile/utils/shareHandler.js
 packages/app-mobile/utils/shareHandler.js.map
+packages/app-mobile/utils/types.d.ts
+packages/app-mobile/utils/types.js
+packages/app-mobile/utils/types.js.map
 packages/fork-htmlparser2/src/CollectingHandler.d.ts
 packages/fork-htmlparser2/src/CollectingHandler.js
 packages/fork-htmlparser2/src/CollectingHandler.js.map

.github/workflows/github-actions-main.yml

@@ -75,6 +75,8 @@ jobs:
           GH_TOKEN: ${{ secrets.GH_TOKEN }}
           IS_CONTINUOUS_INTEGRATION: 1
           BUILD_SEQUENCIAL: 1
+          SERVER_REPOSITORY: joplin/server
+          SERVER_TAG_PREFIX: server
         run: |
           "${GITHUB_WORKSPACE}/.github/scripts/run_ci.sh"
 

.gitignore

@@ -969,6 +969,9 @@ packages/app-mobile/components/screens/UpgradeSyncTargetScreen.js.map
 packages/app-mobile/components/screens/encryption-config.d.ts
 packages/app-mobile/components/screens/encryption-config.js
 packages/app-mobile/components/screens/encryption-config.js.map
+packages/app-mobile/components/side-menu-content.d.ts
+packages/app-mobile/components/side-menu-content.js
+packages/app-mobile/components/side-menu-content.js.map
 packages/app-mobile/gulpfile.d.ts
 packages/app-mobile/gulpfile.js
 packages/app-mobile/gulpfile.js.map
@@ -1011,6 +1014,9 @@ packages/app-mobile/utils/setupNotifications.js.map
 packages/app-mobile/utils/shareHandler.d.ts
 packages/app-mobile/utils/shareHandler.js
 packages/app-mobile/utils/shareHandler.js.map
+packages/app-mobile/utils/types.d.ts
+packages/app-mobile/utils/types.js
+packages/app-mobile/utils/types.js.map
 packages/fork-htmlparser2/src/CollectingHandler.d.ts
 packages/fork-htmlparser2/src/CollectingHandler.js
 packages/fork-htmlparser2/src/CollectingHandler.js.map

packages/app-desktop/gui/Sidebar/Sidebar.tsx

@@ -86,10 +86,10 @@ const renderFolderIcon = (folderIcon: FolderIcon) => {
 			name: 'far fa-folder',
 			type: FolderIconType.FontAwesome,
 		};
-		return <div style={{ marginRight: 5, display: 'flex' }}><FolderIconBox opacity={0.7} folderIcon={defaultFolderIcon}/></div>;
+		return <div style={{ marginRight: 7, display: 'flex' }}><FolderIconBox opacity={0.7} folderIcon={defaultFolderIcon}/></div>;
 	}
 
-	return <div style={{ marginRight: 5, display: 'flex' }}><FolderIconBox folderIcon={folderIcon}/></div>;
+	return <div style={{ marginRight: 7, display: 'flex' }}><FolderIconBox folderIcon={folderIcon}/></div>;
 };
 
 function FolderItem(props: any) {
@@ -152,7 +152,7 @@ const SidebarComponent = (props: Props) => {
 	// visual alignment is correct for all folders, otherwise the folder tree
 	// looks messy.
 	const showFolderIcons = useMemo(() => {
-		return !!props.folders.find((f: FolderEntity) => !!f.icon);
+		return Folder.shouldShowFolderIcons(props.folders);
 	}, [props.folders]);
 
 	const getSelectedItem = useCallback(() => {

packages/app-mobile/android/app/build.gradle

@@ -146,8 +146,8 @@ android {
         applicationId "net.cozic.joplin"
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
-		versionCode 2097671
-		versionName "2.9.3"
+		versionCode 2097672
+		versionName "2.9.4"
 		ndk {
 			abiFilters "armeabi-v7a", "x86", "arm64-v8a", "x86_64"
 		}

packages/app-mobile/components/NoteEditor/CodeMirror/CodeMirror.ts

@@ -21,7 +21,7 @@ import { GFM as GitHubFlavoredMarkdownExtension } from '@lezer/markdown';
 import { indentOnInput, indentUnit, syntaxTree } from '@codemirror/language';
 import {
 	openSearchPanel, closeSearchPanel, SearchQuery, setSearchQuery, getSearchQuery,
-	highlightSelectionMatches, search, findNext, findPrevious, replaceAll, replaceNext,
+	/* highlightSelectionMatches, */ search, findNext, findPrevious, replaceAll, replaceNext,
 } from '@codemirror/search';
 
 import {
@@ -291,7 +291,7 @@ export function initCodeMirror(
 				}),
 				drawSelection(),
 				highlightSpecialChars(),
-				highlightSelectionMatches(),
+				// highlightSelectionMatches(),
 				indentOnInput(),
 
 				// By default, indent with four spaces

packages/app-mobile/components/side-menu-content.js

@@ -1,440 +0,0 @@
-const React = require('react');
-const Component = React.Component;
-const { Easing, Animated, TouchableOpacity, Text, StyleSheet, ScrollView, View, Alert, Image } = require('react-native');
-const { connect } = require('react-redux');
-const Icon = require('react-native-vector-icons/Ionicons').default;
-const Folder = require('@joplin/lib/models/Folder').default;
-const Synchronizer = require('@joplin/lib/Synchronizer').default;
-const NavService = require('@joplin/lib/services/NavService').default;
-const { _ } = require('@joplin/lib/locale');
-const { themeStyle } = require('./global-style.js');
-const shared = require('@joplin/lib/components/shared/side-menu-shared.js');
-
-Icon.loadFont();
-
-class SideMenuContentComponent extends Component {
-	constructor() {
-		super();
-		this.state = {
-			syncReportText: '',
-		};
-		this.styles_ = {};
-
-		this.tagButton_press = this.tagButton_press.bind(this);
-		this.newFolderButton_press = this.newFolderButton_press.bind(this);
-		this.synchronize_press = this.synchronize_press.bind(this);
-		this.configButton_press = this.configButton_press.bind(this);
-		this.allNotesButton_press = this.allNotesButton_press.bind(this);
-		this.renderFolderItem = this.renderFolderItem.bind(this);
-
-		this.syncIconRotationValue = new Animated.Value(0);
-		this.syncIconRotation = this.syncIconRotationValue.interpolate({
-			inputRange: [0, 1],
-			outputRange: ['0deg', '360deg'],
-		});
-	}
-
-	styles() {
-		const theme = themeStyle(this.props.themeId);
-
-		if (this.styles_[this.props.themeId]) return this.styles_[this.props.themeId];
-		this.styles_ = {};
-
-		const styles = {
-			menu: {
-				flex: 1,
-				backgroundColor: theme.backgroundColor,
-			},
-			button: {
-				flex: 1,
-				flexDirection: 'row',
-				height: 36,
-				alignItems: 'center',
-				paddingLeft: theme.marginLeft,
-				paddingRight: theme.marginRight,
-			},
-			buttonText: {
-				flex: 1,
-				color: theme.color,
-				paddingLeft: 10,
-				fontSize: theme.fontSize,
-			},
-			syncStatus: {
-				paddingLeft: theme.marginLeft,
-				paddingRight: theme.marginRight,
-				color: theme.colorFaded,
-				fontSize: theme.fontSizeSmaller,
-				flex: 0,
-			},
-			sidebarIcon: {
-				fontSize: 22,
-				color: theme.color,
-			},
-		};
-
-		styles.folderButton = Object.assign({}, styles.button);
-		styles.folderButton.paddingLeft = 0;
-		styles.folderButtonText = Object.assign({}, styles.buttonText, { paddingLeft: 0 });
-		styles.folderButtonSelected = Object.assign({}, styles.folderButton);
-		styles.folderButtonSelected.backgroundColor = theme.selectedColor;
-		styles.folderIcon = Object.assign({}, theme.icon);
-		styles.folderIcon.color = theme.colorFaded; // '#0072d5';
-		styles.folderIcon.paddingTop = 3;
-
-		styles.sideButton = Object.assign({}, styles.button, { flex: 0 });
-		styles.sideButtonSelected = Object.assign({}, styles.sideButton, { backgroundColor: theme.selectedColor });
-		styles.sideButtonText = Object.assign({}, styles.buttonText);
-
-		this.styles_[this.props.themeId] = StyleSheet.create(styles);
-		return this.styles_[this.props.themeId];
-	}
-
-	componentDidUpdate(prevProps) {
-		if (this.props.syncStarted !== prevProps.syncStarted) {
-			if (this.props.syncStarted) {
-				this.syncIconAnimation = Animated.loop(
-					Animated.timing(this.syncIconRotationValue, {
-						toValue: 1,
-						duration: 3000,
-						easing: Easing.linear,
-					})
-				);
-
-				this.syncIconAnimation.start();
-			} else {
-				if (this.syncIconAnimation) this.syncIconAnimation.stop();
-				this.syncIconAnimation = null;
-			}
-		}
-	}
-
-	folder_press(folder) {
-		this.props.dispatch({ type: 'SIDE_MENU_CLOSE' });
-
-		this.props.dispatch({
-			type: 'NAV_GO',
-			routeName: 'Notes',
-			folderId: folder.id,
-		});
-	}
-
-	async folder_longPress(folder) {
-		if (folder === 'all') return;
-
-		Alert.alert(
-			'',
-			_('Notebook: %s', folder.title),
-			[
-				{
-					text: _('Rename'),
-					onPress: () => {
-						if (folder.encryption_applied) {
-							alert(_('Encrypted notebooks cannot be renamed'));
-							return;
-						}
-
-						this.props.dispatch({ type: 'SIDE_MENU_CLOSE' });
-
-						this.props.dispatch({
-							type: 'NAV_GO',
-							routeName: 'Folder',
-							folderId: folder.id,
-						});
-					},
-				},
-				{
-					text: _('Delete'),
-					onPress: () => {
-						Alert.alert('', _('Delete notebook "%s"?\n\nAll notes and sub-notebooks within this notebook will also be deleted.', folder.title), [
-							{
-								text: _('OK'),
-								onPress: () => {
-									Folder.delete(folder.id);
-								},
-							},
-							{
-								text: _('Cancel'),
-								onPress: () => {},
-								style: 'cancel',
-							},
-						]);
-					},
-					style: 'destructive',
-				},
-				{
-					text: _('Cancel'),
-					onPress: () => {},
-					style: 'cancel',
-				},
-			],
-			{
-				cancelable: false,
-			}
-		);
-	}
-
-	folder_togglePress(folder) {
-		this.props.dispatch({
-			type: 'FOLDER_TOGGLE',
-			id: folder.id,
-		});
-	}
-
-	tagButton_press() {
-		this.props.dispatch({ type: 'SIDE_MENU_CLOSE' });
-
-		this.props.dispatch({
-			type: 'NAV_GO',
-			routeName: 'Tags',
-		});
-	}
-
-	configButton_press() {
-		this.props.dispatch({ type: 'SIDE_MENU_CLOSE' });
-		NavService.go('Config');
-	}
-
-	allNotesButton_press() {
-		this.props.dispatch({ type: 'SIDE_MENU_CLOSE' });
-
-		this.props.dispatch({
-			type: 'NAV_GO',
-			routeName: 'Notes',
-			smartFilterId: 'c3176726992c11e9ac940492261af972',
-		});
-	}
-
-	newFolderButton_press() {
-		this.props.dispatch({ type: 'SIDE_MENU_CLOSE' });
-
-		this.props.dispatch({
-			type: 'NAV_GO',
-			routeName: 'Folder',
-			folderId: null,
-		});
-	}
-
-	async synchronize_press() {
-		const actionDone = await shared.synchronize_press(this);
-		if (actionDone === 'auth') this.props.dispatch({ type: 'SIDE_MENU_CLOSE' });
-	}
-
-	renderFolderIcon(theme, folderIcon) {
-		if (!folderIcon) return null;
-
-		if (folderIcon.type === 1) { // FolderIconType.Emoji
-			return <Text style={{ fontSize: theme.fontSize, marginRight: 4 }}>{folderIcon.emoji}</Text>;
-		} else if (folderIcon.type === 2) { // FolderIconType.DataUrl
-			return <Image style={{ width: 20, height: 20, marginRight: 4, resizeMode: 'contain' }} source={{ uri: folderIcon.dataUrl }}/>;
-		} else {
-			throw new Error(`Unsupported folder icon type: ${folderIcon.type}`);
-		}
-	}
-
-	renderFolderItem(folder, selected, hasChildren, depth) {
-		const theme = themeStyle(this.props.themeId);
-
-		const folderButtonStyle = {
-			flex: 1,
-			flexDirection: 'row',
-			height: 36,
-			alignItems: 'center',
-			paddingRight: theme.marginRight,
-			paddingLeft: 10,
-		};
-		if (selected) folderButtonStyle.backgroundColor = theme.selectedColor;
-		folderButtonStyle.paddingLeft = depth * 10 + theme.marginLeft;
-
-		const iconWrapperStyle = { paddingLeft: 10, paddingRight: 10 };
-		if (selected) iconWrapperStyle.backgroundColor = theme.selectedColor;
-
-		let iconWrapper = null;
-
-		const collapsed = this.props.collapsedFolderIds.indexOf(folder.id) >= 0;
-		const iconName = collapsed ? 'chevron-down' : 'chevron-up';
-		const iconComp = <Icon name={iconName} style={this.styles().folderIcon} />;
-
-		iconWrapper = !hasChildren ? null : (
-			<TouchableOpacity
-				style={iconWrapperStyle}
-				folderid={folder.id}
-				onPress={() => {
-					if (hasChildren) this.folder_togglePress(folder);
-				}}
-
-				accessibilityLabel={collapsed ? _('Expand folder') : _('Collapse folder')}
-				accessibilityRole="togglebutton"
-			>
-				{iconComp}
-			</TouchableOpacity>
-		);
-
-		const folderIcon = Folder.unserializeIcon(folder.icon);
-
-		return (
-			<View key={folder.id} style={{ flex: 1, flexDirection: 'row' }}>
-				<TouchableOpacity
-					style={{ flex: 1 }}
-					onPress={() => {
-						this.folder_press(folder);
-					}}
-					onLongPress={() => {
-						this.folder_longPress(folder);
-					}}
-				>
-					<View style={folderButtonStyle}>
-						{this.renderFolderIcon(theme, folderIcon)}
-						<Text numberOfLines={1} style={this.styles().folderButtonText}>
-							{Folder.displayTitle(folder)}
-						</Text>
-					</View>
-				</TouchableOpacity>
-				{iconWrapper}
-			</View>
-		);
-	}
-
-	renderSidebarButton(key, title, iconName, onPressHandler = null, selected = false) {
-		let icon = <Icon name={iconName} style={this.styles().sidebarIcon} />;
-
-		if (key === 'synchronize_button') {
-			icon = <Animated.View style={{ transform: [{ rotate: this.syncIconRotation }] }}>{icon}</Animated.View>;
-		}
-
-		const content = (
-			<View key={key} style={selected ? this.styles().sideButtonSelected : this.styles().sideButton}>
-				{icon}
-				<Text style={this.styles().sideButtonText}>{title}</Text>
-			</View>
-		);
-
-		if (!onPressHandler) return content;
-
-		return (
-			<TouchableOpacity key={key} onPress={onPressHandler}>
-				{content}
-			</TouchableOpacity>
-		);
-	}
-
-	makeDivider(key) {
-		const theme = themeStyle(this.props.themeId);
-		return <View style={{ marginTop: 15, marginBottom: 15, flex: -1, borderBottomWidth: 1, borderBottomColor: theme.dividerColor }} key={key}></View>;
-	}
-
-	renderBottomPanel() {
-		const theme = themeStyle(this.props.themeId);
-
-		const items = [];
-
-		items.push(this.makeDivider('divider_1'));
-
-		items.push(this.renderSidebarButton('newFolder_button', _('New Notebook'), 'md-folder-open', this.newFolderButton_press));
-
-		items.push(this.renderSidebarButton('tag_button', _('Tags'), 'md-pricetag', this.tagButton_press));
-
-		items.push(this.renderSidebarButton('config_button', _('Configuration'), 'md-settings', this.configButton_press));
-
-		items.push(this.makeDivider('divider_2'));
-
-		const lines = Synchronizer.reportToLines(this.props.syncReport);
-		const syncReportText = lines.join('\n');
-
-		let decryptionReportText = '';
-		if (this.props.decryptionWorker && this.props.decryptionWorker.state !== 'idle' && this.props.decryptionWorker.itemCount) {
-			decryptionReportText = _('Decrypting items: %d/%d', this.props.decryptionWorker.itemIndex + 1, this.props.decryptionWorker.itemCount);
-		}
-
-		let resourceFetcherText = '';
-		if (this.props.resourceFetcher && this.props.resourceFetcher.toFetchCount) {
-			resourceFetcherText = _('Fetching resources: %d/%d', this.props.resourceFetcher.fetchingCount, this.props.resourceFetcher.toFetchCount);
-		}
-
-		const fullReport = [];
-		if (syncReportText) fullReport.push(syncReportText);
-		if (resourceFetcherText) fullReport.push(resourceFetcherText);
-		if (decryptionReportText) fullReport.push(decryptionReportText);
-
-		items.push(this.renderSidebarButton('synchronize_button', !this.props.syncStarted ? _('Synchronise') : _('Cancel'), 'md-sync', this.synchronize_press));
-
-		if (fullReport.length) {
-			items.push(
-				<Text key="sync_report" style={this.styles().syncStatus}>
-					{fullReport.join('\n')}
-				</Text>
-			);
-		}
-
-		if (this.props.syncOnlyOverWifi && this.props.isOnMobileData) {
-			items.push(
-				<Text key="net_info" style={this.styles().syncStatus}>
-					{ _('Mobile data - auto-sync disabled') }
-				</Text>
-			);
-		}
-
-		return <View style={{ flex: 0, flexDirection: 'column', paddingBottom: theme.marginBottom }}>{items}</View>;
-	}
-
-	render() {
-		let items = [];
-
-		const theme = themeStyle(this.props.themeId);
-
-		// HACK: inner height of ScrollView doesn't appear to be calculated correctly when
-		// using padding. So instead creating blank elements for padding bottom and top.
-		items.push(<View style={{ height: theme.marginTop }} key="bottom_top_hack" />);
-
-		items.push(this.renderSidebarButton('all_notes', _('All notes'), 'md-document', this.allNotesButton_press, this.props.notesParentType === 'SmartFilter'));
-
-		items.push(this.makeDivider('divider_all'));
-
-		items.push(this.renderSidebarButton('folder_header', _('Notebooks'), 'md-folder'));
-
-		if (this.props.folders.length) {
-			const result = shared.renderFolders(this.props, this.renderFolderItem, false);
-			const folderItems = result.items;
-			items = items.concat(folderItems);
-		}
-
-		const style = {
-			flex: 1,
-			borderRightWidth: 1,
-			borderRightColor: theme.dividerColor,
-			backgroundColor: theme.backgroundColor,
-		};
-
-		return (
-			<View style={style}>
-				<View style={{ flex: 1, opacity: this.props.opacity }}>
-					<ScrollView scrollsToTop={false} style={this.styles().menu}>
-						{items}
-					</ScrollView>
-					{this.renderBottomPanel()}
-				</View>
-			</View>
-		);
-	}
-}
-
-const SideMenuContent = connect(state => {
-	return {
-		folders: state.folders,
-		syncStarted: state.syncStarted,
-		syncReport: state.syncReport,
-		selectedFolderId: state.selectedFolderId,
-		selectedTagId: state.selectedTagId,
-		notesParentType: state.notesParentType,
-		locale: state.settings.locale,
-		themeId: state.settings.theme,
-		// Don't do the opacity animation as it means re-rendering the list multiple times
-		// opacity: state.sideMenuOpenPercent,
-		collapsedFolderIds: state.collapsedFolderIds,
-		decryptionWorker: state.decryptionWorker,
-		resourceFetcher: state.resourceFetcher,
-		isOnMobileData: state.isOnMobileData,
-		syncOnlyOverWifi: state.settings['sync.mobileWifiOnly'],
-	};
-})(SideMenuContentComponent);
-
-module.exports = { SideMenuContent };

packages/app-mobile/components/side-menu-content.tsx

@@ -0,0 +1,500 @@
+const React = require('react');
+import { useMemo, useEffect, useCallback } from 'react';
+const { Easing, Animated, TouchableOpacity, Text, StyleSheet, ScrollView, View, Alert, Image } = require('react-native');
+const { connect } = require('react-redux');
+const Icon = require('react-native-vector-icons/Ionicons').default;
+import Folder from '@joplin/lib/models/Folder';
+import Synchronizer from '@joplin/lib/Synchronizer';
+import NavService from '@joplin/lib/services/NavService';
+import { _ } from '@joplin/lib/locale';
+const { themeStyle } = require('./global-style.js');
+const shared = require('@joplin/lib/components/shared/side-menu-shared.js');
+import { FolderEntity, FolderIcon } from '@joplin/lib/services/database/types';
+import { AppState } from '../utils/types';
+import Setting from '@joplin/lib/models/Setting';
+import { reg } from '@joplin/lib/registry';
+
+Icon.loadFont();
+
+interface Props {
+	syncStarted: boolean;
+	themeId: number;
+	dispatch: Function;
+	collapsedFolderIds: string[];
+	syncReport: any;
+	decryptionWorker: any;
+	resourceFetcher: any;
+	syncOnlyOverWifi: boolean;
+	isOnMobileData: boolean;
+	notesParentType: string;
+	folders: FolderEntity[];
+	opacity: number;
+}
+
+const syncIconRotationValue = new Animated.Value(0);
+
+const syncIconRotation = syncIconRotationValue.interpolate({
+	inputRange: [0, 1],
+	outputRange: ['0deg', '360deg'],
+});
+
+let syncIconAnimation: any;
+
+const SideMenuContentComponent = (props: Props) => {
+	const alwaysShowFolderIcons = useMemo(() => Folder.shouldShowFolderIcons(props.folders), [props.folders]);
+
+	const styles_ = useMemo(() => {
+		const theme = themeStyle(props.themeId);
+
+		const styles: any = {
+			menu: {
+				flex: 1,
+				backgroundColor: theme.backgroundColor,
+			},
+			button: {
+				flex: 1,
+				flexDirection: 'row',
+				height: 36,
+				alignItems: 'center',
+				paddingLeft: theme.marginLeft,
+				paddingRight: theme.marginRight,
+			},
+			buttonText: {
+				flex: 1,
+				color: theme.color,
+				paddingLeft: 10,
+				fontSize: theme.fontSize,
+			},
+			syncStatus: {
+				paddingLeft: theme.marginLeft,
+				paddingRight: theme.marginRight,
+				color: theme.colorFaded,
+				fontSize: theme.fontSizeSmaller,
+				flex: 0,
+			},
+			sidebarIcon: {
+				fontSize: 22,
+				color: theme.color,
+			},
+		};
+
+		styles.folderButton = Object.assign({}, styles.button);
+		styles.folderButton.paddingLeft = 0;
+		styles.folderButtonText = Object.assign({}, styles.buttonText, { paddingLeft: 0 });
+		styles.folderButtonSelected = Object.assign({}, styles.folderButton);
+		styles.folderButtonSelected.backgroundColor = theme.selectedColor;
+		styles.folderIcon = Object.assign({}, theme.icon);
+		styles.folderIcon.color = theme.colorFaded; // '#0072d5';
+		styles.folderIcon.paddingTop = 3;
+
+		styles.sideButton = Object.assign({}, styles.button, { flex: 0 });
+		styles.sideButtonSelected = Object.assign({}, styles.sideButton, { backgroundColor: theme.selectedColor });
+		styles.sideButtonText = Object.assign({}, styles.buttonText);
+
+		styles.emptyFolderIcon = { ...styles.sidebarIcon, marginRight: 10 };
+
+		return StyleSheet.create(styles);
+	}, [props.themeId]);
+
+	useEffect(() => {
+		if (props.syncStarted) {
+			syncIconAnimation = Animated.loop(
+				Animated.timing(syncIconRotationValue, {
+					toValue: 1,
+					duration: 3000,
+					easing: Easing.linear,
+				})
+			);
+
+			syncIconAnimation.start();
+		} else {
+			if (syncIconAnimation) syncIconAnimation.stop();
+			syncIconAnimation = null;
+		}
+	}, [props.syncStarted]);
+
+	const folder_press = (folder: FolderEntity) => {
+		props.dispatch({ type: 'SIDE_MENU_CLOSE' });
+
+		props.dispatch({
+			type: 'NAV_GO',
+			routeName: 'Notes',
+			folderId: folder.id,
+		});
+	};
+
+	const folder_longPress = async (folder: FolderEntity) => {
+		if (folder === 'all') return;
+
+		Alert.alert(
+			'',
+			_('Notebook: %s', folder.title),
+			[
+				{
+					text: _('Rename'),
+					onPress: () => {
+						if (folder.encryption_applied) {
+							alert(_('Encrypted notebooks cannot be renamed'));
+							return;
+						}
+
+						props.dispatch({ type: 'SIDE_MENU_CLOSE' });
+
+						props.dispatch({
+							type: 'NAV_GO',
+							routeName: 'Folder',
+							folderId: folder.id,
+						});
+					},
+				},
+				{
+					text: _('Delete'),
+					onPress: () => {
+						Alert.alert('', _('Delete notebook "%s"?\n\nAll notes and sub-notebooks within this notebook will also be deleted.', folder.title), [
+							{
+								text: _('OK'),
+								onPress: () => {
+									void Folder.delete(folder.id);
+								},
+							},
+							{
+								text: _('Cancel'),
+								onPress: () => {},
+								style: 'cancel',
+							},
+						]);
+					},
+					style: 'destructive',
+				},
+				{
+					text: _('Cancel'),
+					onPress: () => {},
+					style: 'cancel',
+				},
+			],
+			{
+				cancelable: false,
+			}
+		);
+	};
+
+	const folder_togglePress = (folder: FolderEntity) => {
+		props.dispatch({
+			type: 'FOLDER_TOGGLE',
+			id: folder.id,
+		});
+	};
+
+	const tagButton_press = () => {
+		props.dispatch({ type: 'SIDE_MENU_CLOSE' });
+
+		props.dispatch({
+			type: 'NAV_GO',
+			routeName: 'Tags',
+		});
+	};
+
+	const configButton_press = () => {
+		props.dispatch({ type: 'SIDE_MENU_CLOSE' });
+		void NavService.go('Config');
+	};
+
+	const allNotesButton_press = () => {
+		props.dispatch({ type: 'SIDE_MENU_CLOSE' });
+
+		props.dispatch({
+			type: 'NAV_GO',
+			routeName: 'Notes',
+			smartFilterId: 'c3176726992c11e9ac940492261af972',
+		});
+	};
+
+	const newFolderButton_press = () => {
+		props.dispatch({ type: 'SIDE_MENU_CLOSE' });
+
+		props.dispatch({
+			type: 'NAV_GO',
+			routeName: 'Folder',
+			folderId: null,
+		});
+	};
+
+	const performSync = useCallback(async () => {
+		const action = props.syncStarted ? 'cancel' : 'start';
+
+		if (!Setting.value('sync.target')) {
+			props.dispatch({
+				type: 'SIDE_MENU_CLOSE',
+			});
+
+			props.dispatch({
+				type: 'NAV_GO',
+				routeName: 'Config',
+				sectionName: 'sync',
+			});
+
+			return 'init';
+		}
+
+		if (!(await reg.syncTarget().isAuthenticated())) {
+			if (reg.syncTarget().authRouteName()) {
+				props.dispatch({
+					type: 'NAV_GO',
+					routeName: reg.syncTarget().authRouteName(),
+				});
+				return 'auth';
+			}
+
+			reg.logger().error('Not authenticated with sync target - please check your credentials.');
+			return 'error';
+		}
+
+		let sync = null;
+		try {
+			sync = await reg.syncTarget().synchronizer();
+		} catch (error) {
+			reg.logger().error('Could not initialise synchroniser: ');
+			reg.logger().error(error);
+			error.message = `Could not initialise synchroniser: ${error.message}`;
+			props.dispatch({
+				type: 'SYNC_REPORT_UPDATE',
+				report: { errors: [error] },
+			});
+			return 'error';
+		}
+
+		if (action === 'cancel') {
+			void sync.cancel();
+			return 'cancel';
+		} else {
+			void reg.scheduleSync(0);
+			return 'sync';
+		}
+	}, [props.syncStarted, props.dispatch]);
+
+	const synchronize_press = useCallback(async () => {
+		const actionDone = await performSync();
+		if (actionDone === 'auth') props.dispatch({ type: 'SIDE_MENU_CLOSE' });
+	}, [performSync, props.dispatch]);
+
+	const renderFolderIcon = (theme: any, folderIcon: FolderIcon) => {
+		if (!folderIcon) {
+			if (alwaysShowFolderIcons) {
+				return <Icon name="folder-outline" style={styles_.emptyFolderIcon} />;
+			} else {
+				return null;
+			}
+		}
+
+		if (folderIcon.type === 1) { // FolderIconType.Emoji
+			return <Text style={{ fontSize: theme.fontSize, marginRight: 4 }}>{folderIcon.emoji}</Text>;
+		} else if (folderIcon.type === 2) { // FolderIconType.DataUrl
+			return <Image style={{ width: 20, height: 20, marginRight: 4, resizeMode: 'contain' }} source={{ uri: folderIcon.dataUrl }}/>;
+		} else {
+			throw new Error(`Unsupported folder icon type: ${folderIcon.type}`);
+		}
+	};
+
+	const renderFolderItem = (folder: FolderEntity, selected: boolean, hasChildren: boolean, depth: number) => {
+		const theme = themeStyle(props.themeId);
+
+		const folderButtonStyle: any = {
+			flex: 1,
+			flexDirection: 'row',
+			height: 36,
+			alignItems: 'center',
+			paddingRight: theme.marginRight,
+			paddingLeft: 10,
+		};
+		if (selected) folderButtonStyle.backgroundColor = theme.selectedColor;
+		folderButtonStyle.paddingLeft = depth * 10 + theme.marginLeft;
+
+		const iconWrapperStyle: any = { paddingLeft: 10, paddingRight: 10 };
+		if (selected) iconWrapperStyle.backgroundColor = theme.selectedColor;
+
+		let iconWrapper = null;
+
+		const collapsed = props.collapsedFolderIds.indexOf(folder.id) >= 0;
+		const iconName = collapsed ? 'chevron-down' : 'chevron-up';
+		const iconComp = <Icon name={iconName} style={styles_.folderIcon} />;
+
+		iconWrapper = !hasChildren ? null : (
+			<TouchableOpacity
+				style={iconWrapperStyle}
+				folderid={folder.id}
+				onPress={() => {
+					if (hasChildren) folder_togglePress(folder);
+				}}
+
+				accessibilityLabel={collapsed ? _('Expand folder') : _('Collapse folder')}
+				accessibilityRole="togglebutton"
+			>
+				{iconComp}
+			</TouchableOpacity>
+		);
+
+		const folderIcon = Folder.unserializeIcon(folder.icon);
+
+		return (
+			<View key={folder.id} style={{ flex: 1, flexDirection: 'row' }}>
+				<TouchableOpacity
+					style={{ flex: 1 }}
+					onPress={() => {
+						folder_press(folder);
+					}}
+					onLongPress={() => {
+						void folder_longPress(folder);
+					}}
+				>
+					<View style={folderButtonStyle}>
+						{renderFolderIcon(theme, folderIcon)}
+						<Text numberOfLines={1} style={styles_.folderButtonText}>
+							{Folder.displayTitle(folder)}
+						</Text>
+					</View>
+				</TouchableOpacity>
+				{iconWrapper}
+			</View>
+		);
+	};
+
+	const renderSidebarButton = (key: string, title: string, iconName: string, onPressHandler: Function = null, selected = false) => {
+		let icon = <Icon name={iconName} style={styles_.sidebarIcon} />;
+
+		if (key === 'synchronize_button') {
+			icon = <Animated.View style={{ transform: [{ rotate: syncIconRotation }] }}>{icon}</Animated.View>;
+		}
+
+		const content = (
+			<View key={key} style={selected ? styles_.sideButtonSelected : styles_.sideButton}>
+				{icon}
+				<Text style={styles_.sideButtonText}>{title}</Text>
+			</View>
+		);
+
+		if (!onPressHandler) return content;
+
+		return (
+			<TouchableOpacity key={key} onPress={onPressHandler}>
+				{content}
+			</TouchableOpacity>
+		);
+	};
+
+	const makeDivider = (key: string) => {
+		const theme = themeStyle(props.themeId);
+		return <View style={{ marginTop: 15, marginBottom: 15, flex: -1, borderBottomWidth: 1, borderBottomColor: theme.dividerColor }} key={key}></View>;
+	};
+
+	const renderBottomPanel = () => {
+		const theme = themeStyle(props.themeId);
+
+		const items = [];
+
+		items.push(makeDivider('divider_1'));
+
+		items.push(renderSidebarButton('newFolder_button', _('New Notebook'), 'md-folder-open', newFolderButton_press));
+
+		items.push(renderSidebarButton('tag_button', _('Tags'), 'md-pricetag', tagButton_press));
+
+		items.push(renderSidebarButton('config_button', _('Configuration'), 'md-settings', configButton_press));
+
+		items.push(makeDivider('divider_2'));
+
+		const lines = Synchronizer.reportToLines(props.syncReport);
+		const syncReportText = lines.join('\n');
+
+		let decryptionReportText = '';
+		if (props.decryptionWorker && props.decryptionWorker.state !== 'idle' && props.decryptionWorker.itemCount) {
+			decryptionReportText = _('Decrypting items: %d/%d', props.decryptionWorker.itemIndex + 1, props.decryptionWorker.itemCount);
+		}
+
+		let resourceFetcherText = '';
+		if (props.resourceFetcher && props.resourceFetcher.toFetchCount) {
+			resourceFetcherText = _('Fetching resources: %d/%d', props.resourceFetcher.fetchingCount, props.resourceFetcher.toFetchCount);
+		}
+
+		const fullReport = [];
+		if (syncReportText) fullReport.push(syncReportText);
+		if (resourceFetcherText) fullReport.push(resourceFetcherText);
+		if (decryptionReportText) fullReport.push(decryptionReportText);
+
+		items.push(renderSidebarButton('synchronize_button', !props.syncStarted ? _('Synchronise') : _('Cancel'), 'md-sync', synchronize_press));
+
+		if (fullReport.length) {
+			items.push(
+				<Text key="sync_report" style={styles_.syncStatus}>
+					{fullReport.join('\n')}
+				</Text>
+			);
+		}
+
+		if (props.syncOnlyOverWifi && props.isOnMobileData) {
+			items.push(
+				<Text key="net_info" style={styles_.syncStatus}>
+					{ _('Mobile data - auto-sync disabled') }
+				</Text>
+			);
+		}
+
+		return <View style={{ flex: 0, flexDirection: 'column', paddingBottom: theme.marginBottom }}>{items}</View>;
+	};
+
+	let items = [];
+
+	const theme = themeStyle(props.themeId);
+
+	// HACK: inner height of ScrollView doesn't appear to be calculated correctly when
+	// using padding. So instead creating blank elements for padding bottom and top.
+	items.push(<View style={{ height: theme.marginTop }} key="bottom_top_hack" />);
+
+	items.push(renderSidebarButton('all_notes', _('All notes'), 'md-document', allNotesButton_press, props.notesParentType === 'SmartFilter'));
+
+	items.push(makeDivider('divider_all'));
+
+	items.push(renderSidebarButton('folder_header', _('Notebooks'), 'md-folder'));
+
+	if (props.folders.length) {
+		const result = shared.renderFolders(props, renderFolderItem, false);
+		const folderItems = result.items;
+		items = items.concat(folderItems);
+	}
+
+	const style = {
+		flex: 1,
+		borderRightWidth: 1,
+		borderRightColor: theme.dividerColor,
+		backgroundColor: theme.backgroundColor,
+	};
+
+	return (
+		<View style={style}>
+			<View style={{ flex: 1, opacity: props.opacity }}>
+				<ScrollView scrollsToTop={false} style={styles_.menu}>
+					{items}
+				</ScrollView>
+				{renderBottomPanel()}
+			</View>
+		</View>
+	);
+};
+
+export default connect((state: AppState) => {
+	return {
+		folders: state.folders,
+		syncStarted: state.syncStarted,
+		syncReport: state.syncReport,
+		selectedFolderId: state.selectedFolderId,
+		selectedTagId: state.selectedTagId,
+		notesParentType: state.notesParentType,
+		locale: state.settings.locale,
+		themeId: state.settings.theme,
+		// Don't do the opacity animation as it means re-rendering the list multiple times
+		// opacity: state.sideMenuOpenPercent,
+		collapsedFolderIds: state.collapsedFolderIds,
+		decryptionWorker: state.decryptionWorker,
+		resourceFetcher: state.resourceFetcher,
+		isOnMobileData: state.isOnMobileData,
+		syncOnlyOverWifi: state.settings['sync.mobileWifiOnly'],
+	};
+})(SideMenuContentComponent);

packages/app-mobile/index.js

@@ -45,6 +45,9 @@ LogBox.ignoreLogs([
 	// Apparently it can be safely ignored:
 	// https://github.com/react-native-webview/react-native-webview/issues/124
 	'Did not receive response to shouldStartLoad in time, defaulting to YES',
+
+	// Emitted by react-native-popup-menu
+	'MenuContext is deprecated and it might be removed in future releases, use MenuProvider instead.',
 ]);
 
 AppRegistry.registerComponent('Joplin', () => Root);

packages/app-mobile/root.tsx

@@ -28,7 +28,8 @@ import SyncTargetJoplinServer from '@joplin/lib/SyncTargetJoplinServer';
 import SyncTargetJoplinCloud from '@joplin/lib/SyncTargetJoplinCloud';
 import SyncTargetOneDrive from '@joplin/lib/SyncTargetOneDrive';
 const VersionInfo = require('react-native-version-info').default;
-const { AppState, Keyboard, NativeModules, BackHandler, Animated, View, StatusBar, Linking, Platform, Dimensions } = require('react-native');
+const { Keyboard, NativeModules, BackHandler, Animated, View, StatusBar, Linking, Platform, Dimensions } = require('react-native');
+const RNAppState = require('react-native').AppState;
 import getResponsiveValue from './components/getResponsiveValue';
 import NetInfo from '@react-native-community/netinfo';
 const DropdownAlert = require('react-native-dropdownalert').default;
@@ -66,7 +67,7 @@ import EncryptionConfigScreen from './components/screens/encryption-config';
 const { DropboxLoginScreen } = require('./components/screens/dropbox-login.js');
 const { MenuContext } = require('react-native-popup-menu');
 import SideMenu from './components/SideMenu';
-const { SideMenuContent } = require('./components/side-menu-content.js');
+import SideMenuContent from './components/side-menu-content';
 const { SideMenuContentNote } = require('./components/side-menu-content-note.js');
 const { DatabaseDriverReactNative } = require('./utils/database-driver-react-native');
 import { reg } from '@joplin/lib/registry';
@@ -106,6 +107,7 @@ import SyncTargetNone from '@joplin/lib/SyncTargetNone';
 import { setRSA } from '@joplin/lib/services/e2ee/ppk';
 import RSA from './services/e2ee/RSA.react-native';
 import { runIntegrationTests } from '@joplin/lib/services/e2ee/ppkTestUtils';
+import { AppState } from './utils/types';
 
 let storeDispatch = function(_action: any) {};
 
@@ -201,7 +203,7 @@ const DEFAULT_ROUTE = {
 	smartFilterId: 'c3176726992c11e9ac940492261af972',
 };
 
-const appDefaultState = Object.assign({}, defaultState, {
+const appDefaultState: AppState = Object.assign({}, defaultState, {
 	sideMenuOpenPercent: 0,
 	route: DEFAULT_ROUTE,
 	noteSelectionEnabled: false,
@@ -477,7 +479,7 @@ async function initialize(dispatch: Function) {
 		if (Setting.value('env') === 'prod') {
 			await db.open({ name: 'joplin.sqlite' });
 		} else {
-			await db.open({ name: 'joplin-1.sqlite' });
+			await db.open({ name: 'joplin-101.sqlite' });
 
 			// await db.clearForTesting();
 		}
@@ -774,7 +776,7 @@ class AppComponent extends React.Component {
 			this.dropdownAlert_.alertWithType('info', notification.title, notification.body ? notification.body : '');
 		});
 
-		AppState.addEventListener('change', this.onAppStateChange_);
+		RNAppState.addEventListener('change', this.onAppStateChange_);
 		this.unsubscribeScreenWidthChangeHandler_ = Dimensions.addEventListener('change', this.handleScreenWidthChange_);
 
 		await this.handleShareData();
@@ -788,7 +790,7 @@ class AppComponent extends React.Component {
 	}
 
 	public componentWillUnmount() {
-		AppState.removeEventListener('change', this.onAppStateChange_);
+		RNAppState.removeEventListener('change', this.onAppStateChange_);
 		Linking.removeEventListener('url', this.handleOpenURL_);
 
 		if (this.unsubscribeScreenWidthChangeHandler_) {

packages/app-mobile/tools/encodeAssets.js

@@ -25,7 +25,8 @@ async function encodeFile(sourcePath, destPath) {
 	const hash = md5(buffer.toString('base64'));
 	const js = `module.exports = \`${buffer.toString('base64')}\`;`;
 	const outputPath = `${outputDir}/${destPath}.base64.js`;
-	await fs.mkdirp(utils.dirname(outputPath));
+	console.info(`Encoding "${sourcePath}" => "${outputPath}"`);
+	await utils.mkdirp(utils.dirname(outputPath));
 	await fs.writeFile(outputPath, js);
 
 	const ext = utils.fileExtension(sourcePath).toLowerCase();
@@ -44,7 +45,7 @@ async function encodeFile(sourcePath, destPath) {
 
 async function main() {
 	await fs.remove(outputDir);
-	await fs.mkdirp(outputDir);
+	await utils.mkdirp(outputDir);
 
 	const encodedFiles = [];
 	const sourceAssetDir = `${rootDir}/../renderer/assets`;

packages/app-mobile/utils/types.ts

@@ -0,0 +1,9 @@
+import { State } from '@joplin/lib/reducer';
+
+export interface AppState extends State {
+	sideMenuOpenPercent: number;
+	isOnMobileData: boolean;
+	route: any;
+	smartFilterId: string;
+	noteSideMenuOptions: any;
+}

packages/lib/components/shared/side-menu-shared.js

@@ -1,5 +1,4 @@
 const Folder = require('../../models/Folder').default;
-const Setting = require('../../models/Setting').default;
 const BaseModel = require('../../BaseModel').default;
 
 const shared = {};
@@ -77,59 +76,4 @@ shared.renderTags = function(props, renderItem) {
 	};
 };
 
-shared.synchronize_press = async function(comp) {
-	const { reg } = require('../../registry.js');
-
-	const action = comp.props.syncStarted ? 'cancel' : 'start';
-
-	if (!Setting.value('sync.target')) {
-		comp.props.dispatch({
-			type: 'SIDE_MENU_CLOSE',
-		});
-
-		comp.props.dispatch({
-			type: 'NAV_GO',
-			routeName: 'Config',
-			sectionName: 'sync',
-		});
-
-		return 'init';
-	}
-
-	if (!(await reg.syncTarget().isAuthenticated())) {
-		if (reg.syncTarget().authRouteName()) {
-			comp.props.dispatch({
-				type: 'NAV_GO',
-				routeName: reg.syncTarget().authRouteName(),
-			});
-			return 'auth';
-		}
-
-		reg.logger().error('Not authenticated with sync target - please check your credentials.');
-		return 'error';
-	}
-
-	let sync = null;
-	try {
-		sync = await reg.syncTarget().synchronizer();
-	} catch (error) {
-		reg.logger().error('Could not initialise synchroniser: ');
-		reg.logger().error(error);
-		error.message = `Could not initialise synchroniser: ${error.message}`;
-		comp.props.dispatch({
-			type: 'SYNC_REPORT_UPDATE',
-			report: { errors: [error] },
-		});
-		return 'error';
-	}
-
-	if (action === 'cancel') {
-		sync.cancel();
-		return 'cancel';
-	} else {
-		reg.scheduleSync(0);
-		return 'sync';
-	}
-};
-
 module.exports = shared;

packages/lib/models/Folder.ts

@@ -782,4 +782,12 @@ export default class Folder extends BaseItem {
 		};
 	}
 
+	public static shouldShowFolderIcons(folders: FolderEntity[]) {
+		// If at least one of the folder has an icon, then we display icons for all
+		// folders (those without one will get the default icon). This is so that
+		// visual alignment is correct for all folders, otherwise the folder tree
+		// looks messy.
+		return !!folders.find(f => !!f.icon);
+	}
+
 }

packages/server/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@joplin/server",
-  "version": "2.9.1",
+  "version": "2.9.5",
   "private": true,
   "scripts": {
     "start-dev": "yarn run build && JOPLIN_IS_TESTING=1 nodemon --config nodemon.json --ext ts,js,mustache,css,tsx dist/app.js --env dev",

packages/tools/gulp/utils.js

@@ -134,14 +134,33 @@ utils.copyDir = async function(src, dest, options) {
 	}
 };
 
+// Occasionally, fs.mkdirp throws a "EEXIST" error if the directory already
+// exists, while it should actually ignore the error. So we have this wrapper
+// that actually handle the error. It means in general this method should be
+// preferred to avoid random failures on CI or when building the app.
+//
+// https://github.com/laurent22/joplin/issues/6935#issuecomment-1274404470
 utils.mkdir = async function(dir) {
 	if (utils.isWindows()) {
 		return utils.execCommand(`if not exist "${utils.toSystemSlashes(dir)}" mkdir "${utils.toSystemSlashes(dir)}"`);
 	} else {
-		return fs.mkdirp(dir);
+		try {
+			// Can't return right away, or the exception won't be caught
+			const result = await fs.mkdirp(dir);
+			return result;
+		} catch (error) {
+			// Shouldn't happen but sometimes does. So we ignore the error in
+			// this case.
+			if (error.code === 'EEXIST') return;
+			throw error;
+		}
 	}
 };
 
+utils.mkdirp = async function(dir) {
+	return utils.mkdir(dir);
+};
+
 utils.copyFile = async function(src, dest) {
 	await fs.copy(src, dest);
 };

readme/changelog_android.md

@@ -1,5 +1,10 @@
 # Joplin Android app changelog
 
+## [android-v2.9.4](https://github.com/laurent22/joplin/releases/tag/android-v2.9.4) (Pre-release) - 2022-10-11T13:27:49Z
+
+- Improved: Disable multi-highlighting to fix context menu (9b348fd)
+- Improved: Display icon for all notebooks if at least one notebook has an icon (ec97dd8)
+
 ## [android-v2.9.3](https://github.com/laurent22/joplin/releases/tag/android-v2.9.3) (Pre-release) - 2022-10-07T11:12:56Z
 
 - Improved: Convert empty bolded regions to bold-italic regions in beta editor (#6807) (#6808 by Henry Heino)

readme/changelog_server.md

@@ -1,6 +1,6 @@
 # Joplin Server Changelog
 
-## [server-v2.9.1](https://github.com/laurent22/joplin/releases/tag/server-v2.9.1) - 2022-10-07T10:46:43Z
+## [server-v2.9.5](https://github.com/laurent22/joplin/releases/tag/server-v2.9.5) - 2022-10-11T10:44:01Z
 
 - New: Add support for sidebar in user pages (053dbab)
 - Improved: Automatically delete expired sessions (d5dfecc)