fix: DM message ordering, consolidate input toolbar, add rich text/WYSIWYG, file upload with drag-drop

- Fix DM backend ListMessages to use DESC + reverse (match channel handler)
- Remove spurious .reverse() from frontend message/conversation stores
- Create shared MessageInput component with Slack-style single toolbar row
- Add file upload via + button with progress bar and drag-and-drop
- Add markdown/rich text toggle with full WYSIWYG block formatting
  (lists, blockquotes, links, headings, code blocks)
- Add frontend+backend security for file uploads (extension + content-type guards)

web/src/components/ExpandableImage.tsx

@@ -0,0 +1,31 @@
+import { useState } from 'react';
+
+interface ExpandableImageProps extends React.ImgHTMLAttributes<HTMLImageElement> {
+  src?: string;
+}
+
+export function ExpandableImage({ src, alt, ...props }: ExpandableImageProps) {
+  const [expanded, setExpanded] = useState(false);
+
+  const finalSrc = src?.startsWith("https://media") && src.includes(".giphy.com/")
+    ? `/api/v1/gifs/proxy?url=${encodeURIComponent(src)}`
+    : src;
+
+  return (
+    <img
+      {...props}
+      src={finalSrc}
+      alt={alt || "image"}
+      onClick={(e) => {
+        e.stopPropagation();
+        setExpanded(!expanded);
+      }}
+      className={
+        expanded
+          ? "max-w-full max-h-[65vh] object-contain rounded my-1 block cursor-zoom-out"
+          : "max-w-[240px] max-h-[240px] object-contain rounded my-1 block cursor-zoom-in"
+      }
+      loading="lazy"
+    />
+  );
+}