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

@@ -0,0 +1,59 @@
+import React from "react";
+import {LucideIcon} from "lucide-react";
+
+interface ToggleOption {
+    value: string;
+    label: string;
+}
+
+type ToggleGroupSize = 'sm' | 'md';
+
+interface ToggleGroupProps {
+    options: ToggleOption[];
+    value: string;
+    onChange: (value: string) => void;
+    icon?: LucideIcon;
+    size?: ToggleGroupSize;
+}
+
+const sizeClasses: Record<ToggleGroupSize, { wrapper: string; icon: string; button: string }> = {
+    sm: {wrapper: 'rounded-lg', icon: 'w-3.5 h-3.5 mx-2', button: 'px-2.5 py-1 text-xs'},
+    md: {wrapper: 'rounded-xl', icon: 'w-4 h-4 mx-2.5', button: 'px-3 py-1.5 text-sm'},
+};
+
+export default function ToggleGroup(
+    {
+        options,
+        value,
+        onChange,
+        icon: Icon,
+        size = 'sm'
+    }: ToggleGroupProps): React.JSX.Element {
+    const config = sizeClasses[size];
+    
+    return (
+        <div className={`flex items-center bg-darkest-background ${config.wrapper} border border-secondary`}>
+            {Icon && (
+                <Icon className={`${config.icon} text-primary flex-shrink-0`} strokeWidth={1.75}/>
+            )}
+            {options.map(function (option: ToggleOption): React.JSX.Element {
+                const isActive: boolean = value === option.value;
+                return (
+                    <button
+                        key={option.value}
+                        onClick={function (): void {
+                            onChange(option.value);
+                        }}
+                        className={`${config.button} font-semibold transition-all duration-200 ${
+                            isActive
+                                ? 'bg-primary text-text-primary rounded-lg'
+                                : 'text-text-secondary hover:text-text-primary'
+                        }`}
+                    >
+                        {option.label}
+                    </button>
+                );
+            })}
+        </div>
+    );
+}