feat: added settings dialog and user settings page

ROADMAP.md

@@ -23,10 +23,10 @@
 
 - [x] File/image attachment uploads (R2)
 - [x] Message deletion
-- [ ] Message editing UI
-- [ ] User profiles (bio, custom status, avatar upload)
+- [x] Message editing UI
+- [x] User profiles (bio, custom status, avatar upload)
 - [ ] Channel edit/delete
-- [ ] Settings pages
+- [x] Settings pages
 
 ## Phase 2 — Permissions & Moderation
 

apps/api/src/routes/v1/uploads/handlers.ts

@@ -7,8 +7,8 @@ import { and, eq } from "drizzle-orm"
 import * as HttpStatusCodes from "@/lib/helpers/http/status-codes"
 import { s3Client } from "@/lib/s3"
 import type { AppRouteHandler } from "@/lib/types/app-types"
-import type { PresignRoute } from "./routes"
-import { PRESIGNED_URL_EXPIRY_SECONDS } from "./schema"
+import type { AvatarPresignRoute, PresignRoute } from "./routes"
+import { MAX_AVATAR_SIZE, PRESIGNED_URL_EXPIRY_SECONDS } from "./schema"
 
 const DM_CHANNEL_TYPES = ["dm", "group_dm"] as const
 
@@ -107,3 +107,33 @@ export const presign: AppRouteHandler<PresignRoute> = async (c) => {
 
   return c.json({ uploadUrl, fileUrl, key }, HttpStatusCodes.OK)
 }
+
+export const avatarPresign: AppRouteHandler<AvatarPresignRoute> = async (c) => {
+  const user = c.var.user
+  const { filename, contentType, size } = c.req.valid("json")
+
+  if (size > MAX_AVATAR_SIZE) {
+    return c.json(
+      { success: false, message: "File too large" },
+      HttpStatusCodes.REQUEST_TOO_LONG
+    )
+  }
+
+  const sanitizedFilename = filename.replace(/[^a-zA-Z0-9._-]/g, "_")
+  const key = `avatars/${user.id}/${crypto.randomUUID()}/${sanitizedFilename}`
+
+  const command = new PutObjectCommand({
+    Bucket: env.S3_BUCKET_NAME,
+    Key: key,
+    ContentType: contentType,
+    ContentLength: size,
+  })
+
+  const uploadUrl = await getSignedUrl(s3Client, command, {
+    expiresIn: PRESIGNED_URL_EXPIRY_SECONDS,
+  })
+
+  const fileUrl = `${env.S3_PUBLIC_URL.replace(/\/$/, "")}/${key}`
+
+  return c.json({ uploadUrl, fileUrl }, HttpStatusCodes.OK)
+}

apps/api/src/routes/v1/uploads/index.ts

@@ -2,6 +2,8 @@ import { createRouter } from "@/lib/helpers/app/create-app"
 import * as handlers from "./handlers"
 import * as routes from "./routes"
 
-const uploadsRouter = createRouter().openapi(routes.presign, handlers.presign)
+const uploadsRouter = createRouter()
+  .openapi(routes.presign, handlers.presign)
+  .openapi(routes.avatarPresign, handlers.avatarPresign)
 
 export default uploadsRouter

apps/api/src/routes/v1/uploads/routes.ts

@@ -8,7 +8,12 @@ import {
   unauthorizedSchema,
 } from "@/lib/helpers/openapi/schemas"
 import { sessionAuthMiddleware } from "@/middleware/session-auth"
