@actuate-media/cms-admin 0.16.0 → 0.16.1

package/src/views/Dashboard.tsx

@@ -15,7 +15,7 @@
  *   >= 1024 (desktop):  stat cards 5-col, main grid is `1fr 320px`
  */
 
-import { useMemo, useState } from 'react'
+import { useEffect, useMemo, useState } from 'react'
 import {
   FileText,
   File as FileIcon,
@@ -119,6 +119,24 @@ function collectionLabel(col: CollectionMeta, plural = true): string {
   return col.labels?.singular ?? fallback
 }
 
+/**
+ * Resolve the correct editor route for a recent/queued document.
+ *
+ * Post-type documents MUST open in the section-based post editor
+ * (`/posts/:type/:id/edit`). Routing them through the generic
+ * `/:collection/:id` handler lands them in the legacy `DocumentEdit`
+ * view, which has no concept of the section model — opening + saving
+ * there silently strips a post's `sections` data. The canonical Pages
+ * collection opens in the full page editor (which wires up preview).
+ * Everything else falls through to the existing generic collection
+ * route, which already resolves correctly.
+ */
+function editPathForDoc(col: CollectionMeta | undefined, collection: string, id: string): string {
+  if (col?.type === 'post') return `/posts/${collection}/${id}/edit`
+  if (collection === 'pages') return `/pages/${id}/edit`
+  return `/${collection}/${id}`
+}
+
 function relativeTime(dateStr: string): string {
   const then = new Date(dateStr).getTime()
   const diff = Date.now() - then
@@ -252,8 +270,18 @@ export function Dashboard({ config, session, onNavigate }: DashboardProps) {
   const { data: contentHealthData, loading: contentHealthLoading } =
     useApiData<ContentHealthData>('/stats/content-health')
 
-  const greeting = useMemo(() => timeOfDayGreeting(), [])
-  const dateStr = useMemo(() => todayDateString(), [])
+  // A slow ticker (60s) so the greeting, calendar date, and "x minutes
+  // ago" relative times stay correct on a dashboard left open for hours
+  // — without it, a tab opened at 11:58am would read "Good morning" all
+  // afternoon and show stale activity timestamps.
+  const [now, setNow] = useState(() => Date.now())
+  useEffect(() => {
+    const id = setInterval(() => setNow(Date.now()), 60_000)
+    return () => clearInterval(id)
+  }, [])
+
+  const greeting = useMemo(() => timeOfDayGreeting(), [now])
+  const dateStr = useMemo(() => todayDateString(), [now])
   const userName = useMemo(() => firstNameForGreeting(session), [session])
 
   const collections = useMemo(() => resolveCollections(config), [config])
@@ -396,9 +424,12 @@ export function Dashboard({ config, session, onNavigate }: DashboardProps) {
         relTime: relativeTime(d.updatedAt),
         avatar: authorAvatar(d.author),
         statusInfo: statusBadge(d.status),
+        editPath: editPathForDoc(col, d.collection, d.id),
       }
     })
-  }, [stats, collections, activityLimit])
+    // `now` keeps the relative timestamps fresh on a long-open tab.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [stats, collections, activityLimit, now])
 
   // ── Publishing queue (scheduled docs only) ──────────────────────────────
   const publishQueue = useMemo(() => {
@@ -415,9 +446,11 @@ export function Dashboard({ config, session, onNavigate }: DashboardProps) {
           type: col ? collectionLabel(col, false) : d.collection,
           date: relativeTime(d.updatedAt),
           author: d.author,
+          editPath: editPathForDoc(col, d.collection, d.id),
         }
       })
-  }, [stats, collections])
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [stats, collections, now])
 
   // ── Content health (sourced from /stats/content-health) ─────────────────
   // Persisted by the nightly content-health cron. The four issue rows
