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,74 +0,0 @@
-<script lang="ts">
-  import type { Snippet } from 'svelte';
-
-  let {
-    primary = false,
-    onclick,
-    icon,
-    children
-  }: {
-    primary?: boolean;
-    onclick: () => void;
-    icon?: Snippet;
-    children: Snippet;
-  } = $props();
-</script>
-
-<button type="button" class="btn" class:primary {onclick}>
-  {#if icon}{@render icon()}{/if}
-  <span>{@render children()}</span>
-</button>
-
-<style>
-  .btn {
-    all: unset;
-    box-sizing: border-box;
-    height: 44px;
-    padding: 0 16px;
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    border: 1px solid #333333;
-    border-radius: 12px;
-    color: #e6e6e6;
-    font-size: 14.5px;
-    font-weight: 500;
-    cursor: pointer;
-    transition: background 0.15s;
-  }
-
-  .btn:hover {
-    background: #1e1e1e;
-    color: #ffffff;
-  }
-
-  .btn:focus-visible {
-    outline: 2px solid var(--ox-accent);
-    outline-offset: 2px;
-  }
-
-  .btn.primary {
-    padding: 0 18px;
-    border: none;
-    background: var(--ox-accent);
-    color: var(--ox-on-accent);
-    font-weight: 600;
-    transition:
-      filter 0.15s,
-      transform 0.1s;
-  }
-
-  .btn.primary:hover {
-    background: var(--ox-accent);
-    filter: brightness(1.08);
-  }
-
-  .btn.primary:active {
-    transform: translateY(1px);
-  }
-
-  .btn.primary:focus-visible {
-    outline: 2px solid #ffffff;
-    outline-offset: 3px;
-  }
-</style>
@@ -23,6 +23,7 @@
    onfixall,
    onaddlunchall,
    onroundall,
+    onundoall,
    onlyIssues = $bindable(false)
  }: {
    name: string;
@@ -41,6 +42,7 @@
    onfixall: () => void;
    onaddlunchall: () => void;
    onroundall: () => void;
+    onundoall: () => void;
    onlyIssues?: boolean;
  } = $props();

@@ -150,6 +152,21 @@
        >{$_('review.to_check_cap')}</button
      >
    </div>
+    {#if edits}
+      <IconButton
+        size="lg"
+        dangerFilled
+        ariaLabel={$_('review.undo_all')}
+        title={$_('review.undo_all_title')}
+        onclick={onundoall}
+      >
+        {#snippet icon()}
+          <svg width="18" height="18" viewBox="0 0 24 24" aria-hidden="true" style="stroke-width: 2"
+            ><path d="M9 14l-5-5 5-5" /><path d="M20 20v-7a4 4 0 0 0-4-4H4" /></svg
+          >
+        {/snippet}
+      </IconButton>
+    {/if}
  </div>
 </div>

@@ -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;
@@ -12,7 +12,8 @@
    oncellinput,
    onfixday,
    onaddlunch,
-    onroundday
+    onroundday,
+    onundoday
  }: {
    rows: Row[];
    rounded: Record<string, string>;
@@ -22,6 +23,7 @@
    onfixday: (di: number) => void;
    onaddlunch: (di: number) => void;
    onroundday: (di: number) => void;
+    onundoday: (di: number) => void;
  } = $props();
 </script>

@@ -85,6 +87,19 @@

          <td class="note {note.kind}">
            <span class="note-in">
+              {#if r.rowEdits > 0}
+                <button
+                  type="button"
+                  class="undo-btn"
+                  aria-label={$_('review.undo_day_aria', { values: { label } })}
+                  title={$_('review.undo_short')}
+                  onclick={() => onundoday(r.di)}
+                >
+                  <svg width="14" height="14" viewBox="0 0 24 24" aria-hidden="true" style="stroke-width: 2"
+                    ><path d="M9 14l-5-5 5-5" /><path d="M20 20v-7a4 4 0 0 0-4-4H4" /></svg
+                  >
+                </button>
+              {/if}
              {#if note.kind === 'issue'}
                <svg width="14" height="14" viewBox="0 0 24 24" aria-hidden="true"
                  ><circle cx="12" cy="12" r="9" /><path d="M12 7.5v5.5M12 16.5h.01" /></svg
@@ -377,6 +392,33 @@
    gap: 8px;
  }

+  .undo-btn {
+    all: unset;
+    box-sizing: border-box;
+    width: 22px;
+    height: 22px;
+    flex: none;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 6px;
+    color: #6e6e6e;
+    cursor: pointer;
+    transition:
+      background 0.15s,
+      color 0.15s;
+  }
+
+  .undo-btn:hover {
+    background: #262626;
+    color: #e6e6e6;
+  }
+
+  .undo-btn:focus-visible {
+    outline: 2px solid var(--ox-accent);
+    outline-offset: 1px;
+  }
+
  .empty {
    padding: 48px 24px;
    display: flex;