@hienlh/ppm 0.1.0

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

@@ -0,0 +1,137 @@
+import {
+  FolderOpen,
+  Terminal,
+  MessageSquare,
+  GitBranch,
+  GitCommitHorizontal,
+  FileDiff,
+  Settings,
+  X,
+  FileCode,
+} from "lucide-react";
+import { useProjectStore } from "@/stores/project-store";
+import { useTabStore, type TabType } from "@/stores/tab-store";
+import { cn } from "@/lib/utils";
+import { Separator } from "@/components/ui/separator";
+import { FileTree } from "@/components/explorer/file-tree";
+
+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: "projects", label: "Projects" },
+  { 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" },
+];
+
+/**
+ * Mobile drawer overlay — opens from bottom-left menu button.
+ * Top: file tree of current project.
+ * Bottom: new tab options.
+ */
+export function MobileDrawer({ isOpen, onClose }: MobileDrawerProps) {
+  const activeProject = useProjectStore((s) => s.activeProject);
+  const openTab = useTabStore((s) => s.openTab);
+
+  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: type !== "projects" });
+    onClose();
+  }
+
+  return (
+    <div
+      className={cn(
+        "fixed inset-0 z-50 md:hidden transition-opacity duration-200",
+        isOpen
+          ? "opacity-100"
+          : "opacity-0 pointer-events-none",
+      )}
+    >
+      {/* Backdrop */}
+      <div
+        className="absolute inset-0 bg-black/50"
+        onClick={onClose}
+        aria-label="Close drawer"
+      />
+
+      {/* Drawer panel */}
+      <div
+        className={cn(
+          "fixed left-0 top-0 bottom-0 w-[280px] bg-background border-r border-border",
+          "z-50 flex flex-col transition-transform duration-300 ease-out",
+          isOpen ? "translate-x-0" : "-translate-x-full",
+        )}
+      >
+        {/* Header */}
+        <div className="flex items-center justify-between px-4 py-3 border-b border-border">
+          <div className="flex items-center gap-2">
+            <FolderOpen className="size-4 text-primary" />
+            <span className="text-sm font-semibold truncate">
+              {activeProject?.name ?? "PPM"}
+            </span>
+          </div>
+          <button
+            onClick={onClose}
+            className="flex items-center justify-center size-8 rounded-md hover:bg-surface-elevated transition-colors"
+          >
+            <X className="size-4" />
+          </button>
+        </div>
+
+        {/* File tree — takes remaining space */}
+        <div className="flex-1 overflow-y-auto">
+          {activeProject ? (
+            <FileTree onFileOpen={onClose} />
+          ) : (
+            <p className="px-4 py-3 text-xs text-text-secondary">
+              No project selected.
+            </p>
+          )}
+        </div>
+
+        {/* New tab options — pinned at bottom */}
+        <Separator />
+        <div className="px-2 py-2 space-y-0.5">
+          <p className="px-2 pb-1 text-xs font-semibold text-text-secondary uppercase tracking-wider">
+            New Tab
+          </p>
+          {NEW_TAB_OPTIONS.map((opt) => {
+            const Icon = TAB_ICONS[opt.type];
+            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]"
+              >
+                <Icon className="size-4 shrink-0" />
+                <span>{opt.label}</span>
+              </button>
+            );
+          })}
+        </div>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,103 @@
+import {
+  FolderOpen,
+  Terminal,
+  MessageSquare,
+  GitBranch,
+  GitCommitHorizontal,
+  FileDiff,
+  FileCode,
+  Settings,
+  Menu,
+  X,
+} from "lucide-react";
+import { useTabStore, type TabType } from "@/stores/tab-store";
+import { cn } from "@/lib/utils";
+import { useEffect, useRef } from "react";
+
+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,
+};
+
+interface MobileNavProps {
+  onMenuPress: () => void;
+}
+
+/**
+ * Mobile bottom tab bar — scrollable tabs with menu button on the left.
+ */
+export function MobileNav({ onMenuPress }: MobileNavProps) {
+  const { tabs, activeTabId, setActiveTab, closeTab } = useTabStore();
+  const tabRefs = useRef<Map<string, HTMLButtonElement>>(new Map());
+  const prevTabCount = useRef(tabs.length);
+
+  // Auto-scroll to new tab when added
+  useEffect(() => {
+    if (tabs.length > prevTabCount.current && activeTabId) {
+      const el = tabRefs.current.get(activeTabId);
+      if (el) {
+        el.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "nearest" });
+      }
+    }
+    prevTabCount.current = tabs.length;
+  }, [tabs.length, activeTabId]);
+
+  return (
+    <nav className="fixed bottom-0 left-0 right-0 md:hidden bg-background border-t border-border z-40">
+      <div className="flex items-center h-12">
+        {/* Menu button — opens drawer with file tree + new tab options */}
+        <button
+          onClick={onMenuPress}
+          className="flex items-center justify-center size-12 shrink-0 text-text-secondary border-r border-border"
+        >
+          <Menu className="size-5" />
+        </button>
+
+        <div className="flex-1 flex items-center h-12 overflow-x-auto">
+          {tabs.map((tab) => {
+            const Icon = TAB_ICONS[tab.type];
+            const isActive = tab.id === activeTabId;
+            return (
+              <button
+                key={tab.id}
+                ref={(el) => {
+                  if (el) tabRefs.current.set(tab.id, el);
+                  else tabRefs.current.delete(tab.id);
+                }}
+                onClick={() => setActiveTab(tab.id)}
+                className={cn(
+                  "flex items-center gap-1 px-3 h-12 whitespace-nowrap text-xs shrink-0 border-t-2 transition-colors",
+                  isActive
+                    ? "border-primary bg-surface text-primary"
+                    : "border-transparent text-text-secondary",
+                )}
+              >
+                <Icon className="size-4" />
+                <span className="max-w-[80px] truncate">{tab.title}</span>
+                {tab.closable && (
+                  <span
+                    role="button"
+                    tabIndex={0}
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      closeTab(tab.id);
+                    }}
+                    className="ml-0.5 p-0.5 rounded hover:bg-surface-elevated"
+                  >
+                    <X className="size-3" />
+                  </span>
+                )}
+              </button>
+            );
+          })}
+        </div>
+      </div>
+    </nav>
+  );
+}

