From 4c266155785aad5050ebff7211e3d5f9e15c3238 Mon Sep 17 00:00:00 2001
From: Matthias Nott <mnott@mnsoft.org>
Date: Sun, 08 Mar 2026 07:37:45 +0100
Subject: [PATCH] feat: explicit session addressing + toast queue + solid toast styling
---
components/ui/IncomingToast.tsx | 51 ++++++++++++++++++++++++++-------------------------
1 files changed, 26 insertions(+), 25 deletions(-)
diff --git a/components/ui/IncomingToast.tsx b/components/ui/IncomingToast.tsx
index 779c82e..2c9fb23 100644
--- a/components/ui/IncomingToast.tsx
+++ b/components/ui/IncomingToast.tsx
@@ -13,22 +13,24 @@
export function IncomingToast({ sessionName, preview, onTap, onDismiss }: IncomingToastProps) {
const { colors } = useTheme();
- const opacity = useRef(new Animated.Value(0)).current;
- const translateY = useRef(new Animated.Value(-40)).current;
+ const translateY = useRef(new Animated.Value(-60)).current;
useEffect(() => {
- // Slide in
- Animated.parallel([
- Animated.timing(opacity, { toValue: 1, duration: 200, useNativeDriver: true }),
- Animated.timing(translateY, { toValue: 0, duration: 200, useNativeDriver: true }),
- ]).start();
+ // Slide in from above (no opacity — keeps background solid)
+ Animated.spring(translateY, {
+ toValue: 0,
+ useNativeDriver: true,
+ tension: 80,
+ friction: 10,
+ }).start();
// Auto-dismiss
const timer = setTimeout(() => {
- Animated.parallel([
- Animated.timing(opacity, { toValue: 0, duration: 200, useNativeDriver: true }),
- Animated.timing(translateY, { toValue: -40, duration: 200, useNativeDriver: true }),
- ]).start(() => onDismiss());
+ Animated.timing(translateY, {
+ toValue: -60,
+ duration: 200,
+ useNativeDriver: true,
+ }).start(() => onDismiss());
}, DISPLAY_MS);
return () => clearTimeout(timer);
@@ -38,11 +40,10 @@
<Animated.View
style={{
position: "absolute",
- top: 0,
+ top: 4,
left: 12,
right: 12,
zIndex: 100,
- opacity,
transform: [{ translateY }],
}}
>
@@ -57,31 +58,31 @@
borderRadius: 12,
backgroundColor: pressed ? colors.bgTertiary : colors.bgSecondary,
borderWidth: 1,
- borderColor: colors.border,
+ borderColor: colors.accent,
shadowColor: "#000",
- shadowOffset: { width: 0, height: 2 },
- shadowOpacity: 0.25,
- shadowRadius: 4,
- elevation: 5,
+ shadowOffset: { width: 0, height: 4 },
+ shadowOpacity: 0.4,
+ shadowRadius: 8,
+ elevation: 8,
})}
>
<View
style={{
- width: 8,
- height: 8,
- borderRadius: 4,
- backgroundColor: "#3b82f6",
+ width: 10,
+ height: 10,
+ borderRadius: 5,
+ backgroundColor: colors.accent,
}}
/>
<View style={{ flex: 1 }}>
- <Text style={{ color: colors.text, fontSize: 13, fontWeight: "700" }} numberOfLines={1}>
+ <Text style={{ color: colors.text, fontSize: 14, fontWeight: "700" }} numberOfLines={1}>
{sessionName}
</Text>
- <Text style={{ color: colors.textMuted, fontSize: 12, marginTop: 1 }} numberOfLines={1}>
+ <Text style={{ color: colors.textMuted, fontSize: 12, marginTop: 2 }} numberOfLines={1}>
{preview}
</Text>
</View>
- <Text style={{ color: colors.textMuted, fontSize: 11 }}>tap to switch</Text>
+ <Text style={{ color: colors.accent, fontSize: 11, fontWeight: "600" }}>switch</Text>
</Pressable>
</Animated.View>
);
--
Gitblit v1.3.1