Merge branch 'main' into serverside-geocoding

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)
@@ -139,14 +140,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/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"
-  }
-}

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/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/UtopiaMap.tsx

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

lib/src/Components/Map/UtopiaMapInner.tsx

@@ -64,6 +64,7 @@ export function UtopiaMapInner({
   maplibreStyle,
   zoomOffset = 0,
   tileSize = 256,
+  showZoomControl,
 }: {
   children?: React.ReactNode
   geo?: GeoJsonObject
@@ -81,6 +82,7 @@ export function UtopiaMapInner({
   maplibreStyle?: string
   zoomOffset?: number
   tileSize?: number
+  showZoomControl?: boolean
 }) {
   const selectNewItemPosition = useSelectPosition()
   const setSelectNewItemPosition = useSetSelectPosition()
@@ -285,7 +287,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/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/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>