updates

frontend/src/App.tsx

@@ -36,6 +36,7 @@ export function App() {
   const [streaming, setStreaming] = useState("");
   const [sending, setSending] = useState(false);
   const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
+  const [mobileNav, setMobileNav] = useState(false);
   const [editConv, setEditConv] = useState<Conversation | null>(null);
   const [shareConv, setShareConv] = useState<Conversation | null>(null);
   const [deleteConv, setDeleteConv] = useState<Conversation | null>(null);
@@ -191,15 +192,17 @@ export function App() {
         activeId={activeId}
         collapsed={sidebarCollapsed}
         onToggle={() => setSidebarCollapsed(true)}
-        onNew={newChat}
-        onSelect={setActiveId}
+        onNew={() => { newChat(); setMobileNav(false); }}
+        onSelect={(id) => { setActiveId(id); setMobileNav(false); }}
         onRename={setEditConv}
         onTopic={setEditConv}
         onShare={setShareConv}
         onDelete={setDeleteConv}
-        onOpenSettings={() => setSettingsOpen(true)}
-        onOpenAdmin={() => setAdminOpen(true)}
+        onOpenSettings={() => { setSettingsOpen(true); setMobileNav(false); }}
+        onOpenAdmin={() => { setAdminOpen(true); setMobileNav(false); }}
         onLogout={logout}
+        mobileOpen={mobileNav}
+        onCloseMobile={() => setMobileNav(false)}
       />
       <Chat
         user={user}
@@ -214,6 +217,7 @@ export function App() {
         onShare={() => active && setShareConv(active)}
         sidebarCollapsed={sidebarCollapsed}
         onExpandSidebar={() => setSidebarCollapsed(false)}
+        onOpenNav={() => setMobileNav(true)}
       />
 
       <ConvEditDialog

frontend/src/components/Chat.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useRef, useState } from "react";
-import { BookOpen, Bot, Cpu, PanelLeftOpen, SendHorizontal, Share2, User as UserIcon } from "lucide-react";
+import { BookOpen, Bot, Cpu, Menu, PanelLeftOpen, SendHorizontal, Share2, User as UserIcon } from "lucide-react";
 import type { ChatMessage, Conversation, DriverModel, User } from "../lib/types.ts";
 import { Avatar, IconButton, LOGO_URL, Logo, Picker, type PickerGroup, Spinner } from "./ui.tsx";
 import { Markdown } from "./Markdown.tsx";
@@ -42,6 +42,7 @@ export function Chat({
   onShare,
   sidebarCollapsed,
   onExpandSidebar,
+  onOpenNav,
 }: {
   user: User;
   conv: Conversation | null;
@@ -55,6 +56,7 @@ export function Chat({
   onShare: () => void;
   sidebarCollapsed: boolean;
   onExpandSidebar: () => void;
+  onOpenNav: () => void;
 }) {
   const [draft, setDraft] = useState("");
   const boxRef = useRef<HTMLDivElement>(null);
@@ -95,10 +97,15 @@ export function Chat({
   return (
     <div className="flex h-full min-w-0 flex-1 flex-col">
       <header className="flex items-center gap-2 border-b border-stone-200/70 px-4 py-2.5 backdrop-blur dark:border-zinc-800">
+        <IconButton title="Open chats" onClick={onOpenNav} className="md:hidden">
+          <Menu size={18} />
+        </IconButton>
         {sidebarCollapsed && (
-          <IconButton title="Expand sidebar" onClick={onExpandSidebar}>
-            <PanelLeftOpen size={18} />
-          </IconButton>
+          <span className="hidden md:inline">
+            <IconButton title="Expand sidebar" onClick={onExpandSidebar}>
+              <PanelLeftOpen size={18} />
+            </IconButton>
+          </span>
         )}
         <span className="hidden items-center gap-2 font-semibold sm:flex">
           <Logo size={24} className="rounded-lg" />
@@ -154,7 +161,7 @@ export function Chat({
         </div>
       </div>
 
-      <div className="px-4 pb-2 sm:px-8">
+      <div className="px-4 pb-[max(0.5rem,env(safe-area-inset-bottom))] sm:px-8">
         <form onSubmit={submit} className="mx-auto flex w-full max-w-3xl items-end gap-2 rounded-[1.75rem] border border-stone-200 bg-white p-2 pl-5 shadow-lg dark:border-zinc-700 dark:bg-zinc-900">
           <textarea
             ref={taRef}

frontend/src/components/Sidebar.tsx

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useRef, useState } from "react";
 import {
   MessageSquarePlus,
   MoreVertical,
@@ -9,6 +9,7 @@ import {
   Tag,
   Trash2,
   Users,
+  X,
 } from "lucide-react";
 import type { Conversation, User } from "../lib/types.ts";
 import { Avatar, Button, ContextMenu, IconButton } from "./ui.tsx";
@@ -35,6 +36,8 @@ export function Sidebar({
   onOpenSettings,
   onOpenAdmin,
   onLogout,
+  mobileOpen,
+  onCloseMobile,
 }: {
   user: User;
   convs: Conversation[];
@@ -50,8 +53,11 @@ export function Sidebar({
   onOpenSettings: () => void;
   onOpenAdmin: () => void;
   onLogout: () => void;
+  mobileOpen: boolean;
+  onCloseMobile: () => void;
 }) {
   const [menu, setMenu] = useState<MenuState | null>(null);
+  const touchX = useRef<number | null>(null);
 
   function openMenu(e: React.MouseEvent, conv: Conversation) {
     e.preventDefault();
@@ -59,19 +65,41 @@ export function Sidebar({
     setMenu({ x: e.clientX, y: e.clientY, conv });
   }
 
-  if (collapsed) return null;
+  if (collapsed && !mobileOpen) return null;
 
   return (
-    <aside className="flex h-full w-72 shrink-0 flex-col gap-2 border-r border-stone-200/70 bg-white/70 p-3 backdrop-blur dark:border-zinc-800 dark:bg-zinc-900/70">
-      <div className="flex items-center gap-1">
-        <Button variant="secondary" size="sm" className="flex-1" onClick={onNew}>
-          <MessageSquarePlus size={16} />
-          New chat
-        </Button>
-        <IconButton title="Collapse sidebar" onClick={onToggle}>
-          <PanelLeftClose size={18} />
-        </IconButton>
-      </div>
+    <>
+      {mobileOpen && (
+        <div className="fixed inset-0 z-30 bg-black/40 md:hidden" onClick={onCloseMobile} aria-hidden="true" />
+      )}
+      <aside
+        onTouchStart={(e) => { touchX.current = e.touches[0]!.clientX; }}
+        onTouchEnd={(e) => {
+          if (touchX.current === null) return;
+          const dx = e.changedTouches[0]!.clientX - touchX.current;
+          touchX.current = null;
+          if (dx < -60) onCloseMobile(); // swipe left closes the drawer
+        }}
+        className={cn(
+          "fixed inset-y-0 left-0 z-40 flex h-full w-72 shrink-0 flex-col gap-2 border-r border-stone-200 bg-white p-3 shadow-2xl transition-transform duration-200",
+          "md:static md:z-auto md:shadow-none dark:border-zinc-800 dark:bg-zinc-900 md:dark:bg-zinc-900/70 md:bg-white/70 md:backdrop-blur",
+          mobileOpen ? "translate-x-0" : "-translate-x-full",
+          "md:translate-x-0",
+          collapsed && "md:hidden",
+        )}
+      >
+        <div className="flex items-center gap-1">
+          <Button variant="secondary" size="sm" className="flex-1" onClick={onNew}>
+            <MessageSquarePlus size={16} />
+            New chat
+          </Button>
+          <IconButton title="Collapse sidebar" onClick={onToggle} className="hidden md:inline-flex">
+            <PanelLeftClose size={18} />
+          </IconButton>
+          <IconButton title="Close chats" onClick={onCloseMobile} className="md:hidden">
+            <X size={18} />
+          </IconButton>
+        </div>
 
       <div className="flex-1 space-y-1 overflow-y-auto py-1">
         {convs.length === 0 && (
@@ -147,6 +175,7 @@ export function Sidebar({
           </Button>
         </div>
       </div>
-    </aside>
+      </aside>
+    </>
   );
 }

frontend/src/components/dialogs.tsx

@@ -1,6 +1,7 @@
-import { useEffect, useState } from "react";
-import { Globe, Link2, Pencil, Settings2, Tag, Unplug } from "lucide-react";
+import { useEffect, useRef, useState } from "react";
+import { Globe, ImagePlus, Link2, Pencil, Settings2, Tag, Unplug } from "lucide-react";
 import { api } from "../lib/api.ts";
+import { cn } from "../lib/cn.ts";
 import type { Conversation, User } from "../lib/types.ts";
 import { Avatar, Button, CopyButton, Field, Input, Modal, Picker, Spinner } from "./ui.tsx";
 
@@ -130,6 +131,10 @@ export function SettingsModal({
   const [theme, setTheme] = useState("auto");
   const [busy, setBusy] = useState(false);
   const [error, setError] = useState("");
+  const [uploading, setUploading] = useState(false);
+  const [uploadError, setUploadError] = useState("");
+  const [dragOver, setDragOver] = useState(false);
+  const fileRef = useRef<HTMLInputElement>(null);
 
   useEffect(() => {
     if (user) {
@@ -137,9 +142,32 @@ export function SettingsModal({
       setAvatarUrl(user.avatarUrl);
       setTheme(user.theme);
       setError("");
+      setUploadError("");
     }
   }, [user]);
 
+  async function uploadFile(f: File) {
+    if (!user) return;
+    if (f.size > 5 * 1024 * 1024) {
+      setUploadError("File too large (max 5MB).");
+      return;
+    }
+    if (!/^image\/(jpeg|png|webp)$/.test(f.type)) {
+      setUploadError("Only jpg, png or webp images are accepted.");
+      return;
+    }
+    setUploading(true);
+    setUploadError("");
+    try {
+      const res = await api.uploadAvatar(user.id, f);
+      setAvatarUrl(res.url); // applied when you press Save
+    } catch (err) {
+      setUploadError(err instanceof Error ? err.message : "Upload failed");
+    } finally {
+      setUploading(false);
+    }
+  }
+
   async function save(e: React.FormEvent) {
     e.preventDefault();
     if (!user || busy) return;
@@ -161,7 +189,54 @@ export function SettingsModal({
       <form onSubmit={save} className="space-y-4">
         <div className="flex items-center gap-3">
           <Avatar name={displayName || "?"} url={avatarUrl || undefined} size={52} />
-          <p className="text-sm opacity-60">@{user?.username}</p>
+          <div className="min-w-0 flex-1">
+            <p className="truncate text-sm font-medium">{displayName || "…"}</p>
+            <p className="truncate text-xs opacity-60">@{user?.username}</p>
+          </div>
+        </div>
+        <div>
+          <span className="mb-1.5 block text-sm font-medium opacity-80">Avatar upload</span>
+          <div
+            role="button"
+            tabIndex={0}
+            aria-label="Upload avatar"
+            onClick={() => fileRef.current?.click()}
+            onKeyDown={(e) => e.key === "Enter" && fileRef.current?.click()}
+            onDragOver={(e) => { e.preventDefault(); setDragOver(true); }}
+            onDragLeave={() => setDragOver(false)}
+            onDrop={(e) => {
+              e.preventDefault();
+              setDragOver(false);
+              const f = e.dataTransfer.files?.[0];
+              if (f) uploadFile(f);
+            }}
+            className={cn(
+              "flex cursor-pointer items-center gap-3 rounded-3xl border-2 border-dashed px-4 py-3.5 transition",
+              dragOver
+                ? "border-emerald-500 bg-emerald-500/10"
+                : "border-stone-200 hover:border-emerald-500/60 hover:bg-stone-50 dark:border-zinc-700 dark:hover:bg-zinc-800/60",
+            )}
+          >
+            <span className="grid h-10 w-10 shrink-0 place-items-center rounded-full bg-emerald-600/10 text-emerald-600 dark:text-emerald-400">
+              {uploading ? <Spinner size={17} /> : <ImagePlus size={17} />}
+            </span>
+            <span className="min-w-0 flex-1 text-sm">
+              <span className="block font-medium">{uploading ? "Uploading…" : dragOver ? "Drop it!" : "Drop an image or click to upload"}</span>
+              <span className="block text-xs opacity-60">jpg · png · webp — max 5MB — 5 changes per 2h</span>
+            </span>
+          </div>
+          <input
+            ref={fileRef}
+            type="file"
+            accept="image/jpeg,image/png,image/webp"
+            className="hidden"
+            onChange={(e) => {
+              const f = e.target.files?.[0];
+              if (f) uploadFile(f);
+              e.target.value = "";
+            }}
+          />
+          {uploadError && <p className="mt-1.5 text-sm text-red-600 dark:text-red-400">{uploadError}</p>}
         </div>
         <Field label="Display name">
           <Input value={displayName} onChange={(e) => setDisplayName(e.target.value)} maxLength={60} required />

frontend/src/components/ui.tsx

@@ -256,17 +256,45 @@ export function Modal({
     return () => window.removeEventListener("keydown", h);
   }, [open, onClose]);
 
+  // Bottom-sheet drag state (mobile): pull the handle down to dismiss.
+  const [dragY, setDragY] = useState(0);
+  const dragStart = useRef<number | null>(null);
+  useEffect(() => {
+    if (!open) {
+      setDragY(0);
+      dragStart.current = null;
+    }
+  }, [open ]);
+
   if (!open) return null;
   const Icon = icon;
   return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center p-4" role="dialog" aria-modal="true">
+    <div className="fixed inset-0 z-50 flex items-end justify-center sm:items-center sm:p-4" role="dialog" aria-modal="true">
       <div className="absolute inset-0 bg-black/50 backdrop-blur-sm" onClick={onClose} />
       <div
         className={cn(
-          "relative max-h-[85vh] w-full overflow-y-auto rounded-3xl border border-stone-200 bg-white p-6 shadow-2xl dark:border-zinc-700 dark:bg-zinc-900",
-          wide ? "max-w-2xl" : "max-w-md",
+          "relative max-h-[92vh] w-full overflow-y-auto rounded-b-none rounded-t-[1.75rem] border border-stone-200 bg-white p-6 pt-3 shadow-2xl sm:max-h-[85vh] sm:rounded-3xl sm:pt-6 dark:border-zinc-700 dark:bg-zinc-900",
+          wide ? "sm:max-w-2xl" : "sm:max-w-md",
         )}
+        style={dragY > 0 ? { transform: `translateY(${dragY}px)` } : undefined}
       >
+        {/* drag handle — mobile only */}
+        <div
+          className="sticky top-0 z-10 -mx-6 px-6 pb-3 pt-1 sm:hidden"
+          onTouchStart={(e) => { dragStart.current = e.touches[0]!.clientY; }}
+          onTouchMove={(e) => {
+            if (dragStart.current === null) return;
+            const dy = e.touches[0]!.clientY - dragStart.current;
+            setDragY(dy > 0 ? dy : 0);
+          }}
+          onTouchEnd={() => {
+            if (dragY > 110) onClose(); // snap shut past threshold…
+            setDragY(0); // …otherwise snap back
+            dragStart.current = null;
+          }}
+        >
+          <div className="mx-auto h-1.5 w-12 rounded-full bg-stone-300 dark:bg-zinc-600" />
+        </div>
         <div className="mb-4 flex items-center gap-2.5">
           {Icon && (
             <span className="grid h-9 w-9 place-items-center rounded-full bg-emerald-600/10 text-emerald-600 dark:text-emerald-400">
@@ -339,11 +367,14 @@ export function ContextMenu({ x, y, items, onClose }: { x: number; y: number; it
     return () => window.removeEventListener("keydown", h);
   }, [x, y, onClose]);
 
-  return (
+  // Rendered in a portal: the sidebar's backdrop-blur would otherwise turn
+  // into a containing block, breaking the fullscreen overlay and offsetting
+  // the menu (text showing through / misplaced over the composer).
+  return createPortal(
     <div className="fixed inset-0 z-50" onClick={onClose} onContextMenu={(e) => { e.preventDefault(); onClose(); }}>
       <div
         ref={ref}
-        className="absolute w-52 overflow-hidden rounded-2xl border border-stone-200 bg-white p-1.5 shadow-xl dark:border-zinc-700 dark:bg-zinc-900"
+        className="fixed z-50 w-52 overflow-hidden rounded-2xl border border-stone-200 bg-white p-1.5 shadow-2xl dark:border-zinc-700 dark:bg-zinc-900"
         style={{ left: pos.x, top: pos.y }}
         onClick={(e) => e.stopPropagation()}
       >
@@ -363,7 +394,8 @@ export function ContextMenu({ x, y, items, onClose }: { x: number; y: number; it
           </button>
         ))}
       </div>
-    </div>
+    </div>,
+    document.body,
   );
 }
 

frontend/src/lib/api.ts

@@ -73,6 +73,23 @@ export const api = {
 
   models: () => req<{ models: DriverModel[] }>("/api/models"),
 
+  /** Avatar upload to the local CDN. Returns the public /cdn/… URL. */
+  uploadAvatar: async (userId: string, file: File): Promise<{ url: string }> => {
+    const res = await fetch(`/cdn/avatar/${userId}`, {
+      method: "PUT",
+      headers: { Authorization: `Bearer ${getToken()}`, "Content-Type": file.type || "application/octet-stream" },
+      body: file,
+    });
+    if (res.status === 401) {
+      clearToken();
+      window.location.reload();
+      throw new ApiError(401, "Session expired.");
+    }
+    const data = (await res.json().catch(() => ({}))) as { error?: string; url?: string };
+    if (!res.ok) throw new ApiError(res.status, data.error || `Upload failed (${res.status})`);
+    return { url: data.url! };
+  },
+
   /** Streaming chat. Calls onToken per token; resolves with the full text. */
   chatStream: async (
     args: { model: string; messages: ChatMessage[]; conversationId?: string },