feat(settings): add share button next to copy button on mobile devices for public share link

This commit is contained in:
2026-06-07 21:19:57 +02:00
parent faf3b8e3cf
commit 864d45714c
8 changed files with 37 additions and 1 deletions
+30 -1
View File
@@ -1,6 +1,6 @@
import React, { useState, useEffect } from 'react' import React, { useState, useEffect } from 'react'
import { useTranslation } from 'react-i18next' import { useTranslation } from 'react-i18next'
import { Settings as SettingsIcon, Check, Users, Trash2, Copy, Link as LinkIcon } from 'lucide-react' import { Settings as SettingsIcon, Check, Users, Trash2, Copy, Link as LinkIcon, Share2 } from 'lucide-react'
import { ensureLogbookKey } from '../services/logbookKeys.js' import { ensureLogbookKey } from '../services/logbookKeys.js'
import LogbookBackupPanel from './LogbookBackupPanel.tsx' import LogbookBackupPanel from './LogbookBackupPanel.tsx'
import LinkQrCode from './LinkQrCode.tsx' import LinkQrCode from './LinkQrCode.tsx'
@@ -131,6 +131,24 @@ export default function SettingsForm({ logbookId, onLogbookRestored }: SettingsF
} }
} }
const isShareSupported = typeof navigator !== 'undefined' && !!navigator.share
const handleShareLink = async () => {
if (shareLink) {
try {
await navigator.share({
title: t('seo.title') || 'Kapteins Daagbok',
text: t('settings.share_desc'),
url: shareLink
})
} catch (err: unknown) {
if (err instanceof Error && err.name !== 'AbortError') {
console.error('Sharing link failed:', err)
}
}
}
}
const loadCollaborators = async () => { const loadCollaborators = async () => {
setLoadingCollabs(true) setLoadingCollabs(true)
setCollabError(null) setCollabError(null)
@@ -337,6 +355,17 @@ export default function SettingsForm({ logbookId, onLogbookRestored }: SettingsF
> >
{shareCopied ? <Check size={16} /> : <Copy size={16} />} {shareCopied ? <Check size={16} /> : <Copy size={16} />}
</button> </button>
{isShareSupported && (
<button
type="button"
className="btn secondary"
onClick={() => void handleShareLink()}
style={{ width: 'auto', padding: '10px' }}
title={t('settings.share_btn')}
>
<Share2 size={16} />
</button>
)}
</div> </div>
<LinkQrCode value={shareLink} /> <LinkQrCode value={shareLink} />
</div> </div>
+1
View File
@@ -820,6 +820,7 @@
"share_enable": "Aktivér offentligt link", "share_enable": "Aktivér offentligt link",
"share_copied": "Linket er kopieret!", "share_copied": "Linket er kopieret!",
"share_copy_btn": "Kopier link", "share_copy_btn": "Kopier link",
"share_btn": "Del link",
"link_qr_hint": "QR-kode til scanning med en smartphone", "link_qr_hint": "QR-kode til scanning med en smartphone",
"link_qr_alt": "QR-kode til linket", "link_qr_alt": "QR-kode til linket",
"danger_zone_title": "Farezone", "danger_zone_title": "Farezone",
+1
View File
@@ -820,6 +820,7 @@
"share_enable": "Öffentlichen Link aktivieren", "share_enable": "Öffentlichen Link aktivieren",
"share_copied": "Link kopiert!", "share_copied": "Link kopiert!",
"share_copy_btn": "Link kopieren", "share_copy_btn": "Link kopieren",
"share_btn": "Link teilen",
"link_qr_hint": "QR-Code zum Scannen mit dem Smartphone", "link_qr_hint": "QR-Code zum Scannen mit dem Smartphone",
"link_qr_alt": "QR-Code für den Link", "link_qr_alt": "QR-Code für den Link",
"danger_zone_title": "Gefahrenzone", "danger_zone_title": "Gefahrenzone",
+1
View File
@@ -820,6 +820,7 @@
"share_enable": "Enable Public Link", "share_enable": "Enable Public Link",
"share_copied": "Link copied!", "share_copied": "Link copied!",
"share_copy_btn": "Copy Link", "share_copy_btn": "Copy Link",
"share_btn": "Share Link",
"link_qr_hint": "Scan this QR code with your phone", "link_qr_hint": "Scan this QR code with your phone",
"link_qr_alt": "QR code for the link", "link_qr_alt": "QR code for the link",
"danger_zone_title": "Danger Zone", "danger_zone_title": "Danger Zone",
+1
View File
@@ -820,6 +820,7 @@
"share_enable": "Activar enlace público", "share_enable": "Activar enlace público",
"share_copied": "¡Enlace copiado!", "share_copied": "¡Enlace copiado!",
"share_copy_btn": "Copiar enlace", "share_copy_btn": "Copiar enlace",
"share_btn": "Compartir enlace",
"link_qr_hint": "Código QR para escanear con el smartphone", "link_qr_hint": "Código QR para escanear con el smartphone",
"link_qr_alt": "Código QR del enlace", "link_qr_alt": "Código QR del enlace",
"danger_zone_title": "Zona de peligro", "danger_zone_title": "Zona de peligro",
+1
View File
@@ -820,6 +820,7 @@
"share_enable": "Activer le lien public", "share_enable": "Activer le lien public",
"share_copied": "Lien copié !", "share_copied": "Lien copié !",
"share_copy_btn": "Copier le lien", "share_copy_btn": "Copier le lien",
"share_btn": "Partager le lien",
"link_qr_hint": "Code QR à scanner avec un smartphone", "link_qr_hint": "Code QR à scanner avec un smartphone",
"link_qr_alt": "Code QR pour le lien", "link_qr_alt": "Code QR pour le lien",
"danger_zone_title": "Zone dangereuse", "danger_zone_title": "Zone dangereuse",
+1
View File
@@ -820,6 +820,7 @@
"share_enable": "Aktiver offentlig lenke", "share_enable": "Aktiver offentlig lenke",
"share_copied": "Koblingen er kopiert!", "share_copied": "Koblingen er kopiert!",
"share_copy_btn": "Kopier lenken", "share_copy_btn": "Kopier lenken",
"share_btn": "Del lenke",
"link_qr_hint": "QR-kode som kan skannes med smarttelefonen", "link_qr_hint": "QR-kode som kan skannes med smarttelefonen",
"link_qr_alt": "QR-kode for lenken", "link_qr_alt": "QR-kode for lenken",
"danger_zone_title": "Fareområde", "danger_zone_title": "Fareområde",
+1
View File
@@ -820,6 +820,7 @@
"share_enable": "Aktivera offentlig länk", "share_enable": "Aktivera offentlig länk",
"share_copied": "Länken har kopierats!", "share_copied": "Länken har kopierats!",
"share_copy_btn": "Kopiera länken", "share_copy_btn": "Kopiera länken",
"share_btn": "Dela länk",
"link_qr_hint": "QR-kod att skanna med smarttelefonen", "link_qr_hint": "QR-kod att skanna med smarttelefonen",
"link_qr_alt": "QR-kod för länken", "link_qr_alt": "QR-kod för länken",
"danger_zone_title": "Farlig zon", "danger_zone_title": "Farlig zon",