@@ -618,12 +651,14 @@ export function Dashboard({ config, session, onNavigate }: DashboardProps) {
               <h2 className="text-foreground text-sm font-semibold">Recent Activity</h2>
               <p className="text-muted-foreground mt-0.5 text-xs">Last 7 days across all content</p>
             </div>
-            <button
-              className="text-xs font-medium text-violet-600 hover:underline dark:text-violet-400"
-              onClick={() => setActivityLimit((n) => (n >= 20 ? 8 : 20))}
-            >
-              {activity.length >= 20 ? 'Show less' : 'View all'}
-            </button>
+            {(stats?.recentDocuments?.length ?? 0) > 8 && (
+              <button
+                className="text-xs font-medium text-violet-600 hover:underline dark:text-violet-400"
+                onClick={() => setActivityLimit((n) => (n >= 20 ? 8 : 20))}
+              >
+                {activityLimit >= 20 ? 'Show less' : 'Show more'}
+              </button>
+            )}
           </header>
           {activity.length === 0 ? (
             <EmptyState
@@ -634,38 +669,40 @@ export function Dashboard({ config, session, onNavigate }: DashboardProps) {
           ) : (
             <ul role="list" className="divide-border divide-y">
               {activity.map((it) => (
-                <li
-                  key={it.id}
-                  className="hover:bg-accent/50 cursor-pointer px-4 py-3 transition-colors"
-                  onClick={() => nav(`/${it.collection}/${it.id}`)}
-                >
-                  <div className="flex min-w-0 items-start gap-3">
-                    <div
-                      className="mt-0.5 flex h-7 w-7 shrink-0 items-center justify-center rounded-full text-[11px] font-bold text-white"
-                      style={{ background: it.avatar.color }}
-                      aria-hidden
-                    >
-                      {it.avatar.initials}
-                    </div>
-                    <div className="min-w-0 flex-1">
-                      <p className="text-foreground truncate text-sm leading-snug">
-                        <span className="font-semibold">
-                          &ldquo;{it.title || 'Untitled'}&rdquo;
-                        </span>{' '}
-                        <span className="text-muted-foreground">— {it.typeLabel}</span>
-                      </p>
-                      <div className="text-muted-foreground mt-1 flex flex-wrap items-center gap-2 text-[11px]">
-                        <span
-                          className={`inline-flex items-center rounded px-1.5 py-0.5 text-[10px] font-medium ${it.statusInfo.cls}`}
-                        >
-                          {it.statusInfo.label}
-                        </span>
-                        <span className="max-w-[120px] truncate">{it.author}</span>
-                        <span aria-hidden>·</span>
-                        <span>{it.relTime}</span>
+                <li key={it.id}>
+                  <button
+                    type="button"
+                    onClick={() => nav(it.editPath)}
+                    className="hover:bg-accent/50 focus-visible:bg-accent/50 w-full cursor-pointer px-4 py-3 text-left transition-colors"
+                  >
+                    <div className="flex min-w-0 items-start gap-3">
+                      <div
+                        className="mt-0.5 flex h-7 w-7 shrink-0 items-center justify-center rounded-full text-[11px] font-bold text-white"
+                        style={{ background: it.avatar.color }}
+                        aria-hidden
+                      >
+                        {it.avatar.initials}
+                      </div>
+                      <div className="min-w-0 flex-1">
+                        <p className="text-foreground truncate text-sm leading-snug">
+                          <span className="font-semibold">
+                            &ldquo;{it.title || 'Untitled'}&rdquo;
+                          </span>{' '}
+                          <span className="text-muted-foreground">— {it.typeLabel}</span>
+                        </p>
+                        <div className="text-muted-foreground mt-1 flex flex-wrap items-center gap-2 text-[11px]">
+                          <span
+                            className={`inline-flex items-center rounded px-1.5 py-0.5 text-[10px] font-medium ${it.statusInfo.cls}`}
+                          >
+                            {it.statusInfo.label}
+                          </span>
+                          <span className="max-w-[120px] truncate">{it.author}</span>
+                          <span aria-hidden>·</span>
+                          <span>{it.relTime}</span>
+                        </div>
                       </div>
                     </div>
-                  </div>
+                  </button>
                 </li>
               ))}
             </ul>
@@ -691,7 +728,7 @@ export function Dashboard({ config, session, onNavigate }: DashboardProps) {
                   // link to the first scheduled item — that's where authors
                   // typically need to land to reschedule or cancel.
                   const first = publishQueue[0]
-                  if (first) nav(`/${first.collection}/${first.id}`)
+                  if (first) nav(first.editPath)
                 }}
               >
                 Manage
@@ -707,21 +744,23 @@ export function Dashboard({ config, session, onNavigate }: DashboardProps) {
             ) : (
               <ul role="list" className="divide-border divide-y">
                 {publishQueue.map((q) => (
-                  <li
-                    key={q.id}
-                    className="hover:bg-accent/50 flex min-w-0 cursor-pointer items-center gap-2.5 px-4 py-2.5 transition-colors"
-                    onClick={() => nav(`/${q.collection}/${q.id}`)}
-                  >
-                    <span className="h-2 w-2 shrink-0 rounded-full bg-amber-500" aria-hidden />
-                    <div className="min-w-0 flex-1">
-                      <p className="text-foreground truncate text-sm font-medium">{q.title}</p>
-                      <p className="text-muted-foreground truncate text-[11px]">
-                        {q.date} · {q.author}
-                      </p>
-                    </div>
-                    <span className="border-border bg-background text-muted-foreground shrink-0 rounded border px-1.5 py-0.5 text-[10px] capitalize">
-                      {q.type}
-                    </span>
+                  <li key={q.id}>
+                    <button
+                      type="button"
+                      onClick={() => nav(q.editPath)}
+                      className="hover:bg-accent/50 focus-visible:bg-accent/50 flex w-full min-w-0 cursor-pointer items-center gap-2.5 px-4 py-2.5 text-left transition-colors"
+                    >
+                      <span className="h-2 w-2 shrink-0 rounded-full bg-amber-500" aria-hidden />
+                      <div className="min-w-0 flex-1">
+                        <p className="text-foreground truncate text-sm font-medium">{q.title}</p>
+                        <p className="text-muted-foreground truncate text-[11px]">
+                          {q.date} · {q.author}
+                        </p>
+                      </div>
+                      <span className="border-border bg-background text-muted-foreground shrink-0 rounded border px-1.5 py-0.5 text-[10px] capitalize">
+                        {q.type}
+                      </span>
+                    </button>
                   </li>
                 ))}
               </ul>
@@ -786,36 +825,38 @@ export function Dashboard({ config, session, onNavigate }: DashboardProps) {
             ) : (
               <ul role="list" className="divide-border divide-y">
                 {contentHealth.issues.map((iss, i) => (
-                  <li
-                    key={i}
-                    className="hover:bg-accent/50 flex cursor-pointer items-center gap-2.5 px-4 py-2 transition-colors"
-                    onClick={() => nav('/seo')}
-                  >
-                    <span
-                      className={`h-1.5 w-1.5 shrink-0 rounded-full ${
-                        iss.tone === 'err'
-                          ? 'bg-red-500'
-                          : iss.tone === 'warn'
-                            ? 'bg-amber-500'
-                            : 'bg-muted-foreground'
-                      }`}
-                      aria-hidden
-                    />
-                    <span className="text-muted-foreground flex-1 truncate text-xs">
-                      {iss.label}
-                    </span>
-                    <span
-                      className={`shrink-0 text-sm font-semibold ${
-                        iss.tone === 'err'
-                          ? 'text-red-600 dark:text-red-400'
-                          : iss.tone === 'warn'
-                            ? 'text-amber-600 dark:text-amber-400'
-                            : 'text-muted-foreground'
-                      }`}
+                  <li key={i}>
+                    <button
+                      type="button"
+                      onClick={() => nav('/seo')}
+                      className="hover:bg-accent/50 focus-visible:bg-accent/50 flex w-full items-center gap-2.5 px-4 py-2 text-left transition-colors"
                     >
-                      {iss.count}
-                    </span>
-                    <ChevronRight className="text-muted-foreground/60 h-3.5 w-3.5 shrink-0" />
+                      <span
+                        className={`h-1.5 w-1.5 shrink-0 rounded-full ${
+                          iss.tone === 'err'
+                            ? 'bg-red-500'
+                            : iss.tone === 'warn'
+                              ? 'bg-amber-500'
+                              : 'bg-muted-foreground'
+                        }`}
+                        aria-hidden
+                      />
+                      <span className="text-muted-foreground flex-1 truncate text-xs">
+                        {iss.label}
+                      </span>
+                      <span
+                        className={`shrink-0 text-sm font-semibold ${
+                          iss.tone === 'err'
+                            ? 'text-red-600 dark:text-red-400'
+                            : iss.tone === 'warn'
+                              ? 'text-amber-600 dark:text-amber-400'
+                              : 'text-muted-foreground'
+                        }`}
+                      >
+                        {iss.count}
+                      </span>
+                      <ChevronRight className="text-muted-foreground/60 h-3.5 w-3.5 shrink-0" />
+                    </button>
                   </li>
                 ))}
               </ul>