Release aarch64 Linux binaries (#118)

* Fix missing translations in translator popup

* Disable annotator for PDFs for now, closes #115

* Fix triangle in shadow of popup making it darker

.github/ISSUE_TEMPLATE/report-bug.md

@@ -1,7 +1,7 @@
 ---
 name: Report a bug
 about: Report a bug or a functional regression
-title: 'Ex: In DarkMode, a blank square appears in bottom right corner while scrolling'
+title: 'Example: In DarkMode, a blank square appears in bottom right corner while scrolling'
 labels: ['type: bug']
 assignees: ''
 ---
@@ -30,9 +30,15 @@ The blank square should be transparent (invisible)
 
 ## Technical inputs
 
+Operating System:
+
+Readest Version:
+
 **Example:**
 
 ```
-- We are displaying custom scrollbars that disappear when the user is not scrolling. See ScrollWrapper.
-- Probably fixable with CSS
+Operating System: macOS 14.3.1
+Readest Version: 0.9.0
+We are displaying custom scrollbars that disappear when the user is not scrolling. See ScrollWrapper.
+Probably fixable with CSS
 ```

.github/workflows/release.yml

@@ -12,7 +12,9 @@ jobs:
     runs-on: ubuntu-latest
     outputs:
       release_id: ${{ steps.get-release.outputs.release_id }}
+      release_tag: ${{ steps.get-release.outputs.release_tag }}
       release_note: ${{ steps.get-release-notes.outputs.release_note }}
+      release_version: ${{ steps.get-release-notes.outputs.release_version }}
 
     steps:
       - uses: actions/checkout@v4
@@ -30,6 +32,7 @@ jobs:
               repo: context.repo.repo,
             })
             core.setOutput('release_id', data.id);
+            core.setOutput('release_tag', data.tag_name);
       - name: get release notes
         id: get-release-notes
         uses: actions/github-script@v7
@@ -42,6 +45,7 @@ jobs:
             const notes = releaseNotes.notes || [];
             const releaseNote = notes.map((note, index) => `${index + 1}. ${note}`).join(' ');
             console.log('Formatted release note:', releaseNote);
+            core.setOutput('release_version', version);
             core.setOutput('release_note', releaseNote);
 
   build-tauri:
@@ -55,6 +59,9 @@ jobs:
           - os: ubuntu-22.04
             arch: x86_64
             rust_target: x86_64-unknown-linux-gnu
+          - os: ubuntu-22.04
+            arch: aarch64
+            rust_target: aarch64-unknown-linux-gnu
           - os: macos-latest
             arch: aarch64
             rust_target: x86_64-apple-darwin,aarch64-apple-darwin
@@ -138,6 +145,34 @@ jobs:
           releaseBody: ${{ needs.get-release.outputs.release_note }}
           args: ${{ matrix.config.args || '' }}
 
+      - name: upload portable binaries (Windows only)
+        if: matrix.config.os == 'windows-latest'
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        shell: bash
+        run: |
+          echo "Uploading Portable Binaries"
+          arch=${{ matrix.config.arch }}
+          version=${{ needs.get-release.outputs.release_version }}
+
+          if [ "$arch" = "x86_64" ]; then
+            bin_file="Readest_${version}_x64-portable.exe"
+          elif [ "$arch" = "aarch64" ]; then
+            bin_file="Readest_${version}_arm64-portable.exe"
+          else
+            echo "Unknown architecture: $arch"
+            exit 1
+          fi
+
+          exe_file="apps/readest-app/src-tauri/target/${{ matrix.config.rust_target }}/release/readest.exe"
+          # Browsers on Windows won't download zip files that contain exe files
+          # so upload the exe files instead. This is totally stupid.
+          # powershell.exe -Command "Compress-Archive -Path $exe_file -DestinationPath $bin_file -Force"
+          cp $exe_file $bin_file
+
+          echo "Uploading $bin_file to GitHub release"
+          gh release upload ${{ needs.get-release.outputs.release_tag }} $bin_file --clobber
+
   update-release:
     permissions:
       contents: write
@@ -153,11 +188,12 @@ jobs:
           release_note: ${{ needs.get-release.outputs.release_note }}
         with:
           script: |
+            const body = `## Release Highlight\n${process.env.release_note}`;
             github.rest.repos.updateRelease({
               owner: context.repo.owner,
               repo: context.repo.repo,
               release_id: process.env.release_id,
-              body: process.env.release_note,
+              body: body,
               draft: false,
               prerelease: false
             })

