qr-share-button refeactor

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) {
           <LuNavigation className='tw:h-4 tw:w-4' />
         </a>
       )}
-      {myProfile.myProfile?.id === item.id && (
-        <button
-          onClick={onQrModalOpen}
-          className='tw:btn tw:mr-2 tw:px-3 tw:tooltip tw:tooltip-top'
-          title='QR-Code'
-          data-tip='QR Code'
-        >
-          <QrCodeIcon className='tw:h-4 tw:w-4' />
-        </button>
-      )}
       {myProfile.myProfile?.id !== item.id && <ShareButton item={item} />}
     </>
   )

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 (
+      <button onClick={onQrClick} className='tw:btn tw:btn-lg tw:p-3 tw:mr-2' title='QR-Code'>
+        <QrCodeIcon className='tw:h-6 tw:w-6' />
+      </button>
+    )
+  }
+
+  if (!hasAvatar) return null
 
   return (
-    <div className='tw:avatar'>
+    <div className='tw:avatar tw:relative'>
       <div
         className={`${
           big ? 'tw:w-16' : 'tw:w-10'
@@ -36,6 +56,15 @@ export function ItemAvatar({ item, big = false }: ItemAvatarProps) {
         />
         {!imageLoaded && <div className='tw:w-full tw:h-full tw:bg-gray-200 tw:rounded-full' />}
       </div>
+      {showQrButton && (
+        <button
+          onClick={onQrClick}
+          className='tw:btn tw:p-1 tw:btn-sm tw:absolute tw:bottom-[-6px] tw:right-[-6px]'
+          title='QR-Code'
+        >
+          <QrCodeIcon className='tw:h-5 tw:w-5' />
+        </button>
+      )}
     </div>
   )
 }

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<boolean>(false)
   const [qrModalOpen, setQrModalOpen] = useState<boolean>(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 (
     <>
       <div className='tw:flex tw:flex-row'>
         <div className={'tw:grow tw:flex tw:flex-1 tw:min-w-0'}>
           <div className='tw:flex tw:flex-1 tw:min-w-0 tw:items-center'>
-            {hasAvatar && <ItemAvatar item={item} big={big} />}
+            <ItemAvatar
+              item={item}
+              big={big}
+              showQrButton={showQrButton}
+              onQrClick={() => setQrModalOpen(true)}
+            />
             <ItemTitle
               item={item}
               big={big}
@@ -62,7 +72,7 @@ export function HeaderView({
           <div className='tw:grow'></div>
           <div className='tw:flex'>
             <ConnectionStatus item={item} />
-            <ActionButtons item={item} onQrModalOpen={() => setQrModalOpen(true)} />
+            <ActionButtons item={item} />
           </div>
         </div>
       )}

lib/src/Components/Map/UtopiaMapInner.tsx

@@ -291,6 +291,9 @@ export function UtopiaMapInner({
           '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>'
         }
         url={tileServerUrl ?? 'https://tile.osmand.net/hd/{z}/{x}/{y}.png'}
+        zoomOffset={-1}
+        tileSize={512}
+        minZoom={2}
       />
       <MarkerClusterGroup
         ref={(r) => setClusterRef(r as any)}