feat(oxibadge): warn before losing unexported review edits, add undo

The review screen now tracks whether there are edits not yet exported and asks for confirmation before discarding them: clicking back, or closing the app window entirely (intercepted via onCloseRequested, which needed a core:window:allow-destroy capability that wasn't granted by core:default). The confirmation dialog (ConfirmDialog.svelte) is generic, built on a shared ModalFrame extracted from ExportModal so the two don't duplicate the backdrop/box styling. Also adds undo: a per-row button (icon-only, left of the note, shown when that day has edits) reverts just that day instantly, and a per-employee "undo all" (icon in a red box, last among the header's tools) reverts every day for the current employee after a confirmation dialog, since that one can't be undone itself. ActionButton moves out of review/ next to IconButton/PillButton, since ConfirmDialog (outside the review feature) now uses it too. Assisted-by: Claude Sonnet 5 <noreply@anthropic.com>
2026-10-09 13:46:31 +02:00
parent 25127bee96
commit 0c320c39b0
13 changed files with 421 additions and 104 deletions
@@ -1,8 +1,9 @@
 <script lang="ts">
  import { _ } from 'svelte-i18n';
  import type { Shifts } from '$lib/shifts';
+  import ModalFrame from '../ModalFrame.svelte';
  import FixButton from './FixButton.svelte';
-  import ActionButton from './ActionButton.svelte';
+  import ActionButton from '../ActionButton.svelte';

  let {
    title,
@@ -25,108 +26,64 @@
  } = $props();
 </script>

-<div class="modal-wrap">
-  <button type="button" class="modal-backdrop" aria-label={$_('review.cancel_export_aria')} onclick={onclose}
-  ></button>
-  <div class="modal" role="alertdialog" aria-modal="true" aria-labelledby="ox-exp-title" aria-describedby="ox-exp-desc">
-    <div class="modal-icon">
-      <svg width="22" height="22" viewBox="0 0 24 24" aria-hidden="true"
-        ><path d="M10.3 3.9L2.4 17.5A2 2 0 0 0 4.1 20.5h15.8a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0z" /><path
-          d="M12 9.5v4M12 17h.01"
-        /></svg
-      >
-    </div>
-    <div class="modal-text">
-      <h2 id="ox-exp-title">{title}</h2>
-      <p id="ox-exp-desc">
-        {#if scopeIssues}
-          {$_('review.export_warning_issues')}
-        {:else}
-          {$_('review.export_warning_unrounded', { values: { step: shift.round_step_min } })}
-        {/if}
-      </p>
-    </div>
-    <div class="modal-list scroll">
-      {#each items as it (it.key)}
-        <button type="button" class="menu-item row-item" onclick={it.go}>
-          <span class="mi-label">{it.label}</span>
-          <span class="mi-detail" class:red={it.red} class:blue={!it.red}>{it.detail}</span>
-          <svg width="14" height="14" viewBox="0 0 24 24" aria-hidden="true" class="mi-chev"
-            ><path d="M9 6l6 6-6 6" /></svg
-          >
-        </button>
-      {/each}
-    </div>
-    <div class="modal-actions">
-      <ActionButton onclick={onclose}>{$_('review.back_to_review')}</ActionButton>
-      {#if scopeIssues === 0 && scopeInfos > 0}
-        <FixButton size="tall" blue onclick={onroundandexport}>
-          {#snippet icon()}
-            <svg width="16" height="16" viewBox="0 0 24 24" aria-hidden="true" style="stroke-width: 2"
-              ><circle cx="12" cy="13" r="8" /><path d="M12 9v4l2.5 2.5M10 2h4" /></svg
-            >
-          {/snippet}
-          {$_('review.round_and_export')}
-        </FixButton>
+<ModalFrame
+  titleId="ox-exp-title"
+  descId="ox-exp-desc"
+  closeAriaLabel={$_('review.cancel_export_aria')}
+  {onclose}
+>
+  {#snippet icon()}
+    <svg width="22" height="22" viewBox="0 0 24 24" aria-hidden="true"
+      ><path d="M10.3 3.9L2.4 17.5A2 2 0 0 0 4.1 20.5h15.8a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0z" /><path
+        d="M12 9.5v4M12 17h.01"
+      /></svg
+    >
+  {/snippet}
+  <div class="modal-text">
+    <h2 id="ox-exp-title">{title}</h2>
+    <p id="ox-exp-desc">
+      {#if scopeIssues}
+        {$_('review.export_warning_issues')}
+      {:else}
+        {$_('review.export_warning_unrounded', { values: { step: shift.round_step_min } })}
      {/if}
-      <ActionButton primary onclick={onexportanyway}>
+    </p>
+  </div>
+  <div class="modal-list scroll">
+    {#each items as it (it.key)}
+      <button type="button" class="menu-item row-item" onclick={it.go}>
+        <span class="mi-label">{it.label}</span>
+        <span class="mi-detail" class:red={it.red} class:blue={!it.red}>{it.detail}</span>
+        <svg width="14" height="14" viewBox="0 0 24 24" aria-hidden="true" class="mi-chev"
+          ><path d="M9 6l6 6-6 6" /></svg
+        >
+      </button>
+    {/each}
+  </div>
+  <div class="modal-actions">
+    <ActionButton onclick={onclose}>{$_('review.back_to_review')}</ActionButton>
+    {#if scopeIssues === 0 && scopeInfos > 0}
+      <FixButton size="tall" blue onclick={onroundandexport}>
        {#snippet icon()}
-          <svg width="18" height="18" viewBox="0 0 24 24" aria-hidden="true" style="stroke-width: 2"
-            ><path d="M12 4v11M7 10l5 5 5-5M5 20h14" /></svg
+          <svg width="16" height="16" viewBox="0 0 24 24" aria-hidden="true" style="stroke-width: 2"
+            ><circle cx="12" cy="13" r="8" /><path d="M12 9v4l2.5 2.5M10 2h4" /></svg
          >
        {/snippet}
-        {$_('review.export_anyway')}
-      </ActionButton>
-    </div>
+        {$_('review.round_and_export')}
+      </FixButton>
+    {/if}
+    <ActionButton primary onclick={onexportanyway}>
+      {#snippet icon()}
+        <svg width="18" height="18" viewBox="0 0 24 24" aria-hidden="true" style="stroke-width: 2"
+          ><path d="M12 4v11M7 10l5 5 5-5M5 20h14" /></svg
+        >
+      {/snippet}
+      {$_('review.export_anyway')}
+    </ActionButton>
  </div>
-</div>
+</ModalFrame>

 <style>
-  .modal-wrap {
-    position: absolute;
-    inset: 0;
-    z-index: 40;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: 24px;
-    box-sizing: border-box;
-  }
-
-  .modal-backdrop {
-    all: unset;
-    position: absolute;
-    inset: 0;
-    background: rgba(0, 0, 0, 0.6);
-    cursor: default;
-  }
-
-  .modal {
-    position: relative;
-    width: 100%;
-    max-width: 440px;
-    box-sizing: border-box;
-    padding: 24px;
-    background: #1a1a1a;
-    border: 1px solid #333333;
-    border-radius: 18px;
-    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
-    display: flex;
-    flex-direction: column;
-    gap: 18px;
-  }
-
-  .modal-icon {
-    width: 44px;
-    height: 44px;
-    border-radius: 12px;
-    background: rgba(229, 72, 77, 0.14);
-    color: #ff6b74;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-
  .modal-text {
    display: flex;
    flex-direction: column;