@wular/coder 0.4.2 → 0.4.4

package/src/server/dash/app/dash/layout.css

@@ -1,322 +0,0 @@
-/* app shell */
-.app {
-  --side: 232px;
-  display: grid;
-  grid-template-columns: var(--side) minmax(0, 1fr);
-  grid-template-rows: 56px 1fr;
-  min-height: 100vh;
-}
-.top {
-  grid-column: 1 / -1;
-  position: sticky;
-  top: 0;
-  z-index: 20;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 12px;
-  padding: 0 16px 0 20px;
-  background: var(--bg);
-  border-bottom: 1px solid var(--line2);
-}
-.top-l,
-.top-r {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  min-width: 0;
-}
-.lockup {
-  display: grid;
-}
-.lockup small {
-  font-weight: 400;
-  font-size: 8px;
-  line-height: 8px;
-  letter-spacing: 0.3em;
-  text-transform: uppercase;
-  color: var(--muted);
-}
-.side {
-  position: sticky;
-  top: 56px;
-  z-index: 12;
-  height: calc(100vh - 56px);
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  padding: 16px 12px;
-  border-right: 1px solid var(--line);
-}
-.side nav {
-  display: grid;
-  gap: 2px;
-}
-.side nav a {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  height: 36px;
-  padding: 0 12px;
-  color: var(--muted);
-  border-left: 2px solid transparent;
-}
-.side nav a:hover {
-  color: var(--fg);
-  background: var(--wash);
-}
-.side nav a[aria-current] {
-  color: var(--fg);
-  background: var(--wash2);
-  border-left-color: var(--deep);
-}
-.side nav .n {
-  margin-left: auto;
-  background: var(--accbg);
-  color: var(--acc);
-}
-.dot {
-  width: 7px;
-  height: 7px;
-  flex: none;
-  border-radius: 50%;
-  background: var(--warn);
-}
-.dot.ok {
-  background: var(--ok);
-  box-shadow: 0 0 0 3px var(--okbg);
-}
-.server > button {
-  width: 100%;
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  padding: 10px 12px;
-  border: 1px solid var(--line);
-  font-size: 12px;
-  text-align: left;
-  cursor: pointer;
-}
-.server > button:hover {
-  background: var(--wash);
-}
-.server > button .grow {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-.server .ic {
-  color: var(--dim);
-  width: 14px;
-}
-.server .pop {
-  width: max-content;
-  max-width: calc(100vw - 32px);
-}
-.server .kv dd {
-  white-space: nowrap;
-}
-.pop-head {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  padding: 8px 10px 12px;
-  min-width: 0;
-}
-.pop-head b,
-.pop-head small {
-  display: block;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-.pop-head small,
-.pop-item small {
-  color: var(--muted);
-  font-size: 11.5px;
-}
-.org,
-.avatar {
-  display: inline-grid;
-  place-items: center;
-  flex: none;
-  width: 26px;
-  height: 26px;
-  background: var(--wash2);
-  font-weight: 700;
-  font-size: 12px;
-}
-.avatar {
-  width: 32px;
-  height: 32px;
-}
-.avatar-btn {
-  display: grid;
-  place-items: center;
-  width: 32px;
-  height: 32px;
-  background: var(--fg);
-  color: var(--bg);
-  font-weight: 700;
-  cursor: pointer;
-}
-.kv {
-  display: grid;
-  grid-template-columns: max-content 1fr;
-  gap: 8px 20px;
-  margin: 0;
-}
-.kv dt {
-  color: var(--muted);
-}
-.kv dd {
-  margin: 0;
-  overflow-wrap: anywhere;
-}
-.pop .kv {
-  padding: 6px 10px 10px;
-  font-size: 12px;
-}
-.theme .ic.sun,
-.theme .ic.moon,
-.theme .ic.sys {
-  display: none;
-}
-:root[data-theme="light"] .theme .ic.sun,
-:root[data-theme="dark"] .theme .ic.moon,
-:root:not([data-theme]) .theme .ic.sys {
-  display: block;
-}
-/* the admin token form covers the dashboard it opens */
-.app > .auth {
-  position: fixed;
-  inset: 0;
-  z-index: 60;
-  overflow: auto;
-  background: var(--bg);
-}
-
-@media (max-width: 760px) {
-  .app {
-    grid-template-columns: minmax(0, 1fr);
-  }
-  .top {
-    padding: 0 10px;
-  }
-  .side {
-    position: fixed;
-    top: 56px;
-    left: 0;
-    bottom: 0;
-    height: auto;
-    width: min(280px, 84vw);
-    z-index: 30;
-    background: var(--bg);
-    border-right: 1px solid var(--line2);
-    transform: translateX(-100%);
-    transition: transform 0.2s;
-  }
-}
-
-/* collapsed sidebar: icons only, the server pill becomes its dot */
-/* the collapser sits at the sidebar's foot, above the server pill */
-.side-foot {
-  display: grid;
-  gap: 8px;
-}
-.side-toggle {
-  justify-self: end;
-  color: var(--dim);
-}
-.side-min .side-toggle {
-  justify-self: center;
-}
-.app.side-min {
-  --side: 60px;
-}
-.side-min .top .lockup {
-  display: none;
-}
-.side-min .side {
-  padding-inline: 10px;
-}
-.side-min .side nav a {
-  justify-content: center;
-  gap: 0;
-  padding: 0;
-  font-size: 0;
-}
-.side-min .side nav .n {
-  display: none;
-}
-/* collapsed icons and the sidebar toggle name themselves on hover and keyboard focus */
-.side-min .side [data-tip],
-.side-toggle {
-  position: relative;
-}
-.side-min .side [data-tip]::after,
-.side-toggle::after {
-  content: attr(data-tip) / '';
-  position: absolute;
-  top: 50%;
-  left: calc(100% + 12px);
-  z-index: 30;
-  padding: 6px 10px;
-  border: 1px solid var(--line2);
-  background: var(--tile);
-  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
-  color: var(--fg);
-  font-size: 12px;
-  letter-spacing: normal;
-  white-space: nowrap;
-  transform: translateY(-50%);
-  pointer-events: none;
-  opacity: 0;
-  transition: opacity 0.1s;
-}
-/* a small arrow on the tooltip's edge, pointing back at the icon */
-.side-min .side [data-tip]::before,
-.side-toggle::before {
-  content: '';
-  position: absolute;
-  top: 50%;
-  left: calc(100% + 8px);
-  z-index: 31;
-  width: 8px;
-  height: 8px;
-  border-bottom: 1px solid var(--line2);
-  border-left: 1px solid var(--line2);
-  background: var(--tile);
-  transform: translateY(-50%) rotate(45deg);
-  pointer-events: none;
-  opacity: 0;
-  transition: opacity 0.1s;
-}
-.side-min .side [data-tip]:is(:hover, :focus-visible)::before,
-.side-min .side [data-tip]:is(:hover, :focus-visible)::after,
-.side-toggle:is(:hover, :focus-visible)::before,
-.side-toggle:is(:hover, :focus-visible)::after {
-  opacity: 1;
-}
-.side-toggle:is(:hover, :focus-visible)::before,
-.side-toggle:is(:hover, :focus-visible)::after {
-  transition-delay: 0.7s;
-}
-.side-min .menu:has(:popover-open) > [data-tip]::before,
-.side-min .menu:has(:popover-open) > [data-tip]::after {
-  opacity: 0;
-}
-.side-min .server > button {
-  justify-content: center;
-  padding: 10px 0;
-}
-.side-min .server > button :is(.grow, .ic) {
-  display: none;
-}
-@media (max-width: 760px) {
-  .side-toggle {
-    display: none;
-  }
-  .app.side-min {
-    grid-template-columns: minmax(0, 1fr);
-  }
-}

package/src/server/dash/app/dash/layout.tsx

@@ -1,344 +0,0 @@
-import './layout.css';
-import { CoderError } from '@coder/core/errors';
-import type { ComponentChildren } from 'preact';
-import { Suspense } from 'preact/compat';
-import { redirect } from '@wular/pnext/navigation';
-
-import { AuthPanel } from '@/comps/frame/auth-panel';
-import {
-  iActivity,
-  iAgent,
-  iChart,
-  iCheck,
-  iKey,
-  iMonitor,
-  iMoon,
-  iOut,
-  iSliders,
-  iSun,
-  iUpdown,
-  iUser,
-  iUsers,
-} from '@/comps/ui/icons';
-import { Link } from '@wular/pnext/link';
-import { load, signedOut } from '@/api/load';
-import { localServer } from '@/api/types';
-import type { TasksPage, Me } from '@coder/client/types';
-import { initial } from '@/utils/format';
-import { Icon, Mark } from '@/comps/ui/icon';
-import { ThemeChoices } from '@/comps/frame/theme-choices';
-import { Drawer } from '@/comps/frame/drawer';
-import { SignOut } from '@/app/dash/account/sign-out';
-import { CurrentLink } from '@/comps/nav/current-link';
-import { SideToggle } from '@/comps/nav/side-toggle';
-import type { To } from '@/comps/nav/to';
-import { Menu } from '@/comps/ui/menu';
-import { TaskToasts } from '@/comps/frame/task-toasts';
-
-// Four places; the workspace lives in the account menu.
-const NAV: Array<To & { within: string; label: string; icon: string }> = [
-  { href: '/dash/agents', params: {}, within: '/dash/agents', label: 'Agents', icon: iAgent },
-  { href: '/dash/tasks', params: {}, within: '/dash/tasks', label: 'Tasks', icon: iActivity },
-  { href: '/dash/usage', params: {}, within: '/dash/usage', label: 'Usage', icon: iChart },
-  {
-    href: '/dash/settings/[tab]',
-    params: { tab: 'credentials' },
-    within: '/dash/settings',
-    label: 'Settings',
-    icon: iSliders,
-  },
-];
-
-/** A local server leads with Tasks, a cloud one with Agents. */
-const navFor = (local: boolean) => (local ? [NAV[1]!, NAV[0]!, ...NAV.slice(2)] : NAV);
-
-function themeOf(request: Request) {
-  const value = (request.headers.get('cookie') ?? '').match(/(?:^|; )theme=(\w+)/)?.[1];
-
-  return value === 'light' || value === 'dark' ? value : 'system';
-}
-
-function ThemeMenu({ theme }: { theme: string }) {
-  return (
-    <Menu
-      class="theme"
-      label="Theme"
-      summaryClass="icon-btn"
-      summary={
-        <>
-          <Icon d={iSun} class="sun" />
-          <Icon d={iMoon} class="moon" />
-          <Icon d={iMonitor} class="sys" />
-        </>
-      }
-    >
-      <p class="pop-label">Theme</p>
-      <ThemeChoices theme={theme} />
-    </Menu>
-  );
-}
-
-function AccountMenu({ me }: { me: Me }) {
-  const tokenMode = !me.user;
-  const organizations = me.organizations ?? [];
-
-  return (
-    <Menu
-      label="Account"
-      summaryClass="avatar-btn"
-      summary={tokenMode ? <Icon d={iKey} /> : initial(me.user?.name)}
-    >
-      <div class="pop-head">
-        <span class="avatar">{tokenMode ? <Icon d={iKey} /> : initial(me.user?.name)}</span>
-        <div class="grow">
-          <b>{tokenMode ? 'Admin token' : me.user?.name}</b>
-          <small>
-            {tokenMode
-              ? me.mode === 'local'
-                ? 'Local server'
-                : 'Local memory server'
-              : me.user?.email}
-          </small>
-        </div>
-      </div>
-      {me.mode === 'local' ? null : <p class="pop-label">Workspace</p>}
-      {me.mode === 'local' ? null : organizations.length ? (
-        organizations.map(organization => {
-          const current = organization.id === me.organization?.id;
-          return (
-            <form key={organization.id} action="/me/organization" method="post">
-              <input type="hidden" name="organization" value={organization.slug} />
-              <button
-                class="pop-item"
-                role="menuitemradio"
-                aria-checked={current}
-                disabled={current}
-              >
-                <span class="org">{initial(organization.name)}</span>
-                <span class="grow">
-                  {organization.name}
-                  <small>{organization.role}</small>
-                </span>
-                <Icon d={iCheck} />
-              </button>
-            </form>
-          );
-        })
-      ) : (
-        <div class="pop-item" aria-disabled="true">
-          <span class="org">
-            <Icon d={iKey} />
-          </span>
-          <span class="grow">
-            {me.organization?.name ?? 'Local server'}
-            <small>{tokenMode ? 'one workspace' : me.organization?.role}</small>
-          </span>
-        </div>
-      )}
-      {me.manageMembersUrl ? (
-        <a class="pop-item" href={me.manageMembersUrl}>
-          <Icon d={iUsers} />
-          Members ↗
-        </a>
-      ) : null}
-      <hr />
-      <Link class="pop-item" href="/dash/account">
-        <Icon d={iUser} />
-        Account
-      </Link>
-      <hr />
-      {tokenMode ? (
-        <form action="/dash/token" method="post">
-          <input type="hidden" name="token" value="" />
-          <input type="hidden" name="return" value="/dash" />
-          <button class="pop-item">
-            <Icon d={iOut} />
-            Forget token
-          </button>
-        </form>
-      ) : (
-        <SignOut class="pop-item" icon>
-          Sign out
-        </SignOut>
-      )}
-    </Menu>
-  );
-}
-
-function ServerMenu({ me, host }: { me?: Me; host: string }) {
-  const memory = !me?.user;
-  const local = me?.mode === 'local';
-  const url = me?.server?.url ?? `https://${host}`;
-  const name = local ? 'Local server' : memory ? 'Memory server' : 'Cloud server';
-
-  return (
-    <Menu
-      class="server"
-      align="up"
-      label="Server"
-      tip={name}
-      summary={
-        <>
-          <i class={memory && !local ? 'dot' : 'dot ok'} />
-          <span class="grow" title={`${me?.server?.name ?? 'Coder'} · ${new URL(url).host}`}>
-            {name}
-          </span>
-          <Icon d={iUpdown} />
-        </>
-      }
-    >
-      <p class="pop-label">Server</p>
-      <dl class="kv">
-        <dt>URL</dt>
-        <dd>{url}</dd>
-        <dt>Webhooks</dt>
-        <dd>{url}/hooks</dd>
-        <dt>Store</dt>
-        <dd>{local ? 'files' : memory ? 'memory' : 'database'}</dd>
-        <dt>Access</dt>
-        <dd>{memory ? 'admin token' : `session, ${me?.user?.email ?? ''}`}</dd>
-      </dl>
-      {memory && !local ? <p class="pop-note">Nothing persists across restarts.</p> : null}
-    </Menu>
-  );
-}
-
-async function ActiveCount({ count }: { count: Promise<TasksPage> }) {
-  const active = await count.then(page => page.counts?.active).catch(() => undefined);
-
-  return active ? (
-    <span class="n" title={`${active} active`}>
-      {active}
-    </span>
-  ) : null;
-}
-
-// `serve` opens /dash#token=…: the fragment never reaches the server, so the form posts it while the page loads, busy from first paint.
-const TOKEN_FROM_HASH = `(() => {
-  const token = /(?:^|&)token=([^&]+)/.exec(location.hash.slice(1))?.[1];
-  if (!token) return;
-  history.replaceState(null, '', location.pathname + location.search);
-  const form = document.getElementById('token-form');
-  form.elements.token.value = decodeURIComponent(token);
-  form.querySelector('button').setAttribute('aria-busy', 'true');
-  form.submit();
-})();`;
-
-function TokenPage({ request }: { request: Request }) {
-  const url = new URL(request.url);
-  const rejected = url.searchParams.get('token') === 'rejected';
-  const params = new URLSearchParams(url.searchParams);
-  params.delete('token');
-  const returnTo = `${url.pathname}${params.size ? `?${params}` : ''}`;
-
-  return (
-    <AuthPanel
-      tag="local server"
-      title="Enter the admin token"
-      lead="The server printed it when it started. It is the only key to this server."
-    >
-      <form id="token-form" action="/dash/token" method="post">
-        <input type="hidden" name="return" value={returnTo} />
-        <label class="field">
-          <span>Admin token</span>
-          <input class="mono" name="token" type="password" autocomplete="off" required autofocus />
-        </label>
-        <button class="btn wide">Open dashboard</button>
-        {rejected ? (
-          <p class="flash err" role="alert">
-            That token was not accepted.
-          </p>
-        ) : null}
-      </form>
-      <script dangerouslySetInnerHTML={{ __html: TOKEN_FROM_HASH }} />
-    </AuthPanel>
-  );
-}
-
-/** What needs the account waits for it beside the page, so the page's data loads at once. */
-async function WithMe({
-  me,
-  children,
-}: {
-  me: Promise<Me>;
-  children: (me?: Me) => ComponentChildren;
-}) {
-  return children(await me.catch(() => undefined));
-}
-
-/** Covers the frame when the account cannot load: the session ended, or the memory server wants its admin token. */
-async function Gate({ me, request }: { me: Promise<Me>; request: Request }) {
-  try {
-    await me;
-    return null;
-  } catch (error) {
-    const { pathname, search } = new URL(request.url);
-
-    // The session ended after the page was let in: sign in again, and come back here.
-    if (signedOut(error)) redirect(`/login?return=${encodeURIComponent(pathname + search)}`);
-
-    // Any other 401 asks for the memory server's admin token.
-    if (error instanceof CoderError && error.status === 401) return <TokenPage request={request} />;
-
-    return null;
-  }
-}
-
-/** The dashboard's frame around its pages. */
-export default function DashLayout({
-  request,
-  children,
-}: {
-  request?: Request;
-  children: ComponentChildren;
-}) {
-  if (!request) return null;
-  const { pathname, host } = new URL(request.url);
-  const me = load(request).me();
-  const active = load(request).tasks.list({ cursor: '', limit: 1, summary: true, counts: true });
-  const collapsed = /(?:^|; )side=min(?:;|$)/.test(request.headers.get('cookie') ?? '');
-
-  return (
-    <div class={collapsed ? 'app side-min' : 'app'}>
-      <header class="top">
-        <div class="top-l">
-          <Drawer />
-          <Link class="brand" href="/dash">
-            <Mark />
-            <span class="lockup">
-              Coder <small>wular</small>
-            </span>
-          </Link>
-        </div>
-        <div class="top-r">
-          <ThemeMenu theme={themeOf(request)} />
-          <WithMe me={me}>{who => (who ? <AccountMenu me={who} /> : null)}</WithMe>
-        </div>
-      </header>
-      <aside class="side">
-        <nav aria-label="Dashboard">
-          {navFor(request.headers.get('x-coder-mode') === 'local').map(
-            ({ within, label, icon, ...to }) => (
-              <CurrentLink key={within} {...to} within={within} data-tip={label}>
-                <Icon d={icon} />
-                {label}
-                {label === 'Tasks' ? (
-                  <Suspense fallback={null}>
-                    <ActiveCount count={active} />
-                  </Suspense>
-                ) : null}
-              </CurrentLink>
-            ),
-          )}
-        </nav>
-        <div class="side-foot">
-          <SideToggle collapsed={collapsed} />
-          <WithMe me={me}>{who => <ServerMenu me={who} host={host} />}</WithMe>
-        </div>
-      </aside>
-      <main data-pnext-root>{children}</main>
-      <TaskToasts />
-      <Gate me={me} request={request} />
-    </div>
-  );
-}

package/src/server/dash/app/dash/page.tsx

@@ -1,14 +0,0 @@
-import { redirect } from '@wular/pnext/navigation';
-
-import { load } from '@/api/load';
-import { localServer } from '@/api/types';
-
-/** A local server lands on Tasks, a cloud one on Agents; an account that fails to load is the layout's to handle. */
-export default async function DashboardHome({ request }: { request?: Request }) {
-  if (!request) return null;
-  const me = await load(request)
-    .me()
-    .catch(() => undefined);
-  if (!me) return null;
-  redirect(localServer(me) ? '/dash/tasks' : '/dash/agents');
-}