apps/readest-app/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@readest/readest-app",
-  "version": "0.8.9",
+  "version": "0.9.1",
   "private": true,
   "scripts": {
     "dev": "dotenv -e .env.tauri -- next dev",
@@ -35,6 +35,7 @@
     "@supabase/supabase-js": "^2.47.7",
     "@tauri-apps/api": "2.1.1",
     "@tauri-apps/plugin-cli": "^2.2.0",
+    "@tauri-apps/plugin-deep-link": "^2.2.0",
     "@tauri-apps/plugin-dialog": "^2.2.0",
     "@tauri-apps/plugin-fs": "^2.2.0",
     "@tauri-apps/plugin-http": "^2.2.0",

apps/readest-app/public/locales/de/translation.json

@@ -1,7 +1,9 @@
 {
+  "(detected)": "(erkannt)",
   "About Readest": "Über Readest",
   "Add your notes here...": "Fügen Sie hier Ihre Notizen hinzu...",
   "Animation": "Animation",
+  "Apply": "Anwenden",
   "Are you sure to delete the selected books?": "Möchten Sie die ausgewählten Bücher wirklich löschen?",
   "Auto Mode": "Automatischer Modus",
   "Behavior": "Verhalten",
@@ -42,6 +44,7 @@
   "Grass": "Grasgrün",
   "Gray": "Grau",
   "Gruvbox": "Gruvbox",
+  "Horizontal Direction": "Horizontale Richtung",
   "Hyphenation": "Silbentrennung",
   "Identifier:": "Kennung:",
   "Import Books": "Bücher importieren",
@@ -70,6 +73,7 @@
   "Notes": "Notizen",
   "Open": "Öffnen",
   "Open Book": "Buch öffnen",
+  "Original Text": "Originaltext",
   "Override Publisher Font": "Verleger-Schriftart überschreiben",
   "Page": "Seite",
   "Paging Animation": "Blätter-Animation",
@@ -102,11 +106,14 @@
   "System Fonts": "System-Schriftarten",
   "Theme Color": "Themenfarbe",
   "Theme Mode": "Themenmodus",
+  "Translated Text": "Übersetzter Text",
   "Unknown": "Unbekannt",
   "Untitled": "Ohne Titel",
   "Updated:": "Aktualisiert:",
   "User avatar": "Benutzer-Avatar",
   "Version {{version}}": "Version {{version}}",
+  "Vertical Direction": "Vertikale Richtung",
   "Welcome to your library. You can import your books here and read them anytime.": "Willkommen in Ihrer Bibliothek. Sie können hier Ihre Bücher importieren und jederzeit lesen.",
+  "Writing Mode": "Schreibmodus",
   "Your Library": "Ihre Bibliothek"
 }

apps/readest-app/public/locales/es/translation.json

@@ -1,7 +1,9 @@
 {
+  "(detected)": "(detectado)",
   "About Readest": "Acerca de Readest",
   "Add your notes here...": "Añade tus notas aquí...",
   "Animation": "Animación",
+  "Apply": "Aplicar",
   "Are you sure to delete the selected books?": "¿Estás seguro de eliminar los libros seleccionados?",
   "Auto Mode": "Modo automático",
   "Behavior": "Comportamiento",
@@ -42,6 +44,7 @@
   "Grass": "Hierba",
   "Gray": "Gris",
   "Gruvbox": "Gruvbox",
+  "Horizontal Direction": "Dirección horizontal",
   "Hyphenation": "Guionización",
   "Identifier:": "Identificador:",
   "Import Books": "Importar libros",
@@ -70,6 +73,7 @@
   "Notes": "Notas",
   "Open": "Abrir",
   "Open Book": "Abrir libro",
+  "Original Text": "Texto original",
   "Override Publisher Font": "Sobrescribir fuente del editor",
   "Page": "Página",
   "Paging Animation": "Animación de paginación",
@@ -102,11 +106,14 @@
   "System Fonts": "Fuentes del sistema",
   "Theme Color": "Color del tema",
   "Theme Mode": "Modo del tema",
+  "Translated Text": "Texto traducido",
   "Unknown": "Desconocido",
   "Untitled": "Sin título",
   "Updated:": "Actualizado:",
   "User avatar": "Avatar del usuario",
   "Version {{version}}": "Versión {{version}}",
+  "Vertical Direction": "Dirección vertical",
   "Welcome to your library. You can import your books here and read them anytime.": "Bienvenido a tu biblioteca. Puedes importar tus libros aquí y leerlos en cualquier momento.",
+  "Writing Mode": "Modo de escritura",
   "Your Library": "Tu biblioteca"
 }

apps/readest-app/public/locales/fr/translation.json

@@ -1,7 +1,9 @@
 {
+  "(detected)": "(détecté)",
   "About Readest": "À propos de Readest",
   "Add your notes here...": "Ajoutez vos notes ici...",
   "Animation": "Animation",
+  "Apply": "Appliquer",
   "Are you sure to delete the selected books?": "Êtes-vous sûr de vouloir supprimer les livres sélectionnés ?",
   "Auto Mode": "Mode automatique",
   "Behavior": "Comportement",
@@ -42,6 +44,7 @@
   "Grass": "Herbe",
   "Gray": "Gris",
   "Gruvbox": "Gruvbox",
+  "Horizontal Direction": "Direction horizontale",
   "Hyphenation": "Césure",
   "Identifier:": "Identifiant :",
   "Import Books": "Importer des livres",
@@ -70,6 +73,7 @@
   "Notes": "Notes",
   "Open": "Ouvrir",
   "Open Book": "Ouvrir le livre",
+  "Original Text": "Texte original",
   "Override Publisher Font": "Remplacer la police de l'éditeur",
   "Page": "Page",
   "Paging Animation": "Animation de page",
@@ -102,11 +106,14 @@
   "System Fonts": "Polices système",
   "Theme Color": "Couleur du thème",
   "Theme Mode": "Mode du thème",
+  "Translated Text": "Texte traduit",
   "Unknown": "Inconnu",
   "Untitled": "Sans titre",
   "Updated:": "Mis à jour :",
   "User avatar": "Avatar de l'utilisateur",
   "Version {{version}}": "Version {{version}}",
+  "Vertical Direction": "Direction verticale",
   "Welcome to your library. You can import your books here and read them anytime.": "Bienvenue dans votre bibliothèque. Vous pouvez importer vos livres ici et les lire à tout moment.",
+  "Writing Mode": "Mode écriture",
   "Your Library": "Votre bibliothèque"
 }

apps/readest-app/public/locales/id/translation.json

@@ -1,7 +1,9 @@
 {
+  "(detected)": "(terdeteksi)",
   "About Readest": "Tentang Readest",
   "Add your notes here...": "Tambahkan catatan Anda di sini...",
   "Animation": "Animasi",
+  "Apply": "Terapkan",
   "Are you sure to delete the selected books?": "Apakah Anda yakin ingin menghapus buku yang dipilih?",
   "Auto Mode": "Mode Otomatis",
   "Behavior": "Perilaku",
@@ -42,6 +44,7 @@
   "Grass": "Rumput",
   "Gray": "Abu-abu",
   "Gruvbox": "Gruvbox",
+  "Horizontal Direction": "Arah Horizontal",
   "Hyphenation": "Pemenggalan Kata",
   "Identifier:": "Pengenal:",
   "Import Books": "Impor Buku",
@@ -70,6 +73,7 @@
   "Notes": "Catatan",
   "Open": "Buka",
   "Open Book": "Buka Buku",
+  "Original Text": "Teks Asli",
   "Override Publisher Font": "Ganti Font Penerbit",
   "Page": "Halaman",
   "Paging Animation": "Animasi Halaman",
@@ -102,11 +106,14 @@
   "System Fonts": "Font Sistem",
   "Theme Color": "Warna Tema",
   "Theme Mode": "Mode Tema",
+  "Translated Text": "Teks Terjemahan",
   "Unknown": "Tidak Diketahui",
   "Untitled": "Tanpa Judul",
   "Updated:": "Diperbarui:",
   "User avatar": "Avatar Pengguna",
   "Version {{version}}": "Versi {{version}}",
+  "Vertical Direction": "Arah Vertikal",
   "Welcome to your library. You can import your books here and read them anytime.": "Selamat datang di perpustakaan Anda. Anda dapat mengimpor buku-buku Anda di sini dan membacanya kapan saja.",
+  "Writing Mode": "Mode Menulis",
   "Your Library": "Perpustakaan Anda"
 }

apps/readest-app/public/locales/it/translation.json

@@ -1,7 +1,9 @@
 {
+  "(detected)": "(rilevato)",
   "About Readest": "Informazioni su Readest",
   "Add your notes here...": "Aggiungi qui le tue note...",
   "Animation": "Animazione",
+  "Apply": "Applica",
   "Are you sure to delete the selected books?": "Sei sicuro di voler eliminare i libri selezionati?",
   "Auto Mode": "Modalità automatica",
   "Behavior": "Comportamento",
@@ -42,6 +44,7 @@
   "Grass": "Erba",
   "Gray": "Grigio",
   "Gruvbox": "Gruvbox",
+  "Horizontal Direction": "Direzione orizzontale",
   "Hyphenation": "Sillabazione",
   "Identifier:": "Identificatore:",
   "Import Books": "Importa libri",
@@ -70,6 +73,7 @@
   "Notes": "Note",
   "Open": "Apri",
   "Open Book": "Apri libro",
+  "Original Text": "Testo originale",
   "Override Publisher Font": "Sostituisci font editore",
   "Page": "Pagina",
   "Paging Animation": "Animazione cambio pagina",
@@ -102,11 +106,14 @@
   "System Fonts": "Font di sistema",
   "Theme Color": "Colore tema",
   "Theme Mode": "Modalità tema",
+  "Translated Text": "Testo tradotto",
   "Unknown": "Sconosciuto",
   "Untitled": "Senza titolo",
   "Updated:": "Aggiornato:",
   "User avatar": "Avatar utente",
   "Version {{version}}": "Versione {{version}}",
+  "Vertical Direction": "Direzione verticale",
   "Welcome to your library. You can import your books here and read them anytime.": "Benvenuto nella tua biblioteca. Puoi importare i tuoi libri qui e leggerli in qualsiasi momento.",
+  "Writing Mode": "Modalità scrittura",
   "Your Library": "La tua biblioteca"
 }

apps/readest-app/public/locales/ja/translation.json

@@ -1,7 +1,9 @@
 {
+  "(detected)": "(検出)",
   "About Readest": "Readestについて",
   "Add your notes here...": "ここにメモを追加...",
   "Animation": "アニメーション",
+  "Apply": "適用",
   "Are you sure to delete the selected books?": "選択した書籍を削除してもよろしいですか？",
   "Auto Mode": "自動モード",
   "Behavior": "動作",
@@ -42,6 +44,7 @@
   "Grass": "グリーン",
   "Gray": "グレー",
   "Gruvbox": "グルーブボックス",
+  "Horizontal Direction": "横書",
   "Hyphenation": "ハイフネーション",
   "Identifier:": "識別子：",
   "Import Books": "書籍をインポート",
@@ -70,6 +73,7 @@
   "Notes": "メモ",
   "Open": "開く",
   "Open Book": "書籍を開く",
+  "Original Text": "原文",
   "Override Publisher Font": "出版社フォントを上書き",
   "Page": "ページ",
   "Paging Animation": "ページめくりアニメーション",
@@ -102,11 +106,14 @@
   "System Fonts": "システムフォント",
   "Theme Color": "テーマカラー",
   "Theme Mode": "テーマモード",
+  "Translated Text": "翻訳されたテキスト",
   "Unknown": "不明",
   "Untitled": "無題",
   "Updated:": "更新日：",
   "User avatar": "ユーザーアバター",
   "Version {{version}}": "バージョン {{version}}",
+  "Vertical Direction": "縦書",
   "Welcome to your library. You can import your books here and read them anytime.": "ライブラリーへようこそ。ここに書籍をインポートして、いつでも読むことができます。",
+  "Writing Mode": "書き込みモード",
   "Your Library": "ライブラリー"
 }

apps/readest-app/public/locales/ko/translation.json

@@ -1,7 +1,9 @@
 {
+  "(detected)": "(감지됨)",
   "About Readest": "Readest 정보",
   "Add your notes here...": "여기에 메모를 추가하세요...",
   "Animation": "애니메이션",
+  "Apply": "적용",
   "Are you sure to delete the selected books?": "선택한 책을 삭제하시겠습니까?",
   "Auto Mode": "자동 모드",
   "Behavior": "동작",
@@ -42,6 +44,7 @@
   "Grass": "잔디색",
   "Gray": "회색",
   "Gruvbox": "그러브박스",
+  "Horizontal Direction": "수평 방향",
   "Hyphenation": "하이픈 넣기",
   "Identifier:": "식별자:",
   "Import Books": "책 가져오기",
@@ -70,6 +73,7 @@
   "Notes": "메모",
   "Open": "열기",
   "Open Book": "책 열기",
+  "Original Text": "원본 텍스트",
   "Override Publisher Font": "출판사 글꼴 재정의",
   "Page": "페이지",
   "Paging Animation": "페이지 넘김 애니메이션",
@@ -102,11 +106,14 @@
   "System Fonts": "시스템 글꼴",
   "Theme Color": "테마 색상",
   "Theme Mode": "테마 모드",
+  "Translated Text": "번역된 텍스트",
   "Unknown": "알 수 없음",
   "Untitled": "제목 없음",
   "Updated:": "업데이트일:",
   "User avatar": "사용자 아바타",
   "Version {{version}}": "버전 {{version}}",
+  "Vertical Direction": "수직 방향",
   "Welcome to your library. You can import your books here and read them anytime.": "내 서재에 오신 것을 환영합니다. 여기에서 책을 가져와 언제든지 읽을 수 있습니다.",
+  "Writing Mode": "글쓰기 모드",
   "Your Library": "내 서재"
 }

apps/readest-app/public/locales/pt/translation.json

@@ -1,7 +1,9 @@
 {
+  "(detected)": "(detectado)",
   "About Readest": "Sobre o Readest",
   "Add your notes here...": "Adicione suas notas aqui...",
   "Animation": "Animação",
+  "Apply": "Aplicar",
   "Are you sure to delete the selected books?": "Tem certeza de que deseja excluir os livros selecionados?",
   "Auto Mode": "Modo Automático",
   "Behavior": "Comportamento",
@@ -42,6 +44,7 @@
   "Grass": "Grama",
   "Gray": "Cinza",
   "Gruvbox": "Gruvbox",
+  "Horizontal Direction": "Direção Horizontal",
   "Hyphenation": "Hifenização",
   "Identifier:": "Identificador:",
   "Import Books": "Importar Livros",
@@ -70,6 +73,7 @@
   "Notes": "Notas",
   "Open": "Abrir",
   "Open Book": "Abrir Livro",
+  "Original Text": "Texto Original",
   "Override Publisher Font": "Substituir Fonte do Editor",
   "Page": "Página",
   "Paging Animation": "Animação de Página",
@@ -102,11 +106,14 @@
   "System Fonts": "Fontes do Sistema",
   "Theme Color": "Cor do Tema",
   "Theme Mode": "Modo do Tema",
+  "Translated Text": "Texto Traduzido",
   "Unknown": "Desconhecido",
   "Untitled": "Sem Título",
   "Updated:": "Atualizado:",
   "User avatar": "Avatar do usuário",
   "Version {{version}}": "Versão {{version}}",
+  "Vertical Direction": "Direção Vertical",
   "Welcome to your library. You can import your books here and read them anytime.": "Bem-vindo à sua biblioteca. Você pode importar seus livros aqui e lê-los a qualquer momento.",
+  "Writing Mode": "Modo de Escrita",
   "Your Library": "Sua Biblioteca"
 }

apps/readest-app/public/locales/ru/translation.json

@@ -1,7 +1,9 @@
 {
+  "(detected)": "(обнаружено)",
   "About Readest": "О Readest",
   "Add your notes here...": "Добавьте свои заметки здесь...",
   "Animation": "Анимация",
+  "Apply": "Применить",
   "Are you sure to delete the selected books?": "Вы уверены, что хотите удалить выбранные книги?",
   "Auto Mode": "Автоматический режим",
   "Behavior": "Поведение",
@@ -42,6 +44,7 @@
   "Grass": "Трава",
   "Gray": "Серый",
   "Gruvbox": "Gruvbox",
+  "Horizontal Direction": "Горизонтальное направление",
   "Hyphenation": "Перенос слов",
   "Identifier:": "Идентификатор:",
   "Import Books": "Импорт книг",
@@ -70,6 +73,7 @@
   "Notes": "Заметки",
   "Open": "Открыть",
   "Open Book": "Открыть книгу",
+  "Original Text": "Оригинальный текст",
   "Override Publisher Font": "Переопределить шрифт издателя",
   "Page": "Страница",
   "Paging Animation": "Анимация перелистывания",
@@ -102,11 +106,14 @@
   "System Fonts": "Системные шрифты",
   "Theme Color": "Цвет темы",
   "Theme Mode": "Режим темы",
+  "Translated Text": "Переведённый текст",
   "Unknown": "Неизвестно",
   "Untitled": "Без названия",
   "Updated:": "Обновлено:",
   "User avatar": "Аватар пользователя",
   "Version {{version}}": "Версия {{version}}",
+  "Vertical Direction": "Вертикальное направление",
   "Welcome to your library. You can import your books here and read them anytime.": "Добро пожаловать в вашу библиотеку. Вы можете импортировать сюда книги и читать их в любое время.",
+  "Writing Mode": "Режим записи",
   "Your Library": "Ваша библиотека"
 }

apps/readest-app/public/locales/tr/translation.json

@@ -1,7 +1,9 @@
 {
+  "(detected)": "(algılandı)",
   "About Readest": "Readest Hakkında",
   "Add your notes here...": "Notlarınızı buraya ekleyin...",
   "Animation": "Animasyon",
+  "Apply": "Uygula",
   "Are you sure to delete the selected books?": "Seçili kitapları silmek istediğinizden emin misiniz?",
   "Auto Mode": "Otomatik Mod",
   "Behavior": "Davranış",
@@ -42,6 +44,7 @@
   "Grass": "Çimen",
   "Gray": "Gri",
   "Gruvbox": "Gruvbox",
+  "Horizontal Direction": "Yatay Yön",
   "Hyphenation": "Heceleme",
   "Identifier:": "Tanımlayıcı:",
   "Import Books": "Kitapları İçe Aktar",
@@ -70,6 +73,7 @@
   "Notes": "Notlar",
   "Open": "Aç",
   "Open Book": "Kitabı Aç",
+  "Original Text": "Orijinal Metin",
   "Override Publisher Font": "Yayıncı Yazı Tipini Geçersiz Kıl",
   "Page": "Sayfa",
   "Paging Animation": "Sayfa Çevirme Animasyonu",
@@ -102,11 +106,14 @@
   "System Fonts": "Sistem Yazı Tipleri",
   "Theme Color": "Tema Rengi",
   "Theme Mode": "Tema Modu",
+  "Translated Text": "Çevrilen Metin",
   "Unknown": "Bilinmiyor",
   "Untitled": "Başlıksız",
   "Updated:": "Güncellendi:",
   "User avatar": "Kullanıcı avatarı",
   "Version {{version}}": "Sürüm {{version}}",
+  "Vertical Direction": "Dikey Yön",
   "Welcome to your library. You can import your books here and read them anytime.": "Kütüphanenize hoş geldiniz. Buradan kitaplarınızı içe aktarabilir ve istediğiniz zaman okuyabilirsiniz.",
+  "Writing Mode": "Yazma Modu",
   "Your Library": "Kütüphaneniz"
 }

apps/readest-app/public/locales/vi/translation.json

@@ -1,7 +1,9 @@
 {
+  "(detected)": "(đã phát hiện)",
   "About Readest": "Về Readest",
   "Add your notes here...": "Thêm ghi chú của bạn vào đây...",
   "Animation": "Hiệu ứng động",
+  "Apply": "Áp dụng",
   "Are you sure to delete the selected books?": "Bạn có chắc chắn muốn xóa các sách đã chọn?",
   "Auto Mode": "Chế độ tự động",
   "Behavior": "Hành vi",
@@ -42,6 +44,7 @@
   "Grass": "Xanh cỏ",
   "Gray": "Xám",
   "Gruvbox": "Gruvbox",
+  "Horizontal Direction": "Hướng ngang",
   "Hyphenation": "Gạch nối từ",
   "Identifier:": "Định danh:",
   "Import Books": "Nhập sách",
@@ -70,6 +73,7 @@
   "Notes": "Ghi chú",
   "Open": "Mở",
   "Open Book": "Mở sách",
+  "Original Text": "Văn bản gốc",
   "Override Publisher Font": "Ghi đè phông chữ của nhà xuất bản",
   "Page": "Trang",
   "Paging Animation": "Hiệu ứng lật trang",
@@ -102,11 +106,14 @@
   "System Fonts": "Phông chữ hệ thống",
   "Theme Color": "Màu chủ đề",
   "Theme Mode": "Chế độ chủ đề",
+  "Translated Text": "Văn bản dịch",
   "Unknown": "Không xác định",
   "Untitled": "Không có tiêu đề",
   "Updated:": "Cập nhật:",
   "User avatar": "Ảnh đại diện",
   "Version {{version}}": "Phiên bản {{version}}",
+  "Vertical Direction": "Hướng dọc",
   "Welcome to your library. You can import your books here and read them anytime.": "Chào mừng đến với thư viện của bạn. Bạn có thể nhập sách vào đây và đọc bất cứ lúc nào.",
+  "Writing Mode": "Chế độ viết",
   "Your Library": "Thư viện của bạn"
 }

apps/readest-app/public/locales/zh-CN/translation.json

@@ -1,7 +1,9 @@
 {
+  "(detected)": "(检测到)",
   "About Readest": "关于 Readest",
   "Add your notes here...": "在这里添加您的笔记...",
   "Animation": "动画",
+  "Apply": "应用",
   "Are you sure to delete the selected books?": "您确定要删除所选书籍吗？",
   "Auto Mode": "自动主题",
   "Behavior": "行为",
@@ -42,6 +44,7 @@
   "Grass": "青草",
   "Gray": "素雅",
   "Gruvbox": "暖橘",
+  "Horizontal Direction": "横排",
   "Hyphenation": "断字",
   "Identifier:": "识别码",
   "Import Books": "导入书籍",
@@ -70,6 +73,7 @@
   "Notes": "笔记",
   "Open": "打开",
   "Open Book": "打开书籍",
+  "Original Text": "原文",
   "Override Publisher Font": "覆盖内置字体",
   "Page": "页面",
   "Paging Animation": "翻页动画",
@@ -102,11 +106,14 @@
   "System Fonts": "系统字体",
   "Theme Color": "主题颜色",
   "Theme Mode": "主题模式",
+  "Translated Text": "译文",
   "Unknown": "未知",
   "Untitled": "无标题",
   "Updated:": "更新日期",
   "User avatar": "用户头像",
   "Version {{version}}": "版本 {{version}}",
+  "Vertical Direction": "竖排",
   "Welcome to your library. You can import your books here and read them anytime.": "书库空空如也，您可以导入您的书籍并随时阅读。",
+  "Writing Mode": "排版模式",
   "Your Library": "书库"
 }

apps/readest-app/public/locales/zh-TW/translation.json

@@ -1,7 +1,9 @@
 {
+  "(detected)": "(檢測到)",
   "About Readest": "關於 Readest",
   "Add your notes here...": "在這裡添加您的筆記...",
   "Animation": "動畫",
+  "Apply": "應用",
   "Are you sure to delete the selected books?": "您確定要刪除所選書籍嗎？",
   "Auto Mode": "自動主題",
   "Behavior": "行為",
@@ -42,6 +44,7 @@
   "Grass": "青草",
   "Gray": "素雅",
   "Gruvbox": "暖橘",
+  "Horizontal Direction": "橫排",
   "Hyphenation": "斷字",
   "Identifier:": "識別碼",
   "Import Books": "導入書籍",
@@ -70,6 +73,7 @@
   "Notes": "筆記",
   "Open": "打開",
   "Open Book": "打開書籍",
+  "Original Text": "原文",
   "Override Publisher Font": "覆蓋內置字體",
   "Page": "頁面",
   "Paging Animation": "翻頁動畫",
@@ -102,11 +106,14 @@
   "System Fonts": "系統字體",
   "Theme Color": "主題顏色",
   "Theme Mode": "主題模式",
+  "Translated Text": "譯文",
   "Unknown": "未知",
   "Untitled": "無標題",
   "Updated:": "更新日期",
   "User avatar": "用戶頭像",
   "Version {{version}}": "版本 {{version}}",
+  "Vertical Direction": "豎排",
   "Welcome to your library. You can import your books here and read them anytime.": "書庫空空如也，您可以導入您的書籍並隨時閱讀。",
+  "Writing Mode": "排版模式",
   "Your Library": "書庫"
 }

apps/readest-app/release-notes.json

@@ -1,5 +1,21 @@
 {
   "releases": {
+    "0.9.1": {
+      "date": "2025-01-06",
+      "notes": [
+        "Restore window position and size when reopening app.",
+        "Swap font when downloading online fonts.",
+        "Fix layout issues on Windows and Linux."
+      ]
+    },
+    "0.9.0": {
+      "date": "2025-01-04",
+      "notes": [
+        "Better Custom CSS editor and OAuth process.",
+        "Add vertical/horizontal switch for CJK books.",
+        "Fix dropdown close overlay not working on Windows/Linux."
+      ]
+    },
     "0.8.9": {
       "date": "2025-01-02",
       "notes": [

apps/readest-app/src-tauri/Cargo.toml

@@ -6,7 +6,7 @@ authors = ["Bilingify LLC"]
 license = ""
 repository = ""
 edition = "2021"
-rust-version = "1.71"
+rust-version = "1.77.2"
 
 # See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
 
@@ -34,6 +34,7 @@ tauri-plugin-shell = "2"
 tauri-plugin-process = "2"
 tauri-plugin-oauth = "2"
 tauri-plugin-opener = "2.2.2"
+tauri-plugin-deep-link = "2"
 [patch.crates-io]
 tauri = { path = "../../../packages/tauri/crates/tauri" }
 
@@ -44,4 +45,6 @@ rand = "0.8"
 
 [target.'cfg(any(target_os = "macos", windows, target_os = "linux"))'.dependencies]
 tauri-plugin-cli = "2"
+tauri-plugin-single-instance = "2.2.0"
 tauri-plugin-updater = "2"
+tauri-plugin-window-state = "2.2.0"

apps/readest-app/src-tauri/capabilities/default.json

@@ -51,7 +51,12 @@
     "os:default",
     "core:window:default",
     "core:window:allow-close",
+    "core:window:allow-center",
     "core:window:allow-minimize",
+    "core:window:allow-maximize",
+    "core:window:allow-set-size",
+    "core:window:allow-set-focus",
+    "core:window:allow-is-maximized",
     "core:window:allow-start-dragging",
     "core:window:allow-toggle-maximize",
     "shell:default",
@@ -60,6 +65,7 @@
     "process:allow-restart",
     "oauth:allow-start",
     "oauth:allow-cancel",
-    "opener:default"
+    "opener:default",
+    "deep-link:default"
   ]
 }

apps/readest-app/src-tauri/src/lib.rs

@@ -9,7 +9,7 @@ extern crate objc;
 #[cfg(target_os = "macos")]
 mod menu;
 #[cfg(target_os = "macos")]
-mod tauri_traffic_light_positioner_plugin;
+mod traffic_light_plugin;
 
 #[cfg(target_os = "macos")]
 use tauri::TitleBarStyle;
@@ -70,6 +70,12 @@ async fn start_server(window: Window) -> Result<u16, String> {
     .map_err(|err| err.to_string())
 }
 
+#[derive(Clone, serde::Serialize)]
+struct Payload {
+    args: Vec<String>,
+    cwd: String,
+}
+
 #[cfg_attr(mobile, tauri::mobile_entry_point)]
 pub fn run() {
     let builder = tauri::Builder::default()
@@ -83,11 +89,26 @@ pub fn run() {
         .plugin(tauri_plugin_dialog::init())
         .plugin(tauri_plugin_fs::init());
 
+    #[cfg(desktop)]
+    let builder = builder.plugin(tauri_plugin_single_instance::init(|app, argv, cwd| {
+        let _ = app
+            .get_webview_window("main")
+            .expect("no main window")
+            .set_focus();
+        app.emit("single-instance", Payload { args: argv, cwd })
+            .unwrap();
+    }));
+
+    let builder = builder.plugin(tauri_plugin_deep_link::init());
+
     #[cfg(desktop)]
     let builder = builder.plugin(tauri_plugin_updater::Builder::new().build());
 
+    #[cfg(desktop)]
+    let builder = builder.plugin(tauri_plugin_window_state::Builder::default().build());
+
     #[cfg(target_os = "macos")]
-    let builder = builder.plugin(tauri_traffic_light_positioner_plugin::init());
+    let builder = builder.plugin(traffic_light_plugin::init());
 
     builder
         .setup(|#[allow(unused_variables)] app| {
@@ -135,6 +156,12 @@ pub fn run() {
                 });
             }
 
+            #[cfg(any(windows, target_os = "linux"))]
+            {
+                use tauri_plugin_deep_link::DeepLinkExt;
+                app.deep_link().register_all()?;
+            }
+
             #[cfg(desktop)]
             if cfg!(debug_assertions) {
                 app.handle().plugin(
@@ -149,8 +176,7 @@ pub fn run() {
             #[cfg(desktop)]
             let win_builder = win_builder
                 .inner_size(800.0, 600.0)
-                .resizable(true)
-                .maximized(true);
+                .resizable(true);
 
             #[cfg(target_os = "macos")]
             let win_builder = win_builder
@@ -162,6 +188,8 @@ pub fn run() {
             let win_builder = win_builder
                 .decorations(false)
                 .transparent(true)
+                .visible(false)
+                .shadow(true)
                 .title("Readest");
 
             win_builder.build().unwrap();

apps/readest-app/src-tauri/tauri.conf.json

@@ -130,8 +130,14 @@
         }
       ]
     },
+    "deep-link": {
+      "mobile": [{ "host": "web.readest.com" }],
+      "desktop": {
+        "schemes": ["readest"]
+      }
+    },
     "updater": {
-      "pubkey": "dW50cnVzdGVkIGNvbW1lbnQ6IG1pbmlzaWduIHB1YmxpYyBrZXk6IEU0OTAxMURGQkUzQjFENTQKUldSVUhUdSszeEdRNUExdmFkWnlvYWNYNG5wamkxMmUxRk5SejlMOTJVd28yNXlVTDh6Wld4OC8K",
+      "pubkey": "dW50cnVzdGVkIGNvbW1lbnQ6IG1pbmlzaWduIHB1YmxpYyBrZXk6IEJFMEQ1QjE2OEU1NEIzNTEKUldSUnMxU09GbHNOdmpEaWFMT1crRFpEV2VORzQ2MklxaFc0M1R0ci9xY2c1bENXS0xhM1R1L2sK",
       "endpoints": ["https://github.com/readest/readest/releases/latest/download/latest.json"]
     }
   }

apps/readest-app/src/app/auth/page.tsx

@@ -17,12 +17,18 @@ import { useTheme } from '@/hooks/useTheme';
 import { useEnv } from '@/context/EnvContext';
 import { useSettingsStore } from '@/store/settingsStore';
 import { isTauriAppPlatform } from '@/services/environment';
+import { onOpenUrl } from '@tauri-apps/plugin-deep-link';
 import { start, cancel, onUrl, onInvalidUrl } from '@fabianlars/tauri-plugin-oauth';
 import { openUrl } from '@tauri-apps/plugin-opener';
 import { handleAuthCallback } from '@/helpers/auth';
 
 type OAuthProvider = 'google' | 'apple' | 'azure' | 'github';
 
+interface SingleInstancePayload {
+  args: string[];
+  cwd: string;
+}
+
 interface ProviderLoginProp {
   provider: OAuthProvider;
   handleSignIn: (provider: OAuthProvider) => void;
@@ -64,7 +70,10 @@ export default function AuthPage() {
       provider,
       options: {
         skipBrowserRedirect: true,
-        redirectTo: `http://localhost:${port}`,
+        redirectTo:
+          process.env.NODE_ENV === 'production'
+            ? 'readest://auth/callback'
+            : `http://localhost:${port}`,
       },
     });
 
@@ -75,34 +84,54 @@ export default function AuthPage() {
     openUrl(data.url);
   };
 
-  const startOAuthServer = async () => {
+  const handleOAuthUrl = async (url: string) => {
+    console.log('Received OAuth URL:', url);
+    const hashMatch = url.match(/#(.*)/);
+    if (hashMatch) {
+      const hash = hashMatch[1];
+      const params = new URLSearchParams(hash);
+      const accessToken = params.get('access_token');
+      const refreshToken = params.get('refresh_token');
+      const next = params.get('next') ?? '/';
+      if (accessToken) {
+        handleAuthCallback({ accessToken, refreshToken, next, login, navigate: router.push });
+      }
+    }
+  };
+
+  const startTauriOAuth = async () => {
     try {
-      const port = await start();
-      setPort(port);
-      console.log(`OAuth server started on port ${port}`);
+      if (process.env.NODE_ENV === 'production') {
+        const { getCurrentWindow } = await import('@tauri-apps/api/window');
+        const currentWindow = getCurrentWindow();
+        currentWindow.listen('single-instance', ({ event, payload }) => {
+          console.log('Received deep link:', event, payload);
+          const { args } = payload as SingleInstancePayload;
+          if (args?.[1]) {
+            handleOAuthUrl(args[1]);
+          }
+        });
+        await onOpenUrl((urls) => {
+          urls.forEach((url) => {
+            handleOAuthUrl(url);
+          });
+        });
+      } else {
+        const port = await start();
+        setPort(port);
+        console.log(`OAuth server started on port ${port}`);
 
-      await onUrl((url) => {
-        console.log('Received OAuth URL:', url);
-        const hashMatch = url.match(/#(.*)/);
-        if (hashMatch) {
-          const hash = hashMatch[1];
-          const params = new URLSearchParams(hash);
-          const accessToken = params.get('access_token');
-          const refreshToken = params.get('refresh_token');
-          const next = params.get('next') ?? '/';
-          handleAuthCallback({ accessToken, refreshToken, next, login, navigate: router.push });
-        }
-      });
-
-      await onInvalidUrl((url) => {
-        console.log('Received invalid OAuth URL:', url);
-      });
+        await onUrl(handleOAuthUrl);
+        await onInvalidUrl((url) => {
+          console.log('Received invalid OAuth URL:', url);
+        });
+      }
     } catch (error) {
       console.error('Error starting OAuth server:', error);
     }
   };
 
-  const stopOAuthServer = async () => {
+  const stopTauriOAuth = async () => {
     try {
       if (port) {
         await cancel(port);
@@ -126,10 +155,10 @@ export default function AuthPage() {
     if (isOAuthServerRunning.current) return;
     isOAuthServerRunning.current = true;
 
-    startOAuthServer();
+    startTauriOAuth();
     return () => {
       isOAuthServerRunning.current = false;
-      stopOAuthServer();
+      stopTauriOAuth();
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
@@ -156,6 +185,9 @@ export default function AuthPage() {
     return null;
   }
 
+  // For tauri app development, use a custom OAuth server to handle the OAuth callback
+  // For tauri app production, use deeplink to handle the OAuth callback
+  // For web app, use the built-in OAuth callback page /auth/callback
   return isTauriAppPlatform() ? (
     <div className='flex pt-11'>
       <button

apps/readest-app/src/app/library/page.tsx

@@ -69,9 +69,14 @@ const LibraryPage = () => {
     async (appService: AppService, openWithFiles: string[], libraryBooks: Book[]) => {
       const bookIds: string[] = [];
       for (const file of openWithFiles) {
-        const book = await appService.importBook(file, libraryBooks);
-        if (book) {
-          bookIds.push(book.hash);
+        console.log('Open with book:', file);
+        try {
+          const book = await appService.importBook(file, libraryBooks);
+          if (book) {
+            bookIds.push(book.hash);
+          }
+        } catch (error) {
+          console.log('Failed to import book:', file, error);
         }
       }
       setLibrary(libraryBooks);

apps/readest-app/src/app/reader/components/BooksGrid.tsx

@@ -49,7 +49,7 @@ const BooksGrid: React.FC<BooksGridProps> = ({ bookKeys, onCloseBook }) => {
           <div
             id={`gridcell-${bookKey}`}
             key={bookKey}
-            className='relative h-full w-full overflow-hidden'
+            className='relative h-full w-full rounded-window overflow-hidden'
           >
             {isBookmarked && <Ribbon width={marginGap} />}
             <HeaderBar

apps/readest-app/src/app/reader/components/FootnotePopup.tsx

@@ -28,6 +28,7 @@ const FootnotePopup: React.FC<FootnotePopupProps> = ({ bookKey, bookDoc }) => {
   const { getView, getViewSettings } = useReaderStore();
   const { themeCode } = useTheme();
   const view = getView(bookKey);
+  const viewSettings = getViewSettings(bookKey)!;
   const footnoteHandler = new FootnoteHandler();
 
   useEffect(() => {
@@ -73,7 +74,13 @@ const FootnotePopup: React.FC<FootnotePopupProps> = ({ bookKey, bookDoc }) => {
     const rect = gridFrame.getBoundingClientRect();
     const viewSettings = getViewSettings(bookKey)!;
     const triangPos = getPosition(detail.a, rect, viewSettings.vertical);
-    const popupPos = getPopupPosition(triangPos, rect, popupWidth, popupHeight, popupPadding);
+    const popupPos = getPopupPosition(
+      triangPos,
+      rect,
+      viewSettings.vertical ? popupHeight : popupWidth,
+      viewSettings.vertical ? popupWidth : popupHeight,
+      popupPadding,
+    );
     setTrianglePosition(triangPos);
     setPopupPosition(popupPos);
 
@@ -107,6 +114,9 @@ const FootnotePopup: React.FC<FootnotePopupProps> = ({ bookKey, bookDoc }) => {
     }
   }, [footnoteRef]);
 
+  const width = viewSettings.vertical ? popupHeight : popupWidth;
+  const height = viewSettings.vertical ? popupWidth : popupHeight;
+
   return (
     <div>
       {showPopup && (
@@ -117,8 +127,8 @@ const FootnotePopup: React.FC<FootnotePopupProps> = ({ bookKey, bookDoc }) => {
         />
       )}
       <Popup
-        width={popupWidth}
-        height={popupHeight}
+        width={width}
+        height={height}
         position={showPopup ? popupPosition! : undefined}
         trianglePosition={showPopup ? trianglePosition! : undefined}
         className='select-text overflow-y-auto'
@@ -127,8 +137,8 @@ const FootnotePopup: React.FC<FootnotePopupProps> = ({ bookKey, bookDoc }) => {
           className=''
           ref={footnoteRef}
           style={{
-            width: `${popupWidth}px`,
-            height: `${popupHeight}px`,
+            width: `${width}px`,
+            height: `${height}px`,
           }}
         ></div>
       </Popup>

apps/readest-app/src/app/reader/components/Reader.tsx

@@ -33,7 +33,7 @@ const Reader: React.FC<{ ids?: string }> = ({ ids }) => {
   return (
     library.length > 0 &&
     settings.globalReadSettings && (
-      <div className='reader-page bg-base-100 text-base-content min-h-screen select-none'>
+      <div className='reader-page rounded-window bg-base-100 text-base-content min-h-screen select-none'>
         <Suspense>
           <ReaderContent ids={ids} settings={settings} />
           <AboutWindow />

apps/readest-app/src/app/reader/components/ReaderContent.tsx

@@ -88,6 +88,7 @@ const ReaderContent: React.FC<{ ids?: string; settings: SystemSettings }> = ({ i
     const { book } = getBookData(bookKey) || {};
     const { isPrimary } = getViewState(bookKey) || {};
     if (isPrimary && book && config) {
+      const settings = useSettingsStore.getState().settings;
       await saveConfig(envConfig, bookKey, config, settings);
     }
   };
@@ -110,6 +111,7 @@ const ReaderContent: React.FC<{ ids?: string; settings: SystemSettings }> = ({ i
   };
 
   const handleCloseBooks = async () => {
+    const settings = useSettingsStore.getState().settings;
     await Promise.all(bookKeys.map((key) => saveConfigAndCloseBook(key)));
     await saveSettings(envConfig, settings);
   };

apps/readest-app/src/app/reader/components/annotator/Annotator.tsx

@@ -82,7 +82,9 @@ const Annotator: React.FC<{ bookKey: string }> = ({ bookKey }) => {
         setSelection({ key: bookKey, text: sel.toString(), range: sel.getRangeAt(0), index });
       }
     };
-    detail.doc?.addEventListener('pointerup', handlePointerup);
+    if (bookData.book?.format !== 'PDF') {
+      detail.doc?.addEventListener('pointerup', handlePointerup);
+    }
   };
 
   const onDrawAnnotation = (event: Event) => {

apps/readest-app/src/app/reader/components/annotator/DeepLPopup.tsx

@@ -2,6 +2,7 @@ import React, { useEffect, useState } from 'react';
 import Popup from '@/components/Popup';
 import { Position } from '@/utils/sel';
 import { useSettingsStore } from '@/store/settingsStore';
+import { useTranslation } from '@/hooks/useTranslation';
 import { isWebAppPlatform } from '@/services/environment';
 
 const LANGUAGES = {
@@ -37,6 +38,7 @@ const DeepLPopup: React.FC<DeepLPopupProps> = ({
   popupWidth,
   popupHeight,
 }) => {
+  const _ = useTranslation();
   const { settings, setSettings } = useSettingsStore();
   const [sourceLang, setSourceLang] = useState('AUTO');
   const [targetLang, setTargetLang] = useState(settings.globalReadSettings.translateTargetLang);
@@ -124,7 +126,7 @@ const DeepLPopup: React.FC<DeepLPopupProps> = ({
       >
         <div className='text-neutral-content relative h-[50%] overflow-y-auto border-b border-neutral-400/75 p-4 font-sans'>
           <div className='mb-2 flex items-center justify-between'>
-            <h1 className='text-base font-semibold'>Original Text</h1>
+            <h1 className='text-base font-semibold'>{_('Original Text')}</h1>
             <select
               value={sourceLang}
               onChange={handleSourceLangChange}
@@ -134,7 +136,7 @@ const DeepLPopup: React.FC<DeepLPopupProps> = ({
                 return (
                   <option key={code} value={code}>
                     {detectedSourceLang && sourceLang === 'AUTO' && code === 'AUTO'
-                      ? `${LANGUAGES[detectedSourceLang] || detectedSourceLang} (detected)`
+                      ? `${LANGUAGES[detectedSourceLang] || detectedSourceLang} ` + _('(detected)')
                       : name}
                   </option>
                 );
@@ -146,7 +148,7 @@ const DeepLPopup: React.FC<DeepLPopupProps> = ({
 
         <div className='text-neutral-content relative h-[50%] overflow-y-auto p-4 font-sans'>
           <div className='mb-2 flex items-center justify-between'>
-            <h2 className='text-base font-semibold'>Translated Text</h2>
+            <h2 className='text-base font-semibold'>{_('Translated Text')}</h2>
             <select
               value={targetLang}
               onChange={handleTargetLangChange}
@@ -163,7 +165,7 @@ const DeepLPopup: React.FC<DeepLPopupProps> = ({
           </div>
 
           {loading ? (
-            <p className='text-base italic text-gray-500'>Loading...</p>
+            <p className='text-base italic text-gray-500'>{_('Loading...')}</p>
           ) : error ? (
             <p className='text-base text-red-600'>{error}</p>
           ) : (

apps/readest-app/src/app/reader/components/settings/LayoutPanel.tsx

@@ -1,17 +1,24 @@
 import React, { useEffect, useState } from 'react';
+import { MdOutlineAutoMode } from 'react-icons/md';
+import { MdOutlineTextRotationDown, MdOutlineTextRotationNone } from 'react-icons/md';
+
+import { ONE_COLUMN_MAX_INLINE_SIZE } from '@/services/constants';
 import { useSettingsStore } from '@/store/settingsStore';
 import { useReaderStore } from '@/store/readerStore';
+import { useBookDataStore } from '@/store/bookDataStore';
 import { useTranslation } from '@/hooks/useTranslation';
-import { getStyles } from '@/utils/style';
-import { ONE_COLUMN_MAX_INLINE_SIZE } from '@/services/constants';
-import NumberInput from './NumberInput';
 import { useTheme } from '@/hooks/useTheme';
+import { getStyles } from '@/utils/style';
+import { getBookLangCode } from '@/utils/book';
+import NumberInput from './NumberInput';
 
 const LayoutPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => {
   const _ = useTranslation();
   const { settings, isFontLayoutSettingsGlobal, setSettings } = useSettingsStore();
   const { getView, getViewSettings, setViewSettings } = useReaderStore();
+  const { getBookData } = useBookDataStore();
   const view = getView(bookKey);
+  const bookData = getBookData(bookKey)!;
   const viewSettings = getViewSettings(bookKey)!;
   const { themeCode } = useTheme();
 
@@ -23,6 +30,7 @@ const LayoutPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => {
   const [maxColumnCount, setMaxColumnCount] = useState(viewSettings.maxColumnCount!);
   const [maxInlineSize, setMaxInlineSize] = useState(viewSettings.maxInlineSize!);
   const [maxBlockSize, setMaxBlockSize] = useState(viewSettings.maxBlockSize!);
+  const [writingMode, setWritingMode] = useState(viewSettings.writingMode!);
 
   useEffect(() => {
     viewSettings.lineHeight = lineHeight;
@@ -111,8 +119,55 @@ const LayoutPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [maxInlineSize]);
 
+  useEffect(() => {
+    // global settings are not supported for writing mode
+    viewSettings.writingMode = writingMode;
+    setViewSettings(bookKey, viewSettings);
+    view?.renderer.setStyles?.(getStyles(viewSettings, themeCode));
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [writingMode]);
+
+  const langCode = getBookLangCode(bookData.bookDoc?.metadata?.language);
+  const isCJKBook = langCode === 'zh' || langCode === 'ja' || langCode === 'ko';
+
   return (
     <div className='my-4 w-full space-y-6'>
+      {isCJKBook && (
+        <div className='w-full'>
+          <div className='flex items-center justify-between'>
+            <h2 className='font-medium'>{_('Writing Mode')}</h2>
+            <div className='flex gap-2'>
+              <div className='tooltip tooltip-bottom' data-tip={_('Default')}>
+                <button
+                  className={`btn btn-ghost btn-circle ${writingMode === 'auto' ? 'btn-active bg-base-300' : ''}`}
+                  onClick={() => setWritingMode('auto')}
+                >
+                  <MdOutlineAutoMode size={20} />
+                </button>
+              </div>
+
+              <div className='tooltip tooltip-bottom' data-tip={_('Horizontal Direction')}>
+                <button
+                  className={`btn btn-ghost btn-circle ${writingMode === 'horizontal-tb' ? 'btn-active bg-base-300' : ''}`}
+                  onClick={() => setWritingMode('horizontal-tb')}
+                >
+                  <MdOutlineTextRotationNone size={20} />
+                </button>
+              </div>
+
+              <div className='tooltip tooltip-bottom' data-tip={_('Vertical Direction')}>
+                <button
+                  className={`btn btn-ghost btn-circle ${writingMode === 'vertical-rl' ? 'btn-active bg-base-300' : ''}`}
+                  onClick={() => setWritingMode('vertical-rl')}
+                >
+                  <MdOutlineTextRotationDown size={20} />
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+
       <div className='w-full'>
         <h2 className='mb-2 font-medium'>{_('Paragraph')}</h2>
         <div className='card bg-base-100 border-base-200 border shadow'>

apps/readest-app/src/app/reader/components/settings/MiscPanel.tsx

@@ -1,13 +1,12 @@
+import clsx from 'clsx';
 import React, { useEffect, useState } from 'react';
 import { useReaderStore } from '@/store/readerStore';
 import { useSettingsStore } from '@/store/settingsStore';
 import { useTranslation } from '@/hooks/useTranslation';
-import cssbeautify from 'cssbeautify';
 import { getStyles } from '@/utils/style';
 import { useTheme } from '@/hooks/useTheme';
-
-const cssRegex =
-  /((?:\s*)([\w#.@*,:\-.:>+~$$$$\"=(),*\s]+)\s*{(?:[\s]*)((?:[^\}]+[:][^\}]+;?)*)*\s*}(?:\s*))/gim;
+import cssbeautify from 'cssbeautify';
+import cssValidate from '@/utils/css';
 
 const MiscPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => {
   const _ = useTranslation();
@@ -18,44 +17,51 @@ const MiscPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => {
 
   const [animated, setAnimated] = useState(viewSettings.animated!);
   const [isDisableClick, setIsDisableClick] = useState(viewSettings.disableClick!);
-  const [userStylesheet, setUserStylesheet] = useState(viewSettings.userStylesheet!);
+  const [draftStylesheet, setDraftStylesheet] = useState(viewSettings.userStylesheet!);
+  const [draftStylesheetSaved, setDraftStylesheetSaved] = useState(true);
   const [error, setError] = useState<string | null>(null);
 
-  let cssInput = userStylesheet;
-
-  const validateCSS = (css: string) => {
-    return cssRegex.test(css);
-  };
-
   const handleUserStylesheetChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
-    cssInput = e.target.value;
+    const cssInput = e.target.value;
+    setDraftStylesheet(cssInput);
+    setDraftStylesheetSaved(false);
 
     try {
-      const formattedCSS = cssbeautify(cssInput, {
-        indent: '  ',
-        openbrace: 'end-of-line',
-        autosemicolon: true,
-      });
-      setUserStylesheet(formattedCSS);
-
-      if (cssInput && !validateCSS(cssInput)) {
-        throw new Error('Invalid CSS');
+      const { isValid, error } = cssValidate(cssInput);
+      if (cssInput && !isValid) {
+        throw new Error(error || 'Invalid CSS');
       }
       setError(null);
-
-      viewSettings.userStylesheet = formattedCSS;
-      setViewSettings(bookKey, viewSettings);
-      if (isFontLayoutSettingsGlobal) {
-        settings.globalViewSettings.userStylesheet = formattedCSS;
-        setSettings(settings);
+    } catch (err: unknown) {
+      if (err instanceof Error) {
+        setError(err.message);
+      } else {
+        setError('Invalid CSS: Please check your input.');
       }
-      getView(bookKey)?.renderer.setStyles?.(getStyles(viewSettings, themeCode));
-    } catch (err) {
-      setError('Invalid CSS: Please check your input.');
       console.log('CSS Error:', err);
     }
   };
 
+  const applyStyles = () => {
+    const formattedCSS = cssbeautify(draftStylesheet, {
+      indent: '  ',
+      openbrace: 'end-of-line',
+      autosemicolon: true,
+    });
+
+    setDraftStylesheet(formattedCSS);
+    setDraftStylesheetSaved(true);
+    viewSettings.userStylesheet = formattedCSS;
+    setViewSettings(bookKey, viewSettings);
+
+    if (isFontLayoutSettingsGlobal) {
+      settings.globalViewSettings.userStylesheet = formattedCSS;
+      setSettings(settings);
+    }
+
+    getView(bookKey)?.renderer.setStyles?.(getStyles(viewSettings, themeCode));
+  };
+
   const handleInput = (e: React.FormEvent<HTMLTextAreaElement>) => {
     e.stopPropagation();
     e.nativeEvent.stopImmediatePropagation();
@@ -90,7 +96,7 @@ const MiscPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => {
     <div className='my-4 w-full space-y-6'>
       <div className='w-full'>
         <h2 className='mb-2 font-medium'>{_('Animation')}</h2>
-        <div className='card bg-base-100 border shadow'>
+        <div className='card border-base-200 bg-base-100 border shadow'>
           <div className='divide-y'>
             <div className='config-item config-item-top config-item-bottom'>
               <span className='text-gray-700'>{_('Paging Animation')}</span>
@@ -107,7 +113,7 @@ const MiscPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => {
 
       <div className='w-full'>
         <h2 className='mb-2 font-medium'>{_('Behavior')}</h2>
-        <div className='card bg-base-100 border shadow'>
+        <div className='card border-base-200 bg-base-100 border shadow'>
           <div className='divide-y'>
             <div className='config-item config-item-top config-item-bottom'>
               <span className='text-gray-700'>{_('Disable Click-to-Flip')}</span>
@@ -124,22 +130,34 @@ const MiscPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => {
 
       <div className='w-full'>
         <h2 className='mb-2 font-medium'>{_('Custom CSS')}</h2>
-        <div className={`card bg-base-100 border shadow ${error ? 'border-red-500' : ''}`}>
-          <div className='divide-y'>
-            <div className='css-text-area config-item-top config-item-bottom p-1'>
-              <textarea
-                className='textarea textarea-ghost h-48 w-full border-0 p-3 !outline-none'
-                placeholder={_('Enter your custom CSS here...')}
-                spellCheck='false'
-                value={cssInput}
-                onInput={handleInput}
-                onKeyDown={handleInput}
-                onKeyUp={handleInput}
-                onChange={handleUserStylesheetChange}
-              />
-            </div>
+        <div
+          className={`card border-base-200 bg-base-100 border shadow ${error ? 'border-red-500' : ''}`}
+        >
+          <div className='relative p-1'>
+            <textarea
+              className='textarea textarea-ghost h-48 w-full border-0 p-3 !outline-none'
+              placeholder={_('Enter your custom CSS here...')}
+              spellCheck='false'
+              value={draftStylesheet}
+              onInput={handleInput}
+              onKeyDown={handleInput}
+              onKeyUp={handleInput}
+              onChange={handleUserStylesheetChange}
+            />
+            <button
+              className={clsx(
+                'btn btn-ghost bg-base-200 absolute bottom-2 right-4 h-8 min-h-8 px-4 py-2',
+                draftStylesheetSaved ? 'hidden' : '',
+                error ? 'btn-disabled' : '',
+              )}
+              onClick={applyStyles}
+              disabled={!!error}
+            >
+              {_('Apply')}
+            </button>
           </div>
         </div>
+        {error && <p className='mt-1 text-sm text-red-500'>{error}</p>}
       </div>
     </div>
   );

apps/readest-app/src/app/reader/components/settings/SettingsDialog.tsx

@@ -73,7 +73,7 @@ const SettingsDialog: React.FC<{ bookKey: string; config: BookConfig }> = ({ boo
           </div>
           <div className='flex h-full items-center justify-end'>
             <Dropdown
-              className='dropdown-bottom dropdown-end absolute right-[7%]'
+              className='dropdown-bottom dropdown-end'
               buttonClassName='btn btn-ghost h-8 min-h-8 w-8 p-0'
               toggleButton={<PiDotsThreeVerticalBold size={16} />}
             >

apps/readest-app/src/app/reader/hooks/useProgressSync.ts

@@ -21,6 +21,8 @@ export const useProgressSync = (
   const { user } = useAuth();
   const view = getView(bookKey);
   const config = getConfig(bookKey);
+  // flag to prevent accidental sync without first pulling the config
+  const configSynced = useRef(false);
 
   const pushConfig = (bookKey: string, config: BookConfig | null) => {
     if (!config || !user) return;
@@ -31,13 +33,26 @@ export const useProgressSync = (
     );
     syncConfigs([compressedConfig], bookHash, 'push');
   };
-
-  useEffect(() => {
+  const pullConfig = (bookKey: string) => {
     if (!user) return;
     const bookHash = bookKey.split('-')[0]!;
     syncConfigs([], bookHash, 'pull');
-    return () => {
+  };
+  const syncConfig = () => {
+    if (!configSynced.current) {
+      pullConfig(bookKey);
+    } else {
       pushConfig(bookKey, config);
+    }
+  };
+
+  useEffect(() => {
+    if (!user) return;
+    pullConfig(bookKey);
+    return () => {
+      if (configSynced.current) {
+        pushConfig(bookKey, config);
+      }
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
@@ -46,18 +61,19 @@ export const useProgressSync = (
   const syncTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
   useEffect(() => {
     if (!config?.location || !user) return;
+
     const now = Date.now();
     const timeSinceLastSync = now - lastProgressSyncTime.current;
-    if (configSynced.current && timeSinceLastSync > SYNC_PROGRESS_INTERVAL_SEC * 1000) {
+    if (timeSinceLastSync > SYNC_PROGRESS_INTERVAL_SEC * 1000) {
       lastProgressSyncTime.current = now;
-      pushConfig(bookKey, config);
+      syncConfig();
     } else {
       if (syncTimeoutRef.current) clearTimeout(syncTimeoutRef.current);
       syncTimeoutRef.current = setTimeout(
         () => {
           lastProgressSyncTime.current = Date.now();
-          pushConfig(bookKey, config);
           syncTimeoutRef.current = null;
+          syncConfig();
         },
         SYNC_PROGRESS_INTERVAL_SEC * 1000 - timeSinceLastSync,
       );
@@ -66,9 +82,9 @@ export const useProgressSync = (
   }, [config]);
 
   // sync progress once when the book is opened
-  const configSynced = useRef(false);
   useEffect(() => {
-    if (!configSynced.current && syncedConfigs?.length > 0) {
+    if (!configSynced.current && syncedConfigs) {
+      configSynced.current = true;
       const syncedConfig = syncedConfigs.filter((c) => c.bookHash === bookKey.split('-')[0])[0];
       if (syncedConfig) {
         const newConfig = deserializeConfig(
@@ -77,7 +93,6 @@ export const useProgressSync = (
           DEFAULT_BOOK_SEARCH_CONFIG,
         );
         setConfig(bookKey, { ...config, ...newConfig });
-        configSynced.current = true;
         if ((syncedConfig.progress?.[1] ?? 0) > 0 && (config?.progress?.[1] ?? 0) > 0) {
           const syncedFraction = syncedConfig.progress![0] / syncedConfig.progress![1];
           const configFraction = config!.progress![0] / config!.progress![1];

apps/readest-app/src/components/BookDetailModal.tsx

@@ -105,9 +105,9 @@ const BookDetailModal = ({ book, isOpen, onClose }: BookDetailModalProps) => {
               </div>
             </div>
 
-            <div className='title-author flex h-40 flex-col justify-between pr-4'>
+            <div className='title-author flex h-40 max-w-[60%] flex-col justify-between pr-4'>
               <div>
-                <h2 className='text-base-content mb-2 line-clamp-2 text-2xl font-bold'>
+                <h2 className='text-base-content mb-2 line-clamp-2 break-all text-2xl font-bold'>
                   {book.title || _('Untitled')}
                 </h2>
                 <p className='text-neutral-content line-clamp-1'>{book.author || _('Unknown')}</p>

apps/readest-app/src/components/Dropdown.tsx

@@ -34,7 +34,7 @@ const Dropdown: React.FC<DropdownProps> = ({
     : children;
 
   return (
-    <>
+    <div className='dropdown-container'>
       {isOpen && (
         <div className='fixed inset-0 bg-transparent' onClick={() => setIsDropdownOpen(false)} />
       )}
@@ -48,7 +48,7 @@ const Dropdown: React.FC<DropdownProps> = ({
         </div>
         {isOpen && childrenWithToggle}
       </div>
-    </>
+    </div>
   );
 };
 

apps/readest-app/src/components/Popup.tsx

@@ -21,7 +21,7 @@ const Popup = ({
 }) => (
   <div>
     <div
-      className={`triangle text-base-200 absolute z-10 ${triangleClassName}`}
+      className={`triangle text-base-200 absolute z-40 ${triangleClassName}`}
       style={{
         left:
           trianglePosition?.dir === 'left'
@@ -67,7 +67,7 @@ const Popup = ({
     />
     <div
       id='popup-container'
-      className={`bg-base-200 absolute rounded-lg font-sans shadow-xl ${className}`}
+      className={`bg-base-200 absolute z-30 rounded-lg font-sans shadow-xl ${className}`}
       style={{
         width: `${width}px`,
         height: `${height}px`,

apps/readest-app/src/components/WindowButtons.tsx

@@ -53,6 +53,7 @@ const WindowButtons: React.FC<WindowButtonsProps> = ({
     if (
       target.closest('.btn') ||
       target.closest('.window-button') ||
+      target.closest('.dropdown-container') ||
       target.closest('.exclude-title-bar-mousedown')
     ) {
       return;

apps/readest-app/src/context/AuthContext.tsx

@@ -29,10 +29,8 @@ export const AuthProvider = ({ children }: { children: ReactNode }) => {
   });
 
   useEffect(() => {
-    const fetchSession = async () => {
-      const {
-        data: { session },
-      } = await supabase.auth.getSession();
+    const syncSession = (session: { access_token: string; user: User } | null) => {
+      console.log('Syncing session');
       if (session) {
         const { access_token, user } = session;
         setToken(access_token);
@@ -46,10 +44,20 @@ export const AuthProvider = ({ children }: { children: ReactNode }) => {
         setUser(null);
       }
     };
+    const fetchSession = async () => {
+      const { data } = await supabase.auth.getSession();
+      syncSession(data.session);
+    };
 
-    console.log('Fetching session');
     fetchSession();
-  }, [token]);
+    const { data: subscription } = supabase.auth.onAuthStateChange((_, session) => {
+      syncSession(session);
+    });
+
+    return () => {
+      subscription?.subscription.unsubscribe();
+    };
+  }, []);
 
   const login = (newToken: string, newUser: User) => {
     console.log('Logging in');

apps/readest-app/src/helpers/shortcuts.ts

@@ -28,7 +28,7 @@ const DEFAULT_SHORTCUTS: ShortcutConfig = {
   onReloadPage: ['shift+r'],
   onQuitApp: ['ctrl+q', 'cmd+q'],
   onGoLeft: ['ArrowLeft', 'PageUp', 'h'],
-  onGoRight: ['ArrowRight', 'PageDown', 'l'],
+  onGoRight: ['ArrowRight', 'PageDown', 'l', ' '],
   onGoNext: ['ArrowDown', 'j'],
   onGoPrev: ['ArrowUp', 'k'],
   onGoBack: ['shift+ArrowLeft', 'shift+h'],

apps/readest-app/src/hooks/useSync.ts

@@ -51,14 +51,15 @@ export function useSync(bookKey?: string) {
   );
 
   const [syncing, setSyncing] = useState(false);
+  // null means unsynced, empty array means synced no changes
   const [syncResult, setSyncResult] = useState<SyncResult>({
-    books: [],
-    configs: [],
-    notes: [],
+    books: null,
+    configs: null,
+    notes: null,
   });
-  const [syncedBooks, setSyncedBooks] = useState<Book[]>([]);
-  const [syncedConfigs, setSyncedConfigs] = useState<BookConfig[]>([]);
-  const [syncedNotes, setSyncedNotes] = useState<BookNote[]>([]);
+  const [syncedBooks, setSyncedBooks] = useState<Book[] | null>(null);
+  const [syncedConfigs, setSyncedConfigs] = useState<BookConfig[] | null>(null);
+  const [syncedNotes, setSyncedNotes] = useState<BookNote[] | null>(null);
 
   const { syncClient } = useSyncContext();
 
@@ -76,11 +77,11 @@ export function useSync(bookKey?: string) {
 
     try {
       const result = await syncClient.pullChanges(since, type, bookId);
+      setSyncResult({ ...syncResult, [type]: result[type] });
       const records = result[type];
-      if (!records.length) return;
-      const maxTime = computeMaxTimestamp(result[type]);
+      if (!records?.length) return;
+      const maxTime = computeMaxTimestamp(records);
       setLastSyncedAt(maxTime);
-      setSyncResult(result);
       switch (type) {
         case 'books':
           settings.lastSyncedAtBooks = maxTime;
@@ -169,16 +170,18 @@ export function useSync(bookKey?: string) {
   useEffect(() => {
     if (!syncing && syncResult) {
       const { books: dbBooks, configs: dbBookConfigs, notes: dbBookNotes } = syncResult;
-      const books = dbBooks.map((dbBook) => transformsFromDB['books'](dbBook as unknown as DBBook));
-      const configs = dbBookConfigs.map((dbBookConfig) =>
+      const books = dbBooks?.map((dbBook) =>
+        transformsFromDB['books'](dbBook as unknown as DBBook),
+      );
+      const configs = dbBookConfigs?.map((dbBookConfig) =>
         transformsFromDB['configs'](dbBookConfig as unknown as DBBookConfig),
       );
-      const notes = dbBookNotes.map((dbBookNote) =>
+      const notes = dbBookNotes?.map((dbBookNote) =>
         transformsFromDB['notes'](dbBookNote as unknown as DBBookNote),
       );
-      if (books.length) setSyncedBooks(books);
-      if (configs.length) setSyncedConfigs(configs);
-      if (notes.length) setSyncedNotes(notes);
+      if (books) setSyncedBooks(books);
+      if (configs) setSyncedConfigs(configs);
+      if (notes) setSyncedNotes(notes);
     }
   }, [syncResult, syncing]);
 

apps/readest-app/src/libs/sync.ts

@@ -18,9 +18,9 @@ interface BookConfigRecord extends BookDataRecord, BookConfig {}
 interface BookNoteRecord extends BookDataRecord, BookNote {}
 
 export interface SyncResult {
-  books: BookRecord[];
-  notes: BookNoteRecord[];
-  configs: BookConfigRecord[];
+  books: BookRecord[] | null;
+  notes: BookNoteRecord[] | null;
+  configs: BookConfigRecord[] | null;
 }
 
 export interface SyncData {

apps/readest-app/src/services/constants.ts

@@ -42,6 +42,7 @@ export const DEFAULT_BOOK_LAYOUT: BookLayout = {
   maxInlineSize: 720,
   maxBlockSize: 1440,
   animated: false,
+  writingMode: 'auto',
   vertical: false,
 };
 

apps/readest-app/src/styles/globals.css

@@ -6,6 +6,7 @@
   --background: #ffffff;
   --foreground: #171717;
   border-radius: 10px;
+  scrollbar-gutter: auto !important;
 }
 
 @media (prefers-color-scheme: dark) {

apps/readest-app/src/types/book.ts

@@ -51,6 +51,7 @@ export interface BookLayout {
   maxInlineSize: number;
   maxBlockSize: number;
   animated: boolean;
+  writingMode: string;
   vertical: boolean;
 }
 

apps/readest-app/src/utils/book.ts

@@ -54,7 +54,7 @@ export const listFormater = (narrow = false, lang = userLang) => {
   }
 };
 
-const getBookLangCode = (lang: string | string[] | undefined) => {
+export const getBookLangCode = (lang: string | string[] | undefined) => {
   try {
     const bookLang = typeof lang === 'string' ? lang : lang?.[0];
     return bookLang ? bookLang.split('-')[0]! : 'en';

apps/readest-app/src/utils/css.ts

@@ -0,0 +1,77 @@
+const cssValidate = (css: string) => {
+  // Remove comments and normalize whitespace
+  css = css.replace(/\/\*[\s\S]*?\*\//g, '').trim();
+
+  // CSS property pattern (validate both property name and value)
+  const propertyPattern = /^[\s\n]*[-\w]+\s*:\s*[^;]+;?$/;
+
+  // Check if empty
+  if (!css) return { isValid: false, error: 'Empty CSS' };
+
+  // Ensure balanced curly braces
+  const openBraces = (css.match(/{/g) || []).length;
+  const closeBraces = (css.match(/}/g) || []).length;
+  if (openBraces !== closeBraces) {
+    return { isValid: false, error: 'Unbalanced curly braces' };
+  }
+
+  // Split into rule blocks
+  const blocks = css
+    .split('}')
+    .map((block) => block.trim())
+    .filter(Boolean);
+
+  for (const block of blocks) {
+    // Ensure the block has a selector and declarations
+    const parts = block.split('{').map((part) => part.trim());
+    if (parts.length !== 2) {
+      return { isValid: false, error: 'Invalid CSS structure' };
+    }
+
+    const [selector, decls] = parts;
+
+    // Ensure selector is not empty
+    if (!selector) {
+      return { isValid: false, error: 'Missing selector' };
+    }
+
+    // Ensure declarations are not empty
+    if (!decls) {
+      return { isValid: false, error: `Missing declarations for selector: ${selector}` };
+    }
+
+    // Validate declarations
+    const props = decls
+      .split(';')
+      .map((prop) => prop.trim())
+      .filter(Boolean);
+
+    if (props.length === 0) {
+      return { isValid: false, error: `No valid properties for selector: ${selector}` };
+    }
+
+    for (const prop of props) {
+      // Check if property is missing a name or value
+      if (!prop.includes(':')) {
+        return { isValid: false, error: `Missing property or value: ${prop}` };
+      }
+
+      const [name, value] = prop.split(':').map((part) => part.trim());
+      if (!name) {
+        return { isValid: false, error: `Missing property name: ${prop}` };
+      }
+      if (!value) {
+        return { isValid: false, error: `Missing property value: ${prop}` };
+      }
+
+      // Validate full property format
+      if (!propertyPattern.test(prop.endsWith(';') ? prop : prop + ';')) {
+        return { isValid: false, error: `Invalid property: ${prop}` };
+      }
+    }
+  }
+
+  return { isValid: true, error: null };
+};
+
+export default cssValidate;

apps/readest-app/src/utils/style.ts

@@ -35,7 +35,8 @@ const getFontStyles = (
 const getAdditionalFontFaces = () => `
   @font-face {
     font-family: "FangSong";
-    src: url("https://db.onlinewebfonts.com/t/2ecbfe1d9bfc191c6f15c0ccc23cbd43.eot");
+    font-display: swap;
+    src: local("Fang Song"), local("FangSong"), local("Noto Serif CJK"), url("https://db.onlinewebfonts.com/t/2ecbfe1d9bfc191c6f15c0ccc23cbd43.eot");
     src: url("https://db.onlinewebfonts.com/t/2ecbfe1d9bfc191c6f15c0ccc23cbd43.eot?#iefix") format("embedded-opentype"),
     url("https://db.onlinewebfonts.com/t/2ecbfe1d9bfc191c6f15c0ccc23cbd43.woff2") format("woff2"),
     url("https://db.onlinewebfonts.com/t/2ecbfe1d9bfc191c6f15c0ccc23cbd43.woff") format("woff"),
@@ -44,7 +45,8 @@ const getAdditionalFontFaces = () => `
   }
   @font-face {
     font-family: "Kaiti";
-    src: url("https://db.onlinewebfonts.com/t/1ee9941f1b8c128110ca4307dda59917.eot");
+    font-display: swap;
+    src: local("Kai"), local("KaiTi"), local("AR PL UKai"), url("https://db.onlinewebfonts.com/t/1ee9941f1b8c128110ca4307dda59917.eot");
     src: url("https://db.onlinewebfonts.com/t/1ee9941f1b8c128110ca4307dda59917.eot?#iefix")format("embedded-opentype"),
     url("https://db.onlinewebfonts.com/t/1ee9941f1b8c128110ca4307dda59917.woff2")format("woff2"),
     url("https://db.onlinewebfonts.com/t/1ee9941f1b8c128110ca4307dda59917.woff")format("woff"),
@@ -53,7 +55,8 @@ const getAdditionalFontFaces = () => `
   }
   @font-face {
     font-family: "Heiti";
-    src: url("https://db.onlinewebfonts.com/t/a4948b9d43a91468825a5251df1ec58d.eot");
+    font-display: swap;
+    src: local("Hei"), local("SimHei"), local("WenQuanYi Zen Hei"), url("https://db.onlinewebfonts.com/t/a4948b9d43a91468825a5251df1ec58d.eot");
     src: url("https://db.onlinewebfonts.com/t/a4948b9d43a91468825a5251df1ec58d.eot?#iefix")format("embedded-opentype"),
     url("https://db.onlinewebfonts.com/t/a4948b9d43a91468825a5251df1ec58d.woff2")format("woff2"),
     url("https://db.onlinewebfonts.com/t/a4948b9d43a91468825a5251df1ec58d.woff")format("woff"),
@@ -62,7 +65,8 @@ const getAdditionalFontFaces = () => `
   }
   @font-face {
     font-family: "XiHeiti";
-    src: url("https://db.onlinewebfonts.com/t/4f0b783ba4a1b381fc7e7af81ecab481.eot");
+    font-display: swap;
+    src: local("PingFang SC"), local("Microsoft YaHei"), local("WenQuanYi Micro Hei"), url("https://db.onlinewebfonts.com/t/4f0b783ba4a1b381fc7e7af81ecab481.eot");
     src: url("https://db.onlinewebfonts.com/t/4f0b783ba4a1b381fc7e7af81ecab481.eot?#iefix")format("embedded-opentype"),
     url("https://db.onlinewebfonts.com/t/4f0b783ba4a1b381fc7e7af81ecab481.woff2")format("woff2"),
     url("https://db.onlinewebfonts.com/t/4f0b783ba4a1b381fc7e7af81ecab481.woff")format("woff"),
@@ -76,6 +80,7 @@ const getLayoutStyles = (
   justify: boolean,
   hyphenate: boolean,
   zoomLevel: number,
+  writingMode: string,
   bg: string,
   fg: string,
   primary: string,
@@ -122,6 +127,7 @@ const getLayoutStyles = (
   }
   html, body {
     color: ${fg};
+    ${writingMode === 'auto' ? '' : `writing-mode: ${writingMode};`}
     text-align: var(--default-text-align);
     background-color: var(--theme-bg-color, transparent);
     background: var(--background-set, none);
@@ -182,6 +188,7 @@ export const getStyles = (viewSettings: ViewSettings, themeCode: ThemeCode) => {
     viewSettings.fullJustification!,
     viewSettings.hyphenation!,
     viewSettings.zoomLevel! / 100.0,
+    viewSettings.writingMode!,
     themeCode.bg,
     themeCode.fg,
     themeCode.primary,

pnpm-lock.yaml

@@ -50,6 +50,9 @@ importers:
       '@tauri-apps/plugin-cli':
         specifier: ^2.2.0
         version: 2.2.0
+      '@tauri-apps/plugin-deep-link':
+        specifier: ^2.2.0
+        version: 2.2.0
       '@tauri-apps/plugin-dialog':
         specifier: ^2.2.0
         version: 2.2.0
@@ -787,6 +790,9 @@ packages:
   '@tauri-apps/plugin-cli@2.2.0':
     resolution: {integrity: sha512-rvNhMog9rHr01Xk+trBFKJ0eZICIvPkm9GX6ogB89/0hROU/lf+a/sb4vC0wtSeR7zrJuCSxwxYuvHCZheaYFA==}
 
+  '@tauri-apps/plugin-deep-link@2.2.0':
+    resolution: {integrity: sha512-H6mkxr2KZ3XJcKL44tiq6cOjCw9DL8OgU1xjn3j26Qsn+H/roPFiyhR7CHuB8Ar+sQFj4YVlfmJwtBajK2FETQ==}
+
   '@tauri-apps/plugin-dialog@2.2.0':
     resolution: {integrity: sha512-6bLkYK68zyK31418AK5fNccCdVuRnNpbxquCl8IqgFByOgWFivbiIlvb79wpSXi0O+8k8RCSsIpOquebusRVSg==}
 
@@ -3741,6 +3747,10 @@ snapshots:
     dependencies:
       '@tauri-apps/api': 2.1.1
 
+  '@tauri-apps/plugin-deep-link@2.2.0':
+    dependencies:
+      '@tauri-apps/api': 2.1.1
+
   '@tauri-apps/plugin-dialog@2.2.0':
     dependencies:
       '@tauri-apps/api': 2.1.1