'init'

2026-01-30 05:01:05 +02:00
commit 83f38dc63f
327 changed files with 18725 additions and 0 deletions
--- a/app/components/ActionAvatar/ActionAvatar.tsx
+++ b/app/components/ActionAvatar/ActionAvatar.tsx
@@ -0,0 +1,78 @@
+import { usePublicKey } from "@/app/providers/AccountProvider/usePublicKey";
+import { useAvatars } from "@/app/providers/AvatarProvider/useAvatars";
+import { useAvatarChange } from "@/app/providers/AvatarProvider/useChangeAvatar";
+import { useImageViewer } from "@/app/providers/ImageViewerProvider/useImageViewer";
+import { imagePrepareForNetworkTransfer } from "@/app/utils/utils";
+import { Avatar, Box, Flex, Overlay } from "@mantine/core";
+import { useFileDialog } from "@mantine/hooks";
+import { IconCamera } from "@tabler/icons-react";
+import { useState } from "react";
+
+interface ActionAvatarProps {
+    title: string;
+    publicKey: string;
+    forceChangeable?: boolean;
+}
+
+export function ActionAvatar(props : ActionAvatarProps) {
+    const [overlay, setOverlay] = useState(false);
+    const publicKey = usePublicKey();
+    const changeAvatar = useAvatarChange();
+    const avatars = useAvatars(props.publicKey, true);
+    const {open} = useImageViewer();
+
+    const fileDialog = useFileDialog({
+        multiple: false,
+        accept: 'image/*',
+        onChange: async (files) => {
+            if(!files){
+                return;
+            }
+            if(files.length == 0){
+                return;
+            }
+            const file = files[0];
+            const base64Image = await imagePrepareForNetworkTransfer(file);
+            changeAvatar(base64Image, props.publicKey);
+        }
+    });
+
+    const onClickAvatar = () => {
+        if(props.publicKey != publicKey && !props.forceChangeable){
+            open(avatars.map(a => ({src: a.avatar, timestamp: a.timestamp})), 0);
+            return;
+        }
+        fileDialog.open();
+    }
+
+    return (
+        <Flex align={'center'} justify={'center'}>
+            <Box
+            w={120} h={120}
+            onMouseEnter={() => setOverlay(true)}
+            onMouseLeave={() => setOverlay(false)} 
+            style={{
+                cursor: 'pointer'
+            }}
+            onClick={onClickAvatar}
+            pos={'relative'}>
+                <Avatar
+                    size={120}
+                    radius={120}
+                    mx="auto"
+                    name={props.title.trim() || props.publicKey}
+                    color={'initials'}
+                    src={avatars.length > 0 ? 
+                        avatars[0].avatar
+                        : undefined}
+                >
+                </Avatar>
+                {(overlay && (props.publicKey == publicKey || props.forceChangeable)) && <Overlay zIndex={99} radius={120}>
+                    <Flex align={'center'} justify={'center'} h={'100%'} gap={5} opacity={0.8}>
+                        <IconCamera stroke={2} color="white" size={40}></IconCamera>
+                    </Flex>
+                </Overlay>}
+            </Box>
+        </Flex>
+    );
+}