diff --git a/lib/src/Components/Map/Subcomponents/ItemPopupComponents/HeaderView/ActionButtons.tsx b/lib/src/Components/Map/Subcomponents/ItemPopupComponents/HeaderView/ActionButtons.tsx
index df9b99a4..ab6f7981 100644
--- a/lib/src/Components/Map/Subcomponents/ItemPopupComponents/HeaderView/ActionButtons.tsx
+++ b/lib/src/Components/Map/Subcomponents/ItemPopupComponents/HeaderView/ActionButtons.tsx
@@ -1,4 +1,3 @@
-import { QrCodeIcon } from '@heroicons/react/24/solid'
import { LuNavigation } from 'react-icons/lu'
import { useMyProfile } from '#components/Map/hooks/useMyProfile'
@@ -10,10 +9,9 @@ import type { Item } from '#types/Item'
interface ActionButtonsProps {
item: Item
- onQrModalOpen: () => void
}
-export function ActionButtons({ item, onQrModalOpen }: ActionButtonsProps) {
+export function ActionButtons({ item }: ActionButtonsProps) {
const myProfile = useMyProfile()
const { getNavigationUrl, isMobile, isIOS } = useNavigationUrl(
item.position?.coordinates as [number, number] | undefined,
@@ -34,16 +32,6 @@ export function ActionButtons({ item, onQrModalOpen }: ActionButtonsProps) {
)}
- {myProfile.myProfile?.id === item.id && (
-
- )}
{myProfile.myProfile?.id !== item.id && }
>
)
diff --git a/lib/src/Components/Map/Subcomponents/ItemPopupComponents/HeaderView/ItemAvatar.tsx b/lib/src/Components/Map/Subcomponents/ItemPopupComponents/HeaderView/ItemAvatar.tsx
index e589d490..926093a2 100644
--- a/lib/src/Components/Map/Subcomponents/ItemPopupComponents/HeaderView/ItemAvatar.tsx
+++ b/lib/src/Components/Map/Subcomponents/ItemPopupComponents/HeaderView/ItemAvatar.tsx
@@ -1,5 +1,7 @@
import { useState } from 'react'
+import { QrCodeIcon } from '@heroicons/react/24/solid'
+
import { useAppState } from '#components/AppShell/hooks/useAppState'
import type { Item } from '#types/Item'
@@ -7,9 +9,16 @@ import type { Item } from '#types/Item'
interface ItemAvatarProps {
item: Item
big?: boolean
+ showQrButton?: boolean
+ onQrClick?: () => void
}
-export function ItemAvatar({ item, big = false }: ItemAvatarProps) {
+export function ItemAvatar({
+ item,
+ big = false,
+ showQrButton = false,
+ onQrClick,
+}: ItemAvatarProps) {
const appState = useAppState()
const [imageLoaded, setImageLoaded] = useState(false)
@@ -17,10 +26,21 @@ export function ItemAvatar({ item, big = false }: ItemAvatarProps) {
(item.image && appState.assetsApi.url + item.image + '?width=160&heigth=160') ??
item.image_external
- if (!avatar) return null
+ const hasAvatar = !!avatar
+
+ // If no avatar but QR button should be shown, show only the QR button
+ if (!hasAvatar && showQrButton) {
+ return (
+
+ )
+ }
+
+ if (!hasAvatar) return null
return (
-
+
+ {showQrButton && (
+
+ )}
)
}
diff --git a/lib/src/Components/Map/Subcomponents/ItemPopupComponents/HeaderView/index.tsx b/lib/src/Components/Map/Subcomponents/ItemPopupComponents/HeaderView/index.tsx
index 3b2405cd..12d236ed 100644
--- a/lib/src/Components/Map/Subcomponents/ItemPopupComponents/HeaderView/index.tsx
+++ b/lib/src/Components/Map/Subcomponents/ItemPopupComponents/HeaderView/index.tsx
@@ -1,5 +1,7 @@
import { useState } from 'react'
+import { useMyProfile } from '#components/Map/hooks/useMyProfile'
+
import { ActionButtons } from './ActionButtons'
import { ConnectionStatus } from './ConnectionStatus'
import { DeleteModal } from './DeleteModal'
@@ -24,17 +26,25 @@ export function HeaderView({
}: HeaderViewProps) {
const [modalOpen, setModalOpen] = useState(false)
const [qrModalOpen, setQrModalOpen] = useState(false)
+ const myProfile = useMyProfile()
if (!item) return null
const hasAvatar = !!(item.image ?? item.image_external)
+ const isMyProfile = myProfile.myProfile?.id === item.id
+ const showQrButton = big && isMyProfile
return (
<>
- {hasAvatar && }
+ setQrModalOpen(true)}
+ />
-
setQrModalOpen(true)} />
+
)}
diff --git a/lib/src/Components/Map/UtopiaMapInner.tsx b/lib/src/Components/Map/UtopiaMapInner.tsx
index 0ebed786..7b02c442 100644
--- a/lib/src/Components/Map/UtopiaMapInner.tsx
+++ b/lib/src/Components/Map/UtopiaMapInner.tsx
@@ -291,6 +291,9 @@ export function UtopiaMapInner({
'©
OpenStreetMap'
}
url={tileServerUrl ?? 'https://tile.osmand.net/hd/{z}/{x}/{y}.png'}
+ zoomOffset={-1}
+ tileSize={512}
+ minZoom={2}
/>
setClusterRef(r as any)}