feat: SAPIENS Mobile App - Initial commit

React Native mobile application for SAPIENS news platform.
Consolidated all previous history into single commit.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

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

client/src/components/ImagePreviewDialog.tsx

@@ -0,0 +1,69 @@
+import { X } from "lucide-react";
+import { 
+  Dialog, 
+  DialogContent, 
+  DialogTrigger,
+  DialogTitle,
+  DialogHeader,
+  DialogDescription
+} from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { VisuallyHidden } from "@radix-ui/react-visually-hidden";
+
+interface ImagePreviewDialogProps {
+  children: React.ReactNode;
+  imageSrc?: string;
+  imageAlt: string;
+  title?: string;
+}
+
+export default function ImagePreviewDialog({
+  children,
+  imageSrc,
+  imageAlt,
+  title
+}: ImagePreviewDialogProps) {
+  if (!imageSrc) return <>{children}</>;
+
+  return (
+    <Dialog>
+      <DialogTrigger asChild>
+        {children}
+      </DialogTrigger>
+      <DialogContent className="bg-background rounded-lg shadow-lg max-w-md w-full m-4 max-h-[80vh] overflow-y-auto">
+        <DialogHeader className="sr-only">
+          <DialogTitle>
+            <VisuallyHidden>{title || imageAlt}</VisuallyHidden>
+          </DialogTitle>
+          <DialogDescription>
+            <VisuallyHidden>Profile image preview</VisuallyHidden>
+          </DialogDescription>
+        </DialogHeader>
+        
+        <div className="p-6">
+          <div className="flex items-center justify-between mb-6">
+            <div className="flex items-center gap-3">
+              <div className="h-12 w-12 bg-primary/10 rounded-full flex items-center justify-center">
+                <span className="text-sm font-medium">{title?.slice(0, 2).toUpperCase()}</span>
+              </div>
+              <div>
+                <h2 className="text-lg font-bold" data-testid="text-modal-name">
+                  {title}
+                </h2>
+              </div>
+            </div>
+          </div>
+          
+          {/* Image container */}
+          <div className="flex justify-center">
+            <img
+              src={imageSrc}
+              alt={imageAlt}
+              className="max-w-full max-h-[60vh] object-contain rounded-lg shadow-lg"
+            />
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}