Add foundational components and logic for migration, UI design, and input handling

- Introduced foundational UI components (`Badge`, `LockCard`, `SectionHeader`, `AvatarIcon`, etc.) for flexible layouts and consistent design.
- Added migration support with the `MigrationModal` component and backend integration for exporting/importing data between Electron and Tauri.
- Extended form components with `TextAreaInput`, `OrderInput`, `ToggleField`, and `ToolbarSelect` for improved input handling.
- Updated `ScribeShell` with migration popup logic to prompt users for data migration.
- Integrated `AlertStack` for better alert handling and notification management.
- Enhanced Rust/Tauri services with migration command implementations.
- Added translations and styles for new components.

components/rightbar/ComposerRightBar.tsx

@@ -1,5 +1,5 @@
 'use client'
-import {ExternalLink, Feather, Globe, Info, MapPin, MessageCircle, Users, Wand2, X} from 'lucide-react';
+import {ArrowRightLeft, ExternalLink, Feather, Globe, Info, MapPin, MessageCircle, Users, Wand2, X} from 'lucide-react';
 import React, {lazy, Suspense, useContext, useEffect, useState} from "react";
 import {BookContext, BookContextProps} from "@/context/BookContext";
 import {PanelComponent} from "@/lib/types/editor";
@@ -11,6 +11,8 @@ import PulseLoader from '@/components/ui/PulseLoader';
 import InsetPanel from "@/components/ui/InsetPanel";
 import IconButton from "@/components/ui/IconButton";
 import OfflineContext, {OfflineContextType} from "@/context/OfflineContext";
+import {isDesktop} from '@/lib/configs';
+import MigrationModal from '@/components/migration/MigrationModal';
 
 // Lazy loaded Editor components
 const WorldEditor = lazy(function () {
@@ -52,6 +54,11 @@ export default function ComposerRightBar(): React.JSX.Element {
     const [panelHidden, setPanelHidden] = useState<boolean>(false);
     const [currentPanel, setCurrentPanel] = useState<PanelComponent | undefined>();
     const [showAbout, setShowAbout] = useState<boolean>(false);
+    const [showMigration, setShowMigration] = useState<boolean>(false);
+
+    const migrationDone: boolean = localStorage.getItem('electron_migration_done') === 'true';
+    const migrationDismissed: boolean = localStorage.getItem('electron_migration_dismissed') === 'true';
+    const showMigrationButton: boolean = isDesktop && !migrationDone;
 
     function togglePanel(component: PanelComponent): void {
         if (panelHidden) {
@@ -103,6 +110,16 @@ export default function ComposerRightBar(): React.JSX.Element {
     ];
 
     const homeComponents: PanelComponent[] = [
+        ...(showMigrationButton ? [{
+            id: 0,
+            title: t("composerRightBar.homeComponents.migration.title"),
+            description: t("composerRightBar.homeComponents.migration.description"),
+            badge: 'IMPORT',
+            icon: ArrowRightLeft,
+            action: function (): void {
+                setShowMigration(true);
+            }
+        }] : []),
         {
             id: 1,
             title: t("composerRightBar.homeComponents.about.title"),
@@ -224,6 +241,10 @@ export default function ComposerRightBar(): React.JSX.Element {
             {showAbout && <AboutEditors onClose={function (): void {
                 setShowAbout(false);
             }}/>}
+            {showMigration && <MigrationModal
+                onClose={function (): void { setShowMigration(false); }}
+                onSuccess={function (): void { setShowMigration(false); window.location.reload(); }}
+            />}
         </div>
     );
 }