b543c8a930
- Replaced all active FontAwesome <span class="fas fa-*"> icons with
Lucide components across 145 files (excluding /idaa/ which is intentional)
- Fixed merge script bug: consolidated lucide-svelte imports into @lucide/svelte
- Replaced dynamic toggle patterns (fa-toggle-on/off) with ToggleRight/ToggleLeft
- Replaced fa-eye/fa-eye-slash with Eye/EyeOff
- Replaced fa-bug/fa-bug-slash with Bug/BugOff
- Replaced fa-sync fa-spin with RefreshCw + animate-spin
- Replaced fa-microchip with Cpu
- Fixed {@const} placement in element_manage_event_file_li.svelte
- Removed obsolete CSS hover rules for .unlock_icon/.lock_icon
- svelte-check: 0 errors, 0 warnings
94 lines
4.0 KiB
Svelte
94 lines
4.0 KiB
Svelte
<script lang="ts">
|
|
/**
|
|
* src/lib/elements/element_pwa_install_prompt.svelte
|
|
*
|
|
* Reusable PWA install nudge. Drop this anywhere in the app to surface
|
|
* a platform-aware "Add to Home Screen" prompt.
|
|
*
|
|
* - Chrome / Android / Desktop Chrome: shows a button that triggers the
|
|
* native browser install flow (via the captured beforeinstallprompt event).
|
|
* - iOS Safari: shows manual step-by-step "Share → Add to Home Screen" instructions
|
|
* since iOS does not support the beforeinstallprompt API.
|
|
* - Already installed (standalone mode) or dismissed: renders nothing.
|
|
*
|
|
* The pwa_install singleton must be initialised first (done in root +layout.svelte).
|
|
*/
|
|
import { Download, Plus, Share2, Smartphone, X } from '@lucide/svelte';
|
|
import { pwa_install } from '$lib/pwa/pwa_install.svelte';
|
|
|
|
interface Props {
|
|
class?: string;
|
|
}
|
|
let { class: extra_class = '' }: Props = $props();
|
|
</script>
|
|
|
|
{#if pwa_install.should_show}
|
|
<div
|
|
class="relative w-full rounded-2xl overflow-hidden
|
|
border border-primary-500/25
|
|
bg-primary-500/8 dark:bg-primary-500/12
|
|
{extra_class}"
|
|
>
|
|
<!-- Dismiss button -->
|
|
<button
|
|
class="absolute top-2 right-2 p-2 rounded-lg
|
|
opacity-40 hover:opacity-90
|
|
hover:bg-surface-500/10
|
|
transition-opacity"
|
|
onclick={() => pwa_install.dismiss()}
|
|
aria-label="Dismiss install prompt"
|
|
>
|
|
<X size="1rem" />
|
|
</button>
|
|
|
|
<div class="p-4 pr-10 space-y-3">
|
|
<!-- Header row: icon + text -->
|
|
<div class="flex items-center gap-3">
|
|
<div class="shrink-0 p-2.5 rounded-xl bg-primary-500/15 text-primary-500">
|
|
<Smartphone size="1.35em" />
|
|
</div>
|
|
<div>
|
|
<p class="font-bold text-sm leading-tight">Install Aether Leads</p>
|
|
<p class="text-xs opacity-55 leading-snug mt-0.5">
|
|
Add to your home screen for the best mobile experience
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
{#if pwa_install.can_prompt}
|
|
<!-- Chrome / Android / Desktop Chrome — native one-tap install -->
|
|
<button
|
|
class="btn preset-filled-primary w-full"
|
|
onclick={() => pwa_install.prompt()}
|
|
>
|
|
<Download size="1em" />
|
|
<span>Add to Home Screen</span>
|
|
</button>
|
|
{:else}
|
|
<!-- iOS Safari — manual instructions (no API available) -->
|
|
<ol class="space-y-2 text-sm">
|
|
<li class="flex items-center gap-2.5">
|
|
<span class="shrink-0 flex items-center justify-center w-5 h-5 rounded-full
|
|
bg-primary-500/20 text-primary-600 dark:text-primary-300
|
|
text-[10px] font-bold leading-none">1</span>
|
|
<span class="opacity-75">
|
|
Tap the
|
|
<Share2 size="0.85em" class="inline align-middle mx-0.5 text-primary-500" />
|
|
<strong>Share</strong> button in Safari
|
|
</span>
|
|
</li>
|
|
<li class="flex items-center gap-2.5">
|
|
<span class="shrink-0 flex items-center justify-center w-5 h-5 rounded-full
|
|
bg-primary-500/20 text-primary-600 dark:text-primary-300
|
|
text-[10px] font-bold leading-none">2</span>
|
|
<span class="opacity-75">
|
|
Tap <strong>Add to Home Screen</strong>
|
|
<Plus size="0.85em" class="inline align-middle mx-0.5 text-primary-500" />
|
|
</span>
|
|
</li>
|
|
</ol>
|
|
{/if}
|
|
</div>
|
|
</div>
|
|
{/if}
|