From 06609971a7f05e8abc70d08f9cbd3ff5ab1f536d Mon Sep 17 00:00:00 2001
From: Local Admin <root@localhost>
Date: Tue, 27 Jan 2026 00:37:06 +0000
Subject: [PATCH] feat(ui): show selection bar in desktop header

---
 web/src/components/DesktopHeader.tsx | 25 +++++++++++++++++++++++++
 web/src/components/MobileHeader.tsx  | 10 +++++-----
 web/src/layouts/MainLayout.tsx       |  8 +++++++-
 3 files changed, 37 insertions(+), 6 deletions(-)
 create mode 100644 web/src/components/DesktopHeader.tsx

diff --git a/web/src/components/DesktopHeader.tsx b/web/src/components/DesktopHeader.tsx
new file mode 100644
index 000000000..2b6ddfe90
--- /dev/null
+++ b/web/src/components/DesktopHeader.tsx
@@ -0,0 +1,25 @@
+import { Link } from "react-router-dom";
+import { useInstance } from "@/contexts/InstanceContext";
+import UserAvatar from "@/components/UserAvatar";
+
+const DesktopHeader = () => {
+  const { generalSetting } = useInstance();
+  const title = generalSetting.customProfile?.title || "Memos";
+  const avatarUrl = generalSetting.customProfile?.logoUrl || "/full-logo.webp";
+
+  return (
+    <div className="w-full flex flex-col gap-2">
+      <div className="w-full flex flex-row justify-between items-center">
+        <Link to="/" className="flex items-center gap-2 hover:opacity-80 transition-opacity">
+          <UserAvatar className="shrink-0 w-6 h-6 rounded-md" avatarUrl={avatarUrl} />
+          <span className="font-bold text-lg leading-6 text-foreground truncate">{title}</span>
+        </Link>
+        <div className="flex flex-row justify-end items-center">
+          <div id="memo-selection-actions" className="flex flex-row justify-end items-center" />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default DesktopHeader;
diff --git a/web/src/components/MobileHeader.tsx b/web/src/components/MobileHeader.tsx
index 273754b4b..dc7c42d60 100644
--- a/web/src/components/MobileHeader.tsx
+++ b/web/src/components/MobileHeader.tsx
@@ -19,16 +19,16 @@ const MobileHeader = (props: Props) => {
   return (
     <div
       className={cn(
-        "sticky top-0 pt-3 pb-2 sm:pt-2 px-4 sm:px-6 sm:mb-1 bg-background bg-opacity-80 backdrop-blur-lg flex flex-row justify-between items-center w-full h-auto flex-nowrap shrink-0 z-1",
+        "sticky top-0 pt-3 pb-2 sm:pt-2 px-4 sm:px-6 sm:mb-1 bg-background bg-opacity-80 backdrop-blur-lg flex flex-col w-full h-auto shrink-0 z-1",
         offsetTop > 0 && "shadow-md",
         className,
       )}
     >
-      {!sm && <NavigationDrawer />}
-      <div className="w-full flex flex-row justify-end items-center gap-2">
-        <div id="memo-selection-actions" className="flex flex-row justify-end items-center gap-1" />
-        {children}
+      <div className="flex flex-row justify-between items-center w-full flex-nowrap">
+        {!sm && <NavigationDrawer />}
+        <div className="w-full flex flex-row justify-end items-center gap-2">{children}</div>
       </div>
+      <div id="memo-selection-actions" className="mt-2 flex flex-row justify-end items-center" />
     </div>
   );
 };
diff --git a/web/src/layouts/MainLayout.tsx b/web/src/layouts/MainLayout.tsx
index 55570641e..ef413c146 100644
--- a/web/src/layouts/MainLayout.tsx
+++ b/web/src/layouts/MainLayout.tsx
@@ -2,6 +2,7 @@ import { useEffect, useMemo, useState } from "react";
 import { matchPath, Outlet, useLocation } from "react-router-dom";
 import type { MemoExplorerContext } from "@/components/MemoExplorer";
 import { MemoExplorer, MemoExplorerDrawer } from "@/components/MemoExplorer";
+import DesktopHeader from "@/components/DesktopHeader";
 import MobileHeader from "@/components/MobileHeader";
 import { userServiceClient } from "@/connect";
 import useCurrentUser from "@/hooks/useCurrentUser";
@@ -80,7 +81,12 @@ const MainLayout = () => {
         </div>
       )}
       <div className={cn("w-full min-h-full", lg ? "pl-72" : md ? "pl-56" : "")}>
-        <div className={cn("w-full mx-auto px-4 sm:px-6 md:pt-6 pb-8")}>
+        {md && (
+          <div className="sticky top-0 z-1 bg-background/80 backdrop-blur-lg border-b border-border/60 px-4 sm:px-6 py-3">
+            <DesktopHeader />
+          </div>
+        )}
+        <div className={cn("w-full mx-auto px-4 sm:px-6 md:pt-4 pb-8")}>
           <Outlet />
         </div>
       </div>