Bump app version to 0.5.0 and implement offline mode support across components

- Added offline detection logic with `OfflineContext` to improve app functionality in offline scenarios.
- Integrated Tauri IPC functions to handle local tool settings and character attributes when offline.
- Refined indentation logic in `TextEditor` for better compatibility with WebKit engines.
- Removed unused `indent` property and related settings in editor components to simplify configuration.
- Updated locale files with improved translation consistency and parameterized placeholders.

components/book/BookCard.tsx

@@ -18,23 +18,21 @@ export default function BookCard({book, onClickCallback, index, syncStatus}: Boo
 
     return (
         <div
+            onClick={(): void => onClickCallback(book.bookId)}
             className="group relative aspect-[2/3] rounded-xl overflow-hidden cursor-pointer transition-all duration-300 hover:ring-1 hover:ring-text-primary/20">
-            <button onClick={(): void => onClickCallback(book.bookId)} className="w-full h-full text-left block"
-                    type="button">
-                {book.coverImage ? (
-                    <img
-                        src={book.coverImage}
-                        alt={book.title || t("bookCard.noCoverAlt")}
-                        className="w-full h-full object-cover"
-                    />
-                ) : (
-                    <div className="w-full h-full bg-secondary flex items-center justify-center">
-                        <span className="text-muted text-5xl font-['ADLaM_Display']">
-                            {book.title.charAt(0).toUpperCase()}
-                        </span>
-                    </div>
-                )}
-            </button>
+            {book.coverImage ? (
+                <img
+                    src={book.coverImage}
+                    alt={book.title || t("bookCard.noCoverAlt")}
+                    className="w-full h-full object-cover"
+                />
+            ) : (
+                <div className="w-full h-full bg-secondary flex items-center justify-center">
+                    <span className="text-muted text-5xl font-['ADLaM_Display']">
+                        {book.title.charAt(0).toUpperCase()}
+                    </span>
+                </div>
+            )}
 
             {isDesktop && syncStatus && (
                 <div className="absolute top-2 left-2 cursor-default" onClick={(e: React.MouseEvent): void => e.stopPropagation()}>

components/book/settings/BookSettingOption.tsx

@@ -10,7 +10,10 @@ import {BookContext, BookContextProps} from "@/context/BookContext";
 import {SessionContext, SessionContextProps} from "@/context/SessionContext";
 import {AlertContext, AlertContextProps} from "@/context/AlertContext";
 import {LangContext, LangContextProps} from "@/context/LangContext";
+import OfflineContext, {OfflineContextType} from "@/context/OfflineContext";
+import {isDesktop} from "@/lib/configs";
 import {apiPatch} from "@/lib/api/client";
+import {updateBookToolSetting} from "@/lib/tauri";
 import {SettingRef} from "@/lib/types/settings";
 import {BookProps} from "@/lib/types/book";
 
@@ -73,6 +76,7 @@ export default function BookSettingOption({setting}: BookSettingOptionProps): Re
     const {session}: SessionContextProps = useContext<SessionContextProps>(SessionContext);
     const {errorMessage}: AlertContextProps = useContext<AlertContextProps>(AlertContext);
     const {lang}: LangContextProps = useContext<LangContextProps>(LangContext);
+    const {isCurrentlyOffline} = useContext(OfflineContext);
     const userToken: string = session?.accessToken ?? '';
     
     const isToggleable: boolean = setting in toggleableSettings;
@@ -107,13 +111,20 @@ export default function BookSettingOption({setting}: BookSettingOptionProps): Re
     
     async function handleToggleTool(enabled: boolean): Promise<void> {
         const toolName: ToolName | undefined = toggleableSettings[setting];
-        if (!toolName) return;
+        if (!toolName || !book?.bookId) return;
+        const useLocal: boolean = isDesktop && (isCurrentlyOffline() || !!book.localBook);
+        if (useLocal && toolName === 'quillsense') {
+            errorMessage(t('bookSettingOption.quillsenseOffline'));
+            return;
+        }
         try {
-            const result: boolean = await apiPatch<boolean>('book/tool-setting', {
-                bookId: book?.bookId,
-                toolName: toolName,
-                enabled: enabled
-            }, userToken, lang);
+            const result: boolean = useLocal
+                ? await updateBookToolSetting(book.bookId, toolName, enabled)
+                : await apiPatch<boolean>('book/tool-setting', {
+                    bookId: book.bookId,
+                    toolName: toolName,
+                    enabled: enabled
+                }, userToken, lang);
             if (result && setBook && book) {
                 setToolEnabled(enabled);
                 if (toolName === 'quillsense') {

components/book/settings/characters/editor/CharacterEditorDetail.tsx

@@ -10,7 +10,11 @@ import AvatarIcon from '@/components/ui/AvatarIcon';
 import {SessionContext, SessionContextProps} from '@/context/SessionContext';
 import {AlertContext, AlertContextProps} from '@/context/AlertContext';
 import {LangContext, LangContextProps} from '@/context/LangContext';
+import {BookContext, BookContextProps} from '@/context/BookContext';
+import OfflineContext, {OfflineContextType} from '@/context/OfflineContext';
+import {isDesktop} from '@/lib/configs';
 import {apiGet} from '@/lib/api/client';
+import {getCharacterAttributes} from '@/lib/tauri';
 
 type AttributeResponse = { type: string; values: Attribute[] }[];
 
@@ -34,6 +38,8 @@ export default function CharacterEditorDetail({
     const {lang}: LangContextProps = useContext<LangContextProps>(LangContext);
     const {session}: SessionContextProps = useContext<SessionContextProps>(SessionContext);
     const {errorMessage}: AlertContextProps = useContext<AlertContextProps>(AlertContext);
+    const {book}: BookContextProps = useContext<BookContextProps>(BookContext);
+    const {isCurrentlyOffline} = useContext(OfflineContext);
     
     useEffect(function (): void {
         if (character?.id !== null) {
@@ -43,12 +49,15 @@ export default function CharacterEditorDetail({
     
     async function getAttributes(): Promise<void> {
         try {
-            const response: AttributeResponse = await apiGet<AttributeResponse>(
-                'character/attribute',
-                session.accessToken,
-                lang,
-                {characterId: character?.id}
-            );
+            const useLocal: boolean = isDesktop && (isCurrentlyOffline() || !!book?.localBook);
+            const response: AttributeResponse = useLocal
+                ? await getCharacterAttributes(character.id!) as AttributeResponse
+                : await apiGet<AttributeResponse>(
+                    'character/attribute',
+                    session.accessToken,
+                    lang,
+                    {characterId: character?.id}
+                );
             if (response && onLoadAttributes) {
                 const attributes: CharacterAttribute = {};
                 response.forEach(function (item: { type: string; values: Attribute[] }): void {

components/book/settings/characters/editor/CharacterEditorEdit.tsx

@@ -28,7 +28,11 @@ import {useTranslations} from '@/lib/i18n';
 import {SessionContext, SessionContextProps} from '@/context/SessionContext';
 import {AlertContext, AlertContextProps} from '@/context/AlertContext';
 import {LangContext, LangContextProps} from '@/context/LangContext';
+import {BookContext, BookContextProps} from '@/context/BookContext';
+import OfflineContext, {OfflineContextType} from '@/context/OfflineContext';
+import {isDesktop} from '@/lib/configs';
 import {apiGet} from '@/lib/api/client';
+import {getCharacterAttributes} from '@/lib/tauri';
 
 type AttributeResponse = { type: string; values: Attribute[] }[];
 
@@ -59,6 +63,8 @@ export default function CharacterEditorEdit({
     const {lang}: LangContextProps = useContext<LangContextProps>(LangContext);
     const {session}: SessionContextProps = useContext<SessionContextProps>(SessionContext);
     const {errorMessage}: AlertContextProps = useContext<AlertContextProps>(AlertContext);
+    const {book}: BookContextProps = useContext<BookContextProps>(BookContext);
+    const {isCurrentlyOffline} = useContext(OfflineContext);
     const [showAdvanced, setShowAdvanced] = useState<boolean>(false);
     
     useEffect(function (): void {
@@ -69,12 +75,15 @@ export default function CharacterEditorEdit({
     
     async function getAttributes(): Promise<void> {
         try {
-            const response: AttributeResponse = await apiGet<AttributeResponse>(
-                'character/attribute',
-                session.accessToken,
-                lang,
-                {characterId: character?.id}
-            );
+            const useLocal: boolean = isDesktop && (isCurrentlyOffline() || !!book?.localBook);
+            const response: AttributeResponse = useLocal
+                ? await getCharacterAttributes(character.id!) as AttributeResponse
+                : await apiGet<AttributeResponse>(
+                    'character/attribute',
+                    session.accessToken,
+                    lang,
+                    {characterId: character?.id}
+                );
             if (response) {
                 const attributes: CharacterAttribute = {};
                 response.forEach(function (item: { type: string; values: Attribute[] }): void {

components/book/settings/characters/settings/CharacterSettingsDetail.tsx

@@ -33,7 +33,11 @@ import {SessionContext, SessionContextProps} from '@/context/SessionContext';
 import {AlertContext, AlertContextProps} from '@/context/AlertContext';
 import {dynamicBg} from '@/lib/utils/dynamicStyles';
 import {LangContext, LangContextProps} from '@/context/LangContext';
+import {BookContext, BookContextProps} from '@/context/BookContext';
+import OfflineContext, {OfflineContextType} from '@/context/OfflineContext';
+import {isDesktop} from '@/lib/configs';
 import {apiGet} from '@/lib/api/client';
+import {getCharacterAttributes} from '@/lib/tauri';
 
 type AttributeResponse = { type: string; values: Attribute[] }[];
 
@@ -52,6 +56,8 @@ export default function CharacterSettingsDetail({
     const {lang}: LangContextProps = useContext<LangContextProps>(LangContext);
     const {session}: SessionContextProps = useContext<SessionContextProps>(SessionContext);
     const {errorMessage}: AlertContextProps = useContext<AlertContextProps>(AlertContext);
+    const {book}: BookContextProps = useContext<BookContextProps>(BookContext);
+    const {isCurrentlyOffline} = useContext(OfflineContext);
     const [showAdvanced, setShowAdvanced] = useState<boolean>(false);
     
     useEffect(function (): void {
@@ -62,12 +68,15 @@ export default function CharacterSettingsDetail({
     
     async function getAttributes(): Promise<void> {
         try {
-            const response: AttributeResponse = await apiGet<AttributeResponse>(
-                'character/attribute',
-                session.accessToken,
-                lang,
-                {characterId: character?.id}
-            );
+            const useLocal: boolean = isDesktop && (isCurrentlyOffline() || !!book?.localBook);
+            const response: AttributeResponse = useLocal
+                ? await getCharacterAttributes(character.id!) as AttributeResponse
+                : await apiGet<AttributeResponse>(
+                    'character/attribute',
+                    session.accessToken,
+                    lang,
+                    {characterId: character?.id}
+                );
             if (response && onLoadAttributes) {
                 const attributes: CharacterAttribute = {};
                 response.forEach(function (item: { type: string; values: Attribute[] }): void {

components/book/settings/characters/settings/CharacterSettingsEdit.tsx

@@ -29,7 +29,11 @@ import {useTranslations} from '@/lib/i18n';
 import {SessionContext, SessionContextProps} from '@/context/SessionContext';
 import {AlertContext, AlertContextProps} from '@/context/AlertContext';
 import {LangContext, LangContextProps} from '@/context/LangContext';
+import {BookContext, BookContextProps} from '@/context/BookContext';
+import OfflineContext, {OfflineContextType} from '@/context/OfflineContext';
+import {isDesktop} from '@/lib/configs';
 import {apiGet} from '@/lib/api/client';
+import {getCharacterAttributes} from '@/lib/tauri';
 
 type AttributeResponse = { type: string; values: Attribute[] }[];
 
@@ -61,6 +65,8 @@ export default function CharacterSettingsEdit({
     const {lang}: LangContextProps = useContext<LangContextProps>(LangContext);
     const {session}: SessionContextProps = useContext<SessionContextProps>(SessionContext);
     const {errorMessage}: AlertContextProps = useContext<AlertContextProps>(AlertContext);
+    const {book}: BookContextProps = useContext<BookContextProps>(BookContext);
+    const {isCurrentlyOffline} = useContext(OfflineContext);
     const [showAdvanced, setShowAdvanced] = useState<boolean>(false);
     
     useEffect(function (): void {
@@ -71,12 +77,15 @@ export default function CharacterSettingsEdit({
     
     async function getAttributes(): Promise<void> {
         try {
-            const response: AttributeResponse = await apiGet<AttributeResponse>(
-                'character/attribute',
-                session.accessToken,
-                lang,
-                {characterId: character?.id}
-            );
+            const useLocal: boolean = isDesktop && (isCurrentlyOffline() || !!book?.localBook);
+            const response: AttributeResponse = useLocal
+                ? await getCharacterAttributes(character.id!) as AttributeResponse
+                : await apiGet<AttributeResponse>(
+                    'character/attribute',
+                    session.accessToken,
+                    lang,
+                    {characterId: character?.id}
+                );
             if (response) {
                 const attributes: CharacterAttribute = {};
                 response.forEach(function (item: { type: string; values: Attribute[] }): void {

components/book/settings/locations/LocationComponent.tsx

@@ -4,7 +4,10 @@ import React, {ChangeEvent, forwardRef, useContext, useEffect, useImperativeHand
 import {SessionContext, SessionContextProps} from "@/context/SessionContext";
 import {AlertContext, AlertContextProps} from "@/context/AlertContext";
 import {BookContext, BookContextProps} from "@/context/BookContext";
+import OfflineContext, {OfflineContextType} from '@/context/OfflineContext';
+import {isDesktop} from '@/lib/configs';
 import {apiDelete, apiGet, apiPatch, apiPost} from '@/lib/api/client';
+import * as tauri from '@/lib/tauri';
 import InputField from "@/components/form/InputField";
 import TextInput from '@/components/form/TextInput';
 import TextAreaInput from "@/components/form/TextAreaInput";
@@ -53,8 +56,10 @@ export function LocationComponent(props: LocationComponentProps, ref: React.Ref<
     const {session}: SessionContextProps = useContext<SessionContextProps>(SessionContext);
     const {successMessage, errorMessage}: AlertContextProps = useContext<AlertContextProps>(AlertContext);
     const {book, setBook}: BookContextProps = useContext<BookContextProps>(BookContext);
-    
+    const {isCurrentlyOffline} = useContext(OfflineContext);
+
     const currentEntityId: string = entityId || book?.bookId || '';
+    const useLocal: boolean = isDesktop && (isCurrentlyOffline() || !!book?.localBook);
     const isSeriesMode: boolean = entityType === 'series';
     const token: string = session.accessToken;
 
@@ -87,12 +92,14 @@ export function LocationComponent(props: LocationComponentProps, ref: React.Ref<
     async function getSeriesLocations(): Promise<void> {
         if (!bookSeriesId) return;
         try {
-            const response: SeriesLocationItem[] = await apiGet<SeriesLocationItem[]>(
-                'series/location/list',
-                token,
-                lang,
-                {seriesid: bookSeriesId}
-            );
+            const response: SeriesLocationItem[] = useLocal
+                ? await tauri.getSeriesLocationList(bookSeriesId) as SeriesLocationItem[]
+                : await apiGet<SeriesLocationItem[]>(
+                    'series/location/list',
+                    token,
+                    lang,
+                    {seriesid: bookSeriesId}
+                );
             if (response) {
                 setSeriesLocations(response);
             }
@@ -106,11 +113,13 @@ export function LocationComponent(props: LocationComponentProps, ref: React.Ref<
     async function handleToggleTool(enabled: boolean): Promise<void> {
         if (isSeriesMode) return;
         try {
-            const response: boolean = await apiPatch<boolean>('book/tool-setting', {
-                bookId: currentEntityId,
-                toolName: 'locations',
-                enabled: enabled
-            }, token, lang);
+            const response: boolean = useLocal
+                ? await tauri.updateBookToolSetting(currentEntityId, 'locations', enabled)
+                : await apiPatch<boolean>('book/tool-setting', {
+                    bookId: currentEntityId,
+                    toolName: 'locations',
+                    enabled: enabled
+                }, token, lang);
             if (response && setBook && book) {
                 setToolEnabled(enabled);
                 setBook({
@@ -132,12 +141,14 @@ export function LocationComponent(props: LocationComponentProps, ref: React.Ref<
     async function getAllLocations(): Promise<void> {
         try {
             if (isSeriesMode) {
-                const response: SeriesLocationItem[] = await apiGet<SeriesLocationItem[]>(
-                    'series/location/list',
-                    token,
-                    lang,
-                    {seriesid: currentEntityId}
-                );
+                const response: SeriesLocationItem[] = useLocal
+                    ? await tauri.getSeriesLocationList(currentEntityId) as SeriesLocationItem[]
+                    : await apiGet<SeriesLocationItem[]>(
+                        'series/location/list',
+                        token,
+                        lang,
+                        {seriesid: currentEntityId}
+                    );
                 if (response) {
                     const mappedLocations: LocationProps[] = response.map((loc: SeriesLocationItem): LocationProps => ({
                         id: loc.id,
@@ -156,12 +167,14 @@ export function LocationComponent(props: LocationComponentProps, ref: React.Ref<
                     setSections(mappedLocations);
                 }
             } else {
-                const response: LocationListResponse = await apiGet<LocationListResponse>(
-                    'location/all',
-                    token,
-                    lang,
-                    {bookid: currentEntityId}
-                );
+                const response: LocationListResponse = useLocal
+                    ? await tauri.getAllLocations(currentEntityId, true) as LocationListResponse
+                    : await apiGet<LocationListResponse>(
+                        'location/all',
+                        token,
+                        lang,
+                        {bookid: currentEntityId}
+                    );
                 if (response) {
                     setSections(response.locations);
                     setToolEnabled(response.enabled);
@@ -194,24 +207,17 @@ export function LocationComponent(props: LocationComponentProps, ref: React.Ref<
         try {
             let sectionId: string;
             if (isSeriesMode) {
-                sectionId = await apiPost<string>(
-                    'series/location/section/add',
-                    {
-                        seriesId: currentEntityId,
-                        name: newSectionName,
-                    },
-                    token,
-                    lang
-                );
+                sectionId = useLocal
+                    ? await tauri.addSeriesLocationSection({seriesId: currentEntityId, name: newSectionName})
+                    : await apiPost<string>('series/location/section/add', {seriesId: currentEntityId, name: newSectionName}, token, lang);
                 if (!sectionId) {
                     errorMessage(t('locationComponent.errorUnknownAddSection'));
                     return;
                 }
             } else {
-                sectionId = await apiPost<string>('location/section/add', {
-                    bookId: currentEntityId,
-                    locationName: newSectionName,
-                }, token, lang);
+                sectionId = useLocal
+                    ? await tauri.addLocationSection(newSectionName, currentEntityId)
+                    : await apiPost<string>('location/section/add', {bookId: currentEntityId, locationName: newSectionName}, token, lang);
                 if (!sectionId) {
                     errorMessage(t('locationComponent.errorUnknownAddSection'));
                     return;
@@ -241,25 +247,17 @@ export function LocationComponent(props: LocationComponentProps, ref: React.Ref<
         try {
             let elementId: string;
             if (isSeriesMode) {
-                elementId = await apiPost<string>(
-                    'series/location/element/add',
-                    {
-                        locationId: sectionId,
-                        name: newElementNames[sectionId],
-                    },
-                    token,
-                    lang
-                );
+                elementId = useLocal
+                    ? await tauri.addSeriesLocationElement({locationId: sectionId, name: newElementNames[sectionId]})
+                    : await apiPost<string>('series/location/element/add', {locationId: sectionId, name: newElementNames[sectionId]}, token, lang);
                 if (!elementId) {
                     errorMessage(t('locationComponent.errorUnknownAddElement'));
                     return;
                 }
             } else {
-                elementId = await apiPost<string>('location/element/add', {
-                    bookId: currentEntityId,
-                    locationId: sectionId,
-                    elementName: newElementNames[sectionId],
-                }, token, lang);
+                elementId = useLocal
+                    ? await tauri.addLocationElement(sectionId, newElementNames[sectionId])
+                    : await apiPost<string>('location/element/add', {bookId: currentEntityId, locationId: sectionId, elementName: newElementNames[sectionId]}, token, lang);
                 if (!elementId) {
                     errorMessage(t('locationComponent.errorUnknownAddElement'));
                     return;
@@ -314,25 +312,19 @@ export function LocationComponent(props: LocationComponentProps, ref: React.Ref<
         );
         try {
             let subElementId: string;
+            const parentElementId: string = sections[sectionIndex].elements[elementIndex].id;
             if (isSeriesMode) {
-                subElementId = await apiPost<string>(
-                    'series/location/sub-element/add',
-                    {
-                        elementId: sections[sectionIndex].elements[elementIndex].id,
-                        name: newSubElementNames[elementIndex],
-                    },
-                    token,
-                    lang
-                );
+                subElementId = useLocal
+                    ? await tauri.addSeriesLocationSubElement({elementId: parentElementId, name: newSubElementNames[elementIndex]})
+                    : await apiPost<string>('series/location/sub-element/add', {elementId: parentElementId, name: newSubElementNames[elementIndex]}, token, lang);
                 if (!subElementId) {
                     errorMessage(t('locationComponent.errorUnknownAddSubElement'));
                     return;
                 }
             } else {
-                subElementId = await apiPost<string>('location/sub-element/add', {
-                    elementId: sections[sectionIndex].elements[elementIndex].id,
-                    subElementName: newSubElementNames[elementIndex],
-                }, token, lang);
+                subElementId = useLocal
+                    ? await tauri.addLocationSubElement(parentElementId, newSubElementNames[elementIndex])
+                    : await apiPost<string>('location/sub-element/add', {elementId: parentElementId, subElementName: newSubElementNames[elementIndex]}, token, lang);
                 if (!subElementId) {
                     errorMessage(t('locationComponent.errorUnknownAddSubElement'));
                     return;
@@ -379,15 +371,16 @@ export function LocationComponent(props: LocationComponentProps, ref: React.Ref<
         try {
             const elementId: string | undefined = sections.find((section: LocationProps): boolean => section.id === sectionId)
                 ?.elements[elementIndex].id;
+            const deletedAt: number = Math.floor(Date.now() / 1000);
             let success: boolean;
             if (isSeriesMode) {
-                success = await apiDelete<boolean>('series/location/element/delete', {
-                    elementId: elementId
-                }, token, lang);
+                success = useLocal
+                    ? await tauri.deleteSeriesLocationElement(elementId!, deletedAt)
+                    : await apiDelete<boolean>('series/location/element/delete', {elementId: elementId}, token, lang);
             } else {
-                success = await apiDelete<boolean>('location/element/delete', {
-                    elementId: elementId,
-                }, token, lang);
+                success = useLocal
+                    ? await tauri.deleteLocationElement(elementId!, currentEntityId, deletedAt)
+                    : await apiDelete<boolean>('location/element/delete', {elementId: elementId}, token, lang);
             }
             if (!success) {
                 errorMessage(t('locationComponent.errorUnknownDeleteElement'));
@@ -414,15 +407,16 @@ export function LocationComponent(props: LocationComponentProps, ref: React.Ref<
         try {
             const subElementId: string | undefined = sections.find((section: LocationProps): boolean => section.id === sectionId)
                 ?.elements[elementIndex].subElements[subElementIndex].id;
+            const deletedAt: number = Math.floor(Date.now() / 1000);
             let success: boolean;
             if (isSeriesMode) {
-                success = await apiDelete<boolean>('series/location/sub-element/delete', {
-                    subElementId: subElementId
-                }, token, lang);
+                success = useLocal
+                    ? await tauri.deleteSeriesLocationSubElement(subElementId!, deletedAt)
+                    : await apiDelete<boolean>('series/location/sub-element/delete', {subElementId: subElementId}, token, lang);
             } else {
-                success = await apiDelete<boolean>('location/sub-element/delete', {
-                    subElementId: subElementId,
-                }, token, lang);
+                success = useLocal
+                    ? await tauri.deleteLocationSubElement(subElementId!, currentEntityId, deletedAt)
+                    : await apiDelete<boolean>('location/sub-element/delete', {subElementId: subElementId}, token, lang);
             }
             if (!success) {
                 errorMessage(t('locationComponent.errorUnknownDeleteSubElement'));
@@ -443,15 +437,16 @@ export function LocationComponent(props: LocationComponentProps, ref: React.Ref<
 
     async function handleRemoveSection(sectionId: string): Promise<void> {
         try {
+            const deletedAt: number = Math.floor(Date.now() / 1000);
             let success: boolean;
             if (isSeriesMode) {
-                success = await apiDelete<boolean>('series/location/delete', {
-                    locationId: sectionId
-                }, token, lang);
+                success = useLocal
+                    ? await tauri.deleteSeriesLocation(sectionId, deletedAt)
+                    : await apiDelete<boolean>('series/location/delete', {locationId: sectionId}, token, lang);
             } else {
-                success = await apiDelete<boolean>('location/delete', {
-                    locationId: sectionId,
-                }, token, lang);
+                success = useLocal
+                    ? await tauri.deleteLocationSection(sectionId, currentEntityId, deletedAt)
+                    : await apiDelete<boolean>('location/delete', {locationId: sectionId}, token, lang);
             }
             if (!success) {
                 errorMessage(t('locationComponent.errorUnknownDeleteSection'));
@@ -470,9 +465,9 @@ export function LocationComponent(props: LocationComponentProps, ref: React.Ref<
 
     async function handleSave(): Promise<void> {
         try {
-            const response: boolean = await apiPost<boolean>(`location/update`, {
-                locations: sections,
-            }, token, lang);
+            const response: boolean = useLocal
+                ? await tauri.updateLocations(sections) as boolean
+                : await apiPost<boolean>(`location/update`, {locations: sections}, token, lang);
             if (!response) {
                 errorMessage(t('locationComponent.errorUnknownSave'));
                 return;
@@ -489,19 +484,16 @@ export function LocationComponent(props: LocationComponentProps, ref: React.Ref<
     
     async function handleExportToSeries(section: LocationProps): Promise<void> {
         if (!bookSeriesId) return;
-        
+
         try {
-            const seriesLocationId: string = await apiPost<string>('series/location/section/add', {
-                seriesId: bookSeriesId,
-                name: section.name,
-            }, token, lang);
-            
+            const seriesLocationId: string = useLocal
+                ? await tauri.addSeriesLocationSection({seriesId: bookSeriesId, name: section.name})
+                : await apiPost<string>('series/location/section/add', {seriesId: bookSeriesId, name: section.name}, token, lang);
+
             if (seriesLocationId) {
-                const updateResponse: boolean = await apiPost<boolean>('location/section/update', {
-                    sectionId: section.id,
-                    sectionName: section.name,
-                    seriesLocationId: seriesLocationId,
-                }, token, lang);
+                const updateResponse: boolean = useLocal
+                    ? await tauri.updateLocationSectionWithSeriesLink(section.id, section.name, seriesLocationId)
+                    : await apiPost<boolean>('location/section/update', {sectionId: section.id, sectionName: section.name, seriesLocationId: seriesLocationId}, token, lang);
                 
                 if (updateResponse) {
                     setSections(sections.map((s: LocationProps): LocationProps =>
@@ -523,11 +515,9 @@ export function LocationComponent(props: LocationComponentProps, ref: React.Ref<
         if (!seriesLocation) return;
         
         try {
-            const sectionId: string = await apiPost<string>('location/section/add', {
-                bookId: currentEntityId,
-                locationName: seriesLocation.name,
-                seriesLocationId: seriesLocationId,
-            }, token, lang);
+            const sectionId: string = useLocal
+                ? await tauri.addLocationSection(seriesLocation.name, currentEntityId, undefined, seriesLocationId)
+                : await apiPost<string>('location/section/add', {bookId: currentEntityId, locationName: seriesLocation.name, seriesLocationId: seriesLocationId}, token, lang);
             
             if (!sectionId) {
                 errorMessage(t('locationComponent.importError'));
@@ -537,21 +527,18 @@ export function LocationComponent(props: LocationComponentProps, ref: React.Ref<
             const importedElements: Element[] = [];
             
             for (const seriesElement of seriesLocation.elements) {
-                const elementId: string = await apiPost<string>('location/element/add', {
-                    bookId: currentEntityId,
-                    locationId: sectionId,
-                    elementName: seriesElement.name,
-                }, token, lang);
+                const elementId: string = useLocal
+                    ? await tauri.addLocationElement(sectionId, seriesElement.name)
+                    : await apiPost<string>('location/element/add', {bookId: currentEntityId, locationId: sectionId, elementName: seriesElement.name}, token, lang);
                 
                 if (!elementId) continue;
                 
                 const importedSubElements: SubElement[] = [];
                 
                 for (const seriesSubElement of seriesElement.subElements) {
-                    const subElementId: string = await apiPost<string>('location/sub-element/add', {
-                        elementId: elementId,
-                        subElementName: seriesSubElement.name,
-                    }, token, lang);
+                    const subElementId: string = useLocal
+                        ? await tauri.addLocationSubElement(elementId, seriesSubElement.name)
+                        : await apiPost<string>('location/sub-element/add', {elementId: elementId, subElementName: seriesSubElement.name}, token, lang);
                     
                     if (subElementId) {
                         importedSubElements.push({

components/book/settings/locations/settings/LocationSettings.tsx

@@ -161,7 +161,16 @@ export default function LocationSettings({
                 
                 {viewMode === 'detail' && selectedSection && (
                     <div className="p-4">
-                        <LocationSettingsDetail section={selectedSection}/>
+                        <LocationSettingsDetail
+                            section={selectedSection}
+                            newElementName={newElementNames[selectedSection.id] || ''}
+                            onNewElementNameChange={function (name: string): void {
+                                setNewElementNames({...newElementNames, [selectedSection.id]: name});
+                            }}
+                            onAddElement={function (): Promise<void> {
+                                return addElement(selectedSection.id);
+                            }}
+                        />
                     </div>
                 )}
                 

components/book/settings/locations/settings/LocationSettingsDetail.tsx

@@ -29,6 +29,7 @@ export default function LocationSettingsDetail({
                     className="text-center py-12 text-text-secondary">
                     <MapPin className="w-8 h-8 mb-3 opacity-50" strokeWidth={1.75}/>
                     <p>{t("locationComponent.noElementAvailable")}</p>
+                    <p className="text-sm mt-2 text-text-dimmed">{t("locationComponent.editToAdd")}</p>
                 </div>
             ) : (
                 <div className="grid grid-cols-1 md:grid-cols-2 gap-4">

components/editor/TextEditor.tsx

@@ -31,9 +31,14 @@ import {SessionContext, SessionContextProps} from "@/context/SessionContext";
 import DraftCompanion from "@/components/editor/DraftCompanion";
 import GhostWriter from "@/components/ghostwriter/GhostWriter";
 import IconButton from "@/components/ui/IconButton";
+import Button from "@/components/ui/Button";
 import UserEditorSettings, {EditorDisplaySettings} from "@/components/editor/UserEditorSetting";
 import {useTranslations} from '@/lib/i18n';
 import {LangContext, LangContextProps} from "@/context/LangContext";
+import {isWebKitWithoutIndentFix} from "@/lib/utils/webkitDetect";
+import {getCookie, setCookie} from "@/lib/utils/cookies";
+import Modal from "@/components/ui/Modal";
+import {Info} from 'lucide-react';
 
 interface ToolbarButton {
     action: () => void;
@@ -48,14 +53,12 @@ interface EditorClasses {
     h3: string;
     container: string;
     theme: string;
-    paragraph: string;
     lists: string;
     listItems: string;
 }
 
 const defaultEditorSettings: EditorDisplaySettings = {
     zoomLevel: 3,
-    indent: 30,
     lineHeight: 1.5,
     theme: 'sombre',
     fontFamily: 'lora',
@@ -148,6 +151,8 @@ export default function TextEditor() {
     const [showUserSettings, setShowUserSettings] = useState<boolean>(false);
     const [isSaving, setIsSaving] = useState<boolean>(false);
     const [editorSettings, setEditorSettings] = useState<EditorDisplaySettings>(defaultEditorSettings);
+    const [indentDisabled] = useState<boolean>(() => isWebKitWithoutIndentFix());
+    const [showIndentModal, setShowIndentModal] = useState<boolean>(() => isWebKitWithoutIndentFix() && !getCookie('indent_notice_seen'));
     const [editorClasses, setEditorClasses] = useState<EditorClasses>({
         base: 'text-lg font-serif leading-normal',
         h1: 'text-3xl font-bold',
@@ -155,7 +160,6 @@ export default function TextEditor() {
         h3: 'text-xl font-bold',
         container: 'max-w-3xl',
         theme: 'bg-tertiary text-text-primary',
-        paragraph: 'indent-6',
         lists: 'pl-10',
         listItems: 'text-lg'
     });
@@ -170,14 +174,12 @@ export default function TextEditor() {
         
         const fontFamily: string = fontFamilyClasses[settings.fontFamily] || fontFamilyClasses['lora'];
         const lineHeight: string = lineHeightClasses[lineHeightKey];
-        const indentClass: string = `indent-${Math.round(settings.indent / 4)}`;
-        
         const baseClass: string = `${fontSizeClasses[zoomKey]} ${fontFamily} ${lineHeight}`;
         const h1Class: string = `${h1SizeClasses[zoomKey]} font-bold ${fontFamily} ${lineHeight}`;
         const h2Class: string = `${h2SizeClasses[zoomKey]} font-bold ${fontFamily} ${lineHeight}`;
         const h3Class: string = `${h3SizeClasses[zoomKey]} font-bold ${fontFamily} ${lineHeight}`;
         const containerClass: string = maxWidthClasses[maxWidthKey];
-        const listsClass: string = `pl-${Math.round((settings.indent + 20) / 4)}`;
+        const listsClass: string = 'pl-12';
         
         let themeClass: string = '';
         switch (settings.theme) {
@@ -198,7 +200,6 @@ export default function TextEditor() {
             h3: h3Class,
             container: containerClass,
             theme: themeClass,
-            paragraph: indentClass,
             lists: listsClass,
             listItems: baseClass
         });
@@ -335,24 +336,16 @@ export default function TextEditor() {
         setShowDraftCompanion(false);
         setShowGhostWriter(false);
     }, []);
-    
-    useEffect((): void => {
-        if (!editor) return;
-        
-        const editorElement: HTMLElement = editor.view.dom;
-        if (editorElement) {
-            const indentClasses: string[] = Array.from({length: 21}, (_: unknown, i: number): string => `indent-${i}`);
-            editorElement.classList.remove(...indentClasses);
-            
-            if (editorClasses.paragraph) {
-                editorElement.classList.add(editorClasses.paragraph);
-            }
-        }
-    }, [editor, editorClasses.paragraph]);
+
+    const handleCloseIndentModal: () => void = useCallback((): void => {
+        setCookie('indent_notice_seen', 'true', 365);
+        setShowIndentModal(false);
+    }, []);
     
     useEffect((): void => {
         updateEditorClasses(editorSettings);
     }, [editorSettings, updateEditorClasses]);
+
     
     useEffect((): () => void => {
         function startTimer(): void {
@@ -437,7 +430,7 @@ export default function TextEditor() {
     }
     
     return (
-        <div className="flex flex-col flex-1 w-full h-full bg-tertiary">
+        <div className={`flex flex-col flex-1 w-full h-full bg-tertiary ${indentDisabled ? 'no-text-indent' : ''}`}>
             <div
                 className={`flex justify-between items-center gap-3 rounded-xl mx-1 mb-1 px-4 py-2 bg-darkest-background transition-opacity duration-300 ${editorSettings.focusMode ? 'opacity-70 hover:opacity-100' : ''}`}>
                 <div className="flex flex-wrap gap-1">
@@ -481,6 +474,15 @@ export default function TextEditor() {
                             tooltip={t("textEditor.draftCompanion")}
                         />
                     )}
+                    {indentDisabled && (
+                        <IconButton
+                            icon={Info}
+                            variant="ghost"
+                            shape="square"
+                            onClick={(): void => setShowIndentModal(true)}
+                            tooltip={t("textEditor.indentDisabled")}
+                        />
+                    )}
                     <IconButton
                         icon={Save}
                         variant="ghost"
@@ -520,6 +522,23 @@ export default function TextEditor() {
                     </div>
                 )}
             </div>
+            {showIndentModal && (
+                <Modal
+                    title={t("textEditor.indentDisabledTitle")}
+                    icon={Info}
+                    size="sm"
+                    onClose={handleCloseIndentModal}
+                    footer={
+                        <Button variant="primary" onClick={handleCloseIndentModal}>
+                            {t("textEditor.indentDisabledUnderstood")}
+                        </Button>
+                    }
+                >
+                    <p className="text-text-secondary leading-relaxed">
+                        {t("textEditor.indentDisabledDescription")}
+                    </p>
+                </Modal>
+            )}
         </div>
     );
 }

components/editor/UserEditorSetting.tsx

@@ -1,6 +1,6 @@
 'use client'
 import React, {ChangeEvent, useCallback, useContext, useEffect, useMemo} from 'react';
-import {Baseline, CaseSensitive, Eye, Indent, Palette, Type} from 'lucide-react';
+import {Baseline, CaseSensitive, Eye, Palette, Type} from 'lucide-react';
 import {useTranslations} from '@/lib/i18n';
 import SelectBox from "@/components/form/SelectBox";
 import Button from "@/components/ui/Button";
@@ -13,7 +13,6 @@ interface UserEditorSettingsProps {
 
 export interface EditorDisplaySettings {
     zoomLevel: number;
-    indent: number;
     lineHeight: number;
     theme: 'clair' | 'sombre' | 'sépia';
     fontFamily: 'lora' | 'serif' | 'sans-serif' | 'monospace';
@@ -31,7 +30,6 @@ function isValidFontFamily(value: string): value is EditorDisplaySettings['fontF
 
 const defaultSettings: EditorDisplaySettings = {
     zoomLevel: 3,
-    indent: 30,
     lineHeight: 1.5,
     theme: 'sombre',
     fontFamily: 'lora',
@@ -130,29 +128,6 @@ export default function UserEditorSettings({settings, onSettingsChange}: UserEdi
                     />
                 </div>
                 
-                <div>
-                    <label className="flex items-center gap-2 mb-2 text-text-primary">
-                        <Indent className="text-muted w-5 h-5" strokeWidth={1.75}/>
-                        {t("userEditorSettings.indent")}
-                    </label>
-                    <div className="space-y-2">
-                        <input
-                            type="range"
-                            min={0}
-                            max={50}
-                            step={5}
-                            value={settings.indent}
-                            onChange={(e: ChangeEvent<HTMLInputElement>): void => handleSettingChange('indent', Number(e.target.value))}
-                            className="w-full accent-primary"
-                        />
-                        <div className="flex justify-between text-sm text-muted">
-                            <span>{t("userEditorSettings.indentNone")}</span>
-                            <span className="text-text-primary font-medium">{settings.indent}px</span>
-                            <span>{t("userEditorSettings.indentMax")}</span>
-                        </div>
-                    </div>
-                </div>
-                
                 <div>
                     <label className="flex items-center gap-2 mb-2 text-text-primary">
                         <Baseline className="text-muted w-5 h-5" strokeWidth={1.75}/>

components/series/AddNewSeriesForm.tsx

@@ -1,7 +1,10 @@
 'use client';
 import React, {ChangeEvent, Dispatch, SetStateAction, useContext, useState} from "react";
 import {AlertContext, AlertContextProps} from "@/context/AlertContext";
+import OfflineContext, {OfflineContextType} from '@/context/OfflineContext';
+import {isDesktop} from '@/lib/configs';
 import {apiPost} from '@/lib/api/client';
+import {createSeries} from '@/lib/tauri';
 import {SessionContext, SessionContextProps} from "@/context/SessionContext";
 import {Book, Check, Layers, Pencil} from 'lucide-react';
 import InputField from "@/components/form/InputField";
@@ -24,6 +27,7 @@ export default function AddNewSeriesForm({setCloseForm, onSeriesCreated}: AddNew
     const {lang}: LangContextProps = useContext<LangContextProps>(LangContext);
     const {session}: SessionContextProps = useContext<SessionContextProps>(SessionContext);
     const {errorMessage, successMessage}: AlertContextProps = useContext<AlertContextProps>(AlertContext);
+    const {isCurrentlyOffline} = useContext(OfflineContext);
     const {
         serverSyncedBooks,
         setServerSyncedBooks
@@ -60,16 +64,10 @@ export default function AddNewSeriesForm({setCloseForm, onSeriesCreated}: AddNew
         
         setIsAddingSeries(true);
         try {
-            const response: string = await apiPost<string>(
-                'series/add',
-                {
-                    name: name,
-                    description: description || null,
-                    bookIds: selectedBookIds,
-                },
-                token,
-                lang
-            );
+            const useLocal: boolean = isDesktop && isCurrentlyOffline();
+            const response: string = useLocal
+                ? await createSeries({name, description: description || null, bookIds: selectedBookIds})
+                : await apiPost<string>('series/add', {name, description: description || null, bookIds: selectedBookIds}, token, lang);
             if (!response) {
                 errorMessage(t('addNewSeriesForm.error.addingSeries'));
                 setIsAddingSeries(false);

components/series/SeriesSettingSidebar.tsx

@@ -6,7 +6,10 @@ import AlertBox from "@/components/ui/AlertBox";
 import {SessionContext, SessionContextProps} from "@/context/SessionContext";
 import {LangContext, LangContextProps} from "@/context/LangContext";
 import {AlertContext, AlertContextProps} from "@/context/AlertContext";
+import OfflineContext, {OfflineContextType} from '@/context/OfflineContext';
+import {isDesktop} from '@/lib/configs';
 import {apiDelete} from '@/lib/api/client';
+import {deleteSeries} from '@/lib/tauri';
 
 interface SeriesSettingOption {
     id: string;
@@ -32,18 +35,18 @@ export default function SeriesSettingSidebar(
     const {session}: SessionContextProps = useContext<SessionContextProps>(SessionContext);
     const {lang}: LangContextProps = useContext<LangContextProps>(LangContext);
     const {errorMessage, successMessage}: AlertContextProps = useContext<AlertContextProps>(AlertContext);
+    const {isCurrentlyOffline} = useContext(OfflineContext);
     const userToken: string = session?.accessToken ? session?.accessToken : '';
 
     const [showDeleteConfirm, setShowDeleteConfirm] = useState<boolean>(false);
 
     async function handleDeleteSeries(): Promise<void> {
         try {
-            const success: boolean = await apiDelete<boolean>(
-                'series/delete',
-                {seriesId: seriesId},
-                userToken,
-                lang
-            );
+            const useLocal: boolean = isDesktop && isCurrentlyOffline();
+            const deletedAt: number = Math.floor(Date.now() / 1000);
+            const success: boolean = useLocal
+                ? await deleteSeries(seriesId, deletedAt)
+                : await apiDelete<boolean>('series/delete', {seriesId: seriesId}, userToken, lang);
             if (success) {
                 successMessage(t('seriesSetting.deleteSuccess'));
                 onClose();

components/series/settings/BasicSeriesInformation.tsx

@@ -1,6 +1,9 @@
 'use client'
 import {ChangeEvent, forwardRef, useContext, useEffect, useImperativeHandle, useState} from "react";
+import OfflineContext, {OfflineContextType} from '@/context/OfflineContext';
+import {isDesktop} from '@/lib/configs';
 import {apiGet, apiPut} from '@/lib/api/client';
+import {getSeriesDetail, updateSeries} from '@/lib/tauri';
 import {AlertContext, AlertContextProps} from "@/context/AlertContext";
 import {SessionContext, SessionContextProps} from "@/context/SessionContext";
 import TextInput from "@/components/form/TextInput";
@@ -20,6 +23,8 @@ function BasicSeriesInformation(props: object, ref: React.Ref<{ handleSave: () =
     const {seriesId}: SeriesContextProps = useContext<SeriesContextProps>(SeriesContext);
     const userToken: string = session?.accessToken ? session?.accessToken : '';
     const {errorMessage, successMessage}: AlertContextProps = useContext<AlertContextProps>(AlertContext);
+    const {isCurrentlyOffline} = useContext(OfflineContext);
+    const useLocal: boolean = isDesktop && isCurrentlyOffline();
     
     const [isLoading, setIsLoading] = useState<boolean>(true);
     const [name, setName] = useState<string>('');
@@ -34,12 +39,9 @@ function BasicSeriesInformation(props: object, ref: React.Ref<{ handleSave: () =
     async function loadSeriesData(): Promise<void> {
         setIsLoading(true);
         try {
-            const response: SeriesDetailResponse = await apiGet<SeriesDetailResponse>(
-                'series/detail',
-                userToken,
-                lang,
-                {seriesid: seriesId}
-            );
+            const response: SeriesDetailResponse = useLocal
+                ? await getSeriesDetail(seriesId) as SeriesDetailResponse
+                : await apiGet<SeriesDetailResponse>('series/detail', userToken, lang, {seriesid: seriesId});
             if (response) {
                 setName(response.name);
                 setDescription(response.description || '');
@@ -67,11 +69,9 @@ function BasicSeriesInformation(props: object, ref: React.Ref<{ handleSave: () =
             return;
         }
         try {
-            const response: SeriesUpdateResponse = await apiPut<SeriesUpdateResponse>('series/update', {
-                seriesId: seriesId,
-                name: name,
-                description: description
-            }, userToken, lang);
+            const response: SeriesUpdateResponse = useLocal
+                ? {success: await updateSeries({seriesId, name, description})}  as SeriesUpdateResponse
+                : await apiPut<SeriesUpdateResponse>('series/update', {seriesId, name, description}, userToken, lang);
             if (!response.success) {
                 errorMessage(t('seriesBasicInformation.error.update'));
                 return;

components/series/settings/SeriesBooksManager.tsx

@@ -1,6 +1,9 @@
 'use client'
 import {forwardRef, useContext, useEffect, useImperativeHandle, useState} from "react";
+import OfflineContext, {OfflineContextType} from '@/context/OfflineContext';
+import {isDesktop} from '@/lib/configs';
 import {apiDelete, apiGet, apiPost, apiPut} from '@/lib/api/client';
+import * as tauri from '@/lib/tauri';
 import {AlertContext, AlertContextProps} from "@/context/AlertContext";
 import {SessionContext, SessionContextProps} from "@/context/SessionContext";
 import {useTranslations} from '@/lib/i18n';
@@ -30,6 +33,8 @@ function SeriesBooksManager(props: object, ref: React.Ref<{ handleSave: () => Pr
     }: BooksSyncContextProps = useContext<BooksSyncContextProps>(BooksSyncContext);
     const userToken: string = session?.accessToken ? session?.accessToken : '';
     const {errorMessage, successMessage}: AlertContextProps = useContext<AlertContextProps>(AlertContext);
+    const {isCurrentlyOffline} = useContext(OfflineContext);
+    const useLocal: boolean = isDesktop && isCurrentlyOffline();
     
     const [isLoading, setIsLoading] = useState<boolean>(true);
     const [seriesBooks, setSeriesBooks] = useState<SeriesBookProps[]>([]);
@@ -53,12 +58,9 @@ function SeriesBooksManager(props: object, ref: React.Ref<{ handleSave: () => Pr
     async function loadSeriesBooks(): Promise<void> {
         setIsLoading(true);
         try {
-            const response: SeriesBookProps[] = await apiGet<SeriesBookProps[]>(
-                'series/book/list',
-                userToken,
-                lang,
-                {seriesid: seriesId}
-            );
+            const response: SeriesBookProps[] = useLocal
+                ? await tauri.getSeriesBooks(seriesId) as SeriesBookProps[]
+                : await apiGet<SeriesBookProps[]>('series/book/list', userToken, lang, {seriesid: seriesId});
             if (response) {
                 setSeriesBooks(response);
             }
@@ -90,15 +92,9 @@ function SeriesBooksManager(props: object, ref: React.Ref<{ handleSave: () => Pr
         }
         
         try {
-            const response: boolean = await apiPost<boolean>(
-                'series/book/add',
-                {
-                    seriesId: seriesId,
-                    bookId: selectedBookToAdd
-                },
-                userToken,
-                lang
-            );
+            const response: boolean = useLocal
+                ? await tauri.addBookToSeries(seriesId, selectedBookToAdd)
+                : await apiPost<boolean>('series/book/add', {seriesId: seriesId, bookId: selectedBookToAdd}, userToken, lang);
             
             if (response) {
                 const addedBook: SyncedBook | undefined = serverSyncedBooks.find(
@@ -134,15 +130,10 @@ function SeriesBooksManager(props: object, ref: React.Ref<{ handleSave: () => Pr
     
     async function handleRemoveBook(bookId: string): Promise<void> {
         try {
-            const response: boolean = await apiDelete<boolean>(
-                'series/book/remove',
-                {
-                    seriesId: seriesId,
-                    bookId: bookId
-                },
-                userToken,
-                lang
-            );
+            const deletedAt: number = Math.floor(Date.now() / 1000);
+            const response: boolean = useLocal
+                ? await tauri.removeBookFromSeries(seriesId, bookId, deletedAt)
+                : await apiDelete<boolean>('series/book/remove', {seriesId: seriesId, bookId: bookId}, userToken, lang);
             
             if (response) {
                 const updatedBooks: SeriesBookProps[] = seriesBooks
@@ -187,18 +178,10 @@ function SeriesBooksManager(props: object, ref: React.Ref<{ handleSave: () => Pr
         }));
         
         try {
-            const response: boolean = await apiPut<boolean>(
-                'series/book/reorder',
-                {
-                    seriesId: seriesId,
-                    booksOrder: updatedBooks.map((book: SeriesBookProps) => ({
-                        bookId: book.bookId,
-                        order: book.order
-                    }))
-                },
-                userToken,
-                lang
-            );
+            const bookIds: string[] = updatedBooks.map((book: SeriesBookProps) => book.bookId);
+            const response: boolean = useLocal
+                ? await tauri.reorderSeriesBooks(seriesId, bookIds)
+                : await apiPut<boolean>('series/book/reorder', {seriesId: seriesId, booksOrder: updatedBooks.map((book: SeriesBookProps) => ({bookId: book.bookId, order: book.order}))}, userToken, lang);
             
             if (response) {
                 setSeriesBooks(updatedBooks);