@wular/coder 0.3.17 → 0.4.0

package/src/server/dash/comps/frame/task-toasts.tsx

@@ -0,0 +1,214 @@
+'use client';
+
+import '@/comps/ui/toast.css';
+
+import { useEffect, useRef, useState } from 'preact/hooks';
+
+import { serverEvents } from '@coder/client';
+import type { TaskRow, TaskState } from '@coder/client/types';
+import { client } from '@/utils/client';
+import { Link } from '@wular/pnext/link';
+import { usePathname, useRouter } from '@wular/pnext/navigation/client';
+import { Status, STATUS_LABEL } from '@/app/dash/tasks/list/status';
+
+type Watched = { title: string; status: TaskState; at: number };
+type Live = Pick<TaskRow, 'status' | 'result' | 'error' | 'approval'>;
+type Toast = { key: string; id?: string; title: string; status?: TaskState; line: string };
+
+const WATCHED = 'coder:watched';
+export const NOTIFY = 'coder:notify';
+const TOAST = 'coder:toast';
+const DONE = new Set<TaskState>(['completed', 'failed', 'cancelled']);
+const SHOWN = new Set<TaskState>([...DONE, 'waiting']);
+const KEEP = 20;
+const STREAMS = 3;
+const MAX = 3;
+const TTL = 8000;
+// Past any log line, so a stream sends status alone; log seqs are PostgreSQL integers.
+const NO_LINES = 2 ** 31 - 1;
+
+const read = (): Record<string, Watched> => {
+  try {
+    return JSON.parse(localStorage.getItem(WATCHED) ?? '{}') ?? {};
+  } catch {
+    return {};
+  }
+};
+
+const save = (all: Record<string, Watched>) => {
+  const kept = Object.entries(all)
+    .sort(([, a], [, b]) => b.at - a.at)
+    .slice(0, KEEP);
+  localStorage.setItem(WATCHED, JSON.stringify(Object.fromEntries(kept)));
+  dispatchEvent(new Event(WATCHED));
+};
+
+/** An error toast for an action whose page has no room for it. */
+export const toastError = (title: string, line: string) =>
+  dispatchEvent(new CustomEvent(TOAST, { detail: { title, line } }));
+
+/** Remembers a task this browser started or opened, so its finish shows a toast on any page. */
+export function watchTask(id: string, status: TaskState, title?: string) {
+  const all = read();
+  const entry = all[id];
+  if (!entry && DONE.has(status)) return;
+  if (entry?.status === status && (!title || entry.title === title)) return;
+  all[id] = { title: title || entry?.title || id, status, at: entry?.at ?? Date.now() };
+  save(all);
+}
+
+const openTask = (path: string) => /^\/dash\/tasks\/([^/]+)$/.exec(path)?.[1];
+
+function lineOf(live: Live): string {
+  const text = (value: unknown) => (typeof value === 'string' ? value.trim().split('\n')[0]! : '');
+  const approval = (live.approval ?? {}) as Record<string, unknown>;
+  const result = typeof live.result === 'object' ? live.result?.output : live.result;
+  if (live.status === 'waiting')
+    return (
+      text(approval.summary) ||
+      text(approval.reason) ||
+      text(approval.kind) ||
+      'It is waiting for your approval.'
+    );
+  if (live.status === 'completed') return text(result) || 'It finished.';
+  return text(live.error) || (live.status === 'failed' ? 'It failed.' : 'It was stopped.');
+}
+
+/** Follows one watched task's event stream for its status alone. */
+function Follow({ id, onStatus }: { id: string; onStatus: (id: string, live: Live) => void }) {
+  useEffect(() => {
+    const abort = new AbortController();
+    const follow = async () => {
+      while (!abort.signal.aborted) {
+        try {
+          const response = await client.tasks.stream(id, NO_LINES, abort.signal);
+          if (response.status === 404) {
+            const all = read();
+            delete all[id];
+            return save(all);
+          }
+          if (!response.ok || !response.body) return;
+          for await (const event of serverEvents(response.body)) {
+            if (event.event === 'status') onStatus(id, JSON.parse(event.data));
+            else if (event.event === 'end') return;
+          }
+        } catch {
+          if (abort.signal.aborted) return;
+        }
+        await new Promise(done => setTimeout(done, 1000));
+      }
+    };
+    void follow();
+    return () => abort.abort();
+  }, [id]);
+  return null;
+}
+
+function Item({ toast, dismiss }: { toast: Toast; dismiss: (key: string) => void }) {
+  useEffect(() => {
+    const timer = setTimeout(() => dismiss(toast.key), TTL);
+    return () => clearTimeout(timer);
+  }, []);
+  return (
+    <div class={toast.id ? 'toast' : 'toast err'} onClick={() => dismiss(toast.key)}>
+      <p class="toast-head">
+        {toast.id ? (
+          <Link class="cover" href="/dash/tasks/[id]" params={{ id: toast.id }}>
+            {toast.title}
+          </Link>
+        ) : (
+          <span class="cover">{toast.title}</span>
+        )}
+        {toast.status ? <Status status={toast.status} /> : null}
+      </p>
+      <p class="toast-line">{toast.line}</p>
+    </div>
+  );
+}
+
+/** Toasts at the bottom right when a watched task finishes or needs approval, except on its own page. */
+export function TaskToasts() {
+  const path = usePathname();
+  const nav = useRouter();
+  const [watched, setWatched] = useState<Record<string, Watched>>({});
+  const [toasts, setToasts] = useState<Toast[]>([]);
+  const open = useRef(openTask(path));
+  open.current = openTask(path);
+
+  useEffect(() => {
+    const sync = () => setWatched(read());
+    sync();
+    addEventListener(WATCHED, sync);
+    addEventListener('storage', sync);
+    return () => {
+      removeEventListener(WATCHED, sync);
+      removeEventListener('storage', sync);
+    };
+  }, []);
+
+  useEffect(() => {
+    const onToast = (event: Event) => {
+      const { title, line } = (event as CustomEvent<{ title: string; line: string }>).detail;
+      setToasts(list => [{ key: `${TOAST}:${Date.now()}`, title, line }, ...list].slice(0, MAX));
+    };
+    addEventListener(TOAST, onToast);
+    return () => removeEventListener(TOAST, onToast);
+  }, []);
+
+  useEffect(() => {
+    if (!toasts.length) return;
+    const onKey = (event: KeyboardEvent) => event.key === 'Escape' && setToasts([]);
+    addEventListener('keydown', onKey);
+    return () => removeEventListener('keydown', onKey);
+  }, [toasts.length]);
+
+  const dismiss = (key: string) => setToasts(list => list.filter(toast => toast.key !== key));
+
+  const onStatus = (id: string, live: Live) => {
+    const seen = read()[id];
+    if (!seen || seen.status === live.status) return;
+    watchTask(id, live.status);
+    if (!SHOWN.has(live.status) || open.current === id) return;
+    const toast = {
+      key: `${id}:${Date.now()}`,
+      id,
+      title: seen.title,
+      status: live.status,
+      line: lineOf(live),
+    };
+    setToasts(list => [toast, ...list].slice(0, MAX));
+    if (
+      localStorage.getItem(NOTIFY) !== '1' ||
+      typeof Notification === 'undefined' ||
+      Notification.permission !== 'granted'
+    )
+      return;
+    const notice = new Notification(`${toast.title} (${STATUS_LABEL[toast.status]})`, {
+      body: toast.line,
+      tag: id,
+    });
+    notice.onclick = () => {
+      focus();
+      nav.push('/dash/tasks/[id]', { params: { id } });
+    };
+  };
+
+  // Its own page follows an open task; the rest share a few streams, newest first.
+  const follow = Object.entries(watched)
+    .filter(([id, entry]) => !DONE.has(entry.status) && id !== open.current)
+    .sort(([, a], [, b]) => b.at - a.at)
+    .slice(0, STREAMS);
+
+  return (
+    <>
+      {follow.map(([id]) => (
+        <Follow key={id} id={id} onStatus={onStatus} />
+      ))}
+      <section class="toasts" aria-label="Task updates" aria-live="polite">
+        {toasts.map(toast => (
+          <Item key={toast.key} toast={toast} dismiss={dismiss} />
+        ))}
+      </section>
+    </>
+  );
+}

