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

@@ -0,0 +1,69 @@
+import React from "react";
+import {LucideIcon} from "lucide-react";
+
+type IconButtonVariant = 'primary' | 'danger' | 'ghost' | 'muted' | 'light';
+type IconButtonSize = 'sm' | 'md' | 'lg';
+type IconButtonShape = 'circle' | 'square';
+
+interface IconButtonProps {
+    icon: LucideIcon;
+    variant?: IconButtonVariant;
+    size?: IconButtonSize;
+    shape?: IconButtonShape;
+    onClick?: () => void | Promise<void>;
+    disabled?: boolean;
+    selected?: boolean;
+    tooltip?: string;
+}
+
+const variantClasses: Record<IconButtonVariant, string> = {
+    primary: 'text-muted hover:text-primary hover:bg-primary/10',
+    danger: 'text-muted hover:text-error hover:bg-error/10',
+    ghost: 'text-text-secondary hover:text-text-primary hover:bg-secondary',
+    muted: 'bg-secondary hover:bg-gray-dark text-text-secondary hover:text-text-primary',
+    light: 'text-text-primary/80 hover:text-text-primary hover:bg-text-primary/10',
+};
+
+const sizeClasses: Record<IconButtonSize, { button: string; icon: string }> = {
+    sm: {button: 'p-1.5', icon: 'w-4 h-4'},
+    md: {button: 'p-2', icon: 'w-5 h-5'},
+    lg: {button: 'p-2', icon: 'w-6 h-6'},
+};
+
+const shapeClasses: Record<IconButtonShape, string> = {
+    circle: 'rounded-full',
+    square: 'rounded-lg',
+};
+
+export default function IconButton(
+    {
+        icon: Icon,
+        variant = 'ghost',
+        size = 'md',
+        shape = 'square',
+        onClick,
+        disabled = false,
+        selected = false,
+        tooltip,
+    }: IconButtonProps) {
+    const sizeConfig = sizeClasses[size];
+    const selectedClass: string = selected ? 'bg-secondary text-primary' : '';
+
+    return (
+        <button
+            onClick={onClick}
+            disabled={disabled}
+            title={tooltip}
+            className={`
+                flex items-center justify-center
+                transition-all duration-200
+                ${shapeClasses[shape]}
+                ${selected ? selectedClass : variantClasses[variant]}
+                ${sizeConfig.button}
+                ${disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'}
+            `}
+        >
+            <Icon className={sizeConfig.icon} strokeWidth={2.25}/>
+        </button>
+    );
+}