🤖 feat: move Mux logo from TitleBar to Projects header

ammar-agent · ammar-agent · commit 4d1a6be435f9 · 2026-01-15T11:32:35.000-06:00
- Replace 'Projects' h2 text with theme-aware MuxLogo component
- Align logo with project chevrons (pl-4) and increase size (h-5)
- Remove logo and shimmer animation from TitleBar
- Keep update indicator (spinner/badge) and version/build metadata tooltip
- Reduce desktop titlebar height from 40px to 36px (h-9)
- Add DESKTOP_TITLEBAR_HEIGHT_CLASS constants to avoid duplication
diff --git a/src/browser/components/ProjectSidebar.tsx b/src/browser/components/ProjectSidebar.tsx
@@ -1,6 +1,9 @@
 import React, { useState, useEffect, useCallback } from "react";
 import { cn } from "@/common/lib/utils";
 import { isDesktopMode } from "@/browser/hooks/useDesktopTitlebar";
+import MuxLogoDark from "@/browser/assets/logos/mux-logo-dark.svg?react";
+import MuxLogoLight from "@/browser/assets/logos/mux-logo-light.svg?react";
+import { useTheme } from "@/browser/contexts/ThemeContext";
 import type { FrontendWorkspaceMetadata } from "@/common/types/workspace";
 import { usePersistedState } from "@/browser/hooks/usePersistedState";
 import { EXPANDED_PROJECTS_KEY } from "@/common/constants/storage";
