'init'

2026-01-30 05:01:05 +02:00
commit 83f38dc63f
327 changed files with 18725 additions and 0 deletions
--- a/app/components/DialogAttachment/AttachFile.tsx
+++ b/app/components/DialogAttachment/AttachFile.tsx
@@ -0,0 +1,85 @@
+import { Box, Flex, Text } from "@mantine/core";
+import { DialogAttachmentProps } from "./DialogAttachment";
+import { useRosettaColors } from "@/app/hooks/useRosettaColors";
+import { IconFile, IconFileTypeJpg, IconFileTypeJs, IconFileTypePng, IconFileTypeZip, IconX } from "@tabler/icons-react";
+import { dotCenterIfNeeded, humanFilesize } from "@/app/utils/utils";
+
+export function AttachFile(props : DialogAttachmentProps) {
+    const colors = useRosettaColors();
+    const filesize = parseInt(props.attach.preview.split("::")[0]);
+    const filename = props.attach.preview.split("::")[1];
+    const filetype = filename.split(".")[filename.split(".").length - 1];
+
+    const getIconByFiletype = (type : string) : React.ReactNode => {
+        type = type.trim().toLocaleLowerCase();
+        const iconAttributes = {
+            size: 23,
+            color: colors.chevrons.active
+        }
+        switch(type){
+            case 'js':
+                return <IconFileTypeJs {...iconAttributes}></IconFileTypeJs>
+            case 'jpeg':
+                return <IconFileTypeJpg {...iconAttributes}></IconFileTypeJpg>
+            case 'jpg':
+                return <IconFileTypeJpg {...iconAttributes}></IconFileTypeJpg>
+            case 'png':
+                return <IconFileTypePng {...iconAttributes}></IconFileTypePng>
+            case 'zip':
+                return <IconFileTypeZip {...iconAttributes}></IconFileTypeZip>
+            case '7z':
+                return <IconFileTypeZip {...iconAttributes}></IconFileTypeZip>
+            default:
+                return <IconFile {...iconAttributes}></IconFile>
+        }
+    }
+
+    const icon = getIconByFiletype(filetype);
+
+    return (
+        <Box style={{
+            minWidth: 100,
+            minHeight: 70,
+            position: 'relative',
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+            border: '1px solid ' + colors.borderColor,
+            borderRadius: 8,
+            backgroundColor: colors.boxColor,
+            flexDirection: 'row',
+            gap: 4
+        }}
+         key={props.attach.id}>
+            {icon}
+            <Flex direction={'column'} gap={4}>
+                <Text size={'xs'} c={colors.chevrons.active}>
+                    {dotCenterIfNeeded(filename, 10)}
+                </Text>                
+                <Text size={'xs'} c={colors.chevrons.active}>
+                    {humanFilesize(filesize)}
+                </Text>
+            </Flex>
+            
+            {props.onRemove && 
+                <Box bg={colors.brandColor} style={{
+                    position: 'absolute',
+                    top: -5,
+                    right: -5,
+                    borderRadius: '50%',
+                    cursor: 'pointer',
+                    height: 18,
+                    width: 18,
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                }}
+                onClick={() => {
+                    props.onRemove && props.onRemove(props.attach);
+                }}>
+                    <IconX size={13} stroke={2} color="white"></IconX>
+                </Box>
+            }
+        </Box>  
+    );
+}