- Add multi-language support for registration and user menu components

- Refactor `TextEditor` to include book-closing functionality with updated toolbar buttons - Replace `generateHTML` with a lightweight custom TipTap-to-HTML renderer - Update and lock `esbuild` and related dependencies to latest versions
2025-12-23 23:24:17 -05:00
parent 1f2513d565
commit 0366a2d444
10 changed files with 728 additions and 537 deletions
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -162,6 +162,8 @@ function ScribeContent() {
    useEffect((): void => {
        if (currentBook) {
            getLastChapter().then();
+        } else {
+            getBooks().then();
        }
    }, [currentBook]);
    
--- a/components/UserMenu.tsx
+++ b/components/UserMenu.tsx
@@ -2,9 +2,11 @@ import {useContext, useEffect, useRef, useState} from "react";
 import {SessionContext} from "@/context/SessionContext";
 import NoPicture from "@/components/NoPicture";
 import System from "@/lib/models/System";
+import {useTranslations} from "next-intl";

 export default function UserMenu() {
    const {session} = useContext(SessionContext);
+    const t = useTranslations();
    
    const profileMenuRef: React.RefObject<HTMLDivElement | null> = useRef<HTMLDivElement>(null);

@@ -32,15 +34,8 @@ export default function UserMenu() {
    
    async function handleLogout(): Promise<void> {
        System.removeCookie("token");
-
-        // Si dans Electron, utiliser IPC pour logout
-        if (window.electron) {
-            await window.electron.removeToken();
-            window.electron.logout();
-        } else {
-            // Fallback web
-            document.location.href = "https://eritors.com/login";
-        }
+        await window.electron.removeToken();
+        window.electron.logout();
    }

    return (
@@ -64,11 +59,11 @@ export default function UserMenu() {
                    <a href="https://eritors.com/settings"
                       className="group flex items-center gap-3 px-4 py-2.5 text-text-primary hover:bg-secondary/50 transition-all hover:pl-5">
                        <span
-                            className="text-sm font-medium group-hover:text-primary transition-colors">Paramètres</span>
+                            className="text-sm font-medium group-hover:text-primary transition-colors">{t('userMenu.settings')}</span>
                    </a>
                    <a onClick={handleLogout} href="#"
                       className="group flex items-center gap-3 px-4 py-2.5 text-error hover:bg-error/10 transition-all hover:pl-5 rounded-b-xl">
-                        <span className="text-sm font-medium">Déconnexion</span>
+                        <span className="text-sm font-medium">{t('userMenu.logout')}</span>
                    </a>
                </div>
            )}
--- a/components/editor/TextEditor.tsx
+++ b/components/editor/TextEditor.tsx
@@ -15,7 +15,8 @@ import {
    faListOl,
    faListUl,
    faParagraph,
-    faUnderline
+    faUnderline,
+    faXmark
 } from '@fortawesome/free-solid-svg-icons';
 import {EditorContext} from "@/context/EditorContext";
 import {ChapterContext} from '@/context/ChapterContext';
@@ -135,8 +136,8 @@ export default function TextEditor() {
    const t = useTranslations();
    const {lang} = useContext<LangContextProps>(LangContext)
    const {editor} = useContext(EditorContext);
-    const {chapter} = useContext(ChapterContext);
-    const {book} = useContext(BookContext);
+    const {chapter, setChapter} = useContext(ChapterContext);
+    const {book, setBook} = useContext(BookContext);
    const {errorMessage, successMessage} = useContext(AlertContext);
    const {session} = useContext(SessionContext);
    const {isCurrentlyOffline} = useContext<OfflineContextType>(OfflineContext);
@@ -146,6 +147,7 @@ export default function TextEditor() {
    const [showGhostWriter, setShowGhostWriter] = useState<boolean>(false);
    const [showUserSettings, setShowUserSettings] = useState<boolean>(false);
    const [isSaving, setIsSaving] = useState<boolean>(false);
+    const [isClosing, setIsClosing] = useState<boolean>(false);
    const [editorSettings, setEditorSettings] = useState<EditorDisplaySettings>(DEFAULT_EDITOR_SETTINGS);
    const [editorClasses, setEditorClasses] = useState<EditorClasses>({
        base: 'text-lg font-serif leading-normal',
@@ -351,6 +353,14 @@ export default function TextEditor() {
        setShowDraftCompanion(false);
        setShowGhostWriter(false);
    }, []);
+
+    const handleCloseBook: () => Promise<void> = useCallback(async (): Promise<void> => {
+        setIsClosing(true);
+        await saveContent();
+        setBook && setBook(null);
+        setChapter && setChapter(undefined);
+        setIsClosing(false);
+    }, [saveContent, setBook, setChapter]);
    
    useEffect((): void => {
        if (!editor) return;
@@ -454,25 +464,25 @@ export default function TextEditor() {
    return (
        <div className="flex flex-col flex-1 w-full h-full">
            <div
-                className={`flex justify-between gap-3 border-b border-secondary/30 px-4 py-3 bg-gradient-to-b from-dark-background/80 to-dark-background/50 backdrop-blur-sm transition-opacity duration-300 shadow-md ${editorSettings.focusMode ? 'opacity-70 hover:opacity-100' : ''}`}>
-                <div className="flex flex-wrap gap-1">
+                className={`flex justify-between gap-2 lg:gap-3 border-b border-secondary/30 px-2 lg:px-4 py-2 lg:py-3 bg-gradient-to-b from-dark-background/80 to-dark-background/50 backdrop-blur-sm transition-opacity duration-300 shadow-md overflow-x-auto ${editorSettings.focusMode ? 'opacity-70 hover:opacity-100' : ''}`}>
+                <div className="flex gap-1 flex-shrink-0">
                    {toolbarButtons.map((button: ToolbarButton, index: number) => (
                        <button
                            key={index}
                            onClick={button.action}
-                            className={`group flex items-center px-3 py-2 rounded-lg transition-all duration-200 ${button.isActive ? 'bg-primary text-text-primary shadow-md shadow-primary/30 scale-105' : 'text-muted hover:text-text-primary hover:bg-secondary/50 hover:shadow-sm hover:scale-105'}`}
+                            className={`group flex items-center px-2 lg:px-3 py-1.5 lg:py-2 rounded-lg transition-all duration-200 flex-shrink-0 ${button.isActive ? 'bg-primary text-text-primary shadow-md shadow-primary/30 scale-105' : 'text-muted hover:text-text-primary hover:bg-secondary/50 hover:shadow-sm hover:scale-105'}`}
                        >
-                            <FontAwesomeIcon icon={button.icon} className={'w-4 h-4 transition-transform duration-200 group-hover:scale-110'}/>
+                            <FontAwesomeIcon icon={button.icon} className={'w-3.5 h-3.5 lg:w-4 lg:h-4 transition-transform duration-200 group-hover:scale-110'}/>
                            {
                                button.label &&
-                                <span className="ml-2 text-sm font-medium">
+                                <span className="ml-1 lg:ml-2 text-xs lg:text-sm font-medium">
                                {t(`textEditor.toolbar.${button.label}`)}
                            </span>
                            }
                        </button>
                    ))}
                </div>
-                <div className="flex items-center gap-2">
+                <div className="flex items-center gap-2 flex-shrink-0">
                    <CollapsableButton
                        showCollapsable={showUserSettings}
                        text={t("textEditor.preferences")}
@@ -495,13 +505,30 @@ export default function TextEditor() {
                            icon={faLayerGroup}
                        />
                    )}
-                    <SubmitButtonWLoading
-                        callBackAction={saveContent}
-                        isLoading={isSaving}
-                        text={t("textEditor.save")}
-                        loadingText={t("textEditor.saving")}
-                        icon={faFloppyDisk}
-                    />
+                    <button
+                        onClick={saveContent}
+                        disabled={isSaving}
+                        className={`group py-2.5 px-3 lg:px-5 rounded-lg font-semibold transition-all flex items-center justify-center gap-2 relative overflow-hidden ${
+                            isSaving
+                                ? 'bg-secondary cursor-not-allowed opacity-75'
+                                : 'bg-secondary/80 hover:bg-secondary shadow-md hover:shadow-lg hover:shadow-primary/20 hover:scale-105 border border-secondary/50 hover:border-primary/30'
+                        }`}
+                    >
+                        <FontAwesomeIcon icon={faFloppyDisk} className="w-4 h-4 transition-transform group-hover:scale-110 text-primary" />
+                        <span className="hidden lg:inline text-sm text-primary">{isSaving ? t("textEditor.saving") : t("textEditor.save")}</span>
+                    </button>
+                    <button
+                        onClick={handleCloseBook}
+                        disabled={isClosing}
+                        className={`group py-2.5 px-3 lg:px-5 rounded-lg font-semibold transition-all flex items-center justify-center gap-2 relative overflow-hidden ${
+                            isClosing
+                                ? 'bg-secondary/30 cursor-not-allowed opacity-75'
+                                : 'bg-secondary/30 text-muted hover:text-text-primary hover:bg-secondary hover:shadow-sm hover:scale-105'
+                        }`}
+                    >
+                        <FontAwesomeIcon icon={faXmark} className="w-4 h-4 transition-transform duration-200 group-hover:scale-110" />
+                        <span className="hidden lg:inline text-sm">{t("textEditor.close")}</span>
+                    </button>
                </div>
            </div>

--- a/components/offline/OfflinePinVerify.tsx
+++ b/components/offline/OfflinePinVerify.tsx
@@ -3,7 +3,8 @@
 import { useState } from 'react';
 import { useTranslations } from 'next-intl';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faLock, faWifi, faEye, faEyeSlash } from '@fortawesome/free-solid-svg-icons';
+import { faLock, faWifi, faEye, faEyeSlash, faSignOutAlt } from '@fortawesome/free-solid-svg-icons';
+import System from '@/lib/models/System';

 interface OfflinePinVerifyProps {
  onSuccess: (userId: string) => void;
@@ -59,6 +60,12 @@ export default function OfflinePinVerify({ onSuccess, onCancel }: OfflinePinVeri
    }
  };

+  const handleLogout = async () => {
+    System.removeCookie("token");
+    await window.electron.removeToken();
+    window.electron.logout();
+  };
+
  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center bg-background">
      <div className="bg-tertiary rounded-2xl p-6 max-w-md w-full mx-4 shadow-2xl">
@@ -118,6 +125,14 @@ export default function OfflinePinVerify({ onSuccess, onCancel }: OfflinePinVeri

        {/* Actions */}
        <div className="flex gap-3">
+          <button
+            onClick={handleLogout}
+            className="flex-1 px-4 py-2 text-error hover:bg-error/10 rounded-lg transition-all flex items-center justify-center gap-2"
+            disabled={isLoading}
+          >
+            <FontAwesomeIcon icon={faSignOutAlt} className="w-4 h-4" />
+            <span className="text-sm font-medium">{t('userMenu.logout')}</span>
+          </button>
          {onCancel && (
            <button
              onClick={onCancel}
--- a/electron/database/models/Chapter.ts
+++ b/electron/database/models/Chapter.ts
@@ -1,5 +1,3 @@
-import StarterKit from '@tiptap/starter-kit'
-import TextAlign from '@tiptap/extension-text-align'
 import ChapterRepo, {
    ActChapterQuery,
    ChapterQueryResult,
@@ -11,7 +9,6 @@ import ChapterRepo, {
 } from "../repositories/chapter.repository.js";
 import System from "../System.js";
 import {getUserEncryptionKey} from "../keyManager.js";
-import { generateHTML } from "@tiptap/react";

 export interface ChapterContent {
    version: number;
@@ -303,25 +300,92 @@ export default class Chapter {
    }

    static tipTapToHtml(tipTapContent: JSON): string {
-        const fixNode = (node: Record<string, unknown>): Record<string, unknown> => {
-            if (!node) return node;
+        interface TipTapNode {
+            type?: string;
+            text?: string;
+            content?: TipTapNode[];
+            attrs?: Record<string, unknown>;
+            marks?: Array<{ type: string; attrs?: Record<string, unknown> }>;
+        }

-            if (node.type === 'text' && (!node.text || node.text === '')) {
-                node.text = '\u00A0';
-            }
-
-            if (Array.isArray(node.content) && node.content.length) {
-                node.content = node.content.map(fixNode);
-            }
-
-            return node;
+        const escapeHtml = (text: string): string => {
+            return text
+                .replace(/&/g, '&amp;')
+                .replace(/</g, '&lt;')
+                .replace(/>/g, '&gt;')
+                .replace(/"/g, '&quot;')
+                .replace(/'/g, '&#039;');
        };

-        return generateHTML(fixNode(tipTapContent as unknown as Record<string, unknown>), [
-            StarterKit,
-            TextAlign.configure({
-                types: ['heading', 'paragraph'],
-            }),
-        ]);
+        const renderMarks = (text: string, marks?: Array<{ type: string; attrs?: Record<string, unknown> }>): string => {
+            if (!marks || marks.length === 0) return escapeHtml(text);
+
+            let result = escapeHtml(text);
+            marks.forEach((mark) => {
+                switch (mark.type) {
+                    case 'bold':
+                        result = `<strong>${result}</strong>`;
+                        break;
+                    case 'italic':
+                        result = `<em>${result}</em>`;
+                        break;
+                    case 'underline':
+                        result = `<u>${result}</u>`;
+                        break;
+                    case 'strike':
+                        result = `<s>${result}</s>`;
+                        break;
+                    case 'code':
+                        result = `<code>${result}</code>`;
+                        break;
+                    case 'link':
+                        const href = mark.attrs?.href || '#';
+                        result = `<a href="${escapeHtml(String(href))}">${result}</a>`;
+                        break;
+                }
+            });
+            return result;
+        };
+
+        const renderNode = (node: TipTapNode): string => {
+            if (!node) return '';
+
+            if (node.type === 'text') {
+                const textContent = node.text || '\u00A0';
+                return renderMarks(textContent, node.marks);
+            }
+
+            const children = node.content?.map(renderNode).join('') || '';
+            const textAlign = node.attrs?.textAlign ? ` style="text-align: ${node.attrs.textAlign}"` : '';
+
+            switch (node.type) {
+                case 'doc':
+                    return children;
+                case 'paragraph':
+                    return `<p${textAlign}>${children || '\u00A0'}</p>`;
+                case 'heading':
+                    const level = node.attrs?.level || 1;
+                    return `<h${level}${textAlign}>${children}</h${level}>`;
+                case 'bulletList':
+                    return `<ul>${children}</ul>`;
+                case 'orderedList':
+                    return `<ol>${children}</ol>`;
+                case 'listItem':
+                    return `<li>${children}</li>`;
+                case 'blockquote':
+                    return `<blockquote>${children}</blockquote>`;
+                case 'codeBlock':
+                    return `<pre><code>${children}</code></pre>`;
+                case 'hardBreak':
+                    return '<br />';
+                case 'horizontalRule':
+                    return '<hr />';
+                default:
+                    return children;
+            }
+        };
+
+        const contentNode = tipTapContent as unknown as TipTapNode;
+        return renderNode(contentNode);
    }
 }
--- a/electron/main.ts
+++ b/electron/main.ts
@@ -1,4 +1,4 @@
-import {app, BrowserWindow, ipcMain, IpcMainInvokeEvent, nativeImage, protocol, safeStorage, shell} from 'electron';
+import {app, BrowserWindow, ipcMain, IpcMainInvokeEvent, Menu, nativeImage, protocol, safeStorage, shell} from 'electron';
 import * as path from 'path';
 import {fileURLToPath} from 'url';
 import * as fs from 'fs';
@@ -21,11 +21,11 @@ const __dirname = path.dirname(__filename);

 const isDev = !app.isPackaged;

-// Enregistrer le protocole app:// comme standard (avant app.whenReady)
+// Enregistrer le protocole scribedesktop:// comme standard (avant app.whenReady)
 if (!isDev) {
  protocol.registerSchemesAsPrivileged([
    {
-      scheme: 'app',
+      scheme: 'scribedesktop',
      privileges: {
        standard: true,
        secure: true,
@@ -58,6 +58,7 @@ function createLoginWindow(): void {
    height: 900,
    resizable: false,
    ...(process.platform !== 'darwin' && { icon: iconPath }),
+    autoHideMenuBar: true,
    webPreferences: {
      preload: preloadPath,
      contextIsolation: true,
@@ -73,7 +74,7 @@ function createLoginWindow(): void {
    loginWindow.loadURL(`http://localhost:${devPort}/login/login`);
    loginWindow.webContents.openDevTools();
  } else {
-    loginWindow.loadURL('app://./login/login/index.html');
+    loginWindow.loadURL('scribedesktop://./login/login/index.html');
  }

  loginWindow.once('ready-to-show', () => {
@@ -90,6 +91,7 @@ function createMainWindow(): void {
    width: 1200,
    height: 800,
    ...(process.platform !== 'darwin' && { icon: iconPath }),
+    autoHideMenuBar: true,
    webPreferences: {
      preload: preloadPath,
      contextIsolation: true,
@@ -104,7 +106,7 @@ function createMainWindow(): void {
    mainWindow.loadURL(`http://localhost:${devPort}`);
    mainWindow.webContents.openDevTools();
  } else {
-    mainWindow.loadURL('app://./index.html');
+    mainWindow.loadURL('scribedesktop://./index.html');
  }

  mainWindow.once('ready-to-show', () => {
@@ -345,11 +347,24 @@ ipcMain.handle('db-initialize', (_event, userId: string, encryptionKey: string)
 });

 app.whenReady().then(():void => {
+  // Menu minimal pour garder les raccourcis DevTools
+  const template: Electron.MenuItemConstructorOptions[] = [
+    {
+      label: 'View',
+      submenu: [
+        { role: 'toggleDevTools' }
+      ]
+    }
+  ];
+
+  const menu = Menu.buildFromTemplate(template);
+  Menu.setApplicationMenu(menu);
+
  if (!isDev) {
    const outPath:string = path.join(process.resourcesPath, 'app.asar.unpacked/out');

-    protocol.handle('app', async (request) => {
-      let filePath:string = request.url.replace('app://', '').replace(/^\.\//, '');
+    protocol.handle('scribedesktop', async (request) => {
+      let filePath:string = request.url.replace('scribedesktop://', '').replace(/^\.\//, '');
      const fullPath:string = path.normalize(path.join(outPath, filePath));
      
      if (!fullPath.startsWith(outPath)) {
--- a/lib/locales/en.json
+++ b/lib/locales/en.json
@@ -44,6 +44,36 @@
    },
    "backToLogin": "Back to login"
  },
+  "registerStepOne": {
+    "fields": {
+      "firstName": {
+        "label": "First Name",
+        "placeholder": "Your first name"
+      },
+      "lastName": {
+        "label": "Last Name",
+        "placeholder": "Your last name"
+      },
+      "username": {
+        "label": "Username",
+        "placeholder": "Choose a username",
+        "note": "Username must be at least 3 characters"
+      },
+      "email": {
+        "label": "Email Address",
+        "placeholder": "your.email@example.com"
+      },
+      "password": {
+        "label": "Password",
+        "placeholder": "••••••••"
+      },
+      "repeatPassword": {
+        "label": "Confirm Password",
+        "placeholder": "••••••••"
+      }
+    },
+    "next": "Next"
+  },
  "resetPassword": {
    "title": "Forgot password",
    "subtitle": "Reset your password in a few simple steps",
@@ -429,6 +459,7 @@
    "draftCompanion": "Draft Companion",
    "save": "Save",
    "saving": "Saving...",
+    "close": "Close",
    "toolbar": {
      "1": "1",
      "2": "2",
@@ -901,6 +932,10 @@
      "close": "Close"
    }
  },
+  "userMenu": {
+    "settings": "Settings",
+    "logout": "Logout"
+  },
  "offline": {
    "mode": {
      "title": "Offline Mode",
--- a/lib/locales/fr.json
+++ b/lib/locales/fr.json
@@ -44,6 +44,36 @@
    },
    "backToLogin": "Retour à la connexion"
  },
+  "registerStepOne": {
+    "fields": {
+      "firstName": {
+        "label": "Prénom",
+        "placeholder": "Votre prénom"
+      },
+      "lastName": {
+        "label": "Nom",
+        "placeholder": "Votre nom"
+      },
+      "username": {
+        "label": "Nom d'utilisateur",
+        "placeholder": "Choisissez un nom d'utilisateur",
+        "note": "Le nom d'utilisateur doit contenir au moins 3 caractères"
+      },
+      "email": {
+        "label": "Adresse courriel",
+        "placeholder": "votre.courriel@exemple.com"
+      },
+      "password": {
+        "label": "Mot de passe",
+        "placeholder": "••••••••"
+      },
+      "repeatPassword": {
+        "label": "Confirmer le mot de passe",
+        "placeholder": "••••••••"
+      }
+    },
+    "next": "Suivant"
+  },
  "resetPassword": {
    "title": "Mot de passe oublié",
    "subtitle": "Réinitialisez votre mot de passe en quelques étapes simples",
@@ -429,6 +459,7 @@
    "draftCompanion": "Draft Companion",
    "save": "Enregistrer",
    "saving": "Enregistrement en cours...",
+    "close": "Fermer",
    "toolbar": {
      "1": "1",
      "2": "2",
@@ -902,6 +933,10 @@
      "close": "Fermer"
    }
  },
+  "userMenu": {
+    "settings": "Paramètres",
+    "logout": "Déconnexion"
+  },
  "offline": {
    "mode": {
      "title": "Mode Hors Ligne",
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -27,6 +27,7 @@
    "electron-builder": "^26.0.12",
    "electron-rebuild": "^3.2.9",
    "electronmon": "^2.0.4",
+    "esbuild": "^0.27.2",
    "tsx": "^4.20.6",
    "typescript": "^5.9.3",
    "vite": "^7.2.2",