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

@@ -0,0 +1,65 @@
+import React, {ReactNode, useState} from "react";
+import {ChevronDown, ChevronUp, LucideIcon} from 'lucide-react';
+import IconContainer from "@/components/ui/IconContainer";
+
+type CollapseVariant = 'default' | 'card';
+
+export interface CollapseProps {
+    title: string;
+    icon?: LucideIcon;
+    variant?: CollapseVariant;
+    content?: ReactNode;
+    children?: ReactNode;
+    defaultOpen?: boolean;
+}
+
+export default function Collapse(
+    {
+        title,
+        icon,
+        variant = 'default',
+        content,
+        children,
+        defaultOpen = false,
+    }: CollapseProps) {
+    const [isOpen, setIsOpen] = useState<boolean>(defaultOpen);
+    const renderContent: ReactNode = children || content;
+    const isCard: boolean = variant === 'card';
+    const ChevronIcon = isOpen ? ChevronUp : ChevronDown;
+
+    return (
+        <div
+            className={`mb-4 transition-colors duration-150 ${isCard ? 'bg-tertiary rounded-xl' : ''}`}>
+            <button
+                onClick={() => setIsOpen(!isOpen)}
+                className={`
+                    w-full text-left transition-all duration-200 p-4 flex items-center justify-between group
+                    ${isCard
+                    ? ''
+                    : `bg-secondary hover:bg-gray-dark ${isOpen ? 'rounded-t-xl' : 'rounded-xl'}`
+                }
+                `}
+            >
+                <div className="flex items-center gap-2">
+                    {icon && (
+                        <div className="transition-colors duration-150">
+                            <IconContainer icon={icon} size="sm" shape="circle" filled/>
+                        </div>
+                    )}
+                    <span className="text-text-primary font-bold">{title}</span>
+                </div>
+                <ChevronIcon className="text-primary w-4 h-4 transition-transform"
+                             strokeWidth={1.75}/>
+            </button>
+
+            {isOpen && (
+                <div className={`animate-fadeIn ${isCard
+                    ? 'p-3 m-4 mt-0 bg-darkest-background rounded-lg'
+                    : 'bg-darkest-background border-l-4 border-primary p-4 rounded-b-xl'
+                }`}>
+                    {renderContent}
+                </div>
+            )}
+        </div>
+    );
+}