merged

package-lock.json

@@ -1,12 +1,13 @@
 {
   "name": "utopia-ui",
-  "version": "3.0.0-alpha.253",
+
+  "version": "3.0.0-alpha.257",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "utopia-ui",
-      "version": "3.0.0-alpha.253",
+      "version": "3.0.0-alpha.257",
       "license": "MIT",
       "dependencies": {
         "@heroicons/react": "^2.0.17",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "utopia-ui",
-  "version": "3.0.0-alpha.253",
+  "version": "3.0.0-alpha.257",
   "description": "Reuseable React Components to build mapping apps for real life communities and networks",
   "repository": "https://github.com/utopia-os/utopia-ui",
   "homepage:": "https://utopia-os.org/",

src/Components/Input/TextAreaInput.tsx

@@ -1,9 +1,8 @@
-import * as React from "react"
+import * as React from "react";
-import { useEffect, useRef } from "react";
+import { useEffect, useRef, useState } from "react";
 import Tribute from "tributejs";
 import { useTags } from "../Map/hooks/useTags";
 
-
 type TextAreaProps = {
     labelTitle?: string;
     labelStyle?: string;
@@ -19,21 +18,20 @@ interface KeyValue {
     [key: string]: string;
 }
 
-
 export function TextAreaInput({ labelTitle, dataField, labelStyle, containerStyle, inputStyle, defaultValue, placeholder, updateFormValue }: TextAreaProps) {
-
     const ref = useRef<HTMLTextAreaElement>(null);
+    const [inputValue, setInputValue] = useState<string>(defaultValue);
 
     // prevent react18 from calling useEffect twice
-    const init = useRef(false)
+    const init = useRef(false);
 
     const tags = useTags();
 
     let values: KeyValue[] = [];
 
-    tags.map(tag => {
+    tags.forEach(tag => {
-        values.push({ key: tag.name, value: tag.name, color: tag.color })
+        values.push({ key: tag.name, value: tag.name, color: tag.color });
-    })
+    });
 
     var tribute = new Tribute({
         containerClass: 'tw-z-3000 tw-bg-base-100 tw-p-2 tw-rounded-lg tw-shadow',
@@ -45,28 +43,47 @@ export function TextAreaInput({ labelTitle, dataField, labelStyle, containerStyl
             return ""
         },
         menuItemTemplate: function (item) {
-            return `<span style="color: ${item.original.color}; padding: 5px; boarder-radius: 3px;">#${item.string}</span>`;
+            return `<span style="color: ${item.original.color}; padding: 5px; border-radius: 3px;">#${item.string}</span>`;
         }
     });
 
-
     useEffect(() => {
         if (!init.current) {
             if (ref.current) {
                 tribute.attach(ref.current);
             }
             init.current = true;
-        }    
+        }
-    }, [ref])
+    }, [ref]);
+
+    useEffect(() => {
+        setInputValue(defaultValue);
+    }, [defaultValue]);
+
+    const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+        const newValue = e.target.value;
+        setInputValue(newValue);
+        if (updateFormValue) {
+            updateFormValue(newValue);
+        }
+    };
 
     return (
         <div className={`tw-form-control tw-w-full ${containerStyle ? containerStyle : ""}`}>
-            {labelTitle ? <label className="tw-label">
+            {labelTitle ? (
-                <span className={"tw-label-text tw-text-base-content " + labelStyle}>{labelTitle}</span>
+                <label className="tw-label">
-            </label> : ""}
+                    <span className={`tw-label-text tw-text-base-content ${labelStyle}`}>{labelTitle}</span>
-            <textarea required ref={ref} defaultValue={defaultValue} name={dataField} className={`tw-textarea tw-textarea-bordered tw-w-full  tw-leading-5 ${inputStyle ? inputStyle : ""}`} placeholder={placeholder || ""} onChange={(e) => updateFormValue && updateFormValue(e.target.value)}></textarea>
+                </label>
+            ) : null}
+            <textarea
+                required
+                ref={ref}
+                value={inputValue}
+                name={dataField}
+                className={`tw-textarea tw-textarea-bordered tw-w-full tw-leading-5 ${inputStyle || ""}`}
+                placeholder={placeholder || ""}
+                onChange={handleChange}
+            ></textarea>
         </div>
-    )
+    );
 }
