Merge branch 'main' into invites-2

.github/dependabot.yml

@@ -0,0 +1,43 @@
+version: 2
+updates:
+  - package-ecosystem: "npm"
+    directory: "/"
+    schedule:
+      interval: "weekly"
+      day: "wednesday"
+      time: "03:00"
+      timezone: "Europe/Berlin"
+    open-pull-requests-limit: 99
+    groups:
+      react-ecosystem:
+        patterns:
+          - "react"
+          - "react-dom"
+          - "@types/react"
+          - "@types/react-dom"
+      typescript-eslint:
+        patterns:
+          - "@typescript-eslint/parser"
+          - "@typescript-eslint/eslint-plugin"
+      tiptap:
+        patterns:
+          - "@tiptap/core"
+          - "@tiptap/extension-*"
+          - "@tiptap/pm"
+          - "@tiptap/react"
+          - "@tiptap/starter-kit"
+    labels:
+      - "dependencies"
+      - "javascript"
+
+  - package-ecosystem: "github-actions"
+    directory: "/"
+    schedule:
+      interval: "weekly"
+      day: "wednesday"
+      time: "03:00"
+      timezone: "Europe/Berlin"
+    open-pull-requests-limit: 99
+    labels:
+      - "dependencies"
+      - "github_actions"

.github/workflows/test.e2e.yml

@@ -140,7 +140,7 @@ jobs:
 
       - name: Upload test artifacts on failure
         if: failure()
-        uses: actions/upload-artifact@2848b2cda0e5190984587ec6bb1f36730ca78d50 # v4.6.2
+        uses: actions/upload-artifact@330a01c490aca151604b8cf639adc76d48f6c5d4 # v4.6.2
         with:
           name: cypress-test-results-${{ github.run_id }}
           path: |
@@ -170,7 +170,7 @@ jobs:
         working-directory: ./cypress
 
       - name: Download test artifacts
-        uses: actions/download-artifact@4a24838f3d5601fd639834081e118c2995d51e1c # v5.0.0
+        uses: actions/download-artifact@f093f21ca4cfa7c75ccbbc2be54da76a0c7e1f05 # v5.0.0
         with:
           name: cypress-test-results-${{ github.run_id }}
           path: ./cypress
@@ -191,7 +191,7 @@ jobs:
           GITHUB_SHA: ${{ github.sha }}
 
       - name: Upload consolidated test report
-        uses: actions/upload-artifact@2848b2cda0e5190984587ec6bb1f36730ca78d50 # v4.6.2
+        uses: actions/upload-artifact@330a01c490aca151604b8cf639adc76d48f6c5d4 # v4.6.2
         with:
           name: e2e-test-report-${{ github.run_id }}
           path: cypress/results/html/
@@ -200,7 +200,7 @@ jobs:
 
       - name: Upload raw test data (for debugging)
         if: failure()
-        uses: actions/upload-artifact@2848b2cda0e5190984587ec6bb1f36730ca78d50 # v4.6.2
+        uses: actions/upload-artifact@330a01c490aca151604b8cf639adc76d48f6c5d4 # v4.6.2
         with:
           name: e2e-raw-data-${{ github.run_id }}
           path: |

.github/workflows/test.lint.pr.yml

@@ -32,6 +32,8 @@ jobs:
             backend
             app
             lib
+            deps
+            deps-dev
             docu
             docker
             release

README.md

@@ -23,8 +23,23 @@ Utopia Map is made for networks and initiatives  that aim to connect people in r
 
 Clone the repository and get started with the following commands:
 
+**Start docker**
 ```bash
-npm install
+docker compose up -d
+```
+**Initialize backend**
+
+```bash
+sudo chmod 777 -R  ./data/
+cd backend/
+./push.sh
+./seed.sh
+```
+After this the frontend is running on http://localhost:8080 and the backend on http://localhost:8055
+
+**Start dev server**
+```bash
+cd app/
 npm run dev
 ```
 

app/package.json

@@ -15,10 +15,9 @@
   "dependencies": {
     "@directus/sdk": "^17.0.2",
     "@heroicons/react": "^2.1.1",
-    "@tailwindcss/vite": "^4.0.15",
+    "@tailwindcss/vite": "^4.1.17",
     "@types/geojson": "^7946.0.10",
-    "axios": "^1.6.5",
+    "axios": "^1.13.2",
-    "date-fns": "^3.3.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-rnd": "^10.4.1",
@@ -28,32 +27,32 @@
   },
   "devDependencies": {
     "@eslint-community/eslint-plugin-eslint-comments": "^4.4.1",
-    "@types/node": "^22.15.28",
+    "@types/node": "^24.10.1",
     "@types/react": "^18.2.79",
     "@types/react-dom": "^18.2.25",
     "@typescript-eslint/eslint-plugin": "^5.62.0",
     "@typescript-eslint/parser": "^5.62.0",
     "@vitejs/plugin-react": "^4.0.0",
-    "daisyui": "^5.0.6",
+    "daisyui": "^5.5.5",
     "eslint": "^8.24.0",
-    "eslint-config-prettier": "^9.1.0",
+    "eslint-config-prettier": "^10.1.8",
     "eslint-config-standard": "^17.1.0",
-    "eslint-import-resolver-typescript": "^3.6.3",
+    "eslint-import-resolver-typescript": "^4.4.4",
     "eslint-plugin-import": "^2.31.0",
     "eslint-plugin-json": "^3.1.0",
-    "eslint-plugin-n": "^16.6.2",
+    "eslint-plugin-n": "^17.23.1",
     "eslint-plugin-no-catch-all": "^1.1.0",
     "eslint-plugin-prettier": "^5.2.1",
-    "eslint-plugin-promise": "^6.1.1",
+    "eslint-plugin-promise": "^7.2.1",
     "eslint-plugin-react": "^7.31.8",
-    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-hooks": "^7.0.1",
-    "eslint-plugin-react-refresh": "^0.4.18",
+    "eslint-plugin-react-refresh": "^0.4.24",
     "eslint-plugin-security": "^3.0.1",
     "eslint-plugin-yml": "^1.14.0",
     "postcss": "^8.4.30",
-    "tailwindcss": "^4.0.15",
+    "tailwindcss": "^4.1.17",
-    "typescript": "^5.0.2",
+    "typescript": "^5.9.3",
-    "vite": "^6.2.0",
+    "vite": "^7.2.2",
-    "vite-plugin-pwa": "^0.21.1"
+    "vite-plugin-pwa": "^1.1.0"
   }
 }

app/src/App.tsx

@@ -56,6 +56,7 @@ import MapContainer from './pages/MapContainer'
 import { getBottomRoutes, routes } from './routes/sidebar'
 import { config } from './config'
 import { InviteApi } from './api/inviteApi'
+import { MapPinIcon } from '@heroicons/react/24/solid'
 
 const userApi = new UserApi()
 const inviteApi = new InviteApi(userApi)
