feat: add testimony form and enhance map controls for Hebrew support

- Introduced a new TestimonyForm component for user input on testimonies.
- Updated BaseMapControls to support Hebrew language titles for buttons.
- Enhanced useMap hook to localize drawing tooltips and messages based on Hebrew language setting.
- Added styles for the testimony form in index.css to improve UI consistency.

Author: noamjgal

src/index.css

@@ -786,3 +786,31 @@ a:hover {
   outline: none;
   box-shadow: none;
 }
+
+.testimony-form {
+  background: rgba(20, 20, 20, 0.4);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  border-radius: 10px;
+  padding: 14px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  min-width: 360px;
+}
+
+.testimony-field {
+  border-radius: 6px !important;
+}
+
+.testimony-buttons {
+  display: flex;
+  gap: 4px;
+  direction: rtl;
+}
+
+.testimony-buttons .shape-name-input-btn {
+  flex: 1;
+  border-radius: 6px;
+}
+

src/pages/MapPage/BaseMapControls.tsx

@@ -6,9 +6,10 @@ interface BaseMapControlsProps {
   mapRef: React.MutableRefObject<L.Map | null>;
   drawControlRef: React.MutableRefObject<L.Control.Draw | null>;
   featureCount: number;
+  isHebrew?: boolean;
 }
 
