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

@@ -0,0 +1,86 @@
+import React, {ReactNode} from 'react';
+import {ChevronRight} from 'lucide-react';
+
+type EntityListItemSize = 'sm' | 'md';
+type EntityListItemVariant = 'default' | 'transparent';
+
+interface EntityListItemProps {
+    onClick: () => void;
+    avatar: ReactNode;
+    title: string;
+    subtitle?: string | null;
+    extra?: ReactNode;
+    size?: EntityListItemSize;
+    variant?: EntityListItemVariant;
+}
+
+const rowClasses: Record<EntityListItemSize, Record<EntityListItemVariant, string>> = {
+    sm: {
+        default: 'group flex items-center p-3 bg-tertiary rounded-lg cursor-pointer hover:bg-secondary transition-colors duration-150',
+        transparent: 'group flex items-center p-3 rounded-lg cursor-pointer hover:bg-dark-background transition-colors duration-150',
+    },
+    md: {
+        default: 'group flex items-center p-4 bg-tertiary rounded-xl cursor-pointer hover:bg-secondary transition-colors duration-150',
+        transparent: 'group flex items-center p-4 rounded-xl cursor-pointer hover:bg-dark-background transition-colors duration-150',
+    },
+};
+
+const contentClasses: Record<EntityListItemSize, { margin: string; title: string; subtitle: string }> = {
+    sm: {
+        margin: 'ml-3',
+        title: 'text-text-primary font-semibold text-sm group-hover:text-primary transition-colors truncate',
+        subtitle: 'text-muted text-xs truncate',
+    },
+    md: {
+        margin: 'ml-4',
+        title: 'text-text-primary font-bold text-base group-hover:text-primary transition-colors',
+        subtitle: 'text-text-secondary text-sm mt-0.5 truncate',
+    },
+};
+
+const chevronClasses: Record<EntityListItemSize, { container: string; icon: string }> = {
+    sm: {
+        container: 'w-6 flex justify-center',
+        icon: 'text-muted group-hover:text-primary group-hover:translate-x-1 transition-all w-3 h-3',
+    },
+    md: {
+        container: 'w-8 flex justify-center',
+        icon: 'text-muted group-hover:text-primary group-hover:translate-x-1 transition-all w-4 h-4',
+    },
+};
+
+export default function EntityListItem({
+                                           onClick,
+                                           avatar,
+                                           title,
+                                           subtitle,
+                                           extra,
+                                           size = 'md',
+                                           variant = 'default',
+                                       }: EntityListItemProps): React.JSX.Element {
+    const content: { margin: string; title: string; subtitle: string } = contentClasses[size];
+    const chevron: { container: string; icon: string } = chevronClasses[size];
+
+    return (
+        <div onClick={onClick} className={rowClasses[size][variant]}>
+            {avatar}
+            
+            <div className={`${content.margin} flex-1 min-w-0`}>
+                <div className={content.title}>{title}</div>
+                {subtitle && (
+                    <div className={content.subtitle}>{subtitle}</div>
+                )}
+            </div>
+            
+            {extra && (
+                <div className="px-3">
+                    {extra}
+                </div>
+            )}
+            
+            <div className={chevron.container}>
+                <ChevronRight className={chevron.icon} strokeWidth={1.75}/>
+            </div>
+        </div>
+    );
+}