@@ -140,14 +141,19 @@ function App() {
           ?.filter((l: LayerProps) => l.listed)
           .map((l: LayerProps) => ({
             path: '/' + l.name, // url
-            icon: (
+            icon: l.markerIcon?.image ? (
               <SVG
                 src={`${config.apiUrl}assets/${l.markerIcon.image_outline ?? l.markerIcon.image}`}
-                className='tw:w-6 tw:h-6'
+                style={{
+                  width: `${(l.markerIcon.size ?? 18) * 1.3}px`,
+                  height: `${(l.markerIcon.size ?? 18) * 1.3}px`,
+                }}
                 preProcessor={(code: string) =>
                   code.replace(/stroke=".*?"/g, 'stroke="currentColor"')
                 }
               />
+            ) : (
+              <MapPinIcon className='tw:w-6 tw:h-6' />
             ),
             name: l.name, // name that appear in Sidebar
             color: l.menuColor,

backend/directus-config/development/snapshot/fields/layers/markerIcon.json

@@ -16,7 +16,7 @@
       "template": "{{id}}"
     },
     "readonly": false,
-    "required": true,
+    "required": false,
     "sort": 2,
     "special": [
       "m2o"

backend/directus-config/development/snapshot/fields/layers/markerShape.json

@@ -37,7 +37,7 @@
     "name": "markerShape",
     "table": "layers",
     "data_type": "character varying",
-    "default_value": null,
+    "default_value": "circle",
     "max_length": 255,
     "numeric_precision": null,
     "numeric_scale": null,

backend/directus-config/development/snapshot/fields/maps/zoom_offset.json

@@ -28,7 +28,7 @@
     "name": "zoom_offset",
     "table": "maps",
     "data_type": "integer",
-    "default_value": -1,
+    "default_value": 0,
     "max_length": null,
     "numeric_precision": 32,
     "numeric_scale": 0,

backend/directus-config/development/snapshot/fields/marker_icons/image_outline.json

@@ -1,47 +0,0 @@
-{
-  "collection": "marker_icons",
-  "field": "image_outline",
-  "type": "uuid",
-  "meta": {
-    "collection": "marker_icons",
-    "conditions": null,
-    "display": null,
-    "display_options": null,
-    "field": "image_outline",
-    "group": null,
-    "hidden": false,
-    "interface": "file-image",
-    "note": null,
-    "options": {
-      "folder": "f255d3a7-8ecc-4ee0-b584-dee753317415"
-    },
-    "readonly": false,
-    "required": false,
-    "sort": 4,
-    "special": [
-      "file"
-    ],
-    "translations": null,
-    "validation": null,
-    "validation_message": null,
-    "width": "half"
-  },
-  "schema": {
-    "name": "image_outline",
-    "table": "marker_icons",
-    "data_type": "uuid",
-    "default_value": null,
-    "max_length": null,
-    "numeric_precision": null,
-    "numeric_scale": null,
-    "is_nullable": true,
-    "is_unique": false,
-    "is_indexed": false,
-    "is_primary_key": false,
-    "is_generated": false,
-    "generation_expression": null,
-    "has_auto_increment": false,
-    "foreign_key_table": "directus_files",
-    "foreign_key_column": "id"
-  }
-}

backend/directus-config/development/snapshot/fields/marker_icons/size_outline.json

@@ -1,43 +0,0 @@
-{
-  "collection": "marker_icons",
-  "field": "size_outline",
-  "type": "decimal",
-  "meta": {
-    "collection": "marker_icons",
-    "conditions": null,
-    "display": null,
-    "display_options": null,
-    "field": "size_outline",
-    "group": null,
-    "hidden": false,
-    "interface": "input",
-    "note": null,
-    "options": null,
-    "readonly": false,
-    "required": false,
-    "sort": 5,
-    "special": null,
-    "translations": null,
-    "validation": null,
-    "validation_message": null,
-    "width": "half"
-  },
-  "schema": {
-    "name": "size_outline",
-    "table": "marker_icons",
-    "data_type": "numeric",
-    "default_value": null,
-    "max_length": null,
-    "numeric_precision": 10,
-    "numeric_scale": 5,
-    "is_nullable": true,
-    "is_unique": false,
-    "is_indexed": false,
-    "is_primary_key": false,
-    "is_generated": false,
-    "generation_expression": null,
-    "has_auto_increment": false,
-    "foreign_key_table": null,
-    "foreign_key_column": null
-  }
-}

backend/directus-config/development/snapshot/relations/marker_icons/image_outline.json

@@ -1,25 +0,0 @@
-{
-  "collection": "marker_icons",
-  "field": "image_outline",
-  "related_collection": "directus_files",
-  "meta": {
-    "junction_field": null,
-    "many_collection": "marker_icons",
-    "many_field": "image_outline",
-    "one_allowed_collections": null,
-    "one_collection": "directus_files",
-    "one_collection_field": null,
-    "one_deselect_action": "nullify",
-    "one_field": null,
-    "sort_field": null
-  },
-  "schema": {
-    "table": "marker_icons",
-    "column": "image_outline",
-    "foreign_key_table": "directus_files",
-    "foreign_key_column": "id",
-    "constraint_name": "marker_icons_image_outline_foreign",
-    "on_update": "NO ACTION",
-    "on_delete": "SET NULL"
-  }
-}

cypress/package.json

@@ -24,14 +24,14 @@
     "@eslint/js": "^9.36.0",
     "@types/mochawesome": "^6.2.4",
     "@types/node": "^24.5.2",
-    "cypress": "^15.3.0",
+    "cypress": "^15.6.0",
-    "cypress-split": "^1.24.23",
+    "cypress-split": "^1.24.25",
-    "eslint": "^9.36.0",
+    "eslint": "^9.39.1",
-    "eslint-plugin-cypress": "^5.1.1",
+    "eslint-plugin-cypress": "^5.2.0",
     "mochawesome": "^7.1.4",
     "mochawesome-merge": "^4.3.0",
-    "mochawesome-report-generator": "^6.2.0",
+    "mochawesome-report-generator": "^6.3.2",
-    "typescript": "^5.9.2",
+    "typescript": "^5.9.3",
-    "typescript-eslint": "^8.44.1"
+    "typescript-eslint": "^8.47.0"
   }
 }

lib/examples/2-static-layers/package-lock.json

@@ -28,31 +28,48 @@
       }
     },
     "../..": {
-      "version": "3.0.86",
+      "name": "utopia-ui",
+      "version": "3.0.111",
       "license": "GPL-3.0-only",
       "dependencies": {
         "@heroicons/react": "^2.0.17",
-        "@tanstack/react-query": "^5.17.8",
+        "@maplibre/maplibre-gl-leaflet": "^0.1.3",
+        "@tiptap/core": "^3.6.5",
+        "@tiptap/extension-bubble-menu": "^3.6.5",
+        "@tiptap/extension-color": "^3.6.5",
+        "@tiptap/extension-image": "^3.6.5",
+        "@tiptap/extension-link": "^3.6.5",
+        "@tiptap/extension-placeholder": "^3.6.5",
+        "@tiptap/extension-youtube": "^3.6.5",
+        "@tiptap/pm": "^3.6.5",
+        "@tiptap/react": "^3.6.5",
+        "@tiptap/starter-kit": "^3.6.5",
         "axios": "^1.6.5",
-        "date-fns": "^3.3.1",
+        "browser-image-compression": "^2.0.2",
+        "classnames": "^2.5.1",
         "leaflet": "^1.9.4",
         "leaflet.locatecontrol": "^0.79.0",
+        "maplibre-gl": "^5.9.0",
         "radash": "^12.1.0",
         "react-colorful": "^5.6.1",
-        "react-image-crop": "^10.1.8",
+        "react-dropzone": "^14.3.8",
+        "react-icons": "^5.5.0",
+        "react-image-crop": "^11.0.10",
         "react-inlinesvg": "^4.2.0",
         "react-leaflet": "^4.2.1",
         "react-leaflet-cluster": "^2.1.0",
         "react-markdown": "^9.0.1",
         "react-photo-album": "^3.0.2",
-        "react-router-dom": "^6.16.0",
+        "react-qr-code": "^2.0.16",
         "react-toastify": "^9.1.3",
         "remark-breaks": "^4.0.0",
+        "tiptap-markdown": "^0.9.0",
         "yet-another-react-lightbox": "^3.21.7"
       },
       "devDependencies": {
         "@eslint-community/eslint-plugin-eslint-comments": "^4.4.1",
         "@rollup/plugin-alias": "^5.1.1",
+        "@rollup/plugin-commonjs": "^28.0.3",
         "@rollup/plugin-node-resolve": "^16.0.0",
         "@rollup/plugin-typescript": "^12.1.2",
         "@tailwindcss/postcss": "^4.0.14",
@@ -67,8 +84,8 @@
         "@typescript-eslint/parser": "^5.62.0",
         "@vitejs/plugin-react": "^4.3.4",
         "@vitest/coverage-v8": "^3.0.5",
-        "cypress": "^14.0.3",
+        "cypress": "^15.6.0",
-        "daisyui": "^5.0.6",
+        "daisyui": "^5.2.3",
         "eslint": "^8.24.0",
         "eslint-config-prettier": "^9.1.0",
         "eslint-config-standard": "^17.1.0",
@@ -84,7 +101,7 @@
         "eslint-plugin-react-refresh": "^0.4.18",
         "eslint-plugin-security": "^3.0.1",
         "eslint-plugin-yml": "^1.14.0",
-        "happy-dom": "^16.8.1",
+        "happy-dom": "^20.0.0",
         "postcss": "^8.4.21",
         "prettier": "^3.3.3",
         "react": "^18.3.1",
@@ -102,9 +119,13 @@
         "vite-plugin-svgr": "^4.3.0",
         "vitest": "^3.0.5"
       },
+      "engines": {
+        "node": ">=22.20.0"
+      },
       "peerDependencies": {
         "react": "^18.2.0",
-        "react-dom": "^18.2.0"
+        "react-dom": "^18.2.0",
+        "react-router-dom": "^6.23.0"
       }
     },
     "node_modules/@ampproject/remapping": {
@@ -969,19 +990,32 @@
       }
     },
     "node_modules/@eslint/plugin-kit": {
-      "version": "0.3.1",
+      "version": "0.3.5",
-      "resolved": "https://registry.npmjs.org/@eslint/plugin-kit/-/plugin-kit-0.3.1.tgz",
+      "resolved": "https://registry.npmjs.org/@eslint/plugin-kit/-/plugin-kit-0.3.5.tgz",
-      "integrity": "sha512-0J+zgWxHN+xXONWIyPWKFMgVuJoZuGiIFu8yxk7RJjxkzpGmyja5wRFqZIVtjDVOQpV+Rw0iOAjYPE2eQyjr0w==",
+      "integrity": "sha512-Z5kJ+wU3oA7MMIqVR9tyZRtjYPr4OC004Q4Rw7pgOKUOKkJfZ3O24nz3WYfGRpMDNmcOi3TwQOmgm7B7Tpii0w==",
       "dev": true,
       "license": "Apache-2.0",
       "dependencies": {
-        "@eslint/core": "^0.14.0",
+        "@eslint/core": "^0.15.2",
         "levn": "^0.4.1"
       },
       "engines": {
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
       }
     },
