Better export to epub

package.json

@@ -9,13 +9,14 @@
     "start": "react-native start",
     "lint": "eslint . --ext .js,.jsx,.ts,.tsx",
     "prettier": "prettier --write \"./src/**/*.{js,jsx,ts,tsx}\" ./scripts",
-    "buildRelease": "node scripts/setEnvFile.cjs Release && cd android && ./gradlew clean && ./gradlew assembleRelease",
+    "buildRelease": "node scripts/convertCssToJs.cjs && node scripts/setEnvFile.cjs Release && cd android && ./gradlew clean && ./gradlew assembleRelease",
     "open": "open ./android/app/build/outputs/apk/release/",
     "strings": "node scripts/stringTypes.cjs",
-    "prepare": "husky install"
+    "prepare": "husky install",
+    "cssToJs": "node scripts/convertCssToJs.cjs"
   },
   "dependencies": {
-    "@cd-z/react-native-epub-creator": "^2.0.4",
+    "@cd-z/react-native-epub-creator": "^3.0.0",
     "@gorhom/bottom-sheet": "^4.4.5",
     "@react-native-community/slider": "^4.4.2",
     "@react-native-cookies/cookies": "^6.2.1",
@@ -50,6 +51,7 @@
     "react-native-device-info": "^8.4.7",
     "react-native-drawer-layout": "^3.2.2",
     "react-native-error-boundary": "^1.1.16",
+    "react-native-file-access": "^3.1.0",
     "react-native-gesture-handler": "~2.12.0",
     "react-native-lottie-splash-screen": "^1.0.1",
     "react-native-mmkv": "^2.11.0",

scripts/convertCssToJs.cjs

@@ -0,0 +1,29 @@
+const fs = require('fs');
+const path = require('path');
+
+const cssFilePath = path.resolve(
+  __dirname + '/../android/app/src/main/assets/css/',
+  'index.css',
+);
+const jsFilePath = path.resolve(
+  __dirname + '/../android/app/src/main/assets/css/',
+  'index.js',
+);
+
+fs.readFile(cssFilePath, 'utf8', (err, data) => {
+  if (err) {
+    console.error('Error reading CSS file:', err);
+    return;
+  }
+
+  const jsContent = `export default \`\n${data}\n\`;`;
+
+  fs.writeFile(jsFilePath, jsContent, 'utf8', err => {
+    if (err) {
+      console.error('Error writing JS file:', err);
+      return;
+    }
+
+    console.info('CSS file successfully converted to JS module.');
+  });
+});

src/components/Button/Button.tsx

@@ -8,6 +8,7 @@ import { useTheme } from '@hooks/persisted';
 
 interface ButtonProps extends Partial<PaperButtonProps> {
   title?: string;
+  children?: string;
 }
 
 const Button: React.FC<ButtonProps> = props => {

src/components/List/List.tsx

@@ -87,13 +87,21 @@ const InfoItem = ({
   title,
   icon = 'information-outline',
   theme,
+  paddingHorizontal = 16,
 }: {
   title: string;
   icon?: string;
   theme: ThemeColors;
+  paddingHorizontal?: number;
 }) => (
-  <View style={styles.infoCtn}>
-    <MaterialIcon size={20} color={theme.onSurfaceVariant} name={icon} />
+  <View style={[styles.infoCtn, { paddingHorizontal }]}>
+    <MaterialIcon
+      size={20}
+      color={theme.onSurfaceVariant}
+      name={icon}
+      style={{ width: 20 }}
+    />
+
     <Text style={[styles.infoMsg, { color: theme.onSurfaceVariant }]}>
       {title}
     </Text>
@@ -159,10 +167,13 @@ const styles = StyleSheet.create({
   },
   infoCtn: {
     paddingVertical: 12,
-    paddingHorizontal: 16,
+    // paddingHorizontal: 16,
+    display: 'flex',
+    flexDirection: 'row',
   },
   infoMsg: {
-    marginTop: 12,
+    marginLeft: 6,
+    verticalAlign: 'middle',
     fontSize: 12,
   },
   iconCtn: {

src/screens/novel/NovelScreen.tsx

@@ -89,6 +89,7 @@ const Novel = ({ route, navigation }: NovelScreenProps) => {
     refreshChapters,
     deleteChapters,
   } = useNovel(path, pluginId);
+
   const theme = useTheme();
   const { top: topInset, bottom: bottomInset } = useSafeAreaInsets();
 
@@ -381,7 +382,9 @@ const Novel = ({ route, navigation }: NovelScreenProps) => {
             {selected.length === 0 ? (
               <NovelAppbar
                 novel={novel}
-                chapters={chapters}
+                chapters={
+                  sort.includes('DESC') ? chapters.slice().reverse() : chapters
+                }
                 deleteChapters={deleteChs}
                 downloadChapters={downloadChs}
                 showEditInfoModal={showEditInfoModal}

src/screens/novel/components/ChooseEpubLocationModal.tsx → src/screens/novel/components/ExportToEpub/ChooseEpubLocationModal.tsx

@@ -1,14 +1,14 @@
 import React, { useState } from 'react';
 import { StyleSheet, View } from 'react-native';
 import { Modal, TextInput, Text } from 'react-native-paper';
-import { openDocumentTree } from 'react-native-saf-x';
 
 import { Button, List, SwitchItem } from '@components';
 
 import { useBoolean } from '@hooks';
 import { getString } from '@strings/translations';
 import { useChapterReaderSettings, useTheme } from '@hooks/persisted';
 import { showToast } from '@utils/showToast';
+import FileManager from '@native/FileManager';
 
 interface ChooseEpubLocationModalProps {
   isVisible: boolean;
@@ -54,9 +54,9 @@ const ChooseEpubLocationModal: React.FC<ChooseEpubLocationModalProps> = ({
 
   const openFolderPicker = async () => {
     try {
-      const resultUri = await openDocumentTree(true);
+      const resultUri = await FileManager.pickFolder();
       if (resultUri) {
-        setUri(resultUri.uri);
+        setUri(resultUri);
       }
     } catch (error: any) {
       showToast(error.message);
@@ -76,6 +76,7 @@ const ChooseEpubLocationModal: React.FC<ChooseEpubLocationModalProps> = ({
         <Text style={[styles.modalTitle, { color: theme.onSurface }]}>
           {getString('novelScreen.convertToEpubModal.chooseLocation')}
         </Text>
+
         <TextInput
           onChangeText={setUri}
           value={uri}
@@ -84,6 +85,7 @@ const ChooseEpubLocationModal: React.FC<ChooseEpubLocationModalProps> = ({
           mode="outlined"
           theme={{ colors: { ...theme } }}
           underlineColor={theme.outline}
+          editable={false}
           dense
           right={
             <TextInput.Icon
@@ -99,12 +101,14 @@ const ChooseEpubLocationModal: React.FC<ChooseEpubLocationModalProps> = ({
           value={useAppTheme.value}
           onPress={useAppTheme.toggle}
           theme={theme}
+          style={styles.switch}
         />
         <SwitchItem
           label={getString('novelScreen.convertToEpubModal.useCustomCSS')}
           value={useCustomCSS.value}
           onPress={useCustomCSS.toggle}
           theme={theme}
+          style={styles.switch}
         />
         <SwitchItem
           label={getString('novelScreen.convertToEpubModal.useCustomJS')}
@@ -114,11 +118,18 @@ const ChooseEpubLocationModal: React.FC<ChooseEpubLocationModalProps> = ({
           value={useCustomJS.value}
           onPress={useCustomJS.toggle}
           theme={theme}
+          style={styles.switch}
         />
       </View>
       <List.InfoItem
         title={getString('novelScreen.convertToEpubModal.chaptersWarning')}
         theme={theme}
+        paddingHorizontal={20}
+      />
+      <List.InfoItem
+        title={getString('novelScreen.convertToEpubModal.settingsWarning')}
+        theme={theme}
+        paddingHorizontal={20}
       />
       <View style={styles.modalFooterCtn}>
         <Button title={getString('common.submit')} onPress={onSubmit} />
@@ -136,19 +147,18 @@ const styles = StyleSheet.create({
     borderRadius: 32,
   },
   settings: {
-    marginTop: 12,
-    padding: 24,
+    paddingBottom: 24,
+  },
+  switch: {
+    paddingHorizontal: 20,
   },
   modalHeaderCtn: {
     padding: 20,
-    paddingTop: 32,
-    paddingBottom: 0,
   },
   modalFooterCtn: {
     flexDirection: 'row-reverse',
-    paddingHorizontal: 20,
+    padding: 20,
     paddingTop: 8,
-    paddingBottom: 20,
   },
   modalTitle: {
     fontSize: 24,