@multiplatform.one/frappe-ui 7.34.3 → 7.35.0

package/src/record/RecordPage.tsx

@@ -1,24 +1,25 @@
 import {
-  Breadcrumbs,
-  Chip,
+  Avatar,
+  DropdownMenu,
   H1,
-  PageHeader,
   PageSection,
   Quote,
   Screen,
-  ScreenToolbar,
   Tabs,
   Text,
-  Timeline,
-  Tooltip,
   XStack,
   YStack,
-  type TimelineEntry,
+  type DropdownMenuEntry,
 } from "@multiplatform.one/components";
 import { Button } from "@multiplatform.one/forms";
-import { useResolvedKnobs } from "@multiplatform.one/theme";
-import { ArrowLeftIcon, HeartIcon } from "@phosphor-icons/react";
-import type { ComponentType } from "react";
+import { formatAbsoluteDateTime, hairline, useResolvedKnobs } from "@multiplatform.one/theme";
+import {
+  CaretLeftIcon,
+  DotsThreeOutlineIcon,
+  HeartIcon,
+  PencilSimpleIcon,
+} from "@phosphor-icons/react";
+import type { ComponentType, ReactNode } from "react";
 import { useTranslation } from "react-i18next";
 import { frappeRouteHref } from "../frappeNavigation";
 import { metricValue, type FrappeInsightsMetric } from "../insights/insightsRecord";
@@ -29,15 +30,9 @@ import { recordTitle, type FrappeRecordLook } from "../list/recordLook";
 import { adjacentRecords, recordFacetValues, recordHistory } from "./recordData";
 import { RecordBars } from "./RecordBars";
 import { RecordGallery } from "./RecordGallery";
-import {
-  RecordHeroArtColumn,
-  RecordHeroFrame,
-  RecordHeroIdentityColumn,
-  RecordHeroRow,
-  RecordVitals,
-} from "./RecordHero";
+import { RecordHeroFrame, RecordHeroIdentityColumn, RecordVitals } from "./RecordHero";
 import { RecordPager, type RecordPagerEntry } from "./RecordPager";
-import { RecordRows } from "./RecordRows";
+import { RecordGroup, RecordRows } from "./RecordRows";
 import type { FrappeRecordSection, FrappeRecordTab } from "./recordSections";
 
 /** A hop from the record to another page of it (the backoffice form). */
@@ -73,10 +68,55 @@ export interface RecordPageProps<TDoc extends { name: string; doctype: string }>
   canEdit: boolean;
 }
 
