@eightyfourthousand/lib-editing 2026.3.0

package/src/lib/components/shared/SuggestRevisionForm.tsx

@@ -0,0 +1,99 @@
+'use client';
+
+import { Button } from '@eightyfourthousand/design-system';
+import { parseToh } from '@eightyfourthousand/lib-utils';
+import { FormEvent, useState } from 'react';
+
+export const SuggestRevisionForm = ({
+  toh,
+  type,
+  label,
+  onClose,
+}: {
+  toh: string;
+  type: string;
+  label: string;
+  onClose: () => void;
+}) => {
+  const [body, setBody] = useState('');
+  const [status, setStatus] = useState<
+    'idle' | 'loading' | 'success' | 'error'
+  >('idle');
+  const [errorMessage, setErrorMessage] = useState('');
+
+  const handleSubmit = async (e: FormEvent) => {
+    e.preventDefault();
+
+    if (!body.trim()) {
+      setStatus('error');
+      setErrorMessage('Please enter a message.');
+      return;
+    }
+
+    setStatus('loading');
+    setErrorMessage('');
+
+    try {
+      const res = await fetch('/api/feedback', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ toh, type, label, body: body.trim() }),
+      });
+
+      if (!res.ok) {
+        const data = await res.json().catch(() => ({}));
+        throw new Error(data.error || 'Failed to send feedback');
+      }
+
+      setStatus('success');
+      setTimeout(() => onClose(), 1500);
+    } catch (err) {
+      setStatus('error');
+      setErrorMessage(
+        err instanceof Error ? err.message : 'Failed to send feedback',
+      );
+    }
+  };
+
+  return (
+    <div className="p-1">
+      <p className="text-sm font-semibold">Suggest a Revision</p>
+      <p className="text-secondary text-xs capitalize py-2">
+        {parseToh(toh)} &middot; {type} {label}
+      </p>
+      <form onSubmit={handleSubmit}>
+        <textarea
+          className="border-input bg-background placeholder:text-muted-foreground w-full rounded-md border px-3 py-2 text-sm shadow-xs focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring min-h-24 resize-y"
+          placeholder="Describe the revision you'd like to suggest..."
+          value={body}
+          onChange={(e) => {
+            setBody(e.target.value);
+            if (status === 'error') setStatus('idle');
+          }}
+        />
+        {status === 'error' && (
+          <p className="text-destructive text-sm mt-1">{errorMessage}</p>
+        )}
+        {status === 'success' && (
+          <p className="text-green-600 text-sm mt-1">
+            Feedback sent. Thank you!
+          </p>
+        )}
+        <div className="flex justify-end gap-2 mt-2">
+          <Button variant="outline" size="sm" type="button" onClick={onClose}>
+            Cancel
+          </Button>
+          <Button
+            variant="default"
+            size="sm"
+            type="submit"
+            className="px-3"
+            disabled={status === 'loading' || status === 'success'}
+          >
+            {status === 'loading' ? 'Sending...' : 'Submit'}
+          </Button>
+        </div>
+      </form>
+    </div>
+  );
+};

package/src/lib/components/shared/TableOfContents.tsx

