@picked/svelte 0.0.1-dev.1793776638554 → 0.0.1-dev.1793835766402

package/dist/plugins/devtools/review/personas/PersonaCard.svelte

@@ -1,72 +1,207 @@
 <script lang="ts">
-  /** @file One persona in the Personas & Scenarios tab: who it is, where it lands, Load and Delete. */
-  import { Button, Card, Text } from '../../ui'
-  import { describeLanding, type Persona } from '../../derive'
+  /**
+   * @file One persona in the Personas & Scenarios tab: who it is and where it lands, with Walk
+   * through, Jump to step, Edit, and Delete or Reset. Jump to step lists the screens on the
+   * persona's route; picking one walks the persona there.
+   */
+  import { Badge, Button, Card, CopyButton, Text } from '../../ui'
+  import { describeLanding, deslug, type Persona } from '../../derive'
+  import type { RouteScreen } from './persona-route'
 
   interface PersonaCardProps {
     persona: Persona
-    /** Why Load is withheld; `undefined` while it is allowed. */
-    loadReason: string | undefined
-    /** True while this persona is loading. */
-    loading: boolean
-    onLoad: () => void
-    /** Opens it in the form; absent for a persona the site defines. */
-    onEdit?: () => void
-    /** Deletes it; absent for a persona the site defines. */
+    /** Why starting it is withheld; `undefined` while it is allowed. */
+    startReason: string | undefined
+    /** True while this persona is starting. */
+    starting: boolean
+    /** True while the tab walks through as this persona. */
+    active: boolean
+    onWalkThrough: () => void
+    /** Works out the screens on its route; `null` when it has no journey. */
+    route: () => Promise<RouteScreen[] | null>
+    /**
+     * Walks the persona to a screen on its route.
+     *
+     * @param screen - The screen.
+     */
+    onJump: (screen: RouteScreen) => void
+    /** Opens it in the form. */
+    onEdit: () => void
+    /** Deletes a persona saved in this browser; absent for the site's own. */
     onDelete?: () => void
+    /** Drops this browser's edit of a site persona; absent otherwise. */
+    onReset?: () => void
+    /** The link that starts a walk-through as it in another browser; absent for a saved persona. */
+    link?: string
   }
 
-  const { persona, loadReason, loading, onLoad, onEdit, onDelete }: PersonaCardProps = $props()
+  const {
+    persona,
+    startReason,
+    starting,
+    active,
+    onWalkThrough,
+    route,
+    onJump,
+    onEdit,
+    onDelete,
+    onReset,
+    link,
+  }: PersonaCardProps = $props()
 
   let confirming = $state(false)
+  let jumpOpen = $state(false)
+  /** The route's screens; `undefined` while they are worked out. */
+  let screens = $state.raw<RouteScreen[] | null | undefined>(undefined)
 
   const answers = $derived(Object.keys(persona.responses).length)
   const answerLabel = $derived(answers === 1 ? '1 response' : `${answers} responses`)
   const summary = $derived(
-    persona.load === null
-      ? `${answerLabel} · ${describeLanding(persona.landing)}`
-      : 'Set up by this site',
+    [answerLabel, describeLanding(persona.landing), persona.edited ? 'Edited in this browser' : '']
+      .filter((part) => part.length > 0)
+      .join(' · '),
   )
+  const removeLabel = $derived(onReset ? 'Reset' : 'Delete')
+  const removeQuestion = $derived(
+    onReset ? `Undo your edits to ${persona.name}?` : `Delete ${persona.name}?`,
+  )
+
+  /**
+   * Opens or closes the list of screens to jump to, working the route out on first open.
+   *
+   * @returns {Promise<void>} Settles once the route is worked out.
+   * @example await toggleJump()
+   */
+  async function toggleJump(): Promise<void> {
+    jumpOpen = !jumpOpen
+    if (!jumpOpen) return
+    screens = undefined
+    try {
+      screens = await route()
+    } catch {
+      screens = null
+    }
+  }
+
+  /**
+   * A screen's name in the list.
+   *
+   * @param {RouteScreen} screen - The screen.
+   * @returns {string} Its name.
+   * @example screenLabel(screen) // 'Postcode'
+   */
+  function screenLabel(screen: RouteScreen): string {
+    return screen.stepName ?? deslug(screen.stepKey)
+  }
 </script>
 
 <Card>
   <div class="persona" data-testid="devtools-persona" data-persona-id={persona.id}>
