Introduce Import and Advanced Export Features
- Added `ImportBookForm` component for importing DOCX files with chapter selection and metadata customization. - Implemented advanced export options (PDF, DOCX, EPUB) with `ExportSetting` component. - Developed utility methods for transforming books into exportable formats in `Export.ts`. - Expanded database models and repositories to support import/export functionality. - Enhanced localization for import/export flows and updated UI components for improved user experience.
This commit is contained in:
96
CLAUDE.md
Normal file
96
CLAUDE.md
Normal file
@@ -0,0 +1,96 @@
|
|||||||
|
# CLAUDE.md
|
||||||
|
|
||||||
|
This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
|
||||||
|
|
||||||
|
## Project Overview
|
||||||
|
|
||||||
|
ERitors Scribe is an Electron + Next.js desktop application for writers. It uses SQLite with WASM for local storage, supports offline mode with PIN authentication, and encrypts user data with AES-256-CBC.
|
||||||
|
|
||||||
|
## Commands
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# Development (starts Next.js on port 4000 + Electron with hot reload)
|
||||||
|
npm run dev
|
||||||
|
|
||||||
|
# Build for specific platform
|
||||||
|
npm run build:mac
|
||||||
|
npm run build:win
|
||||||
|
npm run build:linux
|
||||||
|
npm run build:all
|
||||||
|
```
|
||||||
|
|
||||||
|
## Architecture
|
||||||
|
|
||||||
|
### Process Model
|
||||||
|
|
||||||
|
```
|
||||||
|
Renderer (Next.js) <--IPC--> Main Process <--> SQLite DB
|
||||||
|
via window.electron.invoke()
|
||||||
|
```
|
||||||
|
|
||||||
|
- **Main process**: `electron/main.ts` - Window management, IPC handlers, OS integration
|
||||||
|
- **Preload script**: `electron/preload.ts` - Secure contextBridge API
|
||||||
|
- **Renderer**: Next.js App Router with static export (`output: 'export'`)
|
||||||
|
|
||||||
|
### Key Directories
|
||||||
|
|
||||||
|
- `electron/` - Main process code (IPC handlers, database, storage)
|
||||||
|
- `electron/ipc/` - IPC handlers organized by domain (book, chapter, character, etc.)
|
||||||
|
- `electron/database/` - SQLite service, models, repositories, encryption
|
||||||
|
- `electron/storage/SecureStorage.ts` - OS-level secure storage (macOS Keychain, Windows DPAPI)
|
||||||
|
- `app/` - Next.js pages (App Router)
|
||||||
|
- `context/` - React contexts for state management (13+ contexts)
|
||||||
|
- `components/` - React components
|
||||||
|
- `lib/locales/` - i18n translations (fr.json, en.json)
|
||||||
|
|
||||||
|
### IPC Handler Pattern
|
||||||
|
|
||||||
|
All IPC handlers use `createHandler<TBody, TReturn>()` factory in `electron/database/LocalSystem.ts`:
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
// electron/ipc/book.ipc.ts
|
||||||
|
ipcMain.handle('db:book:books', createHandler<void, BookProps[]>(
|
||||||
|
async (userId, _body, lang) => Book.getBooks(userId, lang)
|
||||||
|
));
|
||||||
|
|
||||||
|
// Frontend usage
|
||||||
|
const books = await window.electron.invoke('db:book:books');
|
||||||
|
```
|
||||||
|
|
||||||
|
The factory auto-injects `userId` and `lang` from secure storage, handles errors uniformly.
|
||||||
|
|
||||||
|
### State Management
|
||||||
|
|
||||||
|
Context-based architecture with providers:
|
||||||
|
- `UserContext` - Authenticated user
|
||||||
|
- `BookContext` - Current book
|
||||||
|
- `OfflineContext` - Offline mode state
|
||||||
|
- `SessionContext` - Session data
|
||||||
|
- `LangContext` - i18n
|
||||||
|
|
||||||
|
### Database
|
||||||
|
|
||||||
|
- One SQLite file per user: `eritors-local-{userId}.db`
|
||||||
|
- Uses `node-sqlite3-wasm` (WASM-based SQLite)
|
||||||
|
- AES-256-CBC encryption for stored data
|
||||||
|
- PBKDF2 key derivation (100K iterations)
|
||||||
|
- Schema in `electron/database/schema.ts`
|
||||||
|
|
||||||
|
### Security
|
||||||
|
|
||||||
|
- `contextIsolation: true`, `nodeIntegration: false`, `sandbox: true`
|
||||||
|
- OS-level secure storage for tokens and encryption keys
|
||||||
|
- Per-user encryption keys stored in SecureStorage
|
||||||
|
- Offline PIN hashed with bcrypt
|
||||||
|
|
||||||
|
## TypeScript Configuration
|
||||||
|
|
||||||
|
- `tsconfig.json` - Next.js/React (renderer)
|
||||||
|
- `tsconfig.electron.json` - Electron main process
|
||||||
|
- `tsconfig.preload.json` - Preload script
|
||||||
|
|
||||||
|
## Build Output
|
||||||
|
|
||||||
|
- `dist/` - Compiled TypeScript
|
||||||
|
- `out/` - Next.js static export
|
||||||
|
- `release/` - Electron builder output (DMG, NSIS, AppImage)
|
||||||
349
components/book/ImportBookForm.tsx
Normal file
349
components/book/ImportBookForm.tsx
Normal file
@@ -0,0 +1,349 @@
|
|||||||
|
'use client'
|
||||||
|
import {ChangeEvent, Dispatch, RefObject, SetStateAction, useCallback, useContext, useEffect, useRef, useState} from "react";
|
||||||
|
import {AlertContext} from "@/context/AlertContext";
|
||||||
|
import System from "@/lib/models/System";
|
||||||
|
import {SessionContext} from "@/context/SessionContext";
|
||||||
|
import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
|
||||||
|
import {
|
||||||
|
faBook,
|
||||||
|
faBookOpen,
|
||||||
|
faBookmark,
|
||||||
|
faFileImport,
|
||||||
|
faFileWord,
|
||||||
|
faLayerGroup,
|
||||||
|
faSpinner,
|
||||||
|
faSquare,
|
||||||
|
faSquareCheck,
|
||||||
|
faX
|
||||||
|
} from "@fortawesome/free-solid-svg-icons";
|
||||||
|
import {SelectBoxProps} from "@/shared/interface";
|
||||||
|
import {bookTypes} from "@/lib/models/Book";
|
||||||
|
import {chapterVersions} from "@/lib/models/Chapter";
|
||||||
|
import {ParsedDocxResponse, ImportChapterSelection} from "@/lib/models/Import";
|
||||||
|
import {SyncedBook} from "@/lib/models/SyncedBook";
|
||||||
|
import InputField from "@/components/form/InputField";
|
||||||
|
import TextInput from "@/components/form/TextInput";
|
||||||
|
import TexteAreaInput from "@/components/form/TexteAreaInput";
|
||||||
|
import SelectBox from "@/components/form/SelectBox";
|
||||||
|
import CancelButton from "@/components/form/CancelButton";
|
||||||
|
import SubmitButtonWLoading from "@/components/form/SubmitButtonWLoading";
|
||||||
|
import {useTranslations} from "next-intl";
|
||||||
|
import {LangContext, LangContextProps} from "@/context/LangContext";
|
||||||
|
import {BooksSyncContext, BooksSyncContextProps} from "@/context/BooksSyncContext";
|
||||||
|
|
||||||
|
const DOCX_ACCEPT: string = '.docx,application/vnd.openxmlformats-officedocument.wordprocessingml.document';
|
||||||
|
|
||||||
|
export default function ImportBookForm({setCloseForm}: { setCloseForm: Dispatch<SetStateAction<boolean>> }) {
|
||||||
|
const t = useTranslations();
|
||||||
|
const {lang} = useContext<LangContextProps>(LangContext);
|
||||||
|
const {session} = useContext(SessionContext);
|
||||||
|
const {errorMessage, successMessage} = useContext(AlertContext);
|
||||||
|
const {setServerOnlyBooks} = useContext<BooksSyncContextProps>(BooksSyncContext);
|
||||||
|
const modalRef: RefObject<HTMLDivElement | null> = useRef<HTMLDivElement>(null);
|
||||||
|
|
||||||
|
const token: string = session?.accessToken ?? '';
|
||||||
|
|
||||||
|
const [isParsing, setIsParsing] = useState<boolean>(false);
|
||||||
|
const [isImporting, setIsImporting] = useState<boolean>(false);
|
||||||
|
const [importId, setImportId] = useState<string>('');
|
||||||
|
const [chapters, setChapters] = useState<ImportChapterSelection[]>([]);
|
||||||
|
const [title, setTitle] = useState<string>('');
|
||||||
|
const [subTitle, setSubTitle] = useState<string>('');
|
||||||
|
const [summary, setSummary] = useState<string>('');
|
||||||
|
const [selectedBookType, setSelectedBookType] = useState<string>('short');
|
||||||
|
const [selectedVersion, setSelectedVersion] = useState<string>('2');
|
||||||
|
|
||||||
|
const hasParsedFile: boolean = importId.length > 0 && chapters.length > 0;
|
||||||
|
const selectedCount: number = chapters.filter((chapter: ImportChapterSelection): boolean => chapter.selected).length;
|
||||||
|
const canImport: boolean = !isImporting && hasParsedFile && selectedCount > 0 && title.trim().length > 0;
|
||||||
|
|
||||||
|
useEffect((): () => void => {
|
||||||
|
document.body.style.overflow = 'hidden';
|
||||||
|
return (): void => {
|
||||||
|
document.body.style.overflow = 'auto';
|
||||||
|
};
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const handleFileChange = useCallback(async (e: ChangeEvent<HTMLInputElement>): Promise<void> => {
|
||||||
|
const file: File | undefined = e.target.files?.[0];
|
||||||
|
if (!file) return;
|
||||||
|
|
||||||
|
if (!file.name.endsWith('.docx')) {
|
||||||
|
errorMessage(t('importBook.error.invalidFormat'));
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
setIsParsing(true);
|
||||||
|
setImportId('');
|
||||||
|
setChapters([]);
|
||||||
|
|
||||||
|
try {
|
||||||
|
const response: ParsedDocxResponse = await System.authUploadFileToServer<ParsedDocxResponse>(
|
||||||
|
'book/import/parse',
|
||||||
|
file,
|
||||||
|
token,
|
||||||
|
lang,
|
||||||
|
);
|
||||||
|
|
||||||
|
setImportId(response.importId);
|
||||||
|
setChapters(
|
||||||
|
response.chapters.map((chapter: { index: number; title: string; wordCount: number }): ImportChapterSelection => ({
|
||||||
|
index: chapter.index,
|
||||||
|
title: chapter.title,
|
||||||
|
wordCount: chapter.wordCount,
|
||||||
|
selected: true,
|
||||||
|
})),
|
||||||
|
);
|
||||||
|
} catch (parseError: unknown) {
|
||||||
|
if (parseError instanceof Error) {
|
||||||
|
errorMessage(parseError.message);
|
||||||
|
} else {
|
||||||
|
errorMessage(t('importBook.error.parseFailed'));
|
||||||
|
}
|
||||||
|
} finally {
|
||||||
|
setIsParsing(false);
|
||||||
|
}
|
||||||
|
}, [token, lang, errorMessage, t]);
|
||||||
|
|
||||||
|
const toggleChapter = useCallback((chapterIndex: number): void => {
|
||||||
|
setChapters((previousChapters: ImportChapterSelection[]): ImportChapterSelection[] =>
|
||||||
|
previousChapters.map((chapter: ImportChapterSelection): ImportChapterSelection =>
|
||||||
|
chapter.index === chapterIndex ? {...chapter, selected: !chapter.selected} : chapter,
|
||||||
|
),
|
||||||
|
);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const toggleAllChapters = useCallback((selectAll: boolean): void => {
|
||||||
|
setChapters((previousChapters: ImportChapterSelection[]): ImportChapterSelection[] =>
|
||||||
|
previousChapters.map((chapter: ImportChapterSelection): ImportChapterSelection => ({
|
||||||
|
...chapter,
|
||||||
|
selected: selectAll,
|
||||||
|
})),
|
||||||
|
);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const handleImport = useCallback(async (): Promise<void> => {
|
||||||
|
if (!title.trim()) {
|
||||||
|
errorMessage(t('importBook.error.titleRequired'));
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (!selectedBookType) {
|
||||||
|
errorMessage(t('importBook.error.typeRequired'));
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (selectedCount === 0) {
|
||||||
|
errorMessage(t('importBook.error.noChaptersSelected'));
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
setIsImporting(true);
|
||||||
|
try {
|
||||||
|
const selectedChapterIndexes: number[] = chapters
|
||||||
|
.filter((chapter: ImportChapterSelection): boolean => chapter.selected)
|
||||||
|
.map((chapter: ImportChapterSelection): number => chapter.index);
|
||||||
|
|
||||||
|
await System.authPostToServer<{ bookId: string }>(
|
||||||
|
'book/import',
|
||||||
|
{
|
||||||
|
importId,
|
||||||
|
title: title.trim(),
|
||||||
|
subTitle: subTitle.trim(),
|
||||||
|
summary: summary.trim(),
|
||||||
|
type: selectedBookType,
|
||||||
|
version: parseInt(selectedVersion, 10),
|
||||||
|
selectedChapterIndexes,
|
||||||
|
},
|
||||||
|
token,
|
||||||
|
lang,
|
||||||
|
);
|
||||||
|
|
||||||
|
setServerOnlyBooks((prevBooks: SyncedBook[]): SyncedBook[] => [...prevBooks, {
|
||||||
|
id: importId,
|
||||||
|
type: selectedBookType,
|
||||||
|
title: title.trim(),
|
||||||
|
subTitle: subTitle.trim(),
|
||||||
|
lastUpdate: new Date().getTime() / 1000,
|
||||||
|
chapters: [],
|
||||||
|
characters: [],
|
||||||
|
locations: [],
|
||||||
|
worlds: [],
|
||||||
|
incidents: [],
|
||||||
|
plotPoints: [],
|
||||||
|
issues: [],
|
||||||
|
actSummaries: [],
|
||||||
|
guideLine: null,
|
||||||
|
aiGuideLine: null,
|
||||||
|
bookTools: null,
|
||||||
|
seriesId: null,
|
||||||
|
spells: [],
|
||||||
|
spellTags: []
|
||||||
|
}]);
|
||||||
|
|
||||||
|
successMessage(t('importBook.success'));
|
||||||
|
setCloseForm(false);
|
||||||
|
} catch (importError: unknown) {
|
||||||
|
if (importError instanceof Error) {
|
||||||
|
errorMessage(importError.message);
|
||||||
|
} else {
|
||||||
|
errorMessage(t('importBook.error.importFailed'));
|
||||||
|
}
|
||||||
|
} finally {
|
||||||
|
setIsImporting(false);
|
||||||
|
}
|
||||||
|
}, [title, subTitle, summary, selectedBookType, selectedVersion, importId, chapters, selectedCount, token, lang, errorMessage, successMessage, t, setCloseForm, setServerOnlyBooks]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="fixed inset-0 flex items-center justify-center bg-black/60 z-50 backdrop-blur-md animate-fadeIn">
|
||||||
|
<div ref={modalRef}
|
||||||
|
className="bg-tertiary/95 backdrop-blur-sm text-text-primary rounded-2xl border border-secondary/50 shadow-2xl md:w-3/4 xl:w-1/4 lg:w-2/4 sm:w-11/12 max-h-[85vh] flex flex-col">
|
||||||
|
<div className="flex justify-between items-center bg-primary px-6 py-4 rounded-t-2xl shadow-lg">
|
||||||
|
<h2 className="flex items-center gap-3 font-['ADLaM_Display'] text-2xl text-text-primary">
|
||||||
|
<FontAwesomeIcon icon={faFileImport} className="w-6 h-6"/>
|
||||||
|
{t("importBook.header.title")}
|
||||||
|
</h2>
|
||||||
|
<button
|
||||||
|
className="text-background hover:text-background w-10 h-10 rounded-xl hover:bg-white/20 transition-all duration-200 flex items-center justify-center hover:scale-110"
|
||||||
|
onClick={(): void => setCloseForm(false)}
|
||||||
|
>
|
||||||
|
<FontAwesomeIcon icon={faX} className={'w-5 h-5'}/>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="p-5 overflow-y-auto flex-grow custom-scrollbar">
|
||||||
|
<div className="space-y-6">
|
||||||
|
<label
|
||||||
|
className={`flex items-center justify-center gap-3 py-4 border-2 border-dashed border-primary rounded-xl cursor-pointer
|
||||||
|
bg-secondary/20 hover:bg-secondary/40 transition-all duration-200
|
||||||
|
${isParsing ? 'opacity-70 pointer-events-none' : ''}`}
|
||||||
|
>
|
||||||
|
{isParsing ? (
|
||||||
|
<FontAwesomeIcon icon={faSpinner} className="w-5 h-5 text-primary animate-spin"/>
|
||||||
|
) : (
|
||||||
|
<FontAwesomeIcon icon={faFileWord} className="w-5 h-5 text-primary"/>
|
||||||
|
)}
|
||||||
|
<span className="font-['ADLaM_Display'] text-primary">
|
||||||
|
{isParsing ? t('importBook.parsing') : t('importBook.pickFile')}
|
||||||
|
</span>
|
||||||
|
<input
|
||||||
|
type="file"
|
||||||
|
accept={DOCX_ACCEPT}
|
||||||
|
onChange={handleFileChange}
|
||||||
|
className="hidden"
|
||||||
|
disabled={isParsing}
|
||||||
|
/>
|
||||||
|
</label>
|
||||||
|
|
||||||
|
{hasParsedFile && (
|
||||||
|
<>
|
||||||
|
<InputField icon={faBookOpen} fieldName={t("importBook.fields.type.label")} input={
|
||||||
|
<SelectBox
|
||||||
|
onChangeCallBack={(e: ChangeEvent<HTMLSelectElement>): void => setSelectedBookType(e.target.value)}
|
||||||
|
data={bookTypes.map((types: SelectBoxProps): SelectBoxProps => ({
|
||||||
|
value: types.value,
|
||||||
|
label: t(types.label)
|
||||||
|
}))}
|
||||||
|
defaultValue={selectedBookType}
|
||||||
|
/>
|
||||||
|
}/>
|
||||||
|
|
||||||
|
<InputField icon={faBook} fieldName={t("importBook.fields.title.label")} input={
|
||||||
|
<TextInput
|
||||||
|
value={title}
|
||||||
|
setValue={(e: ChangeEvent<HTMLInputElement>): void => setTitle(e.target.value)}
|
||||||
|
placeholder={t("importBook.fields.title.placeholder")}
|
||||||
|
/>
|
||||||
|
}/>
|
||||||
|
|
||||||
|
<InputField icon={faBookmark} fieldName={t("importBook.fields.subTitle.label")} input={
|
||||||
|
<TextInput
|
||||||
|
value={subTitle}
|
||||||
|
setValue={(e: ChangeEvent<HTMLInputElement>): void => setSubTitle(e.target.value)}
|
||||||
|
placeholder={t("importBook.fields.subTitle.placeholder")}
|
||||||
|
/>
|
||||||
|
}/>
|
||||||
|
|
||||||
|
<InputField icon={faBook} fieldName={t("importBook.fields.summary.label")} input={
|
||||||
|
<TexteAreaInput
|
||||||
|
value={summary}
|
||||||
|
setValue={(e: ChangeEvent<HTMLTextAreaElement>): void => setSummary(e.target.value)}
|
||||||
|
placeholder={t("importBook.fields.summary.placeholder")}
|
||||||
|
/>
|
||||||
|
}/>
|
||||||
|
|
||||||
|
<InputField icon={faLayerGroup} fieldName={t("importBook.fields.version.label")} input={
|
||||||
|
<SelectBox
|
||||||
|
onChangeCallBack={(e: ChangeEvent<HTMLSelectElement>): void => setSelectedVersion(e.target.value)}
|
||||||
|
data={chapterVersions.map((version: SelectBoxProps): SelectBoxProps => ({
|
||||||
|
value: version.value,
|
||||||
|
label: t(version.label)
|
||||||
|
}))}
|
||||||
|
defaultValue={selectedVersion}
|
||||||
|
/>
|
||||||
|
}/>
|
||||||
|
|
||||||
|
<div className="mt-4">
|
||||||
|
<div className="flex justify-between items-center mb-3">
|
||||||
|
<h3 className="font-['ADLaM_Display'] text-lg text-text-primary">
|
||||||
|
{t('importBook.chapters.title')}
|
||||||
|
</h3>
|
||||||
|
<span className="text-sm text-muted">
|
||||||
|
{t('importBook.chaptersDetected', {count: chapters.length})}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button
|
||||||
|
onClick={(): void => toggleAllChapters(selectedCount < chapters.length)}
|
||||||
|
className="text-sm text-primary hover:text-primary/80 mb-3 transition-colors"
|
||||||
|
>
|
||||||
|
{selectedCount === chapters.length
|
||||||
|
? t('importBook.chapters.deselectAll')
|
||||||
|
: t('importBook.chapters.selectAll')}
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<div className="space-y-1">
|
||||||
|
{chapters.map((chapter: ImportChapterSelection) => (
|
||||||
|
<button
|
||||||
|
key={chapter.index}
|
||||||
|
onClick={(): void => toggleChapter(chapter.index)}
|
||||||
|
className="flex items-center gap-3 w-full py-2 px-3 rounded-lg hover:bg-secondary/30 transition-colors text-left"
|
||||||
|
>
|
||||||
|
<FontAwesomeIcon
|
||||||
|
icon={chapter.selected ? faSquareCheck : faSquare}
|
||||||
|
className={`w-4 h-4 ${chapter.selected ? 'text-primary' : 'text-muted'}`}
|
||||||
|
/>
|
||||||
|
<div className="flex-1 min-w-0">
|
||||||
|
<p className={`text-sm truncate ${chapter.selected ? 'text-text-primary' : 'text-muted'}`}>
|
||||||
|
{chapter.title}
|
||||||
|
</p>
|
||||||
|
<p className="text-xs text-muted">
|
||||||
|
{t('importBook.chapters.words', {count: chapter.wordCount})}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{hasParsedFile && (
|
||||||
|
<div className="flex justify-between items-center p-5 border-t border-secondary/50 bg-secondary/20 rounded-b-2xl">
|
||||||
|
<div></div>
|
||||||
|
<div className="flex gap-3">
|
||||||
|
<CancelButton callBackFunction={() => setCloseForm(false)}/>
|
||||||
|
<SubmitButtonWLoading
|
||||||
|
callBackAction={handleImport}
|
||||||
|
isLoading={isImporting}
|
||||||
|
text={t("importBook.submit")}
|
||||||
|
loadingText={t("importBook.importing")}
|
||||||
|
icon={faFileImport}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
230
components/book/settings/ExportSetting.tsx
Normal file
230
components/book/settings/ExportSetting.tsx
Normal file
@@ -0,0 +1,230 @@
|
|||||||
|
'use client'
|
||||||
|
import React, {useCallback, useContext, useEffect, useState} from 'react';
|
||||||
|
import {useTranslations} from 'next-intl';
|
||||||
|
import {BookContext} from '@/context/BookContext';
|
||||||
|
import {AlertContext} from '@/context/AlertContext';
|
||||||
|
import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
|
||||||
|
import {faDownload, faSpinner} from '@fortawesome/free-solid-svg-icons';
|
||||||
|
import {
|
||||||
|
ChapterExportInfo,
|
||||||
|
ChapterExportSelection,
|
||||||
|
chapterVersions,
|
||||||
|
ExportFormat
|
||||||
|
} from '@/lib/models/Chapter';
|
||||||
|
|
||||||
|
const exportFormats: {value: ExportFormat; label: string}[] = [
|
||||||
|
{value: 'epub', label: 'EPUB'},
|
||||||
|
{value: 'pdf', label: 'PDF'},
|
||||||
|
{value: 'docx', label: 'DOCX'},
|
||||||
|
];
|
||||||
|
|
||||||
|
export default function ExportSetting(): React.JSX.Element {
|
||||||
|
const t = useTranslations();
|
||||||
|
const {book} = useContext(BookContext);
|
||||||
|
const {errorMessage, successMessage} = useContext(AlertContext);
|
||||||
|
|
||||||
|
const [format, setFormat] = useState<ExportFormat>('epub');
|
||||||
|
const [chapters, setChapters] = useState<ChapterExportInfo[]>([]);
|
||||||
|
const [selections, setSelections] = useState<ChapterExportSelection[]>([]);
|
||||||
|
const [isLoading, setIsLoading] = useState<boolean>(true);
|
||||||
|
const [isExporting, setIsExporting] = useState<boolean>(false);
|
||||||
|
|
||||||
|
const loadChapters = useCallback(async (): Promise<void> => {
|
||||||
|
if (!book) return;
|
||||||
|
setIsLoading(true);
|
||||||
|
try {
|
||||||
|
const chaptersInfo: ChapterExportInfo[] = await window.electron.invoke<ChapterExportInfo[]>(
|
||||||
|
'db:book:export:info',
|
||||||
|
{bookId: book.bookId}
|
||||||
|
);
|
||||||
|
setChapters(chaptersInfo);
|
||||||
|
const initialSelections: ChapterExportSelection[] = chaptersInfo.map(
|
||||||
|
(ch: ChapterExportInfo): ChapterExportSelection => ({
|
||||||
|
chapterId: ch.chapterId,
|
||||||
|
version: ch.availableVersions[ch.availableVersions.length - 1],
|
||||||
|
selected: true
|
||||||
|
})
|
||||||
|
);
|
||||||
|
setSelections(initialSelections);
|
||||||
|
} catch {
|
||||||
|
errorMessage(t('exportOption.error'));
|
||||||
|
} finally {
|
||||||
|
setIsLoading(false);
|
||||||
|
}
|
||||||
|
}, [book]);
|
||||||
|
|
||||||
|
useEffect((): void => {
|
||||||
|
loadChapters();
|
||||||
|
}, [loadChapters]);
|
||||||
|
|
||||||
|
function toggleChapter(chapterId: string): void {
|
||||||
|
setSelections((prev: ChapterExportSelection[]): ChapterExportSelection[] =>
|
||||||
|
prev.map((s: ChapterExportSelection): ChapterExportSelection =>
|
||||||
|
s.chapterId === chapterId ? {...s, selected: !s.selected} : s
|
||||||
|
)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function toggleAll(selectAll: boolean): void {
|
||||||
|
setSelections((prev: ChapterExportSelection[]): ChapterExportSelection[] =>
|
||||||
|
prev.map((s: ChapterExportSelection): ChapterExportSelection => ({...s, selected: selectAll}))
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function updateVersion(chapterId: string, version: number): void {
|
||||||
|
setSelections((prev: ChapterExportSelection[]): ChapterExportSelection[] =>
|
||||||
|
prev.map((s: ChapterExportSelection): ChapterExportSelection =>
|
||||||
|
s.chapterId === chapterId ? {...s, version} : s
|
||||||
|
)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function getVersionLabel(version: number): string {
|
||||||
|
const found = chapterVersions.find((v) => v.value === String(version));
|
||||||
|
return found ? t(found.label) : `v${version}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
async function handleExport(): Promise<void> {
|
||||||
|
if (!book) return;
|
||||||
|
setIsExporting(true);
|
||||||
|
try {
|
||||||
|
const selectedChapters = selections
|
||||||
|
.filter((s: ChapterExportSelection): boolean => s.selected)
|
||||||
|
.map((s: ChapterExportSelection) => ({chapterId: s.chapterId, version: s.version}));
|
||||||
|
|
||||||
|
const result: boolean = await window.electron.invoke<boolean>('db:book:export', {
|
||||||
|
bookId: book.bookId,
|
||||||
|
format,
|
||||||
|
selections: selectedChapters.length === chapters.length ? null : selectedChapters
|
||||||
|
});
|
||||||
|
|
||||||
|
if (result) {
|
||||||
|
successMessage(t('exportOption.success'));
|
||||||
|
}
|
||||||
|
} catch {
|
||||||
|
errorMessage(t('exportOption.error'));
|
||||||
|
} finally {
|
||||||
|
setIsExporting(false);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const allSelected: boolean = selections.every((s: ChapterExportSelection): boolean => s.selected);
|
||||||
|
const hasSelection: boolean = selections.some((s: ChapterExportSelection): boolean => s.selected);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="space-y-6 p-4">
|
||||||
|
<div>
|
||||||
|
<h3 className="text-text-primary font-semibold mb-2">{t('exportOption.format')}</h3>
|
||||||
|
<div className="flex gap-3">
|
||||||
|
{exportFormats.map(({value, label}) => (
|
||||||
|
<button
|
||||||
|
key={value}
|
||||||
|
type="button"
|
||||||
|
onClick={(): void => setFormat(value)}
|
||||||
|
className={`px-4 py-2 rounded-lg font-medium transition-all duration-200 ${
|
||||||
|
format === value
|
||||||
|
? 'bg-primary text-white shadow-md'
|
||||||
|
: 'bg-secondary/30 text-text-secondary hover:bg-secondary/50'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{label}
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<div className="flex items-center justify-between mb-3">
|
||||||
|
<h3 className="text-text-primary font-semibold">{t('exportOption.chapters')}</h3>
|
||||||
|
{chapters.length > 0 && (
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={(): void => toggleAll(!allSelected)}
|
||||||
|
className="text-sm text-primary hover:text-primary/80 transition-colors"
|
||||||
|
>
|
||||||
|
{allSelected ? t('exportOption.deselectAll') : t('exportOption.selectAll')}
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{isLoading ? (
|
||||||
|
<div className="flex items-center justify-center py-8">
|
||||||
|
<FontAwesomeIcon icon={faSpinner} className="w-6 h-6 text-primary animate-spin mr-2"/>
|
||||||
|
<span className="text-text-secondary">{t('exportOption.loadingChapters')}</span>
|
||||||
|
</div>
|
||||||
|
) : chapters.length === 0 ? (
|
||||||
|
<p className="text-text-secondary text-center py-8">{t('exportOption.noChapters')}</p>
|
||||||
|
) : (
|
||||||
|
<div className="space-y-2 max-h-96 overflow-y-auto pr-1">
|
||||||
|
{chapters.map((chapter: ChapterExportInfo) => {
|
||||||
|
const selection: ChapterExportSelection | undefined = selections.find(
|
||||||
|
(s: ChapterExportSelection): boolean => s.chapterId === chapter.chapterId
|
||||||
|
);
|
||||||
|
if (!selection) return null;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
key={chapter.chapterId}
|
||||||
|
className={`flex items-center justify-between p-3 rounded-lg transition-all duration-200 ${
|
||||||
|
selection.selected
|
||||||
|
? 'bg-primary/10 border border-primary/30'
|
||||||
|
: 'bg-secondary/20 border border-transparent'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
<label className="flex items-center gap-3 cursor-pointer flex-1">
|
||||||
|
<input
|
||||||
|
type="checkbox"
|
||||||
|
checked={selection.selected}
|
||||||
|
onChange={(): void => toggleChapter(chapter.chapterId)}
|
||||||
|
className="w-4 h-4 rounded accent-primary cursor-pointer"
|
||||||
|
/>
|
||||||
|
<span className={`text-sm ${
|
||||||
|
selection.selected ? 'text-text-primary' : 'text-text-secondary'
|
||||||
|
}`}>
|
||||||
|
{chapter.title}
|
||||||
|
</span>
|
||||||
|
</label>
|
||||||
|
|
||||||
|
{chapter.availableVersions.length > 1 && selection.selected && (
|
||||||
|
<select
|
||||||
|
value={selection.version}
|
||||||
|
onChange={(e: React.ChangeEvent<HTMLSelectElement>): void =>
|
||||||
|
updateVersion(chapter.chapterId, parseInt(e.target.value, 10))
|
||||||
|
}
|
||||||
|
className="text-xs bg-secondary/50 text-text-primary rounded-md px-2 py-1 border border-secondary/30 focus:outline-none focus:border-primary"
|
||||||
|
>
|
||||||
|
{chapter.availableVersions.map((v: number) => (
|
||||||
|
<option key={v} value={v}>
|
||||||
|
{getVersionLabel(v)}
|
||||||
|
</option>
|
||||||
|
))}
|
||||||
|
</select>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={handleExport}
|
||||||
|
disabled={isExporting || !hasSelection || isLoading}
|
||||||
|
className="w-full flex items-center justify-center gap-2 bg-primary hover:bg-primary/90 disabled:bg-primary/50 text-white font-semibold py-3 px-6 rounded-xl transition-all duration-200 shadow-md hover:shadow-lg disabled:cursor-not-allowed"
|
||||||
|
>
|
||||||
|
{isExporting ? (
|
||||||
|
<>
|
||||||
|
<FontAwesomeIcon icon={faSpinner} className="w-4 h-4 animate-spin"/>
|
||||||
|
{t('exportOption.exporting')}
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
<FontAwesomeIcon icon={faDownload} className="w-4 h-4"/>
|
||||||
|
{t('exportOption.export')}
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
211
electron/database/models/Export.ts
Normal file
211
electron/database/models/Export.ts
Normal file
@@ -0,0 +1,211 @@
|
|||||||
|
import {AlignmentType, Document, HeadingLevel, Packer, Paragraph, TextRun} from "docx";
|
||||||
|
import PDFDocument from "pdfkit";
|
||||||
|
import JSZip from "jszip";
|
||||||
|
import {mainStyle} from "./EpubStyle.js";
|
||||||
|
import Chapter, {ChapterContentData, CompleteChapterContent} from "./Chapter.js";
|
||||||
|
import {CompleteBookData} from "./Book.js";
|
||||||
|
import System from "../System.js";
|
||||||
|
|
||||||
|
export interface ExportResult {
|
||||||
|
buffer: Buffer;
|
||||||
|
fileName: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default class Export {
|
||||||
|
static async transformToDOCX(bookData: CompleteBookData): Promise<ExportResult> {
|
||||||
|
const bookTitle: string = bookData.title;
|
||||||
|
const filename: string = `${bookTitle}.docx`;
|
||||||
|
|
||||||
|
const docParagraphs: Paragraph[] = [];
|
||||||
|
|
||||||
|
docParagraphs.push(
|
||||||
|
new Paragraph({
|
||||||
|
children: [
|
||||||
|
new TextRun({text: bookTitle, bold: true, size: 48}),
|
||||||
|
],
|
||||||
|
alignment: AlignmentType.CENTER,
|
||||||
|
spacing: {after: 400},
|
||||||
|
})
|
||||||
|
);
|
||||||
|
|
||||||
|
if (bookData.subTitle) {
|
||||||
|
docParagraphs.push(
|
||||||
|
new Paragraph({
|
||||||
|
children: [
|
||||||
|
new TextRun({text: bookData.subTitle, italics: true, size: 32}),
|
||||||
|
],
|
||||||
|
alignment: AlignmentType.CENTER,
|
||||||
|
spacing: {after: 300},
|
||||||
|
})
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (bookData.summary) {
|
||||||
|
docParagraphs.push(
|
||||||
|
new Paragraph({
|
||||||
|
children: [
|
||||||
|
new TextRun({text: bookData.summary, size: 24, italics: true}),
|
||||||
|
],
|
||||||
|
alignment: AlignmentType.JUSTIFIED,
|
||||||
|
spacing: {after: 400},
|
||||||
|
})
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const chapters: ChapterContentData[] = Chapter.getChaptersOrSheet(bookData.chapters);
|
||||||
|
|
||||||
|
for (const chapter of chapters) {
|
||||||
|
if (!chapter.content) continue;
|
||||||
|
|
||||||
|
docParagraphs.push(
|
||||||
|
new Paragraph({
|
||||||
|
text: chapter.title,
|
||||||
|
heading: HeadingLevel.HEADING_1,
|
||||||
|
pageBreakBefore: true,
|
||||||
|
alignment: AlignmentType.CENTER,
|
||||||
|
spacing: {after: 200},
|
||||||
|
})
|
||||||
|
);
|
||||||
|
|
||||||
|
const paragraphs: string[] = chapter.content.split(/\r?\n/);
|
||||||
|
|
||||||
|
for (const paragraph of paragraphs) {
|
||||||
|
if (paragraph.trim() === "") continue;
|
||||||
|
docParagraphs.push(
|
||||||
|
new Paragraph({
|
||||||
|
children: [new TextRun({text: paragraph, size: 24})],
|
||||||
|
alignment: AlignmentType.JUSTIFIED,
|
||||||
|
spacing: {after: 200},
|
||||||
|
})
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const doc: Document = new Document({
|
||||||
|
sections: [{children: docParagraphs}],
|
||||||
|
});
|
||||||
|
|
||||||
|
const buffer: Buffer = await Packer.toBuffer(doc) as Buffer;
|
||||||
|
|
||||||
|
return {buffer, fileName: filename};
|
||||||
|
}
|
||||||
|
|
||||||
|
static async transformToPDF(bookData: CompleteBookData): Promise<ExportResult> {
|
||||||
|
const bookTitle: string = bookData.title;
|
||||||
|
const filename: string = `${bookTitle}.pdf`;
|
||||||
|
const chunks: Buffer[] = [];
|
||||||
|
const pdfDoc: PDFKit.PDFDocument = new PDFDocument();
|
||||||
|
|
||||||
|
pdfDoc.on('data', (chunk: Buffer): void => {
|
||||||
|
chunks.push(chunk);
|
||||||
|
});
|
||||||
|
|
||||||
|
pdfDoc.fontSize(20).text(bookTitle, {align: 'center'});
|
||||||
|
pdfDoc.moveDown();
|
||||||
|
|
||||||
|
if (bookData.subTitle && bookData.subTitle.trim() !== '') {
|
||||||
|
pdfDoc.fontSize(16).text(bookData.subTitle, {align: 'center'});
|
||||||
|
pdfDoc.moveDown();
|
||||||
|
}
|
||||||
|
|
||||||
|
if (bookData.summary && bookData.summary.trim() !== '') {
|
||||||
|
pdfDoc.fontSize(12).text(bookData.summary, {align: 'justify'});
|
||||||
|
pdfDoc.moveDown();
|
||||||
|
}
|
||||||
|
|
||||||
|
const chapters: ChapterContentData[] = Chapter.getChaptersOrSheet(bookData.chapters);
|
||||||
|
|
||||||
|
for (const chapter of chapters) {
|
||||||
|
if (!chapter.content) continue;
|
||||||
|
pdfDoc.addPage();
|
||||||
|
pdfDoc.fontSize(16).text(chapter.title, {align: 'center'});
|
||||||
|
pdfDoc.moveDown();
|
||||||
|
pdfDoc.fontSize(12).text(chapter.content, {align: 'justify'});
|
||||||
|
}
|
||||||
|
|
||||||
|
pdfDoc.end();
|
||||||
|
|
||||||
|
await new Promise<void>((resolve: () => void, reject: (reason: Error) => void) => {
|
||||||
|
pdfDoc.on('end', resolve);
|
||||||
|
pdfDoc.on('error', reject);
|
||||||
|
});
|
||||||
|
|
||||||
|
const pdfBuffer: Buffer = Buffer.concat(chunks);
|
||||||
|
return {buffer: pdfBuffer, fileName: filename};
|
||||||
|
}
|
||||||
|
|
||||||
|
static async transformToEpub(bookData: CompleteBookData): Promise<ExportResult> {
|
||||||
|
const bookTitle: string = bookData.title;
|
||||||
|
const bookId: string = bookData.bookId;
|
||||||
|
const epub: JSZip = new JSZip();
|
||||||
|
|
||||||
|
epub.file('mimetype', 'application/epub+zip', {compression: 'STORE'});
|
||||||
|
epub.file('META-INF/container.xml', `<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<container version="1.0" xmlns="urn:oasis:names:tc:opendocument:xmlns:container">
|
||||||
|
<rootfiles>
|
||||||
|
<rootfile full-path="OEBPS/content.opf" media-type="application/oebps-package+xml"/>
|
||||||
|
</rootfiles>
|
||||||
|
</container>`);
|
||||||
|
|
||||||
|
let contentOpf: string = `<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<package xmlns="http://www.idpf.org/2007/opf" version="2.0" unique-identifier="ERitors-${bookId}">
|
||||||
|
<metadata xmlns:dc="http://purl.org/dc/elements/1.1/">
|
||||||
|
<dc:title>${bookTitle}${bookData.subTitle ? ' - ' + bookData.subTitle : ''}</dc:title>
|
||||||
|
<dc:language>fr</dc:language>
|
||||||
|
<dc:identifier id="ERitors-${bookId}">urn:uuid:${bookId}</dc:identifier>
|
||||||
|
<dc:creator>${bookData.userInfos.firstName} ${bookData.userInfos.lastName}</dc:creator>
|
||||||
|
<dc:publisher>ERitors Scribe</dc:publisher>
|
||||||
|
<meta name="cover" content="cover-image-id" />
|
||||||
|
</metadata>
|
||||||
|
<manifest>`;
|
||||||
|
|
||||||
|
let spine: string = `<spine toc="toc">`;
|
||||||
|
|
||||||
|
const hasRegularChapters: boolean = bookData.chapters.some(
|
||||||
|
(chapter: CompleteChapterContent): boolean => chapter.order > 0
|
||||||
|
);
|
||||||
|
const chaptersToExport: CompleteChapterContent[] = hasRegularChapters
|
||||||
|
? bookData.chapters.filter((chapter: CompleteChapterContent): boolean => chapter.order > 0)
|
||||||
|
: bookData.chapters.filter((chapter: CompleteChapterContent): boolean => chapter.order === -1);
|
||||||
|
|
||||||
|
for (const chapter of chaptersToExport) {
|
||||||
|
if (!chapter.content) continue;
|
||||||
|
const chapterIndex: string = `chapter${chapter.order}`;
|
||||||
|
const htmlContent: string = Chapter.tipTapToHtml(JSON.parse(chapter.content) as JSON);
|
||||||
|
|
||||||
|
const xhtmlPage: string = `<?xml version="1.0" encoding="utf-8"?>
|
||||||
|
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||||
|
<head>
|
||||||
|
<title>${chapter.title}</title>
|
||||||
|
<link rel="stylesheet" type="text/css" href="styles.css"/>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
${htmlContent}
|
||||||
|
</body>
|
||||||
|
</html>`;
|
||||||
|
|
||||||
|
epub.file(`OEBPS/${chapterIndex}.xhtml`, xhtmlPage);
|
||||||
|
contentOpf += `<item id="${chapterIndex}" href="${chapterIndex}.xhtml" media-type="application/xhtml+xml"/>`;
|
||||||
|
spine += `<itemref idref="${chapterIndex}" linear="yes"/>`;
|
||||||
|
}
|
||||||
|
|
||||||
|
spine += `</spine>`;
|
||||||
|
|
||||||
|
contentOpf += `<item id="toc" href="toc.ncx" media-type="application/x-dtbncx+xml"/>
|
||||||
|
<item id="style" href="styles.css" media-type="text/css"/>`;
|
||||||
|
contentOpf += spine;
|
||||||
|
contentOpf += `</package>`;
|
||||||
|
|
||||||
|
epub.file('OEBPS/content.opf', contentOpf);
|
||||||
|
epub.file('OEBPS/styles.css', mainStyle);
|
||||||
|
|
||||||
|
if (bookData.coverImage) {
|
||||||
|
const imageBuffer: Buffer = Buffer.from(bookData.coverImage, 'base64');
|
||||||
|
epub.file('OEBPS/cover.jpg', imageBuffer);
|
||||||
|
}
|
||||||
|
|
||||||
|
const epubBuffer: Buffer = await epub.generateAsync({type: 'nodebuffer'}) as Buffer;
|
||||||
|
|
||||||
|
return {buffer: epubBuffer, fileName: `${bookTitle}.epub`};
|
||||||
|
}
|
||||||
|
}
|
||||||
19
lib/configs.ts
Normal file
19
lib/configs.ts
Normal file
@@ -0,0 +1,19 @@
|
|||||||
|
import packageJson from '../package.json';
|
||||||
|
|
||||||
|
export interface Configs {
|
||||||
|
apiUrl: string;
|
||||||
|
baseUrl: string;
|
||||||
|
appName: string;
|
||||||
|
appDescription: string;
|
||||||
|
appVersion: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
const isProduction: boolean = true;
|
||||||
|
|
||||||
|
export const configs: Configs = {
|
||||||
|
apiUrl: isProduction ? 'https://api.eritors.com/' : 'http://localhost:3001/',
|
||||||
|
baseUrl: isProduction ? 'https://scribe.eritors.com/' : 'http://localhost:3000/',
|
||||||
|
appName: 'ERitors Scribe',
|
||||||
|
appDescription: 'ERitors Scribe est une application de prise de notes et d\'écriture collaborative.',
|
||||||
|
appVersion: packageJson.version,
|
||||||
|
};
|
||||||
17
lib/models/Import.ts
Normal file
17
lib/models/Import.ts
Normal file
@@ -0,0 +1,17 @@
|
|||||||
|
export interface ParsedChapterPreview {
|
||||||
|
index: number;
|
||||||
|
title: string;
|
||||||
|
wordCount: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface ParsedDocxResponse {
|
||||||
|
importId: string;
|
||||||
|
chapters: ParsedChapterPreview[];
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface ImportChapterSelection {
|
||||||
|
index: number;
|
||||||
|
title: string;
|
||||||
|
wordCount: number;
|
||||||
|
selected: boolean;
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user