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/AvatarIcon.tsx

@@ -0,0 +1,65 @@
+import React from 'react';
+import {LucideIcon} from 'lucide-react';
+
+type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+
+interface AvatarIconProps {
+    size?: AvatarSize;
+    image?: string | null;
+    icon?: LucideIcon;
+    initial?: string;
+    alt?: string;
+}
+
+const sizeClasses: Record<AvatarSize, string> = {
+    xs: 'w-7 h-7',
+    sm: 'w-10 h-10',
+    md: 'w-12 h-12',
+    lg: 'w-14 h-14',
+    xl: 'w-16 h-16',
+};
+
+const iconSizeClasses: Record<AvatarSize, string> = {
+    xs: 'w-3.5 h-3.5',
+    sm: 'w-5 h-5',
+    md: 'w-6 h-6',
+    lg: 'w-7 h-7',
+    xl: 'w-8 h-8',
+};
+
+const initialSizeClasses: Record<AvatarSize, string> = {
+    xs: 'text-xs',
+    sm: 'text-sm',
+    md: 'text-base',
+    lg: 'text-lg',
+    xl: 'text-xl',
+};
+
+export default function AvatarIcon({
+                                       size = 'md',
+                                       image,
+                                       icon: Icon,
+                                       initial,
+                                       alt = '',
+                                   }: AvatarIconProps): React.JSX.Element {
+    return (
+        <div
+            className={`${sizeClasses[size]} rounded-full border-2 border-primary overflow-hidden bg-secondary transition-colors flex items-center justify-center`}
+        >
+            {image ? (
+                <img
+                    src={image}
+                    alt={alt}
+                    className="w-full h-full object-cover"
+                />
+            ) : Icon ? (
+                <Icon className={`text-primary ${iconSizeClasses[size]}`} strokeWidth={1.75}/>
+            ) : initial ? (
+                <div
+                    className={`w-full h-full flex items-center justify-center bg-primary/10 text-primary font-bold ${initialSizeClasses[size]}`}>
+                    {initial}
+                </div>
+            ) : null}
+        </div>
+    );
+}