-    <div class="details">
-      <Text weight="semibold">{persona.name}</Text>
-      {#if persona.description}
-        <Text size="small">{persona.description}</Text>
-      {/if}
-      <Text size="caption" color="subdued">{summary}</Text>
-    </div>
-    <div class="actions">
-      {#if confirming && onDelete}
-        <Text size="small">Delete {persona.name}?</Text>
-        <Button variant="destructive" size="small" onclick={onDelete}>Yes, delete</Button>
-        <Button variant="ghost" size="small" onclick={() => (confirming = false)}>Keep</Button>
-      {:else}
-        <Button
-          variant="primary"
-          size="small"
-          disabled={loadReason !== undefined}
-          title={loadReason}
-          {loading}
-          onclick={onLoad}
-        >
-          Load
-        </Button>
-        {#if onEdit}
-          <Button variant="ghost" size="small" onclick={onEdit}>Edit</Button>
+    <div class="head">
+      <div class="details">
+        <Text weight="semibold">{persona.name}</Text>
+        {#if persona.description}
+          <Text size="small">{persona.description}</Text>
         {/if}
-        {#if onDelete}
-          <Button variant="ghost" size="small" onclick={() => (confirming = true)}>Delete</Button>
+        <Text size="caption" color="subdued">{summary}</Text>
+        {#if active}
+          <span><Badge status="info" size="small">Walking through now</Badge></span>
         {/if}
-      {/if}
+      </div>
+      <div class="actions">
+        {#if confirming && (onDelete || onReset)}
+          <Text size="small">{removeQuestion}</Text>
+          <Button
+            variant="destructive"
+            size="small"
+            onclick={() => {
+              confirming = false
+              ;(onReset ?? onDelete)?.()
+            }}
+          >
+            Yes, {removeLabel.toLowerCase()}
+          </Button>
+          <Button variant="ghost" size="small" onclick={() => (confirming = false)}>Keep</Button>
+        {:else}
+          <Button
+            variant="primary"
+            size="small"
+            disabled={startReason !== undefined}
+            title={startReason}
+            loading={starting}
+            onclick={onWalkThrough}
+          >
+            Walk through
+          </Button>
+          <Button
+            variant="secondary"
+            size="small"
+            disabled={startReason !== undefined}
+            title={startReason}
+            onclick={() => void toggleJump()}
+          >
+            Jump to step
+          </Button>
+          <Button variant="ghost" size="small" onclick={onEdit}>Edit</Button>
+          {#if link}
+            <CopyButton
+              text={link}
+              label="Copy a link that walks through as {persona.name}"
+              testId="devtools-persona-link"
+            />
+          {/if}
+          {#if onDelete || onReset}
+            <Button variant="ghost" size="small" onclick={() => (confirming = true)}>
+              {removeLabel}
+            </Button>
+          {/if}
+        {/if}
+      </div>
     </div>
+
+    {#if jumpOpen}
+      <div class="jump" data-testid="devtools-persona-jump">
+        {#if screens === undefined}
+          <Text size="small" color="subdued">Working out the route…</Text>
+        {:else if screens === null || screens.length === 0}
+          <Text size="small" color="subdued">No steps to jump to from this page.</Text>
+        {:else}
+          <Text size="small" color="subdued">
+            Pick a step. The page reloads and walks there as {persona.name}.
+          </Text>
+          <ol class="steps">
+            {#each screens as screen (`${screen.experienceKey}/${screen.stepKey}`)}
+              <li>
+                <button
+                  type="button"
+                  class="step"
+                  data-testid="devtools-persona-jump-step"
+                  disabled={startReason !== undefined}
+                  onclick={() => onJump(screen)}
+                >
+                  <span class="step-name">{screenLabel(screen)}</span>
+                  <span class="step-journey">{screen.experienceName}</span>
+                  {#if screen.isStop}
+                    <Badge size="small">Where it stops</Badge>
+                  {/if}
+                </button>
+              </li>
+            {/each}
+          </ol>
+        {/if}
+      </div>
+    {/if}
   </div>
 </Card>
 
 <style>
   .persona {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-3);
+  }
+
+  .head {
     display: flex;
     flex-wrap: wrap;
     align-items: center;
@@ -88,4 +223,52 @@
     align-items: center;
     gap: var(--space-2);
   }
+
+  .jump {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-2);
+    padding-top: var(--space-3);
+    border-top: 1px solid var(--color-gray-200);
+  }
+
+  .steps {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-1);
+    margin: 0;
+    padding-left: var(--space-5);
+  }
+
+  .step {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--space-2);
+    width: 100%;
+    padding: var(--space-1-5) var(--space-2);
+    border: 0;
+    border-radius: var(--radius-sm);
+    background: transparent;
+    color: var(--color-gray-900);
+    font: inherit;
+    font-size: var(--text-sm);
+    text-align: left;
+    cursor: pointer;
+  }
+
+  .step:hover:not(:disabled),
+  .step:focus-visible {
+    background: var(--color-gray-100);
+  }
+
+  .step:disabled {
+    cursor: not-allowed;
+    opacity: 0.6;
+  }
+
+  .step-journey {
+    color: var(--color-gray-500);
+    font-size: var(--text-xs);
+  }
 </style>