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

@@ -0,0 +1,61 @@
+import React, {ReactNode} from "react";
+import {LucideIcon} from 'lucide-react';
+
+type BadgeVariant = 'primary' | 'success' | 'warning' | 'error' | 'muted';
+type BadgeSize = 'sm' | 'md';
+type BadgeShape = 'pill' | 'rounded';
+
+interface BadgeProps {
+    variant?: BadgeVariant;
+    size?: BadgeSize;
+    shape?: BadgeShape;
+    icon?: LucideIcon;
+    children?: ReactNode;
+    interactive?: boolean;
+    floating?: boolean;
+}
+
+const variantClasses: Record<BadgeVariant, string> = {
+    primary: 'bg-primary/20 text-primary border border-primary/30',
+    success: 'bg-success/20 text-success border border-success/30',
+    warning: 'bg-warning/20 text-warning border border-warning/30',
+    error: 'bg-error/20 text-error border border-error/30',
+    muted: 'bg-secondary text-muted border border-secondary',
+};
+
+const sizeClasses: Record<BadgeSize, string> = {
+    sm: 'text-[10px] px-2 py-0.5',
+    md: 'text-xs px-3 py-1',
+};
+
+const shapeClasses: Record<BadgeShape, string> = {
+    pill: 'rounded-full',
+    rounded: 'rounded-lg',
+};
+
+export default function Badge(
+    {
+        variant = 'primary',
+        size = 'md',
+        shape = 'pill',
+        icon: Icon,
+        children,
+        interactive = false,
+        floating = false,
+    }: BadgeProps) {
+    return (
+        <span
+            className={`
+                font-medium inline-flex items-center gap-1.5
+                ${shapeClasses[shape]}
+                ${variantClasses[variant]}
+                ${sizeClasses[size]}
+                ${interactive ? 'cursor-pointer group transition-colors' : ''}
+                ${floating ? 'absolute top-3 right-3' : ''}
+            `}
+        >
+            {Icon && <Icon className="w-3 h-3" strokeWidth={1.75}/>}
+            {children}
+        </span>
+    );
+}