split pages CreateUpdatePost on two part and fixed button map

src/pages/CreateUpdatePost.jsx

@@ -8,7 +8,8 @@ import { useImageUpload, ACCEPT, MAX_SIZE_MB } from "../hooks/useImageUpload";
 import { validatePostForm } from "../utils/validatePostForm";
 import { formatPhone } from "../utils/formatPhone";
 import { useYandexMap } from "../hooks/useYandexMap";
-import { isMobileDevice } from "../utils/isMobileDevice";
+import MapModal from "./MapModal";
+import ClearableField from "../components/ClearableField";
 
 /**
  * CreateUpdatePost — модальная форма создания и редактирования объявления.
@@ -38,7 +39,9 @@ export default function CreateUpdatePost({ onClose, onSuccess, initialData }) {
   );
 
   const [rulesModalOpen, setRulesModalOpen] = useState(false);
+  const [mapModalOpen, setMapModalOpen] = useState(false);
   const [errors, setErrors] = useState({});
+  const [step, setStep] = useState(1); // 1 — первая часть, 2 — вторая часть
 
   const {
     images: uploadedImages,
@@ -59,8 +62,8 @@ export default function CreateUpdatePost({ onClose, onSuccess, initialData }) {
       ? { latitude: initialData.latitude, longitude: initialData.longitude }
       : null;
 
-  const { mapRef, coords, address, addressRef } = useYandexMap(
-      true,
+  const { mapRef, coords, address, addressRef, loading: mapLoading } = useYandexMap(
+      mapModalOpen,
       initialCoords,
       isEdit ? (initialData.location || "") : ""
   );
@@ -155,6 +158,8 @@ export default function CreateUpdatePost({ onClose, onSuccess, initialData }) {
               </button>
             </div>
 
+            {step === 1 && (
+            <>
             {/* Тип: Потеря / Находка */}
             <div className="f-m-group">
               <label className="f-m-label">{t('post.typeLabel')}</label>
