From 35504cc8bd6f9921291fb565633d549388a3f948 Mon Sep 17 00:00:00 2001
From: boojack <stevenlgtm@gmail.com>
Date: Tue, 14 Apr 2026 09:08:17 +0800
Subject: [PATCH] feat(web): add demo mode banner (#5836)

---
 web/src/layouts/MainLayout.tsx |  9 +++------
 web/src/layouts/RootLayout.tsx | 22 ++++++++++++++++++++++
 web/src/locales/en.json        |  5 +++++
 web/src/locales/zh-Hans.json   |  5 +++++
 web/src/locales/zh-Hant.json   |  4 ++++
 5 files changed, 39 insertions(+), 6 deletions(-)

diff --git a/web/src/layouts/MainLayout.tsx b/web/src/layouts/MainLayout.tsx
index 44a7e434d..63b366a19 100644
--- a/web/src/layouts/MainLayout.tsx
+++ b/web/src/layouts/MainLayout.tsx
@@ -13,11 +13,8 @@ import { Routes } from "@/router";
 const ARCHIVED_ROUTE = "/archived";
 const PROFILE_ROUTE = "/u/:username";
 const DESKTOP_EXPLORER_WIDTH_CLASS = "w-64";
-const DESKTOP_EXPLORER_CLASS_NAME = cn(
-  "fixed top-0 left-16 h-svh shrink-0 border-r border-border transition-all",
-  DESKTOP_EXPLORER_WIDTH_CLASS,
-);
-const MAIN_CONTENT_CLASS_NAME = cn("w-full min-h-full", "md:pl-64");
+const DESKTOP_EXPLORER_CLASS_NAME = cn("sticky top-0 h-svh shrink-0 border-r border-border transition-all", DESKTOP_EXPLORER_WIDTH_CLASS);
+const MAIN_CONTENT_CLASS_NAME = "w-full min-h-full min-w-0 flex-1";
 
 const MainLayout = () => {
   const md = useMediaQuery("md");
@@ -71,7 +68,7 @@ const MainLayout = () => {
   const memoExplorerProps = { context, statisticsData: statistics, tagCount: tags };
 
   return (
-    <section className="@container w-full min-h-full flex flex-col justify-start items-center">
+    <section className="@container w-full min-h-full flex flex-col justify-start items-center md:flex-row md:items-start">
       {!md && (
         <MobileHeader>
           <MemoExplorerDrawer {...memoExplorerProps} />
diff --git a/web/src/layouts/RootLayout.tsx b/web/src/layouts/RootLayout.tsx
index 3a2bb6f73..a0ab5f4c5 100644
--- a/web/src/layouts/RootLayout.tsx
+++ b/web/src/layouts/RootLayout.tsx
@@ -2,6 +2,7 @@ import { useEffect, useMemo } from "react";
 import { Outlet, useLocation, useSearchParams } from "react-router-dom";
 import usePrevious from "react-use/lib/usePrevious";
 import Navigation from "@/components/Navigation";
+import { useInstance } from "@/contexts/InstanceContext";
 import { useMemoFilterContext } from "@/contexts/MemoFilterContext";
 import useCurrentUser from "@/hooks/useCurrentUser";
 import useMediaQuery from "@/hooks/useMediaQuery";
@@ -9,6 +10,25 @@ import useNavigateTo from "@/hooks/useNavigateTo";
 import { cn } from "@/lib/utils";
 import { ROUTES } from "@/router/routes";
 import { redirectOnAuthFailure } from "@/utils/auth-redirect";
+import { useTranslate } from "@/utils/i18n";
+
+const MEMOS_DEPLOY_URL = "https://usememos.com/docs/deploy";
+
+const DemoBanner = () => {
+  const t = useTranslate();
+
+  return (
+    <div className="static w-full border-b border-border bg-muted/70 px-4 py-2 text-sm text-muted-foreground sm:px-6">
+      <div className="mx-auto flex max-w-5xl flex-col items-start gap-1 sm:flex-row sm:items-center sm:justify-center sm:gap-2">
+        <span className="font-medium text-foreground">{t("demo.banner-title")}</span>
+        <span>{t("demo.banner-description")}</span>
+        <a className="font-medium text-primary underline-offset-4 hover:underline" href={MEMOS_DEPLOY_URL} target="_blank" rel="noreferrer">
+          {t("demo.deploy-link")}
+        </a>
+      </div>
+    </div>
+  );
+};
 
 const RootLayout = () => {
   const location = useLocation();
@@ -16,6 +36,7 @@ const RootLayout = () => {
   const sm = useMediaQuery("sm");
   const currentUser = useCurrentUser();
   const navigateTo = useNavigateTo();
+  const { profile } = useInstance();
   const { removeFilter } = useMemoFilterContext();
   const pathname = useMemo(() => location.pathname, [location.pathname]);
   const prevPathname = usePrevious(pathname);
@@ -51,6 +72,7 @@ const RootLayout = () => {
         </div>
       )}
       <main className="w-full h-auto grow shrink flex flex-col justify-start items-center">
+        {profile.demo && <DemoBanner />}
         <Outlet />
       </main>
     </div>
diff --git a/web/src/locales/en.json b/web/src/locales/en.json
index 9633d37cb..9b24142a7 100644
--- a/web/src/locales/en.json
+++ b/web/src/locales/en.json
@@ -16,6 +16,11 @@
     "sign-in-tip": "Already have an account?",
     "sign-up-tip": "Don't have an account yet?"
   },
+  "demo": {
+    "banner-description": "Changes are temporary and may be reset.",
+    "banner-title": "Memos demo",
+    "deploy-link": "Deploy your Memos"
+  },
   "attachment-library": {
     "actions": {
       "open": "Open",
diff --git a/web/src/locales/zh-Hans.json b/web/src/locales/zh-Hans.json
index 333e2a77a..01d36a193 100644
--- a/web/src/locales/zh-Hans.json
+++ b/web/src/locales/zh-Hans.json
@@ -15,6 +15,11 @@
     "sign-in-tip": "已有账户？",
     "sign-up-tip": "还没有账户？"
   },
+  "demo": {
+    "banner-description": "这里的改动是临时的，可能会被重置。",
+    "banner-title": "Memos 演示站",
+    "deploy-link": "部署你的 Memos"
+  },
   "common": {
     "about": "关于",
     "add": "增加",
diff --git a/web/src/locales/zh-Hant.json b/web/src/locales/zh-Hant.json
index 9a4beaf08..8f4ae0b94 100644
--- a/web/src/locales/zh-Hant.json
+++ b/web/src/locales/zh-Hant.json
@@ -15,6 +15,10 @@
     "sign-in-tip": "已經有帳戶了嗎？",
     "sign-up-tip": "還沒有帳戶嗎？"
   },
+  "demo": {
+    "banner-description": "這裡的改動是暫時的，可能會被重置。",
+    "banner-title": "Memos 演示站"
+  },
   "common": {
     "about": "關於",
     "add": "新增",