ignore: share

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>
                           )}

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;
 

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>