@@ -179,26 +184,30 @@ export default function CreateUpdatePost({ onClose, onSuccess, initialData }) {
             {/* Название */}
             <div className="f-m-group">
               <label className="f-m-label">{t('post.titleLabel')}</label>
-              <input
-                  className={`f-m-field${errors.title ? " err" : ""}`}
-                  type="text"
-                  placeholder={t('post.titlePlaceholder')}
-                  value={form.title}
-                  onChange={e => set("title", e.target.value)}
-              />
+              <ClearableField onClear={() => set("title", "")} visible={!!form.title}>
+                <input
+                    className={`f-m-field${errors.title ? " err" : ""}`}
+                    type="text"
+                    placeholder={t('post.titlePlaceholder')}
+                    value={form.title}
+                    onChange={e => set("title", e.target.value)}
+                />
+              </ClearableField>
               {errors.title && <p className="f-err-msg">{errors.title}</p>}
             </div>
 
             {/* Описание */}
             <div className="f-m-group">
               <label className="f-m-label">{t('post.descriptionLabel')}</label>
-              <textarea
-                  className={`f-m-field${errors.description ? " err" : ""}`}
-                  rows={3}
-                  placeholder={t('post.descriptionPlaceholder')}
-                  value={form.description}
-                  onChange={e => set("description", e.target.value)}
-              />
+              <ClearableField onClear={() => set("description", "")} visible={!!form.description}>
+                <textarea
+                    className={`f-m-field${errors.description ? " err" : ""}`}
+                    rows={3}
+                    placeholder={t('post.descriptionPlaceholder')}
+                    value={form.description}
+                    onChange={e => set("description", e.target.value)}
+                />
+              </ClearableField>
               {errors.description && <p className="f-err-msg">{errors.description}</p>}
             </div>
 
@@ -230,7 +239,6 @@ export default function CreateUpdatePost({ onClose, onSuccess, initialData }) {
                     type="file"
                     accept={ACCEPT}
                     multiple
-                    capture={isMobileDevice() ? "environment" : undefined}
                     onChange={handleFileChange}
                     className="f-img-input"
                     disabled={compressing}
@@ -246,55 +254,73 @@ export default function CreateUpdatePost({ onClose, onSuccess, initialData }) {
               <p className="f-hint">{t('post.photoHint', { maxSize: MAX_SIZE_MB })}</p>
             </div>
 
+            <button
+                className="f-m-submit"
+                type="button"
+                disabled={loading}
+                onClick={() => setStep(2)}
+            >
+              <div className="f-m-submit-row">{t('post.nextStep')}</div>
+            </button>
+            </>
+            )}
+
+            {step === 2 && (
+            <>
             {/* Категория */}
-            <div className="f-m-row">
-              <div className="f-m-group">
-                <label className="f-m-label">{t('post.categoryLabel')}</label>
-                <select
-                    className={`f-m-field${errors.category ? " err" : ""}`}
-                    value={form.category}
-                    onChange={e => set("category", e.target.value)}
-                >
-                  <option value="">{t('categories.select')}</option>
-                  {CATEGORY_KEYS.map(k => <option key={k} value={t(k)}>{t(k)}</option>)}
-                </select>
-                {errors.category && <p className="f-err-msg">{errors.category}</p>}
-              </div>
+            <div className="f-m-group">
+              <label className="f-m-label">{t('post.categoryLabel')}</label>
+              <select
+                  className={`f-m-field${errors.category ? " err" : ""}`}
+                  value={form.category}
+                  onChange={e => set("category", e.target.value)}
+              >
+                <option value="">{t('categories.select')}</option>
+                {CATEGORY_KEYS.map(k => <option key={k} value={t(k)}>{t(k)}</option>)}
+              </select>
+              {errors.category && <p className="f-err-msg">{errors.category}</p>}
             </div>
 
-            {/* Карта */}
+            {/* Место на карте */}
             <div className="f-m-group">
               <label className="f-m-label">{t('post.mapLabel')}</label>
-              <div className="f-map-frame">
-                <div ref={mapRef} className="f-map-inner" />
-              </div>
-
+              <button
+                  className="f-map-pick"
+                  type="button"
+                  onClick={() => setMapModalOpen(true)}
+              >
+                {form.address ? `📍 ${form.address}` : t('post.mapPickLabel')}
+              </button>
               {!coords && <p className="f-hint">{t('post.mapHint')}</p>}
               {errors.map && <p className="f-err-msg">{errors.map}</p>}
             </div>
 
             <div className="f-m-group">
               <label className="f-m-label">{t('post.addressLabel')}</label>
-              <input
-                  className={`f-m-field${errors.address ? " err" : ""}`}
-                  type="text"
-                  placeholder={t('post.addressPlaceholder')}
-                  value={form.address}
-                  onChange={e => set("address", e.target.value)}
-              />
+              <ClearableField onClear={() => set("address", "")} visible={!!form.address}>
+                <input
+                    className={`f-m-field${errors.address ? " err" : ""}`}
+                    type="text"
+                    placeholder={t('post.addressPlaceholder')}
+                    value={form.address}
+                    onChange={e => set("address", e.target.value)}
+                />
+              </ClearableField>
               {errors.address && <p className="f-err-msg">{errors.address}</p>}
             </div>
 
             {/* Телефон */}
             <div className="f-m-group">
               <label className="f-m-label">{t('post.phoneLabel')}</label>
-              <input
-                  className={`f-m-field${errors.phone ? " err" : ""}`}
-                  type="tel"
-                  placeholder={t('post.phonePlaceholder')}
-                  value={form.phone}
-                  onChange={e => set("phone", formatPhone(e.target.value))}
-              />
+              <ClearableField onClear={() => set("phone", "")} visible={!!form.phone}>
+                <input
+                    className={`f-m-field${errors.phone ? " err" : ""}`}
+                    type="tel"
+                    placeholder={t('post.phonePlaceholder')}
+                    value={form.phone}
+                    onChange={e => set("phone", formatPhone(e.target.value))}
+                />
+              </ClearableField>
               {errors.phone && <p className="f-err-msg">{errors.phone}</p>}
             </div>
 
@@ -343,12 +369,18 @@ export default function CreateUpdatePost({ onClose, onSuccess, initialData }) {
 
             {apiError && <p className="f-err-msg">{apiError}</p>}
 
+            <button className="f-m-back" type="button" onClick={() => setStep(1)} disabled={loading}>
+              {t('post.backStep')}
+            </button>
+
             <button className="f-m-submit" type="button" onClick={handleSubmit} disabled={loading}>
               <div className="f-m-submit-row">
                 {loading && <div className="f-m-spinner" />}
                 {isEdit ? t('post.saveChanges') : t('post.publish')}
               </div>
             </button>
+            </>
+            )}
 
           </div>
         </div>
@@ -357,6 +389,16 @@ export default function CreateUpdatePost({ onClose, onSuccess, initialData }) {
             <RulesModal onClose={() => setRulesModalOpen(false)} />
         )}
 
+        {mapModalOpen && (
+            <MapModal
+                mapRef={mapRef}
+                address={address}
+                mapLoading={mapLoading}
+                onClose={() => setMapModalOpen(false)}
+                onSave={() => setMapModalOpen(false)}
+            />
+        )}
+
         {resultModal && (
             <div
                 className="f-modal-bg"