@hienlh/ppm 0.2.20 → 0.2.21

package/src/web/components/layout/mobile-drawer.tsx

@@ -1,95 +1,32 @@
-import { useState, useMemo, useCallback } from "react";
+import { useState, useCallback } from "react";
 import {
-  FolderOpen,
-  Terminal,
-  MessageSquare,
-  GitBranch,
-  GitCommitHorizontal,
-  FileDiff,
-  Settings,
-  X,
-  FileCode,
-  ChevronDown,
-  Check,
-  Plus,
-  Search,
-  Bug,
+  X, Bug, FolderOpen, GitBranch, MessageSquare,
 } from "lucide-react";
-import { useProjectStore, sortByRecent } from "@/stores/project-store";
-import { useTabStore, type TabType } from "@/stores/tab-store";
+import { useProjectStore } from "@/stores/project-store";
 import { useSettingsStore } from "@/stores/settings-store";
-import { cn } from "@/lib/utils";
-import { Separator } from "@/components/ui/separator";
 import { FileTree } from "@/components/explorer/file-tree";
+import { GitStatusPanel } from "@/components/git/git-status-panel";
+import { ChatHistoryPanel } from "@/components/chat/chat-history-panel";
 import { openBugReport } from "@/lib/report-bug";
+import { cn } from "@/lib/utils";
+
+type DrawerTab = "explorer" | "git" | "history";
+
+const TABS: { id: DrawerTab; label: string; icon: React.ElementType }[] = [
+  { id: "explorer", label: "Explorer", icon: FolderOpen },
+  { id: "git", label: "Git", icon: GitBranch },
+  { id: "history", label: "History", icon: MessageSquare },
+];
 
 interface MobileDrawerProps {
   isOpen: boolean;
   onClose: () => void;
 }
 
