{#if message.imageUrl}
{/if}
{#if decay}
-
+ {#if isLastChance}
+
+
+ {:else}
+
+ {/if}
{/if}
+
+ {#if showLastChancePrompt}
+
+
{/if}
@@ -81,7 +166,12 @@
right: 0;
background: white;
border-radius: 20px 20px 0 0;
- padding: 1rem 1.5rem 2rem;
+ /* extra 64px of bottom padding = the height of .bottom-nav in
+ +page.svelte (z-index 200, above this sheet's 100), which sits on
+ top of the sheet's bottom edge and was covering the Echo/Let go
+ buttons. pushing the buttons up by that much keeps them clear of
+ the nav bar instead of hidden behind it. */
+ padding: 1rem 1.5rem calc(2rem + 64px);
/* flat 2D style for now - shadow removed, paper-style shadows may be added later */
transform: translateY(100%);
transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1);
@@ -121,6 +211,58 @@
margin-bottom: 1.2rem;
}
+ /* "last chance" treatment - a soft warm peach tint + border, distinct
+ from the normal white card but staying within the existing pastel/
+ parchment palette. A faint glow (box-shadow) adds a touch of warmth
+ without being a jarring "alert" color like red. */
+ .content.last-chance {
+ background: #fff6ea;
+ border: 1px solid #f3dcb8;
+ border-radius: 14px;
+ padding: 0.9rem;
+ margin: -0.25rem -0.25rem 0;
+ box-shadow: 0 0 0 4px rgba(243, 184, 92, 0.08);
+ }
+
+ /* replaces the normal "fading in X days" meta line when isLastChance */
+ .last-chance-text {
+ color: #b08a5a;
+ font-weight: 500;
+ }
+
+ /* one-time prompt shown above the action buttons - same warm palette as
+ .content.last-chance, slightly more saturated so it reads as the
+ "active" element within the card */
+ .last-chance-prompt {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ gap: 0.5rem;
+ background: #fdf0db;
+ border: 1px solid #f3dcb8;
+ border-radius: 10px;
+ padding: 0.6rem 0.75rem;
+ margin-bottom: 0.9rem;
+ font-size: 0.8rem;
+ color: #9c7240;
+ line-height: 1.5;
+ }
+
+ .last-chance-prompt p {
+ margin: 0;
+ }
+
+ .dismiss-prompt {
+ background: none;
+ border: none;
+ color: #c4a37a;
+ font-size: 1rem;
+ line-height: 1;
+ cursor: pointer;
+ padding: 0;
+ flex-shrink: 0;
+ }
+
.actions {
display: flex;
gap: 0.75rem;
diff --git a/src/lib/components/ComposeSheet.svelte b/src/lib/components/ComposeSheet.svelte
index b531846..b08d4c9 100644
--- a/src/lib/components/ComposeSheet.svelte
+++ b/src/lib/components/ComposeSheet.svelte
@@ -1,6 +1,7 @@
+
+
+{#if $globalCount !== null}
+
+{/if}
+
+
diff --git a/src/lib/components/MapView.Svelte b/src/lib/components/MapView.Svelte
index b0b3245..94e981c 100644
--- a/src/lib/components/MapView.Svelte
+++ b/src/lib/components/MapView.Svelte
@@ -1,36 +1,109 @@
-
+
+
+ {/if}
+
if this one means something, an echo will keep it here a little longer.
+ +
-
-
+
+
+
+
+
+
+ {#if firstHereMounted}
+
+ {/if}
+
+
+ {#if sensingMode && arrowRotation !== null && !$mapStore.selectedMessage}
+
+ {/if}
+
\ No newline at end of file
diff --git a/src/lib/components/SensingToggle.svelte b/src/lib/components/SensingToggle.svelte
new file mode 100644
index 0000000..b7f56cf
--- /dev/null
+++ b/src/lib/components/SensingToggle.svelte
@@ -0,0 +1,63 @@
+
+
+
+
+
+
diff --git a/src/lib/components/SharePopover.svelte b/src/lib/components/SharePopover.svelte
new file mode 100644
index 0000000..5627a8f
--- /dev/null
+++ b/src/lib/components/SharePopover.svelte
@@ -0,0 +1,230 @@
+
+
+
+
+
+{#if open}
+
+
+
+
+
+
+{/if}
+
+
diff --git a/src/lib/components/SidePanel.svelte b/src/lib/components/SidePanel.svelte
index 21bfbe1..9772c33 100644
--- a/src/lib/components/SidePanel.svelte
+++ b/src/lib/components/SidePanel.svelte
@@ -9,6 +9,15 @@
import { getDecayInfo } from '$lib/utils/time.js';
import { echoMessage } from '$lib/firebase/messages.js';
import { playEchoTone } from '$lib/utils/sound.js';
+ import { getPresenceText } from '$lib/utils/presence.js';
+ import SharePopover from '$lib/components/SharePopover.svelte';
+ import {
+ incrementRead,
+ incrementEchoed,
+ incrementLetGo,
+ hasSeenLastChancePrompt,
+ markLastChancePromptSeen
+ } from '$lib/utils/stats.js';
// currently-selected message; when set, the detail view is shown instead of the list
let { message } = $props();
@@ -18,6 +27,53 @@
message ? getDecayInfo(message.createdAt, message.lastEchoAt) : null
);
+ // --- "last chance" state -------------------------------------------------
+ // A message is on its genuinely LAST day if it has 1 (or 0) days left AND
+ // isn't already expired/faded - daysLeft <= 1 && !isExpired. getDecayInfo()
+ // derives daysLeft from lastEchoAt, so a message that was recently echoed
+ // already has a much higher daysLeft and won't trigger this - "hasn't been
+ // echoed recently enough to have more time" is automatically satisfied
+ // whenever this condition is true.
+ let isLastChance = $derived(
+ decay ? (decay.daysLeft <= 1 && !decay.isExpired) : false
+ );
+
+ // one-time "last chance" prompt for the currently-open message
+ let showLastChancePrompt = $state(false);
+
+ // tracks which message was open last time this effect ran, so the
+ // read-count + prompt logic below only fires once per "open" (not on
+ // every reactive re-run while the same message stays selected)
+ let previousMessageId = null;
+
+ $effect(() => {
+ const currentId = message?.id ?? null;
+
+ if (currentId && currentId !== previousMessageId) {
+ // --- engagement stat: a detail view was just opened -----------------
+ incrementRead();
+
+ // --- one-time "last chance" prompt -----------------------------------
+ // only show it if this message is CURRENTLY in its last-chance state
+ // AND this device hasn't already seen the prompt for this message ID.
+ // Marking it seen immediately (rather than waiting for an explicit
+ // dismiss) means it won't reappear even if the user navigates away
+ // without closing it.
+ if (isLastChance && !hasSeenLastChancePrompt(currentId)) {
+ showLastChancePrompt = true;
+ markLastChancePromptSeen(currentId);
+ } else {
+ showLastChancePrompt = false;
+ }
+ }
+
+ if (!currentId) {
+ showLastChancePrompt = false; // closed - reset for the next open
+ }
+
+ previousMessageId = currentId;
+ });
+
// only show the 3 most recent nearby messages, so the list view fits
// without scrolling and the hint card stays visible underneath it
let topMessages = $derived(
@@ -26,6 +82,11 @@
.slice(0, 3)
);
+ // ambient presence indicator ("X people have been here today"), recomputed
+ // whenever the nearby-messages store updates (i.e. whenever
+ // getNearbyMessages refreshes the data)
+ let presenceText = $derived(getPresenceText($messagesStore));
+
// back to the list view
function close() {
mapStore.set({ selectedMessage: null, composing: false });
@@ -33,10 +94,20 @@
async function handleEcho() {
await echoMessage(message.id);
+ // engagement stat: Echo pressed
+ incrementEchoed();
// gentle ascending "thank you" tone confirming the echo went through
playEchoTone();
close(); // back to the list once echoed
}
+
+ // close()'s behavior is unchanged (back to the list) - this only adds the
+ // engagement-stat increment and prompt dismissal alongside it
+ function handleLetGo() {
+ incrementLetGo();
+ showLastChancePrompt = false;
+ close();
+ }
+
+
+
+
+ {#if qrDataUrl}
+ 
+ {/if}
+
+
+
+
@@ -44,29 +115,50 @@
- {#if message.imageUrl}
-
- {/if}
+
@@ -115,6 +207,13 @@
+
+
+
+ Your archive
+
{/if}
+ {#if message.imageUrl}
+
+ {/if}
-
+
- {#if decay}
-
- {/if}
+ {#if decay}
+ {#if isLastChance}
+
+
+ {:else}
+
+ {/if}
+ {/if}
+
+ {#if showLastChancePrompt}
+
+
+
+ {/if}
+ if this one means something, an echo will keep it here a little longer.
+ +
-
{:else}
Overheard: Shared Secrets
-Messages near you
+ +{presenceText}
@@ -115,6 +207,13 @@
Messages appear as you explore
Tap the confetti on the map to read them