Show each sprint as separate section ordered by date

data/tasks.json

@@ -482,7 +482,7 @@
       ]
     }
   ],
-  "lastUpdated": 1771546378027,
+  "lastUpdated": 1771551465295,
   "sprints": [
     {
       "name": "Sprint 1",
@@ -494,6 +494,26 @@
       "sprintId": "sprint-1",
       "id": "sprint-1",
       "createdAt": "2026-02-16T00:00:00.000Z"
+    },
+    {
+      "name": "Sprint 2",
+      "goal": "",
+      "startDate": "2026-02-23",
+      "endDate": "2026-03-01",
+      "status": "planning",
+      "projectId": "1",
+      "id": "1771551323429",
+      "createdAt": "2026-02-20T01:35:23.429Z"
+    },
+    {
+      "name": "Sprint 3",
+      "goal": "",
+      "startDate": "2026-03-02",
+      "endDate": "2026-03-08",
+      "status": "planning",
+      "projectId": "1",
+      "id": "1771551465241",
+      "createdAt": "2026-02-20T01:37:45.241Z"
     }
   ]
 }

src/components/BacklogView.tsx

@@ -189,7 +189,6 @@ export function BacklogView() {
   const [activeId, setActiveId] = useState<string | null>(null)
   const [openSections, setOpenSections] = useState<Record<string, boolean>>({
     current: true,
-    other: false,
     backlog: true,
   })
   const [isCreatingSprint, setIsCreatingSprint] = useState(false)
@@ -226,10 +225,6 @@ export function BacklogView() {
     ? tasks.filter((t) => t.sprintId === currentSprint.id)
     : []
 
-  const otherSprintsTasks = otherSprints.flatMap((sprint) =>
-    tasks.filter((t) => t.sprintId === sprint.id)
-  )
-
   const backlogTasks = tasks.filter((t) => !t.sprintId)
 
   // Get active task for drag overlay
@@ -310,18 +305,31 @@ export function BacklogView() {
           />
         </div>
 
-        {/* Other Sprints Section */}
-        {otherSprints.length > 0 && (
-          <div id="other">
-            <TaskSection
-              title="Other Sprints"
-              tasks={otherSprintsTasks}
-              isOpen={openSections.other}
-              onToggle={() => toggleSection("other")}
-              onTaskClick={(task) => selectTask(task.id)}
-            />
-          </div>
-        )}
+        {/* Other Sprints Sections - ordered by start date */}
+        {otherSprints
+          .sort((a, b) => new Date(a.startDate).getTime() - new Date(b.startDate).getTime())
+          .map((sprint) => {
+            const sprintTasks = tasks.filter((t) => t.sprintId === sprint.id)
+            return (
+              <div key={sprint.id} id={`sprint-${sprint.id}`}>
+                <TaskSection
+                  title={sprint.name}
+                  tasks={sprintTasks}
+                  isOpen={openSections[sprint.id] ?? false}
+                  onToggle={() => toggleSection(sprint.id)}
+                  onTaskClick={(task) => selectTask(task.id)}
+                  sprintInfo={{
+                    name: sprint.name,
+                    date: `${format(new Date(sprint.startDate), "MMM d")} - ${format(
+                      new Date(sprint.endDate),
+                      "MMM d"
+                    )}`,
+                    status: sprint.status,
+                  }}
+                />
+              </div>
+            )
+          })}
 
         {/* Create Sprint Button */}
         {!isCreatingSprint ? (