+/** The record page's top bar: back to the list, then the heart and the menu. */
+export function RecordTopBar({
+  listName,
+  onBack,
+  slug,
+  trailing,
+}: {
+  listName: string;
+  onBack: () => void;
+  slug: string;
+  trailing?: ReactNode;
+}) {
+  const { t } = useTranslation();
+  const { knobProps } = useResolvedKnobs();
+  return (
+    <XStack
+      alignItems="center"
+      {...knobProps.gapSm}
+      paddingHorizontal={knobProps.gapSm.gap}
+      paddingVertical="$1"
+      {...hairline.bottom}
+      borderColor="$borderColor"
+      testID={`${slug}-detail-header`}
+    >
+      <Button
+        chromeless
+        minHeight={knobProps.sizeToken}
+        onPress={onBack}
+        icon={CaretLeftIcon}
+        flexShrink={1}
+        aria-label={t("Back to {{title}}", { title: listName })}
+        testID={`${slug}-detail-back`}
+      >
+        {listName}
+      </Button>
+      {trailing ? (
+        <XStack alignItems="center" justifyContent="flex-end" gap="$1" flexGrow={1} flexShrink={0}>
+          {trailing}
+        </XStack>
+      ) : null}
+    </XStack>
+  );
+}
+
 /**
- * A record page drawn from a record already read: the header with Back,
- * the heart, hops and Edit; the hero; the tabs; the neighbors. The data
- * wrapper (FrappeRecordView) reads the record, its rows and the rights.
+ * A record page drawn from a record already read: the top bar with Back, the
+ * heart and a menu of Edit and the hops; the tinted art stage; the identity
+ * block; the tabs; the neighbors. The data wrapper (FrappeRecordView) reads
+ * the record, its rows and the rights.
  */
 export function RecordPage<TDoc extends { name: string; doctype: string }>({
   doc,
@@ -101,7 +141,7 @@ export function RecordPage<TDoc extends { name: string; doctype: string }>({
 }: RecordPageProps<TDoc>) {
   const { t } = useTranslation();
   const { knobProps } = useResolvedKnobs();
-  const { knobProps: nested } = useResolvedKnobs({ compact: true });
+  const { knobProps: nested } = useResolvedKnobs();
   const row = doc as Row;
   const name = String(row.name ?? "");
   const { isFavorite, toggle } = useFavorites(
@@ -133,24 +173,7 @@ export function RecordPage<TDoc extends { name: string; doctype: string }>({
         }
       : null;
 
-  const entries: TimelineEntry[] = history
-    ? recordHistory(row).map((entry) =>
-        entry.kind === "modified"
-          ? {
-              id: `${name}-modified`,
-              type: "version",
-              author: entry.author,
-              timestamp: entry.timestamp,
-            }
-          : {
-              id: `${name}-created`,
-              type: "info",
-              author: entry.author,
-              content: t("Created this {{doctype}}", { doctype }),
-              timestamp: entry.timestamp,
-            },
-      )
-    : [];
+  const entries = history ? recordHistory(row) : [];
 
   const drawSection = (section: FrappeRecordSection, index: number) => {
     if (section.kind === "bars") {
@@ -160,6 +183,7 @@ export function RecordPage<TDoc extends { name: string; doctype: string }>({
           key={`bars-${section.id}`}
           rows={tableRows}
           section={section}
+          tint={tints[0]}
           testID={`${slug}-${section.id}-chart`}
         />
       );
@@ -169,7 +193,7 @@ export function RecordPage<TDoc extends { name: string; doctype: string }>({
       return (
         <YStack key={`rows-${index}`} {...knobProps.gap}>
           {section.description ? (
-            <Text {...nested.label} color="$color10">
+            <Text {...nested.label} color="$color11">
               {section.description}
             </Text>
           ) : null}
@@ -197,9 +221,14 @@ export function RecordPage<TDoc extends { name: string; doctype: string }>({
       value: tab.value,
       label: tab.label,
       icon: Icon ? <Icon size={16} /> : undefined,
-      badge: count > 0 ? <Chip size="$2">{count}</Chip> : undefined,
+      badge:
+        count > 0 ? (
+          <Text {...nested.label} color="$color11">
+            {count}
+          </Text>
+        ) : undefined,
       content: (
-        <YStack {...knobProps.gapLg}>
+        <YStack {...knobProps.gapLg} {...knobProps.panelPadding} paddingBottom={0}>
           {index === 0 && quote ? (
             <Quote marginVertical={0} cite={quote.cite}>
               {quote.text}
@@ -207,8 +236,24 @@ export function RecordPage<TDoc extends { name: string; doctype: string }>({
           ) : null}
           {tab.sections.map(drawSection)}
           {index === 0 && entries.length > 0 ? (
-            <PageSection title={t("Record history")} surface>
-              <Timeline entries={entries} labels={{ madeChanges: t("last updated this record") }} />
+            <PageSection title={t("History")} divider={false}>
+              <RecordGroup testID={`${slug}-history`}>
+                {entries.map((entry) => (
+                  <XStack key={entry.kind} alignItems="center" {...knobProps.gap}>
+                    <Avatar name={entry.author} size="$3" />
+                    <YStack flex={1} minWidth={0}>
+                      <Text {...nested.body} color="$color" numberOfLines={1}>
+                        {entry.kind === "created"
+                          ? t("Created by {{author}}", { author: entry.author })
+                          : t("Updated by {{author}}", { author: entry.author })}
+                      </Text>
+                      <Text {...nested.label} color="$color11">
+                        {formatAbsoluteDateTime(entry.timestamp)}
+                      </Text>
+                    </YStack>
+                  </XStack>
+                ))}
+              </RecordGroup>
             </PageSection>
           ) : null}
         </YStack>
@@ -216,142 +261,124 @@ export function RecordPage<TDoc extends { name: string; doctype: string }>({
     };
   });
 
-  const toolbar = (
-    <ScreenToolbar
-      leading={
+  const menu: DropdownMenuEntry[] = [
+    ...(canEdit
+      ? [
+          {
+            key: "edit",
+            label: t("Edit"),
+            icon: <PencilSimpleIcon size={18} />,
+            onSelect: () => navigate(frappeRouteHref(route, { mode: "edit", name })),
+          },
+        ]
+      : []),
+    ...actions.map((action) => {
+      const Icon = action.icon;
+      return {
+        key: action.testID ?? action.label,
+        label: action.label,
+        icon: <Icon size={18} />,
+        onSelect: () => navigate(action.href(doc)),
+      };
+    }),
+  ];
+
+  const trailing = (
+    <>
+      {favorites ? (
         <Button
-          outlined
+          circular
+          chromeless
+          minWidth={knobProps.sizeToken}
           minHeight={knobProps.sizeToken}
-          onPress={() => navigate(route)}
-          icon={<ArrowLeftIcon size={16} />}
-          testID={`${slug}-detail-back`}
-        >
-          {t("Back")}
-        </Button>
-      }
-      trailing={
-        <XStack {...knobProps.gap} alignItems="center">
-          {favorites || actions.length > 0 ? (
-            <XStack {...knobProps.borderRadius} backgroundColor="$color2" alignItems="center">
-              {favorites ? (
-                <Tooltip content={favoriteLabel}>
-                  <Button
-                    circular
-                    chromeless
-                    minWidth={knobProps.sizeToken}
-                    minHeight={knobProps.sizeToken}
-                    onPress={() => toggle(name)}
-                    col={(favorite ? "$red9" : "$color10") as never}
-                    icon={<HeartIcon size={22} weight={favorite ? "fill" : "regular"} />}
-                    aria-label={favoriteLabel}
-                    aria-pressed={favorite}
-                    render="button"
-                    type="button"
-                    testID={`${slug}-detail-favorite`}
-                  />
-                </Tooltip>
-              ) : null}
-              {actions.map((action) => {
-                const Icon = action.icon;
-                return (
-                  <Tooltip key={action.label} content={action.label}>
-                    <Button
-                      circular
-                      chromeless
-                      minWidth={knobProps.sizeToken}
-                      minHeight={knobProps.sizeToken}
-                      onPress={() => navigate(action.href(doc))}
-                      col={"$color10" as never}
-                      icon={<Icon size={20} />}
-                      aria-label={action.label}
-                      testID={action.testID}
-                    />
-                  </Tooltip>
-                );
-              })}
-            </XStack>
-          ) : null}
-          {canEdit ? (
-            <Button
-              theme="accent"
-              minHeight={knobProps.sizeToken}
-              onPress={() => navigate(frappeRouteHref(route, { mode: "edit", name }))}
-              testID={`${slug}-detail-edit`}
-            >
-              {t("Edit")}
-            </Button>
-          ) : null}
-        </XStack>
-      }
-    />
+          onPress={() => toggle(name)}
+          col={(favorite ? "$red9" : "$color11") as never}
+          icon={<HeartIcon size={24} weight={favorite ? "fill" : "regular"} />}
+          aria-label={favoriteLabel}
+          aria-pressed={favorite}
+          render="button"
+          type="button"
+          testID={`${slug}-detail-favorite`}
+        />
+      ) : null}
+      {menu.length > 0 ? (
+        <DropdownMenu items={menu} placement="bottom-end">
+          <Button
+            circular
+            chromeless
+            minWidth={knobProps.sizeToken}
+            minHeight={knobProps.sizeToken}
+            col={"$color" as never}
+            icon={<DotsThreeOutlineIcon size={22} weight="fill" />}
+            aria-label={t("More actions")}
+            testID={`${slug}-detail-more`}
+          />
+        </DropdownMenu>
+      ) : null}
+    </>
   );
 
   return (
-    <Screen>
-      <YStack gap="$2">
-        <Breadcrumbs
-          items={[{ label: listName, href: route }, { label: code ? `${code} ${title}` : title }]}
-          onNavigate={(href) => navigate(href)}
-        />
-        {toolbar}
-      </YStack>
+    <Screen noPadding gap={0}>
+      <RecordTopBar
+        listName={listName}
+        onBack={() => navigate(route)}
+        slug={slug}
+        trailing={trailing}
+      />
 
-      <RecordHeroFrame tint={tints[0]} testID={`${slug}-detail-stage`}>
-        <RecordHeroRow>
-          <RecordHeroArtColumn testID={`${slug}-hero-art`}>
-            <RecordGallery images={images} slides={slides} alt={title} tints={tints} />
-          </RecordHeroArtColumn>
-          <RecordHeroIdentityColumn testID={`${slug}-hero-identity`}>
-            {code ? (
-              <Text
-                {...nested.label}
-                fontWeight="700"
-                color={(tints[0] ? `$${tints[0]}11` : "$color11") as never}
-                letterSpacing={1}
-              >
-                {code}
-              </Text>
-            ) : null}
-            <PageHeader
-              heading={
-                <H1 margin={0} size="$10" $max-sm={{ size: "$9" }}>
-                  {title}
-                </H1>
-              }
-              subtitle={look?.subtitle?.(doc) || undefined}
-              divider={false}
-            />
-            {values.length > 0 ? (
-              <XStack gap="$2" flexWrap="wrap">
-                {values.map((value) => (
-                  <FacetBadge
-                    key={value}
-                    label={facet?.optionLabel?.(value) ?? value}
-                    tint={facet?.tint?.(value)}
-                  />
-                ))}
-              </XStack>
-            ) : null}
-            <RecordVitals
-              tiles={metrics.map((metric) => {
-                const value = metricValue(doc, metric.field);
-                return {
-                  id: metric.field,
-                  label: metric.label,
-                  value: metric.format ? metric.format(value) : String(value),
-                  percent: metric.max ? Math.min((value / metric.max) * 100, 100) : undefined,
-                };
-              })}
-            />
-          </RecordHeroIdentityColumn>
-        </RecordHeroRow>
+      <RecordHeroFrame tints={tints} testID={`${slug}-detail-stage`}>
+        <YStack testID={`${slug}-hero-art`}>
+          <RecordGallery images={images} slides={slides} alt={title} />
+        </YStack>
       </RecordHeroFrame>
 
-      <YStack {...knobProps.gapLg} paddingBottom="$6">
+      <RecordHeroIdentityColumn testID={`${slug}-hero-identity`}>
+        <XStack gap="$2" alignItems="center" flexWrap="wrap">
+          {code ? (
+            <Text
+              {...nested.label}
+              fontWeight="700"
+              color={(tints[0] ? `$${tints[0]}11` : "$color11") as never}
+            >
+              {code}
+            </Text>
+          ) : null}
+          {values.map((value) => (
+            <FacetBadge
+              key={value}
+              label={facet?.optionLabel?.(value) ?? value}
+              tint={facet?.tint?.(value)}
+            />
+          ))}
+        </XStack>
+        <H1 margin={0} size="$10">
+          {title}
+        </H1>
+        {look?.subtitle?.(doc) ? (
+          <Text {...nested.body} color="$color11">
+            {look.subtitle(doc)}
+          </Text>
+        ) : null}
+        <RecordVitals
+          tiles={metrics.map((metric) => {
+            const value = metricValue(doc, metric.field);
+            return {
+              id: metric.field,
+              label: metric.label,
+              value: metric.format ? metric.format(value) : String(value),
+            };
+          })}
+        />
+      </RecordHeroIdentityColumn>
+
+      <YStack {...knobProps.gapLg} paddingTop={knobProps.panelPadding.padding} paddingBottom="$6">
         {tabItems.length > 0 ? (
           <Tabs defaultValue={tabItems[0]?.value} lazyMount items={tabItems} />
         ) : null}
-        <RecordPager prev={pagerEntry(prev)} next={pagerEntry(next)} testID={slug} />
+        <YStack {...knobProps.panelPadding} paddingVertical={0}>
+          <RecordPager prev={pagerEntry(prev)} next={pagerEntry(next)} testID={slug} />
+        </YStack>
       </YStack>
     </Screen>
   );

package/src/record/RecordPager.tsx

@@ -21,7 +21,7 @@ function PagerButton({
   testID?: string;
 }) {
   const { t } = useTranslation();
-  const { knobProps: nested } = useResolvedKnobs({ compact: true });
+  const { knobProps: nested } = useResolvedKnobs();
   const isPrev = direction === "prev";
   const avatar = (
     <Avatar
@@ -53,7 +53,7 @@ function PagerButton({
           </Text>
           <XStack gap="$1.5" alignItems="baseline" minWidth={0}>
             {entry.code ? (
-              <Text {...nested.label} color="$color10" fontWeight="600">
+              <Text {...nested.label} color="$color10">
                 {entry.code}
               </Text>
             ) : null}

package/src/record/RecordRows.tsx

@@ -1,50 +1,91 @@
-import { Accordion, Card, Chip, Text, XStack, YStack } from "@multiplatform.one/components";
-import { useResolvedKnobs } from "@multiplatform.one/theme";
+import {
+  Accordion,
+  Chip,
+  TamaguiSizableText,
+  Text,
+  XStack,
+  YStack,
+  type YStackProps,
+} from "@multiplatform.one/components";
+import { hairline, useResolvedKnobs } from "@multiplatform.one/theme";
+import type { ReactNode } from "react";
 import { useTranslation } from "react-i18next";
 import { groupRows, sortRows } from "./recordData";
 import { slugWords, type FrappeRecordRowsSection } from "./recordSections";
 
 type Row = Record<string, unknown>;
 
-function RowTiles({ rows, section }: { rows: readonly Row[]; section: FrappeRecordRowsSection }) {
+/** The bordered surface the record page sets its groups and bars on. */
+export function RecordGroupFrame({ children, ...rest }: YStackProps & { children: ReactNode }) {
   const { knobProps } = useResolvedKnobs();
   return (
-    <XStack {...knobProps.gap} flexWrap="wrap">
+    <YStack {...knobProps.surface} {...knobProps.containerRadius} overflow="hidden" {...rest}>
+      {children}
+    </YStack>
+  );
+}
+
+/** A bordered group of rows split by hairlines, the record page's list shape. */
+export function RecordGroup({ children, testID }: { children: ReactNode[]; testID?: string }) {
+  const { knobProps } = useResolvedKnobs();
+  return (
+    <RecordGroupFrame testID={testID}>
+      {children.map((child, index) => (
+        <YStack
+          key={index}
+          {...knobProps.panelPadding}
+          {...(index === 0 ? undefined : hairline.top)}
+          borderColor="$borderColor"
+        >
+          {child}
+        </YStack>
+      ))}
+    </RecordGroupFrame>
+  );
+}
+
+function RowGroup({ rows, section }: { rows: readonly Row[]; section: FrappeRecordRowsSection }) {
+  const { knobProps } = useResolvedKnobs();
+  return (
+    <RecordGroup>
       {rows.map((row, index) => {
         const detail = section.detail ? Number(row[section.detail.field]) : 0;
         return (
-          <Card
+          <XStack
             key={typeof row.name === "string" ? row.name : index}
-            {...knobProps.cardSurface}
-            backgroundColor="$color2"
-            paddingVertical="$2"
-            paddingHorizontal="$3"
-            flexGrow={0}
+            alignItems="center"
+            {...knobProps.gap}
+            minWidth={0}
           >
-            <XStack alignItems="center" gap="$2">
-              <Text textTransform="capitalize" fontWeight="600">
-                {slugWords(String(row[section.field] ?? ""))}
+            <TamaguiSizableText
+              size="$4"
+              {...knobProps.heading}
+              flex={1}
+              minWidth={0}
+              numberOfLines={1}
+              textTransform="capitalize"
+            >
+              {slugWords(String(row[section.field] ?? ""))}
+            </TamaguiSizableText>
+            {section.flag && row[section.flag.field] ? (
+              <Chip size="$2" color="purple">
+                {section.flag.label}
+              </Chip>
+            ) : null}
+            {section.detail && detail > 0 ? (
+              <Text {...knobProps.label} color="$color11" flexShrink={0}>
+                {section.detail.label(detail)}
               </Text>
-              {section.flag && row[section.flag.field] ? (
-                <Chip size="$2" color="purple">
-                  {section.flag.label}
-                </Chip>
-              ) : null}
-              {section.detail && detail > 0 ? (
-                <Chip size="$2" color="blue">
-                  {section.detail.label(detail)}
-                </Chip>
-              ) : null}
-            </XStack>
-          </Card>
+            ) : null}
+          </XStack>
         );
       })}
-    </XStack>
+    </RecordGroup>
   );
 }
 
 /**
- * A record's linked rows as flat tiles that wrap, in the declared order,
+ * A record's linked rows as one bordered group in the declared order,
  * flagged and detailed per row; grouped, each group is an accordion section
  * with its count, the first open.
  */
@@ -59,32 +100,32 @@ export function RecordRows({
   const { knobProps } = useResolvedKnobs();
   if (rows.length === 0) {
     return (
-      <Text color="$color10" fontSize="$3">
+      <Text {...knobProps.label} color="$color11">
         {section.empty ?? t("None yet")}
       </Text>
     );
   }
   const sorted = sortRows(rows, section.orderBy ?? []);
-  if (!section.groupBy) return <RowTiles rows={sorted} section={section} />;
+  if (!section.groupBy) return <RowGroup rows={sorted} section={section} />;
   const groups = groupRows(sorted, section.groupBy.field);
   const groupValue = (value: string) => value || "other";
   return (
-    <YStack {...knobProps.gap}>
-      <Accordion type="multiple" defaultValue={[groupValue(groups[0]?.value ?? "")]}>
-        {groups.map((group) => (
-          <Accordion.Item key={groupValue(group.value)} value={groupValue(group.value)}>
-            <Accordion.Trigger>
-              <XStack alignItems="center" gap="$2" flexWrap="wrap">
-                <Text fontWeight="600">{section.groupBy?.label(group.value)}</Text>
-                <Chip size="$2">{group.rows.length}</Chip>
-              </XStack>
-            </Accordion.Trigger>
-            <Accordion.Content>
-              <RowTiles rows={group.rows} section={section} />
-            </Accordion.Content>
-          </Accordion.Item>
-        ))}
-      </Accordion>
-    </YStack>
+    <Accordion type="multiple" defaultValue={[groupValue(groups[0]?.value ?? "")]}>
+      {groups.map((group) => (
+        <Accordion.Item key={groupValue(group.value)} value={groupValue(group.value)}>
+          <Accordion.Trigger>
+            <XStack alignItems="center" gap="$2" flexWrap="wrap">
+              <TamaguiSizableText size="$4" {...knobProps.heading}>
+                {section.groupBy?.label(group.value)}
+              </TamaguiSizableText>
+              <Chip size="$2">{group.rows.length}</Chip>
+            </XStack>
+          </Accordion.Trigger>
+          <Accordion.Content>
+            <RowGroup rows={group.rows} section={section} />
+          </Accordion.Content>
+        </Accordion.Item>
+      ))}
+    </Accordion>
   );
 }

package/src/recordShape.spec.ts

@@ -26,6 +26,21 @@ const record = {
 };
 
 describe("recordShape", () => {
+  it.each(["/files/photo.png", "/private/files/photo.JPEG", "/files/a.webp", "/files/a.svg"])(
+    "recognizes a Frappe image: %s",
+    (image) => {
+      expect(fieldsFromRecord({ image })[0]?.fieldtype).toBe("Attach Image");
+    },
+  );
+
+  it.each([
+    "https://other.test/photo.png",
+    "/files/a.png?download=1",
+    "/files/a.pdf",
+    "/files/a.png#x",
+  ])("keeps other paths as data: %s", (image) => {
+    expect(fieldsFromRecord({ image })[0]?.fieldtype).toBe("Data");
+  });
   it("keeps a record's own scalar keys in server order", () => {
     expect(recordFieldKeys(record)).toEqual(["move_name", "power", "accuracy", "damage_class"]);
   });