package/src/server/dash/comps/frame/theme-choices.tsx

@@ -0,0 +1,46 @@
+'use client';
+
+import { useState } from 'preact/hooks';
+
+import { iCheck, iMonitor, iMoon, iSun } from '@/comps/ui/icons';
+import { Icon } from '@/comps/ui/icon';
+
+const YEAR = 60 * 60 * 24 * 365;
+
+const THEMES = [
+  ['light', 'Light', iSun],
+  ['dark', 'Dark', iMoon],
+  ['system', 'System', iMonitor],
+] as const;
+
+/** The theme menu's choices; a pick applies at once and is kept in a cookie. */
+export function ThemeChoices({ theme: initial }: { theme: string }) {
+  const [theme, setTheme] = useState(initial);
+  const pick = (value: string) => {
+    const root = document.documentElement;
+    if (value === 'system') delete root.dataset.theme;
+    else root.dataset.theme = value;
+
+    document.cookie = `theme=${value}; path=/; max-age=${YEAR}; samesite=lax`;
+    setTheme(value);
+  };
+
+  return (
+    <>
+      {THEMES.map(([value, label, icon]) => (
+        <button
+          key={value}
+          type="button"
+          class="pop-item"
+          role="menuitemradio"
+          aria-checked={theme === value}
+          onClick={() => pick(value)}
+        >
+          <Icon d={icon} />
+          <span class="grow">{label}</span>
+          <Icon d={iCheck} />
+        </button>
+      ))}
+    </>
+  );
+}