-const BaseMapControls = ({ mapRef, drawControlRef, featureCount }: BaseMapControlsProps) => {
+const BaseMapControls = ({ mapRef, drawControlRef, featureCount, isHebrew }: BaseMapControlsProps) => {
   const navigate = useNavigate();
 
   const disableAllModes = () => {
@@ -94,50 +95,50 @@ const BaseMapControls = ({ mapRef, drawControlRef, featureCount }: BaseMapContro
       <button
         className="base-map-control-btn"
         onClick={() => handleDrawTool("polygon")}
-        title="Polygon"
+        title={isHebrew ? "מצולע" : "Polygon"}
       >
         ⬟
       </button>
       <button
         className="base-map-control-btn"
         onClick={() => handleDrawTool("polyline")}
-        title="Line"
+        title={isHebrew ? "קו" : "Line"}
       >
         ╱
       </button>
       <button
         className="base-map-control-btn"
         onClick={() => handleDrawTool("marker")}
-        title="Point"
+        title={isHebrew ? "נקודה" : "Point"}
       >
         +
       </button>
       <button
         className="base-map-control-btn"
         onClick={handleEditMode}
-        title="Edit"
+        title={isHebrew ? "עריכה" : "Edit"}
       >
         ✏
       </button>
       <button
         className="base-map-control-btn"
         onClick={handleDeleteMode}
-        title="Delete"
+        title={isHebrew ? "מחיקה" : "Delete"}
       >
         ×
       </button>
       <div className="base-map-controls-divider"></div>
       <button
         className="base-map-control-btn"
         onClick={handleHome}
-        title="Projects"
+        title={isHebrew ? "פרויקטים" : "Projects"}
       >
         ⌂
       </button>
       <button
         className="base-map-control-btn"
         onClick={handleSignOut}
-        title="Sign Out"
+        title={isHebrew ? "התנתק" : "Sign Out"}
       >
         ⏻
       </button>

src/pages/MapPage/TestimonyForm.tsx

@@ -0,0 +1,86 @@
+import { useState, useRef, useEffect } from "react";
+
+interface TestimonyFormProps {
+  onSubmit: (name: string | null, description: string | null) => void;
+  onCancel: () => void;
+}
+
+const NAME_QUESTION = "תנו שם לרשומה";
+const TESTIMONY_QUESTION = "ספר/י מה קרה כאן";
+
+const TestimonyForm = ({ onSubmit, onCancel }: TestimonyFormProps) => {
+  const [step, setStep] = useState<1 | 2>(1);
+  const [name, setName] = useState("");
+  const [testimony, setTestimony] = useState("");
+  const inputRef = useRef<HTMLInputElement | HTMLTextAreaElement>(null);
+
+  useEffect(() => {
+    inputRef.current?.focus();
+  }, [step]);
+
+  const question = step === 1 ? NAME_QUESTION : TESTIMONY_QUESTION;
+  const value = step === 1 ? name : testimony;
+  const canNext = value.trim().length > 0;
+
+  const handleNext = () => {
+    if (step === 1) {
+      setStep(2);
+    } else {
+      onSubmit(name.trim() || null, testimony.trim() || null);
+    }
+  };
+
+  return (
+    <div className="shape-name-input-container">
+      <form
+        onSubmit={(e) => {
+          e.preventDefault();
+          if (canNext) handleNext();
+        }}
+        className="testimony-form"
+        dir="rtl"
+      >
+        <label className="shape-name-input-label">{question}</label>
+        {step === 1 ? (
+          <input
+            ref={inputRef as React.RefObject<HTMLInputElement>}
+            type="text"
+            value={name}
+            onChange={(e) => setName(e.target.value)}
+            onKeyDown={(e) => e.key === "Escape" && onCancel()}
+            className="shape-name-input-field testimony-field"
+            dir="rtl"
+          />
+        ) : (
+          <textarea
+            ref={inputRef as React.RefObject<HTMLTextAreaElement>}
+            value={testimony}
+            onChange={(e) => setTestimony(e.target.value)}
+            onKeyDown={(e) => e.key === "Escape" && onCancel()}
+            className="shape-description-input-field testimony-field"
+            rows={5}
+            dir="rtl"
+          />
+        )}
+        <div className="testimony-buttons">
+          <button
+            type="submit"
+            className="shape-name-input-btn"
+            disabled={!canNext}
+          >
+            {step === 1 ? "הבא" : "שמור"}
+          </button>
+          <button
+            type="button"
+            onClick={onCancel}
+            className="shape-name-input-btn"
+          >
+            ביטול
+          </button>
+        </div>
+      </form>
+    </div>
+  );
+};
+
+export default TestimonyForm;

src/pages/MapPage/hooks/useMap.ts

@@ -16,6 +16,7 @@ interface UseMapProps {
   center: L.LatLngExpression;
   enabled?: boolean;
   onShapeCreated?: (layer: L.Layer, callback: (name: string | null, description: string | null) => void) => void;
+  isHebrew?: boolean;
 }
 
 interface UseMapReturn {
@@ -24,7 +25,7 @@ interface UseMapReturn {
   featureCount: number;
 }
 
-export const useMap = ({ center, enabled = true, onShapeCreated }: UseMapProps): UseMapReturn => {
+export const useMap = ({ center, enabled = true, onShapeCreated, isHebrew }: UseMapProps): UseMapReturn => {
   const mapRef = useRef<L.Map | null>(null);
   const drawnItemsRef = useRef<L.FeatureGroup | null>(null);
   const drawControlRef = useRef<L.Control.Draw | null>(null);
@@ -63,6 +64,32 @@ export const useMap = ({ center, enabled = true, onShapeCreated }: UseMapProps):
       drawnItemsRef.current = new L.FeatureGroup();
       mapRef.current.addLayer(drawnItemsRef.current);
 
+      if (isHebrew) {
+        L.drawLocal.draw.toolbar.actions.title = "בטל ציור";
+        L.drawLocal.draw.toolbar.actions.text = "ביטול";
+        L.drawLocal.draw.toolbar.finish.title = "סיים ציור";
+        L.drawLocal.draw.toolbar.finish.text = "סיום";
+        L.drawLocal.draw.toolbar.undo.title = "מחק נקודה אחרונה";
+        L.drawLocal.draw.toolbar.undo.text = "מחק אחרון";
+        L.drawLocal.draw.handlers.polygon.tooltip.start = "לחצו כדי להתחיל לצייר צורה";
+        L.drawLocal.draw.handlers.polygon.tooltip.cont = "לחצו כדי להמשיך לצייר";
+        L.drawLocal.draw.handlers.polygon.tooltip.end = "לחצו על הנקודה הראשונה כדי לסגור את הצורה";
+        L.drawLocal.draw.handlers.polyline.tooltip.start = "לחצו כדי להתחיל לצייר קו";
+        L.drawLocal.draw.handlers.polyline.tooltip.cont = "לחצו כדי להמשיך לצייר";
+        L.drawLocal.draw.handlers.polyline.tooltip.end = "לחצו על הנקודה האחרונה כדי לסיים";
+        L.drawLocal.draw.handlers.marker.tooltip.start = "לחצו על המפה כדי להוסיף נקודה";
+        L.drawLocal.edit.toolbar.actions.save.title = "שמור שינויים";
+        L.drawLocal.edit.toolbar.actions.save.text = "שמור";
+        L.drawLocal.edit.toolbar.actions.cancel.title = "בטל שינויים";
+        L.drawLocal.edit.toolbar.actions.cancel.text = "ביטול";
+        L.drawLocal.edit.toolbar.actions.clearAll.title = "נקה הכל";
+        L.drawLocal.edit.toolbar.actions.clearAll.text = "נקה הכל";
+        L.drawLocal.edit.toolbar.buttons.edit = "ערוך שכבות";
+        L.drawLocal.edit.toolbar.buttons.editDisabled = "אין שכבות לעריכה";
+        L.drawLocal.edit.toolbar.buttons.remove = "מחק שכבות";
+        L.drawLocal.edit.toolbar.buttons.removeDisabled = "אין שכבות למחיקה";
+      }
+
       const drawControl = new L.Control.Draw({
         position: "topleft",
         edit: { featureGroup: drawnItemsRef.current },
@@ -119,7 +146,7 @@ export const useMap = ({ center, enabled = true, onShapeCreated }: UseMapProps):
               const newFeature = await createGeometry(shapeName, description, geojson);
               if (newFeature) {
                 layer.featureId = newFeature.id;
-                const displayName = newFeature.name || "Unnamed";
+                const displayName = newFeature.name || (isHebrew ? "ללא שם" : "Unnamed");
                 layer.bindTooltip(displayName);
               }
               pendingLayersRef.current.delete(layer);
@@ -202,7 +229,7 @@ export const useMap = ({ center, enabled = true, onShapeCreated }: UseMapProps):
 
           if (layer) {
             layer.featureId = feature.id;
-            const displayName = feature.name || "Unnamed";
+            const displayName = feature.name || (isHebrew ? "ללא שם" : "Unnamed");
             layer.bindTooltip(displayName);
             drawnItemsRef.current?.addLayer(layer);
           }
@@ -218,7 +245,7 @@ export const useMap = ({ center, enabled = true, onShapeCreated }: UseMapProps):
         drawControlRef.current = null;
       }
     };
-  }, [center, enabled]);
+  }, [center, enabled, isHebrew]);
 
   return { mapRef, drawControlRef, featureCount };
 };

src/pages/MapPage/index.tsx

@@ -6,6 +6,9 @@ import PinkLineMapPage from "./PinkLineMapPage";
 import MemorialSitesMapPage from "./MemorialSitesMapPage";
 import BaseMapControls from "./BaseMapControls";
 import ShapeNameInput from "./ShapeNameInput";
+import TestimonyForm from "./TestimonyForm";
+
+const TESTIMONY_PROJECT_ID = "11111111-1111-1111-1111-111111111111";
 
 const MapPage = () => {
   const { project, isLoading } = useProject();
@@ -55,15 +58,17 @@ const MapPage = () => {
   };
 
   const isMemorialSites = project?.id === "33333333-3333-3333-3333-333333333333";
+  const isTestimony = project?.id === TESTIMONY_PROJECT_ID;
   const isSpecialProject = project?.name === "Pink Line" || isMemorialSites;
   const { mapRef, drawControlRef, featureCount } = useMap({ 
     center: mapInitCenter,
     enabled: !isLoading && !isSpecialProject,
-    onShapeCreated: handleShapeCreated
+    onShapeCreated: handleShapeCreated,
+    isHebrew: isTestimony,
   });
 
   if (isLoading) {
-    return <div>Loading project...</div>;
+    return <div>טוען...</div>;
   }
 
   if (project?.name === "Pink Line") return <PinkLineMapPage />;
@@ -72,12 +77,19 @@ const MapPage = () => {
   return (
     <>
       <div key={project?.id || "no-project"} id="map" style={{ height: "100vh", width: "100%" }}></div>
-      <BaseMapControls mapRef={mapRef} drawControlRef={drawControlRef} featureCount={featureCount} />
+      <BaseMapControls mapRef={mapRef} drawControlRef={drawControlRef} featureCount={featureCount} isHebrew={isTestimony} />
       {pendingLayer && (
-        <ShapeNameInput
-          onSubmit={handleShapeNameSubmit}
-          onCancel={handleShapeNameCancel}
-        />
+        project?.id === TESTIMONY_PROJECT_ID ? (
+          <TestimonyForm
+            onSubmit={handleShapeNameSubmit}
+            onCancel={handleShapeNameCancel}
+          />
+        ) : (
+          <ShapeNameInput
+            onSubmit={handleShapeNameSubmit}
+            onCancel={handleShapeNameCancel}
+          />
+        )
       )}
     </>
   );