feat(desktop): help button and settings improvement

apps/desktop/src/renderer/screens/main/components/TopBar/HelpMenu/HelpMenu.tsx → apps/desktop/src/renderer/screens/main/components/HelpMenu/HelpMenu.tsx

@@ -13,8 +13,8 @@ import {
 	HiOutlineBugAnt,
 	HiOutlineCommandLine,
 	HiOutlineEnvelope,
-	HiOutlineQuestionMarkCircle,
 } from "react-icons/hi2";
+import { LuLifeBuoy } from "react-icons/lu";
 import { useOpenSettings } from "renderer/stores";
 import { HOTKEYS } from "shared/hotkeys";
 
@@ -44,18 +44,19 @@ export function HelpMenu() {
 					<DropdownMenuTrigger asChild>
 						<button
 							type="button"
-							className="no-drag flex h-8 w-8 items-center justify-center rounded-md text-accent-foreground hover:bg-accent hover:text-accent-foreground transition-colors"
+							className="flex items-center gap-1.5 h-[22px] px-2 rounded border border-foreground/15 bg-foreground/[0.03] hover:bg-foreground/[0.08] hover:border-foreground/25 text-foreground/70 hover:text-foreground/90 transition-all text-[11px] font-medium"
 							aria-label="Help menu"
 						>
-							<HiOutlineQuestionMarkCircle className="h-4 w-4" />
+							<LuLifeBuoy className="size-3.5" />
+							<span>Help</span>
 						</button>
 					</DropdownMenuTrigger>
 				</TooltipTrigger>
-				<TooltipContent side="bottom" showArrow={false}>
-					Help
+				<TooltipContent side="top" sideOffset={8}>
+					Get help & support
 				</TooltipContent>
 			</Tooltip>
-			<DropdownMenuContent align="end" side="bottom" className="w-64">
+			<DropdownMenuContent align="start" side="top" className="w-64">
 				<DropdownMenuItem onClick={handleContactUs}>
 					<HiOutlineEnvelope className="h-4 w-4" />
 					Contact Us

apps/desktop/src/renderer/screens/main/components/TopBar/SettingsButton/SettingsButton.tsx → apps/desktop/src/renderer/screens/main/components/SettingsButton/SettingsButton.tsx

@@ -1,6 +1,7 @@
+import { Button } from "@superset/ui/button";
 import { Kbd, KbdGroup } from "@superset/ui/kbd";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@superset/ui/tooltip";
-import { HiOutlineCog6Tooth } from "react-icons/hi2";
+import { CiSettings } from "react-icons/ci";
 import { useOpenSettings } from "renderer/stores";
 import { HOTKEYS } from "shared/hotkeys";
 
@@ -10,18 +11,19 @@ export function SettingsButton() {
 	return (
 		<Tooltip>
 			<TooltipTrigger asChild>
-				<button
-					type="button"
+				<Button
+					variant="ghost"
+					size="icon"
 					onClick={() => openSettings()}
-					className="no-drag flex h-8 w-8 items-center justify-center rounded-md text-accent-foreground hover:bg-accent hover:text-accent-foreground transition-colors"
 					aria-label="Open settings"
+					className="no-drag"
 				>
-					<HiOutlineCog6Tooth className="h-4 w-4" />
-				</button>
+					<CiSettings className="size-5" />
+				</Button>
 			</TooltipTrigger>
-			<TooltipContent side="bottom" showArrow={false}>
+			<TooltipContent side="bottom" sideOffset={8}>
 				<span className="flex items-center gap-2">
-					Settings
+					Open settings
 					<KbdGroup>
 						{HOTKEYS.SHOW_HOTKEYS.display.map((key) => (
 							<Kbd key={key}>{key}</Kbd>

apps/desktop/src/renderer/screens/main/components/StartView/StartTopBar.tsx

@@ -1,5 +1,5 @@
 import { trpc } from "renderer/lib/trpc";
-import { SettingsButton } from "../TopBar/SettingsButton";
+import { SettingsButton } from "../SettingsButton";
 import { WindowControls } from "../TopBar/WindowControls";
 
 export function StartTopBar() {

apps/desktop/src/renderer/screens/main/components/TopBar/index.tsx

@@ -1,6 +1,5 @@
 import { trpc } from "renderer/lib/trpc";
-import { HelpMenu } from "./HelpMenu";
-import { SettingsButton } from "./SettingsButton";
+import { SettingsButton } from "../SettingsButton";
 import { SidebarControl } from "./SidebarControl";
 import { WindowControls } from "./WindowControls";
 import { WorkspacesTabs } from "./WorkspaceTabs";
@@ -23,7 +22,6 @@ export function TopBar() {
 			</div>
 			<div className="flex items-center h-full pr-4">
 				<SettingsButton />
-				<HelpMenu />
 				{!isMac && <WindowControls />}
 			</div>
 		</div>

apps/desktop/src/renderer/screens/main/components/WorkspaceView/WorkspaceHeader/WorkspaceHeader.tsx

@@ -20,6 +20,7 @@ import {
 	JETBRAINS_OPTIONS,
 } from "renderer/components/OpenInButton";
 import { trpc } from "renderer/lib/trpc";
+import { HelpMenu } from "../../HelpMenu";
 
 interface WorkspaceHeaderProps {
 	worktreePath: string | undefined;
@@ -97,8 +98,9 @@ export function WorkspaceHeader({ worktreePath }: WorkspaceHeaderProps) {
 
 	return (
 		<div className="h-8 w-full flex items-center justify-between px-3 border-t border-border/50 bg-muted/40 text-[11px] shrink-0 select-none">
-			{/* Left side - Branch info (read-only) */}
+			{/* Left side - Help and Branch info */}
 			<div className="flex items-center gap-2">
+				<HelpMenu />
 				{currentBranch && (
 					<Tooltip>
 						<TooltipTrigger asChild>