fix: custom logo not showing in sidebar and silent upload failures

The desktop sidebar never rendered the custom logo because only mobile
views used the customLogo state. Added a logo section at the top of
the desktop sidebar that displays the custom logo (or the default
OtterLogo when none is set).

The upload handler used raw fetch() without checking response.ok, so
HTTP 4xx errors (e.g. file too large) were silently ignored and the UI
falsely reported success. Now checks response status and surfaces the
server error message.

Closes #125

apps/web/src/components/layout/sidebar.tsx

@@ -2,6 +2,7 @@ import type { LucideIcon } from "lucide-react";
 import { FolderOpen, Grid3x3, HelpCircle, LayoutGrid, Settings, Workflow } from "lucide-react";
 import { Link, useLocation } from "react-router-dom";
 import { cn } from "@/lib/utils";
+import { OtterLogo } from "../common/otter-logo";
 
 interface SidebarItem {
   icon: LucideIcon;
@@ -28,6 +29,8 @@ interface SidebarProps {
   onNavClick?: () => void;
   /** When true, renders in expanded mode (for mobile overlay). */
   expanded?: boolean;
+  /** Whether a custom logo is set. */
+  customLogo?: boolean;
 }
 
 export function Sidebar({
@@ -35,6 +38,7 @@ export function Sidebar({
   onHelpClick,
   onNavClick,
   expanded = false,
+  customLogo = false,
 }: SidebarProps) {
   const location = useLocation();
 
@@ -98,6 +102,14 @@ export function Sidebar({
 
   return (
     <aside className="flex flex-col items-center w-16 bg-sidebar border-r border-border py-3 gap-1 shrink-0">
+      <div className="mb-2 flex items-center justify-center">
+        {customLogo ? (
+          <img src="/api/v1/settings/logo" className="h-8 w-8 rounded object-contain" alt="Logo" />
+        ) : (
+          <OtterLogo className="h-7 w-7 text-primary" />
+        )}
+      </div>
+      <div className="border-t border-border w-10 mb-2" />
       <div className="flex flex-col gap-1 flex-1">
         {topItems.map((item) => renderItem(item, location.pathname === item.href))}
       </div>