package/src/server/dash/comps/nav/current-link.tsx

@@ -0,0 +1,53 @@
+'use client';
+
+import { Link, type LinkProps } from '@wular/pnext/link';
+import type { RefObject } from 'preact';
+import { useLayoutEffect, useRef } from 'preact/hooks';
+import { useLinkStatus, usePathname } from '@wular/pnext/navigation/client';
+
+import { pathOf } from './to';
+
+/** A link marked current when the address is its path, or under `within`. */
+export function CurrentLink({
+  within,
+  children,
+  onClick,
+  ...link
+}: LinkProps & { within?: string }) {
+  const at = usePathname();
+  const current =
+    at === pathOf(link) || (within !== undefined && (at === within || at.startsWith(`${within}/`)));
+
+  const anchor = useRef<HTMLAnchorElement>(null);
+
+  return (
+    <Link
+      {...link}
+      aria-current={current ? 'page' : undefined}
+      onClick={event => {
+        anchor.current = event.currentTarget;
+        onClick?.(event);
+      }}
+    >
+      {children}
+      <PendingCurrent anchor={anchor} current={current} />
+    </Link>
+  );
+}
+
+// Link status belongs to a child of Link's context. A pending link marks itself, and CSS moves the underline there until the address catches up.
+function PendingCurrent({
+  anchor,
+  current,
+}: {
+  anchor: RefObject<HTMLAnchorElement>;
+  current: boolean;
+}) {
+  const { pending } = useLinkStatus();
+  useLayoutEffect(() => {
+    if (!anchor.current) return;
+    if (pending && !current) anchor.current.setAttribute('data-pending', '');
+    else anchor.current.removeAttribute('data-pending');
+  }, [pending, current]);
+  return null;
+}

package/src/server/dash/comps/nav/side-toggle.tsx

@@ -0,0 +1,30 @@
+'use client';
+
+import { useState } from 'preact/hooks';
+
+import { iLeft, iRight } from '@/comps/ui/icons';
+import { Icon } from '@/comps/ui/icon';
+
+const COOKIE = 'side';
+
+/** Collapses the sidebar to its icons; the choice lives in a cookie so the next page renders that way at once. */
+export function SideToggle({ collapsed: initial }: { collapsed: boolean }) {
+  const [collapsed, setCollapsed] = useState(initial);
+  const toggle = () => {
+    const next = !collapsed;
+    setCollapsed(next);
+    document.querySelector('.app')?.classList.toggle('side-min', next);
+    document.cookie = `${COOKIE}=${next ? 'min' : ''}; path=/; max-age=${next ? 31536000 : 0}; samesite=lax`;
+  };
+  return (
+    <button
+      type="button"
+      class="icon-btn side-toggle"
+      aria-label={collapsed ? 'Expand sidebar' : 'Collapse sidebar'}
+      title={collapsed ? 'Expand sidebar' : 'Collapse sidebar'}
+      onClick={toggle}
+    >
+      <Icon d={collapsed ? iRight : iLeft} />
+    </button>
+  );
+}

package/src/server/dash/comps/nav/to.ts

