placeholders and reload on user changed

lib/src/Components/Item/PopupView.tsx

@@ -173,7 +173,8 @@ export const PopupView = ({ children }: { children?: React.ReactNode }) => {
           </ItemViewPopup>
 
           <Tooltip offset={[0, -38]} direction='top'>
-            {item.name}
+            {item.name ||
+              (item.layer?.name.endsWith('s') ? item.layer.name.slice(0, -1) : item.layer?.name)}
           </Tooltip>
         </Marker>
       </TemplateItemContext.Provider>

lib/src/Components/Map/Subcomponents/ItemPopupComponents/HeaderView.tsx

@@ -60,7 +60,9 @@ export function HeaderView({
   const avatar =
     (item?.image && appState.assetsApi.url + item.image + '?width=160&heigth=160') ||
     item?.image_external
-  const title = item?.name
+  const title =
+    item?.name ??
+    (item?.layer?.name.endsWith('s') ? item.layer?.name.slice(0, -1) : item?.layer?.name)
   const subtitle = item?.subname
 
   const [address] = useState<string>('')

lib/src/Components/Map/hooks/useItems.tsx

@@ -5,9 +5,11 @@
 /* eslint-disable @typescript-eslint/restrict-template-expressions */
 
 /* eslint-disable @typescript-eslint/no-misused-promises */
-import { useCallback, useReducer, createContext, useContext, useState } from 'react'
+import { useCallback, useReducer, createContext, useContext, useState, useEffect, useRef } from 'react'
 import { toast } from 'react-toastify'
 
+import { useAuth } from '#components/Auth/useAuth'
+
 import { useAddLayer } from './useLayers'
 
 import type { Item } from '#types/Item'
@@ -18,6 +20,7 @@ type ActionType =
   | { type: 'UPDATE'; item: Item }
   | { type: 'REMOVE'; item: Item }
   | { type: 'RESET'; layer: LayerProps }
+  | { type: 'CLEAR_ALL' }
 
 type UseItemManagerResult = ReturnType<typeof useItemsManager>
 
@@ -43,8 +46,10 @@ function useItemsManager(initialItems: Item[]): {
   allItemsLoaded: boolean
 } {
   const addLayer = useAddLayer()
+  const { user } = useAuth()
 
   const [allItemsLoaded, setallItemsLoaded] = useState<boolean>(false)
+  const layersRef = useRef<LayerProps[]>([])
 
   const [items, dispatch] = useReducer((state: Item[], action: ActionType) => {
     switch (action.type) {
@@ -65,6 +70,8 @@ function useItemsManager(initialItems: Item[]): {
         return state.filter((item) => item !== action.item)
       case 'RESET':
         return state.filter((item) => item.layer?.name !== action.layer.name)
+      case 'CLEAR_ALL':
+        return []
       default:
         throw new Error()
     }
@@ -72,6 +79,7 @@ function useItemsManager(initialItems: Item[]): {
 
   const setItemsApi = useCallback(async (layer: LayerProps) => {
     addLayer(layer)
+    layersRef.current.push(layer)
     const result = await toast.promise(layer.api!.getItems(), {
       pending: `loading ${layer.name} ...`,
       success: `${layer.name} loaded`,
@@ -127,6 +135,34 @@ function useItemsManager(initialItems: Item[]): {
     })
   }, [])
 
+  const reloadAllItems = useCallback(async () => {
+    dispatch({ type: 'CLEAR_ALL' })
+    setallItemsLoaded(false)
+
+    for (const layer of layersRef.current) {
+      if (layer.api) {
+        try {
+          const result = await layer.api.getItems()
+          result.map((item) => {
+            dispatch({ type: 'ADD', item: { ...item, layer } })
+            return null
+          })
+        } catch (error) {
+          console.error(`Failed to reload items for layer ${layer.name}:`, error)
+        }
+      }
+    }
+
+    setallItemsLoaded(true)
+  }, [])
+
+  useEffect(() => {
+    if (layersRef.current.length > 0) {
+      void reloadAllItems()
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [user?.id])
+
   return {
     items,
     updateItem,