| 12 | 12 | | import { dayGroups } from "../../lib/folios"; |
| 13 | 13 | | import { TimeAgo } from "../ui"; |
| 14 | 14 | | import { Hint } from "../ui/hint"; |
| 15 | + | import { useFoliosData } from "./actions"; |
| 15 | 16 | | import { FolioThumbnail, KindIcon } from "./kinds"; |
| 16 | 17 | | import { FolioMenu } from "./menu"; |
| 17 | 18 | | import { AccessMark } from "./parts"; |
| 18 | 19 | | |
| 20 | + | /** Where it sits, in a word: its space; else your Private, or whose it is when it's someone else's. */ |
| 21 | + | function placeOf(folio: Folio, me: string | undefined): string { |
| 22 | + | if (folio.space) return folio.space.name; |
| 23 | + | return `user:${folio.owner.id}` === me ? "Private" : folio.owner.display_name; |
| 24 | + | } |
| 25 | + | |
| 19 | 26 | | function Edited({ folio }: { folio: Folio }) { |
| 20 | 27 | | const by = folio.edited_by?.display_name; |
| 21 | 28 | | return ( |
| ⋯ |
| 28 | 35 | | } |
| 29 | 36 | | |
| 30 | 37 | | export function FolioRow({ slug, folio, onError }: { slug: string; folio: Folio; onError?: (message: string) => void }) { |
| 38 | + | const me = useFoliosData()?.me.key; |
| 31 | 39 | | return ( |
| 32 | 40 | | <li className="group relative flex items-center gap-3 px-3 py-2 transition-colors hover:bg-raised/60 sm:px-4"> |
| 33 | 41 | | <KindIcon kind={folio.kind} /> |
| ⋯ |
| 45 | 53 | | <span className="relative hidden shrink-0 sm:flex"> |
| 46 | 54 | | <AccessMark folio={folio} /> |
| 47 | 55 | | </span> |
| 48 | | − | <span className="hidden w-32 shrink-0 truncate text-xs text-faint md:block">{folio.space?.name ?? "Private"}</span> |
| 56 | + | <span className="hidden w-32 shrink-0 truncate text-xs text-faint md:block">{placeOf(folio, me)}</span> |
| 49 | 57 | | <span className="relative w-28 shrink-0 text-right max-sm:w-auto"> |
| 50 | 58 | | <Edited folio={folio} /> |
| 51 | 59 | | </span> |
| ⋯ |
| 76 | 84 | | } |
| 77 | 85 | | |
| 78 | 86 | | export function FolioCard({ slug, folio, onError }: { slug: string; folio: Folio; onError?: (message: string) => void }) { |
| 87 | + | const me = useFoliosData()?.me.key; |
| 79 | 88 | | return ( |
| 80 | 89 | | <div className="group relative flex flex-col overflow-hidden rounded-xl border border-line bg-surface transition-colors hover:border-line-strong"> |
| 81 | 90 | | <div className="pointer-events-none h-32 shrink-0 border-b border-line"> |
| ⋯ |
| 89 | 98 | | {folio.title || "Untitled"} |
| 90 | 99 | | </Link> |
| 91 | 100 | | <span className="mt-0.5 flex items-center gap-1.5 text-[0.6875rem] text-faint"> |
| 92 | | − | <span className="truncate">{folio.space?.name ?? "Private"}</span> |
| 101 | + | <span className="truncate">{placeOf(folio, me)}</span> |
| 93 | 102 | | <span aria-hidden="true">·</span> |
| 94 | 103 | | <span className="relative"> |
| 95 | 104 | | <Edited folio={folio} /> |