package/src/web/components/layout/sidebar.tsx

@@ -0,0 +1,90 @@
+import { FolderOpen, ChevronRight, ChevronDown } from "lucide-react";
+import { useProjectStore } from "@/stores/project-store";
+import { useTabStore } from "@/stores/tab-store";
+import { cn } from "@/lib/utils";
+import { FileTree } from "@/components/explorer/file-tree";
+import { Separator } from "@/components/ui/separator";
+import { useState } from "react";
+
+export function Sidebar() {
+  const { projects, activeProject, setActiveProject, loading } =
+    useProjectStore();
+  const openTab = useTabStore((s) => s.openTab);
+  const [projectsExpanded, setProjectsExpanded] = useState(true);
+
+  function handleProjectClick(project: (typeof projects)[number]) {
+    setActiveProject(project);
+  }
+
+  return (
+    <aside className="hidden md:flex flex-col w-[280px] min-w-[280px] bg-background border-r border-border overflow-y-auto">
+      {/* Projects section header */}
+      <button
+        onClick={() => setProjectsExpanded(!projectsExpanded)}
+        className="flex items-center gap-2 px-4 py-3 border-b border-border hover:bg-surface-elevated transition-colors"
+      >
+        {projectsExpanded ? (
+          <ChevronDown className="size-3.5 text-text-subtle" />
+        ) : (
+          <ChevronRight className="size-3.5 text-text-subtle" />
+        )}
+        <FolderOpen className="size-4 text-primary" />
+        <span className="text-sm font-semibold">Projects</span>
+      </button>
+
+      {/* Projects list (collapsible) */}
+      {projectsExpanded && (
+        <div className="p-2 space-y-1">
+          {loading && (
+            <p className="px-2 py-1 text-xs text-text-secondary">Loading...</p>
+          )}
+
+          {!loading && projects.length === 0 && (
+            <p className="px-2 py-1 text-xs text-text-secondary">
+              No projects found. Register one via CLI.
+            </p>
+          )}
+
+          {projects.map((project) => (
+            <button
+              key={project.name}
+              onClick={() => handleProjectClick(project)}
+              className={cn(
+                "w-full flex items-center gap-2 px-3 py-2 rounded-md text-sm transition-colors text-left",
+                "min-h-[44px]",
+                activeProject?.name === project.name
+                  ? "bg-surface text-foreground"
+                  : "text-text-secondary hover:bg-surface-elevated hover:text-foreground",
+              )}
+            >
+              <FolderOpen className="size-4 shrink-0" />
+              <div className="flex-1 min-w-0">
+                <p className="truncate font-medium">{project.name}</p>
+                <p className="truncate text-xs text-text-subtle">
+                  {project.path}
+                </p>
+              </div>
+              {project.branch && (
+                <span className="text-xs text-primary shrink-0">
+                  {project.branch}
+                </span>
+              )}
+              <ChevronRight className="size-3 text-text-subtle shrink-0" />
+            </button>
+          ))}
+        </div>
+      )}
+
+      {/* File tree section */}
+      {activeProject && (
+        <>
+          <Separator />
+          <div className="flex items-center gap-2 px-4 py-2 text-xs font-semibold text-text-secondary uppercase tracking-wider">
+            Files
+          </div>
+          <FileTree />
+        </>
+      )}
+    </aside>
+  );
+}

