feat: add frontend import UI (refs #26)

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

frontend/src/features/settings/mobile/MobileSettingsScreen.tsx

@@ -11,6 +11,8 @@ import { useAdminAccess } from '../../../core/auth/useAdminAccess';
 import { useNavigationStore } from '../../../core/store';
 import { DeleteAccountModal } from './DeleteAccountModal';
 import { PendingDeletionBanner } from './PendingDeletionBanner';
+import { ImportButton } from '../components/ImportButton';
+import { ImportDialog } from '../components/ImportDialog';
 
 interface ToggleSwitchProps {
   enabled: boolean;
@@ -90,6 +92,8 @@ export const MobileSettingsScreen: React.FC = () => {
   const [isEditingProfile, setIsEditingProfile] = useState(false);
   const [editedDisplayName, setEditedDisplayName] = useState('');
   const [editedNotificationEmail, setEditedNotificationEmail] = useState('');
+  const [showImportDialog, setShowImportDialog] = useState(false);
+  const [importFile, setImportFile] = useState<File | null>(null);
 
   // Initialize edit form when profile loads or edit mode starts
   React.useEffect(() => {
@@ -108,6 +112,16 @@ export const MobileSettingsScreen: React.FC = () => {
     exportMutation.mutate();
   };
 
+  const handleImportFileSelected = (file: File) => {
+    setImportFile(file);
+    setShowImportDialog(true);
+  };
+
+  const handleImportDialogClose = () => {
+    setShowImportDialog(false);
+    setImportFile(null);
+  };
+
 
   const handleEditProfile = () => {
     setIsEditingProfile(true);
@@ -439,9 +453,14 @@ export const MobileSettingsScreen: React.FC = () => {
           <div>
             <h2 className="text-lg font-semibold text-slate-800 dark:text-avus mb-4">Data Management</h2>
             <div className="space-y-3">
+              <ImportButton onFileSelected={handleImportFileSelected} />
+              <p className="text-sm text-slate-500 dark:text-titanio">
+                Restore your data from a previous export
+              </p>
               <button
                 onClick={() => setShowDataExport(true)}
                 className="w-full text-left p-3 bg-primary-50 text-primary-700 rounded-lg font-medium hover:bg-primary-100 transition-colors dark:bg-primary-900/20 dark:text-primary-300 dark:hover:bg-primary-900/30"
+                style={{ minHeight: '44px' }}
               >
                 Export My Data
               </button>
@@ -572,6 +591,13 @@ export const MobileSettingsScreen: React.FC = () => {
           isOpen={showDeleteConfirm}
           onClose={() => setShowDeleteConfirm(false)}
         />
+
+        {/* Import Dialog */}
+        <ImportDialog
+          isOpen={showImportDialog}
+          onClose={handleImportDialogClose}
+          file={importFile}
+        />
       </div>
     </MobileContainer>
   );