@wular/coder 0.3.17 → 0.4.0

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

@@ -0,0 +1,67 @@
+'use client';
+
+import './sentinel.css';
+
+import { useEffect, useRef } from 'preact/hooks';
+
+/** Goes right before a page head: the head sticks under the top bar and turns compact there, its old height kept as margin so nothing under it moves. */
+export function Sentinel() {
+  const ref = useRef<HTMLElement>(null);
+
+  useEffect(() => {
+    const mark = ref.current!;
+    // Inside an island the head follows the island's host.
+    const head = (mark.nextElementSibling ?? mark.parentElement!.nextElementSibling) as HTMLElement;
+    const page = head.closest<HTMLElement>('.page');
+
+    // How much shorter the compact head is; it compacts only once that much has scrolled under it, so no gap opens above what follows.
+    const shrink = () => {
+      const stuck = head.classList.contains('stuck');
+      const before = head.offsetHeight;
+      head.classList.toggle('stuck', !stuck);
+      const after = head.offsetHeight;
+      head.classList.toggle('stuck', stuck);
+      return Math.max(0, stuck ? after - before : before - after);
+    };
+
+    let observer: IntersectionObserver | undefined;
+    const watch = () => {
+      observer?.disconnect();
+      // the head sticks at 56px; it compacts once its top is that much further up
+      const line = 56 - shrink();
+      observer = new IntersectionObserver(
+        ([entry]) => {
+          const stuck = !entry!.isIntersecting && entry!.boundingClientRect.top < line;
+          if (stuck === head.classList.contains('stuck')) return;
+
+          // The page keeps its height while the head changes, or a page just taller than the viewport clamps its scroll to 0.
+          const tall = head.offsetHeight;
+          if (page) page.style.paddingBottom = `${tall}px`;
+          head.classList.toggle('stuck', stuck);
+          head.style.marginBottom = stuck ? `${tall - head.offsetHeight}px` : '';
+          if (page) page.style.paddingBottom = '';
+        },
+        { rootMargin: `${-line}px 0px 0px 0px` },
+      );
+      observer.observe(mark);
+    };
+    watch();
+
+    // Tabs and filter rows stick under the head at its current height; a new width changes how much it compacts by.
+    let width = head.offsetWidth;
+    const sized = new ResizeObserver(() => {
+      page?.style.setProperty('--head', `${head.offsetHeight}px`);
+      if (head.offsetWidth === width) return;
+      width = head.offsetWidth;
+      watch();
+    });
+    sized.observe(head, { box: 'border-box' });
+    return () => {
+      observer?.disconnect();
+      sized.disconnect();
+      page?.style.removeProperty('--head');
+    };
+  }, []);
+
+  return <i class="sentinel" ref={ref} />;
+}

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

