From 47cb9e8e44f10c4de63a8e906e5acdaf5190e4ba Mon Sep 17 00:00:00 2001
From: oyi77 <oyi77@users.noreply.github.com>
Date: Wed, 1 Apr 2026 03:44:54 +0700
Subject: [PATCH] feat(sidebar): wire whitelabeling settings to sidebar

- Add state for custom app name and logo
- Fetch whitelabeling settings from /api/settings
- Listen for whitelabeling changes via settings event
- Display custom app name when set
- Display custom logo (Base64 or URL) when set
- Fall back to default OmniRoute logo and name
---
 src/shared/components/Sidebar.tsx | 26 ++++++++++++++++++++++++--
 1 file changed, 24 insertions(+), 2 deletions(-)

diff --git a/src/shared/components/Sidebar.tsx b/src/shared/components/Sidebar.tsx
index 2eeb5a3b65..019da21e6b 100644
--- a/src/shared/components/Sidebar.tsx
+++ b/src/shared/components/Sidebar.tsx
@@ -37,11 +37,15 @@ export default function Sidebar({
   const [isDisconnected, setIsDisconnected] = useState(false);
   const [showDebug, setShowDebug] = useState(false);
   const [hiddenSidebarItems, setHiddenSidebarItems] = useState<string[]>([]);
+  const [customAppName, setCustomAppName] = useState<string | null>(null);
+  const [customLogo, setCustomLogo] = useState<string | null>(null);
 
   useEffect(() => {
     const applySettings = (data) => {
       setShowDebug(data?.debugMode === true);
       setHiddenSidebarItems(normalizeHiddenSidebarItems(data?.[HIDDEN_SIDEBAR_ITEMS_SETTING_KEY]));
+      setCustomAppName(data?.instanceName || null);
+      setCustomLogo(data?.customLogoBase64 || data?.customLogoUrl || null);
     };
 
     fetch("/api/settings")
@@ -61,6 +65,16 @@ export default function Sidebar({
           normalizeHiddenSidebarItems(detail[HIDDEN_SIDEBAR_ITEMS_SETTING_KEY])
         );
       }
+
+      if ("instanceName" in detail) {
+        setCustomAppName(detail.instanceName as string || null);
+      }
+
+      if ("customLogoBase64" in detail) {
+        setCustomLogo(detail.customLogoBase64 as string || null);
+      } else if ("customLogoUrl" in detail) {
+        setCustomLogo(detail.customLogoUrl as string || null);
+      }
     };
 
     window.addEventListener(SIDEBAR_SETTINGS_UPDATED_EVENT, handleSettingsUpdated as EventListener);
@@ -221,12 +235,20 @@ export default function Sidebar({
             className={cn("flex items-center", collapsed ? "justify-center" : "gap-3")}
           >
             <div className="flex items-center justify-center size-9 rounded bg-linear-to-br from-[#E54D5E] to-[#C93D4E] shrink-0">
-              <OmniRouteLogo size={20} className="text-white" />
+              {customLogo ? (
+                <img
+                  src={customLogo}
+                  alt={customAppName || APP_CONFIG.name}
+                  className="size-5 object-contain"
+                />
+              ) : (
+                <OmniRouteLogo size={20} className="text-white" />
+              )}
             </div>
             {!collapsed && (
               <div className="flex flex-col">
                 <h1 className="text-lg font-semibold tracking-tight text-text-main">
-                  {APP_CONFIG.name}
+                  {customAppName || APP_CONFIG.name}
                 </h1>
                 <span className="text-xs text-text-muted">v{APP_CONFIG.version}</span>
               </div>