Implement file drag & drop

backend/routes/messaging.py

@@ -41,11 +41,9 @@ def convert_message(msg: Message) -> dict:
         "reply_to": convert_message(msg.reply_to) if msg.reply_to else None,
         "files": [
             {
-                "path": f"/api/files/{'encrypted' if f.encrypted else 'normal'}/{Path(f.path).name}",
+                "path": f"/api/uploads/files/normal/{Path(f.path).name}",
-                "encrypted": f.encrypted,
+                "id": f.id,
-                "filename": f.filename,
+                "message_id": f.message_id
-                "content_type": f.content_type,
-                "size": f.size,
             }
             for f in (msg.files or [])
         ]

frontend/src/resources/css/_chat.scss

@@ -65,6 +65,7 @@
             display: flex;
             flex-direction: column;
             height: 100%;
+            position: relative;
 
             .chat-header {
                 padding: 16px;
@@ -277,6 +278,46 @@
                 }
             }
 
+            .file-overlay {
+                position: absolute;
+                top: 0;
+                left: 0;
+                width: 100%;
+                height: 100%;
+                
+                background: rgba(0, 0, 0, 0.5);
+                
+                z-index: 100;
+                
+                backdrop-filter: blur(20px);
+
+                .file-overlay-wrapper {
+                    border-radius: 30px;
+                    outline: 3px dashed $color-dark-primary;
+                    outline-offset: -20px;
+                    height: 100%;
+                    width: 100%;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+
+                    .file-overlay-inner {
+                        display: flex;
+                        gap: 12px;
+                        align-items: center;
+                        padding: 12px 16px;
+                        background: rgba(18, 18, 18, 0.8);
+                        border: 1px solid $color-dark-surface-container-high;
+                        border-radius: 12px;
+                        color: $color-dark-on-surface;
+
+                        mdui-icon {
+                            color: $color-dark-primary;
+                        }
+                    }
+                }
+            }
+
             .chat-input-wrapper {
                 position: relative;
                 margin: 0 20px 20px 20px;

frontend/src/ui/components/chat/ChatInputWrapper.tsx

@@ -16,6 +16,7 @@ interface ChatInputWrapperProps {
     editVisible?: boolean;
     onClearEdit?: () => void;
     onCloseEdit?: () => void;
+    onProvideFileAdder?: (adder: (files: File[]) => void) => void;
 }
 
 export function ChatInputWrapper(
@@ -29,7 +30,8 @@ export function ChatInputWrapper(
         editingMessage, 
         editVisible = false, 
         onClearEdit, 
-        onCloseEdit 
+        onCloseEdit,
+        onProvideFileAdder
     }: ChatInputWrapperProps
 ) {
     const [message, setMessage] = useState("");
@@ -37,6 +39,18 @@ export function ChatInputWrapper(
     const [attachmentsVisible, setAttachmentsVisible] = useState(false);
     const [errorOpen, setErrorOpen] = useState(false);
 
+    // Expose a way for parent to programmatically add files
+    useEffect(() => {
+        if (onProvideFileAdder) {
+            const addFiles = (files: File[]) => {
+                if (!files || files.length === 0) return;
+                setSelectedFiles(prev => [...prev, ...files]);
+                setAttachmentsVisible(true);
+            };
+            onProvideFileAdder(addFiles);
+        }
+    }, [onProvideFileAdder]);
+
     // When entering edit mode, preload the message content
     useEffect(() => {
         if (editingMessage) {

frontend/src/ui/components/chat/MessagePanelRenderer.tsx

@@ -5,6 +5,7 @@ import { ChatInputWrapper } from "./ChatInputWrapper";
 import { setGlobalMessageHandler } from "../../../core/websocket";
 import type { Message } from "../../../core/types";
 import defaultAvatar from "../../../resources/images/default-avatar.png";
+import AnimatedOpacity from "../core/animations/AnimatedOpacity";
 
 interface MessagePanelRendererProps {
     panel: MessagePanel | null;
@@ -22,6 +23,20 @@ export function MessagePanelRenderer({ panel, isChatSwitching }: MessagePanelRen
     const [editVisible, setEditVisible] = useState(Boolean(editMessage));
     const [pendingAction, setPendingAction] = useState<null | { type: "reply" | "edit"; message: Message }>(null);
 
+    // Drag & drop
+    const [isDragging, setIsDragging] = useState(false);
+    const dragCounterRef = useRef(0);
+    const addFilesRef = useRef<null | ((files: File[]) => void)>(null);
+
+    useEffect(() => {
+        if (!panel || !panelState) return;
+
+        return () => {
+            dragCounterRef.current = 0;
+            setIsDragging(false);
+        };
+    }, [panel, panelState]);
+
     useEffect(() => {
         if (replyTo) {
             setReplyToVisible(true);
@@ -116,7 +131,41 @@ export function MessagePanelRenderer({ panel, isChatSwitching }: MessagePanelRen
 
     return (
         <div className={`chat-container ${switchIn ? "chat-switch-in" : ""} ${switchOut ? "chat-switch-out" : ""}`}>
-            <div className="chat-main" id="chat-inner">
+            <div 
+                className="chat-main" 
+                id="chat-inner"
+                onDragEnter={(e) => {
+                    if (!e.dataTransfer) return;
+                    e.preventDefault();
+                    e.stopPropagation();
+                    dragCounterRef.current += 1;
+                    // Only show overlay when actual files are dragged
+                    const hasFiles = Array.from(e.dataTransfer.types || []).includes("Files");
+                    if (hasFiles) setIsDragging(true);
+                }}
+                onDragOver={(e) => {
+                    if (!e.dataTransfer) return;
+                    e.preventDefault();
+                    e.stopPropagation();
+                    e.dataTransfer.dropEffect = "copy";
+                }}
+                onDragLeave={(e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    dragCounterRef.current = Math.max(0, dragCounterRef.current - 1);
+                    if (dragCounterRef.current === 0) setIsDragging(false);
+                }}
+                onDrop={(e) => {
+                    if (!e.dataTransfer) return;
+                    e.preventDefault();
+                    e.stopPropagation();
+                    const files = Array.from(e.dataTransfer.files || []);
+                    if (files.length > 0 && addFilesRef.current) {
+                        addFilesRef.current(files);
+                    }
+                    setIsDragging(false);
+                    dragCounterRef.current = 0;
+                }}>
                 <div className="chat-header">
                     <img 
                         src={panelState.profilePicture || defaultAvatar} 
@@ -175,6 +224,19 @@ export function MessagePanelRenderer({ panel, isChatSwitching }: MessagePanelRen
                         <div ref={messagesEndRef} />
                     </ChatMessages>
                 )}
+
+                <AnimatedOpacity 
+                    visible={isDragging} 
+                    className="file-overlay" 
+                    onDragOver={(e) => e.preventDefault()} 
+                    onDrop={(e) => e.preventDefault()}>
+                    <div className="file-overlay-wrapper">
+                        <div className="file-overlay-inner">
+                            <mdui-icon name="upload_file" />
+                            <span>Отпустите файл(ы) для добавления</span>
+                        </div>
+                    </div>
+                </AnimatedOpacity>
                 
                 <ChatInputWrapper 
                     onSendMessage={(text, files) => {
@@ -213,6 +275,7 @@ export function MessagePanelRenderer({ panel, isChatSwitching }: MessagePanelRen
                             setPendingAction(null);
                         }
                     }}
+                    onProvideFileAdder={(adder) => { addFilesRef.current = adder; }}
                 />
             </div>
         </div>

frontend/src/ui/components/core/animations/AnimatedHeight.tsx

@@ -1,17 +1,10 @@
-import { useEffect, useState, useRef, type ReactNode } from "react";
+import { useEffect, useState, useRef } from "react";
+import type { AnimatedPropertyProps } from "./types";
 
-export interface AnimatedHeightProps {
+export default function AnimatedHeight({ visible, duration = 0.25, onFinish, children, ...props }: AnimatedPropertyProps) {
-    visible: any;
-    duration?: number;
-    onFinish?: () => void
-    children?: ReactNode;
-}
-
-export default function AnimatedHeight({ visible, duration = 0.25, onFinish, children }: AnimatedHeightProps) {
     const [height, setHeight] = useState("0px");
     const [shouldRender, setShouldRender] = useState(visible);
     const [isAnimating, setIsAnimating] = useState(false);
-    const contentRef = useRef<HTMLDivElement>(null);
     const measureRef = useRef<HTMLDivElement>(null);
 
     useEffect(() => {
@@ -50,7 +43,7 @@ export default function AnimatedHeight({ visible, duration = 0.25, onFinish, chi
                 }, duration * 1000);
             }
         }
-    }, [visible, duration, shouldRender]);
+    }, [visible, shouldRender]);
 
     // Don't render if not visible and not animating
     if (!visible && !shouldRender && !isAnimating) {
@@ -59,11 +52,12 @@ export default function AnimatedHeight({ visible, duration = 0.25, onFinish, chi
 
     return (
         <div 
-            ref={contentRef}
+            {...props}
             style={{
                 height,
                 transition: `height ${duration}s ease`,
-                overflow: "hidden"
+                overflow: "hidden",
+                ...props.style
             }}
         >
             <div ref={measureRef} style={{ height: "auto" }}>

frontend/src/ui/components/core/animations/AnimatedOpacity.tsx

@@ -0,0 +1,41 @@
+import { useEffect, useState } from "react";
+import type { AnimatedPropertyProps } from "./types";
+
+export default function AnimatedOpacity({ visible, duration = 0.5, onFinish, children, ...props }: AnimatedPropertyProps) {
+    const [opacity, setOpacity] = useState(visible ? 1 : 0);
+    const [shouldRender, setShouldRender] = useState(visible);
+
+    useEffect(() => {
+        if (visible) {
+            setShouldRender(true);
+            setOpacity(0);
+
+            // Wait for content to render, then animate in
+            const id = setTimeout(() => {
+                setOpacity(1);
+            }, 10);
+            return () => clearTimeout(id);
+        } else {
+            setOpacity(0);
+
+            const id = setTimeout(() => {
+                setShouldRender(false);
+                if (onFinish) {
+                    onFinish();
+                }
+            }, duration * 1000);
+            return () => clearTimeout(id);
+        }
+    }, [visible, duration, onFinish]);
+
+    return shouldRender && (
+        <div
+            {...props}
+            style={{
+                opacity,
+                transition: `opacity ${duration}s ease`,
+                ...props.style
+            }}
+        >{children}</div>
+    );
+}

frontend/src/ui/components/core/animations/types.d.ts

@@ -0,0 +1,10 @@
+import type { ReactNode } from "react";
+
+export interface BaseAnimatedPropertyProps {
+    visible: any;
+    duration?: number;
+    onFinish?: () => void
+    children?: ReactNode;
+}
+
+export type AnimatedPropertyProps = BaseAnimatedPropertyProps & React.ComponentPropsWithRef<"div">