abstracted actor view, added beginning of profile editing

apps/amethyst/app/(tabs)/index.tsx

···
 import { Button } from "@/components/ui/button";
 import { Icon } from "@/lib/icons/iconWithClassName";
 import { Plus } from "lucide-react-native";
+import ActorView from "@/components/actor/actorView";
 
 const GITHUB_AVATAR_URI =
   "https://i.pinimg.com/originals/ef/a2/8d/efa28d18a04e7fa40ed49eeb0ab660db.jpg";
···
   }
 
   // TODO: replace with skeleton
-  if (!profile) {
+  if (!profile || !agent) {
     return (
       <View className="flex-1 justify-center items-center gap-5 p-6 bg-background">
         <ActivityIndicator size="large" />
···
           headerShown: false,
         }}
       />
-      {profile.bsky?.banner && (
-        <Image
-          className="w-full max-w-[100vh] h-32 md:h-44 scale-[1.32] rounded-xl -mb-6"
-          source={{ uri: profile.bsky?.banner ?? GITHUB_AVATAR_URI }}
-        />
-      )}
-      <View className="flex flex-col items-left justify-start text-left max-w-2xl w-screen gap-1 p-4 px-8">
-        <View className="flex flex-row justify-between items-center">
-          <View className="flex justify-between">
-            <Avatar alt="Rick Sanchez's Avatar" className="w-24 h-24">
-              <AvatarImage
-                source={{ uri: profile.bsky?.avatar ?? GITHUB_AVATAR_URI }}
-              />
-              <AvatarFallback>
-                <Text>{profile.bsky?.displayName?.substring(0, 1) ?? "R"}</Text>
-              </AvatarFallback>
-            </Avatar>
-            <CardTitle className="text-left flex w-full justify-between mt-2">
-              {profile.bsky?.displayName ?? " Richard"}
-            </CardTitle>
-          </View>
-          <View className="mt-8">
-            <Button
-              variant="outline"
-              size="sm"
-              className="text-white rounded-xl flex flex-row gap-2 justify-center items-center"
-            >
-              <Icon icon={Plus} size={18} />
-              <Text>Follow</Text>
-            </Button>
-          </View>
-        </View>
-        <View>
-          {profile
-            ? profile.bsky?.description?.split("\n").map((str, i) => (
-                <Text
-                  className="text-start self-start place-self-start"
-                  key={i}
-                >
-                  {str}
-                </Text>
-              )) || "A very mysterious person"
-            : "Loading..."}
-        </View>
-      </View>
-      <View className="max-w-2xl w-full gap-4 py-4 pl-8">
-        <Text className="text-left text-2xl border-b border-b-muted-foreground/30 -ml-2 pl-2 mr-6">
-          Your Stamps
-        </Text>
-        <ActorPlaysView repo={agent?.did} />
-      </View>
+      <ActorView actorDid={agent.did!} pdsAgent={agent} />
     </ScrollView>
   );
 }

apps/amethyst/components/actor/actorView.tsx