@@ -0,0 +1,280 @@
+'use client';
+
+import { Toc, TocEntry, TohokuCatalogEntry, Work } from '@eightyfourthousand/data-access';
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+  Separator,
+} from '@eightyfourthousand/design-system';
+import { cn, parseToh } from '@eightyfourthousand/lib-utils';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useNavigation } from './NavigationProvider';
+import {
+  PanelName,
+  TAB_FOR_SECTION,
+  PANEL_FOR_SECTION,
+} from './types';
+import { BookOpenIcon, HashIcon, LibraryBigIcon } from 'lucide-react';
+
+export const TableOfContentsSection = ({
+  node,
+  className,
+  depth = 0,
+  panel,
+}: {
+  node: TocEntry;
+  className?: string;
+  depth?: number;
+  panel?: PanelName;
+}) => {
+  const { updatePanel } = useNavigation();
+
+  const baseStyle =
+    'w-full py-0.75 font-light leading-5 text-sm hover:text-foreground/40 hover:no-underline hover:cursor-pointer';
+
+  const onClick = useCallback(
+    (entry: TocEntry) => {
+      const { section } = entry;
+      updatePanel({
+        name: PANEL_FOR_SECTION[section] || panel,
+        state: {
+          open: true,
+          tab: TAB_FOR_SECTION[section] || 'translation',
+          hash: entry.uuid,
+        },
+      });
+    },
+    [updatePanel, panel],
+  );
+
+  if (!node.children?.length) {
+    return null;
+  }
+
+  return (
+    <Accordion type="multiple" className={cn(depth && 'pl-2.5')}>
+      {node.children.map((child) => {
+        // 'The Translation' is always bold
+        const maybeBold =
+          child.content === 'The Translation' ? 'font-bold' : '';
+        return child.children?.length ? (
+          <AccordionItem
+            key={child.uuid}
+            value={child.uuid}
+            className="border-b-0"
+          >
+            <AccordionTrigger className={cn(baseStyle, className)}>
+              <span
+                className={cn('line-clamp-2', maybeBold)}
+                onClick={() => onClick(child)}
+              >
+                {child.content}
+              </span>
+            </AccordionTrigger>
+            <AccordionContent className="border-l border-dotted py-0">
+              <TableOfContentsSection node={child} depth={depth + 1} />
+            </AccordionContent>
+          </AccordionItem>
+        ) : (
+          <div key={child.uuid} className={baseStyle}>
+            <span
+              className={cn('line-clamp-2', maybeBold)}
+              onClick={() => onClick(child)}
+            >
+              {child.content}
+            </span>
+          </div>
+        );
+      })}
+    </Accordion>
+  );
+};
+
+export const TableOfContents = ({
+  toc,
+  work,
+  limitWhenNoTranslation = false,
+}: {
+  toc?: Toc;
+  work: Work;
+  limitWhenNoTranslation?: boolean;
+}) => {
+  const {
+    toh,
+    imprint,
+    setToh,
+    hasTranslationContent,
+    setHasTranslationContent,
+  } = useNavigation();
+  const [localToh, setLocalToh] = useState<TohokuCatalogEntry>(
+    work.toh[0] || '',
+  );
+
+  const title = imprint?.mainTitles?.en || work.title;
+
+  useEffect(() => {
+    const currentToh = toh || work.toh[0] || '';
+    setLocalToh(currentToh);
+  }, [toh, work.toh, setToh]);
+
+  const baseStyle = 'w-full py-2 leading-6 text-sm font-light text-foreground';
+  const inferredHasTranslationContent = useMemo(() => {
+    if (!toc) {
+      return hasTranslationContent;
+    }
+    return (toc.body?.length || 0) > 0;
+  }, [toc, hasTranslationContent]);
+  const allowTranslationSections = limitWhenNoTranslation
+    ? inferredHasTranslationContent
+    : true;
+  const imprintEntry: TocEntry = {
+    uuid: 'imprint',
+    content: 'Imprint',
+    sort: 0,
+    level: 0,
+    section: 'imprint',
+    children: [],
+  };
+  const frontMatterChildren = allowTranslationSections
+    ? [imprintEntry, ...(toc?.frontMatter || [])]
+    : [imprintEntry];
+  const frontMatter: TocEntry = {
+    uuid: 'front-matter',
+    content: 'Front Matter',
+    sort: 0,
+    level: 0,
+    section: 'front',
+    children: frontMatterChildren,
+  };
+  const body: TocEntry = {
+    uuid: 'root',
+    content: 'Body',
+    sort: 0,
+    level: 0,
+    section: 'translation',
+    children: toc?.body || [],
+  };
+
+  const endnotes = toc?.backMatter?.find(
+    (entry) => entry.section === 'endnotes',
+  );
+  const abbreviations = toc?.backMatter?.find(
+    (entry) => entry.section === 'abbreviations',
+  );
+  const otherBackMatter = toc?.backMatter?.filter(
+    (entry) =>
+      entry.section !== 'endnotes' && entry.section !== 'abbreviations',
+  );
+  const backMatter: TocEntry = {
+    uuid: 'back-matter',
+    content: 'Back Matter',
+    sort: 0,
+    level: 0,
+    section: 'back',
+    children: [
+      ...(endnotes ? [endnotes] : []),
+      ...(otherBackMatter || []),
+      {
+        uuid: 'glossary',
+        content: 'Glossary',
+        sort: 0,
+        level: 0,
+        section: 'glossary',
+        children: [],
+      },
+      {
+        uuid: 'bibliography',
+        content: 'Bibliography',
+        sort: 0,
+        level: 0,
+        section: 'bibliography',
+        children: [],
+      },
+      ...(abbreviations ? [abbreviations] : []),
+    ],
+  };
+
+  useEffect(() => {
+    if (!toc || !limitWhenNoTranslation) {
+      return;
+    }
+    setHasTranslationContent(inferredHasTranslationContent);
+  }, [
+    toc,
+    inferredHasTranslationContent,
+    limitWhenNoTranslation,
+    setHasTranslationContent,
+  ]);
+
+  return (
+    <div>
+      <div className={cn(baseStyle, 'flex gap-2 mt-6')}>
+        <div className="size-5 text-primary-200 [&_svg]:stroke-1 [&_svg]:size-5 my-auto">
+          <LibraryBigIcon />
+        </div>
+        <span className="my-auto font-light">
+          {imprint?.section || work.section}
+        </span>
+      </div>
+      <div className={cn(baseStyle, 'flex gap-2')}>
+        <div className="size-5 text-primary-200 [&_svg]:stroke-1 [&_svg]:size-5 my-auto">
+          <BookOpenIcon />
+        </div>
+        <span className="my-auto font-semibold">{title}</span>
+      </div>
+      <div className="flex gap-2">
+        <div className="size-5 text-primary-200 [&_svg]:stroke-1 [&_svg]:size-5 my-auto">
+          <HashIcon />
+        </div>
+        {work.toh.length > 1 ? (
+          <Select
+            value={localToh}
+            onValueChange={(value) => {
+              setToh(value as TohokuCatalogEntry);
+            }}
+          >
+            <SelectTrigger
+              className={cn(
+                baseStyle,
+                'p-0 font-light bg-transparent border-none',
+              )}
+            >
+              <SelectValue placeholder="Select TOH" />
+            </SelectTrigger>
+            <SelectContent>
+              {work.toh.map((tohEntry) => {
+                const parsedToh = parseToh(tohEntry);
+                return (
+                  <SelectItem key={tohEntry} value={tohEntry}>
+                    {parsedToh}
+                  </SelectItem>
+                );
+              })}
+            </SelectContent>
+          </Select>
+        ) : (
+          <div className={cn(baseStyle, 'font-light')}>
+            {parseToh(localToh || '')}
+          </div>
+        )}
+      </div>
+      <Separator className="my-4" />
+      <TableOfContentsSection node={frontMatter} panel="left" />
+      {allowTranslationSections && (
+        <>
+          <Separator className="my-4" />
+          <TableOfContentsSection node={body} panel="main" />
+          <Separator className="my-4" />
+          <TableOfContentsSection node={backMatter} panel="right" />
+        </>
+      )}
+    </div>
+  );
+};

