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.
2026-03-24 22:45:10 -04:00
parent a114592ac9
commit cfd08e3261
23 changed files with 410 additions and 409 deletions
--- a/components/book/BookCard.tsx
+++ b/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()}>
--- a/components/book/settings/BookSettingOption.tsx
+++ b/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') {
--- a/components/book/settings/characters/editor/CharacterEditorDetail.tsx
+++ b/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 {
--- a/components/book/settings/characters/editor/CharacterEditorEdit.tsx
+++ b/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 {
--- a/components/book/settings/characters/settings/CharacterSettingsDetail.tsx
+++ b/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 {
--- a/components/book/settings/characters/settings/CharacterSettingsEdit.tsx
+++ b/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 {
--- a/components/book/settings/locations/LocationComponent.tsx
+++ b/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({
--- a/components/book/settings/locations/settings/LocationSettings.tsx
+++ b/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>
                )}
                
--- a/components/book/settings/locations/settings/LocationSettingsDetail.tsx
+++ b/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">