-
-

src/Components/Map/Subcomponents/Controls/SearchControl.tsx

@@ -167,7 +167,7 @@ export const SearchControl = () => {
                         ))}
                         {isGeoCoordinate(value) &&
                             <div className='tw-flex tw-flex-row hover:tw-font-bold tw-cursor-pointer' onClick={() => {
-                                L.marker(new LatLng(extractCoordinates(value)![0], extractCoordinates(value)![1]), { icon: MarkerIconFactory("circle", "#777", "RGBA(35, 31, 32, 0.2)", "circle-solid") }).addTo(map).bindPopup(`<h3 class="tw-text-base tw-font-bold">${extractCoordinates(value)![0]}, ${extractCoordinates(value)![1]}</h3>`).openPopup().addEventListener("popupclose", (e) => { console.log(e.target.remove()) });
+                                L.marker(new LatLng(extractCoordinates(value)![0], extractCoordinates(value)![1]), { icon: MarkerIconFactory("circle", "#777", "RGBA(35, 31, 32, 0.2)", "point") }).addTo(map).bindPopup(`<h3 class="tw-text-base tw-font-bold">${extractCoordinates(value)![0]}, ${extractCoordinates(value)![1]}</h3>`).openPopup().addEventListener("popupclose", (e) => { console.log(e.target.remove()) });
                                 map.setView(new LatLng(extractCoordinates(value)![0], extractCoordinates(value)![1]), 15, { duration: 1 })
                             }}>
                                 <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="tw-text-current tw-mr-2 tw-mt-0 tw-w-4">

src/Components/Map/Subcomponents/SelectPosition.tsx

@@ -0,0 +1,16 @@
+
+export const SelectPosition = ({  setSelectNewItemPosition }: { setSelectNewItemPosition }) => {
+    return (
+        <div className="tw-animate-pulseGrow tw-button tw-z-1000 tw-absolute tw-right-5 tw-top-4 tw-drop-shadow-md">
+            <label className="tw-btn tw-btn-sm tw-rounded-2xl tw-btn-circle tw-btn-ghost hover:tw-bg-transparent tw-absolute tw-right-0 tw-top-0 tw-text-gray-600" onClick={() => {
+                setSelectNewItemPosition(null)
+            }}>
+                <p className='tw-text-center '>✕</p></label>
+            <div className="tw-alert tw-bg-base-100 tw-text-base-content">
+                <div>
+                    <span className="tw-text-lg">Select position on the map!</span>
+                </div>
+            </div>
+        </div>
+    )
+}

src/Components/Map/UtopiaMap.tsx

@@ -13,14 +13,15 @@ import { SearchControl } from "./Subcomponents/Controls/SearchControl";
 import { Control } from "./Subcomponents/Controls/Control";
 import { Outlet, useLocation, useNavigate } from "react-router-dom";
 import { TagsControl } from "./Subcomponents/Controls/TagsControl";
-import { useSelectPosition, useSetMapClicked,useSetSelectPosition } from "./hooks/useSelectPosition";
+import { useSelectPosition, useSetMapClicked, useSetSelectPosition } from "./hooks/useSelectPosition";
 import { useClusterRef, useSetClusterRef } from "./hooks/useClusterRef";
 import { Feature, Geometry as GeoJSONGeometry } from 'geojson';
-import {FilterControl} from "./Subcomponents/Controls/FilterControl";
+import { FilterControl } from "./Subcomponents/Controls/FilterControl";
-import {LayerControl} from "./Subcomponents/Controls/LayerControl";
+import { LayerControl } from "./Subcomponents/Controls/LayerControl";
 import { useLayers } from "./hooks/useLayers";
 import { useAddVisibleLayer } from "./hooks/useFilter";
 import { GratitudeControl } from "./Subcomponents/Controls/GratitudeControl";
+import { SelectPosition } from "./Subcomponents/SelectPosition";
 
 // for refreshing map on resize (needs to be implemented)
 const mapDivRef = React.createRef();
@@ -32,9 +33,9 @@ function UtopiaMap({
     zoom = 10,
     children,
     geo,
-    showFilterControl=false,
+    showFilterControl = false,
     showLayerControl = true
- }
+}
     : UtopiaMapProps) {
 
     function MapEventListener() {
@@ -52,7 +53,9 @@ function UtopiaMap({
 
     const resetMetaTags = () => {
         let params = new URLSearchParams(window.location.search);
-        window.history.pushState({}, "", `/` + `${params.toString() !== "" ? `?${params}` : ""}`)
+        if (!location.pathname.includes("/item/")) {
+            window.history.pushState({}, "", `/` + `${params.toString() !== "" ? `?${params}` : ""}`)
+        }
         document.title = document.title.split("-")[0];
         document.querySelector('meta[property="og:title"]')?.setAttribute("content", document.title);
         document.querySelector('meta[property="og:description"]')?.setAttribute("content", `${document.querySelector('meta[name="description"]')?.getAttribute("content")}`);
@@ -75,9 +78,9 @@ function UtopiaMap({
 
     useEffect(() => {
         layers.map(l => addVisibleLayer(l))
-        
+
     }, [layers])
-    
+
 
 
 
@@ -100,7 +103,7 @@ function UtopiaMap({
                         {/*{!embedded && (*/}
                         {/*    <QuestControl></QuestControl>*/}
                         {/*)}*/}
-                        {showFilterControl && <FilterControl/>}
+                        {showFilterControl && <FilterControl />}
                         {/*todo: needed layer handling is located LayerControl*/}
                         {showLayerControl && <LayerControl></LayerControl>}
                         {<GratitudeControl/>}
@@ -125,19 +128,9 @@ function UtopiaMap({
                     }} />}
                     <MapEventListener />
                 </MapContainer>
-                    <AddButton triggerAction={setSelectNewItemPosition}></AddButton>
+                <AddButton triggerAction={setSelectNewItemPosition}></AddButton>
                 {selectNewItemPosition != null &&
-                    <div className="tw-button tw-z-1000 tw-absolute tw-right-5 tw-top-4 tw-drop-shadow-md">
+                    <SelectPosition setSelectNewItemPosition={setSelectNewItemPosition} />
-                        <label className="tw-btn tw-btn-sm tw-rounded-2xl tw-btn-circle tw-btn-ghost hover:tw-bg-transparent tw-absolute tw-right-0 tw-top-0 tw-text-gray-600" onClick={() => {
-                            setSelectNewItemPosition(null)
-                        }}>
-                            <p className='tw-text-center '>✕</p></label>
-                        <div className="tw-alert tw-bg-base-100 tw-text-base-content">
-                            <div>
-                                <span>Select {selectNewItemPosition.name} position!</span>
-                            </div>
-                        </div>
-                    </div>
                 }
             </div>
 

src/Components/Map/hooks/useSelectPosition.tsx

@@ -36,7 +36,7 @@ function useSelectPositionManager(): {
 
 
     useEffect(() => {
-        if (selectPosition && markerClicked && 'text' in selectPosition) {
+        if (selectPosition && markerClicked && 'text' in selectPosition && markerClicked.id !==selectPosition.id) {
             itemUpdateParent({ ...selectPosition, parent: markerClicked.id })
         }
     }, [markerClicked])

src/Components/Profile/ProfileView.tsx

@@ -19,7 +19,7 @@ import { useTags } from '../Map/hooks/useTags';
 
 export function ProfileView({ userType, attestationApi }: { userType: string , attestationApi?: ItemsApi<any>}) {
 
-    const [item, setItem] = useState<Item>({} as Item)
+    const [item, setItem] = useState<Item>()
     const [updatePermission, setUpdatePermission] = useState<boolean>(false);
     const [relations, setRelations] = useState<Array<Item>>([]);
     const [offers, setOffers] = useState<Array<Tag>>([]);
@@ -68,15 +68,15 @@ export function ProfileView({ userType, attestationApi }: { userType: string , a
         setNeeds([]);
         setRelations([]);
 
-        item.layer?.itemOffersField && getValue(item, item.layer.itemOffersField)?.map(o => {
+        item?.layer?.itemOffersField && getValue(item, item.layer.itemOffersField)?.map(o => {
             const tag = tags.find(t => t.id === o.tags_id);
             tag && setOffers(current => [...current, tag])
         })
-        item.layer?.itemNeedsField && getValue(item, item.layer.itemNeedsField)?.map(n => {
+        item?.layer?.itemNeedsField && getValue(item, item.layer.itemNeedsField)?.map(n => {
             const tag = tags.find(t => t.id === n.tags_id);
             tag && setNeeds(current => [...current, tag])
         })
-        item.relations?.map(r => {
+        item?.relations?.map(r => {
             const item = items.find(i => i.id == r.related_items_id)
             item && setRelations(current => [...current, item])
         })
@@ -133,7 +133,7 @@ export function ProfileView({ userType, attestationApi }: { userType: string , a
     }, [selectPosition])
 
     useEffect(() => {
-        setTemplate(item.layer?.itemType.template || userType);
+        setTemplate(item?.layer?.itemType.template || userType);
     }, [userType, item])
 
     const [urlParams, setUrlParams] = useState(new URLSearchParams(location.search));
@@ -141,7 +141,7 @@ export function ProfileView({ userType, attestationApi }: { userType: string , a
 
     return (
         <>
-            {item &&
+            {item && 
                 <MapOverlayPage key={item.id} className={`!tw-p-0 tw-mx-4 tw-mt-4 tw-mb-4 md:tw-w-[calc(50%-32px)] tw-w-[calc(100%-32px)] tw-min-w-80 tw-max-w-3xl !tw-left-0 sm:!tw-left-auto tw-top-0 tw-bottom-0 tw-transition-opacity tw-duration-500 ${!selectPosition ? 'tw-opacity-100 tw-pointer-events-auto' : 'tw-opacity-0 tw-pointer-events-none'}`}>
                     <>
                         <div className={`tw-px-6 tw-pt-6`}>

src/Components/Profile/Subcomponents/AvatarWidget.tsx

@@ -1,14 +1,16 @@
 import * as React from "react";
-import { useState } from "react";
+import { useState, useCallback, useRef } from "react";
 import ReactCrop, { Crop, centerCrop, makeAspectCrop } from 'react-image-crop';
 import { useAssetApi } from '../../AppShell/hooks/useAssets';
+import 'react-image-crop/dist/ReactCrop.css';
 import DialogModal from "../../Templates/DialogModal";
-import 'react-image-crop/dist/ReactCrop.css'
-
-
-export const AvatarWidget = ({avatar, setAvatar}:{avatar:string, setAvatar : React.Dispatch<React.SetStateAction<any>>}) => {
 
+interface AvatarWidgetProps {
+    avatar: string;
+    setAvatar: React.Dispatch<React.SetStateAction<any>>;
+}
 
+export const AvatarWidget: React.FC<AvatarWidgetProps> = ({ avatar, setAvatar }) => {
     const [crop, setCrop] = useState<Crop>();
     const [image, setImage] = useState<string>("");
     const [cropModalOpen, setCropModalOpen] = useState<boolean>(false);
@@ -16,31 +18,38 @@ export const AvatarWidget = ({avatar, setAvatar}:{avatar:string, setAvatar : Rea
 
     const assetsApi = useAssetApi();
 
+    const imgRef = useRef<HTMLImageElement>(null);
 
+    const onImageChange = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
+        const file = event.target.files && event.target.files[0];
+        if (file) {
+            const validFormats = ["image/jpeg", "image/png"];
+            const maxSizeMB = 10;
+            const maxSizeBytes = maxSizeMB * 1024 * 1024;
 
-    const imgRef = React.useRef<HTMLImageElement>(null)
+            if (!validFormats.includes(file.type)) {
+                alert("Unsupported file format. Please upload a JPEG or PNG image.");
+                return;
+            }
 
-    const onImageChange = (event) => {
+            if (file.size > maxSizeBytes) {
-        if (event.target.files && event.target.files[0]) {
+                alert(`File size exceeds ${maxSizeMB}MB. Please upload a smaller image.`);
-            setImage(URL.createObjectURL(event.target.files[0]));
+                return;
+            }
+
+            setImage(URL.createObjectURL(file));
+            setCropModalOpen(true);
+        } else {
+            alert("No file selected or an error occurred while selecting the file.");
         }
-        setCropModalOpen(true);
+    }, []);
-    }
 
-    function onImageLoad(e: React.SyntheticEvent<HTMLImageElement>) {
+    const onImageLoad = useCallback((e: React.SyntheticEvent<HTMLImageElement>) => {
-        const { width, height } = e.currentTarget
+        const { width, height } = e.currentTarget;
+        setCrop(centerAspectCrop(width, height, 1));
+    }, []);
 
-        setCrop(centerAspectCrop(width, height, 1))
+    const centerAspectCrop = (mediaWidth: number, mediaHeight: number, aspect: number) => {
-    }
-
-
-    // This is to demonstate how to make and center a % aspect crop
-    // which is a bit trickier so we use some helper functions.
-    function centerAspectCrop(
-        mediaWidth: number,
-        mediaHeight: number,
-        aspect: number,
-    ) {
         return centerCrop(
             makeAspectCrop(
                 {
@@ -53,22 +62,50 @@ export const AvatarWidget = ({avatar, setAvatar}:{avatar:string, setAvatar : Rea
             ),
             mediaWidth,
             mediaHeight,
-        )
+        );
+    };
+
+    async function resizeImage(image: HTMLImageElement, maxWidth: number, maxHeight: number): Promise<HTMLImageElement> {
+        const canvas = document.createElement('canvas');
+        const ctx = canvas.getContext('2d');
+
+        let width = image.width;
+        let height = image.height;
+
+        if (width > maxWidth) {
+            height *= maxWidth / width;
+            width = maxWidth;
+        }
+        if (height > maxHeight) {
+            width *= maxHeight / height;
+            height = maxHeight;
+        }
+
+        canvas.width = width;
+        canvas.height = height;
+
+        if (ctx) {
+            ctx.drawImage(image, 0, 0, width, height);
+        }
+
+        const resizedImage = new Image();
+        resizedImage.src = canvas.toDataURL();
+
+        await resizedImage.decode();
+        return resizedImage;
     }
 
-    async function renderCrop() {
+    const renderCrop = useCallback(async () => {
-        // get the image element
         const image = imgRef.current;
         if (crop && image) {
+            const resizedImage = await resizeImage(image, 1024, 1024); // Bildgröße vor dem Zuschneiden reduzieren
+            const scaleX = resizedImage.naturalWidth / resizedImage.width;
+            const scaleY = resizedImage.naturalHeight / resizedImage.height;
 
-            const scaleX = image.naturalWidth / image.width
-            const scaleY = image.naturalHeight / image.height
-
-            // create a canvas element to draw the cropped image
             const canvas = new OffscreenCanvas(
                 crop.width * scaleX,
-                crop.height * scaleY,
+                crop.height * scaleY
-            )
+            );
             const ctx = canvas.getContext("2d");
             const pixelRatio = window.devicePixelRatio;
             canvas.width = crop.width * pixelRatio * scaleX;
@@ -76,9 +113,8 @@ export const AvatarWidget = ({avatar, setAvatar}:{avatar:string, setAvatar : Rea
 
             if (ctx) {
                 ctx.setTransform(pixelRatio, 0, 0, pixelRatio, 0, 0);
-
                 ctx.drawImage(
-                    image,
+                    resizedImage,
                     crop.x * scaleX,
                     crop.y * scaleY,
                     crop.width * scaleX,
@@ -89,28 +125,27 @@ export const AvatarWidget = ({avatar, setAvatar}:{avatar:string, setAvatar : Rea
                     crop.height * scaleY
                 );
             }
+
             const blob = await canvas.convertToBlob();
             await resizeBlob(blob);
             setCropping(false);
             setImage("");
         }
-    }
+    }, [crop]);
 
-    async function resizeBlob(blob) {
+    const resizeBlob = useCallback(async (blob: Blob) => {
-        var img = new Image();
+        const img = new Image();
         img.src = URL.createObjectURL(blob);
         await img.decode();
-        const canvas = new OffscreenCanvas(
-            400,
-            400
-        )
-        var ctx = canvas.getContext("2d");
-        ctx?.drawImage(img, 0, 0, 400, 400);
-        const resizedBlob = await canvas.convertToBlob()
-        const asset = await assetsApi.upload(resizedBlob, "test");
-        setAvatar(asset.id)
-    }
 
+        const canvas = new OffscreenCanvas(400, 400);
+        const ctx = canvas.getContext("2d");
+        ctx?.drawImage(img, 0, 0, 400, 400);
+
+        const resizedBlob = await canvas.convertToBlob();
+        const asset = await assetsApi.upload(resizedBlob, "avatar");
+        setAvatar(asset.id);
+    }, [assetsApi, setAvatar]);
 
     return (
         <>
@@ -135,11 +170,9 @@ export const AvatarWidget = ({avatar, setAvatar}:{avatar:string, setAvatar : Rea
                         </div>
                     }
                 </label>
-
                 : <div className='tw-w-20 tw-flex tw-items-center tw-justify-center'>
                     <span className="tw-loading tw-loading-spinner"></span>
                 </div>
-
             }
             <DialogModal
                 title=""
@@ -159,5 +192,5 @@ export const AvatarWidget = ({avatar, setAvatar}:{avatar:string, setAvatar : Rea
                 }}>Select</button>
             </DialogModal>
         </>
-    )
+    );
-}
+};

src/Components/Profile/Templates/TabsForm.tsx

@@ -1,5 +1,5 @@
 import { useCallback, useEffect, useState } from "react"
-import { TextAreaInput, TextInput } from "../../Input"
+import { TextAreaInput } from "../../Input"
 import { PopupStartEndInput, TextView } from "../../Map"
 import { ActionButton } from "../Subcomponents/ActionsButton"
 import { LinkedItemsHeaderView } from "../Subcomponents/LinkedItemsHeaderView"
@@ -15,46 +15,50 @@ export const TabsForm = ({ item, state, setState, updatePermission, linkItem, un
 
     const updateActiveTab = useCallback((id: number) => {
         setActiveTab(id);
-    
+
         let params = new URLSearchParams(window.location.search);
 
         params.set("tab", `${id}`);
         const newUrl = location.pathname + "?" + params.toString();
         window.history.pushState({}, '', newUrl);
         setUrlParams(params);
-      }, [location.pathname]);
+    }, [location.pathname]);
-        
+
-      useEffect(() => {
+    useEffect(() => {
         let params = new URLSearchParams(location.search);
         let urlTab = params.get("tab");
         setActiveTab(urlTab ? Number(urlTab) : 1);
-      }, [location.search]);
+    }, [location.search]);
 
     return (
         <div role="tablist" className="tw-tabs tw-tabs-lifted tw-mt-3">
             <input type="radio" name="my_tabs_2" role="tab" className={`tw-tab  [--tab-border-color:var(--fallback-bc,oklch(var(--bc)/0.2))]`} aria-label="Info" checked={activeTab == 1 && true} onChange={() => updateActiveTab(1)} />
             <div role="tabpanel" className="tw-tab-content tw-bg-base-100 tw-border-[var(--fallback-bc,oklch(var(--bc)/0.2))] tw-rounded-box tw-h-[calc(100dvh-332px)] tw-min-h-56 tw-border-none">
                 <div className={`tw-flex tw-flex-col tw-h-full ${item.layer.itemType.show_start_end_input && "tw-pt-4"}`}>
-                {item.layer.itemType.show_start_end_input &&
+                    {item.layer.itemType.show_start_end_input &&
-                <PopupStartEndInput
+                        <PopupStartEndInput
-                item={item}
+                            item={item}
-                showLabels={false}
+                            showLabels={false}
-                updateEndValue={(e) => setState(prevState => ({
+                            updateEndValue={(e) => setState(prevState => ({
-                    ...prevState,
+                                ...prevState,
-                    end: e
+                                end: e
-                }))}
+                            }))}
-                updateStartValue={(s) => setState(prevState => ({
+                            updateStartValue={(s) => setState(prevState => ({
-                    ...prevState,
+                                ...prevState,
-                    start: s
+                                start: s
-                }))}></PopupStartEndInput>
+                            }))}></PopupStartEndInput>
-                }
+                    }
 
-                    <TextAreaInput placeholder="about ..." defaultValue={item?.text ? item.text : ""} updateFormValue={(v) => setState(prevState => ({
+                    <TextAreaInput placeholder="about ..."
-                        ...prevState,
+                        defaultValue={item?.text ? item.text : ""}
-                        text: v
+                        updateFormValue={(v) => setState(prevState => ({
-                    }))} containerStyle='tw-grow' inputStyle={`tw-h-full  ${!item.layer.itemType.show_start_end_input && "tw-border-t-0 tw-rounded-tl-none"}`} />
+                            ...prevState,
+                            text: v
+                        }))}
+                        containerStyle='tw-grow'
+                        inputStyle={`tw-h-full  ${!item.layer.itemType.show_start_end_input && "tw-border-t-0 tw-rounded-tl-none"}`} />
                     <div>
-                    <TextAreaInput
+                        <TextAreaInput
                             placeholder="contact info ..."
                             defaultValue={state.contact || ""}
                             updateFormValue={(c) => setState(prevState => ({

src/Components/Profile/itemFunctions.ts

@@ -125,18 +125,18 @@ export const onUpdateItem = async (state, item, tags, addTag, setLoading, naviga
     changedItem = {
         id: state.id,
         name: state.name,
-        ...state.subname && {subname: state.subname},
+        subname: state.subname,
-        ...state.text && {text: state.text},
+        text: state.text,
         ...state.color && {color: state.color},
         position: item.position,
         ...state.groupType && {group_type: state.groupType},
         ...state.status && {status: state.status},
-        ...state.contact && {contact: state.contact},
+        contact: state.contact,
-        ...state.telephone && {telephone: state.telephone},
+        telephone: state.telephone,
         ...state.end && {end: state.end},
         ...state.start && {start: state.start},
         ...state.markerIcon && { markerIcon: state.markerIcon },
-        ...state.nextAppointment && {next_appointment: state.nextAppointment},
+        next_appointment: state.nextAppointment,
         ...state.image.length > 10 && { image: state.image },
         ...state.offers.length > 0 && { offers: offer_updates },
         ...state.needs.length > 0 && { needs: needs_updates }

tailwind.config.js

@@ -56,6 +56,16 @@ module.exports = {
         'map': "1.4em"
       }
     },
+    keyframes: {
+      pulseGrow: {
+        '0%, 100%': { transform: 'scale(1.00)' },
+        '80%': { transform: 'scale(1.00)' },
+        '90%': { transform: 'scale(0.95)' },
+      },
+    },
+    animation: {
+      pulseGrow: 'pulseGrow 2s ease-in-out infinite',
+    },
   },
   plugins: [
     require("daisyui"),