From b69fd23456485d22c24b51da833d2707c718d61e Mon Sep 17 00:00:00 2001
From: Eric Bailey <git@esb.lol>
Date: Mon, 16 Sep 2024 16:52:28 -0500
Subject: Milly tweaks (#5365)

Co-authored-by: Hailey <me@haileyok.com>
---
 src/view/com/home/HomeHeaderLayoutMobile.tsx | 67 +++++++++++++++++++++++++---
 1 file changed, 62 insertions(+), 5 deletions(-)

(limited to 'src/view/com/home/HomeHeaderLayoutMobile.tsx')

diff --git a/src/view/com/home/HomeHeaderLayoutMobile.tsx b/src/view/com/home/HomeHeaderLayoutMobile.tsx
index e537abfaa..4817757b5 100644
--- a/src/view/com/home/HomeHeaderLayoutMobile.tsx
+++ b/src/view/com/home/HomeHeaderLayoutMobile.tsx
@@ -1,6 +1,15 @@
 import React from 'react'
 import {StyleSheet, TouchableOpacity, View} from 'react-native'
-import Animated from 'react-native-reanimated'
+import Animated, {
+  useAnimatedStyle,
+  useReducedMotion,
+  useSharedValue,
+  withDelay,
+  withRepeat,
+  withSequence,
+  withSpring,
+  withTiming,
+} from 'react-native-reanimated'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
@@ -11,10 +20,11 @@ import {HITSLOP_10} from 'lib/constants'
 import {useMinimalShellHeaderTransform} from 'lib/hooks/useMinimalShellTransform'
 import {usePalette} from 'lib/hooks/usePalette'
 import {isWeb} from 'platform/detection'
-import {Logo} from '#/view/icons/Logo'
+// import {Logo} from '#/view/icons/Logo'
 import {atoms} from '#/alf'
 import {useTheme} from '#/alf'
 import {atoms as a} from '#/alf'
+import {Icon, Trigger} from '#/components/dialogs/nuxs/TenMillion/Trigger'
 import {ColorPalette_Stroke2_Corner0_Rounded as ColorPalette} from '#/components/icons/ColorPalette'
 import {Hashtag_Stroke2_Corner0_Rounded as FeedsIcon} from '#/components/icons/Hashtag'
 import {Menu_Stroke2_Corner0_Rounded as Menu} from '#/components/icons/Menu'
@@ -39,6 +49,43 @@ export function HomeHeaderLayoutMobile({
     setDrawerOpen(true)
   }, [setDrawerOpen])
 
+  // TEMPORARY - REMOVE AFTER MILLY
+  // This will just cause the icon to shake a bit when the user first opens the app, drawing attention to the celebration
+  // 🎉
+  const rotate = useSharedValue(0)
+  const reducedMotion = useReducedMotion()
+
+  // Run this a single time on app mount.
+  React.useEffect(() => {
+    if (reducedMotion) return
+
+    // Waits 1500ms, then rotates 10 degrees with a spring animation. Repeats once.
+    rotate.value = withDelay(
+      1000,
+      withRepeat(
+        withSequence(
+          withTiming(10, {duration: 100}),
+          withSpring(0, {
+            mass: 1,
+            damping: 1,
+            stiffness: 200,
+            overshootClamping: false,
+          }),
+        ),
+        2,
+        false,
+      ),
+    )
+  }, [rotate, reducedMotion])
+
+  const animatedStyle = useAnimatedStyle(() => ({
+    transform: [
+      {
+        rotateZ: `${rotate.value}deg`,
+      },
+    ],
+  }))
+
   return (
     <Animated.View
       style={[pal.view, pal.border, styles.tabBar, headerMinimalShellTransform]}
@@ -59,9 +106,19 @@ export function HomeHeaderLayoutMobile({
             <Menu size="lg" fill={t.atoms.text_contrast_medium.color} />
           </TouchableOpacity>
         </View>
-        <View>
-          <Logo width={30} />
-        </View>
+        <Animated.View style={animatedStyle}>
+          <Trigger>
+            {ctx => (
+              <Icon
+                width={28}
+                style={{
+                  opacity: ctx.pressed ? 0.8 : 1,
+                }}
+              />
+            )}
+          </Trigger>
+          {/* <Logo width={30} /> */}
+        </Animated.View>
         <View
           style={[
             atoms.flex_row,
-- 
cgit 1.4.1