@@ -0,0 +1,22 @@
+import type { LinkProps } from '@wular/pnext/link';
+import type { SearchInput } from '@wular/pnext/navigation';
+
+/** A typed in-app link target: a route from the route list, its params and query. */
+export type To = Pick<LinkProps, 'href' | 'params' | 'search'>;
+
+/** The path a target resolves to, to compare with the address. */
+export const pathOf = (to: To) => {
+  const params: Partial<Record<string, unknown>> = to.params ?? {};
+  return to.href.replace(/\[([^\]]+)\]/g, (_, key: string) =>
+    encodeURIComponent(String(params[key] ?? '')),
+  );
+};
+
+/** A query with some keys set on top of another. */
+export function withSearch(base: SearchInput | undefined, set: Record<string, string>) {
+  const search = new URLSearchParams(
+    base instanceof URLSearchParams ? base : (base as Record<string, string> | undefined),
+  );
+  for (const [key, value] of Object.entries(set)) search.set(key, value);
+  return search;
+}

package/src/server/dash/comps/ui/badge.css

@@ -0,0 +1,64 @@
+/* badges and task states */
+.badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 1px 7px;
+  border: 1px solid var(--line2);
+  font-size: 10px;
+  letter-spacing: 0.14em;
+  color: var(--muted);
+  white-space: nowrap;
+}
+.badge.acc {
+  border-color: transparent;
+  background: var(--accbg);
+  color: var(--acc);
+}
+.badge.ok {
+  border-color: transparent;
+  background: var(--okbg);
+  color: var(--ok);
+}
+.badge.warn {
+  border-color: transparent;
+  background: var(--warnbg);
+  color: var(--warn);
+}
+.badge.solid {
+  border-color: var(--fg);
+  background: var(--fg);
+  color: var(--bg);
+}
+a.badge:hover,
+button.badge:hover {
+  border-color: var(--acc);
+}
+button.badge {
+  cursor: pointer;
+}
+.chips {
+  display: inline-flex;
+  flex-wrap: wrap;
+  gap: 4px;
+}
+.chip {
+  line-height: 18px;
+  padding: 0 6px;
+  border: 1px solid var(--line2);
+  font-size: 11.5px;
+  color: var(--muted);
+}
+.id {
+  font-size: 11.5px;
+  color: var(--dim);
+}
+button.chip {
+  background: none;
+  cursor: pointer;
+}
+button.chip:hover,
+button.chip[aria-pressed="true"] {
+  border-color: var(--acc);
+  color: var(--acc);
+}

package/src/server/dash/comps/ui/badge.tsx

@@ -0,0 +1,41 @@
+import './badge.css';
+import type { ComponentChildren } from 'preact';
+
+export function Badge({
+  tone,
+  title,
+  children,
+}: {
+  tone?: 'acc' | 'ok' | 'warn' | 'solid';
+  title?: string;
+  children: ComponentChildren;
+}) {
+  return (
+    <span class={tone ? `badge ${tone}` : 'badge'} title={title}>
+      {children}
+    </span>
+  );
+}
+
+export function Chips({ values }: { values: Array<string | undefined> }) {
+  const shown = values.filter((value): value is string => Boolean(value));
+  if (!shown.length) return <span class="muted">None</span>;
+  return (
+    <span class="chips">
+      {shown.map(value => (
+        <span key={value} class="chip">
+          {value}
+        </span>
+      ))}
+    </span>
+  );
+}
+
+/** A record's id: secondary, never a page's or row's label; the line it sits on clips it when space runs out. */
+export function Id({ value, title }: { value: string; title?: string }) {
+  return (
+    <span class="id" title={title ?? value}>
+      {value}
+    </span>
+  );
+}

package/src/server/dash/comps/ui/card.css

