Files
archy/packages/app/src/composables/useWebShare.ts
T
DorianandClaude Opus 4.6 6be4fbe081 feat(mobile): mobile UX polish with bottom sheet, haptics, gestures, PWA (M16.1-M16.10)
- BottomSheet.vue: gesture-driven with 40/80/100% snap points, backdrop
- Swipe navigation: left/right to switch conversations, 80px threshold
- Pull-to-refresh: custom glass spinner, haptic on release
- Haptic feedback: useHaptics() composable with pattern presets
- Web Share API: native share with glass fallback sheet
- Pinch-to-zoom: usePinchZoom() composable, 1x-4x, double-tap reset
- iOS PWA: safe area insets CSS utilities, black-translucent status bar
- Long-press context menus: 500ms trigger via bottom sheet
- Scroll position memory: per-route Map, auto-restore on mount
- Landscape mode: CSS split layout, orientation change detection

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-04 00:55:19 +00:00

49 lines
1001 B
TypeScript

import { ref } from 'vue'
export function useWebShare() {
const isSupported = 'share' in navigator
const showFallback = ref(false)
const fallbackText = ref('')
const fallbackUrl = ref('')
async function share(data: { title?: string; text?: string; url?: string }) {
if (isSupported) {
try {
await navigator.share(data)
return true
} catch {
// User cancelled or not supported
}
}
// Fallback: show glass share sheet
fallbackText.value = data.text ?? data.title ?? ''
fallbackUrl.value = data.url ?? ''
showFallback.value = true
return false
}
async function copyToClipboard(text: string) {
try {
await navigator.clipboard.writeText(text)
return true
} catch {
return false
}
}
function closeFallback() {
showFallback.value = false
}
return {
isSupported,
showFallback,
fallbackText,
fallbackUrl,
share,
copyToClipboard,
closeFallback,
}
}