<script lang="ts">
  import { onMount } from "svelte";
  import { listen } from "@tauri-apps/api/event";

  let opacity = $state(0);

  onMount(async () => {
    await listen<{ progress: number; maxOpacity: number }>("screen-dim-update", (event) => {
      opacity = event.payload.progress * event.payload.maxOpacity;
    });

    // When break starts, this window gets destroyed by backend
    await listen("break-started", () => {
      opacity = 0;
    });
  });
</script>

<div
  class="fixed inset-0 pointer-events-none"
  style="background: rgba(0, 0, 0, {opacity}); transition: opacity 1s linear;"
  aria-hidden="true"
></div>
