Add openExternal IPC handler and integrate with UI components

- Introduce `openExternal` IPC handler in `electron/main.ts` for opening external links via the default browser or native app.
- Update typings in `electron.d.ts` and `preload.ts` to include `openExternal`.
- Refactor `ComposerRightBar` and `LeftBar` components to leverage `electron.openExternal` for external link actions (e.g., Facebook, Discord).
- Add offline mode logic to filter navigation options in `ComposerRightBar` and `LeftBar`.
- Enhance footer bar to display book titles when chapters are unavailable.

components/ScribeFooterBar.tsx

@@ -7,10 +7,12 @@ import {faBook, faChartSimple, faHeart, faSheetPlastic} from "@fortawesome/free-
 import {SessionContext} from "@/context/SessionContext";
 import {useTranslations} from "next-intl";
 import {AlertContext} from "@/context/AlertContext";
+import {BookContext} from "@/context/BookContext";
 
 export default function ScribeFooterBar() {
     const t = useTranslations();
     const {chapter} = useContext(ChapterContext);
+    const {book} = useContext(BookContext);
     const editor: Editor | null = useContext(EditorContext).editor;
     const {session} = useContext(SessionContext);
     const {errorMessage} = useContext(AlertContext)
@@ -51,15 +53,15 @@ export default function ScribeFooterBar() {
             <div>
                 <span className="flex items-center gap-2">
                     {chapter && (
-                        <span
+                        <span className="inline-flex items-center px-3 py-1 rounded-lg bg-primary/10 border border-primary/30">
-                            className="inline-flex items-center px-3 py-1 rounded-lg bg-primary/10 border border-primary/30">
                             <span className="text-primary font-bold text-sm">
                                 {chapter.chapterOrder < 0 ? t('scribeFooterBar.sheet') : `${chapter.chapterOrder}.`}
                             </span>
                         </span>
                     )}
                     <span className={'flex items-center gap-2 font-medium'}>
-                        {chapter?.title || (
+                        {
+                            chapter?.title || book?.title || (
                             <>
                                 <span>{t('scribeFooterBar.madeWith')}</span>
                                 <FontAwesomeIcon color={'red'} icon={faHeart} className={'w-4 h-4 animate-pulse'}/>
@@ -69,7 +71,7 @@ export default function ScribeFooterBar() {
                 </span>
             </div>
             {
-                chapter ? (
+                chapter || book ? (
                     <div className="flex items-center space-x-3">
                         <div
                             className="flex items-center gap-2 bg-secondary/50 px-4 py-2 rounded-xl border border-secondary shadow-sm">

components/leftbar/ScribeLeftBar.tsx

@@ -9,6 +9,7 @@ import AddNewBookForm from "@/components/book/AddNewBookForm";
 import ShortStoryGenerator from "@/components/ShortStoryGenerator";
 import {SessionContext} from "@/context/SessionContext";
 import {useTranslations} from "next-intl";
+import OfflineContext from "@/context/OfflineContext";
 
 export default function ScribeLeftBar() {
     const {book} = useContext(BookContext);
@@ -21,6 +22,7 @@ export default function ScribeLeftBar() {
     
     const [showAddNewBook, setShowAddNewBook] = useState<boolean>(false);
     const [showGenerateShortModal, setShowGenerateShortModal] = useState<boolean>(false)
+    const {isCurrentlyOffline} = useContext(OfflineContext)
     
     const editorComponents: PanelComponent[] = [
         {
@@ -76,7 +78,7 @@ export default function ScribeLeftBar() {
     return (
         <div id="left-panel-container" data-guide={"left-panel-container"} className="flex transition-all duration-300">
             <div className="bg-tertiary border-r border-secondary/50 p-3 flex flex-col space-y-3 shadow-xl">
-                {book ? editorComponents.map(component => (
+                {book ? editorComponents.map((component:PanelComponent) => (
                     <button
                         key={component.id}
                         onClick={(): void => {
@@ -97,6 +99,9 @@ export default function ScribeLeftBar() {
                     </button>
                 )) : (
                     homeComponents
+                        .filter((component: PanelComponent):boolean => {
+                            return !(isCurrentlyOffline() && component.id === 2);
+                        })
                         .map((component: PanelComponent) => (
                             <button
                                 key={component.id}

components/rightbar/ComposerRightBar.tsx

@@ -12,6 +12,7 @@ import LocationComponent from "@/components/book/settings/locations/LocationComp
 import CharacterComponent from "@/components/book/settings/characters/CharacterComponent";
 import QuillSense from "@/components/quillsense/QuillSenseComponent";
 import {useTranslations} from "next-intl";
+import OfflineContext, {OfflineContextType} from "@/context/OfflineContext";
 
 export default function ComposerRightBar() {
     const {book} = useContext(BookContext);
@@ -19,20 +20,16 @@ export default function ComposerRightBar() {
     
     const t = useTranslations();
     
+    const {isCurrentlyOffline} = useContext<OfflineContextType>(OfflineContext)
+    
     const [panelHidden, setPanelHidden] = useState<boolean>(false);
     const [currentPanel, setCurrentPanel] = useState<PanelComponent | undefined>()
     
     const [showAbout, setShowAbout] = useState<boolean>(false);
     
-    const worldRef: RefObject<{ handleSave: () => Promise<void> } | null> = useRef<{
+    const worldRef: RefObject<{ handleSave: () => Promise<void> } | null> = useRef<{ handleSave: () => Promise<void> }>(null);
-        handleSave: () => Promise<void>
+    const locationRef: RefObject<{ handleSave: () => Promise<void> } | null> = useRef<{ handleSave: () => Promise<void> }>(null);
-    }>(null);
+    const characterRef: RefObject<{ handleSave: () => Promise<void> } | null> = useRef<{ handleSave: () => Promise<void> }>(null);
-    const locationRef: RefObject<{ handleSave: () => Promise<void> } | null> = useRef<{
-        handleSave: () => Promise<void>
-    }>(null);
-    const characterRef: RefObject<{ handleSave: () => Promise<void> } | null> = useRef<{
-        handleSave: () => Promise<void>
-    }>(null);
     
     async function handleSaveClick(): Promise<void> {
         switch (currentPanel?.id) {
@@ -114,7 +111,7 @@ export default function ComposerRightBar() {
             description: t("composerRightBar.homeComponents.facebook.description"),
             badge: t("composerRightBar.homeComponents.facebook.badge"),
             icon: faFacebook,
-            action: () => window.open('https://www.facebook.com/profile.php?id=61562628720878', '_blank')
+            action: ():Promise<void> => window.electron.openExternal('https://www.facebook.com/profile.php?id=61562628720878')
         },
         {
             id: 3,
@@ -122,7 +119,7 @@ export default function ComposerRightBar() {
             description: t("composerRightBar.homeComponents.discord.description"),
             badge: t("composerRightBar.homeComponents.discord.badge"),
             icon: faDiscord,
-            action: () => window.open('https://discord.gg/CHXRPvmaXm', '_blank')
+            action: () => window.electron.openExternal('https://discord.gg/CHXRPvmaXm')
         }
     ]
     
@@ -166,7 +163,11 @@ export default function ComposerRightBar() {
                 </div>
             )}
             <div className="bg-tertiary border-l border-secondary/50 p-3 flex flex-col space-y-3 shadow-xl">
-                {book ? editorComponents.map((component: PanelComponent) => (
+                {book ? editorComponents
+                    .filter((component: PanelComponent):boolean => {
+                        return !(isCurrentlyOffline() && component.id === 1);
+                    })
+                    .map((component: PanelComponent) => (
                     <button
                         key={component.id}
                         disabled={disabled(component.id)}

electron.d.ts

@@ -37,6 +37,9 @@ export interface IElectronAPI {
   // Database initialization (shortcut for convenience)
   dbInitialize: (userId: string, encryptionKey: string) => Promise<boolean>;
 
+  // Open external links (browser/native app)
+  openExternal: (url: string) => Promise<void>;
+
   // Offline mode management
   offlinePinSet: (pin: string) => Promise<{ success: boolean; error?: string }>;
   offlinePinVerify: (pin: string) => Promise<{ success: boolean; userId?: string; error?: string }>;

electron/main.ts

@@ -1,4 +1,4 @@
-import {app, BrowserWindow, ipcMain, nativeImage, protocol, safeStorage} from 'electron';
+import {app, BrowserWindow, ipcMain, nativeImage, protocol, safeStorage, shell} from 'electron';
 import * as path from 'path';
 import {fileURLToPath} from 'url';
 import * as fs from 'fs';
@@ -116,6 +116,11 @@ function createMainWindow(): void {
   });
 }
 
+// IPC Handler pour ouvrir des liens externes (navigateur/app native)
+ipcMain.handle('open-external', async (_event, url: string) => {
+  await shell.openExternal(url);
+});
+
 // IPC Handlers pour la gestion du token (OS-encrypted storage)
 ipcMain.handle('get-token', () => {
   const storage:SecureStorage = getSecureStorage();

electron/preload.ts

@@ -35,6 +35,9 @@ contextBridge.exposeInMainWorld('electron', {
   // Database initialization (shortcut for convenience)
   dbInitialize: (userId: string, encryptionKey: string) => ipcRenderer.invoke('db-initialize', userId, encryptionKey),
 
+  // Open external links (browser/native app)
+  openExternal: (url: string) => ipcRenderer.invoke('open-external', url),
+
   // Offline mode management
   offlinePinSet: (pin: string) => ipcRenderer.invoke('offline:pin:set', { pin }),
   offlinePinVerify: (pin: string) => ipcRenderer.invoke('offline:pin:verify', { pin }),