@stevecastaneda/paseo-progress 1.14.1 → 1.14.3

package/client/video.tsx

@@ -7,8 +7,8 @@ interface VideoElement {
   src: string;
   videoWidth: number;
   videoHeight: number;
-  onloadedmetadata: (() => void) | null;
-  onerror: (() => void) | null;
+  addEventListener(type: "loadedmetadata" | "error", listener: () => void): void;
+  removeEventListener(type: "loadedmetadata" | "error", listener: () => void): void;
 }
 const page = globalThis as unknown as { document: { createElement(tag: "video"): VideoElement } };
 
@@ -17,14 +17,21 @@ const page = globalThis as unknown as { document: { createElement(tag: "video"):
 export function videoRatio(blob: FileBlob): Promise<number | null> {
   const url = browser.URL.createObjectURL(blob);
   const video = page.document.createElement("video");
+  let stopListening: (() => void) | undefined;
   return new Promise<number | null>((resolve) => {
     setTimeout(() => resolve(null), 5_000);
-    video.onloadedmetadata = () => resolve(video.videoWidth && video.videoHeight ? video.videoWidth / video.videoHeight : null);
-    video.onerror = () => resolve(null);
+    const onMetadata = () => resolve(video.videoWidth && video.videoHeight ? video.videoWidth / video.videoHeight : null);
+    const onError = () => resolve(null);
+    video.addEventListener("loadedmetadata", onMetadata);
+    video.addEventListener("error", onError);
+    stopListening = () => {
+      video.removeEventListener("loadedmetadata", onMetadata);
+      video.removeEventListener("error", onError);
+    };
     video.preload = "metadata";
     video.src = url;
   }).finally(() => {
-    video.onloadedmetadata = video.onerror = null;
+    stopListening?.();
     video.src = "";
     browser.URL.revokeObjectURL(url);
   });
@@ -35,7 +42,9 @@ export function VideoPlayer({ blob, label, style }: { blob: FileBlob; label: str
   const url = useObjectUrl(blob);
   return (
     <View style={[style, { overflow: "hidden" }]}>
-      {url ? <video src={url} controls playsInline aria-label={label} style={{ width: "100%", height: "100%", display: "block", objectFit: "contain" }} /> : null}
+      {url ? (
+        <video src={url} controls playsInline aria-label={label} style={{ width: "100%", height: "100%", display: "block", objectFit: "contain" }} />
+      ) : null}
     </View>
   );
 }

package/client/whats-new.tsx

@@ -38,38 +38,84 @@ export function WhatsNewBanner({ colors, host }: { colors: Colors; host: PluginW
 
   return (
     <>
-      <Presence show={Boolean(whatsNew)}>{whatsNew ? (
-        // The headline gets the full width, with the button under it on the text's edge.
-        <View style={{ gap: 8, margin: 12, marginBottom: 0, padding: 8, borderRadius: 12, ...raised(colors), backgroundColor: colors.surface1 }}>
-          <View style={{ flexDirection: "row", alignItems: "flex-start", gap: 10 }}>
-            <View style={{ height: 17, justifyContent: "center" }}><Icon name="Gift" size={14} color={colors.foregroundMuted} /></View>
-            <Text selectable style={{ flex: 1, color: colors.foregroundMuted, fontSize: 12, lineHeight: 17 }}>
-              <Text style={{ color: colors.foreground, fontWeight: "500" }}>{whatsNew.releases.length > 1 ? m.updatedTo(whatsNew.version) : m.newVersion(whatsNew.version)}</Text> {whatsNew.headline}
-            </Text>
-            {/* Centered on the first line without making it taller. */}
-            <PressScale accessibilityRole="button" accessibilityLabel={m.dismissWhatsNew} hitSlop={6} onPress={() => close(whatsNew.version)}
-              style={({ pressed, hovered }) => ({ marginVertical: -4.5, padding: 5, borderRadius: 4, backgroundColor: pressed ? colors.border : hovered ? colors.surface2 : "transparent" })}>
-              <Icon name="X" size={16} color={colors.foregroundMuted} />
+      <Presence show={Boolean(whatsNew)}>
+        {whatsNew ? (
+          // The headline gets the full width, with the button under it on the text's edge.
+          <View style={{ gap: 8, margin: 12, marginBottom: 0, padding: 8, borderRadius: 12, ...raised(colors), backgroundColor: colors.surface1 }}>
+            <View style={{ flexDirection: "row", alignItems: "flex-start", gap: 10 }}>
+              <View style={{ height: 17, justifyContent: "center" }}>
+                <Icon name="Gift" size={14} color={colors.foregroundMuted} />
+              </View>
+              <Text selectable style={{ flex: 1, color: colors.foregroundMuted, fontSize: 12, lineHeight: 17 }}>
+                <Text style={{ color: colors.foreground, fontWeight: "500" }}>
+                  {whatsNew.releases.length > 1 ? m.updatedTo(whatsNew.version) : m.newVersion(whatsNew.version)}
+                </Text>{" "}
+                {whatsNew.headline}
+              </Text>
+              {/* Centered on the first line without making it taller. */}
+              <PressScale
+                accessibilityRole="button"
+                accessibilityLabel={m.dismissWhatsNew}
+                hitSlop={6}
+                onPress={() => close(whatsNew.version)}
+                style={({ pressed, hovered }) => ({
+                  marginVertical: -4.5,
+                  padding: 5,
+                  borderRadius: 4,
+                  backgroundColor: pressed ? colors.border : hovered ? colors.surface2 : "transparent",
+                })}
+              >
+                <Icon name="X" size={16} color={colors.foregroundMuted} />
+              </PressScale>
+            </View>
+            <PressScale
+              accessibilityRole="button"
+              onPress={() => {
+                setShown(whatsNew);
+                setOpen(true);
+              }}
+              style={({ pressed, hovered }) => ({
+                alignSelf: "flex-start",
+                marginStart: 24,
+                paddingHorizontal: 10,
+                paddingVertical: 5,
+                borderRadius: 4,
+                backgroundColor: colors.accent,
+                opacity: pressed ? 0.7 : hovered ? 0.85 : 1,
+              })}
+            >
+              <Text style={{ color: colors.accentForeground, fontSize: 12, lineHeight: 16, fontWeight: "600" }}>{m.seeWhatsNew}</Text>
             </PressScale>
           </View>
-          <PressScale accessibilityRole="button" onPress={() => { setShown(whatsNew); setOpen(true); }}
-            style={({ pressed, hovered }) => ({ alignSelf: "flex-start", marginStart: 24, paddingHorizontal: 10, paddingVertical: 5, borderRadius: 4, backgroundColor: colors.accent, opacity: pressed ? 0.7 : hovered ? 0.85 : 1 })}>
-            <Text style={{ color: colors.accentForeground, fontSize: 12, lineHeight: 16, fontWeight: "600" }}>{m.seeWhatsNew}</Text>
-          </PressScale>
-        </View>
-      ) : null}</Presence>
-      <Modal title={!shown ? "" : shown.releases.length > 1 ? m.whatsNewAll : m.whatsNewTitle(shown.version)} icon={<Icon name="Gift" size={16} color={colors.foregroundMuted} />}
-        open={open} onOpenChange={(next) => { if (!next) closeDialog(); }}>
+        ) : null}
+      </Presence>
+      <Modal
+        title={!shown ? "" : shown.releases.length > 1 ? m.whatsNewAll : m.whatsNewTitle(shown.version)}
+        icon={<Icon name="Gift" size={16} color={colors.foregroundMuted} />}
+        open={open}
+        onOpenChange={(next) => {
+          if (!next) closeDialog();
+        }}
+      >
         <Modal.Content>
-        <ProgressLanguageProvider>
-          {shown ? <Releases colors={colors} releases={shown.releases} /> : null}
-          <View style={{ flexDirection: "row", justifyContent: "flex-end", marginTop: 8 }}>
-            <PressScale accessibilityRole="button" onPress={closeDialog}
-              style={({ pressed, hovered }) => ({ paddingHorizontal: 12, paddingVertical: 6, borderRadius: 6, backgroundColor: colors.accent, opacity: pressed ? 0.7 : hovered ? 0.85 : 1 })}>
-              <Text style={{ color: colors.accentForeground, fontSize: 12, lineHeight: 16, fontWeight: "600" }}>{m.gotIt}</Text>
-            </PressScale>
-          </View>
-        </ProgressLanguageProvider>
+          <ProgressLanguageProvider>
+            {shown ? <Releases colors={colors} releases={shown.releases} /> : null}
+            <View style={{ flexDirection: "row", justifyContent: "flex-end", marginTop: 8 }}>
+              <PressScale
+                accessibilityRole="button"
+                onPress={closeDialog}
+                style={({ pressed, hovered }) => ({
+                  paddingHorizontal: 12,
+                  paddingVertical: 6,
+                  borderRadius: 6,
+                  backgroundColor: colors.accent,
+                  opacity: pressed ? 0.7 : hovered ? 0.85 : 1,
+                })}
+              >
+                <Text style={{ color: colors.accentForeground, fontSize: 12, lineHeight: 16, fontWeight: "600" }}>{m.gotIt}</Text>
+              </PressScale>
+            </View>
+          </ProgressLanguageProvider>
         </Modal.Content>
       </Modal>
     </>
@@ -84,7 +130,9 @@ function Releases({ colors, releases }: { colors: Colors; releases: WhatsNewRele
     <View style={{ gap: 40 }}>
       {releases.map((release) => (
         <View key={release.version} style={{ gap: 12 }}>
-          <Text accessibilityRole="header" selectable style={{ color: colors.foreground, fontSize: 12, lineHeight: 16, fontWeight: "600" }}>{release.version}</Text>
+          <Text accessibilityRole="header" selectable style={{ color: colors.foreground, fontSize: 12, lineHeight: 16, fontWeight: "600" }}>
+            {release.version}
+          </Text>
           <Notes colors={colors} notes={release.notes} />
         </View>
       ))}
@@ -96,9 +144,13 @@ function Releases({ colors, releases }: { colors: Colors; releases: WhatsNewRele
 // written without titles stays a bulleted list.
 function Notes({ colors, notes }: { colors: Colors; notes: WhatsNewNote[] }) {
   if (!notes.some((note) => note.title || note.kind)) {
-    return <View style={{ gap: 12 }}>{notes.map((note, index) => (
-      <BlockView key={index} colors={colors} block={{ kind: "item", marker: "•", depth: 0, spans: spans(note.body) }} first={index === 0} />
-    ))}</View>;
+    return (
+      <View style={{ gap: 12 }}>
+        {notes.map((note, index) => (
+          <BlockView key={index} colors={colors} block={{ kind: "item", marker: "•", depth: 0, spans: spans(note.body) }} first={index === 0} />
+        ))}
+      </View>
+    );
   }
   return (
     <View style={{ gap: 20 }}>
@@ -107,7 +159,11 @@ function Notes({ colors, notes }: { colors: Colors; notes: WhatsNewNote[] }) {
           {note.title || note.kind ? (
             <View style={{ flexDirection: "row", alignItems: "flex-start", gap: 8 }}>
               {note.kind ? <KindTag colors={colors} kind={note.kind} /> : null}
-              {note.title ? <Text accessibilityRole="header" selectable style={{ flex: 1, color: colors.foreground, fontSize: 14, lineHeight: 20, fontWeight: "600" }}>{note.title}</Text> : null}
+              {note.title ? (
+                <Text accessibilityRole="header" selectable style={{ flex: 1, color: colors.foreground, fontSize: 14, lineHeight: 20, fontWeight: "600" }}>
+                  {note.title}
+                </Text>
+              ) : null}
             </View>
           ) : null}
           {note.body ? (
@@ -124,7 +180,7 @@ function Notes({ colors, notes }: { colors: Colors; notes: WhatsNewNote[] }) {
 // Paseo has no violet for plugins, so it's Paseo's own "merged" purple, which
 // shares the status colors' lightness and chroma.
 const TONE_COLOR: Record<NoteTone, (colors: Colors) => string> = {
-  violet: (colors) => isLight(colors) ? "#7347af" : "#a890d5",
+  violet: (colors) => (isLight(colors) ? "#7347af" : "#a890d5"),
   green: (colors) => colors.statusSuccess,
   amber: (colors) => colors.statusWarning,
 };
@@ -136,7 +192,9 @@ function KindTag({ colors, kind }: { colors: Colors; kind: NoteKind }) {
   const color = TONE_COLOR[NOTE_KINDS[kind].tone](colors);
   return (
     <View style={{ marginTop: 1, minWidth: 64, borderRadius: 4, paddingHorizontal: 7, backgroundColor: tint(color, colors) }}>
-      <Text numberOfLines={1} style={{ textAlign: "center", color, fontSize: 11, lineHeight: 18, fontWeight: "500" }}>{m.noteKinds[kind]}</Text>
+      <Text numberOfLines={1} style={{ textAlign: "center", color, fontSize: 11, lineHeight: 18, fontWeight: "500" }}>
+        {m.noteKinds[kind]}
+      </Text>
     </View>
   );
 }

package/client/when.tsx

@@ -21,7 +21,8 @@ export function When({ colors, iso, now }: { colors: Colors; iso: string; now: n
   if (useNarrow()) return <Text>{ago}</Text>;
   return (
     <Text>
-      {formatClientClock(locale, iso)}<Text style={{ color: colors.foregroundMuted, opacity: 0.7 }}>{m.parenthetical(ago)}</Text>
+      {formatClientClock(locale, iso)}
+      <Text style={{ color: colors.foregroundMuted, opacity: 0.7 }}>{m.parenthetical(ago)}</Text>
     </Text>
   );
 }

package/client/write-up.tsx

@@ -2,11 +2,11 @@ import { type PluginWorkspacePanelProps, useRpc } from "@getpaseo/plugin/client"
 import { Icon, Markdown } from "@getpaseo/plugin/client/ui";
 import { useQuery } from "@tanstack/react-query";
 import React, { useMemo, useState } from "react";
-import { Platform, Text, View } from "react-native";
+import { Text, View } from "react-native";
 import { previewKind } from "../shared/attachments";
 import { previewDeliverable } from "../shared/rpc";
 import { flattenHeadings, dropTitle, markdownExcerpt, textExcerpt } from "../shared/markdown";
-import { type Attachment, attachmentIcon } from "./attachments";
+import { type Attachment, absolutePath, attachmentIcon, followPageLink, PageLink, pageLinkRef } from "./attachments";
 import { PressableRow } from "./row";
 import { errorText } from "./errors";
 import { useProgressLanguage } from "./language";
@@ -18,7 +18,13 @@ const EXCERPT_CHARS = 280;
 
 // What the ticket is: the start of its write-up in a quiet inset, with the
 // rest a press away. A link or a file that isn't text shows only its name.
-export function WriteUp({ colors, source, workspaceId, workspaceDirectory, onOpen }: {
+export function WriteUp({
+  colors,
+  source,
+  workspaceId,
+  workspaceDirectory,
+  onOpen,
+}: {
   colors: Colors;
   source: Attachment;
   workspaceId: string;
@@ -40,7 +46,13 @@ export function WriteUp({ colors, source, workspaceId, workspaceDirectory, onOpe
   const parts = useMemo(() => {
     if (data?.kind === "markdown") {
       const excerpt = markdownExcerpt(data.markdown, EXCERPT_CHARS);
-      return { markdown: true, excerpt: flattenHeadings(excerpt.text, WRITE_UP_HEADING), whole: flattenHeadings(dropTitle(data.markdown), WRITE_UP_HEADING), more: excerpt.more, truncated: data.truncated };
+      return {
+        markdown: true,
+        excerpt: flattenHeadings(excerpt.text, WRITE_UP_HEADING),
+        whole: flattenHeadings(dropTitle(data.markdown), WRITE_UP_HEADING),
+        more: excerpt.more,
+        truncated: data.truncated,
+      };
     }
     if (data?.kind === "text") {
       const excerpt = textExcerpt(data.text, EXCERPT_CHARS);
@@ -49,16 +61,36 @@ export function WriteUp({ colors, source, workspaceId, workspaceDirectory, onOpe
     return null;
   }, [data]);
   const shown = parts ? (all ? parts.whole : parts.excerpt) : "";
+  const link = pageLinkRef(source);
   const muted = { color: colors.foregroundMuted, fontSize: 12, lineHeight: 18 } as const;
   return (
     <View style={{ gap: 12, padding: 14, borderRadius: 8, backgroundColor: colors.surface0 }}>
-      {shown.trim() ? (parts?.markdown ? <Markdown>{shown}</Markdown>
-        : <Text selectable style={{ color: colors.foreground, fontSize: 13, lineHeight: 19 }}>{shown}</Text>) : null}
+      {shown.trim() ? (
+        parts?.markdown ? (
+          <Markdown>{shown}</Markdown>
+        ) : (
+          <Text selectable style={{ color: colors.foreground, fontSize: 13, lineHeight: 19 }}>
+            {shown}
+          </Text>
+        )
+      ) : null}
       {all && parts?.truncated ? <Text style={muted}>{m.truncatedText}</Text> : null}
       {preview.error ? <Text style={muted}>{m.readError(errorText(preview.error, m.unknownError))}</Text> : null}
       {/* The file on the left, opening it whole; expanding in place on the right. */}
       <View style={{ flexDirection: "row", alignItems: "center", gap: 12 }}>
-        <TextButton colors={colors} icon={attachmentIcon(source)} label={source.title} accessibilityLabel={m.openItem(source.title)} onPress={() => onOpen(source, [source])} grow />
+        <TextButton
+          colors={colors}
+          icon={attachmentIcon(source)}
+          label={source.title}
+          accessibilityLabel={m.openItem(source.title)}
+          onPress={() => {
+            if (link && !followPageLink(link)) return;
+            onOpen(source, [source]);
+          }}
+          grow
+        >
+          {link ? <PageLink link={link} path={absolutePath(source.path!, workspaceDirectory)} /> : null}
+        </TextButton>
         <View style={{ flex: 1 }} />
         {parts?.more ? <TextButton colors={colors} label={all ? m.showLess : m.readMore} onPress={() => setAll(!all)} expanded={all} /> : null}
       </View>
@@ -67,14 +99,49 @@ export function WriteUp({ colors, source, workspaceId, workspaceDirectory, onOpe
 }
 
 // A quiet text button for the inset's footer: muted, tinted on hover.
-function TextButton({ colors, icon, label, accessibilityLabel, onPress, grow = false, expanded }: {
-  colors: Colors; icon?: string; label: string; accessibilityLabel?: string; onPress(): void; grow?: boolean; expanded?: boolean;
+function TextButton({
+  colors,
+  icon,
+  label,
+  accessibilityLabel,
+  onPress,
+  grow = false,
+  expanded,
+  children,
+}: {
+  colors: Colors;
+  icon?: string;
+  label: string;
+  accessibilityLabel?: string;
+  onPress(): void;
+  grow?: boolean;
+  expanded?: boolean;
+  children?: React.ReactNode;
 }) {
   return (
-    <PressableRow colors={colors} accessibilityRole="button" accessibilityLabel={accessibilityLabel ?? label} aria-expanded={expanded} onPress={onPress}
-      style={{ flexDirection: "row", alignItems: "center", gap: 6, paddingVertical: 3, paddingHorizontal: 6, marginHorizontal: -6, borderRadius: 4, flexShrink: grow ? 1 : 0, minWidth: 0 }}>
+    <PressableRow
+      colors={colors}
+      accessibilityRole="button"
+      accessibilityLabel={accessibilityLabel ?? label}
+      aria-expanded={expanded}
+      onPress={onPress}
+      style={{
+        flexDirection: "row",
+        alignItems: "center",
+        gap: 6,
+        paddingVertical: 3,
+        paddingHorizontal: 6,
+        marginHorizontal: -6,
+        borderRadius: 4,
+        flexShrink: grow ? 1 : 0,
+        minWidth: 0,
+      }}
+    >
       {icon ? <Icon name={icon} size={12} color={colors.foregroundMuted} /> : null}
-      <Text numberOfLines={1} style={{ flexShrink: 1, color: colors.foregroundMuted, fontSize: 12, lineHeight: 17, fontWeight: "500" }}>{label}</Text>
+      <Text numberOfLines={1} style={{ flexShrink: 1, color: colors.foregroundMuted, fontSize: 12, lineHeight: 17, fontWeight: "500" }}>
+        {label}
+      </Text>
+      {children}
     </PressableRow>
   );
 }