package/src/web/components/layout/tab-bar.tsx

@@ -0,0 +1,152 @@
+import { useEffect, useRef } from "react";
+import {
+  X,
+  Plus,
+  FolderOpen,
+  Terminal,
+  MessageSquare,
+  GitBranch,
+  GitCommitHorizontal,
+  FileDiff,
+  Settings,
+  FileCode,
+} from "lucide-react";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
+import { useTabStore, type TabType } from "@/stores/tab-store";
+import { useProjectStore } from "@/stores/project-store";
+import { cn } from "@/lib/utils";
+
+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: "projects", label: "Projects" },
+  { type: "terminal", label: "Terminal" },
+  { type: "chat", label: "AI Chat" },
+  { type: "git-graph", label: "Git Graph" },
+  { type: "git-status", label: "Git Status" },
+  { type: "settings", label: "Settings" },
+];
+
+export function TabBar() {
+  const { tabs, activeTabId, setActiveTab, closeTab, openTab } = useTabStore();
+  const activeProject = useProjectStore((s) => s.activeProject);
+  const tabRefs = useRef<Map<string, HTMLButtonElement>>(new Map());
+  const prevTabCount = useRef(tabs.length);
+
+  // Auto-scroll to active tab when a new tab is added
+  useEffect(() => {
+    if (tabs.length > prevTabCount.current && activeTabId) {
+      const el = tabRefs.current.get(activeTabId);
+      if (el) {
+        el.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "nearest" });
+      }
+    }
+    prevTabCount.current = tabs.length;
+  }, [tabs.length, activeTabId]);
+
+  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;
+
+    openTab({
+      type,
+      title: NEW_TAB_OPTIONS.find((o) => o.type === type)?.label ?? type,
+      metadata,
+      projectId: activeProject?.name ?? null,
+      closable: true,
+    });
+  }
+
+  return (
+    <div className="hidden md:flex items-center border-b border-border bg-background">
+      <ScrollArea className="flex-1">
+        <div className="flex items-center gap-0.5 px-2 py-1">
+          {tabs.map((tab) => {
+            const Icon = TAB_ICONS[tab.type];
+            const isActive = tab.id === activeTabId;
+            return (
+              <button
+                key={tab.id}
+                ref={(el) => {
+                  if (el) tabRefs.current.set(tab.id, el);
+                  else tabRefs.current.delete(tab.id);
+                }}
+                onClick={() => setActiveTab(tab.id)}
+                className={cn(
+                  "group flex items-center gap-1.5 px-3 py-1.5 text-sm rounded-md whitespace-nowrap transition-colors",
+                  "border-b-2 -mb-[1px]",
+                  isActive
+                    ? "border-primary bg-surface text-foreground"
+                    : "border-transparent text-text-secondary hover:text-foreground hover:bg-surface-elevated",
+                )}
+              >
+                <Icon className="size-4" />
+                <span className="max-w-[120px] truncate">{tab.title}</span>
+                {tab.closable && (
+                  <span
+                    role="button"
+                    tabIndex={0}
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      closeTab(tab.id);
+                    }}
+                    onKeyDown={(e) => {
+                      if (e.key === "Enter") {
+                        e.stopPropagation();
+                        closeTab(tab.id);
+                      }
+                    }}
+                    className="ml-1 opacity-0 group-hover:opacity-100 rounded-sm hover:bg-surface-elevated p-0.5 transition-opacity"
+                  >
+                    <X className="size-3" />
+                  </span>
+                )}
+              </button>
+            );
+          })}
+        </div>
+        <ScrollBar orientation="horizontal" />
+      </ScrollArea>
+
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <button className="flex items-center justify-center size-8 mx-1 rounded-md text-text-secondary hover:text-foreground hover:bg-surface-elevated transition-colors">
+            <Plus className="size-4" />
+          </button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="end">
+          {NEW_TAB_OPTIONS.map((opt) => {
+            const Icon = TAB_ICONS[opt.type];
+            return (
+              <DropdownMenuItem
+                key={opt.type}
+                onClick={() => handleNewTab(opt.type)}
+              >
+                <Icon className="size-4 mr-2" />
+                {opt.label}
+              </DropdownMenuItem>
+            );
+          })}
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </div>
+  );
+}

