Merge branch 'feature/schedule-assignment-split'

frontend/website/cypress/e2e/set-scheduling.cy.ts

@@ -121,6 +121,55 @@ const completedScheduleDetail = {
   },
 }
 
+const splitScheduleDetail = {
+  schedule: {
+    ...scheduleDetail.schedule,
+    targetDate: '2026-08-13',
+    assignmentCount: 4,
+    days: [
+      scheduleDetail.schedule.days[0],
+      scheduleDetail.schedule.days[1],
+      {
+        date: '2026-08-12',
+        assignments: [
+          {
+            id: 2,
+            completedAt: '2026-08-11T08:30:00+00:00',
+            element: {
+              name: 'Chapter 1',
+              kind: 'Chapter_sections-v2',
+              path: ['Exodus', 'Shemot', 'Chapter 1'],
+            },
+          },
+          {
+            id: 3,
+            completedAt: null,
+            element: {
+              name: 'Chapter 1',
+              kind: 'Chapter_sections-v2',
+              path: ['Leviticus', 'Vayikra', 'Chapter 1'],
+            },
+          },
+        ],
+      },
+      {
+        date: '2026-08-13',
+        assignments: [
+          {
+            id: 4,
+            completedAt: '2026-08-11T09:45:00+00:00',
+            element: {
+              name: 'Chapter 1',
+              kind: 'Chapter_sections-v2',
+              path: ['Numbers', 'Bamidbar', 'Chapter 1'],
+            },
+          },
+        ],
+      },
+    ],
+  },
+}
+
 function interceptAuthenticatedUser(): void {
   cy.intercept('GET', '**/api/me', {
     statusCode: 200,
@@ -159,9 +208,12 @@ describe('set scheduling', () => {
     cy.location('pathname').should('equal', '/sets/41/schedules/new')
     cy.get('h1').should('have.text', 'Schedule Bible')
     cy.get('#schedule-level option').then(($options) => {
-      expect([...$options].map((option) => option.textContent?.trim())).to.deep.equal(
+      expect([...$options].map((option) => option.textContent?.trim())).to.deep.equal([
-        ['Choose a level', 'book (2)', 'portion (2)', 'Chapter_sections-v2 (2)'],
+        'Choose a level',
-      )
+        'book (2)',
+        'portion (2)',
+        'Chapter_sections-v2 (2)',
+      ])
     })
     cy.get('#schedule-level').select('3')
     cy.get('#schedule-start-date').type('2026-08-10')
@@ -184,6 +236,12 @@ describe('set scheduling', () => {
       'contain.text',
       'Exodus / Shemot / Chapter 1',
     )
+    cy.get('[data-assignment-section="completed"]').should('not.have.attr', 'open')
+    cy.get('[data-assignment-section="completed"] summary').click()
+    cy.get('[data-assignment-section="completed"]').should(
+      'contain.text',
+      'No assignments completed yet.',
+    )
   })
 
   it('validates the schedule form before submitting', () => {
@@ -248,6 +306,72 @@ describe('set scheduling', () => {
     cy.get('h1').should('have.text', 'Schedule not found')
   })
 
+  it('splits assignments by progress while preserving the schedule timeline', () => {
+    cy.clock(new Date(2026, 7, 11, 12).getTime(), ['Date'])
+    cy.intercept('GET', '**/api/schedules/73', {
+      statusCode: 200,
+      body: splitScheduleDetail,
+    }).as('schedule')
+
+    cy.visit('/schedules/73')
+    cy.wait('@me')
+    cy.wait('@schedule')
+
+    cy.get('[data-assignment-section="remaining"]')
+      .should('have.attr', 'data-assignment-count', '2')
+      .within(() => {
+        cy.get('h2').should('have.text', 'Remaining')
+        cy.get('[data-schedule-day]').then(($days) => {
+          expect([...$days].map((day) => day.getAttribute('data-schedule-date'))).to.deep.equal([
+            '2026-08-10',
+            '2026-08-11',
+            '2026-08-12',
+          ])
+        })
+        cy.get('[data-schedule-date="2026-08-10"]')
+          .should('contain.text', 'Overdue')
+          .and('contain.text', 'Genesis / Creation / Chapter 1')
+        cy.get('[data-schedule-date="2026-08-11"]')
+          .should('contain.text', 'Rest day')
+          .and('not.contain.text', 'Overdue')
+        cy.get('[data-schedule-date="2026-08-12"]')
+          .should('contain.text', 'Leviticus / Vayikra / Chapter 1')
+          .and('not.contain.text', 'Exodus / Shemot / Chapter 1')
+        cy.get('[data-schedule-date="2026-08-13"]').should('not.exist')
+      })
+
+    cy.get('[data-assignment-section="completed"]').should(
+      'have.attr',
+      'data-assignment-count',
+      '2',
+    )
+    cy.get('[data-assignment-section="completed"]').should('not.have.attr', 'open')
+    cy.get('[data-assignment-section="completed"]').within(() => {
+      cy.get('summary').should('contain.text', 'Completed').click()
+      cy.get('[data-schedule-day]').then(($days) => {
+        expect([...$days].map((day) => day.getAttribute('data-schedule-date'))).to.deep.equal([
+          '2026-08-12',
+          '2026-08-13',
+        ])
+      })
+      cy.get('[data-schedule-date="2026-08-12"]')
+        .should('contain.text', 'Exodus / Shemot / Chapter 1')
+        .and('not.contain.text', 'Leviticus / Vayikra / Chapter 1')
+      cy.get('[data-schedule-date="2026-08-13"]').should(
+        'contain.text',
+        'Numbers / Bamidbar / Chapter 1',
+      )
+      cy.contains('Rest day').should('not.exist')
+    })
+
+    cy.viewport(375, 667)
+    cy.document().then((document) => {
+      expect(document.documentElement.scrollWidth).to.be.at.most(
+        document.documentElement.clientWidth,
+      )
+    })
+  })
+
   it('completes and reopens assignments from the schedule', () => {
     const completedAt = '2026-08-15T12:30:00+00:00'
     cy.intercept('GET', '**/api/schedules/73', {
@@ -278,26 +402,26 @@ describe('set scheduling', () => {
     cy.wait('@me')
     cy.wait('@schedule')
 
-    cy.get('[data-schedule-assignment="2"]').within(() => {
+    cy.get('[data-assignment-section="completed"] summary').click()
+    cy.get('[data-assignment-section="completed"] [data-schedule-assignment="2"]').within(() => {
       cy.contains('Completed').should('be.visible')
       cy.get('time')
         .should('have.attr', 'datetime', '2026-08-15T09:30:00+00:00')
         .and('have.text', formatCompletionTime('2026-08-15T09:30:00+00:00'))
-      cy.contains('button', 'Reopen').click()
-    })
-    cy.wait('@reopenAssignment')
-    cy.get('[data-schedule-assignment="2"]')
-      .should('contain.text', 'Not completed')
-      .and('not.contain.text', 'Completed')
-      .within(() => {
-        cy.contains('button', 'Mark complete').should('be.enabled')
     })
 
-    cy.get('[data-schedule-assignment="1"]').within(() => {
+    cy.get('[data-assignment-section="remaining"] [data-schedule-assignment="1"]').within(() => {
       cy.contains('button', 'Mark complete').click()
       cy.contains('button', 'Saving...').should('be.disabled')
     })
     cy.wait('@completeAssignment')
+    cy.get('[data-assignment-section="remaining"]')
+      .should('have.attr', 'data-assignment-count', '0')
+      .and('contain.text', 'All assignments are complete.')
+      .and('contain.text', 'Rest day')
+    cy.get('[data-assignment-section="completed"]')
+      .should('have.attr', 'data-assignment-count', '2')
+      .within(() => {
         cy.get('[data-schedule-assignment="1"]').within(() => {
           cy.contains('Completed').should('be.visible')
           cy.get('time')
@@ -306,6 +430,52 @@ describe('set scheduling', () => {
           cy.contains('button', 'Reopen').should('be.enabled')
         })
       })
+    cy.get('[data-completion-announcement]').should('have.text', 'Assignment moved to Completed.')
+
+    cy.get('[data-assignment-section="completed"] [data-schedule-assignment="2"]').within(() => {
+      cy.contains('button', 'Reopen').click()
+    })
+    cy.wait('@reopenAssignment')
+    cy.get('[data-assignment-section="remaining"]')
+      .should('have.attr', 'data-assignment-count', '1')
+      .find('[data-schedule-assignment="2"]')
+      .should('contain.text', 'Not completed')
+      .and('not.contain.text', 'Completed')
+      .within(() => {
+        cy.contains('button', 'Mark complete').should('be.enabled')
+      })
+    cy.get('[data-assignment-section="completed"]')
+      .should('have.attr', 'data-assignment-count', '1')
+      .find('[data-schedule-assignment="2"]')
+      .should('not.exist')
+    cy.get('[data-completion-announcement]').should('have.text', 'Assignment moved to Remaining.')
+  })
+
+  it('keeps an assignment in place when a completion request fails', () => {
+    cy.intercept('GET', '**/api/schedules/73', {
+      statusCode: 200,
+      body: scheduleDetail,
+    }).as('schedule')
+    cy.intercept('PATCH', '**/api/assignments/1', {
+      statusCode: 500,
+    }).as('completeAssignment')
+
+    cy.visit('/schedules/73')
+    cy.wait('@me')
+    cy.wait('@schedule')
+
+    cy.get('[data-assignment-section="remaining"] [data-schedule-assignment="1"]')
+      .contains('button', 'Mark complete')
+      .click()
+    cy.wait('@completeAssignment')
+
+    cy.get('[data-assignment-section="remaining"] [data-schedule-assignment="1"]')
+      .should('be.visible')
+      .and('contain.text', "We couldn't update this assignment.")
+    cy.get('[data-assignment-section="completed"]')
+      .find('[data-schedule-assignment="1"]')
+      .should('not.exist')
+  })
 
   it('lists the users schedules on the dashboard', () => {
     cy.intercept('GET', '**/api/sets', {

frontend/website/src/components/ScheduleAssignmentTimeline.vue

@@ -0,0 +1,335 @@
+<script setup lang="ts">
+import type { ScheduleDetail } from '@/stores/schedules'
+
+type ScheduleDay = ScheduleDetail['days'][number]
+
+const props = defineProps<{
+  completionErrors: Record<number, string>
+  days: ScheduleDay[]
+  mode: 'remaining' | 'completed'
+  pendingAssignmentIds: number[]
+  today: string
+}>()
+
+const emit = defineEmits<{
+  setCompleted: [assignmentId: number, completed: boolean]
+}>()
+
+function formatDate(value: string): string {
+  return new Intl.DateTimeFormat('en', {
+    dateStyle: 'medium',
+    timeZone: 'UTC',
+  }).format(new Date(`${value}T00:00:00Z`))
+}
+
+function formatCompletionTime(value: string): string {
+  return new Intl.DateTimeFormat('en', {
+    dateStyle: 'medium',
+    timeStyle: 'short',
+  }).format(new Date(value))
+}
+
+function dayAssignmentSummary(day: ScheduleDay): string {
+  if (day.assignments.length === 0) {
+    return '0 assigned'
+  }
+
+  const assignmentLabel = props.mode === 'remaining' ? 'remaining' : 'completed'
+
+  return `${day.assignments.length} ${assignmentLabel}`
+}
+
+function isOverdue(day: ScheduleDay): boolean {
+  return props.mode === 'remaining' && day.assignments.length > 0 && day.date < props.today
+}
+
+function isPending(assignmentId: number): boolean {
+  return props.pendingAssignmentIds.includes(assignmentId)
+}
+</script>
+
+<template>
+  <ol
+    class="schedule-days"
+    :class="{ 'schedule-days--completed': mode === 'completed' }"
+    :aria-label="
+      mode === 'remaining'
+        ? 'Remaining assignments by scheduled date'
+        : 'Completed assignments by scheduled date'
+    "
+  >
+    <li
+      v-for="day in days"
+      :key="day.date"
+      class="schedule-day"
+      data-schedule-day
+      :data-schedule-date="day.date"
+    >
+      <header class="schedule-day__header">
+        <time :datetime="day.date">{{ formatDate(day.date) }}</time>
+        <span class="schedule-day__summary">
+          <span v-if="isOverdue(day)" class="overdue-label">Overdue</span>
+          <span>{{ dayAssignmentSummary(day) }}</span>
+        </span>
+      </header>
+
+      <p v-if="day.assignments.length === 0" class="rest-day">Rest day</p>
+
+      <ul v-else class="assignment-list">
+        <li
+          v-for="assignment in day.assignments"
+          :key="assignment.id"
+          :class="{ 'is-completed': assignment.completedAt !== null }"
+          :data-schedule-assignment="assignment.id"
+        >
+          <div class="assignment-description">
+            <span class="assignment-path">
+              {{ assignment.element.path.join(' / ') }}
+            </span>
+            <span class="assignment-kind">{{ assignment.element.kind }}</span>
+          </div>
+          <div class="assignment-completion">
+            <p v-if="assignment.completedAt !== null" class="assignment-completion__status">
+              Completed
+              <time :datetime="assignment.completedAt">
+                {{ formatCompletionTime(assignment.completedAt) }}
+              </time>
+            </p>
+            <p v-else class="assignment-completion__status">Not completed</p>
+            <button
+              type="button"
+              class="assignment-completion-button"
+              :aria-label="
+                assignment.completedAt === null
+                  ? `Mark ${assignment.element.path.join(' / ')} complete`
+                  : `Reopen ${assignment.element.path.join(' / ')}`
+              "
+              :disabled="isPending(assignment.id)"
+              @click="emit('setCompleted', assignment.id, assignment.completedAt === null)"
+            >
+              {{
+                isPending(assignment.id)
+                  ? 'Saving...'
+                  : assignment.completedAt === null
+                    ? 'Mark complete'
+                    : 'Reopen'
+              }}
+            </button>
+            <p
+              v-if="completionErrors[assignment.id] !== undefined"
+              class="assignment-completion__error"
+              role="alert"
+            >
+              {{ completionErrors[assignment.id] }}
+            </p>
+          </div>
+        </li>
+      </ul>
+    </li>
+  </ol>
+</template>
+
+<style scoped>
+.schedule-days {
+  display: grid;
+  gap: 1rem;
+  margin: 1.4rem 0 0;
+  padding: 0;
+  list-style: none;
+}
+
+.schedule-day {
+  overflow: hidden;
+  border: 1px solid rgb(24 48 41 / 12%);
+  border-radius: 1rem;
+  background: rgb(255 253 247 / 82%);
+  box-shadow: 0 0.75rem 2rem rgb(40 62 52 / 6%);
+}
+
+.schedule-days--completed .schedule-day {
+  background: rgb(248 248 241 / 78%);
+  box-shadow: none;
+}
+
+.schedule-day__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  padding: 0.85rem 1rem;
+  border-bottom: 1px solid rgb(24 48 41 / 10%);
+  color: #5e7067;
+  background: rgb(239 228 212 / 42%);
+  font-size: 0.75rem;
+  font-weight: 800;
+}
+
+.schedule-days--completed .schedule-day__header {
+  background: rgb(220 235 224 / 34%);
+}
+
+.schedule-day__summary {
+  display: inline-flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 0.55rem;
+}
+
+.overdue-label {
+  padding: 0.25rem 0.45rem;
+  border-radius: 999px;
+  color: #8f382d;
+  background: #f4dcd5;
+  font-size: 0.62rem;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+}
+
+.rest-day {
+  margin: 0;
+  padding: 1.2rem 1rem;
+  color: #79877f;
+  font-style: italic;
+}
+
+.assignment-list {
+  display: grid;
+  gap: 0;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.assignment-list li {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: start;
+  gap: 1rem;
+  padding: 1rem;
+}
+
+.assignment-list li.is-completed {
+  background: rgb(220 235 224 / 24%);
+}
+
+.assignment-list li + li {
+  border-top: 1px solid rgb(24 48 41 / 10%);
+}
+
+.assignment-path {
+  min-width: 0;
+  font-family: Georgia, 'Times New Roman', serif;
+  font-size: 1.05rem;
+  overflow-wrap: anywhere;
+}
+
+.assignment-description {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  min-width: 0;
+}
+
+.assignment-kind {
+  flex: 0 0 auto;
+  padding: 0.35rem 0.55rem;
+  border-radius: 999px;
+  color: #81533a;
+  background: #efe4d4;
+  font-size: 0.62rem;
+  font-weight: 800;
+  letter-spacing: 0.1em;
+  text-transform: none;
+}
+
+.assignment-completion {
+  display: grid;
+  justify-items: end;
+  gap: 0.55rem;
+  min-width: 12rem;
+}
+
+.assignment-completion__status,
+.assignment-completion__error {
+  margin: 0;
+  font-size: 0.74rem;
+  font-weight: 700;
+  text-align: right;
+}
+
+.assignment-completion__status {
+  color: #5e7067;
+}
+
+.assignment-completion__status time {
+  display: block;
+  margin-top: 0.2rem;
+  color: #344e45;
+}
+
+.assignment-completion__error {
+  max-width: 14rem;
+  color: #9b3f32;
+}
+
+.assignment-completion-button {
+  min-height: 2.4rem;
+  padding: 0.55rem 0.8rem;
+  border: 1px solid rgb(24 58 49 / 28%);
+  border-radius: 0.65rem;
+  color: #183a31;
+  background: #fffdf7;
+  font-size: 0.75rem;
+  font-weight: 800;
+  cursor: pointer;
+}
+
+.is-completed .assignment-completion-button {
+  color: #5e7067;
+  background: transparent;
+}
+
+.assignment-completion-button:hover:not(:disabled) {
+  border-color: #285c4e;
+  background: #f9f5e9;
+}
+
+.assignment-completion-button:focus-visible {
+  outline: 3px solid rgb(86 127 112 / 34%);
+  outline-offset: 0.25rem;
+}
+
+.assignment-completion-button:disabled {
+  cursor: wait;
+  opacity: 0.65;
+}
+
+@media (max-width: 37.5rem) {
+  .schedule-day__header {
+    align-items: flex-start;
+  }
+
+  .schedule-day__summary {
+    flex-wrap: wrap;
+  }
+
+  .assignment-list li {
+    grid-template-columns: 1fr;
+  }
+
+  .assignment-description {
+    align-items: flex-start;
+  }
+
+  .assignment-completion {
+    justify-items: start;
+    min-width: 0;
+  }
+
+  .assignment-completion__status,
+  .assignment-completion__error {
+    text-align: left;
+  }
+}
+</style>

frontend/website/src/views/ScheduleDetailView.vue

@@ -1,15 +1,55 @@
 <script setup lang="ts">
 import { storeToRefs } from 'pinia'
-import { ref, watch } from 'vue'
+import { computed, ref, watch } from 'vue'
 import { useRoute } from 'vue-router'
 
 import AuthenticatedHeader from '@/components/AuthenticatedHeader.vue'
-import { useSchedulesStore } from '@/stores/schedules'
+import ScheduleAssignmentTimeline from '@/components/ScheduleAssignmentTimeline.vue'
+import { useSchedulesStore, type ScheduleDetail } from '@/stores/schedules'
+
+type ScheduleDay = ScheduleDetail['days'][number]
 
 const route = useRoute()
 const schedulesStore = useSchedulesStore()
-const { activeSchedule, detailLoading, detailError, detailNotFound } = storeToRefs(schedulesStore)
+const {
+  activeSchedule,
+  assignmentCompletionErrors,
+  assignmentCompletionPendingIds,
+  detailLoading,
+  detailError,
+  detailNotFound,
+} = storeToRefs(schedulesStore)
 const currentScheduleId = ref<number | null>(null)
+const completionAnnouncement = ref('')
+const todayDate = browserDate(new Date())
+
+const remainingDays = computed<ScheduleDay[]>(() => {
+  if (activeSchedule.value === null) {
+    return []
+  }
+
+  return activeSchedule.value.days.flatMap((day) => {
+    const assignments = day.assignments.filter((assignment) => assignment.completedAt === null)
+    const isRestDay = day.assignments.length === 0
+
+    return assignments.length > 0 || isRestDay ? [{ date: day.date, assignments }] : []
+  })
+})
+
+const completedDays = computed<ScheduleDay[]>(() => {
+  if (activeSchedule.value === null) {
+    return []
+  }
+
+  return activeSchedule.value.days.flatMap((day) => {
+    const assignments = day.assignments.filter((assignment) => assignment.completedAt !== null)
+
+    return assignments.length > 0 ? [{ date: day.date, assignments }] : []
+  })
+})
+
+const remainingAssignmentCount = computed(() => assignmentCount(remainingDays.value))
+const completedAssignmentCount = computed(() => assignmentCount(completedDays.value))
 
 watch(
   () => route.params.scheduleId,
@@ -40,15 +80,27 @@ function formatDate(value: string): string {
   }).format(new Date(`${value}T00:00:00Z`))
 }
 
-function formatCompletionTime(value: string): string {
+function browserDate(date: Date): string {
-  return new Intl.DateTimeFormat('en', {
+  const year = String(date.getFullYear()).padStart(4, '0')
-    dateStyle: 'medium',
+  const month = String(date.getMonth() + 1).padStart(2, '0')
-    timeStyle: 'short',
+  const day = String(date.getDate()).padStart(2, '0')
-  }).format(new Date(value))
+
+  return `${year}-${month}-${day}`
+}
+
+function assignmentCount(days: ScheduleDay[]): number {
+  return days.reduce((count, day) => count + day.assignments.length, 0)
 }
 
 async function setAssignmentCompleted(assignmentId: number, completed: boolean): Promise<void> {
-  await schedulesStore.setAssignmentCompleted(assignmentId, completed)
+  completionAnnouncement.value = ''
+  const updated = await schedulesStore.setAssignmentCompleted(assignmentId, completed)
+
+  if (updated) {
+    completionAnnouncement.value = completed
+      ? 'Assignment moved to Completed.'
+      : 'Assignment moved to Remaining.'
+  }
 }
 </script>
 
@@ -93,73 +145,82 @@ async function setAssignmentCompleted(assignmentId: number, completed: boolean):
           </p>
         </header>
 
-        <ol class="schedule-days" aria-label="Scheduled days">
+        <p
-          <li
+          class="completion-announcement"
-            v-for="day in activeSchedule.days"
+          role="status"
-            :key="day.date"
+          aria-live="polite"
-            class="schedule-day"
+          data-completion-announcement
-            data-schedule-day
-            :data-schedule-date="day.date"
         >
-            <header class="schedule-day__header">
+          {{ completionAnnouncement }}
-              <time :datetime="day.date">{{ formatDate(day.date) }}</time>
+        </p>
-              <span>{{ day.assignments.length }} assigned</span>
+
+        <section
+          class="assignment-section assignment-section--remaining"
+          aria-labelledby="remaining-assignments-heading"
+          data-assignment-section="remaining"
+          :data-assignment-count="remainingAssignmentCount"
+        >
+          <header class="assignment-section__header">
+            <div>
+              <p class="assignment-section__eyebrow">Your plan</p>
+              <h2 id="remaining-assignments-heading">Remaining</h2>
+              <p>Everything still ahead, kept in scheduled order.</p>
+            </div>
+            <span class="assignment-section__count">
+              {{ remainingAssignmentCount }}
+              {{ remainingAssignmentCount === 1 ? 'assignment' : 'assignments' }}
+            </span>
           </header>
 
-            <p v-if="day.assignments.length === 0" class="rest-day">Rest day</p>
+          <p v-if="remainingAssignmentCount === 0" class="section-state" role="status">
+            All assignments are complete.
+          </p>
 
-            <ul v-else class="assignment-list">
+          <ScheduleAssignmentTimeline
-              <li
+            v-if="remainingDays.length > 0"
-                v-for="assignment in day.assignments"
+            :completion-errors="assignmentCompletionErrors"
-                :key="assignment.id"
+            :days="remainingDays"
-                :class="{ 'is-completed': assignment.completedAt !== null }"
+            mode="remaining"
-                :data-schedule-assignment="assignment.id"
+            :pending-assignment-ids="assignmentCompletionPendingIds"
+            :today="todayDate"
+            @set-completed="setAssignmentCompleted"
+          />
+        </section>
+
+        <details
+          class="assignment-section completed-section"
+          data-assignment-section="completed"
+          :data-assignment-count="completedAssignmentCount"
         >
-                <div class="assignment-description">
+          <summary class="completed-section__summary">
-                  <span class="assignment-path">
+            <span class="completed-section__introduction">
-                    {{ assignment.element.path.join(' / ') }}
+              <span class="completed-section__heading">Completed</span>
+              <span>Finished work, grouped by its original schedule date.</span>
             </span>
-                  <span class="assignment-kind">{{ assignment.element.kind }}</span>
+            <span class="completed-section__controls">
-                </div>
+              <span class="assignment-section__count">
-                <div class="assignment-completion">
+                {{ completedAssignmentCount }}
-                  <p v-if="assignment.completedAt !== null" class="assignment-completion__status">
+                {{ completedAssignmentCount === 1 ? 'assignment' : 'assignments' }}
-                    Completed
+              </span>
-                    <time :datetime="assignment.completedAt">
+              <span class="completed-section__chevron" aria-hidden="true">⌄</span>
-                      {{ formatCompletionTime(assignment.completedAt) }}
+            </span>
-                    </time>
+          </summary>
-                  </p>
+
-                  <p v-else class="assignment-completion__status">Not completed</p>
+          <div class="completed-section__content">
-                  <button
+            <p v-if="completedAssignmentCount === 0" class="section-state" role="status">
-                    type="button"
+              No assignments completed yet.
-                    class="assignment-completion-button"
-                    :aria-label="
-                      assignment.completedAt === null
-                        ? `Mark ${assignment.element.path.join(' / ')} complete`
-                        : `Reopen ${assignment.element.path.join(' / ')}`
-                    "
-                    :disabled="schedulesStore.isAssignmentCompletionPending(assignment.id)"
-                    @click="setAssignmentCompleted(assignment.id, assignment.completedAt === null)"
-                  >
-                    {{
-                      schedulesStore.isAssignmentCompletionPending(assignment.id)
-                        ? 'Saving...'
-                        : assignment.completedAt === null
-                          ? 'Mark complete'
-                          : 'Reopen'
-                    }}
-                  </button>
-                  <p
-                    v-if="schedulesStore.assignmentCompletionError(assignment.id) !== null"
-                    class="assignment-completion__error"
-                    role="alert"
-                  >
-                    {{ schedulesStore.assignmentCompletionError(assignment.id) }}
             </p>
+            <ScheduleAssignmentTimeline
+              v-else
+              :completion-errors="assignmentCompletionErrors"
+              :days="completedDays"
+              mode="completed"
+              :pending-assignment-ids="assignmentCompletionPendingIds"
+              :today="todayDate"
+              @set-completed="setAssignmentCompleted"
+            />
           </div>
-              </li>
+        </details>
-            </ul>
-          </li>
-        </ol>
       </template>
     </section>
   </main>
@@ -233,153 +294,142 @@ h1 {
   color: #68776f;
 }
 
-.schedule-days {
+.completion-announcement {
-  display: grid;
+  position: absolute;
-  gap: 1rem;
+  width: 1px;
-  margin: 3rem 0 0;
+  height: 1px;
   padding: 0;
-  list-style: none;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
 }
 
-.schedule-day {
+.assignment-section {
+  margin-top: 3rem;
+}
+
+.assignment-section__header {
+  display: flex;
+  align-items: end;
+  justify-content: space-between;
+  gap: 2rem;
+}
+
+.assignment-section__eyebrow {
+  margin: 0 0 0.45rem;
+  color: #926044;
+  font-size: 0.68rem;
+  font-weight: 800;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+}
+
+.assignment-section__header h2,
+.completed-section__heading {
+  font-family: Georgia, 'Times New Roman', serif;
+  font-weight: 500;
+  letter-spacing: -0.035em;
+}
+
+.assignment-section__header h2 {
+  margin: 0;
+  font-size: clamp(2rem, 5vw, 3rem);
+  line-height: 1;
+}
+
+.assignment-section__header p:last-child {
+  margin: 0.65rem 0 0;
+  color: #68776f;
+  line-height: 1.55;
+}
+
+.assignment-section__count {
+  flex: 0 0 auto;
+  padding: 0.45rem 0.7rem;
+  border-radius: 999px;
+  color: #4f665d;
+  background: rgb(224 233 223 / 72%);
+  font-size: 0.72rem;
+  font-weight: 800;
+}
+
+.section-state {
+  display: grid;
+  min-height: 6rem;
+  place-items: center;
+  margin: 1.4rem 0 0;
+  padding: 1.25rem;
+  border: 1px dashed rgb(24 48 41 / 18%);
+  border-radius: 1rem;
+  color: #5e7067;
+  background: rgb(255 253 247 / 52%);
+  text-align: center;
+}
+
+.completed-section {
   overflow: hidden;
   border: 1px solid rgb(24 48 41 / 12%);
   border-radius: 1rem;
-  background: rgb(255 253 247 / 82%);
+  background: rgb(246 245 237 / 78%);
-  box-shadow: 0 0.75rem 2rem rgb(40 62 52 / 6%);
 }
 
-.schedule-day__header {
+.completed-section__summary {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: 1rem;
+  gap: 1.5rem;
-  padding: 0.85rem 1rem;
+  padding: 1.15rem 1.25rem;
-  border-bottom: 1px solid rgb(24 48 41 / 10%);
+  cursor: pointer;
-  color: #5e7067;
-  background: rgb(239 228 212 / 42%);
-  font-size: 0.75rem;
-  font-weight: 800;
-}
-
-.rest-day {
-  margin: 0;
-  padding: 1.2rem 1rem;
-  color: #79877f;
-  font-style: italic;
-}
-
-.assignment-list {
-  display: grid;
-  gap: 0;
-  margin: 0;
-  padding: 0;
   list-style: none;
 }
 
-.assignment-list li {
+.completed-section__summary::-webkit-details-marker {
-  display: grid;
+  display: none;
-  grid-template-columns: minmax(0, 1fr) auto;
-  align-items: start;
-  gap: 1rem;
-  padding: 1rem;
 }
 
-.assignment-list li.is-completed {
+.completed-section__summary:focus-visible {
-  background: rgb(220 235 224 / 34%);
-}
-
-.assignment-list li + li {
-  border-top: 1px solid rgb(24 48 41 / 10%);
-}
-
-.assignment-path {
-  min-width: 0;
-  font-family: Georgia, 'Times New Roman', serif;
-  font-size: 1.05rem;
-  overflow-wrap: anywhere;
-}
-
-.assignment-description {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 1rem;
-  min-width: 0;
-}
-
-.assignment-kind {
-  flex: 0 0 auto;
-  padding: 0.35rem 0.55rem;
-  border-radius: 999px;
-  color: #81533a;
-  background: #efe4d4;
-  font-size: 0.62rem;
-  font-weight: 800;
-  letter-spacing: 0.1em;
-  text-transform: none;
-}
-
-.assignment-completion {
-  display: grid;
-  justify-items: end;
-  gap: 0.55rem;
-  min-width: 12rem;
-}
-
-.assignment-completion__status,
-.assignment-completion__error {
-  margin: 0;
-  font-size: 0.74rem;
-  font-weight: 700;
-  text-align: right;
-}
-
-.assignment-completion__status {
-  color: #5e7067;
-}
-
-.assignment-completion__status time {
-  display: block;
-  margin-top: 0.2rem;
-  color: #344e45;
-}
-
-.assignment-completion__error {
-  max-width: 14rem;
-  color: #9b3f32;
-}
-
-.assignment-completion-button {
-  min-height: 2.4rem;
-  padding: 0.55rem 0.8rem;
-  border: 1px solid rgb(24 58 49 / 28%);
-  border-radius: 0.65rem;
-  color: #183a31;
-  background: #fffdf7;
-  font-size: 0.75rem;
-  font-weight: 800;
-  cursor: pointer;
-}
-
-.is-completed .assignment-completion-button {
-  color: #5e7067;
-  background: transparent;
-}
-
-.assignment-completion-button:hover:not(:disabled) {
-  border-color: #285c4e;
-  background: #f9f5e9;
-}
-
-.assignment-completion-button:focus-visible {
   outline: 3px solid rgb(86 127 112 / 34%);
-  outline-offset: 0.25rem;
+  outline-offset: -0.25rem;
 }
 
-.assignment-completion-button:disabled {
+.completed-section__introduction {
-  cursor: wait;
+  display: grid;
-  opacity: 0.65;
+  gap: 0.25rem;
+}
+
+.completed-section__heading {
+  color: #344e45;
+  font-size: 1.35rem;
+}
+
+.completed-section__introduction > span:last-child {
+  color: #79877f;
+  font-size: 0.78rem;
+  line-height: 1.45;
+}
+
+.completed-section__controls {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.completed-section__chevron {
+  color: #68776f;
+  font-size: 1.35rem;
+  line-height: 1;
+  transition: transform 160ms ease;
+}
+
+.completed-section[open] .completed-section__chevron {
+  transform: rotate(180deg);
+}
+
+.completed-section__content {
+  padding: 0 1rem 1rem;
+  border-top: 1px solid rgb(24 48 41 / 10%);
 }
 
 .page-state {
@@ -430,22 +480,26 @@ h1 {
     margin-top: 3rem;
   }
 
-  .assignment-list li {
+  .assignment-section__header {
-    grid-template-columns: 1fr;
-  }
-
-  .assignment-description {
     align-items: flex-start;
+    flex-direction: column;
+    gap: 1rem;
   }
 
-  .assignment-completion {
+  .completed-section__summary {
-    justify-items: start;
+    align-items: flex-start;
-    min-width: 0;
+    gap: 1rem;
+    padding: 1rem;
   }
 
-  .assignment-completion__status,
+  .completed-section__controls {
-  .assignment-completion__error {
+    flex-direction: column;
-    text-align: left;
+    align-items: flex-end;
+    gap: 0.35rem;
+  }
+
+  .completed-section__content {
+    padding: 0 0.75rem 0.75rem;
   }
 }
 </style>