antontranelis/utopia-ui
1
0
Fork 0
mirror of https://github.com/utopia-os/utopia-ui.git synced 2025-12-13 07:46:10 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'main' into invites-2

Browse Source
This commit is contained in:
Maximilian Harz 2025-11-20 17:57:08 +01:00
commit c1e528b3cd
40 changed files with 3446 additions and 28884 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
.github/dependabot.yml vendored Normal file
View File

@ -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"

8
.github/workflows/test.e2e.yml vendored
View File

@ -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: |

4
.github/workflows/test.lint.pr.yml vendored
View File

@ -32,6 +32,8 @@ jobs:
backend
app
lib
deps
deps-dev
docu
docker
release
@ -76,4 +78,4 @@ jobs:
# special "[WIP]" prefix to indicate this state. This will avoid the
# validation of the PR title and the pull request checks remain pending.
# Note that a second check will be reported if this is enabled.
wip: true
wip: true

17
README.md
View File

@ -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
```

12331
app/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

29
app/package.json
View File

@ -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",
"date-fns": "^3.3.1",
"axios": "^1.13.2",
"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-refresh": "^0.4.18",
"eslint-plugin-react-hooks": "^7.0.1",
"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",
"typescript": "^5.0.2",
"vite": "^6.2.0",
"vite-plugin-pwa": "^0.21.1"
"tailwindcss": "^4.1.17",
"typescript": "^5.9.3",
"vite": "^7.2.2",
"vite-plugin-pwa": "^1.1.0"
}
}

10
app/src/App.tsx
View File

@ -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,

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

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

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

@ -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,

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

@ -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,

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

@ -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"
}
}

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

@ -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
}
}

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

@ -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"
}
}

1171
cypress/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

14
cypress/package.json
View File

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

924
lib/examples/1-basic-map/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

84
lib/examples/2-static-layers/package-lock.json generated
View File

@ -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",
"daisyui": "^5.0.6",
"cypress": "^15.6.0",
"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",
"resolved": "https://registry.npmjs.org/@eslint/plugin-kit/-/plugin-kit-0.3.1.tgz",
"integrity": "sha512-0J+zgWxHN+xXONWIyPWKFMgVuJoZuGiIFu8yxk7RJjxkzpGmyja5wRFqZIVtjDVOQpV+Rw0iOAjYPE2eQyjr0w==",
"version": "0.3.5",
"resolved": "https://registry.npmjs.org/@eslint/plugin-kit/-/plugin-kit-0.3.5.tgz",
"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",
"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
"integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
"version": "2.0.2",
"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.2.tgz",
"integrity": "sha512-Jt0vHyM+jmUBqojB7E1NIYadt0vI0Qxjxd2TErW94wDz+E2LAm5vKMXXwg6ZZBTHPuUlDgQHKXvjGBdfcF1ZDQ==",
"dev": true,
"license": "MIT",
"dependencies": {
@ -1833,9 +1867,9 @@
"license": "MIT"
},
"node_modules/brace-expansion": {
"version": "1.1.11",
"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
"integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
"version": "1.1.12",
"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.12.tgz",
"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",
"resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
"integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==",
"version": "4.1.1",
"resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.1.tgz",
"integrity": "sha512-qQKT4zQxXl8lLwBtHMWwaTcGfFOZviOJet3Oy/xmGk2gZH677CJM9EvtfdSkgWcATZhj/55JZ0rmy3myCT5lsA==",
"dev": true,
"license": "MIT",
"dependencies": {
@ -3287,9 +3321,9 @@
"link": true
},
"node_modules/vite": {
"version": "6.3.5",
"resolved": "https://registry.npmjs.org/vite/-/vite-6.3.5.tgz",
"integrity": "sha512-cZn6NDFE7wdTpINgs++ZJ4N49W2vRp8LCKrn3Ob1kYNtOo21vfDoaV5GzBfLU4MovSAB8uNRm4jgzVQZ+mBzPQ==",
"version": "6.4.1",
"resolved": "https://registry.npmjs.org/vite/-/vite-6.4.1.tgz",
"integrity": "sha512-+Oxm7q9hDoLMyJOYfUYBuHQo+dkAloi33apOPP56pzj+vsdJDzr+j1NISE5pyaAuKL4A3UD34qd0lx5+kfKp2g==",
"dev": true,
"license": "MIT",
"dependencies": {

899
lib/examples/3-tags/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

14658
lib/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

64
lib/package.json
View File

@ -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-commonjs": "^28.0.3",
"@rollup/plugin-node-resolve": "^16.0.0",
"@rollup/plugin-typescript": "^12.1.2",
"@tailwindcss/postcss": "^4.0.14",
"@rollup/plugin-alias": "^6.0.0",
"@rollup/plugin-commonjs": "^29.0.0",
"@rollup/plugin-node-resolve": "^16.0.3",
"@rollup/plugin-typescript": "^12.3.0",
"@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",
"daisyui": "^5.2.3",
"cypress": "^15.6.0",
"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-refresh": "^0.4.18",
"eslint-plugin-react-hooks": "^7.0.1",
"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",
"vite": "^6.0.11",
"typescript": "^5.9.3",
"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.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/core": "^3.11.0",
"@tiptap/extension-bubble-menu": "^3.11.0",
"@tiptap/extension-color": "^3.11.0",
"@tiptap/extension-image": "^3.11.0",
"@tiptap/extension-link": "^3.11.0",
"@tiptap/extension-placeholder": "^3.11.0",
"@tiptap/extension-youtube": "^3.11.0",
"@tiptap/pm": "^3.6.5",
"@tiptap/react": "^3.6.5",
"@tiptap/starter-kit": "^3.6.5",
"axios": "^1.6.5",
"@tiptap/react": "^3.11.0",
"@tiptap/starter-kit": "^3.11.0",
"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",

49
lib/src/Components/AppShell/ContextWrapper.tsx
View File

@ -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,30 +61,28 @@ export const Wrappers = ({ children }) => {
<ItemsProvider initialItems={[]}>
<SelectPositionProvider>
<LeafletRefsProvider initialLeafletRefs={{}}>
<QueryClientProvider client={queryClient}>
<AppStateProvider>
<ClusterRefProvider>
<PopupFormProvider>
<QuestsProvider initialOpen={true}>
<ToastContainer
position='top-right'
autoClose={2000}
hideProgressBar
newestOnTop={false}
closeOnClick
rtl={false}
pauseOnFocusLoss
draggable
pauseOnHover
theme='light'
closeButton={CloseButton}
/>
{children}
</QuestsProvider>
</PopupFormProvider>
</ClusterRefProvider>
</AppStateProvider>
</QueryClientProvider>
<AppStateProvider>
<ClusterRefProvider>
<PopupFormProvider>
<QuestsProvider initialOpen={true}>
<ToastContainer
position='top-right'
autoClose={2000}
hideProgressBar
newestOnTop={false}
closeOnClick
rtl={false}
pauseOnFocusLoss
draggable
pauseOnHover
theme='light'
closeButton={CloseButton}
/>
{children}
</QuestsProvider>
</PopupFormProvider>
</ClusterRefProvider>
</AppStateProvider>
</LeafletRefsProvider>
</SelectPositionProvider>
</ItemsProvider>

2
lib/src/Components/AppShell/SideBar.tsx
View File

@ -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}

2
lib/src/Components/Input/RichTextEditor.tsx
View File

@ -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)
}
}

9
lib/src/Components/Map/Layer.tsx
View File

@ -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,
}}

20
lib/src/Components/Map/Subcomponents/AddButton.tsx
View File

@ -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()
}}
>
<img
src={appState.assetsApi.url + layer.markerIcon.image}
style={{
filter: 'invert(100%) brightness(200%)',
width: `${(layer.markerIcon.size ?? 18) * 1.3}px`,
}}
/>
{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>

147
lib/src/Components/Map/Subcomponents/Controls/SearchControl.tsx
View File

@ -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,56 +167,85 @@ export const SearchControl = () => {
{itemsResults.length > 0 && tagsResults.length > 0 && (
<hr className='tw:opacity-50'></hr>
)}
{itemsResults.slice(0, 5).map((item) => (
<div
key={item.id}
className='tw:cursor-pointer tw:hover:font-bold tw:flex tw:flex-row'
data-cy='search-item-result'
onClick={() => {
const marker = Object.entries(leafletRefs).find((r) => r[1].item === item)?.[1]
.marker
if (marker) {
navigate(`/${item.id}?${new URLSearchParams(window.location.search)}`)
} else {
navigate(
'item/' + item.id + '?' + new URLSearchParams(window.location.search),
)
}
}}
>
{item.layer?.markerIcon.image ? (
<div
className='tw:w-7 tw:h-full tw:flex tw:justify-center tw:items-center'
data-cy='search-item-icon'
>
<SVG
src={appState.assetsApi.url + item.layer.markerIcon.image}
className='tw:text-current tw:mr-2 tw:mt-0'
style={{ width: `${(item.layer.markerIcon.size ?? 18) * 1.2}px` }}
preProcessor={(code: string): string => {
code = code.replace(/fill=".*?"/g, 'fill="currentColor"')
code = code.replace(/stroke=".*?"/g, 'stroke="currentColor"')
return code
}}
{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 tw:items-center tw:gap-2'
data-cy='search-item-result'
onClick={() => {
const marker = Object.entries(leafletRefs).find(
(r) => r[1].item === item,
)?.[1].marker
if (marker) {
navigate(`/${item.id}?${new URLSearchParams(window.location.search)}`)
} else {
navigate(
'item/' + item.id + '?' + new URLSearchParams(window.location.search),
)
}
}}
>
{item.layer?.markerIcon?.image ? (
<div
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:max-w-full tw:max-h-full'
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"')
return code
}}
/>
</div>
) : (
<div
className='tw:w-7 tw:h-7 tw:flex-shrink-0'
data-cy='search-item-icon-placeholder'
/>
</div>
) : (
<div className='tw:w-7' data-cy='search-item-icon-placeholder' />
)}
<div>
<div className='tw:text-sm tw:overflow-hidden tw:text-ellipsis tw:whitespace-nowrap tw:max-w-[17rem]'>
{item.name}
)}
<div className='tw:flex tw:flex-col tw:min-w-0'>
<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>
</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
className='tw:text-current tw:mr-2 tw:mt-0 tw:w-5'
data-cy='search-geo-icon'
/>
<div>
<div className='tw:h-7 tw:w-7 tw:flex tw:items-center tw:justify-center tw:flex-shrink-0'>
<MapPinIcon
className='tw:text-current tw:w-5 tw:h-5'
data-cy='search-geo-icon'
/>
</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 = () => {
)
}}
>
<FlagIcon
className='tw:text-current tw:mr-2 tw:mt-0 tw:w-4'
data-cy='search-coordinate-icon'
/>
<div>
<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:w-5 tw:h-5'
data-cy='search-coordinate-icon'
/>
</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'}

2
lib/src/Components/Map/Subcomponents/Controls/TagsControl.tsx
View File

@ -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}

7
lib/src/Components/Map/Subcomponents/ItemPopupComponents/HeaderView/hooks.ts
View File

@ -33,9 +33,10 @@ 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
? `${window.location.origin}/invite/${item.secrets[0].secret}`
: shareUrl
const inviteLink =
item?.secrets && item.secrets.length > 0
? `${window.location.origin}/invite/${item.secrets[0].secret}`
: shareUrl
const copyLink = () => {
navigator.clipboard

4
lib/src/Components/Map/Subcomponents/ItemPopupComponents/HeaderView/index.tsx
View File

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

12
lib/src/Components/Map/Subcomponents/ItemPopupComponents/TextView.tsx
View File

@ -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}

5
lib/src/Components/Map/Subcomponents/ItemViewPopup.tsx
View File

@ -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)
window.history.pushState({}, '', '/' + `${params ? `?${params}` : ''}`)
removeItemFromUrl()
navigate('/')
}

1
lib/src/Components/Map/UtopiaMap.tsx
View File

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

85
lib/src/Components/Map/UtopiaMapInner.tsx
View File

@ -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)
if (!location.pathname.includes('/item/')) {
window.history.pushState(
{},
'',
`/${item?.id}` + `${params.toString() !== '' ? `?${params}` : ''}`,
)
// Cancel any pending popup close URL cleanup - we're opening a new popup
if (popupCloseTimeoutRef.current) {
clearTimeout(popupCloseTimeoutRef.current)
popupCloseTimeoutRef.current = null
}
// Only update URL if no profile is open
if (!location.pathname.includes('/item/')) {
if (window.location.pathname.split('/')[1] !== item?.id && item?.id) {
setItemInUrl(item.id)
}
let title = ''
if (item?.name) title = item.name
document.title = `${document.title.split('-')[0]} - ${title}`
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) title = ref.item.name
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 ?? '')
if (ref.item.name) {
updateMetaTags(ref.item.name, 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)) {
window.history.pushState({}, '', '/' + `${params.toString() !== '' ? `?${params}` : ''}`)
if (containsUUID(window.location.pathname)) {
removeItemFromUrl()
}
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')}`,
)
resetMetaTagsUtil()
}
const onEachFeature = (feature: Feature<GeoJSONGeometry, any>, layer: L.Layer) => {
@ -285,7 +302,9 @@ export function UtopiaMapInner({
<Outlet />
<Control position='topLeft' zIndex='1000' absolute>
<SearchControl />
<TagsControl />
<div className={`${showZoomControl ? 'tw:pl-14' : ''}`}>
<TagsControl />
</div>
</Control>
<Control position='bottomLeft' zIndex='999' absolute>
{showFullscreenControl && <FullscreenControl />}

7
lib/src/Components/Profile/Templates/TabsView.tsx
View File

@ -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)
const params = new URLSearchParams(window.location.search)
params.set('tab', `${id}`)
const newUrl = location.pathname + '?' + params.toString()
window.history.pushState({}, '', newUrl)
setUrlParam('tab', `${id}`)
},
// eslint-disable-next-line react-hooks/exhaustive-deps
[location.pathname],

6
lib/src/Components/Profile/itemFunctions.ts
View File

@ -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)
window.history.pushState({}, '', '/' + `${params ? `?${params}` : ''}`)
removeItemFromUrl()
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())) {

2
lib/src/Utils/MarkerIconFactory.ts
View File

@ -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),

74
lib/src/Utils/UrlHelper.ts Normal file
View File

@ -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)
}
}

2
lib/src/css.tsx
View File

@ -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'

4
lib/src/types/LayerProps.d.ts vendored
View File

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

1513
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff