Merge pull request #245 from venera-app/v1.3.2-dev

v1.3.2

.github/ISSUE_TEMPLATE/bug.yaml

@@ -7,6 +7,32 @@ body:
     attributes:
       value: |
         Thank you for reporting a problem, please complete the title and fill in the following information.
+        
+        感谢您的反馈，请填写完整标题并填写以下信息。
+        
+        **Please do not report any issues related to config files.**
+        
+        **请不要报告与配置文件相关的任何问题。**
+        
+        This project is a comic reader that allows users write their own config files. And there is no built-in comic source.
+        
+        本项目是一个漫画阅读器，允许用户编写自己的配置文件，并且没有内置漫画源。
+  - type: dropdown
+    id: bugType
+    attributes:
+      label: Bug type
+      description: What type of bug are you reporting?
+      options:
+        - Crash
+        - UI
+        - Performance
+        - Security
+        - Reader
+        - JS Engine
+        - Comic Source
+        - Other
+    validations:
+      required: true
   - type: textarea
     id: what-happened
     attributes:
@@ -19,7 +45,8 @@ body:
     attributes:
       label: Version
       description: | 
-        App version
+        App version.
+        
         Please try to update if it is not the latest version
     validations:
       required: true

.github/ISSUE_TEMPLATE/config.yml

@@ -0,0 +1 @@
+blank_issues_enabled: false

.github/ISSUE_TEMPLATE/enhancement.yaml

@@ -7,6 +7,16 @@ body:
     attributes:
       value: |
         Welcome to make a feature request, please fill in the following information after completing the title.
+        
+        欢迎提出功能建议，请填写完整标题后填写以下信息。
+        
+        **Please do not report any issues related to config files.**
+
+        **请不要报告与配置文件相关的任何问题。**
+
+        This project is a comic reader that allows users write their own config files. And there is no built-in comic source.
+
+        本项目是一个漫画阅读器，允许用户编写自己的配置文件，并且没有内置漫画源。
   - type: textarea
     id: what-happened
     attributes:

.github/ISSUE_TEMPLATE/other.yaml

@@ -1,9 +0,0 @@
-name: other
-description: Other contents
-body:
-  - type: textarea
-    id: what-happened
-    attributes:
-      label: Content
-    validations:
-      required: true

.github/workflows/analyze.yml

@@ -0,0 +1,19 @@
+name: "analyze"
+on:
+  pull_request:
+  push:
+    branches:
+      - master
+
+jobs:
+  analyze:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - uses: subosito/flutter-action@v2
+        with:
+          channel: "stable"
+          flutter-version-file: pubspec.yaml
+          architecture: x64
+      - run: flutter pub get
+      - uses: invertase/github-action-dart-analyzer@v1

.github/workflows/fastlane.yml

@@ -0,0 +1,16 @@
+name: Validate Fastlane metadata
+
+on:
+  workflow_dispatch:
+  push:
+      branches: [ "master" ]
+  pull_request:
+      branches: [ "master" ]
+
+jobs:
+  go:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - name: Validate Fastlane Supply Metadata
+        uses: ashutoshgngwr/validate-fastlane-supply-metadata@v2.1.0

.github/workflows/main.yml

@@ -2,6 +2,9 @@ name: Build ALL
 run-name: Build ALL
 on:
   workflow_dispatch: {}
+  release:
+    types: [published]
+
 jobs:
   Build_MacOS:
     runs-on: macos-15
@@ -36,12 +39,18 @@ jobs:
           ln -s /Applications dist/dmg_contents/Applications
           hdiutil create -volname "venera" -srcfolder dist/dmg_contents -ov -format UDZO "dist/venera.dmg"
 
+      - name: Add version to filename
+        run: |
+          APP_VERSION=$(grep "version:" pubspec.yaml | cut -d':' -f2 | tr -d ' ')
+          mkdir -p result
+          mv dist/venera.dmg result/venera-$APP_VERSION.dmg
+
       # Step 4: Attach and upload artifacts (optional)
       - name: Upload DMG
         uses: actions/upload-artifact@v4
         with:
-          name: venera.dmg
-          path: dist/venera.dmg
+          name: macos_build
+          path: result/
   Build_IOS:
     runs-on: macos-15
     steps:
@@ -59,12 +68,17 @@ jobs:
           mv /Users/runner/work/venera/venera/build/ios/iphoneos/Runner.app /Users/runner/work/venera/venera/build/ios/iphoneos/Payload
           cd /Users/runner/work/venera/venera/build/ios/iphoneos/
           zip -r venera-ios.ipa Payload
+      - name: Add version to filename
+        run: |
+          APP_VERSION=$(grep "version:" pubspec.yaml | cut -d':' -f2 | tr -d ' ')
+          mkdir -p result
+          mv build/ios/iphoneos/venera-ios.ipa result/venera-ios-$APP_VERSION.ipa
       - uses: actions/upload-artifact@v4
         with:
-          name: app-ios.ipa
-          path: /Users/runner/work/venera/venera/build/ios/iphoneos/venera-ios.ipa
+          name: ios_build
+          path: result/
   Build_Android:
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-22.04
     steps:
       - uses: actions/checkout@v3
       - uses: subosito/flutter-action@v2
@@ -83,6 +97,10 @@ jobs:
         with:
           distribution: 'oracle'
           java-version: '17'
+      - name: Setup Rust
+        run: |
+          rustup update
+          rustup default stable
       - run: flutter pub get
       - run: flutter build apk --release
       - uses: actions/upload-artifact@v4
@@ -111,7 +129,7 @@ jobs:
           name: windows_build
           path: build/windows/Venera-*
   Build_Linux:
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-22.04
     steps:
       - uses: actions/checkout@v4
       - uses: subosito/flutter-action@v2
@@ -123,13 +141,52 @@ jobs:
           sudo apt-get update -y
           sudo apt-get install -y ninja-build libgtk-3-dev webkit2gtk-4.1
           dart pub global activate flutter_to_debian
-      - run: python3 debian/build.py
+      - run: python3 debian/build.py x64
       - run: dart run flutter_to_arch
       - run: |
           sudo rm -rf build/linux/arch/app.tar.gz
           sudo rm -rf build/linux/arch/pkg
           sudo rm -rf build/linux/arch/src
           sudo rm -rf build/linux/arch/PKGBUILD
+      - name: Build AppImage
+        run: |
+          sudo apt-get install -y libfuse2
+          wget -O appimagetool "https://github.com/AppImage/AppImageKit/releases/download/continuous/appimagetool-x86_64.AppImage"
+          chmod +x appimagetool
+          
+          mkdir -p Venera.AppDir
+          cp -r build/linux/x64/release/bundle/* Venera.AppDir/
+          
+          cat > Venera.AppDir/venera.desktop << EOF
+          [Desktop Entry]
+          Name=Venera
+          Exec=venera
+          Icon=venera
+          Type=Application
+          Categories=Utility;
+          EOF
+          
+          cp assets/app_icon.png Venera.AppDir/venera.png
+          
+          cat > Venera.AppDir/AppRun << EOF
+          #!/bin/sh
+          HERE=\$(dirname \$(readlink -f "\${0}"))
+          export PATH="\${HERE}"/usr/bin/:"\${HERE}"/usr/sbin/:"\${HERE}"/usr/games/:"\${HERE}"/bin/:"\${HERE}"/sbin/:\${PATH}
+          export LD_LIBRARY_PATH="\${HERE}"/usr/lib/:\${LD_LIBRARY_PATH}
+          export XDG_DATA_DIRS="\${HERE}"/usr/share/:\${XDG_DATA_DIRS}
+          exec "\${HERE}"/venera "\$@"
+          EOF
+          chmod +x Venera.AppDir/AppRun
+          
+          APP_VERSION=$(grep "version:" pubspec.yaml | cut -d':' -f2 | tr -d ' ')
+          ./appimagetool Venera.AppDir Venera-${APP_VERSION}-x86_64.AppImage
+          
+          mkdir -p build/linux/appimage
+          mv Venera-${APP_VERSION}-x86_64.AppImage build/linux/appimage/
+      - uses: actions/upload-artifact@v4
+        with:
+          name: appimage_build
+          path: build/linux/appimage
       - uses: actions/upload-artifact@v4
         with:
           name: deb_build
@@ -138,4 +195,116 @@ jobs:
         with:
           name: arch_build
           path: build/linux/arch/
+  Build_Linux_ARM64:
+    runs-on: ubuntu-22.04-arm
+    steps:
+      - uses: actions/checkout@v4
+      - uses: subosito/flutter-action@v2
+        with:
+          channel: 'master'
+          flutter-version-file: pubspec.yaml
+      - run: |
+          flutter pub get
+          sudo apt-get update -y
+          sudo apt-get install -y ninja-build libgtk-3-dev webkit2gtk-4.1
+          dart pub global activate flutter_to_debian
+      - run: python3 debian/build.py arm64
+      - name: Build AppImage
+        run: |
+          sudo apt-get install -y libfuse2
+          wget -O appimagetool "https://github.com/AppImage/AppImageKit/releases/download/continuous/appimagetool-aarch64.AppImage"
+          chmod +x appimagetool
           
+          mkdir -p Venera.AppDir
+          cp -r build/linux/arm64/release/bundle/* Venera.AppDir/
+          
+          cat > Venera.AppDir/venera.desktop << EOF
+          [Desktop Entry]
+          Name=Venera
+          Exec=venera
+          Icon=venera
+          Type=Application
+          Categories=Utility;
+          EOF
+          
+          cp assets/app_icon.png Venera.AppDir/venera.png
+          
+          cat > Venera.AppDir/AppRun << EOF
+          #!/bin/sh
+          HERE=\$(dirname \$(readlink -f "\${0}"))
+          export PATH="\${HERE}"/usr/bin/:"\${HERE}"/usr/sbin/:"\${HERE}"/usr/games/:"\${HERE}"/bin/:"\${HERE}"/sbin/:\${PATH}
+          export LD_LIBRARY_PATH="\${HERE}"/usr/lib/:\${LD_LIBRARY_PATH}
+          export XDG_DATA_DIRS="\${HERE}"/usr/share/:\${XDG_DATA_DIRS}
+          exec "\${HERE}"/venera "\$@"
+          EOF
+          chmod +x Venera.AppDir/AppRun
+          
+          APP_VERSION=$(grep "version:" pubspec.yaml | cut -d':' -f2 | tr -d ' ')
+          ./appimagetool Venera.AppDir Venera-${APP_VERSION}-aarch64.AppImage
+          
+          mkdir -p build/linux/appimage
+          mv Venera-${APP_VERSION}-aarch64.AppImage build/linux/appimage/
+      - uses: actions/upload-artifact@v4
+        with:
+          name: appimage_arm64_build
+          path: build/linux/appimage
+      - uses: actions/upload-artifact@v4
+        with:
+          name: deb_arm64_build
+          path: build/linux/x64/release/debian # This is a bug related to flutter_to_debian, but it's not a big deal.
+
+  Release:
+    runs-on: ubuntu-22.04
+    needs: [Build_MacOS, Build_IOS, Build_Android, Build_Windows, Build_Linux, Build_Linux_ARM64]
+    if: github.event_name == 'release'  # 仅在 push 事件时执行
+    steps:
+      - uses: actions/download-artifact@v4
+        with:
+          name: macos_build
+          path: outputs
+      - uses: actions/download-artifact@v4
+        with:
+          name: ios_build
+          path: outputs
+      - uses: actions/download-artifact@v4
+        with:
+          name: apks
+          path: outputs
+      - uses: actions/download-artifact@v4
+        with:
+          name: windows_build
+          path: outputs
+      - uses: actions/download-artifact@v4
+        with:
+          name: deb_build
+          path: outputs
+      - uses: actions/download-artifact@v4
+        with:
+          name: arch_build
+          path: outputs
+      - uses: actions/download-artifact@v4
+        with:
+          name: deb_arm64_build
+          path: outputs
+      - uses: actions/download-artifact@v4
+        with:
+          name: appimage_build
+          path: outputs
+      - uses: actions/download-artifact@v4
+        with:
+          name: appimage_arm64_build
+          path: outputs
+      - uses: softprops/action-gh-release@v2
+        with:
+          tag_name: ${{ github.ref_name }}
+          files: |
+            outputs/*.ipa
+            outputs/*.dmg
+            outputs/*.apk
+            outputs/*.zip
+            outputs/*.exe
+            outputs/*.deb
+            outputs/*.zst
+            outputs/*.AppImage
+        env:
+          GITHUB_TOKEN: ${{ secrets.ACTION_GITHUB_TOKEN }}

.gitignore

@@ -15,6 +15,7 @@ migrate_working_dir/
 *.ipr
 *.iws
 .idea/
+.vscode/
 
 # The .vscode folder contains launch configuration and tasks you configure in
 # VS Code which you may wish to be included in version control, so this line

README.md

@@ -1,15 +1,17 @@
 # venera
-
-[![flutter](https://img.shields.io/badge/flutter-3.24.4-blue)](https://flutter.dev/)
+[![flutter](https://img.shields.io/badge/flutter-3.27.1-blue)](https://flutter.dev/)
 [![License](https://img.shields.io/github/license/venera-app/venera)](https://github.com/venera-app/venera/blob/master/LICENSE)
 [![Download](https://img.shields.io/github/v/release/venera-app/venera)](https://github.com/venera-app/venera/releases)
-[![stars](https://img.shields.io/github/stars/venera-app/venera)](https://github.com/venera-app/venera/stargazers)
+[![stars](https://img.shields.io/github/stars/venera-app/venera?style=flat)](https://github.com/venera-app/venera/stargazers)
 [![Telegram](https://img.shields.io/badge/Telegram-2CA5E0?style=flat&logo=telegram&logoColor=white)](https://t.me/+Ws-IpmUutzkxMjhl)
 
 A comic reader that support reading local and network comics.
 
-## Features
+[<img src="https://fdroid.gitlab.io/artwork/badge/get-it-on.png"
+     alt="Get it on F-Droid"
+     height="75">](https://f-droid.org/packages/com.github.wgh136.venera/)
 
+## Features
 - Read local comics
 - Use javascript to create comic sources
 - Read comics from network sources
@@ -19,15 +21,13 @@ A comic reader that support reading local and network comics.
 - Login to comment, rate, and other operations if the source supports
 
 ## Build from source
-
 1. Clone the repository
 2. Install flutter, see [flutter.dev](https://flutter.dev/docs/get-started/install)
 3. Install rust, see [rustup.rs](https://rustup.rs/)
 4. Build for your platform: e.g. `flutter build apk`
 
 ## Create a new comic source
-
-See [venera-configs](https://github.com/venera-app/venera-configs)
+See [Comic Source](doc/comic_source.md)
 
 ## Thanks
 

android/.gitignore

@@ -11,3 +11,4 @@ GeneratedPluginRegistrant.java
 key.properties
 **/*.keystore
 **/*.jks
+/app/.cxx/

android/app/build.gradle

@@ -5,6 +5,8 @@ plugins {
     id "dev.flutter.flutter-gradle-plugin"
 }
 
+ext.abiCodes = ["armeabi-v7a": 1, "arm64-v8a": 2, "x86_64": 3]
+
 def localProperties = new Properties()
 def localPropertiesFile = rootProject.file("local.properties")
 if (localPropertiesFile.exists()) {
@@ -34,6 +36,8 @@ android {
 
     splits{
         abi {
+            reset()
+            include 'armeabi-v7a', 'arm64-v8a', 'x86_64'
             enable true
             universalApk true
         }
@@ -76,21 +80,44 @@ android {
     buildTypes {
         release {
             ndk {
-                abiFilters "armeabi-v7a", "arm64-v8a", "x86", "x86_64"
+                abiFilters "armeabi-v7a", "arm64-v8a", "x86_64"
             }
             signingConfig signingConfigs.release
-            applicationVariants.all { variant ->
-                variant.outputs.all { output ->
-                    def abi = output.getFilter(com.android.build.OutputFile.ABI)
-                    if (abi != null) {
-                        outputFileName = "venera-${variant.versionName}-${abi}.apk"
-                    } else {
-                        outputFileName = "venera-${variant.versionName}.apk"
+        }
+        debug {
+            ndk {
+                abiFilters "armeabi-v7a", "arm64-v8a", "x86_64"
+            }
+            signingConfig signingConfigs.debug
+        }
+    }
+
+    applicationVariants.all { variant ->
+        variant.outputs.all { output ->
+            def abi = output.getFilter(com.android.build.OutputFile.ABI)
+            if (variant.buildType.name == "release") {
+                if (abi != null) {
+                    outputFileName = "venera-${variant.versionName}-${abi}.apk"
+                    def abiVersionCode = project.ext.abiCodes.get(abi)
+                    if (abiVersionCode != null) {
+                        versionCodeOverride = variant.versionCode * 10 + abiVersionCode
                     }
+                } else {
+                    outputFileName = "venera-${variant.versionName}.apk"
+                    versionCodeOverride = variant.versionCode * 10
                 }
+            } else if (variant.buildType.name == "debug") {
+                versionCodeOverride = variant.versionCode * 10 + 4
             }
         }
     }
+
+    dependenciesInfo {
+        // Disables dependency metadata when building APKs.
+        includeInApk = false
+        // Disables dependency metadata when building Android App Bundles.
+        includeInBundle = false
+    }
 }
 
 flutter {

android/app/src/main/AndroidManifest.xml

@@ -53,6 +53,8 @@
         <meta-data
             android:name="flutterEmbedding"
             android:value="2" />
+        <!-- [flutter 3.27.1] Impeller is still worse than skia, disable it -->
+        <meta-data android:name="io.flutter.embedding.android.EnableImpeller" android:value="false"/>
     </application>
     <!-- Required to query activities that can process text, see:
          https://developer.android.com/training/package-visibility and

android/app/src/main/kotlin/com/github/wgh136/venera/MainActivity.kt

@@ -8,8 +8,8 @@ import android.content.pm.PackageManager
 import android.net.Uri
 import android.os.Build
 import android.os.Environment
-import android.provider.DocumentsContract
 import android.provider.Settings
+import android.util.Log
 import android.view.KeyEvent
 import androidx.activity.result.ActivityResultCallback
 import androidx.activity.result.ActivityResultLauncher
@@ -96,11 +96,7 @@ class MainActivity : FlutterFragmentActivity() {
                         if (pickedDirectoryUri == null)
                             res.success(null)
                         else
-                            try {
-                                res.success(onPickedDirectory(pickedDirectoryUri))
-                            } catch (e: Exception) {
-                                res.error("Failed to Copy Files", e.toString(), null)
-                            }
+                            onPickedDirectory(pickedDirectoryUri, res)
                     }
                 }
 
@@ -134,8 +130,9 @@ class MainActivity : FlutterFragmentActivity() {
         }
 
         val selectFileChannel = MethodChannel(flutterEngine.dartExecutor.binaryMessenger, "venera/select_file")
-        selectFileChannel.setMethodCallHandler { _, res ->
-            openFile(res)
+        selectFileChannel.setMethodCallHandler { req, res ->
+            val mimeType = req.arguments<String>()
+            openFile(res, mimeType!!)
         }
     }
 
@@ -166,26 +163,40 @@ class MainActivity : FlutterFragmentActivity() {
         return super.onKeyDown(keyCode, event)
     }
 
-    /// copy the directory to tmp directory, return copied directory
-    private fun onPickedDirectory(uri: Uri): String {
-        if (!hasStoragePermission()) {
-            // dart:io cannot access the directory without permission.
-            // so we need to copy the directory to cache directory
-            val contentResolver = contentResolver
-            var tmp = cacheDir
-            tmp = File(tmp, "getDirectoryPathTemp")
-            tmp.mkdir()
-            Thread {
-                copyDirectory(contentResolver, uri, tmp)
-            }.start()
-
-            return tmp.absolutePath
-        } else {
-            val docId = DocumentsContract.getTreeDocumentId(uri)
-            val split: Array<String?> = docId.split(":".toRegex()).dropLastWhile { it.isEmpty() }.toTypedArray()
-            return if ((split.size >= 2) && (split[1] != null)) split[1]!!
-            else File.separator
+    /// Ensure that the directory is accessible by dart:io
+    private fun onPickedDirectory(uri: Uri, result: MethodChannel.Result) {
+        if (hasStoragePermission()) {
+            var plain = uri.toString()
+            if(plain.contains("%3A")) {
+                plain = Uri.decode(plain)
+            }
+            val externalStoragePrefix = "content://com.android.externalstorage.documents/tree/primary:";
+            if(plain.startsWith(externalStoragePrefix)) {
+                val path = plain.substring(externalStoragePrefix.length)
+                result.success(Environment.getExternalStorageDirectory().absolutePath + "/" + path)
+            }
+            // The uri cannot be parsed to plain path, use copy method
         }
+        // dart:io cannot access the directory without permission.
+        // so we need to copy the directory to cache directory
+        val contentResolver = contentResolver
+        var tmp = cacheDir
+        var dirName = DocumentFile.fromTreeUri(this, uri)?.name
+        tmp = File(tmp, dirName!!)
+        if(tmp.exists()) {
+            tmp.deleteRecursively()
+        }
+        tmp.mkdir()
+        Thread {
+            try {
+                copyDirectory(contentResolver, uri, tmp)
+                result.success(tmp.absolutePath)
+            }
+            catch (e: Exception) {
+                result.error("copy error", e.message, null)
+            }
+        }.start()
+
     }
 
     private fun copyDirectory(resolver: ContentResolver, srcUri: Uri, destDir: File) {
@@ -197,11 +208,12 @@ class MainActivity : FlutterFragmentActivity() {
                 copyDirectory(resolver, file.uri, newDir)
             } else {
                 val newFile = File(destDir, file.name!!)
-                val inputStream = resolver.openInputStream(file.uri) ?: return
-                val outputStream = FileOutputStream(newFile)
-                inputStream.copyTo(outputStream)
-                inputStream.close()
-                outputStream.close()
+                resolver.openInputStream(file.uri)?.use { input ->
+                    FileOutputStream(newFile).use { output ->
+                        input.copyTo(output, bufferSize = DEFAULT_BUFFER_SIZE)
+                        output.flush()
+                    }
+                }
             }
         }
     }
@@ -277,10 +289,10 @@ class MainActivity : FlutterFragmentActivity() {
         }
     }
 
-    private fun openFile(result: MethodChannel.Result) {
+    private fun openFile(result: MethodChannel.Result, mimeType: String) {
         val intent = Intent(Intent.ACTION_OPEN_DOCUMENT)
         intent.addCategory(Intent.CATEGORY_OPENABLE)
-        intent.type = "*/*"
+        intent.type = mimeType
         startContractForResult(ActivityResultContracts.StartActivityForResult(), intent){ activityResult ->
             if (activityResult.resultCode != Activity.RESULT_OK) {
                 result.success(null)
@@ -312,20 +324,26 @@ class MainActivity : FlutterFragmentActivity() {
                     // ignore
                 }
             }
-            // copy file to cache directory
-            val cacheDir = cacheDir
-            val newFile = File(cacheDir, fileName)
-            val inputStream = contentResolver.openInputStream(uri)
-            if (inputStream == null) {
-                result.success(null)
-                return@startContractForResult
+            // use copy method
+            val tmp = File(cacheDir, fileName)
+            if(tmp.exists()) {
+                tmp.delete()
             }
-            val outputStream = FileOutputStream(newFile)
-            inputStream.copyTo(outputStream)
-            inputStream.close()
-            outputStream.close()
-            // send file path to flutter
-            result.success(newFile.absolutePath)
+            Log.i("Venera", "copy file (${fileName}) to ${tmp.absolutePath}")
+            Thread {
+                try {
+                    contentResolver.openInputStream(uri)?.use { input ->
+                        FileOutputStream(tmp).use { output ->
+                            input.copyTo(output, bufferSize = DEFAULT_BUFFER_SIZE)
+                            output.flush()
+                        }
+                    }
+                    result.success(tmp.absolutePath)
+                }
+                catch (e: Exception) {
+                    result.error("copy error", e.message, null)
+                }
+            }.start()
         }
     }
 }

android/gradle/wrapper/gradle-wrapper.properties

@@ -2,4 +2,4 @@ distributionBase=GRADLE_USER_HOME
 distributionPath=wrapper/dists
 zipStoreBase=GRADLE_USER_HOME
 zipStorePath=wrapper/dists
-distributionUrl=https\://services.gradle.org/distributions/gradle-8.2-all.zip
+distributionUrl=https\://services.gradle.org/distributions/gradle-8.4-all.zip

android/settings.gradle

@@ -18,7 +18,7 @@ pluginManagement {
 
 plugins {
     id "dev.flutter.flutter-plugin-loader" version "1.0.0"
-    id "com.android.application" version '8.2.1' apply false
+    id "com.android.application" version '8.3.2' apply false
     id "org.jetbrains.kotlin.android" version "1.8.10" apply false
 }
 

assets/init.js

@@ -4,6 +4,13 @@ Venera JavaScript Library
 This library provides a set of APIs for interacting with the Venera app.
 */
 
+function setTimeout(callback, delay) {
+    sendMessage({
+        method: 'delay',
+        time: delay,
+    }).then(callback);
+}
+
 /// encode, decode, hash, decrypt
 let Convert = {
     /**
@@ -486,6 +493,37 @@ let Network = {
     },
 };
 
+/**
+ * [fetch] function for sending HTTP requests. Same api as the browser fetch.
+ * @param url {string}
+ * @param [options] {{method?: string, headers?: Object, body?: any}}
+ * @returns {Promise<{ok: boolean, status: number, statusText: string, headers: {}, arrayBuffer: (function(): Promise<ArrayBuffer>), text: (function(): Promise<string>), json: (function(): Promise<any>)}>}
+ * @since 1.2.0
+ */
+async function fetch(url, options) {
+    let method = 'GET';
+    let headers = {};
+    let data = null;
+
+    if (options) {
+        method = options.method || method;
+        headers = options.headers || headers;
+        data = options.body || data;
+    }
+
+    let result = await Network.fetchBytes(method, url, headers, data);
+
+    return {
+        ok: result.status >= 200 && result.status < 300,
+        status: result.status,
+        statusText: '',
+        headers: result.headers,
+        arrayBuffer: async () => result.body,
+        text: async () => Convert.decodeUtf8(result.body),
+        json: async () => JSON.parse(Convert.decodeUtf8(result.body)),
+    }
+}
+
 /**
  * HtmlDocument class for parsing HTML and querying elements.
  */
@@ -877,11 +915,13 @@ function Comic({id, title, subtitle, subTitle, cover, tags, description, maxPage
 /**
  * Create a comic details object
  * @param title {string}
+ * @param subtitle {string}
+ * @param subTitle {string} - equal to subtitle
  * @param cover {string}
  * @param description {string?}
  * @param tags {Map<string, string[]> | {} | null | undefined}
- * @param chapters {Map<string, string> | {} | null | undefined}} - key: chapter id, value: chapter title
- * @param isFavorite {boolean | null | undefined}} - favorite status. If the comic source supports multiple folders, this field should be null
+ * @param chapters {Map<string, string> | {} | null | undefined} - key: chapter id, value: chapter title
+ * @param isFavorite {boolean | null | undefined} - favorite status.
  * @param subId {string?} - a param which is passed to comments api
  * @param thumbnails {string[]?} - for multiple page thumbnails, set this to null, and use `loadThumbnails` api to load thumbnails
  * @param recommend {Comic[]?} - related comics
@@ -894,10 +934,12 @@ function Comic({id, title, subtitle, subTitle, cover, tags, description, maxPage
  * @param url {string?}
  * @param stars {number?} - 0-5, double
  * @param maxPage {number?}
+ * @param comments {Comment[]?}- `since 1.0.7` App will display comments in the details page.
  * @constructor
  */
-function ComicDetails({title, cover, description, tags, chapters, isFavorite, subId, thumbnails, recommend, commentCount, likesCount, isLiked, uploader, updateTime, uploadTime, url, stars, maxPage}) {
+function ComicDetails({title, subtitle, subTitle, cover, description, tags, chapters, isFavorite, subId, thumbnails, recommend, commentCount, likesCount, isLiked, uploader, updateTime, uploadTime, url, stars, maxPage, comments}) {
     this.title = title;
+    this.subtitle = subtitle ?? subTitle;
     this.cover = cover;
     this.description = description;
     this.tags = tags;
@@ -915,6 +957,7 @@ function ComicDetails({title, cover, description, tags, chapters, isFavorite, su
     this.url = url;
     this.stars = stars;
     this.maxPage = maxPage;
+    this.comments = comments;
 }
 
 /**
@@ -1043,6 +1086,19 @@ class ComicSource {
         });
     }
 
+    translation = {}
+
+    /**
+     * Translate given string with the current locale using the translation object.
+     * @param key {string}
+     * @returns {string}
+     * @since 1.2.5
+     */
+    translate(key) {
+        let locale = APP.locale;
+        return this.translation[locale]?.[key] ?? key;
+    }
+
     init() { }
 
     static sources = {}
@@ -1161,3 +1217,144 @@ class Image {
         return new Image(key);
     }
 }
+
+/**
+ * UI related apis
+ * @since 1.2.0
+ */
+let UI = {
+    /**
+     * Show a message
+     * @param message {string}
+     */
+    showMessage: (message) => {
+        sendMessage({
+            method: 'UI',
+            function: 'showMessage',
+            message: message,
+        })
+    },
+
+    /**
+     * Show a dialog. Any action will close the dialog.
+     * @param title {string}
+     * @param content {string}
+     * @param actions {{text:string, callback: () => void | Promise<void>, style: "text"|"filled"|"danger"}[]} - If callback returns a promise, the button will show a loading indicator until the promise is resolved.
+     * @returns {Promise<void>} - Resolved when the dialog is closed.
+     * @since 1.2.1
+     */
+    showDialog: (title, content, actions) => {
+        sendMessage({
+            method: 'UI',
+            function: 'showDialog',
+            title: title,
+            content: content,
+            actions: actions,
+        })
+    },
+
+    /**
+     * Open [url] in external browser
+     * @param url {string}
+     */
+    launchUrl: (url) => {
+        sendMessage({
+            method: 'UI',
+            function: 'launchUrl',
+            url: url,
+        })
+    },
+
+    /**
+     * Show a loading dialog.
+     * @param onCancel {() => void | null | undefined} - Called when the loading dialog is canceled. If [onCancel] is null, the dialog cannot be canceled by the user.
+     * @returns {number} - A number that can be used to cancel the loading dialog.
+     * @since 1.2.1
+     */
+    showLoading: (onCancel) => {
+        return sendMessage({
+            method: 'UI',
+            function: 'showLoading',
+            onCancel: onCancel
+        })
+    },
+
+    /**
+     * Cancel a loading dialog.
+     * @param id {number} - returned by [showLoading]
+     * @since 1.2.1
+     */
+    cancelLoading: (id) => {
+        sendMessage({
+            method: 'UI',
+            function: 'cancelLoading',
+            id: id
+        })
+    },
+
+    /**
+     * Show an input dialog
+     * @param title {string}
+     * @param validator {(string) => string | null | undefined} - A function that validates the input. If the function returns a string, the dialog will show the error message.
+     * @returns {Promise<string | null>} - The input value. If the dialog is canceled, return null.
+     */
+    showInputDialog: (title, validator) => {
+        return sendMessage({
+            method: 'UI',
+            function: 'showInputDialog',
+            title: title,
+            validator: validator
+        })
+    },
+
+    /**
+     * Show a select dialog
+     * @param title {string}
+     * @param options {string[]}
+     * @param initialIndex {number?}
+     * @returns {Promise<number | null>} - The selected index. If the dialog is canceled, return null.
+     */
+    showSelectDialog: (title, options, initialIndex) => {
+        return sendMessage({
+            method: 'UI',
+            function: 'showSelectDialog',
+            title: title,
+            options: options,
+            initialIndex: initialIndex
+        })
+    }
+}
+
+/**
+ * App related apis
+ * @since 1.2.1
+ */
+let APP = {
+    /**
+     * Get the app version
+     * @returns {string} - The app version
+     */
+    get version() {
+        return appVersion // defined in the engine
+    },
+
+    /**
+     * Get current app locale
+     * @returns {string} - The app locale, in the format of [languageCode]_[countryCode]
+     */
+    get locale() {
+        return sendMessage({
+            method: 'getLocale'
+        })
+    },
+
+    /**
+     * Get current running platform
+     * @returns {string} - The platform name, "android", "ios", "windows", "macos", "linux"
+     */
+    get platform() {
+        return sendMessage({
+            method: 'getPlatform'
+        })
+    }
+}

assets/translation.json

@@ -18,7 +18,7 @@
     "help": "帮助",
     "Select": "选择",
     "Selected @a comics": "已选择 @a 部漫画",
-    "Imported @a comics": "已导入 @a 部漫画",
+    "Imported @a comics, loaded @b pages, received @c comics": "已导入 @a 部漫画, 加载 @b 页, 接收到 @c 部漫画",
     "Downloading": "下载中",
     "Back": "后退",
     "Delete": "删除",
@@ -41,9 +41,15 @@
     "Select a folder": "选择一个文件夹",
     "Folder": "文件夹",
     "Confirm": "确认",
-    "Are you sure you want to delete this comic?": "您确定要删除这部漫画吗？",
-    "Are you sure you want to delete @a selected comics?": "您确定要删除 @a 部漫画吗？",
+    "Reversed successfully": "反转成功",
+    "Remove comic from favorite?": "从收藏中移除漫画？",
+    "Move": "移动",
+    "Move to folder": "移动到文件夹",
+    "Copy to folder": "复制到文件夹",
+    "Delete Comic": "删除漫画",
+    "Delete @c comics?": "删除 @c 本漫画？",
     "Add comic source": "添加漫画源",
+    "Delete comic source '@n' ?": "删除漫画源 '@n' ？",
     "Select file": "选择文件",
     "View list": "查看列表",
     "Open help": "打开帮助",
@@ -100,6 +106,8 @@
     "Continuous (Right to Left)": "连续（从右到左）",
     "Continuous (Top to Bottom)": "连续（从上到下）",
     "Auto page turning interval": "自动翻页间隔",
+    "The number of pic in screen for landscape (Only Gallery Mode)": "横屏同屏幕图片数量(仅画廊模式)",
+    "The number of pic in screen for portrait (Only Gallery Mode)": "竖屏同屏幕图片数量(仅画廊模式)",
     "Theme Mode": "主题模式",
     "System": "系统",
     "Light": "浅色",
@@ -132,7 +140,8 @@
     "Block": "屏蔽",
     "Add new favorite to": "添加新收藏到",
     "Move favorite after reading": "阅读后移动收藏",
-    "Are you sure you want to delete this folder?" : "确定要删除这个收藏夹吗？",
+    "Delete folder?" : "删除文件夹?",
+    "Delete folder '@f' ?" : "删除文件夹 '@f' ?",
     "Import from file": "从文件导入",
     "Failed to import": "导入失败",
     "Cache Limit": "缓存限制",
@@ -140,14 +149,9 @@
     "Size in MB": "大小（MB）",
     "Select a directory which contains the comic directories." : "选择一个包含漫画文件夹的目录",
     "Help": "帮助",
-    "A directory is considered as a comic only if it matches one of the following conditions:" : "只有当目录满足以下条件之一时，才被视为漫画：",
-    "1. The directory only contains image files." : "1. 目录只包含图片文件。",
-    "2. The directory contains directories which contain image files. Each directory is considered as a chapter." : "2. 目录包含多个包含图片文件的目录。每个目录被视为一个章节。",
-    "If the directory contains a file named 'cover.*', it will be used as the cover image. Otherwise the first image will be used." : "如果目录包含一个名为'cover.*'的文件，它将被用作封面图片。否则将使用第一张图片。",
-    "The directory name will be used as the comic title. And the name of chapter directories will be used as the chapter titles.\n" : "目录名称将被用作漫画标题。章节目录的名称将被用作章节标题。\n",
     "Export as cbz": "导出为cbz",
-    "Select a cbz file." : "选择一个cbz文件",
-    "A cbz file" : "一个cbz文件",
+    "Select an archive file (cbz, zip, 7z, cb7)" : "选择一个归档文件 (cbz, zip, 7z, cb7)",
+    "An archive file" : "一个归档文件",
     "Fullscreen": "全屏",
     "Exit": "退出",
     "View more": "查看更多",
@@ -186,6 +190,7 @@
     "Operation": "操作",
     "Upload": "上传",
     "Saved": "已保存",
+    "Saved Failed": "保存失败",
     "Sync Data": "同步数据",
     "Syncing Data": "正在同步数据",
     "Data Sync": "数据同步",
@@ -211,11 +216,10 @@
     "Create Folder": "新建文件夹",
     "Select an image on screen": "选择屏幕上的图片",
     "Added @count comics to download queue.": "已添加 @count 本漫画到下载队列",
-    "Ignore Certificate Errors": "忽略证书错误",
     "Authorization Required": "需要身份验证",
     "Sync": "同步",
     "The folder is Linked to @source": "文件夹已关联到 @source",
-    "Source Folder": "源收藏夹",
+    "Source Folder": "源文件夹",
     "Use a config file": "使用配置文件",
     "Comic Source list": "漫画源列表",
     "View": "查看",
@@ -227,9 +231,143 @@
     "Clear History": "清除历史",
     "Are you sure you want to clear your history?": "确定要清除您的历史记录吗？",
     "No Explore Pages": "没有探索页面",
-    "Add a comic source in home page": "在主页添加一个漫画源",
+    "Please add some sources": "请添加一些源",
     "Please check your settings": "请检查您的设置",
-    "No Category Pages": "没有分类页面"
+    "No Category Pages": "没有分类页面",
+    "Chapter @ep": "第 @ep 章",
+    "Page @page": "第 @page 页",
+    "Also remove files on disk": "同时删除磁盘上的文件",
+    "Copy to app local path": "将漫画复制到本地存储目录中",
+    "Delete all unavailable local favorite items": "删除所有无效的本地收藏",
+    "Deleted @a favorite items.": "已删除 @a 条无效收藏",
+    "New version available": "有新版本可用",
+    "A new version is available. Do you want to update now?" : "有新版本可用。您要现在更新吗？",
+    "No new version available": "没有新版本可用",
+    "Export as pdf": "导出为pdf",
+    "Export as epub": "导出为epub",
+    "Aggregated Search": "聚合搜索",
+    "Local comic collection is not supported at present": "本地收藏暂不支持",
+    "The cover cannot be uncollected here": "封面不能在此取消收藏",
+    "Uncollected the image": "取消收藏图片",
+    "Successfully collected": "收藏成功",
+    "Collect the image": "收藏图片",
+    "Quick collect image": "快速收藏图片",
+    "Not enable": "不启用",
+    "Double Tap": "双击",
+    "Swipe": "滑动",
+    "On the image browsing page, you can quickly collect images by sliding horizontally or vertically according to your reading mode": "在图片浏览页面, 你可以根据你的阅读模式横滑或者竖滑快速收藏图片",
+    "Calculate your favorite from @a comics and @b images": "从 @a 本漫画和 @b 张图片中, 计算你最喜欢的",
+    "After the parentheses are the number of pictures or the number of pictures compared to the number of comic pages": "括号后是图片数量或图片数比漫画页数",
+    "The chapter order of the comic may have changed, temporarily not supported for collection": "漫画的章节顺序可能发生了变化, 暂不支持收藏此章节",
+    "Author: ": "作者: ",
+    "Tags: ": "标签: ",
+    "Comics(number): ": "漫画(数量): ",
+    "Comics(percentage): ": "漫画(比例): ",
+    "Time Filter": "时间筛选",
+    "Image Favorites Greater Than": "图片收藏数大于",
+    "Collection time": "收藏时间",
+    "favoritesCompareComicPages": "收藏数与漫画页数比较",
+    "Cover": "封面",
+    "Page @a": "第 @a 页",
+    "Time Asc": "时间升序",
+    "Time Desc": "时间降序",
+    "Favorite Num": "收藏数",
+    "Favorite Num Compare Comic Pages": "收藏数比漫画页数",
+    "All": "全部",
+    "Last Week": "上周",
+    "Last Month": "上月",
+    "Last Half Year": "半年",
+    "Last Year": "一年",
+    "Filter": "筛选",
+    "Image Favorites": "图片收藏",
+    "Title": "标题",
+    "@a Cover": "@a 封面",
+    "Photo View": "图片浏览",
+    "Delete @a images": "删除 @a 张图片",
+    "Update the page number by the latest collection": "按最新收藏更新页数",
+    "Copy the title successfully": "复制标题成功",
+    "The comic is invalid, please long press to delete, you can double click the title to copy": "该漫画已失效, 请长按删除, 可以双击标题进行复制",
+    "No search results found": "未找到搜索结果",
+    "Added @c comics to download queue." : "已添加 @c 本漫画到下载队列",
+    "Download started": "下载已开始",
+    "Click favorite": "点击收藏",
+    "End": "末尾",
+    "None": "无",
+    "View Detail": "查看详情",
+    "Select a directory which contains multiple archive files." : "选择一个包含多个归档文件的目录",
+    "Multiple archive files" : "多个归档文件",
+    "No valid comics found" : "未找到有效的漫画",
+    "Enable DNS Overrides": "启用DNS覆写",
+    "DNS Overrides": "DNS覆写",
+    "Custom Image Processing": "自定义图片处理",
+    "Enable": "启用",
+    "Aggregated": "聚合",
+    "Default Search Target": "默认搜索目标",
+    "Auto Language Filters": "自动语言筛选",
+    "Check for updates on startup": "启动时检查更新",
+    "Start Time": "开始时间",
+    "End Time": "结束时间",
+    "Custom": "自定义",
+    "Reset": "重置",
+    "Tags": "标签",
+    "Authors": "作者",
+    "Comics": "漫画",
+    "Imported @a comics": "已导入 @a 本漫画",
+    "New Version": "新版本",
+    "@c updates": "@c 项更新",
+    "No updates": "无更新",
+    "Set comic source list url": "设置漫画源列表URL",
+    "Deselect All": "取消全选",
+    "Add keyword": "添加关键词",
+    "Keyword": "关键词",
+    "Manage": "管理",
+    "Verify": "验证",
+    "Cloudflare verification required": "需要Cloudflare验证",
+    "Success": "成功",
+    "Compressing": "压缩中",
+    "Exporting": "导出中",
+    "Search Sources": "搜索源",
+    "Removed": "已移除",
+    "Added to favorites": "已添加到收藏",
+    "Not added": "未添加",
+    "Create a folder": "新建收藏夹",
+    "Created successfully": "创建成功",
+    "name": "名称",
+    "Reverse tap to turn Pages": "反转点击翻页",
+    "Show all": "显示全部",
+    "Number of images preloaded": "预加载图片数量",
+    "Ascending": "升序",
+    "Descending": "降序",
+    "Last Reading": "上次阅读",
+    "Replies": "回复",
+    "Follow Updates": "追更",
+    "Not Configured": "未配置",
+    "Choose a folder to follow updates." : "选择一个文件夹以追更",
+    "Choose Folder": "选择文件夹",
+    "No folders available": "没有可用的文件夹",
+    "Updating comics...": "更新漫画中...",
+    "Automatic update checking enabled." : "已启用自动更新检查",
+    "The app will check for updates at most once a day." : "APP将每天最多检查一次更新",
+    "Change Folder": "更改文件夹",
+    "Check Now": "立即检查",
+    "Updates": "更新",
+    "No updates found": "未找到更新",
+    "All Comics": "全部漫画",
+    "The comic will be marked as no updates as soon as you read it.": "漫画将在您阅读后立即标记为无更新",
+    "Disable": "禁用",
+    "Once the operation is successful, app will automatically sync data with the server.": "操作成功后, APP将自动与服务器同步数据",
+    "Cache cleared": "缓存已清除",
+    "Disabled": "已禁用",
+    "WebDAV Auto Sync": "WebDAV 自动同步",
+    "Mark all as read": "全部标记为已读",
+    "Do you want to mark all as read?" : "您要全部标记为已读吗？",
+    "Swipe down for previous chapter": "向下滑动查看上一章",
+    "Swipe up for next chapter": "向上滑动查看下一章",
+    "Initial Page": "初始页面",
+    "Home Page": "主页",
+    "Favorites Page": "收藏页面",
+    "Explore Page": "探索页面",
+    "Categories Page": "分类页面"
   },
   "zh_TW": {
     "Home": "首頁",
@@ -239,7 +377,7 @@
     "Settings": "設定",
     "Search": "搜尋",
     "History": "歷史",
-    "Local": "本地",
+    "Local": "本機",
     "Import": "匯入",
     "Comic Source": "漫畫源",
     "Accounts": "帳戶",
@@ -251,14 +389,14 @@
     "help": "幫助",
     "Select": "選擇",
     "Selected @a comics": "已選擇 @a 部漫畫",
-    "Imported @a comics": "已匯入 @a 部漫畫",
+    "Imported @a comics, loaded @b pages, received @c comics": "已匯入 @a 部漫畫, 載入 @b 頁, 接收到 @c 部漫畫",
     "Downloading": "下載中",
     "Back": "後退",
     "Delete": "刪除",
     "Full Screen": "全螢幕",
     "Auto Page Turning": "自動翻頁",
     "Chapters": "章節",
-    "Save Image": "保存圖片",
+    "Save Image": "儲存圖片",
     "Share": "分享",
     "Details": "詳情",
     "Description": "描述",
@@ -266,18 +404,23 @@
     "Add to favorites": "加入收藏",
     "Error": "錯誤",
     "Retry": "重試",
-    "Folders": "文件夾",
-    "Delete Folder": "刪除文件夾",
+    "Folders": "資料夾",
+    "Delete Folder": "刪除資料夾",
     "Rename": "重新命名",
     "Reorder": "重新排序",
     "Network": "網路",
     "more": "更多",
-    "Select a folder": "選擇一個文件夾",
-    "Folder": "文件夾",
+    "Select a folder": "選擇一個資料夾",
+    "Folder": "資料夾",
     "Confirm": "確認",
-    "Are you sure you want to delete this comic?": "您確定要刪除這部漫畫嗎？",
-    "Are you sure you want to delete @a selected comics?": "您確定要刪除 @a 部漫畫嗎？",
+    "Remove comic from favorite?": "從收藏中移除漫畫？",
+    "Move": "移動",
+    "Move to folder": "移動到資料夾",
+    "Copy to folder": "複製到資料夾",
+    "Delete Comic": "刪除漫畫",
+    "Delete @c comics?": "刪除 @c 本漫畫？",
     "Add comic source": "添加漫畫源",
+    "Delete comic source '@n' ?": "刪除漫畫源 '@n' ？",
     "Select file": "選擇文件",
     "View list": "查看列表",
     "Open help": "打開幫助",
@@ -285,43 +428,43 @@
     "Check updates": "檢查更新",
     "Edit": "編輯",
     "Update": "更新",
-    "Log in": "登錄",
+    "Log in": "登入",
     "Log out": "登出",
-    "Re-login": "重新登錄",
-    "Click if login expired": "點擊此處如果登錄已過期",
-    "Login": "登錄",
-    "Username": "用戶名",
+    "Re-login": "重新登入",
+    "Click if login expired": "點擊此處如果登入已過期",
+    "Login": "登入",
+    "Username": "使用者名稱",
     "Password": "密碼",
     "Continue": "繼續",
-    "Create Account": "創建帳戶",
+    "Create Account": "建立帳戶",
     "Next": "前進",
-    "Login with webview": "通過網頁登錄",
+    "Login with webview": "透過網頁登入",
     "Read": "閱讀",
     "Download": "下載",
     "Favorite": "收藏",
     "Comments": "評論",
-    "Information": "信息",
+    "Information": "資訊",
     "Uploader": "上傳者",
     "Upload Time": "上傳時間",
     "Preview": "預覽",
     "Comment": "評論",
     "Submit": "提交",
     "Add": "添加",
-    "New Folder": "新建文件夾",
+    "New Folder": "建立資料夾",
     "Reading": "閱讀中",
     "Appearance": "外觀",
-    "Local Favorites": "本地收藏",
+    "Local Favorites": "本機收藏",
     "APP": "應用",
     "About": "關於",
-    "Display mode of comic tile": "漫畫縮略圖的顯示模式",
+    "Display mode of comic tile": "漫畫縮圖的顯示模式",
     "Detailed": "詳細",
     "Brief": "簡潔",
-    "Size of comic tile": "漫畫縮略圖的大小",
+    "Size of comic tile": "漫畫縮圖的大小",
     "Explore Pages": "探索頁面",
     "Category Pages": "分類頁面",
-    "Show favorite status on comic tile": "在漫畫縮略圖上顯示收藏狀態",
-    "Show history on comic tile": "在漫畫縮略圖上顯示歷史記錄",
-    "Keyword blocking": "關鍵詞屏蔽",
+    "Show favorite status on comic tile": "在漫畫縮圖上顯示收藏狀態",
+    "Show history on comic tile": "在漫畫縮圖上顯示歷史記錄",
+    "Keyword blocking": "關鍵字封鎖",
     "Tap to turn Pages": "點擊翻頁",
     "Page animation": "頁面動畫",
     "Reading mode": "閱讀模式",
@@ -332,9 +475,11 @@
     "Continuous (Right to Left)": "連續（從右到左）",
     "Continuous (Top to Bottom)": "連續（從上到下）",
     "Auto page turning interval": "自動翻頁間隔",
+    "The number of pic in screen for landscape (Only Gallery Mode)": "橫向同螢幕圖片數量(僅畫廊模式)",
+    "The number of pic in screen for portrait (Only Gallery Mode)": "直向同螢幕圖片數量(僅畫廊模式)",
     "Theme Mode": "主題模式",
     "System": "系統",
-    "Light": "浅色",
+    "Light": "淺色",
     "Dark": "深色",
     "Theme Color": "主題顏色",
     "Red": "紅色",
@@ -344,42 +489,38 @@
     "Orange": "橙色",
     "Blue": "藍色",
     "App": "應用",
-    "Data": "數據",
-    "Storage Path for local comics": "本地漫畫的存儲路徑",
-    "Set New Storage Path": "設置新的存儲路徑",
-    "Set": "設置",
-    "Cache Size": "緩存大小",
-    "Clear Cache": "清除緩存",
+    "Data": "資料",
+    "Storage Path for local comics": "本機漫畫的儲存路徑",
+    "Set New Storage Path": "設定新的儲存路徑",
+    "Set": "設定",
+    "Cache Size": "快取大小",
+    "Clear Cache": "清除快取",
     "Clear": "清除",
     "Log": "日誌",
     "Open Log": "打開日誌",
     "Open": "打開",
-    "User": "用戶",
+    "User": "使用者",
     "Language": "語言",
     "Proxy": "代理",
     "Venera is a free and open-source app for comic reading.": "Venera是一個免費的開源漫畫閱讀應用。",
     "Check for updates": "檢查更新",
     "Check": "檢查",
     "Network Favorite Pages": "網路收藏頁面",
-    "Block": "屏蔽",
+    "Block": "封鎖",
     "Add new favorite to": "添加新收藏到",
     "Move favorite after reading": "閱讀後移動收藏",
-    "Are you sure you want to delete this folder?" : "確定要刪除這個收藏夾嗎？",
+    "Delete folder?" : "刪除資料夾？",
+    "Delete folder '@f' ?" : "刪除資料夾 '@f' ？",
     "Import from file": "從文件匯入",
     "Failed to import": "匯入失敗",
-    "Cache Limit": "緩存限制",
-    "Set Cache Limit": "設置緩存限制",
+    "Cache Limit": "快取限制",
+    "Set Cache Limit": "設定快取限制",
     "Size in MB": "大小（MB）",
-    "Select a directory which contains the comic directories." : "選擇一個包含漫畫文件夾的目錄",
+    "Select a directory which contains the comic directories." : "選擇一個包含漫畫資料夾的目錄",
     "Help": "幫助",
-    "A directory is considered as a comic only if it matches one of the following conditions:" : "只有當目錄滿足以下條件之一時，才被視為漫畫：",
-    "1. The directory only contains image files." : "1. 目錄只包含圖片文件。",
-    "2. The directory contains directories which contain image files. Each directory is considered as a chapter." : "2. 目錄包含多個包含圖片文件的目錄。每個目錄被視為一個章節。",
-    "If the directory contains a file named 'cover.*', it will be used as the cover image. Otherwise the first image will be used." : "如果目錄包含一個名為'cover.*'的文件，它將被用作封面圖片。否則將使用第一張圖片。",
-    "The directory name will be used as the comic title. And the name of chapter directories will be used as the chapter titles.\n" : "目錄名稱將被用作漫畫標題。章節目錄的名稱將被用作章節標題。\n",
     "Export as cbz": "匯出為cbz",
-    "Select a cbz file." : "選擇一個cbz文件",
-    "A cbz file" : "一個cbz文件",
+    "Select an archive file (cbz, zip, 7z, cb7)" : "選擇一個歸檔文件 (cbz, zip, 7z, cb7)",
+    "An archive file" : "一個歸檔文件",
     "Fullscreen": "全螢幕",
     "Exit": "退出",
     "View more": "查看更多",
@@ -388,15 +529,16 @@
     "Date": "日期",
     "Date Desc": "日期降序",
     "Start": "開始",
-    "Export App Data": "匯出應用數據",
-    "Import App Data": "匯入應用數據",
+    "Reversed successfully": "反轉成功",
+    "Export App Data": "匯出應用資料",
+    "Import App Data": "匯入應用資料",
     "Export": "匯出",
-    "Download Threads": "下載線程數",
+    "Download Threads": "下載執行緒數",
     "Update Time": "更新時間",
     "Copy ID": "複製ID",
     "Copy URL": "複製URL",
-    "Create": "創建",
-    "Folder Name": "文件夾名稱",
+    "Create": "建立",
+    "Folder Name": "資料夾名稱",
     "Ranking": "排行",
     "Download Selected": "下載選中",
     "Download All": "下載全部",
@@ -407,9 +549,9 @@
     "Updates Available": "更新可用",
     "Unselected": "未選擇",
     "Long press and drag to reorder.": "長按並拖動以重新排序。",
-    "Limit image width": "限制圖片寬度",
+    "Limit image width": "限製圖片寬度",
     "When using Continuous(Top to Bottom) mode": "當使用連續（從上到下）模式",
-    "Open link": "打開鏈接",
+    "Open link": "打開連結",
     "Open comic": "打開漫畫",
     "Move To First": "移動到最前",
     "Cancel": "取消",
@@ -417,15 +559,16 @@
     "Pause": "暫停",
     "Operation": "操作",
     "Upload": "上傳",
-    "Saved": "已保存",
-    "Sync Data": "同步數據",
-    "Syncing Data": "正在同步數據",
-    "Data Sync": "數據同步",
+    "Saved": "已儲存",
+    "Saved Failed": "儲存失敗",
+    "Sync Data": "同步資料",
+    "Syncing Data": "正在同步資料",
+    "Data Sync": "資料同步",
     "Quick Favorite": "快速收藏",
-    "Long press on the favorite button to quickly add to this folder": "長按收藏按鈕快速添加到這個文件夾",
+    "Long press on the favorite button to quickly add to this folder": "長按收藏按鈕快速添加到這個資料夾",
     "Added": "已添加",
     "Turn page by volume keys": "使用音量鍵翻頁",
-    "Display time & battery info in reader": "在閱讀器中顯示時間和電量信息",
+    "Display time & battery info in reader": "在閱讀器中顯示時間和電量資訊",
     "EhViewer downloads": "EhViewer下載",
     "Select an EhViewer database and a download folder.": "選擇EhViewer的下載資料（匯出的db檔案）與存放下載內容的目錄",
     "(EhViewer)Default": "(EhViewer)預設",
@@ -439,28 +582,161 @@
     "Select in range": "區間選擇",
     "Finished": "已完成",
     "Updating": "更新中",
-    "Update Comics Info": "更新漫畫信息",
-    "Create Folder": "新建文件夾",
-    "Select an image on screen": "選擇屏幕上的圖片",
-    "Added @count comics to download queue.": "已添加 @count 本漫畫到下載隊列",
-    "Ignore Certificate Errors": "忽略證書錯誤",
+    "Update Comics Info": "更新漫畫資訊",
+    "Create Folder": "建立資料夾",
+    "Select an image on screen": "選擇螢幕上的圖片",
+    "Added @count comics to download queue.": "已添加 @count 本漫畫到下載佇列",
     "Authorization Required": "需要身份驗證",
     "Sync": "同步",
-    "The folder is Linked to @source": "文件夾已關聯到 @source",
-    "Source Folder": "源收藏夾",
-    "Use a config file": "使用配置文件",
+    "The folder is Linked to @source": "資料夾已關聯到 @source",
+    "Source Folder": "來源資料夾",
+    "Use a config file": "使用設定檔",
     "Comic Source list": "漫畫源列表",
     "View": "查看",
     "Copy": "複製",
     "Copied": "已複製",
-    "Search History": "搜索歷史",
-    "Clear Search History": "清除搜索歷史",
-    "Search in": "搜索於",
+    "Search History": "搜尋歷史",
+    "Clear Search History": "清除搜尋歷史",
+    "Search in": "搜尋於",
     "Clear History": "清除歷史",
     "Are you sure you want to clear your history?": "確定要清除您的歷史記錄嗎？",
     "No Explore Pages": "沒有探索頁面",
-    "Add a comic source in home page": "在主頁添加一個漫畫源",
+    "Please add some sources": "請添加一些源",
     "Please check your settings": "請檢查您的設定",
-    "No Category Pages": "沒有分類頁面"
+    "No Category Pages": "沒有分類頁面",
+    "Chapter @ep": "第 @ep 章",
+    "Page @page": "第 @page 頁",
+    "Also remove files on disk": "同時刪除磁碟上的文件",
+    "Copy to app local path": "將漫畫複製到本機儲存目錄中",
+    "Delete all unavailable local favorite items": "刪除所有無效的本機收藏",
+    "Deleted @a favorite items.": "已刪除 @a 條無效收藏",
+    "New version available": "有新版本可用",
+    "A new version is available. Do you want to update now?" : "有新版本可用。您要現在更新嗎？",
+    "No new version available": "沒有新版本可用",
+    "Export as pdf": "匯出為pdf",
+    "Export as epub": "匯出為epub",
+    "Aggregated Search": "聚合搜尋",
+    "No search results found": "未找到搜尋結果",
+    "Added @c comics to download queue." : "已添加 @c 本漫畫到下載佇列",
+    "Download started": "下載已開始",
+    "Click favorite": "點擊收藏",
+    "Local comic collection is not supported at present": "本機收藏暫不支援",
+    "The cover cannot be uncollected here": "封面不能在此取消收藏",
+    "Uncollected the image": "取消收藏圖片",
+    "Successfully collected": "收藏成功",
+    "Collect the image": "收藏圖片",
+    "Quick collect image": "快速收藏圖片",
+    "On the image browsing page, you can quickly collect images by sliding horizontally or vertically according to your reading mode": "在圖片瀏覽頁面, 你可以根據你的閱讀模式橫向或者縱向滑動快速收藏圖片",
+    "Calculate your favorite from @a comics and @b images": "從 @a 本漫畫和 @b 張圖片中, 計算你最喜歡的",
+    "After the parentheses are the number of pictures or the number of pictures compared to the number of comic pages": "括號後是圖片數量或圖片數比漫畫頁數",
+    "The chapter order of the comic may have changed, temporarily not supported for collection": "漫畫的章節順序可能發生了變化, 暫不支援收藏此章節",
+    "Author: ": "作者: ",
+    "Tags: ": "標籤: ",
+    "Comics(number): ": "漫畫(數量): ",
+    "Comics(percentage): ": "漫畫(比例): ",
+    "Time Filter": "時間篩選",
+    "Image Favorites Greater Than": "圖片收藏數大於",
+    "Collection time": "收藏時間",
+    "Not enable": "不啟用",
+    "Double Tap": "雙擊",
+    "Swipe": "滑動",
+    "favoritesCompareComicPages": "收藏數與漫畫頁數比較",
+    "Cover": "封面",
+    "Page @a": "第 @a 頁",
+    "Time Asc": "時間升序",
+    "Time Desc": "時間降序",
+    "Favorite Num": "收藏數",
+    "Favorite Num Compare Comic Pages": "收藏數比漫畫頁數",
+    "All": "全部",
+    "Last Week": "上週",
+    "Last Month": "上月",
+    "Last Half Year": "半年",
+    "Last Year": "一年",
+    "Filter": "篩選",
+    "Image Favorites": "圖片收藏",
+    "Title": "標題",
+    "@a Cover": "@a 封面",
+    "Photo View": "圖片瀏覽",
+    "Delete @a images": "刪除 @a 張圖片",
+    "Update the page number by the latest collection": "按最新收藏更新頁數",
+    "Copy the title successfully": "複製標題成功",
+    "The comic is invalid, please long press to delete, you can double click the title to copy": "該漫畫已失效, 請長按刪除, 可以雙擊標題進行複製",
+    "End": "末尾",
+    "None": "無",
+    "View Detail": "查看詳情",
+    "Select a directory which contains multiple archive files." : "選擇一個包含多個歸檔文件的目錄",
+    "Multiple archive files" : "多個歸檔文件",
+    "No valid comics found" : "未找到有效的漫畫",
+    "Enable DNS Overrides": "啟用DNS覆寫",
+    "DNS Overrides": "DNS覆寫",
+    "Custom Image Processing": "自訂圖片處理",
+    "Enable": "啟用",
+    "Aggregated": "聚合",
+    "Default Search Target": "預設搜尋目標",
+    "Auto Language Filters": "自動語言篩選",
+    "Check for updates on startup": "啟動時檢查更新",
+    "Start Time": "開始時間",
+    "End Time": "結束時間",
+    "Custom": "自訂",
+    "Reset": "重設",
+    "Tags": "標籤",
+    "Authors": "作者",
+    "Comics": "漫畫",
+    "Imported @a comics": "已匯入 @a 部漫畫",
+    "New Version": "新版本",
+    "@c updates": "@c 項更新",
+    "No updates": "無更新",
+    "Set comic source list url": "設定漫畫源列表URL",
+    "Deselect All": "取消全選",
+    "Add keyword": "添加關鍵字",
+    "Keyword": "關鍵字",
+    "Manage": "管理",
+    "Verify": "驗證",
+    "Cloudflare verification required": "需要Cloudflare驗證",
+    "Success": "成功",
+    "Compressing": "壓縮中",
+    "Exporting": "匯出中",
+    "Search Sources": "搜尋源",
+    "Removed": "已移除",
+    "Added to favorites": "已添加到收藏",
+    "Not added": "未添加",
+    "Create a folder": "建立收藏夾",
+    "Created successfully": "建立成功",
+    "name": "名稱",
+    "Reverse tap to turn Pages": "反轉點擊翻頁",
+    "Show all": "顯示全部",
+    "Number of images preloaded": "預載入圖片數量",
+    "Ascending": "升序",
+    "Descending": "降序",
+    "Last Reading": "上次閱讀",
+    "Replies": "回覆",
+    "Follow Updates": "追更",
+    "Not Configured": "未配置",
+    "Choose a folder to follow updates." : "選擇一個資料夾以追更",
+    "Choose Folder": "選擇資料夾",
+    "No folders available": "沒有可用的資料夾",
+    "Updating comics...": "更新漫畫中...",
+    "Automatic update checking enabled." : "已啟用自動更新檢查",
+    "The app will check for updates at most once a day." : "APP將每天最多檢查一次更新",
+    "Change Folder": "更改資料夾",
+    "Check Now": "立即檢查",
+    "Updates": "更新",
+    "No updates found": "未找到更新",
+    "All Comics": "全部漫畫",
+    "The comic will be marked as no updates as soon as you read it.": "漫畫將在您閱讀後立即標記為無更新",
+    "Disable": "停用",
+    "Once the operation is successful, app will automatically sync data with the server.": "操作成功後, APP將自動與服務器同步數據",
+    "Cache cleared": "緩存已清除",
+    "Disabled": "已禁用",
+    "WebDAV Auto Sync": "WebDAV 自動同步",
+    "Mark all as read": "全部標記為已讀",
+    "Do you want to mark all as read?" : "您要全部標記為已讀嗎？",
+    "Swipe down for previous chapter": "向下滑動查看上一章",
+    "Swipe up for next chapter": "向上滑動查看下一章",
+    "Initial Page": "初始頁面",
+    "Home Page": "主頁",
+    "Favorites Page": "收藏頁面",
+    "Explore Page": "探索頁面",
+    "Categories Page": "分類頁面"
   }
 }

debian/build.py

@@ -1,5 +1,7 @@
 import subprocess
+import sys
 
+arch = sys.argv[1]
 debianContent = ''
 desktopContent = ''
 version = ''
@@ -12,7 +14,14 @@ with open('pubspec.yaml', 'r') as f:
     version = str.split(str.split(f.read(), 'version: ')[1], '+')[0]
 
 with open('debian/debian.yaml', 'w') as f:
-    f.write(debianContent.replace('{{Version}}', version))
+    content = debianContent.replace('{{Version}}', version)
+    if arch == 'x64':
+        content = content.replace('{{Arch}}', 'x64')
+        content = content.replace('{{Architecture}}', 'amd64')
+    elif arch == 'arm64':
+        content = content.replace('{{Arch}}', 'arm64')
+        content = content.replace('{{Architecture}}', 'arm64')
+    f.write(content)
 with open('debian/gui/venera.desktop', 'w') as f:
     f.write(desktopContent.replace('{{Version}}', version))
 

debian/debian.yaml

@@ -1,13 +1,13 @@
 flutter_app: 
   command: venera
-  arch: x64
+  arch: {{Arch}}
   parent: /usr/local/lib
-  nonInteractive: false
+  nonInteractive: true
 
 control:
   Package: venera
   Version: {{Version}}
-  Architecture: amd64
+  Architecture: {{Architecture}}
   Priority: optional
   Depends: libwebkit2gtk-4.1-0, libgtk-3-0
   Maintainer: nyne

debian/gui/venera.desktop

@@ -1,5 +1,4 @@
 [Desktop Entry]
-Version={{Version}}
 Name=Venera
 GenericName=Venera
 Comment=venera
@@ -7,3 +6,4 @@ Terminal=false
 Type=Application
 Categories=Utility
 Keywords=Flutter;comic;images;
+Icon=venera

doc/comic_source.md

@@ -0,0 +1,655 @@
+# Comic Source
+
+## Introduction
+
+Venera is a comic reader that can read comics from various sources. 
+
+All comic sources are written in javascript. 
+Venera uses [flutter_qjs](https://github.com/wgh136/flutter_qjs) as js engine which is forked from [ekibun](https://github.com/ekibun/flutter_qjs).
+
+This document will describe how to write a comic source for Venera.
+
+## Preparation
+
+- Install Venera. Using flutter to run the project is recommended since it's easier to debug.
+- An editor that supports javascript.
+- Download template and venera javascript api from [here](https://github.com/venera-app/venera-configs).
+
+## Start Writing
+
+The template contains detailed comments and examples. You can refer to it when writing your own comic source.
+
+Here is a brief introduction to the template:
+
+> Note: Javascript api document is [here](js_api.md).
+
+### Write basic information
+
+```javascript
+class NewComicSource extends ComicSource {
+    // Note: The fields which are marked as [Optional] should be removed if not used
+
+    // name of the source
+    name = ""
+
+    // unique id of the source
+    key = ""
+
+    version = "1.0.0"
+
+    minAppVersion = "1.0.0"
+
+    // update url
+    url = ""
+// ...
+}
+```
+
+In this part, you need to do the following:
+- Change the class name to your source name.
+- Fill in the name, key, version, minAppVersion, and url fields.
+
+### init function
+
+```javascript
+    /**
+     * [Optional] init function
+     */
+    init() {
+
+    }
+```
+
+The function will be called when the source is initialized. You can do some initialization work here.
+
+Remove this function if not used.
+
+### Account
+
+```javascript
+// [Optional] account related
+    account = {
+        /**
+         * [Optional] login with account and password, return any value to indicate success
+         * @param account {string}
+         * @param pwd {string}
+         * @returns {Promise<any>}
+         */
+        login: async (account, pwd) => {
+
+        },
+
+        /**
+         * [Optional] login with webview
+         */
+        loginWithWebview: {
+            url: "",
+            /**
+             * check login status
+             * @param url {string} - current url
+             * @param title {string} - current title
+             * @returns {boolean} - return true if login success
+             */
+            checkStatus: (url, title) => {
+
+            },
+            /**
+             * [Optional] Callback when login success
+             */
+            onLoginSuccess: () => {
+
+            },
+        },
+
+        /**
+         * [Optional] login with cookies
+         * Note: If `this.account.login` is implemented, this will be ignored
+         */
+        loginWithCookies: {
+            fields: [
+                "ipb_member_id",
+                "ipb_pass_hash",
+                "igneous",
+                "star",
+            ],
+            /**
+             * Validate cookies, return false if cookies are invalid.
+             *
+             * Use `Network.setCookies` to set cookies before validate.
+             * @param values {string[]} - same order as `fields`
+             * @returns {Promise<boolean>}
+             */
+            validate: async (values) => {
+
+            },
+        },
+
+        /**
+         * logout function, clear account related data
+         */
+        logout: () => {
+
+        },
+
+        // {string?} - register url
+        registerWebsite: null
+    }
+```
+
+In this part, you can implement login, logout, and register functions.
+
+Remove this part if not used.
+
+### Explore page
+
+```javascript
+    // explore page list
+    explore = [
+        {
+            // title of the page.
+            // title is used to identify the page, it should be unique
+            title: "",
+
+            /// multiPartPage or multiPageComicList or mixed
+            type: "multiPartPage",
+
+            /**
+             * load function
+             * @param page {number | null} - page number, null for `singlePageWithMultiPart` type
+             * @returns {{}}
+             * - for `multiPartPage` type, return {title: string, comics: Comic[], viewMore: string?}[]
+             * - for `multiPageComicList` type, for each page(1-based), return {comics: Comic[], maxPage: number}
+             * - for `mixed` type, use param `page` as index. for each index(0-based), return {data: [], maxPage: number?}, data is an array contains Comic[] or {title: string, comics: Comic[], viewMore: string?}
+             */
+            load: async (page) => {
+
+            },
+
+            /**
+             * Only use for `multiPageComicList` type.
+             * `loadNext` would be ignored if `load` function is implemented.
+             * @param next {string | null} - next page token, null if first page
+             * @returns {Promise<{comics: Comic[], next: string?}>} - next is null if no next page.
+             */
+            loadNext(next) {},
+        }
+    ]
+```
+
+In this part, you can implement the explore page.
+
+A comic source can have multiple explore pages.
+
+There are three types of explore pages:
+- multiPartPage: An explore page contains multiple parts, each part contains multiple comics.
+- multiPageComicList: An explore page contains multiple comics, the comics are loaded page by page.
+- mixed: An explore page contains multiple parts, each part can be a list of comics or a block of comics which have a title and a view more button.
+
+### Category Page
+
+```javascript
+    // categories
+    category = {
+        /// title of the category page, used to identify the page, it should be unique
+        title: "",
+        parts: [
+            {
+                // title of the part
+                name: "Theme",
+
+                // fixed or random
+                // if random, need to provide `randomNumber` field, which indicates the number of comics to display at the same time
+                type: "fixed",
+
+                // number of comics to display at the same time
+                // randomNumber: 5,
+
+                categories: ["All", "Adventure", "School"],
+
+                // category or search
+                // if `category`, use categoryComics.load to load comics
+                // if `search`, use search.load to load comics
+                itemType: "category",
+
+                // [Optional] {string[]?} must have same length as categories, used to provide loading param for each category
+                categoryParams: ["all", "adventure", "school"],
+
+                // [Optional] {string} cannot be used with `categoryParams`, set all category params to this value
+                groupParam: null,
+            }
+        ],
+        // enable ranking page
+        enableRankingPage: false,
+    }
+```
+
+Category page is a static page that contains multiple parts, each part contains multiple categories.
+
+A comic source can only have one category page.
+
+### Category Comics Page
+
+```javascript
+    /// category comic loading related
+    categoryComics = {
+        /**
+         * load comics of a category
+         * @param category {string} - category name
+         * @param param {string?} - category param
+         * @param options {string[]} - options from optionList
+         * @param page {number} - page number
+         * @returns {Promise<{comics: Comic[], maxPage: number}>}
+         */
+        load: async (category, param, options, page) => {
+
+        },
+        // provide options for category comic loading
+        optionList: [
+            {
+                // For a single option, use `-` to separate the value and text, left for value, right for text
+                options: [
+                    "newToOld-New to Old",
+                    "oldToNew-Old to New"
+                ],
+                // [Optional] {string[]} - show this option only when the value not in the list
+                notShowWhen: null,
+                // [Optional] {string[]} - show this option only when the value in the list
+                showWhen: null
+            }
+        ],
+        ranking: {
+            // For a single option, use `-` to separate the value and text, left for value, right for text
+            options: [
+                "day-Day",
+                "week-Week"
+            ],
+            /**
+             * load ranking comics
+             * @param option {string} - option from optionList
+             * @param page {number} - page number
+             * @returns {Promise<{comics: Comic[], maxPage: number}>}
+             */
+            load: async (option, page) => {
+
+            }
+        }
+    }
+```
+
+When user clicks on a category, the category comics page will be displayed.
+
+This part is used to load comics of a category.
+
+### Search
+
+```javascript
+    /// search related
+    search = {
+        /**
+         * load search result
+         * @param keyword {string}
+         * @param options {(string | null)[]} - options from optionList
+         * @param page {number}
+         * @returns {Promise<{comics: Comic[], maxPage: number}>}
+         */
+        load: async (keyword, options, page) => {
+
+        },
+
+        /**
+         * load search result with next page token.
+         * The field will be ignored if `load` function is implemented.
+         * @param keyword {string}
+         * @param options {(string)[]} - options from optionList
+         * @param next {string | null}
+         * @returns {Promise<{comics: Comic[], maxPage: number}>}
+         */
+        loadNext: async (keyword, options, next) => {
+
+        },
+
+        // provide options for search
+        optionList: [
+            {
+                // [Optional] default is `select`
+                // type: select, multi-select, dropdown
+                // For select, there is only one selected value
+                // For multi-select, there are multiple selected values or none. The `load` function will receive a json string which is an array of selected values
+                // For dropdown, there is one selected value at most. If no selected value, the `load` function will receive a null
+                type: "select",
+                // For a single option, use `-` to separate the value and text, left for value, right for text
+                options: [
+                    "0-time",
+                    "1-popular"
+                ],
+                // option label
+                label: "sort",
+                // default selected options
+                default: null,
+            }
+        ],
+
+        // enable tags suggestions
+        enableTagsSuggestions: false,
+    }
+```
+
+This part is used to load search results.
+
+`load` and `loadNext` functions are used to load search results. 
+If `load` function is implemented, `loadNext` function will be ignored.
+
+### Favorites
+
+```javascript
+    // favorite related
+    favorites = {
+        // whether support multi folders
+        multiFolder: false,
+        /**
+         * add or delete favorite.
+         * throw `Login expired` to indicate login expired, App will automatically re-login and re-add/delete favorite
+         * @param comicId {string}
+         * @param folderId {string}
+         * @param isAdding {boolean} - true for add, false for delete
+         * @param favoriteId {string?} - [Comic.favoriteId]
+         * @returns {Promise<any>} - return any value to indicate success
+         */
+        addOrDelFavorite: async (comicId, folderId, isAdding, favoriteId) => {
+            
+        },
+        /**
+         * load favorite folders.
+         * throw `Login expired` to indicate login expired, App will automatically re-login retry.
+         * if comicId is not null, return favorite folders which contains the comic.
+         * @param comicId {string?}
+         * @returns {Promise<{folders: {[p: string]: string}, favorited: string[]}>} - `folders` is a map of folder id to folder name, `favorited` is a list of folder id which contains the comic
+         */
+        loadFolders: async (comicId) => {
+
+        },
+        /**
+         * add a folder
+         * @param name {string}
+         * @returns {Promise<any>} - return any value to indicate success
+         */
+        addFolder: async (name) => {
+
+        },
+        /**
+         * delete a folder
+         * @param folderId {string}
+         * @returns {Promise<void>} - return any value to indicate success
+         */
+        deleteFolder: async (folderId) => {
+
+        },
+        /**
+         * load comics in a folder
+         * throw `Login expired` to indicate login expired, App will automatically re-login retry.
+         * @param page {number}
+         * @param folder {string?} - folder id, null for non-multi-folder
+         * @returns {Promise<{comics: Comic[], maxPage: number}>}
+         */
+        loadComics: async (page, folder) => {
+
+        },
+        /**
+         * load comics with next page token
+         * @param next {string | null} - next page token, null for first page
+         * @param folder {string}
+         * @returns {Promise<{comics: Comic[], next: string?}>}
+         */
+        loadNext: async (next, folder) => {
+
+        },
+    }
+```
+
+This part is used to manage network favorites of the source.
+
+`load` and `loadNext` functions are used to load search results.
+If `load` function is implemented, `loadNext` function will be ignored.
+
+### Comic Details
+
+```javascript
+    /// single comic related
+    comic = {
+        /**
+         * load comic info
+         * @param id {string}
+         * @returns {Promise<ComicDetails>}
+         */
+        loadInfo: async (id) => {
+
+        },
+        /**
+         * [Optional] load thumbnails of a comic
+         *
+         * To render a part of an image as thumbnail, return `${url}@x=${start}-${end}&y=${start}-${end}`
+         * - If width is not provided, use full width
+         * - If height is not provided, use full height
+         * @param id {string}
+         * @param next {string?} - next page token, null for first page
+         * @returns {Promise<{thumbnails: string[], next: string?}>} - `next` is next page token, null for no more
+         */
+        loadThumbnails: async (id, next) => {
+
+        },
+
+        /**
+         * rate a comic
+         * @param id
+         * @param rating {number} - [0-10] app use 5 stars, 1 rating = 0.5 stars,
+         * @returns {Promise<any>} - return any value to indicate success
+         */
+        starRating: async (id, rating) => {
+
+        },
+
+        /**
+         * load images of a chapter
+         * @param comicId {string}
+         * @param epId {string?}
+         * @returns {Promise<{images: string[]}>}
+         */
+        loadEp: async (comicId, epId) => {
+
+        },
+        /**
+         * [Optional] provide configs for an image loading
+         * @param url
+         * @param comicId
+         * @param epId
+         * @returns {ImageLoadingConfig | Promise<ImageLoadingConfig>}
+         */
+        onImageLoad: (url, comicId, epId) => {
+            return {}
+        },
+        /**
+         * [Optional] provide configs for a thumbnail loading
+         * @param url {string}
+         * @returns {ImageLoadingConfig | Promise<ImageLoadingConfig>}
+         *
+         * `ImageLoadingConfig.modifyImage` and `ImageLoadingConfig.onLoadFailed` will be ignored.
+         * They are not supported for thumbnails.
+         */
+        onThumbnailLoad: (url) => {
+            return {}
+        },
+        /**
+         * [Optional] like or unlike a comic
+         * @param id {string}
+         * @param isLike {boolean} - true for like, false for unlike
+         * @returns {Promise<void>}
+         */
+        likeComic: async (id, isLike) =>  {
+
+        },
+        /**
+         * [Optional] load comments
+         *
+         * Since app version 1.0.6, rich text is supported in comments.
+         * Following html tags are supported: ['a', 'b', 'i', 'u', 's', 'br', 'span', 'img'].
+         * span tag supports style attribute, but only support font-weight, font-style, text-decoration.
+         * All images will be placed at the end of the comment.
+         * Auto link detection is enabled, but only http/https links are supported.
+         * @param comicId {string}
+         * @param subId {string?} - ComicDetails.subId
+         * @param page {number}
+         * @param replyTo {string?} - commentId to reply, not null when reply to a comment
+         * @returns {Promise<{comments: Comment[], maxPage: number?}>}
+         */
+        loadComments: async (comicId, subId, page, replyTo) => {
+
+        },
+        /**
+         * [Optional] send a comment, return any value to indicate success
+         * @param comicId {string}
+         * @param subId {string?} - ComicDetails.subId
+         * @param content {string}
+         * @param replyTo {string?} - commentId to reply, not null when reply to a comment
+         * @returns {Promise<any>}
+         */
+        sendComment: async (comicId, subId, content, replyTo) => {
+
+        },
+        /**
+         * [Optional] like or unlike a comment
+         * @param comicId {string}
+         * @param subId {string?} - ComicDetails.subId
+         * @param commentId {string}
+         * @param isLike {boolean} - true for like, false for unlike
+         * @returns {Promise<void>}
+         */
+        likeComment: async (comicId, subId, commentId, isLike) => {
+
+        },
+        /**
+         * [Optional] vote a comment
+         * @param id {string} - comicId
+         * @param subId {string?} - ComicDetails.subId
+         * @param commentId {string} - commentId
+         * @param isUp {boolean} - true for up, false for down
+         * @param isCancel {boolean} - true for cancel, false for vote
+         * @returns {Promise<number>} - new score
+         */
+        voteComment: async (id, subId, commentId, isUp, isCancel) => {
+
+        },
+        // {string?} - regex string, used to identify comic id from user input
+        idMatch: null,
+        /**
+         * [Optional] Handle tag click event
+         * @param namespace {string}
+         * @param tag {string}
+         * @returns {{action: string, keyword: string, param: string?}}
+         */
+        onClickTag: (namespace, tag) => {
+
+        },
+        /**
+         * [Optional] Handle links
+         */
+        link: {
+            /**
+             * set accepted domains
+             */
+            domains: [
+                'example.com'
+            ],
+            /**
+             * parse url to comic id
+             * @param url {string}
+             * @returns {string | null}
+             */
+            linkToId: (url) => {
+
+            }
+        },
+        // enable tags translate
+        enableTagsTranslate: false,
+    }
+
+```
+
+This part is used to load comic details.
+
+### Settings
+
+```javascript
+    /*
+    [Optional] settings related
+    Use this.loadSetting to load setting
+    ```
+    let setting1Value = this.loadSetting('setting1')
+    console.log(setting1Value)
+    ```
+     */
+    settings = {
+        setting1: {
+            // title
+            title: "Setting1",
+            // type: input, select, switch
+            type: "select",
+            // options
+            options: [
+                {
+                    // value
+                    value: 'o1',
+                    // [Optional] text, if not set, use value as text
+                    text: 'Option 1',
+                },
+            ],
+            default: 'o1',
+        },
+        setting2: {
+            title: "Setting2",
+            type: "switch",
+            default: true,
+        },
+        setting3: {
+            title: "Setting3",
+            type: "input",
+            validator: null, // string | null, regex string
+            default: '',
+        },
+        setting4: {
+            title: "Setting4",
+            type: "callback",
+            buttonText: "Click me",
+            /**
+             * callback function
+             *
+             * If the callback function returns a Promise, the button will show a loading indicator until the promise is resolved.
+             * @returns {void | Promise<any>}
+             */
+            callback: () => {
+                // do something
+            }
+        }
+    }
+```
+
+This part is used to provide settings for the source.
+
+
+### Translations
+
+```javascript
+    // [Optional] translations for the strings in this config
+    translation = {
+        'zh_CN': {
+            'Setting1': '设置1',
+            'Setting2': '设置2',
+            'Setting3': '设置3',
+        },
+        'zh_TW': {},
+        'en': {}
+    }
+```
+
+This part is used to provide translations for the source.
+
+> Note: strings in the UI api will not be translated automatically. You need to translate them manually.

doc/import_comic.md

@@ -0,0 +1,61 @@
+# Import Comic
+
+## Introduction
+
+Venera supports importing comics from local files.
+However, the comic files must be in a specific format.
+
+## Comic Directory
+
+A directory considered as a comic directory only if it follows one of the following two types of structure:
+
+**Without Chapter**
+
+```
+comic_directory
+├── cover.[ext]
+├── img1.[ext]
+├── img2.[ext]
+├── img3.[ext]
+├── ...
+```
+
+**With Chapter**
+
+```
+comic_directory
+├── cover.[ext]
+├── chapter1
+│   ├── img1.[ext]
+│   ├── img2.[ext]
+│   ├── img3.[ext]
+│   ├── ...
+├── chapter2
+│   ├── img1.[ext]
+│   ├── img2.[ext]
+│   ├── img3.[ext]
+│   ├── ...
+├── ...
+```
+
+The file name can be anything, but the extension must be a valid image extension.
+
+The page order is determined by the file name. App will sort the files by name and display them in that order.
+
+Cover image is optional. 
+If there is a file named `cover.[ext]` in the directory, it will be considered as the cover image.
+Otherwise, the first image will be considered as the cover image.
+
+The name of directory will be used as comic title. And the name of chapter directory will be used as chapter title.
+
+## Archive
+
+Venera supports importing comics from archive files.
+
+The archive file must follow [Comic Book Archive](https://en.wikipedia.org/wiki/Comic_book_archive_file) format.
+
+Currently, Venera supports the following archive formats:
+- `.cbz`
+- `.cb7`
+- `.zip`
+- `.7z`

doc/js_api.md

@@ -0,0 +1,513 @@
+# Javascript API
+
+## Overview
+
+The Javascript API is a set of functions that used to interact application.
+
+There are following parts in the API:
+- [Convert](#Convert)
+- [Network](#Network)
+- [Html](#Html)
+- [UI](#UI)
+- [Utils](#Utils)
+- [Types](#Types)
+
+
+## Convert
+
+Convert is a set of functions that used to convert data between different types.
+
+### `Convert.encodeUtf8(str: string): ArrayBuffer`
+
+Convert a string to an ArrayBuffer.
+
+### `Convert.decodeUtf8(value: ArrayBuffer): string`
+
+Convert an ArrayBuffer to a string.
+
+### `Convert.encodeBase64(value: ArrayBuffer): string`
+
+Convert an ArrayBuffer to a base64 string.
+
+### `Convert.decodeBase64(value: string): ArrayBuffer`
+
+Convert a base64 string to an ArrayBuffer.
+
+### `Convert.md5(value: ArrayBuffer): ArrayBuffer`
+
+Calculate the md5 hash of an ArrayBuffer.
+
+### `Convert.sha1(value: ArrayBuffer): ArrayBuffer`
+
+Calculate the sha1 hash of an ArrayBuffer.
+
+### `Convert.sha256(value: ArrayBuffer): ArrayBuffer`
+
+Calculate the sha256 hash of an ArrayBuffer.
+
+### `Convert.sha512(value: ArrayBuffer): ArrayBuffer`
+
+Calculate the sha512 hash of an ArrayBuffer.
+
+### `Convert.hmac(key: ArrayBuffer, value: ArrayBuffer, hash: string): ArrayBuffer`
+
+Calculate the hmac hash of an ArrayBuffer.
+
+### `Convert.hmacString(key: ArrayBuffer, value: ArrayBuffer, hash: string): string`
+
+Calculate the hmac hash of an ArrayBuffer and return a string.
+
+### `Convert.decryptAesEcb(value: ArrayBuffer, key: ArrayBuffer): ArrayBuffer`
+
+Decrypt an ArrayBuffer with AES ECB mode.
+
+### `Convert.decryptAesCbc(value: ArrayBuffer, key: ArrayBuffer, iv: ArrayBuffer): ArrayBuffer`
+
+Decrypt an ArrayBuffer with AES CBC mode.
+
+### `Convert.decryptAesCfb(value: ArrayBuffer, key: ArrayBuffer, iv: ArrayBuffer): ArrayBuffer`
+
+Decrypt an ArrayBuffer with AES CFB mode.
+
+### `Convert.decryptAesOfb(value: ArrayBuffer, key: ArrayBuffer, iv: ArrayBuffer): ArrayBuffer`
+
+Decrypt an ArrayBuffer with AES OFB mode.
+
+### `Convert.decryptRsa(value: ArrayBuffer, key: ArrayBuffer): ArrayBuffer`
+
+Decrypt an ArrayBuffer with RSA.
+
+### `Convert.hexEncode(value: ArrayBuffer): string`
+
+Convert an ArrayBuffer to a hex string.
+
+## Network
+
+Network is a set of functions that used to send network requests and manage network resources.
+
+### `Network.fetchBytes(method: string, url: string, headers: object, data: ArrayBuffer): Promise<{status: number, headers: object, body: ArrayBuffer}>`
+
+Send a network request and return the response as an ArrayBuffer.
+
+### `Network.sendRequest(method: string, url: string, headers: object, data: ArrayBuffer): Promise<{status: number, headers: object, body: string}>`
+
+Send a network request and return the response as a string.
+
+### `Network.get(url: string, headers: object): Promise<{status: number, headers: object, body: string}>`
+
+Send a GET request and return the response as a string.
+
+### `Network.post(url: string, headers: object, data: ArrayBuffer): Promise<{status: number, headers: object, body: string}>`
+
+Send a POST request and return the response as a string.
+
+### `Network.put(url: string, headers: object, data: ArrayBuffer): Promise<{status: number, headers: object, body: string}>`
+
+Send a PUT request and return the response as a string.
+
+### `Network.delete(url: string, headers: object): Promise<{status: number, headers: object, body: string}>`
+
+Send a DELETE request and return the response as a string.
+
+### `Network.patch(url: string, headers: object, data: ArrayBuffer): Promise<{status: number, headers: object, body: string}>`
+
+Send a PATCH request and return the response as a string.
+
+### `Network.setCookies(url: string, cookies: Cookie[]): void`
+
+Set cookies for a specific url.
+
+### `Network.getCookies(url: string): Cookie[]`
+
+Get cookies for a specific url.
+
+### `Network.deleteCookies(url: string): void`
+
+Delete cookies for a specific url.
+
+### `fetch`
+
+The fetch function is a wrapper of the `Network.fetchBytes` function. Same as the `fetch` function in the browser.
+
+## Html
+
+Api for parsing HTML.
+
+### `new HtmlDocument(html: string): HtmlDocument`
+
+Create a HtmlDocument object from a html string.
+
+### `HtmlDocument.querySelector(selector: string): HtmlElement`
+
+Find the first element that matches the selector.
+
+### `HtmlDocument.querySelectorAll(selector: string): HtmlElement[]`
+
+Find all elements that match the selector.
+
+### `HtmlDocument.getElementById(id: string): HtmlElement`
+
+Find the element with the id.
+
+### `HtmlDocument.dispose(): void`
+
+Dispose the HtmlDocument object.
+
+### `HtmlElement.querySelector(selector: string): HtmlElement`
+
+Find the first element that matches the selector.
+
+### `HtmlElement.querySelectorAll(selector: string): HtmlElement[]`
+
+Find all elements that match the selector.
+
+### `HtmlElement.getElementById(id: string): HtmlElement`
+
+Find the element with the id.
+
+### `get HtmlElement.text(): string`
+
+Get the text content of the element.
+
+### `get HtmlElement.attributes(): object`
+
+Get the attributes of the element.
+
+### `get HtmlElement.children(): HtmlElement[]`
+
+Get the children
+
+### `get HtmlElement.nodes(): HtmlNode[]`
+
+Get the child nodes
+
+### `get HtmlElement.parent(): HtmlElement | null`
+
+Get the parent element
+
+### `get HtmlElement.innerHtml(): string`
+
+Get the inner html
+
+### `get HtmlElement.classNames(): string[]`
+
+Get the class names
+
+### `get HtmlElement.id(): string | null`
+
+Get the id
+
+### `get HtmlElement.localName(): string`
+
+Get the local name
+
+### `get HtmlElement.previousSibling(): HtmlElement | null`
+
+Get the previous sibling
+
+### `get HtmlElement.nextSibling(): HtmlElement | null`
+
+Get the next sibling
+
+### `get HtmlNode.type(): string`
+
+Get the node type ("text", "element", "comment", "document", "unknown")
+
+### `HtmlNode.toElement(): HtmlElement | null`
+
+Convert the node to an element
+
+### `get HtmlNode.text(): string`
+
+Get the text content of the node
+
+## UI
+
+### `UI.showMessage(message: string): void`
+
+Show a message.
+
+### `UI.showDialog(title: string, content: string, actions: {text: string, callback: () => void | Promise<void>, style: "text"|"filled"|"danger"}[]): void`
+
+Show a dialog. Any action will close the dialog.
+
+### `UI.launchUrl(url: string): void`
+
+Open a url in external browser.
+
+### `UI.showLoading(onCancel: () => void | null | undefined): number`
+
+Show a loading dialog.
+
+### `UI.cancelLoading(id: number): void`
+
+Cancel a loading dialog.
+
+### `UI.showInputDialog(title: string, validator: (string) => string | null | undefined): string | null`
+
+Show an input dialog.
+
+### `UI.showSelectDialog(title: string, options: string[], initialIndex?: number): number | null`
+
+Show a select dialog.
+
+## Utils
+
+### `createUuid(): string`
+
+create a time-based uuid.
+
+### `randomInt(min: number, max: number): number`
+
+Generate a random integer between min and max.
+
+### `randomDouble(min: number, max: number): number`
+
+Generate a random double between min and max.
+
+### console
+
+Send log to application console. Same api as the browser console.
+
+## Types
+
+### `Cookie`
+
+```javascript
+/**
+ * Create a cookie object.
+ * @param name {string}
+ * @param value {string}
+ * @param domain {string}
+ * @constructor
+ */
+function Cookie({name, value, domain}) {
+    this.name = name;
+    this.value = value;
+    this.domain = domain;
+}
+```
+
+### `Comic`
+
+```javascript
+/**
+ * Create a comic object
+ * @param id {string}
+ * @param title {string}
+ * @param subtitle {string}
+ * @param subTitle {string} - equal to subtitle
+ * @param cover {string}
+ * @param tags {string[]}
+ * @param description {string}
+ * @param maxPage {number?}
+ * @param language {string?}
+ * @param favoriteId {string?} - Only set this field if the comic is from favorites page
+ * @param stars {number?} - 0-5, double
+ * @constructor
+ */
+function Comic({id, title, subtitle, subTitle, cover, tags, description, maxPage, language, favoriteId, stars}) {
+    this.id = id;
+    this.title = title;
+    this.subtitle = subtitle;
+    this.subTitle = subTitle;
+    this.cover = cover;
+    this.tags = tags;
+    this.description = description;
+    this.maxPage = maxPage;
+    this.language = language;
+    this.favoriteId = favoriteId;
+    this.stars = stars;
+}
+```
+
+### `ComicDetails`
+```javascript
+/**
+ * Create a comic details object
+ * @param title {string}
+ * @param subtitle {string}
+ * @param subTitle {string} - equal to subtitle
+ * @param cover {string}
+ * @param description {string?}
+ * @param tags {Map<string, string[]> | {} | null | undefined}
+ * @param chapters {Map<string, string> | {} | null | undefined} - key: chapter id, value: chapter title
+ * @param isFavorite {boolean | null | undefined} - favorite status. If the comic source supports multiple folders, this field should be null
+ * @param subId {string?} - a param which is passed to comments api
+ * @param thumbnails {string[]?} - for multiple page thumbnails, set this to null, and use `loadThumbnails` api to load thumbnails
+ * @param recommend {Comic[]?} - related comics
+ * @param commentCount {number?}
+ * @param likesCount {number?}
+ * @param isLiked {boolean?}
+ * @param uploader {string?}
+ * @param updateTime {string?}
+ * @param uploadTime {string?}
+ * @param url {string?}
+ * @param stars {number?} - 0-5, double
+ * @param maxPage {number?}
+ * @param comments {Comment[]?}- `since 1.0.7` App will display comments in the details page.
+ * @constructor
+ */
+function ComicDetails({title, subtitle, subTitle, cover, description, tags, chapters, isFavorite, subId, thumbnails, recommend, commentCount, likesCount, isLiked, uploader, updateTime, uploadTime, url, stars, maxPage, comments}) {
+    this.title = title;
+    this.subtitle = subtitle ?? subTitle;
+    this.cover = cover;
+    this.description = description;
+    this.tags = tags;
+    this.chapters = chapters;
+    this.isFavorite = isFavorite;
+    this.subId = subId;
+    this.thumbnails = thumbnails;
+    this.recommend = recommend;
+    this.commentCount = commentCount;
+    this.likesCount = likesCount;
+    this.isLiked = isLiked;
+    this.uploader = uploader;
+    this.updateTime = updateTime;
+    this.uploadTime = uploadTime;
+    this.url = url;
+    this.stars = stars;
+    this.maxPage = maxPage;
+    this.comments = comments;
+}
+```
+
+### `Comment`
+```javascript
+/**
+ * Create a comment object
+ * @param userName {string}
+ * @param avatar {string?}
+ * @param content {string}
+ * @param time {string?}
+ * @param replyCount {number?}
+ * @param id {string?}
+ * @param isLiked {boolean?}
+ * @param score {number?}
+ * @param voteStatus {number?} - 1: upvote, -1: downvote, 0: none
+ * @constructor
+ */
+function Comment({userName, avatar, content, time, replyCount, id, isLiked, score, voteStatus}) {
+    this.userName = userName;
+    this.avatar = avatar;
+    this.content = content;
+    this.time = time;
+    this.replyCount = replyCount;
+    this.id = id;
+    this.isLiked = isLiked;
+    this.score = score;
+    this.voteStatus = voteStatus;
+}
+```
+
+### `ImageLoadingConfig`
+```javascript
+/**
+ * Create image loading config
+ * @param url {string?}
+ * @param method {string?} - http method, uppercase
+ * @param data {any} - request data, may be null
+ * @param headers {Object?} - request headers
+ * @param onResponse {((ArrayBuffer) => ArrayBuffer)?} - modify response data
+ * @param modifyImage {string?}
+ *  A js script string.
+ *  The script will be executed in a new Isolate.
+ *  A function named `modifyImage` should be defined in the script, which receives an [Image] as the only argument, and returns an [Image]..
+ * @param onLoadFailed {(() => ImageLoadingConfig)?} - called when the image loading failed
+ * @constructor
+ * @since 1.0.5
+ *
+ * To keep the compatibility with the old version, do not use the constructor. Consider creating a new object with the properties directly.
+ */
+function ImageLoadingConfig({url, method, data, headers, onResponse, modifyImage, onLoadFailed}) {
+    this.url = url;
+    this.method = method;
+    this.data = data;
+    this.headers = headers;
+    this.onResponse = onResponse;
+    this.modifyImage = modifyImage;
+    this.onLoadFailed = onLoadFailed;
+}
+```
+
+### `ComicSource`
+```javascript
+class ComicSource {
+    name = ""
+
+    key = ""
+
+    version = ""
+
+    minAppVersion = ""
+
+    url = ""
+
+    /**
+     * load data with its key
+     * @param {string} dataKey
+     * @returns {any}
+     */
+    loadData(dataKey) {
+        return sendMessage({
+            method: 'load_data',
+            key: this.key,
+            data_key: dataKey
+        })
+    }
+
+    /**
+     * load a setting with its key
+     * @param key {string}
+     * @returns {any}
+     */
+    loadSetting(key) {
+        return sendMessage({
+            method: 'load_setting',
+            key: this.key,
+            setting_key: key
+        })
+    }
+
+    /**
+     * save data
+     * @param {string} dataKey
+     * @param data
+     */
+    saveData(dataKey, data) {
+        return sendMessage({
+            method: 'save_data',
+            key: this.key,
+            data_key: dataKey,
+            data: data
+        })
+    }
+
+    /**
+     * delete data
+     * @param {string} dataKey
+     */
+    deleteData(dataKey) {
+        return sendMessage({
+            method: 'delete_data',
+            key: this.key,
+            data_key: dataKey,
+        })
+    }
+
+    /**
+     *
+     * @returns {boolean}
+     */
+    get isLogged() {
+        return sendMessage({
+            method: 'isLogged',
+            key: this.key,
+        });
+    }
+
+    init() { }
+
+    static sources = {}
+}
+```

fastlane/metadata/android/en-US/full_description.txt

@@ -0,0 +1,15 @@
+<p>A comic reader that support reading local and network comics.</p>
+<h3>Features</h3>
+<ul>
+<li>Read local comics</li>
+<li>Use javascript to create comic sources</li>
+<li>Read comics from network sources</li>
+<li>Manage favorite comics</li>
+<li>Download comics</li>
+<li>View comments, tags, and other information of comics if the source supports</li>
+<li>Login to comment, rate, and other operations if the source supports</li>
+</ul>
+<h3>Thanks</h3>
+<h4>Tags Translation</h4>
+<li><a href="https://github.com/EhTagTranslation/Database">github.com/EhTagTranslation/Database</a></li>
+<p>The Chinese translation of the manga tags is from this project.</p>

fastlane/metadata/android/en-US/short_description.txt

@@ -0,0 +1 @@
+A comic reader that support reading local and network comics.

fastlane/metadata/android/en-US/title.txt

@@ -0,0 +1 @@
+venera

ios/Podfile

@@ -1,5 +1,5 @@
 # Uncomment this line to define a global platform for your project
-platform :ios, '14.0'
+platform :ios, '13.0'
 
 # CocoaPods analytics sends network stats synchronously affecting flutter build latency.
 ENV['COCOAPODS_DISABLE_STATS'] = 'true'

lib/components/appbar.dart

@@ -1,12 +1,14 @@
 part of 'components.dart';
 
 class Appbar extends StatefulWidget implements PreferredSizeWidget {
-  const Appbar(
-      {required this.title,
-      this.leading,
-      this.actions,
-      this.backgroundColor,
-      super.key});
+  const Appbar({
+    required this.title,
+    this.leading,
+    this.actions,
+    this.backgroundColor,
+    this.style = AppbarStyle.blur,
+    super.key,
+  });
 
   final Widget title;
 
@@ -16,6 +18,8 @@ class Appbar extends StatefulWidget implements PreferredSizeWidget {
 
   final Color? backgroundColor;
 
+  final AppbarStyle style;
+
   @override
   State<Appbar> createState() => _AppbarState();
 
@@ -76,7 +80,7 @@ class _AppbarState extends State<Appbar> {
     var content = Container(
       decoration: BoxDecoration(
         color: widget.backgroundColor ??
-            context.colorScheme.surface.withOpacity(0.72),
+            context.colorScheme.surface.toOpacity(0.72),
       ),
       height: _kAppBarHeight + context.padding.top,
       child: Row(
@@ -108,13 +112,26 @@ class _AppbarState extends State<Appbar> {
         ],
       ).paddingTop(context.padding.top),
     );
-    return BlurEffect(
-      blur: _scrolledUnder ? 15 : 0,
-      child: content,
-    );
+    if (widget.style == AppbarStyle.shadow) {
+      return Material(
+        color: context.colorScheme.surface,
+        elevation: _scrolledUnder ? 2 : 0,
+        child: content,
+      );
+    } else {
+      return BlurEffect(
+        blur: _scrolledUnder ? 15 : 0,
+        child: content,
+      );
+    }
   }
 }
 
+enum AppbarStyle {
+  blur,
+  shadow,
+}
+
 class SliverAppbar extends StatelessWidget {
   const SliverAppbar({
     super.key,
@@ -122,6 +139,7 @@ class SliverAppbar extends StatelessWidget {
     this.leading,
     this.actions,
     this.radius = 0,
+    this.style = AppbarStyle.blur,
   });
 
   final Widget? leading;
@@ -132,6 +150,8 @@ class SliverAppbar extends StatelessWidget {
 
   final double radius;
 
+  final AppbarStyle style;
+
   @override
   Widget build(BuildContext context) {
     return SliverPersistentHeader(
@@ -142,6 +162,7 @@ class SliverAppbar extends StatelessWidget {
         actions: actions,
         topPadding: MediaQuery.of(context).padding.top,
         radius: radius,
+        style: style,
       ),
     );
   }
@@ -160,57 +181,73 @@ class _MySliverAppBarDelegate extends SliverPersistentHeaderDelegate {
 
   final double radius;
 
-  _MySliverAppBarDelegate(
-      {this.leading,
-      required this.title,
-      this.actions,
-      required this.topPadding,
-      this.radius = 0});
+  final AppbarStyle style;
+
+  _MySliverAppBarDelegate({
+    this.leading,
+    required this.title,
+    this.actions,
+    required this.topPadding,
+    this.radius = 0,
+    this.style = AppbarStyle.blur,
+  });
 
   @override
   Widget build(
       BuildContext context, double shrinkOffset, bool overlapsContent) {
-    return SizedBox.expand(
-      child: BlurEffect(
-        blur: 15,
-        child: Material(
-          color: context.colorScheme.surface.withOpacity(0.72),
-          elevation: 0,
-          borderRadius: BorderRadius.circular(radius),
-          child: Row(
-            children: [
-              const SizedBox(width: 8),
-              leading ??
-                  (Navigator.of(context).canPop()
-                      ? Tooltip(
-                          message: "Back".tl,
-                          child: IconButton(
-                            icon: const Icon(Icons.arrow_back),
-                            onPressed: () => Navigator.maybePop(context),
-                          ),
-                        )
-                      : const SizedBox()),
-              const SizedBox(
-                width: 16,
-              ),
-              Expanded(
-                child: DefaultTextStyle(
-                  style:
-                      DefaultTextStyle.of(context).style.copyWith(fontSize: 20),
-                  maxLines: 1,
-                  overflow: TextOverflow.ellipsis,
-                  child: title,
-                ),
-              ),
-              ...?actions,
-              const SizedBox(
-                width: 8,
-              )
-            ],
-          ).paddingTop(topPadding),
+    var body = Row(
+      children: [
+        const SizedBox(width: 8),
+        leading ??
+            (Navigator.of(context).canPop()
+                ? Tooltip(
+                    message: "Back".tl,
+                    child: IconButton(
+                      icon: const Icon(Icons.arrow_back),
+                      onPressed: () => Navigator.maybePop(context),
+                    ),
+                  )
+                : const SizedBox()),
+        const SizedBox(
+          width: 16,
         ),
-      ),
-    );
+        Expanded(
+          child: DefaultTextStyle(
+            style: DefaultTextStyle.of(context).style.copyWith(fontSize: 20),
+            maxLines: 1,
+            overflow: TextOverflow.ellipsis,
+            child: title,
+          ),
+        ),
+        ...?actions,
+        const SizedBox(
+          width: 8,
+        )
+      ],
+    ).paddingTop(topPadding);
+
+    if (style == AppbarStyle.blur) {
+      return SizedBox.expand(
+        child: BlurEffect(
+          blur: 15,
+          child: Material(
+            color: context.colorScheme.surface.toOpacity(0.72),
+            elevation: 0,
+            borderRadius: BorderRadius.circular(radius),
+            child: body,
+          ),
+        ),
+      );
+    } else {
+      return SizedBox.expand(
+        child: Material(
+          color: context.colorScheme.surface,
+          elevation: shrinkOffset == 0 ? 0 : 2,
+          borderRadius: BorderRadius.circular(radius),
+          child: body,
+        ),
+      );
+    }
   }
 
   @override
@@ -224,22 +261,35 @@ class _MySliverAppBarDelegate extends SliverPersistentHeaderDelegate {
     return oldDelegate is! _MySliverAppBarDelegate ||
         leading != oldDelegate.leading ||
         title != oldDelegate.title ||
-        actions != oldDelegate.actions;
+        actions != oldDelegate.actions ||
+        topPadding != oldDelegate.topPadding ||
+        radius != oldDelegate.radius ||
+        style != oldDelegate.style;
   }
 }
 
-class FilledTabBar extends StatefulWidget {
-  const FilledTabBar({super.key, this.controller, required this.tabs});
+class AppTabBar extends StatefulWidget {
+  const AppTabBar({
+    super.key,
+    this.controller,
+    required this.tabs,
+    this.actionButton,
+    this.withUnderLine = true,
+  });
 
   final TabController? controller;
 
   final List<Tab> tabs;
 
+  final Widget? actionButton;
+
+  final bool withUnderLine;
+
   @override
-  State<FilledTabBar> createState() => _FilledTabBarState();
+  State<AppTabBar> createState() => _AppTabBarState();
 }
 
-class _FilledTabBarState extends State<FilledTabBar> {
+class _AppTabBarState extends State<AppTabBar> {
   late TabController _controller;
 
   late List<GlobalKey> keys;
@@ -269,16 +319,25 @@ class _FilledTabBarState extends State<FilledTabBar> {
     super.dispose();
   }
 
+  PageStorageBucket get bucket => PageStorage.of(context);
+
   @override
   void didChangeDependencies() {
     _controller = widget.controller ?? DefaultTabController.of(context);
-    _controller.animation!.addListener(onTabChanged);
     initPainter();
     super.didChangeDependencies();
+    var prevIndex = bucket.readState(context) as int?;
+    if (prevIndex != null &&
+        prevIndex != _controller.index &&
+        prevIndex >= 0 &&
+        prevIndex < widget.tabs.length) {
+      _controller.index = prevIndex;
+    }
+    _controller.animation!.addListener(onTabChanged);
   }
 
   @override
-  void didUpdateWidget(covariant FilledTabBar oldWidget) {
+  void didUpdateWidget(covariant AppTabBar oldWidget) {
     if (widget.controller != oldWidget.controller) {
       _controller = widget.controller ?? DefaultTabController.of(context);
       _controller.animation!.addListener(onTabChanged);
@@ -303,7 +362,7 @@ class _FilledTabBarState extends State<FilledTabBar> {
   @override
   Widget build(BuildContext context) {
     return AnimatedBuilder(
-      animation: _controller,
+      animation: _controller.animation ?? _controller,
       builder: buildTabBar,
     );
   }
@@ -318,6 +377,7 @@ class _FilledTabBarState extends State<FilledTabBar> {
       controller: scrollController,
       builder: (context, controller, physics) {
         return SingleChildScrollView(
+          key: const PageStorageKey('scroll'),
           scrollDirection: Axis.horizontal,
           padding: EdgeInsets.zero,
           controller: controller,
@@ -328,25 +388,29 @@ class _FilledTabBarState extends State<FilledTabBar> {
             painter: painter,
             child: _TabRow(
               callback: _tabLayoutCallback,
-              children: List.generate(widget.tabs.length, buildTab),
+              children: List.generate(widget.tabs.length, buildTab)
+                ..addIfNotNull(widget.actionButton?.padding(tabPadding)),
             ),
           ).paddingHorizontal(4),
         );
       },
     );
     return Container(
-        key: tabBarKey,
-        height: _kTabHeight,
-        width: double.infinity,
-        decoration: BoxDecoration(
-          border: Border(
-            bottom: BorderSide(
-              color: context.colorScheme.outlineVariant,
-              width: 0.6,
-            ),
-          ),
-        ),
-        child: widget.tabs.isEmpty ? const SizedBox() : child);
+      key: tabBarKey,
+      height: _kTabHeight,
+      width: double.infinity,
+      decoration: widget.withUnderLine
+          ? BoxDecoration(
+              border: Border(
+                bottom: BorderSide(
+                  color: context.colorScheme.outlineVariant,
+                  width: 0.6,
+                ),
+              ),
+            )
+          : null,
+      child: widget.tabs.isEmpty ? const SizedBox() : child,
+    );
   }
 
   int? previousIndex;
@@ -358,6 +422,7 @@ class _FilledTabBarState extends State<FilledTabBar> {
     }
     updateScrollOffset(i);
     previousIndex = i;
+    bucket.writeState(context, i);
   }
 
   void updateScrollOffset(int i) {
@@ -398,7 +463,7 @@ class _FilledTabBarState extends State<FilledTabBar> {
           padding: const EdgeInsets.symmetric(horizontal: 16),
           child: DefaultTextStyle(
             style: DefaultTextStyle.of(context).style.copyWith(
-                  color: i == _controller.index
+                  color: i == _controller.animation?.value.round()
                       ? context.colorScheme.primary
                       : context.colorScheme.onSurface,
                   fontWeight: FontWeight.w500,
@@ -505,7 +570,7 @@ class _IndicatorPainter extends CustomPainter {
 
     var rect = Rect.fromLTWH(
       tabLeft + padding.left + horizontalPadding,
-      _FilledTabBarState._kTabHeight - 3.6,
+      _AppTabBarState._kTabHeight - 3.6,
       tabRight - tabLeft - padding.horizontal - horizontalPadding * 2,
       3,
     );
@@ -538,6 +603,51 @@ class _IndicatorPainter extends CustomPainter {
   }
 }
 
+class TabViewBody extends StatefulWidget {
+  /// Create a tab view body, which will show the child at the current tab index.
+  const TabViewBody({super.key, required this.children, this.controller});
+
+  final List<Widget> children;
+
+  final TabController? controller;
+
+  @override
+  State<TabViewBody> createState() => _TabViewBodyState();
+}
+
+class _TabViewBodyState extends State<TabViewBody> {
+  late TabController _controller;
+
+  int _currentIndex = 0;
+
+  void updateIndex() {
+    if (_controller.index != _currentIndex) {
+      setState(() {
+        _currentIndex = _controller.index;
+      });
+    }
+  }
+
+  @override
+  void didChangeDependencies() {
+    super.didChangeDependencies();
+    _controller = widget.controller ?? DefaultTabController.of(context);
+    _currentIndex = _controller.index;
+    _controller.addListener(updateIndex);
+  }
+
+  @override
+  void dispose() {
+    super.dispose();
+    _controller.removeListener(updateIndex);
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return widget.children[_currentIndex];
+  }
+}
+
 class SearchBarController {
   _SearchBarMixin? _state;
 
@@ -695,6 +805,7 @@ class _SliverSearchBarDelegate extends SliverPersistentHeaderDelegate {
                       icon: const Icon(Icons.clear),
                       onPressed: () {
                         editingController.clear();
+                        onChanged?.call("");
                       },
                     );
             },
@@ -809,3 +920,42 @@ class _SearchBarState extends State<AppSearchBar> with _SearchBarMixin {
     );
   }
 }
+
+class TabActionButton extends StatelessWidget {
+  const TabActionButton({
+    super.key,
+    required this.icon,
+    required this.text,
+    required this.onPressed,
+  });
+
+  final Icon icon;
+
+  final String text;
+
+  final void Function() onPressed;
+
+  static const _kTabHeight = 46.0;
+
+  @override
+  Widget build(BuildContext context) {
+    return InkWell(
+      onTap: onPressed,
+      borderRadius: BorderRadius.circular(8),
+      child: Container(
+        height: _kTabHeight,
+        padding: const EdgeInsets.symmetric(horizontal: 12),
+        child: IconTheme(
+          data: IconThemeData(size: 20, color: context.colorScheme.primary),
+          child: Row(
+            children: [
+              icon,
+              const SizedBox(width: 8),
+              Text(text, style: ts.withColor(context.colorScheme.primary)),
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+}

lib/components/button.dart

@@ -214,7 +214,7 @@ class _ButtonState extends State<Button> {
             boxShadow: (isHover && !isLoading && (widget.type == ButtonType.filled || widget.type == ButtonType.normal))
                 ? [
                     BoxShadow(
-                      color: Colors.black.withOpacity(0.1),
+                      color: Colors.black.toOpacity(0.1),
                       blurRadius: 2,
                       offset: const Offset(0, 1),
                     )
@@ -248,7 +248,7 @@ class _ButtonState extends State<Button> {
     if (widget.type == ButtonType.filled) {
       var color = widget.color ?? context.colorScheme.primary;
       if (isHover) {
-        return color.withOpacity(0.9);
+        return color.toOpacity(0.9);
       } else {
         return color;
       }
@@ -256,13 +256,13 @@ class _ButtonState extends State<Button> {
     if (widget.type == ButtonType.normal) {
       var color = widget.color ?? context.colorScheme.surfaceContainer;
       if (isHover) {
-        return color.withOpacity(0.9);
+        return color.toOpacity(0.9);
       } else {
         return color;
       }
     }
     if (isHover) {
-      return context.colorScheme.outline.withOpacity(0.2);
+      return context.colorScheme.outline.toOpacity(0.2);
     }
     return Colors.transparent;
   }
@@ -345,7 +345,7 @@ class _IconButtonState extends State<_IconButton> {
                   ? Theme.of(context)
                   .colorScheme
                   .outlineVariant
-                  .withOpacity(0.4)
+                  .toOpacity(0.4)
                   : null,
               borderRadius: BorderRadius.circular((iconSize + 12) / 2),
             ),

lib/components/code.dart

@@ -0,0 +1,383 @@
+part of 'components.dart';
+
+class CodeEditor extends StatefulWidget {
+  const CodeEditor({super.key, this.initialValue, this.onChanged});
+
+  final String? initialValue;
+
+  final void Function(String value)? onChanged;
+
+  @override
+  State<CodeEditor> createState() => _CodeEditorState();
+}
+
+class _CodeEditorState extends State<CodeEditor> {
+  late _CodeTextEditingController _controller;
+  late FocusNode _focusNode;
+  var horizontalScrollController = ScrollController();
+  var verticalScrollController = ScrollController();
+  int lineCount = 1;
+
+  @override
+  void initState() {
+    super.initState();
+    _controller = _CodeTextEditingController(text: widget.initialValue);
+    _focusNode = FocusNode()
+      ..onKeyEvent = (node, event) {
+        if (event.logicalKey == LogicalKeyboardKey.tab) {
+          if (event is KeyDownEvent) {
+            handleTab();
+          }
+          return KeyEventResult.handled;
+        }
+        return KeyEventResult.ignored;
+      };
+    lineCount = calculateLineCount(widget.initialValue ?? '');
+  }
+
+  @override
+  void didChangeDependencies() {
+    super.didChangeDependencies();
+    future = _controller.init(context.brightness);
+  }
+
+  void handleTab() {
+    var text = _controller.text;
+    var start = _controller.selection.start;
+    var end = _controller.selection.end;
+    _controller.text = '${text.substring(0, start)}    ${text.substring(end)}';
+    _controller.selection = TextSelection.collapsed(offset: start + 4);
+  }
+
+  int calculateLineCount(String text) {
+    return text.split('\n').length;
+  }
+
+  Widget buildLineNumbers() {
+    return SizedBox(
+      width: 36,
+      child: Column(
+        children: [
+          for (var i = 1; i <= lineCount; i++)
+            SizedBox(
+              height: 14 * 1.5,
+              child: Center(
+                child: Text(
+                  i.toString(),
+                  style: TextStyle(
+                    color: context.colorScheme.outline,
+                    fontSize: 13,
+                    height: 1.0,
+                    fontFamily: 'Consolas',
+                    fontFamilyFallback: ['Courier New', 'monospace'],
+                  ),
+                ),
+              ),
+            ),
+        ],
+      ),
+    ).paddingVertical(8);
+  }
+
+  late Future future;
+
+  @override
+  Widget build(BuildContext context) {
+    return FutureBuilder(
+      future: future,
+      builder: (context, value) {
+        if (value.connectionState == ConnectionState.waiting) {
+          return const SizedBox();
+        }
+        return GestureDetector(
+          onTap: () {
+            _controller.selection = TextSelection.collapsed(
+              offset: _controller.text.length,
+            );
+            _focusNode.requestFocus();
+          },
+          child: Scrollbar(
+            thumbVisibility: true,
+            controller: verticalScrollController,
+            notificationPredicate: (notif) =>
+                notif.metrics.axis == Axis.vertical,
+            child: Scrollbar(
+              thumbVisibility: true,
+              controller: horizontalScrollController,
+              notificationPredicate: (notif) =>
+                  notif.metrics.axis == Axis.horizontal,
+              child: SizedBox.expand(
+                child: ScrollConfiguration(
+                  behavior: _CustomScrollBehavior(),
+                  child: SingleChildScrollView(
+                    scrollDirection: Axis.horizontal,
+                    controller: horizontalScrollController,
+                    child: SingleChildScrollView(
+                      scrollDirection: Axis.vertical,
+                      controller: verticalScrollController,
+                      child: Row(
+                        children: [
+                          buildLineNumbers(),
+                          IntrinsicWidth(
+                            stepWidth: 100,
+                            child: TextField(
+                              controller: _controller,
+                              focusNode: _focusNode,
+                              maxLines: null,
+                              cursorHeight: 1.5 * 14,
+                              style: TextStyle(height: 1.5, fontSize: 14),
+                              decoration: InputDecoration(
+                                border: InputBorder.none,
+                                contentPadding: EdgeInsets.all(8),
+                              ),
+                              onChanged: (value) {
+                                widget.onChanged?.call(value);
+                                if (lineCount != calculateLineCount(value)) {
+                                  setState(() {
+                                    lineCount = calculateLineCount(value);
+                                  });
+                                }
+                              },
+                            ),
+                          ),
+                        ],
+                      ),
+                    ),
+                  ),
+                ),
+              ),
+            ),
+          ),
+        );
+      },
+    );
+  }
+}
+
+class _CustomScrollBehavior extends MaterialScrollBehavior {
+  const _CustomScrollBehavior();
+  @override
+  Widget buildScrollbar(
+      BuildContext context, Widget child, ScrollableDetails details) {
+    return child;
+  }
+}
+
+class _CodeTextEditingController extends TextEditingController {
+  _CodeTextEditingController({super.text});
+
+  HighlighterTheme? _theme;
+
+  Future<void> init(Brightness brightness) async {
+    Highlighter.addLanguage('js', _jsGrammer);
+    _theme = await HighlighterTheme.loadForBrightness(brightness);
+  }
+
+  @override
+  TextSpan buildTextSpan(
+      {required BuildContext context,
+      TextStyle? style,
+      required bool withComposing}) {
+    var highlighter = Highlighter(
+      language: 'js',
+      theme: _theme!,
+    );
+    var result = highlighter.highlight(text);
+    style = TextStyle(
+      height: 1.5,
+      fontSize: 14,
+      fontFamily: 'Consolas',
+      fontFamilyFallback: ['Courier New', 'Roboto Mono', 'monospace'],
+    );
+
+    return mergeTextStyle(result, style);
+  }
+
+  TextSpan mergeTextStyle(TextSpan span, TextStyle style) {
+    var result = TextSpan(
+      style: style.merge(span.style),
+      children: span.children
+          ?.whereType()
+          .map((e) => mergeTextStyle(e, style))
+          .toList(),
+      text: span.text,
+    );
+    return result;
+  }
+}
+
+const _jsGrammer = r'''
+{
+  "name": "JavaScript",
+  "version": "1.0.0",
+  "fileTypes": ["js", "mjs", "cjs"],
+  "scopeName": "source.js",
+
+  "foldingStartMarker": "\\{\\s*$",
+  "foldingStopMarker": "^\\s*\\}",
+
+  "patterns": [
+    {
+      "name": "meta.preprocessor.script.js",
+      "match": "^(#!.*)$"
+    },
+    {
+      "name": "meta.import-export.js",
+      "begin": "\\b(import|export)\\b",
+      "beginCaptures": {
+        "0": {
+          "name": "keyword.control.import.js"
+        }
+      },
+      "end": ";",
+      "endCaptures": {
+        "0": {
+          "name": "punctuation.terminator.js"
+        }
+      },
+      "patterns": [
+        {
+          "include": "#strings"
+        },
+        {
+          "include": "#comments"
+        },
+        {
+          "name": "keyword.control.import.js",
+          "match": "\\b(as|from)\\b"
+        }
+      ]
+    },
+    {
+      "include": "#comments"
+    },
+    {
+      "include": "#keywords"
+    },
+    {
+      "include": "#constants-and-special-vars"
+    },
+    {
+      "include": "#operators"
+    },
+    {
+      "include": "#strings"
+    }
+  ],
+
+  "repository": {
+    "comments": {
+      "patterns": [
+        {
+          "name": "comment.block.js",
+          "begin": "/\\*",
+          "end": "\\*/"
+        },
+        {
+          "name": "comment.line.double-slash.js",
+          "match": "//.*$"
+        }
+      ]
+    },
+    "keywords": {
+      "patterns": [
+        {
+          "name": "keyword.control.js",
+          "match": "\\b(if|else|for|while|do|switch|case|default|break|continue|return|throw|try|catch|finally)\\b"
+        },
+        {
+          "name": "keyword.operator.js",
+          "match": "\\b(instanceof|typeof|new|delete|in|void)\\b"
+        },
+        {
+          "name": "storage.type.js",
+          "match": "\\b(var|let|const|function|class|extends)\\b"
+        },
+        {
+          "name": "keyword.declaration.js",
+          "match": "\\b(export|import|default)\\b"
+        }
+      ]
+    },
+    "constants-and-special-vars": {
+      "patterns": [
+        {
+          "name": "constant.language.js",
+          "match": "\\b(true|false|null|undefined|NaN|Infinity)\\b"
+        },
+        {
+          "name": "constant.numeric.js",
+          "match": "\\b(0x[0-9A-Fa-f]+|[0-9]+\\.?[0-9]*(e[+-]?[0-9]+)?)\\b"
+        }
+      ]
+    },
+    "operators": {
+      "patterns": [
+        {
+          "name": "keyword.operator.assignment.js",
+          "match": "(=|\\+=|-=|\\*=|/=|%=|\\|=|&=|\\^=|<<=|>>=|>>>=)"
+        },
+        {
+          "name": "keyword.operator.comparison.js",
+          "match": "(==|!=|===|!==|<|<=|>|>=)"
+        },
+        {
+          "name": "keyword.operator.logical.js",
+          "match": "(&&|\\|\\||!)"
+        },
+        {
+          "name": "keyword.operator.arithmetic.js",
+          "match": "(-|\\+|\\*|/|%)"
+        },
+        {
+          "name": "keyword.operator.bitwise.js",
+          "match": "(\\||&|\\^|~|<<|>>|>>>)"
+        }
+      ]
+    },
+    "strings": {
+      "patterns": [
+        {
+          "name": "string.quoted.double.js",
+          "begin": "\"",
+          "end": "\"",
+          "patterns": [
+            {
+              "include": "#string-interpolation"
+            }
+          ]
+        },
+        {
+          "name": "string.quoted.single.js",
+          "begin": "'",
+          "end": "'",
+          "patterns": [
+            {
+              "include": "#string-interpolation"
+            }
+          ]
+        },
+        {
+          "name": "string.template.js",
+          "begin": "`",
+          "end": "`",
+          "patterns": [
+            {
+              "include": "#string-interpolation"
+            }
+          ]
+        }
+      ]
+    },
+    "string-interpolation": {
+      "patterns": [
+        {
+          "name": "variable.parameter.js",
+          "begin": "\\$\\{",
+          "end": "\\}"
+        }
+      ]
+    }
+  }
+}
+''';

lib/components/comic.dart

@@ -1,5 +1,27 @@
 part of 'components.dart';
 
+ImageProvider? _findImageProvider(Comic comic) {
+  ImageProvider image;
+  if (comic is LocalComic) {
+    image = LocalComicImageProvider(comic);
+  } else if (comic is History) {
+    image = HistoryImageProvider(comic);
+  } else if (comic.sourceKey == 'local') {
+    var localComic = LocalManager().find(comic.id, ComicType.local);
+    if (localComic == null) {
+      return null;
+    }
+    image = FileImage(localComic.coverFile);
+  } else {
+    image = CachedImageProvider(
+      comic.cover,
+      sourceKey: comic.sourceKey,
+      cid: comic.id,
+    );
+  }
+  return image;
+}
+
 class ComicTile extends StatelessWidget {
   const ComicTile({
     super.key,
@@ -8,6 +30,8 @@ class ComicTile extends StatelessWidget {
     this.badge,
     this.menuOptions,
     this.onTap,
+    this.onLongPressed,
+    this.heroID,
   });
 
   final Comic comic;
@@ -20,20 +44,39 @@ class ComicTile extends StatelessWidget {
 
   final VoidCallback? onTap;
 
+  final VoidCallback? onLongPressed;
+
+  final int? heroID;
+
   void _onTap() {
     if (onTap != null) {
       onTap!();
       return;
     }
-    App.mainNavigatorKey?.currentContext
-        ?.to(() => ComicPage(id: comic.id, sourceKey: comic.sourceKey));
+    App.mainNavigatorKey?.currentContext?.to(
+      () => ComicPage(
+        id: comic.id,
+        sourceKey: comic.sourceKey,
+        cover: comic.cover,
+        title: comic.title,
+        heroID: heroID,
+      ),
+    );
+  }
+
+  void _onLongPressed(context) {
+    if (onLongPressed != null) {
+      onLongPressed!();
+      return;
+    }
+    onLongPress(context);
   }
 
   void onLongPress(BuildContext context) {
     var renderBox = context.findRenderObject() as RenderBox;
     var size = renderBox.size;
     var location = renderBox.localToGlobal(
-      Offset(size.width / 2, size.height / 2),
+      Offset((size.width - 242) / 2, size.height / 2),
     );
     showMenu(location, context);
   }
@@ -51,8 +94,14 @@ class ComicTile extends StatelessWidget {
           icon: Icons.chrome_reader_mode_outlined,
           text: 'Details'.tl,
           onClick: () {
-            App.mainNavigatorKey?.currentContext
-                ?.to(() => ComicPage(id: comic.id, sourceKey: comic.sourceKey));
+            App.mainNavigatorKey?.currentContext?.to(
+              () => ComicPage(
+                id: comic.id,
+                sourceKey: comic.sourceKey,
+                cover: comic.cover,
+                title: comic.title,
+              ),
+            );
           },
         ),
         MenuEntry(
@@ -67,7 +116,7 @@ class ComicTile extends StatelessWidget {
           icon: Icons.stars_outlined,
           text: 'Add to favorites'.tl,
           onClick: () {
-            addFavorite(comic);
+            addFavorite([comic]);
           },
         ),
         MenuEntry(
@@ -93,8 +142,7 @@ class ComicTile extends StatelessWidget {
             .isExist(comic.id, ComicType(comic.sourceKey.hashCode))
         : false;
     var history = appdata.settings['showHistoryStatusOnTile']
-        ? HistoryManager()
-            .findSync(comic.id, ComicType(comic.sourceKey.hashCode))
+        ? HistoryManager().find(comic.id, ComicType(comic.sourceKey.hashCode))
         : null;
     if (history?.page == 0) {
       history!.page = 1;
@@ -134,7 +182,7 @@ class ComicTile extends StatelessWidget {
                 if (history != null)
                   Container(
                     height: 24,
-                    color: Colors.blue.withOpacity(0.9),
+                    color: Colors.blue.toOpacity(0.9),
                     constraints: const BoxConstraints(minWidth: 24),
                     padding: const EdgeInsets.symmetric(horizontal: 4),
                     child: CustomPaint(
@@ -151,23 +199,9 @@ class ComicTile extends StatelessWidget {
   }
 
   Widget buildImage(BuildContext context) {
-    ImageProvider image;
-    if (comic is LocalComic) {
-      image = FileImage((comic as LocalComic).coverFile);
-    } else if (comic.cover.startsWith('file://')) {
-      image = FileImage(File(comic.cover.substring(7)));
-    } else if (comic.sourceKey == 'local') {
-      var localComic = LocalManager().find(comic.id, ComicType.local);
-      if (localComic == null) {
-        return const SizedBox();
-      }
-      image = FileImage(localComic.coverFile);
-    } else {
-      image = CachedImageProvider(
-        comic.cover,
-        sourceKey: comic.sourceKey,
-        cid: comic.id,
-      );
+    var image = _findImageProvider(comic);
+    if (image == null) {
+      return const SizedBox();
     }
     return AnimatedImage(
       image: image,
@@ -180,162 +214,216 @@ class ComicTile extends StatelessWidget {
   Widget _buildDetailedMode(BuildContext context) {
     return LayoutBuilder(builder: (context, constrains) {
       final height = constrains.maxHeight - 16;
-      return InkWell(
-          borderRadius: BorderRadius.circular(12),
-          onTap: _onTap,
-          onLongPress: enableLongPressed ? () => onLongPress(context) : null,
-          onSecondaryTapDown: (detail) => onSecondaryTap(detail, context),
-          child: Padding(
-            padding: const EdgeInsets.fromLTRB(16, 8, 24, 8),
-            child: Row(
-              children: [
-                Container(
-                  width: height * 0.68,
-                  height: double.infinity,
-                  decoration: BoxDecoration(
-                    color: Theme.of(context).colorScheme.secondaryContainer,
-                    borderRadius: BorderRadius.circular(8),
-                  ),
-                  clipBehavior: Clip.antiAlias,
-                  child: buildImage(context),
-                ),
-                SizedBox.fromSize(
-                  size: const Size(16, 5),
-                ),
-                Expanded(
-                  child: _ComicDescription(
-                    title: comic.maxPage == null
-                        ? comic.title.replaceAll("\n", "")
-                        : "[${comic.maxPage}P]${comic.title.replaceAll("\n", "")}",
-                    subtitle: comic.subtitle ?? '',
-                    description: comic.description,
-                    badge: badge ?? comic.language,
-                    tags: comic.tags,
-                    maxLines: 2,
-                    enableTranslate: ComicSource.find(comic.sourceKey)
-                            ?.enableTagsTranslate ??
-                        false,
-                    rating: comic.stars,
-                  ),
-                ),
-              ],
+
+      Widget image = Container(
+        width: height * 0.68,
+        height: double.infinity,
+        decoration: BoxDecoration(
+          color: Theme.of(context).colorScheme.secondaryContainer,
+          borderRadius: BorderRadius.circular(8),
+          boxShadow: [
+            BoxShadow(
+              color: context.colorScheme.outlineVariant,
+              blurRadius: 1,
+              offset: const Offset(0, 1),
             ),
-          ));
+          ],
+        ),
+        clipBehavior: Clip.antiAlias,
+        child: buildImage(context),
+      );
+
+      if (heroID != null) {
+        image = Hero(
+          tag: "cover$heroID",
+          child: image,
+        );
+      }
+
+      return InkWell(
+        borderRadius: BorderRadius.circular(12),
+        onTap: _onTap,
+        onLongPress: enableLongPressed ? () => _onLongPressed(context) : null,
+        onSecondaryTapDown: (detail) => onSecondaryTap(detail, context),
+        child: Padding(
+          padding: const EdgeInsets.fromLTRB(16, 8, 24, 8),
+          child: Row(
+            children: [
+              image,
+              SizedBox.fromSize(
+                size: const Size(16, 5),
+              ),
+              Expanded(
+                child: _ComicDescription(
+                  title: comic.maxPage == null
+                      ? comic.title.replaceAll("\n", "")
+                      : "[${comic.maxPage}P]${comic.title.replaceAll("\n", "")}",
+                  subtitle: comic.subtitle ?? '',
+                  description: comic.description,
+                  badge: badge ?? comic.language,
+                  tags: comic.tags,
+                  maxLines: 2,
+                  enableTranslate:
+                      ComicSource.find(comic.sourceKey)?.enableTagsTranslate ??
+                          false,
+                  rating: comic.stars,
+                ),
+              ),
+            ],
+          ),
+        ),
+      );
     });
   }
 
   Widget _buildBriefMode(BuildContext context) {
-    return Padding(
-        padding: const EdgeInsets.symmetric(horizontal: 6, vertical: 8),
-        child: LayoutBuilder(
-          builder: (context, constraints) {
-            return InkWell(
-              borderRadius: BorderRadius.circular(8),
-              onTap: _onTap,
-              onLongPress:
-                  enableLongPressed ? () => onLongPress(context) : null,
-              onSecondaryTapDown: (detail) => onSecondaryTap(detail, context),
-              child: Column(
-                children: [
-                  Expanded(
-                    child: SizedBox(
-                      child: Stack(
-                        children: [
-                          Positioned.fill(
-                            child: Container(
-                              decoration: BoxDecoration(
-                                color: Theme.of(context)
-                                    .colorScheme
-                                    .secondaryContainer,
-                                borderRadius: BorderRadius.circular(8),
-                              ),
-                              clipBehavior: Clip.antiAlias,
-                              child: buildImage(context),
-                            ),
-                          ),
-                          Positioned(
-                              bottom: 0,
-                              right: 0,
-                              child: Padding(
-                                padding: const EdgeInsets.symmetric(
-                                    horizontal: 4, vertical: 4),
-                                child: ClipRRect(
-                                  borderRadius: const BorderRadius.only(
-                                    topLeft: Radius.circular(10.0),
-                                    topRight: Radius.circular(10.0),
-                                    bottomRight: Radius.circular(10.0),
-                                    bottomLeft: Radius.circular(10.0),
-                                  ),
-                                  child: Container(
-                                    color: Colors.black.withOpacity(0.5),
-                                    child: Padding(
-                                      padding:
-                                          const EdgeInsets.fromLTRB(8, 6, 8, 6),
-                                      child: ConstrainedBox(
-                                        constraints: BoxConstraints(
-                                          maxWidth: constraints.maxWidth * 0.88,
-                                        ),
-                                        child: Text(
-                                          comic.description.isEmpty
-                                              ? comic.subtitle
-                                                      ?.replaceAll('\n', '') ??
-                                                  ''
-                                              : comic.description
-                                                  .split('|')
-                                                  .join('\n'),
-                                          style: const TextStyle(
-                                            fontWeight: FontWeight.w500,
-                                            fontSize: 12,
-                                            color: Colors.white,
-                                          ),
-                                          textAlign: TextAlign.right,
-                                          maxLines: 2,
-                                          overflow: TextOverflow.ellipsis,
-                                        ),
-                                      ),
-                                    ),
-                                  ),
-                                ),
-                              )),
-                        ],
-                      ),
-                    ),
-                  ),
-                  Padding(
-                    padding: const EdgeInsets.fromLTRB(8, 4, 8, 0),
-                    child: Text(
-                      comic.title.replaceAll('\n', ''),
-                      style: const TextStyle(
-                        fontWeight: FontWeight.w500,
-                        fontSize: 14.0,
-                      ),
-                      maxLines: 1,
-                      overflow: TextOverflow.ellipsis,
-                    ),
-                  ),
-                ],
+    return LayoutBuilder(
+      builder: (context, constraints) {
+        Widget image = Container(
+          decoration: BoxDecoration(
+            color: context.colorScheme.secondaryContainer,
+            borderRadius: BorderRadius.circular(8),
+            boxShadow: [
+              BoxShadow(
+                color: Colors.black.toOpacity(0.2),
+                blurRadius: 2,
+                offset: const Offset(0, 2),
               ),
-            );
-          },
-        ));
+            ],
+          ),
+          clipBehavior: Clip.antiAlias,
+          child: buildImage(context),
+        );
+
+        if (heroID != null) {
+          image = Hero(
+            tag: "cover$heroID",
+            child: image,
+          );
+        }
+
+        return InkWell(
+          borderRadius: BorderRadius.circular(8),
+          onTap: _onTap,
+          onLongPress: enableLongPressed ? () => _onLongPressed(context) : null,
+          onSecondaryTapDown: (detail) => onSecondaryTap(detail, context),
+          child: Column(
+            children: [
+              Expanded(
+                child: Stack(
+                  children: [
+                    Positioned.fill(
+                      child: image,
+                    ),
+                    Align(
+                      alignment: Alignment.bottomRight,
+                      child: (() {
+                        final subtitle =
+                            comic.subtitle?.replaceAll('\n', '').trim();
+                        final text = comic.description.isNotEmpty
+                            ? comic.description.split('|').join('\n')
+                            : (subtitle?.isNotEmpty == true ? subtitle : null);
+                        final fortSize = constraints.maxWidth < 80
+                            ? 8.0
+                            : constraints.maxWidth < 150
+                                ? 10.0
+                                : 12.0;
+
+                        if (text == null) {
+                          return const SizedBox();
+                        }
+
+                        var children = <Widget>[];
+                        for (var line in text.split('\n')) {
+                          children.add(Container(
+                            margin: const EdgeInsets.fromLTRB(2, 0, 2, 2),
+                            padding: constraints.maxWidth < 80
+                                ? const EdgeInsets.fromLTRB(3, 1, 3, 1)
+                                : constraints.maxWidth < 150
+                                    ? const EdgeInsets.fromLTRB(4, 2, 4, 2)
+                                    : const EdgeInsets.fromLTRB(5, 2, 5, 2),
+                            decoration: BoxDecoration(
+                              borderRadius: BorderRadius.circular(8),
+                              color: Colors.black.toOpacity(0.5),
+                            ),
+                            constraints: BoxConstraints(
+                              maxWidth: constraints.maxWidth,
+                            ),
+                            child: Text(
+                              line,
+                              style: TextStyle(
+                                fontWeight: FontWeight.w500,
+                                fontSize: fortSize,
+                                color: Colors.white,
+                              ),
+                              textAlign: TextAlign.right,
+                              maxLines: 1,
+                              overflow: TextOverflow.ellipsis,
+                            ),
+                          ));
+                        }
+                        return Column(
+                          mainAxisSize: MainAxisSize.min,
+                          crossAxisAlignment: CrossAxisAlignment.end,
+                          children: children,
+                        );
+                      })(),
+                    ),
+                  ],
+                ),
+              ),
+              Padding(
+                padding: const EdgeInsets.fromLTRB(4, 4, 4, 0),
+                child: Text(
+                  comic.title.replaceAll('\n', ''),
+                  maxLines: 1,
+                  overflow: TextOverflow.clip,
+                  style: const TextStyle(
+                    fontWeight: FontWeight.w500,
+                  ),
+                ),
+              ),
+            ],
+          ).paddingHorizontal(6).paddingVertical(8),
+        );
+      },
+    );
   }
 
   List<String> _splitText(String text) {
-    // split text by space, comma. text in brackets will be kept together.
+    // split text by comma, brackets
     var words = <String>[];
     var buffer = StringBuffer();
     var inBracket = false;
+    String? prevBracket;
     for (var i = 0; i < text.length; i++) {
       var c = text[i];
       if (c == '[' || c == '(') {
-        inBracket = true;
-      } else if (c == ']' || c == ')') {
-        inBracket = false;
-      } else if (c == ' ' || c == ',') {
         if (inBracket) {
           buffer.write(c);
         } else {
-          words.add(buffer.toString());
+          if (buffer.isNotEmpty) {
+            words.add(buffer.toString().trim());
+            buffer.clear();
+          }
+          inBracket = true;
+          prevBracket = c;
+        }
+      } else if (c == ']' || c == ')') {
+        if (prevBracket == '[' && c == ']' || prevBracket == '(' && c == ')') {
+          if (buffer.isNotEmpty) {
+            words.add(buffer.toString().trim());
+            buffer.clear();
+          }
+          inBracket = false;
+        } else {
+          buffer.write(c);
+        }
+      } else if (c == ',') {
+        if (inBracket) {
+          buffer.write(c);
+        } else {
+          words.add(buffer.toString().trim());
           buffer.clear();
         }
       } else {
@@ -343,8 +431,10 @@ class ComicTile extends StatelessWidget {
       }
     }
     if (buffer.isNotEmpty) {
-      words.add(buffer.toString());
+      words.add(buffer.toString().trim());
     }
+    words.removeWhere((element) => element == "");
+    words = words.toSet().toList();
     return words;
   }
 
@@ -362,26 +452,35 @@ class ComicTile extends StatelessWidget {
         return StatefulBuilder(builder: (context, setState) {
           return ContentDialog(
             title: 'Block'.tl,
-            content: Wrap(
-              runSpacing: 8,
-              spacing: 8,
-              children: [
-                for (var word in all)
-                  OptionChip(
-                    text: word,
-                    isSelected: words.contains(word),
-                    onTap: () {
-                      setState(() {
-                        if (!words.contains(word)) {
-                          words.add(word);
-                        } else {
-                          words.remove(word);
-                        }
-                      });
-                    },
-                  ),
-              ],
-            ).paddingHorizontal(16),
+            content: ConstrainedBox(
+              constraints: BoxConstraints(
+                maxHeight: math.min(400, context.height - 136),
+              ),
+              child: SingleChildScrollView(
+                child: Wrap(
+                  runSpacing: 8,
+                  spacing: 8,
+                  children: [
+                    for (var word in all)
+                      OptionChip(
+                        text: (comic.tags?.contains(word) ?? false)
+                            ? word.translateTagIfNeed
+                            : word,
+                        isSelected: words.contains(word),
+                        onTap: () {
+                          setState(() {
+                            if (!words.contains(word)) {
+                              words.add(word);
+                            } else {
+                              words.remove(word);
+                            }
+                          });
+                        },
+                      ),
+                  ],
+                ),
+              ).paddingHorizontal(16),
+            ),
             actions: [
               Button.filled(
                 onPressed: () {
@@ -454,15 +553,13 @@ class _ComicDescription extends StatelessWidget {
             subtitle,
             style: TextStyle(
                 fontSize: 10.0,
-                color: context.colorScheme.onSurface.withOpacity(0.7)),
+                color: context.colorScheme.onSurface.toOpacity(0.7)),
             maxLines: 1,
             softWrap: true,
             overflow: TextOverflow.ellipsis,
           ),
-        const SizedBox(
-          height: 4,
-        ),
-        if (tags != null)
+        const SizedBox(height: 4),
+        if (tags != null && tags!.isNotEmpty)
           Expanded(
             child: LayoutBuilder(builder: (context, constraints) {
               if (constraints.maxHeight < 22) {
@@ -471,7 +568,7 @@ class _ComicDescription extends StatelessWidget {
               int cnt = (constraints.maxHeight - 22).toInt() ~/ 25;
               return Container(
                 clipBehavior: Clip.antiAlias,
-                height: 22 + cnt * 25,
+                height: 21 + cnt * 24,
                 width: double.infinity,
                 decoration: const BoxDecoration(),
                 child: Wrap(
@@ -483,31 +580,30 @@ class _ComicDescription extends StatelessWidget {
                   children: [
                     for (var s in tags!)
                       Container(
-                          height: 22,
-                          padding: const EdgeInsets.fromLTRB(3, 2, 3, 2),
-                          constraints: BoxConstraints(
-                            maxWidth: constraints.maxWidth * 0.45,
+                        height: 21,
+                        padding: const EdgeInsets.symmetric(horizontal: 4),
+                        constraints: BoxConstraints(
+                          maxWidth: constraints.maxWidth * 0.45,
+                        ),
+                        decoration: BoxDecoration(
+                          color: s == "Unavailable"
+                              ? context.colorScheme.errorContainer
+                              : context.colorScheme.secondaryContainer,
+                          borderRadius: BorderRadius.circular(8),
+                        ),
+                        child: Center(
+                          widthFactor: 1,
+                          child: Text(
+                            enableTranslate
+                                ? TagsTranslation.translateTag(s)
+                                : s.split(':').last,
+                            style: const TextStyle(fontSize: 12),
+                            softWrap: true,
+                            overflow: TextOverflow.ellipsis,
+                            maxLines: 1,
                           ),
-                          decoration: BoxDecoration(
-                            color: s == "Unavailable"
-                                ? Theme.of(context).colorScheme.errorContainer
-                                : Theme.of(context)
-                                    .colorScheme
-                                    .secondaryContainer,
-                            borderRadius:
-                                const BorderRadius.all(Radius.circular(8)),
-                          ),
-                          child: Center(
-                              widthFactor: 1,
-                              child: Text(
-                                enableTranslate
-                                    ? TagsTranslation.translateTag(s)
-                                    : s.split(':').last,
-                                style: const TextStyle(fontSize: 12),
-                                softWrap: true,
-                                overflow: TextOverflow.ellipsis,
-                                maxLines: 1,
-                              ))),
+                        ),
+                      ),
                   ],
                 ),
               ).toAlign(Alignment.topCenter);
@@ -528,23 +624,26 @@ class _ComicDescription extends StatelessWidget {
                     style: const TextStyle(
                       fontSize: 12.0,
                     ),
+                    maxLines: (tags == null || tags!.isEmpty) ? 3 : 2,
+                    overflow: TextOverflow.ellipsis,
                   ),
                 ],
               ),
             ),
             if (badge != null)
               Container(
-                  padding: const EdgeInsets.fromLTRB(6, 4, 6, 4),
-                  decoration: BoxDecoration(
-                    color: Theme.of(context).colorScheme.tertiaryContainer,
-                    borderRadius: const BorderRadius.all(Radius.circular(8)),
+                padding: const EdgeInsets.fromLTRB(6, 4, 6, 4),
+                decoration: BoxDecoration(
+                  color: Theme.of(context).colorScheme.tertiaryContainer,
+                  borderRadius: const BorderRadius.all(Radius.circular(8)),
+                ),
+                child: Center(
+                  child: Text(
+                    "${badge![0].toUpperCase()}${badge!.substring(1).toLowerCase()}",
+                    style: const TextStyle(fontSize: 12),
                   ),
-                  child: Center(
-                    child: Text(
-                      "${badge![0].toUpperCase()}${badge!.substring(1).toLowerCase()}",
-                      style: const TextStyle(fontSize: 12),
-                    ),
-                  )),
+                ),
+              ),
           ],
         )
       ],
@@ -635,6 +734,7 @@ class SliverGridComics extends StatefulWidget {
       this.badgeBuilder,
       this.menuBuilder,
       this.onTap,
+      this.onLongPressed,
       this.selections});
 
   final List<Comic> comics;
@@ -649,22 +749,35 @@ class SliverGridComics extends StatefulWidget {
 
   final void Function(Comic)? onTap;
 
+  final void Function(Comic)? onLongPressed;
+
   @override
   State<SliverGridComics> createState() => _SliverGridComicsState();
 }
 
 class _SliverGridComicsState extends State<SliverGridComics> {
   List<Comic> comics = [];
+  List<int> heroIDs = [];
+
+  static int _nextHeroID = 0;
+
+  void generateHeroID() {
+    heroIDs.clear();
+    for (var i = 0; i < comics.length; i++) {
+      heroIDs.add(_nextHeroID++);
+    }
+  }
 
   @override
   void didUpdateWidget(covariant SliverGridComics oldWidget) {
-    if (oldWidget.comics != widget.comics) {
+    if (!oldWidget.comics.isEqualTo(widget.comics)) {
       comics.clear();
       for (var comic in widget.comics) {
         if (isBlocked(comic) == null) {
           comics.add(comic);
         }
       }
+      generateHeroID();
     }
     super.didUpdateWidget(oldWidget);
   }
@@ -676,9 +789,17 @@ class _SliverGridComicsState extends State<SliverGridComics> {
         comics.add(comic);
       }
     }
+    generateHeroID();
+    HistoryManager().addListener(update);
     super.initState();
   }
 
+  @override
+  void dispose() {
+    HistoryManager().removeListener(update);
+    super.dispose();
+  }
+
   void update() {
     setState(() {
       comics.clear();
@@ -694,11 +815,13 @@ class _SliverGridComicsState extends State<SliverGridComics> {
   Widget build(BuildContext context) {
     return _SliverGridComics(
       comics: comics,
+      heroIDs: heroIDs,
       selection: widget.selections,
       onLastItemBuild: widget.onLastItemBuild,
       badgeBuilder: widget.badgeBuilder,
       menuBuilder: widget.menuBuilder,
       onTap: widget.onTap,
+      onLongPressed: widget.onLongPressed,
     );
   }
 }
@@ -706,15 +829,19 @@ class _SliverGridComicsState extends State<SliverGridComics> {
 class _SliverGridComics extends StatelessWidget {
   const _SliverGridComics({
     required this.comics,
+    required this.heroIDs,
     this.onLastItemBuild,
     this.badgeBuilder,
     this.menuBuilder,
     this.onTap,
+    this.onLongPressed,
     this.selection,
   });
 
   final List<Comic> comics;
 
+  final List<int> heroIDs;
+
   final Map<Comic, bool>? selection;
 
   final void Function()? onLastItemBuild;
@@ -725,6 +852,8 @@ class _SliverGridComics extends StatelessWidget {
 
   final void Function(Comic)? onTap;
 
+  final void Function(Comic)? onLongPressed;
+
   @override
   Widget build(BuildContext context) {
     return SliverGrid(
@@ -741,14 +870,22 @@ class _SliverGridComics extends StatelessWidget {
             badge: badge,
             menuOptions: menuBuilder?.call(comics[index]),
             onTap: onTap != null ? () => onTap!(comics[index]) : null,
+            onLongPressed: onLongPressed != null
+                ? () => onLongPressed!(comics[index])
+                : null,
+            heroID: heroIDs[index],
           );
-          if(selection == null) {
+          if (selection == null) {
             return comic;
           }
-          return Container(
+          return AnimatedContainer(
+            duration: const Duration(milliseconds: 150),
             decoration: BoxDecoration(
               color: isSelected
-                  ? Theme.of(context).colorScheme.surfaceContainer
+                  ? Theme.of(context)
+                      .colorScheme
+                      .secondaryContainer
+                      .toOpacity(0.72)
                   : null,
               borderRadius: BorderRadius.circular(12),
             ),
@@ -799,6 +936,9 @@ class ComicList extends StatefulWidget {
     this.trailingSliver,
     this.errorLeading,
     this.menuBuilder,
+    this.controller,
+    this.refreshHandlerCallback,
+    this.enablePageStorage = false,
   });
 
   final Future<Res<List<Comic>>> Function(int page)? loadPage;
@@ -813,6 +953,12 @@ class ComicList extends StatefulWidget {
 
   final List<MenuEntry> Function(Comic)? menuBuilder;
 
+  final ScrollController? controller;
+
+  final void Function(VoidCallback c)? refreshHandlerCallback;
+
+  final bool enablePageStorage;
+
   @override
   State<ComicList> createState() => ComicListState();
 }
@@ -830,6 +976,55 @@ class ComicListState extends State<ComicList> {
 
   String? _nextUrl;
 
+  late bool enablePageStorage = widget.enablePageStorage;
+
+  Map<String, dynamic> get state => {
+        'maxPage': _maxPage,
+        'data': _data,
+        'page': _page,
+        'error': _error,
+        'loading': _loading,
+        'nextUrl': _nextUrl,
+      };
+
+  void restoreState(Map<String, dynamic>? state) {
+    if (state == null || !enablePageStorage) {
+      return;
+    }
+    _maxPage = state['maxPage'];
+    _data.clear();
+    _data.addAll(state['data']);
+    _page = state['page'];
+    _error = state['error'];
+    _loading.clear();
+    _loading.addAll(state['loading']);
+    _nextUrl = state['nextUrl'];
+  }
+
+  void storeState() {
+    if (enablePageStorage) {
+      PageStorage.of(context).writeState(context, state);
+    }
+  }
+
+  void refresh() {
+    _data.clear();
+    _page = 1;
+    _maxPage = null;
+    _error = null;
+    _nextUrl = null;
+    _loading.clear();
+    storeState();
+    setState(() {});
+  }
+
+  @override
+  void didChangeDependencies() {
+    super.didChangeDependencies();
+    restoreState(PageStorage.of(context).readState(context));
+    widget.refreshHandlerCallback?.call(refresh);
+  }
+
   void remove(Comic c) {
     if (_data[_page] == null || !_data[_page]!.remove(c)) {
       for (var page in _data.values) {
@@ -977,15 +1172,20 @@ class ComicListState extends State<ComicList> {
           while (_data[page] == null) {
             await _fetchNext();
           }
-          setState(() {});
+          if (mounted) {
+            setState(() {});
+          }
         } catch (e) {
-          setState(() {
-            _error = e.toString();
-          });
+          if (mounted) {
+            setState(() {
+              _error = e.toString();
+            });
+          }
         }
       }
     } finally {
       _loading[page] = false;
+      storeState();
     }
   }
 
@@ -1034,6 +1234,8 @@ class ComicListState extends State<ComicList> {
       );
     }
     return SmoothCustomScrollView(
+      key: enablePageStorage ? PageStorageKey('scroll$_page') : null,
+      controller: widget.controller,
       slivers: [
         if (widget.leadingSliver != null) widget.leadingSliver!,
         if (_maxPage != 1) _buildSliverPageSelector(),
@@ -1267,7 +1469,7 @@ class _RatingWidgetState extends State<RatingWidget> {
     }
     if (full < widget.count) {
       children.add(ClipRect(
-        clipper: SMClipper(rating: star() * widget.size),
+        clipper: _SMClipper(rating: star() * widget.size),
         child: Icon(
           Icons.star,
           size: widget.size,
@@ -1316,10 +1518,10 @@ class _RatingWidgetState extends State<RatingWidget> {
   }
 }
 
-class SMClipper extends CustomClipper<Rect> {
+class _SMClipper extends CustomClipper<Rect> {
   final double rating;
 
-  SMClipper({required this.rating});
+  _SMClipper({required this.rating});
 
   @override
   Rect getClip(Size size) {
@@ -1327,7 +1529,53 @@ class SMClipper extends CustomClipper<Rect> {
   }
 
   @override
-  bool shouldReclip(SMClipper oldClipper) {
+  bool shouldReclip(_SMClipper oldClipper) {
     return rating != oldClipper.rating;
   }
 }
+
+class SimpleComicTile extends StatelessWidget {
+  const SimpleComicTile({super.key, required this.comic, this.onTap});
+
+  final Comic comic;
+
+  final void Function()? onTap;
+
+  @override
+  Widget build(BuildContext context) {
+    var image = _findImageProvider(comic);
+
+    var child = image == null
+        ? const SizedBox()
+        : AnimatedImage(
+            image: image,
+            width: double.infinity,
+            height: double.infinity,
+            fit: BoxFit.cover,
+            filterQuality: FilterQuality.medium,
+          );
+
+    return AnimatedTapRegion(
+      borderRadius: 8,
+      onTap: onTap ??
+          () {
+            context.to(
+              () => ComicPage(
+                id: comic.id,
+                sourceKey: comic.sourceKey,
+              ),
+            );
+          },
+      child: Container(
+        width: 92,
+        height: 114,
+        decoration: BoxDecoration(
+          borderRadius: BorderRadius.circular(8),
+          color: Theme.of(context).colorScheme.secondaryContainer,
+        ),
+        clipBehavior: Clip.antiAlias,
+        child: child,
+      ),
+    );
+  }
+}

lib/components/components.dart

@@ -1,5 +1,3 @@
-library components;
-
 import 'dart:async';
 import 'dart:collection';
 import 'dart:math' as math;
@@ -10,6 +8,7 @@ import 'package:flutter/material.dart';
 import 'package:flutter/rendering.dart';
 import 'package:flutter/scheduler.dart';
 import 'package:flutter/services.dart';
+import 'package:syntax_highlight/syntax_highlight.dart';
 import 'package:venera/foundation/app.dart';
 import 'package:venera/foundation/app_page_route.dart';
 import 'package:venera/foundation/appdata.dart';
@@ -19,13 +18,14 @@ import 'package:venera/foundation/consts.dart';
 import 'package:venera/foundation/favorites.dart';
 import 'package:venera/foundation/history.dart';
 import 'package:venera/foundation/image_provider/cached_image.dart';
+import 'package:venera/foundation/image_provider/history_image_provider.dart';
+import 'package:venera/foundation/image_provider/local_comic_image.dart';
 import 'package:venera/foundation/local.dart';
 import 'package:venera/foundation/res.dart';
 import 'package:venera/network/cloudflare.dart';
-import 'package:venera/pages/comic_page.dart';
+import 'package:venera/pages/comic_details_page/comic_page.dart';
 import 'package:venera/pages/favorites/favorites_page.dart';
 import 'package:venera/utils/ext.dart';
-import 'package:venera/utils/io.dart';
 import 'package:venera/utils/tags_translation.dart';
 import 'package:venera/utils/translations.dart';
 
@@ -46,3 +46,4 @@ part 'side_bar.dart';
 part 'comic.dart';
 part 'effects.dart';
 part 'gesture.dart';
+part 'code.dart';

lib/components/custom_slider.dart

@@ -1,4 +1,5 @@
 import 'package:flutter/material.dart';
+import 'package:venera/foundation/app.dart';
 
 /// patched slider.dart with RtL support
 class _SliderDefaultsM3 extends SliderThemeData {
@@ -15,45 +16,45 @@ class _SliderDefaultsM3 extends SliderThemeData {
   Color? get inactiveTrackColor => _colors.surfaceContainerHighest;
 
   @override
-  Color? get secondaryActiveTrackColor => _colors.primary.withOpacity(0.54);
+  Color? get secondaryActiveTrackColor => _colors.primary.toOpacity(0.54);
 
   @override
-  Color? get disabledActiveTrackColor => _colors.onSurface.withOpacity(0.38);
+  Color? get disabledActiveTrackColor => _colors.onSurface.toOpacity(0.38);
 
   @override
-  Color? get disabledInactiveTrackColor => _colors.onSurface.withOpacity(0.12);
+  Color? get disabledInactiveTrackColor => _colors.onSurface.toOpacity(0.12);
 
   @override
-  Color? get disabledSecondaryActiveTrackColor => _colors.onSurface.withOpacity(0.12);
+  Color? get disabledSecondaryActiveTrackColor => _colors.onSurface.toOpacity(0.12);
 
   @override
-  Color? get activeTickMarkColor => _colors.onPrimary.withOpacity(0.38);
+  Color? get activeTickMarkColor => _colors.onPrimary.toOpacity(0.38);
 
   @override
-  Color? get inactiveTickMarkColor => _colors.onSurfaceVariant.withOpacity(0.38);
+  Color? get inactiveTickMarkColor => _colors.onSurfaceVariant.toOpacity(0.38);
 
   @override
-  Color? get disabledActiveTickMarkColor => _colors.onSurface.withOpacity(0.38);
+  Color? get disabledActiveTickMarkColor => _colors.onSurface.toOpacity(0.38);
 
   @override
-  Color? get disabledInactiveTickMarkColor => _colors.onSurface.withOpacity(0.38);
+  Color? get disabledInactiveTickMarkColor => _colors.onSurface.toOpacity(0.38);
 
   @override
   Color? get thumbColor => _colors.primary;
 
   @override
-  Color? get disabledThumbColor => Color.alphaBlend(_colors.onSurface.withOpacity(0.38), _colors.surface);
+  Color? get disabledThumbColor => Color.alphaBlend(_colors.onSurface.toOpacity(0.38), _colors.surface);
 
   @override
   Color? get overlayColor => WidgetStateColor.resolveWith((Set<WidgetState> states) {
     if (states.contains(WidgetState.dragged)) {
-      return _colors.primary.withOpacity(0.1);
+      return _colors.primary.toOpacity(0.1);
     }
     if (states.contains(WidgetState.hovered)) {
-      return _colors.primary.withOpacity(0.08);
+      return _colors.primary.toOpacity(0.08);
     }
     if (states.contains(WidgetState.focused)) {
-      return _colors.primary.withOpacity(0.1);
+      return _colors.primary.toOpacity(0.1);
     }
 
     return Colors.transparent;

lib/components/flyout.dart

@@ -141,7 +141,7 @@ class FlyoutState extends State<Flyout> {
                     animation: animation,
                     builder: (context, builder) {
                       return ColoredBox(
-                        color: Colors.black.withOpacity(0.3 * animation.value),
+                        color: Colors.black.toOpacity(0.3 * animation.value),
                       );
                     },
                   ),
@@ -185,12 +185,18 @@ class FlyoutContent extends StatelessWidget {
         child: Material(
           borderRadius: BorderRadius.circular(8),
           type: MaterialType.card,
-          color: context.colorScheme.surface.withOpacity(0.82),
+          color: context.colorScheme.surface.toOpacity(0.82),
           child: Container(
             constraints: const BoxConstraints(
               minWidth: minFlyoutWidth,
             ),
             padding: const EdgeInsets.symmetric(vertical: 8, horizontal: 16),
+            decoration: BoxDecoration(
+              borderRadius: BorderRadius.circular(8),
+              border: context.brightness == ui.Brightness.dark
+                  ? Border.all(color: context.colorScheme.outlineVariant)
+                  : null,
+            ),
             child: Column(
               mainAxisSize: MainAxisSize.min,
               crossAxisAlignment: CrossAxisAlignment.start,
@@ -215,108 +221,3 @@ class FlyoutContent extends StatelessWidget {
     );
   }
 }
-
-class FlyoutTextButton extends StatefulWidget {
-  const FlyoutTextButton(
-      {super.key,
-      required this.child,
-      required this.flyoutBuilder,
-      this.navigator});
-
-  final Widget child;
-
-  final WidgetBuilder flyoutBuilder;
-
-  final NavigatorState? navigator;
-
-  @override
-  State<FlyoutTextButton> createState() => _FlyoutTextButtonState();
-}
-
-class _FlyoutTextButtonState extends State<FlyoutTextButton> {
-  final FlyoutController _controller = FlyoutController();
-
-  @override
-  Widget build(BuildContext context) {
-    return Flyout(
-        controller: _controller,
-        flyoutBuilder: widget.flyoutBuilder,
-        navigator: widget.navigator,
-        child: TextButton(
-          onPressed: () {
-            _controller.show();
-          },
-          child: widget.child,
-        ));
-  }
-}
-
-class FlyoutIconButton extends StatefulWidget {
-  const FlyoutIconButton(
-      {super.key,
-      required this.icon,
-      required this.flyoutBuilder,
-      this.navigator});
-
-  final Widget icon;
-
-  final WidgetBuilder flyoutBuilder;
-
-  final NavigatorState? navigator;
-
-  @override
-  State<FlyoutIconButton> createState() => _FlyoutIconButtonState();
-}
-
-class _FlyoutIconButtonState extends State<FlyoutIconButton> {
-  final FlyoutController _controller = FlyoutController();
-
-  @override
-  Widget build(BuildContext context) {
-    return Flyout(
-        controller: _controller,
-        flyoutBuilder: widget.flyoutBuilder,
-        navigator: widget.navigator,
-        child: IconButton(
-          onPressed: () {
-            _controller.show();
-          },
-          icon: widget.icon,
-        ));
-  }
-}
-
-class FlyoutFilledButton extends StatefulWidget {
-  const FlyoutFilledButton(
-      {super.key,
-      required this.child,
-      required this.flyoutBuilder,
-      this.navigator});
-
-  final Widget child;
-
-  final WidgetBuilder flyoutBuilder;
-
-  final NavigatorState? navigator;
-
-  @override
-  State<FlyoutFilledButton> createState() => _FlyoutFilledButtonState();
-}
-
-class _FlyoutFilledButtonState extends State<FlyoutFilledButton> {
-  final FlyoutController _controller = FlyoutController();
-
-  @override
-  Widget build(BuildContext context) {
-    return Flyout(
-        controller: _controller,
-        flyoutBuilder: widget.flyoutBuilder,
-        navigator: widget.navigator,
-        child: ElevatedButton(
-          onPressed: () {
-            _controller.show();
-          },
-          child: widget.child,
-        ));
-  }
-}

lib/components/gesture.dart

@@ -1,7 +1,8 @@
 part of 'components.dart';
 
 class MouseBackDetector extends StatelessWidget {
-  const MouseBackDetector({super.key, required this.onTapDown, required this.child});
+  const MouseBackDetector(
+      {super.key, required this.onTapDown, required this.child});
 
   final Widget child;
 
@@ -20,3 +21,52 @@ class MouseBackDetector extends StatelessWidget {
     );
   }
 }
+
+class AnimatedTapRegion extends StatefulWidget {
+  const AnimatedTapRegion({
+    super.key,
+    required this.child,
+    required this.onTap,
+    this.borderRadius = 0,
+  });
+
+  final Widget child;
+
+  final void Function() onTap;
+
+  final double borderRadius;
+
+  @override
+  State<AnimatedTapRegion> createState() => _AnimatedTapRegionState();
+}
+
+class _AnimatedTapRegionState extends State<AnimatedTapRegion> {
+  bool isHovered = false;
+
+  @override
+  Widget build(BuildContext context) {
+    return MouseRegion(
+      onEnter: (_) {
+        setState(() {
+          isHovered = true;
+        });
+      },
+      onExit: (_) {
+        setState(() {
+          isHovered = false;
+        });
+      },
+      child: GestureDetector(
+        onTap: widget.onTap,
+        child: AnimatedPhysicalModel(
+          duration: _fastAnimationDuration,
+          elevation: isHovered ? 3 : 1,
+          color: context.colorScheme.surface,
+          shadowColor: context.colorScheme.shadow,
+          borderRadius: BorderRadius.circular(widget.borderRadius),
+          child: widget.child,
+        ),
+      ),
+    );
+  }
+}

lib/components/image.dart

@@ -22,6 +22,7 @@ class AnimatedImage extends StatefulWidget {
     this.filterQuality = FilterQuality.medium,
     this.isAntiAlias = false,
     this.part,
+    this.onError,
     Map<String, String>? headers,
     int? cacheWidth,
     int? cacheHeight,
@@ -63,6 +64,8 @@ class AnimatedImage extends StatefulWidget {
 
   final ImagePart? part;
 
+  final Function? onError;
+
   static void clear() => _AnimatedImageState.clear();
 
   @override
@@ -169,6 +172,8 @@ class _AnimatedImageState extends State<AnimatedImage>
         _handleImageFrame,
         onChunk: _handleImageChunk,
         onError: (Object error, StackTrace? stackTrace) {
+          // 图片加错错误回调
+          widget.onError?.call(error, stackTrace);
           setState(() {
             _lastException = error;
           });
@@ -271,36 +276,39 @@ class _AnimatedImageState extends State<AnimatedImage>
     Widget result;
 
     if (_imageInfo != null) {
-      if(widget.part != null) {
-        return CustomPaint(
+      if (widget.part != null) {
+        result =  CustomPaint(
+          isComplex: true,
           painter: ImagePainter(
             image: _imageInfo!.image,
             part: widget.part!,
+            fit: widget.fit ?? BoxFit.cover,
           ),
           child: SizedBox(
             width: widget.width,
             height: widget.height,
           ),
         );
+      } else {
+        result = RawImage(
+          image: _imageInfo?.image,
+          width: widget.width,
+          height: widget.height,
+          debugImageLabel: _imageInfo?.debugLabel,
+          scale: _imageInfo?.scale ?? 1.0,
+          color: widget.color,
+          opacity: widget.opacity,
+          colorBlendMode: widget.colorBlendMode,
+          fit: BoxFit.cover,
+          alignment: widget.alignment,
+          repeat: widget.repeat,
+          centerSlice: widget.centerSlice,
+          matchTextDirection: widget.matchTextDirection,
+          invertColors: _invertColors,
+          isAntiAlias: widget.isAntiAlias,
+          filterQuality: widget.filterQuality,
+        );
       }
-      result = RawImage(
-        image: _imageInfo?.image,
-        width: widget.width,
-        height: widget.height,
-        debugImageLabel: _imageInfo?.debugLabel,
-        scale: _imageInfo?.scale ?? 1.0,
-        color: widget.color,
-        opacity: widget.opacity,
-        colorBlendMode: widget.colorBlendMode,
-        fit: BoxFit.cover,
-        alignment: widget.alignment,
-        repeat: widget.repeat,
-        centerSlice: widget.centerSlice,
-        matchTextDirection: widget.matchTextDirection,
-        invertColors: _invertColors,
-        isAntiAlias: widget.isAntiAlias,
-        filterQuality: widget.filterQuality,
-      );
     } else if (_lastException != null) {
       result = const Center(
         child: Icon(Icons.error),
@@ -357,10 +365,13 @@ class ImagePainter extends CustomPainter {
 
   final ImagePart part;
 
+  final BoxFit fit;
+
   /// Render a part of the image.
   const ImagePainter({
     required this.image,
     this.part = const ImagePart(),
+    this.fit = BoxFit.cover,
   });
 
   @override
@@ -372,7 +383,8 @@ class ImagePainter extends CustomPainter {
         part.y2 ?? image.height.toDouble(),
       ),
     );
-    final Rect dst = Offset.zero & size;
+    var fitted = applyBoxFit(fit, Size(src.width, src.height), size).destination;
+    var dst = Alignment.center.inscribe(fitted, Offset.zero & size);
     canvas.drawImageRect(image, src, dst, Paint());
   }
 

lib/components/js_ui.dart

@@ -0,0 +1,242 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_qjs/flutter_qjs.dart';
+import 'package:url_launcher/url_launcher_string.dart';
+import 'package:venera/foundation/app.dart';
+import 'package:venera/foundation/js_engine.dart';
+
+import 'components.dart';
+
+mixin class JsUiApi {
+  final Map<int, LoadingDialogController> _loadingDialogControllers = {};
+
+  dynamic handleUIMessage(Map<String, dynamic> message) {
+    switch (message['function']) {
+      case 'showMessage':
+        var m = message['message'];
+        if (m.toString().isNotEmpty) {
+          App.rootContext.showMessage(message: m.toString());
+        }
+      case 'showDialog':
+        return _showDialog(message);
+      case 'launchUrl':
+        var url = message['url'];
+        if (url.toString().isNotEmpty) {
+          launchUrlString(url.toString());
+        }
+      case 'showLoading':
+        var onCancel = message['onCancel'];
+        if (onCancel != null && onCancel is! JSInvokable) {
+          return;
+        }
+        return _showLoading(onCancel);
+      case 'cancelLoading':
+        var id = message['id'];
+        if (id is int) {
+          _cancelLoading(id);
+        }
+      case 'showInputDialog':
+        var title = message['title'];
+        var validator = message['validator'];
+        if (title is! String) return;
+        if (validator != null && validator is! JSInvokable) return;
+        return _showInputDialog(title, validator);
+      case 'showSelectDialog':
+        var title = message['title'];
+        var options = message['options'];
+        var initialIndex = message['initialIndex'];
+        if (title is! String) return;
+        if (options is! List) return;
+        if (initialIndex != null && initialIndex is! int) return;
+        return _showSelectDialog(
+          title,
+          options.whereType<String>().toList(),
+          initialIndex,
+        );
+    }
+  }
+
+  Future<void> _showDialog(Map<String, dynamic> message) {
+    BuildContext? dialogContext;
+    var title = message['title'];
+    var content = message['content'];
+    var actions = <Widget>[];
+    for (var action in message['actions']) {
+      if (action['callback'] is! JSInvokable) {
+        continue;
+      }
+      var callback = action['callback'] as JSInvokable;
+      var text = action['text'].toString();
+      var style = (action['style'] ?? 'text').toString();
+      actions.add(_JSCallbackButton(
+        text: text,
+        callback: JSAutoFreeFunction(callback),
+        style: style,
+        onCallbackFinished: () {
+          dialogContext?.pop();
+        },
+      ));
+    }
+    if (actions.isEmpty) {
+      actions.add(TextButton(
+        onPressed: () {
+          dialogContext?.pop();
+        },
+        child: Text('OK'),
+      ));
+    }
+    return showDialog(
+      context: App.rootContext,
+      builder: (context) {
+        dialogContext = context;
+        return ContentDialog(
+          title: title,
+          content: Text(content).paddingHorizontal(16),
+          actions: actions,
+        );
+      },
+    ).then((value) {
+      dialogContext = null;
+    });
+  }
+
+  int _showLoading(JSInvokable? onCancel) {
+    var func = onCancel == null ? null : JSAutoFreeFunction(onCancel);
+    var controller = showLoadingDialog(
+      App.rootContext,
+      barrierDismissible: onCancel != null,
+      allowCancel: onCancel != null,
+      onCancel: onCancel == null
+          ? null
+          : () {
+              func?.call([]);
+            },
+    );
+    var i = 0;
+    while (_loadingDialogControllers.containsKey(i)) {
+      i++;
+    }
+    _loadingDialogControllers[i] = controller;
+    return i;
+  }
+
+  void _cancelLoading(int id) {
+    var controller = _loadingDialogControllers.remove(id);
+    controller?.close();
+  }
+
+  Future<String?> _showInputDialog(String title, JSInvokable? validator) async {
+    String? result;
+    var func = validator == null ? null : JSAutoFreeFunction(validator);
+    await showInputDialog(
+      context: App.rootContext,
+      title: title,
+      onConfirm: (v) {
+        if (func != null) {
+          var res = func.call([v]);
+          if (res != null) {
+            return res.toString();
+          } else {
+            result = v;
+          }
+        } else {
+          result = v;
+        }
+        return null;
+      },
+    );
+    return result;
+  }
+
+  Future<int?> _showSelectDialog(
+    String title,
+    List<String> options,
+    int? initialIndex,
+  ) {
+    if (options.isEmpty) {
+      return Future.value(null);
+    }
+    if (initialIndex != null &&
+        (initialIndex >= options.length || initialIndex < 0)) {
+      initialIndex = null;
+    }
+    return showSelectDialog(
+      title: title,
+      options: options,
+      initialIndex: initialIndex,
+    );
+  }
+}
+
+class _JSCallbackButton extends StatefulWidget {
+  const _JSCallbackButton({
+    required this.text,
+    required this.callback,
+    required this.style,
+    this.onCallbackFinished,
+  });
+
+  final JSAutoFreeFunction callback;
+
+  final String text;
+
+  final String style;
+
+  final void Function()? onCallbackFinished;
+
+  @override
+  State<_JSCallbackButton> createState() => _JSCallbackButtonState();
+}
+
+class _JSCallbackButtonState extends State<_JSCallbackButton> {
+  bool isLoading = false;
+
+  void onClick() async {
+    if (isLoading) {
+      return;
+    }
+    var res = widget.callback.call([]);
+    if (res is Future) {
+      setState(() {
+        isLoading = true;
+      });
+      await res;
+      setState(() {
+        isLoading = false;
+      });
+    }
+    widget.onCallbackFinished?.call();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return switch (widget.style) {
+      "filled" => FilledButton(
+          onPressed: onClick,
+          child: isLoading
+              ? CircularProgressIndicator(strokeWidth: 1.4)
+                  .fixWidth(18)
+                  .fixHeight(18)
+              : Text(widget.text),
+        ),
+      "danger" => FilledButton(
+          onPressed: onClick,
+          style: ButtonStyle(
+            backgroundColor: WidgetStateProperty.all(context.colorScheme.error),
+          ),
+          child: isLoading
+              ? CircularProgressIndicator(strokeWidth: 1.4)
+                  .fixWidth(18)
+                  .fixHeight(18)
+              : Text(widget.text),
+        ),
+      _ => TextButton(
+          onPressed: onClick,
+          child: isLoading
+              ? CircularProgressIndicator(strokeWidth: 1.4)
+                  .fixWidth(18)
+                  .fixHeight(18)
+              : Text(widget.text),
+        ),
+    };
+  }
+}

lib/components/layout.dart

@@ -2,7 +2,10 @@ part of 'components.dart';
 
 class SliverGridViewWithFixedItemHeight extends StatelessWidget {
   const SliverGridViewWithFixedItemHeight(
-      {required this.delegate, required this.maxCrossAxisExtent, required this.itemHeight, super.key});
+      {required this.delegate,
+      required this.maxCrossAxisExtent,
+      required this.itemHeight,
+      super.key});
 
   final SliverChildDelegate delegate;
 
@@ -62,7 +65,8 @@ class SliverGridDelegateWithFixedHeight extends SliverGridDelegate {
   @override
   bool shouldRelayout(covariant SliverGridDelegate oldDelegate) {
     if (oldDelegate is! SliverGridDelegateWithFixedHeight) return true;
-    if (oldDelegate.maxCrossAxisExtent != maxCrossAxisExtent || oldDelegate.itemHeight != itemHeight) {
+    if (oldDelegate.maxCrossAxisExtent != maxCrossAxisExtent ||
+        oldDelegate.itemHeight != itemHeight) {
       return true;
     }
     return false;
@@ -70,28 +74,29 @@ class SliverGridDelegateWithFixedHeight extends SliverGridDelegate {
 }
 
 class SliverGridDelegateWithComics extends SliverGridDelegate {
-  SliverGridDelegateWithComics([this.useBriefMode = false, this.scale]);
+  SliverGridDelegateWithComics();
 
-  final bool useBriefMode;
+  final bool useBriefMode = appdata.settings['comicDisplayMode'] == 'brief';
 
-  final double? scale;
+  final double scale = (appdata.settings['comicTileScale'] as num).toDouble();
 
   @override
   SliverGridLayout getLayout(SliverConstraints constraints) {
-    if (appdata.settings['comicDisplayMode'] == 'brief' || useBriefMode) {
+    if (useBriefMode) {
       return getBriefModeLayout(
         constraints,
-        scale ?? (appdata.settings['comicTileScale'] as num).toDouble(),
+        scale,
       );
     } else {
       return getDetailedModeLayout(
         constraints,
-        scale ?? (appdata.settings['comicTileScale'] as num).toDouble(),
+        scale,
       );
     }
   }
 
-  SliverGridLayout getDetailedModeLayout(SliverConstraints constraints, double scale) {
+  SliverGridLayout getDetailedModeLayout(
+      SliverConstraints constraints, double scale) {
     const minCrossAxisExtent = 360;
     final itemHeight = 152 * scale;
     final width = constraints.crossAxisExtent;
@@ -106,11 +111,14 @@ class SliverGridDelegateWithComics extends SliverGridDelegate {
         reverseCrossAxis: false);
   }
 
-  SliverGridLayout getBriefModeLayout(SliverConstraints constraints, double scale) {
+  SliverGridLayout getBriefModeLayout(
+      SliverConstraints constraints, double scale) {
     final maxCrossAxisExtent = 192.0 * scale;
-    const childAspectRatio = 0.68;
+    const childAspectRatio = 0.64;
     const crossAxisSpacing = 0.0;
-    int crossAxisCount = (constraints.crossAxisExtent / (maxCrossAxisExtent + crossAxisSpacing)).ceil();
+    int crossAxisCount =
+        (constraints.crossAxisExtent / (maxCrossAxisExtent + crossAxisSpacing))
+            .ceil();
     // Ensure a minimum count of 1, can be zero and result in an infinite extent
     // below when the window size is 0.
     crossAxisCount = math.max(1, crossAxisCount);
@@ -132,6 +140,26 @@ class SliverGridDelegateWithComics extends SliverGridDelegate {
 
   @override
   bool shouldRelayout(covariant SliverGridDelegate oldDelegate) {
-    return true;
+    if (oldDelegate is! SliverGridDelegateWithComics) return true;
+    if (oldDelegate.scale != scale ||
+        oldDelegate.useBriefMode != useBriefMode) {
+      return true;
+    }
+    return false;
+  }
+}
+
+class SliverLazyToBoxAdapter extends StatelessWidget {
+  /// Creates a sliver that contains a single box widget which can be lazy loaded.
+  const SliverLazyToBoxAdapter({super.key, required this.child});
+
+  final Widget child;
+
+  @override
+  Widget build(BuildContext context) {
+    return SliverList.list(children: [
+      SizedBox(),
+      child,
+    ]);
   }
 }

lib/components/loading.dart

@@ -6,6 +6,7 @@ class NetworkError extends StatelessWidget {
     required this.message,
     this.retry,
     this.withAppbar = true,
+    this.buttonText,
   });
 
   final String message;
@@ -14,6 +15,8 @@ class NetworkError extends StatelessWidget {
 
   final bool withAppbar;
 
+  final String? buttonText;
+
   @override
   Widget build(BuildContext context) {
     var cfe = CloudflareException.fromString(message);
@@ -54,13 +57,15 @@ class NetworkError extends StatelessWidget {
             if (cfe != null)
               FilledButton(
                 onPressed: () => passCloudflare(
-                    CloudflareException.fromString(message)!, retry!),
+                  CloudflareException.fromString(message)!,
+                  retry!,
+                ),
                 child: Text('Verify'.tl),
               )
             else
               FilledButton(
                 onPressed: retry,
-                child: Text('Retry'.tl),
+                child: Text(buttonText ?? 'Retry'.tl),
               ),
         ],
       ),
@@ -96,6 +101,20 @@ class ListLoadingIndicator extends StatelessWidget {
   }
 }
 
+class SliverListLoadingIndicator extends StatelessWidget {
+  const SliverListLoadingIndicator({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    // SliverToBoxAdapter can not been lazy loaded.
+    // Use SliverList to make sure the animation can be lazy loaded.
+    return SliverList.list(children: const [
+      SizedBox(),
+      ListLoadingIndicator(),
+    ]);
+  }
+}
+
 abstract class LoadingState<T extends StatefulWidget, S extends Object>
     extends State<T> {
   bool isLoading = false;
@@ -113,7 +132,7 @@ abstract class LoadingState<T extends StatefulWidget, S extends Object>
       if (res.success) {
         return res;
       } else {
-        if(!mounted) return res;
+        if (!mounted) return res;
         if (retry >= 3) {
           return res;
         }
@@ -171,7 +190,7 @@ abstract class LoadingState<T extends StatefulWidget, S extends Object>
     isLoading = true;
     Future.microtask(() {
       loadDataWithRetry().then((value) async {
-        if(!mounted) return;
+        if (!mounted) return;
         if (value.success) {
           data = value.data;
           await onDataLoaded();
@@ -299,28 +318,16 @@ abstract class MultiPageLoadingState<T extends StatefulWidget, S extends Object>
 
   Widget buildLoading(BuildContext context) {
     return Center(
-      child: const CircularProgressIndicator(
-        strokeWidth: 2,
-      ).fixWidth(32).fixHeight(32),
+      child: const CircularProgressIndicator().fixWidth(32).fixHeight(32),
     );
   }
 
   Widget buildError(BuildContext context, String error) {
-    return Center(
-      child: Column(
-        mainAxisSize: MainAxisSize.min,
-        children: [
-          Text(error, maxLines: 3),
-          const SizedBox(height: 12),
-          Button.outlined(
-            onPressed: () {
-              reset();
-            },
-            child: const Text("Retry"),
-          )
-        ],
-      ),
-    ).paddingHorizontal(16);
+    return NetworkError(
+      withAppbar: false,
+      message: error,
+      retry: reset,
+    );
   }
 
   @override

lib/components/menu.dart

@@ -20,17 +20,22 @@ class _MenuRoute<T> extends PopupRoute<T> {
   @override
   String? get barrierLabel => "menu";
 
+  double get entryHeight => App.isMobile ? 42 : 36;
+
   @override
   Widget buildPage(BuildContext context, Animation<double> animation,
       Animation<double> secondaryAnimation) {
     var width = entries.first.icon == null ? 216.0 : 242.0;
     final size = MediaQuery.of(context).size;
     var left = location.dx;
+    if (left < 10) {
+      left = 10;
+    } 
     if (left + width > size.width - 10) {
       left = size.width - width - 10;
     }
     var top = location.dy;
-    var height = 16 + 32 * entries.length;
+    var height = 16 + entryHeight * entries.length;
     if (top + height > size.height - 15) {
       top = size.height - height - 15;
     }
@@ -42,9 +47,12 @@ class _MenuRoute<T> extends PopupRoute<T> {
           child: Container(
             decoration: BoxDecoration(
               borderRadius: BorderRadius.circular(4),
+              border: context.brightness == Brightness.dark
+                  ? Border.all(color: context.colorScheme.outlineVariant)
+                  : null,
               boxShadow: [
                 BoxShadow(
-                  color: context.colorScheme.shadow.withOpacity(0.2),
+                  color: context.colorScheme.shadow.toOpacity(0.2),
                   blurRadius: 8,
                   blurStyle: BlurStyle.outer,
                 ),
@@ -53,9 +61,7 @@ class _MenuRoute<T> extends PopupRoute<T> {
             child: BlurEffect(
               borderRadius: BorderRadius.circular(4),
               child: Material(
-                color: context.brightness == Brightness.light
-                    ? const Color(0xFFFAFAFA).withOpacity(0.82)
-                    : const Color(0xFF090909).withOpacity(0.82),
+                color: context.colorScheme.surface.toOpacity(0.78),
                 borderRadius: BorderRadius.circular(4),
                 child: Container(
                   width: width,
@@ -83,7 +89,7 @@ class _MenuRoute<T> extends PopupRoute<T> {
         entry.onClick();
       },
       child: SizedBox(
-        height: App.isMobile ? 42 : 36,
+        height: entryHeight,
         child: Padding(
           padding: const EdgeInsets.symmetric(horizontal: 12),
           child: Row(
@@ -92,9 +98,13 @@ class _MenuRoute<T> extends PopupRoute<T> {
                 Icon(
                   entry.icon,
                   size: 18,
+                  color: entry.color
                 ),
               const SizedBox(width: 12),
-              Text(entry.text),
+              Text(
+                  entry.text,
+                  style: TextStyle(color: entry.color)
+              ),
             ],
           ),
         ),
@@ -119,7 +129,8 @@ class _MenuRoute<T> extends PopupRoute<T> {
 class MenuEntry {
   final String text;
   final IconData? icon;
+  final Color? color;
   final void Function() onClick;
 
-  MenuEntry({required this.text, this.icon, required this.onClick});
+  MenuEntry({required this.text, this.icon, this.color, required this.onClick});
 }

lib/components/message.dart

@@ -5,6 +5,7 @@ void showToast({
   required BuildContext context,
   Widget? icon,
   Widget? trailing,
+  int? seconds,
 }) {
   var newEntry = OverlayEntry(
       builder: (context) => _ToastOverlay(
@@ -17,7 +18,7 @@ void showToast({
 
   state?.addOverlay(newEntry);
 
-  Timer(const Duration(seconds: 2), () => state?.remove(newEntry));
+  Timer(Duration(seconds: seconds ?? 2), () => state?.remove(newEntry));
 }
 
 class _ToastOverlay extends StatelessWidget {
@@ -46,21 +47,29 @@ class _ToastOverlay extends StatelessWidget {
           child: IconTheme(
             data: IconThemeData(
                 color: Theme.of(context).colorScheme.onInverseSurface),
-            child: Container(
-              padding: const EdgeInsets.symmetric(vertical: 6, horizontal: 16),
-              child: Row(
-                mainAxisSize: MainAxisSize.min,
-                children: [
-                  if (icon != null) icon!.paddingRight(8),
-                  Text(
-                    message,
-                    style: const TextStyle(
-                        fontSize: 16, fontWeight: FontWeight.w500),
-                    maxLines: 3,
-                    overflow: TextOverflow.ellipsis,
-                  ),
-                  if (trailing != null) trailing!.paddingLeft(8)
-                ],
+            child: IntrinsicWidth(
+              child: Container(
+                padding:
+                    const EdgeInsets.symmetric(vertical: 6, horizontal: 16),
+                constraints: BoxConstraints(
+                  maxWidth: context.width - 32,
+                ),
+                child: Row(
+                  mainAxisSize: MainAxisSize.min,
+                  children: [
+                    if (icon != null) icon!.paddingRight(8),
+                    Expanded(
+                      child: Text(
+                        message,
+                        style: const TextStyle(
+                            fontSize: 16, fontWeight: FontWeight.w500),
+                        maxLines: 3,
+                        overflow: TextOverflow.ellipsis,
+                      ),
+                    ),
+                    if (trailing != null) trailing!.paddingLeft(8)
+                  ],
+                ),
               ),
             ),
           ),
@@ -116,11 +125,11 @@ class OverlayWidgetState extends State<OverlayWidget> {
 void showDialogMessage(BuildContext context, String title, String message) {
   showDialog(
     context: context,
-    builder: (context) => AlertDialog(
-      title: Text(title),
-      content: Text(message),
+    builder: (context) => ContentDialog(
+      title: title,
+      content: Text(message).paddingHorizontal(16),
       actions: [
-        TextButton(
+        FilledButton(
           onPressed: context.pop,
           child: Text("OK".tl),
         )
@@ -135,6 +144,7 @@ Future<void> showConfirmDialog({
   required String content,
   required void Function() onConfirm,
   String confirmText = "Confirm",
+  Color? btnColor,
 }) {
   return showDialog(
     context: context,
@@ -147,6 +157,9 @@ Future<void> showConfirmDialog({
             context.pop();
             onConfirm();
           },
+          style: FilledButton.styleFrom(
+            backgroundColor: btnColor,
+          ),
           child: Text(confirmText.tl),
         ),
       ],
@@ -155,7 +168,15 @@ Future<void> showConfirmDialog({
 }
 
 class LoadingDialogController {
-  void Function()? closeDialog;
+  double? _progress;
+
+  String? _message;
+
+  void Function()? _closeDialog;
+
+  void Function(double? value)? _serProgress;
+
+  void Function(String message)? _setMessage;
 
   bool closed = false;
 
@@ -164,63 +185,86 @@ class LoadingDialogController {
       return;
     }
     closed = true;
-    if (closeDialog == null) {
-      Future.microtask(closeDialog!);
+    if (_closeDialog == null) {
+      Future.microtask(_closeDialog!);
     } else {
-      closeDialog!();
+      _closeDialog!();
     }
   }
+
+  void setProgress(double? value) {
+    if (closed) {
+      return;
+    }
+    _serProgress?.call(value);
+  }
+
+  void setMessage(String message) {
+    if (closed) {
+      return;
+    }
+    _setMessage?.call(message);
+  }
 }
 
-LoadingDialogController showLoadingDialog(BuildContext context,
-    {void Function()? onCancel,
-    bool barrierDismissible = true,
-    bool allowCancel = true,
-    String? message,
-    String cancelButtonText = "Cancel"}) {
+LoadingDialogController showLoadingDialog(
+  BuildContext context, {
+  void Function()? onCancel,
+  bool barrierDismissible = true,
+  bool allowCancel = true,
+  String? message,
+  String cancelButtonText = "Cancel",
+  bool withProgress = false,
+}) {
   var controller = LoadingDialogController();
+  controller._message = message;
+
+  if (withProgress) {
+    controller._progress = 0;
+  }
 
   var loadingDialogRoute = DialogRoute(
-      context: context,
-      barrierDismissible: barrierDismissible,
-      builder: (BuildContext context) {
-        return Dialog(
-          child: Container(
-            width: 100,
-            padding: const EdgeInsets.all(16.0),
-            child: Row(
-              children: [
-                const SizedBox(
-                  width: 30,
-                  height: 30,
-                  child: CircularProgressIndicator(),
-                ),
-                const SizedBox(
-                  width: 16,
-                ),
-                Text(
-                  message ?? 'Loading',
-                  style: const TextStyle(fontSize: 16),
-                ),
-                const Spacer(),
-                if (allowCancel)
-                  TextButton(
-                      onPressed: () {
-                        controller.close();
-                        onCancel?.call();
-                      },
-                      child: Text(cancelButtonText.tl))
-              ],
-            ),
-          ),
+    context: context,
+    barrierDismissible: barrierDismissible,
+    builder: (BuildContext context) {
+      return StatefulBuilder(builder: (context, setState) {
+        controller._serProgress = (value) {
+          setState(() {
+            controller._progress = value;
+          });
+        };
+        controller._setMessage = (message) {
+          setState(() {
+            controller._message = message;
+          });
+        };
+        return ContentDialog(
+          title: controller._message ?? 'Loading',
+          content: LinearProgressIndicator(
+            value: controller._progress,
+            backgroundColor: context.colorScheme.surfaceContainer,
+          ).paddingHorizontal(16).paddingVertical(16),
+          actions: [
+            FilledButton(
+              onPressed: allowCancel
+                  ? () {
+                      controller.close();
+                      onCancel?.call();
+                    }
+                  : null,
+              child: Text(cancelButtonText.tl),
+            )
+          ],
         );
       });
+    },
+  );
 
-  var navigator = Navigator.of(context);
+  var navigator = Navigator.of(context, rootNavigator: true);
 
   navigator.push(loadingDialogRoute).then((value) => controller.closed = true);
 
-  controller.closeDialog = () {
+  controller._closeDialog = () {
     navigator.removeRoute(loadingDialogRoute);
   };
 
@@ -230,13 +274,13 @@ LoadingDialogController showLoadingDialog(BuildContext context,
 class ContentDialog extends StatelessWidget {
   const ContentDialog({
     super.key,
-    required this.title,
+    this.title, // 如果不传 title 将不会展示
     required this.content,
     this.dismissible = true,
     this.actions = const [],
   });
 
-  final String title;
+  final String? title;
 
   final Widget content;
 
@@ -250,14 +294,16 @@ class ContentDialog extends StatelessWidget {
       mainAxisSize: MainAxisSize.min,
       crossAxisAlignment: CrossAxisAlignment.start,
       children: [
-        Appbar(
-          leading: IconButton(
-            icon: const Icon(Icons.close),
-            onPressed: dismissible ? context.pop : null,
-          ),
-          title: Text(title),
-          backgroundColor: Colors.transparent,
-        ),
+        title != null
+            ? Appbar(
+                leading: IconButton(
+                  icon: const Icon(Icons.close),
+                  onPressed: dismissible ? context.pop : null,
+                ),
+                title: Text(title!),
+                backgroundColor: Colors.transparent,
+              )
+            : const SizedBox.shrink(),
         this.content,
         const SizedBox(height: 16),
         Row(
@@ -279,6 +325,7 @@ class ContentDialog extends StatelessWidget {
           : const EdgeInsets.symmetric(horizontal: 16),
       elevation: 2,
       shadowColor: context.colorScheme.shadow,
+      backgroundColor: context.colorScheme.surface,
       child: AnimatedSize(
         duration: const Duration(milliseconds: 200),
         alignment: Alignment.topCenter,
@@ -348,7 +395,7 @@ Future<void> showInputDialog({
                   } else {
                     result = futureOr;
                   }
-                  if(result == null) {
+                  if (result == null) {
                     context.pop();
                   } else {
                     setState(() => error = result.toString());
@@ -386,3 +433,57 @@ void showInfoDialog({
     },
   );
 }
+
+Future<int?> showSelectDialog({
+  required String title,
+  required List<String> options,
+  int? initialIndex,
+}) async {
+  int? current = initialIndex;
+
+  await showDialog(
+    context: App.rootContext,
+    builder: (context) {
+      return StatefulBuilder(
+        builder: (context, setState) {
+          return ContentDialog(
+            title: title,
+            content: Padding(
+              padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
+              child: Row(
+                mainAxisAlignment: MainAxisAlignment.center,
+                children: [
+                  Select(
+                    current: current == null ? "" : options[current!],
+                    values: options,
+                    minWidth: 156,
+                    onTap: (i) {
+                      setState(() {
+                        current = i;
+                      });
+                    },
+                  )
+                ],
+              ),
+            ),
+            actions: [
+              TextButton(
+                onPressed: () {
+                  current = null;
+                  context.pop();
+                },
+                child: Text('Cancel'.tl),
+              ),
+              FilledButton(
+                onPressed: current == null ? null : context.pop,
+                child: Text('Confirm'.tl),
+              ),
+            ],
+          );
+        },
+      );
+    },
+  );
+
+  return current;
+}

lib/components/navigation_bar.dart

@@ -23,14 +23,15 @@ class PaneActionEntry {
 }
 
 class NaviPane extends StatefulWidget {
-  const NaviPane({required this.paneItems,
-    required this.paneActions,
-    required this.pageBuilder,
-    this.initialPage = 0,
-    this.onPageChanged,
-    required this.observer,
-    required this.navigatorKey,
-    super.key});
+  const NaviPane(
+      {required this.paneItems,
+      required this.paneActions,
+      required this.pageBuilder,
+      this.initialPage = 0,
+      this.onPageChanged,
+      required this.observer,
+      required this.navigatorKey,
+      super.key});
 
   final List<PaneItemEntry> paneItems;
 
@@ -47,10 +48,16 @@ class NaviPane extends StatefulWidget {
   final GlobalKey<NavigatorState> navigatorKey;
 
   @override
-  State<NaviPane> createState() => _NaviPaneState();
+  State<NaviPane> createState() => NaviPaneState();
+
+  static NaviPaneState of(BuildContext context) {
+    return context.findAncestorStateOfType<NaviPaneState>()!;
+  }
 }
 
-class _NaviPaneState extends State<NaviPane>
+typedef NaviItemTapListener = void Function(int);
+
+class NaviPaneState extends State<NaviPane>
     with SingleTickerProviderStateMixin {
   late int _currentPage = widget.initialPage;
 
@@ -66,28 +73,41 @@ class _NaviPaneState extends State<NaviPane>
 
   late AnimationController controller;
 
+  final _naviItemTapListeners = <NaviItemTapListener>[];
+
+  void addNaviItemTapListener(NaviItemTapListener listener) {
+    _naviItemTapListeners.add(listener);
+  }
+
+  void removeNaviItemTapListener(NaviItemTapListener listener) {
+    _naviItemTapListeners.remove(listener);
+  }
+
   static const _kBottomBarHeight = 58.0;
 
-  static const _kFoldedSideBarWidth = 80.0;
+  static const _kFoldedSideBarWidth = 72.0;
 
-  static const _kSideBarWidth = 256.0;
+  static const _kSideBarWidth = 224.0;
 
   static const _kTopBarHeight = 48.0;
 
   double get bottomBarHeight =>
-      _kBottomBarHeight + MediaQuery
-          .of(context)
-          .padding
-          .bottom;
+      _kBottomBarHeight + MediaQuery.of(context).padding.bottom;
 
   void onNavigatorStateChange() {
     onRebuild(context);
   }
 
   void updatePage(int index) {
+    for (var listener in _naviItemTapListeners) {
+      listener(index);
+    }
     if (widget.observer.routes.length > 1) {
       widget.navigatorKey.currentState!.popUntil((route) => route.isFirst);
     }
+    if (currentPage == index) {
+      return;
+    }
     setState(() {
       currentPage = index;
     });
@@ -114,10 +134,7 @@ class _NaviPaneState extends State<NaviPane>
   }
 
   double targetFormContext(BuildContext context) {
-    var width = MediaQuery
-        .of(context)
-        .size
-        .width;
+    var width = MediaQuery.of(context).size.width;
     double target = 0;
     if (width > changePoint) {
       target = 2;
@@ -183,17 +200,18 @@ class _NaviPaneState extends State<NaviPane>
   }
 
   Widget buildMainView() {
-    return Navigator(
-      observers: [widget.observer],
-      key: widget.navigatorKey,
-      onGenerateRoute: (settings) =>
-          AppPageRoute(
-            preventRebuild: false,
-            isRootRoute: true,
-            builder: (context) {
-              return _NaviMainView(state: this);
-            },
-          ),
+    return HeroControllerScope(
+      controller: MaterialApp.createMaterialHeroController(),
+      child: Navigator(
+        observers: [widget.observer],
+        key: widget.navigatorKey,
+        onGenerateRoute: (settings) => AppPageRoute(
+          preventRebuild: false,
+          builder: (context) {
+            return _NaviMainView(state: this);
+          },
+        ),
+      ),
     );
   }
 
@@ -230,20 +248,14 @@ class _NaviPaneState extends State<NaviPane>
 
   Widget buildBottom() {
     return Material(
-      textStyle: Theme
-          .of(context)
-          .textTheme
-          .labelSmall,
+      textStyle: Theme.of(context).textTheme.labelSmall,
       elevation: 0,
       child: Container(
         height: _kBottomBarHeight,
         decoration: BoxDecoration(
           border: Border(
             top: BorderSide(
-              color: Theme
-                  .of(context)
-                  .colorScheme
-                  .outlineVariant,
+              color: Theme.of(context).colorScheme.outlineVariant,
               width: 1,
             ),
           ),
@@ -251,7 +263,7 @@ class _NaviPaneState extends State<NaviPane>
         child: Row(
           children: List<Widget>.generate(
             widget.paneItems.length,
-                (index) {
+            (index) {
               return Expanded(
                 child: _SingleBottomNaviWidget(
                   enabled: currentPage == index,
@@ -271,7 +283,7 @@ class _NaviPaneState extends State<NaviPane>
 
   Widget buildLeft() {
     final value = controller.value;
-    const paddingHorizontal = 16.0;
+    const paddingHorizontal = 12.0;
     return Material(
       child: Container(
         width: _kFoldedSideBarWidth +
@@ -281,57 +293,39 @@ class _NaviPaneState extends State<NaviPane>
         decoration: BoxDecoration(
           border: Border(
             right: BorderSide(
-              color: Theme
-                  .of(context)
-                  .colorScheme
-                  .outlineVariant,
-              width: 1,
+              color: Theme.of(context).colorScheme.outlineVariant,
+              width: 1.0,
             ),
           ),
         ),
-        child: Row(
+        child: Column(
           children: [
-            SizedBox(
-              width: value == 3
-                  ? (_kSideBarWidth - paddingHorizontal * 2 - 1)
-                  : (_kFoldedSideBarWidth - paddingHorizontal * 2 - 1),
-              child: Column(
-                children: [
-                  const SizedBox(height: 16),
-                  SizedBox(height: MediaQuery
-                      .of(context)
-                      .padding
-                      .top),
-                  ...List<Widget>.generate(
-                    widget.paneItems.length,
-                        (index) =>
-                        _SideNaviWidget(
-                          enabled: currentPage == index,
-                          entry: widget.paneItems[index],
-                          showTitle: value == 3,
-                          onTap: () {
-                            updatePage(index);
-                          },
-                          key: ValueKey(index),
-                        ),
-                  ),
-                  const Spacer(),
-                  ...List<Widget>.generate(
-                    widget.paneActions.length,
-                        (index) =>
-                        _PaneActionWidget(
-                          entry: widget.paneActions[index],
-                          showTitle: value == 3,
-                          key: ValueKey(index + widget.paneItems.length),
-                        ),
-                  ),
-                  const SizedBox(
-                    height: 16,
-                  )
-                ],
+            const SizedBox(height: 16),
+            SizedBox(height: MediaQuery.of(context).padding.top),
+            ...List<Widget>.generate(
+              widget.paneItems.length,
+              (index) => _SideNaviWidget(
+                enabled: currentPage == index,
+                entry: widget.paneItems[index],
+                showTitle: value == 3,
+                onTap: () {
+                  updatePage(index);
+                },
+                key: ValueKey(index),
               ),
             ),
             const Spacer(),
+            ...List<Widget>.generate(
+              widget.paneActions.length,
+              (index) => _PaneActionWidget(
+                entry: widget.paneActions[index],
+                showTitle: value == 3,
+                key: ValueKey(index + widget.paneItems.length),
+              ),
+            ),
+            const SizedBox(
+              height: 16,
+            )
           ],
         ),
       ),
@@ -339,12 +333,13 @@ class _NaviPaneState extends State<NaviPane>
   }
 }
 
-class _SideNaviWidget extends StatefulWidget {
-  const _SideNaviWidget({required this.enabled,
-    required this.entry,
-    required this.onTap,
-    required this.showTitle,
-    super.key});
+class _SideNaviWidget extends StatelessWidget {
+  const _SideNaviWidget(
+      {required this.enabled,
+      required this.entry,
+      required this.onTap,
+      required this.showTitle,
+      super.key});
 
   final bool enabled;
 
@@ -354,60 +349,35 @@ class _SideNaviWidget extends StatefulWidget {
 
   final bool showTitle;
 
-  @override
-  State<_SideNaviWidget> createState() => _SideNaviWidgetState();
-}
-
-class _SideNaviWidgetState extends State<_SideNaviWidget> {
-  bool isHovering = false;
-
   @override
   Widget build(BuildContext context) {
-    final colorScheme = Theme
-        .of(context)
-        .colorScheme;
-    final icon =
-    Icon(widget.enabled ? widget.entry.activeIcon : widget.entry.icon);
-    return MouseRegion(
-      cursor: SystemMouseCursors.click,
-      onEnter: (details) => setState(() => isHovering = true),
-      onExit: (details) => setState(() => isHovering = false),
-      child: GestureDetector(
-        behavior: HitTestBehavior.translucent,
-        onTap: widget.onTap,
-        child: AnimatedContainer(
-            duration: const Duration(milliseconds: 180),
-            margin: const EdgeInsets.symmetric(vertical: 4),
-            padding: const EdgeInsets.symmetric(horizontal: 12),
-            width: double.infinity,
-            height: 42,
-            decoration: BoxDecoration(
-              color: widget.enabled
-                  ? colorScheme.primaryContainer
-                  : isHovering
-                  ? colorScheme.surfaceContainerHigh
-                  : null,
-              borderRadius: BorderRadius.circular(8),
-            ),
-            child: widget.showTitle
-                ? Row(
-              children: [
-                icon,
-                const SizedBox(
-                  width: 12,
-                ),
-                Text(widget.entry.label)
-              ],
-            )
-                : Center(
-              child: icon,
-            )),
+    final colorScheme = Theme.of(context).colorScheme;
+    final icon = Icon(enabled ? entry.activeIcon : entry.icon);
+    return InkWell(
+      borderRadius: BorderRadius.circular(12),
+      onTap: onTap,
+      child: AnimatedContainer(
+        duration: const Duration(milliseconds: 180),
+        padding: const EdgeInsets.symmetric(horizontal: 12),
+        height: 38,
+        decoration: BoxDecoration(
+          color: enabled ? colorScheme.primaryContainer : null,
+          borderRadius: BorderRadius.circular(12),
+        ),
+        child: showTitle
+            ? Row(
+                children: [icon, const SizedBox(width: 12), Text(entry.label)],
+              )
+            : Align(
+                alignment: Alignment.centerLeft,
+                child: icon,
+              ),
       ),
-    );
+    ).paddingVertical(4);
   }
 }
 
-class _PaneActionWidget extends StatefulWidget {
+class _PaneActionWidget extends StatelessWidget {
   const _PaneActionWidget(
       {required this.entry, required this.showTitle, super.key});
 
@@ -415,58 +385,35 @@ class _PaneActionWidget extends StatefulWidget {
 
   final bool showTitle;
 
-  @override
-  State<_PaneActionWidget> createState() => _PaneActionWidgetState();
-}
-
-class _PaneActionWidgetState extends State<_PaneActionWidget> {
-  bool isHovering = false;
-
   @override
   Widget build(BuildContext context) {
-    final colorScheme = Theme
-        .of(context)
-        .colorScheme;
-    final icon = Icon(widget.entry.icon);
-    return MouseRegion(
-      cursor: SystemMouseCursors.click,
-      onEnter: (details) => setState(() => isHovering = true),
-      onExit: (details) => setState(() => isHovering = false),
-      child: GestureDetector(
-        behavior: HitTestBehavior.translucent,
-        onTap: widget.entry.onTap,
-        child: AnimatedContainer(
-            duration: const Duration(milliseconds: 180),
-            margin: const EdgeInsets.symmetric(vertical: 4),
-            padding: const EdgeInsets.symmetric(horizontal: 12),
-            width: double.infinity,
-            height: 42,
-            decoration: BoxDecoration(
-                color: isHovering ? colorScheme.surfaceContainerHigh : null,
-                borderRadius: BorderRadius.circular(8)),
-            child: widget.showTitle
-                ? Row(
-              children: [
-                icon,
-                const SizedBox(
-                  width: 12,
-                ),
-                Text(widget.entry.label)
-              ],
-            )
-                : Center(
-              child: icon,
-            )),
+    final icon = Icon(entry.icon);
+    return InkWell(
+      onTap: entry.onTap,
+      borderRadius: BorderRadius.circular(12),
+      child: AnimatedContainer(
+        duration: const Duration(milliseconds: 180),
+        padding: const EdgeInsets.symmetric(horizontal: 12),
+        height: 38,
+        child: showTitle
+            ? Row(
+                children: [icon, const SizedBox(width: 12), Text(entry.label)],
+              )
+            : Align(
+                alignment: Alignment.centerLeft,
+                child: icon,
+              ),
       ),
-    );
+    ).paddingVertical(4);
   }
 }
 
 class _SingleBottomNaviWidget extends StatefulWidget {
-  const _SingleBottomNaviWidget({required this.enabled,
-    required this.entry,
-    required this.onTap,
-    super.key});
+  const _SingleBottomNaviWidget(
+      {required this.enabled,
+      required this.entry,
+      required this.onTap,
+      super.key});
 
   final bool enabled;
 
@@ -534,11 +481,9 @@ class _SingleBottomNaviWidgetState extends State<_SingleBottomNaviWidget>
 
   Widget buildContent() {
     final value = controller.value;
-    final colorScheme = Theme
-        .of(context)
-        .colorScheme;
+    final colorScheme = Theme.of(context).colorScheme;
     final icon =
-    Icon(widget.enabled ? widget.entry.activeIcon : widget.entry.icon);
+        Icon(widget.enabled ? widget.entry.activeIcon : widget.entry.icon);
     return Center(
       child: Container(
         width: 64,
@@ -639,12 +584,12 @@ class _NaviPopScope extends StatelessWidget {
     Widget res = App.isIOS
         ? child
         : PopScope(
-      canPop: App.isAndroid ? false : true,
-      onPopInvokedWithResult: (value, result) {
-        action();
-      },
-      child: child,
-    );
+            canPop: App.isAndroid ? false : true,
+            onPopInvokedWithResult: (value, result) {
+              action();
+            },
+            child: child,
+          );
     if (popGesture) {
       res = GestureDetector(
           onPanStart: (details) {
@@ -670,14 +615,14 @@ class _NaviPopScope extends StatelessWidget {
 class _NaviMainView extends StatefulWidget {
   const _NaviMainView({required this.state});
 
-  final _NaviPaneState state;
+  final NaviPaneState state;
 
   @override
   State<_NaviMainView> createState() => _NaviMainViewState();
 }
 
 class _NaviMainViewState extends State<_NaviMainView> {
-  _NaviPaneState get state => widget.state;
+  NaviPaneState get state => widget.state;
 
   @override
   void initState() {
@@ -703,8 +648,8 @@ class _NaviMainViewState extends State<_NaviMainView> {
             ),
           ),
         ),
-        if (shouldShowAppBar) state.buildBottom().paddingBottom(
-            context.padding.bottom),
+        if (shouldShowAppBar)
+          state.buildBottom().paddingBottom(context.padding.bottom),
       ],
     );
   }

lib/components/pop_up_widget.dart

@@ -22,8 +22,15 @@ class PopUpWidget<T> extends PopupRoute<T> {
     Widget body = PopupIndicatorWidget(
       child: Container(
         decoration: showPopUp
-            ? const BoxDecoration(
+            ? BoxDecoration(
                 borderRadius: BorderRadius.all(Radius.circular(12)),
+                boxShadow: context.brightness == ui.Brightness.dark ? [
+                  BoxShadow(
+                    color: Colors.white.withAlpha(50),
+                    blurRadius: 10,
+                    offset: Offset(0, 2),
+                  ),
+                ] : null,
               )
             : null,
         clipBehavior: showPopUp ? Clip.antiAlias : Clip.none,
@@ -86,7 +93,8 @@ class PopupIndicatorWidget extends InheritedWidget {
 }
 
 Future<T> showPopUpWidget<T>(BuildContext context, Widget widget) async {
-  return await Navigator.of(context, rootNavigator: true).push(PopUpWidget(widget));
+  return await Navigator.of(context, rootNavigator: true)
+      .push(PopUpWidget(widget));
 }
 
 class PopUpWidgetScaffold extends StatefulWidget {
@@ -127,9 +135,8 @@ class _PopUpWidgetScaffoldState extends State<PopUpWidgetScaffold> {
                   message: "Back".tl,
                   child: IconButton(
                     icon: const Icon(Icons.arrow_back_sharp),
-                    onPressed: () => context.canPop()
-                        ? context.pop()
-                        : App.pop(),
+                    onPressed: () =>
+                        context.canPop() ? context.pop() : App.pop(),
                   ),
                 ),
                 const SizedBox(
@@ -148,6 +155,9 @@ class _PopUpWidgetScaffoldState extends State<PopUpWidgetScaffold> {
           ),
           NotificationListener<ScrollNotification>(
             onNotification: (notifications) {
+              if (notifications.metrics.axisDirection != AxisDirection.down) {
+                return false;
+              }
               if (notifications.metrics.pixels ==
                       notifications.metrics.minScrollExtent &&
                   !top) {

lib/components/scroll.dart

@@ -78,6 +78,9 @@ class _SmoothScrollProviderState extends State<SmoothScrollProvider> {
       },
       onPointerSignal: (pointerSignal) {
         if (pointerSignal is PointerScrollEvent) {
+          if (HardwareKeyboard.instance.isShiftPressed) {
+            return;
+          }
           if (pointerSignal.kind == PointerDeviceKind.mouse &&
               !_isMouseScroll) {
             setState(() {
@@ -95,17 +98,49 @@ class _SmoothScrollProviderState extends State<SmoothScrollProvider> {
             _controller.position.maxScrollExtent,
           );
           if (_futurePosition == old) return;
-          _controller.animateTo(_futurePosition!,
-              duration: _fastAnimationDuration, curve: Curves.linear);
+          var target = _futurePosition!;
+          _controller.animateTo(
+            _futurePosition!,
+            duration: _fastAnimationDuration,
+            curve: Curves.linear,
+          ).then((_) {
+            var current = _controller.position.pixels;
+            if (current == target && current == _futurePosition) {
+              _futurePosition = null;
+            }
+          });
         }
       },
-      child: widget.builder(
-        context,
-        _controller,
-        _isMouseScroll
-            ? const NeverScrollableScrollPhysics()
-            : const BouncingScrollPhysics(),
+      child: ScrollControllerProvider._(
+        controller: _controller,
+        child: widget.builder(
+          context,
+          _controller,
+          _isMouseScroll
+              ? const NeverScrollableScrollPhysics()
+              : const BouncingScrollPhysics(),
+        ),
       ),
     );
   }
 }
+
+class ScrollControllerProvider extends InheritedWidget {
+  const ScrollControllerProvider._({
+    required this.controller,
+    required super.child,
+  });
+
+  final ScrollController controller;
+
+  static ScrollController of(BuildContext context) {
+    final ScrollControllerProvider? provider =
+        context.dependOnInheritedWidgetOfExactType<ScrollControllerProvider>();
+    return provider!.controller;
+  }
+
+  @override
+  bool updateShouldNotify(ScrollControllerProvider oldWidget) {
+    return oldWidget.controller != controller;
+  }
+}

lib/components/select.dart

@@ -267,13 +267,14 @@ class OptionChip extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return Container(
+    return AnimatedContainer(
+      duration: _fastAnimationDuration,
       decoration: BoxDecoration(
         color: isSelected
-            ? context.colorScheme.primaryContainer
+            ? context.colorScheme.secondaryContainer
             : context.colorScheme.surface,
         border: isSelected
-            ? Border.all(color: context.colorScheme.primaryContainer)
+            ? Border.all(color: context.colorScheme.secondaryContainer)
             : Border.all(color: context.colorScheme.outline),
         borderRadius: BorderRadius.circular(8),
       ),

lib/components/side_bar.dart

@@ -1,15 +1,13 @@
 part of 'components.dart';
 
 class SideBarRoute<T> extends PopupRoute<T> {
-  SideBarRoute(this.title, this.widget,
+  SideBarRoute(this.widget,
       {this.showBarrier = true,
       this.useSurfaceTintColor = false,
       required this.width,
       this.addBottomPadding = true,
       this.addTopPadding = true});
 
-  final String? title;
-
   final Widget widget;
 
   final bool showBarrier;
@@ -36,11 +34,7 @@ class SideBarRoute<T> extends PopupRoute<T> {
       Animation<double> secondaryAnimation) {
     bool showSideBar = MediaQuery.of(context).size.width > width;
 
-    Widget body = SidebarBody(
-      title: title,
-      widget: widget,
-      autoChangeTitleBarColor: !useSurfaceTintColor,
-    );
+    Widget body = widget;
 
     if (addTopPadding) {
       body = Padding(
@@ -57,10 +51,18 @@ class SideBarRoute<T> extends PopupRoute<T> {
 
     body = Container(
       decoration: BoxDecoration(
-          borderRadius: showSideBar
-              ? const BorderRadius.horizontal(left: Radius.circular(16))
-              : null,
-          color: Theme.of(context).colorScheme.surfaceTint),
+        borderRadius: showSideBar
+            ? const BorderRadius.horizontal(left: Radius.circular(16))
+            : null,
+        color: Theme.of(context).colorScheme.surfaceTint,
+        boxShadow: context.brightness == ui.Brightness.dark ? [
+          BoxShadow(
+            color: Colors.white.withAlpha(50),
+            blurRadius: 10,
+            offset: Offset(0, 2),
+          ),
+        ] : null,
+      ),
       clipBehavior: Clip.antiAlias,
       constraints: BoxConstraints(maxWidth: sideBarWidth),
       height: MediaQuery.of(context).size.height,
@@ -121,97 +123,13 @@ class SideBarRoute<T> extends PopupRoute<T> {
   }
 }
 
-class SidebarBody extends StatefulWidget {
-  const SidebarBody(
-      {required this.title,
-      required this.widget,
-      required this.autoChangeTitleBarColor,
-      super.key});
-
-  final String? title;
-  final Widget widget;
-  final bool autoChangeTitleBarColor;
-
-  @override
-  State<SidebarBody> createState() => _SidebarBodyState();
-}
-
-class _SidebarBodyState extends State<SidebarBody> {
-  bool top = true;
-
-  @override
-  Widget build(BuildContext context) {
-    Widget body = Expanded(child: widget.widget);
-
-    if (widget.autoChangeTitleBarColor) {
-      body = NotificationListener<ScrollNotification>(
-        onNotification: (notifications) {
-          if (notifications.metrics.pixels ==
-                  notifications.metrics.minScrollExtent &&
-              !top) {
-            setState(() {
-              top = true;
-            });
-          } else if (notifications.metrics.pixels !=
-                  notifications.metrics.minScrollExtent &&
-              top) {
-            setState(() {
-              top = false;
-            });
-          }
-          return false;
-        },
-        child: body,
-      );
-    }
-
-    return Column(
-      children: [
-        if (widget.title != null)
-          Container(
-            height: 60 + MediaQuery.of(context).padding.top,
-            color: top
-                ? null
-                : Theme.of(context).colorScheme.surfaceTint.withAlpha(20),
-            padding: EdgeInsets.only(top: MediaQuery.of(context).padding.top),
-            child: Row(
-              children: [
-                const SizedBox(
-                  width: 8,
-                ),
-                Tooltip(
-                  message: "Back".tl,
-                  child: IconButton(
-                    iconSize: 25,
-                    icon: const Icon(Icons.arrow_back),
-                    onPressed: () => Navigator.of(context).pop(),
-                  ),
-                ),
-                const SizedBox(
-                  width: 10,
-                ),
-                Text(
-                  widget.title!,
-                  style: const TextStyle(fontSize: 22),
-                )
-              ],
-            ),
-          ),
-        body
-      ],
-    );
-  }
-}
-
 Future<void> showSideBar(BuildContext context, Widget widget,
-    {String? title,
-    bool showBarrier = true,
+    {bool showBarrier = true,
     bool useSurfaceTintColor = false,
     double width = 500,
     bool addTopPadding = false}) {
   return Navigator.of(context).push(
     SideBarRoute(
-      title,
       widget,
       showBarrier: showBarrier,
       useSurfaceTintColor: useSurfaceTintColor,

lib/components/window_frame.dart

@@ -6,61 +6,102 @@ import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
 import 'package:venera/foundation/app.dart';
 import 'package:venera/foundation/comic_source/comic_source.dart';
-import 'package:venera/foundation/state_controller.dart';
 import 'package:window_manager/window_manager.dart';
 
 const _kTitleBarHeight = 36.0;
 
-class WindowFrameController extends StateController {
-  bool useDarkTheme = false;
+class WindowFrameController extends InheritedWidget {
+  /// Whether the window frame is hidden.
+  final bool isWindowFrameHidden;
 
-  bool isHideWindowFrame = false;
+  /// Sets the visibility of the window frame.
+  final void Function(bool) setWindowFrame;
 
-  void setDarkTheme() {
-    useDarkTheme = true;
-    update();
-  }
+  /// Adds a listener that will be called when close button is clicked.
+  /// The listener should return `true` to allow the window to be closed.
+  final void Function(WindowCloseListener listener) addCloseListener;
 
-  void resetTheme() {
-    useDarkTheme = false;
-    update();
-  }
+  /// Removes a close listener.
+  final void Function(WindowCloseListener listener) removeCloseListener;
 
-  VoidCallback openSideBar = () {};
+  const WindowFrameController._create({
+    required this.isWindowFrameHidden,
+    required this.setWindowFrame,
+    required this.addCloseListener,
+    required this.removeCloseListener,
+    required super.child,
+  });
 
-  void hideWindowFrame() {
-    isHideWindowFrame = true;
-    update();
-  }
-
-  void showWindowFrame() {
-    isHideWindowFrame = false;
-    update();
+  @override
+  bool updateShouldNotify(covariant InheritedWidget oldWidget) {
+    return false;
   }
 }
 
-class WindowFrame extends StatelessWidget {
+class WindowFrame extends StatefulWidget {
   const WindowFrame(this.child, {super.key});
 
   final Widget child;
 
   @override
-  Widget build(BuildContext context) {
-    StateController.putIfNotExists<WindowFrameController>(
-        WindowFrameController());
-    if (App.isMobile) return child;
-    return StateBuilder<WindowFrameController>(builder: (controller) {
-      if (controller.isHideWindowFrame) return child;
+  State<WindowFrame> createState() => _WindowFrameState();
 
-      var body = Stack(
-        children: [
-          Positioned.fill(
-            child: MediaQuery(
-              data: MediaQuery.of(context).copyWith(
-                  padding: const EdgeInsets.only(top: _kTitleBarHeight)),
-              child: child,
+  static WindowFrameController of(BuildContext context) {
+    return context.dependOnInheritedWidgetOfExactType<WindowFrameController>()!;
+  }
+}
+
+typedef WindowCloseListener = bool Function();
+
+class _WindowFrameState extends State<WindowFrame> {
+  bool isWindowFrameHidden = false;
+  bool useDarkTheme = false;
+  var closeListeners = <WindowCloseListener>[];
+
+  /// Sets the visibility of the window frame.
+  void setWindowFrame(bool show) {
+    setState(() {
+      isWindowFrameHidden = !show;
+    });
+  }
+
+  /// Adds a listener that will be called when close button is clicked.
+  /// The listener should return `true` to allow the window to be closed.
+  void addCloseListener(WindowCloseListener listener) {
+    closeListeners.add(listener);
+  }
+
+  /// Removes a close listener.
+  void removeCloseListener(WindowCloseListener listener) {
+    closeListeners.remove(listener);
+  }
+
+  void _onClose() {
+    for (var listener in closeListeners) {
+      if (!listener()) {
+        return;
+      }
+    }
+    windowManager.close();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    if (App.isMobile) return widget.child;
+
+    Widget body = Stack(
+      children: [
+        Positioned.fill(
+          child: MediaQuery(
+            data: MediaQuery.of(context).copyWith(
+              padding: isWindowFrameHidden
+                  ? null
+                  : const EdgeInsets.only(top: _kTitleBarHeight),
             ),
+            child: widget.child,
           ),
+        ),
+        if (!isWindowFrameHidden)
           Positioned(
             top: 0,
             left: 0,
@@ -69,7 +110,7 @@ class WindowFrame extends StatelessWidget {
               color: Colors.transparent,
               child: Theme(
                 data: Theme.of(context).copyWith(
-                  brightness: controller.useDarkTheme ? Brightness.dark : null,
+                  brightness: useDarkTheme ? Brightness.dark : null,
                 ),
                 child: Builder(builder: (context) {
                   return SizedBox(
@@ -91,12 +132,14 @@ class WindowFrame extends StatelessWidget {
                               'Venera',
                               style: TextStyle(
                                 fontSize: 13,
-                                color: (controller.useDarkTheme ||
+                                color: (useDarkTheme ||
                                         context.brightness == Brightness.dark)
                                     ? Colors.white
                                     : Colors.black,
                               ),
-                            ).toAlign(Alignment.centerLeft).paddingLeft(4+(App.isMacOS?25:0)),
+                            )
+                                .toAlign(Alignment.centerLeft)
+                                .paddingLeft(4 + (App.isMacOS ? 25 : 0)),
                           ),
                         ),
                         if (kDebugMode)
@@ -104,7 +147,9 @@ class WindowFrame extends StatelessWidget {
                             onPressed: debug,
                             child: Text('Debug'),
                           ),
-                        if (!App.isMacOS) const WindowButtons()
+                        if (!App.isMacOS) _WindowButtons(
+                          onClose: _onClose,
+                        )
                       ],
                     ),
                   );
@@ -112,70 +157,33 @@ class WindowFrame extends StatelessWidget {
               ),
             ),
           )
-        ],
-      );
+      ],
+    );
 
-      if (App.isLinux) {
-        return VirtualWindowFrame(child: body);
-      } else {
-        return body;
-      }
-    });
-  }
+    if (App.isLinux) {
+      body = VirtualWindowFrame(child: body);
+    }
 
-  Widget buildMenuButton(
-      WindowFrameController controller, BuildContext context) {
-    return InkWell(
-        onTap: () {
-          controller.openSideBar();
-        },
-        child: SizedBox(
-          width: 42,
-          height: double.infinity,
-          child: Center(
-            child: CustomPaint(
-              size: const Size(18, 20),
-              painter: _MenuPainter(
-                  color: (controller.useDarkTheme ||
-                          Theme.of(context).brightness == Brightness.dark)
-                      ? Colors.white
-                      : Colors.black),
-            ),
-          ),
-        ));
+    return WindowFrameController._create(
+      isWindowFrameHidden: isWindowFrameHidden,
+      setWindowFrame: setWindowFrame,
+      addCloseListener: addCloseListener,
+      removeCloseListener: removeCloseListener,
+      child: body,
+    );
   }
 }
 
-class _MenuPainter extends CustomPainter {
-  final Color color;
+class _WindowButtons extends StatefulWidget {
+  const _WindowButtons({required this.onClose});
 
-  _MenuPainter({this.color = Colors.black});
+  final void Function() onClose;
 
   @override
-  void paint(Canvas canvas, Size size) {
-    final paint = getPaint(color);
-    final path = Path()
-      ..moveTo(0, size.height / 4)
-      ..lineTo(size.width, size.height / 4)
-      ..moveTo(0, size.height / 4 * 2)
-      ..lineTo(size.width, size.height / 4 * 2)
-      ..moveTo(0, size.height / 4 * 3)
-      ..lineTo(size.width, size.height / 4 * 3);
-    canvas.drawPath(path, paint);
-  }
-
-  @override
-  bool shouldRepaint(covariant CustomPainter oldDelegate) => false;
+  State<_WindowButtons> createState() => _WindowButtonsState();
 }
 
-class WindowButtons extends StatefulWidget {
-  const WindowButtons({super.key});
-
-  @override
-  State<WindowButtons> createState() => _WindowButtonsState();
-}
-
-class _WindowButtonsState extends State<WindowButtons> with WindowListener {
+class _WindowButtonsState extends State<_WindowButtons> with WindowListener {
   bool isMaximized = false;
 
   @override
@@ -264,9 +272,7 @@ class _WindowButtonsState extends State<WindowButtons> with WindowListener {
               color: !dark ? Colors.white : Colors.black,
             ),
             hoverColor: Colors.red,
-            onPressed: () {
-              windowManager.close();
-            },
+            onPressed: widget.onClose,
           )
         ],
       ),
@@ -489,7 +495,7 @@ class WindowPlacement {
 
   static Future<WindowPlacement> get current async {
     var rect = await windowManager.getBounds();
-    if(validate(rect)) {
+    if (validate(rect)) {
       lastValidRect = rect;
     } else {
       rect = lastValidRect ?? defaultPlacement.rect;
@@ -563,7 +569,7 @@ class _VirtualWindowFrameState extends State<VirtualWindowFrame>
         boxShadow: <BoxShadow>[
           if (!_isMaximized && !_isFullScreen)
             BoxShadow(
-              color: Colors.black.withOpacity(0.1),
+              color: Colors.black.toOpacity(0.1),
               offset: Offset(0.0, _isFocused ? 4 : 2),
               blurRadius: 6,
             )
@@ -634,5 +640,5 @@ TransitionBuilder VirtualWindowFrameInit() {
 }
 
 void debug() {
-  ComicSource.reload();
+  ComicSourceManager().reload();
 }

lib/foundation/app.dart

@@ -3,14 +3,17 @@ import 'dart:ui';
 
 import 'package:flutter/material.dart';
 import 'package:path_provider/path_provider.dart';
+import 'package:venera/foundation/history.dart';
 
 import 'appdata.dart';
+import 'favorites.dart';
+import 'local.dart';
 
 export "widget_utils.dart";
 export "context.dart";
 
 class _App {
-  final version = "1.0.6";
+  final version = "1.3.2";
 
   bool get isAndroid => Platform.isAndroid;
 
@@ -51,8 +54,16 @@ class _App {
 
   BuildContext get rootContext => rootNavigatorKey.currentContext!;
 
+  final Appdata data = appdata;
+
+  final HistoryManager history = HistoryManager();
+
+  final LocalFavoritesManager favorites = LocalFavoritesManager();
+
+  final LocalManager local = LocalManager();
+
   void rootPop() {
-    rootNavigatorKey.currentState?.pop();
+    rootNavigatorKey.currentState?.maybePop();
   }
 
   void pop() {
@@ -63,22 +74,18 @@ class _App {
     }
   }
 
-  var mainColor = Colors.blue;
-
   Future<void> init() async {
     cachePath = (await getApplicationCacheDirectory()).path;
     dataPath = (await getApplicationSupportDirectory()).path;
-    mainColor = switch (appdata.settings['color']) {
-      'red' => Colors.red,
-      'pink' => Colors.pink,
-      'purple' => Colors.purple,
-      'green' => Colors.green,
-      'orange' => Colors.orange,
-      'blue' => Colors.blue,
-      'yellow' => Colors.yellow,
-      'cyan' => Colors.cyan,
-      _ => Colors.blue,
-    };
+  }
+
+  Future<void> initComponents() async {
+    await Future.wait([
+      data.init(),
+      history.init(),
+      favorites.init(),
+      local.init(),
+    ]);
   }
 
   Function? _forceRebuildHandler;

lib/foundation/app_page_route.dart

@@ -19,7 +19,6 @@ class AppPageRoute<T> extends PageRoute<T> with _AppRouteTransitionMixin{
     super.barrierDismissible = false,
     this.enableIOSGesture = true,
     this.preventRebuild = true,
-    this.isRootRoute = false,
   }) {
     assert(opaque);
   }
@@ -50,9 +49,6 @@ class AppPageRoute<T> extends PageRoute<T> with _AppRouteTransitionMixin{
 
   @override
   final bool preventRebuild;
-
-  @override
-  final bool isRootRoute;
 }
 
 mixin _AppRouteTransitionMixin<T> on PageRoute<T> {
@@ -79,8 +75,6 @@ mixin _AppRouteTransitionMixin<T> on PageRoute<T> {
 
   bool get preventRebuild;
 
-  bool get isRootRoute;
-
   Widget? _child;
 
   @override
@@ -121,22 +115,6 @@ mixin _AppRouteTransitionMixin<T> on PageRoute<T> {
 
   @override
   Widget buildTransitions(BuildContext context, Animation<double> animation, Animation<double> secondaryAnimation, Widget child) {
-    if(isRootRoute) {
-      return FadeTransition(
-        opacity: Tween<double>(begin: 0, end: 1.0).animate(CurvedAnimation(
-            parent: animation,
-            curve: Curves.ease
-        )),
-        child: FadeTransition(
-          opacity: Tween<double>(begin: 1.0, end: 0).animate(CurvedAnimation(
-              parent: secondaryAnimation,
-              curve: Curves.ease
-          )),
-          child: child,
-        ),
-      );
-    }
-
     return SlidePageTransitionBuilder().buildTransitions(
         this,
         context,

lib/foundation/appdata.dart

@@ -3,16 +3,19 @@ import 'dart:convert';
 import 'package:flutter/foundation.dart';
 import 'package:path_provider/path_provider.dart';
 import 'package:venera/foundation/app.dart';
+import 'package:venera/utils/data_sync.dart';
 import 'package:venera/utils/io.dart';
 
-class _Appdata {
-  final _Settings settings = _Settings();
+class Appdata {
+  Appdata._create();
+
+  final Settings settings = Settings._create();
 
   var searchHistory = <String>[];
 
   bool _isSavingData = false;
 
-  Future<void> saveData() async {
+  Future<void> saveData([bool sync = true]) async {
     if (_isSavingData) {
       await Future.doWhile(() async {
         await Future.delayed(const Duration(milliseconds: 20));
@@ -24,6 +27,9 @@ class _Appdata {
     var file = File(FilePath.join(App.dataPath, 'appdata.json'));
     await file.writeAsString(data);
     _isSavingData = false;
+    if (sync) {
+      DataSync().uploadData();
+    }
   }
 
   void addSearchHistory(String keyword) {
@@ -76,6 +82,28 @@ class _Appdata {
     };
   }
 
+  /// Following fields are related to device-specific data and should not be synced.
+  static const _disableSync = [
+    "proxy",
+    "authorizationRequired",
+    "customImageProcessing",
+    "webdav",
+  ];
+
+  /// Sync data from another device
+  void syncData(Map<String, dynamic> data) {
+    if (data['settings'] is Map) {
+      var settings = data['settings'] as Map<String, dynamic>;
+      for (var key in settings.keys) {
+        if (!_disableSync.contains(key)) {
+          this.settings[key] = settings[key];
+        }
+      }
+    }
+    searchHistory = List.from(data['searchHistory'] ?? []);
+    saveData();
+  }
+
   var implicitData = <String, dynamic>{};
 
   void writeImplicitData() {
@@ -84,15 +112,15 @@ class _Appdata {
   }
 }
 
-final appdata = _Appdata();
+final appdata = Appdata._create();
 
-class _Settings with ChangeNotifier {
-  _Settings();
+class Settings with ChangeNotifier {
+  Settings._create();
 
   final _data = <String, dynamic>{
     'comicDisplayMode': 'detailed', // detailed, brief
     'comicTileScale': 1.00, // 0.75-1.25
-    'color': 'blue', // red, pink, purple, green, orange, blue
+    'color': 'system', // red, pink, purple, green, orange, blue
     'theme_mode': 'system', // light, dark, system
     'newFavoriteAddTo': 'end', // start, end
     'moveFavoriteAfterRead': 'none', // none, end, start
@@ -100,27 +128,42 @@ class _Settings with ChangeNotifier {
     'explore_pages': [],
     'categories': [],
     'favorites': [],
+    'searchSources': null,
     'showFavoriteStatusOnTile': true,
     'showHistoryStatusOnTile': false,
     'blockedWords': [],
     'defaultSearchTarget': null,
     'autoPageTurningInterval': 5, // in seconds
     'readerMode': 'galleryLeftToRight', // values of [ReaderMode]
+    'readerScreenPicNumberForLandscape': 1, // 1 - 5
+    'readerScreenPicNumberForPortrait': 1, // 1 - 5
     'enableTapToTurnPages': true,
+    'reverseTapToTurnPages': false,
     'enablePageAnimation': true,
     'language': 'system', // system, zh-CN, zh-TW, en-US
     'cacheSize': 2048, // in MB
     'downloadThreads': 5,
     'enableLongPressToZoom': true,
-    'checkUpdateOnStart': true,
+    'checkUpdateOnStart': false,
     'limitImageWidth': true,
     'webdav': [], // empty means not configured
     'dataVersion': 0,
     'quickFavorite': null,
     'enableTurnPageByVolumeKey': true,
     'enableClockAndBatteryInfoInReader': true,
-    'ignoreCertificateErrors': false,
+    'quickCollectImage': 'No', // No, DoubleTap, Swipe
     'authorizationRequired': false,
+    'onClickFavorite': 'viewDetail', // viewDetail, read
+    'enableDnsOverrides': false,
+    'dnsOverrides': {},
+    'enableCustomImageProcessing': false,
+    'customImageProcessing': defaultCustomImageProcessing,
+    'sni': true,
+    'autoAddLanguageFilter': 'none', // none, chinese, english, japanese
+    'comicSourceListUrl': "https://cdn.jsdelivr.net/gh/venera-app/venera-configs@latest/index.json",
+    'preloadImageCount': 4,
+    'followUpdatesFolder': null,
+    'initialPage': '0',
   };
 
   operator [](String key) {
@@ -137,3 +180,21 @@ class _Settings with ChangeNotifier {
     return _data.toString();
   }
 }
+
+const defaultCustomImageProcessing = '''
+/**
+ * Process an image
+ * @param image {ArrayBuffer} - The image to process
+ * @param cid {string} - The comic ID
+ * @param eid {string} - The episode ID
+ * @param page {number} - The page number
+ * @param sourceKey {string} - The source key
+ * @returns {Promise<ArrayBuffer> | {image: Promise<ArrayBuffer>, onCancel: () => void}} - The processed image
+ */
+function processImage(image, cid, eid, page, sourceKey) {
+    let futureImage = new Promise((resolve, reject) => {
+        resolve(image);
+    });
+    return futureImage;
+}
+''';

lib/foundation/comic_source/category.dart

@@ -1,4 +1,4 @@
-part of comic_source;
+part of 'comic_source.dart';
 
 class CategoryData {
   /// The title is displayed in the tab bar.
@@ -145,7 +145,7 @@ class RandomCategoryPartWithRuntimeData extends BaseCategoryPart {
 }
 
 CategoryData getCategoryDataWithKey(String key) {
-  for (var source in ComicSource._sources) {
+  for (var source in ComicSource.all()) {
     if (source.categoryData?.key == key) {
       return source.categoryData!;
     }

lib/foundation/comic_source/comic_source.dart

@@ -1,4 +1,4 @@
-library comic_source;
+library;
 
 import 'dart:async';
 import 'dart:collection';
@@ -6,12 +6,14 @@ import 'dart:convert';
 import 'dart:math' as math;
 
 import 'package:flutter/widgets.dart';
+import 'package:flutter_qjs/flutter_qjs.dart';
 import 'package:venera/foundation/app.dart';
 import 'package:venera/foundation/comic_type.dart';
 import 'package:venera/foundation/history.dart';
 import 'package:venera/foundation/res.dart';
 import 'package:venera/utils/data_sync.dart';
 import 'package:venera/utils/ext.dart';
+import 'package:venera/utils/init.dart';
 import 'package:venera/utils/io.dart';
 import 'package:venera/utils/translations.dart';
 
@@ -26,81 +28,29 @@ part 'parser.dart';
 
 part 'models.dart';
 
-/// build comic list, [Res.subData] should be maxPage or null if there is no limit.
-typedef ComicListBuilder = Future<Res<List<Comic>>> Function(int page);
+part 'types.dart';
 
-/// build comic list with next param, [Res.subData] should be next page param or null if there is no next page.
-typedef ComicListBuilderWithNext = Future<Res<List<Comic>>> Function(
-    String? next);
+class ComicSourceManager with ChangeNotifier, Init {
+  final List<ComicSource> _sources = [];
 
-typedef LoginFunction = Future<Res<bool>> Function(String, String);
+  static ComicSourceManager? _instance;
 
-typedef LoadComicFunc = Future<Res<ComicDetails>> Function(String id);
+  ComicSourceManager._create();
 
-typedef LoadComicPagesFunc = Future<Res<List<String>>> Function(
-    String id, String? ep);
+  factory ComicSourceManager() => _instance ??= ComicSourceManager._create();
 
-typedef CommentsLoader = Future<Res<List<Comment>>> Function(
-    String id, String? subId, int page, String? replyTo);
+  List<ComicSource> all() => List.from(_sources);
 
-typedef SendCommentFunc = Future<Res<bool>> Function(
-    String id, String? subId, String content, String? replyTo);
-
-typedef GetImageLoadingConfigFunc = Future<Map<String, dynamic>> Function(
-    String imageKey, String comicId, String epId)?;
-typedef GetThumbnailLoadingConfigFunc = Map<String, dynamic> Function(
-    String imageKey)?;
-
-typedef ComicThumbnailLoader = Future<Res<List<String>>> Function(
-    String comicId, String? next);
-
-typedef LikeOrUnlikeComicFunc = Future<Res<bool>> Function(
-    String comicId, bool isLiking);
-
-/// [isLiking] is true if the user is liking the comment, false if unliking.
-/// return the new likes count or null.
-typedef LikeCommentFunc = Future<Res<int?>> Function(
-    String comicId, String? subId, String commentId, bool isLiking);
-
-/// [isUp] is true if the user is upvoting the comment, false if downvoting.
-/// return the new vote count or null.
-typedef VoteCommentFunc = Future<Res<int?>> Function(
-    String comicId, String? subId, String commentId, bool isUp, bool isCancel);
-
-typedef HandleClickTagEvent = Map<String, String> Function(
-    String namespace, String tag);
-
-/// [rating] is the rating value, 0-10. 1 represents 0.5 star.
-typedef StarRatingFunc = Future<Res<bool>> Function(String comicId, int rating);
-
-class ComicSource {
-  static final List<ComicSource> _sources = [];
-
-  static final List<Function> _listeners = [];
-
-  static void addListener(Function listener) {
-    _listeners.add(listener);
-  }
-
-  static void removeListener(Function listener) {
-    _listeners.remove(listener);
-  }
-
-  static void notifyListeners() {
-    for (var listener in _listeners) {
-      listener();
-    }
-  }
-
-  static List<ComicSource> all() => List.from(_sources);
-
-  static ComicSource? find(String key) =>
+  ComicSource? find(String key) =>
       _sources.firstWhereOrNull((element) => element.key == key);
 
-  static ComicSource? fromIntKey(int key) =>
+  ComicSource? fromIntKey(int key) =>
       _sources.firstWhereOrNull((element) => element.key.hashCode == key);
 
-  static Future<void> init() async {
+  @override
+  @protected
+  Future<void> doInit() async {
+    await JsEngine().ensureInit();
     final path = "${App.dataPath}/comic_source";
     if (!(await Directory(path).exists())) {
       Directory(path).create();
@@ -119,24 +69,49 @@ class ComicSource {
     }
   }
 
-  static Future reload() async {
+  Future reload() async {
     _sources.clear();
     JsEngine().runCode("ComicSource.sources = {};");
-    await init();
+    await doInit();
     notifyListeners();
   }
 
-  static void add(ComicSource source) {
+  void add(ComicSource source) {
     _sources.add(source);
     notifyListeners();
   }
 
-  static void remove(String key) {
+  void remove(String key) {
     _sources.removeWhere((element) => element.key == key);
     notifyListeners();
   }
 
-  static bool get isEmpty => _sources.isEmpty;
+  bool get isEmpty => _sources.isEmpty;
+
+  /// Key is the source key, value is the version.
+  final _availableUpdates = <String, String>{};
+
+  void updateAvailableUpdates(Map<String, String> updates) {
+    _availableUpdates.addAll(updates);
+    notifyListeners();
+  }
+
+  Map<String, String> get availableUpdates => Map.from(_availableUpdates);
+
+  void notifyStateChange() {
+    notifyListeners();
+  }
+}
+
+class ComicSource {
+  static List<ComicSource> all() => ComicSourceManager().all();
+
+  static ComicSource? find(String key) => ComicSourceManager().find(key);
+
+  static ComicSource? fromIntKey(int key) =>
+      ComicSourceManager().fromIntKey(key);
+
+  static bool get isEmpty => ComicSourceManager().isEmpty;
 
   /// Name of this source.
   final String name;
@@ -201,7 +176,7 @@ class ComicSource {
 
   final LikeCommentFunc? likeCommentFunc;
 
-  final Map<String, dynamic>? settings;
+  final Map<String, Map<String, dynamic>>? settings;
 
   final Map<String, Map<String, String>>? translations;
 
@@ -215,6 +190,8 @@ class ComicSource {
 
   final StarRatingFunc? starRatingFunc;
 
+  final ArchiveDownloader? archiveDownloader;
+
   Future<void> loadData() async {
     var file = File("${App.dataPath}/comic_source/$key.data");
     if (await file.exists()) {
@@ -284,6 +261,7 @@ class ComicSource {
     this.enableTagsSuggestions,
     this.enableTagsTranslate,
     this.starRatingFunc,
+    this.archiveDownloader,
   );
 }
 
@@ -315,7 +293,7 @@ class AccountConfig {
     this.onLoginWithWebviewSuccess,
     this.cookieFields,
     this.validateCookies,
-  )   : infoItems = const [];
+  ) : infoItems = const [];
 }
 
 class AccountInfoItem {
@@ -411,7 +389,7 @@ class SearchOptions {
 
   const SearchOptions(this.options, this.label, this.type, this.defaultVal);
 
-  String get defaultValue => defaultVal ?? options.keys.first;
+  String get defaultValue => defaultVal ?? options.keys.firstOrNull ?? "";
 }
 
 typedef CategoryComicsLoader = Future<Res<List<Comic>>> Function(
@@ -465,3 +443,11 @@ class LinkHandler {
 
   const LinkHandler(this.domains, this.linkToId);
 }
+
+class ArchiveDownloader {
+  final Future<Res<List<ArchiveInfo>>> Function(String cid) getArchives;
+
+  final Future<Res<String>> Function(String cid, String aid) getDownloadUrl;
+
+  const ArchiveDownloader(this.getArchives, this.getDownloadUrl);
+}

lib/foundation/comic_source/favorites.dart

@@ -10,6 +10,10 @@ class FavoriteData {
 
   final bool multiFolder;
 
+  // 这个收藏时间新旧顺序, 是为了最小成本同步远端的收藏, 只拉取远程最新收藏的漫画, 就不需要全拉取一遍了
+  // 如果为 null, 当做从新到旧
+  final bool? isOldToNewSort;
+
   final Future<Res<List<Comic>>> Function(int page, [String? folder])?
       loadComic;
 
@@ -33,6 +37,8 @@ class FavoriteData {
 
   final AddOrDelFavFunc? addOrDelFavorite;
 
+  final bool singleFolderForSingleComic;
+
   const FavoriteData({
     required this.key,
     required this.title,
@@ -44,6 +50,8 @@ class FavoriteData {
     this.addFolder,
     this.allFavoritesId,
     this.addOrDelFavorite,
+    this.isOldToNewSort,
+    this.singleFolderForSingleComic = false,
   });
 }
 

lib/foundation/comic_source/models.dart

@@ -73,7 +73,8 @@ class Comic {
     this.sourceKey,
     this.maxPage,
     this.language,
-  ): favoriteId = null, stars = null;
+  )   : favoriteId = null,
+        stars = null;
 
   Map<String, dynamic> toJson() {
     return {
@@ -127,7 +128,7 @@ class ComicDetails with HistoryMixin {
   final Map<String, List<String>> tags;
 
   /// id-name
-  final Map<String, String>? chapters;
+  final ComicChapters? chapters;
 
   final List<String>? thumbnails;
 
@@ -145,7 +146,7 @@ class ComicDetails with HistoryMixin {
 
   final int? likesCount;
 
-  final int? commentsCount;
+  final int? commentCount;
 
   final String? uploader;
 
@@ -160,6 +161,8 @@ class ComicDetails with HistoryMixin {
   @override
   final int? maxPage;
 
+  final List<Comment>? comments;
+
   static Map<String, List<String>> _generateMap(Map<dynamic, dynamic> map) {
     var res = <String, List<String>>{};
     map.forEach((key, value) {
@@ -170,13 +173,11 @@ class ComicDetails with HistoryMixin {
 
   ComicDetails.fromJson(Map<String, dynamic> json)
       : title = json["title"],
-        subTitle = json["subTitle"],
+        subTitle = json["subtitle"],
         cover = json["cover"],
         description = json["description"],
         tags = _generateMap(json["tags"]),
-        chapters = json["chapters"] == null
-            ? null
-            : Map<String, String>.from(json["chapters"]),
+        chapters = ComicChapters.fromJsonOrNull(json["chapters"]),
         sourceKey = json["sourceKey"],
         comicId = json["comicId"],
         thumbnails = ListOrNull.from(json["thumbnails"]),
@@ -187,13 +188,16 @@ class ComicDetails with HistoryMixin {
         subId = json["subId"],
         likesCount = json["likesCount"],
         isLiked = json["isLiked"],
-        commentsCount = json["commentsCount"],
+        commentCount = json["commentCount"],
         uploader = json["uploader"],
         uploadTime = json["uploadTime"],
         updateTime = json["updateTime"],
         url = json["url"],
         stars = (json["stars"] as num?)?.toDouble(),
-        maxPage = json["maxPage"];
+        maxPage = json["maxPage"],
+        comments = (json["comments"] as List?)
+            ?.map((e) => Comment.fromJson(e))
+            .toList();
 
   Map<String, dynamic> toJson() {
     return {
@@ -211,7 +215,7 @@ class ComicDetails with HistoryMixin {
       "subId": subId,
       "isLiked": isLiked,
       "likesCount": likesCount,
-      "commentsCount": commentsCount,
+      "commentsCount": commentCount,
       "uploader": uploader,
       "uploadTime": uploadTime,
       "updateTime": updateTime,
@@ -226,4 +230,199 @@ class ComicDetails with HistoryMixin {
   String get id => comicId;
 
   ComicType get comicType => ComicType(sourceKey.hashCode);
+
+  /// Convert tags map to plain list
+  List<String> get plainTags {
+    var res = <String>[];
+    tags.forEach((key, value) {
+      res.addAll(value.map((e) => "$key:$e"));
+    });
+    return res;
+  }
+
+  /// Find the first author tag
+  String? findAuthor() {
+    var authorNamespaces = [
+      "author",
+      "authors",
+      "artist",
+      "artists",
+      "作者",
+      "画师"
+    ];
+    for (var entry in tags.entries) {
+      if (authorNamespaces.contains(entry.key.toLowerCase()) &&
+          entry.value.isNotEmpty) {
+        return entry.value.first;
+      }
+    }
+    return null;
+  }
+
+  String? _validateUpdateTime(String time) {
+    time = time.split(" ").first;
+    var segments = time.split("-");
+    if (segments.length != 3) return null;
+    var year = int.tryParse(segments[0]);
+    var month = int.tryParse(segments[1]);
+    var day = int.tryParse(segments[2]);
+    if (year == null || month == null || day == null) return null;
+    if (year < 2000 || year > 3000) return null;
+    if (month < 1 || month > 12) return null;
+    if (day < 1 || day > 31) return null;
+    return "$year-$month-$day";
+  }
+
+  String? findUpdateTime() {
+    if (updateTime != null) {
+      return _validateUpdateTime(updateTime!);
+    }
+    const acceptedNamespaces = [
+      "更新",
+      "最後更新",
+      "最后更新",
+      "update",
+      "last update",
+    ];
+    for (var entry in tags.entries) {
+      if (acceptedNamespaces.contains(entry.key.toLowerCase()) &&
+          entry.value.isNotEmpty) {
+        var value = entry.value.first;
+        return _validateUpdateTime(value);
+      }
+    }
+    return null;
+  }
+}
+
+class ArchiveInfo {
+  final String title;
+  final String description;
+  final String id;
+
+  ArchiveInfo.fromJson(Map<String, dynamic> json)
+      : title = json["title"],
+        description = json["description"],
+        id = json["id"];
+}
+
+class ComicChapters {
+  final Map<String, String>? _chapters;
+
+  final Map<String, Map<String, String>>? _groupedChapters;
+
+  /// Create a ComicChapters object with a flat map
+  const ComicChapters(Map<String, String> this._chapters)
+      : _groupedChapters = null;
+
+  /// Create a ComicChapters object with a grouped map
+  const ComicChapters.grouped(
+      Map<String, Map<String, String>> this._groupedChapters)
+      : _chapters = null;
+
+  factory ComicChapters.fromJson(dynamic json) {
+    if (json is! Map) throw ArgumentError("Invalid json type");
+    var chapters = <String, String>{};
+    var groupedChapters = <String, Map<String, String>>{};
+    for (var entry in json.entries) {
+      var key = entry.key;
+      var value = entry.value;
+      if (key is! String) throw ArgumentError("Invalid key type");
+      if (value is Map) {
+        groupedChapters[key] = Map.from(value);
+      } else {
+        chapters[key] = value.toString();
+      }
+    }
+    if (chapters.isNotEmpty) {
+      return ComicChapters(chapters);
+    } else if (groupedChapters.isNotEmpty) {
+      return ComicChapters.grouped(groupedChapters);
+    } else {
+      throw ArgumentError("Empty chapter list");
+    }
+  }
+
+  static fromJsonOrNull(dynamic json) {
+    if (json == null) return null;
+    return ComicChapters.fromJson(json);
+  }
+
+  Map<String, dynamic> toJson() {
+    if (_chapters != null) {
+      return _chapters;
+    } else {
+      return _groupedChapters!;
+    }
+  }
+
+  /// Whether the chapters are grouped
+  bool get isGrouped => _groupedChapters != null;
+
+  /// All group names
+  Iterable<String> get groups => _groupedChapters?.keys ?? [];
+
+  /// All chapters.
+  /// If the chapters are grouped, all groups will be merged.
+  Map<String, String> get allChapters {
+    if (_chapters != null) return _chapters;
+    var res = <String, String>{};
+    for (var entry in _groupedChapters!.values) {
+      res.addAll(entry);
+    }
+    return res;
+  }
+
+  /// Get a group of chapters by name
+  Map<String, String> getGroup(String group) {
+    return _groupedChapters![group] ?? {};
+  }
+
+  /// Get a group of chapters by index(0-based)
+  Map<String, String> getGroupByIndex(int index) {
+    return _groupedChapters!.values.elementAt(index);
+  }
+
+  /// Get total number of chapters
+  int get length {
+    return isGrouped
+        ? _groupedChapters!.values.map((e) => e.length).reduce((a, b) => a + b)
+        : _chapters!.length;
+  }
+
+  /// Get the number of groups
+  int get groupCount => _groupedChapters?.length ?? 0;
+
+  /// Iterate all chapter ids
+  Iterable<String> get ids sync* {
+    if (isGrouped) {
+      for (var entry in _groupedChapters!.values) {
+        yield* entry.keys;
+      }
+    } else {
+      yield* _chapters!.keys;
+    }
+  }
+
+  /// Iterate all chapter titles
+  Iterable<String> get titles sync* {
+    if (isGrouped) {
+      for (var entry in _groupedChapters!.values) {
+        yield* entry.values;
+      }
+    } else {
+      yield* _chapters!.values;
+    }
+  }
+
+  String? operator [](String key) {
+    if (isGrouped) {
+      for (var entry in _groupedChapters!.values) {
+        if (entry.containsKey(key)) return entry[key];
+      }
+      return null;
+    } else {
+      return _chapters![key];
+    }
+  }
 }

lib/foundation/comic_source/parser.dart

@@ -1,5 +1,6 @@
 part of 'comic_source.dart';
 
+/// return true if ver1 > ver2
 bool compareSemVer(String ver1, String ver2) {
   ver1 = ver1.replaceFirst("-", ".");
   ver2 = ver2.replaceFirst("-", ".");
@@ -90,11 +91,10 @@ class ComicSourceParser {
     var className = line1.split("class")[1].split("extends ComicSource").first;
     className = className.trim();
     JsEngine().runCode("""
-      (() => {
-        $js
+      (() => { $js
         this['temp'] = new $className()
       }).call()
-    """);
+    """, className);
     _name = JsEngine().runCode("this['temp'].name") ??
         (throw ComicSourceParseException('name is required'));
     var key = JsEngine().runCode("this['temp'].key") ??
@@ -153,11 +153,12 @@ class ComicSourceParser {
       _getValue("search.enableTagsSuggestions") ?? false,
       _getValue("comic.enableTagsTranslate") ?? false,
       _parseStarRatingFunc(),
+      _parseArchiveDownloader(),
     );
 
     await source.loadData();
 
-    if(_checkExists("init")) {
+    if (_checkExists("init")) {
       Future.delayed(const Duration(milliseconds: 50), () {
         JsEngine().runCode("ComicSource.sources.$_key.init()");
       });
@@ -618,6 +619,8 @@ class ComicSourceParser {
     if (!_checkExists("favorites")) return null;
 
     final bool multiFolder = _getValue("favorites.multiFolder");
+    final bool? isOldToNewSort = _getValue("favorites.isOldToNewSort");
+    final bool? singleFolderForSingleComic = _getValue("favorites.singleFolderForSingleComic");
 
     Future<Res<T>> retryZone<T>(Future<Res<T>> Function() func) async {
       if (!ComicSource.find(_key!)!.isLogged) {
@@ -770,6 +773,8 @@ class ComicSourceParser {
       addFolder: addFolder,
       deleteFolder: deleteFolder,
       addOrDelFavorite: addOrDelFavFunc,
+      isOldToNewSort: isOldToNewSort,
+      singleFolderForSingleComic: singleFolderForSingleComic ?? false,
     );
   }
 
@@ -920,8 +925,30 @@ class ComicSourceParser {
     };
   }
 
-  Map<String, dynamic> _parseSettings() {
-    return _getValue("settings") ?? {};
+  Map<String, Map<String, dynamic>> _parseSettings() {
+    var value = _getValue("settings");
+    if (value is Map) {
+      var newMap = <String, Map<String, dynamic>>{};
+      for (var e in value.entries) {
+        if (e.key is! String) {
+          continue;
+        }
+        var v = <String, dynamic>{};
+        for (var e2 in e.value.entries) {
+          if (e2.key is! String) {
+            continue;
+          }
+          var v2 = e2.value;
+          if (v2 is JSInvokable) {
+            v2 = JSAutoFreeFunction(v2);
+          }
+          v[e2.key] = v2;
+        }
+        newMap[e.key] = v;
+      }
+      return newMap;
+    }
+    return {};
   }
 
   RegExp? _parseIdMatch() {
@@ -988,4 +1015,35 @@ class ComicSourceParser {
       }
     };
   }
+
+  ArchiveDownloader? _parseArchiveDownloader() {
+    if (!_checkExists("comic.archive")) {
+      return null;
+    }
+    return ArchiveDownloader(
+      (cid) async {
+        try {
+          var res = await JsEngine().runCode("""
+              ComicSource.sources.$_key.comic.archive.getArchives(${jsonEncode(cid)})
+            """);
+          return Res(
+              (res as List).map((e) => ArchiveInfo.fromJson(e)).toList());
+        } catch (e, s) {
+          Log.error("Network", "$e\n$s");
+          return Res.error(e.toString());
+        }
+      },
+      (cid, aid) async {
+        try {
+          var res = await JsEngine().runCode("""
+              ComicSource.sources.$_key.comic.archive.getDownloadUrl(${jsonEncode(cid)}, ${jsonEncode(aid)})
+            """);
+          return Res(res as String);
+        } catch (e, s) {
+          Log.error("Network", "$e\n$s");
+          return Res.error(e.toString());
+        }
+      },
+    );
+  }
 }

lib/foundation/comic_source/types.dart

@@ -0,0 +1,48 @@
+part of 'comic_source.dart';
+
+/// build comic list, [Res.subData] should be maxPage or null if there is no limit.
+typedef ComicListBuilder = Future<Res<List<Comic>>> Function(int page);
+
+/// build comic list with next param, [Res.subData] should be next page param or null if there is no next page.
+typedef ComicListBuilderWithNext = Future<Res<List<Comic>>> Function(
+    String? next);
+
+typedef LoginFunction = Future<Res<bool>> Function(String, String);
+
+typedef LoadComicFunc = Future<Res<ComicDetails>> Function(String id);
+
+typedef LoadComicPagesFunc = Future<Res<List<String>>> Function(
+    String id, String? ep);
+
+typedef CommentsLoader = Future<Res<List<Comment>>> Function(
+    String id, String? subId, int page, String? replyTo);
+
+typedef SendCommentFunc = Future<Res<bool>> Function(
+    String id, String? subId, String content, String? replyTo);
+
+typedef GetImageLoadingConfigFunc = Future<Map<String, dynamic>> Function(
+    String imageKey, String comicId, String epId)?;
+typedef GetThumbnailLoadingConfigFunc = Map<String, dynamic> Function(
+    String imageKey)?;
+
+typedef ComicThumbnailLoader = Future<Res<List<String>>> Function(
+    String comicId, String? next);
+
+typedef LikeOrUnlikeComicFunc = Future<Res<bool>> Function(
+    String comicId, bool isLiking);
+
+/// [isLiking] is true if the user is liking the comment, false if unliking.
+/// return the new likes count or null.
+typedef LikeCommentFunc = Future<Res<int?>> Function(
+    String comicId, String? subId, String commentId, bool isLiking);
+
+/// [isUp] is true if the user is upvoting the comment, false if downvoting.
+/// return the new vote count or null.
+typedef VoteCommentFunc = Future<Res<int?>> Function(
+    String comicId, String? subId, String commentId, bool isUp, bool isCancel);
+
+typedef HandleClickTagEvent = Map<String, String> Function(
+    String namespace, String tag);
+
+/// [rating] is the rating value, 0-10. 1 represents 0.5 star.
+typedef StarRatingFunc = Future<Res<bool>> Function(String comicId, int rating);

lib/foundation/comic_type.dart

@@ -28,4 +28,12 @@ class ComicType {
   }
 
   static const local = ComicType(0);
+
+  factory ComicType.fromKey(String key) {
+    if(key == "local") {
+      return local;
+    } else {
+      return ComicType(key.hashCode);
+    }
+  }
 }

lib/foundation/consts.dart

@@ -1,6 +1,17 @@
+/// If window width is less than this value, it is considered as mobile.
 const changePoint = 600;
 
+/// If window width is less than this value, it is considered as tablet.
+///
+/// If it is more than this value, it is considered as desktop.
 const changePoint2 = 1300;
 
+/// Default user agent for http requests.
 const webUA =
     "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/119.0.0.0 Safari/537.36";
+
+/// Pages for all comics is started from this value.
+const firstPage = 1;
+
+/// Chapters for all comics is started from this value.
+const firstChapter = 1;

lib/foundation/context.dart

@@ -36,6 +36,8 @@ extension Navigation on BuildContext {
 
   Brightness get brightness => Theme.of(this).brightness;
 
+  bool get isDarkMode => brightness == Brightness.dark;
+
   void showMessage({required String message}) {
     showToast(message: message, context: this);
   }

lib/foundation/favorites.dart

@@ -4,7 +4,10 @@ import 'package:flutter/foundation.dart';
 import 'package:sqlite3/sqlite3.dart';
 import 'package:venera/foundation/appdata.dart';
 import 'package:venera/foundation/image_provider/local_favorite_image.dart';
+import 'package:venera/foundation/local.dart';
 import 'package:venera/foundation/log.dart';
+import 'package:venera/pages/follow_updates_page.dart';
+import 'package:venera/utils/tags_translation.dart';
 import 'dart:io';
 
 import 'app.dart';
@@ -12,10 +15,7 @@ import 'comic_source/comic_source.dart';
 import 'comic_type.dart';
 
 String _getTimeString(DateTime time) {
-  return time
-      .toIso8601String()
-      .replaceFirst("T", " ")
-      .substring(0, 19);
+  return time.toIso8601String().replaceFirst("T", " ").substring(0, 19);
 }
 
 class FavoriteItem implements Comic {
@@ -29,15 +29,14 @@ class FavoriteItem implements Comic {
   String coverPath;
   late String time;
 
-  FavoriteItem({
-    required this.id,
-    required this.name,
-    required this.coverPath,
-    required this.author,
-    required this.type,
-    required this.tags,
-    DateTime? favoriteTime
-  }) {
+  FavoriteItem(
+      {required this.id,
+      required this.name,
+      required this.coverPath,
+      required this.author,
+      required this.type,
+      required this.tags,
+      DateTime? favoriteTime}) {
     var t = favoriteTime ?? DateTime.now();
     time = _getTimeString(t);
   }
@@ -75,7 +74,10 @@ class FavoriteItem implements Comic {
 
   @override
   String get description {
-    return "$time | ${type == ComicType.local ? 'local' : type.comicSource?.name ?? "Unknown"}";
+    var time = this.time.substring(0, 10);
+    return appdata.settings['comicDisplayMode'] == 'detailed'
+        ? "$time | ${type == ComicType.local ? 'local' : type.comicSource?.name ?? "Unknown"}"
+        : "${type.comicSource?.name ?? "Unknown"} | $time";
   }
 
   @override
@@ -153,6 +155,50 @@ class FavoriteItemWithFolderInfo extends FavoriteItem {
         );
 }
 
+class FavoriteItemWithUpdateInfo extends FavoriteItem {
+  String? updateTime;
+
+  DateTime? lastCheckTime;
+
+  bool hasNewUpdate;
+
+  FavoriteItemWithUpdateInfo(
+    FavoriteItem item,
+    this.updateTime,
+    this.hasNewUpdate,
+    int? lastCheckTime,
+  )   : lastCheckTime = lastCheckTime == null
+            ? null
+            : DateTime.fromMillisecondsSinceEpoch(lastCheckTime),
+        super(
+          id: item.id,
+          name: item.name,
+          coverPath: item.coverPath,
+          author: item.author,
+          type: item.type,
+          tags: item.tags,
+        );
+
+  @override
+  String get description {
+    var updateTime = this.updateTime ?? "Unknown";
+    var sourceName = type.comicSource?.name ?? "Unknown";
+    return "$updateTime | $sourceName";
+  }
+
+  @override
+  operator ==(Object other) {
+    return other is FavoriteItemWithUpdateInfo &&
+        other.updateTime == updateTime &&
+        other.hasNewUpdate == hasNewUpdate &&
+        super == other;
+  }
+
+  @override
+  int get hashCode =>
+      super.hashCode ^ updateTime.hashCode ^ hasNewUpdate.hashCode;
+}
+
 class LocalFavoritesManager with ChangeNotifier {
   factory LocalFavoritesManager() =>
       cache ?? (cache = LocalFavoritesManager._create());
@@ -178,6 +224,28 @@ class LocalFavoritesManager with ChangeNotifier {
         source_folder text
       );
     """);
+    for (var folder in _getFolderNamesWithDB()) {
+      var columns = _db.select("""
+        pragma table_info("$folder");
+      """);
+      if (!columns.any((element) => element["name"] == "translated_tags")) {
+        _db.execute("""
+          alter table "$folder"
+          add column translated_tags TEXT;
+        """);
+        var comics = getAllComics(folder);
+        for (var comic in comics) {
+          var translatedTags = _translateTags(comic.tags);
+          _db.execute("""
+            update "$folder"
+            set translated_tags = ?
+            where id == ? and type == ?;
+          """, [translatedTags, comic.id, comic.type.value]);
+        }
+      } else {
+        break;
+      }
+    }
   }
 
   List<String> find(String id, ComicType type) {
@@ -339,6 +407,7 @@ class LocalFavoritesManager with ChangeNotifier {
         cover_path TEXT,
         time TEXT,
         display_order int,
+        translated_tags TEXT,
         primary key (id, type)
       );
     """);
@@ -353,7 +422,8 @@ class LocalFavoritesManager with ChangeNotifier {
     """, [folder, source, networkFolder]);
   }
 
-  bool isLinkedToNetworkFolder(String folder, String source, String networkFolder) {
+  bool isLinkedToNetworkFolder(
+      String folder, String source, String networkFolder) {
     var res = _db.select("""
       select * from folder_sync
       where folder_name == ? and source_key == ? and source_folder == ?;
@@ -391,9 +461,21 @@ class LocalFavoritesManager with ChangeNotifier {
     return FavoriteItem.fromRow(res.first);
   }
 
+  String _translateTags(List<String> tags) {
+    var res = <String>[];
+    for (var tag in tags) {
+      var translated = tag.translateTagsToCN;
+      if (translated != tag) {
+        res.add(translated);
+      }
+    }
+    return res.join(",");
+  }
+
   /// add comic to a folder.
   /// return true if success, false if already exists
-  bool addComic(String folder, FavoriteItem comic, [int? order]) {
+  bool addComic(String folder, FavoriteItem comic,
+      [int? order, String? updateTime]) {
     _modifiedAfterLastCache = true;
     if (!existsFolder(folder)) {
       throw Exception("Folder does not exists");
@@ -405,6 +487,7 @@ class LocalFavoritesManager with ChangeNotifier {
     if (res.isNotEmpty) {
       return false;
     }
+    var translatedTags = _translateTags(comic.tags);
     final params = [
       comic.id,
       comic.name,
@@ -412,28 +495,76 @@ class LocalFavoritesManager with ChangeNotifier {
       comic.type.value,
       comic.tags.join(","),
       comic.coverPath,
-      comic.time
+      comic.time,
+      translatedTags
     ];
     if (order != null) {
       _db.execute("""
-        insert into "$folder" (id, name, author, type, tags, cover_path, time, display_order)
-        values (?, ?, ?, ?, ?, ?, ?, ?);
+        insert into "$folder" (id, name, author, type, tags, cover_path, time, translated_tags, display_order)
+        values (?, ?, ?, ?, ?, ?, ?, ?, ?);
       """, [...params, order]);
     } else if (appdata.settings['newFavoriteAddTo'] == "end") {
       _db.execute("""
-        insert into "$folder" (id, name, author, type, tags, cover_path, time, display_order)
-        values (?, ?, ?, ?, ?, ?, ?, ?);
+        insert into "$folder" (id, name, author, type, tags, cover_path, time, translated_tags, display_order)
+        values (?, ?, ?, ?, ?, ?, ?, ?, ?);
       """, [...params, maxValue(folder) + 1]);
     } else {
       _db.execute("""
-        insert into "$folder" (id, name, author, type, tags, cover_path, time, display_order)
-        values (?, ?, ?, ?, ?, ?, ?, ?);
+        insert into "$folder" (id, name, author, type, tags, cover_path, time, translated_tags, display_order)
+        values (?, ?, ?, ?, ?, ?, ?, ?, ?);
       """, [...params, minValue(folder) - 1]);
     }
+    if (updateTime != null) {
+      var columns = _db.select("""
+      pragma table_info("$folder");
+    """);
+      if (columns.any((element) => element["name"] == "last_update_time")) {
+        _db.execute("""
+          update "$folder"
+          set last_update_time = ?
+          where id == ? and type == ?;
+        """, [updateTime, comic.id, comic.type.value]);
+      }
+    }
     notifyListeners();
     return true;
   }
 
+  void moveFavorite(
+      String sourceFolder, String targetFolder, String id, ComicType type) {
+    _modifiedAfterLastCache = true;
+
+    if (!existsFolder(sourceFolder)) {
+      throw Exception("Source folder does not exist");
+    }
+    if (!existsFolder(targetFolder)) {
+      throw Exception("Target folder does not exist");
+    }
+
+    var res = _db.select("""
+    select * from "$targetFolder"
+    where id == ? and type == ?;
+  """, [id, type.value]);
+
+    if (res.isNotEmpty) {
+      return;
+    }
+
+    _db.execute("""
+      insert into "$targetFolder" (id, name, author, type, tags, cover_path, time, display_order)
+      select id, name, author, type, tags, cover_path, time, ?
+      from "$sourceFolder"
+      where id == ? and type == ?;
+    """, [minValue(targetFolder) - 1, id, type.value]);
+
+    _db.execute("""
+    delete from "$sourceFolder"
+    where id == ? and type == ?;
+  """, [id, type.value]);
+
+    notifyListeners();
+  }
+
   /// delete a folder
   void deleteFolder(String name) {
     _modifiedAfterLastCache = true;
@@ -462,6 +593,23 @@ class LocalFavoritesManager with ChangeNotifier {
     notifyListeners();
   }
 
+  Future<int> removeInvalid() async {
+    int count = 0;
+    await Future.microtask(() {
+      var all = allComics();
+      for (var c in all) {
+        var comicSource = c.type.comicSource;
+        if ((c.type == ComicType.local &&
+                LocalManager().find(c.id, c.type) == null) ||
+            (c.type != ComicType.local && comicSource == null)) {
+          deleteComicWithId(c.folder, c.id, c.type);
+          count++;
+        }
+      }
+    });
+    return count;
+  }
+
   Future<void> clearAll() async {
     _db.dispose();
     File("${App.dataPath}/local_favorite.db").deleteSync();
@@ -504,8 +652,13 @@ class LocalFavoritesManager with ChangeNotifier {
     notifyListeners();
   }
 
-  void onReadEnd(String id, ComicType type) async {
+  void onRead(String id, ComicType type) async {
+    if (appdata.settings['moveFavoriteAfterRead'] == "none") {
+      markAsRead(id, type);
+      return;
+    }
     _modifiedAfterLastCache = true;
+    var followUpdatesFolder = appdata.settings['followUpdatesFolder'];
     for (final folder in folderNames) {
       var rows = _db.select("""
         select * from "$folder"
@@ -534,14 +687,45 @@ class LocalFavoritesManager with ChangeNotifier {
             UPDATE "$folder"
             SET 
               $updateLocationSql
+              ${followUpdatesFolder == folder ? "has_new_update = 0," : ""}
               time = ?
-            WHERE id == ?;
-          """, [newTime, id]);
+            WHERE id == ? and type == ?;
+          """, [newTime, id, type.value]);
+        if (followUpdatesFolder == folder) {
+          updateFollowUpdatesUI();
+        }
       }
     }
     notifyListeners();
   }
 
+  List<FavoriteItem> searchInFolder(String folder, String keyword) {
+    var keywordList = keyword.split(" ");
+    keyword = keywordList.first;
+    keyword = "%$keyword%";
+    var res = _db.select("""
+      SELECT * FROM "$folder" 
+      WHERE name LIKE ? OR author LIKE ? OR tags LIKE ? OR translated_tags LIKE ?;
+    """, [keyword, keyword, keyword, keyword]);
+    var comics = res.map((e) => FavoriteItem.fromRow(e)).toList();
+    bool test(FavoriteItem comic, String keyword) {
+      if (comic.name.contains(keyword)) {
+        return true;
+      } else if (comic.author.contains(keyword)) {
+        return true;
+      } else if (comic.tags.any((element) => element.contains(keyword))) {
+        return true;
+      }
+      return false;
+    }
+
+    for (var i = 1; i < keywordList.length; i++) {
+      comics =
+          comics.where((element) => test(element, keywordList[i])).toList();
+    }
+    return comics;
+  }
+
   List<FavoriteItemWithFolderInfo> search(String keyword) {
     var keywordList = keyword.split(" ");
     keyword = keywordList.first;
@@ -550,8 +734,8 @@ class LocalFavoritesManager with ChangeNotifier {
       keyword = "%$keyword%";
       var res = _db.select("""
         SELECT * FROM "$table" 
-        WHERE name LIKE ? OR author LIKE ? OR tags LIKE ?;
-      """, [keyword, keyword, keyword]);
+        WHERE name LIKE ? OR author LIKE ? OR tags LIKE ? OR translated_tags LIKE ?;
+      """, [keyword, keyword, keyword, keyword]);
       for (var comic in res) {
         comics.add(
             FavoriteItemWithFolderInfo(FavoriteItem.fromRow(comic), table));
@@ -613,7 +797,7 @@ class LocalFavoritesManager with ChangeNotifier {
     }
   }
 
-  void updateInfo(String folder, FavoriteItem comic) {
+  void updateInfo(String folder, FavoriteItem comic, [bool notify = true]) {
     _db.execute("""
       update "$folder"
       set name = ?, author = ?, cover_path = ?, tags = ?
@@ -626,7 +810,9 @@ class LocalFavoritesManager with ChangeNotifier {
       comic.id,
       comic.type.value
     ]);
-    notifyListeners();
+    if (notify) {
+      notifyListeners();
+    }
   }
 
   String folderToJson(String folder) {
@@ -663,7 +849,134 @@ class LocalFavoritesManager with ChangeNotifier {
     }
   }
 
+  void prepareTableForFollowUpdates(String table) {
+    // check if the table has the column "last_update_time" "has_new_update" "last_check_time"
+    var columns = _db.select("""
+      pragma table_info("$table");
+    """);
+    if (!columns.any((element) => element["name"] == "last_update_time")) {
+      _db.execute("""
+        alter table "$table"
+        add column last_update_time TEXT;
+      """);
+    }
+    if (!columns.any((element) => element["name"] == "has_new_update")) {
+      _db.execute("""
+        alter table "$table"
+        add column has_new_update int;
+      """);
+    }
+    _db.execute("""
+        update "$table"
+        set has_new_update = 0;
+      """);
+    if (!columns.any((element) => element["name"] == "last_check_time")) {
+      _db.execute("""
+        alter table "$table"
+        add column last_check_time int;
+      """);
+    }
+  }
+
+  void updateUpdateTime(
+    String folder,
+    String id,
+    ComicType type,
+    String updateTime,
+  ) {
+    var oldTime = _db.select("""
+      select last_update_time from "$folder"
+      where id == ? and type == ?;
+    """, [id, type.value]).first['last_update_time'];
+    var hasNewUpdate = oldTime != updateTime;
+    _db.execute("""
+      update "$folder"
+      set last_update_time = ?, has_new_update = ?, last_check_time = ?
+      where id == ? and type == ?;
+    """, [
+      updateTime,
+      hasNewUpdate ? 1 : 0,
+      DateTime.now().millisecondsSinceEpoch,
+      id,
+      type.value,
+    ]);
+  }
+
+  void updateCheckTime(
+    String folder,
+    String id,
+    ComicType type,
+  ) {
+    _db.execute("""
+      update "$folder"
+      set last_check_time = ?
+      where id == ? and type == ?;
+    """, [DateTime.now().millisecondsSinceEpoch, id, type.value]);
+  }
+
+  int countUpdates(String folder) {
+    return _db.select("""
+      select count(*) as c from "$folder"
+      where has_new_update == 1;
+    """).first['c'];
+  }
+
+  List<FavoriteItemWithUpdateInfo> getUpdates(String folder) {
+    if (!existsFolder(folder)) {
+      return [];
+    }
+    var res = _db.select("""
+      select * from "$folder"
+      where has_new_update == 1;
+    """);
+    return res
+        .map(
+          (e) => FavoriteItemWithUpdateInfo(
+            FavoriteItem.fromRow(e),
+            e['last_update_time'],
+            e['has_new_update'] == 1,
+            e['last_check_time'],
+          ),
+        )
+        .toList();
+  }
+
+  List<FavoriteItemWithUpdateInfo> getComicsWithUpdatesInfo(String folder) {
+    if (!existsFolder(folder)) {
+      return [];
+    }
+    var res = _db.select("""
+      select * from "$folder";
+    """);
+    return res
+        .map(
+          (e) => FavoriteItemWithUpdateInfo(
+            FavoriteItem.fromRow(e),
+            e['last_update_time'],
+            e['has_new_update'] == 1,
+            e['last_check_time'],
+          ),
+        )
+        .toList();
+  }
+
+  void markAsRead(String id, ComicType type) {
+    var folder = appdata.settings['followUpdatesFolder'];
+    if (!existsFolder(folder)) {
+      return;
+    }
+    _db.execute("""
+      update "$folder"
+      set has_new_update = 0
+      where id == ? and type == ?;
+    """, [id, type.value]);
+  }
+
   void close() {
     _db.dispose();
   }
+
+  void notifyChanges() {
+    notifyListeners();
+  }
 }

lib/foundation/global_state.dart

@@ -0,0 +1,66 @@
+import 'package:flutter/widgets.dart';
+
+abstract class GlobalState {
+  static final _state = <Pair<Object?, State>>[];
+
+  static void register(State state, [Object? key]) {
+    _state.add(Pair(key, state));
+  }
+
+  static T find<T extends State>([Object? key]) {
+    for (var pair in _state) {
+      if ((key == null || pair.left == key) && pair.right is T) {
+        return pair.right as T;
+      }
+    }
+    throw Exception('State not found');
+  }
+
+  static T? findOrNull<T extends State>([Object? key]) {
+    for (var pair in _state) {
+      if ((key == null || pair.left == key) && pair.right is T) {
+        return pair.right as T;
+      }
+    }
+    return null;
+  }
+
+  static void unregister(State state, [Object? key]) {
+    _state.removeWhere(
+        (pair) => (key == null || pair.left == key) && pair.right == state);
+  }
+}
+
+class Pair<K, V> {
+  K left;
+  V right;
+
+  Pair(this.left, this.right);
+}
+
+abstract class AutomaticGlobalState<T extends StatefulWidget>
+    extends State<T> {
+  @override
+  @mustCallSuper
+  void initState() {
+    super.initState();
+    GlobalState.register(this, key);
+  }
+
+  @override
+  @mustCallSuper
+  void dispose() {
+    super.dispose();
+    GlobalState.unregister(this, key);
+  }
+
+  Object? get key;
+
+  void update() {
+    setState(() {});
+  }
+
+  void refresh() {
+    update();
+  }
+}

lib/foundation/history.dart

@@ -1,10 +1,24 @@
 import 'dart:async';
+import 'dart:convert';
+import 'dart:isolate';
+import 'dart:math';
+import 'dart:ffi' as ffi;
 
+import 'package:flutter/foundation.dart';
+import 'package:flutter/services.dart';
 import 'package:flutter/widgets.dart' show ChangeNotifier;
 import 'package:sqlite3/sqlite3.dart';
+import 'package:venera/foundation/comic_source/comic_source.dart';
 import 'package:venera/foundation/comic_type.dart';
+import 'package:venera/foundation/image_provider/image_favorites_provider.dart';
+import 'package:venera/foundation/log.dart';
+import 'package:venera/utils/ext.dart';
+import 'package:venera/utils/translations.dart';
 
 import 'app.dart';
+import 'consts.dart';
+
+part "image_favorites.dart";
 
 typedef HistoryType = ComicType;
 
@@ -22,57 +36,57 @@ abstract mixin class HistoryMixin {
   HistoryType get historyType;
 }
 
-class History {
+class History implements Comic {
   HistoryType type;
 
   DateTime time;
 
+  @override
   String title;
 
+  @override
   String subtitle;
 
+  @override
   String cover;
 
+  /// index of chapters. 1-based.
   int ep;
 
+  /// index of pages. 1-based.
   int page;
 
+  /// index of chapter groups. 1-based.
+  /// If [group] is not null, [ep] is the index of chapter in the group.
+  int? group;
+
+  @override
   String id;
 
   /// readEpisode is a set of episode numbers that have been read.
-  ///
-  /// The number of episodes is 1-based.
-  Set<int> readEpisode;
+  /// For normal chapters, it is a set of chapter numbers.
+  /// For grouped chapters, it is a set of strings in the format of "group_number-chapter_number".
+  /// 1-based.
+  Set<String> readEpisode;
 
+  @override
   int? maxPage;
 
   History.fromModel(
       {required HistoryMixin model,
       required this.ep,
       required this.page,
-      Set<int>? readChapters,
+      this.group,
+      Set<String>? readChapters,
       DateTime? time})
       : type = model.historyType,
         title = model.title,
         subtitle = model.subTitle ?? '',
         cover = model.cover,
         id = model.id,
-        readEpisode = readChapters ?? <int>{},
+        readEpisode = readChapters ?? <String>{},
         time = time ?? DateTime.now();
 
-  Map<String, dynamic> toMap() => {
-        "type": type.value,
-        "time": time.millisecondsSinceEpoch,
-        "title": title,
-        "subtitle": subtitle,
-        "cover": cover,
-        "ep": ep,
-        "page": page,
-        "id": id,
-        "readEpisode": readEpisode.toList(),
-        "max_page": maxPage
-      };
-
   History.fromMap(Map<String, dynamic> map)
       : type = HistoryType(map["type"]),
         time = DateTime.fromMillisecondsSinceEpoch(map["time"]),
@@ -82,8 +96,9 @@ class History {
         ep = map["ep"],
         page = map["page"],
         id = map["id"],
-        readEpisode = Set<int>.from(
-            (map["readEpisode"] as List<dynamic>?)?.toSet() ?? const <int>{}),
+        readEpisode = Set<String>.from(
+            (map["readEpisode"] as List<dynamic>?)?.toSet() ??
+                const <String>{}),
         maxPage = map["max_page"];
 
   @override
@@ -100,35 +115,11 @@ class History {
         ep = row["ep"],
         page = row["page"],
         id = row["id"],
-        readEpisode = Set<int>.from((row["readEpisode"] as String)
+        readEpisode = Set<String>.from((row["readEpisode"] as String)
             .split(',')
-            .where((element) => element != "")
-            .map((e) => int.parse(e))),
-        maxPage = row["max_page"];
-
-  static Future<History> findOrCreate(
-    HistoryMixin model, {
-    int ep = 0,
-    int page = 0,
-  }) async {
-    var history = await HistoryManager().find(model.id, model.historyType);
-    if (history != null) {
-      return history;
-    }
-    history = History.fromModel(model: model, ep: ep, page: page);
-    HistoryManager().addHistory(history);
-    return history;
-  }
-
-  static Future<History> createIfNull(
-      History? history, HistoryMixin model) async {
-    if (history != null) {
-      return history;
-    }
-    history = History.fromModel(model: model, ep: 0, page: 0);
-    HistoryManager().addHistory(history);
-    return history;
-  }
+            .where((element) => element != "")),
+        maxPage = row["max_page"],
+        group = row["chapter_group"];
 
   @override
   bool operator ==(Object other) {
@@ -137,6 +128,47 @@ class History {
 
   @override
   int get hashCode => Object.hash(id, type);
+
+  @override
+  String get description {
+    var res = "";
+    if (ep >= 1) {
+      res += "Chapter @ep".tlParams({
+        "ep": ep,
+      });
+    }
+    if (page >= 1) {
+      if (ep >= 1) {
+        res += " - ";
+      }
+      res += "Page @page".tlParams({
+        "page": page,
+      });
+    }
+    return res;
+  }
+
+  @override
+  String? get favoriteId => null;
+
+  @override
+  String? get language => null;
+
+  @override
+  String get sourceKey => type == ComicType.local
+      ? 'local'
+      : type.comicSource?.key ?? "Unknown:${type.value}";
+
+  @override
+  double? get stars => null;
+
+  @override
+  List<String>? get tags => null;
+
+  @override
+  Map<String, dynamic> toJson() {
+    throw UnimplementedError();
+  }
 }
 
 class HistoryManager with ChangeNotifier {
@@ -151,11 +183,18 @@ class HistoryManager with ChangeNotifier {
 
   int get length => _db.select("select count(*) from history;").first[0] as int;
 
-  Map<String, bool>? _cachedHistory;
+  /// Cache of history ids. Improve the performance of find operation.
+  Map<String, bool>? _cachedHistoryIds;
 
-  static const _kMaxHistoryLength = 200;
+  /// Cache records recently modified by the app. Improve the performance of listeners.
+  final cachedHistories = <String, History>{};
+
+  bool isInitialized = false;
 
   Future<void> init() async {
+    if (isInitialized) {
+      return;
+    }
     _db = sqlite3.open("${App.dataPath}/history.db");
 
     _db.execute("""
@@ -169,27 +208,73 @@ class HistoryManager with ChangeNotifier {
           ep int,
           page int,
           readEpisode text,
-          max_page int
+          max_page int,
+          chapter_group int
         );
       """);
 
+    var columns = _db.select("PRAGMA table_info(history);");
+    if (!columns.any((element) => element["name"] == "chapter_group")) {
+      _db.execute("alter table history add column chapter_group int;");
+    }
+
+    notifyListeners();
+    ImageFavoriteManager().init();
+    isInitialized = true;
+  }
+
+  static const _insertHistorySql = """
+        insert or replace into history (id, title, subtitle, cover, time, type, ep, page, readEpisode, max_page, chapter_group)
+        values (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?);
+      """;
+
+  static Future<void> _addHistoryAsync(int dbAddr, History newItem) {
+    return Isolate.run(() {
+      var db = sqlite3.fromPointer(ffi.Pointer.fromAddress(dbAddr));
+      db.execute(_insertHistorySql, [
+        newItem.id,
+        newItem.title,
+        newItem.subtitle,
+        newItem.cover,
+        newItem.time.millisecondsSinceEpoch,
+        newItem.type.value,
+        newItem.ep,
+        newItem.page,
+        newItem.readEpisode.join(','),
+        newItem.maxPage,
+        newItem.group
+      ]);
+    });
+  }
+
+  bool _haveAsyncTask = false;
+
+  /// Create a isolate to add history to prevent blocking the UI thread.
+  Future<void> addHistoryAsync(History newItem) async {
+    while (_haveAsyncTask) {
+      await Future.delayed(Duration(milliseconds: 20));
+    }
+
+    _haveAsyncTask = true;
+    await _addHistoryAsync(_db.handle.address, newItem);
+    _haveAsyncTask = false;
+    if (_cachedHistoryIds == null) {
+      updateCache();
+    } else {
+      _cachedHistoryIds![newItem.id] = true;
+    }
+    cachedHistories[newItem.id] = newItem;
+    if (cachedHistories.length > 10) {
+      cachedHistories.remove(cachedHistories.keys.first);
+    }
     notifyListeners();
   }
 
   /// add history. if exists, update time.
   ///
   /// This function would be called when user start reading.
-  Future<void> addHistory(History newItem) async {
-    while(count() >= _kMaxHistoryLength) {
-      _db.execute("""
-        delete from history
-        where time == (select min(time) from history);
-      """);
-    }
-    _db.execute("""
-        insert or replace into history (id, title, subtitle, cover, time, type, ep, page, readEpisode, max_page)
-        values (?, ?, ?, ?, ?, ?, ?, ?, ?, ?);
-      """, [
+  void addHistory(History newItem) {
+    _db.execute(_insertHistorySql, [
       newItem.id,
       newItem.title,
       newItem.subtitle,
@@ -199,9 +284,18 @@ class HistoryManager with ChangeNotifier {
       newItem.ep,
       newItem.page,
       newItem.readEpisode.join(','),
-      newItem.maxPage
+      newItem.maxPage,
+      newItem.group
     ]);
-    updateCache();
+    if (_cachedHistoryIds == null) {
+      updateCache();
+    } else {
+      _cachedHistoryIds![newItem.id] = true;
+    }
+    cachedHistories[newItem.id] = newItem;
+    if (cachedHistories.length > 10) {
+      cachedHistories.remove(cachedHistories.keys.first);
+    }
     notifyListeners();
   }
 
@@ -220,27 +314,31 @@ class HistoryManager with ChangeNotifier {
     notifyListeners();
   }
 
-  Future<History?> find(String id, ComicType type) async {
-    return findSync(id, type);
-  }
-
   void updateCache() {
-    _cachedHistory = {};
+    _cachedHistoryIds = {};
     var res = _db.select("""
-        select * from history;
+        select id from history;
       """);
     for (var element in res) {
-      _cachedHistory![element["id"] as String] = true;
+      _cachedHistoryIds![element["id"] as String] = true;
+    }
+    for (var key in cachedHistories.keys.toList()) {
+      if (!_cachedHistoryIds!.containsKey(key)) {
+        cachedHistories.remove(key);
+      }
     }
   }
 
-  History? findSync(String id, ComicType type) {
-    if(_cachedHistory == null) {
+  History? find(String id, ComicType type) {
+    if (_cachedHistoryIds == null) {
       updateCache();
     }
-    if (!_cachedHistory!.containsKey(id)) {
+    if (!_cachedHistoryIds!.containsKey(id)) {
       return null;
     }
+    if (cachedHistories.containsKey(id)) {
+      return cachedHistories[id];
+    }
 
     var res = _db.select("""
       select * from history
@@ -279,6 +377,7 @@ class HistoryManager with ChangeNotifier {
   }
 
   void close() {
+    isInitialized = false;
     _db.dispose();
   }
 }

lib/foundation/image_favorites.dart

@@ -0,0 +1,541 @@
+part of "history.dart";
+
+class ImageFavorite {
+  final String eid;
+  final String id; // 漫画id
+  final int ep;
+  final String epName;
+  final String sourceKey;
+  String imageKey;
+  int page;
+  bool? isAutoFavorite;
+
+  ImageFavorite(
+    this.page,
+    this.imageKey,
+    this.isAutoFavorite,
+    this.eid,
+    this.id,
+    this.ep,
+    this.sourceKey,
+    this.epName,
+  );
+
+  Map<String, dynamic> toJson() {
+    return {
+      'page': page,
+      'imageKey': imageKey,
+      'isAutoFavorite': isAutoFavorite,
+      'eid': eid,
+      'id': id,
+      'ep': ep,
+      'sourceKey': sourceKey,
+      'epName': epName,
+    };
+  }
+
+  ImageFavorite.fromJson(Map<String, dynamic> json)
+      : page = json['page'],
+        imageKey = json['imageKey'],
+        isAutoFavorite = json['isAutoFavorite'],
+        eid = json['eid'],
+        id = json['id'],
+        ep = json['ep'],
+        sourceKey = json['sourceKey'],
+        epName = json['epName'];
+
+  ImageFavorite copyWith({
+    int? page,
+    String? imageKey,
+    bool? isAutoFavorite,
+    String? eid,
+    String? id,
+    int? ep,
+    String? sourceKey,
+    String? epName,
+  }) {
+    return ImageFavorite(
+      page ?? this.page,
+      imageKey ?? this.imageKey,
+      isAutoFavorite ?? this.isAutoFavorite,
+      eid ?? this.eid,
+      id ?? this.id,
+      ep ?? this.ep,
+      sourceKey ?? this.sourceKey,
+      epName ?? this.epName,
+    );
+  }
+
+  @override
+  bool operator ==(Object other) {
+    return other is ImageFavorite &&
+        other.id == id &&
+        other.sourceKey == sourceKey &&
+        other.page == page &&
+        other.eid == eid &&
+        other.ep == ep;
+  }
+
+  @override
+  int get hashCode => Object.hash(id, sourceKey, page, eid, ep);
+}
+
+class ImageFavoritesEp {
+  // 小心拷贝等多章节的可能更新章节顺序
+  String eid;
+  final int ep;
+  int maxPage;
+  String epName;
+  List<ImageFavorite> imageFavorites;
+
+  ImageFavoritesEp(
+      this.eid, this.ep, this.imageFavorites, this.epName, this.maxPage);
+
+  // 是否有封面
+  bool get isHasFirstPage {
+    return imageFavorites[0].page == firstPage;
+  }
+
+  // 是否都有imageKey
+  bool get isHasImageKey {
+    return imageFavorites.every((e) => e.imageKey != "");
+  }
+
+  Map<String, dynamic> toJson() {
+    return {
+      'eid': eid,
+      'ep': ep,
+      'maxPage': maxPage,
+      'epName': epName,
+      'imageFavorites': imageFavorites.map((e) => e.toJson()).toList(),
+    };
+  }
+}
+
+class ImageFavoritesComic {
+  final String id;
+  final String title;
+  String subTitle;
+  String author;
+  final String sourceKey;
+
+  // 不一定是真的这本漫画的所有页数, 如果是多章节的时候
+  int maxPage;
+  List<String> tags;
+  List<String> translatedTags;
+  final DateTime time;
+  List<ImageFavoritesEp> imageFavoritesEp;
+  final Map<String, dynamic> other;
+
+  ImageFavoritesComic(
+    this.id,
+    this.imageFavoritesEp,
+    this.title,
+    this.sourceKey,
+    this.tags,
+    this.translatedTags,
+    this.time,
+    this.author,
+    this.other,
+    this.subTitle,
+    this.maxPage,
+  );
+
+  // 是否都有imageKey
+  bool get isAllHasImageKey {
+    return imageFavoritesEp
+        .every((e) => e.imageFavorites.every((j) => j.imageKey != ""));
+  }
+
+  int get maxPageFromEp {
+    int temp = 0;
+    for (var e in imageFavoritesEp) {
+      temp += e.maxPage;
+    }
+    return temp;
+  }
+
+  // 是否都有封面
+  bool get isAllHasFirstPage {
+    return imageFavoritesEp.every((e) => e.isHasFirstPage);
+  }
+
+  Iterable<ImageFavorite> get images sync*{
+    for (var e in imageFavoritesEp) {
+      yield* e.imageFavorites;
+    }
+  }
+
+  @override
+  bool operator ==(Object other) {
+    return other is ImageFavoritesComic &&
+        other.id == id &&
+        other.sourceKey == sourceKey;
+  }
+
+  @override
+  int get hashCode => Object.hash(id, sourceKey);
+
+  factory ImageFavoritesComic.fromRow(Row r) {
+    var tempImageFavoritesEp = jsonDecode(r["image_favorites_ep"]);
+    List<ImageFavoritesEp> finalImageFavoritesEp = [];
+    tempImageFavoritesEp.forEach((i) {
+      List<ImageFavorite> temp = [];
+      i["imageFavorites"].forEach((j) {
+        temp.add(ImageFavorite(
+          j["page"],
+          j["imageKey"],
+          j["isAutoFavorite"],
+          i["eid"],
+          r["id"],
+          i["ep"],
+          r["source_key"],
+          i["epName"],
+        ));
+      });
+      finalImageFavoritesEp.add(ImageFavoritesEp(
+          i["eid"], i["ep"], temp, i["epName"], i["maxPage"] ?? 1));
+    });
+    return ImageFavoritesComic(
+      r["id"],
+      finalImageFavoritesEp,
+      r["title"],
+      r["source_key"],
+      r["tags"].split(","),
+      r["translated_tags"].split(","),
+      DateTime.fromMillisecondsSinceEpoch(r["time"]),
+      r["author"],
+      jsonDecode(r["other"]),
+      r["sub_title"],
+      r["max_page"],
+    );
+  }
+}
+
+class ImageFavoriteManager with ChangeNotifier {
+  Database get _db => HistoryManager()._db;
+
+  List<ImageFavoritesComic> get comics => getAll();
+
+  static ImageFavoriteManager? _cache;
+
+  ImageFavoriteManager._();
+
+  factory ImageFavoriteManager() => (_cache ??= ImageFavoriteManager._());
+
+  /// 检查表image_favorites是否存在, 不存在则创建
+  void init() {
+    _db.execute("CREATE TABLE IF NOT EXISTS image_favorites ("
+        "id TEXT,"
+        "title TEXT NOT NULL,"
+        "sub_title TEXT,"
+        "author TEXT,"
+        "tags TEXT,"
+        "translated_tags TEXT,"
+        "time int,"
+        "max_page int,"
+        "source_key TEXT NOT NULL,"
+        "image_favorites_ep TEXT NOT NULL,"
+        "other TEXT NOT NULL,"
+        "PRIMARY KEY (id,source_key)"
+        ");");
+  }
+
+  // 做排序和去重的操作
+  void addOrUpdateOrDelete(ImageFavoritesComic favorite, [bool notify = true]) {
+    // 没有章节了就删掉
+    if (favorite.imageFavoritesEp.isEmpty) {
+      _db.execute("""
+      delete from image_favorites
+      where id == ? and source_key == ?;
+    """, [favorite.id, favorite.sourceKey]);
+    } else {
+      // 去重章节
+      List<ImageFavoritesEp> tempImageFavoritesEp = [];
+      for (var e in favorite.imageFavoritesEp) {
+        int index = tempImageFavoritesEp.indexWhere((i) {
+          return i.ep == e.ep;
+        });
+        // 再做一层保险, 防止出现ep为0的脏数据
+        if (index == -1 && e.ep > 0) {
+          tempImageFavoritesEp.add(e);
+        }
+      }
+      tempImageFavoritesEp.sort((a, b) => a.ep.compareTo(b.ep));
+      List<dynamic> finalImageFavoritesEp =
+          jsonDecode(jsonEncode(tempImageFavoritesEp));
+      for (var e in tempImageFavoritesEp) {
+        List<Map> finalImageFavorites = [];
+        int epIndex = tempImageFavoritesEp.indexOf(e);
+        for (ImageFavorite j in e.imageFavorites) {
+          int index =
+              finalImageFavorites.indexWhere((i) => i["page"] == j.page);
+          if (index == -1 && j.page > 0) {
+            // isAutoFavorite 为 null 不写入数据库, 同时只保留需要的属性, 避免增加太多重复字段在数据库里
+            if (j.isAutoFavorite != null) {
+              finalImageFavorites.add({
+                "page": j.page,
+                "imageKey": j.imageKey,
+                "isAutoFavorite": j.isAutoFavorite
+              });
+            } else {
+              finalImageFavorites.add({"page": j.page, "imageKey": j.imageKey});
+            }
+          }
+        }
+        finalImageFavorites.sort((a, b) => a["page"].compareTo(b["page"]));
+        finalImageFavoritesEp[epIndex]["imageFavorites"] = finalImageFavorites;
+      }
+      if (tempImageFavoritesEp.isEmpty) {
+        throw "Error: No ImageFavoritesEp";
+      }
+      _db.execute("""
+      insert or replace into image_favorites(id, title, sub_title, author, tags, translated_tags, time, max_page, source_key, image_favorites_ep, other)
+      values(?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?);
+    """, [
+        favorite.id,
+        favorite.title,
+        favorite.subTitle,
+        favorite.author,
+        favorite.tags.join(","),
+        favorite.translatedTags.join(","),
+        favorite.time.millisecondsSinceEpoch,
+        favorite.maxPage,
+        favorite.sourceKey,
+        jsonEncode(finalImageFavoritesEp),
+        jsonEncode(favorite.other)
+      ]);
+    }
+    if (notify) {
+      notifyListeners();
+    }
+  }
+
+  bool has(String id, String sourceKey, String eid, int page, int ep) {
+    var comic = find(id, sourceKey);
+    if (comic == null) {
+      return false;
+    }
+    var epIndex = comic.imageFavoritesEp.where((e) => e.eid == eid).firstOrNull;
+    if (epIndex == null) {
+      return false;
+    }
+    return epIndex.imageFavorites.any((e) => e.page == page && e.ep == ep);
+  }
+
+  List<ImageFavoritesComic> getAll([String? keyword]) {
+    ResultSet res;
+    if (keyword == null || keyword == "") {
+      res = _db.select("select * from image_favorites;");
+    } else {
+      res = _db.select(
+        """
+    select * from image_favorites
+    WHERE title LIKE ?
+    OR sub_title LIKE ?
+    OR LOWER(tags) LIKE LOWER(?)
+    OR LOWER(translated_tags) LIKE LOWER(?)
+    OR author LIKE ?;
+    """,
+        ['%$keyword%', '%$keyword%', '%$keyword%', '%$keyword%', '%$keyword%'],
+      );
+    }
+    try {
+      return res.map((e) => ImageFavoritesComic.fromRow(e)).toList();
+    } catch (e, stackTrace) {
+      Log.error("Unhandled Exception", e.toString(), stackTrace);
+      return [];
+    }
+  }
+
+  void deleteImageFavorite(Iterable<ImageFavorite> imageFavoriteList) {
+    if (imageFavoriteList.isEmpty) {
+      return;
+    }
+    for (var i in imageFavoriteList) {
+      ImageFavoritesProvider.deleteFromCache(i);
+    }
+    var comics = <ImageFavoritesComic>{};
+    for (var i in imageFavoriteList) {
+      var comic = comics
+              .where((c) => c.id == i.id && c.sourceKey == i.sourceKey)
+              .firstOrNull ??
+          find(i.id, i.sourceKey);
+      if (comic == null) {
+        continue;
+      }
+      var ep = comic.imageFavoritesEp.firstWhereOrNull((e) => e.ep == i.ep);
+      if (ep == null) {
+        continue;
+      }
+      ep.imageFavorites.remove(i);
+      if (ep.imageFavorites.isEmpty) {
+        comic.imageFavoritesEp.remove(ep);
+      }
+      comics.add(comic);
+    }
+    for (var i in comics) {
+      addOrUpdateOrDelete(i, false);
+    }
+    notifyListeners();
+  }
+
+  int get length {
+    var res = _db.select("select count(*) from image_favorites;");
+    return res.first.values.first! as int;
+  }
+
+  List<ImageFavoritesComic> search(String keyword) {
+    if (keyword == "") {
+      return [];
+    }
+    return getAll(keyword);
+  }
+
+  static Future<ImageFavoritesComputed> computeImageFavorites() {
+    var token = ServicesBinding.rootIsolateToken!;
+    var count = ImageFavoriteManager().length;
+    if (count == 0) {
+      return Future.value(ImageFavoritesComputed([], [], [], 0));
+    } else if (count > 100) {
+      return Isolate.run(() async {
+        BackgroundIsolateBinaryMessenger.ensureInitialized(token);
+        await App.init();
+        await HistoryManager().init();
+        return _computeImageFavorites();
+      });
+    } else {
+      return Future.value(_computeImageFavorites());
+    }
+  }
+
+  static ImageFavoritesComputed _computeImageFavorites() {
+    const maxLength = 20;
+
+    var comics = ImageFavoriteManager().getAll();
+    // 去掉这些没有意义的标签
+    const List<String> exceptTags = [
+      '連載中',
+      '',
+      'translated',
+      'chinese',
+      'sole male',
+      'sole female',
+      'original',
+      'doujinshi',
+      'manga',
+      'multi-work series',
+      'mosaic censorship',
+      'dilf',
+      'bbm',
+      'uncensored',
+      'full censorship'
+    ];
+
+    Map<String, int> tagCount = {};
+    Map<String, int> authorCount = {};
+    Map<ImageFavoritesComic, int> comicImageCount = {};
+    Map<ImageFavoritesComic, int> comicMaxPages = {};
+    int count = 0;
+
+    for (var comic in comics) {
+      count += comic.images.length;
+      for (var tag in comic.tags) {
+        String finalTag = tag;
+        tagCount[finalTag] = (tagCount[finalTag] ?? 0) + 1;
+      }
+
+      if (comic.author != "") {
+        String finalAuthor = comic.author;
+        authorCount[finalAuthor] =
+            (authorCount[finalAuthor] ?? 0) + comic.images.length;
+      }
+      // 小于10页的漫画不统计
+      if (comic.maxPageFromEp < 10) {
+        continue;
+      }
+      comicImageCount[comic] =
+          (comicImageCount[comic] ?? 0) + comic.images.length;
+      comicMaxPages[comic] = (comicMaxPages[comic] ?? 0) + comic.maxPageFromEp;
+    }
+
+    // 按数量排序标签
+    List<String> sortedTags = tagCount.keys.toList()
+      ..sort((a, b) => tagCount[b]!.compareTo(tagCount[a]!));
+
+    // 按数量排序作者
+    List<String> sortedAuthors = authorCount.keys.toList()
+      ..sort((a, b) => authorCount[b]!.compareTo(authorCount[a]!));
+
+    // 按收藏数量排序漫画
+    List<MapEntry<ImageFavoritesComic, int>> sortedComicsByNum =
+        comicImageCount.entries.toList()
+          ..sort((a, b) => b.value.compareTo(a.value));
+
+    validateTag(String tag) {
+      if (tag.startsWith("Category:")) {
+        return false;
+      }
+      return !exceptTags.contains(tag.split(":").last.toLowerCase()) &&
+          !tag.isNum;
+    }
+
+    return ImageFavoritesComputed(
+      sortedTags
+          .where(validateTag)
+          .map((tag) => TextWithCount(tag, tagCount[tag]!))
+          .take(maxLength)
+          .toList(),
+      sortedAuthors
+          .map((author) => TextWithCount(author, authorCount[author]!))
+          .take(maxLength)
+          .toList(),
+      sortedComicsByNum
+          .map((comic) => TextWithCount(comic.key.title, comic.value))
+          .take(maxLength)
+          .toList(),
+      count,
+    );
+  }
+
+  ImageFavoritesComic? find(String id, String sourceKey) {
+    var row = _db.select("""
+    select * from image_favorites
+    where id == ? and source_key == ?;
+    """, [id, sourceKey]);
+    if (row.isEmpty) {
+      return null;
+    }
+    return ImageFavoritesComic.fromRow(row.first);
+  }
+}
+
+class TextWithCount {
+  final String text;
+  final int count;
+
+  const TextWithCount(this.text, this.count);
+}
+
+class ImageFavoritesComputed {
+  /// 基于收藏的标签数排序
+  final List<TextWithCount> tags;
+
+  /// 基于收藏的作者数排序
+  final List<TextWithCount> authors;
+
+  /// 基于喜欢的图片数排序
+  final List<TextWithCount> comics;
+
+  final int count;
+
+  /// 计算后的图片收藏数据
+  const ImageFavoritesComputed(
+    this.tags,
+    this.authors,
+    this.comics,
+    this.count,
+  );
+
+  bool get isEmpty => tags.isEmpty && authors.isEmpty && comics.isEmpty;
+}

lib/foundation/image_provider/base_image_provider.dart

@@ -1,16 +1,48 @@
 import 'dart:async' show Future, StreamController, scheduleMicrotask;
-import 'dart:collection';
 import 'dart:convert';
+import 'dart:math';
 import 'dart:ui' as ui show Codec;
 import 'dart:ui';
 import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
 import 'package:venera/foundation/cache_manager.dart';
+import 'package:venera/foundation/log.dart';
 
 abstract class BaseImageProvider<T extends BaseImageProvider<T>>
     extends ImageProvider<T> {
   const BaseImageProvider();
 
+  static double? _effectiveScreenWidth;
+
+  static const double _normalComicImageRatio = 0.72;
+
+  static const double _minComicImageWidth = 1920 * _normalComicImageRatio;
+
+  static TargetImageSize _getTargetSize(width, height) {
+    if (_effectiveScreenWidth == null) {
+      final screens = PlatformDispatcher.instance.displays;
+      for (var screen in screens) {
+        if (screen.size.width > screen.size.height) {
+          _effectiveScreenWidth = max(
+            _effectiveScreenWidth ?? 0,
+            screen.size.height * _normalComicImageRatio,
+          );
+        } else {
+          _effectiveScreenWidth =
+              max(_effectiveScreenWidth ?? 0, screen.size.width);
+        }
+      }
+      if (_effectiveScreenWidth! < _minComicImageWidth) {
+        _effectiveScreenWidth = _minComicImageWidth;
+      }
+    }
+    if (width > _effectiveScreenWidth!) {
+      height = (height * _effectiveScreenWidth! / width).round();
+      width = _effectiveScreenWidth!.round();
+    }
+    return TargetImageSize(width: width, height: height);
+  }
+
   @override
   ImageStreamCompleter loadImage(T key, ImageDecoderCallback decode) {
     final chunkEvents = StreamController<ImageChunkEvent>();
@@ -46,19 +78,18 @@ abstract class BaseImageProvider<T extends BaseImageProvider<T>>
 
       while (data == null && !stop) {
         try {
-          if(_cache.containsKey(key.key)){
-            data = _cache[key.key];
-          } else {
-            data = await load(chunkEvents);
-            _checkCacheSize();
-            _cache[key.key] = data;
-            _cacheSize += data.length;
-          }
+          data = await load(chunkEvents, () {
+            if (stop) {
+              throw const _ImageLoadingStopException();
+            }
+          });
+        } on _ImageLoadingStopException {
+          rethrow;
         } catch (e) {
-          if(e.toString().contains("Invalid Status Code: 404")) {
+          if (e.toString().contains("Invalid Status Code: 404")) {
             rethrow;
           }
-          if(e.toString().contains("Invalid Status Code: 403")) {
+          if (e.toString().contains("Invalid Status Code: 403")) {
             rethrow;
           }
           if (e.toString().contains("handshake")) {
@@ -74,23 +105,27 @@ abstract class BaseImageProvider<T extends BaseImageProvider<T>>
         }
       }
 
-      if(stop) {
-        throw Exception("Image loading is stopped");
+      if (stop) {
+        throw const _ImageLoadingStopException();
       }
 
-      if(data!.isEmpty) {
+      if (data!.isEmpty) {
         throw Exception("Empty image data");
       }
 
       try {
         final buffer = await ImmutableBuffer.fromUint8List(data);
-        return await decode(buffer);
+        return await decode(
+          buffer,
+          getTargetSize: enableResize ? _getTargetSize : null,
+        );
       } catch (e) {
         await CacheManager().delete(this.key);
         if (data.length < 2 * 1024) {
           // data is too short, it's likely that the data is text, not image
           try {
-            var text = const Utf8Codec(allowMalformed: false).decoder.convert(data);
+            var text =
+                const Utf8Codec(allowMalformed: false).decoder.convert(data);
             throw Exception("Expected image data, but got text: $text");
           } catch (e) {
             // ignore
@@ -98,41 +133,23 @@ abstract class BaseImageProvider<T extends BaseImageProvider<T>>
         }
         rethrow;
       }
-    } catch (e) {
+    } on _ImageLoadingStopException {
+      rethrow;
+    } catch (e, s) {
       scheduleMicrotask(() {
         PaintingBinding.instance.imageCache.evict(key);
       });
+      Log.error("Image Loading", e, s);
       rethrow;
     } finally {
       chunkEvents.close();
     }
   }
 
-  static final _cache = LinkedHashMap<String, Uint8List>();
-
-  static var _cacheSize = 0;
-
-  static var _cacheSizeLimit = 50 * 1024 * 1024;
-
-  static void _checkCacheSize(){
-    while (_cacheSize > _cacheSizeLimit){
-      var firstKey = _cache.keys.first;
-      _cacheSize -= _cache[firstKey]!.length;
-      _cache.remove(firstKey);
-    }
-  }
-
-  static void clearCache(){
-    _cache.clear();
-    _cacheSize = 0;
-  }
-
-  static void setCacheSizeLimit(int size){
-    _cacheSizeLimit = size;
-    _checkCacheSize();
-  }
-
-  Future<Uint8List> load(StreamController<ImageChunkEvent> chunkEvents);
+  Future<Uint8List> load(
+    StreamController<ImageChunkEvent> chunkEvents,
+    void Function() checkStop,
+  );
 
   String get key;
 
@@ -148,6 +165,12 @@ abstract class BaseImageProvider<T extends BaseImageProvider<T>>
   String toString() {
     return "$runtimeType($key)";
   }
+
+  bool get enableResize => false;
 }
 
 typedef FileDecoderCallback = Future<ui.Codec> Function(Uint8List);
+
+class _ImageLoadingStopException implements Exception {
+  const _ImageLoadingStopException();
+}

lib/foundation/image_provider/cached_image.dart

@@ -1,13 +1,16 @@
-import 'dart:async' show Future, StreamController;
+import 'dart:async' show Future;
 import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
 import 'package:venera/network/images.dart';
+import 'package:venera/utils/io.dart';
 import 'base_image_provider.dart';
 import 'cached_image.dart' as image_provider;
 
 class CachedImageProvider
     extends BaseImageProvider<image_provider.CachedImageProvider> {
   /// Image provider for normal image.
+  ///
+  /// [url] is the url of the image. Local file path is also supported.
   const CachedImageProvider(this.url, {this.headers, this.sourceKey, this.cid});
 
   final String url;
@@ -18,18 +21,37 @@ class CachedImageProvider
 
   final String? cid;
 
+  static int loadingCount = 0;
+
+  static const _kMaxLoadingCount = 8;
+
   @override
-  Future<Uint8List> load(StreamController<ImageChunkEvent> chunkEvents) async {
-    await for (var progress in ImageDownloader.loadThumbnail(url, sourceKey, cid)) {
-      chunkEvents.add(ImageChunkEvent(
-        cumulativeBytesLoaded: progress.currentBytes,
-        expectedTotalBytes: progress.totalBytes,
-      ));
-      if(progress.imageBytes != null) {
-        return progress.imageBytes!;
-      }
+  Future<Uint8List> load(chunkEvents, checkStop) async {
+    while(loadingCount > _kMaxLoadingCount) {
+      await Future.delayed(const Duration(milliseconds: 100));
+      checkStop();
+    }
+    loadingCount++;
+    try {
+      if(url.startsWith("file://")) {
+        var file = File(url.substring(7));
+        return file.readAsBytes();
+      }
+      await for (var progress in ImageDownloader.loadThumbnail(url, sourceKey, cid)) {
+        checkStop();
+        chunkEvents.add(ImageChunkEvent(
+          cumulativeBytesLoaded: progress.currentBytes,
+          expectedTotalBytes: progress.totalBytes,
+        ));
+        if(progress.imageBytes != null) {
+          return progress.imageBytes!;
+        }
+      }
+      throw "Error: Empty response body.";
+    }
+    finally {
+      loadingCount--;
     }
-    throw "Error: Empty response body.";
   }
 
   @override

lib/foundation/image_provider/history_image_provider.dart

@@ -0,0 +1,59 @@
+import 'dart:async' show Future;
+import 'package:flutter/foundation.dart';
+import 'package:flutter/material.dart';
+import 'package:venera/foundation/local.dart';
+import 'package:venera/network/images.dart';
+import '../history.dart';
+import 'base_image_provider.dart';
+import 'history_image_provider.dart' as image_provider;
+
+class HistoryImageProvider
+    extends BaseImageProvider<image_provider.HistoryImageProvider> {
+  /// Image provider for normal image.
+  ///
+  /// [url] is the url of the image. Local file path is also supported.
+  const HistoryImageProvider(this.history);
+
+  final History history;
+
+  @override
+  Future<Uint8List> load(chunkEvents, checkStop) async {
+    var url = history.cover;
+    if (!url.contains('/')) {
+      var localComic = LocalManager().find(history.id, history.type);
+      if (localComic != null) {
+        return localComic.coverFile.readAsBytes();
+      }
+      var comicSource =
+          history.type.comicSource ?? (throw "Comic source not found.");
+      var comic = await comicSource.loadComicInfo!(history.id);
+      checkStop();
+      url = comic.data.cover;
+      history.cover = url;
+      HistoryManager().addHistory(history);
+    }
+    await for (var progress in ImageDownloader.loadThumbnail(
+      url,
+      history.type.sourceKey,
+      history.id,
+    )) {
+      checkStop();
+      chunkEvents.add(ImageChunkEvent(
+        cumulativeBytesLoaded: progress.currentBytes,
+        expectedTotalBytes: progress.totalBytes,
+      ));
+      if (progress.imageBytes != null) {
+        return progress.imageBytes!;
+      }
+    }
+    throw "Error: Empty response body.";
+  }
+
+  @override
+  Future<HistoryImageProvider> obtainKey(ImageConfiguration configuration) {
+    return SynchronousFuture(this);
+  }
+
+  @override
+  String get key => "history${history.id}${history.type.value}";
+}

lib/foundation/image_provider/image_favorites_provider.dart

@@ -0,0 +1,155 @@
+import 'dart:async' show Future, StreamController;
+import 'package:crypto/crypto.dart';
+import 'package:flutter/foundation.dart';
+import 'package:flutter/material.dart';
+import 'package:venera/foundation/app.dart';
+import 'package:venera/foundation/comic_source/comic_source.dart';
+import 'package:venera/foundation/comic_type.dart';
+import 'package:venera/foundation/local.dart';
+import 'package:venera/network/images.dart';
+import 'package:venera/utils/io.dart';
+import '../history.dart';
+import 'base_image_provider.dart';
+import 'image_favorites_provider.dart' as image_provider;
+
+class ImageFavoritesProvider
+    extends BaseImageProvider<image_provider.ImageFavoritesProvider> {
+  /// Image provider for imageFavorites
+  const ImageFavoritesProvider(this.imageFavorite);
+
+  final ImageFavorite imageFavorite;
+
+  int get page => imageFavorite.page;
+
+  String get sourceKey => imageFavorite.sourceKey;
+
+  String get cid => imageFavorite.id;
+
+  String get eid => imageFavorite.eid;
+
+  @override
+  Future<Uint8List> load(
+    StreamController<ImageChunkEvent>? chunkEvents,
+    void Function()? checkStop,
+  ) async {
+    var imageKey = imageFavorite.imageKey;
+    var localImage = await getImageFromLocal();
+    checkStop?.call();
+    if (localImage != null) {
+      return localImage;
+    }
+    var cacheImage = await readFromCache();
+    checkStop?.call();
+    if (cacheImage != null) {
+      return cacheImage;
+    }
+    var gotImageKey = false;
+    if (imageKey == "") {
+      imageKey = await getImageKey();
+      checkStop?.call();
+      gotImageKey = true;
+    }
+    Uint8List image;
+    try {
+      image = await getImageFromNetwork(imageKey, chunkEvents, checkStop);
+    } catch (e) {
+      if (gotImageKey) {
+        rethrow;
+      } else {
+        imageKey = await getImageKey();
+        image = await getImageFromNetwork(imageKey, chunkEvents, checkStop);
+      }
+    }
+    await writeToCache(image);
+    return image;
+  }
+
+  Future<void> writeToCache(Uint8List image) async {
+    var fileName = md5.convert(key.codeUnits).toString();
+    var file = File(FilePath.join(App.cachePath, 'image_favorites', fileName));
+    if (!file.existsSync()) {
+      file.createSync(recursive: true);
+    }
+    await file.writeAsBytes(image);
+  }
+
+  Future<Uint8List?> readFromCache() async {
+    var fileName = md5.convert(key.codeUnits).toString();
+    var file = File(FilePath.join(App.cachePath, 'image_favorites', fileName));
+    if (!file.existsSync()) {
+      return null;
+    }
+    return await file.readAsBytes();
+  }
+
+  /// Delete a image favorite cache
+  static Future<void> deleteFromCache(ImageFavorite imageFavorite) async {
+    var fileName = md5.convert(imageFavorite.imageKey.codeUnits).toString();
+    var file = File(FilePath.join(App.cachePath, 'image_favorites', fileName));
+    if (file.existsSync()) {
+      await file.delete();
+    }
+  }
+
+  Future<Uint8List?> getImageFromLocal() async {
+    var localComic =
+        LocalManager().find(sourceKey, ComicType.fromKey(sourceKey));
+    if (localComic == null) {
+      return null;
+    }
+    var epIndex = localComic.chapters?.ids.toList().indexOf(eid) ?? -1;
+    if (epIndex == -1 && localComic.hasChapters) {
+      return null;
+    }
+    var images = await LocalManager().getImages(
+      sourceKey,
+      ComicType.fromKey(sourceKey),
+      epIndex,
+    );
+    var data = await File(images[page]).readAsBytes();
+    return data;
+  }
+
+  Future<Uint8List> getImageFromNetwork(
+    String imageKey,
+    StreamController<ImageChunkEvent>? chunkEvents,
+    void Function()? checkStop,
+  ) async {
+    await for (var progress
+        in ImageDownloader.loadComicImage(imageKey, sourceKey, cid, eid)) {
+      checkStop?.call();
+      if (chunkEvents != null) {
+        chunkEvents.add(ImageChunkEvent(
+          cumulativeBytesLoaded: progress.currentBytes,
+          expectedTotalBytes: progress.totalBytes,
+        ));
+      }
+      if (progress.imageBytes != null) {
+        return progress.imageBytes!;
+      }
+    }
+    throw "Error: Empty response body.";
+  }
+
+  Future<String> getImageKey() async {
+    String sourceKey = imageFavorite.sourceKey;
+    String cid = imageFavorite.id;
+    String eid = imageFavorite.eid;
+    var page = imageFavorite.page;
+    var comicSource = ComicSource.find(sourceKey);
+    if (comicSource == null) {
+      throw "Error: Comic source not found.";
+    }
+    var res = await comicSource.loadComicPages!(cid, eid);
+    return res.data[page - 1];
+  }
+
+  @override
+  Future<ImageFavoritesProvider> obtainKey(ImageConfiguration configuration) {
+    return SynchronousFuture(this);
+  }
+
+  @override
+  String get key =>
+      "ImageFavorites ${imageFavorite.imageKey}@${imageFavorite.sourceKey}@${imageFavorite.id}@${imageFavorite.eid}";
+}

lib/foundation/image_provider/local_comic_image.dart

@@ -0,0 +1,67 @@
+import 'dart:async' show Future;
+import 'package:flutter/foundation.dart';
+import 'package:flutter/material.dart';
+import 'package:venera/foundation/local.dart';
+import 'package:venera/utils/io.dart';
+import 'base_image_provider.dart';
+import 'local_comic_image.dart' as image_provider;
+
+class LocalComicImageProvider
+    extends BaseImageProvider<image_provider.LocalComicImageProvider> {
+  /// Image provider for normal image.
+  ///
+  /// [url] is the url of the image. Local file path is also supported.
+  const LocalComicImageProvider(this.comic);
+
+  final LocalComic comic;
+
+  @override
+  Future<Uint8List> load(chunkEvents, checkStop) async {
+    File? file = comic.coverFile;
+    if(! await file.exists()) {
+      file = null;
+      var dir = Directory(comic.directory);
+      if (! await dir.exists()) {
+        throw "Error: Comic not found.";
+      }
+      Directory? firstDir;
+      await for (var entity in dir.list()) {
+        if(entity is File) {
+          if(["jpg", "jpeg", "png", "webp", "gif", "jpe", "jpeg"].contains(entity.extension)) {
+            file = entity;
+            break;
+          }
+        } else if(entity is Directory) {
+          firstDir ??= entity;
+        }
+      }
+      if(file == null && firstDir != null) {
+        await for (var entity in firstDir.list()) {
+          if(entity is File) {
+            if(["jpg", "jpeg", "png", "webp", "gif", "jpe", "jpeg"].contains(entity.extension)) {
+              file = entity;
+              break;
+            }
+          }
+        }
+      }
+    }
+    if(file == null) {
+      throw "Error: Cover not found.";
+    }
+    checkStop();
+    var data = await file.readAsBytes();
+    if(data.isEmpty) {
+      throw "Exception: Empty file(${file.path}).";
+    }
+    return data;
+  }
+
+  @override
+  Future<LocalComicImageProvider> obtainKey(ImageConfiguration configuration) {
+    return SynchronousFuture(this);
+  }
+
+  @override
+  String get key => "local${comic.id}${comic.comicType.value}";
+}

lib/foundation/image_provider/local_favorite_image.dart

@@ -1,4 +1,4 @@
-import 'dart:async' show Future, StreamController;
+import 'dart:async' show Future;
 import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
 import 'package:venera/foundation/app.dart';
@@ -22,13 +22,13 @@ class LocalFavoriteImageProvider
   static void delete(String id, int intKey) {
     var fileName = (id + intKey.toString()).hashCode.toString();
     var file = File(FilePath.join(App.dataPath, 'favorite_cover', fileName));
-    if(file.existsSync()) {
+    if (file.existsSync()) {
       file.delete();
     }
   }
 
   @override
-  Future<Uint8List> load(StreamController<ImageChunkEvent> chunkEvents) async {
+  Future<Uint8List> load(chunkEvents, checkStop) async {
     var sourceKey = ComicSource.fromIntKey(intKey)?.key;
     var fileName = key.hashCode.toString();
     var file = File(FilePath.join(App.dataPath, 'favorite_cover', fileName));
@@ -37,12 +37,14 @@ class LocalFavoriteImageProvider
     } else {
       await file.create(recursive: true);
     }
+    checkStop();
     await for (var progress in ImageDownloader.loadThumbnail(url, sourceKey)) {
+      checkStop();
       chunkEvents.add(ImageChunkEvent(
         cumulativeBytesLoaded: progress.currentBytes,
         expectedTotalBytes: progress.totalBytes,
       ));
-      if(progress.imageBytes != null) {
+      if (progress.imageBytes != null) {
         var data = progress.imageBytes!;
         await file.writeAsBytes(data);
         return data;
@@ -52,7 +54,8 @@ class LocalFavoriteImageProvider
   }
 
   @override
-  Future<LocalFavoriteImageProvider> obtainKey(ImageConfiguration configuration) {
+  Future<LocalFavoriteImageProvider> obtainKey(
+      ImageConfiguration configuration) {
     return SynchronousFuture(this);
   }
 

lib/foundation/image_provider/reader_image.dart

@@ -1,14 +1,18 @@
-import 'dart:async' show Future, StreamController;
+import 'dart:async' show Future;
 import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
+import 'package:flutter_qjs/flutter_qjs.dart';
+import 'package:venera/foundation/js_engine.dart';
 import 'package:venera/network/images.dart';
+import 'package:venera/utils/io.dart';
 import 'base_image_provider.dart';
 import 'reader_image.dart' as image_provider;
+import 'package:venera/foundation/appdata.dart';
 
 class ReaderImageProvider
     extends BaseImageProvider<image_provider.ReaderImageProvider> {
   /// Image provider for normal image.
-  const ReaderImageProvider(this.imageKey, this.sourceKey, this.cid, this.eid);
+  const ReaderImageProvider(this.imageKey, this.sourceKey, this.cid, this.eid, this.page);
 
   final String imageKey;
 
@@ -18,19 +22,95 @@ class ReaderImageProvider
 
   final String eid;
 
+  final int page;
+
   @override
-  Future<Uint8List> load(StreamController<ImageChunkEvent> chunkEvents) async {
-    await for (var event
+  Future<Uint8List> load(chunkEvents, checkStop) async {
+    Uint8List? imageBytes;
+    if (imageKey.startsWith('file://')) {
+      var file = File(imageKey);
+      if (await file.exists()) {
+        imageBytes = await file.readAsBytes();
+      } else {
+        throw "Error: File not found.";
+      }
+    } else {
+      await for (var event
         in ImageDownloader.loadComicImage(imageKey, sourceKey, cid, eid)) {
-      chunkEvents.add(ImageChunkEvent(
-        cumulativeBytesLoaded: event.currentBytes,
-        expectedTotalBytes: event.totalBytes,
-      ));
-      if (event.imageBytes != null) {
-        return event.imageBytes!;
+        checkStop();
+        chunkEvents.add(ImageChunkEvent(
+          cumulativeBytesLoaded: event.currentBytes,
+          expectedTotalBytes: event.totalBytes,
+        ));
+        if (event.imageBytes != null) {
+          imageBytes = event.imageBytes;
+          break;
+        }
       }
     }
-    throw "Error: Empty response body.";
+    if (imageBytes == null) {
+      throw "Error: Empty response body.";
+    }
+    if (appdata.settings['enableCustomImageProcessing']) {
+      var script = appdata.settings['customImageProcessing'].toString();
+      if (!script.contains('async function processImage')) {
+        return imageBytes;
+      }
+      var func = JsEngine().runCode('''
+        (() => {
+          $script
+          return processImage;
+        })()
+      ''');
+      if (func is JSInvokable) {
+        var autoFreeFunc = JSAutoFreeFunction(func);
+        var result = autoFreeFunc([imageBytes, cid, eid, page, sourceKey]);
+        if (result is Uint8List) {
+          imageBytes = result;
+        } else if (result is Future) {
+          var futureResult = await result;
+          if (futureResult is Uint8List) {
+            imageBytes = futureResult;
+          }
+        } else if (result is Map) {
+          var image = result['image'];
+          if (image is Uint8List) {
+            imageBytes = image;
+          } else if (image is Future) {
+            JSAutoFreeFunction? onCancel;
+            if (result['onCancel'] is JSInvokable) {
+              onCancel = JSAutoFreeFunction(result['onCancel']);
+            }
+            if (onCancel == null) {
+              var futureImage = await image;
+              if (futureImage is Uint8List) {
+                imageBytes = futureImage;
+              }
+            } else {
+              dynamic futureImage;
+              image.then((value) {
+                futureImage = value;
+                futureImage ??= Uint8List(0);
+              });
+              while (futureImage == null) {
+                try {
+                  checkStop();
+                }
+                catch(e) {
+                  onCancel([]);
+                  rethrow;
+                }
+                await Future.delayed(Duration(milliseconds: 50));
+              }
+              if (futureImage is Uint8List) {
+                imageBytes = futureImage;
+              }
+            }
+          }
+        }
+      }
+    }
+    return imageBytes!;
   }
 
   @override
@@ -40,4 +120,7 @@ class ReaderImageProvider
 
   @override
   String get key => "$imageKey@$sourceKey@$cid@$eid";
+
+  @override
+  bool get enableResize => true;
 }

lib/foundation/js_engine.dart

@@ -2,6 +2,8 @@ import 'dart:convert';
 import 'dart:io';
 import 'dart:math' as math;
 import 'package:crypto/crypto.dart';
+import 'package:dio/io.dart';
+import 'package:flutter/foundation.dart' show protected;
 import 'package:flutter/services.dart';
 import 'package:html/parser.dart' as html;
 import 'package:html/dom.dart' as dom;
@@ -19,9 +21,11 @@ import 'package:pointycastle/block/modes/cfb.dart';
 import 'package:pointycastle/block/modes/ecb.dart';
 import 'package:pointycastle/block/modes/ofb.dart';
 import 'package:uuid/uuid.dart';
+import 'package:venera/components/js_ui.dart';
 import 'package:venera/foundation/app.dart';
 import 'package:venera/network/app_dio.dart';
 import 'package:venera/network/cookie_jar.dart';
+import 'package:venera/utils/init.dart';
 
 import 'comic_source/comic_source.dart';
 import 'consts.dart';
@@ -38,7 +42,7 @@ class JavaScriptRuntimeException implements Exception {
   }
 }
 
-class JsEngine with _JSEngineApi {
+class JsEngine with _JSEngineApi, JsUiApi, Init {
   factory JsEngine() => _cache ?? (_cache = JsEngine._create());
 
   static JsEngine? _cache;
@@ -57,7 +61,14 @@ class JsEngine with _JSEngineApi {
     JsEngine().init();
   }
 
-  Future<void> init() async {
+  void resetDio() {
+    _dio = AppDio(BaseOptions(
+        responseType: ResponseType.plain, validateStatus: (status) => true));
+  }
+
+  @override
+  @protected
+  Future<void> doInit() async {
     if (!_closed) {
       return;
     }
@@ -87,85 +98,71 @@ class JsEngine with _JSEngineApi {
         String method = message["method"] as String;
         switch (method) {
           case "log":
-            {
-              String level = message["level"];
-              Log.addLog(
-                  switch (level) {
-                    "error" => LogLevel.error,
-                    "warning" => LogLevel.warning,
-                    "info" => LogLevel.info,
-                    _ => LogLevel.warning
-                  },
-                  message["title"],
-                  message["content"].toString());
-            }
+            String level = message["level"];
+            Log.addLog(
+                switch (level) {
+                  "error" => LogLevel.error,
+                  "warning" => LogLevel.warning,
+                  "info" => LogLevel.info,
+                  _ => LogLevel.warning
+                },
+                message["title"],
+                message["content"].toString());
           case 'load_data':
-            {
-              String key = message["key"];
-              String dataKey = message["data_key"];
-              return ComicSource.find(key)?.data[dataKey];
-            }
+            String key = message["key"];
+            String dataKey = message["data_key"];
+            return ComicSource.find(key)?.data[dataKey];
           case 'save_data':
-            {
-              String key = message["key"];
-              String dataKey = message["data_key"];
-              if (dataKey == 'setting') {
-                throw "setting is not allowed to be saved";
-              }
-              var data = message["data"];
-              var source = ComicSource.find(key)!;
-              source.data[dataKey] = data;
-              source.saveData();
+            String key = message["key"];
+            String dataKey = message["data_key"];
+            if (dataKey == 'setting') {
+              throw "setting is not allowed to be saved";
             }
+            var data = message["data"];
+            var source = ComicSource.find(key)!;
+            source.data[dataKey] = data;
+            source.saveData();
           case 'delete_data':
-            {
-              String key = message["key"];
-              String dataKey = message["data_key"];
-              var source = ComicSource.find(key);
-              source?.data.remove(dataKey);
-              source?.saveData();
-            }
+            String key = message["key"];
+            String dataKey = message["data_key"];
+            var source = ComicSource.find(key);
+            source?.data.remove(dataKey);
+            source?.saveData();
           case 'http':
-            {
-              return _http(Map.from(message));
-            }
+            return _http(Map.from(message));
           case 'html':
-            {
-              return handleHtmlCallback(Map.from(message));
-            }
+            return handleHtmlCallback(Map.from(message));
           case 'convert':
-            {
-              return _convert(Map.from(message));
-            }
+            return _convert(Map.from(message));
           case "random":
-            {
-              return _random(
-                message["min"] ?? 0,
-                message["max"] ?? 1,
-                message["type"],
-              );
-            }
+            return _random(
+              message["min"] ?? 0,
+              message["max"] ?? 1,
+              message["type"],
+            );
           case "cookie":
-            {
-              return handleCookieCallback(Map.from(message));
-            }
+            return handleCookieCallback(Map.from(message));
           case "uuid":
-            {
-              return const Uuid().v1();
-            }
+            return const Uuid().v1();
           case "load_setting":
-            {
-              String key = message["key"];
-              String settingKey = message["setting_key"];
-              var source = ComicSource.find(key)!;
-              return source.data["settings"]?[settingKey] ??
-                  source.settings?[settingKey]['default'] ??
-                  (throw "Setting not found: $settingKey");
-            }
+            String key = message["key"];
+            String settingKey = message["setting_key"];
+            var source = ComicSource.find(key)!;
+            return source.data["settings"]?[settingKey] ??
+                source.settings?[settingKey]!['default'] ??
+                (throw "Setting not found: $settingKey");
           case "isLogged":
-            {
-              return ComicSource.find(message["key"])!.isLogged;
-            }
+            return ComicSource.find(message["key"])!.isLogged;
+          // temporary solution for [setTimeout] function
+          // TODO: implement [setTimeout] in quickjs project
+          case "delay":
+            return Future.delayed(Duration(milliseconds: message["time"]));
+          case "UI":
+            return handleUIMessage(Map.from(message));
+          case "getLocale":
+            return "${App.locale.languageCode}_${App.locale.countryCode}";
+          case "getPlatform":
+            return Platform.operatingSystem;
         }
       }
       return null;
@@ -184,7 +181,24 @@ class JsEngine with _JSEngineApi {
       if (headers["user-agent"] == null && headers["User-Agent"] == null) {
         headers["User-Agent"] = webUA;
       }
-      response = await _dio!.request(req["url"],
+      var dio = _dio;
+      if (headers['http_client'] == "dart:io") {
+        dio = Dio(BaseOptions(
+          responseType: ResponseType.plain,
+          validateStatus: (status) => true,
+        ));
+        var proxy = await AppDio.getProxy();
+        dio.httpClientAdapter = IOHttpClientAdapter(
+          createHttpClient: () {
+            return HttpClient()
+              ..findProxy = (uri) => proxy == null ? "DIRECT" : "PROXY $proxy";
+          },
+        );
+        dio.interceptors
+            .add(CookieManagerSql(SingleInstanceCookieJar.instance!));
+        dio.interceptors.add(LogInterceptor());
+      }
+      response = await dio!.request(req["url"],
           data: req["data"],
           options: Options(
               method: req['http_method'],
@@ -665,3 +679,21 @@ class DocumentWrapper {
     return elements.length - 1;
   }
 }
+
+class JSAutoFreeFunction {
+  final JSInvokable func;
+
+  /// Automatically free the function when it's not used anymore
+  JSAutoFreeFunction(this.func) {
+    func.dup();
+    finalizer.attach(this, func);
+  }
+
+  dynamic call(List<dynamic> args) {
+    return func(args);
+  }
+
+  static final finalizer = Finalizer<JSInvokable>((func) {
+    func.destroy();
+  });
+}

lib/foundation/local.dart

@@ -9,7 +9,6 @@ import 'package:venera/foundation/favorites.dart';
 import 'package:venera/foundation/log.dart';
 import 'package:venera/network/download.dart';
 import 'package:venera/pages/reader/reader.dart';
-import 'package:venera/utils/ext.dart';
 import 'package:venera/utils/io.dart';
 
 import 'app.dart';
@@ -34,7 +33,9 @@ class LocalComic with HistoryMixin implements Comic {
   /// key: chapter id, value: chapter title
   ///
   /// chapter id is the name of the directory in `LocalManager.path/$directory`
-  final Map<String, String>? chapters;
+  final ComicChapters? chapters;
+
+  bool get hasChapters => chapters != null;
 
   /// relative path to the cover image
   @override
@@ -65,25 +66,27 @@ class LocalComic with HistoryMixin implements Comic {
         subtitle = row[2] as String,
         tags = List.from(jsonDecode(row[3] as String)),
         directory = row[4] as String,
-        chapters = MapOrNull.from(jsonDecode(row[5] as String)),
+        chapters = ComicChapters.fromJsonOrNull(jsonDecode(row[5] as String)),
         cover = row[6] as String,
         comicType = ComicType(row[7] as int),
         downloadedChapters = List.from(jsonDecode(row[8] as String)),
         createdAt = DateTime.fromMillisecondsSinceEpoch(row[9] as int);
 
   File get coverFile => File(FilePath.join(
-        LocalManager().path,
-        directory,
+        baseDir,
         cover,
       ));
 
+  String get baseDir => (directory.contains('/') || directory.contains('\\'))
+      ? directory
+      : FilePath.join(LocalManager().path, directory);
+
   @override
   String get description => "";
 
   @override
-  String get sourceKey => comicType == ComicType.local
-      ? "local"
-      : comicType.sourceKey;
+  String get sourceKey =>
+      comicType == ComicType.local ? "local" : comicType.sourceKey;
 
   @override
   Map<String, dynamic> toJson() {
@@ -95,14 +98,15 @@ class LocalComic with HistoryMixin implements Comic {
       "tags": tags,
       "description": description,
       "sourceKey": sourceKey,
+      "chapters": chapters?.toJson(),
     };
   }
 
   @override
   int? get maxPage => null;
 
-  void read() async {
-    var history = await HistoryManager().find(id, comicType);
+  void read() {
+    var history = HistoryManager().find(id, comicType);
     App.rootContext.to(
       () => Reader(
         type: comicType,
@@ -111,11 +115,15 @@ class LocalComic with HistoryMixin implements Comic {
         chapters: chapters,
         initialChapter: history?.ep,
         initialPage: history?.page,
-        history: history ?? History.fromModel(
-          model: this,
-          ep: 0,
-          page: 0,
-        ),
+        initialChapterGroup: history?.group,
+        history: history ??
+            History.fromModel(
+              model: this,
+              ep: 0,
+              page: 0,
+            ),
+        author: subtitle,
+        tags: tags,
       ),
     );
   }
@@ -150,6 +158,17 @@ class LocalManager with ChangeNotifier {
   /// path to the directory where all the comics are stored
   late String path;
 
+  Directory get directory => Directory(path);
+
+  void _checkNoMedia() {
+    if (App.isAndroid) {
+      var file = File(FilePath.join(path, '.nomedia'));
+      if (!file.existsSync()) {
+        file.createSync();
+      }
+    }
+  }
+
   // return error message if failed
   Future<String?> setNewPath(String newPath) async {
     var newDir = Directory(newPath);
@@ -161,19 +180,55 @@ class LocalManager with ChangeNotifier {
     }
     try {
       await copyDirectoryIsolate(
-        Directory(path),
+        directory,
         newDir,
       );
-      await File(FilePath.join(App.dataPath, 'local_path')).writeAsString(newPath);
+      await File(FilePath.join(App.dataPath, 'local_path'))
+          .writeAsString(newPath);
     } catch (e, s) {
       Log.error("IO", e, s);
       return e.toString();
     }
-    await Directory(path).deleteIgnoreError(recursive:true);
+    await directory.deleteContents(recursive: true);
     path = newPath;
+    _checkNoMedia();
     return null;
   }
 
+  Future<String> findDefaultPath() async {
+    if (App.isAndroid) {
+      var external = await getExternalStorageDirectories();
+      if (external != null && external.isNotEmpty) {
+        return FilePath.join(external.first.path, 'local');
+      } else {
+        return FilePath.join(App.dataPath, 'local');
+      }
+    } else if (App.isIOS) {
+      var oldPath = FilePath.join(App.dataPath, 'local');
+      if (Directory(oldPath).existsSync() &&
+          Directory(oldPath).listSync().isNotEmpty) {
+        return oldPath;
+      } else {
+        var directory = await getApplicationDocumentsDirectory();
+        return FilePath.join(directory.path, 'local');
+      }
+    } else {
+      return FilePath.join(App.dataPath, 'local');
+    }
+  }
+
+  Future<void> _checkPathValidation() async {
+    var testFile = File(FilePath.join(path, 'venera_test'));
+    try {
+      testFile.createSync();
+      testFile.deleteSync();
+    } catch (e) {
+      Log.error("IO",
+          "Failed to create test file in local path: $e\nUsing default path instead.");
+      path = await findDefaultPath();
+    }
+  }
+
   Future<void> init() async {
     _db = sqlite3.open(
       '${App.dataPath}/local.db',
@@ -195,21 +250,22 @@ class LocalManager with ChangeNotifier {
     ''');
     if (File(FilePath.join(App.dataPath, 'local_path')).existsSync()) {
       path = File(FilePath.join(App.dataPath, 'local_path')).readAsStringSync();
-    } else {
-      if (App.isAndroid) {
-        var external = await getExternalStorageDirectories();
-        if (external != null && external.isNotEmpty) {
-          path = FilePath.join(external.first.path, 'local');
-        } else {
-          path = FilePath.join(App.dataPath, 'local');
-        }
-      } else {
-        path = FilePath.join(App.dataPath, 'local');
+      if (!directory.existsSync()) {
+        path = await findDefaultPath();
       }
+    } else {
+      path = await findDefaultPath();
     }
-    if (!Directory(path).existsSync()) {
-      await Directory(path).create();
+    try {
+      if (!directory.existsSync()) {
+        await directory.create();
+      }
+    } catch (e, s) {
+      Log.error("IO", "Failed to create local folder: $e", s);
     }
+    _checkPathValidation();
+    _checkNoMedia();
+    await ComicSourceManager().ensureInit();
     restoreDownloadingTasks();
   }
 
@@ -219,7 +275,8 @@ class LocalManager with ChangeNotifier {
       SELECT id FROM comics WHERE comic_type = ?
       ORDER BY CAST(id AS INTEGER) DESC
       LIMIT 1;
-      ''', [type.value],
+      ''',
+      [type.value],
     );
     if (res.isEmpty) {
       return '1';
@@ -329,26 +386,26 @@ class LocalManager with ChangeNotifier {
   }
 
   Future<List<String>> getImages(String id, ComicType type, Object ep) async {
-    if(ep is! String && ep is! int) {
+    if (ep is! String && ep is! int) {
       throw "Invalid ep";
     }
     var comic = find(id, type) ?? (throw "Comic Not Found");
-    var directory = Directory(FilePath.join(path, comic.directory));
-    if (comic.chapters != null) {
-      var cid = ep is int
-          ? comic.chapters!.keys.elementAt(ep - 1)
-          : (ep as String);
+    var directory = Directory(comic.baseDir);
+    if (comic.hasChapters) {
+      var cid =
+          ep is int ? comic.chapters!.ids.elementAt(ep - 1) : (ep as String);
       directory = Directory(FilePath.join(directory.path, cid));
     }
     var files = <File>[];
     await for (var entity in directory.list()) {
       if (entity is File) {
-        if (entity.absolute.path.replaceFirst(path, '').substring(1) ==
-            comic.cover) {
+        // Do not exclude comic.cover, since it may be the first page of the chapter.
+        // A file with name starting with 'cover.' is not a comic page.
+        if (entity.name.startsWith('cover.')) {
           continue;
         }
         //Hidden file in some file system
-        if(entity.name.startsWith('.')) {
+        if (entity.name.startsWith('.')) {
           continue;
         }
         files.add(entity);
@@ -365,12 +422,12 @@ class LocalManager with ChangeNotifier {
     return files.map((e) => "file://${e.path}").toList();
   }
 
-  Future<bool> isDownloaded(String id, ComicType type, [int? ep]) async {
+  bool isDownloaded(String id, ComicType type, [int? ep]) {
     var comic = find(id, type);
     if (comic == null) return false;
     if (comic.chapters == null || ep == null) return true;
     return comic.downloadedChapters
-        .contains(comic.chapters!.keys.elementAt(ep-1));
+        .contains(comic.chapters!.ids.elementAt(ep - 1));
   }
 
   List<DownloadTask> downloadingTasks = [];
@@ -427,12 +484,17 @@ class LocalManager with ChangeNotifier {
   void restoreDownloadingTasks() {
     var file = File(FilePath.join(App.dataPath, 'downloading_tasks.json'));
     if (file.existsSync()) {
-      var tasks = jsonDecode(file.readAsStringSync());
-      for (var e in tasks) {
-        var task = DownloadTask.fromJson(e);
-        if (task != null) {
-          downloadingTasks.add(task);
+      try {
+        var tasks = jsonDecode(file.readAsStringSync());
+        for (var e in tasks) {
+          var task = DownloadTask.fromJson(e);
+          if (task != null) {
+            downloadingTasks.add(task);
+          }
         }
+      } catch (e) {
+        file.delete();
+        Log.error("LocalManager", "Failed to restore downloading tasks: $e");
       }
     }
   }
@@ -445,18 +507,19 @@ class LocalManager with ChangeNotifier {
   }
 
   void deleteComic(LocalComic c, [bool removeFileOnDisk = true]) {
-    if(removeFileOnDisk) {
+    if (removeFileOnDisk) {
       var dir = Directory(FilePath.join(path, c.directory));
       dir.deleteIgnoreError(recursive: true);
     }
-    //Deleting a local comic means that it's nolonger available, thus both favorite and history should be deleted.
-    if(HistoryManager().findSync(c.id, c.comicType) != null) {
-      HistoryManager().remove(c.id, c.comicType);
-    }
-    assert(c.comicType == ComicType.local);
-    var folders = LocalFavoritesManager().find(c.id, c.comicType);
-    for (var f in folders) {
-      LocalFavoritesManager().deleteComicWithId(f, c.id, c.comicType);
+    // Deleting a local comic means that it's no longer available, thus both favorite and history should be deleted.
+    if (c.comicType == ComicType.local) {
+      if (HistoryManager().find(c.id, c.comicType) != null) {
+        HistoryManager().remove(c.id, c.comicType);
+      }
+      var folders = LocalFavoritesManager().find(c.id, c.comicType);
+      for (var f in folders) {
+        LocalFavoritesManager().deleteComicWithId(f, c.id, c.comicType);
+      }
     }
     remove(c.id, c.comicType);
     notifyListeners();

lib/foundation/log.dart

@@ -32,11 +32,11 @@ class Log {
   static const String? logFile = null;
 
   static void printWarning(String text) {
-    print('\x1B[33m$text\x1B[0m');
+    debugPrint('\x1B[33m$text\x1B[0m');
   }
 
   static void printError(String text) {
-    print('\x1B[31m$text\x1B[0m');
+    debugPrint('\x1B[31m$text\x1B[0m');
   }
 
   static void addLog(LogLevel level, String title, String content) {
@@ -44,15 +44,15 @@ class Log {
       content = "${content.substring(0, maxLogLength)}...";
     }
 
-    if (kDebugMode) {
-      switch (level) {
-        case LogLevel.error:
-          printError(content);
-        case LogLevel.warning:
-          printWarning(content);
-        case LogLevel.info:
-          print(content);
-      }
+    switch (level) {
+      case LogLevel.error:
+        printError(content);
+      case LogLevel.warning:
+        printWarning(content);
+      case LogLevel.info:
+        if(kDebugMode) {
+          debugPrint(content);
+        }
     }
 
     var newLog = LogItem(level, title, content);

lib/foundation/state_controller.dart

@@ -1,231 +0,0 @@
-import 'package:flutter/material.dart';
-
-class SimpleController extends StateController {
-  final void Function()? refresh_;
-
-  SimpleController({this.refresh_});
-
-  @override
-  void refresh() {
-    (refresh_ ?? super.refresh)();
-  }
-}
-
-abstract class StateController {
-  static final _controllers = <StateControllerWrapped>[];
-
-  static T put<T extends StateController>(T controller,
-      {Object? tag, bool autoRemove = false}) {
-    _controllers.add(StateControllerWrapped(controller, autoRemove, tag));
-    return controller;
-  }
-
-  static T putIfNotExists<T extends StateController>(T controller,
-      {Object? tag, bool autoRemove = false}) {
-    return findOrNull<T>(tag: tag) ??
-        put(controller, tag: tag, autoRemove: autoRemove);
-  }
-
-  static T find<T extends StateController>({Object? tag}) {
-    try {
-      return _controllers
-          .lastWhere((element) =>
-              element.controller is T && (tag == null || tag == element.tag))
-          .controller as T;
-    } catch (e) {
-      throw StateError("$T with tag $tag Not Found");
-    }
-  }
-
-  static List<T> findAll<T extends StateController>({Object? tag}) {
-    return _controllers
-        .where((element) =>
-            element.controller is T && (tag == null || tag == element.tag))
-        .map((e) => e.controller as T)
-        .toList();
-  }
-
-  static T? findOrNull<T extends StateController>({Object? tag}) {
-    try {
-      return _controllers
-          .lastWhere((element) =>
-              element.controller is T && (tag == null || tag == element.tag))
-          .controller as T;
-    } catch (e) {
-      return null;
-    }
-  }
-
-  static void remove<T>([Object? tag, bool check = false]) {
-    for (int i = _controllers.length - 1; i >= 0; i--) {
-      var element = _controllers[i];
-      if (element.controller is T && (tag == null || tag == element.tag)) {
-        if (check && !element.autoRemove) {
-          continue;
-        }
-        _controllers.removeAt(i);
-        return;
-      }
-    }
-  }
-
-  static SimpleController putSimpleController(
-      void Function() onUpdate, Object? tag,
-      {void Function()? refresh}) {
-    var controller = SimpleController(refresh_: refresh);
-    controller.stateUpdaters.add(Pair(null, onUpdate));
-    _controllers.add(StateControllerWrapped(controller, false, tag));
-    return controller;
-  }
-
-  List<Pair<Object?, void Function()>> stateUpdaters = [];
-
-  void update([List<Object>? ids]) {
-    if (ids == null) {
-      for (var element in stateUpdaters) {
-        element.right();
-      }
-    } else {
-      for (var element in stateUpdaters) {
-        if (ids.contains(element.left)) {
-          element.right();
-        }
-      }
-    }
-  }
-
-  void dispose() {
-    _controllers.removeWhere((element) => element.controller == this);
-  }
-
-  void refresh() {
-    update();
-  }
-}
-
-class StateControllerWrapped {
-  StateController controller;
-  bool autoRemove;
-  Object? tag;
-
-  StateControllerWrapped(this.controller, this.autoRemove, this.tag);
-}
-
-class StateBuilder<T extends StateController> extends StatefulWidget {
-  const StateBuilder({
-    super.key,
-    this.init,
-    this.dispose,
-    this.initState,
-    this.tag,
-    required this.builder,
-    this.id,
-  });
-
-  final T? init;
-
-  final void Function(T controller)? dispose;
-
-  final void Function(T controller)? initState;
-
-  final Object? tag;
-
-  final Widget Function(T controller) builder;
-
-  Widget builderWrapped(StateController controller) {
-    return builder(controller as T);
-  }
-
-  void initStateWrapped(StateController controller) {
-    return initState?.call(controller as T);
-  }
-
-  void disposeWrapped(StateController controller) {
-    return dispose?.call(controller as T);
-  }
-
-  final Object? id;
-
-  @override
-  State<StateBuilder> createState() => _StateBuilderState<T>();
-}
-
-class _StateBuilderState<T extends StateController>
-    extends State<StateBuilder> {
-  late T controller;
-
-  @override
-  void initState() {
-    if (widget.init != null) {
-      StateController.put(widget.init!, tag: widget.tag, autoRemove: true);
-    }
-    try {
-      controller = StateController.find<T>(tag: widget.tag);
-    } catch (e) {
-      throw "Controller Not Found";
-    }
-    controller.stateUpdaters.add(Pair(widget.id, () {
-      if (mounted) {
-        setState(() {});
-      }
-    }));
-    widget.initStateWrapped(controller);
-    super.initState();
-  }
-
-  @override
-  void dispose() {
-    widget.disposeWrapped(controller);
-    StateController.remove<T>(widget.tag, true);
-    super.dispose();
-  }
-
-  @override
-  Widget build(BuildContext context) => widget.builderWrapped(controller);
-}
-
-abstract class StateWithController<T extends StatefulWidget> extends State<T> {
-  late final SimpleController _controller;
-
-  void refresh() {
-    _controller.update();
-  }
-
-  @override
-  @mustCallSuper
-  void initState() {
-    _controller = StateController.putSimpleController(
-      () {
-        if (mounted) {
-          setState(() {});
-        }
-      },
-      tag,
-      refresh: refresh,
-    );
-    super.initState();
-  }
-
-  @override
-  @mustCallSuper
-  void dispose() {
-    _controller.dispose();
-    super.dispose();
-  }
-
-  void update() {
-    _controller.update();
-  }
-
-  Object? get tag;
-}
-
-class Pair<M, V>{
-  M left;
-  V right;
-
-  Pair(this.left, this.right);
-
-  Pair.fromMap(Map<M, V> map, M key): left = key, right = map[key]
-      ?? (throw Exception("Pair not found"));
-}

lib/foundation/widget_utils.dart

@@ -112,3 +112,9 @@ extension StyledText on TextStyle {
 
   TextStyle withColor(Color? color) => copyWith(color: color);
 }
+
+extension ColorExt on Color {
+  Color toOpacity(double opacity) {
+    return withValues(alpha: opacity);
+  }
+}

lib/init.dart

@@ -1,26 +1,93 @@
+import 'package:flutter/foundation.dart';
+import 'package:flutter_saf/flutter_saf.dart';
+import 'package:rhttp/rhttp.dart';
 import 'package:venera/foundation/app.dart';
 import 'package:venera/foundation/cache_manager.dart';
 import 'package:venera/foundation/comic_source/comic_source.dart';
-import 'package:venera/foundation/favorites.dart';
-import 'package:venera/foundation/history.dart';
 import 'package:venera/foundation/js_engine.dart';
-import 'package:venera/foundation/local.dart';
+import 'package:venera/foundation/log.dart';
 import 'package:venera/network/cookie_jar.dart';
+import 'package:venera/pages/comic_source_page.dart';
+import 'package:venera/pages/follow_updates_page.dart';
+import 'package:venera/pages/settings/settings_page.dart';
+import 'package:venera/utils/app_links.dart';
 import 'package:venera/utils/tags_translation.dart';
 import 'package:venera/utils/translations.dart';
-
 import 'foundation/appdata.dart';
 
-Future<void> init() async {
-  await AppTranslation.init();
-  await appdata.init();
-  await App.init();
-  await HistoryManager().init();
-  await LocalFavoritesManager().init();
-  SingleInstanceCookieJar("${App.dataPath}/cookie.db");
-  await JsEngine().init();
-  await ComicSource.init();
-  await LocalManager().init();
-  await TagsTranslation.readData();
-  CacheManager().setLimitSize(appdata.settings['cacheSize']);
+extension _FutureInit<T> on Future<T> {
+  /// Prevent unhandled exception
+  ///
+  /// A unhandled exception occurred in init() will cause the app to crash.
+  Future<void> wait() async {
+    try {
+      await this;
+    } catch (e, s) {
+      Log.error("init", "$e\n$s");
+    }
+  }
+}
+
+Future<void> init() async {
+  await App.init().wait();
+  await SingleInstanceCookieJar.createInstance();
+  var futures = [
+    Rhttp.init(),
+    App.initComponents(),
+    SAFTaskWorker().init().wait(),
+    AppTranslation.init().wait(),
+    TagsTranslation.readData().wait(),
+    JsEngine().init().wait(),
+    ComicSourceManager().init().wait(),
+  ];
+  await Future.wait(futures);
+  CacheManager().setLimitSize(appdata.settings['cacheSize']);
+  _checkOldConfigs();
+  if (App.isAndroid) {
+    handleLinks();
+  }
+  FlutterError.onError = (details) {
+    Log.error("Unhandled Exception", "${details.exception}\n${details.stack}");
+  };
+}
+
+void _checkOldConfigs() {
+  if (appdata.settings['searchSources'] == null) {
+    appdata.settings['searchSources'] = ComicSource.all()
+        .where((e) => e.searchPageData != null)
+        .map((e) => e.key)
+        .toList();
+  }
+
+  if (appdata.implicitData['webdavAutoSync'] == null) {
+    var webdavConfig = appdata.settings['webdav'];
+    if (webdavConfig is List &&
+        webdavConfig.length == 3 &&
+        webdavConfig.whereType<String>().length == 3) {
+      appdata.implicitData['webdavAutoSync'] = true;
+    } else {
+      appdata.implicitData['webdavAutoSync'] = false;
+    }
+    appdata.writeImplicitData();
+  }
+}
+
+Future<void> _checkAppUpdates() async {
+  var lastCheck = appdata.implicitData['lastCheckUpdate'] ?? 0;
+  var now = DateTime.now().millisecondsSinceEpoch;
+  if (now - lastCheck < 24 * 60 * 60 * 1000) {
+    return;
+  }
+  appdata.implicitData['lastCheckUpdate'] = now;
+  appdata.writeImplicitData();
+  ComicSourcePage.checkComicSourceUpdate();
+  if (appdata.settings['checkUpdateOnStart']) {
+    await Future.delayed(const Duration(milliseconds: 300));
+    await checkUpdateUi(false);
+  }
+}
+
+void checkUpdates() {
+  _checkAppUpdates();
+  FollowUpdatesService.initChecker();
 }

lib/main.dart

@@ -1,15 +1,14 @@
 import 'dart:async';
 import 'package:desktop_webview_window/desktop_webview_window.dart';
+import 'package:dynamic_color/dynamic_color.dart';
+import 'package:flex_seed_scheme/flex_seed_scheme.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
 import 'package:flutter_localizations/flutter_localizations.dart';
-import 'package:rhttp/rhttp.dart';
 import 'package:venera/foundation/log.dart';
 import 'package:venera/pages/auth_page.dart';
-import 'package:venera/pages/comic_source_page.dart';
 import 'package:venera/pages/main_page.dart';
-import 'package:venera/pages/settings/settings_page.dart';
-import 'package:venera/utils/app_links.dart';
+import 'package:venera/utils/io.dart';
 import 'package:window_manager/window_manager.dart';
 import 'components/components.dart';
 import 'components/window_frame.dart';
@@ -18,43 +17,35 @@ import 'foundation/appdata.dart';
 import 'init.dart';
 
 void main(List<String> args) {
-  if (runWebViewTitleBarWidget(args)) {
-    return;
-  }
-  runZonedGuarded(() async {
-    await Rhttp.init();
-    WidgetsFlutterBinding.ensureInitialized();
-    await init();
-    if (App.isAndroid) {
-      handleLinks();
-    }
-    FlutterError.onError = (details) {
-      Log.error(
-          "Unhandled Exception", "${details.exception}\n${details.stack}");
-    };
-    runApp(const MyApp());
-    if (App.isDesktop) {
-      await windowManager.ensureInitialized();
-      windowManager.waitUntilReadyToShow().then((_) async {
-        await windowManager.setTitleBarStyle(
-          TitleBarStyle.hidden,
-          windowButtonVisibility: App.isMacOS,
-        );
-        if (App.isLinux) {
-          await windowManager.setBackgroundColor(Colors.transparent);
-        }
-        await windowManager.setMinimumSize(const Size(500, 600));
-        if (!App.isLinux) {
-          // https://github.com/leanflutter/window_manager/issues/460
-          var placement = await WindowPlacement.loadFromFile();
-          await placement.applyToWindow();
-          await windowManager.show();
-          WindowPlacement.loop();
-        }
-      });
-    }
-  }, (error, stack) {
-    Log.error("Unhandled Exception", "$error\n$stack");
+  if (runWebViewTitleBarWidget(args)) return;
+  overrideIO(() {
+    runZonedGuarded(() async {
+      WidgetsFlutterBinding.ensureInitialized();
+      await init();
+      runApp(const MyApp());
+      if (App.isDesktop) {
+        await windowManager.ensureInitialized();
+        windowManager.waitUntilReadyToShow().then((_) async {
+          await windowManager.setTitleBarStyle(
+            TitleBarStyle.hidden,
+            windowButtonVisibility: App.isMacOS,
+          );
+          if (App.isLinux) {
+            await windowManager.setBackgroundColor(Colors.transparent);
+          }
+          await windowManager.setMinimumSize(const Size(500, 600));
+          if (!App.isLinux) {
+            // https://github.com/leanflutter/window_manager/issues/460
+            var placement = await WindowPlacement.loadFromFile();
+            await placement.applyToWindow();
+            await windowManager.show();
+            WindowPlacement.loop();
+          }
+        });
+      }
+    }, (error, stack) {
+      Log.error("Unhandled Exception", error, stack);
+    });
   });
 }
 
@@ -68,10 +59,10 @@ class MyApp extends StatefulWidget {
 class _MyAppState extends State<MyApp> with WidgetsBindingObserver {
   @override
   void initState() {
-    checkUpdates();
     App.registerForceRebuild(forceRebuild);
     SystemChrome.setEnabledSystemUIMode(SystemUiMode.edgeToEdge);
     WidgetsBinding.instance.addObserver(this);
+    checkUpdates();
     super.initState();
   }
 
@@ -81,7 +72,7 @@ class _MyAppState extends State<MyApp> with WidgetsBindingObserver {
 
   @override
   void didChangeAppLifecycleState(AppLifecycleState state) {
-    if(!App.isMobile) {
+    if (!App.isMobile || !appdata.settings['authorizationRequired']) {
       return;
     }
     if (state == AppLifecycleState.inactive && hideContentOverlay == null) {
@@ -103,8 +94,8 @@ class _MyAppState extends State<MyApp> with WidgetsBindingObserver {
       hideContentOverlay = null;
     }
     if (state == AppLifecycleState.hidden &&
-        appdata.settings['authorizationRequired'] &&
-        !isAuthPageActive) {
+        !isAuthPageActive &&
+        !IO.isSelectingFiles) {
       isAuthPageActive = true;
       App.rootContext.to(
         () => AuthPage(
@@ -128,6 +119,63 @@ class _MyAppState extends State<MyApp> with WidgetsBindingObserver {
     setState(() {});
   }
 
+  Color translateColorSetting() {
+    return switch (appdata.settings['color']) {
+      'red' => Colors.red,
+      'pink' => Colors.pink,
+      'purple' => Colors.purple,
+      'green' => Colors.green,
+      'orange' => Colors.orange,
+      'blue' => Colors.blue,
+      'yellow' => Colors.yellow,
+      'cyan' => Colors.cyan,
+      _ => Colors.blue,
+    };
+  }
+
+  ThemeData getTheme(
+    Color primary,
+    Color? secondary,
+    Color? tertiary,
+    Brightness brightness,
+  ) {
+    String? font;
+    List<String>? fallback;
+    if (App.isWindows) {
+      font = 'Segoe UI';
+      fallback = [
+        'Segoe UI',
+        'Microsoft YaHei',
+        'PingFang SC',
+        'Noto Sans CJK',
+        'Arial',
+        'sans-serif'
+      ];
+    }
+    if (App.isLinux) {
+      font = 'Noto Sans CJK';
+      fallback = [
+        'Segoe UI',
+        'Microsoft YaHei',
+        'PingFang SC',
+        'Noto Sans CJK',
+        'Arial',
+        'sans-serif'
+      ];
+    }
+    return ThemeData(
+      colorScheme: SeedColorScheme.fromSeeds(
+        primaryKey: primary,
+        secondaryKey: secondary,
+        tertiaryKey: tertiary,
+        brightness: brightness,
+        tones: FlexTones.vividBackground(brightness),
+      ),
+      fontFamily: font,
+      fontFamilyFallback: fallback,
+    );
+  }
+
   @override
   Widget build(BuildContext context) {
     Widget home;
@@ -140,106 +188,82 @@ class _MyAppState extends State<MyApp> with WidgetsBindingObserver {
     } else {
       home = const MainPage();
     }
-    return MaterialApp(
-      home: home,
-      debugShowCheckedModeBanner: false,
-      theme: ThemeData(
-        colorScheme: ColorScheme.fromSeed(
-          seedColor: App.mainColor,
-          surface: Colors.white,
-          primary: App.mainColor.shade600,
-          // ignore: deprecated_member_use
-          background: Colors.white,
-        ),
-        fontFamily: App.isWindows ? "Microsoft YaHei" : null,
-      ),
-      navigatorKey: App.rootNavigatorKey,
-      darkTheme: ThemeData(
-        colorScheme: ColorScheme.fromSeed(
-          seedColor: App.mainColor,
-          brightness: Brightness.dark,
-          surface: Colors.black,
-          primary: App.mainColor.shade400,
-          // ignore: deprecated_member_use
-          background: Colors.black,
-        ),
-        fontFamily: App.isWindows ? "Microsoft YaHei" : null,
-      ),
-      themeMode: switch (appdata.settings['theme_mode']) {
-        'light' => ThemeMode.light,
-        'dark' => ThemeMode.dark,
-        _ => ThemeMode.system
-      },
-      localizationsDelegates: const [
-        GlobalMaterialLocalizations.delegate,
-        GlobalWidgetsLocalizations.delegate,
-        GlobalCupertinoLocalizations.delegate,
-      ],
-      locale: () {
-        var lang = appdata.settings['language'];
-        if (lang == 'system') {
-          return null;
-        }
-        return switch (lang) {
-          'zh-CN' => const Locale('zh', 'CN'),
-          'zh-TW' => const Locale('zh', 'TW'),
-          'en-US' => const Locale('en'),
-          _ => null
-        };
-      }(),
-      supportedLocales: const [
-        Locale('en'),
-        Locale('zh', 'CN'),
-        Locale('zh', 'TW'),
-      ],
-      builder: (context, widget) {
-        ErrorWidget.builder = (details) {
-          Log.error(
-              "Unhandled Exception", "${details.exception}\n${details.stack}");
-          return Material(
-            child: Center(
-              child: Text(details.exception.toString()),
-            ),
-          );
-        };
-        if (widget != null) {
-          widget = OverlayWidget(widget);
-          if (App.isDesktop) {
-            widget = Shortcuts(
-              shortcuts: {
-                LogicalKeySet(LogicalKeyboardKey.escape): VoidCallbackIntent(
-                  App.pop,
-                ),
-              },
-              child: MouseBackDetector(
-                onTapDown: App.pop,
-                child: WindowFrame(widget),
+    return DynamicColorBuilder(builder: (light, dark) {
+      Color? primary, secondary, tertiary;
+      if (appdata.settings['color'] != 'system' ||
+          light == null ||
+          dark == null) {
+        primary = translateColorSetting();
+      } else {
+        primary = light.primary;
+        secondary = light.secondary;
+        tertiary = light.tertiary;
+      }
+      return MaterialApp(
+        home: home,
+        debugShowCheckedModeBanner: false,
+        theme: getTheme(primary, secondary, tertiary, Brightness.light),
+        navigatorKey: App.rootNavigatorKey,
+        darkTheme: getTheme(primary, secondary, tertiary, Brightness.dark),
+        themeMode: switch (appdata.settings['theme_mode']) {
+          'light' => ThemeMode.light,
+          'dark' => ThemeMode.dark,
+          _ => ThemeMode.system
+        },
+        localizationsDelegates: [
+          GlobalMaterialLocalizations.delegate,
+          GlobalCupertinoLocalizations.delegate,
+        ],
+        locale: () {
+          var lang = appdata.settings['language'];
+          if (lang == 'system') {
+            return null;
+          }
+          return switch (lang) {
+            'zh-CN' => const Locale('zh', 'CN'),
+            'zh-TW' => const Locale('zh', 'TW'),
+            'en-US' => const Locale('en'),
+            _ => null
+          };
+        }(),
+        supportedLocales: const [
+          Locale('zh', 'CN'),
+          Locale('zh', 'TW'),
+          Locale('en'),
+        ],
+        builder: (context, widget) {
+          ErrorWidget.builder = (details) {
+            Log.error("Unhandled Exception",
+                "${details.exception}\n${details.stack}");
+            return Material(
+              child: Center(
+                child: Text(details.exception.toString()),
               ),
             );
+          };
+          if (widget != null) {
+            widget = OverlayWidget(widget);
+            if (App.isDesktop) {
+              widget = Shortcuts(
+                shortcuts: {
+                  LogicalKeySet(LogicalKeyboardKey.escape): VoidCallbackIntent(
+                    App.pop,
+                  ),
+                },
+                child: MouseBackDetector(
+                  onTapDown: App.pop,
+                  child: WindowFrame(widget),
+                ),
+              );
+            }
+            return _SystemUiProvider(Material(
+              child: widget,
+            ));
           }
-          return _SystemUiProvider(Material(
-            child: widget,
-          ));
-        }
-        throw ('widget is null');
-      },
-    );
-  }
-
-  void checkUpdates() async {
-    if (!appdata.settings['checkUpdateOnStart']) {
-      return;
-    }
-    var lastCheck = appdata.implicitData['lastCheckUpdate'] ?? 0;
-    var now = DateTime.now().millisecondsSinceEpoch;
-    if (now - lastCheck < 24 * 60 * 60 * 1000) {
-      return;
-    }
-    appdata.implicitData['lastCheckUpdate'] = now;
-    appdata.writeImplicitData();
-    await Future.delayed(const Duration(milliseconds: 300));
-    await checkUpdateUi(false);
-    await ComicSourcePage.checkComicSourceUpdate(true);
+          throw ('widget is null');
+        },
+      );
+    });
   }
 }
 

lib/network/app_dio.dart

@@ -1,6 +1,5 @@
 import 'dart:async';
 import 'dart:convert';
-import 'dart:io';
 
 import 'package:dio/dio.dart';
 import 'package:flutter/services.dart';
@@ -97,6 +96,9 @@ class MyLogInterceptor implements Interceptor {
 
   @override
   void onRequest(RequestOptions options, RequestInterceptorHandler handler) {
+    Log.info("Network", "${options.method} ${options.uri}\n"
+        "headers:\n${options.headers}\n"
+        "data:\n${options.data}");
     options.connectTimeout = const Duration(seconds: 15);
     options.receiveTimeout = const Duration(seconds: 15);
     options.sendTimeout = const Duration(seconds: 15);
@@ -106,7 +108,6 @@ class MyLogInterceptor implements Interceptor {
 
 class AppDio with DioMixin {
   String? _proxy = proxy;
-  static bool get ignoreCertificateErrors => appdata.settings['ignoreCertificateErrors'] == true;
 
   AppDio([BaseOptions? options]) {
     this.options = options ?? BaseOptions();
@@ -114,9 +115,6 @@ class AppDio with DioMixin {
       proxySettings: proxy == null
           ? const rhttp.ProxySettings.noProxy()
           : rhttp.ProxySettings.proxy(proxy!),
-      tlsSettings: rhttp.TlsSettings(
-        verifyCertificates: !ignoreCertificateErrors,
-      ),
     ));
     interceptors.add(CookieManagerSql(SingleInstanceCookieJar.instance!));
     interceptors.add(NetworkCacheManager());
@@ -194,9 +192,6 @@ class AppDio with DioMixin {
         proxySettings: proxy == null
             ? const rhttp.ProxySettings.noProxy()
             : rhttp.ProxySettings.proxy(proxy!),
-        tlsSettings: rhttp.TlsSettings(
-          verifyCertificates: !ignoreCertificateErrors,
-        ),
       ));
     }
     try {
@@ -220,6 +215,22 @@ class AppDio with DioMixin {
 class RHttpAdapter implements HttpClientAdapter {
   rhttp.ClientSettings settings;
 
+  static Map<String, List<String>> _getOverrides() {
+    if (!appdata.settings['enableDnsOverrides'] == true) {
+      return {};
+    }
+    var config = appdata.settings["dnsOverrides"];
+    var result = <String, List<String>>{};
+    if (config is Map) {
+      for (var entry in config.entries) {
+        if (entry.key is String && entry.value is String) {
+          result[entry.key] = [entry.value];
+        }
+      }
+    }
+    return result;
+  }
+
   RHttpAdapter([this.settings = const rhttp.ClientSettings()]) {
     settings = settings.copyWith(
       redirectSettings: const rhttp.RedirectSettings.limited(5),
@@ -229,8 +240,9 @@ class RHttpAdapter implements HttpClientAdapter {
         keepAlivePing: Duration(seconds: 30),
       ),
       throwOnStatusCode: false,
+      dnsSettings: rhttp.DnsSettings.static(overrides: _getOverrides()),
       tlsSettings: rhttp.TlsSettings(
-        verifyCertificates: !AppDio.ignoreCertificateErrors,
+        sni: appdata.settings['sni'] != false,
       ),
     );
   }
@@ -245,18 +257,7 @@ class RHttpAdapter implements HttpClientAdapter {
     Future<void>? cancelFuture,
   ) async {
     var res = await rhttp.Rhttp.request(
-      method: switch (options.method) {
-        'GET' => rhttp.HttpMethod.get,
-        'POST' => rhttp.HttpMethod.post,
-        'PUT' => rhttp.HttpMethod.put,
-        'PATCH' => rhttp.HttpMethod.patch,
-        'DELETE' => rhttp.HttpMethod.delete,
-        'HEAD' => rhttp.HttpMethod.head,
-        'OPTIONS' => rhttp.HttpMethod.options,
-        'TRACE' => rhttp.HttpMethod.trace,
-        'CONNECT' => rhttp.HttpMethod.connect,
-        _ => throw ArgumentError('Unsupported method: ${options.method}'),
-      },
+      method: rhttp.HttpMethod(options.method),
       url: options.uri.toString(),
       settings: settings,
       expectBody: rhttp.HttpExpectBody.stream,
@@ -278,13 +279,8 @@ class RHttpAdapter implements HttpClientAdapter {
       headers[key] ??= [];
       headers[key]!.add(entry.$2);
     }
-    var data = res.body;
-    if (headers['content-encoding']?.contains('gzip') ?? false) {
-      // rhttp does not support gzip decoding
-      data = gzip.decoder.bind(data).map((data) => Uint8List.fromList(data));
-    }
     return ResponseBody(
-      data,
+      res.body,
       res.statusCode,
       statusMessage: null,
       isRedirect: false,

lib/network/cache.dart

@@ -1,5 +1,5 @@
 import 'dart:typed_data';
-import 'package:dio/dio.dart';
+import 'package:venera/network/app_dio.dart';
 
 class NetworkCache {
   final Uri uri;
@@ -42,6 +42,9 @@ class NetworkCacheManager implements Interceptor {
   static const _maxCacheSize = 10 * 1024 * 1024;
 
   void setCache(NetworkCache cache) {
+    if (_cache.containsKey(cache.uri)) {
+      size -= _cache[cache.uri]!.size;
+    }
     while (size > _maxCacheSize) {
       size -= _cache.values.first.size;
       _cache.remove(_cache.keys.first);
@@ -94,7 +97,7 @@ class NetworkCacheManager implements Interceptor {
     var time = DateTime.now();
     var diff = time.difference(cache.time);
     if (options.headers['cache-time'] == 'long' &&
-        diff < const Duration(hours: 2)) {
+        diff < const Duration(hours: 6)) {
       return handler.resolve(Response(
         requestOptions: options,
         data: cache.data,
@@ -110,11 +113,11 @@ class NetworkCacheManager implements Interceptor {
           ..set('venera-cache', 'true'),
         statusCode: 200,
       ));
-    } else if (diff < const Duration(hours: 1)) {
+    } else if (diff < const Duration(hours: 2)) {
       var o = options.copyWith(
         method: "HEAD",
       );
-      var dio = Dio();
+      var dio = AppDio();
       var response = await dio.fetch(o);
       if (response.statusCode == 200 &&
           compareHeaders(cache.responseHeaders, response.headers.map)) {
@@ -132,15 +135,44 @@ class NetworkCacheManager implements Interceptor {
   }
 
   static bool compareHeaders(Map<String, dynamic> a, Map<String, dynamic> b) {
-    a.remove('cache-time');
-    a.remove('prevent-parallel');
-    b.remove('cache-time');
-    b.remove('prevent-parallel');
+    a = Map.from(a);
+    b = Map.from(b);
+    const shouldIgnore = [
+      'cache-time',
+      'prevent-parallel',
+      'date',
+      'x-varnish',
+      'cf-ray',
+      'connection',
+      'vary',
+      'content-encoding',
+      'report-to',
+      'server-timing',
+      'token',
+      'set-cookie',
+      'cf-cache-status',
+      'cf-request-id',
+      'cf-ray',
+      'authorization',
+    ];
+    for (var key in shouldIgnore) {
+      a.remove(key);
+      b.remove(key);
+    }
     if (a.length != b.length) {
       return false;
     }
     for (var key in a.keys) {
-      if (a[key] != b[key]) {
+      if (a[key] is List && b[key] is List) {
+        if (a[key].length != b[key].length) {
+          return false;
+        }
+        for (var i = 0; i < a[key].length; i++) {
+          if (a[key][i] != b[key][i]) {
+            return false;
+          }
+        }
+      } else if (a[key] != b[key]) {
         return false;
       }
     }
@@ -161,7 +193,7 @@ class NetworkCacheManager implements Interceptor {
       var cache = NetworkCache(
         uri: response.requestOptions.uri,
         requestHeaders: response.requestOptions.headers,
-        responseHeaders: response.headers.map,
+        responseHeaders: Map.from(response.headers.map),
         data: response.data,
         time: DateTime.now(),
         size: size,

lib/network/cloudflare.dart

@@ -1,9 +1,11 @@
 import 'dart:io' as io;
 
 import 'package:dio/dio.dart';
+import 'package:flutter_inappwebview/flutter_inappwebview.dart';
 import 'package:venera/foundation/app.dart';
 import 'package:venera/foundation/appdata.dart';
 import 'package:venera/foundation/consts.dart';
+import 'package:venera/foundation/log.dart';
 import 'package:venera/pages/webview.dart';
 import 'package:venera/utils/ext.dart';
 
@@ -12,7 +14,7 @@ import 'cookie_jar.dart';
 class CloudflareException implements DioException {
   final String url;
 
-  const CloudflareException(this.url);
+  CloudflareException(this.url);
 
   @override
   String toString() {
@@ -53,12 +55,15 @@ class CloudflareException implements DioException {
 
   @override
   DioExceptionType get type => DioExceptionType.badResponse;
+
+  @override
+  DioExceptionReadableStringBuilder? stringBuilder;
 }
 
 class CloudflareInterceptor extends Interceptor {
   @override
   void onRequest(RequestOptions options, RequestInterceptorHandler handler) {
-    if(options.headers['cookie'].toString().contains('cf_clearance')) {
+    if (options.headers['cookie'].toString().contains('cf_clearance')) {
       options.headers['user-agent'] = appdata.implicitData['ua'] ?? webUA;
     }
     handler.next(options);
@@ -116,20 +121,29 @@ void passCloudflare(CloudflareException e, void Function() onFinished) async {
 
   // windows version of package `flutter_inappwebview` cannot get some cookies
   // Using DesktopWebview instead
-  if (App.isLinux || App.isWindows) {
+  if (App.isLinux) {
     var webview = DesktopWebview(
       initialUrl: url,
       onTitleChange: (title, controller) async {
-        var res = await controller.evaluateJavascript(
-            "document.head.innerHTML.includes('#challenge-success-text')");
-        if (res == 'false') {
+        var head =
+            await controller.evaluateJavascript("document.head.innerHTML") ??
+                "";
+        Log.info("Cloudflare", "Checking head: $head");
+        var isChallenging = head.contains('#challenge-success-text') ||
+            head.contains("#challenge-error-text") ||
+            head.contains("#challenge-form");
+        if (!isChallenging) {
+          Log.info(
+            "Cloudflare",
+            "Cloudflare is passed due to there is no challenge css",
+          );
           var ua = controller.userAgent;
           if (ua != null) {
             appdata.implicitData['ua'] = ua;
             appdata.writeImplicitData();
           }
           var cookiesMap = await controller.getCookies(url);
-          if(cookiesMap['cf_clearance'] == null) {
+          if (cookiesMap['cf_clearance'] == null) {
             return;
           }
           saveCookies(cookiesMap);
@@ -137,30 +151,51 @@ void passCloudflare(CloudflareException e, void Function() onFinished) async {
           onFinished();
         }
       },
+      onClose: onFinished,
     );
     webview.open();
   } else {
+    bool success = false;
+    void check(InAppWebViewController controller) async {
+      var head = await controller.evaluateJavascript(
+          source: "document.head.innerHTML") as String;
+      Log.info("Cloudflare", "Checking head: $head");
+      var isChallenging = head.contains('#challenge-success-text') ||
+          head.contains("#challenge-error-text") ||
+          head.contains("#challenge-form");
+      if (!isChallenging) {
+        Log.info(
+          "Cloudflare",
+          "Cloudflare is passed due to there is no challenge css",
+        );
+        var ua = await controller.getUA();
+        if (ua != null) {
+          appdata.implicitData['ua'] = ua;
+          appdata.writeImplicitData();
+        }
+        var cookies = await controller.getCookies(url) ?? [];
+        if (cookies.firstWhereOrNull(
+                (element) => element.name == 'cf_clearance') ==
+            null) {
+          return;
+        }
+        SingleInstanceCookieJar.instance?.saveFromResponse(uri, cookies);
+        if (!success) {
+          App.rootPop();
+          success = true;
+        }
+      }
+    }
+
     await App.rootContext.to(
       () => AppWebview(
         initialUrl: url,
         singlePage: true,
+        onTitleChange: (title, controller) async {
+          check(controller);
+        },
         onLoadStop: (controller) async {
-          var res = await controller.platform.evaluateJavascript(
-              source:
-                  "document.head.innerHTML.includes('#challenge-success-text')");
-          if (res == false) {
-            var ua = await controller.getUA();
-            if (ua != null) {
-              appdata.implicitData['ua'] = ua;
-              appdata.writeImplicitData();
-            }
-            var cookies = await controller.getCookies(url) ?? [];
-            if(cookies.firstWhereOrNull((element) => element.name == 'cf_clearance') == null) {
-              return;
-            }
-            SingleInstanceCookieJar.instance?.saveFromResponse(uri, cookies);
-            App.rootPop();
-          }
+          check(controller);
         },
         onStarted: (controller) async {
           var ua = await controller.getUA();

lib/network/cookie_jar.dart

@@ -1,6 +1,7 @@
 import 'dart:io';
 
 import 'package:dio/dio.dart';
+import 'package:path_provider/path_provider.dart';
 import 'package:sqlite3/sqlite3.dart';
 import 'package:venera/foundation/log.dart';
 import 'package:venera/utils/ext.dart';
@@ -200,6 +201,11 @@ class SingleInstanceCookieJar extends CookieJarSql {
   SingleInstanceCookieJar._create(super.path);
 
   static SingleInstanceCookieJar? instance;
+
+  static Future<void> createInstance() async {
+    var dataPath = (await getApplicationSupportDirectory()).path;
+    instance = SingleInstanceCookieJar("$dataPath/cookie.db");
+  }
 }
 
 class CookieManagerSql extends Interceptor {

lib/network/download.dart

@@ -1,6 +1,9 @@
 import 'dart:async';
+import 'dart:isolate';
 
 import 'package:flutter/widgets.dart' show ChangeNotifier;
+import 'package:flutter_saf/flutter_saf.dart';
+import 'package:venera/foundation/app.dart';
 import 'package:venera/foundation/appdata.dart';
 import 'package:venera/foundation/comic_source/comic_source.dart';
 import 'package:venera/foundation/comic_type.dart';
@@ -11,13 +14,14 @@ import 'package:venera/network/images.dart';
 import 'package:venera/utils/ext.dart';
 import 'package:venera/utils/file_type.dart';
 import 'package:venera/utils/io.dart';
+import 'package:zip_flutter/zip_flutter.dart';
+
+import 'file_downloader.dart';
 
 abstract class DownloadTask with ChangeNotifier {
   /// 0-1
   double get progress;
 
-  bool get isComplete;
-
   bool get isError;
 
   bool get isPaused;
@@ -57,6 +61,16 @@ abstract class DownloadTask with ChangeNotifier {
         return null;
     }
   }
+
+  @override
+  bool operator ==(Object other) {
+    return other is DownloadTask &&
+        other.id == id &&
+        other.comicType == comicType;
+  }
+
+  @override
+  int get hashCode => Object.hash(id, comicType);
 }
 
 class ImagesDownloadTask extends DownloadTask with _TransferSpeedMixin {
@@ -106,10 +120,7 @@ class ImagesDownloadTask extends DownloadTask with _TransferSpeedMixin {
   }
 
   @override
-  String? get cover => _cover;
-
-  @override
-  bool get isComplete => _totalCount == _downloadedCount;
+  String? get cover => _cover ?? comic?.cover;
 
   @override
   String get message => _message;
@@ -147,19 +158,25 @@ class ImagesDownloadTask extends DownloadTask with _TransferSpeedMixin {
 
   String? _cover;
 
+  /// All images to download, key is chapter name
   Map<String, List<String>>? _images;
 
+  /// Downloaded image count
   int _downloadedCount = 0;
 
+  /// Total image count
   int _totalCount = 0;
 
+  /// Current downloading image index
   int _index = 0;
 
+  /// Current downloading chapter, index of [_images]
   int _chapter = 0;
 
   var tasks = <int, _ImageDownloadWrapper>{};
 
-  int get _maxConcurrentTasks => (appdata.settings["downloadThreads"] as num).toInt();
+  int get _maxConcurrentTasks =>
+      (appdata.settings["downloadThreads"] as num).toInt();
 
   void _scheduleTasks() {
     var images = _images![_images!.keys.elementAt(_chapter)]!;
@@ -180,10 +197,10 @@ class ImagesDownloadTask extends DownloadTask with _TransferSpeedMixin {
       if (comic!.chapters != null) {
         saveTo = Directory(FilePath.join(
           path!,
-          comic!.chapters!.keys.elementAt(_chapter),
+          _images!.keys.elementAt(_chapter),
         ));
         if (!saveTo.existsSync()) {
-          saveTo.createSync();
+          saveTo.createSync(recursive: true);
         }
       } else {
         saveTo = Directory(path!);
@@ -215,7 +232,9 @@ class ImagesDownloadTask extends DownloadTask with _TransferSpeedMixin {
     runRecorder();
 
     if (comic == null) {
-      var res = await runWithRetry(() async {
+      _message = "Fetching comic info...";
+      notifyListeners();
+      var res = await _runWithRetry(() async {
         var r = await source.loadComicInfo!(comicId);
         if (r.error) {
           throw r.errorMessage!;
@@ -235,26 +254,29 @@ class ImagesDownloadTask extends DownloadTask with _TransferSpeedMixin {
     }
 
     if (path == null) {
-      var dir = await LocalManager().findValidDirectory(
-        comicId,
-        comicType,
-        comic!.title,
-      );
-      if (!(await dir.exists())) {
-        try {
+      try {
+        var dir = await LocalManager().findValidDirectory(
+          comicId,
+          comicType,
+          comic!.title,
+        );
+        if (!(await dir.exists())) {
           await dir.create();
-        } catch (e) {
-          _setError("Error: $e");
-          return;
         }
+        path = dir.path;
+      } catch (e, s) {
+        Log.error("Download", e.toString(), s);
+        _setError("Error: $e");
+        return;
       }
-      path = dir.path;
     }
 
     await LocalManager().saveCurrentDownloadingTasks();
 
-    if (cover == null) {
-      var res = await runWithRetry(() async {
+    if (_cover == null) {
+      _message = "Downloading cover...";
+      notifyListeners();
+      var res = await _runWithRetry(() async {
         Uint8List? data;
         await for (var progress
             in ImageDownloader.loadThumbnail(comic!.cover, source.key)) {
@@ -268,9 +290,10 @@ class ImagesDownloadTask extends DownloadTask with _TransferSpeedMixin {
         var fileType = detectFileType(data);
         var file = File(FilePath.join(path!, "cover${fileType.ext}"));
         file.writeAsBytesSync(data);
-        return file.path;
+        return "file://${file.path}";
       });
       if (res.error) {
+        Log.error("Download", res.errorMessage!);
         _setError("Error: ${res.errorMessage}");
         return;
       } else {
@@ -282,7 +305,9 @@ class ImagesDownloadTask extends DownloadTask with _TransferSpeedMixin {
 
     if (_images == null) {
       if (comic!.chapters == null) {
-        var res = await runWithRetry(() async {
+        _message = "Fetching image list...";
+        notifyListeners();
+        var res = await _runWithRetry(() async {
           var r = await source.loadComicPages!(comicId, null);
           if (r.error) {
             throw r.errorMessage!;
@@ -294,6 +319,7 @@ class ImagesDownloadTask extends DownloadTask with _TransferSpeedMixin {
           return;
         }
         if (res.error) {
+          Log.error("Download", res.errorMessage!);
           _setError("Error: ${res.errorMessage}");
           return;
         } else {
@@ -303,7 +329,10 @@ class ImagesDownloadTask extends DownloadTask with _TransferSpeedMixin {
       } else {
         _images = {};
         _totalCount = 0;
-        for (var i in comic!.chapters!.keys) {
+        int cpCount = 0;
+        int totalCpCount =
+            chapters?.length ?? comic!.chapters!.allChapters.length;
+        for (var i in comic!.chapters!.allChapters.keys) {
           if (chapters != null && !chapters!.contains(i)) {
             continue;
           }
@@ -311,7 +340,9 @@ class ImagesDownloadTask extends DownloadTask with _TransferSpeedMixin {
             _totalCount += _images![i]!.length;
             continue;
           }
-          var res = await runWithRetry(() async {
+          _message = "Fetching image list ($cpCount/$totalCpCount)...";
+          notifyListeners();
+          var res = await _runWithRetry(() async {
             var r = await source.loadComicPages!(comicId, i);
             if (r.error) {
               throw r.errorMessage!;
@@ -323,6 +354,7 @@ class ImagesDownloadTask extends DownloadTask with _TransferSpeedMixin {
             return;
           }
           if (res.error) {
+            Log.error("Download", res.errorMessage!);
             _setError("Error: ${res.errorMessage}");
             return;
           } else {
@@ -347,6 +379,7 @@ class ImagesDownloadTask extends DownloadTask with _TransferSpeedMixin {
           return;
         }
         if (task.error != null) {
+          Log.error("Download", task.error.toString());
           _setError("Error: ${task.error}");
           return;
         }
@@ -375,14 +408,13 @@ class ImagesDownloadTask extends DownloadTask with _TransferSpeedMixin {
     _message = message;
     notifyListeners();
     stopRecorder();
-    Log.error("Download", message);
   }
 
   @override
   int get speed => currentSpeed;
 
   @override
-  String get title => comic?.title ?? comicTitle ??  "Loading...";
+  String get title => comic?.title ?? comicTitle ?? "Loading...";
 
   @override
   Map<String, dynamic> toJson() {
@@ -393,7 +425,7 @@ class ImagesDownloadTask extends DownloadTask with _TransferSpeedMixin {
       "comic": comic?.toJson(),
       "chapters": chapters,
       "path": path,
-      "cover": cover,
+      "cover": _cover,
       "images": _images,
       "downloadedCount": _downloadedCount,
       "totalCount": _totalCount,
@@ -448,7 +480,7 @@ class ImagesDownloadTask extends DownloadTask with _TransferSpeedMixin {
       }).toList(),
       directory: Directory(path!).name,
       chapters: comic!.chapters,
-      cover: File(_cover!).uri.pathSegments.last,
+      cover: File(_cover!.split("file://").last).name,
       comicType: ComicType(source.key.hashCode),
       downloadedChapters: chapters ?? [],
       createdAt: DateTime.now(),
@@ -467,7 +499,7 @@ class ImagesDownloadTask extends DownloadTask with _TransferSpeedMixin {
   int get hashCode => Object.hash(comicId, source.key);
 }
 
-Future<Res<T>> runWithRetry<T>(Future<T> Function() task,
+Future<Res<T>> _runWithRetry<T>(Future<T> Function() task,
     {int retry = 3}) async {
   for (var i = 0; i < retry; i++) {
     try {
@@ -476,6 +508,7 @@ Future<Res<T>> runWithRetry<T>(Future<T> Function() task,
       if (i == retry - 1) {
         return Res.error(e.toString());
       }
+      await Future.delayed(Duration(seconds: i + 1));
     }
   }
   throw UnimplementedError();
@@ -577,7 +610,7 @@ abstract mixin class _TransferSpeedMixin {
 
   void onData(int length) {
     if (timer == null) return;
-    if(length < 0) {
+    if (length < 0) {
       return;
     }
     _bytesSinceLastSecond += length;
@@ -603,3 +636,228 @@ abstract mixin class _TransferSpeedMixin {
     _bytesSinceLastSecond = 0;
   }
 }
+
+class ArchiveDownloadTask extends DownloadTask {
+  final String archiveUrl;
+
+  final ComicDetails comic;
+
+  late ComicSource source;
+
+  /// Download comic by archive url
+  ///
+  /// Currently only support zip file and comics without chapters
+  ArchiveDownloadTask(this.archiveUrl, this.comic) {
+    source = ComicSource.find(comic.sourceKey)!;
+  }
+
+  FileDownloader? _downloader;
+
+  String _message = "Fetching comic info...";
+
+  bool _isRunning = false;
+
+  bool _isError = false;
+
+  void _setError(String message) {
+    _isRunning = false;
+    _isError = true;
+    _message = message;
+    notifyListeners();
+    Log.error("Download", message);
+  }
+
+  @override
+  void cancel() async {
+    _isRunning = false;
+    await _downloader?.stop();
+    if (path != null) {
+      Directory(path!).deleteIgnoreError(recursive: true);
+    }
+    path = null;
+    LocalManager().removeTask(this);
+  }
+
+  @override
+  ComicType get comicType => ComicType(source.key.hashCode);
+
+  @override
+  String? get cover => comic.cover;
+
+  @override
+  String get id => comic.id;
+
+  @override
+  bool get isError => _isError;
+
+  @override
+  bool get isPaused => !_isRunning;
+
+  @override
+  String get message => _message;
+
+  int _currentBytes = 0;
+
+  int _expectedBytes = 0;
+
+  int _speed = 0;
+
+  @override
+  void pause() {
+    _isRunning = false;
+    _message = "Paused";
+    _downloader?.stop();
+    notifyListeners();
+  }
+
+  @override
+  double get progress =>
+      _expectedBytes == 0 ? 0 : _currentBytes / _expectedBytes;
+
+  @override
+  void resume() async {
+    if (_isRunning) {
+      return;
+    }
+    _isError = false;
+    _isRunning = true;
+    notifyListeners();
+    _message = "Downloading...";
+
+    if (path == null) {
+      var dir = await LocalManager().findValidDirectory(
+        comic.id,
+        comicType,
+        comic.title,
+      );
+      if (!(await dir.exists())) {
+        try {
+          await dir.create();
+        } catch (e) {
+          _setError("Error: $e");
+          return;
+        }
+      }
+      path = dir.path;
+    }
+
+    var archiveFile =
+        File(FilePath.join(App.dataPath, "archive_downloading.zip"));
+
+    Log.info("Download", "Downloading $archiveUrl");
+
+    _downloader = FileDownloader(archiveUrl, archiveFile.path);
+
+    bool isDownloaded = false;
+
+    try {
+      await for (var status in _downloader!.start()) {
+        _currentBytes = status.downloadedBytes;
+        _expectedBytes = status.totalBytes;
+        _message =
+            "${bytesToReadableString(_currentBytes)}/${bytesToReadableString(_expectedBytes)}";
+        _speed = status.bytesPerSecond;
+        isDownloaded = status.isFinished;
+        notifyListeners();
+      }
+    } catch (e) {
+      _setError("Error: $e");
+      return;
+    }
+
+    if (!_isRunning) {
+      return;
+    }
+
+    if (!isDownloaded) {
+      _setError("Error: Download failed");
+      return;
+    }
+
+    try {
+      await _extractArchive(archiveFile.path, path!);
+    } catch (e) {
+      _setError("Failed to extract archive: $e");
+      return;
+    }
+
+    await archiveFile.deleteIgnoreError();
+
+    LocalManager().completeTask(this);
+  }
+
+  static Future<void> _extractArchive(String archive, String outDir) async {
+    var out = Directory(outDir);
+    if (out is AndroidDirectory) {
+      // Saf directory can't be accessed by native code.
+      var cacheDir = FilePath.join(App.cachePath, "archive_downloading");
+      Directory(cacheDir).forceCreateSync();
+      await Isolate.run(() {
+        ZipFile.openAndExtract(archive, cacheDir);
+      });
+      await copyDirectoryIsolate(Directory(cacheDir), Directory(outDir));
+      await Directory(cacheDir).deleteIgnoreError(recursive: true);
+    } else {
+      await Isolate.run(() {
+        ZipFile.openAndExtract(archive, outDir);
+      });
+    }
+  }
+
+  @override
+  int get speed => _speed;
+
+  @override
+  String get title => comic.title;
+
+  @override
+  Map<String, dynamic> toJson() {
+    return {
+      "type": "ArchiveDownloadTask",
+      "archiveUrl": archiveUrl,
+      "comic": comic.toJson(),
+      "path": path,
+    };
+  }
+
+  static ArchiveDownloadTask? fromJson(Map<String, dynamic> json) {
+    if (json["type"] != "ArchiveDownloadTask") {
+      return null;
+    }
+    return ArchiveDownloadTask(
+      json["archiveUrl"],
+      ComicDetails.fromJson(json["comic"]),
+    )..path = json["path"];
+  }
+
+  String _findCover() {
+    var files = Directory(path!).listSync();
+    for (var f in files) {
+      if (f.name.startsWith('cover')) {
+        return f.name;
+      }
+    }
+    files.sort((a, b) {
+      return a.name.compareTo(b.name);
+    });
+    return files.first.name;
+  }
+
+  @override
+  LocalComic toLocalComic() {
+    return LocalComic(
+      id: comic.id,
+      title: title,
+      subtitle: comic.subTitle ?? '',
+      tags: comic.tags.entries.expand((e) {
+        return e.value.map((v) => "${e.key}:$v");
+      }).toList(),
+      directory: Directory(path!).name,
+      chapters: null,
+      cover: _findCover(),
+      comicType: ComicType(source.key.hashCode),
+      downloadedChapters: [],
+      createdAt: DateTime.now(),
+    );
+  }
+}

lib/network/file_downloader.dart

@@ -0,0 +1,298 @@
+import 'dart:async';
+import 'dart:io';
+
+import 'package:dio/io.dart';
+import 'package:venera/network/app_dio.dart';
+import 'package:venera/utils/ext.dart';
+
+class FileDownloader {
+  final String url;
+  final String savePath;
+  final int maxConcurrent;
+
+  FileDownloader(this.url, this.savePath, {this.maxConcurrent = 4});
+
+  int _currentBytes = 0;
+
+  int _lastBytes = 0;
+
+  late int _fileSize;
+
+  final _dio = Dio();
+
+  RandomAccessFile? _file;
+
+  bool _isWriting = false;
+
+  int _kChunkSize = 16 * 1024 * 1024;
+
+  bool _canceled = false;
+
+  late List<_DownloadBlock> _blocks;
+
+  Future<void> _writeStatus() async {
+    var file = File("$savePath.download");
+    await file.writeAsString(_blocks.map((e) => e.toString()).join("\n"));
+  }
+
+  Future<void> _readStatus() async {
+    var file = File("$savePath.download");
+    if (!await file.exists()) {
+      return;
+    }
+
+    var lines = await file.readAsLines();
+    _blocks = lines.map((e) => _DownloadBlock.fromString(e)).toList();
+  }
+
+  /// create file and write empty bytes
+  Future<void> _prepareFile() async {
+    var file = File(savePath);
+    if (await file.exists()) {
+      if (file.lengthSync() == _fileSize &&
+          File("$savePath.download").existsSync()) {
+        _file = await file.open(mode: FileMode.append);
+        return;
+      } else {
+        await file.delete();
+      }
+    }
+
+    await file.create(recursive: true);
+    _file = await file.open(mode: FileMode.append);
+    await _file!.truncate(_fileSize);
+  }
+
+  Future<void> _createTasks() async {
+    var res = await _dio.head(url);
+    var length = res.headers["content-length"]?.first;
+    _fileSize = length == null ? 0 : int.parse(length);
+
+    await _prepareFile();
+
+    if (File("$savePath.download").existsSync()) {
+      await _readStatus();
+      _currentBytes = _blocks.fold<int>(0,
+          (previousValue, element) => previousValue + element.downloadedBytes);
+    } else {
+      if (_fileSize > 1024 * 1024 * 1024) {
+        _kChunkSize = 64 * 1024 * 1024;
+      } else if (_fileSize > 512 * 1024 * 1024) {
+        _kChunkSize = 32 * 1024 * 1024;
+      }
+
+      _blocks = [];
+      for (var i = 0; i < _fileSize; i += _kChunkSize) {
+        var end = i + _kChunkSize;
+        if (end > _fileSize) {
+          _blocks.add(_DownloadBlock(i, _fileSize, 0, false));
+        } else {
+          _blocks.add(_DownloadBlock(i, i + _kChunkSize, 0, false));
+        }
+      }
+    }
+  }
+
+  Stream<DownloadingStatus> start() {
+    var stream = StreamController<DownloadingStatus>();
+    _download(stream);
+    return stream.stream;
+  }
+
+  void _reportStatus(StreamController<DownloadingStatus> stream) {
+    stream.add(DownloadingStatus(_currentBytes, _fileSize, 0));
+  }
+
+  void _download(StreamController<DownloadingStatus> resultStream) async {
+    try {
+      var proxy = await AppDio.getProxy();
+      _dio.httpClientAdapter = IOHttpClientAdapter(
+        createHttpClient: () {
+          return HttpClient()
+            ..findProxy = (uri) => proxy == null ? "DIRECT" : "PROXY $proxy";
+        },
+      );
+
+      // get file size
+      await _createTasks();
+
+      if (_canceled) return;
+
+      // check if file is downloaded
+      if (_currentBytes >= _fileSize) {
+        await _file!.close();
+        _file = null;
+        _reportStatus(resultStream);
+        resultStream.close();
+        return;
+      }
+
+      _reportStatus(resultStream);
+
+      Timer.periodic(const Duration(seconds: 1), (timer) {
+        if (_canceled || _currentBytes >= _fileSize) {
+          timer.cancel();
+          return;
+        }
+        resultStream.add(DownloadingStatus(
+            _currentBytes, _fileSize, _currentBytes - _lastBytes));
+        _lastBytes = _currentBytes;
+      });
+
+      // start downloading
+      await _scheduleDownload();
+      if (_canceled) {
+        resultStream.close();
+        return;
+      }
+      await _file!.close();
+      _file = null;
+      await File("$savePath.download").delete();
+
+      // check if download is finished
+      if (_currentBytes < _fileSize) {
+        resultStream
+            .addError(Exception("Download failed: Expected $_fileSize bytes, "
+                "but only $_currentBytes bytes downloaded."));
+        resultStream.close();
+      }
+
+      resultStream.add(DownloadingStatus(_currentBytes, _fileSize, 0, true));
+      resultStream.close();
+    } catch (e, s) {
+      await _file?.close();
+      _file = null;
+      resultStream.addError(e, s);
+      resultStream.close();
+    }
+  }
+
+  Future<void> _scheduleDownload() async {
+    var tasks = <Future>[];
+    while (true) {
+      if (_canceled) return;
+      if (tasks.length >= maxConcurrent) {
+        await Future.any(tasks);
+      }
+      final block = _blocks.firstWhereOrNull((element) =>
+          !element.downloading &&
+          element.end - element.start > element.downloadedBytes);
+      if (block == null) {
+        break;
+      }
+      block.downloading = true;
+      var task = _fetchBlock(block);
+      task.then((value) => tasks.remove(task), onError: (e) {
+        if(_canceled) return;
+        throw e;
+      });
+      tasks.add(task);
+    }
+    await Future.wait(tasks);
+  }
+
+  Future<void> _fetchBlock(_DownloadBlock block) async {
+    final start = block.start;
+    final end = block.end;
+
+    if (start > _fileSize) {
+      return;
+    }
+
+    var options = Options(
+      responseType: ResponseType.stream,
+      headers: {
+        "Range": "bytes=${start + block.downloadedBytes}-${end - 1}",
+        "Accept": "*/*",
+        "Accept-Encoding": "deflate, gzip",
+      },
+      preserveHeaderCase: true,
+    );
+    var res = await _dio.get<ResponseBody>(url, options: options);
+    if (_canceled) return;
+    if (res.data == null) {
+      throw Exception("Failed to block $start-$end");
+    }
+
+    var buffer = <int>[];
+    await for (var data in res.data!.stream) {
+      if (_canceled) return;
+      buffer.addAll(data);
+      if (buffer.length > 16 * 1024) {
+        if (_isWriting) continue;
+        _currentBytes += buffer.length;
+        _isWriting = true;
+        await _file!.setPosition(start + block.downloadedBytes);
+        await _file!.writeFrom(buffer);
+        block.downloadedBytes += buffer.length;
+        buffer.clear();
+        await _writeStatus();
+        _isWriting = false;
+      }
+    }
+
+    if (buffer.isNotEmpty) {
+      while (_isWriting) {
+        await Future.delayed(const Duration(milliseconds: 10));
+      }
+      _isWriting = true;
+      _currentBytes += buffer.length;
+      await _file!.setPosition(start + block.downloadedBytes);
+      await _file!.writeFrom(buffer);
+      block.downloadedBytes += buffer.length;
+      await _writeStatus();
+      _isWriting = false;
+    }
+
+    block.downloading = false;
+  }
+
+  Future<void> stop() async {
+    _canceled = true;
+    await _file?.close();
+    _file = null;
+  }
+}
+
+class DownloadingStatus {
+  /// The current downloaded bytes
+  final int downloadedBytes;
+
+  /// The total bytes of the file
+  final int totalBytes;
+
+  /// Whether the download is finished
+  final bool isFinished;
+
+  /// The download speed in bytes per second
+  final int bytesPerSecond;
+
+  const DownloadingStatus(
+      this.downloadedBytes, this.totalBytes, this.bytesPerSecond,
+      [this.isFinished = false]);
+
+  @override
+  String toString() {
+    return "Downloaded: $downloadedBytes/$totalBytes ${isFinished ? "Finished" : ""}";
+  }
+}
+
+class _DownloadBlock {
+  final int start;
+  final int end;
+  int downloadedBytes;
+  bool downloading;
+
+  _DownloadBlock(this.start, this.end, this.downloadedBytes, this.downloading);
+
+  @override
+  String toString() {
+    return "$start-$end-$downloadedBytes";
+  }
+
+  _DownloadBlock.fromString(String str)
+      : start = int.parse(str.split("-")[0]),
+        end = int.parse(str.split("-")[1]),
+        downloadedBytes = int.parse(str.split("-")[2]),
+        downloading = false;
+}

lib/network/images.dart

@@ -139,12 +139,10 @@ class ImageDownloader {
         var buffer = <int>[];
         await for (var data in stream) {
           buffer.addAll(data);
-          if (expectedBytes != null) {
-            yield ImageDownloadProgress(
-              currentBytes: buffer.length,
-              totalBytes: expectedBytes,
-            );
-          }
+          yield ImageDownloadProgress(
+            currentBytes: buffer.length,
+            totalBytes: expectedBytes,
+          );
         }
 
         if (configs['onResponse'] is JSInvokable) {
@@ -194,7 +192,7 @@ class ImageDownloader {
 class ImageDownloadProgress {
   final int currentBytes;
 
-  final int totalBytes;
+  final int? totalBytes;
 
   final Uint8List? imageBytes;
 

lib/pages/accounts_page.dart

@@ -1,349 +0,0 @@
-import 'package:flutter/material.dart';
-import 'package:flutter/services.dart';
-import 'package:flutter_inappwebview/flutter_inappwebview.dart';
-import 'package:url_launcher/url_launcher_string.dart';
-import 'package:venera/components/components.dart';
-import 'package:venera/foundation/app.dart';
-import 'package:venera/foundation/comic_source/comic_source.dart';
-import 'package:venera/foundation/state_controller.dart';
-import 'package:venera/network/cookie_jar.dart';
-import 'package:venera/pages/webview.dart';
-import 'package:venera/utils/translations.dart';
-
-class AccountsPageLogic extends StateController {
-  final _reLogin = <String, bool>{};
-}
-
-class AccountsPage extends StatelessWidget {
-  const AccountsPage({super.key});
-
-  AccountsPageLogic get logic => StateController.find<AccountsPageLogic>();
-
-  @override
-  Widget build(BuildContext context) {
-    var body = StateBuilder<AccountsPageLogic>(
-      init: AccountsPageLogic(),
-      builder: (logic) {
-        return CustomScrollView(
-          slivers: [
-            SliverAppbar(title: Text("Accounts".tl)),
-            SliverList(
-              delegate: SliverChildListDelegate(
-                buildContent(context).toList(),
-              ),
-            ),
-            SliverPadding(
-              padding: EdgeInsets.only(bottom: context.padding.bottom),
-            )
-          ],
-        );
-      },
-    );
-
-    return Scaffold(
-      body: body,
-    );
-  }
-
-  Iterable<Widget> buildContent(BuildContext context) sync* {
-    var sources = ComicSource.all().where((element) => element.account != null);
-    if (sources.isEmpty) return;
-
-    for (var element in sources) {
-      final bool logged = element.isLogged;
-      yield Padding(
-        padding: const EdgeInsets.fromLTRB(16, 8, 16, 8),
-        child: Text(
-          element.name,
-          style: const TextStyle(fontSize: 16),
-        ),
-      );
-      if (!logged) {
-        yield ListTile(
-          title: Text("Log in".tl),
-          trailing: const Icon(Icons.arrow_right),
-          onTap: () async {
-            await context.to(
-              () => _LoginPage(
-                config: element.account!,
-                source: element,
-              ),
-            );
-            element.saveData();
-            ComicSource.notifyListeners();
-            logic.update();
-          },
-        );
-      }
-      if (logged) {
-        for (var item in element.account!.infoItems) {
-          if (item.builder != null) {
-            yield item.builder!(context);
-          } else {
-            yield ListTile(
-              title: Text(item.title.tl),
-              subtitle: item.data == null ? null : Text(item.data!()),
-              onTap: item.onTap,
-            );
-          }
-        }
-        if (element.data["account"] is List) {
-          bool loading = logic._reLogin[element.key] == true;
-          yield ListTile(
-            title: Text("Re-login".tl),
-            subtitle: Text("Click if login expired".tl),
-            onTap: () async {
-              if (element.data["account"] == null) {
-                context.showMessage(message: "No data".tl);
-                return;
-              }
-              logic._reLogin[element.key] = true;
-              logic.update();
-              final List account = element.data["account"];
-              var res = await element.account!.login!(account[0], account[1]);
-              if (res.error) {
-                context.showMessage(message: res.errorMessage!);
-              } else {
-                context.showMessage(message: "Success".tl);
-              }
-              logic._reLogin[element.key] = false;
-              logic.update();
-            },
-            trailing: loading
-                ? const SizedBox.square(
-                    dimension: 24,
-                    child: CircularProgressIndicator(
-                      strokeWidth: 2,
-                    ),
-                  )
-                : const Icon(Icons.refresh),
-          );
-        }
-        yield ListTile(
-          title: Text("Log out".tl),
-          onTap: () {
-            element.data["account"] = null;
-            element.account?.logout();
-            element.saveData();
-            ComicSource.notifyListeners();
-            logic.update();
-          },
-          trailing: const Icon(Icons.logout),
-        );
-      }
-      yield const Divider(thickness: 0.6);
-    }
-  }
-
-  void setClipboard(String text) {
-    Clipboard.setData(ClipboardData(text: text));
-    showToast(
-      message: "Copied".tl,
-      icon: const Icon(Icons.check),
-      context: App.rootContext,
-    );
-  }
-}
-
-class _LoginPage extends StatefulWidget {
-  const _LoginPage({required this.config, required this.source});
-
-  final AccountConfig config;
-
-  final ComicSource source;
-
-  @override
-  State<_LoginPage> createState() => _LoginPageState();
-}
-
-class _LoginPageState extends State<_LoginPage> {
-  String username = "";
-  String password = "";
-  bool loading = false;
-
-  final Map<String, String> _cookies = {};
-
-  @override
-  Widget build(BuildContext context) {
-    return Scaffold(
-      appBar: const Appbar(
-        title: Text(''),
-      ),
-      body: Center(
-        child: Container(
-          padding: const EdgeInsets.all(16),
-          constraints: const BoxConstraints(maxWidth: 400),
-          child: AutofillGroup(
-            child: Column(
-              mainAxisSize: MainAxisSize.min,
-              children: [
-                Text("Login".tl, style: const TextStyle(fontSize: 24)),
-                const SizedBox(height: 32),
-                if (widget.config.cookieFields == null)
-                  TextField(
-                    decoration: InputDecoration(
-                      labelText: "Username".tl,
-                      border: const OutlineInputBorder(),
-                    ),
-                    enabled: widget.config.login != null,
-                    onChanged: (s) {
-                      username = s;
-                    },
-                    autofillHints: const [AutofillHints.username],
-                  ).paddingBottom(16),
-                if (widget.config.cookieFields == null)
-                  TextField(
-                    decoration: InputDecoration(
-                      labelText: "Password".tl,
-                      border: const OutlineInputBorder(),
-                    ),
-                    obscureText: true,
-                    enabled: widget.config.login != null,
-                    onChanged: (s) {
-                      password = s;
-                    },
-                    onSubmitted: (s) => login(),
-                    autofillHints: const [AutofillHints.password],
-                  ).paddingBottom(16),
-                for (var field in widget.config.cookieFields ?? <String>[])
-                  TextField(
-                    decoration: InputDecoration(
-                      labelText: field,
-                      border: const OutlineInputBorder(),
-                    ),
-                    obscureText: true,
-                    enabled: widget.config.validateCookies != null,
-                    onChanged: (s) {
-                      _cookies[field] = s;
-                    },
-                  ).paddingBottom(16),
-                if (widget.config.login == null &&
-                    widget.config.cookieFields == null)
-                  Row(
-                    mainAxisSize: MainAxisSize.min,
-                    children: [
-                      const Icon(Icons.error_outline),
-                      const SizedBox(width: 8),
-                      Text("Login with password is disabled".tl),
-                    ],
-                  )
-                else
-                  Button.filled(
-                    isLoading: loading,
-                    onPressed: login,
-                    child: Text("Continue".tl),
-                  ),
-                const SizedBox(height: 24),
-                if (widget.config.loginWebsite != null)
-                  TextButton(
-                    onPressed: loginWithWebview,
-                    child: Text("Login with webview".tl),
-                  ),
-                const SizedBox(height: 8),
-                if (widget.config.registerWebsite != null)
-                  TextButton(
-                    onPressed: () =>
-                        launchUrlString(widget.config.registerWebsite!),
-                    child: Row(
-                      mainAxisSize: MainAxisSize.min,
-                      children: [
-                        const Icon(Icons.link),
-                        const SizedBox(width: 8),
-                        Text("Create Account".tl),
-                      ],
-                    ),
-                  ),
-              ],
-            ),
-          ),
-        ),
-      ),
-    );
-  }
-
-  void login() {
-    if (widget.config.login != null) {
-      if (username.isEmpty || password.isEmpty) {
-        showToast(
-          message: "Cannot be empty".tl,
-          icon: const Icon(Icons.error_outline),
-          context: context,
-        );
-        return;
-      }
-      setState(() {
-        loading = true;
-      });
-      widget.config.login!(username, password).then((value) {
-        if (value.error) {
-          context.showMessage(message: value.errorMessage!);
-          setState(() {
-            loading = false;
-          });
-        } else {
-          if (mounted) {
-            context.pop();
-          }
-        }
-      });
-    } else if (widget.config.validateCookies != null) {
-      setState(() {
-        loading = true;
-      });
-      var cookies =
-          widget.config.cookieFields!.map((e) => _cookies[e] ?? '').toList();
-      widget.config.validateCookies!(cookies).then((value) {
-        if (value) {
-          widget.source.data['account'] = 'ok';
-          widget.source.saveData();
-          context.pop();
-        } else {
-          context.showMessage(message: "Invalid cookies".tl);
-          setState(() {
-            loading = false;
-          });
-        }
-      });
-    }
-  }
-
-  void loginWithWebview() async {
-    var url = widget.config.loginWebsite!;
-    var title = '';
-    bool success = false;
-
-    void validate(InAppWebViewController c) async {
-      if (widget.config.checkLoginStatus != null
-          && widget.config.checkLoginStatus!(url, title)) {
-        var cookies = (await c.getCookies(url)) ?? [];
-        SingleInstanceCookieJar.instance?.saveFromResponse(
-          Uri.parse(url),
-          cookies,
-        );
-        success = true;
-        widget.config.onLoginWithWebviewSuccess?.call();
-        App.mainNavigatorKey?.currentContext?.pop();
-      }
-    }
-
-    await context.to(
-      () => AppWebview(
-        initialUrl: widget.config.loginWebsite!,
-        onNavigation: (u, c) {
-          url = u;
-          validate(c);
-          return false;
-        },
-        onTitleChange: (t, c) {
-          title = t;
-          validate(c);
-        },
-      ),
-    );
-    if (success) {
-      widget.source.data['account'] = 'ok';
-      widget.source.saveData();
-      context.pop();
-    }
-  }
-}

lib/pages/aggregated_search_page.dart

@@ -0,0 +1,246 @@
+import "package:flutter/material.dart";
+import 'package:shimmer_animation/shimmer_animation.dart';
+import "package:venera/components/components.dart";
+import "package:venera/foundation/app.dart";
+import "package:venera/foundation/appdata.dart";
+import "package:venera/foundation/comic_source/comic_source.dart";
+import "package:venera/pages/search_result_page.dart";
+import "package:venera/utils/translations.dart";
+
+class AggregatedSearchPage extends StatefulWidget {
+  const AggregatedSearchPage({super.key, required this.keyword});
+
+  final String keyword;
+
+  @override
+  State<AggregatedSearchPage> createState() => _AggregatedSearchPageState();
+}
+
+class _AggregatedSearchPageState extends State<AggregatedSearchPage> {
+  late final List<ComicSource> sources;
+
+  late final SearchBarController controller;
+
+  var _keyword = "";
+
+  @override
+  void initState() {
+    var all = ComicSource.all()
+        .where((e) => e.searchPageData != null)
+        .map((e) => e.key)
+        .toList();
+    var settings = appdata.settings['searchSources'] as List;
+    var sources = <String>[];
+    for (var source in settings) {
+      if (all.contains(source)) {
+        sources.add(source);
+      }
+    }
+    this.sources = sources.map((e) => ComicSource.find(e)!).toList();
+    _keyword = widget.keyword;
+    controller = SearchBarController(
+      currentText: widget.keyword,
+      onSearch: (text) {
+        setState(() {
+          _keyword = text;
+        });
+      },
+    );
+    super.initState();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return SmoothCustomScrollView(slivers: [
+      SliverSearchBar(controller: controller),
+      SliverList(
+        key: ValueKey(_keyword),
+        delegate: SliverChildBuilderDelegate(
+          (context, index) {
+            final source = sources[index];
+            return _SliverSearchResult(
+              key: ValueKey(source.key),
+              source: source,
+              keyword: _keyword,
+            );
+          },
+          childCount: sources.length,
+        ),
+      ),
+    ]);
+  }
+}
+
+class _SliverSearchResult extends StatefulWidget {
+  const _SliverSearchResult({
+    required this.source,
+    required this.keyword,
+    super.key,
+  });
+
+  final ComicSource source;
+
+  final String keyword;
+
+  @override
+  State<_SliverSearchResult> createState() => _SliverSearchResultState();
+}
+
+class _SliverSearchResultState extends State<_SliverSearchResult>
+    with AutomaticKeepAliveClientMixin {
+  bool isLoading = true;
+
+  static const _kComicHeight = 132.0;
+
+  get _comicWidth => _kComicHeight * 0.7;
+
+  static const _kLeftPadding = 16.0;
+
+  List<Comic>? comics;
+
+  String? error;
+
+  void load() async {
+    final data = widget.source.searchPageData!;
+    var options =
+        (data.searchOptions ?? []).map((e) => e.defaultValue).toList();
+    if (data.loadPage != null) {
+      var res = await data.loadPage!(widget.keyword, 1, options);
+      if (!res.error) {
+        setState(() {
+          comics = res.data;
+          isLoading = false;
+        });
+      } else {
+        setState(() {
+          error = res.errorMessage ?? "Unknown error".tl;
+          isLoading = false;
+        });
+      }
+    } else if (data.loadNext != null) {
+      var res = await data.loadNext!(widget.keyword, null, options);
+      if (!res.error) {
+        setState(() {
+          comics = res.data;
+          isLoading = false;
+        });
+      } else {
+        setState(() {
+          error = res.errorMessage ?? "Unknown error".tl;
+          isLoading = false;
+        });
+      }
+    }
+  }
+
+  @override
+  void initState() {
+    super.initState();
+    load();
+  }
+
+  Widget buildPlaceHolder() {
+    return Container(
+      height: _kComicHeight,
+      width: _comicWidth,
+      margin: const EdgeInsets.only(left: _kLeftPadding),
+      decoration: BoxDecoration(
+        color: context.colorScheme.surfaceContainerLow,
+        borderRadius: BorderRadius.circular(8),
+      ),
+    );
+  }
+
+  Widget buildComic(Comic c) {
+    return SimpleComicTile(comic: c)
+        .paddingLeft(_kLeftPadding)
+        .paddingBottom(2);
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    if (error != null && error!.startsWith("CloudflareException")) {
+      error = "Cloudflare verification required".tl;
+    }
+    super.build(context);
+    return InkWell(
+      onTap: () {
+        context.to(
+          () => SearchResultPage(
+            text: widget.keyword,
+            sourceKey: widget.source.key,
+          ),
+        );
+      },
+      child: Column(
+        children: [
+          ListTile(
+            mouseCursor: SystemMouseCursors.click,
+            title: Text(widget.source.name),
+          ),
+          if (isLoading)
+            SizedBox(
+              height: _kComicHeight,
+              width: double.infinity,
+              child: Shimmer(
+                child: LayoutBuilder(builder: (context, constrains) {
+                  var itemWidth = _comicWidth + _kLeftPadding;
+                  var items = (constrains.maxWidth / itemWidth).ceil();
+                  return Stack(
+                    children: [
+                      Positioned(
+                        left: 0,
+                        top: 0,
+                        bottom: 0,
+                        child: Row(
+                          children: List.generate(
+                            items,
+                            (index) => buildPlaceHolder(),
+                          ),
+                        ),
+                      )
+                    ],
+                  );
+                }),
+              ),
+            )
+          else if (error != null || comics == null || comics!.isEmpty)
+            SizedBox(
+              height: _kComicHeight,
+              child: Column(
+                children: [
+                  Row(
+                    children: [
+                      const Icon(Icons.error_outline),
+                      const SizedBox(width: 8),
+                      Expanded(
+                        child: Text(
+                          error ?? "No search results found".tl,
+                          maxLines: 1,
+                          overflow: TextOverflow.ellipsis,
+                        ),
+                      )
+                    ],
+                  ),
+                  const Spacer(),
+                ],
+              ).paddingHorizontal(16),
+            )
+          else
+            SizedBox(
+              height: _kComicHeight,
+              child: ListView(
+                scrollDirection: Axis.horizontal,
+                children: [
+                  for (var c in comics!) buildComic(c),
+                ],
+              ),
+            ),
+        ],
+      ).paddingBottom(16),
+    );
+  }
+
+  @override
+  bool get wantKeepAlive => true;
+}

lib/pages/auth_page.dart

@@ -1,4 +1,5 @@
 import 'package:flutter/material.dart';
+import 'package:flutter/scheduler.dart';
 import 'package:flutter/services.dart';
 import 'package:local_auth/local_auth.dart';
 import 'package:venera/utils/translations.dart';
@@ -14,6 +15,16 @@ class AuthPage extends StatefulWidget {
 
 class _AuthPageState extends State<AuthPage> {
 
+  @override
+  void initState() {
+    WidgetsBinding.instance.addPostFrameCallback((_) {
+      if(SchedulerBinding.instance.lifecycleState != AppLifecycleState.paused) {
+        auth();
+      }
+    });
+    super.initState();
+  }
+
   @override
   Widget build(BuildContext context) {
     return PopScope(

lib/pages/categories_page.dart

@@ -3,79 +3,128 @@ import 'package:venera/components/components.dart';
 import 'package:venera/foundation/app.dart';
 import 'package:venera/foundation/appdata.dart';
 import 'package:venera/foundation/comic_source/comic_source.dart';
-import 'package:venera/foundation/state_controller.dart';
 import 'package:venera/pages/ranking_page.dart';
 import 'package:venera/pages/search_result_page.dart';
+import 'package:venera/pages/settings/settings_page.dart';
+import 'package:venera/utils/ext.dart';
 import 'package:venera/utils/translations.dart';
 
 import 'category_comics_page.dart';
+import 'comic_source_page.dart';
 
-class CategoriesPage extends StatelessWidget {
+class CategoriesPage extends StatefulWidget {
   const CategoriesPage({super.key});
 
+  @override
+  State<CategoriesPage> createState() => _CategoriesPageState();
+}
+
+class _CategoriesPageState extends State<CategoriesPage> {
+  var categories = <String>[];
+
+  void onSettingsChanged() {
+    var categories =
+        List.from(appdata.settings["categories"]).whereType<String>().toList();
+    var allCategories = ComicSource.all()
+        .map((e) => e.categoryData?.key)
+        .where((element) => element != null)
+        .map((e) => e!)
+        .toList();
+    categories =
+        categories.where((element) => allCategories.contains(element)).toList();
+    if (!categories.isEqualTo(this.categories)) {
+      setState(() {
+        this.categories = categories;
+      });
+    }
+  }
+
+  @override
+  void initState() {
+    super.initState();
+    var categories =
+        List.from(appdata.settings["categories"]).whereType<String>().toList();
+    var allCategories = ComicSource.all()
+        .map((e) => e.categoryData?.key)
+        .where((element) => element != null)
+        .map((e) => e!)
+        .toList();
+    this.categories =
+        categories.where((element) => allCategories.contains(element)).toList();
+    appdata.settings.addListener(onSettingsChanged);
+  }
+
+  void addPage() {
+    showPopUpWidget(App.rootContext, setCategoryPagesWidget());
+  }
+
+  @override
+  void dispose() {
+    super.dispose();
+    appdata.settings.removeListener(onSettingsChanged);
+  }
+
+  Widget buildEmpty() {
+    var msg = "No Category Pages".tl;
+    msg += '\n';
+    VoidCallback onTap;
+    if (ComicSource.isEmpty) {
+      msg += "Please add some sources".tl;
+      onTap = () {
+        context.to(() => ComicSourcePage());
+      };
+    } else {
+      msg += "Please check your settings".tl;
+      onTap = addPage;
+    }
+    return NetworkError(
+      message: msg,
+      retry: onTap,
+      withAppbar: false,
+      buttonText: "Manage".tl,
+    );
+  }
+
   @override
   Widget build(BuildContext context) {
-    return StateBuilder<SimpleController>(
-      tag: "category",
-      init: SimpleController(),
-      builder: (controller) {
-        var categories = List.from(appdata.settings["categories"]);
-        var allCategories = ComicSource.all()
-            .map((e) => e.categoryData?.key)
-            .where((element) => element != null)
-            .map((e) => e!)
-            .toList();
-        categories = categories
-            .where((element) => allCategories.contains(element))
-            .toList();
+    if (categories.isEmpty) {
+      return buildEmpty();
+    }
 
-        if(categories.isEmpty) {
-          var msg = "No Category Pages".tl;
-          msg += '\n';
-          if(ComicSource.isEmpty) {
-            msg += "Add a comic source in home page".tl;
-          } else {
-            msg += "Please check your settings".tl;
-          }
-          return NetworkError(
-            message: msg,
-            retry: () {
-              controller.update();
-            },
-            withAppbar: false,
-          );
-        }
-
-        return Material(
-          child: DefaultTabController(
-            length: categories.length,
-            key: Key(categories.toString()),
-            child: Column(
-              children: [
-                FilledTabBar(
-                  tabs: categories.map((e) {
-                    String title = e;
-                    try {
-                      title = getCategoryDataWithKey(e).title;
-                    } catch (e) {
-                      //
-                    }
-                    return Tab(
-                      text: title,
-                      key: Key(e),
-                    );
-                  }).toList(),
-                ).paddingTop(context.padding.top),
-                Expanded(
-                  child: TabBarView(
-                      children:
-                          categories.map((e) => _CategoryPage(e)).toList()),
-                )
-              ],
-            ),
-          ),
-        );
-      },
+    return Material(
+      child: DefaultTabController(
+        length: categories.length,
+        key: Key(categories.toString()),
+        child: Column(
+          children: [
+            AppTabBar(
+              key: PageStorageKey(categories.toString()),
+              tabs: categories.map((e) {
+                String title = e;
+                try {
+                  title = getCategoryDataWithKey(e).title;
+                } catch (e) {
+                  //
+                }
+                return Tab(
+                  text: title,
+                  key: Key(e),
+                );
+              }).toList(),
+              actionButton: TabActionButton(
+                icon: const Icon(Icons.add),
+                text: "Add".tl,
+                onPressed: addPage,
+              ),
+            ).paddingTop(context.padding.top),
+            Expanded(
+              child: TabBarView(
+                children: categories.map((e) => _CategoryPage(e)).toList(),
+              ),
+            )
+          ],
+        ),
+      ),
     );
   }
 }
@@ -261,7 +310,7 @@ class _CategoryPage extends StatelessWidget {
         builder: (context) {
           return Material(
             borderRadius: const BorderRadius.all(Radius.circular(8)),
-            color: context.colorScheme.primaryContainer.withOpacity(0.72),
+            color: context.colorScheme.primaryContainer.toOpacity(0.72),
             child: InkWell(
               borderRadius: const BorderRadius.all(Radius.circular(8)),
               onTap: () => onClick(tag, param),

lib/pages/comic_details_page/actions.dart

@@ -0,0 +1,439 @@
+part of 'comic_page.dart';
+
+abstract mixin class _ComicPageActions {
+  void update();
+
+  ComicDetails get comic;
+
+  ComicSource get comicSource => ComicSource.find(comic.sourceKey)!;
+
+  History? get history;
+
+  bool isLiking = false;
+
+  bool isLiked = false;
+
+  void likeOrUnlike() async {
+    if (isLiking) return;
+    isLiking = true;
+    update();
+    var res = await comicSource.likeOrUnlikeComic!(comic.id, isLiked);
+    if (res.error) {
+      App.rootContext.showMessage(message: res.errorMessage!);
+    } else {
+      isLiked = !isLiked;
+    }
+    isLiking = false;
+    update();
+  }
+
+  /// whether the comic is added to local favorite
+  bool isAddToLocalFav = false;
+
+  /// whether the comic is favorite on the server
+  bool isFavorite = false;
+
+  FavoriteItem _toFavoriteItem() {
+    var tags = <String>[];
+    for (var e in comic.tags.entries) {
+      tags.addAll(e.value.map((tag) => '${e.key}:$tag'));
+    }
+    return FavoriteItem(
+      id: comic.id,
+      name: comic.title,
+      coverPath: comic.cover,
+      author: comic.subTitle ?? comic.uploader ?? '',
+      type: comic.comicType,
+      tags: tags,
+    );
+  }
+
+  void openFavPanel() {
+    showSideBar(
+      App.rootContext,
+      _FavoritePanel(
+        cid: comic.id,
+        type: comic.comicType,
+        isFavorite: isFavorite,
+        onFavorite: (local, network) {
+          isFavorite = network ?? isFavorite;
+          isAddToLocalFav = local ?? isAddToLocalFav;
+          update();
+        },
+        favoriteItem: _toFavoriteItem(),
+        updateTime: comic.findUpdateTime(),
+      ),
+    );
+  }
+
+  void quickFavorite() {
+    var folder = appdata.settings['quickFavorite'];
+    if (folder is! String) {
+      return;
+    }
+    LocalFavoritesManager().addComic(
+      folder,
+      _toFavoriteItem(),
+      null,
+      comic.findUpdateTime(),
+    );
+    isAddToLocalFav = true;
+    update();
+    App.rootContext.showMessage(message: "Added".tl);
+  }
+
+  void share() {
+    var text = comic.title;
+    if (comic.url != null) {
+      text += '\n${comic.url}';
+    }
+    Share.shareText(text);
+  }
+
+  /// read the comic
+  ///
+  /// [ep] the episode number, start from 1
+  ///
+  /// [page] the page number, start from 1
+  ///
+  /// [group] the chapter group number, start from 1
+  void read([int? ep, int? page, int? group]) {
+    App.rootContext
+        .to(
+      () => Reader(
+        type: comic.comicType,
+        cid: comic.id,
+        name: comic.title,
+        chapters: comic.chapters,
+        initialChapter: ep,
+        initialPage: page,
+        initialChapterGroup: group,
+        history: history ?? History.fromModel(model: comic, ep: 0, page: 0),
+        author: comic.findAuthor() ?? '',
+        tags: comic.plainTags,
+      ),
+    )
+        .then((_) {
+      onReadEnd();
+    });
+  }
+
+  void continueRead() {
+    var ep = history?.ep ?? 1;
+    var page = history?.page ?? 1;
+    var group = history?.group ?? 1;
+    read(ep, page, group);
+  }
+
+  void onReadEnd();
+
+  void download() async {
+    if (LocalManager().isDownloading(comic.id, comic.comicType)) {
+      App.rootContext.showMessage(message: "The comic is downloading".tl);
+      return;
+    }
+    if (comic.chapters == null &&
+        LocalManager().isDownloaded(comic.id, comic.comicType, 0)) {
+      App.rootContext.showMessage(message: "The comic is downloaded".tl);
+      return;
+    }
+
+    if (comicSource.archiveDownloader != null) {
+      bool useNormalDownload = false;
+      List<ArchiveInfo>? archives;
+      int selected = -1;
+      bool isLoading = false;
+      bool isGettingLink = false;
+      await showDialog(
+        context: App.rootContext,
+        builder: (context) {
+          return StatefulBuilder(
+            builder: (context, setState) {
+              return ContentDialog(
+                title: "Download".tl,
+                content: Column(
+                  mainAxisSize: MainAxisSize.min,
+                  children: [
+                    RadioListTile<int>(
+                      value: -1,
+                      groupValue: selected,
+                      title: Text("Normal".tl),
+                      onChanged: (v) {
+                        setState(() {
+                          selected = v!;
+                        });
+                      },
+                    ),
+                    ExpansionTile(
+                      title: Text("Archive".tl),
+                      shape: const RoundedRectangleBorder(
+                        borderRadius: BorderRadius.zero,
+                      ),
+                      collapsedShape: const RoundedRectangleBorder(
+                        borderRadius: BorderRadius.zero,
+                      ),
+                      onExpansionChanged: (b) {
+                        if (!isLoading && b && archives == null) {
+                          isLoading = true;
+                          comicSource.archiveDownloader!
+                              .getArchives(comic.id)
+                              .then((value) {
+                            if (value.success) {
+                              archives = value.data;
+                            } else {
+                              App.rootContext
+                                  .showMessage(message: value.errorMessage!);
+                            }
+                            setState(() {
+                              isLoading = false;
+                            });
+                          });
+                        }
+                      },
+                      children: [
+                        if (archives == null)
+                          const ListLoadingIndicator().toCenter()
+                        else
+                          for (int i = 0; i < archives!.length; i++)
+                            RadioListTile<int>(
+                              value: i,
+                              groupValue: selected,
+                              onChanged: (v) {
+                                setState(() {
+                                  selected = v!;
+                                });
+                              },
+                              title: Text(archives![i].title),
+                              subtitle: Text(archives![i].description),
+                            )
+                      ],
+                    )
+                  ],
+                ),
+                actions: [
+                  Button.filled(
+                    isLoading: isGettingLink,
+                    onPressed: () async {
+                      if (selected == -1) {
+                        useNormalDownload = true;
+                        context.pop();
+                        return;
+                      }
+                      setState(() {
+                        isGettingLink = true;
+                      });
+                      var res =
+                          await comicSource.archiveDownloader!.getDownloadUrl(
+                        comic.id,
+                        archives![selected].id,
+                      );
+                      if (res.error) {
+                        App.rootContext.showMessage(message: res.errorMessage!);
+                        setState(() {
+                          isGettingLink = false;
+                        });
+                      } else if (context.mounted) {
+                        LocalManager()
+                            .addTask(ArchiveDownloadTask(res.data, comic));
+                        App.rootContext
+                            .showMessage(message: "Download started".tl);
+                        context.pop();
+                      }
+                    },
+                    child: Text("Confirm".tl),
+                  ),
+                ],
+              );
+            },
+          );
+        },
+      );
+      if (!useNormalDownload) {
+        return;
+      }
+    }
+
+    if (comic.chapters == null) {
+      LocalManager().addTask(ImagesDownloadTask(
+        source: comicSource,
+        comicId: comic.id,
+        comic: comic,
+      ));
+    } else {
+      List<int>? selected;
+      var downloaded = <int>[];
+      var localComic = LocalManager().find(comic.id, comic.comicType);
+      if (localComic != null) {
+        for (int i = 0; i < comic.chapters!.length; i++) {
+          if (localComic.downloadedChapters
+              .contains(comic.chapters!.ids.elementAt(i))) {
+            downloaded.add(i);
+          }
+        }
+      }
+      await showSideBar(
+        App.rootContext,
+        _SelectDownloadChapter(
+          comic.chapters!.titles.toList(),
+          (v) => selected = v,
+          downloaded,
+        ),
+      );
+      if (selected == null) return;
+      LocalManager().addTask(ImagesDownloadTask(
+        source: comicSource,
+        comicId: comic.id,
+        comic: comic,
+        chapters: selected!.map((i) {
+          return comic.chapters!.ids.elementAt(i);
+        }).toList(),
+      ));
+    }
+    App.rootContext.showMessage(message: "Download started".tl);
+    update();
+  }
+
+  void onTapTag(String tag, String namespace) {
+    var config = comicSource.handleClickTagEvent?.call(namespace, tag) ??
+        {
+          'action': 'search',
+          'keyword': tag,
+        };
+    var context = App.mainNavigatorKey!.currentContext!;
+    if (config['action'] == 'search') {
+      context.to(() => SearchResultPage(
+            text: config['keyword'] ?? '',
+            sourceKey: comicSource.key,
+            options: const [],
+          ));
+    } else if (config['action'] == 'category') {
+      context.to(
+        () => CategoryComicsPage(
+          category: config['keyword'] ?? '',
+          categoryKey: comicSource.categoryData!.key,
+          param: config['param'],
+        ),
+      );
+    }
+  }
+
+  void showMoreActions() {
+    var context = App.rootContext;
+    showMenuX(
+        context,
+        Offset(
+          context.width - 16,
+          context.padding.top,
+        ),
+        [
+          MenuEntry(
+            icon: Icons.copy,
+            text: "Copy Title".tl,
+            onClick: () {
+              Clipboard.setData(ClipboardData(text: comic.title));
+              context.showMessage(message: "Copied".tl);
+            },
+          ),
+          MenuEntry(
+            icon: Icons.copy_rounded,
+            text: "Copy ID".tl,
+            onClick: () {
+              Clipboard.setData(ClipboardData(text: comic.id));
+              context.showMessage(message: "Copied".tl);
+            },
+          ),
+          if (comic.url != null)
+            MenuEntry(
+              icon: Icons.link,
+              text: "Copy URL".tl,
+              onClick: () {
+                Clipboard.setData(ClipboardData(text: comic.url!));
+                context.showMessage(message: "Copied".tl);
+              },
+            ),
+          if (comic.url != null)
+            MenuEntry(
+              icon: Icons.open_in_browser,
+              text: "Open in Browser".tl,
+              onClick: () {
+                launchUrlString(comic.url!);
+              },
+            ),
+        ]);
+  }
+
+  void showComments() {
+    showSideBar(
+      App.rootContext,
+      CommentsPage(
+        data: comic,
+        source: comicSource,
+      ),
+    );
+  }
+
+  void starRating() {
+    if (!comicSource.isLogged) {
+      return;
+    }
+    var rating = 0.0;
+    var isLoading = false;
+    showDialog(
+      context: App.rootContext,
+      builder: (dialogContext) => StatefulBuilder(
+        builder: (context, setState) => SimpleDialog(
+          title: const Text("Rating"),
+          alignment: Alignment.center,
+          children: [
+            SizedBox(
+              height: 100,
+              child: Center(
+                child: SizedBox(
+                  width: 210,
+                  child: Column(
+                    children: [
+                      const SizedBox(
+                        height: 10,
+                      ),
+                      RatingWidget(
+                        padding: 2,
+                        onRatingUpdate: (value) => rating = value,
+                        value: 1,
+                        selectable: true,
+                        size: 40,
+                      ),
+                      const Spacer(),
+                      Button.filled(
+                        isLoading: isLoading,
+                        onPressed: () {
+                          setState(() {
+                            isLoading = true;
+                          });
+                          comicSource.starRatingFunc!(comic.id, rating.round())
+                              .then((value) {
+                            if (value.success) {
+                              App.rootContext
+                                  .showMessage(message: "Success".tl);
+                              Navigator.of(dialogContext).pop();
+                            } else {
+                              App.rootContext
+                                  .showMessage(message: value.errorMessage!);
+                              setState(() {
+                                isLoading = false;
+                              });
+                            }
+                          });
+                        },
+                        child: Text("Submit".tl),
+                      )
+                    ],
+                  ),
+                ),
+              ),
+            )
+          ],
+        ),
+      ),
+    );
+  }
+}

lib/pages/comic_details_page/chapters.dart

@@ -0,0 +1,353 @@
+part of 'comic_page.dart';
+
+class _ComicChapters extends StatelessWidget {
+  const _ComicChapters({this.history, required this.groupedMode});
+
+  final History? history;
+
+  final bool groupedMode;
+
+  @override
+  Widget build(BuildContext context) {
+    return groupedMode
+        ? _GroupedComicChapters(history)
+        : _NormalComicChapters(history);
+  }
+}
+
+class _NormalComicChapters extends StatefulWidget {
+  const _NormalComicChapters(this.history);
+
+  final History? history;
+
+  @override
+  State<_NormalComicChapters> createState() => _NormalComicChaptersState();
+}
+
+class _NormalComicChaptersState extends State<_NormalComicChapters> {
+  late _ComicPageState state;
+
+  bool reverse = false;
+
+  bool showAll = false;
+
+  late History? history;
+
+  late ComicChapters chapters;
+
+  @override
+  void initState() {
+    super.initState();
+    history = widget.history;
+  }
+
+  @override
+  void didChangeDependencies() {
+    state = context.findAncestorStateOfType<_ComicPageState>()!;
+    chapters = state.comic.chapters!;
+    super.didChangeDependencies();
+  }
+
+  @override
+  void didUpdateWidget(covariant _NormalComicChapters oldWidget) {
+    super.didUpdateWidget(oldWidget);
+    setState(() {
+      history = widget.history;
+    });
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return SliverLayoutBuilder(
+      builder: (context, constrains) {
+        int length = chapters.length;
+        bool canShowAll = showAll;
+        if (!showAll) {
+          var width = constrains.crossAxisExtent - 16;
+          var crossItems = width ~/ 200;
+          if (width % 200 != 0) {
+            crossItems += 1;
+          }
+          length = math.min(length, crossItems * 8);
+          if (length == chapters.length) {
+            canShowAll = true;
+          }
+        }
+
+        return SliverMainAxisGroup(
+          slivers: [
+            SliverToBoxAdapter(
+              child: ListTile(
+                title: Text("Chapters".tl),
+                trailing: Tooltip(
+                  message: "Order".tl,
+                  child: IconButton(
+                    icon: Icon(reverse
+                        ? Icons.vertical_align_top
+                        : Icons.vertical_align_bottom_outlined),
+                    onPressed: () {
+                      setState(() {
+                        reverse = !reverse;
+                      });
+                    },
+                  ),
+                ),
+              ),
+            ),
+            SliverGrid(
+              delegate: SliverChildBuilderDelegate(
+                childCount: length,
+                (context, i) {
+                  if (reverse) {
+                    i = chapters.length - i - 1;
+                  }
+                  var key = chapters.ids.elementAt(i);
+                  var value = chapters[key]!;
+                  bool visited = (history?.readEpisode ?? {}).contains(i + 1);
+                  return Padding(
+                    padding: const EdgeInsets.fromLTRB(6, 4, 6, 4),
+                    child: Material(
+                      color: context.colorScheme.surfaceContainer,
+                      borderRadius: BorderRadius.circular(16),
+                      child: InkWell(
+                        onTap: () => state.read(i + 1),
+                        borderRadius: BorderRadius.circular(16),
+                        child: Padding(
+                          padding: const EdgeInsets.symmetric(horizontal: 4),
+                          child: Center(
+                            child: Text(
+                              value,
+                              maxLines: 1,
+                              textAlign: TextAlign.center,
+                              overflow: TextOverflow.ellipsis,
+                              style: TextStyle(
+                                color: visited
+                                    ? context.colorScheme.outline
+                                    : null,
+                              ),
+                            ),
+                          ),
+                        ),
+                      ),
+                    ),
+                  );
+                },
+              ),
+              gridDelegate: const SliverGridDelegateWithFixedHeight(
+                maxCrossAxisExtent: 200,
+                itemHeight: 48,
+              ),
+            ).sliverPadding(const EdgeInsets.symmetric(horizontal: 8)),
+            if (!canShowAll)
+              SliverToBoxAdapter(
+                child: Align(
+                  alignment: Alignment.center,
+                  child: TextButton.icon(
+                    icon: const Icon(Icons.arrow_drop_down),
+                    onPressed: () {
+                      setState(() {
+                        showAll = true;
+                      });
+                    },
+                    label: Text("${"Show all".tl} (${chapters.length})"),
+                  ).paddingTop(12),
+                ),
+              ),
+            const SliverToBoxAdapter(
+              child: Divider(),
+            ),
+          ],
+        );
+      },
+    );
+  }
+}
+
+class _GroupedComicChapters extends StatefulWidget {
+  const _GroupedComicChapters(this.history);
+
+  final History? history;
+
+  @override
+  State<_GroupedComicChapters> createState() => _GroupedComicChaptersState();
+}
+
+class _GroupedComicChaptersState extends State<_GroupedComicChapters>
+    with SingleTickerProviderStateMixin {
+  late _ComicPageState state;
+
+  bool reverse = false;
+
+  bool showAll = false;
+
+  late History? history;
+
+  late ComicChapters chapters;
+
+  late TabController tabController;
+
+  int index = 0;
+
+  @override
+  void initState() {
+    super.initState();
+    history = widget.history;
+  }
+
+  @override
+  void didChangeDependencies() {
+    state = context.findAncestorStateOfType<_ComicPageState>()!;
+    chapters = state.comic.chapters!;
+    tabController = TabController(
+      length: chapters.ids.length,
+      vsync: this,
+    );
+    tabController.addListener(onTabChange);
+    super.didChangeDependencies();
+  }
+
+  void onTabChange() {
+    if (index != tabController.index) {
+      setState(() {
+        index = tabController.index;
+      });
+    }
+  }
+
+  @override
+  void didUpdateWidget(covariant _GroupedComicChapters oldWidget) {
+    super.didUpdateWidget(oldWidget);
+    setState(() {
+      history = widget.history;
+    });
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return SliverLayoutBuilder(
+      builder: (context, constrains) {
+        var group = chapters.getGroupByIndex(index);
+        int length = group.length;
+        bool canShowAll = showAll;
+        if (!showAll) {
+          var width = constrains.crossAxisExtent - 16;
+          var crossItems = width ~/ 200;
+          if (width % 200 != 0) {
+            crossItems += 1;
+          }
+          length = math.min(length, crossItems * 8);
+          if (length == group.length) {
+            canShowAll = true;
+          }
+        }
+
+        return SliverMainAxisGroup(
+          slivers: [
+            SliverToBoxAdapter(
+              child: ListTile(
+                title: Text("Chapters".tl),
+                trailing: Tooltip(
+                  message: "Order".tl,
+                  child: IconButton(
+                    icon: Icon(reverse
+                        ? Icons.vertical_align_top
+                        : Icons.vertical_align_bottom_outlined),
+                    onPressed: () {
+                      setState(() {
+                        reverse = !reverse;
+                      });
+                    },
+                  ),
+                ),
+              ),
+            ),
+            SliverToBoxAdapter(
+              child: AppTabBar(
+                withUnderLine: false,
+                controller: tabController,
+                tabs: chapters.groups.map((e) => Tab(text: e)).toList(),
+              ),
+            ),
+            SliverPadding(padding: const EdgeInsets.only(top: 8)),
+            SliverGrid(
+              delegate: SliverChildBuilderDelegate(
+                childCount: length,
+                (context, i) {
+                  if (reverse) {
+                    i = group.length - i - 1;
+                  }
+                  var key = group.keys.elementAt(i);
+                  var value = group[key]!;
+                  var chapterIndex = 0;
+                  for (var j = 0; j < chapters.groupCount; j++) {
+                    if (j == index) {
+                      chapterIndex += i;
+                      break;
+                    }
+                    chapterIndex += chapters.getGroupByIndex(j).length;
+                  }
+                  String rawIndex = (chapterIndex + 1).toString();
+                  String groupedIndex = "${index + 1}-${i + 1}";
+                  bool visited = false;
+                  if (history != null) {
+                    visited = history!.readEpisode.contains(groupedIndex) ||
+                        history!.readEpisode.contains(rawIndex);
+                  }
+                  return Padding(
+                    padding: const EdgeInsets.fromLTRB(6, 4, 6, 4),
+                    child: Material(
+                      color: context.colorScheme.surfaceContainer,
+                      borderRadius: BorderRadius.circular(16),
+                      child: InkWell(
+                        onTap: () => state.read(chapterIndex + 1),
+                        borderRadius: BorderRadius.circular(16),
+                        child: Padding(
+                          padding: const EdgeInsets.symmetric(horizontal: 4),
+                          child: Center(
+                            child: Text(
+                              value,
+                              maxLines: 1,
+                              textAlign: TextAlign.center,
+                              overflow: TextOverflow.ellipsis,
+                              style: TextStyle(
+                                color: visited
+                                    ? context.colorScheme.outline
+                                    : null,
+                              ),
+                            ),
+                          ),
+                        ),
+                      ),
+                    ),
+                  );
+                },
+              ),
+              gridDelegate: const SliverGridDelegateWithFixedHeight(
+                maxCrossAxisExtent: 200,
+                itemHeight: 48,
+              ),
+            ).sliverPadding(const EdgeInsets.symmetric(horizontal: 8)),
+            if (!canShowAll)
+              SliverToBoxAdapter(
+                child: Align(
+                  alignment: Alignment.center,
+                  child: TextButton.icon(
+                    icon: const Icon(Icons.arrow_drop_down),
+                    onPressed: () {
+                      setState(() {
+                        showAll = true;
+                      });
+                    },
+                    label: Text("${"Show all".tl} (${group.length})"),
+                  ).paddingTop(12),
+                ),
+              ),
+            const SliverToBoxAdapter(
+              child: Divider(),
+            ),
+          ],
+        );
+      },
+    );
+  }
+}

lib/pages/comic_details_page/comic_page.dart

@@ -0,0 +1,943 @@
+import 'dart:collection';
+import 'package:flutter/gestures.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
+import 'package:shimmer_animation/shimmer_animation.dart';
+import 'package:sliver_tools/sliver_tools.dart';
+import 'package:url_launcher/url_launcher_string.dart';
+import 'package:venera/components/components.dart';
+import 'package:venera/foundation/app.dart';
+import 'package:venera/foundation/appdata.dart';
+import 'package:venera/foundation/comic_source/comic_source.dart';
+import 'package:venera/foundation/comic_type.dart';
+import 'package:venera/foundation/consts.dart';
+import 'package:venera/foundation/favorites.dart';
+import 'package:venera/foundation/history.dart';
+import 'package:venera/foundation/image_provider/cached_image.dart';
+import 'package:venera/foundation/local.dart';
+import 'package:venera/foundation/res.dart';
+import 'package:venera/network/download.dart';
+import 'package:venera/pages/category_comics_page.dart';
+import 'package:venera/pages/favorites/favorites_page.dart';
+import 'package:venera/pages/reader/reader.dart';
+import 'package:venera/pages/search_result_page.dart';
+import 'package:venera/utils/app_links.dart';
+import 'package:venera/utils/ext.dart';
+import 'package:venera/utils/io.dart';
+import 'package:venera/utils/tags_translation.dart';
+import 'package:venera/utils/translations.dart';
+import 'dart:math' as math;
+
+part 'comments_page.dart';
+
+part 'chapters.dart';
+
+part 'thumbnails.dart';
+
+part 'favorite.dart';
+
+part 'comments_preview.dart';
+
+part 'actions.dart';
+
+class ComicPage extends StatefulWidget {
+  const ComicPage({
+    super.key,
+    required this.id,
+    required this.sourceKey,
+    this.cover,
+    this.title,
+    this.heroID,
+  });
+
+  final String id;
+
+  final String sourceKey;
+
+  final String? cover;
+
+  final String? title;
+
+  final int? heroID;
+
+  @override
+  State<ComicPage> createState() => _ComicPageState();
+}
+
+class _ComicPageState extends LoadingState<ComicPage, ComicDetails>
+    with _ComicPageActions {
+  @override
+  History? history;
+
+  bool showAppbarTitle = false;
+
+  var scrollController = ScrollController();
+
+  bool isDownloaded = false;
+
+  @override
+  void onReadEnd() {
+    history ??=
+        HistoryManager().find(widget.id, ComicType(widget.sourceKey.hashCode));
+    update();
+  }
+
+  @override
+  Widget buildLoading() {
+    return _ComicPageLoadingPlaceHolder(
+      cover: widget.cover,
+      title: widget.title,
+      sourceKey: widget.sourceKey,
+      cid: widget.id,
+      heroID: widget.heroID,
+    );
+  }
+
+  @override
+  void initState() {
+    scrollController.addListener(onScroll);
+    super.initState();
+  }
+
+  @override
+  void dispose() {
+    scrollController.removeListener(onScroll);
+    super.dispose();
+  }
+
+  @override
+  void update() {
+    setState(() {});
+  }
+
+  @override
+  ComicDetails get comic => data!;
+
+  void onScroll() {
+    if (scrollController.offset > 100) {
+      if (!showAppbarTitle) {
+        setState(() {
+          showAppbarTitle = true;
+        });
+      }
+    } else {
+      if (showAppbarTitle) {
+        setState(() {
+          showAppbarTitle = false;
+        });
+      }
+    }
+  }
+
+  var isFirst = true;
+
+  @override
+  Widget buildContent(BuildContext context, ComicDetails data) {
+    return SmoothCustomScrollView(
+      controller: scrollController,
+      slivers: [
+        ...buildTitle(),
+        buildActions(),
+        buildDescription(),
+        buildInfo(),
+        buildChapters(),
+        buildComments(),
+        buildThumbnails(),
+        buildRecommend(),
+        SliverPadding(padding: EdgeInsets.only(bottom: context.padding.bottom)),
+      ],
+    );
+  }
+
+  @override
+  Future<Res<ComicDetails>> loadData() async {
+    if (widget.sourceKey == 'local') {
+      var localComic = LocalManager().find(widget.id, ComicType.local);
+      if (localComic == null) {
+        return const Res.error('Local comic not found');
+      }
+      var history = HistoryManager().find(widget.id, ComicType.local);
+      if (isFirst) {
+        Future.microtask(() {
+          App.rootContext.to(() {
+            return Reader(
+              type: ComicType.local,
+              cid: widget.id,
+              name: localComic.title,
+              chapters: localComic.chapters,
+              initialPage: history?.page,
+              initialChapter: history?.ep,
+              initialChapterGroup: history?.group,
+              history: history ??
+                  History.fromModel(
+                    model: localComic,
+                    ep: 0,
+                    page: 0,
+                  ),
+              author: localComic.subTitle ?? '',
+              tags: localComic.tags,
+            );
+          });
+          App.mainNavigatorKey!.currentContext!.pop();
+        });
+        isFirst = false;
+      }
+      await Future.delayed(const Duration(milliseconds: 200));
+      return const Res.error('Local comic');
+    }
+    var comicSource = ComicSource.find(widget.sourceKey);
+    if (comicSource == null) {
+      return const Res.error('Comic source not found');
+    }
+    isAddToLocalFav = LocalFavoritesManager().isExist(
+      widget.id,
+      ComicType(widget.sourceKey.hashCode),
+    );
+    history =
+        HistoryManager().find(widget.id, ComicType(widget.sourceKey.hashCode));
+    return comicSource.loadComicInfo!(widget.id);
+  }
+
+  @override
+  Future<void> onDataLoaded() async {
+    isLiked = comic.isLiked ?? false;
+    isFavorite = comic.isFavorite ?? false;
+    if (comic.chapters == null) {
+      isDownloaded = LocalManager().isDownloaded(
+        comic.id,
+        comic.comicType,
+        0,
+      );
+    }
+  }
+
+  Iterable<Widget> buildTitle() sync* {
+    yield SliverAppbar(
+      title: AnimatedOpacity(
+        opacity: showAppbarTitle ? 1.0 : 0.0,
+        duration: const Duration(milliseconds: 200),
+        child: Text(comic.title),
+      ),
+      actions: [
+        IconButton(
+            onPressed: showMoreActions, icon: const Icon(Icons.more_horiz))
+      ],
+    );
+
+    yield const SliverPadding(padding: EdgeInsets.only(top: 8));
+
+    yield SliverLazyToBoxAdapter(
+      child: Row(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          const SizedBox(width: 16),
+          Hero(
+            tag: "cover${widget.heroID}",
+            child: Container(
+              decoration: BoxDecoration(
+                color: context.colorScheme.primaryContainer,
+                borderRadius: BorderRadius.circular(8),
+                boxShadow: [
+                  BoxShadow(
+                    color: context.colorScheme.outlineVariant,
+                    blurRadius: 1,
+                    offset: const Offset(0, 1),
+                  ),
+                ],
+              ),
+              height: 144,
+              width: 144 * 0.72,
+              clipBehavior: Clip.antiAlias,
+              child: AnimatedImage(
+                image: CachedImageProvider(
+                  widget.cover ?? comic.cover,
+                  sourceKey: comic.sourceKey,
+                  cid: comic.id,
+                ),
+                width: double.infinity,
+                height: double.infinity,
+              ),
+            ),
+          ),
+          const SizedBox(width: 16),
+          Expanded(
+            child: Column(
+              crossAxisAlignment: CrossAxisAlignment.start,
+              children: [
+                SelectableText(comic.title, style: ts.s18),
+                if (comic.subTitle != null)
+                  SelectableText(comic.subTitle!, style: ts.s14)
+                      .paddingVertical(4),
+                Text(
+                  (ComicSource.find(comic.sourceKey)?.name) ?? '',
+                  style: ts.s12,
+                ),
+              ],
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+
+  Widget buildActions() {
+    bool isMobile = context.width < changePoint;
+    bool hasHistory = history != null && (history!.ep > 1 || history!.page > 1);
+    return SliverLazyToBoxAdapter(
+      child: Column(
+        children: [
+          ListView(
+            scrollDirection: Axis.horizontal,
+            padding: const EdgeInsets.symmetric(horizontal: 8),
+            children: [
+              if (hasHistory && !isMobile)
+                _ActionButton(
+                  icon: const Icon(Icons.menu_book),
+                  text: 'Continue'.tl,
+                  onPressed: continueRead,
+                  iconColor: context.useTextColor(Colors.yellow),
+                ),
+              if (!isMobile || hasHistory)
+                _ActionButton(
+                  icon: const Icon(Icons.play_circle_outline),
+                  text: 'Start'.tl,
+                  onPressed: read,
+                  iconColor: context.useTextColor(Colors.orange),
+                ),
+              if (!isMobile && !isDownloaded)
+                _ActionButton(
+                  icon: const Icon(Icons.download),
+                  text: 'Download'.tl,
+                  onPressed: download,
+                  iconColor: context.useTextColor(Colors.cyan),
+                ),
+              if (data!.isLiked != null)
+                _ActionButton(
+                  icon: const Icon(Icons.favorite_border),
+                  activeIcon: const Icon(Icons.favorite),
+                  isActive: isLiked,
+                  text: ((data!.likesCount != null)
+                          ? (data!.likesCount! + (isLiked ? 1 : 0))
+                          : (isLiked ? 'Liked'.tl : 'Like'.tl))
+                      .toString(),
+                  isLoading: isLiking,
+                  onPressed: likeOrUnlike,
+                  iconColor: context.useTextColor(Colors.red),
+                ),
+              _ActionButton(
+                icon: const Icon(Icons.bookmark_outline_outlined),
+                activeIcon: const Icon(Icons.bookmark),
+                isActive: isFavorite || isAddToLocalFav,
+                text: 'Favorite'.tl,
+                onPressed: openFavPanel,
+                onLongPressed: quickFavorite,
+                iconColor: context.useTextColor(Colors.purple),
+              ),
+              if (comicSource.commentsLoader != null)
+                _ActionButton(
+                  icon: const Icon(Icons.comment),
+                  text: (comic.commentCount ?? 'Comments'.tl).toString(),
+                  onPressed: showComments,
+                  iconColor: context.useTextColor(Colors.green),
+                ),
+              _ActionButton(
+                icon: const Icon(Icons.share),
+                text: 'Share'.tl,
+                onPressed: share,
+                iconColor: context.useTextColor(Colors.blue),
+              ),
+            ],
+          ).fixHeight(48),
+          if (isMobile)
+            Row(
+              children: [
+                Expanded(
+                  child: FilledButton.tonal(
+                    onPressed: download,
+                    child: Text("Download".tl),
+                  ),
+                ),
+                const SizedBox(width: 16),
+                Expanded(
+                  child: hasHistory
+                      ? FilledButton(
+                          onPressed: continueRead, child: Text("Continue".tl))
+                      : FilledButton(onPressed: read, child: Text("Read".tl)),
+                )
+              ],
+            ).paddingHorizontal(16).paddingVertical(8),
+          if (history != null)
+            Container(
+              margin: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
+              padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 6),
+              decoration: BoxDecoration(
+                color: context.colorScheme.surfaceContainerLow,
+                borderRadius: BorderRadius.circular(24),
+              ),
+              child: Row(
+                mainAxisSize: MainAxisSize.min,
+                children: [
+                  Icon(Icons.history, color: context.useTextColor(Colors.teal)),
+                  const SizedBox(width: 8),
+                  Builder(
+                    builder: (context) {
+                      bool haveChapter = comic.chapters != null;
+                      var page = history!.page;
+                      var ep = history!.ep;
+                      var group = history!.group;
+                      String text;
+                      if (haveChapter) {
+                        var epName = group == null
+                            ? comic.chapters!.titles.elementAt(
+                                math.min(ep - 1, comic.chapters!.length - 1),
+                              )
+                            : comic.chapters!
+                                .getGroupByIndex(group - 1)
+                                .values
+                                .elementAt(ep - 1);
+                        text = "${"Last Reading".tl}: $epName P$page";
+                      } else {
+                        text = "${"Last Reading".tl}: P$page";
+                      }
+                      return Text(text);
+                    },
+                  ),
+                  const SizedBox(width: 4),
+                ],
+              ),
+            ).toAlign(Alignment.centerLeft),
+          const Divider(),
+        ],
+      ).paddingTop(16),
+    );
+  }
+
+  Widget buildDescription() {
+    if (comic.description == null || comic.description!.trim().isEmpty) {
+      return const SliverPadding(padding: EdgeInsets.zero);
+    }
+    return SliverLazyToBoxAdapter(
+      child: Column(
+        children: [
+          ListTile(
+            title: Text("Description".tl),
+          ),
+          Padding(
+            padding: const EdgeInsets.symmetric(horizontal: 16),
+            child: SelectableText(comic.description!).fixWidth(double.infinity),
+          ),
+          const SizedBox(height: 16),
+          const Divider(),
+        ],
+      ),
+    );
+  }
+
+  Widget buildInfo() {
+    if (comic.tags.isEmpty &&
+        comic.uploader == null &&
+        comic.uploadTime == null &&
+        comic.uploadTime == null) {
+      return const SliverPadding(padding: EdgeInsets.zero);
+    }
+
+    int i = 0;
+
+    Widget buildTag({
+      required String text,
+      VoidCallback? onTap,
+      bool isTitle = false,
+    }) {
+      Color color;
+      if (isTitle) {
+        const colors = [
+          Colors.blue,
+          Colors.cyan,
+          Colors.red,
+          Colors.pink,
+          Colors.purple,
+          Colors.indigo,
+          Colors.teal,
+          Colors.green,
+          Colors.lime,
+          Colors.yellow,
+        ];
+        color = context.useBackgroundColor(colors[(i++) % (colors.length)]);
+      } else {
+        color = context.colorScheme.surfaceContainerLow;
+      }
+
+      final borderRadius = BorderRadius.circular(12);
+
+      const padding = EdgeInsets.symmetric(horizontal: 16, vertical: 6);
+
+      if (onTap != null) {
+        return Material(
+          color: color,
+          borderRadius: borderRadius,
+          child: InkWell(
+            borderRadius: borderRadius,
+            onTap: onTap,
+            onLongPress: () {
+              Clipboard.setData(ClipboardData(text: text));
+              context.showMessage(message: "Copied".tl);
+            },
+            onSecondaryTapDown: (details) {
+              showMenuX(context, details.globalPosition, [
+                MenuEntry(
+                  icon: Icons.remove_red_eye,
+                  text: "View".tl,
+                  onClick: onTap,
+                ),
+                MenuEntry(
+                  icon: Icons.copy,
+                  text: "Copy".tl,
+                  onClick: () {
+                    Clipboard.setData(ClipboardData(text: text));
+                    context.showMessage(message: "Copied".tl);
+                  },
+                ),
+              ]);
+            },
+            child: Text(text).padding(padding),
+          ),
+        );
+      } else {
+        return Container(
+          decoration: BoxDecoration(
+            color: color,
+            borderRadius: borderRadius,
+          ),
+          child: Text(text).padding(padding),
+        );
+      }
+    }
+
+    String formatTime(String time) {
+      if (int.tryParse(time) != null) {
+        var t = int.tryParse(time);
+        if (t! > 1000000000000) {
+          return DateTime.fromMillisecondsSinceEpoch(t)
+              .toString()
+              .substring(0, 19);
+        } else {
+          return DateTime.fromMillisecondsSinceEpoch(t * 1000)
+              .toString()
+              .substring(0, 19);
+        }
+      }
+      if (time.contains('T') || time.contains('Z')) {
+        var t = DateTime.parse(time);
+        return t.toString().substring(0, 19);
+      }
+      return time;
+    }
+
+    Widget buildWrap({required List<Widget> children}) {
+      return Wrap(
+        runSpacing: 8,
+        spacing: 8,
+        children: children,
+      ).paddingHorizontal(16).paddingBottom(8);
+    }
+
+    bool enableTranslation =
+        App.locale.languageCode == 'zh' && comicSource.enableTagsTranslate;
+
+    return SliverLazyToBoxAdapter(
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          ListTile(
+            title: Text("Information".tl),
+          ),
+          if (comic.stars != null)
+            Row(
+              children: [
+                StarRating(
+                  value: comic.stars!,
+                  size: 24,
+                  onTap: starRating,
+                ),
+                const SizedBox(width: 8),
+                Text(comic.stars!.toStringAsFixed(2)),
+              ],
+            ).paddingLeft(16).paddingVertical(8),
+          for (var e in comic.tags.entries)
+            buildWrap(
+              children: [
+                if (e.value.isNotEmpty)
+                  buildTag(text: e.key.ts(comicSource.key), isTitle: true),
+                for (var tag in e.value)
+                  buildTag(
+                    text: enableTranslation
+                        ? TagsTranslation.translationTagWithNamespace(
+                            tag,
+                            e.key.toLowerCase(),
+                          )
+                        : tag,
+                    onTap: () => onTapTag(tag, e.key),
+                  ),
+              ],
+            ),
+          if (comic.uploader != null)
+            buildWrap(
+              children: [
+                buildTag(text: 'Uploader'.tl, isTitle: true),
+                buildTag(text: comic.uploader!),
+              ],
+            ),
+          if (comic.uploadTime != null)
+            buildWrap(
+              children: [
+                buildTag(text: 'Upload Time'.tl, isTitle: true),
+                buildTag(text: formatTime(comic.uploadTime!)),
+              ],
+            ),
+          if (comic.updateTime != null)
+            buildWrap(
+              children: [
+                buildTag(text: 'Update Time'.tl, isTitle: true),
+                buildTag(text: formatTime(comic.updateTime!)),
+              ],
+            ),
+          const SizedBox(height: 12),
+          const Divider(),
+        ],
+      ),
+    );
+  }
+
+  Widget buildChapters() {
+    if (comic.chapters == null) {
+      return const SliverPadding(padding: EdgeInsets.zero);
+    }
+    return _ComicChapters(
+      history: history,
+      groupedMode: comic.chapters!.isGrouped,
+    );
+  }
+
+  Widget buildThumbnails() {
+    if (comic.thumbnails == null && comicSource.loadComicThumbnail == null) {
+      return const SliverPadding(padding: EdgeInsets.zero);
+    }
+    return const _ComicThumbnails();
+  }
+
+  Widget buildRecommend() {
+    if (comic.recommend == null || comic.recommend!.isEmpty) {
+      return const SliverPadding(padding: EdgeInsets.zero);
+    }
+    return SliverMainAxisGroup(slivers: [
+      SliverToBoxAdapter(
+        child: ListTile(
+          title: Text("Related".tl),
+        ),
+      ),
+      SliverGridComics(comics: comic.recommend!),
+    ]);
+  }
+
+  Widget buildComments() {
+    if (comic.comments == null || comic.comments!.isEmpty) {
+      return const SliverPadding(padding: EdgeInsets.zero);
+    }
+    return _CommentsPart(
+      comments: comic.comments!,
+      showMore: showComments,
+    );
+  }
+}
+
+class _ActionButton extends StatelessWidget {
+  const _ActionButton({
+    required this.icon,
+    required this.text,
+    required this.onPressed,
+    this.onLongPressed,
+    this.activeIcon,
+    this.isActive,
+    this.isLoading,
+    this.iconColor,
+  });
+
+  final Widget icon;
+
+  final Widget? activeIcon;
+
+  final bool? isActive;
+
+  final String text;
+
+  final void Function() onPressed;
+
+  final bool? isLoading;
+
+  final Color? iconColor;
+
+  final void Function()? onLongPressed;
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      margin: const EdgeInsets.symmetric(horizontal: 4, vertical: 6),
+      decoration: BoxDecoration(
+        borderRadius: BorderRadius.circular(18),
+        border: Border.all(
+          color: context.colorScheme.outlineVariant,
+          width: 0.6,
+        ),
+      ),
+      child: InkWell(
+        onTap: () {
+          if (!(isLoading ?? false)) {
+            onPressed();
+          }
+        },
+        onLongPress: onLongPressed,
+        borderRadius: BorderRadius.circular(18),
+        child: IconTheme.merge(
+          data: IconThemeData(size: 20, color: iconColor),
+          child: Row(
+            mainAxisSize: MainAxisSize.min,
+            children: [
+              if (isLoading ?? false)
+                const SizedBox(
+                  width: 20,
+                  height: 20,
+                  child: CircularProgressIndicator(strokeWidth: 1.8),
+                )
+              else
+                (isActive ?? false) ? (activeIcon ?? icon) : icon,
+              const SizedBox(width: 8),
+              Text(text),
+            ],
+          ).paddingHorizontal(16),
+        ),
+      ),
+    );
+  }
+}
+
+class _SelectDownloadChapter extends StatefulWidget {
+  const _SelectDownloadChapter(this.eps, this.finishSelect, this.downloadedEps);
+
+  final List<String> eps;
+  final void Function(List<int>) finishSelect;
+  final List<int> downloadedEps;
+
+  @override
+  State<_SelectDownloadChapter> createState() => _SelectDownloadChapterState();
+}
+
+class _SelectDownloadChapterState extends State<_SelectDownloadChapter> {
+  List<int> selected = [];
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      appBar: Appbar(
+        title: Text("Download".tl),
+        backgroundColor: context.colorScheme.surfaceContainerLow,
+      ),
+      body: Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          Expanded(
+            child: ListView.builder(
+              padding: EdgeInsets.zero,
+              itemCount: widget.eps.length,
+              itemBuilder: (context, i) {
+                return CheckboxListTile(
+                    title: Text(widget.eps[i]),
+                    value: selected.contains(i) ||
+                        widget.downloadedEps.contains(i),
+                    onChanged: widget.downloadedEps.contains(i)
+                        ? null
+                        : (v) {
+                            setState(() {
+                              if (selected.contains(i)) {
+                                selected.remove(i);
+                              } else {
+                                selected.add(i);
+                              }
+                            });
+                          });
+              },
+            ),
+          ),
+          Container(
+            height: 50,
+            decoration: BoxDecoration(
+              border: Border(
+                top: BorderSide(
+                  color: context.colorScheme.outlineVariant,
+                ),
+              ),
+            ),
+            child: Row(
+              children: [
+                const SizedBox(width: 16),
+                Expanded(
+                  child: TextButton(
+                    onPressed: () {
+                      var res = <int>[];
+                      for (int i = 0; i < widget.eps.length; i++) {
+                        if (!widget.downloadedEps.contains(i)) {
+                          res.add(i);
+                        }
+                      }
+                      widget.finishSelect(res);
+                      context.pop();
+                    },
+                    child: Text("Download All".tl),
+                  ),
+                ),
+                const SizedBox(width: 16),
+                Expanded(
+                  child: FilledButton(
+                    onPressed: selected.isEmpty
+                        ? null
+                        : () {
+                            widget.finishSelect(selected);
+                            context.pop();
+                          },
+                    child: Text("Download Selected".tl),
+                  ),
+                ),
+                const SizedBox(width: 16),
+              ],
+            ),
+          ),
+          SizedBox(height: MediaQuery.of(context).padding.bottom),
+        ],
+      ),
+    );
+  }
+}
+
+class _ComicPageLoadingPlaceHolder extends StatelessWidget {
+  const _ComicPageLoadingPlaceHolder({
+    this.cover,
+    this.title,
+    required this.sourceKey,
+    required this.cid,
+    this.heroID,
+  });
+
+  final String? cover;
+
+  final String? title;
+
+  final String sourceKey;
+
+  final String cid;
+
+  final int? heroID;
+
+  @override
+  Widget build(BuildContext context) {
+    Widget buildContainer(double? width, double? height,
+        {Color? color, double? radius}) {
+      return Container(
+        height: height,
+        width: width,
+        decoration: BoxDecoration(
+          color: color ?? context.colorScheme.surfaceContainerLow,
+          borderRadius: BorderRadius.circular(radius ?? 4),
+        ),
+      );
+    }
+
+    return Shimmer(
+      color: context.isDarkMode ? Colors.grey.shade700 : Colors.white,
+      child: Column(
+        children: [
+          Appbar(title: Text(""), backgroundColor: context.colorScheme.surface),
+          const SizedBox(height: 8),
+          Row(
+            crossAxisAlignment: CrossAxisAlignment.start,
+            children: [
+              const SizedBox(width: 16),
+              buildImage(context),
+              const SizedBox(width: 16),
+              Expanded(
+                child: Column(
+                  crossAxisAlignment: CrossAxisAlignment.start,
+                  children: [
+                    if (title != null)
+                      Text(title ?? "", style: ts.s18)
+                    else
+                      buildContainer(200, 25),
+                    const SizedBox(height: 8),
+                    buildContainer(80, 20),
+                  ],
+                ),
+              ),
+            ],
+          ),
+          const SizedBox(height: 8),
+          if (context.width < changePoint)
+            Row(
+              children: [
+                Expanded(
+                  child: buildContainer(null, 36, radius: 18),
+                ),
+                const SizedBox(width: 16),
+                Expanded(
+                  child: buildContainer(null, 36, radius: 18),
+                ),
+              ],
+            ).paddingHorizontal(16),
+          const Divider(),
+          const SizedBox(height: 8),
+          Center(
+            child: CircularProgressIndicator(
+              strokeWidth: 2.4,
+            ).fixHeight(24).fixWidth(24),
+          )
+        ],
+      ),
+    );
+  }
+
+  Widget buildImage(BuildContext context) {
+    Widget child;
+    if (cover != null) {
+      child = AnimatedImage(
+        image: CachedImageProvider(
+          cover!,
+          sourceKey: sourceKey,
+          cid: cid,
+        ),
+        width: double.infinity,
+        height: double.infinity,
+        fit: BoxFit.cover,
+      );
+    } else {
+      child = const SizedBox();
+    }
+
+    return Hero(
+      tag: "cover$heroID",
+      child: Container(
+        decoration: BoxDecoration(
+          color: context.colorScheme.primaryContainer,
+          borderRadius: BorderRadius.circular(8),
+          boxShadow: [
+            BoxShadow(
+              color: context.colorScheme.outlineVariant,
+              blurRadius: 1,
+              offset: const Offset(0, 1),
+            ),
+          ],
+        ),
+        height: 144,
+        width: 144 * 0.72,
+        clipBehavior: Clip.antiAlias,
+        child: child,
+      ),
+    );
+  }
+}

lib/pages/comic_details_page/comments_page.dart

@@ -1,25 +1,18 @@
-import 'dart:collection';
-
-import 'package:flutter/gestures.dart';
-import 'package:flutter/material.dart';
-import 'package:url_launcher/url_launcher_string.dart';
-import 'package:venera/components/components.dart';
-import 'package:venera/foundation/app.dart';
-import 'package:venera/foundation/comic_source/comic_source.dart';
-import 'package:venera/foundation/image_provider/cached_image.dart';
-import 'package:venera/utils/app_links.dart';
-import 'package:venera/utils/ext.dart';
-import 'package:venera/utils/translations.dart';
+part of 'comic_page.dart';
 
 class CommentsPage extends StatefulWidget {
-  const CommentsPage(
-      {super.key, required this.data, required this.source, this.replyId});
+  const CommentsPage({
+    super.key,
+    required this.data,
+    required this.source,
+    this.replyComment,
+  });
 
   final ComicDetails data;
 
   final ComicSource source;
 
-  final String? replyId;
+  final Comment? replyComment;
 
   @override
   State<CommentsPage> createState() => _CommentsPageState();
@@ -36,13 +29,13 @@ class _CommentsPageState extends State<CommentsPage> {
 
   void firstLoad() async {
     var res = await widget.source.commentsLoader!(
-        widget.data.comicId, widget.data.subId, 1, widget.replyId);
+        widget.data.comicId, widget.data.subId, 1, widget.replyComment?.id);
     if (res.error) {
       setState(() {
         _error = res.errorMessage;
         _loading = false;
       });
-    } else {
+    } else if (mounted) {
       setState(() {
         _comments = res.data;
         _loading = false;
@@ -53,7 +46,11 @@ class _CommentsPageState extends State<CommentsPage> {
 
   void loadMore() async {
     var res = await widget.source.commentsLoader!(
-        widget.data.comicId, widget.data.subId, _page + 1, widget.replyId);
+      widget.data.comicId,
+      widget.data.subId,
+      _page + 1,
+      widget.replyComment?.id,
+    );
     if (res.error) {
       context.showMessage(message: res.errorMessage ?? "Unknown Error");
     } else {
@@ -73,6 +70,7 @@ class _CommentsPageState extends State<CommentsPage> {
       resizeToAvoidBottomInset: false,
       appBar: Appbar(
         title: Text("Comments".tl),
+        style: AppbarStyle.shadow,
       ),
       body: buildBody(context),
     );
@@ -104,8 +102,44 @@ class _CommentsPageState extends State<CommentsPage> {
             child: ListView.builder(
               primary: false,
               padding: EdgeInsets.zero,
-              itemCount: _comments!.length + 1,
+              itemCount: _comments!.length + 2,
               itemBuilder: (context, index) {
+                if (index == 0) {
+                  if (widget.replyComment != null) {
+                    return Column(
+                      children: [
+                        _CommentTile(
+                          comment: widget.replyComment!,
+                          source: widget.source,
+                          comic: widget.data,
+                          showAvatar: showAvatar,
+                          showActions: false,
+                        ),
+                        const SizedBox(height: 8),
+                        Container(
+                          alignment: Alignment.centerLeft,
+                          padding: const EdgeInsets.all(16),
+                          decoration: BoxDecoration(
+                            border: Border(
+                              top: BorderSide(
+                                color: context.colorScheme.outlineVariant,
+                                width: 0.6,
+                              ),
+                            ),
+                          ),
+                          child: Text(
+                            "Replies".tl,
+                            style: ts.s18,
+                          ),
+                        ),
+                      ],
+                    );
+                  } else {
+                    return const SizedBox();
+                  }
+                }
+                index--;
+
                 if (index == _comments!.length) {
                   if (_page < (maxPage ?? _page + 1)) {
                     loadMore();
@@ -140,6 +174,12 @@ class _CommentsPageState extends State<CommentsPage> {
       padding: const EdgeInsets.symmetric(vertical: 8, horizontal: 8),
       decoration: BoxDecoration(
         color: Theme.of(context).colorScheme.surface,
+        border: Border(
+          top: BorderSide(
+            color: context.colorScheme.outlineVariant,
+            width: 0.6,
+          ),
+        ),
       ),
       child: Material(
         color: context.colorScheme.surfaceContainer,
@@ -159,7 +199,7 @@ class _CommentsPageState extends State<CommentsPage> {
             ),
             if (sending)
               const Padding(
-                padding: EdgeInsets.all(8.5),
+                padding: EdgeInsets.all(8),
                 child: SizedBox(
                   width: 24,
                   height: 24,
@@ -181,7 +221,7 @@ class _CommentsPageState extends State<CommentsPage> {
                       widget.data.comicId,
                       widget.data.subId,
                       controller.text,
-                      widget.replyId);
+                      widget.replyComment?.id);
                   if (!b.error) {
                     controller.text = "";
                     setState(() {
@@ -204,7 +244,7 @@ class _CommentsPageState extends State<CommentsPage> {
                 ),
               )
           ],
-        ).paddingVertical(2).paddingLeft(16).paddingRight(4),
+        ).paddingLeft(16).paddingRight(4),
       ),
     );
   }
@@ -216,6 +256,7 @@ class _CommentTile extends StatefulWidget {
     required this.source,
     required this.comic,
     required this.showAvatar,
+    this.showActions = true,
   });
 
   final Comment comment;
@@ -226,6 +267,8 @@ class _CommentTile extends StatefulWidget {
 
   final bool showAvatar;
 
+  final bool showActions;
+
   @override
   State<_CommentTile> createState() => _CommentTileState();
 }
@@ -242,24 +285,17 @@ class _CommentTileState extends State<_CommentTile> {
   @override
   Widget build(BuildContext context) {
     return Container(
-      decoration: BoxDecoration(
-        border: Border(
-          bottom: BorderSide(
-            color: Theme.of(context).colorScheme.outlineVariant,
-            width: 0.6,
-          ),
-        ),
-      ),
+      padding: const EdgeInsets.symmetric(vertical: 8, horizontal: 16),
       child: Row(
         crossAxisAlignment: CrossAxisAlignment.start,
         children: [
           if (widget.showAvatar)
             Container(
-              width: 40,
-              height: 40,
+              width: 36,
+              height: 36,
               clipBehavior: Clip.antiAlias,
               decoration: BoxDecoration(
-                  borderRadius: BorderRadius.circular(20),
+                  borderRadius: BorderRadius.circular(18),
                   color: Theme.of(context).colorScheme.secondaryContainer),
               child: widget.comment.avatar == null
                   ? null
@@ -269,7 +305,7 @@ class _CommentTileState extends State<_CommentTile> {
                         sourceKey: widget.source.key,
                       ),
                     ),
-            ).paddingRight(12),
+            ).paddingRight(8),
           Expanded(
             child: Column(
               crossAxisAlignment: CrossAxisAlignment.start,
@@ -287,11 +323,14 @@ class _CommentTileState extends State<_CommentTile> {
             ),
           )
         ],
-      ).paddingAll(16),
+      ),
     );
   }
 
   Widget buildActions() {
+    if (!widget.showActions) {
+      return const SizedBox();
+    }
     if (widget.comment.score == null && widget.comment.replyCount == null) {
       return const SizedBox();
     }
@@ -330,7 +369,7 @@ class _CommentTileState extends State<_CommentTile> {
             CommentsPage(
               data: widget.comic,
               source: widget.source,
-              replyId: widget.comment.id,
+              replyComment: widget.comment,
             ),
             showBarrier: false,
           );
@@ -510,7 +549,7 @@ class _CommentContent extends StatelessWidget {
     if (!text.contains('<') && !text.contains('http')) {
       return SelectableText(text);
     } else {
-      return _RichCommentContent(text: text);
+      return RichCommentContent(text: text);
     }
   }
 }
@@ -529,6 +568,7 @@ class _Tag {
       'u' => style.underline,
       's' => style.lineThrough,
       'a' => style.withColor(context.colorScheme.primary),
+      'strong' => style.bold,
       'span' => () {
           if (attributes.containsKey('style')) {
             var s = attributes['style']!;
@@ -595,7 +635,7 @@ class _Tag {
   static void handleLink(String link) async {
     if (link.isURL) {
       if (await handleAppLink(Uri.parse(link))) {
-        App.rootContext.pop();
+        Navigator.of(App.rootContext).maybePop();
       } else {
         launchUrlString(link);
       }
@@ -610,22 +650,32 @@ class _CommentImage {
   const _CommentImage(this.url, this.link);
 }
 
-class _RichCommentContent extends StatefulWidget {
-  const _RichCommentContent({required this.text});
+class RichCommentContent extends StatefulWidget {
+  const RichCommentContent({
+    super.key,
+    required this.text,
+    this.showImages = true,
+  });
 
   final String text;
 
+  final bool showImages;
+
   @override
-  State<_RichCommentContent> createState() => _RichCommentContentState();
+  State<RichCommentContent> createState() => _RichCommentContentState();
 }
 
-class _RichCommentContentState extends State<_RichCommentContent> {
+class _RichCommentContentState extends State<RichCommentContent> {
   var textSpan = <InlineSpan>[];
   var images = <_CommentImage>[];
+  bool isRendered = false;
 
   @override
   void didChangeDependencies() {
-    render();
+    if (!isRendered) {
+      render();
+      isRendered = true;
+    }
     super.didChangeDependencies();
   }
 
@@ -639,6 +689,8 @@ class _RichCommentContentState extends State<_RichCommentContent> {
     int i = 0;
     var buffer = StringBuffer();
     var text = widget.text;
+    text = text.replaceAll('\r\n', '\n');
+    text = text.replaceAll('&amp;', '&');
 
     void writeBuffer() {
       if (buffer.isEmpty) return;
@@ -668,7 +720,17 @@ class _RichCommentContentState extends State<_RichCommentContent> {
                 attributes[attrSplits[0]] = attrSplits[1].replaceAll('"', '');
               }
             }
-            const acceptedTags = ['img', 'a', 'b', 'i', 'u', 's', 'br', 'span'];
+            const acceptedTags = [
+              'img',
+              'a',
+              'b',
+              'i',
+              'u',
+              's',
+              'br',
+              'span',
+              'strong'
+            ];
             if (acceptedTags.contains(tagName)) {
               writeBuffer();
               if (tagName == 'img') {
@@ -752,7 +814,7 @@ class _RichCommentContentState extends State<_RichCommentContent> {
         children: textSpan,
       ),
     );
-    if (images.isNotEmpty) {
+    if (images.isNotEmpty && widget.showImages) {
       content = Column(
         mainAxisSize: MainAxisSize.min,
         children: [