@wular/coder 0.4.2 → 0.4.5

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

@@ -1,214 +0,0 @@
-'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

@@ -1,46 +0,0 @@
-'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

@@ -1,53 +0,0 @@
-'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

@@ -1,30 +0,0 @@
-'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'}
-      data-tip={collapsed ? 'Expand sidebar' : 'Collapse sidebar'}
-      onClick={toggle}
-    >
-      <Icon d={collapsed ? iRight : iLeft} />
-    </button>
-  );
-}

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

@@ -1,22 +0,0 @@
-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

@@ -1,64 +0,0 @@
-/* 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

@@ -1,41 +0,0 @@
-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

@@ -1,93 +0,0 @@
-.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

@@ -1,77 +0,0 @@
-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

@@ -1,32 +0,0 @@
-.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;
-}