feat: Add collapsible roadmap items with completed collapsed by default

- Added expandedItems state to track which items are expanded
- Auto-expands only non-complete items on load (in-progress, planned)
- Complete items collapsed by default for better overview
- Click anywhere on item header or chevron to toggle
- Smooth transitions and hover effects
- Improves readability when many items are complete

app/roadmap/page.tsx

@@ -15,6 +15,7 @@ interface RoadmapItem {
 export default function RoadmapPage() {
   const [roadmap, setRoadmap] = useState<RoadmapItem[]>([])
   const [loading, setLoading] = useState(true)
+  const [expandedItems, setExpandedItems] = useState<Set<number>>(new Set())
 
   useEffect(() => {
     fetchRoadmap()
@@ -25,6 +26,15 @@ export default function RoadmapPage() {
       const response = await fetch('/api/roadmap')
       const data = await response.json()
       setRoadmap(data.roadmap || [])
+      
+      // Auto-expand only non-complete items by default
+      const autoExpand = new Set<number>()
+      data.roadmap?.forEach((item: RoadmapItem, index: number) => {
+        if (item.status !== 'complete') {
+          autoExpand.add(index)
+        }
+      })
+      setExpandedItems(autoExpand)
     } catch (error) {
       console.error('Failed to fetch roadmap:', error)
     } finally {
@@ -32,6 +42,16 @@ export default function RoadmapPage() {
     }
   }
 
+  const toggleItem = (index: number) => {
+    const newExpanded = new Set(expandedItems)
+    if (newExpanded.has(index)) {
+      newExpanded.delete(index)
+    } else {
+      newExpanded.add(index)
+    }
+    setExpandedItems(newExpanded)
+  }
+
   const getStatusColor = (status: string) => {
     switch (status) {
       case 'complete':
@@ -136,48 +156,79 @@ export default function RoadmapPage() {
 
         {/* Roadmap Items */}
         <div className="space-y-4">
-          {roadmap.map((item, index) => (
+          {roadmap.map((item, index) => {
-            <div 
+            const isExpanded = expandedItems.has(index)
-              key={index}
+            return (
-              className={`bg-gray-800/50 backdrop-blur-sm border rounded-xl p-6 ${getStatusColor(item.status)}`}
+              <div 
-            >
+                key={index}
-              <div className="flex items-start justify-between mb-4">
+                className={`bg-gray-800/50 backdrop-blur-sm border rounded-xl overflow-hidden transition-all ${getStatusColor(item.status)}`}
-                <div className="flex-1">
+              >
-                  <div className="flex items-center gap-3 mb-2">
+                <div 
-                    <span className="text-2xl">{getStatusIcon(item.status)}</span>
+                  className="p-6 cursor-pointer hover:bg-gray-700/20 transition-colors"
-                    <h3 className="text-xl font-bold text-white">{item.title}</h3>
+                  onClick={() => toggleItem(index)}
-                    <span className="px-3 py-1 rounded-full text-xs font-semibold bg-gray-700/50 text-gray-300">
+                >
-                      {item.phase}
+                  <div className="flex items-start justify-between">
-                    </span>
+                    <div className="flex-1">
-                  </div>
+                      <div className="flex items-center gap-3 mb-2">
-                  <p className="text-gray-300 mb-3">{item.description}</p>
+                        <span className="text-2xl">{getStatusIcon(item.status)}</span>
-                  <div className="bg-gray-900/50 rounded-lg p-3 mb-3">
+                        <h3 className="text-xl font-bold text-white">{item.title}</h3>
-                    <div className="text-xs text-gray-400 mb-1">Expected Impact</div>
+                        <span className="px-3 py-1 rounded-full text-xs font-semibold bg-gray-700/50 text-gray-300">
-                    <div className="text-sm text-white font-semibold">{item.impact}</div>
+                          {item.phase}
-                  </div>
+                        </span>
-                  {item.completed && (
+                      </div>
-                    <div className="text-xs text-green-400">
+                      <p className="text-gray-300">{item.description}</p>
-                      ✓ Completed: {item.completed}
+                      {item.completed && (
+                        <div className="text-xs text-green-400 mt-2">
+                          ✓ Completed: {item.completed}
+                        </div>
+                      )}
                     </div>
-                  )}
+                    <button 
+                      className="ml-4 text-gray-400 hover:text-white transition-colors"
+                      onClick={(e) => {
+                        e.stopPropagation()
+                        toggleItem(index)
+                      }}
+                    >
+                      <svg 
+                        className={`w-6 h-6 transition-transform ${isExpanded ? 'rotate-180' : ''}`} 
+                        fill="none" 
+                        stroke="currentColor" 
+                        viewBox="0 0 24 24"
+                      >
+                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
+                      </svg>
+                    </button>
+                  </div>
                 </div>
-              </div>
 
-              {item.items && item.items.length > 0 && (
+                {isExpanded && (
-                <div className="border-t border-gray-700 pt-4 mt-4">
+                  <div className="px-6 pb-6 border-t border-gray-700">
-                  <div className="text-sm text-gray-400 mb-2">Implementation Details:</div>
+                    <div className="pt-4">
-                  <ul className="space-y-1">
+                      <div className="bg-gray-900/50 rounded-lg p-3 mb-3">
-                    {item.items.map((subItem, subIndex) => (
+                        <div className="text-xs text-gray-400 mb-1">Expected Impact</div>
-                      <li key={subIndex} className="text-sm text-gray-300 flex items-start gap-2">
+                        <div className="text-sm text-white font-semibold">{item.impact}</div>
-                        <span className="text-gray-500 mt-1">•</span>
+                      </div>
-                        <span>{subItem}</span>
+                      
-                      </li>
+                      {item.items && item.items.length > 0 && (
-                    ))}
+                        <div>
-                  </ul>
+                          <div className="text-sm text-gray-400 mb-2">Implementation Details:</div>
-                </div>
+                          <ul className="space-y-1">
-              )}
+                            {item.items.map((subItem, subIndex) => (
-            </div>
+                              <li key={subIndex} className="text-sm text-gray-300 flex items-start gap-2">
-          ))}
+                                <span className="text-gray-500 mt-1">•</span>
+                                <span>{subItem}</span>
+                              </li>
+                            ))}
+                          </ul>
+                        </div>
+                      )}
+                    </div>
+                  </div>
+                )}
+              </div>
+            )
+          })}
         </div>
 
         {/* Footer */}