···
+import { ScrollView, View, Image } from "react-native";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { CardTitle } from "../../components/ui/card";
+import { Text } from "@/components/ui/text";
+import { useStore } from "@/stores/mainStore";
+
+import ActorPlaysView from "@/components/play/actorPlaysView";
+import { Button } from "@/components/ui/button";
+import { Icon } from "@/lib/icons/iconWithClassName";
+import { MoreHorizontal, Pen, Plus } from "lucide-react-native";
+import { Agent, AppBskyActorProfile } from "@atproto/api";
+import { useState, useEffect } from "react";
+import { AllProfileViews } from "@/stores/authenticationSlice";
+import EditProfileModal from "./editProfileView";
+
+const GITHUB_AVATAR_URI =
+  "https://i.pinimg.com/originals/ef/a2/8d/efa28d18a04e7fa40ed49eeb0ab660db.jpg";
+
+export interface ActorViewProps {
+  actorDid: string;
+  pdsAgent: Agent;
+}
+
+export default function ActorView({ actorDid, pdsAgent }: ActorViewProps) {
+  const [isEditing, setIsEditing] = useState(false);
+  const [profile, setProfile] = useState<AllProfileViews | null>(null);
+  const profileData = useStore((state) => state.profiles[actorDid]);
+
+  useEffect(() => {
+    if (profileData) {
+      setProfile(profileData);
+    }
+  }, [profileData]);
+
+  const isSelf = actorDid === pdsAgent.did;
+
+  const handleSave = (
+    updatedProfile: { displayName: any; description: any },
+    newAvatarUri: string,
+    newBannerUri: string,
+  ) => {
+    // Implement your save logic here (e.g., update your database or state)
+    console.log("Saving profile:", updatedProfile, newAvatarUri, newBannerUri);
+
+    // Update the local profile data
+    setProfile(
+      (prevProfile) =>
+        ({
+          ...prevProfile,
+          bsky: {
+            ...prevProfile?.bsky,
+            displayName: updatedProfile.displayName,
+            description: updatedProfile.description,
+            avatar: newAvatarUri,
+            banner: newBannerUri,
+          },
+        }) as AllProfileViews,
+    );
+
+    setIsEditing(false); // Close the modal after saving
+  };
+
+  if (!profile) {
+    return null;
+  }
+
+  return (
+    <>
+      {profile.bsky?.banner && (
+        <Image
+          className="w-full max-w-[100vh] h-32 md:h-44 scale-[1.32] rounded-xl -mb-6"
+          source={{ uri: profile.bsky?.banner ?? GITHUB_AVATAR_URI }}
+        />
+      )}
+      <View className="flex flex-col items-left justify-start text-left max-w-2xl w-screen gap-1 p-4 px-8">
+        <View className="flex flex-row justify-between items-center">
+          <View className="flex justify-between">
+            <Avatar alt="Rick Sanchez's Avatar" className="w-24 h-24">
+              <AvatarImage
+                source={{ uri: profile.bsky?.avatar ?? GITHUB_AVATAR_URI }}
+              />
+              <AvatarFallback>
+                <Text>{profile.bsky?.displayName?.substring(0, 1) ?? "R"}</Text>
+              </AvatarFallback>
+            </Avatar>
+            <CardTitle className="text-left flex w-full justify-between mt-2">
+              {profile.bsky?.displayName ?? " Richard"}
+            </CardTitle>
+          </View>
+          <View className="mt-2 flex-row gap-2">
+            {isSelf ? (
+              <Button
+                variant="outline"
+                size="sm"
+                className="rounded-xl flex-row gap-2 justify-center items-center"
+                onPress={() => setIsEditing(true)}
+              >
+                <Icon icon={Pen} size={18} />
+                <Text>Edit</Text>
+              </Button>
+            ) : (
+              <Button variant="outline" size="sm" className="">
+                <Icon icon={Plus} size={18} />
+                <Text>Follow</Text>
+              </Button>
+            )}
+            <Button
+              variant="outline"
+              size="sm"
+              className="text-white aspect-square p-0 rounded-full flex flex-row gap-2 justify-center items-center"
+            >
+              <Icon icon={MoreHorizontal} size={18} />
+            </Button>
+          </View>
+        </View>
+        <View>
+          {profile
+            ? profile.bsky?.description?.split("\n").map((str, i) => (
+                <Text
+                  className="text-start self-start place-self-start"
+                  key={i}
+                >
+                  {str}
+                </Text>
+              )) || "A very mysterious person"
+            : "Loading..."}
+        </View>
+      </View>
+      <View className="max-w-2xl w-full gap-4 py-4 pl-8">
+        <Text className="text-left text-2xl border-b border-b-muted-foreground/30 -ml-2 pl-2 mr-6">
+          Your Stamps
+        </Text>
+        <ActorPlaysView repo={actorDid} />
+      </View>
+      {isSelf && (
+        <EditProfileModal
+          isVisible={isEditing}
+          onClose={() => setIsEditing(false)}
+          profile={profileData} // Pass the profile data
+          onSave={handleSave} // Pass the save handler
+        />
+      )}
+    </>
+  );
+}

apps/amethyst/components/actor/editProfileView.tsx