package/src/lib/components/shared/ThreeColumnRenderer.tsx

@@ -0,0 +1,54 @@
+'use client';
+
+import { ThreeColumns } from '@eightyfourthousand/design-system';
+import { ReactNode } from 'react';
+import { useNavigation } from './NavigationProvider';
+import { cn } from '@eightyfourthousand/lib-utils';
+import { TranslationHeader } from './TranslationHeader';
+
+export const ThreeColumnRenderer = ({
+  withHeader = false,
+  children,
+}: {
+  withHeader?: boolean;
+  children: ReactNode;
+}) => {
+  const { panels, updatePanel, hasTranslationContent } = useNavigation();
+  const rightPanelEnabled = hasTranslationContent;
+
+  return (
+    <div
+      className={cn(
+        'fixed flex flex-col size-full p-2 bg-canvas',
+        withHeader ? 'pb-20' : '',
+      )}
+    >
+      <div className="pb-2.5">
+        <TranslationHeader className="rounded-full shadow-lg" />
+      </div>
+      <ThreeColumns
+        leftPanelOpen={panels.left.open}
+        rightPanelOpen={rightPanelEnabled ? panels.right.open : false}
+        rightPanelEnabled={rightPanelEnabled}
+        onLeftPanelOpenChange={(open) => {
+          updatePanel({
+            name: 'left',
+            state: { open, tab: panels.left.tab },
+          });
+        }}
+        onRightPanelOpenChange={
+          rightPanelEnabled
+            ? (open) => {
+                updatePanel({
+                  name: 'right',
+                  state: { open, tab: panels.right.tab },
+                });
+              }
+            : undefined
+        }
+      >
+        {children}
+      </ThreeColumns>
+    </div>
+  );
+};

package/src/lib/components/shared/TranslationHeader.tsx

