feat: explicit session addressing + toast queue + solid toast styling

Matthias Nott

2026-03-08 4c266155785aad5050ebff7211e3d5f9e15c3238

 components/ui/IncomingToast.tsx
..
..
@@ -13,22 +13,24 @@
13
13
 
14
14
 export function IncomingToast({ sessionName, preview, onTap, onDismiss }: IncomingToastProps) {
15
15
   const { colors } = useTheme();
16
-  const opacity = useRef(new Animated.Value(0)).current;
17
-  const translateY = useRef(new Animated.Value(-40)).current;
16
+  const translateY = useRef(new Animated.Value(-60)).current;
18
17
 
19
18
   useEffect(() => {
20
-    // Slide in
21
-    Animated.parallel([
22
-      Animated.timing(opacity, { toValue: 1, duration: 200, useNativeDriver: true }),
23
-      Animated.timing(translateY, { toValue: 0, duration: 200, useNativeDriver: true }),
24
-    ]).start();
19
+    // Slide in from above (no opacity — keeps background solid)
20
+    Animated.spring(translateY, {
21
+      toValue: 0,
22
+      useNativeDriver: true,
23
+      tension: 80,
24
+      friction: 10,
25
+    }).start();
25
26
 
26
27
     // Auto-dismiss
27
28
     const timer = setTimeout(() => {
28
-      Animated.parallel([
29
-        Animated.timing(opacity, { toValue: 0, duration: 200, useNativeDriver: true }),
30
-        Animated.timing(translateY, { toValue: -40, duration: 200, useNativeDriver: true }),
31
-      ]).start(() => onDismiss());
29
+      Animated.timing(translateY, {
30
+        toValue: -60,
31
+        duration: 200,
32
+        useNativeDriver: true,
33
+      }).start(() => onDismiss());
32
34
     }, DISPLAY_MS);
33
35
 
34
36
     return () => clearTimeout(timer);
..
..
@@ -38,11 +40,10 @@
38
40
     <Animated.View
39
41
       style={{
40
42
         position: "absolute",
41
-        top: 0,
43
+        top: 4,
42
44
         left: 12,
43
45
         right: 12,
44
46
         zIndex: 100,
45
-        opacity,
46
47
         transform: [{ translateY }],
47
48
       }}
48
49
     >
..
..
@@ -57,31 +58,31 @@
57
58
           borderRadius: 12,
58
59
           backgroundColor: pressed ? colors.bgTertiary : colors.bgSecondary,
59
60
           borderWidth: 1,
60
-          borderColor: colors.border,
61
+          borderColor: colors.accent,
61
62
           shadowColor: "#000",
62
-          shadowOffset: { width: 0, height: 2 },
63
-          shadowOpacity: 0.25,
64
-          shadowRadius: 4,
65
-          elevation: 5,
63
+          shadowOffset: { width: 0, height: 4 },
64
+          shadowOpacity: 0.4,
65
+          shadowRadius: 8,
66
+          elevation: 8,
66
67
         })}
67
68
       >
68
69
         <View
69
70
           style={{
70
-            width: 8,
71
-            height: 8,
72
-            borderRadius: 4,
73
-            backgroundColor: "#3b82f6",
71
+            width: 10,
72
+            height: 10,
73
+            borderRadius: 5,
74
+            backgroundColor: colors.accent,
74
75
           }}
75
76
         />
76
77
         <View style={{ flex: 1 }}>
77
-          <Text style={{ color: colors.text, fontSize: 13, fontWeight: "700" }} numberOfLines={1}>
78
+          <Text style={{ color: colors.text, fontSize: 14, fontWeight: "700" }} numberOfLines={1}>
78
79
             {sessionName}
79
80
           </Text>
80
-          <Text style={{ color: colors.textMuted, fontSize: 12, marginTop: 1 }} numberOfLines={1}>
81
+          <Text style={{ color: colors.textMuted, fontSize: 12, marginTop: 2 }} numberOfLines={1}>
81
82
             {preview}
82
83
           </Text>
83
84
         </View>
84
-        <Text style={{ color: colors.textMuted, fontSize: 11 }}>tap to switch</Text>
85
+        <Text style={{ color: colors.accent, fontSize: 11, fontWeight: "600" }}>switch</Text>
85
86
       </Pressable>
86
87
     </Animated.View>
87
88
   );