@pylonsync/create-pylon 0.19.0 → 0.20.0

package/templates/crm/app/deals/[id]/deal-view.tsx

@@ -2,7 +2,7 @@
 
 import React from "react";
 import { Link, callFn, db, useRouter } from "@pylonsync/react";
-import { ArrowLeft, Trash2 } from "lucide-react";
+import { ChevronRight, Trash2 } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Select } from "@/components/ui/select";
 import { PageHeader } from "@/components/page-header";
@@ -10,7 +10,7 @@ import { EmptyState } from "@/components/empty-state";
 import { ActivityTimeline } from "@/components/activity-timeline";
 import { StageBadge } from "@/components/stage-badge";
 import { Avatar } from "@/components/avatar";
-import { PIPELINE, daysUntil, money, relativeTime } from "@/lib/pipeline";
+import { PIPELINE, closeDue, money, relativeTime, shortDate } from "@/lib/pipeline";
 import { RequireAuth } from "@/components/require-auth";
 import { Workspace } from "../../workspace";
 
@@ -18,7 +18,7 @@ export function DealView({ dealId }: { dealId: string }) {
   const router = useRouter();
 
   return (
-    <RequireAuth title="CRM" description="Your team shares one pipeline. Anyone with an account sees it.">
+    <RequireAuth>
       <Workspace pathname="/">
       {(data) => {
         const deal = data.deals.find((d) => d.id === dealId);
@@ -28,7 +28,7 @@ export function DealView({ dealId }: { dealId: string }) {
             <>
               <PageHeader title="Deal" />
               <EmptyState
-                title={data.loading ? "Loading…" : "Deal not found"}
+                title={data.loading ? "Loading deal…" : "Deal not found"}
                 description={
                   data.loading
                     ? undefined
@@ -48,11 +48,24 @@ export function DealView({ dealId }: { dealId: string }) {
 
         const contact = data.contacts.find((c) => c.id === deal.contactId);
         const activities = data.activities.filter((a) => a.dealId === deal.id);
-        const days = daysUntil(deal.closeDate);
+        const due = closeDue(deal);
+        const owner = data.ownerName(deal.ownerId);
+        const company = data.companyName(deal.companyId);
 
         return (
           <>
-            <PageHeader title={deal.title}>
+            <PageHeader
+              title={deal.title}
+              leading={
+                <Link
+                  href="/"
+                  className="hidden items-center gap-1 text-[13px] text-muted-foreground transition-colors hover:text-foreground md:inline-flex"
+                >
+                  Pipeline
+                  <ChevronRight className="size-3.5" />
+                </Link>
+              }
+            >
               <Button
                 size="sm"
                 variant="ghost"
@@ -63,109 +76,135 @@ export function DealView({ dealId }: { dealId: string }) {
                 className="text-muted-foreground hover:text-destructive"
               >
                 <Trash2 />
-                Delete
+                <span className="max-sm:sr-only">Delete</span>
               </Button>
             </PageHeader>
 
             <div className="min-h-0 flex-1 overflow-y-auto">
-              <div className="mx-auto flex max-w-3xl flex-col gap-6 px-6 py-6">
-                <Link
-                  href="/"
-                  className="inline-flex w-fit items-center gap-1.5 text-[12px] text-muted-foreground transition-colors hover:text-foreground"
-                >
-                  <ArrowLeft className="size-3.5" />
-                  Pipeline
-                </Link>
-
-                <div className="flex flex-wrap items-baseline gap-x-4 gap-y-2">
-                  <h1 className="text-[22px] font-semibold tracking-tight">
-                    {deal.title}
-                  </h1>
-                  <span className="tabular text-[18px] font-medium text-muted-foreground">
-                    {money(deal.value)}
-                  </span>
-                </div>
+              <div className="mx-auto grid max-w-5xl gap-6 px-4 py-5 md:px-8 md:py-8 lg:grid-cols-[minmax(0,1fr)_280px] lg:gap-10">
+                <div className="min-w-0 space-y-6">
+                  <div>
+                    <div className="mb-2 flex items-center gap-2 text-[12.5px]">
+                      <StageBadge stage={deal.stage} />
+                      {company ? (
+                        <>
+                          <span aria-hidden="true" className="text-muted-foreground/60">·</span>
+                          <span className="truncate text-muted-foreground">{company}</span>
+                        </>
+                      ) : null}
+                    </div>
+                    <h2 className="text-[22px] font-semibold leading-tight tracking-[-0.02em] md:text-[26px]">
+                      {deal.title}
+                    </h2>
+                    <p className="tabular mt-1.5 text-[20px] font-medium tracking-[-0.01em] text-muted-foreground">
+                      {money(deal.value)}
+                    </p>
+                  </div>
 
-                <dl className="grid grid-cols-2 gap-x-6 gap-y-4 rounded-lg border border-border bg-card p-4 sm:grid-cols-4">
-                  <Field label="Stage">
-                    {/* Changing stage here goes through the same mutation the
-                        board uses, so it's logged identically. */}
-                    <Select
-                      aria-label="Stage"
-                      value={deal.stage}
-                      className="h-7 text-[12px]"
-                      onChange={(event) =>
-                        void callFn("moveDeal", {
+                  <section aria-labelledby="activity-heading">
+                    <h3 id="activity-heading" className="mb-3 text-[13px] font-semibold">
+                      Activity
+                      <span className="tabular ml-1.5 font-normal text-muted-foreground">
+                        {activities.length}
+                      </span>
+                    </h3>
+                    <ActivityTimeline
+                      activities={activities}
+                      ownerName={data.ownerName}
+                      onLog={(kind, body) =>
+                        callFn("logActivity", {
+                          kind,
+                          body,
                           dealId: deal.id,
-                          stage: event.target.value,
+                          ...(deal.companyId ? { companyId: deal.companyId } : {}),
                         })
                       }
-                    >
-                      {PIPELINE.map((stage) => (
-                        <option key={stage.id} value={stage.id}>
-                          {stage.label}
-                        </option>
-                      ))}
-                    </Select>
-                  </Field>
+                    />
+                  </section>
+                </div>
 
-                  <Field label="Company">
-                    {data.companyName(deal.companyId) ?? "—"}
-                  </Field>
+                <aside className="order-first lg:order-none">
+                  <dl className="grid grid-cols-2 gap-x-4 gap-y-4 rounded-xl border border-border bg-surface-1 p-4 lg:grid-cols-1">
+                    <Field label="Stage">
+                      {/* The same mutation the board uses, so a change here
+                          is logged the same way. */}
+                      <Select
+                        aria-label="Stage"
+                        value={deal.stage}
+                        className="h-8 bg-background md:h-7.5"
+                        onChange={(event) =>
+                          void callFn("moveDeal", {
+                            dealId: deal.id,
+                            stage: event.target.value,
+                          })
+                        }
+                      >
+                        {PIPELINE.map((stage) => (
+                          <option key={stage.id} value={stage.id}>
+                            {stage.label}
+                          </option>
+                        ))}
+                      </Select>
+                    </Field>
 
-                  <Field label="Contact">
-                    {contact ? (
-                      <span className="flex items-center gap-1.5">
-                        <Avatar name={contact.name} size="sm" />
-                        {contact.name}
-                      </span>
-                    ) : (
-                      "—"
-                    )}
-                  </Field>
+                    <Field label="Owner">
+                      {owner ? (
+                        <span className="flex min-w-0 items-center gap-2">
+                          <Avatar name={owner} size="sm" />
+                          <span className="truncate">{owner}</span>
+                        </span>
+                      ) : (
+                        "—"
+                      )}
+                    </Field>
 
-                  <Field label="Expected close">
-                    {deal.closeDate ? (
-                      <span className={days !== null && days < 0 ? "text-destructive" : ""}>
-                        {new Date(deal.closeDate).toLocaleDateString("en-US", {
-                          month: "short",
-                          day: "numeric",
-                          year: "numeric",
-                        })}
-                      </span>
-                    ) : (
-                      "—"
-                    )}
-                  </Field>
-                </dl>
+                    <Field label="Company">{company ?? "—"}</Field>
 
-                <div className="flex items-center gap-3 text-[12px] text-muted-foreground">
-                  <StageBadge stage={deal.stage} />
-                  <span aria-hidden="true">·</span>
-                  <span>Created {relativeTime(deal.createdAt)}</span>
-                  {data.ownerName(deal.ownerId) ? (
-                    <>
-                      <span aria-hidden="true">·</span>
-                      <span>Owned by {data.ownerName(deal.ownerId)}</span>
-                    </>
-                  ) : null}
-                </div>
+                    <Field label="Contact">
+                      {contact ? (
+                        <span className="flex min-w-0 items-center gap-2">
+                          <Avatar name={contact.name} size="sm" />
+                          <span className="min-w-0">
+                            <span className="block truncate">{contact.name}</span>
+                            {contact.email ? (
+                              <a
+                                href={`mailto:${contact.email}`}
+                                className="block truncate text-[12px] text-muted-foreground hover:text-foreground"
+                              >
+                                {contact.email}
+                              </a>
+                            ) : null}
+                          </span>
+                        </span>
+                      ) : (
+                        "—"
+                      )}
+                    </Field>
+
+                    <Field label="Expected close">
+                      {deal.closeDate ? (
+                        <span className="flex items-center gap-2">
+                          <span className="tabular">{shortDate(deal.closeDate)}</span>
+                          {due ? (
+                            <span
+                              className={
+                                due.tone === "overdue"
+                                  ? "text-[12px] font-medium text-destructive"
+                                  : "text-[12px] text-muted-foreground"
+                              }
+                            >
+                              {due.label}
+                            </span>
+                          ) : null}
+                        </span>
+                      ) : (
+                        "—"
+                      )}
+                    </Field>
 
-                <section>
-                  <h2 className="mb-3 text-[13px] font-semibold">Activity</h2>
-                  <ActivityTimeline
-                    activities={activities}
-                    ownerName={data.ownerName}
-                    onLog={(kind, body) =>
-                      callFn("logActivity", {
-                        kind,
-                        body,
-                        dealId: deal.id,
-                        ...(deal.companyId ? { companyId: deal.companyId } : {}),
-                      })
-                    }
-                  />
-                </section>
+                    <Field label="Created">{relativeTime(deal.createdAt)}</Field>
+                  </dl>
+                </aside>
               </div>
             </div>
           </>
@@ -185,8 +224,8 @@ function Field({
 }) {
   return (
     <div className="min-w-0">
-      <dt className="text-[11px] text-muted-foreground">{label}</dt>
-      <dd className="mt-1 truncate text-[13px]">{children}</dd>
+      <dt className="text-[11.5px] font-medium text-muted-foreground">{label}</dt>
+      <dd className="mt-1 min-w-0 truncate text-[13px]">{children}</dd>
     </div>
   );
 }

package/templates/crm/app/deals/[id]/page.tsx

@@ -1,9 +1,10 @@
 import React from "react";
 import type { Metadata, PageProps } from "@pylonsync/react";
+import { BRAND } from "@/lib/brand";
 import { DealView } from "./deal-view";
 
 export const metadata: Metadata = {
-  title: "Deal",
+  title: `Deal · ${BRAND.name}`,
   robots: "noindex",
 };
 

package/templates/crm/app/globals.css

@@ -9,15 +9,21 @@
 /* ---------------------------------------------------------------------------
    Design tokens.
 
-   Tuned for a dense internal tool rather than a marketing page: a near-neutral
-   surface ramp, hairline borders instead of shadows, and one accent used
-   sparingly so status colour still means something. Dark is the primary theme —
-   `app/layout.tsx` sets `class="dark"` — and light is a real, tested
-   alternative, not an afterthought.
+   Tuned for a dense internal tool: a near-neutral surface ramp, hairline
+   borders instead of shadows, and one accent used sparingly so status colour
+   still means something. Light is the default; `.dark` holds a complete dark
+   set (add `class="dark"` to <html> in app/layout.tsx to switch).
 
-   These are the same variable names shadcn/ui generates against, so
+   These are the variable names shadcn/ui generates against, so
    `npx shadcn@latest add <component>` drops in already themed.
 --------------------------------------------------------------------------- */
+:root {
+  /* The brand accent: primary buttons, the brand mark, focus rings, and the
+     active nav icon. Change these two lines to re-colour the product. */
+  --brand: oklch(0.52 0.2 272);
+  --brand-dark: oklch(0.64 0.17 272);
+}
+
 :root {
   --radius: 0.5rem;
 
@@ -28,7 +34,7 @@
   --popover: oklch(1 0 0);
   --popover-foreground: var(--foreground);
 
-  --primary: oklch(0.55 0.204 274.5);
+  --primary: var(--brand);
   --primary-foreground: oklch(1 0 0);
   --secondary: oklch(0.968 0.002 286.4);
   --secondary-foreground: oklch(0.27 0.006 286);
@@ -40,7 +46,7 @@
 
   --border: oklch(0.918 0.004 286.3);
   --input: oklch(0.918 0.004 286.3);
-  --ring: oklch(0.55 0.204 274.5);
+  --ring: var(--brand);
 
   /* Surfaces above the page: sidebar, popovers, hover rows. */
   --surface-1: oklch(0.985 0.001 286.4);
@@ -51,6 +57,7 @@
   --stage-lead: oklch(0.62 0.03 264);
   --stage-qualified: oklch(0.6 0.13 240);
   --stage-proposal: oklch(0.68 0.15 78);
+  --stage-negotiation: oklch(0.64 0.16 45);
   --stage-won: oklch(0.6 0.15 155);
   --stage-lost: oklch(0.6 0.11 25);
 }
@@ -63,7 +70,7 @@
   --popover: oklch(0.216 0.006 285.9);
   --popover-foreground: var(--foreground);
 
-  --primary: oklch(0.62 0.19 274.5);
+  --primary: var(--brand-dark);
   --primary-foreground: oklch(1 0 0);
   --secondary: oklch(0.25 0.006 286);
   --secondary-foreground: oklch(0.93 0.002 286.3);
@@ -75,7 +82,7 @@
 
   --border: oklch(1 0 0 / 9%);
   --input: oklch(1 0 0 / 12%);
-  --ring: oklch(0.62 0.19 274.5);
+  --ring: var(--brand-dark);
 
   --surface-1: oklch(0.186 0.004 285.9);
   --surface-2: oklch(0.216 0.006 285.9);
@@ -83,6 +90,7 @@
   --stage-lead: oklch(0.68 0.03 264);
   --stage-qualified: oklch(0.68 0.13 240);
   --stage-proposal: oklch(0.75 0.14 78);
+  --stage-negotiation: oklch(0.72 0.15 45);
   --stage-won: oklch(0.7 0.15 155);
   --stage-lost: oklch(0.68 0.14 25);
 }
@@ -118,6 +126,7 @@
   --color-stage-lead: var(--stage-lead);
   --color-stage-qualified: var(--stage-qualified);
   --color-stage-proposal: var(--stage-proposal);
+  --color-stage-negotiation: var(--stage-negotiation);
   --color-stage-won: var(--stage-won);
   --color-stage-lost: var(--stage-lost);
 }
@@ -143,15 +152,21 @@
     height: 100%;
     background-color: var(--color-background);
     color: var(--color-foreground);
-    /* 13px is the density these screens are designed at; the slight negative
-       tracking is what keeps Inter from looking loose at that size. */
-    font-size: 13px;
+    /* 14px on phones, 13px from the md breakpoint up: the density these
+       screens are designed at on a desktop. */
+    font-size: 14px;
     line-height: 1.5;
-    letter-spacing: -0.006em;
+    letter-spacing: -0.003em;
     -webkit-font-smoothing: antialiased;
     text-rendering: optimizeLegibility;
   }
 
+  @media (min-width: 768px) {
+    body {
+      font-size: 13px;
+    }
+  }
+
   button {
     cursor: pointer;
   }

package/templates/crm/app/icon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><rect width="32" height="32" rx="8" fill="#4556d9"/><g fill="#fff"><rect x="6" y="7.5" width="20" height="4" rx="2"/><rect x="9" y="14" width="14" height="4" rx="2"/><rect x="12" y="20.5" width="8" height="4" rx="2"/></g></svg>

package/templates/crm/app/layout.tsx

@@ -18,12 +18,14 @@ export default function RootLayout({ children }: LayoutProps) {
     <html lang="en">
       <head>
         <meta charSet="utf-8" />
-        <meta name="viewport" content="width=device-width, initial-scale=1" />
-        <title>__APP_NAME__</title>
+        <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
+        {/* No <title> here: each page's `metadata` sets "<Page> · <Brand>".
+            A title in the layout renders first and wins over the page's. */}
         {/* Tailwind is compiled by Pylon from app/globals.css and the
-            stylesheet link is injected here automatically. Inter is declared in
-            app.ts (fonts: [...]) and self-hosted by the build — @font-face, the
-            preload link, and a size-adjusted fallback are injected too. */}
+            stylesheet link is injected here automatically. The typeface is
+            declared in app.ts (fonts: [...]) and self-hosted by the build;
+            @font-face, the preload link, and a size-adjusted fallback are
+            injected too. */}
       </head>
       <body className="h-full">{children}</body>
     </html>

package/templates/crm/app/page.tsx

@@ -1,9 +1,10 @@
 import React from "react";
 import type { Metadata, PageProps } from "@pylonsync/react";
+import { BRAND } from "@/lib/brand";
 import { PipelineView } from "./pipeline-view";
 
 export const metadata: Metadata = {
-  title: "Pipeline",
+  title: `Pipeline · ${BRAND.name}`,
   robots: "noindex",
 };
 

package/templates/crm/app/pipeline-view.tsx

@@ -41,16 +41,16 @@ export function PipelineView({
   }, []);
 
   return (
-    <RequireAuth title="CRM" description="Your team shares one pipeline. Anyone with an account sees it.">
+    <RequireAuth>
       <Workspace pathname="/">
       {(data) => (
         <>
-          <PageHeader title="Pipeline" count={data.deals.length}>
-            <Button size="sm" onClick={() => setDialogOpen(true)}>
+          <PageHeader title="Pipeline" count={data.navCounts["/"]}>
+            <Button size="sm" onClick={() => setDialogOpen(true)} title="New deal (c)">
               <Plus />
               New deal
-              <Kbd className="ml-1 border-primary-foreground/25 bg-primary-foreground/10 text-primary-foreground/70">
-                c
+              <Kbd className="ml-0.5 hidden border-primary-foreground/25 bg-primary-foreground/10 text-primary-foreground/75 md:inline-flex">
+                C
               </Kbd>
             </Button>
           </PageHeader>

package/templates/crm/app/workspace.tsx

@@ -3,9 +3,11 @@
 import React, { useEffect, useMemo, useRef, useState } from "react";
 import { callFn, db, useRouter } from "@pylonsync/react";
 import { useAuth } from "@pylonsync/client";
-import { Sidebar } from "@/components/sidebar";
+import { Building2, CircleDollarSign, User } from "lucide-react";
+import { AppShell } from "@/components/app-shell";
 import { CommandPalette } from "@/components/command-palette";
 import type { SearchItem } from "@/lib/search";
+import { isOpen } from "@/lib/pipeline";
 
 export interface CompanyRow {
   id: string;
@@ -58,6 +60,11 @@ export interface WorkspaceData {
   activities: ActivityRow[];
   companyName: (id: string | null | undefined) => string | null;
   ownerName: (id: string | null | undefined) => string | null;
+  /**
+   * The number beside each nav link, keyed by href. Page headers read the same
+   * map, so the sidebar and the page can't disagree.
+   */
+  navCounts: Record<string, number>;
   loading: boolean;
 }
 
@@ -94,8 +101,7 @@ export function Workspace({
 
   // Whoever is signed in, named from the synced User row rather than an
   // SSR prop — see the note on useAuth above.
-  const signedInEmail =
-    (users ?? []).find((user) => user.id === userId)?.email ?? "";
+  const me = (users ?? []).find((user) => user.id === userId);
 
   const [paletteOpen, setPaletteOpen] = useState(false);
   const seeded = useRef(false);
@@ -177,6 +183,12 @@ export function Workspace({
     [dealList, companyList, contactList, byId],
   );
 
+  const navCounts = {
+    "/": dealList.filter(isOpen).length,
+    "/companies": companyList.length,
+    "/contacts": contactList.length,
+  };
+
   const data: WorkspaceData = {
     companies: companyList,
     contacts: contactList,
@@ -187,23 +199,21 @@ export function Workspace({
       const user = byId.userById.get(id ?? "");
       return user?.displayName || user?.email || null;
     },
+    navCounts,
     loading: loadingCompanies,
   };
 
   return (
-    <div className="flex h-screen overflow-hidden">
-      <Sidebar
-        workspace="CRM"
-        email={signedInEmail}
-        pathname={pathname}
-        counts={{
-          "/companies": companyList.length,
-          "/contacts": contactList.length,
-        }}
-        onOpenCommand={() => setPaletteOpen(true)}
-        onSignOut={() => void signOut()}
-      />
-      <main className="flex min-w-0 flex-1 flex-col">{children(data)}</main>
+    <AppShell
+      sidebar={{
+        user: { name: me?.displayName ?? "", email: me?.email ?? "" },
+        pathname,
+        counts: navCounts,
+        onOpenCommand: () => setPaletteOpen(true),
+        onSignOut: () => void signOut(),
+      }}
+    >
+      {children(data)}
 
       <CommandPalette
         open={paletteOpen}
@@ -225,9 +235,11 @@ export function Workspace({
             run: () => router.push("/contacts"),
           },
         ]}
+        placeholder="Search deals, companies, contacts…"
+        icons={{ deal: <CircleDollarSign />, company: <Building2 />, contact: <User /> }}
         onClose={() => setPaletteOpen(false)}
         onSelect={(item) => router.push(item.href)}
       />
-    </div>
+    </AppShell>
   );
 }

package/templates/crm/app.ts

@@ -10,7 +10,7 @@ import {
 } from "@pylonsync/sdk";
 
 // ---------------------------------------------------------------------------
-// crm — a sales CRM for a small team: companies, contacts, deals moving through
+// Dealbook (the crm template) — a sales CRM for a small team: companies, contacts, deals moving through
 // a pipeline, and an activity log.
 //
 // The realtime hook: the board subscribes to Deal, so when a teammate drags a
@@ -156,12 +156,12 @@ const manifest = buildManifest({
     userPolicy,
   ],
   auth: auth(),
-  // Self-hosted Inter: the build fetches the woff2, serves it same-origin (no
-  // third-party request, no FOUT), preloads it, and synthesizes a size-adjusted
-  // fallback so there's no layout shift.
+  // Self-hosted Instrument Sans: the build fetches the woff2, serves it
+  // same-origin, preloads it, and synthesizes a size-adjusted fallback so
+  // there's no layout shift.
   fonts: [
     font({
-      family: "Inter",
+      family: "Instrument Sans",
       variable: "--font-sans",
       weights: ["400", "500", "600", "700"],
       subsets: ["latin"],

package/templates/crm/components/activity-timeline.tsx

@@ -22,6 +22,13 @@ const ICON: Record<string, React.ReactNode> = {
   meeting: <CalendarDays />,
 };
 
+const VERB: Record<string, string> = {
+  note: "added a note",
+  call: "logged a call",
+  email: "logged an email",
+  meeting: "logged a meeting",
+};
+
 /**
  * What happened on this deal, newest first, with the composer on top so logging
  * a call takes one click from landing on the page.
@@ -100,7 +107,7 @@ export function ActivityTimeline({
           No activity yet. Log the first call or note above.
         </p>
       ) : (
-        <ol className="space-y-3">
+        <ol className="space-y-4">
           {ordered.map((activity) => (
             <li key={activity.id} className="flex gap-2.5">
               <div
@@ -112,15 +119,18 @@ export function ActivityTimeline({
                 {ICON[activity.kind] ?? ICON.note}
               </div>
               <div className="min-w-0 flex-1">
-                <div className="flex items-center gap-1.5 text-[11px] text-muted-foreground">
+                <div className="flex items-center gap-1.5 text-[12px] text-muted-foreground">
                   <Avatar name={ownerName(activity.ownerId) ?? "?"} size="sm" />
-                  <span className="capitalize">{activity.kind}</span>
+                  <span className="truncate font-medium text-foreground">
+                    {ownerName(activity.ownerId) ?? "Someone"}
+                  </span>
+                  <span className="shrink-0">{VERB[activity.kind] ?? "added a note"}</span>
                   <span aria-hidden="true">·</span>
                   <time dateTime={activity.createdAt ?? undefined}>
                     {relativeTime(activity.createdAt)}
                   </time>
                 </div>
-                <p className="mt-1 whitespace-pre-wrap text-[13px] leading-5">
+                <p className="mt-1 whitespace-pre-wrap text-[13px] leading-[1.55]">
                   {activity.body}
                 </p>
               </div>