feat: remove app name and logo customization feature

Users can no longer customize the app name or logo. The branding API
endpoints, permission, frontend UI, env vars (APP_NAME, MAX_LOGO_SIZE_KB),
and all related tests are removed. Includes a migration to clean up
branding data from existing databases.

apps/web/src/components/layout/app-layout.tsx

@@ -1,8 +1,7 @@
 import { FolderOpen, LayoutGrid, Menu, Settings as SettingsIcon, Workflow, X } from "lucide-react";
-import { useEffect, useState } from "react";
+import { useState } from "react";
 import { Link } from "react-router-dom";
 import { useMobile } from "@/hooks/use-mobile";
-import { apiGet } from "@/lib/api";
 import { cn } from "@/lib/utils";
 import { useConnectionStore } from "@/stores/connection-store";
 import { Dropzone } from "../common/dropzone";
@@ -25,16 +24,9 @@ export function AppLayout({ children, showToolPanel = true, onFiles }: AppLayout
   const [helpOpen, setHelpOpen] = useState(false);
   const [mobileSidebarOpen, setMobileSidebarOpen] = useState(false);
   const isMobile = useMobile();
-  const [customLogo, setCustomLogo] = useState(false);
   const connectionStatus = useConnectionStore((s) => s.status);
   const bannerVisible = connectionStatus !== "connected";
 
-  useEffect(() => {
-    apiGet<{ settings: Record<string, string> }>("/v1/settings")
-      .then((data) => setCustomLogo(data.settings.customLogo === "true"))
-      .catch(() => {});
-  }, []);
-
   return (
     <div
       className={cn(
@@ -47,7 +39,6 @@ export function AppLayout({ children, showToolPanel = true, onFiles }: AppLayout
         <Sidebar
           onSettingsClick={() => setSettingsOpen(true)}
           onHelpClick={() => setHelpOpen(true)}
-          customLogo={customLogo}
         />
       )}
 
@@ -61,20 +52,12 @@ export function AppLayout({ children, showToolPanel = true, onFiles }: AppLayout
           />
           <div className="fixed inset-y-0 left-0 z-50 w-64 bg-background border-r border-border shadow-xl animate-in slide-in-from-left">
             <div className="flex items-center justify-between p-3 border-b border-border">
-              {customLogo ? (
-                <img
-                  src="/api/v1/settings/logo"
-                  className="h-6 w-6 rounded object-contain"
-                  alt="Logo"
-                />
-              ) : (
-                <div className="flex items-center gap-2">
-                  <OtterLogo className="h-5 w-5 text-primary" />
-                  <span className="text-sm font-bold text-foreground">
-                    <span className="text-primary">SnapOtter</span>
-                  </span>
-                </div>
-              )}
+              <div className="flex items-center gap-2">
+                <OtterLogo className="h-5 w-5 text-primary" />
+                <span className="text-sm font-bold text-foreground">
+                  <span className="text-primary">SnapOtter</span>
+                </span>
+              </div>
               <button
                 type="button"
                 onClick={() => setMobileSidebarOpen(false)}
@@ -114,20 +97,12 @@ export function AppLayout({ children, showToolPanel = true, onFiles }: AppLayout
           >
             <Menu className="h-5 w-5" />
           </button>
-          {customLogo ? (
-            <img
-              src="/api/v1/settings/logo"
-              className="h-6 w-6 rounded object-contain"
-              alt="Logo"
-            />
-          ) : (
-            <div className="flex items-center gap-2">
-              <OtterLogo className="h-5 w-5 text-primary" />
-              <span className="text-sm font-bold text-foreground">
-                <span className="text-primary">SnapOtter</span>
-              </span>
-            </div>
-          )}
+          <div className="flex items-center gap-2">
+            <OtterLogo className="h-5 w-5 text-primary" />
+            <span className="text-sm font-bold text-foreground">
+              <span className="text-primary">SnapOtter</span>
+            </span>
+          </div>
         </div>
       )}
 

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

@@ -29,8 +29,6 @@ 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({
@@ -38,7 +36,6 @@ export function Sidebar({
   onHelpClick,
   onNavClick,
   expanded = false,
-  customLogo = false,
 }: SidebarProps) {
   const location = useLocation();
 
@@ -103,11 +100,7 @@ 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" />
-        )}
+        <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">

apps/web/src/components/settings/settings-dialog.tsx

@@ -28,7 +28,7 @@ import {
 } from "lucide-react";
 import { Fragment, useCallback, useEffect, useMemo, useState } from "react";
 import { useAuth } from "@/hooks/use-auth";
-import { apiDelete, apiGet, apiPost, apiPut, clearToken, formatHeaders } from "@/lib/api";
+import { apiDelete, apiGet, apiPost, apiPut, clearToken } from "@/lib/api";
 import { cn, copyToClipboard } from "@/lib/utils";
 import { useAnalyticsStore } from "@/stores/analytics-store";
 import { useSettingsStore } from "@/stores/settings-store";
@@ -349,7 +349,6 @@ function SystemSection() {
       .catch(() => {
         // Fallback defaults if endpoint not ready
         setSettings({
-          appName: "SnapOtter",
           fileUploadLimitMb: "100",
           defaultTheme: "system",
           defaultLocale: "en",
@@ -381,37 +380,6 @@ function SystemSection() {
     }
   }, [settings]);
 
-  const handleLogoUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
-    const file = e.target.files?.[0];
-    if (!file) return;
-    const formData = new FormData();
-    formData.append("file", file);
-    try {
-      const res = await fetch("/api/v1/settings/logo", {
-        method: "POST",
-        headers: formatHeaders(),
-        body: formData,
-      });
-      if (!res.ok) {
-        const body = await res.json().catch(() => null);
-        setSaveMsg(body?.error || "Failed to upload logo.");
-        return;
-      }
-      setSettings((prev) => ({ ...prev, customLogo: "true" }));
-    } catch {
-      setSaveMsg("Failed to upload logo.");
-    }
-  };
-
-  const handleLogoDelete = async () => {
-    try {
-      await apiDelete("/v1/settings/logo");
-      setSettings((prev) => ({ ...prev, customLogo: "false" }));
-    } catch {
-      setSaveMsg("Failed to delete logo.");
-    }
-  };
-
   if (loading) {
     return (
       <div className="flex items-center justify-center py-12">
@@ -427,52 +395,6 @@ function SystemSection() {
         <p className="text-sm text-muted-foreground mt-1">Server-side configuration and limits.</p>
       </div>
 
-      <SettingRow label="App Name" description="Display name for the application">
-        <input
-          type="text"
-          value={settings.appName || ""}
-          onChange={(e) => updateSetting("appName", e.target.value)}
-          className="px-3 py-1.5 rounded-lg border border-border bg-background text-sm text-foreground w-48"
-        />
-      </SettingRow>
-
-      <SettingRow
-        label="Custom Logo"
-        description="Upload a custom logo for the sidebar. PNG, SVG, or JPEG. Max 500KB."
-      >
-        <div className="flex items-center gap-3">
-          {settings.customLogo === "true" && (
-            <img
-              src="/api/v1/settings/logo"
-              className="w-10 h-10 rounded object-contain"
-              alt="Logo"
-            />
-          )}
-          <label
-            htmlFor="system-logo-upload"
-            className="px-3 py-1.5 rounded-lg border border-border bg-background text-sm cursor-pointer hover:bg-muted transition-colors"
-          >
-            Upload
-            <input
-              id="system-logo-upload"
-              type="file"
-              accept="image/png,image/jpeg,image/svg+xml"
-              className="hidden"
-              onChange={handleLogoUpload}
-            />
-          </label>
-          {settings.customLogo === "true" && (
-            <button
-              type="button"
-              onClick={handleLogoDelete}
-              className="text-sm text-destructive hover:underline"
-            >
-              Remove
-            </button>
-          )}
-        </div>
-      </SettingRow>
-
       <SettingRow label="File Upload Limit (MB)" description="Maximum file size per upload">
         <input
           type="number"
@@ -1756,7 +1678,6 @@ const PERMISSION_GROUPS = [
   { label: "Settings", permissions: ["settings:read", "settings:write"] },
   { label: "Users", permissions: ["users:manage"] },
   { label: "Teams", permissions: ["teams:manage"] },
-  { label: "Branding", permissions: ["branding:manage"] },
   {
     label: "System",
     permissions: ["features:manage", "system:health", "audit:read"],