@prmichaelsen/acp-visualizer 0.9.4 → 0.10.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@prmichaelsen/acp-visualizer",
-  "version": "0.9.4",
+  "version": "0.10.0",
   "type": "module",
   "description": "Browser-based dashboard for visualizing ACP progress.yaml data",
   "bin": {

package/src/components/EstimateChart.tsx

@@ -1,3 +1,4 @@
+import { useState, useEffect } from 'react'
 import {
   BarChart,
   Bar,

package/src/components/FilterBar.tsx

@@ -15,12 +15,12 @@ interface FilterBarProps {
 
 export function FilterBar({ status, onStatusChange }: FilterBarProps) {
   return (
-    <div className="flex gap-1 p-1 bg-gray-800/50 rounded-lg">
+    <div className="flex flex-wrap gap-2 p-2 bg-gray-800/50 rounded-lg">
       {statusOptions.map((opt) => (
         <button
           key={opt.value}
           onClick={() => onStatusChange(opt.value)}
-          className={`px-3 py-1 text-xs rounded-md transition-colors ${
+          className={`px-4 py-2 text-sm rounded-md transition-colors whitespace-nowrap min-w-[44px] min-h-[44px] flex items-center justify-center ${
             status === opt.value
               ? 'bg-gray-700 text-gray-100 shadow-sm'
               : 'text-gray-500 hover:text-gray-300'

package/src/components/MilestoneKanban.tsx

@@ -90,10 +90,11 @@ export function MilestoneKanban({ milestones, tasks }: MilestoneKanbanProps) {
       coreStatuses.has(col.status) ||
       milestones.some((m) => m.status === col.status),
   )
-  const gridCols =
-    activeColumns.length <= 3
-      ? 'grid-cols-3'
-      : 'grid-cols-4'
+
+  // Responsive grid: 1 col mobile, 2 cols tablet, 3-4 cols desktop
+  const gridCols = activeColumns.length <= 3
+    ? 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3'
+    : 'grid-cols-1 md:grid-cols-2 lg:grid-cols-4'
 
   return (
     <div className={`grid ${gridCols} gap-4 min-h-[300px]`}>

package/src/components/Sidebar.tsx

@@ -26,7 +26,7 @@ export function Sidebar({ projects = [], currentProject = null, onProjectSelect,
   const location = useRouterState({ select: (s) => s.location })
 
   return (
-    <nav className="w-56 h-full border-r border-gray-200 dark:border-gray-800 bg-gray-100 dark:bg-gray-950 flex flex-col shrink-0">
+    <nav className="w-full lg:w-56 h-auto max-h-[80vh] lg:h-full border-t lg:border-t-0 lg:border-r border-gray-200 dark:border-gray-800 bg-gray-100 dark:bg-gray-950 flex flex-col shrink-0 rounded-t-2xl lg:rounded-none overflow-hidden">
       <div className="p-4 border-b border-gray-200 dark:border-gray-800 flex items-center justify-between">
         <span className="text-sm font-semibold text-gray-700 dark:text-gray-300 tracking-wide">
           ACP Visualizer
@@ -50,7 +50,7 @@ export function Sidebar({ projects = [], currentProject = null, onProjectSelect,
           />
         </div>
       )}
-      <div className="flex-1 py-2">
+      <div className="flex-1 py-2 overflow-y-auto">
         {navItems.map((item) => {
           const isActive =
             item.to === '/'
@@ -66,6 +66,7 @@ export function Sidebar({ projects = [], currentProject = null, onProjectSelect,
                   ? 'text-gray-900 dark:text-gray-100 bg-gray-200 dark:bg-gray-800/50'
                   : 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-200 hover:bg-gray-200/50 dark:hover:bg-gray-800/30'
               }`}
+              onClick={onClose}
             >
               <item.icon className="w-4 h-4" />
               {item.label}
@@ -77,6 +78,7 @@ export function Sidebar({ projects = [], currentProject = null, onProjectSelect,
         <Link
           to="/search"
           className="flex items-center gap-2 px-3 py-1.5 text-sm text-gray-600 dark:text-gray-500 bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-800 rounded-md hover:text-gray-900 dark:hover:text-gray-300 hover:border-gray-400 dark:hover:border-gray-600 transition-colors"
+          onClick={onClose}
         >
           <Search className="w-4 h-4" />
           Search...

package/src/components/ViewToggle.tsx

@@ -15,12 +15,12 @@ const views: Array<{ id: ViewMode; label: string }> = [
 
 export function ViewToggle({ value, onChange }: ViewToggleProps) {
   return (
-    <div className="flex gap-1 bg-gray-900 border border-gray-800 rounded-lg p-0.5">
+    <div className="flex gap-1 bg-gray-900 border border-gray-800 rounded-lg p-0.5 overflow-x-auto scrollbar-hide">
       {views.map((v) => (
         <button
           key={v.id}
           onClick={() => onChange(v.id)}
-          className={`px-3 py-1 text-xs rounded-md transition-colors ${
+          className={`px-4 py-2 text-sm rounded-md transition-colors whitespace-nowrap min-w-[44px] min-h-[44px] flex items-center justify-center ${
             value === v.id
               ? 'bg-gray-700 text-gray-100'
               : 'text-gray-500 hover:text-gray-300'

package/src/routes/__root.tsx

@@ -161,11 +161,15 @@ function RootLayout() {
       <div className="flex h-screen bg-white dark:bg-gray-950 text-gray-900 dark:text-gray-100">
         {/* Mobile Menu Button - Bottom Right (Thumb Zone) */}
         <button
-          onClick={() => setMobileMenuOpen(true)}
-          className="lg:hidden fixed bottom-6 right-6 z-50 p-3 rounded-full bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 shadow-lg"
-          aria-label="Open menu"
+          onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
+          className="lg:hidden fixed bottom-6 right-6 z-50 p-3 rounded-full bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 shadow-lg transition-transform duration-200"
+          aria-label={mobileMenuOpen ? "Close menu" : "Open menu"}
         >
-          <Menu className="w-6 h-6 text-gray-900 dark:text-gray-100" />
+          {mobileMenuOpen ? (
+            <X className="w-6 h-6 text-gray-900 dark:text-gray-100" />
+          ) : (
+            <Menu className="w-6 h-6 text-gray-900 dark:text-gray-100" />
+          )}
         </button>
 
         {/* Mobile Backdrop */}
@@ -176,10 +180,10 @@ function RootLayout() {
           />
         )}
 
-        {/* Sidebar - Desktop: Always visible | Mobile: Drawer */}
+        {/* Sidebar - Desktop: Always visible | Mobile: Bottom Drawer */}
         <div
-          className={`fixed lg:relative inset-y-0 left-0 z-50 transition-transform duration-300 lg:translate-x-0 ${
-            mobileMenuOpen ? 'translate-x-0' : '-translate-x-full'
+          className={`fixed lg:relative bottom-0 left-0 right-0 lg:inset-y-0 lg:right-auto z-50 transition-transform duration-300 lg:translate-y-0 ${
+            mobileMenuOpen ? 'translate-y-0' : 'translate-y-full'
           }`}
         >
           <Sidebar