minor UI fixes

backend/prisma/migrations/20260207000000_add_query_indexes/migration.sql

@@ -0,0 +1,9 @@
+-- Improve dashboard query performance for user-scoped collection and drawing listings.
+CREATE INDEX IF NOT EXISTS "Collection_userId_updatedAt_idx"
+ON "Collection" ("userId", "updatedAt");
+
+CREATE INDEX IF NOT EXISTS "Drawing_userId_updatedAt_idx"
+ON "Drawing" ("userId", "updatedAt");
+
+CREATE INDEX IF NOT EXISTS "Drawing_userId_collectionId_updatedAt_idx"
+ON "Drawing" ("userId", "collectionId", "updatedAt");

backend/prisma/schema.prisma

@@ -49,6 +49,8 @@ model Collection {
   drawings  Drawing[]
   createdAt DateTime  @default(now())
   updatedAt DateTime  @updatedAt
+
+  @@index([userId, updatedAt])
 }
 
 model Drawing {
@@ -65,6 +67,9 @@ model Drawing {
   collection   Collection? @relation(fields: [collectionId], references: [id])
   createdAt    DateTime    @default(now())
   updatedAt    DateTime    @updatedAt
+
+  @@index([userId, updatedAt])
+  @@index([userId, collectionId, updatedAt])
 }
 
 model Library {

backend/src/auth.ts

@@ -9,7 +9,7 @@ import { z } from "zod";
 import { PrismaClient, Prisma } from "./generated/client";
 import { config } from "./config";
 import { requireAuth, optionalAuth } from "./middleware/auth";
-import { sanitizeText } from "./security";
+import { sanitizeText, getCsrfTokenHeader, validateCsrfToken } from "./security";
 import rateLimit, { MemoryStore } from "express-rate-limit";
 import { logAuditEvent } from "./utils/audit";
 import crypto from "crypto";
@@ -281,6 +281,36 @@ const requireAdmin = (
   return true;
 };
 
+const getClientId = (req: Request): string => {
+  const ip = req.ip || req.connection.remoteAddress || "unknown";
+  const userAgent = req.headers["user-agent"] || "unknown";
+  return `${ip}:${userAgent}`.slice(0, 256);
+};
+
+const requireCsrf = (req: Request, res: Response): boolean => {
+  const headerName = getCsrfTokenHeader();
+  const tokenHeader = req.headers[headerName];
+  const token = Array.isArray(tokenHeader) ? tokenHeader[0] : tokenHeader;
+
+  if (!token) {
+    res.status(403).json({
+      error: "CSRF token missing",
+      message: `Missing ${headerName} header`,
+    });
+    return false;
+  }
+
+  if (!validateCsrfToken(getClientId(req), token)) {
+    res.status(403).json({
+      error: "CSRF token invalid",
+      message: "Invalid or expired CSRF token. Please refresh and try again.",
+    });
+    return false;
+  }
+
+  return true;
+};
+
 const countActiveAdmins = async () => {
   return prisma.user.count({
     where: { role: "ADMIN", isActive: true },
@@ -968,6 +998,8 @@ router.get("/status", optionalAuth, async (req: Request, res: Response) => {
  */
 router.post("/auth-enabled", optionalAuth, async (req: Request, res: Response) => {
   try {
+    if (!requireCsrf(req, res)) return;
+
     const parsed = authEnabledToggleSchema.safeParse(req.body);
     if (!parsed.success) {
       return res
@@ -1477,6 +1509,15 @@ router.patch("/users/:id", requireAuth, async (req: Request, res: Response) => {
 
     res.json({ user: updated });
   } catch (error) {
+    if (
+      error instanceof Prisma.PrismaClientKnownRequestError &&
+      error.code === "P2002"
+    ) {
+      return res.status(409).json({
+        error: "Conflict",
+        message: "User with this username already exists",
+      });
+    }
     console.error("Update user error:", error);
     res.status(500).json({
       error: "Internal server error",
@@ -1745,7 +1786,7 @@ router.post("/password-reset-request", loginAttemptRateLimiter, async (req: Requ
             : `http://${baseUrlRaw}`
           : "http://localhost:6767";
         const baseUrl = baseUrlWithProtocol.replace(/\/$/, "");
-        console.log(`[DEV] Reset URL: ${baseUrl}/reset-password?token=${resetToken}`);
+        console.log(`[DEV] Reset URL: ${baseUrl}/reset-password-confirm?token=${resetToken}`);
       }
     }
 

docker-compose.prod.yml

@@ -6,6 +6,8 @@ services:
       - DATABASE_URL=file:/app/prisma/dev.db
       - PORT=8000
       - NODE_ENV=production
+      # Required for authentication: must be explicitly set to a strong secret (min 32 chars)
+      - JWT_SECRET=${JWT_SECRET}
       # Required for horizontal scaling (k8s): uncomment and set to same value on all instances
       # - CSRF_SECRET=${CSRF_SECRET}
     volumes:

docker-compose.yml

@@ -8,8 +8,8 @@ services:
       - DATABASE_URL=file:/app/prisma/dev.db
       - PORT=8000
       - NODE_ENV=production
-      # Required for authentication: set a strong secret (min 32 chars)
+      # Required for authentication: must be explicitly set to a strong secret (min 32 chars)
-      - JWT_SECRET=${JWT_SECRET:-change-this-secret-in-production-min-32-chars}
+      - JWT_SECRET=${JWT_SECRET}
       # Required for horizontal scaling (k8s): uncomment and set to same value on all instances
       # - CSRF_SECRET=${CSRF_SECRET}
     volumes:

frontend/src/App.tsx

@@ -1,17 +1,26 @@
+import { Suspense, lazy } from 'react';
 import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom';
-import { Dashboard } from './pages/Dashboard';
-import { Editor } from './pages/Editor';
-import { Settings } from './pages/Settings';
-import { Profile } from './pages/Profile';
-import { Admin } from './pages/Admin';
-import { Login } from './pages/Login';
-import { Register } from './pages/Register';
-import { PasswordResetRequest } from './pages/PasswordResetRequest';
-import { PasswordResetConfirm } from './pages/PasswordResetConfirm';
 import { ThemeProvider } from './context/ThemeContext';
 import { UploadProvider } from './context/UploadContext';
 import { AuthProvider } from './context/AuthContext';
 import { ProtectedRoute } from './components/ProtectedRoute';
+import { Loader2 } from 'lucide-react';
+
+const Dashboard = lazy(() => import('./pages/Dashboard').then(m => ({ default: m.Dashboard })));
+const Editor = lazy(() => import('./pages/Editor').then(m => ({ default: m.Editor })));
+const Settings = lazy(() => import('./pages/Settings').then(m => ({ default: m.Settings })));
+const Profile = lazy(() => import('./pages/Profile').then(m => ({ default: m.Profile })));
+const Admin = lazy(() => import('./pages/Admin').then(m => ({ default: m.Admin })));
+const Login = lazy(() => import('./pages/Login').then(m => ({ default: m.Login })));
+const Register = lazy(() => import('./pages/Register').then(m => ({ default: m.Register })));
+const PasswordResetRequest = lazy(() => import('./pages/PasswordResetRequest').then(m => ({ default: m.PasswordResetRequest })));
+const PasswordResetConfirm = lazy(() => import('./pages/PasswordResetConfirm').then(m => ({ default: m.PasswordResetConfirm })));
+
+const PageLoader = () => (
+  <div className="min-h-screen bg-slate-50 dark:bg-neutral-950 flex items-center justify-center">
+    <Loader2 className="w-8 h-8 text-indigo-600 animate-spin" />
+  </div>
+);
 
 function App() {
   return (
@@ -19,61 +28,63 @@ function App() {
       <Router>
         <AuthProvider>
           <UploadProvider>
-            <Routes>
+            <Suspense fallback={<PageLoader />}>
-              <Route path="/login" element={<Login />} />
+              <Routes>
-              <Route path="/register" element={<Register />} />
+                <Route path="/login" element={<Login />} />
-              <Route path="/reset-password" element={<PasswordResetRequest />} />
+                <Route path="/register" element={<Register />} />
-              <Route path="/reset-password-confirm" element={<PasswordResetConfirm />} />
+                <Route path="/reset-password" element={<PasswordResetRequest />} />
-              <Route
+                <Route path="/reset-password-confirm" element={<PasswordResetConfirm />} />
-                path="/"
+                <Route
-                element={
+                  path="/"
-                  <ProtectedRoute>
+                  element={
-                    <Dashboard />
+                    <ProtectedRoute>
-                  </ProtectedRoute>
+                      <Dashboard />
-                }
+                    </ProtectedRoute>
-              />
+                  }
-              <Route
+                />
-                path="/collections"
+                <Route
-                element={
+                  path="/collections"
-                  <ProtectedRoute>
+                  element={
-                    <Dashboard />
+                    <ProtectedRoute>
-                  </ProtectedRoute>
+                      <Dashboard />
-                }
+                    </ProtectedRoute>
-              />
+                  }
-              <Route
+                />
-                path="/settings"
+                <Route
-                element={
+                  path="/settings"
-                  <ProtectedRoute>
+                  element={
-                    <Settings />
+                    <ProtectedRoute>
-                  </ProtectedRoute>
+                      <Settings />
-                }
+                    </ProtectedRoute>
-              />
+                  }
-              <Route
+                />
-                path="/profile"
+                <Route
-                element={
+                  path="/profile"
-                  <ProtectedRoute>
+                  element={
-                    <Profile />
+                    <ProtectedRoute>
-                  </ProtectedRoute>
+                      <Profile />
-                }
+                    </ProtectedRoute>
-              />
+                  }
-              <Route
+                />
-                path="/admin"
+                <Route
-                element={
+                  path="/admin"
-                  <ProtectedRoute>
+                  element={
-                    <Admin />
+                    <ProtectedRoute>
-                  </ProtectedRoute>
+                      <Admin />
-                }
+                    </ProtectedRoute>
-              />
+                  }
-              <Route
+                />
-                path="/editor/:id"
+                <Route
-                element={
+                  path="/editor/:id"
-                  <ProtectedRoute>
+                  element={
-                    <Editor />
+                    <ProtectedRoute>
-                  </ProtectedRoute>
+                      <Editor />
-                }
+                    </ProtectedRoute>
-              />
+                  }
-              <Route path="*" element={<Navigate to="/" replace />} />
+                />
-            </Routes>
+                <Route path="*" element={<Navigate to="/" replace />} />
+              </Routes>
+            </Suspense>
           </UploadProvider>
         </AuthProvider>
       </Router>

frontend/src/api/index.ts

@@ -218,33 +218,50 @@ const deserializeDrawing = (drawing: unknown): Drawing => {
   return deserializeTimestamps(drawing as HasTimestamps & Drawing);
 };
 
+export interface PaginatedDrawings<T> {
+  drawings: T[];
+  totalCount: number;
+  limit?: number;
+  offset?: number;
+}
+
 export function getDrawings(
   search?: string,
-  collectionId?: string | null
+  collectionId?: string | null,
-): Promise<DrawingSummary[]>;
+  options?: { limit?: number; offset?: number }
+): Promise<PaginatedDrawings<DrawingSummary>>;
 
 export function getDrawings(
   search: string | undefined,
   collectionId: string | null | undefined,
-  options: { includeData: true }
+  options: { includeData: true; limit?: number; offset?: number }
-): Promise<Drawing[]>;
+): Promise<PaginatedDrawings<Drawing>>;
 
 export async function getDrawings(
   search?: string,
   collectionId?: string | null,
-  options?: { includeData?: boolean }
+  options?: { includeData?: boolean; limit?: number; offset?: number }
 ) {
-  const params: Record<string, string> = {};
+  const params: Record<string, string | number> = {};
   if (search) params.search = search;
   if (collectionId !== undefined)
     params.collectionId = collectionId === null ? "null" : collectionId;
+  if (options?.limit !== undefined) params.limit = options.limit;
+  if (options?.offset !== undefined) params.offset = options.offset;
+
   if (options?.includeData) {
     params.includeData = "true";
-    const response = await api.get<Drawing[]>("/drawings", { params });
+    const response = await api.get<PaginatedDrawings<Drawing>>("/drawings", { params });
-    return response.data.map(deserializeDrawing);
+    return {
+      ...response.data,
+      drawings: response.data.drawings.map(deserializeDrawing)
+    };
   }
-  const response = await api.get<DrawingSummary[]>("/drawings", { params });
+  const response = await api.get<PaginatedDrawings<DrawingSummary>>("/drawings", { params });
-  return response.data.map(deserializeDrawingSummary);
+  return {
+    ...response.data,
+    drawings: response.data.drawings.map(deserializeDrawingSummary)
+  };
 }
 
 export const getDrawing = async (id: string) => {

frontend/src/components/DrawingCard.tsx

@@ -5,7 +5,7 @@ import { PenTool, Trash2, FolderInput, ArrowRight, Check, Clock, Copy, Download,
 import type { DrawingSummary, Collection, Drawing } from '../types';
 import { formatDistanceToNow } from 'date-fns';
 import clsx from 'clsx';
-import { exportToSvg } from "@excalidraw/excalidraw";
+// import { exportToSvg } from "@excalidraw/excalidraw"; // Lazy load this instead
 import { exportDrawingToFile } from '../utils/exportUtils';
 
 import * as api from '../api';
@@ -112,6 +112,11 @@ export const DrawingCard: React.FC<DrawingCardProps> = ({
         if (cancelled) return;
         if (!data?.elements || !data?.appState) return;
 
+        // Lazy load exportToSvg to keep the main bundle small
+        const { exportToSvg } = await import("@excalidraw/excalidraw");
+        
+        if (cancelled) return;
+
         const svg = await exportToSvg({
           elements: data.elements,
           appState: {
@@ -243,18 +248,18 @@ export const DrawingCard: React.FC<DrawingCardProps> = ({
 
           {previewSvg ? (
             <div
-              className="w-full h-full p-6 flex items-center justify-center [&>svg]:w-full [&>svg]:h-full [&>svg]:object-contain [&>svg]:drop-shadow-sm dark:[&>svg]:invert dark:[&>svg_rect[fill='white']]:opacity-0 dark:[&>svg_rect[fill='#ffffff']]:opacity-0 transition-transform duration-500 group-hover:scale-105"
+              className="w-full h-full p-3 sm:p-4 lg:p-5 flex items-center justify-center [&>svg]:w-full [&>svg]:h-full [&>svg]:object-contain [&>svg]:drop-shadow-sm dark:[&>svg]:invert dark:[&>svg_rect[fill='white']]:opacity-0 dark:[&>svg_rect[fill='#ffffff']]:opacity-0 transition-transform duration-500 group-hover:scale-105"
               dangerouslySetInnerHTML={{ __html: previewSvg }}
             />
           ) : (
-            <div className="w-24 h-24 bg-white dark:bg-neutral-900 rounded-2xl shadow-sm flex items-center justify-center text-neutral-300 dark:text-neutral-400 border border-slate-100 dark:border-neutral-700 transform group-hover:scale-110 group-hover:rotate-3 transition-all duration-500">
+            <div className="w-16 h-16 sm:w-20 sm:h-20 lg:w-24 lg:h-24 bg-white dark:bg-neutral-900 rounded-2xl shadow-sm flex items-center justify-center text-neutral-300 dark:text-neutral-400 border border-slate-100 dark:border-neutral-700 transform group-hover:scale-110 group-hover:rotate-3 transition-all duration-500">
-              <PenTool size={40} strokeWidth={1.5} />
+              <PenTool size={32} strokeWidth={1.5} className="sm:w-9 sm:h-9 lg:w-10 lg:h-10" />
             </div>
           )}
         </div>
 
         {/* Footer */}
-        <div className="p-5 bg-white dark:bg-neutral-900 rounded-b-2xl relative z-10">
+        <div className="p-3 sm:p-4 lg:p-5 bg-white dark:bg-neutral-900 rounded-b-2xl relative z-10">
           {isRenaming ? (
             <form
               onSubmit={handleRenameSubmit}
@@ -270,12 +275,12 @@ export const DrawingCard: React.FC<DrawingCardProps> = ({
                 onBlur={() => setIsRenaming(false)}
                 onDragStart={(e) => e.stopPropagation()}
                 onMouseDown={(e) => e.stopPropagation()}
-                className="w-full px-2 py-1 -ml-2 text-base font-bold text-slate-900 dark:text-white border-2 border-black dark:border-neutral-600 rounded-lg focus:outline-none shadow-[2px_2px_0px_0px_rgba(0,0,0,1)] dark:shadow-[2px_2px_0px_0px_rgba(255,255,255,0.2)] bg-white dark:bg-neutral-800"
+                className="w-full px-2 py-1 -ml-2 text-sm sm:text-base font-bold text-slate-900 dark:text-white border-2 border-black dark:border-neutral-600 rounded-lg focus:outline-none shadow-[2px_2px_0px_0px_rgba(0,0,0,1)] dark:shadow-[2px_2px_0px_0px_rgba(255,255,255,0.2)] bg-white dark:bg-neutral-800"
               />
             </form>
           ) : (
             <h3
-              className="text-base font-bold text-slate-800 dark:text-neutral-100 truncate cursor-text select-none group-hover:text-neutral-900 dark:group-hover:text-white transition-colors"
+              className="text-sm sm:text-base font-bold text-slate-800 dark:text-neutral-100 truncate cursor-text select-none group-hover:text-neutral-900 dark:group-hover:text-white transition-colors"
               title={drawing.name}
               onDoubleClick={(e) => {
                 e.stopPropagation();
@@ -285,9 +290,9 @@ export const DrawingCard: React.FC<DrawingCardProps> = ({
               {drawing.name}
             </h3>
           )}
-          <div className="flex items-center justify-between mt-3 relative">
+          <div className="flex items-center justify-between mt-2.5 sm:mt-3 relative">
-            <p className="text-[11px] font-medium text-slate-400 dark:text-neutral-500 flex items-center gap-1.5">
+            <p className="text-[10px] sm:text-[11px] font-medium text-slate-400 dark:text-neutral-500 flex items-center gap-1 sm:gap-1.5">
-              <Clock size={11} />
+              <Clock size={10} className="sm:w-[11px] sm:h-[11px]" />
               {formatDistanceToNow(drawing.updatedAt)} ago
             </p>
 
@@ -451,4 +456,3 @@ export const DrawingCard: React.FC<DrawingCardProps> = ({
     </>
   );
 };
-

frontend/src/components/FingerprintAvatar.tsx

@@ -1,20 +1,5 @@
 import React, { useMemo, useState } from 'react';
-
+import { getOrCreateBrowserFingerprint, getFingerprintInitials } from '../utils/identity';
-const DEVICE_ID_KEY = 'excalidash-device-id';
-
-const getOrCreateDeviceId = (): string => {
-  if (typeof window === 'undefined') return 'server';
-  const existing = localStorage.getItem(DEVICE_ID_KEY);
-  if (existing) return existing;
-
-  const generated =
-    typeof crypto !== 'undefined' && 'randomUUID' in crypto
-      ? crypto.randomUUID()
-      : `${Date.now()}-${Math.random().toString(16).slice(2)}`;
-
-  localStorage.setItem(DEVICE_ID_KEY, generated);
-  return generated;
-};
 
 const fnv1a = (input: string): number => {
   let hash = 0x811c9dc5;
@@ -27,99 +12,38 @@ const fnv1a = (input: string): number => {
 
 const toHsl = (n: number) => {
   const hue = n % 360;
-  const sat = 60 + (n % 20);
+  const sat = 55 + (n % 20);
-  const light = 45 + (n % 10);
+  const light = 42 + (n % 12);
   return `hsl(${hue} ${sat}% ${light}%)`;
 };
 
-const buildPattern = (seed: string) => {
-  let x = fnv1a(seed);
-  const nextBit = () => {
-    // xorshift32
-    x ^= x << 13;
-    x ^= x >>> 17;
-    x ^= x << 5;
-    return (x >>> 0) & 1;
-  };
-
-  const cells: boolean[][] = Array.from({ length: 5 }, () => Array.from({ length: 5 }, () => false));
-
-  // Generate left 3 columns, mirror to 5.
-  for (let row = 0; row < 5; row += 1) {
-    for (let col = 0; col < 3; col += 1) {
-      const on = nextBit() === 1;
-      cells[row][col] = on;
-      cells[row][4 - col] = on;
-    }
-  }
-
-  const foreground = toHsl(x);
-  const background = 'hsl(0 0% 98%)';
-  const backgroundDark = 'hsl(0 0% 12%)';
-
-  return { cells, foreground, background, backgroundDark };
-};
-
 export const FingerprintAvatar: React.FC<{
   size?: number;
   seed?: string;
   title?: string;
   className?: string;
-}> = ({ size = 32, seed, title = 'Device fingerprint', className }) => {
+}> = ({ size = 32, seed, title = 'Browser fingerprint avatar', className }) => {
-  const [deviceId] = useState(() => getOrCreateDeviceId());
+  const [deviceId] = useState(() => getOrCreateBrowserFingerprint());
   const effectiveSeed = seed || deviceId;
 
-  const { cells, foreground, background, backgroundDark } = useMemo(
+  const initials = useMemo(() => getFingerprintInitials(effectiveSeed), [effectiveSeed]);
-    () => buildPattern(effectiveSeed),
+  const background = useMemo(() => toHsl(fnv1a(effectiveSeed)), [effectiveSeed]);
-    [effectiveSeed]
-  );
-
-  const padding = 0.5;
-  const viewBox = `${-padding} ${-padding} ${5 + padding * 2} ${5 + padding * 2}`;
 
   return (
-    <svg
+    <div
-      width={size}
+      title={title}
-      height={size}
-      viewBox={viewBox}
-      role="img"
       aria-label={title}
       className={className}
+      style={{
+        width: size,
+        height: size,
+        borderRadius: 10,
+        background,
+      }}
     >
-      <title>{title}</title>
+      <div className="w-full h-full flex items-center justify-center font-bold text-white text-xs select-none">
-      <rect
+        {initials}
-        x={-padding}
+      </div>
-        y={-padding}
+    </div>
-        width={5 + padding * 2}
-        height={5 + padding * 2}
-        rx={1.4}
-        fill={background}
-        className="dark:hidden"
-      />
-      <rect
-        x={-padding}
-        y={-padding}
-        width={5 + padding * 2}
-        height={5 + padding * 2}
-        rx={1.4}
-        fill={backgroundDark}
-        className="hidden dark:block"
-      />
-      {cells.map((row, r) =>
-        row.map((on, c) =>
-          on ? <rect key={`${r}-${c}`} x={c} y={r} width={1} height={1} rx={0.2} fill={foreground} /> : null
-        )
-      )}
-      <rect
-        x={-padding}
-        y={-padding}
-        width={5 + padding * 2}
-        height={5 + padding * 2}
-        rx={1.4}
-        fill="none"
-        stroke="rgba(0,0,0,0.25)"
-        className="dark:stroke-neutral-700"
-      />
-    </svg>
   );
 };

frontend/src/components/Sidebar.tsx

@@ -6,7 +6,6 @@ import clsx from 'clsx';
 import { ConfirmModal } from './ConfirmModal';
 import { Logo } from './Logo';
 import { useAuth } from '../context/AuthContext';
-import { FingerprintAvatar } from './FingerprintAvatar';
 import { readImpersonationState, stopImpersonation as restoreImpersonation, type ImpersonationState } from '../utils/impersonation';
 
 interface SidebarProps {
@@ -112,6 +111,16 @@ const SidebarItem: React.FC<SidebarItemProps> = ({
   );
 };
 
+const getInitialsFromName = (name: string): string => {
+  const trimmed = name.trim();
+  if (!trimmed) return 'U';
+  const parts = trimmed.split(/\s+/).filter(Boolean);
+  if (parts.length >= 2) {
+    return `${parts[0][0]}${parts[parts.length - 1][0]}`.toUpperCase();
+  }
+  return trimmed.slice(0, 2).toUpperCase();
+};
+
 
 
 export const Sidebar: React.FC<SidebarProps> = ({
@@ -374,14 +383,16 @@ export const Sidebar: React.FC<SidebarProps> = ({
               </div>
             )}
             {user && (
-              <div className="px-3 py-2 text-xs text-slate-500 dark:text-neutral-500 mb-2">
+              <div className="py-2 text-xs text-slate-500 dark:text-neutral-500 mb-2">
-                <div className="flex items-center gap-3">
+                <div className="grid grid-cols-[auto_1fr_auto] items-center gap-3">
-                  <FingerprintAvatar size={28} className="flex-shrink-0 sm:hidden" title="Browser profile" />
+                  <div className="w-7 h-7 sm:w-8 sm:h-8 rounded-lg bg-indigo-600 text-white font-bold flex items-center justify-center">
-                  <FingerprintAvatar size={32} className="flex-shrink-0 hidden sm:block" title="Browser profile" />
+                    {getInitialsFromName(user.name)}
-                  <div className="min-w-0">
+                  </div>
+                  <div className="min-w-0 text-left">
                     <div className="font-semibold text-slate-700 dark:text-neutral-300 truncate leading-tight">{user.name}</div>
                     <div className="truncate leading-tight">{user.email}</div>
                   </div>
+                  <div className="w-7 h-7 sm:w-8 sm:h-8 invisible" aria-hidden="true" />
                 </div>
               </div>
             )}

frontend/src/pages/Dashboard.tsx

@@ -41,12 +41,16 @@ const DragOverlayPortal: React.FC<{ children: React.ReactNode }> = ({ children }
   return createPortal(children, document.body);
 };
 
+const PAGE_SIZE = 24;
+
 export const Dashboard: React.FC = () => {
   const [searchParams] = useSearchParams();
   const location = useLocation();
   const navigate = useNavigate();
   const [drawings, setDrawings] = useState<DrawingSummary[]>([]);
   const [collections, setCollections] = useState<Collection[]>([]);
+  const [totalCount, setTotalCount] = useState(0);
+  const [isFetchingMore, setIsFetchingMore] = useState(false);
 
   const selectedCollectionId = React.useMemo(() => {
     if (location.pathname === '/') return undefined;
@@ -85,6 +89,7 @@ export const Dashboard: React.FC = () => {
   const [dragCurrent, setDragCurrent] = useState<Point | null>(null);
   const [potentialDragId, setPotentialDragId] = useState<string | null>(null);
   const containerRef = useRef<HTMLDivElement>(null);
+  const loaderRef = useRef<HTMLDivElement>(null);
 
   type SortField = 'name' | 'createdAt' | 'updatedAt';
   type SortDirection = 'asc' | 'desc';
@@ -101,14 +106,17 @@ export const Dashboard: React.FC = () => {
 
   const { uploadFiles } = useUpload();
 
+  const hasMore = drawings.length < totalCount;
+
   const refreshData = useCallback(async () => {
     setIsLoading(true);
     try {
-      const [drawingsData, collectionsData] = await Promise.all([
+      const [drawingsRes, collectionsData] = await Promise.all([
-        api.getDrawings(debouncedSearch, selectedCollectionId),
+        api.getDrawings(debouncedSearch, selectedCollectionId, { limit: PAGE_SIZE, offset: 0 }),
         api.getCollections()
       ]);
-      setDrawings(drawingsData);
+      setDrawings(drawingsRes.drawings);
+      setTotalCount(drawingsRes.totalCount);
       setCollections(collectionsData);
       setSelectedIds(new Set());
     } catch (err) {
@@ -118,10 +126,45 @@ export const Dashboard: React.FC = () => {
     }
   }, [debouncedSearch, selectedCollectionId]);
 
+  const fetchMore = useCallback(async () => {
+    if (isFetchingMore || !hasMore || isLoading) return;
+    setIsFetchingMore(true);
+    try {
+      const drawingsRes = await api.getDrawings(debouncedSearch, selectedCollectionId, {
+        limit: PAGE_SIZE,
+        offset: drawings.length
+      });
+      setDrawings(prev => [...prev, ...drawingsRes.drawings]);
+      setTotalCount(drawingsRes.totalCount);
+    } catch (err) {
+      console.error('Failed to fetch more data:', err);
+    } finally {
+      setIsFetchingMore(false);
+    }
+  }, [isFetchingMore, hasMore, isLoading, debouncedSearch, selectedCollectionId, drawings.length]);
+
   useEffect(() => {
     refreshData();
   }, [refreshData]);
 
+  // Infinite scroll observer
+  useEffect(() => {
+    const observer = new IntersectionObserver(
+      (entries) => {
+        if (entries[0].isIntersecting && hasMore) {
+          fetchMore();
+        }
+      },
+      { threshold: 0.1 }
+    );
+
+    if (loaderRef.current) {
+      observer.observe(loaderRef.current);
+    }
+
+    return () => observer.disconnect();
+  }, [fetchMore, hasMore]);
+
   const [isDraggingFile, setIsDraggingFile] = useState(false);
   const dragCounter = useRef(0);
 
@@ -324,7 +367,13 @@ export const Dashboard: React.FC = () => {
       const trashId = 'trash';
 
       // Optimistic Remove from current view
-      setDrawings(prev => prev.filter(d => d.id !== id));
+      setDrawings(prev => {
+        const next = prev.filter(d => d.id !== id);
+        if (next.length !== prev.length) {
+          setTotalCount(t => t - 1);
+        }
+        return next;
+      });
       setSelectedIds(prev => { const s = new Set(prev); s.delete(id); return s; });
 
       try {
@@ -337,7 +386,13 @@ export const Dashboard: React.FC = () => {
   };
 
   const executePermanentDelete = async (id: string) => {
-    setDrawings(prev => prev.filter(d => d.id !== id));
+    setDrawings(prev => {
+      const next = prev.filter(d => d.id !== id);
+      if (next.length !== prev.length) {
+        setTotalCount(t => t - 1);
+      }
+      return next;
+    });
     setSelectedIds(prev => { const s = new Set(prev); s.delete(id); return s; });
     setDrawingToDelete(null); // Close modal immediately
 
@@ -393,7 +448,11 @@ export const Dashboard: React.FC = () => {
     const trashId = 'trash';
     const ids = Array.from(selectedIds);
 
-    setDrawings(prev => prev.filter(d => !selectedIds.has(d.id)));
+    setDrawings(prev => {
+      const next = prev.filter(d => !selectedIds.has(d.id));
+      setTotalCount(t => t - (prev.length - next.length));
+      return next;
+    });
     setSelectedIds(new Set());
 
     try {
@@ -406,7 +465,11 @@ export const Dashboard: React.FC = () => {
 
   const executeBulkPermanentDelete = async () => {
     const ids = Array.from(selectedIds);
-    setDrawings(prev => prev.filter(d => !selectedIds.has(d.id)));
+    setDrawings(prev => {
+      const next = prev.filter(d => !selectedIds.has(d.id));
+      setTotalCount(t => t - (prev.length - next.length));
+      return next;
+    });
     setSelectedIds(new Set());
     setShowBulkDeleteConfirm(false);
 
@@ -427,10 +490,12 @@ export const Dashboard: React.FC = () => {
     setDrawings(prev => {
       const updated = prev.map(d => selectedIds.has(d.id) ? { ...d, collectionId } : d);
       if (selectedCollectionId === undefined) return updated;
-      return updated.filter(d => {
+      const next = updated.filter(d => {
         if (selectedCollectionId === null) return d.collectionId === null;
         return d.collectionId === selectedCollectionId;
       });
+      setTotalCount(t => t - (prev.length - next.length));
+      return next;
     });
     setSelectedIds(new Set()); // Clear selection after move
     setShowBulkMoveMenu(false);
@@ -467,12 +532,16 @@ export const Dashboard: React.FC = () => {
 
   const handleMoveToCollection = async (id: string, collectionId: string | null) => {
     setDrawings(prev => {
-      return prev.map(d => d.id === id ? { ...d, collectionId } : d)
+      const updated = prev.map(d => d.id === id ? { ...d, collectionId } : d);
-        .filter(d => {
+      const next = updated.filter(d => {
-          if (selectedCollectionId === undefined) return true;
+        if (selectedCollectionId === undefined) return true;
-          if (selectedCollectionId === null) return d.collectionId === null;
+        if (selectedCollectionId === null) return d.collectionId === null;
-          return d.collectionId === selectedCollectionId;
+        return d.collectionId === selectedCollectionId;
-        });
+      });
+      if (next.length !== prev.length) {
+        setTotalCount(t => t - 1);
+      }
+      return next;
     });
     try {
       await api.updateDrawing(id, { collectionId });
@@ -567,10 +636,12 @@ export const Dashboard: React.FC = () => {
     setDrawings(prev => {
       const updated = prev.map(d => idsToMove.has(d.id) ? { ...d, collectionId: targetCollectionId } : d);
       if (selectedCollectionId === undefined) return updated;
-      return updated.filter(d => {
+      const next = updated.filter(d => {
         if (selectedCollectionId === null) return d.collectionId === null;
         return d.collectionId === selectedCollectionId;
       });
+      setTotalCount(t => t - (prev.length - next.length));
+      return next;
     });
 
     // Clear selection if we moved selected items
@@ -678,8 +749,8 @@ export const Dashboard: React.FC = () => {
         {viewTitle}
       </h1>
 
-      <div className="mb-8 flex flex-col xl:flex-row items-center justify-between gap-4">
+      <div className="mb-8 flex flex-col lg:flex-row items-start lg:items-center justify-between gap-4">
-        <div className="flex flex-1 w-full gap-3 items-center flex-wrap">
+        <div className="flex flex-1 w-full lg:w-auto gap-3 items-center flex-wrap">
           <div className="relative flex-1 group max-w-md transition-all duration-200 focus-within:-translate-y-0.5">
             <input
               ref={searchInputRef}
@@ -760,7 +831,7 @@ export const Dashboard: React.FC = () => {
           </div>
         </div>
 
-        <div className="flex items-center gap-3 w-full sm:w-auto justify-end">
+        <div className="flex items-center gap-3 w-full lg:w-auto justify-start lg:justify-end flex-wrap">
           <div className="flex items-center gap-2 mr-2">
             <button
               onClick={handleSelectAll}
@@ -835,7 +906,7 @@ export const Dashboard: React.FC = () => {
                     >
                       <Inbox size={14} /> Unorganized
                     </button>
-                    {collections.filter(c => c.name !== 'Trash').map(c => (
+                    {collections.filter(c => c.id !== 'trash').map(c => (
                       <button
                         key={c.id}
                         onClick={() => handleBulkMove(c.id)}
@@ -933,7 +1004,10 @@ export const Dashboard: React.FC = () => {
             <Loader2 size={32} className="animate-spin" />
           </div>
         ) : (
-          <div className={clsx("grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 sm:gap-6 pb-16 sm:pb-24 transition-all duration-300", isDraggingFile && "opacity-20 blur-sm")}>
+          <div
+            className={clsx("grid gap-3 sm:gap-4 pb-16 sm:pb-24 transition-all duration-300", isDraggingFile && "opacity-20 blur-sm")}
+            style={{ gridTemplateColumns: 'repeat(auto-fill, minmax(220px, 1fr))' }}
+          >
             {sortedDrawings.length === 0 ? (
               <div className="col-span-full flex flex-col items-center justify-center py-16 sm:py-32 text-slate-400 dark:text-neutral-500 border-2 border-dashed border-slate-200 dark:border-neutral-700 rounded-3xl bg-slate-50/50 dark:bg-neutral-800/50">
                 <div className="w-20 h-20 bg-white dark:bg-slate-800 rounded-full shadow-sm border border-slate-100 dark:border-slate-700 flex items-center justify-center mb-6">
@@ -983,6 +1057,16 @@ export const Dashboard: React.FC = () => {
             )}
           </div>
         )}
+
+        {/* Infinite Scroll Trigger */}
+        <div ref={loaderRef} className="py-8 flex justify-center items-center h-20">
+          {isFetchingMore && (
+            <div className="flex items-center gap-2 text-indigo-600 font-bold animate-in fade-in slide-in-from-bottom-2">
+              <Loader2 size={24} className="animate-spin" />
+              <span>Loading more...</span>
+            </div>
+          )}
+        </div>
       </div>
 
       <ConfirmModal

frontend/src/pages/Editor.tsx

@@ -85,13 +85,14 @@ const UIOptions = {
   },
 };
 
-// Helper function to generate initials from a name
 const getInitialsFromName = (name: string): string => {
-  const parts = name.trim().split(/\s+/);
+  const trimmed = name.trim();
+  if (!trimmed) return 'U';
+  const parts = trimmed.split(/\s+/).filter(Boolean);
   if (parts.length >= 2) {
-    return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase();
+    return `${parts[0][0]}${parts[parts.length - 1][0]}`.toUpperCase();
   }
-  return name.substring(0, 2).toUpperCase().padEnd(2, name[0] || 'U');
+  return trimmed.slice(0, 2).toUpperCase();
 };
 
 // Helper function to generate a color from a string (consistent hash)
@@ -118,6 +119,7 @@ export const Editor: React.FC = () => {
   const [newName, setNewName] = useState('');
   const [initialData, setInitialData] = useState<any>(null);
   const [isSceneLoading, setIsSceneLoading] = useState(true);
+  const [loadError, setLoadError] = useState<string | null>(null);
   const [isSavingOnLeave, setIsSavingOnLeave] = useState(false);
   const [isHeaderVisible, setIsHeaderVisible] = useState(true);
   const [autoHideEnabled, setAutoHideEnabled] = useState(true);
@@ -326,7 +328,6 @@ export const Editor: React.FC = () => {
         button: data.button || 'up',
         selectedElementIds: data.selectedElementIds || {},
         username: data.username,
-        avatarUrl: data.avatarUrl,
         color: { background: data.color, stroke: data.color },
         id: data.userId,
       });
@@ -664,6 +665,7 @@ export const Editor: React.FC = () => {
     excalidrawAPI.current = null;
     setIsReady(false);
     setIsSceneLoading(true);
+    setLoadError(null);
     setInitialData(null);
 
     const loadData = async () => {
@@ -712,11 +714,26 @@ export const Editor: React.FC = () => {
         });
       } catch (err) {
         console.error('Failed to load drawing', err);
-        toast.error("Failed to load drawing");
+        let message = "Failed to load drawing";
+        if (api.isAxiosError(err)) {
+          const responseMessage =
+            typeof err.response?.data?.message === "string"
+              ? err.response.data.message
+              : null;
+          if (responseMessage) {
+            message = responseMessage;
+          } else if (err.response?.status === 403) {
+            message = "You do not have access to this drawing";
+          } else if (err.response?.status === 404) {
+            message = "Drawing not found";
+          }
+        }
+        toast.error(message);
         latestElementsRef.current = [];
         latestFilesRef.current = {};
         lastSyncedFilesRef.current = {};
-        setInitialData(buildEmptyScene());
+        setLoadError(message);
+        setInitialData(null);
       } finally {
         setIsSceneLoading(false);
       }
@@ -1014,7 +1031,24 @@ export const Editor: React.FC = () => {
           marginTop: isHeaderVisible ? '3.5rem' : '0'
         }}
       >
-        {initialData ? (
+        {loadError ? (
+          <div className="absolute inset-0 flex flex-col items-center justify-center gap-4 bg-white dark:bg-neutral-950 px-6">
+            <div className="text-center">
+              <h2 className="text-xl font-bold text-gray-900 dark:text-gray-100">
+                Unable to open drawing
+              </h2>
+              <p className="mt-2 text-sm text-gray-600 dark:text-gray-400">
+                {loadError}
+              </p>
+            </div>
+            <button
+              onClick={() => navigate('/')}
+              className="px-4 py-2 rounded-lg border-2 border-black dark:border-neutral-700 bg-white dark:bg-neutral-900 text-gray-900 dark:text-gray-100 font-semibold hover:bg-gray-50 dark:hover:bg-neutral-800 transition-colors"
+            >
+              Back to dashboard
+            </button>
+          </div>
+        ) : initialData ? (
           <Excalidraw
             key={id}
             theme={theme === 'dark' ? 'dark' : 'light'}

frontend/src/pages/Settings.tsx

@@ -255,17 +255,17 @@ export const Settings: React.FC = () => {
                             Exports an `.excalidash` archive (zip) organized by collections
                         </p>
                     </div>
-                    <div className="w-full flex items-center gap-2 pt-2">
+                    <div className="w-full flex flex-col items-stretch gap-2 pt-2">
                         <button
                             onClick={exportBackup}
-                            className="flex-1 px-4 py-2 text-sm font-bold rounded-xl border-2 border-black dark:border-neutral-700 bg-indigo-600 text-white shadow-[2px_2px_0px_0px_rgba(0,0,0,1)] hover:-translate-y-0.5 transition-all"
+                            className="w-full px-4 py-2 text-sm font-bold rounded-xl border-2 border-black dark:border-neutral-700 bg-indigo-600 text-white shadow-[2px_2px_0px_0px_rgba(0,0,0,1)] hover:-translate-y-0.5 transition-all"
                         >
                             Export
                         </button>
                         <select
                             value={backupExportExt}
                             onChange={(e) => setBackupExportExt(e.target.value as any)}
-                            className="px-3 py-2 text-sm font-bold rounded-xl border-2 border-slate-200 dark:border-neutral-700 bg-white dark:bg-neutral-800 text-slate-900 dark:text-white"
+                            className="w-full px-3 py-2 text-sm font-bold rounded-xl border-2 border-slate-200 dark:border-neutral-700 bg-white dark:bg-neutral-800 text-slate-900 dark:text-white"
                             title="Download name"
                         >
                             <option value="excalidash">.excalidash</option>

frontend/src/utils/identity.ts

@@ -5,6 +5,8 @@ export interface UserIdentity {
   color: string;
 }
 
+const DEVICE_ID_KEY = "excalidash-device-id";
+
 const TRANSFORMERS = [
   { name: "Optimus Prime", initials: "OP" },
   { name: "Megatron", initials: "ME" },
@@ -80,6 +82,17 @@ const COLORS = [
   "#f43f5e", // rose-500
 ];
 
+const ALPHABET = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
+
+const hashString = (input: string): number => {
+  let hash = 0x811c9dc5;
+  for (let i = 0; i < input.length; i += 1) {
+    hash ^= input.charCodeAt(i);
+    hash = Math.imul(hash, 0x01000193);
+  }
+  return hash >>> 0;
+};
+
 const generateClientId = (): string => {
   const cryptoObj: Crypto | undefined =
     typeof globalThis !== "undefined"
@@ -105,20 +118,42 @@ const generateClientId = (): string => {
   return `id-${Date.now().toString(16)}-${Math.random().toString(16).slice(2)}`;
 };
 
+export const getOrCreateBrowserFingerprint = (): string => {
+  const existing = localStorage.getItem(DEVICE_ID_KEY);
+  if (existing) return existing;
+  const generated = generateClientId();
+  localStorage.setItem(DEVICE_ID_KEY, generated);
+  return generated;
+};
+
+export const getFingerprintInitials = (seed?: string): string => {
+  const fingerprint = seed || getOrCreateBrowserFingerprint();
+  const hash = hashString(fingerprint);
+  const first = ALPHABET[hash % ALPHABET.length];
+  const second = ALPHABET[Math.floor(hash / ALPHABET.length) % ALPHABET.length];
+  return `${first}${second}`;
+};
+
 export const getUserIdentity = (): UserIdentity => {
   const stored = localStorage.getItem("excalidash-user-id");
   if (stored) {
-    return JSON.parse(stored);
+    const parsed = JSON.parse(stored) as UserIdentity;
+    if (!parsed.initials || parsed.initials.length !== 2) {
+      parsed.initials = getFingerprintInitials(parsed.id);
+      localStorage.setItem("excalidash-user-id", JSON.stringify(parsed));
+    }
+    return parsed;
   }
 
+  const deviceId = getOrCreateBrowserFingerprint();
   const randomTransformer =
     TRANSFORMERS[Math.floor(Math.random() * TRANSFORMERS.length)];
   const randomColor = COLORS[Math.floor(Math.random() * COLORS.length)];
 
   const identity: UserIdentity = {
-    id: generateClientId(),
+    id: deviceId,
     name: randomTransformer.name,
-    initials: randomTransformer.initials,
+    initials: getFingerprintInitials(deviceId),
     color: randomColor,
   };