From 8b9c09d99438e2748bc5fd9003605eec3db2e1b6 Mon Sep 17 00:00:00 2001
From: Jason <farion1231@gmail.com>
Date: Sat, 21 Feb 2026 17:04:29 +0800
Subject: [PATCH] feat(toolbar): add fade transition when switching between
 OpenClaw and other apps

---
 src/App.tsx | 193 +++++++++++++++++++++++++++-------------------------
 1 file changed, 102 insertions(+), 91 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 7fcb9cf52..0b6f0f64e 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1075,97 +1075,108 @@ function App() {
                 />
 
                 <div className="flex items-center gap-1 p-1 bg-muted rounded-xl">
-                  {activeApp === "openclaw" ? (
-                    <>
-                      <Button
-                        variant="ghost"
-                        size="sm"
-                        onClick={() => setCurrentView("workspace")}
-                        className="text-muted-foreground hover:text-foreground hover:bg-black/5 dark:hover:bg-white/5"
-                        title={t("workspace.manage")}
-                      >
-                        <FolderOpen className="w-4 h-4" />
-                      </Button>
-                      <Button
-                        variant="ghost"
-                        size="sm"
-                        onClick={() => setCurrentView("openclawEnv")}
-                        className="text-muted-foreground hover:text-foreground hover:bg-black/5 dark:hover:bg-white/5"
-                        title={t("openclaw.env.title")}
-                      >
-                        <KeyRound className="w-4 h-4" />
-                      </Button>
-                      <Button
-                        variant="ghost"
-                        size="sm"
-                        onClick={() => setCurrentView("openclawTools")}
-                        className="text-muted-foreground hover:text-foreground hover:bg-black/5 dark:hover:bg-white/5"
-                        title={t("openclaw.tools.title")}
-                      >
-                        <Shield className="w-4 h-4" />
-                      </Button>
-                      <Button
-                        variant="ghost"
-                        size="sm"
-                        onClick={() => setCurrentView("openclawAgents")}
-                        className="text-muted-foreground hover:text-foreground hover:bg-black/5 dark:hover:bg-white/5"
-                        title={t("openclaw.agents.title")}
-                      >
-                        <Cpu className="w-4 h-4" />
-                      </Button>
-                    </>
-                  ) : (
-                    <>
-                      <Button
-                        variant="ghost"
-                        size="sm"
-                        onClick={() => setCurrentView("skills")}
-                        className={cn(
-                          "text-muted-foreground hover:text-foreground hover:bg-black/5 dark:hover:bg-white/5",
-                          "transition-all duration-200 ease-in-out overflow-hidden",
-                          hasSkillsSupport
-                            ? "opacity-100 w-8 scale-100 px-2"
-                            : "opacity-0 w-0 scale-75 pointer-events-none px-0 -ml-1",
-                        )}
-                        title={t("skills.manage")}
-                      >
-                        <Wrench className="flex-shrink-0 w-4 h-4" />
-                      </Button>
-                      <Button
-                        variant="ghost"
-                        size="sm"
-                        onClick={() => setCurrentView("prompts")}
-                        className="text-muted-foreground hover:text-foreground hover:bg-black/5 dark:hover:bg-white/5"
-                        title={t("prompts.manage")}
-                      >
-                        <Book className="w-4 h-4" />
-                      </Button>
-                      <Button
-                        variant="ghost"
-                        size="sm"
-                        onClick={() => setCurrentView("sessions")}
-                        className={cn(
-                          "text-muted-foreground hover:text-foreground hover:bg-black/5 dark:hover:bg-white/5",
-                          "transition-all duration-200 ease-in-out overflow-hidden",
-                          hasSessionSupport
-                            ? "opacity-100 w-8 scale-100 px-2"
-                            : "opacity-0 w-0 scale-75 pointer-events-none px-0 -ml-1",
-                        )}
-                        title={t("sessionManager.title")}
-                      >
-                        <History className="flex-shrink-0 w-4 h-4" />
-                      </Button>
-                      <Button
-                        variant="ghost"
-                        size="sm"
-                        onClick={() => setCurrentView("mcp")}
-                        className="text-muted-foreground hover:text-foreground hover:bg-black/5 dark:hover:bg-white/5"
-                        title={t("mcp.title")}
-                      >
-                        <McpIcon size={16} />
-                      </Button>
-                    </>
-                  )}
+                  <AnimatePresence mode="wait">
+                    <motion.div
+                      key={activeApp === "openclaw" ? "openclaw" : "default"}
+                      className="flex items-center gap-1"
+                      initial={{ opacity: 0 }}
+                      animate={{ opacity: 1 }}
+                      exit={{ opacity: 0 }}
+                      transition={{ duration: 0.15 }}
+                    >
+                      {activeApp === "openclaw" ? (
+                        <>
+                          <Button
+                            variant="ghost"
+                            size="sm"
+                            onClick={() => setCurrentView("workspace")}
+                            className="text-muted-foreground hover:text-foreground hover:bg-black/5 dark:hover:bg-white/5"
+                            title={t("workspace.manage")}
+                          >
+                            <FolderOpen className="w-4 h-4" />
+                          </Button>
+                          <Button
+                            variant="ghost"
+                            size="sm"
+                            onClick={() => setCurrentView("openclawEnv")}
+                            className="text-muted-foreground hover:text-foreground hover:bg-black/5 dark:hover:bg-white/5"
+                            title={t("openclaw.env.title")}
+                          >
+                            <KeyRound className="w-4 h-4" />
+                          </Button>
+                          <Button
+                            variant="ghost"
+                            size="sm"
+                            onClick={() => setCurrentView("openclawTools")}
+                            className="text-muted-foreground hover:text-foreground hover:bg-black/5 dark:hover:bg-white/5"
+                            title={t("openclaw.tools.title")}
+                          >
+                            <Shield className="w-4 h-4" />
+                          </Button>
+                          <Button
+                            variant="ghost"
+                            size="sm"
+                            onClick={() => setCurrentView("openclawAgents")}
+                            className="text-muted-foreground hover:text-foreground hover:bg-black/5 dark:hover:bg-white/5"
+                            title={t("openclaw.agents.title")}
+                          >
+                            <Cpu className="w-4 h-4" />
+                          </Button>
+                        </>
+                      ) : (
+                        <>
+                          <Button
+                            variant="ghost"
+                            size="sm"
+                            onClick={() => setCurrentView("skills")}
+                            className={cn(
+                              "text-muted-foreground hover:text-foreground hover:bg-black/5 dark:hover:bg-white/5",
+                              "transition-all duration-200 ease-in-out overflow-hidden",
+                              hasSkillsSupport
+                                ? "opacity-100 w-8 scale-100 px-2"
+                                : "opacity-0 w-0 scale-75 pointer-events-none px-0 -ml-1",
+                            )}
+                            title={t("skills.manage")}
+                          >
+                            <Wrench className="flex-shrink-0 w-4 h-4" />
+                          </Button>
+                          <Button
+                            variant="ghost"
+                            size="sm"
+                            onClick={() => setCurrentView("prompts")}
+                            className="text-muted-foreground hover:text-foreground hover:bg-black/5 dark:hover:bg-white/5"
+                            title={t("prompts.manage")}
+                          >
+                            <Book className="w-4 h-4" />
+                          </Button>
+                          <Button
+                            variant="ghost"
+                            size="sm"
+                            onClick={() => setCurrentView("sessions")}
+                            className={cn(
+                              "text-muted-foreground hover:text-foreground hover:bg-black/5 dark:hover:bg-white/5",
+                              "transition-all duration-200 ease-in-out overflow-hidden",
+                              hasSessionSupport
+                                ? "opacity-100 w-8 scale-100 px-2"
+                                : "opacity-0 w-0 scale-75 pointer-events-none px-0 -ml-1",
+                            )}
+                            title={t("sessionManager.title")}
+                          >
+                            <History className="flex-shrink-0 w-4 h-4" />
+                          </Button>
+                          <Button
+                            variant="ghost"
+                            size="sm"
+                            onClick={() => setCurrentView("mcp")}
+                            className="text-muted-foreground hover:text-foreground hover:bg-black/5 dark:hover:bg-white/5"
+                            title={t("mcp.title")}
+                          >
+                            <McpIcon size={16} />
+                          </Button>
+                        </>
+                      )}
+                    </motion.div>
+                  </AnimatePresence>
                 </div>
 
                 <Button