package/src/web/components/layout/tab-content.tsx

@@ -0,0 +1,85 @@
+import { Suspense, lazy } from "react";
+import { useTabStore, type TabType } from "@/stores/tab-store";
+import { Loader2 } from "lucide-react";
+
+const TAB_COMPONENTS: Record<TabType, React.LazyExoticComponent<React.ComponentType<{ metadata?: Record<string, unknown>; tabId?: string }>>> = {
+  projects: lazy(() =>
+    import("@/components/projects/project-list").then((m) => ({
+      default: m.ProjectList,
+    })),
+  ),
+  terminal: lazy(() =>
+    import("@/components/terminal/terminal-tab").then((m) => ({
+      default: m.TerminalTab,
+    })),
+  ),
+  chat: lazy(() =>
+    import("@/components/chat/chat-tab").then((m) => ({
+      default: m.ChatTab,
+    })),
+  ),
+  editor: lazy(() =>
+    import("@/components/editor/code-editor").then((m) => ({
+      default: m.CodeEditor,
+    })),
+  ),
+  "git-graph": lazy(() =>
+    import("@/components/git/git-graph").then((m) => ({
+      default: m.GitGraph,
+    })),
+  ),
+  "git-status": lazy(() =>
+    import("@/components/git/git-status-panel").then((m) => ({
+      default: m.GitStatusPanel,
+    })),
+  ),
+  "git-diff": lazy(() =>
+    import("@/components/editor/diff-viewer").then((m) => ({
+      default: m.DiffViewer,
+    })),
+  ),
+  settings: lazy(() =>
+    import("@/components/settings/settings-tab").then((m) => ({
+      default: m.SettingsTab,
+    })),
+  ),
+};
+
+function LoadingFallback() {
+  return (
+    <div className="flex items-center justify-center h-full">
+      <Loader2 className="size-6 animate-spin text-primary" />
+    </div>
+  );
+}
+
+export function TabContent() {
+  const { tabs, activeTabId } = useTabStore();
+
+  if (tabs.length === 0) {
+    return (
+      <div className="flex items-center justify-center h-full text-text-secondary">
+        <p>No tab open. Use the + button or bottom nav to open one.</p>
+      </div>
+    );
+  }
+
+  return (
+    <>
+      {tabs.map((tab) => {
+        const Component = TAB_COMPONENTS[tab.type];
+        const isActive = tab.id === activeTabId;
+        return (
+          <div
+            key={tab.id}
+            className={isActive ? "h-full w-full" : "hidden"}
+          >
+            <Suspense fallback={<LoadingFallback />}>
+              <Component metadata={tab.metadata} tabId={tab.id} />
+            </Suspense>
+          </div>
+        );
+      })}
+    </>
+  );
+}