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/ui/SettingsPanel.tsx

@@ -0,0 +1,53 @@
+'use client'
+import {ReactNode, useEffect, useState} from "react";
+import {X} from "lucide-react";
+import {createPortal} from "react-dom";
+
+interface SettingsPanelProps {
+    title: string;
+    sidebar: ReactNode;
+    children: ReactNode;
+    onClose: () => void;
+}
+
+export default function SettingsPanel({title, sidebar, children, onClose}: SettingsPanelProps) {
+    const [mounted, setMounted] = useState<boolean>(false);
+    
+    useEffect((): void => {
+        setMounted(true);
+    }, []);
+    
+    if (!mounted) return null;
+    
+    return createPortal(
+        <div className="fixed inset-0 z-40 bg-darkest-background/60 backdrop-blur-md flex items-center justify-center">
+            <div className="w-3/4 h-[85vh] bg-tertiary rounded-2xl border border-secondary flex flex-col">
+                
+                <div className="px-6 py-4 rounded-t-2xl flex justify-between items-center">
+                    <h2 className="font-['ADLaM_Display'] text-xl text-text-primary">{title}</h2>
+                    <button
+                        onClick={onClose}
+                        className="text-text-primary/80 hover:text-text-primary p-2 rounded-lg hover:bg-text-primary/10 transition-all"
+                    >
+                        <X className="w-5 h-5" strokeWidth={1.75}/>
+                    </button>
+                </div>
+                
+                <div className="flex flex-1 min-h-0">
+                    <div className="w-56 flex-shrink-0 overflow-y-auto">
+                        {sidebar}
+                    </div>
+                    <div className="flex-1 min-h-0 p-2 pl-0">
+                        <div className="h-full bg-darkest-background rounded-xl overflow-hidden">
+                            <div className="h-full overflow-y-auto">
+                                {children}
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+            </div>
+        </div>,
+        document.body
+    );
+}