-const TAB_ICONS: Record<TabType, React.ElementType> = {
-  projects: FolderOpen,
-  terminal: Terminal,
-  chat: MessageSquare,
-  editor: FileCode,
-  "git-graph": GitBranch,
-  "git-status": GitCommitHorizontal,
-  "git-diff": FileDiff,
-  settings: Settings,
-};
-
-const NEW_TAB_OPTIONS: { type: TabType; label: string }[] = [
-  { type: "terminal", label: "Terminal" },
-  { type: "chat", label: "AI Chat" },
-  { type: "git-status", label: "Git Status" },
-  { type: "git-graph", label: "Git Graph" },
-  { type: "settings", label: "Settings" },
-];
-
-/** Max projects shown before needing to search (mobile — larger items) */
-const MAX_VISIBLE_MOBILE = 5;
-
 export function MobileDrawer({ isOpen, onClose }: MobileDrawerProps) {
-  const { projects, activeProject, setActiveProject } = useProjectStore();
-  const openTab = useTabStore((s) => s.openTab);
+  const { activeProject } = useProjectStore();
   const version = useSettingsStore((s) => s.version);
-  const [projectPickerOpen, setProjectPickerOpen] = useState(false);
-  const [query, setQuery] = useState("");
-
-  const sorted = useMemo(() => sortByRecent(projects), [projects]);
-
-  const filtered = useMemo(() => {
-    if (!query.trim()) return sorted.slice(0, MAX_VISIBLE_MOBILE);
-    const q = query.toLowerCase();
-    return sorted.filter(
-      (p) => p.name.toLowerCase().includes(q) || p.path.toLowerCase().includes(q),
-    );
-  }, [sorted, query]);
-
-  const showSearch = projects.length > MAX_VISIBLE_MOBILE || query.length > 0;
-
-  function handleNewTab(type: TabType) {
-    const needsProject =
-      type === "git-graph" || type === "git-status" || type === "git-diff" || type === "terminal" || type === "chat";
-    const metadata = needsProject
-      ? { projectName: activeProject?.name }
-      : undefined;
-    const label = NEW_TAB_OPTIONS.find((o) => o.type === type)?.label ?? type;
-    openTab({ type, title: label, metadata, projectId: activeProject?.name ?? null, closable: true });
-    onClose();
-  }
-
-  function handleSelectProject(project: typeof projects[number]) {
-    setActiveProject(project);
-    setProjectPickerOpen(false);
-    setQuery("");
-  }
-
-  function handleTogglePicker() {
-    setProjectPickerOpen((v) => !v);
-    setQuery("");
-  }
+  const [activeTab, setActiveTab] = useState<DrawerTab>("explorer");
 
   const handleReportBug = useCallback(() => openBugReport(version), [version]);
 
@@ -117,7 +54,9 @@ export function MobileDrawer({ isOpen, onClose }: MobileDrawerProps) {
       >
         {/* Header — logo + close */}
         <div className="flex items-center justify-between px-4 py-3 border-b border-border shrink-0">
-          <span className="text-sm font-bold text-primary tracking-tight">PPM</span>
+          <span className="text-sm font-bold text-primary tracking-tight">
+            {activeProject?.name ?? "PPM"}
+          </span>
           <button
             onClick={onClose}
             className="flex items-center justify-center size-8 rounded-md hover:bg-surface-elevated transition-colors"
@@ -126,118 +65,47 @@ export function MobileDrawer({ isOpen, onClose }: MobileDrawerProps) {
           </button>
         </div>
 
-        {/* File tree — scrollable, takes remaining space */}
-        <div className="flex-1 overflow-y-auto">
-          {activeProject ? (
-            <FileTree onFileOpen={onClose} />
-          ) : (
-            <p className="px-4 py-6 text-xs text-text-secondary text-center">
-              Select a project below
-            </p>
+        {/* Tab content — scrollable */}
+        <div className="flex-1 overflow-y-auto min-h-0">
+          {activeTab === "explorer" && (
+            activeProject ? (
+              <FileTree onFileOpen={onClose} />
+            ) : (
+              <p className="px-4 py-6 text-xs text-text-secondary text-center">
+                Select a project from the bottom nav bar
+              </p>
+            )
+          )}
+          {activeTab === "git" && (
+            <GitStatusPanel metadata={{ projectName: activeProject?.name }} />
+          )}
+          {activeTab === "history" && (
+            <ChatHistoryPanel projectName={activeProject?.name} />
           )}
         </div>
 
-        {/* Bottom section — actions within thumb reach */}
+        {/* Bottom tab bar — thumb-friendly */}
         <div className="shrink-0 border-t border-border">
-          {/* New tab actions */}
-          <div className="px-2 py-2 space-y-0.5">
-            {NEW_TAB_OPTIONS.map((opt) => {
-              const Icon = TAB_ICONS[opt.type];
+          <div className="flex items-center">
+            {TABS.map((tab) => {
+              const Icon = tab.icon;
+              const isActive = activeTab === tab.id;
               return (
                 <button
-                  key={opt.type}
-                  onClick={() => handleNewTab(opt.type)}
-                  className="w-full flex items-center gap-2 px-3 py-2 rounded-md text-sm text-text-secondary hover:bg-surface-elevated hover:text-foreground transition-colors min-h-[40px]"
+                  key={tab.id}
+                  onClick={() => setActiveTab(tab.id)}
+                  className={cn(
+                    "flex-1 flex flex-col items-center gap-0.5 py-2.5 text-[10px] transition-colors",
+                    isActive ? "text-primary" : "text-text-secondary",
+                  )}
                 >
-                  <Icon className="size-4 shrink-0" />
-                  <span>{opt.label}</span>
+                  <Icon className="size-4" />
+                  <span>{tab.label}</span>
                 </button>
               );
             })}
           </div>
 
-          <Separator />
-
-          {/* Project switcher — at very bottom for easy thumb access */}
-          <div className="relative">
-            <button
-              onClick={handleTogglePicker}
-              className="w-full flex items-center gap-2 px-4 py-3 text-left hover:bg-surface-elevated transition-colors"
-            >
-              <FolderOpen className="size-4 text-primary shrink-0" />
-              <span className="text-sm font-medium truncate flex-1">
-                {activeProject?.name ?? "Select Project"}
-              </span>
-              <ChevronDown className={cn(
-                "size-3.5 text-text-subtle shrink-0 transition-transform",
-                projectPickerOpen && "rotate-180",
-              )} />
-            </button>
-
-            {/* Project list popover — opens upward */}
-            {projectPickerOpen && (
-              <div className="absolute bottom-full left-0 right-0 bg-background border border-border rounded-t-lg shadow-lg overflow-hidden">
-                {/* Search */}
-                {showSearch && (
-                  <div className="flex items-center gap-2 px-3 py-2 border-b border-border">
-                    <Search className="size-3.5 text-text-subtle shrink-0" />
-                    <input
-                      type="text"
-                      value={query}
-                      onChange={(e) => setQuery(e.target.value)}
-                      placeholder="Search projects..."
-                      className="flex-1 bg-transparent text-sm outline-none placeholder:text-text-subtle text-text-primary"
-                      autoFocus
-                    />
-                  </div>
-                )}
-
-                {/* Project list */}
-                <div className="max-h-56 overflow-y-auto">
-                  {filtered.map((project) => (
-                    <button
-                      key={project.name}
-                      onClick={() => handleSelectProject(project)}
-                      className={cn(
-                        "w-full flex items-center gap-2.5 px-4 py-2 text-left transition-colors",
-                        activeProject?.name === project.name
-                          ? "bg-accent/10 text-text-primary"
-                          : "text-text-secondary hover:bg-surface-elevated",
-                      )}
-                    >
-                      <FolderOpen className="size-4 shrink-0" />
-                      <div className="flex-1 min-w-0">
-                        <p className="text-sm font-medium truncate">{project.name}</p>
-                        <p className="text-xs text-text-subtle truncate">{project.path}</p>
-                      </div>
-                      {activeProject?.name === project.name && (
-                        <Check className="size-4 text-primary shrink-0" />
-                      )}
-                    </button>
-                  ))}
-                  {filtered.length === 0 && (
-                    <p className="px-4 py-3 text-xs text-text-subtle text-center">
-                      {query ? "No matches" : "No projects"}
-                    </p>
-                  )}
-                </div>
-
-                {/* Add project */}
-                <button
-                  onClick={() => {
-                    setProjectPickerOpen(false);
-                    openTab({ type: "projects", title: "Projects", projectId: null, closable: true });
-                    onClose();
-                  }}
-                  className="w-full flex items-center gap-2 px-4 py-2.5 text-left text-sm text-text-secondary hover:bg-surface-elevated border-t border-border"
-                >
-                  <Plus className="size-4 shrink-0" />
-                  <span>Add Project...</span>
-                </button>
-              </div>
-            )}
-          </div>
-
           {/* Report Bug + Version */}
           <div className="flex items-center justify-between px-4 py-2 border-t border-border">
             {version && <span className="text-[10px] text-text-subtle">v{version}</span>}

package/src/web/components/layout/mobile-nav.tsx

@@ -1,21 +1,32 @@
 import { useState, useEffect, useRef, useCallback } from "react";
 import {
-  FolderOpen, Terminal, MessageSquare, GitBranch, GitCommitHorizontal,
-  FileDiff, FileCode, Settings, Menu, X, ArrowLeft, ArrowRight, SplitSquareVertical, MoveVertical,
+  Terminal, MessageSquare, GitBranch,
+  FileDiff, FileCode, Settings, Menu, X, ArrowLeft, ArrowRight, SplitSquareVertical, MoveVertical, Layers, Plus,
 } from "lucide-react";
 import { usePanelStore } from "@/stores/panel-store";
+import { useProjectStore, resolveOrder } from "@/stores/project-store";
 import { findPanelPosition, MAX_ROWS } from "@/stores/panel-utils";
+import { resolveProjectColor } from "@/lib/project-palette";
+import { getProjectInitials } from "@/lib/project-avatar";
 import type { TabType } from "@/stores/tab-store";
 import { cn } from "@/lib/utils";
 
+const NEW_TAB_OPTIONS: { type: TabType; label: string }[] = [
+  { type: "terminal", label: "Terminal" },
+  { type: "chat", label: "AI Chat" },
+  { type: "git-graph", label: "Git Graph" },
+  { type: "settings", label: "Settings" },
+];
+const NEW_TAB_LABELS: Partial<Record<TabType, string>> = Object.fromEntries(NEW_TAB_OPTIONS.map((o) => [o.type, o.label]));
+
 const TAB_ICONS: Record<TabType, React.ElementType> = {
-  projects: FolderOpen, terminal: Terminal, chat: MessageSquare, editor: FileCode,
-  "git-graph": GitBranch, "git-status": GitCommitHorizontal, "git-diff": FileDiff, settings: Settings,
+  terminal: Terminal, chat: MessageSquare, editor: FileCode,
+  "git-graph": GitBranch, "git-diff": FileDiff, settings: Settings,
 };
 
-interface MobileNavProps { onMenuPress: () => void; }
+interface MobileNavProps { onMenuPress: () => void; onProjectsPress: () => void; }
 
-export function MobileNav({ onMenuPress }: MobileNavProps) {
+export function MobileNav({ onMenuPress, onProjectsPress }: MobileNavProps) {
   const focusedPanelId = usePanelStore((s) => s.focusedPanelId);
   const panel = usePanelStore((s) => s.panels[s.focusedPanelId]);
   const panelCount = usePanelStore((s) => Object.keys(s.panels).length);
@@ -26,6 +37,7 @@ export function MobileNav({ onMenuPress }: MobileNavProps) {
   const prevTabCount = useRef(tabs.length);
 
   const [menuTabId, setMenuTabId] = useState<string | null>(null);
+  const [newTabSheetOpen, setNewTabSheetOpen] = useState(false);
   const longPressTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
 
   useEffect(() => {
@@ -66,6 +78,29 @@ export function MobileNav({ onMenuPress }: MobileNavProps) {
   const menuTab = menuTabId ? tabs.find((t) => t.id === menuTabId) : null;
   const menuTabIdx = menuTabId ? tabs.findIndex((t) => t.id === menuTabId) : -1;
 
+  const { activeProject: activeProjectForTab } = useProjectStore.getState();
+  function handleNewTab(type: TabType) {
+    const needsProject = type === "git-graph" || type === "git-diff" || type === "terminal" || type === "chat";
+    const metadata = needsProject ? { projectName: activeProjectForTab?.name } : undefined;
+    usePanelStore.getState().openTab(
+      { type, title: NEW_TAB_LABELS[type] ?? type, metadata, projectId: activeProjectForTab?.name ?? null, closable: true },
+      focusedPanelId,
+    );
+    setNewTabSheetOpen(false);
+  }
+
+  // Active project avatar for the Projects button
+  const { activeProject, projects, customOrder } = useProjectStore();
+  const ordered = resolveOrder(projects, customOrder ?? null);
+  const allNames = ordered.map((p) => p.name);
+  const activeIdx = ordered.findIndex((p) => p.name === activeProject?.name);
+  const activeColor = activeProject
+    ? resolveProjectColor(activeProject.color, activeIdx >= 0 ? activeIdx : 0)
+    : "#4f86c6";
+  const activeInitials = activeProject
+    ? getProjectInitials(activeProject.name, allNames)
+    : null;
+
   return (
     <nav className="fixed bottom-0 left-0 right-0 md:hidden bg-background border-t border-border z-40 select-none">
       <div className="flex items-center h-12">
@@ -103,8 +138,56 @@ export function MobileNav({ onMenuPress }: MobileNavProps) {
             );
           })}
         </div>
+
+        {/* Add tab button */}
+        <button
+          onClick={() => setNewTabSheetOpen(true)}
+          className="flex items-center justify-center size-12 shrink-0 border-t-2 border-transparent text-text-secondary"
+        >
+          <Plus className="size-4" />
+        </button>
+
+        {/* Projects button (rightmost) */}
+        <button
+          onClick={onProjectsPress}
+          className="flex items-center justify-center size-12 shrink-0 text-text-secondary border-l border-border"
+          title="Switch project"
+        >
+          {activeInitials ? (
+            <div
+              className="size-7 rounded-full flex items-center justify-center text-[10px] font-bold text-white"
+              style={{ background: activeColor }}
+            >
+              {activeInitials}
+            </div>
+          ) : (
+            <Layers className="size-5" />
+          )}
+        </button>
       </div>
 
+      {/* New tab action sheet */}
+      {newTabSheetOpen && (
+        <>
+          <div className="fixed inset-0 z-50" onClick={() => setNewTabSheetOpen(false)} />
+          <div className="fixed bottom-14 left-2 right-2 z-50 bg-surface border border-border rounded-lg shadow-lg overflow-hidden animate-in slide-in-from-bottom-2 duration-150">
+            <div className="px-3 py-2 text-xs text-text-secondary border-b border-border">New Tab</div>
+            {NEW_TAB_OPTIONS.map((opt) => {
+              const Icon = TAB_ICONS[opt.type];
+              return (
+                <button
+                  key={opt.type}
+                  onClick={() => handleNewTab(opt.type)}
+                  className="flex items-center gap-2 w-full px-3 py-2.5 text-sm text-foreground active:bg-surface-elevated"
+                >
+                  <Icon className="size-4" /> {opt.label}
+                </button>
+              );
+            })}
+          </div>
+        </>
+      )}
+
       {/* Long-press action sheet */}
       {menuTab && (
         <>

package/src/web/components/layout/panel-layout.tsx

@@ -3,34 +3,40 @@ import { GripVertical, GripHorizontal } from "lucide-react";
 import { usePanelStore } from "@/stores/panel-store";
 import { EditorPanel } from "./editor-panel";
 
-export function PanelLayout() {
-  const grid = usePanelStore((s) => s.grid);
-  const panelCount = Object.keys(usePanelStore((s) => s.panels)).length;
+interface PanelLayoutProps {
+  projectName: string;
+}
+
+export function PanelLayout({ projectName }: PanelLayoutProps) {
+  const grid = usePanelStore((s) =>
+    s.currentProject === projectName ? s.grid : (s.projectGrids[projectName] ?? [[]]),
+  );
+  const panelCount = grid.flat().length;
 
   if (panelCount <= 1 && grid[0]?.[0]) {
-    return <EditorPanel panelId={grid[0][0]} />;
+    return <EditorPanel panelId={grid[0][0]} projectName={projectName} />;
   }
 
   return (
     <Group orientation="horizontal" style={{ height: "100%" }}>
       {grid.map((column, colIdx) => (
-        <ColumnPanel key={`col-${colIdx}`} column={column} colIdx={colIdx} totalCols={grid.length} />
+        <ColumnPanel key={`col-${colIdx}`} column={column} colIdx={colIdx} totalCols={grid.length} projectName={projectName} />
       ))}
     </Group>
   );
 }
 
-function ColumnPanel({ column, colIdx, totalCols }: { column: string[]; colIdx: number; totalCols: number }) {
+function ColumnPanel({ column, colIdx, totalCols, projectName }: { column: string[]; colIdx: number; totalCols: number; projectName: string }) {
   const defaultSize = `${Math.round(100 / totalCols)}%`;
   return (
     <>
       <Panel minSize="15%" defaultSize={defaultSize}>
         {column.length === 1 ? (
-          <EditorPanel panelId={column[0]!} />
+          <EditorPanel panelId={column[0]!} projectName={projectName} />
         ) : (
           <Group orientation="vertical">
             {column.map((panelId, rowIdx) => (
-              <RowPanel key={panelId} panelId={panelId} rowIdx={rowIdx} totalRows={column.length} />
+              <RowPanel key={panelId} panelId={panelId} rowIdx={rowIdx} totalRows={column.length} projectName={projectName} />
             ))}
           </Group>
         )}
@@ -40,12 +46,12 @@ function ColumnPanel({ column, colIdx, totalCols }: { column: string[]; colIdx:
   );
 }
 
-function RowPanel({ panelId, rowIdx, totalRows }: { panelId: string; rowIdx: number; totalRows: number }) {
+function RowPanel({ panelId, rowIdx, totalRows, projectName }: { panelId: string; rowIdx: number; totalRows: number; projectName: string }) {
   const defaultSize = `${Math.round(100 / totalRows)}%`;
   return (
     <>
       <Panel minSize="15%" defaultSize={defaultSize}>
-        <EditorPanel panelId={panelId} />
+        <EditorPanel panelId={panelId} projectName={projectName} />
       </Panel>
       {rowIdx < totalRows - 1 && <ResizeHandle orientation="horizontal" />}
     </>