stage 2: skeleton with navigation

2026-04-29 11:05:21 -07:00
parent 06918f033d
commit cd1837c5f1
16 changed files with 1191 additions and 422 deletions
@@ -0,0 +1,166 @@
+import { useEffect, useRef } from "react";
+import {
+  Animated,
+  Dimensions,
+  Easing,
+  Modal,
+  Pressable,
+  Text,
+  View,
+} from "react-native";
+import { SafeAreaView } from "react-native-safe-area-context";
+import { useAuthStore } from "@/stores/auth-store";
+
+const SCREEN_WIDTH = Dimensions.get("window").width;
+const DRAWER_WIDTH = Math.min(320, Math.round(SCREEN_WIDTH * 0.82));
+const ANIM_MS = 220;
+
+interface DrawerProps {
+  open: boolean;
+  onClose: () => void;
+  onNavigateAccount: () => void;
+  onNavigateSettings: () => void;
+}
+
+export function Drawer({
+  open,
+  onClose,
+  onNavigateAccount,
+  onNavigateSettings,
+}: DrawerProps) {
+  const translateX = useRef(new Animated.Value(-DRAWER_WIDTH)).current;
+  const backdropOpacity = useRef(new Animated.Value(0)).current;
+
+  useEffect(() => {
+    Animated.parallel([
+      Animated.timing(translateX, {
+        toValue: open ? 0 : -DRAWER_WIDTH,
+        duration: ANIM_MS,
+        easing: Easing.out(Easing.cubic),
+        useNativeDriver: true,
+      }),
+      Animated.timing(backdropOpacity, {
+        toValue: open ? 0.4 : 0,
+        duration: ANIM_MS,
+        easing: Easing.out(Easing.cubic),
+        useNativeDriver: true,
+      }),
+    ]).start();
+  }, [open, translateX, backdropOpacity]);
+
+  const user = useAuthStore((s) => s.user);
+  const signOut = useAuthStore((s) => s.signOut);
+  const isSigningOut = useAuthStore((s) => s.isSigningOut);
+
+  const initials = user?.email_prefix.slice(0, 2).toUpperCase() ?? "??";
+
+  return (
+    <Modal
+      visible={open}
+      transparent
+      animationType="none"
+      onRequestClose={onClose}
+      statusBarTranslucent
+    >
+      <View className="flex-1">
+        <Animated.View
+          pointerEvents={open ? "auto" : "none"}
+          style={{ opacity: backdropOpacity }}
+          className="absolute inset-0 bg-black"
+        >
+          <Pressable className="flex-1" onPress={onClose} />
+        </Animated.View>
+
+        <Animated.View
+          style={{
+            width: DRAWER_WIDTH,
+            transform: [{ translateX }],
+          }}
+          className="absolute left-0 top-0 bottom-0 bg-sidebar"
+        >
+          <SafeAreaView edges={["top", "bottom", "left"]} className="flex-1">
+            <View className="border-sidebar-border border-b px-5 py-5 flex-row items-center gap-3">
+              <View className="bg-sidebar-accent h-10 w-10 items-center justify-center rounded-full">
+                <Text className="text-sidebar-accent-foreground text-sm font-semibold">
+                  {initials}
+                </Text>
+              </View>
+              <View className="flex-1">
+                <Text
+                  className="text-sidebar-foreground text-base font-medium"
+                  numberOfLines={1}
+                >
+                  {user?.email_prefix ?? ""}
+                </Text>
+                <Text
+                  className="text-muted-foreground text-xs"
+                  numberOfLines={1}
+                >
+                  {user?.email ?? ""}
+                </Text>
+              </View>
+            </View>
+
+            <View className="flex-1 py-2">
+              <DrawerRow
+                label="Account"
+                onPress={() => {
+                  onClose();
+                  onNavigateAccount();
+                }}
+              />
+              <DrawerRow
+                label="Settings"
+                onPress={() => {
+                  onClose();
+                  onNavigateSettings();
+                }}
+              />
+            </View>
+
+            <View className="border-sidebar-border border-t px-2 py-2">
+              <DrawerRow
+                label={isSigningOut ? "Signing out..." : "Sign out"}
+                disabled={isSigningOut}
+                onPress={() => {
+                  void signOut();
+                }}
+                tone="destructive"
+              />
+            </View>
+          </SafeAreaView>
+        </Animated.View>
+      </View>
+    </Modal>
+  );
+}
+
+function DrawerRow({
+  label,
+  onPress,
+  disabled,
+  tone = "default",
+}: {
+  label: string;
+  onPress: () => void;
+  disabled?: boolean;
+  tone?: "default" | "destructive";
+}) {
+  return (
+    <Pressable
+      onPress={onPress}
+      disabled={disabled}
+      className="px-5 py-3 active:bg-sidebar-accent"
+    >
+      <Text
+        className={`text-base font-medium ${
+          tone === "destructive"
+            ? "text-destructive"
+            : "text-sidebar-foreground"
+        } ${disabled ? "opacity-50" : ""}`}
+      >
+        {label}
+      </Text>
+    </Pressable>
+  );
+}