···
+import * as React from "react";
+import { useState } from "react";
+import {
+  Modal,
+  Pressable,
+  View,
+  Image,
+  ActivityIndicator,
+  Touchable,
+  TouchableWithoutFeedback,
+} from "react-native";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Text } from "@/components/ui/text";
+import { Button } from "@/components/ui/button";
+import * as ImagePicker from "expo-image-picker";
+import { Card } from "../ui/card";
+import { Input } from "../ui/input";
+import { Textarea } from "../ui/textarea";
+import { cn } from "@/lib/utils";
+import { useOnEscape } from "@/hooks/useOnEscape";
+
+const GITHUB_AVATAR_URI =
+  "https://i.pinimg.com/originals/ef/a2/8d/efa28d18a04e7fa40ed49eeb0ab660db.jpg";
+
+export interface EditProfileModalProps {
+  isVisible: boolean;
+  onClose: () => void;
+  profile: any; // Pass the profile data as a prop
+  onSave: (profile: any, avatarUri: string, bannerUri: string) => void; // Pass the onSave callback function
+}
+
+export default function EditProfileModal({
+  isVisible,
+  onClose,
+  profile, // Pass the profile data as a prop
+  onSave, // Pass the onSave callback function
+}: EditProfileModalProps) {
+  const [editedProfile, setEditedProfile] = useState({ ...profile?.bsky });
+  const [avatarUri, setAvatarUri] = useState(profile?.bsky?.avatar);
+  const [bannerUri, setBannerUri] = useState(profile?.bsky?.banner);
+  const [loading, setLoading] = useState(false);
+
+  const pickImage = async (
+    setType: typeof setAvatarUri | typeof setBannerUri,
+  ) => {
+    setLoading(true); // Start loading
+
+    let result = await ImagePicker.launchImageLibraryAsync({
+      mediaTypes: ["images"],
+      allowsEditing: true,
+      aspect: setType === setAvatarUri ? [1, 1] : [3, 1],
+      quality: 1,
+    });
+
+    if (!result.canceled) {
+      setType(result.assets[0].uri);
+    }
+
+    setLoading(false); // Stop loading
+  };
+
+  const handleSave = () => {
+    onSave(editedProfile, avatarUri, bannerUri); // Call the onSave callback with updated data
+    onClose();
+  };
+
+  useOnEscape(onClose);
+
+  if (!profile) {
+    return (
+      <View className="flex-1 justify-center items-center gap-5 p-6 bg-background">
+        <ActivityIndicator size="large" />
+      </View>
+    );
+  }
+
+  return (
+    <Modal animationType="fade" transparent={true} visible={isVisible}>
+      <TouchableWithoutFeedback onPress={() => onClose()}>
+        <View className="flex-1 justify-center items-center bg-black/50 backdrop-blur">
+          <TouchableWithoutFeedback>
+            <Card className="bg-card rounded-lg p-4 w-11/12 max-w-md">
+              <Text className="text-xl font-bold mb-4">Edit Profile</Text>
+              <Pressable onPress={() => pickImage(setBannerUri)}>
+                {loading && !bannerUri && <ActivityIndicator />}
+                {bannerUri && (
+                  <Image
+                    source={{ uri: bannerUri }}
+                    className="w-full h-24 rounded-lg"
+                  />
+                )}
+              </Pressable>
+
+              <Pressable
+                onPress={() => pickImage(setAvatarUri)}
+                className={cn("mb-4", bannerUri && "pl-4 -mt-8")}
+              >
+                {loading && !avatarUri && <ActivityIndicator />}
+                <Avatar
+                  className="w-20 h-20"
+                  alt={`Avatar for ${editedProfile?.displayName ?? "User"}`}
+                >
+                  <AvatarImage
+                    source={{ uri: avatarUri || GITHUB_AVATAR_URI }}
+                  />
+                  <AvatarFallback>
+                    <Text>
+                      {editedProfile?.displayName?.substring(0, 1) ?? "R"}
+                    </Text>
+                  </AvatarFallback>
+                </Avatar>
+              </Pressable>
+
+              <Text className="text-sm font-semibold text-muted-foreground pl-1">
+                Display Name
+              </Text>
+              <Input
+                className="border border-gray-300 rounded px-3 py-2 mb-4"
+                placeholder="Display Name"
+                value={editedProfile.displayName}
+                onChangeText={(text) =>
+                  setEditedProfile({ ...editedProfile, displayName: text })
+                }
+              />
+              <Text className="text-sm font-semibold text-muted-foreground pl-1">
+                Description
+              </Text>
+              <Textarea
+                className="border border-gray-300 rounded px-3 py-2 mb-4"
+                placeholder="Description"
+                multiline
+                value={editedProfile.description}
+                onChangeText={(text) =>
+                  setEditedProfile({ ...editedProfile, description: text })
+                }
+              />
+              <View className="flex-row justify-between">
+                <Button variant="outline" onPress={onClose}>
+                  <Text>Cancel</Text>
+                </Button>
+                <Button onPress={handleSave}>
+                  <Text>Save</Text>
+                </Button>
+              </View>
+            </Card>
+          </TouchableWithoutFeedback>
+        </View>
+      </TouchableWithoutFeedback>
+    </Modal>
+  );
+}

apps/amethyst/components/ui/textarea.tsx

···
+import * as React from 'react';
+import { TextInput, type TextInputProps } from 'react-native';
+import { cn } from '~/lib/utils';
+
+const Textarea = React.forwardRef<React.ElementRef<typeof TextInput>, TextInputProps>(
+  ({ className, multiline = true, numberOfLines = 4, placeholderClassName, ...props }, ref) => {
+    return (
+      <TextInput
+        ref={ref}
+        className={cn(
+          'web:flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-base lg:text-sm native:text-lg native:leading-[1.25] text-foreground web:ring-offset-background placeholder:text-muted-foreground web:focus-visible:outline-none web:focus-visible:ring-2 web:focus-visible:ring-ring web:focus-visible:ring-offset-2',
+          props.editable === false && 'opacity-50 web:cursor-not-allowed',
+          className
+        )}
+        placeholderClassName={cn('text-muted-foreground', placeholderClassName)}
+        multiline={multiline}
+        numberOfLines={numberOfLines}
+        textAlignVertical='top'
+        {...props}
+      />
+    );
+  }
+);
+
+Textarea.displayName = 'Textarea';
+
+export { Textarea };

apps/amethyst/hooks/useOnEscape.tsx

···
+import { useEffect } from "react";
+
+export const useOnEscape = (callback: () => void) => {
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === "Escape") {
+        callback();
+      }
+    };
+
+    document.addEventListener("keydown", handleKeyDown);
+
+    return () => {
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [callback]);
+};