@mosetta/editor 0.0.0-stage → 0.0.29

package/tiles/workbench/workbench.component.tsx

@@ -0,0 +1,476 @@
+// The SHELL of the workbench (ADR-0050, by pages since ADR-0051 §4): a sidebar — the project,
+// Home / Pages / Prefabs, the documents recently opened, the account — and the content beside
+// it: whatever page of the workbench the address names (Home, a list, the editor), as the page's
+// own blocks under the shell's outlet. The shell is one block on three pages, under one node id,
+// so a move between them keeps it mounted; its links move in place through the client router.
+//
+// TOOLS (ADR-0062): the blocks in the shell's `tools` slot are not drawn here — the shell hands
+// them to the canvases below it (canvasTools.ts), each of which offers them on its bar.
+import { defineComponentSide, Link, markInternalTile } from '@mosetta/react';
+import { ProvideDiScope, useChildEntries, useChildren, useDi, useDiScope, useIsPreviewMode, useRoute } from '@mosetta/react';
+import { BlockScope, DI_CONTAINER_TOKEN } from '@mosetta/di';
+import { Mosaic } from '@mosetta/ui';
+import type { ContentKind } from '@mosetta/content';
+import { ReactNode, useCallback, useEffect, useRef, useState, useSyncExternalStore } from 'react';
+import { TooltipHost } from '../content/tooltips';
+import '../content/workbenchScale.css';
+import './workbench.css';
+import { basePathOf, parseWorkbenchPath, pathOfView, TWorkbenchView } from './workbenchAddress';
+import { IRecentEntry, readRecent, subscribeRecent } from './recent';
+import { IProjectInfo, useProjectInfo } from './projectInfo';
+import { EDITOR_TOOLS_TOKEN, toolNodesOf } from '../canvas/canvasTools';
+import { AssistantPanel } from './assistant';
+
+const BackIcon = (
+  <svg viewBox="0 0 16 16"
+       aria-hidden="true">
+    <path d="M9.5 3.5L5 8l4.5 4.5M5.5 8H13"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="1.4"
+          strokeLinecap="round"
+          strokeLinejoin="round" />
+  </svg>
+);
+
+const DistributionsIcon = (
+  <svg viewBox="0 0 16 16"
+       aria-hidden="true">
+    <path d="M8 2.2l5.3 2.9v5.8L8 13.8l-5.3-2.9V5.1zM2.7 5.1L8 8l5.3-2.9M8 8v5.8"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="1.3"
+          strokeLinejoin="round" />
+  </svg>
+);
+
+const HomeIcon = (
+  <svg viewBox="0 0 16 16"
+       aria-hidden="true">
+    <path d="M2.5 7.5L8 2.8l5.5 4.7M4 6.8V13h3V9.5h2V13h3V6.8"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="1.4"
+          strokeLinejoin="round" />
+  </svg>
+);
+
+const PagesIcon = (
+  <svg viewBox="0 0 16 16"
+       aria-hidden="true">
+    <path d="M4 2.5h5.5L12.5 5.5V13.5H4z"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="1.4"
+          strokeLinejoin="round" />
+    <path d="M9.5 2.5v3h3M6 8.5h4M6 10.8h4"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="1.3" />
+  </svg>
+);
+
+const PrefabsIcon = (
+  <svg viewBox="0 0 16 16"
+       aria-hidden="true">
+    <path d="M8 2.2l5.2 3v5.6L8 13.8l-5.2-3V5.2z"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="1.4"
+          strokeLinejoin="round" />
+    <path d="M8 8l5.2-2.8M8 8L2.8 5.2M8 8v5.8"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="1.2" />
+  </svg>
+);
+
+const FoldIcon = (
+  <svg viewBox="0 0 16 16"
+       aria-hidden="true">
+    <path d="M9.5 3.5L5 8l4.5 4.5M13 3.5L8.5 8l4.5 4.5"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round" />
+  </svg>
+);
+
+const UnfoldIcon = (
+  <svg viewBox="0 0 16 16"
+       aria-hidden="true">
+    <path d="M6.5 3.5L11 8l-4.5 4.5M3 3.5L7.5 8 3 12.5"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round" />
+  </svg>
+);
+
+const PinIcon = (
+  <svg viewBox="0 0 16 16"
+       aria-hidden="true">
+    <path d="M9.8 2.2l4 4-1.4 1.4-.7-.7-2.6 2.6.3 2.8-1.4 1.4-2.6-2.6L2.6 14 2 13.4l2.9-2.8-2.6-2.6 1.4-1.4 2.8.3 2.6-2.6-.7-.7z"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="1.3"
+          strokeLinejoin="round" />
+  </svg>
+);
+
+const AssistantIcon = (
+  <svg viewBox="0 0 16 16"
+       aria-hidden="true">
+    <path d="M8 2.2l1.3 3.2 3.2 1.3-3.2 1.3L8 11.2 6.7 8 3.5 6.7l3.2-1.3zM12.5 10.5l.6 1.4 1.4.6-1.4.6-.6 1.4-.6-1.4-1.4-.6 1.4-.6z"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="1.2"
+          strokeLinejoin="round" />
+  </svg>
+);
+
+/** the sidebar pinned open — a preference of this browser */
+const SIDEBAR_PINNED_KEY = 'mosetta-workbench-sidebar-pinned';
+
+/** the assistant's column open — a preference of this browser */
+const ASSISTANT_OPEN_KEY = 'mosetta-workbench-assistant-open';
+
+function readFlag(key: string, fallback: boolean): boolean {
+  try {
+    const raw = window.localStorage.getItem(key);
+    return raw === null ? fallback : raw === '1';
+  } catch {
+    return fallback;
+  }
+}
+
+function writeFlag(key: string, value: boolean): void {
+  try {
+    window.localStorage.setItem(key, value ? '1' : '0');
+  } catch {
+    // a document that denies storage: the preference lives for the page only
+  }
+}
+
+const projectNameOf = (host: string): string => host.split(':')[0].split('.')[0] || host;
+
+/** a line of the sidebar's navigation: a link, moving in place */
+function NavItem({ active, href, icon, children, testId, tooltip }: { active: boolean; href: string; icon: ReactNode; children: ReactNode; testId: string; tooltip?: string }) {
+  return (
+    <Link className={`workbench__nav-item${active ? ' workbench__nav-item--active' : ''}`}
+          href={href}
+          data-test-id={testId}
+          data-tooltip={tooltip}
+          aria-current={active ? 'page' : undefined}>
+      <span className="workbench__nav-icon">{icon}</span>
+      <span className="workbench__nav-label">{children}</span>
+    </Link>
+  );
+}
+
+interface ISidebarProps {
+  view: TWorkbenchView;
+  base: string;
+  compact: boolean;
+  pinned: boolean;
+  recent: readonly IRecentEntry[];
+  project: IProjectInfo;
+  /** the assistant's column: null — the site has no assistant */
+  assistant: { readonly open: boolean; readonly onToggle: () => void } | null;
+  onCompact: (compact: boolean) => void;
+  onPinned: (pinned: boolean) => void;
+}
+
+function Sidebar({ view, base, compact, pinned, recent, project, assistant, onCompact, onPinned }: ISidebarProps) {
+  const listShown = (kind: ContentKind): boolean => (view.view === 'list' && view.kind === kind)
+    || (view.view === 'editor' && view.kind === kind);
+  const signOut = project.signedIn && project.authOrigin
+    ? `${project.authOrigin}/logout?return=${encodeURIComponent(`${window.location.origin}/`)}`
+    : null;
+  const name = projectNameOf(project.host);
+  const pathTo = (target: 'home' | 'distributions' | ContentKind): string => pathOfView(base, target === 'home' || target === 'distributions'
+    ? { view: target }
+    : { view: 'list', kind: target }).pathname;
+  return (
+    <nav className={`workbench__sidebar${compact ? ' workbench__sidebar--compact' : ''}`}
+         data-test-id="workbench-sidebar"
+         data-compact={compact || undefined}
+         data-pinned={pinned || undefined}>
+      {/* the way back to the platform: every project of this person, the dashboard they came from */}
+      {project.platformOrigin ? (
+        <a className="workbench__back"
+           href={project.platformOrigin}
+           data-test-id="workbench-all-projects"
+           data-tooltip={compact ? 'All projects' : undefined}
+           aria-label="All projects">
+          {BackIcon}
+          <span className="workbench__nav-label">All projects</span>
+        </a>
+      ) : null}
+      <div className="workbench__sidebar-head">
+        <Link className="workbench__project"
+              href={pathTo('home')}
+              data-test-id="workbench-project"
+              data-tooltip={compact ? `${name} — Home` : undefined}>
+          <Mosaic seed={name}
+                  size={24} />
+          <span className="workbench__project-name">{name}</span>
+        </Link>
+        {compact ? null : (
+          <>
+            <button type="button"
+                    className={`workbench__sidebar-button${pinned ? ' workbench__sidebar-button--on' : ''}`}
+                    data-test-id="workbench-sidebar-pin"
+                    aria-pressed={pinned}
+                    aria-label={pinned ? 'Unpin the sidebar' : 'Pin the sidebar open'}
+                    data-tooltip={pinned ? 'Unpin: the sidebar folds again when the editor opens' : 'Pin the sidebar open — it never folds on its own'}
+                    onClick={() => onPinned(!pinned)}>
+              {PinIcon}
+            </button>
+            <button type="button"
+                    className="workbench__sidebar-button"
+                    data-test-id="workbench-sidebar-fold"
+                    aria-label="Fold the sidebar"
+                    data-tooltip="Fold the sidebar to its icons"
+                    onClick={() => onCompact(true)}>
+              {FoldIcon}
+            </button>
+          </>
+        )}
+      </div>
+      {compact ? (
+        <button type="button"
+                className="workbench__sidebar-button workbench__sidebar-button--unfold"
+                data-test-id="workbench-sidebar-unfold"
+                aria-label="Unfold the sidebar"
+                data-tooltip="Unfold the sidebar"
+                onClick={() => onCompact(false)}>
+          {UnfoldIcon}
+        </button>
+      ) : null}
+      <div className="workbench__nav">
+        <NavItem active={view.view === 'home'}
+                 href={pathTo('home')}
+                 testId="workbench-nav-home"
+                 icon={HomeIcon}
+                 tooltip={compact ? 'Home' : undefined}>
+          Home
+        </NavItem>
+        <NavItem active={listShown('pages')}
+                 href={pathTo('pages')}
+                 testId="workbench-nav-pages"
+                 icon={PagesIcon}
+                 tooltip={compact ? 'Pages' : undefined}>
+          Pages
+        </NavItem>
+        <NavItem active={listShown('prefabs')}
+                 href={pathTo('prefabs')}
+                 testId="workbench-nav-prefabs"
+                 icon={PrefabsIcon}
+                 tooltip={compact ? 'Prefabs' : undefined}>
+          Prefabs
+        </NavItem>
+        <NavItem active={view.view === 'distributions'}
+                 href={pathTo('distributions')}
+                 testId="workbench-nav-distributions"
+                 icon={DistributionsIcon}
+                 tooltip={compact ? 'Tile palettes' : undefined}>
+          Tile palettes
+        </NavItem>
+        {assistant ? (
+          <button type="button"
+                  className={`workbench__nav-item${assistant.open ? ' workbench__nav-item--active' : ''}`}
+                  data-test-id="workbench-nav-assistant"
+                  data-tooltip={compact ? 'Assistant (⌘J)' : '⌘J'}
+                  aria-pressed={assistant.open}
+                  onClick={assistant.onToggle}>
+            <span className="workbench__nav-icon">{AssistantIcon}</span>
+            <span className="workbench__nav-label">Assistant</span>
+          </button>
+        ) : null}
+      </div>
+      {recent.length > 0 && !compact ? (
+        <div className="workbench__recent"
+             data-test-id="workbench-recent">
+          <div className="workbench__recent-title">Recent</div>
+          {recent.map((entry) => (
+            <Link key={`${entry.kind}:${entry.page}`}
+                  className="workbench__recent-item"
+                  href={pathOfView(base, { view: 'editor', kind: entry.kind, page: entry.page }).pathname}
+                  data-recent-kind={entry.kind}
+                  data-recent-page={entry.page}
+                  data-tooltip={entry.kind === 'prefabs' ? `Open the prefab ${entry.title}` : `Open ${entry.title}`}>
+              <span className="workbench__nav-icon">{entry.kind === 'prefabs' ? PrefabsIcon : PagesIcon}</span>
+              <span className="workbench__recent-label">{entry.title}</span>
+            </Link>
+          ))}
+        </div>
+      ) : null}
+      <div className="workbench__account"
+           data-test-id="workbench-account"
+           data-tooltip={compact ? (project.signedIn?.login ?? (project.described ? 'Not signed in' : 'Local workbench')) : undefined}>
+        {project.signedIn ? (
+          <>
+            <Mosaic seed={project.signedIn.login.toLowerCase()}
+                    size={28}
+                    className="workbench__account-mosaic" />
+            <span className="workbench__account-login">{project.signedIn.login}</span>
+            {signOut ? <a className="workbench__account-out"
+                          href={signOut}>Sign out</a> : null}
+          </>
+        ) : (
+          <>
+            <Mosaic seed="mosetta"
+                    size={28}
+                    className="workbench__account-mosaic" />
+            <span className="workbench__account-login">{project.described ? 'Not signed in' : 'Local workbench'}</span>
+          </>
+        )}
+      </div>
+    </nav>
+  );
+}
+
+// ---- the shell ---------------------------------------------------------------------------------
+
+/** the recent list as a store: this window's localStorage, re-read on every write */
+function useRecent(): readonly IRecentEntry[] {
+  const [held, setHeld] = useState<readonly IRecentEntry[]>(() => readRecent(window));
+  useEffect(() => subscribeRecent(window, () => setHeld(readRecent(window))), []);
+  return held;
+}
+
+const subscribeToHistory = (listen: () => void): (() => void) => {
+  window.addEventListener('popstate', listen);
+  return () => window.removeEventListener('popstate', listen);
+};
+const readSearch = (): string => window.location.search;
+const noSearch = (): string => '';
+
+/** the shell's DI scope: the tools of its `tools` slot, read afresh by whoever asks */
+function useToolsScope() {
+  const di = useDi(DI_CONTAINER_TOKEN);
+  const parentScope = useDiScope();
+  const tools = toolNodesOf(useChildEntries().map((entry) => entry.node));
+  const held = useRef(tools);
+  held.current = tools;
+  const [scope] = useState(() => {
+    const shellScope = new BlockScope(parentScope);
+    di.registerScope(shellScope);
+    di.registerValueOfToken(EDITOR_TOOLS_TOKEN, { list: () => held.current }, shellScope);
+    return shellScope;
+  });
+  useEffect(() => () => di.disposeScope(scope), [di, scope]);
+  return scope;
+}
+
+function Shell() {
+  const route = useRoute();
+  const project = useProjectInfo();
+  const children = useChildren({ max: 'many' });
+  const toolsScope = useToolsScope();
+  // which page of the workbench shows: the address says (the route's path, else the location's)
+  const pathname = route?.path ?? window.location.pathname;
+  const base = basePathOf(route?.pattern ?? null, pathname);
+  const search = useSyncExternalStore(subscribeToHistory, readSearch, noSearch);
+  const view = parseWorkbenchPath(pathname, base, new URLSearchParams(route?.search ?? search));
+  const editor = view.view === 'editor';
+  // the editor wants the room: entering it folds the sidebar to its icons, leaving it unfolds —
+  // unless the sidebar is pinned open; a fold or unfold by hand holds until the next crossing
+  const [pinned, setPinned] = useState(() => readFlag(SIDEBAR_PINNED_KEY, false));
+  const [compact, setCompact] = useState(() => editor && !pinned);
+  const [wasEditor, setWasEditor] = useState(editor);
+  if (wasEditor !== editor) {
+    setWasEditor(editor);
+    if (!pinned) setCompact(editor);
+  }
+  const recent = useRecent();
+  const onPinned = useCallback((next: boolean): void => {
+    setPinned(next);
+    writeFlag(SIDEBAR_PINNED_KEY, next);
+    if (next) setCompact(false);
+  }, []);
+  // the assistant: offered where the platform has one, open as this browser left it
+  const [assistantOpen, setAssistantOpen] = useState(() => readFlag(ASSISTANT_OPEN_KEY, true));
+  const [assistantWorking, setAssistantWorking] = useState(false);
+  const toggleAssistant = useCallback((): void => {
+    setAssistantOpen((open) => {
+      writeFlag(ASSISTANT_OPEN_KEY, !open);
+      return !open;
+    });
+  }, []);
+  const closeAssistant = useCallback((): void => {
+    setAssistantOpen(false);
+    writeFlag(ASSISTANT_OPEN_KEY, false);
+  }, []);
+  // ⌘J / Ctrl+J opens and closes it wherever the focus is
+  const hasAssistant = project.assistant;
+  useEffect(() => {
+    if (!hasAssistant) return undefined;
+    const onKey = (e: KeyboardEvent): void => {
+      if ((e.metaKey || e.ctrlKey) && !e.altKey && !e.shiftKey && e.key.toLowerCase() === 'j') {
+        e.preventDefault();
+        toggleAssistant();
+      }
+    };
+    window.addEventListener('keydown', onKey);
+    return () => window.removeEventListener('keydown', onKey);
+  }, [hasAssistant, toggleAssistant]);
+  return (
+    <TooltipHost>
+      <div className="workbench"
+           data-test-id="workbench"
+           data-view={view.view}
+           data-kind={view.view === 'list' || view.view === 'editor' ? view.kind : undefined}
+           data-assistant={project.assistant && assistantOpen ? (editor ? 'tree' : 'bottom') : undefined}>
+        <Sidebar view={view}
+                 base={base}
+                 compact={compact}
+                 pinned={pinned}
+                 recent={recent}
+                 project={project}
+                 assistant={project.assistant ? { open: assistantOpen, onToggle: toggleAssistant } : null}
+                 onCompact={setCompact}
+                 onPinned={onPinned} />
+        <ProvideDiScope scope={toolsScope}>
+          <main className="workbench__main"
+                data-test-id="workbench-main">
+            {children}
+            {/* the assistant at work: what it changes shows through, nothing can be changed under it */}
+            {assistantWorking ? (
+              <div className="workbench__frozen"
+                   data-test-id="workbench-frozen">
+                <span className="workbench__frozen-note">The assistant is working…</span>
+              </div>
+            ) : null}
+            {/* an island over the page: over the tree in the editor, at the bottom elsewhere */}
+            {project.assistant && assistantOpen ? <AssistantPanel placement={editor ? 'tree' : 'bottom'}
+                                                                  transcription={project.transcription}
+                                                                  onClose={closeAssistant}
+                                                                  onWorking={setAssistantWorking} /> : null}
+          </main>
+        </ProvideDiScope>
+      </div>
+    </TooltipHost>
+  );
+}
+
+function WorkbenchBlock() {
+  // a workbench inside a preview must not open canvases of its own (an iframe in an iframe,
+  // forever, when the workbench page previews itself)
+  if (useIsPreviewMode()) {
+    return <div className="workbench workbench--bare"
+                data-workbench-preview-stub>A workbench inside a preview does not expand</div>;
+  }
+  if (typeof window === 'undefined') return null; // nothing to show a server: the shell is the browser's
+  return <Shell />;
+}
+
+export default markInternalTile(defineComponentSide({
+  Component: WorkbenchBlock,
+  defaultSettings() {
+    return {};
+  },
+}));