@morphemecms/cms 0.8.0 → 0.8.1-next-20261105100001

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @morphemecms/cms
 
+## 0.8.1-next-20261105100001
+
+### Patch Changes
+
+- 5c4fa60: Show the signed-in user and the site's domain at the top of the main drawer.
+- c19ddf7: On a phone, hide the top bar's side panel button on screens that show a back arrow.
+
 ## 0.8.0
 
 ### Minor Changes

package/lib/account.d.mts

@@ -0,0 +1,5 @@
+/** Up to two uppercase initials from `name` (its first and last word); the first letter of `login` when `name` is empty or null.
+ * @param {string | null | undefined} name @param {string} login */
+export function initialsOf(name: string | null | undefined, login: string): string;
+/** The address of a GitHub user's picture, `size` pixels square. @param {string} login @param {number} size */
+export function avatarOf(login: string, size: number): string;

package/lib/account.mjs

@@ -0,0 +1,16 @@
+// The signed-in user's look in the editor: up to two initials from the name, and the address of the GitHub picture.
+// Exposes initialsOf and avatarOf. No dependencies; AccountRow.tsx uses both.
+
+/** Up to two uppercase initials from `name` (its first and last word); the first letter of `login` when `name` is empty or null.
+ * @param {string | null | undefined} name @param {string} login */
+export function initialsOf(name, login) {
+  const words = (name ?? '').trim().split(/\s+/).filter(Boolean);
+  const letters = words.length > 1 ? [words[0], words[words.length - 1]] : words.slice(0, 1);
+  const initials = letters.map((w) => [...w][0]).join('');
+  return (initials || [...login][0] || '').toUpperCase();
+}
+
+/** The address of a GitHub user's picture, `size` pixels square. @param {string} login @param {number} size */
+export function avatarOf(login, size) {
+  return `https://avatars.githubusercontent.com/${encodeURIComponent(login)}?s=${size}`;
+}

package/lib/account.test.mjs

@@ -0,0 +1,22 @@
+// Tests for lib/account.mjs: the initials and the picture address of the signed-in user.
+import test from 'node:test';
+import assert from 'node:assert/strict';
+import { avatarOf, initialsOf } from './account.mjs';
+
+test('initialsOf takes the first letters of the name', () => {
+  assert.equal(initialsOf('Lars Adolfsen', 'larsadolfsen'), 'LA');
+  assert.equal(initialsOf('Lars', 'x'), 'L');
+});
+
+test('initialsOf takes the first and the last word', () => {
+  assert.equal(initialsOf('anna maria berg', 'x'), 'AB');
+});
+
+test('initialsOf falls back to the login', () => {
+  assert.equal(initialsOf(null, 'octocat'), 'O');
+  assert.equal(initialsOf('  ', 'octocat'), 'O');
+});
+
+test('avatarOf makes the GitHub picture address', () => {
+  assert.equal(avatarOf('octo cat', 80), 'https://avatars.githubusercontent.com/octo%20cat?s=80');
+});

package/lib/csp.mjs

