Add dialog showing diff of changes to save

Add a save dialog at the bottom of the screen that is present whenever
there are unsaved changes.  This dialog provides a diff between the
client and server state so that the user can easily confirm the changes
they are about to make are the correct changes before applying them to
the server.

pages/edit.vue

@@ -78,13 +78,31 @@
 				<TableScheduleShiftSlots :edit="true" :roleId="roleFilter" :shiftSlotFilter />
 			</template>
 		</Tabs>
-		<p v-if="schedule.isModified()">
-			Changes are not saved yet.
-			<button
-				type="button"
-				@click="saveChanges"
-			>Save Changes</button>
-		</p>
+		<section
+			class="saveDialog"
+			:class="{ visible: schedule.isModified() }"
+		>
+			<DiffSchedule
+				v-if="reviewOpen"
+				:schedule
+			/>
+			<hr v-if="reviewOpen">
+			<section class="saveLine">
+				<span>Changes are not saved yet.</span>
+				<button
+					type="button"
+					v-if="reviewOpen"
+					@click="saveChanges"
+				>Save changes</button>
+				<button
+					type="button"
+					class="review"
+					@click="reviewOpen = !reviewOpen"
+				>
+					{{ reviewOpen ? "Close" : "Review" }}
+				</button>
+			</section>
+		</section>
 	</main>
 </template>
 
@@ -156,6 +174,8 @@ const roleFilter = computed({
 	}),
 });
 
+const reviewOpen = ref(false);
+
 async function saveChanges() {
 	try {
 		await $fetch("/api/schedule", {
@@ -168,3 +188,37 @@ async function saveChanges() {
 	}
 }
 </script>
+
+<style scoped>
+.saveDialog {
+	visibility: hidden;
+	max-height: calc(100dvh - 2rem);
+	overflow-y: auto;
+	max-width: 30rem;
+	padding: 0.2rem 0.4rem;
+	border: 1px solid CanvasText;
+	background-color: color-mix(in srgb, Canvas, CanvasText 10%);
+	margin-block-start: 1rem;
+	margin-block-end: 0.5rem;
+	margin-inline: auto;
+}
+.saveDialog.visible {
+	visibility: visible;
+	position: sticky;
+	bottom: 0.5rem;
+}
+.saveDialog hr {
+	margin-block-start: 0.4rem;
+	margin-block-end: 0.2rem;
+}
+.saveLine {
+	display: flex;
+	gap: 0.5rem;
+}
+.saveLine span {
+	margin-inline-end: auto;
+}
+button.review {
+	width: 4.5rem;
+}
+</style>