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

@@ -0,0 +1,51 @@
+import React from 'react';
+import {LucideIcon} from 'lucide-react';
+
+type DetailFieldVariant = 'default' | 'compact';
+
+interface DetailFieldProps {
+    label: string;
+    value: string | number | null | undefined;
+    icon?: LucideIcon;
+    variant?: DetailFieldVariant;
+    preserveWhitespace?: boolean;
+}
+
+export default function DetailField({
+                                        label,
+                                        value,
+                                        icon,
+                                        variant = 'default',
+                                        preserveWhitespace = true,
+                                    }: DetailFieldProps): React.JSX.Element | null {
+    if (variant === 'compact' && !value) return null;
+
+    if (variant === 'compact') {
+        return (
+            <div className="mb-3">
+                <span className="text-text-secondary text-xs block mb-1">{label}</span>
+                <p className={`text-text-primary text-sm ${preserveWhitespace ? 'whitespace-pre-wrap' : ''}`}>
+                    {value}
+                </p>
+            </div>
+        );
+    }
+    
+    function renderIcon(): React.JSX.Element | null {
+        if (!icon) return null;
+        const Icon: LucideIcon = icon;
+        return <Icon className="w-4 h-4 text-primary" strokeWidth={1.75}/>;
+    }
+
+    return (
+        <div className="p-5 bg-secondary rounded-xl">
+            <div className="flex items-center gap-2 mb-3">
+                {renderIcon()}
+                <h3 className="text-text-primary font-semibold">{label}</h3>
+            </div>
+            <p className={`${preserveWhitespace ? 'whitespace-pre-wrap' : ''} ${value ? 'text-text-primary' : 'text-text-secondary/50 italic'}`}>
+                {value || '—'}
+            </p>
+        </div>
+    );
+}