fix: add chapter number, fix novel screen ui

src/database/queries/ChapterQueries.ts

@@ -16,10 +16,10 @@ const db = SQLite.openDatabase('lnreader.db');
 
 const insertChapterQuery = `
 INSERT INTO Chapter (
-  url, name, releaseTime, novelId
+  url, name, releaseTime, novelId, chapterNumber
 ) 
 Values 
-  (?, ?, ?, ?)
+  (?, ?, ?, ?, ?)
 `;
 
 export const insertChapters = async (
@@ -36,8 +36,9 @@ export const insertChapters = async (
         [
           chapter.url,
           chapter.name,
-          chapter.releaseTime ? chapter.releaseTime : '',
+          chapter.releaseTime || '',
           novelId,
+          chapter.chapterNumber || null,
         ],
         noop,
         txnErrorCallback,

src/database/tables/ChapterTable.ts

@@ -10,6 +10,7 @@ export const createChapterTableQuery = `
         readTime TEXT,
         isDownloaded INTEGER DEFAULT 0,
         updatedTime TEXT,
+        chapterNumber REAL NULL,
         FOREIGN KEY (novelId) REFERENCES Novel(id) ON DELETE CASCADE
     )
 `;

src/screens/novel/components/ChapterItem.tsx

@@ -50,12 +50,15 @@ const ChapterItem: React.FC<ChapterItemProps> = ({
   isUpdateCard,
   novelName,
 }) => {
-  const { id, name, unread, releaseTime, bookmark } = chapter;
+  const { id, name, unread, releaseTime, bookmark, chapterNumber } = chapter;
   const [deleteChapterMenuVisible, setDeleteChapterMenuVisible] =
     useState(false);
   const showDeleteChapterMenu = () => setDeleteChapterMenuVisible(true);
   const hideDeleteChapterMenu = () => setDeleteChapterMenuVisible(false);
-  const chapterNumber = parseChapterNumber(novelName, name);
+  const chapNum = chapterNumber
+    ? chapterNumber
+    : parseChapterNumber(novelName, name);
+  const parsedTime = dayjs(releaseTime);
   return (
     <Pressable
       key={'chapterItem' + id}
@@ -111,9 +114,7 @@ const ChapterItem: React.FC<ChapterItemProps> = ({
               ]}
               numberOfLines={1}
             >
-              {showChapterTitles
-                ? name
-                : `Chapter ${chapterNumber} • ID: ${id}`}
+              {showChapterTitles ? name : `Chapter ${chapNum} • ID: ${id}`}
             </Text>
           </Row>
           <View style={styles.textRow}>
@@ -131,7 +132,7 @@ const ChapterItem: React.FC<ChapterItemProps> = ({
                 ]}
                 numberOfLines={1}
               >
-                {dayjs(releaseTime).format('LL')}
+                {parsedTime.isValid() ? parsedTime.format('LL') : releaseTime}
               </Text>
             ) : null}
             {showProgressPercentage?.(chapter)}

src/screens/novel/components/Info/NovelInfoComponents.tsx

@@ -144,23 +144,12 @@ const NovelTitle = ({
     onLongPress={onLongPress}
     onPress={onPress}
     style={[styles.novelTitle, { color: theme.onBackground }]}
+    numberOfLines={4}
   >
     {children}
   </Text>
 );
 
-const NovelAuthor = ({
-  theme,
-  children,
-}: {
-  theme: ThemeColors;
-  children: React.ReactNode;
-}) => (
-  <Text style={[styles.novelAuthor, { color: theme.onSurfaceVariant }]}>
-    {children}
-  </Text>
-);
-
 const NovelInfo = ({
   theme,
   children,
@@ -282,7 +271,6 @@ export {
   CoverImage,
   NovelThumbnail,
   NovelTitle,
-  NovelAuthor,
   NovelInfo,
   FollowButton,
   TrackerButton,
@@ -311,9 +299,6 @@ const styles = StyleSheet.create({
   novelTitle: {
     fontSize: 20,
   },
-  novelAuthor: {
-    fontSize: 14,
-  },
   novelInfo: {
     fontSize: 14,
   },

src/screens/novel/components/Info/NovelInfoHeader.tsx

@@ -11,7 +11,6 @@ import { showToast } from '@utils/showToast';
 
 import {
   CoverImage,
-  NovelAuthor,
   NovelInfo,
   NovelInfoContainer,
   NovelThumbnail,
@@ -85,65 +84,56 @@ const NovelInfoHeader = ({
             setCustomNovelCover={setCustomNovelCover}
           />
           <View style={styles.novelDetails}>
-            <NovelTitle
-              theme={theme}
-              onPress={() =>
-                navigation.replace('GlobalSearchScreen', {
-                  searchText: novel.name,
-                })
-              }
-              onLongPress={() => {
-                Clipboard.setStringAsync(novel.name).then(() =>
-                  showToast('Copied to clipboard: ' + novel.name),
-                );
-              }}
-            >
-              {novel.name}
-            </NovelTitle>
-            <Text
-              style={{
-                fontSize: 15,
-                fontWeight: 'bold',
-                color: theme.onBackground,
-              }}
-            >
-              {`ID: ${novel.id}`}
-            </Text>
-            <>
-              <Row style={styles.infoItem}>
+            <Row>
+              <NovelTitle
+                theme={theme}
+                onPress={() =>
+                  navigation.replace('GlobalSearchScreen', {
+                    searchText: novel.name,
+                  })
+                }
+                onLongPress={() => {
+                  Clipboard.setStringAsync(novel.name).then(() =>
+                    showToast('Copied to clipboard: ' + novel.name),
+                  );
+                }}
+              >
+                {novel.name}
+              </NovelTitle>
+            </Row>
+            {novel.author && (
+              <Row>
                 <MaterialCommunityIcons
-                  name="fountain-pen"
+                  name="fountain-pen-tip"
                   size={14}
                   color={theme.onSurfaceVariant}
                   style={{ marginRight: 4 }}
                 />
-                <NovelAuthor theme={theme}>
-                  {novel.author || 'Unknown author'}
-                </NovelAuthor>
+                <NovelInfo theme={theme}>{novel.author}</NovelInfo>
               </Row>
-              <Row style={styles.infoItem}>
+            )}
+            {novel.artist && (
+              <Row>
                 <MaterialCommunityIcons
-                  name="palette"
+                  name="palette-outline"
                   size={14}
                   color={theme.onSurfaceVariant}
                   style={{ marginRight: 4 }}
                 />
-                <NovelAuthor theme={theme}>
-                  {novel.artist || 'Unknown artist'}
-                </NovelAuthor>
+                <NovelInfo theme={theme}>{novel.artist}</NovelInfo>
               </Row>
-              <Row style={styles.infoItem}>
-                <MaterialCommunityIcons
-                  name={getStatusIcon(novel.status)}
-                  size={14}
-                  color={theme.onSurfaceVariant}
-                  style={{ marginRight: 4 }}
-                />
-                <NovelInfo theme={theme}>
-                  {(novel.status || 'Unknown status') + ' • ' + novel.pluginId}
-                </NovelInfo>
-              </Row>
-            </>
+            )}
+            <Row>
+              <MaterialCommunityIcons
+                name={getStatusIcon(novel.status)}
+                size={14}
+                color={theme.onSurfaceVariant}
+                style={{ marginRight: 4 }}
+              />
+              <NovelInfo theme={theme}>
+                {(novel.status || 'Unknown status') + ' • ' + novel.pluginId}
+              </NovelInfo>
+            </Row>
           </View>
         </NovelInfoContainer>
       </CoverImage>
@@ -201,6 +191,7 @@ export default memo(NovelInfoHeader);
 const styles = StyleSheet.create({
   novelDetails: {
     flex: 1,
+    flexDirection: 'column',
     paddingBottom: 16,
     paddingLeft: 12,
     justifyContent: 'center',
@@ -217,6 +208,6 @@ const styles = StyleSheet.create({
     paddingRight: 12,
   },
   infoItem: {
-    marginVertical: 4,
+    marginVertical: 2,
   },
 });