Lumotia/src/lib/pages/ShutdownRitualPage.svelte

<script lang="ts">
  // @ts-nocheck
  // Phase 5 evening wind-down. A reflective (not transactional) page
  // users trigger manually when they want to close the working day.
  //
  // Newport-style shutdown ritual: mechanical closure + physical reset +
  // intentional cue. Research on psychological detachment shows this
  // reduces evening rumination by ~40% (Simply Psychology / Cal Newport).
  // The Zeigarnik effect means unfinished tasks keep firing reminder
  // signals — naming them here, even without acting, is what silences
  // the loop.
  //
  // Copy rule: additive framing only ("You finished X"), never
  // subtractive ("X still open"). Open loops are listed but read-only —
  // transactional work belongs on the Tasks page.

  import { onMount } from 'svelte';
  import { invoke } from '@tauri-apps/api/core';
  import { Moon, ArrowLeft } from 'lucide-svelte';
  import { page } from '$lib/stores/page.svelte.js';
  import { hasTauriRuntime } from '$lib/utils/runtime.js';

  interface TaskRow {
    id: string;
    text: string;
    bucket: string;
    done: boolean;
    doneAt: string | null;
    createdAt: string;
  }

  let completedToday = $state<TaskRow[]>([]);
  let openLoops = $state<TaskRow[]>([]);
  let loading = $state(true);

  function localDateKey(iso: string | null | undefined): string | null {
    if (!iso) return null;
    const d = new Date(iso);
    if (Number.isNaN(d.getTime())) return null;
    return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`;
  }

  function todayKey(): string {
    const d = new Date();
    return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`;
  }

  async function load() {
    if (!hasTauriRuntime()) {
      loading = false;
      return;
    }
    try {
      const all = await invoke<TaskRow[]>('list_tasks_cmd');
      const today = todayKey();
      completedToday = all.filter((t) => t.done && localDateKey(t.doneAt) === today);
      openLoops = all.filter((t) => !t.done);
    } catch {
      completedToday = [];
      openLoops = [];
    } finally {
      loading = false;
    }
  }

  function close() {
    page.current = 'dictation';
  }

  onMount(load);
</script>

<div class="flex flex-col h-full bg-bg overflow-y-auto">
  <div class="flex items-center gap-3 px-7 pt-6 pb-3">
    <button
      type="button"
      class="p-1.5 rounded-lg text-text-tertiary hover:text-text hover:bg-hover"
      onclick={close}
      aria-label="Back to dictation"
    >
      <ArrowLeft size={16} aria-hidden="true" />
    </button>
    <Moon size={18} class="text-text-secondary" aria-hidden="true" />
    <h1 class="font-display text-[26px] italic text-text">Wind down</h1>
  </div>

  <div class="px-7 pb-8 max-w-[640px]">
    {#if loading}
      <p class="text-[12px] text-text-secondary py-6">Looking at today…</p>
    {:else}
      <!-- Additive framing: lead with what the user did, never with what they didn't. -->
      <section class="mb-8">
        <p class="font-display text-[18px] italic text-text mb-2">
          {#if completedToday.length === 0}
            A quiet day.
          {:else if completedToday.length === 1}
            You finished one thing today.
          {:else}
            You finished {completedToday.length} today.
          {/if}
        </p>
        {#if completedToday.length > 0}
          <ul class="mt-3 flex flex-col gap-1.5">
            {#each completedToday as task (task.id)}
              <li class="text-[13px] text-text-secondary leading-relaxed">
                <span class="text-success mr-2" aria-hidden="true">✓</span>{task.text}
              </li>
            {/each}
          </ul>
        {/if}
      </section>

      <!-- Read-only reflection. The Tasks page is where things get done. -->
      <section class="mb-8">
        <h2 class="text-[12px] font-medium text-text-secondary uppercase tracking-wider mb-2">Open loops</h2>
        {#if openLoops.length === 0}
          <p class="text-[12px] text-text-secondary">Nothing in the list.</p>
        {:else}
          <p class="text-[12px] text-text-secondary mb-3">
            These are still here. Naming them silences the loop, you don't have to act now.
          </p>
          <ul class="flex flex-col gap-1">
            {#each openLoops.slice(0, 12) as task (task.id)}
              <li class="text-[12px] text-text-secondary truncate">
                {task.text}
              </li>
            {/each}
            {#if openLoops.length > 12}
              <li class="text-[12px] text-text-secondary pt-1">
                …and {openLoops.length - 12} more.
              </li>
            {/if}
          </ul>
        {/if}
      </section>

      <!-- Physical reset + intentional cue. Evidence: Newport shutdown
           template, ~40% rumination reduction in psychological-detachment
           studies. -->
      <section class="mb-8">
        <h2 class="text-[12px] font-medium text-text-secondary uppercase tracking-wider mb-2">Before you close</h2>
        <ol class="flex flex-col gap-2 text-[13px] text-text-secondary">
          <li>
            <span class="font-medium text-text">Take a breath.</span>
            Stand up. Stretch for ten seconds.
          </li>
          <li>
            <span class="font-medium text-text">Pick a closing line.</span>
            Say it out loud when you're ready, something like "I'm done for today."
          </li>
          <li>
            <span class="font-medium text-text">Let it rest.</span>
            Tomorrow's list will be here. Work done for today.
          </li>
        </ol>
      </section>

      <div class="pt-2">
        <button
          type="button"
          class="px-4 py-2 rounded-lg bg-accent btn-filled-text text-[12px] font-medium hover:bg-accent-hover"
          onclick={close}
        >
          Close
        </button>
      </div>
    {/if}
  </div>
</div>