-import { presignRequestSchema, presignResponseSchema } from "./schema"
+import {
+  avatarPresignRequestSchema,
+  avatarPresignResponseSchema,
+  presignRequestSchema,
+  presignResponseSchema,
+} from "./schema"
 
 export const presign = createRoute({
   path: "/uploads/presign",
@@ -37,3 +42,30 @@ export const presign = createRoute({
 })
 
 export type PresignRoute = typeof presign
+
+export const avatarPresign = createRoute({
+  path: "/uploads/avatar/presign",
+  method: "post",
+  summary: "Request a presigned URL for avatar upload",
+  description:
+    "Returns a presigned URL for uploading a user avatar to S3-compatible storage.",
+  tags: ["Uploads"],
+  middleware: [sessionAuthMiddleware] as const,
+  request: {
+    body: jsonContent({
+      schema: avatarPresignRequestSchema,
+      description: "Avatar file metadata",
+    }),
+  },
+  responses: {
+    [HttpStatusCodes.OK]: jsonContent({
+      schema: avatarPresignResponseSchema,
+      description: "Presigned URL for avatar upload",
+    }),
+    [HttpStatusCodes.UNAUTHORIZED]: unauthorizedSchema,
+    [HttpStatusCodes.REQUEST_TOO_LONG]: payloadTooLargeSchema,
+    [HttpStatusCodes.INTERNAL_SERVER_ERROR]: internalServerErrorSchema,
+  },
+})
+
+export type AvatarPresignRoute = typeof avatarPresign

apps/api/src/routes/v1/uploads/schema.ts

@@ -23,3 +23,27 @@ export const presignResponseSchema = z.object({
   fileUrl: z.string().url(),
   key: z.string(),
 })
+
+const AVATAR_MIME_TYPES = [
+  "image/jpeg",
+  "image/png",
+  "image/gif",
+  "image/webp",
+] as const
+
+export const MAX_AVATAR_SIZE = 2 * 1024 * 1024 // 2 MB
+
+export const avatarPresignRequestSchema = z.object({
+  filename: z.string().min(1).max(256),
+  contentType: z
+    .string()
+    .refine((ct) => (AVATAR_MIME_TYPES as readonly string[]).includes(ct), {
+      message: "Unsupported image type",
+    }),
+  size: z.number().int().min(1).max(MAX_AVATAR_SIZE),
+})
+
+export const avatarPresignResponseSchema = z.object({
+  uploadUrl: z.string().url(),
+  fileUrl: z.string().url(),
+})

apps/web/src/components/chat/message-action-bar.tsx

@@ -12,7 +12,7 @@ import {
   TooltipTrigger,
 } from "@repo/ui/components/tooltip"
 import { MoreHorizontal, Reply } from "lucide-react"
-import { useEffect, useState } from "react"
+import { useCallback, useEffect, useRef, useState } from "react"
 import { EmojiReactionPicker } from "./emoji-reaction-picker"
 
 interface MessageActionBarProps {
@@ -36,11 +36,32 @@ export function MessageActionBar({
 }: MessageActionBarProps) {
   const [isEmojiOpen, setIsEmojiOpen] = useState(false)
   const [isMoreOpen, setIsMoreOpen] = useState(false)
+  const [suppressTooltip, setSuppressTooltip] = useState(false)
+  const suppressTimeoutRef = useRef<ReturnType<typeof setTimeout>>(null)
 
   useEffect(() => {
     onOverlayOpenChange?.(isEmojiOpen || isMoreOpen)
   }, [isEmojiOpen, isMoreOpen, onOverlayOpenChange])
 
+  useEffect(() => {
+    return () => {
+      if (suppressTimeoutRef.current) clearTimeout(suppressTimeoutRef.current)
+    }
+  }, [])
+
+  const handleMoreOpenChange = useCallback((open: boolean) => {
+    setIsMoreOpen(open)
+    if (!open) {
+      // Suppress tooltip briefly after dropdown closes to prevent it from sticking
+      setSuppressTooltip(true)
+      if (suppressTimeoutRef.current) clearTimeout(suppressTimeoutRef.current)
+      suppressTimeoutRef.current = setTimeout(
+        () => setSuppressTooltip(false),
+        150
+      )
+    }
+  }, [])
+
   return (
     <div className="flex items-center gap-0.5 rounded-md border border-border bg-background p-0.5 shadow-sm">
       <EmojiReactionPicker onSelect={onReact} onOpenChange={setIsEmojiOpen} />
@@ -61,8 +82,8 @@ export function MessageActionBar({
         <TooltipContent side="top">Reply</TooltipContent>
       </Tooltip>
 
-      <DropdownMenu open={isMoreOpen} onOpenChange={setIsMoreOpen}>
-        <Tooltip>
+      <DropdownMenu open={isMoreOpen} onOpenChange={handleMoreOpenChange}>
+        <Tooltip open={isMoreOpen || suppressTooltip ? false : undefined}>
           <TooltipTrigger asChild>
             <DropdownMenuTrigger asChild>
               <Button

apps/web/src/components/chat/message-edit-input.tsx

@@ -79,6 +79,15 @@ export function MessageEditInput({
     []
   )
 
+  // Force focus after mount — the Radix dropdown close animation steals focus back
+  useEffect(() => {
+    if (!editor) return
+    const timeout = setTimeout(() => {
+      editor.commands.focus("end")
+    }, 200)
+    return () => clearTimeout(timeout)
+  }, [editor])
+
   const handleSave = useCallback(() => {
     if (!editor) return
 

apps/web/src/components/chat/message-item.tsx

@@ -93,7 +93,7 @@ function ReplyPreview({
     <button
       type="button"
       onClick={() => scrollToMessage(referencedMessage.id)}
-      className="mb-0.5 flex cursor-pointer items-center gap-1.5 rounded-sm text-xs hover:opacity-80"
+      className="mb-0.5 flex min-w-0 max-w-full cursor-pointer items-center gap-1.5 rounded-sm text-xs hover:opacity-80"
     >
       <div className="mb-1 ml-4 h-3 w-8 rounded-tl-md border-t-2 border-l-2 border-muted-foreground/40" />
       <Avatar size="sm" className="size-4">
@@ -102,7 +102,7 @@ function ReplyPreview({
           {nameInitial(author.displayUsername ?? author.name)}
         </AvatarFallback>
       </Avatar>
-      <span className="font-semibold text-foreground/80">
+      <span className="shrink-0 font-semibold text-foreground/80">
         {author.displayUsername ?? author.name}
       </span>
       {truncatedContent && (