From a92f094483ff77f18eb2eba4213f0006859a0fdc Mon Sep 17 00:00:00 2001
From: d-kimsuon <dev.kimuson@gmail.com>
Date: Mon, 20 Oct 2025 05:26:50 +0900
Subject: [PATCH] feat: enhance MobileSidebar with system information tab

- Updated MobileSidebar to include a new "system-info" tab for displaying system information.
- Added SystemInfoCard component and integrated it into the sidebar.
- Modified state management to accommodate the new tab and updated tab click handling.
- Improved UI with an Info icon for the new tab, enhancing user navigation.
---
 .../sessionSidebar/MobileSidebar.tsx          | 39 +++++++++++++++++--
 src/app/projects/page.tsx                     |  2 +-
 2 files changed, 36 insertions(+), 5 deletions(-)

diff --git a/src/app/projects/[projectId]/sessions/[sessionId]/components/sessionSidebar/MobileSidebar.tsx b/src/app/projects/[projectId]/sessions/[sessionId]/components/sessionSidebar/MobileSidebar.tsx
index 5cb1703..5bc11b5 100644
--- a/src/app/projects/[projectId]/sessions/[sessionId]/components/sessionSidebar/MobileSidebar.tsx
+++ b/src/app/projects/[projectId]/sessions/[sessionId]/components/sessionSidebar/MobileSidebar.tsx
@@ -3,6 +3,7 @@
 import { Trans, useLingui } from "@lingui/react";
 import {
   ArrowLeftIcon,
+  InfoIcon,
   MessageSquareIcon,
   PlugIcon,
   SettingsIcon,
@@ -13,6 +14,7 @@ import { type FC, Suspense, useEffect, useState } from "react";
 import { createPortal } from "react-dom";
 import { NotificationSettings } from "@/components/NotificationSettings";
 import { SettingsControls } from "@/components/SettingsControls";
+import { SystemInfoCard } from "@/components/SystemInfoCard";
 import { Button } from "@/components/ui/button";
 import {
   Tooltip,
@@ -46,9 +48,9 @@ export const MobileSidebar: FC<MobileSidebarProps> = ({
     isFetchingNextPage,
   } = useProject(projectId);
   const sessions = projectData.pages.flatMap((page) => page.sessions);
-  const [activeTab, setActiveTab] = useState<"sessions" | "mcp" | "settings">(
-    "sessions",
-  );
+  const [activeTab, setActiveTab] = useState<
+    "sessions" | "mcp" | "settings" | "system-info"
+  >("sessions");
   const [mounted, setMounted] = useState(false);
 
   // Handle portal mounting
@@ -76,7 +78,9 @@ export const MobileSidebar: FC<MobileSidebarProps> = ({
     };
   }, [isOpen, onClose]);
 
-  const handleTabClick = (tab: "sessions" | "mcp" | "settings") => {
+  const handleTabClick = (
+    tab: "sessions" | "mcp" | "settings" | "system-info",
+  ) => {
     setActiveTab(tab);
   };
 
@@ -144,6 +148,8 @@ export const MobileSidebar: FC<MobileSidebarProps> = ({
             </Suspense>
           </div>
         );
+      case "system-info":
+        return <SystemInfoCard />;
       default:
         return null;
     }
@@ -281,6 +287,31 @@ export const MobileSidebar: FC<MobileSidebarProps> = ({
                   />
                 </TooltipContent>
               </Tooltip>
+
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <button
+                    type="button"
+                    onClick={() => handleTabClick("system-info")}
+                    className={cn(
+                      "w-8 h-8 flex items-center justify-center rounded-md transition-colors",
+                      "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
+                      activeTab === "system-info"
+                        ? "bg-sidebar-accent text-sidebar-accent-foreground shadow-sm"
+                        : "text-sidebar-foreground/70",
+                    )}
+                    data-testid="system-info-tab-button-mobile"
+                  >
+                    <InfoIcon className="w-4 h-4" />
+                  </button>
+                </TooltipTrigger>
+                <TooltipContent side="right">
+                  <Trans
+                    id="system.info.tab.title"
+                    message="Show system information"
+                  />
+                </TooltipContent>
+              </Tooltip>
             </div>
           </TooltipProvider>
         </div>
diff --git a/src/app/projects/page.tsx b/src/app/projects/page.tsx
index 5f234fb..dd43163 100644
--- a/src/app/projects/page.tsx
+++ b/src/app/projects/page.tsx
@@ -14,7 +14,7 @@ export default async function ProjectsPage() {
 
   return (
     <div className="flex h-screen max-h-screen overflow-hidden">
-      <GlobalSidebar className="hidden md:flex" />
+      <GlobalSidebar />
       <div className="flex-1 overflow-auto">
         <div className="container mx-auto px-4 py-8">
           <header className="mb-8">