@@ -0,0 +1,93 @@
+.bar-r {
+  display: flex;
+  align-items: center;
+  margin-block: -2px;
+  gap: 8px;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+}
+.card.accent {
+  border-color: var(--warn);
+}
+.card.danger {
+  border-color: var(--bad);
+}
+
+/* empty states */
+.empty {
+  display: grid;
+  justify-items: center;
+  gap: 6px;
+  padding: 32px 16px;
+  border: 1px dashed var(--line2);
+  text-align: center;
+  color: var(--muted);
+}
+.empty b {
+  color: var(--fg);
+  font-weight: 500;
+}
+.card .empty {
+  border: 0;
+}
+.loading {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  flex: 1 0 auto;
+  min-height: var(--h, 240px);
+  color: var(--dim);
+  font-size: 12px;
+}
+.loading.inline {
+  display: inline-flex;
+  min-height: 0;
+}
+.card:has(> .loading:not([style])) {
+  flex: 1 0 auto;
+  display: flex;
+  flex-direction: column;
+}
+.loading > span {
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  animation: loader-in 0s 60ms both;
+}
+.loading .spin {
+  flex: none;
+  width: 12px;
+  height: 12px;
+  border: 1.5px solid currentColor;
+  border-top-color: transparent;
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+}
+.loading .dots {
+  display: inline-flex;
+  gap: 3px;
+}
+.loading .dots > b {
+  width: 4px;
+  height: 4px;
+  border-radius: 50%;
+  background: currentColor;
+  animation: dots 1.2s ease-in-out infinite;
+}
+.loading .dots > b:nth-child(2) {
+  animation-delay: 0.2s;
+}
+.loading .dots > b:nth-child(3) {
+  animation-delay: 0.4s;
+}
+@keyframes dots {
+  0%,
+  80%,
+  100% {
+    opacity: 0.25;
+  }
+  40% {
+    opacity: 1;
+  }
+}

package/src/server/dash/comps/ui/card.tsx

@@ -0,0 +1,77 @@
+import './card.css';
+import type { ComponentChildren } from 'preact';
+
+export function Card({
+  title,
+  count,
+  actions,
+  tone,
+  children,
+}: {
+  title?: ComponentChildren;
+  count?: number | string;
+  actions?: ComponentChildren;
+  tone?: 'accent' | 'danger';
+  children: ComponentChildren;
+}) {
+  return (
+    <section class={tone ? `card frame ${tone}` : 'card frame'}>
+      {title ? (
+        <div class="bar">
+          <h2>
+            {title}
+            {count !== undefined ? <span class="n">{count}</span> : null}
+          </h2>
+          {actions ? <span class="bar-r">{actions}</span> : null}
+        </div>
+      ) : null}
+      {children}
+    </section>
+  );
+}
+
+export function Empty({ title, children }: { title: string; children?: ComponentChildren }) {
+  return (
+    <div class="empty">
+      <b>{title}</b>
+      {children ? <span>{children}</span> : null}
+    </div>
+  );
+}
+
+/** The one loading state: a spinner and a short line; `inline` keeps it to one line. */
+export function Loading({
+  label,
+  inline,
+  dots,
+  h,
+}: {
+  label: string;
+  inline?: boolean;
+  /** Three pulsing dots instead of the ring, for a quiet wait. */
+  dots?: boolean;
+  /** The height, in pixels, of what arrives in its place. */
+  h?: number;
+}) {
+  const Tag = inline ? 'span' : 'div';
+  return (
+    <Tag
+      class={inline ? 'loading inline' : 'loading'}
+      role="status"
+      style={h ? `--h:${h}px` : undefined}
+    >
+      <span>
+        {dots ? (
+          <i class="dots">
+            <b />
+            <b />
+            <b />
+          </i>
+        ) : (
+          <i class="spin" />
+        )}
+        {label}
+      </span>
+    </Tag>
+  );
+}

package/src/server/dash/comps/ui/collapse.css

@@ -0,0 +1,32 @@
+.collapse {
+  position: relative;
+}
+/* room under the toggle so it never sits on the container edge */
+.collapse:not(.open) {
+  padding-bottom: 6px;
+}
+/* room under the last line for the toggle, so it never covers text */
+.collapse-box {
+  box-sizing: content-box;
+  max-height: calc(var(--lines) * 1lh + 44px);
+  overflow: hidden;
+}
+.collapse.open > .collapse-box {
+  max-height: none;
+}
+.collapse.long:not(.open) > .collapse-box {
+  mask-image: linear-gradient(#000 calc(100% - 52px), transparent calc(100% - 36px));
+}
+.collapse > .btn.more-toggle {
+  position: absolute;
+  z-index: 1;
+  left: 50%;
+  bottom: 6px;
+  translate: -50% 0;
+}
+.collapse.open > .btn.more-toggle {
+  position: static;
+  display: flex;
+  margin: 0 auto 12px;
+  translate: none;
+}