Mobile: Fixes #9858: Fix deeply-nested subnotebook titles invisible in the folder dropdown (#9906)

packages/app-mobile/components/Dropdown.tsx

@@ -7,6 +7,10 @@ type ValueType = string;
 export interface DropdownListItem {
 	label: string;
 	value: ValueType;
+
+	// Depth corresponds with indentation and can be used to
+	// create tree structures.
+	depth?: number;
 }
 
 export type OnValueChangedListener = (newValue: ValueType)=> void;
@@ -67,6 +71,7 @@ class Dropdown extends Component<DropdownProps, DropdownState> {
 		const maxListTop = windowHeight - listHeight;
 		const listTop = Math.min(maxListTop, this.state.headerSize.y + this.state.headerSize.height);
 
+		const dropdownWidth = this.state.headerSize.width;
 		const wrapperStyle: ViewStyle = {
 			width: this.state.headerSize.width,
 			height: listHeight + 2, // +2 for the border (otherwise it makes the scrollbar appear)
@@ -86,11 +91,14 @@ class Dropdown extends Component<DropdownProps, DropdownState> {
 		const itemListStyle = { ...(this.props.itemListStyle ? this.props.itemListStyle : {}), borderWidth: 1,
 			borderColor: '#ccc' };
 
-		const itemWrapperStyle = { ...(this.props.itemWrapperStyle ? this.props.itemWrapperStyle : {}), flex: 1,
+		const itemWrapperStyle: ViewStyle = {
+			...(this.props.itemWrapperStyle ? this.props.itemWrapperStyle : {}),
+			flex: 1,
 			justifyContent: 'center',
 			height: itemHeight,
 			paddingLeft: 20,
-			paddingRight: 10 };
+			paddingRight: 10,
+		};
 
 		const headerWrapperStyle = { ...(this.props.headerWrapperStyle ? this.props.headerWrapperStyle : {}), height: 35,
 			flex: 1,
@@ -123,9 +131,11 @@ class Dropdown extends Component<DropdownProps, DropdownState> {
 
 		const itemRenderer = ({ item }: { item: DropdownListItem }) => {
 			const key = item.value ? item.value.toString() : '__null'; // The top item ("Move item to notebook...") has a null value.
+			const indentWidth = Math.min((item.depth ?? 0) * 32, dropdownWidth * 2 / 3);
+
 			return (
 				<TouchableOpacity
-					style={itemWrapperStyle as any}
+					style={itemWrapperStyle}
 					accessibilityRole="menuitem"
 					key={key}
 					onPress={() => {
@@ -133,7 +143,7 @@ class Dropdown extends Component<DropdownProps, DropdownState> {
 						if (this.props.onValueChange) this.props.onValueChange(item.value);
 					}}
 				>
-					<Text ellipsizeMode="tail" numberOfLines={1} style={itemStyle} key={key}>
+					<Text ellipsizeMode="tail" numberOfLines={1} style={{ ...itemStyle, marginStart: indentWidth }} key={key}>
 						{item.label}
 					</Text>
 				</TouchableOpacity>