+    "node_modules/@eslint/plugin-kit/node_modules/@eslint/core": {
+      "version": "0.15.2",
+      "resolved": "https://registry.npmjs.org/@eslint/core/-/core-0.15.2.tgz",
+      "integrity": "sha512-78Md3/Rrxh83gCxoUc0EiciuOHsIITzLy53m3d9UyiW8y9Dj2D29FeETqyKA+BRK76tnTp6RXWb3pCay8Oyomg==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@types/json-schema": "^7.0.15"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      }
+    },
     "node_modules/@humanfs/core": {
       "version": "0.19.1",
       "resolved": "https://registry.npmjs.org/@humanfs/core/-/core-0.19.1.tgz",
@@ -1662,9 +1696,9 @@
       }
     },
     "node_modules/@typescript-eslint/typescript-estree/node_modules/brace-expansion": {
-      "version": "2.0.1",
+      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.2.tgz",
-      "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+      "integrity": "sha512-Jt0vHyM+jmUBqojB7E1NIYadt0vI0Qxjxd2TErW94wDz+E2LAm5vKMXXwg6ZZBTHPuUlDgQHKXvjGBdfcF1ZDQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -1833,9 +1867,9 @@
       "license": "MIT"
     },
     "node_modules/brace-expansion": {
-      "version": "1.1.11",
+      "version": "1.1.12",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.12.tgz",
-      "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
+      "integrity": "sha512-9T9UjW3r0UW5c1Q7GTwllptXwhvYmEzFhzMfZ9H7FQWt+uZePjZPjBP/W1ZEyZ1twGWom5/56TF4lPcqjnDHcg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -2544,9 +2578,9 @@
       "license": "MIT"
     },
     "node_modules/js-yaml": {
-      "version": "4.1.0",
+      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
+      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.1.tgz",
-      "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==",
+      "integrity": "sha512-qQKT4zQxXl8lLwBtHMWwaTcGfFOZviOJet3Oy/xmGk2gZH677CJM9EvtfdSkgWcATZhj/55JZ0rmy3myCT5lsA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -3287,9 +3321,9 @@
       "link": true
     },
     "node_modules/vite": {
-      "version": "6.3.5",
+      "version": "6.4.1",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-6.3.5.tgz",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-6.4.1.tgz",
-      "integrity": "sha512-cZn6NDFE7wdTpINgs++ZJ4N49W2vRp8LCKrn3Ob1kYNtOo21vfDoaV5GzBfLU4MovSAB8uNRm4jgzVQZ+mBzPQ==",
+      "integrity": "sha512-+Oxm7q9hDoLMyJOYfUYBuHQo+dkAloi33apOPP56pzj+vsdJDzr+j1NISE5pyaAuKL4A3UD34qd0lx5+kfKp2g==",
       "dev": true,
       "license": "MIT",
       "dependencies": {

lib/package.json

@@ -44,15 +44,15 @@
   "license": "GPL-3.0-only",
   "devDependencies": {
     "@eslint-community/eslint-plugin-eslint-comments": "^4.4.1",
-    "@rollup/plugin-alias": "^5.1.1",
+    "@rollup/plugin-alias": "^6.0.0",
-    "@rollup/plugin-commonjs": "^28.0.3",
+    "@rollup/plugin-commonjs": "^29.0.0",
-    "@rollup/plugin-node-resolve": "^16.0.0",
+    "@rollup/plugin-node-resolve": "^16.0.3",
-    "@rollup/plugin-typescript": "^12.1.2",
+    "@rollup/plugin-typescript": "^12.3.0",
-    "@tailwindcss/postcss": "^4.0.14",
+    "@tailwindcss/postcss": "^4.1.17",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.2.0",
     "@types/geojson": "^7946.0.14",
-    "@types/leaflet": "^1.7.11",
+    "@types/leaflet": "^1.9.21",
     "@types/leaflet.markercluster": "^1.5.5",
     "@types/react": "^18.2.0",
     "@types/react-dom": "^18.0.5",
@@ -60,21 +60,21 @@
     "@typescript-eslint/parser": "^5.62.0",
     "@vitejs/plugin-react": "^4.3.4",
     "@vitest/coverage-v8": "^3.0.5",
-    "cypress": "^14.0.3",
+    "cypress": "^15.6.0",
-    "daisyui": "^5.2.3",
+    "daisyui": "^5.5.5",
     "eslint": "^8.24.0",
-    "eslint-config-prettier": "^9.1.0",
+    "eslint-config-prettier": "^10.1.8",
     "eslint-config-standard": "^17.1.0",
-    "eslint-import-resolver-typescript": "^3.6.3",
+    "eslint-import-resolver-typescript": "^4.4.4",
     "eslint-plugin-import": "^2.31.0",
     "eslint-plugin-json": "^3.1.0",
-    "eslint-plugin-n": "^16.6.2",
+    "eslint-plugin-n": "^17.23.1",
     "eslint-plugin-no-catch-all": "^1.1.0",
     "eslint-plugin-prettier": "^5.2.1",
-    "eslint-plugin-promise": "^6.1.1",
+    "eslint-plugin-promise": "^7.2.1",
     "eslint-plugin-react": "^7.31.8",
-    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-hooks": "^7.0.1",
-    "eslint-plugin-react-refresh": "^0.4.18",
+    "eslint-plugin-react-refresh": "^0.4.24",
     "eslint-plugin-security": "^3.0.1",
     "eslint-plugin-yml": "^1.14.0",
     "happy-dom": "^20.0.0",
@@ -82,16 +82,16 @@
     "prettier": "^3.3.3",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "rollup": "^4.34.6",
+    "rollup": "^4.53.3",
     "rollup-plugin-dts": "^6.1.1",
     "rollup-plugin-postcss": "^4.0.2",
     "rollup-plugin-svg": "^2.0.0",
-    "tailwindcss": "^4.0.14",
+    "tailwindcss": "^4.1.17",
     "typedoc": "^0.27.6",
     "typedoc-plugin-coverage": "^3.4.1",
     "typedoc-plugin-missing-exports": "^3.1.0",
-    "typescript": "^5.7.3",
+    "typescript": "^5.9.3",
-    "vite": "^6.0.11",
+    "vite": "^7.2.2",
     "vite-plugin-svgr": "^4.3.0",
     "vitest": "^3.0.5"
   },
@@ -103,21 +103,19 @@
   "dependencies": {
     "@heroicons/react": "^2.0.17",
     "@maplibre/maplibre-gl-leaflet": "^0.1.3",
-    "@tanstack/react-query": "^5.17.8",
+    "@tiptap/core": "^3.11.0",
-    "@tiptap/core": "^3.6.5",
+    "@tiptap/extension-bubble-menu": "^3.11.0",
-    "@tiptap/extension-bubble-menu": "^3.6.5",
+    "@tiptap/extension-color": "^3.11.0",
-    "@tiptap/extension-color": "^3.6.5",
+    "@tiptap/extension-image": "^3.11.0",
-    "@tiptap/extension-image": "^3.6.5",
+    "@tiptap/extension-link": "^3.11.0",
-    "@tiptap/extension-link": "^3.6.5",
+    "@tiptap/extension-placeholder": "^3.11.0",
-    "@tiptap/extension-placeholder": "^3.6.5",
+    "@tiptap/extension-youtube": "^3.11.0",
-    "@tiptap/extension-youtube": "^3.6.5",
     "@tiptap/pm": "^3.6.5",
-    "@tiptap/react": "^3.6.5",
+    "@tiptap/react": "^3.11.0",
-    "@tiptap/starter-kit": "^3.6.5",
+    "@tiptap/starter-kit": "^3.11.0",
-    "axios": "^1.6.5",
+    "axios": "^1.13.2",
     "browser-image-compression": "^2.0.2",
     "classnames": "^2.5.1",
-    "date-fns": "^3.3.1",
     "leaflet": "^1.9.4",
     "leaflet.locatecontrol": "^0.79.0",
     "maplibre-gl": "^5.9.0",
@@ -125,12 +123,12 @@
     "react-colorful": "^5.6.1",
     "react-dropzone": "^14.3.8",
     "react-icons": "^5.5.0",
-    "react-image-crop": "^10.1.8",
+    "react-image-crop": "^11.0.10",
     "react-inlinesvg": "^4.2.0",
     "react-leaflet": "^4.2.1",
-    "react-leaflet-cluster": "^2.1.0",
+    "react-leaflet-cluster": "^3.1.1",
     "react-markdown": "^9.0.1",
-    "react-photo-album": "^3.0.2",
+    "react-photo-album": "^3.2.1",
     "react-qr-code": "^2.0.16",
     "react-toastify": "^9.1.3",
     "remark-breaks": "^4.0.0",

lib/src/Components/AppShell/ContextWrapper.tsx

@@ -1,4 +1,3 @@
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { useContext, createContext } from 'react'
 import { BrowserRouter as Router, useInRouterContext } from 'react-router-dom'
 import { ToastContainer } from 'react-toastify'
@@ -54,8 +53,6 @@ export const ContextWrapper = ({ children }: { children: React.ReactNode }) => {
 
 // eslint-disable-next-line react/prop-types
 export const Wrappers = ({ children }) => {
-  const queryClient = new QueryClient()
-
   return (
     <PermissionsProvider initialPermissions={[]}>
       <TagsProvider initialTags={[]}>
@@ -64,7 +61,6 @@ export const Wrappers = ({ children }) => {
             <ItemsProvider initialItems={[]}>
               <SelectPositionProvider>
                 <LeafletRefsProvider initialLeafletRefs={{}}>
-                  <QueryClientProvider client={queryClient}>
                   <AppStateProvider>
                     <ClusterRefProvider>
                       <PopupFormProvider>
@@ -87,7 +83,6 @@ export const Wrappers = ({ children }) => {
                       </PopupFormProvider>
                     </ClusterRefProvider>
                   </AppStateProvider>
-                  </QueryClientProvider>
                 </LeafletRefsProvider>
               </SelectPositionProvider>
             </ItemsProvider>

lib/src/Components/AppShell/SideBar.tsx

@@ -64,7 +64,7 @@ export function SideBar({ routes, bottomRoutes }: { routes: Route[]; bottomRoute
                     }}
                   >
                     <div
-                      className='tw:p-1.5 tw:rounded-selector tw:text-white'
+                      className='tw:p-1.5 tw:rounded-selector tw:text-white tw:h-9 tw:w-9 tw:flex tw:items-center tw:justify-center'
                       style={{ backgroundColor: route.color ?? '#777' }}
                     >
                       {route.icon}

lib/src/Components/Input/RichTextEditor.tsx

@@ -44,7 +44,7 @@ export function RichTextEditor({
 
     const regex = /!\[.*?\]\(.*?\)/g
     newValue = newValue.replace(regex, (match: string) => match + '\n\n')
-    if (updateFormValue && newValue) {
+    if (updateFormValue) {
       updateFormValue(newValue)
     }
   }

lib/src/Components/Map/Layer.tsx

@@ -41,6 +41,9 @@ export const Layer = ({
   const setItemsApi = useSetItemsApi()
   const setItemsData = useSetItemsData()
 
+  // Ensure markerShape has a valid value, default to 'circle' if null or empty
+  const normalizedMarkerShape = markerShape || 'circle'
+
   const addTag = useAddTag()
   const [newTagsToAdd] = useState<Tag[]>([])
   const [tagsReady] = useState<boolean>(false)
@@ -55,7 +58,7 @@ export const Layer = ({
         menuText,
         menuColor,
         markerIcon,
-        markerShape,
+        markerShape: normalizedMarkerShape,
         markerDefaultColor,
         markerDefaultColor2,
         api,
@@ -79,7 +82,7 @@ export const Layer = ({
         menuText,
         menuColor,
         markerIcon,
-        markerShape,
+        markerShape: normalizedMarkerShape,
         markerDefaultColor,
         markerDefaultColor2,
         api,
@@ -116,7 +119,7 @@ export const Layer = ({
         name,
         markerDefaultColor,
         markerDefaultColor2,
-        markerShape,
+        markerShape: normalizedMarkerShape,
         markerIcon,
         menuText,
       }}

lib/src/Components/Map/Subcomponents/AddButton.tsx

@@ -1,5 +1,6 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 /* eslint-disable @typescript-eslint/no-non-null-assertion */
+import { MapPinIcon } from '@heroicons/react/24/solid'
 import { useState } from 'react'
 import SVG from 'react-inlinesvg'
 
@@ -94,13 +95,18 @@ export default function AddButton({
                             e.preventDefault()
                           }}
                         >
+                          {layer.markerIcon?.image ? (
                             <img
                               src={appState.assetsApi.url + layer.markerIcon.image}
                               style={{
                                 filter: 'invert(100%) brightness(200%)',
                                 width: `${(layer.markerIcon.size ?? 18) * 1.3}px`,
+                                height: `${(layer.markerIcon.size ?? 18) * 1.3}px`,
                               }}
                             />
+                          ) : (
+                            <MapPinIcon className='tw:w-6 tw:h-6' style={{ color: '#ffffff' }} />
+                          )}
                         </button>
                       </div>
                     </a>

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

@@ -11,7 +11,7 @@
 /* eslint-disable @typescript-eslint/no-unsafe-member-access */
 /* eslint-disable @typescript-eslint/no-unsafe-call */
 import FlagIcon from '@heroicons/react/24/outline/FlagIcon'
-import MagnifyingGlassIcon from '@heroicons/react/24/outline/MagnifyingGlassIcon'
+import MapPinIcon from '@heroicons/react/24/outline/MapPinIcon'
 import axios from 'axios'
 import { LatLng, LatLngBounds, marker } from 'leaflet'
 import { useRef, useState } from 'react'
@@ -167,14 +167,32 @@ export const SearchControl = () => {
               {itemsResults.length > 0 && tagsResults.length > 0 && (
                 <hr className='tw:opacity-50'></hr>
               )}
-              {itemsResults.slice(0, 5).map((item) => (
+              {itemsResults.slice(0, 5).map((item) => {
+                // Calculate color using the same logic as PopupView
+                const itemTags =
+                  item.text
+                    ?.match(/#[^\s#]+/g)
+                    ?.map((tag) =>
+                      tags.find((t) => t.name.toLowerCase() === tag.slice(1).toLowerCase()),
+                    )
+                    .filter(Boolean) ?? []
+
+                let color1 = item.layer?.markerDefaultColor ?? '#777'
+                if (item.color) {
+                  color1 = item.color
+                } else if (itemTags[0]) {
+                  color1 = itemTags[0].color
+                }
+
+                return (
                   <div
                     key={item.id}
-                  className='tw:cursor-pointer tw:hover:font-bold tw:flex tw:flex-row'
+                    className='tw:cursor-pointer tw:hover:font-bold tw:flex tw:flex-row tw:items-center tw:gap-2'
                     data-cy='search-item-result'
                     onClick={() => {
-                    const marker = Object.entries(leafletRefs).find((r) => r[1].item === item)?.[1]
+                      const marker = Object.entries(leafletRefs).find(
-                      .marker
+                        (r) => r[1].item === item,
+                      )?.[1].marker
                       if (marker) {
                         navigate(`/${item.id}?${new URLSearchParams(window.location.search)}`)
                       } else {
@@ -184,15 +202,19 @@ export const SearchControl = () => {
                       }
                     }}
                   >
-                  {item.layer?.markerIcon.image ? (
+                    {item.layer?.markerIcon?.image ? (
                       <div
-                      className='tw:w-7 tw:h-full tw:flex tw:justify-center tw:items-center'
+                        className='tw:p-1.5 tw:rounded-selector tw:text-white tw:h-7 tw:w-7 tw:flex tw:items-center tw:justify-center tw:flex-shrink-0 tw:overflow-hidden'
+                        style={{ backgroundColor: color1 }}
                         data-cy='search-item-icon'
                       >
                         <SVG
                           src={appState.assetsApi.url + item.layer.markerIcon.image}
-                        className='tw:text-current tw:mr-2 tw:mt-0'
+                          className='tw:text-current tw:max-w-full tw:max-h-full'
-                        style={{ width: `${(item.layer.markerIcon.size ?? 18) * 1.2}px` }}
+                          style={{
+                            width: `${item.layer.markerIcon.size ?? 18}px`,
+                            height: `${item.layer.markerIcon.size ?? 18}px`,
+                          }}
                           preProcessor={(code: string): string => {
                             code = code.replace(/fill=".*?"/g, 'fill="currentColor"')
                             code = code.replace(/stroke=".*?"/g, 'stroke="currentColor"')
@@ -201,22 +223,29 @@ export const SearchControl = () => {
                         />
                       </div>
                     ) : (
-                    <div className='tw:w-7' data-cy='search-item-icon-placeholder' />
+                      <div
+                        className='tw:w-7 tw:h-7 tw:flex-shrink-0'
+                        data-cy='search-item-icon-placeholder'
+                      />
                     )}
-                  <div>
+                    <div className='tw:flex tw:flex-col tw:min-w-0'>
-                    <div className='tw:text-sm tw:overflow-hidden tw:text-ellipsis tw:whitespace-nowrap tw:max-w-[17rem]'>
+                      <div className='tw:text-sm tw:font-bold tw:overflow-hidden tw:text-ellipsis tw:whitespace-nowrap'>
                         {item.name}
                       </div>
+                      <div className='tw:text-xs tw:overflow-hidden tw:text-ellipsis tw:whitespace-nowrap'>
+                        {item.text}
                       </div>
                     </div>
-              ))}
+                  </div>
+                )
+              })}
               {Array.from(geoResults).length > 0 &&
                 (itemsResults.length > 0 || tagsResults.length > 0) && (
                   <hr className='tw:opacity-50'></hr>
                 )}
               {Array.from(geoResults).map((geo) => (
                 <div
-                  className='tw:flex tw:flex-row tw:hover:font-bold tw:cursor-pointer'
+                  className='tw:flex tw:flex-row tw:items-center tw:hover:font-bold tw:cursor-pointer tw:gap-2'
                   data-cy='search-geo-result'
                   key={Math.random()}
                   onClick={() => {
@@ -249,19 +278,21 @@ export const SearchControl = () => {
                     hide()
                   }}
                 >
-                  <MagnifyingGlassIcon
+                  <div className='tw:h-7 tw:w-7 tw:flex tw:items-center tw:justify-center tw:flex-shrink-0'>
-                    className='tw:text-current tw:mr-2 tw:mt-0 tw:w-5'
+                    <MapPinIcon
+                      className='tw:text-current tw:w-5 tw:h-5'
                       data-cy='search-geo-icon'
                     />
-                  <div>
+                  </div>
+                  <div className='tw:flex tw:flex-col tw:min-w-0'>
                     <div
-                      className='tw:text-sm tw:overflow-hidden tw:text-ellipsis tw:whitespace-nowrap tw:max-w-[17rem]'
+                      className='tw:text-sm tw:font-bold tw:overflow-hidden tw:text-ellipsis tw:whitespace-nowrap'
                       data-cy='search-geo-name'
                     >
                       {geo?.properties.name ? geo?.properties.name : value}
                     </div>
                     <div
-                      className='tw:text-xs tw:overflow-hidden tw:text-ellipsis tw:whitespace-nowrap tw:max-w-[17rem]'
+                      className='tw:text-xs tw:overflow-hidden tw:text-ellipsis tw:whitespace-nowrap'
                       data-cy='search-geo-details'
                     >
                       {geo?.properties?.city && `${capitalizeFirstLetter(geo?.properties?.city)}, `}{' '}
@@ -281,7 +312,7 @@ export const SearchControl = () => {
               ))}
               {isGeoCoordinate(value) && (
                 <div
-                  className='tw:flex tw:flex-row tw:hover:font-bold tw:cursor-pointer'
+                  className='tw:flex tw:flex-row tw:items-center tw:hover:font-bold tw:cursor-pointer tw:gap-2'
                   data-cy='search-coordinate-result'
                   onClick={() => {
                     marker(
@@ -306,19 +337,21 @@ export const SearchControl = () => {
                     )
                   }}
                 >
+                  <div className='tw:h-7 tw:w-7 tw:flex tw:items-center tw:justify-center tw:flex-shrink-0'>
                     <FlagIcon
-                    className='tw:text-current tw:mr-2 tw:mt-0 tw:w-4'
+                      className='tw:text-current tw:w-5 tw:h-5'
                       data-cy='search-coordinate-icon'
                     />
-                  <div>
+                  </div>
+                  <div className='tw:flex tw:flex-col tw:min-w-0'>
                     <div
-                      className='tw:text-sm tw:overflow-hidden tw:text-ellipsis tw:whitespace-nowrap tw:max-w-[17rem]'
+                      className='tw:text-sm tw:font-bold tw:overflow-hidden tw:text-ellipsis tw:whitespace-nowrap'
                       data-cy='search-coordinate-text'
                     >
                       {value}
                     </div>
                     <div
-                      className='tw:text-xs tw:overflow-hidden tw:text-ellipsis tw:whitespace-nowrap tw:max-w-[17rem]'
+                      className='tw:text-xs tw:overflow-hidden tw:text-ellipsis tw:whitespace-nowrap'
                       data-cy='search-coordinate-label'
                     >
                       {'Coordiante'}

lib/src/Components/Map/Subcomponents/Controls/TagsControl.tsx

@@ -6,7 +6,7 @@ export const TagsControl = () => {
   const removeFilterTag = useRemoveFilterTag()
 
   return (
-    <div className='tw:flex tw:flex-wrap tw:mt-4 tw:w-[calc(100vw-2rem)] tw:max-w-xs'>
+    <div className='tw:flex tw:flex-wrap tw:mt-4 tw:w-[calc(100vw-2rem)] tw:max-w-xs tw:relative'>
       {filterTags.map((tag) => (
         <div
           key={tag.id}

lib/src/Components/Map/Subcomponents/ItemPopupComponents/HeaderView/hooks.ts

@@ -33,7 +33,8 @@ export const useNavigationUrl = (coordinates?: [number, number]) => {
 export const useShareLogic = (item?: Item) => {
   const shareUrl = window.location.href
   const shareTitle = item?.name ?? 'Utopia Map Item'
-  const inviteLink = item?.secrets
+  const inviteLink =
+    item?.secrets && item.secrets.length > 0
       ? `${window.location.origin}/invite/${item.secrets[0].secret}`
       : shareUrl
 

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

@@ -85,7 +85,9 @@ export function HeaderView({
         onConfirm={deleteCallback ?? (() => undefined)}
       />
 
+      {showQrButton && (
         <QRModal item={item} isOpen={qrModalOpen} onClose={() => setQrModalOpen(false)} />
+      )}
     </>
   )
 }

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

@@ -5,6 +5,7 @@
 /* eslint-disable @typescript-eslint/no-unsafe-member-access */
 /* eslint-disable @typescript-eslint/no-unsafe-call */
 import Markdown from 'react-markdown'
+import { Link as RouterLink } from 'react-router-dom'
 import remarkBreaks from 'remark-breaks'
 
 import { useAddFilterTag } from '#components/Map/hooks/useFilter'
@@ -46,7 +47,9 @@ export const TextView = ({
     innerText = replacedText = rawText
   } else if (text === undefined) {
     // Field was omitted by backend (no permission)
-    innerText = replacedText = `Login to see this ${item?.layer?.item_default_name ?? 'item'}`
+    innerText = replacedText = `[Login](/login) to see this ${
+      item?.layer?.item_default_name ?? 'item'
+    }`
   } else if (text === null || text === '') {
     // Field is not set or empty - show nothing
     innerText = ''
@@ -127,7 +130,12 @@ export const TextView = ({
       else return children
     }
 
-    // Default: Link
+    // Internal Link (React Router)
+    if (href.startsWith('/')) {
+      return <RouterLink to={href}>{children}</RouterLink>
+    }
+
+    // External Link
     return (
       <a href={href} target='_blank' rel='noreferrer'>
         {children}

lib/src/Components/Map/Subcomponents/ItemViewPopup.tsx

@@ -5,7 +5,6 @@
 /* eslint-disable @typescript-eslint/no-non-null-assertion */
 /* eslint-disable @typescript-eslint/no-non-null-asserted-optional-chain */
 /* eslint-disable @typescript-eslint/prefer-optional-chain */
-/* eslint-disable @typescript-eslint/restrict-template-expressions */
 /* eslint-disable @typescript-eslint/no-unsafe-member-access */
 import { LatLng } from 'leaflet'
 import { forwardRef, useState } from 'react'
@@ -17,6 +16,7 @@ import { useRemoveItem, useUpdateItem } from '#components/Map/hooks/useItems'
 import { usePopupForm } from '#components/Map/hooks/usePopupForm'
 import { useSetSelectPosition } from '#components/Map/hooks/useSelectPosition'
 import { timeAgo } from '#utils/TimeAgo'
+import { removeItemFromUrl } from '#utils/UrlHelper'
 
 import { HeaderView } from './ItemPopupComponents/HeaderView'
 import { TextView } from './ItemPopupComponents/TextView'
@@ -80,8 +80,7 @@ export const ItemViewPopup = forwardRef((props: ItemViewPopupProps, ref: any) =>
     }
     setLoading(false)
     map.closePopup()
-    const params = new URLSearchParams(window.location.search)
+    removeItemFromUrl()
-    window.history.pushState({}, '', '/' + `${params ? `?${params}` : ''}`)
     navigate('/')
   }
 

lib/src/Components/Map/UtopiaMap.tsx

@@ -140,6 +140,7 @@ function UtopiaMap({
           maplibreStyle={maplibreStyle}
           zoomOffset={zoomOffset}
           tileSize={tileSize}
+          showZoomControl={showZoomControl}
         >
           {children}
         </UtopiaMapInner>

lib/src/Components/Map/UtopiaMapInner.tsx

@@ -1,6 +1,5 @@
 /* eslint-disable @typescript-eslint/no-empty-function */
 /* eslint-disable @typescript-eslint/restrict-plus-operands */
-/* eslint-disable @typescript-eslint/restrict-template-expressions */
 /* eslint-disable @typescript-eslint/no-explicit-any */
 /* eslint-disable @typescript-eslint/no-unsafe-assignment */
 /* eslint-disable @typescript-eslint/no-unsafe-member-access */
@@ -15,6 +14,12 @@ import { toast } from 'react-toastify'
 import { useSetAppState } from '#components/AppShell/hooks/useAppState'
 import { useTheme } from '#components/AppShell/hooks/useTheme'
 import { containsUUID } from '#utils/ContainsUUID'
+import {
+  removeItemFromUrl,
+  resetMetaTags as resetMetaTagsUtil,
+  setItemInUrl,
+  updateMetaTags,
+} from '#utils/UrlHelper'
 
 import { useClusterRef, useSetClusterRef } from './hooks/useClusterRef'
 import {
@@ -64,6 +69,7 @@ export function UtopiaMapInner({
   maplibreStyle,
   zoomOffset = 0,
   tileSize = 256,
+  showZoomControl,
 }: {
   children?: React.ReactNode
   geo?: GeoJsonObject
@@ -81,6 +87,7 @@ export function UtopiaMapInner({
   maplibreStyle?: string
   zoomOffset?: number
   tileSize?: number
+  showZoomControl?: boolean
 }) {
   const selectNewItemPosition = useSelectPosition()
   const setSelectNewItemPosition = useSetSelectPosition()
@@ -150,21 +157,45 @@ export function UtopiaMapInner({
     return null
   }
 
+  // Track if we're currently switching popups to prevent URL cleanup
+  const popupCloseTimeoutRef = useRef<NodeJS.Timeout | null>(null)
+
   useMapEvents({
     popupopen: (e) => {
       const item = Object.entries(leafletRefs).find((r) => r[1].popup === e.popup)?.[1].item
-      if (window.location.pathname.split('/')[1] !== item?.id) {
+
-        const params = new URLSearchParams(window.location.search)
+      // Cancel any pending popup close URL cleanup - we're opening a new popup
-        if (!location.pathname.includes('/item/')) {
+      if (popupCloseTimeoutRef.current) {
-          window.history.pushState(
+        clearTimeout(popupCloseTimeoutRef.current)
-            {},
+        popupCloseTimeoutRef.current = null
-            '',
-            `/${item?.id}` + `${params.toString() !== '' ? `?${params}` : ''}`,
-          )
       }
-        let title = ''
+
-        if (item?.name) title = item.name
+      // Only update URL if no profile is open
-        document.title = `${document.title.split('-')[0]} - ${title}`
+      if (!location.pathname.includes('/item/')) {
+        if (window.location.pathname.split('/')[1] !== item?.id && item?.id) {
+          setItemInUrl(item.id)
+        }
+        if (item?.name) {
+          updateMetaTags(item.name, item.text)
+        }
+      }
+      // If profile is open, don't change URL but still update meta tags
+      else if (item?.name) {
+        updateMetaTags(item.name, item.text)
+      }
+    },
+    popupclose: () => {
+      // Only remove UUID from URL if no profile is open
+      if (!location.pathname.includes('/item/')) {
+        // Wait briefly to see if another popup is being opened
+        // If so, the popupopen handler will cancel this timeout
+        popupCloseTimeoutRef.current = setTimeout(() => {
+          if (containsUUID(window.location.pathname)) {
+            removeItemFromUrl()
+            resetMetaTagsUtil()
+          }
+          popupCloseTimeoutRef.current = null
+        }, 50)
       }
     },
   })
@@ -183,15 +214,9 @@ export function UtopiaMapInner({
             clusterRef?.zoomToShowLayer(ref.marker, () => {
               ref.marker.openPopup()
             })
-          let title = ''
+          if (ref.item.name) {
-          if (ref.item.name) title = ref.item.name
+            updateMetaTags(ref.item.name, ref.item.text)
-          document.title = `${document.title.split('-')[0]} - ${title}`
+          }
-          document
-            .querySelector('meta[property="og:title"]')
-            ?.setAttribute('content', ref.item.name ?? '')
-          document
-            .querySelector('meta[property="og:description"]')
-            ?.setAttribute('content', ref.item.text ?? '')
         }
       }
     }
@@ -203,18 +228,10 @@ export function UtopiaMapInner({
   }, [leafletRefs, location])
 
   const resetMetaTags = () => {
-    const params = new URLSearchParams(window.location.search)
+    if (containsUUID(window.location.pathname)) {
-    if (!containsUUID(window.location.pathname)) {
+      removeItemFromUrl()
-      window.history.pushState({}, '', '/' + `${params.toString() !== '' ? `?${params}` : ''}`)
     }
-    document.title = document.title.split('-')[0]
+    resetMetaTagsUtil()
-    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')}`,
-      )
   }
 
   const onEachFeature = (feature: Feature<GeoJSONGeometry, any>, layer: L.Layer) => {
@@ -285,7 +302,9 @@ export function UtopiaMapInner({
       <Outlet />
       <Control position='topLeft' zIndex='1000' absolute>
         <SearchControl />
+        <div className={`${showZoomControl ? 'tw:pl-14' : ''}`}>
           <TagsControl />
+        </div>
       </Control>
       <Control position='bottomLeft' zIndex='999' absolute>
         {showFullscreenControl && <FullscreenControl />}

lib/src/Components/Profile/Templates/TabsView.tsx

@@ -17,6 +17,7 @@ import { ActionButton } from '#components/Profile/Subcomponents/ActionsButton'
 import { LinkedItemsHeaderView } from '#components/Profile/Subcomponents/LinkedItemsHeaderView'
 import { TagView } from '#components/Templates/TagView'
 import { timeAgo } from '#utils/TimeAgo'
+import { setUrlParam } from '#utils/UrlHelper'
 
 import type { Item } from '#types/Item'
 import type { Tag } from '#types/Tag'
@@ -67,11 +68,7 @@ export const TabsView = ({
   const updateActiveTab = useCallback(
     (id: number) => {
       setActiveTab(id)
-
+      setUrlParam('tab', `${id}`)
-      const params = new URLSearchParams(window.location.search)
-      params.set('tab', `${id}`)
-      const newUrl = location.pathname + '?' + params.toString()
-      window.history.pushState({}, '', newUrl)
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [location.pathname],

lib/src/Components/Profile/itemFunctions.ts

@@ -14,6 +14,7 @@ import { toast } from 'react-toastify'
 import { encodeTag } from '#utils/FormatTags'
 import { hashTagRegex } from '#utils/HashTagRegex'
 import { randomColor } from '#utils/RandomColor'
+import { removeItemFromUrl } from '#utils/UrlHelper'
 
 import type { FormState } from '#types/FormState'
 import type { Item } from '#types/Item'
@@ -185,8 +186,7 @@ export const handleDelete = async (
     toast.success('Item deleted')
 
     map.closePopup()
-    const params = new URLSearchParams(window.location.search)
+    removeItemFromUrl()
-    window.history.pushState({}, '', '/' + `${params ? `?${params}` : ''}`)
     navigate('/')
   } catch (error) {
     toast.error(error instanceof Error ? error.message : String(error))
@@ -273,7 +273,7 @@ export const onUpdateItem = async (
   setLoading(true)
 
   state.text
-    .toLocaleLowerCase()
+    ?.toLocaleLowerCase()
     .match(hashTagRegex)
     ?.map((tag) => {
       if (!tags.find((t) => t.name.toLocaleLowerCase() === tag.slice(1).toLocaleLowerCase())) {

lib/src/Utils/MarkerIconFactory.ts

@@ -40,7 +40,7 @@ const MarkerIconFactory = (
 ) => {
   if (icon)
     return divIcon({
-      html: `<div class="svg-container">${createSvg(shape, color1, color2)}<img class="overlay-svg" style="width: ${icon.size ? icon.size : '12.5'}px; filter: invert(1) brightness(2);" src="${`${assetsURL ?? ''}` + icon.image}"></div>`,
+      html: `<div class="svg-container">${createSvg(shape, color1, color2)}<img class="overlay-svg" style="width: ${icon.size ? icon.size : '12.5'}px; height: ${icon.size ? icon.size : '12.5'}px; filter: invert(1) brightness(2);" src="${`${assetsURL ?? ''}` + icon.image}"></div>`,
       iconAnchor: [17, 40],
       popupAnchor: [0, -40],
       iconSize: new Point(40, 46),

lib/src/Utils/UrlHelper.ts

@@ -0,0 +1,74 @@
+/**
+ * Utility functions for managing browser URL and history
+ */
+
+/**
+ * Updates the browser URL with an item ID while preserving query parameters
+ * @param itemId - The item UUID to add to the URL
+ */
+export function setItemInUrl(itemId: string): void {
+  const params = new URLSearchParams(window.location.search)
+  const paramsString = params.toString()
+  const newUrl = `/${itemId}${paramsString !== '' ? `?${paramsString}` : ''}`
+  window.history.pushState({}, '', newUrl)
+}
+
+/**
+ * Removes the item ID from the browser URL while preserving query parameters
+ */
+export function removeItemFromUrl(): void {
+  const params = new URLSearchParams(window.location.search)
+  const paramsString = params.toString()
+  const newUrl = `/${paramsString !== '' ? `?${paramsString}` : ''}`
+  window.history.pushState({}, '', newUrl)
+}
+
+/**
+ * Updates a specific query parameter in the URL while preserving the path
+ * @param key - The parameter key
+ * @param value - The parameter value
+ */
+export function setUrlParam(key: string, value: string): void {
+  const params = new URLSearchParams(window.location.search)
+  params.set(key, value)
+  const newUrl = window.location.pathname + '?' + params.toString()
+  window.history.pushState({}, '', newUrl)
+}
+
+/**
+ * Removes a specific query parameter from the URL
+ * @param key - The parameter key to remove
+ */
+export function removeUrlParam(key: string): void {
+  const params = new URLSearchParams(window.location.search)
+  params.delete(key)
+  const paramsString = params.toString()
+  const newUrl = window.location.pathname + (paramsString !== '' ? `?${paramsString}` : '')
+  window.history.pushState({}, '', newUrl)
+}
+
+/**
+ * Resets page title and OpenGraph meta tags to default values
+ */
+export function resetMetaTags(): void {
+  document.title = document.title.split('-')[0].trim()
+  document.querySelector('meta[property="og:title"]')?.setAttribute('content', document.title)
+  const description = document.querySelector('meta[name="description"]')?.getAttribute('content')
+  if (description) {
+    document.querySelector('meta[property="og:description"]')?.setAttribute('content', description)
+  }
+}
+
+/**
+ * Updates page title and OpenGraph meta tags with item information
+ * @param itemName - The name of the item
+ * @param itemText - The text/description of the item
+ */
+export function updateMetaTags(itemName: string, itemText?: string): void {
+  const baseTitle = document.title.split('-')[0].trim()
+  document.title = `${baseTitle} - ${itemName}`
+  document.querySelector('meta[property="og:title"]')?.setAttribute('content', itemName)
+  if (itemText) {
+    document.querySelector('meta[property="og:description"]')?.setAttribute('content', itemText)
+  }
+}

lib/src/css.tsx

@@ -4,6 +4,8 @@ import 'react-image-crop/dist/ReactCrop.css'
 import 'react-photo-album/rows.css'
 import 'react-toastify/dist/ReactToastify.css'
 import 'yet-another-react-lightbox/styles.css'
+import 'react-leaflet-cluster/dist/assets/MarkerCluster.css'
+import 'react-leaflet-cluster/dist/assets/MarkerCluster.Default.css'
 
 import '#assets/css/tailwind.css'
 import '#assets/css/masonry.css'

lib/src/types/LayerProps.d.ts

@@ -13,8 +13,8 @@ export interface LayerProps {
   name: string
   menuColor: string
   menuText: string
-  markerIcon: MarkerIcon
+  markerIcon?: MarkerIcon
-  markerShape: string
+  markerShape?: string
   markerDefaultColor: string
   markerDefaultColor2?: string
   api?: ItemsApi<Item>