@@ -0,0 +1,81 @@
+/* tabs that do not fit scroll sideways; the line is a shadow so the scroll box never clips the current tab's underline */
+.tabs {
+  display: flex;
+  gap: 4px;
+  min-width: 0;
+  overflow-x: auto;
+  scrollbar-width: none;
+  box-shadow: inset 0 -1px var(--line2);
+}
+/* page tabs are one 40px row that sticks under the top bar and the page head */
+.page .tabs:not(.vertical) {
+  height: 40px;
+  margin-top: -8px;
+  position: sticky;
+  top: calc(56px + var(--head, 0px));
+  z-index: 9;
+  background: var(--bg);
+}
+.tabs a,
+.tabs > button {
+  display: flex;
+  flex: none;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 12px;
+  border: 0;
+  border-bottom: 2px solid transparent;
+  background: none;
+  font-size: 10.5px;
+  color: var(--muted);
+  white-space: nowrap;
+  cursor: pointer;
+}
+.tabs a:hover,
+.tabs > button:hover {
+  color: var(--fg);
+}
+.tabs:focus {
+  outline: none;
+}
+.tabs a:focus-visible,
+.tabs > button:focus-visible {
+  outline-offset: -2px;
+}
+.tabs a[aria-current],
+.tabs a[data-pending],
+.tabs > button[aria-current] {
+  color: var(--fg);
+  border-bottom-color: var(--fg);
+}
+/* while another tab loads, only that one is underlined */
+.tabs:has(a[data-pending]) a[aria-current]:not([data-pending]) {
+  color: var(--muted);
+  border-bottom-color: transparent;
+}
+.tabs .count {
+  color: var(--dim);
+}
+/* tabs cut at the edge fade out there until scrolled to the end */
+@property --tabs-fade {
+  syntax: "<length>";
+  inherits: false;
+  initial-value: 0px;
+}
+@keyframes tabs-fade {
+  from {
+    --tabs-fade: 40px;
+  }
+  to {
+    --tabs-fade: 0px;
+  }
+}
+.tabs {
+  mask-image: linear-gradient(to left, transparent, #000 var(--tabs-fade));
+  animation: tabs-fade linear both;
+  animation-timeline: scroll(self inline);
+}
+/* Loading tabs keep their row until the page brings them with their counts. */
+.tabs[aria-hidden] > * {
+  visibility: hidden;
+}

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

@@ -0,0 +1,32 @@
+import './tabs.css';
+import { CurrentLink } from '@/comps/nav/current-link';
+import type { To } from '@/comps/nav/to';
+
+type TabItem = To & { label: string; count?: number };
+
+const compact = new Intl.NumberFormat('en', { notation: 'compact' });
+
+/** Tabs that are pages under one header; the current one follows the address. */
+export function Tabs({ label, items }: { label: string; items: TabItem[] }) {
+  return (
+    <nav class="tabs" aria-label={label}>
+      {items.map(({ label, count, ...to }) => (
+        <CurrentLink key={label} {...to} prefetch="intent">
+          {label}
+          {count !== undefined ? <span class="count">{compact.format(count)}</span> : null}
+        </CurrentLink>
+      ))}
+    </nav>
+  );
+}
+
+/** Tabs before their page arrives: the same row, kept blank until the labels come with their counts. */
+export function LoadingTabs({ labels }: { labels: string[] }) {
+  return (
+    <nav class="tabs" aria-hidden="true">
+      {labels.map(label => (
+        <a key={label}>{label}</a>
+      ))}
+    </nav>
+  );
+}

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

@@ -0,0 +1,12 @@
+.tail {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 48px;
+  padding: 0 14px;
+  color: var(--dim);
+  font-size: 11.5px;
+}
+.tail.err {
+  color: var(--bad);
+}

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

@@ -0,0 +1,37 @@
+import './tail.css';
+import type { RefObject } from 'preact';
+
+import { Loading } from './card';
+
+/** Below the rows: what is loading, what failed, and the mark that pulls in the next page. */
+export function Tail({
+  sentinel,
+  more,
+  busy,
+  error,
+  retry,
+  noun,
+}: {
+  sentinel: RefObject<HTMLElement>;
+  more: boolean;
+  busy: boolean;
+  error: string;
+  retry: () => void;
+  noun: string;
+}) {
+  if (!more && !error) return null;
+  return (
+    <div class={error ? 'tail err' : 'tail'} ref={sentinel as never} role="status">
+      {error ? (
+        <>
+          {error}{' '}
+          <button type="button" class="btn ghost sm" onClick={retry}>
+            Retry
+          </button>
+        </>
+      ) : busy ? (
+        <Loading label={`Loading more ${noun}`} inline />
+      ) : null}
+    </div>
+  );
+}

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

@@ -0,0 +1,72 @@
+/* task toasts: a fixed stack at the bottom right, newest on top */
+.toasts {
+  position: fixed;
+  top: 16px;
+  right: 16px;
+  bottom: 16px;
+  z-index: 50;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  gap: 8px;
+  width: min(340px, calc(100vw - 32px));
+  pointer-events: none;
+}
+.toast {
+  position: relative;
+  display: grid;
+  gap: 4px;
+  padding: 10px 12px;
+  border: 1px solid var(--line2);
+  background: var(--tile);
+  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
+  pointer-events: auto;
+  cursor: pointer;
+  animation: toast-in 0.15s ease-out;
+}
+.toast:hover {
+  background: linear-gradient(var(--wash), var(--wash)), var(--tile);
+}
+.toast:has(.cover:focus-visible) {
+  outline: 2px solid var(--acc);
+  outline-offset: 2px;
+}
+.toast-head {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin: 0;
+}
+.toast-head .cover {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--fg);
+  text-decoration: none;
+  outline: none;
+}
+.toast-line {
+  margin: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--muted);
+}
+.toast.err .toast-head .cover {
+  color: var(--bad);
+}
+.toast.err .toast-line {
+  white-space: normal;
+}
+@keyframes toast-in {
+  from {
+    opacity: 0;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .toast {
+    animation: none;
+  }
+}

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

@@ -0,0 +1,143 @@
+.head.tools {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 10px 24px;
+  min-height: 36px;
+}
+.head.tools > div:first-child {
+  display: contents;
+}
+.head.tools .lead {
+  grid-row: 2;
+  grid-column: 1 / -1;
+}
+.head.tools > .filters {
+  grid-row: 1;
+  grid-column: 2;
+  justify-content: flex-end;
+}
+.head.tools > .filters:last-child {
+  grid-column: 2 / -1;
+}
+.head.tools > .actions {
+  grid-row: 1;
+  grid-column: 3;
+}
+
+/* lists: filters above, rows load on scroll */
+.filters {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+.search {
+  position: relative;
+  display: block;
+}
+/* a tab's filter row sticks together with the tabs */
+.tab-body .filters {
+  position: sticky;
+  top: calc(56px + var(--head, 0px) + var(--tabs, 0px));
+  z-index: 8;
+  margin-block: -8px;
+  padding-block: 8px;
+  background: var(--bg);
+}
+.filters .search {
+  flex: 1 1 240px;
+  max-width: 360px;
+}
+.search .ic {
+  position: absolute;
+  left: 10px;
+  top: 50%;
+  transform: translateY(-50%);
+  color: var(--dim);
+  pointer-events: none;
+}
+label.search input[type="search"] {
+  padding-left: 32px;
+}
+.filters .select {
+  flex: none;
+}
+.filters .end {
+  margin-left: auto;
+}
+.vsearch .search {
+  width: min(280px, 100%);
+}
+
+@media (max-width: 760px) {
+  .head.tools {
+    grid-template-columns: minmax(0, 1fr) auto;
+    row-gap: 12px;
+  }
+  .head.tools > .filters {
+    grid-row: 3;
+    grid-column: 1 / -1;
+  }
+  .head.tools > .actions {
+    grid-column: 2;
+    width: auto;
+  }
+  .filters .search {
+    max-width: none;
+    flex-basis: 100%;
+  }
+  /* the filters share one row under the search, and only the search stays once the head sticks */
+  .filters .select {
+    flex: 1 1 0;
+  }
+  .filters .select > button {
+    gap: 4px;
+    padding-inline: 8px;
+  }
+  .head.tools.stuck > .filters > .select {
+    display: none;
+  }
+}
+
+/* the rarer filters sit behind one button; it lights up while any of them is set */
+.filter-more > .pop:popover-open {
+  display: block;
+  width: min(260px, calc(100vw - 32px));
+  max-height: calc(100vh - 160px);
+  overflow-y: auto;
+  padding: 6px;
+}
+.filter-more .pop-label:not(:first-child) {
+  margin-top: 10px;
+}
+.filter-more .pop-item {
+  width: 100%;
+  min-height: 30px;
+  font-size: 12px;
+}
+/* the filter menu's button, dressed like the selects beside it */
+.field-btn {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  min-height: 36px;
+  padding: 7px 12px;
+  border: 1px solid var(--line2);
+  background: var(--field);
+  white-space: nowrap;
+  cursor: pointer;
+}
+.field-btn:focus-visible,
+.field-btn:has(+ .pop:popover-open) {
+  outline: none;
+  border-color: var(--acc);
+  box-shadow: 0 0 0 3px var(--accbg);
+}
+.field-btn:disabled {
+  color: var(--muted);
+  cursor: default;
+}
+.filter-more > .field-btn.on {
+  color: var(--acc);
+}

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

@@ -0,0 +1,93 @@
+import './toolbar.css';
+import type { ComponentChildren } from 'preact';
+import { useEffect, useRef, useState } from 'preact/hooks';
+
+import { iSearch } from './icons';
+import { readQuery, writeQuery } from '@/utils/paged';
+import { Icon } from './icon';
+import { Sentinel } from './sentinel';
+
+/** The query string for a set of filters, empty ones left out. */
+export const queryOf = (values: Record<string, string>) =>
+  new URLSearchParams(Object.entries(values).filter(([, value]) => value)).toString();
+
+/** Filter values that live in the address bar; typing settles for a moment before it applies. */
+export function useFilters<K extends string>(initial: Record<K, string>) {
+  const [values, setValues] = useState(initial);
+  const [applied, setApplied] = useState(initial);
+  const timer = useRef<ReturnType<typeof setTimeout>>();
+  useEffect(() => {
+    const fromUrl = readQuery(Object.keys(initial)) as Record<K, string>;
+    if (Object.keys(initial).some(key => fromUrl[key as K] !== initial[key as K])) {
+      setValues(fromUrl);
+      setApplied(fromUrl);
+    }
+  }, []);
+  useEffect(() => () => clearTimeout(timer.current), []);
+  const set = (key: K, value: string, settle = 0) => {
+    const next = { ...values, [key]: value };
+    setValues(next);
+    clearTimeout(timer.current);
+    const apply = () => {
+      setApplied(next);
+      writeQuery(next);
+    };
+    if (settle) timer.current = setTimeout(apply, settle);
+    else apply();
+  };
+
+  return { values, set, query: queryOf(applied) };
+}
+
+export function Search({
+  value,
+  label,
+  onInput,
+}: {
+  value: string;
+  label: string;
+  onInput: (value: string) => void;
+}) {
+  return (
+    <label class="search">
+      <Icon d={iSearch} />
+      <input
+        type="search"
+        value={value}
+        placeholder={label}
+        aria-label={label}
+        onInput={event => onInput((event.currentTarget as HTMLInputElement).value)}
+      />
+    </label>
+  );
+}
+
+/** A list's search and filters with its primary action: one row in the page head, or its own row inside a tab. */
+export function Toolbar({
+  head,
+  action,
+  children,
+}: {
+  head?: { title: string; lead?: string };
+  action?: ComponentChildren;
+  children: ComponentChildren;
+}) {
+  return head ? (
+    <>
+      <Sentinel />
+      <header class="head tools">
+        <div>
+          <h1>{head.title}</h1>
+          {head.lead ? <p class="lead">{head.lead}</p> : null}
+        </div>
+        <div class="filters">{children}</div>
+        {action ? <div class="actions">{action}</div> : null}
+      </header>
+    </>
+  ) : (
+    <div class="filters">
+      {children}
+      {action ? <span class="end">{action}</span> : null}
+    </div>
+  );
+}

package/src/server/dash/package.json

@@ -0,0 +1,5 @@
+{
+  "name": "@wular/coder-dash",
+  "private": true,
+  "type": "module"
+}

package/src/server/dash/pnext-env.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="@wular/pnext" />
+/// <reference path="../../../dist/dash/types/pnext.gen.d.ts" />
+
+// This file is generated by PNext. Do not edit.

package/src/server/dash/pnext.config.ts

@@ -0,0 +1,5 @@
+export default {
+  outDir: '../../../dist/dash',
+  workspaceRoot: '../../..',
+  prefetch: 'intent',
+};

package/src/server/dash/public/assets/favicon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><style>path{fill:#0a63c4}@media (prefers-color-scheme:dark){path{fill:#8fbcff}}</style><path d="M5 0h3v3h-3zM9 0h3v3h-3zM13 0h3v3h-3zM0 4h3v3h-3zM0 9h3v3h-3zM5 13h3v3h-3zM9 13h3v3h-3zM13 13h3v3h-3z"/></svg>

package/src/server/dash/public/assets/fonts/LICENSE-fira-code

@@ -0,0 +1,93 @@
+Copyright 2014-2020 The Fira Code Project Authors (https://github.com/tonsky/FiraCode)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded,
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

package/src/server/dash/tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "extends": "@wular/pnext/config/ts/react.json",
+  "compilerOptions": {
+    "paths": {
+      "@/*": ["./*"],
+      "@coder/*": ["../../*"]
+    }
+  },
+  "include": ["**/*.ts", "**/*.tsx", "pnext-env.d.ts", "../../../dist/dash/types/**/*.ts"]
+}