@@ -23,9 +23,9 @@ export { allows, isSource, joined, KINDS, kindOf, sourcesProblems } from './cspS
 const VIDEOS = { frame: ['https://www.youtube-nocookie.com', 'https://player.vimeo.com'] };
 
 /** What the editor needs (GitHub it asks through the site's Worker, on its own address: github.ts): Vimeo's details of a video and the stills of the videos
- * (standard/video/view.ts), and what it makes in the browser (pictures, files) as blob: and data:. */
+ * (standard/video/view.ts), the signed-in user's GitHub picture (AccountRow.tsx), and what it makes in the browser (pictures, files) as blob: and data:. */
 const EDITOR = {
-  img: ['blob:', 'https://i.ytimg.com', 'https://i.vimeocdn.com'],
+  img: ['blob:', 'https://i.ytimg.com', 'https://i.vimeocdn.com', 'https://avatars.githubusercontent.com'],
   connect: ['blob:', 'data:', 'https://vimeo.com'],
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@morphemecms/cms",
-  "version": "0.8.0",
+  "version": "0.8.1-next-20261105100001",
   "description": "Morpheme CMS: the editor for a site built with Astro, its screens, its blocks and the rules a site gives it. See README.md.",
   "license": "MIT",
   "author": "Lars Adolfsen",

package/src/AccountRow.tsx

@@ -0,0 +1,35 @@
+// The signed-in user as a list row: their GitHub picture in a round avatar (their initials until it loads or when it fails),
+// their name and a line under it. Exposes AccountRow. Uses ListItem (ui.tsx) and lib/account.mjs; the main drawer's header
+// (MainMenu.tsx) and the account screen (Library.tsx) show it.
+import { useEffect, useState } from 'react';
+import { avatarOf, initialsOf } from '../lib/account.mjs';
+import type { Viewer } from './github';
+import { ListItem, plainListClass } from './ui';
+
+/** The user's avatar, name (`user.name`, or the login) and `supporting` under it, each on one line; a link when `href` is set. */
+export function AccountRow({ user, supporting, href }: { user: Viewer; supporting?: string; href?: string }) {
+  const initials = initialsOf(user.name, user.login);
+  const src = avatarOf(user.login, 80);
+  const [loaded, setLoaded] = useState(false);
+  // The picture is loaded beforehand; the initials stand in until it is there and for good when it fails.
+  useEffect(() => {
+    setLoaded(false);
+    const image = new Image();
+    image.onload = () => setLoaded(true);
+    image.src = src;
+    return () => {
+      image.onload = null;
+    };
+  }, [src]);
+  return (
+    <ul className={plainListClass}>
+      <ListItem
+        href={href}
+        leadingAvatar={loaded ? { src } : initials}
+        headline={user.name ?? user.login}
+        supporting={supporting}
+        truncate
+      />
+    </ul>
+  );
+}

package/src/App.tsx

@@ -670,7 +670,7 @@ function Editor() {
   return (
     <>
       <TopBarLayout
-        aside={<MainMenu route={route} files={files} />}
+        aside={<MainMenu route={route} files={files} user={user} />}
         above={
           files &&
           user &&

package/src/Library.tsx

@@ -1,4 +1,4 @@
-// The start screen of the editor (empty but for its title, status and FAB) and the
+// The account screen (who is signed in, AccountRow) and the start screen of the editor (empty but for its title, status and FAB) and the
 // list of each part: blog posts newest first, the rest by name, prices and testimonials in their order
 // on the site (with arrows to move them), and a search. Lists that are not in an order of their own can
 // be sorted another way (a list of kinds, by its kinds too); the choice is kept in this browser. Pages
@@ -15,7 +15,6 @@ import {
   ClockCounterClockwise,
   CircleHalf,
   FileText,
-  GithubLogo,
   GoogleLogo,
   List as ListIcon,
   ListBullets,
@@ -49,6 +48,7 @@ import {
 } from './site';
 import { readFields, splitFrontmatter } from './frontmatter.mjs';
 import { ConflictError, type RepoFile, type Viewer } from './github';
+import { AccountRow } from './AccountRow';
 import Screen from './Screen';
 import {
   ImageCarousel,
@@ -718,15 +718,11 @@ export function Account({ user, files, onLogout }: { user: Viewer | null; files:
     // Titled with the name of the one logged in.
     <Screen title={user ? (user.name ?? user.login) : t.common.parts.account} back={{ href: '#', label: siteName }}>
       {/* Who is logged in, as plain text: nothing to tap. */}
-      <div className="mb-8 flex items-center gap-3 px-4">
-        <span className="flex size-12 shrink-0 items-center justify-center rounded-full text-muted">
-          <GithubLogo size={28} />
-        </span>
-        <span className="min-w-0 flex-1">
-          <span className="block truncate font-medium">{user ? (user.name ?? user.login) : ''}</span>
-          {user && <span className="block truncate text-sm text-muted">{t.library.githubAccount(user.login)}</span>}
-        </span>
-      </div>
+      {user && (
+        <div className="mb-8">
+          <AccountRow user={user} supporting={t.library.githubAccount(user.login)} />
+        </div>
+      )}
       <section className="mb-8">
         <GroupTitle>{t.library.theme}</GroupTitle>
         <ThemePicker />

package/src/MainDrawerParts.tsx

@@ -1,9 +1,11 @@
 // The main drawer and its menu button on #udseende/dele/editor (Parts.tsx): the modal drawer in its two levels (sections, and
 // a section's list with the back row and a fold-out), opened from a button, so it can be tried at any width, and the menu
-// button open and closed. Exposes MainDrawerSample. Uses MainDrawer and its parts from ui.tsx.
+// button open and closed. The drawer's header is a sample user (AccountRow). Exposes MainDrawerSample. Uses MainDrawer and
+// its parts from ui.tsx.
 import { useState } from 'react';
 import { icons } from './site';
 import { t } from './i18n';
+import { AccountRow } from './AccountRow';
 import {
   Button,
   MainDrawer,
@@ -18,6 +20,8 @@ import {
 
 const { parts } = t.common;
 
+const sampleUser = { login: 'octocat', name: 'Octo Cat', canSave: true };
+
 export function MainDrawerSample() {
   const [open, setOpen] = useState(false);
   const [section, setSection] = useState<string | null>(null);
@@ -38,6 +42,7 @@ export function MainDrawerSample() {
           return inList;
         }}
         variant="modal"
+        header={<AccountRow user={sampleUser} supporting="example.com" href="" />}
       >
         {section === null ? (
           <MainDrawerLevel>

package/src/MainMenu.tsx

@@ -1,7 +1,8 @@
 // The editor's main menu (App.tsx renders it): the drawer (ui.tsx MainDrawer) in two levels. The first lists Home and the
 // sections; a section opens its list, under a back row, with the open screen marked and its fold-out folded out. Apps lists
 // Appstore and a row per app installed. From medium and wider the first level is also the collapsed navigation rail
-// (MainRailItem), whose sections open the drawer at their list. Exposes MainMenu. The tree and the open place are lib/menu.mjs
+// (MainRailItem), whose sections open the drawer at their list. The drawer's header is the signed-in user (AccountRow), a link
+// to the account. Exposes MainMenu. The tree and the open place are lib/menu.mjs
 // (menuTree, currentPlace); it only wires them to the drawer.
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { config, header } from '@site/editor';
@@ -10,6 +11,7 @@ import { STORE_ROUTE } from './store';
 import { collectionOf } from './schema';
 import { apps, collections, groups, icons, lists, partScreens } from './site';
 import { partOf } from './Library';
+import { AccountRow } from './AccountRow';
 import { childrenOf } from './menuChildren';
 import { t } from './i18n';
 import { useMenuOpen } from './menuOpen';
@@ -24,9 +26,9 @@ import {
   MainRailItem,
   MainRailSectionItem,
 } from './ui';
-import type { RepoFile } from './github';
+import type { RepoFile, Viewer } from './github';
 
-export function MainMenu({ route, files }: { route: string; files: RepoFile[] | null }) {
+export function MainMenu({ route, files, user }: { route: string; files: RepoFile[] | null; user: Viewer | null }) {
   const { open, setOpen } = useMenuOpen();
   const tree = useMemo(
     () =>
@@ -82,6 +84,7 @@ export function MainMenu({ route, files }: { route: string; files: RepoFile[] |
       open={open}
       onOpenChange={setOpen}
       onEscape={onEscape}
+      header={user && <AccountRow user={user} supporting={config.domain} href="#konto" />}
       rail={tree.map((entry) =>
         entry.href !== undefined ? (
           <MainRailItem key={entry.id} href={entry.href} icon={icons[entry.id]} label={entry.label} selected={route === ''} />

package/src/Screen.tsx

@@ -1,6 +1,6 @@
 // A screen of the editor: a top bar like in an app, beside the navigation rail and the drawer (it is drawn into
 // topBarSlot.tsx's place, at the top of the content), above the content. Below medium, where there is no rail, the panel
-// button at its start opens and closes the main drawer (MainMenu.tsx, menuOpen.ts; from medium it is the rail's); at expanded and wider the logo and the site's name after it (one link to the start screen,
+// button at its start opens and closes the main drawer (MainMenu.tsx, menuOpen.ts; from medium it is the rail's; not on a screen with a back arrow); at expanded and wider the logo and the site's name after it (one link to the start screen,
 // through `back.guard`), below expanded the back arrow, the title and the status as in an app (the logo only on the start
 // screen); at the end the actions, the notifications and the account, on every screen (on a phone the account only on the
 // start screen, `home`). At expanded and wider the way here as breadcrumbs (the screen above, when that is not the start
@@ -116,7 +116,7 @@ export default function Screen<T extends string>({
   const bar = (
     <TopAppBar>
       <div className="flex h-16 items-center gap-1 px-2 medium:gap-3 medium:px-6">
-        {menuButtonInTopBar && (
+        {menuButtonInTopBar && !back && (
           <MenuButton
             label={menu.open ? t.library.closeMenu : t.library.openMenu}
             open={menu.open}

package/src/SiteLogoLink.tsx

@@ -1,4 +1,4 @@
-// The logo and the site's name at the start of the top bar, after the menu button (Screen.tsx), and in the modal drawer after its close button (ui.tsx): one link to the start screen.
+// The logo and the site's name at the start of the top bar, after the menu button (Screen.tsx): one link to the start screen.
 // Exposes SiteLogoLink; the link's click goes through `onClick` (Screen's `leave`, so the unsaved-changes warning shows).
 import type { MouseEventHandler } from 'react';
 import { siteName } from '@site/editor';

package/src/ui.tsx

@@ -107,7 +107,6 @@ import {
 import { locale, t } from './i18n';
 import { InEditor, type ButtonKind, type IconButtonKind } from './standard/view';
 import { SvgFile } from './icon';
-import { SiteLogoLink } from './SiteLogoLink';
 import { countries, countryName, dialCodes, flagOf, regionOf } from './countries';
 import { byText } from './schema';
 import { contrast } from '../lib/colors';
@@ -2206,6 +2205,9 @@ export function ChoiceRow({
  * (Material 3 Expressive's), each row on its own surface. */
 export const listClass = siteListClasses('segmented');
 
+/** The classes of a list without surfaces (the theme's standard list): a row or two that stand on the page, AccountRow. */
+export const plainListClass = siteListClasses('standard');
+
 /** The small heading over a Group, and over what stands as one (the themes on Konto): in Material 3's title small, as
  * written (not in capitals, Material 2's subheader), muted as a group's heading in a sheet (SheetGroupTitle). */
 export function GroupTitle({ children }: { children: ReactNode }) {
@@ -2665,7 +2667,8 @@ export function SectionPane({ caption, title, children }: { caption: string; tit
 }
 
 /** The editor's main navigation (Material 3's navigation drawer, the theme's, in its design): the site's parts in sections
- * (`MainDrawerSection`, `MainDrawerItem`), at the full height of the window, with the menu button at the top. From medium
+ * (`MainDrawerSection`, `MainDrawerItem`), at the full height of the window, with a header row at the top: `header` (the
+ * signed-in user, AccountRow) at the start and the menu button at the end. From medium
  * and wider a navigation rail (`rail`: its destinations, `MainRailItem` and `MainRailSectionItem`) stands in its place while
  * the drawer is closed; its menu button, or a section in it, opens the drawer (`onOpenChange`). The drawer is standard at
  * expanded and wider, beside the content (`open` shows and hides it, and the rail the other way round); modal below, over a
@@ -2680,6 +2683,7 @@ export function MainDrawer({
   onEscape,
   variant,
   rail,
+  header,
   children,
 }: {
   label: string;
@@ -2688,6 +2692,7 @@ export function MainDrawer({
   onEscape?: () => boolean;
   variant?: 'modal' | 'standard';
   rail?: ReactNode;
+  header?: ReactNode;
   children: ReactNode;
 }) {
   const layout = useMenuLayout();
@@ -2701,11 +2706,11 @@ export function MainDrawer({
         </MainRail>
       )}
       {shown === 'standard' ? (
-        <StandardMainDrawer label={label} open={open} onOpenChange={onOpenChange} onEscape={onEscape}>
+        <StandardMainDrawer label={label} open={open} onOpenChange={onOpenChange} onEscape={onEscape} header={header}>
           {children}
         </StandardMainDrawer>
       ) : (
-        <ModalMainDrawer label={label} open={open} onOpenChange={onOpenChange} onEscape={onEscape}>
+        <ModalMainDrawer label={label} open={open} onOpenChange={onOpenChange} onEscape={onEscape} header={header}>
           {children}
         </ModalMainDrawer>
       )}
@@ -2731,13 +2736,13 @@ function MainRail({ label, onOpen, children }: { label: string; onOpen: () => vo
   );
 }
 
-// The menu button at the top of either drawer: its icon over the items' icons, level with the top bar's logo; it closes the drawer.
-// The modal drawer (`logo`) shows the site's logo after the button.
-function MainDrawerMenuButton({ onClick, logo }: { onClick: () => void; logo?: boolean }) {
+// The header row at the top of either drawer: `header` (the signed-in user, MainMenu.tsx) at the start and the menu button at
+// the end, which closes the drawer and stays level with the top bar's menu button.
+function MainDrawerMenuButton({ onClick, header }: { onClick: () => void; header?: ReactNode }) {
   return (
-    <div className="ms-1 mt-2 mb-7 flex items-center gap-1 self-start">
+    <div className="mt-2 mb-7 flex items-center gap-1 ps-2 pe-1">
+      <div className="min-w-0 flex-1">{header}</div>
       <MenuButton label={t.library.closeMenu} open onClick={onClick} />
-      {logo && <SiteLogoLink />}
     </div>
   );
 }
@@ -2754,12 +2759,14 @@ function StandardMainDrawer({
   open,
   onOpenChange,
   onEscape,
+  header,
   children,
 }: {
   label: string;
   open: boolean;
   onOpenChange: (open: boolean) => void;
   onEscape?: () => boolean;
+  header?: ReactNode;
   children: ReactNode;
 }) {
   if (!open) return null;
@@ -2772,7 +2779,7 @@ function StandardMainDrawer({
           if (e.key === 'Escape' && onEscape?.()) e.preventDefault();
         }}
       >
-        <MainDrawerMenuButton onClick={() => onOpenChange(false)} />
+        <MainDrawerMenuButton onClick={() => onOpenChange(false)} header={header} />
         <MainDrawerBody label={label}>{children}</MainDrawerBody>
       </SiteNavigationDrawer>
     </aside>
@@ -2786,12 +2793,14 @@ function ModalMainDrawer({
   open,
   onOpenChange,
   onEscape,
+  header,
   children,
 }: {
   label: string;
   open: boolean;
   onOpenChange: (open: boolean) => void;
   onEscape?: () => boolean;
+  header?: ReactNode;
   children: ReactNode;
 }) {
   const dialog = useRef<HTMLDialogElement>(null);
@@ -2838,7 +2847,7 @@ function ModalMainDrawer({
           }
         }}
       >
-        <MainDrawerMenuButton onClick={() => onOpenChange(false)} logo />
+        <MainDrawerMenuButton onClick={() => onOpenChange(false)} header={header} />
         <MainDrawerBody label={label}>{children}</MainDrawerBody>
       </SiteNavigationDrawer>
     </dialog>