@@ -241,6 +244,10 @@ const ProjectSidebarInner: React.FC<ProjectSidebarProps> = ({
     assignWorkspaceToSection,
   } = useProjectContext();
 
+  // Theme for logo variant
+  const { theme } = useTheme();
+  const MuxLogo = theme === "dark" || theme === "solarized-dark" ? MuxLogoDark : MuxLogoLight;
+
   // Mobile breakpoint for auto-closing sidebar
   const MOBILE_BREAKPOINT = 768;
 
@@ -483,8 +490,8 @@ const ProjectSidebarInner: React.FC<ProjectSidebarProps> = ({
         >
           {!collapsed && (
             <>
-              <div className="border-dark flex items-center justify-between border-b p-4">
-                <h2 className="text-foreground m-0 text-lg font-medium">Projects</h2>
+              <div className="border-dark flex items-center justify-between border-b py-3 pr-3 pl-4">
+                <MuxLogo className="h-5 w-[44px]" aria-label="Projects" />
                 <button
                   onClick={onAddProject}
                   aria-label="Add project"
diff --git a/src/browser/components/RightSidebar/RightSidebarTabStrip.tsx b/src/browser/components/RightSidebar/RightSidebarTabStrip.tsx
@@ -6,7 +6,11 @@ import { CSS } from "@dnd-kit/utilities";
 import { useDroppable, useDndContext } from "@dnd-kit/core";
 import { Plus } from "lucide-react";
 import type { TabType } from "@/browser/types/rightSidebar";
-import { isDesktopMode, getTitlebarRightInset } from "@/browser/hooks/useDesktopTitlebar";
+import {
+  isDesktopMode,
+  getTitlebarRightInset,
+  DESKTOP_TITLEBAR_MIN_HEIGHT_CLASS,
+} from "@/browser/hooks/useDesktopTitlebar";
 
 // Re-export for consumers that import from this file
 export { getTabName } from "./tabs";
@@ -141,7 +145,7 @@ export const RightSidebarTabStrip: React.FC<RightSidebarTabStripProps> = ({
       ref={setNodeRef}
       className={cn(
         "border-border-light flex min-w-0 items-center border-b px-2 transition-colors",
-        isDesktop ? "min-h-10" : "py-1.5",
+        isDesktop ? DESKTOP_TITLEBAR_MIN_HEIGHT_CLASS : "py-1.5",
         showDropHighlight && "bg-accent/30",
         isDraggingFromHere && "bg-accent/10",
         // In desktop mode, make header draggable for window movement
diff --git a/src/browser/components/TitleBar.tsx b/src/browser/components/TitleBar.tsx
@@ -7,12 +7,12 @@ import type { UpdateStatus } from "@/common/orpc/types";
 import { Download, Loader2, RefreshCw } from "lucide-react";
 
 import { useTutorial } from "@/browser/contexts/TutorialContext";
-import MuxLogoDark from "@/browser/assets/logos/mux-logo-dark.svg?react";
-import MuxLogoLight from "@/browser/assets/logos/mux-logo-light.svg?react";
-import { useTheme } from "@/browser/contexts/ThemeContext";
-
 import { useAPI } from "@/browser/contexts/API";
-import { isDesktopMode, getTitlebarLeftInset } from "@/browser/hooks/useDesktopTitlebar";
+import {
+  isDesktopMode,
+  getTitlebarLeftInset,
+  DESKTOP_TITLEBAR_HEIGHT_CLASS,
+} from "@/browser/hooks/useDesktopTitlebar";
 
 // Update check intervals
 const UPDATE_CHECK_INTERVAL_MS = 4 * 60 * 60 * 1000; // 4 hours
@@ -75,11 +75,8 @@ function parseBuildInfo(version: unknown) {
 
 export function TitleBar() {
   const { api } = useAPI();
-  const { extendedTimestamp, gitDescribe } = parseBuildInfo(VERSION satisfies unknown);
+  const { buildDate, extendedTimestamp, gitDescribe } = parseBuildInfo(VERSION satisfies unknown);
   const [updateStatus, setUpdateStatus] = useState<UpdateStatus>({ type: "idle" });
-
-  const { theme } = useTheme();
-  const MuxLogo = theme === "dark" || theme === "solarized-dark" ? MuxLogoDark : MuxLogoLight;
   const [isCheckingOnHover, setIsCheckingOnHover] = useState(false);
   const lastHoverCheckTime = useRef<number>(0);
 
@@ -175,7 +172,11 @@ export function TitleBar() {
 
   const getUpdateTooltip = () => {
     const currentVersion = gitDescribe ?? "dev";
-    const lines: React.ReactNode[] = [`Current: ${currentVersion}`];
+    const lines: React.ReactNode[] = [
+      `Current: ${currentVersion}`,
+      `Built: ${buildDate}`,
+      `Built at: ${extendedTimestamp}`,
+    ];
 
     if (!window.api) {
       lines.push("Desktop updates are available in the Electron app only.");
@@ -223,8 +224,6 @@ export function TitleBar() {
     );
   };
 
-  const showUpdateShimmer = updateStatus.type === "available";
-
   const updateBadgeIcon = (() => {
     if (updateStatus.type === "available") {
       return <Download className="size-3.5" />;
@@ -256,7 +255,7 @@ export function TitleBar() {
     <div
       className={cn(
         "bg-sidebar border-border-light font-primary text-muted flex shrink-0 items-center justify-between border-b px-4 text-[11px] select-none",
-        isDesktop ? "h-10" : "h-8",
+        isDesktop ? DESKTOP_TITLEBAR_HEIGHT_CLASS : "h-8",
         // In desktop mode, make header draggable for window movement
         isDesktop && "titlebar-drag"
       )}
@@ -273,63 +272,31 @@ export function TitleBar() {
           <TooltipTrigger asChild>
             <div
               className={cn(
-                "flex items-center gap-1",
+                "flex items-center gap-1.5",
                 isUpdateActionable ? "cursor-pointer hover:opacity-70" : "cursor-default"
               )}
               onClick={handleUpdateClick}
               onMouseEnter={handleIndicatorHover}
             >
               <div
                 className={cn(
-                  "relative overflow-hidden",
-                  leftInset > 0 ? "h-3 w-[26px]" : "h-4 w-[35px]"
-                )}
-              >
-                <MuxLogo
-                  className={cn("block h-full w-full", leftInset > 0 || "-translate-y-px")}
-                />
-                {showUpdateShimmer && (
-                  <div
-                    className="pointer-events-none absolute inset-0 animate-[shimmer-slide_2.5s_infinite_linear]"
-                    data-chromatic="ignore"
-                    style={{
-                      background:
-                        "linear-gradient(90deg, transparent 0%, transparent 40%, color-mix(in srgb, var(--color-accent) 35%, transparent) 50%, transparent 60%, transparent 100%)",
-                      width: "300%",
-                      marginLeft: "-180%",
-                    }}
-                  />
-                )}
-              </div>
-              <div
-                className={cn(
-                  "text-accent flex items-center justify-center",
-                  leftInset > 0 ? "h-3 w-3" : "h-3.5 w-3.5"
+                  "min-w-0 cursor-text truncate font-normal tracking-wider select-text",
+                  leftInset > 0 ? "text-[10px]" : "text-xs"
                 )}
               >
-                {updateBadgeIcon}
+                {gitDescribe ?? "(dev)"}
               </div>
+              {updateBadgeIcon && (
+                <div className="text-accent flex h-3.5 w-3.5 items-center justify-center">
+                  {updateBadgeIcon}
+                </div>
+              )}
             </div>
           </TooltipTrigger>
           <TooltipContent align="start" className="pointer-events-auto">
             {getUpdateTooltip()}
           </TooltipContent>
         </Tooltip>
-        <Tooltip>
-          <TooltipTrigger asChild>
-            <div
-              className={cn(
-                "min-w-0 cursor-text truncate font-normal tracking-wider select-text",
-                leftInset > 0 ? "text-[10px]" : "text-xs"
-              )}
-            >
-              {gitDescribe ?? "(dev)"}
-            </div>
-          </TooltipTrigger>
-          <TooltipContent side="bottom" align="start">
-            Built at {extendedTimestamp}
-          </TooltipContent>
-        </Tooltip>
       </div>
       {isDesktop ? (
         <div className="titlebar-no-drag">
diff --git a/src/browser/components/WorkspaceHeader.tsx b/src/browser/components/WorkspaceHeader.tsx
@@ -16,7 +16,11 @@ import { useTutorial } from "@/browser/contexts/TutorialContext";
 import { useOpenTerminal } from "@/browser/hooks/useOpenTerminal";
 import { useOpenInEditor } from "@/browser/hooks/useOpenInEditor";
 import { usePersistedState } from "@/browser/hooks/usePersistedState";
-import { getTitlebarRightInset, isDesktopMode } from "@/browser/hooks/useDesktopTitlebar";
+import {
+  getTitlebarRightInset,
+  isDesktopMode,
+  DESKTOP_TITLEBAR_HEIGHT_CLASS,
+} from "@/browser/hooks/useDesktopTitlebar";
 import { WorkspaceLinks } from "./WorkspaceLinks";
 
 interface WorkspaceHeaderProps {
@@ -99,7 +103,7 @@ export const WorkspaceHeader: React.FC<WorkspaceHeaderProps> = ({
       data-testid="workspace-header"
       className={cn(
         "bg-sidebar border-border-light flex items-center justify-between border-b px-[15px] [@media(max-width:768px)]:h-auto [@media(max-width:768px)]:flex-wrap [@media(max-width:768px)]:gap-2 [@media(max-width:768px)]:py-2 [@media(max-width:768px)]:pl-[60px]",
-        isDesktop ? "h-10" : "h-8",
+        isDesktop ? DESKTOP_TITLEBAR_HEIGHT_CLASS : "h-8",
         // In desktop mode, make header draggable for window movement
         isDesktop && "titlebar-drag"
       )}
diff --git a/src/browser/hooks/useDesktopTitlebar.ts b/src/browser/hooks/useDesktopTitlebar.ts
@@ -50,6 +50,13 @@ export const MAC_TRAFFIC_LIGHTS_INSET = 80;
  */
 export const WIN_LINUX_OVERLAY_INSET = 138;
 
+/**
+ * Tailwind height classes for the desktop titlebar.
+ * Use these in components that need to align with the titlebar height.
+ */
+export const DESKTOP_TITLEBAR_HEIGHT_CLASS = "h-9"; // 36px
+export const DESKTOP_TITLEBAR_MIN_HEIGHT_CLASS = "min-h-9"; // 36px
+
 /**
  * Returns the left inset needed for macOS traffic lights.
  * Returns 0 if not in desktop mode or not on macOS.
