diff options
| -rw-r--r-- | packages/web/src/components/Share.tsx | 18 | ||||
| -rw-r--r-- | packages/web/src/components/share.module.css | 33 | ||||
| -rw-r--r-- | packages/web/src/pages/s/[id].astro | 4 |
3 files changed, 40 insertions, 15 deletions
diff --git a/packages/web/src/components/Share.tsx b/packages/web/src/components/Share.tsx index d210911e2..dacf3b2f7 100644 --- a/packages/web/src/components/Share.tsx +++ b/packages/web/src/components/Share.tsx @@ -631,7 +631,7 @@ export default function Share(props: { const result = { rootDir: undefined as string | undefined, created: undefined as number | undefined, - updated: undefined as number | undefined, + completed: undefined as number | undefined, messages: [] as Message.Info[], models: {} as Record<string, string[]>, cost: 0, @@ -643,7 +643,6 @@ export default function Share(props: { } result.created = props.info.time.created - result.updated = props.info.time.updated for (let i = 0; i < messages().length; i++) { const msg = messages()[i] @@ -678,6 +677,10 @@ export default function Share(props: { if (assistant.path?.root) { result.rootDir = assistant.path.root } + + if (msg.metadata?.time.completed) { + result.completed = msg.metadata?.time.completed + } } } return result @@ -871,6 +874,17 @@ export default function Share(props: { expand={isLastPart()} text={stripEnclosingTag(part().text)} /> + <Show when={isLastPart() && data().completed}> + <span data-part-footer + title={DateTime.fromMillis( + data().completed || 0, + ).toLocaleString(DateTime.DATETIME_FULL_WITH_SECONDS)} + > + {DateTime.fromMillis(data().completed || 0).toLocaleString( + DateTime.DATETIME_MED + )} + </span> + </Show> </div> </div> )} diff --git a/packages/web/src/components/share.module.css b/packages/web/src/components/share.module.css index 505906dee..fc03134f5 100644 --- a/packages/web/src/components/share.module.css +++ b/packages/web/src/components/share.module.css @@ -1,9 +1,14 @@ .root { - padding-top: 0.5rem; display: flex; flex-direction: column; gap: 2.5rem; line-height: 1; + padding: 1.5rem; + + @media (max-width: 30rem) { + padding: 1rem; + gap: 2rem; + } --sm-tool-width: 28rem; --md-tool-width: 40rem; @@ -48,18 +53,17 @@ .header { display: flex; flex-direction: column; - gap: 0.75rem; + gap: 1rem; @media (max-width: 30rem) { gap: 1rem; } [data-section="title"] { - h1 { - font-size: 1.75rem; + font-size: 2.75rem; font-weight: 500; - line-height: 1.25; + line-height: 1.15; letter-spacing: -0.05em; display: -webkit-box; -webkit-box-orient: vertical; @@ -67,7 +71,8 @@ overflow: hidden; @media (max-width: 30rem) { - font-size: 1.25rem; + font-size: 1.75rem; + line-height: 1.25; -webkit-line-clamp: 3; } } @@ -76,7 +81,7 @@ [data-section="row"] { display: flex; flex-direction: column; - gap: 0.375rem; + gap: 0.5rem; } [data-section="stats"] { @@ -308,9 +313,9 @@ span:first-child { flex: 0 0 auto; display: block; - margin: 1px; - width: 16px; - height: 16px; + margin: 2px; + width: 14px; + height: 14px; border-radius: 50%; background-color: var(--sl-color-divider); @@ -488,12 +493,13 @@ flex-direction: column; align-items: flex-start; gap: 0.5rem; + width: 100%; + max-width: var(--sm-tool-width); & > [data-section="body"] { - width: var(--sm-tool-width); + width: 100%; border: 1px solid var(--sl-color-divider); border-radius: 0.25rem; - max-width: 100%; [data-section="header"] { position: relative; @@ -611,7 +617,8 @@ list-style-type: none; padding: 0; margin: 0; - width: var(--sm-tool-width); + width: 100%; + max-width: var(--sm-tool-width); border: 1px solid var(--sl-color-divider); border-radius: 0.25rem; diff --git a/packages/web/src/pages/s/[id].astro b/packages/web/src/pages/s/[id].astro index c196a4290..2b7cc8a95 100644 --- a/packages/web/src/pages/s/[id].astro +++ b/packages/web/src/pages/s/[id].astro @@ -74,7 +74,11 @@ const ogImage = `https://social-cards.sst.dev/opencode-share/${encodedTitle}.png body > .page > .main-frame .main-pane > main > .content-panel:first-of-type { display: none; } +body > .page > .main-frame .main-pane > main { + padding: 0; +} body > .page > .main-frame .main-pane > main > .content-panel + .content-panel { border-top: none !important; + padding: 0; } </style> |