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

@@ -0,0 +1,47 @@
+import React from "react";
+import {LucideIcon} from "lucide-react";
+
+type IconContainerSize = 'sm' | 'md' | 'lg' | 'xl';
+type IconContainerShape = 'square' | 'rounded' | 'circle';
+
+interface IconContainerProps {
+    icon: LucideIcon;
+    size?: IconContainerSize;
+    shape?: IconContainerShape;
+    filled?: boolean;
+}
+
+const sizeClasses: Record<IconContainerSize, { container: string; icon: string }> = {
+    sm: {container: 'w-10 h-10', icon: 'w-4 h-4'},
+    md: {container: 'w-12 h-12', icon: 'w-5 h-5'},
+    lg: {container: 'w-16 h-16', icon: 'w-8 h-8'},
+    xl: {container: 'w-20 h-20', icon: 'w-10 h-10'},
+};
+
+const shapeClasses: Record<IconContainerShape, string> = {
+    square: 'rounded-lg',
+    rounded: 'rounded-2xl',
+    circle: 'rounded-full',
+};
+
+export default function IconContainer(
+    {
+        icon: Icon,
+        size = 'sm',
+        shape = 'square',
+        filled = false,
+    }: IconContainerProps) {
+    const sizeConfig = sizeClasses[size];
+
+    return (
+        <div
+            className={`
+                ${filled ? 'bg-primary' : 'bg-primary/10'} flex items-center justify-center
+                ${sizeConfig.container}
+                ${shapeClasses[shape]}
+            `}
+        >
+            <Icon className={`${filled ? 'text-text-primary' : 'text-primary'} ${sizeConfig.icon}`} strokeWidth={1.75}/>
+        </div>
+    );
+}