@@ -0,0 +1,86 @@
+'use client';
+
+import { MiniLogo } from '@eightyfourthousand/design-system';
+import { PassageMatch, SearchButton, SearchResult } from '@eightyfourthousand/lib-search';
+import { useNavigation } from './NavigationProvider';
+import { useCallback } from 'react';
+import { PanelName, PanelState, TabName } from './types';
+import { BodyItemType } from '@eightyfourthousand/data-access';
+import { cn } from '@eightyfourthousand/lib-utils';
+
+export const TranslationHeader = ({ className }: { className?: string }) => {
+  const { imprint, uuid, toh, updatePanel } = useNavigation();
+
+  const onResultSelected = useCallback(
+    (result: SearchResult) => {
+      let side: PanelName = 'main';
+      const panelState: PanelState = {
+        open: true,
+        hash: result.uuid,
+      };
+
+      const TAB_FOR_PASSAGE_SECTION: Partial<Record<BodyItemType, TabName>> = {
+        abbreviations: 'abbreviations',
+        endnotes: 'endnotes',
+        summary: 'front',
+        introduction: 'front',
+        acknowledgements: 'front',
+      };
+
+      const SIDE_FOR_PASSAGE_SECTION: Partial<Record<BodyItemType, PanelName>> =
+        {
+          abbreviations: 'right',
+          endnotes: 'right',
+        };
+
+      switch (result.type) {
+        case 'passage':
+          {
+            const passage = result as PassageMatch;
+            side = SIDE_FOR_PASSAGE_SECTION[passage.section] || 'main';
+            panelState.tab =
+              TAB_FOR_PASSAGE_SECTION[passage.section] || 'translation';
+          }
+          break;
+        case 'alignment':
+          side = 'main';
+          panelState.tab = 'compare';
+          break;
+        case 'bibliography':
+          side = 'right';
+          panelState.tab = 'bibliography';
+          break;
+        case 'glossary':
+          side = 'right';
+          panelState.tab = 'glossary';
+          break;
+      }
+
+      updatePanel({
+        name: side,
+        state: panelState,
+      });
+    },
+    [updatePanel],
+  );
+  return (
+    <div
+      className={cn(
+        'h-11 w-full px-0 lg:px-3 flex justify-between text-lg bg-background',
+        className,
+      )}
+    >
+      <div className="flex gap-2 md:gap-5 min-w-0">
+        <MiniLogo className="ms-3 me-1 my-auto" width={32} height={32} />
+        <span className="font-serif font-light truncate text-darkgray text-xs sm:text-sm my-auto flex-shrink">
+          {`${imprint?.mainTitles?.en ? `${imprint?.mainTitles?.en}` : ''}${imprint?.section ? ` from ${imprint?.section}` : ''}`}
+        </span>
+      </div>
+      <SearchButton
+        workUuid={uuid}
+        toh={toh}
+        onResultSelected={onResultSelected}
+      />
+    </div>
+  );
+};

package/src/lib/components/shared/TranslationHoverCard.tsx

@@ -0,0 +1,84 @@
+import {
+  autoUpdate,
+  flip,
+  inline,
+  offset,
+  shift,
+  useFloating,
+} from '@floating-ui/react';
+import { ReactNode, useEffect, useRef, useState } from 'react';
+import { cn } from '@eightyfourthousand/lib-utils';
+import { DEFAULT_HOVER_CARD_SIDE_OFFSET } from '@eightyfourthousand/design-system';
+
+export const TranslationHoverCard = ({
+  anchor,
+  className = '',
+  children,
+  setCard,
+}: {
+  anchor: HTMLElement;
+  className?: string;
+  children: ReactNode;
+  setCard: (card: HTMLElement | null) => void;
+}) => {
+  const [isVisible, setIsVisible] = useState(false);
+
+  const { refs, floatingStyles } = useFloating({
+    placement: 'bottom-start',
+    middleware: [
+      inline(),
+      offset(DEFAULT_HOVER_CARD_SIDE_OFFSET),
+      flip(),
+      shift(),
+    ],
+    whileElementsMounted: autoUpdate,
+  });
+
+  const innerRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    refs.setReference(anchor);
+  }, [anchor, refs]);
+
+  useEffect(() => {
+    setCard(innerRef.current);
+
+    return () => {
+      setCard(null);
+    };
+  }, [innerRef, setCard]);
+
+  useEffect(() => {
+    if (!refs.floating.current) {
+      return;
+    }
+
+    requestAnimationFrame(() => {
+      setIsVisible(true);
+    });
+
+    return () => {
+      setIsVisible(false);
+    };
+  }, [refs]);
+
+  return (
+    <div
+      ref={refs.setFloating}
+      style={{ ...floatingStyles, pointerEvents: 'auto', cursor: 'default' }}
+      className="z-100"
+    >
+      <div
+        ref={innerRef}
+        className={cn(
+          'bg-popover text-popover-foreground rounded-md border p-4 shadow-md outline-hidden hover:cursor-default',
+          'transition-[opacity,scale] duration-150 origin-center ease-out',
+          isVisible ? 'opacity-100 scale-100' : 'opacity-0 scale-99',
+          className,
+        )}
+      >
+        {children}
+      </div>
+    </div>
+  );
+};

package/src/lib/components/shared/TranslationSkeleton.tsx

@@ -0,0 +1,16 @@
+import { Skeleton } from '@eightyfourthousand/design-system';
+import { cn } from '@eightyfourthousand/lib-utils';
+
+export const TranslationSkeleton = ({ className }: { className?: string }) => {
+  return (
+    <div className={cn('flex h-full', className)}>
+      <div className="flex flex-col gap-6 pt-8">
+        <Skeleton className="h-12 mb-4" />
+        <Skeleton className="h-20 w-1/2" />
+        <Skeleton className="h-48" />
+        <Skeleton className="h-24 w-5/6" />
+        <Skeleton className="h-64" />
+      </div>
+    </div>
+  );
+};